Friday, November 18, 11
Friday, November 18, 11
#wvhtml5Friday, November 18, 11
Friday, November 18, 11
WHY?Friday, November 18, 11
“ The Internet is a strange,               huge beast. It is getting               bigger, faster and more               m...
4,835,049,149Friday, November 18, 11
www.lingscars.comFriday, November 18, 11
Friday, November 18, 11
TIMELINEFriday, November 18, 11
HTML 2                     Nov. 1995                          Coolio - Gangsta’s ParadiseFriday, November 18, 11
HTML 3.2                                          Jan. 1997                          Kenny G - Six of HeartsFriday, Novemb...
HTML 4                    Dec. 1997                          Eminem - The Slim Shady EPFriday, November 18, 11
HTML5                                      Jun.2004                          Usher - Yeah!Friday, November 18, 11
HTML5                                      Jun.2004                          Usher - Yeah!Friday, November 18, 11
HTML5                                                Jun. 2004                          apple.com/hotnews/thoughts-on-flash...
I’ll get              you!                         HTML5                                                Jun. 2004         ...
apple.com/html5Friday, November 18, 11
apple.com/html5Friday, November 18, 11
What it is.Friday, November 18, 11
“ In the thinking of its                     creators, HTML5 was                     always just HTML.”                   ...
Natural evolution                             of HTML.                          blog.whatwg.org/html-is-the-new-html5Frida...
Application                           Platform    SEMANTICS                 CSS 3       GRAPHICS  3D     MULTIMEDIA       ...
SEMANTICSFriday, November 18, 11
!DOCTYPE htmlFriday, November 18, 11
meta charset=“utf-8”Friday, November 18, 11
h2                a href=”#”Heading/a              /h2              p                a href=”#”Text/a              /p     ...
a href=”#”                h2Heading/h2                pText/p               /a                                   Hat Tip: ...
header nav footer           section article            aside details          summary figure            video audio        ...
div class=”footer”    div class=”nav”     ul      lia href=”#”This/a/li      lia href=”#”That/a/li     /ul    /div   /div ...
footer           nav            a href=”#”This/a            a href=”#”That/a           /nav          /footer              ...
timeFriday, November 18, 11
p            Web Visions is            time datetime=”2011-11-17”                   Today            /time            at t...
time               datetime=14:30               datetime=2011-11-17T14:30+00:00               datetime=2011-11-17T14:30Z  ...
input type=”email”                 input type=”url”Friday, November 18, 11
dev.opera.com/articles/view/new-form-features-in-HTML5Friday, November 18, 11
nsfwFriday, November 18, 11
nsfw       figure              video src=party.mp4/video              figcaptionParty!/figcaption       /figure  /nsfwFriday, ...
section                          articleFriday, November 18, 11
“         ...a self-contained composition in                          a document, page, application, or                   ...
andyrutledge.com/news-redux.phpFriday, November 18, 11
andyrutledge.com/news-redux.phpFriday, November 18, 11
Section                             or                          Article?                            andyrutledge.com/news-...
Section                             or                          Article?                            andyrutledge.com/news-...
Section                             or                          Article?                            andyrutledge.com/news-...
Section                             or                          Article?                            andyrutledge.com/news-...
andyrutledge.com/news-redux.phpFriday, November 18, 11
article/article                          andyrutledge.com/news-redux.phpFriday, November 18, 11
article header  h2Lauren Cheney Stan.../h2  summaryFrankfurt.../summary  detailsby Shelly.../details /header/article      ...
article header  h2Lauren Cheney Stan.../h2  summaryFrankfurt.../summary  detailsby Shelly.../details /header figure  img sr...
article header  h2Lauren Cheney Stan.../h2  summaryFrankfurt.../summary  detailsby Shelly.../details /header figure  img sr...
article header  h2Lauren Cheney Stan.../h2  summaryFrankfurt.../summary  detailsby Shelly.../details /header figure  img sr...
“ section represents a generic            document or application section…not            a generic container element. When...
nikebetterworld.comFriday, November 18, 11
nikebetterworld.comFriday, November 18, 11
section class=story id=story-freext              article                   header                    h2One shoe does good,...
section logical sections of                          sites and applications.            article content that can be       ...
section logical sections of                                sites and applications.            article content that can be ...
Beyond the                     Rendering EngineFriday, November 18, 11
biHi there/b/i                          labs.opera.com/news/2011/02/22/Friday, November 18, 11
Internet Explorer 9, Safari 5          biHi there/i/bi/i          Firefox, Opera, Chrome          biHi there/i/b          ...
pandora.com/newpandoraFriday, November 18, 11
“ We realized we could do the full                 Pandora experience without Flash.”                              ~ Tom C...
“ If you want to deliver a             Web experience on             multiple devices, you             have to do it in HT...
WHY?Friday, November 18, 11
You already know it.Friday, November 18, 11
What about browser support, man?Friday, November 18, 11
Friday, November 18, 11
Browsers already                            know it, too.Friday, November 18, 11
html5shiv                          html5shiv.googlecode.comFriday, November 18, 11
document.createElement();                 document.createElement(“header”);                 document.createElement(“footer...
Because it’s already                all around you.Friday, November 18, 11
Because of IE6.Friday, November 18, 11
95% of the Web                          doesn’t validate.Friday, November 18, 11
ResourcesFriday, November 18, 11
html5boilerplate.com   @boiler_plateFriday, November 18, 11
modernizr.com   @modernizrFriday, November 18, 11
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsFriday, November 18, 11
vid.lyFriday, November 18, 11
phonegap.comFriday, November 18, 11
MORE RESOURCES            - html5doctor.com            - html5.validator.nu            - html5demos.com            - html5...
4,835,049,149Friday, November 18, 11
400                           New people come                          online every minute.Friday, November 18, 11
www.lingscars.comFriday, November 18, 11
disneydigitalbooks.go.com/tron/Friday, November 18, 11
“Do or do not.                           There is no try.”                                       ~ YodaFriday, November 18...
Thank you.                Twitter: @jc   Web: jcornelius.comFriday, November 18, 11
Upcoming SlideShare
Loading in...5
×

HTML5 Hell Yeah!

1,435

Published on

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,435
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 Hell Yeah!

  1. 1. Friday, November 18, 11
  2. 2. Friday, November 18, 11
  3. 3. #wvhtml5Friday, November 18, 11
  4. 4. Friday, November 18, 11
  5. 5. WHY?Friday, November 18, 11
  6. 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.htmlFriday, November 18, 11
  7. 7. 4,835,049,149Friday, November 18, 11
  8. 8. www.lingscars.comFriday, November 18, 11
  9. 9. Friday, November 18, 11
  10. 10. TIMELINEFriday, November 18, 11
  11. 11. HTML 2 Nov. 1995 Coolio - Gangsta’s ParadiseFriday, November 18, 11
  12. 12. HTML 3.2 Jan. 1997 Kenny G - Six of HeartsFriday, November 18, 11
  13. 13. HTML 4 Dec. 1997 Eminem - The Slim Shady EPFriday, November 18, 11
  14. 14. HTML5 Jun.2004 Usher - Yeah!Friday, November 18, 11
  15. 15. HTML5 Jun.2004 Usher - Yeah!Friday, November 18, 11
  16. 16. HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11
  17. 17. I’ll get you! HTML5 Jun. 2004 apple.com/hotnews/thoughts-on-flash/Friday, November 18, 11
  18. 18. apple.com/html5Friday, November 18, 11
  19. 19. apple.com/html5Friday, November 18, 11
  20. 20. What it is.Friday, November 18, 11
  21. 21. “ In the thinking of its creators, HTML5 was always just HTML.” ~ Jeffrey Zeldman zeldman.com/2011/01/27/html5-vs-htmlFriday, November 18, 11
  22. 22. Natural evolution of HTML. blog.whatwg.org/html-is-the-new-html5Friday, November 18, 11
  23. 23. Application Platform SEMANTICS CSS 3 GRAPHICS 3D MULTIMEDIA DEVICE PERFORMANCE CONNECTIVITY OFFLINE STORAGE INTEGRATION ACCESSFriday, November 18, 11
  24. 24. SEMANTICSFriday, November 18, 11
  25. 25. !DOCTYPE htmlFriday, November 18, 11
  26. 26. meta charset=“utf-8”Friday, November 18, 11
  27. 27. h2 a href=”#”Heading/a /h2 p a href=”#”Text/a /p Hat Tip: Jeremy KeithFriday, November 18, 11
  28. 28. a href=”#” h2Heading/h2 pText/p /a Hat Tip: Jeremy KeithFriday, November 18, 11
  29. 29. header nav footer section article aside details summary figure video audio canvasFriday, November 18, 11
  30. 30. div class=”footer” div class=”nav” ul lia href=”#”This/a/li lia href=”#”That/a/li /ul /div /div Hat Tip: Jeremy KeithFriday, November 18, 11
  31. 31. footer nav a href=”#”This/a a href=”#”That/a /nav /footer Hat Tip: Jeremy KeithFriday, November 18, 11
  32. 32. timeFriday, November 18, 11
  33. 33. p Web Visions is time datetime=”2011-11-17” Today /time at the MacQuarium. /pFriday, November 18, 11
  34. 34. time datetime=14:30 datetime=2011-11-17T14:30+00:00 datetime=2011-11-17T14:30Z html5doctor.com/the-time-elementFriday, November 18, 11
  35. 35. input type=”email” input type=”url”Friday, November 18, 11
  36. 36. dev.opera.com/articles/view/new-form-features-in-HTML5Friday, November 18, 11
  37. 37. nsfwFriday, November 18, 11
  38. 38. nsfw figure   video src=party.mp4/video   figcaptionParty!/figcaption /figure /nsfwFriday, November 18, 11
  39. 39. section articleFriday, November 18, 11
  40. 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 SpecificationFriday, November 18, 11
  41. 41. andyrutledge.com/news-redux.phpFriday, November 18, 11
  42. 42. andyrutledge.com/news-redux.phpFriday, November 18, 11
  43. 43. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  44. 44. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  45. 45. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  46. 46. Section or Article? andyrutledge.com/news-redux.phpFriday, November 18, 11
  47. 47. andyrutledge.com/news-redux.phpFriday, November 18, 11
  48. 48. article/article andyrutledge.com/news-redux.phpFriday, November 18, 11
  49. 49. article header h2Lauren Cheney Stan.../h2 summaryFrankfurt.../summary detailsby Shelly.../details /header/article andyrutledge.com/news-redux.phpFriday, November 18, 11
  50. 50. article header h2Lauren Cheney Stan.../h2 summaryFrankfurt.../summary detailsby Shelly.../details /header figure img src=”/photos/yay.jpg” figcaptionLaur.../figcaption /figure/article andyrutledge.com/news-redux.phpFriday, November 18, 11
  51. 51. article header h2Lauren Cheney Stan.../h2 summaryFrankfurt.../summary detailsby Shelly.../details /header figure img src=”/photos/yay.jpg” figcaptionLaur.../figcaption /figure div id=”content” pWhen the 79th minute.../p p.../p /div/article andyrutledge.com/news-redux.phpFriday, November 18, 11
  52. 52. article header h2Lauren Cheney Stan.../h2 summaryFrankfurt.../summary detailsby Shelly.../details /header figure img src=”/photos/yay.jpg” figcaptionLaur.../figcaption /figure div id=”content” pWhen the 79th minute.../p p.../p /div aside aPrint/a aSingle Page/a ulli.../lili.../li/ul /aside/article andyrutledge.com/news-redux.phpFriday, November 18, 11
  53. 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 LawsonFriday, November 18, 11
  54. 54. nikebetterworld.comFriday, November 18, 11
  55. 55. nikebetterworld.comFriday, November 18, 11
  56. 56. section class=story id=story-freext article header h2One shoe does good, the other.../h2 h1Nike Free TR Fit/h1 pThe Free TR Fit is designed with.../p a href=/nikeos/gamechangers/Learn more/a /header /article div class=bg/div /sectionFriday, November 18, 11
  57. 57. section logical sections of sites and applications. article content that can be used elsewhere.Friday, November 18, 11
  58. 58. section logical sections of sites and applications. article content that can be used elsewhere. gsnedders.html5.org/outlinerFriday, November 18, 11
  59. 59. Beyond the Rendering EngineFriday, November 18, 11
  60. 60. biHi there/b/i labs.opera.com/news/2011/02/22/Friday, November 18, 11
  61. 61. Internet Explorer 9, Safari 5 biHi there/i/bi/i Firefox, Opera, Chrome biHi there/i/b labs.opera.com/news/2011/02/22/Friday, November 18, 11
  62. 62. pandora.com/newpandoraFriday, November 18, 11
  63. 63. “ We realized we could do the full Pandora experience without Flash.” ~ Tom Conrad, CTO - Pandora pandora.com/newpandoraFriday, November 18, 11
  64. 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 - AdobeFriday, November 18, 11
  65. 65. WHY?Friday, November 18, 11
  66. 66. You already know it.Friday, November 18, 11
  67. 67. What about browser support, man?Friday, November 18, 11
  68. 68. Friday, November 18, 11
  69. 69. Browsers already know it, too.Friday, November 18, 11
  70. 70. html5shiv html5shiv.googlecode.comFriday, November 18, 11
  71. 71. document.createElement(); document.createElement(“header”); document.createElement(“footer”); document.createElement(“section”); document.createElement(“nav”); and so on... html5shiv.googlecode.comFriday, November 18, 11
  72. 72. Because it’s already all around you.Friday, November 18, 11
  73. 73. Because of IE6.Friday, November 18, 11
  74. 74. 95% of the Web doesn’t validate.Friday, November 18, 11
  75. 75. ResourcesFriday, November 18, 11
  76. 76. html5boilerplate.com @boiler_plateFriday, November 18, 11
  77. 77. modernizr.com @modernizrFriday, November 18, 11
  78. 78. github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-PolyfillsFriday, November 18, 11
  79. 79. vid.lyFriday, November 18, 11
  80. 80. phonegap.comFriday, November 18, 11
  81. 81. MORE RESOURCES - html5doctor.com - html5.validator.nu - html5demos.com - html5accessibility.com/HTML5ASS/ - html5labs.interoperabilitybridges.com - twitter.com/jc/html5Friday, November 18, 11
  82. 82. 4,835,049,149Friday, November 18, 11
  83. 83. 400 New people come online every minute.Friday, November 18, 11
  84. 84. www.lingscars.comFriday, November 18, 11
  85. 85. disneydigitalbooks.go.com/tron/Friday, November 18, 11
  86. 86. “Do or do not. There is no try.” ~ YodaFriday, November 18, 11
  87. 87. Thank you. Twitter: @jc Web: jcornelius.comFriday, November 18, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×