Reveal.js - The best presentations!
What is Reveal.js?
Reveal.js is a framework for creating HTML presentations, it's super nice!
How do I use it?
Reveal is really easy to use if you have any JavaScript experience, and even if you don't you can just use a GUI editor like Slides. What makes Reveal so good is that it's all web-based (duhhh, JavaScript!) and reactive to different media devices. You can use your phone, tablet, desktop or whatever to view a Reveal presentation.
Setting up Reveal
If you want to host your presentation locally, you will need to install both Node.js and Grunt.
Once you have these prerequisites installed, you need to clone the Reveal.js repo from GitHub!
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serve
After completing these steps you you go to the link http://localhost:8000/ to view your presentations!
Creating a presentation
All presentations end up as a single HTML file, so neat! The first thing that you want to do is load any fonts you want to use, and load reset.css to make sure your styling is consistent across browsers.
A basic start to a Reveal presentation could be like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating your first Reveal.js presentation!</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
Next we want to actually add some content. A slide in Reveal is just a section, so in the body tag we wrap in the reveal div. Navigation controls are wrapped in the aside tag, and you can use the progress div wrapper to add a progress indicator to your slides.
<div class="reveal">
<div class="slides">
<section>
<h1>Slide 1 - Title</h1>
<p>Let's make some bullet points!</p>
<ul>
<li class="fragment">Some info</li>
<li class="fragment">Some more info</li>
<li class="fragment">Some extra info</li>
</ul>
</section>
</div>
<aside class="controls">
<a class="left" href="#">◄</a>
<a class=”right” href=”#”>►</a>
<a class=”up” href=”#”>▲</a>
<a class=”down” href=”#”>▼</a>
</aside>
<div class="progress">
</div>
</div>
One of the best features of Reveal is that you can nest slides/sections. Doing this let's you better organise your presentation and properly form logical groups for your slides.
You can fragment your items on a slide by adding the tag li class="fragment" to the item, this will load your fragments one at a time like any other presentation.
I also find it helpful to add some visual cues for the controls, this helps people with their own copy of your presentation follow along without getting lost in this fancy tech! In the above example for my controls I linked UTF arrows to act as controls, the class decides what the control does and then I apply a UTF glyph to make it obvious what each of them to for the user.
Loading Reveal.js
The Reveal library is loaded after all the presentation content, alongside any other libraries you use in your presentation eg. zoom.js or highlight.js.
Reveal.initialize( {
controls:true,
progress: true,
history: true,
mouseWheel: true,
theme: query.theme || 'default'
});
The above code sets some default behaviour, such as having controls and progress visible at all times. Adding browser history for each slide, so that when you hit backspace by accident you don't jump out the presentation!
Cool things that Reveal does for you
Reveal does lots of nifty things, and all the things we've come to expect from presentations. It can do transitions, you can use themes instead of setting your styling every time you make another presentation. Thanks to some lightweight libraries you can even highlight code, zoom in on slides and all the rest!
I've really enjoyed starting to use Reveal and I'm hoping it keeps getting bigger, hopefully gone will be the days of using PowerPoint or, god forbid, OpenOffice's Impress. Never again will you have to suffer that yawning lurch as your work laptop struggles to open up one of these programs, you can just jump straight into it.. in-browser!
That's all for today anyway, I'll be back soon with another Japan post. Catch you guys soon!