This presentation is an HTML5 website

Press → key to advance.

Having issues seeing the presentation? Read the disclaimer

HTML5*

Web Development to the next level

*Including other next generation technologies of the Web Development stack

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

HTML5 ~= HTML + CSS + JS APIs

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

HTML

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

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

HTML

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

...

HTML

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>

HTML

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>

HTML

New form field types

Implemented

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



<input autofocus type='search'>  



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

Not yet

<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

Canvas

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



<script>

  var canvasContext = document.getElementById("canvas").getContext("2d");

  canvasContext.fillRect(250, 25, 150, 100);

  

  canvasContext.beginPath();

  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);

  canvasContext.lineWidth = 15;

  canvasContext.lineCap = 'round';

  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';

  canvasContext.stroke();

</script>

HTML

Canvas example

HTML

Canvas 3D (WebGL)

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



<script>

  var gl = document.getElementById("canvas").getContext("experimental-webgl");

  gl.viewport(0, 0, canvas.width, canvas.height);

  ...

</script>

HTML

SVG in HTML5

<html>

  <svg>

    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 

        fill="url(#myGradient)"

        onmousedown="alert('hello');"/>

  </svg>

</html>

HTML

SVG example

HTML

Semantics (New tags, Link Relations, Microdata)
Accessibility (ARIA roles)
Web Forms 2.0 (Input Fields)
Multimedia (Audio Tag, Video Tag)
2D and 3D drawing (Canvas, WebGL, SVG)

CSS

CSS Selectors

Selectors

.row:nth-child(even) {

  background: #dde;

}

.row:nth-child(odd) {

  background: white;

}

Row 1

Row 2

Row 3

Row 4

Image-like display

div {

  display: inline-block;

}

Specific attributes

input[type="text"] {

  background: #eee;

}

Negation

:not(.box) {

  color: #00c; 

}            

:not(span) {

  display: block; 

}

More specific targetting

h2:first-child { ... }



div.text > div { ... } 

h2 + header { ... }

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

Hue/saturation/luminance color model

color: hsla(

  128,  

  75%,  

  33%,  

  1.00);

HSL example

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

Instant Web 2.0 (just add sliders)

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  



background: 

  -webkit-gradient(linear, left top, left bottom,  

                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 



border-radius: 0px;  



-webkit-box-reflect: below 10px

  -webkit-gradient(linear, left top, left bottom,  

                   from(transparent), to(rgba(255, 255, 255, 0)));

Web 2.0 Logo Creatr

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

Animations

@-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;

}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!

CSS

Typography
Visuals
Transitions, transforms and animations

See it today?

Modern Browsers
Mobile Browsers
Chrome extensions/Firefox Jetpack

Chrome Frame

Minimal effort for bringing IE6, 7 and 8 up to the latest HTML5 technologies
Two ways to get your websites ready for Chrome Frame:

Client side:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

Try to load this presentation in IE!

HTML5 ~= HTML + CSS + JS APIs

HTML5 = Next Generation Features for Modern Web Development