Qui n'a pas déjà, lors d'une conférence, d'une réunion ou d'un événement eu le sentiment que ses supports Powerpoint étaient "has-been" ? Pour ma part, j'ai récemment suivi des conférences au Blend Web Mix et là je me suis dit "il faut faire quelque chose !"

C'est pourquoi, aujourd'hui je vais vous parler de Reveal.js.

Présentation

Reveal.js est un framework permettant de rapidement créer des présentations originales combinant HTML5, CSS3 et Javascript. Il a été développé par le suédois Hakim El Hattab et permet de mettre en place des supports identiques à ceux que vous pourriez créer avec Powerpoint mais en mode web, donc visualisable depuis un navigateur. 

logo reveal.js

 

 

 

 

J'ai souvent voulu tester un outil de ce genre, mais à chaque fois que je me  lançais, je découvrais qu'un certain temps d'apprentissage était nécessaire. Reveal, lui, est simple à prendre en main : si vous maîtrisez le HTML, alors vous maîtrisez Reveal.js :P.
Le processus de mise en place peut se résumer de la manière suivante :

  1. Récupérez le framework sur github.
  2. Editez le fichier index.html pour créer votre présentation

Simple non ?!

Fonctionnement

Chaque slide correspont à une <section> :

<div class="slides">
                <section>
                    <h1>Slide 1</h1>
                    <h3>Mon premier slide</h3>
                    <p>
                        Contenu du premier slide
                    </p>
                </section>

                <section>
                    <h1>Slide 2</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    </p>
                </section>

                <!– Imbrication de sections pour un scroll vertical–>
                <section>
                    <section>
                        <h2>Autre Slide</h2>
                            <ul>
                                <li>item 1</li>
                                <li>item 2</li>
                                <li>item 3</li>
                            </ul>
                    </section>
                </section>

                <section>
                    <h2>Slides 5</h2>
                    <p>
                        Dernier slide
                    </p>
                </section>
            </div>

Vous remarquerez dans le code ci-dessus, qu'en imbriquant deux sections, on obtient une transition verticale.
Un petit bout de javascript permet d'initialiser la présentation :

<script>
         Reveal.initialize({
            controls : true,
           progress : true,
          theme: Reveal.getQueryHash().theme
       })
</script>

Les différents paramètres de configuration sont disponibles ici.

Conclusion

J'espère que ce petit aperçu va vous donner envie de tester ce framework qui, à mon goût, est puissant et facile à manipuler. Quatre thèmes sont livrés par défault avec les sources mais rien ne vous empêche de créer le votre si vous maîtrisez le CSS.

L'auteur a également développé une interface en ligne permettant de créer une présentation en mode WYSIWYG, je vous conseil d'y jeter un oeil : slides

Je prépare actuellement une présentation (avec Reveal.js bien sûr :)) pour la boîte dans laquelle je travaille, je la mettrai en ligne dès que j'aurai terminé.

 

EDIT (16/12/2013) : La présentation est prête, vous la trouverez à cette adresse :  http://supports.severin-bruhat.com/web-performance