40


HTML5


Jeremy Orlow

Reasons to love HTML5
  • Openness - not tied to one implementation
  • Features - spec is moving ahead very fast
  • Support - every major browser has pledged support


“HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform.”

HTML5 ~= HTML + CSS + JS APIs
This presentation was built using HTML:
  • ~1000 HTML elements
  • ~1000 lines of (non-library) JavaScript
  • ~200 CSS rules

But what is really amazing is:
  • Does things which were impossible a year ago
Rough Timeline of Web Technologies
  • 1991 HTML
  • 1994 HTML 2
  • 1996 CSS 1 + JavaScript
  • 1997 HTML 4
  • 1998 CSS 2
  • 2000 XHTML 1
  • 2002 Tableless Web Design
  • 2005 AJAX
  • 2009 HTML 5
Where are we going?
What is...
“
”
...built on?
HTML5
Section 1

Semantics

Defining content

New semantic tags
<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...
New link relations
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" />
<link rel="icon" href="/favicon.png" />
<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>
...
Microdata
<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div>
ARIA attributes
<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>
Section 2

The canvas element

Low level control over rendering

Coding on the Canvas
var canvas = document.getElementById("canvas2d");
var context = canvas.getContext("2d");
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.arc(x, y, r, Math.PI * 1/2, Math.PI * 3/2, false);
var id = context.getImageData(0, 0, width, height).data;
var r = id[0], g = id[1], b = id[2], a = id[3] / 255;
context.lineWidth = 20;
context.lineCap = "round";
context.strokeStyle = "rgba(255, 0, 0, 0.7)";
context.stroke();
Canvas Examples


Canvas 3D (WebGL)
<canvas id="canvas"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
</script>
Scalable Vector Graphics (SVG)
Inline SVG
<svg height="300" width="800">
  <defs>
    <path id="textPath" d="
      M 50,100 C 200,0 200,300 400,200 C 600,0 600,300 800,100">
  </defs>
  <text>
    <tspan><textPath xlink:href="#textPath">Did you know that 
        SVG can render text along a path?</textPath></tspan>
  </text>
</svg>
Did you know that SVG can render text along a path?
Section 3

Multimedia

A richer experience with sound and video

Going Multimedia with Audio and Video

Audio

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

Video

<video src='movie.webm' autoplay controls ></video>
<script>
  document.getElementById("video").play();
</script>
Video as a First Class Element
Section 5

Deep Integrations

Interacting with the client Operating System

Dragging & Dropping
var elem = document.getElementById('dragElem');
elem.addEventListener('dragstart', ..., false);
elem.addEventListener('dragend', ..., false);

var target = document.getElementById('dragTarget');
target.addEventListener('dragenter', ..., false);
target.addEventListener('dragleave', ..., false);
target.addEventListener('dragover', ..., false);
target.addEventListener('drop', ..., false);
Drop here
The Benefits of Native D&D Events
var reader = new FileReader();
reader.onload = function(evt) {
  document.querySelector('img').src = evt.target.result;
};

function onDrop(evt) {
  reader.readAsDataURL(evt.dataTransfer.files[0]);
};
Drop a file here
Look Who's Calling - Notifications
if (window.webkitNotifications.checkPermission() == 0) {
  window.webkitNotifications.createNotification(picture, title, text).show();
} else {
  window.webkitNotifications.requestPermission();
}

This presentation currently does not have permission to display notifications.

Device Orientation
window.addEventListener("deviceorientation", function(event) {
  var a = event.alpha; 
  var b = event.beta;  
  var g = event.gamma; 
}
More fun with video and canvas
Section 4

CSS Enhancements

Making things look good

Transforms & Transitions
-webkit-transform: rotate(-10deg) scale(1.5);
rotate(-45deg) rotate(-15deg) rotate(15deg) rotate(45deg) rotate(75deg)
scale(0.2) scale(0.5) scaleX(0.5) scaleX(2.0) scaleY(1.5)
skewX(10deg) skewX(20deg) skewX(30deg) skewX(40deg) skewX(50deg) 
.myDiv { -webkit-transition: -webkit-transform 2s ease-in-out; }

.myDiv:hover { -webkit-transform: rotate(-20deg); }
Animations
@-webkit-keyframes pulse {
  0%   { -webkit-transform: scale(2) rotate(5deg); }
  50%  { -webkit-transform: scale(5) rotate(-15deg);  }
  100% { -webkit-transform: scale(2) rotate(5deg); }
}

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;
}
Click Me!
Beautiful Fonts with @font-face
@font-face {
  font-family: 'Molengo';
  src: local('Molengo'), url('fonts/Molengo.otf') format('opentype');
}

div { font-family: 'Molengo'; }

Flexible Box Model
Width:
Height:
 
 
 
Now CSS supports 100% height and vertical centering!
CSS IS AWESOME
CSS IS AWESOME

     Demos!

Any questions?