Dans cette vidéo je vous propose de découvrir ensemble reveal.js qui est une librairie qui va vous permettre de créer des présentations (à la Powerpoint ou Google Slides) en utilisant de l'HTML, du CSS et un peu de JavaScript. C'est d'ailleurs cet outil que j'utilise dans la plupart des introductions de mes formations.
Pour commencer
Pour commencer à utiliser la librairie il faut commencer par l'installer. Si vous utilisez un bundler capable de gérer les dépendances du dossier node_modules (comme Vite) vous pouvez l'installer via npm, pnpm ou autre.
npm install reveal.js
# ou
pnpm add reveal.js
# ou
yarn add reveal.jsSi vous n'utilisez pas d'outils spéciaux vous pouvez aussi télécharger le zip directement sur github.
Ensuite, pour créer notre présentation il suffit de créer une page HTML avec la structure suivante (vous devrez adapter l'import JavaScript en fonction de votre situation).
<html>
<head>
<link rel="stylesheet" href="/reveal/dist/reveal.css">
<link rel="stylesheet" href="/reveal/dist/theme/white.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script type="module">
import Reveal from '/reveal/dist/reveal.esm.js'
Reveal.initialize();
</script>
</body>
</html>Chaque balise <section> représentera un slide dans votre présentation. Côté style, reveal.js offre des thèmes préconçus mais vous pouvez aussi créer vos propres thèmes CSS si vous le souhaitez.
Vous pouvez aussi créer une navigation secondaire (vers le bas) en imbriquant les sections ensembles pour créer des présentations à plusieurs niveaux.
<div class="slides">
<section>Slide 1</section>
<section>
<section>Slide 2</section>
<section>Sous slide 1</section>
<section>Sous slide 2</section>
</section>
</div>Vous avez aussi la possibilité de personnaliser chaque section à l'aide d'attributs data-. Par exemple, pour changer le fond d'un slide on peut utiliser un attribut data-background-.
<section data-background-color="aquamarine">
<h2>Slide bleu</h2>
</section>Pour plus de possibilité vous pouvez vous rendre sur la documentation.
Fragment
Autre point intéressant, c'est qu'au sein même d'un slide, vous pouvez décomposer l'apparition des éléments gràce à un système de "fragment". Imaginons vous avez des des arguments à mettre en avant.
<ul>
<li class="fragment">Argument 1<li>
<li class="fragment">Argument 2<li>
<li class="fragment">Argument 3<li>
</ul>De cette manière là chaque <li> sera masqué par défaut et ils ne s'afficheront que lorsqu'on ira vers l'avant. Vous pouvez aussi personnaliser les animations et les comportements de chaque fragment gràce à des classes spécifiques.
<p class="fragment">Je m'affiche progressivement</p>
<p class="fragment fade-out">Je disparait !</p>
<p class="fragment highlight-red">Je deviens rouge</p>
<p class="fragment fade-in-then-out">Je m'affiche puis je me masque</p>
<p class="fragment fade-up">Je m'affiche avec une translation</p>L'ensemble des classes disponibles sont documentées sur la documentation des Fragments. Vous pouvez aussi créer vos propres animations en utilisant du CSS.
<style>
.fragment.blur {
filter: blur(5px);
}
.fragment.blur.visible {
filter: none;
}
</style>
<section>
<p class="fragment custom blur">One</p>
<p class="fragment custom blur">Two</p>
<p class="fragment custom blur">Three</p>
</section>Dimension
Les présentations créées avec reveal.js s'adaptent automatiquement à la taille de l'écran, mais pas forcément de manière classique (comme pour un site responsive). Dans le cadre d'une présentation on veut surtout que les éléments gardent toujours le même ratio.
Reveal.js crée une div .slides qui englobe notre présentation avec une largeur et une hauteur spécifique et ensuite il va utiliser une transformation scale() pour faire en sorte que la présentation rentre dans l'écran et soit centrée. L'avantage de cette approche est que les éléments ont toujours le même aspect, quelle que soit la taille de votre écran. Vous avez la possibilité de personnaliser la taille qui sera utilisée comme base lors de l'initialisation.
Reveal.initialize({
// Taille "normale" qui sera utilisé comme ratio
width: 960,
height: 700,
// % d'espace vide autour de la présentation
margin: 0.04,
// Scale minimum / maximum à appliquer
minScale: 0.2,
maxScale: 2.0
});Export PDF
Vous avez par défaut une manière d'exporter votre présentation sous forme de PDF. En rajoutant ?print-pdf dans l'URL la présentation passe en mode impression où chaque section constitue une page. Vous pouvez alors utilisez la fonctionnalité "imprimer en PDF" de votre navigateur pour générer un PDF.
Mode présentateur
Il y a aussi un autre élément intéressant, mais qui n'est pas directement disponible par défaut, c'est le mode présentateur qui vous permet de voir où vous en êtes, voir le slide suivant et avoir un petit chronomètre pour savoir si vous êtes en avance ou pas sur votre présentation. Cette fonctionnalité est disponible au travers du plugin Note.
import Reveal from '/reveal/dist/reveal.esm.js'
import RevealNotes from '/reveal/plugin/notes/notes.esm.js'
Reveal.initialize({
hash: true, // Active la navigation par hash dans l'URL
plugins: [RevealNotes]
});L'activation du plugin "Notes" vous permet d'utiliser la touche "S" pour activer le mode Présentateur dans une nouvelle fenêtre. La navigation dans ce mode entraine automatiquement le défilement dans la fenêtre classique. Si vous êtes dans un cas où vous avez une présentation live à faire, vous pouvez avoir la présentation classique sur l'écran du rétroprojecteur, et la partie présentateur sur votre écran pour vous permettre de voir où vous en êtes et l'avancement de votre présentation. Vous pouvez aussi ajouter des notes à votre présentation avec l'ajout d'un élément HTML spécifique.
<section>
<h2>Slide 1</h2>
<aside class="notes">
Ceci est une note 📝
</aside>
</section>Plugin markdown
Enfin, dernier petit point que je voulais évoquer avec vous, c'est la gestion du Markdown qui est plutôt intéressante si vous voulez créer des slides de manière plus rapide. Cette fonctionnalité aussi disponible sous forme de plugin.
import Reveal from '/reveal/dist/reveal.esm.js'
import RevealMarkdown from '/reveal/plugin/markdown/markdown.esm.js'
Reveal.initialize({
hash: true, // Active la navigation par hash dans l'URL
plugins: [RevealMarkdown]
});Ce plugin permet ensuite de créer des sections en utilisant du Markdown au travers d'un textarea.
<section data-markdown>
<textarea data-template>
## Slide 1
A paragraph with some text and a [link](https://hakim.se).
---
## Slide 2
---
## Slide 3
</textarea>
</section>Ici on crée par exemple 3 slides. Il est aussi possible d'utiliser le plugin highlight pour mettre en valeur des exemples de code.
import Reveal from '/reveal/dist/reveal.esm.js'
import RevealHighlight from '/reveal/plugin/highlight/highlight.esm.js'
import RevealMarkdown from '/reveal/plugin/markdown/markdown.esm.js'
Reveal.initialize({
hash: true, // Active la navigation par hash dans l'URL
plugins: [RevealMarkdown, RevealHighlight]
});Ce qui permettra de mettre du code dans le markdown (mais aussi en dehors) et de mettre l'emphase sur certaines lignes.
<section data-markdown>
<textarea data-template>
```js [1-2|3|4]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
Il est aussi possible de faire ça sans le markdown dans une section classique si vous le souhaitez.
```html
<section>
<pre><code data-trim data-noescape data-line-numbers="3,8-10">
<table>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2</td>
<td>18</td>
</tr>
</table>
</code></pre>
</section>A vous de jouer
Il y a encore pas mal d'autres fonctionnalités que je n'ai pas évoqué dans cet article (animation entre les slides, pagination, layout, configuration...) mais le mieux est d'essayer reveal.js et de se rendre sur la documentation pour découvrir les possibilités offertes par l'outils.
