HTML5 - What the h#@$ is it?<br />Carlos A. Ramon<br />June 27, 2011<br />
Agenda<br /><ul><li>A Brief History
What is HTML5?
Why use it?
Who’s supporting it?
When should you use it?
Steps for modernization
Q and A</li></li></ul><li>A Brief History <br /><ul><li>1981 –Tim Berners Lee proposes an internet-based hypertext system
1989 –Tim Berners Lee writes a memo proposing an internet-based hypertext system
1991 –HTML tags first mentioned in PUBLIC!
1993 – 1.0 goes live
1995 – 2.0
1996 – CSS 1.0
1997 – W3C 4.0
2000 – XHTML 1.0 Released
2002 – Hooray Tableless CSS layouts
2004 –WHATWG starts work on HTML5 under the name Web Applications 1.0
2005 – Hello AJAX!
2008 –W3C pushes a working draft for HTML5
2009 –W3C announces the XHTML2 working group will stop work
2012 –HTML5 Candidate Recommendation
2022 –HTML5 Proposed Recommendation </li></li></ul><li>What is HTML5?<br /><ul><li>It’s a movement not a technology
It’s HTML + CSS + JS
A 900 page spec document
It contains 8 classes
Semantics
Upcoming SlideShare
Loading in...5
×

HTML5 - What h#@$ is it?

1,141

Published on

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

  • Be the first to like this

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

No notes for slide
  • WHATWG – Web Hypertext Application Technology Working Group
  • WHATWG – Web Hypertext Application Technology Working Group
  • You can now wrap links around block-level elements, rather than having to create links around every element inside the block element.
  • &lt;input type=&quot;search&quot;&gt;The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing.&lt;input type=&quot;email&quot;&gt;Used for input fields that shouldcontain an e-mail address.&lt;input type=&quot;url&quot;&gt;Used for input fields that should contain a URL address.&lt;input type=&quot;number&quot;&gt;Used for input fields that should contain a numericvalue.&lt;input type=&quot;tel&quot;&gt;Used for input fields that should containnumbersonly&lt;input type=&quot;range min=&quot;0&quot; max=&quot;10&quot; step=&quot;2&quot; value=&quot;6&quot;&gt;Used for input fields that should contain a value from a range of numbers.&lt;input type=&quot;date&quot;&gt;&lt;input type=&quot;month&quot;&gt;&lt;input type=&quot;week&quot;&gt;&lt;input type=&quot;time&quot;&gt;&lt;input type=&quot;datetime&quot;&gt; (utc time)&lt;input type=&quot;datetime-local&quot;&gt; (local time)&lt;input type=&quot;color&quot;&gt;Used for input fields that shouldcontain a color
  • Bruce LawsonJeffrey ZeldmanPaul IrishRemy SharpEthanMarcottehttp://html5boilerplate.com/http://www.w3.org/html/logo/ http://html5demos.com/
  • HTML5 - What h#@$ is it?

    1. 1. HTML5 - What the h#@$ is it?<br />Carlos A. Ramon<br />June 27, 2011<br />
    2. 2. Agenda<br /><ul><li>A Brief History
    3. 3. What is HTML5?
    4. 4. Why use it?
    5. 5. Who’s supporting it?
    6. 6. When should you use it?
    7. 7. Steps for modernization
    8. 8. Q and A</li></li></ul><li>A Brief History <br /><ul><li>1981 –Tim Berners Lee proposes an internet-based hypertext system
    9. 9. 1989 –Tim Berners Lee writes a memo proposing an internet-based hypertext system
    10. 10. 1991 –HTML tags first mentioned in PUBLIC!
    11. 11. 1993 – 1.0 goes live
    12. 12. 1995 – 2.0
    13. 13. 1996 – CSS 1.0
    14. 14. 1997 – W3C 4.0
    15. 15. 2000 – XHTML 1.0 Released
    16. 16. 2002 – Hooray Tableless CSS layouts
    17. 17. 2004 –WHATWG starts work on HTML5 under the name Web Applications 1.0
    18. 18. 2005 – Hello AJAX!
    19. 19. 2008 –W3C pushes a working draft for HTML5
    20. 20. 2009 –W3C announces the XHTML2 working group will stop work
    21. 21. 2012 –HTML5 Candidate Recommendation
    22. 22. 2022 –HTML5 Proposed Recommendation </li></li></ul><li>What is HTML5?<br /><ul><li>It’s a movement not a technology
    23. 23. It’s HTML + CSS + JS
    24. 24. A 900 page spec document
    25. 25. It contains 8 classes
    26. 26. Semantics
    27. 27. Offline & Storage
    28. 28. Device Access
    29. 29. Connectivity
    30. 30. Multimedia
    31. 31. 3D, Graphics & Effects
    32. 32. Performance & Integration
    33. 33. CSS3
    34. 34. It’s still HTML + CSS + JS</li></li></ul><li>Doctype<br /><?DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”><br />
    35. 35. NEW Doctype<br /><?DOCTYPE html><br />
    36. 36. Character Set<br /><meta http-equiv="Content-Type“ content="text/html; charset=utf-8" /><br />
    37. 37. NEW Character Set<br /><meta charset="utf-8" /><br />
    38. 38. Embedding JS<br /><script type="text/javascript"> </script><br />
    39. 39. NEW Embedding JS<br /><script> </script><br />
    40. 40. Linking CSS<br /><link rel="stylesheet" href="file.css“ type="text/css" media="all" /><br />
    41. 41. NEW Linking CSS<br /><link rel="stylesheet“ href="file.css" /><br />
    42. 42. Block Level Links<br /><li><br /><a href=“apage.html"><br /><imgsrc=“mypic.jpg"><br /><h3>Title</h3><br /><p>Text</p><br /></a><br /></li><br />
    43. 43. “Au Revoir!”<br /><ul><li>big
    44. 44. center
    45. 45. u
    46. 46. tt
    47. 47. s, strike
    48. 48. font
    49. 49. acronym
    50. 50. applet
    51. 51. dir
    52. 52. basefont
    53. 53. frame
    54. 54. frameset
    55. 55. noframes</li></li></ul><li>Hello Semantics<br /><ul><li>header
    56. 56. nav
    57. 57. article
    58. 58. section
    59. 59. aside
    60. 60. footer</li></li></ul><li>Sample HTML Structure<br /><!DOCTYPE HTML><br /><htmllang="en"><br /><head><br /><meta charset=utf-8><br /><title>Sample HTML5 Structure</title><br /><link rel="stylesheet“ href="file.css" /><br /></head><br /><body><br /><div id="container"><br /> <header><br /> <h1>Sample HTML5 Structure</h1><br /> <nav><br /> <ul><br /> <li><a href="#">Home</a></li><br /> <li><a href="#">About</a></li><br /> </ul><br /> </nav><br /> </header><br /> <section><br /> <hgroup><br /> <h1>MainSection</h1><br /> <h2>Thisis a sample HTML5 Page</h2><br /> </hgroup><br /> <article><br /> <p>Thisisthecontentforthefirstarticle</p><br /> </article><br /> <article><br /> <p>Thisisthecontentforthesecondarticle</p><br /> </article><br /> </section><br /> <footer><br /> <p>ThisistheFooter</p><br /> </footer><br /></div><br /></body><br /></html><br />
    61. 61. <video><br /><video width="560" height="340" controls><br /><sourcesrc="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><br /><sourcesrc="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'><br /><objecttype="application/x-shockwave...<br /></video><br />
    62. 62. <audio><br /><audio controlspreload="none"><br /><sourcesrc="bestcountryandwesternsongever.ogg" type="audio/ogg"><br /> <sourcesrc="bestcountryandwesternsongever.mp3" type="audio/mpeg"><br /><objecttype="application/x-shockwave...<br /></audio><br />
    63. 63. Web Forms - New Attributes<br /><ul><li>required - <input type="text" required>
    64. 64. specifies that an input field must be filled out before submitting.
    65. 65. autocomplete - <input type="text" autocomplete >
    66. 66. specifies that the form or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.
    67. 67. placeholder - <input type="text" placeholder="Search..." >
    68. 68. provides a hint that describes the expected value of an input field.
    69. 69. autofocus - <input type="text" autofocus >
    70. 70. specifies that a field should automatically get focus when a page is loaded.</li></li></ul><li>Web Forms - Input Types<br /><ul><li>search
    71. 71. email
    72. 72. url
    73. 73. tel
    74. 74. number
    75. 75. range
    76. 76. date
    77. 77. color</li></li></ul><li>So, why use it?<br /><ul><li>Modernize your front-end
    78. 78. Supports existing content
    79. 79. Degrades gracefully
    80. 80. We’re already familiar with the syntax (HTML or XHTML)
    81. 81. Great for mobile
    82. 82. Research “Responsive Web Design”
    83. 83. Promotes standards & accessibility</li></li></ul><li>Who supports it?<br /><ul><li>Modern browsers
    84. 84. IE 9.0+
    85. 85. FF 3.5+
    86. 86. Opera 10+
    87. 87. Safari
    88. 88. Chrome
    89. 89. Mobile browsers (webkit-based)
    90. 90. iOS
    91. 91. Android
    92. 92. webOS
    93. 93. BlackBerry 6.0+</li></li></ul><li>When should you use it?<br />NOW<br />
    94. 94. Steps for modernization<br /><ul><li>Graceful degradation
    95. 95. Start HTML5 Ninja Awesome -> Strip features/fallbacks for lesser browsers
    96. 96. Progressive enhancement
    97. 97. Start w/ necessary -> Enhance for more capable browsers</li></li></ul><li>Implementations<br /><ul><li>Some CSS
    98. 98. Sectioning elements needs a line break.
    99. 99. HTML5 Shiv
    100. 100. determines browser version and creates the elements for us if needed.
    101. 101. Modernizr
    102. 102. 3.7k javascript file you can add to your project.
    103. 103. Works with both HTML5 and CSS3 elements
    104. 104. Uses feature detection to easily control fallbacks</li></li></ul><li>question.answer<br />Thank you.<br />Carlos A. Ramon<br />713.353.4508<br />carlos.ramon@idea.com<br />@html5ninja<br />@mobiletexas<br /> <br />

    ×