Presentation Slides with DOM and CSS
Eric Meyer’s S5 standards based presentation slides system is used quite a lot by webstandardismos for their presentations.
However, some of its functionality is great for presenters but can be quite hard to follow for web surfers who just want to see what someone has presented.
My personal challenge was to come up with something that is as cool as Eric’s system, but much easier to use and more lightweight when it comes to creating your own slides.
The outcome is called DOMSlides and is licensed under Creative Commons for you to use, change and copy.
Any feedback, testing on Macs and own style sheets to bundle with the script are welcome.
July 19th, 2005 at 3:21 am
Looks nice and it’s very neat for the web user. I’d like to be able to be able to toggle between the slide mode and the linear page though.
Feedback from a presenter’s perspective… it needs simple keyboard controls for use during the show (you need to be able to hit a key almost without looking); the spacebar would be ideal to move forward and I don’t know many users that actually use the spacebar while browsing. Those that do expect the next ‘page’ anyway so it would be pretty consistent with the expected result. Same goes for PageUp and PageDown.
S5 allows you to embed speaker notes as well; although I am guessing DOMslides could do that as well with a CSS class.
A big plus for DOMslides is the lower file size; plus after a quick experiment I note that the basic slideshow can be combined into one single file. Obviously graphics remain external; but for a plain look this would allow people to – for example – email the single file to someone for them to have a look. They could also store the file as a self-contained item in a repository or whatever.
One issue I found was that the TOC didn’t cope with a long presentation – it eventually ran out of room and didn’t scroll. I suspect this is why S5 uses a dropdown menu.
Also, multiple slides with the same title are a problem – adding the slide number to the TOC would be a big help.
Anyways, nice work and I hope my feedback is useful :)
July 19th, 2005 at 4:13 am
Quick followup… I referred to the need for keyboard shortcuts; I should mentioned I tested in Opera 8.01 and Firefox 1.0.5.
I did get the shortcuts to work briefly in Firefox, but it looks like they stop working if you move focus to another window and then come back. Otherwise, the shortcuts didn’t work.
July 19th, 2005 at 6:39 am
That could be an easy link to add, it is creative commons after all :-)
Well, without hijacking the normal keyboard behaviour, this seems impossible. Eric’s system is more Powerpoint/Keynote, this one tries to be a compromise.
Actually that was done on purpose, and is explained in the slides – multiple slides with the same title are collated to one TOC item, as it is a TOC, not a list of all the slides.
I was very puzzled by that aswell, and asked the list for help. It really seems it is a Firefox bug: Related The List thread
July 19th, 2005 at 7:15 am
I think it is very easy to add some keybord navigation, I were trying to made something very simple here http://xy.wz.cz/prezentace.html It use arrow key to next previous and start. My version is realy just experiment, but keybord navigation is I thing comfortable. Your slideshow with TOC and numbering is 1000 times much more better :-) I hope, that I will be sometimes able to learn how to script such great things.
July 21st, 2005 at 12:52 am
S3 is better since it is compatible with Opera show.
Edit when did it lose two points? scnr.
July 23rd, 2005 at 1:55 am
Very nice!
In case someone is keeping a list of HTML slideshow systems, here is the W3C’s own Slidy: http://www.w3.org/Talks/Tools/Slidy/
August 26th, 2005 at 7:54 pm
I just writing a little help to go with the CMS for my customers, but I miss numbered lists. A class didn’t change the ol-Tag to behave as usual. I’m not much of javascript programmer so I couldn’t figure out yet how to enable bullets and numbered lists. Could you just give a hint, please?
November 17th, 2006 at 1:53 pm
Hey, I’m a bit slow on this one i know… Very nice and the way you have explained it is very helpful. I have a quick, possibly very stupid question though – um, how do you link to a specific section in the presentation document from another html document?
The answer is something with the var cid i think, but i don’t get it.
Care to englighten?
Thank you for a great article/explanation.
October 19th, 2007 at 5:59 pm
I’m actually making some changes in this presentation tool, are you interesting to get it and what license must I use ?
October 25th, 2009 at 2:03 am
hello,
i just came across domslides. interesting. looks nice. and thanks for publishing it. i’ve used it only for a few minutes so far, but i’ve come across two issues: [a] it looks like the keyboard accessibility depends on keeping the focus on an invisible dropdown. as soon as i press tab, i lose the focus and the keys no longer work. to me this is a major problem. [b] i tried to put an ordered list in a slide (..) and the numbers don’t render. i haven’t yet investigated why (using firefox 3.5). separately, using the web for producing slides is not pallatable to me because you have to hand-edit the tags. i’d rather a system that allowed markdown inside each slide div. i plan to use domslides together with a parser that does just that. i’ll let you know how that works out..