• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 - What h#@$ is it?
 

HTML5 - What h#@$ is it?

on

  • 1,380 views

 

Statistics

Views

Total Views
1,380
Views on SlideShare
1,379
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? HTML5 - What h#@$ is it? Presentation Transcript

  • HTML5 - What the h#@$ is it?
    Carlos A. Ramon
    June 27, 2011
  • Agenda
    • A Brief History
    • What is HTML5?
    • Why use it?
    • Who’s supporting it?
    • When should you use it?
    • Steps for modernization
    • Q and A
  • A Brief History
    • 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
  • What is HTML5?
    • It’s a movement not a technology
    • It’s HTML + CSS + JS
    • A 900 page spec document
    • It contains 8 classes
    • Semantics
    • Offline & Storage
    • Device Access
    • Connectivity
    • Multimedia
    • 3D, Graphics & Effects
    • Performance & Integration
    • CSS3
    • 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”>
  • NEW Doctype
    <?DOCTYPE html>
  • Character Set
    <meta http-equiv="Content-Type“ content="text/html; charset=utf-8" />
  • NEW Character Set
    <meta charset="utf-8" />
  • Embedding JS
    <script type="text/javascript"> </script>
  • NEW Embedding JS
    <script> </script>
  • Linking CSS
    <link rel="stylesheet" href="file.css“ type="text/css" media="all" />
  • NEW Linking CSS
    <link rel="stylesheet“ href="file.css" />
  • Block Level Links
    <li>
    <a href=“apage.html">
    <imgsrc=“mypic.jpg">
    <h3>Title</h3>
    <p>Text</p>
    </a>
    </li>
  • “Au Revoir!”
    • big
    • center
    • u
    • tt
    • s, strike
    • font
    • acronym
    • applet
    • dir
    • basefont
    • frame
    • frameset
    • noframes
  • Hello Semantics
    • header
    • nav
    • article
    • section
    • aside
    • 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>
  • <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>
  • <audio>
    <audio controlspreload="none">
    <sourcesrc="bestcountryandwesternsongever.ogg" type="audio/ogg">
    <sourcesrc="bestcountryandwesternsongever.mp3" type="audio/mpeg">
    <objecttype="application/x-shockwave...
    </audio>
  • Web Forms - New Attributes
    • required - <input type="text" required>
    • specifies that an input field must be filled out before submitting.
    • autocomplete - <input type="text" autocomplete >
    • specifies that the form or input field should have an autocomplete function. Tells the browser to allow the field to be autocompleted or not.
    • placeholder - <input type="text" placeholder="Search..." >
    • provides a hint that describes the expected value of an input field.
    • autofocus - <input type="text" autofocus >
    • specifies that a field should automatically get focus when a page is loaded.
  • Web Forms - Input Types
    • search
    • email
    • url
    • tel
    • number
    • range
    • date
    • color
  • So, why use it?
    • Modernize your front-end
    • Supports existing content
    • Degrades gracefully
    • We’re already familiar with the syntax (HTML or XHTML)
    • Great for mobile
    • Research “Responsive Web Design”
    • Promotes standards & accessibility
  • Who supports it?
    • Modern browsers
    • IE 9.0+
    • FF 3.5+
    • Opera 10+
    • Safari
    • Chrome
    • Mobile browsers (webkit-based)
    • iOS
    • Android
    • webOS
    • BlackBerry 6.0+
  • When should you use it?
    NOW
  • Steps for modernization
    • Graceful degradation
    • Start HTML5 Ninja Awesome -> Strip features/fallbacks for lesser browsers
    • Progressive enhancement
    • Start w/ necessary -> Enhance for more capable browsers
  • Implementations
    • Some CSS
    • Sectioning elements needs a line break.
    • HTML5 Shiv
    • determines browser version and creates the elements for us if needed.
    • Modernizr
    • 3.7k javascript file you can add to your project.
    • Works with both HTML5 and CSS3 elements
    • Uses feature detection to easily control fallbacks
  • question.answer
    Thank you.
    Carlos A. Ramon
    713.353.4508
    carlos.ramon@idea.com
    @html5ninja
    @mobiletexas