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

HTML5 - Yeah!

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for J Cornelius J Cornelius
November 18, 2011
Technology
380
3

HTML5 - Yeah!

Presented at ReMix South, Aug. 6th 2011.

Avatar for J Cornelius

J Cornelius

November 18, 2011

More Decks by J Cornelius

See All by J Cornelius
Product Strategy for the New Normal
Avatar for J Cornelius jc
0
50
Human-Centered Product Design
Avatar for J Cornelius jc
3
400
Designing for Humans
Avatar for J Cornelius jc
1
110
Redesign Your Design Thinking
Avatar for J Cornelius jc
5
1.4k
Digital Fluency and User Experience
Avatar for J Cornelius jc
1
250
Mobile Commerce Mistakes
Avatar for J Cornelius jc
1
180
Design, Experience, Startups
Avatar for J Cornelius jc
3
190
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
310

Other Decks in Technology

See All in Technology
ハーネスエンジニアリング入門
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
110
AWS Transform CustomでIaCコードを自由自在に変換しよう
Avatar for k-kun duelist2020jp
0
240
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
Avatar for KAKEHASHI kakehashi
PRO
4
790
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ～解像度を圧倒的に高めPdMの価値を最大化させる方法～
Avatar for KAKEHASHI kakehashi
PRO
3
3.6k
ファインディの事業拡大を支える 拡張可能なデータ基盤へのリアーキテクチャ
Avatar for Noriaki Hiraki hiracky16
0
800
ハーネスエンジニアリングをやりすぎた話 ~そのハーネスは解体された~
Avatar for Gota gotalab555
5
2k
Anthropic「Long-running a gents」をGeminiで再現してみた
Avatar for t-kikuchi tkikuchi
0
770
The 7 pitfalls of AI
Avatar for Uwe Friedrichsen ufried
0
180
データ定義の混乱と戦う 〜 管理会計と財務会計 〜
Avatar for wonohe wonohe
0
170
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
Avatar for Wannes Rams wannesrams
0
260
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
Avatar for misoji engineer iotengineer22
0
420
GitHub Copilot Dev Days
Avatar for tomokusaba tomokusaba
0
140

Featured

See All Featured
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
910
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
190
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
320
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
360
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.7k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k

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