Come funziona il Web, parte II: cosa succede quando visiti un URL

Pubblicato: 2016-12-06

Nel post precedente abbiamo parlato di come è nato il Web. In questo post, faremo un giro e vedremo cosa succede quando visiti un URL con il tuo browser. Daremo anche un'occhiata alle tecnologie contemporanee utilizzate nel Web e al modo in cui si adattano tutte insieme.

Le tecnologie coinvolte, dal momento in cui si preme il pulsante Invio a quando si visualizza una pagina web, sono numerose. Nel nostro post precedente abbiamo parlato di Hypertext e HTTP, ma questo era solo l'inizio:

I server Web (come apache2 e nginx) implementano il protocollo HTTP insieme ad alcune altre funzioni, che consentono ai browser Web di connettersi, richiedere e ricevere dati Web. HTTP è il canale attraverso il quale i messaggi, le pagine web, le immagini e le risorse “viaggiano” tra un server web e un browser.

Il Web moderno è piuttosto impegnativo e i server Web moderni hanno raccolto questa sfida. Scalabilità e sicurezza sono le due principali preoccupazioni del mondo di oggi. I moderni server Web sono altamente scalabili (in grado di gestire più di 10.000 connessioni simultanee), offrono più opzioni per il bilanciamento del carico, supportano SSL/TLS e HTTP/2. Il miglioramento chiave di HTTP/2 rispetto a HTTP/1.1 è, senza dubbio, la superiore gestione dello streaming dei pacchetti. Lo streaming video è oggi pervasivo e HTTP/1.1 non è in grado di gestire adeguatamente le esigenze di tutti i diversi dispositivi, capacità di rete e numero di utenti Web online di oggi.

HTML (HyperText Markup Language) è un linguaggio che utilizza i tag per rappresentare documenti ipertestuali strutturati che possono essere compresi dal tuo browser web.

La sua versione più recente, HTML5, ha introdotto molti miglioramenti e ripuliture del linguaggio, ma le aggiunte più impressionanti sono state il supporto audio e video nativo, la grafica 2D e 3D e l'archiviazione del database locale. Questi miglioramenti hanno effettivamente obsoleto le tecnologie multimediali come Flash e Silverlight.

CSS (Cascading Style-sheets) è una tecnologia utilizzata dai web designer per semplificare le modifiche visive in molte pagine web.

Il codice CSS può risiedere all'interno di HTML o, come di solito accade, sono file separati, a cui fa riferimento la pagina HTML. L'utilità dei CSS è che separa il contenuto dalla presentazione, offrendo ai web designer un potente strumento per gestire centralmente tutti i dettagli estetici di un sito web.

Il back-end (ad esempio PHP o Java) è codice mescolato con HTML, che viene eseguito dal server web quando il calcolo è terminato.

Al giorno d'oggi tutti i siti web sono dinamici; il che significa che non ci sono più semplici file .html serviti al browser. Tutti i linguaggi moderni, con l'aggiunta di librerie software chiamate framework web, possono essere utilizzati come soluzione back-end per un sito web. La recente versione di PHP 7, i brillanti miglioramenti delle prestazioni e le funzionalità introdotte, così come l'HHVM di Facebook, hanno entrambi portato l'intero processo a un livello superiore.

Il front-end (Javascript) è un codice anche mescolato con HTML ma viene eseguito localmente sul tuo computer, dal tuo browser web.

Forse lo sviluppo più sorprendente e impressionante nel web moderno è stato Javascript. È passato dall'essere il fratello minore semplice di Java, utilizzato per creare menu e visualizzare i pop-up, a un potente linguaggio di programmazione utilizzato sia nel client che nel server. Al giorno d'oggi, può fare qualsiasi cosa su un browser web e con grande velocità. Il motore Javascript V8 di Google è stato un importante punto di svolta tecnologico.

Cosa succede quando visiti un URL

Il Web è una cornucopia di diverse tecnologie ma ci sono due concetti la cui funzione di base è rimasta inalterata ancora oggi. Il browser web e il server web. Questi operano sul "vecchio" modello client/server che è il seguente: un client si connette a un server utilizzando un indirizzo (un IP o un nome) e richiede qualcosa. Il server, quindi, risponde al client e così via. I client si connettono ai server, ma non viceversa. Sebbene la tecnologia Web odierna abbia alterato in modo significativo questo modello, lo useremo per spiegare il processo in modo semplificato.

Quindi, accendi il tuo browser preferito e visiti una pagina web. Dal momento in cui premi il tasto Invio fino a quando finalmente vedi la pagina visualizzata, accadono le seguenti cose:

Il tuo browser chiama prima un modulo software chiamato DNS resolver che è configurato sul tuo computer e chiede l'indirizzo IP che corrisponde all'URL che hai inserito.
DNS (Domain Name System) è un servizio Internet di base che mappa i nomi dei computer (come www.pressidium.com ) in indirizzi IP. Gli indirizzi IP sono ciò che i computer connessi a Internet comprendono e a cui possono connettersi. Esploreremo cos'è e come funziona nel nostro prossimo post.
Il tuo browser, quindi, avvia una connessione a quell'indirizzo IP, utilizzando la porta 80 o 443.
L'indirizzo IP indica il server, mentre il numero di porta si riferisce al servizio a cui ci si vuole connettere. Tutti i server Web funzionano per impostazione predefinita sulla porta 80, mentre la porta 443 viene utilizzata per connessioni Web sicure.
Il server web elabora l'URL immesso e fornisce il controllo al back-end. Il codice back-end genera la pagina HTML e la consegna al server web. Il web server, quindi, invia infine la pagina HTML al browser, tramite il canale HTTP.
Ci sono molte cose che accadono nei millisecondi necessari al server Web per inviare indietro l'HTML. Il codice back-end in un sito Web di solito si connette a un database, esegue query, recupera dati, contatta altri servizi back-end e infine assembla tutto in un documento HTML. Non è proprio un file discreto quello che stai richiedendo ma una risorsa dinamica , che viene generato al volo utilizzando un'ampia varietà di tecnologie e componenti differenti.
Il tuo browser web riceve la pagina HTML, chiude la connessione al server web e poi la visualizza sullo schermo. Esegue il codice Javascript presente nel web design HTML.Modern segue un approccio chiamato Responsive Design. Questo approccio utilizza HTML, CSS e Javascript per adattare dinamicamente il layout di una pagina Web, a seconda del dispositivo utilizzato per la navigazione. Questo è diventato molto importante in questi giorni con la crescita esplosiva dei dispositivi mobili e tablet.

Qual è il prossimo?

Finora, abbiamo brevemente toccato una varietà di moderne tecnologie web e cosa succede quando visiti un URL. Indubbiamente, le tecnologie web sono complesse e numerose e non possono essere trattate in modo soddisfacente in un solo articolo. Con questa serie di post, miriamo principalmente a darti una visione "a volo d'aquila" di Internet e del Web.
Nella prossima puntata di questa interessante serie, visiteremo un'altra importante infrastruttura Internet, il Domain Name System. Senza di essa nulla funzionerebbe davvero! (almeno per noi umani).