République Algérienne Démocratique et Populaire

Année : 2007/2010
 Dédicace

Je dédie Ce mémoire
A mes chers parents ma mère
Pour leur patience, leur amour, leur
soutien et leurs
encouragement.
A mes frères.
A mes amies et mes camarades.
Sans oublier tous les professeurs que ce soit
du Primaires, du moyen, du secondaire ou
de L’enseignement supérieur.

Yasmin
 Remerciements

Avant tout nous remercions dieu le tout

puissant qui nous a donné la force, la
patience et le courage pour qu’on puisse
accomplir ce modeste travail.

Nous remercions profondément notre

encadreur monsieur
SADEM Hamza pour ses suivis et ses
précieuses orientations dans notre travail et
Nous voudraient vous remercier pour tous
vos conseils et vos remarques intéressantes.

Nous exprimons nos reconnaissances à tous

personnes qui a contribué de près ou de loin
à l’achèvement de ce travail; nos
enseignants, nos amis, nos collègues de
promotion 20…...

Nous remercions également les membres de

jury d’avoir accepté juger ce modeste travail.
Table des matières
Résume

Table des matières

Table des figures

Introduction générale ............................................................................................................... 1

Chapitre 1 : Technologie Web

1. Introduction ………………………………………………………………………. 3
2. Internet …………………………………………………………………………… 3
3. Technologie web …………………………………………………………………. 3
3.1. Les termes rattachés au web ………………………………………………… 4
3.2. Les sites web ……………………………………………………………….... 5 3.2.1.
Site web statique ……………………………………………………... 5
3.2.2. Site web dynamique…………………………………………………... 5
4. Cycle de vie de site web ………………………………………………………….. 6
5. Classification des sites web ……………………………………………………..... 7
6. Conclusion ……………………………………………………………………….. 9

Chapitre 4 : Environnement de développement

1. Introduction ………………………………………………………………………… 57
2. Environnement de développement …………………………………………………. 57
2.1.Le système d’exploitation ……………………………………………………... 57
2.1.1. PHP ……………………………………………………………………… 57
2.1.2. SQL ……………………………………………………………………... 58
2.1.3. HTML ………………………………………………………………….... 58
2.1.4. JavaScript ……………………………………………………………….. 58
2.1.5. CSS …………………………………………………………………….....58

2.2. Outils de développement ……………………………………………..…… 58

 2.2.1. XAMPP .. ………………………………………………………………... 59

2.2.2. Serveur Apache …………………………………………………………… 59

2.2.3. SQL ……………………………………………………………………… 59

2.2.4. Un éditeur HTML ………………………………………………………... 59

3. présentation de l’application ………………………………………………………… 60

3.1. Les principes maquettes IHM ………………………………………………….. 60

3.2. Exemple de code source ………………………………………………………. 65

4. conclusion …………………………………………………………………………… 69

Conclusion générale ........................................................................................................... 70

 Introduction générale

De nos jours, l'internet constitue un phénomène dans la facilitation des interactions entre les
personnes et l’accès à l’information. Le web est utilisé par tous, sociétés, particuliers,

gouvernements. Il permet de partager ses idées et ses domaines d'intérêt avec d'autres

utilisateurs partout dans le monde. Parmi les domaines d’application du web l'e-learning ou

Apprentissage en ligne, a fait exploser le nombre d’utilisateurs de des sites web éducatifs,

L’e-learning bouleverse le monde de l’éducation comme de nombreux autres domaines. De nouveaux

modes d’enseignement et d’apprentissage sont recréés. On peut se former à presque tout type de
savoirs et de savoir-faire. Et les contenus pédagogiques distants de milliers de kilomètres sont

désormais à la portée d’un apprenant « perdu » au fond d’un village quasi-inaccessible.

Ces dernières années, l'e-learning a pris une place importante dans la vie humaine. Les
systèmes e-learning se développent beaucoup et rapidement. Parmi les avantages de l'apprentissage
par le biais d'un réseau citons l'indépendance du temps et de l'espace. Les apprenants peuvent
apprendre à leur propre rythme et du matériel pédagogique peut être créé et utilisé partout dans le
monde.

Mais, cela présente un inconvénient majeur. Les contenus et les parcours sont statiques, figés
et standards quel que soit l’apprenant. Or, pédagogiquement, il est clair que les apprenants n’ont pas
les mêmes besoins et n’apprennent pas de la même manière.

Tout comme l’enseignant quand il en a les moyens, les systèmes d’apprentissages doivent
adapter leurs procédures à l’apprenant. On parle d’adaptation et de personnalisation. Cela passe par
exemple par la création de profils utilisateur basés sur le comportement d'apprentissage de chaque
apprenant.

La personnalisation augmente l’efficacité de l'apprentissage, ce qui justifie le coût initial est

plus élevé de la construction. Les options de personnalisation sont nombreuses. Par exemple,
personnalisez le processus d'apprentissage et adapter le contenu à chaque apprenant, utiliser des
stratégies d'apprentissage en ligne qui répondent aux besoins des apprenants, utiliser des techniques
différentes pour changer l'environnement et effectuer l'ajustement de matériel pédagogique en
fonction des besoins de l'apprenant. L'adaptation peut affecter le processus d'apprentissage, la
rétroaction ou la navigation.

1
  Le première 01 présente les services d’internet et les technologies web, pour
placer notre projet dans son contexte général.

 Le chapitre 02 présente l’environnement de développement et les outils qui

nous ont permis de réaliser l’implémentation.

2
CHAPITRE 1
Chapitre 1 Technologie Web
1. Introduction
Le web est devenu une partie importante de notre vie, parce qu’il constitue la source
d’information la plus globale. Et l'évolution de l'informatique est l'apparition de l'internet, ce
phénomène d'interaction qui offre des possibilités considérables et accroit les chances de
communication à travers un lieu virtuel qui regroupe des pages Internet présentées par des
personnes ou des organisations. Une des applications qui a popularisé Internet c'est le Web
qui nous allons exposer dans ce chapitre.

2. Internet

Est un ensemble d’ordinateurs connectés entre eux à travers le monde pour partager
des informations concernant les domaines universitaires, commerciaux et même
gouvernementaux…,. [1]

Figure 1.1 : les utilisations commerciales d’Internet

3. Technologie Web
On appelle « Web » (ce qui signifie en anglais «toile»), abréviation de «World
Wide Web» un système d'information hypermédia, constitué de documents multimédia
(pages de textes enrichies de sons, graphiques, images fixes et animées, vidéos...)
qui sont reliés entre eux par des liens Hypertextes.

3.1. Les termes rattachés au Web

Le web contient plusieurs termes :

 Une ressource du World Wide Web: Est toute unité d’information

4
Chapitre 1 Technologie Web
(Texte, image, vidéo, Email, etc.) : une ressource en accès public depuis Internet.
 Une page web : document écrit en langage HTML et pouvant contenir des liens vers
d’autres ressources (images, musique, etc.) et vers d’autres pages
(hyperlien). [7]-

 Documents multimédia : image, vidéo. [7]

 Services web : programme qui s’exécute en réponse à une requête HTTP.

 Http : « HyperText Transfer Protocol » est le protocole de communication client-

serveur utilisé pour transférer les ressources du web, et la variante sécurisée de ce protocole est
Https
 HTML : « HyperText Mark up Langage » permet de créer des pages web. C’est le
langage informatique interprété dans les navigateurs web. Il représente ensemble des règles et des
commandes d‘affichage afin de définir un document pouvant être intégré à un site Web.

 Navigateur web : (Browser) Un Logiciel pour visionner et interagir avec les

informations sur le World Wide Web, capable d’interpréter des codes HTML,
CSS...etc. Exemple de navigateurs web : Mozilla Firefox, Google Chrome, opéra, [3]

 URL : Adresse d‘une ressource sur le réseau Internet. Elle est formée du protocole à
utiliser, du nom de domaine concernant le serveur où se trouve la resource, du chemin d‘accès et
du nom local de la ressource. [4]

 Un hyperlien : Un élément ou un texte dans un document permettant la navigation,

et mettant en liaison des pages avec d’autres pages et ressources.
[3]
 Un hébergeur web : Est une entreprise de services informatiques hébergeant

sur ses serveurs web les ressources constituant les sites web de ses clients.

 Une agence web: Est une entreprise de services informatiques réalisant des sites
web pour ses clients.

4
Chapitre 1 Technologie Web
3.2. Les sites web

Ensemble structuré de pages Web reliées d’une manière cohérente, résidant sur
un même serveur, appartenant à une entreprise ou à un particulier, et dont l‘adresse
Internet est celle de sa page d‘accueil.
3.2.1. Site web statique :

Un site web statique est un site internet composé de pages web statiques dont
le contenu est fixe.
- Lorsque, le client demande au serveur à voir une page web, le serveur
lui répond en lui envoyant la page réclamée. [5]

Figure 1.2 : Fonctionnement d’un site web entièrement statique

3.2.2. Site web dynamique :

Un site web dynamique est un site web relié à une base de

données, dont les pages se construisent à la demande de l'internaute. Celui-ci
envoie des requêtes que le serveur WEB traite afin de retransmettre les résultats
au navigateur de l’internaute.

Figure 1.3 : Fonctionnement d’un site web entièrement dynamique

Lorsque le site web est dynamique, le fonctionnement est comme décrit dessous :

- L’internaute demande la page web

- Le serveur prépare la page spécialement pour le client;

4
Chapitre 1 Technologie Web
- le serveur lui envoie la page qu'il vient de générer. [5]

Figure 1.4 : Fonctionnement d’un site web entièrement dynamique client- serveur

4. Cycle de vie de site web

Le cycle de vie de site web est constitué trois phases principales.

 Préparation de la visibilité : qui comporte un grand nombre de

phases : - La conception, représentant la formalisation de l’idée.
- La réalisation, correspondant au développement du site Web.

- L’hébergement, se rapportant à la mise en ligne du site.

- Le référencement par les moteurs de recherche.

 L’exploitation :

Correspond à l’administration quotidienne du site, à son évolution et à sa

mise à jour. L’exploitation du site englobe notamment les activités
suivantes:

- Assurer un suivi et une comparaison des technologies, du

positionnement du site par rapport aux concurrents.
- Promotion et référencement, serant à développer son audience.

4
Chapitre 1 Technologie Web
 La maintenance et la mise à jour : Assurer le bon fonctionnement
du site web et l’enrichir avec de nouvelles fonctionnalités et d’un nouveau

contenu afin de l’animer.

Figure 1.5 : le cycle de vie d’un site web

5. Classification des sites web:

On peut classer les sites web selon leur but à :

Site vitrine : Présente une entreprise, une société ou une marque. Ce type de site a
généralement une mise en forme originale.
• Site catalogue : Présente la société ou la marque ainsi que son activité et tous ses
produits détaillés.

• Site informatif : Offre des données sur un thème commun.

• Site marchand ou E-commerce : Les boutiques en ligne avec gestion de contenu

dynamique et l'intégration de paiement sécurisé.

• Site institutionnel : Présente une organisation ainsi que ses activités et

ses valeurs. La société fournit toutes les informations pratiques à ses clients ou bénéficiaires.
Il permet également de publier des articles sur les activités économiques et sociales tels que les
sociétés et les associations.
• L’intranet : Il est accessible que par les employés de la même entreprise ou d’une
direction, l’intranet met à disposition la possibilité d’échanger des informations professionnelles.
• Mini-site - Jeux concours – événementiel : Un mini-site est rattaché

à un site institutionnel ou à une marque et permet de créer une dynamique et faire la

promotion d’un événement particulier.

4
Chapitre 1 Technologie Web
• Application Web : un programme s’exécutant dans un navigateur web, consultable
en ligne, pour accéder à l’application il faut cependant avoir une connexion à Internet et un
navigateur web. Une application web peut être un jeu, un logiciel de traitement de données, un
moteur de recherche, un système de gestion des contenus, une boutique en ligne … etc. [6]

6. Domaines d’applications

De nos jours, les sites web sont devenus des moyens de communication et de partage
d’informations en pleine évolution offrant plusieurs types de services. Les principaux domaines
d’application de cette technologie sont les suivants :

• Enseignement à distance (e-learning)

• L’éducation et la recherche scientifique

• Médias et communication

• Divertissement

• Marketing et publicité

• Domaine militaire

• Actualités

• Médecine

7. Conclusion
Dans ce chapitre nous avons présenté un aperçu général sur l'internet et les services et les
technologies Web, afin d’avoir une vision sur les outils et les protocoles pouvant servir au
développement de notre projet à partir des objectifs tracés pour la réalisation de ce mémoire, et
dans le chapitre suivant, nous fournirons une étude sur le langage de modélisation et qui sont
importants pour notre projet.

4
Chapitre 2 Environnement de développement

CHAPITRE 2

1. Introduction
2. Environnementde développement

2.1. Le système d’exploitation

2.1.1. PHP
2.1.2. SQL
2.1.3. HTML
2.1.4. JavaScript
2.1.5. CSS
2.2. Outils de développement
2.2.1. XAMPP
2.2.2. Serveur Apache
2.2.3. MySQL
2.2.4. Un éditeur HTML
Présentation de l’application
3.1. Les principe maquettes IHM
3.2. Exemple de code source

3.3. Conclusion

10
 1. Introduction

Dans ce chapitre nous allons développer un site web d’un superviseur d’apprentissage en
ligne, pour cela nous allons décrire les logiciels et les langages de programmation utilisés, qui
nous ont permis la réalisation de ce travail et qu’on a utilisé et on évoquera le système
d'exploitions, ainsi nous présenterons quelques exemples des interfaces
représentant la plateforme qui ont été réalisées.

2. Environnement de développement

Dans cette partie nous allons présenter chacun des logiciels de programmation, langage
de programmation, logiciel de traitement d’image qu’on a utilisé le système d'exploitions.

2.1. Le système d’exploitation

L’environnement de base pour ce travail est le système d’exploitation Windows 8.1,

pour obtenir des performances de façon plus
facile, et il est lié à la machine.

Donc Windows 8.1, fournit un travail

plus efficace, qui offre la fiabilité et l’efficacité.
Dans cette partie on va donner quelque définition sur les langages de

programmations qu’on va utiliser pour la réalisation de notre travail qui sont les suivant :

2.1.1. PHP

Plus connu sous le nom de PHP, c'est un langage de programmation WEB

principalement utilisé pour produire des pages

Web dynamiques(client/serveur) via un serveur
HTTP (ex: Apatche), on désigne parfois PHP comme une
plateforme plus qu'un simple langage.

Les codes du PHP sont appelés «

scripts », et ils sont inclus dans le code HTML.
Exemple (script):
2.1.2. SQL
Chapitre 2 Environnement de développement
SQL ("Langage de requêtes structuré" ou "StructuredQuery Language") est un
langage informatique destiné à interroger ou piloter une base de données.

2.1.3. HTML

C’est un langage de balise permettant le codage

des pages WEB. HTML permet également de

structurer sémantiquement et de mettre en forme l’interface des
sites, d’inclure des ressources multimédias telles que les

images,

les formulaires de saisie, et les programmes informatiques. Il permet de créer

des documents
interopérables avec des équipements très variés de manière conforme aux
exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages
de programmation et des formats de présentation (feuilles de style en cascade).
HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

2.1.4. JavaScript

Le javascript est un langage informatique

utilisé sur les pages web. Ce langage à la particularité
de s’activer sur le poste client, en d’autres mots c’est
votre ordinateur qui va recevoir le code et qui devra

l’exécuter. C’est en opposition a d’autre langage qui

sont activé côté serveur. L’exécution du code est effectuée par
votre navigateur internet tel que firefox ou Internet Explorer.
[5]

2.1.5. CSS

CSS est l'acronyme de Cascading Style Sheet, est un

langage de conception simple destiné à simplifier le
processus de présentation des pages Web, donc utilisé sur
l’internet pour mettre en forme les fichiers HTML ou
XML, donc ce code pour gérer le désigne d’une page web.
2.2. Outils de développement

30
 2.2.1. XAMPP

XAMPP signifie Cross-Platform (X), Apache (A), MySQL (M), PHP (P) et Perl

(P).C’est un ensemble de
logiciels permettant de mettre en place
facilement un serveur Web et un serveur
FTP. Il
s’agit d’une distribution de logiciels libres (X Apache MySQL Perl PHP) facile
à installer offrant une bonne souplesse d’utilisation permettent l'exploitation d'un
serveur Apache, de l'SGBD MySQL et l'interpréteur PHP. XAMPP est également
multiplate-forme, ce qui signifie qu'il fonctionne aussi bien sur Linux, Mac et
Windows.
2.2.2. Serveur Apache

Est un serveur HTTP créé et maintenu au sein

de la fondation Apache.
utilisé
principalement sur les hébergements Internet en

Linux, bien qu'il soit également utilisable en Windows.

2.2.3. MySQL

Est un système de gestion de base de données (SGBD). Comme serveur

de bases de données relationnelles Open
Source, Basé sur Structured Query Language
(SQL). Aussi MySQL est le plus souvent
associé à des applications basées sur le Web

2.2.4. Un éditeur HTML

Est un logiciel d’aide à la création et à la conception de pages HTML. Dans

notre cas on a utilisé un éditeur riche en
fonctionnalités De nombreux professionnels utilisent cet
éditeur pour tous les langages de programmation. c’est
l’éditeur «Sublime Text ».

Présentation de la page d’accueil :

Chapitre 2 Environnement de développement
Au démarrage de l’application, le système affiche une interface qui représente la
page d’accueil de notre application. A travers cette interface les acteurs peuvent utiliser le
système chacun selon ses droits. Nous donnons une description pour chaque fenêtre ce qui
concerne les différentes interfaces que constituent notre site Web.

3.1. Les principes maquettes IHM

Dans cette partie nous allons créer une maquette de notre site, et offre d’accès à
différentes interfaces.

Home: Cette page est la page d’accueil. Elle est constituée des principaux

contenus de votre site.

Figure 4.1 : Page d’accueil

30
 Conclusion et perspective

Dans ce mémoire, nous avons abordé le thème « Conception et réalisation d’un système

d’apprentissage en ligne avec personnalisation dynamique du parcours d’apprentissage ».

Nous avons passé en revue quelques technologies web les principes du e-learning. Nous avons
utilisé le langage UML pour modéliser notre système se basant sur une expression des besoins en lien avec
les objectifs du système.Nous nous sommes appuyés sur une modélisation existante des trois types
de connaissances suivants :

• Les connaissances pédagogiques relatives au domaine.

• Les connaissances pédagogiques relatives à l’apprenant.

• Les connaissances tutorielles.

Le système laisse une place importante au choix de l’apprenant et lui propose plusieurs leviers pour
adapter le comportement du système à ses besoins. Il a le choix entre différents modes d’exploitation,
différents modes de formation. Et le système conjugue différentes phases d’apprentissage en fonction des
modes choisis par l’apprenant. En particulier, la phase de remédiation essaye d’améliorer les résultats de
l’apprenant s’il échoue à des évaluations.

Grâce à la notion de niveau de référence, l’apprenant peut facilement se positionn er et le système

identifier ses besoins et faire des hypothèses sur ses acquis, le tout en terme d’objectifs pédagogiques. Le
système peut gérer différents types d’unités pédagogiques en adéquation avec les besoins du parcours.

Vu la contrainte de temps ce travail n’est qu’un début et il reste ouvert à plusieurs extensions. Nous

envisageons à moyen terme, de compléter l’implémentation des éléments suivants:

 Les modes d’exploitation

 Les modes d’apprentissage diagnostic, et d’évaluation normative.

Au terme de ce présent mémoire, nous considérons notre travail comme un petit pas en avant.
Chapitre 2 Environnement de développement
70

30
Références Bibliographique
[1] James Kievit et Steven Metz , "THE STRATEGIST AND THE WEB:GUIDE TO
INTERNET RESOURCES", February 20, 1996
[2] https://www.computerhope.com/jargon/i/internet.htm
[8] Pascal Roques UML 2 Modéliser une application web,les
cahiers du programmeur,ÉDITIONS EYROLLES 61,bd Saint-Germain 75240
Paris Cedex 05,4e édition, juin 2008,264 p
[9] http://web.maths.unsw.edu.au/~lafaye/CCM/uml/umlcarac.htm
[10] http://laurent-audibert.developpez.com/Cours-UML/?page=diagramme-classes#L3
[11] Joseph Garby & David Garby, UML 2 ANALYSE ET CONCEPTION,Dunod
Paris,2008,ISBN 978-2-10-053567-5
[12] P. Roques et Vallée ,UML en action, 2éme édition2003.
[13] https://openclassrooms.com/courses/debutez-l-analyse-logicielle-avec-uml/les-
differentstypes-de-diagrammes
[14] http://www-inf.int-evry.fr/cours/CSC4002/EnLigne/Cours/CoursUML/3.4.2.html
[15]Benot Charroux, Aomar Osmani, Yann Thierry-mieg, UML2 PRATIQUE DE LA
MODELISATION , ISBN: 978-2-7440-7287-1?

[16] Aide-mémoire d"'"UML,UML EN TABLEAUX POUR L’USAGE QUOTIDIEN,

disponible sur: http://equey.free.fr/writings/uml.doc
[17]http://www.commentcamarche.net/contents/pdf/1139-caracteristiques-duml?
slug=caracteristiques-d-uml.

[18]https://fr.wikipedia.org/wiki/Formation_en_ligne.

[19] ABD-ed-Dd TENACHI,Modélisation des connaissances pédagogiques - Systeme d'aide à

l'élaboration de cursus personalisés, Thèse de Doctorat.
71