Ho tradotto la documentazione ufficiale di introduzione ad Initializr in italiano per favorirne una sua maggiore diffusione, per ampliare lo spettro di potenziali utilizzatori nella penisola, facilitandone la comprensione di base anche a chi non conosce bene altre lingue. È uno strumento utilissimo nello sviluppo web, assolutamente consigliato come punto di partenza per nuovi progetti.
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 vostre esigenze per avviare un progetto evitando codice superfluo. Il procedimento di creazione del progetto e le opzioni disponibili sono descritte in questo articolo.
Prima di iniziare, per i meno esperti di HTML5, o semplicemente chi desidera approfondire questo argomento e/o tutti gli strumenti che compongono questa nuova tecnologia a nostra disposizione, consiglio di leggere questa guida HTML5 in italiano.
Innanzitutto bisogna capire perché Initializr è basato su HTML5 Boilerplate. Parliamo quindi per prima cosa di questa famosa ricetta base per nuovi progetti web.
HTML5 Boilerplate è un template di partenza, per la creazione di pagine web, potente e affidabile. Creato e mantenuto da Paul Irish, Google e Divya Manian. Un insieme di file HTML, CSS e Javascript, che sono utilizzati per avviare un progetto HTML5. Comprende altri strumenti utili come Modernizr, jQuery, e l'azzeramento dei fogli di stile CSS per un'impostazione predefinita più coerente sui vari browser oggi a nostra disposizione.
HTML5 Boilerplate include molti altri componenti, che per la maggior parte delle persone probabilmente non sono sempre necessari, almeno non per tutti i progetti, ma utili per usi o piattaforme più specifici. 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 di cross domain xml per flash, un altro per IIS, nginx, apache e appengine, ecc...
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.
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.
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.
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.
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 riconscerebbero alcuni componenti delle nuove tecnologie.
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");
Tutti i nuovi elementi così vengono creati automaticamente prima che venga visualizzato il contenuto del corpo (body) della pagina. È quindi obbligatorio, per un suo corretto funzionamento, posizionare HTML5shiv nel <head> della pagina piuttosto che nella parte inferiore del <body>, come invece è consigliabile per il resto del codice Javascript.
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.
Ecco un esempio di utilizzo tramite Javascript:
if (Modernizr.geolocation) {
// Geolocalizzazione supportata
}
else {
// Geolocalizzazione non supportata
}
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:
.multiplebgs header {
/* Backgrounds multipli supportati */
}
.no-multiplebgs header {
/* Backgrounds multipli non supportati */
}
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.
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.
Se si preferisce mantenere il "www", è possibile rimuovere le seguenti righe dal file .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>
Una volta fatte le scelte di configurazione, potete semplicemente cliccare sul pulsante di Download, quello (molto) grande, per scaricare l'archivio generato.
Lasciando la configurazione per impostazione predefinita, si otterrà una struttura progettuale completa, pronta all'uso, simile a questa:
Un rapido sguardo al file index.html vi permetterà di vedere che nel codice di HTML5 Boilerplate è già tutto incluso:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Your website name</title>
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>
<!-- Codice della pagina di esempio di Initializr -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
<script src="js/script.js"></script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
</body>
</html>
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:
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.
È incluso anche un file TODO.txt per guidarvi nei vari passi da seguire per iniziare il vostro progetto HTML5 e per utilizzare alcuni hacks presenti in HTML5 Boilerplate. Ad esempio, non dobbiamo dimenticarci di sostituire la lingua "en" se la nostra pagina non è in inglese, o addirittura di creare una pagina html 404 (404.html) se il nostro file di configurazione del server esegue un redirect 404 in caso di resituzione di errore per una pagina non trovata.
La versione di HTML5 Boilerplate inclusa in Initializr è volontariamente più leggera rispetto all'originale. Se volete approfondire la comprensione del template e avere informazioni più dettagliate sui vari file, è possibile ascoltare la spiegazione ufficiale di HTML5 Boilerplate, in inglese, direttamente da Paul Irish, in questo video:
Vi invito inoltre a visitare la pagina ufficiale di HTML5 Boilerplate dove troverete alcune guide e molti consigli utili per migliorare il processo di realizzazione delle vostre pagine web, la loro compatibilità e le loro prestazioni sui vari browser oggi in uso.