Lab web côté navigateur : HTML, CSS et JavaScript avec aperçu en direct

Ce lab donne à chaque élève une petite page web à lui, un menu du midi, faite de trois fichiers : index.html pour ce qu’il y a dessus, style.css pour son aspect et app.js pour ce qu’elle fait. Il modifie les fichiers dans l’éditeur de fichiers de JupyterLab et voit la page dans un second lien, Preview, servi depuis le même dossier. De courts scripts Python lisent les fichiers et affichent ce qu’ils contiennent : l’élève peut donc vérifier une page autant qu’en écrire une.

Ce n’est pas un lab d’attaque, et il n’a ni Node ni framework : une page, ce sont des fichiers simples et le navigateur est le seul moteur d’exécution. Chaque copie n’a aucun accès à internet ni à aucun autre élève : rien ne peut y être téléchargé et rien n’y peut atteindre quelqu’un d’autre.

Ce que les élèves apprennent

Ce que font HTML, CSS et JavaScript. HTML, c’est la structure : les éléments, le plan des titres et les liens. CSS, c’est le style : sélecteurs et déclarations, le modèle de boîte (contenu, marge intérieure, bordure, marge extérieure) et la cascade qui décide quelle règle l’emporte quand deux règles visent un même élément. JavaScript, c’est le comportement : des événements comme un clic ou la saisie, et des fonctions qui modifient le DOM, ici pour filtrer une liste et basculer un thème sombre sans aucune bibliothèque. Puis comment vérifier une page : compter ses balises, lire son plan, trouver les liens qui ne mènent nulle part et demander la page au serveur comme le fait un navigateur. Il convient aux introductions au développement web et au front-end ; vérifiez la formulation exacte dans l’unité de votre propre organisme certificateur, aucune n’est citée ici.

Le lancer dans votre navigateur

Le lab démarre un seul service, jupyter, qui écrit la page, un notebook de départ et les petits scripts dans son dossier de travail, et lance un simple serveur de fichiers sur le dossier site. Deux liens s’ouvrent depuis la page du lab : JupyterLab, l’atelier, et Preview, la page elle-même. JupyterLab ne demande aucun jeton, car la porte de la plateforme sait déjà qui l’ouvre. Preview montre les fichiers enregistrés : après avoir modifié un fichier, l’élève l’enregistre puis recharge Preview. Le terminal à côté du lab n’a pas de Python à lui : il atteint celui du lab avec docker exec jupyter, suivi de la commande à lancer à l’intérieur.

  1. Ouvrir la page Conteneur. Ouvrez « Créer » dans la barre et choisissez « Lancer un conteneur ». Tout le monde peut ouvrir la page, et le lab Git et le lab SQL se lancent sans compte. Tous les autres labs demandent un compte gratuit : créez-en un, connectez-vous, puis appuyez sur « Démarrer ».
  2. Trouver le lab. La carte « Laboratoires d’exemple » liste tous les exemples. Trouvez Web côté navigateur : HTML, CSS et JavaScript.
  3. Appuyer sur Démarrer. « Démarrer » le lance tel quel, en un clic. « Modifier le fichier d’abord » ouvre le fichier compose pour que vous puissiez le changer avant de démarrer.
  4. L’ouvrir. Sur la page du lab, la barre du lab a deux liens. Appuyez sur JupyterLab, ouvrez le dossier site et double-cliquez sur index.html, puis appuyez sur Preview pour voir la page. Appuyez ensuite sur « Ouvrir le terminal » et tapez docker exec jupyter python3 steps/tags.py pour compter les balises de la page.

Que demander aux élèves de rendre

Leur propre version de la page : les trois fichiers du dossier site, téléchargés depuis JupyterLab avec File, Download. Puis une ou deux phrases, de leurs propres mots, sur un changement qu’ils ont fait et son effet, par exemple un nouveau plat, une autre palette de couleurs ou un bouton qui fait autre chose. Rien n’est noté automatiquement : la phrase montre si c’était compris. Pour un travail plus poussé, demandez de lancer steps/links.py et steps/outline.py sur leur page et de dire ce que chacun montre, ou d’ajouter une règle et d’expliquer laquelle l’emporte et pourquoi.

Une leçon de base sur ce lab

Front-End Web Basics est une petite leçon qui se fait dans ce lab. L’élève y liste les trois fichiers de la page, compte ses balises et lit son plan, compte les règles et les déclarations de la feuille de style, trouve les fonctions et les événements du script, puis vérifie les liens et la réponse du serveur de Preview. Elle est volontairement petite : elle montre à un enseignant ce qu’est une leçon qui se fait dans un lab, et le lab fait le reste. Copiez-la dans un module à vous pour la modifier.

Le code sur GitHub

Le fichier compose n’a pas de Dockerfile : il lance une seule image publique, scipy-notebook des Jupyter Docker Stacks, figée sur une étiquette datée, avec son propre compte sans privilèges et 512 Mo de mémoire. L’image est sous licence BSD-3-Clause et n’est pas distribuée par nous. Le fichier écrit la page et les scripts à partir d’un texte fixe au démarrage : chaque copie est identique et rien n’est téléchargé. Les limites sont honnêtes : la page est petite, il n’y a ni Node, ni framework, ni moyen de récupérer une bibliothèque sur internet ; l’élève travaille donc en HTML, CSS et JavaScript simples, ce qui est justement le sujet de la leçon. Rien n’est conservé quand le lab s’arrête : l’élève télécharge ses fichiers avant.

En faire un travail

Indiquez dans la tâche ce qu’il faut rendre.

  1. Créer le lab. Dans votre module, ajoutez une tâche et choisissez la carte « Lab de conteneurs », puis « Dans un dépôt GitHub ». Indiquez https://github.com/mitsurutech/lab-frontend-web avec la branche main. Le fichier compose par défaut est compose.yaml. Faites d’abord un fork du dépôt si vous voulez le modifier, par exemple pour partir d’une autre page.
  2. Publier et l’essayer. « Publier » fige le commit qui vous a été montré : un changement ultérieur dans le dépôt ne modifie donc pas un lab que vous avez déjà proposé. Démarrez d’abord votre propre copie.
  3. Le distribuer. Attribuez-le comme n’importe quelle tâche, avec une échéance si vous le souhaitez, et indiquez dans la tâche ce qu’il faut faire et ce qu’il faut rendre.
  4. Noter ce qui est rendu. Ouvrez la copie d’un élève et le travail rendu, notez-le et renvoyez-le avec un motif s’il demande un complément.

Essayer ce lab, et ce qu’il coûte

Un compte personnel gratuit permet de suivre les leçons de base de ce lab, avec chaque mois assez de crédit gratuit pour suivre la plupart des leçons, sans carte. Pour une classe, un établissement a ses 365 premiers jours gratuits pour 50 élèves au plus, puis paie par élève et par an, tous les labs compris et les enseignants gratuits.

Questions fréquentes

Pourquoi y a-t-il deux liens ?
JupyterLab, le premier, est l’endroit où l’élève modifie les fichiers et utilise le terminal. Preview, le second, est la page elle-même, servie depuis le dossier site, comme la verrait un visiteur. Garder la page dans son propre onglet évite qu’elle soit entourée d’un éditeur.
J’ai modifié un fichier et Preview n’a pas changé. Pourquoi ?
Preview montre les fichiers enregistrés. Enregistrez le fichier dans l’éditeur, puis rechargez Preview. Si rien ne change, essayez un rechargement forcé : un navigateur peut garder une ancienne copie d’un fichier.
Les élèves peuvent-ils utiliser Node, React ou un paquet d’internet ?
Non. Une copie ne peut pas atteindre internet et l’image n’a pas Node : il n’y a rien à installer. Le lab enseigne les trois langages simples sur lesquels tout framework est construit. Pour d’autres pages de départ, faites un fork du dépôt, changez les fichiers qu’écrit le fichier compose, et proposez le fork comme lab.
Pourquoi n’y a-t-il ni jeton ni mot de passe à taper ?
La page web d’un lab ne s’atteint que par la porte de la plateforme, qui sait déjà qui vous êtes et ne laisse entrer que vous et les enseignants de votre module. JupyterLab démarre donc sans jeton. Ne le lancez pas ainsi sur une machine que d’autres peuvent atteindre.