Par rapport au classique beamer, les présentations web offrent beaucoup plus de flexibilité pour inclure des animations, vidéos, définir des fragments, etc... surtout combiné avec Javascript.
transition.js est un petit code javascript qui permet de créer aisément des présentations HTML5. D'autres options existent comme reveal.js, mais j'ai préféré développé mon propre outil qui, s'il est moins développé, est basé sur un principe simple qui permet une prise en main rapide et offre plus de liberté dans la création des fragments.
Télécharger l'archive transition.tgz et la décompresser avec
$ tar xzvf transition.tgz
Ouvrir la démonstration.
$ google-chrome transition/slide-show1.html
Le principe de base de transition.js consiste simplement à activer/désativer des classes associées à des éléments. L'activation ou la désactivation d'une classe s'effectue par l'adjonction d'un attribut fragments à l'élément concerné.
Pour illustrer ce principe, considérons le cas très simple suivant
example1.html<html>
<head><meta charset="UTF-8"></head>
<style> .hidden {opacity:0;} </style>
<body>
Tapez sur l'une des touches suivantes:
<ul>
<li>la barre d'espace</li>
<li>fléche du bas</li>
<li>flèche de droite</li>
<li>retour du chariot.</li>
</ul>
<div class="hidden" fragments="{hidden}">
BRAVO !<br/>
Vous pouvez revenir en arrière avec les touches
<ul>
<li>fléche du haut</li>
<li>flèche de droite.</li>
</ul>
</div>
</body>
<script type="text/javascript" src="transition.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){initFrag()})</script>
</html>
L'élémént div est initialement de class hidden défini dans la feuille de style du document. Il est ainsi invisible, car son opacité est nulle. Un fragment lui a été associé. Il agit sur la class hidden qui est supprimée de l'élément quand la transition est appliquée.
Plusieurs transitions peuvent être déclenchées par le même évènement. Dans le script example2.html, la classe hidden est activée/désactivée sur l'élément ou est défini la transition (i.e. this) et sur l'élément dont l'identité est first.
example2.html<div class="hidden" fragments="[this,first] {hidden}">
Il est possible d'appliquer simultanément des transitions de types différents à chaques éléments. Dans example3.html, on modifie la taille de la police de l'élément first.
example3.html<div class="hidden" fragments="[this] {hidden} +0[first]{small}">
L'application d'une transition peut-être déclenchée par un évènement défini en fonction de sa position relative à l'élément concerné. A cet effet, il suffit d'ajouter +n ou n est un entier (positif ou négatif). La transition sera alors déclenchée lors de l'exécution du n-ième fragment suivant.
exemple4.html<ul>
<li fragments="+1{small}">la barre d'espace</li>
<li class="small" fragments="{small} +1{small}">fléche du bas</li>
<li class="small" fragments="{small} +1{small}">flèche de droite</li>
<li class="small" fragments="{small} +1{small}">retour du chariot.</li>
</ul>
Les transitions peuvent être appliquées progressivement afin de créer des effets d'animation. Pour cela il faut ajouter Xs où X est le temps de transition en secondes. Dans example5.html, on applique deux classes hidden et huge progressivement en une seconde.
exemple5.html<div class="hidden" fragments="[this] {hidden huge} 1s +0[first]{small}">
Remarque : Le temps de transition appliqué à un élément lors d'un évènement donné est unique et s'applique à toutes les classes.
Un délais d'application permet de générer des animations plus complexes. Pour cela il faut ajouter Xs Ys où X est le temps de transition et Y le délais en secondes. Dans example6.html, la class huge n'est appliquée qu'après un délais d'une seconde, temps de transition de la classe hidden.
exemple6.html<div id="container">
<div class="hidden" fragments="[this] {hidden} 1s +0[container]{huge} 1s 1s +0[first]{small}">
BRAVO !<br/>
Vous pouvez revenir en arrière avec les touches
<ul>
<li>fléche du haut</li>
<li>flèche de droite.</li>
</ul>
</div>
</div>
Remarque : Le délais de transition appliqué à un élément lors d'un évènement donné est unique et s'applique à toutes les classes. C'est la raison pour laquelle nous avons ajouté un élément container.
transition.js peut s'utiliser seul ou en combinaison avec transition.css qui définit un certain nombre de classes adaptées à la création de présentations. my-first-slides.html utilise cette feuille de style pour réaliser une micro-présentation.
my-first-slides.html<html>
<head>
<link rel="stylesheet" type="text/css" href="transition.css">
<style>
</style>
</head>
<body id="body">
<div id="slides">
<section>
My FIRST SLIDE
</section>
<section fragments="[slides]{--shift++} 1s">
my second slide
</section>
<section fragments="[slides]{--shift++} 1s">
... That's all folks.
</section>
</div>
</body>
<script type="text/javascript" src="transition.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){initFrag()})</script>
</html>
Un template CSS sarah.css permet de gèrer l'apparence des transparents. Il peut-être adapté aux besoins de chacun.
my-second-slides.html<link rel="stylesheet" type="text/css" href="sarah.css">
La touche d'échappement permet d'avoir une vue d'ensemble des transparents et de naviguer rapidement de l'un à l'autre. Il ne fonctionne qui si la structure de la page HTML contient un élément principal identifié par slides et que les transparents sont délimités par des tags <section> de l'élément slides.
La feuille de style sarah.css définit les éléments logo et footnote. Ils permettent d'ajouter un logo en haut à droite de la page et une bas de page.
my-third-slides.html<img style="background-color:white;padding:1em;"
id="logo" src="http://math.unice.fr/~pantz/css/Images/Logo-UCA.png"/>
<div id="footnote">Olivier Pantz, LJAD, Université Côte d'Azur.</div>