Files

T

2026-06-02 23:24:21 +02:00

3.8 KiB

Raw Blame History

name, description

name	description
presentation-structure	Connaissance du format des slides de présentation, du système de niveaux, de la navigation et de la structure des sections

Skill Presentation Structure

Connaissance de la façon dont la présentation dans presentation/index.html est structurée.

Emplacement du fichier

presentation/index.html — une présentation HTML mono-fichier avec CSS et JS inline.

Format des slides

Chaque slide est un div avec data-slide (numéro séquentiel) et éventuellement data-level (niveau de journey aux points de transition) :

<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Level transition slide — sets new level for this slide and all following -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
    <p class="section-desc">Level: Low — description of this section</p>
</div>

<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>

Système de niveaux de la Journey Bar

La présentation utilise un système à 4 niveaux au lieu de pourcentages cumulés :

Les niveaux sont définis via l'attribut data-level sur les slides de transition clés (section dividers)
Toutes les slides après une slide data-level héritent de ce niveau jusqu'à la transition suivante
La journey bar se remplit à 25% / 50% / 75% / 100% pour Low / Medium / High / Pro
La barre est masquée sur la slide 1 (title slide) ; à partir de la slide 2, elle est affichée
Les slides avant le premier data-level (slides 2–9) affichent une barre vide (aucun niveau encore défini)
Un .level-badge est injecté par JS sur le <h1> des slides portant data-level — ne le code PAS en dur dans le HTML

Transitions de niveaux par section

Section	Plage de slides	data-level	Hauteur de barre
Part 0: Introduction	Slides 1-4	(aucun)	masquée / vide
Part 1: Prerequisites	Slides 5-9	(aucun)	vide
Part 2: Better Prompting	Slides 10-17	`low`	25%
Part 3: Project Memory	Slides 18-24	`medium`	50%
Part 4: Structured Workflows	Slides 25-28	(hérite medium)	50%
Part 5: Domain Knowledge	Slides 29-33	`high`	75%
Part 6: Agentic Engineering	Slides 34-46	`high`	75%
Appendix	Slides 47+	(hérite high)	75%

goToSlide(n) — utilisé dans les liens de TOC, doit correspondre aux vrais numéros data-slide
totalSlides est auto-calculé depuis le DOM (document.querySelectorAll('[data-slide]').length)
Touches fléchées, Space et swipe tactile pour la navigation
Le compteur affiche current / total en bas à gauche

Règles de renumérotation

Après ajout, suppression ou réordonnancement de slides :

Renuméroter TOUS les attributs data-slide séquentiellement à partir de 1
Mettre à jour tous les appels goToSlide() dans la slide TOC/Journey Map
Le JS totalSlides s'auto-calcule — aucune mise à jour manuelle nécessaire
Vérifier qu'il n'y a ni trou ni doublon

Format des section dividers

Les section dividers utilisent la classe section-slide. Les section dividers de transition de niveau portent data-level et affichent le nom du niveau dans la description :

<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>

Le JS injectera un .level-badge (par ex. "→ Low") dans le <h1> au runtime quand le niveau change — ne l'ajoute pas manuellement en HTML.

3.8 KiB Raw Blame History Unescape Escape