Your SlideShare is downloading. ×
0
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Intro to Html 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to Html 5

2,936

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML 5 The Good Parts<br />by<br />Shauvik Roy Choudhary (shauvik.com)http://cc.gatech.edu/~shauvik<br />
  • 2.
  • 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. 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. Layout<br />
  • 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. 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. 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. 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. 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. Manipulating Video on Canvas<br />Demo: &lt;dev.moz&gt;/samples/video/chroma-key/index.xhtml<br />
  • 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. Compatibility<br />http://quirksmode.org/compatibility.html<br />Details @ http://quirksmode.org/dom/html5.html<br />
  • 14. Present browser market share<br />Source: http://www.w3counter.com/globalstats.php<br />
  • 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 />

×