Guida Html5 italiano

Guida HTML5di: Sandro Paganotti, Gianluca Guarini, Simone Bonati

Le basi di HTML51.

1. IntroduzioneIntroduzione alla guida e presentazione del metodo operativo

2.2. Da HTML 4 ad HTML5

Il percorso che ha portato allo sviluppo di HTML5, con una breve presentazione delle caratteristiche salienti del linguaggio e della specifica 3.

3. La sintassi di HTML5Le regole di base per scrivere codice HTML5; le differenze rispetto a XHTML

4.4. Elementi disegnati per un web moderno

Cosa cambia in HTML5 rispetto alla versione 4 del linguaggio: elementi e attributi non pi presenti nella specifica 5.

5. Attributi globaliAnalisi dei nuovi attributi globali introdotti nella specifica ed elenco degli attributi applicabili a tutti gli elementi

6.6. Un nuovo content model

Un nuovo approccio alla strutturazione semantica dei contenuti in un documento HTML 7.

7. Panoramica sui content model e presentazione del primo progetto guidaEsaminiamo da vicino gli altri content model previsti nella specifica HTML5

Nuovi elementi strutturali e semantici1.

8. HeaderRaggruppare elementi ausiliari e introduttivi

2.9. Footer

Un tag per raggruppare informazioni sulle sezioni che compongono la pagina 3.

10. SectionCreare sezioni generiche all'interno di una pagina

4.11. Article

Definire sezioni di contenuto autonome e ripubblicabili 5.

12. NavUn tag studiato per definire e raggruppare gli elementi di navigazione presenti nella pagina

6.13. Aside

Raggruppare informazioni correlate ai contenuti principali 7.

14. HgroupRaggruppare correttamente i titoli

8.15. Mark

Evidenziare parti o parole importanti della pagina 9.

16. Time e gli attributi pubdate e datetimeDefinire sementicamente le date e gli orari

10.17. Meter

Rappresentare e definire misure scalari 11.

18. ProgressUn tag per rappresentare lo stato di completamento di un compito

12.19. Altri tag

Un elenco dei tag meno importanti definiti nella specifica

I form: nuovi attributi e tipi di input1.

20. I form in HTML5: una panoramicaCosa cambia nella gestione dei moduli in HTML5

2.21. Nuovi attributi per i form: autofocus, placeholder e form

Iniziamo la panoramica sui nuovi attributi definiti nella specifica per i campi di input di un form 3.

22. Nuovi attributi dei form per la validazioneAnalisi degli attributi required, autocomplete, multiple, pattern, min, max, step, novalidate

4.23. Input type: tel

Inserire numeri di telefono in un form

5.24. Input type: search

Un campo specifico per le ricerche 6.

25. Input type: urlInserimento di URL in un form

7.26. Input type: email

Un campo destinato all'inserimento di indirizzi e-mail 8.

27. Nuovi tipi di input per la gestione delle dateUna panoramica dei tipi di input datetime, date, month, week, time, datetime-local

9.28. Input type: number

Inserire valori numerici in un form 10.

29. Input type: rangeInserimento di un numero attraverso uno slider

11.30. Input type: color

Un campo per la selezione di colori da una palette 12.

31. Cosa sono le datalist?Collegare un campo di testo ad una lista di opzioni

I microdati1.

32. La potenza dei microdatiDefinire contenuti semantici in HTML5

Primo progetto guida1.

33. Un template per blog in HTML5Struttura, compatibilit cross-browser, stili

API per Web Applications1.

34. Nuova linfa alle applicazioni webUna panoramica sulle nuove API legate alla specifica HTML5

2.35. Applicazioni web offline (file .manifest)

Conservare una copia locale di risorse presenti in un'applicazione 3.

36. Indexed Database APICreare e manipolare un database di ispirazione NoSQL memorizzato allinterno del browser dellutente

4.37. WebStorage API

Superare i limiti dei cookie con sessionStorage e localStorage 5.

38. Web Workers APIEseguire codice Javascript in modo asincrono, senza intaccare le performance della pagina web

6.39. WebSocket API

Stabilire e mantenere una connessione dati tra browser e server remoto sulla quale far transitare messaggi in entrambe le direzioni 7.

40. Drag and DropL'implementazione in HTML del meccanismo di trascinamento e rilascio di oggetti in una pagina web

8.41. Geolocation API

Gestire dati geografici e geospaziali

Canvas e Multimedia1.

42. CanvasDisegnare e tracciare immagini in HTML5

2.43. Canvas: un esempio pratico

Implementiamo l'elemento canvas nel nostro progetto guida 3.

44. VideoIncorporare, riprodurre e gestire filmati in modo nativo

4.45. Video e Canvas: un esempio pratico

Manipolare flussi video in tempo reale con l'ausilio di un canvas 5.

46. AudioIncorporare, riprodurre e gestire file audio in modo nativo

6.47. SVG e MathML

Novit nel supporto in HTML5 per Scalable Vector Graphic e Mathematical Markup Language

Secondo progetto guida1.

48. Una 'lavagna virtuale'Evoluzione dell'applicazione attraverso lutilizzo delle API HTML5

HTML5 e compatibilit cross-browser1.

49. Feature detection e strategie di fallbackTecniche, strumenti e alternative per iniziare a implementare HTML5 mantenendo la compatibilit su tutti i principali browser

2.50. Appendice: Tabelle del supporto sui browser di HTML5

Una sintesi visuale e aggiornata del supporto cross-browser delle funzionalit HTML5

Introduzione

Una guida operativaAffrontare 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 (http://xhtml.html.it/guide/leggi/51/guida-html/) redatta da Wolfgang Cecchin.

I progetti guidaPer 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 e , 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)

(http://www.html.it/guide/esempi/html5/imgs/lezione_1/blog_preview.png)

Alcuni prerequisitiNella 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 (http://www.youtube.com/html5) o vimeo.com (http://vimeo.com/blog:268).

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/ (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 questanno, condividono infatti un ottimo supporto a queste specifiche.

Lo stato dell'arte relativamente al supporto HTML5 lo abbiamo tracciato in questa tabella di compatibilit (http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html) 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 guidaNell'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)

(http://www.html.it/guide/esempi/html5/imgs/lezione_1/2.jpg)

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.

Da HTML 4 ad HTML5

Un po' di storiaSiete 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 (http://www.whatwg.org/), acronimo di Web Hypertext Application Technology in un sintetico ma ricco messaggio (http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2004-June/000005.html).

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 (http://lists.w3.org/Archives/Public/www-html/2003Jan/0123.html)" 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 (http://www.ibm.com/developerworks/xml/library/x-futhtml1/). Il 27 ottobre 2006 in un post sul proprio blog intitolato Reinventing HTML (http://dig.csail.mit.edu/breadcrumbs/archive/2006/10/27), 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 well- formed 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 (http://www.whatwg.org/specs/web-apps/current-work/multipage/).

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 , 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; 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; generare grafica 3D in tempo reale; accedere e manipolare informazioni generate in tempo reale dallutente 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; generare grafica 3D in tempo reale;

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 e , 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'ombraLa 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:

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:

Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5:

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!

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 dallHTML5, 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:

Tag classico bla bla bla bla ...

Tag vuoto

Tag autochiudente

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 (), le liste (), i titoli (), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi normali vengono definiti attraverso un tag di apertura () e un tag di chiusura ().

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 secondo le regole XHTML:

O seguendo la vecchie regole di HTML 4:

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, minuscoloUna 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:

Casi particolariEsistono 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 dellelemento. 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:

Pagina HTML5 Valida Un paragrafo pu non avere la particella di chiusura

e anche un elemento di lista

Notiamo che, come mostrato nellesempio, anche i tag p e li possono essere scritti omettendo la particella di chiusura, a patto che lelemento successivo sia allinterno 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, dellelemento html; esso infatti dichiarato implicitamente ed inserito a runtime dallo user-agent.

Per un quadro dettagliato rimandiamo a questa sezione (http://www.w3.org/TR/html5/syntax.html#optional-tags) delle specifiche.

AttributiAnche 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:

Secondo le regole XHTML:

In HTML5:

Attributi senza virgolette: perfettamente lecito in HTML5 definire un attributo senza racchiudere il valore tra virgolette. Esempio:

Attributi con apostrofo: il valore di un attributo pu essere racchiuso tra due apostrofi (termine pi corretto rispetto a 'virgoletta singola'). Esempio:

Attributi con virgolette: per concludere, possibile usare la sintassi che prevede l'uso delle virgolette per racchiudere il valore di un attributo. Il codice:

SemplificazioniIn 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:

regole CSS...

In HTML5 possiamo farne a meno, scrivendo dunque:

regole CSS...

ConclusioniCome 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 lutilizzo di una sintassi XML attraverso luso delle istruzioni:

Infine, per una migliore leggibilit del codice sorgente, consigliamo di ricorrere il meno possibile allutilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa.

Elementi disegnati per un web moderno

Allinizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse spezzandole allinterno di una griglia fatta da infiniti e : un attivit noiosa, resa ancora peggiore dalla scarsa qualit e flessibilit del risultato. Poi arrivarono i 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:

--- Titolo e Testata ---

--- Voci di Menu ---

--- Un Post ---

--- Un altro Post ---

Allinterno 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 laltro 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 quellarbitrariet 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 dellHTML4: lincapacit di descrivere il significato delle informazioni di una pagina web in un formato interpretabile da altri software. In un mondo sempre pi caratterizzato dallinterconnessione e dallaggregazione su base semantica dei contenuti ci si adatt inventando e condividendo convenzioni studiate per rappresentare eventi di calendario, persone e quantaltro; nacquero cos diversi microformati, come ad esempio hRecipe (http://microformats.org/wiki/hrecipe) per le ricette:

Tisana alla liquirizia 2 cucchiai di Zucchero 20g Radice di liquirizia 2 Scaldare un pentolino con 200cl dacqua fino a 95C; versare la radice di liquirizia; lasciar macerare per 7 minuti; zuccherare e servire. 90 min

LHTML5 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...

Elementi e attributi non pi previsti nelle specificheLe specifiche HTML5 (http://dev.w3.org/html5/spec/Overview.html) 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 lintroduzione 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 (http://www.w3.org/TR/html5-diff/#absent-attributes) 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 luso 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:

Addio, monti sorgenti dall'acque, ed elevati al cielo; cime elementi di markup inuguali, noti a chi cresciuto tra voi, e impressi nella sua mente, non meno che lo sia l'aspetto de' suoi pi familiari. Liberamente adattato da: IPS

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: contenteditableTinyMCE, 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 lHTML 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 (http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx) 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.

document.execCommand('bold')

Prima di passare oltre sappiate che lattributo contenteditable stato applicato con valore true a allintera sezione precedente con lesclusione di questo paragrafo, permettendovi cos di editarla e sperimentare linterazione di questa nuova interessante caratteristica! (e se selezionate del testo e cliccate qui (javascript:document.execCommand('bold');), potrete renderlo grassetto!).

Menu contestuali associati ad un elemento: contextmenuLattributo 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:

Cliccando con il tasto destro del mouse sullimmagine 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.

Lattributo data-*LHTML5 predispone la possibilit di associare ad ogni elemento che compone la pagina un numero arbitrario di attributi il cui nome pu essere definito dallutente sulla base di esigenze personali, a patto che venga mantenuto il prefisso 'data-'; ad esempio:

Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:

accesskey, class, contenteditable, contextmenu, dir, draggable hidden, id, lang, spellcheck, style, tabindex, title

Tabella del supporto sui browser

ConclusioniIn questa lezione abbiamo appreso che la nuova configurazione di markup dellHTML5 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.

Attributi globali

contenteditable 5.5+ 3.0+ 3.1+ 2.0+ 9.0+contextmenu No No No No Nodata-* No No 5.0+ 6.0+ Nodraggable No 3.5+ 5.0+ 5.0+ Nohidden No 4.0+ Nightly build Nightly build Nightly buildspellcheck No 2.0+ No No No

Un nuovo content model

Non pi solo divEcco come si potrebbe codificare lesempio della lezione precedente utilizzando i nuovi elementi messi a disposizione dallHTML5:

--- Titolo e Testata ---

--- Voci di Menu ---

--- Un Post ---

--- Un altro Post ---

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 dellutilizzo dellattributo class con valore semantico, sia la riconoscibilit delle singole aree del documento da parte di un browser. Ma non tutto; lintroduzione di article, nav, header e altri tag che vedremo, impone anche sostanziose novit al modo in cui lo user-agent deve comportarsi nellinterpretare questi elementi.

Contenuti in una bolla di saponePartiamo dal seguente esempio HTML4:

I diari di viaggio: A spasso per il mondo alla scoperta di nuove culture: Giro turistico della Bretagna lorem ipsum.. Alla scoperta del Kenya lorem ipsum.. Cracovia e la Polonia misteriosa lorem ipsum.. tutti i viaggi sono completi di informazioni su alberghi e prezzi

Se lo visualizziamo avremo un risultato assolutamente strutturato come questo:

Figura 3 (click per ingrandire) - Struttura del documento

(http://www.html.it/guide/esempi/html5/imgs/lezione_5/immagine_1.png)

Supponiamo ora di voler dividere i viaggi per continente. Con il modello attuale saremmo obbligati a cambiare lelemento h3 in h4 in modo da fare spazio alla nuova suddivisione:

I diari di viaggio: A spasso per il mondo alla scoperta di nuove culture: Europa Giro turistico della Bretagna lorem ipsum.. Cracovia e la Polonia misteriosa lorem ipsum.. Africa Alla scoperta del Kenya lorem ipsum.. tutti i viaggi sono completi di informazioni su alberghi e prezzi

Questo accade perch la gerarchia delle intestazioni assoluta rispetto allintero documento e ogni tag 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. Allinterno di tag come quelli appena citati la vita scorre come in una bolla di sapone, quindi lutilizzo di un considerato relativo alla sezione in cui si trova.

Riprendiamo lesempio precedente ed interpretiamolo in salsa HTML5:

I diari di viaggio

I diari di viaggio: A spasso per il mondo alla scoperta di nuove culture: Europa Giro turistico della Bretagna lorem ipsum.. Cracovia e la Polonia misteriosa lorem ipsum.. Africa Alla scoperta del Kenya lorem ipsum.. tutti i viaggi sono completi di informazioni su alberghi e prezzi

Molto meglio! Ora i singoli componenti di questo documento sono atomici e possono essere spostati allinterno della pagina senza dover cambiare la loro struttura interna. Inoltre, grazie a queste divisioni, il browser riesce a discernere perfettamente il fatto che lultimo paragrafo non appartenga al testo del viaggio in Kenia.

Diamo prova dellatomicit creando un blocco dedicato allultimo articolo inserito: Un week-end a Barcellona:

I diari di viaggio

I diari di viaggio: A spasso per il mondo alla scoperta di nuove culture: Un week-end a Barcellona lorem ipsum..

Anche grazie a questo content model lHTML5 introduce un nuovo e preciso algoritmo per il calcolo delloutline 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 unapposita estensione per Chromium (https://chrome.google.com/extensions/detail/afoibpobokebhgfnknfndkgemglggomo):

Figura 4 (click per ingrandire) - Vista ad outline del documento


interessante notare come lalgoritmo non solo identifichi correttamente i vari livelli di profondit, ma per ognuno di essi sappia anche recuperare il titolo adeguato. NellHTML5 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 dellelemento hgroup, utile a raggruppare elementi che concorrono a formare un titolo. Lerrore 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.

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 completaEsistono 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 (http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#kinds-of-content) 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 allinterno 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, 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 lutente.

Tag: a, audio (con lattributo controls presente), button, details, embed, iframe, img (con lattributo usemap presente), input (con lattributo type diverso da hidden), keygen, label, menu (con lattributo type="toolbar"), object (con lattributo usemap presente), select, textarea, video (i con lattributo controlspresente).

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 HEADCogliamo loccasione di questa panoramica alla struttura dellHTML5 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:

We5! Il blog della guida HTML5

Fin qui, eccezion fatta per il doctype, nessuna differenza rispetto alla versione 4 delle specifiche; andiamo avanti aggiungendo alcuni tag meta e link:

...

We5! Il blog della guida HTML5 ...

Incuriositi dalla strana sintassi degli attributi media degli ultimi due ? State osservando una tipica media query: il CSS viene interpretato solamente se le condizioni dellespressione 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:

Bene, completiamo questo capitolo aggiungendo icone e charset:

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 linserimento della direttiva charset in questo progetto: in primo luogo la nuova sintassi molto pi succinta della passata, seppur ancora valida:

In seconda istanza intenzione dellautore sottolineare come sussistano reali rischi di sicurezza legati allassenza di questa direttiva.

Dalla prossima lezione analizzeremo nel dettaglio i singoli elementi che concorrono alla costituzione della nuova impalcatura semantica del linguaggio.

Header

Funzioni e dati tecniciIl 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. L'elemento un contenitore per altri elementi. 2. L'elemento non va confuso con quella che la testata/intestazione principale di un documento (quella che oggi si definisce in genere con il tag ). 3. La natura e gli scopi dell'elemento 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.

Questo un titoloQuesto un sotto-titolo[...]

Header: esempi concreti

Riprendendo il nostro progetto guida, dove nella lezione precedente (http://xhtml.html.it/guide/lezione/4966/panoramica-sui-content-model-e-presentazione-del-primo-progetto-guida/) abbiamo definito il contenuto dell':

We5! Il blog della guida HTML5

A questo punto possiamo iniziare a comporre il del nostro documento partendo proprio con il tag , che con l'elemento (http://xhtml.html.it/guide/lezione/4973/hgroup/) definisce il titolo principale del documento (del sito) e la cosiddetta tagline:

We5! Il blog della guida HTML5 Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!

Ma header non deve contenere necessariamente solo titoli ! 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 :

We5! Il blog della guida HTML5 Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5! Navigazione: Home Gli autori Il progetto four2five Archivio

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 (http://xhtml.html.it/guide/lezione/4971/nav/) ( ) introdotta da un elemento e strutturata con una lista non ordinata.

In realt, il menu di navigazione non deve essere necessariamente inserito nell', 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 (http://xhtml.html.it/guide_preview/lezione/4969/section/); ciascun post sar definito a livello strutturale da un tag (http://xhtml.html.it/guide_preview/lezione/4970/article/):

L'ultimo post [...]

Si noti, innanzitutto, come il tag che fa da titolo principale alla sezione non sia racchiuso in un elemento . Ribadiamo: non obbligatorio inserire i titoli all'interno di un contenitore .

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 :

L'ultimo post

Luned 22 Novembre Nuove scoperte sul tag video! [...] [...]

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 . 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 e quale la sua rilevanza semantica all'interno di un template.


Nuovi tag semantici e strutturali

9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Footer

Funzioni e dati tecnici

L'elemento 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 (http://it.wikipedia.org/wiki/Outliner). All'interno di una pagina web possono essere presenti diversi anche pi di uno per lo stesso elemento.

2011 Autore contenuto. Design by Designer sito

Footer: esempi concretiRiprendendo il nostro progetto guida, dopo aver definito definito il contenuto dell' (http://xhtml.html.it/guide/lezione/4967/header/), possiamo vedere come il 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 ridefinito nella specifica dell'HTML 5 (http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element) racchiude il copyright della pagina:

Creato da Sandro Paganotti Ultimo aggiornamento Marted 23 Novembre

Tutti i contenuti sono prottetti dalla licenza creative commons

Nel seguente schema abbiamo realizzato graficamente ci che il codice semanticamente rappresenta nel nostro progetto (figura 1):

Figura 10 - Struttura del documento: il footer principale

Cos come l'intero documento, ogni articolo del nostro blog avr un contenente il nome dell'autore ed altre eventuali informazioni aggiuntive:

L'ultimo post [...] [...]

autore: Sandro Paganotti categoria: multimedia, tags:

video, canvas, permalink: permalink, rank: ranked 3/5

da notare la scelta di inserire le informazioni riguardanti l'autore dell'articolo all'interno del tag ; infatti nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati e quindi semanticamente corretto all'interno del nostro .

Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente, tutte le informazioni contenute nel per comodit abbiamo deciso di chiamarle metadati:

Figura 11 - Struttura del documento: footer degli articoli

L'elemento potrebbe essere inserito anche all'inizio di un documento subito dopo il oppure all'apertura di un tag (http://xhtml.html.it/guide_preview/lezione/4970/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 in fondo alla pagina quando i contenuti della stessa sono molto lunghi:

Torna all'indice

[Contenuti molto lunghi...]



Torna all'indice

Nella prossima lezione parleremo del tag e della sua importanza nel sezionare la pagina in blocchi semanticamente distinti.



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Section

Funzioni e dati tecniciIl tag , secondo la definizione presente nella specifica HTML5, rappresenta una sezione generica di un documento o applicazione. L'elemento , 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. l'elemento non deve essere utilizzato in sostituzione del per impostare graficamente la pagina; inoltre fortemente consigliato utilizzare i anche quando risultano pi convenienti per gli script;

2. l'elemento non deve essere preferito all'elemento quando i contenuti possono essere ripubblicati anche su altri siti; 3. l'elemento e l'elemento non sono indipendenti ed esclusivi: possiamo avere sia un all interno di un che viceversa.

Titolo 1 Testo correlato al titolo 1. Titolo 2 Testo correlato al titolo 2.

L'elemento 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 concretiCome 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' (http://xhtml.html.it/guide_preview/lezione/4967/header/) e del (http://xhtml.html.it/guide_preview/lezione/4968/footer/), capiamo come utilizzare l'elemento 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 :

L'ultimo post [contenuto del post...] [commenti...]

Post meno recenti [contenuto del post...]

[contenuto del post...] [contenuto del post...]


Figura 12 - Struttura del documento: sezioni principali

Nel nostro progetto le , oltre a poter raggruppare i vari (http://xhtml.html.it/guide_preview/lezione/4970/article/), sono presenti anche all'interno del primo 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:

[contenuto del post...] [commento1...] [commento2...] [commento3...] [Inserisci un nuovo commento...]

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

Il tag rappresenta un elemento che viene considerato una sezione a s stante dall'outliner (http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano di un titolo () che li riassuma. Come vedremo nelle prossime lezioni esistono anche altri elementi nelle specifiche HTML5 che sono considerati "contenitori di sezionamento dei contenuti" (http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/).



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Article

Funzioni e dati tecniciIl tag 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. quando gli elementi sono nidificati, gli interni rappresentano gli articoli che sono in linea di principio relativi al contenuto dell'esterno. Ad esempio, un blog che accetta commenti dagli utenti potrebbe rappresentarli come figli annidati all'interno dell'elemento padre ;

2. le informazioni relative all'autore dell' non devono essere replicate all'interno degli elementi nidificati all'interno dello stesso; 3. l'elemento con l'attributo pubdate pu essere utilizzato per definire la data di pubblicazione dell';

4. l'elemento e l'elemento non sono indipendenti ed esclusivi: possiamo avere sia un all interno di un che viceversa.

Titolo articolo

Contenuto dell'articolo Informazioni riguardo l'autore

In sostanza, anche se nelle specifiche non espresso, l'elemento rappresenta una forma particolare di (http://xhtml.html.it/guide_preview/lezione/4969/section/).

Article: esempi concretiNella lezione precedente abbiamo diviso i contenuti centrali del blog che stiamo costruendo in due . All'interno della prima possiamo trovare diversi tag : il primo che incontriamo l'articolo vero e proprio con tanto di (http://xhtml.html.it/guide_preview/lezione/4967/header/) contenente il titolo dell'articolo e la data di pubblicazione e che all'interno di un raccoglie i metadati riguardanti l'autore.

All'interno dell' padre sono annidati ulteriori contenenti i commenti all'articolo racchiusi in una 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 . Possiamo quindi facilmente immaginare come il contenuto del nostro possa essere citato o ripubblicato in altri blog indipendentemente dai commenti che ha ricevuto.

Ecco quindi il codice dell' sopra descritto:

L'ultimo post Luned 22 Novembre Nuove scoperte sul tag video! Attraverso un utilizzo sapiente del tag canvas possibile leggere uno stream di dati proveniente da un tag video e manipolarlo in tempo reale. autore: Sandro Paganotti categoria: multimedia, tags: video, canvas, permalink: permalink, rank: ranked 3/5 Commenti Luned 22 Novembre Angelo Imbelli ha scritto: C' un bell'esempio sulla rete: effetto ambi-light! Angelo Imbelli Marted 23 Novembre Sandro Paganotti ha scritto: Bellissimo! Grazie per la segnalazione! Sandro Paganotti Inserisci un nuovo commento: [ campi form per inserire un nuovo commento]

Nel seguente schema abbiamo realizzato graficamente come si presenta il nostro articolo morfologicamente:

Figura 14 - Struttura del documento: suddivisione semantica degli articoli

C' da notare che anche se il tag rappresenta un elemento che viene considerato una sezione a s stante dall'outliner (http://it.wikipedia.org/wiki/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 ), 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 e della sua fondamentale importanza all'interno di una pagina in HTML5.



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Nav

Funzioni e dati tecniciIl tag 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 dobbiamo ricordare i seguenti punti:

1. solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per l'elemento ; 2. i link a pie' di pagina e le breadcumb non devono essere inseriti in una sezione ; 3. l'elemento non sostituisce i link inseriti in elementi come gli o gli ma deve racchiuderli.

Questo un link Questo un link Questo un link Questo un link [...]

Nav: esempi concretiPrima di spiegare in che modo l'elemento pu essere inserito nel progetto che abbiamo preso come base, riassumiamo brevemente i tag spiegati nelle lezioni precedenti:

Con l'elemento (http://xhtml.html.it/guide_preview/lezione/4967/header/) abbiamo indicato il titolo introduttivo del blog pi i titoli dei singoli articoli. Con il (http://xhtml.html.it/guide_preview/lezione/4968/footer/) abbiamo racchiuso le informazioni relative agli autori dei contenuti, i metadati e il

copyright. Con l'elemento (http://xhtml.html.it/guide_preview/lezione/4969/section/) abbiamo strutturato la parte centrale della pagina dividendola in due sezioni

semanticamente distinte. Infine abbiamo utilizzato (http://xhtml.html.it/guide_preview/lezione/4970/article/) per racchiudere i contenuti degli articoli.

A questo punto non possiamo che inserire i link presenti nell' all'interno del tag :

We5! Il blog della guida HTML5 Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5! Navigazione: Home Gli autori Il progetto four2five Archivio

Da notare la presenza del titolo 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 , infatti, rappresenta un elemento che viene considerato una sezione a s stante dall'outliner (http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano di un titolo che li riassuma.


Figira 15 - Struttura del documento: visualizzazione grafica del tag nav

In realt (come gi specificato nel paragrafo ) il menu di navigazione non deve essere necessariamente inserito nel , 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 presente anche nella colonna laterale del blog () e racchiude un menu che ha come link le categorie nelle quali sono inseriti i vari articoli:

Sidebar Ricerca nel form: [form di ricerca dei contenuti...]

Categorie multimedia marcatori testuali forms

Per comprendere quale la funzione dell'elemento che contiene il menu laterale non ci resta quindi che leggere la prossima lezione.



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Aside

Funzioni e dati tecniciL'elemento rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell'elemento padre che la contiene, quest'ultimo. Questo ci che viene indicato nelle specifiche HTML5, ma facile immaginare l'utilit del tag semplicemente pensandolo come un contenitore di applink, pubblicit, bookmark e cos via.

Questi sono dei contenuti di approfondimento marginali rispetto al contenuto principale Link a pagine correlate al contenuto Informazione correlata al contenuto Informazione correlata al contenuto Informazione correlata al contenuto Pubblicit [immagini pubblicitarie]

Aside: esempi concretiRitornando al nostro progetto guida, dopo aver definito il contenuto dell'elemento , possiamo analizzare la parte di codice in cui abbiamo utilizzato il tag :

Sidebar Ricerca nel form: Parola chiave:

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 cenfacilmente separarli con l'elemento che li qualifica come contenuti marginali.

Nel nostro caso abbiamo utilizzato un 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 in combinazione con il tag che potrebbe essere la soluzione migliore per questa tipologia di contenuti dato che, come abbiamo potuto constatare nella lezione dedel tag .

Cos come gli elementi (http://xhtml.html.it/guide_preview/lezione/4970/article/), (http://xhtml.html.it/guide_preview/lezione/4969/section/) e (hanche l' appartiene alla categoria dei "contenitori di sezionamento dei contenuti" (http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/) in quantopropri 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 rimerrore di validazione.

Vediamo quindi ora che abbiamo completato la struttura del blog come l'outline del nostro documento Outline (esempi/outline_progetto/outline.html).

Nella prossima lezione comprenderemo come usare l'elemento e la sua importanza per l'outline di un documento in HTML5.



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Hgroup

Funzioni e dati tecniciL'elemento rappresenta l'intestazione di una sezione. L'elemento viene utilizzato per raggruppare un insieme di elementi h1-h6, quando il titolo ha pi livelli, comsottotitoli, titoli alternativi o slogan.

Questo il titolo Questo un sottotitolo

La vera importanza del tag che maschera l'outline dell'elemento padre che lo contiene; infatti, l'algoritmo dell'outliner riconosce come un titolo solamente l'headingil valore pi alto e considera tutti gli altri elementi sottotitoli.

Esempio:

Le prospettive per il futuro del web L'HTML 5 rivoluzioner il mondo del web Presto il web sar pieno di siti e applicazioni che saranno in grado di mettere in crisi le pi grandi case di desktop application...<

Pinco pallino

Se facessimo l'outline della pagina HTML contenente questo (http://xhtml.html.it/guide_preview/lezione/4970/article/) ci restituirebbe come titolo della sezione solamente l' contenuto nell' (non considerando l' anche se posto prima nel codice) poich il tag con il valore pi alto all'interno della sezione. Senza l'elemento i due titoli verrebbero considerati entrambi sullo stesso livello d'importanza come titoli dell' .

Nella prossima lezione parleremo del tag e della sua utilit nell'evidenziare parti particolarmente importanti del testo.



9.0+ 3.0+ 3.1+ 5.0+ 10.0+

Mark

Funzioni e dati tecniciL'elemento 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 poich con quest'ultimo dobbiamo racchiudere la parola ricercata segnalandola graficamente all'utente.

Senza plug in di terze parti il web potrebbe diventare per noi sviluppatori pi democratico; con le nuove API HTML5 non abbiamo pi bisogno di diversi plug in di terze parti che sino ad ora erano indispensabili per i contenuti multimediali

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 , Bing il tag , Yahoo il tag e cos via. Si spera che con l'introduzione dell'elemento le cose possano cambiare.

Nella prossima lezione parleremo del tag , un'altra delle novit dell'HTML5.



9.0+ 4.0+ 5.0+ 5.0+ 11.0+

Time e gli attributi pubdate e datetime

Funzioni e dati tecniciL'elemento 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.

Oggi pomeriggio penso che sar l per le 15:00

Prima di inserire l'elemento nelle nostre pagine in HTML5 dobbiamo comprendere quali sono i contesti in cui sconsigliato utilizzarlo:

non bisogna inserire nel tag 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 le date prima dell'introduzione del calendario Gregoriano.

L'elemento pu possedere l'attributo pubdate che di tipo booleano; la sua presenza indica che la data presente nel tag anche la data nella quale stato scritto l' (http://xhtml.html.it/guide_preview/lezione/4970/article/) padre pi vicino, e nel caso non esistesse un 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 pu esserci solo un singolo tag 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" (http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string) del tipo (ANNO-MESE-GIORNO-ORE:MINUTI:SECONDI.MILLISECONDI-FUSO ORARIO).

se l'attributo datetime non presente allora il contenuto testuale del'tag deve essere una "stringa valida" (http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string).

20 Gennaio

Dobbiamo specificare che l'attributo pubdate in quanto di tipo booleano pu essere inserito anche nel seguente modo:

20 Gennaio

Nella prossima lezione vedremo in quali occorrenze utilizzare il tag .



No No No No No

Meter

Funzioni e dati tecniciL'elemento rappresenta una misura scalare all'interno di un intervallo noto, o un valore frazionario.

Il tag anche utilizzato come un indicatore di livello.

6 blocchi utilizzati (su un totale di 8)

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 :

1. min: indica il valore limite minimo disponibile; 2. max: indica il valore limite massimo disponibile; 3. value: indica il valore dell'elemento; 4. low: indica un valore che viene considerato basso; 5. high: indica un valore che viene considerato alto; 6. 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 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 e la sua utilit nel caricare i contenuti dei documenti web.



No No No 8.0+ 11.0+

Progress

Funzioni e dati tecniciL'elemento 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 . 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 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.

Caricamento: 30%

Vediamone adesso un esempio concreto in questa demo (http://www.html.it/guide/esempi/html5/esempi/lezione_progress/progress.html) (funziona nelle pi recenti versioni di Opera e Google Chrome).

Gli attributi value e max, se presenti, devono essere valori validi (http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-floating-point-number). 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 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 (http://xhtml.html.it/guide_preview/lezione/4976/meter/).

Data la complessit dell'argomento e la costante variazione delle specifiche a riguardo consigliamo di consultare il sito del WHATWG (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element) per un maggiore approfondimento.

Nella prossima lezione descriveremo brevemente gli altri tag semantici introdotti nella specifica HTML5.



No No No 8.0+ 11.0+

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 e Nell'elemento possiamo racchiudere dei contenuti, opzionalmente con una didascalia (), che rappresentano delle singole unit indipendenti rispetto al contenuto principale; ad esempio possiamo utilizzare l'elemento 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 quindi rappresenta una didascalia o una leggenda per l'elemento padre.

Esempio:

Foto di benvenuto Diritti riservati

importante notare che l'attributo alt vuoto poich l'immagine descritta nel tag ed stato usato il tag per il copyright.

Il tag L'elemento 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 . 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 Il tag usato per specificare le annotazioni Ruby, che vengono utilizzate nella tipografia orientale in combinazione con il testo principale.

Il tag Il tag definisce dove, in una parola, sarebbe opportuno aggiungere un a capo. Infatti, quando una parola lunga, utilizzando l'elemento il browser comprender dove eventualmente sar possibile inserire un a capo.

I tag e 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 rappresenta un'azione che l'utente pu richiamare in qualche modo. Esso visibile solo se inserito all'interno di un elemento . 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 e I tag e rappresentano un widget informativo da cui l'utente pu ottenere informazioni supplementari o controlli aggiuntivi. Nel tag ,che contenuto all interno del tag , deve essere inserita una sintesi del contenuto del widget o anche una legenda. I contenuti dell'elemento 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 L'elemento rappresenta un generatore di chiavi numeriche all'interno di un form. Quando si effettua l'invio di un form contenente il tag , 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 L'elemento ci restituisce il risultato di un calcolo.



9.0+ 4.0+ Nightly build Nightly build 11.0+ 9.0+ 4.0+ Nightly build Nightly build 11.0+ 5.5+ No 5.0+ 5.0+ No No No No No No No No No No No No No No No No No No No No No No No No No No No 1.0+ 2.0+ 2.0+ 7.0+ No 4.0+ Nightly build Nightly build 9.0+

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 (http://www.whatwg.org/specs/web-forms/current-work/), aggiornamento della specifica del W3C denominata Web Form 1.0 (http://www.w3.org/TR/html4/interact/forms.html).

Attualmente Web Form 2.0 un progetto chiuso in quanto ora si lavora sulla parte dedicata ai form (http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html) della specifica HTML5.

Lavorare con i form stato finora molto semplice: si inizia tutto con il tag , si prosegue con gli , a volte con gli e magari con una o una o , e si finisce sempre con .

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.

Nuovi attributi per i form: autofocus, placeholder e form

I tipi di attributiPrima 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.

autofocusL'attributo autofocus un attributo booleano e serve a impostare il focus su uno specifico elemento del form appena la pagina caricata. Un esempio canonico quellodella 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 so

Guida Html5 italiano

Documents

Transcript of Guida Html5 italiano