HTML5 e CSS3

LEGGI SUBITO UN'ANTEPRIMA

Introduzione
Insomma… è deciso!
È arrivato il tempo di imparare HTML e CSS.
E hai deciso di farlo acquistando questo libro.
Mi stai dando una bella responsabilità. Non trovi?
Spero che alla fine del tuo studio riterrai questo libro un valido investimento.
È il motivo per cui l’ho scritto.
[Alessandro Stella – https://alessandrostella.it/]

HTML e CSS sono i codici su cui si basa tutto il web.
Ogni volta che digitiamo un indirizzo web sulla barra degli indirizzi del nostro browser preferito, il browser riceve come risposta codice HTML e fogli di stile CSS (insieme a codice JavaScript se gestito dal sito che stiamo visitando).
Ad esempio, se visitiamo il sito di Facebook utilizzando un browser, quello che il browser riceve dalla rete è codice HTML, CSS e JavaScript. Se andiamo su YouTube, quello che riceve il browser è HTML, CSS e JavaScript. È così per tutto il web.
Il resto è noia.
La programmazione web si basa su un’architettura chiamata client-server. In tale architettura un’applicazione client richiede dati ad un’applicazione server che glieli fornisce. Per questo motivo l’applicazione client deve essere in grado di fare delle richieste e di interpretare le risposte.
Per scrivere un’applicazione client in grado di assolvere a questi compiti si può procedere in diversi modi.
Potremmo, ad esempio, scrivere codice per Windows, producendo quindi un file eseguibile (.exe) che funga da client e che sia in grado di inviare le richieste e di ricevere le risposte da un’applicazione server. Tuttavia questo tipo di soluzione funzionerebbe solo su computer equipaggiato con Windows perché gli eseguibili funzionano solo su PC che usano il sistema operativo Windows. Oppure potremmo seguire un’altra strada e scrivere l’applicazione client usando, ad esempio, codice Java. In questo modo la stessa applicazione client potrebbe essere usata su qualunque sistema operativo (o quasi). Ma c’è anche un altro possibile modo di procedere: scrivere codice per il browser. Il browser è installato o installabile su praticamente ogni dispositivo e funziona su ogni sistema operativo. Non lo dobbiamo scrivere noi, è stabile, è sicuro, è controllato, è aggiornato di continuo. Scrivere codice per il browser significa quindi scrivere codice che funzionerà su tutti i sistemi operativi e su tutti i dispositivi (PC, Tablet, Smartphone e così via, indipendentemente dal sistema operativo installato sul dispositivo). Usare il browser come applicazione client garantisce una compatibilità pressoché totale. Ecco perché è così importante conoscere HTML e CSS: sono gli unici codici che il browser è in grado di comprendere (oltre a JavaScript).

È importante osservare che utilizzando HTML, CSS e JavaScript e sfruttando strumenti di sviluppo come, ad esempio, Cordova (https://cordova.apache.org/), con un piccolo sforzo saremo in grado di produrre vere e proprie APP capaci di funzionare sui diversi sistemi operativi mobili: Android, iOS, Windows. D’altro canto utilizzando, ad esempio, NW.js (https://nwjs.io/), saremo in grado di produrre applicazioni desktop native multipiattaforma, in grado cioè di funzionare su Linux, Mac e Windows. Infine possiamo utilizzare queste stesse tecnologie per produrre PWA (Progressive Web Application), ossia applicazioni web che si “installano” sul dispositivo mobile come fossero vere e proprie APP installate dallo store (ma senza passare dallo store)!
Noi non ci occuperemo di questi aspetti, ma è importante sapere che, conoscendo HTML, CSS e JavaScript possiamo scrivere applicazioni sia per dispositivi mobili sia per desktop. Non male, no?

Lo studio che intraprenderemo in questo testo farà riferimento alle direttive del W3C (https://www.w3.org/), l’organismo internazionale che si occupa di produrre e standardizzare HTML e CSS. A maggio del 2019 il W3C e il WHATWG (https://whatwg.org/) hanno stipulato un accordo per il rilascio delle specifiche per HTML e DOM. Tale accordo è reperibile al seguente link: https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/
Sarà un viaggio lungo ed entusiasmante che ci condurrà a scrivere codice per il browser e ad avere una visione d’insieme di tutto quello che è importante sapere sul fronte client.

Organizzazione dell’opera
Il libro è diviso in 5 capitoli (oltre alla presente introduzione).
Il primo capitolo, “RETI E PROGRAMMAZIONE WEB“, consente di prendere confidenza con i termini utilizzati nell’ambito della programmazione web a partire dalle reti di calcolatori.
Il secondo capitolo, “IL COSA E IL COME“, introduce HTML e CSS spiegando i motivi per cui, per produrre una pagina web professionale, necessitano entrambi.
I capitoli 3 e 4 trattano, rispettivamente, HTML e CSS nelle versioni attualmente in vigore, cioè HTML 5 e CSS 3.
Il capitolo 5, “HTML e CSS IN AZIONE“, è interamente dedicato alla pratica.

A chi si rivolge il libro
Questo libro è scritto per i principianti.
Tuttavia, procedendo gradualmente, il libro raggiunge livelli di approfondimento intermedi su argomenti fondamentali.
Più in generale, il libro è scritto per tutti coloro che vogliono avvicinarsi al mondo della programmazione web lato client usando il browser come applicazione client di riferimento. È scritto altresì per tutti coloro che vogliono avere una visione d’insieme sulla programmazione web, ossia conoscere tutte le maggiori tecnologie utilizzate nella produzione di codice per le applicazioni web.
Leggendo questo libro non diventeremo dei guru della programmazione web lato client, ma conosceremo tutte le strade da seguire per diventarlo.
Non è un libro per esperti del settore.

Prerequisiti
Per leggere e comprendere il libro non è necessaria alcuna conoscenza né di programmazione né di HTML né di CSS. Tuttavia è importante avere dimestichezza con l’ambiente Microsoft Windows (installare applicazioni, creare cartelle, ecc.).

Strumenti utilizzati
Il codice presente in questo libro è stato scritto su piattaforma Windows usando Visual Studio Code (https://code.visualstudio.com/), un ambiente di sviluppo integrato che ci tornerà utile quando diventeremo esperti. Andiamo quindi sul link sopra indicato, scarichiamo e installiamo il software sulla nostra macchina. Funziona su tutti i sistemi operativi.

All’inizio Visual Studio Code può apparire un sistema complicato, ma è inutile iniziare questa avventura utilizzando software più semplici perché alla fine, se vogliamo programmare per il web, dovremo utilizzare necessariamente un ambiente di sviluppo adeguato. Visual Studio Code garantisce di lavorare abbastanza bene sia sul fronte client sia su quello server. Facciamo quindi uno sforzo iniziale per poi trovarci avvantaggiati dopo.
Tra l’altro gli ambienti di sviluppo sono davvero tanti ed è molto probabile che ci troveremo ad utilizzarne diversi nello stesso momento o comunque durante la nostra carriera come programmatori per il web. Tra i più conosciuti possiamo citare:

• NetBeans (https://netbeans.apache.org/),
• Eclipse (https://www.eclipse.org/ide/),
• PhpStorm (https://www.jetbrains.com/phpstorm/)

Oltre a Visual Studio Code verrà utilizzato un editor online di pubblico utilizzo denominato liveweave (https://liveweave.com/) che ci consente di scrivere codice online, di vederne immediatamente il risultato e di richiamarlo ogni volta che ci interessa farlo.
Visual Studio Code (VSC) è un editor molto complesso che impareremo ad utilizzare nel tempo. Ciò che serve sapere per iniziare è però molto semplice. Quello che diremo non è una regola. Ognuno di noi potrà configurare e utilizzare VSC come meglio crede. Ma essendo noi dei principianti, una guida iniziale è necessaria.
Quindi ipotizzando di voler racchiudere tutti i nostri progetti in una cartella del nostro disco fisso, apriamo Esplora File (tasti di scelta rapida WIN+E) di Windows e creiamo una nuova cartella denominata workspace. All’interno di tale cartella creeremo una nuova cartella per ogni progetto. Ad esempio, se stiamo creando un progetto per un calendario degli appuntamenti, possiamo creare la cartella calendario dentro la cartella workspace.
Dentro la cartella calendario inseriremo tutti i file e i codici che comporranno il progetto “calendario”. Una volta fatto questo, possiamo aprire VSC, premere la voce di menu denominata File e scegliere File/Apri cartella… come mostrato nella Figura.
Navighiamo nelle cartelle del nostro disco fisso fino a raggiungere la cartella calendario e scegliamo “seleziona cartella”, come mostrato nella Figura. A questo punto VSC potrebbe chiedere se riteniamo “attendibile” il contenuto di tale cartella. Se lo dovesse chiedere dobbiamo (ovviamente) rispondere affermativamente perché siamo noi gli autori del codice presente in tale cartella (più attendibili di così?).
Risposto affermativamente, VSC finalmente partirà aprendo la cartella scelta e mostrando una schermata di benvenuto.
Da questo momento possiamo creare nuove cartelle e nuovi file dentro la cartella calendario direttamente da VSC.
Oltre a VSC, lo strumento che useremo maggiormente sarà, naturalmente, il browser.
Quasi tutti i moderni browser integrano al loro interno risorse per gli sviluppatori, in modo che sia possibile effettuare correzioni e controlli al codice HTML e CSS direttamente dal browser. Per accedere a tali risorse basta premere F12 mentre è attiva una qualsiasi finestra del browser.
Il browser che utilizzeremo in questa sede è Google Chrome (https://www.google.com/intl/it/chrome/), ma è possibile eseguire gli stessi controlli con tutti gli altri browser (Edge, Firefox, Safari, ecc.) sempre premendo F12.
Usando Chrome, la pressione del tasto F12 in una qualunque pagina web, mostra il DOM Explorer come mostrato nella Figura.
In alto a destra abbiamo tutto il codice HTML che compone la pagina web mostrata sulla sinistra. Le righe di codice precedute da una freccetta sono contenitori di altro codice. Cliccando sulla freccetta possiamo infatti espandere il codice e vedere il codice in esso contenuto e così via. Inoltre se, nella parte di destra, selezioniamo un pezzo di codice, nella parte in basso a destra (o da qualche altra parte, a seconda della configurazione del browser) compariranno le proprietà CSS associate a tale codice. Non solo. Possiamo anche verificare in tempo reale eventuali modifiche apportate alle proprietà del foglio di stile.
La cosa utile è che tutte le modifiche che apportiamo tramite questa tecnica non modificano il foglio di stile. Ci basterà aggiornare la pagina (F5) per cancellare tutte le modifiche apportate.

Questo strumento è didatticamente molto utile perché mostra in tempo reale quali effetti avrebbero le nostre eventuali modifiche sul layout della pagina. Inoltre ci costringe a riflettere sul perché accade ciò che vediamo.
Oltre a tale strumento di controllo è importante sapere che il browser è in grado di mostrare per intero il codice HTML della pagina visualizzata. Basta cliccare su un punto vuoto della pagina con il tasto destro del mouse e scegliere, dal menu che compare, la voce HTML oppure Visualizza sorgente pagina (a seconda del browser).
Infine è importante avere un riscontro ufficiale di quello che scriviamo.

Il nostro codice può essere più o meno valido secondo gli standard W3C. Per sapere se il nostro codice HTML è ben scritto, possiamo (dobbiamo) usare un validatore messo a disposizione dal W3C:
https://validator.w3.org/
Allo stesso modo è opportuno controllare il codice CSS. Anche in questo caso esiste un apposito validatore W3C:
https://jigsaw.w3.org/css-validator/
È buona prassi controllare spesso il parere di questi validatori: impareremo tante cose dai risultati dei loro controlli.
Tutti gli esercizi e i codici presenti in questo libro sono visionabili online oppure scaricabili sul proprio PC dal seguente link:
https://alessandrostella.it/books/html5css3/
Ora è tempo di iniziare quest’avventura…