Ti sei mai chiesta/o che cosa succede quando scriviamo l'indirizzo di un sito nella barra di ricerca di un browser? Che cosa stiamo dicendo al computer di fare quando clicchiamo il tasto Invio ?
In quest'articolo ti spiegherò tutto quello che succede dal momento in cui clicchi Invio al momento in cui visualizzi il contenuto di una pagina web sul monitor.
Scomporremo i tecnicismi e le complessità con esempi pratici e l'utilizzo di parole semplici.
Pronta/o? Iniziamo! 🚀
Corso completo Web Developer - Parte 1 - 1.4
Introduzione
La mia promessa è di scrivere articoli in cui ti rendo semplice e pratico un tecnicismo o un concetto che viene solitamente spiegato in modo estremamente astratto.
La programmazione a differenza di come si pensa si basa molto sulla comunicazione. Tanti progetti falliscono proprio a causa di scarsa comunicazione e fraintendimenti.
È importante quindi iniziare a studiare concetti tecnici con esempi pratici ma allo stesso tempo è ugualmente importante saper utilizzare il linguaggio corretto ed i termini appropriati una volta che siamo padroni del nuovo concetto.
Con questi concetti ti sarà più chiaro quando inizieremo a mettere le mani in pasta con pagine HTML.
A tal proposito colgo l'occasione per ricordarti che nella prossima lezione inizieremo a a scrivere codice HTML! 🤓
I due attori principali della navigazione sul web: Client e Server
Quando navighiamo sul web e visitiamo i vari siti web ci sono sempre due attori principali che vengono coinvolti: il Client ed il Server.
Il Client è solitamente il dispositivo che utilizziamo come per esempio il nostro computer o smartphone che si connette ad internet ed utilizza un software che solitamente è un browser come Chrome, Firefox, Brave ecc.
Il Server è solitamente un computer dove i files per comporre il sito web in questione sono stati salvati.
Nel momento in cui noi utenti apriamo il nostro Client (browser sullo smartphone per esempio) e gli chiediamo di vistare la pagina web di Google, il Client andrà a fare una richiesta di download al Server di tutti i files che compongono la pagina web richiesta e questi verranno temporaneamente salvati sul nostro Client.
Quando il nostro Client avrà ricevuto i files noi vedremo la pagina web apparire sul monitor.
Il ciclo di vita di una richiesta HTTP
Ti ho appena parlato di Client e Server che sono i due attori della navigazione web.
Quando si parla di navigazione web ci riferiamo ad una conversazione costante in cui avvengono tantissime domande e tantissime risposte tra il client ed il server.
Il mezzo con cui gli esseri umani solitamente comunicano sono le parole mentre quello che viene utilizzato sul web si chiama protocollo HTTP.
Per questo si può dire che il Web è basato su una comunicazione di continue richieste e risposte HTTP.
Hai presente quando chiami un contatto dalla tua rubrica e quella persona risponde dicendoti "Pronto?" ?
Ecco, succede la stessa cosa quando nella barra degli indirizzi inseriamo un URL e ci appare la pagina del sito che abbiamo richiesto.
Quando la persona dall'altro lato del telefono ci risponde, questa viene definita una chiamata HTTP che è avvenuta con successo.
A volte però la persona dall'altro lato del telefono può avere problemi di linea e magari non riceve la nostra chiamata quindi noi non riusciamo a metterci in contatto con loro. Questa invece è definita una chiamata HTTP fallita, che non si è conclusa con successo.
Chiamata HTTP avvenuta con successo dove Marco riceve la chiamata e risponde con "Pronto?"
Chiamata HTTP fallita dove il cellulare di Marco è irraggiungibile
Come abbiamo visto precedentemente, il cellulare che sta chiamando in questo caso è il Client mentre quello che riceve la chiamata e deve rispondere è il Server.
Quindi, HTTP è come se fosse la lingua parlata dai browsers che viene utilizzata per comunicare con i servers ed ogni browser conosce questa lingua.
HTTP è precisamente un protocollo che fu creato da Tim Berners-Lee ed è l'acronimo di Hyper Text Transfer Protocol e fu utilizzato per la prima volta nel 1991.
Richiesta HTTP
Quando vogliamo visualizzare un sito inizializzeremo una richiesta web ma da che cosa è composta questa richiesta?
http- il protocollo di comunicazionegoogle.it- il dominio (come se fosse l'indirizzo di una casa)/preferences/- la risorsa (come se fosse la stanza all'interno della casa nella quale vogliamo andare)
Il protocollo è il modo in cui comunicheremo la nostra richiesta. Un altro protocollo potrebbe per esempio essere FTP.
Il dominio è un nome, una serie di caratteri che si riferisce al luogo dove un sito web è localizzato.
La risorsa è la parte all'interno del dominio che vogliamo andare a visualizzare. Come se stessimo dicendo per esempio di voler vedere la cucina all'interno della casa dove la casa è il dominio e la cucina è la risorsa.
I verbi HTTP
Come esistono i vari verbi in una lingua, per esempio il verbo essere ed il verbo avere, esistono anche vari verbi nel protocollo HTTP.
Ci sono vari tipi di richieste HTTP che potremmo voler fare. Vediamo i principali:
- GET - questo verbo viene utilizzato quando vogliamo semplicemente reperire una risorsa e visualizzarla. Per esempio vogliamo vedere l'homepage di Facebook;
- POST - questo verbo viene utilizzato quando stiamo cercando di creare una nuova risorsa nel web. Per esempio, vogliamo creare un nuovo post su FB quindi possiamo vedere quest'azione come noi che stiamo aggiungendo una cosa nuova a FB;
- PUT - questo verbo viene utilizzato quando stiamo aggiornando una risorsa già esistente nel web. Ricordi il post su FB che hai creato un attimo fa con il verbo POST ? Se avessi sbagliato ad inserire il titolo e lo vuoi modificare, il tuo Client ovvero il tuo Browser andrà a fare una richiesta PUT al server di Facebook;
- DELETE - mettiamo il caso che anche dopo aver cambiato il titolo del post questo proprio non ci piace e decidiamo di cancellarlo. Qui andremo a fare una richiesta HTTP con verbo DELETE;
Risposta HTTP
Non appena il nostro Client avrà inviato questa richiesta HTTP come farà a sapere se il Server l'avrà ricevuta e come farà a visualizzare la pagina web sul Browser?
Il Server è tenuto a rispondere e se questo non lo fa la richiesta HTTP verrà considerata fallita.
Questa risposta viene definita Risposta HTTP e contiene una serie di informazioni utili al Browser affinchè noi come utenti finali possiamo visualizzare la pagina correttamente.
Come abbiamo detto poco fa ci possono essere degli errori durante questa comunicazione come per esempio un form di registrazione compilato male.
Per questo motivi la Risposta HTTP fra le altre informazioni contiene un codice detto Status Code che si riferisce appunto allo stato della richiesta.
Vediamo le cinque macro categorie degli HTTP Status Codes
Le differenze tra i siti statici e dinamici
Quando parliamo di un sito web statico e quando di uno dinamico ?
I siti web possono essere costruiti con tante diverse tecnologie. In base allo scopo di un sito web vengono scelte determinate tecnologie.
Un sito web statico è un sito composto da contenuti che non cambiano come per esempio un sito di una gelateria dove descrive i propri gelati, la storia della gelateria e magari la mappa di dov'è locata.
Un sito web dinamico è un sito il cui contenuto cambia costantemente. Per esempio se aprissimo Facebook due volte di seguito molto probabilmente non troveremo gli stessi contenuti sulla homepage.
Questi siti spesso sono collegati a database, magari permettono agli utenti di registrarsi, eccetera.
Il DNS: Doman Name System
Che cos'è il DNS e perchè è importante saperne il significato?
Man mano che andremo avanti con il corso ci saranno casi in cui sapere il significato del DNS ci aiuterà a capire perchè nella barra degli indirizzi nel browser vediamo una serie di numeri anzichè un chiaro e semplice URL.
Spieghiamo in parole semplici che cos'è questo DNS.
Scommetto che quando devi fare una chiamata la maggior parte delle volte entri nella rubrica del tuo cellulare, cerchi il nome della persona che vuoi chiamare e procedi con la chiamata.
Se volessimo chiamare Marco avremo il suo numero di cellulare salvato in Rubrica e cercheremo il nome Marco. Il cellulare provvederà ad associare il nome Marco al suo numero di cellulare.
Ecco, con i siti web funziona allo stesso modo.
Per visualizzare il sito web di Google il nostro Client farà una richiesta al Server.
Noi inizializziamo questa richiesta scrivendo nella barra degli indirizzi del browser www.google.it.
Il Server dove il sito web di Google risiede in realtà non è raggiungibile attraverso la serie di caratteri www.google.it ma attraverso una serie di numeri che vengono definiti con il nome di IP Address o Indirizzo IP, proprio come il numero di cellulare di Marco con cui possiamo metterci in contatto con lui.
L'Indirizzo IP rappresenta un posto unico nel web proprio come il numero di cellulare di Marco che è unico e che quando lo telefoniamo siamo sicuri che la telefonata verrà ricevuta da un unico cellulare.
Pensa se non fosse esistita la Rubrica telefonica e avremmo dovuto ricordarci il numero di telefono di tutte le persone che conosciamo.
Praticamente impossibile, vero?
Per questo motivo fu creato il Domain Name Server ovvero questo nome (per esempio "google.it") che viene associato ad un Indirizzo IP (per esempio "142.251.40.163").
Prova ad inserire nella barra degli indirizzi l'Indirizzo IP di uno dei servers di Google. Vedrai che verrai reindirizzato al sito web di Google.
142.251.40.163
Questo sistema viene definito Domain Name System.
Conclusione
Complimenti se sei arrivata/o fin qui! 💪
Come sempre, non aspettarti di aver compreso tutta la lezione al 100%.
L'apprendimento si suddivide in più fasi e se adesso hai fatto una prima lettura sei nella fase iniziale dell'apprendimento. Rileggerli una seconda volta ti aiuterebbe sicuramente.
In ogni caso, andando avanti e facendo pratica ritroverai questi concetti sempre più spesso e andarti man mano a rileggere che cosa sono mentre ti ritrovi difronte al problema ti aiuterà di gran lunga nella comprensione e memorizzazione degli stessi.
Con questo articolo abbiamo anche concluso la fase di preparazione del Corso Completo Web Developer.
Con il prossimo articolo entreremo nella seconda parte del corso ovvero dove inizieremo a scrivere codice!
Preparati ad iniziare a studiare il Frontend con la sezione HTML.
Clicca qui per trovare tutto il programma del corso.
Non dimenticarti ti iscriverti alla Newsletter della Domenica 📧 se vuoi rimanere aggiornato ogni qual volta escono nuovi articoli.
Per oggi è tutto, ti faccio i miei complimenti per la lezione e ti mando un abbraccio.
Io vado a cena con gli amici! 🍽️