deprecated extensions.
The new extensions and demos can be found on
a new page on deck.js
click to dismiss
2012-07-26: Created A NEW PAGE With Better Extensions
Creating Slides With deck.js and its Extensions
I recently listed the features that I considered useful. Since then, I had the opportunity to port from my system to deck.js the feature that I was missing the most: the SVG animations. This page is a small guide to deck.js that will include advanced features.
Deck.js: Introduction
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. Introductions to deck.js can be found on the web:
- Quick introduction as a 2-slide presentation.
- Introduction to writing slides as a longer presentation allowing to try themes.
- The deck.js wiki on github.
- From an early adopter, a blog post with link to examples (usage can be simplified compared to what is used there).
My deck.js with my OLD selection of extension (on the "oldmaster" branch of my github repo)
I have a github repository which follows the main repository and adds:
- some improvements the core (e.g. for enabling advanced animations)
- some extensions that I use
This can be obtained with git clone https://github.com/twitwi/deck.js.git (to get the old version described on this page, do git checkout oldmaster)
Zip Bundle to Download: you can also get the old starter packages.
Deck.js: Advanced Animations (SVG graphics, highlighting, etc.)
A feature that I missed with most html slide systems was the ability to design graphics and animate them. There is a standard for vector graphics: SVG. The good news is that you can display it in most recent browsers and thus in your deck.js presentations. Now you want to animate them. There is also a standard for animation, SMIL, however its support is still poor (this might evolve with the coming disappearance of flash).
SVG images can easily be created with a variety of software. A good choice is to use Inkscape which is an open source, awesome, cross-platform editor that manipulates SVG natively.
You can now use deck.js to animate your SVG.
DEMO: presentation illustrating SVG animations in deck.js.
The animations are actually not limited to SVG and you can use it to animate the content of your slides.
For example you can highlight some part of your text after a step.
DEMO: presentation with in-slide animations in deck.js.
Deck.js: Math Equations (Latex notation)
I integrated some javascript to make it possible to embed math equations into a presentation.
Now you can use the Latex notation to write math in your slides.
DEMO: put equations in your slides.
Deck.js: Smart Syntax (when html is too verbose)
I recycled a script that I was using in my old home made presentation framework.
It makes it easier to write slides and is fully integrated into the browser (no need for a preprocessing step).
DEMO: use a shorter syntax for slides.
Other extensions in the wild
- Syntax highlight and coding in slides: CodeMirror integration into deck.js and CoderDeck (both are extensions to add code inside slides).
- ...