condividendo si impara
Modifichiamo con classe lo stile del nostro sito (e già che ci siamo impariamo il font-size)
Ciao a tutte e tutti, anzi ... un iperbentornato o iperbenvenuto! :-)
Negli scorsi video abbiamo visto come modificare le proprietà degli elementi del nostro sito, ad esempio il colore dei titoli, prima andando a prenderli individualmente e cambiandoli uno per uno e poi selezionando tutti i titoli della pagina e modificandoli in blocco all'interno della sezione style.
Oggi vi propongo di fare conoscenza con un nuovo strumento molto utile che ci facilita notevolmente la vita: la classe.
La classe di per sé non è un elemento ma un attributo che può essere aggiunto a qualsiasi cosa presente nel nostro sito.
Dando delle proprietà a una classe (colore del testo, grandezza del carattere, ...) possiamo creare una volta sola lo stile che verrà poi applicato a tutti gli elementi a cui attribuiremo quella classe, siano essi titoli, paragrafi, formulari o altro.
Fintanto che restano delle idee e dei concetti astratti può essere difficile capire l'utilità di questi strumenti per cui nel video metteremo le mani in pasta e andremo a vedere concretamente come sono fatte e come funzionano queste classi.
Ci sarà poi un bonus off-topic in cui impareremo anche come cambiare la grandezza del carattere di un elemento testuale.
Vi ricordo poi che cliccando su "vedi tutto" potrete accedere anche all'articolo correlato a questo video.
Non si tratta di una mera trascrizione ma di un vero e proprio contenuto aggiuntivo pensato separatamente con l'obiettivo di completare, chiarire o approfondire alcuni aspetti del tema trattato.
Buona visione e buona lettura!
Condividendo si impara!
-----------
Se conoscete persone potenzialmente interessate a esplorare con noi come funzionano i siti Internet sotto il cofano e come possiamo imparare a crearli a partire da zero, vi invito a far loro conoscere questo canale!
Ringrazio anche tutte le persone che hanno supportato i contenuti precedenti e il canale usando l'apposita opzione sostieni sotto i video e nella pagina del canale!!
Un gesto molto apprezzato e motivante per la continuazione e lo sviluppo di questo progetto!
Chi vuole può anche entrare a fare parte dell'Iper-team o I-Team: l'area riservata ai sostenitori periodici del canale in cui potrete trovare dei contenuti aggiuntivi e dietro le quinte.
Se avete feedback, osservazioni, suggerimenti, correzioni, v'invito a condividerli nei commenti qui sotto o a contattarmi attraverso il form che troverete alla fine dell'articolo oppure su Telegram.
Condividendo si impara!
Avere più controllo sull'aspetto dei nostri siti e risparmiare tempo
In questa fase del nostro percorso stiamo imparando come modificare la maniera in cui vengono presentati i contenuti del nostro sito dopo che li abbiamo inseriti nelle nostre pagine html.
Non si tratta soltanto di una questione estetica o di migliore leggibilità: l'aspetto degli elementi del sito può avere un impatto importante anche sull'efficacia del messaggio, soprattutto quando si tratta di invitare le persone a fare delle azioni.
Del resto lo vediamo anche nella nostra navigazione quotidiana: la stragrande maggioranza dei siti ci presenta in modo diverso i contenuti delle loro varie sezioni.
Un paragrafo piazzato in una barra di navigazione avrà una grandezza di carattere, un colore e anche altre proprietà differenti rispetto ad un paragrafo inserito in una sezione dove si invitano le persone ad iscriversi ad una newsletter o a comprare un prodotto, per esempio.
Un titolo potrà avere una grandezza o un colore differente a dipendenza che introduca una parte del sito di cui vogliamo evidenziare l'importanza dei contenuti oppure che introduca informazioni più standard.
Insomma, per creare un sito moderno, ben fruibile ed efficace dobbiamo avere più controllo su come vengono presentati i contenuti.
I limiti di quanto visto sinora
Negli scorsi video e articoli abbiamo imparato a modificare l'aspetto degli elementi del nostro sito uno per volta e poi in blocco.
Quest'ultimo metodo ci permette, come abbiamo visto, di selezionare in un colpo solo tutti gli elementi di un determinato tipo, ad esempio i titoli o i paragrafi, e di dare loro delle proprietà in blocco, dichiarandole una volta sola senza dover riscrivere sempre le stesse proprietà ogni volta che si ripresenta un titolo o un paragrafo nella nostra pagina.
Si tratta di un approccio che ci fa risparmiare un sacco di tempo e che ci aiuta ad evitare errori di copiatura e dimenticanze da un lato, ma che ha un limite dall'altro.
Infatti, se selezioniamo e modifichiamo in un colpo solo tutti i titoli di una pagina come possiamo poi attribuire delle proprietà diverse ai titoli destinati alle richieste di azioni (comprare, iscriversi, sostenere,...) rispetto a quelli che introducono informazioni standard o comunque meno importanti?
Una soluzione possibile sarebbe quella di modificare uno per uno tutti gli elementi che fanno parte della chiamata all'azione dando loro la grandezza di carattere, il colore, lo sfondo e tutte le altre proprietà che abbiamo definito per metterli in evidenza.
Ma ecco che ci ritroveremmo davanti a un'attività estremamente dispendiosa in termini di tempo e di energie e, di nuovo, a rischi di errori di copiatura vari.
Immaginiamo poi di dover aggiornare la pagina o di dover creare altre sezioni simili ... avremmo il massimo sforzo per il minimo risultato!
Quello che ci vuole è un sistema che unisca i due aspetti: la possibilità di cambiare in blocco gli stili attraverso del codice riutilizzabile per definire una volta sola le proprietà da un lato e quella di applicare questa possibilità a un gruppo di elementi che fanno parte di una determinata sezione, per esempio della chiamata all'azione, senza intaccare quello stesso tipo di elementi che sono al di fuori di quella sezione.
Ed è qui che entrano in scena le classi!
Cambiare gli stili con attributi di classe (e non fate i maliziosi...)
La soluzione ideale in questo caso è quella di non attribuire le proprietà speciali direttamente agli elementi ma di trovare un'altra cosa a cui collegare quelle proprietà che possa poi essere appiccicata agli elementi che vogliamo trasformare e possa quindi trasmettere loro queste proprietà.
Questo si ottiene dando delle proprietà a un attributo html.
Se vi ricordate gli attributi sono delle informazioni che si aggiungono agli elementi ma che non sono gli elementi stessi.
Ad esempio:
<img src="bella-foto.jpg" alt="un tramonto sul mare">
In questo caso l'elemento è l'immagine, indicato dalla sigla img, l'attributo src indica l'url della fonte da cui viene presa l'immagine e alt è l'attributo che indica un testo alternativo da visualizzare nel caso in cui l'immagine non possa essere vista o caricata.
Tutti gli attributi hanno sempre la stessa struttura in html:
nome-attributo="valori da attribuire all'alemento" (tra virgolette)
e sono inseriti all'interno delle parentesi apicali dopo la sigla che identifica l'elemento.
Per cambiare gli stili degli elementi che fanno parte di una determinata sezione o che hanno un determinato obiettivo possiamo contrassegnare questi elementi con un attributo che li definisca come parte di una classe, ad esempio della classe call-to-action.
<h2 class="call-to-action"> Iscriviti a Iper! </h2>
In questo modo abbiamo creato un elemento titolo e gli abbiamo aggiunto una classe chiamata call-to-action.
Non ci rimane che dare degli stili alla classe, nella sezione style della pagina.
In questo modo solo i titoli che avranno la classe call-to-action verranno modificati con gli stili che avremo predefinito una volta per tutte per questo tipo di contenuti.
Ma come dare gli stili a una classe?
Definire le proprietà di una classe
Abbiamo visto nei contenuti precedenti che nella sezione style del nostro documento html possiamo selezionare degli elementi e creare degli stili che si applicano a tutta la pagina.
Nella stessa sezione possiamo selezionare una classe e darle degli stili che si applicheranno a tutti gli elementi di quella classe presenti nella pagina.
Incominciamo quindi indicando il nome della classe preceduto da un punto fermo, dopodiché continueremo indicando tra parentesi quadre le proprietà da attribuire come abbiamo già visto negli articoli precedenti.
<style>
.call-to-action {
color: red; }
</style>
Il punto fermo prima del nome è indispensabile per indicare che ciò che stiamo modificando è una classe.
Dobbiamo far precedere il nome della classe dal punto soltanto nella sezione style mentre all'interno degli elementi indicheremo l'attributo come al solito.
In questo modo abbiamo definito una classe che darà il colore rosso a tutti i suoi elementi ma lascerà immutati tutti gli elementi che non fanno parte di call-to-action.
Per cui se nella nostra pagina abbiamo due titoli di secondo quello con la classe call-to-action sarà rosso e quello senza rimarrà con le sue impostazioni normali.
<h2 class="call-to-action"> Iscriviti a Iper! </h2> <!-- appare rosso -->
<h2> L'importanza della cibernetica nel commercio internazionale dei cammelli </h2> <!-- appare nel colore predefinito o selezionato per tutti i titoli nella sezione style -->
In questo giorni abbiamo visto degli esempi per capire il funzionamento di base di questi metodi attraverso delle proprietà semplici come il colore, ma ce ne sono molte altre che impareremo a conoscere nel proseguimento del nostro viaggio.
Condividendo si impara!
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?