# S5: An Introduction

### Eric A. Meyer

#### Complex Spiral Consulting

# What Is S5?

- It's a Simple Standards-based Slide Show System
- One XHTML document provides all of the slide show's content
- CSS handles the layout and look of the slides
- JavaScript handles the dynamic aspects of the show
- That's all there is to it!

# Operatic Origins

- Opera 4 introduced Opera Show, a projection-mode style sheet technology
- Allows a single XHTML document to be turned into a PowerPoint-like slide show
- Adding screen and print style sheets allows for multi-medium views of a single document
- Highly efficient, but highly browser centric...

# Expanding The Field

- When Opera 7.5 for OS X came out, the banner ads persisted in projection mode
- Tantek Çelik created a JavaScript-driven slide show technique that worked on multiple browsers
  - Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficult
  - Navigation was only linear; no way to jump to an arbitrary slide
  - There was also no facility to "switch off" the slide show styles short of killing all CSS
- Motive and opportunity combined to point the way...

# Where We Are Now

- S5 builds on Tantek's scripts and ideas, with input and ideas from several other people
- Each slide is enclosed in a classed `div`; IDs are dynamically assigned via JavaScript
- Navigation menu is automatically built at run time
- A "toggle slide style off/on" ability now exists
- The S5 format is compatible with Opera Show Format 1.0, making it easy to move slides between the two formats as needed

# How It Works

- Controls are...
  - Next slide: Space bar, return, right arrow, down arrow, page down, click anywhere in slide that isn't in the control area (lower right corner), click "arrow" in lower right corner, accesskey "X"
  - Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right corner, accesskey "Z"
  - Toggle the slide styles: Click on the toggle button (to the left of the arrows), press "t", accesskey "T"
- To invoke the navigation menu: mouse into the lower right corner of the slide (below the navigation arrows)

# The Advantages

- With one file, you get a slide show, a printable outline, and a screen presentation
- Files are incredibly lightweight and compress easily
- Thanks to being semantic XHTML, slideshow files are also highly accessible
- New slide themes can be created simply by writing new style sheets
- Unlike Opera Show, which has all of the above advantages, S5 works in multiple browsers

# S5 Default File Structure

# S5 Themes

(just a sampling)

# Current Limitations

- Only one author can be listed in the metadata
- Links from within a slide to another slide will probably fail
- Slide content is expected to be static and atomic; that is, there is no capability to trigger dynamic slide content by hitting the "next" command
- Fonts are not scaled based on display resolution and available pixels; manual CSS editing is required
- Opera falls back to use OperaShow; thus no extras (like the navigation menu or progress indication) are available

# Open To The Public

- S5 is released under a Creative Commons Attribution-ShareAlike 2.0 license
- Contributors to S5 must be willing to accept those terms
  - In other words: if you submit a contribution, you are agreeing to abide by and place your contributions under the CC license mentioned above
- On the other hand, anyone can freely use S5 for their own presentations, and modify S5 if they agree to honor the license

# In Summary

- With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process
- The S5 format is OSF 1.0 compatible
- S5 is a very flexible and lightweight slide show system available for anyone to use