Generating Slides from a Spreadsheet

Lately, I've been playing around with the HTML5 slides deck from slides.html5rocks.com. A few months ago at the GTUG campout, I hacked together an App Engine app for generating HTML5 slide decks. Last week, in preparation for my GDD Tokyo talk on Google's JavaScript APIs, I wrote a client-side mashup that generates an HTML5 slide deck based on data in a published Google spreadsheet, and used it both as my actual slides and as a demo for the talk.

There are some definite benefits to writing your slide content in a spreadsheet:

• You can look at the revision history of just your content (instead of a confusing mix of code and content)
• You can share the spreadsheet with other people, and collaborate on the content with them.
• You can print the content for easy studying.
• You can create alternate views of the same content, like differently themed slide viewers or slide viewers that show additional columns of information.

Of course, there are disadvantages as well - primarily the fact that Google Spreadsheets wasn't designed as a content management system, and it isn't terribly easy to author multi-line content in the cells.

In case any of you do want to try using a spreadsheet to build your slides, I've made a generalized version of the viewer that will work with any public spreadsheet.

To get started, create a spreadsheet with three columns, 'type', 'title', and 'content'. The type can either be 'intro', 'normal', or 'section', and the title and content can be any text (inc. HTML tags). For example, check out this sample spreadsheet.

Next, publish that spreadsheet using the "Share -> Publish" menu in Google Spreadsheets, grab the key from the URL in the browser, and pass that as the key parameter to the generic slides viewer. For example, here's the URL for the sample spreadsheet:
http://imagine-it.org/sslides/slideshow.html?key=tp1JIiBR7gyKgOKUMDk4d_g

As a bonus feature, you can also include a 'narration' column in your spreadsheet, and display that narration below the slides by passing 'narration=on' to the viewer. For example, here's the Japan talk with narration on:
http://imagine-it.org/sslides/slideshow.html?key=0Ah0xU81penP1dDZWcmxjUjdhOTMyOGxxWXAxMnpKUWc&narration=on

As usual, I will keep experimenting with HTML-based slide viewers until I find the holy grail, so stay tuned! :)