rapport pfe kossir taoufik imfl.pdf

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.


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


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


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


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.


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


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

https://ccdcoe.org/sites/default/files/strategy/Maroc_CyberSecurity_2013_FR.pdf

https://hal.archives-ouvertes.fr/edutice-00000798/document

https://hal.archives-ouvertes.fr/edutice-00000798/document


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.


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.


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


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.

http://fr.slideshare.net/SarahClerquin/ingnirie-de-la-foad/


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)


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

https://ccdcoe.org/sites/default/files/strategy/Maroc_CyberSecurity_2013_FR.pdf


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.


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


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.


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


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


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.


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.


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


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


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


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.

http://etaalime.com/


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é.


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.


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


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.


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.


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.


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

PDF

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

PDF

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


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


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


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


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


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

PDF

Module 1 : JAVASCRIPT 8

8 Voir l’annexe 3


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


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

http://icp.ge.ch/sem/cms-spip/spip.php?article384


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/


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.


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


39

Figure 24 : Page de connexion pour accéder au formation


40

Figure 25 : Structuration des modules au sein du plateforme


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

http://codepen.io/pen

http://jsfiddle.net/

http://jsbin.com/

https://c9.io/

https://compilr.com/

https://codeanywhere.net/

http://www.lamoulinette.fr/

http://www.htmlinstant.com/

http://editor.livegap.com/

http://dabblet.com/


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


http://dabblet.com/



http://www.w3.org/QA/2002/04/valid-dtd-list.html




43

b. dabblet


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


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


45

d. Codepen


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


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





https://validator.w3.org/check


47

05 JS Fiddle Etudiant,

développeur


Il permet d’intégrer des fichiers et des bibliothèques JavaScript aux codes

Il permet de partager le code entre apprenants



09 CodePen Etudiant,

développeur


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



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.


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


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


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


51

GUIDE

Pour mieux aider l’apprenant dans son apprentissage, nous avons ajouté un guide pour

HTML/CSS/JAVASCRIPT.

Figure 37 : Guide JavaScript


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.


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 2 : Guide wampserver 2

Chapitre 3 : Les variables

Chapitre 4 : Opérateurs et structure de contrôle

Chapitre 5 : Les fonctions


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


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.


& 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.


& constructivisme


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.



& 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



- 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


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


du quatrième chapitre. Apprenants :

- Réalisation du TP des

variables. - Consultation du cours

(quatrième chapitre. - Contribution au forum avec interaction et

discussion.


& constructivisme


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 :


quatrième chapitre (30 mn). - Réponse à la question posée sur le forum.






& 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.


&

constructivisme


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 :


cinquième chapitre (30 mn). - Réponse à la question



- Poser des questions. - Discussion entre eux et

avec le tuteur.


& 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



& constructivisme


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 :


sixième chapitre (30 mn). - Réponse à la question posée sur le forum.


chapitre. - présentation du projet de groupe.

Apprenants :


- Discussion entre eux et avec le tuteur. - constitution des groupes

pour projet.


& 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 :


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.


&

constructivisme


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 :


septième chapitre (30 mn). - Réponse à la question posée sur le forum.





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



& constructivisme


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 :


huitième chapitre (30 mn). - Réponse à la question posée sur le forum.






& 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 :


du TP de base de données

- Consultation du cours de neuvième chapitre. - Contribution au forum



&

constructivisme


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 :


neuvième chapitre (30 mn). - Réponse à la question posée sur le forum.






& 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


Socio

constructivisme &

constructivisme


63

11

présen

tiel

Chapitre 10 :

Sessions et cookies

N1 : Cookies N2 : Sessions

Tuteur :


dixième chapitre (30 mn). - Réponse à la question posée sur le forum.





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 :


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


d’onzième chapitre. Apprenants :


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.



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.





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


&

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


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) ?


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).


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é.


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.


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

http://www.refad.ca/pdf/Guide_pratiques_apprentissage.pdf

http://andre.tricot.pagesperso-orange.fr/Amiel-et-al_GuideMethodoElearning.pdf

http://www.frantice.net/docannexe.php?id=609

http://revue.sesamath.net/spip.php?article233

http://fr.slideshare.net/SarahClerquin/ingnirie-de-la-foad/

http://www.sticef.org/

http://sticef.univ-lemans.fr/num/vol2003/hotte-00s/sticef_2003_hotte_00s.pdf

http://sticef.univ-lemans.fr/num/vol2003/hotte-00s/sticef_2003_hotte_00s.pdf

http://www.sticef.org/

http://sticef.univ-lemans.fr/num/vol2011/03r-lebrun-tice/sticef_2011_lebrun_03rp.pdf

http://sticef.univ-lemans.fr/num/vol2011/03r-lebrun-tice/sticef_2011_lebrun_03rp.pdf

http://tecfa.unige.ch/tecfa/maltt/cofor-1/textes/peraya03.pdf

http://tecfa.unige.ch/tecfa/maltt/cofor-1/textes/peraya03.pdf


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 :


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



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/





http://dabblet.com/



http://ute3.umh.ac.be/uticef/master/2006/m351/

https://moodle.org/mod/forum/discuss.php?d=48497

https://docs.moodle.org/2x/fr/Formats_de_cours


71

Annexes Annexe 1 : questionnaire d’enquêtement .......................................................................................72

Annexe 2 : pré-test..........................................................................................................................76

Annexe 3 : Contenu détaillé du formation .....................................................................................78


72

Annexe 1 : questionnaire d’enquêtement


73


74


75


76

Annexe 2 : pré-test


77


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

PDF

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


Chapitre 4 : Les listes

N1 : Les listes ordonnées N2 : Les listes non ordonnées

N3 : Listes descriptives ou Définitions


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




79

N1 : Tableau simple N2 : Fusionner les cellules

N3 : Tableaux complexes


Chapitre 7 : Les frames

N1 : FRAMSET N2 : FRAME

N3 : Imbrication des frames N4 : Les liens dans les frames


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


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


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


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


80

N9 : Traitements de chaine de caractère en JavaScript

rapport pfe kossir taoufik imfl.pdf

Documents