Luigi Sabbetti

Il mondo del web a 360 gradi

HTML5 Boilerplate

HTML5 Boilerplate


di // Pubblicato il: 4 aprile 2018

Sono diversi gli strumenti che permettono di avere una struttura pronta per dare il via allo sviluppo di progetti: oggi analizzeremo HTML5 Boilerplate.

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 estistono anche dei “framework” per comporre HTML. E’ il caso, appunto di HTML5 Boilerplate.

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 è semplicimente liberi di decidere l’architettura del proprio codice.

Utilizzare 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
  • Installare attravero 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
    jQuery, integrato attraverso una CDN e con il fallback sul file locale in caso di difficoltà di rete
    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. Ultima, ma non ultima, la compatibilità con 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à.

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.

Ti è piaciuto questo articolo? Votalo!
[voti: 0 - Media voto: 0]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia