ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~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:

  * [[http://diveintohtml5.info/|Dive Into HTML5]]
  * [[http://www.html5rocks.com/|HTML5 Rocks]]
  * [[http://html5doctor.com/|HTML5 Doctor]]

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!
  * [[eg-259:ch15#The Big Picture]]
  * [[eg-259:ch15#Getting Started]]
  * [[eg-259:ch15#Orientation]]
  * [[eg-259:ch15#More on HTML5 Forms]]
  * [[eg-259:ch15#Playground]]
  * [[eg-259:ch15#Learning this Stuff]]
  * [[eg-259:ch15#Resources]]
  * [[eg-259:ch15#Progressive Enhancement and Graceful Degradation]]

===== The Big Picture ===== 

  * The Evolution of the Web ([[http://evolutionofweb.appspot.com|evolutionofweb.appspot.com]])
  * HTML5 Peeks, Pokes and Pointers ([[http://diveintohtml5.info/peeks-pokes-and-pointers.html|Dive into HTML5 Appendix B]])


===== Getting Started =====

Selected articles from [[http://html5doctor.com|HTML5 Doctor]]

  * [[http://html5doctor.com/html-5-boilerplates/|HTML5 Boilerplates]]
  * [[http://html5doctor.com/html-5-reset-stylesheet/|HTML5 Reset Stylesheet]]
  * [[http://html5doctor.com/designing-a-blog-with-html5/|Designing a blog with HTML5]]
  * [[http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/|How to use HTML5 in your client work right now]]

See the [[http://html5doctor.com/article-archive/|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 [[http://html5doctor.com/element-index/|HTML5 Element Index]] and a [[http://html5gallery.com/|showcase of HTML5 sites]].

===== Orientation =====

This section of the road-map is based on Mark Pilgrim's [[http://diveintohtml5.info|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.

  * [[http://diveintohtml5.info/semantics.html|Semantics]]
  * [[http://diveintohtml5.info/forms.html|New Form Elements]]
  * [[http://diveintohtml5.info/video.html|Audio and Video]]
  * [[http://diveintohtml5.info/canvas.html|The Canvas Element]]
  * [[http://diveintohtml5.info/offline.html|Offline]] and [[http://diveintohtml5.info/storage.html|Local storage]]
  * [[http://diveintohtml5.info/geolocation.html|Geolocation]]
  * [[http://diveintohtml5.info/extensibility.html|Microdata]]
  * [[http://diveintohtml5.info/history.html|Browser History APIs]]
  * [[http://diveintohtml5.info/detect.html|Feature Detection]]

===== More on HTML5 Forms =====

  * [[http://www.alistapart.com/articles/forward-thinking-form-validation|Forward Thinking Form Validation]] (A List Apart)
  * [[http://www.html5rocks.com/en/tutorials/forms/html5forms/|Making forms fabulous]] (HTML5 Rocks)
  * [[http://wufoo.com/html5/|The Current State of HTML5 Forms]]
  * [[http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/|Creating Cross-Browser HTML5 Forms Now]]

===== Playground =====

Slides and Demos from [[http://www.html5rocks.com/en/|HTML5 Rocks]]
  * [[http://slides.html5rocks.com/|HTML5: Web Development to the Next Level]]
  * [[http://www.htmlfivewow.com/slide1|HTML5 The Wow and the How]] (view in Chrome)
  * [[http://html5-demos.appspot.com/static/gdd11-modern-web-apps/index.html#1|These Aren't the Sites You're Looking For: Building Modern Web Applications]] (view in Chrome)
  * [[http://www.html5rocks.com/en/slides|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.

<html><iframe width="560" height="315" src="http://www.youtube.com/embed/HudotXvB9Ro" frameborder="0" allowfullscreen></iframe></html>

===== Learning this Stuff =====

  * [[http://thenewboston.org/list.php?cat=43|HTML5 Video Tutorial Collection]] at [[http://thenewboston.org|thenewboston.org]]. Assumes knowledge of XHTML and CSS.
  * [[https://developer.mozilla.org/en-US/learn/html|Learn HTML at the Mozilla Developer Network]]
  * [[http://html5doctor.com/article-archive/|HTML5 Doctor -- Article Archive]]
  * [[http://www.html5rocks.com/en/tutorials/|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 =====

  * [[http://www.html5rocks.com/en/resources|Resources Page on HTML5 Rocks]]
  * [[http://html5doctor.com/resources/|Resources Page on HTML5 Doctor]]
  * [[http://bbellx.com/2011/07/07/html5-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 "[[http://remysharp.com/2010/10/08/what-is-a-polyfill/|polyfills]]" (named after Polyfilla)
    * For example the [[http://code.google.com/p/webforms2/|webforms2]] library will add cross-browser support for the new input types and validation attributes
    * You can use [[http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/|html5widgets]] or jQuery UI widgets to implement UI features such as date pickers, sliders and number spinboxes

===== The Technique =====

  - Use [[http://caniuse.com/#|when can I use ...]] to see if our feature is supported and on which browsers
  - Use a browser feature detection library((Not browser detection)) 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 =====

[[http://caniuse.com/#|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 ([[http://diveintohtml5.info/detect.html|Detecting HTML5 Features]]) on how to do this as well as an appendix ([[http://diveintohtml5.info/everything.html|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 [[http://www.modernizr.com/|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 (''[[http://www.modernizr.com/docs/#polyfills|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.

<code html>
<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>  
</code>

----

  * Here is the [[/eg-259/examples/ch15/number-before.html|original without polyfill]]. Open in as many browsers as you can.
  * Here is a version that uses Modernizr to [[/eg-259/examples/ch15/number-test.html|test support for number]].
  * Here is the [[/eg-259/examples/ch15/number.html|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!
  * [[eg-259:ch15#The Big Picture]]
  * [[eg-259:ch15#Getting Started]]
  * [[eg-259:ch15#Orientation]]
  * [[eg-259:ch15#More on HTML5 Forms]]
  * [[eg-259:ch15#Playground]]
  * [[eg-259:ch15#Learning this Stuff]]
  * [[eg-259:ch15#Resources]]
  * [[eg-259:ch15#Progressive Enhancement and Graceful Degradation]]

===== 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 [[eg-259:cw1|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



[[eg-259:ch14|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture12|Next Lecture]]