Stories
Slash Boxes
Comments
Search

News for nerds, stuff that matters

Slashdot Log In

Log In

Create Account  |  Retrieve Password

Standards-Based CSS/XHTML Slide Show

Posted by timothy on Tue Nov 02, 2004 09:51 PM
from the look-ma-no-powerpoint dept.
GUI Software Programming The Internet IT Technology
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!"
+ -
story
This discussion has been archived. No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.

Standards-Based CSS/XHTML Slide Show 50 Comments More /

 Full
 Abbreviated
 Hidden
More
Loading... please wait.

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

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

  • 1st Slide (Score:4, Funny)

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

  • copy/paste (Score:4, Informative)

    by Anonymous Coward on Tuesday November 02 2004, @09: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, @09: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, @10: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, @10: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, @10:01PM (#10706897)
    The .zip file containing the demo [ludios.org] (95KB)

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

    by bheer (633842) <rbheer.gmail@com> on Tuesday November 02 2004, @10: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, @10: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.

          • How to make Acrobat Reader start very quickly (Score:4, Informative)

            by Penguin (4919) on Wednesday November 03 2004, @08:40AM (#10709600) Homepage
            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)
        • 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, @06: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.

      • 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, @04: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, @10: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 Tuesday November 02 2004, @11:16PM (#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.
    • 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 ....)

  • Dynamic Drive (Score:5, Informative)

    by cloudless.net (629916) on Tuesday November 02 2004, @10: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.

  • Apple Keynote (Score:5, Interesting)

    by Queer Boy (451309) <dragon.76NO@SPAMmac.com> on Tuesday November 02 2004, @10: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, @10: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, @10: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.

    • 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 would be very impressed... (Score:5, Insightful)

    by bigmanjq (824222) on Tuesday November 02 2004, @10: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.
  • 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 (
    • 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.

  • CSS stands for (Score:5, Funny)

    by Dorsai65 (804760) <.moc.liamg. .ta. .namirremkd.> on Tuesday November 02 2004, @10:53PM (#10707202) Homepage Journal
    Can't Survive Slashdotting, apparently.

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

    by lux55 (532736) on Tuesday November 02 2004, @11:08PM (#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, @02:00AM (#10708223) Homepage
    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.

  • LaTeX (Score:5, Informative)

    by Noksagt (69097) on Wednesday November 03 2004, @02: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, @03: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.

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

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

      OK, I'll bite. In what practical way are W3C's specifications "less authoritative" than standards such as the C++ standard? For that matter, how is The Java Language Specification less authoritative than an ISO standard? The answer clearly isn't that the ISO enforces their standards, because I don't see any C++ compilers being recalled because th

All trademarks and copyrights on this page are owned by their respective owners. Comments are owned by the Poster. The Rest © 1997-2009 Geeknet, Inc.