S5 1.0

Published 20 years, 1 month past

Okay, folks, here it is: S5 version 1.0.  In addition to a few minor tweaks to make the system more robust, I’ve created a couple of themes to add to the ones Martin Hense created.  I have links to them all on the new S5 Themes page.  Share and enjoy.

One of the more notable tweaks is that the URL of slides.css is now read by the JS at document load, and used from then on.  Thus, you can point to a slides.css that’s in a different location than the rest of the UI files, if you so desire.  Another change is that the introductory slide show now contains some images, including one that maps out the file structure.  These were added so that new users would have some inkling of how to put images into a slide show.  There may of course be other ways of accomplishing the same task.

There were a number of good ideas and code contributions, but they were also too last-minute to be included in v1.0.  I’ll add them to a “to do” list for v1.1.  As to the suggestion that the project be moved to SourceForge, it’s certainly an idea I’ll explore further.  I don’t know enough about SF to know how such an arrangement would work; I only ever go to SF to download stuff, and find the site to be somewhat annoying in that it’s never immediately clear to me what I’m supposed to download, not to mention finding detailed information about whatever I’m downloading seems much harder than it should be.  For now, I’ll keep S5 local to meyerweb.  It can always be migrated over to SF later on, if that turns out to be a good idea.

There are still limitations in the system.  For example, if the slide show assumes 1024×768 and your window is 800×600, then you’re likely to have content cut off by the footer.  So edit the CSS to assume 800×600 (the easiest step is to lower the font-size of the body element).  Or set things up so that scrollbars will appear on the slide content if it overflows the slide.  You get the general idea, I think: this is very much a DIY-type system, at least for now.  The JS works, and the core styles help it work, in a cross-browser fashion.  Anything after that is up to the theme author.

There may one day be routines that automatically scale text, or dynamically break up slides, in order to solve the clipping problem.  There may also be features that let you trigger animations by hitting “next”, let you easily integrate SVG content, allow the use of the navigation menu in Opera Show, permit dynamic theme selection, and so on and so on.  For now, we have a good standards-based slide show system, one that should suffice for a great many people.

And my deepest thanks to all those people who have contributed, directly or otherwise, to S5, including those who made suggestions I haven’t yet folded into the system.  You have made, and will continue to make in the future, S5 better than I ever could have made it on my own.

Comments (38)

  1. Pingback ::

    snapping links » stuff

    […] he TI-34”: http://www.datamath.org/Sci/Modern/TI-34.htm (state of the art in 1987) S5 version 1.0 GWB as programming project leader –> Comme […]

  2. Pingback ::

    EXOTEC: Typo3 Templates | Typo3 Hosting | Webdesign | CSS Layouts

    […] s – S5 1.0 – Slide Show Eric hat eine JavascripsSlide Show entwickelt, die er jetzt zum Download bereitstellt. Kommentare –> Kommentare RSS […]

  3. Pingback ::

    CSS-Technik-News

    […] 19-10-2004 –>
    Bessere Pr

  4. Pingback ::

    Teuvo Väisänen homepage - Teuvo Väisänen a.k.a. Stedi » XHTML slide show

    […] i @ 3:38 pm Eric Meyer has released a XHTML, JavaScript and CSS based slide show. More info http://www.meyerweb.com/eric/thoughts/2004/10/18/ssup5sup-10/ –> Comments » No comments yet […]

  5. First of all, awesome job – it looks great and works great.

    Second, I think it’s better to keep the project info on your own site – SourceForge is perhaps a great way to manage OSS projects, but it is one of the most unusable websites I’ve ever encountered. Every time I find myself there wanting to download some software (or even learn more about it), I just get more lost and confused with every link I click.

    Third, I would suggest a direct link from the S5 project page to the themes page. As this project takes off (i.e. gets attention outside of web geek circles), I think a lot of people will want to choose other themes. In addition, you might consider beefing up the theme section. Perhaps a theme submission area, and even better, a theme collection site where visitors can learn more about each theme, see larger screenshots, and perhaps even rate/review themes. I suspect that once Doug Bowman and Dave Shea get back to the states, you might find yourself with a number of great-looking new themes and no place to really showcase them. ;)

  6. Thanks for making a great application available. I used the final candidate version for a presentation today, and it worked flawlessly.

  7. Hey, nice little tool.

    You might want to look at

    http://www.bluerobot.com/web/css/fouc.asp

    to fix the delay between page load and page styling. Its an easy addition and better than having to look at this unstyled stuff for some time.

  8. The flash of unstyled content doesn’t really bother me, so fixing it is low on my priority list. After all, in the vast majority of use cases, the presenter will load up the slide show, and then use it in front of an audience. The lag between content and styling is roughly analogous to the time spent launching Powerpoint and then invoking the show mode, to my mind. Except that the lag in S5 is much shorter than the time generally needed to launch Powerpoint.

    And I should point out that this happens in all browsers, not just IE, so it isn’t really the classic FOUC. It results from the system waiting until all document content is loaded before firing up the JS routines, one of which shifts the media value of the slideProj-ID’d link element from projection to screen. Assuming you aren’t using Opera, that is, in which case none of that will happen and you’ll have the outline view of the document until you hit F11.

  9. Nice. I have to go on translating :) It would be great if you could send me a raw file of the file structure image, for translation purpose.

  10. You might also be interested in SlideML, a pseudo-standard used in OSCOM presentations.

    In addition to being standards-compliant (layout with CSS, display with JS), it also supports converting the slideshows into static HTML (no JS required) via XSLT.

  11. Great work, this may prove useful in the future.

    Many thanks :

  12. This is awesome. I think with a few tweaks, it would be a great addition to websites as well. I manage a high school band site with slideshow-like picture presentations and S5 would be perfect for it. If there were a way to automate the slide advances (Just Push Play), it would be a huge bonus. Presently I use a Windows XP Powertoy – HTML Slideshow generator. It doesn’t create pretty code, or really ANY positive things but I simply direct the generator to a folder with pictures and it creates the entire thing. Despite ease of use (I have to create a new one every week during the 4 month band season), I now have a serious alternative.

  13. Nifty stuff.

    I thought that you’d like to know (if you didn’t already) that the X and Z keybindings seem broken with the Firefox nightlies.

    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.3) Gecko/20041014 Firefox/0.10

  14. Me and my friends been using the application for presentations in school, and we’re very pleased with the result. Thank you.
    Maybe now might be the time to add it to http://www.meyerweb.com/eric/tools/?

  15. Thanks, nice work!

    It doesn’t work right for me (on Windows) in

    • Mozilla 1.7.3: need to check that there ain’t too much text on a slide. If there’s too much text on a slide it will get hidden by the footer.
    • Internet Explorer 6: All slides are too high. Can’t use key down or page down buttons, since this will scroll the slide down instead of jumping to the next slide. Looks ugly too, when there’s too much content on a slide to fit on the screen.

    I will happily provide some screenshots if needed.

  16. This will definitely make the fellas at work stand up and go “wha?” when I do a presentation with this instead of Powerpoint. Thanks for doing everything you do, Eric!

  17. Moin,

    There’s still a really nasty bug that causes an endless loop on some presentations. In nodeValue() (and in some other places) there is a loop for(i=0; ... which makes i a global variable. In the body of that loop the function nodeValue() is called again and some new invocations (those where node.nodeType == 1) reset i to zero, resulting in an endless loop. (In C one would probably say that the function is not re-entrant.)

    Solution: Replace every occurence of for(x ... (with arbitrary values of x) with for(var x .... This should have no side effects as one rarely needs to have the variable for counts on to be global.

    —
    Henryk Pl

  18. It would be nice to see an “end slide” which does not allow the action of going to the first slide so that people know the slide show is done. In Powerpoint this is the black screen with a little bit of text at the top.

  19. S5 is really great, I think I will use it for all my future presentations. I am developing a PHP editor to generate S5 presentations.

    But I have a problem with XHTML validation : I tried to validate s5 demo with the w3c xhtml validator which claim that no charset can be found in the document…

    This is not a critical issue but I wanted to submit it.

    Sorry for my not so good english and thank you for making the web a better place to surf.

  20. Until now i use the Javascript Image Gallery, but there are problems if you have a long list.

    Nice work, Eric!

    I try it on my website but the loadingtime is long if there are many images on one page.

  21. This is simply a wonderful system!

    So much so that I allowed myself to translate the introductory slide show in French (files are available here). Please note, however, that the images are not yet translated, and that this copy still needs some proof-reading, so feedback is welcome and adjustments will occur during the next days.

    If there is interest for this, I could also translate the documentation (if Mr. Meyer allows this), and of course Mr. Meyer is welcome to host a local copy of the translation on his site if he wishes to do so!

  22. FYI: Doesn’t work in Konqueror 3.3 . I haven’t an idea why — I know nothing of JS — but they are receptive to bug reports

  23. This is amazing. I work in educational technology, and my head is counting up all the potential ways to uses this, both explored and unexpected. My high school is a public non-traditional one and we look for innovative ways for students to demonstate subject mastery, and this would be a wonderful way for students to present their culminating projects virutally to a committee that might be drawn throughout Colorado.

    I am not much on the web beyond surfing it, but I did buy one of your books and am dutifully struggling through it. Looking forward to watching this evolve into amazing directions and uses.

    Well done!

  24. Trackback ::

    clurrcache online

    Presenting with Standards

    Putting slides online used to require that everyone had a certain piece of proprietary software installed in order to be able to view them. Or that you had to generate some interesting HTML as generated by the afore (non)mentioned product to allow t…

  25. Trackback ::

    WebGate log

    S5 1.0 : Standards Web et présentation
    Eric Meyer a développé un système de présentation S5 version 1.0 basé sur les standards Web (CSS et javascript). Les présentations sont personnalisables et certains thèmes sont déjà disponibles ….

  26. What a nice presentation system! Thank you so much for making this available. I have to make a presentation at a job interview in the next few days, and S5 will work perfectly.

    Nice job Eric!

  27. Two items:

    1. Safari gets confused if the presentation is more than about 15 or 16 slides; I’m convinced it’s a Safari bug, because the same slideshow works just fine in Firefox.
    2. I’ve < href="http://www.ibiblio.org/mcmahon/s5-iBook/index.html">tweaked all of the contributed themes to work a little nicer on a 12″ iBook.

    I’m using it for a presentation this week as well; it’s just a lot easier than Powerpoint or Keynote to get exactly what I want on the page and have it look nice. (By the way: International is missing the ile, which causes it to not load – I had a moderate amount of headscratching before I figured that out!)

  28. Joe: I’m pretty sure it isn’t a bug in Safari. Two weeeks ago, at UI9, I ran a 56-slide S5 presentation in Safari and had no trouble. I just re-checked the presentation file, and still had no problems. The only technical difference between my presentation file and yours is that mine validated. Yours has a rather large collection of errors. Once those errors are corrected, if Safari still has the problem, then it may be a Safari problem, or it could as well be something in the JavaScript. But until then, it’s difficult to say one way or the other.

  29. I’ve just finished “adapting” S5 to my high school marching band site. I’m using it as a photo album slideshow. I loved how easy it was to transform into a slideshow template. I basically created an S5 generator in php such that it is passed a title, directory (and date in my case) with which it searches the directory for jpg’s to populate the slide show. However, due to the number of images, the FOUC is more than an annoyance. To users on dial-up, it could take minutes, rather than seconds, to load as it must wait on each image (into the 100’s for some albums). I don’t want to go tinkering with the js TOO much (I’m fearful of breaking it) so if anyone has taken the time to fix this, I sure would appreciate it. Thanks,

  30. I made a presentation (on “installing firefox”) with the S5 system, and found something interesting. On IE the presentations plays smoothly, but on Firefox it seems to causes Firefox to use a lot of CPU, especially when switching between slides.

    here’s the link: http://pryan.org/firefox/jayfromtaiwan/presentations/firefoxinstall/s5-blank.html *warning* it’s in chinese

    Any ideas?

  31. (just wanna add something more)

    On Firefox the speed is acceptable, it’s just that it causes Firefox to use a lot of CPU

    Beside that, this software is really really good, thanks for freeing us from Powerpoint ;)

  32. Trackback ::

    Oren Sreebny's Weblog

    S5 – at last, a good web-based presentation package
    Last week for my presentation on Chandler and the CSG at Educause 2004 I used Eric Meyer’s S5 package instead of Powerpoint for the first time. It worked like a charm! In case you’re wondering, S5 stands for the “simple standards-based slide show sy…

  33. You are a lovely man :)))

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

  35. Trackback ::

    matthewdennis.com

    Catching Up
    After recent neglect, I’m making an effort to catch up on my web surfing. Eric Meyer has released S5, a new system for using CSS to create slideshow presentations for web browsers. This could prove quite useful the next time…

  36. Great job.
    You’re an inspiration for Web standards.

    Only, if I print (with IE6) S5 1.0 Reference, a part of the text is missing. It looks like it’s moved over the left edge of the page.

    Still, a great job :)

  37. Eric, you are absolutely right (and I get what I deserve for not editing my XHTML in a real XML editor!). I’ve fixed all my XML validation errors and Safari now reads the presentation flawlessly.

    Firefox was more forgiving about the errors, so i was able to use the presentation I had, but this is better. Thanks for the pointer!

  38. It would be great if there was a “splashing page” to the start…. loading the content in background, then showing first page of the slide show …
    Now I get a header and a footer with a blank space in the between …
    thanks for your app Meyer, I love it.

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