HTML5

[Pages:132]HTML5

for the Web

venerd? 10 maggio 2013

Timeline of web technologies

1991 -- HTML 1994 -- HTML 2 1996 -- CSS 1 + JavaScript 1997 -- HTML 4 1998 -- CSS 2 2000 -- XHTML 1 2002 -- Tableless Web Design 2005 -- AJAX 2009 -- HTML 5

HTML5 = HTML + CSS + JS

venerd? 10 maggio 2013

What we will cover

? Offline / Storage ? RealMme / CommunicaMon ? File / Hardware Access ? SemanMcs & Markup ? Graphics / MulMmedia ? CSS3 ? Nuts & Bolts

venerd? 10 maggio 2013

Offline / Storage: js web storage

Local Storage is intended to be used for storing and retrieving data in html pages from the same domain. The data can be retrieved from all the windows in the same domain even if the browser is restarted. The Session Storage is the other Web Storage opMon and the data is available only in the window it was stored in and is lost when the browser window is closed.

They simply provides a key--value mapping, e.g. localStorage["name"] = username;. Unfortunately, present implementaMons only support string--to--string mappings,

so you need to serialise and de--serialise other data structures. You can do so using JSON.stringify() and JSON.parse().

Local Storage along with Session Storage aims to be a replacement of the cookies, defining a more consistent API. There are a few differences from the cookies: -- While the cookies are accessible from both client and server side, Web Storage in general and Local Storage in parMcular is accessible only from client side. -- Enhanced capacity (official for cookies is 4 kbytes) to more than 5Mb per domain(Firefox, Google Chrome, and Opera and 10MB in IE).

The local storage is a simple javascript api that you can use inside html5 pages if it's supported by the browser. The Local Storage implements the same interface that can be used for Session Storage as well.

venerd? 10 maggio 2013

Offline / Storage: js web storage

Here is the interface as it is defined by : Interface Storage {

readonly aoribute unsigned long length;

geoer DOMString key(in unsigned long index);

geoer any getItem(in DOMString key);

seoer creator void setItem(in DOMString key, in any value);

deleter void removeItem(in DOMString key);

void clear();

};

// use localStorage for persistent storage // use sessionStorage for per tab storage saveBuoon.addEventListener('click', funcMon () {

window.localStorage.setItem('value', area.value);

window.localStorage.setItem('Mmestamp', (new Date()).getTime()); }, false); textarea.value = window.localStorage.getItem('value');

W3C Reference: hop://dev.html5/webstorage/ Sample: hop://localhost:8888/PPM--COURSE--2012/html5/samples/slides.html#web--storage

venerd? 10 maggio 2013

Offline / Storage: js web storage -- browsers support

venerd? 10 maggio 2013

Offline / Storage: Web SQL Database

This API was on the W3C RecommendaMon track but specificaIon work has stopped. The specificaMon reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need mulMple independent implementaMons to proceed along a standardisaMon path.

? A real, relaMonal database implementaMon on the client (SQLite) ? Data can be highly structured, and JOIN enables quick, ad--hoc access ? Big conceptual overhead (SQL), no finely grained locking ? Not very JavaScripty, browser support is poor, and the spec has been more or less abandoned.

var db = window.openDatabase("DBName", "1.0", "descripMon", 5*1024*1024); //5MB db.transacIon(funcMon(tx) {

tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });

W3C Reference: hop://dev.html5/webdatabase/ Sample: hop://localhost:8888/PPM--COURSE--2012/html5/samples/2--web--sql--databases.html (It works only in Safari) Some specificaIons: hop://storage.html

venerd? 10 maggio 2013

Offline / Storage: IndexedDB

IndexedDB is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it's a straighvorward key--value mapping, but it supports indexes like those of relaMonal databases, so searching objects matching a parMcular field is fast; you don't have to manually iterate through every object in the store.

? Sits somewhere between full--on SQL and unstructured key--value pairs in localStorage. ? Values are stored as structured JavaScript objects, and an indexing system facilitates filtering and

lookup. ? Asynchronous, with moderately granular locking ? Everything is asynchronous.

Callbacks are your friends. ? Databases are named, and contain one or more named Object Stores ? Values in an Object Store are structured, but don't have a rigidly defined schema. ? Object Stores can contain one or more indexes that make filtering and lookup possible via arbitrary

properMes.

venerd? 10 maggio 2013

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download