Html5 based

3,229 views

Published on

guida presa da HTML.IT ....

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,229
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 based

  1. 1. IntroduzioneUna guida operativaAffrontare un tema vasto come quello dellHTML5 spaventa sempre un po, soprattutto quandolobiettivo è quello di abbracciare lintera tecnologia sottostante le specifiche proponendo al contempounopera che sia fruibile e divertente da leggere. Il primo passo che abbiamo deciso di compiere nellastesura 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 dispecifiche referenze del linguaggio, dallaltro un insieme di lettori desiderosi di informarsi a tuttotondo sulle novità offerte dallHTML5. A questa commistione di interessi si aggiunge una naturalesegmentazione della guida secondo i due temi che maggiormente permeano le specifiche: il nuovoapproccio 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 stampodivulgativo, ottime per avere una visione di insieme della tematica trattata, a percorsi verticalicostruiti attorno a funzionalità specifiche. Non sono previsti articoli introduttivi alla sintassi dellinguaggio 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 recuperareinformazioni 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 unvero e proprio progetto che sappia anche mostrare come le singole funzionalità HTML5 lavoranoinsieme.In realtà i progetti sono due, come due gli aspetti principali di questa specifica: al termine dellelezioni legate al nuovo supporto semantico dellHTML5 la combinazione dei vari esempi mostrati daràvita ad untemplate 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 APIdedicate allo sviluppo di applicazioni web invece includerà tutti gli elementi necessari alla stesura diuna lavagna virtuale sulla quale si potranno tracciare linee utilizzando il mouse e che darà lapossibilità di salvare in locale le opere create.Chiaramente tale scelta è stata implementata in modo da non pregiudicare lindipendenza dellesingole lezioni ma con lidea di suggellare un ulteriore filo conduttore allinterno dellopera.Figura 1 - Anteprima del template per blog in HTML5 (click per ingrandire)
  2. 2. (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 orabasti sapere che la data di accettazione delle specifiche come standard W3C è ancorasufficientemente 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 linguaggiosono 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ù difficileimplementazione o meno mature, sono ad oggi supportate in modo superficiale e disomogeneo; perpoter beneficiare al massimo delle demo e degli esempi anche per elementi o API che ricadono inquesta categoria si consiglia quindi di dotarsi di un browser che utilizzi WebKit come layout engine inquanto dotato del più ampio supporto HTML5 ad oggi disponibile sia per le parti della specifica ormaiconsolidate sia per quelle al momento più sperimentali.In particolare, tutto il codice di questa guida è stato sviluppato e testato usando la ‘Nightly Build diChromium, cioè la versione speciale per fini di sviluppo che contiene ogni feature ad oggiimplementata, per quanto sperimentale esso sia. La pagina per il download, disponibile per i principalisistemi operativi, è raggiungibile allindirizzo http://build.chromium.org/f/chromium/snapshots/(http://build.chromium.org/f/chromium/snapshots/) seguendo il link nominato come il propriosistema operativo e successivamente la cartella recante il numero più alto tra i presenti.Tabella della compatibilità sui browserSe Chromium, lo accennavamo, garantisce ad oggi il supporto più ampio alle funzionalità previstenella specifica e in via di definizione presso il W3C e il WHATWG, la maggior parte dei browsercommerciali 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.
  3. 3. Lo stato dellarte relativamente al supporto HTML5 lo abbiamo tracciato in questa tabella dicompatibilità (http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html) che sarà via viaaggiornata con lestendersi del supporto alle feature che attualmente non sono supportate. Estrattidella tabella sono inseriti anche a corredo delle lezioni dedicate a ciascun elemento.Mappa della guidaNellimmagine seguenti è riassunta lintera struttura dellopera mettendo in evidenza la posizione dellesingole lezioni rispetto al contenuto globale con lobiettivo di fornire una panoramica esauriente suitemi 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 lezioneaffronterà la travagliata storia che ha caratterizzato la definizione di queste specifiche, con un piccoloma sentito cameo anche da parte dellXHTML2. Da HTML 4 ad HTML5Un po di storiaSiete curiosi di sapere come tutto è nato? Venerdì 4 giugno 2004, in una notte buia e tempestosa, IanHickson annuncia la creazione del gruppo di ricerca WHAT (http://www.whatwg.org/), acronimo diWeb Hypertext Application Technology in un sintetico ma ricco messaggio(http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2004-June/000005.html).Lobiettivo del gruppo è quello di elaborare specifiche per aiutare lo sviluppo di un web più orientatoalle applicazioni che ai documenti; tra i sottoscrittori di questa iniziativa si annoverano aziende del
  4. 4. calibro di Apple, Mozilla e Opera. Questa piccolo scisma dal W3C è determinato dal disaccordo inmerito alla rotta decisa dal consorzio durante un famoso convegno del 2004 dove, per un pugno divoti, 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 benriassume i sentimenti contrastanti che allepoca si respiravano in merito a queste specifiche. Laprincipale 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 uncontrollo rigoroso nella creazione delle pagine, pena lo stop del processo di parsing e lavisualizzazione a schermo degli errori di interpretazione. Nei due anni successivi i gruppi XHTML2 eWHAT proseguono i lavori sulle proprie specifiche in modo indipendente e parallelo, sollevando dubbie confusione sia da parte dei produttori di browser che degli sviluppatori web. Emblematico in talsenso è 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 sulproprio 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 locchio al WHATe 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 didnt work. The large HTML-generating public did not move, largely because the browsers didnt 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 entrambeinterne al W3C, prima che nel luglio del 2009 lo stesso Tim sancisca di non voler riconfermare ilgruppo XHTML2 per lanno successivo preferendo di fatto la direzione intrapresa dallHTML5.Frattanto il gruppo di ricerca, formato da una commistione di elementi del W3C e del WHAT, sotto laguida 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 questodocumento, 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 diraggiungere lagognato traguardo soltanto attorno al 2020.Ricordiamo però che il consorzio si riferisce sempre allintero universo inscritto nelle specifiche mentrealcune feature ritenute peculiari ed importanti, ad esempio il tag <video>, sono già implementate datempo dalla totalità (o quasi) dei browser in commercio.Che cosè lHTML5?Domanda semplice solo allapparenza; siamo sicuramente di fronte alla quinta revisione dellespecifiche HTML ma anche di un vastissimo elenco di funzionalità che si sviluppano attorno al temadel 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, allinternodellHTML5 convivono in armonia due anime: la prima, che raccoglie leredità semantica dellXHTML2,e la seconda che invece deriva dallo sforzo di aiutare lo sviluppo di applicazioni Web. Il risultato diquesto mix di intenti è più articolato di quanto si immagini; in prima istanza si assiste ad una
  5. 5. evoluzione del modello di markup, che non solo si amplia per accogliere nuovi elementi, mamodifica in modo sensibile anche le basi della propria sintassi e le regole per la disposizione deicontenuti sulla pagina. A questo segue un rinvigorimento delle API JavaScript che vengonoestese per supportare tutte le funzionalità di cui una applicazione moderna potrebbe aver bisogno: salvare informazioni sul device dellutente; accedere allapplicazione 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 dall’utente attraverso sensori multimediali quali microfono e webcam.Anche laspetto semantico a contorno del markup non è dimenticato; ecco quindi nascere le specificheper la nuova generazione di microformati e per lintegrazione tra HTML5 e RDFa. Ma non ètutto, attorno a quello che può essere definito il nucleo autentico delle specifiche gravitano tutta unaserie di altre iniziative, alcune delle quali in avanzato stato di definizione, studiate per: accedere alle informazioni geografiche del device dellutente (posizione, orientamento,...); mantenere un database sul device dellutente; generare grafica 3D in tempo reale;E non dimentichiamo che levoluzione dellHTML viaggia di pari passo con quella dei CSS, che siavvicinano alla terza versione, e di altri importanti standard come SVG e MathML, e che ognuno diquesti componenti è progettato nella sua versione più recente per recare e ricevere beneficio daglialtri.Perché dovremmo passare allHTML5?Il panorama di Internet è cambiato molto dallassunzione a W3C Reccomandation della versioneprecedente delle specifiche, avvenuta verso la fine del 1999. In quel tempo il Web erastrettamente legato al concetto di ipertesto e lazione più comune per lutente era la fruizione dicontenuti, tipicamente in forma testuale. La mediamente bassa velocità di connessione e il limitatoinvestimento sul media contribuivano ad una scarsa presenza di applicazioni web, più care dasviluppare ed esigenti in termini di banda.Tutto questo era ben rappresentato da un linguaggio, HTML, principalmente orientato ad agevolarela stesura di semplici documenti testuali collegati fra loro. Negli anni successivi linteresseintorno alla rete ha subito una brusca accelerazione e questo ha condizionato positivamente sia ladiffusione che la velocità di connessione della stessa, attirando di conseguenza maggiori investimentie ricerca. Al modello di fruizione dei contenuti si è aggiunta la possibilità per lutente finale di divenireesso 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 dispecifiche poco inclini ad essere utilizzate per tali fini e che quindi si sono prestate al compito solo ascapito di infiniti hack e workaround. Esempi di questi utilizzi non premeditati dellHTML si possonotrovare un po ovunque, famoso il caso degli attributi rel e ref che hanno assunto nel tempo valorinon previsti, (eg:nofollow) anche esterni alla loro funzione naturale (eg: lutilizzo di questi dueattributi in librerie come Lightbox).
  6. 6. Parallelamente il percorso di crescita del web ha fatto emergere alcune strutture di contenutoricorrenti, 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 presentaanchessa solitamente lo stesso set di informazioni quali autore, data di pubblicazione, titolo e corpodel messaggio. Anche in questo caso lHTML4 non ha saputo fornire gli strumenti adatti a consentireuna corretta gestione e classificazione del contenuto obbligando gli sviluppatori web a ripiegare sustrutture anonime, quali <div> e<p>, arricchite di valore semantico con lutilizzo di attributi qualiclass e id.LHTML5 nasce per risolvere questi problemi offrendo agli sviluppatori web un linguaggio pronto adessere plasmato secondo le più recenti necessità, sia dal lato della strutturazione delcontenutoche da quello dello sviluppo di vere e proprie applicazioni.Grandi cambiamenti nellombraLa differenza principale tra le versioni correnti di HTML e XHTML risiede nella sintassi. Il linguaggio dimarkup creato da Tim Berners-Lee, e che ancora oggi popola i nostri browser, è stato studiato comeapplicazione del più generico SGML, Standard Generalized Markup Language; ne è la prova ladichiarazione di Document Definition Type che dovrebbe essere posta nella prima riga di una paginaWeb ad indicare la grammatica, HTML per lappunto, usata nel documento:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">In realtà la quasi totalità dei browser ignora la definizione e interpreta il documento secondo logichepiù permissive, frutto di anni di eccezioni e di esperienza accumulata su pagine malformate. LXHTML,invece, è una versione della sintassi HTML costretta allinterno delle regole XML, a sua voltagrammatica SGML: questo approccio dovrebbe implicare un maggior rigore nella pagina e laderenzaa regole quali lobbligo di chiusura di tutti i tag. Il parser XML inoltre dovrebbe sospenderelinterpretazione della pagina al primo errore rilevato.Larrivo dellHTML5 introduce una importante novità in questo scenario, per la prima volta lobiettivodelle specifiche è quello di definire un linguaggio ubiquo, che possa poi essere implementatosu entrambe le sintassi. Loccasione è buona anche per fare un po di pulizia e romperedefinitivamente il legame tra HTML e SGML formalizzando e traducendo in standard le regole adottateda tempo nei browser. Per indicare un documento HTML5 è nata quindi la seguente sempliceistruzione:<!DOCTYPE html>Che si affianca a quella da utilizzare in caso si intenda scrivere una pagina XHTML5:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">E adesso?Questa lezione aveva lobiettivo di fornire un contesto storico e operativo ai temi dei quali questaguida tratterà in modo approfondito. Nelle prossime lezioni affronteremo in sequenza prima la parte
  7. 7. legata al markup ed alla gestione della disposizione del contenuto e successivamente le principali APIintrodotte da queste specifiche. Il viaggio allinterno delluniverso dellHTML5 è appena iniziato! La sintassi di HTML5Prima 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, perlarga misura ereditate e razionalizzate dalla precedente versione delle specifiche. In primo luogofamiliarizziamo con il concetto noto di tag. Esistono tre distinte versioni di questa particella, ognunadi esse si applica selettivamente solo ad alcuni elementi:Tag ‘classico’<p> bla bla bla bla ... </p>Tag ‘vuoto’<img src="immagine_interessante.jpg" alt="Una immagine interessante">Tag ‘autochiudente’<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 perimplementarli.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 elementinormali 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 questielementi 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. Possiamodunque definire un tag <img> secondo le regole XHTML:<img src="immagine.png" alt="testo" />O seguendo la vecchie regole di HTML 4:<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, minuscoloUna delle differenze principali rispetto alle regole XHTML riguarda luso del maiuscolo e del minuscoloper definire un tag. In XHTML è obbligatorio usare il minuscolo. In HTML5 è consentito scrivere un tagusando anche il maiuscolo:
  8. 8. <IMG src="immagine.png" alt="testo">Casi particolariEsistono alcune casistiche per le quali un tag classico può mancare della sua particella di apertura o dichiusura; 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, chepossono essere omessi in toto a meno che non contengano un commento o del testo come istruzionesuccessiva. È quindi sintatticamente corretto scrivere un documento come segue:<meta charset="utf-8"><title>Pagina HTML5 Valida</title><p>Un paragrafo può non avere la particella di chiusura<ol> <li>e anche un elemento di lista</ol>Notiamo che, come mostrato nell’esempio, anche i tag p e li possono essere scritti omettendo laparticella di chiusura, a patto che l’elemento successivo sia all’interno di una cerchia di elementidefinita dalle specifiche. A fronte di queste opzioni di semplificazione è però errato pensare che lapagina generata dal codice di cui sopra manchi, ad esempio, dell’elemento html; esso è infattidichiarato 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 racchiuderei valori degli attributi tra virgolette.I casi previsti nella specifica sono 4.Attributi vuoti: non è necessario definire un valore per lattributo, basta il nome, il valore si ricavaimplicitamente dalla stringa vuota. Un caso da manuale:Secondo le regole XHTML:<input checked="checked" />In HTML5:<input checked>Attributi senza virgolette: è perfettamente lecito in HTML5 definire un attributo senza racchiudereil valore tra virgolette. Esempio:<div class=testata>
  9. 9. Attributi con apostrofo: il valore di un attributo può essere racchiuso tra due apostrofi (termine piùcorretto rispetto a virgoletta singola). Esempio:<div class=testata>Attributi con virgolette: per concludere, è possibile usare la sintassi che prevede luso dellevirgolette per racchiudere il valore di un attributo. Il codice:<div class="testata">SemplificazioniIn direzione della semplificazione vanno anche altre indicazioni. Ci soffermiamo su quelle riguardantidue elementi fondamentali come style e script. La sintassi tipica di XHTML prevede laspecificazione di attributi accessori come type:<style type="text/css"> regole CSS... </style><script type="text/javascript" src="script.js"> </script>In HTML5 possiamo farne a meno, scrivendo dunque:<style> regole CSS... </style><script src="script.js"> </script>ConclusioniCome abbiamo sperimentato, la sintassi HTML5 si caratterizza per una spiccata flessibilità esemplicità di implementazione. Le osservazioni che abbiamo snocciolato in questa lezione sonochiaramente valide a patto di implementare la serializzazione HTML; ricordiamo infatti che lespecifiche prevedono anche l’utilizzo di una sintassi XML attraverso l’uso delle istruzioni:<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">Infine, per una migliore leggibilità del codice sorgente, consigliamo di ricorrere il meno possibileall’utilizzo di elementi impliciti, scrivendo sempre tutti i tag necessari nella loro forma completa. Elementi disegnati per un web modernoAll’inizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse
  10. 10. spezzandole all’interno di una griglia fatta da infiniti <tr> e <td>: un attività noiosa, resa ancorapeggiore dalla scarsa qualità e flessibilità del risultato. Poi arrivarono i <div> e fu una vera e propriarivelazione; finalmente un modello di costruzione del documento pensato per separare in modo chiaroi contenuti tipici di una pagina web. Grazie alla commistione tra questo elemento e i CSS nacqueropagine con codici HTML eleganti e leggibili come:<html><head></head> <body> <div id="header"> --- Titolo e Testata --- </div> <div id="body"> <div id="menu"> --- Voci di Menu --- </div> <div id="main_content"> <div class="post"> --- Un Post --- </div> <div class="post"> --- Un altro Post --- </div> </div> </div> </body></html>All’interno di un costrutto come questo è tutto molto semplice da interpretare: basta seguire il flussodei 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 accorseche da un lato non vi era una regola collettiva e quello che per uno sviluppatore era ‘body’ per l’altropoteva benissimo essere ‘corpo’; inoltre si realizzò che né il browser né tantomeno i motori di ricercaavrebbero 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 leggermentediverse tra loro e per questo non raggruppabili secondo schemi automatici. Emerse in questo modouno dei più grandi problemi dell’HTML4: l’incapacità di descrivere il significato delleinformazioni di una pagina web in un formato interpretabile da altri software. In un mondosempre più caratterizzato dall’interconnessione e dall’aggregazione su base semantica dei contenuti cisi adattò inventando e condividendo convenzioni studiate per rappresentare eventi di calendario,persone e quant’altro; nacquero così diversi microformati, come ad esempio hRecipe(http://microformats.org/wiki/hrecipe) per le ricette:<span class="hrecipe"> <span class="fn">Tisana alla liquirizia</span> <span class="ingredient">2 cucchiai di Zucchero</span> <span class="ingredient">20g Radice di liquirizia</span> <span class="yield">2</span> <span class="instructions">
  11. 11. Scaldare un pentolino con 200cl d’acqua fino a 95°C; versare la radice di liquirizia; lasciar macerare per 7 minuti; zuccherare e servire. </span> <span class="duration"> <span class="value-title" title="PT90M"></span> 90 min </span></span>L’HTML5 nasce per gestire ed incanalare tutte queste problematiche; nelle prossime lezioniscopriremo come beneficiare di nuovi tag disegnati appositamente per le più comuni strutture dicontenuto e di attributi utilizzabili per definire ulteriore contenuto semantico alle pagine. Ma perarrivare 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 lafine di tutta una serie di elementi e attributi che mantengono validità formale solo perpreservare la retrocompatibilità di pagine datate ma sono espressamente vietati nella creazione dinuovi documenti.I primi a subire questo esilio sono tutti quei costrutti funzionali alla parte di presentazione e cadutiampiamente 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 evalign, background, bgcolor, cellpadding, border, cellspacing e molti altri. In realtà alcuni tra icitati perdurano solamente su specifici elementi, per una lista completa ed esaustiva consigliamo divisionare questa pagina del W3C (http://www.w3.org/TR/html5-diff/#absent-attributes) dedicata altema.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 econsentendone l’uso solo come ultima risorsa.La falce della semplificazione si è successivamente abbattuta su un piccolo elenco di elementiobsoleti: 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 perusabilità e accessibilità: frame, frameset e noframes.E con questi ultimi si chiude la lista degli elementi soppressi; in loro onore terminiamo la lezione conun piccolo snippet che li omaggi:<center> <font color="blue" size="2"> <big>Addio</big>, <s>monti sorgenti dallacque, ed elevati al cielo; cime</s> elementi di markup inuguali, noti a chi è cresciuto tra voi,
  12. 12. e impressi nella sua mente, non meno che lo sia laspetto de suoi più familiari. </font> Liberamente adattato da: <acronym title="I Promessi Sposi">IPS</acronym></center> Attributi globaliDi attributi globali (quelli cioè che si possono applicare a tutti gli elementi HTML) ce ne sonosempre 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, comeintuibile, possono essere applicati a un qualsiasi tag di queste specifiche. In questo capitolodedicheremo qualche paragrafo ad ognuno dei nuovi arrivati, alcuni dei quali, vedrete, sonodecisamente interessanti.Modificare il contenuto di una pagina: contenteditableTinyMCE, CKEditor e WYMeditor sono solo tre di una lunga lista di librerie studiate per offrire unostrumento di editing testuale su web che superi le classiche textarea. I risultati sono già ad oggieccellenti, vicini a prodotti desktop come Microsoft Word, ma le soluzioni implementate fanno tutteuso di escamotage più o meno furbi per ottenere questo livello di interazione in quanto l’HTML 4 nonprevede alcun modo esplicito di generare controlli del genere.Durante la stesura delle specifiche HTML5 questo problema è stato affrontato e si è deciso disviluppare un approccio comune al rich-editing di un documento re-introducendo un set di specificheimplementate 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 portatoalla creazione di un nuovo attributo globale:contenteditable, che impostato a true su di un qualsiasielemento lo rende modificabile da browser; lo stesso destino subiscono tutti gli elementi in essocontenuti a meno che non espongano un esplicitocontenteditable=false.Ma... cosa significa esattamente modificabile da browser? Che tipo di feedback visivo ci sidovrebbe aspettare? E come si comporterebbe il markup a fronte delle modifiche? Sfortunatamentequi le specifiche non sono troppo chiare e sanciscono semplicemente che qualsiasi cosa vengaconcessa all’utente il risultato deve comunque restare conforme all’HTML5: questa libertà operativaha prodotto comportamenti diversi da browser a browser; ad esempio c’è chi traduce il tasto inviocom un <br> e chi invece crea un nuovo paragrafo con <p>. Parallelamente è disponibile anche un setdi API utilissime (http://dev.w3.org/html5/spec/dnd.html%23execCommand) per insistere sulla zonamodificabile con comandi attivati dall’esterno, come ad esempio da una toolbar. Un pulsante chevolesse attivare/disattivare il grassetto sulla selezione corrente dovrebbe invocare la seguentefunzione:document.execCommand(bold)Prima di passare oltre sappiate che l’attributo contenteditable è stato applicato con valore true aall’intera sezione precedente con l’esclusione di questo paragrafo, permettendovi così di editarla esperimentare l’interazione di questa nuova interessante caratteristica! (e se selezionate del testo ecliccate qui (javascript:document.execCommand(bold);), potrete renderlo grassetto!).
  13. 13. Menu contestuali associati ad un elemento:contextmenuL’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:<img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg"contextmenu="image_menu"><menu type="context" id="image_menu"> <command label="Modifica il contrasto" onclick="contrastDialog();"> <command label="Negativo" onclick="negativo();"></menu>Cliccando con il tasto destro del mouse sull’immagine il browser dovrebbe mostrare un menucontenente le due azioni disponibili. Purtroppo ad oggi non esiste ancora nessuna implementazionefunzionante 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 numeroarbitrario di attributi il cui nome può essere definito dall’utente sulla base di esigenze personali, apatto che venga mantenuto il suffisso ‘data-’; ad esempio:<img id="ombra" class="cane" data-cane-razza="mastino corso” data-cane-eta="5" data-cane-colore="nero" src="la_foto_del_mio_cane.jpg">È inoltre interessante notare come queste informazioni, che arricchiscono e danno valore semanticoall’elemento, siano accessibili anche attraverso un comodo metodo Javascript:alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");La fine del display:none in linea: hiddenL’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 delladiffusione di librerie Javascript come jQuery o Prototype. Un elemento marcato come hidden deveessere considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.SpellcheckLa quasi totalità dei browser oggi in commercio contiene un motore di verifica della sintassigrammaticale. Le specifiche HTML5 introducono un meccanismo per abilitare o disabilitare ilcontrollo della sintassi su porzioni della pagina modificabili dall’utente. L’attributo in questione si
  14. 14. chiama spellcheck e, quando impostato a true, ordina al browser di attivare il proprio correttoresull’elemento corrente e su tutti i suoi figli.Laddove invece non venga impostata nessuna preferenza, le specifiche prevedono che il browserutilizzi un proprio comportamento di default.Altri attributi globaliCi 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 sempliceimplementazione di markup e verranno trattati più avanti nella guida.Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:accesskey, class, contenteditable, contextmenu, dir, draggablehidden, id, lang, spellcheck, style, tabindex, titleTabella del supporto sui browserAttributi globalicontenteditable 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 NoConclusioniIn questa lezione abbiamo appreso che la nuova configurazione di markup dell’HTML5 è stata studiataper ovviare a tutti i problemi emersi in anni sviluppo di siti web e applicazioni con la precedenteversione delle specifiche. Nelle prossime lezione introdurremo il nuovo content model, pensato nonpiù nella forma binaria ‘block’ e ‘inline’ ma articolato in una serie di modelli di comportamentocomplessi ed interessanti. Un nuovo content modelNon più solo divEcco come si potrebbe codificare l’esempio della lezione precedente utilizzando i nuovi elementi messia disposizione dall’HTML5:<!doctype html><html lang="it"><head></head> <body>
  15. 15. <header> --- Titolo e Testata --- </header> <nav> --- Voci di Menu --- </nav> <article> --- Un Post --- </article> <article> --- Un altro Post --- </article></body></html>Come si può notare, i tag introdotti hanno un nome in strettissima attinenza con il propriocontenuto; questo approccio risolve in modo elegante sia il problema dell’utilizzo dell’attributo classcon 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 anchesostanziose novità al modo in cui lo user-agent deve comportarsi nell’interpretare questi elementi.Contenuti in una bolla di saponePartiamo dal seguente esempio HTML4:<html><body> <h1>I diari di viaggio:</h1> <h2>A spasso per il mondo alla scoperta di nuove culture:</h2> <h3>Giro turistico della Bretagna</h3> <p>lorem ipsum..</p> <h3>Alla scoperta del Kenya</h3> <p>lorem ipsum..</p> <h3>Cracovia e la Polonia misteriosa</h3> <p>lorem ipsum..</p> <p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p></body></html>Se lo visualizziamo avremo un risultato assolutamente strutturato come questo:Figura 3 (click per ingrandire) - Struttura del documento
  16. 16. (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 acambiare l’elemento h3 in h4 in modo da fare spazio alla nuova suddivisione:<html><body> <h1>I diari di viaggio:</h1> <h2>A spasso per il mondo alla scoperta di nuove culture:</h2> <h3>Europa</h3> <h4>Giro turistico della Bretagna</h4> <p>lorem ipsum..</p> <h4>Cracovia e la Polonia misteriosa</h4> <p>lorem ipsum..</p> <h3>Africa</h3> <h4>Alla scoperta del Kenya</h4> <p>lorem ipsum..</p> <p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p></body></html>Questo accade perché la gerarchia delle intestazioni è assoluta rispetto all’intero documento e ognitag <h*> è tenuto a rispettarla. Nella maggior parte dei casi però questo comportamento è fastidiosoin quanto è molto comune avere a che fare con contenuti che, come articoli o commenti, vorremmoavessero una struttura indipendente dalla loro posizione nella pagina. In HTML5 questo è stato resopossibile definendo una nuova tipologia di content model, chiamato ‘sectioning content’, al qualeappartengono elementi come article e section. All’interno di tag come quelli appena citati la vitascorre come in una bolla di sapone, quindi l’utilizzo di un <h1> è considerato relativo alla sezione incui si trova.
  17. 17. Riprendiamo l’esempio precedente ed interpretiamolo in salsa HTML5:<!doctype html><html><head> <title>I diari di viaggio</title></head><body> <header> <hgroup> <h1>I diari di viaggio:</h1> <h2>A spasso per il mondo alla scoperta di nuove culture:</h2> </hgroup> </header> <section> <h1>Europa</h1> <article> <h1>Giro turistico della Bretagna</h1> <p>lorem ipsum..</p> </article> <article> <h1>Cracovia e la Polonia misteriosa</h1> <p>lorem ipsum..</p> </article> </section> <section> <h1>Africa</h1> <article> <h1>Alla scoperta del Kenya</h1> <p>lorem ipsum..</p> </article> </section> <p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p></body></html>Molto meglio! Ora i singoli componenti di questo documento sono atomici e possono essere spostatiall’interno della pagina senza dover cambiare la loro struttura interna. Inoltre, grazie a questedivisioni, il browser riesce a discernere perfettamente il fatto che l’ultimo paragrafo non appartenga altesto del viaggio in Kenia.Diamo prova dell’atomicità creando un blocco dedicato all’ultimo articolo inserito: ‘Un week-end aBarcellona’:<!doctype html><html><head> <title>I diari di viaggio</title></head><body>
  18. 18. <header> <hgroup> <h1>I diari di viaggio:</h1> <h2>A spasso per il mondo alla scoperta di nuove culture:</h2> </hgroup> </header> <article> <h1>Un week-end a Barcellona</h1> <p>lorem ipsum..</p> </article><!-- resto della pagina -->Anche grazie a questo content model l’HTML5 introduce un nuovo e preciso algoritmo per il calcolodell’outline del documento. La vista ad outline, tipica nei software di word processing e ancora nonpresente nei browser, è utilissima nella navigazione dei contenuti di una pagina. Sperimentiamoquesta feature installando un’apposita estensione per Chromium(https://chrome.google.com/extensions/detail/afoibpobokebhgfnknfndkgemglggomo):Figura 4 (click per ingrandire) - Vista ad outline del documento(http://www.html.it/guide/esempi/html5/imgs/lezione_5/immagine_2.png)È interessante notare come l’algoritmo non solo identifichi correttamente i vari livelli di profondità, maper ognuno di essi sappia anche recuperare il titolo adeguato. Nell’HTML5 è vitale che il design dellapagina si rispecchi in una outline ordinata e coerente, questa infatti è la miglior cartina tornasolepossibile in merito al corretto utilizzo delle specifiche: ad esempio, in una prima revisione dellalezione, il codice HTML precedente mancava dell’elemento hgroup, utile a raggruppare elementi checoncorrono a formare un titolo. L’errore è stato individuato e corretto proprio grazie allavisualizzazione di una outline errata:Figura 5 (click per ingrandire) - Strutturazione corretta del documento
  19. 19. (http://www.html.it/guide/esempi/html5/imgs/lezione_5/immagine_3.png)Concludiamo la trattazione di questo content model citando la presenza di alcuni elementi che, purseguendo le linee interpretative del sectioning content, devono essere ignorati dallalgoritmo dioutline. Tali tag sono definiti sectioning roots ed il motivo della loro esclusione è legato al fatto cheessi non concorrono tanto alla struttura dei contenuti della pagina quanto allarricchimento dellastessa. Fanno parte di questo elenco elementi come: blockquote, details, fieldset, figure e td.Seppur esclusi dalloutline del documento, nulla vieta agli appartenenti di questo gruppo di avere unapropria outline interna. Panoramica sui content model e presentazione del primo progetto guidaLo scopo di questa lezione è duplice: da un lato riallacciarsi al tema del sectioning content per offrireuna visione di ampio respiro in merito alle differenti tipologie di disposizione di contenuto offertedallHTML5, dallaltro iniziare la stesura del primo progetto guida.Una panoramica completaEsistono altri content model oltre a quelli trattati nella lezione precedente, alcuni implicitamentepresenti anche nelle vecchie specifiche, altri nuovi di zecca, per una rappresentazione grafica rimandoallottima infografica (http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#kinds-of-content) dello stesso W3C, fra laltro realizzata usando la sintassi SVG (provatea scorrere il mouse sopra le varie aree dellinsieme).Metadata contentFanno parte di questa categoria tutti gli elementi utili alla definizione del documento nel suoinsieme: a livello di presentazione o di funzionamento.Tag: base, command, link, meta, noscript, script, style, title.
  20. 20. Sectioning contentNe abbiamo appena parlato: il gruppo contiene tutti quegli elementi studiati per ospitarecontenuti atomici e semanticamente ordinati. È importante utilizzare almeno un appartenentealla categoria heading content all’interno di ognuno di questi tag, questo anche per non avere unoutline popolato da voci senza titolo (vedi immagine).Tag: article, aside, nav, section.Figura 6 (click per ingrandire) - Visualizzazione della struttura del documento(http://www.html.it/guide/esempi/html5/imgs/lezione_6/immagine_4.png)Heading contentTutti gli appartenenti a questo gruppo servono per definire titoli. Interessante notare come se lapresenza di uno di questi elementi non sia associata ad un sectioning content questo venga definitoimplicitamente.Tag: h1, h2, h3, h4, h5, h6, hgroupPhrasing contentIncorpora 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 contienephrasing content a sua volta), dfn, em, embed, i, iframe, img, input, ins (solo se contiene phrasingcontent 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 contentNe fanno parte tutti quegli elementi che, come il nome del gruppo suggerisce, incorporano nellapagina oggetti esterni.Tag: audio, canvas, embed, iframe, img, math, object, svg, video.Interactive contentQuesta categoria comprende tutto ciò specificatamente studiato per interagire con l’utente.
  21. 21. Tag: a, audio (con l’attributo controls presente), button, details, embed, iframe, img (conl’attributo usemap presente), input (con l’attributo type diverso da hidden), keygen, label, menu(con l’attributotype="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 secondadella 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 deiform, che vedremo più avanti.Progetto guida - nel tag HEADCogliamo l’occasione di questa panoramica alla struttura dell’HTML5 per gettare le prime fondamentadel progetto guida: in questo capitolo vedremo come impostare e strutturare il contenitore dellapagina ed il tag head. Creiamo un file index.html ed iniziamo ad inserire i primi elementi:<!doctype html><html lang="it"><head> <title>We5! Il blog della guida HTML5</title></head></html>Fin qui, eccezion fatta per il doctype, nessuna differenza rispetto alla versione 4 delle specifiche;andiamo avanti aggiungendo alcuni tag meta e link:...<head> <title>We5! Il blog della guida HTML5</title> <link rel="stylesheet" href="monitor.css" media="screen"> <link rel="stylesheet" href="printer.css" media="print"> <link rel="stylesheet" href="phone_landscape.css" media="screen and (max-device-width: 480px) and (orientation: landscape)"> <link rel="stylesheet" href="phone_portrait.css" media="screen and (max-device-width: 480px) and (orientation: portrait)"></head>...Incuriositi dalla strana sintassi degli attributi media degli ultimi due <link>? State osservando unatipica media query: il CSS viene interpretato solamente se le condizioni dell’espressione sono valutatecome vere dallo user agent. Le media query, profetizzate già nel 1999, consentono di identificare ilcorretto CSS per un dato device con un incredibile livello di dettaglio, alcuni esempi:<!-- TV con scan dell’immagine progressiva --><link rel="stylesheet" href="progressive.css" media="tv and (scan: progressive)"><!-- Stampanti con almeno 1000dpi ---><link rel="stylesheet" href="printer.css" media="print and (min-resolution: 1000dpi)"><!-- Retina display --><link rel="stylesheet" href="retina.css" media="screen and (-webkit-min-device-pixel-
  22. 22. ratio: 2)"><!-- Device monocromatici (Kindle, etc..) --><link rel="stylesheet" href="mono.css" media="screen and (monochrome)">Bene, completiamo questo capitolo aggiungendo icone e charset:<head> <meta charset="utf-8"> <!-- ..gli altri tag.. --> <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif"> <link rel="icon" href="iphone.png" sizes="57x57" type="image/png"> <link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml"></head>Come potete notare è ora possibile specificare un attributo sizes per ogni icona, in questo modo louser agent può liberamente scegliere quale icona abbia le dimensioni più adatte. Ci sono due motiviche giustificano l’inserimento della direttiva ‘charset’ in questo progetto: in primo luogo la nuovasintassi è molto più succinta della passata, seppur ancora valida:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">In seconda istanza è intenzione dell’autore sottolineare come sussistano reali rischi di sicurezza legatiall’assenza di questa direttiva.Dalla prossima lezione analizzeremo nel dettaglio i singoli elementi che concorrono alla costituzionedella nuova impalcatura semantica del linguaggio. HeaderFunzioni e dati tecniciIl tag header serve a rappresentare "un gruppo di ausili introduttivi o di navigazione". Taledefinizione, seppure apparentemente vaga, contiene in sé i concetti chiave per comprendere appienola funzione di questo tag: 1. Lelemento <header> è un contenitore per altri elementi. 2. Lelemento <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 dellelemento <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.<header> <h1>Questo è un titolo</h1> <h2>Questo è un sotto-titolo</h2> [...]
  23. 23. </header>Header: esempi concretiRiprendendo 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<head>:<head> <meta charset="utf-8"> <title> We5! Il blog della guida HTML5 </title> <link rel="stylesheet" href="monitor.css" media="screen"> <link rel="stylesheet" href="printer.css" media="print"> <link rel="stylesheet" href="phone_landscape.css" media="screen and (max-device-width: 480px) and (orientation: landscape)"> <link rel="stylesheet" href="phone_portrait.css" media="screen and (max-device-width: 480px) and (orientation: portrait)"> <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif"> <link rel="apple-touch-icon" href="iphone.png" sizes="57x57" type="image/png"> <link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml"></head>A questo punto possiamo iniziare a comporre il <body> del nostro documento partendo proprio con iltag <header>, che con lelemento <hgroup> (http://xhtml.html.it/guide/lezione/4973/hgroup/)definisce il titolo principale del documento (del sito) e la cosiddetta tagline:<header> <hgroup> <h1>We5! Il blog della guida HTML5</h1> <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2> </hgroup></header>Ma header non deve contenere necessariamente solo titoli <hn]]>! Se titolo e sottotitolo principalisono certamente elementi introduttivi ai contenuti successivi, è naturalmente un ausilio dinavigazione una lista di link che andrà a formare la barra di navigazione principale del sito. Ecco comepossiamo completare la struttura del nostro primo <header>:<header> <hgroup> <h1>We5! Il blog della guida HTML5</h1> <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2> </hgroup> <nav>
  24. 24. <h1>Navigazione:</h1> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">Gli autori</a></li> <li><a href="/refactoring">Il progetto four2five</a></li> <li><a href="/archives">Archivio</a></li> </ul> </nav></header>Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresentanel nostro progetto:Figura 8 - Struttura del documento: primo headerAbbiamo inserito una sezione di navigazione (http://xhtml.html.it/guide/lezione/4971/nav/) (<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 nostroesempio non poteva essere fatto altrimenti ma esistono numerosi tipi di layout in cui il menu dinavigazione 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 principalidella pagina, i post. Per definire semanticamente la sezione useremo il tag <section>(http://xhtml.html.it/guide_preview/lezione/4969/section/); ciascun post sarà definito a livellostrutturale da un tag <article>(http://xhtml.html.it/guide_preview/lezione/4970/article/):
  25. 25. <section> <h1>Lultimo post</h1> <article> [...] </article></section>Si noti, innanzitutto, come il tag <h1> che fa da titolo principale alla sezione non sia racchiuso in unelemento <header>. Ribadiamo: non è obbligatorio inserire i titoli <hn]]> allinterno di uncontenitore<header>.A questo punto, dobbiamo definire due elementi fondamentali per la struttura di un post di blog: iltitolo 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>:<section> <h1>Lultimo post</h1> <article> <header> <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time> <h2>Nuove scoperte sul tag video!</h2> </header> <p> [...] </p> </footer> [...] </footer> </article></section>Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente:Figura 9 - Struttura del documento: header degli articoli
  26. 26. I due scenari mostrati rendono bene lidea rispetto agli utilizzi tipici dellelemento <header>. Laspecifica suggerisce come altri contesti duso la tavola dei contenuti di una sezione, un form di ricercao i loghi più rilevanti presenti nel documento.Nella prossima lezione capiremo come utilizzare lelemento <footer> e quale è la sua rilevanzasemantica allinterno di un template.Tabella del supporto sui browserNuovi tag semantici e strutturali<header> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ FooterFunzioni e dati tecniciLelemento <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:
  27. 27. 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 loutliner (http://it.wikipedia.org/wiki/Outliner). Allinterno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento.<footer> <small>©2011 Autore contenuto. Design by Designer sito </small></footer>Footer: esempi concretiRiprendendo il nostro progetto guida, dopo aver definito definito il contenuto dell<header>(http://xhtml.html.it/guide/lezione/4967/header/), possiamo vedere come il <footer> chiuda il blogdistaccandosi dalle altre sezioni in modo molto naturale, racchiudendo al proprio interno una lista cheaggiunge informazioni riguardo lautore della pagina e la data del suo ultimo aggiornamento; infine iltag <small>ridefinito nella specifica dellHTML 5 (http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element) racchiude il copyright della pagina:<footer> <dl> <dt>Creato da</dt> <dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd> <dt>Ultimo aggiornamento</dt> <dd><time datetime="2010-11-23" pubdate>Marted&igrave; 23 Novembre</time></dd> <dd> </dl><small>Tutti i contenuti sono prottetti dalla licenza creative commons</small></footer>Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresentanel nostro progetto (figura 1):Figura 10 - Struttura del documento: il footer principale
  28. 28. schema template html5 [footer]Così come lintero documento, ogni articolo del nostro blog avrà un <footer> contenente il nomedellautore ed altre eventuali informazioni aggiuntive:<section> <h1>Lultimo post</h1> <article> <header> [...] </header> <p> [...] </p> <footer> <dl> <dt>autore:</dt> <dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd> <dt>categoria: </dt> <dd><a href="categoria/multimedia">multimedia</a>,</dd> <dt>tags: </dt> <dd><a href="tags/video">video</a>,</dd> <dd><a href="tags/canvas">canvas</a>,</dd> <dt>permalink: </dt> <dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd> <dt>rank:</dt> <dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd> </dl> </footer>
  29. 29. </article></section>È da notare la scelta di inserire le informazioni riguardanti lautore dellarticolo allinterno del tag<dl>; infatti nella specifica HTML5 questo elemento viene ridefinito come contenitore di metadati equindi semanticamente corretto allinterno del nostro <footer>.Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente, tutte le informazionicontenute nel <footer> per comodità abbiamo deciso di chiamarle metadati:Figura 11 - Struttura del documento: footer degli articoliLelemento <footer> potrebbe essere inserito anche allinizio di un documento subito dopo il <body>oppure allapertura di un tag <article> (http://xhtml.html.it/guide_preview/lezione/4970/article/)ma in questi casi non dovrebbe contenere elementi introduttivi riguardo il contenuto della sezione chelo contiene; il suo uso in questa posizione potrebbe essere dovuto solamente a ragioni pratiche comead esempio la duplicazione del <footer> in fondo alla pagina quando i contenuti della stessa sonomolto lunghi:<body><footer> <a href="#indice">Torna allindice</a></footer><section> [Contenuti molto lunghi...]<section><section> [Contenuti molto lunghi...]<section><section>
  30. 30. [Contenuti molto lunghi...]<section><footer> <a href="#indice">Torna allindice</a></footer></body>Nella prossima lezione parleremo del tag <section> e della sua importanza nel sezionare la pagina inblocchi semanticamente distinti.Tabella del supporto sui browserNuovi tag semantici e strutturali<footer> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ SectionFunzioni e dati tecniciIl tag <section>, secondo la definizione presente nella specifica HTML5, rappresenta una sezionegenerica di un documento o applicazione. Lelemento <section>, in questo contesto, individuaun 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. lelemento <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; 2. lelemento <section> non deve essere preferito allelemento <article> quando i contenuti possono essere ripubblicati anche su altri siti; 3. lelemento <section> e lelemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all interno di un <section> che viceversa.<article> <section> <h1>Titolo 1</h1> <p>Testo correlato al titolo 1.</p> </section> <section> <h1>Titolo 2</h1> <p>Testo correlato al titolo 2.</p> </section></article>Lelemento <section> può essere utilizzato in combinazione con lattributo cite attraverso il quale èpossibile specificare lurl dalla quale si stanno riportando i contenuti.
  31. 31. Section: esempi concretiCome abbiamo visto nei capitoli precedenti, il codice del nostro progetto inizia a prendere una formapiù chiara e definita: infatti, dopo aver compreso lutilità semanticadell<header>(http://xhtml.html.it/guide_preview/lezione/4967/header/) e del <footer>(http://xhtml.html.it/guide_preview/lezione/4968/footer/), capiamo come utilizzare lelemento<section> allinterno del nostro blog.Per strutturare la pagina raggruppando i contenuti correlati, in ordine decrescente incontriamo leprime due grandi macrosezioni del blog: "lultimo post" e "i post meno recenti" contenuti quindi indue<section>:<section> <h1>Lultimo post</h1> <article> [contenuto del post...] <section> [commenti...] </section> </article></section><section> <h1>Post meno recenti</h1> <article> [contenuto del post...] </article> <article> [contenuto del post...] </article> <article> [contenuto del post...] </article></section>Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresentanel nostro progetto:Figura 12 - Struttura del documento: sezioni principali
  32. 32. Nel nostro progetto le <section>, oltre a poter raggruppare i vari <article>(http://xhtml.html.it/guide_preview/lezione/4970/article/), sono presenti anche allinterno del primo<article> per suddividere i commenti dal contenuto del post. La sezione dei commenti a sua voltacontiene unaltra sezione contenente il form per linserimento di un nuovo commento:<article> [contenuto del post...] <section> <article> [commento1...] </article> <article> [commento2...] </article> <article> [commento3...] </article> <section> [Inserisci un nuovo commento...] </section> </section> </section></article>In questo modo il post è diviso in maniera molto netta rispetto ai propri contenuti solo con lausilio deitag HTML5, separando quindi i commenti che sono una sezione aggiuntiva eventualmente ancheeliminabile dallargomento principale trattato allinterno dellarticolo.
  33. 33. Lo schema dellarticolo analizzato è quindi il seguente:Figura 13 - Struttura del documento: suddivisione semantica del postIl tag <section> rappresenta un elemento che viene considerato una sezione a sé stante dalloutliner(http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano diun titolo (<hN>) che li riassuma. Come vedremo nelle prossime lezioni esistono anche altri elementinelle specifiche HTML5 che sono considerati "contenitori di sezionamento dei contenuti"(http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/).Tabella del supporto sui browserNuovi tag semantici e strutturali<section> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ ArticleFunzioni e dati tecniciIl tag <article> rappresenta una sezione autonoma in un documento, pagina, applicazione osito; infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte ointeramente in diverse pagine.
  34. 34. Esso può identificare il post di un forum, un articolo di una rivista o di un giornale, larticolo di unblog, 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 <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 allinterno dellelemento padre <article>; 2. le informazioni relative allautore dell<article> non devono essere replicate allinterno degli elementi nidificati allinterno dello stesso; 3. lelemento <time> con lattributo pubdate può essere utilizzato per definire la data di pubblicazione dell<article>; 4. lelemento <section> e lelemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all interno di un <section> che viceversa.<article> <header> <h1>Titolo articolo</h1> <time pubdate datetime="2011-10-09T14:28-08:00"></time></p> </header> <p>Contenuto dellarticolo</p> <footer> <p>Informazioni riguardo lautore</p> </footer></article>In sostanza, anche se nelle specifiche non è espresso, lelemento <article> rappresenta una formaparticolare di <section> (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<section>. Allinterno della prima <section> possiamo trovare diversi tag <article>: il primo cheincontriamo è larticolo vero e proprio con tanto di <header>(http://xhtml.html.it/guide_preview/lezione/4967/header/) contenente il titolo dellarticolo e la datadi pubblicazione e <footer> che allinterno di un <dl> raccoglie i metadati riguardanti lautore.Allinterno dell<article> padre sono annidati ulteriori <article> contenenti i commenti allarticoloracchiusi in una <section> che li rende semanticamente separati dal contenuto principale. Così comei commenti, anche il form che permette di inserire unulteriore commento è inserito allinterno di una<section>. Possiamo quindi facilmente immaginare come il contenuto del nostro <article> possaessere citato o ripubblicato in altri blog indipendentemente dai commenti che ha ricevuto.Ecco quindi il codice dell<article> sopra descritto:<section> <h1>Lultimo post</h1><article> <header> <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time> <h2>Nuove scoperte sul tag video!</h2> </header>
  35. 35. <p> Attraverso un utilizzo sapiente del tag canvas è possibile leggere uno stream di dati proveniente da un tag video e <mark>manipolarlo in tempo reale</mark>. </p> <footer> <dl> <dt>autore: </dt> <dd><address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address></dd> <dt>categoria: </dt> <dd><a href="categoria/multimedia">multimedia</a>,</dd> <dt>tags: </dt> <dd><a href="tags/video">video</a>,</dd> <dd><a href="tags/canvas">canvas</a>,</dd> <dt>permalink: </dt> <dd><a href="2010/22/11/nuove-scoperte-sul-tag-video">permalink</a>,</dd> <dt>rank:</dt> <dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd> </dl> </footer> <section> <h3>Commenti</h3> <article> <h4> <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time> Angelo Imbelli ha scritto: </h4> <p>Cè un bellesempio sulla rete: effetto ambi-light!</p> <footer> <address><a href="mailto:ambelli@mbell.it">Angelo Imbelli</a></address> </footer> </article> <article> <h4> <time datetime="2010-11-23" pubdate>Martedì 23 Novembre</time> Sandro Paganotti ha scritto: </h4> <p>Bellissimo! Grazie per la segnalazione!</p> <footer> <address><a href="mailto:sandro.paganotti@gmail.com">Sandro Paganotti</a></address> </footer> </article> <section> <h4>Inserisci un nuovo commento:</h4> <form> [ campi form per inserire un nuovo commento] </form>
  36. 36. </section> </section> </article></section>Nel seguente schema abbiamo realizzato graficamente come si presenta il nostro articolomorfologicamente:Figura 14 - Struttura del documento: suddivisione semantica degli articoliCè da notare che anche se il tag <article> rappresenta un elemento che viene considerato unasezione a sé stante dalloutliner (http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con deicontenuti unici e un titolo univoco (quindi per ogni blocco avremmo potuto utilizzare un titoloracchiuso in un <h1>), abbiamo preferito rispettare comunque lordine decrescente per i titoli in mododa rendere i contenuti accessibili anche agli screen reader che al momento non hanno ancoraimplementato lalgoritmo outliner.Nella prossima lezione parleremo del tag <nav> e della sua fondamentale importanza allinterno diuna pagina in HTML5.Tabella del supporto sui browserNuovi tag semantici e strutturali
  37. 37. <article> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ NavFunzioni e dati tecniciIl 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 oa parti interne dello stesso documento; quindi, in breve, una sezione contenente link dinavigazione.A questo punto potremmo potremmo porci una domanda: come mai un elemento così scontatamentefondamentale è stato introdotto solamente adesso? La risposta potrebbe essere che, così come per itag visti nelle precedenti lezioni, finalmente si è cercato di incentivare luso di standard condivisiproponendo elementi che possano aiutare gli sviluppatori proprio perché molto vicini ai modellimentali oramai assimilati dagli esperti e di semplice comprensione per i novizi del mestiere.Per poter utilizzare correttamente lelemento <nav> dobbiamo ricordare i seguenti punti: 1. solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per lelemento <nav>; 2. i link a pie di pagina e le breadcumb non devono essere inseriti in una sezione <nav>; 3. lelemento <nav> non sostituisce i link inseriti in elementi come gli <ul> o gli <ol> ma deve racchiuderli.<nav> <ul> <li>Questo è un link</li> <li>Questo è un link</li> <li>Questo è un link</li> <li>Questo è un link</li> [...] </ul></nav>Nav: esempi concretiPrima di spiegare in che modo lelemento <nav> può essere inserito nel progetto che abbiamo presocome base, riassumiamo brevemente i tag spiegati nelle lezioni precedenti: Con lelemento <header> (http://xhtml.html.it/guide_preview/lezione/4967/header/) abbiamo indicato il titolo introduttivo del blog più i titoli dei singoli articoli. Con il <footer> (http://xhtml.html.it/guide_preview/lezione/4968/footer/) abbiamo racchiuso le informazioni relative agli autori dei contenuti, i metadati e il copyright. Con lelemento <section> (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 <article> (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<header> allinterno del tag <nav>:
  38. 38. <header> <hgroup> <h1>We5! Il blog della guida HTML5</h1> <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2> </hgroup> <nav> <h1>Navigazione:</h1> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">Gli autori</a></li> <li><a href="/refactoring">Il progetto four2five</a></li> <li><a href="/archives">Archivio</a></li> </ul> </nav></header>Da notare la presenza del titolo <h1> che serve a specificare più dettagliatamente la funzione delnostro blocco di link e a conferirgli un titolo valido anche per loutliner. Il tag <nav>, infatti,rappresenta un elemento che viene considerato una sezione a sé stante dalloutliner(http://it.wikipedia.org/wiki/Outliner) e quindi un blocco con dei contenuti univoci che necessitano diun titolo che li riassuma.Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresentanel nostro progetto:Figira 15 - Struttura del documento: visualizzazione grafica del tag navIn realtà (come già specificato nel paragrafo <header>) il menu di navigazione non deve esserenecessariamente inserito nel <header>, nel nostro esempio non poteva essere fatto altrimenti ma
  39. 39. esistono numerosi tipi di layout in cui il menu di navigazione può essere facilmente slegato daglielementi introduttivi di intestazione del documento.Nel nostro esempio lelemento <nav> è presente anche nella colonna laterale del blog (<aside>) eracchiude un menu che ha come link le categorie nelle quali sono inseriti i vari articoli:<aside> <h1>Sidebar</h1> <section> <h2>Ricerca nel form:</h2> <form> [form di ricerca dei contenuti...] </form> </section> <nav> <h2>Categorie</h2> <ul> <li><a href="/categoria/multimedia">multimedia</a></li> <li><a href="/categoria/text">marcatori testuali</a></li> <li><a href="/categoria/form">forms</a></li> </ul> </nav></aside>Per comprendere quale è la funzione dellelemento <aside> che contiene il menu laterale non ci restaquindi che leggere la prossima lezione.Tabella del supporto sui browserNuovi tag semantici e strutturali<nav> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ AsideFunzioni e dati tecniciLelemento <aside> rappresenta una sezione di una pagina costituita da informazioni che sonomarginalmente correlate al contenuto dellelemento padre che la contiene, e che potrebberoessere considerate distinte da questultimo. Questo è ciò che viene indicato nelle specifiche HTML5,ma è facile immaginare lutilità del tag <aside> semplicemente pensandolo come un contenitore diapprofondimentoin cui possiamo inserire gruppi di link, pubblicità, bookmark e così via.<aside> <h1>Questi sono dei contenuti di approfondimento marginali rispetto al contenuto principale</h1> <nav> <h2>Link a pagine correlate al contenuto</h2> <ul>
  40. 40. <li>Informazione correlata al contenuto</li> <li>Informazione correlata al contenuto</li> <li>Informazione correlata al contenuto</li> </ul> </nav> <section> <h2>Pubblicità</h2> [immagini pubblicitarie] <section></aside>Aside: esempi concretiRitornando al nostro progetto guida, dopo aver definito il contenuto dellelemento <nav>, possiamoanalizzare la parte di codice in cui abbiamo utilizzato il tag <aside>:<aside> <h1>Sidebar</h1> <section> <h2>Ricerca nel form:</h2> <form name="ricerca" method="post" action="/search"> <label> Parola chiave: <input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword" required maxlength="50"> </label> <input type="submit" value="ricerca"> </form> </section> <nav> <h2>Categorie</h2> <ul> <li><a href="/categoria/multimedia">multimedia</a></li> <li><a href="/categoria/text">marcatori testuali</a></li> <li><a href="/categoria/form">forms</a></li> </ul> </nav></aside>Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresentanel nostro progetto:Figura 16 - Struttura del documento: visualizzazione grafica del tag aside
  41. 41. Come possiamo notare, il form per la ricerca di parole chiave e i link alle categorie presenti nel nostroblog non sono informazioni particolarmente rilevanti per il contenuto centrale della nostra pagina,pertanto possiamo facilmente separarli con lelemento <aside> che li qualifica come contenutimarginali.Nel nostro caso abbiamo utilizzato un <aside> per contenere la colonna sinistra del blog, ma inrealtà, visto che in diversi siti va di moda la presenza di footer molto grossi con diversi link,consigliamo di utilizzare lelemento <aside> in combinazione con il tag <nav> che potrebbe essere lasoluzione migliore per questa tipologia di contenuti dato che, come abbiamo potuto constatare nellalezione dedicata al footer, ciò non è possibile farlo allinterno del tag <footer>.Così come gli elementi <article> (http://xhtml.html.it/guide_preview/lezione/4970/article/),<section> (http://xhtml.html.it/guide_preview/lezione/4969/section/) e<nav>(http://xhtml.html.it/guide_preview/lezione/4971/nav/) anche l<aside> appartiene allacategoria dei "contenitori di sezionamento dei contenuti"(http://xhtml.html.it/guide_preview/lezione/4965/un-nuovo-content-model/) in quanto per loutlinernecessita di un titolo che riassuma i propri contenuti.Ricordiamo però che non è obbligatorio inserire un titolo per gli elementi che vengono consideratidelle sezioni a sé stanti dalloutliner, infatti in questo caso queste sezioni rimarrebbero senza titoloma non genererebbero nessun errore di validazione.Vediamo quindi ora che abbiamo completato la struttura del blog come è loutline del nostrodocumento Outline (esempi/outline_progetto/outline.html).Nella prossima lezione comprenderemo come usare lelemento <hgroup> e la sua importanza perloutline di un documento in HTML5.Tabella del supporto sui browser
  42. 42. Nuovi tag semantici e strutturali<aside> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ HgroupFunzioni e dati tecniciLelemento <hgroup> rappresenta lintestazione di una sezione. Lelemento viene utilizzato perraggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titolialternativi o slogan.<hgroup> <h1>Questo è il titolo</h1> <h2>Questo è un sottotitolo</h2></hgroup>La vera importanza del tag <hgroup> è che maschera loutline dellelemento padre che lo contiene;infatti, lalgoritmo delloutliner riconosce come un titolo solamente lheading con il valore più alto econsidera tutti gli altri elementi sottotitoli.Esempio:<article datetime="2010-11-22" pubdate > <header> <hgroup> <h2>Le prospettive per il futuro del web</h2> <h1>LHTML 5 rivoluzionerà il mondo del web</h1> </hgroup> </header> <p>Presto il web sarà pieno di siti e applicazioni che saranno in grado di mettere in crisi le più grandi case di desktop application...</p> <footer> <p>Pinco pallino</p> </footer></article>Se facessimo loutline della pagina HTML contenente questo <article>(http://xhtml.html.it/guide_preview/lezione/4970/article/) ci restituirebbe come titolo della sezionesolamente l<h1> contenuto nell<hgroup> (non considerando l<h2> anche se posto prima nelcodice) poiché è il tag con il valore più alto allinterno della sezione. Senza lelemento <hgroup> i duetitoli verrebbero considerati entrambi sullo stesso livello dimportanza come titoli dell <article>.Nella prossima lezione parleremo del tag <mark> e della sua utilità nellevidenziare partiparticolarmente importanti del testo.Tabella del supporto sui browser
  43. 43. Nuovi tag semantici e strutturali<hgroup> 9.0+ 3.0+ 3.1+ 5.0+ 10.0+ MarkFunzioni e dati tecniciLelemento <mark> rappresenta una parte di un testo segnato o evidenziato allutente a causadella sua rilevanza anche in un altri contesti. Esso, in un testo in prosa, indica un punto culminanteche non era originariamente presente, ma che è stato aggiunto per attirare lattenzione del lettore suuna parte del testo che potrebbe non essere stata considerata rilevante dallautore originale quando ilcontenuto è stato scritto.Questa definizione abbastanza complessa in realtà può essere semplificata di molto chiarendoci leidee con un esempio: immaginiamo di cercare una determinata parola chiave in diverse pagine web eche la parola che abbiamo cercato nel motore di ricerca, ci venga evidenziata allinterno della paginache andiamo a visualizzare; ciò che abbiamo appena descritto è la situazione ideale per lutilizzo deltag <mark>poiché con questultimo dobbiamo racchiudere la parola ricercata segnalandolagraficamente allutente.<p>Senza <mark>plug in</mark> di terze parti il web potrebbe diventareper noi sviluppatori più democratico; con le nuove API HTML5 non abbiamo più bisognodi diversi <mark>plug in</mark> di terze parti che sino ad ora erano indispensabiliper i contenuti multimediali</p>Allo stato attuale non esiste un tag HTML standard utilizzato per evidenziare le parole chiave agliutenti 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 lintroduzione dellelemento <mark> le cose possanocambiare.Nella prossima lezione parleremo del tag <time>, unaltra delle novità dellHTML5.Tabella del supporto sui browserNuovi tag semantici e strutturali<mark> 9.0+ 4.0+ 5.0+ 5.0+ 11.0+ Time e gli attributi pubdate e datetimeFunzioni e dati tecniciLelemento <time> rappresenta il tempo su un orologio di 24 ore, o una data precisa nelcalendario 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 manieraleggibile anche per i computer. Ad esempio, i browser saranno in grado di offrire la possibilità di
  44. 44. aggiungere promemoria per i compleanni o gli eventi in programma in una web application chefunziona da calendario.<p>Oggi pomeriggio penso che sarò lì per le <time>15:00</time></p>Prima di inserire lelemento <time> nelle nostre pagine in HTML5 dobbiamo comprendere quali sonoi 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 dellintroduzione del calendario Gregoriano.Lelemento <time> può possedere lattributo pubdate che è di tipo booleano; la sua presenza indicache la data presente nel tag <time> è anche la data nella quale è stato scrittol<article>(http://xhtml.html.it/guide_preview/lezione/4970/article/) padre più vicino, e nel casonon esistesse un <article> padre allora essa è riferita alla creazione dei contenuti dellinterodocumento.Ovviamente un elemento che possiede lattributo pubdate necessita di una data. Per ciascun<article> può esserci solo un singolo tag <time> con pubdate e la stessa cosa vale per linterodocumento.Possiamo specificare in maniera più dettagliata una data aggiungendo lattributo datetime: il valore dellattributo 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 lattributo datetime non è presente allora il contenuto testuale deltag <time> deve essere una "stringa valida" (http://www.whatwg.org/specs/web-apps/current- work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string).<time pubdate datetime="2011-01-20">20 Gennaio</time>Dobbiamo specificare che lattributo pubdate in quanto di tipo booleano può essere inserito anche nelseguente modo:<time pubdate="pubdate" datetime="2011-01-20">20 Gennaio</time>Nella prossima lezione vedremo in quali occorrenze utilizzare il tag <meter>.Tabella del supporto sui browserNuovi tag semantici e strutturali<time> No No No No No MeterFunzioni e dati tecniciLelemento <meter> rappresenta una misura scalare allinterno di un intervallo noto, o unvalore frazionario.
  45. 45. Il tag <meter> è anche utilizzato come un indicatore di livello.<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 unaltezza a meno che non vi sia un valore massimo riconosciuto.Esistono 6 attributi per determinare il valore semantico dellelemento <meter>: 1. min: indica il valore limite minimo disponibile; 2. max: indica il valore limite massimo disponibile; 3. value: indica il valore dellelemento; 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 nellattributo high indica che il valore più alto è il migliore,viceversa è più basso del valore specificato nellattributo 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 e1.Ad oggi lunico browser che renderizza il tag <meter> è Google Chrome presentandolo graficamentecome una barra di progresso, quindi gli sviluppatori sono fortemente incoraggiati a specificare il suovalore in formato testuale al suo interno.Nella prossima lezione illustreremo come utilizzare lelemento <progress> e la sua utilità nel caricarei contenuti dei documenti web.Tabella del supporto sui browserNuovi tag semantici e strutturali<meter> No No No 8.0+ 11.0+ ProgressFunzioni e dati tecniciLelemento <progress> rappresenta lo stato di completamento di un compito e può essere didue tipi: indeterminato: indica che il compito (task) è in fase di completamento, ma che non è chiaro quanto ancora resta da fare prima che loperazione sia completata (ad esempio perché loperazione è 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 unimmagine).Esistono due attributi che determinano lo stato di completamento dellattivita del tag <progress>.

×