Your SlideShare is downloading. ×
0
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
Html5 public
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

Html5 public

948

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
948
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
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. * *logo is CSS3
  • 2. * *logo is CSS3
  • 3. HTML5 is the future -Steve Jobs
  • 4. • History• What is HTML5?• Facts & Myths• Markup changes• Forms• Audio & Video• Storage/ Offline• Geolocation*• Canvas *not HTML5 (I’ll get onto that)
  • 5. • Markup - code used to give elements structure and semantic value• Semantics - Give meaning to a document or elements.• Specs - W3C specification
  • 6. IS A BUZZWORD
  • 7. W3WHO?
  • 8. W3WHO?• The World Wide Web Consortium
  • 9. W3WHO?• The World Wide Web Consortium• International standards organisation for the World Wide Web
  • 10. W3WHO?• The World Wide Web Consortium• International standards organisation for the World Wide Web• HTML, XML, CSS, XQUERY
  • 11. W3WHO?• The World Wide Web Consortium• International standards organisation for the World Wide Web• HTML, XML, CSS, XQUERY• They don’t dictate what the browsers build
  • 12. HISTORY
  • 13. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.
  • 14. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.• XHTML 2.0 required a new MIME Type, XML syntax and XML parsing errors (Far from user friendly)
  • 15. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.• XHTML 2.0 required a new MIME Type, XML syntax and XML parsing errors (Far from user friendly)• 2004 - Not everybody thought this was the way to go, WHATWG formed (Opera, Apple, Google & Mozilla)
  • 16. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.• XHTML 2.0 required a new MIME Type, XML syntax and XML parsing errors (Far from user friendly)• 2004 - Not everybody thought this was the way to go, WHATWG formed (Opera, Apple, Google & Mozilla)• Web Forms 2.0 & Web Applications 1.0 Spec
  • 17. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.• XHTML 2.0 required a new MIME Type, XML syntax and XML parsing errors (Far from user friendly)• 2004 - Not everybody thought this was the way to go, WHATWG formed (Opera, Apple, Google & Mozilla)• Web Forms 2.0 & Web Applications 1.0 Spec• 2006 - W3C used WHATWG specs as a basis for HTML5
  • 18. HTML5 MYTHS
  • 19. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.
  • 20. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.• This browser supports HTML5, but that one doesnt.
  • 21. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.• This browser supports HTML5, but that one doesnt.• HTML5 will kill Flash.
  • 22. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..
  • 23. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..• CSS3 (animations, gradients and rounded corners) Go
  • 24. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..• CSS3 (animations, gradients and rounded corners)• Web fonts Go Comic sans was just the start
  • 25. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..• CSS3 (animations, gradients and rounded corners)• Web fonts• Geolocation Go Comic sans was just the start
  • 26. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..• CSS3 (animations, gradients and rounded corners)• Web fonts• Geolocation Go• SVG Comic sans was just the start
  • 27. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..• CSS3 (animations, gradients and rounded corners)• Web fonts• Geolocation Go• SVG• Desktop notifications Comic sans was just the start
  • 28. HTML5 IS• New semantic elements • Canvas• Browser form validation • Editable content• Offline • Drag & Drop• History API • Undo API• Audio/Video • X-Domain messaging
  • 29. WHAT CAN HTML5 DO?• Provide a better user experience on the desktop and mobile• Help improve accessibility• Help improve SEO• Reduce the gap between web applications and native• It won’t do it for you
  • 30. PAVING THE COW PATHS
  • 31. PAVING THE COW PATHS• Let the masses tell you where to build
  • 32. PAVING THE COW PATHS• Let the masses tell you where to build• It’s a lot more forgiving than XHTML
  • 33. PAVING THE COW PATHS• Let the masses tell you where to build• It’s a lot more forgiving than XHTML <img src="nice.jpg" /> <img src="nice.jpg"> <img src="nice.jpg"> <img src=nice.jpg> <IMG SRC=nice.jpg> <iMg SrC=nice.jpg>
  • 34. NEW DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HTML 4</title></head><body> <p>Hello World</p></body></html>
  • 35. NEW DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HTML 4</title></head><body> <p>Hello World</p></body></html><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>HTML 5</title></head><body> <p>Hello World</p></body></html>
  • 36. NEW ELEMENTS<body> <div id="header"> <h1>My page heading</h1> <ul id="nav"> <a href="#">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a> </ul> </div> <div id="content"> <div class="post"> <h2>Post title</h2> <p>Post content, etc</p> </div> </div> <div id="footer"> <p>Copyright, nobody reads this</p> </div></body>
  • 37. NEW ELEMENTS<body> <body> <div id="header"> <header> <h1>My page heading</h1> <h1>My page heading</h1> <ul id="nav"> <nav> <a href="#">Home</a> <ul> <a href="about.html">About</a> <a href="#">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </ul> <a href="contact.html">Contact</a> </div> </ul> </nav> <div id="content"> </header> <div class="post"> <h2>Post title</h2> <div id="content"> <p>Post content, etc</p> <article> </div> <h2>Post title</h2> </div> <p>Post content, etc</p> </article> <div id="footer"> </div> <p>Copyright, nobody reads this</p> </div> <footer> <p>Copyright, nobody reads this</p></body> </footer> </body>
  • 38. NEW ELEMENTS
  • 39. NEW ELEMENTSdocument.createElement(header);
  • 40. NEW ELEMENTS document.createElement(header);<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> There is a non JS fix, but it’s a lot more complicated
  • 41. BROWSER SUPPORT
  • 42. BROWSER SUPPORT• Feature detection not browser sniffing.
  • 43. BROWSER SUPPORT• Feature detection not browser sniffing.• IE9 will actually support a lot of this.
  • 44. BROWSER SUPPORT• Feature detection not browser sniffing.• IE9 will actually support a lot of this.• WebKit - Open Source browser engine
  • 45. BROWSER SUPPORT• Feature detection not browser sniffing.• IE9 will actually support a lot of this.• WebKit - Open Source browser engine• Mobile is mostly WebKit based, great support for HTML5 WebKit WebKit WebKit WebKit WebKit
  • 46. ev k e 65 Mo en 42= rop1 1=p Var _a d9 "><a mg cl 46 85 de ts 10 8= ub s= 01 as _T ra = 00 T s p 07 ta s= 2" ti ev 2 ;s ro 54 rg on en 0661 ;s .e p1 85 et "m in > </ t2 32 .p Va 5, _1 =" im ; p _b ad dr a> </ we 4400 rop1 r3= rop 96 54 la ap ic es h2 bl 00 9= re 16 68 nk on MICRODATA > in R ad ,p 5_ " s" >< kC 10; G in ro T2 hr _1 " st li ck s. 18; g; p17 " cl ef = Br ro < ng p cl Tr link s.p s.e ,pr as h id >R ac Tr ro Va op s= ttp: Di g ni e. R ea ass= ki ng ackE p21= r12= 8,p 1 "w eb //ww ng di "a (t ro . ef ur <p ng </ ddre hi vent 1.1 kwd p1 si te w.sp Re s, s ; 9, " al bish cl st ro ss"> o =ev ;s.p s.p pro ti i Al e as ng ) p tl </ es d Wi s=" >, <spa ;" ent2 rop4 rop1 21, di , Fi th fr n 1= 5 p v> ne An ee Be rk cl na me ; 1 =90 rop4 T a 00 <d Wi As ext sh ir ss=" =" om 10 1075 1,p ne i e ni 01 iv s. an F clea RG addr tu 29 485 cl rf 1 re 66 <u as s= Fu nc ee l. ix 8B ess" ID 34 56 l "a ti Tr "> B< >2 2_ On /s ad cl as dver on s. adit Th pa 13, 90 </ <l s= t- </ io e n> Ca 10 id </ 75 =" ul > i> Te "t el cta" p> na lP <s tr sp vers 48 ri om l: -s ub on an ha gh tw ni tu <u <s in > Fa g>Re >< /p m Ro on ar re l tr gl yr > ad ,e cl ic ds ID cl as on e"> e. ad i , ve k= " 2_ s= g> Lu ng</ <s 0 nt "s ad <l "o 01 nc pa 0 s .l 90 i> th 18 h st n ;s 842 ;s. ink 10 <a e 9 &a rong 75 75 s. .p ro ;s eV ar Tr ac 48 targ r-ct 0 76 mp ; > ev p4 .p ro 1= kV 5_ 19 et=" a" > 7< Ev Side na e 2 a 65 /s en me nts= =10 p18= pub rs= 46 _bla tr on in g Of sp =" T s 85 Me C an om eve 0006 2 ;s prop _T nk" g> </ al > n ; . 2" we itur nt2 6132 s.p eVar 15,p ti hr ef li > s bs r it eID2 ;web 4400 op1 3=r rop1 tl = e= htt e< 9 /a _ad9 link 0010 =R eadi 6,pr "V is p:// >< Cl ; G1 op /l 0107 ic s. 8 ng; 17 it w </ </ i> 54 kT li ;s s. ,p Th ww.s di u r n . r e v> l> 85 _1 acki kTra prop Var op18 e Mo piri de <d 96 54 ng ck Ev 21 = 12 = ,p ra t-ho iv 68 NonC en 1. kw rop1 ti on use. id 5_ N( ts 1 d 9, s T2 ; coo d- <u =" no "> this =ev ;s.p s.p prop we o.uk Vi r bs=" Read l cl tNat si ,o ent2 rop4 op1 21,p it /mod s. t 1= 5 e";s li ing- a <l ss=" ad90 <s );" ; 1 =90 rop4 e cl rati .e nkTr RG1 i c pa 00 Va 8B la ta bb 10 75 n cl 10 1075 1,pr as s= on/.p ac 01 48 op "a ro r1= kVa B-9 ss= ed"> 485_ as s= 29 66 5;s 42,e rr p1 p r 01 "s 1 " o
  • 47. MICRODATA
  • 48. MICRODATA• Embed semantic markup into HTML documents
  • 49. MICRODATA• Embed semantic markup into HTML documents• Not a new technique
  • 50. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews
  • 51. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews• People
  • 52. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews• People• Events
  • 53. MICRODATA
  • 54. MICRODATA<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Pizza Suprema</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in New York!</span> <span itemprop="description">An ideal neighborhood pizza joint...</span> Rating: <span itemprop="rating">4.5</span></div>
  • 55. MICRODATA<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Pizza Suprema</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in New York!</span> <span itemprop="description">An ideal neighborhood pizza joint...</span> Rating: <span itemprop="rating">4.5</span></div>• Easier for machines to understand
  • 56. MICRODATA<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Pizza Suprema</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in New York!</span> <span itemprop="description">An ideal neighborhood pizza joint...</span> Rating: <span itemprop="rating">4.5</span></div>• Easier for machines to understand• Could use the hooks to style
  • 57. MICRODATA<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Pizza Suprema</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in New York!</span> <span itemprop="description">An ideal neighborhood pizza joint...</span> Rating: <span itemprop="rating">4.5</span></div>• Easier for machines to understand• Could use the hooks to style• Search engines are using it, today
  • 58. MICRODATA<div itemscope itemtype="http://data-vocabulary.org/Review"> <span itemprop="itemreviewed">Pizza Suprema</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in New York!</span> <span itemprop="description">An ideal neighborhood pizza joint...</span> Rating: <span itemprop="rating">4.5</span></div>• Easier for machines to understand• Could use the hooks to style• Search engines are using it, today
  • 59. DATA ATTRIBUTES
  • 60. DATA ATTRIBUTES• Previously had to litter markup with hidden meta data• Can now legally add custom data attributes
  • 61. DATA ATTRIBUTES• Previously had to litter markup with hidden meta data• Can now legally add custom data attributes <div class=​"listing" id=​"ad1648679410_nat901079">​ <h1>Company Name</h1> <img src="staticmap/map.jpg" class="map"/> <div class="hidden lat">51.46227</div> <div class="hidden lon">-1.00816</div> </div>
  • 62. DATA ATTRIBUTES• Previously had to litter markup with hidden meta data• Can now legally add custom data attributes <div class=​"listing" id=​"ad1648679410_nat901079">​ <h1>Company Name</h1> <img src="staticmap/map.jpg" class="map"/> <div class="hidden lat">51.46227</div> <div class="hidden lon">-1.00816</div> </div> <div class=​"listing" data-shortlistid=​"ad1648679410" data-natid=​"901079"> <h1>Company Name</h1> <img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/> ​</div>
  • 63. DATA ATTRIBUTES• Previously had to litter markup with hidden meta data• Can now legally add custom data attributes <div class=​"listing" id=​"ad1648679410_nat901079">​ <h1>Company Name</h1> <img src="staticmap/map.jpg" class="map"/> <div class="hidden lat">51.46227</div> <div class="hidden lon">-1.00816</div> </div> <div class=​"listing" data-shortlistid=​"ad1648679410" data-natid=​"901079"> <h1>Company Name</h1> <img src="staticmap/map.jpg" class="map" data-lat="51.46227" data-lon="-1.00816"/> ​</div> var shortlistID = $(.parentListing).data(shortlistid);
  • 64. HTML5 FORMS
  • 65. HTML5 FORMS
  • 66. HTML5 FORMS• Browser handles errors
  • 67. HTML5 FORMS• Browser handles errors• New input types, email, number, url, range..
  • 68. HTML5 FORMS• Browser handles errors• New input types, email, number, url, range..• Browser handles date pickers
  • 69. HTML5 FORMS• Browser handles errors• New input types, email, number, url, range..• Browser handles date pickers• No need to use Javascript to validate (one day)
  • 70. WHY BOTHER?
  • 71. WHY BOTHER?• Email
  • 72. WHY BOTHER?• Email• Number
  • 73. WHY BOTHER?• Email• Number• Text
  • 74. WHY BOTHER?• Email• Number• Text• URL
  • 75. PATTERNS• Can validate against a pattern (“regex”) <label>Credit Card Number:</label> <input pattern="[0-9]{13,16}" name="cc">
  • 76. POLYFILLING
  • 77. POLYFILLING
  • 78. POLYFILLING• Fill the cracks
  • 79. POLYFILLING• Fill the cracks• Provide fallback functionality
  • 80. POLYFILLING• Fill the cracks• Provide fallback functionality• Ideally mimics the future API
  • 81. POLYFILLING• Fill the cracks• Provide fallback functionality• Ideally mimics the future API• Doing things twice?
  • 82. PATTERNS<label>Credit Card Number:</label><input pattern="[0-9]{13,16}" name="cc">
  • 83. PATTERNS<label>Credit Card Number:</label><input pattern="[0-9]{13,16}" name="cc">
  • 84. PATTERNS<label>Credit Card Number:</label><input pattern="[0-9]{13,16}" name="cc">$(input[pattern]).change(function(){ $(this).validatePattern();});jQuery.fn.validatePattern = function() { var pattern = $(this).attr(pattern); if ($(this).val().match(pattern)){ // valid } else{ // invalid, display error }};
  • 85. VIDEO/AUDIO
  • 86. VIDEO/AUDIO
  • 87. VIDEO/AUDIO• Used on Yell.com videos
  • 88. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?
  • 89. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible
  • 90. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible• More control over styles
  • 91. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible• More control over styles• Better API
  • 92. FORMATS
  • 93. FORMATS• Apple backing MP4 (H.264)
  • 94. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only
  • 95. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it
  • 96. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it • Google Chrome will only support WebM
  • 97. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it • Google Chrome will only support WebM• Microsoft IE9 - WebM and MP4
  • 98. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it • Google Chrome will only support WebM• Microsoft IE9 - WebM and MP4• Mozilla Firefox - WebM & OGG
  • 99. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it • Google Chrome will only support WebM• Microsoft IE9 - WebM and MP4• Mozilla Firefox - WebM & OGG• Opera - WebM & OGG
  • 100. IN THE WILD<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls=""> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4"> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg"> <embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252"></video>• MP4• OGG• Polyfill with a Flash fallback
  • 101. IN THE WILD<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls=""> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4"> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg"> <embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252"></video>• MP4• OGG• Polyfill with a Flash fallback
  • 102. IN THE WILD<video id="movie" class="video-lrgPlayerCont" width="450" height="252" preload="" controls=""> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/mp4" type="video/mp4"> <source src="http://videohosting.net/asset/87EC67A71ADBBB97/ogv" type="video/ogg"> <embed src="http://videohosting.net/mediaplayer.swf" width="450" height="252"></video>• MP4• OGG• Polyfill with a Flash fallback
  • 103. LOCAL STORAGE even ie8!
  • 104. LOCAL STORAGE
  • 105. LOCAL STORAGE• Local Storage
  • 106. LOCAL STORAGE• Local Storage• Session Storage
  • 107. LOCAL STORAGE• Local Storage• Session Storage• Web SQL databases
  • 108. LOCAL STORAGE
  • 109. LOCAL STORAGE• Cookies can only store 4Kb, add to page load
  • 110. LOCAL STORAGE• Cookies can only store 4Kb, add to page load• Local Storage 5Mb per domain
  • 111. LOCAL STORAGE• Cookies can only store 4Kb, add to page load• Local Storage 5Mb per domain• Can be used to cache request data
  • 112. LOCAL STORAGE• Cookies can only store 4Kb, add to page load• Local Storage 5Mb per domain• Can be used to cache request data• Use JSON.stringyfy & JSON.parse to read/write
  • 113. LOCAL STORAGE• Cookies can only store 4Kb, add to page load• Local Storage 5Mb per domain• Can be used to cache request data• Use JSON.stringyfy & JSON.parse to read/write• Polyfill with cookies/window.name hack
  • 114. OFFLINE
  • 115. OFFLINE
  • 116. OFFLINE• Allows web apps to work offline
  • 117. OFFLINE• Allows web apps to work offline• Great for mobile devices
  • 118. OFFLINE• Allows web apps to work offline• Great for mobile devices• Canbe used to heavily cache page resources for performance reasons
  • 119. OFFLINE
  • 120. OFFLINE• Manifest file
  • 121. OFFLINE• Manifest file• List of resources web application might need whilst offline
  • 122. OFFLINE• Manifest file• List of resources web application might need whilst offline CACHE MANIFEST mypage.html js/myscript.js
  • 123. OFFLINE• Manifest file• List of resources web application might need whilst offline CACHE MANIFEST mypage.html js/myscript.js <html manifest="offlineFiles.manifest">
  • 124. GEOLOCATION
  • 125. GEOLOCATION
  • 126. GEOLOCATION• Has it’s own specification, not part of HTML5
  • 127. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address
  • 128. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address• Latitude & Longitude
  • 129. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address• Latitude & Longitude• Accuracy
  • 130. GEOLOCATION// if the browser supports the w3c geo apiif(navigator.geolocation){ // get the current position navigator.geolocation.getCurrentPosition( function(position){ var lat = position.coords.latitude; var lon = position.coords.longitude; });} goo.gl/6BPM1
  • 131. CANVAS
  • 132. CANVAS• Etch a sketch in the browser• Manipulate video and images• Graphing tools• Interactive backgrounds
  • 133. CANVAS• Etch a sketch in the browser• Manipulate video and images• Graphing tools• Interactive backgrounds
  • 134. CANVASvar canvas = document.querySelector(canvas);var ctx = canvas.getContext(2d);ctx.beginPath();ctx.arc(100, 50, 30, 0, Math.PI*2, true); //circlectx.fill(); // solid fill
  • 135. CANVAS + VIDEOhttp://www.craftymind.com/factory/ html5video/CanvasVideo.html
  • 136. SITES
  • 137. SITES• HTML5 Doctor - html5doctor.com
  • 138. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org
  • 139. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org• When Can I Use? - caniuse.com
  • 140. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org• When Can I Use? - caniuse.com• Tech blogs & Newspapers
  • 141. BOOKS
  • 142. BOOKS• HTML5 for Web Designers
  • 143. BOOKS• HTML5 for Web Designers• Introducing HTML5
  • 144. BOOKS• HTML5 for Web Designers• Introducing HTML5• HTML5 Up & Running

×