Blog RSS Feed Subscribe

Jordi Boggiano

Jordi Boggiano Passionate web developer, specialized in web performance and php. Partner at Nelmio, information junkie and speaker.

Categories

Introducing Slippy - HTML Presentations

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser.

It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it's just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, it can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.

You can find the sources on github, view the example slide deck which includes some documentation or view the slides for the small talk I gave today about Javascript Events on my Slippy slide repository.

Obviously feedback is very much welcome and even though it's not perfect yet, I hope it'll be useful to others. More docs and styling fixes (the dark grey background wasn't too visible on a projector, my bad) should come soon as I have more talks planned, and the slide repository page will receive some love as well when I have time.

June 03, 2010 // News, PHP, JavaScript

Post a comment:


Formatting: you may use [code php] [/code] (or other languages) for code blocks, links are automatically linked. <strong>, <em> and <blockquote> html tags are allowed without nesting, the rest will be escaped.

Subscribe to this RSS Feed Comments

2010-06-03 20:15:17

lejoe

Great! I like it! The html looks nice.
The obviously you didn't listen to my techtalk about progressive enhancement coz without JS it blows to your face. But I won't blame you too much as in this case it's less important.

What do you need the 'slideDisplay' div for? coz there it could be nice to not have it when there is no CSS.
Another improvement would be a print style. That's a fairly common use case I'd say and quite quick win.

2010-06-03 20:41:13

Seldaek

@lejoe: Thanks:) Indeed progressive enhancement wasn't the first of my concerns here, I mostly want it to play for me so I can do my talk, then it's good if other people can view it, but a version without js would be something completely different. slideDisplay is added at runtime, it displays the current slide/total slides in the top right corner, I don't really get your point about having no CSS. As for the print style, there is one but it craps itself a bit, I still need to tweak it.

2010-06-03 21:22:19

Bill

very nice. thanks for sharing.

2010-06-03 21:25:10

akonan

Very nice! You need some other way also to navigate since double click didn't work on iPhone

2010-06-03 21:30:38

Seldaek

@akonan: Woops, I didn't consider smartphones yet, but you're right it needs some graphical controls for touch devices.

2010-06-03 22:20:34

Ronald

It's very nice indeed, had any issue with the overview, it forces me to pick a slide to get out of the overview mode. It would be nice to escape the overview mode without make a selecting and going back to the orginating slide. anyway it's still a great tool though with a lot of pontential.

2010-06-03 22:29:58

Eric Meyer

Very nice! If you're interested in an example of print styling for slide shows, I built one into S5 (http://meyerweb.com/eric/tools/s5/) back when I created it.

I like that your markup is largely compatible with S5, which is itself compatible with OperaShow for historical reasons, but I'm wondering if you require 'div' elements for the slides or if you can put the whole thing into, say, an ordered list (with each 'li' classed 'slide') and still have it work.

2010-06-04 02:04:39

Marichyasana

Tried it on the iPad, can't figure out how to advance to next frame etc.

2010-06-04 02:55:46

bendlas

Nice!
Would be cool if you hacked in some smartphone support
Ie adaptable screen ratio, switch by click, maybe even some webkit touch magic
Cheers

2010-06-04 18:06:51

Bluehound

Very nice. Just wanted to let you know it does not work in Chrome. Firefox was fine.

2010-06-04 19:53:29

Lee Graham

Wicked! Works great on my computer, just not so much on my Nexus One. Perhaps a mobile version?

2010-06-04 23:25:32

Seldaek

@Ronald: Very good point, I'll definitely address that.

@Eric Meyer: Should work, since it just uses classes.. but li aren't block elements so it might need that added to the css. As for the print view, I'll try to have a look.

@Marichyasana / @bendlas / @Lee Graham: I'll work on that, many people reported issues, and I indeed didn't try it on smartphones/touch devices yet.

@Bluehound: Now that is strange, I had the best results here in Chrome, while all other browsers worked but just not as fast. What versions are you using?

To everyone, thanks for the feedback, I'll try to get some stuff fixed in the next days/weeks, but this week-end I am just booked with other things so please bear with me. Also github forks and patches are very much welcome ;)

2010-06-05 00:58:23

SFdude

Nice, but the "execute" link is not working,
in your example:
"Javascript Events on my Slippy slide repository".

Firefox 3.6.3 under XP-PRO SP3.

2010-06-07 08:52:11

PaulG

Chrome 5.0.375 on win32 it works just fine ;)

Glad Mr Meyer showed up, this reminds me very much of S5.

BTW, music lover.. Slippy? From Born Slippy by Underworld by any chance?

http://www.youtube.com/watch?v=TlLWFa1b1Bc

2010-06-07 09:27:14

Seldaek

@PaulG / @Eric Meyer: On a second thought (busy weekend), it is indeed very close to S5.. I guess good standard just make sense. I'll try to look into that some more and tweak things to make it more compatible. As for the name, nope, no relation to Underworld's song, I can't say I have a really meaningful explanation for it though :)

2010-06-07 18:56:36

Comtom

Really cool stuff!
I wonder.. is there a way to fit the slides to the width or height of the screen? i'm running my desktop at 1920x1200 resolution, and your demo presentation looks a bit small.

I would love to see that implemented :D
GZ anyway!

2010-06-09 11:07:15

cypherpunk

Great job. I'm going to use this for my next presentation.

2010-06-09 20:30:53

Seldaek

If you use it for a talk or do some cool stuff with it feel free to mail me about (see About page) it I'm always curious to see.

For example some guy built a WordPress theme that somehow renders posts or I don't know what into a Slippy presentation. I haven't seen it live so not sure what it does but it's nice to know other people find interesting ways to use it.

2010-06-10 23:29:34

Nabia

i wanna join on Blog Marks plz send me invitation on my email address at anjana_sawal@yahoo.com
thx n regards,
Nabia

2010-06-13 10:26:19

acecream

Very nice! The only little downside is that print is not working - it would be neat if it would be possible to make a pdf of presentation simply by using the standard browser print.

2010-06-22 12:10:45

Dickson Ding

Very nice work, it even handle Backspace key which default action was back to previous page...

nice work...

2010-06-27 10:26:27

tempobamako

Hello,
I write a short article in french about your product on my blog : http://www.tempo-bamako.ch. The article about slippy will be published on 28th june 2010.
Best regards.
Jean.

2010-06-28 09:55:26

Adrian

Impressive.

2010-07-19 15:11:50

lejoe

just saw some démo by Paul rouget about html5 possibilities in firefox and loved his css3 animations in his html5 presentation.

Could give you some great ideas for fancy-ing up the display for competent browsers: http://youtu.be/-BsB0HpS768

2010-07-24 22:38:12

عبدالفباح

اكون صديق فى الموقع

2010-07-24 22:41:22

Aado

اكون صضيق بنات

2010-08-07 17:22:39

lejoe

update on my last comment, Paul actually published his 'framework' to do those one webpage slides: http://paulrouget.com/dzslides/

2010-08-07 19:09:04

Jón Trausti

Hi Seld.

I love your project Slippy. This gave me some innovative ideas about the future of website navigation. Making a website act more like a desktop, e.g. navigating to main pages of a website via the arrows keys. Kind of like MacOS desktop navigation.

I'll make sure to show you the site if I decide to do it :-)

2010-09-27 19:08:33

Keith

Works great! Was wanting to use this to do flash-cards for my kids.

Wondering how to get it to work on iphone though. I've seen other similar example like this one "http://studio.html5rocks.com/#Deck" that work on iphone by swiping finger left or right. But I want to something that uses jquery. Can Slippy work with gestures or some other iphone friendly method?

Thanks,

2010-09-27 23:16:57

Seldaek

@Keith: Well it's definitely doable, but I didn't take the time to fix it yet, there is some code in slippy-0.9.0.js at the end of the file but it's slightly broken. If you like to try and fix it it'd be great.

[1] - 2 Next Last page