HTML5 - Yeah!

Presented at ReMix South, Aug. 6th 2011.

Transcript

1. Monday, August 8, 11
2. #remixhtml5 Monday, August 8, 11
3. Monday, August 8, 11
4. WHY? Monday, August 8, 11
5. The Internet is a strange, huge beast. It is getting bigger, faster and more mobile each day.” http://www.onlineschools.org/state-of-the-internet/soti.html “ Monday, August 8, 11
6. 4,835,049,149 Monday, August 8, 11
7. www.lingscars.com Monday, August 8, 11
8. TIMELINE Monday, August 8, 11
9. HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise Monday, August 8, 11
10. HTML 3.2 Jan. 1997 Kenny G - Six of Hearts Monday, August 8, 11
11. HTML 4 Dec. 1997 Eminem - The Slim Shady EP Monday, August 8, 11
12. XHTML 1.0 Jan. 2000 The Presidents of the United States of America - Lump Monday, August 8, 11
13. /> Monday, August 8, 11
14. XHTML 1.1 May 2001 Janet Jackson - All For You Monday, August 8, 11
15. HTML5 Jun. 2004 Usher - Yeah! Monday, August 8, 11
16. HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/ Monday, August 8, 11
17. apple.com/html5 Monday, August 8, 11
18. Web 3.0 Web 2.0 What it’s not: Flash Killer Silverlight Killer CSS3 jQuery Animations MooTools YUI Video Audio Games Everything Monday, August 8, 11
19. HTML 5 see that space? ...and it’s not Monday, August 8, 11
20. What it is. Monday, August 8, 11
21. In the thinking of its creators, HTML5 was always just HTML.” ~ Jeffrey Zeldman http://www.zeldman.com/2011/01/27/html5-vs-html/ “ Monday, August 8, 11
22. Natural evolution of HTML. HTML http://blog.whatwg.org/html-is-the-new-html5 Monday, August 8, 11
23. Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11
24. SEMANTICS Monday, August 8, 11
25. /> > == /> > > but really Monday, August 8, 11
26. <!DOCTYPE html> Monday, August 8, 11
27. <meta charset=”utf-8”> Monday, August 8, 11
28. <h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip: Jeremy Keith (@adactio) Monday, August 8, 11
29. <a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith (@adactio) Monday, August 8, 11
30. <header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video> <audio> <canvas> Monday, August 8, 11
31. <div class=”footer”> <div class=”nav”> <ul> <li><a href=”#”>This</a></li> <li><a href=”#”>That</a></li> </ul> </div> </div> Hat Tip: Jeremy Keith (@adactio) Monday, August 8, 11
32. <footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip: Jeremy Keith (@adactio) Monday, August 8, 11
33. <time> <input type=”email”> <input type=”url”> Monday, August 8, 11
34. http://dev.opera.com/articles/view/new-form-features-in-HTML5/ Monday, August 8, 11
35. <section> <article> Monday, August 8, 11
36. http://andyrutledge.com/news-redux.php Monday, August 8, 11
37. Section or Article? http://andyrutledge.com/news-redux.php Monday, August 8, 11
38. <article> </article> <header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details> </header> <figure> <img src=”/photos/yay.jpg”> <figcaption>Laur...</figcaption> </figure> <section id=”content”> <p>When the 79th minute...</p> <p>...</p> </section> <aside> <a>Print</a> <a>Single Page</a> <ul><li>...</li><li>...</li></ul> </aside> http://andyrutledge.com/news-redux.php Monday, August 8, 11
39. Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11
40. www.nikebetterworld.com Monday, August 8, 11
41. www.thisshell.com Monday, August 8, 11
42. http://mbostock.github.com/d3/ex/stack.html Monday, August 8, 11
43. http://mbostock.github.com/d3/ex/bullet.html Monday, August 8, 11
44. phonegap.com Monday, August 8, 11
45. We realized we could do the full Pandora experience without Flash.” ~ Tom Conrad, CTO - Pandora “ pandora.com/newpandora Monday, August 8, 11
46. WHY? Monday, August 8, 11
47. You already know it. Monday, August 8, 11
48. What about browser support, man? Monday, August 8, 11
49. Monday, August 8, 11
50. Browsers already know it, too. Monday, August 8, 11
51. document.createElement(); http://html5shiv.googlecode.com Monday, August 8, 11
52. document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... http://html5shiv.googlecode.com Monday, August 8, 11
53. Offline Storage Monday, August 8, 11
54. Geolocation Monday, August 8, 11
55. Because it’s already all around you. Monday, August 8, 11
56. Because of IE6. Monday, August 8, 11
57. 95% of the Web doesn’t validate. Monday, August 8, 11
58. Beyond the Rendering Engine Monday, August 8, 11
59. <b><i>Hi there</b></i> http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11
60. Internet Explorer 9, Safari 5 <b><i>Hi there</i></b> <b><i>Hi there</i></b><i></i> Firefox, Opera, Chrome http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11
61. Because it’s cool. Monday, August 8, 11
62. Resources Monday, August 8, 11
63. vid.ly Monday, August 8, 11
64. html5boilerplate.com @boiler_plate Monday, August 8, 11
65. modernizr.com @modernizr Monday, August 8, 11
66. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Monday, August 8, 11
67. MORE RESOURCES - diveintohtml5.com - html5doctor.com - html5wow.com - html5demos.com - html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.com Monday, August 8, 11
68. 400 New people come online every minute 4,835,049,149 Monday, August 8, 11
69. www.lingscars.com Monday, August 8, 11
70. nissanusa.com/leaf-electric-car Monday, August 8, 11
71. “Do or do not. There is no try.” ~ Yoda Monday, August 8, 11
72. Thank you. J. Cornelius jcornelius.com Monday, August 8, 11