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
44
Human-Centered Product Design
Avatar for J Cornelius jc
3
390
Designing for Humans
Avatar for J Cornelius jc
1
98
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
170
Design, Experience, Startups
Avatar for J Cornelius jc
3
180
Design for Success - Fundamentals that Build Brand
Avatar for J Cornelius jc
3
580
The Why of HTML5 - ConvergeSE 2012
Avatar for J Cornelius jc
2
290

Other Decks in Technology

See All in Technology
プロンプトエンジニアリングを超えて：自由と統制のあいだでつくる Platform × Context Engineering
Avatar for yuriemori yuriemori
0
460
これまでのネットワーク運用を変えるかもしれないアプデをおさらい
Avatar for da-hatakeyama hatahata021
4
210
ファインディにおけるフロントエンド技術選定の歴史
Avatar for puku0x puku0x
2
1.5k
Kusakabe_面白いダッシュボードの表現方法
Avatar for y k ykka
0
300
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
63k
コミュニティが持つ「学びと成長の場」としての作用 / RSGT2026
Avatar for ama-ch ama_ch
2
340
AWSと生成AIで学ぶ！実行計画の読み解き方とSQLチューニングの実践
Avatar for やくも yakumo
2
580
Security Hub と出会ってから 1年半が過ぎました
Avatar for rch850 rch850
0
150
Scrum Guide Expansion Pack が示す現代プロダクト開発への補完的視点
Avatar for Sonjin Yamamoto sonjin
0
730
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
Avatar for Guillaume Laforge glaforge
0
360
産業的変化も組織的変化も乗り越えられるチームへの成長 〜チームの変化から見出す明るい未来〜
Avatar for KAKEHASHI kakehashi
PRO
1
780
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.6k

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
54
49k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
0
230
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
100
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
890
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
130
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
48
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k

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