Apprendre à concevoir avec ChatGPT
ChatGPT sert ici d’exemple guidé. Vous pouvez utiliser un autre assistant IA si vous disposez des mêmes fonctions ; les critères restent la clarté de la consigne, la vérification et votre autonomie.
Prérequis : module 01. Objectif général : conduire une démarche de conception assistée par IA sans perdre sa capacité à expliquer, reproduire et vérifier.
Votre progression reste uniquement dans ce navigateur. Elle peut être effacée.
Dans ce module — Accès rapide
1. Compétences et critères de réussite
Expliquer en termes simples ce qu’est un modèle conversationnel et pourquoi ses réponses peuvent être fausses.
Rédiger une demande précisant objectif, contexte, contraintes, format et critères de réussite.
Décomposer un projet numérique en étapes compréhensibles et vérifiables.
Fournir un fichier pertinent, protéger les données personnelles et contrôler l’analyse obtenue.
Repérer une réponse incertaine, demander des preuves, recouper et tester.
Reproduire une tâche élémentaire sans IA et tenir un journal des décisions.
2. Séquence pédagogique et temps
Durées indicatives : les temps de séance et de TP sont des estimations pédagogiques non chronométrées ; des activités peuvent se recouper. Le total affiché ne constitue pas une durée réellement mesurée ni garantie.
Séance A (1 h 30) : fonctionnement et limites des réponses IA.
Séance B (2 h) : construire et améliorer un prompt.
Séance C (1 h 30) : dialogue de conception et découpage en tâches.
Séance D (1 h 30) : travailler avec des fichiers et des extraits.
Séance E (1 h 30) : erreurs, vérification et sécurité.
Séance F (2 h) : projet fil rouge, évaluation et correction.
3. Comprendre le rôle de ChatGPT
ChatGPT est un assistant conversationnel capable de proposer des explications, des plans, des textes et du code. Il génère des réponses à partir du contexte fourni et de ses capacités ; il ne garantit ni la vérité ni le bon fonctionnement de chaque proposition. Ses outils et accès externes dépendent de la configuration disponible.
Différence fondamentale : une réponse plausible n’est pas une preuve. Pour le code, le test réel dans un navigateur reste indispensable. Pour un fait récent, il faut vérifier une source actuelle et sa date.
Comprendre et essayer — exemple guidé
Je vois : ChatGPT peut proposer un texte convaincant sans garantir l’exactitude de ses affirmations ni le fonctionnement d’un code.
J’essaie : Lisez une réponse proposant trois avantages d’un outil numérique. Classez chaque phrase en fait à vérifier, suggestion ou opinion.
Je vérifie : Repérez au moins une affirmation qui exige une source datée ou un essai réel ; expliquez pourquoi la fluidité du texte ne suffit pas.
Autre façon de faire : Sans IA ni compte, utilisez une réponse fictive du cours ou inventez trois affirmations plausibles à classer.
Pour reprendre plus tard : Conservez la liste des affirmations non vérifiées et la source ou le test à rechercher.
4. Anatomie d’une bonne instruction
Une instruction utile précise cinq éléments : (1) objectif ; (2) contexte et public ; (3) contraintes ; (4) résultat attendu ; (5) mode de vérification. Le mot « prompt » désigne simplement la demande transmise au modèle.
Exemple faible : « Fais-moi un site moderne. »
Exemple exploitable : « Je débute en HTML. Je veux une page de présentation d’un atelier de création numérique. Public : adultes débutants. Contraintes : un seul fichier index.html, sans bibliothèque externe ; lisible sur téléphone. Résultat : propose d’abord un plan de la page et explique chaque section sans écrire le code. Vérification : donne une liste de 5 points que je pourrai contrôler moi-même. »
Pourquoi cela fonctionne mieux : le résultat est borné, le niveau de langage est adapté et l’apprenant garde une étape de validation avant la production.
Voir un exemple, essayer et vérifier
Je vois — exemple concret : Avant : « Fais-moi un site ». Après : « Propose la structure d’une page présentant trois créations, pour un public débutant, avec un titre, trois rubriques et une navigation mobile. Ne crée pas de faits manquants. Réponds sous forme de plan. »
J’essaie — petit geste : Soulignez dans la seconde demande l’objectif, le contexte, les contraintes et le format. Ajoutez une vérification des informations fournies.
Je vérifie — si cela ne fonctionne pas : Une réponse détaillée peut être inventée : comparez chaque information à votre fiche de besoin.
Comprendre et essayer — exemple guidé
Je vois : Une instruction précise la tâche, le public, les limites, la forme du résultat et son contrôle.
J’essaie : Rédigez une consigne demandant une présentation de 120 mots d’un atelier pour débutants, avec un ton simple, deux contraintes et une vérification finale.
Je vérifie : Soulignez les cinq éléments : objectif, contexte ou public, contraintes, format, vérification. Complétez tout élément absent.
Autre façon de faire : Sans accès à une IA, échangez votre consigne avec un proche ou relisez-la en vous demandant si une autre personne pourrait l’exécuter sans deviner.
Pour reprendre plus tard : Gardez la consigne initiale, sa version améliorée et le point qui restait ambigu.
5. Dialoguer par étapes plutôt que tout demander d’un coup
Étape 1 — Définir le besoin : à qui s’adresse le projet, quel usage et quel contenu ?
Étape 2 — Demander deux options et leurs compromis, puis choisir.
Étape 3 — Produire une petite partie du résultat.
Étape 4 — Expliquer les décisions et les termes inconnus.
Étape 5 — Tester et signaler les écarts observés.
Étape 6 — Corriger uniquement le problème identifié ; conserver une version de référence.
Règle pédagogique : avant de demander la suite, reformuler en une phrase ce qui vient d’être réalisé. Si cette reformulation est impossible, revenir à l’explication.
Comprendre et essayer — exemple guidé
Je vois : Un dialogue en plusieurs étapes permet de corriger une direction avant de produire un résultat long.
J’essaie : Pour une page de présentation, formulez successivement : le besoin, deux options avec leurs compromis, puis la rédaction d’un seul paragraphe.
Je vérifie : Vérifiez qu’un choix explicite a été fait entre les options avant la rédaction ; notez ce qui aurait été perdu dans une demande unique.
Autre façon de faire : Sur papier, simulez les trois échanges et comparez les deux options sans solliciter de service en ligne.
Pour reprendre plus tard : Notez l’option retenue, sa raison et l’étape suivante à demander.
6. Concevoir un mini-projet : fiche de cadrage
Projet fil rouge : page de présentation d’une expérience numérique librement exploratoire. La page comportera un titre, une courte introduction, trois sections et un lien de contact fictif. Aucun développement n’est requis pendant cette séance.
Besoin : quel problème ou désir le site sert-il ?
Public : qui le consultera et sur quel appareil ?
Contenus : quels textes, images et liens sont nécessaires ?
Contraintes : temps, accessibilité, confidentialité, absence de paiement ?
Critères d’acceptation : comment constater que le résultat répond au besoin ?
Comprendre et essayer — exemple guidé
Je vois : Une fiche de cadrage fixe ce que le mini-projet doit rendre possible avant de choisir les outils.
J’essaie : Rédigez une fiche pour une page annonçant un atelier : public, objectif, contenu essentiel, contraintes et critère de réussite.
Je vérifie : Une autre personne doit pouvoir dire ce qui est inclus, ce qui ne l’est pas et comment reconnaître une page terminée.
Autre façon de faire : Utilisez une feuille ou un éditeur de texte hors ligne ; aucune génération par IA n’est nécessaire.
Pour reprendre plus tard : Conservez la fiche datée et une question à clarifier avant de commencer.
7. Utiliser des fichiers de manière responsable
Selon les fonctions disponibles, on peut joindre un document texte, un PDF, une image ou un fichier de code pour demander un résumé, une explication ou une comparaison. Le modèle peut mal lire un document, ignorer un détail ou confondre des versions. Toujours vérifier le nom, la version, les extraits cités et les modifications réellement effectués.
1. Préparer une copie de travail ; garder l’original intact.
2. Retirer mots de passe, clés API, identifiants privés et données personnelles non nécessaires.
3. Nommer clairement les fichiers : index_v1.html, cahier_charges_v1.docx.
4. Préciser la tâche : expliquer, comparer ou proposer une modification ciblée.
5. Demander les passages exacts justifiant les conclusions.
6. Ouvrir et tester le fichier de sortie avant de remplacer une version publiée.
Comprendre et essayer — exemple guidé
Je vois : Partager un fichier avec une IA suppose de comprendre son contenu, ses données sensibles et les conditions de traitement.
J’essaie : Imaginez un document contenant noms, adresses et notes internes. Dressez les éléments à retirer ou anonymiser avant tout partage.
Je vérifie : Avant tout partage, retirez les noms, coordonnées, identifiants et notes sensibles ; vérifiez aussi les détails qui permettraient de reconnaître indirectement une personne. Assurez-vous que le partage est autorisé et nécessaire.
Autre façon de faire : Travaillez sur un document fictif local, sans envoyer de fichier à un service externe.
Pour reprendre plus tard : Notez les suppressions prévues et les points de confidentialité à confirmer.
8. Identifier les erreurs et les incertitudes
Invention de faits — L’IA peut affirmer une information non vérifiée : demander la source et la contrôler.
Code incorrect — Une syntaxe peut sembler convaincante et pourtant échouer : tester le fichier.
Oubli d’une contrainte — Comparer la sortie avec la demande initiale point par point.
Modification non souhaitée — Examiner les différences avant/après et garder une sauvegarde.
Source périmée — Vérifier la date de publication et la documentation officielle actuelle.
Confiance excessive — Exprimer les incertitudes ; ne pas confondre assurance du ton et fiabilité.
Comprendre et essayer — exemple guidé
Je vois : Une erreur peut être une invention factuelle, une consigne mal suivie ou une certitude injustifiée.
J’essaie : Examinez trois phrases d’une réponse fictive : un chiffre sans source, une recommandation et une affirmation formulée comme certaine. Identifiez leur statut.
Je vérifie : Pour chacune, indiquez ce qu’il faudrait contrôler et si la formulation devrait signaler une incertitude.
Autre façon de faire : Analysez un extrait de texte inventé sur papier plutôt que de demander une réponse à une IA.
Pour reprendre plus tard : Gardez le tableau « affirmation / risque / vérification » pour le reprendre.
9. Méthode de vérification en quatre niveaux
1. Niveau 1 — Compréhension : puis-je expliquer la réponse avec mes mots ?
2. Niveau 2 — Cohérence : répond-elle à toutes les contraintes de la consigne ?
3. Niveau 3 — Preuve : quelle documentation, quel extrait ou quel test la confirme ?
4. Niveau 4 — Reproduction : puis-je obtenir le même résultat et diagnostiquer une erreur simple sans l’IA ?
Exemple : si ChatGPT annonce que la page est responsive, ouvrir le fichier dans le navigateur, réduire la largeur de la fenêtre et vérifier l’absence de débordement horizontal. Une affirmation ne remplace pas l’observation.
Comprendre et essayer — exemple guidé
Je vois : Vérifier exige des méthodes différentes selon qu’il s’agit d’un fait, d’un calcul, d’un code ou d’un usage réel.
J’essaie : Prenez quatre résultats fictifs : une date, un total, un extrait HTML et une consigne de navigation. Choisissez un contrôle adapté à chacun.
Je vérifie : Associez la date à une source datée, le total à un recalcul, le HTML à un essai dans le navigateur et la navigation à un test d’usage.
Autre façon de faire : Effectuez le recalcul à la main et décrivez les trois autres tests sans outil payant.
Pour reprendre plus tard : Consignez pour chaque résultat la preuve obtenue ou le test restant.
10. Sécurité, droit et responsabilité
Ne jamais copier de secrets d’accès dans une conversation. Vérifier les droits d’utilisation des images et des textes ; distinguer ses propres créations, les contenus sous licence et les ressources dont les droits sont inconnus. Ne pas publier des données personnelles sans base légitime. La responsabilité de la publication reste humaine.
Comprendre et essayer — exemple guidé
Je vois : La possibilité technique de produire ou partager un contenu ne garantit ni le droit de le faire ni son innocuité.
J’essaie : Étudiez un scénario fictif : publier une photo trouvée en ligne avec le nom d’une personne. Relevez les autorisations et risques à examiner.
Je vérifie : Distinguez droit d’utilisation de l’image, données personnelles, attribution éventuelle et responsabilité éditoriale ; ne publiez rien pendant l’exercice.
Autre façon de faire : Utilisez uniquement un scénario écrit ou une image dont vous êtes l’auteur, sans créer de compte.
Pour reprendre plus tard : Notez les autorisations à obtenir et une alternative sûre si elles manquent.
11. Travaux pratiques guidés
Effectuez les activités, puis cochez-les uniquement après vérification réelle. Les réponses sont conservées sur cet appareil si le navigateur autorise le stockage local.
TP 1 — Améliorer une demande · 30 min
Consigne : Transformer « Fais un beau site » en demande comportant les cinq éléments du §4. Échanger les demandes entre apprenants ; relever les éléments absents.
Livrable : Prompt initial, prompt corrigé et justification en cinq lignes.
Repère personnel : cocher une case indique votre propre suivi. Cela ne déclenche aucun contrôle automatique du livrable ni aucune validation de compétence.
Approfondissement et exemple corrigé
Faire apparaître explicitement : objectif, contexte, contraintes, format de sortie, vérification. Justifier au moins deux choix de formulation et définir une vérification observable.
Exemple : « Pour une page de présentation destinée à des débutants (contexte), propose trois titres simples (objectif), sans jargon (contrainte), dans un tableau titre / intention (format), puis indique comment vérifier leur compréhension auprès d’un lecteur (vérification). » Un bon corrigé explique pourquoi chaque élément est utile, sans considérer la réponse de l’IA comme une preuve.
TP 2 — Conception sans code · 45 min
Consigne : Demander un plan de page pour une petite exposition numérique. Comparer deux structures, choisir et rédiger un cahier des charges de dix lignes.
Livrable : Plan retenu et trois critères de réussite observables.
Approfondissement — comparaison argumentée
Comparer les deux architectures selon trois critères explicites : clarté du parcours, accès sur écran mobile et action principale offerte au visiteur. Conserver une justification écrite du choix retenu.
Réalisation possible — Exemple possible : deux propositions de structure, l’une avec une seule page et trois sections, l’autre avec quatre pages. Pour un petit atelier, retenir une page si le public retrouve rapidement Programme et Contact ; choisir plusieurs pages si les contenus deviennent longs.
Pourquoi ce choix ? — le meilleur plan n’est pas universel ; le choix doit être relié au public et aux critères d’usage.
Comment vérifier et ajuster — Faire tester le parcours « accueil vers contact » et expliquer le compromis, plutôt que désigner une architecture universelle.
TP 3 — Analyser un fichier · 45 min
Consigne : Réutiliser le fichier index.html du TP 2 du module 1, qui contient déjà les balises h1, p et a et aucune donnée personnelle. Fournir ce fichier à l’assistant si cette fonction est disponible ; sinon copier son code dans la conversation. Demander l’explication des trois balises, puis ouvrir le fichier dans un éditeur pour les retrouver.
Livrable : Tableau « élément / rôle / preuve dans le fichier ». Aucun fichier externe supplémentaire n’est nécessaire.
Approfondissement — preuves issues du fichier
Pour chaque affirmation de l’assistant, citer la balise ou l’extrait exact du fichier qui la confirme. Marquer « non vérifié » si la preuve manque, puis contrôler dans l’éditeur.
Réalisation possible — Exemple possible : l’IA affirme que le lien « #contact » fonctionne. Dans le fichier, rechercher id="contact". Si seul id="contacts" existe, l’affirmation est incorrecte et le lien doit être ajusté.
Pourquoi ce choix ? — distinguer une explication plausible d’une propriété réellement visible dans le code fourni.
Comment vérifier et ajuster — Distinguer ce que le code prouve de ce que l’IA suppose ; ne pas conclure sur la seule fluidité de son explication.
TP 4 — Mettre une réponse à l’épreuve · 45 min
Consigne : Repartir du fichier index.html du TP 2 du module 1. Dans une copie de travail, remplacer volontairement l’adresse du lien « Découvrir le Web » par href="documentation-inexistante.html". Ouvrir la page dans un navigateur, cliquer sur ce lien et constater l’échec. Demander à l’IA une méthode de diagnostic, puis rétablir href="https://developer.mozilla.org/fr/" et retester (connexion Internet nécessaire pour le lien externe).
Livrable : Journal de test avec problème, hypothèse, action et constat. Conserver l’original intact.
Approfondissement — protocole reproductible
Consigner l’état initial, l’action provoquant l’erreur, le résultat observé, l’hypothèse, la correction et le nouveau test. Refaire le test après la correction et noter son résultat réel.
Réalisation possible — Exemple possible : relever « le bouton ne répond pas », identifier l’élément concerné, proposer une modification, enregistrer une copie, cliquer à nouveau et consigner le résultat observé.
Pourquoi ce choix ? — une proposition de correction n’est pas une correction validée tant que le test n’a pas été répété.
Comment vérifier et ajuster — Un test non exécuté doit rester « à vérifier ». En cas d’échec, revenir à la copie précédente et noter le symptôme.
TP 5 — Concevoir en autonomie · 55 min
Consigne : Sans IA pendant 20 minutes, rédiger les rubriques d’une page « Mon atelier numérique ». Utiliser ensuite un assistant IA de son choix (par exemple ChatGPT) pour demander une critique, sans lui laisser réécrire le projet. Terminer par une version personnelle et argumentée.
Livrable : Deux versions et note réflexive.
Approfondissement — autocritique documentée
Comparer la version autonome et la version après retour de l’IA ; identifier un apport utile, une suggestion refusée et un risque ou une incertitude restant à examiner.
Réalisation possible — Exemple possible : l’IA propose de publier immédiatement. Décision : refuser pour l’instant, car les liens et l’accessibilité n’ont pas été vérifiés. Prochaine action : tester les liens et demander un accord explicite avant publication.
Pourquoi ce choix ? — une autonomie démontrée comprend la capacité de contester une proposition et d’expliquer la version finale.
Comment vérifier et ajuster — Une justification autonome précise le risque, la décision et la preuve nécessaire pour la réexaminer.
Entraînement interactif facultatif — V0.6.0
Essayer, se tromper et recommencer : ces questions sont distinctes de l’autoévaluation écrite et ne constituent ni une note ni une validation de compétence. Aucune réponse n’est enregistrée.
12–13. Autoévaluation et corrigés
Répondez d’abord sans consulter le corrigé. Aucun score automatique ne remplace l’évaluation pédagogique.
Consulter le corrigé
La demande adressée à l’assistant.
Pourquoi cette réponse ? Un prompt est la demande formulée à un assistant ; il ne désigne ni une réponse ni un programme.
Exemple ou vérification autonome Écrivez une demande simple puis identifiez la phrase qui précise la tâche attendue.
Consulter le corrigé
La génération peut produire des erreurs, des omissions ou des inventions.
Pourquoi cette réponse ? La fluidité d’une réponse ne garantit pas son exactitude : un modèle peut omettre un fait ou en produire un faux.
Exemple ou vérification autonome Demandez une information vérifiable puis confrontez-la à une source indépendante.
Consulter le corrigé
Objectif, contexte, contraintes, format de sortie, vérification.
Pourquoi cette réponse ? Ces cinq éléments rendent la demande compréhensible et son résultat contrôlable ; sans critère de vérification, une sortie séduisante peut rester inutilisable.
Exemple ou vérification autonome Soulignez les cinq éléments dans votre propre consigne ; ajoutez celui qui manque.
Consulter le corrigé
Pour valider la structure avant d’investir dans la réalisation.
Pourquoi cette réponse ? Le plan permet de vérifier l’organisation et le besoin avant de consacrer du temps au code ; corriger une structure à ce stade coûte moins cher.
Exemple ou vérification autonome Dessinez deux organisations possibles de la page et justifiez celle que vous retenez.
Consulter le corrigé
La proposition est une hypothèse ; la validation repose sur des critères et tests.
Pourquoi cette réponse ? Une proposition de l’IA est à examiner ; seule une vérification fondée sur des critères observables permet de conclure qu’elle convient.
Exemple ou vérification autonome Prenez une proposition de page et vérifiez un lien et un affichage mobile avant de l’accepter.
Consulter le corrigé
Secrets, identifiants et données personnelles inutiles.
Pourquoi cette réponse ? Les secrets et données personnelles non nécessaires peuvent être divulgués lors du partage ; ils n’aident pas à comprendre un problème de code.
Exemple ou vérification autonome Préparez un extrait fictif de fichier en remplaçant identifiants et informations privées.
Consulter le corrigé
Ouvrir le site sur plusieurs largeurs et observer les débordements.
Pourquoi cette réponse ? Le responsive se constate dans le navigateur : une déclaration dans le CSS ou une réponse de l’IA ne suffit pas à prouver l’absence de débordement.
Exemple ou vérification autonome Testez la page à 375 px et 768 px ; vérifiez lisibilité, navigation et défilement horizontal.
Consulter le corrigé
Tracer l’erreur, les actions effectuées et le résultat observable.
Pourquoi cette réponse ? Un journal de test relie un problème reproductible aux actions entreprises et au résultat obtenu ; il facilite le diagnostic et la reprise par une autre personne.
Exemple ou vérification autonome Consignez : environnement, étape, résultat attendu, résultat observé, correction et nouveau test.
Consulter le corrigé
Revenir à la version stable, isoler le changement et retester.
Pourquoi cette réponse ? Une correction peut créer une régression ; revenir à un état connu puis isoler le changement permet d’identifier la cause.
Exemple ou vérification autonome Comparez avant/après, annulez la dernière modification et refaites le test qui échouait.
Consulter le corrigé
Expliquer, refaire et dépanner une tâche simple sans assistant.
Pourquoi cette réponse ? L’autonomie se démontre par une action comprise et reproductible, pas seulement par la qualité du résultat généré par l’assistant.
Exemple ou vérification autonome Modifiez un titre et réparez un lien volontairement cassé sans solliciter l’IA.
14. Grille de validation du module
Grille non certifiante : le barème sur 20 et le seuil de 12/20 sont des repères indicatifs pour relire les livrables. Ils ne produisent aucune validation automatique ni certification. Une appréciation humaine des preuves, des tests et de l’autonomie est indispensable.
Barème indicatif sur 20 : prompt complet (4), cahier des charges cohérent (4), analyse de fichier (3), protocole de vérification (4), autonomie et justification (5). Validation proposée : 12/20 minimum, avec démonstration obligatoire d’un test et d’une explication sans IA. En cas de difficulté, reprendre le TP concerné.
15. Étude de cas : Récits Vivants
Situation : une page de découverte contient un lien ou un QR code vers une autre page. L’assistant peut suggérer une correction, mais l’auteur doit vérifier l’adresse cible, le chemin relatif, le comportement sur mobile et l’absence de régression. Cette situation illustre la différence entre déléguer une tâche et déléguer son jugement.
16. Transition vers le module 03 : HTML5
À la fin de ce module, l’apprenant possède un cahier des charges simple, un plan de page et des critères de test. Le module suivant transformera cette conception en structure HTML : titres, paragraphes, liens, images et organisation sémantique.
Note de mise à jour : les interfaces, outils connectés et limites d’usage de ChatGPT évoluent. Les captures d’écran et procédures seront datées lors de leur ajout ; les compétences de conception et de vérification restent la référence.
Découvrir le programme du module 03 →