S5: XHTML/CSS/JS-powered slide show!

by Kyle Rankin

Related link: http://www.meyerweb.com/eric/tools/s5/

It's amazing how things change over the years. If you would have asked me a few years ago, I would have never thought that I would be giving presentations in front of people from time to time. Now I don't give a ton of talks throughout a year, but when I do give a talk, usually one of the first things I get asked is "is this available on the web?"

I generally use OpenOffice Impress when creating presentations, so usually making a talk available on the web was just a matter of my uploading the .sxi file and passing around the URL. I'm sure this works fine for some people, but I also imagine others would rather not have to fire up OpenOffice to look up something quickly in a presentation.

A few days ago a friend of mine, Jorge, showed me this nifty slide show tool powered by CSS that Eric Meyer was working on. There are a number of different HTML slide show generators out there, and I'm sure they all work great, but when trying out S5 a few of the features so impressed me that I immediately started converting all of my .sxi files.

First, S5 uses javascript so that all the standard ways you might navigate through a slide show such as hitting the right or left arrows, hitting the spacebar or enter, or clicking the mouse all work as expected. In the middle of a presentation hitting a key or clicking the mouse is definitely a lot less awkward than moving the mouse over to some arrow icon you have on your presentation and clicking.

Second, all the content is in a single XHTML file. The layout for the content is really simple as well. div tags separate slides from each other, and inside the slides you use standard HTML elements to establisher headers, bulleted lists, etc. This means that the resulting file is very small and compresses even smaller, and changing the order of slides is as simple as moving a div around.

Third, because of its use of CSS, your presentation is separated from its actual look. All of the appearance settings are in a few CSS files that you can edit to your liking and then apply to any presentations you might be giving. I've already set up a few tweaks for talks on some different subjects.

Finally there are a lot of nice little touches that sold me. First you can click a link on the presentation and see the full presentation in outline form--great for printing out for your own reference during a talk. Also if you hover over the bottom right corner of a page, a drop-down menu appears that lets you move to any other slide in your talk--all labeled by slide title.

Like I said, I've already converted a number of my talks to this format, and for the most part it was rather easy--I just copied and pasted the text in, and added formatting with tags where necessary. I'm no CSS guru myself, but I didn't have too hard of a time tweaking the CSS files to match the look I was going for. You can see a sample of a talk I gave on Knoppix at my local LUG here.

All in all I'm pretty pleased with S5 and I've only messed with it for a few days. If you haven't quite settled in to a favorite slideshow tool yet, I recommend giving it a try.

What presentation tools do you use? Is it easy to go from presentation to the web?


2004-10-08 08:49:43
Great Job on the CSS and JavaScript
This solution seems obvious now that I've looked at it. Still, the obvious solution didn't occur to me. Great job.
2004-11-07 03:36:29
extending with Cocoon and OpenOffice
I've tried the solution of Meyer and was seduced.
I've made a small cocoon app that is able to publish a presentation of this kind while having the slides separated in different xml files (/*)
Since I work with a lot of presentation sharing some subjcts this is a necessity for me.
My problem is now to find a solution to easily creates and edit the slides.
I believe OpenOffice would be great.
Any idea?
2005-03-22 12:01:35
Updated LUG Presentation Link