Questo articolo spiega lo sviluppo web studiandone l'inizio e l'evoluzione. Non è una cronaca sull'evoluzione del web, ma la storia dei bisogni che hanno portato all'evoluzione del web, per comprendere meglio questa tecnologia.
Tutto è iniziato con le informazioni. Gli esseri umani hanno sempre avuto bisogno di trovare modi per condividere le informazioni. Come sapete, prima di Internet, le informazioni venivano scambiate tramite lettere, giornali, radio e televisione.
Questi mezzi di comunicazione hanno molti inconvenienti: questo è ciò che ha permesso a Internet di imporsi.

L'articolo sarà pubblicato in due parti :

Lato cliente: architettura e stili della pagina
Lato server: modulistica e database

Iniziamo con ciò che accade dal lato client.

Parte I.

Lato cliente: architettura e stili della pagina

1. Cos'è il web?

Immaginate di poter pubblicare informazioni accessibili a tutti e leggibili da chiunque sia interessato a queste informazioni? Questo è esattamente ciò che il web consente. Le informazioni sono memorizzate su un server web e le persone possono leggere queste informazioni utilizzando i client (browser web). Questa è chiamata "architettura client-server".
Perché HTTP?
Probabilmente hai visto queste quattro lettere nella barra degli URL del tuo browser. Intendono Protocollo di trasferimento ipertestuale. Letteralmente: "protocollo di trasferimento ipertestuale". HTTP è quindi un protocollo di comunicazione client-server utilizzato specificamente per il web.
Inizialmente, le informazioni erano registrate solo in formato testo, ecco perché il nome Protocollo di trasferimento ipertestuale è rimasta anche se, ora, attraverso questo protocollo vengono scambiati diversi formati di informazioni (testo, media, file, ecc.).
HTTPS, Protocollo di trasferimento ipertestuale protetto, è la versione sicura di HTTP.

2. Come vengono archiviate, recuperate e sottoposte a backup le informazioni?

HTML
Il file HTML è il modo più semplice e duraturo per archiviare informazioni sul web. Per capire meglio, prendiamo l'esempio di un'azienda che pubblica i suoi prezzi sotto forma di un elenco di prodotti (con un prezzo e una data di validità), in modo che i suoi fornitori possano scaricarli e/o vederli. Questo elenco è archiviato in un file HTML, posizionato su un server e può essere visualizzato utilizzando un browser web. Il browser richiede questo file al server (richiesta), il server lo fornisce e chiude la connessione.
L'HTML è il linguaggio di markup standard utilizzato per creare pagine web. Concretamente, si tratta di un semplice file di testo, con dei beacon (tag) che aiutano il browser a capire come visualizzare le informazioni.

CSS
CSS (Cascading Style Sheets) è un linguaggio di stile utilizzato per descrivere la presentazione di un documento scritto in un linguaggio di markup. L'HTML ti permette di fare un layout di base, ma è meglio usare CSS per applicare stili più complessi e sofisticati.
Un'applicazione web contiene molte pagine, dinamiche o statiche. Se utilizziamo i tag HTML per definire lo stile delle informazioni, dovremo ripeterlo su tutte le pagine. Immagina di voler cambiare il colore di sfondo: dovremo quindi modificare l'HTML di ciascuna delle pagine del sito.
Invece, possiamo usare CSS per memorizzare le nostre definizioni di stile in un unico posto e fare riferimento ad esse in ogni pagina HTML. Modificando il file CSS, cambieremo il colore di sfondo su tutte le pagine che puntano a questo foglio di stile.
Naturalmente, CSS ti permette di fare molto di più che dare un colore di sfondo: ti permette di cambiare il colore di tutti i tipi di elementi, font, layout... E altro ancora!
Abbiamo inserito gli stili CSS nel nostro esempio precedente. Diciamo che usiamo tabelle su pagine diverse, ma tutte usano gli stessi stili CSS. Possiamo quindi spostare tutte queste definizioni di stile in un file separato.
Gli stili CSS sono sempre chiamati nella parte superiore del documento HTML, tra i tag <capo>.

Di seguito è riportato un esempio di un elenco di prodotti sul sito fnac.com.
I CSS consentono di trasformare completamente l'HTML di base e di realizzare layout complessi: qui la tabella dei prodotti contiene un'immagine centrata; il titolo e altre informazioni del fumetto hanno stili diversi che consentono di gerarchizzarli; i prezzi sono colorati di rosso, ecc.

JavaScript

JavaScript è il terzo pilastro del web insieme a HTML e CSS. Viene utilizzato per rendere interattive le pagine web. Per capire JavaScript (JS), devi iniziare sapendo cos'è il DOM.
Le Modello oggetto documento (DOM) è un'interfaccia di programmazione standardizzata che trasforma il documento HTML in una struttura ad albero. I nodi di ogni documento sono organizzati in questo albero, chiamato "albero DOM" (albero DOM) — il cui nodo più alto è chiamato Oggetto documento.

Estratto dall'albero DOM (Fonte: Wikimedia Commons)

Quando una pagina HTML viene visualizzata nel browser, il browser scarica il codice HTML nella memoria locale e crea un albero DOM per visualizzare la pagina sullo schermo.
Usando JS, possiamo manipolare l'albero DOM in diversi modi:

modificare l'albero DOM aggiungendo, modificando ed eliminando tutti gli elementi HTML e gli attributi della pagina;
cambia tutti gli stili CSS su una pagina;
reagire a tutti gli eventi esistenti sulla pagina;
crea nuovi eventi nella pagina (e reagisci a tutti questi nuovi eventi).

Continuiamo con il nostro esempio di listino prezzi, aggiungendo un'altra colonna — Prezzo speciale — il cui contenuto è nascosto per impostazione predefinita. Lo mostreremo dopo che l'utente fa clic su un pulsante. Tecnicamente, utilizzeremo un evento click (evento clic) attaccato a un elemento di ancoraggio (tag di ancoraggio) e modificare il testo esistente dell'elemento web. In altre parole, manipoleremo il DOM. Per fare ciò, dobbiamo utilizzare il linguaggio di scripting accettato dal browser, che è... sempre JavaScript.
A titolo informativo: il JavaScript viene generalmente posizionato alla fine del file HTML, appena prima della chiusura del tag </stile di vita>.

Sul sito fnac.com, il pulsante "Aggiungi al carrello" viene visualizzato quando si passa con il mouse sopra il prodotto.
Questo è fatto con CSS.
Quando si fa clic sul pulsante, viene visualizzato un pop-in (senza ricaricare la pagina):

E ciò avviene grazie a JavaScript: sul pulsante è stato posizionato un evento “click” e, quando questo evento viene eseguito, viene richiamata una funzione preposta all'apertura del pop-in.
Il meccanismo di aggiunta al carrello è gestito sul lato server.

# Traduzione dell'articolo Comprendi lo sviluppo web in meno di 1 oraDa Shaik Ismail