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.