Your SlideShare is downloading. ×
Html5 public
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 public

914
views

Published on


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

  • Be the first to like this

No Downloads
Views
Total Views
914
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