HTML, CSS e JavaScript: i tre linguaggi del web

[Virtual Presenter] Relatore 1: Buongiorno a tutti. Oggi vi porteremo dentro una cosa che usiamo ogni giorno: le pagine web. Relatore 2: Quando apriamo un sito, non vediamo direttamente il codice, ma dietro ci sono tre linguaggi fondamentali che collaborano. Relatore 3: Questi linguaggi sono HTML, CSS e JavaScript. Li presenteremo come tre personaggi: il costruttore, il designer e il programmatore..

[Audio] Relatore 1: Una pagina web è quello che vediamo quando apriamo un sito con un browser, per esempio Chrome, Safari, Firefox o Edge. Relatore 2: Il browser riceve dei file e li interpreta: alcuni file dicono quali contenuti ci sono, altri come devono apparire. Relatore 3: E nelle pagine moderne spesso c'è anche interazione: pulsanti, menu, messaggi, form e contenuti che cambiano mentre li usiamo..

[Audio] Relatore 1: Per capire subito la differenza, immaginiamo una pagina web come un corpo umano. HTML è lo scheletro: dà una struttura, stabilisce dove stanno le parti. Relatore 2: CSS è l'aspetto esteriore: colori, proporzioni, stile, come se fossero vestiti e dettagli visivi. Relatore 3: JavaScript è il sistema che permette movimento e reazioni: quando succede qualcosa, la pagina può rispondere..

[Audio] Relatore 1: Possiamo usare anche la metafora della casa. HTML costruisce muri, stanze e porte: cioè decide quali elementi esistono. Relatore 2: CSS entra dopo e sceglie colori, arredamento, disposizione e stile. La casa diventa più bella e più ordinata. Relatore 3: JavaScript aggiunge luci, campanelli, porte automatiche e sensori: cioè tutto ciò che reagisce alle azioni delle persone..

[Audio] Relatore 1: Da qui in poi seguiremo l'idea della pagina che cresce. All'inizio immaginiamo di avere una pagina vuota. Relatore 2: Prima aggiungiamo contenuto e struttura, poi stile e grafica. Relatore 3: Alla fine aggiungiamo comportamento e interazione. Così vedremo i tre linguaggi non separati, ma come strumenti che collaborano..

[Audio] Relatore 1: Adesso entra in scena il primo personaggio: HTML, il costruttore. HTML serve a dire al browser quali elementi ci sono nella pagina. Relatore 2: Per esempio può dire: questo è un titolo, questo è un paragrafo, questa è un'immagine, questo è un link. Relatore 3: HTML non è un linguaggio di programmazione nel senso stretto: è un linguaggio di markup, cioè serve a segnare e organizzare i contenuti..

[Audio] Relatore 1: HTML nasce insieme al World Wide Web. Tim Berners-Lee lavorava al CERN e voleva un modo semplice per condividere documenti collegati tra loro. Relatore 2: L'idea fondamentale era il link: da un documento posso saltare a un altro documento. Oggi ci sembra normale, ma all'inizio era rivoluzionario. Relatore 3: Nel tempo HTML si è evoluto molto. Oggi con HTML5 non si gestiscono solo testi e link, ma anche immagini, video, moduli e una struttura più chiara della pagina..

[Audio] Relatore 1: In questo esempio vediamo tre tag. Il tag h1 crea un titolo grande. Il tag p crea un paragrafo. Il tag a crea un collegamento. Relatore 2: A destra vediamo il risultato: il browser non mostra i simboli dei tag, ma li interpreta. Relatore 3: Questo è il primo passo della pagina che cresce: adesso la pagina esiste, ha contenuti, ma è ancora molto semplice dal punto di vista grafico..

[Audio] Relatore 2: Ora entra in scena CSS, il designer. CSS non aggiunge nuovi contenuti: prende gli elementi HTML e decide come devono apparire. Relatore 1: Quindi se HTML ha creato un titolo, CSS può renderlo blu, più grande, centrato o con un certo carattere. Relatore 3: CSS è fondamentale anche perché oggi le pagine devono adattarsi a computer, tablet e telefoni. Lo stesso contenuto può cambiare disposizione in base allo schermo..

[Audio] Relatore 2: All'inizio molte informazioni sull'aspetto della pagina erano mischiate dentro HTML. Questo rendeva difficile modificare e mantenere i siti. Relatore 1: Nel 1994 Håkon Wium Lie propose CSS proprio per separare le due cose: HTML per il contenuto, CSS per lo stile. Relatore 3: Questa separazione è ancora importantissima. È come dire: prima scrivo il testo, poi decido impaginazione, colori e grafica..

[Audio] Relatore 2: Qui CSS usa delle regole. Prima seleziona un elemento, per esempio h1, poi dentro le parentesi graffe scrive proprietà e valori. Relatore 1: Per il titolo stiamo dicendo: colore blu e dimensione di 36 pixel. Relatore 3: A destra vediamo che il contenuto è lo stesso di prima, ma l'aspetto è cambiato. La pagina sta crescendo: ora non è solo strutturata, è anche più leggibile e più curata..

[Audio] Relatore 3: Ora arriva JavaScript, il programmatore. A differenza di HTML e CSS, JavaScript è un vero linguaggio di programmazione. Relatore 1: Può leggere e modificare gli elementi HTML. Per esempio può cambiare il testo di un titolo. Relatore 2: Può anche cambiare lo stile: colori, classi, visibilità degli elementi. Ma soprattutto reagisce alle azioni dell'utente, come un clic su un pulsante..

[Audio] Relatore 3: JavaScript nasce nel 1995 in Netscape, grazie a Brendan Eich. Il bisogno era chiaro: rendere le pagine web più dinamiche. Relatore 1: Prima molte pagine erano soprattutto documenti da leggere. Con JavaScript iniziano a reagire di più alle azioni dell'utente. Relatore 2: Nel 1997 il linguaggio viene standardizzato con il nome ECMAScript. Oggi JavaScript è ovunque nel front-end: app, menu, giochi, mappe, chat e interfacce interattive..

[Audio] Relatore 3: Qui abbiamo un bottone. Nel codice HTML compare onclick, cioè: quando l'utente clicca, esegui una funzione. Relatore 1: La funzione si chiama saluta. È un piccolo blocco di istruzioni. Relatore 2: Quando la funzione parte, appare un messaggio con scritto "Ciao!". Questo è il terzo passo della pagina che cresce: non è più ferma, ma risponde all'utente..

[Audio] Relatore 1: In questa slide vediamo finalmente i tre linguaggi insieme. HTML crea titolo, paragrafo e bottone. Relatore 2: CSS cambia l'aspetto: il titolo diventa viola e il bottone ha uno stile più evidente. Relatore 3: JavaScript aggiunge l'azione: quando clicchiamo il bottone, il titolo cambia. Relatore 1: Quindi nessuno dei tre fa tutto da solo. Relatore 2: HTML dà struttura. Relatore 3: CSS dà stile e JavaScript dà comportamento..

[Audio] Relatore 1: Siamo partiti da una pagina vuota e abbiamo visto come farla crescere. HTML ha costruito lo scheletro e i contenuti. Relatore 2: CSS ha dato ordine, colore, forma e stile. Relatore 3: JavaScript ha aggiunto comportamento e interazione. Relatore 1: La prossima volta che apriamo un sito, possiamo immaginare questi tre linguaggi al lavoro. Relatore 2: Uno costruisce. Relatore 3: Uno veste e uno fa muovere. Tutti: Grazie per l'attenzione!.