Fed up with Powerpoint I decided to take a look at reveal.js to see how simple it would be to put together a presentation with it and I found it really easy to get up and running with. reveal.js is a framework for creating presentations using html. If you come from a coding background and are used to working with CSS, HTML and JavaScript you’ve got all the skills to start creating beautiful presentations. There is also an online graphical interface for noncoders or anyone who prefers that.

Getting started

First thing to do is get a copy of the framework from Github. The framework includes a number of sample themes for slides, support for printing and exporting your slides to PDF and a number of plugins including support for speaker notes, writing your slides in markdown syntax and the ability to zoom.

Creating the layout of your presentation

Just to show you how simple it is here is an example presentation which is basically one html file. Copy this code and store in the top level directory of your reveal.js directory.

<!doctype html>
    <meta charset="utf-8">
    <title>HTML5 Presentations How-To</title>
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css">
   <div class="reveal">
     <div class="slides">
         <h3>Creating beautiful presentations</h3>
         <h1>Getting Started</h1>
         <p>It's really easy when you know...</p>
         <p class="fragment">JavaScript</p>
         <p class="fragment">HTML</p>
         <p class="fragment">CSS</p>
         <h1>It come with...</h1>
           <p> to get your started!</p>
            <h1>Plugins are neat</h1>
            <h3>They let you do stuff like..</h3>
            <h1>Include speaker notes</h1>
            <h1>Write your slides in markdown</h1>
            <h1>And best of all you can create your own</h1>
       <script src="lib/js/head.min.js"></script>
       <script src="js/reveal.min.js"></script>
         controls: true,
         keyboard: true,
         center: true,
         mouseWheel: true

In the header you can see I’ve included the reveal.js stylesheet and used the default theme that comes with it. At the bottom of the file just before the closing body tag I’ve included the reveal.js JavaScript files and initialised an instance of Reveal. When I create an instance I can specify certain properties to control how my presentation displays. In the example I’ve allowed the presentation to be navigated via the mouse or keyboard. I’ve displayed controls in the bottom right corner which shows you how you can navigate the slides. Center just means vertical centring of slides. The slides are held within a reveal div and slides div. Each slide is represented by a section. You can gradually display elements using the fragment class as demonstrated on the second slide and you can vertically move between slides as well as the traditional horizontal navigation. This is demonstrated in the last slide and achieved by nesting sections within a section.

To view it you just open up the html file in your browser. The F key allows you to view the presentation full screen.

Moving Beyond the Basics

As I mentioned before reveal.js comes with lots of great features to start you off including themes, different ways of transitioning between slides and plugins to allow you to extend what the standard framework does. Once you are comfortable with this you can customise the framework developing your own themes, transitions and plugins using CSS and JavaScript. The API allows you to hook into events such as the initial display of the page and moving between slides. It gives you a lot of flexibility and because it is basically JavaScript/CSS/HTML it is very portable although it won’t behave nicely on older browsers.

Summing Up

If you are interesting in seeing sample presentations take a look here. I read Instant HTML5 Presentations How-to and found it a really quick way to get an overview of how I could develop and customise presentation using reveal.js. I know I could have found this out myself on the web but sometimes it is great to have everything pulled together into a tutorial so you know what is available and what you want to explore further.

As for the framework I really like how simple it is to pull a presentation together and create something which has a nice finish. I’ll definitely be using it for my next presentation.