Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Be HTML5-ready today

938 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Be HTML5-ready today

  1. 1. HTML5 and related technologies<br />
  2. 2. Oleksandr Khomenko<br />twitter.com/okhomenko<br />okhomenko@gmail.com<br />I am from Ukraine<br />and work in Petrosoft<br />I’m from here<br />
  3. 3. HTML5 and friends<br />/by @rem (Remy Sharp)<br />
  4. 4. Past. How did we get here?<br />
  5. 5. Be HTML5-ready today!<br />
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13. Tons of candies!<br />
  14. 14. HTML5 in 5 seconds<br />
  15. 15. <!DOCTYPE html><br />
  16. 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"<br />xml:lang="en" lang="en"><br /><head><br /><meta http-equiv="Content-Type"<br />content="text/html; charset=utf-8"/><br />
  17. 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><htmlxmlns="http://www.w3.org/1999/xhtml"<br />xml:lang="en" lang="en"><br /><head><br /><meta http-equiv="Content-Type"<br />content="text/html; charset=utf-8"/><br />
  18. 18. <!DOCTYPE html><br /><html><br /><head><br /><meta charset=“utf-8”/><br />
  19. 19. New semantic elements:<br /><ul><li>section
  20. 20. nav
  21. 21. article
  22. 22. aside
  23. 23. hgroup
  24. 24. header
  25. 25. footer
  26. 26. time
  27. 27. mark</li></li></ul><li>
  28. 28. document.createElement(“header”);<br />document.createElement(“nav”);<br />document.createElement(“aside”);<br />…<br />OR<br /><!--[if lt IE 9]><br /><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><br /><![endif]--><br />
  29. 29. CSS<br />article, aside, figure, footer, header, hgroup, nav, section {<br /> display: block;<br />}<br />
  30. 30. data-* attributes<br />
  31. 31. What is that?<br /><nav><br /> <header><br /> <h1>What do you plan to do on Friday’s evening?</h1><br /> </header><br /> <ul><br /> <li><a href=“/menu/aval” data-title=“Raiffeisen Bank Aval”>Get money</a></li><br /> <li><a href=“/menu/beerloga” data-title=“Drink till dawn”>Drink Beeeer!</a></li><br /></ul><br /></nav><br /><script><br />$(“nav a”).click(function(){<br />var cost = $(this).attr(“data-fullinfo”);<br /> alert(“You are going to ” + $(this).attr(“data-title”));<br />});<br /></script><br />
  32. 32. Web Forms 2.0<br /><ul><li>Placeholders:</li></ul><form><br /> <input name="q" placeholder="Search Bookmarks and History"><br /> <input type="submit" value="Search"><br /></form><br />
  33. 33. Autofocus:<br /><form><br /> <input name="q" autofocus><br /> <input type="submit" value="Search"><br /></form><br />
  34. 34. Input types:<br /><ul><li>email
  35. 35. url
  36. 36. phone
  37. 37. number
  38. 38. range</li></ul>Date pickers<br /><ul><li>date
  39. 39. datetime
  40. 40. month
  41. 41. Week
  42. 42. time
  43. 43. search</li></li></ul><li><ul><li>color</li></li></ul><li>Validation:<br /><input id="q" required><br /><form novalidate><br />
  44. 44. Video and audio<br />
  45. 45. Earlier and now:<br /> <object width="425" height="344"> <br /> <param name="movie" value="http://www.youtube.com/9sEI1AUFJKw" /> <br /> <param name="allowFullScreen" value="true" /> <br /> <param name="allowscriptaccess" value="always" /> <br /> <embed src="http://www.youtube.com/ 9sEI1AUFJKw" <br /> type="application/x-shockwave-flash width="425" height="344"> <br /> </embed> <br /> </object> <br />HTML5 way:<br /><video src=web.ogv></video><br />HTML5 way (+legacy browsers):<br /><video src=format.ogv><br /> Download the <a href=format.ogv>How to format c:</a> <br /></video><br />
  46. 46. Attributes:<br /><ul><li>autoplay
  47. 47. controls
  48. 48. preload (auto, none, meta)
  49. 49. poster
  50. 50. loop</li></li></ul><li>Codecs <br />
  51. 51. Common way:<br /> <video controls> <br /> <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'> <br /> <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40"> <br /> <p>Your browser doesn’t support video. <br /> Please download the video in <a href=format.ogv>Ogg</a></p> <br /></video> <br />
  52. 52. Common way (+legacy):<br /> <video controls> <br /> <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'> <br /> <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40"><br /> <embed src="http://www.youtube.com/v/cmtcc94Tv3A" type="application/x-shockwave-flash" <br />allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> <br /></video> <br />
  53. 53. Steroids:<br /><video><br /> <source src=“format-low.ogv” media="(min-device-width: 800px)“><br /></video><br />
  54. 54. Support:<br />
  55. 55. Geolocation API<br />
  56. 56. Get current location<br />vargl = navigator.geolocation;<br />gl.getCurrentPosition(displayPosition, displayError);<br />function displayPosition(position) {<br /> alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);<br />}<br />function displayError(positionError) {<br /> alert("error");<br />}<br />gl.watchPosition(successCallback, errorCallback, options);<br />
  57. 57. Get current location<br />vargl = navigator.geolocation;<br />gl.getCurrentPosition(displayPosition, displayError);<br />function displayPosition(position) {<br /> alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);<br />}<br />function displayError(positionError) {<br /> alert("error");<br />}<br />gl.watchPosition(successCallback, errorCallback, options);<br />
  58. 58. Fallback:<br />vargl = null;<br />function displayPosition(position) {<br /> alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);<br />}<br />function displayError(positionError) {<br /> alert("error");<br />}<br />try {<br /> if (typeof(navigator.geolocation) == 'undefined'){<br />gl = google.gears.factory.create('beta.geolocation');<br /> } else {<br />gl = navigator.geolocation;<br /> }<br />} catch(e) {}<br />if (gl) {<br />gl.getCurrentPosition(displayPosition, displayError);<br />} else {<br /> alert("Geolocation services are not supported by your web browser.");<br />}<br />
  59. 59. History API<br />
  60. 60. Offline Applications (Cache)<br />
  61. 61. Web Storage, Web SQL Databases<br />
  62. 62. Drag n Drop<br />
  63. 63. Web Sockets<br />
  64. 64. In Chrome Frame we trust!<br />
  65. 65. Resources<br />html5doctor.com<br />html5rocks.com<br />diveintohtml5.org<br />brucelawson.co.uk<br />remysharp.com<br />
  66. 66.
  67. 67. twitter.com/okhomenko<br />okhomenko@gmail.com<br />

×