HTML5 Boilerplate è un template che racchiude HTML5, CSS e JavaScript per tutti gli sviluppatori che vogliono un prodotto compatibile anche con i vecchi browser – qualcuno ha nominato Internet Explorer 6? – senza però rinunciare alle feature di HTML5. 

La paternità del codice è di Paul Irish, membro nella comunità di sviluppo di Google Chrome e di jQuery, che mette a disposizione una struttura di file e directory comprensiva di jQuery, Modernizr (di cui vi abbiamo parlato in un articolo) e DD_belatedPNG una "medicina" che consente di implementare la trasparenza dei files immagini PNG anche sul vecchio IE6.

Andiamo a scoprire cosa offre questo template visitando la versione italiana del progetto all'indirizzo it.html5boilerplate.com, scoprirete così un sito con contenuto presentato veramente bene, basterà scorrere solamente la pagina tradotta per avere un'ottima panoramica sul prodotto, per la documentazone completa dovrete invece affidarvi alla sola localizzazione in inglese.

Per questo motivo affronteremo la parte pratica sull'utilizzo di HTML 5 Boilerplate che troverete in tre differenti versioni:

  1. Documentazione Bolerplate: mette a disposizione il codice commentato con suggerimenti e link.
  2. Boilerplate Stripped: la versione che comprende solamente il codice.
  3. Boilerplate Custom: pensata per chi vuole un template su misura per le proprie esigenze.

La versione più interessante è sicuramente quella Custom dove potrete scegliere se implementare:

  • Classi Condizionali: che permettono di avere dei fogli di stile ad hoc per vecchie versioni dei browser
  • Mobile: che permette una visualizzazione migliorata del template nei nuovi device mobili come smartphone e tablet
  • Javascript: potete scegliere se implementare o no le librerie JQuery o JQuery.min
  • Attivatore HTML5: una delle feature più interessanti del progetto. Cosa succede se un vecchio browser che non conosce HTML5? Ci pensano Modernizr o html5shiv  
  • Configurazione del server: tramite i files .htaccess, web.config e nginx.cong
  • Google Analytics: per avere il codice ottimizzato per il potente mezzo messo a disposizione da BigG

Le parti colorate in arancione sono quelle scelte da noi per il tutorial, una volta scaricato il file zippato avremo vari files immagini ed i files:

Index.html è ovviamente il cuore del progetto che lega tutte le implementazioni – vediamolo passo passo

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Per forzare il browser ad usare un motore di ricerca adeguato per la visualizzazione di HTML5, da rimuovere nel caso dell'uso di .htaccess se volete avere una validazione W3C.

Noterete inoltre nel pacchetto il file 404.html sopra citato per gestire gli errori 404.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viene ottimizzata la visualizzazione sui nuovi device touchscreen quali smartphone e tablet (gestiti con il CSS handheld.css)

 

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Per gli utilizzatori di iPhone ed iPad, permette la corretta visualizzazione del'icona relativa al sito. Ricordo ai lettori che è un tag deprecato dal W3C.

 

<script src="js/libs/modernizr-1.7.min.js"></script>

L'abilitazione di Modernizr va a richiamare il file modernizr-1.7.min.js- plugins.js presente nel pacchetto per permettere una perfetta compatibilità con tutti i browser

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script><br />    <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>x3C/script>")</script>

Il caricamento di JavaScript è stato implementato nel body per permettere un caricamento più rapido delle pagine e non creare un collo di bottiglia.

 

<script src="js/plugins.js"></script> <script src="js/script.js"></script>

Vengono implementate le librerie Java Ant.

 

<!--[if lt IE 7 ]><br />        <script src="js/libs/dd_belatedpng.js"></script><br />    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script><br />      <![endif]-->

Come vi avevamo anticipato in precedenza viene utilizzato li file DD_belatedPNG.fix per permettere una corretta visualizzazione dei files immagini PNG anche nei browser che non li digeriscono pienamente.

 

<script><br />        var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];<br />        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;<br />        g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";<br />        s.parentNode.insertBefore(g,s)}(document,"script"));<br />    </script>

Infine analizziamo lo snippet per ottimizzare Analytics che sostituisce al valore

 

Per quanto concerne la parte del contenuto è stato pensato un layout base con un contenitore che comprende l'header, il contenuto e il footer:

<div id="container"><br />        <header><br />        </header><br />        <div id="main" role="main"><br />        </div><br />        <footer><br />        </footer><br />    </div>

che potrete cambiare a vostro uso e consumo ricordando la possibilità di integrare Boilerplate con famosi CMS come WordPress e framework di vario tipo come ASP.NET.

Nella seconda parte del tutorial analizzeremo i fogli di stile del progetto creato da Paul Irish.