Module de formation · Cours

HTML PPT · Module de formation

Un point d'entrée ciblé vers la compétence maître html-ppt qui place l'utilisateur directement sur le modèle de deck complet course-module.

Quand cette carte est sélectionnée

La galerie d'exemples associe « Utiliser cette invite » à l'exemple d'invite ci-dessus. Lorsque vous acceptez cette invite, cette carte est le bon choix si l'utilisateur souhaite exactement l'identité visuelle de course-module (voir le catalogue des decks complets en amont pour les captures d'écran et la justification).

Comment créer le deck

1. Lisez d'abord la compétence maître. Toutes les règles de création se trouvent dans design-templates/html-ppt/SKILL.md — liste de contenu/audience, règles de jetons, réutilisation de la mise en page, mode présentateur, runtime clavier et règle « ne jamais mettre de texte réservé au présentateur sur la diapositive ».
2. Partez du dossier de modèle correspondant : design-templates/html-ppt/templates/full-decks/course-module/ — copiez index.html et style.css dans le projet, conservez la classe de corps .tpl-course-module.
3. Importez le runtime partagé avec le modèle. Le index.html amont lie les CSS/JS partagés via ../../../assets/... car il se trouve à trois niveaux de profondeur dans design-templates/html-ppt/templates/full-decks/. Une fois que vous copiez index.html dans le projet, ces URLs relatives au parent ne se résolvent plus et base.css, animations.css, et runtime.js généreront des erreurs 404 — ce qui signifie que le deck ne s'active jamais et que la navigation entre les diapositives est morte. Choisissez l'une de ces deux recettes par projet :
   • Recette A — copier + réécrire (recommandée) : copiez design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css, et design-templates/html-ppt/assets/runtime.js dans un répertoire assets/ local au projet (avec assets/animations/animations.css), puis réécrivez les quatre balises <link>/<script> dans index.html de ../../../assets/... vers les chemins locaux correspondants du projet (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
   • Recette B — intégration en ligne : lisez les quatre mêmes fichiers et remplacez chaque <link rel="stylesheet" href="../../../assets/..."> par un <style>...</style> contenant le contenu du fichier, et le <script src="../../../assets/runtime.js"> par un <script>...</script> contenant runtime.js. Cela donne un seul index.html autonome. Dans les deux cas, ne livrez pas les URLs ../../../assets/... amont textuellement dans un artefact de projet — elles ne fonctionnent qu'à l'intérieur de l'arborescence.
4. Choisissez un thème. Les jetons par défaut sont satisfaisants ; si l'utilisateur souhaite une ambiance différente, remplacez par l'un des 36 thèmes de design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> et laissez T parcourir les thèmes.
5. Remplacez le contenu de démonstration, pas les classes. Le CSS ciblé .tpl-course-module ne reconnaît que les classes structurelles fournies dans le modèle — conservez-les.
6. Les notes de l'orateur vont à l'intérieur de <aside class="notes"> ou <div class="notes"> — jamais sous forme de texte visible sur la diapositive.

Attribution

Le système visuel, les mises en page, les thèmes et le modèle de runtime clavier proviennent du projet amont sous licence MIT lewislulu/html-ppt-skill. Le fichier LICENSE se trouve dans design-templates/html-ppt/LICENSE ; veuillez le conserver lors de la redistribution.