FACULTÉ POLYDISCIPLAIRE

SIDI BENNOUR
LP - IMA

RAPPORT
PROJET FIN
D’ÉTUDE
PLATEFORME
D’ENSEIGNEMENT
EN LIGNE
EL ROOM
E-LEARNING ROOM

 Sous l’encadrement de :
[Link] ZAOUIT & [Link]
Durée de stage : CHARAFEDDINE WAFAE
01/05/2020 au 30/06/2021
 jurys:
 Réalisé par : 1 [Link] & [Link]
Année Universitaire :
CHAKFI Ahmed 2020/2021
HICHAM LAYLA
 Dédicace

À nos très chers parents,

Rien au monde ne pourrait compenser les sacrifices que vous avez consentis pour notre

éducation et pour le ‘bien-être’ afin qu’on puisse consacrer pleinement à nos études.

Puisse Dieu, le tout puissant, vous procure santé, prospérité et longévité.

Merci pour votre aide, votre soutien et votre patience. On vous dédie ce modeste travail

en signe de reconnaissance et d'admiration.

À nos camarades de classe de la troisième Année licence professionnelle FACULTE

POLYDISCIPLINAIRE SIDI BENNOUR, de la Promotion 2020/ 2021 .

Nous avons passé d'agréables moments de confrérie, de camaraderie, d'efforts et de

persévérance, j'espère pour vous tous une longue carrière et une meilleure vie tant sur le

plan professionnel que personnel.

À tous ceux qui me témoignent leur sympathie et que je considère comme étant des amis

à part entière.

2
 Remerciment

Au terme de ce travail,

Nous saisissons cette occasion pour adresser nos sincères remerciement à Monsieur SAHABI
Mohammed, le doyen de la Faculté Polydisciplinaire Sidi Bennour.

Je tiens à remercier Monsieur MEZIAN Mohamed, le gérant de l’entreprise TouchMedia qui

a accepté de m’accueillir en stage au sein de son entreprise et pour ses supports tout au long
de la période de mon stage en bénéficiant de ses expériences professionnelles et pour son
grand cœur et qui n’a pas hésité de me fournir ses aides et ses conseils pour mettre en propre
mon travail.

Je remercie Madame TAHTAH Wafae Chef d’ingénieurs et mon maître de stage, pour sa
confiance et les connaissances qu’il a su partager avec moi. Je le remercie aussi pour sa
disponibilité et la qualité de son encadrement en entreprise.

À cet effet, je remercie tout le personnel de l’entreprise, qui m'a bien accueilli
chaleureusement au sein de son équipe et ont collaboré pendant ma période de stage à me
former, m'initier et me guider tout au long de mes travaux pour appliquer toutes mes
connaissances théoriques d'une façon réelle et pratique.

On souhaite adresser les remerciements au corps professoral et administratif de la Faculté

Polydisciplinaire Sidi Bennour, pour la qualité de l’enseignement.

Je désire aussi remercier les professeurs de la Faculté Polydisciplinaire, qui m’ont fourni les
outils nécessaires au bon déroulement de mon stage. Je tiens à remercier spécialement
Monsieur AIT ZAOUIT CHARAFEDDINE mon maitre et encadrant interne de stage, qui fut le
premier à me soutenir dans ma démarche de stage, je le remercie pour son aide et ses
efforts précieux, et qui a veillé étape par étape pour pouvoir me mettre dans le bon chemin.

Je voudrais exprimer ma reconnaissance envers les amis et collègues qui m’ont apporté leur
soutien moral et intellectuel tout au long de mon stage.

3
 Table de Matière

INTRODUCTION GÉNÉRALE ................................................................................................................ 6

CHAPITRE 1 : PRÉSENTATION DE L’ENTREPRISE ................................................................................. 7

I. Choix de l'entreprise ................................................................................................................. 8
II. Situation géographique ............................................................................................................. 8
III. Activité de l'entreprise .............................................................................................................. 8
IV. Organisation interne de l’entreprise.......................................................................................... 8
CHAPITRE 2 : GÉNÉRALITÉS SUR E-LEARNING ................................................................................... 10
I. Introduction ............................................................................................................................ 11
II. Taxonomie de Bloom .............................................................................................................. 11
III. MOOC ..................................................................................................................................... 14
IV. Ressources pédagogiques et activités...................................................................................... 16
V. Triangle d’apprentissage ......................................................................................................... 17
VI. Conclusion .............................................................................................................................. 19
CHAPITRE 3 : ETUDE DES SOLUTIONS EXISTANTES ........................................................................... 20
I. Introduction ............................................................................................................................ 21
II. MOODLE ................................................................................................................................. 21
III. ZOOM ..................................................................................................................................... 24
IV. MICROSOFT TEAMS................................................................................................................. 27
V. GOOGLE MEET ........................................................................................................................ 29
VI. TABLEAU COMPARATIF ........................................................................................................... 31
VII. Conclusion .............................................................................................................................. 32

CHAPITRE 4 : ENVIRONNEMENT DE DÉVELOPPEMENT ..................................................................... 33

I. Introduction ............................................................................................................................ 34
II. Environnement ....................................................................................................................... 34
III. Conclusion .............................................................................................................................. 40

CHAPITRE 5 : SPÉCIFICATION DES BESOINS ET UTILISATION............................................................. 41

I. Introduction ............................................................................................................................ 42
II. Spécifications des besoins ....................................................................................................... 42
III. Utilisation de la plateforme ..................................................................................................... 43
IV. Conclusion .............................................................................................................................. 45

4
CHAPITRE 6 : CONCEPTION ET RÉALISATION .................................................................................... 46
I. Introduction ............................................................................................................................ 47
II. Contexte et problématique ..................................................................................................... 47
III. Objectif ................................................................................................................................... 47
IV. Méthodologie de conception .................................................................................................. 48
V. Modélisation des interfaces .................................................................................................... 49
VI. Modélisation des données ...................................................................................................... 62
VII. Réalisation et fonctionnement ................................................................................................ 66
VIII. Conclusion .............................................................................................................................. 90

CONCLUSION GÉNÉRALE .................................................................................................................. 91

RÉFÉRENCES ..................................................................................................................................... 92

5
 Introduction Générale

Dans le cadre de la troisième année de la licence professionnelle à LA FACULTE POLYDISCIPLINAIRE

SIDI BENNOUR, Informatique et Mathématique Appliquée, et dans le but de faciliter notre

intégration professionnelle, d’approfondir nos connaissances, de perfectionner notre formation et

d’assurer l’application pratique de l’enseignement que nous suivons à LA FACULTE

POLYDISCIPLINAIRE.

J’ai effectué mon stage fin d’étude à TOUCHEMEDIA au sein de département Informatique de

l’entreprise, d’où je me suis orienté vers un projet qui concerne une plateforme WEB

d’enseignement en ligne.

Le présent rapport rend compte le projet lors de ce stage :

6
CHAPITRE 1 : PÉRSENTATION DE L’ENTREPRISE

7
 TOUCH MEDIA a été́ fondée en 2009 par Mohamed Mezian, son Directeur Général, et le
groupe de communication DBM media group.

I. Choix de l’entreprise :

J'ai choisi cette entreprise (T.M) parce qu'elle m'a fortement attiré par les secteurs qu'elle couvre,
ceux-ci sont en adéquation parfaite avec mes intérêts pour l'informatique.
Son infrastructure est intéressante et permet le contact avec toutes les personnes de la société.
Cette société est logée dans une zone commerciale très active.

II. Situation géographique :

TouchMedia est situé à 67 Avenue des Forces Armées Royales, imm. RMA Watania 12°ét au
Centre-Ville de CASABLANCA.

III. Activités de l’entreprise :

Cette entreprise est une agence de communication et de régie digitale leader au Maroc, elle est
présente en Afrique, à travers ses filiales “Network of Africa”, en Tunisie, au Sénégal et en
France.
Elle est à l’origine de la première plateforme marocaine de publicité native premium.

IV. Organisation interne de l’entreprise :

a. Services :
« TM » est une grande entreprise de forme juridique Société Anonyme (SA), principalement
constituée de six services, chacun de ces services comprenant un effectif d’employés avec des cadres
supérieurs :

 Le premier service est un service de stratégie en communication média digitale composé d’une équipe
d'experts accompagne les clients dans l'identification des besoins, permettant de répondre au mieux
aux objectifs, en fonction des besoins : campagnes performance, campagnes virales, campagnes
branding, campagnes réseaux sociaux…

 Le deuxième service est celui de l’achat média digital qui communique des média-plans en adaptation
avec les objectifs de nos clients.

 Le troisième service concerne Les services de gestion de campagnes sur RTB (automatisation d'achat
d'espace publicitaire digital).

 Le quatrième service consiste à la conception digitale permet de réaliser des visuels réussis, des
bannières rich-media avancées, et des sites et landing pages responsives.

 Un autre service est de gestion de communauté d’où l’équipe de gestion de médias sociaux accompagne
les clients dans la réalisation et l'exécution de leurs stratégies de communication sur les réseaux sociaux.

 Le sixième est l’E-Réputation qui propose la configuration de stratégies de suivi et de veille E-

Réputation avec la technologie Brandwatch.

8
 b. Gestion de clients :
La gestion des clients peut être faite par :

 Numéro de téléphone.
 Application mobile utilisable dans différents domaines.
 E-mail.
 Service de Chat.
 Réseaux sociaux.

L’organigramme suivant représente les services de TouchMedia :

Directeur Générale

Interactive Art Directeur Consultante Web

Département Département Département Département

Performance Commercial Administratif Informatique
Département Commercial

Social Média Traffic manager Digital analyste Office Manager Développeur

Manager Web

Trading desk Responsable Comptable Designer Web

manager Rapport

9
CHAPITRE 2 : GÉNÉRALITÉS SUR E-LEARNING

10
I. INTRODUCTION :

Depuis la naissance du 20eme siècle, le monde a connu une évolution d’innovation des
technologies, du coup cette évolution a augmenté d’une manière incroyable dans le 21eme
siècle, notamment dans le secteur d’information et communication, qui va influencer par la
suite sur d’autres domaines, prenant l’exemple de l’enseignement qui est un agent puissant
de changement, en générale est un facteur essentiel de développement économique et
social.

Alors cet évolution a permet de produire un nouveau modèle d’éducation - que peut-on -
l’appeler l’éducation moderne - et qui est de très bonne qualité, car l’enseignement est une
éducation théorique et pratique qui élève le niveau de réflexion de l’esprit, dont lequel les
connaissances sont le cœur du développement, de nouvelles pédagogique spécifique dans
l’apprentissage, et grâce l’internet, un nouveau mode d’enseignement à distance a fait
surface que ce soit scolaire, universitaire, professionnel.

En d’autres termes il ouvre de nouvelles voies à l’apprentissage en général il correspond à

l’utilisation des technologies informatiques, alors on parle d’enseignement en ligne, qui aide
les apprenants - malgré la différence de distance - à passer une bonne communication ainsi
qu’améliorer leurs performances et connaissances par l’échange d’informations nécessaires
ce qui permet une totale autonomie des utilisateurs.

II. Taxonomie de Bloom :

11
a. Définition :

C’est en 1956 que Benjamin Bloom, psychologue en éducation, a fait émerger une
classification des compétences impliquées dans l’apprentissage. le mot taxonomie
signifie (du grec « taxis » et « nomos », qui signifie la « règle de classification »).

La taxonomie de Bloom est un modèle créer par 34 universitaires américains parmi

eux le psychologue Benjamin Bloom, ce modèle concerne la pédagogie proposant
une classification des niveaux d'acquisition des compétences.
De ses travaux Benjamin Bloom , psychologue en éducation, a fait émerger une
classification des niveaux de pensée importants dans le processus d'apprentissage.
Vis à vis du domaine cognitif, Bloom identifie 6 types d'activités, du plus simple au
plus complexe, comprenant chacune un ou plusieurs sous-domaines :
Bloom fait l'hypothèse que les habiletés peuvent être mesurées sur un continuum
allant de simple à complexe.
La taxonomie des objectifs éducationnels de Bloom est composée des six niveaux
suivants :
la connaissance, la compréhension, l'application, l'analyse, la synthèse et
l’évaluation.

b. Fonctionnement :

La taxonomie organise l'information de façon hiérarchique, de la simple restitution

de faits jusqu'à la manipulation complexe des concepts, où on bâtit depuis ce qui est
facile à connaître, accessible aux sens et agile à communiquer.
L'usage de taxonomies se retrouve entre autres dans la pédagogie par objectifs, ou
dans les propositions du mouvement de l'éducation nouvelle. C'est donc une
approche Bottom-up où on bâtit depuis ce qui est facile à connaître, accessible aux
sens et aisé à communiquer - des fondations, en quelque sorte - vers des
constructions mentales plus élaborées ensuite.
Certains référentiels de l'Éducation nationale française définissent quatre niveaux
d'acquisition et de maîtrise des savoirs, qui correspondent aux quatre premiers
niveaux de la taxonomie de Bloom :

Niveau d'information : le savoir est relatif à l'appréhension d’une vue d’ensemble

d’un sujet : les réalités sont montrées sous certains aspects de manière partielle ou
globale .
Niveau d'expression : le savoir est relatif à l'acquisition des moyens d'expression et
de communication : définir, utiliser les termes composant la discipline. Il s'agit de
maîtriser un savoir .
Niveau de la maîtrise d'outils : le savoir est relatif à la maîtrise de procédés et
d'outils d'étude ou d'action : utiliser, manipuler des règles ou ensembles de règles
(algorithmes), de principes, en vue d'un résultat à atteindre. Il s'agit de maîtriser un
savoir-faire .

12
 Niveau de la maîtrise méthodologique : le savoir est relatif à la maîtrise d'une
méthodologie de pose et de résolution de problèmes : assembler, organiser les
éléments d'un sujet, identifier les relations, raisonner à partir de ces relations,
décider en vue d'un but à atteindre. Il s'agit de maîtriser une démarche : induire,
déduire, expérimenter, se documenter.
Chaque niveau englobe les précédents.

Aux États-Unis, la taxonomie de Bloom est bien connue des enseignants des
programmes K–12 qui s'adressent aux élèves des niveaux primaire et secondaire (qui
comptent 12 années de scolarité).

c. Composition :

Ce modèle est proposé comme une aide aux enseignants pour formuler des
questions qui permettent de situer le niveau de compréhension des élèves.
Elle peut être résumée en six niveaux hiérarchiques:
Connaissance, Compréhension, Application, Synthèse, Évaluation, Analyse.

1) La connaissance : c’est le fait de mémoriser des informations.

Opérations : définir, dupliquer, nommer, identifier, reproduire, etc.

2) La compréhension : c’est le fait d’interpréter de l’information en fonction de ce

qui a été appris.
Opérations : classifier, décrire, reconnaître, reformuler, traduire, etc.

13
 3) L’application : c’est le fait de sélectionner des données pour réaliser une tâche ou
résoudre un problème.
Opérations : démontrer, illustrer, interpréter, planifier, schématiser, etc.

4) L’analyse : c’est le fait de mettre en relation des faits et des énoncés ou questions.
Opérations : estimer, calculer, critiquer, distinguer, questionner, etc.

5) La synthèse : c’est le fait de synthétiser des idées en une proposition, un plan, un

produit nouveau.
Opérations : collecter, construire, formuler, gérer, proposer, installer, etc.

6) L’évaluation : c’est le fait d’estimer et de critiquer en fonction de critères que l’on

se construit.
Opérations : argumenter, évaluer, justifier, prédire, chiffrer, etc.

III. MOOC :

a. Définition :

14
En français formation en ligne ouverte à tous, ou encore cours en ligne ouvert et massif est un
type ouvert de formation à distance capable d'accueillir un grand nombre de participants.
Ces participants aux cours, enseignants et élèves, sont dispersés géographiquement et
communiquent uniquement par Internet. Des ressources éducatives libres sont souvent
utilisées. Dans le monde anglophone, il peut arriver que plus de 100 000 personnes soient
réunies pour un cours.

b. Types :

Il existe deux grands types de cours en ligne ouverts et massifs :

 les xMOOC qui visent à valider les compétences acquises en délivrant un certificat de
réussite.
 les cMOOC dont les objectifs d’apprentissage sont ouverts et dont les participants créent
dans une large mesure le contenu.

Ces cMOOC sont fondés sur la théorie de la connectivité et sur une pédagogie ouverte, qui
s'appuient sur des réseaux de contenus et d'individus, d'autres typologies ont été proposées,
par exemple pour ajouter un troisième type de MOOC tourné vers un projet par équipes et
par projet. On a alors trois catégories de MOOC, selon ce qu'ils mettent en avant : le réseau
des apprenants (Network-based), le travail d'équipe (Task-based) ou le contenu (Content-
based).

c. Plateformes :

Début 2013, trois catégories de plates-formes logicielles hébergeant des MOOC existent:

 Celles qui ont directement été conçues pour être des MOOC et sont portées par des
entreprises ou des fondations Coursera, Udacity, edX, FutureLearn19. Ces plates-formes
sont réservées aux universités les plus connues D’autres portées par des entreprises
proposant au départ des logiciel d’apprentissage aux écoles: Canvas Network et
CourseSites by Blackboard.
 Celles qui sont portées par des entreprises proposant au départ des LMS aux institutions
d'enseignement, comme Canvas Network et CourseSites by Blackboard et qui les ont
adaptées pour passer au « massif ». Au contraire des précédentes, leur stratégie est de
mettre les MOOC à la portée de toutes les universités, afin de permettre l'émergence d'une
offre plus large et ainsi aux meilleurs cours d'émerger sur la base du mérite.
 Les plates-formes de logiciels libres, qu'il faut installer soi-même: Chamilo LMS, Moodle,
Course Builder de Google, qui utilise Google Apps, Sakai CLE, développée par la fondation
Apereo et utilisée par les MOOC UvA et Edulib, OpenMooc animé par UNED Abierta,
l'université ouverte espagnole, Class2Go ou la version open source de Canvas. Le code-
source d'EdX a également été libéré en juin 2013. Claroline Connect dont l'originalité est
de fournir aux enseignants comme aux apprenants les mêmes outils, permettant de
développer des Mooc sur tout le spectre connu, du xMooc au cMooc.

15
IV. Ressource pédagogique et activités :

a. Définition :

Ensemble des services en ligne, des logiciels de gestion, d'édition et de communication, il s'agit
d'unités significatives que les enseignants ou les étudiants peuvent utiliser dans une activité
ayant pour but l'apprentissage en utilisant les technologies de l’information et de la
communication.
Il existe différents types d’apprentissage et différentes formes d’intelligence, c’est pourquoi il est
important de diversifier les ressources et supports.

Cette variété rend la définition d’une ressource pédagogique complexe et les appellations
nombreuses et interchangeables : « supports pédagogiques », « outils pédagogiques »…
Cependant, nous nous accordons à dire qu’il s’agit d’un élément possédant une portée
pédagogique, pouvant servir de matière première, d’outil, à l’enseignant pour bâtir sa méthode
de travail et/ou compléter une leçon existante.

b. Caractéristiques :

Les ressources pédagogiques numériques correspondent à des objets de taille très différentes.

Les objets peuvent être classé en 3 catégories:

 Les objets médiatiques, peu complexes et dépendant de leur contexte.
 Les objets utilitaires, qui sont plus dépendants de leur contexte mais n'intègrent pas de scénario
d'utilisation.
 Les objets d'apprentissage pour lesquels les éléments de base de l'information et le scénario
créent la fonction de l'objet d'apprentissage.

c. Classification :

En ce qui nous concerne, la classification plus descriptive est :

 Les supports de cours:

16
 Utilisés le plus souvent par les professeurs lors de leurs heures d'enseignement. Ils sont le plus
souvent sous forme de présentation Power point, Pdf associant des vidéos et des images. Leur
contenu est parfois très sommaire, plan du cours, support de présentation (trame pédagogique
sans développement), images, graphiques (expliqués en cours par l'enseignant).
Les supports de cours sont souvent utilisés pour un enseignement de type amélioré,
l'enseignant donne accès à son support de cours avant de faire le cours en présentiel, l'étudiant
a le temps de le travailler, le déroulement pédagogique s'en voit modifié (questionnement plus
précis), le contenu est plus riche en explications, démonstrations, etc.
L'avantage réside dans la simplicité technique de mise en forme.

 Chaine de médias:
est un procédé technologique et méthodologique, issu de la recherche en ingénierie
documentaire.
L'approche consiste à réaliser un modèle de document, à assister les tâches de création du
contenu et à automatiser leur mise en forme.
Les ressources pédagogiques, construites sous forme de chaîne éditoriale, consistent à mettre
en forme plusieurs médias : texte, image, graphique, audio, vidéo, animation, dans un but
d'apprentissage. La trame pédagogique y est compréhensible pour l'étudiant, son contenu plus
complet.
Ce procédé est principalement utilisé pour des formations à distance.

 Vidéo streaming:
C'est le principe utilisé pour l'envoi de contenu en direct (ou léger différé). Ce type de ressource
pédagogique est uniquement basé sur la vidéo, souvent synchronisée avec une présentation
écrite (style Power point). Principalement utilisée lors de congrès, cette technologie est de plus
en plus employée par les enseignants pour transmettre ou retransmettre leur cours.
La qualité de la diffusion dépend par leur débit. C'est le principal inconvénient de ce type de
ressource pédagogique, qui est souvent contourné par un téléchargement du document.

 Serious game:
Est une application informatique qui combine une intention sérieuse, de type pédagogique,
informative, communicationnelle, marketing, idéologique ou d'entraînement avec des ressorts
ludiques issus du jeu vidéo ou de la simulation informatique. La vocation d'un Serious Game est
donc de rendre attrayante la dimension sérieuse par une forme, une interaction, des règles et
éventuellement des objectifs ludiques.
Par définition, tout jeux est éducatif. Au même titre que les QCM, le développement des TICE
favorise son essor. Cependant, certains obstacles sont encore présents notamment concernant
la définition des objectifs pédagogiques sur certaines formations.
Comme toute nouvelle discipline, un temps d'adaptation et de tests seront nécessaires.

IV. Triangle d’apprentissage :

17
 a. Définition :

Le triangle pédagogique représente trois sommets ou pôles : le Savoir, l'Enseignant et

l'Apprenant. Il modélise les éléments fondamentaux en relation dans l'acte d'enseigner.

b. Les Processus :

l’acte pédagogique est une relation triangulaire basée sur le savoir, le professeur, les élèves, et
qui met en relation les 3 processus: Enseigner, Former, Apprendre.
• Du côté de la relation savoir-professeur, on retrouve l'enseignement, le travail didactique de
gestion de l'information, c'est le processus « enseigner ».
• Du côté professeur-élève, on retrouve l'éducation et la formation le processus « former »,
celui de la pédagogie et d'une économie de l'éducation.
• Du côté élève-savoir, on retrouve l'apprentissage, le processus « apprendre ».

c. Description des processus :

Le processus Enseigner:

18
 Les points professeur et savoir sont privilégiés au détriment des élèves.
L’enseignant est alors centré sur le cadre didactique, l'organisation, la structuration des
cours, le contenu du savoir, sa discipline enseignée, et la méthode pédagogique employée
est celle du cours magistral.
Le professeur néglige la relation pédagogique avec les élèves.
Une opposition des élèves à l’encontre de leur professeur ou formateur peut apparaître en
vue de lui témoigner leur insatisfaction. Des risques de chahut peuvent apparaître.

Le processus Former:
Les points professeur et élèves sont privilégiés au détriment du savoir.
C'est lorsque la relation professeur-élèves est exacerbée au point de s'engager dans une
relation d'échange proche de la séduction qui est favorisée au détriment du savoir. La
méthode pédagogique employée est plutôt non-directive et le professeur offre davantage des
conseils et une orientation à suivre plus qu’un contenu structuré.
Les élèves peuvent apprécier les qualités relationnelles de leur professeur néanmoins avoir
des difficultés à situer leur apprentissage par rapport au programme et même à comprendre
leur cours.

Le processus Apprendre:
Les points d’élèves et savoirs sont privilégiés au détriment du professeur.
Le professeur limite son activité à essayer de faciliter l’apprentissage des élèves par eux-
mêmes.
La méthode pédagogique employée sera plutôt de type constructiviste : l’élève devra
construire ses propres savoirs. Le plus important est la construction du savoir et non la
reproduction du savoir enseigné.
Les élèves ou apprenants peuvent se sentir livrés à eux-mêmes. Ils peuvent même éprouver
un sentiment de solitude face au savoir. Ce qui en soi peut poser des problèmes pour la
compréhension de certains contenus où la manière de les aborder. Les élèves sont
pratiquement dans une position d'autoformation tutorée : les élèves apprennent par eux-
mêmes tout en ayant un professeur référant qui se contente de les orienter dans leurs
apprentissages.

V. Conclusion :

Tout au long de ce modeste travail on pense que le e-Learning est une nouvelle méthode
inévitable, simple et prometteuse, moderne qui respecte les critères d’enseignement en
proposant des pédagogies fiable et puissantes en faisant des classifications des niveaux
d'acquisition des compétences en utilisant des types ouverts de formation à distance, dont la
Taxonomie de Bloom et le MOOC sont présentes, en se basant sur le principe du triangle
d’apprentissage et inclure plusieurs ressources pédagogiques et activités numériques.

19
CHAPITRE 3 : ETUDE DES SOLUTIONS EXISTANTES

20
I. INTRODUCTION :

La formation en ligne est une des technologies de l'information et de la communication pour

l'éducation (TICE), intégrée dans la cyberculture, est aussi un des éléments et enjeux de ce
que certains désignent comme le « cybermarché de la formation ».
Près de 80 % des ressources en ligne viennent aujourd'hui des États-Unis pour les logiciels,
de produits et services multimédias éducatifs destinés à la formation et à l’éducation.
Dans tous les cas, la méthode de formation/d'éducation permet théoriquement de
s'affranchir de la présence physique d'un enseignant à proximité. En revanche, le rôle du
tuteur distant apparaît, avec des activités de facilitateur et de médiateur. Dans le cadre d'un
tutorat omniprésent, on parle alors de formation télé-présentielle.
Dans ce chapitre on présente une étude des solutions existantes pour le E-learning.

II. MOODLE (Modular Object-Oriented Dynamic Learning Environment) :

a. Définition :

Moodle est une plateforme d'apprentissage destinée à fournir aux enseignants,

administrateurs et apprenants un système unique robuste, sûr et intégré pour créer
des environnements d'apprentissages personnalisés.
libre distribuée sous la Licence publique générale GNU écrite en PHP. Développée à
partir de principes pédagogiques

21
b. Historique :

Le Moodle a été créé par Martin Dougiamas, auparavant administrateur de la plate-forme

WebCT à l'Université Curtin en Australie, dans le but d'aider les enseignants et formateurs à
créer et gérer des cours en ligne axés sur l'interaction et la construction collaborative de
contenus.
Dans le cadre de ses recherches doctorales, Martin a étudié les apports du constructivisme
social dans la pédagogie en ligne. Son projet de thèse, intitulé « The use of Open Source
software to support a social constructionist epistemology of teaching and learning within
Internet-based communities of reflective inquiry », a fortement influencé la conception de
la plate-forme du Moodle

c. Fonctionnement :

Outre la création de cours à l'aide d'outils intégrés (ressources et activités) à l'usage

des formateurs, le Moodle offre des possibilités d'organisation des cours sous forme
de filières (catégories et sous-catégories, cohortes…) qui lui donnent également des
caractéristiques propres à la mise en place de dispositifs complets d'enseignement.

À un système de gestion de contenu (SGC) (en anglais : Content Management

System ou CMS) déjà cité, le Moodle ajoute aussi de nombreux outils d'interactions
pédagogiques et communicatives créant un environnement d'apprentissage en ligne
: cette application permet de créer, via le réseau, des interactions entre pédagogues,
apprenants et ressources pédagogiques.

Grâce à son architecture modulaire, le Moodle profite de plugins développés par sa

communauté pour permettre l'extension de ses fonctionnalités et de répondre ainsi
à des besoins spécifiques.

Une autre caractéristique de cette application est de s'inscrire dans le mouvement

open source : codée dans le langage informatique libre PHP, elle s'utilise dans un
environnement LAMP (série d'applications libres pour serveur) et doit son
développement à l'existence d'une communauté de développeurs bénévoles. En tant
qu'application libre, le Moodle représente une rupture face aux solutions
propriétaires, telles que WebCT.

Etalab a intégré le Moodle, en mai 2020, au socle interministériel de logiciels libres

de l'État français.

d. État de développement :

22
Le Moodle est en constante évolution. La première version a été publiée le 20 août
2002. Le projet du Moodle est actuellement coordonné par Moodle HQ, une entreprise
australienne de 50 développeurs financée par un réseau de 84 Partenaires Moodle,
entreprises de services Moodle du monde entier. Le développement du Moodle est
également soutenu par le travail de programmeurs de logiciels libres.

La version 1.9 de l'application est lancée en 2008, et a été maintenue pendant 6 ans.
Depuis le Moodle 2.0, de nouvelles versions sortent tous les 6 mois. La version 2.7
LTS (première version suivie à long terme) est sortie en mai 2014, la version 3.1 LTS
(seconde version suivie à long terme) est sortie en mai 2016, la version 3.5 LTS est
disponible depuis le 17 mai 2018. La version 3.7.1 est disponible depuis le 8 juillet
2019. La dernière version 3.9 qui est une version LLTS (Long Long Time Support) est
sortie le 15 juin 2020 (Moodle 3.9 release notes. Au mois de décembre 2017, plus de
93 000 sites dans 232 pays ont enregistré leur implantation, avec plus de 122 millions
d'utilisateurs. La plateforme est traduite dans plus de 100 langues.

Le Moodle peut intégrer les fonctionnalités de centaines de modules complémentaires

(plugins), publiés également sous licence libre, permettant l'ajout de fonctionnalités
et de connexions avec d'autres systèmes. En décembre 2018, on y trouvait 1536
modules et plus de 383 téléchargements "récents".

Depuis le début 2016, un dispositif nomade du Moodle sur Raspberry Pi 3, nommé «

MoodleBox » est développé et diffusé par la communauté de Moodle.

Plusieurs thèmes sont disponibles, y compris certains adaptatifs qui peuvent être
consultés sur des appareils mobiles. Une application mobile est également disponible
dans l’App Store (iOS), le Google Play Store (Android) et F-Droid (Android FLOSS
repository).

e. Fonctionnalités :

Moodle utilise BigBlueButton, un système de Salle de conférence en ligne désigné

pour l'éducation numérique.

Le tableau de bord de l'élève se constitue des :

Cours, Profil, Notes, Messages personnels, Préférences, Calendrier, Utilisateurs en
ligne, Chronologie des conférences, Dernières annonces et les notifications.

Le profil de l'élève se constitue de : Photo de profil, Description, Numéro de

téléphone, Page web, Courrier électronique...

Un cours se constitue de : Annonce, Présence, Document (.pdf, .docx, .ppt ...) ,

Image (.jpeg, .gif, .png...)

23
III. ZOOM :

a. Définition :

Zoom Video Communications est une société américaine de services de téléconférence

basée à San José, en Californie. Elle fournit un service de conférence à distance qui
combine la vidéoconférence, les réunions en ligne, le chat et la collaboration mobile à
l'aide d'applications propriétaires.

b. Historique :

Zoom a été fondée en 2011 par Eric Yuan, un ingénieur sénior de Cisco Systems et de
son unité commerciale de collaboration WebEx. Le service a commencé en janvier
2013 et, en mai 2013, il comptait un million d'utilisateurs. Au cours de la première
année de sa sortie, Zoom a établi des partenariats avec des fournisseurs de logiciels
de collaboration B2B, tels que Redbooth (alors Teambox), et a également créé un
programme nommé Works with Zoom (« Travaillez avec Zoom »), qui a établi des
partenariats avec plusieurs fournisseurs de matériel et de logiciels tels que Logitech,
Vaddio, et InFocus.

Au début de 2020, l'utilisation de Zoom a fortement augmenté, en hausse de 67 % du

début de l'année à la mi-mars ; des écoles et des entreprises ayant adopté la plate-
forme pour le télétravail en réponse à la pandémie de maladie à coronavirus de 2019-

24
2020. Le nombre d'utilisateurs par jour est passé de 10 millions en décembre 2019 à
200 millions en mars 2020, beaucoup de nouveaux participants pratiquant pour la
première fois le télétravail. Depuis l'intensification de la nouvelle pandémie de
coronavirus aux États-Unis, les médias ont rapporté que des milliers d'établissements
d'enseignement étaient passés à des cours en ligne en utilisant Zoom. L'entreprise a
offert ses services gratuitement aux écoles de la maternelle au lycée dans de
nombreux pays. Ces mesures ont contribué à une forte augmentation de l'utilisation
de Zoom. Par exemple, en une seule journée, l'application Zoom a été téléchargée 343
000 fois.

Zoom est également devenu une plateforme sociale en raison de la pandémie, trouvant
pour ses utilisateurs des usages au-delà des réunions ou des entretiens à distance

c. Fonctionnement :

Zoom permet des sessions de chat en tête-à-tête qui peuvent se transformer en

appels de groupe, sessions de formation et webinaires pour un public interne et
externe, et des réunions vidéo globales avec jusqu’à 1000 participants et jusqu’à 49
vidéos à l’écran. Le niveau gratuit permet des réunions individuelles illimitées, mais
limite les sessions de groupe à 40 minutes et 100 participants. Les plans payants
commencent à 15 $ par mois et par hôte.

Zoom propose quatre niveaux de tarification (sans compter l’abonnement Zoom

Room):

Zoom gratuit: ce niveau est gratuit. Vous pouvez organiser un nombre illimité de
réunions. Les réunions de groupe avec plusieurs participants sont limitées à 40
minutes et les réunions ne peuvent pas être enregistrées.
Zoom Pro: ce niveau coûte 14,99 $ / 11,99 £ par mois et hôte de la réunion. Il
permet aux hôtes de créer des identifiants de réunion personnels pour les réunions
Zoom répétitives, et il permet l’enregistrement de réunions dans le cloud ou sur
votre appareil, mais il plafonne la durée des réunions de groupe à 24 heures.
Zoom Business: ce niveau coûte 19,99 $ / 15,99 £ par mois et hôte de la réunion
(10 minimum). Il vous permet de personnaliser les réunions Zoom avec des URL
personnalisées et la marque de l’entreprise, et il propose des transcriptions des
réunions Zoom enregistrées dans le cloud, ainsi qu’un support client dédié.
Zoom Entreprise: ce niveau coûte 19,99 $ / 15,99 £ par mois et par hôte de réunion
(100 minimum) et est destiné aux entreprises de plus de 1000 employés. Il offre un
stockage illimité dans le cloud pour les enregistrements, un gestionnaire de réussite
client et des réductions sur les webinaires et les salles Zoom.
Facultatif - Zoom Rooms: Si vous souhaitez configurer des salles Zoom, vous pouvez
vous inscrire à un essai gratuit de 30 jours, après quoi les salles Zoom nécessitent
49 $ / 39 £ supplémentaires par mois et un abonnement de chambre, tandis que les
webinaires utilisant Zoom coûtent 40 $ / 32 £ par mois et hôte.

d. Fonctionnalités :

Téléchargements de l’application Zoom

25
L’application de bureau est disponible pour Windows et MacOs , tandis que l’application
mobile est disponible pour Android et iOS . L’application de bureau offre la meilleure
expérience.

Toutes les applications vous permettent de rejoindre une réunion sans vous connecter,
mais vous permettent également de vous connecter à l’aide d’un compte Zoom,
Google, Facebook ou SSO. À partir de là, vous pouvez démarrer une réunion, rejoindre
une réunion, partager votre écran dans une salle Zoom en entrant l’ID de la réunion,
démarrer des réunions Zoom, désactiver / réactiver votre micro, démarrer / arrêter la
vidéo, inviter d’autres personnes à la réunion, changer votre nom d’écran, discutez en
réunion et démarrez un enregistrement dans le cloud.

Si vous êtes un utilisateur de bureau, vous pouvez également démarrer un

enregistrement local, créer des sondages, diffuser votre Facebook en direct sur
Facebook, etc. En d’autres termes, l’application de bureau est plus complète, bien que,
si vous êtes un utilisateur gratuit, vous pouvez toujours obtenir beaucoup de
kilomètres grâce à l’application mobile.

Plug-in Zoom Outlook

En plus des divers autres téléchargements d’applications Zoom, il est également
possible d’utiliser Zoom d’autres manières. Par exemple, il existe un plug - in Zoom
Outlook conçu pour fonctionner directement dans votre client Microsoft Outlook ou en
tant que complément pour Outlook sur le Web . Ce plug-in Outlook insère un bouton
Zoom directement dans la barre d’outils Outlook standard et vous permet de démarrer
ou de planifier une réunion Zoom d’un simple clic.

Extensions de navigateur Zoom

Un autre outil pour démarrer ou programmer rapidement une réunion Zoom se
présente sous la forme d’une extension pour votre navigateur préféré. Il existe une
extension Zoom Chrome et un module complémentaire Zoom Firefox qui vous
permettent de planifier une réunion Zoom via Google Agenda. Un simple clic sur le
bouton Zoom et vous pouvez démarrer une réunion ou en planifier une pour plus tard
avec toutes les informations sur la réunion envoyées via Google Agenda pour faciliter
la participation des participants.

Utilisation de Zoom dans votre navigateur

Si vous n’avez accès à aucune application - ou n’en avez pas installé une - vous pouvez
exécuter Zoom dans un navigateur. Même si vous avez des applications Zoom, vous
pouvez exécuter Zoom dans un navigateur à la place. Lorsque vous cliquez sur un lien
Zoom sur un bureau, il ouvrira un onglet de navigateur rapide qui lancera ensuite
l’application sur votre appareil.

Vous pouvez contourner l’application et l’exécuter directement dans le navigateur si

vous préférez. Vous pouvez essayer ceci si votre application ne fonctionne pas, si elle
est obsolète ou si vous rencontrez des problèmes de connexion.

26
IV. MICROSOFT TEAMS :

a. Définition :

Microsoft Teams est une application de communication collaborative propriétaire

(SaaS) officiellement lancée par Microsoft en novembre 2016.

Le service s'intègre à la suite Microsoft Office 365 et Skype et propose des extensions
pouvant être intégrées à des produits autres que Microsoft. Elle est actuellement
disponible dans 181 pays et est traduite en 25 langues.

b. Historique :

Microsoft Teams est conçu par Microsoft et annoncé en novembre 2016, Annoncé
comme le remplaçant de Skype en 2017, il s'inscrit dans la nouvelle phase de
développement de Microsoft.

Le logiciel est lancé en version finale le 14 mars 2017. Le 3 mai, Microsoft informe que
Microsoft Teams remplacerait Microsoft Classroom dans Office 365 Education. La
plateforme collaborative est gratuite pour les utilisateurs qui disposent d'une licence
Office 365 car son accès est inclus dans l'offre de Microsoft.
Depuis le 13 juillet 2018, Microsoft Teams est disponible dans une version gratuite,
limitée à 300 membres, dont certaines fonctionnalités, comme la planification et
l'enregistrement de réunions et les accès aux applications d'Office 365 sont absentes
c. Fonctionnement :

27
Microsoft Teams est une plateforme collaborative personnalisable qui intègre la
visioconférence, le stockage et le transfert de fichiers avec SharePoint, un bloc de prise
de note avec OneNote. La messagerie instantanée permettant d'échanger en équipe
ou par groupe de travail tout en conservant une trace de tous les échanges. Son
intégration avec Microsoft Outlook permet de planifier les réunions en équipe et de
partager emails et contacts. C'est un logiciel de Microsoft disponible de manière
autonome ou dans le cadre d'une offre Office 365.

L'authentification multi-facteur combiné au chiffrement des données assure la

connexion les équipes et de travailler à distance dans un espace sécurisé.

Enfin, les utilisateurs peuvent travailler ensemble en mode coédition sur les
applications Word, PowerPoint, Excel, OneNote, ou encore Outlook tout en restant dans
l'interface de l'application Teams.

Plusieurs applications peuvent être directement intégrées dans Teams : Wooclap,

Trello, Forms, etc.

d. Fonctionnalité :

Fonctionnalités de communication:
Messagerie instantanée (IM, Chat)
Audio & Vidéo
Partage d'écran
Conférence et Webinar
Système de téléphonie (IPBX)

Fonctionnalités de collaboration:
Partage de fichiers avec OneDrive & SharePoint
Partage de Plannings et de tâches évoluées avec Planner
Partage de tableaux de bord avec Power BI
Partage d'applications d'entreprise avec PowerApps
Affichage d'applications tierces

Pour ceux qui ont utilisés Lync ou Skype Entreprise, on peut donc dire que Microsoft
Teams est le successeur de ces produits auquel Microsoft à ajouter des fonctionnalités
permettant de regrouper sur la même interface utilisateur des données présentes
ailleurs dans Office 365. L'accès à SharePoint et aux sites d'équipes peut se faire
directement depuis Teams sans même savoir que SharePoint est utilisé <derrière>
pour gérer et stocker les données.

Le calendrier:
Le calendrier présent dans Teams vous permet de consulter votre agenda de rendez-
vous mais aussi de gérer vos rendez-vous comme vous savez peut-être déjà le faire
avec Outlook.

28
 Si l'utilisateur a une boite email sur Office 365, celle-ci est gérée par le service Cloud
O365 Exchange Online. Cette boite email Exchange contient non seulement vos emails
mais aussi leur calendrier (Agenda),leur contacts et tâches. Ce calendrier peut être
accessible (et modifiable) depuis plusieurs logiciels comme par exemple :

Outlook sur PC,

Smartphone et Tablette via l'app Outlook
L'accès Web Mail ([Link])
Teams

V. GOOGLE MEET :

a. Définition :

Google Meet est un service de visioconférence développé par Google pour remplacer
Google Hangouts, d’où les entreprises, les établissements scolaires et les autres
organisations peuvent profiter de fonctionnalités avancées, comme l'organisation de
réunions avec jusqu'à 250 participants internes ou externes et le streaming en direct
pour 100 000 utilisateurs d'un domaine.

b. Historique :

Au départ, Google a lancé Meet en tant que service commercial. En avril 2020, Google
l'a proposé gratuitement à tous les utilisateurs, suscitant des spéculations sur le
remplacement de Hangouts par une version grand public de Meet.

29
Après avoir offert le service sur invitation et avoir lancé une application iOS en février
2017, Google a officiellement lancé Meet en mars 2017. L'application était alors
présentée comme une version de Hangouts adaptée aux entreprises. Lors de son
lancement, le service comportait une application web, une application Android et une
application iOS.

En réponse à la pandémie de Covid-19 en mars 2020, Google a offert des

fonctionnalités avancées de Meet, qui nécessitaient auparavant un compte Entreprise,
à toute personne utilisant la Google Workspace ou la Google Workspace for Education.
L'utilisation de Meet a augmenté d'un facteur de 30 entre janvier et avril 2020, avec
100 millions d'utilisateurs par jour accédant à l'application en avril. Au même moment,
Zoom attirait 200 millions d'utilisateurs

c. Fonctionnement :

Pour utiliser Google Meet, il suffit de posséder un compte Google et d’employer la

messagerie Gmail qui intègre l'application de visioconférence, où bien de se rendre sur
le site web officiel de Google Meet pour ouvrir un compte. C'est en mode (SaaS). Il n’y
a donc aucune installation à réaliser sur son terminal.

Les utilisateurs de Google Workspace employant un compte professionnel ou scolaire

:
 Un administrateur Google Workspace doit activer Meet pour leur organisation.
 Pour créer une visioconférence, nécessite d’être connecté à un compte Google
Workspace.
 Toute personne (membre ou non de l’organisation) peut participer à la réunion
via un lien.

Pour les appels vidéo Meet, les utilisateurs ont besoin des éléments suivants :

 L'application mobile Meet, l'application mobile Gmail ou un navigateur Web

compatible.
 Un appareil compatible présentant la configuration système minimale requise.
 Un système d'exploitation compatible.
 Une connexion Internet haut débit. Découvrez comment préparer votre réseau.
 Une webcam intégrée ou une caméra USB externe.

d. Fonctionnalité :

Les utilisateurs de l'application bénéficiaient de nombreuses fonctionnalités :

 jusqu'à 100 participants par appel pour les utilisateurs de la G Suite Basic,
jusqu'à 150 pour les utilisateurs de la G Suite Business, et jusqu'à 250 pour les
utilisateurs de la G Suite Enterprise.
 possibilité de participer à des réunions depuis le web ou via des applications
Android ou iOS.
 possibilité de participer à des réunions avec un numéro d'appel.
 numéros d'appel protégés par mot de passe pour les utilisateurs de l'édition
Enterprise.

30
  intégration avec Google Calendar pour initier des réunions en un clic.
 partage d'écran pour présenter des documents, des feuilles de calcul ou des
présentations.
 appels cryptés entre tous les utilisateurs.
 sous-titrage en temps réel basé sur la reconnaissance vocale.

Les utilisateurs de la version gratuite doivent accepter certaines limitations :

 après septembre 2020, les réunions sont limitées à 60 minutes.

 tous les participants doivent avoir un compte Google.

Bien que Google Meet offre des fonctions qui n'étaient pas disponibles dans Hangouts,
certaines fonctionnalités de Hangouts ont été supprimées, notamment l'affichage
simultané des participants et du clavardage. Le nombre de flux vidéo a également été
réduit à 8 (alors que jusqu'à 4 flux peuvent être affichés dans une disposition en
tuiles), en donnant la priorité aux participants qui ont utilisé leur microphone le plus
récemment. En outre, des fonctionnalités telles que la boîte de dialogue de clavardage
a été modifiée pour superposer les flux vidéo, plutôt que de les redimensionner pour
les adapter.

VI. TABLEAU COMPARATIF :

Ce qui suit un tableau comparatif, qui présente un aperçu des possibilités et

fonctionnalités, de chaque plateforme par rapport à l’autre.

31
 Plateforme
MOODLE GOOGLE MEET MICROSOFT ZOOM
Offres TEAMS
-A des contenus dynamiques Solution de
(leçons, devoirs, variétés de Facilité d'utilisation, collaboration, Facilité d'utilisation,
questionnaires) qui assurent intégration à G Suite intégration à qualité audio et
une véritable interactivité Office 365, sécurité. vidéo.
entre l’apprenant et la
Points forts plateforme.
-Moodle confère davantage de
productivité à l’enseignant qui
peut à la fois voir l’état
d’avancement de chaque
étudiant de manière simple et
efficace et réagir de manière
ciblée
En dehors de la salle de cours, Fonctionnalités
Points faibles Moodle n’offre pas limitées par rapport Qualité du signal audio Failles de sécurité,
nécessairement un suivi aux pure players* de et vidéo pas toujours politique de
hautement personnalisé. la visioconférence. au niveau. confidentialité.
jusqu'à un maximum de 100 De 100 (version
Nombre maximal de utilisateurs peuvent rejoindre Jusqu'à Jusqu'à gratuite) à
une session BigBlueButton à la 250 participants. 10 000 participants. 1 000 participants
participants fois. (Entreprise Plus).
(version d’essai de 45 jours)

Fonctions collaboratives Suivi de progression, Mise à Chat, partage de Chat, partage de Messagerie
disposition des fichiers, coédition de fichiers, collaboration instantanée, partage
ressources(docs, img, vid…), documents. sur les documents d'écran, sondage.
contrôle d’accès et visibilité, Office.
chat, analyse, évaluation.
Trois formules Trois formules (par Trois formules (par
Tarification (HT) Gratuit (Sans ModdleCloud). Google Suite (par utilisateur et par mois). animateur et par
utilisateur et par Microsoft 365 Business mois). Pro :
A partir de 124 euros jusqu’à mois). Basic : Basic : 4,20 euros. 13,99 euros,
1650 euros (le prix varie selon 4,68 euros. Microsoft 365 Business Affaires :
la taille de l’espace du Cloud). Business : Standard : 18,99 euros,
9,36 euros. 10,50 euros. Entreprise :
Enterprise : Office 365 E3 : 18,99 euros.
23 euros. 19,70 euros.

* pure players : Un pure player est un commerçant proposant et vendant ses produits
/ services exclusivement en ligne. Il ne détient donc aucun point de vente physique,
et l’ensemble de son offre est entièrement digitalisée.

VII. CONCLUSION :

Dans ce chapitre, la comparaison de ces plateformes est devenue clair pour nous après
cette générale vue, dont on a fait une étude complète des cas existantes, ainsi qu’on
a présenté chaque outil et son historique, fonctionnement et ses fonctionnalités.

32
CHAPITRE 4 : ENVIRONNEMENT DE DÉVELOPPEMENT

33
I. INTRODUCTION :

Dans ce chapitre, nous présenterons l’environnement de développement qui inclut les outils
logiciel ainsi que l’outil matériel.

II. ENVIRONNEMENT :

a. Outils Matériels :

Ordinateur Portable : Lenovo 130-15IKB Laptop (ideapad)

Système d’exploitation : Windows 10.
Microprocesseur : i-5 8eme génération.
Carte Graphique externe : Nvidia MX110 4GB
RAM : 8GB

b. Outils Logiciels :

 Visual Studio Code :

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et MacOs.
Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la
syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git
intégrer. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences
et installer des extensions qui ajoutent des fonctionnalités supplémentaires.
Le code source de Visual Studio Code provient du projet logiciel libre et open source VS
Code de Microsoft publié sous la licence MIT permissive, mais les binaires compilés sont
des logiciels gratuits pour toute utilisation.
Dans le Stack Overflow 2019, Visual Studio Code a été classé comme l'outil
d'environnement de développement le plus populaire, avec 50,7 % des 87 317 répondants
déclarant l'utiliser.

34
  StarUML :

StarUML est un logiciel de modélisation UML, qui a été «cédé comme open source» par
son éditeur, à la fin de son exploitation, sous une licence modifiée de GNU GPL.
La version StarUML V3 n'existe qu'en licence propriétaire.
StarUML gère la plupart des diagrammes spécifiés dans la norme UML 2.0.

 Xampp :

XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web local,
un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de
logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne souplesse
d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée d'un
grand nombre de personnes puisqu'il ne requiert pas de connaissances particulières et
fonctionne, de plus, sur les systèmes d'exploitation les plus répandus.

Il est distribué avec différentes bibliothèques logicielles qui élargissent la palette des
services de façon notable : OpenSSL, Expat (parseur XML) PNG, SQLite, zlib, etc. Ainsi que
différents modules Perl et Tomcat. Nombre de ces extensions étant inutiles aux débutants.

Il permet aussi de configurer un serveur de test local avant la mise en œuvre d'un site Web,
et son usage n'est pas recommandé pour un serveur dit de production.

35
  Chrome :

Chrome est un navigateur web propriétaire développé par Google depuis 2008, basé sur
le projet libre Chromium fonctionnant sous Windows, Mac, Linux, Android et iOS.
Chromium est similaire à Chrome, mais ce dernier envoi d'informations personnelles vers
un serveur de Google, y compris dans la version mobile de Chrome.

Il est annoncé le 1er septembre 2008, la veille de la sortie de la première version bêta. La
première version stable est quant à elle dévoilée le 11 décembre 2008. Selon l'institut
StatCounter, Google Chrome devient en juin 2012 le navigateur le plus utilisé dans le
monde, avec environ un tiers des utilisateurs. En mars 2021, sa part de marché est de plus
de 65 % toutes plateformes confondues.

L'aspect du logiciel de Google se conforme aux logiques d'esthétisme des fenêtres des
systèmes d'exploitation dans lequel il est installé. Quel que soit l'environnement, le design
se veut simple, selon l'habitude de son concepteur. Sous Microsoft Windows, Chrome
applique l'interface Luna de Windows XP et Windows Aero de Vista et 7.

Google Chrome lui-même n'est pas open source66, les binaires officiels sont soumis à un
contrat de licence utilisateur final (CLUF).

 Mockup Balsamiq :

En informatique, le terme mock-up (qui vient du même mot anglais qui signifie une
maquette) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de
présenter les idées sur l'utilisation d'un logiciel.
Du point de vue matériel, un mock-up se caractérise par le fait d'être un modèle visuel
esthétique, fixe ou sous forme de vidéo, qui peut être modifié aux fins de personnalisation,
souvent des textes.

36
Cette maquette très simple qui est conçue pour modifier rapidement certaines parties
d'un visuel. On peut y ajouter ou supprimer des éléments. Cette maquette représente
l'interface utilisateur d'un site internet, le visuel d'une carte de visite ou encore d'un
magazine. Elle est volontairement très simple pour se focaliser principalement sur les
fonctionnalités ou pour une vision rapide de l'interface. Il ne s'agit pas de la version finale
d'un visuel, mais d'une ébauche.
Ce mock-up est modifiable aisément afin de pouvoir aider le graphiste à trouver une
meilleure présentation en fonction des remarques de son client ou de l'équipe de
collaborateurs. De nombreuses situations nécessitent la création d'un mockup.

Le Mockup Balsamiq est une précieuse aide pour la réalisation d'un projet et la création
graphique. Il est aussi bien utilisé en e-commerce que pour la création d'un portfolio
physique. Il est le support parfait pour présenter une ébauche déjà avancée d'un projet
avant validation. Le mockup est présenté pour recevoir les commentaires des clients. Il
offre une bonne visibilité sur le projet final. Il existe une grande variété de mockup que
l'on peut télécharger sur internet et adapter selon ses besoins, dont il existe plusieurs
situations où le mockup peut être particulièrement utile.

Ce logiciel (Mockup Balsamiq) est alors à l'origine du projet. Il est très utile pour essayer
de séduire les futurs visiteurs d'un site web. Il permet d'afficher l'interface telle qu'elle
apparaîtra quand le site internet sera en ligne. L'image que l'on obtient aide à faire le choix
de la position des photos, de l'aperçu d'un contenu ou de la résolution d'une vidéo. La
charte graphique peut être adaptée pour une meilleure répartition des couleurs, on peut
changer l'arrière-plan ou encore réduire la taille d'un paragraphe. Le but du mockup dans
cette situation est d'offrir une navigation optimale et une ergonomie fluide au visiteur.
L'impression doit être agréable, attrayante et inciter le visiteur à rester sur le site internet
plus longtemps voire à naviguer dans les autres pages du site.

c. Langages et Frameworks:

 Bootstrap :

Bootstrap est une collection d'outils utiles à la création du design (graphisme,

animation et interactions avec la page dans le navigateur, etc.) de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des
formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que
des extensions JavaScript en option. C'est l'un des projets les plus populaires sur
la plate-forme de gestion de développement GitHub.

La modularité de Bootstrap consiste en une série de feuilles de styles LESS (à partir

de la version 4 SASS) qui implémentent différents composants du toolkit. Une

37
 feuille de style principale ([Link]) englobe les feuilles de style des
composants. Les développeurs peuvent alors sélectionner les composants dont ils
ont besoin en modifiant cette feuille principale. L'utilisation de LESS permet la
manipulation de variables, de fonctions, d'opérateurs, sélecteurs.

Depuis la version 2, Bootstrap dispose d'une option supplémentaire de «

personnalisation ».

Le système de grille et le style adaptatif sont standardisés sur une grille de 940
pixels de large, que les développeurs peuvent adapter. Ces définitions sont
déclinées en quatre variations qui peuvent être utilisées dans différents formats
et supports : téléphones (portrait et paysage), tablette et PC (haute et basse
résolution). Ces déclinaisons adaptent automatiquement l'affichage de la page.
 Laravel :

Laravel est un Framework web open-source écrit en PHP, créé par Taylor Otwell en juin
2011. En respectant le principe modèle-vue-contrôleur et entièrement développé en
programmation orientée objet. Laravel est distribué sous licence MIT, avec ses sources
hébergées sur GitHub.
Laravel fournit des fonctionnalités en termes de routage de requête, de mapping objet-
relationnel, d'authentification, de vue (avec Blade), de migration de base de données, de
gestion des exceptions et de test unitaire.

 Css :

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style
Sheets, forment un langage informatique qui décrit la présentation des documents HTML

38
et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium
(W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la
conception de sites web et bien pris en charge par les navigateurs web dans les années
2000.
L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents.
Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de
décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont
appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le
document. Cette séparation fournit un certain nombre de bénéfices, permettant
d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la
complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :

 La structure du document et la présentation peuvent être gérées dans des fichiers

séparés.
 La conception d'un document se fait dans un premier temps sans se soucier de la
présentation, ce qui permet d'être plus efficace.
 Dans le cas d'un site web, la présentation est uniformisée : les documents (pages
HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de
plus une remise en forme rapide de l'aspect visuel.
 Un même document peut donner le choix entre plusieurs feuilles de style, par
exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs
web permettent au visiteur de choisir un style parmi plusieurs.
 Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne
contient plus de balises ni d'attributs de présentation.

 Mysql :

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est

distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion
de base de données les plus utilisés au monde, autant par le grand public (applications
web principalement) que par des professionnels, en concurrence avec Oracle, PostgreSQL
et Microsoft SQL Server.

39
 Deux moteurs principaux sont présents dans MySQL : MyISAM et InnoDB.
MyISAM, contrairement à InnoDB, ne supporte ni transactions ni intégrité automatique
des tables, il n'est pas destiné aux applications dont la cohérence des données est
critique, cependant, ses performances le font adopter pour des applications ayant besoin
d'une base de données simple et peu onéreuse à mettre en œuvre.
Pour les utilisateurs, phpMyAdmin est un outil web souvent disponible pour créer,
remplir et utiliser des bases MySQL.

III. CONCLUSION :

D'après ces informations, on conclut que l'environnement de développement nécessite une

très bonne qualité en paramétrage des outils matériels pour que les outils logiciels
fonctionnent en haute performance et que la réalisation de l'application passe en meilleures
conditions.

40
CHAPITRE 5 : SPÉCIFICATION DES BESOINS ET UTILISATION

41
I. INTRODUCTION :

II. SPÉCIFICATIONS DES BESOINS :

Ce chapitre représentera la spécification des besoins, dont son rôle est très important durant
le cycle de développement des systèmes d’informations, Alors quels sont les besoins
fonctionnels et non fonctionnels attendus du système ?

Cette partie identifie les exigences fonctionnelles et non fonctionnelles de système à

concevoir, et qui va répondre aux besoins des utilisateurs, ce chapitre détermine aussi les
principaux acteurs de la plateforme.

a. Besoins fonctionnels :

Les besoins fonctionnels représentent les actions et les attentes de chaque acteur de la
plateforme, alors toutes les solutions au niveau de la conception doivent répondre aux
besoins fonctionnels, et suivre la traçabilité de ces besoins lors de la phase de
développement.

Ces besoins sont :

 Gestion des administrateurs par un accès superviseur.
 Gestion des enseignants.
 Gestion des étudiants.
 Gestion des cours.
 Gestion de room (live streaming).
 Gestion des devoirs et exams.
 Gestion des notes.
 Gestion actualités et nouveautés.
 Gestion de messagerie instantané.
 Gestion des ressources.
 Gestion des médias.

b. Besoins non fonctionnels :

Les besoins non fonctionnels sont des restrictions ou des contraintes qui pèse sur un
service du système, dont ils sont liés à l’environnement et à l’implémentation, ainsi que
les exigences de performances.

Ces besoins sont :

 Regrouper le maximum des fonctionnalités, et même si avoir d’autres qui serons
nouveaux par rapport au d’autres plateformes existantes.
 Développer des interfaces simples et compréhensibles par l’utilisateur.
 Éviter la surcharge de l’écran.

42
  Avoir un code bien clair pour les futures évolutions ou améliorations.
 Faire des mises à jour en temps réel.
 Assurer la disponibilité, la non-répudiation, l’intégrité, la confidentialité, ainsi
que la cohérence des données.

III. L’UTILISATION DE LA PLATEFORME :

a. Les acteurs de la plateforme :

Le terme acteur est un rôle joué par une entité externe qui agit sur le système (E-
Learning, Comptabilité, Service commercial, ...), en échangeant de l’information (en
entrée et en sortie), et ne désigne pas seulement des utilisateurs humains mais
également les autres systèmes (machines, programmes, ...).

Présenter par :

<<Acteur>>
Nom Acteur

Les acteurs interagissant dans la plateforme sont :

 Superviseur : responsable à la maintenance et la gestion de la plateforme.

 Administrateur : a des privilèges d’administration, de gestion des enseignants,
étudiants, classes, Lives, enregistrement, actualités et nouveautés.
 Enseignants : Prépare le salon de la formation, gère les étudiants.
 Etudiant : Gère son compte, ses médias, profite des fonctionnalités lors de la
formation.

b. Cas d’utilisation :

Un cas d’utilisation est une manière d'utiliser un système, qui réalise un ensemble
d'actions en interaction avec les acteurs.
L’ensemble des cas d’utilisation permet ainsi de décrire les exigences fonctionnelles d'un
système.
Chaque cas d'utilisation est représenté au sein d'un diagramme de cas d'utilisation.

Le tableau présent décrit chaque acteur et ses cas d’utilisation :

43
 Acteurs Cas d’utilisation

- Gérer tous les comptes d’utilisateurs ( créer, modifier, supprimer des comptes).
SUPERVISEUR - Gérer les droit et les privilèges ( affecte les rôles à chaque utilisateur).
- Responsable à la maintenance et la sécurité des données ( faire des mises à jour).

- S’identifier.
- Gérer son compte ( ajouter, modifier).
ADMINISTRATEUR - Créer, modifier un compte enseignant ou étudiant en affectant chacun son rôle.
- Gérer les classes ( créer, modifier supprimer, affecter des droits à une classe).
- Gérer les actualités ( créer, modifier, supprimer).
- Gérer les plannings.
- Gérer la boite messagerie.

- S’identifier.
- Gérer son compte ( ajouter, modifier, supprimer).
- Gérer les classes et les droits ( ajouter médias, lancer/gérer une visioconférence,
ENSEIGNANT ajouter/exclure étudiant dans une classe/visioconférences).
- Gérer les devoir ( ajouter, modifier supprimer, planner).
- Gérer les notes ( affecter).
- Consulter les analyses, statistiques, état de développement des étudiants.
- Gérer les activités ( créer, modifier, supprimer, consultés des activités et exercices).
- Gérer la boite messagerie.

- S’identifier.
- Gérer son comptes ( créer, modifier, supprimer son comptes).
ETUDIANT - Gérer les médias ( ajouter, supprimer, télécharger).
- Participer dans une visioconférence.
- Gérer la boite messagerie.

Tableau : Identification des cas d’utilisation

c. Diagramme de cas d’utilisation :

Un diagramme de cas d'utilisation et un diagramme UML utilisé pour une représentation

du comportement fonctionnel d'un système logiciel.

Le diagramme suivant représente le cas d’utilisation de la plateforme :

44
 Figure : Diagramme de cas d’utilisation de la plateforme E-Learning

IV. CONCLUSION :

D’après l’étude des cas existants, on a pu de déterminer la spécification des

exigences, en identifiant les besoins fonctionnels et non fonctionnels, dont on a décrit
les attentes des acteurs du système et ces contraintes.

45
CHAPITRE 6 : CONCEPTION ET RÉALISATION

46
I. INTRODUCTION :

Il est admis que le processus de développement d’un système d’information

comporte deux phases essentielles, la première est la phase de conception pourtant la
deuxième est celle de la réalisation.
La phase de conception sert simultanément à étudier les données ainsi que les traitements
à effectuer, dont s’appliquent les techniques de modélisation, et se fait la description des
bases de données éventuelles à créer, et aussi les programmes et les interfaces à écrire et la
manière dont tout cela va être intégré, il s’agit donc de l’ expression des besoins qui sont
déjà spécifiés et de la recherche de solution pour satisfaire à ces besoins.
Cette phase est devenue essentielle dans le processus de développement des Systèmes
d’information, des études bien qu’empiriques montrent que 82% des erreurs qui
surviennent dans le développement proviennent de la conception, ces erreurs sont les plus
difficiles et les plus coûteuses à résoudre.
La phase de la réalisation s'agit de l'étape de développement du projet, avant de se lancer
dans la réalisation, il est nécessaire de prendre le temps de découper le projet en tâches, car
la réalisation est le cœur même du projet, qui intervient après une très bonne conception,
en conformité avec le cahier des charges.

II. CONTEXTE ET PROBLÉMATIQUE :

Le E-learning concerne l'utilisation de l'ordinateur et des technologies de réseau

informatique pour créer, fournir, contrôler et soutenir l'apprentissage indépendamment
d’un endroit physique. Ceci s'explique par le fait qu'il permet à un apprenant d'avoir accès à
des ressources d'apprentissage diversifiées, de bonnes qualités (images, audio, vidéo,
simulations, etc.).
Le E-learning offre également à l'apprenant la possibilité d'adopter un horaire
d'apprentissage en assurant l'homogénéité entre la formation et d'autres activités.
Pour les formateurs, en plus de la possibilité de mettre à la disposition de leurs apprenants
des ressources pédagogiques de bonne qualité et beaucoup plus riches en format de
présentation, le E-learning permet de joindre plus facilement des étudiants dans un
environnement non supervisé et géographiquement éloigné grâce à une plateforme
informatique de plus en plus puissante et gratuite.
Le présent travail porte sur l'élaboration d'une plateforme d’enseignement en ligne
permettant d'apporter des solutions qui répond aux besoins de l’utilisateur, cette
plateforme on l’a appelée EL-ROOM (E-Learning ROOM).

III. OBJECTIF :
On propose de développer une plateforme pour l’apprentissage en ligne géré par un
administrateur, et qui permet à l’enseignant de produire des séances de bonne qualité,

47
 et assure que l’étudiant profite des informations et activités pédagogiques, dont ils
l’aideront à se développer.

On peut noter tous ces objectifs comme suit :

 Approcher les distances sans faire se déplacer.
 Assurer des visioconférences parallèles à les réunions réels de même qualité et de
plus de fonctionnalités .
 Résoudre le problème des écoles surpeuplées et la difficulté de gérer et de répartir
les élèves.
 Utiliser un type d’enseignement moderne.

IV. MÉTHODOLOGIE DE CONCEPTION :

Pour réaliser un bon système, il faut choisir la méthode de conception convenable, cette
étude doit être normalisée selon une norme de modélisation universellement reconnue
polyvalente et performante.
Alors on a choisi d’utiliser le langage UML , dont ce chapitre va présenter les diagrammes
nécessaires pour la réalisation.

UML (Unified Modeling Language):

Le Langage de Modélisation Unifié est un langage de modélisation graphique à base de

pictogrammes (représentation graphique schématique) conçu comme une méthode
normalisée de visualisation dans les domaines du développement logiciel et en conception
orientée objet.
L'UML est une synthèse de langages de modélisation objet antérieurs : Booch, OMT, OOSE.
Principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar Jacobson, UML
est à présent un standard adopté par l'Object Management Group (OMG). UML 1.0 a été
normalisé en janvier 1997, UML 2.0 a été adopté par l'OMG en juillet 2005. La dernière
version de la spécification validée par l'OMG est UML 2.5.1 (2017).
Les diagrammes adoptés par UML sont :

Diagrammes de structure ou diagrammes statiques :

48
  Diagramme de classes (class diagram) : représentation des classes
intervenant dans le système.
 Diagramme d'objets (object diagram) : représentation des instances de
classes (objets) utilisées dans le système.

Diagrammes de comportement :
 Diagramme des cas d'utilisation (use-case diagram) : représentation des
possibilités d'interaction entre le système et les acteurs (intervenants
extérieurs au système), c'est-à-dire de toutes les fonctionnalités que doit
fournir le système.
 Diagramme états-transitions (state machine diagram) : représentation sous
forme de machine à états finis du comportement du système ou de ses
composants.
 Diagramme d'activité (activity diagram) : représentation sous forme de flux
ou d'enchaînement d'activités du comportement du système ou de ses
composants.

Diagrammes d'interaction ou diagrammes dynamiques :

 Diagramme de séquence (sequence diagram) : représentation de façon
séquentielle du déroulement des traitements et des interactions entre les
éléments du système et/ou de ses acteurs.
 Diagramme de communication (communication diagram) : représentation
de façon simplifiée d'un diagramme de séquence se concentrant sur les
échanges de messages entre les objets (depuis UML 2.x).
 Diagramme global d'interaction (interaction overview diagram) :
représentation des enchaînements possibles entre les scénarios
préalablement identifiés sous forme de diagrammes de séquences (variante
du diagramme d'activité) (depuis UML 2.x).
 Diagramme de temps (timing diagram) : représentation des variations d'une
donnée au cours du temps (depuis UML 2.3).

V. MODÉLISATION DES INTERFACES :

La conception de notre interface a été élaborée par diagramme de cas d’utilisation,

diagramme de classe.

49
1. L’identification :

Figure : Diagramme de cas d’utilisation de l’identification

1.1. Description textuelle :

Nom de cas : Identification.

Objectif : Permet de se connecter vers son espace personnel de la plateforme.
Acteurs : Utilisateur ( Administration, Enseignant, Etudiant ).
Précondition : L’acteur doit être un membre de la plateforme.
Scenario nominal :

<<DEBUT>>
01 : Le système affiche un formulaire de connexion à l’utilisateur.
02 : L’acteur saisit son nom complet ou le mail et le mot de passe qui correspond.
03 : Le système vérifie les informations saisies.
04 : Le système permet l’accès et affiche l’espace personnel.
<<FIN>>

Scenario alternative : Le login ou le mot de passe est incorrect: ce scénario commence

au point 03 du scénario nominal.
01: Le système informe l’acteur que les données saisies sont erronées et lui demande
s’il veut changer son mot de passe.

2. Gestion de compte :

50
 Figure : Diagramme de cas d’utilisation de Gestion de compte

2.1. Description textuelle :

Nom de cas : Gestion de compte.

Objectif : Permet à l’utilisateur de gérer son compte.
Acteurs : Utilisateur (Administrateur, Enseignant, Etudiant).
Précondition : L’utilisateur doit s’identifier pour y accéder.
Scenario nominal :

<<DEBUT>>
01 : le système affiche le profil actuel de l’acteur.
02 : l’acteur met à jour ses informations.
03 : le système vérifie la validité des informations saisies.
04 : le système enregistre ces informations dans la base de données.
05 : le système informe l’acteur du bon déroulement de mise à jour de son profil.
<<FIN>>

Scenario alternative :
-Si le cas d’un administrateur, il aura un plus pour la gestion d’état d’un compte et
l’affecter un droit d’accès.
01 : L’administrateur créer un compte utilisateur Enseignant ou utilisateur.

51
 02 : L’administrateur modifie l’état d’un compte.
03 : L’administrateur affecte un droit d’accès Enseignant ou Etudiant.
-Les informations sont manquantes ou incorrectes: ce scénario commence au point 03
du scénario nominal.
01 : Le système informe l’acteur que les données saisies sont erronées, garde les
informations
saisies avant et le scénario reprend au point 02 du scénario nominal.

3. Gestion des classes :

Figure : Diagramme de cas d’utilisation de Gestion de classe

3.1. Description textuelle :

Nom de cas : Gestion de classe

Objectif : Permet à l’Administrateur de gérer les classes et à l’Enseignant de consulter
les classes qui l’adoptes puis ajouter ou exclure un étudiant.
Acteurs : Utilisateur (Administrateur, Enseignant).
Précondition : S’identifier à la plateforme.
Scenario nominal :

<<DEBUT>>
01 : L’administrateur crée une classe.
02 : Le système affiche l’espace de la création.
03 : L’Administrateur ajout une matière, un enseignant ou un étudiant.

52
 04 : Le système sauvegarde les informations.
05 : L’Administrateur modifie une classe.
06 : L’Administrateur retire une matière un enseignant ou étudiant.
07 : L’Administrateur supprime une classe.
08 : Le système sauvegarde les modifications.
<<FIN>>

Scenario alternative :
En cas d’enseignant la plateforme affiche sauf l’espace de consultation des classes.
01 : L’Enseignant consulte leurs classes.
02 : L’Enseignant Ajout un étudiant.
03 : le système informe l’acteur du bon déroulement de l’ajout.
04 : L’Enseignant Retire un étudiant.
05 : Le système sauvegarde les changements.

Si une classe existe déjà dans la plateforme, alors le scénario commence au point 05
du scénario nominal.

4. Gestion d’actualités :

Figure : Diagramme de cas d’utilisation de Gestion d’actualités

4.1. Description textuelle :

Nom de cas : Gestion d’actualités

Objectif : Permet à l’utilisateur de gérer les actualités.

53
 Acteurs Utilisateur (Administrateur, Enseignant, Etudiant).
Précondition : s’identifier à la plateforme.
Scenario nominal :

<<DEBUT>>
01 : L’acteur Gère les actualités.
02 : L’acteur crée une actualité.
03 : L’acteur modifie une actualité.
04 : L’acteur supprime une actualité.
05 : Le système sauvegarde les changements.
06 : L’acteur consulte les actualités.
07 : Le système affiche l’espace des actualités.
<<FIN>>

Scenario alternative :
Si le cas d’un enseignant ou étudiant le scénario démarre au point 06 du scénario
nominal.

5. Gestion des plannings :

Figure : Diagramme de cas d’utilisation gestion des plannings

5.1. Description textuelle :

Nom de cas : Gestion des plannings

Objectif : Permet aux utilisateurs de gérer ou consulter les plannings
Acteurs : Utilisateur (Administrateur, Enseignant, Etudiant).

54
 Précondition : L’identification.
Scenario nominal :

<<DEBUT>>
01 : L’acteur Gère les plannings.
02 : L’acteur ajoute un planning.
03 : L’acteur supprime un planning.
04 : Le système sauvegarde les changements.
05 : L’acteur consulte les plannings.
06 : Le système affiche l’espace des plannings.
<<FIN>>

Scenario alternative :
Si le cas d’un enseignant ou étudiant le scénario démarre au point 05 du scénario
nominal.

6. Gestion des devoirs :

Figure : Diagramme de cas d’utilisation gestion des devoirs

6.1. Description textuelle :

Nom de cas : Gestion des devoirs.

Objectif : Faire la gestion des devoirs ou les consulter.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier
Scenario nominal :

55
 <<DEBUT>>
01 : L’acteur Gère les devoirs.
02 : L’acteur ajoute un devoir.
03 : L’acteur supprime un devoir.
04 : Le système sauvegarde les changements.
05 : L’acteur consulte les devoirs.
06 : Le système affiche l’espace des devoirs.
<<FIN>>

Scenario alternative :
Si le cas d’un Administrateur ou étudiant le scénario démarre au point 05 du scénario
nominal.

7. Gestion des notes :

Figure : Diagramme de cas d’utilisation gestion des notes

7.1. Description textuelle :

Nom de cas : Gestion des notes

Objectif : Permet d’ajouter, modifier ou supprimer les notes des étudiants.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier, Gérer les classes et les matières.
Scenario nominal :

56
 <<DEBUT>>
01 : L’acteur Gère les notes.
02 : L’acteur ajoute une note.
03 : L’acteur modifie une note.
04 : L’acteur supprime une note.
05 : Le système sauvegarde les changements.
06 : L’acteur consulte les notes.
07 : Le système affiche l’espace des notes.
<<FIN>>

Scenario alternative :
Si le cas d’un étudiant le scénario démarre au point 06 du scénario nominal.

8. Gestion des activités :

Figure : Diagramme de cas d’utilisation gestion des activités

8.1. Description textuelle :

Nom de cas : Gestion des activités.

Objectif : Permet la gestion des activités.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier.
Scenario nominal :

57
 <<DEBUT>>
01 : L’acteur Gère les activités.
02 : L’acteur ajoute une activité.
03 : L’acteur modifie une activité.
04 : L’acteur supprime une activité.
05 : Le système sauvegarde les changements.
06 : L’acteur consulte les activités.
07 : Le système affiche l’espace des notes.
<<FIN>>

Scenario alternative :
Si le cas d’un étudiant le scénario démarre au point 06 du scénario nominal.

9. Gestion de Boite de messagerie :

Figure : Diagramme de cas d’utilisation gestion de Boite de messagerie

9.1. Description textuelle :

Nom de cas : Gestion de la Boite messagerie.

Objectif : Permettre la manipulation et la gestion de la boite messagerie.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier.

58
 Scenario nominal :

<<DEBUT>>
01 : L’acteur consulte la boite de messagerie.
02 : Le système affiche la boite de messagerie.
03 : L’acteur consulte les conversations.
04 : L’acteur envoie un message texte.
05 : L’acteur envoie un fichier un fichier.
<<FIN>>

10. Gestion des médias :

Figure : Diagramme de cas d’utilisation gestion des médias

10.1. Description textuelle :

Nom de cas : Gestion des médias.

Objectif : Permettre à l’utilisateur de gérer les médias.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier.
Scenario nominal :

<<DEBUT>>

59
 01 : L’acteur consulte les fichiers médias.
02 : Le système affiche tous les fichiers médias.
03 : L’acteur télécharge un fichier.
04 : L’acteur ajoute un fichier.
05 : L’acteur supprime un média.
<<FIN>>

11. Gestion de visioconférence :

Figure : Diagramme de cas d’utilisation gestion de visioconférence

11.1. Description textuelle :

Nom de cas : Gestion des visioconférences.

Objectif : Permettre à l’utilisateur de gérer les visioconférences.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier.
Scenario nominal :

<<DEBUT>>
01 : L’acteur gère les visioconférences.
02 : Le système affiche l’espace des visioconférences.
03 : L’acteur lance une visioconférence.

60
 04 : L’acteur arrête une visioconférence.
05 : L’acteur participe à une visioconférence.
06 : L’acteur enregistre une visioconférence.
<<FIN>>

Scenario alternative :
Si le cas d’un utilisateur le scénario commence à partir du point 05 de scénario nominal.

12. Gestion statistiques et analyses de étudiants :

Figure : Diagramme de cas d’utilisation gestion de statistiques des étudiants

12.1. Description textuelle :

Nom de cas : Gestion de statistiques et analyses des étudiants.

Objectif : Permettre de consulter le niveau de développement de chaque étudiant.
Acteurs : Utilisateur ( Administrateur, Enseignant, Etudiant).
Précondition : S’identifier.
Scenario nominal :

<<DEBUT>>
01 : L’acteur consulte l’espace des statistiques.
02 : Le système affiche les statistiques de chaque étudiant.
<<FIN>>

61
VI. MODÉLISATION DES DONNÉES :

La modélisation conceptuelle des données représente une vue statique du système

permettant de décrire le système d’information à l’aide des concepts proposés par le modèle
UML, en utilisant des représentations graphiques et partiellement formelles.

Les principales caractéristiques du modèle conceptuel sont :

 Une représentation graphique simple.
 Une puissance d'expression élevée pour un nombre de symboles raisonnables.
 Une lecture accessible à tous et donc un bon outil de dialogue entre les acteurs
techniques et non techniques.
 Une formalisation peu ambiguë et donc un bon outil de spécialisation détaillée.

1. Diagramme de classe :

En utilisant StarUML, on a créé seize classes dont on y en des associations multiplicité,

associations de composition ainsi que des associations de généralisation, ayant des
cardinalités (0..1, 0..*, 1, 1..*, *).
Les Classes sont comme suit :
 Utilisateur.
 Administrateur.
 Enseignant.
 Etudiant.
 Compte.
 Classe.
 Filière.
 Matière.
 Cours.
 Devoir.
 Note.
 Activité.
 Actualité.
 Planning.
 Boite_messagerie.
 Statistique.

La figure ci-dessous représente le diagramme de classes qui contient toutes les informations
telles que les méthodes et les propriétés :

62
63
 2. Dictionnaire de données :
Le dictionnaire des données est une collection de métadonnées ou de données de
référence nécessaire à la conception d'une base de données relationnelle. Il revêt une
importance stratégique particulière, car il est le vocabulaire commun de l'organisation.
Il permet alors de décrire les données.
Le dictionnaire des données suivant représente la liste des attributs composants toutes
les classes formants notre système ainsi que leurs descriptions, leurs tailles et leurs
types :

Numéro
Attribut Description Type Taille
d’Attribut
Chaine de
1. nomComplet Nom et prénom d’utilisateur 30
caractères

2. roleUser Rôle et type d’accès de l’utilisateur Caractère 1

Chaine de
3. email E-mail de l’utilisateur 100
caractères
Chaine de
4. villeDeNaissance Ville de naissance 50
caractères

5. dateDeNaissance Date de naissance Date -

6. telephone Numéro téléphonique Entier 10

7. idEns Identificateur d’enseignant Entier 8

Chaine de
8. pwdEns Mot de passe d’enseignant 60
caractères

9. idEtud Identificateur d’étudiant Entier 8

Chaine de
10. pwdEtud Mot de passe d’étudiant 60
caractères

11. idAdmin Identificateur d’administrateur Entier 8

Chaine de
12. pwdAdmin Mot de passe d’administrateur 60
caractères

13. idCL Identificateur de la classe Entier 8

64
 Chaine de
14. nomCL Nom de la classe 35
caractères

15. dateSaison Date de saison Date -

16. idMat Identificateur de matière Entier 8

17. idCr Identificateur de cours Entier 8

Chaine de
18. nomCr Nom de cours
caractères

19. dateCr Date de cours Date -

20. idDev Identificateur de devoir Entier 8

21. dateDev Date de Devoir Date -

22. nte Note de devoir (score) Entier 8

23. dateNte Date d’affichage de note Date -

24. idCompte Identificateur de compte Entier 8

Chaine de
25. pwdCompte Mot de passe de compte 60
caractères

26. idActv Identificateur activité Entier 8

Chaine de
27. nomActv Nom d’activité 60
caractères
Chaine de
28. objPéda Objet pédagogique d’activité 100
caractères

29. idActu Identificateur actualité Entier 8

Chaine de
30. objActu Objet Actualité 100
caractères
Chaine de
31. sujActu Sujet actualité 350
caractères

65
 32. idPla Identificateur planning Entier 8

Chaine de
33. titrePla Titre planning 100
caractères

34. datePla Date planning Date -

Chaine de
35. contPla Contenue de Planning 350
caractères

36. idStat Identificateur de Statistique Entier 8

37. TheoriqueBar Barre de niveau en théorique Entier 20

38. PratiqueBar Barre de niveau en pratique Entier 20

39. mentionBar Mention des activités Entier 20

Chaine de
40. nomEmetteur Nom de l’utilisateur émetteur 30
caractères
Chaine de
41. nomRecepteur Nom de l’utilisateur récepteur 30
caractères

VII. RÉALISATION ET FONCTIONNEMENT :

Tout d’abord, la phase de codage, également nommée programmation, consiste à traduire

les fonctionnalités et autres exigences techniques définies lors de la conception en un
langage de programmation et générer des interfaces graphiques.

Cette partie sera représentée par un outil appelé Balsamiq Wireframes, qui est une
application de création de maquette ou interface de site Web d'interface utilisateur
graphique. Il permet au concepteur d'organiser des widgets prédéfinis à l'aide d'un éditeur
WYSIWYG par glisser-déposer.

66
1. INTERFACE DE LOGIN :

- Cette interface permet aux utilisateurs de se connecter.

- Pour se connecter à cette plateforme il faut être un membre créé par un

administrateur.
- Chaque utilisateur doit saisir son nom complet et son mot de passe.

67
 - En cas d’oubli de mot de passe, l’utilisateur doit changer son mot de passe, si le
problème de l’identification est exceptionnel il doit contacter l’administration pour
faire la récupération.
- En cas de validation de l’identification chaque utilisateur (enseignant ou étudiant),
va se diriger vers son propre espace de consultation.

2. INTERFACES ADMINISTRATEUR:

2.1. Page d’accueil :

- Cet interface permet à l’administrateur de gérer la plateforme.

- Dans la page d’accueil de l’administrateur, il existe plusieurs fonctionnalités de gestion,

cette interface présente aussi un accès rapide pour les statistiques, actualités et les
plannings.
- Il existe une button pour se déconnecter immédiatement.
- L’administrateur peut gérer :
 Son compte.
 Les comptes des utilisateurs.
 Les classes.
 Les activités, les actualités et les plannings.
 Les statistiques.
 Les visioconférences et la boite de messagerie.

68
2.2. Gérer les comptes :

- Lorsque l’administrateur choisi l’option de gestion des comptes, il peut consulter les
listes des comptes enseignants ou étudiants.

69
- L’état des comptes est gérée aussi par l’administrateur, dont il bloque ou débloque
Un ou plusieurs comptes.
- L’administrateur par suite peut créer un nouveau compte, le modifier et le supprimer.

- La modification multiple des comptes est impossible, chaque compte doit être
modifier uniquement.

70
 - La suppression peut être effectuer sur plusieurs comptes à la fois, par la sélection des
comptes à supprimer.

2.3. Gérer les classes :

- Voici l’espace concernant la gestion des classes.

71
- L’administrateur supprime une classe en sélectionnant la classe à supprimer.
- La suppression multiple est possible.
- En cliquant sur l’Icon de crayon, l’administrateur modifie la classe, puis change le nom de
la filière et ajoute ou supprime les matière (Salles).

-Il peut aussi de créer une nouvelle classe en l’attribuant le nom, en ajoutant des matières,
et en choisissant les personnes à ajouter quelque soient des étudiants ou enseignants.

72
- L’administrateur comme chaque utilisateur de la plateforme, consulte une classe
affichée dans la liste des classes.

- Chaque matière est considéré comme une salle qui contient une discussion textuelle
par groupe en incluant des fichiers médias.

73
 - Il existe aussi une button qui permet de lancer une visioconférence par un
administrateur ou enseignant, d’où tous les membres peut participer par une webcam
ou un partage d’écran à tour de rôle.

(plus de détails sur visioconférence voir interface de visioconférence concernant

l’enseignant et l’étudiant)

2.4. Gérer les activités :

- Les activités pédagogiques sont sous forme des flash player (QCM, Travaux pratiques) , ou
des fichier médias (Vidéos, audios, documents).
- Les activités se lance par un clic sur l’activité sélectionné.

- Les activités sont supprimées par la sélection des activités à supprimer.

- L’administrateur ajoute une ou plusieurs activités à la fois, par l’importation des fichiers à
partir de l’ordinateur ou d’un lien.

74
 2.5. Gérer les actualités :

- Les actualités sont publier pour informer les enseignants et les étudiants de toute nouveauté.

75
- Les activités sont publier par l’administrateur comme suit :

2.6. Gérer les plannings :

- Les planning sont modifiables sauf par l’administration, elle ajoute tous les changements:

76
- L’administrateur peut ajouter des nouveaux plannings, en saisissant l’objet de planning, puis
il l’importe depuis son ordinateur.

3. INTERFCES ENSEIGNANT:
3.1. Page d’accueil :

77
- Cet interface permet à l’enseignant de gérer la plateforme sous le mode d’accès
enseignant .
- A partir la page d’accueil l’enseignant modère les interfaces suivantes:
 Paramètres de compte.
 La boite messagerie.
 L’interface classes.
 L’interface visioconférences.

- L’enseignant consulte les interfaces suivantes

 Consulter l’interface activités.
 Consulter l’interface actualités.
 Consulter l’interface plannings.
 Consulter l’interface statistiques.

- Il existe une button pour se déconnecter immédiatement.

3.2. Gérer les classes :

- Il s’affichera que les classes que l’enseignant a le droit de les y accédés.

78
-l’enseignant a le droit de gérer les devoir et les notes en consultant la classe qui gère.

79
- En cliquant sur l’Icon de corbeille tous les devoirs de la matière se supprimeront, si le cas de
l’Icon de crayon, un espace de modification apparaitra :

- Les devoir sont sous forme des documents importable depuis l’ordinateur.
- L’ajout des notes est pareille à celle de l’ajout des devoirs.

80
- L’enseignant par la suite peut lancer ou arrêter une visioconférence à partir la
conversation du groupe de matière et d’ajouter ou exclure un ou plusieurs étudiants.

81
4. INTERFACE ETUDIANT:

4.1. Page d’accueil :

- L’interface suivant concerne l’étudiant .

- L’interface étudiant permet d’avoir un accès rapide des statistiques, actualités et les
plannings.
- Il existe une button pour se déconnecter immédiatement.

- Chaque étudiant bénéfice des fonctionnalités suivantes :

 Gérer son profil.
 Consulter la boite messagerie.
 Consulter l’interface classes.
 Consulter l’interface activités.
 Consulter l’interface actualités.
 Consulter l’interface plannings.
 Consulter l’interface statistiques.
 Consulter l’interface visioconférences.

4.2. Gérer les classes :

82
- Chaque étudiant a le droit seulement de consulter leur classe.

- Il pourra consulter les salle (Matière), ou de consulter leurs devoirs.

83
- Lorsque l’étudiant consulte une matière selon leur planning, il a la possibilité de
participer à la conversation de groupe.

- L’étudiant peut participer à une visioconférence si et seulement s’elle est démarrée par
un administrateur ou enseignant, pourtant il a le droit d’enregistrer les visioconférences.

84
LES INTERFACES SUIVANTES SONT COMMUNES ENTRE TOUT TYPE D’UTILISATEUR :
5. INTERFACE PARAMETRES DE COMPTE:

- Tout d’abord l’interface affiche les informations générales de l’utilisateur.

- Par suite, il s’affichera les informations à modifier, lorsque la modification se termine,
l’utilisateur doit sauvegarder les changements.

85
- Prennons l’exemple de changement de mot de passe :

- L’utilisateur doit saisir l’ancien mot de passe ainsi que le nouveau, puis sauvgarder les
changements.
- L’utilisateur a le droit de mettre à jour leur photo de profile.

86
6. INTERFACE PLANNIGS :

- Même si que l’administrateur peut les consulter, l’interface de consultation des planning est
accessible et commune entre l’enseignant et l’etudiant.
- Ces deux utilisateurs peuvent consulter tout le temp l’aperçu et le contenu des plannings
publiés par l’administration et les téléchargés, il se peut que ces plannings apparaissent dans
l’accès rapide par priorité les plus récents.

87
 7. INTERFACE ACTUALITES :

- L’espace des actualités permet à l’utilisateur de s’informer de toute nouveauté publié par
l’administration.

88
 8. INTERFACE ACTIVITES :

- Chaque utilisateur quelque soit peut lancer les activités pédagogiques.

9. INTERFACE BOITE MESSAGERIE :

89
 -Tous les utilisateurs peuvent communiquer entre eux, par envoie des message texte ou
fichier média, l’utilisateur ainsi bénéficie de plusieurs fonctionnalités tel que consulter les
informations et les statuts des autres l’utilisateurs, changer leur statut.

VIII. CONCLUSION :

Dans ce chapitre on a présenté le cahier des charges de la plateforme EL-ROOM, dont on a

détaillé la conception qui doit répondre aux spécifications de l’utilisateur, et la réalisation qui
traduit cette conception en service tangible et utilisable.

90
 Conclusion Générale

Ce projet intitulé « PLATEFORME D’ENSEIGNEMENT EN LIGNE EL ROOM E-LEARNING ROOM »

consiste à la conception et la réalisation d’une plateforme web destiné pour l’apprentissage en
ligne.

Contrairement à la majorité des travaux existants sur le marché qui offrent des fonctionnalités
limitées et nécessitent un effort de configuration considérable, on a réalisé un système qui permet
à la fois de gérer des formations, simuler un salon de formation virtuel.

91
 RÉFÉRENCES :

CHAPITRE 1 : PÉRSENTION DE L’ENTREPRISE

II. Situation géographique :

[Link]

III. Activités de l’entreprise :

[Link]
[Link]
[Link]
dans-lagence-touch-media/

IV. Organisation interne de l’entreprise :

[Link]

CHAPITRE 2 : GÉNÉRALITÉS SUR E-LEARNING

II. Taxonomie de Bloom

[Link]
[Link]
[Link]
[Link]

III. MOOC :
[Link]
[Link]

IV. Ressource pédagogique et activités

[Link]
[Link]
[Link]

V. Triangle d’apprentissage
[Link]

CHAPITRE 3 : ÉTUDE DES SOLUTIONS EXISTANTES

II. MOODLE
[Link]
[Link]

92
 [Link]
[Link]
[Link]
III. ZOOM
[Link]
[Link]
[Link]
zoom-et-comment-ca-marche-ainsi-que-des-trucs-et-astuces
[Link]
Rooms

IV. MICROSOFT TEAMS

[Link]
[Link]
[Link]
R%C3%A9sum%C3%A9-des-fonctionnalit%C3%A9s-Microsoft-TEAMS

V. GOOGLE MEET
[Link]
[Link]
[Link]
[Link]

VI. TABLEAU COMPARATIF :

[Link]
[Link]
de-visioconference-les-plus-populaires/
[Link]

CHAPITRE 4 : SPÉCIFICATIONS DES BESOINS ET UTILISATION :

II. SPÉCIFICATIONS DES BESOINS :

[Link]
informatique/2_annee/Intro_syst_info/cours_UQAC/14_La%20specification_des_beso
[Link]

III. L’UTILISATION DE LA PLATEFORME : (Traduit)

a. Les acteurs de la plateforme :
[Link]

b. Cas d’utilisations :
[Link]

c. Diagramme cas d’utilisation :

[Link]

93
CHAPITRE 5 : ENVIRONNEMENT DE DÉVELOPPEMENT :

II. ENVIRONNEMENT :
a. Outils Matériels :
[Link]
series/130-15ikb/81h7/81h70015fe/mp1es71d

b. Outils Logiciels :

 Visual Studio Code :

[Link]
[Link]

 StarUML :
[Link]
[Link]

 Xampp :
[Link]
[Link]

 Chrome :
[Link]
[Link]
8KB06mQUPD-
lKscCkc0fRcZaNr8uju9qWH8Nu4hl8wvDUbMq6vUbOAaAoPwEALw_wcB&gclsrc=aw
.ds

 Mockup Balsamiq
[Link]
[Link]
avec-le-mockup
[Link]

c. Langages et Frameworks:

 Angular :
[Link]
[Link]

 Laravel :
[Link]
[Link]

94
  CSS :
[Link]
et_syntaxe_de_CSS
[Link]

 MySQL :
[Link]

CHAPITRE 6 : CONCEPTION ET RÉALISATION :

I. INTRODUCTION :
[Link]
[Link]
%20logiciel%20met,et%20donc%20de%20programmes%20informatiques

I. CONTEXTE ET PROBLÉMATIQUE :

III. OBJECTIF :

IV. MÉTHODOLOGIE DE CONCEPTION :

[Link]

V. MODÉLISATION DES INTERFACES :

[Link]

VI. MODÉLISATION DES DONNÉES :

[Link]

1. Diagramme de classe :
[Link]

2. Dictionnaire des données :

[Link]

VII. RÉALISATION ET FONCTIONNEMENT :

[Link]

95
@CHAKFI CHAKFI Ahmed