Getting started with deck.js:
clone extension
use right arrow to move on

“clone”: What?

Duplicates your window
Forwards events to all clones
Replicates the mouse pointer
What for?
- put a second view on a second screen
- see the current and the next slide
- monitor time (timekeeper extension)
- view notes (ext)

“clone”: let's get cloned

With firefox and "file://..." URLs (local files), the popup might be blocked, refusing to be shown. To fix that:

on the bar that pops up, click on Preferences>Edit Pop-Up Blocker Preferences…
type “<file>” (without the quotes, with the brackets)
click allow
click close
close the poped-up bar and hit 'c' again

Clone your view!
- NB: the browser will probably open a new tab
- clone your view by typing 'c'
  (in local, show how to tell firefox to not block the popup)
- detach your tab (drag it out of the browser)
- go to the main view and hit the right arrow

“clone”: Propagation

Slide events are propagated to clone(s)
- from master to clone(s), and vice versa
- try left/right arrows
- try up arrow (with the “step” extension)
Mouse pointer is replicated
- try to move your mouse (on the master)
- try also to click
- default pointer: red circles
- possible custom style using HTML+CSS

“clone”: Styling

Presenter view styling
- adds the “has-clones” class when cloned
- by default: shows the presenter view
- in this deck: gray background

“timekeeper”: features

timekeeper: enriches the presenter view
- current time
- presentation timer
- time elapsed since last bang!
- logs of events (click the timer)
Reseting timers
- Mark an instant, Bang!: ESCAPE
- Reset main timer: SHIFT+ESCAPE
- NB: presentations from a “site” share the timer

Browser support

Clone: should be ok
Timekeeper
- Uses localStorage
- Might have “security” restrictions with local files (solution, see the comments too)

Digging Deeper

If you want to learn more, you can:

View this page source (Ctrl+U?)
See other demos
- “fit”: autoscaling slides
- “simplemath”: easy equations
- “step”: (low-level) by-slide vs by-animation navigation
- “anim”: animations!
- “svg”: SVG image inclusion and animation
- “smartsyntax”: easy, concise syntax for slides
- “metadata”: use HTML metadata in your slides
- “progress”: show fancy progress indicators
- “various”: other stuffs
see my page on deck.js and/or contact me

/