Creating Slides With deck.js and its Extensions

This is all about HTML slides (or web based slideshow).
This page shows how to use deck.js with my consolidated contributions implementing the features that I was missing the most: the SVG animations, fitting (proper scaling), math equations, non-verbose syntax, etc.

you can watch an old presentation I gave at SoftShake 2013: frozen on slideshare or live in HTML (long to load and uses an old-ish customized deck.js, most features have now been included in some extensions).

Deck.js: Introduction (skip if you know)

Deck.js is an open source system for writing slides/presentations/“powerpoints” that are played in a browser.
From the beginning, deck.js has been designed to be extensible: the core is minimal and extensions are expected to provide
additional feature.
This extensibility have made deck.js very successful at attracting contributions.
Introductions to deck.js can be found on the web:

Deck.js: simplemath extension

The simplemath extension allows you to use the latex syntax to type math equations in your slides.
This extension uses a lightweight javascript to convert latex expressions to mathml.
Your browser needs to support mathml or have a plugin enabling it.
The MathJax library could also be used for a similar purpose (MathJax is more powerful but heavier).

Deck.js: svg extensions

The svg extension helps in including external SVG files in your presentations.
For example, if you produce SVG files using inkscape or gnuplot, this extension helps you including them in your presentation.
An SVG file can be included in many ways in an HTML page (e.g., using an img tag).
However, the svg extension takes care of including the SVG files in such a way that they can be both styled using CSS and
animated (by the anim extension).

Deck.js: smartsyntax extension

The smartsyntax extension removes the need for knowing and writing HTML.
It is a markdown-like, wiki-like syntax that allows you write slides in a more concise way.
No compilation is needed, the interpretation is done every time the page is loaded.

The smartsyntax goes beyond markdown that is too limited for efficient presentation (adding classes to elements, making sections,
etc).
If you have troubles with it, don't hesitate to contact me at click-me ;-p @nospam.com.

Deck.js: clone/timekeeper extensions

The clone extension allows you to create a second window containing your presentation.
This way, you can have a projected screen and a presenter view on your laptop.
When you change slide on the presenter view, the projected screen automatically follows (and vice-versa).
The default style of the presenter view shows the current and the next slide.

The timekeeper extension adds a timer on the presenter view and also records the time of each slide change.
It can be very useful for rehearsals or debriefing.
Timers can be reset using the Escape key (with shift to reset the presentation timer).

Deck.js: metadata extension

The metadata extension makes it possible to use the title of the HTML page and its metadata in your presentations.
HTML metadata also act as “variables”: your presentation file is cleaner and contains less repetitions (e.g., your name, the
date, etc).

Deck.js: progress extension

The progress extension is an replacement for the default “status” extension (that shows the slide counter).
Progress improves in 3 directions: it is easier to make a simple status that adapts in position and size, it provides very
big flexibility for customized progress (progress bars etc), and it adds the concept of “fake end” (when you have 46 slides
and want the total counter to show 42 instead).

Deck.js: includedeck extension

The includedeck extension is special in the sense that its sole use is to replace much of the boilerplate code in your HTML
file by a much shorter call to includedeck.
With includedeck, your files are more readable and you are less likely to make a mistake when including extensions.

DEMO: see the zip bundle to see how shorter a presentation is with includedeck.

bang! Logs the current time and reset the greyed-out counter (in presenter view)

SHIFT+ESC

timekeeper

Reset the presentation timer (in presenter view)

Other

S

fit

toggle auto fit

B

blank

blanks the view (requires “blank” extension)

P

annotate

start annotating a slide (requires “annotate” extension)

Starting using deck.js and the extensions

Option 1: start from github

All the material presented on this page is on my github repo.
This github repository contains an up-to-date version of the core deck.js together with the extensions that I use (the "events"
+ all my contributions).