The Devil and HTML5
•Download as KEY, PDF•
0 likes•1,014 views
The document provides an overview of HTML5 and its new features. It begins by explaining that HTML5 is not a programming language and is mainly used to write web pages. It then discusses how browsers have become application platforms, prompting the need to adopt HTML5. The document outlines some of the major new features in HTML5, including semantic elements like header and nav, new input types, geolocation, local storage, offline web applications, and video playback. It also addresses questions around the future of Flash and which companies are pushing adoption of HTML5.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to The Devil and HTML5
Similar to The Devil and HTML5 (20)
Recently uploaded
Recently uploaded (20)
The Devil and HTML5
- 1. The Devil and HTML5 Myles Braithwaite http://myles.tk | me@myles.tk | @mylesb
- 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. Why should you care? 3
- 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. So Cow{boy,girl} Up. 5
- 6. What is new in HTML5? 6
- 7. The DOCTYPE 7
- 8. • The HTML layout engines use the DOCTYPE to figure out which layout mode to use. 8
- 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. But in HTML5 • The DOCTYPE is only required for legacy reasons. 10
- 11. <!DOCTYPE html> 11
- 12. Semantic Elements 12
- 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. <div id="container"> <header></header> <nav></nav> <article> <section></section> </article> <aside></aside> <footer></footer> </div> 14
- 15. header, nav, article, section, aside footer { display: block; } 15
- 16. How do you represent the date? • Tuesday, 13th July, 2010 • July 13th, 2010 • 2010, July 13th 16
- 17. How do you represent time? • 9:58 AM • 09:58 17
- 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. <article> <time datetime="2010-07-13T19:30:00-05:00" pubdate> 7:30 pm </time> </article> 19
- 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. <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. <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> & <span rel="tag">HTML5</span>. </p> </article> 22
- 23. Forms 23
- 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. <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
- 27. 37signals Launchpad 27
- 28. Compatibility IE Firefox Chrome iPhone Android ☐ ☑ ☑ ☑ ? 28
- 29. New Input Types 29
- 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. 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. • Web browser will provided the validation. 32
- 33. • If you try to submit an email field with “youexample.com” instead of “you@exmaple.com” the browser will stop you. 33
- 34. Virtual Keyboards 34
- 35. Geolocation 35
- 36. • The ability to find where the user is located. • Uses an attached GPS device. • Or the users external IP address. 36
- 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. Local Storage 38
- 39. Cookies on Steroids 39
- 40. With non of the bandwidth drawbacks 40
- 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. • Internet Explore=>8.0 • Mozilla Firefox=>3.5 • Chrome=>4.0 • Opera=>10.5 • iOS=>2.0 • Android=>2.0 42
- 43. var first_name = localStorage.getItem("first_name"); localStorage.setItem("first_name", first_name); 43
- 44. Web SQL Database • Allows you to use a SQLite database for local storage. 44
- 45. Offline Web Applications 45
- 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
- 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. <video> Tag 49
- 50. • Allows you to server the best video format (MP4, Ogg Vorbis, WebM, H.264) for the user. 50
- 51. Will this kill Flash? 51
- 52. For Video? Yes. 52
- 53. For anything else? No. 53
- 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. I don’t know anything about Canvas. 55
- 56. Sorry 56
- 57. Who’s Pushing HTML5 57
- 58. Apple 58
- 59. j.mp/aUVu1w 59
- 60. apple.com/html5 60
- 61. Google 61
- 62. • HTML5Rocks <html5rocks.com> • YouTube HTML5 <youtube.com/html5> • Gmail supports HTML5 Drag and Drop <myl.be/6g7l> 62
- 63. google.com/pacman 63
- 64. youtube.com/chromefastball 64
- 65. 65
- 66. 66
- 67. 67