S5Plugin DEMO PAGE -- not active on jspwiki.org
#

[{brushed.jspwiki.s5plugin.S5 autostart='yes' header='DRAFT' footer='DF • 1-Jan-2006
\ S5: An Introduction' style='S5Plugin.Layout.I18N' }]

S5 An Introduction#

Based on work of Eric A. Meyer, Complex Spiral Consulting#

Ported to JSPWiki by DF, Q1 2006#



Most of this introduction presentation is taken from the original S5 introduction presentation, by E.A.Meyer

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


More detail in S5Plugin

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 ...#

Next Slide space-bar, return, right-arrow, down-arrow, page-down, mouse-click, accesskey "X"
Previous Slide up-arrow, left-arrow, page up, accesskey "Z"
First Slide home-key
Last Slide end-key
Back to wiki ESC-key, T-key(toggle), Q-key (quit)

Simple JSPWiki editing#

This is what you put in your wiki editor
  [{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#

and there are title slides too:
  %%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 #

S501.jpgS502.jpg
S503.jpgS504.jpg
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


When I view this page (Firefox 1.5.0.7) I see a message stating 'S5Plugin DEMO PAGE -- not active on jspwiki.org'. Is this normal? I had expected to see a drop down containing slide-show mode and normal mode. Paul

--Paul, 10-Oct-2006

This is normal. You need to install the plugin on your local wiki installation to see the effect. (this is true for all contributed plugins on jspwiki) --DF

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
S501.jpg 10.5 kB 1 25-Mar-2006 21:18 Dirk Frederickx
jpg
S502.jpg 10.1 kB 1 25-Mar-2006 21:18 Dirk Frederickx
jpg
S503.jpg 9.6 kB 1 25-Mar-2006 21:18 Dirk Frederickx
jpg
S504.jpg 10.1 kB 1 25-Mar-2006 21:18 Dirk Frederickx
« This page (revision-3) was last changed on 10-Oct-2006 21:05 by 212.123.14.6