HTML5

A reading summary of "HTML5: Up and Running" by Mark Pilgrim
New HTML5 features:
(1) new semantic elements
<section> <nav> <article> <aside> <hgroup> <header> <footer> <time> <mark>
<nav> for navigation, <hgroup> for h1,h2,...
<time datetime="2009-10-29" pubdate>Oct 29,2009 </time>
if you want to include time
<time datetime="2009-10-29T13:59:59-04:00">
04:00 -- time zone offset
pubdate means one of two thigns if the time is in an article, it means the publication date of the article,
else it's the publication date of the entire document

(2) Canvas
(3) Video
"there is no single combination of containers and codecs that work with all HTML5 browsers, (this situation) is not likely to change recently". "You may need to encode your video more than once to make your video watchable across all browsers"
containers means the formats of the video, such as MPEG,... codec = coder + decoder,
Fireogg -- a firefox extension for encoding video to ogg format, ogg is a one kind of container which is acceptable in many browsers.
(5) geolocation API
which lets you to share your location with trusted website
(6) local storage
provides a way for wesites to store information in your local side computer. the concept is similar to cookies, but cookies is much smaller in size."cookies are limited in size and browsers send them back to the web server every time it requests a new page". Web sites can only access its own values which are stored in the local storage.
(7)Add many Input types 
<input type="password" ...>
there are many other types like:
"search" -- search box
"number" -- spin box
"range" -- sliders
"color" -- for color pickers
"tel" -- for telephone numbers
"url" -- for www address
"email", "week", "day", "month", "time"(time stamps), "datetime", "dateitmelocal"
Automatic validation of input files for email, numbers and www address
(8)Web workers
provide a way for javascripts to run in background as like multiple threads
(9)Offline web applications
such as using google doc offline, cashed the updated results in the local side and update with the server side when connect to the remote server. the web application need to have a cache ability.
(10) placeholder text
"when the input box is not in focus, put the place holder text in the input field, as soon as you click on the input field, the placeholder text disappears"
(11) Auto focus
Browser support auto focus to a text field ('input') which was supported by javascript, it moves focus to a particular input field using mark-up instead of script


Modernizr: A HTML5 detection javascript library that detects support for HTML5 and CSS3 feature
Ex: Modernizr.canvas -- if the browser support canvas
Modernizr.canvastext -- if the browser support canvas text
Modernizr.localstorage -- if the browser support local storage
Modernizr.inputtypes.date -- if the browser support date as an input type

without Moderizer:
if(!!document.createElement('canvas').getContext()) return;
when you create element like canvas, if your browser support canvas then the DOM object will have a canvas element and the element will have 'getContext()' method, else the element will only have common properties.

i = document.createElement("input")
i.setAttribute("type","date")
return i.type != text

check the browser's support for placeholder text
i = document.createElement("input")
return 'placeholder' in 'i'
or Modernizr.input.placeholder

if(Modernizr.geolocation){
navigator.geolocation.getCurrentPosition(show_map);
}else{
}
navigator is a javascript global object
show_map: call back function

Other resources: HTML5 Demos and Examples