Aller au contenu

Premier site : votre projet

Séances 3 et 4 · à remettre avant la fin de la séance 4, vendredi 2 octobre

Un navigateur sait bien plus qu'afficher des pages. Il voit par la webcam, entend par le micro, sent l'inclinaison d'un téléphone, fait tourner de la 3D et même de l'IA, sans serveur. Pendant deux séances, vous allez le prouver : construire avec un assistant IA un projet qui fait dire « waouh », le comprendre, puis le mettre en ligne.

Le projet est individuel : chacun a son dépôt et son site. L'entraide reste bienvenue.

Les consignes en slides (PDF)

Le déroulé

Quand Ce que vous faites
Séance 3 · me 30/09 Vous choisissez un projet et vous le construisez avec l'assistant. En fin de séance, l'enseignant fait le même exercice devant vous, à voix haute : notez ce qu'il fait et que vous ne faisiez pas.
Le soir Vous faites tourner le socle de votre projet.
Séance 4 · ve 02/10 Vous relisez le site avec le chapitre Ergonomie, vous le publiez, vous complétez le carnet et vous remettez le tout avant la fin de la séance.

Choisir un projet

Seize idées, en quatre familles. Les étoiles donnent la difficulté :

  • ★ une seule idée, qui tourne en quelques heures ;
  • ★★ une bibliothèque ou une fonction du navigateur à apprivoiser ;
  • ★★★ deux briques à faire dialoguer (caméra et son, physique et capteurs…).

Pour chaque idée : le socle, qui doit marcher, et une piste pour aller plus loin, si vous avez le temps. Vous avez votre propre idée, tout aussi folle ? Parlez-en à l'enseignant en début de séance 3.

Les bibliothèques citées se chargent avec une ligne dans votre HTML, via un lien CDN : rien à installer. Si ces termes ne vous disent encore rien, c'est normal. C'est à l'IA de respecter ces contraintes, et à vous de vérifier que ça tourne.

Le navigateur vous voit et vous entend

Thérémine à mains nues ★★★ · Filtre de visage maison ★★ · Pierre-feuille-ciseaux contre votre IA ★★ · Sortilèges à la voix ★★ · Cette photo contient… ★★

  • Thérémine à mains nues ★★★. Bougez la main devant la webcam, la musique suit. Socle : la main est détectée et sa hauteur change la note. Plus loin : deux mains (volume et note), des traînées lumineuses. ml5.js, Tone.js
  • Filtre de visage maison ★★. Un filtre façon Snapchat, dessiné par vous. Socle : un masque en SVG ou en PNG suit votre visage. Plus loin : trois masques au choix, un bouton « Photo ». ml5.js, p5.js
  • Pierre-feuille-ciseaux contre votre IA ★★. Vous entraînez vous-mêmes le modèle avec vos mains, sans écrire de code d'IA. Socle : un modèle Teachable Machine qui reconnaît vos trois gestes, une manche, un score. Plus loin : un meilleur des cinq, des sons. TensorFlow.js
  • Sortilèges à la voix ★★. Dites « Lumos », la page s'illumine. Socle : trois commandes vocales reconnues, chacune avec un effet visible. Plus loin : la page vous répond à voix haute. Web Speech API, dans Chrome, Edge ou Safari
  • Cette photo contient… ★★. Une IA qui tourne dans l'onglet, sans clé et sans envoyer vos images. Socle : on dépose une photo, la page dit ce qu'elle y voit. Plus loin : elle le lit à voix haute, elle trie une galerie. Transformers.js

Son, lumière et 3D

Boîte à rythmes ★★ · Clip 3D réactif ★★★ · Générateur d'affiches ★ · Bac à sable physique ★★

  • Boîte à rythmes ★★. Une grille de cases qu'on allume pour composer une boucle. Socle : quatre sons sur seize temps, lecture, arrêt et tempo. Plus loin : le morceau enregistré dans l'adresse de la page, pour le partager. Tone.js
  • Clip 3D réactif ★★★. Des milliers de particules qui dansent sur votre musique. Socle : un morceau libre de droits, des formes 3D qui suivent les basses. Plus loin : le micro comme source, plusieurs ambiances. three.js, Web Audio API
  • Générateur d'affiches ★. Chaque clic compose une affiche de festival unique. Socle : formes, couleurs et titre tirés au hasard, export en PNG. Plus loin : des curseurs pour régler le style, un titre animé. p5.js
  • Bac à sable physique ★★. Des formes tombent, rebondissent et se laissent attraper. Socle : une scène avec gravité, la souris ou le doigt déplace les objets. Plus loin : on penche le téléphone, le monde penche. Matter.js

Jeux

Catapulte ★★ · Labyrinthe à bille ★★★ · Party game à la manette ★★★

  • Catapulte ★★. Vous tirez, les tours s'effondrent de façon réaliste. Socle : un lancer à la souris ou au doigt, des blocs, un score. Plus loin : des niveaux, des matériaux qui cassent. Matter.js
  • Labyrinthe à bille ★★★. Penchez le téléphone, la bille roule. Socle : la bille, les murs, l'arrivée, et un contrôle au clavier pour tester sur ordinateur. Plus loin : un chrono, plusieurs niveaux. Matter.js, capteurs d'orientation
  • Party game à la manette ★★★. Un jeu à deux, avec des manettes branchées sur le PC. Socle : deux joueurs, un but, un écran de fin, le clavier en secours. Plus loin : des bonus, des sprites animés. KAPLAY, Gamepad API

Vous présenter, présenter un lieu

Ici, les illustrations sont obligatoires : images générées par une IA, SVG dessinés par vous ou par l'assistant, photos retouchées. Notez dans le carnet quel outil les a produites.

CV jouable ★★★ · Récit au défilement ★★ · Le ciel de ma ville ★★ · Chasse au trésor à Wavre ★★

  • CV jouable ★★★. Un personnage parcourt un niveau, chaque coffre ouvre une de vos réalisations ou une de vos passions. Socle : les déplacements et trois coffres. Plus loin : des dialogues, une musique. KAPLAY
  • Récit au défilement ★★. L'histoire d'un lieu racontée au scroll, avec des dessins qui se tracent sous vos yeux. Socle : cinq scènes illustrées, une animation par scène. Plus loin : de la profondeur (parallaxe), un texte qui s'écrit. GSAP et ScrollTrigger
  • Le ciel de ma ville ★★. Une illustration de votre ville où il pleut quand il pleut vraiment, et qui passe en nuit à la tombée du jour. Socle : la météo réelle et au moins trois décors. Plus loin : le vent, les saisons. Open-Meteo, SVG
  • Chasse au trésor à Wavre ★★. La page dit « chaud » ou « froid » selon l'endroit où vous êtes. Socle : une carte, votre position, la distance à trois lieux. Plus loin : des énigmes, des badges. Leaflet, géolocalisation

Le socle commun

Quel que soit le projet :

  • Le site s'ouvre sur un fichier index.html, à la racine du dossier. Sa première page présente le projet : un titre, une phrase, comment s'en servir.
  • HTML, CSS et JavaScript sont dans des fichiers séparés.
  • Sur téléphone, rien n'est cassé. Si une fonction n'y marche pas, un message le dit.
  • Si la caméra, le micro ou la position sont refusés, un message clair l'explique.
  • Les images sont libres de droits ou générées, légères, avec un texte alt.
  • Aucun mot de passe, aucune clé d'API : votre dépôt sera public.

Construire avec l'IA

Commencez par un prompt complet qui pose le projet et les contraintes, et demandez un plan avant le code. Exemple pour le thérémine :

Tu es un développeur web créatif qui accompagne un étudiant de première année. Je veux créer un thérémine à mains nues : la webcam détecte ma main, et la hauteur de ma main change la hauteur d'une note. Contraintes : un site statique en HTML, CSS et JavaScript, dans des fichiers séparés ; des bibliothèques chargées par CDN, depuis leur site officiel ; pas de serveur, pas de clé d'API ; un message clair si la caméra est refusée ; le site sera publié en HTTPS sur un hébergeur gratuit. Commence par me proposer les fichiers et les étapes, sans code. Attends ma validation, puis donne-moi un fichier complet à la fois.

Tester : Claude · ChatGPT

Changez le projet, gardez les contraintes. Ensuite, quatre réflexes :

  1. Demandez le fichier complet. « Redonne-moi script.js en entier, à jour. » Remplacez tout le contenu du fichier dans VS Code, puis enregistrez. Un fichier à la fois : rien ne se perd.
  2. Une fonctionnalité à la fois. Ne demandez pas tout le projet d'un coup. D'abord la caméra qui s'affiche. Ça marche ? Puis la main détectée. Puis le son.
  3. Testez après chaque réponse. Ouvrez le site avec l'extension Live Server de VS Code, pas en double-cliquant sur le fichier : certaines bibliothèques ne se chargent pas autrement. Gardez la console ouverte (F12, onglet Console). Une erreur rouge ? Collez-la telle quelle à l'IA, avec ce que vous attendiez.
  4. Le socle d'abord. Tant qu'il ne tourne pas, oubliez le « plus loin ». Bloqués depuis une heure ? Demandez une version plus simple du même projet.

Et quand un bloc vous échappe, faites-le expliquer : « Explique-moi ce fichier bloc par bloc, avec des mots simples, puis pose-moi deux questions pour vérifier que j'ai compris. » Le carnet vous demandera d'expliquer un bloc de votre code avec vos mots.

Attention

Un lien CDN inventé. L'assistant cite parfois une version de bibliothèque qui n'existe pas. Si rien ne s'affiche, la console le dit (erreur 404). Allez chercher le bon lien sur le site officiel de la bibliothèque.

Relire avec le chapitre Ergonomie

Un projet spectaculaire doit aussi se comprendre. Avant de publier, passez-le au crible :

  • En arrivant, on comprend tout de suite à quoi sert la page et quoi faire.
  • Un seul titre principal, deux polices au maximum, trois ou quatre couleurs.
  • Le texte se lit bien sur son fond : testez le contraste avec le vérificateur de WebAIM.
  • Sur téléphone (F12, puis l'icône en forme de téléphone), les boutons se touchent au doigt.
  • Les boutons importants se voient au premier coup d'œil.

Notez ce que vous avez changé : le carnet vous le demandera.

Publier et remettre

Publier. Les chapitres GitHub et Vercel vous guident. Vous pouvez choisir un autre hébergeur gratuit repéré pendant vos recherches (Netlify, GitHub Pages, Cloudflare Pages…) : dites pourquoi dans le carnet. Tous servent votre site en HTTPS, ce qui est indispensable pour la caméra, le micro et la position sur téléphone.

Le carnet. Même principe que pour les recherches, avec des questions propres au site : vos prompts, un bloc de code expliqué avec vos mots, un bug et sa résolution, votre relecture ergonomique, votre choix d'hébergeur. Remplissez-le au fil du travail, en collant vos prompts au moment où vous les écrivez.

Télécharger le carnet « Premier site » (Word)

Pour l'exporter en PDF : dans Word, Fichier › Enregistrer sous › PDF ; dans Google Docs, Fichier › Télécharger › Document PDF.

Les trois éléments à remettre dans le devoir Teams « Premier site », avant la fin de la séance 4, vendredi 2 octobre. Un : le lien de votre dépôt GitHub, public, par exemple github.com/votre-pseudo/mon-premier-site. Deux : le lien de votre site en ligne, sur l'hébergeur gratuit choisi, par exemple mon-premier-site.vercel.app. Trois : votre carnet d'usage de l'IA, rempli, en PDF, par exemple carnet-premier-site-nom-prenom.pdf.

La remise, dans le devoir Teams « Premier site », avant la fin de la séance 4 :

  1. le lien de votre dépôt GitHub, public ;
  2. le lien de votre site en ligne ;
  3. votre carnet en PDF, nommé carnet-premier-site-nom-prenom.pdf.

Avant d'envoyer, ouvrez les deux liens dans une fenêtre de navigation privée : Ctrl+Maj+N dans Chrome et Edge, Ctrl+Maj+P dans Firefox (Cmd au lieu de Ctrl sur Mac). S'ils ne s'ouvrent pas, ils ne sont visibles que par vous. Essayez aussi le site sur votre téléphone.

Ce qui compte

  • Le site est en ligne et tourne, sur ordinateur comme sur téléphone.
  • Le socle commun est respecté.
  • Vos choix d'ergonomie se voient, et le carnet les explique.
  • Vous savez expliquer votre code et ce que l'IA a fait pour vous.

Un projet ★ fini vaut mieux qu'un ★★★ cassé. Vous reprendrez la même chaîne pour le site de veille de l'examen.