In the course of the last month, I was tasked with creating a presentation on a web design project, including various external websites and tools. This left me with various options - Google Slides, LibreOffice, LaTeX Beamer, or any other typical presentation software. However, as I wanted to display some live views of websites, I looked for modern software that would allow this - and discovered Reveal.JS. This is a JavaScript presentation framework - it is written in HTML, and as such supports iFrame (and various other pre-built options for displaying media content). After using it, and finding the result to be exactly what I wanted, I felt sharing this knowledge in this month’s article would be ideal. Can I use this without HTML knowledge? Technically, the format for Reveal.JS is purely HTML. However, copying the sections from the demo file, and adjusting it for your needs, is sufficient. If you prefer a GUI way, there is a “visual editor” called Slides. Slides offers 3 tiers of pricing, the first of which is free. Depending on your needs, the free option may be sufficient. In any case, my recommendation is always to learn something the “hard way” (read: the code, or the command-line), and then fall back to helpers, IDEs, or visual editors once you understand how everything works, which is why I’ll focus on the manual method.

Au cours du dernier mois, on m'a demandé de créer une présentation sur un projet de conception de sites Web, comprenant divers sites Web et outils externes. J'avais plusieurs options : Google Diapositives, LibreOffice, LaTeX Beamer, ou tout autre logiciel classique de diaporama. Cependant, comme je voulais afficher des vues en direct des sites, j'ai cherché un logiciel moderne qui permettrait cela, et j'ai découvert Reveal.JS. C'est un environnement de présentation en Javascript, il est écrit en HTML, et supporte donc les iFrame (et diverses autres options intégrées pour l'affichage de contenu multimédia). Après l'avoir utilisé et avoir obtenu exactement ce que je voulais comme résultat, j'ai pensé qu'il serait idéal de partager ces connaissances dans l'article de ce mois.

Puis-je l'utiliser sans connaissances HTML ?

Techniquement, le format de Reveal.JS est purement HTML. Cependant, vous pouvez trouver suffisant de recopier des sections du fichier de démonstration et de les adapter à vos besoins. Si vous préférez une interface graphique, il y a un « éditeur visuel » appelé Slides [Ndt : diapositives]. Slides propose 3 niveaux de prix, dont le premier est gratuit. Selon vos besoins, l'option gratuite peut suffire. En tout cas, ma recommandation est toujours d'apprendre quelque chose « à la dure » (lire : le code ou la ligne de commande), puis d'utiliser ensuite des utilitaires et autres éditeurs visuels une fois que vous avez compris comment tout fonctionne ; c'est pourquoi je vais me concentrer sur la méthode manuelle.

Getting started Technically, besides forking the git repository, there is nothing further you need to do. However, some features (external markdown, speaker notes) require it to be running on a server (which is included). Those instructions are as follows: • Install Node.js: sudo apt-get install nodejs • Install Grunt: sudo npm install -g grunt-cli • Clone repository: git clone https://github.com/hakimel/reveal.js.git cd reveal.js • npm install (installs all dependencies outlined in the package.json file) • grunt serve (executes the grunt task “serve”, which is the server) • Visit http://localhost:8000 to see the presentation.

Démarrage

Techniquement, il n'y a rien de plus à faire que de « forker » le dépôt git. Cependant, certaines fonctionnalités (marques externes, notes du conférencier) nécessitent d'être exécutées sur un serveur (qui est inclus). Voici les instructions :

• Installez Node.js :

sudo apt-get install nodejs

• Installez Grunt :

sudo npm install -g grunt-cli

• Clonez le dépôt :

git clone https://github.com/hakimel/reveal.js.git

cd reveal.js

• npm install (installe toutes les dépendances décrites dans le fichier package.json) ; • grunt serve (exécute la tâche grunt « serve », qui est le serveur). • Visitez http://localhost:8000 pour voir la présentation.

Viewing the presentation As you can see, the github repository contains a working demo presentation, showing the various options. I would recommend browsing through the demo, in order to decide what animations/transitions/techniques you like. Creating your own presentation This can be done one of two ways - write an index.html file by hand following the formatting in the demo file, or simply take the existing index.html (or a copy of it), and adjust it for your needs. The key is to check the syntax of the slides you want to emulate/adjust. For example - to make vertical slides, the <section></section> must be within a <section></section>. Here is a quick list of things to keep in mind: • the outermost parent must be a <div class=”reveal”></div> • The second-level parent must be <div class=”slides”></div> • Each slide is a <section></section> (vertical slides are nested) • Wrap all non-header, non-list text in paragraph tags (<p></p>). • Notes (for the presenter view) must be in an <aside class=”notes”></aside> within the <section></section> (slide) they belong to.

Voir la présentation

Comme vous pouvez le voir, le dépôt github contient une présentation de démonstration, montrant les différentes options. Je vous recommande de parcourir la démo, afin de décider quelles animations/transitions/techniques vous aimez.

Créer votre propre présentation

Cela peut se faire de deux façons : écrire un fichier index.html à la main en suivant la mise en forme du fichier de démonstration, ou tout simplement prendre le index.html existant (ou une copie de celui-ci), et l'ajuster à vos besoins. Le secret est de vérifier la syntaxe des diapositives que vous souhaitez émuler/régler. Par exemple, pour faire des dispositives verticales, le <section></section> doit être dans un <section></section>.

Voici une liste rapide des choses à garder à l'esprit : • le parent le plus extérieur doit être un <div class=”reveal”></div> ; • le parent de deuxième niveau doit être <div class=”slides”></div> ; • chaque diapositive est un <section></section> (les diapositives verticales sont imbriquées) ; • placez tous les textes non en-tête et non-listes dans des balises de paragraphe (<p></p>) ; • les notes (pour la vue du présentateur) doivent être dans un <aside class = “notes”></aside> dans le <section></section> (diapositive) auquel elles appartiennent.

Depending on how much functionality you’ve integrated into your presentation, you can then adjust the dependencies array in the <script></script> tags. This is also where any settings can be configured. For a full list of settings, see the github repository. Also remember: exporting to PDF is supported only on Chrome (and, most likely, Chromium). If you don’t want to integrate a link, simply opening the page with the following url will load the correct print stylesheets, so you can print the page, and save it to PDF: http://localhost:8000/?print-pdf Hopefully this article will be helpful to some - especially those who love to use exciting new tools for run-of-the-mill tasks. If you have any questions, issues, or requests, please let me know at lswest34+fcm@gmail.com. As always, I’m also open to requests for future articles. Further Reading http://lab.hakim.se/reveal-js/#/ Reveal.JS homepage http://slides.com/ Visual editor

Suivant le nombre de fonctionnalités que vous avez intégrées dans votre présentation, vous pouvez ensuite régler le tableau des dépendances dans les balises <script></script>. C'est également là que vous configurez les paramètres. Pour une liste complète des réglages, voir le dépôt github. Rappelez-vous aussi : l'exportation au format PDF est uniquement prise en charge sur Chrome (et, très probablement, Chromium). Si vous ne voulez pas intégrer un lien, ouvrez simplement la page avec l'URL suivante pour charger les feuilles de style d'impression correctes, pour que vous puissiez imprimer la page et l'enregistrer au format PDF : http://localhost:8000/?print-pdf.

Espérons que cet article sera utile à certains, en particulier ceux qui aiment se servir de nouveaux outils passionnants pour les tâches banales. Si vous avez des questions, des problèmes ou des demandes, faites-les moi connaître, s'il vous plaît, sur lswest34+fcm@gmail.com. Comme toujours, je suis aussi ouvert à des demandes pour de futurs articles.

Pour aller plus loin

http://lab.hakim.se/reveal-js/#/ Page d'accueil Reveal.JS.

http://slides.com/ Éditeur visuel.