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.

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.

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.

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