HTML5 Slide Decks

Benjamin Erb
2012-01-21

Brief Overview
BarCamp Munich 2012

Image cc-by dexxus

Background

Benjamin Erb
Student @ Ulm University
Computer Science and Media

Interests: web technologies, scalable architectures, distributed systems and mobile/ubiquitous computing

Contact:
www: benjamin-erb.de / ioexception.de
twitter: @b_erb
g+: b.erb.io/+

Introduction

Presentation Tools

Powerpoint

Keynote, Impress etc.

LaTeX Beamer

\begin{frame}

Prezi

Look, it's moving!

Google Docs

HTML-based Decks

Overview – HTML5 Slide Decks

HTML5 Slide Decks

An incomplete(!) list of examples…


HTML5 Slide Decks – Pros/Cons

HTML5 Slide Decks

Pros/Cons

HTML5 Slide Decks – Pros

  • hypermedia-based
  • editable, it's plain HTML!
  • accessible
  • web content can be embedded
  • indexable
  • hackable! (esp. JavaScript)

HTML5 Slide Decks – Cons

  • compatibility (esp. older browsers)
  • limited "authoring" tool chain
  • printable versions (difficult)
  • standalone single-file versions (difficult)
html5slides + Own Extensions

html5slides

+ My Own Extensions

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 the 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

  • Run the current presentation on the beamer (fullscreen)
  • Hit p to open a secondary frame and wait until fully loaded
  • Move frame onto the presenter's screen (i.e. laptop screen)
  • Switch focus back to beamer screen
  • Control presentation using the frame on the beamer screen

Features:

  • Presenter frame show presenter notes overlay
  • Presenter frame has transitions disabled
  • Presenter frame always shows full slide (nothing is unhiding)
  • Hit . or , to sneak forward/backward only on the presenter screen
  • Auto-syncs with primary presentation frame movements

Death by Bullet Point

  • Bullshit – We can do it, too!
  • Unique selling proposition
  • Return on investment
  • Yada yada yada
  • Never use more than 5 bullets on a single slide!

Death by Bullet Point – Creeping death version

  • Bullshit – We can do it, too!
  • Unique selling proposition
  • Return on investment
  • Yada yada yada
  • Never use more than 5 bullets on a single slide!

How it works:

<ul class='build'>	

<div class='build'>

Death by Bullet Point – Shotgun version (small font)

  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada
  • Yada yada yada

Styles

  • class="uulm-color"
  • class="in-color"
  • class="mawi-color"
  • class="nawi-color"
  • class="med-color"
  • class="accent-color"
  • bold and italic

Table of contents

You can include a TOC by including
<nav class='toc'>
to a slide.

This will populate a list with all named sections. Sections are associated with a title by adding <header>title</header> to <section>.

When used inside a section, the current section will be highlightend:

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

Images, Videos & Websites

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

Video example: .ogv file + HTML5 video tag

Source: http://www.808.dk/

Video example: Vimeo via iframe

A slide with an embed + title

I'm on an iframe (fullscreen)!

Credits

Thanks to Luke Mahé and Marcin Wichary for the original Google html5slides template.

Thank you!

Questions?