condividendo si impara
Che caratterino! Impariamo a modificare l'aspetto dei testi delle nostre pagine web
In questa fase del nostro percorso alla scoperta di come creare siti Internet a partire da zero ci stiamo concentrando su come possiamo cambiare l'aspetto e riorganizzare la presentazione degli elementi che abbiamo inserito nelle nostre pagine web.
Fino ad ora abbiamo usato l'esempio del cambio di colore per provare a selezionare in blocco dei tipi di elementi o delle classi e modificarne alcune proprietà.
Oggi, sempre con l'aiuto della piattaforma FreeCodeCamp, vi propongo di andare ad esplorare qualche altra proprietà che possiamo modificare per rendere i nostri elementi di testo più leggibili, accattivanti e adatti alla trasmissione del nostro messaggio.
Vedremo come possiamo modificare la grandezza dei caratteri, cambiare la tipografia, cioè la famiglia di caratteri per fare in modo che le lettere abbiano forme diverse, come importare dei caratteri da Google Fonts e come impostare delle tipografie alternative nel caso in cui il browser del nostro utente non abbia installati i caratteri che abbiamo indicato per il nostro sito.
Insomma ... un contenuto con un certo caratterino!
Scherzi a parte vi ricordo che al video è associato un articolo che potete consultare come contenuto aggiuntivo. Non si tratta di una semplice trascrizione di quanto detto.
Se conoscete qualche persona potenzialmente interessata a fare questo percorso con noi alla scoperta di come funzionano i siti web sotto il cofano e di come possiamo imparare a crearli da zero potete invitarla su questo canale.
Se avete osservazioni, correzioni, domande di chiarimenti e feedback v'invito a utilizzare i commenti che potrebbero così diventare un luogo dove si ampliano i contenuti e si aggiunge valore agli articoli e ai video per chi arriverà dopo.
Ringrazio tutte le persone che hanno supportato i contenuti precedenti e il canale utilizzando le opzioni messe a disposizione da Cam.tv, in particolare il bottone sostieni che potete trovare sotto al video e anche nella pagina del canale.
Per chi volesse vi ricordo che è anche possibile sostenere questo progetto attraverso dei contributi mensili regolari aderendo all'I-Team: l'area riservata ai sostenitori periodici del canale in cui potrete trovare dei contenuti aggiuntivi, dietro le quinte e riflessioni più profonde sul progetto che non sono presentate nell'area pubblica del canale.
Detto questo vi lascio e vi auguro una buona visione e una buona lettura!
Condividendo si impara!
I caratteri danno carattere agli elementi della nostra pagina
Le pagine web di base che abbiamo creato nel nostro percorso fino ad ora possono certo essere funzionanti ma, avrete notato, non sono certo moderne, colorate e di gradevole lettura e navigazione.
Times è il carattere predefinito in cui vengono visualizzati i siti in html e 16 pixels è la grandezza standard di tutti i paragrafi.
Certo, i titoli di vario livello e gli altri elementi di testo variano ma solo per la grandezza e il peso del carattere, cioè per lo spessore delle lettere ... per quanto viene calcata la mano insomma.
Nulla a che vedere coi siti che conosciamo tutti e che navighiamo regolarmente in cui vediamo scritte eleganti di differenti grandezze e colori, loghi, slogan e sigle in caratteri morbidi e gradevoli, o chiamate all'azione scritte in grande, ben visibili e posizionate in modo che l'occhio vi cada senza fatica e le legga in maniera naturale e senza sforzo.
Oggi vi propongo di vedere assieme come possiamo cominciare a modificare anche le tipografie del nostro sito per avvicinarci un po' a questi risultati.
La grandezza del carattere
Diversi testi del nostro sito possono avere delle grandezze ideali differenti a dipendenza del loro scopo.
Un'indicazione sul copyright a piè di pagina o un'indicazione in una barra di navigazione secondaria possono essere anche scritte più in piccolo rispetto all'invito ad iscriversi a una newsletter, a un corso o a comprare un determinato prodotto.
In quest'ultimo caso vogliamo che il testo sia scritto bello in grande ... o no?
La proprietà che definisce la grandezza dei caratteri di un elemento di testo si chiama font-size.
L'unità di misura di questa proprietà è il Pixel abbreviato in px.
La definizione della grandezza del carattere di una classe di elementi, ad esempio, si farà prima di tutto selezionando la classe, indicando tra parentesi graffe la proprietà font-size, associandola a un valore espresso in pixel e terminando il tutto con un punto e virgola finale (come abbiamo imparato nei contenuti precedenti).
In questo modo:
<style>
.call-to-action {
font-size: 20px;
}
</style>
In futuro vedremo come le grandezze possano essere espresse anche attraverso altre unità che indicano non tanto una dimensione fissa e assoluta, come nel caso del pixel, ma una relazione rispetto alla grandezza di altri elementi. Questa possibilità è molto interessante per creare dei siti adattivi alle dimensioni dello schermo di vari dispositivi ma ne riparleremo a tempo debito.
Impostare la famiglia di caratteri
Chiunque di noi abbia già utilizzato un programma per la scrittura, ad esempio word o libre office writer, ha già visto che esistono diversi tipi di caratteri, chiamati anche famiglie di caratteri.
Per dirla terre-à-terre le famiglie di caratteri si distinguono per il modo in cui sono disegnate le lettere, per lo spaziamento tra di loro, la morbidezza o la squadratura delle linee, i fronzoli e così via.
La famiglia di caratteri può rendere il nostro testo più decorativo, evocativo di determinati concetti o atmosfere, ma soprattutto va privilegiata sempre la leggibilità: se ci si perde in fronzoli ma poi non si capisce nulla di quanto scritto tanto vale no?
Ecco qualche nome di famiglie di caratteri che sicuramente abbiamo già incontrato nella nostra vita da utenti di computer:
E molti altri!
Non approfondiamo qui le singole famiglie di caratteri ma ci basti sapere che i nostri browser e i nostri sistemi operativi ne hanno parecchie preinstallate e sono quindi in grado di mostrarci i testi con tanti tipi di scritte differenti, seriose e professionali, minimaliste, robotiche, sbarazzine e così via.
Come fare quindi per indicare al browser di utilizzare una certa famiglia di caratteri invece che un'altra per determinate parti del nostro sito?
La proprietà che indica le famiglie di caratteri si chiama font-family e assume come valore il nome del carattere desiderato, ad esempio in questo modo:
<style>
h2 {
font-family: arial;
}
p {
font-family: roboto;
}
</style>
In questo modo tutti i paragrafi della nostra pagina saranno mostrati utilizzando la famiglia di caratteri Roboto mentre i titoli saranno invece mostrati in Arial.
Importare caratteri speciali da Google Fonts
Oltre che indicare i caratteri già preimpostati nella maggior parte dei sistemi abbiamo anche la possibilità di importare caratteri speciali sviluppati da Google e presenti nella libreria online di Google Fonts.
Se andate a vedere potrete trovare una enorme quantità di caratteri diversissimi utilizzabili gratuitamente ma, come sempre, cum grano salis!
Insomma...mai esagerare coi fronzoli, privilegiare la leggibilità e fare in modo che il carattere abbia un senso compiuto nel progetto!
Ma come possiamo fare per importare questi caratteri nelle nostre pagine?
L'elemento link
Prima di tutto dobbiamo essere in grado di collegare la nostra pagina alla libreria di Google da cui richiameremo le famiglie di caratteri che ci interessano.
Lo faremo nella sezione head del nostro sito: quella in cui mettiamo tutte le informazioni che servono per fare funzionare la pagina ma non quelle che devono essere visualizzate nel corpo della pagina.
Sarà Google stesso a metterci a disposizione gli attributi da inserire nel nostro elemento link che basterà copiare e incollare, una volta che avremo selezionato il carattere che ci interessa da Google Fonts.
Ecco un esempio di come si presenta un elemento link che collega la nostra pagina a un font di Google, nello specifico si tratta di Roboto:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@900&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
Non preoccupiamoci comunque! Come detto basta copiare e incollare il codice messo a disposizione da Google, che ci spiegherà anche come invocare l'utilizzo del carattere in questione nel nostro codice facilitandoci molto la vita!
Indicare un carattere alternativo da visualizzare in caso di non disponibilità di quello desiderato
Potrebbe anche accadere che il carattere con cui noi vorremmo che il nostro utente veda alcuni elementi del nostro sito non sia disponibile nel suo browser o nel suo sistema.
In questo caso perderemmo del tutto il controllo di come l'elemento si presenterà alla persona poiché il browser ricorrerà al suo carattere predefinito.
Possiamo però ovviare in parte a questo problema segnalando un secondo o un terzo carattere di riserva generalmente disponibili a cui ricorrere in caso di mancanza dei precedenti in maniera da avere un minimo di controllo su come anche i sistemi meno completi potranno visualizzare i nostri contenuti.
Lo facciamo semplicemente specificando il secondo carattere dopo una virgola.
Ad esempio:
<style>
p {
font-family: roboto, sans serif; }
</style>
In questo modo sapremo che se il nostro utente per qualsiasi motivo non potrà visualizzare i nostri caratteri in Roboto, potrà per lo meno farlo in Sans Serif.
E con questo abbiamo visto alcune delle basi di tipografia che ricorreranno spesso nel nostro percorso.
Come contribuire allo sviluppo del nostro gruppo di studio
Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.
V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.
Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.
Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!
Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!
E non dimentichiamoci che condividendo si impara!!
Linkoteca
Sito di FreeCodeCamp (il nostro quaderno degli esercizi)
Lo scopo e la filosofia di Iper
Come si colloca ciò che impariamo nel più vasto mondo del web
Il browser va all'asilo. Che cos'è un linguaggio di markup
Il browser va a teatro: la struttura di base di una pagina web
Qualche strumento per trasformare il canale in un gruppo di studio interattivo
Esercizi pratici: le basi dell'HTML
HTML 5 e la struttura logica delle pagine web
HTML: impariamo ad aggiungere un'immagine a una pagina web
Facciamo insieme qualche esercizio su FreeCodeCamp (attenzione! spoiler soluzioni!)
Come funzionano i link: le ancore che ci collegano al web
HTML: come inserire delle liste nelle nostre pagine web
Quaderno degli esercizi HTML: link liste e inserimento dati
HTML: i tipi di visualizzazione predefiniti degli elementi
HTML: esercizi pratici con soluzioni (spoiler alert!!!)
Il protocollo HTTP: il browser va all'osteria
Input: un elemento fondamentale dei formulari web
Formulario web: costruiamo alcuni campi di input utente
Web form: terminiamo la carrellata degli elementi principali
Trattiamo con rispetto i dati dei nostri utenti
Mettiamo in partica i formulari
Tls: ricevere dati dai nostri utenti in maniera sicura
Crittografia: la scrittura nascosta (parte 1)
Crittografia parte 2: la firma digitale
Trasmissioni sicure e veloci abbinando i metodi di cifratura
Al riparo da siti ingannevoli grazie ai certificati digitali
Rubare i dato oggi per decifrarli in futuro: la minaccia quantistica
Siti web consultabili da tutti. Qualche strumento per testare e migliorare l'accessibilità
Div: il contenitore multiuso del web
Coloriamo gli elementi del nostro sito con stile (anzi ... con style)
Cambiare stile uno alla volta? Lento e noioso ... perché non farlo in blocco?
Modifichiamo con classe lo stile del nostro sito