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

HTML5 - Hell Yeah!

J Cornelius
November 18, 2011
Technology
4
260

HTML5 - Hell Yeah!

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

J Cornelius

November 18, 2011
Tweet

More Decks by J Cornelius

See All by J Cornelius
Product Strategy for the New Normal
jc
0
28
Human-Centered Product Design
jc
3
350
Designing for Humans
jc
1
82
Redesign Your Design Thinking
jc
5
1.1k
Digital Fluency and User Experience
jc
1
200
Mobile Commerce Mistakes
jc
1
160
Design, Experience, Startups
jc
3
160
Design for Success - Fundamentals that Build Brand
jc
3
560
The Why of HTML5 - ConvergeSE 2012
jc
2
270

Other Decks in Technology

See All in Technology
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
ビジネスと現場活動をつなぐソフトウェアエンジニアリング～とあるスタートアッププロダクトの成長記録より～
mizunori
0
210
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
現場で役立つAPIデザイン
nagix
29
10k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460

Featured

See All Featured
Being A Developer After 40
akosma
89
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
A Tale of Four Properties
chriscoyier
158
23k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.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