MICHELEPISANI.IT

Guida HTML5

Guida all'uso dell'HTML 5: semantica, API ed esempi pratici

HTML5 - Tag, API, canvas, storage e molto altro con esempi applicati
Agosto 24
07:552014

HTML5 è un'evoluzione del modello di markup della pagina internet che sta cambiando e cambierà il modo di vivere il web sia lato sviluppatore che lato utente.
Rispetto all'HTML4 ci sono novità a livello di sintassi, con nuovi elementi e regole di disposizione dei contenuti all'interno di una pagina web, e le innovazioni ed integrazioni continuano anche a livello di API Javascript atte appunto a supportare le funzionalità che solitamente sono necessarie all'interazione tra un'applicazione del web 2.0 e l'utente finale quali ad esempio, il salvataggio delle informazioni, la geolocalizzazione del dispositivo dell'utente, l'utilizzo dell'applicazione anche in assenza di una connessione di rete generando un piccolo database lato utente per conservare le informazioni in attesa di una nuova connessione, interagire con l'applicazione in modo più fluido ed usabile, generare grafici 2D e 3D, ecc...

Dopo questa breve introduzione passerò subito all'atto pratico della questione in modo da non rendere questa guida troppo prolissa e permettervi così di poter abbracciare le caratteristiche di questa specifica nel modo più chiaro e veloce possibile.

Una prima considerazione da fare è che per indicare un documento HTML5 viene utilizzata, a livello di dichiarazione di Document Definition Type, la seguente istruzione (che tende a standardizzare tutte le precedenti versioni utilizzate fin'ora):

<!DOCTYPE html>


E' comunque possibile utilizzare nelle pagine una sintassi XML dichiarando sotto al doctype la seguente istruzione:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


Per garantire retrocompatibilità tra i browser e compatibilità cross-browser a livello di intepretazione degli stili al fine di sfruttare al massimo le proprietà dei fogli di stile, consiglio di inserire nell'head delle pagine un CSS di reset apposito per l'HTML5 che trovate su html5doctor.com, il quale è una modifica del classico file di reset che in aggiunta vede coinvolti i nuovi elementi inseriti dalla specifica, ed uno script con commento condizionale per le versioni di IExplorer inferiori alla 9, chiamato htmk5shim:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Inoltre per verificare se una determinata funzionalità è supportata o meno dal browser che sta leggendo la pagina e poter così agire di conseguenza per evitare il rischio che un utente rimanga bloccato e non possa usufruire a pieno dell'eventuale servizio, ci viene incontro una libreria Javascript chiamata Modernizr di semplice richiamo nell'head delle pagine come qualsiasi altro file .js esterno alla pagina:

<script src="js/modernizr.min.js"></script>


Il cui utilizzo è di estrema semplicità, per verificare ad esempio se il browser supporta o meno la geolocalizzazione basta semplicemente scrivere:

if (Modernizr.geolocation) {
  // operazioni varie
} else {
  // operazioni alternative
  // come un messaggio all'utente
  // o l'utilizzo di plugin esterni
}


La guida proseguirà con un'introduzione di base per descrivere la sintassi, gli elementi strutturali delle pagine web (sia i nuovi che quelli non più previsti nelle specifiche), la gestione dei form e degli attributi dei relativi campi per poi passare ad una panoramica sulle nuove API, sulla gestione del canvas e dei file multimediali.

Tags
Condividi

2 Commenti

  1. Lucas giovedì 19 marzo 2015 alle ore 01.15

    Molto scorrevole, complimenti! Senza contare che ormai si sta andando sempre più verso l'HTML5 ed è bene capirne le sue potenzialità. Il Flash ormai è superato. Anche Youtube per i browser più diffusi ha abbandonato il Flash in favore di questo linguaggio.

    Rispondi a questo commento
    • MicheleAutore venerdì 20 marzo 2015 alle ore 18.58

      Eh già... e se vogliamo dirla tutta gli "Strumenti per i Webmaster" segnalano come un errore da risolvere l'utilizzo di Flash all'interno delle pagine di un sito, affermando che la maggior parte dei browser per dispositivi mobili non lo supportano, e invitano pertanto alla progettazione di animazioni tramite l'uso di tecnologie web moderne... e qui entra in gioco appunto l'HTML5.

      Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …