Saturday, April 17th, 2010

The Best HTML5 Slides Ever

Category: CSS, HTML, JavaScript, Presentation

<p>csstransformsslide

@edr is the man. He did amazing things at Yahoo! and now at his new role at Google he continues in the same vein. This time he has created the coolest set of HTML5 slides ever, using the technology inline.

Take a walk through the woods and learn about all things HTML5. Starting with the JS APIS (selector API, storage, appcache, web workers, web sockets, notifications, drag and drop, and geolocation).

Then delve into the new HTML semantic tags, link relations, micro data, ARIA, forms, audio and video, Canvas, and WebGL.

Finally, the holy trinity finishes with CSS and selectors, fonts, text, columns, stroking, opacity, HSL, rounded corners, gradients, shadows, backgrounds, transitions, transforms, and animations.

Top draw Ernest. Top draw (he based his work on a presentation from Marcin Wichary).

Related Content:

Posted by Dion Almaer at 8:38 am
8 Comments

++++-
4.3 rating from 51 votes

8 Comments »

Comments feed TrackBack URI

Many kudos to Marcin Wichary who made the original design and came up with the brilliant idea of adding sliders to the CSS samples.

Comment by ernestdelgado — April 17, 2010

Some big issues (atleast in FF):

* It asks to store data on my computer, I need to know what/why/how much to say yes/no to that.

* No mouse-controls whatsoever. How do i flip/scroll/whatever among the slides?

* No contents list or shortcut to slides.

* No meta information at all, such as how long the slideshow is or what page i am on. Is there 5 pages left or 500? i would like to know before i start.

The information is interesting, but the way it is presented really blows.

Sorry, but HTML5 or not, but basic functionality rules.

Comment by MatsSvensson — April 18, 2010

The advice in the slides to use chrome frame to support IE is true in principle, but isn’t going to fly in real life. If alternative browsers were “acceptable” to the corporate admins, they would have already switched people over. Firefox + IEtab can reasonably approximate IE + chrome frame. The admins aren’t supporting this because they want full control of updates (which means hooking into the standard update distribution mechanisms of windows), and full configurability and lockdown controls via policies. No browser offers that except for IE, as far as I know, and aside from firefox nobody’s even showing an interest in supporting such a scenario.

Comment by Joeri — April 18, 2010

Maybe I’m just a DFU but it took me like 10 minutes to realize that “Press ? to advance” referred to the keyboard, not clicking on the screen. :/

Comment by AMA3 — April 18, 2010

Forget all the UI issues–those can be fixed up. The content is what was impressive to me. Nice compilation of stuff I’ve seen scattered all over the web and even some things I hadn’t seen yet.

Comment by gancelot — April 19, 2010

It’s more of a presentation of WebKit than HTML5.

Comment by MattCoz — April 19, 2010

For those who are trying in firefox you can download the 3.7 alpha version to see more features like transitions and gradients working.

We are actively fixing issues developers are reporting to the public repository http://code.google.com/p/html5-slides/

Comment by ernestdelgado — April 21, 2010

I think it’s really inspirational…

Comment by kristelvdakker — April 26, 2010

Leave a comment

You must be logged in to post a comment.