~~SLIDESHOW~~
Rather than make a set of notes, I thought I would make this session an interactive showcase, or road-map, of some of the best resources on HTML5 in the hope that this will be a useful starting point for your own explorations. The main starting points for this exploration are:
Full references at the end of the document.
Some notes used in this presentation are based on Simon Allerdice, JavaScript Essential Training, Chapter 12, Lynda.com online course, URL: http://www.lynda.com/JavaScript-tutorials/Essential-Training-2011/81266-2.html and Joe Marini, HTML5: Web Forms in Depth, Lynda.com online course, URL: http://www.lynda.com/HTML-5-tutorials/HTML5-Web-Forms-in-Depth/80852-2.html.
We won't get through all this in a single contact hour, but please take some time to explore!
Selected articles from HTML5 Doctor
See the Article Archive for possible additions.
HTML5 doctor is a very large and growing resource and it contains a lot of information about HTML5, CSS3 and the JavaScript APIs. It also includes a useful HTML5 Element Index and a showcase of HTML5 sites.
This section of the road-map is based on Mark Pilgrim's Dive Into HTML5. The links are to the relevant chapters in that book and each section deserves careful study. The order is mine, and differs from the book.
Slides and Demos from HTML5 Rocks
Supporting Video
HTML5 the How and the Wow
Presentation by Eric Bidelman and Arne Roomann-Kurrik at the Google Developer's Conference GoogleIO 2011. <html><iframe width=“560” height=“315” src=“http://www.youtube.com/embed/WlwY6_W4VG8” frameborder=“0” allowfullscreen></iframe></html>
These Aren't the Sites You're Looking For: Building Modern Web Applications
Presentation by Eric Bidelman at Google Developer Day, Tokyo 2011.
<html><iframe width=“560” height=“315” src=“http://www.youtube.com/embed/HudotXvB9Ro” frameborder=“0” allowfullscreen></iframe></html>
Context: HTML5 is a large standard, it has lots of “moving parts” and browser developers are implementing these to their own timetable and with their own priorities for what they see as their customer's needs, wants and market opportunities.
This means that features that you want to use may be:
Some features will fall-back to a useable feature:
<input type=“text” />
You can write your own implementation
Some features can be implemented in JavaScript using “polyfills” (named after Polyfilla)
When can I use... is an on-line web resource that tracks the implementation of the new features of HTML5, JavaScript and CSS3 in browsers.
Dive Into HTML5 has a whole chapter (Detecting HTML5 Features) on how to do this as well as an appendix (The All-In-One, Almost-Alphabetical, No-Bullsh** Guide to Detecting Everything that summarizes the method.
Modernizr.load()
) that can automatically load polyfills for missing features.Polyfills are simply JavaScripts or, for more complex features, collections of HTML/CSS/Images and JavaScript that implement a missing feature.
For this simple example, we want to implement a number field with a starting value, maximum value and a range.
<form id="myForm" action="" method="post"> <label for="selection">Pick a number</label> <input type="number" min="0" max="10" step="1" value="5"/> <input type="submit" value="Go"> </form>
We didn't get through all this, but please do take some time to explore!
AJAX