HTML5 Tot

Formazione & Sviluppo Consulenza Aziendale Project Management Ricerca & Sviluppo
Cos HTML5
HTML5 introduce nuove istruzioni destinate alla corretta lettura

delle pagine web con le nuove tecnologie (APP, tablet e telefonini)
HTML5 un'evoluzione del modello di markup della pagina

internet.
HTML5 non supportato dai browser delle passate versioni.

HTML 5 attualmente in fase di definizione (draft) presso il World
Wide Web Consortium.
Browser supportati
Google Chrome 16.0
373
Mozilla Firefox 9.0
330
Opera 11.60
329
Apple Safari 5.1
302
MS IE 9
141
tra i pi utilizzati strumenti online per testare il supporto del tuo browser
cito http://html5test.com
Perch HTML5
Semplifica la sintassi HTML con nuove regole per la strutturazione del testo in
capitoli, paragrafi e sezioni
Introduce elementi di controllo per i menu di navigazione
Migliora gli elementi di controllo per i Form (tag <email> e <indirizzo>)
Introduce elementi specifici per il controllo di contenuti multimediali (tag
<video> e <audio>)
Supporta Canvas che permette di utilizzare il javascript per disegnare e creare
animazioni e grafica vettoriale 2D e 3D direttamente online.(games)
Introduce la geolocazione
Perch HTML5
E possibile accedere allapplicazione anche in assenza di

connessione Web;
edita contenuti complessi, come documenti di testo;

usa metafore di interazione come il drag and drop;
accede e manipola informazioni generate in tempo reale dallutente
attraverso sensori multimediali quali microfono e webcam.
mantiene un database sul device dellutente;
Gli elementi modificati

sostituzione del lungo e complesso doctype, con un semplice
<!doctype html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Compatibilit
Per garantire retrocompatibilit tra i browser a livello di
interpretazione degli stili, si pu inserire nell'head delle pagine un
CSS di reset: htm5shim

Compatibilit
Unaltra fonte per verificare se una determinata funzionalit
supportata o meno dal browser una libreria Javascript
chiamata Modernizr da inserire sempre nellhead come qualsiasi altro
file .js esterno alla pagina:
<script src="js/modernizr.min.js"></script>
La nuova sintassi
La sintassi dellHTML5 ereditata dallHTML4 e semplificata per i TAG
<!DOCTYPE html>
<html lang="it">
Attributo lang per definire

la lingua
<head>
<meta charset="utf-8">
</head>
<body>
definisce la codifica
dei caratteri usati e
speciali come
</body>
</html>
Differenza fra HTML4 e HTML5
La nuova sintassi
I tag consentiti
Ulteriore semplificazione eliminando i tag

html, body e head
lasciando la loro interpretazione ed inserimento al browser.
Esempio semplificazione
La nuova sintassi
I tag marcatori di sezione sono:
header footer section nav article aside

Servono per realizzare una struttura semantica e possono essere
ripetuti pi volte nella stessa pagina e marcano delle zone all'interno
della pagina stessa.
header e footer
Esempio
Marcano lintestazione e il pi di pagina di un documento.

header
footer
<header>Spazio dedicato all'intestazione dell'articolo</header>

<footer>Spazio dedicato alla fine dell'articolo</footer>
<header>Spazio dedicato all'intestazione dell'articolo</header>

<footer>Spazio dedicato alla fine dell'articolo</footer>
section
Si usa per definire un raggruppamento tematico di contenuti o
meglio un insieme di contenuti fra di loro correlati tipo i capitoli, le
varie sezioni di una tesi, introduzione, notizie, contatti.
<section>
<h1>Titolo sezione 1</h1>
<p>Esempio di contenuto da scrivere nella sezione</p>
</section>
Esempio
nav
Delimita una serie di link utili per la navigazione come blocchi di link
utilizzato come marcatore per il men di navigazione
<nav>
<ul>
<li><a href="link1.html">Men 1</a></li>
</ul>
</nav>
Esempio
article
Marca una sezione di contenuto indipendente di un documento o di
un sito come i contenuti di news, blog post e simili.
<article>
<a href="http://www.mioblog.it/news.html"> link
ipertestuale</a><br />
Contenuto della notizia del giorno
</article>
Esempio
aside
Marca un approfondimento come spiegazioni particolari di determinati concetti
tipo note e commenti. Si usa di solito per approfondire largomento sul lato destro
della pagina.
<aside>
<h4>HTML</h4>
HyperText Markup Language (HTML) linguaggio a marcatori
per ipertesti.
</aside>
Esempio
La struttura
Contenuto articolo
Intestazione
Men
Approfondimenti
Contenuti con
intestazione e footer
Pi di pagina
I nuovi tag
I nuovi tag introdotti per migliorare e potenziare i contenuti di un sito
sono:
hgroup mark time figure figcaption
detail progress meter wbr
Permettono di dare maggiori informazioni di qualit e soprattutto

semantiche alle nostre pagine web, cos che i motori di ricerca
comprendano facilmente di che genere di informazione stiamo parlando.
hgroup
Raggruppa gli elementi che specificano i titoli e i sottotitoli di pagina o
meglio <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Utilizzato per sfruttare la
combinazione comunicativa data dai titoli.
<header>
<hgroup>
<h1>TITOLO</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
Esempio
mark
E il tag relativo al testo evidenziato. Porta lutente a focalizzarsi subito sulle
righe o sulle parole interessate creando unattenzione maggiore al contesto.
<p>Testo non evidenziato <mark>testo evidenziato</mark>, testo
non evidenziato.</p>
Esempio
Esempio
time
Inserisce nel documento ore (0-24) o date o entrambe. Le date accettate

sono tutte quelle a partire dal 1582. Se lelemento non inserito all'interno
di <article>, il tag far riferimento alla data e all'ora dell'intero documento.
Il tag <time> pu essere accompagnato da 2 attributi:
pubdate
datetime
la data presente in <time>

equivale alla data di
pubblicazione di un documento
<time pubdate="2011-0423T21:44:27">
specifica con precisione una

data
<time datetime="201202-14">
meter
Esempio
Visualizza una barra di avanzamento che rappresenta una misurazione con

un valore minimo e uno massimo (range). Viene usato principalmente per
gli elementi infografici a supporto dei contenuti o dati.
Valore minimo e massimo
Valore effettivo
<p> Il tuo punteggio : <meter value="94"

min="0" max="100" low="40" high="90"
optimum="100">94</meter></p>
Valore ottimale
Livello di valore pi
basso e pi alto
progress
Esempio
Indica lelaborazione dinamica di un processo cio il tempo restante per il

compimento di una determinata operazione, come il download o upload di file.
Download:
<progress> 76%
</progress>
Associato con ID ad un javascript pu calcolare automaticamente il processo
di avanzamento.
Download:
<progress id="progress" max=100>76%
</progress>
detail
Esempio
Specifica i dettagli informativi che lutente pu visualizzare o

nascondere a richiesta. I contenuti inglobati in questo tag, accompagnati
dallattributo open, che definisce se il data container supplementare
debba essere mostrato aperto o chiuso.
Se non si specifica alcun attributo per default viene mostrato chiuso.
Crea il titolo del dettaglio
<details>
<summary>Titolo dettaglio</summary>
<p>Contenuto del dettaglio da esplodere</p>
</details>
figure e figcaption
Esempio
figure viene utilizzato per marcare immagini, diagrammi, schemi o

fotografie, audio, video e codice di esempio o per concetti addizionali
che non cambiano il senso del documento se venissero rimossi.
figcaption descrive il media inserito.
<figure>
<figcaption>Didascalia immagine</figcaption>
<img src="immagine.jpg" width="304" height="228" />
</figure>
I nuovi attributi globali

I nuovi:
contenteditable draggable hidden speelcheck
Ereditati da HTML4 validi in HTML5:
accesskey class dir Id lang style tabindex title
contenteditable
Esempio
Specifica se il contenuto presente in un qualsiasi elemento html pu essere

modificato o no nei browser.
Pu avere 3 valori :
true - il contenuto dellelemento pu essere modificato
false - il contenuto dellelemento non pu essere modificato
inherit - specifica che la modifica possibile solo se lo anche per lelemento

genitore.
Se non specificato false il valore di default.
<p contenteditable="true">Paragrafo con testo modificabile.</p>

<p contenteditable="false">Paragrafo con testo non modificabile.</p>
draggable
Da la possibilit allutente di effettuare il drag and drop dei
contenuti desiderati.
E un attributo pi complesso dei precedenti perch deve essere
accompagnato da data-set supplementari e codici JavaScript per essere
eseguito in pieno.
draggable="true" "false" "auto"
hidden
Permette di nascondere gli elementi HTML in cui inserito.
<h1>Esempio di hidden</h1>
<p hidden="hidden">Questo un paragrafo nascosto.</p>
<p>Questo un altro paragrafo non nascosto.</p>
Esempio
spellcheck
Specifica se un elemento o porzione pagina debbano essere sottoposti o
no a revisione grammaticale.
Pu assumere due valori :
true attiva la revisione

false comportamento browser di default.
Esempio
Esercitazione
Levoluzione dei Form
Inserimento di nuovi elementi che consentono il

controllo e la realizzazione del modulo
Validazione e obbligatoriet di determinati campi

come (email, tel),ecc.
Attributi e campi
Nuovi attributi
required autocomplete e novalidate,

input, list, datalist, pattern
Nuovi campi
email search Url tel indirizzo date

datetime number range
autocomplete
Esempio
Specifica se lautocompletamento dei campi deve essere attivo

(valore on) o no (valore off).
<form action="invia_mail.php" method="get"
autocomplete="off">
E-mail: <input type="email" name="email"

autocomplete="on" /><br />
</form>
novalidate
Esempio
Consente di saltare tutte le operazioni di validazione, quindi non verr

fatto alcun controllo sulla correttezza dei dati.
<form action="invia_mail.php"
novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
Levoluzione di input type

Search
definisce un campo testo utilizzato per la ricerca
Tel
definisce un campo testo per limmissione del numero di telefono
Email
specifica un campo testo usato per limmissione di un indirizzo di

posta elettronica
Url
specifica un campo testo usato per introdurre un indirizzo web
Month,
Week
definiscono campi per mesi e settimane.
Esempio
number
Input type=" number"
E usato per definire un campo numerico.

I sottovalori supplementari sono:
min - indica il valore minimo che possibile inserire,
max - il valore numerico massimo,
step - indica di quanto si deve incrementare ogni valore successivo
mediante le frecce di avanzamento. Se si indica la stringa any non
verr specificato alcun sottovalore.
Campo numerico <input type="number" name="Numeri"
min="50" max="150" step="20" />
Esempio
color
Permette di selezionare un colore da una tavolozza di colori predefiniti
o direttamente dal suo codice #esadecimale.
<input type="color">
Esempio
range
<input> type
Definisce un arco di valori numerici racchiusi in una barra di scorrimento. In

output verr mostrata una risorsa informativa grafica.
Include i valori min, max e step come visto in number.
Numeri: <input type="range" name="numeri"

min="10" max="100"/>
Esempio
list e datalist
Attributo <input> type
Lattributo list associato al tag datalist permette di creare un elenco

di possibili voci accettate dal campo.
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Omniapro" value="http://www.omniapro.it" />
<option label="Le Equilibriste"
value="http://www.leequilibriste.it" />
<option label="Google" value="http://www.google.com" />
</datalist>
Esempio
pattern
Espressioni regolari
Indica una regola avanzate per il controllo delle stringhe e su

come queste devono essere composte.
Viene usato per la validazione dei campi di testo.
<input type="text" name="country_code" pattern="[az]{5}"
title="Il codice che deve essere di 5 lettere in
formato testuale" />
Esempio
required
Rende obbligatoria la compilazione del campo a cui applicato.

<input type="text" required pattern="[A-z]{5}"
title="Inserisci 5 lettere">
Esempio
autofocus
Specifica in quale campo posizionare il cursore e quindi da quale

campo lutente deve cominciare a compilare il form.
Nome:<input type="text" name="nome" autofocus="autofocus" /><br
/><br />
Cognome: <input type="text" name="cognome" /><br /><br />
Esempio
placeholder
Permette di associare una piccola descrizione al campo testo , ad

esempio Cerca in sitoesempio.com. La descrizione presente solo quando
il campo non stato gi compilato.
<input type="search" name="prova_ricerca"

placeholder="Cerca in omniapro.it" />
Esempio
multiple
Identifica un campo testo allinterno del quale possono essere inseriti

valori multipli separati da una virgola.
Un esempio tipico rappresentato dalla spedizione di un messaggio a vari
indirizzi e-mail.
Lattributo multiple funziona con:
<input> type: email e file.
<input type="email" name="mail" multiple="multiple" />
Esempiou
video
TAG dedicato ad incorporare video ed elementi multimediali allinterno
di pagine web.
<video src="ProgrammatoriAPP.mp4"
controls="controlli">
Attenzione: il tuo browser non supporta il tag video
</video>
Esempio
audio
Attributo <video>
Determina lo stato audio di default del video in questione. Lattributo

affiancato dal valore muted (non valido per tutti i browser). muted
attualmente lunico valore supplementare che possibile applicare al
nostro player: stabilisce che nessun suono venga riprodotto.
<video controls="controls" audio="muted">
<source src="ProgrammatoriAPP.mp4" type="video/mp4" />
</video>
Esempio
autoplay
Attributo <video>
Definisce linizio di un video al caricamento della pagina.
<video controls="controls" autoplay="autoplay">

Attenzione: il tuo browser non support ail tag video.
</video>
Esempio
controls
Attributo <video>
Determina la visualizzazione dei controlli video sul player di riproduzione.
I controlli di riproduzione disponibili possono includere i seguenti elementi:
play pausa cerca volume fullscreen sottotitoli tracce audio
<video controls="controls">
Attenzione: il tuo browser non support ail tag video.
</video>
Esempio
width e height
Attributo <video>
Definiscono larghezza e altezza del player video. I valori di

misurazione vengono espressi in pixel.
<video width="320" height="240" controls="controls">
Attenzione: il tuo browser non supporta il tag video.
</video>
Esempio
loop
Attributo <video>
Riproduce a ciclo continuo il video.

<video width="320" height="240" controls="controls"
autoplay="autoplay" loop="loop">
Attenzione: il tuo browser non supporta il tag video.
</video>
Esempio
Esercitazione
Sede legale ed operativa: Via Pappacena n. 22 Bari - Poggiofranco - 70124

Tel: 080/5611427 - 080/5675598
Cell: 388-9004346
Sito internet www.omniapro.it
e-mail: info@omniapro.it

HTML5 Tot

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML5 Tot

Caricato da

Copyright:

Formati disponibili

Formazione & Sviluppo Consulenza Aziendale Project Management Ricerca & Sviluppo

HTML5 introduce nuove istruzioni destinate alla corretta lettura

HTML5 un'evoluzione del modello di markup della pagina

HTML5 non supportato dai browser delle passate versioni.

Mozilla Firefox 9.0

Apple Safari 5.1

E possibile accedere allapplicazione anche in assenza di

edita contenuti complessi, come documenti di testo;

mantiene un database sul device dellutente;

Gli elementi modificati

Attributo lang per definire

Differenza fra HTML4 e HTML5

Ulteriore semplificazione eliminando i tag

header footer section nav article aside

Marcano lintestazione e il pi di pagina di un documento.

<header>Spazio dedicato all'intestazione dell'articolo</header>

<header>Spazio dedicato all'intestazione dell'articolo</header>

Permettono di dare maggiori informazioni di qualit e soprattutto

Inserisce nel documento ore (0-24) o date o entrambe. Le date accettate

la data presente in <time>

specifica con precisione una

Visualizza una barra di avanzamento che rappresenta una misurazione con

<p> Il tuo punteggio : <meter value="94"

Indica lelaborazione dinamica di un processo cio il tempo restante per il

Specifica i dettagli informativi che lutente pu visualizzare o

figure viene utilizzato per marcare immagini, diagrammi, schemi o

I nuovi attributi globali

Specifica se il contenuto presente in un qualsiasi elemento html pu essere

false - il contenuto dellelemento non pu essere modificato

inherit - specifica che la modifica possibile solo se lo anche per lelemento

<p contenteditable="true">Paragrafo con testo modificabile.</p>

true attiva la revisione

Levoluzione dei Form

Inserimento di nuovi elementi che consentono il

Validazione e obbligatoriet di determinati campi

required autocomplete e novalidate,

email search Url tel indirizzo date

Specifica se lautocompletamento dei campi deve essere attivo

E-mail: <input type="email" name="email"

Consente di saltare tutte le operazioni di validazione, quindi non verr

Levoluzione di input type

definisce un campo testo utilizzato per la ricerca

definisce un campo testo per limmissione del numero di telefono

specifica un campo testo usato per limmissione di un indirizzo di

specifica un campo testo usato per introdurre un indirizzo web

definiscono campi per mesi e settimane.

Input type=" number"

E usato per definire un campo numerico.

Definisce un arco di valori numerici racchiusi in una barra di scorrimento. In

Numeri: <input type="range" name="numeri"

Attributo <input> type

Lattributo list associato al tag datalist permette di creare un elenco

Attributo <input> type

Indica una regola avanzate per il controllo delle stringhe e su

Attributo <input> type

Rende obbligatoria la compilazione del campo a cui applicato.

Attributo <input> type

Specifica in quale campo posizionare il cursore e quindi da quale

Attributo <input> type

Permette di associare una piccola descrizione al campo testo , ad

<input type="search" name="prova_ricerca"

Attributo <input> type

Identifica un campo testo allinterno del quale possono essere inseriti