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

A New Record ..

[z0ink]

No posts and already slashdotted.

1st Slide

[Anonymous Coward]

First Slide

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.

Re:copy/paste

[Slime-dogg]

As a bonus, its markup is compatible with the Opera Show Format

After it gets it's first bloat-ware patch, it'll be Oprah Show compatible too!

I'm here all week.

Google Cache Links for 'ya ...

[xmas2003]

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

Meyerweb is always great

[Anonymous Coward]

Eric Meyer's site is always pretty interesting to watch, at least for web geeks like me (you know, the type who actually read the DTDs for the html and xhtml specs and play with css daily). S5 has been under development for awhile, and I hadnt gotten a chance to see it yet....

Of course, thanks to slashdot, looks like I'll have to wait till tomarrow

Mirror

[dancedance]

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

Oh, the irony - slashdot talking about standards?

[Corporate Gadfly]

Wow... the irony. Slashdot is talking about standards. Isn't it about time that /. itself should be standards compliant?

BTW, to make this comment on topic, the slideshow looks pretty decent, but I wouldn't consider this ground breaking stuff. Eric Krock (netscape technology evangelist) was doing these sort of presentations in the 1998/1999 timeframe.

Excellent powerpoint killer

[raahul_da_man]

This is an excellent example of the Web applications that Microsoft feared. Even though it is crude, and it has one killer limitation:

* Fonts are not scaled based on display resolution and available pixels; manual CSS editing is required

And a massively annoying one:

* Only one author can be listed in the metadata

I'm not quite sure why the second limitation exists. But already this program does all of the important functions I need Powerpoint for, and it has one big advantage over powerpoint .. the html version looks far prettier on the web than powerpoint does.

I was highly intrigued to learn about Opera's powerpoint alternative and previous attempts in this direction. This may be the first web app that I use all the time.

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.

Apple Keynote

[Queer Boy]

It would be awesome to see Apple incorporate this into the next version of Keynote to have a cross-platform way to export presentations.

Also makes me wish Microsoft supported more of the CSS standard on IE. I've been using CSS since '99 and almost every interesting effect breaks in IE Win. Thankfully more Windows users are using alternative browsers for security reasons.

Now if only Slashdot would validate!

Amazed Again

[MBCook]

Some of the things I've seen in the past (like the Complex Spiral site) have amazed me, but this demo REALLY shows why XHTML and CSS is so great.

So I open it up and it's a normal looking web page that is well done and works great. When your browser lacks javascript (or it's turned off) it looks like any other well made page. This is probably why it prints well too. Then you turn on javascript (or in my case let the little security warning from IE that came with SP2 run the script) and it's just like looking at a powerpoint presentation of the exact same data. Add a few other sets of CSS stuff and you could make it also look great for a handheld (like a Palm or some such) that might not be able to display the webpage well (assuming they can't handle the powerpoint style part here).

And it's all just XHTML, CSS, and JavaScript. Amazing the things that can acomplish wihtout needing Java, ActiveX, Flash, a seperate viewer (like PowerPoint), etc.

When you get someone really skilled with some pieces of technology, it's amazing the stuff they can crank out.

I know the site is down (it was for me) but get a mirror of the zip file (there are ones in other comments) and check it out if you have even the tiniest interest in this.

I would be very impressed...

[bigmanjq]

If OpenOffice built this into its presentation software. It would be nice if when you save your presentation you have the option to save as an XHTML document. This would dramatically reduce file size and allow OpenOffice to be used more widely (in my opinion) for some web applications. How hard could it be to port this format (since it is open) to OpenOffice? Any Volunteers?

Re:And

[FuzzyBad-Mofo]

Perhaps you should ask your software vendor to make a more standards compliant browser?

Re:And

[griffjon]

Well, duh, it's standards compliant.

CSS stands for

[Dorsai65]

Can't Survive Slashdotting, apparently.

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.

Example presentation using s5

[Tumbarumba]

I needed to create some slides last week for a presentation to my company's Best Practice group. After working out the actual content I wanted, it took me all of 20 minutes to create the content using s5.

Here's the final result: Introduction to CruiseControl

Mozilla users can switch to alternative stylesheets using the switcher on the status bar.

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.