← Retour Accueil

Fiche Atelier 3

Les Formats de Sortie (De Word à l'Interactif)
🎯 Objectif
Gérer parfaitement les formules mathématiques et créer des supports interactifs.
🛠️ Outils
ChatGPT, Gemini, Mistral, Claude, HTML Online Viewer, Navigateur Web

Phase 1 : Les Formats Classiques (Pour Tous)

Avant de parler technique, comment récupérer simplement un cours d'Histoire, d'Anglais ou de Français généré par l'IA ?

Prompt "Généraliste" "Agis comme un expert pédagogique. Crée une fiche de révision structurée sur [Votre Sujet : ex: La Révolution Française / The Present Perfect].
Utilise des titres clairs, des points clés (bullet points) et un tableau récapitulatif à la fin."

📁 4 Méthodes pour récupérer votre contenu :

  • 📋
    1. Le Copier-Coller Intelligent (Word/LibreOffice)

    Ne sélectionnez pas le texte avec la souris (vous risquez de copier le fond gris ou des icônes parasites).

    La bonne méthode :
    1. Cliquez sur l'icône "Copier" située en bas de la réponse de l'IA.
    2. Dans votre traitement de texte, faites Ctrl + V.

    ✅ Avantage : Conserve le gras, les titres et la structure des tableaux.

  • 💾
    2. La génération de Fichiers (PDF / Docx)

    Demandez à l'IA de fabriquer le fichier pour vous. C'est idéal pour distribuer directement aux élèves.

    Prompt : "Génère un fichier PDF téléchargeable de cette fiche."

    ✅ Avantage : Fichiers faciles à partager.

  • 📝
    3. Le Format Texte Brut (.txt)

    Parfois, les ENT (Pronote, EcoleDirecte) "cassent" la mise en forme quand on colle du texte riche.

    Prompt : "Donne-moi cette fiche au format texte brut, sans mise en forme."

    ✅ Avantage : Compatibilité universelle (mails, vieux logiciels, ENT).

  • 💻
    4. Le Format Markdown (.md)

    Le format préféré des outils modernes (et des profs qui codent !). C'est du texte simple avec des symboles pour la mise en forme.

    Prompt : "Donne-moi le code Markdown de cette fiche."

    ✅ Usage : ChatMD, Mermaid etc...


Phase 2 : Le Format "Web & Mobile" (HTML)

C'est la révélation de cet atelier. Le HTML permet d'avoir des couleurs, des formules parfaites, et de s'adapter aux téléphones des élèves.

Prompt 2 "Transforme cette fiche de révision en une page HTML à copier. Ajoute en bas un QCM interactif avec correction et feedback immédiat."

Comment visualiser le résultat ?

  1. L'IA vous donne un bloc de code. Copiez-le .
  2. Visualisation : Allez sur le site HTML Viewer Online et collez le code pour voir le résultat immédiat.
  3. Affinez votre résultat : Le premier jet n'est jamais définitif. Considérez l'IA comme un stagiaire : vous devez lui faire des retours pour améliorer le travail. (ex : "Ajoute 3 questions au QCM", "Fais un design modern et une mise en page adapté au mobile", "Simplifie le texte"...).
    Une fois satisfait, copiez le nouveau code complet donné par l'IA et remplacez l'ancien code dans HTML Viewer Online.
  4. Modification manuelle : Si vous voulez changer un mot ou une phrase dans l'éditeur HTML Viewer Online, recherchez le mot avec Ctrl + F et remplacez-le directement.
  5. Sur HTML Online Viewer cliquez sur le bouton"Export" .
    Allez dans votre dossier Téléchargements. Vous trouverez un fichier avec un nom générique (type online_viewer_net.html.
    Action : Renommez-le en cours.html et double-cliquez dessus : il s'ouvre directement dans votre navigateur !
  6. Testez l'affichage mobile : Réduisez la largeur de la fenêtre de votre navigateur pour vérifier que le contenu s'adapte automatiquement aux petits écrans (comme sur un smartphone).

🔍 Zoom Technique : Le secret des formules

Si vos formules restent affichées sous forme de code (ex: $\vec{u}$), c'est qu'il manque l'interprète mathématique dans le code HTML. Vérifiez que l'IA a bien inséré ces lignes (juste avant la fin du </head> ou du </body>) :

<!-- Configuration MathJax (LaTeX) --> <script> window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] } }; </script> <!-- Chargement du script --> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
🖨️ Astuce Impression : Forcer une nouvelle page

Si vous souhaitez que le corrigé ou la partie suivante commence sur une feuille vierge lors de l'impression (ou de l'export PDF), insérez cette ligne de code à l'endroit précis où vous voulez couper la page :

<div style="page-break-after: always;"></div>

Note : Cette balise est invisible à l'écran, elle n'agit que lorsque vous faites "Imprimer" ou "Enregistrer en PDF".

💡 Ce qu'il faut retenir : les formats

  • 📄
    Word/PDF : Bien pour imprimer, mais nul pour modifier les maths.
  • 🌐
    HTML : Le format magique. Interactif, joli, adaptatif (mobile) et gère très bien les maths.