1 la nuova specifica html 5 by Corso Grafica e Web Design

HTML 5

Introduzione all’HTML 5 Le specifiche tecniche della recente versione 5 dell’HTML non solo supportano il markup tradizionale dell’HTML e la sintassi specifica dell’XHTML, ma aggiungono anche alle “regole” preesistenti un’ampia gamma di nuove caratteristiche per l’implementazione delle pagine web. L’HTML 5 infatti dovrebbe supportare con più efficacia ciò che è già implementato nei browser, per ovviare agli eventuali problemi di compatibilità delle pagine web con questi, andando a descrivere con più precisione il modo in cui il markup dovrà essere interpretato.

Le nuove specifiche HTML 5 La sintassi specifica dell’HTML 5 non appare in maniera diversa dalla comune sintassi dell’(X)HTML e pertanto dovrebbe a questo punto risultare già abbastanza familiare. Detto questo un semplice codice in HTML 5 dovrebbe avere il seguente aspetto: <!DOCTYPE html> <html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> HTML 5</title> </head> <body> <h1> HTML 5</h1> <p>Benvenuti nel Markup del futuro!</p> </body> </html>

In realtà tutto ciò che in questo esempio differisce rispetto allo “standard” HTML già conosciuto è l’istruzione <!DOCTYPE>. Naturalmente, nonostante la recente “release” di questa versione del linguaggio, i browser attuali interpreteranno il codice indicato in maniera corretta, come se si trattasse di un sorgente in HTML 4 o XHTML.

Come indicato dalla sua istruzione “atipica” <!DOCTYPE>, l’HTML 5 non viene definito come un’applicazione XML o SGML (Standard Generalized Markup Language). Dal momento che l’HTML non ha le sue basi nelle applicazioni SGML/XML, non esiste per questa versione del linguaggio di markup il concetto di convalida. Un programma in HTML5 viene infatti controllato secondo la sua conformità alle specifiche tecniche, processo che ha lo stesso valore pratico della convalida. Consideriamo ad esempio il seguente codice con un markup errato.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; <title>Esempio errato di HTML 5</title> </head> <body> <!â&#x20AC;&#x201D;notare, al di sotto, il tag di chiusura sbagliato --> <h1>Salve Malformato HTML5<h1> <!â&#x20AC;&#x201D;tag sconosciuto di seguito -->

charset=utf-8">

<p>Benvenuti nel <errore>futuro</errore> del markup!</p> <!—manca la chiusura </body> --> </html>

Dal momento che viene usato dall’HTML 5 un diverso <!DOCTYPE> il browser visualizzerà il documento (anche con tutti gli errori) utilizzando una modalità più vicina agli standard attuali con le seguente visualizzazione finale.

Regole sintattiche flessibili Un aspetto interessante dell’HTML 5 è il grado di variabilità sintattica che consente. Diversamente dal suo “parente” più stretto, che è l’XHTML, è consentito un maggior grado di variabilità.

A dimostrazione di ciò nell’esempio successivo gli apici non sempre vengono impiegati, gli elementi principali come html, head e body non sono inclusi, l’inferenza dei tag di chiusura come </p> e </li> è consentita e le maiuscole e le minuscole vengono usate in modo vario. Esempio

<!DOCTYPE html> <!—Non ho gli elementi html, head, o body dal momento che sono opzionali -->

trova

markup

charset=utf-8"> estremamente

<p id=p1>Ritorno ad un markup variabile!? <p>Sembra proprio cosĂŹ! <ul> <li>elementi opzionali <LI>maiuscole e minuscole non sono un problema (sembrerebbe un markup non case-sensitive!)

<li id=senzapici>in molti casi gli apici per i valori degli attributi sono opzionali <li>I tag di chiusura non sono strettamente necessari </UL> <p>Diversiâ&#x20AC;Ś <br> <br /> <p> stili di markup!

Output

Tuttavia il precedente esempio non significa che l’HTML 5 consenta un markup in tutti i casi così libero. Alcuni di questi “errori” infatti sono già “concessi” anche nell’uso del tradizionale HTML e pertanto vengono consentiti anche nell’utilizzo dell’HTML 5. Per procedere conformemente alle specifiche tecniche dell’HTML 5, bisogna invece rispettare i seguenti elementi:  E’ sempre importante annidare correttamente gli elementi, non incrociandoli;

ad esempio la sintassi <b><i> … </b></i> è errata dal momento che incrocia i tag. Al contrario la sintassi seguente <b><i> … </i></b> non contiene un errore dal momento che i tag presenti sono annidati correttamente.  Inserire gli apici per i valori di attributo quando questi non sono valori ordinali e soprattutto se contengono caratteri speciali e/o spazi particolari, come nell’esempio seguente: <p id=p1>Il valore va bene anche senza apici</p>

Dal momento che si tratta di un semplice valore di attributo; al contrario: <p title=funziona un po’ poco senza apici>Bisogna usare gli apici per racchiudere il valore!</p>  Utilizzare correttamente le tipologie dei “contenuti” in uso. <li>Dovrei essere utilizzato all’interno di una lista!</li> L’esempio riportato sopra non è corretto. Gli elementi devono rispettare il loro modello di contenuto, pertanto il codice precedente dovrebbe essere letto come:

<ul><li>Nessun errore! Vengo utilizzato all’interno di una lista!</li></ul> Questa è la sintassi corretta secondo l’HTML 5.  Non usare tag inventati a meno che essi non siano inclusi in qualche altro linguaggio di markup.  Codificare i caratteri speciali, soprattutto quelli usati nei tags(< >), come entità di tipo &lt (letterale) o come valori numerici del tipo &#60;

Questa breve lista fornisce brevemente le “regole” di base, fondamentali secondo gli standard specifici dell’HTML 5. Questo indica che se voi avete già “programmato” correttamente seguendo le precedenti sintassi dell’HTML 4, l’HTML5 non necessiterà grandi cambiamenti. Infatti in molti casi cambiando soltanto il “doctype” di un documento già valido nel nuovo e semplice <!DOCTYPE html> dell’HTML5, il risultato dovrebbe essere comunque un documento conforme all’HTML5.

XHTML 5

Per chi ha già adottato una sintassi XHTML rigorosa, è allo stesso modo possibile passare all’HTML5. Se nella realizzazione delle pagine si vuole perseguire un approccio più vicino all’“XML”, il nuovo HTML5 consente comunque un rapido passaggio. Considerate ad esempio il seguente codice, originariamente in XHTML che ora viene “trasformato” per rispondere ad uno “standard” più vicino all’HTML 5.

<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Un codice XHTML5</title> </head> <body> <h1>Benvenuti nel Mondo dell’XHTML 5</h1> <hr /> <p>l’XHTML5 <em>non</em> è difficile!</p> <p>l’HTML5 è vicino anche alla sintassi XML.</p>

<p>Assicuratevi di presentarlo con il corretto tipo MIME!</p> </body> </html>

N.B. Quando si usa la sintassi XML con lâ&#x20AC;&#x2122;HTML 5, secondo le specifiche tecniche e sintattiche dellâ&#x20AC;&#x2122;HTML 5, allora si sta utilizzando un linguaggio di tipo XHTML5. Si noti inoltre che il precedente esempio implica la realizzazione di un file con estensione .xhtml e non .html

Sfortunatamente, sebbene l’HTML 5 supporti l’XML, il reale valore dell’XHTML (cioè il rigore dell’XML), non è stato ancora implementato vista la carenza attuale di un browser di supporto. Pertanto, all’attuale stadio di sviluppo, l’HTML 5 consente solamente in teoria l’utilizzo dell’XHTML, nella speranza che un domani la compatibilità diventi effettiva.

L’HTML 5 e la sua validità E’ interessante notare che allo stesso attuale, nel campo del web development, un markup conforme alle specifiche tecniche è più l’eccezione che la regola. E’ proprio la natura “permissiva” dei browser, che analizzano questi improbabili insiemi di diversi codici HTML, ad aiutare realmente la crescita del Web dal momento che abbassa le barriere di ingresso per i nuovi developer che si avvicinano ora agli standard.

Proprio a questo riguardo, l’HTML 5 fornisce un grande contributo: questo linguaggio stabilisce cosa fare quando si incontrano problemi con la sintassi di markup generale. L’HTML 5 comunica ai browser come analizzare sia i markup corretti sia quelli con una sintassi errata. Inoltre tramite l’HTML 5 il markup verrà utilizzato per supportare al meglio le applicazioni per il web dal momento che come sappiamo le pagine non sono composte solamente da semplici documenti.

Presentazione del nuovo Markup Con lâ&#x20AC;&#x2122;HTML 5 verranno rimossi numerosi elementi ed attributi, comunemente usati in precedenza. La tabella successiva presenta proprio gli elementi attualmente catalogati per essere poi definitivamente rimossi dallâ&#x20AC;&#x2122;HTML 5, nel corso della sua evoluzione e diffusione. Gli elementi soggetti alla rimozione continueranno comunque ad essere supportati dai browser per qualche tempo ancora.

Elementi HTML 4, oggetti di prossima â&#x20AC;&#x153;rimozioneâ&#x20AC;? nellâ&#x20AC;&#x2122;HTML 5

Possibili equivalenti negli stili CSS

body {font-family: family; font-size: size;}

<big>

font-size: larger

text-align: center o margin: o dipendente dal contesto

<font>

font-family, font-size, or font

text-decoration: strike

<tt>

font-family: monospace

<u>

text-decoration: underline

La tabella successiva presenta invece quegli elementi che non diventeranno obsoleti ma che in HTML 5 cambieranno di valore o significato, generando pertanto un nuovo output.

Le tabelle seguenti non presentano delle liste complete degli elementi e degli attributi non conformi, ma solo di quelli che sono generalmente supportati nelle specifiche dellâ&#x20AC;&#x2122;HTML 4 e dellâ&#x20AC;&#x2122;XHTML 1.

Elementi HTML

Nuovo significato in HTML5

<dd>

Viene usato con i nuovi elementi dell’HTML 5 “details” and “figures” per definire il testo contenuto.

<dt>

Viene usato con i nuovi elementi dell’HTML 5 “details” and “figures” per riassumere i dettagli.

<hr>

Ora rappresenta un’interruzione tematica piuttosto che un righello orizzontale.

<small>

Rappresenta dei caratteri di testo più piccoli, da usare nei commenti e nelle clausole legali.

Serve a rappresentare lâ&#x20AC;&#x2122;importanza del testo scritto piuttosto che una sua forte enfatizzazione tramite il tipo di carattere tipografico impiegato.

Attributi Rimossi

Elementi Coinvolti

ProprietĂ equivalenti in CSS

align

caption, col, colgroup, div, iframe, text-align h1, h2, h3, h4, h5, h6, hr, img, input, legend, object, p, table, tbody, td, tfoot, th, thead, tr

alink

body

a:active

{color:

color-value;} background

body

background-image background

bgcolor

body, table, td, th, tr

background-color

border

img, object, table

border-width e/o border

cellpadding

table

padding

cellspacing

table

margin

char

col, colgroup, table, tbody, td, nd tfoot, th, thead, tr

charoff

col, colgroup, table, tbody, td, nd tfoot, th, thead, tr

clear

compact

dl, menu, ol, ul

margin

frame

table

border

frameborder

iframe

border

height

td, th

height

hspace

img, object

margin

link

body

body a:link {color: colorvalue;}

marginheight

iframe

margin

marginwidth

iframe

margin

noshade

border-style o border

nowrap

td, th

overflow

rules

table

border

scrolling

iframe

overflow

size

width

text

body

body {color: value;}

type

li, ol, ul

list-style-type e list-style

valign

col, colgroup, tbody, td, tfoot, th, vertical-align thead

vlink

body

body a:visited color-value;}

color-

{color:

width

Elemento rimosso

col, colgroup, hr, pre, table, td, th

width

Motivo della rimozione

Alternative

acronym

Non compreso da molti sviluppatori del Usare Web l’elemento abbr

applet

Sintassi obsoleta per applicazioni in Java

frame

Problemi di utilizzazione e di accessibilità

Utilizzare i CSS per il posizionamento.

frameset

Problemi di utilizzazione

Utilizzare i CSS

l’utilizzo

delle Usare l’elemento object

per il posizionamento. noframes

Dal momento che i frame non sono più nd supportati, questo elemento contingente non è ovviamente più richiesto

I Nuovi Elementi in HTML 5 Per la maggioranza degli autori di pagine Web l’inserimento di nuovi elementi rappresenta l’aspetto più interessante dell’HTML5. Alcuni di questi elementi non sono ancora supportati, ma già molti browser implementano alcuni dei più interessanti.

La tabella successiva riassume gli elementi aggiunti nella nuova specifica HTML 5. Nuovo elemento

Descrizione

article

Inserisce un sottoinsieme di un documento per formare una parte di contenuto indipendente, come ad esempio una pubblicazione su un blog, un articolo o un’unità di informazione distinta.

aside

Include un contenuto che è collegato a fianco di un altro all’interno di un capitolo.

audio

Specifica l’audio attivato in una pagina Web.

canvas

Definisce una regione da usare per un’illustrazione bitmap, utilizzando il Java Script.

command

Collocato all’interno di un elemento del “menu”, definisce un commando che un utente può invocare.

details

Definisce un contenuto addizionale che può essere visualizzato a richiesta.

figure

Definisce un gruppo di contenuti che dovrebbe essere usato come un numero e può essere etichettato da un elemento della didascalia

footer

Rappresenta il piè di pagina di un capitolo o di un documento intero e che probabilmente contiene anche informazioni di contenuto aggiuntive.

header

Rappresenta l’intestazione di un capitolo o del documento e contiene

un’etichetta o altra informazione per il contenuto correlato. hgroup

Gruppi di elementi per l’intestazione (h1—h6) da utilizzare per sottotitoli o per capitoli

mark

Indica un testo da mettere in evidenza.

nav

Include un gruppo di link che servono come indice del documento o direttamente alla navigazione del sito

section

Definisce una sezione generica di un documento e può contenere sia la sua propria intestazione che il suo piè di pagina.

time

Include un contenuto che rappresenta una data e/o un’ora.

video

Include un video (e i controlli ad esso associati) in una pagina Web.

I Nuovi Attributi dell’HTML 5 Un aspetto abbastanza importante dell’HTML5 è anche l’introduzione di nuovi attributi. Le tabelle successive forniscono una breve anteprima di questi attributi. Alcuni di loro, come “reversed” che si usa nell’ordinamento delle liste ,(<ol>), a breve potranno essere ufficialmente impiegati. Nuovo attributo accesskey

Descrizione Definisce i tasti di scelta rapida che devono essere usati sulla tastiera per accedere ad un elemento.

contenteditable

Quando ha valore “true” il browser dovrebbe consentire all’utente di editare il contenuto dell’elemento.

draggable

Se specificato dovrebbe consentire il trascinamento del suo contenuto

hidden

Nell’HTML 5 tutti gli elementi possono avere un attributo “hidden” che indica la non-rappresentazione del dato elemento Questo attributo è simile alla proprietà CSS “display” associata al valore “none”.

tabindex

Definisce l’ordine degli elementi di collegamento quando la tastiera viene utilizzata per la navigazione all’interno della pagina.

Cambiamenti di Struttura in un Documento HTML5 Come abbiamo già visto la struttura di un documento HTML 5 risulta abbastanza uguale a quella già vista dell’HTML 4, fatta eccezione per una piccola differenza nell’istruzione <!DOCTYPE>. Tuttavia nell’HTML5 la struttura del documento viene in realtà un po’ espansa. I documenti in HTML5 possono contenere un elemento aggiuntivo di intestazione, che viene usato per definire il titolo di un capitolo all’interno di un documento. Per questo un elemento di struttura header spesso contiene gli elementi di titolatura standard da h1 a h6 come nell’esempio seguente.

<header> <h1>Benvenuti nel mondo dell’HTML5</h1> <h2>Introduzione all’HTML 5 </h2> </header> Allo stesso modo un nuovo elemento di “piè di pagina” (elemento footer) è ora a disposizione degli autori per definire il contenuto di “fondo” di un documento, come evidenziato nell’esempio successivo.

<footer> <p>Il contenuto di questo esempio non è protetto da copyright</p> </footer>

Il contenuto effettivo deve essere collocato in un tag <footer> e, naturalmente potrà essere incluso all’interno di un “div”, un “p”, o altri elementi di blocco, come illustrato dal seguente semplice esempio:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; <title>Esempio di Intestazione e footer in HTML5</title> </head> <body> <header> <h1>Introduzione allâ&#x20AC;&#x2122;HTML 5.</h1> <h2>la nuova struttura</h2>

charset=utf-8">

</header> <p>Una parte del contenuto del body si trova qui.</p> <p>Una parte del contenuto del body si trova qui.</p> <footer> <p>Il contenuto di questo esempio Ă¨ prodotto da me!</p> </footer> </body> </html>

L’elemento strutturale dell’HTML5 di maggior utilizzo è senz’altro l’elemento “section”. Un particolare tag “section” può infatti essere usato per raggruppare diversi contenuti insieme e può contenere ulteriori tag <section> annidati, per creare delle sottosezioni. L’esempio, qui di seguito, illustra l’uso di base delle “sezioni” dell’HTML5.

<section> <h1>Capitolo 1</h1> <p>Nuovi elementi dellâ&#x20AC;&#x2122;HTML5.</p> <section> <h2>Elementi specifici di una struttura HTML5</h2> <p>Questi elementi sono utili per creare delle strutture interne ad un documento</p> <section> <h3> Annidare gli elementi correttamente!</h3> <p>Eâ&#x20AC;&#x2122; possibile annidare gli elementi di sezione come in questo codice dâ&#x20AC;&#x2122;esempio</p> </section>

</section> <p>Fine della struttura d’esempio </p> </section>

Un elemento “section” può contenere anche dei propri elementi “header” e “footer”: <section> <header> <h1>Questa è l’intestazione di questa sezione</h1>

</header> <h2>Questa parte è fuori della sezione header. Rappresenta solo un semplice titolo.</h2> <p>Il contenuto di questa sezione potrebbe essere inserito qui.</p> <footer> <p>Qui c’è il footer di questa sezione del documento</p> </footer> </section>

L’HTML5 usa intestazioni ed elementi appena introdotti come l’elemento “section” per strutturare i documenti. L’esempio seguente mostra un documento strutturato in maniera più ampia, con numerose sezioni, intestazioni, piè di pagina, articoli e contenuto. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Esempio di struttura interna di documento HTML 5</title>

</head> <body> <header> <h1>Benvenuti nel Mondo dellâ&#x20AC;&#x2122;HTML5!</h1> <h2>Introduzione</h2> </header> <section id="capitolo1"> <header> <h1>Capitolo 1</h1> </header> <p>Introduzione al capitolo ...</p>

<section id="ElementiStruttura"> <header> <h2>Nuovi Elementi di Struttura</h2> </header> <h3>Elemento header</h3> <p>Descrizione elemento header.</p> <h3>Elemento footer</h3> <p>Descrizione elemento footer</p> <h3>Divisione in sezioni</h3> <p>Descrizione elemento section</p> </section>

<section id="AltriElementi"> <header> <h2>Ancora sui nuovi elementi dellâ&#x20AC;&#x2122;HTML 5</h2> </header> <h3>esempio</h3> <p>descrizione</p> <footer> <p>Le nuove specifiche dellâ&#x20AC;&#x2122;HTML 5</p> </footer> </section> </section>

<section id="capitolo2"> <header> <h2>Capitolo 2</h2> </header> <p>Elementi avanzati</p> </section> <footer> <p>Il contenuto Ă¨ prodotto da â&#x20AC;Ś</p> </footer> </body> </html>

Browser compatibili con l’HTML 5 dovrebbero utilizzare questo markup e definire quindi una struttura basata sull’uso di intestazioni (header) e sezioni per identificare le parti di contenuto. L’HTML5 introduce numerosi altri elementi “strutturali”. Ad esempio l’elemento “article” viene usato per definire un’unità distinta con un contenuto come un messaggio sul blog, un commento, un articolo e così via. Il seguente documento definisce alcuni messaggi individuali sul blog:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Esempio articolo dell’HTML5</title> </head> <body> <header> <hgroup> <h1>Benvenuti nel mondo dell’HTML5</h1> <h2>Primi Passi</h2>

</hgroup> // Viene generalmente utilizzato per raggruppare elementi di contenuto come i titoli delle varie parti di un documento. Ovviamente il suo utilizzo Ă¨ strettamente collegato alle esigenze organizzative dei contenuti delle pagine. </header> <section id="elenco1"> <h2>Ultime Notizie</h2> <article id="articolo1"> <h2>Le nuove tendenze nel campo del web design</h2> <p>Testo dellâ&#x20AC;&#x2122;articolo</p> </article> <article id="articolo2"> <h2>HTML 5 si o no?</h2>

<p>Testo dell’articolo </p> </article> <article id="articolo3"> <h2>L’elemento article</h2> <p>Qui va il contenuto dell’articolo...</p> </article> </section> <footer> <p>Autore</p> </footer> </body> </html>

L’HTML 5 introduce anche un nuovo elemento “aside” che può essere utilizzato all’interno del contenuto per rappresentare una parte aggiuntiva che è in qualche modo connessa al medesimo. E’ bene ricordare che gli elementi “aside” fungono da elementi per la suddivisione in sezioni della struttura.

Elementi semantici Molti degli elementi che l’HTML 5 aggiunge e che possono essere usati immediatamente sono naturalmente ricchi di significato.

In questo senso, l’HTML 5 persegue l’obiettivo di separare la struttura dallo stile.

Evidenziare il testo in HTML 5 Il nuovo elemento “mark” dell’HTML 5 è stato introdotto per evidenziare il contenuto di testo racchiuso in maniera simile ad un evidenziatore sulle pagine di un libro. Il seguente esempio contrassegna utilizza alcune importanti parole:

<p>Di seguito si trova <mark>un testo evidenziato.</mark> tramite l’elemento mark</p>

Tuttavia la semplice sintassi riportata non mostrerà il testo come se fosse evidenziato in un dato colore. Per “attivare” il valore “semantico” dell’elemento mark è infatti necessario associargli uno stile in linea, secondo una sintassi che già conosciamo, visibile nel seguente codice:

<p>I nuovi elementi “semantici” dell’HTML 5. Il seguente testo è evidenziato con l’elemento <mark style="background-color: red;"> mark </mark> in rosso <mark style="background-color: green;">e in verde </mark>. Per visualizzare l’evidenziazione è necessario utilizzare la proprietà background-color come risulta anche nel seguente output! </p>

Indicare Data ed Ora Un altro elemento semantico in linea, “time”, è stato introdotto in HTML 5 per indicare con un aspetto specifico una data e/o un orario. Esempi: <p>Oggi è il <time> 07-08-2012 </time> giorno del mio compleanno </p> <p> Data e ora di nascita di mio fratello: <time>10-10-2000, 03:00:00 </time>!</p>

Similmente a “mark” l’elemento “time” non ha una rappresentazione predefinita; pertanto sarà possibile definire il suo aspetto usando i CSS

Inserire Immagini Nell’elaborazione della sintassi dell’HTML3 venne introdotto l’elemento “fig” per l’inserimento di immagini in linea nei documenti HTML. L’HTML 5 riprende questa vecchia “idea” elaborandola in maniera più appropriata tramite il nuovo elemento “figure”.

Esempio: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Elementi Semantici HTML 5</title> </head> <body> <h3>Elemento semantico figure</h3> <figure id="drago1"> <dd>

<img src="Drago1.jpg"> <p>Il nuovo elemento figure dellâ&#x20AC;&#x2122;HTML 5!</p> </dd> <dt>Caratteristiche della figura dâ&#x20AC;&#x2122;esempio</dt> </figure> </body> </html>

Output

Agendo come un elemento semantico, “figure” raggruppa semplicemente gli elementi in un tag allegato <dd>, in modo da associarli ad una didascalia, definita dal tag <dt> come mostrato nell’esempio precedente. Possiamo ovviamente conferire uno stile specifico anche al tag “figure” sempre tramite i CSS.

Specifiche di Navigazione Un nuovo elemento dell’HTML 5, atteso da tempo, è l’elemento “nav”. Il compito di questo elemento è quello di incorporare un gruppo collegamenti per formate una raccolta di link esterni, spesso utili per la navigazione del sito. Esempio: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Elementi Semantici HTML 5</title>

</head> <body> <h3>Elemento nav</h3> <nav> <h2>Links Esterni</h2> <a href="http://www.w3c.org">W3C</a><br> <a href="http://www.google.com">Motore di Ricerca Google</a><br> <a href="http://www.yahoo.it">Home page italiana di Yahoo!</a><br> </nav> </body> </html>

Output

Di norma molti designer usato anche i tag <ul> e <li> per incorporare gli elementi di navigazione e quindi designare i collegamenti in modo appropriato allâ&#x20AC;&#x2122;interno di un menĂš. Ad esempio nel codice seguente i singoli link vengono â&#x20AC;&#x153;elencatiâ&#x20AC;? come elementi di una lista (di tipo ul), racchiusa proprio in un elemento nav.

<nav id="mainNav"> <ul> <li><a href="pagina4.html">Informazioni</a></li> <li><a href="pagina3.html">Servizi</a></li> <li><a href="pagina2.html">Contatti</a></li> <li><a href="index.html">Home</a></li> </ul> </nav>

HTML 5 e File Multimediali Tradizionalmente i file multimediali vengono inseriti nei documenti HTML con gli elementi “embed” e “object”, particolarmente quando si inserisce a file realizzati in Adobe Flash, QuickTime, Windows Media, ecc. L’HTML 5 introduce il nuovo specifico tag <video> Per inserire un video nella sintassi HTML 5 si userà quindi il tag <video> e si definirà il suo attributo “src” sempre tramite l’URL del filmato (o di qualsiasi altro file multimediale). I controlli di riproduzione specifici potranno essere visualizzati applicando al tag video anche l’attributo “controls”.

Questo semplice codice evidenzia la sintassi dâ&#x20AC;&#x2122;uso del nuovo elemento: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Elementi HTML 5</title> </head> <body> <h3>Elemento video</h3>

<video src="musica.mp3" width="640" height="360" controls> // In alternativa per lâ&#x20AC;&#x2122;attributo controls Ă¨ possibile utilizzare la sintassi specifica controls="controls" per essere conformi. </video> </body> </html>

Visualizzazione elemento video in Google Chrome

Allo stato attuale questo nuovo elemento non è ancora supportato dai browser in maniera omogenea. In molti casi potrebbe pertanto essere necessario l’utilizzo di sintassi più specifiche a seconda del media da inserire: Per ovviare ai problemi di compatibilità può essere infatti necessario aggiungere formati alternativi, con l’inclusione di numerosi tag <source>:

<video width="640" height="360" controls poster="caricamento.png"> <source src="musica.mp3" type="video/mp4"> <strong>L’utilizzo dell’elemento “video” dell’HTML 5 può comportare problemi di compatibilità!</strong> </video>

Si noti nel precedente frammento di codice l’uso dell’attributo “poster”, che può essere inserito per visualizzare un‘immagine al posto dell’ oggetto collegato, nel caso ci voglia del tempo per il caricamento.

L’elemento Audio L’elemento “audio” dell’HTML 5 funziona in maniera abbastanza simile all’elemento “video”. L’elemento in questione dovrebbe supportare i più comuni formati audio, come ad esempio i file WAV: Sintassi di esempio <audio src="musica.wav"></audio> <audio>

Se si vuole consentire all’utente di controllare l’audio (a meno che non abbiate utilizzato il JavaScript per il controllo) sarà necessario mostrare anche i “controls” (controlli di riproduzione) con l’attributo già visto. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Elementi HTML 5</title> </head> <body> <h3>Elemento audio</h3>

<audio src="musica.mp3" controls> </audio> </body> </html> Output dell’elemento audio (con controlli di riproduzione) in Google Chrome

Sfortunatamente, proprio come per l’elemento “video”, ci sono anche formati audio che possono comportare problemi di supporto. Pertanto

anche in questo si puĂ˛ avere la necessitĂ di specificare diversi formati utilizzando i tag <source> come abbiamo visto per il tag video: Esempio: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Esempi Audio HTML 5</title> </head> <body>

<h3> Elemento audio </h3> <audio controls > <source src="musica.mp3" type="audio/wav"> </audio>  </audio> </body> </html>

I Canvas HTML 5 L’elemento “canvas” dell’HTML 5 viene usato per la visualizzazione di semplici immagini come disegni a mano, diagrammi ed altri elementi grafici personalizzati. Mentre Internet Explorer non supporta ancora direttamente il tag in questione, ci sono delle librerie del JavaScript che emulano la sintassi del <canvas> usando il Linguaggio di Markup Vettoriale (VML) della Microsoft. Da un punto di vista del markup, ci sono ben pochi “elementi aggiuntivi” da usare con un tag <canvas>. E’ possibile semplicemente mettere l’elemento nella pagina, dargli un nome

specifico di identificazione, con un attributo “id”, e definire le sue dimensioni con gli attributi “height” e “width”. Esempio della sintassi dell’elemento canvas <canvas id="canvas" width="400" height="320"> </canvas>

Dopo aver collocato un tag <canvas> in un documento, il passo successivo comporta l’utilizzo del JavaScript per accedere e disegnare sull’elemento.

Ad esempio il successivo codice recupera l’oggetto tramite il suo valore “id” e crea un contesto per un disegno bidimensionale:

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

Una volta che abbiamo un contesto di disegno, possiamo impiegare vari metodi per disegnarvi all’interno.

Ad esempio il metodo strokeRect (x,y,width,height) accetta per coordinate x ed y ed anche height e width, tutte specificate sotto forma di numeri che indicano i pixel.

Es. context.strokeRect(10,10,150,50);

la semplice sintassi riportata dovrebbe andare a disegnare un semplice rettangolo di 150 pixel per 50, iniziando alle coordinate

10,10 rispetto a quel punto del documento in cui è stato collocato il tag <canvas>. Se inoltre si vuole definire un particolare colore per il “pennello” sarà necessario programmarlo, tramite il metodo strokeStyle(), nel modo seguente: context.strokeStyle="green"; context.strokeRect(10,10,150,50);

Allo stesso modo si può usare il metodo fillRect (x,y,width,height) per ottenere un rettangolo con sfondo colorato:

context.fillRect(150,30,75,75); Di norma il colore di riempimento di default sarà il “nero”, ma è possibile definirne un altro usando il metodo fillColor(). Per dimostrare quanto detto la seguente sintassi definisce una specifica tonalità di blu:

context.fillStyle = "rgb(31,73,125)";

Un esempio completo di utilizzo del nuovo elemento “canvas” e del codice “JavaScript” associato viene mostrato di seguito: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Esempio elemento canvas </title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d"); context.strokeStyle = "green"; context.strokeRect(20,20,200,150); context.fillStyle = " rgb(31,73,125)"; context.fillRect(250,30,100,300); } </script> </head> <body> <h3>Semplice Esempio di utilizzo di Canvas</h3> <canvas id="canvas" width="400" height="320"> <strong>Lâ&#x20AC;&#x2122;elemento Canvas non Ă¨ ancora del tutto supportato!</strong>

</canvas> </body> </html>

Output

Disegnare e Dare uno Stile a Linee e Forme L’HTML 5 definisce anche un’API completa (Application Programming Interface) per disegnare all’interno di un elemento “canvas”. Infatti per creare delle forme più complesse è proprio necessario utilizzare un percorso API. Un percorso API serve ad immagazzinare una collezione di “subpaths” (lett. dei sotto percorsi) formati dalle funzioni di svariate

forme e connette i sotto percorsi tramite un’invocazione chiamata “fill()” o in alternativa “stroke()”. Poi, per iniziare un percorso, viene richiamata la funzione context.beginPath() per resettare la collezione dei percorsi. Quindi, qualsiasi tipo di chiamata per la forma (shape) può verificarsi allo scopo di aggiungere un sottopercorso (subpath) alla collezione. Una volta che tutti i sottopercorsi sono stati aggiunti appropriatamente, la funzione context.closePath() può, opzionalmente, essere chiamata per chiudere il ciclo.

Allora le funzioni fill() oppure stroke() visualizzeranno il percorso come una forma appena creata. Il seguente codice ad esempio disegna una â&#x20AC;&#x153;Vâ&#x20AC;? usando lineTo(): context.beginPath(); context.lineTo(20,100); context.lineTo(120,300); context.lineTo(220,100); context.stroke();

Ora, aggiungendo context.closePath() prima di context.stroke(), la forma a “V” verrebbe modificata in un triangolo, dal momento che il metodo closePath() andrebbe a connettere l’ultimo punto con il primo punto della “V”. Inoltre usando fill()invece di stroke(), il triangolo verrebbe riempito con un colore di riempimento qualsiasi, oppure con il colore nero, se non viene specificato altrimenti. Naturalmente si può usare sia fill() che stroke(), su ogni forma disegnata, se si desidera avere a disposizione un “bordo” attorno ad ogni forma riempita con un colore. Allo stesso modo per conferire uno stile al disegno si possono specificare sia “fillStyle” che

“strokeStyle” e perfino definire la larghezza delle linee usando “lineWidth”, come viene mostrato nel seguente codice: context.strokeStyle = "blue"; context.fillStyle = "red"; context.lineWidth = 10; context.beginPath(); context.lineTo(200,10); context.lineTo(200,50); context.lineTo(380,10); context.closePath();

context.stroke(); context.fill();

Come abbiamo visto è possibile cambiare il colore definendo la proprieta’ “fillColor”. Inoltre, in aggiunta ai valori dei colori CSS, si può anche definire “fillColor” per determinare un oggetto sfumato. Quest’ultimo può essere creato usando createLinearGradient() oppure createRadialGradient().

Il seguente codice ad esempio crea una semplice sfumatura lineare che sarà applicata ad un rettangolo usando il metodo createLinearGradient(x1,y1,x2,y2). La sfumatura inoltre e’ posizionata alle coordinate 20, 150 ed è programmata per coprire 100 pixel in entrambe le direzioni. var lg = context.createLinearGradient(10,200,100,100);

I colori della sfumatura vengono aggiunti usando il metodo addColorStop(). Quest’ultimo specifica un colore e lo spostamento della posizione all’interno della sfumatura dove il colore dovrebbe apparire. Lo spostamento dovrebbe essere compreso fra 0 ed 1.

lg.addColorStop(0,"#B03060"); lg.addColorStop(0.75,"#4169E1"); lg.addColorStop(1,"#FFE4E1");

Per creare poi una sfumatura radiale usando “createRadialGradient(x1,y1,r1,x2,y2,r2)”, sarà necessario definire la posizione ed il raggio di due cerchi da utilizzare per la sfumatura, come nel codice seguente.

var rg = context.createRadialGradient rg.addColorStop(0,"#A7D30C");

(350,300,80,360,250,80);

rg.addColorStop(0.9,"#019F62"); rg.addColorStop(1,"rgb (1,159,98) "); context.fillStyle = rg; context.beginPath(); context.fillRect(250,150,200,200);

Lâ&#x20AC;&#x2122;esempio completo, per il disegno di alcune forme con riempimento di colore e con stili specifici, viene riportato qui di seguito:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Disegni su Canvas</title> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.strokeStyle = "green"; context.fillStyle = "fuchsia";

context.lineWidth = 30; context.beginPath(); context.lineTo(200,10); context.lineTo(200,50); context.lineTo(250,10); context.closePath(); context.stroke(); context.fill(); var lg = context.createLinearGradient(10, 150, 200, 200); lg.addColorStop(0, " #9932CC"); lg.addColorStop(0.5, " #FF8C00");

lg.addColorStop(1, " #ADFF2F"); context.fillStyle = lg; context.beginPath(); context.rect (10, 150, 200, 200); context.fill(); var rg = context.createRadialGradient(50,50,10,60,60,50); rg.addColorStop(0, "#A7D30C"); rg.addColorStop(0.9, "#019F62"); rg.addColorStop(1, "rgb(1,159,98)"); context.fillStyle = rg; context.beginPath();

context.fillRect(0,0,130,230); context.beginPath(); context.lineTo(350,100); context.lineTo(300,240); context.lineTo(200,150); context.stroke(); } </script> </head> <body> <h3> Semplici Forme su Canvas!</h1>

Output

Applicare la Prospettiva

Nonostante il contesto del canvas finora specificato sia in 2d, è comunque possibile aggiungere un po’ di prospettiva scegliendo punti e ombreggiature appropriate. Ad esempio un cubo può essere creato usando niente di più che alcune invocazioni alle funzioni moveTo() e lineTo(). La chiamata a lineTo() viene usata per creare tre lati del cubo, ma l’insieme dei punti che li costituiscono non sono semplicemente delle linee rette orizzontali e verticali, come abbiamo visto disegnando poligoni bidimensionali.

Infatti l’ombreggiatura, causata dall’applicazione di una sorgente di luce, viene applicata per fornire l’illusione della terza dimensione . Nel semplice codice qui riportato si può vedere che l’uso appropriato delle tele(canvas) ha spesso una funzionalità superiore a quella che potete conoscere sulla geometria e sul disegno di base rispetto a qualsiasi altra cosa. <!DOCTYPE html> <html> <head>

context.lineTo(212,197); context.lineTo(341,111); context.lineTo(188,38); context.closePath(); context.fill(); context.stroke(); context.fillStyle = "#ccc"; context.strokeStyle = "black"; context.beginPath(); context.moveTo(341,111); context.lineTo(212,197);

context.lineTo(212,362); context.lineTo(341,276); context.lineTo(341,111); context.closePath(); context.fill(); context.stroke(); context.fillStyle = "#999"; context.strokeStyle = "black"; context.beginPath(); context.moveTo(59,289); context.lineTo(59,124);

context.lineTo(212,197); context.lineTo(212,362); context.lineTo(59,289); context.closePath(); context.fill(); context.stroke(); } </script> </head> <body> <h3>Canvas e Prospettiva</h3>

<canvas id="canvas" width="600" height="600"> </canvas> </body> </html> Output

Canvas e Immagini

Una caratteristica interessante dei canvas consiste nella possibilità di inserire delle immagini nell’area di disegno. Ci sono diversi modi per farlo ma iniziamo con il piu’ semplice, il metodo drawImage(img,x,y) che prende un oggetto immagine e le coordinate del suo posizionamento. L’immagine scelta verrà visualizzata nel suo formato originario. Poi sarà possibile usare il metodo drawImage (img,x,y,w,h) per modificare eventualmente le dimensioni dell’immagine inserita.

L’immagine che viene usata dal metodo drawImage() può essere: • Un’ immagine già caricata nella pagina • Un altro oggetto “canvas” • Un’immagine visualizzata sulla pagina tramite l’attributo “src” In qualunque posto decidiate di riposizionare l’immagine, non appena questa sarà pronta sul canvas sarà anche possibile disegnarci sopra.

L’esempio successivo di codice carica un’immagine e disegna uno spazio in preparazione dell’eventuale aggiunta di un sottotitolo: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Esempio di drawImage() su canvas</title> <style type="text/css"> canvas {border: 1px solid black;} </style> <script type="text/javascript"> window.onload = function(){

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.src = "Drago1.jpg"; img.onload = function(){ context.lineWidth = 5; context.drawImage(img,0,0,400,400); context.beginPath(); context.lineWidth = 5; context.fillStyle = "gold"; context.strokeStyle = "black";

context.rect(50,340,300,50); context.fill(); context.stroke(); } } </script> </head> <body> <canvas id="canvas" width="400" height="400"> </canvas> </body> </html>

Output

I Form HTML5 In questa sezione dedicata ai moduli dell’HTML vedremo brevemente soprattutto quelle nuove e interessanti caratteristiche dell’HTML 5 già supportate dagli attuali browser. Novità sull’elemento input Tradizionalmente l’elemento “input” dell’HTML viene usato per definire la maggior parte dei campi del modulo.

La particolare tipologia dei campi di un form viene poi stabilita dal tipo di attributo, che come giĂ sappiamo puĂ˛ essere impostato su text (campo di testo), password (campo per password) ,hidden (campo nascosto), checkbox (casella di controllo), radio-pulsante (campo circolare di controllo), submit (campo di inoltro dati), reset (campo di reset dati), image (campo immagine), button (campo per bottoni/pulsante). Lâ&#x20AC;&#x2122;HTML 5 aggiunge numerosi altri valori che analizzeremo di seguito.

Per prima cosa possiamo creare un campo specifico di “selezione colore”: un cosiddetto “color picker”, vale a dire un riquadro con tutte le sfumature dei colori con, a fianco, un cursore a scorrimento. Esempio <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Form HTML 5</title> </head>

<body> <form> <p><label> Colore: <input type="color" name="favColor"></label></p> </form> </body> </html>

Questo tipo di controllo Ă¨ stato appena implementato, ma dovrebbe apparire giĂ nel modo seguente:

Campo di “scelta colore” tramite Google Chrome:

Una larga gamma di controlli della “data” (date) possono ora essere creati definendo il tipo di attributo per “date”, datetime-local (data e ora locali), month (mese), week (settimana), time (ora). L’utilizzo del campo data viene illustrato nel codice seguente e nel relativo output (Google Chrome) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Form HTML 5</title>

</head> <body> <form> <p><label> Data <input type="date" name="date"> </label></p> </form> </body> </html>

Output

E’ anche possibile definire delle restrizioni semantiche più specifiche in relazione alla tipologia di dati da inserire in un determinato campo di un form. Ad esempio è possibile “programmare” un tipo di attributo del tag <input> su “tel”, “email”, o “url”. Struttura esempio <!DOCTYPE html> <html> <head>

</form> </body> </html>

In questo modo un browser potrebbe dare alcuni suggerimenti per lâ&#x20AC;&#x2122;appropriata tipologia di dati che lâ&#x20AC;&#x2122;utente, caso per caso, Ă¨ invitato ad inserire.

Convalida dei Dati Con i nuovi “controlli” HTML 5 è anche possibile “invitare” l’utente ad immettere obbligatoriamente dei dati in un campo, senza ricorrere al JavaScript, utilizzando solamente l’attributo “required”. Es. <input type="text" name="nome" id="nome" required>

Elementi HTML 5 di Supporto alle Applicazioni Web Un tema chiave delle specifiche dellâ&#x20AC;&#x2122;HTML 5 Ă¨ il miglioramento al supporto delle applicazioni per il Web. A tale riguardo numerosi elementi ed attributi sono stati introdotti nelle specifiche per continuare la migrazione dalle pagine Web alle applicazioni Web. Tuttavia, la maggior parte di queste caratteristiche non sono ancora implementate nei browser attuali e probabilmente alcune di queste non saranno in futuro sviluppate ulteriormente.

Tuttavia già sappiamo che gli elementi presentati in questa breve trattazione sul “nuovo” HTML dovrebbero essere considerati soltanto come illustrativi del genere di cambiamenti che l’HTML5 tende a favorire. Nuovo utilizzo dell’Elemento “menu” Un elemento che sarà implementato nei browser ma che potrebbe non eseguire le azioni definite dall’HTML 5, è l’elemento “menu”. Tradizionalmente, questo elemento doveva essere impiegato per creare un semplice menù di scelta, ma la maggior parte dei browser

semplicemente lo visualizzava come una lista disordinata (elemento ul) Con l’HTML 5 l’elemento “menu” è stato riportato alla sua originaria funzione. Un nuovo elemento, “type”, è stato introdotto con i seguenti possibili valori: “toolbar”, “context”, “list” (quest’ultimo è il valore di default).

Il seguente esempio definisce un semplice menù di tipo File per un’applicazione Web: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Form HTML 5</title> </head> <body> <form>

<menu type="toolbar" id="fileMenu" label="File"> <li><a href="javascript:newItem();">Nuovo</a></li> <li><a href="javascript:openItem();">Apri</a></li> <li><a href="javascript:closeItem();">Chiudi</a></li> <hr> <li><a href="javascript:saveItem();">Salva</a></li> <li><a href="javascript:saveAsItem();">Salva come ...</a></li> <hr> <li><a href="javascript:exitApp();">Esci</a></li> </menu> </form>

</body> </html>

Ovviamente si tratta di una sintassi base: per l’aspetto e le funzionalità di questo “Menù” dovranno essere usati i CSS e specificati i codici JavaScript.

L’Elemento “command” L’elemento “menu” puo’ contenere non solo dei link ma anche altri elementi interattivi, incluso l’elemento “command” che è stato introdotto solo di recente. Questo elemento di tipo vuoto possiede una “label” (etichetta) e puo’ essere associato anche ad un’icona. L’elemento “command” ha inoltre un attributo “type”, che puo’ essere impostato sui seguenti valori: “command”, “radio” o “checkbox”.

Il semplice esempio, presentato di seguito, ripropone l’elemento “menu” illustrando anche il funzionamento di “command”: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Form HTML 5</title> </head> <body> <menu type="command" label="Menu">

L’Attributo “contenteditable” Introdotto all’inizio da Internet Explorer l’attributo (personalizzato) è ora supportato dalla maggior parte dei browsers. L’HTML 5 ha poi standardizzato globalmente l’uso di questo attributo che è applicabile a tutti gli elementi. Il senso di base dell’attributo è che se noi lo definiamo con un valore “true”, il browser allora dovrebbe permettere la modifica di un testo quando si clicca su un dato elemento:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" <title>Contenteditable</title>

content="text/html;

charset=UTF-8">

</head> <body> <p contenteditable="true"> Questo paragrafo di testo e' modificabile. Cliccate per verificare!</p> </body> </html>

Output

Conclusioni - L’HTML 5: Un’evoluzione ancora in corso L’HTML 5 rappresenta un miglioramento imperfetto nel mondo in continua evoluzione del Web.

Il primo problema deriva senz’altro dal fatto che non è possibile né conveniente forzare gli sviluppatori a codificare in un unico modo corretto i loro markup. Infatti l’HTML 5 è stato “sviluppato” per ricercare un ragionevole compromesso tra vecchie e nuove tendenze per il Web 3.0. Il problema principale della “nuova” specifica HTML5 è la vastità e soprattutto la disomogeneità dei temi affrontati. La specifica dell’HTML5 è anche per questo ancora in evoluzione. L’HTML 5 cambierà probabilmente l’aspetto generale del Web, ma il vecchio Web (Web 2.0) che noi ben conosciamo probabilmente

sopravvivrà: i vecchi modi di procedere continueranno infatti a essere utilizzati e servirà un bel po’ di tempo prima che le idee dell’HTML 5 risultino ampiamente diffuse. La nuova specifica HTML5 non viene sviluppata per risolvere tutti i problemi esistenti nello sviluppo di pagine web “corrette”: è invece possibile che il suo utilizzo comporti ancora più problemi nell’accessibilità, soprattutto nel corso della transizione fra la nuova e la vecchia via. Infatti sebbene il nuovo standard si stia evolvendo velocemente, vanno ancora appianate e risolte le contese fra i produttori di browser per i nuovi sviluppi, determinanti per una corretta fruizione di ogni sito web.

FINE LEZIONE