Press → key to advance.

Zoom in/out: Ctrl or Command + +/-

Introduction to HTML5*

*Otherwise known as: next-generation HTML, CSS, JavaScript and DOM APIs

Who's Presenting

Aaron Wagner

Who's Presenting

Lance Willett

Theme Wrangler, Automattic
http://simpledream.net
@simpledream

Introduction to HTML5

HTML5 is the future of the web.

HTML5 ≈ HTML5 + CSS3 + JS APIs

Next-generation features for modern web development.

Rough Timeline of Web Technologies

1995 HTML 2
1996 CSS 1 + JavaScript
1998 CSS 2
1999 HTML 4.01
2000 XHTML 1.0
2002 Tableless Layouts
2005 Ajax
2009 HTML5

HTML

Simpler DOCTYPE and <head>

<!DOCTYPE html>

<meta charset="utf-8" />

Simplified `<style>` and `<script>`

<style>
span.year { text-align: right; }
</style>

<script src="/js/script.js"></script>

HTML

New Semantic Elements

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2010.
  </footer>
</body>

HTML

New Form Field Attributes

Implemented

<input type="range" min="0" max="50" value="0">  

<input autofocus type="search">  

<input type="text" placeholder="Search inside">

Not Yet Implemented

<menu>
<progress>

<input type="color"> 
<input type="number"> 
<input type="email"> 
<input type="tel"> 


<input type="time"> 
<input type="date"> 
<input type="month"> 
<input type="week"> 
<input type="datetime">

HTML

Audio + Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src="movie.mp4" autoplay controls ></video>
document.getElementById("video").play();

HTML

Let's Review

Simplified DOCTYPE and <head>
New semantic elements
Form input fields and attributes
Multimedia (Audio, Video)
And lots more: Accessibility (ARIA roles), link relations, microdata, 2D drawing with Canvas, 3D drawing with WebGL.

HTML

What Can I Use Now?

Use the HTML5 DOCTYPE and character set.
Use the simplified script and style elements.
Use new semantic elements (or semantic class names that are representative of the new HTML5 elements).
Use the new form attributes and input types.
Plug the gaps with tools like Modernizr (feature detection) or the IE HTML5 shiv.

HTML

What Can I Use Now?

Real-world example from Josh Williams of Tucson Labs.

http://tucson-labs.com

Uses the HTML5 DOCTYPE and character set.
Uses new semantic elements.
Plugs the gap for older browsers with a few lines of JavaScript.

CSS

CSS Selectors

N^th Child

.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}

Row 1

Row 2

Row 3

Row 4

Specific attributes

input[type="text"] {
background: #eee;
}

Negation

:not(.box) {
color: #00c; 
}            
:not(span) {
display: block; 
}

More specific targetting

h2:first-child { ... }

CSS

New Font Support

@font-face { 
font-family: 'Junction'; 
src: url(Junction02.otf); 
}
@font-face { 
font-family: 'LeagueGothic'; 
src: url(LeagueGothic.otf); 
}
@font-face { 
font-family: 'GG250'; 
src: url(General250.otf); 
}

header {
font-family: 'LeagueGothic';
}

LeagueGothic font with no image replacement

CSS

Text Wrapping

div {
text-overflow: ellipsis;
}

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Play with the slider on this and further pages!

CSS

Columns

-webkit-column-count: 2;  
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

CSS

Text Stroke

div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;  
}

Text stroke example

CSS

Opacity

color: rgba(255, 0, 0, 0.75);  
background: rgba(0, 0, 255, 0.75);

Independent opacity

CSS

Rounded Corners

border-radius: 0px;

Example

CSS

Gradients

background: -webkit-gradient(linear, left top, left bottom, 
from(#00abeb), to(white), 
color-stop(0.5, white), color-stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

CSS

Shadows

text-shadow: 
rgba(64, 64, 64, 0.5) 
0px  
0px  
0px;      
box-shadow: 
rgba(0, 0, 128, 0.25) 
0px  
0px  
0px;

Shadows example

CSS

Background Enhancements

Background sizing

#logo {
background: url(logo.gif) center center no-repeat;
background-size: 
;
}

Resize me! »

Multiple backgrounds

div {
background: url(src/zippy-plus.png) 10px center no-repeat, 
url(src/gray_lines_bg.png) 10px center repeat-x;
}

Test

CSS

Transitions

#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

#box {
-webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

CSS

Transforms

Hover over me:

-webkit-transform: rotateY(45deg);            
-webkit-transform: scaleX(25deg);            
-webkit-transform: translate3d(0, 0, 90deg);            
-webkit-transform: perspective(500px)

#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}

Now press 3!

CSS

Let's Review

Better selectors
Typography
Visuals
Transitions, transforms, and animations

CSS

What Can I Use Now?

Safari + WebKit + Chrome

-webkit-...

Firefox

-moz-...

JS APIs

New Selectors

Finding elements by class (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Finding elements by CSS syntax (Selectors API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

JS APIs

Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Use case: Save email draft on the client side (crash-safe)

JS APIs

Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

See the generated database: Developer > Developer Tools > Storage

JS APIs

Application Cache API

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

CACHE MANIFEST

# version 1

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

Turn off your internet connection and refresh!

JS APIs

Web Workers

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

Loading Route...

Try to drag the map while calculating the complex route (you will only be allowed to do that if you use workers)

JS APIs

Web Sockets

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

It allows a web server to push data to a browser (COMET)

JS APIs

Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
      tweet.text).show(); 
} else {
  window.webkitNotifications.requestPermission();
}

Note: Use this button if you also want to reset the permissions

Enter your twitter user name to show your last tweet as a notification

JS APIs

Drag and drop

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

Select text and drag (original text will be dropped)
Select text and drag (dragged text data will be altered from original)

Source Data

Drop Area

Coming soon: drag files from your desktop

JS

Geolocation

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));    
  });
}

JS APIs

Client Side Storage (Web SQL Database, App Cache, Web Storage)
Communication (Web Sockets, Worker Workers)
Desktop experience (Notifications, Drag and Drop API)
Geolocation

A web application built with HTML5

Time's Up App

HTML5 ≈ HTML + CSS + JS APIs

HTML5 = Next-generation features for modern web development.

This presentation is an HTML5 website.

Resources to learn more

Credit where credit is due

These slides came from a Google presentation originally displayed here: apirocks.com/html5/html5.html

Released under an Apache 2 license the most recent slides can be found: code.google.com/p/html5-slides/

Thank you!

http://timesupapp.com/html5/

Introduction to HTML5*

Aaron Wagner

Lance Willett

Introduction to HTML5

HTML

Simplified <style> and <script>

Implemented

Not Yet Implemented

Real-world example from Josh Williams of Tucson Labs.

http://tucson-labs.com

CSS

Nth Child

Specific attributes

Negation

More specific targetting

Background sizing

Multiple backgrounds

JS APIs

Finding elements by class (DOM API)

Finding elements by CSS syntax (Selectors API)

This presentation is an HTML5 website.

Thank you!

Simplified `<style>` and `<script>`

N^th Child