Sliders de présentation en JavaScript
Vous connaissez certainement les présentations sous forme de sliders, ce que beaucoup appellent PowerPoint, en référence au logiciel propriétaire du même nom. Bien entendu, nous avons une alternative libre avec LibreOffice. Mais il faut compter maintenant avec une forme un peu plus originale, permettant de visionner des sliders grâce au navigateur Internet.
Même si le concept n’est pas nouveau, il peut intéresser pour la mise en place rapide d’une présentation simple mais soignée. Je pense que c’est révélateur des avancées du web.
Quelques points à souligner :
- Présentation soignée, profitant des effets modernes qu’offre le CSS3, et vous n’avez pas à vous occuper de la compatibilité entre navigateur, car vous utilisez ce qui se fait de mieux n’est-ce pas ?
- Effet de mouvement glissé entre les slides. On a tous eu l’occasion de voir les merveilles que jQuery peut faire. Il est normal d’en profiter pleinement avec une présentation basé sur un navigateur. On retrouve des effets entre slides, mais également sur un même slide afin de faire apparaître progressivement le arguments.
- Pas de logiciels à installer autre que votre navigateur et éditeur de texte favoris.
- Contenu visible à la volée en rafraîchissant la page du navigateur, pas besoin de passer par un PDF.
- Syntaxe simpliste, puisque c’est du HTML.
Pour le moment, je n’ai retenu que deux alternatives :
Ce sont des projets Libre, Shower est sous licence MIT, quant à Deck, il est sous double licences MIT/GPL. Nous allons voir ici uniquement Deck.
Une démonstration est à la disposition, il est certainement plus parlant de le voir en action.
Pour la syntaxe, le plus gros de l’idée est d’inclure la classe slide selon
les besoins. Quelques exemples repris de leur site:
<h2>How to Make a Deck</h2>
<ol>
<li>
<h3>Write Slides</h3>
<p>Slide content is simple HTML.</p>
</li>
<li>
<h3>Choose Themes</h3>
<p>One for slide styles and one for deck transitions.</p>
</li>
…
</ol>
</div>
Rien de compliqué, on voit que le tout est contenu dans une div avec une
classe slide.
Pour obtenir un effet de glissé entre chaque élément, on rajoute la classe slide comme suit :
<h2>How to Make a Deck</h2>
<ol>
<li class="slide">
<h3>Write Slides</h3>
<p>Slide content is simple HTML.</p>
</li>
<li class="slide">
<h3>Choose Themes</h3>
<p>One for slide styles and one for deck transitions.</p>
</li>
…
</ol>
</div>
Un jeu d’enfant !
Pour les autres fonctionnalités, on peut inclure :
- Des citations.
- Du code
- Des images.
- Des vidéos.
- Des iframes.
Pour moi qui n’ai pas de gros besoin, cette solution me convient à merveille, rapide et soignée, avec une pointe de modernisme. Et vous, quelle solution utilisez vous ?
