Création de Présentations Reveal.js Interactives

Le système reveals-presentation

Skill Agent reveals-creator Claude Haiku 4.5

Une méta-présentation : Reveal.js qui explique comment créer des Reveal.js !

Au programme

Qu'est-ce que Reveal.js ?
Le skill reveals-presentation
L'agent reveals-creator
Les 3 styles (collège, lycée, académique)
Navigation 2D multidirectionnelle
Fragments et animations
Structure HTML générée
Bonnes pratiques

Qu'est-ce que Reveal.js ?

Framework HTML/CSS/JavaScript pour créer des présentations web interactives

100% web : Fonctionne dans tous les navigateurs modernes
Navigation 2D : Horizontal (→) + Vertical (↓)
Animations : Fragments pour révélation progressive
Responsive : S'adapte à tous les écrans
Contrôle total : Clavier, télécommande, tactile

Pourquoi Reveal.js pour l'enseignement ?

Avantages

Révélation progressive (pédagogie)
Formules mathématiques (MathJax)
Partage facile (fichier HTML)
Pas de compte Microsoft/Google
Open source et gratuit

Usage classe

Cours magistraux
Exercices interactifs
Démonstrations mathématiques
Présentations académiques
Formations enseignants

Le skill reveals-presentation

Expertise complète en création de présentations reveal.js éducatives

3 styles adaptés : Collège, Lycée, Académique
Fragments automatiques : Révélation progressive pédagogique
Navigation 2D : Horizontal + Vertical
MathJax intégré : Formules mathématiques professionnelles
Règles d'espacement : Maximum 70% rempli (60% collège)

Appuyez sur ↓ pour voir la localisation du skill

Structure du skill

.claude/skills/reveals-presentation/ ├── SKILL.md # Instructions pour agents ├── references/ │ ├── fragments-reveals.md # ⭐ PRIORITÉ ABSOLUE │ ├── navigation-2d.md # ⭐ TRÈS IMPORTANT │ ├── animations-transitions.md # IMPORTANT │ ├── mathjax-integration.md # ESSENTIEL │ ├── reveals-best-practices.md # Bonnes pratiques │ ├── reveals-styles-guide.md # Guide des 3 styles │ └── exercices-reveals.md # Exercices avec temps └── templates/ ├── template-college.html ├── template-lycee.html └── template-academique.html

L'agent reveals-creator

Agent autonome spécialisé dans la génération de présentations reveal.js

Modèle rapide : Claude Haiku 4.5 (génération < 1 min)
Expert autonome : Utilise le skill reveals-presentation
HTML complet : Structure + CSS + JavaScript
Attente retours : Ne force pas de modifications

Appuyez sur ↓ pour voir le workflow

Workflow de l'agent (1/2)

Analyse demande : Public cible, durée, nombre de slides

Lecture guides : 6 fichiers de référence (fragments, navigation 2D, etc.)

Création contenu : Structure HTML avec fragments et navigation

Workflow de l'agent (2/2)

Configuration : Options reveal.js (navigation, transitions, MathJax)

Test : Vérification dans navigateur (optionnel)

Rapport : Détails + attente retours utilisateur

Les 3 styles disponibles

Chaque style est adapté à son public cible avec des règles précises

Appuyez sur ↓ pour voir chaque style en détail

Style Collège (6e-3e)

Caractéristiques

Police : 22px min
Densité : Max 60%
Items : 5 max
Lignes : 8 max

Style visuel

Couleurs vives
Police ludique (Comic Neue)
Animations nombreuses
Boxes colorées

Style Lycée (2nde-Tale)

Caractéristiques

Police : 20px min
Densité : Max 70%
Items : 6-7 max
Lignes : 10-12 max

Style visuel

Équilibre rigueur/accessibilité
Police moderne (Roboto)
Formules mathématiques
Couleurs professionnelles

Style Académique (Conférences)

Caractéristiques

Police : 18px min
Densité : Max 70%
Items : 7 max
Lignes : 12-14 max

Style visuel

Sobriété et élégance
Police serif (Lato)
Références bibliographiques
Couleurs discrètes

Tableau comparatif

Critère	Collège	Lycée	Académique
Police	22px (Comic Neue)	20px (Roboto)	18px (Lato)
Densité max	60%	70%	70%
Items max	5	6-7	7
Animations	Nombreuses	Équilibrées	Sobres
Couleurs	Vives	Professionnelles	Discrètes

Navigation 2D multidirectionnelle

Structurer la présentation en 2 dimensions : horizontal ET vertical

Axe horizontal (→) : Progression principale
Axe vertical (↓) : Détails, approfondissements
Mode grid : Conservation index vertical
Retour auto top : Évite de rester au niveau vertical

Cette présentation utilise la navigation 2D ! Essayez ↓

Quand utiliser la navigation verticale ?

Cas d'usage

Démonstrations étape par étape
Exercices avec indices progressifs
Approfondissements optionnels
Différents niveaux de difficulté
Plus de 2 images à afficher

Règles

Première slide : vue d'ensemble autonome
Profondeur max : 4-5 slides verticales
Toujours indiquer présence contenu ↓
Configurer navigationMode: 'grid'

Structure HTML navigation 2D

<section>
  <!-- Slide horizontale principale -->
  <section>
    <h2>Concept principal</h2>
    <p>Vue d'ensemble autonome</p>
    <p class="smaller"><i class="fas fa-arrow-down"></i>
       Appuyez sur ↓ pour détails</p>
  </section>

  <!-- Détails verticaux optionnels -->
  <section>
    <h3>Détail 1</h3>
    <p>Premier approfondissement</p>
  </section>

  <section>
    <h3>Détail 2</h3>
    <p>Deuxième approfondissement</p>
  </section>
</section>

Configuration JavaScript

Reveal.initialize({
  navigationMode: 'grid',  // IMPORTANT !
  controls: true,
  controlsLayout: 'edges', // 4 flèches
  slideNumber: 'h.v',      // Format 2.3

  // ... autres options
});

// Forcer retour au top lors navigation horizontale
let lastHorizontalIndex = 0;

Reveal.on('slidechanged', event => {
  const currentH = event.indexh;
  const currentV = event.indexv;

  if (currentH !== lastHorizontalIndex && currentV !== 0) {
    Reveal.slide(currentH, 0);
  }

  lastHorizontalIndex = currentH;
});

Fragments et animations

Révélation progressive pour une pédagogie dynamique

class="fragment" : Apparition au clic
fade-up : Vient du bas
highlight-red : Surlignage
grow : Agrandissement

Appuyez sur ↓ pour voir plus d'exemples

Contrôle de l'ordre avec data-fragment-index

Problème : Par défaut, ordre du DOM

<!-- Ordre explicite -->
<div class="fragment" data-fragment-index="3">Troisième</div>
<div class="fragment" data-fragment-index="1">Premier</div>
<div class="fragment" data-fragment-index="2">Deuxième</div>

<!-- Simultané -->
<div class="fragment" data-fragment-index="1">A</div>
<div class="fragment" data-fragment-index="1">B (en même temps)</div>
<div class="fragment" data-fragment-index="2">C</div>

Pattern Question/Réponse

<section>
  <h2>Exercice : Dérivée</h2>

  <!-- Question présente dès le début -->
  <div class="question">
    <p><strong>Question :</strong>
       Que vaut la dérivée de \(x^{2}\) ?</p>
  </div>

  <!-- Réponse apparaît au clic -->
  <div class="fragment">
    <p><em>On utilise la règle :
       \((x^n)' = n \cdot x^{n-1}\)</em></p>
    <p class="answer"><strong>Réponse :</strong>
      <span class="highlight">\(2x\)</span>
    </p>
  </div>
</section>

Classes de fragments disponibles

Classe	Effet	Usage
`fragment`	Apparition instantanée	Par défaut
`fragment fade-in`	Fondu entrant	Douceur
`fragment fade-up`	Depuis le bas	Dynamisme
`fragment highlight-red`	Surlignage rouge	Attention
`fragment grow`	Agrandissement	Emphase
`fragment strike`	Barré	Correction

Règle fondamentale : "2 par slide"

Maximum 2 éléments côte à côte par slide

Limite à 2

Max 2 images côte à côte
Max 2 boxes côte à côte
Max 2 colonnes de contenu

Si plus de 2 ?

Créer slides DOWN supplémentaires
4 images = 2 slides (2+2)
6 avantages = 3 slides (2+2+2)

Exemple : Escape game avec 4 images

Slide 0 : Vue d'ensemble + hint ↓
Slide DOWN 1 : 2 premières images (1/2)
Slide DOWN 2 : 2 dernières images (2/2)

Structure HTML générée

Fichier HTML autonome avec tout intégré (CSS, JavaScript, CDN)

Appuyez sur ↓ pour voir la structure complète

Structure de base (1/2)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Titre de la présentation</title>

  <!-- Reveal.js CSS -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css">
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css">

  <!-- Font Awesome (icônes) -->
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- CSS personnalisé selon style -->
  <style>
    /* Styles adaptés au public cible */
  </style>
</head>

Structure de base (2/2)

<body>
  <div class="reveal">
    <div class="slides">
      <!-- Slides ici -->
    </div>
  </div>

  <!-- Scripts Reveal.js -->
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/math/math.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js"></script>

  <script>
    Reveal.initialize({
      // Configuration
    });
  </script>
</body>
</html>

Classes CSS utiles

/* Mise en page */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

/* Boxes colorées */
.box {
  background: #ecf0f1;
  padding: 1em 1.5em;
  border-left: 4px solid #3498db;
}

.warning-box {
  background: #fff3cd;
  border-left: 4px solid #f39c12;
}

.example-box {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
}

Workflow steps

.workflow-step {
  display: flex;
  align-items: center;
  padding: 0.8em;
  background: #ecf0f1;
  border-radius: 8px;
}

.workflow-step .step-number {
  background: #3498db;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 1em;
}

Configuration Reveal.js

Options JavaScript pour contrôler le comportement de la présentation

Appuyez sur ↓ pour voir les options

Configuration complète (1/2)

Reveal.initialize({
  // Navigation 2D
  navigationMode: 'grid',
  controls: true,
  controlsLayout: 'edges',
  controlsBackArrows: 'visible',
  controlsTutorial: true,

  // Progression
  progress: true,
  slideNumber: 'h.v',
  hash: true,

  // Dimensions
  width: 1280,
  height: 720,
  margin: 0.1,

Configuration complète (2/2)

  // Transitions
  transition: 'slide',
  transitionSpeed: 'default',

  // Math
  math: {
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
    config: 'TeX-AMS_HTML-full'
  },

  // Plugins
  plugins: [
    RevealMath,
    RevealNotes,
    RevealHighlight,
    RevealZoom
  ]
});

Transitions disponibles

Valeur	Effet	Usage
`none`	Pas de transition	Instantané
`fade`	Fondu enchaîné	Douceur
`slide`	Glissement horizontal	Recommandé
`convex`	Perspective convexe	Dynamique
`zoom`	Zoom avant/arrière	Impact

Intégration MathJax

Formules mathématiques professionnelles dans reveal.js

Obligatoire pour toutes les formules mathématiques
Délimiteurs : \(...\) inline, \[...\] block
LaTeX : Syntaxe standard (frac, sqrt, sum, etc.)
Environnements : align, matrix, cases, etc.

Appuyez sur ↓ pour voir des exemples

Exemples de formules

Inline : La formule \(E = mc^2\) est célèbre.

Block :

\[ \int_{a}^{b} f(x) \, dx = F(b) - F(a) \]

Environnement align :

\begin{align} (x+2)^2 &= x^2 + 2 \cdot x \cdot 2 + 2^2 \\ &= x^2 + 4x + 4 \end{align}

Code HTML pour MathJax

<!-- Inline -->
<p>La formule \(E = mc^2\) est célèbre.</p>

<!-- Block -->
<p>\[
  \int_{a}^{b} f(x) \, dx = F(b) - F(a)
\]</p>

<!-- Environnement align -->
<p>\begin{align}
  (x+2)^2 &= x^2 + 2 \cdot x \cdot 2 + 2^2 \\
  &= x^2 + 4x + 4
\end{align}</p>

Configuration MathJax

Reveal.initialize({
  // ... autres options ...

  math: {
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
    config: 'TeX-AMS_HTML-full'
  },

  plugins: [
    RevealMath,  // IMPORTANT : Plugin requis
    RevealNotes,
    RevealHighlight,
    RevealZoom
  ]
});

Bonnes pratiques

Règles pour créer des présentations révélées efficaces

Appuyez sur ↓ pour voir les règles détaillées

À FAIRE systématiquement

Contenu

Lire guides de référence EN PRIORITÉ
Utiliser fragments pour révélation progressive
Intégrer MathJax pour formules
Respecter règle de densité (< 70%)
Maximum 2 éléments côte à côte

Technique

Configurer navigationMode: 'grid'
Inclure code retour au top
Tester dans navigateur
Vérifier sur mobile
Attendre retours utilisateur

À NE JAMAIS FAIRE

Erreurs contenu

Oublier MathJax pour formules
Créer slide > 70% remplie
Mettre > 2 images côte à côte
Mettre > 2 boxes côte à côte
Police < 18px (20px lycée, 22px collège)

Erreurs technique

Mélanger contenu et sections imbriquées
Oublier balises de fermeture HTML
JavaScript complexe non testé
Fragments sans data-fragment-index
Oublier code retour au top

Règle des 3-4 fragments

Maximum 3-4 fragments par slide

Trop de fragments = audience perdue

Mauvais

<ul>
  <li class="fragment">1</li>
  <li class="fragment">2</li>
  <!-- ... 8 autres -->
</ul>

Bon

<ul>
  <li class="fragment">Groupe 1</li>
  <li class="fragment">Groupe 2</li>
  <li class="fragment">Groupe 3</li>
</ul>

Checklist avant finalisation

Chaque slide < 70% remplie
Fragments testés et fonctionnels
MathJax affiche toutes les formules
Police lisible (≥ 18px)
Navigation fluide (pas de slides cassées)
Mode présentation fonctionne (touche S)
Responsive testé (mobile/tablette)

Raccourcis clavier

Navigation

→ / ← : Slides horizontales
↓ / ↑ : Slides verticales
Espace : Slide suivante
Shift+Espace : Slide précédente
Home / End : Première / Dernière

Affichage

S : Mode présentateur (notes)
F : Plein écran
Esc / O : Vue d'ensemble
B / . : Écran noir (pause)
V : Mode vidéo

Astuce : Appuyez sur ? pour afficher l'aide complète !

Exemple concret : Slide avec exercice

Démonstration complète d'une slide interactive

Appuyez sur ↓ pour voir le code

Code HTML complet

<section class="exercise">
  <h2>Exercice : Produit scalaire</h2>

  <div class="exercise-header">
    <span class="difficulty">★★☆</span>
    <span class="estimated-time">5 minutes</span>
  </div>

  <!-- Énoncé -->
  <div class="statement">
    <p><strong>Énoncé :</strong> Calculer \(\vec{u} \cdot \vec{v}\) avec :</p>
    <ul>
      <li>\(\|\vec{u}\| = 2\)</li>
      <li>\(\|\vec{v}\| = 3\)</li>
      <li>\(\widehat{(\vec{u},\vec{v})} = 60°\)</li>
    </ul>
  </div>

Code HTML complet (suite)

  <!-- Formule -->
  <div class="fragment">
    <p><em>On utilise la formule :</em></p>
    <p>\(\vec{u} \cdot \vec{v} = \|\vec{u}\| \times \|\vec{v}\| \times \cos(\alpha)\)</p>
  </div>

  <!-- Application -->
  <div class="fragment">
    <p><em>Application numérique :</em></p>
    <p>\(\vec{u} \cdot \vec{v} = 2 \times 3 \times \cos(60°) = 6 \times \frac{1}{2} = 3\)</p>
  </div>

  <!-- Résultat -->
  <div class="fragment">
    <div class="result-box">
      \(\vec{u} \cdot \vec{v} = 3\)
    </div>
  </div>
</section>

Résultat visuel

Exercice : Produit scalaire

★★☆ 5 minutes

Énoncé : Calculer \(\vec{u} \cdot \vec{v}\) avec \(\|\vec{u}\| = 2\), \(\|\vec{v}\| = 3\), angle = 60°

Formule : \(\vec{u} \cdot \vec{v} = \|\vec{u}\| \times \|\vec{v}\| \times \cos(\alpha)\)

\(\vec{u} \cdot \vec{v} = 3\)

Limitations importantes

Technique

Nécessite navigateur moderne
Pas de mode hors ligne (CDN)
JavaScript requis
MathJax peut être lent

Utilisation

Courbe d'apprentissage HTML/CSS
Pas d'édition WYSIWYG
Export PDF limité
Compatibilité mobile variable

Solution : L'agent reveals-creator gère la complexité technique pour vous !

Pourquoi utiliser l'agent reveals-creator ?

L'agent fait tout le travail technique complexe automatiquement

Appuyez sur ↓ pour voir les avantages

Commande vague → Résultat professionnel

Vous dites

"Crée une présentation sur les dérivées pour mes 1ère"

L'agent fait

Choisit template lycée
Lit 6 guides de référence
Crée structure HTML complète
Ajoute fragments progressifs
Configure navigation 2D
Intègre MathJax

Avantages de l'agent

Automatisation

Pas besoin de connaître HTML
Pas besoin de connaître CSS
Pas besoin de connaître JavaScript
Prompts experts auto-générés

Expertise

Connaît bonnes pratiques
Respecte règles d'espacement
Adapte au public cible
Gère fragments pédagogiques

Résultat : Gain de temps massif

Tâche	Manuel	Avec agent	Gain
Apprendre HTML/CSS	10-20h	0h	100%
Créer structure	1-2h	2 min	~95%
Ajouter fragments	30 min	Auto	100%
Configurer navigation	15 min	Auto	100%
Tester et corriger	30 min	5 min	~85%

Vous vous concentrez sur le CONTENU, pas la technique !

Workflow utilisateur typique

Demande à Claude : "Crée présentation reveal.js sur [sujet] pour [public]"

Agent reveals-creator s'active automatiquement

Fichier HTML généré (< 1 minute)

Ouvrir dans navigateur → Tester navigation

Demander ajustements si nécessaire (couleurs, contenu, animations)

Présenter en classe ! 🎉

Ressources et documentation

Skill reveals-presentation

SKILL.md : Instructions agents
references/ : 7 guides détaillés
templates/ : 3 templates HTML

Agent reveals-creator

.claude/agents/reveals-creator.md
Modèle : Claude Haiku 4.5
Autonome et expert

Reveal.js officiel

Site : https://revealjs.com
Documentation complète
GitHub : reveal/reveal.js

En résumé

Ce que vous avez vu

Reveal.js = framework web de présentations
3 styles adaptés (collège, lycée, académique)
Navigation 2D (→ horizontal, ↓ vertical)
Fragments pour révélation progressive
MathJax pour formules mathématiques
Agent reveals-creator autonome

Avantages clés

Création rapide (< 1 min)
Pas besoin de connaître HTML/CSS/JS
Résultat professionnel automatique
Adapté au public cible
100% web et portable
Open source et gratuit

Le système parfait pour créer des présentations pédagogiques interactives sans effort technique !

Cette présentation elle-même...

...a été créée avec le système qu'elle documente !

Générée par l'agent reveals-creator
Utilise le skill reveals-presentation
Style académique (vous lisez cette présentation)
Navigation 2D (testez avec ↓)
Fragments progressifs partout
HTML/CSS/JavaScript complet en un seul fichier

Temps de création : < 2 minutes de génération automatique

Questions ?

Prêt à créer vos présentations reveal.js ?

Demandez simplement à Claude avec l'agent reveals-creator !

Merci de votre attention !