HTML 5. Un linguaggio di markup che si può considerare ancora in fase di definizione Rappresenta l'evoluzione diretta di HTML 4.01 All’interno convivono.

Presentazione sul tema: "HTML 5. Un linguaggio di markup che si può considerare ancora in fase di definizione Rappresenta l'evoluzione diretta di HTML 4.01 All’interno convivono."— Transcript della presentazione:

1 HTML 5

2 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 Cosa é

3 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 Funzionalità

4 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 Limiti versioni precedenti

5 Titolo documento …….. HTML 5 Sintassi (doctype)

6 section article aside header footer nav figure figcaption HTML 5 Nuovi elementi (organizzazione contenuti)

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

8 SECTION #container { margin: 0 auto; width: 400px; } Introduzione ad HTML5 Definizione Perchè HTML5 Storia Da HTML Tags ad HTML 4.01 XHTML Nuovi tags Section Article Nav Aside... HTML 5 Nuovi elementi section -> esempio

9 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

10 Il mio Blog article { border: 1px solid #ccc; width: 350px; padding: 4px; } section article { width: 300px; margin: 0 auto; } Titolo articolo In questo articolo parleremo di... Commenti Postato da: Johnny Cascaterra Pessimo articolo, dove vuoi andare a parare? HTML 5 Nuovi elementi article -> esempio

11 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 sito esempio Home page Contatti Dove siamo HTML 5 Nuovi elementi nav

12 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

13 Questi sono dei contenuti di approfondimento marginali rispetto al contenuto principale Link a pagine correlate al contenuto Informazione correlata al contenuto Pubblicità [immagini pubblicitarie] HTML 5 Nuovi elementi aside -> esempio

14 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

15 ……… Benvenuti nel mio sito personale Scopri le varie sezioni! Home Contatti Dove siamo News Le novità più importanti della settimana, entra per scoprirle nel dettaglio. Blog Giorno per giorno, quello che mi ha colpito. ………. HTML 5 Nuovi elementi header -> esempio

16 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 © 2012 ItsosMilano.it - author Johnny Cascaterra Il tag footer L'elemento footer rappresenta... Pubblicato da Tirandietro HTML 5 Nuovi elementi footer

17 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 Nuovi elementi figure e figcaption

18 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 (video, audio, source, track)

19 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 attributi

20 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 video

21 L'elemento audio rappresenta un suono o uno stream audio. Esempio HTML 5 Media elements audio

22 L'elemento source permette all'autore di specificare delle alternative per le risorse definite in un elemento multimediale (audio, video) Esempio Il browser non è in grado di riprodurre alcuno dei file indicati! HTML 5 Media elements source