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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5 - What h#@$ is it?

1,123
views

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,123
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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