Techforce: Introducing HTML5 (part 1)

Offline, Storage

Use the offline application cache to store HTML, JavaScript, CSS, and media resources locally Related links

Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications. Related links

  1. application cache Related links

An offline store for your web appliction to improve performance and provide an offline experience

<code><html manifest="html5-demo-app-catch.appcache">... </html> 
</code>

html5-demo-app-catch.appcache:

<code>CACHE MANIFEST
#Explicitly cached entries, Build 2012-09-05

#rev 01

CACHE:
/public/images/img.svg
/public/images/logo.svg
/public/javascript/all.js
FALLBACK:
/ /offline.html

#Resources that require the user to be online.
NETWORK:
</code>

server with mime-type: text/cache-manifest

A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.

CACHE:

This is the default section for entries in a cache manifest file. Files listed under the CACHE: section header (or immediately after the CACHE MANIFEST line) are explicitly cached after they’re downloaded for the first time.

NETWORK:

Files listed under the NETWORK: section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.

FALLBACK:

The FALLBACK: section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.

The CACHE, NETWORK, and FALLBACK sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.

  1. webStorage
    localStorage/sessionStorage

1.localStorage for persistent storage
2.sessionStorage for per session storage

<code>document.querySelector('textarea').addEventListener('keyup', function(e) {
  localStorage.setItem('value', this.value);
  localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
</code>
<code>API:
setItem()  //only store strings!
getItem()
removeItem()
clear()
</code>

It uses strings for storage instead of complex databases (and you can store more complex data using JSON encoding)

<code>var user = JSON.stringify({
  name: 'jason weng',
  id: 1
});
localStorage.setItem('user', user);
var user = JSON.parse(localStorage.getItem('user'));
</code>
  1. indexed database window.indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB; Related links
  2. online/offline events
<code>if (navigator.onLine) {
  console.log('ONLINE!');
} else {
  console.log('OFFLINE');
}
</code>
<code>window.addEventListener('online', function(e) {
  onlineUpdate();
}, false);

window.addEventListener('offline', function(e) {
  offline();
}, false);
</code>

File access

<code>holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};

</code>

Related links

audio/video

## audio

<code><audio>
   <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
   <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
   <!-- add your fallback solution here -->
</audio>
</code>
<code>var dogBarkingBuffer = null;
var context = new webkitAudioContext();

function loadDogSound(url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  
//The audio file data is binary (not text), so we set the responseType of the request to'arraybuffer'. For more information about ArrayBuffers, see this article about XHR2
  request.responseType = 'arraybuffer';

  // Decode asynchronously
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      dogBarkingBuffer = buffer;
    }, onError);
  }
  request.send();
}
</code>

http://www.html5rocks.com/en/tutorials/webaudio/intro/
## video

<code><video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</code>
<code>addEvent(togglePlay, 'click', function () {
  if (ready) {
    // video.playbackRate = 0.5;
    if (video.paused) {
      if (video.ended) video.currentTime = 0;
      video.play();
      this.value = "pause";
    } else {
      video.pause();
      this.value = "play";
    }
  }
});
addEvent(video, 'timeupdate', function () {
  position.innerHTML = asTime(this.currentTime);
});
addEvent(video, 'ended', function () {
  togglePlay.value = "play";
});
</code>

Related links

Semantics

markup

  1. structural elements

Since HTML is largely unstructured, a few new elements have been provided to try and rectify this. These elements include:

  • <section> -A section, or section of a chapter of a text or a book.
  • <header> - The page header. This is not the same as the <head> element.
  • <footer> - The footer of the page. Typically where all the legal crap goes.
  • <nav> - Navigation links to other pages. You could put your websites navigation in this, for example.
  • <article> - A blog article could be encapsulated by this, for example.
  • <aside> - This tag can be used to provide extra information for a block of text. Much like sidebar material in books etc.
  • <figure> - The <figure> element can be used to annotate your main text with diagrams which aren’t necessarily imperative to the text.
    1. inline elements
  • <mark> - This denotes that a bit of text is marked in some way. You could, for example, use this to mark search terms in a list of results.
  • <time> - You can use this to represent time or date in your block of text.
  • <meter> - This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high, and optimum.
  • <progress> - This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
    ## Form Fields
    The input element can now have a new set of types, including:
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url
    Some of these are already common in desktop UIs, so shouldn’t be difficult to implement, and will be more familiar to users when filling out your form.

Character encoding syntax

The character encoding syntax for an HTML 5 document is now:<meta charset="UTF-8">

New DTD

HTML 5 has a new, much simpler DTD: <!doctype html> Much nicer, I think you’ll agree, and far more memorable.

HTML 5 specification

Link Relations

Adding more semantics to hyperlinks

go" class="redactor-linkify-object">http://wikipedia.org">go to wikipedia

MIT" class="redactor-linkify-object">http://www.opensource.org/licenses/mit-license.php... Licensed

<a rel='help' href="help.html">Site help</a>

<a rel='tag' href="site/help/">Music</a>

<a rel="bookmark" href="a.html">Post Permalink</a>

<link rel="alternate" type="application/atom+xml" href="data.xml">

<link rel="icon" href="iphone.png" sizes="59x60" type="image/png">

<link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml">

<link rel="stylesheet" href="lsforums.css">

<br>