• Save
HTML5 - What h#@$ is it?
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 - What h#@$ is it?

on

  • 1,448 views

 

Statistics

Views

Total Views
1,448
Views on SlideShare
1,447
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.
  • The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing.Used for input fields that shouldcontain an e-mail address.Used for input fields that should contain a URL address.Used for input fields that should contain a numericvalue.Used for input fields that should containnumbersonlyUsed 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? Presentation Transcript

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