Reveal.js
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
Reveal.js est une bibliothèque JavaScript qui permet de créer des présentations/diaporama en utilisant les technologies du web HTML5, CSS et JavaScript : tout ce qui est possible de faire dans le web peut être fait aussi dans des slides.
De ce fait, la création de slides avec Reveal.js ouvre des potentialités pédagogiques inexprimées avec des présentations construites avec des logiciels plus traditionnels comme PowerPoint ou Keynotes. Parmi les options figurent :
- La publication des slides en tant que pages/application web en accès avec un simple navigateur
- La possibilité d'intégrer facilement des éléments multi-média directement tirés du web comme des images, vidéos, animations, etc.
- L'implémentation de slides interactives qui exploitent les possiblités de la computation avec JavaScript et de l'interactivité avec JavaScript. On peut par exemple intégrer directement dans les slides des quiz, des mécanismes de drag&drop, ou encore des algorithmes aléatoires ou qui s'adaptent aux actions/choix des utilisateurs
En d'autres termes, en exploitant les technologies du web, il est possible de mieux intégrer des principes de l'apprentissage multimédia dans des supports pédagogiques hybrides. On exploite d'un côté la familiarité des apprenant-es avec les supports de type présentation/diaporama, mais en intégrant en même temps de mécanisme pour augmenter leur contrôle ainsi que leur investissement cognitif dans la fruition des contenus.
Cette page propose un aperçu de ces potentialités avec quelques exemples. Sur le plan technique, la documentation de la bibliothèque est assez bien fournie (sauf pour ce qui concerne l'installation, voir plus bas) et cette page évite donc de reproposer tous les aspects qui sont déjà bien traitées ailleurs.
Pré-requis
La création de slides avec Reveal.js présuppose à minima une connaissance de base de HTML5 et CSS. Pour tirer avantage des potentialités interactives, une connaissances de JavaScript est également nécessaire. Les ressources suivantes représentent des repères utiles pour pouvoir ensuite utiliser Reveal.js de manière plus approfondie :
Sur le plan des contenus, il peut être très utile de connaître quelques principes de design graphiques et pédagogiques. Les pages suivantes peuvent être utiles à ce propos :
- : principes liés à l'acronyme Contraste, Répétition, Alignement et Proximité
- : même si les contenus s'adressent principalement à la vidéo, certains principes peuvent s'appliquer également aux présentations
Logiciels nécessaires
Pour créer des slides avec Reveal.js il faut disposer tout simplément d'un éditeur de texte tel que Visual studio code.
Notes sur la version
Cette page fait référence à la version 4.3.x de la bibliothèque (voir versionnage sémantique). Les aspects traités sont cependant plutôt liés à l'interaction entre HTML5, CSS et JavaScript et devraient donc être valables aussi pour des versions successives.
Installation
Il existe plusieurs manières d'utiliser Reveal.js qui vont du très basique (ajouter les fichiers nécessaires à un fichier .html) au plus complexe (exploiter Node.js pour créer un environnement de développement). Dans cette page nous proposons un dépôt GitHub avec une organisation des fichiers déjà pré-établie en fonction des pratiques du cours STIC:STIC I du Master of Science in Learning and Teaching Technologies à l'Université de Genève. Ce type d'organisation n'est cependant pas obligatoire pour le fonctionnement de Reveal.js. Il suffit de veiller à ce que les différents fichiers de la bibliothèques (CSS, JavaScript, plugin-in, etc.) soit disponibles et incorporés avec des liens corrects dans le fichier principale avec la présentation.
Template proposé
Le template proposé est disponible dans un dépot GitHub. Il peut être cloné ou téléchargé à travers le bouton code en haut à gauche :
Le template est structuré en principe pour une seule présentation, la section suivante décrit comme il peut être adapté pour plusieurs présentations. Encore une fois, il s'agit d'éléments arbitraires qui peuvent être modifiés du moment où la présence et la relation entre fichiers indispensables/optionnels sont maintenues.
Le template est organisé de la manière suivante :
- Tous les fichiers de fonctionnement sont disponibles dans un dossier
assets. Ce dossier propose 4 sous-dossiers :css: dossier pour un ou plusieurs fichiers CSS personnels, c'est-à-dire avec des déclarations de style proposés directement par le concepteur. Un fichierstyle.cssest déjà disponible et incorporé dans le templateimages: dossier pour récolter les images utilisées dans la présentationjs: un dossier pour récolter un ou plusieurs fichier JavaScript codés directement par le concepteur. Un fichierapp.jsest déjà disponible et incorporé dans le templatevendor: un dossier qui est censé contenir des bibliothèques JavaScript. Ici ce trouve un sous-dossierrevealjsqui se compose de deux dossiers :dist: un dossier qui contient le fichiers CSS et JavaScript qui déterminent le fonctionnement "de base" de Reveal.js. Dans le dossierdistse trouvent par exemple les différents thèmes disponibles out of the boxplugin: un dossier qui contient les plugins de Reveal.js. Ces plugins permettent d'ajouter des foncionnalités comme le Zoom sur les images, la syntaxe du code, etc. Plusieurs plugins sont déjà incorporés dans le template
index.html: le fichier dans lequel se trouve le contenu de la présentation.
Code de base du template
Le code du fichier index.html (avec commentaires pour reconnaître les différents éléments) est le suivant :
1 <!DOCTYPE html>
2 <html lang="fr">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Template pour présentation avec Reveal.js</title>
8 <!-- CSS obligatoire de Reveal.js -->
9 <link rel="stylesheet" href="./assets/vendor/revealjs/dist/reveal.css" />
10 <!-- CSS selon le thème de Reveal.js choisi, voir le dossier correspondant pour les options -->
11 <link
12 rel="stylesheet"
13 href="./assets/vendor/revealjs/dist/theme/serif.css"
14 />
15 <!-- CSS personnel avec déclarations de style en ajoute ou en substitution -->
16 <link rel="stylesheet" href="./assets/css/style.css" />
17 </head>
18 <body>
19 <!-- Début du contenu de la présentation -->
20 <div class="reveal">
21 <div class="slides">
22 <!-- Chaque slide se crée avec une balise section -->
23
24 <!-- ... code abrégé ... -->
25 </div>
26 </div>
27 <!-- JS obligatoire de Reveal.js -->
28 <script src="./assets/vendor/revealjs/dist/reveal.js"></script>
29 <!-- Plugin JS optionnels de Reveal.js -->
30 <script src="./assets/vendor/revealjs/plugin/highlight/highlight.js"></script>
31 <script src="./assets/vendor/revealjs/plugin/markdown/markdown.js"></script>
32 <script src="./assets/vendor/revealjs/plugin/math/math.js"></script>
33 <script src="./assets/vendor/revealjs/plugin/notes/notes.js"></script>
34 <script src="./assets/vendor/revealjs/plugin/search/search.js"></script>
35 <script src="./assets/vendor/revealjs/plugin/zoom/zoom.js"></script>
36 <!-- Initialization de Reveal.js selon la configuration souhaitée -->
37 <script>
38 // https://revealjs.com/initialization/
39 Reveal.initialize({
40 controls: true,
41 progress: true,
42 center: false,
43 hash: true,
44 slideNumber: true,
45
46 // Learn about plugins: https://revealjs.com/plugins/
47 plugins: [
48 RevealZoom,
49 RevealNotes,
50 RevealSearch,
51 RevealMarkdown,
52 RevealHighlight,
53 RevealMath,
54 ],
55 });
56 </script>
57 <!-- JS personnel pour ajouter des éléments interactifs (optionnel)-->
58 <script src="./assets/js/app.js"></script>
59 </body>
60 </html>
Extension du template à plusieurs présentations
Pour créer plusiuers présentations sans avoir à dupliquer tous les fichiers à chaque fois, il est possible par exemple de créer un nouveau dossier à la racine du projet (i.e. au même niveau de assets) et créer un fichier index.html à l'intérieur de chaque sous-dossier représentant une présentation différente. Chaque dossier de la présentation peut à ce moment avoir de sous-dossiers pour les images, script JavaScript, etc. spécifiques à cette présentation. Par exemple :
|- assets
|- presentation-1
|- index.html
|- images
|- maison.svg
|- js
|- drag-and-drop.js
|- presentation-2
|- index.html
|- images
|- voiture.svg
|- js
|- animation.js
./assets/etc/... à ../assets/etc/.... Incorporation d'autres bibliothèques JavaScript
Étant une présentation Reveal.js une page/application web comme toute autre, on peut tout à fait utiliser d'autres bibliothèques JavaScript dans une présentation. L'arborescence du template facilite cette possibilité, car il suffit d'insérer les autres bibliothèques dans le dossier assets/vendor :
|- assets
|- ...
|- vendor
|- revealjs
|- autre-bibliotheque-1
|- autre-bibliotheque-2
|- ...
À ce moment il suffit d'incorporer les fichiers CSS/JS de la bibliothèque dans le fichier .html avec le contenu de la présentation.
Créer la structure pour la présentation
Reveal.js permet de créer des slides classiques, c'est-à-dire qui occupent toute l'espace disponible à l'écran, ou des slides embedded/incrustées dans une page avec d'autres contenus.
Présentation à plein écran
Sans rien spécifier au niveau de la configuration, la présentation en plein écran s'applique automatiquement. À ce moment, la structure de la présentation consiste dans deux div emboîtés :
- La racine
<div class="reveal">...</div> - Un div qui va contenir les slides
<div class="slides">...</div>
Le code commence directement à l'intérieur du body :
1 <html>
2 <head>
3 <!-- Autre code pas affiché pour brévité -->
4 </head>
5 <body>
6 <div class="reveal">
7 <div class="slides">
8 <!-- Les slides vont ici -->
9 </div>
10 </div>
11 <!-- Importation des fichiers JavaScript -->
12 </body>
13 </html>
Présentation embedded
La structure pour une présentation incrustée dans d'autres contenus d'une page HTML5 est la même. Elle doit cependant apparaître en fonction de la position souhaité par rapport au reste de la page. Donc elle ne doit pas forcément commencer juste après l'ouverture du body.
Pour afficher la présentation de manière embedded il faut spécifier dans les options de configuration le code suivant :
Reveal.initialize({
// Autre associations clé-valeur pour les options
embedded: true
});
La présentation va à ce moment assumer les dimensions qui s'appliquent à la balise racine <div class="reveal">...</div>. Cela peut donc dépendre de la dimension de l'élément parent si cette balise est emboîtéé et/ou des propriétés CSS qui lui sont appliquées.
Ajouter des slides
Pour ajouter des slides, il suffit d'ajouter des balises <section>...</section> à l'intérieur de la balise <div class="slides">...</div> :
1 <div class="reveal">
2 <div class="slides">
3 <!-- Slide avec le titre -->
4 <section>
5 <h1>Titre de la présentation</h1>
6 </section>
7
8 <!-- Slide avec l'introduction -->
9 <section>
10 <h2>Introduction</h2>
11 <p>Cette présentation porte sur ...
12 </section>
13 </div>
14 </div>
Il est également possible de créer des sections à l'intérieur d'une section, ce qui correspond à créer des slides verticales. Les utilisateurs peuvent néanmoins ne pas être habitués à ce type de fonctionnalité, qu'il faudrait utiliser avec une scénarisation attentive pour en tirer des bénéfices pédagogiques.
Sur le plan de l'organisation, il est de bonne pratique d'ajouter des commentaires pour délimiter les différentes slides. Des commentaires sémantique à propos du contenu sont à préférer plutôt que numéroter les commentaires en fonction de l'ordre des slides. De cette manière, il est possible de modifier l'ordre des slides sans avoir à modifier tous les commentaires.
Contenus de la présentation
En principe, tout élément HTML5 peut être intégré dans les slides avec Reveal.js. Cette section présente quelques possibilités, mais l'intérêt de Reveal.js réside dans les potentialités de combiner plusieurs éléments.
Contenu typographique avec HTML5
On peut insérer du texte avec les balises HTML5 normalement consacrées à cette fonction : titres de différents niveaux, paragraphes, listes à puces, etc.
1 <!-- Introduction -->
2 <section>
3 <h3>Qu'est-ce qu'EduTechWiki</h3>
4 <p>EduTechWiki est un wiki sur la technologie éducative et domaines annexes hébergé et maintenu à TECFA depuis 2006.</p>
5 </section>
6
7 <!-- Visites -->
8 <section>
9 <h3>Trafic généré</h3>
10 <ol>
11 <li>1.4 mio in 2019</li>
12 <li>1.2 mio in 2020</li>
13 <li>1.1 mio in 2021</li>
14 </ol>
15 </section>
Reveal.js met à disposition la classe class="r-fit-text" qui permet à un élément textuel de prendre toute la place disponible sans sortir du cadre de la slide. Ceci est utile par exemple pour créer des larges textes sans avoir à essayer plusieurs niveaux des titres ou styles personnalisés.
1 <section>
2 <h2 class="r-fit-text">Tout l'espace disponible</h2>
3 </section>
Contenu avec Markdown
Markdown est un langage de formatage léger et orienté aux contenus les plus fréquents. Un aperçu du langage est disponible dans la page Introduction à Rmarkdown.
Pour utiliser Markdown il faut bien veiller à ce que le plugin correspondant soit incorporé et initialisé dans la configuration de Reveal (voir template). À ce moment, il suffit de spécifier l'utilisation de Markdown de cette manière :
1 <section data-markdown>
2 <textarea data-template>
3 ## Titre de la slide
4 - Item 1
5 - **Item 2 en gras**
6 - [TECFA](https://tecfa.unige.ch)
7 </textarea>
8 </section>
Afficher du code
Images
On peut ajouter des images matricielles ou des images vectorielles simplement avec la balise <img src="..." alt="..." title="..." />.
On peut également appliquer des règles de style déjà prévues par Reveal.js. Voir la partie "Layout" plus bas.
Audio/Vidéo
Les composantes audio et/ou vidéo peuvent être intégrés simplement avec les balises correspondantes en HTML5. Voir à ce propos
Reveal.js prévoit aussi l'attribut data-autoplay qui permet d'entamer la lecture de l'élément audio/vidéo directement lorsque le slide conteneur est ouvert par l'utilisateur :
1 <section>
2 <h3>Magnifique vidéo qui démarre toute seule</h3>
3 <video data-autoplay ...>...</video>
4 </section>
Frame interne
Pour englober du contenu d'autres sites (e.g. une vidéo depuis une plateforme, un prototype Figma, etc.), on peut utiliser la balise <iframe data-src="..."></iframe>.
Si on utilise l'attribut data-src au lieu de l'habituel src, le contenu du frame sera chargé seulement si la slide est visionnée par l'utilisateur.