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

HTML5 - Hell Yeah!

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
590
The Why of HTML5 - ConvergeSE 2012
Avatar for J Cornelius jc
2
290

Other Decks in Technology

See All in Technology
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
コミュニティが変えるキャリアの地平線：コロナ禍新卒入社のエンジニアがAWSコミュニティで見つけた成長の羅針盤
Avatar for Kento Suzuki kentosuzuki
0
130
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
130
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
370
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
650
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
310
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
460
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
160
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
250
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
Avatar for Yudai Jinno yuu551
0
250
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
2
170

Featured

See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
100
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
250
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
200
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Scaling GitHub
Avatar for Zach Holman holman
464
140k

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