1. HTML 5 The Good Parts by Shauvik Roy Choudhary (shauvik.com)http://cc.gatech.edu/~shauvik

3. Goodbye ! <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u> <xmp>

4. Lots of New Arrivals ! Web Forms 2.0 Multimedia support GeoLocation Application Cache Drag-Drop Document Editing Cross-Domain Messaging Layout Definitions Canvas ! Workers 3D APIs Mozilla Canvas 3D Google O3D

5. Layout

6. Web Forms <input> type=email type=url type=date type=range required pattern="" <input pattern="[0-9]{13,16}" name="credit_card"> contenteditable="true" <output> <input name="range" type="range"> <output onformchange="value = range.value">0</output> Google suggest with <datalist> <input name="q" list="suggest"oninput=" list.data = '?p=' + encodeURIComponent(value)"> <datalist id="suggest"></datalist> Demos : http://people.opera.com/brucel/demo/html5-forms-demo.htmlhttp://html5demos.com/contenteditable

7. Audio - Video <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video> <audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio> <!-- Script Videos --> <video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <button type="button" onclick="video.play();">Play</button> <button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;“> << Rewind</button>

8. GeoLocation function showMap(position) { // Show a map centered at (position.coords.latitude, position.coords.longitude). } // One-shot position request. navigator.geolocation.getCurrentPosition(showMap); //Options to Watch position Cache position http://dev.w3.org/geo/api/spec-source.html Demo: http://html5demos.com/geo

9. Application Cache Session Storage sessionStorage.setItem('value', value); sessionStorage.getItem('value'); sessionStorage.clear(); Local Storage localStorage.setItem('value', value); localStorage.getItem('value'); sessionStorage.clear(); var status = navigator.onLine ? 'online' : 'offline‘; Demo: http://html5demos.com/storage

10. Canvas Operations on Canvas Draw lines / shapes Apply styles/color/transparency Add Images Transformations, Compositing Animations Demos: http://html5demos.com/canvas MSPaint on the web using canvas: http://colorillo.com Ref: <dev.moz>/Canvas_tutorial <dev.moz>/Drawing_Graphics_with_Canvas

11. Manipulating Video on Canvas Demo: <dev.moz>/samples/video/chroma-key/index.xhtml

12. Browser Implementation Everyone is working on it ! Canvas supported in all except IE (javascript library) Storage & Geolocation support using Google Gears Useful Links : http://a.deveria.com/caniuse/ http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5) http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers Quick Tag Reference: http://www.w3schools.com/tags/html5.asp

13. Compatibility http://quirksmode.org/compatibility.html Details @ http://quirksmode.org/dom/html5.html

14. Present browser market share Source: http://www.w3counter.com/globalstats.php

15. Resources Demos: http://html5demos.com/ Specs Current Working Draft - http://www.w3.org/TR/html5/ Diff with HTML 4 -http://dev.w3.org/html5/html4-differences/ Online MDC Samples - https://developer.mozilla.org Dive into HTML 5 (http://diveintohtml5.org/) – In Progress