“Ragazzi preparatevi perché stasera ci divertiamo di brutto!” con questo entusiasmo, che contagia l’intera classe, Andrea Barghigiani, sviluppatore web e docente inizia una nuova lezione di Web Design.
“Oggi ragazzi inizieremo il viaggio che ci porterà a scovare le migliori immagini” ci dice in maniera quasi poetica “e, soprattutto, inserirle nel nostro sito” continua.
Dai carattere al sito con le immagini
Ovvio che per fare un buon sito web dovremmo avere anche delle immagini di qualità. Se il budget ce lo permette potremo comprarle, naturalmente, saranno originali e uniche, ma, quando il budget ci sta stretto comunque internet ci viene incontro con una moltitudine di siti.
Non possiamo aprire un sito web e scaricare la prima immagine che ci colpisce, dobbiamo controllare che abbia una licenza Creative Commons, queste licenze forniscono un modo semplice e standardizzato per dare pubblicamente il permesso di condividere e utilizzare il lavoro creativo in base alle condizioni stabilite dai creatori.
Possiamo trovare immagini con licenza creative commons dalla ricerca immagini di Google oppure cercare su siti specializzati come Flickr, che richiede però la citazione della fonte oppure cercare su siti di stock immagini, come Unsplash o Picjumbo, che permettono un uso completamente libero delle immagini offerte.
Inserirle sul nostro sito sarà molto semplice, ci basterà scaricarle nella cartella immagini e usare la stringa di comando <img src=”img/nomeimmagine.jpg” alt=””>. Con il foglio di stile, poi, andremo a modificarne posizione e grandezza.
Con lo stesso sistema potremo inserire dei pattern, anche per i pattern internet ci fornisce un’incredibile varietà di immagini utilizzabili gratuitamente.
Implementa una Griglia ed Organizza i Contenuti
Proprio come nell’editoria, anche nel web le griglie sono di fondamentale importanza dato che ci permettono di allineare i nostri elementi uno a fianco all’altro, fornendoci l’opportunità di creare layout sempre più interessanti.
Le inseriremo usando la stringa <div class=”ui grid”> e decidendo di quante colonne avremo bisogno.
Framework
Fino ad ora abbiamo lavorato su un foglio HTML di base, inserendo manualmente i vari elementi e abbiamo visto come personalizzare un template già sviluppato.
“Questa sera andremo a conoscere un framework semantico che ci aiuterà a creare le nostre griglie, bottoni, menù, effetti, icone e molto molto altro semplificando in maniera incredibile il lavoro” spiega Andrea.
Un framework è un’architettura logica, sulla quale un software può essere progettato semplificando il lavoro da parte del programmatore, si tratta di un insieme di stringhe preimpostate che aiutano il nostro sviluppo, che ci permettono il copia e incolla di una struttura già testata.
Online troviamo diversi siti, come bootstrap o foundation, per ora useremo il più semplice da capire semantic-ui.
Questo framework pronto all’uso semplifica, effettivamente, il lavoro dei nostri dolabber, ma, ci ricorda Andrea “Non perdetevi alla scoperta dei framework! Dobbiamo tenerci aggiornati e seguire il trend e soprattutto dobbiamo offrire un servizio originale, il copia e incolla va bene solo per prendere confidenza con il linguaggio!”
Anche questa sera sono le 22.25 e nessuno sente la stanchezza, la programmazione è divertente e Andrea riesce a trasmettere la sua passione, ma è ora di spegnere le luci e di andare a casa a fare i compiti che ci sono stati assegnati! L’appuntamento è alla prossima lezione!
Stay Tuned!
Marilena Tonnetti