jQuery and New HTML5 Essentials
Apart from the snazzy new logo what else does HTML5 offer us as jQuery developers?
I thought I would write a post about the rise of HTML5 and how we might take advantage of it as jQuery gurus.
The Background on HTML5?
HTML5 is a new version that is superseding HTML4.01 and XHTML1.1 as the latest HTML web format to use.
The new W3C HTML5 specification “last call” should be finalised in May 2011 (according to thier website). In particular, HTML5 adds many new syntactical features. These include the , , and elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as , , , and , are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as , and have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Reference: http://en.wikipedia.org/wiki/HTML5
Important things to know:
New Tags!!!
New - Defines an article
Deprecated Tags!!!
Not supported in HTML5.
W3C HTML5 Reference: http://www.w3schools.com/html5/html5_reference.asp
, replace for display of media content.
Note that the default supported media format for all browsers has not yet been decided.
New doctype: which triggers the standards-compliant rendering mode
The Canvas element: allows for dynamic, scriptable rendering of 2D shapes and bitmap images
Canvas Examples
JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition. Use jQuery for dynamic drawing on canvas?
//This code draws a red rectangle on the screen.
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);Reference:http://en.wikipedia.org/wiki/Canvas_element
More Cool HTML5 Canvas Examples
Google logo balls animation
Falling confetti animation
Raining cloud animation
WebGL: If web based graphics is your thing you might want to check out WebGL.
It uses the HTML5 canvas element and is accessed using Document Object Model interfaces.
Reference:http://en.wikipedia.org/wiki/WebGL
The HTML5 specification is expected to include support for drag & drop. Yet to be seen but gmail uses web based drag and drop. I prefer to use jQuery for drag and drop stuff!
Better MIME Type handling: read more: http://en.wikipedia.org/wiki/MIME_type
The use of Microdata: This is bascially data nested (html machine readable annotations) within content for search engines and web crawlers better understand what information is contained in a web page. Read more on Microdata vocabularies: http://www.data-vocabulary.org/
Microdata Example
Hello, my name is
Jhon Doe,
I am a
graduate research assistant
at the
University of Dreams.
My friends call me
Jhonny.
You can visit my homepage at
www.JhonyD.com.
I live at
1234 Peach Drive
Warner Robins
,
Georgia.
A common misconception is that HTML5 can provide animation within web pages, which is untrue. Either JavaScript/jQuery or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript/jQuery and HTML 4.
Better Error Handling: A HTML5 (text/html) browser will be flexible in handling incorrect syntax.
HTML5 is designed so that old browsers can safely ignore new HTML5 constructs. No more Tag Soup!
Improvements on File API: Alot of reading material on the Official W3C Working Draft: https://www.w3.org/TR/FileAPI/
Browser Testing
I've tested HTML5 using firefox 3.6 using this website analysis tool and it seems to be only just beating IE and lagging behind the other 3 main browsers. Not sure how accurate this tool is but the results look promising for Google Chrome.
The latest browsers HTML5 scores:
- Google Chrome 10.0.648 - 288 points
- Opera 11.1 - 244 points
- Apple Safari 5.0.3 - 228 points
- Mozilla Firefox 3.6 - 155 points
- Microsoft Internet Explorer 9 - 130 points
Final Thoughts:
Because the specification has not yet been finalised I would suggest making sure the tags your using are widely supported by the browsers your targeting based on their layout engines. See this comparison table to check support for elements, attributes, Globals, Forms, API's and others. Pay perticular attention to Gecko (Firefox), Trident (Internet Emplorer) and Webkit (Safari/Chrome) layout engines. More on jQuery and HTML5 to come!!!
