1

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