Luigi Sabbetti

HTML5 Boilerplate: cos’è e come funziona


di // Pubblicato il: // Ultimo aggiornamento:

Sono diversi gli strumenti che permettono di avere una struttura pronta per dare il via allo sviluppo di progetti. Si tratta di contenitori vuoti, già precompilati, che ci permettono di risparmiare tempo prezioso da dedicare allo sviluppo.

Capita spesso, infatti, di desiderare un ambiente comodo dal quale iniziare lo sviluppo di un progetto: sia questo di web design o web development. La base, comunque, per un progetto web, nella maggior parte dei casi è costituita da una struttura molto semplice, modulare, composta da un index.html di partenza e alcune cartelle utili come quella in cui inserire tutti i nostri script, quella per le immagini e per i fonts ed infine la cartella per i nostri CSS.

Ecco dunque che, come esistono framework css (ad esempio: Twitter Bootstrap o Foundation) e come esistono framework per lo sviluppo (es: laravel, simphony, codeigniter), cosi esistono anche dei “framework” per comporre HTML. Ecco perché oggi cercheremo di analizzare HTML5 Boilerplate. Vedremo assieme cos’è e come funziona nello specifico.

Indice dei contenuti

Cos’è HTML5 Boilerplate

html5 boilerplate

Prima di iniziare, è bene vedere assieme cos’è HTML5 Boilerplate e se possiamo integrarlo all’interno dei nostri progetti.

Questo framework HTML è composto da tutto ciò che è essenziale per mettere su le nostre prime righe di codice. Da anni è ormai diventato un must nella partenza dei miei progetti e, presto capirete il perché.

Come detto, HTML5 Boilerplate è un template per front-end costruito per iniziare lo sviluppo di solide e robuste web app o siti web.

Questo progetto è il prodotto di anni di sviluppo interattivo e conoscenze congiunte da parte della community di sviluppo. Non impone una specifica filosofia di sviluppo, nè tanto meno costringe ad imparare nozioni complesse o architetture classiche dei framework.

Si è semplicemente liberi di decidere l’architettura del proprio codice.

Come funziona HTML5 Boilerplate

Per cominciare abbiamo sostanzialmente tre opzioni possibili da percorrere, tutte e tre molto semplici, legate sostanzialmente alle nostre abitudini e capacità.

  • Scaricare l’ultima versione stabile del progetto direttamente dal sito web html5boilerplate.com
  • Clonare il repository git attraverso il comando
    git clone https://github.com/h5bp/html5-boilerplate.git
  • Installarlo attraverso node package manager con il comando
    npm install html5-boilerplate

Di seguito alcune delle funzionalità principali che rendono questo progetto davvero molto interessante:

  • Basato su HTML5, è facile dunque utilizzare tutti i nuovi elementi messi a disposizione dalle ultime specifiche.
  • Include al suo interno Normalize.css, uno degli stili più utilizzati per normalizzare i css ed evitare discrepanze tra i vari browser
  • Include jQuery, integrato attraverso una CDN e con il fallback sul file locale in caso di difficoltà di rete
  • Include La libreria Modernizr, con alcune features studiate apposta per HTML5 Boilerplate
  • Le configurazioni per il Server Apache che, tra l’altro, migliorano notevolmente le prestazioni e la sicurezza del sito web
  • Il CSS include le media queries più utilizzate
  • All’interno dei files CSS troverete delle classi helper, molto utili in diverse operazioni
  • Il CSS contiene, inoltre, gli stili per la stampa
  • All’interno troverete il codice pronto per Google Analytics, basterà cambiare lo UA

Questo solo per citare alcune delle funzionalità offerte da HTML5 Boilerplate. Infine, questo framework, garantisce la compatibilità tra i browser.

Se bene, ovviamente, supportando HTML5 e i nuovi tag, non può di sua natura essere compatibile con le versioni meno recenti di Internet Explorer, HTML5 Boilerplate, riesce comunque a soddisfare le richieste della maggior parte dei browser presenti sul mercato.

Ecco di seguito la lista completa:

  • Chrome (latest 2)
  • Edge (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 9+
  • Opera (latest 2)
  • Safari (latest 2)

Come scritto anche nella documentazione ufficiale, questo non vuol dire che non sia compatibile con i vecchi browser, tutto dipende dal codice che andrete ad utilizzare al suo interno. Il Framework, di per sè, non è altro che un contenitori e tutti i tag racchiusi all’interno dell’index possono essere sostituiti con molta facilità.

Conclusioni

Come abbiamo avuto modo di vedere, HTML5 Boilerplate rappresenta un buon punto di partenza in svariati tipi di applicazioni.

Maggiori informazioni sul progetto, sono disponibili sulla pagina ufficiale GitHub e sul sito web html5boilerplate.com, inoltre, potete consultare la documentazione ufficiale, con tutti i consigli per uno sviluppo semplice, veloce e lineare.

La documentazione è scritta in formato MD, potrete quindi anche scaricarla e leggerla comodamente in modalità off-line.


Vuoi restare aggiornato sul mondo del web? Iscriviti alla newsletter!