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

HTML5 - Yeah!

Avatar for J Cornelius J Cornelius
November 18, 2011
Technology
3
360

HTML5 - Yeah!

Presented at ReMix South, Aug. 6th 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
38
Human-Centered Product Design
Avatar for J Cornelius jc
3
370
Designing for Humans
Avatar for J Cornelius jc
1
89
Redesign Your Design Thinking
Avatar for J Cornelius jc
5
1.2k
Digital Fluency and User Experience
Avatar for J Cornelius jc
1
220
Mobile Commerce Mistakes
Avatar for J Cornelius jc
1
160
Design, Experience, Startups
Avatar for J Cornelius jc
3
170
Design for Success - Fundamentals that Build Brand
Avatar for J Cornelius jc
3
570
The Why of HTML5 - ConvergeSE 2012
Avatar for J Cornelius jc
2
280

Other Decks in Technology

See All in Technology
実装で解き明かす並行処理の歴史
Avatar for ZOZO Developers zozotech
PRO
1
320
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
2k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
Avatar for Sagara sagara
0
200
Azure Well-Architected Framework入門
Avatar for tomokusaba tomokusaba
1
290
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
2
980
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
120
From Prompt to Product @ How to Web 2025, Bucharest, Romania
Avatar for Jan Werner janwerner
0
120
生成AIを活用したZennの取り組み事例
Avatar for igarashi ryosukeigarashi
0
200
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ：検査・適応で未来を開発 / AI-driven product owner. scrummat2025
Avatar for yosuke nagai yosuke_nagai
4
590
FastAPIの魔法をgRPC/Connect RPCへ
Avatar for MonotaRO monotaro
PRO
1
740
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
120
10年の共創が示す、これからの開発者と企業の関係 ～ Crossroad
Avatar for SORACOM soracom
PRO
1
170

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k

Transcript

  1. Monday, August 8, 11

  2. #remixhtml5 Monday, August 8, 11

  3. Monday, August 8, 11

  4. WHY? Monday, August 8, 11

  5. The Internet is a strange, huge beast. It is getting

    bigger, faster and more mobile each day.” http://www.onlineschools.org/state-of-the-internet/soti.html “ Monday, August 8, 11

  6. 4,835,049,149 Monday, August 8, 11

  7. www.lingscars.com Monday, August 8, 11

  8. TIMELINE Monday, August 8, 11

  9. HTML 2 Nov. 1995 Coolio - Gangsta’s Paradise Monday, August

    8, 11

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

    Monday, August 8, 11

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

    Monday, August 8, 11

  12. XHTML 1.0 Jan. 2000 The Presidents of the United States

    of America - Lump Monday, August 8, 11

  13. /> Monday, August 8, 11

  14. XHTML 1.1 May 2001 Janet Jackson - All For You

    Monday, August 8, 11

  15. HTML5 Jun. 2004 Usher - Yeah! Monday, August 8, 11

  16. HTML5 Jun. 2004 I’ll get you! apple.com/hotnews/thoughts-on-flash/ Monday, August 8,

    11

  17. apple.com/html5 Monday, August 8, 11

  18. Web 3.0 Web 2.0 What it’s not: Flash Killer Silverlight

    Killer CSS3 jQuery Animations MooTools YUI Video Audio Games Everything Monday, August 8, 11

  19. HTML 5 see that space? ...and it’s not Monday, August

    8, 11

  20. What it is. Monday, August 8, 11

  21. In the thinking of its creators, HTML5 was always just

    HTML.” ~ Jeffrey Zeldman http://www.zeldman.com/2011/01/27/html5-vs-html/ “ Monday, August 8, 11

  22. Natural evolution of HTML. HTML http://blog.whatwg.org/html-is-the-new-html5 Monday, August 8, 11

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

    ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11

  24. SEMANTICS Monday, August 8, 11

  25. /> > == /> > > but really Monday, August

    8, 11

  26. <!DOCTYPE html> Monday, August 8, 11

  27. <meta charset=”utf-8”> Monday, August 8, 11

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

    Jeremy Keith (@adactio) Monday, August 8, 11

  29. <a href=”#”> <h2>Heading</h2> <p>Text</p> </a> Hat Tip: Jeremy Keith (@adactio)

    Monday, August 8, 11

  30. <header> <nav> <footer> <section> <article> <aside> <details> <summary> <figure> <video>

    <audio> <canvas> Monday, August 8, 11

  31. <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 (@adactio) Monday, August 8, 11

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

    Jeremy Keith (@adactio) Monday, August 8, 11

  33. <time> <input type=”email”> <input type=”url”> Monday, August 8, 11

  34. http://dev.opera.com/articles/view/new-form-features-in-HTML5/ Monday, August 8, 11

  35. <section> <article> Monday, August 8, 11

  36. http://andyrutledge.com/news-redux.php Monday, August 8, 11

  37. Section or Article? http://andyrutledge.com/news-redux.php Monday, August 8, 11

  38. <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> <section id=”content”> <p>When the 79th minute...</p> <p>...</p> </section> <aside> <a>Print</a> <a>Single Page</a> <ul><li>...</li><li>...</li></ul> </aside> http://andyrutledge.com/news-redux.php Monday, August 8, 11

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

    ACCESS CONNECTIVITY OFFLINE STORAGE PERFORMANCE & INTEGRATION Monday, August 8, 11

  40. www.nikebetterworld.com Monday, August 8, 11

  41. www.thisshell.com Monday, August 8, 11

  42. http://mbostock.github.com/d3/ex/stack.html Monday, August 8, 11

  43. http://mbostock.github.com/d3/ex/bullet.html Monday, August 8, 11

  44. phonegap.com Monday, August 8, 11

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

    Flash.” ~ Tom Conrad, CTO - Pandora “ pandora.com/newpandora Monday, August 8, 11

  46. WHY? Monday, August 8, 11

  47. You already know it. Monday, August 8, 11

  48. What about browser support, man? Monday, August 8, 11

  49. Monday, August 8, 11

  50. Browsers already know it, too. Monday, August 8, 11

  51. document.createElement(); http://html5shiv.googlecode.com Monday, August 8, 11

  52. document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... http://html5shiv.googlecode.com Monday, August

    8, 11

  53. Offline Storage Monday, August 8, 11

  54. Geolocation Monday, August 8, 11

  55. Because it’s already all around you. Monday, August 8, 11

  56. Because of IE6. Monday, August 8, 11

  57. 95% of the Web doesn’t validate. Monday, August 8, 11

  58. Beyond the Rendering Engine Monday, August 8, 11

  59. <b><i>Hi there</b></i> http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11

  60. Internet Explorer 9, Safari 5 <b><i>Hi there</i></b> <b><i>Hi there</i></b><i></i> Firefox,

    Opera, Chrome http://labs.opera.com/news/2011/02/22/ Monday, August 8, 11

  61. Because it’s cool. Monday, August 8, 11

  62. Resources Monday, August 8, 11

  63. vid.ly Monday, August 8, 11

  64. html5boilerplate.com @boiler_plate Monday, August 8, 11

  65. modernizr.com @modernizr Monday, August 8, 11

  66. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills Monday, August 8, 11

  67. MORE RESOURCES - diveintohtml5.com - html5doctor.com - html5wow.com - html5demos.com

    - html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.com Monday, August 8, 11

  68. 400 New people come online every minute 4,835,049,149 Monday, August

    8, 11

  69. www.lingscars.com Monday, August 8, 11

  70. nissanusa.com/leaf-electric-car Monday, August 8, 11

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

    Monday, August 8, 11

  72. Thank you. J. Cornelius jcornelius.com Monday, August 8, 11