Let’s Code! Web – Episodio #03
Corso di Programmazione Web
Benvenuti
Eccoci finalmente al terzo episodio di questa serie per imparare a programmare da zero in ambiente web.
Ancora non ci siamo addentrati nella programmazione vera e propria, avendo dovuto introdurre alcuni concetti fondamentali e il linguaggio HTML, che è alla base della creazione di pagine web.
Oggi ci occuperemo di alcuni aspetti fondamentali per controllare l’aspetto grafico degli elementi presenti nella pagina.
Quello che vogliamo realizzare è una pagina simile alla precedente del secondo episodio, ma in forma di biglietto da visita (business card). Avrà questo aspetto:
Preparazione
Esattamente come abbiamo fatto nei precedenti episodi, creiamo un file businesscard.html e inseriamo al suo interno i canonici blocchi Documento <html>, Intestazione <head> e Corpo <body>:
<!DOCTYPE html>
<html>
<head>
<title>Business Card - Digital Chris</title>
</head>
<body>
</body>
</html>Nota: avrete subito notato nella prima linea l’aggiunta di un testo particolare, <!DOCTYPE html>, che altro non è che la dichiarazione del tipo di documento. Con questa dichiarazione, che è sempre buona norma inserire, informiamo il browser che aprirà il documento che si tratta di un documento HTML5 (HTML versione 5, quella corrente).
Analizzando la pagina finita che dovremo realizzare e scomponendola in “blocchi” noteremo subito gli elementi principali da creare:
- un’immagine
- un titolo contenente il nome
- un paragrafo contenente la professione
- un altro paragrafo contenente la formazione
- una riga contenente le icone dei social con i relativi collegamenti
- un pulsante finale per il contatto via mail
- il tutto è centrato orizzontalmente e contenuto in un “box” con un bordo intorno e una leggera ombreggiatura
Impaginiamo gli elementi
Come prima cosa iniziamo ad inserire gli elementi nella pagina, nell’ordine in cui appaiono e senza per il momento preoccuparci di farli apparire esattamente come nell’esempio finito. Aggiungeremo quindi al codice di partenza i seguenti tag html:
<div>
<img src="digitalchris.jpg" alt="Digital Chris">
<h1>Christian de Miranda</h1>
<p>CEO & Founder, X5G</p>
<p>Università di Salerno</p>
<div>quì inserirò le icone social</div>
<a href="mailto:info@digitalchris.it">Contattami</a>
</div>Ora salviamo il file nominandolo businesscard.html, accertandoci inoltre di avere nello stesso percorso un’immagine chiamata come indicato nel tag <img> (nel mio caso “digitalchris.jpg”).
Provando ad eseguire il file nel browser noteremo subito la presenza di tutti gli elementi, anche se tutti allineati a sinistra e con l’immagine a dimensione piena (a seconda di quale avrete usato).
Quello che faremo ora è cercare di effettuare gli opportuni accorgimenti al codice per cercare di avvicinarci man mano sempre di più al risultato finale voluto, più precisamente dovremo:
- creare il box e dargli una dimensione in larghezza
- ridurre l’immagine
- aggiungere i loghi dei social
- aggiungere il tasto per contattare
- formattare opportunamente i testi
- centrare orizzontalmente tutto il contenuto
Dobbiamo ora introdurre la tecnologia fondamentale per il controllo dell”aspetto visivo dei contenuti di una pagina, ovvero i Fogli di Stile.
Infatti, mentre agli albori del World Wide Web l’aspetto degli elementi all’interno di una pagina si poteva controllare esclusivamente tramite il linguaggio HTML, con l’aumentare progressivo della complessità delle pagine e della comparsa di nuove necessità, si rese necessaria la definizione e la progressiva introduzione di un nuovo linguaggio, pensato e ottimizzato per controllare la formattazione degli elementi all’interno di una pagina web. Il risultato fu il linguaggio CSS (Cascading Style Sheet).
I Fogli di Stile (CSS)
Con il CSS possiamo controllare praticamente ogni aspetto visivo di un elemento html presente in una pagina, attraverso la definizione di regole per “isolare” alcuni elementi e attribuire poi ad essi una serie di proprietà che ne modifichino, appunto, l’aspetto.
L’idea alla base è questa: ad esempio seleziona all’interno del documento tutti i tag <p> e fai in modo che il testo all’interno sia sempre in grassetto. Oppure: seleziona tutte le immagini e imposta la dimensione massima a 300px. O anche: seleziona tutti gli elementi che appartengono ad una data “classe” e rendili invisibili.
Senza ancora entrare nel dettaglio, intuitivamente si può già capire l’immensa importanza di questo approccio: grazie ad esso infatti possiamo in un colpo solo controllare l’aspetto di più elementi, senza doverlo fare singolarmente per ognuno di essi.
Tenendo inoltre separate queste regole dal codice HTML si ottiene anche una maggiore leggibilità e modifiche più rapide in caso di necessità.
Per poter scrivere codice CSS, possiamo usare tre diversi approcci per utilizzarlo all’interno del nostro documento HTML.
Il metodo più rapido è quello di aggiungere l’attributo style all’interno di un tag, come nell’esempio seguente
<p style="text-align: center">Esempio di testo centrato tramite css.</p>In questo caso controllerò esclusivamente lo stile (la centratura del testo nell’esempio) di questo specifico tag <p>, lasciando inalterati gli altri.
Un altro metodo è invece quello di definire le regole CSS all’interno di un apposito tag <style> all’interno del documento html, come in questo esempio (abbreviato con i puntini sospensivi per comodità):
<html>...
<style>
p {
text-align: center;
}
</style>
...
<p>Esempio di testo centrato tramite css.</p>
...Qui controllerò la centratura del testo di tutti i tag <p> presenti nel documento, definendo una regola “globale” all’inizio del documento html utilizzando l’apposito tag <style>
Infine il metodo più consigliato per la maggior parte dei casi è di utilizzare un file CSS esterno al documento html e richiamarlo al suo interno.
<html>...
<link rel="stylesheet" href="stile.css" />
....
<p>Esempio di testo centrato tramite css.</p>In questo ultimo caso la regola è scritta allo stesso modo ma in un file separato, che viene richiamato nel documento tramite il tag <link> a sua all’interno del tag <head> del documento.
Nota: Benché nessuno ci vieti di impostare singolarmente tag per tag il relativo attributo style per controllarne l’aspetto, è fortemente consigliato separare il codice HTML da quello CSS, così da rendere il tutto più leggibile e facilmente modificabile. Questo perché molto spesso in pagine elaborate molti elementi condividono numerose caratteristiche (es. font, allineamento, dimensione, ecc…), quindi impostarle singolarmente su ogni tag, risulterebbe un processo lungo e tedioso, senza considerare poi il fatto che ogni modifica che volessimo apportare comporterebbe un’enorme perdita di tempo.
Già dagli esempi riportati sopra si intuisce la sintassi base del linguaggio, che è composto da blocchi, ciascuno dei quali ha la seguente forma:
SELETTORE-DI-TAG {
nome-proprieta: valore-proprieta;
altra-proprieta: altro-valore;
}Il selettore di tag, come vedremo dopo nel nostro esempio, serve a selezionare un sottoinsieme di elementi all’interno del documento a cui voglio applicare le proprietà definite all’interno del blocco. Il blocco si apre con una “{” e si chiude con una “}“, mentre ciascuna proprietà segue lo scheda “nome proprietà” : “valore proprietà” seguita da un “;” per separarla dalle successive. E così via.
Non voglio entrare ulteriormente in dettagli più teorici, vedremo durante i vari episodi vari modi interessanti di utilizzare il CSS. Per il momento fermiamoci qui e vediamo come utilizzare il CSS per ottenere il nostro biglietto da visita.
Un primo tocco di Stile
Per semplicità in questo esempio utilizzeremo il CSS all’interno dello stesso documento html, ma tutto all’interno dell’apposito tag <style> che inseriremo nell’intestazione <head>:
<head>
<style>
</style>
....A questo punto notiamo che nel biglietto da visita che vogliamo realizzare tutti gli elementi sono contenuti in un <div> “genitore”, che è centrato orizzontalmente nella pagina, dunque potremo applicargli la proprietà “text-align: center” del CSS.
Però abbiamo un problema, ovvero non è detto che tutti i <div> debbano essere allineati allo stesso modo e dunque non possiamo applicare la regola a tutti i <div> indistintamente. Dobbiamo trovare un modo per applicarlo solo a quell’elemento.
Qui ci vengono in aiuto gli identificativi univoci CSS, ovvero un modo per identificare univocamente un elemento all’interno della pagina così da poterlo controllare singolarmente. Per fare questo basta aggiungere all’elemento l’attributo “id”:
<div id="card">
...
</div>In questo modo assegnamo l’identificativo “card” al tag <div>, così da poterlo richiamare tramite CSS in questo modo:
#card {
}Ora che abbiamo “isolato” il nostro div, dobbiamo impostarne le proprietà, ovvero la dimensione e l’allineamento. Per fare questo inseriremo due proprietà:
#card {
width: 300px;
margin: auto;
}La prima ovviamente limiterà la dimensione del div a 300px di larghezza, mentre la seconda ci consente di allineare il div al centro, questo perché il div di default ha un rendering (visualizzazione) di tipo “block“, ovvero prende l’intera larghezza del suo contenitore (nel suo caso la pagina stessa), a meno che non gli impostiamo come abbiamo fatto una dimensione fissa, in questo modo la proprietà margin: auto, distribuendo appunto lo spazio rimanente in egual misura a destra e sinistra dell’elemento.
Salvando il documento e provando a lanciare la pagina nel browser noterete che in effetti il div si è ridimensionato e centrato, così come si sono spostati gli elementi al suo interno, ad esclusione dell’immagine che essendo più grande “fuoriesce” dal div.
A questo punto impostiamo la dimensione dell’immagine utilizzando un cosiddetto CSS-inline, ovvero inserendo la proprietà CSS direttamente come attributo style del tag, cosa che in realtà abbiamo detto non essere buona norma utilizzare, ma lo faremo a titolo esemplificativo per provare anche questa modalità di scrittura. Avremo dunque il nostro tag <img>:
<img src="digitalchris.jpg" alt="Digital Chris" style="width: 100%;">Abbiamo quindi detto al browser di ridimensionare l’immagine in modo che occupi il 100% dello spazio disponibile del suo genitore (il tag div con id=”card”). Come risultato otteniamo finalmente qualcosa che inizia a somigliare al risultato finale.
Abbelliamo il tutto
Proseguendo, visualizzando ciò che dovremo ottenere, notiamo che nella pagina abbiamo un titolo grande con il mio nome, seguito da un paragrafo contenente la mia posizione lavorativa e un altro paragrafo con la mia università. Tutti i tre elementi sono allineati al centro.
Come per il div contenitore principale, anche per questi 3 elementi utilizzeremo degli id univoci per identificarli all’interno della pagina:
...
<h1 id="nome">Christian de Miranda</h1>
<p id="lavoro">CEO & Founder, X5G</p>
<p id="studio">Università di Salerno</p>
...A questo punto definiamo le loro proprietà in CSS nel tag <style> presente nell’intestazione del documento:
<style>
#nome {
font-size: 24px;
}
#lavoro {
color: grey;
font-size: 18px;
}
#studio {
color: black;
font-size: 16
}
</style>Salviamo e riapriamo la pagina nel browser. Vedremo il testo formattato correttamente, ma tutto ancora allineato a sinistra. A questo punto abbiamo due possibilità, entrambe prevedono l’utilizzo della proprietà CSS “text-align” impostata ovviamente sul valore “center”. Nel primo caso potremmo inserire la proprietà in tutti gli elementi della pagina. Ma proprio perché sono tutti allineati al centro, allora possiamo (e ci conviene farlo) applicare la proprietà al solo elemento contenitore, in modo che tutti i suoi “figli” per così dire “ereditino” tale proprietà dal “padre”, che sarebbe il div il cui identificativo è “card”. Nel CSS avremo dunque:
...
#card {
width: 300px;
margin: auto;
text-align: center;
}
...Abbiamo così centrato tutto.
Nota: la terminologia “padre”-“figlio” serve a dare un senso familiare alle relazioni che ci sono tra gli elementi della pagina, cosa fondamentale per capire il funzionamento di un browser quando interpreta il codice HTML e CSS. Esso infatti dopo che ha letto l’intero file, crea nella sua memoria un modello chiamato DOM, dove ogni elemento ha le proprie caratteristiche e relazioni con altri elementi in una sorta di albero genealogico. Ogni elemento ha i suoi ancestors (antenati), i suoi siblings (fratelli) e infine i suoi figli (descendants). Nella sezione approfondimenti alla fine dell’articolo troverete risorse aggiuntive su questo argomento.
Ora un po’ di interattività
Dobbiamo ora sostituire il testo segnaposto “qui inserirò le icone social” con le icone effettive, ognuna delle quali inoltre dovrà avere un collegamento con il mio relativo profilo social.
Per fare questo utilizzeremo una delle funzioni più importanti che la programmazione ci offre, ovvero il riutilizzo di un componente pronto all’uso, così da semplificarci la vita ed evitare di dover salvare 4 immagini che siano dello stesso stile, ridimensionarle alla stessa dimensione, allinearle ecc…
Senza entrare troppo nel merito (approfondiremo nei prossimi episodi quando parleremo di Javascript), includeremo un componente chiamato Font Awesome, che si occupa di convertire dei tag html in delle icone a scelta tra una libreria di migliaia, senza doverci preoccupare di altro.
Per fare questo innanzitutto includiamo la libreria aggiungendo nel tag <head> della pagina il seguente codice:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Altro non abbiamo fatto che includere un foglio di stile, che però è in un indirizzo internet e non sul nostro computer. Questo file CSS ha tutte le proprietà che servono per includere icone nella pagina che lo ha incluso.
A questo punto non dobbiamo fare altro che sostituire il div contenente il testo segnaposto “qui inserirò le icone social” con il seguente:
<div>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>In pratica abbiamo inserito 4 elementi che verranno “intercettati” dal componente Font Awesome e sostituiti in tempo reale con le immagini social. Per funzionare il sistema richiede che gli elementi siano inclusi in un tag <i> (che normalmente viene usato per il testo in corsivo) a cui vengono assegnate due classi (con l’attributo class e due valori separati da uno spazio, ovvero “fa” per indicare che è un elemento icona e “fa-nomesocial” per indicare quale icona assegnare ad esso).
Salvando ed eseguendo la pagina vedrete come per magia al posto del tag <i> vi siano le icone dei social, senza aver dovuto includerle come immagini. A questo punto aggiungiamoci i link, racchiudendo ciascun tag <i> in un tag <a> come abbiamo fatto nello scorso episodio, ottenendo:
<div>
<a href="https://www.facebook.com/digitalchris.it"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/digitalchris.it"><i class="fa fa-instagram"></i></a>
<a href="https://www.twitter.com/cdemiranda"><i class="fa fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/demiranda"><i class="fa fa-linkedin"></i></a>
</div>Le icone ora sono cliccabili e ciascuna porta al mio relativo profilo social.
Non ci resta ora che creare il pulsante per contattarmi, che altro non sarà che un link alla mia mail contenuto in un div che lo renda simile a un pulsante, ovvero:
<div id="pulsante">
<a href="mailto:info@digitalchris.it">Contattami</a>
</div>Per il quale poi creo il relativo blocco CSS:
#pulsante {
background-color: black;
padding: 8px;
}A questo punto, se proviamo il tutto, dovremo ottenere qualcosa di simile al risultato finale e con i link funzionanti. Mancano però una serie di accorgimenti per rendere la pagina più accattivante.
Ritocchi Finali
Cosa manca per rendere perfetta questa pagina?
Come prima cosa dobbiamo distanziare un po’ le icone social con il pulsante dei contatti e renderle di colore nero.
Per fare questo in primis dobbiamo trovare un modo di selezionare tramite CSS i link dei social, in modo da poterli distanziare fra loro. Questi link sono tutti all’interno di un div, che non ha un identificatore e quindi lo aggiungiamo e lo chiamiamo “social”:
...
<div id="social">
<a href="https://www.facebook.com/digitalchris.it"><i class="fa fa-facebook"></i></a>
...Adesso dobbiamo isolare tutti i 4 link presenti nel div e per fare questo utilizziamo il seguente selettore CSS:
#social a {
margin: 5px;
font-size: 22px;
color: black;
}Con questo selettore in pratica stiamo chiedendo di selezionare tutti i tag <a> all’interno dell’elemento che ha come identificatore “social” e ad essi gli facciamo applicare un margine di 5px così da distanziarli, un colore nero e una dimensione leggermente più grande pare a 22px.
Fatto questo, passiamo a distanziare anche il pulsante “Contattami”, così da allontanarlo un po’ dalle icone social. In tal caso basterà aggiungere un margine superiore di 20px al div, ottenendo:
#pulsante {
margin-top: 20px;
background-color: black;
padding: 8px;
}Il colore del link al suo interno però è ancora blu e dobbiamo cambiarlo in bianco, ingrandirlo un po’ e infine togliere la sottolineatura. Come nel caso dei social, utilizziamo un selettore “a cascata” per selezionare il link al suo interno:
#pulsante a {
color: white;
font-size: 18px;
text-decoration: none;
}La ciliegina sulla torta che manca è di applicare al contenitore principale un bordo con ombreggiatura in modo da far apparire il contenuto della pagina come un biglietto da visita. In questo caso ci basterà aggiungere al selettore del div principale, il cui id è “card”, la relativa proprietà:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);Il valore della proprietà box-shadow applica una leggera ombra laterale e verso il basso (vedi FAQ a fine articolo per approfondire).
Finish!
Siamo arrivati alla fine! Abbiamo il nostro biglietto da visita!
Se tutto funziona regolarmente dovreste ritrovarvi alla fine con questo codice completo:
<!DOCTYPE html>
<html>
<head>
<title>Business Card - Digital Chris</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#card {
width: 300px;
margin: auto;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
#nome {
font-size: 24px;
}
#lavoro {
color: grey;
font-size: 18px;
}
#studio {
color: black;
font-size: 16px;
}
#pulsante {
margin-top: 20px;
background-color: black;
padding: 8px;
}
#pulsante a {
color: white;
font-size: 18px;
text-decoration: none;
}
#social a {
margin: 5px;
font-size: 22px;
color: black;
}
</style>
</head>
<body>
<div id="card">
<img src="digitalchris.jpg" alt="Digital Chris" style="width: 100%;">
<h1 id="nome">Christian de Miranda</h1>
<p id="lavoro">CEO & Founder, X5G</p>
<p id="studio">Università di Salerno</p>
<div id="social">
<a href="https://www.facebook.com/digitalchris.it"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/digitalchris.it"><i class="fa fa-instagram"></i></a>
<a href="https://www.twitter.com/cdemiranda"><i class="fa fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/demiranda"><i class="fa fa-linkedin"></i></a>
</div>
<div id="pulsante">
<a href="mailto:info@digitalchris.it">Contattami</a>
</div>
</div>
</body>
</html>Ricapitoliamo
Come negli altri casi siamo partiti da un esempio grafico finito e lo abbiamo ricostruito da zero:
- Scomponendo l’esempio in blocchi
- Codificando in HTML i blocchi
- Formattando gli elementi utilizzando il CSS
- Aggiungendo una libreria esterna per generare le icone
- Inserendo i link social e la mail di contatto
- Applicando una leggera ombreggiatura al box principale
Conclusioni
Se siete arrivati fin qui, sicuramente avrete notato che questo è stato un episodio piuttosto impegnativo, per via delle tante aggiunte al codice e del nuovo linguaggio CSS, ma sicuramente lo avrete trovato più pratico e gratificante.
Dal prossimo episodio inizieremo la programmazione vera e propria, introducendo il linguaggio di programmazione Javascript e continuando laddove necessario, a introdurre e approfondire ulteriormente l’HTML e il CSS che, come abbiamo visto finora, hanno lo scopo di impaginare e formattare elementi, ma scoprirete che non sono propriamente dei linguaggi di programmazione.
Vedremo inoltre come scrivere e testare più velocemente i nostri progetti utilizzando un comodo strumento, CodePen, un’app semplice ma anche molto potente.
Let’Code
- Il progetto Let’s Code
- Introduzione alla Serie Web
- Programmazione Web #01: Hello, World!
- Programmazione Web #02: Una pagina di benvenuto
- Programmazione Web #03: Un biglietto da visita online…con stile! (questo episodio)
FAQ
D: “Ho qualche conoscenza/reminiscenza base della programmazione, perché i tipici elementi (variabili, cicli, condizioni, ecc…) non sono stati presentati finora?”
R: Perché in effetti né l’HTML né il CSS sono dei veri linguaggi di programmazione, piuttosto sono dei cosiddetti linguaggi di Markup, per definire elementi in un documento. e controllarne l’aspetto.
D: “E’ possibile in CSS selezionare tutti i tag dello stesso tipo all’interno del documento?”
R: Certamente. Ad esempio per selezionare tutti i tag <a> all’interno del documento basterà utilizzare il selettore:
a {
...
}D: “E’ possibile in CSS impostare delle proprietà che valgano per tutti gli elementi del documento, nessuno escluso?”
R: Si. Dovremo soltanto utilizzare il selettore body, cosi:
body {
...
}D: “Come funziona la proprietà box-shadow del CSS per applicare l’ombra ad elementi?”
R: Il valore della proprietà box-shadow (ombreggiatura) è così composta:
- 0 come scostamento orizzontale: in entrambe le direzioni (dx e sx)
- 4px come scostamento verticale: verso il basso (perché positivo)
- 8px come sfocatura dell’ombra: maggiore è, più l’ombra sembrerà dissolversi
- 0 come dimensione dell’ombra: maggiore è, più l’ombra sarà estesa
- rgba(0, 0, 0, 0.2): funzione che calcola il colore dell’ombra, in questo caso il nero con opacità pari 0.2 (quasi trasparente)
Per approfondire
Linguaggi di Markup [da Univesità di Pisa]
Document Object Model (DOM HTML) [da HTML.IT]
Introduzione al CSS [da IONOS]
