Interactive presentations with impress.js + GitHub Pages

January 16, 2012

Photo credit: https://www.flickr.com/photos/spacex/44451125454/

Next month, I am giving a follow-up of my Continuous Delivery talk to the Montgomery County Java User's Group.  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, a nice framework for building presentations in HTML (running on Ruby/Sinatra).  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.  It does have a nice simple markdown for capturing content and I would consider using it in the future.

HTML5 Slides is more of a demonstration on how you can use HTML5/CSS3'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 would be the perfect location.

Prezi.com 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, 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 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 using GitHub Pages.  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:

Share this:

comments powered by Disqus