Réaliser une présentation avec reveal.js

Il y a quelque temps, j'ai commencé à regarder l'utilitaire pandoc pour convertir un fichier en Markdown vers du pdf, html et d'autres formats.
En regardant un peu ce qu'il est possible de faire avec cet utilitaire, j'ai découvert qu'on peut créer des présentations avec reveal.js.

Contrairement à d'autres modèles de présentation, l'avantage principale est de n'avoir besoin que d'un navigateur web pour l'afficher et d'un simple éditeur de texte pour le modifier.
On peut utiliser une présentation en local ou la déposer sur un serveur, qui sera disponible comme n'importe quelle page web.
On retrouve globalement les mêmes fonctions de bases que pour une présentation Impress avec LibreOffice.

Pour autant, je ne pense pas que cela puisse correspondre à tous les besoins de présentations (surtout complexes) mais cela reste très efficace (et conviendra à mes besoins).
On s'efforcera donc de faire une présentation structurée (et c'est pas plus mal). L'avantage dans tout ce qui est simple, c'est de se concentrer sur l'essentiel et de ne pas s'attarder sur le superflu.
Le fond a plus d'importance que la forme d'autant plus qu'une présentation ne doit pas se résumer pas à son support.

La particularité de reveal.js c'est d'avoir une présentation en 2 dimensions, des diapositives qui défilent à l'horizontale avec la possibilité de définir un niveau verticale.

Pour utiliser reveal.js, il faut avoir quelques notions de base en HTML. Il faudra éditer le code pour chaque diapositive. Rien de très difficile mais c'est pas grand public et il est même possible d'utiliser Markdown.

Autre avantage, pouvoir éditer la présentation à plusieurs et avoir une gestion de version avec git par exemple.

On va voir en détail comment créer une présentation avec reveal.js.

Lire une présentation

Plutôt qu'on long discours, on va commencer par découvrir à quoi ressemble reveal.js à travers une démo.
La démo officielle est disponible sur http://lab.hakim.se/reveal-js/ (sinon ici).

Pour faire simple, on retrouve le contenu au centre (le titre, le texte et les images), la navigation est en bas à droite (les triangles bleus) et tout en bas on voit l'état d'avancement de la présentation symbolisé par la ligne bleue (on peut avancer ou reculer en cliquant dessus).

Les raccourcis clavier

→ et ← : déplacement horizontale
↓ et ↑ : déplacement vertical
Echap ou O: aperçu de la présentation
B: mettre en pause la présentation
S: mode présentation
F: mode plein écran (Echap pour sortir du mode plein écran)
?: pour afficher l'aide

Le mode présentation

Le mode présentation permet d'avoir une fenêtre séparée avec les notes et commentaires pour chaque diapositives. On retrouve également un aperçu de la diapositive suivant et un chronomètre pour gérer le temps.

Pour activer le mode présentation, appuyer sur la touche S.
Une nouvelle fenêtre nommée "Slide Notes" s'ouvrira.

Créer une présentation

Il faut commencer par récupérer le modèle de présentation sur le site du projet: https://github.com/hakimel/reveal.js

Une fois récupéré, on décompresse l'archive dans notre dossier de travail. Ensuite, il suffit d'éditer le fichier index.html pour modifier le contenu de la présentation.

On va voir comment créer des diapositives et éditer leur contenu et découvrir quelques éléments de configuration du diaporama (titre, styles, animation, ...).

Créer des diapositives

Pour rappel, un diaporama est composé de plusieurs diapositives (aussi nommées slides en anglais).

On commence par ouvrir le fichier index.html.

Pour créer des diapositives, on se place au bon niveau: .reveal > .slides > section (section correspondant à une diapositive)
Dans notre fichier index.html, on a déjà 2 diapositives présentes: "Slide 1" et "Slide 2".

...
<div class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>Slide 2</section>
		<!-- On ajoute ici les nouvelles diapositives -->
	</div>
</div>
...

Pour ajouter une nouvelle diapositive, on insère le code au niveau du commentaire:

<section>Diapo 3</section>

Comme je l'ai dit précédemment, la présentation peut se développer sur 2 niveaux (horizontalement et verticalement).
On aura une séquence horizontale (avec les touches → et ← ) et une séquence verticale (↓ et ↑).

Par exemple, pour réaliser une présentation avec 5 diapos :

[A] [B] [E]
    [C]
    [D]

Pour créer des diapos verticales, il faut créer une section qui englobera les autres diapositives.
Pour créer les 5 diapos de l'exemple précédent, il faut insérer le code:

<section>Diapo A</section>
<section><!-- début des diapos verticales -->
	<section>Diapo B</section>	
	<section>Diapo C</section>
	<section>Diapo D</section>
</section><!-- fin -->
<section>Diapo E</section>

La première diapo verticale servira de racine et sera définit dans la séquence horizontal.

On a maintenant créé toutes les diapositives pour notre présentation.
Il nous faut ajouter le contenu correspondant à chacune d'elles.

Ajouter du contenu

On a donc définit la structure du diaporama, il nous reste à ajouter le texte associé aux diapositives.
Éditer une diapo correspond à modifier le contenu à l’intérieur de la balise <section>.

...
<section>Contenu à ajouter</section>
...

Titre et paragraphe

Pour notre première diapo, on va indiquer le titre, un sous-titre et son auteur.

<section>
	<h1>reveal.js</h1>
	<h3>Outil de présentation HTML</h3>
	<p>Crée par <a href="https://blog.niqnutn.com">nIQnutn</a></p>
</section>

On peut inclure différents niveaux de titre:

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>

Créer des paragraphes:

<p>un petit paragraphe.</p>

Mettre en forme le texte:

<strong>en gras</strong> 
<em>en italique</em>
<small>en petit</small>

Liste

Il est également possible d'ajouter des liste ordonnées ou non.

Pour les listes simples:

<section>	
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
	</ul>
</section>

Pour les listes ordonnées:

<section>
	<ol>
		<li>Premier</li>
		<li>Deuxième</li>
		<li>Troisième</li>
	</ol>
</section>

Tableau

On peut évidemment faire des tableaux.

<section>
	<table>
		<thead>
			<tr>
				<th>.deb</th>		<th>.rpm</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Debian</td>	<td>Red Hat</td>
			</tr>
			<tr>
				<td>Ubuntu</td>	<td>Fedora</td>
			</tr>
		</tbody>
	</table>
</section>

Citation

On peut aussi inclure des citations dans la présentation.

<section>
	<blockquote>"Ne crains pas d’avancer lentement, crains seulement de t’arrêter." Lao-Tseu</blockquote>
</section>

Code

Pour ceux qui en éprouve le besoin, on peut ajouter du code.
reveal.js permet une coloration syntaxique automatique du code grâce à highlight.js.

<section>
	<pre><code>
		$(document).ready(function() {
		  $('pre code').each(function(i, block) {
		    hljs.highlightBlock(block);
		  });
		});
	</code></pre>
</section>

Si le langage n'est pas correctement détecté, ajouter le langage correspondant dans la classe.

<pre><code class="javascript">...</code></pre>

Image

On peut inclure des illustrations (images):

<section>
	<img src="http://blog.niqnutn.com/image.jpg">
</section>

Vidéo

En plus des images, on peut inclure des vidéos:

<section>
	<video src="http://blog.niqnutn.com/video.mp4" controls></video>
</section>

controls permet d'ajouter les boutons de commande (lire, pause, volume,...).

Arrière plan

On peut adapter l'arrière plan des diapositives en définissant soit une couleur de fond, une image ou même une vidéo.

Couleur

Pour ajouter un fond de couleur rouge:

<section data-background-color="#ff0000">
    <h2>Arrière plan: rouge</h2>
</section>

il suffit de remplacer "#ff0000" par une autre couleur.

Image

Pour ajouter une image en arrière plan:

<section data-background="image.jpg">
	<h2>Arrière plan: image</h2>
</section>

Il est possible d'ajuster la taille de l'arrière-plan (data-background-size), sa position sur l'écran (data-background-position) et répéter l'image (data-background-repeat).

<section data-background="image.jpg" data-background-size="contain">
	<h2>Arrière plan: image mise à l'échelle</h2>
</section>

• data-background-size: auto, contain, cover ou taille (en px ou %)
• data-background-position: left, center, right, top, bottom
• data-background-repeat: repeat-x, repeat-y, repeat, space, round, no-repeat

Vidéo

Pour ajouter une vidéo en arrière plan:

<section data-background-video="video.mp4">
	<h2>Arrière plan: vidéo</h2>
</section>

Il est possible de définir si on joue la vidéo en boucle (data-background-video-loop) et de mettre la vidéo en sourdine (data-background-video-muted) .

<section data-background-video="video.mp4" data-background-video-muted="true">
	<h2>Arrière plan: vidéo en sourdine</h2>
</section>

• data-background-video-muted: false, true
• data-background-video-loop: true, false

Lien interne

On peut inclure dans la présentation des liens internes pour faciliter la navigation.

Pour naviguer d'une diapo à l'autre (séquence horizontale / verticale):

<section>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-left">Gauche</a>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-right">Droite</a>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-up">Haut</a>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-down">Bas</a>
</section>

Pour lire les diapos dans l'ordre (la prochaine diapo):

<section>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-prev">Précédent</a>
	<a href="http://blog.niqnutn.com/rss/categorie8#" class="navigate-next">Suivant</a>
</section>

Mais on peut aussi créer un lien vers une diapo spécifique:

<section>
	<a href="http://blog.niqnutn.com/rss/categorie8#/2">Diapo 2</a>
	<a href="http://blog.niqnutn.com/rss/categorie8#/3/4">Diapo verticale 4</a>
</section>

• 2: représente la deuxième diapo horizontale.
• 3: représente la troisième diapo horizontale.
• 4: représente la quatrième diapo verticale.

Il est possible d'utiliser des ancres pour faciliter la créations de liens.

<section>
	<a href="http://blog.niqnutn.com/rss/categorie8#/diapo-suivante">Lien vers la diapo suivante</a>
</section>

• diapo-suivante: correspond à l'identifiant de la page.

Dans ce cas, il sera aussi nécessaire d'ajouter l'identifiant de la diapo correspondante:

<section id="diapo-suivante">
	Lorem Ipsum
</section>

Note

Il est possible d'insérer des notes dans la présentation Elles doivent être insérées à l'intérieur de la balise <aside>.

<section>
	<h2>Chiffre de CÉSAR</h2>
	<blockquote>XSB  ZBPXO</blockquote>
	<p>Appuyer sur la touche <strong>S</strong> pour afficher les notes.</p>

	<aside class="notes">
		César écrivait des messages secrets à Cicéron en remplaçant chaque lettre par une autre située trois rangs plus loin dans l'alphabet.
		<br/>ROT3: Nom spécifique de ce procédé avec décalage de trois positions.
	</aside>
</section>

Pour utiliser le mode présentation.
Pour tester le mode présentation: démo

Une fois que vous avez ajouté l'ensemble du contenu dans votre présentation, il ne reste plus qu'à configurer votre diaporama.

Configurer le diaporama

reveal.js est parfaitement utilisable avec les paramètres par défaut. Il est quand même intéressant de modifier certains éléments, comme la personnalisation du thème et d'autres éléments visuels.

Méta-données

Lors de la création de votre présentation, je vous recommande de commencer par modifier le titre, la description et l'auteur.

Il faut éditer les informations présentes à l'intérieur de la balise "head":

<head>
...
	<title>Introduction à reveal.js</title>
	<meta name="description" content="Présentation HTML avec reveal.js">
	<meta name="author" content="nIQnutn">
...
</head>

Thèmes

Il est possible de choisir parmi plusieurs thèmes existants:

• black: arrière-plan noir, texte blanc, lien bleu (thème par défaut)
• beige: arrière-plan beige, texte noir, lien marron
• blood: arrière-plan noir, texte blanc, lien rouge
• league: arrière-plan gris, texte blanc, lien bleu (thème par défaut pour reveal.js < 3.0.0)
• moon: arrière-plan bleu, texte blanc, lien bleu
• night: arrière-plan noir, texte blanc, lien orange
• serif: arrière-plan gris, texte noir, lien gris
• simple: arrière-plan plan, texte noir, lien bleu
• sky: arrière-plan bleu, texte noir, lien bleu
• solarized: arrière-plan crème, texte gris, lien bleu
• white: arrière-plan blanc, texte noir, lien bleu

Pour modifier le thème utilisé, il faut éditer la ligne en changeant son nom:

<head>
	...
	<link rel="stylesheet" href="http://blog.niqnutn.com/css/theme/black.css" id="theme">
	...
</head>

Par exemple, en remplaçant "black" par "league".

Pour tester les thèmes disponibles: demo

Animation

Il est possible d'ajouter certains effets sur le texte pour mettre en avant les éléments importants de votre présentation.

Pour ajouter une animation, il faut ajouter la classe "fragment".

<section>
	<p>Cliquer sur suivant...</p>
	<p class="fragment">... pour afficher le texte.</p>
</section>

L'animation par défaut permet de faire apparaître le texte lorsque que l'on avance dans la présentation.
Elle peut être utilisée pour faire apparaître un à un les éléments d'une liste à puce.

Il existe d'autres types d'animation:

• grow: agrandir le texte
• shrink: rétrécir le texte
• fade-out: faire disparaître le texte
• fade-up: faire apparaître le texte
• current-visible: faire apparaître le texte une seule fois
• highlight-current-blue: mettre la texte en bleu
• highlight-red: mettre le texte en rouge
• highlight-green: mettre la sélection en vert
• highlight-blue: mettre la sélection en bleu

Pour agrandir la taille d'un mot ou mettre en rouge une partie du texte:

<section>
	<p>Pour modifier la <span class="fragment grow">couleur<span> du texte <span class="fragment highlight-red">en rouge</span>.</p>
</section>

Pour tester les animations disponibles: demo

Transition

Il est possible de modifier les transitions entre les diapositives.

• none, fade, slide, convex, concave, zoom

Pour définir le type de transition pour l'ensemble du diaporama:

Reveal.initialize({
	...
	transition: 'slide', // none, fade, slide, convex, concave, zoom
	...
}) 

Pour définir le type de transition pour une seule diapo:

<section data-background-transition="zoom">
	<p>Transition "zoom" pour cette diapo uniquement.</p>
</section>

Pour tester les transitions disponibles: demo

Paramètres

Il existe encore d'autres paramètres qu'il peut être utile de modifier.
Pour changer le comportement par défaut, il faut éditer les paramètres dans "Reveal.initialize":

Reveal.initialize({
	...
	transition: 'slide',
	...
}) 

Afficher les boutons de navigation

Pour afficher les boutons de navigation (en bas à droite):

 controls: true,	// false  pour désactiver

Afficher la barre de progression

Pour afficher la barre de progression de votre présentation (en bas):

progress: true,		// false  pour désactiver

Alignement vertical

Aligner au centre le contenu des diapos:

center: true		// false  pour désactiver

Afficher le numéro du diapo

Permet d'afficher le numéro de la diapo (en bas à droite):

slideNumber: false,	// true  pour activer

Il existe d'autres paramètres disponibles: documentation

Conclusion

reveal.js est une alternative intéressante à Impress de Libre Office. Même avec un nombre de fonctions limité, on peut réaliser un diaporama élaboré.

Il est nécessaire comprendre le code HTML pour l'utiliser (au moins maîtriser les bases). A l'utilisation, je trouve qu'on est plus productif et on se concentre sur l'essentiel: la structure et le contenu plutôt que la mise en forme. L'utilisation de logiciel comme Impress ou PowerPoint peut être chronophage lors de modification et qu'on tente de parcourir les menus.

L'autre avantage réside dans le fait que la présentation est facilement modifiable avec un simple éditeur de texte. Tout le monde peut consulter le diaporama dés lors qu'il a un navigateur web récent (elle peut être en local sur le PC ou hébergé sur un site).
C'est pratique de pouvoir travailler même si on est pas sur son PC (quand on arrive pas à se connecter au projecteur ou on a plus de batterie).

Certains verront également la possibilité de travailler à plusieurs sur la présentation et d'avoir une gestion de version, avec git par exemple.

Pour mon utilisation, reveal.js est amplement suffisant et plus besoin d'usine à gaz.
C'est surtout l'occasion d'utiliser Markdown pour réaliser des présentations: Faire une présentation avec reveal.js et Markdown (bientôt) .

Ressources

• La page du projet reveal.js: https://github.com/hakimel/reveal.js
• La démo: http://lab.hakim.se/reveal-js/
• La documentation est aussi disponible dans le fichier README.md