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
30
Human-Centered Product Design
Avatar for J Cornelius jc
3
360
Designing for Humans
Avatar for J Cornelius jc
1
84
Redesign Your Design Thinking
Avatar for J Cornelius jc
5
1.1k
Digital Fluency and User Experience
Avatar for J Cornelius jc
1
210
Mobile Commerce Mistakes
Avatar for J Cornelius jc
1
160
Design, Experience, Startups
Avatar for J Cornelius jc
3
160
Design for Success - Fundamentals that Build Brand
Avatar for J Cornelius jc
3
560
The Why of HTML5 - ConvergeSE 2012
Avatar for J Cornelius jc
2
280

Other Decks in Technology

See All in Technology
大手企業のAIツール導入の壁を越えて：サイバーエージェントのCursor活用戦略
Avatar for Gunther Brunner gunta
18
3.8k
Contract One Dev Group 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6k
Cursor Meetup Tokyo
Avatar for Shunta Komatsu iamshunta
2
350
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
17k
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
Avatar for yamamoto-yuta yamamotoyuta
0
240
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
Avatar for Ikuo Suyama martin_lover
1
650
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.7k
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.1k
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
Avatar for SHIFT EVOLVE shift_evolve
3
160
大規模PaaSにおける監視基盤の構築と効率化の道のり
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
180
Scale Security Programs with Scorecarding
Avatar for Rami McCarthy ramimac
0
430
2025advance01
Avatar for minamizaki minamizaki
0
130

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.6k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
1
79

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