HTML5 Hell Yeah!

  • 1,308 views
Uploaded on

Presented at Web Visions Atlanta, Nov. 17th 2011.

Presented at Web Visions Atlanta, Nov. 17th 2011.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,308
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
28
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Friday, November 18, 11
  • 2. Friday, November 18, 11
  • 3. #wvhtml5Friday, November 18, 11
  • 4. Friday, November 18, 11
  • 5. WHY?Friday, November 18, 11
  • 6. “ The Internet is a strange, huge beast. It is getting bigger, faster and more mobile each day.” www.onlineschools.org/state-of-the-internet/soti.htmlFriday, November 18, 11
  • 7. 4,835,049,149Friday, November 18, 11
  • 8. www.lingscars.comFriday, November 18, 11
  • 9. Friday, November 18, 11
  • 10. TIMELINEFriday, November 18, 11
  • 11. HTML 2 Nov. 1995 Coolio - Gangsta’s ParadiseFriday, November 18, 11
  • 12. HTML 3.2 Jan. 1997 Kenny G - Six of HeartsFriday, November 18, 11
  • 13. HTML 4 Dec. 1997 Eminem - The Slim Shady EPFriday, November 18, 11
  • 14. HTML5 Jun.2004 Usher - Yeah!Friday, November 18, 11
  • 15. HTML5 Jun.2004 Usher - Yeah!Friday, November 18, 11
  • 16. HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11
  • 17. I’ll get you! HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11
  • 18. apple.com/html5Friday, November 18, 11
  • 19. apple.com/html5Friday, November 18, 11
  • 20. What it is.Friday, November 18, 11
  • 21. “ In the thinking of its creators, HTML5 was always just HTML.” ~ Jeffrey Zeldman zeldman.com/2011/01/27/html5-vs-htmlFriday, November 18, 11
  • 22. Natural evolution of HTML. blog.whatwg.org/html-is-the-new-html5Friday, November 18, 11
  • 23. Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE PERFORMANCE & CONNECTIVITY OFFLINE STORAGE INTEGRATION ACCESSFriday, November 18, 11
  • 24. SEMANTICSFriday, November 18, 11
  • 25. <!DOCTYPE html>Friday, November 18, 11
  • 26. <meta charset=“utf-8”>Friday, November 18, 11
  • 27. <h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip: Jeremy KeithFriday, November 18, 11
  • 28. <a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy KeithFriday, November 18, 11
  • 29. <header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video> <audio> <canvas>Friday, November 18, 11
  • 30. <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 KeithFriday, November 18, 11
  • 31. <footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip: Jeremy KeithFriday, November 18, 11
  • 32. <time>Friday, November 18, 11
  • 33. <p> Web Visions is <time datetime=”2011-11-17”> Today </time> at the MacQuarium. </p>Friday, November 18, 11
  • 34. <time> datetime="14:30" datetime="2011-11-17T14:30+00:00" datetime="2011-11-17T14:30Z" html5doctor.com/the-time-elementFriday, November 18, 11
  • 35. <input type=”email”> <input type=”url”>Friday, November 18, 11
  • 36. dev.opera.com/articles/view/new-form-features-in-HTML5Friday, November 18, 11
  • 37. <nsfw>Friday, November 18, 11
  • 38. <nsfw> <figure>   <video src="party.mp4"></video>   <figcaption>Party!</figcaption> </figure> </nsfw>Friday, November 18, 11
  • 39. <section> <article>Friday, November 18, 11
  • 40. “ ...a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.” ~ W3C SpecificationFriday, November 18, 11
  • 41. andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 42. andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 43. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 44. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 45. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 46. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 47. andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 48. <article></article> andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 49. <article> <header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details> </header></article> andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 50. <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></article> andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 51. <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> <div id=”content”> <p>When the 79th minute...</p> <p>...</p> </div></article> andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 52. <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> <div id=”content”> <p>When the 79th minute...</p> <p>...</p> </div> <aside> <a>Print</a> <a>Single Page</a> <ul><li>...</li><li>...</li></ul> </aside></article> andyrutledge.com/news-redux.phpFriday, November 18, 11
  • 53. “ <section> represents a generic document or application section…not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use <div> instead.” ~ Bruce LawsonFriday, November 18, 11
  • 54. nikebetterworld.comFriday, November 18, 11
  • 55. nikebetterworld.comFriday, November 18, 11
  • 56. <section class="story" id="story-freext"> <article> <header> <h2>One shoe does good, the other...</h2> <h1>Nike Free TR Fit</h1> <p>The Free TR Fit is designed with...</p> <a href="/nikeos/gamechangers/">Learn more</a> </header> </article> <div class="bg"></div> </section>Friday, November 18, 11
  • 57. <section> logical sections of sites and applications. <article> content that can be used elsewhere.Friday, November 18, 11
  • 58. <section> logical sections of sites and applications. <article> content that can be used elsewhere. gsnedders.html5.org/outlinerFriday, November 18, 11
  • 59. Beyond the Rendering EngineFriday, November 18, 11
  • 60. <b><i>Hi there</b></i> labs.opera.com/news/2011/02/22/Friday, November 18, 11
  • 61. Internet Explorer 9, Safari 5 <b><i>Hi there</i></b><i></i> Firefox, Opera, Chrome <b><i>Hi there</i></b> labs.opera.com/news/2011/02/22/Friday, November 18, 11
  • 62. pandora.com/newpandoraFriday, November 18, 11
  • 63. “ We realized we could do the full Pandora experience without Flash.” ~ Tom Conrad, CTO - Pandora pandora.com/newpandoraFriday, November 18, 11
  • 64. “ If you want to deliver a Web experience on multiple devices, you have to do it in HTML5” ~ Danny Winokur GM of Interactive Development - AdobeFriday, November 18, 11
  • 65. WHY?Friday, November 18, 11
  • 66. You already know it.Friday, November 18, 11
  • 67. What about browser support, man?Friday, November 18, 11
  • 68. Friday, November 18, 11
  • 69. Browsers already know it, too.Friday, November 18, 11
  • 70. html5shiv html5shiv.googlecode.comFriday, November 18, 11
  • 71. document.createElement(); document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... html5shiv.googlecode.comFriday, November 18, 11
  • 72. Because it’s already all around you.Friday, November 18, 11
  • 73. Because of IE6.Friday, November 18, 11
  • 74. 95% of the Web doesn’t validate.Friday, November 18, 11
  • 75. ResourcesFriday, November 18, 11
  • 76. html5boilerplate.com @boiler_plateFriday, November 18, 11
  • 77. modernizr.com @modernizrFriday, November 18, 11
  • 78. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsFriday, November 18, 11
  • 79. vid.lyFriday, November 18, 11
  • 80. phonegap.comFriday, November 18, 11
  • 81. MORE RESOURCES - html5doctor.com - html5.validator.nu - html5demos.com - html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.com - twitter.com/jc/html5Friday, November 18, 11
  • 82. 4,835,049,149Friday, November 18, 11
  • 83. 400 New people come online every minute.Friday, November 18, 11
  • 84. www.lingscars.comFriday, November 18, 11
  • 85. disneydigitalbooks.go.com/tron/Friday, November 18, 11
  • 86. “Do or do not. There is no try.” ~ YodaFriday, November 18, 11
  • 87. Thank you. Twitter: @jc Web: jcornelius.comFriday, November 18, 11