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:

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

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>

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>

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>

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>

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:

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);">««
first</a>
<a href="#" onclick="Reveal.prev();">« 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 »</a>
<a href="#" onclick="Reveal.slide(5);">last »»</
a>
</nav>
</div>
…
</body>

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>

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.