EMI 5ème (2023/2024) Un escape game pour s’initier au langage de balisage HTML

Tout au long des 3 premières séances, j’évoque assez régulièrement le langage de balisage HTML, et j’avais envie de proposer à mes élèves une activité pratique de manipulation autour de ce sujet. On se rapproche des programmes de technologie, à priori plutôt en 3ème, mais je n’ai pas la prétention d’en faire des spécialistes. Il s’agit davantage de les initier à ce langage, de manière à ce qu’ils comprennent la réalité « matérielle » derrière leur écran. J’ai longtemps réfléchi à la manière de mettre en place cette activité pratique, en classe entière, et j’ai décidé de tenter l’approche « escape game« . En partant sur quelque chose de simple, réalisable, rapide. Je ne l’ai pas encore tester (ça va venir). Je sais que mon collègue de technologie aborde d’autres types de langage, plutôt de programmation, je n’empiète donc pas sur son terrain. Voilà donc ce qui est prévu, ainsi que les liens vers l’ensemble des documents.

Durée: 55 minutes

Lieu: CDI

Modalités: classe entière (30/31 élèves). 6 équipes de 5 ou 6 élèves (constituées à l’avance par degré de difficulté) ou au hasard (pourquoi ne pas s’inspirer de la proposition de Clairement doc « Tirez une carte et asseyez-vous!« )

Matériel nécessaire: ensemble des documents imprimables (voir en fin de billet) / 1 PC connecté à Internet et relié à un vidéo projecteur (l’ordinateur central). Prévoir un logiciel de navigation sur cet ordinateur ainsi qu’un éditeur de texte type bloc-note à minima ou Notepad (c’est mieux) sur Windows, ou text edit à minima sur Mac.

But du jeu: chaque équipe doit reconstituer une ligne du code HTML permettant de résoudre une énigme qui leur permettra d’avoir accès au coffre contenant les brochures de cours perdues. (Pas le meilleur appât, mais je n’avais pas mieux en stock. Peut-être que je vais y ajouter un paquet de bonbons…)

Déroulement

  • Chaque équipe prend connaissance de son kit de départ: une enveloppe contenant la carte « A vous de jouer », les cartes indices, et la ligne de code en morceaux à reconstituer. Les membres de l’équipe prennent connaissance de leur mission, consultent la ou les cartes indices (voir en fin de billet la répartition du matériel par équipe), et reconstituent la ligne de code HTML. Si le résultat leur semble bon, ils se dirigent vers l’ordinateur central et saisissent leur ligne de code, au bon endroit (chaque numéro d’équipe correspond à la ligne de code. Exemple: équipe 1 = ligne 1).

  • Une fois que toutes les équipes ont saisi leur ligne de code, le maitre du jeu (ici l’enseignante documentaliste) enregistre le document et l’ouvre dans un navigateur.

Les différents éléments de la charade saisis sur Notepad
  • Il faut que l’affichage des différentes lignes de code HTML dans le navigateur corresponde au modèle final et surtout que le lien de l’équipe 6 soit cliquable, car il dirige vers la page permettant de saisir le résultat de la charade. Avant de cliquer, chaque équipe réfléchit à une proposition de résolution de la charade.

Affichage attendu dans le navigateur
  • Dans chaque équipe, un élève est désigné pour présenter devant la classe leur proposition de résolution de la charade. Si toutes les équipes ont un résultat similaire, la solution est saisie dans le formulaire prévu à cette effet sur le genial.ly. Si non, il faudra procéder à un vote / débat pour se mettre d’accord.

  • Une fois la solution correcte de la charade saisie, un emplacement et un code sont dévoilés. Les élèves peuvent ainsi trouver le coffre et l’ouvrir afin de retrouver les brochures de cours dont ils auront besoin pour la prochaine évaluation. (et les bonbons!!!)

Documents et fichiers à télécharger

Lien vers les différentes cartes à plastifier (objectif du jeu, cartes indices, étiquettes équipes) sur Canva (lien de consultation. Je peux vous envoyer le lien de modification sur demande 🙂 )

Répartition du matériel par équipe

  • ÉQUIPES 1 et 5: une carte « A vous de jouer« , une carte indice « <h1> </h1>« , éléments découpés de la ligne de code « 1 » ou « 5 »
  • ÉQUIPE 2, 3 et 4: une carte « A vous de jouer« , une carte indice « <h1> </h1>« , une carte indice « <em> </em>« , éléments découpés de la ligne de code « 2 », « 3 » ou « 4 »
  • ÉQUIPE 6: une carte « A vous de jouer« , une carte indice « <p> <p>« , une carte indice « insertion lien hypertexte« , éléments découpés de la ligne de code « 6 »

Et voilà, il ne reste plus qu’à leur proposer à la rentrée. Si ça se trouve, ça va faire un gros flop. Mais à tester tout de même! Si vous voulez tester, réadapter, n’hésitez pas. Et si j’ai oublié de partager quoique ce soit pour vous permette sa mise en place et sa modification, laisser moi un petit message ici!

Bonus

Pour les élèves qui voudraient en savoir plus et aller plus loin dans le langage HTML, j’ai compilé les 5 vidéos Lumni consacré à la création d’un site Web (5 épisodes, série « 3 minutes pour coder »)

Présentation de l’enseignement d’EMI 5ème (Collège, 2023/2024)

La présentation de cet enseignement, tout du moins de ce cours en plus dans l’emploi du temps des 5ème, est une séance à part entière, qui permet une introduction en douceur auprès des élèves.

Depuis quelques années, les créneaux d’EMI sont fixés depuis le début de l’année dans l’emploi du temps des élèves. Comme pour les autres professeurs. C’est aussi la 5ème année que cet enseignement est en place. Les élèves qui montent en 5ème savent qu’ils auront des cours d’EMI avec moi. C’est quelque chose d’acté au collège (pour combien de temps?), autant auprès des équipes (administration, pédagogique et éducative, agents du département…), que des élèves et des parents. Il a fallu du temps, mais aujourd’hui, ça roule, sans encombres. C’est très très très confortable. J’ai beaucoup de chance de pouvoir exercer mon métier comme je l’entends, sans obstacles ou assez peu. J’en profite, tant que je peux.

Dans un premier temps, j’explique quand même aux élèves que cette enseignement n’est pas systématique dans tous les collèges, que ça reste quelque chose de très spécifique à notre établissement (bien entendu je ne rentre pas dans les détails). C’est une chance pour moi, mais aussi pour eux. J’ai régulièrement des anciens élèves qui me remercient, notamment quand ils ont choisi l’enseignement SNT au lycée.

Nous passons quelques instants à préciser les modalités de cet enseignement: une heure par semaine. En classe entière. Au CDI. Il faut avoir un porte-vue (Ce porte-vue apparait sur la liste de fourniture communiquée en amont aux familles). Je reviens sur les modalités d’évaluation.

Très vite, ils posent la question: ça veut dire quoi « EMI »? Après le bla bla de présentation, j’inscris ces trois lettres au tableau et leur demande ce qu’elles signifient. Globalement, ils trouvent assez vite. Même si le « enseignement moral » revient souvent, ou le « informatique » pour I.

Je leur explique qu’il s’agit principalement d’un enseignement transversal, susceptible d’être abordé dans de nombreuses disciplines (toi même, prof doc, tu sais que ce discours n’est pas tout à fait juste et systématique). Que ce que nous verrons dans le cadre de cet enseignement de l’EMI en 5ème, relève de choix pédagogiques de ma part, et de la très grande liberté pédagogique qu’est la mienne. Et des notions / points qui n’apparaissent pas dans les programmes disciplinaires.

Je choisis volontairement de mettre l’accent sur le M de média, en leur posant une question « Qu’est-ce qu’un média pour vous? Pouvez-vous m’en citer en exemple? ». Ils me répondent souvent en citant des titres de médias audiovisuels (BFM, France Info, La dépêche…), d’exemples de type « là où on s’informe de ce qui se passe dans le monde »… Le but, en fonction de chaque groupe, est de les amener à citer les grandes catégories de médias en fonction des exemples cités: la presse écrite, la radio, la télévision et Internet.

Une fois listé, je trace une ligne du temps et je leur demande de les classer par ordre chronologique. Ils y parviennent aisément en général. Puis je leur demande grâce à quelle invention technique/ technologique ces différents médias ont pu voir le jour. Il est question de les amener à associer le différents médias de masse aux inventions qui leur correspondent:

  • Presse écrite -> Invention de la presse à imprimerie
  • Radio -> invention de l’onde radio
  • Télévision -> invention du cinématographe (ils citent assez fréquemment les frères Lumière!)
  • Internet -> l’informatique et les premiers micro-ordinateurs.

C’est ainsi que peux faire la transition avec les premières séances à venir: comprendre le contexte technologique d’apparition d’Internet et du Web. Je leur distribue alors la fiche progression (téléchargeable ci-dessous) et nous la lisons à voix haute.

J’en profite, en fin de séance, pour leur présenter les outils que j’utilise, notamment sur l’ENT du collège. La fonction cahier de texte et le classeur pédagogique (que je peux relier au cahier de texte numérique, et qui me permet de leur mettre à disposition les contenus du cours -documents distribués en classe, ressources projetées, ressources complémentaires-). Pour ce faire, je demande à un élève de se connecter à son compte afin de projeter la vue « élève »

La vue « prof » du classeur pédagogique

En fin de séance, nous notons ce qu’il y a à faire pour la semaine suivante:

  • Réaliser la page de garde du porte-vue d’EMI
  • Faire signer la fiche progression par leurs responsables légaux (En espérant qu’elle soit lue, c’est pour moi un moyen de communiquer avec eux à propos de ce qui sera fait en EMI avec leurs enfants)
Exemple de page de garde réalisée par un élève.

Progression EMI 5ème 2023/2024

Pour la cinquième rentrée consécutive au sein de mon établissement, les élèves de toutes les classes de 5ème ont vu apparaitre une case EMI dans leur emploi du temps. Avec quelques changements par rapport aux années précédentes. (Je me rends compte que ma dernière publication remonte à 2022. Je concoure aussi dans la catégorie (très assumée) des blogueur.e.s prof doc en carton.)

Le premier, et pas des moindre, est qu’après de 3 ans d’enseignement de l’EMI en 5ème et en 3ème, je ne m’adresse plus qu’aux seules classes de 5ème. Ce fût un choix difficile à faire, mais nous avons passé la barre des 800 élèves (on doit être à 840 je crois), et que nous n’avons essuyé que des refus à nos demandes de création d’un demi-poste de prof doc supplémentaire (je ne dois pas être la seule). Même si je prenais depuis quelques temps les classes entières pour réduire les créneaux réservés à ces heures d’enseignement au CDI, il faut savoir dire stop. Des élèves de 3ème sont venus, surpris, à la rentrée, me demander pourquoi ils n’avaient pas EMI. C’est mignon, non?

Enfin, je ne prends plus les classes en quinzaine, mais toutes les semaines. Je trouve cette fréquence bien plus agréable: un meilleur engagement des élèves, un suivi des apprentissages plus efficace, et un volume horaire plus conséquent permettant de leur proposer une progression plus complète et plus approfondie.

Je vous propose donc ici ma progression annuelle remaniée au regard de ces quelques évolutions. Vous pouvez retrouver la progression initiale de la rentrée 2019 ici) Rien d’immuable en cours d’année, mes élèves le savent. Je peux apporter des changements / ajustements en cours d’année. Mais ce que je vous partage aujourd’hui est une base relativement stabilisée, qui ne devrait finalement peu évoluer. Ou à la marge.

Quelques éléments de contexte organisationnel et matériel. Je prends donc les classes « entières » . Il y a 30/31 élèves dans les classes de 5ème cette année. 6 classes de 5ème générales et une classe de 5ème SEGPA à effectif réduit. C’est beaucoup. Mais gérable, même si, comme mes collègues, il faut déployer beaucoup d’énergie pour trouver des astuces de mise au travail, de retour au calme etc… Les séances ont lieu au CDI. Il est quand même très spacieux, donc je peux accueillir ce petit monde sans problème. Exceptionnellement, je peux délocaliser dans une salle de classe « lambda ». En terme de matériel, je demande un porte-vue aux élèves, et je profite aussi qu’ils aient, dans la liste des fournitures d’autres disciplines, besoin d’une ardoise type velleda et de feutres / crayons pour écrire dessus. Et du matériel de base (agenda, trousse..)

Concernant l’évaluation, elle est notée et apparaît dans le relevé et les bulletins de notes trimestriels. J’évalue également des compétences du socle commun, de référentiels (EMI) et de compétences numériques (celles qui apparaissent sur Pronote lorsque je créé une évaluation). Il peut s’agir d’évaluations portant sur un travail à faire à la maison (allant d’un texte à trou à compléter, une frise chronologique…), à des exercices courts réalisés en classe (question portant sur un / des document(s)…), d’évaluations flash en début de cours portant sur la séance précédente, des évaluations en classe portant sur un ensemble de séances ou sur une séquence / partie entière, ou sur des projets de RI réalisés en classe ou à la maison. Ça prend du temps, mais… ce travail d’évaluation, sur du « long » terme est vraiment utile pour vérifier si les connaissances et compétences sont acquises, si je dois réajuster et/ou adapter. Et, on ne va pas se mentir, la note pour l’élève, c’est une forme de carotte…

Je donne des indications de durée qui sont encore prévisionnelles (en italique). Elles ne le seront plus au fur et à mesure de l’année, une fois réalisées. De la même façon, en fonction du temps dont je dispose (entre tout), je ferai des renvois vers les billets présentant les différentes séances. On en retrouve certaines déjà par ici, mais elles vont surement évoluer dans l’année, notamment pour celles qui étaient initialement proposées aux 3ème.

Introduction

Séance 1: Aux origines d’internet et du Web (2h)

Précédemment Internet et le Web, une histoire récente (2019)

  • Comprendre le contexte technologique accompagnant l’émergence d’Internet et du Web
  • Qui en sont les précurseurs / inventeurs?

Séance 2: Internet et le Web (1h / 1h30)

  • Qu’est-ce qu’Internet? Qu’est-ce que le Web?
  • Comprendre le fonctionnement général d’Internet et du Web

Séance 3: question de vocabulaire (2h/2h30)

Précédemment Accéder à Internet et au Web dans le bon ordre et avec le bon vocabulaire (2019)

  • Comment accède-t-on à Internet et au Web? Avec quels outils?
    • Internet Vintage: étude d’un extrait du roman Profil de Jay Asher (2012)
    • Précisions de vocabulaire
  • Les trois niveaux du web (1h)

Activité pratique (à confirmer)

Évaluation #1

Document(s) disponibles ici (mot de passe sur demande via le formulaire de contact ou ailleurs (on se sait jamais 😉 )

Séance 4: Fonctionnement d’un moteur de recherche (2h)

Précédemment EMI 3ème La recherche d’information sur le Web: les moteurs de recherche(2021)

  • Appréhender la diversité des moteurs de recherche.
  • Comprendre le fonctionnement général d’un moteur de recherche et le rôle des 3 modules qui le composent (exploration, indexation, interrogation)

Séance 5: l’exemple de Google. D’un garage à la Silicon Valley (2h)

  • Situer chronologiquement l’apparition du moteur de recherche Google et de ses principaux services.
  • Comprendre l’évolution du modèle économique de Google.
  • Situer géographiquement le siège social de Google (Silicon Valley)

Séance 6: les outils numériques, ils appartiennent à qui? (3h)

Précédemment EMI 5ème Séquence 1, séance 4: A qui appartiennent les objets du numérique(2020)

  • Situer géographiquement les « nationalités » des plus grosses entreprises du numérique
  • Différencier des logiciels et applications libres VS propriétaires

Séance 7: le cas Wikipédia (2h)

Précédemment EMI 5ème Séquence 2 séance 1 -Le Web, un espace de partage de connaissances: l’exemple de Wikipédia- (2020)

  • Comprendre comment fonctionne l’encyclopédie collaborative Wikipédia
  • Connaître les principes fondateurs de Wikipédia

Séance 8: Impact environnemental du numérique (2h)

Précédemment EMI 5ème Séquence 1, séance 5: L’impact environnemental du numérique (2020)

  • C’est quoi la pollution numérique?
  • Comprendre l’impact des activités numériques (production, usages, recyclage…) sur l’environnement

Séance 9: traces numériques, données personnelles au regard des industries vidéoludiques (4h)

  • Les jeux vidéos: évolution et diversité (2h): Comment ont évolué les modèles économiques du jeu vidéo?
  • Le modèle économique des données personnelles (2h) : économie de l’attention, modèle free-to-play… Quelles valeurs pour ton données personnelles?

Séance 10: les nouvelles formes publicitaires (2h)

  • Pour une petite histoire de la publicité
  • Le marketing d’influence, une nouvelles forme publicitaire?

Séance 11: le monde du travail et le numérique (2h)

Précédemment EMI 5ème Séquence 2, séance 3: les (nouveaux) métiers du Web(2020)

  • Les nouveaux métiers du numérique: tous égaux?
  • découvrir et interroger le concept de digital labor

Séance 12: Intelligences artificielles (2h)

  • Les différentes IA (génération d’images, conversationnelles…)
  • Interroger la place des IA dans notre société