HTML5 Presentations - creating our initial presentation

Exclusive offer: get 50% off this eBook here
Instant HTML5 Presentations How-to [Instant]

Instant HTML5 Presentations How-to [Instant] — Save 50%

Create beautiful and functional presentations using the reveal.js library, HTML5, and CSS3 with this book and ebook

$12.99    $6.50
by Davi Ferreira | May 2013 | Open Source Web Development

In this article by Davi Ferreira the author of Instant HTML5 Presentations How-to, we will cover the following recipes:

  • Creating our initial presentation

  • Using reveal.js JavaScript API

(For more resources related to this topic, see here.)

Creating our initial presentation

This recipe will teach you how to create a basic HTML5 presentation using reveal.js. We will cover the initial markup and setup. The presentation created here will be used throughout the rest of the book.

Getting ready

Before we start, we need to download the reveal.js script and assets. To do that, simply visit https://github.com/hakimel/reveal.js/downloads and get the latest version of reveal.

Now open your favorite text editor and let's work on the presentation markup.

How to do it...

To create our initial presentation perform the following steps:

  1. The first step is to create an HTML file and save it as index.html. Then copy the reveal.js files to the same directory of our HTML file, keeping the following structure (highlighted files are the ones we are using in this recipe):

    index.html
    -css
    ---reveal.min.css
    ---print
    ---shaders
    ---theme
    -----default.css
    -----source
    -----template
    -js
    ---reveal.min.js
    -lib
    ---css
    ---font
    ---js
    -----head.min.js
    -plugin
    ---highlight
    ---markdown
    ---notes
    ---notes-server
    ---postmessage
    ---remotes
    ---zoom-js

  2. Now we need to write our initial HTML5 markup, as follows:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Presentations How-To</title>
    </head>
    <body>
    <div class="reveal">
    <div class="slides">
    </div>
    </div>
    </body>
    </html>

  3. With our initial markup ready we include the reveal.js base stylesheet and script file plus the default theme stylesheet. We will also need to include the HeadJS JavaScript loader in order to manage reveal.js plugins.

    The stylesheets will go directly below the title tag, while the script files must be included before the closing body tag:

    <head>
    <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">
    </head>
    <body>
    ...
    <script src = "lib/js/head.min.js"></script>
    <script src = "js/reveal.min.js"></script>
    </body>

  4. The fourth step is to create the elements for our slides. Our first presentation will have four slides, so we must add four section elements to our slides div, as follows:

    <div class="reveal">
    <div class="slides">
    <section>
    <h1>HTML5 Presentations</h1>
    <h3>How to create presentations for web browsers</h3>
    </section>
    <section>
    <h1>About this presentation</h1>
    <p>This is the example presentation for the book HTML5
    Presentations How-To</p>
    </section>
    <section>
    <h1>reveal.js</h1>
    <ul>
    <li>created by Hakim El Hattab</li>
    <li>open source</li>
    </ul>
    </section>
    <section>
    <h1>References</h1>
    <ol>
    <li><a href = "http://hakim.se/">http://hakim.se/</a></li>
    <li><a href = "https://github.com/hakimel/reveal.
    js">https://github.com/hakimel/reveal.js</a></li>
    </ol>
    </section>
    </div>
    </div>

  5. After that, we initialize the reveal.js JavaScript object, right after the reveal.js script tag, as follows:

    <body>
    ...
    <script src = "js/reveal.min.js"></script>
    <script>
    Reveal.initialize({
    controls: true,
    keyboard: true,
    center: true,
    transition: 'default'
    });
    </script>
    </body>

  6. For the last step, open index.html using the browser of your choice and check out how our initial HTML5 presentation looks, as shown in the following screenshot:

How it works...

reveal.js is a powerful JavaScript library that allows us to create presentations using a web browser. It was created by Hakim El Hattab, a web developer known for his experiments with CSS3 transitions and JavaScript animations.

By performing the preceding steps we created a regular HTML5 presentation. We have used reveal.js default themes and some minor configurations just to get started.

We started with a basic HTML5 structure. It is important to bear in mind that our presentation is, before anything else, an HTML and it should be rendered normally in the browser.

The presentation must follow a structure expected by the reveal.js script. First, our HTML must have one div with reveal as a class attribute. That div must contain another div with slides as a class attribute.

The slides div must contain one or more section elements, each one representing a slide. As we will see in the Creating vertical/nested slides (Simple) recipe, it is possible to nest slides, creating a vertical navigation.

Each slide can contain any HTML or markdown content. We started with just a few elements but we will enrich our presentation through each recipe.

reveal.js comes with multiple themes, available under the css/theme directory. For our initial presentation, we are using the default.css theme. Other options would be beige, night, serif, simple, and sky. Theming will be covered in the Theming (Medium) recipe.

With all the markup and styles set, we initialized the reveal.js JavaScript object by using the initialize method. We used only four options, as follows:

Reveal.initialize({
controls: true,
keyboard: true,
center: true,
transition: 'default'
});

First we enabled the navigation controls at the user interface, setting the controls option to true. We activated keyboard navigation using the arrow keys and also centered the slides' content. The last option sets the transition between slides to default. The next recipe will cover the full list of available options.

There's more...

reveal.js will work on any browser, but modern browsers are preferred due to animations and 3D effects. We will also need to use external plugins in order to extend our presentation features.

Dependencies

As previously mentioned, reveal.js uses the HeadJS library to manage plugins and dependencies. You can use only reveal.js if you want, but some useful resources (such as speaker notes and zoom) are only enabled using plugins.

The plugins can be loaded through the initialize method and we will see more about them in the Plugins and extensions (Medium) recipe.

Overview and blackout modes

While on our presentation, pressing the Esc key will switch to overview mode where you can interact with every slide.

Another useful resource is the blackout mode. If you want to pause and draw attention from your audience, you can press the B key to alternate between normal and blackout modes, and hide your current slide data.

Browser support

reveal.js will work better on browsers with full support for CSS 3D animations (Chrome, Safari, Firefox, and Internet Explorer 10), but fallbacks (such as 2D transitions) are available for older browsers.

Presentations will not work on Internet Explorer 7 or lower.

In this recipe we have created our initial HTML5 presentation using reveal.js default options and theme.

Using reveal.js JavaScript API

reveal.js provides an extended API to control our presentation behavior. With reveal.js API methods we can move to previous and next slides, get the current index, toggle overview mode, and more.

How to do it…

To use reveal.js JavaScript API perform the following steps:

  1. Using reveal.js API we will create a navigation bar that will be positioned at the bottom of our presentation screen, containing links to our main slides plus links to the first, next, previous, and last slides.

    We will start by adding some HTML5 markup, including reveal.js API method calls inside the onclick attribute of our navigation elements:

    <body>
    <div id="navigation-bar">
    <nav>
    <a href="#" onclick="Reveal.slide(0);">&laquo;&laquo;
    first</a>
    <a href="#" onclick="Reveal.prev();">&laquo; previous</a>
    <a href="#" onclick="Reveal.slide(0);">html5 presentations</
    a>
    <a href="#" onclick="Reveal.slide(1);">about this
    presentation</a>
    <a href="#" onclick="Reveal.slide(2);">reveal.js</a>
    <a href="#" onclick="Reveal.slide(3);">references</a>
    <a href="#" onclick="Reveal.slide(4);">about the author</a>
    <a href="#" onclick="Reveal.slide(5);">why use reveal.js</a>
    <a href="#" onclick="Reveal.next();">next &raquo;</a>
    <a href="#" onclick="Reveal.slide(5);">last &raquo;&raquo;</
    a>
    </nav>
    </div>

    </body>

  2. Our navigation bar will need a CSS of its own. Let's add some new style rules to our style tag:

    <style>

    #navigation-bar {
    position: fixed;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 50px;
    z-index: 20;
    background-color: #fff;
    border-top: 6px solid #df0d32;
    font-family: Helvetica, Arial, sans-serif;
    }
    #navigation-bar nav {
    padding: 15px 0;
    text-align: center;
    }
    #navigation-bar a {
    display: inline-block;
    padding: 0 10px;
    border-right: 2px solid #ccc;
    text-decoration: none;
    color: #df0d32;
    }
    #navigation-bar a:last-child {
    border-right: none;
    }
    #navigation-bar a:hover {
    text-decoration: underline;
    }
    </style>

  3. If you reload the presentation now, you will see our brand new navigation bar at the bottom, and if you click on the links, you will be taken directly to the referenced slides or actions (first, next, previous, last).

How it works...

reveal.js JavaScript API allows us to control our presentation behavior using JavaScript code. In the preceding example we have used almost all methods available. Let's take a closer look at them:

Option

Description

Reveal.slide(indexh, indexv,

indexf)

Slides to the specified index (the indexh

parameter). The first slide will have 0 as index, the

second has 1, and so on. You can also specify the

vertical index (the indexv parameter) in case of

nested slides and the fragment index (the indexf

parameter) inside the slide.

Reveal.left()

Goes to the previous slide in the horizontal line of

the presentation.

Reveal.right()

Goes to the next slide in the horizontal line of the

presentation.

Reveal.up()

Changes to the following nested slide.

Reveal.down()

Returns to the previous nested slide.

Reveal.prev()

Goes to the previous slide, horizontal or vertical.

Reveal.next()

Goes to the next slide, horizontal or vertical.

Reveal.prevFragment()

Switches to the previous fragment inside the

current slide.

Reveal.nextFragment()

Switches to the next fragment inside the current

slide.

Reveal.toggleOverview()

Toggles overview mode.

Reveal.getPreviousSlide()

Returns the DOM element of the previous slide.

Reveal.getCurrentSlide()

Returns the DOM element of the next slide.

Reveal.getIndices()

Returns an object with the current indices, for

example {h: 2, v: 1}.

The preceding methods are available to use in any JavaScript code after the reveal.js object has been initialized. You can either use it directly on elements' attributes (such as onclick) or call it directly from JavaScript functions and listeners.

Summary

In this article, the Creating our initial presentation recipe explained how we can create a basic HTML5 presentation and the Using reveal.js JavaScript API recipe explored Reveal.js JavaScript API by creating a custom navigation bar.

Resources for Article :


Further resources on this subject:


Instant HTML5 Presentations How-to [Instant] Create beautiful and functional presentations using the reveal.js library, HTML5, and CSS3 with this book and ebook
Published: February 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Davi Ferreira

Davi Ferreira is a passionate web developer with 15 years of experience. He has worked with HTML, CSS, and JavaScript since the very beginning of those technologies.

He is currently working as a senior software developer at globo.com, the Internet branch of Brazil’s biggest media conglomerate Globo, home of shows like Big Brother and The Voice.

Davi is also a resident writer at Tableless.com.br, one of the most important websites about front-end development in Brazil. He writes mostly about JavaScript and HTML5.

Books From Packt


Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development

HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook

Instant HTML5 Geolocation How-to [Instant]
Instant HTML5 Geolocation How-to [Instant]

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

HTML5 Enterprise Application Development
HTML5 Enterprise Application Development

HTML5 Graphing and Data Visualization Cookbook
HTML5 Graphing and Data Visualization Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software