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

Struttura della pagina Web HTML5: Il Doctype

l Doctype è stato inventato da Microsoft per ovviare ai “quirks” (leteralmente “stranezze”) di rendering su Netscape4 e Internet Explorer4.

Le famiglie dei Doctype sono le seguenti:

Quirks Mode
Per renderizzare bene un documento HTML in Quirks mode i browser violano le specifiche dei Web format, al fine di riuscire a mostrare una pagina nonostante gli errori di markup che si trovano prevalentemente nei file HTML creati negli anni ’90.

Standards Mode
Nello Standards mode i browser provano a trattare i documenti HTML in maniera conforme agli standard. HTML5 definisce questo metodo come “No quirks mode”.

Almost Standards Mode
Incredibile a dirsi, Firefox, Safari, Chrome, Opera (dal 7.5) e Internet Explorer (dalla versione 8) hanno un metodo chiamato “Modalità Quasi Standard” che implementa la dimensione verticale delle celle delle tabelle in modo tradizionale e non in accordo rigoroso con le specifiche CSS2. HTML5 chiama questa modalità “Limited quirks mode”.

Continua a leggere

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

HTML5: Controllo di compabilità del browser con i Web Workers

I Web workers forniscono uno standard ai browser per lanciare Javascript in background: grazie ai web workers è possibile lanciare operazioni multiple anche in contemporanea, facendo calcoli matematici complessi,  richieste di rete, accedendo ai local storage, mentre l’utente interagisce con la pagina web. Prima di tutto però, è necessario controllare se tale funzionalità è supportata dal browser… ecco come:

Continua a leggere