INITIALIZRGENERATORE DI TEMPLATE BASATO SU HTML5 BOILERPLATE

Salvatore Paone – Officina Lieve

Cosa è Initializr?

Initializr consente di generare un template basato su HTML5 Boilerplate, che renderà un progetto in HTML5 operativo in pochi secondi. È possibile personalizzare il template iniziale secondo le proprie esigenze per avviare un progetto evitando codice superfluo. Il procedimento di creazione del progetto e le opzioni disponibili sono descritte in queste slide.Queste slide presuppongono una conoscenza di base della nuova semantica di HTML5. Innanzitutto bisogna capire perché Initializr è basato su HTML5 Boilerplate. Parliamo quindi per prima cosa di Boilerplate.

HTML5 Boilerplate

HTML5 Boilerplate è un template di partenza, per la creazione di pagine web, potente e affidabile, creato e mantenuto da Paul Irish, è un insieme di file HTML, CSS e Javascript utilizzati per avviare un progetto HTML5. Comprende la possibilità di integrare altri strumenti di sviluppo come Modernizr, jQuery, e l'azzeramento dei fogli di stile CSS, quest’ultimo per un'impostazione predefinita più coerente sui vari browser oggi a nostra disposizione.

HTML5 Boilerplate

HTML5 Boilerplate include molti altri componenti, non sono sempre necessari, almeno non per tutti i progetti, ma utili per usi o piattaforme particolari. Ad esempio il JavaScript profiling nei browser come Internet Explorer 6 o 7, che non hanno tale possibilità per impostazione predefinita, Google analytics, un file di configurazione per IIS, nginx, apache ecc...

HTML5 Boilerplate

Di solito, al momento di utilizzare HTML5 Boilerplate per un nuovo progetto, si finisce per eliminare una serie di file che non riteniamo necessari per il nostro progetto specifico. Attività che, se fatta con cura, richiede un certo dispendio di tempo. Qui è dove Initializr viene in nostro aiuto, semplificando questo procedimento, rendendolo notevolmente più rapido.

Un Boilerplate leggero e personalizzabileL'idea di Initializr è quella di semplificare HMTL5 Boilerplate in modo che chiunque, con pochi clic, possa scegliere e quindi selezionare tramite le varie opzioni i file necessari al progetto specifico su cui sta lavorando. Il codice generato da Initializr si basa sul codice di HMTL5 Boilerplate originale. Le opzioni dell'intero procedimento e le sue parti specifiche sono descritte qui di seguito con maggiore dettaglio.

HTML/CSS

Per impostazione predefinita, HTML5 Boilerplate fornisce una pagina iniziale vuota (index.html). Initializr consente invece di generare un primo layout di base, utile come punto di partenza, da modificare rapidamente per la creazione di un layout più complesso. La pagina di esempio riprende il tema del sito ufficiale, formando la struttura classica di una pagina web con un'intestazione (header), un piè di pagina (footer), un menu di navigazione, un blocco sul lato (aside) e una struttura di esempio ad articolo in stile blog.

Bootstrap

Esiste anche la possibilità di basare la propria pagina iniziale su Bootstrap, un framework di sviluppo front-end per pagine web potente ed intuitivo. Oppure, ovviamente, di lasciarla in bianco, vuota, come per impostazione predefinita in HTML5 Boilerplate.

Javascript

HTML5 Boilerplate include jQuery, un eccellente framework Javascript. Troviamo dunque questa libreria anche all'interno di Initializr, disponibile in versione compressa o completa di tutti i commenti, a seconda delle nostre esigenze. Possiamo sempre decidere di ometterla dal progetto, o di omettere Javascript del tutto in caso necessario.Cerchiamo di essere chiari su questo punto, qui stiamo parlando di jQuery (Javascript), non di Modernizr o html5shiv, che invece garantiscono la compatibilità con i browser più capricciosi, ormai datati, che altrimenti non riconoscerebbero alcuni componenti delle nuove tecnologie.

HTML5shiv

I browser moderni supportano perfettamente i nuovi tag HTML5. Tuttavia le versioni di Internet Explorer 8 e inferiori richiedono un piccolo aiuto per lo stile di questi nuovi tag, che, per impostazione predefinita, non vengono riconosciuti. Questo piccolo aiuto è chiamato HTML5shiv. È una piccola libreria Javascript che permetterà di riconoscere i tag HTML5 utilizzando la funzione CreateElement di Internet Explorer:document.createElement("header");

Modernizr

Modernizr è un sensore di compatibilità HTML5 e CSS3 che include HTML5shiv. È una libreria Javascript, un file che crea un oggetto in cui sono contenute le proprietà per ogni caratteristica compatibile o meno del browser in uso.Modernizr aggiunge automaticamente anche alcune classi CSS per il tag <html> in modo tale da fornire facilmente stili alternativi se alcune proprietà CSS3 non sono supportate dal browser che si sta utilizzando:

Modernizr

Modernizr è quindi uno strumento particolarmente completo nella rilevazione di supporto per le funzionalità HTML5 e CSS3, ma è importante capire che non aggiunge alcuna funzionalità mancante in automatico. Va gestito manualmente, a seconda delle necessità delle nostre pagine web, creando, in caso, degli stili alternativi che forniscano un'esperienza di migloramento progressivo nel layout della pagina. È lo strumento di compatibilità scelto come impostazione predefinita da Initializr.

Configurazione del server

Infine, Initializr propone di includere un file di configurazione del server fornito anche da HTML5 Boilerplate. È possibile quindi scegliere un file .htaccess per i server PHP, un file web.config per i server Microsoft IIS, oppure un file nginx.conf per Ruby on Rails. È importante notare che per impostazione predefinita, questi file riscriveranno l'URL della pagina rimuovendo il "www" per renderlo più corto, semplice e leggibile.

Download

Una volta fatte le scelte di configurazione, potete semplicemente cliccare sul pulsante di Download per scaricare l'archivio generato.Lasciando la configurazione per impostazione predefinita, si otterrà una struttura progettuale completa, pronta all'uso, simile a quella visibile nella prossima slide

Struttura

Struttura

1. Un rapido sguardo al file index.html vi permetterà di vedere che nel codice di HTML5 Boilerplate è già tutto incluso.

2. Il file style.css è composto da circa 200 linee di codice tra cui i primi tre quarti sono un CSS Reset. Se siete alla ricerca del giusto luogo dove inserire i vostri stili nel codice CSS, scorrete il file fino al commento piuttosto esplicito:

3. Infine il file script.js contiene un semplice test per verificare se viene caricata la libreria jQuery. È in questo file che è possibile scrivere il proprio codice Javascript.