Le site web
Séances 6 et 7 · en ligne pour la séance 7 · finalisé pour le vendredi 16 octobre
Le site de veille est un petit site qui explique cinq sujets à quelqu'un qui débute dans le web. Vous le construisez en groupe, avec un assistant IA, avec la même chaîne d'outils que pour votre premier site : VS Code, GitHub, Vercel. La différence, c'est que cette fois le contenu compte autant que la technique.
Ce que le site contient
Une page d'accueil, une page ou une section par sujet, une page « Sources ». Voici ce qu'on attend dans chaque partie, et une idée de mise en forme pour chacune.
| Partie | Ce qu'on doit y trouver | Une idée de mise en forme |
|---|---|---|
| Accueil | Ce qu'est ce site, pour qui, qui l'a fait. Une phrase par sujet et un lien vers chacun. | Une grille de cartes, une par sujet |
| Timeline du Web | Les grandes étapes : les technologies et standards clés, l'arrivée des grands services, avec pour chaque étape une date et une phrase sur ce que ça a changé. | Une frise que l'on fait défiler, avec une image par étape |
| Les URL | Comment se lit une adresse : le schéma, le domaine, le chemin, les paramètres. Ce qu'est un code de réponse HTTP, avec 200, 404 et 500. Ce que font une redirection 301 et une 302. | Une adresse réelle décomposée morceau par morceau, un mini-jeu « devine le code » |
| Les noms de domaine | Le principe, qui les vend, comment on en réserve un et à quel prix, ce qu'il devient si on ne le renouvelle pas, le rôle du DNS. | Le cycle de vie en schéma, un comparatif de prix pour trois extensions |
| Les standards du Web | Qui écrit les règles du Web, le W3C, le WHATWG et les autres, et ce qui arriverait sans elles. | Un avant / après : la même page sur deux navigateurs sans standards |
| La sécurité | Les attaques courantes, phishing, logiciels malveillants, force brute, et les bonnes pratiques d'un utilisateur et d'un développeur. | Un quiz « ce message est-il du phishing ? », une carte à retourner par attaque |
| Sources et auteurs | Chaque source consultée, avec son lien. Vos noms et prénoms. Les outils IA utilisés. | Un tableau, tout simplement |
Chaque sujet mérite un contenu écrit avec vos mots, au moins une illustration, et si possible un élément interactif. Pas un mur de texte recopié.
Comment le construire
La méthode du chapitre « Premier site : votre projet » s'applique telle quelle : un prompt complet qui pose le projet et les contraintes, un plan avant le code, une fonctionnalité à la fois, un fichier complet à chaque réponse, un test après chaque réponse.
Ce qui change, c'est l'ordre. Le contenu vient d'abord : à la séance 6, vous avez vos recherches et votre plan validés. Le site se construit autour, pas l'inverse. Un prompt de départ :
Tu es un développeur web créatif qui accompagne deux étudiants de première année. Nous créons un site de veille qui explique cinq sujets à des débutants : la timeline du Web, les URL, les noms de domaine, les standards du Web, la sécurité. Contraintes : un site statique en HTML, CSS et JavaScript, dans des fichiers séparés ; une page par sujet plus une page d'accueil et une page Sources ; un menu présent sur toutes les pages ; responsive, lisible sur téléphone ; des bibliothèques chargées par CDN si besoin, depuis leur site officiel ; pas de serveur, pas de clé d'API ; le site sera publié sur Vercel. Nous fournirons nous-mêmes les textes et les images. Commence par me proposer la structure des fichiers et le plan de chaque page, sans code. Attends notre validation, puis donne-nous un fichier complet à la fois.
Ensuite, sujet par sujet : vous collez vos textes, vous demandez la mise en forme choisie, vous testez. Pour les éléments interactifs, décrivez ce que doit faire l'utilisateur et ce qu'il doit voir, l'assistant écrit le JavaScript. Faites-le expliquer : vous devez pouvoir dire ce que fait chaque bloc à l'oral.
Astuce
Deux personnes, un seul dépôt. Le plus simple : une personne crée le dépôt GitHub et ajoute l'autre comme collaborateur, dans les paramètres du dépôt. Chacun travaille sur des pages différentes et pousse ses fichiers. Si vous modifiez le même fichier en même temps, Git vous le signalera : ne paniquez pas, montrez le message à l'enseignant.
Ce qui rapporte des points
Deux des cinq critères de la grille portent sur le site. Voici ce qu'ils mesurent, et à quoi ressemblent un travail correct et un travail remarquable.
N°4 · Le design
Moderne, cohérent, responsive, avec des éléments interactifs pertinents.
| Correct, 3 sur 5 | Remarquable, 5 sur 5 |
|---|---|
| Le site est propre et cohérent : mêmes couleurs, mêmes polices, mêmes marges sur toutes les pages. Il s'affiche sur téléphone sans casse. Il manque d'originalité. | Le site a une identité : une palette choisie, une typographie qui tient, des animations discrètes qui servent le contenu. Chaque sujet a son schéma ou son jeu. Rien ne déborde, sur aucun écran. |
Les règles du chapitre « Ergonomie » sont votre base : un titre principal, deux polices au plus, trois ou quatre couleurs, un contraste vérifié.
N°5 · L'ergonomie
Une navigation intuitive, une architecture claire, une expérience fluide.
| Correct, 3 sur 5 | Remarquable, 5 sur 5 |
|---|---|
| On trouve les cinq sujets depuis le menu. Les pages se chargent. L'organisation est parfois confuse : un sujet sur deux pages, un menu qui change d'une page à l'autre. | On sait toujours où l'on est et où aller. Le menu est le même partout, la page d'accueil mène à tout en un clic, les images sont légères, le site répond tout de suite. Tout fonctionne, y compris au clavier. |
Le critère N°3, la qualité des recherches, est commun au site et à la présentation : une seule note, qui regarde les deux. Sur le site, on regarde des informations exactes, sourcées, expliquées simplement, avec des illustrations qui aident à comprendre.
Le socle à respecter
Les mêmes règles que pour votre premier site, plus deux propres à ce projet.
- Le site s'ouvre sur
index.html, à la racine du dossier. - HTML, CSS et JavaScript sont dans des fichiers séparés.
- Le menu est le même sur toutes les pages et chaque lien fonctionne.
- Sur téléphone, rien n'est cassé : testez avec F12 puis l'icône en forme de téléphone, et sur un vrai téléphone.
- Les images sont libres de droits, générées ou créditées, légères, avec un texte
alt. - Une page « Sources » liste chaque source avec son lien.
- Vos noms sont sur la page d'accueil.
- Aucun mot de passe, aucune clé d'API : le dépôt est public.
Avant de rendre
Ouvrez le site en navigation privée et sur un téléphone. Cliquez sur chaque lien du menu, sur chaque source, sur chaque élément interactif. Faites-le tester par quelqu'un qui n'a pas travaillé dessus, et regardez où il hésite : c'est là que l'ergonomie pêche.
À retenir
- Une page d'accueil, une page par sujet, une page Sources, un menu identique partout.
- Le contenu d'abord : le site se construit autour de vos recherches validées.
- Chaque sujet a au moins une illustration, et si possible un élément interactif.
- Le design et l'ergonomie valent deux critères sur cinq : une identité cohérente, une navigation évidente.
- Testé en navigation privée, sur téléphone, par quelqu'un d'autre.