Guida HTML5
Introduzione a HTML5
L'obiettivo di questa guida è fornire agli autori (Web developers, Webmasters, grafici e chiunque veicoli contenuti formattati tramite codice HTML) un primo strumento utile per entrare in contatto con le specifiche del nuovo linguaggio; si propone inoltre di essere un valido mezzo per la consultazione delle singole nuove features introdotte. La guida non tratta HTML nel suo complesso ma...
Storia e cronologia di HTML
Il lungo cammino verso HTML5 parte dalla prima definizione di HTML avvenuta all'inizio degli anni '90. Il neonato Internet aveva bisogno di un linguaggio di formattazione dei contenuti che li rendesse fruibili in modo organizzato, questi sarebbero poi stati veicolati all'utente avvalendosi di un browser, un software cioè che li avrebbe mostrati così come indicato dai comandi (tags) che...
Il DOCTYPE di HTML5
La sintassi HTML di HTML5 richiede la dichiarazione di un doctype in testa al documento per assicurare che il browser renderizzi correttamente la pagina; quando la risorsa è servita come HTML (tipo MIME text/html) la sintassi corretta è riportata nel codice minimale che segue:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titolo documento</title>
</head>
...
Organizzare i contenuti con HTML5 – section
HTML5 introduce un buon numero di nuovi elementi, inizieremo a descrivere quelli strettamente connessi alla organizzazione dei contenuti ed alla strutturazione della pagina.
Il working draft elenca in questa macrocategoria i seguenti elementi:
section
article
aside
hgroup
header
footer
nav
figure
figcaption
Darò per ognuno, oltre alla traduzione della definizione fornita del W3C, qualche suggerimento per l'utilizzo, attenendomi quanto più strettamente possibile alle linee indicate nel documento.
Prima di iniziare permettetemi...
Organizzare i contenuti con HTML5 – article, nav ed aside
Article
Definizione formale
L'elemento article rappresenta una porzione di contenuto indipendente di un documento, di una pagina o di un sito, tale porzione è sostanzialmente distribuibile e riusabile indipendentemente dal contesto in cui viene definita.
Come accennato nella descrizione di section, campi di applicazioni di article possono essere i un post di un forum, un articolo di un magazine, un commento inserito...
Organizzare i contenuti con HTML5 – header, hgroup e footer
Vediamo il nuovo modo di organizzare i contenuti con HTML5.
header
Definizione formale
L'elemento header rappresenta un gruppo di informazioni introduttive o di aiuto alla navigazione.
Benché header sia primariamente pensato come un contenitore di headings questa applicazione non è l'unica possibile. L'elemento può essere utilmente impiegato per racchiudere qualsiasi contenuto abbia un intento introduttivo, come un sommario od un logo.
<header>
<p>Benvenuti nel...
Organizzare i contenuti con HTML5 – figure e figcaption
Definizione formale di figure
L'elemento figure rappresenta un insieme di elementi e testo, opzionalmente corredato da una didascalia, indipendente e tipicamente riconoscibile come entità atomica (nell'accezione di inscindibile) all'interno del documento.
Definizione formale di figcaption
L'elemento figcaption rappresenta la didascalia o legenda per il resto del contenuto dell'elemento che ne è parent (contenitore diretto), ossia dell'elemento figure.
Il draft indica tra gli usi consigliati...
I media elements di HTML5: video, audio, source e track
HTML5 introduce due elementi appositamenti creati per facilitare l'inserimento di contenuti multimediali con l'obiettivo dichiarato di colmare le lacune sul tema presenti nella precedente specifica; appartengono alla categoria dei media elements:
video
audio
Sono strettamente legati ai media elements i seguenti elementi:
source
track
Definizione formale di media element
I media elements (elementi multimediali) sono utilizzati per presentare all'utente filmati e files audio.
Definizione formale di media...
Nuovi elementi in HTML5 – embed, mark e progress
Il working draft elenca una serie di nuovi elementi non classificandoli esplicitamente, compongono la lista:
embed
mark
meter
progress
time
ruby, rt e rp
bdi
wbr
canvas
command
details
datalist
keygen
output
Li analizzeremo in ordine, uno ad uno, partendo da embed.
embed
Definizione formale
L'elemento embed rappresenta un punto di integrazione per una applicazione esterna (tipicamente non-HTML) o per un contenuto interattivo.
embed prevede la presenza dei seguenti attributi:
src: l'indirizzo della risorsa da includere
type: il MIME type...
Nuovi elementi in HTML5 – meter e time
Vediamo, di seguito, i due nuovi elementi meter e time.
meter
Definizione formale
L'elemento meter rappresenta una misura scalare all'interno di un intervallo definito, oppure un valore frazionario; per esempio l'utilizzo di un disco rigido, la rilevanza del risultato di una query oppure la frazione della popolazione votante che ha optato per un particolare candidato.
A differenza di progress, meter non è pensato...
Nuovi elementi in HTML5 – ruby, rt, rb, bdi e wbr
Vediamo di seguito alcuni nuovi elementi di HTML5:
ruby
Definizione formale di ruby
L'elemento ruby permette di marcare con ruby annotations uno o più frammenti di testo. Le ruby annotations sono piccole parti di testo presentate in associazione al testo base, utilizzate soprattutto nella tipografia asiatica come guida per la pronuncia o per includere altre annotazioni.
Il contenuto dell'elemento è definito essere quello...
Nuovi elementi in HTML5 – [ menu ] e command
Gli elementi menu e command fanno parte della famiglia degli interactive elements, che comprende anche details e summary. Come suggerisce la classificazione sono pensati per implementare interazioni con l'utente.
Sebbene il tag menu non sia propriamente di nuova introduzione lo inserisco nella lista dei nuovi elementi perchè ha subito un significativo cambiamento semantico atto a renderlo il fulcro delle nuove...
Nuovi elementi in HTML5 – details e summary
details e summary
Definizione formale
L'elemento details rappresenta informazioni addizionali o controlli che l'utente può ottenere su richiesta, l'elemento summary ne fornisce il sommario, la legenda o la descrizione.
Lo scenario che ci aspettiamo è quindi quello in cui un utente richieda delle informazioni addizionali non visualizzate di default o comunque che possano essere nascoste; un esempio reale potrebbe essere una widget...
Nuovi elementi in HTML5 – datalist, keygen ed output
In questa lezione vedremo cosa sono e come utilizzare gli elementi datalist, keygen ed output.
datalist
Definizione formale
L'elemento datalist raggruppa un insieme di opzioni che rappresentano quelle predefinite per altri controlli. I contenuti (testuali) dell'elemento hanno lo scopo di agire come fallback per i vecchi browsers; questo contenuti sono inframezzati dalle opzioni (relative). L'elemento non ha un significato visuale, per cui...
Progettare i forms con HTML5 (parte 1)
HTML5 si propone di offrire una esperienza totalmente nuova nella fruizione dei forms; i mezzi per assicurarla passano attraverso l'introduzione di una corposa lista di nuove tipologie di input e l'adozione di attributi espressamente pensati per implementare i controlli base sulla compilazione senza ricorrere a Javascript.
Attività molto comuni come l'assegnazione del focus od il toggle del suggerimento inserito in...
Progettare i forms con HTML5 (parte 2) – Esempi
Ipotizziamo di voler creare un form di inserimento da proporre all'utente utilizzando quanto più possibile le nuove possibilità offerte:
<!doctype html>
<html>
<head>
<title>Disegnare i forms con HTML5</title>
<style>
body {
margin: 0; padding: 0;
font-size: 12px;
font-family: "Verdana", sans-serif;
...
L’elemento canvas e le canvas API (parte 1) – Fondamenti
HTML5 introduce l'elemento canvas (tela, area di disegno) e le relative APIs per permettere di generare o modificare elementi grafici (bitmap) con relativa semplicità.
Definizione formale
L'elemento canvas fornisce un'area di disegno che può essere sfruttata dagli scripts (tipicamente codice Javascript) per disegnare on the fly grafici, grafica per videogame, immagini; può avere un contesto (context) primario che è il primo...
L’elemento canvas e le canvas API (parte 2) – Creazione di testi
Come abbiamo visto le APIs espongono funzionalità per disegnare forme geometriche, semplici o complesse, ma non si limitano a questo; fanno parte delle specifiche una serie di settings e funzioni dedicate alla creazione di testi:
context.font
Se non facente parte di un assegnamento ritorna il font-setting corrente; può essere impostato seguendo la sintassi CSS della proprietà font, l'ordine di definizione delle varie...
L’elemento canvas e le canvas API (parte 3) – Gradienti, ombreggiature, trasformazioni
Proseguiamolo studio delle canvas di HTML% parlando di gradienti, ombreggiature e trasformazioni.
Gradienti
Per colorare il piano cartesiano della lezione precedente ho utilizzato un gradiente lineare, vediamo nel dettaglio tutte le possibilità che vengono offerte per definire gradienti:
gradient = context.createLinearGradient(x0, y0, x1, y1)
Restituisce un oggetto CanvasGradient che rappresenta un gradiente lineare che colora la linea definita dalle coordinate passate come parametri.
gradient...
L’elemento canvas e le canvas API (parte 4) – Tipi di linee e manipolazione per pixel
Proseguiamo nello studio delle canvas.
Tipi di linee
La specifica mette a disposizioni diverse varianti per modificare lo stile delle linee che è possibile disegnare:
context.lineWidth : getter/ per definire la dimensione (spessore) della linea.
context.lineCap : getter/ per definire il line cap style (lo stile con cui viene disegnata la terminazione della linea), i valori definibili sono butt, round, and square.
context.lineJoin :...
Nuovi attributi, attributi ed elementi modificati in HTML5
HTML5 introduce alcuni nuovi attributi a vari elementi che erano già parte di HTML4:
Gli elementi a ed area ora possiedono l'attributo media per coerenza con l'elemento link.
L'elemento area per coerenza con a e link ora possiede hreflang, type e rel.
L'elemento base ora prevede la presenza di un attributo target, per corenza con a.
L'elemento meta ora possiede un attributo charset (feature...
Elementi ed attributi assenti (non inclusi) in HTML5 ed altre differenze con HTML4
Come indicato all'inizio di questa guida non esistono in HTML5 veri e propri elementi deprecati; esistono tuttavia tags obsoleti che gli autori non devono più utilizzare e che invece gli user agents sono ancora chiamati a supportare per retrocompatibilità , vediamo di quali elementi stiamo parlando.
Elementi considerati come visual-markup e i cui effetti sono più correttamente ottenibili con i CSS:
basefont
big
center
font
strike,...
Le Geolocation APIs (versione 2) – parte 1
Le APIs di geolocalizzazione non sono tecnicamente parte delle specifiche HTML5, sono descritte in un documento separato (che trovate qui)che riporta come "incipit":
"le APIs definiscono un'interfaccia di alto livello allo scopo di fornire, tramite script, accesso alle informazioni relative alla posizione geografica associata ad un device (dispositivo)".
Per dispositivo si intende un cellulare, un tablet, laptop ospitante l'applicazione...
Le Geolocation APIs (versione 2) – parte 2
Continuiamo in questa lezione la nostra analisi delle interfacce implicate nella geolocalizzazione.
L'interfaccia Position
L'interfaccia funziona come contenitore delle informazioni di geolocalizzazione ottenute tramite le APIs.
Signature
interface Position {
readonly attribute Coordinates? coords;
readonly attribute Address? address;
readonly attribute DOMTimeStamp timestamp;
};
Analizziamo i vari attributi partendo da coords: rappresenta un oggetto contenente le coordinate geografiche ed alcune infomazioni aggiuntive, la...
Le Geolocation APIs (versione 2) – Esempi
Ora che abbiamo padroneggiato la teoria il draft ci viene in aiuto portandoci all'attenzione una serie di esempi divisi per tipo di richiesta:
Richieste "one-shot"
function success (pos) {
// # Mostra una mappa centrata a
}
// # La richiesta
navigator.geolocation.getCurrentPosition(success);
La stessa richiesta implementata gestita tramite una closure.
// # La richiesta
navigator.geolocation.getCurrentPosition(function(pos) {
// # Mostra una mappa centrata a
});
Richieste...
Drag&Drop HTML5 – fondamenti ed interfacce coinvolte
Esistono, nascosti dietro le luci sfavillanti di HTML5 alcuni tesori nascosti, trattati separatamente e senza intorno il clamore suscitato da altre features.
Stiamo parlando del meccanismo di Drag&Drop nativo e dei microdata; iniziamo dal primo (il cui draft trovate a questo indirizzo): la ben nota ( sin da quando vennero sviluppate le APIs per IE5) operazione di Drag&Drop è descritta...
Drag&Drop – Gli eventi associati
Ogni evento che partecipa al processo di click, trascinamento e deposito può essere intercettato e gestito con un listener, gli eventi intercettabili sono:
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
Iniziamo con un esempio semplice: intercettiamo il dragstart, l'inizio del trascinamento:
<!doctype html>
<html>
<head>
<title>Drag&Drop - il dragstart</title>
<style>
#divdrag {
width: 300px;
height: 100px;
...
Microdata HTML5 – i fondamenti
L'altro underdog di HTML5 si chiama microdata; l'idea è quella di estendere HTML aggiungendo un vocabolario personalizzato per le nostre pagine.
Il vocabolario è in buona sostanza un insieme (Item) di proprietà nella forma di una mappa chiave-valore.
Trovate il working draft dedicato qui.
itemscope ed itemprop
La creazione di un item passa dall'uso di un attributo itemscope. Per aggiungere una proprietà all'item...
Microdata DOM API
Il significato di inserire informazioni aggiuntive negli elementi è tipicamente quello di utilizzarle per mostrarle all'utente. Esiste quindi un modo per accedervi tramite script, le microdata DOM APIs.
Per ottenere la lista di items è necessario ricorrere al metodo document.getItems(typeNames) che ritorna una NodeList contenente gli items del tipo indicato o tutti qualora non fosse fornito il parametro typeNames. Ovviamente...
Webstorage HTML5
Iniziamo con questa lezione il viaggio tra le specifiche meno note che ruotano intorno ad HTML5 in un orbita più "periferica".
Alcune delle features che vedremo sono ancora in una fase di definizione relativamente iniziale e l'adoption da parte dei vari user-agents è ancora assolutamente parziale. Eviteremo per questo di dettagliare a fondo i temi, preferendo dare una introduzione, per...
HTML5 File API – Fondamenti
In questa lezione ci occuperemo di un'altra importante specifica relativa ad HTML5, descritta in un documento separato che potete consultare a questo indirizzo, si tratta File APIs che permettono di gestire i files lato client.
File APIs
Poiché lavorare con i files è un task quotidiano, anche sul web, HTML5 finalmente ci fornisce delle APIs standard per farlo.
La specifica permette...
HTML5 File API – Esempi
Partiamo dalla semplice lettura di un file con copia del contenuto nel browser; ho utilizzato jQuery solamente per rendere il codice più conciso ed elegante e la closure su fileReader.onload per lo stesso motivo:
<!doctype html>
<html>
<head>
<title>Leggere i Files tramite le File APIs</title>
<style>
fieldset {
...
Le FileSystem API di HTML5 – Fondamenti ed interfacce coinvolte
Naturale estensione delle File APIs sono le FileSystem APIs, il cui scopo risiede nel permettere ad una Web Application di richiedere uno spazio dedicato per salvare dati, in maniera temporanea o persistente. L'accesso avviene in modalità sandboxed: l'applicazione potrà cioè accedere alla sola porzione del filesystem ad essa dedicata.
Lo user-agent dovrà chiedere all'utente il permesso per allocare spazio sul...
FileSystem API di HTML5 – Esempi
Prima di vedere qualche esempio sottolineo che al momento soltanto Chrome supporta le APIs; partiamo con il codice necessario per ottenere un filesystem e per creare un file:
<!doctype html>
<html>
<head>
<title>Ottenere un filesystem e creare un file</title>
<script src="jquery.js"></script>
<script>
// # Se abbiamo ottenuto il filesystem
function successHandler(fileSystem) {
...
WebWorkers HTML5
Quando ragioniamo in termini di concorrenza la prima cosa che salta alla mente è la parola Thread, per alcuni il termine è associato a Java ed in particolare ad un esame universitario non particolarmente semplice da superare. Da oggi è possibile collegare a "concorrenza" un altro termine il cui campo di applicazione è il mondo client: i WebWorkers.
Si tratta...
Offline API HTML5
Anche in un periodo storico in cui quasi ogni dispositivo è connesso alla rete è necessario pensare ad un meccanismo che permetta di gestire le nostre Web Applications offline; pensate ad esempio ad un dispositivo mobile che per un certo lasso temporale perda la connessione per problemi di rete o perchè la zona in cui si trova ha una...