The document discusses the new features in HTML5 including improvements to forms, multimedia, geolocation, offline web applications, canvas drawing, and browser support. It provides examples of how to use many of the new features and links to specifications, browser compatibility tests, demos, and other resources for learning HTML5.

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