Html 5: una breve guida!

+

Diamo vita al tuo portale web, gestiamo la tua

visibilità online, promuoviamo il tuo business

+ 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

+

HTML5

+ 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


4

+

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/2015 Enrico Mainero - www.elamedia.it

5

+ 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


6

+ 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


7

+ 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


8

+ 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


9

+ 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


10

+ 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


11

+ 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


12

+ 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


13

+ 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


14

+ 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


15

+ 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


16

+ 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


17

+ 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


18

+ 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


19

+ 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


20

+ 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


21

+ I nuovi elementi di formattazione del testo

05/01/201


22

+ 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


23

+ 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


24

+ 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


25

+ 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


26

+ 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


27

+ 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


28

+ 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


29

+ 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


30

+ 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


31

+ 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


32

+ 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


33

+ 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


34

+ 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


35

+ 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


36

+ 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


37

+ 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


38

+ 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


39

+ 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


40

Html 5: una breve guida!

Internet

Transcript of Html 5: una breve guida!