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)

What is S5 on JSPWiki ?

• Put a whole presentation into a single wiki page
• Use light-weight wiki markup for editing
• Use CSS stylesheets for adjusting layout and looks
  • you can use wiki attachments as background images
• Easily switch between normal wiki view and slide-show mode
  • Use keyboard or mouse clicks to work through your slides

S5 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

And now it is running on JSPWiki

• The JSPWiki S5 Plugin is based on the same concepts as S5 , by Eric A. Meyer.
  • Read basic primer or reference manual to get a grip of this cool concept !
  • However, the approach is greatly simplified, probably breaking the aspect of standards-compliancy
  • And, it makes use of the prototype.js library, a powerful ajax enabled set of routines, keeping the S5.js very small.

Controls are ...

Simple JSPWiki editing

  [{S5 autostart='yes' header='...' footer='<my name>' style='...' }]
  %%slide
  !!!First slide
  This is my first slide ...
  %%
  Presentation notes can be added outside the %%slide bracked.

Simple JSPWiki editing - cont'd

  %%slide
  %%title-slide
  !!! <presentation-title>
  !! <presentation-sub-title>
  ! <name of presenter>
  ... any other text you would like to add ...
  %%
  %%

Slide Show Look and Feel

• The look & feel of the slide show is defined through a small CSS, which you can easily change
• DIV blocks with specific ID's make up the whole presentation
  • the visible slide has ID s5slide
  • other ID's available for layouting: s5background, s5header, s5footer, s5page-nr
• Get a quick start, by looking at the 4 example layouts shipped with S5

S5 Themes

Examples taken from E.Meyer's S5

The Advantages

• With one wiki page, you get a full blown slide show
• You can use simple wiki markup for easy editing
• New slide themes can be created simply by writing new CSS style sheets
• S5 works in multiple browsers (Safari, Firefox tested sofar)

S5 Plugin Future Ideas

• Incremental slides (gradually revealling the slides content)
• Font scaling based on window size (ref S5 1.1)
• Support for PNG alpha channels in all supporting browsers, including IE/Win (ref S5 1.1)
• Smooth page transitions based on AJAX Effects.
• Local links are not yet working
• Images are not scaled along with the text when the window size changes
• Slide-view printing (current printing is based on wiki page view)
• ...

Open To The Public

• S5 1.1 is released under an explicit Public Domain 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 into the Public Domain along with S5
• On the other hand, anyone can freely use S5 for their own presentations or modify S5 to suit their needs
• The S5 Plugin for JSPWiki is equally free available.

In Summary

• With minimal scripting, S5 has been ported to JSPWiki making a cross-browser presentation engine.
• It uses minimalistic wiki syntax for editing your slides
• Make use of JSPWiki to publish and share your presentations
• Look & Feel is highly flexible through css based stylesheets