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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.