Chi mi conosce sa che mi piace tenermi sempre aggiornato sugli strumenti in ambito web scavando oltre ciò che va semplicemente per la maggiore; il risultato, quando scopro certi strumenti nuovi, è chiedermi come ho fatto prima senza!
Oggi vi voglio parlare di un comodissimo strumento: i generatori di siti statici. Cosa sono? possiamo definirli dei mini framework scritti in Ruby che portano con se un ambiente pronto, contenente tutti i sorgenti necessari a scrivere rapidamente codice che, a seguito di un comando da terminale, genererà per noi il sito in HTML. La domanda che sorge spontanea è: non faccio prima a scrivere direttamente in HTML senza dover imparare ad usare un nuovo strumento? Beh, nessuno ci obbliga. Tuttavia, penso che dal momento che esistono strumenti volti a semplificare la vita del web designer (migliorando la stesura del codice, limitando gli errori che si possono commettere e integrando molte funzioni tipiche di un CMS ma senza passare da esso) beh..vi garantisco che ne vale la pena!
Iniziamo subito a far conoscenza di questi strumenti. Come al solito ne esistono mille. Tra i più diffusi in assoluto troviamo Jekyll, Nanoc e Middleman. Oggi parliamo proprio di quest’ultimo!
Prerequisito fondamentale è avere installato Ruby sul nostro computer. Per chi usa Mac Os X questa è la guida, per Linux questa e per Windows questa. Il gestore di pacchetti di Ruby è Rubygem, infatti tramite esso installiamo Middleman, dando il seguente comando da terminale:
gem install middleman
Bene, partiamo con il creare in locale il nostro sito che non richiede la configurazione di nessun server e database (ad esempio non è necessario un ambiente LAMP). Abbiamo solo bisogno di…creare una cartella! Posizioniamoci dove vogliamo sul nostro filesystem e da terminale diamo il comando:
middleman init webhouse
dove webhouse è il nostro progetto o il nome del nostro sito. Se esploriamo la cartella generata, noteremo che Middleman ha creato per noi tutto il necessario, in particolare:
source: cartella contenente i sorgenti necessari al CSS, alle immagini, a JavaScript e alla creazione dei nostri layout in formato ERB (vedremo dopo cos’è);
build: la cartella dove verrà generato il sito in HTML nella fase finale;
gemfile: il file dove possiamo aggiungere i nostri add-on (come Compass, HAML e altre estensioni di Middleman);
config.rb: è il file di configurazione del nostro sito, aka “setup”.
Quello che oggi ci interessa per approcciare a questa tecnologia è capire l’uso del file layout.erb, usare i partials, usare gli helpers e generare il nostro sito.
Osserviamo per la prima volta il nostro sito
Posizionamici dentro la cartella del progetto e diamo il comando:
middleman
e vediamo avviarsi un server locale avente indirizzo localhost:4567. Perché? Perché Middleman porta con se un mini-server che interpreta il codice Ruby e stampa a browser il nostro sito. Infatti se andiamo all’indirizzo sopra indicato vedremo il nostro sito web e le modifiche in tempo reale che eseguiremo!
Layout
La sintassi utilizzata è ERB (Embedded Ruby) che non è nient’altro che HTML a cui può essere aggiunto del codice Ruby. Per fare un paragone conosciuto, è come scrivere codice PHP dentro pagine HTML e salvare il file con estensione .php.
Se apriamo per la prima volta questo file noteremo che contiene poche righe di codice che determinano la cornice del nostro sito:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title><%= current_page.data.title || "The Middleman" %></title>
<%= stylesheet_link_tag "normalize", "all" %>
<%= javascript_include_tag "all" %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
</body>
</html>
a colpo d’occhio notiamo che esiste del codice di questo genere <%= codice %>. Sta ad indicare che il contenuto all’interno dei simboli percentuale è un helper scritto in Ruby e messo a disposizione da Middleman. Scopo degli helpers è quello di includere del codice minimale che una volta convertito in HTML risulterà più lungo e complesso. Ecco quindi che abbiamo scoperto il primo vantaggio. Per un elenco degli helpers si veda la documentazione ufficiale.
Altra cosa che salta all’occhio è questa riga di codice <%= yield %>. Di cosa si tratta? Yield non è nient’altro che l’area del contenuto principale dove verranno richiamate le pagine del sito. Middleman sa che in questo punto del layout dovrà effettuare una chiamata ai file .erb che andremo a creare, come ad esempio index.html.erb (già esistente) e magari una pagina dei contatti che possiamo chiamare contatti.html.erb e così via. Tali file vanno aggiunti alla root principale della cartella del progetto. Facile no? Middleman si occuperà automagicamente, tramite gli helpers, di stampare all’interno di yield la pagina richiesta. Non avremmo bisogno perciò di codice JS o di utilizzare un CMS per gestire questo automatismo!
Partials
I partials sono dei file erb che possiamo creare noi e ai quali andiamo ad anteporre trattino basso. Lo scopo è quello di non affollare layout.erb di codice, ma piuttosto di separare in maniera logica i vari componenti grafici come la header, la nav, la sidebar, il footer ecc. Supponiamo di creare una testata con un titolo di benvenuto:
1) creiamo il file _header.html.erb a salviamolo nella root
2) apriamolo e dentro scriviamo
<h1>header</h1> <p> Ciao sono una testata </p>
3) apriamo ora layout.erb e aggiungiamo questo partial nel punto desiderato, così:
<%= partial ‘header’ %>
Facile vero? in questo modo trattiamo ogni regione del nostro layout indipendentemente da esso, rendendo tutto più logico e facile da manutenere. Per approfondire si veda questa sezione della documentazione.
Breve riassunto:
In sostanza possiamo riassumere, alla buona, che il codice ERB rinominato con il trattino basso è un partial ed è un pezzo di codice che stampiamo sul layout, mentre i file ERB senza il trattino basso sono le pagine web che richiamiamo a menu e stampiamo dentro il contenitore principale chiamato yield.
Helpers
Tra gli helpers più usati ci sono sicuramente i link, siano essi ad un’immagine o ad una voce di menu che richiama una pagina. Vediamo entrambi i casi.
Immagini: vanno richiamate col seguente codice
<%= image_tag ‘logo.png’ %>
questo helpers fa in modo che venga stampato il tag <img> con l’url alla cartella images creata da Middleman e contenente l’immagine richiamata. Bello vero? Non dobbiamo più preoccuparci di copiare bene il path delle immagini o rimodificarlo quando mettiamo in produzione il sito!
Link: le voci di menu, ad esempio, avranno il seguente codice
<%= link_to ‘Chi siamo’, ‘/chi_siamo.html.erb' %>
Questo codice stamperà il tag <a> aggiungendo la voce di menu ‘Chi siamo’ che punterà al file ‘chi_siamo.html.erb’ (creato nella root del progetto) il quale contenuto sarà stampato dentro l’area yield. Comodo vero? Dobbiamo solo pensare a creare il CSS del nostro menu, a tutto il resto ci pensa Middleman! Anche in questo caso si veda la documentazione.
Build
Ora è arrivato il momento di generare l’HTML del nostro sito statico lanciando semplicemente il seguente comando da dentro la cartella del progetto:
middleman build
ed automagicamente avremmo dentro la cartella build tutti i file necessari da caricare sul nostro host e goderci la navigazione del nostro nuovo sito!
Come tutti i progetti in Ruby, esistono molte estensioni ufficiali e non (chiamate gemme o gems) tra le quali spicca quella per implementare un blog o per vedere i cambiamenti grafici del sito senza fare il refresh del browser!
Sono sicuro che anche voi, come me, se inizierete ad usarlo non smetterete mai dal momento che la sua leggerezza e velocità fanno recuperare un sacco di tempo rispetto allo scrivere lungo codice HTML o montando un CMS dalla struttura pesante laddove non ci fosse bisogno di pagine dinamiche!
E voi, siete curiosi di sperimentare queste alternative o siete affezionati al vostro CMS anche in ambito di siti statici?
Al prossimo tutorial!
