News

Create an HTML5 presentation with reveal.js

Add more power to your points by ditching presentation software and delivering your message within a web browser

Create-an-HTML5-presentation-with-revealjs

Create an HTML5 presentation with revealjs

Just the act of launching some presentation software has been to known to trigger sudden episodes of acute tiredness within the ranks of a more often than not captive audience. Imagine, then, how satisfying it would be instead to pique your audience’s interest and deliver a presentation like they’ve never seen before?

How much more memorable and profitable might your presentation be if it was delivered with a little original style, perhaps from within your own website? What you may not realise is that this is perfectly within your reach and actually not all that complicated to implement.

Fortunately the availability of JavaScript libraries like reveal.js mean that you don’t need to develop all of the necessary navigation and transition effects yourself. This leaves you free to focus on creating knockout presentations packed with compelling content, so you can have your audience reaching out to engage with your message, rather than reaching for a nice soft pillow. Here we show you how to get going with an HTML5 presentation.

DOWNLOAD TUTORIAL FILES

One HTML file

All of the slides for your presentation will be contained within one HTML file. First any special fonts are loaded, reset.css is used to improve cross-browser consistency and the stylesheet is linked too. For simplicity, the tutorial file includes only some of the features that reveal.js has to offer but the library’s author maintains a full set of files that are readily available from github.com/hakimel/reveal.js.

001 <!doctype html>  
002 <html lang=”en”>
003    <head>
004    <meta charset=”utf-8”>
005    <title>Create a stylish HTML presentation     using the reveal.js library</title>
006    <link href=’http://fonts.googleapis.com/    css?family=Lato:400,700,400italic,700italic’     rel=’stylesheet’ type=’text/css’>
007    <link rel=”stylesheet” href=”css/reset.    css”>
008    <link rel=”stylesheet” href=”css/main.css”>
009    </head>
010    <body>

Slides are sections

All of the presentation’s elements are wrapped within the ‘reveal’ <div>. The slides are contained within sections that are all wrapped by the slide’s <div>. The navigation controls are displayed using the aside tag and another <div> is used for the progress indicator that appears at the bottom of the page.

001 <div class=”reveal”>
002 <div class=”slides”>
003        <section>
004 </section>
005 </div>
006 <aside class=”controls”>
007 </aside>
008 <div class=”progress”>
009 </div>
010 </div>

Slide elements

You can put any content you wish within the section tags and this content will appear on its own page as a slide. As you would expect, styling of the content is applied using a separate stylesheet. You might want to add some visual cues or even some helpful introductory text to guide users through navigation if they are running the presentation themselves.

Nested sections

The left and right arrow keys enable you to progress backward and forward though the presentation but you can also stack slides vertically by nesting sections within a section. The down arrow is used to display these slides; you might find this a useful technique for providing additional details or to visually group a collection of ideas together.

001 <section>
002    <section>
003        <h3>BRAVO</h3>
004        <img src=”img/butterfly2a.gif”>
005        <p>Who’s watching who?</p>
006    </section>
007 <section>
008        <h3>CHARLIE</h3>
009        <img src=”img/butterfly2b.gif”>
010        <p>Camouflage or danger?</p>
011 </section>
012 </section> 

Bite the bullet

Like it or not, lines of bullet text are an inevitable feature of presentations. Please, do your audience a favour and don’t use lines longer than six words, or more than six bullets per slide. You add the “fragment” class to make your bullets appear one at a time.

001 <section>
002 <h3>DELTA</h3>
003 <ul>    
004 <li class=”fragment”>Make your presentation     presentable</li>
005 <li class=”fragment”>Reveal points     individually     using class=”fragment”</li>
006 <li class=”fragment”>Follow the six-by-six     rule</li>
007 <li class=”fragment”>Use maximum six words per     line</li>
008 <li class=”fragment”>Have no more than six     lines</li>
009 </ul>    
010 </section> 

Navigational controls

To avoid unnecessary screen furniture it’s likely you won’t want the navigation controls to appear if you are running the presentation yourself, but they are a useful feature if your audience will be scrolling through the slides by themselves.

Smart UI

The JavaScript smartly detects whether or not a further slide is available in the direction of the arrow. While stylish, it might be a little too subtle to rely on if you want people to find any nested slides, so you might want to provide an extra visual cue for these.

001 <aside class=”controls”>
002 <a class=”left” href=”#”>&#x25C4;</a>
003 <a class=”right” href=”#”>&#x25BA;</a>
004 <a class=”up” href=”#”>&#x25B2;</a>
005 <a class=”down” href=”#”>&#x25BC;</a>
006 </aside>

Load the library

The reveal.js library is loaded after all the slide content, together with any other libraries that you’re using in your presentation. This presentation uses zoom.js but there are more included in Hakim’s repository on GitHub, like search functionality and PDF printing.

001 Reveal.initialize({
002 // Display controls in the bottom right     corner
003 controls: true,
004 // Display a presentation progress bar
progress: true,
005 // If true; each slide will be pushed to     the     browser history
006 history: true,
007 // Loops the presentation, defaults to     false
008 loop: false,
009 // Flags if mouse wheel navigation should     be     enabled
010 mouseWheel: true,
011 // Apply a 3D roll to links on hover
rollingLinks: true,
012 // UI style
theme: query.theme || ‘default’, // default/    neon
013 // Transition style
transition: query.transition || ‘default’ //     default/cube/page/concave/linear(2d)
014 });

Browser history option

For a live presentation set this to “true” so you can use the browser’s history menu to quickly reach a previous slide. However, on your website you will probably want to set this to “false” so visitors can easily back out of your presentation to the previous page. You never know, they might be ready to place an order with you – in which case, they don’t need to review your whole presentation in reverse!

Get some inspiration

An online service called slid.es (co-founded by the creator of reveal.js) provides a useful source for understanding what can be achieved with the reveal.js framework and some great examples of what other people have done. There is a free-to-use option as well as a more feature-rich pro version.

revealjs01

Can you see at the back?

Another library from the same author, zoom.js, provides a useful zoom option. You will obviously want to ensure your whole presentation is easily legible, but it can still be useful to zoom in to a particular element to provide emphasis. To enable the functionality you just need to link to the library and use Opt/Alt-click to zoom.

Markdown support

To make slide creation even easier, you can take advantage of the framework’s Markdown support. This enables you to create a little less markup when creating your slides. However, a more significant benefit comes from being able to separately create your slides as a Markdown file and then have reveal.js load it at runtime.

Transitions

As with font usage, most people who have sat through a number of presentations will probably agree that there is a direct and inverse relationship between the variety of slide transitions used and the quality of the overall presentation. Do show some restraint as you explore the eight provided options.

001 <a href=”?transition=cube#/        transitions”>Cube</    a> -
002 <a href=”?transition=page#/        transitions”>Page</    a> -
003 <a href=”?transition=concave#/        transitions”>Concave</a> -    
004 <a href=”?transition=zoom#/        transitions”>Zoom</    a> -
005 <a href=”?transition=linear#/        transitions”>Linear</a> -
006 <a href=”?transition=fade#/        transitions”>Fade</    a> -
007 <a href=”?transition=none#/        transitions”>None</    a> -
008 <a href=”?#/transitions”>Default</a> 

Theme

Choose from the nine themes built into reveal.js. Better still, use one of the themes as a starting point for creating your own theme to exactly meet your client’s or your own needs. The themes are all clearly and logically laid out so you can easily make tweaks or more significant changes as you require.

001 <a href=”?#/themes”>Default</a> -
002 <a href=”?theme=sky#/themes”>Sky</a> -
003 <a href=”?theme=beige#/themes”>Beige</a> -
004 <a href=”?theme=simple#/themes”>Simple</a> -
005 <a href=”?theme=serif#/themes”>Serif</a> -
006 <a href=”?theme=night#/themes”>Night</a>     <br>
007 <a href=”?theme=moon.css#/themes”>Moon</a> -
008 <a href=”?theme=simple.css#/        themes”>Simple</    a> -
009 <a href=”?theme=solarized.css#/        themes”>Solarized</a> 
010

Change it up a little

Occasionally you may want to make some dramatic changes to one or more slides and the ‘data-background’, ‘data-state’ and ‘data-background-transition’ options give you control on a per slide basis. Don’t go mad – remember less is often more.

Fragment styles

Without wanting to sound like a killjoy, the fragment styles also offer a great opportunity for the designer to throw away their better sense and liberally apply styles from the whole range available. It’s easy to apply a style to an element on the slide. Using just one or two styles that are applied consistently and logically should do the job nicely.

001 <p class=”fragment grow”>grow</p>
002 <p class=”fragment shrink”>shrink</p>
003 <p class=”fragment roll-in”>roll-in</p>
004 <p class=”fragment fade-out”>fade-out</p>
005 <p class=”fragment highlight-        red”>highlight-    red</p>
006 <p class=”fragment highlight-        green”>highlight-    green</p>
007 <p class=”fragment highlight-        blue”>highlight-    blue</p>
008

GitHub

If you want to take your presentations further with reveal.js or need some functionality that doesn’t yet exist, the best place to head for is github.com/hakimel/reveal.js. Here you will be able to get hands on with the code and its variations, and collaborate with others who are also interested in the library’s development.

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×