Recently I needed to create a presentation slide deck for a training class.
I’m not a big fan of any commercial programs, so I looked around for a free HTML-based slideshow authoring system and came across S5, which is public domain, cross-platform, and cross-brower compatible.
The S5 concept was copied from the proprietary Opera Show feature.
It’s very cool that Eric Meyer and collaborators were able to create S5 just using HTML, CSS and a little JavaScript. The intro sample can be seen here.
In this case the first time was the charm, since S5 did everything I wanted, looks professional, yet was very simple to edit just using vi.
After editing various metadata in the main file, just keep adding slides with the following tags:
<div class="slide"> <h1>slide title</h1> <ul> <li>bullet point 1</li> <li>bullet point 2</li> </ul> </div>
The only disadvantages or nits that I noticed or could find with S5 were:
- test your slide theme and resolution on projector in case of problems after resizing, also disable the screensaver on your netbook
- initial slide doesn’t indicate how to navigate, so I added some instructions.
- it’s not a 1 file solution, so have to keep track of several helper files
- the browser “Back button” doesn’t go back to the previous slide, so use the S5 built-in navigation features
- conflict with older versions of AdBlock extension for Firefox.
The navigation instructions that I added to the initial slide are, “(S5 Slide navigation instructions: use arrow, Home, PgUp, PgDn, End, space keys, and left-mouse click, or mouse-over bottom-right of slides.)”
Opera shows off: Create Professional Presentations in Minutes with the New Opera Show Generator
miscoded: Opera given cold shoulder by CSS guru


