Démonstration : créer l'arborescence d'un projet

Les microressources précédentes ont installé et expliqué les outils. Celle-ci les fait marcher ensemble : du dossier vide à la page affichée dans le navigateur, en demandant tout à l'assistant. Suivez la démonstration sur votre poste, ou contentez-vous de la lire — l'objectif est de voir le trajet complet.

1. Ce que nous allons construire

Deux fichiers, deux dossiers, une page qui s'affiche. Voici la cible :

demo-atelier/
├── index.html
└── css/
    └── style.css

C'est peu, mais c'est déjà un vrai site : une page, une feuille de style rangée dans son dossier, et un lien entre les deux. Toute l'architecture des modules suivants consiste à ajouter des branches à cet arbre-là.

2. Préparer le dossier

Une seule chose vous incombe avant de pouvoir demander quoi que ce soit : donner à l'assistant un endroit où travailler.

1. Créer le dossier

   Dans votre explorateur Windows, à un endroit que vous retrouverez (le Bureau fait l'affaire), créez un dossier nommé demo-atelier. Sans espace, sans accent, sans majuscule : ce nom se retrouvera un jour dans une adresse web, et les adresses n'aiment ni les espaces ni les accents. Prenez l'habitude tout de suite.

2. L'ouvrir dans VS Code

   Clic droit sur le dossier → Ouvrir avec Code. Ou, depuis VS Code : Fichier → Ouvrir le dossier…. Le dossier, pas un fichier — c'est la règle d'or de la microressource 2, et c'est ici qu'elle commence à servir.

3. Observer l'explorateur

   Dans la barre latérale, à gauche, DEMO-ATELIER apparaît en majuscules : VS Code a compris que c'est votre espace de travail. Il est vide, et c'est normal. Tout ce qui sera créé à partir de maintenant s'affichera là.

3. Demander la page à Claude Code

Le dossier est prêt. Plutôt que de créer les fichiers un par un, décrivez ce que vous voulez obtenir et laissez l'assistant les écrire. Ouvrez le panneau Claude Code :

Crée dans ce dossier une page index.html avec le titre « Ça marche ! » et un court paragraphe, ainsi qu'une feuille de style css/style.css qui centre le contenu et colore le titre.

Pendant qu'il travaille, deux choses méritent d'être observées :

• Il crée aussi les dossiers

  Vous avez demandé css/style.css : il crée le dossier css au passage. L'arborescence annoncée en section 1 apparaît telle quelle dans l'explorateur, sous vos yeux.

• Il demande votre autorisation avant chaque écriture

  La modification s'affiche en comparaison avant/après et attend votre accord — vous êtes en mode Manuel. Acceptez, mais regardez ce que vous acceptez : c'est déjà de la relecture.

Remarquez enfin que la demande nommait les fichiers : index.html et css/style.css. Sans cette précision, l'assistant aurait choisi à votre place — peut-être une feuille de style posée à la racine, hors de tout dossier. Nommer ce qu'on attend coûte quelques mots ; le corriger après coup coûte bien davantage.

4. Vérifier dans le navigateur

Double-cliquez sur index.html depuis l'explorateur Windows. La page s'affiche. Regardez la barre d'adresse :

file:///C:/Users/vous/Bureau/demo-atelier/index.html

file:// signifie que le navigateur lit un fichier directement sur votre disque. Aucun serveur n'intervient, et surtout : ce n'est pas une mise en ligne. La page existe, mais vous seul pouvez la voir — la rendre accessible à d'autres est tout l'objet du module 1.3.

Ce mode d'affichage suffit pour du HTML et du CSS. C'est aussi précisément là que le PHP cessera de fonctionner en partie 2 : lui réclamera un serveur capable de l'interpréter.

Prenez enfin le réflexe qui rythmera toute la formation : demandez une modification, acceptez-la, puis revenez au navigateur et actualisez avec F5. Demander d'un côté, vérifier de l'autre — c'est cette boucle, répétée des centaines de fois, qui constitue le travail réel.

5. Comprendre ce qui a été produit

La page fonctionne. Reste le plus important, et c'est tout l'objet de cette section : savoir ce qu'elle contient. Un code qu'on ne sait pas lire est un code qu'on ne peut pas valider — or la règle posée dès la première microressource était claire : l'assistant propose, vous validez.

Ouvrez index.html dans l'éditeur. Vous devriez y trouver ceci, à quelques détails près :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon atelier</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Ça marche !</h1>
  <p>Ma première page, servie depuis mon propre poste.</p>
</body>
</html>

Ligne par ligne — le module 1.2 y reviendra en détail, ceci n'est qu'un premier repérage :

• 1
  <!DOCTYPE html>

  Annonce au navigateur : « ce qui suit est du HTML moderne ». Toujours la première ligne, toujours identique.

• 2
  <head> ce que le visiteur ne voit pas

  Les informations sur la page : son encodage, son titre d'onglet, ses feuilles de style. Rien de ce qui est ici ne s'affiche dans la page elle-même.

• 3
  <meta charset="utf-8">

  Sans cette ligne, vos accents deviennent des caractères illisibles. C'est la cause numéro un des « Ã§a marche » à l'écran.

• 4
  <link rel="stylesheet" href="css/style.css">

  La ligne clé de cette démonstration. Elle relie la page à sa feuille de style. Le chemin css/style.css est relatif : il signifie « à partir d'ici, entre dans le dossier css et prends style.css ». Renommez ce dossier, et la page perd toute sa mise en forme sans le moindre message d'erreur.

• 5
  <body> ce que le visiteur voit

  Le contenu affiché. <h1> est le titre principal, <p> un paragraphe. Le reste — couleurs, centrage — vient de la feuille de style, pas d'ici.

6. À vous : la page d'accueil du projet Decarbochim

Assez de projet-jouet. Vous allez maintenant produire une vraie page : celle qui présente le projet Decarbochim et donne accès à ses sept groupes de travail, GT1 à GT7.

Étape 1 — Garnir le dossier avant de demander quoi que ce soit

C'est le geste qui décide de la qualité du résultat, et celui qu'on oublie le plus souvent. Claude Code ne connaît pas votre projet : il ne sait pas ce qu'est Decarbochim, ni ce que recouvrent vos groupes de travail. Si vous lui demandez une page « sur le projet Decarbochim » alors que le dossier est vide, il inventera un contenu plausible et faux.

Déposez donc d'abord vos documents dans le dossier de projet — glisser-déposer dans l'explorateur de VS Code, comme à la microressource précédente :

• La matrice du parcours

  Matrice_Parcours_Reduction_Catalytique_efuel.xlsx, déjà utilisé à la microressource précédente : il décrit le contenu du programme.

• Tout document décrivant les groupes de travail

  Note de cadrage, compte rendu, présentation… peu importe le format, du moment que les intitulés et le périmètre de GT1 à GT7 y figurent. C'est là que Claude Code ira chercher de quoi remplir vos cartes.

• Une page existante, si vous en avez une

  Elle lui sert de modèle de style et de structure. Bien plus efficace que de décrire une mise en page avec des mots.

Un modèle de demande, à recopier et compléter

Plutôt que d'improviser à chaque fois, gardez cette trame sous la main. Les passages entre crochets sont ceux que vous remplacez par vos propres informations :

Modèle — à compléter avant de l'envoyer

Crée un fichier [nom du fichier, ex. index.html] qui présente [nom du projet].

CONTENU
Inspire-toi uniquement des documents présents dans ce dossier, en particulier
[noms des fichiers à utiliser]. N'invente rien qui n'y figure pas : si une
information manque, signale-le-moi au lieu de la deviner.

STRUCTURE
- un titre et un paragraphe qui expliquent [ce que le lecteur doit comprendre]
- [nombre] cartes cliquables, une par [groupe de travail, séquence, module…]
- sur chaque carte : [son intitulé, une phrase de description…]

STYLE
[suis la charte graphique du dossier / reprends css/style.css / inspire-toi de telle page]

Les trois blocs ne sont pas décoratifs : chacun répond à une question que l'assistant tranchera de toute façon, avec ou sans vous — avec quelle matière, organisé comment, et avec quelle allure. Une demande qui déçoit est presque toujours une demande où l'un des trois manquait.

Quels documents déposer ?

Ceux que vous citez dans CONTENU et STYLE ne se limitent pas à la matrice du parcours. Tout ce qui décrit votre projet ou son apparence mérite d'être placé dans le dossier :

• Une charte graphique — codes couleur, typographies, logo, règles d'usage.
• Un cahier des charges du site — pages attendues, fonctionnalités, contraintes.
• Des maquettes ou captures d'écran de ce que vous visez.
• Des documents de fond — note de cadrage, compte rendu de réunion, rapport.
• Un site existant dont vous voulez reprendre l'esprit.

La différence sur le résultat est spectaculaire. Une charte graphique posée dans le dossier vaut infiniment mieux que trois lignes réclamant « des couleurs sobres et modernes » : l'assistant y lit vos codes hexadécimaux exacts, vos polices et vos règles, et s'y tient. Un cahier des charges, lui, indique quelles pages sont attendues — et, tout aussi utile, lesquelles ne le sont pas.

Notez surtout la consigne « signale-le-moi au lieu de la deviner ». C'est votre meilleure protection contre le travers décrit plus haut : sans elle, une information absente de vos documents sera comblée par une invention crédible.

Étape 2 — Formuler la demande

Une fois les fichiers en place, décrivez précisément ce que vous voulez obtenir :

Crée un fichier index.html qui présente le projet Decarbochim. Inspire-toi des documents présents dans le dossier pour le contenu — ne vas pas chercher ailleurs. Ajoute ensuite sept cartes cliquables vers les groupes de travail GT1 à GT7, chacune avec son intitulé et une phrase de description. Utilise la feuille de style css/style.css.

Remarquez la construction de cette demande. Elle dit d'où vient le contenu (les documents du dossier, et rien d'autre) et ce qu'il faut produire (une page, sept cartes décrites précisément). Ces deux éléments manquent presque toujours dans une demande qui déçoit.

Étape 3 — Créer les sept dossiers et leurs pages

Les cartes pointent pour l'instant vers des pages qui n'existent pas. Demandez maintenant de les créer, en donnant à chaque groupe de travail son propre dossier :

Crée maintenant un dossier par groupe de travail : GT1, GT2… jusqu'à GT7. Dans chacun, place un fichier index.html qui explique ce que fait ce groupe de travail, en te basant sur les documents du dossier. Puis relie les sept cartes de la page d'accueil à ces pages.

Vous obtenez une arborescence de ce type :

decarbochim/
├── index.html          ← la présentation, avec les 7 cartes
├── css/
│   └── style.css
├── GT1/
│   └── index.html      ← ce que fait le GT1
├── GT2/
│   └── index.html
└── …                      jusqu'à GT7

Pourquoi index.html dans chaque dossier, plutôt que gt1.html à la racine ? Souvenez-vous de la section 3 : un serveur qui reçoit une demande pour un dossier y cherche index.html. Vos liens peuvent donc s'écrire simplement GT1/, GT2/… Et surtout, chaque groupe de travail dispose de son propre espace : le jour où le GT3 aura ses images et ses documents, ils se rangeront dans GT3/ sans rien déranger ailleurs.

Étape 4 — Relire, corriger, recommencer

Ne validez pas les yeux fermés. Ouvrez la page dans le navigateur et vérifiez : le contenu correspond-il vraiment à vos documents, ou a-t-il été inventé ? Y a-t-il bien sept cartes ? Et surtout, cliquez sur chacune — chaque lien doit ouvrir la page du bon groupe de travail. Un lien qui ne mène nulle part est l'erreur la plus fréquente dès qu'on introduit des sous-dossiers.

Si quelque chose cloche, dites-le simplement, dans la même conversation :

Les cartes GT3 et GT5 ne reprennent pas les intitulés du document. Corrige-les, et mets les sept cartes sur deux colonnes.

C'est ce va-et-vient — demander, relire, préciser — qui constitue le travail réel avec un assistant. Le premier jet n'est presque jamais le bon, et ce n'est pas un problème : c'est le fonctionnement normal.

Étape 5 — Descendre d'un niveau : un cours dans le GT6

Un groupe de travail n'est pas qu'une page de présentation : il contient des cours. Ajoutons le premier, dans le GT6, intitulé « Réduction ».

La nouveauté, c'est que vous n'allez pas décrire vous-même la structure de ce cours. Vous allez demander à l'assistant d'aller la chercher dans la matrice déposée à l'étape 1 :

Dans le dossier GT6, ajoute un cours intitulé « Réduction » : crée un sous-dossier reduction/ contenant un index.html. Pour le contenu, lis le fichier Matrice_Parcours_Reduction_Catalytique_efuel.xlsx, repère comment il organise la progression pédagogique, et reprends cette même logique dans la page. Ajoute enfin, sur la page du GT6, un lien vers ce cours.

L'arborescence s'enrichit d'un niveau :

decarbochim/
├── index.html              ← la présentation, avec les 7 cartes
├── GT6/
│   ├── index.html          ← ce que fait le GT6, + un lien vers le cours
│   └── reduction/
│       └── index.html      ← le cours « Réduction »
└── …

Deux détails méritent votre attention.

Le nom du dossier. Le cours s'appelle « Réduction » avec sa majuscule et son accent — c'est ce que lira le visiteur. Mais le dossier, lui, s'écrit reduction : pas d'accent, pas de majuscule. La règle posée en section 2 s'applique ici comme partout ailleurs, et c'est exactement le genre de détail qu'il faut vérifier dans ce que l'assistant propose.

Vous n'avez pas dicté la structure. Vous n'avez pas écrit « fais des chapitres, puis des ressources » : vous avez demandé de lire la matrice et d'en reprendre la logique. C'est tout l'intérêt d'avoir déposé le fichier dans le dossier à l'étape 1. Vérifiez donc en priorité ce point : la page reflète-t-elle réellement l'organisation du tableau, ou l'assistant a-t-il plaqué un plan de son invention ? Le cas échéant, montrez-lui l'écart :

Tu as inventé des sections. Reprends exactement les niveaux de la matrice, dans le même ordre, sans en ajouter ni en retirer.

Vous venez de construire trois niveaux de navigation : accueil → groupe de travail → cours. C'est le début de l'arborescence complète de la plateforme, qui en comptera davantage — et qui, en partie 2, cessera d'être une série de dossiers pour être générée depuis une base de données.

Étape 6 — Exporter le cours vers Moodle

Votre cours « Réduction » existe sous forme de page web. Reste à le faire entrer dans Moodle sans perdre sa mise en page.

La parade tient en une phrase : ne pas donner du HTML à l'éditeur, mais déposer un fichier. Deux façons de faire, selon vos besoins.

Solution 1 — Le fichier HTML autonome (le plus simple)

Un cours = un seul fichier qui se suffit à lui-même, styles compris. Rien à installer, rien à configurer.

Prépare une version de ce cours destinée à Moodle. Rassemble la page reduction/index.html en un seul fichier HTML autonome : intègre le contenu de css/style.css directement dans une balise <style> à l'intérieur du fichier, et n'utilise aucun lien vers un fichier externe. Nomme-le cours-reduction-moodle.html.

Le mot important est autonome. Souvenez-vous de la section 3 : votre page appelle sa feuille de style par un chemin relatif, css/style.css. Une fois le fichier déposé seul dans Moodle, ce chemin ne mène plus nulle part — le dossier css n'a pas suivi. D'où la consigne d'intégrer les styles dans le fichier.

Côté Moodle : activez le mode édition, puis Ajouter une activité ou une ressource → Fichier. Déposez votre cours-reduction-moodle.html. Dans les options d'apparence, choisissez l'affichage « Intégrer » : la page s'ouvre dans Moodle avec sa mise en forme, au lieu d'être proposée en téléchargement.

Solution 2 — Le paquet IMS (pour un cours structuré)

Si votre cours compte plusieurs pages, ou si vous voulez qu'il apparaisse comme une véritable activité navigable, il faut l'emballer dans un format que Moodle sait ouvrir : un paquetage IMS Content. C'est une archive ZIP contenant vos pages, vos images, et un fichier de description nommé imsmanifest.xml qui liste ce que contient le paquet.

Emballe maintenant ce cours dans un paquetage IMS Content Package : crée un dossier export-moodle/ contenant les pages du cours, leurs ressources, et un imsmanifest.xml valide qui les déclare. Compresse ensuite le tout dans un fichier .zip prêt à être déposé dans Moodle.

Côté Moodle : Ajouter une activité ou une ressource → Paquetage IMS content, puis déposez le ZIP. Moodle le décompresse et affiche le cours avec son sommaire.

Vérifier avant de diffuser

Déposez d'abord le fichier dans un cours de test, jamais directement devant vos apprenants. Ouvrez-le et contrôlez trois choses : les couleurs et la disposition sont-elles bien là ? Les images s'affichent-elles, ou apparaissent-elles comme des icônes cassées — signe qu'un chemin externe subsiste ? Et le rendu tient-il sur un écran de téléphone, puisque beaucoup d'apprenants consultent Moodle ainsi ?

Si la mise en page a sauté, l'explication est presque toujours la même : un fichier appelé de l'extérieur n'a pas été intégré. Signalez-le, et faites reprendre :

Les images ne s'affichent pas dans Moodle. Intègre-les directement dans le fichier HTML pour qu'il ne dépende plus d'aucun fichier extérieur.