Loading...
HTML5 logo
HTML5:

Power, Promise, Pitfalls

Jason J. Battles

Internet Librarian 2012


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
= HTML + CSS + JS

A New Frontier for the Web

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

There Will Be Blood Code

and it's OK

HTML5 Performance & Integration

Power

What HTML5 Can Do

HTML5 Performance & Integration

Offline / Storage

Quotas, Databases, and Sandboxes

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

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
HTML

iFrame Sandbox

<iframe src="demo_iframe_sandbox.htm" sandbox="allow-scripts"></iframe>
		  

Realtime / Communication

Web Workers and Notifications

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

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

File Manipulation and Geolocation

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

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="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>

HTML JS

Canvas 2D

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>
            

CSS3

Presentation & Styling

HTML5 Styling
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

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;
Internet Librarian
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

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

Data Visualization

HTML5 in Our Library

Promise

Evaluating HTML5's potential

HTML5 Performance & Integration

The Possibilities

  • Eliminates the need for native applications
    • Reduces resource investment
    • Speeds up mobile development


  • Replicates desktop functionality in the browser
    • File handling and database interaction
    • Local data storage and offline capabilities

... And There's More!

Responsive Design

Pitfalls

There's always a downside

HTML5 Performance & Integration

Browser Compatibility

  • Desktop Browsers
    • Limitations and Idiosyncracies
      • Internet Explorer < 10 and pretty much everything
      • Firefox and media files
    • How to determine your browser's HTML5 support?
  • Webkit Mobile Browsers
  • Resolutions and Workarounds

Web Statistics

Google Analytics

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

Accessibility

Security

Conclusion

All good things

HTML5 Performance & Integration

Resources

Questions?


Jason J. Battles
Email: jjbattles@ua.edu
jjbattles
http://bama.ua.edu/~jjbattles/il2012/