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
41
Human-Centered Product Design
Avatar for J Cornelius jc
3
380
Designing for Humans
Avatar for J Cornelius jc
1
93
Redesign Your Design Thinking
Avatar for J Cornelius jc
5
1.3k
Digital Fluency and User Experience
Avatar for J Cornelius jc
1
230
Mobile Commerce Mistakes
Avatar for J Cornelius jc
1
170
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
レガシーシステム刷新における TypeSpec スキーマ駆動開発のすゝめ
Avatar for karacoro / からころ tsukuha
1
490
Service Monitoring Platformについて
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
330
[CV勉強会@関東 ICCV2025 読み会] World4Drive: End-to-End Autonomous Driving via Intention-aware Physical Latent World Model (Zheng+, ICCV 2025)
Avatar for abemii_ abemii
0
240
【M3】攻めのセキュリティの実践！プロアクティブなセキュリティ対策の実践事例
Avatar for mizu axelmizu
0
180
機密情報の漏洩を防げ！ Webフロントエンド開発で意識すべき漏洩パターンとその対策
Avatar for mizdra mizdra
PRO
15
5.6k
ABEMAのCM配信を支えるスケーラブルな分散カウンタの実装
Avatar for Honoka Toda hono0130
4
1.1k
AI時代の戦略的アーキテクチャ 〜Adaptable AI をアーキテクチャで実現する〜 / Enabling Adaptable AI Through Strategic Architecture
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
14
8k
ある編集者のこれまでとこれから —— 開発者コミュニティと歩んだ四半世紀
Avatar for 稲尾尚徳 inao
5
3.5k
Tomcatが起動しない！？SecureRandomと乱数デバイスの罠​
Avatar for k.fujikawa8 fujikawa8
1
110
膨大なデータをどうさばく？ Java × MQで作るPub/Subアーキテクチャ
Avatar for igu zenta
0
120
AI駆動開発を実現するためのアーキテクチャと取り組み
Avatar for Yuichiro Yamashita baseballyama
14
9.5k
組織の“見えない壁”を越えよ！エンタープライズシフトに必須な3つのPMの「在り方」変革 #pmconf2025
Avatar for Masakazu Inaba masakazu178
1
650

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k

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