Follow Slashdot blog updates by subscribing to our blog RSS feed

 


Forgot your password?
Close
typodupeerror
×
GUI Software Programming The Internet IT Technology

Standards-Based CSS/XHTML Slide Show 175

Posted by timothy from the look-ma-no-powerpoint dept.
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!"
This discussion has been archived. No new comments can be posted.

Standards-Based CSS/XHTML Slide Show More

Standards-Based CSS/XHTML Slide Show

Comments Filter:

  • A New Record .. (Score:5, Funny)

    by z0ink ( 572154 ) on Tuesday November 02, 2004 @10:53PM (#10706864)
    No posts and already slashdotted.

    • Re:A New Record .. (Score:1, Funny)

      by Anonymous Coward
      Brilliant moderators. How does a first post get modded as redundant? Criminy.

    • Re:A New Record .. (Score:1, Funny)

      by Anonymous Coward
      stop these first-post-already-slashdotted people! PLEASE! They 're like happy puppies humping /.'s leg because they've got nothing better to say.

      And these posts still get modded funny?? Redundant, yes ... Offtopic, yes ... Funny, NOT ANYMORE!

  • 1st Slide (Score:4, Funny)

    by Anonymous Coward on Tuesday November 02, 2004 @10:54PM (#10706867)
    First Slide

  • copy/paste (Score:4, Informative)

    by Anonymous Coward on Tuesday November 02, 2004 @10:57PM (#10706883)
    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 [meyerweb.com] (also available as an 95KB ZIP archive [meyerweb.com], 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 [meyerweb.com] 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 [meyerweb.com] pretty much what it sounds like.
    • S5 Reference [meyerweb.com] a full reference describing what markup is required, what is recommended, and what is optional in an S5 presentation file.
    • Minimal S5 Structure [meyerweb.com] a guide to the absolute bare minimum markup used in an S5 slide file.
    • S5 File Map [meyerweb.com] explains what files are where, and what each one does.
    • S5 FAQ [meyerweb.com] 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 [meyerweb.com] page, which lists the people who helped improve S5 beyond what I ever could have done myself.

  • Google Cache Links for 'ya ... (Score:5, Informative)

    by xmas2003 ( 739875 ) on Tuesday November 02, 2004 @10:58PM (#10706888) Homepage
    Since it appears to be /.'ed, here a Google Cache of the Demo Page [66.102.7.104] and the S5 page [66.102.7.104]

  • Meyerweb is always great (Score:5, Insightful)

    by Anonymous Coward on Tuesday November 02, 2004 @11:00PM (#10706892)
    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 (Score:5, Informative)

    by dancedance ( 600701 ) on Tuesday November 02, 2004 @11:01PM (#10706895)
    Here is a mirror [geocities.com] of the zip file that you can test locally.

  • Mirror of demo .zip (Score:4, Informative)

    by timothv ( 730957 ) on Tuesday November 02, 2004 @11:01PM (#10706897)
    The .zip file containing the demo [ludios.org] (95KB)

  • Windows Users can use CityDesk (Score:3, Informative)

    by bheer ( 633842 ) <rbheer AT gmail DOT com> on Tuesday November 02, 2004 @11:06PM (#10706916)
    ... in case they want a GUI to create those presentations. CityDesk's free edition [joelonsoftware.com] is enough for most presentations.

  • Oh, the irony - slashdot talking about standards? (Score:5, Interesting)

    by Corporate Gadfly ( 227676 ) on Tuesday November 02, 2004 @11:07PM (#10706925)
    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 [mozilla.org] in the 1998/1999 timeframe.
    • 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)

      • 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

        • 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.
        • The reason might be that except for really simple layouts the table based layout is much easier to do and better than css layout.

        • Re:Oh, the irony - slashdot talking about standard (Score:4, Insightful)

          by Nurgled ( 63197 ) on Wednesday November 03, 2004 @07:23AM (#10708962)

          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.

        • 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
      • Slashdot is standards compliant. HTML 3.2 Other than the over 110 deviations on the main page, they are totally compliant.

      • Re:Oh, the irony - slashdot talking about standard (Score:5, Informative)

        by Mant ( 578427 ) on Wednesday November 03, 2004 @05:58AM (#10708795) Homepage

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

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

      Is this a /. specific issue, or a Slashcode [slashcode.com] 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.

  • Excellent powerpoint killer (Score:5, Interesting)

    by raahul_da_man ( 469058 ) on Tuesday November 02, 2004 @11:12PM (#10706938)
    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.

    • Re:Excellent powerpoint killer (Score:4, Insightful)

      by magefile ( 776388 ) on Wednesday November 03, 2004 @12:16AM (#10707343)
      If it uses pixels, that sucks. If it uses ems, it's not so bad, and is actually a good way of keeping the code clean while still allowing folks with high-rez monitors to use it easily.

    • Re:Excellent powerpoint killer (Score:1, Insightful)

      by Anonymous Coward
      Well, many browsers (e.g. Firefox) allow for easy font resizing, which seems to work well enough here. So I think that first point is not a major issue.

      The second point seems easy to fix in the code.
    • But already this program does all of the important functions I need Powerpoint for ...
      Take a look at prosper [colorado.edu] or latex-beamer [sourceforge.net] - the results are superior to everything Powerpoint comes up with ...
      The real problem is to to provide a click-and-point interface to easily create these presentations. And LaTex is a real good backend, but it shows its age here and there (for the web a XML-based language would be an advantage for example ....)
    • Out of curiosity, do you think there would be any practical interest for a web-based slide system that would:
      - scale slides (automatically) to match the current display,
      - allow obligatory slide transition effects on IE (and still work otherwise on any modern browser,)
      - offer a wysiwyg editing system to create simple slide shows, for people that don't feel like editing html?

      I kinda see how to put all that together, but it's unclear to me if there's a point.

  • Dynamic Drive (Score:5, Informative)

    by cloudless.net ( 629916 ) on Tuesday November 02, 2004 @11:14PM (#10706944) Homepage
    I always use Dynamic Drive [dynamicdrive.com] as a repository of useful DHTML scripts, including slide-show scripts that work with multiple browsers.
    • from experience most of those scripts suck. They put up any kid's script that works in such an ugly way that you can say goodbye to standards. The scripts in turn are unreadable, and they aren't GPLed anyway.

  • Apple Keynote (Score:5, Interesting)

    by Queer Boy ( 451309 ) <<dragon.76> <at> <mac.com>> on Tuesday November 02, 2004 @11:20PM (#10706966)
    It would be awesome to see Apple incorporate this into the next version of Keynote [apple.com] 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! [w3.org]

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

      It is an interesting idea, though I am just wondering what this has over other solutions such as PDF?
      • err, it's a web page, and not a PDF? I'd say that's an advantage right there, as it means you can publish it to the web.

        Yes you can upload a PDF but I'd rather the HTML as it's more malleable.
    • Keynote can export QuickTime movies of presentations. So you could say that it's already cross-platform capable unless you want to bring up the "QuickTime isn't native on Linux" argument.

  • You bastards Slashdotted Eric (Score:3, Funny)

    by digitalgimpus ( 468277 ) on Tuesday November 02, 2004 @11:25PM (#10706979) Homepage
    Is there no end?

    An attempt to use a standards compliant Web as an alternative to MS Powerpoint...

    and you slashdot his ass. :-D

  • 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. P

  • Amazed Again (Score:5, Insightful)

    by MBCook ( 132727 ) <foobarsoft@foobarsoft.com> on Tuesday November 02, 2004 @11:33PM (#10707013) Homepage
    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.

    • Re:Amazed Again (Score:3, Insightful)

      by Sputum ( 682106 )
      Javascript and HTML are very very capable. It's not hard at all to do complex things with them, as long as you can encapsulate everything into the one file. Accessing the file system, or databases, can pose a security risk. That's probably why as far as I can tell there are no good standards-based ways of doing these with just HTML, CSS asnd JS. (Of course it's easy with Java or ActiveX.) I'm working on some GUI widgets that I intend to use to replace my MS Access apps with a nice HTML based standards-comp

    • The site is nice but I'm very far from being impressed. Honestly, all there is to the design is a PNG image with alpha transparency and a fixed background image. I have seen much more impressive designs that are compliant.

      Look over CSS Zen Garden [csszengarden.com]. The same XHTML page has dozens of CSS files and the layout absolutly never look the same. The source is very clean too. That website really shows the power of CSS, and it has been running for years. Check out multiple skins, some of them are vertical, some hor

      • I've never known Eric to claim to be a graphic designer. The impressive part is not the visual design. There's no doubt that the Zen Garden contributors could whip up more beautiful visuals. The key here is the simplicity. One simple Web page source and you get a full-featured presentation, print-ready notes, and great accessibility too.
      • If you are referring to the ComplexSpiral home page, you are not correct. Those are 4 normal image files, all positioned with CSS, each one the same image just lightened or darkened (I used GraphicConverter on my Mac). No transparency, no .png. I used the same code on my site [sottwell.com], with a simple Javascript slideshow for fun. The backbround images don't work right in IE (big surprise). Read the ComplexSpiral site for the reason why.

      • Honestly, all there is to the design is a PNG image with alpha transparency and a fixed background image. I have seen much more impressive designs that are compliant.

        From the site:

        Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language.

        Anyway, CSS Zen Garden [csszengarden.com]is fantastic!

  • I would be very impressed... (Score:5, Insightful)

    by bigmanjq ( 824222 ) on Tuesday November 02, 2004 @11:33PM (#10707017)
    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?
    • 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.
      • Just some simple crash-recovery controls and a way to speed it up would be a big improvement. I went to move over to it from Microsoft Word and was severly dissapointed by how damn slow it was and the fact that when I went to save it crashed and then didn't have any way for me to recover my lost data.

        Perhaps it's better on non-Windows, but at the moment Word (unfortunately) shits all over OOo.
        • odd, i had *better* crash recovery (yes it does have it) than Office. I do agree that it is slow, I suggest abiword and other lightweight programs iinstead if your machine is too slow with OOo, hopefully this will improve in the future
    • Does OpenOffice even export XHTML yet? Last time I used it, it was limited to HTML 3.2 with almost no semantic markup at all.
  • 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 [nyud.net] links [nyud.net]

  • OO.o Impress? (Score:2, Informative)

    by xxx_Birdman_xxx ( 676056 )
    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 (

    • Re:OO.o Impress? (Score:3, Insightful)

      by bigmanjq ( 824222 )
      I like Impress also. However, I don't like the way Impress saves to the web (files way too big). It would be nice to create more simple presentations for the web with smaller file sizes. I think this new format would fit that niche.
      • Ah, maybe thats what im missing. Im thinking using a presentation for display in front of an audience.. not for uploading to the web!
        In that case it would be good as it removes the need for extra software to be installed..

    • Re:OO.o Impress? (Score:1, Insightful)

      by Anonymous Coward
      Well, it's a format that allows a Powerpoint-style presentation to be delivered with no software installed other than a standards-compliant browser. I'd say this is a pretty valuable piece of work.
    • 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...
  • 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?
    • I'm sure it's coming, but it's just been released. Be patient, or (you knew this was coming) write it yourself ;-)

      Seriously, though, it shouldn't be too hard for someone who is familiar with OpenOffice's code to harness that engine to do it (open .ppt with OO.org; export to S5).

  • CSS stands for (Score:5, Funny)

    by Dorsai65 ( 804760 ) <dkmerriman.gmail@com> on Tuesday November 02, 2004 @11:53PM (#10707202) Homepage Journal
    Can't Survive Slashdotting, apparently.

  • Too bad it's /.ed (Score:3, Interesting)

    by lux55 ( 532736 ) on Wednesday November 03, 2004 @12:08AM (#10707294) Homepage Journal

    I'd like to see if it's compatible with Dean Edwards' IE7 script [edwards.name]. If so, it could almost be considered cross-browser compatible enough for general use.

    Guess I'll have to look for a mirror...

    • Looks like the IE7 script doesn't help much, unfortunately. The reality is, IE is still the hugely dominant browser, so any solution you present has to be compatible with it if it's going to be of any real commercial interest. So while a standards-compliant solution is nice and all, a standard is still meaningless when 90% of users out there can't see it.

      Ah well, maybe this will get me off my butt to write my own, cross-browser presentation system...

  • Did my own version once (Score:4, Informative)

    by jeti ( 105266 ) on Wednesday November 03, 2004 @03:00AM (#10708223)
    For my presentations at university, I implemented my own HtmlPresenter [radialthinking.de] 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.

  • LaTeX (Score:5, Informative)

    by Noksagt ( 69097 ) on Wednesday November 03, 2004 @03:32AM (#10708348) Homepage
    It does almost make me feel like a barbarian for using beamer [sourceforge.net] 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 (Score:4, Interesting)

    by Tumbarumba ( 74816 ) on Wednesday November 03, 2004 @04:11AM (#10708478) Homepage

    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 [exubero.com]

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

  • ... 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. :-/
  • The demo slideshow does not validate as xhtml. Heck it doesn't even contain a character encoding definition.
    • I've also noticed that on Mozilla/gecko based browsers, sending the Content-Type as application/xhtml+xml for the main page causes things to break. (Firefox 1.0PR and Mozilla 1.7.2 specifically.) I'm also sending out the CSS as text/css and the JavaScript as text/javascript, so I guess there's a problem some place in gecko, although I'm not sure what.

      Sending out the aforementioned Content-Type headers with Opera and IE seem to work, though. Whether or not they do anything with those headers is another thin
  • You could do that with OperaShow in 2001. Its supposed to be impressive 3 years later?
  • 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/ [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. ;)

  • Coral P2P cache (Score:2, Informative)

    by benad ( 308052 ) *
    http://www.meyerweb.com.nyud.net:8090/eric/tools/s 5/ [nyud.net]
    You guys should stop using the google cache and use Coral caches [nyu.edu] instead.
  • Slashdot readers who like S5 may also like sstree, the super-simple xhtml+css+js tree widget. http://sstree.tigris.org/

Slashdot Top Deals

Remember to say hello to your bank teller.

Close