Da zero a Iper: impariamo insieme il web

condividendo si impara

Che bella figura: presentiamo meglio le immagini del nostro sito web

2022-05-29 18:18:46

Ciao a tutte e tutti voi, e un iper-benvenuto o iper-bentornato sul canale in cui stiamo imparando a creare dei siti web a partire da zero!
In questa fase del nostro percorso stiamo esplorando diversi metodi per cambiare l'aspetto degli elementi che abbiamo inserito nelle nostre pagine web.
Fino ad ora abbiamo visto soprattutto come possiamo modificare varie proprietà di alcuni elementi di testo sia selezionandoli in blocco all'inizio della nostra pagina web, sia creando e attribuendo loro delle classi legate alla loro funzione.
In particolare abbiamo visto come possiamo modificare il colore dei testi ma anche cambiare la forma e il tipo di carattere che viene visualizzato dal browser degli utenti del nostro sito.
Oggi vi propongo di andare ad esplorare qualche proprietà di base di un altro tipo di elemento molto importante e utilizzato tantissimo nelle pagine web: l'immagine.
Nel video vedremo come regolare le dimensioni delle immagini del nostro sito, come aggiungere dei bordi, arrotondarne gli angoli o anche farle diventare delle immagini circolari (come quelle delle foto di profilo di alcuni social).
Anche oggi lo faremo utilizzando la piattaforma gratuita FreeCodeCamp, che ha un nuovo percorso di esercizi dedicato proprio ai temi che stiamo trattando.
Gli esercizi che vedrete nel video sono quelli della versione precedente per cui non ci sono spoiler delle soluzioni del nuovo percorso!! :-)
Concludo come sempre ricordandovi che il video è completato da un articolo che potete visualizzare cliccando qui sotto sul pulsante "Vedi tutto" e che non si tratta di una trascrizione ma di un vero e proprio contenuto aggiuntivo.
Detto questo vi saluto ringraziando tutte le persone che hanno supportato sinora questo canale e i suoi contenuti utilizzando l'opzione sostieni sotto ai video o nella pagina del canale e vi ricordo che c'è anche la possibilità di diventare membri dell'iper-team detto anche I-team: L'area riservata ai sostenitori periodici di questo progetto in cui potrete trovare dei contenuti extra, dietro le quinte e riflessioni che non saranno disponibili nell'area pubblica del progetto.
Un caro saluto e un augurio di buona visione e lettura!
Condividendo si impara!

Le nostre immagini influenzano la nostra immagine

Nelle pagine web moderne le immagini possono avere ruoli molto variegati: può trattarsi della foto dell'autore di un articolo, di un'illustrazione simbolica del tema trattato, della foto di un prodotto messo in vendita in un e-commerce e tantissimo altro.

Se vogliamo quindi presentare un sito web moderno ed efficace nel far passare il suo messaggio dobbiamo riuscire a fare in modo che ogni immagine sia presentata in maniera adatta a svolgere il suo ruolo.

La foto dell'autore di un articolo potrà benissimo essere piccola e rotonda, mentre l'immagine di un prodotto dovrà occupare abbastanza spazio da essere ben visibile e mostrare le caratteristiche di interesse per chi sta valutando un potenziale acquisto, ad esempio.

Oggi vediamo le basi di come possiamo regolare le dimensioni, i bordi e la forma delle nostre immagini.

La dimensione delle immagini

Le immagini, come qualsiasi altro oggetto bidimensionale proiettato da uno schermo, hanno essenzialmente due proprietà che ne determinano le dimensioni: la larghezza e l'altezza.

Tuttavia per noi è sufficiente, nella stragrande maggioranza dei casi, modificare soltanto la larghezza dell'immagine mentre il resto si adatta di conseguenza.

Un bel risparmio di tempo e anche, come vedremo in futuro, una facilitazione non indifferente per creare dei contenuti adattivi alla dimensione degli schermi dei vari dispositivi dei nostri utenti.

La proprietà che indica la larghezza delle immagini si chiama width, cioè larghezza in inglese (poca fantasia ma molta efficacia) e la usiamo come abbiamo imparato a fare con le altre proprietà degli altri elementi: indicando il nome della proprietà e il valore separato da due punti.

<style>

.foto-piccola {

width: 100px;

}

</style>

Immagine di partenza

Immagine modificata con la proprietà width a 100px

Nelle pagine web la larghezza si indica di base in pixels (px), un'unità di misura che abbiamo già incontrato per regolare la dimensione dei caratteri.

C'è da dire che esistono modi alternativi che permettono di indicare la larghezza in relazione ad altri elementi e non solo in termini assoluti attraverso i pixel. Non li vedremo oggi ma li incontreremo in futuro quando approfondiremo la definizione degli elementi in funzione delle dimensioni dello schermo del dispositivo dell'utente.

I bordi delle immagini

Le immagini del nostro sito sono anche circondate da bordi che possiamo rendere più o meno visibili e di cui possiamo cambiare lo spessore o il colore in funzione dell'effetto che desideriamo ottenere.

In maniera predefinita i bordi non sono visibili ma possiamo modificarli e manipolarli usando differenti proprietà il cui nome inizia con la parola chiave border, cioè bordo in inglese (sempre con poca fantasia e molta efficacia).

Per cui per cambiare il colore del bordo useremo la proprietà border-color, per cambiare lo spessore, cioè la larghezza, del bordo useremo la proprietà border-width, mentre possiamo anche cambiare lo stile della linea che verrà visualizzata, ad esempio utilizzando una linea continua, tratteggiata, a puntini o altro, utilizzando la proprietà border-style.

Ad esempio questa classe crea foto piccole, larghe 100px, con bordi verdi costituite da linee continue spesse 5px:

<style>

.foto-piccola {

width: 100px;

border-color: green;

border-width: 5px;

border-style: solid;

}

</style>

Risultato del codice sopra

La proprietà border-style può assumere una decina di valori ma solid, quello che definisce la linea continua del bordo solido, è decisamente quello più utile assieme a none, quello che definisce l'assenza di bordo.

Smussiamo gli angoli

A dipendenza dell'immagine potremmo anche volere che gli angoli siano arrotondati in modo da ammorbidire l'aspetto grafico dell'elemento.

Per questo abbiamo a disposizione un'altra proprietà legata ai bordi chiamata border-radius, raggio del bordo in inglese.

Questa proprietà ci potrà tornare molto utile anche quando vorremo applicare degli angoli arrotondati ad altri elementi, come i bottoni da cliccare per esempio.

Anche questa proprietà si misura in px e più grande è la misura più arrotondati saranno gli angoli.

Nel caso seguente, ad esempio, la nostra foto piccola avrà i bordi leggermente smussati

<style>

.foto-piccola{

width: 100px;

border-color: green;

border-width: 5px;

border-style: solid;

border-radius: 10px;

}

</style>

Risultato del codice sopra

Ma c'è un altro modo di specificare il valore del raggio del bordo che ci può permettere di creare delle immagini circolari, come quella di una foto di profilo dell'autore di un articolo ad esempio, ed è quello di usare una percentuale. Più precisamente di dare a border-radius il valore di 50%.

<style>

.foto-piccola {

width: 100px;

border-color: green;

border-width: 5px;

border-style: solid;

border-radius: 50%;

}

</style>

In questo modo avremo una foto piccola col bordo verde spesso 5 px e di forma rotonda.

Risultato del codice sopra (applicato alla stessa immagine di partenza ma in formato quadrato)

Bene, oggi abbiamo visto come curare l'immagine delle nostre immagini, per così dire, e un mattoncino alla volta stiamo mettendo assieme i pezzi che ci permetteranno di comprendere come funzionano i siti web sotto il cofano e come possiamo crearne a partire da zero.

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!!