Upload
vuongnga
View
318
Download
13
Embed Size (px)
Citation preview
Master Management des connaissances et Innovation Spécialité : Ingénierie et Management de la Formation
en Ligne
Rapport de Stage Sujet : Conception d’un dispositif de formation hybride sur la
technologie web pour des étudiants universitaire de S6 filière SMI et développement d’un éditeur pour l’apprentissage de
HTML /CSS /JavaScript
Réalisé par :
KOSSIR TAOUFIK
Encadré par : M. Ait Moussa Abdelaziz
Responsable pédagogique : M. Jean-Marc Labat
Juin 2015
E_learning_techweb@TICE
2
REMERCIEMENT
Avant d’entamer notre rapport, nous tenons à exprimer notre profonde
gratitude à M. le doyen Jamal-Eddine Derkaoui et M. le
vice doyen Abdelkhalek Legssyer de la faculté des sciences UMPO Oujda.
Je tiens à remercier vivement M. Ait Moussa Abdelaziz mon encadrant
durant le stage au sein de la faculté des sciences UMPO Oujda pour leurs
conseils et leur soutien durant le stage.
Mes vifs remerciements à M. Jean-Marc Labat le responsable de notre
formation IMFL à UPMC.
Je ne peux passer cette occasion sans rendre hommage à mes enseignants et
surtout ainsi qu'à tous ceux qui contribuent à la réussite de la formation.
Merci aux membres du jury d'avoir accepté d'évaluer ce travail.
Enfin, je tiens à saluer tous ceux qui m’ont aidé du près ou de loin dans ce
projet et que j’ai oublié de mentionner. A tous un très grand merci.
J’espère que ce projet atteindra ses objectifs et je souhaite vivement
satisfaire les ambitions du jury, ainsi que les professeurs de mon formation
en IMFL à l’université pierre et marie curie (UPMC) par le travail accompli.
E_learning_techweb@TICE
3
Sommaire REMERCIEMENT.................................................................................................................................. 2
Table des figures ................................................................................................................................. 5
Résumé :......................................................................................................................................... 6
Mots clés : ...................................................................................................................................... 6
Introduction ....................................................................................................................................... 7
Chapitre 1 : Cahier des charges ......................................................................................................... 11
1. Analyse des besoins ............................................................................................................... 11
1.1 Méthodologie adoptée.................................................................................................... 11
1.2 Analyse de l’existant ....................................................................................................... 12
1.3 Synthèse de l’analyse de l’existant ................................................................................... 13
1.4 Contexte d’insertion ....................................................................................................... 13
1.5 Idée mobilisatrice ........................................................................................................... 15
1.6 Public cible ..................................................................................................................... 15
2. Identification du dispositif .................................................................................................. 24
3. Description du projet ............................................................................................................. 24
3.1 Objectif du projet ........................................................................................................... 24
3.2 Compétences à développer ............................................................................................. 25
3.3 Conditions d'insertion ..................................................................................................... 25
3.4 Bénéfices attendus ......................................................................................................... 25
3.5 Rôles des acteurs ............................................................................................................ 26
3.6 Ressources ..................................................................................................................... 27
3.6.1 Matériels informatiques .............................................................................................. 27
3.6.2 Ressources humaines .................................................................................................. 27
3.6.3 Ressources pédagogiques : .......................................................................................... 27
3.7 Contraintes :................................................................................................................... 27
Chapitre 2 : Conception de la formation ............................................................................................. 28
1. Objectif de la formation.......................................................................................................... 28
2. Architecture modulaire de formation ...................................................................................... 28
3. Objectifs spécifiques de la formation : ..................................................................................... 29
4. Stratégie pédagogique générale : « Le constructivisme et le socio-constructivisme ». ................ 31
5. Élaboration du contenu de formation...................................................................................... 31
E_learning_techweb@TICE
4
6. Contenu détaillé de la formation............................................................................................. 32
7. Scénario pédagogique générale .............................................................................................. 34
Chapitre 3 : Médiatisation de contenu et implémentation de l’éditeur ................................................. 35
1. Médiatisation du contenu....................................................................................................... 35
1.1 Choix de la plateforme .................................................................................................... 35
1.2 Structuration des ressources pédagogiques ..................................................................... 38
1.3 Rôles des utilisateurs ...................................................................................................... 38
2. Implémentation de l’éditeur ................................................................................................... 41
2.1 ANALYSE CONCURRENTIELLE ........................................................................................... 41
2.2 Synthèse d’analyse concurrentielle .................................................................................. 47
2.3 Fonctionnalité de la solution envisagé.............................................................................. 47
Chapitre 4 : Expérimentation du module PHP/MySQL et de l’éditeur................................................... 52
1. Description de l’expérimentation ............................................................................................ 52
2. Structuration du module expérimenté..................................................................................... 53
3. Scénario détaillé du module expérimenté................................................................................ 54
Chapitre 5 : Expérimentation : Evaluation, perspectives, compétence acquise ...................................... 65
1. Evaluation du projet ............................................................................................................... 65
2. Propositions d’amélioration .................................................................................................... 67
Conclusion ........................................................................................................................................ 68
Références bibliographiques et sitographiques .................................................................................. 69
Annexes ........................................................................................................................................... 71
E_learning_techweb@TICE
5
Table des figures Figure 1 : Les trois unités de l’ingénierie de la formation en ligne ........................................................ 12
Figure 2 : Jugement sur les facteurs qui motivent les étudiants dans la formation à distance ............... 13
Figure 3 : âge du public cible .............................................................................................................. 16
Figure 4 : Type Diplôme BAC+2 .......................................................................................................... 17
Figure 5 : Catégorie d’étudiant ........................................................................................................... 17
Figure 6 : Taux d’utilisation des réseaux sociaux par le public cible....................................................... 18
Figure 7 : Usage quotidien des réseaux sociaux ................................................................................... 18
Figure 8 : But d’utilisation des réseaux sociaux.................................................................................... 19
Figure 9 : Utilisation d’internet pour la recherche et documentation.................................................... 19
Figure 10 : Temps de travaille dans les salles informatiques de l’université ........................................... 20
Figure 11 : Type de matérielle utilisée pour la connexion à internet ..................................................... 20
Figure 12 : Taux de consultation des ressources d’apprentissage ......................................................... 21
Figure 13 : Taux d’utilisation des sites web d’apprentissage................................................................. 21
Figure 14 : Utilisation des forums ....................................................................................................... 22
Figure 15 : Type de ressource utilisée ................................................................................................. 22
Figure 16 : Jugement d’apprentissage avec une formation à distance................................................... 23
Figure 17 : Jugement sur le rythme d’apprentissage dans la formation à distance ................................. 23
Figure 18 : Structuration du formation ............................................................................................... 32
Figure 19 : Scénario pédagogique générale de la formation ................................................................. 34
Figure 20 : Bilan de comparaison des plateformes E-Learning. Issu du : Projet @2L. Etude comparative de
plates-formes ................................................................................................................................... 35
Figure 21 : Nombre des sites moodle enregistrés issu du : http://icp.ge.ch/sem/cms-spip/IMG/gif/01-nb-
total-sites.gif..................................................................................................................................... 36
Figure 22 : Les sites Moodle enregistrés par version issu du : https://moodle.net/stats/ ....................... 36
Figure 23 : Environnement d’installation de Moodle issu du : http://www.elearncom.fr/moodle-le-lms-
open-source-qui-monte-cles-de-reussite ............................................................................................ 37
Figure 24 : Page de connexion pour accéder au formation ................................................................... 39
Figure 25 : Structuration des modules au sein du plateforme............................................................... 40
Figure 26 : Quelques éditeurs HTML/CSS/JavaScript ............................................................................ 41
Figure 27 : Editeur Lamoulinette ........................................................................................................ 42
Figure 28 : Editeur dabblet................................................................................................................. 43
Figure 29 : éditeur JSFiddle ................................................................................................................ 44
Figure 30 : éditeur CodePen............................................................................................................... 45
Figure 31 : Création d’un tableau avec HTML ...................................................................................... 48
Figure 32 : Ajout de CSS ..................................................................................................................... 48
Figure 33 : Ajout d’un background en JAVASCRIPT .............................................................................. 49
Figure 34 : Erreurs HTML ................................................................................................................... 49
Figure 35 : Erreurs CSS....................................................................................................................... 50
Figure 36 : Erreurs JAVASCRIPT .......................................................................................................... 50
Figure 37 : Guide JavaScript ............................................................................................................... 51
E_learning_techweb@TICE
6
Résumé :
L’objectif de mon stage est la conception d’une formation à distance sur les technologies web
à savoir : le HTML, les feuilles de style CSS, le PHP/MYSQL et le JavaScript pour des étudiants
de semestre 6 filière science mathématique et informatique (SMI). Ainsi pour remédier les
problèmes liées à l’apprentissage de ces technologies web et notamment HTML, CSS
JAVASCRIPT, j’ai développé un éditeur qui génère les résultats et les erreurs du code tapés par
l’étudiant.
Après une analyse du mode d’enseignement actuelle des modules de formation technologie
web, nous présentons l’étude des besoins à travers le public cible et le contexte d’insertion, puis
nous décrivons le projet.
Dans la deuxième partie nous abordons la conception de la formation en présentant les
objectifs de la formation, l’architecture modulaire, les objectifs spécifiques, stratégies
d’apprentissage.
Quant à la troisième partie s’articule sur deux points essentiels. Dans la première nous
présentons une justification de choix de la plateforme Moodle comme moyen de médiatisation.
Egalement cette première partie décrit la structuration des contenues et les ressources utilisées au
sein de la plateforme. Pour la deuxième partie nous traitons l’implémentation de l’éditeur,
commençant par une analyse concurrentielle entre les différents éditeurs disponibles sur le
marché puis on va présenter les fonctionnalités de l’éditeur développé.
En quatrième partie nous présentons une description de l’expérimentation ainsi la structuration
et un scénario détaillé du module expérimenté.
La dernière partie décrit en premier lieu les critères envisagés pour évaluer le projet puisque la
phase d’expérimentation du dispositif est en cours. On deuxième lieu nous présentons une
perspective concernant la transformation de l’éditeur sous forme de plugin en vu d’obtention des
statistiques d’usage.
Mots clés : Formation hybride, rythme d’apprentissage, temps, action, autonomie, technologie web,
démarche de conception systématique, plateforme E-Learning Moodle, TICE, étudiant
universitaire, éditeur de code HTML/CSS/ JavaScript.
E_learning_techweb@TICE
7
« La révolution numérique dans l’apprentissage en ligne et l’utilisation d’Internet donnent un
essor sans précédent à la formation à distance. La pédagogie est bouleversée par ce mode
d’opération, l’interactivité se situe au cœur des formations et le monde de l’enseignement
traditionnel demeure ambivalent quant à son utilisation. Les nouvelles technologies constituent
une opportunité majeure pour un développement massif de l’accès au savoir pour chacun à tout
moment de sa vie. Encore faut-il que les praticiens y adhèrent, acceptent de s’y former et
s’ouvrent sur de nouvelles réalités. La technologie est enfant de l’humanité, elle a été découverte
par l’homme, pour l’aider à faire face à la complexité actuelle du monde.» Louise Marchand et
Paul-Armand Bernatchez.
Introduction
De nombreux responsables de l’éducation expriment l’espoir que des formes d’éducation plus
modernes et plus motivantes pourront être dégagées. Le recours au progrès technologique est
souvent évoqué. Les références à la communication médiatisée avec ses possibilités de
distribution, d’ubiquité, d’instantanéité se multiplient. Les projets nouveaux se donnent volontiers
des titres techniques (Télé-enseignement, University of the Air, etc…). Ainsi la formation à
distance est devenue, dans plusieurs pays du monde, un moyen essentiel pour rendre accessible la
connaissance sur de grands territoires (Zentgraf, 1992), pour rejoindre des populations qui n’ont
pu fréquenter les institutions scolaires en place (Patoine, 1995) mais aussi, de plus en plus,
comme une occasion de questionner l’enseignement traditionnel (Alicea, 1992) et de resituer
l’apprentissage (l’apprenant) au centre du processus d’éducation (Deschênes et Lebel, 1994).
A l’instar des pays du sud, le Maroc œuvre pour le développement du secteur de l’éduc ation,
en bénéficiant des apports des outils technologiques dans la formation des adultes en effet ces
derniers offrent de nouveaux services en terme d’accès à l’information et la formation, tant sur
les lieux traditionnels de la formation qu’à domicile ou sur le lieu de travail. C’est parce que ces
services peuvent révolutionner l’organisation de la formation qu’ils donnent un véritable contenu
à l’expression « formation tout au long de la vie ». De nombreux organismes publics et privés ont
déjà commencé à mettre en place de tels services, visant aussi bien les étudiants en formation
initiale que les stagiaires de formation continue, les étudiants inscrits en formation « présentielle»
qu’en formation à distance.
Dans le cadre de la préparation du projet de fin d’étude en vue de l’obtention du diplôme du
master spécialisé en ingénierie et management de la formation en ligne (IMFL) à l’Université
Pierre et Marie Curie (UPMC), j’ai été appelé à mettre en place un dispositif de formation à
distance au profit d’un établissement public afin d’examiner de près la validité d’un tel
dispositif et analyser les difficultés qui puissent surgir lors de sa mise en œuvre. Le projet qui a
été mis en place, a ciblé la faculté des sciences d’Oujda (Maroc) dans le domaine des
technologies de Web. Cette faculté, qui se trouve à Oujda, ambitionne de soutenir le programme
E_learning_techweb@TICE
8
"Maroc Numeric 20131" dans sa politique de généralisation des technologies de l'information et
de la communication et de contribuer au renforcement des compétences des enseignants quant à
l'intégration de ces technologies dans les pratiques de classe.
Le dispositif de formation à distance «E_learning_techweb@TICE» destiné aux étudiants
SMI S6 inscrits au sein de la faculté a été mis en place pour répondre à un besoin exprimé par
ces derniers lors des discussions et à travers un questionnaire qui leur a été adressés. Ainsi nous
avions opté pour une formation hybride (distance + présence) à travers une plateforme, afin de
résoudre le problème du rythme d’apprentissage du public cible et créer une interaction entre les
étudiants.
Dès lors le présent mémoire a été rédigé pour rendre compte du travail qui a été fait pour
mettre en place ce dispositif de formation à distance, baptisé « E_learning_techweb@TICE » car
il est essentiellement lié à l’apprentissage des langages du web et au partage des informations en
faisant appel aux outils technologiques et en collaborant sur le web, ainsi on va traiter dans une
première phase la présentation du fondement théorique du travail effectué , pour expliciter par la
suite les différentes phases de la démarche de conception envisagée, en débutant par l’étude
préalable, qui repose sur l’analyse des besoins et demandes du public cible, puis l’organisation et
la planification de la formation à distance à mettre en œuvre, enfin la phase de l’expérimentation
d’un module de cette formation, qui permettra à la fois de vérifier la validité du dispositif et
d’analyser ce qui a été réalisé en vue de dégager d’autres perspectives pour améliorer le travail
effectué dans l’avenir.
Fondement théorique du projet :
Ce travail se situe dans le domaine de la formation à distance, supportée par les TIC, et se
centre plus particulièrement sur la démarche 2 de conception des environnements d’apprentissage
multimédia.
Nous allons nous inspirer de cette démarche de conception particulière qui allie rigueur et
réflexion pédagogique lors de la mise en œuvre du projet « E_learning_techweb@TICE », afin
d’assurer un bon déroulement de la formation proposée aux étudiants de SMI S6.
1 Maroc Numeric. Stratégie nationale pour la société de l’information et l’économie numérique .
2009 – 2013. Consulté sur le lien : https://ccdcoe.org/sites/default/files/strategy/Maroc_CyberSecurity_2013_FR.pdf
2 Bruno De Lièvre, Christian Depover, Jean-Jacques Quintin, Sandrine Decamps. Une démarche de
conception d’un cours à distance basée sur un scénario pédagogique. Hautcourt F., Lusalusa S. Les technologies de l’information et de la communication à l’école : où, quand et comment ?, Presses universitaires de Belgique, pp.243-261, 2002. Consulté sur : https://hal.archives-ouvertes.fr/edutice-00000798/document
E_learning_techweb@TICE
9
Quelle démarche de conception pour une formation réussie ?
La démarche de conception systématique telle qu’elle est envisagée par ses auteurs (Bruno De
Lièvre, Christian Depover, Jean-Jacques Quintin et Sandrine Decamps) peut être distinguée en
quatre phases :
L’étude préalable : Au cours de cette phase les besoins et demandes des futurs utilisateurs
vont être exprimés, étudiés et analysés en vue de cerner au mieux les contours du projet à
concevoir. Cette étape trouve sa concrétisation sous la forme d’un cahier des charges qui
permettra de formaliser l’expression de la demande des utilisateurs et de l’offre des concepteurs.
L’analyse et la structuration des contenus : C’est lors de cette phase que le contenu de la
formation pourra être opérationnalisé. Pour en arriver à ce stade, il est nécessaire de franchir deux
étapes : la première est celle de l’extraction des connaissances, la seconde étant celle de l’analyse
pédagogique du contenu. Les connaissances recueillies nous permettront d’obtenir ce que nous
appellerons la base de connaissances laquelle définit avec précision le champ qui sera considéré.
L’analyse pédagogique de la base de connaissances, quant à elle, permettra surtout de donner une
15 structure pédagogique au contenu sous la forme d’entités cohérentes qui peuvent être
regroupées sous le vocable module.
L’élaboration des situations d’apprentissage : Lors de cette phase, un va-et-vient continu
s’opère entre la conception des situations d’apprentissage et leur mise en forme sur support
informatique c’est-à-dire la construction des interfaces. C’est à l’occasion de ce processus de
raffinement progressif que le concepteur va effectuer les choix des langages de communication
les plus appropriés aux situations pédagogiques qu’il veut développer. Il devra prendre une série
de décisions relatives aux canaux de communication empruntés (utilisation du son, intégration de
schémas ou d’images animées,…) et ces choix influenceront tant le développement des s ituations
d’apprentissage que celui de l’interface laquelle permet de rendre ces situations accessibles à
l’utilisateur.
L’insertion des outils de formation dans leur contexte d’utilisation : Même s’il s’agit de la
dernière phase évoquée, elle n’est cependant ni la moins importante, ni l’ultime préoccupation
des concepteurs. En effet, si toutes les questions relatives à cette phase concernent effectivement
la mise en œuvre du produit final, des réponses à ces questions auront déjà dû être données dès
l’entame de la première phase du développement. Car c’est avant de décider de concevoir un
dispositif de formation qu’il faut se préoccuper des conditions dans lesquelles il va être utilisé, de
la manière dont les différents outils vont s’agencer les uns par rapport aux autres ainsi que
s’intéresser au rôle que l’enseignant va occuper dans ce dispositif. Les choix pédagogiques posés
lors de la conception vont être influencés par les réponses données à ces questions qui s’avèrent
essentielles pour procurer aux utilisateurs un produit qui corresponde au mieux à leurs
aspirations. La méthode adoptée pour ajuster au mieux l’offre et la demande est le processus de
validation permanente appliqué lors de chacune des phases de la conception.
E_learning_techweb@TICE
10
Réflexion sur la problématique :
Avec la massification de la demande de formation et du développement des technologies de
l’information et de communication, (audiovisuel, puis informatique, multimédias et réseaux),
l’offre éducative en matière de formation à distance s’accroît, se diversifie et recourt à des
supports techniques de plus en plus complexes (Internet en est le dernier avatar) pour assurer
aussi bien la transmission des connaissances que les fonctions tutorales. Ces nouveaux supports
et l’interactivité qu’ils autorisent sont réputés contribuer à l’agencement de dispositifs souples et
flexibles auxquels sont attribuées de nombreuses qualités. Ils sont censés permettre
individualisation de l’apprentissage, accessibilité des connaissances, liberté de circulation,
aménagement d’une relation conviviale entre formateurs et formés et entre formés, ouverture de
la formation vers des publics nouveaux. On assure qu’ils placent l’apprenant « au coeur du
système » et favorisent son autonomie. En un mot, qu’ils sont à l’origine d’une véritable «
révolution pédagogique ».
Au Maroc, la formation à distance se développe progressivement aussi bien dans le secteur
public que privé en s’imposant à la fois dans la formation initiale des apprenants et celle continue
et/ou professionnelle afin de répondre au contexte général d’évolution de la société marocaine et
à ses aspirations pour un meilleur avenir.
C’est dans le cadre du projet de fin d’étude qui consiste à mettre en place un dispositif de
formation hybride au sein d’un organisme public afin d’examiner de plus près la faisabilité d’un
tel projet et sa validité auprès du public cible tout en dégageant les conditions de réussite d’un tel
service, que s’inscrit mon travail au sein de la faculté des sciences d’oujda. De ce fait, je me suis
penché sur la problématique suivante : Quel est l’impact de la démarche de conception du
dispositif de formation mis en place sur le bon déroulement de celle-ci ? En effet, mon propos
sera d’explorer à travers l’expérimentation d’un module du dispositif ciblé à la lumière des
données recueillis l’appréciation du public cible vis à vis de l’utilité de la formation qui leur a été
destinée du point de vue pédagogique, technique et organisationnel tout en observant les effets
d’une telle démarche de conception de ce module sur le bon fonctionnement d’un tel dispositif.
E_learning_techweb@TICE
11
Chapitre 1 : Cahier des charges
1. Analyse des besoins Le projet «E_learning_techweb@TICE» s’est enclenché en réponse à une demande qui
résulte d’une démarche active du concepteur auprès du public cible. En effet, nous avions
procédé à deux techniques d’analyse des besoins qui sont l’interview en groupe et le
questionnaire afin de bien clarifier la demande et proposer une formation adéquate.
1.1 Méthodologie adoptée
Dans notre étude et analyse des besoins, on a adopté deux méthodes : la première consiste à
créer un questionnaire d’enquêtement3 en faveur des étudiants à fin de connaitre les
caractéristiques du public cible au niveau d’homogénéité et usage des services et ressources
informatiques ainsi que le mode d’enseignement souhaité. Aussi cette méthode nous a permet de
déterminer les besoins des étudiants en matière du contenu des modules de la technologie web.
La deuxième méthode utilisée pour l’étude des besoins est l’interview avec le professeur
responsable des modules de technologie web pour déterminer les problèmes de la formation en
mode présentiel et les parties du cours qui posent des problèmes aux étudiants.
1.1.1 Interview et questionnaire
Les questions du questionnaire ont été divisées en quatre parties :
Informations personnelles.
Usage de service Internet.
Usage des ressources informatiques.
Motivation pour les formations à distance et les besoins en formation.
Ces questions ont été posées sous deux formes : des questions fermées et des questions de
rédaction pour donner à l’utilisateur la possibilité de spécifier plus d’informations.
L’interview avec le professeur nous a permet d’extraire beaucoup d’informations importantes
au niveau de l’intégration des technologies d’information et communication en mode
d’enseignement actuelle et le degré d’acceptation de ces outils comme nouvelles méthodes
d’enseignement. Aussi il nous a spécifié les lacunes et les problèmes des étudiants en matière des
connaissances précédentes et les prérequis pour la formation.
3 Voir l’annexe numéro : 1
E_learning_techweb@TICE
12
1.2 Analyse de l’existant
A partir d’une analyse du mode d’enseignement actuel des modules de technologie web pour
la filière S6 SMIA, on a constaté que l’enseignement actuel du module se fait de façon
traditionnel et se base essentiellement sur les cours magistraux. Ce mode d’enseignement
provoque chez l’étudiant plusieurs problèmes. On va analyser ces problèmes, en se basant sur 3
axes : temps, action rythme.
Figure 1 : Les trois unités de l’ingénierie de la formation en ligne Issue de http://fr.slideshare.net/SarahClerquin/ingnirie-de-la-foad/
Commençant par la dimension du temps où les étudiants passent plusieurs heures comme des
auditeurs passifs qui reçoivent l’information sans aucune interaction. Ainsi la surcharge horaire
au niveau de l’emploi du temps qui diminue la concentration des apprenants pendant les séances
du cours magistral. Notamment cette problématique a été prouver par le fait que 69,2 % des
étudiants préfèrent une formation à distance parce qu’elle permet un accès facile aux contenus.
La deuxième axe que nous avons analysé est le rythme d’apprentissage qui se diffère d’un
étudiant à un autre, ce qui provoque un décalage entre les étudiants au niveau d’acquisition des
connaissances et surtout : si on dispose d’un grand nombre d’apprenant comme dans notre cas 80
étudiants (avec un rythme plus accélère, on risque de négliger certains étudiants). Un
enseignement en présentiel qui s’adapte à un nombre élevé des étudiants est une tâche difficile
et complexe pour le professeur et nécessite beaucoup du temps et des ressources. Sur le même
axe le rythme d’apprentissage a prit la première place dans les souhaits des étudiants, ce qui était
recenser dans le questionnaire où 61,5 % des étudiants interrogés espèrent avoir un apprentissage
fondé sur un rythme adapté à chacun.
La troisième dimension est l’action, l’enseignement actuelle ne présente aucun forme
d’enseignement collaboratif ou de groupe pour que les étudiants puissent créer une action entre
eux afin d’échanger et partager les connaissances acquises. De plus d’après le questionnaire on
remarque que 46,2 % des étudiants ont souhaité avoir des travaux collaboratifs de groupes.
E_learning_techweb@TICE
13
Figure 2 : Jugement sur les facteurs qui motivent les étudiants dans la formation à distance
1.3 Synthèse de l’analyse de l’existant
L’étude de l’existant nous a permet de dégager plusieurs problèmes au niveau du mode
d’enseignement actuelle sur plusieurs axes : temps, rythme, action.
Afin de remédier les problèmes analysés, on a proposé de concevoir une forme
d’enseignement à distance pour essayer de simplifier la tâche pour le professeur d’un côté pour
mieux gérer le nombre des étudiants (80 étudiants). D’un autre coté pour les étudiants, on a
essayé de diminuer le temps de présentiel en encouragent le mode d’enseignement à distance à
l’aide d’une plateforme e-Learning Moodle. Cette plateforme aura comme but la facilitée
d’accès au contenu, et l’aide des étudiants pour un apprentissage à un rythme adapté à chacun et
de favorisant la collaboration.
1.4 Contexte d’insertion
L'inscription du Maroc dans le processus de changements des pratiques d'enseignement
apprentissage et de développement du secteur éducatif en faisant appel aux TIC.
La volonté des responsables de contribuer à la réduction de la fracture numérique entre
pays du sud et pays du nord.
La volonté d'améliorer la qualité de l'enseignement Marocain dans les différents cycles.
La marchandisation du secteur d'éducation et de formation au Maroc en optant pour le e-
learning (ouverture d'un nouveau marché).
1.4.1 Contexte global
Parmi les chantiers qui occupent une place importante dans les préoccupations de l’état
marocain ses dernières années est le secteur d’enseignement qui est considéré comme un vecteur de développement humain et surtout après que les réformes précédents de mise à niveau ont pas
réussi a donné les résultats estimées sur le terrain : La Réforme de l’enseignement (loi 0100), initiée en 2002/2003
LMD (processus de Bologne 1999).
Le Projet Emergence de 2005
Le Programme d’urgence (2009-2012)
E_learning_techweb@TICE
14
De même l’état a essayé d’intégrer les TIC à travers plusieurs programmes mais les résultats
étaient sous l’estimation : Le Réseau «MARWAN» (MAROC Wide Area Network)
Le Campus Virtuel Marocain (CVM) (2004)
Le Génie Sup (2008),
Le Programme Nafida (2008)
L’état marocain a lancé en 2013 la stratégie nationale pour la société de l’Information et de
l’Économie Numérique « Maroc Numeric 2013 4».Cette stratégie a essayé de faire face aux problèmes liées aux réformes et programmes précédents, afin de suivre les changements que
connait le monde actuel dans les modes de production et de transmission et de réception des connaissances et notamment le fort usage des nouvelles technologies d’information et communication par les étudiants pour donner un nouveau décollage au secteur d’enseignement
supérieure. D’une façon générale notre projet s’inscrit dans la même orientation de l’état marocain en
vue d’intégrer et généraliser l’usage des TIC dans les pratiques d’enseignement universitaire.
1.4.2 Contexte institutionnel
En vue de concrétiser la volonté estimée par l’état marocain, la faculté des sciences d’Oujda qui fait partie de l’Université Mohammed Premier a essayé d’adopter et d’intégrer ces nouvelles
technologies d’informations et de communication comme outils d’enseignement pour les différentes filières de la faculté.
Dans ce contexte notre expérimentation s’insère pour initier les étudiants aux pratiques des
formations à distance en essayant de résoudre les problèmes liés à la disponibilité, la surcharge
des emplois du temps, la facilité l’apprentissage et l’aide à la progression.
Du même l’expérimentation réalisée sert à une base d’étude pour les comités de recherche de la faculté des sciences Oujda afin d’améliorer et corriger les problèmes précédents.
4 Maroc Numeric. Stratégie nationale pour la société de l’information et l’économie numérique .
2009 – 2013. Consulté sur le lien : https://ccdcoe.org/sites/default/files/strategy/Maroc_CyberSecurity_2013_FR.pdf
E_learning_techweb@TICE
15
1.5 Idée mobilisatrice
Le projet Diffuweb@TICE est mis en place afin de répondre à un besoin de formation exprimé
par le public cible, dès lors les domaines de compétences ciblés sont : Conception et développement d’un site web.
Implémentation d’un site web et ses bases de données dans un serveur.
Ainsi, l’idée mobilisatrice a été formulé comme ci-dessus : « Favoriser le partage et la collaboration entre les étudiants et l’enseignant pour un apprentissage effectif ».
Partant du fait que : « partager et collaborer les activités d’apprentissage c’est bien pour les
étudiants ».
L’idée de projet vient pour consolider et soutenir les trois points suivant : la facilité d’accès au
contenu, l’apprentissage à l’aide d’un rythme adapté, l’enseignement innovant aves les TICE.
Notre point de départ du projet est le soutient et l’enrichissement du cours présentiel. Pour
cela on a essayé de proposer une formation hybride qui vise à exploiter les nouvelles
technologies d’information et de communication dans l’enseignement pour aider et consolider le
travail du professeur.
Le deuxième besoin qui a nécessité l’implémentation du projet est la facilité pour accéder au
contenu du cours. Maintenant le transfert du cours se fait à l’aide des technologies
traditionnelles : clés USB, boite messagerie (Gmail, Hotmail …). Ce mode de transfert
traditionnel pose beaucoup de problèmes.
Le troisième facteur qui est le problème du rythme d’apprentissage qui se diffère d’un étudiant
à un autre, d’où vient notre idée qui vise à donner aux étudiants plus d’autonomie dans le
parcours du cours (apprentissage adaptatif).
D’un autre côté ce projet vient pour concrétiser la volonté de la faculté des sciences de
l’université Mohamed premier Oujda et de ministre de l’enseignement pour adopter les TICE
comme nouvelle méthode d’enseignement dans l’université marocain en vue de remédier les
lacunes d’apprentissage.
1.6 Public cible
La formation technologie web s’adresse aux étudiants de la faculté des sciences Oujda filière
science mathématique et informatique (SMI) semestre 6.
L’objectif de cette formation est de continuer les travaux des professeurs en cours présentiel
en essayant d’approfondir les connaissances des étudiants en technologie web. Cette formation
vise à donner aux étudiants les concepts et techniques de réalisation et validation des sites web
statique et dynamiques.
E_learning_techweb@TICE
16
1.6.1 Caractéristiques du public cible
Une première caractéristique du public cible d’après les réponses que nous avons eues sur le
questionnaire d’enquêtement5, est le caractère d’homogénéité. Tous les étudiants proviennent de
la même filière SMI et du même niveau semestre 6.
1.6.2 Informations personnels
L’âge du public cible varie entre 20 et 30 ans. L’analyse du questionnaire a montré que la
majorité (92,3%) des étudiants à un âge qui varie entre 20 à 25 ans et seulement une minorité
(7,7%) est âgée de 25 à 30 ans.
Figure 3 : âge du public cible
Deux autres critères d’homogénéité du public cible se voit dans le type de diplôme BAC+2.
92.3 % des étudiants sont titulaires d’un diplôme de DEUG alors que seulement 7,7% ont un
autre diplôme. En outre tous les personnes qui ont rempli le formulaire sont des étudiants et on
n’a pas eu aucun fonctionnaire.
5 Voir l’annexe numéro : 1
E_learning_techweb@TICE
17
Figure 4 : Type Diplôme BAC+2
Figure 5 : Catégorie d’étudiant
1.6.3 Usage des services internet
L’analyse d’usage des ressources internet chez les étudiants a montré que ces derniers ont des
capacités positives et favorables envers l’utilisation des divers réseaux sociaux ainsi les sites web
et forums d’apprentissage et ils n’ont aucuns problèmes dans la manipulation de ces outils.
E_learning_techweb@TICE
18
En termes des réseaux sociaux, l’outil facebook a pris la première place avec 100%
d’utilisation ensuite on a gmail avec 84% puis Hotmail et Yahoo et d’autres. Le temps
d’utilisation de ces réseaux sociaux par jour nous a permet de valider l’idée que les étudiants ont
plus de tendance à utiliser ces outils. 69% des étudiants utilisent ces réseaux de 2 heurs à 4
heurs par jour et 38% avec moins de deux heurs d’utilisation par jour.
Figure 6 : Taux d’utilisation des réseaux sociaux par le public cible
Figure 7 : Usage quotidien des réseaux sociaux
E_learning_techweb@TICE
19
Un autre point qui a attiré notre attention dans l’analyse de questionnaire est le but d’usages de
ces réseaux sociaux. On a remarqué que la majorité des étudiants interviewée soit 92.3 %
utilisent ces outils pour apprendre.
Figure 8 : But d’utilisation des réseaux sociaux
Concernant la recherche et la documentation tous les étudiants ont confirmé l’utilisation
d’internet comme outils de documentation et recherche d’information.
Figure 9 : Utilisation d’internet pour la recherche et documentation
E_learning_techweb@TICE
20
Les résultats du temps de travaille dans les salles informatiques de l’université durant les TP et
activités scolaire ont montré que 53,8 % des étudiants travaillent plus que 6 heurs par semaine
dans ces salles et s’ajoute à cela l’emploi du temps chargé.
Figure 10 : Temps de travaille dans les salles informatiques de l’université
L’étude de la matérielle informatique utilisée pour la connexion à internet a montré que la
majorité des étudiants utilisent des ordinateurs portables. Ce résultat approuve l’aptitude des
étudiants aux niveaux de la matérielle informatique pour un enseignement en ligne.
Figure 11 : Type de matérielle utilisée pour la connexion à internet
1.6.4 Usage et type des ressources d’apprentissage
L’analyser des habitudes d’étudiants envers l’usage de ressources informatiques a relevé que
la majorité des apparents utilise et consulte des ressources en dehors du cours pour approfondir
et complète leur l’apprentissage.
E_learning_techweb@TICE
21
Figure 12 : Taux de consultation des ressources d’apprentissage
Concernant les ressources web, le site web OpenClassrooms a prit la première place par
76.9 % d’utilisateurs suivi par le site Developpez.com avec 69.2 %.
Figure 13 : Taux d’utilisation des sites web d’apprentissage
En ce qui concerne l’utilisation des forums pour l’autoformation, on a remarqué que seulement
la moitié qui ont confirmé l’usage des forums pour l’apprentissage.
E_learning_techweb@TICE
22
Figure 14 : Utilisation des forums
L’analyse de type de ressource d’apprentissage utilisé par le public cible, a montré que la
majorité des étudiants préfèrent les documents de type textes : PDF, PPT, DOCX et sous forme
de vidéos.
Figure 15 : Type de ressource utilisée
E_learning_techweb@TICE
23
1.6.5 Motivation pour les formations à distance
L’étude de niveau de motivation pour la formation à distance a montré que le public cible ont
des expériences avec l’apprentissage à distance. Ce degré de motivation est ressenti par les types
des formations suivies par le public cible : codeacademy, video2brain ainsi la durée de la
formation qui varie de 2 heures à 4 mois. De plus les étudiants ont affirmé qu’ils ont utilisé des
différents environnements de formation tel que : site web, logiciel et plateforme.
Sur le même sujet la moitié du public cible a qualifié la formation à distance comme très
favorable suivi de 30.8 % qui l’ont trouvée favorable.
Figure 16 : Jugement d’apprentissage avec une formation à distance
Enfin 77% des étudiants ont aimé le rythme d’apprentissage à l’aide dune formation a
distance dont 38,5 qui l’ont très favorable et par le même taux favorable.
Figure 17 : Jugement sur le rythme d’apprentissage dans la formation à distance
E_learning_techweb@TICE
24
1.6.6 Pré-test
Pour déterminer et connaitre le niveau des étudiants en matière de la technologie web nous
avons crées un pré-test6 pour avoir une idée des prérequis des apprenants.
2. Identification du dispositif
Titre du projet : Conception d’une formation en ligne pour la
technologie web
Auteurs :
Nom et coordonnées :
KOSSIR TAOUFIK
Adresse email : [email protected]
Date de dernier mis à jour : 30/05/2015
Niveau enseignement visée : Semestre 6
Discipline : Science mathématique et informatique (SMI)
Type de situation d’apprentissage : Formation à distance
Conditions d’utilisation : Plateforme moodle 2.7
Site hébergent : http://etaalime.com
3. Description du projet
3.1 Objectif du projet
L’objectif du projet est d’initier les étudiants aux nouvelles modes d’enseignement qui
impliquent l’intégration des TICE. Cet intégration est illustré par la conception d’une formation à
distance sur les technologies web afin d’approfondir les connaissances des étudiants en matières
de conception et créations des sites web statiques et dynamique. Ainsi ce projet vise à remédier
les problèmes d’apprentissages des langages de programmation web : HTML, CSS, JavaScript en
essayant d’implémenter et d’intégrer un éditeur de code sur la plateforme Moodle. Cet éditeur
permet d’améliorer l’apprentissage des étudiants en essayant de valider le code et de renvoyer les
erreurs à l’apprenant.
6 Voir l’annexe 2
E_learning_techweb@TICE
25
3.2 Compétences à développer
3.2.1 Pour l’apprenant
Compétences liées au création et développement des sites web.
Compétences relatives à l’apprentissage autonome. Compétences relatives à l’apprentissage via les plateformes E- learning.
3.2.2 Pour le tuteur
Compétences relatives à la conception des formations en ligne. Compétences relative à l’administration des plateformes E- learning. Compétences relatives à la gestion des projets de formation en ligne.
3.3 Conditions d'insertion
Contexte d’usage Formation initial
Type d’usage Formation formelle
Modalités d’accès En libre service, contrôlé par un mot de passe
Hébergeur Domaine d’hébergement : http://etaalime.com
Plateforme
d’enseignement à distance
Moodle 2 .7
Modalités pédagogiques Travaux individuels et autres collectifs
3.4 Bénéfices attendus
3.4.1 Apprenant :
Approfondir ses connaissances en technologie web à travers HTML/CSS, PHP/MySQL et
JavaScript.
Concevoir et développer des sites web statiques et dynamiques.
Exploiter les services et ressources internet pour interagir et communiquer.
Apprendre à l’aide d’un rythme adapté et développer autonomie dans l’apprentissage.
Développer les compétences relatives à l’usage des TICE et notamment en matière
d’usage des plateformes E- learning.
E_learning_techweb@TICE
26
3.4.2 L'enseignant /tuteur
Mettre en pratique les compétences, les savoirs et les savoirs faire acquis durant Master 2
en ingénierie et management de la formation en ligne (IMFL).
Savoir les contraints liées à la conception des dispositifs de formation et d’intégration des
TICE.
Evaluer le degré d’appréciation des TICE par les étudiants dans l’enseignement
Supérieur.
Dégager les points faibles et les problèmes liés au projet en essayant de les remédier dans
les versions suivants.
3.4.3 L'institution
Créer une nouvelle mode d’enseignement qui se base sur les TICE.
L’intégration des TICE au sein de l’université marocaine.
Créer une base de recherche pour exploiter ces expérimentations afin de les rénover.
3.5 Rôles des acteurs
3.5.1 Rôle du tuteur
Guider et accompagner l’apprenant dans son processus d’apprentissage.
Conception des modules de formations.
Médiatiser le contenu.
Administration de la plateforme E- Learning.
Collecte des statistiques.
Suivi la progression des étudiants.
3.5.2 Rôle de l'apprenant
Consulter les supports de cours
réaliser les activités d’apprentissage, les TP et QCM.
Interagir via les forums et les réseaux sociaux pour transmettre et partager les
connaissances.
Apprendre avec un rythme adapté.
E_learning_techweb@TICE
27
3.6 Ressources
3.6.1 Matériels informatiques
Ordinateurs connectés via internet.
Plateforme d’enseignement à distance Moodle 2.7.
Réseau social : Facebook.
La majorité des étudiants dotés des ordinateurs portable à domicile (d’après le
questionnaire d’enquête).
3.6.2 Ressources humaines
Monsieur AIT MOUSSA Abdelaziz : enseignant chercheur à la faculté des sciences
Oujda, responsable des modules de technologie web.
Monsieur MOUSSI Mohammed : responsable de la filière science mathématique à la
Faculté des Sciences de l’Université Mohamed Premier-Oujda.
3.6.3 Ressources pédagogiques :
Les parcours pédagogiques permettant la diffusion du contenu.
Le tutorat en ligne.
Les réseaux sociaux et forums permettant la diffusion et le partage de l’information.
3.7 Contraintes :
3.7.1 Contraintes relatives aux matériels informatiques
Débit réduit et disponibilité de connexion d’internet.
Ordinateurs avec des performances plus au moins modestes.
3.7.2 Contraintes humains
Motivation personnelles des apprenants.
Contraintes psychologique envers usages des TICE chez certains apprenants.
Engagement et implication des différents participants.
3.7.3 Contraintes relatives au statut des apprenants
La mise en œuvre de la formation est coïncidé avec le projet du fin d’étude qui est programmé au sixième semestre fin du cycle de la licence et les examines de fin de semestre. Cette
coïncidence a impliqué des contraintes pour le suivi de la formation avec un rythme quotidienne pour qu’en puisse exploiter les données statistiques dans l’analyse des résultats de
l’expérimentation.
E_learning_techweb@TICE
28
Chapitre 2 : Conception de la formation
1. Objectif de la formation L'objectif de cette formation est de donner aux étudiants les connaissances nécessaires et les
méthodes informatiques spécifiques aux technologies web, à savoir les langages HTML, feuilles de style (CSS), PHP/MySQL, la modélisation de la base de données, JavaScript. Les principes
essentiels sont présentés ainsi que les éléments les plus utilisés. A l'issue de ce tte formation l'étudiant doit être capable de concevoir et développer des sites web statique et dynamique. De plus à la fin de la formation l’étudiant pourra poursuivre en autonomie l'apprentissage des
différents éléments complémentaires.
Le premier module du cours porte sur la programmation des pages web statiques en HTML et les feuilles de style CSS ainsi que des compléments sur les nouveautés HTML5.
Quant à La deuxième module traite les pages web dynamiques : on étudiera le langage PHP, et interrogation dune base de données MySQL à l’aide de la plateforme Wampserver 2.0. Aussi ce
module contient des chapitres sur la modélisation de la base de donnes relationnelles et le langage SQL vue son importance dans la conception des sites web dynamique et le stockage des données.
Enfin, dans la troisième partie du cours, on s'intéressera à la programmation web côté client :
les éléments de base du JavaScript, les événements, les objets, et la manipulation du DOM avec JavaScript.
A noter que durant les TP une attention particulière sera donné à l'ergonomie, et l'utilisation des standards du web tels qu'ils sont définis par le W3C.
2. Architecture modulaire de formation
Module 3 : la programmation web côté client
Javascript
Module 2 : les pages web dynamiques
PHP SQLModélisation de la base de
données relationnelle
Module 1 : la programtion des pages web statiques
HTML CSS
E_learning_techweb@TICE
29
3. Objectifs spécifiques de la formation :
Module 1 : HTML/CSS
Comprendre la définition de HTML à travers son historique et ses versions et la conception des pages web valides selon les standards W3C.
Distinguer les types et les composants de balise HTML.
Connaitre la structure minimale d’une page HTML.
Appliquer la mise en forme du texte avec HTML.
Utiliser les éléments listes.
Distinguer et manipuler les types de liens hypertexte.
Manipuler et créer les différents types de tableau pour présenter les donnés.
Créer et utiliser les frames pour découper et structurer les pages web.
Identifier Les éléments du formulaire et les mises en œuvre dans une page web.
Insérer et manipuler les médias.
Comprendre le principe de feuille de style et appliquer les mises en forme à l'aide des
styles CSS.
Découvrir les nouveautés de HTML5 en structuration des pages web et en médias.
Module 2 : PHP/MySQL
Connaitre la définition de PHP à travers son historique et comprendre le principe de
fonctionnement des pages web dynamiques avec PHP.
Découvrir installation et utilisation de la plateforme de développement Web WampServer
2.0.
Distinguer les types d’intégration, la syntaxe et les balise clés de langage PHP.
Distinguer, manipuler et utiliser les différents types de variables.
E_learning_techweb@TICE
30
Distinguer les différents types des operateurs et de structure de contrôle et comprendre
son principe de fonctionnement et son contexte d’utilisation.
Créer et utiliser les fonctions et comprendre les différents modes de transmission
d’argument.
Distinguer et manipuler les différents types de tableaux.
Traiter les formulaires à travers les différentes méthodes.
Utiliser et manipuler SGBD MySQL pour interroger une base de donné avec PHP et via le
gestionnaire de base PhpMyadmin.
Créer et utiliser les sessions et cookies.
Manipuler et traiter les opérations de base sur les fichiers.
Module 3 : JavaScript
Comprendre la définition de JavaScript à travers son historique, ses intérêts et ses
inconvénients.
Découvrir les concepts de la base du langage JavaScript.
Distinguer les différents types de structure de contrôle et comprendre son principe de
fonctionnement et son contexte d’utilisation.
Découvrir les instructions du langage à travers les fonctions et les événements.
Connaitre, manipuler et utiliser les fonctions mathématiques prédéfinies en JavaScript.
Comprendre le principe du modèle objet du document (DOM) ainsi son mode
d’utilisation.
Connaitre, manipuler et utiliser la méthode de validation des formulaires en JavaScript.
Créer et utiliser les pop-up en JavaScript.
Connaitre et utiliser les méthodes associées aux traitements de chaine de caractère en
JavaScript.
E_learning_techweb@TICE
31
4. Stratégie pédagogique générale : « Le constructivisme et le socio-
constructivisme ». La stratégie d’apprentissage adoptée pour notre formation est la combinaison entre
l’apprentissage constructivisme et le socio-constructivisme. Commençant par la stratégie constructivisme qui définit l’opération d’apprentissage comme étant un processus de construction des connaissances. Le constructivisme ne s’intéresse pas seulement
à l’acquisition des informations mais prend en considération l’interaction avec le contexte social. Dans cette approche l’environnement d’apprentissage devient un espace d’échange partage et
aide entre apprenants par le biais des ressources informatique et NTIC qui assure la fonction d’exploration et de construction des connaissances chez les apprenants.
Le deuxième fondement de notre stratégie pédagogique est le socio - constructivisme, qui place l’apprenant au centre de son processus d’apprentissage. Les TIC sont considérés comme un
outil au service de l’autoformation des apprenants. En effet, en faisant appel à une direction socioconstructiviste, nous visons le fondement de notre projet sur des aspects sociaux qui permettent la collaboration et la construction des connaissances.
Dans ce contexte notre but par l’adoption de ces deux stratégies est transfère aux apprenants
les compétences suivants : Apprentissage autonome.
Usage et exploration des TIC comme moyens de construction d’apprentissage.
Travail collaboratif.
Usage des outils de communication (synchrone et asynchrone).
Réalisation des activités pédagogiques.
5. Élaboration du contenu de formation
J’ai élaboré 3 modules pendant la période du stage. Le premier traite HTML, les feuilles de styles et la structuration et développement des sites web statiques selon HTML 5. La deuxième
aborde le langage de création des sites web dynamiques PHP/MySQL. Le troisième module présente le langage JavaScript avec ses concepts pour la création de l’interactivité coté client.
Pour élaborer le contenu des modules, j’ai découpé chacun d’eux en chapitre. Ensuite j’ai
divisé chaque chapitre en notion qui successive où le premier est un prérequis du deuxième. A la
fin pour chaque notion j’ai élaboré son contenu. Pour chaque notion j’ai essayé d’inclure des exemples pour illustrer le contenu présenté.
Chaque module commence par un chapitre d’introduction pour donner aux étudiants des
notions de chronologie et d’évolution des éléments traitées.
A la fin des deux premiers modules un travail qui résume les notions est donné aux étudiants
pour présenter l’utilité pratique du module et mesuré le degré d’acquisition des connaissances.
E_learning_techweb@TICE
32
Figure 18 : Structuration du formation
6. Contenu détaillé de la formation
TITRE NOTIONS Support Evaluation
Module 1 : HTML/CSS 7
Module 2 : PHP/MYSQL
Chapitre 1 : Introduction et principe de PHP
N1 : Définition N2 : Historique N3 : Intégration de code PHP
Chapitre 2 : Guide_Wampserver 2.0
N1 : Présentation Wampserver N2 : Téléchargement de Wampserver 2.0
N3 : Installation de Wampserver N4 : Utilisation de Wampserver
Chapitre 3 : Les variables
N1 : Déclaration d’une variable N2 : Typage d’une variable N3 : Variable globale
N4 : Type de variable
PDF Travaux pratiques
7 Voir l’annexe 3
Formation
Module 1 Module 2
Chapitre 1
Notion 1
Exemples
Notion 2
Exemples
Chapitre 2
Notion 1
Module 3
E_learning_techweb@TICE
33
N5 : Constants N6 : Fonctions utiles sur les variables
N7 : Variables prédéfinis N8 : Variables d’environnements N9 : Références
Chapitre 4 : Fonction d’affichage, opérateurs et structure de contrôle
N1 : Fonction d’affichage echo - print() - printf() N2 : Les opérateurs
N3 : Structures de contrôle
PDF Travaux pratiques
Chapitre 5 : Les fonctions
N1 : Déclaration d’une fonction
N2 : Les arguments de fonction N3 : Portée d’une variable
PDF Travaux
pratiques
Chapitre 6 : Les tableaux
N1 : Définition
N2 : Tableaux indicés N3 : Tableaux associatifs
N4 : Fonctions utiles pour les tableaux
PDF Travaux pratiques
Chapitre 7 : Base de données
N1 : Cours sur les bases de données Relationnelles N2 : Cours sur passage du MCD au modèle relationnelle
(MLD) N3 : Cours sur langage SQL (Structed Query Language)
PPT Travaux
pratiques
Chapitre 8 : Traitement des formulaires
N1 : Traitement du formulaire N2 : Méthode GET N3 : Méthode POST/REQUEST
PDF Travaux pratiques
Chapitre 9 : Connexion à une base de données MySQL
N1 : Base de données N2 : Connexion à la base de données
N3 : Sélection de la base de données N4 : Envoi d’une requête
N5 : Exploitation des requêtes N6 : Fermeture de la connexion et erreur
PDF Travaux pratiques
Chapitre 10 : Sessions et cookies
N1 : Cookies
N2 : Sessions PDF
Travaux
pratiques
Chapitre 11 : Les fichiers
N1 : Ouvrir et fermer le fichier
N2 : Lecture et écriture des fichiers N3 : Autres fonctions utiles pour les fichiers
Module 1 : JAVASCRIPT 8
8 Voir l’annexe 3
E_learning_techweb@TICE
34
7. Scénario pédagogique générale
Figure 19 : Scénario pédagogique générale de la formation
Session de démarrage
Formation guidée et tutorée en mode hybride
Technologie webEvaluation
Pré-test
Prise en main
des outils de travail
durant la
formation (plateforme)
Module 1: HTML/CSS
- HTML
- CSS
- HTML5
-Technique de creation des sites web statique
- Evaluation formative : TP, QCM
Module 2:
PHP/MySQL
-Présentation
des bases du langage PHP
- Modélisation du base de donneés relationnels
- Langage SQL
- Traitemet du formulaire et interrogation du base de donneés
- Evaluation formative : TP
Module 3: JAVASCRIPT
-Presentation des beses du langage Jvascript
- Modèle objet du document (DOM)
- Validation des formulaires en JavaScript.
- Pop-up en JavaScript.
- Evaluation formative : TP
Evaluation sommative
en fin du parcours :
Devoir,QCM
E_learning_techweb@TICE
35
Chapitre 3 : Médiatisation de contenu et implémentation de l’éditeur
1. Médiatisation du contenu
1.1 Choix de la plateforme
Pour mettre en œuvre notre formation à distance, on a choisit d’utiliser la plateforme Moodle
2.7. D’abord la puissance du Moodle est exprimé dans les divers évaluations comparatives avec Dokeos ,Claroline, Ganesha, Sakai et d’autres, puis par son nombre des utilisateurs à l’échelle
internationales : selon les statistiques réalisés en 2010 « 48 916 sites installés dans 211 pays qui ont été enregistrés9 » sans compter les sites non enregistrés et l’installation en mode local.
Figure 20 : Bilan de comparaison des plateformes E-Learning. Issu du : Projet @2L. Etude comparative de plates-formes
de formation à distance
9 Moodle est une plate-forme FOAD de plus en plus adoptée par le monde éducatif. Consulté sur le lien :
http://icp.ge.ch/sem/cms-spip/spip.php?article384
E_learning_techweb@TICE
36
Figure 21 : Nombre des sites moodle enregistrés issu du : http://icp.ge.ch/sem/cms-spip/IMG/gif/01-nb-total-sites.gif
Figure 22 : Les sites Moodle enregistrés par version issu du : https://moodle.net/stats/
E_learning_techweb@TICE
37
La plateforme Moodle présente plusieurs avantages :
Logiciel libre et gratuit.
Plus utilisé (universités, lycées, école, entreprises).
Figure 23 : Environnement d’installation de Moodle issu du : http://www.elearncom.fr/moodle-le-lms-open-source-qui-
monte-cles-de-reussite
Facilité d’administration et d’utilisation.
La portabilité de contenus.
Multilingue et elle permet une ouverture sur le monde.
Dispose de nombreux outils contiennent des « ressources » et des « activités » à
proposer aux apprenants).
Propose des évaluations en ligne.
Permet de regrouper tous les cours d’un établissement sur une même plateforme.
Offre un espace de travail en ligne accessible à distance. Dans les espaces de travail, on
peut créer des activités à travers le forum.
E_learning_techweb@TICE
38
1.2 Structuration des ressources pédagogiques
La plateforme Moodle offre trois formats de cours :
Format hebdomadaire : Le cours est organisé par semaine avec des dates de début et de
fin clairement identifiées. Chaque semaine contient des activités et des ressources.
Format thématique : Ce format est organisé en sections thématiques. Chacune de ces
sections comprend des activités et des ressources. L'enseignant peut personnaliser les
titres des sections.
Format informel : Ce format est organisé autour d'un forum principal, le "Forum public",
qui est affiché sur la page du cours. Il est utile dans les situations informelles qui ne sont
pas nécessairement des cours. Par exemple, il peut être utilisé comme tableau d'affichage
pour une classe ou un département.
Pour créer notre parcours de cours, on choisit d’utiliser le format thématique. Le choix de cette forme est justifié par le fait chaque module de notre formation correspond à un thème.
Les ressources pédagogiques utilisées :
Des ressources statiques : o Fichiers PDF. o Fichiers Powerpoint.
Des ressources dynamiques : o Forum des nouvelles : forum réservé aux enseignants.
o Forums : discuter autour d’un sujet entre étudiants et enseignants. o Les devoirs : des sujets proposes aux étudiants qui déposent leur devoir (1 ou
plusieurs fichiers de tout type).
o Test : des questions de choix multiples (QCM), question d'appariement, vrai ou faux, Possibilité d’évaluation et de feedback en cas de mauvaise réponse.
1.3 Rôles des utilisateurs
Administrateur Enseignant :
o Gère les inscriptions et les droits d’accès
o Crée des cours
o Propose des ressources et des activités aux étudiants
Etudiant :
o Consulte les cours
o Participe aux activités proposées par l’enseignant
Invité : observateur
E_learning_techweb@TICE
39
Figure 24 : Page de connexion pour accéder au formation
E_learning_techweb@TICE
40
Figure 25 : Structuration des modules au sein du plateforme
E_learning_techweb@TICE
41
2. Implémentation de l’éditeur
2.1 ANALYSE CONCURRENTIELLE
2.1.1 Objectif
Dans le but de remédier les problèmes cités dans l’analyse des besoins et notamment celles
liées à l’apprentissage du HTML, CSS et JavaScript, on a développé un éditeur. L’outil proposé
permet aux apprenants de tester le code au fur à mesure et voir les erreurs provoqués dans le but
d’avoir un code valide. Avant de développer cet éditeur, on a fait une étude des éditeurs HTML
CSS JavaScript disponible.
2.1.2 ECHANTILLONNAGE D’APPLICATIONS
A fin d’étudier les fonctionnalités des éditeurs disponibles, on chois it un échantillon des plus
importants :
N° Dénomination de l’éditeur Adresse web
01 codepen http://codepen.io/pen
02 jsfiddle http://jsfiddle.net/
03 JSBIN http://jsbin.com
04 Cloud9 IDE https://c9.io/
05 compilr https://compilr.com/
06 codeanywhere https://codeanywhere.net/
07 lamoulinette http://www.lamoulinette.fr/
08 htmlinstant http://www.htmlinstant.com/
09 editor.livegap http://editor.livegap.com/
10 dabblet http://dabblet.com/
Figure 26 : Quelques éditeurs HTML/CSS/JavaScript
E_learning_techweb@TICE
42
2.1.3 Applications retenus
N° Dénomination de l’éditeur Adresse web
07 lamoulinette http://www.lamoulinette.fr/
10 dabblet http://dabblet.com/
02 jsfiddle http://jsfiddle.net/
01 codepen http://codepen.io/pen
a. Lamoulinette
1. Fonctionnalités principales
Lamoulinette est un éditeur qui permet de tester votre code (HTML, CSS, JS) le plus
rapidement possible, ou alors tout simplement tester une fonction. Il se fait de mettre votre code
dans la partie gauche (partie grise), par défaut cette partie contient les principales balises d'une
page web avec un Doctype HTML 4.01 Transitional. Si vous voulez changez le doctype, vous
pouvez consulter la liste des doctypes recommandées par le W3C (Recommended Doctype
Declarations to use in your Web document).
Figure 27 : Editeur Lamoulinette
E_learning_techweb@TICE
43
b. dabblet
1. Fonctionnalités principales
Dabblet est un éditeur interactif pour tester rapidement des extraits de CSS et le code HTML.
Il est gratuit -préfix, de sorte que vous ne devrez pas ajouter des préfixes dans votre code CSS.
Vous pouvez enregistrer votre travail dans Github, l'intégrer dans d'autres sites web et les
partager avec d'autres utilisateurs. Il ne supporte actuellement que les versions modernes de
Chrome, Safari et Firefox.
Son architecture backend était une expérience en utilisant une API tiers (Github Gist) comme
un stockage de données principal. Cela a été à l'origine fait pour la rentabilité et la stabilité mais
il a prouvé plusieurs avantages (et également imposé quelques limitations).
Le code est écrit dans la moitié inférieure et le résultat visuel peut immédiatement être vu dans
la demi-partie supérieure de l'écran. La seule exception est le JavaScript, puisque dans de
nombreux cas, il serait gênant pour l'exécuter sur chaque frappe et pourrait même bloquer le
navigateur. JavaScript est exécuté quand un dabblet charges, lorsque l'utilisateur appuie sur le
bouton "Exécuter JS" (uniquement visible dans l'onglet JavaScript) ou utilise la combinaison de
touches (Ctrl + Entrée ou Cmd + Entrée). Cette disposition peut changer dans le menu des
paramètres. Les onglets en haut à droite de l'écran peuvent être utilisées pour alterner entre
création CSS, HTML et JavaScript, tout à la fois, ou une vue complète du résultat.
Figure 28 : Editeur dabblet
E_learning_techweb@TICE
44
c. Jsfiddle
JSFiddle est un éditeur qui intègre à vos tests des bibliothèques JavaScript parmi les plus
connues (Mootools, jQuery, YUI, etc.). Il est également possible d’intégrer des
fichiers CSS ou JS externes en renseignant leur URL. Une fois que vous finissez la saisie de
votre code, vous pouvez l’enregistrer (à condition d’être inscrit sur le site) et de le partager avec
d’autres utilisateur.
JSFiddle est un éditeur simple dans son utilisation. Son interface se compose principalement
de 5 zones dont 3 sont utilisées pour la rédaction de votre codes (HTML, CSS, JS). Les deux
autres zones servent, pour celle de gauche : à définir le type de document, les bibliothèques JS
que vous souhaitez charger, ainsi qu’une multitude d’autres options et ressource s qu’il est
possible d’intégrer à votre test. Pour celle de droite : voir le rendu émulé de votre code.
Figure 29 : éditeur JSFiddle
E_learning_techweb@TICE
45
d. Codepen
1. Fonctionnalités principales
CodePen est un éditeur de code HTML CSS JavaScript. Cet un outil d'éducation et de partage.
Il permet de créer des exemples d'un modèle de conception particulière pour votre projet.
CodePen contient une version PRO qui offert des fonctionnalités plus évolués comme le
mode Collab qui permet de créer des programmes collaboratif en temps réel. En plus, il donne
la possibilité à un professeur d’enseigner et de discuter avec des apprenants des codes HTML
CSS JavaScript.
Figure 30 : éditeur CodePen
E_learning_techweb@TICE
46
2.1.4 Comparatif des éditeurs
N° Nom Public cible Avantages Problèmes détectées
07 lamoulinette Etudiant,
développeur
Il permet aux utilisateurs de visualiser les résultats de son code en temps réel
Il ne détecte pas les erreurs
HTML JavaScript et CSS Il exécute le code malgré les
erreurs de syntaxe et fermeture des balises
Pour créer des scripts JavaScript, on est obligé à ajouter la balise <script>
Pour créer des fichiers CSS, on est obligé à ajouter la balise <style>
L’utilisateur est obligé de taper les balises clés pour que son code soit interprété
Si on veut changer le doctype, on doit consulter la liste des doctypes recommandées par le W3C (Recommended Doctype Declarations to use in your Web document).
10 dabblet Etudiant,
développeur
Il permet aux utilisateurs de visualiser les résultats de leur code en temps réel
L’utilisateur n’est pas obligé de taper les balises clés pour que son code soit interprété
Il détecte les erreurs JavaScript
Il ne détecte pas les erreurs HTML et CSS
Il exécute le code malgré les erreurs de syntaxe et fermeture des balises
Pour valider un document HTML, il ne corrige pas le code dans l’éditeur mais il revoit le code au validateur W3C https://validator.w3.org/check
E_learning_techweb@TICE
47
05 JS Fiddle Etudiant,
développeur
Il permet aux utilisateurs de visualiser les résultats de son code en temps réel
Il permet d’intégrer des fichiers et des bibliothèques JavaScript aux codes
Il permet de partager le code entre apprenants
Il ne détecte pas les erreurs HTML et CSS
Il exécute le code malgré les erreurs de syntaxe et fermeture des balises
09 CodePen Etudiant,
développeur
Il permet aux utilisateurs de visualiser les résultats de son code en temps réel
L’utilisateur n’est pas obligé de taper les balises clés pour que son code soit interprété
Il détecte les erreurs JavaScript
Il permet de partager le code entre apprenants et enseignants
Il ne détecte pas les erreurs HTML et CSS
Il exécute le code malgré les erreurs de syntaxe et fermeture des balises
2.2 Synthèse d’analyse concurrentielle
D’après l’étude qu’on a faite sur les éditeurs disponibles, on a remarqué que la plupart de ces
outils ne prennent pas en considération que la partie d’interprétation du code et de renvoi des
résultats du code aux utilisateurs. Prenons l’exemple d’un étudiant qui a tapé « <p> salut <p> »,
on voit bien après le test que tous les éditeurs exécutent le code sans aucun erreur alors que la
balise <p> n’est pas fermée. Ce problème crée chez l’apprenant un conflit entre ce qui a retenu en
cours et le résultat donné par ces éditeurs.
2.3 Fonctionnalité de la solution envisagé
Notre solution présentée se base essentiellement sur le principe du scanne de code HTML,
CSS et JavaScript tapé par l’apprenant pour détecter les erreurs et de retourner le feedback si le
code n’est pas valide. Parmi les fonctionnalités implémentées dans l’éditeur :
Pour illustrer les fonctionnalités d’éditeur développé, nous présentons la création d’un tableau
en HTML avec une mise en forme avec CSS et modification du background du page avec
JavaScript. Ainsi nous montrons les erreurs déclenchées en cas des problèmes de code
HTML/CSS/ JavaScript.
E_learning_techweb@TICE
48
Générer les résultats du code HTML :
Exemple : création d’un tableau sans CSS
Figure 31 : Création d’un tableau avec HTML
Exemple : Ajout de CSS
Figure 32 : Ajout de CSS
E_learning_techweb@TICE
49
Exemple : Ajout d’un background en JAVASCRIPT
Figure 33 : Ajout d’un background en JAVASCRIPT
La détection des erreurs HTML
Exemple : Erreur déclenchée en cas d’oublie de fermeture du tableau avec la balise </table>
Figure 34 : Erreurs HTML
E_learning_techweb@TICE
50
Détection des erreurs CSS
Exemple : Erreur déclenchée en cas d’oublie d’accolade d’ouverture de selecteur table
Figure 35 : Erreurs CSS
Détection des erreurs JAVASCRIPT
Exemple : Erreur déclenchée en cas de problème dans l’instruction (document et pas documen)
Figure 36 : Erreurs JAVASCRIPT
E_learning_techweb@TICE
51
GUIDE
Pour mieux aider l’apprenant dans son apprentissage, nous avons ajouté un guide pour
HTML/CSS/JAVASCRIPT.
Figure 37 : Guide JavaScript
E_learning_techweb@TICE
52
Chapitre 4 : Expérimentation du module PHP/MySQL et de l’éditeur
1. Description de l’expérimentation
Le but de l’expérimentation réalisée dans le cadre de ce projet est d’évaluer le contenu du
module PHP/MySQL ainsi le mode d’enseignement adopté.
D’après l’analyse de questionnaire d’enquête, on remarqué que la majorité des étudiants ont
l’habitude d’apprendre à l’aide des nouvelle technologies d’information et communication
(NTIC) et notamment l’usage des plateformes Elearning. Donc pour lancer la formation, on a commencé par un atelier de préparation à la formation. Dans cet atelier le professeur a
présenté l’intérêt et l’importance de la technologie web ainsi le dispositif de formation à distance et la modalité de travail. Ensuite il enchaine par un TP d’initialisation à l’utilisation de la plateforme Moodle.
Pour expérimenter le module, on a adopté une méthode hybride qui combine entre le
présentiel et le distanciel. D’abord je dépose les cours, le sujet de débat sur le forum lié à un
concept du chapitre, les TPs et leurs corrigés sur la plateforme Moodle. Ensuite les étudiants consultent les cours, TPs et leurs corrigés ainsi ils discutent entre eux sur le forum pour trouver une solution aux questions posées. Puis en présentiel, le professeur se chargera de faire une 30
minutes de rappel de cours déjà vu sur la plateforme et il essaye de proposer des exercices d’initiation aux notions des chapitres traités avant que les étudiants réalisent les TPs déposés en
plateforme. Pour évaluer les étudiants, on a envisagé une mode d’évaluation sommative à l’aide d’un
devoir de groupe (4 étudiants) déposé en semaine 6 et à rendre en semaine 12 ainsi un QCM qui traite l’ensemble des chapitres.
Parallèlement, on a voulu expérimenter l’éditeur HTML et CSS JavaScript créée dans le but
d’aider les étudiants dans leur apprentissage. Pour cela on a envisagé la transformation de cet éditeur sous forme d’un plugin moodle et l’installer sur la plateforme pour qu’on puisse avoir
des statistiques des nombres d’utilisation de cet outils.
E_learning_techweb@TICE
53
2. Structuration du module expérimenté
Annonce de la
formation
Système d’entrée:
Questionnaire sous
forme de prétest
Système de sortie :
Evaluation des acquis :
Un devoir de groupe (4 étudiants) à rendre en
fin du module + QCM
Remédiation sous
forme des exercices
d’approfondissement
Apprenants : Etudiants de la filière science mathématique
informatique S6
NON
Module suivant
OUI
Système d’apprentissage PHP/MYSQL:
Atelier de préparation à la formation
Chapitre 1 : Introduction et principe de PHP
Chapitre 2 : Guide wampserver 2
Chapitre 3 : Les variables
Chapitre 4 : Opérateurs et structure de contrôle
Chapitre 5 : Les fonctions
Chapitre 6 : Les tableaux
Chapitre 7 : Les bases de données
Chapitre 8 : Le traitement du formulaire
Chapitre 9 : Connexion à la base de données
Chapitre 10 : Les Sessions et cookies
Chapitre 11 : Les fichiers
Atelier d’évaluation
E_learning_techweb@TICE
54
3. Scénario détaillé du module expérimenté
Semaine Mode Contenu Activité d’apprentissage Modèle
pédagogique
1
présen
tiel
Atelier de
préparation à la
formation :
- Intérêt de la
technologie web (ppt) - Dispositif de
formation à distance et de modalité de travail (orale).
- Initialisation de l’utilisation de la
plateforme Moodle (TP).
Tuteur :
- Présentation des notions et concepts liés à la préparation de la formation.
- Guidage et suivi des étudiants dans les travaux
pratiques d’initialisation à l’utilisation de la plateforme Moodle.
Apprenants :
- Interaction avec
l’enseignant - Prise de note. Réalisation de TP de la
prise en main sur la plateforme Moodle.
Socio constructivisme
&
constructivisme
d
istan
ciel
Chapitre 1 :
Introduction et
principe de PHP
N1 : Définition N2 : Historique N3 : Intégration de
code PHP
Tuteur :
- Dépôt du cours sur la plateforme.
- Ajout d’un sujet de débat sur le forum lié à un concept du chapitre.
Apprenants :
- Consultation du cours
- Contribution au forum avec interaction et discussion.
Socio constructivisme
& constructivisme
2
présen
tiel
Chapitre 1 :
Introduction et
principe de PHP
N1 : Définition
N2 : Historique N3 : Intégration de
code PHP
Tuteur :
- Rappel de cours du premier chapitre (30 mn) - Réponse à la question
posée sur le forum. - Proposer des exercices
d’initiation aux notions du chapitre. Apprenants :
- Poser des questions. - Discussion entre eux et
avec le tuteur.
Socio constructivisme
& constructivisme
E_learning_techweb@TICE
55
d
istan
ciel
Chapitre 2 :
Guide wampserver 2
N1 : Présentation Wampserver N2 : Téléchargement
de Wampserver 2.0 N3 : Installation de
Wampserver N4 : Utilisation de Wampserver
Tuteur :
- Dépôt du cours du
deuxième chapitre sur la plateforme. - Ajout d’un sujet de débat
sur le forum lié à un concept du deuxième chapitre.
Apprenants :
- Réalisation du TP (premier chapitre).
- Consultation du cours (deuxième chapitre.
- Contribution au forum avec interaction et discussion.
Socio constructivisme
& constructivisme
3
présen
tiel
Chapitre 2 :
Guide wampserver
2.0
N1 : Présentation
Wampserver N2 : Téléchargement
de Wampserver 2.0 N3 : Installation de Wampserver
N4 : Utilisation de Wampserver
Tuteur :
- Rappel de cours du deuxième chapitre (30 mn). - Réponse à la question
posée sur le forum. - Proposer des exercices
d’initiation aux notions du chapitre. Apprenants :
- Poser des questions. - Discussion entre eux et avec le tuteur.
Socio
constructivisme &
constructivisme
d
istan
ciel
Chapitre 3 :
Les variables
N1 : Déclaration d’une
variable N2 : Typage d’une variable
N3 : Variable globale N4 : Type de variable
N5 : Constants N6 : Fonctions utiles sur les variables
N7 : Variables prédéfinis
N8 : Variables d’environnements N9 : Références
Tuteur :
- Dépôt du cours du troisième chapitre sur la
plateforme. - Ajout d’un sujet de débat sur le forum lié à un concept
du troisième chapitre.
Apprenants :
- Consultation du cours (troisième chapitre).
- Contribution au forum avec interaction et
discussion.
Socio
constructivisme &
constructivisme
E_learning_techweb@TICE
56
4
présen
tiel
Chapitre 3 :
Les variables
N1 : Déclaration d’une variable N2 : Typage d’une
variable N3 : Variable globale
N4 : Type de variable N5 : Constants N6 : Fonctions utiles
sur les variables N7 : Variables
prédéfinis N8 : Variables d’environnements
N9 : Références
Tuteur :
- Rappel de cours du
troisième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio
constructivisme &
constructivisme
d
istan
ciel
Chapitre 4 :
Fonction d’affichage,
opérateurs et
structure de contrôle
N1 : Fonction
d’affichage echo - print() - printf() N2 : Les opérateurs
N3 : Structures de contrôle
Tuteur :
- Dépôt du TP des variables sur la plateforme.
- Dépôt du cours du quatrième chapitre sur la
plateforme. - Ajout d’un sujet de débat sur le forum lié à un concept
du quatrième chapitre. Apprenants :
- Réalisation du TP des
variables. - Consultation du cours
(quatrième chapitre. - Contribution au forum avec interaction et
discussion.
Socio constructivisme
& constructivisme
E_learning_techweb@TICE
57
5
présen
tiel
Chapitre 4 :
Fonction d’affichage,
opérateurs et
structure de contrôle
N1 : Fonction
d’affichage echo - print() - printf()
N2 : Les opérateurs N3 : Structures de contrôle
Tuteur :
- Rappel de cours du
quatrième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio constructivisme
& constructivisme
d
istan
ciel
Chapitre 5 :
Les fonctions
N1 : Déclaration d’une fonction N2 : Les arguments de
fonction N3 : Portée d’une
variable
Tuteur :
- Dépôt du corrigé du TP
des variables sur la plateforme. - Dépôt du TP des
opérateurs et structure contrôle sur la plateforme.
- Dépôt du cours du cinquième chapitre sur la plateforme.
- Ajout d’un sujet de débat sur le forum lié à un concept
du cinquième chapitre. Apprenants :
- Consultation des corrigés
du TP sur les variables. - Réalisation du TP des
opérateurs et structure contrôle. - Consultation du cours
cinquième chapitre. - Contribution au forum
avec interaction et discussion.
Socio constructivisme
&
constructivisme
E_learning_techweb@TICE
58
6
présen
tiel
Chapitre 5 :
Les fonctions
N1 : Déclaration d’une fonction N2 : Les arguments de
fonction N3 : Portée d’une
variable
Tuteur :
- Rappel de cours du
cinquième chapitre (30 mn). - Réponse à la question
posée sur le forum. - Proposer des exercices
d’initiation aux notions du chapitre. Apprenants :
- Poser des questions. - Discussion entre eux et
avec le tuteur.
Socio constructivisme
& constructivisme
d
istan
ciel
Chapitre 6 : Les
tableaux
N1 : Définition N2 : Tableaux indicés
N3 : Tableaux associatifs
N4 : Fonctions utiles pour les tableaux
Tuteur :
- Dépôt du corrigé du TP des opérateurs et structure contrôle sur la plateforme.
- Dépôt du TP des fonctions sur la plateforme.
- Dépôt du cours du sixième chapitre sur la plateforme. - Ajout d’un sujet de débat
sur le forum lié à un concept du sixième chapitre.
Apprenants :
- Consultation des corrigés du TP sur les des
opérateurs et structure contrôle.
- Réalisation du TP des fonctions. - Consultation du cours
sixième chapitre. - Contribution au forum
avec interaction et discussion.
Socio constructivisme
& constructivisme
E_learning_techweb@TICE
59
7
présen
tiel
Chapitre 6 : Les
tableaux
N1 : Définition N2 : Tableaux indicés N3 : Tableaux
associatifs N4 : Fonctions utiles
pour les tableaux
Tuteur :
- Rappel de cours du
sixième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. - présentation du projet de groupe.
Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur. - constitution des groupes
pour projet.
Socio constructivisme
& constructivisme
d
istan
ciel
Chapitre 7 : Les
bases de données
N1 : Cours sur les bases de données Relationnelles
N2 : Cours sur passage du MCD au
modèle relationnelle (MLD) N3 : Cours sur
langage SQL (Structed Query Language)
Tuteur :
- Dépôt du corrigé du TP
des fonctions sur la plateforme. - Dépôt du TP des tableaux
sur la plateforme. - Dépôt du cours du
septième chapitre sur la plateforme. - dépôt de la consigne du
projet sur la plateforme. - Ajout d’un sujet de débat
sur le forum lié à un concept du septième chapitre. Apprenants :
- Consultation des corrigés du TP sur les fonctions.
- Réalisation du TP des tableaux. - Consultation du cours
septième chapitre. - consultation de la consigne
du projet. - Contribution au forum avec interaction et
discussion.
Socio constructivisme
&
constructivisme
E_learning_techweb@TICE
60
8
présen
tiel
Chapitre 7 : Les
bases de données
N1 : Cours sur les bases de données Relationnelles
N2 : Cours sur passage du MCD au
modèle relationnelle (MLD) N3 : Cours sur
langage SQL (Structed Query Language)
Tuteur :
- Rappel de cours du
septième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio
constructivisme &
constructivisme
d
istan
ciel
Chapitre 8 : Le
traitement du
formulaire
N1 : Traitement du formulaire
N2 : Méthode GET N3 : Méthode POST/REQUEST
Tuteur :
- Dépôt du corrigé du TP des tableaux sur la
plateforme. - Dépôt des TPs des bases
de données sur la plateforme. - Dépôt du cours du
huitième chapitre sur la plateforme. - Ajout d’un sujet de débat
sur le forum lié à un concept du huitième chapitre.
Apprenants :
- Consultation des corrigés du TP sur les tableaux.
- Réalisation des TPs des bases de données.
- Consultation du cours de huitième chapitre. - Contribution au forum
avec interaction et discussion.
Socio constructivisme
& constructivisme
E_learning_techweb@TICE
61
9
présen
tiel
Chapitre 8 : Le
traitement du
formulaire
N1 : Traitement du formulaire
N2 : Méthode GET N3 : Méthode
POST/REQUEST
Tuteur :
- Rappel de cours du
huitième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio constructivisme
& constructivisme
d
istan
ciel
Chapitre 9 :
Connexion à la base
de données
N1 : Base de données
N2 : Connexion à la base de données N3 : Sélection de la
base de données N4 : Envoi d’une
requête N5 : Exploitation des requêtes
N6 : Fermeture de la connexion et erreur
Tuteur :
- Dépôt du corrigé des TPs de base de données sur la plateforme.
- Dépôt du cours du neuvième chapitre sur la plateforme.
- Ajout d’un sujet de débat sur le forum lié à un concept
du neuvième chapitre. Apprenants :
- Consultation des corrigés
du TP de base de données
- Consultation du cours de neuvième chapitre. - Contribution au forum
avec interaction et discussion.
Socio constructivisme
&
constructivisme
E_learning_techweb@TICE
62
10
présen
tiel
Chapitre 9 :
Connexion à la base
de données
N1 : Base de données N2 : Connexion à la
base de données N3 : Sélection de la
base de données N4 : Envoi d’une requête
N5 : Exploitation des requêtes
N6 : Fermeture de la connexion et erreur
Tuteur :
- Rappel de cours du
neuvième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio constructivisme
& constructivisme
d
istan
ciel
Chapitre 10 :
Sessions et cookies
N1 : Cookies N2 : Sessions
Tuteur :
- Dépôt du TP du traitement
du formulaire et connexion à la base de données sur la plateforme.
- Dépôt du cours du dixième chapitre sur la plateforme.
- Ajout d’un sujet de débat sur le forum lié à un concept du dixième chapitre.
Apprenants :
- Réalisation du TP traitement du formulaire et
connexion à la base de données.
- Consultation du cours de dixième chapitre. - Contribution au forum
avec interaction et discussion.
Socio
constructivisme &
constructivisme
E_learning_techweb@TICE
63
11
présen
tiel
Chapitre 10 :
Sessions et cookies
N1 : Cookies N2 : Sessions
Tuteur :
- Rappel de cours du
dixième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
Socio
constructivisme &
constructivisme
dista
ncie
l
Chapitre 11 : Les
fichiers
N1 : Ouvrir et fermer le fichier
N2 : Lecture et écriture des fichiers N3 : Autres fonctions
utiles pour les fichiers
Tuteur :
- Dépôt du corrigé du TP
traitement du formulaire et connexion à la base de
données sur la plateforme. - Dépôt du TP des sessions et cookies sur la plateforme.
- Dépôt du cours du onzième chapitre sur la
plateforme. - Ajout d’un sujet de débat sur le forum lié à un concept
d’onzième chapitre. Apprenants :
- Consultation des corrigés
du TP sur le traitement du formulaire et connexion à la
base de donnée. - Réalisation des TPs des sessions et cookies.
- Consultation du cours d’onzième chapitre.
- Contribution au forum avec interaction et discussion.
E_learning_techweb@TICE
64
d
istan
ciel
Chapitre 11 : Les
fichiers
N1 : Ouvrir et fermer le fichier N2 : Lecture et
écriture des fichiers N3 : Autres fonctions
utiles pour les fichiers
Tuteur :
- Rappel de cours
d’onzième chapitre (30 mn). - Réponse à la question posée sur le forum.
- Proposer des exercices d’initiation aux notions du
chapitre. Apprenants :
- Poser des questions.
- Discussion entre eux et avec le tuteur.
d
istan
ciel
Evaluation du
module :
QCM porte sur tous les chapitres
Rendu du devoir par groupe
Tuteur :
- Dépôt d’un QCM
d’évaluation sommative. - Dépôt du corrigé du TP
des sessions et cookies sur la plateforme. Apprenants :
- Dépôt des travaux de groupe sur la plateforme
Socio constructivisme
&
constructivisme
13
présen
tiel
Evaluation du
module :
Atelier d’évaluation des travaux des groupes
Tuteur :
- Discussion du travail de
chaque groupe - Présentation de recommandation et
proposition. Apprenants
- Présentation des travaux de chaque groupe.
Socio
constructivisme
E_learning_techweb@TICE
65
Chapitre 5 : Expérimentation : Evaluation, perspectives, compétence
acquise
1. Evaluation du projet
La mise en œuvre d’évaluation du projet ne peut démarrer qu’au jusqu’au fin de la phase de
l’expérimentation, et puisque les étudiants sont en cours en phase de formation et préparation
pour les examens de la première session et celle de la deuxième session. On a décidé d’élargir la
phase d’expérimentation jusqu’au fin des examens de deuxième session en septembre.
Pour le moment on va présenter les critères qu’on va utiliser pour évaluer la formation :
Anticipation des difficultés auxquelles l'étudiant pourrait être confronté
o Aide pédagogique
o Conseils pour entrer dans le cours
Objectifs
o Objectif général : L'étudiant sait- il ce qu'il peut attendre de ce cours ?
Quel est l'objectif général qu'il est sensé atteindre au terme de ce cursus ?
o Les incontournables : Le concepteur a-t- il déterminé parmi les activités celles qu'il
faut nécessairement réaliser pour atteindre l'objectif général du cours ?
o Les objectifs spécifiques : Les objectifs spécifiques du cours sont- ils suffisamment
opérationnels ?
Permettent- ils à l’étudiant de savoir quelles sont les capacités à mettre en œuvre,
sur quels contenus, dans quels contextes ?
Méthodes
o Les activités proposées sont-elles variées ?
Cette variété sert-elle les objectifs de la formation ?
L'absence de variété se justifie-t-elle en fonction des objectifs que s'est assignés le
concepteur ?
Echanges
o Interactions informelles : Le concepteur a-t- il prévu un forum réservé aux
étudiants ?
Les apprenants ont- ils les informations utiles pour contacter leurs pairs
(trombinoscope) ?
E_learning_techweb@TICE
66
Les espaces de communication synchrone sont- ils mis à disposition des étudiants
en dehors des activités ?
o Interactions formelles prof/étudiant : Le concepteur a-t- il prévu un outil de
communication dédié aux échanges publics entre le tuteur et les apprenants ?
Outre les questions d'organisation, ces interactions portent-elles sur le produit ou
sur le processus d'apprentissage ?
Font-elles partie intégrante d'une activité ? Servent-elles les objectifs poursuivis
dans cette activité ?
o Interactions formelles étudiant/étudiant : Le concepteur a-t- il prévu un outil de
communication dédié aux interactions entre apprenants ?
Ces dernières sont-elles clairement insérées dans les scénarios pédagogiques ?
Servent-elles réellement l’apprentissage?
Evaluation
o Dimensions : L'étudiant sait- il sur quoi porte l'évaluation ? Quand a-t-elle lieu ?
Comment est-elle mise œuvre ? Quelle est sa fonction ? Qui évalue? Etc.…
o Critères : Les critères d'évaluation sont-ils clairement présentés ? Pondération :
Est-ce que la pondération de chaque élément évalué est présentée ?
Triple concordance : Harmonisation : Les objectifs spécifiques développés dans les
activités permettent- ils d'atteindre la compétence qui y est visée ? L'évaluation permet-
elle de rendre compte de la maîtrise de cette compétence
Outil
o Navigation spécifique : le concepteur utilise-t- il les ressources proposées par la
plateforme pour mettre en place une navigation claire et intuitive ?
o Charte graphique : les 4 règles de mise en page (l'alignement, le rapprochement la
répétition et le contraste) sont-elles respectées ?
o Qualité du discours : Est-ce que les contenus langagiers du cours sont rédigés dans
un niveau de langage adapté au public ? Est-ce qu'ils sont rédigés dans le respect
des règles grammaticales et orthographiques ?
o Le calendrier : est-ce que le cours propose un calendrier lié à la formation
proposée ?(chronologie des activités, deadlines de remise des travaux, de
passation des tests).
E_learning_techweb@TICE
67
o Multimédia pédagogique : l'environnement Web est une ressource parmi d'autres.
Le concepteur tire-t- il profit de ses spécificités parmi lesquelles (sans ordre de
priorité) l'indexation automatique des termes utilisés dans le cours, test avec FB
automatique, hyperliens, simulations, illustrations animées et en couleur, partage
de documents, son, vidéo ?
o webographie, bibliographie : est-ce que le cours propose une bibliographie et une
webographie ? Est-ce que ces deux éléments sont rédigés selon les normes en
vigueur (APA) ?
2. Propositions d’amélioration
En parallèle de la formation conçue dans le cadre de ce projet, nous avons développé un
éditeur du code HTML/CSS/JavaScript. L’expérimentation de cet éditeur nécessite d’avoir des
statistiques d’utilisation de cet outils pour cela nous somme obligé de le transformer sous forme
d’un plugin Moodle. Pour le moment nous sommes entrain de créer ce plugin pour améliorer
l’apprentissage des langages HTML/CSS /JavaScript d’un point et d’un autre point pour avoir des
statistiques qui sera des pistes de recherche pour la comité des chercheurs du faculté.
E_learning_techweb@TICE
68
Conclusion A travers ce rapport, j’ai présenté le travail que j’ai réalisé pendant mon stage au sein de la
faculté des sciences Oujda. L’objectif du stage était la conception du dispositif de formation
hybride en utilisant la plateforme Moodle 2.7 et le développement d’un éditeur de code (HTML,
CSS et JavaScript).
Ma mission dans ce stage m’a permet de pratiquer les compétences et connaissances que j’ai
acquis durant ma formation en master IMFL. C’est une réelle opportunité qui m’a permet de
connaitre de prés le travail d’ingénierie pédagogique et les contraintes liés à la mise en place d’un
projet de conception du dispositif de formation.
Pour concevoir la formation je me suis inspiré de la démarche de conception systématique
(Bruno De Lièvre, Christian Depover, Jean-Jacques Quintin et Sandrine Decamps) qui contient
quatre phases :
L’étude préalable
L’analyse et la structuration des contenus
L’élaboration des situations d’apprentissage
L’insertion des outils de formation dans leur contexte d’utilisation
En outre le projet a nécessité l’implémentation d’un éditeur de code pour
HTML/CSS/JavaScript sur la plateforme Moodle pour plusieurs raisons :
D’abord pour les problèmes liés au temps nécessaire pour basculer entre la plateforme où
l’étudiant suit les cours et l’emplacement où il exécute le code sur un éditeur tel que :
Notepad qui ne permet pas de voir les résultats directement.
Ensuite les problèmes analysés chez les étudiants en termes des erreurs provoqués par les
étudiants dans l’écriture de code : HTML/CSS/JavaScript et qui ne peut pas prise en
compte par la plupart des éditeurs et les navigateurs.
On a envisagé de transformer cet éditeur développé sous un plugin Moodle. Mais en vue des
problèmes techniques, on n’a pas eu le temps d’inclure cette fonctionnalité que nous souhaitons
l’implémenter dans les autres versions du projet.
Pendant ce stage, j’ai eu l’occasion d’appliquer les trois rôles d’un ingénieur pédagogique.
Commençant par la conception des modules de formation ensuite la médiatisation du projet en
créant les supports du cours et les outils tel que : le développement de l’éditeur de code, et enfin
l’intégration en assurant l’implémentation et la configuration de la plateforme moodle 2.7.
Concernant l’analyse des résultats de l’expérimentation du projet ne pourront réaliser qu’à la
fin de cette phase qui est en cours.
E_learning_techweb@TICE
69
Références bibliographiques et sitographiques
Louise Marchand, Jean Loisier, Paul-Armand Bernatchez et Violaine Page-Lamarche. 2002.
Guide des pratiques d’apprentissage en ligne auprès de la francophonie pancanadienne. Réseau
d'enseignement francophone à distance du Canada. REFAD. Consulté en Mars 2015 sur le site :
http://www.refad.ca/pdf/Guide_pratiques_apprentissage.pdf
Amiel, A., Camps, J.-F., Lutz, G., Plégat-Soutjis, F., & Tricot, A. (2002). Concevoir un dispositif
de Formation Ouverte et à Distance. Vers un modèle de cahier des charges. Rapport d’étude,
Peugeot Formation - CERFI. (25 p.). Consulté en Mars 2015 sur le site :
http://andre.tricot.pagesperso-orange.fr/Amiel-et-al_GuideMethodoElearning.pdf
Alem, N. Ait Moussa, A. Azzimani, T.,Bouamri A, Delievre B, Elmediouni A, Kaddouri E,
Maaroufi F . (septembre 2012). Plates- formes d’enseignement à distance dans l’enseignement
supérieur, modes d’appropriation et standardisation des usages Projet de recherche soutenu par
Res@TICE Rapport final –frantice.net. Numéro 5, (21 p.) Consulté en avril 2015 sur le site
:http://www.frantice.net/docannexe.php?id=609
Mohamed Kabbaj, Mohamed Talbi, M’hammed Drissi My , Said Abouhanifa. (2009).
Programme GENIE au Maroc : TICE et développement professionnel. Consulté en avril 2015 sur
le site de Mathéma TICE : http://revue.sesamath.net/spip.php?article233
Clerquin, S. Avril 2014 . La formation à distance ses spécificités pour les ingénieries. Supagro.
Consulté en Mars 2015 sur le site : http://fr.slideshare.net/SarahClerquin/ingnirie-de- la-foad/
Hotte, R. et Leroux, P. (2003). Technologies et formation à distance. STICEF 10. Recueil 2003,
Paris : ATIEF/INRP, 299. Numéro spécial sous la direction de Richard Hotte et Pascal Leroux. ,
(14 p.). Consulté en avril 2015 sur le site : http://sticef.univ- lemans.fr/num/vol2003/hotte-
00s/sticef_2003_hotte_00s.pdf
LEBRUN, M. (2011). Impacts des TIC sur la qualité des apprentissages des étudiants et le
développement professionnel des enseignants : vers une approche systémique. STICEF 18. (20
p.).Consulté en mai 2015 sur le site : http://sticef.univ- lemans.fr/num/vol2011/03r-lebrun-
tice/sticef_2011_lebrun_03rp.pdf
Peraya, D. (2001-2002). Réalisation d’un dispositif de formation entièrement ou partiellement
à distance. TECFA. Consulté en Avril 2015 sur le site : http://tecfa.unige.ch/tecfa/maltt/cofor-
1/textes/peraya03.pdf
E_learning_techweb@TICE
70
Peraya, D. (2001-2002). Staf 17 - Réalisation d’un dispositif de formation entièrement ou
partiellement à distance. Période 1 : La formation à distance. Un cadre de référence. Consulté en
Mars 2015 sur le site :
http://tecfa.unige.ch/tecfa/teaching/staf17/0102/ress/doc/p1_fad/fadcadre.pdf
Peraya, D. (2001-2002). Staf 17 - Réalisation d’un dispositif de formation entièrement ou
partiellement à distance. Période 1 : La formation à distance. Un cadre de référence. Consulté en
Mars 2015 sur le site :
http://tecfa.unige.ch/tecfa/teaching/staf17/0102/ress/doc/p1_fad/fadcadre.pdf
Service de soutient à la formation. Université Sherbrooke (Québec) CANADA, consulté en mars
2015. Disponible sur : http://www.usherbrooke.ca/ssf/tous- les-numeros/septembre-2011/le-ssf-
veille/fad-101-presque-tout-ce-que-vous-avez-toujours-voulu-savoir-sur- la- formation-a-distance/
Service de soutient à la formation. Université Sherbrooke (Québec) CANADA, Consulté en mars
2015. Disponible sur : http://www.usherbrooke.ca/ssf/tous- les-numeros/septembre-2011/le-ssf-
veille/fad-101-presque-tout-ce-que-vous-avez-toujours-voulu-savoir-sur- la- formation-a-distance/
Lamoulinette. Consulté en Avril 2015. Disponible sur :http://www.lamoulinette.fr/
Dabblet. Consulté en Avril 2015. Disponible sur : http://dabblet.com/
Jsfiddle. Consulté en Avril 2015. Disponible sur : http://jsfiddle.net/
Codepen. Consulté en Avril 2015. Disponible sur : http://codepen.io/pen
Méthodologie de conception des environnements d'apprentissage multimédia. Unité de
Technologie de l'Education. Université de Mons-Hainaut. Consulté en mars 2015. Disponible
sur : http://ute3.umh.ac.be/uticef/master/2006/m351/
Les moodleurs en parlent. Intérêt de choisir Moodle. Moodle. Consulté en Mai 2015. Disponible
sur : https://moodle.org/mod/forum/discuss.php?d=48497
Formats de cours. Moodle. Consulté en Mai 2015. Disponible sur :
https://docs.moodle.org/2x/fr/Formats_de_cours
E_learning_techweb@TICE
71
Annexes Annexe 1 : questionnaire d’enquêtement .......................................................................................72
Annexe 2 : pré-test..........................................................................................................................76
Annexe 3 : Contenu détaillé du formation .....................................................................................78
E_learning_techweb@TICE
72
Annexe 1 : questionnaire d’enquêtement
E_learning_techweb@TICE
73
E_learning_techweb@TICE
74
E_learning_techweb@TICE
75
E_learning_techweb@TICE
76
Annexe 2 : pré-test
E_learning_techweb@TICE
77
E_learning_techweb@TICE
78
Annexe 3 : Contenu détaillé de la formation
TITRE NOTIONS Support Evaluation
Module 1 : HTML/CSS
Chapitre 1 : Introduction à HTML
N1 : Définitions HTML N2 : Histoire HTML N3 : W3C
N4 : Validateur de site web N5 : versions De HTML
PDF Test : QCM
Chapitre 2 : Principe de base du HTML
N1 : Balise, attribut et élément N2 : Structure d’une page HTML
N3 : Commentaire
Test : QCM
Chapitre 3 : La mise en forme de texte
N1 : Les titres N2 : Police de texte
N3 : Les paragraphes N4 : Les séparateurs
N5 : Les styles N6 : Les caractères spéciaux
PDF Travaux pratiques
Chapitre 4 : Les listes
N1 : Les listes ordonnées N2 : Les listes non ordonnées
N3 : Listes descriptives ou Définitions
PDF Travaux pratiques
Chapitre 5 : Les liens
N1 : Définition de Lien N2 : Un lien relatif
N3 : Un lien absolu N4 : Un lien vers une ancre
N5 : Un lien vers un email
PDF Travaux pratiques
Chapitre 6 : Les tableaux
E_learning_techweb@TICE
79
N1 : Tableau simple N2 : Fusionner les cellules
N3 : Tableaux complexes
PDF Travaux pratiques
Chapitre 7 : Les frames
N1 : FRAMSET N2 : FRAME
N3 : Imbrication des frames N4 : Les liens dans les frames
PDF Travaux pratiques
Chapitre 8 : Les formulaires
N1 : Déclaration d’un formulaire N2 : Les éléments du formulaire : input
N3 : Les éléments du formulaire : label N4 : Les éléments du formulaire : TEXTAERA N5 : Les éléments du formulaire : SELECT
N6 : Les éléments du formulaire : fieldset et legend
PDF Travaux pratiques
Chapitre 9 : Les médias
N1 : Les formats d'image
N2 : Insérer une image en HTML N3 : Insérer un audio N4 : Insérer un objet multimédia
PDF Travaux
pratiques
Chapitre 10 : Les feuilles de style CSS
N1: Feuilles de style CSS N2 : Placer les règles CSS
N3 : Les règles en CSS N4 : Arrière-plans et images de fond N5 : Formatage de texte
N6 : Les listes en CSS N7 : Les bordures
N8 : Les boîtes : remplissage et marges N9 : Positionnement des boites
PDF Travaux pratiques
Chapitre 11 : Les nouveautés en HTML 5
N1 : Structuration avec div
N2 : Structuration de la page en HTML5 N3 : Audio
N4 : Vidéo
PDF Travaux
pratiques
Module 3 : PHP/MYSQL
Chapitre 1 : Introduction et principe de PHP
N1 : Définition de JavaScript, historique, intérêts et inconvénients
N2 : Base du langage JavaScript N3 : Les structures de contrôle
N4 : Les fonctions et les événements
N5 : les fonctions mathématiques prédéfinies N6 : Modèle objet du document (DOM)
N7 : Les formulaires en JavaScript N8 : Les pop-up en JavaScript
PPT Travaux
pratiques
E_learning_techweb@TICE
80
N9 : Traitements de chaine de caractère en JavaScript