HTML5 - What h#@$ is it?

  • 1,111 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,111
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.
  • <input type="search">The search field behaves likea regular text field. Somebrowsers add special stylingand/or functionality forclearing.<input type="email">Used for input fields that shouldcontain an e-mail address.<input type="url">Used for input fields that should contain a URL address.<input type="number">Used for input fields that should contain a numericvalue.<input type="tel">Used for input fields that should containnumbersonly<input type="range min="0" max="10" step="2" value="6">Used for input fields that should contain a value from a range of numbers.<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> (utc time)<input type="datetime-local"> (local time)<input type="color">Used for input fields that shouldcontain a color
  • Bruce LawsonJeffrey ZeldmanPaul IrishRemy SharpEthanMarcottehttp://html5boilerplate.com/http://www.w3.org/html/logo/ http://html5demos.com/

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!”
  • Hello Semantics
  • 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
  • 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?
  • 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