Manuale html5 - Funny pages main

Transcript

1 - 145
Indice generale
INTRODUZIONE............................................................................................................. 7
Una guida operativa...................................................................................................................7
I progetti guida.........................................................................................................................7
Alcuni prerequisiti.....................................................................................................................8
Tabella della compatibilità sui browser..........................................................................8
Mappa della guida......................................................................................................................8
Ai nastri di partenza!..................................................................................................................8
DA HTML4 A HTML5...................................................................................................... 10
Un po' di storia........................................................................................................................10
Che cos'è l'HTML5?....................................................................................................................10
Perché dovremmo passare all'HTML5?.............................................................................................11
Grandi cambiamenti nell'ombra....................................................................................................11
E adesso?...............................................................................................................................12
LA SINTASSI DI HTML5................................................................................................... 13
Maiuscolo, minuscolo.................................................................................................................13
Casi particolari........................................................................................................................13
Attributi................................................................................................................................14
Semplificazioni........................................................................................................................14
Conclusioni.............................................................................................................................14
Elementi disegnati per un web moderno............................................................................15
Elementi e attributi non più previsti nelle specifiche..........................................................................16
Attributi globali........................................................................................................... 17
Modificare il contenuto di una pagina: contenteditable.......................................................................17
Menu contestuali associati ad un elemento: contextmenu....................................................................17
Lʼattributo data-*.....................................................................................................................17
La fine del display:none in linea: hidden.........................................................................................18
Spellcheck.............................................................................................................................18
Altri attributi globali.................................................................................................................18
Tabella del supporto sui browser...................................................................................................18
Conclusioni.............................................................................................................................18
Un nuovo content model...............................................................................................19
Non più solo div.......................................................................................................................19
Contenuti in una bolla di sapone...................................................................................................19
Panoramica sui content model e presentazione del primo progetto guida...................................23
Una panoramica completa..........................................................................................................23
Metadata content.................................................................................................. 23
Sectioning content.................................................................................................23
Heading content................................................................................................... 23
Phrasing content................................................................................................... 23
Embedded content................................................................................................24
Interactive content................................................................................................ 24
Progetto guida - nel tag HEAD......................................................................................................24
Header..................................................................................................................... 26
Funzioni e dati tecnici...............................................................................................................26
Header: esempi concreti............................................................................................................26
Footer...................................................................................................................... 30
Footer: esempi concreti.............................................................................................................30
Section..................................................................................................................... 33
Section: esempi concreti............................................................................................................33
Article...................................................................................................................... 36
Article: esempi concreti.............................................................................................................36
Nav.......................................................................................................................... 39
2 - 145
Nav: esempi concreti.................................................................................................................39
Aside........................................................................................................................ 42
Aside: esempi concreti...............................................................................................................42
Hgroup...................................................................................................................... 44
Mark........................................................................................................................ 45
Time e gli attributi pubdate e datetime.............................................................................46
Meter....................................................................................................................... 47
Progress.................................................................................................................... 48
Altri tag.................................................................................................................... 49
I tag <figure> e <figcaption>........................................................................................................49
Esempio:............................................................................................................ 49
Il tag <embed>........................................................................................................................49
Il tag <ruby>...........................................................................................................................49
Il tag <wbr>............................................................................................................................49
I tag <command> e <menu>.........................................................................................................49
I tag <details> e <summary>........................................................................................................49
Il tag <keygen>........................................................................................................................50
Il tag <output>........................................................................................................................50
I form in HTML5: una panoramica.....................................................................................51
Nuovi attributi per i form: autofocus, placeholder e form......................................................52
I tipi di attributi......................................................................................................................52
autofocus...............................................................................................................................52
Esempi d'uso dell'attributo autofocus...........................................................................52
Alternative per l'implementazione dell'attributo autofocus.................................................52
placeholder............................................................................................................................52
Esempi d'uso dell'attributo placeholder........................................................................53
Alternative per l'implementazione dell'attributo placeholder..............................................53
form.....................................................................................................................................53
Esempi d'uso dell'attributo form.................................................................................53
Alternative per l'implementazione dell'attributo form.......................................................53
Nuovi attributi dei form per la validazione.........................................................................55
required................................................................................................................................55
autocomplete.........................................................................................................................55
multiple................................................................................................................................55
pattern.................................................................................................................................56
min e max..............................................................................................................................56
step.....................................................................................................................................56
novalidate..............................................................................................................................57
Input type: tel............................................................................................................ 58
I dispositivi mobili e il type tel.....................................................................................................58
Esempi d'uso...........................................................................................................................58
Input type: search....................................................................................................... 60
Safari su Mac OS X e il type search................................................................................................60
Esempi d'uso...........................................................................................................................60
Input type: url............................................................................................................ 61
I dispositivi mobili e il type url.....................................................................................................61
3 - 145
Esempi d'uso...........................................................................................................................61
Input type: email......................................................................................................... 62
I dispositivi mobili e il type email..................................................................................................62
Esempi d'uso...........................................................................................................................62
Nuovi tipi di input per la gestione delle date......................................................................63
datetime...............................................................................................................................63
Gli attributi specifici.............................................................................................. 63
datetime-local........................................................................................................................63
date.....................................................................................................................................64
month...................................................................................................................................64
week....................................................................................................................................65
time.....................................................................................................................................65
Input type: number...................................................................................................... 67
I dispositivi mobili e il type number...............................................................................................67
Attributi specifici per il type number.............................................................................................67
Attributo min....................................................................................................... 67
Attributo max...................................................................................................... 67
Attributo step...................................................................................................... 67
Esempi d'uso...........................................................................................................................67
Input type: range......................................................................................................... 69
Attributi specifici.....................................................................................................................69
Esempi d'uso...........................................................................................................................69
Input type: color......................................................................................................... 70
Opera e il type color.................................................................................................................70
Esempi d'uso...........................................................................................................................70
Cosa sono le datalist?.................................................................................................... 72
Datalist su Opera.....................................................................................................................72
Esempi d'uso...........................................................................................................................72
La potenza dei microdati...............................................................................................74
Introduzione: semantica e rich snippet...........................................................................................74
I microdata in pratica................................................................................................................74
I vocabolari............................................................................................................................75
Un template per blog in HTML5.......................................................................................76
Stili e presentazione.................................................................................................................78
Nuova linfa alle applicazioni web.....................................................................................79
La risposta ad un bisogno molto sentito..........................................................................................79
I punti chiave dell’offerta...........................................................................................................79
Multimedialità...................................................................................................... 79
Arricchimento...................................................................................................... 79
Manipolare la cronologia: le History API........................................................................79
Associare protocolli e MIME type alla propria web application.............................................80
Un progetto ambizioso...............................................................................................................81
Applicazioni web offline (file .manifest)............................................................................83
Andare in profondità.................................................................................................................83
Le API associate.......................................................................................................................84
Conclusioni.............................................................................................................................86
Indexed Database API.................................................................................................... 88
Come funzionano le API..............................................................................................................88
Una funzione di ricerca..............................................................................................................92
Conclusione............................................................................................................................93
WebStorage API........................................................................................................... 94
4 - 145
Le specifiche..........................................................................................................................94
Un esempio............................................................................................................................94
Web Workers API......................................................................................................... 96
Le specifiche..........................................................................................................................96
Un esempio............................................................................................................................96
Più informazioni per i più ardimentosi............................................................................................99
Conclusioni...........................................................................................................................102
Tabella del supporto sui browser.................................................................................................102
WebSocket API.......................................................................................................... 103
Le specifche..........................................................................................................................103
Un esempio...........................................................................................................................104
Conclusioni...........................................................................................................................107
Drag and Drop........................................................................................................... 108
Le specifiche.........................................................................................................................108
Un esempio...........................................................................................................................110
Geolocation API......................................................................................................... 112
Le specifiche.........................................................................................................................112
Conclusioni...........................................................................................................................113
Canvas.................................................................................................................... 114
Una tela trasparente................................................................................................................114
Le specifiche.........................................................................................................................114
Path................................................................................................................ 114
Modificatori....................................................................................................... 115
Immagine.............................................................................................................................117
Testo...................................................................................................................................118
Pixel per Pixel........................................................................................................................118
Canvas: un esempio pratico.......................................................................................... 120
Un esempio...........................................................................................................................120
Conclusioni...........................................................................................................................122
Video...................................................................................................................... 123
Le specifiche.........................................................................................................................123
Le API..................................................................................................................................124
Gli eventi.............................................................................................................................125
MediaController API.................................................................................................................125
Video e Canvas: un esempio pratico................................................................................127
Conclusioni...........................................................................................................................129
Audio...................................................................................................................... 130
Le specifiche.........................................................................................................................130
Un esempio...........................................................................................................................130
Conclusioni...........................................................................................................................131
SVG e MathML........................................................................................................... 133
SVG....................................................................................................................................133
MathML................................................................................................................................133
Novità in HTML5.....................................................................................................................134
Conclusioni...........................................................................................................................134
Una 'lavagna virtuale'.................................................................................................. 136
Il canvas nella dashboard..........................................................................................................136
Esportazione in SVG.................................................................................................................137
Un passo avanti......................................................................................................................139
Conclusioni...........................................................................................................................139
Feature detection e strategie di fallback..........................................................................140
Una pioggia di tag...................................................................................................................140
Feature detection vs. browser detection........................................................................................140
Fallback e alternative..............................................................................................................140
Audio e Video..................................................................................................... 140
Canvas............................................................................................................. 141
Geolocation....................................................................................................... 141
Drag and Drop..................................................................................................... 141
5 - 145
WebSocket......................................................................................................... 141
WebWorkers....................................................................................................... 142
WebStorage e IndexedDB........................................................................................ 142
Offline Web Application......................................................................................... 142
Shim e Polyfill a profusione........................................................................................................142
Conclusioni...........................................................................................................................142
Appendice: Tabelle del supporto sui browser di HTML5........................................................143
Tabelle del supporto sui browser di HTML5.......................................................................143
Indice dei contenuti................................................................................................................143
6 - 145
INTRODUZIONE
Una guida operativa
Affrontare un tema vasto come quello dell'HTML5 spaventa sempre un po', soprattutto quando l'obiettivo
è quello di abbracciare l'intera tecnologia sottostante le specifiche proponendo al contempo un'opera che
sia fruibile e divertente da leggere. Il primo passo che abbiamo deciso di compiere nella stesura di questo
progetto è stato individuare il target di lettori ai quali la guida vorrebbe rivolgersi. Abbiamo allora
identificato da un lato un gruppo di sviluppatori interessati alla consultazione di specifiche referenze del
linguaggio, dall'altro un insieme di lettori desiderosi di informarsi a tutto tondo sulle novità offerte
dall'HTML5. A questa commistione di interessi si aggiunge una naturale segmentazione della guida
secondo i due temi che maggiormente permeano le specifiche: il nuovo approccio semantico nella
creazione di pagine web e il ricco set di API reso disponibile.
Il percorso si snoda in modo organico tra le due macro-sezioni alternando lezioni di stampo divulgativo,
ottime per avere una visione di insieme della tematica trattata, a percorsi verticali costruiti attorno a
funzionalità specifiche. Non sono previsti articoli introduttivi alla sintassi del linguaggio HTML e nemmeno
approfondimenti su elementi o API già presenti nelle versioni precedenti, a meno che questi non abbiano
subito un cambio radicale; se fosse necessario recuperare informazioni su tali aspetti rimandiamo alla
lettura della guida HTML 4 redatta da Wolfgang Cecchin.
I progetti guida
Per questa guida abbiamo deciso di combinare i tanti piccoli esempi dedicati ad ogni lezione in un vero e
proprio progetto che sappia anche mostrare come le singole funzionalità HTML5 lavorano insieme.
In realtà i progetti sono due, come due gli aspetti principali di questa specifica: al termine delle lezioni
legate al nuovo supporto semantico dell'HTML5 la combinazione dei vari esempi mostrati darà vita ad un
template per blog studiato per trarre vantaggio da elementi come <section> e <article>, dai nuovi
content model e dalle novità in materia di form. La parte incentrata sulle API dedicate allo sviluppo di
applicazioni web invece includerà tutti gli elementi necessari alla stesura di una lavagna virtuale sulla
quale si potranno tracciare linee utilizzando il mouse e che darà la possibilità di salvare in locale le
opere create.
Chiaramente tale scelta è stata implementata in modo da non pregiudicare l'indipendenza delle singole
lezioni ma con l'idea di suggellare un ulteriore filo conduttore all'interno dell'opera.
Figura 1 - Anteprima del template per blog in HTML5 (click per ingrandire)
7 - 145
Alcuni prerequisiti
Nella prossima lezione ci interesseremo con maggior attenzione alla timeline ufficiale HTML5, per ora
basti sapere che la data di accettazione delle specifiche come standard W3C è ancora sufficientemente
lontana. Nonostante questo, buona parte di quanto verrà trattato in questa guida è già disponibile sulla
grande maggioranza dei browser e, come vedremo, alcuni aspetti del linguaggio sono da tempo in
produzione su portali di notevoli dimensioni, come youtube.com o vimeo.com.
Esistono tuttavia ampie porzioni delle specifiche che, perché meno strategiche, di più difficile
implementazione o meno mature, sono ad oggi supportate in modo superficiale e disomogeneo; per poter
beneficiare al massimo delle demo e degli esempi anche per elementi o API che ricadono in questa
categoria si consiglia quindi di dotarsi di un browser che utilizzi WebKit come layout engine in quanto
dotato del più ampio supporto HTML5 ad oggi disponibile sia per le parti della specifica ormai consolidate
sia per quelle al momento più 'sperimentali'.
In particolare, tutto il codice di questa guida è stato sviluppato e testato usando la ‘Nightly Build' di
Chromium, cioè la versione speciale per fini di sviluppo che contiene ogni feature ad oggi implementata,
per quanto sperimentale esso sia. La pagina per il download, disponibile per i principali sistemi operativi,
è raggiungibile all'indirizzo http://build.chromium.org/f/chromium/snapshots/ seguendo il link nominato
come il proprio sistema operativo e successivamente la cartella recante il numero più alto tra i presenti.
Tabella della compatibilità sui browser
Se Chromium, lo accennavamo, garantisce ad oggi il supporto più ampio alle funzionalità previste nella
specifica e in via di definizione presso il W3C e il WHATWG, la maggior parte dei browser commerciali più
diffusi, con ritmi e tempi diversi, si sta adeguando. Internet Explorer 9 e Firefox 5, rilasciati nella
primavera di quest’anno, condividono infatti un ottimo supporto a queste specifiche.
Lo stato dell'arte relativamente al supporto HTML5 lo abbiamo tracciato in questa tabella di compatibilità
che sarà via via aggiornata con l'estendersi del supporto alle feature che attualmente non sono
supportate. Estratti della tabella sono inseriti anche a corredo delle lezioni dedicate a ciascun elemento.
Mappa della guida
Nell'immagine seguenti è riassunta l'intera struttura dell'opera mettendo in evidenza la posizione delle
singole lezioni rispetto al contenuto globale con l'obiettivo di fornire una panoramica esauriente sui temi
che verranno trattati.
Ai nastri di partenza!
Figura 2 - Mappa della guida (click per ingrandire)
8 - 145
Bene, con questo può definirsi conclusa questa necessaria sezione introduttiva, la prossima lezione
affronterà la travagliata storia che ha caratterizzato la definizione di queste specifiche, con un piccolo ma
sentito cameo anche da parte dell'XHTML2.
9 - 145
DA HTML4 A HTML5
Un po' di storia
Siete curiosi di sapere come tutto è nato? Venerdì 4 giugno 2004, in una notte buia e tempestosa, Ian
Hickson annuncia la creazione del gruppo di ricerca WHAT, acronimo di Web Hypertext Application
Technology in un sintetico ma ricco messaggio.
L'obiettivo del gruppo è quello di elaborare specifiche per aiutare lo sviluppo di un web più orientato alle
applicazioni che ai documenti; tra i sottoscrittori di questa iniziativa si annoverano aziende del calibro di
Apple, Mozilla e Opera. Questa piccolo scisma dal W3C è determinato dal disaccordo in merito alla rotta
decisa dal consorzio durante un famoso convegno del 2004 dove, per un pugno di voti, prevalse la linea
orientata ai documenti di XHTML2.
"XHTML 2.0 considered harmful" è il titolo di un messaggio inviato alla mailing list ufficiale del W3C datato
14 gennaio 2003 che ben riassume i sentimenti contrastanti che all'epoca si respiravano in merito a
queste specifiche. La principale causa di perplessità è da ricercarsi nella decisione azzardata di non
mantenere la retro-compatibilità con la versione 1.1 eliminando alcuni tag e imponendo agli
sviluppatori web un controllo rigoroso nella creazione delle pagine, pena lo stop del processo di parsing e
la visualizzazione a schermo degli errori di interpretazione. Nei due anni successivi i gruppi XHTML2 e
WHAT proseguono i lavori sulle proprie specifiche in modo indipendente e parallelo, sollevando dubbi e
confusione sia da parte dei produttori di browser che degli sviluppatori web. Emblematico in tal senso è
un articolo firmato da Edd Dumbill nel dicembre 2005 intitolato The future of HTML. Il 27 ottobre 2006 in
un post sul proprio blog intitolato Reinventing HTML, Tim Berners-Lee annuncia la volontà di creare un
nuovo gruppo di ricerca che strizzi l'occhio al WHAT e ammette alcuni sbagli commessi seguendo la
filosofia XHTML2:
Some things are clearer with hindsight of several years. It is necessary to evolve HTML
incrementally. The attempt to get the world to switch to XML, including quotes around
attribute values and slashes in empty tags and namespaces all at once didn't work. The large
HTML-generating public did not move, largely because the browsers didn't complain. Some
large communities did shift and are enjoying the fruits of well-formed systems, but not all. It
is important to maintain HTML incrementally, as well as continuing a transition to wellformed world, and developing more power in that world. Tim Berners-Lee.
Dovranno passare quasi altri due anni di competizione tra le due specifiche, questa volta entrambe
interne al W3C, prima che nel luglio del 2009 lo stesso Tim sancisca di non voler riconfermare il
gruppo XHTML2 per l'anno successivo preferendo di fatto la direzione intrapresa dall'HTML5.
Frattanto il gruppo di ricerca, formato da una commistione di elementi del W3C e del WHAT, sotto la guida
di Ian Hickson, è giunto alla 4° versione delle specifiche.
Nonostante il continuo e solerte lavoro e il grande intervallo di tempo speso nella stesura di questo
documento, i passi residui necessari ad eleggere questa tecnologia al rango di 'W3C Reccomandation',
relegandola così tra gli standard riconosciuti, sono ancora molti, al punto che si prevede di raggiungere
l'agognato traguardo soltanto attorno al 2020.
Ricordiamo però che il consorzio si riferisce sempre all'intero universo inscritto nelle specifiche mentre
alcune feature ritenute peculiari ed importanti, ad esempio il tag <video>, sono già implementate da
tempo dalla totalità (o quasi) dei browser in commercio.
Che cos'è l'HTML5?
Domanda semplice solo all'apparenza; siamo sicuramente di fronte alla quinta revisione delle
specifiche HTML ma anche di un vastissimo elenco di funzionalità che si sviluppano attorno al tema del
linguaggio di markup: cerchiamo quindi di fare un po' di ordine.
Per prima cosa è importante ricordare che, anche in virtù della storia della sua nascita, all'interno
dell'HTML5 convivono in armonia due anime: la prima, che raccoglie l'eredità semantica dell'XHTML2, e la
seconda che invece deriva dallo sforzo di aiutare lo sviluppo di applicazioni Web. Il risultato di questo mix
di intenti è più articolato di quanto si immagini; in prima istanza si assiste ad una evoluzione del
modello di markup, che non solo si amplia per accogliere nuovi elementi, ma modifica in modo sensibile
anche le basi della propria sintassi e le regole per la disposizione dei contenuti sulla pagina. A questo
segue un rinvigorimento delle API JavaScript che vengono estese per supportare tutte le funzionalità
di cui una applicazione moderna potrebbe aver bisogno:
•
•
salvare informazioni sul device dell'utente;
accedere all'applicazione anche in assenza di una connessione Web;
10 - 145
•
•
•
•
•
•
•
•
•
comunicare in modo bidirezionale sia con il server sia con altre applicazioni;
eseguire operazioni in background;
pilotare flussi multimediali (video, audio);
editare contenuti anche complessi, come documenti di testo;
pilotare lo storico della navigazione;
usare metafore di interazione tipiche di applicazioni desktop, come il drag and drop;
generare grafica 2D in tempo reale;
accedere e manipolare informazioni generate in tempo reale dall’utente attraverso sensori
multimediali quali microfono e webcam.
Anche l'aspetto semantico a contorno del markup non è dimenticato; ecco quindi nascere le specifiche per
la nuova generazione di microformati e per l'integrazione tra HTML5 e RDFa. Ma non è tutto,
attorno a quello che può essere definito il nucleo autentico delle specifiche gravitano tutta una serie di
altre iniziative, alcune delle quali in avanzato stato di definizione, studiate per:
•
•
•
accedere alle informazioni geografiche del device dell'utente (posizione, orientamento,...);
mantenere un database sul device dell'utente;
E non dimentichiamo che l'evoluzione dell'HTML viaggia di pari passo con quella dei CSS, che si
avvicinano alla terza versione, e di altri importanti standard come SVG e MathML, e che ognuno di questi
componenti è progettato nella sua versione più recente per recare e ricevere beneficio dagli altri.
Perché dovremmo passare all'HTML5?
Il panorama di Internet è cambiato molto dall'assunzione a 'W3C Reccomandation' della versione
precedente delle specifiche, avvenuta verso la fine del 1999. In quel tempo il Web era strettamente
legato al concetto di ipertesto e l'azione più comune per l'utente era la fruizione di contenuti,
tipicamente in forma testuale. La mediamente bassa velocità di connessione e il limitato investimento sul
media contribuivano ad una scarsa presenza di applicazioni web, più care da sviluppare ed esigenti in
termini di banda.
Tutto questo era ben rappresentato da un linguaggio, HTML, principalmente orientato ad agevolare la
stesura di semplici documenti testuali collegati fra loro. Negli anni successivi l'interesse intorno
alla rete ha subito una brusca accelerazione e questo ha condizionato positivamente sia la diffusione che
la velocità di connessione della stessa, attirando di conseguenza maggiori investimenti e ricerca. Al
modello di fruizione dei contenuti si è aggiunta la possibilità per l'utente finale di divenire esso stesso
creatore attraverso applicazioni web sempre più elaborate ed interessanti.
Questo nuovo livello di complessità, in termini di sviluppo, ha però dovuto scontrarsi con un set di
specifiche poco inclini ad essere utilizzate per tali fini e che quindi si sono prestate al compito solo a
scapito di infiniti hack e workaround. Esempi di questi 'utilizzi non premeditati' dell'HTML si possono
trovare un po' ovunque, famoso il caso degli attributi rel e ref che hanno assunto nel tempo valori non
previsti, (eg: nofollow) anche esterni alla loro funzione naturale (eg: l'utilizzo di questi due attributi in
librerie come Lightbox).
Parallelamente il percorso di crescita del web ha fatto emergere alcune strutture di contenuto
ricorrenti, ben caratterizzate dal fenomeno dei blog: informazioni di testata, menu di navigazione,
elenchi di articoli, testo a pie' di pagina, ed altri. La parte dedicata al singolo articolo presenta anch'essa
solitamente lo stesso set di informazioni quali autore, data di pubblicazione, titolo e corpo del messaggio.
Anche in questo caso l'HTML4 non ha saputo fornire gli strumenti adatti a consentire una corretta
gestione e classificazione del contenuto obbligando gli sviluppatori web a ripiegare su strutture anonime,
quali <div> e <p>, arricchite di valore semantico con l'utilizzo di attributi quali class e id.
L'HTML5 nasce per risolvere questi problemi offrendo agli sviluppatori web un linguaggio pronto ad
essere plasmato secondo le più recenti necessità, sia dal lato della strutturazione del contenuto
che da quello dello sviluppo di vere e proprie applicazioni.
Grandi cambiamenti nell'ombra
La differenza principale tra le versioni correnti di HTML e XHTML risiede nella sintassi. Il linguaggio di
markup creato da Tim Berners-Lee, e che ancora oggi popola i nostri browser, è stato studiato come
applicazione del più generico SGML, Standard Generalized Markup Language; ne è la prova la
dichiarazione di Document Definition Type che dovrebbe essere posta nella prima riga di una pagina Web
ad indicare la grammatica, HTML per l'appunto, usata nel documento:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">
11 - 145
In realtà la quasi totalità dei browser ignora la definizione e interpreta il documento secondo logiche più
permissive, frutto di anni di eccezioni e di esperienza accumulata su pagine malformate. L'XHTML, invece,
è una versione della sintassi HTML costretta all'interno delle regole XML, a sua volta grammatica SGML:
questo approccio dovrebbe implicare un maggior rigore nella pagina e l'aderenza a regole quali l'obbligo
di chiusura di tutti i tag. Il parser XML inoltre dovrebbe sospendere l'interpretazione della pagina al primo
errore rilevato.
L'arrivo dell'HTML5 introduce una importante novità in questo scenario, per la prima volta l'obiettivo delle
specifiche è quello di definire un linguaggio ubiquo, che possa poi essere implementato su
entrambe le sintassi. L'occasione è buona anche per fare un po' di pulizia e rompere definitivamente il
legame tra HTML e SGML formalizzando e traducendo in standard le regole adottate da tempo nei
browser. Per indicare un documento HTML5 è nata quindi la seguente semplice istruzione:
1 <!DOCTYPE html>
Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5:
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
E adesso?
Questa lezione aveva l'obiettivo di fornire un contesto storico e operativo ai temi dei quali questa guida
tratterà in modo approfondito. Nelle prossime lezioni affronteremo in sequenza prima la parte legata al
markup ed alla gestione della disposizione del contenuto e successivamente le principali API introdotte da
queste specifiche. Il viaggio all'interno dell'universo dell'HTML5 è appena iniziato!
12 - 145
LA SINTASSI DI HTML5
Prima di scendere nei dettagli presentando i nuovi elementi e le nuove API definite nella specifica, è
necessario spendere qualche momento per parlare delle regole sintattiche introdotte dall’HTML5, per
larga misura ereditate e razionalizzate dalla precedente versione delle specifiche. In primo luogo
familiarizziamo con il concetto noto di tag. Esistono tre distinte versioni di questa particella, ognuna di
esse si applica selettivamente solo ad alcuni elementi:
1 Tag ‘classico’
2 <p> bla bla bla bla ... </p>
3
4 Tag ‘vuoto’
5 <img src="immagine_interessante.jpg" alt="Una immagine interessante">
6
7 Tag ‘autochiudente’
8 <rect x="150" y="40" width="60" height="30" fill="black" stroke="black"/>
Gli elementi HTML5 si possono dividere in tre categorie sulla base della tipologia di tag da usare per
implementarli.
1. Elementi normali: sono quelli che possono racchiudere dei contenuti sotto forma di testo, commenti
HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste (<ul>), i titoli
(<h1>), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi normali vengono
definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>).
2. Elementi vuoti: gli elementi vuoti sono quelli che non possono avere alcun contenuto. Per questi
elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input, keygen,
link, meta, param, source, track, wbr.
Per gli elementi vuoti, la chiusura del tag, obbligatoria in XHTML, è invece opzionale. Possiamo dunque
definire un tag <img> secondo le regole XHTML:
1 <img src="immagine.png" alt="testo" />
O seguendo la vecchie regole di HTML 4:
1 <img src="immagine.png" alt="testo">
3. Elementi provenienti da altri namespace: per questi elementi sono richiesti i tag ‘autochiudenti’.
Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML.
Maiuscolo, minuscolo
Una delle differenze principali rispetto alle regole XHTML riguarda l'uso del maiuscolo e del minuscolo per
definire un tag. In XHTML è obbligatorio usare il minuscolo. In HTML5 è consentito scrivere un tag usando
anche il maiuscolo:
1 <IMG src="immagine.png" alt="testo">
Casi particolari
Esistono alcune casistiche per le quali un tag classico può mancare della sua particella di apertura o di
chiusura; questo succede quando il browser è comunque in grado di determinare i limiti di operatività
dell’elemento. Gli esempi più eclatanti riguardano i tag ‘contenitori’, come head, body e html, che
possono essere omessi in toto a meno che non contengano un commento o del testo come istruzione
successiva. È quindi sintatticamente corretto scrivere un documento come segue:
1 <meta charset="utf-8">
2 <title>Pagina HTML5 Valida</title>
3 <p>Un paragrafo può non avere la particella di chiusura
4 <ol>
5 <li>e anche un elemento di lista
6 </ol>
Notiamo che, come mostrato nell’esempio, anche i tag p e li possono essere scritti omettendo la particella
di chiusura, a patto che l’elemento successivo sia all’interno di una cerchia di elementi definita dalle
specifiche. A fronte di queste opzioni di semplificazione è però errato pensare che la pagina generata dal
codice di cui sopra manchi, ad esempio, dell’elemento html; esso è infatti dichiarato implicitamente ed
inserito a runtime dallo user-agent.
Per un quadro dettagliato rimandiamo a questa sezione delle specifiche.
13 - 145
Attributi
Anche rispetto alle definizione degli attributi HTML5 consente una libertà maggiore rispetto a XHTML,
segnando di fatto un ritorno alla filosofia di HTML 4. In sintesi: non è più obbligatorio racchiudere i
valori degli attributi tra virgolette.
I casi previsti nella specifica sono 4.
Attributi 'vuoti': non è necessario definire un valore per l'attributo, basta il nome, il valore si ricava
implicitamente dalla stringa vuota. Un caso da manuale:
1 Secondo le regole XHTML:
2 <input checked="checked" />
3
4 In HTML5:
5 <input checked>
Attributi senza virgolette: è perfettamente lecito in HTML5 definire un attributo senza racchiudere il
valore tra virgolette. Esempio:
1 <div class=testata>
Attributi con apostrofo: il valore di un attributo può essere racchiuso tra due apostrofi (termine più
corretto rispetto a 'virgoletta singola'). Esempio:
1 <div class='testata'>
Attributi con virgolette: per concludere, è possibile usare la sintassi che prevede l'uso delle virgolette
per racchiudere il valore di un attributo. Il codice:
1 <div class="testata">
Semplificazioni
In direzione della semplificazione vanno anche altre indicazioni. Ci soffermiamo su quelle riguardanti due
elementi fondamentali come style e script. La sintassi tipica di XHTML prevede la specificazione di
attributi accessori come type:
1
<style type="text/css"> regole CSS... </style>
2
<script type="text/javascript" src="script.js"> </script>
3
In HTML5 possiamo farne a meno, scrivendo dunque:
1 <style> regole CSS... </style>
2 <script src="script.js"> </script>
Conclusioni
Come abbiamo sperimentato, la sintassi HTML5 si caratterizza per una spiccata flessibilità e semplicità
di implementazione. Le osservazioni che abbiamo snocciolato in questa lezione sono chiaramente valide a
patto di implementare la serializzazione HTML; ricordiamo infatti che le specifiche prevedono anche
l’utilizzo di una sintassi XML attraverso l’uso delle istruzioni:
1 <!doctype html>
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Infine, per una migliore leggibilità del codice sorgente, consigliamo di ricorrere il meno possibile all’utilizzo
di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.
14 - 145
Elementi disegnati per un web moderno
All’inizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse
spezzandole all’interno di una griglia fatta da infiniti <tr> e <td>: un attività noiosa, resa ancora peggiore
dalla scarsa qualità e flessibilità del risultato. Poi arrivarono i <div> e fu una vera e propria rivelazione;
finalmente un modello di costruzione del documento pensato per separare in modo chiaro i contenuti
tipici di una pagina web. Grazie alla commistione tra questo elemento e i CSS nacquero pagine con codici
HTML eleganti e leggibili come:
1 <html>
2 <head>
3 </head>
4 <body>
5
<div id="header">
6
--- Titolo e Testata --7
</div>
8
<div id="body">
9
<div id="menu">
10
--- Voci di Menu --11
</div>
12
<div id="main_content">
13
<div class="post">
14
--- Un Post --15
</div>
16
<div class="post">
17
--- Un altro Post --18
</div>
19
</div>
20 </div>
21 </body>
22 </html>
All’interno di un costrutto come questo è tutto molto semplice da interpretare: basta seguire il flusso dei
rientri di pagina facendosi guidare dai valori semantici attribuiti a id e class.
Passarono anni e il modello cominciò a mostrare le sue prime debolezze; in primo luogo ci si accorse che
da un lato non vi era una regola collettiva e quello che per uno sviluppatore era ‘body’ per l’altro poteva
benissimo essere ‘corpo’; inoltre si realizzò che né il browser né tantomeno i motori di ricerca avrebbero
mai potuto beneficiare di questa divisione semantica, proprio per colpa di quell’arbitrarietà che
permetteva a milioni di siti web di essere organizzati in strutture simili ma sempre leggermente diverse
tra loro e per questo non raggruppabili secondo schemi automatici. Emerse in questo modo uno dei più
grandi problemi dell’HTML4: l’incapacità di descrivere il significato delle informazioni di una
pagina web in un formato interpretabile da altri software. In un mondo sempre più caratterizzato
dall’interconnessione e dall’aggregazione su base semantica dei contenuti ci si adattò inventando e
condividendo convenzioni studiate per rappresentare eventi di calendario, persone e quant’altro;
nacquero così diversi microformati, come ad esempio hRecipe per le ricette:
1 <span class="hrecipe">
2
<span class="fn">Tisana alla liquirizia</span>
3
<span class="ingredient">2 cucchiai di Zucchero</span>
4
<span class="ingredient">20g Radice di liquirizia</span>
5
<span class="yield">2</span>
6
<span class="instructions">
7
Scaldare un pentolino con 200cl d’acqua fino a 95°C;
8
versare la radice di liquirizia;
9
lasciar macerare per 7 minuti;
10
zuccherare e servire.
11 </span>
12 <span class="duration">
13
<span class="value-title" title="PT90M"></span> 90 min
14 </span>
15 </span>
L’HTML5 nasce per gestire ed incanalare tutte queste problematiche; nelle prossime lezioni scopriremo
come beneficiare di nuovi tag disegnati appositamente per le più comuni strutture di contenuto e di
attributi utilizzabili per definire ulteriore contenuto semantico alle pagine. Ma per arrivare a questo prima
serve fare un po’ di pulizia...
15 - 145
Elementi e attributi non più previsti nelle specifiche
Le specifiche HTML5 sanciscono definitivamente la fine di tutta una serie di elementi e attributi che
mantengono validità formale solo per preservare la retrocompatibilità di pagine datate ma sono
espressamente vietati nella creazione di nuovi documenti.
I primi a subire questo esilio sono tutti quei costrutti funzionali alla parte di presentazione e caduti
ampiamente in disuso con l’introduzione dei fogli di stile. Stiamo parlando di elementi come: basefont,
big, center, font, s, strike, tt e u.
Ad essi si aggiunge una moltitudine di attributi più o meno noti, tra i quali ricordiamo: align e valign,
background, bgcolor, cellpadding, border, cellspacing e molti altri. In realtà alcuni tra i citati perdurano
solamente su specifici elementi, per una lista completa ed esaustiva consigliamo di visionare questa
pagina del W3C dedicata al tema.
Interessante notare come si sia deciso invece di mantenere elementi come i e b; trasformandoli, però, da
modificatori tipografici a semplici indicatori di porzioni di testo particolari e consentendone l’uso
solo come ultima risorsa.
La falce della semplificazione si è successivamente abbattuta su un piccolo elenco di elementi obsoleti:
acronym (sostituibile dal più comune abbr), applet (rimpiazzato da object), isindex (già arcaico in HTML4)
e infine dir, sfavorito nel confronto con ul.
Cadono, infine, anche tutti i tag che gravitano intorno al concetto dei frame, ritenuti dannosi per
usabilità e accessibilità: frame, frameset e noframes.
E con questi ultimi si chiude la lista degli elementi soppressi; in loro onore terminiamo la lezione con un
piccolo snippet che li omaggi:
1 <center>
2
<font color="blue" size="2">
3
<big>Addio</big>,
4
<s>monti sorgenti dall'acque, ed elevati al cielo;
5
cime</s> elementi di markup inuguali,
6
noti a chi è cresciuto tra voi,
7
e impressi nella sua mente,
8
non meno che lo sia l'aspetto de' suoi più familiari.
9
</font>
10 Liberamente adattato da: <acronym title="I Promessi Sposi">IPS</acronym>
11 </center>
16 - 145
Attributi globali
Di attributi globali (quelli cioè che si possono applicare a tutti gli elementi HTML) ce ne sono
sempre stati: basti pensare al classico ‘id’, disponibile da sempre sulla totalità degli elementi. HTML5
formalizza questa definizione e arricchisce lo sparuto gruppo con nuovi membri che, come intuibile,
possono essere applicati a un qualsiasi tag di queste specifiche. In questo capitolo dedicheremo qualche
paragrafo ad ognuno dei nuovi arrivati, alcuni dei quali, vedrete, sono decisamente interessanti.
Modificare il contenuto di una pagina: contenteditable
TinyMCE, CKEditor e WYMeditor sono solo tre di una lunga lista di librerie studiate per offrire uno
strumento di editing testuale su web che superi le classiche textarea. I risultati sono già ad oggi
eccellenti, vicini a prodotti desktop come Microsoft Word, ma le soluzioni implementate fanno tutte uso di
escamotage più o meno furbi per ottenere questo livello di interazione in quanto l’HTML 4 non prevede
alcun modo esplicito di generare controlli del genere.
Durante la stesura delle specifiche HTML5 questo problema è stato affrontato e si è deciso di sviluppare
un approccio comune al rich-editing di un documento re-introducendo un set di specifiche implementate
in sordina da Microsoft nella versione 5.5 di Internet Explorer. Questo lavoro ha portato alla creazione di
un nuovo attributo globale: contenteditable, che impostato a true su di un qualsiasi elemento lo rende
modificabile da browser; lo stesso destino subiscono tutti gli elementi in esso contenuti a meno che non
espongano un esplicito contenteditable=false.
Ma... cosa significa esattamente modificabile da browser? Che tipo di feedback visivo ci si dovrebbe
aspettare? E come si comporterebbe il markup a fronte delle modifiche? Sfortunatamente qui le specifiche
non sono troppo chiare e sanciscono semplicemente che qualsiasi cosa venga concessa all’utente il
risultato deve comunque restare conforme all’HTML5: questa libertà operativa ha prodotto comportamenti
diversi da browser a browser; ad esempio c’è chi traduce il tasto invio com un <br> e chi invece crea un
nuovo paragrafo con <p>. Parallelamente è disponibile anche un set di API utilissime per insistere sulla
zona modificabile con comandi attivati dall’esterno, come ad esempio da una toolbar. Un pulsante che
volesse attivare/disattivare il grassetto sulla selezione corrente dovrebbe invocare la seguente funzione:
1 document.execCommand('bold')
Prima di passare oltre sappiate che l’attributo contenteditable è stato applicato con valore true a
all’intera sezione precedente con l’esclusione di questo paragrafo, permettendovi così di editarla e
sperimentare l’interazione di questa nuova interessante caratteristica! (e se selezionate del testo e
cliccate qui, potrete renderlo grassetto!).
Menu contestuali associati ad un elemento: contextmenu
L’attributo globale contextmenu serve ad associare a un elemento un menu contestuale; questa
forma di interazione è poco comune sul web ma molto praticata sul desktop dove, ad esempio, su di una
cartella di sistema ci si aspetta di poter operare azioni quali ‘copia’, ‘elimina’ e ‘rinomina’. Vediamo un
esempio:
1 <img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg"
2 contextmenu="image_menu">
3 <menu type="context" id="image_menu">
4 <command label="Modifica il contrasto" onclick="contrastDialog();">
5 <command label="Negativo" onclick="negativo();">
6 </menu>
Cliccando con il tasto destro del mouse sull’immagine il browser dovrebbe mostrare un menu contenente
le due azioni disponibili. Purtroppo ad oggi non esiste ancora nessuna implementazione funzionante di
questa feature, che resta al momento relegata a semplice specifica.
Lʼattributo data-*
L’HTML5 predispone la possibilità di associare ad ogni elemento che compone la pagina un numero
arbitrario di attributi il cui nome può essere definito dall’utente sulla base di esigenze personali, a patto
che venga mantenuto il suffisso ‘data-’; ad esempio:
1 <img id="ombra"
2 class="cane"
3 data-cane-razza="mastino corso”
4 data-cane-eta="5"
5 data-cane-colore="nero"
6 src="la_foto_del_mio_cane.jpg">
17 - 145
È inoltre interessante notare come queste informazioni, che arricchiscono e danno valore semantico
all’elemento, siano accessibili anche attraverso un comodo metodo Javascript:
1 alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");
La fine del display:none in linea: hidden
L’attributo globale hidden è stato introdotto per offrire un’alternativa all’utilizzo del predicato
‘style="display:none"’ che ha subito una proliferazione incontrollata soprattutto a seguito della diffusione
di librerie Javascript come jQuery o Prototype. Un elemento marcato come hidden deve essere
considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.
Spellcheck
La quasi totalità dei browser oggi in commercio contiene un motore di verifica della sintassi
grammaticale. Le specifiche HTML5 introducono un meccanismo per abilitare o disabilitare il
controllo della sintassi su porzioni della pagina modificabili dall’utente. L’attributo in questione si
chiama spellcheck e, quando impostato a true, ordina al browser di attivare il proprio correttore
sull’elemento corrente e su tutti i suoi figli.
Laddove invece non venga impostata nessuna preferenza, le specifiche prevedono che il browser utilizzi
un proprio comportamento di default.
Altri attributi globali
Ci sono un paio di altri attributi globali introdotti dalle specifiche e non trattati in questa sede, draggable e
aria-*; entrambi sottendono un discorso che si estende ben al di là della semplice implementazione di
markup e verranno trattati più avanti nella guida.
Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:
1 accesskey, class, contenteditable, contextmenu, dir, draggable
2 hidden, id, lang, spellcheck, style, tabindex, title
Tabella del supporto sui browser
Attributi globali
contenteditable
contextmenu
data-*
draggable
hidden
spellcheck
5.5+
No
No
No
No
No
3.0+
No
No
3.5+
4.0+
2.0+
3.1+
No
5.0+
5.0+
Nightly build
No
2.0+
No
6.0+
5.0+
Nightly build
No
9.0+
No
No
No
Nightly build
No
Conclusioni
In questa lezione abbiamo appreso che la nuova configurazione di markup dell’HTML5 è stata studiata per
ovviare a tutti i problemi emersi in anni sviluppo di siti web e applicazioni con la precedente versione delle
specifiche. Nelle prossime lezione introdurremo il nuovo content model, pensato non più nella forma
binaria ‘block’ e ‘inline’ ma articolato in una serie di modelli di comportamento complessi ed interessanti.
18 - 145
Un nuovo content model
Non più solo div
Ecco come si potrebbe codificare l’esempio della lezione precedente utilizzando i nuovi elementi messi a
disposizione dall’HTML5:
1 <!doctype html>
2 <html lang="it">
3 <head>
4 </head>
5 <body>
6
<header>
7
--- Titolo e Testata --8
</header>
9
<nav>
10 --- Voci di Menu --11 </nav>
12 <article>
13 --- Un Post --14 </article>
15 <article>
16 --- Un altro Post --17 </article>
18 </body>
19 </html>
Come si può notare, i tag introdotti hanno un nome in strettissima attinenza con il proprio
contenuto; questo approccio risolve in modo elegante sia il problema dell’utilizzo dell’attributo class con
valore semantico, sia la riconoscibilità delle singole aree del documento da parte di un browser. Ma non è
tutto; l’introduzione di article, nav, header e altri tag che vedremo, impone anche sostanziose novità al
modo in cui lo user-agent deve comportarsi nell’interpretare questi elementi.
Contenuti in una bolla di sapone
Partiamo dal seguente esempio HTML4:
1 <html>
2 <body>
3 <h1>I diari di viaggio:</h1>
4 <h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
5 <h3>Giro turistico della Bretagna</h3>
6 <p>lorem ipsum..</p>
7 <h3>Alla scoperta del Kenya</h3>
9 <h3>Cracovia e la Polonia misteriosa</h3>
11 <p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p>
12 </body>
13 </html>
Se lo visualizziamo avremo un risultato assolutamente strutturato come questo:
Figura 3 (click per ingrandire) - Struttura del documento
19 - 145
Supponiamo ora di voler dividere i viaggi per continente. Con il modello attuale saremmo obbligati a
cambiare l’elemento h3 in h4 in modo da fare spazio alla nuova suddivisione:
1 <html>
2 <body>
3 <h1>I diari di viaggio:</h1>
4 <h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
5 <h3>Europa</h3>
6 <h4>Giro turistico della Bretagna</h4>
8 <h4>Cracovia e la Polonia misteriosa</h4>
10 <h3>Africa</h3>
11 <h4>Alla scoperta del Kenya</h4>
14 </body>
15 </html>
Questo accade perché la gerarchia delle intestazioni è assoluta rispetto all’intero documento e ogni tag
<h*> è tenuto a rispettarla. Nella maggior parte dei casi però questo comportamento è fastidioso in
quanto è molto comune avere a che fare con contenuti che, come articoli o commenti, vorremmo
avessero una struttura indipendente dalla loro posizione nella pagina. In HTML5 questo è stato reso
possibile definendo una nuova tipologia di content model, chiamato ‘sectioning content’, al quale
appartengono elementi come article e section. All’interno di tag come quelli appena citati la vita scorre
come in una bolla di sapone, quindi l’utilizzo di un <h1> è considerato relativo alla sezione in cui si trova.
Riprendiamo l’esempio precedente ed interpretiamolo in salsa HTML5:
20 - 145
1 <!doctype html>
2 <html>
3 <head>
4 <title>I diari di viaggio</title>
5 </head>
6 <body>
7 <header>
8
<hgroup>
9
<h1>I diari di viaggio:</h1>
10
<h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
11 </hgroup>
12 </header>
13 <section>
14 <h1>Europa</h1>
15
<article>
16
<h1>Giro turistico della Bretagna</h1>
17
<p>lorem ipsum..</p>
18
</article>
19
<article>
20
<h1>Cracovia e la Polonia misteriosa</h1>
21
22
</article>
23 </section>
24 <section>
25 <h1>Africa</h1>
26 <article>
27
<h1>Alla scoperta del Kenya</h1>
28
29 </article>
30 </section>
32 </body>
33 </html>
Molto meglio! Ora i singoli componenti di questo documento sono atomici e possono essere spostati
all’interno della pagina senza dover cambiare la loro struttura interna. Inoltre, grazie a queste divisioni, il
browser riesce a discernere perfettamente il fatto che l’ultimo paragrafo non appartenga al testo del
viaggio in Kenia.
Diamo prova dell’atomicità creando un blocco dedicato all’ultimo articolo inserito: ‘Un week-end a
Barcellona’:
1 <!doctype html>
2 <html>
3 <head>
4 <title>I diari di viaggio</title>
5 </head>
6 <body>
7 <header>
8
<hgroup>
9
<h1>I diari di viaggio:</h1>
10
<h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
11 </hgroup>
12 </header>
13 <article>
14 <h1>Un week-end a Barcellona</h1>
16 </article>
17
18 
Anche grazie a questo content model l’HTML5 introduce un nuovo e preciso algoritmo per il calcolo
dell’outline del documento. La vista ad outline, tipica nei software di word processing e ancora non
presente nei browser, è utilissima nella navigazione dei contenuti di una pagina. Sperimentiamo questa
feature installando un’apposita estensione per Chromium:
Figura 4 (click per ingrandire) - Vista ad outline del documento
21 - 145
È interessante notare come l’algoritmo non solo identifichi correttamente i vari livelli di profondità, ma per
ognuno di essi sappia anche recuperare il titolo adeguato. Nell’HTML5 è vitale che il design della pagina si
rispecchi in una outline ordinata e coerente, questa infatti è la miglior cartina tornasole possibile in merito
al corretto utilizzo delle specifiche: ad esempio, in una prima revisione della lezione, il codice HTML
precedente mancava dell’elemento hgroup, utile a raggruppare elementi che concorrono a formare un
titolo. L’errore è stato individuato e corretto proprio grazie alla visualizzazione di una outline errata:
Figura 5 (click per ingrandire) - Strutturazione corretta del documento
Concludiamo la trattazione di questo content model citando la presenza di alcuni elementi che, pur
seguendo le linee interpretative del 'sectioning content', devono essere ignorati dall'algoritmo di outline.
Tali tag sono definiti 'sectioning roots' ed il motivo della loro esclusione è legato al fatto che essi non
concorrono tanto alla struttura dei contenuti della pagina quanto all'arricchimento della stessa. Fanno
parte di questo elenco elementi come: blockquote, details, fieldset, figure e td. Seppur esclusi dall'outline
del documento, nulla vieta agli appartenenti di questo gruppo di avere una propria outline interna.
22 - 145
Panoramica sui content model e presentazione del primo progetto guida
Lo scopo di questa lezione è duplice: da un lato riallacciarsi al tema del sectioning content per offrire una
visione di ampio respiro in merito alle differenti tipologie di disposizione di contenuto offerte dall'HTML5,
dall'altro iniziare la stesura del primo progetto guida.
Una panoramica completa
Esistono altri content model oltre a quelli trattati nella lezione precedente, alcuni implicitamente presenti
anche nelle vecchie specifiche, altri nuovi di zecca, per una rappresentazione grafica rimando all'ottima
infografica dello stesso W3C, fra l'altro realizzata usando la sintassi SVG (provate a scorrere il mouse
sopra le varie aree dell'insieme).
Metadata content
Fanno parte di questa categoria tutti gli elementi utili alla definizione del documento nel suo
insieme: a livello di presentazione o di funzionamento.
Tag: base, command, link, meta, noscript, script, style, title.
Sectioning content
Ne abbiamo appena parlato: il gruppo contiene tutti quegli elementi studiati per ospitare contenuti
atomici e semanticamente ordinati. È importante utilizzare almeno un appartenente alla categoria
heading content all’interno di ognuno di questi tag, questo anche per non avere un outline popolato da
voci senza titolo (vedi immagine).
Tag: article, aside, nav, section.
Figura 6 (click per ingrandire) - Visualizzazione della struttura del documento
Heading content
Tutti gli appartenenti a questo gruppo servono per definire titoli. Interessante notare come se la
presenza di uno di questi elementi non sia associata ad un sectioning content questo venga definito
implicitamente.
Tag: h1, h2, h3, h4, h5, h6, hgroup
Phrasing content
Incorpora il testo del documento così come tutti i modificatori tipografici e visuali dello stesso.
Tag: a (solo se contiene phrasing content a sua volta), abbr, area (se figlio di un elemento map), audio, b,
bdi, bdo, br, button, canvas, cite, code, command, datalist, del (solo se contiene phrasing content a sua
volta), dfn, em, embed, i, iframe, img, input, ins (solo se contiene phrasing content a sua volta), kbd,
keygen, label, map (solo se contiene phrasing content a sua volta), mark, math, meter, noscript, object,
23 - 145
output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var,
video, wbr.
Embedded content
Ne fanno parte tutti quegli elementi che, come il nome del gruppo suggerisce, incorporano nella
pagina oggetti esterni.
Tag: audio, canvas, embed, iframe, img, math, object, svg, video.
Interactive content
Questa categoria comprende tutto ciò specificatamente studiato per interagire con l’utente.
Tag: a, audio (con l’attributo controls presente), button, details, embed, iframe, img (con l’attributo
usemap presente), input (con l’attributo type diverso da hidden), keygen, label, menu (con l’attributo
type="toolbar"), object (con l’attributo usemap presente), select, textarea, video (i con l’attributo controls
presente).
Come avrete notato ogni elemento può appartenere ad uno o più content models, anche a seconda della
sua configurazione degli attributi. Oltre ai gruppi citati, che sono i principali, va ricordato flow, che
raggruppa la quasi totalità degli elementi e alcuni gruppi creati specificatamente per i controlli dei form,
che vedremo più avanti.
Progetto guida - nel tag HEAD
Cogliamo l’occasione di questa panoramica alla struttura dell’HTML5 per gettare le prime fondamenta del
progetto guida: in questo capitolo vedremo come impostare e strutturare il contenitore della pagina ed il
tag head. Creiamo un file index.html ed iniziamo ad inserire i primi elementi:
1 <!doctype html>
2 <html lang="it">
3 <head>
4 <title>We5! Il blog della guida HTML5</title>
5 </head>
6 </html>
Fin qui, eccezion fatta per il doctype, nessuna differenza rispetto alla versione 4 delle specifiche; andiamo
avanti aggiungendo alcuni tag meta e link:
...
1
<head>
2
<title>We5! Il blog della guida HTML5</title>
3
<link rel="stylesheet" href="monitor.css" media="screen">
4
<link rel="stylesheet" href="printer.css" media="print">
5
<link rel="stylesheet" href="phone_landscape.css" media="screen and (max-device-width: 480px)
6
and (orientation: landscape)">
7
<link rel="stylesheet" href="phone_portrait.css"
8
media="screen and (max-device-width: 480px) and (orientation: portrait)">
9
</head>
10
...
11
Incuriositi dalla strana sintassi degli attributi media degli ultimi due <link>? State osservando una tipica
media query: il CSS viene interpretato solamente se le condizioni dell’espressione sono valutate come
vere dallo user agent. Le media query, profetizzate già nel 1999, consentono di identificare il corretto CSS
per un dato device con un incredibile livello di dettaglio, alcuni esempi:
1 
2 <link rel="stylesheet" href="progressive.css" media="tv and (scan: progressive)">
3 
4 <link rel="stylesheet" href="printer.css" media="print and (min-resolution: 1000dpi)">
5 
6 <link rel="stylesheet" href="retina.css" media="screen and (-webkit-min-device-pixel- ratio: 2)">
7 
8 <link rel="stylesheet" href="mono.css" media="screen and (monochrome)">
Bene, completiamo questo capitolo aggiungendo icone e charset:
24 - 145
1 <head>
3 
4 <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif">
5 <link rel="icon" href="iphone.png" sizes="57x57" type="image/png">
6 <link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml">
7 </head>
Come potete notare è ora possibile specificare un attributo sizes per ogni icona, in questo modo lo user
agent può liberamente scegliere quale icona abbia le dimensioni più adatte. Ci sono due motivi che
giustificano l’inserimento della direttiva ‘charset’ in questo progetto: in primo luogo la nuova sintassi è
molto più succinta della passata, seppur ancora valida:
1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
In seconda istanza è intenzione dell’autore sottolineare come sussistano reali rischi di sicurezza legati
all’assenza di questa direttiva.
Dalla prossima lezione analizzeremo nel dettaglio i singoli elementi che concorrono alla costituzione della
nuova impalcatura semantica del linguaggio.
25 - 145
Header
Funzioni e dati tecnici
Il tag header serve a rappresentare "un gruppo di ausili introduttivi o di navigazione". Tale definizione,
seppure apparentemente vaga, contiene in sé i concetti chiave per comprendere appieno la funzione di
questo tag:
1.
2.
L'elemento <header> è un contenitore per altri elementi.
L'elemento <header> non va confuso con quella che è la testata/intestazione principale di un
documento (quella che oggi si definisce in genere con il tag <h1>).
3. La natura e gli scopi dell'elemento <header> non dipendono dalla sua posizione nel documento,
ma dai suoi contenuti (ausili alla navigazione o elementi introduttivi).
4. Il suo uso non è obbligatorio e in alcuni casi può risultare superfluo se non utilizzato in maniera
appropriata.
1 <header>
2 <h1>Questo è un titolo</h1>
3 <h2>Questo è un sotto-titolo</h2>
4 [...]
5 </header>
Header: esempi concreti
Riprendendo il nostro progetto guida, dove nella lezione precedente abbiamo definito il contenuto
dell'<head>:
1 <head>
2
<meta charset="utf-8">
3
4
<title> We5! Il blog della guida HTML5 </title>
5
6
<link rel="stylesheet" href="monitor.css" media="screen">
7
<link rel="stylesheet" href="printer.css" media="print">
8
<link rel="stylesheet" href="phone_landscape.css"
9
media="screen and (max-device-width: 480px) and (orientation: landscape)">
10 <link rel="stylesheet" href="phone_portrait.css"
11
media="screen and (max-device-width: 480px) and (orientation: portrait)">
12
13 <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif">
14 <link rel="apple-touch-icon" href="iphone.png" sizes="57x57" type="image/png">
15 <link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml">
16 </head>
A questo punto possiamo iniziare a comporre il <body> del nostro documento partendo proprio con il tag
<header>, che con l'elemento <hgroup> definisce il titolo principale del documento (del sito) e la
cosiddetta tagline:
1 <header>
2 <hgroup>
3
<h1>We5! Il blog della guida HTML5</h1>
4
<h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2>
5 </hgroup>
6 </header>
Ma header non deve contenere necessariamente solo titoli <hn>! Se titolo e sottotitolo principali sono
certamente elementi introduttivi ai contenuti successivi, è naturalmente un ausilio di navigazione una
lista di link che andrà a formare la barra di navigazione principale del sito. Ecco come possiamo
completare la struttura del nostro primo <header>:
26 - 145
1 <header>
2 <hgroup>
3
4
5 </hgroup>
6 <nav>
7
<h1>Navigazione:</h1>
8
<ul>
9
<li><a href="/home">Home</a></li>
10
<li><a href="/about">Gli autori</a></li>
11
<li><a href="/refactoring">Il progetto four2five</a></li>
12
<li><a href="/archives">Archivio</a></li>
13 </ul>
14 </nav>
15 </header>
Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel
nostro progetto:
Figura 8 - Struttura del documento: primo header
Abbiamo inserito una sezione di navigazione (<nav> </nav>) introdotta da un elemento <h1> e
strutturata con una lista non ordinata.
In realtà, il menu di navigazione non deve essere necessariamente inserito nell'<header>, nel nostro
esempio non poteva essere fatto altrimenti ma esistono numerosi tipi di layout in cui il menu di
navigazione può essere facilmente slegato dagli elementi introduttivi di intestazione del documento.
Il template del nostro progetto guida, lo accennavamo nelle precedenti lezioni, è relativo ad un blog. Nel
corpo del documento, ad un certo punto, trova posto una sezione che ospita i contenuti principali della
pagina, i post. Per definire semanticamente la sezione useremo il tag <section>; ciascun post sarà
definito a livello strutturale da un tag <article>:
1 <section>
2 <h1>L'ultimo post</h1>
3 <article>
4 [...]
5 </article>
6 </section>
Si noti, innanzitutto, come il tag <h1> che fa da titolo principale alla sezione non sia racchiuso in un
27 - 145
elemento <header>. Ribadiamo: non è obbligatorio inserire i titoli <hn> all'interno di un contenitore
<header>.
A questo punto, dobbiamo definire due elementi fondamentali per la struttura di un post di blog: il titolo e
la data. Sono certamente ausili introduttivi, secondo la definizione da cui siamo partiti. é più che legittimo
e sensato, pertanto, racchiuderli in un tag <header>:
1 <section>
2 <h1>L'ultimo post</h1>
3 <article>
4
<strong><header>
5
<time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time>
6
<h2>Nuove scoperte sul tag video!</h2>
7
</header></strong>
8
<p>
9
[...]
10 </p>
11 </footer>
12
[...]
13 </footer>
14 </article>
15 </section>
Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente:
Figura 9 - Struttura del documento: header degli articoli
I due scenari mostrati rendono bene l'idea rispetto agli utilizzi tipici dell'elemento <header>. La specifica
suggerisce come altri contesti d'uso la tavola dei contenuti di una sezione, un form di ricerca o i loghi più
rilevanti presenti nel documento.
Nella prossima lezione capiremo come utilizzare l'elemento <footer> e quale è la sua rilevanza semantica
all'interno di un template.
28 - 145
Nuovi tag semantici e strutturali
<header>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
29 - 145
Footer
L'elemento <footer> deve contenere in genere informazioni sulla sezione che lo contiene come:
•
•
•
•
i dati di chi ha scritto i contenuti;
collegamenti ai documenti correlati;
i dati di copyright;
e così via...
Riguardo il suo apporto semantico ad una pagina web sembra essere tutto chiaro, ma più complesso è il
suo utilizzo a livello pratico:
•
•
Non necessariamente deve essere inserito solo alla fine di un documento.
Quando contiene intere sezioni, esse rappresentano: appendici, indici, note, accordi di licenza e
altri contenuti del genere.
•
•
Non introduce una nuova sezione e quindi non è rilevante per l'outliner.
All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo
stesso elemento.
1 <footer>
2 <small>©2011 Autore contenuto. Design by Designer sito </small>
3 </footer>
Footer: esempi concreti
Riprendendo il nostro progetto guida, dopo aver definito definito il contenuto dell'<header>, possiamo
vedere come il <footer> chiuda il blog distaccandosi dalle altre sezioni in modo molto naturale,
racchiudendo al proprio interno una lista che aggiunge informazioni riguardo l'autore della pagina e la
data del suo ultimo aggiornamento; infine il tag <small> ridefinito nella specifica dell'HTML 5 racchiude il
copyright della pagina:
<footer>
1
<dl>
2
<dt>Creato da</dt>
3
<dd><address><a
href="mailto:[email protected]">Sandro
4
Paganotti</a></address></dd>
5
<dt>Ultimo aggiornamento</dt>
6
<dd><time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time></dd>
7
<dd>
8
</dl>
9
<small>Tutti i contenuti sono prottetti dalla licenza creative commons</small>
10
</footer>
nostro progetto (figura 1):
Figura 10 - Struttura del documento: il footer principale
30 - 145
Così come l'intero documento, ogni articolo del nostro blog avrà un <footer> contenente il nome
dell'autore ed altre eventuali informazioni aggiuntive:
<section>
1
<h1>L'ultimo post</h1>
2
<article>
3
<header>
4
[...]
5
</header>
6
<p>
7
[...]
8
</p>
9
<footer>
10
<dl>
11
<dt>autore:</dt>
12
<dd><address><a
13
14
<dt>categoria: </dt>
15
<dd><a href="categoria/multimedia">multimedia</a>,</dd>
16
<dt>tags:
</dt>
17
<dd><a href="tags/video">video</a>,</dd>
18
<dd><a href="tags/canvas">canvas</a>,</dd>
19
<dt>permalink: </dt>
20
<dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd>
21
<dt>rank:</dt>
22
<dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd>
23
</dl>
24
</footer>
25
</article>
26
</section>
È da notare la scelta di inserire le informazioni riguardanti l'autore dell'articolo all'interno del tag <dl>;
infatti nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati e quindi
semanticamente corretto all'interno del nostro <footer>.
Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente, tutte le informazioni
contenute nel <footer> per comodità abbiamo deciso di chiamarle metadati:
Figura 11 - Struttura del documento: footer degli articoli
31 - 145
L'elemento <footer> potrebbe essere inserito anche all'inizio di un documento subito dopo il <body>
oppure all'apertura di un tag <article> ma in questi casi non dovrebbe contenere elementi introduttivi
riguardo il contenuto della sezione che lo contiene; il suo uso in questa posizione potrebbe essere dovuto
solamente a ragioni pratiche come ad esempio la duplicazione del <footer> in fondo alla pagina quando i
contenuti della stessa sono molto lunghi:
1 <body>
2 <footer>
3 <a href="#indice">Torna all'indice</a>
4 </footer>
5 <section>
6 [Contenuti molto lunghi...]
7 <section>
8 <section>
10 <section>
11 <section>
13 <section>
14 <footer>
15 <a href="#indice">Torna all'indice</a>
16 </footer>
17 </body>
Nella prossima lezione parleremo del tag <section> e della sua importanza nel sezionare la pagina in
blocchi semanticamente distinti.
<footer>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
32 - 145
Section
Il tag <section>, secondo la definizione presente nella specifica HTML5, rappresenta una sezione
generica di un documento o applicazione. L'elemento <section>, in questo contesto, individua un
raggruppamento tematico di contenuti,ed in genere contiene un titolo introduttivo.
Vediamo quindi quali sono i punti fondamentali da ricordare riguardo il suo utilizzo:
1.
2.
3.
l'elemento <section> non deve essere utilizzato in sostituzione del <div> per impostare
graficamente la pagina; inoltre è fortemente consigliato utilizzare i <div> anche quando risultano
più convenienti per gli script;
l'elemento <section> non deve essere preferito all'elemento <article> quando i contenuti
possono essere ripubblicati anche su altri siti;
l'elemento <section> e l'elemento <article> non sono indipendenti ed esclusivi: possiamo avere
sia un <article> all interno di un <section> che viceversa.
1 <article>
2
<section>
3
<h1>Titolo 1</h1>
4
<p>Testo correlato al titolo 1.</p>
5
</section>
6
<section>
7
<h1>Titolo 2</h1>
8
<p>Testo correlato al titolo 2.</p>
9
</section>
10 </article>
L'elemento <section> può essere utilizzato in combinazione con l'attributo cite attraverso il quale è
possibile specificare l'url dalla quale si stanno riportando i contenuti.
Section: esempi concreti
Come abbiamo visto nei capitoli precedenti, il codice del nostro progetto inizia a prendere una forma più
chiara e definita: infatti, dopo aver compreso l'utilità semantica dell'<header> e del <footer>, capiamo
come utilizzare l'elemento <section> all'interno del nostro blog.
Per strutturare la pagina raggruppando i contenuti correlati, in ordine decrescente incontriamo le prime
due grandi macrosezioni del blog: "l'ultimo post" e "i post meno recenti" contenuti quindi in due
<section>:
1 <section>
2
3
<article>
4
[contenuto del post...]
5
<section>
6
[commenti...]
7
</section>
8
</article>
9 </section>
10 <section>
11
<h1>Post meno recenti</h1>
12
<article>
13
14
</article>
15
<article>
16
17
</article>
18
<article>
19
20
</article>
21 </section>
nostro progetto:
Figura 12 - Struttura del documento: sezioni principali
33 - 145
Nel nostro progetto le <section>, oltre a poter raggruppare i vari <article>, sono presenti anche
all'interno del primo <article> per suddividere i commenti dal contenuto del post. La sezione dei
commenti a sua volta contiene un'altra sezione contenente il form per l'inserimento di un nuovo
commento:
1 <article>
2
3
<section>
4
<article>
5
[commento1...]
6
</article>
7
<article>
8
[commento2...]
9
</article>
10
<article>
11
[commento3...]
12
</article>
13
<section>
14
[Inserisci un nuovo commento...]
15
</section>
16
</section>
17 </section>
18 </article>
In questo modo il post è diviso in maniera molto netta rispetto ai propri contenuti solo con l'ausilio dei tag
HTML5, separando quindi i commenti che sono una sezione aggiuntiva eventualmente anche eliminabile
dall'argomento principale trattato all'interno dell'articolo.
Lo schema dell'articolo analizzato è quindi il seguente:
Figura 13 - Struttura del documento: suddivisione semantica del post
34 - 145
Il tag <section> rappresenta un elemento che viene considerato una sezione a sé stante dall'outliner e
quindi un blocco con dei contenuti univoci che necessitano di un titolo (<hN>) che li riassuma. Come
vedremo nelle prossime lezioni esistono anche altri elementi nelle specifiche HTML5 che sono considerati
"contenitori di sezionamento dei contenuti".
<section>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
35 - 145
Article
Il tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione o sito;
infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in
diverse pagine.
Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, l'articolo di un blog, un
commento, un widget interattivo, o qualsiasi cosa che abbia un contenuto indipendente.
Prima di vedere un esempio concreto bisogna chiarire alcuni concetti riguardo il suo utilizzo:
1.
2.
3.
4.
quando gli elementi <article> sono nidificati, gli <article> interni rappresentano gli articoli che
sono in linea di principio relativi al contenuto dell'<article> esterno. Ad esempio, un blog che
accetta commenti dagli utenti potrebbe rappresentarli come <article> figli annidati all'interno
dell'elemento padre <article>;
le informazioni relative all'autore dell'<article> non devono essere replicate all'interno degli
elementi nidificati all'interno dello stesso;
l'elemento <time> con l'attributo pubdate può essere utilizzato per definire la data di
pubblicazione dell'<article>;
l'elemento <section> e l'elemento <article> non sono indipendenti ed esclusivi: possiamo avere
sia un <article> all interno di un <section> che viceversa.
1 <article>
2
<header>
3
<h1>Titolo articolo</h1>
4
<time pubdate datetime="2011-10-09T14:28-08:00"></time></p>
5
</header>
6
<p>Contenuto dell'articolo</p>
7
<footer>
8
<p>Informazioni riguardo l'autore</p>
9
</footer>
10 </article>
In sostanza, anche se nelle specifiche non è espresso, l'elemento <article> rappresenta una forma
particolare di <section>.
Article: esempi concreti
Nella lezione precedente abbiamo diviso i contenuti centrali del blog che stiamo costruendo in due
<section>. All'interno della prima <section> possiamo trovare diversi tag <article>: il primo che
incontriamo è l'articolo vero e proprio con tanto di <header> contenente il titolo dell'articolo e la data di
pubblicazione e <footer> che all'interno di un <dl> raccoglie i metadati riguardanti l'autore.
All'interno dell'<article> padre sono annidati ulteriori <article> contenenti i commenti all'articolo
racchiusi in una <section> che li rende semanticamente separati dal contenuto principale. Così come i
commenti, anche il form che permette di inserire un'ulteriore commento è inserito all'interno di una
<section>. Possiamo quindi facilmente immaginare come il contenuto del nostro <article> possa essere
citato o ripubblicato in altri blog indipendentemente dai commenti che ha ricevuto.
Ecco quindi il codice dell'<article> sopra descritto:
1 <section>
2 <h1>L'ultimo post</h1><article>
3
<header>
4
5
6
</header>
7
<p>
8
Attraverso un utilizzo sapiente del tag canvas è possibile leggere uno stream
9
di dati proveniente da un tag video e <mark>manipolarlo in tempo reale</mark>.
10
</p>
11
<footer>
12
<dl>
13
<dt>autore: </dt>
14
<dd><address><a
36 - 145
15
16
17
<dt>tags:
</dt>
18
19
20
21
22
<dt>rank:</dt>
23
24
</dl>
25
</footer>
26
<section>
27
<h3>Commenti</h3>
28
<article>
29
<h4>
30
31
Angelo Imbelli ha scritto:
32
</h4>
33
<p>C'è un bell'esempio sulla rete: effetto ambi-light!</p>
34
<footer>
35
<address><a href="mailto:[email protected]">Angelo Imbelli</a></address>
36
</footer>
37
</article>
38
<article>
39
<h4>
40
<time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time>
41
Sandro Paganotti ha scritto:
42
</h4>
43
<p>Bellissimo! Grazie per la segnalazione!</p>
44
<footer>
45
<address><a
46 Paganotti</a></address>
47
</footer>
48
</article>
49
<section>
50
<h4>Inserisci un nuovo commento:</h4>
51
<form>
52
[ campi form per inserire un nuovo commento]
53
</form>
54
</section>
55
</section>
56
57 </article>
</section>
Nel seguente schema abbiamo realizzato graficamente come si presenta il nostro articolo
morfologicamente:
Figura 14 - Struttura del documento: suddivisione semantica degli articoli
37 - 145
C'è da notare che anche se il tag <article> rappresenta un elemento che viene considerato una sezione
a sé stante dall'outliner e quindi un blocco con dei contenuti unici e un titolo univoco (quindi per ogni
blocco avremmo potuto utilizzare un titolo racchiuso in un <h1>), abbiamo preferito rispettare comunque
l'ordine decrescente per i titoli in modo da rendere i contenuti accessibili anche agli screen reader che al
momento non hanno ancora implementato l'algoritmo outliner.
Nella prossima lezione parleremo del tag <nav> e della sua fondamentale importanza all'interno di una
pagina in HTML5.
<article>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
38 - 145
Nav
Il tag <nav> è uno degli elementi introdotti nelle specifiche HTML5 di più facile comprensione. Infatti,
rappresenta una sezione di una pagina che contiene link (collegamenti) ad altre pagine o a parti
interne dello stesso documento; quindi, in breve, una sezione contenente link di navigazione.
A questo punto potremmo potremmo porci una domanda: come mai un elemento così scontatamente
fondamentale è stato introdotto solamente adesso? La risposta potrebbe essere che, così come per i tag
visti nelle precedenti lezioni, finalmente si è cercato di incentivare l'uso di standard condivisi proponendo
elementi che possano aiutare gli sviluppatori proprio perché molto vicini ai modelli mentali oramai
assimilati dagli esperti e di semplice comprensione per i novizi del mestiere.
Per poter utilizzare correttamente l'elemento <nav> dobbiamo ricordare i seguenti punti:
1.
2.
3.
solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per
l'elemento <nav>;
i link a pie' di pagina e le breadcumb non devono essere inseriti in una sezione <nav>;
l'elemento <nav> non sostituisce i link inseriti in elementi come gli <ul> o gli <ol> ma deve
racchiuderli.
1 <nav>
2 <ul>
3
<li>Questo
4
<li>Questo
5
<li>Questo
6
<li>Questo
7
[...]
8 </ul>
9 </nav>
è
è
è
è
un
un
un
un
link</li>
link</li>
link</li>
link</li>
Nav: esempi concreti
Prima di spiegare in che modo l'elemento <nav> può essere inserito nel progetto che abbiamo preso
come base, riassumiamo brevemente i tag spiegati nelle lezioni precedenti:
•
Con l'elemento <header> abbiamo indicato il titolo introduttivo del blog più i titoli dei singoli
articoli.
•
Con il <footer> abbiamo racchiuso le informazioni relative agli autori dei contenuti, i metadati e il
copyright.
•
Con l'elemento <section> abbiamo strutturato la parte centrale della pagina dividendola in due
sezioni semanticamente distinte.
•
Infine abbiamo utilizzato <article> per racchiudere i contenuti degli articoli.
A questo punto non possiamo che inserire i link presenti nell'<header> all'interno del tag <nav>:
1 <header>
2 <hgroup>
3
4
5 </hgroup><strong>
6 <nav>
7
8
<ul>
9
10
11
12
13 </ul>
14 </nav></strong>
15 </header>
Da notare la presenza del titolo <h1> che serve a specificare più dettagliatamente la funzione del nostro
blocco di link e a conferirgli un titolo valido anche per l'outliner. Il tag <nav>, infatti, rappresenta un
elemento che viene considerato una sezione a sé stante dall'outliner e quindi un blocco con dei contenuti
univoci che necessitano di un titolo che li riassuma.
39 - 145
nostro progetto:
Figira 15 - Struttura del documento: visualizzazione grafica del tag nav
In realtà (come già specificato nel paragrafo <header>) il menu di navigazione non deve essere
necessariamente inserito nel <header>, nel nostro esempio non poteva essere fatto altrimenti ma
esistono numerosi tipi di layout in cui il menu di navigazione può essere facilmente slegato dagli elementi
introduttivi di intestazione del documento.
Nel nostro esempio l'elemento <nav> è presente anche nella colonna laterale del blog (<aside>) e
racchiude un menu che ha come link le categorie nelle quali sono inseriti i vari articoli:
1 <aside>
2
<h1>Sidebar</h1>
3
<section>
4
<h2>Ricerca nel form:</h2>
5
<form>
6
[form di ricerca dei contenuti...]
7
</form>
8
</section>
9
<strong><nav>
10
<h2>Categorie</h2>
11
<ul>
12
<li><a href="/categoria/multimedia">multimedia</a></li>
13
<li><a href="/categoria/text">marcatori testuali</a></li>
14
<li><a href="/categoria/form">forms</a></li>
15
</ul>
16 </nav></strong>
17 </aside>
Per comprendere quale è la funzione dell'elemento <aside> che contiene il menu laterale non ci resta
quindi che leggere la prossima lezione.
40 - 145
<nav>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
41 - 145
Aside
L'elemento <aside> rappresenta una sezione di una pagina costituita da informazioni che sono
marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero
essere considerate distinte da quest'ultimo. Questo è ciò che viene indicato nelle specifiche HTML5, ma è
facile immaginare l'utilità del tag <aside> semplicemente pensandolo come un contenitore di
approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via.
1 <aside>
2 <h1>Questi sono dei contenuti di approfondimento marginali rispetto al contenuto principale</h1>
3 <nav>
4
<h2>Link a pagine correlate al contenuto</h2>
5
<ul>
6
<li>Informazione correlata al contenuto</li>
7
8
9
</ul>
10 </nav>
11 <section>
12 <h2>Pubblicità</h2>
13 [immagini pubblicitarie]
14 <section>
15 </aside>
Aside: esempi concreti
Ritornando al nostro progetto guida, dopo aver definito il contenuto dell'elemento <nav>, possiamo
analizzare la parte di codice in cui abbiamo utilizzato il tag <aside>:
<aside>
1
<h1>Sidebar</h1>
2
<section>
3
<h2>Ricerca nel form:</h2>
4
<form name="ricerca" method="post" action="/search">
5
<label> Parola chiave:
6
<input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword"
7
required
maxlength="50">
8
</label>
9
<input type="submit" value="ricerca">
10
</form>
11
</section>
12
<nav>
13
<h2>Categorie</h2>
14
<ul>
15
<li><a href="/categoria/multimedia">multimedia</a></li>
16
<li><a href="/categoria/text">marcatori testuali</a></li>
17
<li><a href="/categoria/form">forms</a></li>
18
</ul>
19
</nav>
20
</aside>
nostro progetto:
Figura 16 - Struttura del documento: visualizzazione grafica del tag aside
42 - 145
Come possiamo notare, il form per la ricerca di parole chiave e i link alle categorie presenti nel nostro blog
non sono informazioni particolarmente rilevanti per il contenuto centrale della nostra pagina, pertanto
possiamo facilmente separarli con l'elemento <aside> che li qualifica come contenuti marginali.
Nel nostro caso abbiamo utilizzato un <aside> per contenere la colonna sinistra del blog, ma in realtà,
visto che in diversi siti va di moda la presenza di footer molto grossi con diversi link, consigliamo di
utilizzare l'elemento <aside> in combinazione con il tag <nav> che potrebbe essere la soluzione
migliore per questa tipologia di contenuti dato che, come abbiamo potuto constatare nella lezione
dedicata al footer, ciò non è possibile farlo all'interno del tag <footer>.
Così come gli elementi <article>, <section> e <nav> anche l'<aside> appartiene alla categoria dei
"contenitori di sezionamento dei contenuti" in quanto per l'outliner necessita di un titolo che riassuma i
propri contenuti.
Ricordiamo però che non è obbligatorio inserire un titolo per gli elementi che vengono considerati delle
sezioni a sé stanti dall'outliner, infatti in questo caso queste sezioni rimarrebbero senza titolo ma non
genererebbero nessun errore di validazione.
Vediamo quindi ora che abbiamo completato la struttura del blog come è l'outline del nostro documento
Outline.
Nella prossima lezione comprenderemo come usare l'elemento <hgroup> e la sua importanza per
l'outline di un documento in HTML5.
<aside>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
43 - 145
Hgroup
L'elemento <hgroup> rappresenta l'intestazione di una sezione. L'elemento viene utilizzato per
raggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titoli alternativi o
slogan.
1 <hgroup>
2 <h1>Questo è il titolo</h1>
3 <h2>Questo è un sottotitolo</h2>
4 </hgroup>
La vera importanza del tag <hgroup> è che maschera l'outline dell'elemento padre che lo contiene;
infatti, l'algoritmo dell'outliner riconosce come un titolo solamente l'heading con il valore più alto e
considera tutti gli altri elementi sottotitoli.
Esempio:
<article datetime="2010-11-22" pubdate >
1
<header>
2
<strong> <hgroup>
3
<h2>Le prospettive per il futuro del web</h2>
4
<h1>L'HTML 5 rivoluzionerà il mondo del web</h1>
5
</hgroup></strong>
6
</header>
7
<p>Presto il web sarà pieno di siti e applicazioni che saranno in grado di mettere in crisi le più
8
grandi case di desktop application...</p>
9
<footer>
10
<p>Pinco pallino</p>
11
</footer>
12
</article>
Se facessimo l'outline della pagina HTML contenente questo <article> ci restituirebbe come titolo della
sezione solamente l'<h1> contenuto nell'<hgroup> (non considerando l'<h2> anche se posto prima nel
codice) poiché è il tag con il valore più alto all'interno della sezione. Senza l'elemento <hgroup> i due
titoli verrebbero considerati entrambi sullo stesso livello d'importanza come titoli dell' <article>.
Nella prossima lezione parleremo del tag <mark> e della sua utilità nell'evidenziare parti particolarmente
importanti del testo.
<hgroup>
9.0+ 3.0+ 3.1+ 5.0+ 10.0+
44 - 145
Mark
L'elemento <mark> rappresenta una parte di un testo segnato o evidenziato all'utente a causa
della sua rilevanza anche in un altri contesti. Esso, in un testo in prosa, indica un punto culminante che
non era originariamente presente, ma che è stato aggiunto per attirare l'attenzione del lettore su una
parte del testo che potrebbe non essere stata considerata rilevante dall'autore originale quando il
contenuto è stato scritto.
Questa definizione abbastanza complessa in realtà può essere semplificata di molto chiarendoci le idee
con un esempio: immaginiamo di cercare una determinata parola chiave in diverse pagine web e che la
parola che abbiamo cercato nel motore di ricerca, ci venga evidenziata all'interno della pagina che
andiamo a visualizzare; ciò che abbiamo appena descritto è la situazione ideale per l'utilizzo del tag
<mark> poiché con quest'ultimo dobbiamo racchiudere la parola ricercata segnalandola graficamente
all'utente.
1 <p>Senza <mark>plug in</mark> di terze parti il web potrebbe diventare
2 per noi sviluppatori più democratico; con le nuove API HTML5 non abbiamo più bisogno
3 di diversi <mark>plug in</mark> di terze parti che sino ad ora erano indispensabili
4 per i contenuti multimediali</p>
Allo stato attuale non esiste un tag HTML standard utilizzato per evidenziare le parole chiave agli utenti
che utilizzano i motori di ricerca per navigare: Google utilizza il tag <em>, Bing il tag <strong>, Yahoo il
tag <b> e così via. Si spera che con l'introduzione dell'elemento <mark> le cose possano cambiare.
Nella prossima lezione parleremo del tag <time>, un'altra delle novità dell'HTML5.
<mark>
9.0+ 4.0+ 5.0+ 5.0+ 11.0+
45 - 145
Time e gli attributi pubdate e datetime
L'elemento <time> rappresenta il tempo su un orologio di 24 ore, o una data precisa nel
calendario Gregoriano accompagnata opzionalmente con un orario e una differenza di fuso orario.
Questo elemento è inteso come un modo moderno per codificare le date e gli orari in maniera leggibile
anche per i computer. Ad esempio, i browser saranno in grado di offrire la possibilità di aggiungere
promemoria per i compleanni o gli eventi in programma in una web application che funziona da
calendario.
1 <p>Oggi pomeriggio penso che sarò lì per le <time>15:00</time></p>
Prima di inserire l'elemento <time> nelle nostre pagine in HTML5 dobbiamo comprendere quali sono i
contesti in cui è sconsigliato utilizzarlo:
•
non bisogna inserire nel tag <time> le date che non possono essere determinate con precisione;
ad esempio: "un giorno nel lontano inverno del '68","da quando è nato il primo uomo"...;
•
non bisogna inserire nel tag <time> le date prima dell'introduzione del calendario Gregoriano.
L'elemento <time> può possedere l'attributo pubdate che è di tipo booleano; la sua presenza indica che
la data presente nel tag <time> è anche la data nella quale è stato scritto l'<article> padre più vicino, e
nel caso non esistesse un <article> padre allora essa è riferita alla creazione dei contenuti dell'intero
documento.
Ovviamente un elemento che possiede l'attributo pubdate necessita di una data. Per ciascun <article>
può esserci solo un singolo tag <time> con pubdate e la stessa cosa vale per l'intero documento.
Possiamo specificare in maniera più dettagliata una data aggiungendo l'attributo datetime:
•
il valore dell'attributo deve essere una "stringa valida" del tipo (ANNO-MESE-GIORNOORE:MINUTI:SECONDI.MILLISECONDI-FUSO ORARIO).
•
se l'attributo datetime non è presente allora il contenuto testuale del'tag <time> deve essere una
"stringa valida".
1 <time pubdate datetime="2011-01-20">20 Gennaio</time>
Dobbiamo specificare che l'attributo pubdate in quanto di tipo booleano può essere inserito anche nel
seguente modo:
1 <time pubdate="pubdate" datetime="2011-01-20">20 Gennaio</time>
Nella prossima lezione vedremo in quali occorrenze utilizzare il tag <meter>.
<time>
No
No
No
No
No
46 - 145
Meter
L'elemento <meter> rappresenta una misura scalare all'interno di un intervallo noto, o un valore
frazionario.
Il tag <meter> è anche utilizzato come un indicatore di livello.
1 <meter value="6" max="8">6 blocchi utilizzati (su un totale di 8)</meter>
Vediamo alcuni contesti in cui non deve essere utilizzato:
•
•
quando indica lo stato di una barra di progresso;
quando i valori rappresentati sono di tipo arbitrario a scalare; ad esempio non deve segnalare un
peso o un'altezza a meno che non vi sia un valore massimo riconosciuto.
Esistono 6 attributi per determinare il valore semantico dell'elemento <meter>:
1.
2.
3.
4.
5.
6.
min: indica il valore limite minimo disponibile;
max: indica il valore limite massimo disponibile;
value: indica il valore dell'elemento;
low: indica un valore che viene considerato basso;
high: indica un valore che viene considerato alto;
optimum: indica un valore che viene considerato "ottimale"; se è più alto del valore specificato
nell'attributo high indica che il valore più alto è il migliore,viceversa è più basso del valore
specificato nell'attributo low indica che il valore più basso è il migliore.
Se non è specificato un valore minimo e un valore massimo questi sono di default rispettivamente 0 e 1.
Ad oggi l'unico browser che renderizza il tag <meter> è Google Chrome presentandolo graficamente
come una barra di progresso, quindi gli sviluppatori sono fortemente incoraggiati a specificare il suo
valore in formato testuale al suo interno.
Nella prossima lezione illustreremo come utilizzare l'elemento <progress> e la sua utilità nel caricare i
contenuti dei documenti web.
<meter>
No
No
No
8.0+ 11.0+
47 - 145
Progress
L'elemento <progress> rappresenta lo stato di completamento di un compito e può essere di due
tipi:
•
indeterminato: indica che il compito (task) è in fase di completamento, ma che non è chiaro
quanto ancora resta da fare prima che l'operazione sia completata (ad esempio perché
l'operazione è in attesa della risposta di un host remoto);
•
determinato quando è possibile ricavare un numero quantificabile nel range da zero a un
massimo, in modo da ottenere la percentuale di lavoro completato rispetto al totale(ad esempio
un preloader di un'immagine).
Esistono due attributi che determinano lo stato di completamento dell'attivita del tag <progress>.
L'attributo value, che specifica la quantità di lavoro completata, e l'attributo max, che specifica la
quantità di lavoro richiesta in totale. Le unità sono arbitrarie e non specificate.
Tuttavia, i valori passati come attributi del tag <progress> non sono renderizzati e quindi dovrebbero
comunque essere inseriti in forma testuale nell'HTML in modo da poter fornire un feedback più preciso
agli utenti; inoltre questo elemento attualmente non viene renderizzato dalla maggior parte dei browser
ed è quindi ancora sconsigliato il suo utilizzo.
<section>
1
<p>Caricamento:
<progress
id="mioLoader"
max="100"
value="30"><span>30</span>
2
%</progress></p>
3
</section>
Vediamone adesso un esempio concreto in questa demo (funziona nelle più recenti versioni di Opera e
Google Chrome).
Gli attributi value e max, se presenti, devono essere valori validi. L'attributo value, se presente, deve
avere un valore uguale o maggiore di zero e minore o uguale al valore dell'attributo max, se presente, o
1.0, in caso contrario. L'attributo max, se presente, deve avere un valore maggiore di zero.
Ovviamente, l'elemento <progress> deve essere utilizzato solamente per indicare lo stato in fase di
progressione di un compito; per indicare quantitativamente la misura di un'oggetto o di uno stato non in
progressione bisogna utilizzare l'elemento <meter>.
Data la complessità dell'argomento e la costante variazione delle specifiche a riguardo consigliamo di
consultare il sito del WHATWG per un maggiore approfondimento.
Nella prossima lezione descriveremo brevemente gli altri tag semantici introdotti nella specifica HTML5.
<progress>
No
No
No
8.0+ 11.0+
48 - 145
Altri tag
Abbiamo scelto di riassumere brevemente in un'unica lezione diversi tag in quanto il costante
aggiornamento delle specifiche non ci consente di poterli descrivere dettagliatamente, almeno sino a
quando queste ultime non saranno rilasciate ufficialmente; inoltre, ne sconsigliamo l'utilizzo almeno
sino a quando i browser non inizieranno a supportarli in maniera standard.
I tag <figure> e <figcaption>
Nell'elemento <figure> possiamo racchiudere dei contenuti, opzionalmente con una didascalia
(<figcaption>), che rappresentano delle singole unità indipendenti rispetto al contenuto principale; ad
esempio possiamo utilizzare l'elemento <figure> per annotare le illustrazioni, schemi, foto, elenchi di
codice, etc... ovvero tutto ciò che fa parte del contenuto principale ma che potrebbe essere anche
allontanato dallo stesso senza intaccarne il senso.
L'elemento <figcaption> quindi rappresenta una didascalia o una leggenda per l'elemento <figure>
padre.
Esempio:
1 <figure>
2 <img src="benevenuti.jpg" alt="">
3 <figcaption>
4 Foto di benvenuto
5 <small>© Diritti riservati</small>
6 </figcaption>
7 </figure>
È importante notare che l'attributo alt è vuoto poiché l'immagine è descritta nel tag <figcaption> ed è
stato usato il tag <small> per il copyright.
Il tag <embed>
L'elemento <embed> è già utilizzato da anni per inserire nel codice HTML contenuti interattivi o
multimediali (tipicamente Flash, Quicktime, etc.). Questo elemento, però, era stato deprecato nelle
specifiche HTML 4 in favore del tag <object>. Ora è stato reintrodotto perché, nonostante la potenza delle
nuove API HTML5, si pensa che al momento non tutto ciò che si riesce ad ottenere con plug-in di terze
parti possa essere realizzato in HTML5. Inoltre, si è cercato di mantenere la retrocompatibilità con
applicazioni basate sull'utilizzo di questo elemento.
Il tag <ruby>
Il tag <ruby> è usato per specificare le annotazioni Ruby, che vengono utilizzate nella tipografia
orientale in combinazione con il testo principale.
Il tag <wbr>
Il tag <wbr> definisce dove, in una parola, sarebbe opportuno aggiungere un a capo. Infatti, quando una
parola è lunga, utilizzando l'elemento <wbr> il browser comprenderà dove eventualmente sarà possibile
inserire un a capo.
I tag <command> e <menu>
Entrambi sono elementi molto interessanti: permettono di definire barre degli strumenti o menu di scelta
rapida per le nostre applicazioni, con le icone e i relativi comandi che possono essere eseguiti da script.
Il tag <command> rappresenta un'azione che l'utente può richiamare in qualche modo. Esso è visibile
solo se inserito all'interno di un elemento <menu>. In caso contrario, non verrà visualizzato, ma può
essere utilizzato per specificare un tasto di scelta rapida.
Al momento nessun browser supporta questi tag.
I tag <details> e <summary>
I tag <details> e <summary> rappresentano un widget informativo da cui l'utente può ottenere
informazioni supplementari o controlli aggiuntivi. Nel tag <summary>,che è contenuto all interno del tag
49 - 145
<details>, deve essere inserita una sintesi del contenuto del widget o anche una legenda. I contenuti
dell'elemento <details> possono essere mostrati o meno dal browser grazie all'attributo open, di tipo
booleano. Anche questi tag non sono supportati ancora da nessun browser.
Il tag <keygen>
L'elemento <keygen> rappresenta un generatore di chiavi numeriche all'interno di un form. Quando si
effettua l'invio di un form contenente il tag <keygen>, la chiave privata viene memorizzata nel keystore
locale e la chiave pubblica viene confezionato e inviata al server.
L'elemento è già supportato da diversi browser ma manca il suo supporto in IE.
Il tag <output>
L'elemento <output> ci restituisce il risultato di un calcolo.
<figure>
<figcaption>
<ruby>
<wbr>
<command>
<menu>
<details>
<summary>
<keygen>
<output>
9.0+
9.0+
5.5+
No
No
No
No
No
No
No
4.0+
4.0+
No
No
No
No
No
No
1.0+
4.0+
Nightly build
Nightly build
5.0+
No
No
No
No
No
2.0+
Nightly build
Nightly build
Nightly build
5.0+
No
No
No
No
No
2.0+
Nightly build
11.0+
11.0+
No
No
No
No
No
No
7.0+
9.0+
50 - 145
I form in HTML5: una panoramica
Quando Javascript fu introdotto nelle pagine web, fu subito implementato per assolvere a due compiti: il
rollover delle immagini e la validazione dei form.
Mentre il primo era un mero problema visuale (e in parte anche di usabilità), il secondo utlizzo comune di
Javascript era necessario perché permetteva di eliminare (o per meglio dire arginare) l'invio di form mal
compilati o con errori, evitando all'utente l'attesa non necessaria tra il l'invio, l'eventuale fallita
validazione dei dati inviati e il conseguente reload della pagina.
Ovviamente nessun programmatore esperto si fida di quello che "arriva" dai form. Si rende necessario,
quindi, il controllo lato server dei dati inviati. Nonostante questo, l'implementazione di controlli client side
è una prassi comune.
Con HTML5 avviene per la validazione e in generale per l'interazione tramite i moduli, quello che è
accaduto con elementi come video e audio. La specifica introduce funzionalità e tecniche che permettono
allo sviluppatore da affidarsi unicamente al linguaggio di markup, senza dove ricorrere a Javascript o a
plugin esterni.
Quello che andremo a descrivere nelle prossime lezioni era originariamente parte della specifica del
WHATWG chiamata Web Form 2.0, aggiornamento della specifica del W3C denominata Web Form 1.0.
Attualmente Web Form 2.0 è un progetto chiuso in quanto ora si lavora sulla parte dedicata ai form della
specifica HTML5.
Lavorare con i form è stato finora molto semplice: si inizia tutto con il tag <form>, si prosegue con gli
<input type="text">, a volte con gli <input type="password"> e magari con una <textarea> o una
<select> o <input type="radio">, e si finisce sempre con <input type="submit">.
Questi tipi di input, però, non si adattano alla varietà di dati possibilmente richiesti. Spesso ci troviamo a
richiedere indirizzi e-mail, numeri di telefono, date e molti altri tipi di dati ancora.
Non solo, ci sono anche le validazioni di consistenza derivate da questi dati, per esempio il fatto che
l'indirizzo e-mail deve contenere la @ o che le date devono essere in un formato preciso, oltre a
validazioni di presenza e obbligatorietà. È soprattutto a questo livello, come si accennava, che
entravano in gioco Javascript e le validazioni client side.
Tutto questo con HTML5 finisce grazie all'inserimento nella specifica di nuovi type come email, number,
range, search e di diversi nuovi attributi come placeholder, autofocus, require, min, max, etc.
Questi nuovi tipi di input e attributi sono molto apprezzati dalla comunità dei programmatori perch´ oltre
a fornire un aumento dell'accessibilità dei form (anche in ambito mobile) sono pronti per l'uso.
Non tutti funzionano perfettamente su tutti i browser, ma senza nessun hack, senza Javascript che ne
controlla il funzionamento, degradano bene, anche in preistorici browser.
Possiamo allora iniziare.
51 - 145
Nuovi attributi per i form: autofocus, placeholder e form
I tipi di attributi
Prima di iniziare cominciamo con il dire che esistono diversi tipi di attributi per i tag HTML. Nel particolare:
•
Attributi booleani: questi tipi di attributi hanno due stati, lo stato vero e lo stato falso. Il
primo è rappresentato dalla presenza dell'attributo mentre il secondo, lo stato falso, è
rappresentato dalla sua assenza. Il valore dell'attributo, quindi, non è necessario (es. disabled)
anche se sono accettati comunque alcuni valori. Nello specifico possiamo valorizzarlo con una
stringa vuota (es. disabled="") oppure con il nome dell'attributo senza spazi iniziali o finali (es.
disabled=disabled o disabled="disabled").
•
Attributi enumerati: questi tipi di attributi possono prendere come valore un insieme finito di
parole chiavi (es. l'attributo type per il tag ul può assumere i valori disc, square e circle). A volte
le parole chiave possono avere sinonimi. Una parola chiave potrebbe essere anche "", cioè il
valore nullo.
•
Attributi generici: questo tipo di attributo, invece, può prendere qualsiasi valore. Esempi di
questi attributi sono class, id e placeholder.
Dopo questa premessa vediamo subito all'opera i primi tre dei nuovi attributi per i form definiti in HTML5:
autofocus, placeholder e form.
autofocus
L'attributo autofocus è un attributo booleano e serve a impostare il focus su uno specifico
elemento del form appena la pagina è caricata. Un esempio canonico è quello della home page di
Google: appena viene caricata il focus è automaticamente impostato sul campo per la ricerca.
Ovviamente solo un elemento per pagina può avere l'attributo autofocus.
Questo attributo deve essere usato con parsimonia in quanto alcuni utenti, come quelli che usano la barra
spaziatrice per scorrere la pagina, potrebbero trovare questa costrizione fastidiosa, preferendo un
atteggiamento più soft.
È per questo motivo che autofocus dovrebbe essere usato solo nelle pagine che contengono solamente (o
principalmente) form (come per esempio pagine di login o di ricerca).
Esempi d'uso dell'attributo autofocus
Ecco comunque un esempio pratico:
1 <form action="/" method="get">
2 <input type="text" name="myname" id="myid" autofocus>
3 <input type="submit" value="Invia">
4 </form>
Alternative per l'implementazione dell'attributo autofocus
Per far sì che l'attributo autofocus funzioni su tutti i browser è sufficiente modificare il codice in questo
modo:
1 <form action="/" method="get">
2 <input type="text" name="myname" id="myid" autofocus >
3 <script>
4
if (!("autofocus" in document.createElement("input")))
5
{
6
document.getElementById("myid").focus();
7
}
8 </script>
9 <input type="submit" value="Invia" >
10 </form>
placeholder
Il valore dell'attributo placeholder è visualizzato all'interno di un input, o di una textarea, fin quando il
campo è vuoto e non guadagna il focus (tramite il click o spostandosi su di esso il tasto Tab).
52 - 145
Semanticamente l'attributo placeholder dovrebbe essere valorizzato con valori accettabili dal form,
dovrebbe, in altre parole, contenere un esempio di ciò che l'utente andrà a scrivere nel campo.
Spesso il placeholder viene utilizzato erroneamente al posto della label descrivendo quindi cosa
dovrebbero inserire.
Esempi d'uso dell'attributo placeholder
All'interno del nostro progetto guida si fa molto uso dell'attributo placeholder. Per esempio:
1
2
<input type="search" autocomplete="on" placeholder="article,
3
required maxlength="50">
4
</label>
5
<input type="submit" value="ricerca">
6
</form>
Creando un risultato come nella seguente immagine:
section,
..."
name="keyword"
Figura 17 - Resa visiva di un input con l'attributo placeholder
Alternative per l'implementazione dell'attributo placeholder
Non sarà semplice scrivere una funzione che faccia funzionare il placeholder su tutti i browser e per tutti
gli input, ma data la natura dell'attributo non dovrebbe essere nemmeno necessario.
Ad ogni modo, se volessimo farlo funzionare su tutti i browser, avremmo diverse soluzioni, alcune più
semplici altre più complesse.
Proponiamo qui l'alternativa proposta da Andrew January sul suo blog.
Nello script placeholder.js abbiamo modificato i commenti mettendoli in italiano di modo che sia di più
facile comprensione. Per farlo funzionare si ricordi di includere la libreria jQuery nella pagina.
form
Un nuovo attributo che si può inserire in tutti gli input è appunto form, anche se sfortunatamente non è
molto supportato e non esiste una vera e propria alternativa.
Questo nuovo attributo serve per specificare a quale form, o a quali form, l'input fa riferimento.
Richiede come valore l'id del form a cui vogliamo che faccia riferimento, o nel caso di più form, gli id
separati da uno spazio, " ".
Esempi d'uso dell'attributo form
Ecco comunque un esempio pratico:
1 <form action="/" method="get" id="myFormId">
2 <input type="text" name="myname">
4 </form>
5 <input type="text" name="mysurname" form="myFormId">
Nonostante l'input con id mysurname sia fuori dal form, inviando il form inviamo anche il suo valore grazie
al suo attributo form.
L'uso di questo attributo è sconsigliato a meno di non conoscere con certezza il browser dell'utente che
utilizzarà la nostra applicazione.
Alternative per l'implementazione dell'attributo form
Come detto nella descrizione dell'attributo, non c'è una vera e propria alternativa. Siamo di fronte a due
soluzioni:
•
La prima è quella di agire sul DOM e spostare gli elementi interessati all'interno del form.
•
La seconda è quella di assegnare una funzione al submit del form che cerchi i valori degli input
53 - 145
interessati e per ognuno di questi inserire nel DOM degli <input type="hidden"> e quindi
procedere con l'invio.
Form: nuovi attributi
autofocus
placeholder
form
No
No
No
4.0+ 4.0+
4.0+ 4.0+
4.0+ Nightly build
2.0+
2.0+
Nightly build
9.0+
11.0+
9.0+
54 - 145
Nuovi attributi dei form per la validazione
La validazione dei form è forse l'argomento relativo ai form più importante. Vediamo subito in dettaglio
che cosa ci propone la nuova specifica HTML5.
required
required è un attributo booleano e serve a rendere obbligatoria la compilazione dell'elemento a
cui è applicato. La condizione viene valutata al submit del form.
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
1
[...]
2
<label>Messaggio:
3
<textarea name="messaggio" placeholder="Scrivi qui il tuo messaggio (max 300 caratteri)"
4
maxlength="300" required></textarea>
5
</label>
6
[...]
7
<input type="reset" value="Resetta il form">
8
<input type="submit" value="Invia il commento">
9
</form>
autocomplete
Anche se questo attributo non è esattamente un attributo per le validazioni, abbiamo deciso di inserirlo in
questa lezione in quanto previene un comportamento dei browser non sempre voluto: spesso i browser
riempiono i campi da inserire in maniera automatica.
Questo comportamento è nella maggior parte dei casi un comportamento comodo, però in alcuni casi è
fastidioso. Si pensi per esempio ai campi password o ai campi del codice della banca: probabilmente non
vogliamo che il browser li completi in automatico.
Ecco che arriva in nostro soccorso l'attributo autocomplete che è un attributo enumerato. In particolare i
valori che accetta sono:
•
on: indica che il valore non è particolarmente sensibile e che il browser può compilarlo in maniera
automatica;
•
off: indica che il valore è particolarmente sensibile o con un tempo di scadenza (il codice di
attivazione di un servizio, per esempio) e che quindi l'utente deve inserirlo manualmente ogni
volta che lo compila;
•
nessun valore: indica in questo caso di usare il valore di default scelto dal browser
(normalmente on).
1 <form name="commenti" method="post" action="/141/comments">
2 [...]
3 <label>Nick:
4
<input type="text" name="nickname" autocomplete="on"
5
required pattern="[a-z]{1}[a-z_]{2,19}"
6
title="Un nickname è composto da lettere minuscole e '_'; Sono consentiti da 3 a 20 caratteri."
7
placeholder="your_nickname">
8 </label>
9 [...]
10 <input type="reset" value="Resetta il form">
11 <input type="submit" value="Invia il commento">
12 </form>
multiple
In molti casi abbiamo bisogno che l'utente possa inserire più valori per lo stesso input (per esempio
se gli stiamo chiedendo gli indirizzi e-mail di amici a cui inviare un invito).
Ecco che arriva in nostro soccorso l'attributo multiple che è un attributo booleano.
Un esempio di utilizzo:
55 - 145
1 <form>
2 <label>eMail a cui inviare l'invito:
3 <input type="email" multiple name="friendEmail"
4 </label>
5 [...]
8 </form>
pattern
In molti casi abbiamo bisogno di validare un determinato input verificando che il valore inserito sottostia a
determinate regole di creazione (per esempio potremmo volere che il campo password non contenga
spazi).
Possiamo contare in questi casi sull'attributo pattern.
Il valore di pattern, se specificato, deve essere una espressione regolare valida.
Se viene indicato l'attributo pattern bisognerebbe indicare anche il title per dare una descrizione del
formato richiesto, altrimenti il messaggio di errore sarà generico e probabilmente di poco aiuto.
2 [...]
3 <label>Nick:
4
<input type="text" name="nickname" autocomplete="on"
5
required pattern="[a-z]{1}[a-z_]{2,19}"
6
title="Un nickname è composto da lettere minuscole e '_'; Sono consentiti da 3 a 20 caratteri."
7
placeholder="your_nickname">
8 </label>
9 [...]
12 </form>
In questo esempio si sta richiedendo che lo username sia una parola in minuscolo composta solo da
lettere e da "_", di una lunghezza minima di 3 caratteri e massima di 20 e che non cominci con "_"
min e max
I valori min e max descrivono rispettivamente il valore minimo e massimo consentito.
Il valore di max deve essere maggiore del valore di min se indicato.
Questi attributi si applicano sia alle date (come detetime, date, month) sia ai numeri (number e range).
Per maggiore dettagli rimandiamo alle lezioni che trattano in maniera specifica questi nuovi tipi di input.
2 [...]
3 <label>Età:
4 <input type="number" name="age" min="13" max="130" step="1">
5 </label>
6 [...]
9 </form>
In questo caso stiamo chiedendo un'età compresa tra i 13 e i 130 anni (estremi compresi).
step
Il valore step definisce la distanza che intercorre tra un valore e il successivo. Definisce, in altre parole, la
granularità dei valori permessi.
Il valore di step deve essere un valore positivo non nullo.
Questo attributo si applica sia alle date (come detetime, date, month) sia ai numeri (number e range).
56 - 145
2 [...]
3 <label>Età:
5 </label>
6 [...]
9 </form>
In questo caso stiamo chiedendo solo valori interi.
novalidate
Questo attributo si applica al tag form e permette di saltare tutte le validazioni dei tag che da esso
discendono.
novalidate è un attributo booleano.
1 <form novalidate>
2 <label>Età:
3 <input type="email" name="myEmail" required>
4 </label>
7 </form>
In questo caso non verrà controllato che il campo email sia in un formato valido né che sia presente.
autocomplete
min, max
multiple
pattern
required
step
No
No
No
No
No
No
No
No
3.6+
4.0+
4.0+
No
No
Nightly build
4.0+
4.0+
4.0+
4.0+
No
Nightly build
2.0+
2.0+
2.0+
2.0+
10.6+
9.0+
11.0+
9.0+
9.0+
9.0+
57 - 145
Input type: tel
È possibile utilizzare l'elemento input con type=tel per creare un campo adatto all'inserimento di
numeri di telefono.
A differenza degli input di tipo email e url, questo tipo non impone un particolare formato. Ciò è
intenzionale. In pratica, i campi di numero di telefono sono campi liberi, perché, a livello intenzionale, i
numeri possono essere scritti in diversi modi. È comunque possibile usare l'attributo pattern per forzare
un determinato formato.
I dispositivi mobili e il type tel
I dispositivi mobili possono presentare tastiere personalizzate per facilitare l'inserimento come mostrato
nelle immagini che seguono (la prima è relativa a iPhone/iOS, mentre la seconda a un sistema Android).
Figura 18 - Tastiera iPhone
Figura 19 - Tastiera Android
Esempi d'uso
L'esempio è molto semplice, eccolo:
58 - 145
1 <form>
2 <label>Inserisci il tuo numero di telefono:
3 <input type="tel" name="myTelephone">
4 </label>
5 <input type="submit" value="Invia" >
6 </form>
Questo codice produce visivamente un normale <input type="text">.
Form: nuovi tipi di input
tel
No
4.0+ 4.0+ 2.0+ 11.0+
59 - 145
Input type: search
È possibile utilizzare l'elemento input con type=search per creare un campo di ricerca. Questo campo è,
ovviamente, un campo libero nel senso che non impone nessun pattern.
Safari su Mac OS X e il type search
Nella maggior parte dei browser non c'è alcuna differenza tra un campo di tipo text e un campo search,
ma in Safari su Mac OS X abbiamo un comportamento particolare:
1. Visivamente l'input ha i bordi arrotondati.
2. Se scriviamo qualcosa nel campo compare una piccola X sulla destra che, se cliccata, svuota il
campo.
Figura 1
Esempi d'uso
Ecco un semplice esempio per implementare questo tipo di input:
1
2
<input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword"
3
required maxlength="50">
4
</label>
5
<input type="submit" value="Ricerca">
6
</form>
Come detto precedentemente, questo codice nella maggior parte dei browser produce visivamente un
normale <input type="text">.
search
No
4.0+ 2.0+ 2.0+ 11.0+
60 - 145
Input type: url
Si usa l'elemento input con type=url per creare un campo destinato all'inserimento di un indirizzo
web.
Il tipo url, se specificato, dovrebbe rappresentare l'inserimento di un URL assoluto, ovvero nel formato
http://www.sito.com/etc.... Nel caso in cui il valore inserito non sia valido, viene sollevata, nei browser che
supportano il tipo url, un'eccezione che non riconosce il pattern.
I dispositivi mobili e il type url
I dispositivi mobili possono presentare tastiere personalizzate per facilitare l'inserimento. iPhone modifica
la sua tastiera eliminando la barra spaziatrice e mettendo il punto, la slash e l'estensione ".com" come
visualizzato nella figura sottostante. Android, invece, visualizza attualmente la tastiera standard.
Figura 21 - Tastiera iPhone con un campo di tipo url
Esempi d'uso
2 [...]
3 <label> Www:
4 <input type="url" name="url" autocomplete="on" placeholder="http://mywebsite.com">
5 </label>
6 [...]
9 </form>
Produce visivamente un normale <input type="text">.
url
No
4.0+ 4.0+ 2.0+ 9.0+
61 - 145
Input type: email
L'elemento input con type=email viene usato per creare un campo per inserire un indirizzo e-mail.
L'input con tipo email, se specificato, dovrebbe rappresentare l'inserimento di indirizzi e-mail. Una
fondamentale condizione di validità, dunque, sarà rappresentata dalla presenza del simbolo @. Nel caso
in cui il valore inserito non sia valido viene sollevata un'eccezione.
I dispositivi mobili e il type email
I dispositivi mobili possono presentare, anche in questo caso, tastiere ad hoc. iPhone modifica la sua
tastiera mostrando la chiocciola e il punto come visualizzato in figura 22. Android attualmente visualizza
la tastiera standard.
Figura 22 - Tastiera iPhone con un campo di tipo email
Esempi d'uso
Anche per questo tipo di input presentiamo un piccolo snippet di codice:
2 [...]
3 <label> Email:
4 <input type="email" name="email" autocomplete="on" placeholder="[email protected]">
5 </label>
6 [...]
9 </form>
Il codice visto produce visivamente un normale <input type="text">.
email
No
4.0+ 4.0+ 2.0+ 9.0+
62 - 145
Nuovi tipi di input per la gestione delle date
Tutti i programmatori prima o poi hanno avuto a che fare con la gestione delle date, con tutti i problemi
che ne conseguono. HTML5 mette a disposizione nuovi tipi di input concepiti per facilitare il compito dei
programmatori nell'inserimento di date da parte degli utenti.
Dal momento che ci sono diversi tipi di date di cui potremmo aver bisogno, ecco che sono stati
implementati nella specifica diversi tipologie. In particolare:
•
•
•
•
•
•
datetime: gestisce sia la data che l'ora (con fuso orario);
datetime-local: gestisce sia la data che l'ora (senza fuso orario);
date: gestisce le date;
month: gestisce i mesi;
week: gestisce le settimane;
time: gestisce l'ora.
Per tutti questi input abbiamo degli attributi specifici che sono:
•
•
•
min: che rappresenta il minimo valore accettato;
max: che rappresenta il massimo valore accettato;
step: che rappresenta la granulosità dei valori accettati.
Vediamoli nel dettaglio.
datetime
Come detto, serve per permettere l'inserimento di date e ore in un solo colpo. Visivamente nei browser
che lo supportano (pochi per ora) abbiamo la generazione di un datepicker in cui abbiamo la possibilità di
selezionare un giorno e con l'opzione di mettere anche l'ora, come nell'immagine qui sotto. Ecco cosa
avviene quando clicchiamo su quella che sembra essere una select (lo screenshot è di Opera 11):
Figura 23 - Input datetime su Opera
Nei sistemi che non supportato il tipo datetime, viene generato un normale input di testo.
Vediamo un esempio di codice
1 <form>
2 <label>Quando sei disponibile per un incontro?
3 <input type="datetime" name="mydatetime">
4 </label>
7 </form>
Gli attributi specifici
•
•
min: il valore di questo attributo deve essere una data e ora con il fuso orario valida.
•
step: il valore di questo attributo deve essere un intero e rappresenta i secondi. Il valore di default
è di 60 secondi.
max: il valore di questo attributo deve essere una data e ora con il fuso orario valida e deve
essere maggiore del valore dell'attributo min se specificato.
datetime-local
È del tutto simile a datetime, con l'unica differenza che non vengono passate informazioni sul fuso orario.
Ecco come appare su Opera 11:
Figura 24 - Input datetime-local su Opera
63 - 145
Nei sistemi che non supportato il datetime-local viene generato un normale input type="text".
Esempio:
1 <form>
3 <input type="datetime-local" name="mydatetime">
4 </label>
7 </form>
•
•
min: il valore di questo attributo deve essere una data e ora valida.
•
step: il valore di questo attributo deve essere espresso in secondi. Il valore di default è di 60
secondi.
max: il valore di questo attributo deve essere una data e ora valida e deve essere maggiore del
valore dell'attributo min se specificato.
date
Serve per inserire una data. Nei browser che lo supportano si ottiene un datepicker in cui abbiamo la
possibilità di selezionare un giorno:
Figura 25 - Input date su Opera
Nei sistemi che non supportato il tipo date viene generato un normale campo di testo.
Esempio:
1 <form>
3 <input type="date" name="mydatetime">
4 </label>
7 </form>
•
•
min: il valore di questo attributo deve essere una data valida.
•
step: il valore di questo attributo deve essere espresso in giorni. Il valore di default è di 1 giorno.
max: il valore di questo attributo deve essere una data valida e deve essere maggiore del valore
dell'attributo min se specificato.
month
Serve per permettere di selezionare un mese dell'anno. In figura 4 il datepicker per selezionare un mese
generato su Opera 11:
Figura 26 - Input month su Opera
Nei sistemi che non supportato month viene generato un normale campo di testo.
Esempio
64 - 145
1 <form>
3 <input type="month" name="mydatetime">
4 </label>
7 </form>
•
•
min: il valore di questo attributo deve essere un mese valido.
•
step: il valore di questo attributo deve essere espresso in mesi. Il valore di default è di 1 mese.
max: il valore di questo attributo deve essere una mese valido e deve essere maggiore del valore
week
Viene usato per la selezione di una determinata settimana dell'anno (composta da anno - numero di
settimana). In figura 5 il widget prodotto dall'inserimento di questo tipo di input su Opera 11:
Figura 27 - Input week su Opera
Nei sistemi che non supportato week viene creato un normale campo di testo.
Esempio:
1 <form>
3 <input type="week" name="mydatetime">
4 </label>
7 </form>
•
•
min: il valore di questo attributo deve essere una settimana valida.
•
step: il valore di questo attributo deve essere espressa in settimane. Il valore di default è di 1
settimana.
max: il valore di questo attributo deve essere una settimana valida e deve essere maggiore del
valore dell'attributo min se specificato.
time
Serve per selezionare e inserire una determinata ora del giorno. Ancora una schermata da Opera 11:
Figura 28 - Input time su Opera
Nei sistemi che non supportato il time genera un normale input type="text".
Vediamo un esempio di codice
1 <form>
3 <input type="time" name="mydatetime">
4 </label>
5 <input type="reset" value="Resetta la form">
7 </form>
65 - 145
•
•
min: il valore di questo attributo deve essere una ora valida.
•
step: il valore di questo attributo deve essere espresso in secondi. Il valore di default è di 60
secondi.
max: il valore di questo attributo deve essere una ora valida e deve essere maggiore del valore
datetime
date
month
week
time
datetime-local
No
No
No
No
No
No
No
No
No
No
No
No
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
66 - 145
Input type: number
È possibile utilizzare l'elemento
all'inserimento di un numero.
input
con type=number per creare un
campo
destinato
I dispositivi mobili e il type number
I dispositivi mobili possono presentare tastiere personalizzate per facilitare l'inserimento come mostrato
nelle immagini che seguono (fanno riferimento, rispettivamente, a iPhone/iOS e Android).
Figura 29 - Tastiera iPhone con un input di tipo number
Figura 30 - Tastiera Android con un input di tipo number
Attributi specifici per il type number
HTML5 mette a disposizione un set di attributi specifici per i campi di tipo number. Servono a specificare
delle limitazioni per il valore di questo attributo. Questi attributi sono min, max e step.
Attributo min
Specifica il minimo valore permesso. La sintassi è semplice: min="1" permette solo l'inserimento di
numeri positivi. I valori permessi sono, ovviamente, numeri.
Attributo max
Specifica il massimo valore permesso. max="10" permette solo l'inserimento di numeri inferiori o uguali a
10. Il valore di questo attributo deve essere maggiore del valore dell'attributo min (se specificato).
Attributo step
L'attributo step indica la granulosità che deve avere il valore, limitando i valori permessi. Il valore di step
se specificato deve essere un numero (anche non intero) maggiore di zero oppure la stringa "any" (che
equivale a non inserire l'attributo).
La sintassi è anche in questo caso molto semplice: step=3 influenza i valori permettendo valori come -3,
0, 3, 6 ma non -1 o 2.
Esempi d'uso
Un esempio potrebbe avere questa forma:
2 [...]
3 <label>Età:
5 </label>
6 [...]
9 </form>
In questo caso stiamo chiedendo di inserire un'età compresa tra i 13 e i 130 anni (estremi compresi) e i
valori accettati sono interi.
Nella maggior parte dei browser si produce attualmente un normale <input type="text">, ma nei browser
che supportano number abbiamo:
Figura 31 - Un input di tipo number
67 - 145
number
No
No
4.0+ 2.0+ 9.0+
68 - 145
Input type: range
Molto simile semanticamente all'input type=number, questo nuovo tipo di input permette agli utenti di
inserire un numero tramite uno slider.
Attributi specifici
HTML5 mette a disposizione un set di attributi specifici per il tipo range (che sono gli stessi del
type=number): servono a specificare delle limitazioni per il valore di questo attributo. Questi attributi
sono min, max e step.
•
min: specifica il minimo valore permesso. Esempio: min="1", che permette solo di passare numeri
da 1 in su.
•
max: specifica il massimo valore permesso. Esempio: max="10", che permette solo di inviare
numeri inferiori o uguali a 10. Il valore di questo attributo deve essere maggiore del valore
dell'attributo min (se specificato).
•
step: indica la granulosità che deve avere il value limitando i possibili valori passati. Il valore di
step se specificato deve essere un numero (anche non intero) maggiore di zero oppure la stringa
"any" (che equivale a non inserire l'attributo). Esempio: step=3, che influenza i valori inseriti
passando valori come -3, 0, 3, 6.
Esempi d'uso
2 [...]
3 <label>Voto:
4 <input type="range" name="voto" min="0" max="5" step="1">
5 </label>
6 [...]
9 </form>
Ecco come appare un input di tipo range sui browser che lo supportano:
Figura 32 - Un input di tipo range
range
No
No
4.0+ 2.0+ 9.0+
69 - 145
Input type: color
L'elemento input con type=color dovrebbe creare un color picker, quel tipo particolare di widget utile
per la selezione di un colore a partire da una palette di colori. Una volta selezionato il colore, il
campo passa alla nostra pagina di ricezione un colore RGB esadecimale composto da 6 cifre.
Questo tipo input ad oggi non è molto supportato. Per la sua implementazione sui nostri siti si può però
ricorrere ad una qualsiasi delle tante soluzioni Javascript disponibili.
Opera e il type color
Nella maggior parte dei browser non c'è alcuna differenza tra un campo di tipo text e un campo color, ma
su Opera abbiamo un comportamento particolare:
1. Visivamente abbiamo una select particolare con i colori (esempio in figura 33).
2. Se clicchiamo abbiamo una scelta dei colori base (esempio in figura 34).
3. Se clicchiamo su "Altro" richiamiamo il color picker di sistema (esempio su Opera su Mac OS X in
figura 35).
Figura 33 - Input color su Opera: stato iniziale
Figura 34 - Input color su Opera: selezione del colore
Figura 35 - Input color su Opera: color-picker di sistema
Esempi d'uso
Un input di tipo color si crea così:
70 - 145
1 <form>
2 <label>Seleziona il colore di sfondo:
3 <input type="color" name="mybackground">
4 </label>
5 <input type="reset" value="Resetta la form">
7 </form>
color
No
No
Parziale Parziale 11.0+
71 - 145
Cosa sono le datalist?
L'elemento HTML5 <datalist> è utilizzato per fornire una funzione di "completamento automatico" ad un
elemento del form. Permette, in altre parole, di fornire all'utente un elenco di opzioni predefinite da cui
scegliere, offrendo al contempo la possibilità di inserire un valore non presente inizialmente nella lista.
Mette insieme i vantaggi di una select e di un input di testo. Sfortunatamente questo tag molto utile è al
momento poco supportato dai browser (solo Opera lo supporta).
Datalist su Opera
Nella maggior parte dei browser il codice relativo all'elemento datalist viene completamente ignorato ma
su Opera abbiamo il seguente comportamento:
1.
2.
3.
Visivamente abbiamo solo il nostro input e la datalist non è renderizzata in nessun modo (figura
36).
Se clicchiamo sull'input a cui la datalist è collegata, vengono presentate le opzioni della datalist
(figura 37).
Se clicchiamo su un'opzione, l'input a cui la datalist è collegato assume il valore dell'opzione
(figura 38).
Figura 36 - Datalist su Opera: stato iniziale
Figura 37 - Datalist su Opera: opzioni della datalist
Figura 38 - Datalist su Opera: valorizzazione dell'opzione
Esempi d'uso
Per utilizzare datalist prima di tutto dobbiamo scrivere un input a cui collegare la nostra datalist. Per
collegare l'input alla datalist basta impostare l'attributo list dell'input con l'id della datalist.
Per ogni suggerimento che vogliamo dare all'utente facciamo discendere da datalist un tag option,
mettendo il suggerimento nell'attributo value. Il value dell'option non deve essere vuoto e l'option non
deve essere settata su disabled per essere visualizzata.
Vediamo il codice:
2 [...]
3 <label>Stato d'animo:
4
<input type="text" name="mood" placeholder="felice, triste, incuriosito, ..." list="stato-danimo">
5
<datalist id="stato-danimo">
6
<option value="triste">
7
<option value="annoiato">
8
<option value="curioso">
9
<option value="felice">
10
<option value="entusiasta!">
11 </datalist>
12 </label>
13 [...]
16 </form>
72 - 145
datalist
No
4.0+ No
No
9.0+
73 - 145
La potenza dei microdati
Introduzione: semantica e rich snippet
Leggendo questa guida dovrebbe essere chiaro che un punto focale di HTML5 è la semantica.
HTML5 ha introdotto infatti diversi tag semantici (come header, article o nav) che permettono di
strutturare il contenuto secondo una logica, appunto, semantica. Ma questa suddivisione non assolve a
tutte le necessità semantiche di cui il web ha bisogno.
L'obbiettivo è quello di dare la possibilità a programmi come crawler dei motori di ricerca o screen reader
di comprendere il significato del testo. Queste informazioni sono accessibili da questi programmi e
rimangono (attualmente) invisibili per l'utente. Entrano qui in gioco i cosiddetti microdati.
Ecco come Google li descrive, all'interno della Guida di Strumenti per i Webmaster:
"La specifica dei microdati HTML5 è un modo per assegnare etichette ai contenuti al fine di
descrivere un tipo specifico di informazioni (ad esempio recensioni, informazioni su persone o
eventi). Ogni tipo di informazione descrive uno specifico tipo di elemento, come una persona,
un evento o una recensione. Ad esempio, un evento ha proprietà quali il luogo, l'ora di inizio,
il nome e la categoria."
Attualmente, la cosa forse più interessante relativa ai microdati è in effetti uscita fuori dai laboratori di
Google: si tratta dei cosiddetti rich snippet. I rich snippet sono risultati della ricerca di Google in cui,
oltre alle comuni informazioni, compaiono altri dati allegati, come nelle immagini qui sotto:
Figura 39 - Rich snippet relativo a un hotel
Figura 40 - Rich snippet con informazioni personali
I microdata in pratica
Applicare i microdati è semplice: per ogni tag HTML possiamo specificare degli attributi che ci permettono
di definire gli oggetti semantici.
Prima di tutto dobbiamo applicare a un elemento radice (cioè un elemento che contiene tutte le
informazioni che vogliamo specificare) itemscope e itemtype.
itemscope definisce l'elemento a cui è applicato è un contenitore dell'oggetto che andremo a descrivere.
itemtype definisce il vocabolario che specifica il tipo di oggetto che andremo a descrivere.
Per finire, sugli elementi che discendono dall'elemento radice specifichiamo l'attributo itemprop che
definisce la proprietà che verrà valorizzata con il testo contenuto nel tag.
Ecco un esempio semplice:
1 <div itemscope itemtype="http://data-vocabulary.org/Person">My name is
2 <span itemprop="name">Simone Bonati</span> and my nickname is
3 <span itemprop="nickname">svarione</span> on several site (like twitter).
4 Here is my twitter account:
5 <a href="http://www.example.com" itemprop="url">http://twitter.com/svarione</a> I live in
6 Milano, Italy and work as
7 <span itemprop="role">web developer</span>.
8 </div>
Possiamo anche nidificare gli oggetti. Ecco un esempio:
74 - 145
1 <div itemscope itemtype="http://data-vocabulary.org/Person">My name is
2 <span itemprop="name">Simone Bonati</span> and my nickname is
3 <span itemprop="nickname">svarione</span> on several site (like twitter).
4 Here is my twitter account:
5 <a href="http://www.example.com" itemprop="url">http://twitter.com/svarione</a> I live in
6 <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
7
<span itemprop="locality">Milano</span>,
8
<span itemprop="country-name">Italy</span>
9 </span> and work as
10 <span itemprop="role">web developer</span>.
11 </div>
I vocabolari
Per sfruttare al massimo la potenza dei microdati e per ottenere i rich snippet dobbiamo usare i vocabolari
(che specifichiamo, come abbiamo visto, con itemtype) supportati da Google.
I vocabolari descrivono l'insieme di proprietà che possono essere definite per un determinato oggetto.
I vocabolari più popolari supportati da Google sono:
•
Breadcrumbs: questo vocabolario serve a rappresentare un insieme di link che può aiutare un
utente a comprendere e navigare all'interno del sito.
•
Businesses and organizations: questo vocabolario definisce una società, un negozio e più in
generale un luogo.
•
•
•
People: questo vocabolario definisce una persona.
•
•
•
Product: questo vocabolario definisce un prodotto.
•
•
•
•
Recipes: questo vocabolario definisce una ricetta.
Address: questo vocabolario definisce un indirizzo.
Events: questo vocabolario definisce un evento (con informazioni come il titolo, la data e il
luogo).
Offer: questo vocabolario definisce un'offerta.
Offer-aggregate: questo vocabolario definisce un aggregato di offerte (con prezzo minimo,
prezzo massimo, etc).
Review: questo vocabolario definisce una singola recensione.
Review-aggregate: questo vocabolario definisce una recensione aggregata.
Rating: questo vocabolario definisce una valutazione.
75 - 145
Un template per blog in HTML5
Terminata la disamina dei nuovi elementi semantici e strutturali introdotti con HTML5, conclusa l'analisi
delle novità relative ai form, possiamo fare il punto sul nostro primo progetto guida.
Quello che abbiamo preparato è un template concepito per un blog che fa un uso estensivo delle
nuove funzionalità. Essendoci soffermati sui dettagli essenziali nel corso delle varie lezioni, in questa sede
una rapida verifica sul codice usato nella sezione comprendente il <body> è sufficiente per farci
apprezzare l'utilizzo dei nuovi elementi per la strutturazione dei contenuti. Ecco il listato completo.
76 - 145
<header>
1
<hgroup>
2
3
4
</hgroup>
5
<nav>
6
7
<ul>
8
9
10
11
12
</ul>
13
</nav>
14
</header>
15
<section>
16
17
<article>
18
<header>
19
20
21
</header>
22
<p>
23
Attraverso un utilizzo sapiente del tag canvas è possibile leggere uno stream
24
di dati proveniente da un tag video e <mark>manipolarlo in tempo reale</mark>.
25
</p>
26
<footer>
27
<dl>
28
<dt>autore: </dt>
29
<dd><address><a href="mailto:[email protected]">Sandro Paganotti</a></address></dd>
30
31
32
<dt>tags:
</dt>
33
34
35
36
37
<dt>rank:</dt>
38
39
</dl>
40
</footer>
41
<section>
42
<h3>Commenti</h3>
43
<article>
44
<h4>
45
46
Angelo Imbelli ha scritto:
47
</h4>
48
<p>C'è un bell'esempio sulla rete: effetto ambi-light!</p>
49
<footer>
50
<address><a href="mailto:[email protected]">Angelo Imbelli</a></address>
51
</footer>
52
</article>
53
<article>
54
<h4>
55
<time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time>
56
Sandro Paganotti ha scritto:
57
</h4>
58
<p>Bellissimo! Grazie per la segnalazione!</p>
59
<footer>
60
<address><a href="mailto:[email protected]">Sandro Paganotti</a></address>
61
</footer>
62
</article>
63
<section>
64
<h4>Inserisci un nuovo commento:</h4>
65
<form name="commenti" method="post" action="/141/comments">
66
<fieldset name="dati-utente">
67
77 - 145
Un'attenzione particolare meritano anche i campi dei form. Anche per questi ultimi si è fatto ricorso ai
nuovi attributi e ai nuovi tipi di input HTML5. Si osservi, per esempio, il codice per il form per la ricerca:
1 <form name="ricerca" method="post" action="/search">
2 <label> Parola chiave:
3 <input type="search" autocomplete="on" placeholder="article, section, ..."
4 name="keyword" required maxlength="50">
5 </label>
6 <input type="submit" value="ricerca">
7 </form>
Viene settata l'opzione per far sì che il browser proceda con l'autocompletamento del testo inserito
(autocomplete="on"), si imposta attraverso l'attributo placeholder il testo che compare nel campo
quando la pagina viene caricata, attraverso required si definisce come obbligatoria la compilazione del
campo.
E ancora, nella sezione dei commenti, per i campi destinati all'inserimento dell'indirizzo e-mail e del sito
web personale, sono stati usati i tipi di input email e url:
<label>
1 Email:
2 <input
type="email"
3 placeholder="[email protected]">
4 </label>
5 <label>
6 WWW:
7 <input
type="url"
8 placeholder="http://mywebsite.com">
</label>
name="email"
autocomplete="on"
name="url"
autocomplete="on"
Stili e presentazione
Terminato il lavoro sulla struttura, si può passare all'applicazione degli stili. Nel preparare i CSS, abbiamo
pensato di fare affidamento il più possibile su alcune delle nuove funzionalità introdotte con i CSS3. Il
risultato sono due varianti del template, create da Filippo Buratti, che differiscono solo per alcuni dettagli
relativi alla presentazione. I link: versione 1 e versione 2.
Le differenze nella resa visuale sono eventualmente dovute al mancato supporto da parte nei singoli
browser delle funzionalità e proprietà CSS3.
Una nota fondamentale è da aggiungere a proposito di Internet Explorer. Il browser di Microsoft supporta
nativamente i nuovi elementi strutturali solo a partire dalla versione 9. Per garantire il supporto sulle
versioni precedenti e far sì che gli stili vengano applicati correttamente anche a tag che Internet Explorer
non interpreta, abbiamo inserito nella <head> della pagina il riferimento ad html5shim, uno script creato
per lo scopo da Remy Sharp. L'inserimento è semplice, basta copiare e incollare nei vostri progetti queste
righe di codice:
1 
Dal momento che si usano i commenti condizionali, lo script sarà applicato solo alle versioni di IE inferiori
alla 9.
Per completezza e per garantire al massimo livello la compatibilità cross-browser rispetto agli elementi
HTML5 combinati agli stili, è stato incorporato anche un CSS di reset disponibile su HTML5 Doctor:
1 <link rel="stylesheet" href="reset.css" media="screen">
78 - 145
Nuova linfa alle applicazioni web
L’acronimo alla base di HTML è chiaro, ‘HyperText Markup Language’; ipertesto: un insieme di documenti
messi in relazione tra loro da parole chiave. La tecnologia in questione dovrebbe essere quindi utile per
strutturare collezioni di contenuti legati fra di loro in modo più o meno oggettivo; Wikipedia ne è il classico
e più calzante esempio. Lascia invece un po’ più perplessi realizzare che l’HTML è sempre più la base
di vere e proprie applicazioni web: google docs, Google Maps, Meebo, solo per citarne alcune, dove la
forma ipertestuale è decisamente marginale quando non completamente assente. Come già abbiamo
avuto modo di anticipare, l’HTML5 nasce anche per meglio indirizzare questo crescente filone di realtà
web, mettendo a disposizione dello sviluppatore una nutrita serie di nuovissime API studiate per dare
adito alle più ardite applicazioni all’interno di un browser. È un po’ come se il prematuro sogno di Marc
Andressen stesse per avverarsi.
La risposta ad un bisogno molto sentito
Lo sforzo profuso prima dal gruppo WHAT e poi dal W3C è stato parzialmente accentuato dalla necessità
di porre un freno al dilagare di tecnologie, parallele all’HTML, sorte per rispondere ai nuovi bisogni delle
applicazioni web. Il motivo principale di questo comportamento è da ricercarsi nella necessità di
mantenere unito il controllo sullo standard e, conseguentemente, di evitare che l’insediamento in pianta
stabile di soluzioni non interne al consorzio possa complicare di fatto la gestione dell’intero sistema.
Flash ed il cugino Flex sono due ottimi esempi della tendenza intrapresa dal web in tal senso, seguono
Google Gears, Google O3D e un’infinita di altre estensioni, ognuna delle quali cerca di riempire un vuoto
più o meno piccolo percepito dagli utenti della rete.
I punti chiave dell’offerta
Ecco un elenco esaustivo delle API trattate nelle prossime lezioni della guida. E` possibile suddividere tale
insieme sommariamente in due categorie: nella prima, multimedialità, trovano spazio le API studiate per
gestire ed incanalare nuovi strumenti di comunicazione, come video, audio e grafica bi/tridimensionale;
nella seconda, che invece potremmo chiamare arricchimento, si posizionano le nuove funzionalità
studiate per avvicinare l’esperienza di fruizione di una web application a quella di un normale programma
eseguito in una finestra del desktop.
Multimedialità
•
•
•
•
Gestione di flussi video (il tag <video> e le relative API);
Gestione di flussi audio (il tag <audio> e le relative API);
Gestione di grafica libera bi/tridimensionale (il tag <canvas> e le relative API);
Grafica vettoriale e notazioni matematiche (i tag <svg>, <math> e le relative API).
Arricchimento
•
•
•
•
•
•
Applicazioni web offline (file .manifest e API di sincronizzazione);
Memorizzazione di informazioni sul browser (WebSQL e LocalStorage API);
Javascript asincrono e parallelo (Web Workers API);
Comunicazioni bidirezionali tra client e server (Web Socket API);
Drag and Drop;
Utilizzo di informazioni georeferenziate (GeoLocation API).
Oltre a questo elenco, meritano di essere citate e brevemente esplorate alcune funzionalità che, seppur
non rivoluzionarie, promettono di semplificare alcuni aspetti dello sviluppo odierno di applicazioni web.
Manipolare la cronologia: le History API
Tutti conosciamo il meccanismo per navigare all’interno della cronologia del browser:
1 alert("La cronologia contiene " + history.length + " documenti." );
2 // torna al documento precedente
3 history.back();
Meno invece sanno che di questo oggetto history, seppur supportato dalla totalità degli user-agent, non
esiste traccia nelle attuali specifiche HTML. Con l’avvento della versione 5 il W3C ha deciso di includere
le API per la navigazione della cronologia all’interno del futuro standard; l’occasione si è rivelata
79 - 145
ghiotta anche per un interessante arricchimento delle funzionalità. In particolare è ora possibile creare
nuovi elementi della cronologia associando loro un payoff di dati, come ad esempio un hash chiavevalore, che poi potrà essere recuperato attraverso l’utilizzo del tasti di navigazione del browser.
Vediamone un esempio:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Messaggi dalla storia:</title>
5 <script>
6
historyInject = function(){
7
message = prompt('Che messaggio vuoi salvare in history?');
8
history.pushState(message, document.title + " '" + message + "'");
9
};
10 onpopstate = function(event){
11
document.getElementById("messagelist").
12
insertAdjacentHTML('beforeend',"<li>"+event.state+"</li>");
13 }
14 </script>
15 </head>
16 <body>
17 <h1>Lista dei messaggi presenti nella cronologia:</h1>
18 Premi il tasto back del browser o <a href="javascript:historyInject();return false;">
19 carica un nuovo messaggio.</a>
20 <ul id="messagelist"></ul>
21 </body>
22 </html>
La funzione historyInject crea, attraverso il metodo pushState, un nuovo elemento nella cronologia che
contiene il messaggio generato dall’utente. Successivamente, la pressione del tasto back del browser
viene intercettata dall’handler onpopstate che recupera il messaggio e lo aggiunge all’elenco a fondo
pagina. Con questo meccanismo diviene possibile simulare una normale navigazione con i pulsanti back e
forward anche all’interno di applicazioni web che fanno uso intensivo di Javascript, come ad esempio la
maggior parte delle realizzazioni sviluppate con il framework Ext.JS.
Associare protocolli e MIME type alla propria web application
Supponiamo di aver sviluppato una web application per inviare e ricevere sms. Le specifiche HTML5
introducono la possibilità di registrare la propria applicazione come gestore preposto ad uno specifico
protocollo; nel nostro caso sarebbe quindi auspicabile che qualunque link nel formato:
1 <a href="sms://+39396819577">Manda un SMS a Sandro Paganotti</a>
convogli l’utente alla nostra applicazione a prescindere dal sito in cui si trova il link, un po’ come succede
con il client di posta al click di link col protocollo ‘mailto’. Registrare un protocollo è molto semplice:
1 <!doctype html>
2 <html>
3 <head>
4 <title>TuttiSMS: Il servizio per inviare e ricevere SMS</title>
5 <script>
6 registraProtocollo = function(){
7
navigator.registerProtocolHandler(
8
'sms', 'http://localhost/invia_sms?dest=%s', 'TuttiSMS');
9 };
10 </script>
11 </head>
12 <body onload="registraProtocollo();">
13 </body>
14 </html>
Caricando la pagina in un browser che supporta questa funzionalità, noi abbiamo usato Firefox 3.5,
verremo notificati della volontà da parte dell’applicazione web di registrare il protocollo sms e potremo
decidere se consentire o meno l’operazione:
Figura 41 (click per ingrandire) - Associazione del protocollo su Firefox
80 - 145
Una volta accettata questa associazione, ad ogni link nel formato: ‘sms://qualsiasi_cosa’ seguirà un
redirect automatico all’indirizzo specificato come parametro nella funzione registerProtocolHandler, nel
nostro caso: ‘http://localhost/invia_sms?dest=%s’, con la particella ‘%s’ sostituita con l’intero link in
questione. Ecco un esempio di risultato:
1 http://localhost/invia_sms?dest=sms%3A%2F%2F%2B39396819577
E’ possibile seguire esattamente la stessa procedura anche per registrare uno specifico MIME type
utilizzando la funzione gemella: registerContentHandler.
Un progetto ambizioso
Chiudiamo la lezione gettando le basi per lo sviluppo del progetto guida associato al prossimo gruppo di
lezioni: FiveBoard, una lavagna interattiva basata su canvas. Chiaramente l’obiettivo del progetto è
quello di fornire un pretesto per poter esplorare le novità introdotte dall’HTML5 in un contesto un po’ più
ampio rispetto a quello solitamente offerto. Proprio per questo alcune scelte potranno essere opinabili in
un ottica di efficenza o di strutturazione dell’architettura.
Bene, cominciamo creando una cartella di progetto, ‘fiveboard’, contenente un file ‘index.html’ e una
cartella ‘js’ con un ulteriore file ‘application.js’:
Figura 42 - Vista delle cartelle
Ora impostiamo la pagina html perché richiami il file Javascript:
1 <!doctype html>
2 <html lang='it'>
3 <head>
5 <title>FiveBoard: uno spazio per gli appunti.</title>
6 <script src="js/application.js" defer></script>
7 </head>
8 </html>
L’attributo defer, poco supportato perché definito in modo poco chiaro nelle specifiche HTML4, assume
nella versione 5 un significato più delineato:
“(se) [..] l'attributo defer è presente, allora lo script viene eseguito quando la pagina ha finito
di essere processata.”
In questo nuovo contesto è interessante l’utilizzo di defer per velocizzare il caricamento della pagina
posticipando in seconda battuta il load del file Javascript. Da notare, prima di proseguire, anche l’aggiunta
81 - 145
nelle specifiche dell’attributo async che causa il caricamento dello script in parallelo, o asincrono, da qui il
nome, rispetto a quello della pagina.
Prima di concludere sinceriamoci del funzionamento del nostro impianto aggiungendo al file Javascript:
1 alert("pronti per cominciare!");
e caricando il tutto all’interno di un browser:
Figura 43 (click per ingrandire) - Risultato dell'operazione
82 - 145
Applicazioni web offline (file .manifest)
Con le Offline API è possibile specificare in un apposito file, detto manifest, un elenco di asset (pagine
web, filmati Flash, immagini, fogli di stile CSS, Javascript e quant’altro può finire in una pagina web) dei
quali vogliamo che il browser conservi copia locale. Tali oggetti, dopo la prima sessione di
navigazione online, resteranno quindi accessibili anche in assenza di una connessione di rete. In questo
modo è possibile creare applicazioni web perfettamente funzionanti anche offline. Il primo passo
per ottenere questo risultato è aggiungere l’attributo manifest all’elemento html segnalando così allo user
agent l’esistenza di un file preposto alla memorizzazione offline:
1 <!doctype html>
2 <html lang='it' manifest='fiveboard.manifest'>
3 ...
A questo punto deve essere creato un file con MIME type ‘text/cache-manifest’, dal nome specificato nel
valore dell’attributo, contenente l’elenco dei documenti per i quali si richiede la memorizzazione offline.
Ad esempio, considerando il nostro progetto guida, il file potrebbe risultare:
1 CACHE MANIFEST
2 index.html
3 js/application.js
Per fare in modo che il file venga servito con il corretto MIME type ci sono molte soluzioni, tutte,
purtroppo, molto legate al tipo di webserver che sostiene la pagina. Nel caso si tratti del popolare Apache
la soluzione più veloce consiste nel creare un file ‘.htaccess’ nella cartella principale del progetto
contenente la seguente istruzione:
1 AddType text/cache-manifest manifest
Una volta soddisfatte queste condizioni è possibile verificare il buon funzionamento delle API utilizzando
un browser come Chromium e caricando la pagina assicurandosi di avere i Developer Tools attivati ( CTRL
+ SHIFT + J) e posizionati sulla sezione ‘Console’ (figura 1):
Figura 1 (click per ingrandire)
Aggiornando nuovamente il contenuto della pagina riceveremo conferma della corretta memorizzazione in
locale dei documenti specificati nel file manifest, ora disponibili anche per consultazioni in assenza di rete
(figura 2):
Andare in profondità
Il file .manifest di cui abbiamo accennato nella sezione precedente, offre una serie di interessanti
funzionalità aggiuntive; in primo luogo è possibile indicare al browser percorsi di fallback, da
utilizzare nel caso in cui durante la navigazione offline si necessiti di risorse non disponibili:
1 CACHE MANIFEST
2 index.html
3 FALLBACK:
4 news.html offline.html
In questo esempio, il tentativo di navigazione verso la pagina ‘news.html’ verrà risolto, in caso di browser
in stato offline, servendo la pagina ‘offline.html’. In caso fosse necessario convogliare risorse multiple si
può anche far ricorso a wildcard, ad esempio:
1 CACHE MANIFEST
2 index.html
3 FALLBACK:
4 news.html offline.html
5 news/* offline.html
Così facendo anche la navigazione verso una pagina di dettaglio news, come ad esempio ‘news/
10/12/2010/nuovi-progressi-al-cern’ verrà servita in assenza di rete con il contenuto di ‘offline.html’.
Usando la sezione ‘NETWORK’ è invece possibile notificare risorse che devono sempre essere recuperate
online:
83 - 145
1 CACHE MANIFEST
2 index.html
3 NETWORK:
4 saldo_conto_corrente.php
Le API associate
La gestione della cache introduce tutta una serie di eventi e proprietà che consentono di acquistare
controllo su ogni passo della procedura, vediamoli in questo esempio (offline.html), che stampa a video
un nuovo elemento di un elenco puntato per ogni evento intercettato:
84 - 145
1 <!doctype html>
2 <html lang='it' manifest='offline.manifest'>
3 <head>
4 <title>Tutti i passi della cache</title>
5 <script>
6 // Funzione di servizio:
7 say = function(message){
8
document.getElementById("cache-steps").
9
insertAdjacentHTML('beforeend',"<li>"+message+";</li>");
10 }
11 clear = function(message){
12 document.getElementById("cache-steps").innerHTML = "";
13 }
14
15 // L'oggetto che controlla la cache
16 var appCache = window.applicationCache;
17
18 // Nuovi eventi disponbili con le Offline API
19 appCache.addEventListener('checking', function(ev) {
20 say("Controllo, se posso, che il .manifest online non sia cambiato");
21 }, false);
22
23 appCache.addEventListener('noupdate', function(ev) {
24 say("Il .manifest non è cambiato");
25 }, false);
26
27 appCache.addEventListener('downloading', function(ev) {
28 say("Inizio a scaricare i file listati dal manifest che non ho già in cache");
29 }, false);
30
31 appCache.addEventListener('progress', function(ev) {
32 say("Scarico una risorsa");
33 }, false);
34
35 appCache.addEventListener('cached', function(ev) {
36 say("Tutte le risorse sono state scaricate");
37 }, false);
38
39 appCache.addEventListener('updateready', function(ev) {
40 say("Ho scaricato una nuova versione della cache e sono pronto "+
41 "a sostituirla alla precedente");
42 }, false);
43
44 appCache.addEventListener('obsolete', function(ev) {
45 say("Ho cercato il .manifest online ottenendo un 404 o 410 come risposta " +
46 "probabilmente il sito non supporta più funzionalità di " +
47 "caching, cancello la cache in locale.");
48 }, false);
49
50 appCache.addEventListener('error', function(ev) {
51 say("Ops, si è verificato un errore");
52 }, false);
53 </script>
54 </head>
55 <body>
56 <button onclick="clear();appCache.update();">Forza il controllo della cache</button>
57 <ul id="cache-steps">
58 </ul>
59 </body>
60 </html>
Proviamo ad eseguire questa pagina in Chromium senza aver preventivamente creato il file
‘offline.manifest’ (figura 3):
Figura 3
85 - 145
Creiamo ora un semplice ‘offline.manifest’ come segue,
1 CACHE MANIFEST
2 offline.html
e ricarichiamo la pagina (figura 4):
Figura 4
Ricarichiamo nuovamente la pagina per certificare l’avvenuto cache delle risorse (figura 5):
Figura 5
Bene, da qui si dipanano tutta una serie di comportamenti interessanti come ad esempio: modificare il file
.manifest e forzare il controllo della cache, oppure rimuovere il file .manifest e ricaricare la pagina.
Provando ognuno di essi con lo script che abbiamo appena steso sarà facile identificare i vari eventi
coinvolti. Ecco la demo.
Conclusioni
Come avete potuto notare le attività per far in modo che il nostro progetto guida benefici delle Offline API
sono state semplici e di pochissimo impatto sull’architettura della pagina. E` importante però ricordare
che man mano andremo ad aggiungere risorse al progetto (immagini, librerie, etc...) sarà necessario
includerle nel file .manifest pena il malfunzionamento dello stesso in assenza di connessione.
86 - 145
API e Web Applications
Applicazioni web offline (.manifest)
No
3.5+ 4.0+ 2.0+ 10.6+
87 - 145
Indexed Database API
Queste API nascono per dare la possibilità di creare e manipolare un database di ispirazione NoSQL
memorizzato all'interno del browser dell'utente. Ogni database, identificato da un nome, può contenere
un numero arbitrario di Object Store, letteralmente contenitori di oggetti: ad esempio un ipotetico
database ‘libreria' potrebbe ospitare i seguenti Object Store: Libri, Clienti. Sia ‘Libri' che ‘Clienti' non sono
altro che strutture paragonabili ad array associativi ordinati, dove ogni coppia chiave-valore rappresenta
un oggetto, quindi in questo caso o un libro o un cliente.
All'interno di un Object Store è possibile eseguire le normali operazioni di inserimento, modifica,
eliminazione e ricerca; le API sono state pensate per ragionare con record in un formato JSON-like ma
nulla vieta di memorizzare oggetti Javascript di fattura diversa, purché serializzabili.
Come funzionano le API
Utilizziamo Chromium per un tour operativo di questo interessante set di API; iniziamo preparando un
documento HTML5 e creando il database:
1 <!doctype html>
2 <html>
3 <head>
4 <title> WebLibreria: gestionale per librerie </title>
5 <script>
6 setup = function(){
7
if ('webkitIndexedDB' in window){
8
indexedDB = webkitIndexedDB;
9
IDBCursor = webkitIDBCursor;
10 IDBKeyRange = webkitIDBKeyRange;
11 IDBTransaction = webkitIDBTransaction;
12 }else if ('moz_indexedDB' in window){
13 indexedDB = moz_indexedDB;
14 }
15 }
16 init = function(){
17 setup();
18 var request = indexedDB.open("WebLibreria", "Il gestionale per librerie");
19 }
20 </script>
21 </head>
22 <body onload="init();">
23 </body>
24 </html>
Essendo, ad oggi, queste features ancora sperimentali Chromium (e Firefox) prefissano le classi di
riferimento con la particella ‘webkit': la funzione ‘setup' serve solamente per creare degli alias che
abbiano nomi più aderenti alle specifiche. Mano a mano che queste API si avvicineranno allo status di
standard assisteremo alla rimozione di questi prefissi e potremo commentare la funzione setup. La
creazione del database avviene attraverso l'istruzione ‘indexedDB.open', che accetta come parametro il
nome e la descrizione dell'oggetto che stiamo creando; in caso un database con lo stesso nome e lo
stesso dominio di origine sia già presente nel browser allora verrà utilizzato quest'ultimo.
A questo punto possiamo intercettare gli eventi di avvenuta creazione della connessione e di errore
durante la procedura gestendoli nel modo che meglio ci aggrada:
2 setup();
4 request.onsuccess = function(){console.log("Connessione Ok!");}
5 request.onerror = function(){console.log("Ops, errore");}
6}
Eseguiamo la pagina all'interno di Chromium prestando attenzione alla linguetta 'console' all'interno dei
Developer Tools (CTRL + SHIFT + J) e avremo conferma dell'avvenuta connessione/creazione al database
(figura 1):
88 - 145
Ora che abbiamo stabilito una connessione è essenziale determinare se l'utente sia alla sua prima visita,
perché in questo caso è necessario procedere con la creazione degli object store e della struttura
necessari. Per gestire questo meccanismo le API mettono a disposizione il concetto di versione, impostata
a null per un database appena creato, che può essere utilizzata proprio capire quando sia necessario
apportare modifiche alla struttura. Ad esempio:
1 ...
3 setup();
5 request.onsuccess = controllaVersione;
7 }
8 controllaVersione = function(event){
9 window.database = event.result;
10 if(database.version != "1.0"){
11 var request = database.setVersion("1.0");
12 request.onsuccess = aggiornaLoSchema;
14 }else{
15 // il database è già aggiornato alla versione più recente
16 }
17 }
18 aggiornaLoSchema = function(){
19 console.log("Qui posso aggiornare lo schema");
20 }
21 ...
La funzione aggiornaLoSchema viene invocata solamente nel caso in cui la versione del database sul
browser dell'utente sia diversa da quella attesa dal javascript (in questo caso la ‘1.0'); in particolare
registrare una funzione sul callback ‘onsuccess' del metodo setVersion è l'unico modo in cui sia consentito
dalle specifiche modificare la struttura del database.
Se ora provate questo codice all'interno del browser, nella linguetta console vedrete comparire la scritta
‘Qui posso aggiornare lo schema', se poi ricaricate nuovamente la pagina invece noterete che tale
messaggio scompare: il database è infatti già nella versione “1.0”, quindi il flusso del programma transita
attraverso il blocco else, che è al momento vuoto. Per cancellare il database creato e poter così ripetere la
procedura è necessario svuotare completamente la cache, chiudere Chromium e riaprirlo (figura 2):
A questo punto creiamo la struttura del database: per prima cosa dobbiamo aprire una transazione,
successivamente istruiamo il database alla creazione dell'object store ‘libri', con chiave sul campo ‘isbn',
e di due indici, rispettivamente per i campi ‘titolo' e ‘autore'. Approfittiamone anche per creare la funzione
recuperaLibri, che verrà invocata sia al completamento della struttura sia nel caso il database sia già alla
versione desiderata:
89 - 145
1 ...
2 controllaVersione = function(event){
3 window.database = event.result;
4 if(database.version != "1.0"){
5
var request = database.setVersion("1.0");
6
request.onsuccess = aggiornaLoSchema;
7
request.onerror = function(){console.log("Ops, errore");}
8 }else{
9
recuperaLibri();
10 }
11 }
12 aggiornaLoSchema = function(){
13 window.transazione = event.result;
14 transazione.oncomplete = recuperaLibri;
15 transazione.onabort = function(){console.log("Ops, errore");}
16 var libri = database.createObjectStore("libri", "isbn", false);
17 var titolo = libri.createIndex("titolo", "titolo", false);
18 var autore = libri.createIndex("autore", "autore", false);
19 }
20 recuperaLibri = function(){
21 // recupera l'elenco dei libri e stampali a video
22 }
23 ...
La funzione createObjectStore richiede 3 parametri, di cui solamente il primo, il nome, obbligatorio; il
secondo parametro rappresenta il nome della proprietà del record che vogliamo funga da chiave
all'interno dell'object store. Il terzo parametro imposta invece la proprietà autoincrement; nel caso non sia
presente una chiave nel record in inserimento e autoincrement = true, una chiave verrà generata in
automatico. Le due chiamate alla funzione createIndex provvedono alla creazione di due indici, utili per
ricerche e query, sui campi ‘titolo' e ‘autore'; il terzo parametro impostato a false consente la presenza di
valori duplicati. Ora che abbiamo creato la struttura del database stampiamo a video l'elenco, per ora
vuoto, dei libri registrati e creiamo un piccola form per l'inserimento di un nuovo volume:
90 - 145
1 ...
2 recuperaLibri = function(){
3 window.transazione = database.transaction(["libri"],
4
IDBTransaction.READ_WRITE, 0);
5 var request = transazione.objectStore("libri").openCursor();
6 request.onsuccess = stampaLibri;
8 }
9 stampaLibri = function(){
10 var cursor = event.result;
11 if( cursor != null){
12 document.getElementById("catalogo_libri").insertAdjacentHTML('beforeend',
13
"<li>" + cursor.value.autore + ": " + cursor.value.titolo +
14
" (ISBN: "+ cursor.value.isbn +"); </li>");
15 cursor.continue();
16 }
17 }
18 aggiungiLibro = function(){
19 // aggiungiamo un nuovo libro all'object store
20 }
21 </script>
22 </head>
24 <h1> WebLibreria: gestionale per librerie</h1>
25 <section>
26 <h1>Elenco dei libri</h1>
27 <ul id="catalogo_libri">
28 </ul>
29 </section>
30 <aside>
31 <h1>Aggiungi un nuovo libro</h1>
32 <form name="aggiungi_libro" onsubmit="aggiungiLibro(this); return false;">
33
<fieldset name="info_libro">
34
<legend>Dati richiesti:</legend>
35
<label>Titolo:
36
<input name="titolo" type="text" required placeholder="es: Dalla terra alla luna">
37
</label>
38
<label>Autore:
39
<input name="autore" type="text" required placeholder="es: Jules Verne">
40
</label>
41
<label>ISBN:
42
<input name="isbn" type="text" required placeholder="es: 8862221320">
43
</label>
44
<input type="submit" value="Aggiungi">
45
</fieldset>
46 </form>
47 </aside>
48 </body>
49 </html>
Possiamo tranquillamente tralasciare la spiegazione della nuova porzione di codice HTML aggiunto:
trattasi semplicemente di un form che all'invio chiama una funzione, ancora da sviluppare, per l'aggiunta
di un nuovo libro. Molto più interessanti sono invece recuperaLibri e stampaLibri. In recuperaLibri viene
creata una nuova transazione che coinvolge l'object store ‘libri'; il secondo parametro indica il tipo di
transazione: purtroppo lettura/scrittura (IDBTransaction.READ_WRITE) è l'unica opzione supportata ad
oggi; il terzo valore rappresenta invece il timeout della transazione: lo 0 utilizzato significa mai. Vediamo
l'istruzione successiva:
1 var request = transazione.objectStore("libri").openCursor();
La funzione openCursor inizializza un puntatore, detto anche cursore, al primo record dell'object store
‘libri'. La funzione stampaLibri, che viene chiamata appena il cursore è stato creato e popola una lista con
i libri in catalogo, agisce come una specie di ciclo, infatti il metodo continue non fa nient'altro che
richiamare nuovamente stampaLibri, posizionando però il cursore al record successivo; questo fino a
quando non si giunge alla fine dei risultati di ricerca, a quel punto il valore del cursore diviene null e un
apposito if si preoccupa dell'abbandono della funzione.
Completiamo il nostro progetto con la funzione aggiungiLibro:
91 - 145
1 ...
2 aggiungiLibro = function(data){
3 var elements = data.elements
5
6 var request = transazione.objectStore("libri").put({
7
titolo: elements['titolo'].value,
8
autore: elements['autore'].value,
9
isbn: elements[ 'isbn'].value
10 }, elements[ 'isbn'].value));
11 request.onsuccess = function(){pulisciLista(); recuperaLibri();}
13 }
14 pulisciLista = function(){
15 document.getElementById("catalogo_libri").innerHTML ="";
16 }
17 </script>
Il metodo interessante in questo caso è il put, che si preoccupa di aggiungere al database, previa apertura
di una transazione appropriata, un nuovo record con gli elementi ricevuti dal form (da notare il secondo
parametro, corrispondente alla chiave del record). Da notare che esiste anche un metodo add che
differisce nell'impedire la creazione di un record la cui chiave sia già presente nel database.
Eseguiamo un ultima volta l'applicazione, proviamo ad inserire un paio di libri ed ammiriamone il risultato
(figura 3):
Una funzione di ricerca
Aggiungiamo questa funzione al progetto:
1 ...
2 ricercaLibro = function(autore){
3 pulisciLista();
5
6 var request = transazione.objectStore("libri").index('autore').openCursor(
7
IDBKeyRange.bound(autore,autore+"z",true,true), IDBCursor.NEXT);
8 request.onsuccess = stampaLibri;
10 }
11 </script>
L'unica differenza rispetto alla già analizzata recuperaLibri sta nel fatto che, in questo caso, con il metodo
‘index(‘autore')' indichiamo al database che la selezione dovrà essere fatta utilizzando come
discriminante l'indice ‘autore' creato sull'omonimo campo. In particolare tale selezione dovrà recuperare
tutti i record il cui autore inizia con una stringa passata al metodo. Per provare questa funzione di ricerca
creiamo un nuovo frammento HTML in coda alla form di inserimento:
1 ...
2 </form>
3 <h1>Cerca un libro per autore</h1>
4 <form name="cerca_per_autore"
5
onsubmit="ricercaLibro(this.elements['keyword'].value); return false;">
6
<fieldset name="campi_ricerca">
7
<legend>Ricerca per autore:</legend>
8
<label>Inizio del nome:
9
<input name="keyword" type="search" required placeholder="es: Franc">
10
</label>
11
<input type="submit" value="Ricerca">
12 </fieldset>
13 </form>
14 </aside>
15 ...
Ricarichiamo l'applicazione e proviamo ad inserire una valida stringa di ricerca (figura 4):
92 - 145
Conclusione
Le Indexed Database API sono uno strumento estremamente potente che consentono di beneficiare di un
vero e proprio database all'interno del browser dell'utente. Le stesse funzionalità, anche se in una sintassi
più orientata a SQL, venivano offerte anche dalle promettenti Web SQL Database API, abbandonate dal 4
dicembre 2010 per motivi di sicurezza e di, ironia della sorte, troppa uniformità di implementazione da
parte degli user-agent (avevano tutti scelto SQLlite come back-end per questo tipo di specifiche).
Prima di passare alla prossima lezione ricordo che le stesse API che abbiamo usato in forma asincrona
all'interno di questo progetto sono disponibili anche nel formato sincrono; per maggiori informazioni in
questo senso rimando alla documentazione ufficiale.
Per testare il tutto potete partire dalla demo.
9.0+ (parziale) 4.0+ (parziale) 5.0+ (parziale) 8.0+ (parziale) No
93 - 145
WebStorage API
Le WebStorage API nascono per risolvere due problematiche tipiche dei cookies; la loro limitata
dimensione massima (tipicamente 4K) e l’impossibilità di avere cookies differenziati tra due
diverse sessioni di navigazione sullo stesso dominio dallo stesso browser. Il secondo punto si esplicita
molto bene cercando di mantenere aperti contemporaneamente due account Gmail sullo stesso browser,
ogni navigazione sul primo comporterà il logout del secondo e viceversa.
I problemi in questione sono stati risolti creando due nuovi oggetti. sessionStorage consente di avere un
meccanismo di persistenza dei dati distinto per ogni sessione di navigazione in ogni finestra, o tab, del
browser. Usando sessionStorage sarebbe quindi possibile coordinare l’apertura contemporanea di due
distinti account GMail sullo stesso browser. localStorage mantiene il comportamento del cookie essendo
comune a tutte finestre del browser che condividono lo stesso dominio. Entrambi sono inoltre stati studiati
per ospitare molti più dati, almeno 5Mb, ed essere persistenti anche alla chiusura ed alla riapertura del
browser.
Le specifiche
Le API si compongono di una singola interfaccia Storage. localStorage e sessionStorage implementano
entrambi questa interfaccia e quindi dispongono dello stesso set di metodi anche se chiaramente restano
due oggetti distinti. Le principali operazioni possono essere eseguite come su di un normale array
associativo:
1 localStorage.nome = 'Sandro';
2 localStorage.cognome = 'Paganotti';
o con l’ausilio di metodi dedicati:
1 localStorage.setItem('nome','Sandro');
2 localStorage.getItem('nome'); // ritorna 'Sandro'
Se però ci accingiamo ad inserire valori diversi da stringhe il comportamento diverge: in un oggetto come
localStorage o sessionStorage è consentita la memorizzazione di soli contenuti testuali:
1 localStorage.ordini = Array("1","2","3");
2 localStorage.ordini; // ritorna "1,2,3"
È quindi necessario ricorrere a stratagemmi, come la serializzazione su JSON, per ottenere l’effetto
desiderato:
1 localStorage.ordini = JSON.stringify(Array(1,2,3));
2 JSON.parse(localStorage.ordini); // ritorna un array di 3 elementi: [1,2,3]
Chromium mette a disposizione degli sviluppatori web che intendono utilizzare queste API la linguetta
‘Storage’ dei Developer Tools (raggiungibili da menu o con la combinazione di tasti Control - Shift - J e
visibile in figura 1):
Un esempio
Utilizziamo il progetto guida per implementare una meccanica di salvataggio dei dati basata su
localStorage. Non avendo ancora sviluppato la gestione della lavagna ci concentreremo sul memorizzare
e visualizzare stringhe inserite dall’utente attraverso una textarea, iniziamo con il markup completando il
file index.html:
94 - 145
1 <!doctype html>
2 <html lang='it' manifest='fiveboard.manifest'>
3 <head>
5 <title>FiveBoard: uno spazio per gli appunti.</title>
6 <script src="js/application.js" defer></script>
7 </head>
8 <body>
9 <hgroup>
10 <h1>Dì qualcosa </h1>
11 <h2>FiveBoard ricorda tutto</h2>
12 </hgroup>
13 <form name="form_da_ricordare">
14 <menu type="toolbar">
15
<button type="button" onclick="salvaIlDato(this.form.elements['testo_da_ricordare'].value);">
16
Memorizza quanto scritto
17
</button>
18
<button type="button" onclick="recuperaIlDato(this.form.elements['testo_da_ricordare']);">
19
Recupera l'ultimo testo memorizzato
20 </button>
21 </menu>
22 <label>Cosa hai in mente?
23
<textarea name="testo_da_ricordare" required autofocus
24
placeholder="La lista della spesa, il teatro di questa sera ..."></textarea>
25 </label>
26 </form>
27 </body>
28 </html>
Dato che questo progetto si configura più come una web application che come un sito web,
implementiamo una classica struttura di controllo desktop-oriented: la toolbar. All’interno di questa, due
semplici pulsanti gestiscono le azioni di memorizzazione e recupero del testo salvato attraverso una
textarea; l’attributo ‘autofocus’ indica allo user-agent di portare il cursore in posizione di inserimento testo
nell’istante di completo caricamento della pagina.
Ora, nel file application.js completiamo l’esempio introducendo le funzioni di salvataggio e di recupero
informazioni basate su localStorage:
1 salvaIlDato = function(info_da_salvare){
2 localStorage.ultimo_pensiero = info_da_salvare;
3 alert("Memorizzazione effettuata");
4 };
5
6 recuperaIlDato = function(elemento){
7 if(confirm("Sostituire il contenuto attuale con l'ultimo pensiero memorizzato?")){
8
elemento.value = localStorage.ultimo_pensiero;
9 }
10 };
Bene, non ci resta che provare l’esempio all’interno di Chromium e constatare il suo semplice ma efficace
funzionamento, capace di persistere l’informazione anche a seguito di un riavvio del browser.
WebStorage
8.0+ 3.6+ 3.1+ 2.0+ 10.5+
95 - 145
Web Workers API
I Web Workers nascono per consentire l’esecuzione di porzioni di codice Javascript in modo
asincrono, senza intaccare le performance della pagina web in visualizzazione. I Web Workers, nient’altro
che file Javascript, possono essere comparati a dei thread che la pagina web può lanciare e con i quali può
dialogare attraverso semplici metodi. Ogni WebWorker può eseguire a sua volta altri WebWorkers ed
ognuno di essi può effettuare operazioni di I/O, calcoli complessi e quant’altro.
Le API in questione prevedono che un WebWorker possa essere generato come oggetto della classe
Worker o SharedWorker: nel primo caso la sua esecuzione sarà limitata alla specifica sessione di
navigazione all’interno della finestra (o tab) del browser che l’ha invocato; nel secondo invece ogni
sessione di navigazione che condivide la stessa origine (lo stesso dominio) potrà connettersi e
scambiare messaggi con il medesimo worker. In questo modo lo SharedWorker assume il ruolo di
coordinatore, ottimo per, ad esempio, propagare su tutte le finestre del browser puntate su di un
particolare dominio un messaggio ricevuto dal server.
Le specifiche
Per creare un Worker l’istruzione da eseguire è decisamente semplice:
1 // pagina principale
2 bot_noioso = new Worker('bot_noioso.js');
Lo script invocato, ‘bot_noioso.js’, verrà eseguito in asincrono e potrà inviare messaggi verso la pagina
principale attraverso la funzione postMessage:
1 // bot_noioso.js
2 postMessage('Perch´ la terra è tonda?');
Per ricevere questi messaggi è necessario registrare una funzione all’handler ‘onmessage’ del worker
contenuto nella variabile bot_noioso: chiaramente utilizzando la stessa variabile è possibile inviare,
sempre tramite postMessage messaggi al worker.
1 // pagina principale
2 bot_noioso = new Worker('bot_noioso.js');
3 bot_noioso.onmessage = function(event){
4 bot_noioso.postMessage(prompt(event.data));
5}
Allo stesso modo è possibile registrare l’handler ‘onmessage’ anche all’interno del file del worker:
1 // bot_noioso.js
2 postMessage('Perch´ la terra è tonda?');
3 onmessage = function(event){
4 if(event.data != null){
5 postMessage('Perch´:' + event.data + ' ?');
6 }
7}
Ora, se lanciamo Chromium potremo sincerarci del buon funzionamento dello script (figura 1):
Figura 1 - Testo
Le API dello SharedWorker differiscono in modo sensibile rispetto a queste, anche se ovviamente
mantengono immutato il funzionamento di base; per poterle trattare con la dovuta cura costruiamo un
piccolo esempio che le utilizzi.
Ecco la demo.
Un esempio
Continuiamo con il progetto guida; l’obiettivo di questo capitolo è beneficiare delle feature di uno
SharedWorker per implementare una dashboard di controllo, che amministri le sessioni di Fiveboard
aperte contemporaneamente in un browser. Per raggiungere questo (ambizioso) bersaglio creeremo un
file ‘js/hub.js’, presso il quale tutte le finestre attive del progetto dovranno registrarsi, che convoglierà le
informazioni da e verso una console ‘dashboard.html’. Ecco uno schema dell’architettura (figura 2):
96 - 145
Le comunicazioni da e verso lo SharedWorker transitano attraverso oggetti chiamati MessagePort,
nell’immagine qui sopra sono esplicitate 4 MessagePort. Una MessagePort è utilizzata implicitamente
anche dall’oggetto Worker del capitolo precedente e quindi non ci si deve sorprendere nell’apprendere
che il meccanismo di funzionamento di uno SharedWorker è esattamente lo stesso, fatto salvo che in
questo caso è necessario specificare la porta attraverso la quale si vuole inviare o ricevere il messaggio.
1 // Invio di un messaggio ad uno SharedWorker
2 worker.port.postMessage('...');
3
4 // Ricezione di un messaggio da uno SharedWorker
5 worker.port.onmessage = function(evento){ ... }
6
7 // Dall’interno di uno SharedWorker: invio di un messaggio
8 messageport_del_destinatario.postMessage('...');
9
10 // Dall’interno di uno SharedWorker: ricezione di un messaggio
11 messageport_del_mittente.onmessage = function(event){ ... }
Bene, ecco in breve come dovranno comportarsi i 3 componenti che andremo a definire:
•
Index.html
• Connettersi allo SharedWorker;
• Presentarsi come Client e specificare il proprio nome (il titolo del documento);
•
Dashboard.html
• Connettersi allo SharedWorker;
• Presentarsi come dashboard e ricevere informazioni su tutti i Client già registrati;
• Essere notificata ad ogni nuova registrazione di un Client;
• Mantenere a video un elenco dei Client registrati;
•
Hub.js (SharedWorker)
• Registrare ogni Client e notificare, se presente, la dashboard;
• Registrare la dashboard ed inviarle tutti i Client registrati fino a quel momento.
Lo scambio di messaggi tra le varie parti avverrà tramite stringhe di testo nel formato “ chiave:valore”,
come ad esempio “registra_client:Documento di prova”; questa scelta non è dettata dalle specifiche, che
sono abbastanza lasche in tal senso, ma da una semplice convenzione adottata anche da alcuni esempi
del W3C.
Bene, possiamo partire; iniziamo dal file ‘application.js’ che dovrà assumere questo aspetto:
1 salvaIlDato = function(info_da_salvare){
2 localStorage.setItem("fb_" + titolo_fiveboard,info_da_salvare);
3 alert("Memorizzazione effettuata");
4 };
5 recuperaIlDato = function(elemento){
6 if(confirm("Sostituire il contenuto attuale con l'ultimo pensiero memorizzato?")){
7
elemento.value = localStorage.getItem("fb_" + titolo_fiveboard);
8 }
9 };
10 var titolo_fiveboard = null;
11 window.onload = function(){
12 var worker = new SharedWorker('js/hub.js');
13 worker.port.onmessage = function(evento){
14 nome_comando = evento.data.split(":")[0]
15 valore_comando = evento.data.substr(nome_comando.length + 1);
16 console.log("Ricevuto comando: " + nome_comando);
17 switch (nome_comando){
18
case 'pronto':
19
titolo_fiveboard = prompt("Seleziona il titolo per questa FiveBoard");
20
document.title = "FB: " + titolo_fiveboard;
21
worker.port.postMessage("registra_client:" + titolo_fiveboard);
22 break;
23 }
24 }
25 }
97 - 145
Al caricamento della pagina viene attivata la funzione collegata a window.onload: questa crea il
collegamento con lo SharedWorker (se il worker non è già presente verrà caricato in memoria e lanciato) e
definisce una funzione di ‘ascolto’ nella quale, per ogni messaggio ricevuto, esegue particolari azioni a
seconda della chiave estratta. In questo momento la funzione reagisce alla sola chiave ‘pronto’ chiedendo
all’utente un titolo del documento ed inviando il risultato al worker con la chiave ‘registra_client’.
Il titolo del documento viene anche utilizzato nelle funzioni di salvataggio e di recupero del dato, per
differenziare fra di loro le variabili memorizzate su LocalStorage in modo da evitare collisioni durante
l’apertura contemporanea di più index.html.
Ora definiamo hub.js:
1 var fiveboards_registrate = new Array();
2 var dashboard = null;
3
4 processa_il_messaggio = function(evento){
7 switch (nome_comando){
8
case 'registra_client':
9
fiveboards_registrate[valore_comando]=evento.target;
10
if(dashboard != null){
11
dashboard.postMessage("nuova_fiveboard:" + valore_comando);
12 }
13 break;
14 case 'registra_dashboard':
15
dashboard = evento.target;
16
for(fiveboard in fiveboards_registrate){
17
evento.target.postMessage("nuova_fiveboard:" + fiveboard);
18 }
19 break;
20 }
21 }
22 onconnect = function(nuova_finestra){
23 var port = nuova_finestra.ports[0];
24 port.onmessage = processa_il_messaggio;
25 port.postMessage("pronto");
26 }
L’handler onconnect viene invocato ogni qualvolta una pagina tenta di aprire una connessione verso il
worker; nella funzione si delega al metodo ‘processa_il_messaggio’ la gestione dei futuri scambi tra in
worker e la pagina; a quest’ultima è inoltre segnalato il concludersi delle operazioni con un messaggio
‘pronto’.
La funzione processa_il_messaggio interpreta e gestisce le due chiavi registra_client e registra_dashboard:
nel primo caso aggiunge la MessagePort di comunicazione con il client ad una collezione
fiveboards_registrate e comunica alla dashboard, se presente, la nuova aggiunta tramite un messaggio
con chiave nuova_fiveboard. Nel secondo caso registra la MessagePort della dashboard (attraverso
evento.target, che corrisponde ad evento.ports[0]) e comunica alla stessa tutti client finora memorizzati
attraverso un ciclo sulla collezione fiveboards_registrate e ad un messaggio con la già nota chiave
nuova_fiveboard.
Perfetto, ora non ci resta che definire markup e Javascript di ‘dashboard.html’:
98 - 145
1 <html lang='it'>
2 <head>
4 <title>Five(Dash)Board: tutto sotto controllo!.</title>
5 <script>
6 var worker = null;
7
8 getInfo = function(title){
9
// to be defined...
10 }
11
13 worker = new SharedWorker('js/hub.js');
15
nome_comando = evento.data.split(":")[0]
16
valore_comando = evento.data.substr(nome_comando.length + 1);
17
console.log("Ricevuto comando: " + nome_comando);
18
switch (nome_comando){
19
case 'pronto':
20
worker.port.postMessage("registra_dashboard")
21
break;
22
case 'nuova_fiveboard':
23
document.getElementById("elenco_fiveboard").insertAdjacentHTML('beforeend',
24
"<li>" +
25
"Titolo: " + valore_comando + " " +
26
"(<a href='javascript:getInfo("" + valore_comando +"");'>" +
27
"più informazioni" + "</a>)" +
28
"</li>");
29
break;
30
}
31 }
32 }
33 </script>
34 </head>
36 <h1>FiveBoard:</h1>
37 <ol id="elenco_fiveboard">
38 </ol>
39 </body>
40 </html>
Il listato è largamente autoesplicativo sulla base di quanto già enunciato: in questo caso le chiavi gestite
sono ‘pronto’ e ‘nuova_fiveboard’: mentre la prima attiva il meccanismo di registrazione
(registra_dashboard) appena visto in hub.js, la seconda si incarica di popolare una lista ordinata
ogniqualvolta la pagina riceve una notifica di registrazione di una nuova fiveboard.
Eseguiamo il tutto in Chromium e godiamoci il risultato dei nostri sforzi (figura 3):
È possibile verificare il tutto in questa demo.
Più informazioni per i più ardimentosi
Vi siete chiesti a cosa debba servire il link ‘più informazioni’ e la funzione getInfo ad esso collegata? L’idea
99 - 145
è questa: al click sul comando il sistema deve mostrare all’utente il testo inserito ed il testo memorizzato
per l’istanza selezionata. Per raggiungere l’obiettivo ecco come interverremo:
1.
2.
La dashboard chiede allo SharedWorker maggiori_informazioni per una data finestra;
Lo SharedWorker mette in diretta comunicazione la finestra in oggetto e la dashboard;
3. La finestra in oggetto comunica alla dashboard testo inserito e testo memorizzato.
Ecco uno schema delle comunicazioni (figura 4):
Il punto 2 è decisamente il più interessante e si avvale di MessageChannel: trattasi di un semplicissimo
oggetto, nato all’interno delle API di comunicazione HTML5, contenente due MessagePort ed istruito per
fare in modo che ogni messaggio in ingresso alla porta1 venga recapitato alla porta2 e viceversa.
Tutto quello che hub.js deve fare è quindi creare un MessageChannel e dare i due capi del filo (le due
MessagePort) rispettivamente alla dashboard ed al client interessato; per fare questo risulta molto
comodo il secondo argomento del metodo postMessage, che consente appunto di specificare un array di
porte da allegare ad un messaggio.
Tutto chiaro? No? Vediamo le modifiche apportate al progetto:
100 - 145
1 // file dashboard.html
2
3 // invio della richiesta allo SharedWorker (punto 1)
4 getInfo = function(title){
5
worker.port.postMessage("maggiori_informazioni:" + title);
6 }
7
8 // una nuova chiave da gestire.
9
case 'attendi_testo':
10
evento.ports[0].onmessage = function(e){
11
alert(e.data);
12
}
13 break;
14
15 // file hub.js
16
17 // una nuova chiave da gestire, creazione del canale ed invio delle porte di
18 // comunicazione alla dashboard ed al client interessato (punto 2)
19 case 'maggiori_informazioni':
20 var channel = new MessageChannel();
21 dashboard.postMessage("attendi_testo",[channel.port1]);
22 fiveboards_registrate[valore_comando].postMessage("richiedi_testo",
23 [channel.port2]);
24 break;
25
26 // file application.js
27
28 // una nuova chiave da gestire, invio delle informazioni richieste attraverso la
29 // MessagePort ricevuta dall’evento (non la MessagePort di comunicazione col worker)
30 // (punto 3)
31 case 'richiedi_testo':
32 evento.ports[0].postMessage(
33
"testo corrente:" + document.forms['form_da_ricordare'].elements
34
['testo_da_ricordare'].value + "n" +
35
"testo memorizzato:" + localStorage.getItem("fb_" + titolo_fiveboard)
36 );
37 break;
Eseguiamo il tutto in Chromium ed ammiriamone il risultato (figura 5):
101 - 145
Conclusioni
I Web Worker sono il classico esempio di API semplici solo in apparenza; più ci si addentra in utilizzi
concreti più si scoprono possibilità e nuove metodologie di sviluppo. È importante ricordare infatti che
sono previsti meccanismi di interazione tra i Web Workers, l’ApplicationCache, e i WebSocket, e che ogni
WebWorker può invocarne altri.
Sono diretta conseguenza di questa intrinseca flessibilità delle API gli innumerevoli scenari di utilizzo
ipotizzabili oltre a quello già mostrato, come ad esempio svolgere calcoli complessi (ogni Worker può
girare su di un core differente) quali rendering o image detection in tempo reale, centralizzare le
comunicazioni con il server attraverso uno SharedWorker e un WebSocket oppure monitorare processi
browser-side.
WebWorkers
No
3.6+ 4.0+ 2.0+ 10.6+
102 - 145
WebSocket API
Le WebSockets API introducono, nella loro estrema semplicità, una funzionalità tra le più attese ed
emulate: la possibilità di stabilire e mantenere una connessione dati tra browser e server remoto
sulla quale far transitare messaggi in entrambe le direzioni. Le attuali specifiche, che lasciano ben poco
spazio per implementazioni del genere, hanno, nel corso degli anni, dato luogo a workaround più o meno
esotici tra i quali l'utilizzo di socket in Flash pilotati via Javascript e della famosa tecnica di long polling
(l'utilizzo continuo di chiamate AJAX mantenute aperte fino alla ricezione del dato o al tempo di timeout).
Le nuove API offrono invece un meccanismo ben più semplice grazie all'oggetto WebSocket, al metodo
send e all'evento onmessage.
Prima di passare alla visione delle specifiche e al dovuto esempio di implementazione è importante
ricordare che questa tecnologia non consente di creare connessioni verso altri, ben conosciuti
protocolli, come ad esempio telnet, SMTP, IRC, etc., per due distinti motivi: in primo luogo lo user agent
implementa una policy che blocca l'accesso verso porte riservate a servizi conosciuti (fanno eccezione
solo la 80 e la 443). In seconda istanza le comunicazioni viaggiano all'interno di un nuovo e specifico
protocollo, chiamato con molta fantasia 'The WebSocket Protocol' che richiama per certi aspetti,
soprattutto durante l'handshake, una conversazione HTTP.
Le specifche
L'utilizzo di queste API è assolutamente didascalico, ci troviamo di fronte infatti a poco più di tre metodi;
vediamoli insieme:
1 var echo_service = new WebSocket('ws://echo.websocket.org');
La creazione di un nuovo WebSocket richiede come unico parametro obbligatorio l'url verso la quale si
vuole stabilire la connessione. Il protocollo può essere ws o wss, dove il secondo indica la richiesta di
una connessione sicura. Opzionalmente è possibile passare al costruttore anche una stringa o un array
di sub-protocolli: valori arbitrari utili per comunicare al server un elenco di servizi che l'oggetto in
costruzione può supportare. Ad esempio un server di chat potrebbe rispondere solo a richieste con
protocollo 'server_di_chat', e via dicendo...
1 echo_service.onmessage = function(event){
2 alert(event.data);
3}
Una volta creato un nuovo WebSocket, il funzionamento dello stesso diventa praticamente identico, nella
forma, a quello già esposto per la comunicazione tra Worker: la funzione associata all'handler onmessage
viene invocata ogniqualvolta dal server proviene un messaggio,
1 echo_service.onopen = function(){
2 echo_service.send("hello!");
3}
mentre la funzione send provvede all'invio, verso il server remoto, del testo passato come argomento. Da
notare che l'invio deve essere necessariamente subordinato alla condizione di avvenuta connessione,
notificata tramite l'evento onopen. Esistono altri eventi all'interno del ciclo vita di un WebSocket: onclose
e onerror; vediamoli insieme completando l'esempio:
103 - 145
1 <!doctype html>
2 <html>
3 <head>
4 <title> WebSocket: Echo Server </title>
5 <script>
6 append = function(text){
7
document.getElementById("eventi_websocket").insertAdjacentHTML('beforeend',
8
"<li>" + text + ";</li>"
9 );
10 }
12 var echo_service = new WebSocket('ws://echo.websocket.org');
13 echo_service.onmessage = function(event){
14
append("messaggio ricevuto")
15
alert(event.data);
16
echo_service.close();
17 }
18 echo_service.onopen = function(){
19
append("connessione effettuata")
20
echo_service.send("hello!");
21 }
22 echo_service.onclose = function(){
23
append("connessione chiusa");
24 }
25 echo_service.onerror = function(){
26
append("errore nella connessione");
27 }
28 }
29 </script>
30 </head>
31 <body>
32 <ul id="eventi_websocket">
33 </ul>
34 </body>
35 </html>
In questo esempio è stato introdotto anche il metodo close, utile per terminare una connessione.
Eseguiamo l'esempio all'interno di Chromium (figura 1):
Prima di proseguire è bene ricordare che il server utilizzato per questo esempio (demo):
echo.websocket.org ha la peculiarità, come il nome stesso suggerisce, di rispondere ad ogni messaggio
con lo stesso testo ricevuto.
Un esempio
Nel prossimo capitolo estenderemo il progetto guida in modo che ogni FiveBoard sia connessa ad un
server centrale; creeremo quindi un viewer: una pagina html capace di connettersi ad una FiveBoard
registrata presso il server e leggerne il testo mano mano esso viene digitato. Ecco lo schema (figura 2):
Per poter raggiungere questo obiettivo è necessario scrivere anche del codice in un linguaggio serverside. Tale codice servirà per creare e istruire il WebSocket Server, al quale le varie pagine dovranno
connettersi; ai fini di questo esempio non è necessario cercare un servizio di hosting sul quale installare il
codice del WebSocket Server: la nostra macchina di sviluppo andrà benissimo. Per questa
implementazione utilizzeremo Ruby, un linguaggio di programmazione elegante e conciso. L'installazione
dell'interprete Ruby è veramente facile ed il codice che utilizzeremo molto leggibile. Per prima cosa
colleghiamoci al portale ufficiale: http://www.ruby-lang.org/it/downloads/ e selezioniamo la procedura di
installazione dedicata al nostro sistema operativo, quindi apriamo una console di comando (a volte
104 - 145
chiamata anche terminale) e digitiamo:
1 gem install em-websocket
Per installare la libreria necessaria allo sviluppo del WebSocket Server (per alcuni sistemi operativi è
necessario anteporre sudo all'istruzione).
Creiamo ora un file 'websocket_server.rb' e modifichiamone il contenuto come segue:
require 'rubygems'
require 'em-websocket'
EventMachine.run {
@channels = Hash.new {|h,k| h[k] = EM::Channel.new }
EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080, :debug => true) do |
ws|
ws.onopen do
sid = nil
fiveboard_channel = nil
ws.onmessage do |msg|
command, value = msg.split(":", 2);
case command
when 'registra'
fiveboard_channel = @channels[value]
sid = fiveboard_channel.subscribe { |txt| ws.send(txt) }
when 'aggiorna'
fiveboard_channel.push('testo:' + value)
end
end
ws.onclose do
fiveboard_channel.unsubscribe(sid)
end
end
end
puts "Il server è correttamente partito"
}
Seppur possiate essere non abituati a questo linguaggio il codice è tutto sommato comprensibile e
succinto, ecco la spiegazione dell'algoritmo:
•
Con l'istruzione WebSocket.start(.. l'applicazione si mette in attesa di connessioni websocket sulla
porta 8080; ogni connessione in ingresso viene memorizzata nella variabile ws e causa
l'esecuzione delle successive istruzioni (quelle comprese nell'attiguo blocco do..end).
•
Alla ricezione di un messaggio attraverso una connessione ws (ws.onmessage) il server si
comporta dividendo il testo ricevuto secondo la solita convenzione 'comando:valore' ed agendo in
modo diverso a seconda che il comando sia 'registra' o 'aggiorna'.
•
Nel caso il messaggio sia 'registra:titolo_del_documento' il server aggiungerà la connessione
attuale ad un canale che porta il nome del valore del messaggio (in questo caso
'titolo_del_documento'). In questo modo tutte le pagine che vorranno 'osservare' il documento 'A'
non dovranno far altro che inviare al WebSocket Server il messaggio 'registra:A'.
•
Nel caso il messaggio sia 'aggiorna:testo_del_documento' il server si comporterà semplicemente
inviando lungo il canale associato alla connessione corrente il valore del messaggio (in questo
caso 'testo_del_documento'), propagandolo in questo modo a tutte le connessioni registrate al
canale.
•
Infine con l'istruzione ws.onclose do... si gestisce, in caso di disconnessione del client, la rimozione
di ws dal canale presso il quale si era registrata.
Eseguiamo il server portandoci con il terminale nella posizione dello script e digitando:
1 ruby websocket_server.rb
Un messaggio, 'Il server è correttamente partito', dovrebbe confermare la bontà del
Dedichiamoci ora alle API Javascript ed alla loro implementazione, per prima cosa
'js/application.js' per fare in modo che ogni FiveBoard si registri presso il server ed
aggiornamento ad ogni modifica del testo, ecco il codice da inserire all'interno
nostro operato.
editiamo il file
invii segnali di
della funzione
105 - 145
window.onload:
1 // all'interno di window.onload, js/application.js
2 // queste due istruzioni sono state spostate dalla loro precedente posizione
3 titolo_fiveboard = prompt("Seleziona il titolo per questa FiveBoard");
4 document.title = "FB: " + titolo_fiveboard;
5
6 // creazione di un nuovo socket verso il server Ruby
7 websocket = new WebSocket('ws://0.0.0.0:8080');
8 websocket.onopen = function(){
9 // invio del comando 'registra'
10 websocket.send("registra:" + titolo_fiveboard);
11 }
12
13 // ad ogni variazione di input segue l'invio del comando 'aggiorna' /
14 / verso il server Ruby
15 document.forms['form_da_ricordare'].elements['testo_da_ricordare'].oninput = function
16 (event){
17 websocket.send("aggiorna:" + event.target.value);
18 }
Anche in questo caso l'implementazione risulta abbastanza leggibile; unico appunto da fare sull'evento
oninput, anch'esso novità introdotta dalle specifiche HTML5, che viene invocato ad ogni attività di input
(pressione di un tasto, copia ed incolla, drag and drop,...) sull'elemento in oggetto.
Completiamo l'esempio con la creazione della semplicissima pagina 'viewer.html':
1 <!doctype html>
2 <html>
3 <head>
4 <title>FiveBoard Viewer</title>
5 <script>
6
window.onload = function(){
7
var documento_da_visionare = prompt("Inserisci il nome del documento che vuoi
8
osservare");
9
var websocket = new WebSocket('ws://0.0.0.0:8080');
10
websocket.onopen = function(){
11
document.title = "VB: " + documento_da_visionare;
12
websocket.send("registra:" + documento_da_visionare);
13
}
14
websocket.onmessage = function(evento){
15
nome_comando = evento.data.split(":")[0]
16
valore_comando = evento.data.substr(nome_comando.length + 1);
17
switch (nome_comando){
18
case 'testo':
19
document.getElementById('documento_in_visione').value = valore_comando;
20
break;
21
}
22
}
23 }
24 </script>
25 </head>
26 <body>
27 <textarea id="documento_in_visione" readonly>Aspettando il primo aggiornamento...</ textarea>
28 </body>
29 </html>
In questo caso la pagina è istruita nel reagire alla ricezione di un messaggio da parte del WebSocket
Server; il valore ricevuto viene infatti gestito con la solita convenzione 'comando:valore' e, nel caso il
comando sia 'testo', il valore viene inserito all'interno di una textarea preposta.
Bene, eseguiamo una prova di funzionamento: sincerandoci di aver lanciato il WebSocket Server
navighiamo prima sulla pagina 'index.html' e creiamo un nuovo documento 'esempio1', quindi apriamo
una nuova finestra e puntiamola all'indirizzo di 'viewer.html': alla richiesta del nome del documento
inseriamo anche qui 'esempio1' in modo da legare il viewer alla fiveboard.
Ora proviamo a digitare alcuni caratteri sulla prima finestra e noteremo che, attraverso il server, questi
sono propagati in tempo reale alla seconda! Ovviamente il tutto funzionerebbe anche se la conversazione
avvenisse tra due macchine distinte attraverso un server remoto; nell'immagine seguente si può notare
una fiveboard aperta sull'iPad ed il suo corrispondente viewer visibile su di un portatile; in alto i messaggi
106 - 145
di log del WebSocket Server (figura 3).
Conclusioni
I WebSocket, sono nella loro estrema semplicità, degli strumenti incredibilmente potenti; a riprova di
questo fatto la rete ha già incominciato ad offrire interessanti prospettive di utilizzo nonostante
l'innegabile giovinezza di queste API. Tra le soluzioni degne di nota merita sicuramente una citazione
Pusher, un servizio che offre la possibilità di gestire eventi real-time attraverso l'utilizzo di WebSocket. Un
po' più artigianale, ma altrettanto valido è http://jsterm.com/, un'applicazione che consente di collegarsi a
server remoti utilizzando un proxy, scritto in node.js, tra il protocollo WebSocket e Telnet.
Recentemente lo sviluppo delle API è stato frenato dalla scoperta di una seria vulnerabilità [documento
PDF] legata al potenziale comportamento di un caching proxy che può essere indotto, attraverso l'utilizzo
di WebSocket ad-hoc, a modificare il contenuto delle informazioni consegnate ad altri client. La
vulnerabilità è stata correttamente risolta dalla versione 0.7 del protocollo ma sfortunatamente le versioni
4 e 5 di Firefox, rilasciate prima del fix, hanno i websocket disabilitati per default; la versione 6 del
browser dovrebbe però ripristinare il funzionamento out-of-the-box di questa interessantissima feature.
WebSockets
No
4.0+ (parziale) 5.0+ 7.0+ 11.0+ (parziale)
107 - 145
Drag and Drop
La soluzione al Drag and Drop proposta dalle specifiche HTML5 va ben oltre la metafora classica
emulata in modo eccelso da librerie come JQurey e similari. Certo, anche quel tipo di comportamento è
possibile, ma stiamo solo raschiando la superficie di una feature ben più complessa, articolata e potente.
Un assaggio più consistente delle reali capacità del Drag and Drop è offerto dalla versione HTML5 del
famoso client di posta Gmail: trascinando un file al di sopra della pagina per la composizione di un nuovo
messaggio si evidenza una zona verde, rilasciando il documento al di sopra di tale zona possiamo
assistere all’upload dello stesso; ed il tutto funziona anche con più file contemporaneamente! Prima di
passare ad una analisi delle specifiche è bene quindi capire che questo meccanismo non è stato studiato
solo per riordinare liste o spostare oggetti in un carrello ma deve essere inteso come vero e proprio
sistema di input sia per informazioni interne alla pagina sia esterne.
Le specifiche
Gli attori coinvolti in queste API sono essenzialmente tre, e non è necessario che siano tutti presenti ad
ogni implementazione. Stiamo parlando dell’oggetto che subisce il drag, della struttura che
contiene i dati che intendiamo trasferire attraverso il drop, e dell’oggetto che accetta il drop. Ecco
come funziona una sessione completa di Drag and Drop:
1 <ul id="elementi_da_trascinare" ondragstart="iniziaTrascinamento(event)">
2 <li draggable="true" data-icona="http://bit.ly/h5Khyt" data-valore="0.5">50 Cents</li>
3 <li draggable="true" data-icona="http://bit.ly/gnyFfh" data-valore="1" > 1 Euro </li>
4 <li draggable="true" data-icona="http://bit.ly/eXq6y5" data-valore="2" > 2 Euro </li>
5 <li draggable="true" data-icona="http://bit.ly/hiftBg" data-valore="10"> 10 Euro </li>
6 </ul>
In primo luogo è necessario l’utilizzo dell’attributo globale draggable="true" per specificare gli elementi
che vogliamo rendere trascinabili; utilizziamo inoltre i campi data-* per salvare informazioni che potranno
tornare utili più tardi, come l’url dell’icona della moneta e il suo valore numerico. Il passo successivo
consiste nel definire la funzione associata all’evento che notifica l’inizio di un trascinamento (ondragstart),
nel nostro caso l’evento è stato associato all’ul, in quanto sottende l’intero elenco degli elementi con il
comportamento drag abilitato.
1 <script>
2 iniziaTrascinamento = function(evento){
3 evento.dataTransfer.setData("text", event.target.dataset.valore);
4 evento.dataTransfer.effectAllowed = 'copy';
5 icona = document.createElement('img');
6 icona.src = evento.target.dataset.icona;
7 evento.dataTransfer.setDragImage(icona, -10, -10);
8 }
9 </script>
Nell’argomento evento lo user-agent si premura di fornirci tutto il necessario per gestire il trascinamento
dell’elemento. Nella prima riga della funzione viene invocata la struttura dataTransfer, atta a contenere i
dati che vogliamo siano disponibili all’oggetto incaricato del drop; con il metodo setData richiediamo poi
l’inserimento di un nuovo valore all’interno di tale struttura. Stando alle specifiche potremmo identificare
questo valore con un’etichetta (usando il primo argomento, ad esempio ‘valuta’), in questo modo
saremmo poi in grado di istruire l’area di drop ad accettare solo il rilascio di elementi con tale etichetta;
nella realtà questa funzionalità non è ancora supportata in modo sufficiente e funziona solo con etichette
text o url. Come secondo argomento alla chiamata specifichiamo invece il contenuto del campo ‘ datavalore’ dell’elemento che sta subendo il trascinamento.
Nella riga successiva, con l’istruzione evento.effectAllowed = 'copy' segnaliamo allo user-agent che
l’azione di drag è da intendersi come copia e non, ad esempio, come spostamento (in quel caso sarebbe
stato 'move'). È importante notare che tale segnalazione non implica di per sé nessun cambiamento alla
dinamica dello user-agent nei confronti di questo drag and drop (se non qualche accortezza grafica, come
vedremo poi) ma ci da ancora una volta la possibilità di filtrare in fase di drop gli elementi che rilasciamo
accettando, ad esempio, solamente azioni di tipo 'copy'.
Le due righe di codice seguenti servono invece per creare una immagine avente come src il campo dataicona
dell’elemento
che
stiamo
trascinando;
infine
con
l’ultima
istruzione,
evento.dataTransfer.setDragImage(icona, -10, -10), comunichiamo al dataTransfer di usare l’immagine
appena generata come oggetto da visualizzare durante il trascinamento.
Se proviamo ad includere i due frammenti di codice in una classica struttura HTML5 e ad eseguirli con
Chromium avremo questo effetto (figura 1):
Figura 1
108 - 145
Bene, ora creiamo l’oggetto di drop e gestiamo l’azione di rilascio:
1 ...
2 </ul>
3 <img id="portamonete"
4
dropzone="copy s:text"
5
draggable="false"
6
src="http://bit.ly/gZH4H5"
7
ondragenter="ingressoInZonaDiDrop(event)"
8
ondragleave="uscitaZonaDiDrop(event)"
9
ondragover="trascinamentoInZonaDiDrop(event)"
10
ondrop="rilascioDellOggettoTrascinato(event)"
11 >
12 <p> Il portamonete contiene: <output id="sommatoria">0</output> euro</p>
Così come ogni elemento HTML può essere impostato come trascinabile grazie all’attributo
draggable=true, anche il ruolo di area di drop può essere delegato a qualsiasi tag. In questo caso
abbiamo scelto di utilizzare un’immagine di un portamonete nel quale riporremo i nostri risparmi. Diamo
una scorsa agli attributi che abbiamo impostato:
•
dropzone: con questo attributo, purtroppo ancora poco supportato, è possibile specificare in modo
sintetico ed efficace le varie tipologie di dati per i quali l’area di drop è abilitata. I primi
comandi, separati da uno spazio, indicano le tipologie di effectAllowed supportate (in questo caso
solamente copy) mentre le restanti istruzioni, nel formato s:testo o f:testo rappresentano in caso
di s:testo le etichette supportate, o i mime-type supportati nel caso di f:testo. La particella s indica
che il contenuto del dataTransfer deve essere di natura testuale (come nell’esempio che stiamo
studiando), mentre la particella f implica che l’area di drop accetti solamente file, come ad
esempio succede nel caso dell’aggiunta di allegati alla Gmail. Validi esempi di valorizzazione di
questo attributo sono i seguenti:
1 -- Accetta copy per file di tipo png e jpeg
2 dropzone="copy f:image/png f:image/jpeg"
3 -- Accetta move e copy per etichette "valuta"
4 dropzone="move copy s:valuta"
•
draggable: conosciamo già questo attributo; in ogni caso è importante segnalare che qui è stato
utilizzato per informare lo user-agent di non rendere trascinabile questa immagine. Infatti
nella maggioranza dei browser le immagini lo sono di default;
•
ondragenter, ondragmove e ondragleave: questi tre eventi vengono invocati quando l’elemento
viene trascinato all’interno di un’area di drop (ondragenter), mosso all’interno della
stessa (ondragmove) e infine spostato nuovamente all’esterno dell’area (ondragleave);
•
ondrop: l’evento chiave dell’intero processo, viene invocato al rilascio di un elemento al di sopra
di un area di drop.
Ottimo! Non ci resta che completare questa panoramica delle specifiche osservando una possibile
implementazione degli eventi appena descritti:
109 - 145
1 ...
2
ingressoInZonaDiDrop = function(evento){
3
evento.target.src = "http://bit.ly/gRo6cc";
4
evento.preventDefault();
5
}
6
7
uscitaZonaDiDrop = function(evento){
8
evento.target.src = "http://bit.ly/gZH4H5";
9
}
10
11 trascinamentoInZonaDiDrop = function(evento){
12
evento.dataTransfer.dropEffect = 'copy';
13
evento.preventDefault();
14 }
15
16 rilascioDellOggettoTrascinato = function(evento){
17
sommatoria = document.getElementById("sommatoria");
18
sommatoria.innerHTML = parseFloat(sommatoria.innerHTML) + parseFloat
19
20 (evento.dataTransfer.getData("text"));
21
evento.target.src = "http://bit.ly/gZH4H5";
22 }
23 ...
L’istruzione che merita maggiore attenzione è sicuramente preventDefault() che, se posizionata
all’interno di un evento, impedisce al browser di attivare il proprio comportamento di default. In questo
caso la funzione in questione è stata utilizzata in ingressoInZonaDiDrop per impedire che il browser
negasse l’accesso al drop (comportamento di default) ed in trascinamentoInZonaDiDrop per evitare
l’animazione di ‘ritorno’ degli elementi draggati al loro rilascio.
Per il resto le due funzioni associate a ondragenter e ondragleave si preoccupano solamente di alternare,
tra chiusa e aperta, l’immagine del portamonete all’ingresso (o uscita) di un elemento trascinato al di
sopra di esso. trascinamentoInZonaDiDrop deve invece preoccuparsi nuovamente di segnalare il supporto
al solo effetto copy; questo accorgimento non sarebbe necessario con un pieno supporto dell’attributo
dropzone.
Infine la funzione legata all’evento ondrop contiene l’importante metodo getData(etichetta),
indispensabile per recuperare dal dataTransfer l’ultimo oggetto inserito con l’etichetta richiesta.
Eseguiamo il tutto in Chromium notando anche come l’icona del mouse si modifichi durante l’azione di
drag and drop ad indicare la copia (figura 2):
Ecco la demo.
Un esempio
Visto che non abbiamo ancora sperimento il drag and drop di file, utilizziamo il progetto guida per fare
alcune prove; in particolare implementiamo la possibilità di rilasciare un file di testo al di sopra di
una textarea per fare in modo che in questa vi si riversi il contenuto. Questo esempio ci darà anche
l’occasione di toccare con mano la potenza delle nuove File API, in particolare approfondiremo gli oggetti
Javascript File, FileList e FileReader: ottimi compagni nel caso sia necessario accedere agli attributi o al
contenuto di un file selezionato (o trascinato) per l’upload.
Incominciamo modificando il markup del file index.html per attivare una drop area sulla textarea:
1 <label>Cosa hai in mente?
2 <textarea name="testo_da_ricordare" required autofocus
3 placeholder="La lista della spesa, il teatro di questa sera ..."
4 dropzone="copy f:text/plain"
5 ondragover="consentiIlDrop(event)"
6 ondrop="caricaIlContenutoTestuale(event,this)">
7 </textarea>
8 </label>
Fin qui niente di strano, la parte divertente è tutta racchiusa nella definizione delle due funzioni.
Vediamole insieme nel file 'application.js':
110 - 145
1 consentiIlDrop = function(evento){
2 evento.dataTransfer.dropEffect = 'copy';
3 evento.preventDefault();
4 }
5
6 caricaIlContenutoTestuale = function(evento,element){
7 var files = evento.dataTransfer.files;
8 var reader = new FileReader();
9 reader.onload = function(evento){
10 element.value = element.value + evento.target.result;
11 }
12 for(file in files){
13 reader.readAsBinaryString(files[file]);
14 }
15 }
La funzione caricaIlContenutoTestuale merita un approfondimento: il metodo files chiamato su
dataTransfer ritorna un elenco di File racchiusi in un oggetto di tipo FileList, che per i nostri scopi è
assimilabile ad un array.
Successivamente, nella variabile reader, viene caricata un istanza di FileReader, una classe predisposta
esclusivamente alla lettura del contenuto degli oggetti di tipo File. Nelle righe successive viene impostata
l’azione associata all’evento onload di reader, che viene invocato al completamento dell’azione di lettura
di un file; all’interno di questa azione il contenuto testuale del file ( evento.target.result) è concatenato al
testo già presente nella textarea. L’ultimo frammento di questa funzione cicla su tutti i file presenti in
files; successivamente su ognuno di essi viene richiesta la lettura al reader attraverso il metodo
readAsBinaryString.
Anche per questo esempio abbiamo preparato una demo. Funziona al momento solo su Chromium. Per il
test basta creare un file di testo, salvarlo (magari sul desktop) e trascinarlo nella textarea.
Drag and Drop
No
3.5+ 3.2+ 2.0+ No
111 - 145
Geolocation API
Le Geolocation Api non sono contenute all’interno dell’HTML5 ma fanno parte di quell’insieme di
documenti che gravitano attorno alle specifiche; la loro funzionalità è abbastanza semplice, definire una
struttura dati atta a contenere vari dati geospaziali e impostare alcune funzioni di accesso a tali
dati. Nessuna menzione viene fatta in merito ai meccanismi che il browser deve utilizzare per recuperare
questi dati, ogni piattaforma è infatti tenuta ad utilizzare al meglio le informazioni provenienti dal device.
Su di un dispositivo mobile di ultima generazione avremo quindi un set di coordinate provenienti dal
sensore GPS, mentre su di un portatile potremo avvalerci del posizionamento legato all’ip della
connessione internet.
Per proteggere la privacy dell’utente è inoltre fatto divieto di utilizzo delle suddette informazioni senza
preventivo consenso esplicito.
Le specifiche
Esistono praticamente solo due metodi a disposizione, fra l’altro entrambi utili allo stesso scopo: ottenere
la posizione corrente. La differenza tra i due, getCurrentPosition e watchPosition, va ricercata nella loro
periodicità, mentre il primo metodo fornisce il dato una sola volta, il secondo si attiva automaticamente
ogniqualvolta la posizione cambi, ad esempio perché l’utente sta passeggiando.
La sintassi per invocare questi metodi è la seguente:
1 navigator.geolocation.getCurrentPosition(inCasoDiSuccesso, opzInCasoDiErrore, opzioni);
2 navigator.geolocation.watchPosition(inCasoDiSuccesso, opzInCasoDiErrore, opzioni);
Il primo argomento contiene i riferimenti ad una funzione da eseguire al corretto recupero delle
informazioni geospaziali, il secondo argomento, opzionale, punta invece ad una funzione che verrà
invocata in caso di errore. L’ultimo parametro, anch’esso facoltativo, può essere utilizzato per specificare
alcune opzioni utilizzando una struttura {opzione1: valore1, ...}. Le opzioni disponibili sono 3:
•
enableHighAccuracy (true/false): questo flag può essere utilizzato per notificare allo user-agent la
necessità o meno di ottenere dati il più accurati possibile. L’opzione è stata introdotta in quanto il
recupero di informazioni più dettagliate richiede di solito maggiore dispendio di tempo ed energia
e, in particolare su device mobile, potrebbe risultare fastidiosa per l’utente;
•
timeout (millisecondi): l’opzione rappresenta il tempo massimo concesso al browser per
recuperare la posizione dell’utente. In caso di fallimento verrà invocata la funzione associata al
secondo argomento;
•
maximuAge (millisecondi): indica al browser di effettuare una ricerca preventiva nella cache di un
dato geospaziale non più vecchio dei millisecondi specificati. Se disponibile tale dato verrà
restituito come posizione corrente, altrimenti verrà eseguita la procedura classica.
La funzione invocata in caso di successo deve accettare un singolo argomento, un oggetto di tipo Position
che contiene tutte le informazioni recuperate così come un timestamp delle data e ora di recupero.
1 inCasoDiSuccesso = function(position){
2 alert( "Posizione delle: " + position.timestamp.getHours() + ":" +
3 position.timestamp.getMinutes() + "n" +
4 "Accuratezza delle coordinate: " + position.coords.accuracy + " mt; n" +
5 "Latitudine: " + position.coords.latitude + " gradi; n" +
6 "Longitudine: " + position.coords.longitude + "gradi; n" +
7 "Accuratezza dell'altezza: " + position.coords.altitudeAccuracy + " mt; n" +
8 "Altezza: " + position.coords.altitude + " mt; n" +
9 "Direzione: " + position.coords.heading + " gradin " +
10 "(0 = Nord, 90 = Ovest, 180 = Sud, 270 = Est);n" +
11 "Velocita: " + position.coords.speed + " m/s;"
12 );
13 }
Nel frammento di codice appena illustrato possiamo vedere tutte le informazioni estraibili dalla struttura
Position; chiaramente, a seconda del device sul quale viene effettuata l’interrogazione, non tutte saranno
sempre disponibili; in tal caso il loro valore sarà impostato a null. Nell’immagine seguente il risultato
dell’interrogazione eseguita dal mio portatile domestico (notate l’accuratezza!):
Figura 1 - (click per ingrandire)
112 - 145
In caso invece si verifichi un errore la funzione preposta deve accettare anch’essa un parametro, un
oggetto di tipo PositionError contenente un codice di errore ed un messaggio ad uso di debug,
rispettivamente nei metodi code e message.
1 opzInCasoDiErrore = function(error){
2 alert( "Errore " + error.code + ": " + error.message);
3}
In ultimo ricordiamo che un invocazione del metodo watchPosition può essere successivamente interrotta
utilizzando la funzione clearWatch, come nell’esempio seguente:
1 <!doctype html>
2 <html>
3 <head>
4 <title> Un esempio di watchPosition</title>
5 <script>
6 var id_watch = null;
7
8 inCasoDiSuccesso = function(position){
9
document.getElementById("posizione_corrente").insertAdjacentHTML('beforeend',
10 "<li> Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude + );
11 "</li>"
12 );
13 }
14
15 sospendiLaRicezione = function(){
16 navigator.geolocation.clearWatch(id_watch);
17 }
18
20 id_watch = navigator.geolocation.watchPosition(inCasoDiSuccesso);
21 }
22 </script>
23 </head>
24 <body>
25 <h1>La tua posizione attuale</h1>
27 <button type="button" onclick="sospendiLaRicezione()">
28
sospendi la ricezione di dati geospaziali
29 </button>
30 </menu>
31 <ul id="posizione_corrente">
32 </ul>
33 </body>
34 </html>
Sono disponibili le demo per il primo e per il secondo esempio.
Conclusioni
Come avete potuto notare questo set di API è contemporaneamente facilissimo da utilizzare ed
estremamente potente. Le possibilità offerte si dilatano enormemente se ci si concentra sul mercato
mobile dove la stragrande maggioranza dei device di ultima generazione è equipaggiata con ottimi
sensori GPS e bussole.
Geolocation
No
3.6+ 5.0+ 5.0+ 10.6+
113 - 145
Canvas
Una tela trasparente
Il canvas è un elemento HTML5 rappresentato dal tag <canvas>. Può essere inteso come il corrispettivo
digitale di una tela trasparente: uno spazio all'interno di una pagina web sul quale insistere con specifiche
API adatte a tracciare linee, cerchi, rettangoli, immagini e altro ancora. Il canvas è, in estrema
sintesi, una grande matrice di pixel, ognuno dei quali modificabile singolarmente nelle sue quattro
componenti RGBA, rosso, verde, blu e alpha, la trasparenza. Tutti siamo a conoscenza di questo elemento
HTML5 per una sua semplice attitudine: la possibilità di replicare i comportamenti fino ad oggi
appannaggio della tecnologia Flash. In questo articolo esploreremo le numerose API disponibili e ne
sperimenteremo una buona parte per poi concentrarci successivamente su di una interessante evoluzione
del progetto guida.
Le specifiche
Prima di addentrarci nella giungla dei vari metodi a disposizione per disegnare sul canvas vediamo
brevemente l'architettura che contraddistingue il markup dell'elemento:
1 <canvas width="200px" height="200px" id="demo_canvas">
2 Contenuto da mostrare in caso il canvas non sia supportato.
3 (quindi anche informazioni per i motori di ricerca).
4 </canvas>
Gli unici due attributi disponibili, oltre ai canonici globali, sono width e height, rispettivamente larghezza e
altezza dell'elemento.
Sotto il profilo JavaScript i metodi disponibili direttamente attraverso questo elemento sono due:
toDataUrl e getContext. Il primo, toDataUrl, è fantastico nella sua semplicità: ritorna infatti il contenuto
del canvas secondo il protocollo 'data URL'. Questo schema memorizza file di ogni tipo in lunghissime
sequenze di caratteri, che poi possono essere salvati su disco o, se come nel caso del canvas siano
immagini, essere utilizzate come attributo src di tag img. Nei prossimi esempi vedremo un utilizzo
tangibile di questo metodo, per ora invece concentriamoci su getContext, vera e propria 'porta' verso le
API di disegno. getContext, quando invocato, ritorna un oggetto detto contesto del disegno:
1 var canvas = document.getElementById("demo_canvas");
2 var contesto = canvas.getContext("2d");
In questa lezione esploreremo solamente i metodi legati al contesto di disegno '2d', come specificato
dall'argomento utilizzato nello snippet, ma sappiate che esiste già una versione sperimentale di contesto
'3d' che sottende un set di API completamente diverso, basato sulle OpenGL ES 2.0 e detto WebGL.
Ma torniamo al contesto '2d': possiamo dividere le funzionalità in esso racchiuse in categorie: path,
modificatori, immagine, testo e pixel per pixel; nelle prossime sezioni affronteremo in dettaglio
ognuno di questi aspetti. Prima di proseguire è però importante evidenziare che il contesto è un oggetto
stateful, che mantiene cioè al suo interno dei valori che influiscono sulle operazioni successive;
aspettiamoci quindi delle direttive di questo tipo:
•
•
•
imposta colore di linea verde;
imposta percorso della linea da (0,0) a (10,10);
traccia tutti i percorsi di linea.
In questo caso, se avessimo usato le corrette API, avremmo ottenuto una linea verde tra i punti (0,0) e
(10,10). L'insieme dei valori memorizzati in un contesto viene detto drawing state.
Path
I metodi di questa categoria sono tutti funzionali al disegno di frammenti geometrici come linee, archi e
quant'altro: ecco un esempio omnicomprensivo:
114 - 145
1 disegnaBarchetta = function(contesto){
2 contesto.beginPath();
3 // sposta il cursore del path nella posizione 40,170
4 contesto.moveTo(40,170);
5 // crea un subpath linea fino alla posizione 260,170
6 contesto.lineTo(260,170);
7 // crea un subpath arco che sia tangente alle due linee (260,170 - 150,250)
8 // (150,250 - 40,170) con diametro 150
9 contesto.arcTo(150,250,40,170,150);
11 contesto.moveTo(150,170);
13 contesto.rect(150,40,60,30);
14 // disegna tutti i subpath del path corrente sul canvas usando la
15 // configurazione del drawing state
16 contesto.stroke();
17 // riempi tutti le aree inscritte dal path corrente usanto la configurazione
18 // del deawing state
19 contesto.fill();
20 }
Il concetto principe è il path, ovverosia un insieme di punti uniti fra loro da definite primitive
geometriche (arco, linea,...), dette subpath. Ogni contesto possiede solamente un path attivo per volta.
Per aggiungere un subpath al path attivo si possono utilizzare metodi come lineTo, arcTo, rect e altri.
Metodi come stroke e fill vengono applicati a tutti i subpath del path attivo. Per resettare il path attivo,
rimuovendo quindi tutti i subpath non ancora disegnati, si utilizza l'istruzione beginPath().
Eseguiamo l'esempio appena mostrato per ottenere il risultato seguente (figura 1):
Figura 1
Oltre ai subpath mostrati ce ne sono altri, ma il meccanismo di generazione resta sempre lo stesso, la
lista completa è disponibile nel documento ufficiale delle specifiche.
Modificatori
Le funzioni all'interno di questo gruppo insistono sul drawing state di un canvas, modificando il modo in
cui i path, le immagini ed i testi vengono disegnati. Nella categoria si annoverano matrici di
trasformazione (scale, rotate, translate), gestione della trasparenza globale e delle funzioni di
115 - 145
composizione nonché impostazioni di colore, di linea e di gradiente. Suona complicato ? Facciamo un po'
di prove:
1 contesto.scale(0.5,0.5);
2 contesto.rotate(0.5);
3 contesto.translate(300,-100);
4 disegnaBarchetta(contesto);
Ecco il risultato, i modificatori impostati vengono applicati alla barchetta (figura 2):
Figura 2
Utilizziamo ora trasparenza e composizione:
1 contesto.globalAlpha = 0.5;
3 contesto.translate(40,-0);
4 contesto.globalCompositeOperation = "source-out";
L'attributo globalAlpha definisce (da 0.0 a 1.0) il livello di trasparenza che dovrà essere applicato a quanto
verrà disegnato sul canvas. globalCompositeOperation ci permette invece di specificare in che modo
vogliamo che le immagini vengano sovrapposte: è possibile utilizzare un set di parole chiave per indicare
un ben preciso comportamento; in questo caso con source-out chiediamo allo user agent di effettuare una
somma tra le trasparenze ottenendo un risultato come questo (figura 3):
Figura 3
Attenzione, al momento non tutti i browser reagiscono allo stesso modo alle definizioni legate a
GlobalCompositeOperation. Infine esaminiamo anche le operazioni legate ai modificatori di colore:
1 contesto.strokeStyle = "#FF0000";
2 contesto.lineWidth = "5";
3 var gradiente = contesto.createRadialGradient(150, 150, 30, 150, 160, 100);
4 gradiente.addColorStop(0.5, '#0000FF');
5 gradiente.addColorStop(0.1, '#000000');
6 contesto.fillStyle = gradiente;
Con strokeStyle e fillStyle possiamo impostare le nostre preferenze su come intendiamo debba essere
116 - 145
disegnata la linea di contorno degli oggetti (stroke) ed il loro riempimento (fill). Entrambi gli attributi
possono essere valorizzati con stringhe, oggetti di tipo gradient ed oggetti di tipo pattern. In questo caso
è mostrato l'utilizzo di una semplice stringa di colore rosso per lo stroke e di un gradient radiale con una
variazione di colore dal nero al blu per il fill. L'utilizzo dell'oggetto pattern è simile, il metodo da utilizzare
è contesto.createPattern(immagine, opzionaleRipetizione) dove il secondo argomento riprende le scelte
effettuabili via CSS (no-repeat, repeat-x, ecc..) mentre il primo può essere valorizzato con con un
elemento img, un altro canvas o perfino un elemento video. Ecco il risultato che si ottiene utilizzando il
codice visto (figura 4):
Figura 4
Prima di passare al prossimo gruppo di funzioni citiamo brevemente anche la possibilità di implementare
un ombreggiatura, ecco le istruzioni:
1 contesto.shadowColor = '#003300'
2 contesto.shadowOffsetX = 10;
3 contesto.shadowOffsetY = 10;
4 contesto.shadowBlur = 30;
Ed il risultato (figura 5):
Figura 5
Immagine
L'unico metodo appartenente a questo gruppo si chiama drawImage ed è disponibile in un certo numero
di varianti; il primo argomento può infatti essere sia un elemento immagine, sia un altro canvas, sia un
elemento di tipo video. Il risultato dell'operazione è sempre quello di disegnare sul contesto invocante
l'immagine prescelta, rispettando alcuni parametri dimensionali opzionali. Ecco un esempio:
1 var immagine = new Image();
2 immagine.src = "http://img227.imageshack.us/img227/7092/marei.jpg";
3 contesto.drawImage(immagine,0,0);
E il risultato (figura 6):
Figura 6
117 - 145
In questo caso chiediamo che l'immagine sia disegnata a partire dall'angolo in alto a sinistra del canvas
(coordinate 0,0); possiamo però anche specificare una dimensione di destinazione e perfino un rettangolo
di partenza in modo da prelevare solo una porzione di immagine utilizzando i numerosi argomenti
opzionali messi a disposizione dalle specifiche.
Testo
Come il nome del gruppo suggerisce, questi metodi permettono di scrivere porzioni di testo
all'interno di un canvas, eccone un esempio:
2 contesto.globalCompositeOperation = "source-out";
3 contesto.font = "34px Georgia"
4 contesto.strokeText("Va va va barchetta", 20, 100);
5 contesto.fillText("va, naviga naviga naviga", 20, 140);
6 contesto.fillText("naviga e mai si", 20, 180);
7 contesto.fillText("fermera'...", 20, 220);
L'attributo font può essere valorizzato allo stesso modo del suo omonimo su CSS, per il resto fillText
provvede a scrivere il testo desiderato partendo dalla posizione x, y specificata come secondo e terzo
argomento; anche strokeText si comporta in modo simile ma con una piccola variante che si può
facilmente evincere dal risultato dell'esecuzione dell'esempio. Da notare inoltre il comportamento
interessante dell'applicazione di un particolare tipo di composizione (figura 7):
Figura 7
Pixel per Pixel
Come già anticipato in precedenza, il canvas non è nient'altro che una matrice di valori in formato RGBA:
non stupisce che sia quindi possibile insistere su ogni singolo e specifico pixel della stessa; ecco un
esempio:
118 - 145
2 var dati_immagine = contesto.getImageData(0,0,
3 contesto.canvas.width, contesto.canvas.height);
4
5 var array_dati_immagine = dati_immagine.data;
6 for(var i = 0; i < array_dati_immagine.length; i +=4 ){
7 array_dati_immagine[i ] = Math.round(Math.random() * 255);
8 array_dati_immagine[i+1] = Math.round(Math.random() * 255);
9 array_dati_immagine[i+2] = Math.round(Math.random() * 255);
10 }
11 dati_immagine.data = array_dati_immagine;
12 contesto.canvas.width = contesto.canvas.width;
13 contesto.putImageData(dati_immagine, 0,0);
Il fulcro dello snippet è da ricercarsi nelle due funzioni getImageData e putImageData che rispettivamente
prelevano e 'stampano' sul canvas una porzione di immagine delineata dagli argomenti passati. Tale
porzione, un oggetto di classe ImageData, possiede in una sua proprietà, data, un lunghissimo array
contenente le componenti RGBA di ogni pixel. Il ciclo for presentato nel codice precedente insiste proprio
su questo array assegnando ad ognuna delle tre componenti RGB un valore randomico. Ecco il risultato
(figura 8):
Figura 8
Per una verifica diretta di quanto visto nel corso della lezione è disponibile questa demo.
Ora che abbiamo almeno un'idea delle potenzialità dello strumento che stiamo analizzando, accingiamoci
ad una sperimentazione pratica attraverso il progetto guida. Lo vedremo nella prossima lezione.
Grafica e Multimedia
<canvas>
9.0+ 2.0+ 3.1+ 2.0+ 10.0+
119 - 145
Canvas: un esempio pratico
Un esempio
Ora che abbiamo almeno un'idea delle potenzialità dello strumento che stiamo analizzando, accingiamoci
ad una sperimentazione pratica attraverso il progetto guida. Quello che faremo sarà dare la possibilità
agli utenti della fiveboard di disegnare utilizzando un canvas, lo stesso verrà poi memorizzato insieme
al testo sul già noto localStorage. Introduciamo anche in questo contesto il concetto di EventoCustom, la
possibilità cioè di lanciare arbitrariamente eventi in tutto e per tutto simili a quelli utilizzati dal DOM.
Questa feature ci sarà utilissima per mantenere un codice elegante e contemporaneamente sincronizzare
salvataggio e recupero di testo e canvas dal localStorage; aggiungiamo ad application.js il seguente
metodo:
1 lanciaEvento = function(nome_evento){
2 var evento = document.createEvent("CustomEvent");
3 evento.initCustomEvent(nome_evento, true, true, titolo_fiveboard);
4 document.dispatchEvent(evento);
5}
Eliminiamo successivamente dallo stesso file le funzioni salvaIlDato e recuperaIlDato sostituendole con le
seguenti:
1 salvaAppunti = function(evento){
2 localStorage.setItem("fb_" + evento.detail,
3
document.forms['form_da_ricordare'].elements['testo_da_ricordare'].value
4 );
5 alert("Appunti salvati");
6 }
7
8 recuperaAppunti = function(evento){
9 document.forms['form_da_ricordare'].elements['testo_da_ricordare'].value =
10 localStorage.getItem("fb_" + evento.detail);
11 alert("Appunti recuperati");
12 }
13
14 document.addEventListener('salvadato', salvaAppunti);
15 document.addEventListener('recuperadato', recuperaAppunti);
Bene, ora abbiamo creato le due funzioni e le abbiamo registrate rispettivamente agli eventi custom
‘salvadato’ e ‘recuperadato’; ora non ci resta che scatenare questi eventi al click dei bottoni del file
index.html, modifichiamo quindi come segue:
1 ...
3
<button type="button" onclick="lanciaEvento('salvadato');">
4
Memorizza quanto scritto
5
</button>
6
<button type="button" onclick="lanciaEvento('recuperadato');">
7
Recupera l'ultimo testo memorizzato
8
</button>
9 </menu>
10 ...
Ottimo! Ora possiamo aggiungere un canvas poco prima della fine della pagina e procedere con il nostro
esperimento:
1 ...
2 <canvas id="drawboard"></canvas>
3 </form>
4 ...
In un file chiamato canvas.js, sempre nella cartella js, scriviamo:
120 - 145
1 var ctx = null;
2 var started = false;
3
4 iniziaDisegno = function(evento){
5 ctx.beginPath();
6 ctx.moveTo(evento.offsetX,evento.offsetY);
7 started = true;
8 }
9
10 disegna = function(evento){
11 if(started){
12 ctx.lineTo(evento.offsetX,evento.offsetY);
13 ctx.stroke();
14 }
15 }
16
17 fermaDisegno = function(evento){
18 ctx.closePath();
19 started = false;
20 }
21
22 salvaCanvas = function(evento){
23 localStorage.setItem("canvas_fb_" + evento.detail, ctx.canvas.toDataURL('image/png'));
24 alert("Canvas salvato");
25 }
26
27 recuperaCanvas = function(evento){
28 var immagine_salvata = localStorage.getItem("canvas_fb_" + evento.detail);
29 if(immagine_salvata == null) return;
30 var img = new Image();
31 img.src = immagine_salvata;
32 ctx.canvas.width = ctx.canvas.width;
33 ctx.drawImage(img, 0, 0);
34 alert("Canvas recuperato");
35 }
36
37 attivaIlCanvas = function(evento){
38 ctx = document.querySelector('canvas').getContext('2d');
39 ctx.canvas.addEventListener('mousedown' , iniziaDisegno,false );
40 ctx.canvas.addEventListener('mousemove' , disegna ,false );
41 ctx.canvas.addEventListener('mouseup' , fermaDisegno ,false );
42 ctx.canvas.addEventListener('mouseleave', fermaDisegno ,false );
43 document.addEventListener('salvadato', salvaCanvas );
44 document.addEventListener('recuperadato', recuperaCanvas );
45 }
46
47 window.addEventListener('load' ,attivaIlCanvas,false);
Approfondiamo un po’ quanto scritto: la funzione appena qui sopra ‘attivaIlCanvas’ viene eseguita al load
della pagina e si preoccupa di registrare tutti gli handler necessari alla gestione delle funzioni di disegno e
di registrazione. In particolare iniziaDisegno, disegna e fermaDisegno utilizzano alcune funzioni che
abbiamo esplorato nelle specifiche per disegnare delle spezzate che seguono la posizione del mouse.
salvaCanvas e recuperaCanvas sono invece funzioni che vengono attivate dai nostri eventi custom; in
questo caso la parte interessante è da ricercarsi nell’utilizzo del metodo toDataUrl che trasforma il
contenuto del canvas in una stringa, rendendolo quindi memorizzabile all’interno dell’hash localStorage.
In recuperaCanvas poi, la stessa stringa contenente l’immagine viene utilizzata come attributo src di un
oggetto Image e successivamente ridipinta sul canvas.
Ricordiamoci di richiedere il file canvas.js all’interno della pagina index.html e proviamo la nostra
creazione (figura 1):
Figura 1
121 - 145
Conclusioni
Il canvas è uno strumento incredibilmente vasto, potente ed articolato. La panoramica offerta da questa
lezione introduce in modo abbastanza esauriente l’insieme delle tematiche anche se per non dilungarsi
troppo non ne approfondisce nessuna. Nonostante questa evidente ricchezza il canvas resta comunque
uno strumento di basso livello e permane in uno stato di difficile utilizzo a meno che non sia supportato
dai dovuti framework, come ad esempio processing.js, canto.js e l’ottimo Easel.js. In questa lezione si è
inoltre volutamente ignorato il tema dell’interazione tra canvas e video, che verrà affrontato nel dovuto
dettaglio nella prossima lezione di questa guida.
122 - 145
Video
L'introduzione della possibilità di riprodurre filmati in un browser senza l'ausilio di plug-in di terze
parti rappresenta di per sé una grossa novità: vanno ad esaurirsi infatti tutte le tematiche legate alla
proliferazione del plug-in utilizzato ed alla portabilità dello stesso (basti pensare ai mille grattacapi
generati dal connubio Flash - iOs).
Ma c'è molto di più! Portando il player video all'interno del DOM si sono rese disponibili tutta una serie di
interessantissime possibilità di interazione: ad esempio il tag video può essere modificato utilizzando i
CSS; lo stesso effetto può essere poi ovviamente applicato anche ai pulsanti di controllo. Inoltre
l'elemento espone una ricca interfaccia Javascript che ci consente di effettuare senza alcune fatica
moltissime efficaci manipolazioni. Infine ricordiamo che il canvas, trattato nella lezione precedente, ha la
facoltà di recuperare fotogrammi da un elemento video e di manipolarli; più avanti mostreremo questa
potente tecnica in azione.
Le specifiche
Prima di iniziare la sperimentazione è necessario procurarsi dei video da utilizzare: per queste demo
abbiamo scelto il trailer del cartone 'Big Buck Bunny', distribuito in licenza Creative Commons e
disponibile per il download all'indirizzo http://www.webmfiles.org/demo-files/ e dal sito ufficiale; l'intero
esempio e tutti i file necessari sono allegati al pacchetto zip che contiene tutti gli esempi della guida.
Incominciamo dal markup, ecco un esempio di implementazione:
1 <video poster="big_buck_bunny/poster.jpg" controls>
2 <source src="big_buck_bunny/trailer.mp4" type="video/mp4" >
3 <source src="big_buck_bunny/trailer.ogg" type="video/ogg" >
4 <source src="big_buck_bunny/trailer.webm" type="video/webm">
5 </video>
L'attributo poster ci consente di specificare una immagine che verrà utilizzata all'interno dell'area di
riproduzione prima che il video venga eseguito; controls invece indica che richiediamo la presenza dei
classici controlli, come play, pausa, volume, barra di avanzamento e quant'altro. Ci sono altri attributi
utilizzabili a livello di video, vediamoli:
•
autoplay: se presente questa stringa di testo indica allo user agent di provvedere alla riproduzione
del video appena si raggiungono le condizioni minime di buffer necessarie;
•
loop: se il browser rileva questa stringa inizierà nuovamente la riproduzione del filmato una volta
che questo è giunto al termine;
•
preload: per questo attributo sono previste tre opzioni: none, metadata e auto. Con none si indica
allo user-agent di non effettuare nessun download preventivo del contenuto del file video,
il buffer inizierà quindi ad essere riempito alla prima pressione del tasto play; con metadata
invece si richiede che vengano recuperate almeno le informazioni essenziali, come la
durata del filmato e le sue dimensioni. Infine con auto, che è anche la valorizzazione di default, si
lascia al browser totale libertà di scelta;
•
audio: possiamo valorizzare questo attributo a 'muted' ottenendo in questo modo che il player
video non riproduca nessun suono. Nell'ultima versione delle specfiche la proprietà è stata
sostituita da un più consono muted che deve essere valorizzato a true
Passiamo a source e al grande dilemma che questi elementi sottendono: i codec. Ogni elemento di
questo tipo infatti indica al browser la disponibilità dello stesso contenuto video in formati di codifica
diversi. Ad oggi non esiste un singolo codec che sia supportato dai maggiori browser in commercio: la
scelta più compatibile in assoluto è il nuovissimo, e open-source, formato .webm/ vp8, che però non è
ben accetto da Safari (e quindi da iPhone et-simila), per il quale la scelta obbligata è invece il classico
.mp4 con codifica h264. Per ogni source è necessario quindi specificare un attributo src, un type ed
opzionalmente anche un codec, da valorizzare con una lista di stringhe contenente il dettaglio della
codifica audio e video, separati dalla virgola.
Eseguendo il primo esempio otterremo questo risultato (figura 1):
Ecco la demo.
Ma non è finita. Insieme agli elementi di tipo source possiamo anche specificare tag track che
123 - 145
rappresentano vari elementi testuali che si possono combinare con il video in modi diversi. Sono
un esempio di track sottotitoli, tracce, che contengono testo ed onomatopee di effetti speciali, e sono di
solito utilizzate dai non udenti, descrizioni, che sono invece composte da testo predisposto per la sintesi
audio da parte di sintetizzatori vocali, di solito utilizzati da persone non vedenti, capitoli ed altri dati:
5 <track kind="subtitles" src="big_buck_bunny/bunny.it.vtt"
6 srclang="it" label="Sottotitoli in Italiano">
7 </video>
Le specifiche legate all'elemento in questione non sono però, ad oggi, supportate da nessuno dei
principali browser in commercio; la stessa estensione di file (.vtt) proposta dal W3C come standard per i
sottotitoli è praticamente sconosciuta e priva di documentazione.
Le API
Parallelamente al markup sono state introdotte tutta una serie di API utilissime per interfacciarsi con
oggetti video. Iniziamo dai più semplici, intuitivi ed utili:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Big Buck Bunny, il trailer</title>
5 <script>
6
var video;
7
eseguiIlPlay = function(){
8
video.play();
9
}
10 eseguiIlPause = function(){
11
video.pause();
12 }
13 cambiaVolume = function(evento){
14
video.volume = evento.target.value;
15 }
16 window.addEventListener('load',function(e){
17
video = document.querySelector('video');
18 })
19 </script>
20 </head>
21 <body>
23 <button type="button" onclick="eseguiIlPlay()" > Play </button>
24 <button type="button" onclick="eseguiIlPause()"> Pause </button>
25 <label> Volume: </label>
26 <input type="range" min="0.0" max="1.0"
27 step="0.1" value="0.5" oninput="cambiaVolume(event)">
28 </menu>
29 <video poster="big_buck_bunny/poster.jpg">
33 </video>
34 </body>
35 </html>
Come potete notare, il controllo base del flusso e del volume è alquanto semplice, esistono però alcune
funzioni più particolari; ad esempio la proprietà playbackRate di un oggetto video può essere valorizzata
con cifre che indicano quale vogliamo che sia la velocità di riproduzione.
Interessanti sono anche i metodi che gravitano attorno alle tematiche temporali: duration, currentTime e
initialTime ritornano rispettivamente la durata in secondi del filmato, la posizione corrente e la posizione
dalla quale è partita la riproduzione (tipicamente 0). Il metodo currentTime può essere inoltre valorizzato
causando uno spostamento della posizione del video al secondo richiesto. Ecco due funzioni che mostrano
rispettivamente come raddoppiare la velocità di riproduzione e modificare la posizione corrente
esattamente a metà della lunghezza del video:
124 - 145
1 doppiaVelocita = function(){
2 video.playbackRate = 2.0;
3}
4 posizionatiAlCentro = function(){
5 video.currentTime = Math.round(video.duration / 2);
6}
Per attivarle aggiungiamo due pulsanti nella toolbar:
2 ...
3 <button type="button" onclick="doppiaVelocita()"> x2 </button>
4 <button type="button" onclick="posizionatiAlCentro()"> Centro </button>
5 ...
6 </menu>
Eseguiamo il codice finora prodotto per testare la bontà di quanto sviluppato (figura 2):
L'ultima parte del capitolo riguardante le API di questo elemento è dedicata ad una classe interessante
denominata TimeRanges e composta da un attributo: length e due metodi start(n) e end(n). Alcuni metodi
dell'elemento video ritornano oggetti di questo tipo che contengono informazioni in merito a collezioni di
intervalli temporali; ecco un esempio (aggiungiamolo alla demo precedente):
1 generaTesto = function(intervalli){
2 var testo = "Ci sono: " + intervalli.length + " intervalli";
3 for(var i=0; i < intervalli.length; i++){
4
testo +="ntda: " + intervalli.start(i) +
5
" a:" + intervalli.end(i) + " secondi"
6 }
7 return testo;
8 }
9 ottieniInformazioni = function(){
10 var caricato = video.buffered;
11 var riprodotto = video.played;
12 var ricercabile = video.seekable;
13 alert( "Alcune informazioni sul video n" +
14 "= Caricato =n" + generaTesto(caricato) + "n" +
15 "= Riprodotto =n" + generaTesto(riprodotto) + "n" +
16 "= Ricercabile =n" + generaTesto(ricercabile)
17 );
18 }
Creiamo il bottone corrispondente, lanciamo la demo e sinceriamoci dell'effettivo funzionamento:
1 <button type="button" onclick="ottieniInformazioni()"> Info </button>
Nello screenshot in figura 3 possiamo verificare il risultato:
Anche in questo caso è disponibile una demo.
Gli eventi
L'elemento video comunica attraverso un elenco lunghissimo di eventi, i principali sono facili e facilmente
comprensibili, come ad esempio play, playing, pause e waiting; per la lista completa rimandiamo alle
specifiche W3C.
MediaController API
Solo un piccolo accenno ad un set di API di recentissima pubblicazione; grazie alle MediaController API
e con l'ausilio di un nuovo attibuto mediagroup, disponibile sia per elementi audio che video, è possibile
chiedere allo user agent di gestire la riproduzione di più oggetti multimediali in modo sincronizzato.
125 - 145
Facciamo un esempio:
1 <video poster="big_buck_bunny/poster.jpg" controls mediagroup="anteprime">
2
<source src="big_buck_bunny/trailer.mp4" type="video/mp4" >
3
<source src="big_buck_bunny/trailer.ogg" type="video/ogg" >
4
<source src="big_buck_bunny/trailer.webm" type="video/webm">
5 </video>
6 <video poster="big_buck_bunny/poster.jpg" controls mediagroup="anteprime">
7
<source src="mixer/movies/src/ballo_green_screen.mp4" type="video/mp4" >
8
<source src="mixer/movies/src/ballo_green_screen.ogg" type="video/ogg" >
9
<source src="mixer/movies/src/ballo_green_screen.webm" type="video/webm">
10 </video>
in questo caso, avendo lo stesso valore per l'attributo mediagroup, entrambi i video vengono associati allo
stesso oggetto di tipo MediaController generato a runtime dal browser. Questo oggetto diventa quindi
responsabile della gestione temporale dei due filmati e ne coordina la riproduzione in sincrono. Per
accedere a questo oggetto la sintassi è estremamente semplice:
1 // ritorna il MediaController associato al video, se presente
2 document.querySelector("video").controller
così come semplici sono i metodi e gli eventi disponibili in quanto coincidono quasi completamente con
quelli dei MediaElements (es: play, pause, volume e tutto quanto visto in questa lezione).
Purtroppo nessun browser ad oggi implementa questo promettente set di API ma, visto l'interesse sul
tema, l'attesa non dovrebbe rivelarsi troppo lunga.
126 - 145
Video e Canvas: un esempio pratico
In questa lezione vedremo come manipolare flussi video in tempo reale con l'ausilio di un canvas. Perché
il tutto funzioni è necessario che sia il video che la pagina che costruiremo risiedano sullo stesso dominio.
Questo per prevenire l'intervento di alcune policy di sicurezza del browser che impediscono di fatto la
modifica di materiale multimediale che non provenga dalla stessa origine della pagina. Ecco uno schema
di quanto realizzeremo:
Utilizzeremo due canvas. Nel primo replicheremo i fotogrammi del video, mentre nel secondo andremo a
inserire il risultato della nostra elaborazione sull'array di pixel estratti dal primo. Il procedimento sarà
quindi il seguente:
•
Avviare la riproduzione del video;
•
Utilizzare la funzione drawImage per disegnare sul primo canvas il contenuto del fotogramma
corrente del video;
•
Con la funzione getImageData recuperare dal canvas il fotogramma precedentemente disegnato,
questa volta però come array di pixel modificabili;
Effettuare un ciclo su tutti i pixel recuperati apportando le modifiche volute;
•
•
•
Utilizzare la funzione putImageData per disegnare l'array di pixel modificato sul secondo canvas;
Ripetere dal secondo punto la procedura.
Ecco il codice necessario:
127 - 145
1 <!doctype html>
2 <html>
3 <head>
4
<title> Canvas e Video </title>
5
<script>
6
decomposizioneColori = function(video, context, context_nascosto, colori){
7
if(video.paused || video.ended) return false;
8
context_nascosto.drawImage(video,0,0);
9
var fotogramma = context_nascosto.getImageData(0,0,
10
context_nascosto.canvas.width,context_nascosto.canvas.height);
11
var fotogramma_data = fotogramma.data;
12
var rosso = colori.rosso.checked;
13
var verde = colori.verde.checked;
14
var blu = colori.blu.checked;
15
for(var i=0; i < fotogramma_data.length; i+=4){
16
if (!rosso) fotogramma_data[i ] = 0;
17
if (!verde) fotogramma_data[i+1] = 0;
18
if (!blu ) fotogramma_data[i+2] = 0;
19
}
20
fotogramma.data = fotogramma_data;
21
context.putImageData(fotogramma,0,0);
22
setTimeout(function(){
23
decomposizioneColori(video, context, context_nascosto, colori)
24
},0);
25
}
26
27
aspettaIlPlay = function(evento){
28
var video
= document.querySelector('video');
29
video.addEventListener("play", function(evento){
30
var context
= document.querySelector('#canvas_principale').getContext('2d');
31
var context_nascosto = document.querySelector('#canvas_elaborazione').getContext('2d');
32
context.canvas.width = context_nascosto.canvas.width = video.clientWidth;
33
context.canvas.height = context_nascosto.canvas.height = video.clientHeight;
34
decomposizioneColori(evento.target,context,context_nascosto, document.forms.colori);
35
},true);
36
}
37
38
window.addEventListener("load",aspettaIlPlay,true);
39
40 </script>
41 </head>
42 <body>
43 <canvas id="canvas_principale"></canvas>
44 <canvas id="canvas_elaborazione" style="display:none;"></canvas>
46
<source src="big_buck_bunny/trailer.mp4" type="video/mp4" >
47
<source src="big_buck_bunny/trailer.ogg" type="video/ogg" >
48
<source src="big_buck_bunny/trailer.webm" type="video/webm">
49 </video>
50 <form name="colori">
51
<fieldset>
52
<legend>Usa le checkbox per controllare i tre canali (RGB)</legend>
53
<label> Rosso <input type="checkbox" name="rosso" checked></label>
54
<label> Verde <input type="checkbox" name="verde" checked></label>
55
<label> Blue <input type="checkbox" name="blu" checked></label>
56
</fieldset>
57 </form>
58 </body>
59 </html>
Il funzionamento si concentra in decomposizioneColori; qui vengono eseguite tutte le operazioni che
abbiamo citato. All'interno del ciclo che scorre tutti i pixel (nelle componenti RGBA) un semplice controllo
pilotato da una form 'spegne' le componenti di colore corrispondenti ad una checkbox non spuntata con
un risultato simile a quello dell'immagine seguente:
Figura 5
128 - 145
Merita un cenno anche l'interessante uso della funzione requestAnimationFrame; il W3C ha predisposto
questo metodo per meglio coordinare la gestione di animazioni all'interno di documenti web. A differenza
dei suoi 'cugini' setTimeout e setInterval questa funzione applica alcune tecniche per ottimizzare le
perfomance e mantenere basso l'utilizzo delle risorse del sistema. Purtroppo la maggior parte dei browser
la considera ancora sperimentale e quindi antepone il proprio prefisso (moz, o, ms o webkit). Per risolvere
questo problema esistono alcuni snippet di codice come quello proposto da Paul Irish.
Possiamo verificare il tutto nella demo conclusiva.
Conclusioni
In queste ultime due lezioni abbiamo esplorato tutto l'ecosistema che circonda la nascita del tag video.
Prima di passare alla prossima lezione ricordiamo che intorno a questo elemento già si affacciano le prime
librerie, capaci di aiutare nella personalizzazione del player e nella gestione di fallback su altre tecnologie
nel caso l'HTML5 non sia supportato. In particolare segnaliamo l'ottimo video.js, che sicuramente merita
una visita di approfondimento.
129 - 145
Audio
La presenza del tag audio è naturale conseguenza dell'esistenza di video. Fra l'altro i due elementi si
assomigliano molto, sia in materia di markup che di API, al punto che nelle specifiche sono raggruppati
all'interno della definizione di HTML Media Elements. L'utilizzo del tag audio sottende però aspetti
assolutamente originali ed interessanti; soprattutto quando utilizzato per arricchire con effetti sonori una
struttura HTML classica.
Le specifiche
La rappresentazione a markup dell'elemento ricalca perfettamente quella del video, anche se vi sono
meno attributi disponibili, vediamo un esempio:
1 <audio controls autoplay loop src="file_musicale.mp3">
In questo caso la definizione si risolve su di una singola linea e senza utilizzo del tag source perché è stato
utilizzato l'attributo src, il cui compito è quello di evitare una scrittura troppo prolissa nel caso in cui il
formato disponibile sia unico. Questo attributo anche se non è stato presentato nella lezione precedente è
valido anche per il tag video, anche se a meno di un reale processo di unificazione dei codec ad oggi
perde molta della sua utilità. In ogni caso la stessa definizione appena espressa si può scrivere anche nel
formato esteso:
1 <audio controls autoplay loop>
2 <source src="file_musicale.mp3" type="audio/mp3">
3 </audio>
Oltre agli attributi presentati nel codice qui sopra, deve essere citato anche preload; ognuno di questi è
già stato illustrato nella lezione precedente e mantiene intatto il suo funzionamento anche su questo
elemento. A differenza di video, l'elemento audio dispone anche di un proprio costruttore JavaScript, ecco
la sintassi:
1 var audio = new Audio("file_musicale.mp3");
In questo modo è possibile utilizzare musiche ed effetti audio senza necessariamente creare l'elemento
HTML né ricorrere a display:none o similari; tratteremo più approfonditamente di questo aspetto nella
sezione dedicata all'esempio.
Per quanto riguarda invece le API e gli eventi associati a questo elemento l'elenco è pressoché congruente
con quello dell'elemento video; le stesse funzioni play, pause, playbackRate, duration, currentTime e
tutto quanto legato ai TimeRanges mantengono inalterato il proprio comportamento in quanto
appartenenti al gruppo HTMLMediaElements al quale entrambi gli elementi fanno parte.
Un esempio
Sfruttiamo la possibilità di creare oggetti audio utilizzando il costruttore JavaScript per studiare un
meccanismo che ci consenta di associare ad ogni bottone un suono predefinito da riprodurre al click. Ecco
il markup che useremo all'interno del body della pagina:
1 <button type="button" data-effetto-audio="gatto_che_miagola.mp3" disabled>
2 Il verso del gatto...
3 </button>
4 <button type="button" data-effetto-audio="cane_che_abbaia.mp3" disabled>
5 Il verso del cane...
6 </button>
L'utilizzo degli attributi data-* ci consente in modo elegante di aggiungere un'informazione caratterizzante
al pulsante, senza creare strane sovrastrutture. Ora il codice JavaScript dovrà occuparsi di scandagliare la
pagina alla ricerca di pulsanti con suono associato e creare un oggetto audio con la sorgente che punti
all'attributo che abbiamo definito. L'evento canplaythrough, verrà utilizzato per intercettare il momento in
cui un dato oggetto audio ritiene di aver collezionato dati sufficienti per garantire la riproduzione
dell'intero brano. All'accadere di tale evento il pulsante associato al suono verrà abilitato e un listener in
ascolto sull'evento click garantirà l'esecuzione del suono alla pressione del bottone. Ecco il codice della
demo completa:
130 - 145
1 <!doctype html>
2 <html>
3 <head>
4 <title>Il suono degli animali</title>
5 <script>
6
init = function(evento){
7
var bottoni = document.querySelectorAll('button');
8
for(var b=0; b < bottoni.length; b ++){
9
var effetto_audio = bottoni[b].dataset.effettoAudio;
10
if(effetto_audio != ""){
11
var audio = new Audio(effetto_audio);
12
audio.bottone_di_riferimento = bottoni[b];
13
audio.addEventListener('canplaythrough',
14
function(evento_load){
15
var bottone = evento_load.target.bottone_di_riferimento;
16
bottone.disabled = false;
17
bottone.audio_di_riferimento = evento_load.target;
18
bottone.addEventListener('click',
19
function(evento_click){
20
evento_click.target.audio_di_riferimento.play();
21
}
22
);
23
}
24
);
25
}
26
}
27 }
28 window.addEventListener('load',init); </script>
29 </head>
30 <body>
31 <button type="button" data-effetto-audio="gatto_che_miagola.mp3" disabled>
32 Il verso del gatto...
33 </button>
34 <button type="button" data-effetto-audio="cane_che_abbaia.mp3" disabled>
35 Il verso del cane...
36 </button>
37 </body>
38 </html>
Il codice sembra a prima vista complicato ma è facilmente decomponibile in 3 fasi principali:
•
Un ciclo for viene eseguito al caricamento della pagina su tutti gli elementi di tipo button; per
ognuno di questi elementi viene istanziato un oggetto Audio. Su tale oggetto viene memorizzato
un riferimento al bottone associato tramite la variabile bottone_di_riferimento e viene registrato
un handler sull'evento canplaythrough.
•
Quando un oggetto Audio colleziona un buffer di dati ritenuto dal browser tale da consentire la
riproduzione integrale del suono, l'evento canplaythrough viene lanciato ed intercettato dalla
nostra funzione che a quel punto crea, con un meccanismo simile al punto precedente, un handler
sul pulsante presente nella variabile bottone_di_riferimento da attivarsi alla pressione dello stesso.
Inoltre il pulsante viene abilitato (bottone.disabled=false) in modo da poter ricevere i click degli
utenti.
•
Il click dell'utente su di un pulsante attiva l'handler appena definito che non fa altro che riprodurre
il suono presente nell'oggetto Audio ad esso associato.
Eseguiamo l'applicazione appena sviluppata e sinceriamoci del suo corretto funzionamento: ecco
l'esempio.
Conclusioni
L'elemento che abbiamo illustrato in questa sezione corre di pari passo con l'implementazione HTML5 del
video, dal quale, abbiamo visto, eredita pressoché la totalità delle proprietà. Nonostante questo l'utilizzo
dell'elemento audio si presta a scenari molto più variegati rispetto a quanto ci si potrebbe immaginare:
parte di questa interessante flessibilità risiede proprio nella sua predisposizione ad essere creato
direttamente da JavaScript.
131 - 145
<audio>
9.0+ 3.5+ 4.0+ 5.0+ 10.5+
Codec audio
MP3
Wav
AAC
Ogg/Vorbis
Sì
No
Sì
No
No
Sì
No
Sì
Sì
Sì
Sì
No
Sì
No
Sì
Sì
No
Sì
No
Sì
132 - 145
SVG e MathML
SVG
SVG è un acronimo che significa Scalable Vector Graphic e indica una specifica modalità di definire
elementi di natura grafica attraverso una sintassi XML, ecco un esempio:
1 <?xml version="1.0" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg width="300px" height="300px" viewbox="0 0 300 300"
5 xmlns="http://www.w3.org/2000/svg" version="1.1">
6 <title>Una barchetta in SVG</title>
7 <desc>La stessa barchetta della lezione sui canvas ora in SVG</desc>
8 <path d="M40,170 h220 A150,150 0 0,1 40,170 h110 v-130 v130 h-110 z"
9
fill="black" stroke="black" stroke-width="1"/>
10 <rect x="150" y="40" width="60" height="30"
11 fill="black" stroke="black" stroke-width="1"/>
12 </svg>
La maggior parte dei browser in circolazione interpreta correttamente lo standard SVG, se proviamo a
visualizzare questa pagina in Chrome otterremo questo risultato (figura 1):
Figura 1
Nonostante il risultato sia a prima vista identico rispetto alla barchetta disegnata all’interno della lezione
sull’elemento canvas, si può notare come a livello di codice ci sia una enorme differenza: mentre sul
canvas è necessario insistere con istruzioni JavaScript che pilotano la creazione del disegno, qui ci
troviamo di fronte ad un linguaggio XML fatto per descrivere l’immagine. Ma non è finita: da un lato
(canvas) stiamo lavorando su di una matrice di pixel, che quindi non può essere ridimensionata senza
subire perdite di qualità; dall’altro, con SVG, operiamo con grafica vettoriale, che preserva in modo
assoluto lo stesso risultato a prescindere dalle operazioni di trasformazione applicate ad essa.
MathML
Anche MathML è un acronimo: Mathematical Markup Language; il fine di questa sintassi è quello di
rendere possibile la visualizzazione a schermo di formule complesse, senza ricorrere al classico
espediente dell’utilizzo di immagini create a partire da screenshot di applicazioni scientifiche. Anche in
questo caso stiamo parlando di sintassi XML-like. A seguire un esempio della famosa equazione di Einstein
secondo queste specifiche:
133 - 145
1 <?xml version="1.0" encoding="UTF-8"?>
2
3 <math xmlns="http://www.w3.org/1998/Math/MathML">
4 <semantics>
5
<mrow>
6
<mi>E</mi>
7
<mi mathvariant="normal">=</mi>
8
<msup>
9
<mi mathvariant="italic">mc</mi>
10
<mn>2</mn>
11
</msup>
12 </mrow>
13 <annotation>E=mc^2</annotation>
14 </semantics>
15 </math>
Per testare la sintassi del nostro esempio è necessario munirsi della versione nightly (sperimentale) del
browser WebKit, tra i pochi a supportare queste specifiche. Questo è il risultato (figura 2):
Figura 2
Novità in HTML5
Ed ecco la novità: le specifiche HTML5 prevedono l’integrazione di entrambi questi markup senza nessuna
definizione aggiuntiva (a differenza della precedente integrazione con XHTML). Sarà quindi possibile
scrivere:
1 <!doctype html>
2 <html>
3 <title>Big Buck Bunny, il trailer</title>
4 <body>
5 <svg>
6

7 </svg>
8 <math>
9

10 </math>
11 </body>
12 </html>
E c’è di più: le due sintassi in questione potranno direttamente beneficiare dell’intero ecosistema HTML5
attorno a loro. Questo significa che una espressione MathML può, in questo contesto, variare a seguito
della ricezione di alcuni dati tramite Ajax, oppure che una rappresentazione SVG può essere pilotata da
alcuni eventi JavaScript attivati attraverso una form.
Conclusioni
Con queste due nuove frecce al suo arco, le specifiche HTML5 acquistano un nuovo livello di potenza.
134 - 145
Forse non capiterà troppo spesso di implementare sintassi MathML per sistemi applicativi ma sicuramente
lo stesso non si può dire per SVG. Anche il supporto a queste due specifiche è diverso, la Scalable Vector
Graphic è pressoché presente su tutte le più recenti versioni dei browser, mentre il supporto per il markup
per definire espressioni matematiche comincia ora ad affacciarsi nelle prime beta, come ad esempio
Firefox 4 o la versione nightly di WebKit. In ogni caso esiste una interessante libreria JavaScript, MathJax,
capace di interpretare linguaggio MathML e generare una corretta rappresentazione grafica sulla maggior
parte dei browser in commercio.
135 - 145
Una 'lavagna virtuale'
Nel corso delle lezioni abbiamo assistito al graduale arricchimento del progetto guida; in questo articolo
ne esploreremo alcune possibili evoluzioni attraverso l’utilizzo delle API HTML5 apprese finora.
Il canvas nella dashboard
È possibile fare in modo che dalla dashboard (dashboard.html) si possa visualizzare il contenuto, attuale e
salvato, del canvas di una data fiveboard con un meccanismo simile a quello utilizzato per la
memorizzazione su localStorage. Per ottenere questo risultato possiamo sostituire il blocco legato al
comando ‘richiedi_testo’ nel file application.js con:
1 case 'richiedi_testo':
2 evento.ports[0].postMessage('testo_corrente:' +
3
document.forms['form_da_ricordare'].elements['testo_da_ricordare'].value);
4 evento.ports[0].postMessage('testo_memorizzato:' +
5
localStorage.getItem("fb_" + titolo_fiveboard));
6 evento.ports[0].postMessage('canvas_corrente:' +
7
ctx.canvas.toDataURL('image/png'));
8 evento.ports[0].postMessage('canvas_memorizzato:'+
9 localStorage.getItem("canvas_fb_" + titolo_fiveboard));
10 break;
A questo punto dobbiamo far sì che la dashboard sappia ricevere ed interpretare correttamente questi 4
distinti messaggi, modifichiamo quindi il blocco che fa seguito al comando attendi_testo in
dashboard.html:
1 case 'attendi_testo':
2 evento.ports[0].onmessage = function(e){
3
nome_comando = e.data.split(":")[0]
4
valore_comando = e.data.substr(nome_comando.length + 1);
5
elemento = document.getElementById(nome_comando);
6
switch (elemento.tagName){
7
case 'CANVAS':
8
elemento.width = elemento.width;
9
if(valore_comando == 'null') return
10
var context = elemento.getContext('2d');
11
var immagine = new Image();
12
immagine.src = valore_comando; context.drawImage(immagine,0,0);
13
break;
14
case 'TEXTAREA':
15
if(valore_comando == 'null')
16
valore_comando = '';
17
elemento.value = valore_comando;
18
break;
19 }
20 }
21 break;
Nel frammento di codice appena esposto facciamo uso dell’attributo tagName per determinare il tipo di
elemento che deve contenere le informazioni appena ricevute. In questo modo il comando
‘testo_memorizzato:contenuto_del_testo’ inviato dalla fiveboard si traduce nella valorizzazione
dell’elemento ‘testo_memorizzato’ a ‘contenuto_del_testo’ nella dashboard.
Completiamo questa evoluzione inserendo gli elementi di markup all’interno di dashboard.html:
1 </ol>
2 <section>
3 <h1>In Osservazione:</h1>
4 <textarea id="testo_corrente" placeholder="testo_corrente" readonly></textarea>
5 <textarea id="testo_memorizzato" placeholder="testo_memorizzato" readonly></textarea>
6 <canvas id="canvas_corrente">Canvas Corrente</canvas>
7 <canvas id="canvas_memorizzato">Canvas Memorizzato</canvas>
8 </section>
Ecco uno screenshot dell’implementazione funzionante (figura 1):
136 - 145
Com’è possibile notare, ora alla pressione sul link ‘più informazioni’ la dashboard è in grado di mostrare
sia testo che canvas, attuali e memorizzati, della fiveboard richiesta.
Esportazione in SVG
Potrebbe essere interessante, in questo contesto, offrire ai nostri utenti una esportazione in SVG del
contenuto del canvas. In un prossimo futuro il task in questione potrà essere risolto in modo efficace
utilizzando la funzione canvas.toDataUrl con parametro ‘image/svg+xml’ ; purtroppo ad oggi i browser
supportano soltanto un'esportazione in formato png e quindi dovremo costruire qualcosa di più articolato
per soddisfare questo comportamento.
Iniziamo con l’aggiungere questa funzione in canvas.js:
137 - 145
1 EsportaInSVG = function(){
2 var bb = new BlobBuilder();
3 bb.append( "" +
4
"<?xml version='1.0' standalone='no'?>" +
5
"<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'" +
6
" 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>" +
7
"<svg width='300px' height='300px' viewbox='0 0 300 300'" +
8
" xmlns='http://www.w3.org/2000/svg' version='1.1'>" +
9
" <title>SVG: " + titolo_fiveboard + "</title>" +
10
" <desc>Un esportazione in SVG del canvas disegnato</desc>" +
11
" <path d='" + svg_path + " z' fill='transparent'" +
12
" stroke='black' stroke-width='1'/>" +
13 "</svg>"
14 );
15 window.open(window.createObjectURL(bb.getBlob('image/svg+xml')));
16 }
L’oggetto BlobBuilder fa parte delle File API: Writer, un set di funzionalità che gravitano attorno alle
specifiche HTML5 e consentono di costruire veri e propri file da far scaricare all’utente o ai quali far
puntare il browser. Al momento questi metodi sono ancora abbastanza sperimentali, nonostante già
supportati in Chrome, Firefox e WebKit. In questo esempio la variabile bb viene valorizzata con un file SVG
nel quale sono inseriti dinamicamente i contenuti delle variabili titolo_fiveboard, il titolo della fiveboard, e
svg_path, della cui costruzione ci occuperemo a breve. Nell’ultima riga della funzione il browser apre una
nuova finestra verso una URL univoca generata dal metodo createObjectURL. Tale URL punta al contenuto
della variabile bb esposto con MIME image/svg+xml.
Occupiamoci ora della generazione della variabile svg_path che dovrà contenere le istruzioni per
ricostruire il percorso generato dall’utente sul canvas. Modifichiamo il file canvas.js come segue:
1 var ctx = null;
2 var started = false;
3 var svg_path = "";
4 iniziaDisegno = function(evento){
5 ctx.beginPath();
6 ctx.moveTo(evento.offsetX,evento.offsetY);
7 svg_path += "M " + evento.offsetX + " " + evento.offsetY + " ";
8 started = true;
9 }
10
11 disegna = function(evento){
12 if(started){
13 ctx.lineTo(evento.offsetX,evento.offsetY);
14 svg_path += "L " + evento.offsetX + " " + evento.offsetY + " ";
15 ctx.stroke();
16 }
17 }
Il trucco sta nel far seguire all’istruzione che insiste sul canvas la corrispondente variazione da applicare
al path svg. In questo modo una particella ‘M x y’ verrà concatenata a svg_path per ogni istruzione
moveTo inviata al canvas, lo stesso accadrà per l’istruzione lineTo, seguita da una concatenazione di ‘L x
y’.
L’ultimo passo prima del completamento di questa evoluzione consiste nell’aggiungere il pulsante
preposto a far scatenare la funzione EsportaInSVG:
1 </button>
2 <button type="button" onclick="EsportaInSVG();">
3 Esporta il canvas corrente in SVG
4 </button>
5 </menu>
Per testare questa modifica ricorriamo a Chrome (figura 2):
Ed ecco il risultato! Mentre la barchetta nella finestra in sfondo risiede su di un canvas quella in primo
piano è creata a partire da un file SVG; notate inoltra il curioso URL di questa finestra, generato in tempo
reale dalla funzione di cui abbiamo parlato poco fa.
138 - 145
Non ci resta che rimandare alla demo per un test. Il codice è disponibile per il download.
Un passo avanti
Con quest’ultima evoluzione ci apprestiamo a congedare il progetto guida, utile assistente durante le
passate lezioni. Per chi fosse interessato a mantenere questo applicativo come base per proprie
sperimentazioni ecco alcuni possibili e sfidanti implementazioni effettuabili:
•
Fare in modo che il viewer.html possa seguire in tempo reale anche l’atto del disegno sul canvas
della fiveboard che sta osservando, così come oggi avviene per il testo. Questa modifica coinvolge
la definizione di un protocollo snello per la trasmissione di dati di questo tipo attraverso un
WebSocket.
•
Refactoring! Perché non provare a fare in modo che i comandi che giungono alle pagine web nel
formato scelto per convenzione come ‘nome_comando:valore_comando’ siano trasformati in
eventi custom e propagati attraverso il DOM ? La sintassi potrebbe essere questa:
4 var evento_custom = document.createEvent("CustomEvent");
5 evento_custom.initCustomEvent(nome_comando, true, true, valore_comando);
6 document.dispatchEvent(evento_custom);
7}
In questo modo si potrebbe ottenere una struttura molto più elegante, nella quale ogni aspetto
dell’applicazione si sottoscrive autonomamente agli eventi dei quali necessita.
Conclusioni
Con questa lezione si conclude il ciclo dedicato all’esplorazione delle nuove API rese disponibili
dall’HTML5. Prima della conclusione di questa guida trova spazio un'ultima lezione, la prossima,
incentrata su tutte le tematiche che legano le specifiche al mondo reale. Verranno quindi trattati temi
come il feature detection ed elencate librerie che possono, di caso in caso, sopperire alla mancanza di
particolari funzionalità. Proprio a questo tema ricordiamo che il progetto guida è nato e cresciuto con
finalità didattiche e di sperimentazione e per questa ragione è molto carente in termini di compatibilità tra
browser e graceful degradation; a ben pensare anche perseguire queste tematiche potrebbe essere un
ottimo esercizio da svolgere in autonomia dopo aver letto la prossima lezione!
139 - 145
Feature detection e strategie di fallback
Come si comportano le API e i nuovi tag proposti dall'HTML5 nel mondo reale? Come dobbiamo
comportarci se vogliamo beneficiarne? In quest'ultima lezione risponderemo a questa importantissima
domanda esaminando alcune best-practice per una implementazione che possa arricchire le nostre
applicazioni e portali web senza causare grattacapi e disagi.
Una pioggia di tag
Possiamo usare <article>, <section> o <footer> su browser come Internet Explorer 6? La
risposta è sì, a patto di premunirsi di alcuni semplici e comodi strumenti capaci di far recepire questi
nuovi elementi HTML5 anche a user-agent non più giovanissimi. Uno di questi tool, specificatamente
progettato per i browser di casa Microsoft, prende il nome di html5shim e può essere incluso nelle proprie
applicazioni molto facilmente:
1 
Questo strumento fa sì che Internet Explorer possa applicare gli stili ai nuovi tag introdotti dall'HTML5. Ma
ancora non basta. La maggior parte dei browser di non ultima generazione, infatti, non conoscendo
direttamente i nuovi elementi, applica a loro un foglio di stile di base errato, assegnando ad esempio
display:inline a tag come <article> o <section>.
Per risolvere questa fastidiosa incombenza la soluzione migliore è utilizzare un foglio di stile capace di
resettare le proprietà di questi e altri elementi attivando il comportamento atteso. HTML5 reset stylesheet
si presta in modo ottimale a questo obiettivo; l'unico passo da compiere è includerlo all'interno del proprio
sito prima degli altri documenti .css.
Feature detection vs. browser detection
La corsa all'HTML5 intrapresa dai vari browser nell'ultimo periodo si può descrivere come una
incrementale implementazione delle feature proposte dal W3C; il criterio con cui viene stabilita la priorità
nella 'scaletta delle API da aggiungere' è influenzato da moltissimi fattori e differisce da prodotto a
prodotto. Allo stato attuale delle cose non ha quindi particolarmente senso determinare il comportamento
della propria applicazione sulla base dello user-agent che la sta eseguendo, quanto più cercare di
intercettare la presenza o meno di una specifica feature.
L'attività, potenzialmente noiosa di per sé, viene facilitata in modo estremo dalla presenza sul mercato di
un utilissimo tool: Modernizr.js. Facciamo un esempio, sinceriamoci del supporto per il localStorage:
1 if(Modernizr.localstorage) {
2 alert("Rilevato il supporto per il localStorage");
3 } else {
4 alert("Oh oh, nessun supporto per il localStorage");
5}
Semplice, elegante e molto comodo. L'installazione di questa libreria si risolve con una semplice
inclusione e una speciale classe da applicare al tag <html>:
1 <html class="no-js">
2 <head>
3 <script src="/modernizr-1.6.min.js"></script>
4 <script>
5 // Ora puoi utilizzare Modernizr!
6 </script>
7 </head>
Fallback e alternative
Abbiamo scoperto che il nostro utente non supporta una certa funzionalità... e ora? Niente panico: nella
maggior parte dei casi esistono valide alternative, o quantomeno interessanti opzioni di fallback.
Vediamole nel dettaglio.
Audio e Video
In questo caso l'alternativa migliore rimane la collaudata tecnologia Flash. Esistono parecchie
librerie sulla rete capaci di determinare autonomamente il supporto o meno al tag <video> e agire di
conseguenza. Noi abbiamo scelto video.js per la sua maturità e per l'ottimo supporto di skin con le quali
140 - 145
personalizzare il proprio player. L'utilizzo è semplicissimo e ben illustrato nella pagina di Getting Started.
Canvas
Abbiamo due soluzioni da segnalare come alternativa all'assenza canvas: la prima si chiama
explorercanvas, una libreria Javascript sviluppata da Google per simulare il comportamento del <canvas>
all'interno di Internet Explorer. Per attivarla è sufficiente richiamare lo script excanvas.js all'interno del
proprio tag <head>:
1 
Da qui in poi è possibile utilizzare all'interno della pagina il tag <canvas> ed invocare su questo la
maggior parte dei metodi previsti dalle specifiche W3C.
L'altra tecnica di fallback prende invece il nome di FlashCanvas ed emula il comportamento delle API
HTML5 attraverso il sapiente utilizzo della tecnologia Flash. La versione 1.5, supera più del 70% dei test
proposti da Philip Taylor, piazzandosi in questo modo sul primo gradino del podio delle alternative
disponibili. Anche in questo caso per beneficiare di questa libreria è necessario solamente richiamare
l'apposito file javascript:
1 
Geolocation
Come simulare le API di geolocazione quando non sono supportate? Prima di disperare è importante
ricordare che seppur non tutti browser implementano queste specifiche è comunque possibile alle volte
accedere ad informazioni geospaziali utilizzando API proprietarie messe a disposizione da particolari
device o plug-in esterni, come ad esempio Google Gears. geo-location-javascript è una libreria che
identifica le varie estensioni disponibili sul portatile (o smartphone) dell'utente e ne uniforma e centralizza
le API permettendo di accedere ad informazioni come latitudine e longitudine usando gli stessi metodi
proposti dal W3C. Ecco un esempio. Per prima cosa è necessario includere i necessari file javascript:
1 <script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"></script>
2 <script src="geo.js" type="text/javascript" ></script>
Quindi è necessario inizializzare la libreria con il comando:
1 if (!geo_position_js.init()) {
2 // funzionalità di geolocazione non presenti (ne HTML5 ne attraverso estensioni
3 // proprietarie...)
4}
A questo punto è possibile invocare i classici metodi come da specifiche W3C, stando attendi a preporre
l'oggetto geo_position_js:
1 geo_position_js.getCurrentPosition(funzione_se_successo,funzione_se_errore);
Drag and Drop
In questo caso ci sono due tematiche da affrontare: la prima è di carattere 'workaround' e si focalizza
sull'identificare soluzioni alternative che preservino lo stesso meccanismo di interazione del Drag and
Drop HTML5. Per questo tipo di eventualità esistono potentissime librerie capaci di offrire esattamente
questo tipo di comportamento: le più famose sono ovviamente JQueryUI, ma anche Scriptaculous e il
nuovo Scripty2. Tutto questa interazione di fallback, invece, viene meno nel caso le API previste dal W3C
siano utilizzate espressamente per la loro funzione di input, quindi, ad esempio, per trascinare file
all'interno della pagina web. In questo caso si può pensare di mantenere la funzionalità riducendo il
potere dell'interfaccia e dell'interazione, realisticamente con l'utilizzo di normalissime form e di campi
<input type=file>.
WebSocket
Appurata l'assenza del supporto WebSocket l'alternativa migliore rimane ripiegare su una tra le tecniche
per soppiantare le quali sono nate proprio queste API HTML5: stiamo parlando di Comet e di websocket
in Flash. Proprio a proposito di quest'ultima opzione merita un cenno l'ottimo, anche se poco
documentato, web-socket-js capace di replicare il comportamento delle specifiche W3C utilizzando però
un piccolo componente Flash iniettato dinamicamente all'interno della pagina. A questo indirizzo un
esempio di utilizzo.
141 - 145
WebWorkers
Non esistono, al momento, soluzioni di ripiego per riparare l'assenza del supporto di questa parte delle
specifiche HTML5 senza ricorrere ad estensioni di terze parti come le ottime WorkerPool API di Google
Gears. L'unico workaround possibile è scrivere una versione del codice eseguito dal worker capace di
funzionare all'interno del contesto della pagina ed eseguire quella nel caso in cui venga verificata
l'assenza della feature (chiaramente perdendo il vantaggio dell'esecuzione asincrona). Nel caso invece si
stia trattando si SharedWebWorkers il discorso si complica ulteriormente; è in linea teorica possibile
emulare artigianalmente un comportamento di questo tipo utilizzando un area di storage comune (es:
localStorage) per lo scambio di messaggi convenzionati tra le pagine dello stesso dominio.
WebStorage e IndexedDB
Come per i WebWorkers, anche qui la soluzione di fallback più completa in termini di funzionalità passa
attraverso Google Gears: stiamo parlando delle Database API. E' però importante sottolineare che, mentre
WebStorage e IndexedDB basano la loro filosofia di funzionamento su array associativi, Google Gears si
appoggia ad una istanza di SQLite, un database relazionale che opera tramite classiche istruzioni SQL, In
questo caso quindi offrire una soluzione alternativa all'assenza di questi componenti HTML5 potrebbe
rivelarsi decisamente costoso.
Offline Web Application
Google Gears anche in questo caso. Le API si chiamano LocalServer e presentano funzionalità simili a
quelle offerte dalle implementazioni delle specifiche W3C.
Shim e Polyfill a profusione
Abbiamo dato solo un piccolo assaggio della quantità di librerie alternative disponibili per sopperire alle
più svariate API HTML5. In realtà il numero di questi software di fallback è decisamente sostanzioso ed è
bene introdurre alcune differenze di massima tra le varie tipologie di librerie disponibili.
Definiamo come Shim una libreria che sopperisce ad una funzione mancante emulandone il
comportamento ma richiedendo allo sviluppatore uno sforzo aggiuntivo in quando le API che mette a
disposizione differiscono da quelle native in HTML5. Con Polyfill indichiamo invece uno Shim che però
fornisce allo sviluppatore le medesime API offerte dalla controparte HTML5 rendendo così necessaria una
singola implementazione.
Quindi, ove possibile è meglio preferire un Polyfill ad uno Shim. Già, ma come trovarli? Si può consultare
la lista dei migliori polyfill redatta dagli sviluppatori di Modernizr.
Un ultimo appunto: se il numero di file javascript dovesse diventare troppo sostanzioso ricordiamoci che è
sempre possibile ricorrere ad un loader condizionale, come yepnope.js.
Conclusioni
Siamo alla fine, con queste ultime righe si conclude la guida HTML5 di html.it, in circa 50 lezioni abbiamo
sorvolato un pianeta ricco di nuove ed interessanti opportunità, capaci di far evolvere le nostre creazioni
web fino a dove pochi anni fa non ritenevamo possibile. In questa lezione abbiamo scoperto come le
specifiche si intreccino con il mondo reale e quali sono i potenziali comportamenti di fallback da
implementare nel caso di assenza di qualche particolare feature. In particolare ci siamo accorti che per
tematiche di basso livello (WebStorage, IndexedDB e Offline Web Application) non esistono soluzioni
alternative, se si esclude Google Gears, che però necessita di una installazione manuale da parte
dell'utente finale.
Un ultimo punto importante prima di concludere: non tutte le funzionalità proposte dall'HTML5 sono da
considerarsi pronte per un uso in fase di produzione, alcune di esse infatti sono ancora in uno stadio di
implementazione poco stabile, oppure subiranno a breve importanti cambiamenti nelle loro API; per avere
un elenco aggiornato di cosa è considerato utilizzabile in produzione e cosa no potete consultare la
tabella di compatibilità posta in appendice a questa guida.
142 - 145
Appendice: Tabelle del supporto sui browser di HTML5
Tabelle del supporto sui browser di HTML5
Le seguenti tabelle sintetizzano il supporto sui principali browser dei nuovi tag, attributi e API HTML5. Per
ciascun browser viene indicata la versione più bassa che supporta una specifica funzionalità. I link
puntano alle lezioni dedicate a ciascun tag e API.
Indice dei contenuti
•
•
•
•
•
•
•
•
•
Attributi globali
Tag semantici e strutturali
Codec video
Codec audio
Altre funzionalità
Attributi globali
contenteditable
contextmenu
data-*
draggable
hidden
spellcheck
5.5+
No
No
No
No
No
3.0+
No
No
3.5+
4.0+
2.0+
3.1+
No
5.0+
5.0+
Nightly build
No
2.0+
No
6.0+
5.0+
Nightly build
No
9.0+
No
No
No
Nightly build
No
<header>
<footer>
<section>
<article>
<nav>
<aside>
<hgroup>
<mark>
<time>
<meter>
<progress>
<figure>
<figcaption>
<ruby>
<wbr>
<command>
<menu>
<details>
<summary>
<keygen>
<output>
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
No
No
No
9.0+
9.0+
5.5+
No
No
No
No
No
No
No
3.0+
3.0+
3.0+
3.0+
3.0+
3.0+
3.0+
4.0+
No
No
No
4.0+
4.0+
No
No
No
No
No
No
1.0+
4.0+
3.1+
3.1+
3.1+
3.1+
3.1+
3.1+
3.1+
5.0+
No
No
No
Nightly build
Nightly build
5.0+
No
No
No
No
No
2.0+
Nightly build
5.0+
5.0+
5.0+
5.0+
5.0+
5.0+
5.0+
5.0+
No
8.0+
8.0+
Nightly build
Nightly build
5.0+
No
No
No
No
No
2.0+
Nightly build
10.0+
10.0+
10.0+
10.0+
10.0+
10.0+
10.0+
11.0+
No
11.0+
11.0+
11.0+
11.0+
No
No
No
No
No
No
7.0+
9.0+
143 - 145
search
tel
url
email
datetime
date
month
week
time
datetime-local
number
range
color
datalist
No
No
No
No
No
No
No
No
No
No
No
No
No
No
4.0+
4.0+
4.0+
4.0+
No
No
No
No
No
No
No
No
No
4.0+
2.0+
4.0+
4.0+
4.0+
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
4.0+
4.0+
Parziale
No
2.0+
2.0+
2.0+
2.0+
Parziale
Parziale
Parziale
Parziale
Parziale
Parziale
2.0+
2.0+
Parziale
No
11.0+
11.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
9.0+
11.0+
9.0+
autocomplete
autofocus
list
placeholder
min, max
multiple
pattern
required
step
maxlenght
form
formtarget
formaction
formmethod
formenctype
formnovalidate
No
No
No
No
No
No
No
No
No
No
No
No
No
No
No
No
No
4.0+
4.0+
4.0+
No
3.6+
4.0+
4.0+
No
4.0+
4.0+
4.0
4.0
4.0
4.0
4.0
No
4.0+
No
4.0+
Nightly
4.0+
4.0+
4.0+
4.0+
4.0+
Nightly
Nightly
Nightly
Nightly
Nightly
4.0+
build
build
build
build
build
build
No
2.0+
No
2.0+
Nightly
2.0+
2.0+
2.0+
2.0+
2.0+
Nightly
Nightly
Nightly
Nightly
Nightly
2.0+
build
build
build
build
build
build
10.6+
9.0+
9.0+
11.0+
9.0+
11.0+
9.0+
9.0+
9.0+
9.0+
9.0+
No
No
No
No
No
Applicazioni
(.manifest)
web
offline
No
3.5+
4.0+
2.0+
WebStorage
WebWorkers
9.0+
(parziale)
8.0+
No
5.0+
(parziale)
3.1+
4.0+
8.0+
(parziale)
2.0+
2.0+
WebSockets
No
5.0+
7.0+
Drag and Drop
Geolocation
No
No
4.0+
(parziale)
3.6+
3.6+
4.0+
(parziale)
3.5+
3.6+
3.2+
5.0+
2.0+
5.0+
10.6+
No
10.5+
10.6+
11.0+
(parziale)
No
10.6+
144 - 145
<canvas>
<video>
<audio>
9.0+ 2.0+ 3.1+ 2.0+ 10.0+
9.0+ 3.5+ 4.0+ 5.0+ 10.5+
9.0+ 3.5+ 4.0+ 5.0+ 10.5+
Codec video
H.264
WebM
Ogg/Theora
Sì
No
No
No
Sì
Sì
Sì
No
No
Sì
Sì
Sì
No
Sì
Sì
Sì
No
Sì
No
No
Sì
No
Sì
Sì
Sì
Sì
No
Sì
No
Sì
Sì
No
Sì
No
Sì
No
No
No
3.6+ 5.0+ (parziale) 5.0+ No
No
5.0+ (parziale) 5.0+ No
No
No
No
No
Codec audio
MP3
Wav
AAC
Ogg/Vorbis
Altre funzionalità
File API
File API: Writer
Microdata
145 - 145

Manuale html5 - Funny pages main

Transcript

Documenti analoghi

Istruzioni d`uso per i Test on-line

Opzioni della Schermata di scelta del browser

(VI) - Italy TEL: +39/0445/579035 FAX: +39/0445/575708

il futuro della lingua franca del Web

pubcoder annuncia la nuova esportazione in html5 per gli utenti

Safari Browser - Attivazione dei Cookie

Safari Browser - Eliminazione dei File Temporanei di Internet

Altri browser non presenti nella Schermata di

sizzix.co.uk

lezione 29-05-13