Everything You Always Wanted to Know About HTML5 …

Tweet

So CSS3 lets you have rounded corners, and HTML5 gives you <header> and <footer> elements. Big whoop. Sometimes it can be hard to get excited about what’s being added to the core web technologies, but Ernest Delgado is here to change that.

He’s made a slideshow of all the new features in HTML5 (and, playing fast and loose with nomenclature, he takes that term to include CSS 3 and the new JavaScript API features). And boy, if this doesn’t get you fired up about the future of the Web, nothing will. The slideshow itself is a web page built with all the technologies it’s discussing, allowing examples to be embedded right in the slides. It was developed with Chrome in mind, so many of the demoed features still don’t work in Firefox, but more than a few do. Even with Chrome, some of the examples won’t work unless you enable some experimental features, as Ernest explains in the slideshow’s disclaimer.

There’s client-side storage, geolocation, new form input types, and fan favorites like @font-face and canvas. But that’s not even half of it. Ernest has done an amazing job of clearly explaining all these cool little tidbits with sample code and working examples. You owe it to yourself to check it out, have a play with all the features, and start dreaming about the day when they’re all well supported. To make it even easier to tinker with, the slideshow is hosted as a code repository on Google Code, so you can dive right in and start playing.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • tiggsy

    I’m using Ubuntu linux (KK) and I can’t get the slideshow past the first screen, as the button doesn’t do anything in firefox. I installed chrome, but it doesn’t do anything in that either. I could not find an option to set the stuff mentioned in your disclaimer in chrome.

  • http://www.toddish.co.uk MunkyDesigns

    it’s not a button, try pressing right on your keyboard. Also, to set the options, right click on your chrome shortcut, select properties, and paste them into the target field after the link there.

  • Louis Simoneau

    @tiggsy: It’s not a button, it’s telling you to press the right arrow key. I’m on Ubuntu FireFox, and it works fine.

  • http://cfajohnson.com cfaj

    In FF3.6.3, the page gradually move to the left, and by the end of the slideshow, the entire thing has disappeared off the screen.

  • Anonymous

    nice n fluffy dreams indeed….
    in the real world there is a necessary question though:
    cross-browser implementation?

  • http://www.idude.net iDude

    I’m glad somebody posted a comment about using the Arrow Keys on the keyboard. The first slide appears as such..

    Press (image of blank white button) key to advance.

    using Google Chrome (version 4.1.249.1045)

    However in Opera/10.5, Firefox/3.6.3 and Safari/4.0.4 the right arrow -> appears inside of the white button. This is so encouraging for us web developers, at least the standard for things working great in all but one of the major browsers is being upheld. Welcome to version 5 of HTMhell. I’m glad somebody made the post about using the arrow keys. I was sitting here trying to figure out what the (blank key) was all about, it clearly was not the proverbial any key. I was hitting the Enter Key, the Space Bar and started to simply run my fingers across the keyboard. Anyways, the slideshow really does work with Chrome. Thanks MunkyDesigns