Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Why of HTML5 - ConvergeSE 2012

The Why of HTML5 - ConvergeSE 2012

HTML5 isn't just about markup; there's a lot more to care about. This talk will cover "why" you should be using HTML5 today.

878d748403126c4fc92e87e30c4764d0?s=128

J Cornelius

April 27, 2012
Tweet

Transcript

  1. None
  2. Hi! I’m J. @jc #convergese jcornelius.com

  3. None
  4. WHY?

  5. 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.html “
  6. 4,835,049,149

  7. None
  8. TIMELINE

  9. HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise

  10. HTML 3.2 Jan. 1997 Kenny G - Six of Hearts

  11. HTML 4 Dec. 1997 Eminem - The Slim Shady EP

  12. HTML5 Jun.

  13. HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/

  14. apple.com/html5

  15. What it is.

  16. In the thinking of its creators, HTML5 was always just

    HTML.” ~ Jeffrey Zeldman zeldman.com/2011/01/27/html5-vs-html “
  17. Natural evolution of HTML. blog.whatwg.org/html-is-the-new-html5

  18. Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE

    ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION
  19. SEMANTICS

  20. <!DOCTYPE html>

  21. <meta charset=“utf-8”>

  22. <h2> <a href=”#”>Heading</a> </h2> <p> <a href=”#”>Text</a> </p> Hat Tip:

    Jeremy Keith
  23. <a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith

  24. <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
  25. <footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip:

    Jeremy Keith
  26. <header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video>

    <audio> <canvas>
  27. <header> <nav> <footer>

  28. <div class=”header”> <h1>Title</h1> </div>

  29. <header> <h1>Title</h1> </header>

  30. <header> <h1>Title</h1> <h2>Subtitle</h2> </header>

  31. <header> <h1>Title</h1> <h2>Subtitle</h2> <ul class=”nav”> <li><a href=”#”>Link</a><li> <li><a href=”#”>Link</a><li> <li><a

    href=”#”>Link</a><li> </ul> </header>
  32. <header> <h1>Title</h1> <h2>Subtitle</h2> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a href=”#”>Link</a>

    </nav> </header>
  33. <header> <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a>

    <a href=”#”>Link</a> </nav> </header>
  34. <article> <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> <p> ... </p> <p> ...

    </p> </article>
  35. <header> <h1>Page Title</h1> </header> <article> <hgroup> <h1>Article Title</h1> <h2>Article Subtitle</h2>

    </hgroup> </article> <footer> <h3>Links</h3> <nav> ... </nav> </footer> http://gsnedders.html5.org/outliner/ 1. Page Title a. Article Title b. Links
  36. <footer> <ul class=”subnav”> <li><a href=”#”>Link</a></li> <li><a href=”#”>Link</a></li> <li><a href=”#”>Link</a></li> </ul>

    <p>Copyright &copy; 2012</p> </footer>
  37. <footer> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a href=”#”>Link</a> </nav> <p>Copyright

    &copy; 2012</p> </footer>
  38. <header> ... </header> <div> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a

    href=”#”>Link</a> </nav> <p> ... </p> </div> <div> ... </div> <footer> ... </footer>
  39. nav { padding:.35em .5em; } header nav { border-bottom:2px solid

    #aaa; margin:1.65em 0; } footer nav { border-top:1px solid #ddd; margin:3em 0 0; }
  40. <section> <article>

  41. ...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 Specification
  42. andyrutledge.com/news-redux.php

  43. Section or Article? andyrutledge.com/news-redux.php

  44. <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> <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> andyrutledge.com/news-redux.php
  45. <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 Lawson
  46. nikebetterworld.com

  47. <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>
  48. <section> <article> logical sections of sites and applications. content that

    can be used elsewhere. gsnedders.html5.org/outliner
  49. <time>

  50. <p> ConvergeSE is <time datetime=”2012-04-27”> Today </time> in Columbia, SC.

    </p>
  51. <time>1998-02-17</time>

  52. datetime="14:30" datetime="2011-11-17T14:30+00:00" datetime="2011-11-17T14:30Z" <time> ✔ ✘ datetime="0300 B.C." datetime="July 2004"

  53. <article> <header> <p>Published on <time datetime=”2012-04-27” pubdate>April 27th, 2012</time> </p>

    </header> <div class=”content”> ... </div> </article>
  54. <form>

  55. <input type=”email”> <input type=”url”> <input type=”tel”> <input type=”search”> <input type=”color”>

    <input type=”range”> <input type=”number”>
  56. W3C Table of Content Attributes http://dev.w3.org/html5/spec/single-page.html#the-input-element

  57. <div class="placeholding-input email"> <input type="text" class="text-input email-input" name="session[email]" title="Email Address"

    autocomplete="on"> <span class="placeholder">Email Address</span> </div>
  58. <label class="email"> <input type="email" name="session[email]" title="Email Address" autocomplete="on"> </label> (blame

    Internet Explorer)
  59. <label> Part Number: <input type=”text” pattern=”[0-9][A-Z]{3}” title="A part number is

    a digit followed by three uppercase letters."> </label>
  60. dev.opera.com/articles/view/new-form-features-in-HTML5

  61. <audio> <video>

  62. <audio src="song.oga" controls> <a href="song.oga">Download </a> </audio>

  63. <audio preload=”auto” controls> <source src=”song.mp3”> <source src=”song.ogg”> <!-- flash fall

    back --> </audio>
  64. Chrome Firefox Safari Opera ( requires { display:block } )

  65. <video src=”video.ogv” poster=”poster.jpg” width=”320” height=”240” controls> <a href=”video.ogv”>Download</a> </video>

  66. <video poster=”poster.jpg” width=”320” height=”240” controls> <source src=”video.ogv” type=”video/ogg”> <source src=”video.mp4”

    type=”video/mp4”> <a href=”video.ogv”>Download</a> <!-- flash fall back --> </video>
  67. Chrome Firefox Safari Opera

  68. www.thisshell.com

  69. <nsfw>

  70. <nsfw> <figure> <video src="party.mp4"></video> <figcaption>Party!</figcaption> </figure> </nsfw>

  71. Beyond the Rendering Engine

  72. <b><i>Hi there</b></i>

  73. Internet Explorer 9, Safari 5 <b><i>Hi there</i></b> <b><i>Hi there</i></b><i></i> Firefox,

    Opera, Chrome labs.opera.com/news/2011/02/22/
  74. http://mbostock.github.com/d3/

  75. http://mbostock.github.com/d3/

  76. http://www.cuttherope.ie/dev/

  77. If you want to deliver a Web experience on multiple

    devices, you have to do it in HTML5” “ ~ Danny Winokur Vice President and GM of Interactive Development Adobe
  78. WHY?

  79. You already know it.

  80. What about browser support, man?

  81. None
  82. Browsers already know it, too.

  83. html5shiv html5shiv.googlecode.com

  84. document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... document.createElement(); html5shiv.googlecode.com

  85. Because it’s already all around you.

  86. Because of IE.

  87. 95% of the Web doesn’t validate.

  88. Resources

  89. html5boilerplate.com @boiler_plate

  90. modernizr.com @modernizr

  91. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

  92. vid.ly

  93. phonegap.com

  94. None
  95. MORE RESOURCES - html5doctor.com - html5.validator.nu - html5demos.com - html5accessibility.com/HTML5ASS/

    - html5labs.interoperabilitybridges.com - twitter.com/jc/html5
  96. 400 New people come online every minute. 4,835,049,149

  97. None
  98. disneydigitalbooks.go.com/tron/

  99. “Do or do not. There is no try.” ~ Yoda

  100. @jc #convergese jcornelius.com Thanks!