CARLOTTA SILVESTRINI MANUALE DEL PERFETTO WEB DESIGNER CON JOOMLA!® ISBN 978-88-579-0393-4
© 2014 by Dario Flaccovio Editore s.r.l. - tel. 0916700686 www.darioflaccovio.it info@darioflaccovio.it Prima edizione: novembre 2014 Silvestrini, Carlotta <1985->
®
Manuale del perfetto web designer con JOOMLA! / Carlotta Silvestrini ; prefazione di Alessandro Rossi. Palermo : D. Flaccovio, 2014. ISBN 978-88-579-0393-4 1. Siti web – Programmazione – Impiego [di] Joomla. 005.1 CDD-22 SBN PAL0274319 CIP - Biblioteca centrale della Regione siciliana “Alberto Bombace”
Stampa: Tipografia Priulla, Palermo, novembre 2014 ®Joomla! è un marchio registrato ma, per praticità, l’Editore ha preferito omettere il simbolo ® lungo la stesura del libro.
webintesta.it
Copertina: Illustrazione realizzata da H-57 Nomi e marchi citati sono generalmente depositati o registrati dalle rispettive case produttrici. L’editore dichiara la propria disponibilità ad adempiere agli obblighi di legge nei confronti degli aventi diritto sulle opere riprodotte. La fotocopiatura dei libri è un reato. Le fotocopie per uso personale del lettore possono essere effettuate nei limiti del 15% di ciascun volume dietro pagamento alla SIAE del compenso previsto dall’art. 68, commi 4 e 5, della legge 22 aprile 1941 n. 633. Le riproduzioni effettuate per finalità di carattere professionale, economico o commerciale o comunque per uso diverso da quello personale possono essere effettuate solo a seguito di specifica autorizzazione rilasciata dall’editore.
Ringraziamenti Non è semplice stare accanto a chi lavora nel web. Bisogna accettarne i lunghi concentrati silenzi, lo sguardo perso per ore nella luce artificiale del monitor, i pugni sul tavolo bestemmiando quando qualcosa non va per il verso giusto, quel contrasto tra l’essere presenti fisicamente, ma assenti, nei periodi più intensi.
Se poi ci metti anche la stesura di un libro, è fatta. Quindi, dopo avere ringraziato Enrico Flaccovio per avermi trovata e incoraggiata non solo come un editore, ma come un amico, voglio ringraziare chi è riuscito a starmi vicino. Mio fratello, che da 25 anni capisce sempre quando è il momento di farmi una carezza e quando è il caso di farmi bere un litro di Guinness. Mia madre che pensa io stia scrivendo un libro su Jungla e mio padre che quando ha visto i coupon per corsi Joomla su Groupon mi ha chiamata allarmato. Ci siamo scannati per anni perché non capiscono “cosa faccio sempre davanti a quel pc”, ma sono certa che ora le cose sono cambiate.
Mia figlia Indra, che ha capito a sue spese che una mamma con partita IVA non può darle tutte le carezze e le attenzioni che merita e – nonostante questo – mi ama incondizionatamente e ha sempre un sorriso da regalarmi. Grazie anche a suo padre, Franck, che per sette anni ha lottato al mio fianco cercando di farmi capire che in me c’era un grande valore e, se ora sto scrivendo questi ringraziamenti, è anche merito suo. Ho scritto questo libro in un momento particolarmente difficile. Quindi ringrazio chi c’è stato, non importa se da sempre o da pochi istanti. I miei migliori amici Oz e Amon, sempre al mio fianco. Paolo Flumini, presenza costante, razionale, vera: una voce davvero amica. Andrea, Valeria, Luciana, Angela, Tino e Marju: il mio filo diretto con l’amata Sardegna, le persone su cui posso contare sempre e comunque.
Matteo, perché nel proprio cammino è importante incontrare qualcuno che sa quando è il momento di ascoltare i silenzi e lasciare respirare.
Grazie a tutti i miei follower di Google Plus che mi seguono regalandomi conversazioni interessanti e spunti per studiare migliorando la professione. Grazie a chi ha scritto contributi per il mio libro, spero che il mondo si accorga della vostra competenza, lo meritate davvero. Grazie a chi leggerà questo libro e ne trarrà insegnamenti importanti per la professione.
Grazie al fotografo Mario Sturaro di Rastignano (BO) per la nuova foto per i profili social.
Contributori In ordine di comparizione, i professionisti che hanno contribuito alla realizzazione del libro:
Alessandro Rossi
Prefazione > PAG 13
Co-fondatore di joomla.it; Fondatore di Joomlahost.it, sviluppatore dell’estensione Ozio Gallery. Esperto in Ozio. alexred.com
Andrea Girardi
> PAG 63
Formatore, motivatore, esperto nel far emergere il talento delle risorse umane. girardihr.com
Salvatore Capolupo
> PAG 97
Specialista di SEM e SEO, esperto in hosting, ottimizzazione e manutenzione di siti web. salvatorecapolupo.it
Paolo Dolci
> PAG 168
Appassionato di Sicurezza Informatica. Developer WordPress Esperto e Consulente SEO. wpseo.it
Enrico Collorà
> PAG 271
Web developer e user experience specialist, formatore, esperto in usabilità e posizionamento dei siti. webandtech.it
Andrea Saletti
> PAG 294
Esperto nello sviluppo di pagine ad alta conversione basate su tecniche di persuasive marketing e PNL. pronesis.it
Luca Orlandini
> PAG 333
Webdesigner Joomla, Wordpress, UX design fanatic, comunicazione persuasiva. Esperto in landing page efficaci. futuraimmagine.com
Salvatore Russo
> PAG 336
Web Marketing Manager in 6sicuro, esperto di e-commerce e autore di “Scopri Google Plus e conquista il web”. salvatore-russo.it
Maurizio Ziopal Palermo
> PAG 351
Affianca il cliente nello sviluppo del sito e dell’intero business online con SEO e Joomla! Autore di “SEO Joomla!”. bix.it
Stefano Rigazio - Riga
> PAG 358
Specializzato in ottimizzazione e posizionamento del CMS Joomla. Titolare di Enthous e autore di “SEO Joomla!”. enthous.it
Matteo Luigi Riso
> PAG 367
Avvocato esperto in diritto dell’informatica e delle nuove tecnologie, sviluppa per passione. Creatore di +ZipGenius. matteoriso.it
Indice
Prefazione di Alessandro Rossi aka AlexRed..................................................... Pag. 13
1. Perché te ne sto parlando proprio io.................................................... « 17 2. Web design: l’arte di esprimersi in digitale...................................... « 27 3. L’insuperabile potere di Joomla! ........................................................ « 3.1. Perché proprio Joomla?........................................................................... « 3.2. CMS a confronto.......................................................................................... « 3.2.1. Wordpress.......................................................................................... « 3.2.2. Drupal.................................................................................................. « 3.2.3. Magento e Prestashop................................................................... « 3.3. La community di Joomla.it..................................................................... « ®
4. Cosa vuoi ottenere dal tuo sito web?.................................................... « 4.1. Definire una strategia per il web conoscendo il cliente............. « 4.2. Il primo contatto......................................................................................... « 4.3. Le tipologie di cliente che è meglio saper gestire........................ « 4.4. Come stabilire il giusto prezzo............................................................. «
41 41 49 50 53 54 56
61 61 63 66 71
9
4.5. Il preventivo perfetto................................................................................ Pag. 4.5.1. L’immagine ....................................................................................... « 4.5.2. Il tuo cliente....................................................................................... « 4.5.3. I contenuti.......................................................................................... « 4.6. Il contratto cliente-web designer: il tuo bunker antiatomico. « 4.6.1. Definizione delle parti e oggetto del contratto.................... « 4.6.2. Le garanzie reciproche................................................................. « 4.6.3. Approvazione, consegna e scadenza, diritto d’autore ...... « 4.6.4. Corrispettivo e pagamento, clausole di “limitaz....”............ « 4.7. I tool e le risorse per organizzare il lavoro..................................... «
79 79 80 81 83 86 88 89 90 91
5. Ariamo e concimiamo il terreno di lavoro........................................ « 97 5.1. Scegliere il giusto server......................................................................... « 97 5.1.1. Quale webserver?............................................................................ « 98 5.1.2. Differenze di configurazione....................................................... « 98 5.1.3. Joomla preinstallato o in versione demo................................ « 98 5.1.4. Joomla e la sicurezza..................................................................... « 99 5.2. Prima dell’installazione del CMS......................................................... « 100 5.3. Installiamo e configuriamo Joomla.................................................... « 104 5.4. Come ragiona Joomla................................................................................ « 109 5.4.1. Menu, articoli e categorie............................................................ « 117 5.4.2. Componenti e plugin...................................................................... « 130 5.4.3. I moduli............................................................................................... « 137 5.5. Pimp my Joomla: potenziamo il CMS................................................. « 140 5.5.1. Pimp my SEO..................................................................................... « 141 5.5.2. Pimp my editor................................................................................. « 145 5.5.3. Pimp my backup.............................................................................. « 148 5.5.4. Pimp my users................................................................................... « 150 5.6. Utenti e ACL.................................................................................................. « 159 5.7. La sicurezza al primo posto................................................................... « 168 5.7.1. Premessa............................................................................................. « 168 5.7.2. Chi sono gli hacker?........................................................................ « 169 5.7.3. Perché attaccano il mio sito?...................................................... « 170 5.7.4. Dork su Google................................................................................. « 171 5.7.5. Tipi di attacco................................................................................... « 173 5.7.5.1. Attacchi diretti a un sito................................................ « 173 5.7.5.2. Attacchi diretti al provider........................................... « 174 5.7.5.3. Malware............................................................................... « 174 5.7.6. Vulnerabilità..................................................................................... « 176 5.7.7. Componenti e temi.......................................................................... « 177
10
5.7.8. Joomla è sicuro o no?..................................................................... Pag. 177 5.7.9. Mi hanno bucato! E adesso?!....................................................... « 178 5.7.9.1. Deface................................................................................... « 178 5.7.10. Analisi della situazione.............................................................. « 180 5.7.10.1. Che faccio?........................................................................ « 181 5.7.10.2. Come hanno fatto?........................................................ « 182 5.7.10.3. Come risolvo?.................................................................. « 182 5.7.10.4. Come prevengo?............................................................. « 184 5.7.10.4.1. Buonsenso................................................... « 184 5.7.10.4.2. Sistemi di protezione............................... « 185 5.7.11. Conclusioni...................................................................................... « 186
6. Tutto comincia dal template...................................................................... « 189 6.1. Scegliere il template.................................................................................. « 191 6.1.1. Free o commerciale?...................................................................... « 192 6.1.2. Developer e framework................................................................. « 195 6.1.2.1. JoomlaXTC.......................................................................... « 200 6.1.2.2. IceTheme............................................................................. « 203 6.1.2.3. RocketTheme..................................................................... « 205 6.1.2.4. GavickPro............................................................................ « 208 6.1.2.5. Conclusioni......................................................................... « 210 6.2. Una questione di stile............................................................................... « 211 6.2.1. Design da dimenticare.................................................................. « 214 6.2.1.1. Il layout da dimenticare e i trend del futuro......... « 214 6.2.1.2. I colori da dimenticare e la giusta scelta c............. « 223 6.2.1.3. Gli elementi grafici da dimenticare e quelli che f. « 236 6.2.1.4 I font da dimenticare e quelli che lasciano il segno « 249 6.3. Mobile first.................................................................................................... « 262 6.3.1. Mobile first: l’opinione di Enrico Collorà................................ « 271 6.4. Come personalizzare il template......................................................... « 273 7. Strategie vincenti: la parola agli esperti ........................................... « 293 7.1. Neurowebdesign, la strategia del futuro ......................................... « 294 7.1.1. Un approccio al web design basato sulla psicologia del tuo utente.................................................................................... « 294 7.1.2. Come funziona il nostro cervello… anzi i nostri 3 cervelli! « 297 7.1.3. Cos’è il neuromarketing................................................................ « 302 7.1.4. Neuromarketing e web: i principi del design persuasivo. « 304 7.1.4.1. Principio della fluidità cognitiva............................... « 305 7.1.4.2. Principio di reciprocità.................................................. « 308
11
7.1.4.3. Principio di impegno e coerenza................................ Pag. 311 7.1.4.4. Principio della riprova sociale.................................... « 314 7.1.4.5. Principio di simpatia...................................................... « 318 7.1.4.6. Principio di autorità....................................................... « 320 7.1.4.7. Principio di scarsità........................................................ « 323 7.1.4.8. Principio della direzione suggerita........................... « 326 7.1.4.9. Neuroni specchio: come creare stati d’animo....... « 328 7.1.4.10. Principio di ancoraggio............................................... « 330 7.1.5. Conclusioni....................................................................................... « 331 7.2. Landing page efficaci................................................................................ « 333 7.2.1. Landing page.................................................................................... « 334 7.2.2. Ottenere risultati............................................................................. « 335 7.3. Integrazione immagine sito web e social media........................... « 336
8. Strategie di ottimizzazione........................................................................ « 341 8.1. Debugging e problemi frequenti.......................................................... « 341 8.2. Problemi frequenti.................................................................................... « 345 8.2.1. Problemi di connessione al database....................................... « 345 8.2.2. Perdita della password di amministratore............................ « 346 8.2.3. Mamma ho perso il template!.................................................... « 347 8.2.4. XML mancante................................................................................. « 349 8.2.5. Quando JQuery dà forfait............................................................. « 349 8.2.6. Altri potenziali problemi.............................................................. « 350 8.3. SEO e Joomla ............................................................................................... « 351 8.3.1. Ottimizzazione dei contenuti...................................................... « 355 8.3.2. Il template Joomla in ottica SEO............................................... « 356 8.3.3. Estensioni per la SEO..................................................................... « 358 8.3.3.1. Social network.................................................................. « 361 8.3.3.2. Redirect................................................................................ « 363 8.4. Aspetti legali................................................................................................. « 364 8.4.1. Nome dominio.................................................................................. « 364 8.4.2. Dati fiscali e registrazioni all’albo............................................ « 365 8.4.3. Privacy policy................................................................................... « 366 8.4.4. Condizioni d’uso............................................................................... « 366 8.4.5. Tutela legale dei visitatori........................................................... « 367 Nelle mani del cliente........................................................................................... « 379 Biografia........................................................................................................................ « 383 Iscrizione alla mailing list....................................................................................... « 384
12
Prefazione
Durante la lettura del libro di Carlotta imparerai a conoscere il progetto Joomla ma anche a conoscere l’autrice che simpaticamente ci racconta molto della sua vita. Con autoironia e perle di saggezza ci invita a rispolverare quelle sane passioni che avevamo da ragazzi, per utilizzarle come talenti nella nostra nuova professione. Il web design è arte. Il senso estetico unito all’usabilità, ma anche filosofia e strategia, che passano dalla scelta del CMS fino alla psicologia da utilizzare nel rapporto con i clienti. Un mestiere che possa sostenerci economicamente e mantenerci liberi con strumenti liberi, svolto con sacrificio e passione ma anche con stile e creatività, per andare oltre alla moltitudine di siti spazzatura e senza grazia ma portare sul web piccole opere d’arte. 13
Le utili indicazioni dell’autrice e degli altri professionisti che hanno dato il loro contributo in questo testo sono un tesoro per chi vuole avviare la propria attività di web designer. Anche per chi, come me, non è agli inizi come professionista e non è esperto in web design molti capitoli risulteranno illuminanti. Siamo fortunati ad averla nella community italiana di Joomla.
Joomla non è facile, ma imparare a usare Joomla è facile Il progetto (… e non chiamatelo mai prodotto) Joomla ha oramai quasi 10 anni, certamente non è il miglior CMS attualmente disponibile, ma è fra i più popolari. Ha permesso a moltissime persone di poter pubblicare in maniera indipendente la propria voce sul web, mostrare le proprie idee, prodotti, servizi, ecc. e ancora oggi viene utilizzato come piattaforma ideale in tutte le parti del mondo. Proprio in questi ultimi 10 anni il web si è evoluto moltissimo, i vari social network hanno forse distolto l’attenzione dall’esigenza di avere una propria pagina web, un proprio sito internet autogestito. Inoltre il forte periodo di crisi economica ha portato nel nostro paese a una diminuzione costante della registrazione di nuovi domini e molti non rinnovano più quelli registrati in passato. Queste e altre considerazioni di carattere generale, unite alla grande difficoltà nel mantenere aggiornate le vecchie versioni di Joomla, il continuo calo della quantità e qualità di estensioni veramente gratuite e la scarsa disponibilità di buoni template free hanno fatto perdere un poco di entusiasmo e notorietà al progetto. Il quale con la nuova versione 3 torna a proporsi come base solida per i webmaster promettendo di aver imparato dagli errori del passato. Il web è cambiato ed è in continua evoluzione, realizzare un buon sito internet richiede sempre più conoscenze. Nuove metodologie e tecnologie continuano a fondersi e riuscire a mantenere il giusto 14
equilibrio nella realizzazione di pagine web è molto importante. Queste devono ora adattarsi a una moltitudine di dispositivi, apparire velocemente, essere conformi ai nuovi standard, ecc. (Responsive, HTML5, Microdata, TAG, LESS CSS, Cloud e molto altro). Joomla 3 permette di rimanere allineati con le attuali esigenze tecnologiche, ma richiede un impegno e un apprendimento leggermente superiore rispetto alle versioni precedenti. Disponibile sempre gratuitamente e liberamente, oggi sembra più indirizzato ai webmaster che ai semplici utilizzatori. Comunque gli strumenti per imparare velocemente ci sono, prima fra tutti la community italiana di appassionati e utilizzatori di questo CMS. Su joomla.it puoi trovare un supporto gratuito e volontario in pieno spirito open source, guide e articoli sulle ultime novità, forum di discussione, file lingua tradotti in italiano, pacchetto di installazione localizzato e molto altro. Non mancano poi ottimi libri, come questo, che permettono a molti di approfondire le conoscenze nell’utilizzo di Joomla per poi magari tornare a condividerle con la community. Condivisione e collaborazione libera, volontaria e gratuita Sembrerà strano ma tutto il progetto Joomla si basa proprio su questo modello di sostenibilità. A differenza degli altri noti CMS non ci sono aziende “padrone” dietro lo sviluppo e la progettazione, non ci sono dividendi da spartire, non ci sono sviluppatori professionisti retribuiti per lavorare al codice. Solo la grande passione di molti che dedicano il proprio tempo libero per contribuire in modo etico con le proprie competenze. Membri di un team che si alternano spesso, provenienti da molti Paesi, con culture e professionalità molto differenti ma che si uniscono e si coordinano virtualmente in rete per sviluppare un codice open source a supporto di un progetto in cui credono fortemente e che spesso utilizzano nella propria attività. 15
Sono più di 400 le persone che attualmente contribuiscono a vario titolo alla scrittura del codice di Joomla, a differenza degli altri noti CMS dove ne troviamo solo alcune decine. Ma ovviamente non è necessario essere esperti sviluppatori e programmatori per poter dare il proprio contributo in questa vasta community. C’è un team che si occupa della documentazione, uno che si occupa della comunicazione, uno per le traduzioni e molti altri sono gli aspetti in cui poter essere coinvolti. Anche Joomla.it è un esempio di come molti tornano a condividere liberamente le proprie idee ed esperienze. C’è chi pubblica articoli e guide sull’utilizzo, oppure recensioni su estensioni utili, chi dà supporto sul forum rispondendo alle domande dei principianti. Non siamo particolarmente esperti, ma siamo appassionati di quello che facciamo ed è questo l’unico requisito richiesto per poter far parte della community. Molte sono le aspettative che i webmaster ripongono a oggi in Joomla, spesso nascono feroci critiche sulle tempistiche o sulle nuove caratteristiche, ecc., dimenticandosi probabilmente che non si tratta di un prodotto da prendere e utilizzare esclusivamente per la propria attività, ma si tratta di un progetto che può continuare a crescere solo grazie all’aiuto di tutti.
Alessandro Rossi aka AlexRed
z
Esperto in Ozio e Admin di Joomla.it
z
16
1. Perché te ne sto parlando proprio io
Ci sono mattine e mattine. Ci sono quelle in cui non ti vorresti nemmeno alzare per il terrore di leggere quelle mail cariche di “casini da sgurare” – come direbbero in Romagna – che nella vita di un web designer implicano la perdita di tre ore di tempo per risolvere un problema sorto inspiegabilmente dal nulla. E poi ci sono quelle mattine in cui, tra decine di missive elettroniche, ce n’è una il cui oggetto è “Proposta editoriale”. Il cuore si blocca, mentre il demone dell’autostima suggerisce con ottimo tempismo che di sicuro si tratta di spam o di quelle tragicomiche catene di network marketing, in cui un sagace imprenditore improvvisato spera di farti lavorare “aggratis” in cambio di visibilità. 17
Divorai quella mail in pochi istanti, vivendo il momento con la stessa sensazione di un abbraccio da parte della vita. Se pensi che sia una reazione un po’ eccessiva, leggi con attenzione i prossimi paragrafi in cui ti spiego perché attraverso questo testo sarò proprio io a darti una mano a diventare un buon web designer e perché è così importante per me poterlo fare. Devi sapere che non sono una di quelle ragazze nate in un ambiente ovattato e prosperoso dove c’è tutto il tempo di godersi ogni tappa della giovinezza, in attesa di consolidare un futuro sotto l’ala protettiva di mamma e papà. Sai, quelle realtà stile Mulino Bianco dove, anche se nessuno sorride, c’è sempre un gruzzoletto riparatore. Sì, proprio quel gruzzoletto con cui a 6 anni hai la Gaucho, a 14 il motorino, a 18 patente e macchina e nel frattempo non ti sei mai dovuto preoccupare di nulla se non di studiare, giocare, divertirti spensierato. Il mio caso è decisamente diverso. Io sono cresciuta in una famiglia dove la logorante ristrettezza economica veniva compensata attraverso grandi quantità di stimoli mentali. Un padre divoratore di libri, ottimo oratore, dall’intelligenza brillante. Una madre fine, silenziosa, composta, amante della musica e del canto, in grado di trasmettere con poche parole una profondità d’animo disarmante e amore incondizionato nel senso più ampio del termine. La televisione era un sogno nel cassetto, i giocattoli arrivavano solo a Natale, gli sport o gli hobby tutti proibitivi e di conseguenza anche gli eventi mondani e i compleanni degli altri bambini. In compenso potevo accedere a una riserva pressoché illimitata di carta, matite, colori, tempere. Scrivevo e disegnavo gran parte della giornata. All’età di otto anni avevo già all’attivo un “libro” (una trentina di pagine di quadernino a righe) di poesie, qualche racconto e iniziavo ad appassionarmi alle storie comiche, che trasformavo in piccole recite la cui vittima designata era sempre il mio adorato 18
fratello Francesco, che – condannato dallo status di secondogenito – si rassegnava a partecipare. Avevo forse 12 anni quando, per esigenze scolastiche, mio padre mise da parte i soldi per acquistare un pianoforte elettronico (un CASIO CTK910 che chiamai Summer con tanto di nome inciso a spillo); aggiunsi la musica e il canto ai miei passatempi preferiti. Vivevo di creatività. Era bellissimo. Non c’era pianto, rinuncia, sofferenza, delusione che non potesse essere colmata da un nuovo disegno, da una canzone o una confessione in quei diari che mi sforzavo di tenere con scarsa costanza. Arrivato fin qui avrai capito che sono sempre stata piuttosto ciclonica e questa è una caratteristica importante nel nostro lavoro, dal momento che curiosità e movimento costante sono essenziali per sopravvivere in un mercato saturo e dall’evoluzione continua. Conoscere la mia storia ti farà comprendere che ogni pixel riempito nel monitor, precedentemente, è stato un tratto di matita sul foglio a quadretti: quel movimento è frutto di anni in cui la mano e il cervello si sono sincronizzati per renderlo sempre più pulito, preciso. La stessa cosa vale per le parole e per qualsiasi altra operazione da affinare con l’esperienza. Anche se non ce ne rendiamo conto, la nostra competenza attuale attinge da radici antichissime, in parte inconsce e in parte prosperate durante l’infanzia e l’adolescenza. Io innaffiavo ben volentieri il mio orticello creativo. Alle medie, con fogli, pinzatrice e grande entusiasmo, confezionai ben due libri in cui raccolsi racconti e caricature dei miei insegnanti. Poi venne il tempo delle superiori, dove scrivevo nel giornalino della scuola e a 17 anni il mio primo vero articolo giornalistico venne pubblicato in un inserto del Resto del Carlino di Bologna. Tagliando tutte le tappe intermedie (perché altrimenti dovrei scrivere un libro solo su questo) salto al periodo post diploma, in cui il bisogno di unire l’arte, la scrittura, e una crescente passione per l’informatica sono sfociati nel desiderio irreprensibile di diventare web designer. 19
Come nei migliori film, però, il percorso non poteva essere così semplice e lineare. Devi sapere che ho un piccolo disturbo che tra le altre cose mi porta a non “connettere” correttamente le operazioni logiche: se vedo un’equazione di primo grado non riesco a svolgerla e faccio molta fatica a leggere e interpretare qualsiasi cosa riguardi i numeri. Se vuoi mettermi in crisi chiedimi di controllare l’esattezza di un numero telefonico o di ricordare a memoria una porzione di codice. Non ne esco. Ma io non rinuncio facilmente e – stoica – decisi di continuare il percorso di studi guardando con timore reverenziale la Facoltà di scienze matematiche fisiche naturali di Bologna, in poche parole l’ultimo posto dove avrei mai pensato di finire. Anche la mia professoressa di matematica delle superiori, Anna Quinzani, dopo tre anni in cui non riusciva ad assegnarmi un voto più alto del 2, mi disse che ero folle all’idea di iscrivermi alla facoltà di informatica e mi liquidò con un «non ce la farai mai». Oltre alla stima immensa che ho tutt’ora per lei (che mi ha sempre cazziata per le mie pessime performance matematiche e al contempo è stata l’unica a sforzarsi di capire cosa non funzionasse in una studentessa con buoni voti in tutte le altre materie), le sarò anche eternamente grata, perché il suo diktat ha acceso in me la sfida nei confronti della professione. Tra un esame e l’altro, alla facoltà di information technology, mi sono accorta che si stava ripetendo lo stesso adagio delle superiori. Tanto andava bene se si trattava di marketing o reti, quanto poteva andare male se dovevo toccare numeri o grandi quantità di codice. Era vero, non ce l’avrei mai fatta. Umiliata e sconfitta, gli stipendi da fame dei miei colleghi neolaureati (400-600 euro al mese in stage eterno) mi diedero la giusta motivazione per salutare per sempre il mondo universitario, i suoi docenti arroganti, la competizione ai limiti del ridicolo e 20
i siparietti tipicamente italiani dove i rettori sono Magnifici, ma sostanzialmente non mettono i giovani nelle condizioni di essere pronti per affrontare una professione. Quest’ultima frecciatina è rivolta non solo all’inefficiente sistema scolastico italiota – bravo a riempire lo studente come una bottiglia, ma poco capace di fargliene apprezzare il contenuto – ma anche a tutti quei web designer che, nonostante una formazione da paura con il massimo dei voti, non si fanno una ragione del fatto che un sito web vada progettato pensando che qualcuno dovrà visitarlo e magari trovarci quello che cerca. Chiedo troppo se aggiungo anche che l’utente in linea teorica dovrebbe anche tornarci più volte e condividerne il contenuto? Polemiche a parte – ebbene sì, sono abbastanza rompiscatole – io avevo un obiettivo e dovevo raggiungerlo. E presto mi accorsi che la pratica sul campo, per quanto relegata ai ritagli di tempo, era decisamente più efficace delle otto ore consecutive di Java e dei mattoni di basi di dati. Il mio vero percorso è iniziato dal giorno in cui ho installato FrontPage per crearmi un sitarello personale, passando in seguito per Dreamweaver, seguendo l’istinto nel bocciare l’allora astro nascente Flash, fino allo sposalizio con Joomla. Quello che sto cercando di trasmetterti è un concetto basilare: puoi anche essere un cavallo sul quale non scommette nessuno, l’importante è che quello a fare la puntata massima sia proprio tu. La prova che questo ragionamento torna – non me ne vogliano gli studenti modello – sta nel fatto che Enrico Flaccovio ha inviato al mio indirizzo quella famosa mail in cui cercava una persona che parlasse di una materia complessa come il web design. A oggi ho all’attivo una sequela di quelli che amo definire “cadaveri low cost” (clienti low budget che più avanti ti insegnerò a evitare), molti progetti in cui il committente ha voluto l’ultima parola con mio grande disappunto (esatto, proprio quelli che non metteresti mai a portfolio), un paio di lavori dei quali vado fiera e tante, 21
tantissime cose da raccontare a chi ha scelto di avventurarsi in una carriera articolata come quella del web designer. Il titolo di questo capitolo è Perché te ne sto parlando proprio io, ma arrivati a questo punto posso aggiungere un sottotitolo: E quindi perché puoi farlo proprio tu. Questo testo non è il classico manualetto “how-to” in cui passo passo ti spiego come installare Joomla e mettere online un sito funzionante. È qualcosa di più intenso, quasi un codice deontologico del buon web designer che ti insegnerà a mettere valore aggiunto a ogni progetto, e quel valore non sei altro che tu. D’altra parte, spero che questo libro possa fungere anche da filtro per scoraggiare gli automi. Il web design è arte, prima di tutto. Chi cerca di incasellare la costruzione di un sito web in un mero processo meccanico, dando vita a ecomostri quali i generatori automatici di siti vetrina, sta solo creando un danno al cliente e alla professione. Un sito web è prima di tutto una trasposizione virtuale di un’identità – personale o aziendale – che esiste e si muove secondo un preciso schema fatto di valori, metodi, elementi comunicativi. Pretendere di uniformare una tale varietà di sfumature in poche righe di codice da riproporre all’infinito, senza variazioni o quasi, significa togliere personalità al cliente e quindi svolgere male il proprio lavoro. Ecco perché la figura del buon web designer non si costruisce attraverso lo studio rigoroso del codice e l’applicazione metodica del manuale. Il bravo professionista del web è prima di tutto votato all’ascolto, che avviene attraverso un brief approfondito con il committente e le successive tarature in corso d’opera. A questo punto Joomla e tutto il know-how che gli ruota intorno sono solo gli strumenti attraverso i quali si raggiunge uno scopo finale: la comunicazione efficace. 22
Il sito non sarà più un parcheggio momentaneo di informazioni poco fruibili, ma un hub veloce e performante dove il navigatore si potrà muovere agilmente tra contenuti multimediali interessanti, benefit elargiti attraverso contest o offerte speciali, spazi aperti in cui comunicare con l’azienda in modo sempre più immediato. Basti pensare alla rapida evoluzione del servizio clienti. Vent’anni fa bisognava scrivere alla “casella postale”, poi sono entrati in gioco i centralini e i numeri verdi, che hanno lasciato spazio ai call center solo un decennio dopo. In seguito, quando internet si è diffuso in modo capillare, chi non aveva voglia di alzare la cornetta (“Mondial Casa ti aspetta!”, come non ricordarlo) poteva iniziare a frequentare i forum o scrivere qualche riga per email. A oggi anche questi ultimi due sistemi si stanno rivelando obsoleti, perché i ticket system, le live chat e le assistenze via Twitter sono diventati standard irrinunciabili. Sotto questo punto di vista, in Italia, come rilevato dall’indagine 2011 sul comportamento d’acquisto del cliente multicanale di pmi.it, le statistiche non sono incoraggianti:
Ma noi è proprio su quel misero 13% del web che dobbiamo lavorare benissimo, affinché nel giro di pochi anni vada a lievitare fino 23
a raggiungere la percentuale che attualmente viene riservata alle email, sistema sicuramente comodo ma che paga lo scotto della differita. L’impegno che ogni buon web designer – e ogni cliente – deve avere è l’immissione sul mercato di un prodotto sempre innovativo, senza cadere nella trappola tipicamente italiana dell’abitudinarietà. Perché insisto su questo punto? Noi siamo i professionisti del web, giusto? Il web è evoluzione, velocità, innovazione. Tutto il contrario di quanto sta accadendo nel mondo reale, intricato in una fitta oscura boscaglia di schemi mentali, trafile burocratiche, raccomandate con ricevuta di ritorno e fax in bianco e nero. Non è forse nostro dovere essere gli antesignani che distruggono questi schemi attraverso il prodotto che offriamo ai nostri clienti, ricco di piccole migliorie tecnologiche che migliorano il dialogo B2B e B2C e snelliscono qualsiasi tipologia di business? L’imprenditore italiano in primis è saldamente aggrappato a una lunghissima serie di convinzioni errate sull’approccio che l’azienda e tutto ciò che vi ruota intorno devono avere per forgiarsi del titolo di “azienda lider”. Sì, scritto proprio così, fai una bella ricerca su Google e mettiti a piangere:
Io, che sono una pessima commerciale, ho fatto veramente fatica a spingere gli imprenditori verso la novità, accolta sempre con diffidenza e accantonata con frasi tipo «no, ma i miei clienti tanto sono abituati così». È frustrante. 24
Frustrante almeno quando sfoderano la solita sequela di richieste tipo “voglio il logo più grande” (guardati i video della serie Make My Logo Bigger) o “si deve vedere la foto della sede perché così si capisce che siamo grandi”. Capisci dove dobbiamo lavorare di fino? Te lo spiego meglio nel prossimo capitolo.
25
2. Web design: l’arte di esprimersi in digitale
Con Joomla scoprirai una cosa bellissima: anche se non sei un drago della programmazione, riuscirai a fare lavori fantastici, esprimendo tutto il tuo potenziale creativo con risultati che daranno grandi soddisfazioni sia a te che al tuo cliente. Ma della magia di Joomla ne parliamo a fondo nel prossimo capitolo, prima bisogna consolidare ancora qualche base del web design, per partire alla grande con il CMS più bello del web! Sì, lo so che non vale, io sono di parte, ma secondo me alla fine del libro sarai della mia stessa opinione. Quando parliamo di web design possiamo sostanzialmente intendere due concetti: “fare siti web” e “creare siti web”. Pensi che siano la stessa cosa? Se ti dico “faccio un dolce” e “creo un dolce” forse riesci a cogliere la differenza. 27
Nel primo caso apro un libro di ricette e seguo passo passo tutte le fasi per riprodurre un risultato consolidato da altre persone. Nel secondo metto sul piano di lavoro una serie di ingredienti che deciderò come dosare per ottenere un dolce nuovo, del quale nessuno conosce il sapore. Chiaramente se non ho un’idea di massima di come si amalgamano farina, uova, zucchero e di quanto tempo necessitano per cuocere, corro il rischio di tirare fuori dal forno un abominio immangiabile, mezzo crudo e magari con il fondo bruciato. Una sorte che possiamo evitare attraverso qualche elementare nozione di chimica e un po’ di esperienza sul campo. A te serve proprio questo. Conosci già i tuoi ingredienti e il loro tempo di cottura? Sai dove acquistarli affinché siano freschi e saporiti? Vai nel discount più economico o ti fai rapinare dal botteghino sotto casa ben sapendo che quelle uova dai tuorli così rossi e gustosi non le trovi da nessun’altra parte? Con un paragone culinario ti ho spiegato la differenza tra un buon web designer che crea un dolce ad hoc e un pessimo web designer che ripropone a tutti i clienti la stessa ricetta, senza curarsi di chi siano o di cosa abbiano bisogno. Poi, se per superficialità mandi all’ospedale un celiaco, sono tutti affari tuoi. Rischi del mestiere! Bisogna evitare fastidiose incursioni al pronto soccorso, come ad esempio la telefonata del tizio a cui hai consegnato il sito la settimana scorsa, in cui ti informa che ha scoperto che nel paese vicino c’è uno che fa il suo stesso lavoro e ha una pagina web identica alla sua, con addirittura lo stesso logo e le stesse voci di menu. Prima di dire “oh cavolo!” pestati un piede da solo. Hai fallito. E la cosa peggiore è che ti hanno beccato subito, quindi non avrai scuse del tipo “ti hanno sicuramente copiato loro”. Questa scena, o figura di merda, per usare un francesismo, capita più spesso di quanto pensi. Se sei convinto di passarla liscia, ti informo che sono più i clienti che vengono da me per farsi modificare un sito troppo simile a quello del concorrente, di quelli che 28
entrano a chiederne uno nuovo di zecca. Qui mi voglio dilungare raccontandoti di Improvvisello, il mio pseudo concorrente realmente operante in zona, sperando che tu non voglia diventare un suo adepto. Devi sapere che, quando non sono a Bologna, vivo in un paese con poche migliaia di abitanti, dove molti si arrabattano come possono per sopravvivere e in questo non c’è nulla di male, perché alla fine è il valore aggiunto della Sardegna: una vita a misura d’uomo dove non esistono autostrade popolate di uomini in giacca e cravatta in corsa verso l’ufficio. Qui non si mangia il tramezzino vegetariano nella mezz’ora di pausa pranzo alla luce del monitor, puoi uscire in pigiama che nessuno ti prende per pazzo e prima delle 10 del mattino aprono solo i bar. È una figata, se consideri che siamo anche immersi in una natura selvaggia. E qualche selvaggio purtroppo si è pure improvvisato web designer. Improvvisello in realtà fa tutt’altro lavoro, non voglio dare troppi dettagli, quindi immagina solo che abbia un ufficio che in ogni caso non c’entra nulla con il web. Mettiamo che venda viti, ecco. Tra un sacchetto di bulloni e due rivetti, ha deciso che il sito web è poca spesa e molta resa, quindi a dispetto di qualsiasi logica commerciale, si propone come web designer e con 250 € – non ho mai capito se l’IVA c’è, è inclusa o esclusa o esente – ti fa il sito. Siccome io esamino qualsiasi concorrente, anche quelli che in effetti concorrenza non lo possono essere, dal momento che lavorano con parametri completamente differenti dai miei, vado a controllarmi il codice sorgente di un paio di lavoretti che ha avuto il coraggio di pubblicare. CTRL+U è una fonte inesauribile di informazioni. Individuo subito la pietra dello scandalo: <meta name=”Generator” content=”Generator XY www.linkalsitodelgenerator.com” />
Cosa significa questa stringa? Il mio amico Improvvisello si diletta 29
nella nobile arte del web design con un generatore automatico di siti web, che non menziono perché non merita pubblicità di alcun tipo. Il funzionamento è semplice: installi questo software, crei il sito sulla base di un migliaio di layout pressoché identici, inserisci i tuoi contenuti e pubblichi una straordinaria accozzaglia di gif animate, sfondi pattern tridimensionali anni ’90, testi rossi su sfondo blu e via dicendo. Certo, con 250 € non è che il cliente possa pretendere chissà cosa, ma questo a te che sei il mio pupillo web designer lo spiego in un capitolo a parte, dove ti aiuto a non svenderti (come ho fatto io per lungo tempo) e a rimanere comodo comodo nel tuo guadagno netto dopo che il Fisco ti ha detratto quel simpaticissimo 53%. Ma il cliente non lo può sapere, quindi va da Improvvisello, gli regala 250 denari, e rimane con le calze bucate. Per i mesi successivi, la vita del malcapitato si snoderà tra i vari uffici dei vari Improvviselli locali alla ricerca di qualcuno che ripari i buchi: ban da parte di Big G per contenuti duplicati, errori del server, e via dicendo. Tu non vuoi fare questo, vero? Bene, allora mettiamoci al lavoro, seriamente. Come ti dicevo, per sviluppare correttamente la tua creatività devi prima capire qual è il tuo approccio ideale. Per caso dipingi, disegni, fotografi, suoni o ti eserciti in una qual– siasi forma di arte analogica? Se la risposta è no, questo è il momento giusto per cominciare. Mi spiace deluderti, ma se prima non alleni la mano e la mente, non avrai sufficiente elasticità mentale per muoverti nel mondo del web design. Potresti rispondere che sei uscito a pieni voti dall’IED o che hai un diploma con lode come grafico pubblicitario ma credimi se ti dico che l’espressione artistica è uno step essenziale per la buona riuscita di un lavoro e per non vestire i panni dell’Improvvisello della situazione. 30
Le tue doti sono il buon gusto necessario a mixare gli ingredienti per la torta. Quando apprendi i gusti del cliente e il tuo cervello conosce a menadito tutte le possibili combinazioni alimentari per creare un dolce conforme a essi, non solo dimezzerai i tempi di ideazione e realizzazione, ma sarai sicuro di appagarlo e saziarlo a dovere. È il momento di individuare il tuo approccio artistico, quindi rispolvera e metti in pratica quel sogno che avevi nel cassetto da bambino – qualunque esso sia, dalla cover band dei Rolling Stones al vernissage in centro a New York – e segui i consigli che ora scriverò per tutti i web designer che hanno già scelto un percorso artistico. Attenzione, non è una battuta. Sono molto seria quando ti consiglio di realizzare i sogni dell’infanzia, poiché in essi risiedono le tue pulsioni più pure, l’onda creativa che tutti abbiamo fin dalla nascita, ma che viene sopita con violenza dai metodi educativi attuali, purtroppo obsoleti e inadatti alla nostra vera natura. Il benessere e l’appagamento che riceverai dall’espressione artistica sarà difficile da ricreare anche bevendo la migliore pinta di Guinness o durante il concerto dei Pink Floyd (ecco su quest’ultimo punto ho qualche riserva, forse per i Pink Floyd sarei disposta ad amputarmi le mani). Qualche consiglio da mettere in pratica nell’immediato per risvegliare la creatività. N. 1 Su Instagram e Pinterest ci sono un sacco di artisti eccezionali che pubblicano quotidianamente centinaia di lavori di vario genere: pittura, acquerello, scultura, fotografia, pastello, calligraphy, composizioni miste, ecc. Naviga tra i vari hashtag per trovare l’ispirazione attraverso le loro opere. Nella pratica, se ti senti ispirato dalla pittura, puoi provare a cercare diverse combinazioni come #painting, #oilpainting, #acrylicpainting e tutte quelle correlate, facilmente individuabili anche tramite apposite app come Tags For Likes. 31
N. 2 Hai già un “angolo della tranquillità”? Può essere una scrivania sufficientemente spaziosa per spargere tutto quello che ti occorre (fogli, matite, colori, post-it, notebook), collocata in un ambiente confortevole e silenzioso. Avere un nido è di vitale importanza, perché potrai corredarlo di lavagne dove fare brainstorming e tenere sott’occhio mappe mentali.
N. 3 In questo spazio devi ricercare il silenzio, che permetterai di rompere solo alla tua musica preferita – io uso molto Chopin o Leonard Cohen, lo sto ascoltando proprio adesso mentre scrivo – o a input sonori che ti facilitano il processo creativo. Ricordati che la creatività è un fattore inconscio, quindi non cercare di raggiungerla con ragionamenti o pensieri ricorrenti, perché scapperebbe a gambe levate!
N. 4 Personalizza il tuo nido con arredi, colori ed elementi naturali (legno, piante, pietre). Siamo abituati a vivere in mezzo al cemento, altra condizione assolutamente alienante. Un “ritorno alle origini”, per quanto appena accennato, è miracoloso. Ricordo il giorno in cui andai in Sardegna per una vacanza preliminare al trasferimento. Non la vedevo da anni e il viaggio cadeva in un periodo particolarmente stressante in cui la mia mente era aperta più o meno quanto una cassaforte arrugginita. Nel primo pomeriggio ricordo che ero stesa sul letto, in una stanza con finestre ad arco spalancate, dalle quali entrava un venticello capace di allontanare la canicola d’agosto. Guardavo il soffitto senza pensare a nulla e nella mia mente si materializzavano centinaia di idee su come quella camera sarebbe stata valorizzata da un determinato colore o da un certo stile nell’arredo. Rimasi molto colpita da questo proliferare di spunti non cercati, tanto che dissi ad alta voce: «qui sono tornata a essere creativa!». 32
N. 5 Per limitare le distrazioni, prediligi musica senza linea vocale, a meno che essa non sia proprio accennata. Bocciato a pieno titolo il growl metal, quello è perfetto ai rave se hai i capelli lunghissimi e cinque o sei birre in corpo. Il cervello si rilassa quando riesce a produrre – tra le altre – le onde alfa (rilassamento) e theta (quelle della meditazione per intenderci, comprese tra 4 e 8 Hz, le più importanti per favorire la creatività), decisamente lontane dalla frequenza dei Cannibal Corpse. N. 6 Se usi Youtube, assicurati che le playlist siano lunghe almeno un’ora o due, per evitare di interrompere il flusso creativo. Sperando che non parta all’improvviso la pubblicità.
N. 7 Ritagliati spazi di libertà assoluta davanti al foglio bianco. Hai il potere di usarlo come meglio credi, lascia che sia il tuo istinto a dirti cosa fare: non c’è differenza tra ricrearci la Gioconda o sputarci sopra, l’importante è che siano le tue sensazioni a decidere. Attenzione, spoiler: sarà abbastanza difficile, più di quanto credi! Siamo schiavi del pensiero razionale, quindi procurati un paio di tronchesi e taglia la catena per riuscire in questo esercizio. N. 8 Una volta tranciata la catena razionale, trova il tuo stile senza lasciarti condizionare in alcun modo. Le urla della tua insegnante di educazione artistica delle medie, furente perché non coloravi in maniera uniforme sono solo un lontano – e distruttivo – ricordo. Non voglio essere troppo anarchica nei confronti dell’educazione che forse hai ricevuto, però ti chiedo di fidarti di me. La tecnica, il metodo e tutte le pippe mentali annesse e connesse servono nella misura in cui tu decidi di usarle per arrivare al risultato richiesto 33
dal tuo istinto. Se l’istinto vuole ingrigire il foglio bianco, allora colorare in modo uniforme si rivelerà adatto allo scopo. Ma se la tua musa ispiratrice è Jackson Pollock, te ne farai ben poco.
N. 9 Qualora lo ritenessi necessario, lavora con stili e materiali diversi, anche sullo stesso progetto. Per stare in tema con le arti illustrative, puoi arricchire un lavoro a pastello con punti di luce a tempera.
N. 10 Il riciclo creativo è un’altra potentissima risorsa. Vedere con occhi nuovi gli oggetti destinati a finire nella spazzatura è un esercizio mentale dai risultati strabilianti. Non c’è modo migliore per rompere quegli schemi di cui ti ho parlato più volte. Solo una mente molto flessibile riesce a vedere un’opera d’arte o un complemento d’arredo in una vecchia valigia di cartone. N. 11 Crea prima su carta tutto ciò che vuoi realizzare in digitale.
Qualora attraverso tutti questi consigli tu non riesca ancora a cogliere l’energia creativa, puoi sempre cercare ispirazione nei lavori altrui. Non c’è nulla di male, c’è una citazione di Pablo Picasso che dice «il bravo artista copia, il grande artista ruba». Stando ben lontani dal concetto di plagio, possiamo sentirci tutti un po’ autorizzati a cogliere dettagli utili precedentemente realizzati da bravi designer. Ti faccio un piccolo esempio. Ti arriva una commessa che oltre al sito prevede il restyling del logo e materiale grafico correlato, che può essere un biglietto da visita o una brochure. A prescindere dal fatto che sia tu o il tuo grafico di fiducia a occuparsene, è buona norma (no, non è buona 34
norma, è DOVEROSO) che il prodotto finale sia graficamente uniforme e coerente con l’identità aziendale del tuo cliente. Nonostante ti sia stata data una buona dose di libertà progettuale, non hai le idee chiare su come dovrà essere il brand identity pack, quindi sarà il momento giusto per setacciare la rete alla ricerca di qualche lavoretto ben fatto.
BEHANCE.NET Behance è il network dei creativi della Adobe. Dal momento che la Creative Suite è la punta di diamante a livello di software per la grafica raster, vettoriale e per l’impaginazione di libri o pubblicazioni digitali, nel network hai la possibilità di sfogliare i lavori dei migliori designer al mondo. Il sito dà la possibilità di sfogliare i vari portfolio navigando per Creative Fields, tutte le branche del graphic design. Puoi trovare loghi, animazioni, progetti di architettura, UX design, progetti di branding, siti web e qualsiasi altro elemento realizzabile con la Creative Suite. Ti consiglio di tenere d’occhio questo sito perché è una fonte inesauribile di ispirazione. CREATIVEBLOQ.COM Questo è un blog molto interessante, all’interno del quale vengono proposte accurate selezioni di progetti grafici, web design, 3D e tutto ciò che è correlato. Ci sono anche approfondimenti tecnici “100% fuffa free” e molti buoni sconto per acquistare pacchetti di font, elementi grafici, e molto altro. THEDESIGNINSPIRATION.COM Il nome dice tutto. Hanno anche una sezione “Typography” a dir poco deliziosa, danno la possibilità di scaricare una serie infinita di pattern e propongono anche un assortimento di infografiche: segnalo subito nei preferiti. 35