Standards-Based CSS/XHTML Slide Show

sootman writes "Eric Meyer, the man behind the famous Complex Spiral (CSS) Demo page, is at it again. He has created S5, "a slide show format based entirely on XHTML, CSS, and JavaScript." As he says, "With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible." So it can be used for PowerPoint-like work and the show responds to a variety of input--you can go to the next slide by pressing Return, Right, Space, etc. It is being released under a Creative Commons license. So fire up our favorite standards-compliant browser and check it out!"

Comments

copy/paste

[Anonymous Coward]

Here's a paste of the homepage, since it's totally slashdotted.

S5: A Simple Standards-Based Slide Show System

S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It's totally simple, and it's totally standards-driven.

As a bonus, its markup is compatible with the Opera Show Format, and S5 is engineered to be displayed using Opera Show when a presenation is run using Opera.

If you'd like to see S5 in action, go ahead and run through the introductory slide show (also available as an 95KB ZIP archive, the size of which is due to the presence of several images in the slide show). Feel free to try any of the features. For example, you can hit the space bar to advance to the next slide. Or use the right arrow, the down arrow, hit Return... any of these will work. The other features will be explained in, or else demonstrated by, the slide show itself.

If you like the general idea of S5 but don't like the theme used for the intorductory slide show, then fear not: there are already a number of themes available, and you can of course always create your own.

If you have a hankerin' to know more about how this system works, exactly, we have a few resources that might help.

• A Basic Primer in Using S5 pretty much what it sounds like.
• S5 Reference a full reference describing what markup is required, what is recommended, and what is optional in an S5 presentation file.
• Minimal S5 Structure a guide to the absolute bare minimum markup used in an S5 slide file.
• S5 File Map explains what files are where, and what each one does.
• S5 FAQ it may not answer all your questions, but it will answer the common ones. The uncommon ones you'll have to send in.

Please also visit the thanks and acknowledgments page, which lists the people who helped improve S5 beyond what I ever could have done myself.

Google Cache Links for 'ya ...

[xmas2003]

Since it appears to be /.'ed, here a Google Cache of the Demo Page and the S5 page

Mirror

[dancedance]

Here is a mirror of the zip file that you can test locally.

Dynamic Drive

[cloudless.net]

I always use Dynamic Drive as a repository of useful DHTML scripts, including slide-show scripts that work with multiple browsers.

LaTeX

[Noksagt]

It does almost make me feel like a barbarian for using beamer under LaTeX. Many alternative LaTeX styles/classes exist (prosper, HA-prosper, seminar, slide, etc. They are mature and elegant. The resulting PDFs are attractive because they are single-file-per-presentation solutions that are cross-platform and adhere to an open standard (xpdf is a great viewer!). S5 would need additional files for images, style sheets, etc.

Those who use LaTeX should check out beamer--the table of contents is quite intelligent & they are easily theamable & have already solved many things that S5 is only planning to include.

Re:Oh, the irony - slashdot talking about standard

[Mant]

You believe wrong, it isn't even compliant 3.2. Run it through a validator and watch all the problems it shows.