Più o meno la settimana scorsa avevo proposto una panoramica sul design responsivo, già adottato o in adozione dai più importanti portali d’informazione statunitensi e internazionali: capito a grandi linee di cosa si tratta, qualcuno potrebbe volerlo realizzare per sé. Perciò, ho pensato di curare una rubrica che aiuti ad acquisire i fondamenti del web design per cimentarsi nell’impresa. Non potrò certo spiegarvi tutto e ogni professionista ha le proprie abitudini, ma spero che possiate comunque trovarlo utile come riferimento.

Sul web e in televisione, specie nell’ultimo periodo, abbondano le pubblicità che promettono di creare un sito professionale in cinque minuti. Scordatevelo. Il tempo varia a seconda delle esigenze e della complessità del progetto: personalmente, diffido da chi lavori in meno di cinque giorni per qualche pagina statica e cinque settimane per una testata dinamica. Un portale come Leonardo.it richiederebbe almeno cinque mesi. Non è possibile quantificare in pochi minuti la realizzazione d’un sito web se volete che funzioni davvero.

Avete deciso di creare il vostro sito: volete che sia al passo coi trend del web design e, soprattutto, navigabile da tablet e smartphone perché senza una versione mobile non andreste da nessuna parte. Bene, prendete carta (preferibilmente a quadretti) e penna o matita. Quasi tutti i designer fanno degli schizzi, prima di cominciare a impostare l’interfaccia-utente, per avere un’idea di massima del progetto e magari segnare le dimensioni approssimate dei vari elementi. È un’ottima abitudine che all’inizio non dovreste ignorare.

Durante o subito dopo lo schizzo, bisogna ovviamente tradurre in codice il progetto. Esistono numerosi programmi, chiamati in gergo What You See Is What You Get (WYSIWYG), che supportano la stesura dei sorgenti col completamento automatico e altre funzioni. Non servono a nulla, per quanto mi riguarda: se volete davvero imparare a creare un sito dovete scrivere tutto il codice senza affidarvi a strumenti che lo facciano per voi. Io, per esempio, nel 2002 utilizzavo il Blocco Note di Windows XP che è ancora la risorsa più adatta.

Beh, se siete utenti di Mac OS X o Linux potete scegliere un editor qualsiasi purché preveda il testo semplice. Nel mio caso, oggi preferisco gEdit. Rispetto al Blocco Note, quest’ultimo evidenzia la sintassi e la chiusura delle parentesi: esistono molte alternative freeware per Windows che supportano HTML, CSS e JavaScript. Notepad2 di Florian Balmer è un’ottima soluzione gratuita e open source, localizzata in italiano e funzionante a 64-bit. Non chiedetemi di Mac OS X perché io non ho mai sviluppato con quel sistema operativo.

Mancano due elementi. Il primo è un programma di modifica delle immagini: The GIMP è disponibile per Windows, Mac OS X e Linux. Se avete Photoshop, tanto meglio. Preferibilmente, dovreste associargli un editor di file vettoriali come Inkscape o Illustrator. Il secondo è l’emulatore di Android, per verificare la visualizzazione del sito in mobilità, che servirà in un secondo momento. Rispetto a quelli di iOS o Windows Phone, non costringe a utilizzare un determinato sistema operativo. Dalla settimana prossima facciamo sul serio.

Photo Credit: Jeremy Keith via Photo Pin (CC)