Ciao, mi chiamo Franco e amo sviluppare per il Web.

Com'è stato costruito questo blog

7 Novembre 2018

Le domande che balenano nella mia mente ogni volta che visito un sito Web sono:

Domande che la maggior parte delle persone mai penserebbe di porsi. Ciò nonostante, c’è una cosa che tutti, “stranamente”, notano: la velocità di caricamento del sito. È scientificamente provato che le persone tendono ad abbandonare un sito Web non appena si accorgono che questo impiega più del dovuto per caricarsi. Un'altro fattore che balza inevitabilmente all'occhio, anche a quello del meno esperto, è l'usabilità: si riesce a navigare facilmente su questo sito, anche quando si utilizza uno smartphone? La sua struttura è chiara?

Ogni volta che mi stavo per approcciare al processo di creazione del mio blog personale, una certezza rimaneva nella mia mente: voler far sapere come esso era stato creato. Ora che questo sito è davvero e finalmente online non rinuncio di certo a quel proposito. Dedico pertanto il primo articolo di questo blog alla spiegazione di come sia stata affrontata la sua progettazione, spiegando le scelte che sono state fatte durante la sua realizzazione.

Questo sito è stato costruito da zero, a mano, scrivendo ogni singola riga del codice che lo costituisce. Quale codice? Quello che puoi vedere cliccando con il tasto destro del mouse su un punto della pagina e scegliendo un’opzione simile a visualizza sorgente pagina, opzione che ha un nome diverso in base al browser che stai utilizzando. Il codice che vedi è stato scritto senza alcuno strumento ausiliario: no CMS, no page builder, no framework CSS.

Il motivo di questa scelta? La mia costante sete e ricerca di velocità, pulizia e marchio personale. Volevo creare un sito che:

Questo blog è costituito da tre pagine principali: Home, About e Contatti. Nella prima trova spazio la lista di tutti i miei articoli, nella seconda un breve introduzione su di me e infine, sulla terza, sono riportati i miei contatti personali in ambito mail e social.

Il layout di questo blog è responsive, ossia esso riesce ad adattarsi perfettamente a qualsiasi tipo di dispositivo venga utilizzato per visualizzarlo, sia esso uno smartphone, un tablet o un computer. Per quanto concerne la palette dei colori, essa è stata scelta tramite Color Hunt, un’ottima Web app che permette di sfogliare tra un numero davvero impressionante di schemi colore. Amando il rosso e il contrasto che esso genera con i colori tendenti al nero, ho optato per questa palette.

Come detto poc'anzi, non era la prima volta che cercavo di creare un mio blog personale. Anzi, ad essere sincero c'ho provato tante volte e altrettanto spesso ho cambiato idea al riguardo, ritrovandomi infine a seppellire il mio desiderio e “processo creativo” sotto un lapidario “Lasciamo perdere!”. Con cadenza continua, però, il pensiero di voler riservarmi uno spazio nella rete si ripresentava puntualmente nella mia mente, come un sasso che giace sulla spiaggia, il quale scompare in seguito all’alta marea ma non svanisce mai del tutto, pronto a tornare a galla con il successivo abbassamento. L’ultima volta che ciò accadde, decisi di evitare di commettere il solito errore di lanciarmi a capofitto nella stesura del codice, senza idee grafiche precise e senza passare prima per una fase di abbozzamento, di wireframing. Questa volta decisi di cambiare rotta e generare uno schizzo di come desideravo il sito fosse una volta terminato, utilizzando i miei colori e valutando in maniera adeguata la scelta dei font. A tal proposito ho utilizzato Adobe XD CC, un ottimo programma di design e grafica che permette di creare facilmente prototipi di siti Web e applicazioni, perfetti per testare le loro UI e UX (user interface e user experience).

Per quanto concerne la scelta dei font, decisi di optare per i web font offerti dall’ottimo servizio che Google Fonts costituisce. Nello specifico quelli utilizzati all’interno di questo blog sono Vollkorn e Oswald, rispettivamente un font serif, che facilita la lettura degli articoli, e uno sans serif, prorompente e pulito, ottimo per le intestazioni.

Per quanto concerne, infine, le icone esse non sono state realizzate da me, bensì ho utilizzato Linea, un set contenente più di 730 icone, fornito gratuitamente da Dario Ferrando. Si tratta di icone outline estremamente pulite e minimali (ergo perfette per questo sito), raggruppate in diverse categorie: Basic, Music, Ecommerce, Software, Basic Elaboration, Arrows e Weather.

Questo sito è statico, ossia non contiene alcun codice che viene eseguito lato server: quando richiedi una sua pagina, essa ti viene inviata dal server così com'è, senza necessità di dover attendere l'esecuzione di alcuno script. Naturalmente optare per la staticità è una soluzione ottimale quando si ha a che fare con siti molto piccoli, ovvero costituiti da poche pagine HTML. Quando le pagine cominciano ad aumentare ci si rende subito conto che è praticamente impossibile adottare una metodologia di sviluppo che prevede la scrittura a mano di ogni singola pagina. Al tempo stesso, però, l'esecuzione di codice in back-end influisce negativamente sul tempo di caricamento della pagina stessa. Decisi di optare per la staticità e la velocità, però avevo inevitabilmente bisogno di uno strumento che potesse aiutarmi nel processo. Dopo aver sperimentato alcuno generatori di siti Web statici, come Hugo e Hexo, trovai la mia soluzione ottimale in Codekit, un software disponibile solo per Mac. Questo programma fornisce un vero e proprio motore per la creazione di siti Web. Codekit non è un IDE (Integrated Development Environment) come Visual Studio (per intenderci, non è presente un editor di testo). Ciò che Codekit fornisce è una serie di funzionalità indispensabili durante il processo di creazione di un sito, come:

Queste sono solo alcune delle sue funzionalità. Non intendo volutamente approfondire il discorso relativo al programma al fine di non rendere questo scritto troppo lungo, cosa che verrà trattata, magari, in un altro articolo. Ricorda solo che se utilizzi un Mac e crei siti Web fatti su misura, Codekit merita di essere provato.

Questa è la storia del blog in cui ti trovi: ora sai come esso sia stato ideato e concretamente realizzato, di come io sia partito dalla sua idea iniziale fino alla finale ed effettiva realizzazione. Spero di essere riuscito a soddisfare la tua curiosità in merito e di aver risposto a tutte le domande che tu, in qualità di Web designer, grafico o non, puoi avere.

Ti auguro una buona giornata!

- Franco