Table of Contents
~~SLIDESHOW~~
The Rest of HTML5
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.
Recommended Route
We won't get through all this in a single contact hour, but please take some time to explore!
The Big Picture
- The Evolution of the Web (evolutionofweb.appspot.com)
- HTML5 Peeks, Pokes and Pointers (Dive into HTML5 Appendix B)
Getting Started
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.
Orientation
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.
- Offline and Local storage
More on HTML5 Forms
- Forward Thinking Form Validation (A List Apart)
- Making forms fabulous (HTML5 Rocks)
Playground
Slides and Demos from HTML5 Rocks
- HTML5 The Wow and the How (view in Chrome)
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>
Learning this Stuff
- HTML5 Video Tutorial Collection at thenewboston.org. Assumes knowledge of XHTML and CSS.
- Updates and Tutorials at HTML5 Rocks seems to be aimed at more experienced developers and tends to showcase “bleeding edge” technologies, particularly for Chrome Browsers.
Resources
- HTML5 Resources on the bbellx blog
Progressive Enhancement and Graceful Degradation
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:
- Fully implemented on all browsers
- Only partially implemented on some browsers
- Not available on some browsers
The Problem of Backwards Compatibility
- Older browsers will not recognize the new HTML5 elements, CSS3 styleseheet extensions and new JavaScript objects and APIs.
- We may be able to implement some of the features using JavaScript, but if not we want to gracefully degrade the User Experience so that it at least works for the majority of users.
So How Do We Use HTML5/CSS3/New JavaScript APIs Now?
Some features will fall-back to a useable feature:
- For example new input types will fall back to
<input type=“text” /> - Video element can fall back on an image or a flash object.
So How Do We Use HTML5/CSS3/New JavaScript APIs Now?
You can write your own implementation
- E.g. an event driven validation routine based on what you've learned in this module
- Use jQuery to implement an equivalent: e.g. animation instead of CSS transition.
So How Do We Use HTML5/CSS3/New JavaScript APIs Now?
Some features can be implemented in JavaScript using “polyfills” (named after Polyfilla)
- For example the webforms2 library will add cross-browser support for the new input types and validation attributes
- You can use html5widgets or jQuery UI widgets to implement UI features such as date pickers, sliders and number spinboxes
The Technique
- Use when can I use ... to see if our feature is supported and on which browsers
- Use a browser feature detection library1) to detect if your client's browser supports the feature you want
- If so, use the native built-in support
- If not
- Add some JavaScript to create the functionality (hard!)
- Use a JavaScript library or UI widget to replicate the functionality (difficult-hard)
- Load an existing polyfill to “seal the cracks” (easy if there is one)
- Create a polyfill and release to the community (experts only!)
1. Feature Availability
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.
2. Feature Detection
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.
- The consensus in the developer community is to use the Modernizr library which provides a new object with attributes that are boolean values indicating the presence or absence of a feature.
- Modernizr also a optional feature (
Modernizr.load()) that can automatically load polyfills for missing features.
3. Using Polyfills
Polyfills are simply JavaScripts or, for more complex features, collections of HTML/CSS/Images and JavaScript that implement a missing feature.
- You load them as you would any other JavaScript library or script.
- The main difference between a polyfill and something you might write yourself is that care has been taken to match the specification of the feature it is emulating.
Example
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>
- Here is the original without polyfill. Open in as many browsers as you can.
- Here is a version that uses Modernizr to test support for number.
- Here is the final version that uses the polyfill suggested by Can I use… to provide cross-browser support.
Summary of this Session
We didn't get through all this, but please do take some time to explore!
Homework Exercises
- Implement a cross-browser date picker that implements the HTML5 date-time field.
- Challenge: use feature detection and polyfills to provide a full cross-browser implementation of last year's Coursework 1
What's Next?
AJAX
- Introduction
- Defining Ajax
- How Ajax is Different
- Who's Using Ajax?
- Case Studies
- Critique
- Ajax in jQuery