Pfe Isims 2012 PDF

REPUBLIQUE TUNISIENNE
UNIVERSITE DE SFAX
*************
**********
MINISTERE DE L’ENSEIGNEMENT
INSTITUT SUPERIEUR
SUPERIEUR ET DE LA RECHERCHE
D’INFORMATIQUE ET DE
SCIENTIFIQUE
MULTIMEDIA
Projet de Fin d’Etudes

En vue de l’obtention du diplôme
d’ingénieur
Spécialité : Informatique, Technologie Web
& Multimédia
Conception et réalisation d’une plateforme

d’E-learning
Réalisé par : Halima CHABCHOUB

Rim ABDELHEDI
Soutenu le 14 juin 2012 devant le jury
Mr. Mohamed MILADI : President
Mr. Mohamed HADJ KACEM : Membre
Mr. Radhouane GUERMAZI : Encadreur
Mr. Slim BAKLOUTI : Invité entreprise
Année Universitaire 2011/2012

Dédi c ac es
Du profond de mon cœur, je dédie ce travail à tous ceux qui me sont chers,
A MES CHERS PARENTS

Que ce travail soit l’expression de ma reconnaissance pour vos sacrifices
consentis, votre soutient moral et matériel que vous n’avez cesse de prodiguer.
Vous avez tout fait pour mon bonheur et ma réussite.
Que dieu vous préserve en bonne santé et vous accorde une longue vie
A MON CHER MARI

Pour l'amour et le respect qu’il me porte
pour son aide, son encouragement et sa disponibilité.
A MES FRERES, SŒURS, LEURS EPOUX ET LEURS ENFANTS
Vous étiez toujours présents pour m’aider et m’encourager.

Sachiez que vous serez toujours dans mon cœur.
A tous mes amies qui n’ont cessé de m’encourager et de me soutenir

A TOUS MES AMIES…
Hal i m a
Dédi c ac es
A mes parents
Aucun hommage ne pourrait être à la hauteur de
l’amour
Et de l’affection dont ils ne cessent de me comble
A mon Mari
A mes Frères
En leur souhaitant la réussite et le bonheur
A toute ma famille
A tous mes amis
A tous mes professeurs et ceux qui ont contribué à
la réussite de ce travail
Ri m
Remerciements
« ‫» اﻟﺤﻤﺪ ﷲ اﻟﺬي ھﺪاﻧﺎ ﻟﮭﺬا و ﻣﺎﻛﻨﺎ ﻟﻨﮭﺘﺪي ﻟﻮﻻ أن ھﺪاﻧﺎ اﷲ‬
Nous exprimons nos profondes gratitudes et respectueuse reconnaissance à

notre encadreur :
Mr. Radhouane GUERMAZI
Pour sa bonne volonté d'accepter de nous encadrer, pour tout le temps qu’il
nous a octroyé et pour tous les conseils qu’il nous a prodigué.
Nous remercions aussi nos encadreurs de la société
Mr. Slim BAKLOUTI & Mr. Ahmed BEN AYED
Pour leurs directives précieuses, et pour la qualité de leurs suivis durant toute
la période de notre projet.
Nous tenons à remercier
Mr. Mohamed MILADI
qui a bien voulu nous faire l’honneur de présider le jury.
Nous remercions sincèrement
Mr. Mohamed HADJ KACEM
d’avoir accepté d’être l’examinateur de ce manuscrit.
Nos vifs remerciements s’adressent également à nos enseignants et à nos amis,
pour leur présence chaleureuse et leur encouragement
AVANT PROPOS
Cette étude entre dans le cadre de la préparation d’un mémoire de fin d’études en vue de
l’obtention du diplôme d’Ingénieur en Informatique, Technologie Web et Multimédia au sein
de l’Institut Supérieur d’Informatique et de Multimédia de Sfax.
C’est ainsi que nous avons eu l’occasion de préparer notre projet de fin d’étude intitulé
«Conception et réalisation d’une plateforme d’Elearning» proposé par la société Génie
Consulting.
Ce projet est un apport très bénéfique quant au perfectionnement des connaissances de

l’étudiant dans le domaine informatique et pour avoir l’opportunité d’appliquer ses
connaissances théoriques acquises tout au long de son cursus universitaire dans le cadre
professionnel.
Table des matières
Introduction générale............................................................................................................... 1
Chapitre I :ETUDE PREALABLE ........................................................................................ 4
1.1 Introduction ................................................................................................................. 4
1.2 Présentation du groupe ELITECH & de la société Genie-Consulting ....................... 4
1.3 Recueil.............................................................................................................................. 5
1.3.1 Définition du champ de l’étude ................................................................................. 5
1.3.2 Objectifs à atteindre et publiques cible ..................................................................... 8
1.3.3 Planning prévisionnel ............................................................................................... 9
1.4 Etude de l’existant ......................................................................................................... 10
1.4.1 Analyse de l’existant ............................................................................................... 10
1.4.2 Critique de l’existant ............................................................................................... 17
1.5 Proposition de différentes solutions .............................................................................. 19
1.6 Conclusion...................................................................................................................... 20
Chapitre II:MODELISATION CONCEPTUELLE & ORGANISATIONELLE ........... 21
2.1 Introduction : .................................................................................................................. 21
Partie 1 : Modélisation Conceptuelle................................................................................ 21
Introduction ...................................................................................................................... 21
1. Choix de la méthodologie de conception : ................................................................... 21
2. Diagramme des cas d’utilisation .................................................................................. 22
2.1 Identification des acteurs........................................................................................ 23
2.2 Identification des cas d'utilisation .......................................................................... 23
2.3 Description textuelle des principaux cas d'utilisation ............................................ 26
3. Modélisation conceptuelle des données ....................................................................... 30
3.1 Dictionnaire des données ....................................................................................... 31
3.2 Représentation des classes ..................................................................................... 33
3.3 Représentation des associations entre les classes................................................... 34
3.4 Diagramme de classes ............................................................................................ 36
4. Modélisation conceptuelle des traitements .................................................................. 37
4.1 Règles de gestion:................................................................................................... 37
5. Diagrammes de collaborations ..................................................................................... 38
6. Diagrammes de séquences ........................................................................................... 40
6.1 Diagramme de séquence : « Authentification » ..................................................... 40
6.2 Diagramme de séquence : « Inscription au site »................................................... 41
6.3 Digramme de séquence : « Ajouter Formation » .................................................. 41
6.4 Digramme de séquence : « assister/animer formation» ....................................... 42
7. Diagramme d'états-transitions:..................................................................................... 44
Partie 2 : Modélisation organisationnelle et logique ....................................................... 46
Introduction ...................................................................................................................... 46
1. Diagramme d’activités: .......................................................................................... 46
2. Modélisation logique des données : ............................................................................. 47
2.1. Règles de passage d’un diagramme de classe vers un modèle relationnel............ 48
2.2. Modèle logique des données optimisé : ................................................................ 48
Conclusion :.......................................................................................................................... 49
Chapitre III :REALISATION............................................................................................... 50
3.1 Introduction .................................................................................................................... 50
3.2 Etude technique ............................................................................................................. 50
3.2.1 Environnement de réalisation................................................................................. 50
3.2.1.1 Matériels de base :............................................................................................ 50
3.2.1.2 Choix des langages de développement et de SGBD : ..................................... 51
3.2.1.3 Outil de développement : ................................................................................ 53
3.2.2. Modélisation physique des données ....................................................................... 55
3.3 Etude d’enchainement des programmes......................................................................... 57
3.4 Production des programmes ........................................................................................... 59
3.4.1 Descriptif du produit : ............................................................................................. 59
3.4.2 Architecture ............................................................................................................. 60
3.4.3 Charte graphique ..................................................................................................... 63
3.4.3.1 Arrière-plan et texte ......................................................................................... 63
3.4.3.2 Usage des couleurs ........................................................................................... 63
3.4.3.3 Charte graphique stable et robuste ................................................................... 63
3.4.4 Présentation des interfaces ...................................................................................... 64
3.5 Apports : ......................................................................................................................... 72
3.5.1 Apports au niveau des connaissances techniques : ................................................. 72
3.5.2 Apports au niveau de la conception et du développement ...................................... 72
3.6 Evaluation....................................................................................................................... 73
3.6.1 Bilan quantitatif...................................................................................................... 73
3.6.2 Bilan qualitatif......................................................................................................... 73
3.7 Conclusion:..................................................................................................................... 73
Conclusion et Perspectives..................................................................................................... 76
Glossaire .................................................................................................................................. 78
BIBLIOGRAPHIE & Webliographie .................................................................................. 79
Liste des Figures
FIGURE 1:L'OUTIL SKYPE ............................................................................................................................................... 11
FIGURE 2:INTERFACE DE L'APPLICATION DIMDIM............................................................................................... 12
FIGURE 3:INTERFACE DE L'APPLICATION OPENMETTING................................................................................. 13
FIGURE 4:INTERFACE D'ADOBE CONNECT............................................................................................................... 14
FIGURE 5:INTERFACE DE BIGBLUEBUTTON ............................................................................................................ 15
FIGURE 6:INTERFACE TEAMVIWER ............................................................................................................................ 16
FIGURE 7:INTERFACE DE CONFIGURATION DE ULTRAVNC .............................................................................. 17
FIGURE 8:DIAGRAMME DE CAS D'UTILISATION POUR L'ADMINISTRATEUR ............................................... 24
FIGURE 9:DIAGRAMME DE CAS D'UTILISATION POUR LE FORMATEUR........................................................ 25
FIGURE 10:REPRESENTATION DU DIAGRAMME DE CLASSE............................................................................... 37
FIGURE 11: DIAGRAMME DE COLLABORATION PILOTAGE D’UN PC A DISTANCE...................................... 39
FIGURE 12:DIAGRAMME DE COLLABORATION AJOUTER FORMATION ......................................................... 39
FIGURE 13:DIAGRAMME DE COLLABORATION ANIMER FORMATION ........................................................... 40
FIGURE 14::DIAGRAMME DE SEQUENCE « AUTHENTIFICATION ».................................................................... 41
FIGURE 15:DIAGRAMME DE SEQUENCE « INSCRIPTION AU SITE».................................................................... 41
FIGURE 16:DIAGRAMME DE SEQUENCE : « AJOUTER FORMATION »............................................................... 42
FIGURE 17:DIAGRAMME DE SEQUENCE : « ASSISTER/ANIMER FORMATION »............................................. 43
FIGURE 18:DIAGRAMME DE SEQUENCE : « PILOTAGE D’UN PC A DISTANCE » ............................................ 44
FIGURE 19:DIAGRAMME D’ETAT TRANSITION “ANIMER FORMATION”......................................................... 44
FIGURE 20: DIAGRAMME D’ETAT TRANSITION « PILOTAGE PC A DISTANCE »............................................ 45
FIGURE 21: DIAGRAMME D’ACTIVITE « GERER PROFIL DU FORMATEUR »................................................. 47
FIGURE 22: ARCHITECTURE DE L’APPLICATION.................................................................................................... 61
FIGURE 23:LA PAGE D’ACCUEIL ................................................................................................................................... 64
FIGURE 24:INSCRIPTION D’UN NOUVEAU UTILISATEUR DE TYPE APPRENANT ......................................... 65
FIGURE 25:PROFIL D’UN NOUVEAU APPRENANT SANS FORMATION............................................................... 66
FIGURE 26:LISTE DES FORMATIONS PROPOSEES................................................................................................... 67
FIGURE 27:CREATION D’UNE FORMATION ET ALERT DU SYSTEME............................................................. 67
FIGURE 28: CREATION D’UNE FORMATION ............................................................................................................. 68
FIGURE 29:PROFIL D’UN NOUVEAU APPRENANT APRES L’INSCRIPTION A DES FORMATIONS ........... 69
FIGURE 30:ALERT SYSTEME"FORMATION INDISPONIBLE" ............................................................................... 69
FIGURE 31:INTERFACE SALON COTE FORMATEUR ............................................................................................... 70
FIGURE 32: INTERFACE SALON COTE APPRENANT................................................................................................ 71
FIGURE 33: INTERFACE PILOTAGE COTE APPRENANT ........................................................................................ 71
FIGURE 34: INTERFACE PILOTAGE COTE FORMATEUR....................................................................................... 72
Liste des tableaux
TABLEAU 1:PLANNING PREVISIONNEL ........................................................................................................................ 9
TABLEAU 2:COMPARAISON DES SOLUTIONS EXISTANTES ............................ ERREUR ! SIGNET NON DEFINI.
TABLEAU 3:DICTIONNAIRE DE DONNEES.................................................................................................................. 33
TABLEAU 4:LISTE DES CLASSES ................................................................................................................................... 34
TABLEAU 5:REPRESENTATION DES CARDINALITES.............................................................................................. 35
TABLEAU 6:REPRESENTATION DES ASSOCIATIONS SIMPLES............................................................................ 35
TABLEAU 7:REPRESENTATION DES ASSOCIATIONS « GENERALISATION/SPECIALISATION » ................ 36
TABLEAU 8:REPRESENTATION DES ASSOCIATIONS PORTEUSES DES DONNEES......................................... 36
TABLEAU 9:MATERIEL DE BASE................................................................................................................................... 51
TABLEAU 10 : MODELISATION PHYSIQUE DES DONNEES .................................................................................... 57
Introduction générale
L'enseignement est un mode d'éducation permettant de développer les connaissances d'un
élève par le biais de la communication verbale et écrite. Des nombreux observateurs avertis
que les structures de l'enseignement traditionnel n’ont guère changé depuis le début du
XIXème siècle et ce, en dépit des bouleversements sociaux et de l'évolution des moyens de
communication.
L’enseignement traditionnel est centré sur le cours magistral. Les auditeurs sont passifs,
souvent intellectuellement absents du fait des conditions difficiles imposées par la surcharge
horaire. Les principaux moyens mis en œuvre dans ce type d’enseignement: un cours
magistral associé à des travaux dirigés et pratiques, le « tableau noir » et le support « papier ».
Par ailleurs, les systèmes traditionnels d'enseignement imposent à tous les apprenants une
unité de lieu, une unité de temps, une unité d'action, une unité de rythme ce qui implique une
rigidité des mécanismes et une difficulté d'adéquation avec la réalité quotidienne.
La tendance à l'amélioration du système sur le plan pédagogique par le recours aux moyens
audiovisuels classiques (projections de diapositives, de transparents, séquences vidéo) n'a pas
résolu le problème. En effet, le formateur doit à la fois exposer le cours et entreprendre des
manipulations techniques assez difficiles.
L’enseignement moderne exige des moyens pour faciliter l'apprentissage de l'apprenant tels
que le choix de situation, l’explicitation d'objectifs et des critères, les choix de contenus, la
mise en œuvre de procédures d’éducation, l’élaboration d'outils pour aider l'élève à construire
et s'approprier des savoirs et des savoir-faire.
Plusieurs solutions d’organisation des formations, à base des TICE, existent sur le marché.
Ces solutions proposent les différentes fonctionnalités de base (communication audio vidéo,
Tchat …).Cependant, elles possèdent plusieurs inconvénients comme la lenteur au niveau du
temps de réponse du système, le nombre limité des apprenants. Aussi, il est à noter que la
majorité des solutions de pilotage à distance existantes exigent autre que l’installation une
configuration d'accessibilité. Il n’existante pas une solution d’apprentissage en ligne complète
qui offre à la fois les fonctionnalités de la gestion des formations, du web conferencing et le
pilotage.
1
Le travail présenté dans ce mémoire s’inscrit dans ce contexte. Notre objectif est de concevoir
et de mettre en place un système qui réunie les différentes fonctionnalités nécessaire à une
plateforme d’apprentissage en ligne et confronte les inconvénients des solutions existants.
Notre pojet est composé de trois parties principales qui sont:
 Gestion des formations : permet l’organisation des formations ainsi que la gestion des
utilisateurs (creation des comptes pour les formateurs et les apprenants…)
 WebConférence :cette partie represente notre salon de formation qui offre les
fonctionnalités suivantes
 Uploader le support d’une formation,
 Utiliser les ressouces audio et vidéo,
 Conversation textuelle(Tchat),
 Telécharger et uploader des documents.
 Pilotage d’un PC à distance: donne la possibilité à un formateur de piloter les pc des
apprenants.
Le reste de ce manuscrit sera organisé comme suit :
Dans le premier chapitre, nous mettrons l’accent sur le champ d’étude de notre application
qui est l’apprentissage en ligne. Nous présentons une synthèse des solutions existantes sur le
marché en discutant les avantages et les inconvénients de chacune d’elles. Puis nous
proposons les différentes solutions aux problèmes soulevés.
Dans le deuxième chapitre, la modélisation conceptuelle de notre solution sera détaillé.
Ensuite nous exposons le modèle logique des données.
Dans le troisième chapitre, une étude technique sera présentée où nous décrivons
l’environnement de développement matériel et logiciel et nous présentons les différents
fonctionnalités de notre application à travers des capture d’écran.
2
Chapitre I :
ETUDE PREALABLE
Etude préalable
1.1 Introduction
L’étude préalable constitue une étape préliminaire pour la réalisation d’une application.
En effet, elle permet d’analyser, d’évaluer et de critiquer le fonctionnement habituel, tout en
élaborant la liste des solutions possibles.
Ce chapitre sera réservé pour présenter l’étude préalable de notre projet. Nous commençons
par la définition du champ de l’étude et les objectifs à atteindre. Ensuite nous analysons
quelques solutions existantes sur le marché en discutant leurs avantages et leurs
inconvénients. L’analyse et le critique de l’existant nous ont permis de cerner nos objectifs
afin de développer un système de qualité dans le futur. Enfin, nous proposons les différentes
solutions aux problèmes soulevés.
1.2 Présentation du groupe ELITECH & de la société

Genie-Consulting1
ELITECH est un groupe de conseil et d’ingénierie, consultant et intégrateur de systèmes
implanté en France à Paris.
ELITECH dépose de plusieurs pôles de compétence et il est spécialisé dans le développement
informatique nearshore – offshore.
Les services proposés par ELITECH sont les suivants :
 Virtualisation via le cloud computing,
 Développement Web et d’e-marketing ainsi que développements spécifiques,
 Support technique via une hotline spécialisée,
 Consulting et Formation professionnelle.
ELITECH est fondé sur ces atouts :
 Fiabilité : plus de sept ans d'expérience en matière de développement et conduite de
projets,
 Garantie : contrat de collaboration régi par le droit français,
 Confort : suivi local en France par un Chef de Projet et Responsable Commercial,
 Economie : tarifs transparents et extrêmement compétitifs.
La société Genie-Consulting présente la filiale Tunisienne du groupe ELITECH. Elle est

spécialisée dans le développement spécifique, la formation et se distingue par son pôle R&D
1
http://elitech.fr/
http://genie-consulting.com/
4
Etude préalable
(Recherche & Développement) implanté dans la ville de Sfax. Ce pôle R&D propose chaque
année des stages qui suivent les exigences et l’actualité du marché.
1.3 Recueil
1.3.1 Définition du champ de l’étude
L'utilisation des Technologies d’Information et de Communication « TIC» dans les
processus de transmission des connaissances fait désormais partie de l'environnement
fonctionnel et intellectuel de plusieurs sociétés[VIEIRA ET AL 07].De ce fait, de nouvelles
articulations entre la production, la diffusion et l'appropriation des contenus à vocation
pédagogique ont été élaboré pour donner naissance à de nouvelles logiques d'usage s'appuyant
sur un accès à une information plurielle et interconnectée émergent, tant pour les enseignants
que pour les apprenants.
L’appellation générique TIC recouvre une réalité plurielle et englobe une série de
déclinaisons spécifiques, parmi lesquelles on trouve notamment les technologies de
l’information et de la communication éducatives « TICE » [VIEIRA ET AL 07]
Avec les TICE, nous nous intéresserons plus particulièrement aux dynamiques portées par les
technologies numériques dans les contextes éducatifs. Dans une approche générique, on peut
considérer les TICE comme toute application informatique, participant au fonctionnement
d’une formation, et à la transmission et à la mise en commun des connaissances. Cela inclut
les services et applications informatiques utilisant la technologie du réseau internet à des fins
d’enseignement ainsi que les dispositifs intégrés (dits plateformes, environnement
pédagogiques) disponibles à partir de serveurs donnant par exemple accès à des applications
de type visioconférences, audioconférences, chat, production, édition et stockage
d’informations pédagogiques et bien sûr courrier électronique (Bouillon, Bourdin, 2005).
Dans le but de valoriser la notion de TICE et de téléformation, nous mettons en exergue à
développer un système de téléformation.
Afin de mieux comprendre le contexte de notre futur système nous définissons dans ce qui
suit quelque notion relative à notre champ d'étude.
 FOAD :
La formation ouverte et/ou à distance est un dispositif souple de formation organisé en
fonction de besoins individuels ou collectifs (individus, entreprises, territoires). Elle comporte
des apprentissages individualisés et l'accès à des ressources et compétences locales ou à
distance. Elle n'est pas exécutée nécessairement sous le contrôle permanent d'un formateur.
5
Etude préalable
FOAD vient dans l’ordre de remédier aux problèmes des formations en présentiel. Ceci
présente l’avantage majeur du FOAD. Plusieurs type de personnes peuvent profiter de cet
avantage comme :
 Les personnes salariées souhaitant évaluer leur carrière professionnelle,
 Les personnes handicapées, qui ne peuvent pas se déplacer,
 Les personnes voulant réaliser une formation à l’étranger.
Parmi les Formes les plus courantes de formation ouverte à distance est le E-learning.
 E-Learning :
Le E-Learning est l’utilisation des nouvelles technologies multimédias de l’internet
pour améliorer la qualité de l’apprentissage en facilitant d’une part l’accès à des ressources et
à des services, d’autre part les échanges et la collaboration à distance .[ref : Union
Européenne]
Plusieurs termes sont utilisés pour traduire le terme E-Learning. La traduction la plus fidèle
est apprentissage en ligne.
Aujourd’hui, le e-Learning est lié spécialement à deux secteurs :
 Secteur professionnel :des grandes entreprises l’utilisent avec le management des

connaissances pour former et actualiser les connaissances de ses employés de manière
plus rapide.
 Secteur universitaire :afin de minimiser les charges d’enseignement,des universités

offrent des alternatives de formation à distance.
Pour organiser un projet de e-learning, il existe de type d’approches :asynchrone et

synchrone.
Approche asynchrone:
L’approche asynchrone est une méthode d’apprentissage s’adaptant aux disponibilités de
l’apprenant. En bref, celui-ci a accès à un ou des outils de formation tels qu’une vidéo, un
enregistrement audio, un texte, un logiciel d’apprentissage virtuel qu’il utilisera à sa guise. Le
suivi de formation avec le formateur ou entre les membres d’un groupe d’apprentissage se
fera par voie indirecte comme par courriel ou par forum de discussion.
Approche synchrone :
L’approche synchrone, au contraire de l’approche asynchrone, se caractérise par
l’interaction directe et en temps réel entre les apprenants et le formateur. C’est la méthode qui
s’approche le plus de la classe traditionnelle. Lorsque tous les apprenants d’un groupe sont
6
Etude préalable
simultanément en ligne avec leur formateur, partagent des applications, visionnent les mêmes
écrans ou encore reçoivent des images de vidéoconférence.
 RIA (Rich Internet Application) :
RIA est une application semi-légère qui utilise les ressources de l'ordinateur client.
Les RIA offrent une meilleure réactivité et ergonomie que les applications internet utilisant
des formulaires HTML traditionnels nécessitant des rechargements de pages.
Les avantages des RIA sont:
 Aucune installation est nécessaire à part l'environnement (navigateur Web ou Air ou
Java),
 Les données sont sauvegardées sur un serveur sécurisé,
 Vous pouvez accéder à votre environnement (application et données) depuis n'importe
quel ordinateur,
 Une meilleure ergonomie au niveau de la réactivité par rapport aux applications web
traditionnelles.
 Web Conférence :
Le web conférence permet de réunir plusieurs collaborateurs autour d'une plateforme
virtuelle pour une réunion de travail, des formations ou des séminaires. Tous les participants,
devant leurs ordinateurs et munis d'une connexion internet, communiquent et échangent des
données en temps réel à distance. Le web conférence permet un gain en temps et en argent.
En contre partie, il souffre des problèmes confidentialité et sécurité sont les points faibles de
ces solutions.
 Streaming :
Le streaming, encore appelé « lecture en transit », est la diffusion de
contenus audio et/ou vidéo en continu, au fur et à mesure du téléchargement du fichier.
Il s'oppose ainsi au principe de diffusion par téléchargement préalable du media.
Dans le cadre de la formation à distance, la gestion du streaming est un élément déterminant.
Il est important de maitriser la totalité de la chaine de streaming pour obtenir un cours en ligne
de qualité.
Il existe deux types de streaming :
Streaming progressif :
Encore appelé streaming statique, représente la solution la plus courante sur le web et
utilise les protocoles HTTP et FTP. Il ne nécessite pas un serveur spécialise. C'est le
navigateur Web qui effectue la lecture des medias audio et / ou vidéo. La qualité du media
n'est donc pas adaptable à la qualité de la connexion.
7
Etude préalable
Streaming continu :
Contrairement au streaming progressif, le streaming continu, encore appelée streaming
dynamique ou vrai streaming, permet une adaptabilité dynamique de la qualité du media
diffusée, en fonction des capacités de la connexion réseau cliente.
Tout ceci est rendu possible grâce a l'utilisation d'un serveur spécialisé dédié au streaming
vidéo tel que FMS ou encore red5. Il n'est pas nécessaire de télécharger l'ensemble du fichier
pour commencer à le visualiser. Le serveur n'envoie à l'internaute que les données dont il a
besoin.
 Sharing :
Le Sharing une fonction utilisée dans les outils de e-Learning qui permet de :
 Partager un document : en sélectionnant les fichiers à partir d’un ordinateur et les
en les affichant.
 Partager l’écran : vous permet de montrer aux participants de la réunion les
manipulations effectuées en temps réel sur un ordinateur.
 Pilotage à distance d’un ordinateur :
L'assistance à distance est une méthode permettant, depuis un ordinateur éloigné,
de prendre le contrôle d'un autre ordinateur en visualisant l'écran de celui-ci et en manipulant
les fonctions correspondant au clavier et à la souris. Cette assistance peut être effectuée sur
des ordinateurs et des serveurs avec certains logiciels.
Un bureau à distance est une innovation technologique permettant d'accéder à son ordinateur
distant physiquement via un autre ordinateur local. Cette technologie utile pour :
 Assistance à distance (informatique),
 Diagnostic (matériel),
 Aide en ligne,
 Configuration et paramétrage à distance.
Après avoir examiné le champ de l’étude relatif à l’application que nous allons développer,
nous présentons dans la section suivante nos objectifs à atteindre.
1.3.2 Objectifs à atteindre et publiques cible

Dans un secteur où les contraintes de formation en présentiel sont importantes
(disponibilité, le frais de déplacement, etc), le concept de la formation à distance offre des
réponses complémentaires et une plus grande flexibilité au stagiaire qui pourra se former à
son rythme en fonction de ses disponibilités.
8
Etude préalable
Notre objectif consiste à créer une plateforme d’E-Learmnig qui répond au besoin du
formateur et des apprenants à la fois et de manière à :
 Garantir plus de souplesse pour la planification des formations à l’aide d’une

interface ergonomique et simple à manipuler pour les différents utilisateurs,
 Faciliter l’accès aux ressources et services,
 Faciliter l’échange et la collaboration à distance,
 Améliorer la qualité d’apprentissage en utilisant les nouvelles technologies
multimédia,
 Garantir une interactivité entre le formateur et les stagiaires à travers des discussions
instantanées pour donner des réponses aux questions en direct, partage du bureau du
formateur, pilotage des bureaux des apprenants par le formateur,
 Optimiser le temps de réponse de l’application,
 Assurer la sécurité d’information.
Notre application s'adresse principalement à des formateurs désirant animer une
téléformation et à n'importe quel type apprenants voulant assister à une téléformation.
1.3.3 Planning prévisionnel
La clé principale de la réussite d’un projet est un bon planning. En effet, le planning aide à
bien subdiviser le travail et séparer les taches à réaliser, il offre une meilleure estimation et
gestion de temps nécessaire pour chaque tache. De plus, il donne assez de visibilité permettant
d’estimer approximativement la date d’achèvement de chaque tâche.
Dans notre projet, nous avons estimé de réaliser notre application dans une durée
approximative de 4 mois. Le tableau ci-dessous montre le planning que nous avons adapté
pour mener à bien notre réalisation des différentes parties du projet.
Semaine Février Mars Avril Mai Juin

Etape 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2
Etude préalable
Conception
Réalisation
Test et Validation
Rédaction du rapport
Tableau 1: Planning prévisionnel

9
Etude préalable
Comme le montre le tableau1.1 ci dessous, cinq principales phases peuvent être dégagés :
L’étude préalable: le résultat de cette phase est la détermination des objectifs à atteindre
dans notre future application en partant de l’existant.
Conception : il s’agit de détailler les spécifications des fonctions ainsi que la structure des
données, et des contrôles et les interfaces.
Réalisation : il s’agit de réaliser l’implémentation des programmes et effectuer les tests
unitaires.
Test et Validation: Il s ‘agit de tester notre plateforme de E-Learning.
Rédaction du rapport : description détaillée de notre travail.
1.4 Etude de l’existant

Cette section a pour objectif d’étudier fait le tour sur les solutions de E-Learning les plus
connues sur le marché. Cette étude permet de dégager les points forts et les points faibles de
chacune ces solutions.
Dans ce qui suit, nous présentons une analyse de l’existant, puis nous détaillons la critique
de l’existant.
1.4.1 Analyse de l’existant
La formation continue se fait actuellement de façon traditionnelle : cours, apprenants et

formateurs sur place. Ce type de formation présente beaucoup d’inconvénients telsque:
 Contrainte du nombre de Places limitées
 Contrainte du nombre de salles réduites;
 Charge élevée de la formation;
Dans le but de résoudre ces inconvénients plusieurs outils ont étais créer à base des
nouvelles technologies. Parmi lesquels nous pouvons citer :
Skype, Dim Dim, OpenMetting, BigBlueButton,adobe connect, Teamviewer , UltraVNC .
 Skype2 :
C’est un logiciel de visioconférence qui permet aux utilisateurs de passer des appels
téléphoniques via Internet. Les appels d’utilisateur à utilisateur sont gratuits, tandis que ceux
vers les lignes téléphoniques fixes et les téléphones mobiles sont payants. Skype permet aussi
la discussion instantanée et l’échange de fichier entre utilisateurs
2
http://www.skype.com
10
Etude préalable
Figure 1: L'outil skype

Il emploie la technologie innovatrice poste-à-poste, P2P (peer-to-peer), pour connecter un
utilisateur déjà inscrit avec les autres utilisateurs de Skype.
Dans le contexte des systèmes d’E-learing, skype ne peut traiter que la partie de
webconfrencing et ne permet pas la gestion des formations.
 Dim Dim3:
Dimdim est une application de réunion à distance (aussi appelée web conferencing)
permettant de communiquer en direct par Internet, sans avoir à installer de logiciel sur son
poste de travail. La conférence mixe tableau blanc, partage de documents (tels qu'une
présentation PowerPoint ou Impress), VoIP et vidéo. La figure ci-dessous présente l’nterface
de l'application DimDim .
Parmi les fonctionnalités de dimdim, nous notons :
 Partage de documents, écran, tableau blanc
 Audio et Vidéo conférence
 Chat public ou privé
 Enregistrement des conférences
Dimdim est basé sur ces technologies opensource 0:
 Mysql, Serveur de base de données SQL
3
http://www.dimdim.com/
11
Etude préalable
 Terracota, Solution de clustering pour les applications Java

 LightHTTPD, Serveur Web
 Tomcat, Serveur d’application Java
 CherryPy, Framework pour le développement web, orienté objet et pythonic.
 OpenOffice, Suite bureautique opensource
 Red 5, serveur flash opensource
Figure 2: Interface de l'application DimDim
 OpenMetting4:
OpenMeetings ressemble à Dimdim sauf qu’il est toujours open source et on peut
encore la tester. Pour cela, il suffit de créer un compte test sur leur site officiel .Cette
application est très riche en fonctionnalités et assez bien conçue.
Voici une liste non-exhaustive de ses fonctionnalités :
 Vidéo/Audio
 Partage de bureau avec tous les participants
 Tableau blanc avec possibilité de dessiner, écrire et éditer, redimensionner, ajout
une image et un symbole
 Import de différents types de documents.
4
http://www.openmeetings.de/
12
Etude préalable
 Envoie d’invitation avec un lien direct vers la conférence

 Système de modération
 Système de modération par utilisateur / organisation
 Module de sauvegarde
 Module d’édition de langue
 Chat public et privé
Figure 3: Interface de l'application OpenMetting

OpenMeetings, ne se base que sur des technologies opensource, comme Red5, cité plus
haut. Il fonctionne avec Mysql ou Postgresql, et se sert de xuggle pour l’encodage audio et
vidéo et openoffice pour la conversion de documents…
 Adobe Connect5:
Adobe Connect est un système de communication web à la fois souple et sécurisé qui
permet de prendre en charge et d'étendre les fonctionnalités d'Adobe AcrobatConnect
Professional afin de proposer des solutions de communication web pour la formation, le
marketing, les conférences et la collaboration en ligne.
5
http://www.adobe.com/
13
Etude préalable
Figure 4: Interface d'adobe Connect

Adobe Connect pour l'e-Learning fournit les novices et les experts aussi bien avec les
capacités nécessaires pour créer et fournir impérieuses, d'auto-formation des cours en
ligne, effectuer hautement interactives classes virtuelles, et gérer efficacement les
programmes de formation.
Adobe Connect pour l'eLearning, permet de :
 Créer facilement des haut-impact de la formation en ligne,
 Offrir des classes virtuelles et sur demande des cours,
 Gérer la participation, suivre les progrès, et évaluer l'efficacité du cours
 BigBlueButton6:
BigBlueButton est un système Open source de webconférence qui permet aux institutions
éducatives d’offrir leurs cours en ligne, avec une bonne qualité des diapositives, de la voix
et de la vidéo à un coût réduit. Il est à noter que BigBlueButton est conçue plutôt pour
l’enseignement supérieur que pour les entreprises. Elle s’apparente plus à une application
E-Learning qu’une application de E-Meeting.
BigBlueButton offre plusieurs fonctionnalités comme :
 Visualisation de tous les participants connectés,
 Possibilité à un utilisateur de lever sa main pour poser une question lors de la
présentation,
6
http://www.bigbluebutton.org/
14
Etude préalable
 Possibilité de zoomer la présentation,

 La fenêtre de chat permet aux participants de faire des discussions publiques ou
privées,
 Les utilisateurs ont la possibilité de permettre aux autres participants de visualiser leur
vidéo en activant leur webcam,
 Voir le curseur du présentateur c’est Un point circulaire rouge se déplace sur la
présentation,
 Avoir le statut du présentateur,
 Possibilité à un utilisateur de partager un document ou son bureau pour le
présentateur.
Figure 5: Interface de bigbluebutton

7
 Teamviwer :
C’est un logiciel pour fournir une assistance à distance sur internet à un autre
utilisateur qui exécute aussi Teamviewer.
Teamviwer permet de contrôler un ordinateur à distance, à travers différents modes de
connexion sont disponibles:
• Contrôle à distance: Contrôler l'ordinateur d’un partenaire ou travailler ensemble sur un
seul ordinateur.
7
http://www.teamviewer.com
15
Etude préalable
• Transfert de fichiers: Transférer des fichiers depuis ou vers l'ordinateur d’un partenaire.
• VPN: Créez un réseau virtuel privé avec un partenaire.
Figure 6: Interface Teamviwer

 UltraVNC8:
Permet d’accéder à des ordinateurs situés sur un réseau local ou par Internet. Son
principe est l’envoie des mouvements de souris et la touche-presses à l'ordinateur
distant et l'affichage de tout ce qui se passe sur l'ordinateur distant en temps réel.
UltraVNC se décompose en 2 parties :
 Le serveur, que l’on lancera sur la machine contrôlée
 Le viewer pour se connecter sur la machine à contrôler.
Une fois installé et lancé une la page de configuration de l’agent (figure 1.7) doit être
paramétrée.
8
www.ultravnc.fr/
16
Etude préalable
Figure 7: Interface de configuration de UltraVNC
1.4.2 Critique de l’existant

Le tableau 2 récapitule les avantages et les inconvénients de tous les outils traités.
Outils Avantage Inconvénients

Skype • Gratuit • Nécessite une installation
• Sécurité des échanges • Nécessite un très haut débit
• Limité de 5 personnes par
conférence (version gratuit)
Dim Dim • Possibilité d’enregistrement • limite de 20 personnes par
dans le serveur des cours conférence
• Nécessite une connexion internet
rapide pour le bon fonctionnement
de l'application.
OpenMetting • Même avantages que • limite de 5 personnes par
DimDim conférence
• Open source
Adobe Connect • Accessible à partir de • Parfois certaines lenteurs
n’importe quel navigateur d’exécution.
internet, et de n’importe quel
système d’exploitation.
17
Etude préalable
• Possibilité d’enregistrer la • Modules pas assez nombreux et

session et de l’exporter en différent
vidéo.
• Outils et modules très utiles
pour apporter de
l’interactivité.
BigBlueButton • Portabilité : fonctionne sur • Problème au niveau du temps de
réponse pour la fonctionnalité de
Mac, Unix, et les ordinateurs
sharing
PC.
Teamviwer • Ne nécessite pas une • Il peut être un outil d’espionnage,
connaissance de l’adresse IP puisque la plupart des
• Qualité d’image lors de manipulations à distance peut être
pilotage est très haute visible, il pourrait ainsi suivre en
direct les opérations effectuées à
distance sur votre ordinateur.
UltraVNC • il nécessite la fermeture de toutes
• redimensionnement
les applications en cours et la
automatique de l'écran
désactivation de(s) Pare-
• transfert de fichiers intégré
feux(Firewall) pour l’installer.
• interface de chat intégrée • il est nécessaire de pouvoir faire la
différence entre le SERVEUR et le
• possibilité de sécuriser les
CLIENT.
échanges par un plugin qui
• Il nécessite une configuration
encrypte les transferts
correcte afin de permettre le bon
• possibilité, depuis le client, de
fonctionnement des connexions.
désactiver le clavier et la
• Interface très chargé et compliqué
souris du serveur
Tableau 2: Comparaison des solutions existantes
Comme le montre le tableau ci-dessous, les solutions existantes de web conférence et

d’organisation des formations sur le marché proposent différents fonctionnalités de
base (communication audio vidéo, Tchat, sharing….).Cependant, elles possèdent des
inconvénients comme:
18
Etude préalable
 Lenteur au niveau du temps de réponse du système et surtout lors du partage d’un

bureau (le cas de Bigbluebutton et adobeConnect).
 Nombre limité des conférenciers/apprenants pour tous les systèmes existants.
De plus, il est à note que le pilotage à distance de toutes les solutions existantes exigent le
téléchargement, l’installation et aussi une configuration pour l'accessibilité ce qui nécessite
une connaissance minimale pour manipuler ces outils, ce qui n’est pas toujours le cas pour le
formateur et les apprenants puisque les formations sont hétérogènes (informatique, langue,
etc).
Notre étude a montré que les solutions du marché n’offrent pas les fonctionnalités nécessaire
à une plateforme de d’E-Learning (Web Conferencing, Pilotage……)
Notre application tente à d’être parmi les premières plateformes qui intégrer ces différents
fonctionnalités et confronte les inconvénients des solutions existants.
1.5 Proposition de différentes solutions

L’étude l’existant nous a permis de dégager plusieurs anomalies que nous avons détailles
dans la section précédente. Pour faire recours à ces anomalies nous proposons de concevoir et
d’implémenter un portail web qui regroupe tous les fonctionnalités d’e-formation et le
pilotage d’un bureau à distance. Donc notre solution englobe à la fois le sharing (document,
webcam) et l’eformation pour faciliter la tâche du formateur et des apprenants. Dans notre
solution nous envisageons que:
 Notre plateforme de e-learning soit basée sur une interface web, ce qui évitera les
problèmes de compatibilité avec le système d'exploitation du formateur et celui des
apprenants.
 Notre application doit être rapide (temps de connexion, temps de sharing) et fluide
(fluidité audio et vidéo). Étant donné le nombre de fonctionnalités importantes, elle devra
aussi offrir une simplicité d’utilisation et surtout ergonomie d’interface.
 Aussi, notre application doit permettre un pilotage à distance sécurisé on s'appuyant sur
la même solution et évitant l'utilisation des exécutables dont on ne connaît pas leur
mécanisme de partage.
 Regroupe les fonctionnalités de toutes les applications présentées dans l’étude de
l’existant.
19
Etude préalable
1.6 Conclusion
Dans ce premier chapitre, nous avons défini le champ de notre étude suivi d’une étude de
l’existant afin de préciser nos objectifs à atteindre.
En effet, l’étude de l’existant nous a permis de préparer une bonne conception pour les
améliorations que nous allons ajouter dans la solution proposée afin de répondre à nos
besoins.
Dans le chapitre qui suit nous présenterons les démarches de développement et de conception
de notre solution.
20
Chapitre II:
MODELISATION CONCEPTUELLE
&
ORGANISATIONELLE
Modélisation Conceptuelle & Organisationnelle
2.1 Introduction :
La modélisation conceptuelle et organisationnelle constitue une étape importante dans la
convergence des notations utilisées dans le domaine de l’analyse de conception objet
puisqu’elle représente une synthèse pour notre système.
Dans ce chapitre nous commençons par le modèle conceptuel détaillé de notre application,
ensuite nous exposons le modèle logique des données. Enfin nous clôturons ce chapitre par
une conclusion.
Partie 1 : Modélisation Conceptuelle
Introduction
Le Modèle conceptuel de données est une représentation statique du système
d’information. Il a comme objectif de constituer une représentation claire et cohérente des
données manipulées dans le système d’information.
Cette section, sera présentée comme suit : nous commençons par le choix de la méthodologie
de conception et justification. Ensuite nous identifions les acteurs et les diagrammes des cas
d’utilisation, puis nous présentons le diagramme de classe, diagramme de collaboration et
enfin les diagrammes d’état transition.
1. Choix de la méthodologie de conception :

Dans la cadre de notre projet, nous avons opté pour le langage UML comme une
approche de conception. Ci-dessous, nous présentons ce langage puis nous justifions notre
choix.
1.1 Présentation d’UML:

UML (Unified Modeling Language) est un langage formel et normalisé en termes de
modélisation objet. Son indépendance par rapport aux langages de programmation, aux
domaines de l’application et aux processus, son caractère polyvalent et sa souplesse ont fait
lui un langage universel. En plus UML est essentiellement un support de communication, qui
facilite la représentation et la compréhension de solution objet. Sa notation graphique permet
d’exprimer visuellement une solution objet, ce qui facilite la comparaison et l’évaluation des
solutions. L’aspect de sa notation, limite l’ambigüité et les incompréhensions.
UML fournit un moyen astucieux permettant de représenter diverses projections d'une même
représentation grâce aux vues.
21
Une vue est constituée d'un ou plusieurs diagrammes. On distingue deux types de vues:
 La vue statiques, permettant de représenter le système physiquement :
 Diagrammes de classes: représentent des collections d'éléments de modélisation
statiques (classes, paquetages...), qui montrent la structure d'un modèle.
 Diagrammes d'objets: ces diagrammes montrent des objets (instances classes dans un
état particulier) et des liens (relations sémantiques) entre objets.
 Diagrammes de cas d'utilisation: identifient les utilisateurs du système (acteurs) et
leurs interactions avec le système.
 Diagrammes de composants: permettent de décrire l'architecture physique statique
d'une application en termes de modules : fichiers sources, librairie exécutables, etc.
 Diagrammes de déploiement: montrent la disposition physique du matériel qui
compose le système et la répartition des composants sur ce matériel.
 La vue dynamiques, montrant le fonctionnement du système :
 Diagrammes de collaboration: montrent des interactions entre objet (instances de
classes et acteurs).
 Diagrammes de séquence: permettent de représenter des collaborations eu objets selon
un point de vue temporel, on y met l'accent sur la chronologie (envois de messages).
 Diagrammes d'états-transitions: permettent de décrire les changements d'états d'un
objet ou d'un composant, en réponse aux interactions avec d'autres objets/composants
ou avec des acteurs.
 Diagrammes d'activités: (une variante des diagrammes d'états-transitions) servent à
représenter graphiquement le comportement d'une méthode ou déroulement d'un cas
d'utilisation.
La conception de notre interface a été élaborée en suivant la démarche suivante :
 L'élaboration des diagrammes de cas d'utilisation. Cette étape à été réalisée suite à la
spécification fonctionnelle de l’application.
 Recensement des classes candidates et élaboration du diagramme des classes.
 Dresser les diagrammes de collaboration et de séquences pour mettre en évidence
interactions entre les différents objets du système.
 Elaborer le diagramme d'états-transitions pour montrer les différents états l'interface.
2. Diagramme des cas d’utilisation

Les cas d’utilisation décrient un ensemble d’actions réalisées par le système, en
réponse à une action d’un acteur.
22
2.1 Identification des acteurs

Le formateur, l’apprenant et l’administrateur sont les acteurs qui interagissent avec notre
système.
 Formateur : anime des formations dans le salon de formation.
 Apprenant : assiste à une formation dans le salon de formation.
 Administrateur : c’est le responsable de l’administration du site de téléformation.
2.2 Identification des cas d'utilisation

Nous décrivons pour chaque acteur les cas d’utilisation. On distingue les cas d'utilisation
suivants :
Formateur :
 S’inscrire au site de formation ;

 S’authentifier
 Gérer son profil (mettre à jour ses informations personnels et la liste de ses
formations) ;
 Ajouter une formation après la vérification de la disponibilité du salon de formation ;
 Consulter la liste des apprenants par Formation ;
 Réclamer un problème ;
 Payer l’animation d’une formation ;
 Animer une formation ;
 Activer l’audio et la vidéo ;
 tchatcher avec les apprenants au cours d’une formation ;
 Piloter un PC a distance ;
 Uploader un cours ;
 Uploader et télécharger des documents.
Apprenant :
 S’inscrire au site de formation ;

 S’authentifier
 Gérer son profil (mettre à jour ses informations Personnels et la liste des formations) ;
 S’inscrire à une formation ;
 Consulter la liste des formations proposées;
23
 Consulter la liste des formations Apprenant ;

 Réclamer un problème ;
 Payer l’assistance d’une formation;
 Assister à une formation ;
 Activer/désactiver l’audio et la vidéo ;
 Tchatcher avec ses collègues et le formateur au cours d’une formation ;
 Télécharger et uploader des documents ;
 Demander le pilotage de son PC ;
 Autoriser l’accès à son PC.
Administrateur :
 Authentifier
 Consulter la liste des utilisateurs (apprenant ; formateur) ;
 Répondre aux réclamations ;
 Consulter la liste des formations existantes ;
 Supprimer l’utilisateur non actif (apprenant, formateur) ;
Pour simplifier notre diagramme de cas d'utilisation, nous avons procédé à sa décomposition
en trois diagrammes :
 Diagramme qui concerne les activités de l’administrateur
Figure 8: Diagramme de cas d'utilisation pour l'administrateur
 Diagramme qui concerne les activités de l’Apprenant
24
Figure 9: Diagramme de cas d'utilisation pour l’apprenant
 Diagramme qui concerne les activités de Formateur
Figure 10: Diagramme de cas d'utilisation pour le formateur
25
2.3 Description textuelle des principaux cas d'utilisation

Dans le but de mieux comprendre notre système et les interactions avec les utilisateurs, dans
cette partie nous allons détailler les scenarios de principaux cas d’utilisation
CU1: Inscription au site

Résumé: Ce CU permet à l’acteur s’inscrire.
Acteurs: Formateur, Apprenant
Post-Condition: le cas démarre après le point 02 de l’enchainement nominal, l’utilisateur
s’inscrit au site
Scénario nominal
DESCRIPTION DU SCENARIO NOMINAL
« DEBUT»
01 : le système affiche un formulaire d’inscription à l’acteur
02 : l’acteur saisit 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 notifie l’acteur du bon déroulement de l’inscription
« FIN»
Scenario alternative
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.
CU2: Authentification
Résumé: Ce CU permet à l’acteur de se connecter au système.
Acteurs: Formateur, Apprenant
Pré-Condition:l’utilisateur possède un profil
Post-Condition : le cas démarre après le point 02 de l’enchainement nominal, l’utilisateur
s’authentifie
26
Scénario nominal
« DEBUT»
01 : Le système invite l’acteur à entrer son login et son mot de passe.
02: L’acteur saisit le login et le mot de passe et choisit son profil.
03: Le système vérifie les paramètres.
04: Le système ouvre l'espace de travail correspondant au profil.
« FIN»
Scénario alternative
DESCRIPTION DU SCENARIO ALTERNATI F
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 le scénario reprend
au point 01 du scénario nominal.
CU3 : Inscription à la formation

Résumé: Ce CU permet à l’apprenant de remplir un formulaire d’inscription à la formation
Acteurs: Apprenant
Pré-condition: l’apprenant est authentifié
Post-Condition: le cas démarre après le point 02 de l’enchainement nominal, l’apprenant
s’inscrit à une formation
Scénario nominal
« DEBUT»
01 : le système affiche un formulaire d’inscription à l’apprenant
02 : l’acteur saisit ses informations.
03 : le système affiche l’interface du payement
04 : le système valide l’inscription à la formation
05 : le système ajoute la formation au profil de l’apprenant
06 : le système notifie l’apprenant du bon déroulement de l’opération.
« FIN»
27
les informations sont manquantes ou incorrectes: ce scénario commence au point 04 du
scénario nominal.
01 : Le système informe l’acteur que les données saisies sont erronées et le scénario reprend
au point 01 du scénario nominal.
CU4: Créer formation

Résumé: Ce CU permet au formateur de créer sa propre formation.
Acteur: Formateur
Pré-Condition:le formateur est authentifié
Post-Condition : le formateur ajouter une nouvelle formation
Scénario nominal
« DEBUT»
01 : le système affiche un formulaire permet de créer une nouvelle formation.
02 : Le formateur saisie les coordonnées relatives à la formation.
03 : le système vérifie la disponibilité du salon de formation.
04 : le système affiche l’interface du payement
05 : le système valide la création de la formation
06 : le système ajout la formation au profil du formateur.
04 : le système notifie le formateur.
« FIN»
-Indisponibilité du salon à la date prévue par le formateur: ce scénario commence au point
03 du scénario nominal.
01 : Le système informe le formateur que le salon est indisponible et le scénario reprend au
point 02 du scénario nominal.
28
CU5: Animer une Formation

Résumé: Ce CU permet au formateur de dérouler sa formation.
Acteur: Formateur
Pré-Condition: le formateur est authentifié
Post-Condition : le formateur anime une formation
Scénario nominal
« DEBUT»
01 : le système affiche l’interface du salon de formation
02 : Le système affiche les paramètres relatifs au camera et au microphone du formateur
03 : le formateur autorise l’accès à son camera et son microphone
04 : Le formateur uploade son support de formation
03 : Le système rafraîchie le panel spécifique au support de la formation.
« FIN»
CU6: Assister à une Formation

Résumé: Ce CU permet à l’Apprenant d’assister à une formation
Acteurs: Apprenant
Pré-Condition: l’apprenant est inscrit à une formation
Post-Condition : l’apprenant assiste à la formation
Scénario nominal
« DEBUT»
01 : le système affiche l’interface du salon de formation
02 : Le système affiche les paramètres relatifs au camera et au microphone du formateur
03 : l’apprenant peut autoriser l’accès à sa camera et son microphone
04 : L’apprenant peut télécharger/uploader des documents.
« FIN»
29
CU6: Piloter un PC à distance d’un apprenant

Résumé: Ce CU permet au formateur de piloter un PC à distance d’un apprenant
Acteurs: Formateur
Pré-Condition: l’apprenant demande au formateur de piloter son PC par un message textuel
ou vocal, le formateur donne l’accord.
Post-Condition : le formateur navigue sur le PC de l’apprenant
Scénario nominal
« DEBUT»
01 :l’apprenant clique sur le bouton de pilotage.
02 : le système affiche une interface de pilotage.
03 : l’apprenant saisit un mot de passe puis clique sur un bouton pour devenir en état
START.
04 : le formateur lance l’application de pilotage.
05 :l’apprenant envoi son mot de passé et son adresse IP dans un message textuel au
formateur.
04 : le formateur saisit les données puis clique sur le bouton « connecter » pour accéder au
PC.
05 : le système affiche au formateur une fenêtre qui représente le bureau du PC de
l’apprenant.
« FIN»
3. Modélisation conceptuelle des données
La modélisation conceptuelle des données permet de dégager l'ensemble des données

manipulées en vue d'élaborer le diagramme de classes. En effet, ce dernier donne une vue
statique du système. Il décrit les types et les objets du système.
Il s’agit donc d’une représentation des données du champ de l’étude ainsi que le lien
sémantique entre ces données, facilement compréhensible, permettant de décrire le système
d’information à l’aide des concepts proposés par le modèle UML.
30
3.1 Dictionnaire des données
Le tableau ci-dessous représente la liste des attributs composants toutes les classes
formants notre système ainsi que leur description, leur taille et leur type.
N° Attribut Libelle Type Taille

1 id_util Identifiant de Entier 8
l’utilisateur
2 Nom Nom de Chaine de 50
l’utilisateur caractères
3 Prénom Prénom de Chaine de 50
4 Sex Sexe d’un Chaine de 10
utilisateur caractères
5 Pseudo pseudo de Chaine de 20
6 mot_pass Le mot de passe Chaine de 20
de l’utilisateur caractères
7 date_nais Date de naissance Date -
de l’utilisateur
8 Email Adresse mail de Chaine de 50
9 Tel Numéro de Entier 15
téléphone de
l’utilisateur
10 Pays Région Chaine de 20
caractères
11 Grade Grade d’un

formateur
12 Spécialité Spécialité du Chaine de 20
formateur caractères
13 Diploma Type de diplôme Chaine de 20

de l’apprenant caractères
31
14 niveau_etude Le niveau d’étude Chaine de 20

de l’apprenant caractères
15 Heure_Formation L’heure de la temps -
formation
16 id_formation L’identifiant Entire 10
d’une formation
17 titre_formation Le titre d’une Chaine de 50
formation caractères
18 niveau_formation Niveau du Chaine de 20
19 description_formation La description du Chaine de 100
20 date_creation La date de Date -
creation d’une
formation
21 date_formation La date emission Date -
de la formation
22 Durée La durée de la Entier 2
formation
23 id_module Identifiant du Entier 10
module de la
formation
24 libelle_module Le titre de Chaine de 20
module caractères
25 id_chapitre L’identifiant d’un Entier 10
chapitre
26 libelle_chapitre Le titre d’un Chaine de 50
chapitre caractères
27 id_reclam L’identifiant Entier 10
d’une réclamation
28 Objet L’objet d’une Chaine de 20
reclamation caractères
29 msg_reclam Le message de Chaine de 100
30 rep_reclam Réponse de Chaine de 100
32
31 Heure_formation L’heure de Chaine de -

32 prix_animer Le prix Real -
d’animation
formation
33 prix_aassiter Le prix d’assister Real -
formation
Tableau 3: Dictionnaire de données

3.2 Représentation des classes
La modalisation objet est utilisée dans le langage UML pour définir des objets-métiers
et l’architecture de l’application. Ces objets sont créés en tant qu’instance de classe et
s’interagissent dynamiquement pour offrir le comportement décrit par les cas d’utilisation.
La modélisation objet définit le comportement requis par les différentes classes pour assurer
la bonne mise en place des cas d’utilisation et des règles de gestion.
Les objets constituent la base de l’architecture des applications, ils peuvent être
réutilisés à travers des domaines d’application ou encore être identifiés et dérivés directement
des cas d’utilisation ou des domaines d’application. Une classe est composée :
 Attributs : représentant des données dont les valeurs représentent l’état de l’objet.
 La méthode : il s’agit des opérations applicables aux objets.
Après avoir dégagé le dictionnaire de données épuré, nous pouvons dégager les classes ainsi
leurs méthodes et leurs attributs qui sont présentés dans le tableau suivant :
N° Nom Classe Liste des Attributs Methodes
01 Utilisateur id_util inscrire()
Nom authentifier()
Prenom consulter_Profil()
Sex reclamer()
Pseudo maj_Profil()
mot_pass
date_nais
Email
Tel
Pays
33
02 Formateur Grade ajouter_Formation()

Specialité consulter_liste_Apprenant()
deposer_Document()
03 Apprenant niveau_etude inscrire_formation()
Diplome consulter_liste_Formation_proposée()
consulter_liste_formation_apprenat()
telecharger_documet()
uploader_document()
04 Enseigner prix_animer -
05 Assister prix_aassiter -
06 Formation id_formation payer()

titre_formation
niveau_formation
description_formation
date_creation
date_formation
Durée
Heure_formation
07 Module id_module -
libelle_module
08 Chapitre id_chapitre -
libelle_chapitre
10 Reclamation id_reclam -
Objet
msg_reclam
rep_reclam
Tableau 4: Liste des classes

3.3 Représentation des associations entre les classes
 Enseigner : entre Formateur et Formation

 Assister: entre Apprenant et Formation
34
Les associations sont des relations entre classes. Elles représentent un lieu durable ou
ponctuel entre deux objets, une appartenance, ou une collaboration. Elles sont représentées
par une ligne entre les classes.
Le modèle de données d’UML comprend trois associations génériques principales :
Généralisation, association, dépendance à partir de ces trois associations de base, nous
représentons ainsi les différents types d’association qui décrivent les dépendances entre les
classe déjà citées
Association simple : les associations simples sont des liaisons logiques entre entités.
Les cardinalités : précisent combien d’objets de classe considérée peuvent être liés à un objet
de l’autre classe.
Le tableau suivant illustre une représentation des cardinalités :
Cardinalités Désignation
1 Un et un seul
0..1 Zero ou un
N Entier naturel
m..n De m à n(deux entiers naturels)
0..* De 0 à plusiers
1..* De 1 à plusieurs
Tableau 5: Représentation des cardinalités
Le tableau suivant illustre les associations simples en indiquant leurs désignations, les classes
participantes et leurs cardinalités
N° Designation Classes participantes Cardinalités

1 Enseigner Formateur 1..*
Formation 1..*
2 Assister Apprenant 1..*
Formation 1..*
3 Composer Module 1
Chapitre 1..*
4 Envoyer User 1..*
Réclamation 1..*
5 Contenir Formation 1..*
Module 1..*
Tableau 6: Représentation des associations simples
35
Généralisation/spécialisation :
C’est une relation d’héritage, dans laquelle les objets de l’élément spécialisé peuvent
remplacer les objets de l’élément général.
Le tableau suivant représente les associations de généralisation en indiquant la super classe et
la sous classe et leurs contraintes.
Super-Classe Sous-Classe Contrainte

Utilisateur Formateur Complet
Apprenant
Tableau 7: Représentation des associations « généralisation/spécialisation »
Association porteuse de données(les classes d’associations) :
Les classes d’association : réalisent la navigation entre les instances d’autres classes.
Le tableau suivant illustre les associations porteuses de données en indiquant leur nom et liste
des attributs.
Nom association Liste des attributs
Enseigner prix_animer
Assister prix_assister
Tableau 8: Représentation des associations porteuses des données
3.4 Diagramme de classes

La figure ci-dessous récapitule les tableaux précédents dans un diagramme de classes qui
Contient toutes les informations telles que les classes, les méthodes, les associations et les
propriétés.
36
Figure 9: Représentation du diagramme de classe

4. Modélisation conceptuelle des traitements
Par opposition à la modélisation conceptuelle des données, la modélisation conceptuelle

des traitements permet de présenter formellement les activités exercées dont la connaissance
est la base du système d’information.
Dans cette section, nous commençons par illustrer les différentes règles de gestion, puis nous
présentons notre diagramme de collaboration, enfin nous clôturons par la description
détaillées des diagrammes de séquence et d’état transition
4.1 Règles de gestion:
Une règle de gestion décrit une condition d’exécutions d’une action.

Ci-dessous nous présentons les différentes règles de gestion de notre application.
RG1: Un utilisateur peut être un formateur ou un apprenant.
RG2 : Un ou plusieurs formateurs peuvent enseigner un ou plusieurs formations dans des
dates différentes.
37
RG3: Un ou plusieurs apprenants peuvent assister à une ou plusieurs formations dans des
dates différentes.
RG4 : Un ou plusieurs formations peuvent contenir un ou plusieurs modules.
RG5 : Chaque module se compose de un ou plusieurs chapitres
RG6 : Un ou plusieurs utilisateurs peuvent envoyer une ou plusieurs réclamations
5. Diagrammes de collaborations
Les diagrammes de collaborations permettent d’avoir une représentation spéciale des

objets et des liens et des interactions entre ces objets .Ils donnent une dimension séquentielle à
travers la numérotation. Le modèle construit par ces diagrammes explique la coopération
entre les objets nécessaires pour la réalisation d'une fonctionnalité donnée.
Il y a trois types d’objet en UML :
Boundary :
• Elles représentent l’interface entre l’acteur d’un cas d’utilisation et le système.
Contrôleur :
• Ces classes dirigent les activités entre les classes boundary et les classes métier
Métier :
Ce sont les classes décrites dans les cas d’utilisation qui représentent les données manipulées
lors des processus.
Le diagramme de collaboration de pilotage d’un PC à distance présenté ci-dessous explique
les messages échangés entre l’interface de pilotage de coté apprenant et l’apprenant aussi bien
entre l’interface de pilotage coté formateur et le formateur.
38
Figure 10: Diagramme de collaboration Pilotage d’un PC à distance
La figure suivante illustre le diagramme de collaboration de l’ajout d’une formation. Ce

dernier représente les messages échangés entre un formateur, l’interface profil, l’interface
formation, le controler_Formation et l’entité formation.
Figure 11: Diagramme de collaboration Ajouter Formation
39
La figure suivante illustre le diagramme de collaboration Animer une formation. Ce dernier

représente les messages échangés entre un formateur, l’interface de paramétrage audio et
vidéo, l’interface Salon formation et l’interface d’upload.
Figure 12: Diagramme de collaboration animer formation

6. Diagrammes de séquences
Les diagrammes de séquences représentent les interactions entre les objets en indiquant
la chronologie des séquences. Les diagrammes de séquences ajoutent une dimension
temporelle aux diagrammes de collaborations.
6.1 Diagramme de séquence : « Authentification »

Le diagramme de séquence « Authentification » présente le séquencement des
interactions entre utilisateur, l’interface d’authentification, l’entité_utilisateur et l’interface de
profil.
Dans ce diagramme loop(1,n) indique qu’il y aura une répétition d’affichage de l’interface
d’authentification jusqu’à la validation du pseudo et de mot de passe.
40
Figure 13: Diagramme de séquence « Authentification »
6.2 Diagramme de séquence : « Inscription au site »

Le diagramme de séquence d’inscription au site présente le séquencement des interactions
entre utilisateur, l’interface d’inscription et l’entité Utilisateur.
Figure 14: Diagramme de séquence « Inscription au site»

6.3 Digramme de séquence : « Ajouter Formation »
Le diagramme de séquence « Ajouter Formation » présente le séquencement des interactions
entre Formateur, l’interface profil, l’interface Formation, l’interface payement,
le controler _Formation et l’entité Formation.
Un formateur peut consulter son profil et a le choix de modifier et ajouter des informations
personnelles aussi il peut consulter la liste de ses formations où il peut ajouter ou modifier
une formation.
41
Nous présentons dans ce diagramme l’ajout d’une formation (La validation de l’ajout d’une
formation nécessite la vérification des champs saisis dans l’interface formation et ceux dans
l'interface payement).
Formateur Interface_Profil Formateur Controler_Formations Formation Interface_Payement

Interface_Formation
1:Recuperer_infos_Personnel(id_Formateur)()
2:Recuperer_Liste_Formation(id_Formateur)()
3:Afficher_Profil()
4:Charger_page_demander()
loop(1,n) 5:Afficher_Formulaire_disponibilité()
7:Saisir(date,heure)() 8:Verification_disponibilité() 6:verif1=Disponibilitésalondeformation()
10[!verif1]:Affichier("Date_Indisponible")() 9[!verif1]:Erreur()
12:Afficher_Formulaire_Formation() 11[verif1]:Disponible()
13:Saisir_Information_Formation(titre,description,module,payement...)()
14:Réaliser_payement()
16:Payementréalisé
15:Payementréalisé
17:Sauvgarder_Formation(titre,module,..)()
Figure 15: Diagramme de séquence : « Ajouter Formation »
6.4 Digramme de séquence : « assister/animer formation»

Le diagramme de séquence « assister/animer formation » présente le séquencement des
interactions entre Formateur, Apprenant, l’interface Salon.
L'opérateur "opt" représente un comportement optionnel, c’est à dire qu'il représente un
comportement qui peut se produire... ou pas.
42
Figure 16: Diagramme de séquence « Assister/Animer Formation »
6.5 Diagramme de séquence : « Pilotage d’un Pc à distance »

Le diagramme de séquence Pilotage d’un Pc à distance présente le séquencement des
interactions entre apprenant, formateur, l’interface salon, interface pilotage et l’entité
Apprenants.
La figure 18 illustre ce diagramme.
43
Figure 17: Diagramme de séquence « Pilotage d’un PC à distance »
7. Diagramme d'états-transitions:
Les diagrammes d'états-transitions permettent de décrire les changements d'états d'un

objet ou d'un composant, en réponse aux interactions avec d'autres objets/composants ou avec
des acteurs.
Un état se caractérise par sa durée et sa stabilité, il représente une conjonction instantanée des
valeurs des attributs d'un objet.
Une transition représente le passage instantané d'un état vers un autre.
Dans notre travail, nous nous limitons à la proposition de deux diagrammes d’état transition.
La figure suivante illustre l’état de transition d’une instance de la classe « Animer
formation ».
Figure 18: Diagramme d’état transition « animer formation »
44
La figure suivante illustre l’état de transition d’une instance de la classe « Pilotage d’un PC à
distance »
Figure 19: Diagramme d’état transition « Pilotage PC à distance »
45
Partie 2 : Modélisation organisationnelle et logique
Introduction
Dans la section précédente nous avons proposé une modélisation conceptuelle des
données et des traitements en se basant sur l’approche objet UML qui représente l’état de l’art
des langages de modélisation objet, il permet de modéliser la structure et le comportement
d’un système indépendamment de toute méthode ou langage de programmation.
La fiabilité de cette conception est notre porte vers un modèle organisationnelle et logique de
données efficace et confiant. Ainsi dans cette section nous allons présenter le modèle
organisationnel et logique de notre application.
1. Diagramme d’activités:
Le diagramme d’activité permet de mettre l’accent sur les traitements. Il est donc
particulièrement adapté à la modélisation du cheminement de flots de contrôle et de flots de
données. Il permet ainsi de représenter graphiquement le comportement d’une méthode ou le
déroulement d’un cas d’utilisation.
Les diagrammes d’activités sont relativement proches des diagrammes d’états-transitions dans
leur présentation, mais leur interprétation est différente.
Une activité représente une exécution d’un mécanisme, un déroulement d’étapes
séquentielles. Le passage d’une activité vers une autre est matérialisé par une transition.
Les transitions sont déclenchées par la fin d’une activité et provoquent le début immédiat
d’une autre.
Dans ce qui suit, nous présentons notre diagramme d’activité pour créer et gérer le profil du
formateur
La figure suivante illustre le déroulement séquentiel des traitements accomplis par un
formateur.
46
Figure 20: Diagramme d’activité « Gérer profil du formateur »
2. Modélisation logique des données :

La modélisation logique des données est une représentation des données, issues de la
modélisation conceptuelle puis des données.
Dans ce qui suit, nous présentons les différentes règles de passages d’un diagramme de classe
vers un modèle relationnel
47
2.1. Règles de passage d’un diagramme de classe vers un modèle

relationnel
Dans notre projet, nous avons adapté les règles suivantes pour faire le passage du
diagramme de classe vers le modèle relationnel
 Chaque classe sera représentée par une table dont les colonnes sont les attributs de cette
classe.
 Les associations de types 1 :N , N :1 , 1 :1 se traduisent par la conversion des deux
classes constituant cette association en deux tables dont une va contenir une clé étrangère
pour référencer à l’autre table .
 Les association de type N :M entre deux classes sont représentées par une nouvelle
table qui prend pour clé primaire la concaténation des clés primaires des deux classes.
 Une association de classe entre deux classes est représentée par une nouvelle table qui
prend pour clé primaire la concaténation des clés primaires des deux classes.
 L’agrégation sera traitée comme une association tout en tenant compte des cardinalités
 La composition sera traitée comme une association sauf qu’on doit ajouter une clause ON
DELETE CASCADE.
 Pour la généralisation (héritage) il existe trois stratégies de génération :
• Père et fils : la classe mère et la classe fille seront représentées par deux tables
distinctes chacune.
• Père seulement : Seulement la classe mère sera représentée par une table
portant ses attributs et les attributs de sa classe fille comme champs dans la table.
• Fils seulement : Seulement la classe fille sera représentée par une table portant
ses attributs ainsi que les attributs hérités de la classe mère comme champs dans la table.
Nous avons utilisé dans notre cas la troisième stratégie d’héritage. Chaque classe fils
représente une relation (table).
2.2. Modèle logique des données optimisé :

Dans ce qui suit, nous présentons le modèle de données optimisées.
Apprenant(id_app,nom, prenom, pseudo, mot_pass, date_nais, email, tel, pays,

niveau_etude, diplome).
Formateur(id_formateur,nom, prenom, pseudo, mot_pass, date_nais, email, tel, pays, grade,

specialite).
48
Reclamation(id_reclam, objet, msg_reclam, rep_reclam,# id_util,type_util)

Formation(id_formation, titre_formation, niveau, description, date_creation, date_formation,
duree,prix)
Module(id_Module, libelle_Module,#id_formation)
Chapitre(id_Chapitre, libelle_Chapitre, id_Module#)
Assister_Formation(#id_AF, Heure_Formation,# id_app)
Enseignier_Formation(id_EF,Heure_Formation,# id_formateur)
Module_formation(id_MF, #id_Module, id_formation)
Conclusion :
Dans cette partie, nous avons réalisé la modélisation organisationnelle et logique de notre
application. Cette modélisation nous a permis de dégager le modèle logique des données qui
sera exploité lors de l’implémentation. Ce modèle sera transformé en modèle physique de
données qui fera l’objet du chapitre suivant.
49
Chapitre III :
REALISATION
Réalisation
3.1 Introduction
Après avoir élaboré la conception de notre application, nous abordons dans ce chapitre le
dernier volet de ce rapport, qui a pour objectif d'exposer la phase de réalisation.
La phase de réalisation est considérée comme étant la concrétisation finale de toute la
méthode de conception.
Nous menons tout d’abord une étude technique où nous décrivons les ressources logicielles
utilisées dans le développement de notre projet. Nous présentons en premier lieu notre choix
de l’environnement de travail, où nous spécifions l’environnement matériel et logiciel qu‘on a
utilisé pour réaliser notre application puis nous détaillons l’architecture, aussi nous
présentons quelques interfaces réalisées pour illustrer le fonctionnement de quelques activités
du système.
3.2 Etude technique

L'étude technique est une phase d'adaptation de conception à l'architecture technique.
Elle a pour objectif de décrire au plan fonctionnel la solution à réaliser d'une manière
détaillée ainsi que la description des traitements. Cette étude, qui suit l'étude détaillée,
constitue le complément de spécification informatique nécessaire pour assurer la réalisation
du futur système. Cette étude permet également de déterminer:
 La structure informatique de la base de données,
 L'architecture des programmes,
 La structure de chaque programme et l'accès aux données.
3.2.1 Environnement de réalisation

Pour la réalisation de notre application, nous avons eu recours à plusieurs moyens matériels
et logiciels :
3.2.1.1 Matériels de base :

Le développement de l’application est réalisé via deux ordinateurs portables ayant les
caractéristiques suivantes :
50
Réalisation
Caractéristique DELL Inspiron1525 Acer

Marque DELL emachinesG520
Processeur Intel Core™ 2 Duo CPU IntelT1600 (1.66GHz)
RAM 2GO 3GO
Disque dur 150 GO 160GO
Système d’exploitation Microsoft Windows Vista Microsoft Windows 7 Professionnel
Tableau 9:Matériel de base

3.2.1.2 Choix des langages de développement et de SGBD :
Java
Java est un langage de programmation informatique orienté objet. Java permet de
développer des applications client-serveur. Côté client, les applets sont à l’origine de la
notoriété du langage. C’est surtout côté serveur que Java s’est imposé dans le milieu de
l’entreprise grâce aux servlets, et aux JSP (JavaServer Pages)[8]
Jsp :
JSP est l’acronyme de Java Server Page. C’est une technologie java qui permet la
génération des pages web dynamiques.
La technologie JSP permet de séparer la présentation sous forme de code HTML et les
traitements sous formes de classes [1].
La technologie JSP possède plusieurs avantages dont nous pouvons cituer:
 L'utilisation de Java par les JSP permet une indépendance de la plate-forme d'exécution
mais aussi du serveur web utilisé.
 La séparation des traitements et de la présentation : la page web peut être écrite par un
designer et les tags Java peuvent être ajoutés ensuite par le développeur. Les traitements
peuvent être réalisés par des composants réutilisables (des Java beans).
 Les JSP sont basées sur les servlets : tout ce qui est fait par une servlet pour la génération
de pages dynamiques peut être fait avec une JSP.
51
Réalisation
JavaScript :
Le JavaScript est un langage informatique utilisé dans le développement des pages web [2].
Ce langage a la particularité de s'activer sur le poste client, Autrement dit,c'est votre
ordinateur qui va recevoir le code et qui devra l'exécuter. C'est en opposition à d'autres
langages qui sont activé côté serveur. L'exécution du code est effectué par votre navigateur
internet tel que Firefox ou Internet Explorer.
CSS (Cascading Style Sheet-feille de style en cascade)

CSS est l’acronyme de Cascading Style Sheets , est un langage de feuille de style utilisé
pour décrire la mise en forme d'un document écrit avec un langage de balisage [3]. Il permet
aux concepteurs de contrôler l’apparence et la disposition de leurs pages web.
Action Script
ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe
Flash, Adobe Flex).
Ce langage permet d'ajouter de l'interactivité aux animations Flash, en répondant aux actions
de l'utilisateur et les différents objets multimédias (images, son, vidéo…).
Ce langage est orienté objet et permet le développement de la partie dynamique de
l’application [5].
L'une des particularités d'ActionScript, par rapport aux autres langages web, est d'avoir
intégrer dans sa bibliothèque une API utilisant les Socket et les fichiers XML pour transférer
l'information entre un serveur et ses clients Flash de façon automatique sans action de la part
de l'utilisateur. Ceci permet la conception d'une application multi-utilisateurs en temps réel
Xml
XML est l’acronyme de eXtensible Markup Language langage extensible de
balisage. C’est un langage informatique de balisage générique,il sert essentiellement à
stocker/transférer des données de type texte unicode structurées en champs arborescents. Ce
langage est qualifié d’extensible car il permet à l’utilisateur de définir les balises des
éléments. L’utilisateur peut multiplier les espaces de nommage des balises et emprunter les
définitions d’autres utilisateurs [4].
52
Réalisation
MXML
MXML, un langage de description développé par Macromedia, puis repris par Adobe
Systems pour la plateforme Adobe Flex. Il est dérivé du XML et permet de décrire la
présentation des interfaces utilisées dans le cadre du développement des clients riches ou RIA
(Rich Internet Application). L'interactivité est créée par l'utilisation d'ActionScript 3.0 [6].
MySQL
MySQL(My Structured Query Langage-Langage de requêtes structuré) est un système de
gestion de bases de données relationnelles dédiées Open source. Il est très rapide, fiable et
facile à utiliser et gratuit.il a été développé à l’origine pour gérer des très grandes bases de
données beaucoup plus rapidement que des solutions déjà établies. Il offre un ensemble de
fonctionnalités large et riche. Sa rapidité et sa sécurisation en font un outil idéal pour les
applications internet [7].
3.2.1.3 Outil de développement :

Les principaux outils qui ont contribué à la qualité du développement sont :
StarUML
C’est un logiciel de modélisation UML open source sous une licence modifiée de GNU GPL
.L'objectif de ce projet est de se substituer à des solutions commerciales comme IBM Rational
Rose ou Borland Together. StarUML gère la plupart des diagrammes spécifiés dans la norme
UML 2.0.
Flex Builder3:
Flex est une solution de développement créée par Macromedia en 2004 puis reprise
par Adobe en 2006, permettant de créer et de déployer des applications Internet riches (RIA)
multiplate-formes grâce à la technologie Flash et particulièrement son lecteur. Son modèle de
programmation fait appel à MXML (basé sur XML) et ActionScript 3.0.La technologie Flex
produit un fichier .swf intégré dans une page html [9].
Eclipse (europa)
C’est un projet de la Fondation Eclipse visant à développer tout un environnement de
développement libre, extensible, universel et polyvalent.
Son objectif est de produire et fournir divers outils gravitant autour de la réalisation de
logiciel, englobant les activités de codage logiciel proprement dites (avec notamment
53
Réalisation
un environnement de développement intégré) mais aussi de modélisation, de conception,

de test, de reporting, etc. Son environnement de développement notamment vise à la
généricité pour lui permettre de supporter n'importe quel langage de programmation.[10]
Serveur Red5 (version Red5 0.9.1 final (21 Février 2010))

C’est une solution Open-source. Ce serveur gratuit est écrit en Java et peut s’installer sur
n’importe quel serveur. Il est cependant nécessaire d’avoir suffisamment de compétences pour
l’installer et le paramétrer. Il permet de faire du streaming audio ou vidéo, partage d'objet
distant (remoting), de la synchronisation de données.
Apache Tomcat (version 7.0.27)

Apache Tomcat est un conteneur libre de servlets et JSP Java EE. Issu du projet Jakarta, c'est
un projet principal de l’Apache Software Foundation. Il implémente les spécifications des
servlets et des JSP du Java Community Process1, est paramétrable par des fichiers XML et de
propriétés, et inclut des outils pour la configuration et la gestion. Il comporte également
un serveur HTTP [11].
Adobe Photoshop CS5

C’est un programme d'édition graphique, il permet d'effectuer un nombre impressionnant
de retouches sur images. la mise à l’échelle intelligente par exemple, permet d’étendre ou de
rétrécir une photo dans de multiples sens sans qu’il n'y ait pour autant de déformation de
celle-ci sur le résultat final [12]. Les formes et distances seront déterminées et respectées
automatiquement par cette fonctionnalité.
Adobe Dreamweaver8
C’st un logiciel de type éditeur de site web, il utilise les derniers standards et langages de
programmation web en date (HTML, PHP, CSS, Javascript, etc.). C’est un logiciel de type
WYSIWYG (What you see is what you get), c’est-à-dire que ce que vous voyez dans la
fenêtre de création de Dreamweaver, en mode création graphique, est le résultat que vous
obtiendrez réellement à l’écran. Adobe Dreamweaver permet la conception,
54
Réalisation
le développement et la gestion de site et d’application web de manière simplifiée et rapide,

par l’intermédiaire d’une interface graphique et/ou en langage de programmation [13].
Microsoft office Word 2007

Microsoft Word est un logiciel de traitement de texte couvre deux notions, assez différentes
en pratique : Un éditeur de textes interactif et un compilateur pour un langage de mise en
forme de textes.
Microsoft office Power point 2007

Microsoft Office PowerPoint est un créateur de présentations (succession de diapositives)
Il est utilisé pour créer des présentations avec du texte, avec des images, sons, vidéos et autres
objets.
3.2.2. Modélisation physique des données

Pour aboutir à une description technique de la base de données dans le système utilisé, il
faut transformer le MLC qui est déduit du diagramme de classes, puis optimisé en fonction
des traitements qui vont utiliser le modèle.
La transformation au niveau physique doit tenir compte des caractéristiques et des contraintes
du système utilisé afin d’obtenir un modèle physique réalisable et performant.
Dans cette partie, nous décrivons la modélisation physique des données
Nom Table Liste des Champs Type et Taille
Formation id_formation int(10)
titre_formation varchar(50)
niveau varchar(50)
description text
date_creation Date
date_formation Date
duree int(1)
heur_formation Datetime
Formateur id_formateur int(10)
nom varchar(50)
Prenom varchar(50)
sex varchar(50)
Pseudo varchar(50)
55
Réalisation
mot_pass varchar(50)
date_nais Date
email varchar(50)
tel int(15)
pays varchar(50)
grade varchar(50)
specialite varchar(50)
Apprenant id_app int(10)
nom varchar(50)
prenom varchar(50)
sex varchar(20)
pseudo varchar(50)
mot_pass varchar(50)
date_nais Date
email varchar(50)
tel int(15)
pays varchar(50)
niveau_etude varchar(50)
diplôme varchar(50)
Module id_Module int(10)

libelle_Module varchar(50)
Chapitre id_Chapitre int(10)
libelle_Chapitre varchar(50)
#id_Module int(10)
Module_formation id int(10)
#id_Module int(10)
#id_formation int(10)
Reclamapp id_reclam int(10)
objet varchar(50)
msg_reclam text
rep_reclam text
#id_app int(10)
Reclamf id_reclam int(10)
56
Réalisation
objet varchar(50)
msg_reclam text
rep_reclam text
#id_formateur int(10)
Assister_formation id int(10)
prix_assister float(5)
#id_app int(10)
Enseigner_formation Id int(10)
prix_animer float(5)
#id_formateur int(10)
Tableau 10 : Modélisation physique des données
3.3 Etude d’enchainement des programmes

Cette étape consiste à montrer les principaux modules développés pour la réalisation
d’une application.
Le menu général de notre application se présente selon le type de l’utilisateur.
57
Réalisation
Interface Principale
Utilisateur Administrateur
Formateur Visiteur Apprenant
S’authentifier S’inscrire S’authentifier S’authentifier
Consulter son Consulter Consulter son

profil les profil
nouveautés
Consulter la liste
Modifier son Modifier son de formation
Envoyer
profil réclamation profil
Consulter la liste Consulter la liste

de ces formations de ces formations
Supprimer
une formation
achevée
Ajouter une S’inscrire à
formation une formation
Consulter la liste
des réclamations
Animer une Assister une
envoyées
formation formation
Uploder un support Uploder et

de formation Télécharger Répondre aux
des documents réclamations
Conversation Conversation
textuelle textuelle
Consulter la liste
des apprenants
Activer Activer
audio/vidéo audio/vidéo
Paramétrer le Paramétrer le
pilotage pilotage Supprimer un
apprenant
Consulter la liste
des formateurs
Consulter
Consulter
les
les
nouveautés
nouveautés
Envoyer Supprimer un
Envoyer réclamation formateur
réclamation
58
Réalisation
3.4 Production des programmes

3.4.1 Descriptif du produit :
Notre pojet est composé de trois parties principales :

 Partie Gestion des formations :
 Permet la gestion des utilisateurs (creation des comptes pour les formateurs et
les apprenants…)
 Permet l’organisation des formations :donne la possibilité à un formateur de
créer son propre formation ainsi qu’elle offre la possibilité aux apprenants de
s’inscrire aux differents formations proposées.
 Partie WebConférence :cette partie represente notre salon de formation qui offre les
fonctionnalités suivantes
 Uploader le support d’une formation,
 Activer audio/video,
 Conversation textuelle(Tchat),
 telecharger et uploader des documents.
 Pilotage d’un PC à distance:
Nous l’avons réalisé de deux maniéres :
1er manière:
Nous avons apporté des modifications sur des modifications sur un outil open source nommé
Jrdesktop pour manipuler un PC à distance.
Il est important de noter que cette solution ne peut pas être exploitée qu’en réseau local.
2eme manière:
Contrairement à la première solution, la deuxième solution permet un pilotage d’un PC à
distance via Internet. Nous avons adapté des outils open source comme VNC viewer et VNC
server pour aboutir à notre solution.
Cette solution marche convenablement et résout le problème rencontré dans la solution
précédente mais elle nécessite une configuration du routeur du coté apprenant pour rendre son
PC accessible.
59
Réalisation
3.4.2 Architecture
L’architecture de notre application est de type client-serveur, où un ordinateur interagit avec
d’autres sur Internet.
Comme nous l’avons mentionné précédament, notre application est composée de trois parties:
une partie pour la gestion des formations et des apprenants developpé en
jsp/servlet/javaBeans, une partie pour le salon de formation developpée
Flex(MXML,ActionScript) et une partie pour le pilotage d’un PC à distance dont nous avons
adapté des outils open souces comme VNC viewer et VNC server.
Donc nous déduisaons qu’on a besoin :
 D’un serveur d’application(ApacheTomcat): utilisé comme un serveur d’application
pour la partie gestion des formations et des utilisateurs.
 D’ un serveur de streaming(Red5): qui se charge de diffuser l'ensemble des informations
Multimedia (video, micro, slides) à l'ensemble des participants.
 D’un serveur base de données MySQL: se charge au stockage des données.
 D’un client lèger: un navigateur web(InternetEplorer,GoogleChrome..)
Dans la realisation de notre projet, nous avons opté pour une architecture MVC afin de
garantir une assurance de la maintenabilité, la modularité de l’application et la rapidité de
développement.
MVC littéralement Modèle Vue Contrôleur est une architecture qui organise l'interface
Homme-Machine d'une manière à ce que le développement puisse se faire en couches
indépendantes. Il impose la séparation entre les données, la présentation et les traitements, ce
qui donne trois parties fondamentales dans l'application finale: le modèle de données, le
contrôleur et la vue.
Couche Modèle
Permet d'enregistrer les données, de les récupérer, de les lister, de les supprimer, et de les
mettre à jour.
Couche Vue
La vue correspond à l'interface avec laquelle l'utilisateur interagit. Sa première tâche est de
présenter les résultats renvoyés par le modèle. Sa seconde tâche est de recevoir toutes les
actions de l'utilisateur (clic de souris, sélection d'une entrée, boutons, etc). Ces différents
événements sont envoyés au contrôleur, elle se contente d'afficher les résultats des traitements
effectués par le modèle et d'interagir avec l'utilisateur.
60
Réalisation
Couche Contrôleur
Le contrôleur prend en charge la gestion des événements de synchronisation pour mettre à
jour la vue ou le modèle et les synchroniser. Il reçoit tous les événements de l'utilisateur et
enclenche les actions à effectuer. Si une action nécessite un changement des données, le
contrôleur demande la modification des données au modèle, et ce dernier notifie la vue que
les données ont changée pour qu'elle se mette à jour.
La figure suivant represente l’architecture de notre application.
Figure 21: Architecture de l’application

1: Le navigateur web envoie des requêtes HTTP au serveur d’application.
2: La requête est prise en charge par la servlet faisant office de contrôleur. Le contrôleur
traite cette requête à l’aide de la couche modèle (javaBeans) qui envoie la requête au serveur
de base de données.
3: Les JavaBeans exécutent les traitements nécessaires en fonction de la requête et la servlet

redirige la requête vers la page JSP.
4: La JSP génère la réponse qui est renvoyée par le serveur d’application au client
61
Réalisation
Pour entrer au salon de formation il faut que l’utilisateur envoie une requête HTTP au serveur
d’application
5: Après validation de ces informations et création du profil, l’utilisateur sera redirigé vers
l’interface de son profil.
6: Le serveur de streaming envoie une requête au serveur de la base de données pour

récupérer la liste des utilisateurs inscris à la formation
7 : Le serveur base de données envoie la réponse au Red5.
8 et 9 Red5 charge le fichier SWF9 qui représente l’interface du salon, Le serveur et

l’utilisateur communiquent via une connexion persistante avec Real-Time Messaging Protocol
(RTMP). RTMP est un protocole TCP fiable / IP pour le streaming et les services de
données. L’utilisateur envoie des flux de données via RTMP.
10. Le serveur red5 partage ces flux aux autres utilisateurs. Ce serveur utilise un objet
NetConnection10 qui relie l’application cliente au serveur de streaming. Cette NetConnection
va ensuite permettre de transférer plusieurs objets NetStream11 qui correspondent aux
différents flux de streaming.
Pour La partie gestion développée en JSP/Servelt/javaBeans :

 Couche Modele: Les javaBeans permettent d'enregistrer les données, de les récupérer, de
les lister, de les supprimer, et de les mettre à jour.
 Couche Vue : Cette couche est en relation directe avec l’utilisateur (navigateur), elle est
représentée par les pages JSP. Elle se met en relation direct avec la couche Model sans ou
avec l'intermédiaire de la couche contrôler.
 Couche Contrôler : Les Servlets jouent le rôle de la couche du contrôle.
la Servlet communique avec la couche modèle, pour remplir les demandes via des
requêtes de l'utilisateur. Selon la requête, la Servlet « aiguille » sur quel vue (JSP) est
orienté l'utilisateur et avec quels attributs. Les attributs sont contenus dans les
9
L’ensemble des fichiers actions script et Mxml compilées donnent naissance à une fichier SWF peuvent être
intégré dans une page HTML
10 NetConnection(package flash.net) : Ouvre la connexion.
11
NetStream(package flash.net) : Il s'agit de la classe qui permet de manipuler le flux Video.
62
Réalisation
requêtes|réponses qui eux même contiennent des données pré-traitées sous forme de
JavaBeans (instances d'objet java), ou de type simple.
Pour la partie salon développé en Flex :
 Couche Vue: Représentée par MXML, langage de description des composants graphiques
de l’interface.
 Couche Contrôler : Représentée par l’action script qui est un langage de Programmation
Oriente Objet d’ Adobe assignant aux objets graphiques leurs fonctions et leurs
interconnexions.
 Couche Modèle: Des classes crées en action script qui interagit avec les contrôleurs.
3.4.3 Charte graphique

3.4.3.1 Arrière-plan et texte
Nous avons opté pour un fond blanc. En effet, les études montrent que les sites conçus avec
un fond blanc connaissent plus de succès que les autres. La plupart des moteurs de recherche
ou des boutiques virtuelles s’affichent sur fond blanc. Le fond blanc renvoie au papier. Il
conforte le lecteur et communique une impression de sérieux, de sobriété, de détachement et
d’objectivité.
Nous avons écrie le texte en noir ou en couleurs sombres, pour plus de confort pour le lecteur.
3.4.3.2 Usage des couleurs

Nous avons utilisé les couleurs pour le repérage des zones de la surface de travail (cadrage
de notre zone de travail, le menu, en-têtes de page, pieds de page)
Nous avons utilisé la théorie des deux couleurs complémentaires (le bleu foncé et orangé)
pour avoir le plus de contraste.
Nous avons joué sur la luminance pour avoir plus de contraste possible entre les textes et les
arrière-plans:
 Une zone de travail de couleur blanc texte noire.
 Un Menu d’arrière-plan bleu dégradé vers le noire, avec un texte blanc.
 Un pieds de page d’arrière-plan bleu avec un texte blanc.
3.4.3.3 Charte graphique stable et robuste
Notre charte graphique est basée sur la technique des feuils de style CSS ce qui la rend facile
à manipuler :
63
Réalisation
• il vous suffira de changer les définitions de style figurant dans les feuilles de style CSS
pour que la présentation de notre site soit mis à jour.
• Le nombre de d’une page web ligne n’est pas statique (on peux changer le contenu
textuel et visuel du site et notre charte graphique reste stable et robuste.
3.4.4 Présentation des interfaces

Après les phases d’étude de l’existant, la conception et la modélisation fonctionnelle et
organisationnelle nous avons développé les interfaces de notre application
La page about présente la page d’accueil de notre application, à partir de cette interface, si
internaute est un nouveau utilisateur il a la possibilité de créer son compte.
Les interfaces de notre application sont présentées sous forme de lien :
ABOUT : qui amène l’utilisateur à la page d’accueil de notre application
COURSES : qui amène l’utilisateur à la liste des formations proposées par les formateurs.
TEACHERS : qui amène l’utilisateur à la liste des formateurs.
ADMIN SPACE : c’est un espace spécifique à l’administrateur.
CONTACTS : qui amène l’utilisateur au page de communication avec l’administrateur du
site.
Figure 22:La page d’accueil
64
Réalisation
À partir de cette interface, s’il est déjà inscrit, un utilisateur (formateur ou apprenant) pourra
se connecter. Il suffit d’entrer son login et son mot de passe et de choisir son profil
(apprenant ou formateur) et cliquer sur le bouton « login » pour ouvrir sa session.
Bien évidement, un nouveau utilisateur doit s’inscrire.
La figure ci-dessous présente l’interface de l’inscription d’un nouveau utilisateur de type
apprenant.
Figure 23 Inscription d’un nouveau utilisateur de type apprenant

Après validation de ses informations et création de son profil, l’utilisateur sera redirigé vers
l’interface de son profil .L’image ci-dessous présente l’interface de son profil
65
Réalisation
Figure 24:Profil d’un nouveau apprenant sans formation
A partir de cette interface l’apprenant aura la possibilité de s’inscrire à des formations qui ont
déjà proposées en cliquant sur le bouton « ADD NEW TRAINING» .La figure 26 présente
l’interface des formations proposées
66
Réalisation
Figure 25:Liste des formations proposées

Après inscription ou authentification, le formateur peut créer ses propres formations à partir
de l’interface ci-dessous
Figure 26:Création d’une formation et alert du système

67
Réalisation
Une fois le formateur a choisit une date où la salle est occupée un message d’erreurs sera
affiché par le système.
Le formateur doit donc changer la date choisie afin de finaliser la création de sa formation
(voir figure 28).
Figure 27: Création d’une formation

Les formations d’un utilisateur tout s’ajout à son profil suite à l’opération s’inscription (voir
figure 29).
68
Réalisation
Figure 28:Profil d’un nouveau apprenant après l’inscription à des formations

En cliqant sue le bouton « Enter » le système vérifie si la formation est en cours si non le
systéme affiche un message d’erreur au utlisteur(voir figure 30)
Figure 29:Alert système"Formation indisponible"
69
Réalisation
Si c’est le cas l’apprenant automatiquement au salon de foramtion.

La figure 31 (respectivement 32) représente l’interface du salon de formation après
authentification du formateur (respectivement apprenants).
Pour animer la formation il faut que le formateur active son camera et son microphone et
upload le support de formation pour qu’il sera partagé aux apprenants.
Pour assister à la formation, l’apprenant peut activer son camera et son microphone et peut
discuter avec le formateur et ses collègues par conversation vocale ou textuelle.Deplus, il a la
possibilité d’uploader, de télécharger des documents, et de paramétrer le camera et le
microphone.
Figure 30:Interface salon coté Formateur
70
Réalisation
Figure 31: Interface salon coté apprenant

Après configuration de son routeur, un apprenant peut demander le pilotage de son PC, puis
exécuter l’interface de pilotage (voir figure 33), ensuite après la saisie d’un mot de passe, il
clique sur le bouton « Enable » pour rendre son PC accessible. Enfin, il envoi le mot de passe
au formateur par tchat.
Figure 32: Interface Pilotage coté apprenant

Après l’acceptation de pilotage le formateur télécharge un fichier VNCViewer.jar et l’exécute
(voir figure3), puis il saisit l’adresse IP de l’apprenant et le mot de passe.
71
Réalisation
Connexion avec sucée, une interface représente l’écran de PC apprenant.
Figure 33: Interface pilotage coté formateur
3.5 Apports :
Ce projet de fin d’études nous a permis de se familiariser avec un certain nombre de
concepts tout en se basant sur nos connaissances acquises au cours de notre formation au sein
de notre institut.
Ainsi, le fait d’avoir travaillé avec nos encadreurs, les personnels de la société nous a mis sur
la voie professionnelle.
Notre projet de fin d’étude a été une occasion, pour développer et exercer nos capacités
d’observation, d’analyse, de conception, de développement et de rédaction.
3.5.1 Apports au niveau des connaissances techniques :

Ce projet de fin d’étude nous a permis de :
 Mettre en œuvre les notions et les connaissances acquises au sein des modules
« Méthodologie de conception des bases de données ».
 Manipuler les logiciels MySql Server, FlexBuilder et Eclipse au cours du
développement de l’application.
 Améliorer nos connaissances théoriques concernant la communication client/serveur.
 Manipuler le serveur d’application RED5.
 Etudier les architectures multicouches et réaliser l’importance du travail sur ce type
d’application dans le monde de programmation.
 Apprendre à gérer un projet.
3.5.2 Apports au niveau de la conception et du développement

Au niveau de la conception et du développement, cette étude nous a permis de :
 Mener une conception orientée objet représentée avec le langage UML
72
Réalisation
 Apprendre à maitriser la méthodologie de conception et de développement des

applications clientes.
 Maitriser les étapes de développement et de conception d’une application Web.
3.6 Evaluation
3.6.1 Bilan quantitatif
Le bilan quantitatif de notre projet est la récapitulation des volumes effectués pendant la
réalisation :
 Nombre de tables dans la base de données : 14 tables
 Nombre des classes : 9 classes.
 Nombre de relation : 5 relations.
 Nombre des interfaces:14 interfaces.
3.6.2 Bilan qualitatif

Le bilan qualitatif de l’application se présente comme suit :
 La démarche de la méthode de conception a été correctement suivie, ce qui nous a
permis d’avoir une conception fidèle à notre domaine d’étude.
 L’utilisation de Flex est très intéressante. lle nous a permis de produire une
interface cliente conviviale et souple.
 L’utilisation du système d’information par la mise en place d’une base de données
MySQL 5.0.
 Un apport au niveau du développement en faisant recours à l’architecture MVC.
 L’utilisation d’un nouvel outil de développement FlexBuilder.
 L’utilisation d’un serveur de streaming RED5.
3.7 Conclusion:
Dans ce chapitre, nous avons pu présenter l’environnement et le processus de
développement. Nous avons exposé ainsi le résultat de développement à l’aide des aperçus
écran. Nous avons clôturé par une évaluation du travail réalisé.
73
Conclusion et Perspectives
Notre projet intitulé « Conception et réalisation d’une pateforme d’E-learning »
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és et nécessitent un effort de configuration considérable, nous avons réalisé un système
qui permet à la fois de gérer des formations, simuler un salon de formation virtuel, et donner
la possibilité aux formateurs de guider leurs apprenants à l’aide du pilotage de leurs PC à
distance.
En ce qui concerne la démarche, nous avons en premier lieu effectué une phase d’étude des
différents outils existants. En deuxième lieu nous avons spécifié notre application pour
discerner les fonctionnalités .En troisième lieu, nous avons procédé à sa conception ainsi
qu’aux choix technologiques pour sa réalisation. Enfin, nous l’avons mise en œuvre.
Toutes les fonctionnalités décrites dans le cahier des spécifications fonctionnelles ont été
développées et validées. Néanmoins, notre projet pourra être amélioré par l’ajout d’autre
fonctionnalités comme :
 Le partage du bureau du formateur

 Le partage de tout type de support de cours de formation (ppt,pdf,word,excel…)avec
animation.
 L’améliorer de la partie pilotage pour simplifier au maximum la tache de
configuration surtout du coté apprenant.
 L’adaptation de l’application pour une utilisation de machines virtuelle d’une manière
qui permet à un apprenant cloud e-learning et un formateur de travailler sur des
machines virtuelles, c'est-à-dire avant que la formation débute l’administrateur doit
créer au part avant des machines virtuelles équipées par des outils appartenant à la
formation. Par exemple, dans le cas d’une formation sur l’outil microsoft office word
les machines virtuelles doivent être équipé par cet outil.
76
Il est important à noter que la réalisation de ce projet noua a été bénéfique sur tous les plans.
Sur le plan technique, ce projet nous a été une bonne occasion pour découvrir et maitriser la
technologie Flex, d’approfondir nos connaissance sur le plan des nouvelles technologies de
communications et hébergement des applications en ligne.
Sur le plan humain, ce projet a été une véritable occasion de vivre de prés l’expérience du
travail au sein d’une société, qui exige la ponctualité et l’intégration dans un groupe de travail.
Ce qui nous a permis d’améliorer nos capacités de communication et de nous adapter à la vie
professionnelle. Nous avons fait de notre mieux pour bien laisser une bonne impression sur
notre discipline, nos qualités et nos compétences techniques vis à vis du staff technique de la
société Génie consulting et présenter un travail à la hauteur de la formation qui nous avons
eu au sein de l'ISIMS.
77
Glossaire
Glossaire
CSS :Cascading Style Sheet-feille de style en cascade
FOAD : formation ouverte et/ou à distance
HTTP: Hypertext Transfer Protoco
MVC :Modele-Vue-Controleur
UML:Unified Modeling Language
RTMP: Real-Time Messaging Protocol
RIA : Rich Internet Application
XML : eXtensible Markup Language
78
Bibliographie & webliographie
BIBLIOGRAPHIE & Webliographie

 [Bouillon, Bourdin, 2005]: Bouillon J-L., Bourdin S. La réduction de la « fracture
numérique » aux prises avec le pilotage d’un projet : les TICE entre rationalisation
économique et rationalisation pédagogique. Communication au colloque organisé par
l’Institut supérieur de la documentation (ISD) L’information numérique et les enjeux
de la société de l’information, Université La Manouba, Tunis, 14-16 avril 2005
 [VIEIRA ET AL 07] : Lise Vieira , Soufiane Rouissi , Nathalie Pinède-
Wojciechowski « TICE Méditerranée 2007 »
 [Aur 09]: «Programmation FLEX 3 Applications Internet riches avec Flash
ActionScript 3, MXML et Flex Builder »
[1] http://www.jmdoudoux.fr/java/dej/chap-jsp.htm
[2] http://glossaire.infowebmaster.fr/javascript/
[3] http://membres.multimania.fr/ahmedfarag/documents/ArticlesFrancais/XML.pdf
[4] www.commentcamarche.net/contents/xml/xmlintro.php3
[5] http://livedocs.adobe.com/flash/9.0_fr/main/flash_as3_programming.pdf
[6] http://fr.inforapid.org/index.php?search=UIML
[7] http://pages-web.com/docs/phpmyadmin/Documentation.fr.html
[8] http://www.kernix.com/developpement/26-developpement-java
[9] http://fr.wikipedia.org/wiki/Rich_Internet_Application
[10] http://fr.wikipedia.org/wiki/Eclipse_(logiciel)
[11] http://tomcat.apache.org/
79
Titre : « Conception et réalisation d’une plateforme d’E-learning »
Résumé :
Ce projet consiste à réaliser une plateforme d’apprentissage en ligne. L’objectif de notre

projet de fin d’études est de développer une interface web d’un salon de téléformation.
Ce travail a été développé au sein de la société Genie-Consulting et il est principalement
destiné aux formateurs désirants animer une formation à distance et aux apprenants
cherchants à assister une téléformation.
Mots clés : Apprentissage en ligne, pilotage à distance, architecture MVC, MXML, Flex,
RED5, Streaming
Title: « Design and implementation of a platform of E-learning »
Abstract :
This project consists in installing a platform of E-learning .The objective of our final project
is to develop a web interface to training fair
This work was developed within Genie-Consulting company and it is principally intended to
trainers desiring animate a distance learning and to learners to attend a cherchants teletraining.
Keywords : E-learning, remote control , architecture MVC, MXML, Flex, RED5, Streaming
« ‫» ﺗﺼﻤﯿﻢ وإﻧﺠﺎز ﻣﻨﻈﻮﻣﺔ ﻟﻔﺎﺋﺪة اﻟﺘﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‬:‫اﻟﻌﻨﻮان‬
:‫اﻟﺨﻼﺻﺔ‬
‫ اﻟﮭﺪف ﻣﻦ ھﺬا اﻟﻤﺸﺮوع ﻟﺨﺘﻢ اﻟﺪروس ھﻮ ﺗﺼﻤﯿﻢ وﺑﺮﻣﺠﺔ‬.‫ھﺬا اﻟﻤﺸﺮوع ﻣﻮﺟﮫ ﻹﻧﺠﺎز ﻣﻨﻈﻮﻣﺔ ﻟﻔﺎﺋﺪة اﻟﺘﻌﻠﻢ ﻋﺒﺮ اﻻﻧﺘﺮﻧﺖ‬
.‫ﻣﻮﻗﻊ ﻟﻐﺮﻓﺔ ﺗﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‬
‫ھﺬا اﻟﻤﺸﺮوع ﺗﻢ إﻧﺠﺎزه ﻟﻔﺎﺋﺪة ﺷﺮﻛﺔ ﺟﻨﻲ ﻛﻮﻧﺴﻠﺘﯿﻨﻎ وھﻮ ﻣﻮﺟﮫ ﺑﺎﻷﺳﺎس إﻟﻰ اﻟﻤﺪرﺳﯿﻦ اﻟﺬﯾﻦ ﯾﺮﻏﺒﻮن ﻓﻲ ﺗﻨﺸﯿﻂ دروس‬
.‫ﻋﻦ ﺑﻌﺪ وإﻟﻰ اﻟﻤﺘﻌﻠﻤﯿﻦ اﻟﺬﯾﻦ ﯾﺒﺤﺜﻮن ﻋﻦ ﻣﺜﻞ ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺪروس‬
‫ ﺳﺘﺮﯾﻤﯿﻨﻎ‬،5‫راد‬، ‫ ﻓﻠﻜﺲ‬،‫ﻣﺈﻛﺴﻤﻞ‬،"‫أﺳﻠﻮب "م ف س‬،‫اﻟﺘﺤﻜﻢ ﻋﻦ ﺑﻌﺪ‬،‫اﻟﺘﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‬:‫ﻛﻠﻤﺎت اﻟﻤﻔﺎﺗﯿﺢ‬

Langue

Pfe Isims 2012 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Pfe Isims 2012 PDF

Transféré par

Droits d'auteur :

Formats disponibles

REPUBLIQUE TUNISIENNE

Projet de Fin d’Etudes

Conception et réalisation d’une plateforme

Réalisé par : Halima CHABCHOUB

Année Universitaire 2011/2012

A MES CHERS PARENTS

A MON CHER MARI

A MES FRERES, SŒURS, LEURS EPOUX ET LEURS ENFANTS

Vous étiez toujours présents pour m’aider et m’encourager.

A tous mes amies qui n’ont cessé de m’encourager et de me soutenir

« ‫» اﻟﺤﻤﺪ ﷲ اﻟﺬي ھﺪاﻧﺎ ﻟﮭﺬا و ﻣﺎﻛﻨﺎ ﻟﻨﮭﺘﺪي ﻟﻮﻻ أن ھﺪاﻧﺎ اﷲ‬

Nous exprimons nos profondes gratitudes et respectueuse reconnaissance à

Ce projet est un apport très bénéfique quant au perfectionnement des connaissances de

1.2 Présentation du groupe ELITECH & de la société

La société Genie-Consulting présente la filiale Tunisienne du groupe ELITECH. Elle est

 Secteur professionnel :des grandes entreprises l’utilisent avec le management des

 Secteur universitaire :afin de minimiser les charges d’enseignement,des universités

Pour organiser un projet de e-learning, il existe de type d’approches :asynchrone et

1.3.2 Objectifs à atteindre et publiques cible

 Garantir plus de souplesse pour la planification des formations à l’aide d’une

1.3.3 Planning prévisionnel

Semaine Février Mars Avril Mai Juin

Tableau 1: Planning prévisionnel

1.4 Etude de l’existant

1.4.1 Analyse de l’existant

La formation continue se fait actuellement de façon traditionnelle : cours, apprenants et

Figure 1: L'outil skype

 Terracota, Solution de clustering pour les applications Java

Figure 2: Interface de l'application DimDim

 Envoie d’invitation avec un lien direct vers la conférence

Figure 3: Interface de l'application OpenMetting

Figure 4: Interface d'adobe Connect

 Possibilité de zoomer la présentation,

Figure 5: Interface de bigbluebutton

Figure 6: Interface Teamviwer

Figure 7: Interface de configuration de UltraVNC

1.4.2 Critique de l’existant

Outils Avantage Inconvénients

• Possibilité d’enregistrer la • Modules pas assez nombreux et

Tableau 2: Comparaison des solutions existantes

Comme le montre le tableau ci-dessous, les solutions existantes de web conférence et

 Lenteur au niveau du temps de réponse du système et surtout lors du partage d’un

1.5 Proposition de différentes solutions

Partie 1 : Modélisation Conceptuelle

1. Choix de la méthodologie de conception :

1.1 Présentation d’UML:

2. Diagramme des cas d’utilisation

2.1 Identification des acteurs

2.2 Identification des cas d'utilisation

 S’inscrire au site de formation ;

 S’inscrire au site de formation ;

 Consulter la liste des formations Apprenant ;

Figure 8: Diagramme de cas d'utilisation pour l'administrateur

 Diagramme qui concerne les activités de l’Apprenant

Figure 9: Diagramme de cas d'utilisation pour l’apprenant

 Diagramme qui concerne les activités de Formateur

Figure 10: Diagramme de cas d'utilisation pour le formateur

2.3 Description textuelle des principaux cas d'utilisation

CU1: Inscription au site

CU3 : Inscription à la formation

CU4: Créer formation

CU5: Animer une Formation