HTML5 Slide Deck

Benjamin Erb
July 2011

Feature Demonstration
HTML5 + CSS3 + some JS

The nitty-gritty, this is a slide:

      <article>
        <h3>
          Slide captions are <h3> headings
        </h3>
        <p>
	  Each slide is represented by an HTML5 <article>. 
          Content is regular HTML, such as this <p> paragraph
        </p>
        <p>
          Lorem ipsum dolor sit amet.
        </p>
      </article>

You can see on next slide what it looks like.

Slide captions are <h3> headings

Each slide is represented by an HTML5 <article>. Content is regular HTML, such as this <p> paragraph

Lorem ipsum dolor sit amet.

You can use a smaller font, too

<article class='smaller'>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Try to prevent such slides! Your audience will hate you (with a good reason).

Presenter notes

Presenter notes are semi-transparent overlays that can be toggled. They will not be shown in the regular slide deck by default.

      <article>
	...
        <aside>
          This is a presenter note!
        </aside>
      </article>

Push n to toggle presenter notes

Toggle transitions

Don't like fancy stuff?

Push t to toggle transition mode!

Presenter Mode – CAUTION: EXPERIMENTAL

Features:

Death by Bullet Point

Death by Bullet Point – Creeping death version

How it works:

<ul class='build'>	
<div class='build'>	

Death by Bullet Point – Shotgun version (small font)

By the way…

Power corrupts and PowerPoint corrupts absolutely.
Vint Cerf

Cheat Sheet – Shortcuts

Key Function
enter/space/right arrow advance
backspace/left arrow go back
g prompt: go to slide
home/pos1 jump to start slide
end jump to end slide
shift +/- zoom in/out
F11 fullscreen mode
n show/hide presenter notes
t toggle transitions

Cheat Sheet – Shortcuts (incl. presenter mode)

Key Function
enter/space/right arrow advance
backspace/left arrow go back
g prompt: go to slide
home/pos1 jump to start slide
end jump to end slide
shift +/- zoom in/out
F11 fullscreen mode
n show/hide presenter notes
t toggle transitions
p open presenter frame
. sneak forward in presenter frame
, sneak backward in presenter frame

Styles

Slide with an image

Source: Benjamin Erb

Slide with an image (centered)

Source: Benjamin Erb

Image filling the slide (with optional header)

Source: Benjamin Erb

A slide with an embed + title

I'm on a iframe (fullscreen)!

That's all for now!