What's the first thing that comes to mind when someone asks about HTML5?
http://www.funnypicss.com/technology/

"What the heck is HTML5 really?"

HTML5 Definition

  • HTML5 is a snapshot of HTML, which is being worked on:
    • by the WHATWG community
    • and also the W3C HTML Working Group.
  • HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications.
  • Besides defining a markup language that can be written in both HTML and XML (XHTML) it also defines many APIs that form the basis of the Web architecture.
  • HTML5 is an evolving standard and wont be finished until... is it a living standard that will continue to evolve?


Definition: WHATWG

Definition: W3C Working Group HTML5

HTML5 API's

But Wait... what happened to mobility?

Evolution of the Web

Internet Global Traffic Growth Rate (PB per Month)

Global IP Traffic Growth, 2011-2016
  2011 2012 2013 2014 2015 2016 CAGR 2011-2016
Fixed Internet 23,288 32,990 40,587 50,888 64,349 81,347 28%
Managed IP 6,849 9,199 11,846 13,925 16,085 18,131 21%
Mobile data 597 1,252 2,379 4,215 6,896 10,804 78%


*CAGR: Compound Annual Growth Rate
Cisco Visual Networking Index: Forecast and Methodology, 2011-2016
HTML Markup (aka Semantic Tags)

HTML Markup (aka Semantic Tags)

Div-itis

  • <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
            ...
    			  

HTML Markup (aka Semantic Tags)

HTML Markup (aka Semantic Tags)

  • <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.
            ...
    			  

Enough Talk... More foo!

Exercise 1: Div-itis
(Easy)

  • Convert Div-itis to HTML5 Semantic Tags (See the figure on Slide 15)
  • *NOTE: Don't forget the CSS!!!

Exercise 1: Div-itis

Exercise 1: Div-itis Results


Congrats! You've earned the Ninja Panda Award for mastering HTML5 Semantic Tags!
But wait... there's more HTML Markup/Markup Related Goodness

caniuse.com

HTML Markup Form (Input) Tags

...more features for forms

<input type="text" name="name" placeholder="Wes">
<input type="range" min="0" max="10"
        name="priority" value="0" id="priority" >
<input type="number" name="estimated_hours"
        min="0" max="1000"
        id="estimated_hours" placeholder="500">
<input type="date" name="start_date" id="start_date"
        value="2010-12-01" >
<input type="email" name="email" id="email" 
        placeholder="user@domain.com">
<input type="url" name="url" id="url" 
        placeholder="http://www.wesleyreisz.com">
<input type="color" name="project_color" 
        id="project_color">
 

HTML Markup Form (Input) Tags

...more native features

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

New attributes: the data-* attributes!

...a way to add additional information to your tags and access it

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
	     

Microdata

...a way to label content to describe a specific type of information

My name is Wesley Reisz, and I am a solution architect from HP Enterprise Service. My email is wes@wesleyreisz.com and I live in the city of Louisvile, in the Kentucky United States


	<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>
		        
Video/Audio on the Web

Video on the Web

Video on the Web

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

Video on the Web



Video on the Web

<div style="text-align:center"> 
   <div style="text-align:center"> 
      <video id="video1" width="600">
          <source src="images/mov_bbb.mp4" 
             type="video/mp4"><source src="
             images/mov_bbb.ogg" type="video/ogg">
             Your browser does not support HTML5 video.
          </video><br />
          <button 
            onclick="myVideo.playPause()">Play/Pause</button> 
          <button 
            onclick="myVideo.makeBig()">Big</button>
          <button 
            onclick="myVideo.makeSmall()">Small</button>
          <button 
            onclick="myVideo.makeNormal()">Normal</button>
        </div> 
        <br class="clear" />
        <script> 
          myVideo.vid=document.getElementById("video1");
        </script>
  </div>
</div>

var myVideo={};
myVideo.playPause=function(){ 
   if (myVideo.vid.paused){
           myVideo.vid.play();
   }else{
           myVideo.vid.pause();
   }
} 
myVideo.makeBig=function(){ 
   myVideo.vid.width=800; 
} 
myVideo.makeSmall=function(){ 
   myVideo.vid.width=320; 
} 
myVideo.makeNormal=function(){ 
   myVideo.vid.width=600; 
}
 

Web Speech API

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();

Web Speech API +

A Few Other Kewl HTML5 Features

File API

Location API

Canvas


March 2012

Canvas

  • 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.

Canvas: EaselJS Example 1

Exercise 2: Canvas Animation with EaselJS
(Moderate)

Exercise 2: Canvas Animation with EaselJS

Exercise 2: Canvas Animation with EaselJS


Congrats! You've earned the Grasshopper Award for mastering the 2D Animation with HTML5 Canvas!

Just in Case You Thought Your Foo Was Strong

More Core HTML5 Features

Storage

Application Cache (Offline)

<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);
				
cache.appcache:
CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
				

AppCache Demo

Other HTML5 Core API's & Features

  • 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

CSS3 Tricks & Features

Viewport-percentage units

vw, vh, vmin, vmax

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:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = min(1vw, 1vh)
1vmax = max(1vw, 1vh)
#li-image5{
	position: absolute; 
	top:4vw; 
	left:30vw;  
	transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	-webkit-transform:rotate(15deg)
}
		

CSS3 Animation

#li-image3{
   position: absolute; 
   top:20vw; 
   left:30vw; 
   clip-path:polygon(100% 50%,84.70057014808336% 54.5684167277018%,...)
}
#li-image3:hover{
	animation:"clip" 1s infinite
}
@-webkit-keyframes "clip" {
  0% {
    clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,...);
  }
  50% {
    clip-path: polygon(84.70057014808336% 54.5684167277018%,91.0518476172854% ...);
  }
  100% {
    clip-path: polygon(91.0518476172854% 60.99980941685713%,82.33578363789503% ...);
  }
}
		

CSS Variables

Made commonplace by CSS preprocessors.

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"

CSS Variables Example

: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 */
}
  

Responsive Design

CSS3 Media Queries


Congrats! You've earned the Donatello Award for CSS3 Knowledge!

HTML5 API's

But what if you're not running Chrome?

Modernzr

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

Quiz

  • 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?

Congrats! You've earned the Kick Ass HTML5 Award!

Recap

Ninja Panda Award for mastering HTML5 Semantic Tags
Grasshopper Award for mastering the 2D Animation with HTML5 Canvas
Donatello Award for CSS3 Knowledge!

Kick Ass HTML5 Award for Awesomeness!

Credits:

Thank You!

Wesley Reisz

web: www.wesleyreisz.com
email: wes@wesleyreisz.com
slides: reisz-html5.appspot.com
jsfiddle: jsfiddle.net/user/wesreisz
github: github.com/wesreisz
twitter: @wesreisz