What is it?

1. Existing markup
2. Web Applications
3. Web Documents

History of HTML5

• 1999: HTML 4 & XHTML 1.0
• 2004: Browser vendors revolt against W3C/XHTML
• 2004: WHATWG starts Web Apps/Forms 1.0
• 2008: HTML5 brought into W3C, drops XHTML, Web Apps 1.0 rebranded HTML5

"Scriptable Image"

<canvas id="canvas" width="900" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
</script>

When to Use The Canvas Tag

• Bitmaps and pixels
• Fixed size
• Keyboard driven
• Black box
• Dynamically process HTML5 Video

When Not to Use The Canvas Tag

• Low frame rate on iPhone/iPad
• Not search engine or accessibility friendly
• If need dynamic sizing/scaling
• Mouse oriented applications
• Can't style with CSS or nest HTML5

Styles & Colors

ctx.fillStyle = "orange";  
ctx.fillStyle = "#FFA500";  
ctx.strokeStyle = "rgb(0, 0, 255)";  
ctx.strokeStyle = "rgba(0, 0, 255, 1)";
ctx.fillRect(250, 25, 150, 100);

ctx.globalAlpha = 0.5; // From 0.0 to 1.0
ctx.fillRect(300, 75, 200, 150);

// Styles can include gradients and patterns.

Paths

ctx.beginPath();  
ctx.moveTo(30, 30);  
ctx.lineTo(150, 150);  
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
ctx.lineTo(30, 30);
// Can also use: arc, arcTo, and quadraticCurveTo
ctx.fill();

// ...
ctx.stroke();

Transforms

ctx.translate(400, 200);  
ctx.scale(1.5, 1.5); 
ctx.rotate(135 * Math.PI / 180); 

Graphics State

ctx.fillStyle = 'red';
ctx.save();
ctx.fillStyle = 'blue';
ctx.restore();
ctx.fillRect(250, 25, 150, 100); // Will draw red.

Line Styles

ctx.lineWidth = 1.0; 
ctx.lineCap = butt; buttroundsquare
ctx.lineJoin = miter; roundbevelmiter

Gradients

// Linear Gradient: x1, y1, x2, y2
var linear = ctx.createLinearGradient(0, 0, 150, 150);
linear.addColorStop(0.0, 'blue');
linear.addColorStop(1.0, 'green');

ctx.fillStyle = linear;
ctx.fillRect(0, 0, 150, 150);

// Radial Gradient: x1, y1, r1, x2, y2, r2
var radial = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radial.addColorStop(0, '#A7D30C');  
radial.addColorStop(0.9, '#019F62');  
radial.addColorStop(1, 'rgba(1, 159, 98, 0)');

ctx.fillStyle = radial;
ctx.fillRect(0, 0, 150, 150);

Compositing

ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 200, 200);

ctx.globalCompositeOperation = source-over; 
      source-over
      source-in
      source-out
      source-atop
      lighter
      xor
      destination-over
      destination-in
      destination-out
      destination-atop
      darker
      copy
    

ctx.fillStyle = 'red';
ctx.beginPath();
// x, y, radius, startAngle, endAngle, antiClockwise
ctx.arc(200, 200, 100, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();

Patterns & Shadows

var img = new Image();
img.src = 'images/brad-small.jpg';
img.onload = function() {
  ctx.shadowOffsetX = 2; 
  ctx.shadowOffsetY = 2; 
  ctx.shadowBlur = 2.0; 
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            
  // Can use image or another Canvas element.
  var pattern = ctx.createPattern(img, repeat); 
    repeat
    repeat-x
    repeat-y
    no-repeat
  
  ctx.fillStyle = pattern;

  // Draw circle.
  // ...
}

Text

var phrase = 'I can eat glass'; 

var braille = englishToBraille(phrase);

ctx.font = '40pt SomeWebFont Helvetica sans-serif';
ctx.textAlign = center; 
    left
    right
    center
    start
    end

ctx.textBaseline = alphabetic; 
    top
    hanging
    middle
    alphabetic
    ideographic
    bottom


// text, x, y, [maxWidth]
ctx.fillText(braille, 50, 160);
ctx.strokeText(phrase, 50, 250, 50);

Clipping Path

// Create a circular clipping path.        
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true); 
ctx.clip();

Canvas Animation

• Clear canvas
• Save state
• Draw shapes
• Restore state

setInterval(animate, 100);
                          
// Part of animate function.
ctx.globalCompositeOperation = 'destination-over';

// Clear canvas.
ctx.clearRect(0, 0, 300, 300);

// Save initial state.
ctx.save();

// Move the earth.
var time = new Date();  
ctx.rotate( ((2 * Math.PI) / 60) * time.getSeconds() 
    + ((2 * Math.PI) / 60000) * time.getMilliseconds());  
ctx.drawImage(earthImg, -12, -12);

// Draw other shapes.
// ...

// Restore state.
ctx.restore();

Video Code

<video width="640" height="480" controls preload>
   <source src="myMovie.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="myMovie.webm" type='video/webm; codecs="vp8, vorbis"'>
   <source src="myMovie.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

var video = document.querySelectorAll('video')[0];

// Find out when the video is done seeking so we
// can start playing the video.
video.addEventListener('seeked', function() {
   video.play();
});

// Seek 10 seconds in.
video.currentTime = 10.0;

Geolocation Code

if (navigator.geolocation) {
  // Geolocation available.
}

// Get position a single time.  
navigator.geolocation.getCurrentPosition(function(position) {
  useLocation(position.coords.latitude, position.coords.longitude);
});

// Watch position as it changes.
var watchId = navigator.geolocation.watchPosition(function(position) {
  useLocation(position.coords.latitude, position.coords.longitude);
});

// Clear watching the position  
navigator.geolocation.clearWatch(watchId);

HTML5 Doctype

<!DOCTYPE html>

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>
       <figure>
         <img src="example.jpg" />
         <figcaption>
           This is a caption
         </figcaption>
       </figure>
       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 © 2009.
  </footer>
</body>

Link Relations

<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" />
<link rel="icon" href="/favicon.ico" />
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">
...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
...

ARIA

<ul id="tree1"
      role="tree" 
      tabindex="0" 
      aria-labelledby="label_1"
      >
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
</ul>

Web SQL Database

var db = db = window.openDatabase('NoteTest', '1.0', 
    'HTML5 Database API example', 200000);

db.transaction(function(tx) {
   tx.executeSql('CREATE TABLE WebKitStickyNotes '
       + '(id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, '
       + 'top TEXT, zindex REAL)', [], loadNotes);
});

db.transaction(function(tx) {
   tx.executeSql('SELECT id, note, timestamp, left, top, zindex '
       + 'FROM WebKitStickyNotes', [], function(tx, result) {
            for (var i = 0; i < result.rows.length; ++i) {
                var row = result.rows.item(i);
                var note = new Note();
                note.text = row['note'];
                note.left = row['left'];
                note.top = row['top'];
            }
    }, handleError);
});

Local Storage

// Use localStorage for persistent storage.
// Use sessionStorage for per tab storage.

// Saving values.
window.localStorage['value'] = textArea.value;
window.localStorage['timestamp'] = (new Date()).getTime();

// Loading values.
textarea.value = window.localStorage['value'];

Save text value on the client side (crash-safe)

DOM Selectors

var elems = document.;

<section id="main">
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li class="important">Item 3</li>
      <li>Item 4</li>
      <li class="important">Item 5</li>
   </ul>

   <aside>
      <input id="possibleValues" type="range" min="0" max="25">
   </aside>
</section>

classList

myElem.classList.add('important');
myElem.classList.add('selected');

// ...
                              
if (myElem.classList.contains('important')) {
  // Do something.
  
  myElem.classList.remove('important');
}

Web Workers Code

main.js

var worker = new Worker('worker.js');

// Send the worker a message.
worker.postMessage('start');

// Respond to messages from the worker.
worker.onmessage = function(event) {
  console.log('Message received from worker: ' + event.data);
}

worker.js

// Respond to messages sent from main page.
onmessage = function(event) {
  console.log('Message received from main page: ' + event.data);
}                      

function run() {
  // Find prime numbers.
  // ...

  // Send results back to main page.
  postMessage(primeNumber);
}

Web Sockets Code

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'); }

Transforms

Hover over me:

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(0.5);
-webkit-transform: translate3d(0, 0, -500);
-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);
}

Transitions

#box.left {
  margin-left: 0;
}

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

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

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

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

Animation

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

3D Transforms

<div id="experiment">
        <div id="cube">
                <div class="face one">
                        One face
                </div>
                <div class="face two">
                        Up, down, left, right
                </div>
                <!-- etc -->

#experiment {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 200px;
}

#cube {
  /* ... */
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
}

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(200px);
}

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

Rounded Corners

border-radius: 0px; 

Masking

video {
  -webkit-mask-image: url(mask.svg);
}

<svg>
   <text x="50%" y="60%">CSS3</text>
</svg>

Columns

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

Flexbox

<div id="container">
	<div>Play</div><div>Slider</div><div>VOL</div>
</div>

#flexbox-container {
    width: 50%;
    height: 30px;
    border: 1px solid #ccc;
    display: -webkit-box;
    -webkit-box-orient: 
   horizontal
   vertical

}

#flexbox-container div:nth-of-type(1) {
  -webkit-box-ordinal-group: 3;
}

#flexbox-container div:nth-of-type(2) {
  -webkit-box-flex: 
  -webkit-box-ordinal-group: 2;
}

#flexbox-container div:nth-of-type(3) {
  -webkit-box-ordinal-group: 1;
}

SVG DOM

var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';

var container = 
    document.querySelector('#svg-dom > div.svg-drawing-area');

var svg = document.createElementNS(svgns, 'svg');
svg.setAttribute('width', 200);
svg.setAttribute('height', 200);

var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 50);
circle.style.fill = 'blue';
circle.className = 'interesting';
circle.addEventListener('mouseover', function(evt) {
  alert('Hello world!');
}, false);

var a = document.createElementNS(svgns, 'a');
a.setAttributeNS(xlinkns, 'href', 'http://codinginparadise.org');
a.setAttribute('target', '_blank');
a.setAttribute('stroke', 'black');
a.setAttribute('stroke-width', 3);
a.appendChild(circle);
svg.appendChild(a);

container.appendChild(svg);

Working With Objects

Going Into Objects

var obj = document.getElementsByTagName('object')[0];
var doc = obj.contentDocument;
var someElems = doc.querySelectorAll('rect.important');
var root = doc.rootElement;

Jumping Out of Objects

var elem = top.document.getElementById('foobar');
var result = top.someFunction();

Inside of Objects

var elem = document.getElementsByTagNamsNS(svgns, 'rect');