Le vaisseau intergalactique Enterfile vient juste de rentrer de mission sur le système solaire « CSS-3 ». Sitôt remis de la décélération sub-luminy-que, l’équipage mené par Kim Bernard-Li vient au rapport, en relatant l’exploration de la lointaine planète « HTML-5 ». De fait, ils ont trouvé sur cette planète un antique hologramme runique, portant ce texte :

Pendant que les spécialistes de la civilisation htmlienne se perdent en conjectures sur le sens de ce texte (sa sémantique), nous allons explorer dans les onglets suivants sa syntaxe, à l’aide d’une pile de cartes que voici :

Voici le code source (en html) du fichier mystérieux :

<p><b>b<a>a</a></b><b>b<a>a<u>u</u></a></b></p>
<p><b>b<u>u</u></b><b>b<u>u</u><a>a</a></b></p>
<p><b>b<i>i</i></b><b>b<i>i</i><u>u</u></b></p>
<p><a>a<u>u</u><b>b</b><i>i</i></a></p>

Cette syntaxe ne pose aucun problème aux élèves qui sont habitués (par les notes de cours) à « programmer » en html :

• <a> est une balise ouvrante « a »,
• <b> est une balise ouvrante « b »,
• <i> est une balise ouvrante « i »,
• <p> est une balise ouvrante « p »,
• et <u> est une balise ouvrante « u ».

De même,

• </a> est une balise fermante « a »,
• </b> est une balise fermante « b »,
• </i> est une balise fermante « i »,
• </p> est une balise fermante « p »,
• et </u> est une balise fermante « u ».

Cela permet enfin d’expliquer la règle du jeu, basé sur une réserve de cartes comme celles présentées dans l’onglet précédent :

• Initialement la pile de cartes est vide.
• Chaque fois que l’on rencontre une balise ouvrante, on pose la carte correspondante en haut de la pile.
• Chaque fois que l’on rencontre une balise fermante, en enlève du sommet de la pile, la carte correspondante pour la remettre dans la réserve.
• On continue jusqu’à ce qu’on arrive à la fin du fichier html, ou que survienne un problème.

Dans tous les cas, quand le jeu s’arrête, le groupe d’élèves fait un rapport sur la situation.

Dans les onglets suivants, on montre le jeu sur le fichier mystérieux, ligne par ligne.

Voici, pour rappel, la première ligne du document mystérieux :

<p><b>b<a>a</a></b><b>b<a>a<u>u</u></a></b></p>

• Elle commence par une balise ouvrante « p ». On commence donc par placer une carte portant le « p » en haut de la pile de cartes. Comme la pile de cartes est actuellement vide, elle naît de ce fait, et ressemble pour l’instant à ceci :

• La deuxième balise est ouvrante aussi, et porte un « b ». On pose alors une carte « b » sur la carte « p » :

• La troisième balise est ouvrante aussi, c’est un « a ». La pile ressemble alors à ceci :

• La balise suivante est fermante : on retire donc la carte du dessus, qui, fort heureusement, est un « a ». La pile revient donc à cet état :

• La balise suivante étant elle aussi fermante, on retire la carte « b » de la pile qui se réduit encore :

• Mais la balise suivante (elle aussi portant un « b ») étant ouvrante, la carte « b » est aussitôt remise en haut de la pile de cartes :

• Et la balise suivante étant un « a » ouvrant, un remet aussi la carte « a » au sommet de la pile :

• La balise suivante est elle aussi ouvrante (un « u »), ce qui amène à placer une nouvelle carte en haut de la pile de cartes :

• Mais cette carte est aussitôt retirée à nouveau par la balise suivante qui est un « u » fermant :

• Et comme la balise suivante est un « a » fermant, la carte « a » est à son tour retirée du jeu :

• La balise suivante étant un « b » fermant, on retire ensuite la carte « b » du dessus de la pile :

• Enfin, la dernière balise de cette ligne est un « p » fermant ce qui amène à enlever la dernière carte de la pile, vidant celle-ci. La ligne 1 se termine par une pile vide. La suite de l’aventure est décrite dans les onglets suivants.

La hauteur de la pile (nombre de cartes qu’elle a contenues) est 0123212343210 pour la ligne 1.

Voici, pour rappel, le source de la seconde ligne du document mystérieux :

<p><b>b<u>u</u></b><b>b<u>u</u><a>a</a></b></p>

• Elle commence par une balise ouvrante ce qui amène à replacer la carte « p » (voir onglet précédent) sur une pile qui était vide :

• La balise suivante est un « b » ouvrant :

• Mais si la balise suivante est un « u » ouvrant, elle est immédiatement suivie d’un « u » fermant. On sait alors que la carte « u », sitôt placée en haut du jeu, en est retirée juste après. Chaque élève, à son rythme, apprend à faire l’économie du geste ajouter puis enlever et l’efficacité du jeu croît dans le temps. Il est important de laisser les élèves évoluer à leur rythme et de laisser la phase de verbalisation (entre élèves) jouer le rôle de synchronisation des apprentissages.
• La balise suivante est un « b » fermant ce qui fait enlever à son tour la carte « b » du sommet de la pile. Mais la balise suivante est ouvrante ce qui aboutit à replacer la carte « b » en haut de la pile. Là encore, on peut faire l’économie du geste retirer puis remettre et laisser la pile dans l’état où elle se trouve.
• La balise suivante est un « u » ouvrant, mais sitôt refermé par la balise qui le suit : on ne touche pas la pile avec ces deux balises.
• La balise suivante est un « a » ouvrant mais suivi immédiatement (sans autre balise intermédiaire) par un « a » fermant, ce qui amène là encore à ne pas toucher à la pile.
• La balise suivante est un « b » fermant ce qui amène à retirer la carte « b » de la pile :

• La dernière balise de cette ligne est un « p » fermant ce qui amène encore une fois à vider la pile.

Voici la suite des hauteurs de la pile au cours de la lecture de la ligne 2 :

0123212323210

Mais certaines suites d’actions n’ont pas été effectuées parce qu’elles se neutralisaient, alors on peut les mettre entre parenthèses :

012(32)(12)(32)(32)10

voire les enlever :

01210

Pour voir ce qu’il en est de la ligne 3, voir le prochain onglet.

Voici, pour rappel, le source de la troisième ligne du document mystérieux (on a vu à la fin de l’onglet précédent, qu’à ce stade la pile est à nouveau vide) :

<p><b>b<i>i</i></b><b>b<i>i</i><u>u</u></b></p>

• Comme pour les autres lignes, la première balise est un « p » ouvrant ce qui amène à replacer une carte « p », faisant ainsi passer la hauteur de la pile, de 0 à 1 :

• Ensuite comme la balise « b » ouvrant est suivie d’une paire (« i ouvrant »,« i fermant ») qu’on a appris dans l’onglet précédent à ne pas regarder, on ne considère après elle, que la balise « b fermant » qui la suit, et on a vu que ces deux balises se neutralisent. Avec cet apprentissage, les élèves les plus rapides voient (du point de vue de la syntaxe html) <b><i></i></b> comme sans effet sur la pile, et à ce stade la pile est toujours constituée d’une seule carte.
• La balise suivante est un « b » ouvrant non immédiatement neutralisé, on place alors une carte « b » en haut de la pile :

• Les 4 balises suivantes ne sont pas traitées non plus par les élèves les plus entraînés, car il s’agit de <i></i><u></u> qui est immédiatement perçu comme sans effet sur la pile.
• Les deux balises suivantes sont fermantes et disposées dans l’ordre qui permet de vider directement la pile.

La suite des hauteurs de la pile au cours de la lecture de la ligne 3 est

0123212323210

que l’on peut écrire avec des parenthèses autour des parties non exécutées par les élèves :

0(1232)12(3232)10

ce qui aboutit à cette version simplifiée :

01210

La pile est donc à nouveau vide à la fin de la lecture de la ligne 3. La lecture de la ligne 4 est décrite dans l’onglet suivant.

Voici, pour rappel, le source de la ligne 4 du fichier mystérieux :

<p><a>a<u>u</u><b>b</b><i>i</i></a></p>

• La première balise est un « p » ouvrant, on pose alors une carte « p » ce qui fait renaître la pile :

• La balise suivante est un « a » ouvrant, ce qui fait grandir la pile :

• La suite <u></u><b></b><i></i> est immédiatement (avec de l’entraînement) perçue comme sans effet sur la pile. Il ne reste alors plus que deux balises à regarder.
• Ces balises sont fermantes et situées dans l’ordre qui permet de vider à nouveau la pile.

Sans les raccourcis de pensée, la suite des hauteurs de la pile serait

01232323210

Mais en mettant entre parenthèses les parties non exécutées

012(323232)10

on retient

01210

Mais certains élèves semblent voir les états successifs de la pile comme

01(21)0

et aboutissent alors à

010

voire à

0(10)

On peut suivre les étapes en une dizaine de minutes (parfois plus) :

1. Manipulation : Les élèves jouent au jeu, ils placent alors toutes les cartes comme on l’a fait pour la ligne 1.
2. Verbalisation : L’élève qui gère la pile demande à ses coéquipiers les cartes au fur et à mesure des besoins, puis progressivement ne demande plus les cartes quand il sait qu’il va devoir les restituer juste après : petit à petit, le gestionnaire de la pile manipule de moins en moins, remplaçant la manipulation par la verbalisation.
3. Abstraction : Puis les élèves parlent de moins en moins et refont en quelque sorte la manip dans leur tête. Cela se fait progressivement et à un rythme différent d’un élève à un autre.

Mais en moins d’une demi-heure, des élèves semblent capables de reconnaître d’un simple balayage du regard, si un fichier html est correct du point de vue de la syntaxe.

Le jeu de cartes suivant a été proposé aux élèves :

Comme rien n’interdit de mettre une balise « i » à l’intérieur d’une autre balise « i » [1] on donne plusieurs cartes de chaque sorte à chaque groupe.

Ensuite chaque groupe gère sa pile tout en lisant un source html vidéoprojeté. Il ne s’agit pas du fichier mystère présenté ci-avant, mais d’un vrai source html, en l’occurence l’un des chapitres du cours que voici :

thèmes 1 et 2	thème 3	thème 4	thème 7

En jouant à ce jeu, on constate 3 sortes de problèmes possibles :

• La pile n’est pas vide à la fin du jeu (certains élèves estiment que ce n’est pas un problème). Cela dénonce un déficit de balises fermantes dans le fichier html, ou, plus précisément, une balise ouverte quelque part et pas refermée.
• La pile est vide avant la fin ce qui empêche de retirer la carte du haut de la pile. Cela dénonce au contraire un déficit en balises ouvrantes, plus précisément la présence d’une balise essayant de fermer quelque chose qui n’a jamais été ouvert.
• La carte qu’on doit retirer de la pile n’est pas en haut de la pile. Cela signifie que l’ordre dans lequel les balises sont ouvertes et refermées n’est pas correct dans le fichier html.

Dans chaque cas, on dit qu’il y a une erreur de syntaxe dans le fichier html. La pratique de ce jeu apprend aux élèves à détecter les erreurs de syntaxe dans un fichier html. On est donc là face à un jeu sérieux puisque rien qu’en jouant et sans s’en rendre compte, on acquiert

• un savoir-faire (repérer les erreurs de syntaxe en html)
• un savoir (la notion de pile (informatique))
• une notion importante en neurosciences : celle de mémoire de travail.

Voir l’onglet suivant pour une discussion plus approfondie à ce sujet.

Il a également été demandé aux élèves ayant fini avant les autres, de produire des fichiers html truffés d’erreurs. Voici deux exemples :

<body>
<h1>titre
<h2>suite</h1>
<p>paragraphe
</h2>
<h3>titre
<p>p
<em>exergue
<head>
</p>
</h3>

<html>
<head>
<body>
<title>j'aime le chocolat<title>
<p><em>~~~~~~~~~~~~</p></em>
<body>
</head>
</html>

Saurez-vous faire mieux que des élèves de 2^nde, en détectant les erreurs intensionnelles qu’ils ont placées dans ces sources html ?

Il leur a été expliqué que c’est à l’aide d’une pile que les navigateurs web détectent les erreurs de syntaxe html, mais Firefox par exemple corrige les erreurs et l’affichage de la page par Firefox ne permet pas de deviner qu’elle comportait des erreurs.

La notion de pile n’est pas au programme de seconde (on ne la voit qu’en terminale, en NSI). Cependant l’occasion était trop belle pour ne pas évoquer au moins en passant le modèle mnémosique des piles.

Sans aller jusqu’à prétendre que le cerveau humain ne serait qu’une simple pile, on peut constater que la pile possède cette caractéristique mnémosique :

Plus un souvenir est récent, plus vite on l’oublie

Une discussion est alors entamée sur ce à quoi ressemblerait la mémoire humaine si elle était dotée de la même caractéristique. Le nom d’Alzheimer vient assez naturellement...

Une excellente introduction à la notion de pile est le sketch mettant en scène Achille, la Tortue et le Génie dans le livre de Hofstadter.