Reveal.js

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 par le bias de 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 :

• Introduction à HTML5
• Introduction à CSS
• Pensée computationnelle avec JavaScript

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 :

• Les principes CRAP
   : principes liés à l'acronyme Contraste, Répétition, Alignement et Proximité
• Principes de design multimédia applicables à la vidéo
   : 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.

Exemples concrets

Cet article propose un survol général du fonctionnement de la bibliothèque. Elle représente donc un point d'entrée pour pouvoir créer des présentations interactives avec Reveal.js. Cette deuxième page se focalise plus sur les enjeux et potentialités techno-pédagogiques de présentations qui exploitent la computation avec JavaScript et l'interactivité avec JavaScript.

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, ou - si vous avez un compte GitHub, utilisé comme template pour démarrer un nouveau projet. Le lien au dépôt est le suivant :

MALTT_STIC/stic-1-revealjs-template

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 fichier style.css est déjà disponible et incorporé dans le template
  • images : dossier pour récolter les images utilisées dans la présentation
  • js : un dossier pour récolter un ou plusieurs fichier JavaScript codés directement par le concepteur. Un fichier app.js est déjà disponible et incorporé dans le template
  • vendor : un dossier qui est censé contenir des bibliothèques JavaScript. Ici ce trouve un sous-dossier revealjs qui 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 dossier dist se trouvent par exemple les différents thèmes disponibles out of the box
    • plugin : 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 :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Template pour présentation avec Reveal.js</title>
    <!-- CSS obligatoire de Reveal.js -->
    <link rel="stylesheet" href="./assets/vendor/revealjs/dist/reveal.css" />
    <!-- CSS selon le thème de Reveal.js choisi, voir le dossier correspondant pour les options -->
    <link
      rel="stylesheet"
      href="./assets/vendor/revealjs/dist/theme/serif.css"
    />
    <!-- CSS personnel avec déclarations de style en ajoute ou en substitution -->
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <!-- Début du contenu de la présentation -->
    <div class="reveal">
      <div class="slides">
        <!-- Chaque slide se crée avec une balise section -->
    
        <!-- ... code abrégé ... -->
      </div>
    </div>
    <!-- JS obligatoire de Reveal.js -->
    <script src="./assets/vendor/revealjs/dist/reveal.js"></script>
    <!-- Plugin JS optionnels de Reveal.js -->
    <script src="./assets/vendor/revealjs/plugin/highlight/highlight.js"></script>
    <script src="./assets/vendor/revealjs/plugin/markdown/markdown.js"></script>
    <script src="./assets/vendor/revealjs/plugin/math/math.js"></script>
    <script src="./assets/vendor/revealjs/plugin/notes/notes.js"></script>
    <script src="./assets/vendor/revealjs/plugin/search/search.js"></script>
    <script src="./assets/vendor/revealjs/plugin/zoom/zoom.js"></script>
    <!-- Initialization de Reveal.js selon la configuration souhaitée -->
    <script>
      // https://revealjs.com/initialization/
      Reveal.initialize({
        controls: true,
        progress: true,
        center: false,
        hash: true,
        slideNumber: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [
          RevealZoom,
          RevealNotes,
          RevealSearch,
          RevealMarkdown,
          RevealHighlight,
          RevealMath,
        ],
      });
    </script>
    <!-- JS personnel pour ajouter des éléments interactifs (optionnel)-->
    <script src="./assets/js/app.js"></script>
  </body>
</html>

Extension du template à plusieurs présentations

Pour créer plusieurs 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 des 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

À ce moment, il faut bien modifier les chemins relatifs aux fichiers CSS/JS. Le nouveau chemin doit tenir compte du fait que les fichiers se trouvent à un niveau supérieur. Il faut donc modifier les pointages de ./assets/etc/... à ../assets/etc/....

Incorporation d'autres bibliothèques JavaScript

Une présentation avec Reveal.js étant 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 :

1. La racine <div class="reveal">...</div>
2. Un div qui va contenir les slides <div class="slides">...</div>

Le code commence directement à l'intérieur du body :

<html>
  <head>
  <!-- Autre code pas affiché pour brévité -->
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
       <!-- Les slides vont ici -->
      </div>
    </div>
    <!-- Importation des fichiers JavaScript -->
  </body>
</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> :

<div class="reveal">
  <div class="slides">
    <!-- Slide avec le titre -->
    <section>
      <h1>Titre de la présentation</h1>
    </section>

    <!-- Slide avec l'introduction -->
    <section>
      <h2>Introduction</h2>
      <p>Cette présentation porte sur ...
    </section>
  </div>
</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.

<!-- Introduction -->
<section>
  <h3>Qu'est-ce qu'EduTechWiki</h3>
  <p>EduTechWiki est un wiki sur la technologie éducative et domaines annexes hébergé et maintenu à TECFA depuis 2006.</p>
</section>

<!-- Visites -->
<section>
  <h3>Trafic généré</h3>
  <ol>
    <li>1.4 mio in 2019</li>
    <li>1.2 mio in 2020</li>
    <li>1.1 mio in 2021</li>
  </ol>
</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.

<section>
  <h2 class="r-fit-text">Tout l'espace disponible</h2>
</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 :

<section data-markdown>
  <textarea data-template>
    ## Titre de la slide
    - Item 1
    - **Item 2 en gras**
    - [TECFA](https://tecfa.unige.ch)
  </textarea>
</section>

Afficher du code

Pour afficher du code informatique dans des slides, il faut veiller à incorporer et initialiser le plugin highlight (voir le template). Selon le type de snytaxe utilisée, il faudra également incorporer la feuille de style CSS qui permet d'appliquer le formatage au code (e.g. couleur de fond, mots clé, etc.). Les feuilles de styles disponibles se trouvent dans le dossier du plugin highlight (dans assets/vendor/revealjs/plugin selon l'organisation du template proposé).

L'affichage du code peut se faire à la ligne ou dans des blocs de code. Dans le premier cas, il suffit d'englober le contenu avec la balise <code>...</code>.

Pour les blocs de code, on peut utiliser la balise <pre>...</pre> pour garantir que les indentations soient respectées.

<section>
  <pre><code>
     <h1>Du code HTML5</h1>
     <p>Qui va recevoir du formatage...</p>
  </pre></code>
</section>

Dans la balise code on peut ajouter des attributs utiles pour mettre encore plus en relief le code, par exemple :

• data-line-numbers permet de mettre en évidence une ou plusieurs lignes du code. Par exemple :

  <code data-line-numbers="1, 5-10">...</code>

  met en évidence la première ligne et les lignes de 5 à 10.

  On peut même mettre en évidence de manière progressive en séparant les lignes intéressées par un |. Par exemple :

  <code data-line-numbers="1-4|5-10|11-15">...</code>

  met d'abord en évidence les lignes de 1-4, ensuite de 5 à 10, et enfin de 11 à 15.

• data-trim permet d'enlever les espaces au début et à la fin du code, ce qui permet par exemple de commencer le code à la ligne suivant la balise 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

HTML5 audio et video

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 :

<section>
  <h3>Magnifique vidéo qui démarre toute seule</h3>
  <video data-autoplay ...>...</video>
</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.

Classes pour le layout des contenus

Reveal.js met à disposition dans son CSS de base un nombre de classes qui aident à mieux déterminer le layout des contenus. Cette section en présente quelques unes. D'autres peuvent être ajoutées avec du CSS personnalisé.

Adapter le contenu à l'espace disponible avec r-stretch

La classe r-stretch permet d'adapter la taille verticale d'un élément à la place disponible en fonction de la présence d'autres contenus. Cette classe va fonctionner seulement si les deux conditions suivantes sont respectées :

1. L'élément auquel la classe est appliquée (e.g. une image) est un children direct de la balise <section>...</section> qui représente la slide
2. Il n'existe qu'un seul élément avec cette classe à l'intérieur de la même slide

Par exemple :

<section>
  <h2>Titre</h2>
  <img src="..." alt="..." title="..." class="r-stretch">
  <small>Ceci est une image qui prend la place disponible</small>
</section>

Placer des contenus alignés horizontalement

La classe r-hstack permet de placer des contenus l'un à côté de l'autre :

<section>
  <h3>Alignement horizontale</h3>
  <div class="r-hstack">
    <div>Sur la gauche</div>
    <div>Sur la droite</div>
  </div>
</section>

Ajouter un cadre à un élément

La classe r-frame permet d'ajouter un cadre (i.e. une bordure) à tout élément qui l'applique :

<section>
  <div class="r-frame">
    Contenu mis en relief par une bordure
  </div>
</section>

Empiler des éléments les uns sur les autres

La classe r-stack permet de positionner un élément sur un autre élément sous-jacent. Ceci peut être combiné avec la fonctionnalités des fragments (voir plus bas) qui permet d'afficher progressivement des éléments au sein de la même slide ou avec des animations/transitions (voir plus bas) qui affichent un seul élément à la fois en cachant les autres.

<section>
  <div class="r-stack">
    <p>Premier élément</p>
    <p>Deuxième élément superposé</p>
  </div>
</section>

Ajouter des éléments interactifs

Reveal.js met à disposition des éléments interactifs out of the box qui peuvent être plus ou moins sophistiqués (e.g. en ajoutant des classes ou des attributs). D'autres peuvent être ajoutés simplement grâce à l'interactivité avec JavaScript possible dans toute page web. Dans tous les cas, ces éléments interactifs peuvent être exploités pour des finalités pédagogiques, notamment en lien avec l'apprentissage multimédia.

Fragments (affichage progressif)

En ajoutant la classe class="fragment" à tout élément dans une slide, cet élément va s'afficher progressivement (i.e. lorsque l'utilisateur ou le système automatique déclenche la suite de la présentation). Dans le code suivant, par exemple, l'utilisateur ne voit que le titre de la slide lorsque celle-ci est affiché dans le navigateur. Les points de la liste à puces s'afficheront progressivement avec le déclenchement de la suite :

<section>
  <h3>Titre visible du départ</h3>
  <ul>
    <li class="fragment">Affiché progressivement dans un premier temps</li>
    <li class="fragment">Affiché progressivement dans un deuxième temps</li>
    <li class="fragment">Affiché progressivement dans un troisième temps</li>
  </ul>
</section>

On peut combiner la classe fragment avec d'autres classes qui déterminent de manière plus précise la transitions entre éléments, comme par exemple fade-out, highlight-red, etc. Voir la documentation sur le fragment pour plus d'options. Il est d'ailleurs possible d'emboiter plusieurs fragments sur le même élément (exemple tiré de la documentation officielle) :

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Fade in > Turn red > Fade out
    </span>
  </span>
</span>

Cet élément va dans l'ordre :

1. Apparaître avec un effet fade-in
2. Changer dans la couleur de police rouge
3. Disparaître avec un effet fade-out

On peut également spécifier l'ordre dans lequel les fragments apparaissent à l'écran avec l'attribut data-fragment-index="...". Il faut spécifier dans la valeur un chiffre qui détermine l'ordre. Il est possible d'attribuer à deux ou plusieurs éléments le même index, à ce moment, les éléments apparaissent au même temps.

Liens entre slides

Les liens entre slides peuvent être créés de différentes manières. Ils représentent une fonction intéressante d'un point de vue pédagogique, par exemple pour :

• Créer des références croisées
• Créer des parcours/narrations non linéaires
• Suivre/sauter des parties de la présentation sur la base des connaissances des apprenant-es
• Faciliter la segmentation en partie pour des longues présentations ou des présentations prévues pour un usage autonome

Liens internes avec le hash

Le hash est la suite de caractère qui est attachée à chaque slide par Reveal.js. Le hash peut être construit :

• Sur la base de la position de la slide dans l'ordre, e.g. #/3
• Sur la base d'une valeur sémantique de l'attribut id donnée à la section, par exemple <section id="introduction">...</section> qui correspond à l'hash #/introduction. Cette deuxième option est plus sûre, car elle n'est pas affectée par un changement d'ordre des slides.

Pour créer des liens internes avec le hash, on peut par exemple utiliser la balise a de HTML5. Avec le hash numérique, le code ressemble à ceci :

<section>
  <a href="#/0">Revenir au début</a>
</section>

Avec le hash sémantique le code est le suivant :

<!-- Slide avec le lien -->
<section>
  <a href="#/partie-2">Aller directement à la Partie II</a>
</section>

<!-- Slide "target" du lien, avec id sémantique -->
<section id="partie-2">
  <h1>Deuxième partie !</h1>
</section>

Liens interns relatifs

Reveal.js met également à disposition des classes qui peuvent être combinées, par exemple avec des boutons, et qui permettent de naviguer à travers les slides de manière relative (e.g. aller au suivant). Voici le code tiré de la documentation officielle :

<button class="navigate-left">Left</button>
<button class="navigate-right">Right</button>
<button class="navigate-up">Up</button>
<button class="navigate-down">Down</button>

<!-- Previous vertical OR horizontal slide -->
<button class="navigate-prev">Prev</button>

<!-- Next vertical OR horizontal slide -->
<button class="navigate-next">Next</button>

Les boutons sont automatiquement rendus actifs ou inactifs selon la disponibilité d'un slide correspondante à la direction de navigation.

Transitions et animations

On peut ajouter des éléments animés entre des diapositives ayant des contenus différents (transitions) ou partageant des éléments communs qui évoluent (animations).

Transitions entre slides

Les passages entre une slide et l'autre peuvent être définis au niveau globale et/ou dans chaque slide individuellement.

Les valeurs possibles sont les suivantes :

• none : pas de transition
• fade : le slide disparaît en laissant émerger la suivante
• slide : défilement habituel
• convex : défilement avec un angle convexe
• concave : défilement avec un angle concave
• zoom : la prochaine slide s'agrandit à partir du centre de la slide actuelle

Pour définir la transition au niveau global, il faut spécifier la valeur dans l'initialisation de Reveal.js :

Reveal.initialize({
  //Autre associations clé-valeur
  backgroundTransition: 'slide'
});

Pour définir la transition de manière ponctuelle, on utilise l'attribut data-transition="option" à l'intérieur de la balise section :

<section data-transition="zoom">
  Effet zoom
</section>
<section data-transition="slide">
  Défilement habituel
</section>

On peut même définir un comportement différent pour l'entrée et la sortie d'une slide en spécifiant deux options dans l'attribut, par exemple data-transition="zoom slide-in". Dans ce cas, on peut ajouter les suffixes -in ou -out à l'option slide.

Animations

Reveal.js peut animer automatiquement les contenus de diapositives adjacentes qui partagent des éléments communs. Pour ce faire, les deux slides doivent proposer l'attribut data-auto-animate dans les balises section. Voici un exemple tiré de la documentation officielle :

<section data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>

Pour plus d'informations sur les animations, se référer à la partie dédiée dans la documentation officielle.

Interactivité avancée avec JavaScript

Une présentation Reveal.js peut être exploitée comme toile pour intégrer toute sorte de computation avec JavaScript et interactivité avec JavaScript.

Ceci peut se faire de différentes manières, y compris l'exploitation de l'API de Reveal.js elle-même. À travers l'objet Reveal, en effet, on peut avoir accès à différentes propriétés et méthodes liées à la présentation, comme par exemple :

Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();

Pour plus d'informations, un article sur ce wiki propose des exemples de présentations interactives :

Créer des présentations interactives avec Reveal.js

Configuration/personnalisation

Il existe plusieurs manières de configurer/personnaliser les présentations faites avec Reveal.js. Dans cette section nous proposons quelques unes.

Utiliser les options de configuration built-in

À travers la méthode Reveal.initialize() on peut déterminer un grand nombre d'options d'affichage et du fonctionnement de la présentation en passant un objet (associations clé-valeur) comme argument. Par exemple :

Reveal.initialize({

  //Afficher ou pas les contrôles pour se déplacer dans les slide
  controls: true,

  //Afficher ou pas le numéro des slides
  slideNumber: true,

  //Randomiser l'ordre des slides à chaque chargement de la présentation
  shuffle: true,
});

Voir la liste des options sur la documentation officielle.

L'objet passé à la méthode d'initialisation peut également définir des paramètres liés à la taille des diapositives. Consultez la documentation officielle pour plus de détails sur ces options.

Ajouter des arrière-plans personnalisés

Il est possible de personnaliser l’arrière-plan (background) des diapositives individuellement, afin qu’une diapositive particulière ait un arrière-plan spécifique ou différent des autres.

Reveal.js prend en charge plusieurs types d’arrière-plan :

• Couleurs uniformes
• Dégradés (gradients)
• Images fixes ou en parallaxe (défilement horizontal d’une image large)
• Vidéos

Voici quelques exemples. Pour découvrir d’autres possibilités, voir la page de la documentation officielle sur le background.

Couleur uniforme

La couleur uniforme est définie avec l'attribut data-background-color qui accepte des noms des couleurs, des valeurs hexadécimales, ou la fonction rgb(xxx, xxx, xxx) avec les valeurs des couleurs primaires :

<section data-background-color="blue">
  <h1>Texte</h1>
</section>

<section data-background-color="#970000">
  <h1>Texte</h1>
</section>

<section data-background-color="rgb(230, 127, 33)">
  <h1>Texte</h1>
</section>

Dégradés

On peut spécifier trois types de dégradés (gradient) comme valeur de l'attribut data-background-gradient :

• linear-gradient(direction, couleur1, couleur2)
• radial-gradient(couleur1, couleur2)
• conic-gradient(couleur1, couleur2)

Par exemple :

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  <h2>Texte</h2>
</section>

<section data-background-gradient="radial-gradient(#283b95, #17b2c3)">
  <h2>Texte</h2>
</section>

Image de fond

Une image de fond peut être appliquée à une slide à travers des attributs avec le préfixe data-background- :

• data-background-image : URL relatif ou absolu de l'image
• data-background-size : option CSS (e.g. cover, contain)
• data-background-position : option CSS (e.g. center, top, ...)
• data-background-repeat : option CSS (e.g. no-repeat, repeat-x, ...)
• data-background-opacity : valeur de 0 (transparent) à 1 (opacité totale)

Exemples tiré de la documentation officielle :

<section data-background-image="http://example.com/image.png">
  <h2>Image</h2>
</section>
<section 
  data-background-image="http://example.com/image.png" 
  data-background-size="100px" 
  data-background-repeat="repeat"
>
  <h2>This background image will be sized to 100px and repeated</h2>
</section>

Vidéo de fond

On peut utiliser une ou plusieurs vidéos (e.g. une playlist) en arrière-plan pour chaque slide individuellement. La vidéo peut également être jouée en boucle, par exemple pour donner la sensation d'un mouvement continu. Les attributs pour appliquer une vidéo en arrière-plan sont les suivantes :

• data-background-video : un URL ou pluieurs URL séparés par une virgule qui pointent vers un fichier vidéo compatible pour le web (voir HTML5 audio et video)
• data-background-video-loop : true or false pour déterminer si la vidéo joue en boucle (false si pas spécifié)
• data-background-video-muted : true or false pour enlever le son à la vidéo
• data-background-size et data-background-opacity : mêmes options qu'une image en arrière plan (voir plus haut)

Exemple tiré de la documentation officielle :

<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" 
          data-background-video-loop data-background-video-muted>
  <h2>Video</h2>
</section>

Autres fonds

Il est également possible d'ajouter un iframe comme arrière-plan, par exemple pour montrer une démo ou une page à lire, ainsi qu'une image avec effet parallax (défilement de l'image dans la direction de la présentation). Pour plus de détails se référer à la page sur les backgrounds dans la documentation officielle.

Choisir un thème pré-défini

Reveal.js propose une dizaine de thèmes différents qui sont disponibles en tant que fichier .css différents. Dans le template proposé dans cet article, les fichiers se trouvent dans le dossier assets/vendor/revealjs/dist/theme/.

Dans la version 4.3.x traitée dans cette page, les thèmes sont les suivants (liste tirée de la documentation officielle) :

Name	Effect
black	Black background, white text, blue links (default)
white	White background, black text, blue links
league	Gray background, white text, blue links
beige	Beige background, dark text, brown links
sky	Blue background, thin dark text, blue links
night	Black background, thick white text, orange links
serif	Cappuccino background, gray text, brown links
simple	White background, black text, blue links
solarized	Cream-colored background, dark green text, blue links
blood	Dark background, thick white text, red links
moon	Dark blue background, thick grey text, blue links

Pour appliquer un thème il faut incorporer le fichier .css correspondant dans le head de la page .html contenant la présentation, par exemple :

<link
      rel="stylesheet"
      href="./assets/vendor/revealjs/dist/theme/solarized.css"
    />

Apporter des modifications à un thème existant

Il existe plusieurs manières de modifier un thème existant. Ici nous proposons d'exploiter la présence d'un fichier CSS personnel dans le template proposé pour écraser/remplacer les déclaration de la feuille de style pré-établie. La condition pour que ce mécanisme fonctionne est tout simplement que le fichier CSS personnel soit incorporé dans la page .html après le fichier du thème pré-établi.

À ce moment on peut agir principalement de deux manières :

1. Remplacer les variables des styles globaux
2. Spécifier ponctuellement des déclarations de style pour des classes et/ou des éléments

Remplacer les variables de styles globales

Chaque thème inclut des variables de style définies sur le pseudo-élément :root, qui représente l’élément racine du document (généralement <html>). Par exemple, le thème "beige" propose les valeurs suivantes pour ses variables :

:root {
  --r-background-color: #f7f3de;
  --r-main-font: Lato, sans-serif;
  --r-main-font-size: 40px;
  --r-main-color: #333;
  --r-block-margin: 20px;
  --r-heading-margin: 0 0 20px 0;
  --r-heading-font: League Gothic, Impact, sans-serif;
  --r-heading-color: #333;
  --r-heading-line-height: 1.2;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: uppercase;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: normal;
  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
  --r-heading1-size: 3.77em;
  --r-heading2-size: 2.11em;
  --r-heading3-size: 1.55em;
  --r-heading4-size: 1em;
  --r-code-font: monospace;
  --r-link-color: #8b743d;
  --r-link-color-dark: #564826;
  --r-link-color-hover: #c0a86e;
  --r-selection-background-color: rgba(79, 64, 28, 0.99);
  --r-selection-color: #fff;
}

Pour modifier ces variables, on peut redéfinir uniquement celles que l'on souhaite ajuster dans son propre fichier CSS en utilisant également le pseudo-sélecteur :root. Par exemple :

:root {
  --r-background-color: #F8F8F8;
  --r-heading-color: #123456;
}

Cette méthode est préférable à la modification directe du fichier de thème, car elle permet de préserver les ajustements en cas de mise à jour de Reveal.js. Nos fichiers CSS personnels resteront inchangés.

Spécifier ponctuellement des déclarations de style

Comme dans toute page HTML5, il est possible d’appliquer des propriétés CSS à n’importe quel élément en utilisant différents types de sélecteurs (voir Introduction à CSS). Pour s'assurer de surcharger (remplacer) des déclarations éventuellement déjà définies, il est important d'utiliser des sélecteurs spécifiques, par exemple :

.reveal h1 { color: #FFF }

Si l’on se contentait de définir h1 { ... }, il y aurait un risque qu’une déclaration plus spécifique – et donc prioritaire – soit présente dans le fichier du thème.

Les déclarations ponctuelles permettent également d’ajouter des éléments spécifiques, comme un logo fixe qui apparaît sur la présentation. Pour cela, on peut définir une image de fond pour le body :

body {
  background-image: url("lien/vers/image.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left 20px bottom 20px !important;
  background-size: 100px !important;
}

L’utilisation de !important garantit ici que ces styles ne seront pas écrasés par des déclarations moins prioritaires.

Créer son propre thème

La création d'un thème nécessite quelques connaissances techniques supplémentaires. Il faudra en effet à minima :

1. Installer Node.js
2. Télécharger l'environnement de développement de la bibliothèque depuis le dépôt GitHub officiel
3. Installer l'environnement de travail (voir la section full-setup dans la documentation officielle
4. Dupliquer le fichier .scss (un CSS à compiler) depuis le dossier css/theme
5. Apporter les modifications au nouveau fichier .scss
6. Lancer la commande de compilation npm run build -- css-themes

Fonctionnalités pour le présentation / visualisation

Les personnes qui présentent ou consultent les diapositives disposent de plusieurs options utiles, dont certaines sont illustrées dans cette section.

Présentation en plein écran

Pour afficher la présentation en plein écran, utilisez la touche du clavier F. Il faut veiller à ce que la fenêtre du navigateur possède lefocus pour que cela marche. Si la fonction ne marche pas, cliquez une fois sur la surface de la page et ensuite saisissez la touche F.

Pour sortir de la modalité en plein écran, utilisez la touche Esc.

Aperçu des slides

On peut obtenir à tout moment un aperçu de l'ensemble des slides avec la touche O ou Esc. Une fois la modalité aperçu affichée, on peut naviguer normalement à travers les slides.

Pour sortir de la modalité, utilisez à nouveau la touche O ou Esc.

Mode dédié à la présentation (speaker view)

Pour afficher la modalité présentation, utilisez la touche S. Une fenêtre pop-up (qu'il faudra probablement autoriser dans votre navigateur) va s'affiche à l'écran avec la présentation, le contenu de la prochaine étape, un timer et éventuellement les notes de chaque slide.

Pour utiliser la modalité présentation dans une classe ou une conférence, il faudra choisir l'extension plutôt que la duplication de l'écran dans les options de connexion au projecteur. De cette manière, vous pouvez déplacer la fenêtre principale du navigateur sur l'écran du projecteur et garder le pop-up de le mode présentation sur votre propre écran.

Pour plus d'informations, y compris comment ajouter des notes aux slides, se référer à la documentation officielle sur la speaker view.

Zoom

Si le plugin zoom est intégré (comme dans le template proposé), vous pouvez utiliser la combinaison Alt + Click du mouse (pour Windows et Mac) et Ctrl + Click du mouse (Linux) pour agrandir toute partie d'une slide. Pour revenir à la taille normale, utilisez à nouveau la même combinaison.

Recherche à l'intérieur des slides

Si le plugin search est intégré (comme dans le template proposé), en saisissant la combinaison Ctrl+ Alt + F un champ de recherche s'affiche, de manière très discrète, en haut à droite de l'écran. Vous pouvez y saisir les mots de la recherche et appuyer sur Enter. Si une correspondance est trouvée, la première slide avec un match s'affiche automatiquement, avec la clé de recherche mise en évidence en jaune. Si plusieurs correspondances existent, vous pouvez utiliser la flèche droite pour passer directement aux slides concernées.

Auto-play

On peut définir un timer prédéfini pour le défilement des slides. Pour ce faire, il faut passer les informations à la méthode d'initialisation, par exemple :

Reveal.initialize({
  // Autres options
  autoSlide: 5000,
  loop: true
});

Cette option peut être utile par exemple pour une utilisation dans la recherche, notamment si les participant-es doivent être exposé-es à des stimuli pour une période définie.

Si vous utilisez cette fonctionnalité dans un contexte d'usage autonome de la présentation, pensez à bien signaler l'auto-play aux utilisateurs.

Exporter en PDF

On peut exporter la présentation en PDF, se référer à la documentation officielle export pdf pour les différentes options.

Extensions

Il existe des nombreux plugin qui permettent d'ajouter des fonctionnalités. Certains plugin (i.e. ceux inclus dans le template proposé) sont directement développés par le créateur de la bibliothèque, d'autres sont développés par la communauté. Il faut donc faire attention à la fiabilité et compatibilité des plugins.

Liste de third party plugin

Audio Slideshow

Audio Slideshow est un plugin qui permet d'ajouter des narrations audio aux slides. Contrairement au même principe sur PowerPoint (voir Enregistrer un diaporama powerpoint), le résultat n'est pas une vidéo, mais la coordination entre les slides HTML5/CSS/JS et des fichiers audio. De ce fait, il y un épargne considérable en termes de poids des présentations. De plus, l'interactivité des slides est maintenues, car l'utilisateur peut continuer à bénéficier des contenus à son rythme si la narration automatique est mise en pause.

Conclusion

Cet article a proposé un aperçu du fonctionnement et des potentialités de la bibliothèque JavaScript Reveal.js. La possibilité de créer des présentations avec les technologies du web HTML5, CSS et JavaScript est une manière pour rendre les présentations indépendantes de technologies propriétaires, en faciliter la dissémination à travers le web, et pour les rendre plus interactives, notamment dans une perspective de fruition autonome.

Cet article générale est complété par des exemples plus spécifiques dans la page Créer des présentations interactives avec Reveal.js.

Ressources

Liens

• Site officiel de Reveal.js
• Dépôt GitHub de la bibliothèque : le dépôt sert aussi pour demander du support directement au(x) développeur(s)

Exemples

• Présentations liées au domaine de la technologie éducative : collections de slides crées par Mattia A. Fritz (discussion) sur différents thèmes en lien avec la technologie éducative et domaines annexes