Fil rouge — Initialiser le projet « Plateforme pédagogique »

Dernière microressource du module, et la première où vous êtes seul aux commandes. Vous n'allez pas repartir de zéro : vous allez reprendre le projet ébauché à la microressource 5, le compléter et l'améliorer. C'est ce projet-là qui vous suivra jusqu'à la dernière page de la formation.

1. Où vous en êtes

À la fin de la démonstration, vous disposiez d'un début de plateforme : une page d'accueil présentant le projet, sept cartes vers les groupes de travail, un dossier par GT, et un premier cours dans le GT6.

C'est une ébauche, et il faut la regarder comme telle. Elle a été produite vite, en suivant une démonstration, par un assistant qui ne connaissait de votre projet que ce que vous lui aviez donné. Il y a forcément des approximations : un intitulé mal repris, une carte sans description, un lien qui ne mène nulle part, une mise en page qui ne ressemble pas à ce que vous vouliez.

2. Ce qui doit exister à la fin

Avant d'améliorer, assurez-vous que les fondations sont là. Voici l'arborescence minimale attendue :

plateforme/
├── index.html          la page d'accueil du projet
├── css/
│   └── style.css       la feuille de style commune
├── assets/             les images, logos, documents
└── pages/              les pages internes à venir

Deux dossiers sont probablement absents de votre ébauche : assets, où iront images et logos, et pages, qui accueillera les pages internes des modules suivants. Créez-les maintenant, même vides. Un dossier vide ne coûte rien ; une arborescence réorganisée en cours de route coûte cher, parce qu'il faut reprendre tous les chemins qui pointaient vers l'ancien emplacement.

Vérifiez enfin que votre index.html s'ouvre dans le navigateur et affiche le nom du projet. C'est le socle : une page qui s'affiche, sur votre poste.

3. Améliorer ce début de projet

C'est le cœur de la séance. Voici cinq directions d'amélioration, classées de la plus importante à la plus cosmétique. Ne cherchez pas à toutes les traiter : prenez celles qui correspondent aux défauts de votre ébauche.

• 1. L'exactitude du contenu

  La priorité absolue. Relisez les sept cartes et la page du GT6 en les comparant à vos documents : les intitulés sont-ils les bons ? Les descriptions disent-elles quelque chose de juste, ou sont-elles du remplissage plausible ? Corrigez d'abord ce qui est faux — une belle page qui raconte des inexactitudes ne vaut rien.

• 2. Les liens

  Cliquez sur tout. Chaque carte doit ouvrir la bonne page. Et depuis une page de GT, peut-on revenir à l'accueil ? Si la réponse est non, ajoutez ce lien : un visiteur qui atteint une page sans pouvoir en repartir est un visiteur perdu.

• 3. Le rangement

  Des images traînent-elles à la racine ? Déplacez-les dans assets. Les noms de fichiers respectent-ils la règle — pas d'espace, pas d'accent, pas de majuscule ? C'est le moment de les renommer, tant qu'ils sont peu nombreux.

• 4. L'apparence

  Si vous disposez d'une charte graphique, déposez-la dans le dossier et demandez que la feuille de style s'y conforme : couleurs, typographies, tailles de titre. À défaut, contentez-vous de rendre les sept cartes régulières et lisibles.

• 5. Les détails qui trahissent un travail bâclé

  Le titre affiché dans l'onglet du navigateur est-il correct, ou toujours « Document » ? La balise <meta charset="utf-8"> est-elle présente sur chaque page — sinon vos accents s'afficheront de travers ? Et la page reste-t-elle lisible sur un écran de téléphone ?

4. Demander une amélioration

Une amélioration se demande comme tout le reste, avec une différence : le projet existe déjà. Votre demande doit donc dire ce qui ne va pas et ce que vous attendez à la place, sans laisser l'assistant refaire la page entière.

Sur la page d'accueil, les descriptions des cartes GT2 et GT4 ne correspondent pas au document de cadrage. Reprends-les à partir de ce document. Ne modifie rien d'autre sur la page.

La dernière phrase compte autant que les autres. Sans elle, vous risquez de récupérer une page entièrement réécrite, dans laquelle vos corrections précédentes auront disparu. Cadrez le périmètre de chaque demande.

Procédez par petites touches, en vérifiant après chacune, plutôt qu'en une longue demande qui change tout d'un coup. C'est plus lent en apparence, mais bien plus rapide en pratique : quand quelque chose casse, vous savez immédiatement d'où cela vient.

5. Vérifier avant de passer à la suite

Reprenez ce contrôle final dans l'ordre. Il ne prend pas trois minutes :

• Le dossier de projet existe et contient index.html, css/, assets/, pages/.
• La page d'accueil s'ouvre dans le navigateur et affiche le nom du projet.
• Les accents s'affichent correctement — pas de ça à l'écran.
• Chaque carte mène à une page qui existe, et chaque page permet de revenir à l'accueil.
• Le contenu affiché correspond à vos documents, sans invention.
• Le projet est ouvert dans VS Code comme dossier, prêt pour le module suivant.