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
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.4k
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
建設DXを支えるANDPAD: 2025年のセキュリティの取り組みと卒業したいセキュリティ
Avatar for ANDPAD inc andpad
0
170
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
4
1.8k
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
220
Phase08_クイックウィン実装
Avatar for overflow ,Inc overflowinc
0
1.6k
PostgreSQL 18のNOT ENFORCEDな制約とDEFERRABLEの関係
Avatar for Yasuo Honda yahonda
0
110
スケールアップ企業でQA組織が機能し続けるための組織設計と仕組み〜ボトムアップとトップダウンを両輪としたアプローチ〜

Avatar for SmartHR 品質保証本部 qa
0
190
A4）シラバスを超えて語る、テストマネジメント
Avatar for Sammy(MoritaMasami) moritamasami
0
120
AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた
Avatar for やくも yakumo
2
220
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
190
20260321_エンベディングってなに？RAGってなに？エンベディングの説明とGemini Embedding 2 の紹介
Avatar for tsho tsho
0
160
スピンアウト講座06_認証系（API-OAuth-MCP）入門
Avatar for overflow ,Inc overflowinc
0
1k
Escape from Excel方眼紙 ～マークダウンで繋ぐ、人とAIの架け橋～ /nikkei-tech-talk44
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
190

Featured

See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
200
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
93
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
180
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
200
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
400
HDC tutorial
Avatar for Michiel Stock michielstock
1
580
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
990
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.5k

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