Loading...

This presentation is an HTML5 website

Press → key to advance.

Slides controls
  • ← and → to move around.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • S to view page source.
  • T to change the theme.
  • H to toggle syntax highlight.
  • N to toggle speaker notes.
  • 3 to toggle 3D effect.
  • 0 to toggle help.

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

Today, we will cover...

Offline / Storage

Expect the unexpected

HTML5 Offline & Storage
JS

Web Storage

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

Realtime / Communication

Stay connected

HTML5 Realtime & Communication
JS

Web Workers

main.js: 
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js: 
self.onmessage = function(event) {
  // Do some work.
  self.postMessage("recv'd: " + event.data);
};

File / Hardware Access

Deeper integration with the Operating System

HTML5 Device Access
JS

Native Drag & Drop

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

Semantics & Markup

More meaningful elements

HTML5 Semantics & Markup
HTML

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

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

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
   <time datetime="2010-11-08">2010</time>.
  </footer>
</body>

Graphics / Multimedia

2D & 3D

HTML5 3D & Effects HTML5 Multimedia
HTML JS

Audio + Video

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

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

CSS3

Presentation & Styling

HTML5 Styling
CSS

CSS Selectors

Selectors

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

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

Nuts & Bolts

Improvements to the core platform

HTML5 Performance & Integration
JS

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 tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]

See it today?

  • Modern Browsers
  • Mobile Browsers
  • Chrome extensions/Firefox Jetpack/Safari extensions

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

HTML5 = Next Generation Features for Modern Web Development

http://slides.html5rocks.com http://www.html5rocks.com