Créer des présentations interactives avec 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 avec les technologies du web HTML5, CSS et JavaScript. Cet article décrit le développement de quelques présentations avec cette bibliothèque dans lesquels la composantes interactives est musclée avec des notions de computation avec JavaScript et interactivité avec JavaScript.

Pré-requis

Le fonctionnement général de la bibliothèque est décrit dans l'article Reveal.js. Ces aspects ne sont pas repris dans cette page qui se focalise sur les aspects plus interactifs et liés à la programmation avec JavaScript. Des connaissances de base en HTML5, CSS et JavaScript sont donc nécessaires pour comprendre et savoir adapter/répliquer les exemples.

Accès aux exemples et au code source

Les exemples créés dans cet article, ainsi que le code source, sont disponibles dans un dépôt GitHub :

MALTT-STIC/stic-1-revealjs-exemples

Les exemples utilisent le template proposé dans la page Reveal.js, adapté à la création de plusieurs présentations dans le même dossier/dépôt. À ce propos, la structure des fichiers est exploitée pour ajouter les bibliothèques JavaScript externes.

Principe de base

L'exemple 01-principe-de-base illustre le fonctionnement de l'interactivité dans une présentation. Ceci consiste tout simplement à exploiter le DOM du HTML5 de la page en tant que toile pour identifier les éléments qu'on veut rendre interactifs et les éléments à modifier suite aux manipulations de l'utilisateur.

Comme il a été le cas pour l'exemple dans la page interactivité avec JavaScript, on peut par exemple identifier un bouton dans une slide et lui appliquer un gestionnaire d'événements pour que le click sur ce bouton déclenche une modification du DOM. Dans ce cas, il s'agit d'une modification toute simple au texte d'un paragraphe :

24 <!-- Début du contenu de la présentation -->
25     <div class="reveal">
26       <div class="slides">
27         <!-- Chaque slide se crée avec une balise section-->
28 
29         <!-- Slide avec titre -->
30         <section>
31           <h2>Principe de base</h2>
32           <p>Comment ajouter de l'interactivité à une présentation Reveal.js</p>
33         </section>
34 
35         <!-- Slide avec introduction -->
36         <section>
37           <h3>C'est comme une page HTML5</h3>
38           <p>
39             <small>
40               Il suffit d'identifier les éléments de la présentation qu'on veut
41               rendre interactifs et ajouter du code JavaScript.
42             </small>
43           </p>
44           <pre><code>document
45   .getElementById("btn-interactif")
46   .addEventListener("click", function () {
47     //Ajouter du texte à la slide
48     document.getElementById("target-element").innerHTML = "Hello World !";
49   });</code></pre>
50           <button id="btn-interactif" style="font-size: 2rem">
51             Cliquez-moi
52           </button>
53           <p id="target-element"></p>
54         </section>
55       </div>
56     </div>

Le code JavaScript figure également dans la slide, mais il ne faut pas faire confusion: il faut que le code soit présent soit dans un script inline ou dans un fichier JavaScript externe.

Par exemple, à la fin du code de l'exemple 01 on retrouve en effet le pointage à un fichier JavaScript externe :

87 <!-- JS personnel pour ajouter des éléments interactifs -->
88 <script src="./principe-de-base.js"></script>

C'est à l'intérieur de ce fichier-ci qui doit se trouver le code JavaScript à exécuter :

1 document
2   .getElementById("btn-interactif")
3   .addEventListener("click", function () {
4     //Ajouter du texte à la slide
5     document.getElementById("target-element").innerHTML = "Hello World !";
6   });