HTML 5 The Good Parts<br />by<br />Shauvik Roy Choudhary (shauvik.com)http://cc.gatech.edu/~shauvik<br />
Goodbye !<br />&lt;basefont&gt; <br />&lt;big&gt;<br />&lt;center&gt;<br />&lt;dir&gt;<br />&lt;font&gt;<br />&lt;frame&gt...
Lots of New Arrivals !<br />Web Forms 2.0<br />Multimedia support<br />GeoLocation<br />Application Cache<br />Drag-Drop<b...
Layout<br />
Web Forms<br />&lt;input&gt;<br />type=email<br />type=url<br />type=date<br />type=range<br />required<br />pattern=&quot...
Audio - Video<br />&lt;video src=&quot;video.ogv&quot; controls poster=&quot;poster.jpg&quot; <br />width=&quot;320&quot; ...
GeoLocation<br />function showMap(position) {<br />  // Show a map centered at (position.coords.latitude, position.coords....
Application Cache<br />Session Storage<br />sessionStorage.setItem(&apos;value&apos;, value);<br />sessionStorage.getItem(...
Canvas<br />Operations on Canvas<br />Draw lines / shapes<br />Apply styles/color/transparency<br />Add Images<br />Transf...
Manipulating Video on Canvas<br />Demo: &lt;dev.moz&gt;/samples/video/chroma-key/index.xhtml<br />
Browser Implementation<br />Everyone is working on it !<br />Canvas supported in all except IE (javascript library)<br />S...
Compatibility<br />http://quirksmode.org/compatibility.html<br />Details @ http://quirksmode.org/dom/html5.html<br />
Present browser market share<br />Source: http://www.w3counter.com/globalstats.php<br />
Upcoming SlideShare
Loading in...5
×

Intro to Html 5

2,953

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,953
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
77
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Intro to Html 5

  1. 1. HTML 5 The Good Parts<br />by<br />Shauvik Roy Choudhary (shauvik.com)http://cc.gatech.edu/~shauvik<br />
  2. 2.
  3. 3. Goodbye !<br />&lt;basefont&gt; <br />&lt;big&gt;<br />&lt;center&gt;<br />&lt;dir&gt;<br />&lt;font&gt;<br />&lt;frame&gt;<br />&lt;frameset&gt;<br />&lt;isindex&gt;<br />&lt;noframes&gt;<br />&lt;s&gt;<br />&lt;strike&gt;<br />&lt;tt&gt;<br />&lt;u&gt;<br />&lt;xmp&gt;<br />
  4. 4. Lots of New Arrivals !<br />Web Forms 2.0<br />Multimedia support<br />GeoLocation<br />Application Cache<br />Drag-Drop<br />Document Editing<br />Cross-Domain Messaging<br />Layout Definitions<br />Canvas !<br />Workers<br />3D APIs<br />Mozilla Canvas 3D<br />Google O3D<br />
  5. 5. Layout<br />
  6. 6. Web Forms<br />&lt;input&gt;<br />type=email<br />type=url<br />type=date<br />type=range<br />required<br />pattern=&quot;&quot;<br />&lt;input pattern=&quot;[0-9]{13,16}&quot; name=&quot;credit_card&quot;&gt;<br />contenteditable=&quot;true&quot;<br />&lt;output&gt;<br />&lt;input name=&quot;range&quot; type=&quot;range&quot;&gt;<br />&lt;output onformchange=&quot;value = range.value&quot;&gt;0&lt;/output&gt;<br />Google suggest with &lt;datalist&gt;<br />&lt;input name=&quot;q&quot; list=&quot;suggest&quot;oninput=&quot; list.data = &apos;?p=&apos; + encodeURIComponent(value)&quot;&gt;<br />&lt;datalist id=&quot;suggest&quot;&gt;&lt;/datalist&gt;<br />Demos : http://people.opera.com/brucel/demo/html5-forms-demo.htmlhttp://html5demos.com/contenteditable<br />
  7. 7. Audio - Video<br />&lt;video src=&quot;video.ogv&quot; controls poster=&quot;poster.jpg&quot; <br />width=&quot;320&quot; height=&quot;240&quot;&gt;<br /> &lt;a href=&quot;video.ogv&quot;&gt;Download movie&lt;/a&gt;<br />&lt;/video&gt;<br />&lt;audio src=&quot;music.oga&quot; controls&gt;<br /> &lt;a href=&quot;music.oga&quot;&gt;Download song&lt;/a&gt;<br />&lt;/audio&gt;<br />&lt;!-- Script Videos --&gt;<br />&lt;video src=&quot;video.ogg&quot; id=&quot;video&quot;&gt;&lt;/video&gt;<br />&lt;script&gt;<br />var video = document.getElementById(&quot;video&quot;);<br />&lt;/script&gt;<br />&lt;button type=&quot;button&quot; onclick=&quot;video.play();&quot;&gt;Play&lt;/button&gt;<br />&lt;button type=&quot;button&quot; onclick=&quot;video.pause();&quot;&gt;Pause&lt;/button&gt;<br />&lt;button type=&quot;button&quot; onclick=&quot;video.currentTime = 0;“&gt; &lt;&lt; Rewind&lt;/button&gt;<br />
  8. 8. GeoLocation<br />function showMap(position) {<br /> // Show a map centered at (position.coords.latitude, position.coords.longitude).<br />}<br />// One-shot position request.<br />navigator.geolocation.getCurrentPosition(showMap);<br />//Options to<br />Watch position<br />Cache position<br />http://dev.w3.org/geo/api/spec-source.html<br />Demo: http://html5demos.com/geo<br />
  9. 9. Application Cache<br />Session Storage<br />sessionStorage.setItem(&apos;value&apos;, value);<br />sessionStorage.getItem(&apos;value&apos;);<br />sessionStorage.clear();<br />Local Storage<br />localStorage.setItem(&apos;value&apos;, value);<br />localStorage.getItem(&apos;value&apos;);<br />sessionStorage.clear();<br />var status = navigator.onLine ? &apos;online&apos; : &apos;offline‘;<br />Demo: http://html5demos.com/storage<br />
  10. 10. Canvas<br />Operations on Canvas<br />Draw lines / shapes<br />Apply styles/color/transparency<br />Add Images<br />Transformations, Compositing<br />Animations<br />Demos: <br />http://html5demos.com/canvas<br />MSPaint on the web using canvas: http://colorillo.com<br />Ref:<br />&lt;dev.moz&gt;/Canvas_tutorial<br />&lt;dev.moz&gt;/Drawing_Graphics_with_Canvas<br />
  11. 11. Manipulating Video on Canvas<br />Demo: &lt;dev.moz&gt;/samples/video/chroma-key/index.xhtml<br />
  12. 12. Browser Implementation<br />Everyone is working on it !<br />Canvas supported in all except IE (javascript library)<br />Storage & Geolocation support using Google Gears<br />Useful Links :<br />http://a.deveria.com/caniuse/<br />http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)<br />http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers<br />Quick Tag Reference: http://www.w3schools.com/tags/html5.asp<br />
  13. 13. Compatibility<br />http://quirksmode.org/compatibility.html<br />Details @ http://quirksmode.org/dom/html5.html<br />
  14. 14. Present browser market share<br />Source: http://www.w3counter.com/globalstats.php<br />
  15. 15. Resources<br />Demos: http://html5demos.com/<br />Specs<br />Current Working Draft - http://www.w3.org/TR/html5/<br />Diff with HTML 4 -http://dev.w3.org/html5/html4-differences/<br />Online<br />MDC Samples - https://developer.mozilla.org<br />Dive into HTML 5 (http://diveintohtml5.org/) – In Progress<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×