S5: An Introduction
Author: Eric A. Meyer

# S5 Testbed

### 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! (skip to summary; demonstrates links internal to the slide show)

# Operatic Origins

- Opera 4 introduced Opera Show, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)
- 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...

# Incremental Display

- Keep hitting/clicking "next" as long as it isn't the control link (»)
- Bullet points are revealed one by one
  - All based on class name of `inc`
  - Lists can be classed to make items appear individually
  - Individual items can be classed as well to create "animations"; see Derek Featherstone's example
- Let's try it again, but without the first bullet point being pre-highlighted...

# Incremental Display II

- Keep hitting/clicking "next" as long as it isn't the control link (»)
- Bullet points are revealed one by one
  - All based on class name of `incremental`
  - Lists can be classed to make items appear individually
  - Individual items can be classed as well to create "animations"; see Derek Featherstone's example
- Notice how the sub-list was part of the parent bullet point; that was done on purpose
- Now to move on to other test slides!

# PNG Alpha Tests

DIV with PNG background followed by foreground PNG

DIV with PNG background followed by foreground PNG

# S5 Default File Structure

# S5 Themes

(one way of presenting multiple graphics)

# Incremental S5 Themes

(one by one!)

# Incremental Animation

- A demonstration of just one of the many ways to accomplish simple animation-like effects (using a diagram from "XFN and...")

# 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