Presentations With Reveal.js and HTML5: Better Than PowerPoint
Slide Markup via HTML5
The markup of the presentation slides ist done by using HTML5 elements of the type SECTION. Above these sections we have two containers telling the framework, where the presentation part inside of the HTML document shall begin:
1 2 3 4 5 6 7 8 9 10
<div class="reveal"> div class="slides"> <section> <p>Folie 1</p> </section> <section> <p>Folie 2</p> </section> </div> </div>
Inside each section arbitrary content is allowed. You navigate using the arrow keys. You can even nest sections into each other. That way you could further segment your presentation. Using the left and right arrow keys lets you navigate through the sections of the first level. Reaching a nested section the up and down arrows come into effect and let you scroll through the sections of the second level:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<div> div> <section> <p>Folie 1</p> </section> <section> <section> <p>Folie 2 a</p> </section> <section> <p>Folie 2 b</p> </section> </section> </div> </div>
Pressing ESC shows an index of all slides from where you can target each slide individually.
Reveal.js: Extended Navigation Possible
If you’d like to enable mouse navigation in addition to keyboard control, you can do so by implementing a small operating element into your presentation. To achieve mouse navigation you integrate a small snippet of code into the container right after the slides definition. You’ll see a control element showing the four directions symbolized by their respective arrow keys at the bottom right of the browser window.
In long presentations you might like to have a progress bar shown, just to make sure you don’t get lost or bend your speaking time too much. Again this is just one line of code. The progress bar shows up at the bottom horizontal. Its position represents the position of the active slide in the whole presentation.
Reveal.js: Capable Of Markdown
This one is for me. Instead of using HTML to style the contents of your slides, you can as well make use of the simple Markdown syntax. I use that all of the time. This article is written in Markdown. Reveal.js will simply translate your Markdown to HTML. Advantage: A content in Markdown is lots easier to maintain as you don’t have to search for the content inside of all those opening and closing tags.
1 2 3 4 5
<section> ##Heading H2 Paragraph with [link](http://www.noupe.com) </section>
Denis works as a freelance web designer since 2005.