Slashdot Mirror
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!"
No posts and already slashdotted.
Steal This Sig
First Slide
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.
Please also visit the thanks and acknowledgments page, which lists the people who helped improve S5 beyond what I ever could have done myself.
Since it appears to be /.'ed, here a Google Cache of the Demo Page and the S5 page
Hulk SMASH Celiac Disease
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
Here is a mirror of the zip file that you can test locally.
The .zip file containing the demo (95KB)
It still doesn't work in IE
Business isn't willing to pay for products, innovation and careers, so we get brands, mortgage commercials and layoffs.
... in case they want a GUI to create those presentations. CityDesk's free edition is enough for most presentations.
Go somewhere random
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.
Corporate Gadfly
Jonathan Archer: the most beaten up Enterprise captain in Star Trek history
This is an excellent example of the Web applications that Microsoft feared. Even though it is crude, and it has one killer limitation:
.. the html version looks far prettier on the web than powerpoint does.
* 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
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.
I always use Dynamic Drive as a repository of useful DHTML scripts, including slide-show scripts that work with multiple browsers.
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!
Not since Marie-Antoinette played milkmaid has looking simple and honest been so fake and complicated.
Is there no end?
:-D
An attempt to use a standards compliant Web as an alternative to MS Powerpoint...
and you slashdot his ass.
I beleive Slashdot is standards compliant. HTML 3.2, according to its !DOCTYPE.
Now if only some-one could come up with a HTML 3.2 standards compliant browser.
More standards support, I say! (Yes, I use FireFox)
I mean when I went on holiday I wrote a simple slide-show page with CSS and JavaScript when I realised my laptop pretty much only had Windows and IE on it. It took about half an hour. Now, it wasn't standards based, and it wasn't as felxible as this thing, but I only ever intended it for use on pages of photos with captions on them, for the 10 days I was on holiday.
My girlfriend was ever so impressed. (I wish.)
Just seems to me there are hundreds of more interesting projects that deserve a slashdot post. Perhaps one of the admins needed a slide show program?
"What we imagine is order is merely the prevailing form of chaos"
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.
Comment forecast: Bits of genius surrounded by a sea of mediocrity.
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?
I had thought something like this would be possible (I was thinking more a replacement for flash though), so I'm glad to see it done.
Incidently: Coral links
I always like standards. Esp anything to do with CSS and the web.
Im not exactly sure of a reason to develop this standard though. I've been using the latest version of OpenOffice's Impress to do all my presentations for my uni projects. I've found it really easy to use.. maybe a little easier than Powerpoint. I know its more a clone of PP than anything revolutionary, but it stores its presentations in an OPEN format. It works great, and is also has very few problems when converting to a powerpoint slide (im not doing anything complicated, but I've had no trouble).
And it does the scaling of text and graphics really well which this standard (from a previous comment) doesn't really handle... I think Eric Meyer's work is awesome, but is this something that is actually really needed, or is it just an example of a clever combination of existing technologies together?
Live in your skin. Keep changing the scenery.
Well, technically perhaps but not really in spirit. You could certainly say I'm biased toward a certain view of how markup language *should* be used... But take a look at the slashdot html: Let's see, the Slashdot logo at the top, maybe call it a toplevel heading? Nope, it's table data. The headline above each article, perhaps we should call it a second level heading using? Nope, table data. The paragraph summary of each article? Table data.
It may be technically correct, but lying to my browser about what is contained within those tags annoys me somewhat. In my opinion, and in the opinion of many proponents of [X]HTML+CSS, Slashdot (like most other websites) abuses the markup language, defeating the entire purpose. For some websites, they might as well serve up pdfs.
There are also significant bandwith savings to be had as show by A List Apart which has been posted numerous times before.
Now if only there was a convertor from PowerPoint files to this, I would be happy. And I could possibly even convince the lecturers at the uni to use this instead of PowerPoint... Anyone?
Can't Survive Slashdotting, apparently.
--- Asking inconvenient questions for over 30 years...
I'd like to see if it's compatible with Dean Edwards' IE7 script. If so, it could almost be considered cross-browser compatible enough for general use.
Guess I'll have to look for a mirror...
putfwd.com - 1GB Free file storage with a twist
For some websites, they might as well serve up pdfs.
Don't even joke about that - Acrobat is slow, buggy, crash-prone, backwards-combatible. And on Windows (yes, I have to use it sometimes), it always tries to install something called "Microsoft Journal Viewer". PDFs suck ass for web presentation - although they are nice for non-live stuff.
Preview for OS X, though, is freaking awesome. It had better be, though, since PDFs are integrated into the OS.
Despite some claims to the contrary, IE6/Win's rendering of this page is not correct,
that really is the a boost that would push OOo to the next level of usage, something useful that MS does not provide at all, and which would be used by companies.
Snowden and Manning are heroes.
No, actually, it's not. I saved a copy of the front page to disk ran it through the W3's validator (because slashdot apparantly checks the referrer and refuses to allow itself to be run through the W3 validator)... a whopping 206 errors.
Slashdot is standards compliant. HTML 3.2 Other than the over 110 deviations on the main page, they are totally compliant.
Wow... the irony. Slashdot is talking about standards. Isn't it about time that /. itself should be standards compliant?
/. specific issue, or a Slashcode issue (slashdot is implemented using slashcode)? If it is the latter maybe a branch needs to be created to work on making a standards compliant version.
Is this a
Jumpstart the tartan drive.
Looks someone tried to create a standards compliant theme, in 2002. I haven't really investigated much to see where they finally got to, but looking at one of the comments make me wonder what the oldest browser /. should work in?
Jumpstart the tartan drive.
Is it possible to change the slideshow such that it fades between slides?
They should rename the title to "Dude finally discovers the possibilities of the already acclaimed Dynamic HTML technology!.
I should be able to create presentations using mozilla composer menu File->New->Presentation...
That's probably why it's slow, buggy and crash-prone.
The reason might be that except for really simple layouts the table based layout is much easier to do and better than css layout.
I've been using the latest version of OpenOffice's Impress [...] but it stores its presentations in an OPEN format.
Yeah, but his is even better: With S5 (which uses XHTML), you can store your presentation in an XML based format!
Oh, wait...
Pandimaniacs: in english, german, P
For my presentations at university, I implemented my own HtmlPresenter this spring. If you're curious how a more basic implementation looks like, or want to use a more simple system, be welcome to use it.
I hereby put it into the public domain.
Funny. My own little script can unhide the paragraphs one by one. S5 cannot. I always considered this the key feature of PowerPoint like presentations.
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.
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.
My business: Farstrider Studios.
... does it work properly in IE 5 and IE 6, given it involves things like it might *cough* not support too well (while still being clear market leaders)?
:-/
Otherwise it seems pretty useless.
Beware: In C++, your friends can see your privates!
The demo slideshow does not validate as xhtml. Heck it doesn't even contain a character encoding definition.
You believe wrong, it isn't even compliant 3.2. Run it through a validator and watch all the problems it shows.
Is this something I could use if I know a little html and css, but no javascript? Or is it too early for that? It's a great idea in any case, I hate presentation software (powerpoint ánd impress)
Slashdot has a "light" template which was probably originally intended for lynx and ilk. It uses headings reasonably sensibly, and I read slashdot with it using my user stylesheet.
An issue at this point, not just with slashdot but with all similar sites, is that there is no decent HTML construct for marking up threaded discussions, so you either get table/css hacks or (in the rare case that the author is a fanatic) you get nested ordered lists with the markers hidden in CSS, which just makes a mess in non-CSS browsers.
I wish this luck. I hate, loathe and despise powerpoint.
Confucius say, "Find worm in apple - bad. Find half a worm - worse."
You could do that with OperaShow in 2001. Its supposed to be impressive 3 years later?
-- "So they told me that using the download page to download something was not something they anticipated." - Bill Gates
Doesnt work with Safari - nothing on computers ever works properly and its always my fault - it's because you dont have Windows, it's because you do have Windows etc etc.
Could we have some engineering please, you know, the art of making things that actually work reliably and predictably? Your car doesnt tell you that its being fed the wrong brand of petrol.
This is not a signature.
Okay, I like and respect Eric Meyer. But I'm getting fed up with all of this bullshit about standards. XHTML and CSS are not standards. Javascript's syntax has been standardised by ECMA-262, but the objects this slide show (and practically every bit of Javascript on the web) uses are outside the scope of that standard.
Sure, it's nice, clean code. And it conforms to the W3C's specifications where they are applicable. But this isn't "standards-based" at all. If it were, it would be based around ISO-HTML, the only form of HTML that has been standardised, and not XHTML.
The W3C are not a standards body. That's why their specifications are entitled "recommendations". Tim Berners-Lee deliberately avoided setting up the W3C as a standards body.
When people talk about "web standards", they are either ignorant or are trying to elevate the W3C's specifications as more authoritative than they actually are. Eric Meyer is not ignorant, which makes his proclamations about "web standards" rather deceptive. "Web standards" has become nothing short of a buzzword designed to con PHBs.
I beleive Slashdot is standards compliant. HTML 3.2, according to its !DOCTYPE.
Even if it adhered to the HTML 3.2 specification (which it doesn't), that wouldn't make Slashdot standards compliant. HTML 3.2 isn't a standard.
I couldn't see any examples because of slashdotting, but I can imagine the power of XHTML combined with CSS. On http://j-ftp.sourceforge.net/ I use CSS+javascript to put the whole page into one single html file to avoid the latency of multiple browser requests. This was so easy to set up that I wonder that CSS (positioning) isn't used by more people already...
;)
Sorry for the free avdertising btw.
http://www.meyerweb.com.nyud.net:8090/eric/tools/s 5/
You guys should stop using the google cache and use Coral caches instead.
Strictly on a side note (not advocating for or against the use of PDF):
:)
Acrobat Reader 6 under Windows can easily be changed to launch really quick, if one "disables" all the useless plugins:
1. Enter the Reader-folder.
2. Create a backup-folder, named e.g. "plug_ins_disabled"
3. Move all files from the "plug_ins"-folder, except "EWH32.api", "printme.api" og "Search.api" to the new folder.
3b. Alternatively, just delete all files in the "plug_ins"-folder - again, with the exception of the above three files.
Open a PDF and get amazed
(some of the "useless" plugins are stuff like reading encrypted pdfs - that and other features might not exist if the related plugin is removed... I haven't had any problems, though, through ordinary use for the last six months after removing all these plugin-files)
- Peter Brodersen; professional nerd
You can use Drupal to convert entire essays/books into s5 presentations on the fly.
Example: Standard content in CMS view
Standard content in s5 presentation view
except for really simple layouts the table based layout is much easier to do and better than css layout.
No, actually. "Semantic" (god I hate that word) HTML with CSS is *much* easier to do; it takes time to learn (but no more than table-based layout), but is much easier to work with.
Neat uses of existing technologies such as XHTML/CSS just put more focus on the need for standards compliant browsers like Firefox... However the likleyhood of IE7 conforming to standards doesn't seem too high since these very standards give people alternatives to products that are MS's bread and butter... I've seen some XULs that will bring the browser wars to a whole new level...
Get your torrents...
What a fool believes, he sees, no wise man has the power to reason away.
In what way does HTML 3.2 not meet this criterion?
By not being a standard. The W3C are not a standards body. They change specifications after they have been published. As long as the W3C do things like that, you can't consider their specifications to be standards, as it simply isn't useful to compare something against a moving target.
Standards and markup language usage is a tricky thing. I can sympathize with the site designer who is trying to serve many masters and apeal to a diverse audience. As an example, the use of tables to control page content placement and flow is often criticized, however, if you are trying to design a page that can be viewed well in all browsers from netscape 4 on solaris, to lynx, to blazer on the palm, to IE and Firefox, sometimes tables turn out to be the best way.
A previous article posted here about the evils of backwards compatibility in web standards was a good piece but I can understand why people would design sites with a broader, non-standard audience in mind.
Slashdot readers who like S5 may also like sstree, the super-simple xhtml+css+js tree widget. http://sstree.tigris.org/
if you are trying to design a page that can be viewed well in all browsers from netscape 4 on solaris, to lynx, to blazer on the palm, to IE and Firefox, sometimes tables turn out to be the best way.
Except that tables are often used to determine placement of graphics, which is going to look confusing if you're using Lynx.
In fact, if you're serious about supporting Lynx, all graphics should be rendered as ASCII-art.
There is a dude who did some DTML Slides which feature some nice effects. Like text-scaling, fading and sliding. http://home.arcor.de/florianlang/coding/dhtml_slid es/index.html/
I have run into the Journal Viewer/Acrobat issue a couple of times. The best way to fix it is to uninstall the Journal Viewer through Add/Remove programs.
Here is Microsoft's Advice on the problem.
I haven't had any need to reinstall the Journal Viewer. Heck, I don't even know how it got there in the first place!
Power off before disconnecting connecting connector. Seen on a cash register
You will enjoy the name of my blog I see. However, the W3C recommendations are the closest thing you get to a standard for web content right now. And although the use of standards always has to have an ulterior motive, the booming interest is good for the web.
Standards Schmandards
http://validator.w3.org/check?uri=http%3A%2F%2Fwww .meyerweb.com%2Feric%2Ftools%2Fs5%2Fs5-intro.html
A quick run through the validator shows a couple errors.
Can't you just do
.style
{
margin-left:2em;
}
div class="post" id="postid"
div
div
end div
end div
end div
Hardly a 'hack'. What am I missing??
Does that mean we should all go back to producing HTML like that turned out by slashcode?
When people say 'use standards' they mean
All these things are Good. So far you haven't come up with any suggestions, you're just whining about the semantics (heh) of one word. Stop complaining about that and tell us what we *should* be doing, and how this differs from what Eric Meyer has done.
You can use standards without doing any of the things you claim is meant by "use standards", and you can do all of the things you claim is meant by "use standards" without actually using any standards.
My point was, your definition of 'Use web-standards" varies wildly from the one which has become common-coin. Now you can complain about this, but ultimately meaning follows usage.
Your definition:
Web standards - things which have been approved as ISO standards.
Commonly used definition:
W3C recommendations (encompassing those 'orthogonal issues' I talked about like content/presentation separation, allowing for varied user-agents etc).
Yes the W3C isn't perfect, but it's the best we have, and if everyone agrees to the recommendations. The 'real standards' you talk of are so out of date that they are no longer relevant. So either we splinter into 100 different implementations of the same ideas and reignite the browser wars, or browser makers and content creators agree on common ground and accepted usage. This is what most people call 'standards'.