Post on 02-May-2015
HTML 5HTML 5HTML 5HTML 5
Un linguaggio di markup che si può considerare ancora in fase di definizione Rappresenta l'evoluzione diretta di HTML 4.01All’interno convivono due anime:
la primaraccoglie l’eredità semantica dell’HTMLla seconda deriva dallo sforzo di aiutare lo sviluppo di applicazioni Web
HTML 5HTML 5 Cosa éCosa é
HTML 5HTML 5 Cosa éCosa é
Salvare informazioni sul device utenteAccedere all’applicazione anche in assenza di una connessioneComunicare in modo bidirezionale sia con il server sia con altre applicazioniUsare metafore di interazione tipiche di applicazioni desktop, come il drag and dropAccedere e manipolare informazioni generate dall’utente attraverso sensori multimediali (es. microfono e webcam)Accedere alle informazioni geografiche del device dell’utente (posizione, orientamento,…)
HTML 5HTML 5 FunzionalitàFunzionalitàHTML 5HTML 5 FunzionalitàFunzionalità
Risalgono alla fine del 1999Web legato al concetto di ipertesto
Bassa velocità di connessione e limitato investimento sul media -> scarsa presenza di applicazioni webHTML principalmente orientato ad agevolare la stesura di semplici documenti testuali collegati fra loro Interesse intorno alla rete ha subito una brusca accelerazioneCondizionamento positivo della diffusione e della velocità di connessione -> maggiori investimenti e ricercaUtente finale creatore di contenuti
HTML 5HTML 5 Limiti versioni precedentiLimiti versioni precedenti
HTML 5HTML 5 Limiti versioni precedentiLimiti versioni precedenti
<!doctype html><html> <head> <title>Titolo documento</title> </head> <body> …….. </body></html>
HTML 5HTML 5 Sintassi Sintassi (doctype)(doctype)
HTML 5HTML 5 Sintassi Sintassi (doctype)(doctype)
sectionarticleasideheaderfooternavfigurefigcaption
HTML 5HTML 5 Nuovi elementi Nuovi elementi (organizzazione contenuti)(organizzazione contenuti)
HTML 5HTML 5 Nuovi elementi Nuovi elementi (organizzazione contenuti)(organizzazione contenuti)
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 headingAlcuni casi d'uso suggeriti
un capitolo in una guidai vari tabs di un documentole sezioni numerate di una tesile varie sezioni (boxes) di una Home Page che raggruppano contenuti generici (introduzione, contatti, news)
HTML 5HTML 5 Nuovi elementi Nuovi elementi sectionsection
HTML 5HTML 5 Nuovi elementi Nuovi elementi sectionsection
<!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>
HTML 5HTML 5 Nuovi elementi Nuovi elementi section -> esempiosection -> esempio
HTML 5HTML 5 Nuovi elementi Nuovi elementi section -> esempiosection -> esempio
L'elemento article rappresenta una porzione di contenuto indipendente di un documento, di una pagina o di un sitoAlcuni casi d'uso suggeriti
post di un forumarticolo di un giornalecommento inserito da un utentewidget interattivo
HTML 5HTML 5 Nuovi elementi Nuovi elementi articlearticle
HTML 5HTML 5 Nuovi elementi Nuovi elementi articlearticle
<!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 5HTML 5 Nuovi elementi Nuovi elementi article -> esempioarticle -> esempio
HTML 5HTML 5 Nuovi elementi Nuovi elementi article -> esempioarticle -> esempio
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 (e se
presente quelli della secondaria) del sitoesempio<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>
HTML 5HTML 5 Nuovi elementi Nuovi elementi navnav
HTML 5HTML 5 Nuovi elementi Nuovi elementi navnav
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).
Scoporaggruppare contenuti pubblicitari ed elementi di navigazione che puntino all'esterno del documento
HTML 5HTML 5 Nuovi elementi Nuovi elementi asideaside
HTML 5HTML 5 Nuovi elementi Nuovi elementi asideaside
<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 5HTML 5 Nuovi elementi Nuovi elementi aside -> esempioaside -> esempio
HTML 5HTML 5 Nuovi elementi Nuovi elementi aside -> esempioaside -> esempio
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 5HTML 5 Nuovi elementi Nuovi elementi headerheader
HTML 5HTML 5 Nuovi elementi Nuovi elementi headerheader
……… <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 5HTML 5 Nuovi elementi Nuovi elementi header -> esempioheader -> esempio
HTML 5HTML 5 Nuovi elementi Nuovi elementi header -> esempioheader -> esempio
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 5HTML 5 Nuovi elementi Nuovi elementi footerfooter
HTML 5HTML 5 Nuovi elementi Nuovi elementi footerfooter
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 5HTML 5 Nuovi elementi Nuovi elementi figure figure ee figcaption figcaption
HTML 5HTML 5 Nuovi elementi Nuovi elementi figure figure ee figcaption figcaption
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 5HTML 5 Media elements Media elements (video, audio, source, track)(video, audio, source, track)
HTML 5HTML 5 Media elements Media elements (video, audio, source, track)(video, audio, source, track)
Attributi comuni a video e audiosrc: locazione della risorsa da riprodurrepreload: può assumere i valori none (nessun download
preventivo), metadata (vengono recuperate le informazioni essenziali) o auto (default, sceglie il browser)
autoplay: riproduzione automatica o noloop: in loop o nomuted: stato di default dell’audio per i videocontrols: indica al browser di mostrare l’interfaccia
standard dei controlli (play, pausa e barra scorrimento)
HTML 5HTML 5 Media elements Media elements attributiattributi
HTML 5HTML 5 Media elements Media elements attributiattributi
L'elemento video è utilizzato per mostrare filmati, video e files audio con didascalia
Attributi specificiposter: indirizzo immagine alternativa se video non
disponibilewidth e height: intuitivi
Esempio
HTML 5HTML 5 Media elements Media elements videovideo
HTML 5HTML 5 Media elements Media elements videovideo
L'elemento audio rappresenta un suono o uno stream audio.
Esempio
HTML 5HTML 5 Media elements Media elements audioaudio
HTML 5HTML 5 Media elements Media elements audioaudio
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>
HTML 5HTML 5 Media elements Media elements sourcesource
HTML 5HTML 5 Media elements Media elements sourcesource