The Devil and HTML5

1,667 views
1,585 views

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

No notes for slide



































































  • The Devil and HTML5

    1. 1. The Devil and HTML5 Myles Braithwaite http://myles.tk | me@myles.tk | @mylesb
    2. 2. What is HTML? • HTML is a Markup Language. • HTML is mainly used to write web pages. • HTML is not a programming language. 2
    3. 3. Why should you care? 3
    4. 4. “Because browsers are now application platforms, ‘the big runtime machine’ if you will. I for one have given up several desktop apps for their online version, simply because they're much better in most cases.” Fabio FZero on the GTALUG Mailing List 4
    5. 5. So Cow{boy,girl} Up. 5
    6. 6. What is new in HTML5? 6
    7. 7. The DOCTYPE 7
    8. 8. • The HTML layout engines use the DOCTYPE to figure out which layout mode to use. 8
    9. 9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 9
    10. 10. But in HTML5 • The DOCTYPE is only required for legacy reasons. 10
    11. 11. <!DOCTYPE html> 11
    12. 12. Semantic Elements 12
    13. 13. <div id="container"> <div id="header"> <ul id="navigation"></ul> </div> <div id="body"> <div id="page"></div> <div id="sidebar"></div> </div> <div id="footer"></div> </div> 13
    14. 14. <div id="container"> <header></header> <nav></nav> <article> <section></section> </article> <aside></aside> <footer></footer> </div> 14
    15. 15. header, nav, article, section, aside footer { display: block; } 15
    16. 16. How do you represent the date? • Tuesday, 13th July, 2010 • July 13th, 2010 • 2010, July 13th 16
    17. 17. How do you represent time? • 9:58 AM • 09:58 17
    18. 18. <time datetime="2010-07-13">13th July, 2010</time> <time datetime="2010-07-13">Today</time> <time datetime="2010-07-13T19:30:00-05:00">7:30 pm</time> 18
    19. 19. <article> <time datetime="2010-07-13T19:30:00-05:00" pubdate> 7:30 pm </time> </article> 19
    20. 20. <link rel="archives" href="/archives.html"> <link rel="author" href="/author/myles.html"> <link rel="start" href="/first-post"> <link rel="prev" href="/prev-post"> <link rel="next" href="/next-post"> <link rel="end" href="/last-post"> <link rel="up" href="/"> 20
    21. 21. <p> <a href="/page/2/" class="previous" rel="prev">Previous</a> <a href="/page/1/" rel="start">1</a> <a href="/page/2/" rel="prev">2</a> <span>3</span> <a href="/page/3/" rel="next">3</a> <a href="/page/4/" rel="end">4</a> <a href="/page/3/" class="next" rel="next">Next</a> </p> 21
    22. 22. <article> <h2>GTALUG Talk about HTML5 Tomorrow at 7:30pm</h2> <section> <p>I am going to be talking about HTML5 at the next GTALUG meeting.</p> </section> <p class="meta"> By <a href="http://myles.tk/" rel="author">Myles</a>; published <time datetime="2010-07-12" pubdate> yesterday</time>; tagged with <span rel="tag">GTALUG</span> &amp; <span rel="tag">HTML5</span>. </p> </article> 22
    23. 23. Forms 23
    24. 24. Placeholder Text • A short hint to (word or parse) to aid the user in their data entry. • Shouldn’t be used as an alternative to <label>. 24
    25. 25. <form action="." method="post" accept-charset="utf-8"> <p><label>Email <input type="text" name="email" id="id_email" placeholder="you@example.com"> </label></p> <p><input type="submit"></p> </form> 25
    26. 26. 26
    27. 27. 37signals Launchpad 27
    28. 28. Compatibility IE Firefox Chrome iPhone Android ☐ ☑ ☑ ☑ ? 28
    29. 29. New Input Types 29
    30. 30. checkbox <input type="checkbox"> radio button <input type="radio"> password field <input type="password"> drop-down list <select><option> file picker <input type="file"> submit button <input type="submit"> plain text <input type="text"> 30
    31. 31. What has been added? Email <input type="email"> Web Address <input type="url"> Number <input type="number"> Range <input type="range"> Date Pickers <input type="date"> Search <input type="search"> Colour <input type="color"> 31
    32. 32. • Web browser will provided the validation. 32
    33. 33. • If you try to submit an email field with “youexample.com” instead of “you@exmaple.com” the browser will stop you. 33
    34. 34. Virtual Keyboards 34
    35. 35. Geolocation 35
    36. 36. • The ability to find where the user is located. • Uses an attached GPS device. • Or the users external IP address. 36
    37. 37. navigator.geolocation.getCurrentPosition(function(position){ var lat = position.coords.latitude; var log = position.coords.longitude; alert("You are at coronets " + lat + ', ' + log); }); 37
    38. 38. Local Storage 38
    39. 39. Cookies on Steroids 39
    40. 40. With non of the bandwidth drawbacks 40
    41. 41. • Allows the web application to use a key/value database on the client computer. • This data is never transmitted to the web server (unlike cookies). 41
    42. 42. • Internet Explore=>8.0 • Mozilla Firefox=>3.5 • Chrome=>4.0 • Opera=>10.5 • iOS=>2.0 • Android=>2.0 42
    43. 43. var first_name = localStorage.getItem("first_name"); localStorage.setItem("first_name", first_name); 43
    44. 44. Web SQL Database • Allows you to use a SQLite database for local storage. 44
    45. 45. Offline Web Applications 45
    46. 46. • Allows you to create a manifest file that list all your static content. • So it can be cached/downloaded to the clients computer. 46
    47. 47. CACHE MANIFEST /media/admin/css/base.css /media/admin/css/changelists.css /media/admin/css/dashboard.css /media/admin/css/forms.css /media/admin/css/global.css /media/admin/css/layout.css /media/admin/css/login.css /media/admin/css/null.css /media/admin/css/patch-iewin.css 47
    48. 48. More information • WHATWG Spec <http://j.mp/dqpmc3> • Mozilla’s Docs <http://j.mp/9lrDZ8> • Apple’s Docs <http://j.mp/9D2P2C> • Google’s Using AppCache to Launch Offline <http://j.mp/97vz71>, <http:// j.mp/d4VWDN>, and <http://j.mp/ aOnzW7> 48
    49. 49. <video> Tag 49
    50. 50. • Allows you to server the best video format (MP4, Ogg Vorbis, WebM, H.264) for the user. 50
    51. 51. Will this kill Flash? 51
    52. 52. For Video? Yes. 52
    53. 53. For anything else? No. 53
    54. 54. <video id="movie" width="320" height="240" preload controls> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <object width="320" height="240" type="application/x- shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf"> <param name="allowfullscreen" value="true"> <param name="flashvars" value='config={"clip": {"url": "http://example.org/movie.mp4", "autoPlay":false, "autoBuffering":true}}'> </object> </video> 54
    55. 55. I don’t know anything about Canvas. 55
    56. 56. Sorry 56
    57. 57. Who’s Pushing HTML5 57
    58. 58. Apple 58
    59. 59. j.mp/aUVu1w 59
    60. 60. apple.com/html5 60
    61. 61. Google 61
    62. 62. • HTML5Rocks <html5rocks.com> • YouTube HTML5 <youtube.com/html5> • Gmail supports HTML5 Drag and Drop <myl.be/6g7l> 62
    63. 63. google.com/pacman 63
    64. 64. youtube.com/chromefastball 64
    65. 65. 65
    66. 66. 66
    67. 67. 67

    ×