Loading...
HTML5 logo

An Introduction to HTML5

Jason J. Battles



This presentation is an HTML5 website



Press key to advance.


HTML5 logo
Development of Web Technologies
  • 1991 HTML
  • 1994 HTML 2
  • 1996 CSS 1 + JavaScript
  • 1997 HTML 4
  • 1998 CSS 2
  • 2000 XHTML 1
  • 2005 AJAX
  • 2009 HTML 5
HTML5 ~= HTML + CSS + JS

The Power of HTML5

Device APIs Working Group: www.w3.org/2009/dap/

  • Geolocation API
  • Device Orientation API (accelerometer)
  • WebGL (GPU)
  • HTML5 Filesystem API (sandboxed filesystem)
  • Battery API
  • Gamepad API
  • WebRTC (voice & video input) / Web Audio API

Agenda

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

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

JS

Web SQL Database

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

See the generated database: Developer > Developer Tools > Storage

    JS

    Quota API

    // Request Status
    webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY, function(used, remaining) {
        console.log("Used quota: " + used + ", remaining quota: " + remaining);
      }
    );
    
    // Request Quota (only for File System API)
    webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT, 10 * 1024 * 1024, function(used) {
        console.log("Used quota: " + used + ", remaining quota: " + remaining);
      }
    );
    Default (Temporary)Quota Requested (Persistent)
    Web Storage5MbN/A
    App Cache10% of available disk in total
    Used: -- BytesRemaining: -- Bytes
    IndexedDB
    WebSQL
    File System APIArbitrary
    in Bytes Used: -- Bytes

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

    Loading Route...

    Try dragging the map while the complex route is being calculated (you will only be able to do that with Workers!)

    JS

    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

    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);
    
    1. Select text and drag (original text will be dropped)
    2. Select text and drag (dragged text data will be altered from original)
    Source Data
    Drop Area
    JS

    Desktop Drag-In (File API)

    Drag files in from the desktop:

    document.querySelector('#dropzone').addEventListener('drop', function(e) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        document.querySelector('img').src = evt.target.result;
      };
    
      reader.readAsDataURL(e.dataTransfer.files[0]);
    }, false);
    
    Drop in images from your desktop
    JS

    Desktop Drag-Out

    Drag files out onto the desktop:

    <a href="src/star.mp3" draggable="true" class="dragout"
       data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>
    
    var files = document.querySelectorAll('.dragout');
    for (var i = 0, file; file = files[i]; ++i) {
      file.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
      }, false);
    }
    
    Drag each of these files onto your desktop: .pdf file .mp3 file

    ( this feature is only available in Google Chrome )

    JS

    Geolocation

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var latLng = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);
        var marker = new google.maps.Marker({position: latLng, map: map});
        map.setCenter(latLng);
      }, errorHandler);
    }
    
    JS

    Device Orientation

    window.addEventListener('deviceorientation', function(event) {
      var a = event.alpha;
      var b = event.beta;
      var g = event.gamma;
    }, false);
    

    This sample requires FF3.6+ or Google Chrome on a device with a built in accelerometer or iOS 4.2.

    HTML

    Speech Input

    <input type="text" x-webkit-speech />

    Speech input is not enabled in your browser.
    Try running Google Chrome with the --enable-speech-input flag.

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

    Markup for applications

    <input list="libraries"/>
    <datalist id="libraries">
      <option value="Bruno"/>
      <option value="Gorgas"/>
      <option value="Hoole"/>
      <option value="McLure"/>
      <option value="Rodgers"/>
    </datalist>
    
    
      
    <menu>
      <command type="command" disabled label="Publish" />
    </menu>
    
    <details>
      <summary>HTML 5</summary>
      This slide deck teaches you everything you need to know about HTML 5.
    </details>
    
    HTML 5This slide deck teaches you everything you need to know about HTML 5.
    <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
    Your score is: A+
    <progress>working...</progress> Download is: working...
    <progress value="75" max="100">3/4 complete</progress> Goal is: 3/4 complete
    HTML

    New form types

    <style>
      [required] {
        border-color: #88a;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
      }
      :invalid {
        border-color: #e88;
        -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
      }
    </style>
    
    <input type="text" required />
    
    <input type="email" value="some@email.com" />
    
    <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
    
    <input type="range" min="0" max="50" value="10" />
    
    <input type="search" results="10" placeholder="Search..." />
    
    <input type="tel"  placeholder="(555) 555-5555"
             pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
    
    <input type="color" placeholder="e.g. #bbbbbb" />
    
    <input type="number" step="1" min="-5" max="10" value="0" />
    
    HTML

    Form field types on mobile

    type="text"
    android keyboard on input type text
    Android Device
    type="number"
    android keyboard on input type number
    Android Device
    type="email"
    iphone keyboard on input type email
    iPhone Device
    type="tel"
    iphone keyboard on input type tel
    iPhone Device

    Graphics / Multimedia

    2D & 3D

    HTML5 3D & Effects HTML5 Multimedia
    HTML

    Audio + Video

    <audio id="audio" src="sound.mp3" controls></audio>
    
    
    <video id="video" src="movie.webm" autoplay controls></video>
    
    
    CSS JS

    FullScreen API

    if (elem.webkitRequestFullScreen) {
      elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.requestFullScreen){
      elem.requestFullScreen();
    }
    
    :-webkit-full-screen-ancestor:root {
      overflow: hidden;
    }
    :-webkit-full-screen-ancestor {
      z-index: auto;
      -webkit-transform: none;
      -webkit-transition: none;
    }
    pre:-webkit-full-screen {
      background-color: white;
    }
    
    close: 'ENTER' or 'ESC'
    HTML JS

    Canvas example

    HTML JS

    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 example

    CSS3

    Presentation & Styling

    HTML5 Styling
    CSS

    Webfonts

    @font-face {
      font-family: 'LeagueGothic';
      src: url(LeagueGothic.otf);
    }
    
    @font-face {
      font-family: 'Droid Sans';
      src: url(Droid_Sans.ttf);
    }
    
    header {
      font-family: 'LeagueGothic';
    }
    LeagueGothic font example
    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

    Opacity

      color: rgba(255, 0, 0, 0.75); 
      background: rgba(0, 0, 255, 0.75); 
    
    Independent opacity
    CSS

    Gradients

    background-image: linear-gradient(top, #00abeb 0%, #fff 50%,
                                #66cc00 50%, #fff 100%);
    

    background-image: radial-gradient(center, circle cover, red, #000 40%);
                                                            
    
    CSS

    Shadows

    text-shadow: 
      rgba(64, 64, 64, 0.5) 
      0px 
      0px 
      0px; 
    
    box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
    Gorgas Library
    CSS

    Reflections

    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)));
    
    HTML5 is awesome!
    CSS

    Filters

    Apply filter effects to any DOM element:

    video, img {
      +filter: grayscale(0.5) blur(10px);
    }
    
    CSS

    Flexible Box Model

    .box {
      display: -webkit-box;
      -webkit-box-orient: ;
    }
    .box .one, .box .two {
      -webkit-box-flex: 1;
    }
    .box .three {
      -webkit-box-flex: 3;
    }
    
    Box one
    Box two
    Box three
    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;
    }
    
    Pulse!
    CSS

    Intro Animation

    @-webkit-keyframes spin {
     from {
       -webkit-transform: rotateY(0);
     }
     to {
       -webkit-transform: rotateY(360deg);
     }
    }
    
    div {
      padding-right:50px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation-name: spin;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
    }
    
    HTML5 logo

    Resources

    Where to start with HTML5

    HTML5 Performance & Integration

    Compatibility

    • Desktop Browsers
    • Mobile Browsers
      • WebKit
    • Resolutions and Workarounds

    Chrome Frame

    • Minimal effort for bringing IE7, 8 and 9 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

    Questions?

    Jason J. Battles
    Email: jjbattles@ua.edu
    Twitter: jjbattles