0
HTML5 and related technologies<br />
Oleksandr Khomenko<br />twitter.com/okhomenko<br />okhomenko@gmail.com<br />I am from Ukraine<br />and work in Petrosoft<b...
HTML5 and friends<br />/by @rem (Remy Sharp)<br />
Past. How did we get here?<br />
Be HTML5-ready today!<br />
Tons of candies!<br />
HTML5 in 5 seconds<br />
<!DOCTYPE html><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><h...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><h...
<!DOCTYPE html><br /><html><br /><head><br /><meta charset=“utf-8”/><br />
New semantic elements:<br /><ul><li>section
nav
article
aside
hgroup
header
footer
time
mark</li></li></ul><li>
document.createElement(“header”);<br />document.createElement(“nav”);<br />document.createElement(“aside”);<br />…<br />OR...
CSS<br />article, aside, figure, footer, header, hgroup, nav, section {<br />   display: block;<br />}<br />
data-* attributes<br />
What is that?<br /><nav><br />   <header><br />       <h1>What do you plan to do on Friday’s evening?</h1><br />   </heade...
Web Forms 2.0<br /><ul><li>Placeholders:</li></ul><form><br />  <input name="q" placeholder="Search Bookmarks and History"...
Autofocus:<br /><form><br />  <input name="q" autofocus><br />  <input type="submit" value="Search"><br /></form><br />
Input types:<br /><ul><li>email
url
phone
number
range</li></ul>Date pickers<br /><ul><li>date
datetime
month
Week
time
search</li></li></ul><li><ul><li>color</li></li></ul><li>Validation:<br /><input id="q" required><br /><form novalidate><b...
Video and audio<br />
Earlier and now:<br /> <object width="425" height="344">  <br />      <param name="movie" value="http://www.youtube.com/9s...
Attributes:<br /><ul><li>autoplay
controls
preload (auto, none, meta)
poster
loop</li></li></ul><li>Codecs <br />
Upcoming SlideShare
Loading in...5
×

Be HTML5-ready today

715

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
715
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Семантический HTML.Центральная задача HTML5 это предоставить набор семантических элементов разработчику. Большый выбор тегов, атрибутов.
  • App Cache, Local Storage, Indexed DB, File API
  • GeoLocation and now being developing access to microphones, camera.
  • WebSockets, Server-Sent Events
  • Audio, video
  • SVG, Canvas, WebGL, and CSS3 3D features
  • Xhr2, webworkers
  • Tons of candies
  • Transcript of "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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×