Imparare a fare siti – guida per iniziare

Quasi ogni settimana ricevo una email che mi chiede “Come posso imparare a fare quello che fai tu? Vorrei creare siti e non so da dove iniziare“. Queste email mi fanno gonfiare di orgoglio e allo stesso tempo mi mettono un po’ in difficoltà perché penso che ognuno impari in modo diverso e non è detto che il mio percorso sia quello giusto per tutti.

Ne avevo già parlato in passato, scrivendo una specie di autobiografia della mia vita con i computer e internet. Oggi provo ad essere più specifica.

Inglese

Non l’inglese per ordinare al bar, ma l’inglese tecnico che serve per capire i linguaggi di programmazione e le basi di informatica. Una query è una query, non cercate disperatamente di tradurla in richiesta. Un array è decisamente un array, checché ne dica chi vi parla di matrice. La documentazione delle cose del web è scritta in inglese: è nata così e non importa quanto vi ostinerete a difendere la nostra lingua, internet parla inglese.

Le basi di come funziona internet

Una cosa che mi stupisce sempre moltissimo è vedere colleghi che ignorano il funzionamento dell’internet. Non dei siti, proprio della rete. Quindi la prima cosa da fare è tornare indietro e capire cosa sono:

• Architettura Client/Server
• Protocolli (HTTP, HTTPS, FTP, ecc…)
• Cosa è un dominio, cosa è un DNS
• Cosa è un hosting
• In linea di massima come è fatto un database.

Lo scopo non è diventare degli esperti di questi argomenti ma capire in generale come funziona questa rete di reti. Se fate siti da un po’ e non conoscete questi argomenti, vi consiglio di prendervi un paio di ore, anche solo su Wikipedia.

Di quale parte di un sito volete occuparvi?

Una volta che capirete come funziona l’internet, capirete che fare un sito vuole dire tante cose. Le due grandi famiglie sono:

• Front-end
• Back-end

A loro volta si dividono in decine di figure che si occupano di cose sempre più specifiche, ma diciamo che voi volete iniziare e quindi scegliete intanto la vostra macro area.

Per fare una semplificazione massima: front-end è tutto quello che si vede nel browser quando si naviga in un sito, back-end è quello che sta sotto, ad esempio il database.

Occuparsi di front-end non vuole dire grafica, questa è solo una parte, non il tutto. Se sapete usare Photoshop e ci prendete con colori e font, non è detto che sarete dei bravi web designer o dei bravi realizzatori di siti. Stessa cosa per gli sviluppatori: se siete dei maghi di PHP non è detto che diventerete degli esperti di WordPress. Prima di tutto capite chi fa cosa, fate prove per capire cosa vi viene più o meno facile e continuate su quella strada.

Web Design, sviluppo front-end, sviluppo back-end

Una volta la cosa funzionava così:

• uno si occupava di fare le bozze Photoshop, creava palette armoniose, sceglieva font che lasciassero il segno, distribuiva gli elementi in una pagina, faceva gli sfondi, ecc…
• poi passava un file psd con tutti i livelli separati a un altro che trasformava tutto in HTML e CSS
• in caso di sito dinamico arrivava l’esperto di MySQL + PHP (o ASP o cosa vi pare) e faceva funzionare il tutto.

Il primo poteva non sapere scrivere una riga di HTML e il secondo poteva non avere idea di cosa fosse una palette. Il terzo, lasciamo perdere: lui fa query su un DB, sapete che gli frega dei font serif e sans-serif?!?

Poi sono arrivati i CMS e la soglia di entrata alle professioni web si è decisamente abbassata con risultati positivi e negativi.
Per farla breve, se vi fanno un sito con WordPress che a un certo punto smette di funzionare, la colpa non è di WordPress, ma di chi vi ha fatto il sito o vostra che avete pasticciato “tanto è facile” e avete installato chissà quali porcherie, messo mano in chissà quali file, ecc… Poi certo, shit happens, quindi a tutti va storto qualcosa prima o poi: la differenza sta tra i professionisti che sanno risolvere il problema (o sanno di non sapere e si rivolgono a altri) e chi non sa neppure da che parte iniziare a cercare risposte su Google. Ad esempio, al momento della scrittura di questo post ho un sito irraggiungibile per un problema con l’hosting (infatti non tra quelli consigliati da me 🙃)

Oggi le cose sono un po’ diverse perché si tende a non usare Photoshop per fare bozze, ma si passa dai wireframe alle bozze in browser (e per oggi intendo da 10 anni circa… ma questa è un’altra storia). La divisione delle competenze è però più o meno la stessa, soprattutto nel caso di progetti complessi o realtà strutturate: ci sono agenzie che fanno solo sviluppo, altre che si occupano solo di UX, ecc… Diciamo però che se avete scritto a me per sapere come imparare a fare cosa faccio, oggi dovete farvi la classica “infarinatura”.

I linguaggi del web

Tutti quelli che si occupano di web devono conoscere bene l’HTML. È il linguaggio di markup che definisce la struttura di tutte le pagine web. È un linguaggio semantico, quindi dà informazioni sulla struttura ma anche sul contenuto. In pratiche se progetto un sito con una barra laterale, devo usare l’elemento HTML aside, non devo creare una div con id “cicciobaciccio”: in questo modo il browser sa che lì c’è una barra laterale. Se ho un menu, lo metto in un elemento nav e via così.

Poi, a seconda della specializzazione che vorrete prendere, dovrete imparare il CSS. Se vi occupate di back-end dovete solo capire come funziona, se anche non vi ricordate a cosa serve box-shadow potrete fare il vostro lavoro. Il CSS serve a definire l’aspetto della struttura scritta in HTML.

Se il tipo di servizio che offrite è la personalizzazione di temi pronti potete anche fermarvi qui:

1. Comprensione del funzionamento di internet
2. Comprensione minima della struttura di WordPress e del suo funzionamento
3. HTML
4. CSS

Se volete creare i vostri temi o offrire un livello superiore di personalizzazione dovrete imparare:

• JavaScript, per far succedere cose nelle pagine web
• PHP, linguaggio lato server

Quanto approfondirete la conoscenza di questi linguaggi dipende dalle vostre aspirazioni e inclinazioni: io sono anni che dico che voglio imparare bene il PHP, ma la verità è che non mi servirebbe a un granché per il tipo di lavoro che svolgo con il mio target di riferimento. Quando c’è bisogno di fare cose più complesse di quelle che so fare da sola ho una serie di collaboratori che mi aiuta.

Fare siti con WordPress

La maggior parte delle persone che conosco, che offrono generica “creazione” siti web con WordPress, sa fare due cose:

1. Installare WordPress con procedura automatizzata del proprio hosting
2. Installazione e configurazione di un tema

Pensare che fare un sito voglia dire questo suona riduttivo e offensivo eppure siamo partiti in tanti così: a pensarci bene, ha senso. Il mercato dei siti web è ampio e come in tutti i mercati c’è posto per figure e prodotti di tutti i livelli, che ci piaccia o no.

Idealmente tutti i siti dovrebbero essere responsive, accessibili, performanti: ma non tutti i clienti vogliono o possono permettersi questi siti. Prima di diventare jedi siamo stati tutti padawan, no? Come clienti e come fornitori. Io ogni tanto incrocio un sito che ho fatto nel 2010 e vorrei solo poter togliere il mio nome dai credits. Allo stesso modo sono tanti i clienti che si affidano a me per redesign, dopo aver focalizzato meglio le proprie necessità.

La cosa più importante quando si offre un servizio è l’onestà: se fate le due operazioni di cui sopra, al massimo potete parlare di “configurazione di siti web”, se dite “design e sviluppo” state dicendo una bugia. Il design e lo sviluppo lo hanno fatto i designer e gli sviluppatori di WordPress e del tema che state usando: se avete cambiato il colore del link da rosa a blu usando il pannello di controllo del tema, mi spiace, non siete dei designer. Siete degli onesti configuratori di siti, installatori di temi e plugin: andatene fieri, tutti i lavori svolti con onestà sono una bella cosa!
Io faccio ancora un paio di lavori così all’anno e non vedo perché dovrei vergognarmene, spesso mi portano a lavorare con persone che si affacciano alla libera professione e che vogliono iniziare a raccontare di sé sul web senza dover capire come funzionano le cose, senza avere budget a disposizione, ma con una grande voglia di partire 🚀.

Il livello successivo è conoscere come è strutturato WordPress e di cosa ha bisogno per funzionare: non è difficile, prendetevi un weekend e partite da questa pagina del Codex (così familiarizzate anche con questa risorsa). Non dovete leggere tutto: se lavorerete da soli difficilmente farete siti così complessi da richiedere competenze in tutti questi ambiti e se lavorerete in team vi specializzerete presto, ma avere un’idea di cosa sta sotto il cofano aiuta.

A questo livello dovreste saper:

1. Installare WordPress via FTP
2. Editare il file wp-config.php
3. Aprire phpMyAdmin
4. Creare un Child Theme
5. Distinguere post types, pages templates, hooks, filters. Non dovete saperli sviluppare, ma dovete sapere che esistono, che possono essere usati e come.
6. Installare WP in locale, fare un po’ di version control.
7. Copiare e incollare snippets di PHP presi in giro in modo giudizioso 😎

Cosa faccio io

Io mi occupo di front-end, ma so scrivere il PHP necessario a aggiungere una serie di funzionalità base che potrebbero essere utili ai miei clienti. Non mi definisco una sviluppatrice front-end perché faccio tante cose in più e tante in meno. Faccio siti.

A volte faccio delle personalizzazioni avanzate di temi di altri (per avanzate intendo che viene modificata completamente la grafica, in parte la struttura e vengono aggiunti moduli necessari all’attività del cliente. Esempio Il flauto magico, partito da qui, o Chapeau Eventi, partito da qui) a volte creo temi ad hoc.

Uso solo il framework Genesis: la specializzazione mi ha resa veloce, esperta e competitiva.

Ecco le cose che so e i miei consigli per imparare il mio lavoro da freelance.

Le cose tecniche

• Comprensione del funzionamento di internet
• Comprensione della struttura di WordPress e del suo funzionamento
• HTML
• CSS
• PHP (qb)
• Version control (qb)
• Teoria del colore
• Aggiornamento continuo su temi di design, codice, web performance, accessibilità, usabilità (in quantità varia a seconda del momento)

Le cose da freelance

Fare il libero professionista che crea siti non significa limitarsi a conoscere gli aspetti tecnici della questione: se volete fare solo quello, cercate una bella posizione dev junior da dipendente e partite da lì. Non tutti sono adatti a fare i freelance e a dire il vero secondo me in certe aziende, dal punto di vista tecnico, si può crescere molto di più che non con la formazione continua fatta da sé.

La caratteristica più importante da avere, come creatore di siti freelance, è la capacità di capire i problemi dei clienti e pensare a soluzioni. Soprattutto se lavorate da soli questo è più importante che essere degli assi del PHP. Vi occuperete di tutta il progetto, quindi dovete avere ben chiaro quali sono le potenzialità che WordPress offre per aiutare i vostri clienti. Anche scegliere un tema da adattare alle esigenze del vostro cliente prevede che voi le capiate a fondo e che sappiate proporre la soluzione giusta, non un tema “bello, con tutti quegli effetti speciali”.

Dovrete aggiornarvi sui trend di design e di sviluppo: non diventare degli esperti, ma sapere di cosa si parla in questo momento. Non potete cascare dal pero se qualcuno vi parla di AMP. Potete non sapere in pratica come si fa, ma dovete sapere che è una cosa che esiste. Sappiatene abbastanza di web performance e accessibilità per non fare porcate. Le porcate le fanno anche i grandi, noi miglioriamoci da subito.

Pensate a come promuovere il vostro lavoro: con la SEO, con un blog, con i social, con la contribuzione all’open source. Non importa, trovate una strada e fate in modo che la gente sappia che tipo di servizio offrite, siate onesti quando lo descrivete.

Le cose motivesciònal

Tante volte la mail si conclude con “Ce la farò a mantenermi facendo siti da freelance?“. Io lo so che volete essere rassicurati, anzi, piacerebbe anche a me ogni tanto sentirmi dire da un collega senior “Brava, sei sulla strada giusta”. Ma la pacca sulla spalla virtuale e il “Certo, se ce l’ho fatta io, ce la potete fare anche voi” no, non posso. Invece vi dico:

do the fucking work

get fucking intense

become obsessed

(Fatevi gridare addosso dal coach americano o sussurrare… “My advice, fucking do it”.)

• Costruitevi un portfolio facendo siti a amici e parenti, gratis, scambio merce, non importa. Anzi sì, non fatevi pagare per cose che non sapete ancora fare.
• Studiate. Non smettete mai di studiare.
• Siate curiosi. Anche se non vi occupate di back-end, fatevi un’idea a grandi linee di come funziona.
• Fate i conti. Mantenersi è un concetto così personale. C’è chi si mantiene con 500 euro al mese e chi ha bisogno di 5.000!
• Contribuite all’open source per capire cosa sta sotto: struttura, certo, ma anche processi decisionali, internazionalizzazione, community, ecc… WordPress è uno dei progetti open source più grandi al mondo. Mozilla è un altro bel progetto dal quale si può imparare tanto. Linux, certo. Oppure cercatevi un progetto qualsiasi su GitHub che tratti di cosa vi interessa e date il vostro contributo.
• Always be closing. O meglio: always be helping.
• Ship often. Ship lousy stuff, but ship. Ship constantly.
• Prendete un tema, stampatevi i file se necessario e leggete ogni singola riga di codice (functions.php, style.css, single.php… tutti!) finché non diventate tutt’uno con esso.
• Prendete un tema. Rompetelo e riaggiustatelo.
• Quando vi sentirete davvero avventurosi fate lo stesso con un plugin.
• Parlate con chi fa il vostro mestiere, scambiatevi idee e favori, anche clienti perché no. Non alimentate i flame ma date il vostro contributo, piccolo o grande che sia, a rendere il web un posto migliore per tutti. Rispondete nei forum anche se sapete una cosa e una soltanto. Quando ne saprete di più non fate gli arroganti con chi ne sa di meno, i saccenti, gli ironici: c’è qualcuno che ne sa molto, ma molto più di voi e il giorno che vi farà code review vorrete morire e vi pentirete di essere stati scortesi con i newbies. Io sarò lì a guardare con i popcorn perché nulla mi fa godere più di vedere i sapientoni messi al loro posto dalle persone davvero competenti e generose.

In pratica: dove si impara

Nella grande università della vita, che per chi si occupa di web è Google. Ecco le mie risorse preferite:

Imparare

• Treehouse
• Lynda
• Skills and More (italiano, shout out to quel figo di Andrea Barghigiani, che ha anche scritto un libro sull’inbound marketing e WordPress 🔝)

Leggere religiosamente

• A List Apart
• Zeldman
• Smashing Magazine
• I libri di A Book Apart, anche quelli di temi che non vi interessano poi così tanto secondo me…

Frequentare

• Conferenze
• User Group
• Meetup

In bocca al lupo!