Una breve guida ai principali elementi e alle novità di HTML 5

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