INFO: zip bundle, ready to use, available and updated! (last update 2013-11-20 together with Deck.js 1.0)
(online since 2012-07-26)
This is all about HTML slides (or web based slideshow).
You can watch a presentation I gave at SoftShake 2013 about web presentations, deck.js and its extensions: live in HTML or frozen on slideshare.
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.
(inludedeck (my ext)
makes the glue)
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
This extensibility have made deck.js very successful at attracting contributions.
Introductions to deck.js can be found on the web:
Any feedback or remarks? Something missing? Contact me at
click-me ;-p @nospam.com
I have a github repository which follows the main repository and adds:
- the core deck.js
- some extensions that I use (the "events" + all my contributions)
This can be obtained with
git clone https://github.com/twitwi/deck.js.git
ZIP Bundle to Download: you get a
The fit extensions provides a proper re-scaling of the slides to the view-port.
This extension avoid discovering problems with low resolution projectors or unusual aspect ratios.
DEMO: presentation illustrating "fit"
The simplemath extension allows you to use the latex syntax to type math equations in your slides.
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).
DEMO: presentation illustrating "simplemath"
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).
DEMO: presentation illustrating "svg"
These extensions provide a way of doing animations within the slides (not only when we change slide).
Try the “anim” demo presentation below to see examples.
(low-level) presentation illustrating "step"
DEMO: presentation illustrating "anim"
The smartsyntax extension removes the need for knowing and writing HTML.
It is a 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.
DEMO: presentation illustrating "smartsyntax"
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.
DEMO: presentation illustrating "clone"
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.
see the zip bundle
to see how shorter a presentation is with includedeck.