• <div id="header">
       <h2>My Website Header</h2>
  </div>
  <div id="page">  
  <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
         </ul>
  </div>
  <div id="content">
      <div class="bloc">
          <h1>Fluid Layout</h1>
          <div class="data">
              <div id="divOutput"></div>
          </div>
          <p>Jelly beans jelly beans marshmallow marshmallow muffin tart brownie
          ...
  			  

• <header>
       <h2>My Website Header</h2>
  </header>
  <article id="page">
      <nav>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Blog</a></li>
          </ul>
      </nav>
      <section id="content">
          <div class="bloc">
              <h1>Fluid Layout</h1>
              <section class="data">
                  <output id="divOutput"></output>
              </section>
              <p>Jelly beans jelly beans marshmallow marshmallow muffin tart brownie.
          ...
  			  

Mix of <input type=range>, <output> and <meter> elements

<meter value=75 min=0 max=100 low=20 high=98>75%</meter>

Grades: 75%

<meter min=50 max=200 low=90 high=119 optimum=100></meter>

Blood Pressure: 125

<p>Progress Bar: <progress id="progress1" value="125" min="0" max="200">125</progress>

Progress Bar: 125

The data-* attributes of HTML5 are just an "official" way to add arbitrary data to html elements within valid html code.

	<img src="photo.jpg" data-docNumber="CDE45" id="img123"
	     date="12 September 2012">
        

	var mydiv=document.getElementById('mydiv')

	//Using DOM's getAttribute() property
	var documentNumber=mydiv.getAttribute("data-docNumber") //returns "CDE45"
	mydiv.setAttribute("data-docNumber", "WTR44") //changes "data-docNumber" to "WTR44"
	mydiv.removeAttribute("data-docNumber") //removes "data-docNumber" attribute entirely
	     

	<div itemscope itemtype="http://data-vocabulary.org/Person">
	    My name is <span itemprop="name">Wesley Reisz</span>,
	    and I am a <span itemprop="jobtitle">solution architect</span>
	    from the <a href="http://www.hp.com" itemprop="affiliation">HP Enterprise Service</a>.
	    My email is <span itemprop="email">wes@wesleyreisz.com</span> and I live in the city 
	    of <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
	    <span itemprop="locality">Louisvile</span>, in the <span itemprop="state"
	    >Kentucky</span> United States </span>
	</div>
		        

Can I use the Audio tag?

• Firefox 3.5+, Chrome 3+, IE9+, Safari 3.1+, Opera 9.8+

Can I use the video tag?

• Firefox 3.5+, Chrome 3+, IE9+, Safari 3.1+, Opera 10.5+

The State Of HTML5 Video by longtailvideo

• 79% of devices can play html5 video
• 50% of devices can play either WebM or MP4
• 90% of tag attributes are supported
• 80% of JavaScript API features work reliably
• 80% support fullscreen features
• 30% support accessibility features
• linkage: http://www.longtailvideo.com/html5

Speech recognition and synthesis for web apps.

var recognizer = new speechRecognition();
recognizer.continuous = true;
recognizer.interimResults = true;
recognizer.onresult = function(e) {
  if (e.results.length) {
    var lastResultIdx = e.results.resultIndex;
    console.log(e.results[lastResultIdx][0].transcript);
  }
};
recognizer.start();

• Continuous dictation. interim results, alternative results
• https://www.google.com/intl/en/chrome/demos/speech.html
• HTML5Rocks article

• Start Translation

• Big Difference between a year? Tooling Support! Such as CreateJS
• EaselJS: A library which manages sprites, animation, vector and bitmap drawing, and user interaction (including multi-touch) based on HTML5 Canvas. It uses a display list concept that mirrors that offered in Flash.
• TweenJS: A simple and chainable tweening engine that transitions numeric or non-numeric values over time. It is optimized for use with EaselJS, or can be used on its own.
• SoundJS: An audio playback engine, which allows pluggable modules to play sound using a variety of methods based on your users' capabilities.
• PreloadJS: Takes the guesswork out of preloading your assets, whether they be images, video, sounds, JS, data, or whatevs.
• Zoë: Configure and export spritesheets from Flash animations, optimized for use with EaselJS.
• At "Create the Web" San Francisco event, Adobe announced a new Web-Based toolside called Creative Cloud that will join Flash CS6 Pro in using the CreateJS toolsuite for using flash or swf's to create HTML5 site.

• WebDB: Example
• IndexedDB
• LocalStorage / SessionStorage JSBin Example

• Web Messaging: Web Messaging or cross-document messaging, is an API introduced in the WHATWG HTML5 draft specification, allowing documents to communicate with one another across different origins, or source domains.[1] Prior to HTML5, web browsers disallowed cross-site scripting, to protect against security attacks. This practice barred communication between non-hostile pages as well, making document interaction of any kind difficult.[1][2] Cross-Document messaging allows scripts to interact across these boundaries, while providing a rudimentary level of security.
• Web Sockets: WebSocket is a web technology providing full-duplex communications channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C. WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket Protocol is an independent TCP-based protocol.
• Drag and Drop: You got this one...

HTML5 Playground

The size of rem/em units are dependent on parent elements

The size of viewport units are based purely on viewport size!

Value is equal to 1% (1/100th) of width/height:

#li-image5{
	position: absolute; 
	top:4vw; 
	left:30vw;  
	transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	-webkit-transform:rotate(15deg)
}
		

body {
  var-fontColor: red;
  color: var(fontColor);
}
		

Define variable name prefixed with "var-". Use by passing it to var()

Names are case-sensitive

Scoped to the rule they're defined in but cascade to children

Allows fallback values: color:var(fontColor, blue);

Extremely new... only in Chrome enabled in experimental WebKit about: flags"

:root { /* "global variables" */
  var-textColor: yellow;
  var-backgroundColor: pink;
}
footer {
  var-backgroundColor: black;
  background-color: var(backgroundColor); /* black */
  color: var(textColor); /* inherited yellow */
}
footer > span {
  var-textColor: white;
  color: var(textColor); /* white */
  background-color: var(backgroundColor); /* inherited black */
}
  

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on.

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});
	    

Linkage: Tutorial

Polyfill: A shim that mimics a future API providing fallback functionality to older browsers. -Alex Sexton

Linkage: One or Two Polyfills

• Name three new semantic tags with HTML5?
• What can you use if a browser doesn't support a technology you want to use?
• What two organizations guide HTML5?
• What are CSS3 Media Queries?
• Name the three storage api?
• What is the difference between canvas and webgl?
• What website can you use to check browser feature support?
• Name three new types of tags with HTML5?
• What feature support offline content?
• Name three new API's with identified with HTML5?

• Eric Bidelman - Chrome Team (@ebidel) <--- Go Follow Him!
• Google IO 2013 Talk A More Awesome Web
• Google IO 2012 Talk The Web Can Do That?