JQuery 1.4 (HTML5 Presentation)

http://ihumanable.com/jquery/presentation.html

by ihumanable • 16 years ago

92 33 16 years ago

FluidDjango2• 16 years ago

I guess what is supposed to be most striking is the horizontal slide show at [EDIT: that did not originally show for me in Safari 4.0.5]:

http://apirocks.com/html5/html5.html

Which didn't seem remarkable till around slide #31:

http://apirocks.com/html5/html5.html#slide31

- whose css-controlled number of columns ( -webkit-column-count: 3; ) I had never seen before.

EDIT: For real usability a TOC of the numerous slides + info on cross-browser testing would have added huge value.

quellhorst• 16 years ago

In Safari I'm unable to advance to a new slide.

ytNumbers• 16 years ago

Only the first slide was visible when viewed in Firefox 3.6.3 and Chrome 4.1... It's Hard to believe that something so unviewable made it to the front page of HN.

ihumanable2• 16 years ago

You have to push the right arrow key, it's a slide show. Sorry for not having better instructions, it's based off of the http://apirocks.com/html5/html5.html#slide1 presentation. The reason mouse clicks can't be used is because that would interfere with the JavaScript examples later on in the presentation.

FluidDjango2• 16 years ago

Impressive work, Matthew! And I'm pleased it led me to your "Prosper" db front-end: looking forward to following its development. ...and to your use of "unlicense'd" (did i get right number/type of quotes?).

va_coder• 16 years ago

checkout the clean html source code.

RyanMcGreal• 16 years ago

HTML Tidy finds 21 errors and 3 warnings.

I like Eric Meyer's S5 template for clean markup and slick interface: http://meyerweb.com/eric/tools/s5/

mcav• 16 years ago

Tip: use left/right arrow keys to move

boucher• 16 years ago

Less like a tip, more like a requirement. Clicking to advance didn't work for me. :(

Sidnicious• 16 years ago

Tip: Mobile devices may not have arrow keys. Making your website require them is not a great idea.

todd3834• 16 years ago

On the iPhone/iPad I found you can navigate the slides by one quick slide left or right.

joubert3• 16 years ago

slide 10+ have their content missing

mgcross• 16 years ago

are you viewing in FF? I am and noticed some of the logos aren't displaying - but they do in Chrome. Nice presentation, but "HTML5" shouldn't mean "webkit only".

joubert3• 16 years ago

Safari

joubert3• 16 years ago

doesn't solve fundamental powerpointitis problem

KTamas• 16 years ago

Great stuff. I forked it on GitHub and added support for [tab] cause it messed up the whole thing. Now it advances to the next slide.

p858snake2• 16 years ago

Linkage would be nice, So we can all marvel in the wonderful stuff being done with this.

mgrouchy• 16 years ago

I thought the most impressive part about the html5 presentation wasn't necessarily the fact that it was HTML5. Its the fact that you can show working examples directly on the slide, they aren't simulated, they are just working javascript.

messel• 16 years ago

That didn't sink in for me right away. I was like whoa, this is all live javascript how the heck is Matt Nowack pulling this off in something like slideshare/etc. Then it clicked.

Very cool stuff.

calebgilbert• 16 years ago

Tried it in FF 3.6.3 and safari - no arrows, can't advance anywhere.

jister• 16 years ago

did too and was lost because I don't know where to click. not "human" friendly.

theycallmemorty• 16 years ago

I had no idea John Resig is so young! I was picturing a gandalf-like grey-beard who had been coding JS since before the internet. :P

Kilimanjaro• 16 years ago

Using the scroll wheel would be a nice touch:

  window.addEventListener("DOMMouseScroll",onwheel,false);

  function onwheel(event){
    var delta = -event.detail/3;
    if(delta>0){prevSlide();}
    else if(delta<0){nextSlide();}
    event.preventDefault();
    event.returnValue = false;
  }

amalcon• 16 years ago

I saw pretty crazy behavior regarding the back button, at least in FF 3.5.9. It put many elements in my history, none of which actually took me anywhere.

jackfoxy• 16 years ago

I'm sure this is an interesting presentation for me, but I've tried the latest versions of IE, FireFox, and Chrome, and at best I get an overly kludgy interface.

Please repost in some better format. Thanks

lhorie• 16 years ago

Quick thoughts: - Graceful degradation in HTML5 demos in general could definitely use some love - if you use a non-bleeding-edge Gecko-based browser (e.g. Flock), you get no functionality and no errors. Also, if your intended target audience is webdevs, why in the world would you require them to install chrome frame in IE? Just leave the first slide as is and we'll get it.

- Content nitpit: the slide about live() says "Efficient and concise way to provide client-side interaction". AFAIK, live events are slower than regular events, so calling them efficient seems wrong.

ethan• 16 years ago

Browser Back/Forward buttons do nothing, scrollwheel does nothing, no overview/clickable index of links, annoying to scan...powerpoint is the future of webdev?

julio_the_squid2• 16 years ago

Some good examples there, but in all it's rather brief. Surely there's more to jQuery 1.4?

I'm getting quite weary of hearing that this or that is HTML5, and then you view it and there's really nothing in particular that you couldn't do with HTML 4.1. Is there something special and brand new about showing a set of slides with Javascript with a poor interface? With all of this hype and mislabeling, average semi-technical people are becoming confused from here to Zaire about HTML5. The comments on say, TechCrunch prove this thoroughly every time the topic is mentioned.

mbrubeck• 16 years ago

Interestingly it does use "section" and "header" elements, which are basically invisible to users but are also among the few "HTML5" features that actually fit the name.

julio_the_squid2• 16 years ago

Yeah, I saw it uses a few new elements. Still, you could accomplish the same effect without them, right? So it doesn't really require HTML5?

3dFlatLander• 16 years ago

It would be a nice accessibility feature to make it scale a bit better for browser zoom functions.

p858snake2• 16 years ago

Would be nice to have a small menu in a corner or a custom right click context menu which has "Jump To/Previous/Next" type options.

Also a option for it to full the whole screen area would be awesome.

JQuery 1.4 (HTML5 Presentation)

Related Stories