html515
Corso html 5, lezione 15.

Roberto Abutzu su uiciechi.it, 2014-01.

Quindicesima parte: "Sezionare i contenuti".

`**********`

Contenitore di sezionamento dei contenuti.

Nei vari manuali di questo linguaggio e per le specifiche del w3c, spesso si sente parlare di: 
"content model".

Questi sono dei gruppi di elementi che suddividono la nostra pagina o il nostro documento html.

Ne esistono di diversi tipi, come, ad esempio, i meta content, ossia gli elementi come le tag meta, 
che servono alla presentazione e al funzionamento del sito.

Soltanto un esempio, senza dilungarmi troppo nel dettaglio, allo scopo di introdurre i "sectioning 
content".

Cosa sono?

Sono un gruppo di elementi html, creati appositamente e ampliati in questa versione del linguaggio, 
per sezionare in modo più definito i contenuti di un documento.

Ciò agevola l'utente nella navigazione, i browser nella identificazione delle varie aree di una 
pagina, gli sviluppatori nel codice.

Più avanti nel corso analizzeremo meglio i vari gruppi content model spiegandone il funzionamento 
corretto.

Il "sectioning content" è un gruppo del quale ne fanno parte: "Aside, article, nav, section".

Ora riprendiamo alcune tag già citate in precedenza approfondendone la filosofia e spiegandone al 
meglio il loro utilizzo.

Dicevamo che, nella nuova versione di questo linguaggio, lo scopo principale degli sviluppatori è 
stato quello di dare la possibilità di creare una struttura delle pagine web dove i contenuti 
potessero essere ben suddivisi tra loro.

Per esser più chiari, il div id="navigazione", assegnato al menu di navigazione di una pagina, ora 
può essere sostituito dalla tag "nav".

Questo lavoro in passato veniva attribuito alla tag div, alla quale veniva assegnato un 
identificativo univoco. Questa tag è ancora valida per il W3c e viene utilizzata esattamente come 
prima.

Il problema era la presenza di div, dei contenitori di contenuti, che a centinaia riempivano le 
pagine web.

Ora molti di questi div possono essere sostituiti dalle nuove tag che hanno la stessa funzione ma 
che, avendo nomi propri, sono più identificabili, precisando però che non devono essere considerate 
alternative ai div.

E' sbagliato dire che le nuove tag sostituiscono i div, essi possono esistere entrambi, coesistere 
nella stessa area, ed è a discrezione del programmatore deciderne l'utilizzo.

Naturalmente la decisione dell'utilizzo dei Div è anche poi vincolata all'utilizzo dei file css che 
determinano la formattazione e il layout della pagina stessa.

Comunque, vedremo in seguito ulteriori contesti lasciando ad ognuno la libertà di queste scelte.

Ora iniziamo a conoscere queste nuove tag nel dettaglio e nel loro corretto impiego.

Vi ricordo che analizzeremo le tag appartenenti alla struttura della pagina web, i "sectioning 
content".

La tag ``header``.

Per definizione, questa tag è un contenitore di ausili introduttivi e per la navigazione.

Per prima cosa sappiamo che questa Tag conterrà altri elementi al suo interno e non deve essere 
assolutamente considerata come ciò che contiene esclusivamente l'intestazione del sito, di solito 
l'intestazione h1, h2, che riporta il nome e il contenuto del sito stesso.

Viene utilizzata anche in questa posizione in quanto il titolo e il sottotitolo di un sito, di 
solito le prime due intestazioni h1 e h2, vanno considerate come indicazione dei contenuti, quindi 
introduttivi. Consideriamo però che anche in altre aree della pagina potremmo avere contesti con 
intestazioni introduttive.

Un esempio può essere l'articolo di un blog dove all'inizio può essere inserito il titolo, un 
sottotitolo, argomento trattato, ecc...

In tal caso è possibile utilizzare la tag ``header`` per raccogliere intestazioni che introducano 
questi contenuti.

Con questo non si intende che ogni singola intestazione necessiti di questa tag, ma un insieme di 
intestazioni, qualora introducano contenuti possono essere racchiuse in questa tag ``header``.

Facciamo un esempio pratico, ipotizzando di voler inserire nella nostra home page una sezione 
dedicata agli ausili per i disabili visivi. La costruiremo un passo alla volta inserendo e 
spiegando man mano le tag aggiunte.

Vediamo subito la nuova tag: ``aside``.

Significa "di fianco" e serve per contenere dei contenuti complementari al sito. Può contenere 
articoli di un blog, contenuti aggiuntivi, pubblicità, form per la ricerca, ecc..., comunque dei 
contenuti che vogliono essere inseriti ma tenuti separati da quelli principali.

Scriviamo questo codice:

``aside``

``header``

``h1Ausili tiflotecnici/h1``

``h2Strumenti software ed hardware per i disabili visivi/h2``

``h3Specifici per l'utilizzo di un personal computer/h3``

``/header``

``ul``

``liScreen reader/li``

``liSintesi vocale/li``

``liDisplay braille/li``

``liStampante braille/li``

``liSoftware videoingrandente/li``

``/ul``

``/aside``

Abbiamo creato un elenco non ordinato con delle intestazioni iniziali, introduttive all'elenco, con 
degli elementi che indicano poi gli ausili. Il tutto è contenuto in una sezione delimitata dalla 
tag: ``aside``.

Decidiamo di creare dei file, uno per ogni elemento della nostra lista. Non li creeremo realmente 
ma ipotizzando di doverlo fare, faremo diventare dei link gli elementi all'interno della nostra 
lista. Aggiungeremo poi una intestazione e un paragrafo come contenuti.

Ecco il codice:

``aside``

``header``

``h1Ausili tiflotecnici/h1``

``h2Strumenti software ed hardware per i disabili visivi/h2``

``h3Specifici per l'utilizzo di un personal computer/h3``

``/header``

``ul``

``lia href="Screen.html"screen reader/a/li``

``lia href="sintesi.html"sintesi vocali/a/li``

``lia href="display.html"display braille/a/li``

``lia href="stampante.html"stampanti braille/a/li``

``lia href="videoingrandente.html"software videoingrandenti/a/li``

``/ul``

``h2Ausili/h2``

``pIn queste pagine potrete recuperare informazioni dettagliate sugli ausili tiflotecnici per 
disabili visivi.br /Queste informazioni vengono curate e seguite da Nunziante Esposito e Roberto 
Abutzu./p``

``footer``

``dl``

``dtCreated by: /dt``

``ddNunziante/dd``

``dtweb master/dt``

``ddRoberto Abutzu/dd``

``/dl``

``/footer``

``/aside``

La cosa che più si nota in questo codice appena scritto è che è comparsa la tag footer. Questo 
perché questa tag non è esclusiva del piè di pagina del sito ma può essere utilizzata anche in 
altri contesti, purché racchiuda contenuti inerenti all'autore di quelli precedenti, del copyright, 
accordi di licenza, ecc. In questo caso ho voluto riportare i dati di chi genera le pagine sugli 
ausili e li ho inseriti in un piè di pagina, appartenente alla sezione "aside".

Un altro contesto in cui è possibile utilizzare il footer è negli articoli di un blog, magari 
volendo inserire l'autore e la data di un determinato articolo, alla fine dell'articolo stesso.

Ora procediamo con la costruzione di questa area Aside inserendo delle altre tag.

Scriviamo questo codice:

``aside``

``header``

``h1Ausili tiflotecnici/h1``

``h2Strumenti software ed hardware per i disabili visivi/h2``

``h3Specifici per l'utilizzo di un personal computer/h3``

``nav``

``h2menu di navigazione complementare/h2``

``ul``

``lia href="Screen.html"screen reader/a/li``

``lia href="sintesi.html"sintesi vocali/a/li``

``lia href="display.html"display braille/a/li``

``lia href="Stampante.html"stampanti braille/a/li``

``lia href="videoingrandente.html"software videoingrandenti/a/li``

``/ul``

``/nav``

``/header``

``section``

``h2Ausili/h2``

``pIn queste pagine potrete recuperare informazioni dettagliate sugli ausili tiflotecnici per 
disabili visivi.br /Queste informazioni vengono curate e seguite da Nunziante Esposito./p``

``/section``

``footer``

``dl``

``dtCreated by: /dt``

``ddNunziante Esposito/dd``

``dtWebmaster/dt``

``ddRoberto Abutzu/dd``

``/dl``

``/footer``

``/aside``

Verifichiamo il codice e notiamo che ho inserito una tag ``nav`` con la sua intestazione. Anche 
questa tag, che per definizione indica un menu di navigazione, non è da ritenersi esclusiva del 
menu di navigazione del sito. Infatti, la nav indica un menu di collegamenti, una serie di link che 
insieme permettono di navigare in determinati contenuti.

Quindi, in questo contesto, la "nav" permette di poter navigare all'interno della sezione contenuta 
nella "Aside" che riporta contenuti e pagine diverse sugli ausili.

Da notare che, avendo aggiunto la tag "nav", ho spostato la chiusura della tag "header". Questo 
perché, come riportato sopra, questa tag contiene elementi di introduzione e navigazione. La "nav" 
è un elemento di navigazione e quindi può essere contenuta al suo interno.

Se vi ricordate o andate a vedere, nelle lezioni precedenti avevamo inserito la tag "nav" come il 
contenitore dei collegamenti principali del sito.

Anche questo non è obbligatorio, o meglio, non è obbligatorio inserire la "nav" subito dopo le 
intestazioni principali del sito, h1, h2, ma, a seconda del layout, il menu di navigazione può 
essere posizionato anche in altre aree del documento.

Inoltre c'è da dire che, qualora non servisse, non è obbligatorio inserire la tag "nav" all'interno 
di una "header".

Vi sarete sicuramente accorti che ho inserito anche una nuova tag: ``section``. Questo è un 
contenitore a se stante e identifica un'area precisa di una pagina. Da tenere presente che questa 
tag deve avere obbligatoriamente un titolo ed una intestazione.

La gerarchia delle intestazioni contenute nella "section" non viene influenzata dalle gerarchie del 
documento. Significa che i vari livelli di intestazioni contenuti all'interno della "section", 
appartengono solo all'area delimitata dalla stessa.

Ecco un esempio di codice:

``section``

``h2titolo della sezione/h2``

``ptesto contenuto/p``

``/section``

``section``

``h2titolo 2/h2``

``paltri contenuti/p``

``/section``

``section``

``h2terzo titolo/h2``

``pulteriori contenuti/p``

``/section``

Grazie a questa suddivisione con le sezioni, ora è più semplice assegnare le intestazioni che 
vogliamo a dei contenuti specifici. Riassumendo, ogni intestazione all'interno di una sezione fa 
fede solo alla sezione e non all'intero documento. Volendo, è possibile inserire queste sezioni 
all'interno di una ulteriore sezione ricordandosi di inserire l'intestazione.

Il codice sarà scritto in questo modo:

``section``

``h1contenuti/h1``

``section``

``h2primo titolo/h2``

``pprimo contenuto/p``

``/section``

``section``

``h2secondo titolo/h2``

``psecondo contenuto/p``

``/section``

``/section``

Ogni volta che uno screen reader incontra una sezione, la identifica come regione.

Ora introduciamo la tag: "article" che viene utilizzata spesso nei blog o comunque per riportare 
articoli, ricette e altri contenuti simili. Ma attenzione a non pensare che serva solo ad articoli 
veri e propri.

Anche questa tag può essere considerata una Section ma è più specifica. Anche in questa occasione è 
a discrezione del programmatore deciderne l'utilizzo.

Ecco alcuni esempi:

``section``

``section``

``h1Articoli sul gran premio di Monza di f1/h1``

``article``

``h2ordine di arrivo/h2``

``ptesto/p``

``/article``

``article``

``h2classifica finale/h2``

``ptesto/p``

``/article``

``/section``

``section``

``h1commenti/h1``

``article``

``pcommento/p``

``/article/p``

``article``

``psecondo commento/p``

``/article``

``/section``

``/section``

Oltre ad aver inserito gli articoli nelle loro tag, ho suddiviso i commenti dai contenuti in due 
sezioni separate, tutte contenute a loro volta in una unica sezione dato che trattavano gli stessi 
contenuti. Volendo era anche possibile inserire una nuova "section", dove inserire il form per 
scrivere un nuovo commento.

Le tag article possono essere annidate tra loro, una dentro l'altra, purché trattino gli stessi 
contenuti. In questo caso si parla di tag figli e di elemento padre e, in caso si voglia inserire 
un "footer", questo va inserito una volta sola nell'elemento padre, il primo article.

Provate a creare nella vostra index o nelle vostre sottopagine queste condizioni, provando anche a 
cambiare il layout delle pagine stesse. Rivedremo in futuro queste tag quando affronteremo i form, 
quegli elementi html dove è possibile scrivere, selezionare da una tendina, premere un pulsante.

In questa parte ho voluto riprendere situazioni già analizzate ma ritengo importante spesso 
rivedere alcuni concetti nello specifico proprio per poter, in futuro, mettervi in condizione di 
scrivere delle pagine belle e corrette.

Ognuno è libero di decidere il proprio template, la forma che avrà la pagina, ne può creare di 
diversi, ma per farlo correttamente è necessario conoscere tutte le possibilità e le condizioni 
alternative degli elementi html 5.

Vi rimando alla prossima lezione per approfondire questo discorso ed imparare nuove tag.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_