Html 5: una breve guida!
•
0 likes•715 views
Una breve guida ai principali elementi e alle novità di HTML 5
Html 5: una breve guida!
- 1. + Diamo vita al tuo portale web, gestiamo la tua visibilità online, promuoviamo il tuo business
- 2. + 2 Chi siamo ElaMedia Group è una Web Agency di Roma che si occupa di: • Gestire dei portali di proprietà • Promuovere l'attività dei propri clienti • Creare e gestire portali web • Proporre dei corsi di formazione (filiere ICT e Comunicazione e Marketing) 05/01/201 5 Enrico Mainero - www.elamedia.it 2
- 3. + HTML5
- 4. + Cos’è? HTML5 è la quinta versione del linguaggio fondamentale di Internet. Si tratta di una evoluzione, non di una rivoluzione, per adattare i siti alle nuove esigenze del web. È in via di definizione, per essere rilasciato nel 2014. 05/01/201 5 Enrico Mainero - www.elamedia.it 4
- 5. + Obiettivi HTML5 • rendere HTML autonomo da estensioni proprietarie dei browser (Flash e simili) • offrire la massima compatibilità fra browser diversi (e dispositivi diversi) 05/01/2015Enrico Mainero - www.elamedia.it 5
- 6. + Le novità dell’HTML5 • Aggiornamenti per quanto riguarda la semantica nel markup • Novità sulle possibilità di interazione dell'utente con la pagina web • Capacità di memorizzare tantissimi dati in locale 05/01/201 5 Enrico Mainero - www.elamedia.it 6
- 7. + Le novità dell’HTML5 • Nuovi tag semantici per connotare il significato dei contenuti • Eliminati alcuni tag obsoleti • Novità per quanto riguarda le form • Supporto alle tecnologie legate ad animazioni (javascript ecc...) • Nuovi tag audio e video per controllare direttamente il contenuto multimediale 05/01/201 5 Enrico Mainero - www.elamedia.it 7
- 8. + Rapporto con i browser Ogni browser supporta alcune parti specifiche di HTML5. Analizziamo lo stato di implementazione in quelli che sono i principali browser attualmente sul mercato. Google Chrome Ha un supporto molto esteso alle funzionalità HTML5 che comprende praticamente tutte le specifiche della nuova versione HTML Explorer Supporta solo le funzionalità più stabili e mature, e solo dalla versione IE9 05/01/201 5 Enrico Mainero - www.elamedia.it 8
- 9. + Rapporto con i browser Firefox Ad ogni rilascio di una nuova versione, supporta sempre maggiori funzionalità Opera Supporta la maggior parte delle funzionalità HTML5 ma non i tag semantici Safari Supporta gran parte delle funzionalità , ad esclusione degli elementi figure ed altre estensioni particolari 05/01/201 5 Enrico Mainero - www.elamedia.it 9
- 10. + Rapporto con il mobile Per questi dispositivi HTML5 è fondamentale in quanto supporta le app offline, garantendo il funzionamento dei programmi in caso di interruzione di connettività . Supporta la geolocalizzazione per sfruttare al meglio il GPS Supporto alla compilazione form in particolare per dispositivi touch HTML5 è stato scelto soprattutto per la sua indipendenza dai software per la gestione di contenuti multimediali (Flash, ecc…) 05/01/201 5 Enrico Mainero - www.elamedia.it 10
- 11. + Nuovi elementi del Markup Restano validi molti elementi del «vecchio» HTML Compaiono nuovi tag e attributi per gestire al meglio contenuti innovativi e agevolare l’inserimento dei dati da parte dell’utente. Ad oggi sono documentati una trentina di nuovi elementi, suddivisi in • Tag semantici per una migliore strutturazione delle pagine • Elementi per la formattazione dei contenuti di testo • Elementi interattivi 05/01/201 5 Enrico Mainero - www.elamedia.it 11
- 12. + Nuovi elementi di formattazione della pagina Iniziano ad andare in disuso le tabelle, a vantaggio del tag div + float- clear Viene affrontato in maniera più radicale il discorso della formattazione, grazie a nuovi elementi di markup. Se il div era abbastanza versatile, gli vengono affiancati tag con una finalità molto più precisa e specifica. 05/01/201 5 Enrico Mainero - www.elamedia.it 12
- 13. + Nuovi elementi di formattazione della pagina Grazie ai nuovi tag HTML5 otteniamo una pagina suddivisa in parti ben strutturate a livello semantico. Viene anche facilitata la lettura da parte dei browser: il markup non è più anonimo ma più descrittivo, a tutto vantaggio dei crawler e dei bot Ogni elemento del markup specifica chiaramente il contenuto attraverso i tag, a vantaggio dell’indicizzazione. 05/01/201 5 Enrico Mainero - www.elamedia.it 13
- 14. + Elemento section Definisce una sezione all’interno di una pagina, ovvero una parte del testo dotata di una determinata struttura omogenea con una connotazione particolare rispetto al resto del testo. • Descrizione di un prodotto • Vari paragrafi di un articolo • Informazioni di contatto Rispetto al div, le informazioni contenute in section hanno uno stesso valore semantico. 05/01/201 5 Enrico Mainero - www.elamedia.it 14
- 15. + Elemento hgroup Il tag hgroup specifica l’insieme dei tag di intestazione che sono utilizzati per specificare titoli e sottotitoli Può essere utilizzato all’interno di section ma anche dentro altri elementi più specifici: header article aside nav 05/01/201 5 Enrico Mainero - www.elamedia.it 15
- 16. + Elemento article Si tratta di una sezione di contenuto semanticamente importante e ben definita: • Articolo di una rivista • Post di un blog • News • Commento a un contenuto In un elemento article possono essere inseriti altri elementi article (commenti nei post) Article contiene gli elementi specificati prima 05/01/201 5 Enrico Mainero - www.elamedia.it 16
- 17. + Elemento aside Si tratta di una sezione in cui è presente un contenuto collegato all’argomento della pagina, ma a sé stante. Ad esempio: • un modulo di articoli correlati alle informazioni principali • Banner pubblicitario • Elenco di link • Approfondimenti e note 05/01/201 5 Enrico Mainero - www.elamedia.it 17
- 18. + Elemento nav Contiene informazioni necessarie ad una corretta navigazione nel sito Insieme di link per accedere ad altre sezioni del sito, in particolare un menù laterale 05/01/201 5 Enrico Mainero - www.elamedia.it 18
- 19. + Elemento header Si tratta di un blocco di intestazione che può andare • Nel corpo del testo • All’interno di una sezione specifica come quelle viste in precedenza 05/01/201 5 Enrico Mainero - www.elamedia.it 19
- 20. + Elemento footer È un blocco di chiusura interno alla pagina o ad una sezione, identificabile come l’elemento di chiusura di una pagina web. Viene utilizzato per segnalare contenuti informativi a livello di proprietario del sito, copyright, o insieme di link. Può contenere altri elementi, anche nav 05/01/201 5 Enrico Mainero - www.elamedia.it 20
- 21. + Elemento figure e figcaption Figure è un blocco a parte rispetto al testo, in cui inserire elementi di contorno • Immagini • Grafici • Esempi • Citazioni • Tabelle Con figcaption aggiungiamo didascalie e descrizioni 05/01/201 5 Enrico Mainero - www.elamedia.it 21
- 22. + I nuovi elementi di formattazione del testo 05/01/201 5 Enrico Mainero - www.elamedia.it 22
- 23. + Elemento bdi Permette di isolare parte del testo e andarla a marcare per cambiarne la direzione (lingua araba). Il suo attributo dir permette di specificare attraverso i valori ltr (da sinistra a destra) rtl (da destra a sinistra) auto 05/01/201 5 Enrico Mainero - www.elamedia.it 23
- 24. + Elemento mark Serve per evidenziare la porzione di un testo (come il classico evidenziatore di word). Attraverso l’attributo «class» specifichiamo il colore rispetto al giallo standard 05/01/201 5 Enrico Mainero - www.elamedia.it 24
- 25. + Elemento time Elemento che va a rappresentare un orario o una data. Va a connotare una parte del testo fornendole un attributo temporale. time /time Attributi di riferimento: datetime per specificare anche il fuso UTC pubdat per far riferimento alla data di pubblicazione del contenuto di article o comunque della pagina. 05/01/201 5 Enrico Mainero - www.elamedia.it 25
- 26. + Elemento wbr Permette di introdurre una interruzione di riga solo se necessario ovvero facendo riferimento alle diensioni della pagina e del tag contenitore. 05/01/201 5 Enrico Mainero - www.elamedia.it 26
- 27. + I nuovi elementi interattivi La vera novità di HTML5 sono gli elementi per offrire interattività alle pagine. Grazie a questi elementi le azioni vengono effettuate direttamente sulla pagina, senza dover dunque far entrare in gioco il server. 05/01/201 5 Enrico Mainero - www.elamedia.it 27
- 28. + Elemento details e summary Elemento details raggruppa informazioni per mostrarle a richiesta all’interno della stessa pagina. Può contenere un tag figlio summary che va a descrivere in breve il contenuto attraverso un riepilogo. Si può sfruttare ad esempio per realizzare un box per il download L’attributo open di details rende visibile il contenuto del tag 05/01/201 5 Enrico Mainero - www.elamedia.it 28
- 29. + Elemento menu e command Contenitore per raggruppare determinati comandi e realizzare menù e toolbar contestuali. Attributi: • Label per indicare una etichetta di testo • Type per definire il tipo di menù sfruttando tre valori • context: menù contestuale, se attivo l’utente può interagire solo coi comandi presenti • toolbar: il menù è una barra di strumenti con cui l’utente può interagire direttamente • list: semplice lista di elementi con determinati comandi 05/01/201 5 Enrico Mainero - www.elamedia.it 29
- 30. + Elemento menu e command Possiamo sfruttare i tag di elenco per creare dei menù ordinati gerarchicamente. Altrimenti usiamo il nuovo tag command per andare a creare un comando direttamente nella lista o per creare combinazioni di tasti e scorciatoie. 05/01/201 5 Enrico Mainero - www.elamedia.it 30
- 31. + Attributi per l’accessibilità HTML5 aggiunge nuovi attributi per l’accessibilità sfruttando ARIA (Web accessibility initiative – Accessible Rich Internet Applications). Si tratta di un insieme di specifiche per definire ruolo stato e proprietà di una pagina, così da poter essere interpretata al meglio dai software e dalle tecnologie di supporto. 05/01/201 5 Enrico Mainero - www.elamedia.it 31
- 32. + Le form nell’HTML5 Le Form sono utilizzate in HTML per far inviare agli utenti dati e contenuti al server, il quale procede ad elaborarli e processarli. Lato Client – HTML, la form è composta da tag in grado di aggiungere componenti logici relativi ai dati Caselle di test Liste Selezioni multiple Grazie ad HTML5 c’è maggiore interattività con l’utente e più versatilità rispetto ai browser 05/01/201 5 Enrico Mainero - www.elamedia.it 32
- 33. + Cosa sono le form Una form nasce dalla composizione di una serie di tag per gestire input di dati. Il tag principale è appunto form che racchiude il resto delle componenti. Label indica la descizione del campo Input determina la possibilità di inserimento di testo. Di default ha la proprietà type impostata come text 05/01/201 5 Enrico Mainero - www.elamedia.it 33
- 34. + Elementi HTML delle form Name utile al server per ottenere il valore espresso nel browser value proprietà che determina il valore da associare all’invio Action è una proprietà del tag form che specifica la pagina di destinazione del contenuto della form stessa Method stabilisce l’azione dell’HTTP, ovvero post: invia dati nel corpo della richiesta. 05/01/201 5 Enrico Mainero - www.elamedia.it 34
- 35. + Inviare il contenuto della form Attraverso ciò che è contenuto in input determiniamo il comportamento successivo al clic sul pulsante «invio della form». L’attributo necessario è type con valore submit Value è l’attributo che permette di personalizzare il testo nel pulsante di invio. Gli altri valori di type permettono di gestire scelte multiple. Radio non permette la scelta multipla checkbox permette la scelta multipla 05/01/201 5 Enrico Mainero - www.elamedia.it 35
- 36. + Elenchi a discesa Il tag select permette l’inserimento di valori numerosi, per elenchi a discesa (es: scelta di una provincia da elenco) Attributi di select size determina l’altezza della lista Optgroup rende più ordinata la visualizzazione 05/01/201 5 Enrico Mainero - www.elamedia.it 36
- 37. + Facilitare l’uso dei campi L’attributo placeholder permette di mostrare un valore di riferimento (in grigio) nel campo, per offrire un suggerimento all’utente. L’attributo autocomplete settato su off disabilità l’aiuto nel completamento di un campo (ottimo per salvaguardare la privacy). 05/01/201 5 Enrico Mainero - www.elamedia.it 37
- 38. + Validare le form Serve a far compilare nella maniera migliore tutti i campi necessari. Attributo required in uno qualsiasi dei tag del campo che vogliamo rendere obbligatorio. 05/01/201 5 Enrico Mainero - www.elamedia.it 38
- 39. + Audio e video I tag audio – video permettono di gestire i file relativi alla riproduzione di suoni e filmati. Per entrambi abbiamo l’attributo src a cui associare il percorso del file da riprodurre L’attributo controls per far visualizzare la classica barra di controllo Autoplay fa avviare il contenuto quando si avvia la pagina Loop fa riprodurre il contenuto all’infinito. 05/01/201 5 Enrico Mainero - www.elamedia.it 39
- 40. + Audio e video Attributo track permette di associare elementi utili dal punto di vista dell’accessibilità (file di sottotitoli). Attributi di track Src per indicare il percorso del file da caricare Scrlang per indicare la lingua della traccia Kind per indicare il tipo di «track-traccia» (sottotitolo, descrizione…) Label per indicare la descrizione della traccia 05/01/201 5 Enrico Mainero - www.elamedia.it 40