Html5 public

1,131 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
1,131
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 public

  1. 1. * *logo is CSS3
  2. 2. * *logo is CSS3
  3. 3. HTML5 is the future -Steve Jobs
  4. 4. • History• What is HTML5?• Facts & Myths• Markup changes• Forms• Audio & Video• Storage/ Offline• Geolocation*• Canvas *not HTML5 (I’ll get onto that)
  5. 5. • Markup - code used to give elements structure and semantic value• Semantics - Give meaning to a document or elements.• Specs - W3C specification
  6. 6. IS A BUZZWORD
  7. 7. W3WHO?
  8. 8. W3WHO?• The World Wide Web Consortium
  9. 9. W3WHO?• The World Wide Web Consortium• International standards organisation for the World Wide Web
  10. 10. W3WHO?• The World Wide Web Consortium• International standards organisation for the World Wide Web• HTML, XML, CSS, XQUERY
  11. 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. 12. HISTORY
  13. 13. HISTORY• 1998 - WC3 stopped work on HTML spec. XHTML was the future.
  14. 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. 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. 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. 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. 18. HTML5 MYTHS
  19. 19. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.
  20. 20. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.• This browser supports HTML5, but that one doesnt.
  21. 21. HTML5 MYTHS•I Can’t Use HTML5 Until 2022.• This browser supports HTML5, but that one doesnt.• HTML5 will kill Flash.
  22. 22. HTML5 IS NOTHTML5 is often used to refer to a set of other new webtechnologies, including..
  23. 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. 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. 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. 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. 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. 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. 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. 30. PAVING THE COW PATHS
  31. 31. PAVING THE COW PATHS• Let the masses tell you where to build
  32. 32. PAVING THE COW PATHS• Let the masses tell you where to build• It’s a lot more forgiving than XHTML
  33. 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. 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. 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. 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. 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. 38. NEW ELEMENTS
  39. 39. NEW ELEMENTSdocument.createElement(header);
  40. 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. 41. BROWSER SUPPORT
  42. 42. BROWSER SUPPORT• Feature detection not browser sniffing.
  43. 43. BROWSER SUPPORT• Feature detection not browser sniffing.• IE9 will actually support a lot of this.
  44. 44. BROWSER SUPPORT• Feature detection not browser sniffing.• IE9 will actually support a lot of this.• WebKit - Open Source browser engine
  45. 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. 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. 47. MICRODATA
  48. 48. MICRODATA• Embed semantic markup into HTML documents
  49. 49. MICRODATA• Embed semantic markup into HTML documents• Not a new technique
  50. 50. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews
  51. 51. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews• People
  52. 52. MICRODATA• Embed semantic markup into HTML documents• Not a new technique• Reviews• People• Events
  53. 53. MICRODATA
  54. 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. 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. 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. 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. 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. 59. DATA ATTRIBUTES
  60. 60. DATA ATTRIBUTES• Previously had to litter markup with hidden meta data• Can now legally add custom data attributes
  61. 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. 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. 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. 64. HTML5 FORMS
  65. 65. HTML5 FORMS
  66. 66. HTML5 FORMS• Browser handles errors
  67. 67. HTML5 FORMS• Browser handles errors• New input types, email, number, url, range..
  68. 68. HTML5 FORMS• Browser handles errors• New input types, email, number, url, range..• Browser handles date pickers
  69. 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. 70. WHY BOTHER?
  71. 71. WHY BOTHER?• Email
  72. 72. WHY BOTHER?• Email• Number
  73. 73. WHY BOTHER?• Email• Number• Text
  74. 74. WHY BOTHER?• Email• Number• Text• URL
  75. 75. PATTERNS• Can validate against a pattern (“regex”) <label>Credit Card Number:</label> <input pattern="[0-9]{13,16}" name="cc">
  76. 76. POLYFILLING
  77. 77. POLYFILLING
  78. 78. POLYFILLING• Fill the cracks
  79. 79. POLYFILLING• Fill the cracks• Provide fallback functionality
  80. 80. POLYFILLING• Fill the cracks• Provide fallback functionality• Ideally mimics the future API
  81. 81. POLYFILLING• Fill the cracks• Provide fallback functionality• Ideally mimics the future API• Doing things twice?
  82. 82. PATTERNS<label>Credit Card Number:</label><input pattern="[0-9]{13,16}" name="cc">
  83. 83. PATTERNS<label>Credit Card Number:</label><input pattern="[0-9]{13,16}" name="cc">
  84. 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. 85. VIDEO/AUDIO
  86. 86. VIDEO/AUDIO
  87. 87. VIDEO/AUDIO• Used on Yell.com videos
  88. 88. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?
  89. 89. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible
  90. 90. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible• More control over styles
  91. 91. VIDEO/AUDIO• Used on Yell.com videos• The end of Flash?• More accessible• More control over styles• Better API
  92. 92. FORMATS
  93. 93. FORMATS• Apple backing MP4 (H.264)
  94. 94. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only
  95. 95. FORMATS• Apple backing MP4 (H.264) • Safari desktop & mobile support MP4 only• Google went and bought a codec, then open sourced it
  96. 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. 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. 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. 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. 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. 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. 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. 103. LOCAL STORAGE even ie8!
  104. 104. LOCAL STORAGE
  105. 105. LOCAL STORAGE• Local Storage
  106. 106. LOCAL STORAGE• Local Storage• Session Storage
  107. 107. LOCAL STORAGE• Local Storage• Session Storage• Web SQL databases
  108. 108. LOCAL STORAGE
  109. 109. LOCAL STORAGE• Cookies can only store 4Kb, add to page load
  110. 110. LOCAL STORAGE• Cookies can only store 4Kb, add to page load• Local Storage 5Mb per domain
  111. 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. 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. 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. 114. OFFLINE
  115. 115. OFFLINE
  116. 116. OFFLINE• Allows web apps to work offline
  117. 117. OFFLINE• Allows web apps to work offline• Great for mobile devices
  118. 118. OFFLINE• Allows web apps to work offline• Great for mobile devices• Canbe used to heavily cache page resources for performance reasons
  119. 119. OFFLINE
  120. 120. OFFLINE• Manifest file
  121. 121. OFFLINE• Manifest file• List of resources web application might need whilst offline
  122. 122. OFFLINE• Manifest file• List of resources web application might need whilst offline CACHE MANIFEST mypage.html js/myscript.js
  123. 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. 124. GEOLOCATION
  125. 125. GEOLOCATION
  126. 126. GEOLOCATION• Has it’s own specification, not part of HTML5
  127. 127. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address
  128. 128. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address• Latitude & Longitude
  129. 129. GEOLOCATION• Has it’s own specification, not part of HTML5• Uses GPS or IP address• Latitude & Longitude• Accuracy
  130. 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. 131. CANVAS
  132. 132. CANVAS• Etch a sketch in the browser• Manipulate video and images• Graphing tools• Interactive backgrounds
  133. 133. CANVAS• Etch a sketch in the browser• Manipulate video and images• Graphing tools• Interactive backgrounds
  134. 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. 135. CANVAS + VIDEOhttp://www.craftymind.com/factory/ html5video/CanvasVideo.html
  136. 136. SITES
  137. 137. SITES• HTML5 Doctor - html5doctor.com
  138. 138. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org
  139. 139. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org• When Can I Use? - caniuse.com
  140. 140. SITES• HTML5 Doctor - html5doctor.com• Dive Into HTML5 - diveintohtml5.org• When Can I Use? - caniuse.com• Tech blogs & Newspapers
  141. 141. BOOKS
  142. 142. BOOKS• HTML5 for Web Designers
  143. 143. BOOKS• HTML5 for Web Designers• Introducing HTML5
  144. 144. BOOKS• HTML5 for Web Designers• Introducing HTML5• HTML5 Up & Running

×