«Per fare grafica occorre un Mac». L’hanno ripetuto per anni e ancora non pochi insistono su questo argomento. Al di là delle opinioni personali certo è che per “fare grafica” ci vuole innanzitutto creatività e talento: se ne hai ottieni ottimi risultati anche senza costosissimi computer e software proprietari pagati a peso d’oro. Talvolta basta un foglio di carta e una matita. Se non ne hai, di creatività e talento, non sarà un Mac a cambiarti la vita. Lo stesso vale per i PC marchiati Windows e diffusi per l’intero globo come una pandemia. Tutti ce l’hanno e li trovi ovunque. Che questo possa essere sinonimo di qualità ed efficenza è però tutto da dimostrare.
La differenza — parlando di produttività — rispetto ai sistemi liberi e open source (come moltissime distribuzioni Linux) la fanno spesso i software proprietari sopracitati, di cui «non si può fare a meno» come recita un altro mantra. Ma le cose in realtà non stanno proprio così, almeno non oggi.

software

Molti software open source hanno raggiunto un livello di maturità tale da poter competere — in alcuni casi addirittura superandoli — con i loro cugini più ricchi e le principali distro Linux rappresentano un ambiente di lavoro estremamente affidabile e performante. 
In questo contesto merita particolare attenzione il concetto di accessibilità agli strumenti informatici necessari per produrre lavoro, specie in un periodo come quello attuale. Un computer con un sistema libero e gratuito, come un parco software open source, sono di sicuro molto più accessibili rispetto ad un Mac e alle costose licenze legate all’uso dei software proprietari. E se si può spendere qualcosa, meglio effettuare una donazione per lo sviluppo di un programma “per tutti” piuttosto che gonfiare le tasche a chi produce programmi “per pochi”.
Detto questo — anche se il discorso sarebbe in realtà ben più lungo — passiamo allo scopo di questo post, che è quello di presentare alcuni software open source utili nel campo del webdesign (e non solo). Prenderemo come esempio la realizzazione di un layout base in html e css, che potrà poi essere adattato per creare un tema per WordPress o Tumblr.

Software utilizzati:

  • Inkscape: editor di grafica vettoriale, alternativa open source di Adobe Illustrator. Lo possiamo utilizzare per creare elementi grafici (logo, pulsanti, ecc…) e per disegnare un layout guida, da convertire poi in layout html. [http://inkscape.org]
  • Brackets: editor di testo open source per la scrittura del codice html e del codice css. [http://brackets.io]
  • Gimp: alternativa open source di Adobe Photoshop. Nel webdesign risulta di una certa utilità in diverse circostanze, affiancando altri programmi (Inkscape, Darktable, …) per la creazione di elementi grafici. [http://www.gimp.org]
  • Darktable, RawTherapee: elaborazione fotografica. [http://www.darktable.orghttp://rawtherapee.com]
  • Browsers: Chromium, Firefox, Opera, ecc… per testare il layout e modificare il codice in tempo reale.

Layout guida

Si tratta della struttura grafica generale, quali elementi sono presenti e come questi debbano essere impaginati. Può essere uno schema a grandi linee come una riproduzione grafica estremamente accurata di quella che sarà la pagina web. In questo campo non esistono regole inviolabili: c’è chi disegna il layout su un foglio di carta, chi preferisce utilizzare un programma di grafica, chi addirittura parte subito con il codice e realizza la struttura direttamente, bypassando questa fase.
Sicuramente un software di grafica vettoriale come Inkscape rappresenta, per quella che è la mia opinione, la scelta migliore. Consente di creare un’anteprima precisa della pagina che vogliamo realizzare, con linee guida utili per determinare la corretta collocazione degli elementi, e di poterla esportare in PDF (es. per inviarla ad un cliente).
Questa struttura grafica rappresenterà la guida, il modello, da convertire poi in codice html e css.

Inkscape

Editor di testo/codice

In questo blog ne abbiamo già presentati diversi. Benché siano tutti validi, Brackets ha una marcia in più, se non altro per il gran numero di plugins liberamente scaricabili che consentono di personalizzare notevolmente l’ambiente di sviluppo. Con l’editor (integrated development environment o IDE) verrà prima creato il corrispettivo in html e css del modello di cui sopra e successivamente inserito il codice necessario per adattare il layout base al tipo di CMS (es. WordPress) o piattaforma (es. Tumblr) utilizzati.

Brackets

Elementi grafici

Tutte le immagini presenti nella pagina (logo, pulsanti, fotografie, …) possono essere create con Inkscape, Gimp, Darktable Rawtherapee (per citare i più conosciuti e validi programmi open source disponibili). Sommando le opportunità offerte da ciascuno di questi software ci possiamo rendere conto che il vero limite è rappresentato dalla creatività e dalla conoscenza dei programmi in questione. Forse all’inizio non appariranno come i più immediati e in alcuni casi la curva di apprendimento non è ripidissima, ma vale sempre la pena spendere del tempo per imparare ad utilizzare un software libero dalle grandi potenzialità.

Gimp

Browsers

Il principale problema di una pagina web è quello di essere visualizzata in maniera diversa a seconda del tipo di browser utilizzato dall’utente che la visita. Per questo motivo è bene testare la pagina con il maggior numero di browser possibile. Il browser tuttavia rappresenta anche un importante ambiente di sviluppo. Si pensi ad esempio ad Opera Dragonfly (nel browser Opera si attiva premendo CTRL+SHIFT+I) o a Chrome Developer Tools (nel browser Chrome stessa combinazione di tasti oppure tasto F12) come anche a Firefox Developer Tools (nel browser Firefox ancora CTRL+SHIFT+I oppure F12). Con questi strumenti è possibile modificare il codice della pagina direttamente nel browser ed osservarne i cambiamenti in tempo reale. Il codice modificato potrà essere successivamente copiato ed inserito tramite editor di testo (es. Brackets) nel file html e quindi salvato.

Midori