3. HISTORY OF HTML
1989 Tim Berners-Lee, HTML Tags CERN
1994 May The First WWW conference Geneva
1994 Sep IETF sets up HTML working group
1995 Nov HTML 2.0 IETF
1997 Jan HTML 3.2 W3C
1997 Dec HTML 4.0 W3C
1999 Dec HTML 4.01 W3C
2000 XHTML 1.0 W3C
2002 XHTML 2.0 W3C
2004 Web Applications 1.0 WHATWG
2007 HTML5 Working Group W3C
2010 Oct HTML5 Last Call Working Draft W3C
12. DOCTYPE
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html>
14. HTML5 FEATURES
Web Form Web SQL Database
Indexed Database
Canvas / SVG Web Storage
Audio / Video Web Workers
Geolocation Web Socket
Web GL
15. HTML5 FEATURES
Web Form Web SQL Database
Indexed Database
Canvas / SVG Web Storage
Audio / Video Web Workers
Geolocation Web Socket
Web GL ● ● ● ● ●
17. FORM
<canvas> For making graphics with a script.
<datalist> A list of options for input values.
<keygen> Generate keys to authenticate users.
For different types of output, such as
<output>
output written by a script.
18. INPUT TYPE
tel week
search time
url datetime-local
email number
datetime range
date color
month
19. INPUT TYPE
<input type=‘color’/>
<input type=‘datetime’/>
<input type=‘number’/>
26. For multimedia content, sounds, music or
<audio>
other audio streams.
For video content, such as a movie clip or
<video>
other video streams.
For media resources for media elements,
<source>
defined inside video or audio elements.
<embed> For embedded content, such as plug-in.
32. DEVICE APIS AND POLICY WORKING GROUP
Calendar Contacts
Address-book
Camera Messaging
and microphone (SMS, MMS, Emails)
System info Device Interfaces
(CPU, Network, etc)
Application Launcher
(KangChan Lee, WonSuk Lee)
● ● ●
33. DEVICE APIS AND POLICY WORKING GROUP
Calendar Contacts
Address-book
Camera Messaging
and microphone (SMS, MMS, Emails)
System info Device Interfaces
(CPU, Network, etc)
Application Launcher
(KangChan Lee, WonSuk Lee)
● ● ●
Device APIs and Policy Working Group Meeting
The DAP WG is planning to have a F2F in Seoul, South Korea
on March 15-18 2011, hosted by ETRI.
34. HTML5
WEB STORAGE
WEB APPLICATION SOFTWARE METHODS AND PROTOCOLS USED FOR STORING DATA IN A WEB BROWSER.
WEB STORAGE SUPPORTS PERSISTENT DATA STORAGE, SIMILAR TO COOKIES, AS WELL AS WINDOW-LOCAL STORAGE.
35. HTML5 WEB STORAGE API
✤ Cookie .
✤ Cookie .
4KB .
HTTP Request .
.
.
.
36. HTML5 WEB STORAGE API
✤ HTML5 Web Storage
.
5MB .
.
Key - Value
LocalStorage, SessionStorage 2 .
38. HTML5 WEB STORAGE API
function isSupportLocalStorage() {
var result = true;
try { localStorage }
catch (e) { result = false; }
return result;
}
function isSupportSessionStorage() {
var result = true;
try { sessionStorage }
catch (e) { result = false; }
return result;
}
39. HTML5 WEB STORAGE API
var sKey = $(“#txtKey”).val();
var sValue = $(“#txtValue”).val();
try {
localStorage.setItem(sKey, sValue);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(“ .”);
}
}
Key-Value pair
40. HTML5 WEB STORAGE API
var sKey = “userName”;
localStorage.getItem(sKey);
localStorage.removeItem(sKey);
localStorage.clear();
SessionStorage LocalStorage
.
47. HTML5 WEB SQL DATABASE
✤ openDatabase
( Open)
var db = openDatabase('mydb', '1.0', 'sample db', 2 * 1024 * 1024);
db.transaction(function (tx) {
// here be the transaction
// do SQL magic here using the tx object
});
openDatabase Parameters
Creation callback
48. HTML5 WEB SQL DATABASE
✤
executeSql SQL .
var db = openDatabase('mydb', '1.0', 'sample db', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});
49. HTML5 WEB SQL DATABASE
✤ executeSql
.
var db = openDatabase('mydb', '1.0', 'sample db', 2 * 1024 * 1024);
var userID = document.getElementById('userId').value;
var userName = document.getElementById('userName').value;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [userID, userName]);
});
50. HTML5 WEB SQL DATABASE
✤
executeSql
ResultSet .
var db = openDatabase('mydb', '1.0', 'sample db', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
});
});
51. HTML5
GEOLOCATION
THE GEOLOCATION API DEFINES A HIGH-LEVEL INTERFACE TO
LOCATION INFORMATION ASSOCIATED ONLY WITH THE DEVICE HOSTING
THE IMPLEMENTATION, SUCH AS LATITUDE AND LONGITUDE
55. HTML5
WEBSOCKET
A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL,
FULL-DUPLEX COMMUNICATIONS CHANNELS,
OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET