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!

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