Ciao e benvenuto! Quando ho mostrato le prime volte questo sito web mi è stata posta la domanda: perché questo sito Stefano? Come mai tanta pena nel realizzarlo? In questo post - il primo in assoluto - cerco di fare un attimo chiarezza e rispondere a questo importante quesito, illustrandoti alcuni concetti che ho trovato interessanti.

Un nuovo podcast

Innanzitutto partiamo da circa un anno fa quando uscii per la prima volta dopo il lockdown di marzo-aprile. Se hai visitato un po' il mio sito avrai capito che abito a Milano, ma questo non è importante adesso. Tornato in città, ero nella famosa “linea 90” dei bus e stavo cercando un podcast da ascoltare. Tra le varie opzioni mi sono imbattuto nel “Mordente Podcast” di Riccardo Palombo. Ammetto che nonostante fossi un appassionato di tecnologia non lo conoscevo, però, incuriosito, iniziai ad ascoltarlo.

Di lì a qualche mese più avanti l’ho terminato, e una delle tante idee che mi sono portato dietro è stata quella della “nostra unicità”. L’idea essenzialmente è quella di creare un'immagine di sé che sia diversa dalle altre, unica nel suo genere e che faccia capire qualcosa di più riguardo a noi. Però come farlo? Nei social media - tra cui anche LinkedIn (link nella barra a sinistra se vuoi aggiungermi 😉) - si tende a creare il proprio profilo simile a quello degli altri, sia per la struttura, che è standard, ma anche nelle descrizioni e contenuti. E l’idea che è emersa parla proprio di questo: creare un sito web per descrivere noi stessi in modo più unico e soprattutto nostro.

Ovviamente sono partito subito a mille. Mi è sempre piaciuto sviluppare per il web poi. Ho deciso di svilupparlo usando Hugo, un framework per la realizzazione di siti web statici, partendo praticamente da zero.

Hugo: un generatore di siti web statici

Hugo è un generatore di siti web statici - in inglese Static Site Generator (SSG) - sviluppato in Go. Il progetto è stato fondato da Steve Francia nel 2013, e il suo sviluppo è stato portato avanti da una community che vanta più di 160 contributori. Questa metodologia di sviluppo è diversa rispetto a quella più conosciuta dei Content Management Systems (CMS) come WordPress. Ma in cosa si differenziano esattamente?

Le differenze

I CMS sono l’opzione più frequente per creare un sito web e più semplice da utilizzare. Tramite UI è infatti possibile disporre i contenuti all’interno di una pagina in modo molto intuitivo; non servono quindi grandi capacità di programmazione. Inoltre, sono molti i plugin messi a disposizione per arricchire l’esperienza degli utenti e soprattuto migliorare la Search Engine Optimization (SEO).
Tuttavia, esiste un ma da tenere in considerazione: i CMS come WordPress vengono gestiti lato server da tecnologie come PHP e MySQL che rendono il sito tendenzialmente più lento e più vulnerabile agli attacchi rispetto ad altre soluzioni. Inoltre, sebbene la UI venga considerata spesso un vantaggio, in alcuni casi può risultare limitante: l’eccessiva rigidità del sistema non permette di personalizzare alcuni componenti del sito limitando le nostre idee creative (il che magari è un bene, chissà…).

In questo contesto si inseriscono gli Static Site Generator. A differenza dei CMS che prima raccolgono le informazioni dal database e poi forniscono quanto richiesto, gli SSG pre-compilano il sito web prima di qualsiasi richiesta rendendolo subito pronto per essere caricato dal browser. Ciò rende i siti web statici estremamente veloci e soprattutto sicuri: non essendoci nessuna logica dinamica di caricamento tramite PHP, si evita di introdurre vulnerabilità nel sito che questa tecnologia porta con sé.

La grande difficoltà per alcuni (o il vantaggio per altri) che gli SSG si portano dietro è il fatto di non possedere un’interfaccia grafica. Spesso si usa un normale editor di testo con il quale si configura e sviluppa il sito web. Ciò richiede sicuramente più capacità di programmazione che non tutti hanno. D’altra parte, le capacità richieste non sono così avanzate e, una volta impostato il setup iniziale, è possibile personalizzare il sito web in modo più efficace rispetto ai CMS.

Hugo è solo uno dei numerosi generatori di siti statici a disposizione online. E' gratis. La community è solida. E la varietà dei temi offerti è interessante. Alcune aziende utilizzano Hugo per i loro siti web, come ad esempio esolia.com, o usersnap.com in cui tra l’altro viene menzionato un utilizzo di Hugo per la realizzazione di un sito abbastanza grande e complesso. Se vuoi saperne di più qua trovi una piccola guida per principianti con una lista dei generatori statici più consigliati 😉.

Web Design

Sviluppando questo sito ho riscontrato diverse difficoltà a disegnare il sito web. Ovvero a come rendere efficaci navigazione, immagini, colori, font. Al giorno d’oggi questa capacità sta diventando fondamentale, e gli standard di conseguenza si stanno alzando.

Tuttavia, quando ho sentito parlare per la prima volta di Web Designer ho cercato innanzittuto di capire cosa differenziasse questa figura da un Web Developer per comprendere meglio le capacità che mi mancavano. Ho trovato online questo articolo dove questa differenza viene spiegata molto bene. In breve, potremmo però dire che un Web Designer si concentra sulla disposizione degli elementi grafici; mentre un Web Developer usa i linguaggi di programmazione per crearlo così com’è stato pensato.

Ovviamente la suddivisione è più complessa di così (l’articolo la spiega bene). Tra i Web Designer troviamo diverse sotto figure, tra cui quella particolare dell'User Experience Designer (UX Designer). In particolare, il suo compito è quello di tenerci “ancorati” nel sito, ovvero farci divertire e soprattuto farci venire voglia di ritornarci. Come possiamo però raggiungere questo risultato? Visto che siamo in tema di siti portfolio, dai un’occhiata al sito di Bruno Simon. Secondo te l’UX Designer ha fatto un buon lavoro in questo caso? 😀

E' sempre bello comunque pensare ad un mondo ideale, dove ognuno ha il suo ruolo e si concentra solo su quella attività. Molto spesso però ci troviamo a svolgere ruoli intermedi che si intrecciano tra varie abilità, ruoli e responsabilità. Persino tra due ruoli distinti come Web Developer e Web Designer alle volte non c’è una distinzione così netta nel mondo del lavoro; diventa quindi molto utile espandere le nostre conoscenze, anche per capire i punti di vista degli altri ruoli. Se come me sei un developer e sei interessato a conoscere altri aspetti dello sviluppo, ti consiglio il libro Beautiful Web design di Jason Beaird. Questo libro ti introduce nel mondo del Web Design dando cosigli pratici ed efficaci. Trovi i riferimenti a fine articolo.

Javascript: Progressive Enhancement

Infine, vorrei parlare un po' di JavaScript e del libro Javascript for Web Designer di Mat Marquis. E' un libro introduttivo sul tema, spiegato molto bene, che si sofferma sui concetti base del linguaggio. Te lo consiglio nel caso tu sia agli inizi (come lo ero io) sull’utilizzo di JavaScript.

In particolare, vorrei soffermarmi sul concetto di Progressive Enhancement, spiegato nel quinto capitolo del libro. Il Progessive Enhancement (PE) è un approccio allo sviluppo che è nato dai limiti di un altro approccio: la Graceful Degradation. Quest’ultima ha come effetto quello di fornire ai browser più recenti la migliore esperienza utente, degradandola dolcemente fino ai browser più vecchi e non aggiornati.

La Graceful Degradation ha una logica semplice: siccome i nuovi browser mi permettono di usare effetti nuovi e innovativi (questo sito ad esempio è fantastico) io li metto a disposizione per loro; mentre sui browser vecchi questi effetti non si vedranno, o peggio, il sito non funzionerà.

Questo può sembrare ragionevole, ma proviamo ad immaginarci bene la scena: stiamo utilizzando un browser aggiornato per svilluppare il nostro sito web e decidiamo di rilasciarlo online.
Dopo qualche ora nostra cugina ci chiama e ci dice: “Guarda ho provato ad accedere al sito, ma non funziona!”. “Mmm che browser stai usando?” - le chiediamo. “Sto usando Safari” - risponde nostra cugina. “Strano, eppure avevo controllato… però aspetta… da quanto è che il tuo pc non viene aggiornato?”.
E qua partiamo con il bug fixing. Il problema fondamentale è che nostra cugina non riesce proprio ad accedere al nostro sito, e ciò ci porta a fare frettolose correzioni al volo per sistemare il problema. Il Progressive Enhancement in queste occasioni ci propone una soluzione.

Innanzitutto è da notare che sia la Graceful Degradation che il Progressive Enhancement hanno lo stesso obiettivo: far funzionare un sito web su una varietà di dispositivi. Ma lo fanno concentrando il proprio focus su cose differenti. Il primo approccio, come già anticipato, si focalizza su fornire agli utenti “più aggiornati” un’esperienza migliore; mentre il secondo si focalizza prima di tutto ed esclusivamente sul contenuto. Quest’ultimo deve essere disponibile a tutti, nella forma più grezza. Un normale testo HTML. Questa è la baseline da cui partire. Una volta ottenuto un risultato stabile e visualizzabile in tutti i dispositivi si può procedere con l’aggiunta di nuove cose. La differenza sta nel fatto che ovviamente è molto più facile rendere un sito - usando solo HTML - accessibile a tutti i dispositivi piuttosto che complesse funzioni JavaScript.

Ottenuto il fulcro dell’informazione, si passa alla decorazione con il css. Anche in questo caso ottenuta una versione stabile del sito decorato con il css, possiamo procedere con l’aggiunta delle funzioni JavaScript. Anche in questo caso l’idea fondamentale è che le funzionalità JavaScript non devono stravolgere i componenti nel sito, ma si aggiungono ad un qualcosa di già stabile, migliorandolo in qualche punto. Così se JavaScript un giorno non dovesse funzionare, l’utente vedrebbe solamente il contenuto decorato (HTML + CSS); e se anche il css non dovesse caricarsi si vedrebbe solo il contenuto del sito in HTML. Magari a nostra cugina piacerà di meno, ma almeno il nostro sito funzionerà e non riceveremo nessuna chiamata allarmante.

Infine, garantire la fruibilità del contenuto di un sito ha numerosi vantaggi, tra cui quello di facilitare gli spider dei motori di ricerca. Evitando di inserire contenuti dinamici, che possono nascondere informazioni agli spider, miglioriamo la SEO e l’accessibilità. Inoltre, questo articolo spiega i vantaggi del Progressive Enhancement; mentre il libro di Mat Marquis Javascript for Web Designer viene citato come esempio il sito del Boston Globe, e come questa tecnica di sviluppo abbia preservato l’accesso al contenuto del sito durante periodi di maggiore carico nella pagina.

Per maggiori dettagli sul PE (Progressive Enhancement) guardate questo articolo dove questo concetto viene spiegato tramite una metafora con un M&M’s. Interessante e divertente.

Grazie

Bene, mi fermo qua con le chiacchere! Ovviamente ci sarebbe molto altro da dire, ma per ora mi limito a questo. Ti ringrazio per aver letto fino a qua. Come anticipato prima, sotto trovi i libri che ho letto per realizzare il sito. Nel caso tu voglia saperne di più non esitare a contattarmi! 😉

Noi ci leggiamo alla prossima, a presto!

P.S. nel caso volessi dirmi un tuo parere sul sito o sul contenuto di questo post ti invito a farmelo sapere. Penso che ognuno di noi debba sviluppare la capacità di fare delle critiche e di accettarle in maniera costruttiva; quindi, perché no, alleniamoci!

Riferimenti

• Build websites with Hugo di Brian P.Hogan
• Beautiful Web design di Jason Beaird
• Introducing Bootstrap 4 di Jörg Krause
• Javascript for Web Designer di Mat Marquis
• Web Animation using Javascript di Julian Shapiro