Iniziare un sito in HTML 5 con il piede giusto

Pensavo di terminare il 2010 senza scrivere altri articoli, ma ho trovato ispirazione cercando una specie di scheletro per costruire un template in HTML 5. Ho già realizzato un sito in cui ho sperimentato sul campo alcuni dei nuovi tag semantici, ma avevo bisogno di una base più solida per avere fin dall’inizio la piena compatibilità con i vari browser.

Probabilmente conoscerete già il celebre foglio di stile “CSS Reset” di Eric Meyer, e quindi ho pensato di fare una ricerca per un “HTML 5 reset”: bastava aggiungere punto-org. Il template di base è molto succulento. Le classiche cartelle Javascript, CSS e le immagini sono contenute in una cartella che ha come nome un semplice sottotratto (underscore). Questo garantisce la massima pulizia della radice del sito. Visionando il file index.html, ho notato, con profonda gratitudine, che hanno pensato proprio a tutto.

  • Sono già presenti i vari meta tags per indicare autore, argomento e note legali
  • E’ stato predisposto il link alla favicon
  • I riferimenti a vari fogli di stile, con i dovuti commenti condizionali, sono ben 5. Ovviamente per le varie versioni di IE, ma anche per la stampa su carta
  • Sempre per quello che riguarda IE, non poteva mancare il codice Javascript per abilitare i nuovi tag HTML
  • jQuery è già incorporato. Viene preso dal CDN di Google, ma se per caso non fosse raggiungibile, viene in supporto una copia locale.

C’è anche qualcosa per la visualizzazione sui dispositivi mobili, argomento su cui – ahimè – per ora sono abbastanza ignorante e che lascio commentare agli esperti. Nei fogli CSS, oltre al reset, c’è una classe (.mod) che serve ad evitare l’utilizzo del fatidico <div style=”clear:both”>&nbsp;</div>

Senza dubbio questa sarà la base per ogni mio lavoro futuro, e seguirò gli sviluppi di questo progetto su Twitter: @html5reset.

Lascia un commento

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

%d blogger hanno fatto clic su Mi Piace per questo: