HTML5-based slide deck systems

Submitted by jeff on Thu, 09/22/2011 - 13:14

I've gotten some questions about the slide deck system I have been using lately ( well, mostly from Myk ) so I though I would do a short post on what I have been using and also point out some alternatives.

A while ago I decided to look into pure html slides after seeing some keynotes from Google:IO where they demo'd HTML5 features in their slide deck. I thought this was splendid! It turns out Google's 'HTML5Slides' code is open source and hosted on Google Code. I much prefer github, so I brushed off my rusty svn -> git skills and forked their code into Github. I've since de-branded it and made a few css tweaks. The code is a bit hacky but has some nice features:

  • single file per presentation with simple, semantic markup
  • source code highlighting thanks to Google's prettyprint library, of which I am a huge fan.
  • decent default styling
  • simple navigation and animations, including a build mode for progressive bullet points.
  • works great in Chrome or Firefox, including Firefox on Android!
  • assuming the wifi works, everyone in the room can follow along on their laptop, phone or tablet.

I'm pretty comfortable with it and especially appreciate the nice clean styling it gives me by default. I did recently come across this great post by Luigi Montanez called 'Web-Based Slide Decks Done Right'. After reading through this post, I did a bunch of grepping to see what other projects were out there:

  1. Mozillian Paul Rouget's dzslides. While I think I'm going to stick with HTML5Slides for now, I'm interested in digging into DZSlides and possibly porting my favourite bits from HTML5Slides over.
  2. My colleague Christian Heilmann has created an impressive HTML5-based slide deck system on his github account.
  3. Mozillian Atul Varma has also created slide decks using html5pad such as this one.
  4. Google's HTML5 Rocks slides, which I suspect share a common ancestry with html5slides but are perhaps more sophisticated. Very impressive!

If you are giving a talk about Mozilla, try using one ( or more! ) of these technologies out and see if it works for you. If it does, make sure the people in your talk are aware that your presentation was created using open web technologies!

0 comments

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Drupal theme by Kiwi Themes.