HTML5

Hypertext Markup Language Version 5

Created by hmchung / @tma.com.vn

Themes

Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

Transition Styles

Cube - Page - Concave - Zoom - Linear - Fade - None - Default

What is HTML5?

HTML5

~=

HTML

+ CSS

+ JS

Definition and Usage

HTML5

< !DOCTYPE HTML>

HTML 4.01 Strict

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Key Features of HTML5

Feature tag

Browsers

Today, we will cover...

Multimedia Realtime / Communication File / Hardware Access Semantics & Markup Graphics / Multimedia

Today, we will cover ...

Today, we will cover ...

Offline / Storage

Web Storage

main.js

//LocalStorage Methods: 
//getItem: Retrieves the current value associated with the key.
	window.localStorage.getItem(key)
//setItem: Set a key/value pair
	window.localStorage.setItem(key, value);
//removeItem: Deletes a key/value pair from the DOM Storage collection
	window.localStorage.removeItem(key)
//clear: Removes all key/value pairs from the DOM Storage area.
	window.localStorage.clear();
//Key: Retrieves the key at the specified index in the collection
	window.localStorage.key(n)
//length: Retrieves the length of the key/value list
 constructor: Returns a reference to the contructor
	window.localStorage.contructor !== Storage

Web SQL Database

main.js

// Creating and Opening a Database						
var db = window.openDatabase("DBTest", "1.0", "HTML5 Database API", '200000');
db.transaction(function(tx) {
  // Executing SQL Statements
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
  
  // Creating table
  tx.executeSql("CREATE TABLE Employee (id REAL UNIQUE, text TEXT)", [], function(tx) {
    log.innerHTML = '<p>"Employee" created!</p>' },onError);
  });
  
  // Accessing  SQL Statements
  tx.executeSql("INSERT INTO Employee (id, text) VALUES (?, ?)", [number, "Value"],function(tx, result) {},onError);
  
  tx.executeSql("SELECT * FROM Employee", [], function(tx, result) {
    // TODO
  });
});

IndexedDB

main.js

var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
  var db = event.srcElement.result;
  var transaction = db.transaction([], IDBTransaction.READ_ONLY);
  var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
  curRequest.onsuccess = ...;
};

Application Cache

index.html

< html manifest="cache.appcache" >

main.js

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

cache.appcache:

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

Quota API

main.js

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

Realtime / Communication

Web Workers

index.html

<p>Count numbers: <output id="result"></output></p>

main.js

var worker = new Worker('task.js');
worker.onmessage = function(event) { 
  document.getElementById("result").innerHTML = event.data;
};

task.js

var i=0;
function timedCount() {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()", 500);
}
timedCount();

Count numbers:

WebSocket

main.js

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
  socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }

https://www.websocket.org/echo.html

Notifications

main.js

Notification.requestPermission(function(permission){
  var notification = new Notification("Hi there!",{
    body:'I am here to talk about HTML5 Web Notification API',icon:'icon.png',dir:'auto'
  });
  
  setTimeout(function(){
    notification.close();
  },2000);
});

File / Hardware Access

Native Drag & Drop

index.html

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" src="img/html5_logo_lrg.png" draggable="true" ondragstart="drag(event)">								</div>

main.js

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
					

Desktop Drag-In (File API)

main.js

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

Geolocation

main.js

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

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

Semantics & Markup

Better semantic tags

http://www.w3schools.com/html/html5_semantic_elements.asp

Markup for applications

http://www.w3schools.com/html/html5_new_elements.asp

<input list="cars">
<datalist id="cars">
  <option value="BMW">
  </option><option value="Ford">
  </option><option value="Volvo">
</option></datalist>

<details>
  <summary>HTML 5</summary>
  This slide deck teaches you everything you need to know about HTML 5.
</details>

<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>

Your score is: <progress>working...</progress>

<progress>working...</progress>

Descriptive link relations

<pre>index.html</pre>
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">
...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>

http://en.wikipedia.org/wiki/Link_relation

Microdata

<pre>index.html</pre>
<div itemscope="" itemtype="http://example.org/band">
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div>

Rich Snippets Testing Tool at http://www.google.com/webmasters/tools/richsnippet

New form types

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

Graphics / Multimedia

Audio + Video

main.js

<audio id="audio" src="videos/Google_Developer_Stories.webm" controls=""></audio>
document.getElementById("audio").muted = false;

main.js

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

Track Element

<video width="390" id="clip" controls="">
  <source src="videos/Google_Developer_Stories.webm" type="video/webm; codecs="vp8, vorbis"">
  <track label="English subtitles" kind="subtitles" srclang="en" src="videos/video-subtitles-en.vtt" default=""></track>
</video>

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

Canvas 2D

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

http://www.html5canvastutorials.com/

http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/

Canvas 3D (WebGL)

https://playcanvas.com/play

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