meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

S5 1.0

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.

38 Responses»

    • #1
    • Pingback
    • Mon 18 Oct 2004
    • 2156
    Received from 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
    • Tue 19 Oct 2004
    • 0906
    Received from 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
    • Tue 19 Oct 2004
    • 1202
    Received from CSS-Technik-News

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

    • #4
    • Pingback
    • Thu 21 Oct 2004
    • 1338
    Received from 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
    • Comment
    • Mon 18 Oct 2004
    • 1345
    Ste Grainer wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 1351
    Roger Johansson wrote in to say...

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

    • #7
    • Comment
    • Mon 18 Oct 2004
    • 1412
    Thomas Heller wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 1420
    Eric wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 1437
    Eric Eggert wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 1440
    Henri Bergius wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 1629
    Neil Merton wrote in to say...

    Great work, this may prove useful in the future.

    Many thanks :

    • #12
    • Comment
    • Mon 18 Oct 2004
    • 1924
    Jason Karns wrote in to say...

    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
    • Comment
    • Mon 18 Oct 2004
    • 2051
    Axord wrote in to say...

    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
    • Comment
    • Tue 19 Oct 2004
    • 0159
    Carl M wrote in to say...

    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
    • Comment
    • Tue 19 Oct 2004
    • 0239
    Oliver wrote in to say...

    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
    • Comment
    • Tue 19 Oct 2004
    • 1338
    will wrote in to say...

    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
    • Comment
    • Tue 19 Oct 2004
    • 1845
    Henryk Pl wrote in to say...

    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
    • Comment
    • Tue 19 Oct 2004
    • 1918
    Paul Armstrong wrote in to say...

    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
    • Comment
    • Wed 20 Oct 2004
    • 0954
    ZeFredz wrote in to say...

    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
    • Comment
    • Wed 20 Oct 2004
    • 1045
    Mario De Zutter wrote in to say...

    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
    • Comment
    • Wed 20 Oct 2004
    • 1113
    Serge K. Keller wrote in to say...

    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
    • Comment
    • Wed 20 Oct 2004
    • 1621
    Joseph Reagle wrote in to say...

    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
    • Comment
    • Wed 20 Oct 2004
    • 2326
    Penny wrote in to say...

    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
    • Fri 22 Oct 2004
    • 0700
    Received from 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
    • Fri 22 Oct 2004
    • 1806
    Received from 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
    • Comment
    • Sun 24 Oct 2004
    • 1804
    Jonathan Bloy wrote in to say...

    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
    • Comment
    • Sun 24 Oct 2004
    • 2001
    Joe McMahon wrote in to say...

    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
    • Comment
    • Mon 25 Oct 2004
    • 1105
    Eric wrote in to say...

    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
    • Comment
    • Mon 25 Oct 2004
    • 2035
    Jason Karns wrote in to say...

    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
    • Comment
    • Mon 25 Oct 2004
    • 2335
    jayfromtaiwan wrote in to say...

    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
    • Comment
    • Mon 25 Oct 2004
    • 2338
    jayfromtaiwan wrote in to say...

    (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
    • Tue 26 Oct 2004
    • 0042
    Received from 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
    • Comment
    • Tue 26 Oct 2004
    • 1107
    Junk Monkey wrote in to say...

    You are a lovely man :)))

    • #34
    • Trackback
    • Tue 26 Oct 2004
    • 1130
    Received from 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
    • Tue 26 Oct 2004
    • 2050
    Received from 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
    • Comment
    • Fri 29 Oct 2004
    • 0453
    Ton v. Lankveld wrote in to say...

    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
    • Comment
    • Fri 29 Oct 2004
    • 1608
    Joe McMahon wrote in to say...

    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
    • Comment
    • Tue 18 Jan 2005
    • 1006
    trifide wrote in to say...

    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.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


October 2004
SMTWTFS
September November
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Sidestep

Feeds

Extras