HTML 5 The Good Parts

byShauvik Roy Choudhary (shauvik.com)

http://cc.gatech.edu/~shauvik

Goodbye !

<basefont> <big><center><dir><font><frame><frameset><isindex>

<noframes><s><strike><tt><u><xmp>

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

Layout

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

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>

GeoLocationfunction 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

Application Cache• Session StoragesessionStorage.setItem('value', value);sessionStorage.getItem('value');sessionStorage.clear();

• Local StoragelocalStorage.setItem('value', value);localStorage.getItem('value');sessionStorage.clear();

• var status = navigator.onLine ? 'online' : 'offline‘;

Demo: http://html5demos.com/storage

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

Manipulating Video on Canvas

Demo: <dev.moz>/samples/video/chroma-key/index.xhtml

Browser Implementation

• 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

Everyone is working on it !

Compatibility

http://quirksmode.org/compatibility.html

Details @ http://quirksmode.org/dom/html5.html

Present browser market share

17.65%

12.76%

4.07%

1.96%1.73%1.28%0.84%

16.59%

21.86%

13.28%

Sep-09

Firefox 3.5Firefox 3.0Safari 4.0Chrome 3.0Chrome 2.0Firefox 2.0Opera 10.0Internet Explorer 8.0Internet Explorer 7.0Internet Explorer 6.0

Source: http://www.w3counter.com/globalstats.php

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