Capitolo

Transcript

Capitolo

Ca p i to lo 1 : Str u ttu r a p r i nc ipa l e : Capitolo 1Struttura principale
1
Capitolo 1
Struttura
principale
Bruce Lawson
Sebbene la maggior parte dell’attenzione
per HTML5 ruoti attorno alle nuove API, esiste un grande
interesse per i maniaci del markup e i patiti di JavaScript.
Ci sono 30 nuovi elementi con nuove semantiche che
possono essere utilizzati nelle pagine “statiche” tradizionali,
oltre a una serie di nuovi controlli dei moduli che possono
arginare completamente la convalida di JavaScript.
Quindi, rimbocchiamoci le maniche. In questo capitolo,
trasformeremo l’attuale struttura dei tag <div> in un sistema
semantico. I nuovi elementi strutturali HTML5 come <nav>,
<header>, <footer>, <aside> e <article> specificano determinati
tipi di contenuto. Andremo a vedere come funzionano e
come i documenti HTML5 abbiano una forma meno ambigua
e risultino indubbiamente più “semantici”.
01_Cap01_HTML5.indd 1
28-02-2012 8:43:33
2
H TML5
L’elemento <head>
Partiamo dal principio; il DOCTYPE:
<!DOCTYPE html>
Ecco qua: nessuna stringa da copiare e incollare, nemmeno per
gli autori Web più produttivi. Nessun URL. Nessun numero di
versione. È tutto. Più che un’istruzione è una magia: è richiesta
dai browser che necessitano della presenza di un DOCTYPE
per attivare la modalità standard, e questa stringa è la più breve
che possa fare questo in modo affidabile. Abbiamo utilizzato le
maiuscole in modo che la stringa sia compatibile con HTML e
XML, e ti suggeriamo di fare altrettanto.
Dopodiché, dobbiamo definire la codifica dei caratteri del
documento. Non farlo sarebbe un rischio ignoto, ma reale,
per la sicurezza (vedi http://code.google.com/p/doctype/wiki/
ArticleUtf7). Deve restare nei primi 512 byte del documento.
A meno di non avere una ragione davvero valida per non
utilizzarla, ti raccomandiamo la codifica caratteri UTF-8:
<!DOCTYPE html>
<meta charset=utf-8>
Osserva il tag <meta> con molta attenzione. Coloro che sono
abituati a scrivere in XHTML noteranno tre stranezze. La prima
è che il tag <meta> è più corto rispetto a quello che eravamo
abituati a utilizzare <meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8">. Questo è ancora possibile, ma è
preferibile optare per la scrittura più breve poiché più facile da
digitare e funziona già ovunque.
Forse noterai che non ho messo tra virgolette l’attributo
charset="utf-8". E non ho nemmeno chiuso il tag <meta
charset=utf-8 />.
HTML5 non è un linguaggio XML, quindi tali operazioni non
sono necessarie. Tuttavia, se preferisci, puoi farlo. Le forme
riportate di seguito sono tutte valide in HTML5:
<META CHARSET=UTF-8>
<META CHARSET=UTF-8 />
<META CHARSET="UTF-8">
<META CHARSET="UTF-8" />
<meta charset=utf-8 />
<meTa CHARset="utf-8">
<meTa CHARset="utf-8" />
28-02-2012 8:43:33
Ca p i to lo 1 : Str u ttu r a p r i nc ipa l e : L’ e l e m e nto < h e a d >
3
Scegli uno stile e mantienilo
Solo per il fatto che puoi utilizzare ciascuna delle regole sintattiche citate sopra, non significa che devi
mescolarle tutte insieme. Diventerebbe un incubo gestirle, specialmente in un grosso team.
Il nostro consiglio è di scegliere uno stile che funziona per te e mantenerlo. Non importa quale; Remy
preferisce la sintassi XHTML mentre Bruce preferisce utilizzare il minuscolo, ridurre gli attributi (quindi
controls invece di controls="controls") e citare gli attributi solo quando necessario, come nell’aggiunta
di due classi in un elemento, quindi <div class=important> al posto di <div class="important logged-in">.
Vedrai entrambi gli stili in questo libro, in modo che noi possiamo lavorare nel modo più confortevole e tu
possa essere in grado di leggerli entrambi.
Proprio come un coraggioso autore alle prime armi con HTML5, sei libero di scegliere, ma fatta una scelta,
mantienila.
Perché questa sintassi incredibilmente comprensibile? La risposta
è semplice: i browser non si sono mai curati del fatto che la
sintassi XHTML venisse inviata sotto forma di testo o html, ma il
validator XHTML sì. Pertanto, favorire una forma o l’altra in HTML5
sarebbe completamente inutile e provocherebbe l’invalidità
delle pagine che non seguono quel formato, sebbene possano
funzionare perfettamente in qualunque browser. Così per HTML5
è indifferente il tipo di modulo utilizzato.
Mentre affrontiamo l’argomento delle regole sintattiche
incredibilmente comprensibili (da una prospettiva XHTML),
bariamo e, dopo aver aggiunto il titolo del documento, passiamo
direttamente al contenuto:
<!DOCTYPE html>
<title>Interesting blog</title>
<p>Today I drank coffee for breakfast. 14 hours later,
¬ I went to bed.</p>
Se convalidiamo questo fantastico blog, vedremo che non si
verificheranno problemi, nonostante non ci siano tag <html>,
<head> e <body> (Figura 1.1).
Figura 1.1 Incredibilmente,
senza intestazione, corpo o
tag HTML, il documento viene
convalidato.
28-02-2012 8:43:33
4
H TML5
Questo è forse uno di quei momenti di smarrimento che ho
menzionato nell’introduzione. Questi tre elementi sono (autori
XHTML, siete seduti?) interamente facoltativi, poiché i browser li
assumono in ogni caso. Questo viene confermato esaminando il
browser con Opera Dragonfly (Figura 1.2).
Figura 1.2 Il debugger Opera
Dragonfly mostra che i browser
aggiungono gli elementi
mancanti.
La Figura 1.3 lo dimostra utilizzando gli strumenti di sviluppo di
Internet Explorer 6.
Figura 1.3 Internet Explorer 6,
come tutti gli altri browser,
aggiunge gli elementi mancanti
nel DOM. (Le versioni precedenti
di IE sembrano comunque
scambiare <title> e <meta>.)
Poiché i browser fanno questo, HTML5 non richiede l’utilizzo
di tali tag. Tuttavia, omettere questi elementi dal tag potrebbe
confondere i tuoi collaboratori. Inoltre se prevedi di utilizzare
AppCache (vedi il Capitolo 7), sarà necessario includere l’elemento
<html> nel tag. Imposta qui il linguaggio principale del documento:
<html lang=en>
Un utente non vedente potrebbe esplorare il tuo sito Web
utilizzando un software screen reader che consente di
conoscere il contenuto di una pagina attraverso una voce
sintetizzata. Quando lo screen reader incontra la stringa “six”,
la parola verrà pronunciata in modo differente a seconda che
la lingua sia inglese o francese. Gli screen reader possono
tentare di rilevare il linguaggio del contenuto, ma è molto meglio
definirlo senza ambiguità, seguendo il mio esempio.
28-02-2012 8:43:34
Ca p i to lo 1 : Str u ttu r a p r i nc ipa l e : L’ e l e m e nto < h e a d >
5
IE8 e versioni precedenti richiedono l’elemento <body> prima
di applicare il CSS per definire lo stile degli elementi HTML5,
quindi ha senso utilizzare anche questo elemento.
Quindi, per praticità, aggiungeremo gli elementi facoltativi e
realizzeremo quella che è probabilmente la pagina HTML5
meno realizzabile:
<!DOCTYPE html>
<html lang=en>
<head>
<title>Interesting blog</title>
</head>
<body>
<p>Today I drank coffee for breakfast. 14 hours later,
¬ I went to bed.</p>
</body>
</html>
La convalida rimane un passaggio importante?
Avendo una sintassi così tollerante, possiamo omettere tag impliciti come <html>, <head> e <body>,
e, cosa più importante, poiché HTML5 definisce un DOM consistente per ogni tag errato, ti chiederai
se la convalida continua a essere un passaggio importante. Ci siamo posti la stessa domanda.
La nostra opinione è che la convalida continua a essere un passaggio importante come strumento di
controllo qualità. Non rappresenta in sé un obiettivo, ma un mezzo per raggiungerlo.
L’obiettivo consiste nell’utilizzo di tag semantici: assicurare, quindi, che gli elementi scelti definiscano il
significato del tuo contenuto il più fedelmente possibile e non descrivano la presentazione. È possibile
avere una pagina perfettamente valida costituita da nient’altro che tabelle, div e span, senza alcun valore
semantico; al contrario, un singolo ampersand non codificato può rendere non valida una pagina Web pur
se strutturata semanticamente in modo eccellente, ma rimane comunque una pagina semantica.
Quando guidiamo i team di sviluppo, consideriamo la convalida del codice un passaggio necessario che
deve avvenire prima di qualsiasi revisione, non pensiamo poi all’importanza della pubblicazione del codice.
È un ottimo sistema per garantire che il tuo codice soddisfi pienamente le tue aspettative. Dopo tutto, i
browser possono creare un DOM coerente anche da tag errati, ma potrebbe non essere il DOM desiderato.
Inoltre, gli analizzatori HTML5 non esistono ovunque, di conseguenza garantire pagine valide è quello a
cui dovresti puntare in assoluto per garantire comportamenti prevedibili per CSS e JavaScript.
Consigliamo di utilizzare http://validator.w3.org/ o http://html5.validator.nu. Speriamo di assistere a
ulteriori sviluppi nei validator, come le opzioni sulla scelta automatica del codice in modo che, su avviso,
tu possa scegliere di non utilizzare la sintassi XHTML, per esempio, anche se non viene richiesta dalla
specifica. Uno strumento piuttosto interessante è http://lint.brihten.com, anche se non siamo in grado di
determinare se i processi di convalida utilizzati siano aggiornati o meno.
28-02-2012 8:43:34
6
H TML5
Utilizzare i nuovi elementi
strutturali HTML5
Nel 2004, il redattore delle specifiche HTML5, Ian Hickson,
estrasse un miliardo di pagine Web tramite l’indicizzazione su
Google, per vedere in che modo fosse effettivamente realizzato
il Web. Una delle analisi che ha pubblicato successivamente
(http://code.google.com/webstats/2005-12/classes.html) era un
elenco dei nomi di classe più frequenti in quei documenti HTML.
Più di recente, nel 2009, il crawler Opera MAMA ricercò ancora
gli attributi di classe in 2.148.723 URL scelti a caso e anche gli id
assegnati agli elementi (non inclusi nel set di dati di Google) in
1.806.424 URL. Vedi la Tabella 1.1 e la Tabella 1.2.
Tabella 1.1 Nomi di classi
Popolarità
Valore
1
footer
2
3
Tabella 1.2 Nomi ID
Frequenza
Popolarità
Valore
Frequenza
179.528
1
footer
menu
146.673
2
content
228.661
style1
138.308
3
header
223.726
4
msonormal
123.374
4
logo
121.352
5
text 122.911
5
container
119.877
6
content
113.951
6
main
106.327
7
title
91.957
7
table1
101.677
8
style2
89.851
8
menu
96.161
9
header
89.274
9
layer1
93.920
10
copyright
86.979
10
autonumber1
77.350
11
button
81.503
11
search
74.887
12
main
69.620
12
nav
72.057
13
style3
69.349
13
wrapper
66.730
288.061
14
small
68.995
14
top
66.615
15
nav
68.634
15
table2
57.934
16
clear
68.571
16
layer2
56.823
17
search
59.802
17
sidebar
52.416
18
style4
56.032
18
image1
48.922
19
logo
48.831
19
banner
44.592
20
body
48.052
20
navigation
43.664
28-02-2012 8:43:34
Capitolo 1 : Struttura prin ci pa l e : U t i l i z z a r e i n u ovi e l e m e n t i st r u t t u r a l i HTML 5
7
Come puoi vedere, una volta che rimuoviamo chiaramente
le classi di presentazione, ci rimane un quadro preciso delle
strutture che gli autori tentano di utilizzare nelle loro pagine.
Proprio come HTML4 rappresenta l’iniziale Web di scienziati
e ingegneri (quindi ci sono elementi come <kbd>, <samp> e
<var>), HTML5 riflette il Web nel suo sviluppo: 30 elementi sono
nuovi, molti di essi ispirati dai nomi delle classi e degli id riportati
sopra, poiché è quello il lavoro degli sviluppatori.
Quindi, finché siamo in un clima più pragmatico che filosofico,
utilizziamoli davvero. Ecco un esempio di come la home page
di un blog sia strutturata in tag, come avviene in HTML4 quando
utilizziamo l’elemento <div> semanticamente neutro:
<div id="header">
<h1>La mia interessante vita</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Ultima settimana</a></li>
<li><a href="archive.html">Archivi</a></li>
</ul>
</div>
<div class="post">
<h2>Ieri</h2>
<p>Oggi a colazione ho bevuto un caffè. 14 ore dopo,
¬ sono andato a dormire.</p>
</div>
<div class="post">
<h2>Martedì</h2>
<p>Siccome avevo finito il caffè, a colazione ho bevuto un
¬ succo di arancia concentrato.</p>
</div>
<div id="footer">
<p><small> Copyright di Bruce Sharp. Contattatemi per
¬ negoziare i diritti cinematografici.</small></p>
</div>
Applicando un semplice CSS definiremo uno stile:
#sidebar {float:left; width:20%;}
.post {float:right; width:79%;}
#footer {clear:both;}
28-02-2012 8:43:34
8
H TML5
Graficamente, la pagina appare come nella Figura 1.4.
Figura 1.4 La struttura
HTML4 del nostro blog.
div id="header"
div class="post"
div id=
"sidebar"
div class="post"
div id="footer"
Mentre non c’è niente di sbagliato in questo tag (e continuerà
a funzionare perfettamente nel nuovo ambiente in HTML5), la
maggior parte della struttura è completamente sconosciuta a un
browser, dato che l’unico reale elemento HTML che possiamo
utilizzare per questi importanti punti di riferimento nella pagina
è il <div> semanticamente neutro (definito in HTML4 come “un
meccanismo generico per aggiungere struttura ai documenti”).
Quindi, se viene visualizzato correttamente, che cosa c’è di
sbagliato? Perché utilizzare più elementi per aggiungere una
maggiore semantica?
È possibile immaginare un browser intelligente che con un tasto
di scelta rapida sposti direttamente la pagina. La questione è:
come farebbe a sapere dove andare? Alcuni autori scrivono
<div class="menu">, altri class="nav" o class="navigation" o
class="links" o qualsiasi altro equivalente in lingue diverse
dall’inglese. Le precedenti tabelle con i risultati del crawler
Opera MAMA, suggeriscono che menu, nav, sidebar e navigation
possano essere tutti sinonimi, ma non vi è alcuna garanzia; il
sito Web di un ristorante potrebbe utilizzare <div class="menu">
per indicare la selezione di cibo anziché il menu di esplorazione
della pagina Web.
HTML5 fornisce nuovi elementi che denotano in modo non
ambiguo i punti di riferimento in una pagina. Quindi, riscriveremo
la nostra pagina utilizzando alcuni di questi elementi:
<header>
<h1>La mia interessante vita</h1>
28-02-2012 8:43:34
Capitolo 1 : Struttura prin ci pa l e : U t i l i z z a r e i n u ovi e l e m e n t i st r u t t u r a l i HTML 5
9
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="last-week.html">Ultima settimana</a></li>
<li><a href="archive.html">Archivi</a></li>
</ul>
</nav>
<article>
<h2>Ieri</h2>
<p>Oggi a colazione ho bevuto un caffè. 14 ore dopo,
¬ sono andato a dormire.</p>
</article>
<article>
<h2>Martedì</h2>
<p>Siccome avevo finito il caffè, a colazione ho bevuto un
¬ succo di arancia concentrato.</p>
</article>
<footer>
<p><small>Copyright di Bruce Sharp. Contattatemi per
¬ negoziare i diritti cinematografici.</small></p>
</footer>
Graficamente, la versione HTML5 è mostrata nella Figura 1.5.
Figura 1.5 La struttura
HTML5 del nostro blog.
header
article
nav
article
footer
Prima di vedere in dettaglio quando utilizzare questi nuovi
elementi, e che cosa essi significhino, aggiungiamo uno stile alle
strutture di base della pagina.
28-02-2012 8:43:34
10
H TML5
Ma come mai non ci sono elementi <content>?
È facile vedere come il nostro ipotetico tasto di scelta rapida per passare a nav non funzionerebbe, ma una
richiesta più comune è quella di passare direttamente all’area di contenuto principale. Alcuni progettisti
orientati all’accessibilità aggiungono un collegamento “skip link” proprio all’inizio della pagina, per consentire
alle utilità per la lettura dello schermo di ignorare gli elementi di spostamento. Non sarebbe straordinario se i
browser fornissero un singolo tasto per passare direttamente al contenuto principale?
Inoltre, in HTML5 non c’è un elemento <content> a cui passare, quindi come farebbe un browser a sapere
dove inizia il contenuto principale di una pagina?
Effettivamente è semplice determinare dove si trovi, grazie a quello che io chiamo algoritmo di Scooby
Doo. Sai sempre che la persona dietro la maschera del fantasma sarà il sinistro custode del parco dei
divertimenti abbandonato, semplicemente perché è l’unica persona che appare nell’episodio che non sia
Fred, Daphne, Velma, Shaggy o Scooby. Allo stesso modo, la prima porzione di contenuto che non è in un
<header>, <nav>, <aside> o <footer> è l’inizio del contenuto principale, indipendentemente se è incluso in
un <article>, un <div>, o se è strettamente legato all’elemento <body>.
Questo, per esempio, potrebbe essere utile per gli utenti di screen reader, e i produttori di dispositivi
mobili potrebbero fare in modo che il browser ingrandisca direttamente il contenuto principale.
Se desideri che sia presente un elemento <content> come un hook di stile, puoi utilizzare WAI-ARIA e
aggiungere role=main a qualunque elemento che include il tuo contenuto principale, che fornisce inoltre
un hook di stile tramite i selettori di attributo CSS (non disponibile in IE6), per esempio, div[role=main]
{float:right;} (vedi il Capitolo 2 per ulteriori informazioni su WAI-ARIA).
Lo stile di HTML5 con CSS
In tutti i browser tranne uno, assegnare uno stile a questi nuovi
elementi è piuttosto semplice: puoi applicare CSS a qualunque
elemento arbitrario, poiché come dice la specifica, CSS “è un
linguaggio per i fogli di stile che consente agli autori e agli utenti
di abbinare uno stile [...] ai documenti strutturati (per esempio, i
documenti HTML e le applicazioni XML)” e le applicazioni XML
possono avere tutti gli elementi desiderati.
Pertanto, utilizzando il CSS, possiamo rendere un <nav> mobile,
inserire bordi su <header> e <footer> e aggiungere margini
e spazi interni ad <article> altrettanto facilmente di quanto
facciamo con <div>.
Sebbene ora sia possibile utilizzare i nuovi elementi HTML5,
i browser precedenti non necessariamente li comprendono.
Non ne fanno un utilizzo particolare e li trattano come elementi
sconosciuti creati da te.
Quello che potrebbe sorprenderti è che, per impostazione
predefinita, CSS assume che gli elementi siano display:inline,
di conseguenza se imposti semplicemente l’altezza e la
larghezza agli elementi strutturali come facciamo con <div>,
28-02-2012 8:43:34
Capito lo 1 : Str u ttu r a p r inc ipa l e : Lo sti l e d i HTML 5 c o n CSS
11
non si otterranno gli opportuni risultati nella serie precedente
di browser finché non diciamo esplicitamente al browser che
essi sono display:block. Nei browser esiste un foglio di stile
rudimentale incorporato che ignora lo stile inline predefinito per
quegli elementi che pensiamo come nativi a livello di blocco
(possiamo trovare un esempio di tale foglio di stile nel sito
http://www.w3.org/TR/CSS2/sample.html). I browser precedenti
non hanno ancora regole per definire i nuovi elementi HTML
quali <header>, <nav>, <footer> o <article> come display:block,
quindi sarà necessario specificarle nei nostri CSS. Per i browser
attuali, dobbiamo agire in modo inoffensivo ma ridondante,
quindi da utili assistenti per i browser più datati, che, come tutti
sappiamo, possono durare a lungo dopo la prima diffusione.
Quindi, per dare al nostro HTML5 uno stile che corrisponda alla
struttura di HTML4, abbiamo semplicemente bisogno degli stili:
header, nav, footer, article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:79%;}
footer {clear:both;}
In questo modo è nata una bellissima pagina HTML5, tranne in
un browser.
Definire lo stile di HTML5
in Internet Explorer 6, 7, 8
Nelle versioni precedenti (purtroppo, non ancora inutilizzate) di
Internet Explorer, CSS viene applicato correttamente a quegli
elementi HTML4 supportati da IE, ma i nuovi elementi HTML5
che non vengono riconosciuti dal browser rimangono senza
stile. Il risultato può essere... spiacevole.
Per circuire le versioni precedenti di IE e fare in modo
che applichino il CSS in HTML5, è necessario utilizzare un
JavaScript. Perché? Questo è un segreto, se te lo dicessimo
dovremmo mentire (in realtà, non lo conosciamo). Se aggiungi
il seguente JavaScript nell’intestazione della pagina:
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
come per magia, IE applicherà gli stili a quegli elementi, purché ci
sia un elemento <body> nel tag. Devi solo creare ciascun elemento
una volta, non importa quante volte appaia su una pagina.
28-02-2012 8:43:34
12
H TML5
Ricorda che HTML5 stesso non richiede un elemento body,
diversamente da questa fantastica fusione di Internet Explorer 8
(e versioni precedenti), CSS, HTML5 e JavaScript. IE9 funziona
come gli altri browser e non è necessario utilizzare JavaScript.
Nota Non è più
necessario specificare
nell’elemento <script> il tipo di
script, poiché per impostazione
predefinita si presuppone sia
JavaScript. Questo funziona
anche sui browser datati, quindi
puoi iniziare subito a utilizzarlo.
Sebbene questo JavaScript non sia necessario per gli altri
browser, non provocherà alcun danno. Tuttavia, potresti volere
rendere la tua pagina più veloce e scaricare ed eseguire
questo script in IE accompagnandolo da commenti condizionali
(vedi http://dev.opera.com/articles/view/supporting-ie-withconditional-comments/).
Script di abilitazione
In alternativa, puoi utilizzare il breve script di Remy per abilitare HTML5
http://remysharp.com/2009/01/07/html5-enabling-script/ che lo farà
in un attimo per tutti i nuovi elementi e che include IE Print Protector di
Jon Neal (http://www.iecss.com/print-protector), garantendo che gli
elementi HTML5 vengano visualizzati con lo stile corretto durante la
stampa dei documenti in IE.
Un utente con JavaScript disattivato, per scelta o per politica
di sicurezza aziendale, potrà accedere al tuo contenuto ma
vedrà una pagina parzialmente o totalmente senza stile. Questo
potrebbe portarti o meno a chiudere gli accordi con l’utente (un
utente con la versione precedente di IE, senza alcun JavaScript,
vive un’esperienza Web talmente limitata, che è improbabile
che il tuo sito Web sia il peggiore che abbia incontrato). Simon
Pieters ha dimostrato che, se si conosce il DOM, è possibile
definire in qualche modo gli stili in HTML5 senza JavaScript,
ma ciò non è particolarmente versatile o affidabile; vedi “Styling
HTML5 markup in IE without script” su http://blog.whatwg.org/
styling-ie-noscript.
Problemi riscontrati
in altri browser datati
Nei browser datati si verificano altri problemi quando si definisce
lo stile in HTML5. Le versioni precedenti di Firefox (prima della
versione 3) e Camino (prima della versione 2) riportavano un
bug (vedi http://html5doctor.com/how-to-get-html5-working-inie-and-firefox-2/ in merito a questi problemi).
Noi non ci proponiamo di comporre un elenco completo di
tali comportamenti; sono problemi temporanei e crediamo
si risolvano rapidamente con l’uscita delle nuove versioni e
l’aggiornamento da parte degli utenti.
28-02-2012 8:43:34
Ca pitolo 1 : Struttura prin c ipale : Q ua n d o u t i l i z z a r e i n u ov i e l e m e n t i st r u t t u r a l i HTML5
13
Quando utilizzare i nuovi
elementi strutturali HTML5
Abbiamo utilizzato questi elementi per definire i tag nella nostra
pagina e per applicare lo stile, e sebbene l’utilizzo di ciascuno di
essi potrebbe sembrare immediatamente evidente dai nomi, è ora
di studiarli in modo più approfondito.
<header>
Nell’esempio riportato sopra, come nella maggior parte dei siti,
l’header sarà il primo elemento su una pagina. Conterrà il titolo
del sito, i loghi, i collegamenti che rimandano alla home page e
così via. La specifica afferma che:
“l’elemento header rappresenta un gruppo di aiuti introduttivi
o di spostamento [...] Nota: generalmente un elemento header
contiene l’header della sezione (un elemento h1-h6 o un
elemento hgroup), ma non è obbligatorio. L’elemento header
può anche essere utilizzato per racchiudere il sommario di una
sezione, un modulo di ricerca o qualche logo rilevante”.
Proviamo a scomporlo. La prima cosa da notare è che l’elemento
header non è obbligatorio; nell’esempio citato sopra, risulta
superfluo dal momento che racchiude semplicemente l’elemento
<h1>. Il suo carattere essenziale sta nel raggruppare gli elementi
“introduttivi o di spostamento”. Ecco un esempio più realistico:
<header>
<a href="/"><img src=logo.png alt="home"></a>
<h1>Il mio interessante blog</h1>
</header>
Molti siti Web hanno un titolo e uno slogan o un sottotitolo.
Per mascherare il sottotitolo dall’algoritmo per la definizione
della struttura (in modo da rendere l’intestazione principale e il
sottotitolo in un’unica unità logica; vedi il Capitolo 2 per ulteriori
osservazioni), l’intestazione principale e il sottotitolo possono
essere raggruppati nel nuovo elemento <hgroup>:
<header>
<a href="/"><img src=logo.png alt="home"></a>
<hgroup>
<h1>Il mio interessante blog</h1>
<h2>Pessimismo e fastidio</h2>
</hgroup>
</header>
28-02-2012 8:43:34
14
H TML5
L’intestazione può anche contenere informazioni sui percorsi.
Questo può essere molto utile per esplorare l’intera area del
sito, specialmente su siti realizzati partendo da un modello
dove tutto l’elemento <header> potrebbe provenire da un file
del modello stesso. Quindi, per esempio, lo spostamento in
orizzontale nell’area del sito www.thaicookery.co.uk può essere
codificato come illustrato. Vedi il risultato nella Figura 1.6.
<header>
<hgroup>
<h1>Thai Cookery School</h1>
<h2>Learn authentic Thai cookery in your own home.</h2>
</hgroup>
<nav>
<ul>
<li>Home</li>
<li><a href="courses.html">Cookery Courses</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
FigurA 1.6 Intestazione per
www.thaicookery.co.uk.
Naturalmente, non è necessario che il tag <nav> si trovi
nell’<header>. L’esempio della cucina tailandese si potrebbe
realizzare semplicemente con il tag <nav> principale fuori
dall’<header>:
<header>
<hgroup>
<h1>Thai Cookery School></h1>
<h2>Learn authentic Thai cookery in your own home.</h2>
</hgroup>
</header>
<nav>
<ul>
<li>Home</li>
28-02-2012 8:43:34
15
<li><a href="courses.html">Cookery Courses</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Molto dipende da considerazioni personali, per esempio se
si ritiene la struttura spostamento per l’intero sito come parte
dell’intestazione dell’intero sito, e da considerazioni concrete
sulla facilità di creazione degli stili. Per esempio, osserva il mio
sito personale, con un percorso di spostamento per l’intero
sito sulla parte sinistra dell’area di contenuto molto lungo, e
che potrebbe essere più lungo di un post. Se inserisci questo
<nav> nell’<header>, risulterebbe molto difficile posizionare
correttamente il contenuto principale e avere un piè di pagina,
per cui in questo caso, il percorso di spostamento per l’intero
sito sarebbe fuori dall’<header> e a pari livello del <body> come
nell’esempio seguente (Figura 1.7).
FigurA 1.7 Tipica pagina con
area di esplorazione per l’intero
sito fuori dall’area principale
dell’intestazione.
Nota che ora stiamo creando solo l’<header> principale della
pagina; ci possono essere più <header>, ma lo vedremo nel
Capitolo 2.
<nav>
L’elemento <nav> è concepito per definire i tag di spostamento.
Lo spostamento viene definito come un collegamento di una
pagina (per esempio, un sommario all’inizio di un articolo che
rimanda come destinazione alla stessa pagina) o all’interno
di un sito. Tuttavia, non tutte le raccolte di collegamenti sono
<nav>; un elenco di collegamenti sponsorizzati non è <nav>,
e nemmeno una pagina di risultati della ricerca lo è, come il
contenuto principale della pagina.
28-02-2012 8:43:34
16
H TML5
<nav> o non <nav>?
In passato sono stato accusato di avere una mania per i <nav>, per la necessità di limitare tutti i link ad
altre parti di un sito come <nav>.
Ho cercato di uscirne iniziando a chiedermi chi avrebbe potuto trarre vantaggio dall’utilizzo dell’elemento
<nav>. Prima abbiamo parlato di un tasto di scelta rapida che consentirebbe a un utente che utilizza
tecnologie per l’accesso facilitato di passare direttamente al menu di esplorazione. Se ci fossero
numerosi <nav>, sarebbe difficile per l’utente individuare i più importanti. Quindi, consiglio vivamente di
contrassegnare solo i principali blocchi di esplorazione, come quelli per l’intero sito (o per l’intera sezione)
o i sommari per le pagine molto lunghe.
Una buona regola generale è di utilizzare un elemento <nav> solo se è possibile pensare ai link da
includere nel nav preceduti dall’intestazione “Esplorazione”. Se sono abbastanza importanti da meritare
un’intestazione (a prescindere dal fatto che il contenuto o la struttura richiedano effettivamente
un’intestazione), sono altrettanto importanti per essere racchiusi in un elemento <nav>.
Come dice la specifica “Non tutti i gruppi di link in una pagina devono essere racchiusi in un elemento
nav; tale elemento deve essere utilizzato principalmente per le sezioni che consistono di principali blocchi
di esplorazione”.
Analogamente, la specifica suggerisce che i collegamenti di tipo “legale” (copyright, contatti, libertà di
informazione, privacy e così via) che vengono spesso inseriti nel piè di pagina, non debbano essere
inclusi in un <nav>: “è comune che nei piè di pagina vi sia un breve elenco di collegamenti alle diverse
pagine di un sito, come i termini di servizio, la pagina principale e la pagina dei copyright. L’elemento
footer da solo è sufficiente, e non serve inserire un elemento nav”.
Ti consigliamo di ignorare quanto suggerito dalla specifica; utilizza l’elemento <nav> per questo scopo.
Molti siti, per esempio, includono un collegamento alle informazioni di accessibilità che forniscono
indicazioni su come richiedere le informazioni in altri formati. Generalmente, le persone che richiedono
tali informazioni sono quelle che si affidano maggiormente agli agenti utente in grado di ricavarle
direttamente da tag come <nav>.
Come con gli <header> e i <footer> (e tutti i nuovi elementi),
non devi necessariamente utilizzare un solo <nav> per pagina.
Potresti benissimo avere un <nav> in un’intestazione per l’intero
sito, un <nav> come sommario dell’articolo corrente e un <nav>
sotto che rimanda ad altri articoli correlati presenti nel sito.
I contenuti di un elemento <nav> saranno probabilmente un
elenco di collegamenti, disposti come un elenco non ordinato
(ormai una tradizione a partire dall’influente “CCS Design:
Taming Lists” di Mark Newhouse, http://www.alistapart.com/
articles/taminglists/) o, nel caso di percorsi di esplorazione,
un elenco ordinato. Nota che l’elemento <nav> è un
contenitore, non sostituisce l’elemento <ol> o <ul>, ma
lo contiene. In questo modo, i browser datati che non
riconoscono l’elemento, vedono semplicemente l’elemento
e gli articoli dell’elenco e funzionano correttamente.
28-02-2012 8:43:34
17
Utilizzare un elenco ha senso (e ti offre più hook per il CSS),
ma non è obbligatorio. Il seguente esempio è perfetto:
<nav>
<p><a href="/">Home</a></p>
<p><a href="/about">Informazioni</a></p>
</nav>
Puoi anche inserire intestazioni per l’esplorazione:
<nav>
<h2>Pagine</h2>
<ul>
<li><a href="/about">Informazioni sull'autore</a></li>
<li><a href="/news">Novità</a></li>
</ul>
<h2>Categorie</h2>
<ul>
<li><a href="/happy">Happy Pirates</a></li>
<li><a href="/angry">Angry Pirates</a></li>
</ul>
</nav>
Figura 1.8 La barra laterale
del mio blog (c’era una volta)
che unisce aree di esplorazione,
brevi note sulla produzione e
foto di bei ragazzi.
Nota Prima di
chiudere con disgusto
questo libro, è importante
sottolineare che raramente
esiste One True Way™ per
contrassegnare il contenuto.
HTML è un linguaggio
comune, per cui non ci sono
elementi per ogni caso
specifico (a volte succede)!
Raggruppare i <nav> e altri
elementi in una barra laterale
Molti siti hanno una barra laterale che include più blocchi di
esplorazione e altro contenuto non di esplorazione. Considera
come esempio il mio sito personale www.brucelawson.co.uk
(Figura 1.8).
La barra laterale sulla sinistra del contenuto principale contiene
un’area di esplorazione con sottoelenchi per pagine, categorie,
archivi e i commenti più recenti. Nella prima edizione di questo
libro, ho consigliato di strutturare queste aree tramite una
serie di elementi <nav>; ora ho cambiato idea e suggerisco
di racchiudere i sottoelenchi in un <nav> generale (se sono
presenti due o più blocchi di esplorazione non consecutivi,
utilizza più elementi <nav>).
L’area di esplorazione principale per l’intero sito è contenuta
in un elemento <aside> che “può essere utilizzato per effetti
tipografici come citazioni o intestazioni laterali, per pubblicità,
gruppi di elementi di esplorazione e altri contenuti considerati
separati dal contenuto principale della pagina” (http://dev.
w3.org/html5/spec/semantics.html#the-aside-element).
28-02-2012 8:43:34
18
H TML5
<aside>
<nav>
<h2>Pages</h2>
<ul> ... </ul>
<h2>Categories</h2>
<ul> ... </ul>
<h2>Recent comments</h2>
<ul> ... </ul>
</nav>
<section>
<h2>blah blah</h2>
<a href="...">Web hosting by LovelyHost</a>
<img src="...">
<p>Powered by <a href="...">WordPress</a></p>
<p><a href="...">Entries (RSS)</a> and <a href="...">
¬ Comments (RSS)</a></p>
</section>
</aside>
Nota che la sezione “Blah blah” non è contrassegnata con
<nav>, poiché il collegamento al mio host web, una mia foto e
due collegamenti RSS non mi sembrano essere una “sezione
che consiste di principali blocchi di esplorazione” come la
specifica definisce <nav>. È incluso in una <section> in modo
che le intestazioni della barra laterale rimangano allo stesso
livello nell’algoritmo per la definizione di una struttura (vedi il
Capitolo 2 per altre informazioni).
<footer>
L’elemento <footer>, come indicato nella specifica, rappresenta
“un piè di pagina per i suoi elementi più vicini, ovvero sezione
di contenuto o sezione dell’elemento radice”. (La “sezione di
contenuto” include article, aside, nav e section, e la “sezione
dell’elemento radice” include blockquote, body, details, fieldset,
figure e td).
Nota che, come con l’elemento header, ci possono essere più di
un piè di pagina su una pagina. Lo rivedremo nel Capitolo 2.
Per ora, abbiamo solo un piè di pagina, figlio dell’elemento body.
Come dice la specifica “Quando l’elemento più vicino, sezione di
contenuto o sezione dell’elemento radice, è nell’elemento body,
verrà applicato all’intera pagina”.
La specifica continua dicendo che “generalmente un piè di
pagina contiene informazioni relative alla sezione come l’autore,
28-02-2012 8:43:34
19
i collegamenti ai documenti correlati, i dati di copyright e altre
informazioni simili”.
Il nostro piè di pagina contiene dati di copyright, che possono
anche essere inclusi in un elemento <small>. <small> è stato
ridefinito in HTML5; precedentemente era un elemento di
presentazione, ma in HTML5 dispone di semantiche, che
rappresentano commenti laterali o stampe a caratteri piccoli che
“generalmente delineano dichiarazioni di non responsabilità,
avvertimenti, restrizioni legali o copyright. Inoltre, vengono utilizzate
di frequente per le attribuzioni o per soddisfare requisiti di licenza”.
Il piè di pagina del tuo sito probabilmente ha più di una notifica
legata al copyright. Potresti avere collegamenti per le politiche
di privacy, informazioni di accessibilità (perché nasconderle
altrove?) e altri collegamenti simili. Questi dovrebbero essere
inclusi in un <nav>, contrariamente a quanto consigliato nella
specifica (vedi la precedente sezione <nav>).
La specifica dice che “Alcuni siti presentano quello che spesso
viene chiamato ‘fat footer’, un piè di pagina che contiene
molto materiale, tra cui immagini, collegamenti ad altri articoli,
collegamenti a pagine per l’invio di feedback, offerte speciali [...]
in qualche modo, una ‘pagina principale’ nel piè di pagina”.
Suggerisce un elemento <nav>, all’interno del <footer>, in cui
racchiudere le informazioni.
Quando vuoi utilizzare un “fat footer”, considera se l’elemento
<nav> è davvero necessario; tale elemento può risultare difficile
da eliminare. Inoltre, chiediti se i collegamenti sopra citati fanno
effettivamente parte di un <footer>: non potrebbe trattarsi di un
<aside> dell’intera pagina, allo stesso livello del <footer>?
<article>
Il contenuto principale di questa home page del blog contiene
alcuni post. Li includiamo tutti in un elemento <article>.
<article> viene specificato nel modo seguente: “Una parte
indipendente di un documento, una pagina, un’applicazione
o un sito che è, il linea di principio, disponibile o riutilizzabile
indipendentemente, per esempio nella diffusione su diversi
canali. Può essere un post di un forum, un articolo di una rivista
o un giornale, un intervento in un blog, un commento inviato
dall’utente, un widget o un gadget interattivo, o qualsiasi altro
elemento di contenuto indipendente”.
Un post di un blog, un tutorial, un articolo di cronaca, un
fumetto o un video con la sua trascrizione, si adattano tutti
perfettamente a questa definizione. In modo meno intuitivo,
28-02-2012 8:43:34
20
H TML5
la definizione fa riferimento anche alle singole email all’interno
di un client email basato sul Web, mappe e widget Web
riutilizzabili. Per <article> non pensare a un articolo di giornale,
bensì a un articolo di abbigliamento, un elemento discreto. Nota
che, come con <nav>, l’intestazione fa parte dell’articolo, quindi
va all’interno dell’elemento. Gli esempi seguenti:
<h1>Il mio articolo</h1>
<article>
<p>Bla bla</p>
</article>
sono errati; dovrebbero essere:
<article>
<h1>Il mio articolo</h1>
<p>Bla bla</p>
</article>
Ci sono molti altri aspetti interessanti relativi ad <article> che,
come avrai immaginato, vedremo nel prossimo capitolo.
Qual è il punto?
Un mio saggio amico, Robin Berjon, ha scritto: “Quasi tutti
gli utenti nella community Web concordano sul fatto che le
‘semantiche danno grandi soddisfazioni’ e probabilmente è vero.
Ma se scaviamo un po’ più a fondo, scopriamo che pochissime
persone sono effettivamente in grado di fornire una spiegazione.
“La risposta generale è ‘per adattare i contenuti’. Una risposta
corretta, ma viene subito spontaneo chiedersi ‘Adattarli a che
cosa?’ Per esempio, se desideri visualizzare alcune pagine su
uno schermo di dimensioni ridotte (una forma di adattamento)
<nav> o <footer> ti comunicano che questi frammenti non sono
dei contenuti e possono essere trascurati; andare alla ricerca
di questioni legali all’interno di <footer> con qualche euristica
non ti sarà di grande aiuto...
“Penso che HTML debba aggiungere solo elementi che
offrono funzionalità che altrimenti risulterebbero prive
di significato (per esempio, <canvas>) o che forniscono
semantiche che consentono di adattare i contenuti per
l’utilizzo del browser Web”. (www.alistapart.com/comments/
semanticsinhtml5?page=2#12).
Come suggerisce Robin, i dispositivi con schermo di dimensioni
ridotte potrebbero trascurare le aree prive di contenuto (o
ingrandire le aree di contenuto principale). Toccando o sfiorando
28-02-2012 8:43:35
Ca p ito lo 1 : Str u ttu r a p r inc ipa l e : Ri e p ilo g o
21
lo schermo è possibile ingrandire un’area di esplorazione,
un piè di pagina o un’intestazione. Un motore di ricerca
può considerare i link nel piè di pagina meno importanti di
quelli nella barra di esplorazione. Esistono diversi utilizzi, ma
dipendono tutti dall’assegnazione inequivocabile del significato
del contenuto, che è la definizione di markup semantico.
Riepilogo
In questo capitolo, abbiamo dato una prima occhiata a HTML5 e
al relativo DOCTYPE. Abbiamo strutturato i punti di riferimento di
una pagina Web utilizzando <header>, <footer>, <nav>, <aside>
e <article>, fornendo all’agente utente una maggiore semantica
rispetto al generico e privo di valore semantico <div> che era la
nostra unica opzione in HTML4, e abbiamo aggiunto lo stile ai
nuovi elementi con il fantastico CSS.
Abbiamo visto le sue tolleranti regole sintattiche come l’utilizzo
facoltativo di maiuscole/minuscole, la riduzione di virgolette e
di attributi, l’omissione di elementi impliciti come intestazione/
corpo, l’omissione di elementi standard come type="text/
javascript" e type="text/css" sui tag <script> e <style> e ti
abbiamo persino mostrato come destreggiarti con le versioni
precedenti di IE. Non male per un solo capitolo, eh?
28-02-2012 8:43:35

Capitolo

Transcript

Documenti analoghi

pubcoder annuncia la nuova esportazione in html5 per gli utenti

Introduzione alle principali novità

il futuro della lingua franca del Web

La nuova release, PubCoder 2.0, è da oggi disponibile per utenti

Istruzioni d`uso per i Test on-line

"Princesa De Mi Barrio", il rap italiano si fonde con il

Opzioni della Schermata di scelta del browser

Untitled - Magic Press

Gnocchi di patate alla piemontese Brasato al barolo Patate alla

Sonae Sierra ha registrato un utile netto pari a €16,8 milioni nei