HTML

Introduzione
L'obiettivo di questa guida fornire agli autori (Web developers, Webmasters, grafici e chiunque
veicoli contenuti formattati tramite codice HTML[!" un primo strumento utile per entrare in
contatto con le specifiche del nuovo linguaggio# si propone inoltre di essere un valido me$$o per la
consulta$ione delle singole nuove features introdotte% La guida non tratta HTML nel suo
complesso ma si concentra sulle differenze che intercorrono tra la versione 4.01 e la versione
5%
Fonti e metodologia
&er costruirla mi sono avvalso dei diversi documenti ('ecommendations" che il W() mette a
disposi$ione# queste fonti ne hanno ispirato organi$$a$ione e struttura ed hanno fornito lo spunto
per redigere i vari capitoli%
N..! Laddove ho percepito nella documentazione distonie che potessero essere fonte di
diverse interpretazioni" #uindi potenzialmente generanti entropia" ho stralciato le
informazioni du$$ie cercando di isolare #uelle certe, questo approccio stato adottato in ragione
della natura mutevole del draft, con la convin$ione che la raffina$ione futura possa modificare le
sfumature, ma difficilmente stravolgere i concetti base%
Le definizioni formali di ogni elemento sono mie personali traduzioni di #uelle fornite nelle
specifiche (nelle quali non esiste un paragrafo *defini$ione formale*", talvolta integrate con esempi
di utili$$o (mutuati dal documento, riadattati od e+,novo" quando questi si siano resi fondamentali
per massimi$$are la comprensione del contesto%
Le espressioni *elemento* e *tag* sono stati considerati a tutti gli effetti sinonimi% Lo stesso
principio di equivalen$a stato adottato per i termini *bro-ser* e *user,agent*%
HTML5
HTML5 un linguaggio di markup attualmente in fase di defini$ione% .l documento di specifica
che lo descrive consiste al momento in una bo$$a in lavora$ione (working draft"# rappresenta
l'evolu$ione diretta di HTML 4.01, del quale designato essere il successore%
HTML definito in modo da essere retrocompati$ile/ se da un lato agli autori si vieta in buona
sostan$a l'utili$$o dei vecchi elementi non inclusi nella nuova specifica, dall'altro richiesto agli
user,agents di mantenerne il supporto al fine di garantire la compatibilit0 con i documenti redatti in
passato# il linguaggio prevede quindi requirements diversi per autori e user-agents eliminando di
fatto la necessit0 di indicare le features obsolete come deprecate%
Enti e gruppi coinvolti
La stesura delle specifiche a carico del %&' (%orld %ide %e$ 'onsortium) e del %H*T%+
(%e$ H,perte-t *pplication Technolog, %or.ing +roup), un gruppo di professionisti
provenienti da a$iende fortemente interessate come *pple" Mozilla" ed /pera% 1u proprio il
WH2TW3 a spendersi ini$ialmente, correva l'anno 4556, affinch7 il W() si orientasse verso
HTML a discapito di 0HTML 1.0, ne propose il nome e ne ispir8 la filosofia% .n seguito alle
pressioni ricevute, direttamente propor$ionali al peso degli attori in causa, il W() nel 4559 chiuse
ufficialmente lo sviluppo di :HTML 4%5 ed ini$i8 a dedicarsi a tempo pieno alla stesura delle
specifiche di HTML520HTML5%
RoadMap
La data attualmente prevista per la chiusura del processo di defini$ione indicata intorno alla
met0 del 45;<%
Data ultimo draft disponibile al momento della stesura di questa guida
< 1ebbraio 45;4
Perch HTML
La motiva$ione principale addotta per giustificare la necessit0 di creare un nuovo standard
dichiarata esplicitamente in uno stralcio del paragrafo 1.1 del documento provvisorio di specifica,
di cui riporto la (mia" tradu$ione/
L'area pi importante che (l'attuale) HTML non copre adeguatamente quel neuloso (!agamente
definito) soggetto conosciuto come "#e $pplication"% &uesto documento cerca di risol!ere questo
prolema e parallelamente di aggiornare le specifiche HTML per dare risposta alle questioni
emerse negli ultimi anni%
L'obiettivo in buona sostan$a di semplificare il lavoro degli sviluppatori (e quindi delle a$iende
coinvolte nella crea$ione di %e$ applications" che negli ultimi anni hanno dovuto elaborare
solu$ioni, a volte molto complesse, per superare le limita$ioni di HTML, un linguaggio non
nativamente progettato per lo sviluppo di articolate interfacce grafiche e sofistificate intera$ioni con
l'utente%
HTML e !HTML
HTML5 possiede una serializzazione HTML (tipo MIM3 te-t2html) ed una serializzazione
0ML (tipi MIM3 application2-html4-ml" application2-ml)" il nome della #uale 5 0HTML5% .l
-or=ing draft puntuali$$a/
'sistono !arie sintassi concrete (implementa(ioni) che possono essere utili((ate per trasmettere le
risorse che usano questo linguaggio "astratto" (HTML))% *ue di queste sono definite in questo
documento% La prima la sintassi HTML +%%, La seconda quella -HTML. che una applica(ione
di -ML% &uando un documento !iene trasmesso come application/0html10ml trattato come un
documento -ML dal rowser e processato coerentemente%
"doption
>ench7 il linguaggio non sia ancora uno standard e malgrado le specifiche siano ancora par$iali
(quindi poten$ialmente soggette a modifiche" i maggiori produttori di bro-sers migliorano la
compatibilit0 HTML dei propri soft-are ad ogni nuova release%
?ussistono d'altra parte sensibili differen$e tra produttore e produttore e soprattutto tra versioni
recenti ed obsolete dei vari bro-sers presenti sul mercato%
@sistono svariate tabelle comparative sull'argomento e risorse online che permettono di valutare nei
fatti quanto il proprio bro-ser aderisca alle nuove specifiche, tra i piA utili$$ati strumenti online cito
http/BBhtmltest%com# nel mese di 3ennaio 45;4 la situa$ione era la seguente (nota/ a punteggio piA
alto equivale maggiore aderen$a alle specifiche, ma+ C <6 punti"/
+oogle 'hrome 16.0 (6(
Mozilla 7irefo- 8.0 ((5
/pera 11.60 (49
*pple 9afari 5.1 (54
M9 I3 8 ;<;
Della prossima le$ione vedremo una breve cronologia dell'evolu$ione del linguaggio HTML dagli
anni '95 ad oggi%
9toria e cronologia di HTML
.l lungo cammino verso HTML parte dalla prima defini$ione di HTML avvenuta all'ini$io degli
anni '95% .l neonato Internet aveva bisogno di un linguaggio di formatta$ione dei contenuti che li
rendesse fruibili in modo organi$$ato, questi sarebbero poi stati veicolati all'utente avvalendosi di
un bro-ser, un soft-are cio che li avrebbe mostrati cosE come indicato dai comandi (tags" che
componevano il documento (ipertesto" HTML assieme all'informa$ione pura%
Tim erners:Lee, padre del Web, lo definE basandosi sul metalinguaggio 9+ML (?tandard
3enerali$ed Mar=up Language" e gli affianc8 un protocollo di trasporto, il ben noto HTT;%
Da HTML Tags ad HTML #$%&
Degli anni successivi l'afferma$ione del Web con la sua repentina ed inarrestabile diffusione aveva
creato la necessit0 di estendere e migliorare il linguaggio originale (HTML Tags", ini$ialmente
composto da una manciata di elementi% Fopo alcune revisioni avvenute tra il ;99; ed il ;994, nel
;99( Lee insieme allo I3T7 (.nternet @ngineering Tas= 1orce, una comunit0 di tecnici interessata
allo sviluppo di .nternet" pubblic8 <H,perte-t Mar.up Language (HTML)< Internet:=raf, il
primo documento ufficiale che proponeva (proposal" una bo$$a avente lo scopo di formali$$are il
linguaggio%
Fopo ulteriori revisioni, il lavoro di stesura delle specifiche sfoci8 in HTML 1.0, a met0 del ;99(%
Del ;99 lo .@T1 rese pubblico un nuovo proposal che introduceva HTML &.0% La specifica non
ebbe successo per vari motivi, non ultimo dei quali l'imperversante guerra dei $ro>ser che in quel
momento storico intercorreva tra Netscape e Microsoft%
Le due a$iende decisero di implementare solamente un suset delle fun$ionalit0 descritte nelle ;5
pagine del documento aggiungendo al contempo estensioni proprietarie che miravano soprattutto al
controllo dello stile e del look2feel delle pagine -eb (visual mar.up"%
Guesto approccio era in aperto contrasto con la filosofia accademicoBtecnica che intendeva HTML
come un linguaggio esclusivamente di formatta$ione (mar.up"%
)on l'abbandono dello .@T1, formali$$ato con la chiusura del proprio HTML Wor=ing 3roup nel
;99H, la prima 3ecommendation del W() uscE nel ;996 (HTML &.1"% .l documento si proponeva di
ridurre la distan$a tra le estensioni proprietarie promuovendone una sintesi accettabile ed adottando
in parte i tags *stilistici* di Detscape%
Del dicembre ;996 il W() pubblic8 una nuova 'ecommendation/ HTML 4.0 (nome in codice
*)ougar*" che prevedeva tre varianti/
9trict/ gli elementi deprecati erano proibiti%
Transitional/ gli elementi deprecati erano permessi%
7rameset/ in buona sostan$a veniva permesso l'utili$$o dei soli elementi strettamente legati
ai frames%
HTML <%5 inoltre deprecava i tags Detscape relativi allo stile, tra i quali il tag font, caldeggiando in
alternativa l'uso dei '99 (1ogli di stile , )ascading ?tIle ?heets"%
&receduta e seguita da alcune piccole corre$ioni (errata", nel Ficembre del ;999 fu pubblicata la
'ecommendation HTML 4.01 che attualmente rimane l'ultima rilasciata per il linguaggio%
!HTML
:HTML (e:tensible HIperTe+t Mar=up Language" una applicazione di 0ML cos? come
HTML lo 5 di 9+ML% .l W() fornisce questa defini$ione per la prima versione del linguaggio/
-HTML 4%5 una riformula(ione di HTML 6%54 in -ML. comina la rouste((a di HTML6 con la
poten(a di -ML%
.l documento :HTML pu8 essere validato da un parser :ML, il documento HTML al contrario ne
richiede uno specifico%
Gualche caratteristica/
:ML case,sensitive per elementi ed attributi%
il processamento di un documento che produca errori di parsing semplicemente viene
terminato%
il doctIpe deve essere sempre presente perch il documento possa essere validato%
tutti i tags devono essere chiusi%
0HTML 5 #uindi molto pi@ restrittivo di HTML, in conseguen$a del fatto che :ML di cui
applica$ione un subset molto piA restrittivo di ?3ML rispetto a quanto lo sia HTML%
Tra gli obiettivi della sua crea$ione la volont0 di spingere gli autori di contenuti Web verso una
sintassi piA vicina all':ML allo scopo di semplificare lAinteropera$ilitB con altri formati 0ML
come ad esempio 9C+ (?calable Jector 3raphics"%
La versione ;%5 divent8 'ecommendation W() il 4H 3ennaio 4555%
La spinta successiva soffi8 nella dire$ione della modularizzazione 0HTML, ossia la
pacchetti$$are del linguaggio in moduli con lo scopo di renderlo estensibile% L'idea era quella di
renderlo flessibile per l'utili$$o su media come dispositivi moile e TJ connesse alla rete%
.l lavoro port8 alla reali$$a$ione di una nuova specifica/ 0HTML 1.1%
Kltre ad eliminare alcuni attributi ed aggiungere dei tags per migliorare il supporto per le lingue
asiatiche il linguaggio doveva essere trasmesso con un media type particolare
(application2-html4-ml) e non come HTML# questa limita$ione n limit8 fortemente l'ado$ione
tanto da spingere nel 4559 il W() a rilassare la restri$ione permettendo che il documento si potesse
servire come HTML%
Jenne ini$iato poi il lavoro di stesura delle specifiche di 0HTML 1.1 abbandonato definitivamente
nel 45;5%
!HTML '$%
Del 4554 il W() rilasci8 il primo draft per un nuovo linguaggio che non prevedeva la
retrocompatibilit0 n con :HTML ;%+ n con HTML <%5;%
0HTML 1.0 doveva adottare :ML FKM al posto del Focument KbLect Model, tra le
novit0 prevedeva che ogni elemento avrebbe potuto comportarsi come un lin= a fronte della sola
aggiunta di un attributo href e includeva tra gli altri un nuovo tag nl per implementare liste di
naviga$ione%
Le pressioni esercitate in senso contrario al linguaggio dal WH2TW3, dovute in massima parte al
disaccordo sulla mancan$a di ackward compatiilit7, portarono all'abbandono definitivo del
progetto nel 4559 spianando definitivamente la strada ad HTML%
Il =/'TD;3 di HTML5
La sintassi HTML di HTML5 richiede la dichiara$ione di un doct,pe in testa al documento per
assicurare che il bro-ser renderi$$i correttamente la pagina# quando la risorsa servita come
HTML (tipo M.M@ te+tBhtml" la sintassi corretta riportata nel codice minimale che segue/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titolo documento</title>
</head>
<body>
<p>paragrafo</p>
</body>
</html>
Dotate l'utili$$o di meta per indicare lAencoding della pagina, la sintassi affianca la gi0
precedentemente valida dichiara$ione equivalente/
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
L'esempio pone in eviden$a la semplificata dichiara$ione del doctIpe, diversa dalla specifica
HTML <%5; che ne prevede tre diverse, esattamente come per :HTML ;%5%
)ome confronto riporto le sintassi sino ad ora utili$$ate/
HTML 4.01 9trict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
0HTML 1.0 9trict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
0HTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 7rameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
0HTML 1.0 7rameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
In 0HTML 1.1 la dichiara$ione prevedeva questa sintassi/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
)ome emerge dagli esempi le dichiara$ioni dei FoctIpe in HTML <%5; ed :HTML richiedevano
un rimando ad un *T* poich il linguaggio era basato su ?3ML# HTML non implementa$ione
di ?3ML, quindi non lo richiede%
La dichiara$ione case-insensiti!e% Guesto si traduce nell'equivalen$a tra/
<!doctype html>
e
<!DOCTYPE html>
&ersonalmente preferisco *normali$$are* il codice scrivendo tags ed attributi in lowercase, per
questo motivo opto per la prima variante%
Eualora si intendesse servire il documento come 0ML (MIM3 application2-html4-ml oppure
application2-ml) il doctIpe non sarebbe richiesto# di seguito un esempio conforme alla sintassi
:ML di HTML/
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titolo documento</title>
</head>
<body>
<p>paragrafo</p>
</body>
</html>
/rganizzare i contenuti con HTML5 : section
HTML5 introduce un $uon numero di nuovi elementi, ini$ieremo a descrivere quelli
strettamente connessi alla organi$$a$ione dei contenuti ed alla struttura$ione della pagina%
8l working draft elenca in questa macrocategoria i seguenti elementi/
section
article
aside
hgroup
header
footer
nav
figure
figcaption
=arF per ognuno" oltre alla traduzione della definizione fornita del %&'" #ualche
suggerimento per lAutilizzo" attenendomi #uanto pi@ strettamente possi$ile alle linee indicate
nel documento%
&rima di ini$iare permettetemi una paio di brevi digressioni, la prima a proposito di ci8 che il W()
descrive come 9ectioning content/ si tratta del contenuto che definisce l'ambito di headings (h1"
h1" h&" h4" h5" h6" hgroup) e footers% 3li elementi che fanno parte di questa classifica$ione sono/
article
aside
nav
section
ai quali si aggiungono i sectioning root/ bloc=quote, bodI, details, fieldset, figure, td%
Kgnuno di questi elementi potenzialmente possiede un heading (e quindi un outline" ed un footer#
tratteremo brevemente l'outline nell'ambito della descri$ione del tag hgroup%
La seconda digressione riguarda i glo$al attri$utes, gli attributi globali, applicabili cio a tutti gli
elementi, compongono la lista/
access=eI
class
dir
id
lang
stIle
tabinde+
title
HTML ne introduce di nuovi/
contentedita$le/ indica che l'elemento rappresenta una area editabile# possibile per l'utente
modificare il contenuto e manipolare il mar=up, dedicheremo uno spa$io apposito nella
guida per questo attributo%
conte-tmenu/ da utili$$are per puntare ad un conte+t menu fornito dall'autore%
gli attrinuti data:G (attributi custom definibili dall'utente"
dragga$le e dropzone/ da utili$$are insieme alle nuove FragMFrop 2&.%
hidden/ (booleano" indica che un elemento non ancora o non piA rilevante% .l bro-ser
non deve mostrare elementi che abbiano questo attributo%
role e aria:G (assisti!e technolog7"%
spellchec./ esplicitato per indicare se il contenuto richieda un controllo a livello di spelling%
(ection
=efinizione formale
L'elemento section rappresenta una se(ione generica del documento o dell'applica(ione% 9na
se(ione. in questo contesto. un raggruppamento tematico di contenuti. tipicamente corredato da
un heading%
La specifica indica chiaramente quando utili$$arlo e quando avvalersi di altri costrutti% 2lcuni casi
d'uso suggeriti/
un capitolo in una guida%
i vari tabs di un documento (ovviamente strutturato a tabs"%
le se$ioni numerate di una tesi%
le varie se$ioni (bo+es" di una Home &age che raggruppano contenuti generici
(introdu$ione, contatti, ne-s"%
section deve essere #uindi utilizzato ogni #ualvolta si intenda veicolare del contenuto che
richiede una intestazione% L'elemento non deve essere utili$$ato come aggregatore di stili per
contenuti disomogenei# in questi casi accettato l'utili$$o del tag div, contenitore piA generico, che
rimane nelle specifiche bench7 se ne scoraggi l'uso/ il draft lo definisce letteralmente "last resort"
(traducibile con *ultima spiaggia*"%
Nel caso di posts di un $log o di un forum" per articoli di un giornale o commenti inseriti
dallAutente 5 preferi$ile lAutilizzo dellAelemento article, che vedremo a breve%
@cco l'esempio minimale della sintassi di section fornito nel draft/
<section>
<h1>Titolo sezione</h1>
<p>Contenuti</p>
</section>
Dotate la presen$a di un heading, rappresentato dall'elemento h1%
Kra vediamone una applica$ione leggermente piA elaborata (che ricorre volutamente al *last resort*
come contenitore esterno"/
<!doctype html>
<html>
<head>
<title>Guida HTML5</title>
<style>
#container { margin: 0 auto; width: 400px;}
</style>
</head>
<body>
<div id="container">
<section>
<h1>Introduzione ad HTML5</h1>
<p>Definizione</p>
<p>Perch HTML5</p>
</section>
<section>
<h1>Storia</h1>
<p>Da HTML Tags ad HTML 4.01</p>
<p>XHTML</p>
</section>
<section>
<h1>Nuovi tags</h1>
<p>Section</p>
<p>Article</p>
<p>Nav</p>
<p>Aside</p>
<p>...</p>
</section>

</div>
</body>
</html>
@cco il risultato mostrato da 1irefo+/
>ench7 le se$ioni possano contenere headings di qualsiasi livello o rank (da ; a H" il W() consiglia
l'uso di h; o comunque di un heading correlato al livello di indenta$ione della se$ione stessa%
/rganizzare i contenuti con HTML5 : article"
nav ed aside
"rticle
=efinizione formale
L'elemento article rappresenta una por(ione di contenuto indipendente di un documento. di una
pagina o di un sito. tale por(ione sostan(ialmente distriuiile e riusaile indipendentemente dal
contesto in cui !iene definita%
)ome accennato nella descri$ione di section, campi di applicazioni di article possono essere i un
post di un forum" un articolo di un magazine" un commento inserito da un utente%
2nche una -idget interattiva candidata a rappresentare il contenuto di un elemento article%
. tags article possono essere innestati e tipicamente contengono un heading per il titolo# un esempio
di caso reale riportato nella documenta$ione/ un articolo in un blog ed alcuni commenti ad esso
correlati% 2 scopi didattici ho semplificato l'esempio eliminando alcuni elementi che non sono stati
ancora trattati in questa guida ed aggiungendo (poco" stile/
<!doctype html>
<html>
<head>
<title>Il mio Blog</title>
<style>
article { border: 1px solid #ccc; width: 350px; padding: 4px; }
section article { width: 300px; margin: 0 auto; }
</style>
</head>
<body>
<article>
<h1>Titolo articolo</h1>
<p>In questo articolo parleremo di ...</p>
<section>
<h1>Commenti</h1>
<article>
<p>Postato da: Riccardo Brambilla</p>
<p>Pessimo articolo, sei stato esageratamente prolisso.</p>
</article>
</section>
</article>
</body>
</html>
.l risultato in Kpera/
N interessante notare il nesting dei due article(s" e le due diverse fun$ioni che ricoprono# se il ruolo
assegnato al primo quello piA logicamente prevedibile (contenere il testo dell'articolo", l'utili$$o
del secondo piA raffinato ( il contenitore di un commento all'articolo stesso"%
La scelta di ricorrere al tag section come wrapper del commento ci permette di rivelarne un impiego
solo apparentemente diverso dagli esempi presentati nel paragrafo ad esso dedicato# se infatti in
questo caso non si tratta di elencare punti di un sommario altrettanto chiara la coeren$a rispetto
alla defini$ione formale, poich si intende trasmettere una informa$ione che richiede
indu$ita$ilmente la presenza di un heading%
nav
=efinizione formale
L'elemento na! rappresenta la se(ione della pagina che contiene i link a pagine esterne o ad altre
parti della pagina stessa: una se(ione di link di na!iga(ione%
La specifica puntuali$$a che nav non pensato per contenere un generico gruppo di lin= presente in
pagina, lo scopo principale per cui stato introdotto quello di raggruppare i lin= costituenti la
naviga$ione principale (e se presente quelli della secondaria" del sito% >ench7 possa essere
utilmente impiegato per contenere i lin= tipicamente presenti in un tag footer (elemento che
vedremo nelle prossime le$ioni" non in quella situa$ione considerato necessario%
Il tipico contenuto di nav potre$$e essere una lista non ordinata (ul) di lin. di navigazione
come esplicitato nell'esempio minimale che segue/
<nav>
<ul>
<li><a href="home.html">Home page</a></li>
<li><a href="contatti.html">Contatti</a></li>
<li><a href="dovesiamo.html">Dove siamo</a></li>
</ul>
</nav>
N d'altra parte conforme alla specifica un elemento nav che contenga paragrafi a loro volta
contenenti lin=s, e che non utili$$i quindi liste%
aside
=efinizione formale
L'elemento aside rappresenta una se(ione della pagina che racchiude un contenuto solo
tangen(ialmente correlato a ci; che lo circonda e che pu; considerarsi come separato da esso%
&ueste se(ioni sono spesso definite come sidears (colonne laterali)%
.l -or=ing draft attuale consiglia l'utili$$o di questo elemento per raggruppare contenuti
pu$$licitari ed elementi di navigazione che puntino allAesterno del documento%
On bo+ contenente l'archivio dei vecchi post di un blog, tipicamente collocato in una colonna sulla
destra della pagina, un poten$iale candidato per l'impiego di aside# altrettanto cal$ante il caso di
un gruppo di lin= che puntino a blog esterni (logroll"%
2ltro possibile utili$$o/ eviden$iare una cita$ione all'interno di un articolo/
<p>Di professione Coder e Team Leader Riccardo ama molto la divulgazione
scientifica:
<q>Mi piacerebbe scrivere testi utili ed interessanti. La sfida in questi casi
ottenere che il lettore
si appassioni all'argomento senza annoiarsi.</q></p>
<aside>Il mio sogno di scrivere testi che appassionino il lettore.</aside>
<p>Nel frattempo si dedica allo sviluppo ...</p>
/rganizzare i contenuti con HTML5 : header"
hgroup e footer
header
=efinizione formale
L'elemento header rappresenta un gruppo di informa(ioni introdutti!e o di aiuto alla na!iga(ione%
>ench7 header sia primariamente pensato come un contenitore di headings questa applica$ione non
l'unica possibile% LAelemento puF essere utilmente impiegato per racchiudere #ualsiasi
contenuto a$$ia un intento introduttivo" come un sommario od un logo%
<header>
<p>Benvenuti nel mio blog:</p>
<h1>Ribrain Blog</h1>
</header>
D%>%/ header non segna l'ini$io di una se$ione ma ne contiene solo l'intesta$ione%
H possi$ile definire pi@ di un header in una pagina, il primo rappresentante l'introdu$ione alla
pagina stessa, i successivi atti ad introdurre le varie se$ioni presenti, come nell'esempio che segue/
<doctype html>
<html>
<head>
<title>La mia Home Page</title>
</head>
<body>
<header>
<h1>Benvenuti nel mio sito personale</h1>
<nav>
<h1>Scopri le varie sezioni!</h1>
<ul>
<li><a href="home.html">Home</a>
<li><a href="contatti.html">Contatti</a>
<li><a href="dovesiamo.html">Dove siamo</a>
</ul>
</nav>
</header>
<div id="content">
<section>
<header>
<h1>News</h1>
<p>Le novit piu importanti della settimana, entra per scoprirle nel
dettaglio.</p>
</header>
</section>
<section>
<header>
<h1>Blog</h1>
<p>Giorno per giorno, quello che mi ha colpito.</p>
</header>
</section>
</div>
</body>
</html>
)ome si evince dal codice header pu8 contenere l'elemento nav# ho utili$$ato section per definire i
vari bo+ poich7 hanno, nella Home &age dell'esempio lo scopo di agire da sommario per le varie
parti del sito/ questo particolare utili$$o di section esplicitamente indicato nel draft (vedi le$ioni
precedenti"%
hgroup
=efinizione formale
L'elemento hgroup rappresenta l'intesta(ione di una se(ione% < utili((ato per raggruppare un set di
elementi h4-h= qualora l'heading possegga li!elli multipli come sottointesta(ioni. titoli alternati!i o
taglines (slogan che solitamente accompagnano il rand. spesso riportati in corsi!o ad es%>
"3irain%8l tecnico al tuo ser!i(io")%
Dei casi di un sommario di un documento o di un indice (outline" il testo degli elementi
appartenenti un tag hgroup definito essere il testo dell'heading con ran= piA alto presente nel
gruppo# qualora esistessero piA elementi di uguale ran= come il testo del primo di questi# laddove
non esistesse alcun heading il testo di hgroup sarebbe una stringa vuota# altri heading (di piA basso
grado o ran=" presenti in hgroup definiscono sottotitoli o sottointesta$ioni%
On esempio minimale/
<hgroup>
<h1>Storia di HTML</h1>
<h2>Le prime fasi</h2>
</hgroup>
On soft-are che estraesse l'intesta$ione principale ignorando i sottotitoli (tale soft-are esiste ed
detto outliner" mostrerebbe solo il testo dell'heading piA alto in grado (ran=" quindi *?toria di
HTML*%
hgroup non ha ovviamente senso laddove non vi sia necessit0 di utili$$are sottotitoli come
nell'esempio che segue/
<article>
<h1>Titolo dell'articolo</h1>
<p>testo dell'articolo</p>
</article>
Del caso in cui in aggiunta al titolo compaiano informa$ioni aggiuntive corretto utili$$are
l'elemento header/
<article>
<header>
<h1>Titolo dell'articolo</h1>
<p>Redatto da Riccardo Brambilla</p>
</header>
<p>testo dell'articolo</p>
</article>
Guale quindi lo scopo di introdurre hgroupP L'outliner% N aperta per questo motivo una vivace
discussione che ha gi0 portato una volta all'esclusione dell'elemento dalle specifiche, salvo poi
reintegrarlo successivamente% Il destino di hgroup 5 di conseguenza" al momento" incerto.%
footer
=efinizione formale
L'elemento footer rappresenta il pi? di pagina per il pi !icino elemento che ne definisca l'amito
(article. aside. na!. section)% 9n footer tipicamente contiene informa(ioni a proposito della se(ione
a cui si riferisce come l'autore. link a documenti correlati. cop7right%
Laddove il footer contenesse intere se$ioni assumer0 la fun$ione di appendice, di indice o di
contenitore dei termini di lunghi contratti di licen$a, nel caso in cui l'elemento parent piA diretto
fosse il bodI il footer si applicher0 come pi7 di pagina per l'intero documento%
.l draft ricorda inoltre che sebbene tipicamente il footer appaia al termine di una se$ione non
strettamente necessario definirlo come ultimo elemento%
La specifica consiglia inoltre di inserire informa$ioni come i contatti dell'autore eBo dell'editore in
un tag address, opportunamente -rappato da un tag footer%
.l tag footer ha quindi l'effetto di sostituire linee di codice ora tipicamente definite in questo modo/
<div id="footer"> 2012 MrWebmaster.it - author Riccardo Brambilla</div>
con la nuova sintassi/
<footer> 2012 MrWebmaster.it - author Riccardo Brambilla</footer>
)ome esplicitato nella defini$ione l'elemento trova impiego anche nell'indicare informa$ioni
addi$ionali di una se$ione o di un articolo/
<article>
<h1>Il tag footer</h1>
<p>L'elemento footer rappresenta...</p>
<footer>Pubblicato da Ribrain</footer>
</article>
L'elemento article qui definisce l'ambito del footer%
De deriva logicamente che possano esistere, come gi0 descritto per il tag header, piA elementi footer
in un documento%
Ona interessante annota$ione presente nel draft ci indica come l'elemento possa utilmente contenere
anche molto materiale/ naviga$ione, testo e addirittura immagini% N in effetti un approccio molto
comune nel design moderno dei siti -eb avvalersi dei cosiddetti <fat footers<, se$ioni molto
consistenti in termini di spa$io visivo occupato e di quantit0 di contenuti ospitati%
/rganizzare i contenuti con HTML5 : figure e
figcaption
figure e figcaption
=efinizione formale di figure
L'elemento figure rappresenta un insieme di elementi e testo. op(ionalmente corredato da una
didascalia. indipendente e tipicamente riconosciile come entit@ atomica (nell'acce(ione di
inscindiile) all'interno del documento%
=efinizione formale di figcaption
L'elemento figcaption rappresenta la didascalia o legenda per il resto del contenuto dell'elemento
che ne parent (contenitore diretto). ossia dell'elemento figure%
.l draft indica tra gli usi consigliati della coppia figure:figcaption! illustrazioni" diagrammi"
foto" frammenti di codice# i perfetti candidati sono elementi referen$iati dal contenuto principale
della pagina, ma che se anche fossero spostati in altre se$ioni, ad esempio a lato della pagina stessa,
non ne intaccherebbero il significato generale%
L'impiego tipico il posi$ionamento e la descri$ione di un immagine/
<!doctype html>
<html>
<head>
<style>
body {
font-family: "Tahoma", "Arial", sans-serif;
font-size: 12px;
letter-spacing: 1px;
}
figure {
width: 280px;
height: 380px;
text-align: center;
}
figure img {
padding: 10px;
border: 1px solid #888;
}
</style>
</head>
<body>
<figure>
<img src="bambola.png" alt="bambola">
<figcaption>Operazione alla bambola!</figcaption>
</figure>
</body>
</html>
.l risultato su 1irefo+/
N..! Non 5 o$$ligatorio indicare una figcaption%
L'elemento figure trova applica$ione non solo per le immagini, pu8 essere utili$$ato anche per
contenere video# ne consentito l'uso anche con del semplice testo, magari per eviden$iare una
cita$ione, come indicato nelle specifiche/
<figure>
<p>Cum in Italiam proficisceretur Caesar, Ser. Galbam cum legione XII ... </p>
<figcaption><cite>Giulio Cesare (incipit Libro III). De bello Gallico, 50
A.C.</cite></figcaption>
</figure>
Ja inoltre sottolineato come sia possibile inserire piA elementi (ad esempio immagini" all'interno di
figure, descritti da una unica didascalia/
<figure>
<img src="casa-1.jpg" alt="foto originale"/>
<img src="casa-seppia.jpg" alt="foto virata seppia"/>
<img src="casa_bw.jpg" alt="foto bw"/>
<figcaption>Le immagini mostrano i vari effetti grafici
applicabili.</figcaption>
</figure>
I media elements di HTML5! video" audio"
source e trac.
HTML introduce due elementi appositamenti creati per facilitare l'inserimento di contenuti
multimediali con l'obiettivo dichiarato di colmare le lacune sul tema presenti nella precedente
specifica# appartengono alla categoria dei media elements/
video
audio
?ono strettamente legati ai media elements i seguenti elementi/
source
trac=
=efinizione formale di media element
8 media elements (elementi multimediali) sono utili((ati per presentare all'utente filmati e files
audio%
=efinizione formale di media resource
8l termine media resource (risorsa multimediale) si riferisce al file multimediale nel suo complesso.
un file !ideo completo od un file audio completo% 9na risorsa multimediale pu; contenere files
audio multipli cosA come tracce !ideo multiple% *al punto di !ista del media element la risorsa
multimediale semplicemente (nel caso di un !ideo) la traccia sele(ionata correntemente: allo
stesso modo se la risorsa un file audio la risorsa multimediale il risultato del mi0 di tutte le
tracce (audio) correntemente sele(ionate%
H interessante notare come entram$i gli elementi possano riprodurre files video e audio% La
differen$a risiede nell'assen$a nel tag audio di una area dedicata alla riprodu$ione dell'immagine ed
all'inserimento di didascalie% 2mbedue espongono delle 2&.s in modo che gli autori
(programmatori" possano definire interfacce custom per le loro applica$ioni, nel caso tale
opportunit0 non venga sfruttata il failo!er atteso l'utili$$o dell'interfaccia predefinita dello user,
agent%
?ono definiti attributi comuni per entrambi gli elementi/
src/ la loca$ione della risorsa da riprodurre%
crossorigin/ enumera$ione che pu8 valere anonImousBuse,credentials# utili$$ata per
richieste di risorse cross-domain%
preload/ enumera$ione che pu8 assumere i valori
o none/ indica (in buona sostan$a" allo user agent che l'autore non richiede una alta
priorit0 per la frui$ione della risorsa
o metadata/ indica allo user agent che l'autore non richiede una alta priorit0 per la
frui$ione della risorsa ma che ritiene ragionevole (in termini di traffico" ottenere
informa$ioni come dimensioni, primo fotogramma, lista delle tracce, durata ecc%
o auto/ suggerisce allo user agent che la risorsa pu8 essere trasmessa all'utente sen$a
alcun rischio per il server%
autopla,/ booleano# indica se la riprodu$ione debba essere ini$iata automaticamente o no%
mediagroup/ pu8 essere utili$$ato per lin=are risorse multimediali multiple (piA di un file
videoBaudio"
loop/ attributo booleano che, se specificato, indica se l'elemento debba *riavvolgere* la
risorsa e farla ripartire dall'ini$io una volta raggiunto il termine del contenuto%
muted/ attributo che indica lo stato di default dell'audio per una risorsa video%
controls/ attributo, se omesso, che indica allo user agent di farsi carico di mostrare
l'interfaccia dei controlli per la risorsa% &er controlli si intendono soprattutto i classici tasti
plaIBpause e la barra di avan$amento%
.ni$iamo la descri$ione puntuale dei due elementi partendo da video%
video
=efinizione formale
L'elemento !ideo utili((ato per mostrare filmati. !ideo e files audio con didascalia%
.l draft puntuali$$a che il tag pu8 contenere testo ed informa$ioni ma afferma anche che questi non
debbono essere mostrati dallo user,agent# qualora fossero presenti sarebbero definiti per indicare
all'utente in possesso di un bro-ser obsoleto vie alternative per fruire della risorsa multimediale%
?ono definiti per l'elemento oltre agli attributi comuni ad audio visti precedentemente/
poster
-idth
height
.n particolare poster deve contenere l'indiri$$o di una immagine alternativa da caricare laddove il
video non fosse disponibile% N consigliabile scegliere come poster frame una immagine
rappresentativa del filmato in questione, in modo da dare immediata indica$ione all'utente di quale
argomento tratti la risorsa%
Tralascer8 in questa sede le defini$ioni tecniche riguardanti stato del video e dimensioni, riportate
nel draft, poich esulano dagli scopi di questa guida essendo direttive destinate agli user,agents e
non agli autori%
On esempio minimale della sintassi/
<video src="filevideo.vid" autoplay></video>
audio
=efinizione formale
L'elemento audio rappresenta un suono o uno stream audio: pu; essere incluso del contenuto
(testuale) all'interno dell'elemento% Bli user-agents non do!reero mostrare questo contenuto agli
utenti. esso presente al solo scopo di permettere ai !ecchi rowser di tentare il caricamento
attra!erso i plugin audio disponiili o di mostrare informa(ioni che descri!ano !ie alternati!e per
accedere alla risorsa che si intende !eicolare%
On esempio minimale dell'utili$$o del tag audio/
<audio src="frank_sinatra-under_my_skin.mp3" preload="auto"></audio>
N importante sottolineare che non tutti i formati sono supportati dai singoli bro-sers# la
considera$ione vale sia per i codecs audio quanto per quelli video# l'HTML Wor=ing 3roup
auspica venga individuato almeno un formato universalmente supportato, i vari produttori tuttavia
sembrano spingere in questa fase in dire$ioni diverse alimentando polemiche incrociate nei
confronti delle scelte altrui%
2llo scopo di evitare inaspettati disservi$i ed essere ragionevolmente sicuri di veicolare la risorsa di
interesse stato creato l'elemento source/
source
=efinizione formale
L'elemento source permette all'autore di specificare delle alternati!e per le risorse definite in un
elemento multimediale (audio. !ideo)% L'elemento definito al di fuori di questo contesto non ha
alcun significato%
)ome ben chiarito dalla specifica il tag source permette di definire un semplice meccanismo di
failo!er qualora il bro-ser non fosse in grado di leggere e riprodurre la risorsa definita per prima
nella lista delle sources% Jediamo un esempio pratico di quanto detto/
<audio>
<source src="frankie.wav">
<source src="frankie.ogg">
Il browser non in grado di riprodurre alcuno dei file indicati!
</audio>
Dotate il contenuto testuale fornito nel caso in cui entrambi i codecs non siano supportati% source si
applica indistintamente ai tag audio e video%
Kltre all'attributo src (obbligatorio" la specifica aggiunge tIpe per specificare il media t7pe della
risorsa/
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
trac)
=efinizione formale
L'elemento track permette all'autore di specificare esplicitamente dei testi tempori((ati per i media
elements% Con ha alcun significato al di fuori di questo contesto%
L'elemento possiede i seguenti attributi/
.ind/ enumera$ione che pu8 valere/
o su$titles/ sottotitoli# tradu$ione dalla lingua originale, descri$ione testuale in caso di
audio poco comprensibile# mostrati come sovraimpressione%
o captions/ simile a subtitles ma piA orientato alla descri$ione ed all'inserimento di
informa$ioni sulla risorsa in esecu$ione%
o descriptions/ descri$ione testuale del componente video quando questo non sia
disponibile o poco chiaro%
o chapters/ pensato per la naviga$ione interattiva nella risorsa%
o metadata/ non visibile all'utente, pensato per essere fruito tramite script%
src/ indica la loca$ione dei dati testuali per la risorsa%
srclang/ obbligatorio quando =ind si trovi in stato subtitle, indica la lingua in cui veicolata
la risorsa%
la$el/ fornisce il titolo della risorsa in modo comprensibile all'utente%
default/ se specificato indica che la traccia quella attivata per default%
@sempio dell'utili$$o combinato con il tag video, riadattato da quello proposto nel draft/
<video src="discorso_di_gandhi.vid">
<track kind=subtitles src=discorso_di_gandhi.en.vtt srclang=en
label="English">
<track kind=subtitles src=discorso_di_gandhi.it.vtt srclang=it lang=it
label="Italiano">
<track kind=subtitles src=discorso_di_gandhi.fr.vtt srclang=fr lang=fr
label="Francais">
</video>
.l video in questione possiede quindi sottotitoli (osservate lo stato di =ind" in tre lingue diverse%
srclang in questo caso obbligatorio%
Nuovi elementi in HTML5 : em$ed" mar. e
progress
.l -or=ing draft elenca una serie di nuovi elementi non classificandoli esplicitamente, compongono
la lista/
embed
mar=
meter
progress
time
rubI, rt e rp
bdi
-br
canvas
command
details
datalist
=eIgen
output
Li anali$$eremo in ordine, uno ad uno, partendo da embed%
embed
=efinizione formale
L'elemento emed rappresenta un punto di integra(ione per una applica(ione esterna (tipicamente
non-HTML) o per un contenuto interatti!o%
embed prevede la presen$a dei seguenti attributi/
src/ l'indiri$$o della risorsa da includere
t,pe/ il M8M' t7pe in base al quale verr0 sele$ionato il plugin da istan$iare%
>idth
height
src e tIpe sono sostan$ialmente obbligatori affinch embed abbia un significato%
.l draft sottolinea due importanti osservazioni/ la prima che embed non influen$ato dal
comando )?? *displaI/ none*, il plugin sele$ionato tramite tIpe viene comunque istan$iato# la
seconda si riferisce al fatto che embed non prevede un fallack content, ossia del contenuto da
mostrare nel caso in cui il bro-ser non trovi il plugin adatto per l'applica$ione, se infatti questo
avvenisse lo user,agent dovrebbe caricare un plugin di default, detto plugin potrebbe anche solo
mostrare una stringa che avverte dell'impossibilit0 di caricare l'applica$ioneBcontenuto interattivo%
<embed type="video/quicktime" src="vacanze.mov" width="200" height="200">
em$ed 5 in realtB presente sul >e$ da lungo tempo ma il W() lo inserisce tra i nuovi tags# la
ragione di questa apparente discrasia risiede semplicemente nel fatto che l'elemento non era
ufficialmente parte di HTML< sebbene molti user,agents lo supportassero, con sfumature
leggermente diverse soprattutto per quanto riguarda gli attributi% HTML< supportava ufficialmente
soltanto o$Iect, peraltro ancora presente in HTML ed i cui casi d'uso in molte occasioni possono
essere sovrapponibili a quelli applicabili ad embed%
mar)
=efinizione formale
L'elemento mark rappresenta una por(ione di testo in un documento e!iden(iata (marcata) a scopo
di riferimento per la sua rile!an(a in un altro contesto% &uando utili((ato per una cita(ione o in un
altro locco di testo indica una parola o frase importante che non era originariamente presente.
ma che stata aggiunta per portare l'atten(ione del lettore su di una por(ione di testo che l'autore
potree non a!ere considerato importante nel momento della stesura originale. ma che in quel
contesto acquista una rile!an(a precedentemente non pre!ista% &uando utili((ato nella prosa
principale di un documento indica una parte del documento stesso che stata e!iden(iata a causa
della rile!an(a che assume per l'atti!it@ corrente dell'utente%
Il tag in $uona sostanza ottiene a video lAeffetto grafico di un evidenziatore e va utili$$ato
ogniqualvolta si debba marcare una parte di testo allo scopo di attirarvi fortemente l'atten$ione di
chi legge% .l draft propone diversi esempi di impiego, mi limito a mostrarvene un paio, con le
dovute modifiche# il primo riferito al caso in cui si vogliano isolare le parole corrispondenti ad
una ricerca testuale effettuata dall'utente/
<p>Ho letto diversi libri di <mark>Hemingway</mark>. Lo trovo un narratore
straordinario.
Adoro l'<mark>Hemingway</mark> perso tra le assolate strade spagnole cos come
lo scrittore innamorato del mare.
In una parola Ernest <mark>Hemingway</mark>!</p>
il risultato in Kpera/
Importanza vs Jilevanza
Euando si voglia denotare importanza 5 $ene utilizzare lAelemento strong" mar. 5 applica$ile
#uando si de$$a sottolineare la rilevanza di un estratto di testo% 2 tale proposito il draft
propone un esempio, che vedremo leggermente riadattato% Lo scenario quello di un libro di testo
pensato come materiale base per sostenere un esame% Le se$ioni di testo che possiedono rilevan$a
per l'esame sono contenute in elementi mar=, le se$ioni importanti invece sono -rappate dal tag
strong/
<p>PHP5 un linguaggio di scripting server side.<mark>PHP debolmente
tipizzato e supporta la programmazione ad oggetti (OOP).</mark>.</p>
<p>Nasce nel 1995 ad opera di <strong>Rasmus Lerdorf.</strong></p>
<p><mark>Uno script PHP deve essere sempre aperto dal <em>delimiter</em> <?
php</strong> e chiuso da ?></mark></p>
<p>[..]</p>
<p>Vediamo un frammento di codice di esempio nel quale abbiamo inserito un
errore:</p>
<pre>
<code><?php function compare($var) { return <mark>$var = 1</mark> ? true :
false; }</code>
</pre>
Dotate come anche per eviden$iare l'errore nel codice sia stato utili$$ato mar=%
Ona considera$ione personale/ trovo l'effetto visivo predefinito dell'elemento (l'eviden$iatore"
stilisticamente poco piacevole% ?uggerisco di limitarne l'uso il piA possibile associandovi in casi
particolari anche un foglio di stile che ne modifichi la renderi$$a$ione standard, il draft non lo vieta%
progress
L'elemento progress rappresenta il progresso nel completamento di un task (opera(ione)% 8l
progresso pu; essere indeterminato. qualora un a!an(amento sia stato compiuto ma non risulti
chiaro quanto occorra per il completamento (ad esempio quando il task in attesa di una risposta
da un host remoto) oppure pu; essere un numero compreso tra 5 ed un !alore massimo. indicando
la fra(ione di la!oro rimanente perch il task giunga a conclusione%
L'elemento possiede due attributi/
value/ la misura del valore attuale nel completamento del tas=%
ma-/ il valore indicante il raggiungimento del completamento dell'attivit0% L'omissione del
valore indica un progresso indeterminato%
@ntrambi gli attributi devono essere, se presenti, valori$$ati con numeri validi a virgola mobile
(floating point es/ 5%5 ,Q ;%5"# valgono le seguenti regole/ ma- K value LL value KM 0 LL ma- K
0%
Ji sottopongo uno scenario di utili$$o che sfrutta IEuer, per agire sul value della progressbar/
<doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
// # Al DOM Ready
$(function() {
var progressBar = $("#progress_bar");// caching del selettore

// # Al click sul bottone
$("#progress_button").click(function() {

// # Aumento il valore di 1
progressBar.attr("value", progressBar.attr("value") + 1);

// # Aggiorno il valore testuale
$("#progress_value").val(progressBar.attr("value"));
});
});
</script>
</head>
<body>
<section>
<h2>Avanzamento attivit</h2>
<p>Progress: <progress id="progress_bar" value=0 max=10><span
id="progress_value">0</span>%</progress></p>
<button id="progress_button">+ 1!</button>
</section>
</body>
</html>
&er motivi didattici l'avan$amento della barra avviene qui al clic= del bottone da parte dell'utente% .n
casi reali lo stato potrebbe dipendere dal completamento di chiamate asincrone al server oppure
dallo step di avan$amento nel contesto di un -i$ard (procedure di installa$ione a steps, processi di
acquisto e pagamento"%
Nuovi elementi in HTML5 : meter e time
meter
=efinizione formale
L'elemento meter rappresenta una misura scalare all'interno di un inter!allo definito. oppure un
!alore fra(ionario: per esempio l'utili((o di un disco rigido. la rile!an(a del risultato di una quer7
oppure la fra(ione della popola(ione !otante che ha optato per un particolare candidato%
2 differen$a di progress, meter non pensato per indicare un avan$amento nel completamento di un
task, n per indicare valori come una alte$$a od un peso quando non vi sia un valore massimo cui
rapportarli%
L'elemento prevede H attributi/
value/ obbligatorio, indica il valore misurato
min/ estremo inferiore del range
ma-/ estremo superiore del range
lo>" high" optimum/ permettono di indicare dei surange che delimitino le se$ioni
corrispondenti a valori bassi, alti ed ottimi%
Tutti gli attributi, se presenti, debbono avere come valori validi numeri in virgola mobile%
Kvviamente valgono inoltre le seguenti disuguaglian$e/
min R value R ma+
min R lo- R ma+ (se lo- specificato"
min R high R ma+ (se high specificato"
min R optimum R ma+ (se optimum specificato"
lo- R high (se entrambi sono specificati"
Eualora ma- e min non siano specificati il range 5 supposto essere 0..1 e value deve
conseguentemente essere compreso tra questi valori%
On esempio di utili$$o valido/
Clienti paganti/visite totali <meter value=10 max=100>10 clienti su 100
terminano la procedura di pagamento</meter>
@d un esempio non corretto/
Sono alto <meter value="1.78">1.78m</meter> e peso <meter value="88"
title="misura espressa in Kilogrammi">88</meter>
3li errori qui sono due (ripetuti per entrambe le misure"% Il primo errore 5 il tentativo di
utilizzare meter per rappresentare valori che non prevedono un limite massimo (potremmo
fissare l'alte$$a massima di un essere umano a 4%S5m, ma sarebbe comunque un limite aleatorio"# il
secondo errore 5 conseguenza diretta dellA omissione degli attri$uti min e ma- che implica
lAadozione di un range predefinito tra 0 ed 1,ne consegue che valori maggiori (in questo caso
;%6S ed SS" risultino fuori scala%
L'attributo globale title in questo contesto permette di indicare l'unit0 di misura, altrimenti non
specificata%
time
=efinizione formale
L'elemento time rappresenta i propri contenuti corredati con un forma comprensiile agli
elaoratori del contenuto stesso definita nell'attriuto datetime% 8l tipo di contenuto limitato a
!ari tipi di date. orari. time-(ones offsets (fusi orari). durate%
Il valore datetime dellAelemento time 5 sta$ilito essere il valore dellAattri$uto datetime #ualora
fosse presente" come il testo contenuto dallAelemento stesso altrimenti%
Fatetime value definito tramite attributo/
<time datetime="2011-11-12"></time>
Fatetime value definito tramite *te+t)ontent*/
<time>2011-11-12</time>
On esempio di formato valido per esprimere una durata/
<time>4h 18m 3s</time>
On esempio comprensivo di ora e time$one/
<time datetime="2011-12-25T00:00:00Z"></time>
Nuovi elementi in HTML5 : ru$," rt" r$" $di e
>$r
rub*
=efinizione formale di ru$,
L'elemento ru7 permette di marcare con ruby annotations uno o pi frammenti di testo% Le ru7
annotations sono piccole parti di testo presentate in associa(ione al testo ase. utili((ate
soprattutto nella tipografia asiatica come guida per la pronuncia o per includere altre annota(ioni%
.l contenuto dell'elemento definito essere quello del tag non compreso nelle annota$ioni (rt"%
=efinizione formale di rt
L'elemento rt contraddistingue il contenuto testuale di una ru7 annotation%
Kgni elemento rt figlio di un elemento rubI si riferisce al testo che lo precede nell'elemento stesso,
esclusi i tags rp%
On esempio riportato nel draft/
<ruby><rt></rt><rt></rt></ruby>
&er ognuno degli ideogrammi giapponesi associata la traslittera$ione hiragana%
rp
=efinizione formale
L'elemento rp pu; essere utili((ato per inserire parentesi intorno al componente testuale di una
ru7 annotation. per essere mostrato dagli user agents che non supportano le ru7 annotations%
?i tratta in buona sostan$a di un meccanismo di fallbac= per bro-sers non HTML compliant,
rivediamo l'esempio precedente arricchito dai tags rp/
<ruby>
<rp>(</rp><rt></rt><rp>)</rp>
<rp>(</rp><rt></rt><rp>)</rp>
</ruby>
Gualora il bro-ser supportasse rubI il risultato sar0 il medesimo dell'esempio gi0 visto per rt,
altrimenti verr0 renderi$$ato in questo modo/
() ()
bdi
=efinizione formale
L'elemento di rappresenta una por(ione di testo da isolare rispetto al contesto che la circonda
agli scopi della scrittura idire(ionale +D8*8,%
@sistono due diverse dire$ioni di scrittura possibili right,to,left ('TL" e left,to,right (LT'", alcuni
linguaggi (2rabo ed @braico" devono essere letti da destra a sinistra a differen$a delle scritture
occidentali% Guando sia necessario isolare se$ioni di testo (tipicamente nomi" la cui dire$ione
poten$ialmente diversa rispetto al contesto generale opportuno utili$$are l'elemento bdi%
L'attributo globale dir assume un significato particolare per questo elemento ed assume il valore di
default auto%
<ul>
<li>Cognome <bdi>Brambilla</bdi>: 20 articoli.
<li>Cognome <bdi>.,</bdi>: 15 articoli.
</ul>
@liminando l'elemento l'algoritmo bidire$ionale andrebbe in confusione# la stringa *;* verrebbe
spostata a sinistra, accostandosi alla stringa *)ognome*, cosE come nell'immagine che segue%
+br
=efinizione formale
L'elemento wr rappresenta una opportunit@ di interru(ione di linea (a capo)%
&oniamo di dovere riportare in un testo un flusso di coscien$a/
<p>Permoltotempo<wbr>lamiamentehavagato<wbr>inquestoflusso<wbr>ininterrottodipen
sieri</p>
Il tag >$r indica al $ro>ser le opportunitB suggerite per andare a capo #ualora fosse
necessario%
Nuovi elementi in HTML5 : N menu O e
command
3li elementi menu e command fanno parte della famiglia degli interactive elements, che
comprende anche details e summar,% )ome suggerisce la classifica$ione sono pensati per
implementare intera$ioni con l'utente%
?ebbene il tag menu non sia propriamente di nuova introdu$ione lo inserisco nella lista dei nuovi
elementi perch ha subito un significativo cambiamento semantico atto a renderlo il fulcro delle
nuove interfacce interattive%
menu
=efinizione formale
L'elemento menu rappresenta una lista di comandi%
&ossiede gli attributi t,pe (non o$$ligatorio) e la$el# tIpe una enumera$ione indicante il tipo di
menu che si vuole implementare e prevede tre stati/
conte-t/ per indicare un conte+t menu (menu contestuale"% L'utente pu8 interagire con i
comandi solo se il conte+t menu attivato%
tool$ar/ per indicare una barra degli strumenti% L'utente pu8 immediatamente interagire con
i comandi%
list (default)/ per indicare che si vuole implementare una semplice lista di comandi non
rientrante nelle precedenti classifica$ioni# il menu potrebbe contenere una lista di elementi li
ciascuno rappresentante un comando oppure del contenuto che descriva le fun$ionalit0 a
disposi$ione%
L'attributo label fornisce il nome al menu od al sottomenu in modo che il bro-ser possa mostrarlo
all'utente#
Don obbligatorio utili$$are degli elementi command (che vedremo a breve" per le voci del menu,
vediamo un esempio replicante parte del menu (toolar" dell'editor 3clipse/
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="new()">New</button>
<button type="button" onclick="open()">Open File ...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="undo">Undo Text Change</button>
<button type="button" onclick="redo()">Redo Text Change</button>
</menu>
</li>
<li>
<menu label="Source">
<button type="button" onclick="toggleC()">Toggle Comment</button>
<button type="button" onclick="addBC()">Add Block Comment</button>
</menu>
</li>
</menu>
On elemento menu pu8 contenere comandi, separatori, options, select, elementi li ed altri menu
(sottomenu con o sen$a attributo label"%
Laddove un elemento nella pagina preveda l'associa$ione ad un menu contestuale deve fornire un
attributo conte-tmenu indicante l'id di un elemento menu facente parte del FKM%
<input name="copiaincolla" type="text" contextmenu="copiaincollacm" required>
<menu type="context" id="copiaincollacm">
<command label="Copia" onclick="copia()">
<command label="Incolla" onclick="incolla()">
</menu>
command
=efinizione formale
L'elemento command rappresenta un comando che l'utente ha la possiilit@ di in!ocare%
On elemento command pu8 utilmente fare parte di un menu contestuale o di una toolbar nel
contesto di elemento menu%
+li elementi command vengono renderizzati se e solo se parte di un elemento menu%
&ossiede 6 attributi/
t,pe/ una enumera$ione che pu8 valere command, chec=bo+ o radio% Kgni valore mappa
lo stato corrispondente
command/ l'elemento rappresenta un comando associato ad una a$ione%
chec.$o-/ l'elemento rappresenta una op$ione che pu8 essere sele$ionataBdesele$ionata%
radio/ l'elemento rappresenta la sele$ione di una voce appartenente ad una lista di items%
la$el/ fornisce un nome da mostrare all'utente per il comando# obbligatorio e non deve
essere valori$$ato alla stringa vuota%
icon/ fornisce una immagine da utili$$are come icona del comando (deve essere una O'L
valida"
disa$led/ booleano# se valori$$ato a false indica che il comando non disponibile nello
stato attuale%
chec.ed/ booleano# se presente indica che il comando attualmente sele$ionato% Fa
omettere quando il tIpe valga command%
radiogroup/ fornisce il nome al gruppo di comandi che verr0 sele$ionatoBdesele$ionato alla
sele$ioneBdesele$ione del comando stesso% (se e solo se tIpe C radio"%
title/ fornisce una indica$ione sulle fun$ionalit0 del comando, che potrebbero essere
mostrate come help all'utente%
On esempio mimimale che utili$$a LGuerI per intercettare l'evento clic= sui vari commands/
<!doctype html>
<html>
<head>
<title>L'elemento command</title>
<script>
// # Al DOM Ready
$(function() {
$("#c_open").click(function() {
alert("file aperto");
/* esercita una azione per l'apertura del file */
});
$("#c_close").click(function() { /* esercita una azione per la chiusura */ });
$("#c_save").click(function() { /* esercita una azione per il salvataggio
*/ });
});
</script>
</head>
<body>
<menu>
<command type="command" id="c_open" label="Apri"
icon="open.png">Apri</command>
<command type="command" id="c_close" label="Chiudi"
icon="close.png">Chiudi</command>
<command type="command" id="c_save" label="Salva"
icon="save.png">Salva</command>
</menu>
</body>
</html>
)i sono vie alternative per definire un comando# eccone alcune/
un elemento a con attributo href
un elemento button
un elemento input con tIpe compreso in/ submit, button, reset, image, radio, chec=bo+%
una option valori$$ata (non a stringa vuota" figlia di un select%
un elemento label o legend con attributo acccess=eI definito%
Nuovi elementi in HTML5 : details e summar,
details e summar*
=efinizione formale
L'elemento details rappresenta informa(ioni addi(ionali o controlli che l'utente pu; ottenere su
richiesta. l'elemento summary ne fornisce il sommario. la legenda o la descri(ione%
Lo scenario che ci aspettiamo quindi quello in cui un utente richieda delle informa$ioni
addi$ionali non visuali$$ate di default o comunque che possano essere nascoste# un esempio reale
potrebbe essere una widget (un bo+ implementabile con un accordion ad esempio" contenente
informa$ioni e+tra non strettamente necessarie ma che possano risultare interessanti per l'utente in
alcuni casi%
2 fianco dei dati anagrafici base di un pa$iente potrebbe essere utile permettere al curante di
visuali$$are informa$ioni addi$ionali come malattie pregresse o stili di vita# in aggiunta alle
fotografie delle camere di un hotel risulter0 utile dare la possibilit0 con un clic= di mostrarne la
descri$ione testuale e magari i pre$$i%
7ino ad ora per ottenere lAeffetto era necessario utilizzare Pavascript (vedi accordion di
IEuer, QI), l'elemento details minimi$$a l'effort implementando la fun$ionalit0 nativamente%
9ummar, fornisce il titolo del $o- di dettaglio%
&ensiamo ai commenti che spesso vengono posti al termine di un articolo di giornale o del post di
un blog/
<!doctype html>
<html>
<head>
<title>Il mio blog</title>
</head>
<body>
<article>
<h1>HTML5 details</h1>
<p>Un ottimo elemento direi.</p>
<details>
<summary>Una osservazione</summary>
<p>Sei stato davvero utile...</p>
</details>
</article>
</body>
</html>
@d ecco l'effetto (bo+ aperto in seguito a clic=" su )hrome/
details possiede un attri$uto $ooleano open# laddove presente open indica che summarI ed
informa$ioni e+tra debbono essere ini$ialmente visibili all'utente (bo+ aperto"% Gualora open fosse
assente sarebbe visibile ini$ialmente solamente il summarI%
Jediamo un esempio di details legato ad un form di inserimento in cui le informa$ioni sono in parte
ini$ialmente nascoste ed in parte gi0 rivelate all'utente/
<section>
<h1>Dati anagrafici</h1>
<label for="nome">Nome</label>
<p><input type="text" name="nome" id="nome"></p>
<details>
<summary><label for="nomeconiuge">Nome del coniuge (se
presente)</label></summary>
<p><input type="text" name="nomeconiuge" id="nomeconiuge"></p>
</details>
</section>
<section>
<h1>Dati societari</h1>
<details open>
<summary>Informazioni sulla compilazione</summary>
<p>Per compilare la sezione procurarsi i dati relativi al capitale
sociale ...</p>
</details>
</section>
@d ecco come la pagina viene visuali$$ata (su )hrome"/
Nuovi elementi in HTML5 : datalist" .e,gen ed
output
datalist
=efinizione formale
L'elemento datalist raggruppa un insieme di op(ioni che rappresentano quelle predefinite per altri
controlli% 8 contenuti (testuali) dell'elemento hanno lo scopo di agire come fallack per i !ecchi
rowsers: questo contenuti sono inframe((ati dalle op(ioni (relati!e)% L'elemento non ha un
significato !isuale. per cui do!ree essere reso in!isiile% Egni elemento datalist agganciato ad
un elemento input attra!erso l'attriuto list dell'input stesso%
Le !arie options incluse in datalist (quando non !uote) deono ognuna possedere una lael ed un
!alore%
On esempio/
<label>Regione di appartenza:
<input type="text" name="region" list="region">
<datalist id="region">
<option value="Lombardia">Lombardia</option>
<option value="Umbria">Umbria</option>
<option value="Campania">Campania</option>
<option value="Sicilia">Sicilia</option>
</datalist>
</label>
)e*gen
=efinizione formale
L'elemento ke7gen rappresenta un generatore di chia!i doppie% &uando il form cui appartiene
!iene in!iato al ser!er la chia!e pri!ata !iene sal!ata nel "repositor7" locale e la chia!e pulica
in!iata al ser!er%
&ossiede i seguenti attributi/
autofocus
challenge/ se specificato viene *impacchettato* e spedito insieme alla chiave
disa$led
form/ associa il =eIgen al form relativo
.e,t,pe/ enumera$ione relativa al tipo di chiave (rsa ad esempio, che rappresenta il default
qualora =eItIpe non fosse dichiarato"% .l draft non da indica$ioni su quali =eItIpes debbano
essere accettati dagli user,agents, paradossalmente uno specifico user,agent potrebbe non
supportarne affatto%
name
La specifica non fornisce indica$ioni precise di quello che il server potrebbe fare della chiave
inviata, l'unico esempio che propone lo scenario in cui al client viene ritornato un certificato a
scopo di autentica$ione%
<form id="unform" action="server.php" method="post">
<keygen name="chiavesicurezza" keytype="rsa" />
</form>
output
=efinizione formale
L'elemento output rappresenta il risultato di una elaora(ione%
&ossiede i seguenti attributi/
for/ permette di stabilire una rela$ione esplicita tra il risultato dell'elabora$ione e gli
elementi che hanno portato al calcolo o che in qualche modo l'hanno influen$ato% Feve
consistere in una lista di to=en (gli .F degli elementi coinvolti" separati da spa$i%
form/ associa in modo esplicito l'output al relativo form%
name
Ji porto all'atten$ione un semplice esempio presente nel draft/
<!doctype html>
<html>
<head>
<title>Un semplice calcolatore</title>
</head>
<body>
<form onsubmit="return false;" oninput="output.value = add_1.valueAsNumber +
add_2.valueAsNumber">
<input name="add_1" id="add_1" type="number" step="any"> +
<input name="add_2" id="add_2" type="number" step="any"> =
<output name="output" for="add_1 add_2"></output>
</form>
</body>
</html>
Dotate l'evento oninput del form e gli attributi tIpe settati alla stringa *number*, li anali$$eremo
nella prossima le$ione%
N..! output non deve necessariamente contenere il risultato di una operazione numerica"
potre$$e contenere i risultati di una #uer, o #ualsiasi altro contenuto generato da una
ela$orazione%
;rogettare i forms con HTML5 (parte 1)
HTML si propone di offrire una esperienza totalmente nuova nella fruizione dei forms# i me$$i
per assicurarla passano attraverso l'introdu$ione di una corposa lista di nuove tipologie di input e
l'ado$ione di attributi espressamente pensati per implementare i controlli base sulla compila$ione
sen$a ricorrere a Tavascript%
2ttivit0 molto comuni come l'assegna$ione del focus od il toggle del suggerimento inserito in un
campo per dare indica$ioni di compila$ione all'utente ora richiedono del semplice mar=up, sen$a
script%
.l ventaglio di tipologie prevede campi di inserimento appositamente progettati per numeri di
telefono, mail, date% ?i offre in questo modo all'utente una interfaccia piA chiara ed allo sviluppatore
meno lavoro sulla produ$ione di codice Tavascript, con conseguente ridu$ione del peso della pagina
in termini di U> con relativo miglioramento delle performance di caricamento%
On aspetto interessante risiede nel comportamento dei bro-ser obsoleti davanti ai nuovi tIpes/
mostrano semplicemente un campo te+t# sarebbe quindi teoricamente possibile utili$$arli sin d'ora
sen$a patemi, implementando personalmente i controlli custom lato client# il mio consiglio tuttavia
5 di attendere che lAadoption di #ueste nuove features da parte degli user:agents si ampli
ancora%
, nuovi valori dell-attributo t*pe di input.
tel
search
url
email
datetime
date
month
-ee=
time
datetime,local
number
range
color
.l significato di te-t ben noto, per quanto riguarda search le differen$e con te+t sono puramente
stilistiche, in piattaforme che prevedano una differen$a visiva tra normali campi di testo e campi di
ricerca gli input di tIpeCsearch potrebbero essere stilisticamente coerenti con i search inputs della
piattaforma stessa%
url rappresenta un indiri$$o .nternet nella forma http/BB[---%!dominio[%estensione! qualora l'utente
non dovesse inserire il protocollo (http" sar0 cura dello user,agent aggiungerlo
&er email il controllo sar0 formale (per quanto volutamente piuttosto lasco come indicato
esplicitamente nel documento", il tipo email possiede una ulteriore features molto utile/ laddove
fosse indicato l'attributo multiple lo user,agent si aspetterebbe una lista di emails separate da
virgola, ognuna di queste ovviamente formalmente valida%
N interessante notare come non vengano forniti per input di tipo tel particolari controlli sintattici# se
vero che in .talia i numeri telefonici sono numerici questo non vale nel resto del mondo, cosE che
il controllo formale deve essere a carico dello sviluppatore che pu8 associare una fun$ione di chec=
attraverso il metodo setFustomGalidit7()%
'icca anche la scelta tra i campi in qualche modo relativi alle date, e piA in generale ad un istante
temporale/ date rappresenta una data nella forma IIII,mm,dd (user,agent inglese", time
rappresenta un orario nella forma hh/mm# month rappresenta un anno,mese nella forma IIII,mm#
>ee. una data nella forma IIII,W-- dove -- vale un numerico (da 5;, 54 etc"# per datetime:
local vale il discorso di date, arricchito dalla locali$$a$ione%
Jange e color sono controlli particolari# range prevede la valori$$a$ione di un attributo min, un
attributo ma- e op$ionalmente di uno step e denota un intervallo numerico# color implementa un
utilissimo color:chooser%
, nuovi attributi legati a form/ input/ te0tarea e select
input e te+tarea prevedono ora un attributo autofocus per aiutare l'utente nell'inserimento dei dati%
1ino ad ora il risultato era ottenuto attraverso l'utili$$o di un linguaggio di scripting (Tavascript ad
esempio"% 2llo stesso modo gli elementi prevedono anche un attributo placeholder per suggerire
all'utente la struttura del dato che dovr0 inserire%
.l nuovo attributo form vale per gli elementi input, output, select, te+tarea, button, label, obLect e
fieldset% Kra i campi di un form possono essere ubicati ovunque nella pagina sen$a necessariamente
essere figli diretti del tag form a cui si riferiscono/
<p>Inserisci i tuoi dati</p>
<label>Nome</label>
<input type="email" form="contact_form" name="email"
placeholder="riccardobra@gmail.com">
<form id="contact_form"></form>
.l nuovo attributo re#uired si applica agli input (eccetto quando tIpeC*hidden* oppure
tIpeC*image* o per alcuni tipi di button come submit", alle select ed alle te+tarea# indica che
l'utente tenuto a valori$$are il campo affinch il form sia inviato% Del caso delle select la prima
option deve essere un placeholder con valore stringa vuota%
@cco un esempio/
<label>Occupazione:
<select name="occupazione" required>
<option value="">Seleziona
<option>Ingegnere
<option>Avvocato
<option>Programmatore
</select></label>
L'elemento te+tarea ha inoltre altri due nuovi attributi/ ma-length e >rap, il secondo indica il
comportamento per gli *a capo* del contenuto inviato%
L'elemento form acquisisce l'attributo novalidate che implica la disabilita$ione di ogni controllo di
valida$ione rendendo il form sempre inviabile%
.nput e button ora prevedono formaction" formenct,pe" formmethod" formnovalidate e
formtarget in aggiunta alla lista degli attributi disponibili# quando presenti vanno a sovrascrivere
action" enct,pe" method" novalidate" e target dell'elemento form%
;rogettare i forms con HTML5 (parte 1) :
3sempi
.poti$$iamo di voler creare un form di inserimento da proporre all'utente utili$$ando quanto piA
possibile le nuove possibilit0 offerte/
<!doctype html>
<html>
<head>
<title>Disegnare i forms con HTML5</title>
<style>
body {
margin: 0; padding: 0;
font-size: 12px;
font-family: "Verdana", sans-serif;
color: #444;
}
section {
width: 400px;
height: 230px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-top: 10px;
padding: 15px;
padding-top: 5px;
}
fieldset {
clear: left;
border: 0px;
border-bottom: 1px dotted #dcdcdc;
padding: 10px;
height: 30px;
}
label {
font-weight: bold;
width: 100px;
float: left;
}
input, textarea {
border: 1px solid #dcdcdc;
padding: 4px;
width: 250px;
color: #444;
float: left;
}
button {
margin-left: 100px;
border: 1px solid #ccc;
padding: 10px;
color: #444;
}
.firstSection {
border-top: 1px solid #ccc;
height: 200px;
}
.lastSection {
border-bottom: 1px solid #ccc;
height: 185px;
}
.longLine {
height: 70px;
}
.note {
font-size: 11px;
font-style: italic;
}
.noBottomBorder {
border: 0;
}
</style>
</head>
<body>
<form>
<section class="firstSection">
<h2>Dati anagrafici</h2>
<p class="note">L'asterisco (*) indica i campi obbligatori</p>
<fieldset>
<label>Nome *</label><input name="nome" id="nome" type="text" required
autofocus="autofocus">
</fieldset>
<fieldset>
<label>Numero Figli</label><input name="n_figli" id="n_figli"
type="number" min="0" max="10">
</fieldset>
</section>
<section>
<h2>Dati commerciali</h2>
<fieldset>
<label>Telefono *</label><input name="telefono" id="telefono" type="tel"
required>
</fieldset>
<fieldset>
<label>P. Iva</label><input name="piva" id="piva" type="text">
</fieldset>
<fieldset>
<label>Email *</label><input name="email" id="email" type="email"
placeholder="nome@dominio.it" required>
</fieldset>
<fieldset>
<label>Sito Personale</label><input name="sito" id="sito" type="url"
placeholder="www.sito.com">
</fieldset>
</section>
<section class="lastSection">
<h2>Informazioni extra</h2>
<fieldset class="longLine">
<label>Commenti</label><textarea name="commenti" id="commenti"
placeholder="www.sito.com" maxlength="100" wrap="soft"></textarea>
</fieldset>
<fieldset class="noBottomBorder">
<button name="commenti" id="commenti">Invia</button>
</fieldset>
</section>
</form>
</body>
</html>
@d ecco il risultato cosE come renderi$$ato da Kpera, corredato da commenti/
.l comportamento in caso di clic= sul submit ed email mancante/
.l medesimo caso gestito da 1irefo+/
@cco un form specifico per i campi relativi alle date/
<!doctype html>
<html>
<head>
<title>Disegnare i forms con HTML5 [ le date ]</title>
<style>
body {
margin: 0; padding: 0;
font-size: 12px;
font-family: "Verdana", sans-serif;
color: #444;
}
section {
width: 400px;
height: 420px;
margin: 0 auto;
border: 1px solid #ccc;
margin-top: 10px;
padding: 15px;
padding-top: 5px;
}
fieldset {
clear: left;
border: 0px;
border-bottom: 1px dotted #dcdcdc;
padding: 10px;
height: 30px;
}
label {
font-weight: bold;
width: 100px;
float: left;
}
input {
border: 1px solid #dcdcdc;
padding: 4px;
width: 250px;
color: #444;
float: left;
}
</style>
</head>
<body>
<section>
<h2>Input con types relativi alle date</h2>
<form>
<fieldset>
<label>Time</label><input name="t" id="t" type="time">
</fieldset>
<fieldset>
<label>Datetime</label><input name="dt" id="dt" type="datetime">
</fieldset>
<fieldset>
<label>Week</label><input name="w" id="w" type="week">
</fieldset>
<fieldset>
<label>Month</label><input name="m" id="m" type="month">
</fieldset>
<fieldset>
<label>Datetime-Local</label><input name="dtl" id="dtl" type="datetime-
local">
</fieldset>
</form>
</section>
</body>
</html>
Jediamo la sintassi corretta per i controlli range e color/
<fieldset>
<label>Range</label><input name="ra" id="ra" type="range" min="0" max="10"
step="2">
</fieldset>
<fieldset>
<label>Color</label><input name="color" type="color" id="color"
type="datetime">
</fieldset>
Kpera renderi$$a in questo modo i due controlli/
LAelemento canvas e le canvas *;I (parte 1) :
7ondamenti
HTML introduce l'elemento canvas (tela" area di disegno) e le relative *;Is per permettere di
generare o modificare elementi grafici (itmap" con relativa semplicit0%
Defini1ione formale
L'elemento can!as fornisce un'area di disegno che pu; essere sfruttata dagli scripts (tipicamente
codice Javascript) per disegnare on the fl7 grafici. grafica per !ideogame. immagini: pu; a!ere un
contesto (conte0t) primario che il primo contesto ad essere ottenuto per l'elemento: alla crea(ione
can!as non deve a!ere un contesto primario%
.l contesto attualmente disponibile lAHTML 'anvas 1= 'onte-t ( teoricamente previsto anche
un contesto (F", le cui 2&.s sono definite in un documento apposito consultabile a questo indiri$$o#
l'ultimo draft disponibile datato H 3ennaio 45;4%
D%>%/ N errato utili$$are canvas per renderi$$are l'intesta$ione di una pagina, qualora questa dovesse
essere particolarmente elaborata graficamente sarebbe opportuno utili$$are un elemento h;
debitamente stili$$ato attraverso i )??%
N consigliabile inserire all'interno dell'elemento del contenuto testuale che agisca come descri$ione
e fallbac= qualora non fosse possibile mostrare il bitmap%
)anvas prevede due attributi, utili$$ati per controllare la dimensione dell'area disponibile
(coordinate space"/
>idth/ larghe$$a dell'area di disegno, quando non esplicitata il default (55p+%
height/ alte$$a dell'area di disegno, quando non esplicitata il default ;5p+%
2lla crea$ione del canvas e ad ogni resi(e successivo (ottenuto tramite modifiche su -idth e height"
il bitmap ed ogni conte+t associato vengono (ri"puliti e (re"ini$iali$$ati con le nuove dimensioni
indicate%
La sintassi base dell'elemento la seguente/
<canvas id="c_area">Il browser non supporta il tag canvas</canvas>
.l tag cosE definito rappresenta unAarea invisi$ile di dimensione standard &00-150 pi-els# come
potete notare definito un contenuto testuale per il fallbac=%
La prima opera$ione da metter in atto per poter ini$iare a disegnare ottenere un conte+t (4F"/
// # Come da esempio precedente, nella pagina esiste un elemento
// # canvas con id="c_area"
var canvasObj = document.getElementById("c_area");
// # Ottengo il contesto (2D)
context = canvasObj.getContext("2d");
Tramite il conte+t possiamo ora ini$iare a disegnare# partiamo da un bitmap semplice, una forma
geometrica/
// # Colore riempimento, un grigio molto tenue
context.fillStyle = "#ededed";
// # Creazione del rettangolo
context.fillRect(100, 50, 100, 50);
.l codice genera un rettangolo di dimensioni -idthC;55, heightC5 e coordinate (;55, 5",
perfettamente centrato e di colore grigio chiaro%
@cco il codice completo dell'esempio base/
<!doctype html>
<html>
<head>
<title>La prima forma geometrica</title>
<style>
canvas {
}
</style>
<script>
// # Al DOM Ready
$(function() {
// # Ottengo l'oggetto relativo al canvas
context = canvasObj.getContext("2d"); // ottengo il contesto
//# Colore riempimento, un grigio molto tenue
context.fillStyle = "#ededed";
// # Creazione del rettangolo
context.fillRect(100, 50, 100, 50);
});
</script>
</head>
<body>
<canvas id="c_area">Impossibile mostrare il canvas</canvas>
</body>
</html>
ed il risultato cosE come mostrato da 1irefo+/
&rima di presentarvi un esempio piA elaborato vi fornisco una lista delle principali fun$ioni esposte
dalle 2&.s riguardanti le forme geometriche/
conte0t$beginPath234
)reaBresetta il path corrente%
conte0t$closePath234
)ontrassegna come chiuso il supath corrente e ne ini$ia un altro con coordinate di parten$a uguali
a quelle finali del path appena chiuso%
conte0t$fill234
)olora il supath con lo stile definito in fill9t,le%
conte0t$stro)e234
Tratteggia il subpath con lo stile definito in stro.e7ill%
conte0tarc20/ */ radius/ start"ngle/ end"ngle 5/ anticloc)+ise 63
Fisegna un arco partendo dalle coordinate (+, I", di raggio radius, angolo di parten$a star*ngle e
angolo di arrivo end*ngle# anticloc.>ise indica la dire$ione di disegno (false di default, quindi
cloc=-ise/ senso orario"%
conte0t$rect20/ */ +/ h3
Fisegna un rettangolo (subpath chiuso" a partire dalle coordinate (+, I", di larghe$$a -, alte$$a h
conte0t$lineTo20/ *34
2ggiunge il punto di coordinate +, I al subpath corrente, connesso al precedente da una linea retta%
7n primo esempio di utili11o di canvas
Kra possiamo approcciare l'esempio, generosamente commentato (utili$$a LGuerI solo per
intercettare l'evento FKM readI"/
<!doctype html>
<html>
<head>
<title>Un simpatico amico</title>
<script>
// # Al DOM Ready
$(function() {
context = canvasObj.getContext("2d"); // ottengo il contesto
// # "Costanti" per i colori riutilizzati
var REDHEX = "#990000";// porpora
var BLACKHEX = "#222"; // antracite
var BLUEHEX = "#0066cc"; // blu
// # Definizione inizio path
context.beginPath();

// # Il viso, un arco a (125, 75) raggio 70, angolo da 0 a 2Math.PI (sfera),
clockwise
context.fillStyle = "#ffcc99";
context.arc(125, 150, 70, 0, Math.PI*2, true);
context.fill();
context.stroke(); // disegno effettivamente la curva

// chiudo il path
context.closePath();
// # Sopracciglio sx (arco)
context.arc(100, 125, 20, 0, Math.PI, true);
context.stroke();
// # Sopracciglio dx (arco)
context.arc(150, 125, 20, 0, Math.PI, true);
context.stroke();
// # occhio sx (sfera)
context.strokeStyle = BLACKHEX;
context.fillStyle = BLUEHEX;
context.fill();
context.stroke();
// # occhio dx (sfera)
context.fillStyle = BLUEHEX;
context.fill();
context.stroke();
// # naso (sfera)
context.fillStyle = REDHEX;
context.fill();
context.stroke();
// # bocca (semisfera)
context.strokeStyle = REDHEX;
context.fillStyle = REDHEX;
context.arc(125, 180, 12, 0, Math.PI, false);
context.fill();
context.stroke();
// # cappello (rettangolo + linea della tesa)
context.fillStyle = BLACKHEX;
context.moveTo(55, 95);
context.lineTo(195, 95);
context.rect(80, 0, 90, 95);
context.fill();
context.stroke();
});
</script>
</head>
<body>
<article>

<canvas id="c_area" height="300px">Impossibile mostrare il canvas</canvas>
</article>
</body>
</html>
Importante! gli angoli devono essere definiti in radianti" ricordo la regola di conversione per
cui! radianti M 1R02;I gradiS per gli angoli piA comuni vale quindi/
(5V C Math%&.BH%
H5V C Math%&.B(
95V C Math%&.B4
;S5V C Math%&.
(H5V C 4WMath%&.
'ammentate le basi di geometria, ecco finalmente il nostro bitmap cosE come renderi$$ato in
1irefo+%
'reazione di testi
)ome abbiamo visto le 2&.s espongono fun$ionalit0 per disegnare forme geometriche, semplici o
complesse, ma non si limitano a questo# fanno parte delle specifiche una serie di settings e fun$ioni
dedicate alla crea$ione di testi/
conte0t$font
?e non facente parte di un assegnamento ritorna il font-setting corrente# pu8 essere impostato
seguendo la sintassi )?? della propriet0 font, l'ordine di defini$ione delle varie componenti il
seguente/ font:st,le font:variant font:>eight font:size2line:height font:famil,# esempio/
conte+t%font C italic normal ;<p+B45p+ Tahoma, sans,serif#
conte0t$te0t"lign
?e non facente parte di un assegnamento ritorna l'allineamento del testo corrente# pu8 essere
impostato ad uno dei seguenti valori/
start ( il default"
end
left
right
center
conte0t$te0t8aseline
?e non facente parte di un assegnamento ritorna il aseline alignment (allineamento del testo al
margine inferiore della riga" corrente# pu8 essere impostato ai valori/ top" hanging" middle"
alpha$etic" ideographic" $ottom%
conte0t$fillTe0t2te0t/ 0/ * 5/ ma09idth 63/ conte0t$stro)eTe0t2te0t/ 0/ * 5/
ma09idth 63
'ispettivamente, riempieBtratteggia sul canvas la stringa te+t partendo dalle coordinate (+, I"#
quando ma+Width valori$$ato ed uguale a true il font viene ridimensionato per rispettare la
larghe$$a massima indicata%
metrics : conte0t$measureTe0t2te0t3
'itorna un oggetto Te0tMetrics con le informa$ioni metriche del testo in oggetto nel font corrente%
metrics$+idth
'itorna (getter" la larghe$$a del testo passata al metodo measuredTe+t("%
@cco un esempio completo che disegna un piano cartesiano assegnando le label per le ascisse e per
le ordinate%
<!doctype html>
<html>
<head>
<title>La mia presentazione</title>
<script>
// # Al DOM Ready
$(function() {
context = canvasObj.getContext("2d"); // recupero il contesto
// # Scelta del font
context.font = "12px/2 Arial, sans-serif";
context.strokeStyle = "#555";
// # il metodo stroketext(text, x, y, [maxWidth]) scrive direttamente sul canvas
context.strokeText("tempo", 80, 140);// label ascisse
context.strokeText("valore", 10, 40);// label ordinate
// Piano Cartesiano
// # Ascisse
context.stroke();
// # Ordinate
context.stroke();
// # Colorazione del piano tramite gradiente
var linearGradient = context.createLinearGradient(60, 20, 120, 90);
linearGradient.addColorStop(0, '#ccc'); // grigio
linearGradient.addColorStop(1, '#efefef'); // grigio tenue
context.fillStyle = linearGradient;
context.rect(60, 20, 120, 90);
context.fill();
});
</script>
</head>
<body>
<article>
</article>
</body>
</html>
.l risultato cosE come mostrato in 1irefo+ 9/
LAelemento canvas e le canvas *;I (parte &) :
+radienti" om$reggiature" trasformazioni
;radienti
&er colorare il piano cartesiano della le$ione precedente ho utili$$ato un gradiente lineare, vediamo
nel dettaglio tutte le possibilit0 che vengono offerte per definire gradienti/
gradient M conte-t.createLinear+radient(-0" ,0" -1" ,1)
'estituisce un oggetto Fan!asBradient che rappresenta un gradiente lineare che colora la linea
definita dalle coordinate passate come parametri%
gradient M conte-t.createJadial+radient(-0" ,0" r0" -1" ,1" r1)
'estituisce un oggetto )anvas3radient che rappresenta un gradiente radiale che colora il cono
rappresentato dal cerchio definito dai parametri in input%
gradient.add'olor9top(offset" color)
2ggiunge un colore al gradiente (color, esadecimaleBstringaBrgb" all'offset indicato (da 5%5 ini$io
gradiente sino a ;%5 fine gradiente"%
Fefinito un gradiente sufficiente assegnarlo al fill9t,le del contesto e chiamare la fun$ione fill()
per applicarlo%
2ltra area di applica$ione delle canvas 2&.s sono le immagini% &ossiamo caricare immagini
preesistenti e modificarle% Le 2&.s offrono alcune interessanti fun$ionalit0, applichiamone qualcuna
in un esempio/
<!doctype html>
<html>
<head>
<title>Immagini e canvas</title>
<script>
// # Al DOM Ready
$(function() {
// # Istanzio l'oggetto immagine
var immagine = new Image();

// # l'immagine sul filesystem
immagine.src = "canvasimage.png";

// # al caricamento disegno l'immagine alle coordinate indicate, con
dimensioni 182x173
immagine.onload = function() {
context.drawImage(immagine, 50, 40, 182, 173);
}
// # Applico una ombreggiatura
context.shadowOffsetX = 6;
context.shadowOffsetY = 6;
context.shadowBlur = 5;
context.shadowColor = "#333";
// # ridimensiono l'immagine al 60% delle dimensioni originali
context.scale(0.6, 0.6);

});
</script>
</head>
<body>
<article>
</article>
</body>
</html>
@cco l'immagine originale/
ed il risultato delle elabora$ioni/
<mbreggiature
Dell'esempio abbiamo applicato una ombreggiatura, per definirla abbiamo a disposi$ione quattro
propriet0 /
conte-t.shado>'olor N M valoreO/ getterB[setter! per definire il colore dell'ombra%
conte-t.shado>/ffset0 N M valoreO/ getterB[setter! per definire l'offset sul piano delle
ascisse (ori$$ontale" dell'ombra%
conte-t.shado>/ffsetD N M valoreO/ getterB[setter! per definire l'offset sul piano delle
ordinate (verticale" dell'ombra%
conte-t.shado>lur N M valoreO/ getterB[setter! per definire il grado di sfocamento
dell'ombra%
Trasforma1ioni
Ho introdotto nell'esempio anche una semplice trasforma$ione, ottenuta attraverso il metodo scale
(ridimensiona", nel draft vengono descritti e resi disponibili nelle 2&.s i seguenti metodi/
conte-t.scale(-" ,)/ ridimensiona l'immagine secondo i parametri forniti# + il ratio
ori$$ontale, I quello verticale%
conte-t.rotate(angle)/ applica una rota$ione (l' angolo in radianti"%
conte-t.translate(-" ,)/ trasla l'immagine in accordo con i parametri forniti# + lo
spostamento ori$$ontale, I quello verticale%
conte-t.trasform(a" $" c" d" e" f) (notazione alternativa dei parametri! m11" m11" m11"
m11" d-" and d,)/ modifica la matrice di trasforma$ione esistente moltiplicandola per la
matrice formata dai parametri spediti in input%
La matrice una (+( cosE composta
a c e
b d f
5 5 ;%
conte-t.setTransform(a" $" c" d" e" f)/ resetta la matrice alla matrice di identit0, poi effettua
una chiamata al metodo transform con i parametri passati in input%
Tipi di linee e manipolazione per pi-el
Tipi di linee
La specifica mette a disposi$ioni diverse varianti per modificare lo stile delle linee che possibile
disegnare/
conte-t.line%idth N M value O/ getterB[setter! per definire la dimensione (spessore" della
linea%
conte-t.line'ap N M value O/ getterB[setter! per definire il line cap stIle (lo stile con cui
viene disegnata la termina$ione della linea", i valori definibili sono butt, round, and square%
conte-t.linePoin N M value O/ getterB[setter! per definire il line Loin stIle (lo stile con cui
vengono connesse due linee", pu8 essere bevel round o meter
conte-t.miterLimit N M value O/ getterB[setter! per definire il miterLimit, utili$$abile solo
quando il lineToinCmiter, evita per angola$ioni molto strette di avere cuspidi troppo
*spesse*, quando ci8 accade (il valore di miterLimit superato" l'angolo viene renderi$$ato
come bevel[led!%
Jediamo un esempio che disegna diversi tipi di linee sul canvas/
<!doctype html>
<html>
<head>
<title>Tipi di linee</title>
<script>
// # Al DOM Ready
$(function() {

// # Colore linea


// # linea con lineCap butt
// # tutte le linee avranno spessore 6
context.lineWidth = "6";
context.lineCap = "butt";

context.stroke();


// # linea con lineCap round
context.lineCap = "round";

context.stroke();


// # linea con lineCap square
context.lineCap = "square";

context.stroke();



// # Disegno due linee collegate con lineJoin = miter e
// miterLimitn = 3
context.lineJoin = "miter";
context.miterLimit = "3"


// # Prima di chiudere il path disegno la seconda linea

context.stroke();
});
</script>
</head>
<body>
<article>
</article>
</body>
</html>
.l risultato in Kpera/ da sinistra line)ap butt, poi round, square# a destra due linee contigue con
lineToin C miter%
Manipola1ione per pi0el
Le canvas 2&.s offrono fun$ionalit0 molto potenti che permettono di manipolare unAimmagine a
$asso livello, si possono creare immagini da $ero per poi riempirle pi+el per pi+el oppure
modificare immagini esistenti% @cco quali sono i metodi coinvolti/
imagedata M conte-t.createImage=ata(s>" sh)/ crea un oggetto .mageFata di dimensioni
s-, sI composto da pi+els neri (transparent blac="%
imagedata M conte-t.createImage=ata(imagedata)/ crea un oggetto .mageFata, con le
dimensioni dell'oggetto preso in input, composto da pi+el neri (transparent blac="
imagedata M conte-t.getImage=ata(s-" s," s>" sh)/ crea un oggetto .mageFata contenente
i dati dell'immagine per la por$ione rettangolare del canvas delimitata dai parametri inviati%
Gualora uno degli argomenti non fosse un numero finito o mancasse uno tra i parametri
-idth ed height (s-, sh" il metodo lancerebbe una ecce$ione%
imagedata.>idth" imagedata.height/ getters riferiti alle dimensioni dell'oggetto .mageFata
(in pi+els relativi al dispositivo"%
imagedata.data/ getter per l'arraI ()anvas &i+el 2rraI>uffer" contenente i dati J+*
('ed3reen>lue2lpha" sottoforma di numeri compresi tra 5 e 4%
conte-t.putImage=ata(imagedata" d-" d, N" dirt,0" dirt,D" dirt,%idth" dirt,Height O)/
disegna sul canvas una immagine le cui caratteristiche sono definite dall'oggetto .mageFata%
Gualora uno degli argomenti non rappresentasse un numero finito il metodo lancerebbe una
ecce$ione, inoltre se fosse fornito un *dirtI rectangle* ([, dirtI:, dirtIX, dirtIWidth,
dirtIHeight !" solo i pi+els appartenenti a tale rettangolo sarebbero disegnati%
Jediamo un esempio concreto di manipola$ione dei pi+el di una immagine esistente, lo script
mostrer0 a sinistra l'immagine originale, a destra il risultato delle elabora$ioni/
<!doctype html>
<html>
<head>
<title>Manipolazione dei pixels con le canvas APIs</title>
<script>
// # Funzione invocata all' onLoad
function afterLoad(event) {
// # Recupero l'oggetto canvas
canvasObj = document.getElementById("c_area");
// # Ottengo il contesto
context = canvasObj.getContext("2d");
// # Recupero l'immagine dall'evento
immagine = event.target;

// # Recupero width ed height del canvas
width = parseInt(canvasObj.getAttribute("width"));
height = parseInt(canvasObj.getAttribute("height"));
// # Disegno effettivamente l'immagine
context.drawImage(immagine, 0, 0);
// # Recupero i dati dell'immagine (array descrittivo dei pixels)
imageData = context.getImageData(0, 0, width, height);
// # halfXOffset rappresenta il punto delle ascisse dove inizia
// # il disegno della seconda immagine
var halfXOffset = Math.ceil(width/2);
// # Ciclo l'immagine pixel per pixel
for (y = 0; y < height; y++) {

// #pos pixel sorgente
srcPos = y * width * 4;

// # posizione traslata del pixel nella seconda immagine
outPos = srcPos + halfXOffset * 4

// # Ciclo interno
for (x = 0; x < halfXOffset; x++) {
// # Manipolazione dei pixels
imageData.data[outPos++] = imageData.data[srcPos++] / 2; // ROSSO
imageData.data[outPos++] = imageData.data[srcPos++] * 2; // VERDE
imageData.data[outPos++] = imageData.data[srcPos++]; // BLU
imageData.data[outPos++] = imageData.data[srcPos++]; // ALPHA
}
}
// # Disegno la nuova immagine a destra dell'originale
context.putImageData(imageData, 0, 0);
}
// # Al DOM Ready
$(function() {
// # Creo l'immagine
var immagine = new Image();
// # Definisco la funzione da invocare all'onLoad
immagine.onload = afterLoad;
// # Indicazione del file sorgente
immagine.src = "candeline.jpg";
});
</script>
</head>
<body>
<article>
<canvas id="c_area" height="400px" width="500px">Impossibile mostrare il
canvas</canvas>
</article>
</body>
</html>
.l risultato/
&er ottenere il bianco e nero basta modificare il ciclo for interno in questo modo/
var rosso = imageData.data[srcPos++];
var verde = imageData.data[srcPos++];
var blu = imageData.data[srcPos++];
var alpha = imageData.data[srcPos++];
// # Il valore dato dalla somma dei canali fratto 3
var valoreBN = (rosso + verde + blu) / 3;
// # Manipolazione dei pixels
imageData.data[outPos++] = valoreBN; // ROSSO
imageData.data[outPos++] = valoreBN; // VERDE
imageData.data[outPos++] = valoreBN; // BLU
imageData.data[outPos++] = alpha; // ALPHA
}
.l risultato/
&ossiamo anche modificare solamente il valore di alpha/
// # I colori non cambiano
imageData.data[outPos++] = imageData.data[srcPos++];

// # impostiamo alpha mezzi
imageData.data[outPos++] = imageData.data[srcPos++] / 2;
}
ottenendo/
&er chiudere uno screenshot in cui possiamo notare gra$ie a 7ireug la composi$ione dell'oggetto
imagedata%data/ un QintR'lamped*rra,%
Nuovi attri$uti" attri$uti ed elementi
modificati in HTML5
=uovi attributi
HTML introduce alcuni nuovi attributi a vari elementi che erano gi0 parte di HTML</
3li elementi a ed area ora possiedono l'attributo media per coeren$a con l'elemento lin=%
L'elemento area per coeren$a con a e lin= ora possiede hreflang" t,pe e rel%
L'elemento $ase ora prevede la presen$a di un attributo target, per coren$a con a%
L'elemento meta ora possiede un attributo charset (feature gi0 ampiamente supportata"%
L'elemento fieldset ora prevede l'attributo disa$led, la cui fun$ione di disabilitare tutti i
controlli figli, e l'ado$ione dell' attributo name utile per gli accedere tramite script
all'elemento%
L'elemento menu possiede ora due nuovi attributi, t,pe e la$el# la loro fun$ione risiede
nella possibilit0 di trasformare l'elemento in un tipico menu da interfaccia avan$ata, (anche
come conte+t menu tramite l'utili$$o dell'attributo conte+tmenu"%
L'elemento st,le ha ora un nuovo attributo scoped che pu8 essere utili$$ato per attivare fogli
di stile relativi ad uno specifico ambito% Le regole ivi definite si applicano solamente
all'alberatura locale%
L'elemento script acquisisce l'attributo as,nc che influen$a il caricamento e l'esecu$ione
dello script%
L'elemento html possiede ora un attributo manifest che punta ad un application cache
manifest utili$$ato in accoppiata con le 2&. per le Kffline Web 2pplications%
L'elemento lin. ha un nuovo attributo/ size# pu8 essere utili$$ato nell'ambito delle favicon,
ad esempio (attraverso l'attributo rel" per indicarne la dimensione% &ossono in questo modo
essere definite icone di diverse dimensioni%
L'elemento ol acquisisce l'attributo reversed% Guando presente indica che l'ordine della lista
decrescente%
L'elemento iframe accoglie tre nuovi attributi/ sand$o-" seamless" srcdoc che permettono
di nascondere contenuto (ad es%/ commenti in un blog"%
Elementi ed attributi in HTML il cui significato stato modificato
La specifica include delle ridefini$ioni per alcuni elementi allo scopo di riflettere meglio il loro
utili$$o acquisito nel tempo o per renderli maggiormente utili/
L'elemento a senza un attri$uto href ora rappresenta un segnaposto per un lin= che
potrebbe essere definito successivamente (o avrebbe potuto esserlo"% &u8 anche contenere
flo- content (altri elementi" e non piA solamente phrasing content (testo"%
L'elemento address ora definito nell'ambito del nuovo concetto di sectioning%
L'elemento $ ora rappresenta un por$ione di testo dove richiamare l'atten$ione per motivi di
utilit0 sen$a aggiungere altra importan$a e sen$a implicare un cambiamento *emo$ionale*%
On paio di esempi/ le parole chiave in una bo$$a, il nome dei prodotti in una rassegna%
L'elemento cite ora rappresenta solamente il titolo di un opera, di un artifact (un libro, un
giornale, un poema, una can$one, un film, un gioco etc%"% L'utili$$o in HTML< per marcare
il nome di una persona non piA considerato conforme%
L'elemento dl ora rappresenta una lista di associa$ioni nome,valore (una mappa" e non piA
considerata appropriato per il dialogo%
L'elemento head non consente piA l'inclusione tra i propri figli di un elemento obLect%
L'elemento hr ora rappresenta un'interru$ione tematica a livello di paragrafo%
L'elemento i ora rappresenta una por$ione di testo da leggere con altra intona$ione, oppure
uno spostamento dalla prosa normale indicante una differente qualit0 del testo come accade
per termini tecnici, frasi appartementi ad altre lingue, pensieri%
.l bro-ser non deve piA spostare il focus dall'elemento label al controllo (input" correlato se
questo comportamento non fa gi0 parte dello standard dell'interfaccia utente della
piattaforma sottostante%
L'elemento menu ridefinito per essere utile per toolbars e menu contestuali (vedi se$ione
apposita nella guida"%
L'elemento s ora rappresenta contenuti che non sono (per obsolescen$a" piA accurati o
rilevanti%
L'elemento small ora rappresenta delle piccole note a margine%
L'elemento strong ora sottointende importan$a piuttosto che forte enfasi%
L'elemento u ora rappresenta una por$ione di testo con una annota$ione non testuale
inarticolata, bench7 esplicitata, come nell'indica$ione di un testo come nome proprio in
)inese o nell'indica$ione di un testo ortograficamente errato%
"ttributi modificati
L'attributo value per lAelemento li non piA deprecato perch non considerato visual,
mar=up (presenta$ionale"# lo stesso vale per l'attributo start del tag ol%
L'attributo target per gli elementi a ed area non piA deprecato perch considerato utile
per le applica$ioni Web, specialmente se in accoppiata con iframe%
LAattri$uto t,pe riferito a script e st,le non 5 pi@ o$$ligatorio se rispettivamente il
linguaggio di scripting 5 3'M*9cript e lo st,ling language 5 '99%
L'attributo $order per lAelemento ta$le accetta solo il valore *;* e la stringa vuota%
"ttributi consentiti ma da evitare
L'attributo $order per le immagini/ deve avere valore *5* se presente# utili$$are i )??%
L'attributo language per il tag script% N obbligatorio valga la stringa *Tava?cript* (case,
insensitive" se presente e non deve essere in conflitto con l'attributo t,pe# si consiglia
semplicemente di ometterlo%
+li attri$uti >idth ed height di img e di altri elementi non possono pi@ contenere valori
percentuali%
3lementi ed attri$uti assenti (non inclusi) in
HTML5 ed altre differenze con HTML4
)ome indicato all'ini$io di questa guida non esistono in HTML veri e propri elementi deprecati#
esistono tuttavia tags obsoleti che gli autori non devono piA utili$$are e che invece gli user agents
sono ancora chiamati a supportare per retrocompatibilit0 , vediamo di quali elementi stiamo
parlando%
Elementi considerati come visual>mar)up e i cui effetti sono pi?
correttamente ottenibili con i @((.
$asefont
$ig
center
font
stri.e, utili$$are del se si tratta di eviden$iare una modifica, altrimenti s%
tt
Elementi considerati dannosi per l-accessibilitA e l-usabilitA .
frame
frameset
noframes
.n sostitu$ione degli elementi legati ai frames consigliato ricorrere all'elemento iframe in
combina$ione con i )??# in alternativa suggerito il caricamento di contenuti (pagine complete"
ser!er-side%
Elementi non inclusi perch poco utili11ati/ generanti confusione o le cui
fun1ionalitA sono implementate da altri elementi.
acron,m non incluso perch ha generato molta confusione% 2gli autori suggerito
ricorrere ad abbr per le abbrevia$ioni%
applet diventato obsoleto in favore di obLect%
isinde-/ le sue fun$ionalit0 possono essere ottenute attraverso l'utili$$o dei form controls%
dir diventato obsoleto in favore di ul%
Fiscorso a parte per il tag noscript# conforme nella sintassi HTML di HTML, non incluso nella
sintassi :ML perch il suo impiego richiede un parser HTML%
"ttributi assenti 2non inclusi3
2lcuni attributi presenti in HTML< non sono piA permessi (limitatamente in relazione ad alcuni
elementi, messi tra parentesi" nella nuova specifica, gli autori devono quindi evitare/
rev e charset (lin. ed a)# utili$$are rel al posto di rev per il tag lin=%
shape e coords (tag a)# si consiglia di utili$$are un HTT& )ontent,TIpe Header per la
risorsa lin=ata%
longdesc attri$ute (img ed iframe)# utili$$are un normale elemento a per lin=are la
descri$ione nel caso di iframe, una imagemap per le immagini%
target (lin.)# non necessario%
nohref (area)# sufficiente omettere href%
profile (head)# non necessario%
version (html)# non necessario%
name (img)# utili$$are l' attributo id%
scheme (meta)# utili$$are un solo scheme per campo%
archive" classid" code$ase" codet,pe" declare e stand$, (o$Iect)# evitare standbI facendo
in modo che la risorsa si carichi velocemente (sicY"%
valuet,pe e t,pe (param)# utili$$are name e value evitando la dichiara$ione del tipo%
a-is ed a$$r (td e th)# utili$$are al posto di abbr l'attributo title in modo da chiarificare il
contenuto%
scope (td)%
summar, (ta$le)# descrivere la tabella in un paragrafo introduttivo o in un tag caption
all'interno di table, magari avvalendosi dell'elemento details%
HTML inoltre esclude tutti gli attributi legati alla presenta$ione dell'informa$ione spingendo gli
autori ad utili$$are i )?? per ottenere gli stessi risultati/
align riferito a caption, iframe, img, input, obLect, legend, table, hr, div, h;, h4, h(, h<, h,
hH, p, col, colgroup, tbodI, td, tfoot, th, thead e tr%
alin." lin." te-t e vlin." $ac.ground riferiti al tag bodI%
$gcolo riferito a table, tr, td, th and bodI%
$order riferito ad obLect%
cellpadding e cellspacing riferiti a table%
char e charoff riferiti a col, colgroup, tbodI, td, tfoot, th, thead e tr%
clear riferito a br%
compact riferito a dl, menu, ol e ul%
frame riferito a table%
frame$order riferito a iframe%
height riferito a td e th%
hspace e vspace riferito ad img e obLect%
marginheight e margin>idth riferiti ad iframe%
noshade riferito ad hr%
no>rap riferito a td e th%
rules riferito a table%
scrolling riferito ad iframe%
size riferito ad hr%
t,pe riferito a li, ol e ul%
valign riferito a col, colgroup, tbodI, td, tfoot, th, thead e tr%
>idth riferito a hr, table, td, th, col, colgroup e pre%
Altre differenze tra HTML5 ed HTML4
MathML 2MathML Mathematical Mar)up Language3 ed (B; 2(calable Bector
;raphics3
La sintassi HTML di HTML permette di utili$$are gli elementi ?J3 e MathML all'interno di un
documento, il draft propone un semplice esempio/
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
Qna $reve digressione su 9C+" definizione (in)formale
Her Icalale Gector Braphics si intende la tecnologia deri!ata da -ML che permette di
renderi((are elementi grafici !ettoriali (forme geometriche. testi. immagini): definisce quindi le
immagini in termini di !ettori e non di pi0el. ci; preser!a la qualit@ ini(iale dell'elemento grafico
anche in seguito a ridimensionamenti%
.n ambito Web esistono molte librerie che permettono la crea$ione di grafica svg tramite Lavascript,
una delle piA appre$$ate (e a proposito della quale troverete in questo sito alcuni articoli"
raphael%Ls%
?J3 si contrappone per certi versi a canvas ed alle 2&. ad esso correlate che generano bitmap%
Guale dei due approcci utili$$are dipende dal tipo di tas= che si deve portare a termine%
2bbiamo ricordato ?J3, spendiamo qualche parola anche per MathML%
MathML un applica$ione di :ML creata per includere espressioni matematiche (con la loro
particolare nota$ione" all'interno delle pagine Web%
&oich l'approfondimento di queste particolari tecnologie (?J3 e MathML" esula dallo scopo della
guida vi rimando ai documenti di specifica del W() che le trattano rispettivamente qui e qui
L-attributo contenteditable
Fedichiamo uno spa$io particolare a contentedita$le# si tratta di una enumera$ione, pu8 valere/
true/ indica che l'elemento editabile
false/ indica che l'elemento non editabile
stringa vuota (e#uivale a true)
@siste uno stato inherit che indica all'elemento figlio di comportarsi come il contenitore piA
prossimo%
N possibile ricavareBimpostare il valore di contenteditable attraverso il getterBsetter/
element.contentEditable [ = value ]
possibile accedere all'informa$ione anche tramite/
element.isContentEditable
N permesso rendere l'intero documento editabile attraverso document.designMode N M value O che
assume i valori *on* od *off*%
@siste un getterBsetter anche per attivare il controllo sintattico dei contenuti inseriti nell'elemento, si
tratta di element.spellchec. N M value O%
Jediamo un esempio/
<!doctype html>
<html>
<head>
<title>ContentEditable</title>
<style>
body {
font-size: 12px;
}
#diveditabile {
width: 300px;
height: 50px;
color: #333;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div contenteditable="true" id="diveditabile">
<span spellcheck="false">Scrivi pure ci che pensi!</span>
</div>
</body>
La scrittura nell'area editabile in 1irefo+/
Barie 2Miscellaneous3
HTML ora prevede il supporto nativo per .'.s (.nternationali$ed 'esource .dentifiers",
completamente sfruttabile solo se l'encoding del documento OT1,S o OT1,;H%
L'attributo lang pu8 essere valori$$ato con la stringa vuota in aggiunta ad un valido identificatore di
linguaggio cosE come +ml/lamg in :ML%
Le +eolocation *;Is (versione 1) : parte 1
Le 2&.s di geolocali$$a$ione non sono tecnicamente parte delle specifiche HTML, sono descritte
in un documento separato (che trovate qui"che riporta come *incipit*/ "le $H8s definiscono
un'interfaccia di alto li!ello allo scopo di fornire. tramite script. accesso alle informa(ioni relati!e
alla posi(ione geografica associata ad un de!ice (dispositi!o)"%
;er dispositivo si intende un cellulare" un ta$let" laptop ospitante lAapplicazione richiedente le
informazioni%
2ttualmente esiste un draft datato ottobre 45;; che descrive le specifiche della versione 1,
esplicitamente retrocompatibili con la versione ;%
Ho deciso di inserire le 2&.s in questa guida perch fanno parte, a mio modo di vedere, di quello
sfor$o teso a dotare il Web di quegli strumenti di cui necessita per effettuare un ulteriore,
importante passo avanti, in termini di fun$ionalit0 ed interattivit0%
D%>%/ Del processo di stesura delle specifiche coinvolto solamente il W()%
,ntrodu1ione
Le *;Is sono agnostiche delle sottostanti sorgenti che forniscono la localizzazione/ queste
sorgenti tipicamente comprendono/ 3&?, dati ricavati dalla rete come l'.& del *chiamante*, '1.F,
Wi1i, celle telefoniche# esse non garantiscono in alcun modo che venga ritornata la posi$ione del
dispositivo% ?ono supportate sia richieste one:shot" sia richieste ripetute# implementata la
fun$ionalit0 di ricerca (querI" sulle posi$ioni <cached< (precedentemente ricavate"%
Le informa$ioni sulla locali$$a$ione sono rappresentate nella forma di coordinate geografiche/
longitudine e latitudine% .l documento indica che le informa$ioni cosE recuperate, poten$ialmente
lesive della privacI qualora fossero diffuse, vengano rese disponibili, in una implementa$ione
conforme, esclusivamente dietro esplicito permesso dell'utente, espresso tramite una interfaccia (o
ereditato da rapporti commerciali gi0 vigenti tra le parti"%
Le "P,s
D%>%/ Le 2&.s definiscono interfacce, le implementa$ioni sono a carico delle varie piattaforme%
.l meccanismo alla base del fun$ionamento delle 2&. ruota intorno all'interfaccia 3eolocation#
definisce tre metodi, che anali$$iamo nel dettaglio%
get@urrentPosition
9ignature
void getCurrentPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
=escrizione
.l metodo accetta da uno fino a tre parametri in entrata# quando viene invocato deve
immediatamente *ritornare* (ripassare il controllo al chiamante" e successivamente tentare in
modalit0 asincrona di ottenere la posi$ione attuale del dispositivo% Guando il tentativo di recupero
approda a buon fine deve essere invocata la fun$ione di callbac= legata a questo evento (la
handle@vent dell'oggetto success)allbac=" con un nuovo oggetto &osition contenente la
locali$$a$ione del dispositivo, altrimenti il controllo deve passare all'oggetto error)allbac= con un
oggetto &osition@rror che descriva le cause del fallimento della richiesta%
+atchPosition
9ignature
long watchPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
=escrizione
.l metodo -atch&osition accetta da uno a tre parametri% Guando chiamato deve immediatamente
ritornare un numero (di tipo long" che identifichi univocamente una opera$ione di
-atchBmonitoraggio (un -atch.F" e poi ini$iare asincronicamente l'opera$ione stessa%
.l flusso di fun$ionamento dell'opera$ione con la chiamata a success)allbac=Berror)allbac= procede
in modo identico a quanto avviene per get)urrent&osition% L'opera$ione di monitoraggio della
posi$ione del dispositivo deve poi continuare ed invocare l'appropiato callbac= ogniqualvolta la
posi$ione muti o comunque finch non intervenga una invoca$ione al metodo clearWatch
(utili$$ando come chiave il -atch.F"%
clear9atch
9ignature
void clearWatch(in long watchId);
=escrizione
.l metodo clearWatch accetta in input un argomento, l'identifier del monitoraggio attualmente in
corso (generato da -atch&osition"% Gualora il -atch.F non corrispondesse a nessuno di quelli attesi
relativi a processi in corso il metodo deve ripassare immediatamente il controllo al chiamante%
Laddove invece l'identificatore fosse riconosciuto il processo ad esso relativo dovrebbe essere
immadiatamente fermato sen$a richiamare alcun callbac=%
N importante notare che nel caso in cui l'utente non acconsentisse a rivelare la propria posi$ione i
metodi get)urrent&osition e -atch&osition chiamerebbero immediatamente la error)allbac=
passando come error code &@'M.??.KDZF@D.@F%
L-interfaccia Position<ptions
get)urrent&osition e -atch&osition prevedono come ter$o parametro op$ionale un oggetto
&ositionKptions/ vediamolo piA da vicino/
interface PositionOptions {
attribute boolean enableHighAccuracy;
attribute long timeout;
attribute long maximumAge;
attribute boolean requireCoords;
attribute boolean requestAddress;
};
2nali$$iamone gli attributes/
ena$leHigh*ccurac,
1ornisce l'indica$ione che l'applica$ione si attende il massimo risultato in termini di precisione# la
richiesta implica un possibile rallentamente nei tempi della risposta oppure un consumo piA elevato
di risorse (batterie ad esempio"%
L'utente potrebbe anche *disabilitare* questa possibilit0 o equivalentemente il dispositivo potrebbe
non essere in grado di ottenere dati piA accurati rispetto ad una richiesta con l'attributo non
specificato%
Lo scopo reale dell'attributo quindi pensato al contrario (enableHigh2ccuracI C false o attributo
assente", informare l'implementa$ione che non richiesta nessuna particolare precisione, in modo
che siano risparmiati tempi di attesa e batterie%
timeout
L'attributo definisce la massima laten$a accettata (in millisecondi" entro cui get)urrent&osition e
-atch&osition passino il controllo ai relativi success)allbac=% Del caso in cui questo tempo di attesa
superi quello indicato verr0 chiamata in causa la error)allbac= passando un parametro &osition@rror
il cui attributo error sar0 valori$$ato a T.M@KOT% .l tempo speso in attesa del permesso dell'utente
non rientra nel computo totale del timeout% .l valore di default per l'attributo .nfinitI%
ma-imum*ge
.ndica che l'applica$ione accetta posi$ioni cached non piA vecchie del valore definito (in
millisecondi"% Guando il valore 5 oppure non esistono posi$ione precedentemente ricavate verr0
immediatamente cercata una nuova posi$ione% Del caso invece valesse .nfinitI l'implementa$ione
restituirebbe una cached position sen$a valutarne il tempo di acquisi$ione%
2tten$ione/ per -atch&osition il valore temporale calcolato sulla prima posi$ione ricavata (prima
chiamata"%
re#uire'oords
)omunica allo user agent che qualora non fosse possibile recuperare le informa$ioni per gli attributi
&osition%coords%latitude, &osition%coords%longitude e &osition%coords%accuracI la chiamata dovrebbe
essere considerata fallita ed error)allbac= dovrebbe essere invocato% ?e settato a true (default"
l'applica$ione deve garantire che i suddetti attributi siano valori$$ati (non nulli"%
re#uest*ddress
L'attributo indica che l'applica$ione vorrebbe ricevere un indiri$$o% Lo scopo di evitare che questa
informa$ione, costosa dal punto di vista dei tempi di recupero venga inutilmente cercata quando
non richiesta (request2ddress C false o assente"% Laddove l'attributo valesse true e l'indiri$$o non
fosse trovato la richiesta non dovrebbe comunque essere considerata fallita%
Le +eolocation *;Is (versione 1) : parte 1
)ontinuiamo in questa le$ione la nostra analisi delle interfacce implicate nella geolocali$$a$ione%
L-interfaccia Position
L'interfaccia fun$iona come contenitore delle informa$ioni di geolocali$$a$ione ottenute tramite le
2&.s%
9ignature
interface Position {
readonly attribute Coordinates? coords;
readonly attribute Address? address;
readonly attribute DOMTimeStamp timestamp;
};
2nali$$iamo i vari attributi partendo da coords/ rappresenta un oggetto contenente le coordinate
geografiche ed alcune infoma$ioni aggiuntive, la anali$$eremo a breve# l'attributo op$ionale%
address contiene un insieme di properties che descrivono la posi$ione del dispositivo in termini di
indiri$$o, anali$$eremo a breve l'oggetto# l'attributo op$ionale%
timestamp viene valori$$ato con l'istante in cui la posi$ione stata acquisita ed rappresentato da
un oggeto FKMTimestamp (mappato in un oggetto Fate in Tavascript"%
.l draft suggerisce alle implementa$ioni che, sebbene siano entrambi op$ionali, qualora coords ed
address fossero entrambi assenti il processo di acquisi$ione delle informa$ioni dovrebbe essere
considerato fallito%
L-interfaccia @oordinates
9ignature
interface Coordinates {
readonly attribute double? latitude;
readonly attribute double? longitude;
readonly attribute double? altitude;
readonly attribute double? accuracy;
readonly attribute double? altitudeAccuracy;
readonly attribute double? heading;
readonly attribute double? speed;
readonly attribute double? verticalSpeed;
};
+li attri$uti
latitude e longitude sono espressi in gradi, se assenti debbono essere valori$$ate a null%
altitude rappresenta l'alte$$a sul livello del mare, specificata in metri# quando assente deve
valere null%
accurac, come gi0 accennato rappresenta la precisione della misura$ione (in metri,
numerico, livello di confiden$a 9["# laddove latitude e longitude fossero nulli accuracI
varrebbe null%
altitude*ccurac,/ come accuracI, riferito per8 ad altitude%
heading indica la dire$ione di viaggio specificata in gradi riferiti al nord (punto cardinale"
contando in senso orario# null qualora non fosse possibile recuperare l'informa$ione, DaD
laddove il dispositivo sia sta$ionario (speed C 5"%
speed indica la velocit0 ori$$ontale dello spostamento# specificata in metri al secondo, vale
null se non possibile ottenere l'informa$ione%
vertical speed/ come speed ma riferito allo spostamento verticale%
Tutti gli attributi sono op$ionali ma nel caso in cui valgano tutti null lo stesso oggetto )oordinates
dovrebbe valere null%
L-interfaccia address
9ignature
interface Address {
readonly attribute DOMString? country;
readonly attribute DOMString? region;
readonly attribute DOMString? county;
readonly attribute DOMString? city;
readonly attribute DOMString? street;
readonly attribute DOMString? streetNumber;
readonly attribute DOMString? premises;
readonly attribute DOMString? postalCode;
};
+li attri$uti
countr, indica la na$ione, specificata tramite il codice .?K a due lettere (.talia C .T"%
region pu8 indicare, in accordo alle divisioni amministrative dei singoli stati, uno stato
americano, una regione italiana, un dipartimento francese e cosE via%
count, rappresenta un $ona di una regione (la provincia italiana"%
cit, (*?enago, Milano*"%
street (*Jia 'oma*"
streetNum$er indica il numero civico%
premises pu8 indicare il nome di un edificio o di un blocco di edifici ad esempio (*&ala$$o
'eale*"% (premise C *edificio con terreno*"
postal'ode indica il codice di avviamento postale ()2& in .talia, $ip)ode negli O?2"%
@quivalentemente a quanto detto per )oordinates anche per 2ddress vale la regola per cui qualora
tutti gli attributi siano nulli anche l'oggetto sar0 null%
L-interfaccia PositionError
9ignature
interface PositionError {
const unsigned short PERMISSION_DENIED = 1;
const unsigned short POSITION_UNAVAILABLE = 2;
const unsigned short TIMEOUT = 3;
readonly attribute unsigned short code;
readonly attribute DOMString message;
};
&osition@rror rappresenta l'oggetto da ritornare all'errorHandler qualora la richiesta di
geolocali$$a$ione dovesse fallire%
;ossi$ili valori dellAattri$uto code
;3JMI99I/NT=3NI3= (valore numerico 1)/ il fallimento della richiesta dovuto alla
nega$ione del permesso da parte dell'utente%
;/9ITI/NTQN*C*IL*L3 (valore numerico 1)/ impossibile determinare la posi$ione
del dispositivo%
TIM3/QT (valore numerico &)/ la richiesta non stata soddisfatta entro la scaden$a del
timeout impostato%
L'attributo message sar0 valori$$ato con un testo che spiega i dettagli dell'errore (a scopo di debug e
non di comunica$ione all'utente"%
Le +eolocation *;Is (versione 1) : 3sempi
Kra che abbiamo padroneggiato la teoria il draft ci viene in aiuto portandoci all'atten$ione una serie
di esempi divisi per tipo di richiesta/
Richieste Cone>shotC
function success (pos) {
// # Mostra una mappa centrata a [ pos.coords.latitude, pos.coords.longitude ]
}
// # La richiesta
navigator.geolocation.getCurrentPosition(success);
La stessa richiesta implementata gestita tramite una closure%
// # La richiesta
navigator.geolocation.getCurrentPosition(function(pos) {
// # Mostra una mappa centrata a [ pos.coords.latitude, pos.coords.longitude ]
});
Richieste ripetute 2update posi1ione3 e gestione degli errori 2error handler3
// # Gestione della visualizzazione (success callback)
function success(pos) { }
// # Gestione degli errori (error callback)
function error (error) { }
// # Richiesta ripetuta
// # Creazione di un (watch) ID per le successive richieste
// # Notate come venga definito anche il nome della funzione che gestir il
// # successo e quello per l' error handler
var watchId = navigator.geolocation.watchPosition(success, error);
function clickReset() {
// # Reset delle informazioni al click su di un bottone
navigator.geolocation.clearWatch(watchId);
}
Richiesta posi1ione cached
// # Effettua la richiesta di una posizione cached (vecchia al massimo di 5
minuti)
// # Nel caso non ne esistessero di cos "fresche" verr effettuata la richiesta
per
// # ottenerne una nuova
navigator.geolocation.getCurrentPosition(success, error, { maximumAge:
300000 });
// # OK
function success (pos) { /* mostra la posizione */ }
// # KO
function error(error) { /* gestisci l'errore */ }
Richiesta for1ata di una posi1ione cached
// # Effettua la richiesta di una posizione cached (vecchia al massimo di 5
minuti)
// # Nel caso non ne esistessero non verr inoltrata una ulteriore richiesta ma
il controllo
// # passer direttamente all'error handler che potr gestire la situazione
navigator.geolocation.getCurrentPosition(success, error, { maximumAge: 300000,
timeout: 0 });
// # OK
function success (pos) { /* mostra la posizione */ }
// # KO
function error(error) {
// # E importante distinguere tra gli errori
switch(error.code) {

case error.TIMEOUT:
// # Possiamo decidere di mostrare una posizione di default od
effettuare la richiesta
// # per una nuova posizione
break;

default:
// # gestisci ogni altro tipo di errore
break;
};
}
Richiesta di una qualsiasi posi1ione cached
// # Effettua la richiesta di una posizione cached qualsiasi
// # Qualora non ne esistessero il controllo passer direttamente all'error
handler (error.TIMEOUT)
navigator.geolocation.getCurrentPosition(success, error, { maximumAge: Infinity,
timeout: 0 });
// # OK
function success (pos) {
// # Abbiamo la certezza si tratto di una posizione cached
}
// # KO
function error(error) { /* Gestione come nell'esempio precedente */ }
=ragL=rop : fondamenti ed interfacce
coinvolte
@sistono, nascosti dietro le luci sfavillanti di HTML alcuni tesori nascosti, trattati separatamente e
sen$a intorno il clamore suscitato da altre features%
?tiamo parlando del meccanismo di FragMFrop nativo e dei microdata# ini$iamo dal primo (il cui
draft trovate a questo indiri$$o"/ la ben nota ( sin da quando vennero sviluppate le 2&.s per .@"
opera$ione di FragMFrop descritta nel documento come un evento mousedo>n seguito da una
serie di eventi mousemove%
Leggendo le specifiche ho trovato alcuni punti piuttosto confusi ma cercher8 come sempre fatto in
questa guida di isolare le informa$ioni certe e chiare%
.l documento indica come rendere un elemento draggabile, per raggiungere lo scopo sono
necessarie due semplici opera$ioni/
aggiungere all'elemento un attri$uto dragga$le%
associare un event listener per lAevento dragstart che si occupi di salvare i dati relativi all'
opera$ione in un oggetto FataTransfer%
2ggiungerei che un elemento draggale dovrebbe possedere una propriet0 )?? *cursor/ move#*, in
modo che sia visivamente chiaro che l'elemento *trascinabile*%
L-attributo draggable
Tutti gli elementi HTML possono avere un attributo draggable, che una enumeration e consiste in
tre stati/
state C true/ l'elemento trascinabile%
state C false/ l'elemento non trascinabile
state C auto (default"# utili$$a il comportamento di default dello user,agent%
.l getterBsetter nella forma/ element.dragga$le N M value O dove value ovviamente ooleano
(true o false"%
L-attributo drop1one
)i8 che trascinabile spesso previsto abbia una $ona di *deposito*, la dropzone%
Tutti gli elementi HTML possono rappresentare una *drop$one*% Guando l'attributo specificato
deve consistere in una lista di to=ens separati da spa$i, i valori previsti sono/
cop,/ indica che il drop di un elemento risulter0 in una copia del draggable%
move/ indica che il drop di un elemento risulter0 in una move del draggable nella nuova
loca$ione%
lin./ indica che il drop di un elemento risulter0 in un collegamento ai dati originali%
una .e,>ord di lunghezza KM ad R caratteri che inizi con <string!<%
una .e,>ord di lunghezza KM a 6 caratteri che inizi con <file!<%
. valori di =eI-ord specificano il tipo di dato accettato, ad esempio *string/te+tBplain*,
*file/imageBpng*%
L'attributo non pu8 contenere piA di uno tra i valori copI, move e lin=% .l default copI%
@cco un esempio base riportato nel draft e riadattato che definisce un'area di deposito ed alcuni
elementi draggable/
<script>
function dragStartHandler(event) {
...
}
function dropHandler(event) {
...
}
</script>
<p>Lista prodotti</p>
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="TV">Televisione fullHD</li>
<li draggable="true" data-value="Tablet">Tablet Android</li>
<li draggable="true" data-value="Mobile">Mobile UMTS</li>
</ol>
<p>Trascina i prodotti nel carrello:</p>
<ol dropzone="move string:text/x-example" ondrop="dropHandler(event)"></ol>
,l drag data store
. dati che viaggiano nel contesto di una opera$ione di FragMFrop consistono in una colle$ione di
informa$ioni conosciute come *drag data store*/
la drag data store item list, in cui ogni item composto da/
un *drag data item =ind*/ ;lain Qnicode 9tring oppure 7ile%
un *drag data item tIpe*/ generalmente il MIM3 t,pe ma pu8 essere una stringa qualsiasi%
il dato vero e proprio (actual data"
La lista ordinata per ordine di inserimento cosE come in una coda 1.1K (7irst In 7irst /ut"%
1anno parte del drag data store anche/
l'informa$ione del feedbac= di default dello user,agent (drag data store default feedbac="%
una lista di uno o piA elementi definita come drag data store elements list%
op$ionalmente una immagine bitmap e le coordinate di un punto dell'immagine stessa
(rispettivamente drag data store $itmap e drag data store hot spot coordinate"%
un drag data store mode che pu8 valere
o 'eadB-rite (evento dragstart, nuovi dati possono essere aggiunti al drag data store"
o 'ead,onlI (evento drop, nessun nuovo dato pu8 essere aggiunto al drag data store"
o &rotected (ogni altro evento, i formati ed i tipi presenti nella drag data store item list
possono essere enumerati, ma gli actual data non sono disponibili, inoltre nessun
nuovo dato pu8 essere aggiunto"
un *drag data store allo-ed effects state*, stringa%
&rima di produrre del codice fun$ionante affrontiamo l'analisi delle 2&.s, facendo conoscen$a con
le interfacce coinvolte%
DataTransfer
9ignature
interface DataTransfer {
attribute DOMString dropEffect;
attribute DOMString effectAllowed;
readonly attribute DataTransferItemList items;
void setDragImage(Element image, long x, long y);
void addElement(Element element);
/* old interface */
readonly attribute DOMStringList types;
DOMString getData(DOMString format);
void setData(DOMString format, DOMString data);
void clearData(optional DOMString format);
readonly attribute FileList files;
};
3li oggetti =ataTransfer sono utili$$ati all'interno degli eventi legati al FragMFrop, e sono validi
fintanto che gli eventi sono in corso%
2nali$$iamo uno per uno attributi e metodi dell'oggetto/
dataTransfer.drop3ffect N M value O/ getterBsetter per il tipo di opera$ione sele$ionato
(none, copI, lin=, move"%
dataTransfer.effect*llo>ed N M value O/ getterBsetter per i tipi di opera$ione consentiti,
possibili valori/ *none*, *copI*, *copILin=*, *copIMove*, *lin=*, *lin=Move*, *move*,
*all*, *uninitiali$ed*%
dataTransfer.items/ getter per la lista di item (oggetto FataTransfer.temList"%
dataTransfer.set=ragImage(element" -" ,)/ utili$$a element per effettuare un update del
drag feedbac=, rimpia$$ando feedbac= specificati in preceden$a%
dataTransfer.add3lement(element)/ aggiunge element alla lista di elementi usati per il
drag feedbac=%
dataTransfer.t,pes/ ritorna una FKM?tringList, un elenco in buona sostan$a dei formati
impostati nell'evento dragstart# se un file dovesse essere stato trascinato, tra i tipi verr0
inclusa la stringa 1iles%
data M dataTransfer.get=ata(format)/ ritorna il dato specificato, se non esistesse
ritornebbe la stringa vuota%
dataTransfer.set=ata(format" data)/ aggiunge i dati specificati%
dataTransfer.clear=ata(N format O)/ rimuove i dati del formato specificato (o tutti qualora
format non fosse indicato"%
dataTransfer.files/ ritorna un oggetto 7ileList contenente i file trascinati, qualora vi
fossero%
DataTransfer,temList
9ignature
interface DataTransferItemList {
readonly attribute unsigned long length;
getter DataTransferItem (unsigned long index);
deleter void (unsigned long index);
void clear();
DataTransferItem? add(DOMString data, DOMString type);
DataTransferItem? add(File data);
};
Jediamo nel dettaglio i vari campi e metodi/
items.length/ getter che restituisce il numero di items nel drag data store%
itemsNinde-O/ getter per lo specifico item la cui posi$ione descritta da inde+%
delete itemsNinde-O/ rimuove l'item all'indice inde+ all'interno del drag data store%
items.clear()/ rimuove tutti gli items%
items.add(data" Nt,peO)/ aggiunge una nuova entrI, il parametro tIpe deve essere fornito in
caso in cui il dato sia plain te+t%
DataTransfer,tem
9ignature
interface DataTransferItem {
readonly attribute DOMString kind;
readonly attribute DOMString type;
void getAsString(FunctionStringCallback? callback);
File? getAsFile();
};
[Callback, NoInterfaceObject]
interface FunctionStringCallback {
void handleEvent(DOMString data);
};
2nali$$iamo attributi e metodi/
item..ind/ getter per il *drag data item =ind*, pu8 valere quindi *string/* o *file/*%
item.t,pe/ getter per il drag data item tIpe
item.get*s9tring(call$ac.)/ per item =ind C *&lain Onicode string*, invoca il callbac= con
la stringa come argomento%
file M item.get*s7ile()/ ritorna un oggetto 1ile (per item =ind C *file/*"%
DragEvent
9ignature
[Constructor(DOMString type, optional DragEventInit eventInitDict)]
interface DragEvent : MouseEvent {
readonly attribute DataTransfer? dataTransfer;
};
dictionary DragEventInit : MouseEventInit {
DataTransfer? dataTransfer;
};
&ossiede un solo membro dataTransfer, accessibile tramite event.dataTransfer%
=ragL=rop : +li eventi associati
Kgni evento che partecipa al processo di clic=, trascinamento e deposito pu8 essere intercettato e
gestito con un listener, gli eventi intercettabili sono/
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
.ni$iamo con un esempio semplice/ intercettiamo il dragstart, l'ini$io del trascinamento/
<!doctype html>
<html>
<head>
<title>Drag&Drop - il dragstart</title>
<style>
#divdrag {
width: 300px;
height: 100px;
background-color: #333;
color: #fff;
cursor: move;
padding: 10px;
}
p {
margin-top: 40px;
text-align: center;
}
</style>
<script>
function dragStart(e) {
// # event (e).target il nostro div "sorgente"
var target = e.target;
// # Inserisco nell'oggetto DataTransfer un testo
e.dataTransfer.setData("Text", "Te lo avevo detto");

// # consento il move
e.dataTransfer.effectAllowed = "move";

// # cambio il colore del div
target.style.backgroundColor = "#cc0000";

// # e ne modifico il testo prendendolo dall'oggetto DataTransfer
target.innerHTML = "<p>" + e.dataTransfer.getData("Text") + "</p>";
}
</script>
<body>
<div id="divdrag" ondragstart="dragStart(event)" draggable="true">
<p>Se mi trascini divento rosso!</p>
</div>
</body>
</html>
L'esempio utili$$a FataTransfer per incapsulare una stringa che poi utili$$a per cambiare il testo
dell'elemento trascinato%
.l div prima del trascinamento/
e durante/
2ffrontiamo ora un caso leggermente piA complesso, un drag finalizzato ad un drop%
Otili$$eremo l'evento ondrop sull'area di deposito (un div" e cancelleremo gli eventi dragenter e
dragover in modo da far capire allo user,agent che il div con id C *divdrop* la nostra area di
deposito%
Il meccanismo di <cancellazione< avviene aggiungendo agli handlers drag/ver e drag3ntered
un e!ent%pre!ent*efault() (return false per .@"%
<!doctype html>
<html>
<head>
<title>Drag & Drop, dragEnded, dragEnter, dragEnded, drop</title>
<style>
#divdrag {
width: 200px;
height: 100px;
background-color: #333;
color: #fff;
cursor: move;
padding: 10px;
}

#divdrop {
width: 300px;
height: 150px;
background-color: #ccc;
color: #333;
padding: 10px;
margin-top: 10px;
}

p {
margin-top: 40px;
text-align: center;
}
</style>
<script>
// # Definisco il type
var format = "Text";
// # Gestione del dragstart
function dragStart(e) {
// # event (e).target il nostro div "sorgente"

e.dataTransfer.setData(format, "Riccardo");

// # consento solo il move
e.dataTransfer.effectAllowed = "move";

target.style.backgroundColor = '#cc0000';
}
// # Gestione del dragenter (cancel)
function dragEnter(e)
if(event.preventDefault) {
event.preventDefault();
}

return false;
}
// # Gestione del dragover (cancel)
function dragOver(e) {
}

return false;
}
// # Gestione del dragend
function dragEnd(e) {
e.target.parentNode.removeChild(e.target);
}
//# Gestione del drop
function drop(e) {
// # event (e).target qui il nostro "drop" div
// # Recupero la stringa "Riccardo"
var data = e.dataTransfer.getData(format);
target.innerHTML = "<p>Benvenuto...</p>";

// # Creo un elemento p
var p = document.createElement("p");

// # Gli assegno "Riccardo" come testo
p.textContent = data;

// # Appendo p al div
target.appendChild(p);

}
</script>
<body>
<div id="divdrag" ondragstart="dragStart(event)" ondragend="dragEnd(event)"
draggable="true">
<p>Arrivo!</p>
</div>
<div id="divdrop" ondragenter="dragEnter(event)" ondragover="dragOver(event)"
ondrop="drop(event)">
<p>Ti aspetto!</p>
</div>

</body>
</html>
Dotate lAhandler per lAevento dragend# al termine del'opera$ione l'elemento trascinato viene
eliminato%
Delle immagini che seguono, l'intero processo di FragMFrop su )hrome/
Tempo 5/
Frag/
Frop/
Microdata : i fondamenti
L'altro underdog di HTML si chiama microdata# l'idea quella di estendere HTML aggiungendo
un vocabolario personali$$ato per le nostre pagine%
.l vocabolario in buona sostan$a un insieme (Item" di propriet0 nella forma di una mappa chiave:
valore%
Trovate il -or=ing draft dedicato qui%
itemscope ed itemprop
La crea$ione di un item passa dall'uso di un attributo itemscope% &er aggiungere una propriet0
all'item creato necessario ricorrere all'attributo itemprop su di uno dei discendenti dell'item%
2lcuni esempi minimali mutuati dal draft/
<div itemscope>
<p>Mi chiamo <span itemprop="name">Riccardo</span>.</p>
</div>
per le immagini e le O'L si utili$$ano gli attributi src e href rispettivamente/
<div itemscope>
<img itemprop="image" src="lisbona.png" alt="Lisbona">
</div>
per valori non human-readale come codici o O.F viene utili$$ato l'attributo value del tag data/
<h1 itemscope>
<data itemprop="user-id" value="132455677U">User ID</data>
</h1>
per le date opportuno utili$$are time ed il relativo attributo/
<div itemscope>
Sono nato il <time itemprop="natoil" datetime="1980-04-23">4 Aprile 1980</time>.
</div>
Le proprietB possono a loro volta essere itemscope per altre proprietB/
<div itemscope>
<p>Nome: <span itemprop="nome">Riccardo</span></p>
<p>Artista preferito: <span itemprop="artista" itemscope> <span
itemprop="nome">Jeff Buckley</span></span></p>
</div>
Gui artista propertI e comtemporaneamente item con una propert7 *nome*%
Le propriet0 possono anche non essere discendenti dell'item cui si riferiscono a patto di utili$$are
itemhref per indicare la rela$ione/
<div itemscope itemhref="p_nome b_artista"></div>
<p id="p_nome">Nome: <span itemprop="nome">Riccardo</span></p>
<p id="b_artista">Artista preferito:
<span itemprop="artista" itemscope>
<span itemprop="nome">Jeff Buckley</span>
</span>
</p>
L'esempio perfettamente equivalente al precedente%
N/ possibile per un item avere propertI con nome uguale e valori diversi%
&roperties con lo stesso valore possono essere raggruppate/
<div itemscope>
<span itemprop="frutto-preferito sport-preferito">Pesca</span>
</div>
itemt*pe
&er definire un contesto per le properties opportuno indicare un itemt,pe, in modo da fornirne
una chiave di lettura piA precisa%
3li itemtIpe devono essere O'L/
<div itemscope itemtype="http://esempi.it/navi">
<p>La <span itemprop="classe">Nimitz</span> una tipologia di navi militari
che comprende alcune portaerei nucleari.</p>
</div>
<div itemscope itemtype="http://esempi.it/professori">
<p>Il prof. Massimo Di Noia insegna in <span itemprop="classe">5a</span>
sezione C</p>
</div>
Dell'esempio l'itemt,pe definisce il valore semantico della propert, per i due itemscope, stesso
nome per la propriet0, significati molto diversi%
,denticatori globali
2lcuni item possono fornire informa$ioni ralative da un identificatore globale/ un itemid, che deve
essere un O'L% La specifica porta come esempio quello dell' isbn (.nternational ?tandard >oo=
Dumber" di un libro/
<dl itemscope itemtype="http://esempi.it/libri" itemid="urn:isbn:0-111-12345-1">
<dt>Titolo
<dd itemprop="titolo">Guida ad HTML5
<dt>Autore
<dd itemprop="autore">Riccardo Brambilla
<dt>Pubblicato il
<dd><time itemprop="data_pubblicazione" datetime="2012-08-30">30 Agosto
2012</time>
</dl>
3li autori sono incoraggiati ad utili$$are gli itemtIpe in modo da rendere le properties globali o in
alternativa a dare alle stesse properties nomi univocamente identificativi (utilizzando QJLs)%
Microdata : le *;I
.l significato di inserire informa$ioni aggiuntive negli elementi tipicamente quello di utili$$arle
per mostrarle all'utente% @siste quindi un modo per accedervi tramite script, le microdata =/M
*;Is%
&er ottenere la lista di items necessario ricorrere al metodo document.getItems(t,peNames) che
ritorna una CodeList contenente gli items del tipo indicato o tutti qualora non fosse fornito il
parametro tIpeDames% Kvviamente ogni item rappresentato da ogni elemento del FKM che
possegga un attributo itemscope%
Otili$$iamo come base un esempio della le$ione precedente/
<div itemscope itemtype="http://esempi.it/navi">
<p>La <span itemprop="classe">Nimitz</span> una tipologia di navi militari
che comprende alcune portaerei nucleari.</p>
</div>
'ecuperiamo i microdata/
// # Recupero la lista di Items con itemtype = http://esempi.it/navi
var listaItems = document.getItems("http://esempi.it/navi");
2ccedere alle propriet0 molto semplice, basta utili$$are l'attributo properties dell'item, che
ritorna una lista di oggetti HTMLHropertiesFollection/
// # Recupero la lista di Items con itemtype = http://esempi.it/navi
var listaItems = document.getItems("http://esempi.it/navi");
var shipClass = listaItems.properties["classe"][0].itemValue;
Ho preparato un esempio piA articolato, generosamente commentato e che fa uso di LGuerI/
<!doctype html>
<html>
<head>
<script>

// # Al DOM Ready
$(function() {

// # Recupero la lista di Items
// # c' un unico itemtype (http://esempi.it/tecnologie)
// # quindi non necessario specificarlo
var listaItems = document.getItems();

// # Ciclo gli items
for (var item = 0; item < listaItems.length; item++) {

// # Recupero le properties
var properties = listaItems[item].properties;

// # Scelgo solo tech
var techProps = properties[ "tech" ];

// # Ottengo la lista dei valori
var techValues = techProps.getValues();

// # Li appendo al div con id = "microdata_data", wrappati da tags p
for (var pos = 0; pos < techValues.length; pos++) {
$("#microdata_data").append("<p>" + techValues[pos] + "</p>")
}

}
});
</script>
</head>
<body>
<div itemscope itemtype="http://esempi.it/tecnologie">
<p>Mi chiamo <span itemprop="nome">Marco</span> <span
itemprop="cognome">Bianchi</span></p>
<p>Conosco <span itemprop="tech">Java</span></p>
<p>Ho utilizzato <span itemprop="tech">PHP5</span> e <span
itemprop="tech">jQuery</span></p>
</div>
<h2>Tecnologie conosciute</h2>
<div id="microdata_data"></div>
</body>
</html>
@cco il risultato mostrato in 1irefo+/
L'esempio ci permette di capire come accedere ai valori della properties# l'opera$ione avviene
tramite il metodo getCalues() chiamato sulla propertI%
N possibile accedere anche ai nomi delle properties attraverso l'attributo names/
var listaItems = document.getItems();
// # Ciclo gli items
for (var item = 0; item < listaItems.length; item++) {

// # Recupero le properties
var properties = listaItems[item].properties;

// # Recupero la lista dei nomi
var names = properties.names;

for(i = 0; i < names.length; i++) {
$("#microdata_data").append("<p>" + names[i] + "</p>")
}
}
.l codice appender0 le stringhe, nome, cognome e tech al div con idC*microdataZdata*%
)hiudiamo la nostra le$ione sui microdata anali$$ando piA da vicino la signature delle interfacce
coinvolte/
partial interface Document {
NodeList getItems(optional DOMString typeNames); // microdata
};
partial interface HTMLElement {
// microdata
attribute boolean itemScope;
[PutForwards=value] readonly attribute DOMSettableTokenList itemType;
attribute DOMString itemId;
[PutForwards=value] readonly attribute DOMSettableTokenList itemRef;
[PutForwards=value] readonly attribute DOMSettableTokenList itemProp;
readonly attribute HTMLPropertiesCollection properties;
attribute any itemValue;
};
2bbiamo gi0 visto gli attributi ed i metodi negli esempi, rimane da evadere una nota per itemCalue#
element%itemJalue [ C value ! il getterBsetter per il valore del singolo elemento
%e$storage
.ni$iamo con questa le$ione il viaggio tra le specifiche meno note che ruotano intorno ad HTML in
un orbita piA *periferica*%
2lcune delle features che vedremo sono ancora in una fase di defini$ione relativamente ini$iale e
l'adoption da parte dei vari user,agents ancora assolutamente par$iale% @viteremo per questo di
dettagliare a fondo i temi, preferendo dare una introdu$ione, per quanto corposa, dei vari argomenti%
9ebstorage
?alvare i dati in sessione opera$ione quotidiana per gli sviluppatori%
La specifica (il cui documento potete trovare #ui)tratta due meccanismi per salvare dati
strutturati client:side, sul modello dei session coo=ies%
Lo scopo di evitare le limita$ioni dei coo=ie stessi% &ensiamo ad uno scenario in cui un utente
porti avanti due transa$ioni, (ad esempio l'acquisto di un libro o di un biglietto aereo" nel medesimo
istante, su due finestre diverse, nel medesimo sito%
Gualora per tenere traccia degli acquisti il sito usasse i coo=ie potrebbe crearsi la situa$ione in cui
l'utente potrebbe trovarsi ad avere acquistato due libri (o due biglietti" sen$a averne l'inten$ione%
2l fine di superare questi problemi la specifica %e$storage introduce un attri$uto
session9torage% . siti lo utili$$eranno per salvare dati ed esso rimarr0 accessibile da ogni pagina
dello stesso sito aperta in quella finestra% Kgni finestra aperta (del sito" avr0 la sua copia dell'oggetto
session?torage%
&ensiamo alla situa$ione in cui ad un utente venga richiesto di dare un consenso tramite una
chec=bo+/
<label>
<input type="checkbox" onchange="sessionStorage.marketing = checked ? 'true' :
''">
Accetto che l'azienda mi spedisca mail informative sui nuovi prodotti
</label>
Ona pagina successiva potr0 accedere all'informa$ione tramite/
sessionStorage.marketing
.l secondo meccanismo di salvataggio pensato per finestre multiple e dura oltra la sessione
corrente% Le applicazioni potre$$ero decidere di salvare intere mail$o- o documenti lato
client" per #uestioni di performance% . coo=ie non sono adatti a questa situa$ione perch vengono
trasmessi ad ogni request% 2llo scopo esiste l'attributo local9torage%
.l conteggio delle visite di un utente/
<p>Hai visitato la pagina <span id="count"></span> volte.</p>
<script>
// # Controllo che esista pageLoadCount nel localStorage
if (!localStorage.pageLoadCount) {
localStorage.pageLoadCount = 0; // init
}
localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById("count").textContent = localStorage.pageLoadCount;
</script>
Kgni sito avr0 la sua area di salvataggio dedicata%
L-interfaccia (torage
9ignature
interface Storage {
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};
Kgni oggetto 9torage fornisce accesso ad una lista di coppie (items) chiave(stringa) : valore
(stringa)%
?torage possiede una length che indica il numero di coppie% .l metodo .e,(n) ritorna il nome della
chiave posta ad offset n nella lista% Gualora n sia QC di length =eI(n" torna null%
getItem(.e,) torna il valore associato alla chiave spedita come parametro# null in caso la chiave
non esistesse%
setItem(.e," value) controlla che la chiave esista, se cosE fosse verr0 effettuato un update del
valore, altrimenti verr0 creata una coppia e+,novo% ?e qualcosa non fun$ionasse nel setting (quota
dello storage superata, storage disabilitato" lancer0 una Guota@+ceeded@rror e+ception%
removeItem(.e,) rimuove la coppia%
setItem() e removeItem() cambiano lo stato dello storage solo in caso di successo, qualora
fallissero i dati salvatio non verrebbero alterati%
il metodo clear() svuota la lista di coppie%
(ession(torage
9ignature
[NoInterfaceObject]
interface WindowSessionStorage {
readonly attribute Storage sessionStorage;
};
Window implements WindowSessionStorage;
L'attributo session?torage rappresenta un insieme di aree di salvataggio, univoche rispetto al
contesto di naviga$ione%
Local(torage
9ignature
[NoInterfaceObject]
interface WindowLocalStorage {
readonly attribute Storage localStorage;
};
Window implements WindowLocalStorage;
local?torage fornisce un oggetto ?torage per un origine%
L-evento storage
L'evento storage viene lanciato ogniqualvolta l'area di salvataggio subisca una modifica (tramite
una setItem" una removeItem od una clear"% Guando ci8 accade lo user,agent lancia l'evento in
roadcast per avvisare ogni finestra il cui *ocument oJect possegga un oggetto ?torage che debba
essere avvisato del cambiamento avvenuto%
(torageEvent
9ignature
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
dictionary StorageEventInit : EventInit {
DOMString key;
DOMString? oldValue;
DOMString? newValue;
DOMString url;
Storage? storageArea;
};
.e, rappresenta la chiave da modificare# oldCalue rappresenta il valore precedente# ne>Calue il
nuovo valore assegnato# url indica l'indiri$$o del documento la cui chiave stata modificata#
storage*rea rappresenta l'oggetto ?torage modificato%
3li user,agent dovrebbero limitare lo spa$io allocato per ogni origine (calcolando i ter$i livelli", il
documento suggerisce questo limite venga fissato a 5 mega$,tes%
7ile *;I : 7ondamenti
.n questa le$ione ci occuperemo di un'altra importante specifica relativa ad HTML, descritta in un
documento separato che potete consultare a questo indiri$$o, si tratta 7ile *;Is che permettono di
gestire i files lato client%
File "P,s
&oich7 lavorare con i files un task quotidiano, anche sul -eb, HTML finalmente ci fornisce delle
2&.s standard per farlo% La specifica permette di leggere" scrivere" rimuovere file locali"
sincronamente e soprattutto asincronamente%
&ensiamo ad un form che preveda l'invio al server di un file locale tramite un elemento input file/
gra$ie alle 2&.s avremo finalmente la possibilit0 di controllare il M8M' t7pe lato client prima di
inviarlo al server, leggerlo e persino decidere che i contenuti non sono quelli che ci aspettavamo, il
tutto sen$a chiamare in causa il server%
'i concentreremo sulle operazioni asincrone, quindi parleremo dell'interfaccia 7ileJeader e non
di 7ileJeaders,nc perch lo stesso draft dice chiaramente/
8t is desirale to read data from file s7stems as7nchronousl7 in the main thread of user agents%
L'intero meccanismo gira intorno a quattro oggetti/
7ileList
interface FileList {
getter File? item(unsigned long index);
};
1ileList possiede un attributo length che contiene il numero dei files nella lista e un metodo
item(inde-) che ritorna l'oggetto 7ile sito alla posi$ione inde+%
lo$
interface Blob {

readonly attribute unsigned long long size;
readonly attribute DOMString type;

//slice Blob into byte-ranged chunks

Blob slice(optional long long start,
optional long long end,
optional DOMString contentType);
};
lo$ rappresenta dati grezzi immuta$ili% 1ornisce il metodo slice per se$ionare i dati in pe$$i di
lunghe$$a definita%
@spone un attributo size (dimensione del >lob" e t,pe (il M.M@ tIpe del >lob"%
7ile
interface File : Blob {
readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;
};
'appresenta un singolo 1ile nella lista, ottenuto dal filesIstem# possiede gli attributi name e la data
di ultima modifica lastModifiedFate% 1ile eredita da >lob%
7ileJeader
[Constructor]
interface FileReader: EventTarget {
// async read methods
void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob);
void abort();
// states
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
// File or Blob data
readonly attribute any result;
readonly attribute DOMError error;
// event handler attributes
attribute [TreatNonCallableAsNull] Function? onloadstart;
attribute [TreatNonCallableAsNull] Function? onprogress;
attribute [TreatNonCallableAsNull] Function? onload;
attribute [TreatNonCallableAsNull] Function? onabort;
attribute [TreatNonCallableAsNull] Function? onerror;
attribute [TreatNonCallableAsNull] Function? onloadend;
};
1ile'eader espone metodi per leggere oggetti 1ile o >lob in memoria e di accedere ai dati attraverso
eventi# permette letture asincrone su oggetti >lob singoli lanciando eventi progress (gestiti dagli
event handlers associati" mano a mano che la lettura procede%
3li event handlers previsti sono/
onloadstart
onprogress
onabort
onerror
onload
onloadend
L'oggetto prevede tre stati, lo stato corrente ottenibili tramite l'attributo readI?tate%
3M;TD (0)/ l'oggetto istan$iato a enon ci sono letture in corso# lo stato ini$iale%
L/*=IN+ (1)/ in corso la lattura di una 1ile o di un >lob tramite uno dei metodi di
lettura%
=/N3 (1)/ la lettura del 1ile o >lob terminata oppure si verificato un errore oppure la
lettura stata interrotta tramite la chiamata ad abort("%
1ile'eader espone quattro metodi per leggere 1ile e >lob in modo asincrono, ciascuno di essi
valorizzerB lAattri$uto result al termine delle opera$ioni/
read*s*rra,uffer/ result conterr0 i dati del 1ile o del >lob sottoforma di un oggetto
2rraI>uffer%
read*sinar,9tring($lo$) deprecato in favore di read2s2rraI>uffer(blob"# result conterr0
i dati sottoforma di una bInarI string%
read*sTe-t/ result conterr0 i dati del 1ile o del >lob sottoforma di stringa (testo"
decodificata di default in OT1,S o nel formato indicato%
read*s=ataQJL/ result conterr0 i dati del 1ile o del >lob sottoforma di O'L data%
Ona volta invocato uno di questi metodi gli handlers intercetteranno gli avan$amenti
7ile *;I : 3sempi
&artiamo dalla semplice lettura di un file con copia del contenuto nel bro-ser# ho utili$$ato LGuerI
solamente per rendere il codice piA conciso ed elegante e la closure su file'eader%onload per lo
stesso motivo/
<!doctype html>
<html>
<head>
<title>Leggere i Files tramite le File APIs</title>
<style>
fieldset {
width: 500px;
padding: 10px;
font-size: 11px;
}
</style>
<script>

// # Al DOM Ready
$(function() {

// # bind dell'evento change
$("#fileinput").change(function(event) {

// # in event.target.files trovo l'oggetto FileList
// # in questo caso il file uno solo quindi lo trovo
// # nella posizione 0
var file = event.target.files[0];

// # Controllo la dimensione del file
if(file.size > 200) {
alert("Non sono consentiti file di dimensione maggiore di
200B");
return false;
}

// # Istanzio il fileReader
var fileReader = new FileReader();

// # Leggo il file
fileReader.readAsText(file);

// # A caricamento terminato inserisco in pagina il contenuto
fileReader.onload = function (event) {
$("#contenuto_file").html(event.target.result);
};

});
});
</script>
</head>
<body>
<fieldset><legend>Scegli un file dal filesystem</legend>
<input type="file" id="fileinput" name="fileinput"><br />
<output id="contenuto_file"></output>
</fieldset>
</body>
</html>
.l risultato in Kpera quando proviamo ad inserire un file piA grande di 455>/
il processo andato a buon fine al termine del caricamento di un piccolo file di testo/
Ono degli aspetti piA interessanti riguarda la possibilit0 di monitorare il progresso del caricamento
di un file sen$a fatica/
<!doctype html>
<html>
<head>
<title>Monitorare un upload tramite le File APIs</title>
<style>
fieldset {
width: 500px;
padding: 10px;
font-size: 11px;
}
</style>
<script>

// # Al DOM Ready
$(function() {

// # caching del selettore per l'elemento progress
var progressBar = $("#progress_bar");

// # bind dell'evento change
$("#fileinput").change(function(event) {

// # in event.target.files trovo l'oggetto FileList
// # in questo caso il file uno solo quindi lo trovo
// # nella posizione 0
var file = event.target.files[0];


// # imposto un handler per l'onprogress
fileReader.onprogress = function(event) {

// # Se possibile effettuare il calcolo
if (event.lengthComputable) {

// # calcolo il loaded, sar un numero compreso tra 0 ed 1
var loaded = event.loaded / event.total;
if (loaded < 1) {

// # imposto il valore dell'elemento progress
progressBar.attr("value", loaded );
}
}
};

// # imposto un handler per l'onerror
fileReader.onerror = function(event) {
alert("Si verificato un errore nel caricamento");
return false;
};

// # Leggo il file
fileReader.readAsArrayBuffer(file);
// # A caricamento terminato termino
// # il riempimento della progressbar
progressBar.attr("value", 1 );
alert("Caricamento completato");
};

});
});
</script>
</head>
<body>
<fieldset><legend>Scegli un file dal filesystem</legend>
<input type="file" id="fileinput" name="fileinput"><br />
<progress id="progress_bar"></progress>
</fieldset>
</body>
</html>
La situa$ione durante il caricamento di un file di grosse dimensioni in Kpera/
.l risultato visivo al termine del caricamento/
Dotate nell'esempio la defini$ione degli handlers per lAevento progress e per lAevento error% Ho
utili$$ato il nuovo elemento progress per renderizzare la $arra, elemento che in questo caso
risulta indicatissimo%
&ossiamo unire le poten$ialit0 delle 1ile 2&.s con le FragMFrop 2&.s/
<!doctype html>
<html>
<head>
<title>File APIs e Drag&Drop</title>
<style>
#dropdiv {
width: 200px;
height: 100px;
padding: 10px;
border: 2px dashed #999;
text-align: center;
line-height: 100px;
}
</style>
<script>
function drop(event) {

}

// # Recupero il file dall'oggetto DataTransfer
var file = event.dataTransfer.files[0];


// # Leggo il file
fileReader.readAsText(file);

// # A caricamento terminato inserisco in pagina il contenuto
$("#contenuto_file").append(event.target.result);
};

return false;
}

// "Cancel" di dragover
function dragover(event) {

}

return false;
}

// "Cancel" di dragenter
function dragenter(event) {

}

return false;
}
</script>
</head>
<body>
<div id="dropdiv" ondrop="drop(event)" ondragover="dragover(event)"
ondragenter="dragenter(event)">Trascina qui un file</div>
<output id="contenuto_file"></output>
</body>
</html>
@cco l'area di deposito prima del caricamento/
ed il risultato dopo aver trascinato un file di testo all'interno/
Le 7ile9,stem *;I : 7ondamenti ed interfacce
coinvolte
Daturale estensione delle 1ile 2&.s sono le 7ile9,stem *;Is, il cui scopo risiede nel permettere ad
una Web 2pplication di richiedere uno spa$io dedicato per salvare dati, in maniera temporanea o
persistente% L'accesso avviene in modalitB sand$o-ed/ l'applica$ione potr0 cio accedere alla sola
por$ione del filesIstem ad essa dedicata%
Lo user,agent dovr0 chiedere all'utente il permesso per allocare spa$io sul disco qualora il tipo di
storage richiesto sia persistent# in entrambi i casi comunque, i dati, persistenti o temporanei,
potranno sempre essere eliminati dall'utente, manualmente o tramite interfaccia fornita dallo user,
agents%
L'applica$ione richiede l'alloca$ione di spa$io attraverso una chiamata al metodo
re#uest7ile9,stem dellAoggetto Local7ile9,stem/
9ignature
interface LocalFileSystem {
const unsigned short TEMPORARY = 0;
const unsigned short PERSISTENT = 1;
void requestFileSystem (unsigned short type, unsigned long long size,
FileSystemCallback successCallback, optional ErrorCallback errorCallback);
void resolveLocalFileSystemURL (DOMString url, EntryCallback
successCallback, optional ErrorCallback errorCallback);
};
,l metodo requestFile(*stem
t,pe indica se la richiesta sia per il salvataggio persistente o temporaneo (&@'?.?T@DT o
T@M&K'2'X"%
size indica lo spa$io richiesto sul disco%
success'all$ac. ed error'all$ac. sono le fun$ioni previste rispettivamente per la gestione del
feedbac= positivo e degli errori%
,l metodo resolveLocalFile(*stem7RL
.l metodo permette di cercare tra le entries del filesIstem un file od una directorI locali$$ati all'url
indicata%
L'interfaccia 1lags permette di fornire parametri aggiuntivi ai metodi che leggono o creano files e
directories/
9ignature
[NoInterfaceObject]
interface Flags {
attribute boolean create;
attribute boolean exclusive;
};
create indica che si desidera creare un fileBdirectorI e+,novo, e-clusive (in obbligatoria accoppiata
con create" causa un fallimento dell'opera$ione nel caso in cui la risorsa gi0 esista%
L'astra$ione ruota intorna ad un oggetto 7ile9,stem/
9ignature
[NoInterfaceObject]
interface FileSystem {
readonly attribute DirectoryEntry root;
};
che prevede un name ed una cartella di root# per ogni filesIstem sono previste delle entries (files o
directories"# in alto nella gerarchia troviamo l'interfaccia 3ntr,/
9ignature
[NoInterfaceObject]
interface Entry {
readonly attribute boolean isFile;
readonly attribute boolean isDirectory;
void getMetadata (MetadataCallback successCallback, optional
ErrorCallback errorCallback);
readonly attribute DOMString fullPath;
readonly attribute FileSystem filesystem;
void moveTo (DirectoryEntry parent, optional DOMString newName,
optional EntryCallback successCallback, optional ErrorCallback errorCallback);
void copyTo (DirectoryEntry parent, optional DOMString newName,
DOMString toURL (optional DOMString mimeType);
void remove (VoidCallback successCallback, optional ErrorCallback
errorCallback);
void getParent (EntryCallback successCallback, optional ErrorCallback
errorCallback);
};
L'interfaccia espone una completa lista di strumenti per ottenere informa$ioni ed agire sul
filesIstem, vediamo gli attributi/
is7ile/ booleano, indica se la entrI un file%
is=irector,/ booleano, indica se la entrI una directorI
name
full;ath
files,stem/ il filesIstem cui la @ntrI appartiene
Jediamo ora i metodi
getMetadata (Metadata'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)
2ccede ai metadata della risorsa%
moveTo (=irector,3ntr, parent" optional =/M9tring ne>Name" optional 3ntr,'all$ac.
success'all$ac." optional 3rror'all$ac. error'all$ac.)
?posta la entrI in una loca$ione differente (parent" del filesIstem rinominandola ne-Dame, qualora
un fileBdirectorI con lo stesso nome esistesse nella destina$ione verr0 sovrascritta%
cop,To (=irector,3ntr, parent" optional =/M9tring ne>Name" optional 3ntr,'all$ac.
)opia il fileBdirectorI dentro parent, con nuovo nome ne-Dame%
remove (Coid'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)
@limina il fileBdirectorI% tentare di eliminare una directorI vuota o la root genera un errore%
get;arent (3ntr,'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)S
'itorna la @ntrI contenitore, se la @ntrI la root del filesIstem, torna la entrI stessa%
toQJL (optional =/M9tring mimeT,pe)
'itorno un O'L identificativo per la entrI%
Tutti i metodi ad ecce$ione di quest'ultimo prevedono un success)allbac= ed un error)allbac=%
FirectorI@ntrI e 1ile@ntrI estendono @ntrI%
Director*Entr*
9ignature
[NoInterfaceObject]
interface DirectoryEntry : Entry {
DirectoryReader createReader ();
void getFile (DOMString path, optional Flags options, optional
EntryCallback successCallback, optional ErrorCallback errorCallback);
void getDirectory (DOMString path, optional Flags options,
void removeRecursively (VoidCallback successCallback, optional
};
L'interfaccia espone quattro metodi/
createJeader()
)rea un =irector,Jeader per leggere le entries in questa directorI% Le entries vengono ritornate
dal metodo read3ntries del reader%
get7ile(=/M9tring path" optional 7lags options" optional 3ntr,'all$ac. success'all$ac."
optional 3rror'all$ac. error'all$ac.)
)rea o cerca un file in path, passando op$ionalmente un oggetto 1lags%
get=irector, (=/M9tring path" optional 7lags options" optional 3ntr,'all$ac.
)rea o cerca una directorI in path, passando op$ionalmente un oggetto 1lags%
removeJecursivel, (Coid'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)S
@limina la directorI e ricorsivamente il suo contenuto%
Tutti i metodi ad ecce$ione di create'eader prevedono un success)allbac= ed un error)allbac=%
FileEntr*
9ignature
[NoInterfaceObject]
interface FileEntry : Entry {
void createWriter (FileWriterCallback successCallback, optional
void file (FileCallback successCallback, optional ErrorCallback
errorCallback);
};
1ile@ntrI rappresenta una entr, di tipo 7ile nel files,stem# espone due metodi/
create%riter (7ile%riter'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)
)rea un nuovo 7ile%riter per la risorsa%
void file (7ile'all$ac. success'all$ac." optional 3rror'all$ac. error'all$ac.)
'itorna un oggetto 7ile che rappresenta lo stato corrente di questa entrI%
Le 2&.s prevedono anche una versione sincrona del meccanismo# la base l'oggetto
7ile9,stem *;I : 3sempi
&rima di vedere qualche esempio sottolineo che al momento soltanto )hrome supporta le 2&.s#
partiamo con il codice necessario per ottenere un filesIstem e per creare un file/
<!doctype html>
<html>
<head>
<title>Ottenere un filesystem e creare un file</title>
<script>

// # Se abbiamo ottenuto il filesystem
function successHandler(fileSystem) {

// # Creo il file
fileSystem.root.getFile("test_file", { create: true },
function(fileEntry) {

// # a scopo didattico
var isFile = fileEntry.isFile ? "si" : "no";

// # Scriviamo qualche informazione del file a video
$("#fileInfo").html("Nome:" + fileEntry.name + "<br />E un file: " +
isFile);

}, errorHandler);
}

// # gestione degli errori, questi possono essere generati dalla chiamata a
requestFilesystem
// # oppure dal successHandler
function errorHandler(event) {

// # event.code racchiude il nostro codice di errore
switch(event.code) {

case 1:// NOT_FOUND_ERR
$("#fileInfo").html("File non trovato")
break;

case 12: // PATH_EXISTS_ERR
$("#fileInfo").html("Il file esiste gi!")
break;
default:
$("#fileInfo").html("Si verificato un errore!");
break;

}
}

// # AL DOM Ready
$(function() {
// # webkitRequestFileSystem una variante supportata da Chrome di
requestFileSystem
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, successHandler,
errorHandler);
});
</script>
</head>
<body>
<div id="fileInfo"></div>
</body>
</html>
.l risultato in )hrome/
Dell'esempio abbiamo definito un errorHandler e una logica minimale per trappare gli errori che si
trovano in event.code# ecco i tipi di errori possibili/
N/TT7/QN=T3JJ/ il fileBdirectorI non esiste%
93'QJITDT3JJ/ errore *generico*, pu8 essere il risultato di troppe chiamate per una
risorsa o per motivi di sicure$$a, per esperien$a personale mi capitato di riceverlo perch
stavo utili$$ando il protocollo file/BB per testare gli esempi che vi propongo in questa le$ione%
La solu$ione per evitarlo mettere i file sotto 2pache, utili$$ando quindi http%
*/JTT3JJ/ codice da non utili$$are nel contesto di queste 2&.s%
N/TTJ3*=*L3T3JJ/ il file o la directorI non sono accessibili in lettura tipicamente
per problemi di permessi%
3N'/=IN+T3JJ/ l'O'L indicato non formalmente corretto%
N/TM/=I7I'*TI/NT*LL/%3=T3JJ/ si sta cercando di scrivere un file od una
directorI che non possono essere modificati%
INC*LI=T9T*T3T3JJ/ potrebbe essere notificato nel caso in cui si stia operando su di
un oggetto che stato modificato successivamente al momento in cui stato letto dal
filesIstem%
9DNT*0T3JJ/ codice da non utili$$are nel contesto di queste 2&.s%
INC*LI=TM/=I7I'*TI/NT3JJ/ modifica non permessa# spostare un file nella
directorI padre sen$a rinominarlo o spostare una cartella padre in uno dei figli sono esempi
di utili$$o errato che generano questo tipo di errore%
EQ/T*T30'33=3=T3JJ/ l'applica$ione ha superato lo spa$io (quota" ad essa
dedicato%
TD;3TMI9M*T'HT3JJ/ notificato qualora di tentasse di operare sul tipo di oggetto
errato (un 1ile@ntrI quando si tratta di una FirectorI@ntrI o viceversa"%
;*THT30I9T9T3JJ/ impossibile creare la @ntrI perch il path indicato esiste gi0%
?i tratta di una enumera$ione i cui valori numerici partono da ; (DKTZ1KODFZ@''" ed arrivano
a ;4 &2THZ@:.?T?Z@''%
Jediamo come scrivere in un file, una volta ottenuto il filesIstem la nostra fun$ione successHandler
dovr0 contenere questo codice/

// # Creo il file
fileSystem.root.getFile("test_file", { create: true }, function(file) {
// # Creo un writer dal file
file.createWriter(function(writer) {

// # Alla fine della scrittura avviso con un messaggio
writer.onwriteend = function(e) {
alert("scrittura completata");
};

// # Creo un Blob (sintassi Chrome)
var blob = new window.WebKitBlobBuilder();
blob.append("del testo"); // # Metto qualcosa nel Blob

// # Scrivo nel file
writer.write(blob.getBlob());
}, errorHandler);
}, errorHandler);
}
La rimo$ione di un file avviene nel modo che segue/

// # Creo il file
fileSystem.root.getFile("test_file", { create: true }, function(file) {

file.remove(function() {
alert("File rimosso");
}, errorHandler);
}, errorHandler);
}
Le opera$ioni sulle directorI sono speculari a quelle sui files, unica differen$a significativa la
crea$ione che passa per il metodo getFirectorI al posto di get1ile%
N piA interessante invece vedere un esempio in cui lo scopo sia leggere il contenuto di una directorI
o del filesIstem/
<!doctype html>
<html>
<head>
<title>Leggere il contenuto di una directory o del filesystem</title>
<script>


// # Creo una directory
fileSystem.root.getDirectory("Cartella_padre", { create: true },
function(dirEntry) {

// # Istanzio un reader per il filesystem
var reader = fileSystem.root.createReader();

// # Leggo il contenuto
reader.readEntries(function(list) {

// # Per ogni entry ricavo nome e tipologia
$.each(list, function(i, item) {
var dirOrFile = item.isFile ? "file" : "directory";
$("#fileInfo").append("<p>" + item.name + " - " + dirOrFile + "</p>");
});
});
}, errorHandler);
}

// # Gestione degli errori
function errorHandler(event) {
$("#fileInfo").html("Si verificato un errore!");
}

// # AL DOM Ready
$(function() {
// # webkitRequestFileSystem una variante supportata da Chrome di
requestFileSystem
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, successHandler,
errorHandler);
});
</script>
</head>
<body>
<div id="fileInfo"></div>
</body>
</html>
.l risultato in )hrome/
@d uno screenshot della console di )hrome che ci mostra la composi$ione della lista di oggetti/
%e$%or.ers
Guando ragioniamo in termini di concorren$a la prima cosa che salta alla mente la parola Thread,
per alcuni il termine associato a Tava ed in particolare ad un esame universitario non
particolarmente semplice da superare% Fa oggi possibile collegare a *concorren$a* un altro
termine il cui campo di applica$ione il mondo client/ i %e$%or.ers%
?i tratta di 2&.s che permettono di eseguire script (tipicamente lunghe elabora$ioni" in ackground
sen$a che la loro esecu$ione blocchi in alcun modo l'interfaccia utente% .l draft dedicato, che potete
trovare qui, mette in guardia dal loro abuso e ne consiglia un utili$$o limitato e responsabile%
/gni %e$%or.er deve essere inserito in un file, il nome del quale va passato come parametro al
costruttore/
var webWorker = new Worker("conteggio.js");
.l meccanismo alla base dei WebWor=ers semplice# viene istanziato lAoggetto indicando il file
dove vive la business logic (che rappresenta il -or=er vero e proprio", si definisce un listener per
lAevento message dalle due parti e si scam$iano i dati attraverso il metodo postMessage()%
Jediamo un esempio/
7ile principale
// #`Istanzio l'oggetto
var webWorker = new Worker("pariodispari.js");
// # Listener per l'evento message
webWorker.addEventListener("message", function(event) {
alert(event.data);
}, false);
// # Invio dei dati
webWorker.postMessage({"par": "3"});
pariodispari.Is
// # Il WebWorker, self rappresenta il worker stesso
self.addEventListener("message", function(event) {

// # Il messaggio" nella bottiglia
var dati = event.data;

// # Il numero nel messaggio
var numero = dati.par;

// # Notifichiamo il chiamante del risultato della elaborazione
if(numero % 2 == 0) {
self.postMessage(" un numero pari");
} else {
self.postMessage(" un numero dispari");
}
}, false);
H possi$ile per un >or.er <delegare< il lavoro a dei subworkers% Lo scopo spalmare il lavoro
su vari threads per sfruttare piA )&O e migliorare le performances% ?i tratta in buona sostan$a di
istan$iare n -or=ers figli all'interno di un -or=er padre/
// # Il worker padre, lo smistatore
// # 10 lavoranti
num_subworker = 10;
for (var i = 0; i < num_subworker; i++) {
// # la business logic risiede in subworker.js
var worker = new Worker("subworker.js");
worker.postMessage(.. la tua parte di lavoro ..);
...
}
H anche possi$ile importare file esterni in un >or.er tramite import9cripts(filename)%
L'utili$$o forse piA logico di un WebWor=er prevede la gestione di chiamate asincrone via get o
post# l'esempio che segue implementa il recupero di informa$ioni attraverso una chiamata asincrona
verso un sito (potrebbe essere un servi$io J39T che ritorna un qualche tipo di risposta attesa
dall'applica$ione"/
//#`Istanzio l'oggetto
var webWorker = new Worker("call.js");
// # Listener per l'evento message
webWorker.addEventListener("message", function(event) {
alert(event.data);
}, false);
// # Invio dei dati
webWorker.postMessage({ url: "http://www.ilmiosito.it" });
call.Is
self.addEventListener("message", function(event) {

try {
// # Utilizzo qui il buon vecchio XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("GET", event.data.url, false);
xhr.send();
// # Ritorno lo stato
self.postMessage(xhr.statusText);
} catch (e) {
self.postMessage("ERRORE");
}
}, false);
@sistono anche 9hared%or.ers/ utili$$ano 2&.s leggermente diverse e gestiscono connessioni
multiple% Jediamo un semplice esempio riportato nel draft/
7ile principale
var worker = new SharedWorker("shared.js");
worker.port.addEventListener('message', function(event) {
alert (e.data);
}, false);
worker.port.start();
worker.port.postMessage("ping");
shared.Is
// # notate il listener onconnect
onconnect = function(event) {
var port = e.ports[0];
port.postMessage("Ciao!");
port.onmessage = function(event) {
port.postMessage("pong");
}
}
.mportante/ i %e$%or.ers non hanno accesso a tutti gli oggetti solitamente disponi$ili, proprio
in ragione della lora natura/ non possono accedere al =/M ad esempio perch5 non 5 thread:
safe" cos? come agli oggetti >indo> e document, hanno tuttavia accesso a location" navigator e
come a$$iamo visto ad 0MLHttpJe#uest%
/ffline *;I
2nche in un periodo storico in cui quasi ogni dispositivo connesso alla rete 5 necessario pensare
ad un meccanismo che permetta di gestire le nostre %e$ *pplications offline# pensate ad
esempio ad un dispositivo mobile che per un certo lasso temporale perda la connessione per
problemi di rete o perch la $ona in cui si trova ha una copertura insufficiente/ l'utente potrebbe
trovarsi a non poter fruire dei contenuti di cui necessita%
&er risolvere il problema vengono in nostro soccorso le /ffline *;Is, definite in un documento
dedicato che potete trovare a questo indiri$$o%
La solu$ione passa dalla defini$ione di un file manifest che elenchi i files necessari perch
l'applica$ione continui a fun$ionare (magari con features limitate" anche offline% Lo user:agent
farB in modo di generare una copia dei files indicati perch5 siano raggiungi$ili anche nel caso
in cui la connessione di rete dovesse venire a mancare%
Manifest
.l file manifest un semplice file di testo che consiste in una lista di stringhe (una per riga"
rappresentanti i nomi delle risorse che il bro-ser deve rendere accessibili offline, di seguito il
contenuto di un ipotetico file demoapp%appcache/
CACHE MANIFEST
index.html
style.css
index.js
N necessario indicare nella pagina *principale* (quella che necessita dei suddetti files, qui la
chiameremo inde-.html" nel tag html un attributo manifest che punti al file/
<!doctype html>
<html manifest="demoapp.appcache">
<head>
<title>Demo</title>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>
1irefo+ ci mostra un avviso quando accediamo alla pagina/
I file manifest sono serviti come tipo MIM3 te-t2cache:manifest%
)ome avete potuto notare nel file manifest stata inclusa la stessa inde+%html, la nostra *main page*
cosE come raccomandato dal documento di specifica%
.l bro-ser cercher0 di aggiornare la cache dei files ogniqualvolta l'utente visiter0 la pagina% ?e il
manifest dovesse essere stato modificato dall'ultima visita (ri"effettuer0 il do-nload di tutti i files%
I files vengono elencati nel manifest divisi per <categorie<" tecnicamente namespaces, qualora
non ne fosse esplicitamente definito alcuno il namespace di default '*'H3 sotto il quale
andranno definiti tutti i files da rendere disponibili offline%
N corretto utili$$are sia O'L assoluti o relativi per indicare l'indiri$$o dei files%
N possibile definire un namespace N3T%/JU per elencare files da non copiare localmente ed un
namespace 7*LL*'U il cui scopo indicare risorse che prevedano una versione online ed una
offline%
)erchiamo di visuali$$are uno scenario che ci permetta di capire meglio le differen$e%
&oniamo di sviluppare un sito moderno che preveda una Home &age che oltre alle informa$ioni
sull'a$ienda preveda un elenco di prodotti preso dal server ed una chat con un operatore% Kffline
sarebbe inutile includere il file che si occupa di reperire la lista dei prodotti dal server (un ipotetico
getZproductZlist%php" ed inutile sarebbe includere il file che implementa la chat (chat%Ls"%
&otremmo di conseguen$a pensare ad un file manifest cosE strutturato/
CACHE MANIFEST
NETWORK:
get_product_list.php
chat.js
CACHE:
index.html
style.css
;otremmo anche decidere di sviluppare una Home ;age alternativa statica che mostri
solamente le informa$ioni relative all'a$ienda%
CACHE MANIFEST
FALLBACK
index.html offline.html

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

Introduzione

Potrebbero piacerti anche