Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,570
On Slideshare
1,429
From Embeds
141
Number of Embeds
5

Actions

Shares
Downloads
58
Comments
0
Likes
0

Embeds 141

http://localhost 84
http://hungrycoder.xenexbd.com 38
http://speakerrate.com 10
http://thehungrycoder.com 8
http://pmomale-ld1:3000 1

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
  • a

Transcript

  • 1. HTML5 … web is getting sexy
  • 2. What is HTML5? - It is still HTML, successor of HTML4x - It isENRICHED HTML - It is still UNDER DEVELOPMENT - Backward Compatible
  • 3. Why HTML5?
    • Built amazing web apps at ease
    • Address issues of current standard (html 4.01)
    • Made for web designers/developers!
  • 4. What’s new? New APIs New Elements – more than hundred. e.g. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, New Attributes - ping, async, custom attr. etc. New Events – ondrag, ondragstart, ondragend, ondrop etc. - We will discuss some
  • 5. Simplicity from beginning <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8”> <!DOCTYPE html> <meta charset=utf-8> In HTML5
  • 6. What real web made of? Class: 2.1+ million urls ID: 1.8+ million urls
  • 7. Sectioning Elements <header> <nav> <section> <aside> <article> <footer>
  • 8. HTML5 FORM
  • 9. HTML5 FORM No matter where field exists <form> <input /> </form> <form id=“frm1”> 1 st <input /> </form> <p>Some texts</p> 2 nd <input form=“frm1” /> HTML4x HTML5
  • 10. HTML5 FORM New Input Types
    • URL &Email
    • Date & Time
    • Number, Range
    • Search, Tel, Color
  • 11. HTML5 FORM New Attributes
    • Required, Pattern
    • Min, Max, Step
    • Placeholder, data-*
    • Autocomplete, Autofocus
    • Multiple
    • Form
  • 12. Not impressed?
    • Lets go wild!
  • 13. What are they?
    • Canvas
    • Geolocation
    • WebSocket
    • Web SQL Database
    • Web Workers
    • XMLHttpRequest 2
    • MathML
    • Web Storage
    • Media
    • SVG
    • Cross Document
    • Messaging
  • 14. CANVAS API
  • 15. Canvas API
    • <canvas>
    • Not supported! Show alternate content!
    • </canvas>
    1.0 1.5 9.0 1.3 ExploreCanvas http://code.google.com/p/explorercanvas). 9.0 Browser Support
  • 16.  
  • 17. AUDIO/VIDEO API
  • 18. AUDIO/VIDEO API
    • isAudioSupported= !!(document.createElement(‘audio’).canPlayType);
    1.0 3.5 9.0 1.3 9.0 Compatibility Check Browser Support
  • 19. AUDIO/VIDEO API
    • <audio src=“file1.ogg”>
    • Audio element is not supported.
    • </audio>
    Alternate media Fallback <video src=“file1.ogv”> Embed the typical flash media </video>
  • 20. AUDIO/VIDEO API Codec problem… <audio controls> <source src=“file1.ogg”> <source src=“file1.mp3”> The audio track! </audio> First supported codec will be played and rest will be ignored
  • 21.  
  • 22. Geo Location API How location is determined? Image Source: Pro HTML5 Programming book
  • 23. Geo Location API 2.0 3.5 10.0 4 (iPhone) With Gear Plugin Compatibility Check if(navigator.geolocation) { //Geo location is supported } else { //Geo Location is not supported } Browser Support
  • 24. Geo Location API
    • navigator.geolocation.getCurrentPosition (success_callback, failure_callback, options);
    • function success_callback(obj_pos){
    • var latitude = obj_pos.coords.latitude;
    • var longitude = obj_pos.coords.longitude;
    • var accuracy = obj_pos.coords.accuracy;
    • }
    Requesting Location
  • 25. Geo Location API
    • navigator.geolocation.watchLocation();
    • navigator.geolocation.clearWatch(gId);
    Requesting Location Continuously
  • 26. Web Storage API
  • 27. Web Storage API What is it?
    • Store data directly on client
    • Less http requests
    • Not old friend Cookie
    • Cross-browser exchange is not possible.
  • 28. Web Storage API Local Storage
    • Persists beyond current or created window/tab
    • Persists even creator window/tab is closed
    Session Storage
    • Persists on only created window/tab
    • Destroyed as soon as creator window/tab is closed
  • 29. Web Storage API 3.0 3.0 10.5 4.0 8.0 Compatibility Check if(window.sessionStorage) { //Session storage is supported } if(window.localStorage) { //Localstorage is supported } Browser Support
  • 30. Web Storage API Set/Get Session Storage //set values window.sessionStorage.setItem(key,value); window.sessionStorage.key = value; //get values window.sessionStorage.getItem(key); window.sessionStorage.key;
  • 31. HTML5 Readyness http://html5readyness.com 26% 77% 86% 72% 79%
  • 32. Reference http://diveintohtml5.org/
  • 33. Who the hell are you? Mohammad ZakirHossain (Raju) a.k.a The HungryCoder Founder and Administrator Projanmo Forum (http://forum.projanmo.com) Email: thehungrycoder@gmail.com Yahoo/Skype: thehungrycoder Blog: http://hungrycoder.xenexbd.com Question?