Prima ancora di poter mettere mano al codice è di fondamentale importanza capire come funziona Internet nella sua completezza ed avere un chiaro punto di vista sulle tecnologie coinvolte nello sviluppo di questi elementi.
Per molti di noi Internet non è altro che qualcosa che funziona, qualcosa che magicamente è in grado di mostrare sul nostro schermo i contenuti che stiamo cercando, siano questi gli aggiornamenti di stato dei nostri amici su Facebook oppure una lezione come quella che stai leggendo.
Però se desideri creare siti web, posso presupporre che il tuo obiettivo sia diventare il prossimo stregone in grado di padroneggiare questi incantesimi, ho il dovere di farti una chiara introduzione sul suo funzionamento.
Anche se conosci già gli argomenti che descriverò, ti consiglio comunque di continuare la lettura: in fin dei conti, potresti anche divertirti!
Internet è un mondo basato sulle connessioni
Per quanto magico possa sembrare, Internet non è altro che un ecosistema che si basa sulle connessioni. Connessioni tra più computer che, sfruttando il protocollo HTTP, sono in grado di scambiarsi informazioni tra loro.
Una connessione non è altro che la capacità di mettere in comunicazione due computer distanti tra loro. Nel nostro contesto ci sarà sempre un computer che chiede qualcosa (che chiameremo client) ed uno in grado di soddisfare la richiesta (che chiameremo server).
Facciamo un esempio concreto: quando apri il tuo browser e digiti https://skillsandmore.org, il tuo computer (client) non farà altro che inviare una richiesta per ottenere i dati che compongono il sito indicato e resterà in attesa finché questi non verranno inviati dal computer che li ospita (server).
Una volta ottenuti i dati, il tuo browser sarà in grado di montarli per costruire la pagina web che compone il sito.
Il browser è in grado di costruire una pagina web perché i dati che riceve sono codificati tramite linguaggi che può interpretare. Molti pensano che il web sia “semplicemente” un insieme di testi ed immagini che si compongono come in un puzzle, ma il tuo percorso ti sta aprendo le porte alla verità: il web è basato su linguaggi di programmazione:
- HTML – il primo linguaggio fondamentale, in grado di dare struttura e significato semantico ad una pagina web;
- CSS – se il precedente linguaggio fornisce struttura, questo permette di personalizzare l’aspetto delle pagine web;
- Linguaggi di scripting lato client (ad esempio, JavaScript) – sono linguaggi che permettono di aggiungere dinamicità alle pagine web e che aiutano l’interazione con i contenuti mostrati. Questi linguaggi vengono eseguito direttamente nel client (cioè nel browser);
- Linguaggi di scripting lato server (ad esempio, PHP) – raccolgono e salvano le informazioni inviate dal visitatore e costruiscono sul server le pagine che verranno poi inviate al client.
Con questa piccola lista ti ho introdotto ai linguaggi principali che permettono di avere il web come lo conosciamo oggi. Durante il corso andremo a conoscere da vicino HTML e CSS, ma prima ci sono ancora alcuni piccoli concetti che dobbiamo approfondire.
Un client per molti server
Con questo titolo sto cercando di fare un po’ di chiarezza perché, nel mio tentativo di essere il più discorsivo possibile, ho sorvolato su alcuni piccoli concetti fondamentali.
Precedentemente ho scritto che un client è una macchina in grado di inviare una richiesta ad un server e benché tutto questo sia vero, ho sorvolato sul fatto che esistono diversi tipi di server in grado di offrire servizi diversi.
Nel mondo delle pagine web e della creazione di siti, il termine “server” sottintende il concetto di server web, un computer in grado di accettare delle richieste di pagine web e di offrire, in risposta, i dati che le compongono.
Ma questo non è l’unico tipo di server che incontrerai nella tua vita da sviluppatore, ne riporto alcuni altri qui di seguito:
- Mail Server – un computer in grado di gestire l’invio e la ricezione di email;
- Database Server – fornisce accesso e gestione delle informazioni contenute all’interno di un database;
- FTP Server – sfruttando il protocollo FTP, fornisce accesso via web ai dati contenuti al suo interno.
Questi sono soltanto alcuni dei tipi di server che potrai incontrare, se ti interessa un approfondimento puoi consultare la pagina Wikipedia dedicata: ho limitato la mia selezione a questi perché sono i tipi di server che incontrerai più spesso.
Il concetto fondamentale da comprendere è che un server è una macchina che resta in attesa di richieste e che è in grado di gestirne diverse simultaneamente.
Dai server alla programmazione
Adesso che hai chiara la differenza tra un client e un server, cerchiamo di capire dove si inseriscono i linguaggi di programmazione che ho presentato precedentemente.
Come ti ho detto, tutta l’infrastruttura dei siti web si basa sul protocollo HTTP (un protocollo non è altro che un insieme di regole): per poterlo utilizzare, basta anteporre un http:// all’indirizzo che vogliamo consultare.
Per consultare questi siti web abbiamo bisogno di applicazioni specifiche. Su Windows troviamo (di default) Edge, sul Mac invece è installato Safari. Ma grazie al mondo open source, abbiamo molte altre alternative, fra cui i famosissimi Firefox e Chrome.
Quello che fa un browser è semplicemente offrirci gli strumenti per utilizzare il protocollo HTTP e per consultare graficamente le varie pagine web, che vengono costruite principalmente grazie ai linguaggi HTML e CSS.
Come scoprirai più nel dettaglio nelle prossime lezioni, questi due linguaggi sono le colonne portanti del web: apprendendo il loro funzionamento, diventerai anche tu in grado di sviluppare siti web.
Esistono molti strumenti che promettono di farti creare un sito utilizzando degli strumenti punta-e-clicca, ma scoprirai che i risultati che potrai ottenere sono limitati e molto spesso simili tra loro.
Per questo motivo ho deciso di creare questo percorso che ti introdurrà allo sviluppo di siti e applicazioni web con tecnologie che potrai veramente padroneggiare, senza doverti affidare a servizi esterni che oggi ci sono, ma… domani forse no.
Cosa serve per scrivere codice?
Abbiamo detto che per creare una pagina web è necessario saper scrivere del codice HTML e CSS (almeno per iniziare), ma puoi scrivere questo codice con un qualsiasi editor di testo, come ad esempio Microsoft Word?
Purtroppo (e per fortuna!) no.
Scoprirai a breve che questa non è una mancanza: anzi, è un vantaggio.
Utilizzare Word o qualsiasi altro editor di testo non ti permetterà di creare correttamente delle pagine web, perché questi editor – a loro volta – utilizzano un linguaggio per la formattazione (grassetto e corsivo, ad esempio) e la strutturazione dei testi .
Parlo di vantaggio perché, andando ad utilizzare uno degli editor che ti propongo di seguito, sarai in grado di avere un potente alleato in grado di suggerirti le soluzioni migliori e di aiutarti a capire dove si trovano gli errori che hai commesso.
Tagliamo quindi la testa al toro e conosciamo alcuni tra gli editor presenti sul mercato. Qua sotto non troverai una lista completa ma solamente quelli che personalmente che ho provato con mano (e che per questo ti suggerisco):
- Sublime Text – il miglior editor in circolazione, almeno secondo i miei gusti. La sua interfaccia pulita sarà forse difficile da digerire inizialmente (sopratutto se provieni da sistemi come Windows o Mac che ci abituano alla presenza di intuitive interfacce grafiche), ma ti assicuro che man mano che approfondirai il suo utilizzo, apprezzerai sempre più la sua velocità ed estendibilità;
- Atom – recentemento ho scoperto questo incredibile editor di testo sviluppato da un’attivissima community di GitHub: il progetto è completamente open-source e siamo invitati a contribuire al suo sviluppo. Benché ancora in beta, ti consiglio di provarlo, dato anche il gran numero di estensioni che potrai installare e le scorciatoie da tastiera simili a quelle di Sublime Text;
- VS Code – questo editor di casa Microsoft ha velocemente conquistato le simpatie di migliaia di sviluppatori perché si presenta al suo interno un grandissimo numero di funzionalità e una velocità senza precedenti. Attualmente questo è l’editor che uso per qualsiasi mio progetto.
La lista potrebbe andare avanti ancora per diversi punti ma il mio non è un tentativo di proclamare l’applicazione migliore: per seguire i contenuti di questo corso andrà benissimo un qualsiasi editor tra quelli suggeriti.