Il browser e la struttura delle pagine web

Cos'è un browser

Un browser è un programma che permette di navigare il Web. Chrome, Safari, Firefox, Edge: sono tutti browser. Il loro compito è apparentemente semplice ma, dietro le quinte, coinvolge una serie di operazioni complesse.

Quando visiti un sito, il browser invia una richiesta HTTP al server che ospita quel sito, riceve in risposta una serie di file (documenti, fogli di stile, script, immagini) e li interpreta per mostrarti la pagina sullo schermo. Questo processo di interpretazione e visualizzazione si chiama rendering.

Una pagina web non è un'immagine statica: contiene contenuto (testi, immagini, video), informazioni di stile (colori, font, disposizione degli elementi) e funzionalità interattive (menu a tendina, moduli da compilare, contenuti che si aggiornano senza ricaricare la pagina). Il browser deve gestire tutti e tre questi aspetti contemporaneamente.

I tre linguaggi del web: HTML, CSS, JavaScript

Ogni pagina web è costruita con tre linguaggi fondamentali, ciascuno con un ruolo ben preciso. Pensali come i tre ingredienti di una ricetta: ognuno è indispensabile e insostituibile.

HTML: la struttura e il contenuto

HTML (HyperText Markup Language) definisce il contenuto e la struttura semantica di una pagina. Attraverso HTML si indicano titoli, paragrafi, elenchi, immagini, link ad altre pagine e qualsiasi altro elemento presente nel documento. È il linguaggio che dà significato ai contenuti: dice al browser "questo è un titolo", "questo è un paragrafo", "questo è un link che porta a un'altra pagina".

La parola chiave è ipertesto: i documenti HTML possono contenere collegamenti (link) ad altri documenti, creando quella rete interconnessa di pagine che chiamiamo Web.

CSS: lo stile e il layout

CSS (Cascading Style Sheets) controlla l'aspetto visivo della pagina: colori, font, dimensioni, spaziature, disposizione degli elementi sullo schermo. Senza CSS, una pagina HTML apparirebbe come un documento di testo semplice, privo di qualsiasi formattazione.

Il CSS è anche responsabile del layout responsive, cioè dell'adattamento della pagina a schermi di dimensioni diverse: dallo smartphone al monitor di un desktop.

JavaScript: l'interattività

JavaScript è il linguaggio che aggiunge comportamento dinamico alle pagine web. Mentre HTML e CSS descrivono "come appare" una pagina, JavaScript descrive "cosa succede" quando l'utente interagisce con essa.

Le possibilità offerte da JavaScript sono vastissime:

• Richieste HTTP aggiuntive: scaricare dati da un server senza ricaricare l'intera pagina (ad esempio, caricare nuovi post in un feed social mentre si scorre verso il basso)
• Modifica dinamica della pagina: mostrare o nascondere elementi, aggiornare contenuti, animare transizioni in risposta alle azioni dell'utente
• Gestione dei cookie: salvare informazioni nel browser dell'utente (preferenze, sessioni di accesso, dati di navigazione)
• Autenticazione: gestire login, registrazione e sessioni utente
• Validazione: controllare che i dati inseriti in un modulo siano corretti prima di inviarli al server

I cookie

I cookie sono piccoli file di testo che un sito web può salvare nel browser dell'utente tramite JavaScript (o tramite istruzioni dal server). Servono a memorizzare informazioni tra una visita e l'altra: ad esempio, il fatto che l'utente abbia già effettuato il login, le preferenze di lingua, o gli articoli aggiunti al carrello di un e-commerce.

I cookie possono essere anche utilizzati per tracciare il comportamento dell'utente attraverso diversi siti web (i cosiddetti "cookie di terze parti"), ed è per questo che la normativa europea richiede il consenso esplicito dell'utente prima di installarli.

Normative e regolamentazioni

I contenuti pubblicati sul Web sono soggetti a normative europee e nazionali che regolano diversi aspetti fondamentali:

• Privacy: il GDPR (General Data Protection Regulation) impone regole precise sulla raccolta, l'uso e la conservazione dei dati personali degli utenti
• Accessibilità: le direttive europee richiedono che i siti web siano fruibili anche da persone con disabilità, attraverso standard come le WCAG (Web Content Accessibility Guidelines)
• Veridicità dei contenuti: la pubblicazione di informazioni false o ingannevoli può avere conseguenze legali, in particolare in ambiti come la pubblicità, la salute e i servizi finanziari

Motori di ricerca e SEO

I motori di ricerca (Google, Bing, DuckDuckGo e altri) sono servizi che esplorano continuamente il Web, leggono il contenuto delle pagine e lo indicizzano nei propri archivi. Quando un utente effettua una ricerca, il motore consulta il proprio indice e restituisce le pagine più pertinenti rispetto ai termini cercati.

Questo processo di esplorazione avviene tramite programmi automatizzati chiamati crawler (o spider), che seguono i link da una pagina all'altra, scoprendo e catalogando continuamente nuovi contenuti.

La disciplina che si occupa di ottimizzare le pagine web affinché appaiano tra i primi risultati per determinate ricerche si chiama SEO (Search Engine Optimization). La SEO comprende aspetti tecnici (velocità del sito, struttura HTML corretta, compatibilità mobile) e aspetti di contenuto (qualità dei testi, pertinenza rispetto alle ricerche degli utenti).

Contenuti statici e dinamici

Non tutti i siti web funzionano allo stesso modo. Una distinzione fondamentale riguarda il modo in cui il server genera e restituisce le pagine.

Siti statici

Un sito statico è composto da un insieme fisso di file (HTML, CSS, JavaScript, immagini) già pronti sul server. Quando il browser richiede una pagina, il server la restituisce esattamente così com'è, senza alcuna elaborazione. Ogni utente riceve lo stesso identico contenuto.

I siti statici sono veloci, sicuri e semplici da ospitare. Sono la soluzione ideale per siti vetrina, blog e documentazione, dove il contenuto non cambia in base all'utente.

Siti dinamici

Un sito dinamico genera le pagine al momento della richiesta. Il server esegue del codice che può produrre contenuti diversi in base a vari fattori: chi è l'utente, da quale paese si connette, che ricerca ha effettuato, quali prodotti ha nel carrello. Social network, e-commerce e piattaforme di streaming sono tutti esempi di siti dinamici.

Server intermediari

In molti casi, il dominio di un sito non punta direttamente al server che ospita i file, ma a un server intermediario. Questo server riceve la richiesta del browser, contatta il server reale, ottiene la risposta e la inoltra all'utente. Servizi come Cloudflare funzionano esattamente in questo modo: si interpongono tra l'utente e il server di origine, offrendo vantaggi come protezione da attacchi, caching dei contenuti e distribuzione geografica.

Esempio pratico: visitare vetrinainfo.it

Per rendere concreto tutto ciò di cui abbiamo parlato, vediamo cosa succede in due scenari reali.

Caso 1: accesso diretto

Immagina di digitare vetrinainfo.it nella barra degli indirizzi del browser e premere Invio. Ecco cosa avviene, passo dopo passo:

1. Risoluzione DNS: il browser deve scoprire quale server è associato al dominio vetrinainfo.it. Interroga un server DNS, che gli restituisce un indirizzo IP come 172.67.180.8
2. Richiesta HTTP: il browser invia una richiesta HTTP a quell'indirizzo IP. Il server intermediario di Cloudflare la riceve, contatta internamente i server che ospitano il sito, recupera tutti i file necessari e li restituisce al browser
3. Rendering: il browser riceve i file HTML, CSS, JavaScript, le immagini e le altre risorse. Legge l'HTML per costruire la struttura della pagina, applica il CSS per definire l'aspetto grafico e esegue il JavaScript per abilitare le funzionalità interattive, come il menu a tendina che si apre e chiude su dispositivi mobili

Caso 2: cercare "vetrinainfo" su Google

Cosa succede invece se cerchi "vetrinainfo" su Google?

Google stesso è un sito web, composto da file HTML, CSS e JavaScript. Quando digiti una ricerca e premi Invio, le istruzioni JavaScript della pagina inviano una richiesta HTTP ai server di Google con i termini cercati. I server elaborano la richiesta in modo dinamico: consultano il proprio indice, classificano i risultati per pertinenza e restituiscono una risposta.

Un aspetto interessante è che, nella maggior parte dei casi, il server non restituisce un'intera nuova pagina HTML. Restituisce soltanto i dati dei risultati (in formato testuale). La pagina di Google che hai già caricato nel browser contiene già tutto l'HTML e il CSS necessari per visualizzare i risultati: il JavaScript riceve i dati e modifica la pagina per mostrarli. Questo approccio è molto più efficiente rispetto a ricaricare l'intera pagina a ogni ricerca.