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.

J Cornelius

April 27, 2012
Tweet

More Decks by J Cornelius

Other Decks in Technology

Transcript

  1. 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 “
  2. In the thinking of its creators, HTML5 was always just

    HTML.” ~ Jeffrey Zeldman zeldman.com/2011/01/27/html5-vs-html “
  3. Application Platform SEMANTICS CSS 3 GRAPHICS & 3D MULTIMEDIA DEVICE

    ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION
  4. <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
  5. <header> ... </header> <div> <nav> <a href=”#”>Link</a> <a href=”#”>Link</a> <a

    href=”#”>Link</a> </nav> <p> ... </p> </div> <div> ... </div> <footer> ... </footer>
  6. 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; }
  7. ...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
  8. <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
  9. <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
  10. <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>
  11. <section> <article> logical sections of sites and applications. content that

    can be used elsewhere. gsnedders.html5.org/outliner
  12. 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