S5 Final Candidate

Published 20 years, 1 month past

Thanks to the efforts of many people, the slide show system I’ve been working on is just about ready for prime time.  Thus, I hereby dub it S5 and place it into Final Candidate status, complete with documentation of the markup format and a map of the files that are used for an S5 presentation.

There is one thing I’ve found that needs to be addressed before exiting the FC stage, and that’s the handling of slide titles that contain markup.  If you look at the slide show S5: An Introduction, the navigation menu entry for the title slide is ” 0: Snull: An Introduction”.  It should be ” 0: S5: An Introduction”.  I know this has something to do with walking the DOM tree and collecting the appropriate bits, but I’ve yet to figure out how to do that efficiently.  Assistance, as always, is appreciated.

There are a few limitations that will exist even after S5 goes to v1.0.  These are summarized on slide 8 of the introductory slide show, but I’ll explain them in a little more depth here.

  • Only one author can be listed in the metadata — This limitation is largely inherited from OSF 1.0.  Mark Schenk and I have talked about ways to get around this limitation, but have agreed to postpone fixing it until later; for now, it will be better if S5 1.0 and OSF 1.0 are as compatible as possible.  When I start working on S5 1.1, I’ll come back to this, and will probably kick around some ideas in public for your comment.  But that’s for later.
  • Links from within a slide to another slide will probably fail — Henryk Plötz created routines to fix this limitation, but I don’t have time to analyze and understand how they work before going to v1.0, and I’m very much against just dropping things into the JS unless I understand what they do, and how they do it.  I expect to get this functionality into S5 1.1.
  • The navigation controls are limited to the footer — This is in some ways a matter of convenience, and also a matter of consistency.  If the controls are known to be in the footer, then theme authors can write their CSS accordingly.  I may—and note I say may—relax this restriction in a future version of S5.  For now, it stands.  (Update: by “limited to the footer”, I mean it’s limited in a structural sense.  You can still visually place the controls anywhere CSS will allow.)
  • Slide content is expected to be static and atomic; that is, there is no capability to trigger dynamic slide content by hitting the “next” command — It would be nice to allow a slide author to trigger a slide animation (or whatever) by just hitting a “next” key, the way Powerpoint does.  It’s probably easy to do.  It won’t make it into 1.0.  So the expectation is that any given slide is a set of text and/or images, and that when you advanced you go to the next slide.  Of course, an author can still embed a Flash file or a QuickTime movie or an animated GIF or whatever.  There just isn’t the ability to click the mouse button or hit the space bar and have new content revelaed on the same slide.
  • Fonts are not scaled based on display resolution and available pixels; manual CSS editing is required — Again, largely a matter of convenience.  I tried dynamic font scaling and discovered that Firefox had major problems with what I’d done.  I’ll worry about it in a later version.  For now, if you create your slides assuming 1024×768 and find yourself in an 800×600 projection environment, you’ll have to edit the CSS directly to change the font size (and anything else that has to be changed).

There’s one other limitation I didn’t put on the slide, but I’ll briefly cover here.  As yet, it is not possible to embed all of the CSS and JS into the presentation file (that is, the XHTML file) and have the system work as widely as it does when they’re external.  The culprit again was Firefox, although it’s as likely that the real culprit is how I scripted things.  For that matter, it will never be possible to have complete standalone S5 files for any presentation that includes images or other external resources, because IE/Win doesn’t support data: URIs.  (Okay, never unless this capability gets added to IE/Win.  Don’t hold your breath.)  I do intend that a future version of S5 will allow the embedding of the CSS and JS.  Version 1.0 will not.

One other note: to keep things more consistent with OSF 1.0, I altered the S5 format to use h1 elements for slide titles, whereas before they were h2 elements.  I’ve also dropped the currentSlide, header, and footer divs into a layout div.  You can get a more detailed look from the reference.

All right, I think that’s enough from me for the moment.  Please try out the introductory slide show (also available as a ZIP archive), check over the documentation, and let me know if you find anything broken (fixes always welcome!) or incorrect.  Other feedback on the documentation, or on the content of the slide show, is also welcome.  Suggestions for new features or ways to fix the known limitations are not prohibited, but they will be shelved until after version 1.0 goes to final release.

Comments (63)

  1. Pingback ::

    Just like everybody else » Joseph Lindsay - Specialist generalist, Web Craftsman » PowerPoint is deprecated

    […] d under: Web development and design — Joe @ 08:38

    Eric Meyer et al. has released S5 final candidate. No more PowerPoint for me I don’t like […]

  2. Pingback ::

    Blogged in space » 2004 » October

    […] om Final Candidate (FC), og kan hentes i den nyeste opdaterede version p

  3. Pingback ::

    solitude.dk | More Slide Show Fun

    […] Meyer released a Final Candiate version of S5 — his cross-browser slide show format (announcement). I have added S5 support to my slide show manager. I felt I ha […]

  4. Pingback ::

    StigmergicWeb » Blog Archive » A Better Mousetrap

    […] er up and running A Better Mousetrap Wow! Eric Meyer has created a new way of putting together slide presentations. Or maybe I should say that […]

  5. Pingback ::

    StigmergicWeb » Blog Archive » A Better Mousetrap

    […] er up and running A Better Mousetrap Wow! Eric Meyer has created a new way of putting together slide presentations. Or maybe I should say that […]

  6. Pingback ::

    Abulafia: »Hast du das Passwort?« » Präsentation mittels XHTML

    […] tation mittels XHTML. Eric Meyer hat dazu die passenden Vorlagen und Scripte entwickelt: http://www.meyerweb.com/eric/thoughts/2004/10/07/s5-f […]

  7. Pingback ::

    Abulafia: »Hast du das Passwort?« » Präsentation mittels XHTML

    […] tation mittels XHTML. Eric Meyer hat dazu die passenden Vorlagen und Scripte entwickelt: http://www.meyerweb.com/eric/thoughts/2004/10/07/s5-f […]

  8. Pingback ::

    StigmergicWeb » Blog Archive » Writing HTML presentation

    […] ho are in North Battleford for a couple of months. I am using Eric Meyer’s brilliant S5 presentation system. I am impressed not only by its power and portability, […]

  9. This, I tell you, is soooo nice. I’ve been watching this project from the sideline, and… well… I’m impressed.

    The use of just one single file is brilliant, and the fact that it’s easy to edit, gives it a further step ahead of powerpoint (and alikes).
    One doesn’t even need a particular program to correct errors or add stuff to the slide, just an ordinary text-editor.

    I salute all of you, who made this possible!

  10. I noticed a bug, in both Firefox 1.0 PR1 and IE 6/Win — the 5 in some of your slide header tags (e.g. “

    What is S5?

    “) causes the hidden navigation menu to show “null” for the child-node portion — e.g. “What is snull?” and “Snull: an introduction.” I have a patch which looks for child nodes recursively, rather than trying to grab nodeValue from non-text nodes. Fixes the problem on both browsers handy to me at the moment.

    I’m emailing a diff separately (don’t want to try and entify a diff).

  11. Also posted the patch at http://roub.net/s5patch/s5-slides.patch if anyone else is interested.

  12. Trackback ::

    Paul Roub : blahg

    S5: a killer browser-based slide-show tool
    Hate PowerPoint? Me too. Thanks to Eric Meyer, though, I can now do straight-XHTML presentations which perform very nicely as slideshows; printed materials; and plain-text web pages on all sorts of browsers. Check out S5….

  13. I’ve been watching how this developed over time and I am amazed that this can even be done with a web page. Since I’m doing a presentation for a class pretty soon I’ll be using this instead of Power Point.

    Thank you for taking your time to develop this farther than anyone else.

  14. Speaking of entity-encoding, it was the <sup>…</sup> tags that were causing the problem; the blog ate my angle brackets.

    Last comment on this entry, I swear.

  15. Thank you.

    I’m using this for a presentation I’m doing next week, and it works great. (The font sizing thing is a pain, but hopefully I’ll get a look at the setup with enough time to fix if necessary.) I love that the whole thing is less than 20KB…not including all the pictures I’m using!

    It was so easy to edit; I know if I need to make any last-minute changes, I can do them no matter what computer I have access to, which is a great relief.

  16. Is this what you used for your presentations at SXSW04?

    I like this. I have done several presentations in XHTML/CSS because it is more portable and easier to update quickly.

    I am also interested in finding out how Doug is doing his presentations with PHP.

    Good job Eric!

  17. Good stuff. However, you say that Opera will fall back to use OperaShow. When I trigger OperaShow (F11) I only get unstyled slides. Is it supposed to be like this? I use Opera 7.54.

  18. Trackback ::

    Just like everybody else

    PowerPoint is deprecated
    Eric Meyer et al. has released S5 final candidate. No more PowerPoint for me 8)I don’t like talking to an audience while they’re trying to watch TV (some PowerPoint authors make their show so whiz-bang-neat-o).

  19. Paul: That got it! The fix is in and the archive’s updated.

    Andreas: Nope, that was a bug. I was in the process of fixing it as you posted, actually, and I believe it’s all better now.

    Jeremy: No, but it’s based on the files Tantek used to present at SXSW.

  20. Trackback ::

    Blogged in space

    Powerpoint er yt – xhtml/css viser fremtiden
    Eric Meyer, CSS-guru, har i nogen tid arbejdet p

  21. Wooow – three pings… (stupid server *sigh*)

  22. Trackback ::

    molly.com

    S5 final candidate release
    PRESENTATIONS YOUR THING? Check out Eric Meyer’s S5, now in final release for your projected pleasure.

  23. I noticed a bug with the navigation controls using Firefox 1.0 PR on Linux. If you mouseover the control area (to get the pulldown menu) and click the pulldown’s button, but do not move the mouse at all after clicking, the pulldown disappears and a grey area (for the choices) appears above it, but blank. Things stay like this until you move the mouse, at which point the pulldown reappears and the grey area turns into your list of slides.

    I haven’t tested this on other targets, and I haven’t looked at your code, so I have no idea if it’s a buuuug in Firefox or in your code itself, but maybe someone else will be able to reproduce this at least.

  24. Interesting… the problem I report appears differently on my win32 Firefox 1.0 PR install. Things work fine when you click the pulldown’s button. But when you mouse out of the control altogether, you then get the vanished-pulldown-and-gray-box effect, which doesn’t go away until you click somewhere on the page. And moving the mouse while this effect is visible can make the content of the box appear and disappear, like flicker.

  25. Trackback ::

    VMUNIX Blues

    S5 Slide Shows

    Eric Meyer has taken his S5 Slide Show System to Final Release Candidate. As a long time PowerPoint hater who was impressed with Opera’s slide show stylesheet stuff this is fantastic news. Easy text editing of slides in XHTML, displayed in your web …

  26. Peter: This is related to a painting bug in Firefox, and not something I can really do anything about. See Bugzilla entry #206000 for more details. Hopefully they’ll get it fixed in the near future.

  27. very, very cool. I have to agree with everyone else here that having this, in place of a Powerpoint Presentation seems like a great idea to me. Even with an image heavy css file the overall footprint will probably be smaller than a smiliar bloated powerpoint file.

    The only difference I guess is powerpoint does provide some really nice “printing” capabilities scaling everything down easilly for you. I guess; if one wanted, you could create your own CSS file to emulate the scaled down printouts; though I fear you might need to use sFIR (or whatevever that acronym is) to get the same quality of print out of text at such small sizes..

  28. Okay, let’s have another try. (I’ve recently posted on the very first beta side and wondered why no one bothered … :-)

    I’ve made three new CSS themes to help promoting your great work. I’ve fixed some minor problems I had and reduced their size to a minimum. I’ve integrated them with the tag for easily changing with the sylesheet switcher in Firefox, Mozilla or Opera. They’re tested with various screen resolutions and should work on every monitor.

    I noticed Firefox 0.9.3 (on WinXP) slows down while displaying the newest S5 version, everything else seems fine.

    I provide my themes in a zipped file, too.

    Martin

  29. I’m using firefox (using the latest nightly)… the s5 intro’s dropdown menu doesn’t work for me. It shows, but it wouldn’t show all the entries. :(

  30. Eric, it works like a charm now. This is excellent. I have done presentations with OperaShow before but this makes is much more easy and flexible. Thanks for the time you put into this and for sharing it.

    As for dynamic slides (bullet points appearing one after the other): I found a solution for that but it blows up the XHTML file a bit.

    If anyone wants to have a look and see if perhaps my solution can be worked into S5, I have one presentation online. But note: The file is very large because it contains several Flash movies. And you need Opera to view it as a slideshow, hit F11 to trigger presentation mode.

    I don’t have the time to look into the issue myself at the moment. But feel free to grab ideas.

  31. I tried setting up a slideshow using images instead of text. I used some PHP to read through all the files in a specific directory and echo them out wrapped in the “slide” div in the xhtml. Works nicely apart from one feature… all the images have to load before the slideshow is ready to view, so you are left viewing unstyled images and text for several seconds (or longer depending on your connection speed).

    I tried to add a preloader Javascript at the start to hide the images until fully loaded but it seemed to cause a conflict with the main JS… and I’m no whizz at JS… so if anyone has any ideas I’d be grateful.

    I’ve got an example up and running at http://theletter.co.uk/log.php?id=19.

  32. Well done, I have to translate this into German.

    Oh, and you’ve got a typo in my name at http://www.meyerweb.com/eric/tools/s5/credits.html. It’s a “t” , not a “s”.

  33. Hey, Eric — you would consider putting this up on SourceForge so that those with great ideas can contribute directly to the effort?

  34. Hello and thank you. Iam going to use that for my next presentation at school.

    I can only second Peter Murray’s suggestion: Put this up to SourceForge please :)

  35. Trackback ::

    IM2 | OQP

    Pr

  36. Hi,
    I really am impressed with your work!! I wonder if a CSS switcher that just controlled text size would be a good solution to changes in resolution when using a projector.

    chuck

  37. Thanks for the great work, Eric et al. Now if we can just get the Mozilla/NVu Composer folks to add easy, transparent editing support for S5, we’ll *really* have something!

    I we can make that happen, there’s a good chance a bunch of people in Redmond will have the same reaction that Burt Rutan figured the NASA folks had to his X-prize flight: “We’re screwed…” (And yes, that’s an actual Rutan quote from Monday…)

    Anyway, I’ll be using S5 on our website starting next week, probably, and I’m eagerly awaiting v1.1 to fix the text scaling problem.

    Thanks again to all who made this happen…

  38. Translated the whole thing into German, created additional website and translated the example slide show.

    There is also an according weblog-entry (for response).

  39. I think there’s an extra media="projection" in the link to ui/slides.css on s5-intro.html that causes Firefox to not use any styles at all for the page. When I change it to media="screen" all is well.

    Unless I’ve missed something about enabling media="projection" in Firefox, that is….

  40. There is some javascript problem with this template in Konqueror 3.3.0. Undefined className have undefined value.

  41. Trackback ::

    StigmergicWeb

    A Better Mousetrap
    Wow! Eric Meyer has created a new way of putting together slide presentations. Or maybe I should say that he has put together a way of putting together presentations using the well established technologies of XHTML, CSS and Javascript. This is timely n…

  42. Trackback ::

    Web4C

    XHTML Sliding Tools
    Eric Meyer

  43. Aha: the browser-sniff rears its ugly head again. When I change the user-agent string back to default (I’ve been experimenting to see how many real-world sites break with a different UA) the slides work as advertised.

  44. The className to empty string should be OK now [http://bugs.kde.org/show_bug.cgi?id=52555], maybe there is more bug in Konqueror…

  45. That is a beaut. Thank you very much for this. Hope you don’t mind if I rolled that code into a Domino database? Gave you credit throughout. Just seemed like this should be incorporated into a db somehow to take advantage of dynamic slide creation.

    Again thanks, this is beautiful work.

    Andrew

  46. I don’t have time to read the other comments tonight, so this may already have come up, but I have my PC/IE-based browser set to “Large” type (not Largest) and the navbar of the slideshow was not at the bottom of the show anymore, it was a big stripe in the middle, blocking a good bit of the show.

  47. Very Nice. Especially with the three new themes from Martin (comment 23), but while I can switch themes with Mozilla and Chris Pederick’s Web Developer toolbar, I can’t get the new styles to load with the show by modifying the .html or .js files or even by renaming Martin’s .css to pretty.css (every time I do, the slides break up). Any hints on writing and implementing new styles?

  48. Scott, there is a German translation of S5 by E. Eggert where you can finde any of my themes as isolated S5-versions.

    I’ve had the same problems Scott described (on comment 46.) trying to simply add some styles over a new css file or replacing the pretty.css with an other file. It does not work to rename files and the links to it, it’s allways the style.css/pretty.css which gets loaded. It would be very comfortable if there was a way to change themes without creating the whole directory structure again!

  49. Anyone thought about combining S5 with SVG? Then you would have the power to do Animations and Charts and Diagrams (even in Realtime!)
    If someone plays with SVG and S5 it would be nice to hear what is possible.
    When I find the time at the beginning of the next year, I’ll try myself..

  50. Trackback ::

    Penmachine words music comment

    The Holy Grail of PowerPoint replacements
    Eric Meyer has created a browser-based replacement for PowerPoint [and] a sample presentation that also explains what’s so cool about the whole thing. One click and you can see the exact same material without all the layout elements. Holy cow. And it…

  51. the only problem i see is the back button. theoretically you will be using this in kiosk mode, but someone inevitably won’t. is there anyway to enable the back button?

  52. Excellent stuff. I’ll be using this for an upcoming presentation. I have noticed a slight visual glitch in IE6/Win though: you can always scroll vertically. Just a little bit, but still. Not really a problem for me since I won’t be using IE, but there may be people out there who cling to their poor old browser ;)

  53. Great work, i downloaded the slides and have a few suggestions, maybe you have already thought these through and dropped them for some reason or another.

    – You use innerHTML, i’m not sure that’s as good a system as document.createElement, with createElement you cannot create invalid code.

    – The next/prev links use javascript:go(), if you used the onclick=”go()” then you could used the DOM function setAttribute() to add IDs to the DIVs for anchor links, and dynamically update the hrefs to href=”#id” that way when you toggled the slide presentations it would jump down to the same slide text in both formats.

    – in low resolution monitors, there is no scrolling of the text in FireFox and strange scrolling in IE 6.0, on windows. So i miss the last few bullet points.

  54. During working with S5 I’ve noticed that it would always go to the next slide upon clicking on a slide – even after selecting some text and moving the mouse.

    I think this could get a mess when trying to highlight some portion of text during a presentation.

    So I’ve extended the JavaScript to be able to handle text-selections (i.e. movements of the mouse while holding the button).

    First, I’ve added the following code at the bottom of slides.js:

    var start_posX = 0;
var start_posY = 0;

function start_clicker(e){
  if (window.event) {
		e = window.event;
	}

  start_posX = e.screenX;
  start_posY = e.screenY;
}

function mouse_moved(e){
  return Math.abs(e.screenX - start_posX) > 10 || Math.abs(e.screenY - start_posY) > 10;
}

    Then I’ve registered it with startup():

    document.onmouseup = clicker;
document.onmousedown = start_clicker;

    Note that these two lines are supposed to replace document.onclick = clicker;!

    Then clicker() had to be adopted. Replace if (target.href != null || isParentOrSelf(target, 'controls')) return true; with if (target.href != null || mouse_moved(e) || isParentOrSelf(target, 'controls')) return true;

    Now a slide won’t react (move to the next slide) if the mouse was moved more than 10 pixels either horizontally or vertically while holding down a mouse-button.

    I’ve tested with Firefox and it seems to work.

  55. Trackback ::

    Penmachine words music comment

    Comments on Holy Grail of PowerPoint replacements
    I think of it two ways: the concept is the Holy Grail, even if the execution isn’t all the way there; and not having animations and in-slide actions isn’t so bad.

  56. looks very nice. maybe its a nice idea to work with

    and

    so you can hide the defenition descriptions in your slideshow where you can tell about them while you actually show them on the original website and the printer version. Users will have some more details about several stuff then handled in the presentation.

  57. Three things:

    • I have written a German tutorial for creating new S5-CSS-themes (raw styled, will be published with the known German S5-translation by Eric Eggert, soon). If anyone is able to do a better English translation than I could, you’re welcome!
    • I am with brian (comment #53), and onclick=”go()� would be the better solution than javascript:go() where accessability is concerned!
    • Great, Steffen (comment #54) did exactly the thing I was recently missing!

  58. brian (#53): Too much content is probably what made me see the scrollbar in IE6. I realised that when reading your comment on low resolution monitors. Seems like IE6 always makes room for the tallest slide.

  59. Re: “to keep things more consistent with OSF 1.0, I altered the S5 format to use h1 elements for slide titles, whereas before they were h2 elements.” I preferred the old way, so that there was a distinction between the title slide heading, and those of the rest of the slides.

    I don’t think you should be afraid of diverging from OSF where it can be improved.

  60. Trackback ::

    Penmachine words music comment

    More on replacing PowerPoint
    Some days ago I mentioned Eric Meyer’s browser-based PowerPoint replacement, called S5. Now there are additional slide themes, and ways to turn a regular weblog into an S5 presentation/slideshow.

  61. Nice job Eric, thanks. I used S5 for two conference presentations this week. One bug (feature gone wrong?), you convert all words in each slide’s title to caps. The implementation results in “you can’t do that in .local” being rendered as “You Can’T Do That In .Local”. Can we keep the “T” from being upper case? What about the “L”?

    Thanks, Daniel

  62. Daniel,

    You could get rid of that behavior by removing text-transform: capitalize; from pretty.css in the rule for .slide h1.

    regards

  63. I agree that this pretty.css entry:

    .slide h1 {
    text-transform: capitalize;
    }

    is an anti-feature. It seems to cause Safari to capitalize a letter following a single quote (can’T) and the capitalization is not always wanted.

    $.02

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview