BTS SIO : Classe inversée pour l’initiation au HTML et au CSS

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 :

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

Laisser un commentaire