Come funziona il web

Cos’è il Web

Il web fornisce una visione semplificata di cosa succede quando visualizzi una pagina web in un browser web sul tuo computer o telefono.

Questa teoria non è essenziale per scrivere codice web a breve termine, ma prima o poi inizierai davvero a trarre vantaggio dalla comprensione di cosa sta succedendo in background.

 

Client e server

I computer connessi a Internet sono chiamati client e server. Un diagramma semplificato di come interagiscono potrebbe apparire così:

  • I client sono i tipici dispositivi connessi a Internet dell’utente web (ad esempio, il tuo computer connesso al tuo Wi-Fi o il tuo telefono connesso alla tua rete mobile) e il software di accesso al web disponibile su quei dispositivi (solitamente un browser web come Firefox o Chrome).
  • I server sono computer che archiviano pagine web, siti o app. Quando un dispositivo client desidera accedere a una pagina web, una copia della pagina web viene scaricata dal server sul computer client per essere visualizzata nel browser web dell’utente.

Le altre parti della cassetta degli attrezzi

Il client e il server che abbiamo descritto sopra non raccontano tutta la storia. Ci sono molte altre parti coinvolte e le descriveremo di seguito.

Per ora, immaginiamo che il web sia una strada. Da una parte della strada c’è il client, che è come la tua casa. Dall’altra parte della strada c’è il server, che è un negozio da cui vuoi acquistare qualcosa.

Oltre al client e al server, dobbiamo dare il benvenuto anche a:

  • La tua connessione Internet: ti consente di inviare e ricevere dati sul web. È fondamentalmente come la strada tra la tua casa e il negozio.
  • TCP/IP: Transmission Control Protocol e Internet Protocol sono protocolli di comunicazione che definiscono come i dati devono viaggiare su Internet. Sono come i meccanismi di trasporto che ti consentono di effettuare un ordine, andare al negozio e acquistare i tuoi beni. Nel nostro esempio, sono come un’auto o una bicicletta (o qualsiasi altro mezzo con cui potresti spostarti).
  • DNS: Domain Name System è come una rubrica per i siti Web. Quando digiti un indirizzo web nel tuo browser, il browser esamina il DNS per trovare l’indirizzo IP del sito web prima di poterlo recuperare. Il browser deve scoprire su quale server risiede il sito web, in modo da poter inviare messaggi HTTP al posto giusto (vedi sotto). È come cercare l’indirizzo del negozio per potervi accedere.
  • HTTP: Hypertext Transfer Protocol è un protocollo applicativo che definisce un linguaggio per i client e i server per comunicare tra loro. È come il linguaggio che usi per ordinare i tuoi beni.
  • File dei componenti: un sito web è composto da molti file diversi, che sono come le diverse parti dei beni che acquisti dal negozio. Questi file sono di due tipi principali:
    • File di codice: i siti web sono creati principalmente da HTML, CSS e JavaScript, anche se incontrerai altre tecnologie un po’ più avanti.
    • Risorse: questo è un nome collettivo per tutte le altre cose che compongono un sito web, come immagini, musica, video, documenti Word e PDF.

Quindi cosa succede esattamente?

Quando digiti un indirizzo web nel tuo browser (per la nostra analogia è come camminare verso il negozio):

  • Il browser va al server DNS e trova il vero indirizzo del server su cui risiede il sito web (trovi l’indirizzo del negozio).
  • Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (vai al negozio e ordini la merce). Questo messaggio e tutti gli altri dati inviati tra il client e il server vengono inviati tramite la tua connessione Internet tramite TCP/IP.
  • Se il server approva la richiesta del client, invia al client un messaggio “200 OK”, che significa “Certo che puoi guardare quel sito web! Eccolo”, e quindi inizia a inviare i file del sito web al browser come una serie di piccoli blocchi chiamati pacchetti di dati (il negozio ti dà la merce e tu la riporti a casa).
  • Il browser assembla i piccoli blocchi in una pagina web completa e te la mostra (la merce arriva alla tua porta:  nuova e scintillante, che figata!!!).

Ordine in cui vengono analizzati i file dei componenti

Quando i browser inviano richieste ai server per i file HTML, questi file HTML spesso contengono elementi <link> che fanno riferimento a fogli di stile CSS esterni ed elementi <script> che fanno riferimento a script JavaScript esterni. È importante conoscere l’ordine in cui tali file vengono analizzati dal browser mentre carica la pagina:

  1. Il browser analizza prima il file HTML, e questo porta il browser a riconoscere qualsiasi riferimento all’elemento <link> a fogli di stile CSS esterni e qualsiasi riferimento all’elemento <script> a script.
  2. Mentre il browser analizza l’HTML, invia richieste al server per qualsiasi file CSS trovato dagli elementi <link> e qualsiasi file JavaScript trovato dagli elementi <script> e da questi, quindi analizza il CSS e il JavaScript.
  3. Il browser genera un albero DOM in memoria dall’HTML analizzato, genera una struttura CSSOM in memoria dal CSS analizzato e compila ed esegue il JavaScript analizzato.
  4. Mentre il browser crea l’albero DOM e applica gli stili dall’albero CSSOM ed esegue il JavaScript, una rappresentazione visiva della pagina viene dipinta sullo schermo e l’utente vede il contenuto della pagina e può iniziare a interagire con esso.

DNS spiegato

I veri indirizzi web non sono le belle stringhe memorabili che digiti nella barra degli indirizzi per trovare i tuoi siti web preferiti. Sono numeri speciali che hanno questo aspetto: 192.0.2.172.

Questo è chiamato indirizzo IP e rappresenta una posizione univoca sul web. Tuttavia, non è molto facile da ricordare, vero? Ecco perché è stato inventato il Domain Name System. Questo sistema utilizza server speciali che abbinano un indirizzo web digitato nel browser (come “sitowp.it”) all’indirizzo (IP) reale del sito web.

I siti web possono essere raggiunti direttamente tramite i loro indirizzi IP. Puoi utilizzare uno strumento di ricerca DNS per trovare l’indirizzo IP di un sito web.

Pacchetti spiegati

In precedenza abbiamo utilizzato il termine “pacchetti” per descrivere il formato in cui i dati vengono trasferiti tra il client e il server. Cosa intendiamo qui? Fondamentalmente, quando i dati vengono inviati attraverso il web, vengono inviati in migliaia di piccoli blocchi. Ci sono molteplici motivi per cui i dati vengono inviati in piccoli pacchetti. A volte vengono persi o danneggiati ed è più facile sostituire piccoli blocchi quando ciò accade. Inoltre, i pacchetti possono essere instradati lungo percorsi diversi, rendendo lo scambio più veloce e consentendo a molti utenti diversi di scaricare lo stesso sito web contemporaneamente. Se ogni sito web fosse inviato come un unico grande blocco, solo un utente potrebbe scaricarlo alla volta, il che ovviamente renderebbe il web molto inefficiente e poco divertente da usare.