Reveal.js

The HTML Presentation Framework

Created by Jenny Pletner / @jpletner

What is it?

  • Reveal.js is a framework for easily creating beautiful presentations using HTML
  • Features include nested slides, colored code snippets, built-in themes and transistions, speaker notes, and support for mobile gestures
  • Developed by the amazing Hakim El Hattab, from Stockholm, Sweden

Why use it?

HTML presentations add to your credibility as a software developer
  • Reveal.js presentations can be uploaded to github as a respository
  • They can be added to your online portfolio
  • Reveal.js can also be used to create interactive online resumes

How to use it?

Basic Set-up:

  1. Download reveal.js from the github repo.
  2. Edit the index.html and reveal.css files in your text editor
  3. Launch the index.html file directly in your browser.

How to use it?

Full Set-up:



Note - these two videos will guide you through the Grunt install: Grunt JS Install Video 1 | Grunt JS Install Video 2

How to use it?

Online Visual Editor:

  • Slides.com is an fully featured, online editor for those of you who prefer a user-friendly GUI.
  • Host your presentations on Slides.com if you don't want to use your own domain or a site like Heroku.
  • Sample presentations can be also found and forked from Slides.com.
  • Here's a quick demo...

Features & Functionality

Point of View

Slide Over: Press ESC to enter the slide overview.

Zoom: Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.

Fullscreen mode: Press »F« on your keyboard to show your presentation in fullscreen mode.

Pause: Press B or . on your keyboard to pause the presentation.

Pretty Code


def self.all
    results = DB.exec("SELECT * FROM tasks;")
    tasks = []
    results.each do |result|
      name = result['name']
      list_id = result['list_id'].to_i
      tasks << Task.new(name, list_id)
    end
    tasks
end
					

Code syntax highlighting courtesy of highlight.js.



    def method_name do
        enter code here
    end

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Nested Slide #1
Nested Slide #2
Nested Slide #3
Down arrow

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.


Up arrow

Touch & Orientation Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. Even use pinch and slide to zoom in & out.

Fragments

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment 1

Fragment 2

Fragment 3

Fragment Styles

grow

grow

shrink

grow

fade-out

grow

now you see it

grow

highlight-red

grow

Transition Styles

You can select from different transitions, like:
None - Fade - Slide - Convex - Concave - Zoom

transition: 'default', // none/fade/slide/convex/concave/zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

<section data-background="#dddddd">
Down arrow

Image Backgrounds

<section data-background="goatsinatree.png">

Tiled Backgrounds

<section data-background="tiledimage.png" data-background-repeat="repeat" data-background-size="100px">

Video Backgrounds

<section data-background-video="video.mp4,video.webm">

... and GIFs!

Background Transitions

You can override background transitions per-slide.

<section data-background-transition="zoom">

Themes

reveal.js comes with a few themes built in:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized - Jenny(custom)

Marvelous List

  • No order here
  • Or here
  • Or here
  • Or here
  • List item #1
  • List item #2
  • List item #3

Fantastic Ordered List

  1. One is smaller than...
  2. Two is smaller than...
  3. Three!
  1. List item #1
  2. List item #2
  3. List item #3

Tabular Tables

Item Value Quantity
Apples $1 7
Lemonade $2 18
Bread $3 2
Row 1 Row 2 Row 3

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from”

Inline quote goes here

Clever Quotes

and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
Block quote goes here

Speaker View

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Configuration

The last step to make the presentation work is by adding the following configuration:



					

Full list of configuration options available at: github.com/hakimel/reveal.js#configuration

Much more

Sample Presentations

Sample 1

Sample 2

Sample 3

Sample 4

THE END

- Try the online editor
- Source code & documentation

Questions?