5 strumenti indispensabili per un web designer

Feb

Insieme ad Andrea Barghigiani abbiamo approfondito nei giorni scorsi le caratteristiche principali che fanno del web designer una professione davvero creativa e tutta da scoprire. Oggi Andrea ci darà dei consigli più specifici, utili a chi vuole sperimentare gli strumenti del web design e magari intraprendere come lui questa carriera.

Quando Futura Pagano mi ha chiesto di dare dei suggerimenti pratici per il web design tra me e me è sorta una domanda: “E adesso cosa dico?!?”. Capiamoci bene, non la mancanza delle mie conoscenze il problema, è che il numero di possibili soluzioni che ti potrei proporre rasenta l’infinito! Ci sono i sistemi operativi, le preferenze personali, la lingua, il risultato che possiamo ottenere e molti altri aspetti che non desidero trattare. Perché no? Beh, semplicemente perché altrimenti dovrei proporre un’immensa lista di valutazioni, opinioni e consigli sul perché e il percome prendere in considerazione uno strumento piuttosto che un altro! Allora ho deciso di avere un altro approccio, e di utilizzare altre metriche: mobilità, indipendenza dalla piattaforma e connettività. E ho deciso di anticiparti alcuni strumenti che andremo a trattare direttamente nel corso Web design from ground to top, che terrò a DoLab dal prossimo 24 Marzo insieme ad Eugenio Petullà.

Editor di Testo
Se stai leggendo queste righe e non sai che non devi usare Word per creare le pagine HTML.. scusami tanto ma ti mando in prigione senza neanche passare dal via! Ovviamente scherzo, ma anche se Word è un potente strumento per editare il proprio testo purtroppo non è in grado di mantenere il codice delle nostre pagine HTML. Quello che a noi serve, invece, è un editor che faciliti la vita senza strumenti per la formattazione. Tendenzialmente le caratteristiche più apprezzate di un editor di codice sono:
– colorazione del codice: l’editor deve essere in grado di riconoscere il codice che stiamo inserendo e, di conseguenza, gli elementi che ci interessano maggiormente, lasciando in disparte quelli che sarebbero soltanto una distrazione;
– client FTP: anche se ti consiglio di sviluppare il tuo sito in locale e caricarlo sul server soltanto successivamente, talvolta fa comodo poter entrare velocemente e fare delle modifiche; perciò questa feature ti sarà di grande aiuto;
– velocità: non raccontiamoci baggianate, un editor di testo deve essere veloce! Con la soluzione che ti sto per presentare, la velocità è direttamente proporzionale al budget che vuoi investire;
– intuitività: siamo sviluppatori e come tali siamo sempre impegnati! Per questo motivo non possiamo perdere del tempo a chiederci che cosa fa quel determinato bottone, piuttosto è l’editor che mi deve aiutare a velocizzarmi.
Il mio consiglio ricade su Atom, un editor di testo abbastanza giovane ma che grazie alla sua licenza Open Source e alla community GitHub sta crescendo in modo incredibile! Caratteristica molto interessante di questo editor è che è stato pensato proprio per essere esteso e personalizzato. (ad oggi puoi esistono più di 1500 estensioni e 500 temi). Se non sai cosa siano questi componenti ti consiglio di aggiungere ai tuoi preferiti il sito html5AndMore, che la prossima settimana ne parlerà.

Editor Grafico
Quando si parla di grafiche rischiamo sempre di camminare su un campo minato e non mi riferisco a quello di Windows… Troviamo dei grafici che dedicano la propria vita a Photoshop, altri che con Illustrator sono in grado di farci addirittura il caffè ed altri ancora si stanno affacciando al nuovo (e più economico) Affinity Designer. Non fraintendermi, reputo tutti questi degli ottimi strumenti che almeno dovresti conoscere ma hanno un problema comune: non sono multipiattaforma! Potrei consigliarti di usare solo Mac ma non posso costringerti a comprare una determinata macchina, quindi il mio ruolo è quello di farti scoprire uno strumento che potrai usare indipendentemente dal sistema operativo che stai utilizzando: ecco a te GIMP. È il più famoso, il più sviluppato e il più usato editor grafico open source. Esistono moltissimi tutorial online che ti permetteranno di imparare ad usarlo e iniziare a sviluppare le tue prime grafiche. Ultimamente sto usando pochissimo i programmi di grafica che dispongo perché con il solo aiuto del linguaggio CSS siamo in grado di costruire molti effetti grafici e di creare dei siti web più leggeri. Ecco perché all’interno del nostro corso in aula non troverai alcun programma di grafica: partiremo da una bozza ma lavoreremo molto di CSS.

Browser Dev Tool
Sapevi che lo strumento che stai utilizzando per leggere questo articolo sarà anche quello che utilizzerai con maggior successo per testare i tuoi siti web? Se vuoi un consiglio da amico, punta alla Firefox Developer Edition: questo browser risulta essere un concentrato di esperienza del team Mozilla sullo sviluppo web! Grazie agli strumenti interni potrai controllare veramente un sacco di codice e, insieme alle conoscenze che apprenderai nel nostro corso, sarai anche in grado di fare i primi esperimenti. Un esempio? Lo sviluppo di applicazioni mobile per Firefox OS, che è il sistema operativo per cellulari sviluppato dalla stessa Mozilla.

FTP
Ovviamente se si sviluppa soltanto all’interno del proprio sistema locale senza poter caricare sul web il divertimento è molto più limitato. Ma quando si caricano file di grosse dimensioni o diventiamo dei web designer seri, anche gli strumenti che utilizziamo devono essere professionali. Quando vogliamo caricare dei file sul nostro hosting come dei PRO la prima cosa che bisogna fare è abbandonare il browser. “Ma come?!? Prima mi dici di usarlo e poi di abbandonarlo?”. Ebbene sì: nel primo caso il mio consiglio era quello di usarlo nelle fasi di sviluppo, ora che il lavoro è terminato (o quasi) sei pronto a caricarlo nel web. E per farlo devi usare il protocollo FTP, un acronimo per File Transfer Protocol, che ci permette di caricare i file in maniera più veloce e affidabile. Il programma FileZilla ci permette di collegarci dal sito locale (il nostro computer) a quello remoto e ci fa caricare in modo semplice qualsiasi file necessario al funzionamento del sito web. Anche questo è un programma open source e gratuito, quindi potrai iniziare la tua carriera senza troppi problemi e investendo un budget veramente basso.

Hosting

Se vuoi avere un sito web prima o poi ti dovrai scontrare con un servizio di hosting. Esistono moltissime persone che ti consiglieranno questo o quel piano di hosting e anche io ne ho provati molti, ma soltanto ultimamente mi sono deciso a sponsorizzarne uno ben preciso. Al nostro corso di web design utilizzeremo piani di hosting gratuiti, per permettere a tutti gli studenti di fare i primi esperimenti. Se invece desideri avere un piano di hosting professionale ad un prezzo vantaggioso, il mio consiglio ricade tranquillamente su SiteGround, che offre dai servizi ad alte prestazioni ad un prezzo veramente competitivo.

Quest’approfondimento è stato super interessante, non credi? Ma se vuoi saperne ancora di più ti diamo una dritta: il prossimo 11 marzo puoi avere l’occasione di rivolgere direttamente le tue domande sul web design ad Andrea e al WordPress Developer Eugenio Petullà! Come? Partecipa al webinar “5 strumenti indispensabili per un web designer“ e potrai avere tutte le risposte che cerchi sui linguaggi HTML5 e CSS3, tool, Responsive Design e molto altro ancora. Non perdere l’occasione: inserisci qui sotto la tua email e registrati subito!