90 lines
3.8 KiB
Markdown
90 lines
3.8 KiB
Markdown
---
|
||
name: presentation-structure
|
||
description: 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) :
|
||
|
||
```html
|
||
<!-- 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% |
|
||
|
||
## Système de navigation
|
||
|
||
- `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 :
|
||
1. Renuméroter TOUS les attributs `data-slide` séquentiellement à partir de 1
|
||
2. Mettre à jour tous les appels `goToSlide()` dans la slide TOC/Journey Map
|
||
3. Le JS `totalSlides` s'auto-calcule — aucune mise à jour manuelle nécessaire
|
||
4. 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 :
|
||
|
||
```html
|
||
<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.
|