Ce qu’il faut savoir, en 4 idées

• 1. Un fichier HTML unique peut contenir la structure (HTML), l’apparence (CSS) et le comportement (JavaScript) — d’où la possibilité de l’envoyer par courriel ou de l’héberger n’importe où.
• 2. Lisibilité avant tout : demander à l’IA un code commenté et indenté, qui se corrige sans tout régénérer.
• 3. Sécurité de base, en 2 réflexes : jamais de mot de passe, clé API ou information personnelle d’élève dans un prompt ; se méfier des bibliothèques externes non reconnues.
• 4. Où regarder quand ça bloque : clic droit -> « Inspecter » (F12) affiche les erreurs, utiles à copier-coller à l’IA.

Démonstration et vocabulaire

• Jeu : IA ou IAG ?
• Un peu de vocabulaire

Repères pratiques

• .txt (format texte standard) et .md (format markdown = texte enrichi).
• Les couleurs RÉCIT MST : #0069bf, #faa22a, #384f5c — un sélecteur de couleurs (color picker) peut être utile.

Le problème et la solution

• Problème observé : chaque page générée séparément a un style différent, oublie des règles de sécurité ou d’accessibilité, et il faut tout redemander.
• Solution : un espace de travail dans l’outil d’IA (Projet dans Claude, GPT personnalisé, ou équivalent) qui garde en mémoire des instructions permanentes et des documents de référence.
• Résultat : chaque nouvelle page respecte automatiquement les mêmes standards, sans tout répéter à chaque prompt.

Démonstration du robot de Pierre

• C'est quoi ? Voir l'onglet « Robot personnalisé » — page Vocabulaire
• Contenu détaillé du robot personnalisé
• Instructions complètes de Pierre (version octobre 2026)
• Éléments techniques et de sécurité utilisés au MST
• Télécharger tous les documents

Note : Ces fichiers ne sont pas conçus pour être utilisés tels quels. Il revient à chacun de construire son propre assistant personnalisé, en cohérence avec ses valeurs pédagogiques et ses intentions.

Construisez votre robot

• 1. Instructions de style — 3 à 5 phrases : couleurs, ton, règles graphiques à respecter chaque fois.
• 2. Règles techniques non négociables — ex. : fichier autonome, textes alternatifs, accessibilité clavier.
• 3. Documents à joindre — gabarits, guides ou extraits de programme déjà en main.

Simuler un robot avec un fichier joint - brise glace

• 1. Voir cette page qui contient des exemples de requêtes et un fichier à joindre (résumé des documents du robot personnalisé présenté).
• 2. Utiliser votre IAg préférée, joidre le fichier HTML et coller la requête sélectionnée.
• 3. Analyser la réponse et/ou demander un guide du maître.

Exemple de requête

• Rôle : développeur pédagogique créant des pages HTML éducatives simples et sécuritaires. Tâche : simulateur interactif où l’élève fait varier la masse et le volume d’un objet pour voir la densité se calculer en temps réel. Format : un seul fichier HTML autonome, sans dépendance externe, en français, avec code commenté.

Programmer votre page HTML

• Reprendre l’idée de page HTML inscrite dans le formulaire du début d’atelier.
• Tester après chaque génération — ne pas empiler plusieurs demandes sans vérifier.
• Lire l’erreur dans la console (F12) avant de redemander à l’IA ; copier l’erreur exacte plutôt que de redécrire le problème.

Retour et dépannage

• Collecte de 2-3 problèmes rencontrés ; démonstration en direct de la stratégie de correction (isoler le problème, faire expliquer une section du code par l’IA plutôt que de la refaire au complet).
• Important : bien structurer ses documents, penser aux différentes versions possibles d’une même page.

Comment diffuser

• Tutoriel pour partager une page HTML

Piège à connaître

• Une page conçue pour fonctionner en ouverture locale (file://) peut se comporter différemment une fois hébergée en ligne (ex. : une vidéo YouTube intégrée qui fonctionne en ligne mais pas en local, ou l’inverse).

Retour collectif

• Qu’est-ce qui a été le plus utile ?
• Qu’est-ce qui reste flou ?

Trousse IA

• Tous nos documents — trousse IA en science et technologie

Besoin d’aide ?

• L’ECV, les mercredis AM
• mst@recit.gouv.qc.ca