Sei sulla pagina 1di 53

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
<!--[if lt IE 9]>
<script src="http://htmk5shim.com/svn/trunk/html5.js">
</script>
<![endif]-->

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>
<li><a href="link2.html">Men 2</a></li>
<li><a href="link3.html">Men 3</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

Attributo <input> type

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

Attributo <input> type

Rende obbligatoria la compilazione del campo a cui applicato.


<input type="text" required pattern="[A-z]{5}"
title="Inserisci 5 lettere">
Esempio

autofocus

Attributo <input> type

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

Attributo <input> type

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

Attributo <input> type

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">


<source src="ProgrammatoriAPP.mp4" type="video/mp4" />
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">

<source src="ProgrammatoriAPP.mp4" type="video/mp4" />

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">
<source src="ProgrammatoriAPP.mp4" type="video/mp4" />
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">
<source src="ProgrammatoriAPP.mp4" type="video/mp4" />
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