Interactive presentations with impress.js + GitHub Pages

January 16, 2012

Photo credit: https://www.flickr.com/photos/spacex/44451125454/ (opens in a new tab)

Next month, I am giving a follow-up of my Continuous Delivery talk to the Montgomery County Java User's Group (opens in a new tab).  In preparing for this talk, I decided that challenge myself by using a presentation tool other than PowerPoint.  In fact, I decided to avoid any desktop variant and try some of the next generation web-based presentation tools.

I first considered Showoff (opens in a new tab), a nice framework for building presentations in HTML (running on Ruby (opens in a new tab)/Sinatra (opens in a new tab)).  This tool is hot in the developer community right now.  Since it is a running application, it depends on deploying to hosting provider like Heroku (opens in a new tab).  It does have a nice simple markdown for capturing content and I would consider using it in the future.

HTML5 Slides (opens in a new tab) is more of a demonstration on how you can use HTML5 (opens in a new tab)/CSS3 (opens in a new tab)'s features to build web-based slide shows.  I considered this option as a way to learn more about HTML5.  The pages still need to hosted somewhere, and AWS S3 (opens in a new tab) would be the perfect location.

Prezi.com (opens in a new tab) is a service for building Flash-based presentations that break the convention of slides.  With Prezi.com, you can build dynamic visual presentations where the camera moves about on a page.  Public presentations are hosted for free, but you would have to pay for private presentations.  While Prezi does did offer a unique presentation style, I didn't feel the platform (Flash-based) fit my needs.

In the end, I chose impress.js (opens in a new tab), as it seemed to be the best of all solutions.  Impress.js is essentially an HTML5 presentation framework that enables you to build Prezi.com like presentations. (thanks to Matt Makai (opens in a new tab) for pointing this tool out)  You build your presentations in html (div = slide) and using tags and css, you can manipulate size, position, scale and even animation within your slide.  It is also the newest tool on the scene and seems promising.  By building my presentation in impress.js, I will be forced to beef up my front-end skills, which have been lacking as of late.

I also discovered that impress.js presentations can easily be hosted on GitHub (opens in a new tab) using GitHub Pages (opens in a new tab).  Since my presentation is just a web page, all I have to do is push my changes to the gh-pages branch of my GitHub repository and wait for the site to be displayed.  GitHub will deploy the website using a url following this convention:

http://${username}.github.com/${repositoryname}

Github Pages works for private repositories as well, and all you need to do to enable it is create the gh-pages branch.  Having my presentation displayed directly from version control with a simple url makes the process simple to manage.  Updates to the latest version are a git add, commit, push away.

Since I am just starting down this road, I may have some further feedback on how these tools work out, but so far, the presentation is looking great!  If interested in any or all of these presentation technologies, here are some sample presentations: