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 :

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

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 :

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.

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

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 correspondant.

Contenus 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.