Upload
shauvik-choudhary
View
2.926
Download
1
Embed Size (px)
Citation preview
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