HTML 5
HTML 5
Cosa é
Un linguaggio di markup che si può
considerare ancora in fase di definizione
Rappresenta l'evoluzione diretta di HTML
4.01
All’interno convivono due anime:
la primaraccoglie l’eredità semantica dell’HTML
la seconda deriva dallo sforzo di aiutare lo
sviluppo di applicazioni Web
HTML 5
Funzionalità
Salvare informazioni sul device utente
Accedere all’applicazione anche in assenza di una
connessione
Comunicare in modo bidirezionale sia con il
server sia con altre applicazioni
Usare metafore di interazione tipiche di
applicazioni desktop, come il drag and drop
Accedere e manipolare informazioni generate
dall’utente attraverso sensori multimediali (es.
microfono e webcam)
Accedere alle informazioni geografiche del device
dell’utente (posizione, orientamento,…)
HTML 5
Limiti versioni precedenti
Risalgono alla fine del 1999
Web legato al concetto di ipertesto
Bassa velocità di connessione e limitato investimento sul
media -> scarsa presenza di applicazioni web
HTML principalmente orientato ad agevolare la stesura
di semplici documenti testuali collegati fra loro
Interesse intorno alla rete ha subito una brusca
accelerazione
Condizionamento positivo della diffusione e della
velocità di connessione -> maggiori investimenti e
ricerca
Utente finale creatore di contenuti
HTML 5
Sintassi (doctype)
<!doctype html>
<html>
<head>
<title>Titolo documento</title>
</head>
<body>
……..
</body>
</html>
HTML 5
Nuovi elementi
section
article
aside
header
footer
nav
figure
figcaption
(organizzazione contenuti)
HTML 5
Nuovi elementi
section
L'elemento section rappresenta una
sezione generica del documento o
dell'applicazione. Una sezione, in questo
contesto, è un raggruppamento tematico
di contenuti, tipicamente corredato da un
heading
Alcuni casi d'uso suggeriti
un capitolo in una guida
i vari tabs di un documento
le sezioni numerate di una tesi
le varie sezioni (boxes) di una Home Page che
raggruppano contenuti generici (introduzione, contatti,
news)
HTML 5
Nuovi elementi
<!doctype html>
<html>
<head>
<title>SECTION</title>
<style>
#container {
margin: 0 auto; width: 400px;
}
</style>
</head>
<body>
<div id="container">
<section>
<h1>Introduzione ad HTML5</h1>
<p>Definizione</p>
<p>Perchè HTML5</p>
</section>
<section>
<h1>Storia</h1>
<p>Da HTML Tags ad HTML 4.01</p>
<p>XHTML</p>
</section>
<section>
<h1>Nuovi tags</h1>
<p>Section</p>
<p>Article</p>
<p>Nav</p>
<p>Aside</p>
<p>...</p>
</section>
</div>
</body>
</html>
section -> esempio
HTML 5
Nuovi elementi
article
L'elemento
article
rappresenta
una
porzione di contenuto indipendente di un
documento, di una pagina o di un sito
Alcuni casi d'uso suggeriti
post di un forum
articolo di un giornale
commento inserito da un utente
widget interattivo
HTML 5
Nuovi elementi
article -> esempio
<!doctype html>
<html>
<head>
<title>Il mio Blog</title>
<style>
article { border: 1px solid #ccc; width: 350px; padding: 4px; }
section article { width: 300px; margin: 0 auto; }
</style>
</head>
<body>
<article>
<h1>Titolo articolo</h1>
<p>In questo articolo parleremo di ...</p>
<section>
<h1>Commenti</h1>
<article>
<p>Postato da: Johnny Cascaterra</p>
<p>Pessimo articolo, dove vuoi andare a parare?</p>
</article>
</section>
</article>
</body>
</html>
HTML 5
Nuovi elementi
nav
L'elemento nav rappresenta la sezione della
pagina che contiene i link a pagine esterne o ad
altre parti della pagina stessa; è una sezione di
link di navigazione.
Scopo
raggruppare i link costituenti la navigazione principale
presente quelli della secondaria) del sito
esempio
<nav>
<ul>
<li><a href="home.html">Home page</a></li>
<li><a href="contatti.html">Contatti</a></li>
<li><a href="dovesiamo.html">Dove siamo</a></li>
</ul>
</nav>
(e se
HTML 5
Nuovi elementi
aside
L'elemento aside rappresenta una sezione della
pagina che racchiude un contenuto solo
marginalmente correlato a ciò che lo circonda e
che può considerarsi come separato da esso.
Queste sezioni sono spesso definite come
sidebars (colonne laterali).
Scopo
raggruppare contenuti pubblicitari ed elementi di navigazione
che puntino all'esterno del documento
HTML 5
Nuovi elementi
aside -> esempio
<aside>
<section>
<h1>
Questi sono dei contenuti di approfondimento
marginali rispetto al
contenuto principale
</h1>
</section>
<nav>
<h2>Link a pagine correlate al contenuto
</h2>
<ul>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto </li>
</ul>
</nav>
<section>
<h2>Pubblicità</h2>
[immagini pubblicitarie]
</section>
</aside>
HTML 5
Nuovi elementi
header
L'elemento
header
rappresenta
un
gruppo di informazioni introduttive o di
aiuto alla navigazione.
Precisazione
è possibile definire più di un header in una pagina: il primo per
introdurre la pagina stessa, i successivi possono introdurre le
varie sezioni presenti.
HTML 5
Nuovi elementi
header -> esempio
………
<header>
<h1>Benvenuti nel mio sito personale</h1>
<nav>
<h1> Scopri le varie sezioni!</h1>
<ul>
<li><a href="home.html">Home</a>
<li><a href="contatti.html">Contatti</a>
<li><a href="dovesiamo.html">Dove siamo</a>
</ul>
</nav>
</header>
<div id="content">
<section>
<header>
<h1>News</h1>
<p>Le novità più importanti della settimana, entra per scoprirle nel dettaglio.</p>
</header>
</section>
<section>
<header>
<h1>Blog</h1>
<p>Giorno per giorno, quello che mi ha colpito.</p>
</header>
</section>
</div>
……….
HTML 5
Nuovi elementi
footer
L'elemento footer rappresenta il pié di pagina
per il più vicino elemento che ne definisca
l'ambito (article, aside, nav, section).
Scopo
Un footer tipicamente contiene informazioni a proposito della sezione a
cui si riferisce come l'autore, link a documenti correlati, copyright.
Esempi
<footer>© 2012 ItsosMilano.it - author Johnny Cascaterra</footer>
<article>
<h1>Il tag footer</h1>
<p>L'elemento footer rappresenta...</p>
<footer>
Pubblicato da Tirandietro
</footer>
</article>
HTML 5
Nuovi elementi
figure e figcaption
L'elemento figure rappresenta un insieme
di elementi, opzionalmente corredati da
una
didascalia
(figcaption),
che
rappresentano
delle
singole
unità
indipendenti
rispetto
al
contenuto
principale.
Esempio
HTML 5
Media elements
(video, audio, source, track)
I media elements sono utilizzati per
presentare all'utente filmati e audio.
Il termine media resource si riferisce al
file multimediale nel suo complesso, un file
video completo od un file audio completo.
Media elements: video e audio
Elementi collegati: source e track
HTML 5
Media elements
attributi
Attributi comuni a video e audio
src: locazione della risorsa da riprodurre
preload: può assumere i valori none (nessun download
preventivo), metadata (vengono recuperate le informazioni
essenziali) o auto (default, sceglie il browser)
autoplay: riproduzione automatica o no
loop: in loop o no
muted: stato di default dell’audio per i video
controls: indica al browser di mostrare l’interfaccia standard
dei controlli (play, pausa e barra scorrimento)
HTML 5
Media elements
video
L'elemento video è utilizzato per mostrare filmati,
video e files audio con didascalia
Attributi specifici
poster: indirizzo immagine alternativa se video non
disponibile
width e height: intuitivi
Esempio
HTML 5
Media elements
audio
L'elemento audio rappresenta un suono o uno
stream audio.
Esempio
HTML 5
Media elements
source
L'elemento source permette all'autore di
specificare delle alternative per le risorse
definite in un elemento multimediale (audio,
video)
Esempio
<audio>
<source src="u2.wav">
<source src="u2.ogg">
Il browser non è in grado di riprodurre
alcuno dei file indicati!
</audio>
Scarica
