HTML5 Slide Deck
Benjamin Erb
July 2011
Feature Demonstration
HTML5 + CSS3 + some JS
Benjamin Erb
Feature Demonstration
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
- 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
By the way…
Power corrupts and PowerPoint corrupts absolutely.
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
- class="uulm-color"
- class="in-color"
- class="mawi-color"
- class="nawi-color"
- class="med-color"
- class="accent-color"
- bold and italic
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