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

HTML5 - Hell Yeah!

Avatar for J Cornelius J Cornelius
November 18, 2011
Technology
4
280

HTML5 - Hell Yeah!

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

Avatar for J Cornelius

J Cornelius

November 18, 2011
Tweet

More Decks by J Cornelius

See All by J Cornelius
Product Strategy for the New Normal
Avatar for J Cornelius jc
0
45
Human-Centered Product Design
Avatar for J Cornelius jc
3
390
Designing for Humans
Avatar for J Cornelius jc
1
100
Redesign Your Design Thinking
Avatar for J Cornelius jc
5
1.3k
Digital Fluency and User Experience
Avatar for J Cornelius jc
1
240
Mobile Commerce Mistakes
Avatar for J Cornelius jc
1
180
Design, Experience, Startups
Avatar for J Cornelius jc
3
180
Design for Success - Fundamentals that Build Brand
Avatar for J Cornelius jc
3
590
The Why of HTML5 - ConvergeSE 2012
Avatar for J Cornelius jc
2
290

Other Decks in Technology

See All in Technology
インシデント対応入門
Avatar for gr1m0h grimoh
7
5.7k
opsmethod第1回_アラート調査の自動化にむけて
Avatar for OKU/YAMATO yamatook
0
330
トラブルの大半は「言ってない」x「言ってない」じゃねーか！！
Avatar for nakamichi ichimichi
0
250
primeNumber DATA MANAGEMENT CAMP #2：
Avatar for 阿部 昌利 masatoshi0205
1
650
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
95k
Claude Cowork Plugins を読む - Skills駆動型業務エージェント設計の実像と構造
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
210
Snowflakeデータ基盤で挑むAI活用 〜4年間のDataOpsの基礎をもとに〜
Avatar for K.Mitsuhashi kaz3284
1
310
チームメンバー迷わないIaC設計
Avatar for hayama hayama17
5
3.4k
LINEヤフーにおけるAI駆動開発組織のプロデュース施策
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
300
Serverless Agent Architecture on Azure / serverless-agent-on-azure
Avatar for miyake miyake
1
120
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
作るべきものと向き合う - ecspresso 8年間の開発史から学ぶ技術選定 / 技術選定con findy 2026
Avatar for FUJIWARA Shunichiro fujiwara3
6
1.7k

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
810
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
360
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
480

Transcript

  1. Friday, November 18, 11

  2. Friday, November 18, 11

  3. #wvhtml5 Friday, 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.html “ Friday, November 18, 11

  7. 4,835,049,149 Friday, November 18, 11

  8. www.lingscars.com Friday, November 18, 11

  9. Friday, November 18, 11

  10. TIMELINE Friday, November 18, 11

  11. HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise Friday, November

    18, 11

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

    Friday, November 18, 11

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

    Friday, November 18, 11

  14. HTML5 Jun.

  15. HTML5 Jun.

  16. HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/ Friday, November 18, 11

  17. HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/ Friday, November 18,

    11

  18. apple.com/html5 Friday, November 18, 11

  19. apple.com/html5 Friday, 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-html “ Friday, November 18, 11

  22. Natural evolution of HTML. blog.whatwg.org/html-is-the-new-html5 Friday, November 18, 11

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

    ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Friday, November 18, 11

  24. SEMANTICS Friday, 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 Keith Friday, November 18, 11

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

    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 Keith Friday, November 18, 11

  31. <footer> <nav> <a href=”#”>This</a> <a href=”#”>That</a> </nav> </footer> Hat Tip:

    Jeremy Keith Friday, 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. datetime="14:30" datetime="2011-11-17T14:30+00:00" datetime="2011-11-17T14:30Z" <time> html5doctor.com/the-time-element Friday, November 18, 11

  35. <input type=”email”> <input type=”url”> Friday, November 18, 11

  36. dev.opera.com/articles/view/new-form-features-in-HTML5 Friday, 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 Specification Friday, November 18, 11

  41. andyrutledge.com/news-redux.php Friday, November 18, 11

  42. andyrutledge.com/news-redux.php Friday, November 18, 11

  43. Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11

  44. Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11

  45. Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11

  46. Section or Article? andyrutledge.com/news-redux.php Friday, November 18, 11

  47. andyrutledge.com/news-redux.php Friday, November 18, 11

  48. <article> </article> andyrutledge.com/news-redux.php Friday, November 18, 11

  49. <article> </article> <header> <h2>Lauren Cheney Stan...</h2> <summary>Frankfurt...</summary> <details>by Shelly...</details> </header>

    andyrutledge.com/news-redux.php Friday, November 18, 11

  50. <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> andyrutledge.com/news-redux.php Friday, November 18, 11

  51. <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> andyrutledge.com/news-redux.php Friday, November 18, 11

  52. <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 Friday, 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 Lawson Friday, November 18, 11

  54. nikebetterworld.com Friday, November 18, 11

  55. nikebetterworld.com Friday, 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> <article> logical sections of sites and applications. content that

    can be used elsewhere. Friday, November 18, 11

  58. <section> <article> logical sections of sites and applications. content that

    can be used elsewhere. gsnedders.html5.org/outliner Friday, November 18, 11

  59. Beyond the Rendering Engine Friday, 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> <b><i>Hi there</i></b><i></i> Firefox,

    Opera, Chrome labs.opera.com/news/2011/02/22/ Friday, November 18, 11

  62. pandora.com/newpandora Friday, November 18, 11

  63. We realized we could do the full Pandora experience without

    Flash.” ~ Tom Conrad, CTO - Pandora “ pandora.com/newpandora Friday, 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 - Adobe Friday, 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.com Friday, November 18, 11

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

    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. Resources Friday, November 18, 11

  76. html5boilerplate.com @boiler_plate Friday, November 18, 11

  77. modernizr.com @modernizr Friday, November 18, 11

  78. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Friday, November 18, 11

  79. vid.ly Friday, November 18, 11

  80. phonegap.com Friday, November 18, 11

  81. MORE RESOURCES - html5doctor.com - html5.validator.nu - html5demos.com - html5accessibility.com/HTML5ASS/

    - html5labs.interoperabilitybridges.com - twitter.com/jc/html5 Friday, November 18, 11

  82. 4,835,049,149 Friday, November 18, 11

  83. 400 New people come online every minute. Friday, November 18,

    11

  84. www.lingscars.com Friday, November 18, 11

  85. disneydigitalbooks.go.com/tron/ Friday, November 18, 11

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

    Friday, November 18, 11

  87. Thank you. Twitter: @jc Web: jcornelius.com Friday, November 18, 11