Anatomia di un sito Web

Pensieri in codice. Idee dal mondo del software a cura di Valerio Galano. Buongiorno a tutti e ben ritrovati per un nuovo episodio di Pensieri in codice, il podcast in cui parliamo di argomenti presi dal mondo del software, di internet e della programmazione. Oggi parliamo di siti web. Ogni giorno ne navighiamo decine o centinaia, ma quanti di noi si sono mai chiesti come è fatto un sito web? Cosa accade dal momento in cui scriviamo un percorso nella barra degli indirizzi fino a quando pochi istanti dopo vediamo comparire la pagina sul nostro sito? In questo episodio proveremo a capire innanzitutto di cosa si compone una pagina web e poi in che modo essa viaggia attraverso internet per raggiungere i nostri schermi. Per capire come funziona un sito web dobbiamo innanzitutto chiarire una cosa e cioè che quando navighiamo il nostro browser svolge molte più operazioni di quelle che normalmente riusciamo a percepire. Esso infatti per mostrare a noi la pagina che abbiamo richiesto ha bisogno di recuperare tutta una serie di file e informazioni utili così da poter costruire la pagina stessa e da poter anche realizzare tutte le varie funzionalità che essa potrebbe essere in grado di svolgere. Ricordiamoci infatti che anche le web application pur utilizzando le stesse identiche tecnologie dei siti web ci permettono in realtà di fare operazioni anche molto più complesse. Pensiamo a qualcosa che utilizziamo tutti come ad esempio il servizio gmail. Di fatto noi accediamo ad un sito web con un browser ma esso ci permette di fare operazioni complesse come ad esempio inviare e ricevere email. Inoltre avrete notato che sto utilizzando le parole sito e pagina in modo più o meno indistinto. Questo perché in generale noi siamo abituati a ragionare in termini di sito web ma in realtà tutto sommato un sito non è altro che un insieme di pagine raggruppate secondo un criterio arbitrario stabilito da un web designer o basato sul fatto che esse appartengono tutte allo stesso dominio o allo stesso indirizzo. Queste distinzioni però non influiscono sulla tecnologia che compone le pagine che a loro volta compongono i siti e dunque non è importante concentrarsi su tale distinzione ai fini del nostro discorso. Semplificando quindi il più possibile possiamo dire che una pagina di un sito web è grossomodo formata da un file principale, una sorta di struttura che lega insieme tutti i vari pezzi e poi da una serie di file accessori che vanno ad aggiungere elementi funzionalità e aspetto grafico. Il file che definisce la struttura della pagina ed il testo in essa contenuto solitamente è un documento descritto utilizzando un particolare formato chiamato HTML. HTML è l’acronimo di Hypertext Markup Language e si tratta di un linguaggio appunto di markup, cioè una tipologia di linguaggio che permette di definire le funzioni delle varie parti del testo all’interno del documento. Utilizzando tale linguaggio è infatti possibile specificare quali parole di un testo ne compongono il titolo, quali il sottotitolo, quali un paragrafo, una tabella e via discorrendo. Tutto questo raccogliendo le varie parti tra due o più speciali parole chiave chiamate tag. Se l’autore del testo vorrà quindi dividere varie parti di esso in paragrafi, gli basterà racchiuderle all’interno di tag p. Se invece vorrà dare enfasi ad alcune parole potrà racchiuderle nei tag strong e così via per tante altre possibilità. Come ben sappiamo però all’interno di una pagina web sono presenti anche molti altri elementi per lo più multimediali come foto, video, tracce audio eccetera. La posizione nella pagina di ciascuno di questi elementi viene anch’essa stabilita con i relativi tag HTML ma il contenuto di ciascuno di essi è invece costituito da uno specifico file che può essere codificato in vari formati come ad esempio jpeg, gif, mp3 e tanti altri. Il documento HTML dunque non contiene questi elementi multimediali ma solo le indicazioni riguardanti la loro posizione nel web. Il tag image posizionato in una pagina HTML per fare un esempio indicherà la presenza di un’immagine e conterrà l’indirizzo remoto presso il quale essa può essere recuperata. Un’altra tipologia di file che viene solitamente associata ad una pagina web è quella dei file CSS. Essi si chiamano fogli di stile e contengono istruzioni destinate al browser per specificare le caratteristiche grafiche dei vari elementi del testo. Con i fogli di stile è ad esempio possibile cambiare tipografia e colore dei testi, riposizionare o modificare la forma e il colore di vari elementi e tante tante altre operazioni anche molto più complesse. In teoria la fusione di un documento HTML, dei file multimediali e dei fogli di stile sarebbero sufficienti a definire l’intero aspetto della pagina web così come siamo abituati a conoscerla. Tuttavia se questa pagina ha anche delle funzionalità avanzate ed è in grado di effettuare operazioni o reagire a eventi che l’utente scatena cliccando o sorvolando specifici elementi, allora quasi certamente nella pagina sono presenti anche una o più librerie javascript. Javascript è un linguaggio di scripting che, detto in due parole, permette di aggiungere alla pagina funzionalità interattive che reagiscono a determinati stimoli. Ormai è molto raro trovare pagine web completamente prive di javascript, anche perché esso risulta molto utile per effettuare operazioni completamente trasparenti all’utente, come ad esempio applicare piccoli adattamenti basati sul browser utilizzato o raccogliere informazioni statistiche delle visite. Se poi parliamo di web application come Gmail, Facebook, Amazon e tutti quei siti che non hanno il semplice obiettivo di mostrare informazioni ma che possiedono meccanismi di interazione a livello avanzato, allora possiamo star certi che la tecnologia javascript sarà presente nelle pagine e anche in quantità notevole. Ora che ci siamo fatti un’idea di massima delle componenti che formano una normale pagina web, possiamo provare a capire in che modo essa arriva a noi pochi istanti dopo che ne abbiamo fatto richiesta. Proviamo quindi ad analizzare come esercizio mentale che cosa accade quando richiamiamo una pagina con il nostro browser. Supponiamo di voler richiamare la pagina di Wikipedia dedicata al podcasting. Ora non ricordo ovviamente l’indirizzo della pagina ma supponiamo che sia qualcosa del tipo www.wikipedia.org slash podcasting. Appena avremo scritto questo indirizzo nel browser e avremo premuto il pulsante invio, il nostro computer contatterà una speciale tipologia di server che prende il nome di DNS, cioè Domain Name Server. Adesso verrà richiesto l’indirizzo IP corrispondente al dominio wikipedia.org. Ora per intenderci e semplificando molto il discorso, l’indirizzo IP è quel numero composto da quattro cifre che vanno da 1 a 255 separate da punti. Qualcosa del tipo 192.168.1.1. Probabilmente questo sarà l’indirizzo IP del vostro router. Il motivo di questo passaggio è che nella realtà delle comunicazioni su internet tutti i nodi, compresi quindi il nostro computer, il nostro router e i server di Wikipedia, si spediscono le informazioni identificandosi non tramite il nome a dominio che serve per scopi mnemonici umani, ma attraverso i reciproci indirizzi IP. Il nostro computer ha quindi bisogno di conoscere l’indirizzo IP del server di Wikipedia così da poterlo utilizzare come destinatario della comunicazione che sta per inviare. Una volta ottenuta questa informazione quindi prepara una richiesta utilizzando un protocollo che prende il nome di HTTP, Hyper Text Transfer Protocol, e la invia affidando ai vari nodi di internet il compito di recapitarla all’indirizzo IP del destinatario. Concettualmente questa operazione è molto simile alla spedizione di corrispondenza tramite il classico servizio postale in cui si scrive una lettera, nel nostro caso è la richiesta di ricevere una determinata pagina web, si compila la sezione apposita con le informazioni del destinatario, quindi l’indirizzo del server di Wikipedia, e si aggiungono le informazioni sul mittente, nel nostro caso l’indirizzo IP del nostro pc, affinché gli possa essere inviata la risposta. Questa lettera di richiesta verrà dunque consegnata al equivalente del centro di smistamento più vicino, cioè il nodo direttamente collegato alla nostra rete che di solito è il nostro router o il modem. A sua volta questo apparecchio inoltrerà la richiesta verso il nodo successivo e così via, finché essa non avrà raggiunto il legittimo destinatario, che nel nostro esempio è il server di Wikipedia. Una volta che il server di Wikipedia avrà ricevuto la nostra richiesta, la interpreterà per leggerne sia il mittente, sia quella che viene chiamata la risorsa, e cioè la pagina che abbiamo richiesto di visualizzare, e fatto ciò si adopererà per produrre la risposta da inviarci. I siti moderni infatti sono praticamente tutti dinamici e ciascuna pagina è composta da una struttura più o meno fissa, che viene riempita con informazioni archiviate in database o in altri tipi di archivi. Il server web dovrà quindi letteralmente costruire una risposta in forma di documento html prima di poter rispondere al mittente, cioè noi, utilizzando lo stesso identico meccanismo che abbiamo illustrato finora. La risposta seguirà dunque un percorso dal server fino al nostro computer, badate bene non necessariamente quello dell’andata a ritroso, e a questo punto sarà al compito del nostro browser interpretare questo documento assegnando la corretta impostazione alle varie parti del testo, aggiungendo quindi grassetti dove servono, separando i paragrafi, evidenziando i titoli, eccetera. Nel frattempo però il browser avrà anche un altro importante compito da svolgere. Dal momento che nel documento html saranno presenti, come accennavamo prima, riferimenti a file esterni come immagini, fogli di stile, css o librerie javascript, nel mentre che elabora il documento il browser dovrà anche continuare a effettuare richieste allo stesso o ad altri server per recuperare tutte queste risorse esterne. Nel frattempo quindi che la pagina viene analizzata e costruita, altri processi in background recupereranno le immagini, i video, i css e i javascript, utilizzando a ripetizione un meccanismo di richiesta perfettamente identico a quello che abbiamo descritto in precedenza per ottenere la pagina html iniziale. In pratica ogni volta che noi apriamo una pagina web abbiamo l’impressione di ricevere un unico documento fatto e finito, ma in realtà il nostro browser effettua per noi centinaia di richieste per recuperare tutti i file accessori. Fatto questo, li analizza uno per uno, li colloca nella giusta posizione, calcola e applica ad ogni elemento una complicata combinazione di regole stilistiche e infine associa a tutta una serie di eventi che potrebbero essere scatenati dall’utente altrettante operazioni automatizzate pronti a scattare. Il tutto in poche frazioni di secondo. L’avreste mai detto che ad ogni spostamento da una pagina all’altra, da un sito all’altro, si verificassero tutte queste operazioni? Nel ragionare su questo processo mi raccomando sempre di ricordare che per poter esporre questi concetti sono sempre costretto a fare tutta una serie di semplificazioni e omettere le parti più complicate del discorso. In questo caso ad esempio abbiamo tralasciato il metodo che utilizzano i vari nodi per capire quale sia il percorso più breve verso cui inoltrare un messaggio, oppure quale operazioni esegue il server per costruire la pagina da inviare come risposta. A questi argomenti però sto pensando di dedicare degli episodi futuri, quindi se siete interessati non esitate a farmelo sapere. Io per ora vi ringrazio di essere arrivati fin qui, l’episodio è stato molto più lungo di quanto mi aspettassi, quindi molto rapidamente vi invito a commentare, condividere, unirvi al gruppo Telegram e ci sentiamo al prossimo episodio!