Des slides en Markdown
Partie 1
Du texte qui prend vie
Les fragments
Chaque élément apparaît à la touche suivante, avec son propre effet :
- Apparition simple
- Montée depuis le bas
- Arrivée par la gauche
- Un élément qui grossit
- Mise en évidence en rouge
- Visible, puis estompé
Changer d’avis en direct
On documente son projet la veille du rendu au fil de l’eau.
Les classes strike et highlight-red se posent sur un simple <span>.
Documentez.
Au fil de l'eau.
1
repo par équipe, du premier commit à la soutenance
Partie 2
Auto-Animate : les éléments se déplacent tout seuls
Un projet, étape par étape
Un projet, étape par étape
Un projet, étape par étape
Les blocs qui portent le même data-id d’une slide à l’autre sont animés : position, taille, couleur.
Documenter
Documenter
- Un journal de bord par personne
- Les choix techniques et leurs raisons
- Les fichiers sources dans le repo
Le titre a glissé à sa place : même data-id, tailles différentes.
Du code, ligne par ligne
const int LED = 13;
void setup() {
pinMode(LED, OUTPUT);
}
void loop() {
digitalWrite(LED, HIGH);
delay(500);
digitalWrite(LED, LOW);
delay(500);
}
Chaque appui sur → surligne le bloc suivant (data-line-numbers).
Partie 3
Des fonds en plein écran
Une photo en fond
data-background-image, avec une opacité réglable pour garder le texte lisible.
Photo : carte électronique du robot Otto, MakerSpace UniLaSalle Amiens.
Du code en toile de fond
- Le fond a sa propre transition (
data-background-transition) - Le texte, lui, garde la sienne
Photo : « a computer screen with a bunch of code on it » par Chris Ried, via Unsplash, sous licence Unsplash.
Une page web en fond : la page de l’atelier, en direct. Cliquez, faites défiler.
Partie 4
Naviguer autrement
Des slides en profondeur
Cette slide a des sous-slides : descendez avec ↓.
Pratique pour ranger des détails qu’on ne montre que si on a le temps.
Détail 1 : un diagramme
graph LR
A[Besoin] --> B[Cahier des charges]
B --> C[Conception]
C --> D[Tests]
D -.vérifie.-> A
Détail 2 : une formule
La loi d’Ohm, rendue par KaTeX :
Des images empilées
Changes, commit, push : les captures se superposent au même endroit (r-stack).
Une transition zoom
Pour une seule slide, avec data-transition="zoom".
Au clavier, pendant la séance
| Touche | Effet |
|---|---|
| →, Espace | Slide ou fragment suivant |
| ↓ | Sous-slide |
| Échap ou O | Vue d’ensemble de tout le deck |
| S | Vue présentateur (notes, chrono) |
| F | Plein écran |
| B ou . | Écran noir (pour reprendre l’attention) |
| Alt + clic | Zoom sur une zone de la slide |
| G | Aller à une slide par son numéro |
Et dans l’URL : ?view=scroll pour lire le deck comme une page, ?print-pdf pour l’exporter.
À vous de jouer.
Un fichier Markdown, layout: slides, et c’est parti.
