2. 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.
3. 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.
4. 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...
5. 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.
6. Un Boilerplate leggero e
personalizzabile
L'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.
7. 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.
8. 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.
9. 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.
10. 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");
11. 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:
12. 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.
13. 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.
14. 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
16. 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.
