Aller plus loin avec reveal.js

reveal.js est un outil très utile pour faire des présentations en HTML. Il propose en plus d'utiliser la syntaxe Markdown. Son utilisation est relativement simple et ne nécessite pas de logiciels spécifiques.

Il existe encore quelques options très intéressantes à connaître pour réaliser votre présentation.

Chargement différé

Si vous réalisez une présentation avec beaucoup de contenu multimédia, le chargement du diaporama pourrait être long. L'utilisation du lazy loading (ou chargement différé) permet de charger le contenu multimédia que pour les n diapos suivantes.

Cela permet d'être plus réactif lors du lancement de la présentation tout en évitant d'avoir des temps de chargement pendant.

Pour utiliser le chargement différé, il faut remplacer "src" par "data-src".


code
<section>
	<img data-src="http://blog.niqnutn.com/image.png">
	<video data-src="http://blog.niqnutn.com/video.mp4"></video>
</section>

Le chargement différé peut être utilisé pour les images, les vidéos, les fichiers audio et les iframes.

Configuration

Il est possible de modifier le nombre de slides à charger:


code
Reveal.initialize({
	...
	viewDistance: 3,   // Number of slides away from the current that are visible
	...
})

https://github.com/hakimel/reveal.js#lazy-loading

Code

Il est possible de créer un bloc de code éditable:


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

Il est possible de supprimer les lignes vides (en dessus et en dessous du bloc de code):


code
<section>
	<pre><code data-trim>


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

https://github.com/hakimel/reveal.js#code-syntax-highlighting

Animation avancée

Il est possible de définir l'ordre d'apparition d'un élément avec "data-fragment-index":


code
<section>
	<p class="fragment" data-fragment-index="3">Et pour finir, le troisième</p>
	<p class="fragment" data-fragment-index="1">En premier</p>
	<p class="fragment" data-fragment-index="2">Ensuite le deuxième</p>
</section>

https://github.com/hakimel/reveal.js#fragments

Transition avancée

On peut définir la vitesse de transition entre les diaporama.

Pour définir la vitesse de transition pour l'ensemble du diaporama:


code
Reveal.initialize({
	...
	transitionSpeed: 'default', // default, fast, slow
	...
})

Pour définir la vitesse de transition pour une seule diapo:


code
<section data-transition-speed="fast">
	<h2>Choisir la vitesse de transition: default, fast or slow!</h2>
</section>

On peut définir un type de transition pour l'apparition et un autre pour la disparition de la diapo.
Il faut suffixer le type de transition avec "-in" et "-out":


code
<section data-transition="zoom-in slide-out">
	<b>zoom</b> puis <b>slide</b>
</section>

https://github.com/hakimel/reveal.js#slide-transitions

Étirer un élément

Il est possible d'étirer un élément (image, vidéo, ...) pour qu'il utilise le maximum d'espace sur la diapo.


code
<section>
	<video class="stretch" src="http://blog.niqnutn.com/video.mp4"></video>
</section>

https://github.com/hakimel/reveal.js#stretching-elements

Note

Il existe une méthode alternative pour insérer des notes dans la présentation.


code
<section data-notes="Lorem Ipsum">
	<p>Appuyer sur la touche <strong>S</strong> pour afficher les notes.</p>
</section>

Titre sur les diapos verticales

On peut insérer un titre sur l'ensemble des diapos verticales.
Il faut ajouter le titre juste avant de créer les diapos X et Y.


code
<section>Titre visible
	<section>Diapo X</section>
	<section>Diapo Y</section>
</section>

Conclusion

Je vous ai présenté l'essentiel des fonctionnalités qui me semblent intéressantes (pour mon usage personnel). La documentation officielle contient encore quelques éléments, n'hésitez pas à la consulter pour en apprendre plus.

Pour ceux qui sont à l'aise avec HTML, CSS et javascript il y aura la possibilité d'être beaucoup plus créatif.
Je pense notamment à la création de nouveaux thèmes.

N'hésitez pas à partager vos trucs et astuces sur reveal.js.

Ressources

2016 nIQnutn CC-BY
tags : plus
0 vote
11/01/2017 10:00
Ecrit par nIQnutn - Afficher l'article originel
Vus : 3016
Publié par nIQnutn : 73