~~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.

Playground

Slides and Demos from HTML5 Rocks

HTML5: Web Development to the Next Level
HTML5 The Wow and the How (view in Chrome)
These Aren't the Sites You're Looking For: Building Modern Web Applications (view in Chrome)
Other Slides and Presentations 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.

Learning this Stuff

HTML5 Video Tutorial Collection at thenewboston.org. Assumes knowledge of XHTML and CSS.
Learn HTML at the Mozilla Developer Network
HTML5 Doctor -- Article Archive
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

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 library¹⁾ 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

Previous Lecture | home | Next Lecture

¹⁾

Not browser detection

Table of Contents

The Rest of HTML5

Recommended Route

The Big Picture

Getting Started

Orientation

More on HTML5 Forms

Playground

Learning this Stuff

Resources

Progressive Enhancement and Graceful Degradation

The Problem of Backwards Compatibility

So How Do We Use HTML5/CSS3/New JavaScript APIs Now?

So How Do We Use HTML5/CSS3/New JavaScript APIs Now?

So How Do We Use HTML5/CSS3/New JavaScript APIs Now?

The Technique

1. Feature Availability

2. Feature Detection

3. Using Polyfills

Example

Summary of this Session

Homework Exercises

What's Next?