Nombre de séances : 10 h (5 * 2 h)
Groupe de 16-17 élèves
Pré-requis : Aucun
Enseignements : SI6 – Réalisation d’une Interface (IHM) , ou en PPE (Projets Personnalisés Encadrés)- Projet de fourniture d’un service avec auto-formation sur un besoin technologique.
Objectifs savoir-faire :
- réalisation d’un site web statique grâce aux langages de structuration (HTML 5) et de mise en forme des données (CSS 3).
- utilisation des outils de développement (notepad, mozilla-firebug) et des fonctionnalités liées au développement web.
- auto-formation.
Objectifs de ce choix pédagogique :
- Gagner en autonomie.
- Gagner du recul entre la découverte de la théorie et la pratique.
- Dégager plus de temps scolaire pour la pratique.
- Pouvoir disposer de plus de temps enseignant pour accompagner davantage certains élèves bloqués (source principale de retard dans les progressions individuelles).
Outils :
- Notepad ++
- Mozilla firebug
Documents mis à disposition des élèves
- La documentation sur l’organisation pour laquelle les travaux seront réalisés.
- En libre accès pour tous les élèves (mais surtout pour ceux qui ne disposeraient pas de connexion internet suffisante)
- La version HTML du MOOC
- Les fichiers vidéo du MOOC
Production scolaire à réaliser : un site web statique sur une organisation, utilisation d’HTML 5 et CSS 3 et validation à partir du cahier des charges. Sa finalisation se fait en dehors du temps scolaire.
Organisation
- Pour la production finale, les élèves sont en binôme (exceptionnellement en trinôme). Ils sont encouragés à échanger pour s’aider et à consulter les documentations à leur disposition si besoin.
- La veille de chaque séance, les élèves doivent visionner un ou plusieurs chapitres du cours Openclass Room
Les séances :
Première séance :
- A partir d’une documentation présentant une organisation et un cahier des charges simplifié, il est identifié le besoin de créer/approfondir un site web public. Les informations à rédiger sont fournies par ce biais.
- Mise en avant de la nécessité qu’a un informaticien de devoir se former tout au long de sa carrière sur les nouvelles technologies ou celles en évolution.
- Inscription à la plateforme de formation OpenClassRoom et au MOOC de Mathieu Nébra : « Apprenez à créer votre site web avec HTML5 et CSS3 ».
- Visualisation en classe de la première séance.
- Réalisation d’exercices reprenant la séance.
- Indication des chapitres à visualiser pour la semaine suivante.
Pour les quatre séances suivantes :
- Démarche globale :
- Pendant 10-15 minutes : débriefing des séances à visualiser pour ce jour.
- Balises et concepts vus dans la vidéo avec synthèse au tableau.
- Application sur le site de l’organisation.
- Indication des séances à visualiser pour la semaine suivante.
- Progression entre les séances (les titres sont ceux du MOOC) :
- Séance 1 : Chapitre 1 : Les bases de HTML 5.
- Séance 2 : Chapitre 1
- Séance 3 : Chapitre 2 : Mise en forme avec CSS.
- Séance 4 : Chapitre 2 :
- Séance 5 : Chapitre 3 : Mise en page du site.
Bilan de l’expérimentation :
Pour l’enseignant :
- Les productions finales sont souvent assez bien abouties.
- 15 groupes sur 17 ont fourni un résultat final satisfaisant, les 2 groupes restants sont composés d’élèves en difficulté également dans d’autres enseignements…
- Une fois le débriefing fini, les séquences sont plutôt mineures pour l’enseignant.
- Dans la phase d’application, les questions des élèves sont souvent d’ordre technique, pour dépasser la théorie.
Pour les élèves :
- Élèves déconcertés au départ, puis finalement enthousiastes : regarder des vidéos sur internet est bien moins fastidieux que d’autres exigences scolaires.
- Certains élèves (1/5) ont préféré lire la version papier (plus ou moins en diagonale) jugeant les vidéos trop longues, d’autres (1/6) se sont visiblement contentés du débriefing en classe.
- Les meilleurs éléments ont complété avec d’autres sources d’information.
- Les conséquences sont moindres pour les élèves manquants une séance (le cours est accessible depuis la maison).