Struttura della pagina HTML 5: il tag html

Albero

Come ogni documento XML, ogni pagina HTML ha uno schema ad albero, composto da nodi con relazioni di parentela, definiti ad esempio come

  • Sibling
  • Children
  • Parent
  • Leaf

Come per ogni schema ad albero è presente anche un elemento root (radice), che contenga gli altri: il tag <html>.
Continua a leggere

Annunci

HTML 5: Supporto della History API

La History API è un metodo standard per la manipolazione della cronologia del browser. Alla parte di navigazione già presente nelle precedenti versioni di HTML è stata aggiunta anche la possibilità di inserire elementi alla cronologia e rispondere quando questi vengono rimossi dallo stack dall’utente premendo il tasto indietro del browser. Ciò significa che l’URL può continuare a fare il suo lavoro come identificatore univoco per la risorsa corrente, anche nelle applicazioni pesanti che non eseguono un aggiornamento completo della pagina. Come controllare se il browser supporta la History API?

Continua a leggere

Supporto dei Microdata HTML5

I microdati sono dei dati piiiiccolissimi.

Ovviamente scherzo… 😀

Con il termine Microdata si intende un metodo standard per aggiungere dati semantici alle pagine web: ad esempio si possono usare per dichiarare la presenza di licenze Creative Commons sui contenuti, fornire ulteriori informazioni sull’autore della pagina, possono essere trasformati in vCards

Lo standard HTML5 per i microdata include markup HTML ed un set di funzioni DOM: vi spiegherò in un altro articolo le loro caratteristiche e il loro utilizzo, per il momento è sufficiente sapere che non c’è alcun pericolo nell’includerli, saranno utili per alcuni motori di ricerca e semplicemente ignorati dagli altri; l’unico motivo per cui sarà necessario fare un controllo sarà qualora si abbia la necessità di manipolarli.

Continua a leggere

Supporto dell’autofocus HTML5 nei form

Autofocus

Non credo ci sia bisogno di spiegare che cosa sia l’autofocus e no, non stiamo parlando di fotografia. All’interno di una pagina web l’autofocus è la funzione grazie alla quale il browser imposta automaticamente il focus su un determinato elemento del form.
Ogni buon web designer sa come impostarlo con facilità grazie a Javascript: HTML 5 ha introdotto invece un attributo booleano per definirlo; tuttavia per il momento dovremmo comunque servirci di Javascrip per controllare se il browser del nostro utente lo supporta, ecco come:

Continua a leggere

Testare il supporto browser del testo segnaposto (placeholder) di HTML5

Un altro dei miglioramenti relativi ai form apportato da HTML5 è la possibilità di impostare un testo segnaposto visibile nei campi input quando questi non sono nello stato di focus o non sono già stati riempiti.

Metodi per controllare il supporto dei placeholder

Continua a leggere

Controlliamo il supporto dei nuovi input type HTML5 nei Browser

Oltre ai classici <input type=”text”> o <input type=”password”> sono stati introdotti numerosi tipi di campi per i form

  • <input type=”search“> per i campi di ricerca
  • <input type=”number“> per i numeri
  • <input type=”range“> per gli slider
  • <input type=”color“> per i color picker (selettori di colore)
  • <input type=”tel“> per i numeri telefonici
  • <input type=”url“> per gli indirizzi web
  • <input type=”email“> per gli indirizzi e-mail
  • <input type=”date“> per i selettori delle date di calendario
  • <input type=”month“> per i mesi
  • <input type=”week“> per le settimane
  • <input type=”time“> per la marca temporale
  • <input type=”datetime“> per una marca temporale precisa
  • <input type=”datetime-local”> per la marca temporale locale

Li vedremo più nel dettaglio in un successivo post, nel frattempo come verificare se il browser dell’utente li riconosce?

Continua a leggere

Controlliamo il supporto della Geolocalizzazione nei Browser

La geolocalizzazione (la verifica del posizionamento tramite indirizzo IP, connessione wireless, cella della rete telefonica, informazioni satellitari…) non fa esattamente parte di HTML5 ma ha comunque un ruolo importante nel processo di upgrade dell’esperienza web: si pensi a tutte le nuove app per gli smartphone, i siti e i social network che si basano sulla geolocalizzazione (Facebook Deals e Forsquare per dirne un paio).

Come verificare se il browser del nostro utente supporta la geolocalizzazione?

Continua a leggere

Il browser supporta le funzionalità offline di HTML5?

Grazie ad HTML5 è possibile fare in modo che il server invii al browser tutte le informazioni di cui ha bisogno (Html, Css, Javascript, immagini, video) per visualizzare il sito anche in modalità offline. Nel momento in cui l’utente sarà tornato online il server invierà nuovamente le informazioni aggiornate.

Controlliamo se il browser supporta questa funzionalità, ecco due modi:

Continua a leggere

Come controllare la compatibilità con il tag video HTML 5

Non è strettamente necessario controllarne la compatibilità, perché i browser che non supportano il nuovo tag per l’embedding <video>, semplicemente lo ignorano; può tuttavia rivelarsi utile per definire il miglior output video in base al browser. Se si vuole effettuare un controllo per proporre contenuti diversi in base al supporto o meno del tag video è possibile usare lo script Video For Everybody.
Per una dissertazione sui formati video per i browser si consultino i seguenti link: http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats e http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs

Se si desidera fare qualcosa di più avanzato del semplice play & stop, questi sono i metodi per il controllo:

Continua a leggere

HTML5: come controllare la compatibilità con i Canvas

HTML 5I Canvas sono utili perché sono elementi all’interno della pagina dove è possibile inserire ciò che si vuole: forme, tracciati, sfumature, trasformazioni.
Come controllare se il browser ne supporta le funzionalità?
Continua a leggere