il linguaggio Css, i colori, accenni preliminari.

Corso html 5.
Di Roberto Abutzu.
`***********`
Undicesima parte: il linguaggio Css, i colori, accenni preliminari.
`**********`
I colori, accenni preliminari.
Nella parte precedente, volendo assegnare un colore allo sfondo del nostro
sito, abbiamo inserito un codice, una indicazione di stile, formato da un
cancelletto e altri sei caratteri. Stavamo lavorando nel file: template.css
e, dopo il commento, abbiamo inserito: ``body {background-color:
#F0FFFF; }``
Questa è una delle notazioni che abbiamo a disposizione per indicare i
colori di un elemento di una pagina web. Ne esistono anche altri, tra cui:
- Scrivere il nome in inglese, per esempio, red per rosso, green per verde,
black per nero, ecc, in sostanza i sedici colori in inglese.
-Utilizzare il metodo chiamato RGB.
Il discorso che affronteremo noi è quello che ho già accennato nella parte
precedente e, precisamente, si tratta del sistema esadecimale.
Come funziona?
Sono 6 caratteri consecutivi che possono essere numeri o lettere e questi 6
caratteri vengono suddivisi in coppie. Lavorando insieme indicano:
- Il primo ed il secondo sono la gradazione del colore rosso.
- il terzo ed il quarto carattere sono la gradazione del verde.
- Il quinto ed il sesto sono la gradazione del blu.
La Sigla RGB, infatti, indica i colori Red (rosso), Green (verde) e Blue
(blu).
Nell'indicazione dei colori col sistema RGB, nei Css, invece dei caratteri
alfanumerici, vengono inserite le percentuali del singolo colore.
Il sistema esadecimale e il sistema RGB, anche se sono simili, sono scritti
nel codice in maniera differente. Lo vedremo in seguito e per ora diamo una
leggera spiegazione dei colori con la notazione esadecimale. Anche questi
lavorano con Red, Green, Blue, quindi Rosso, Verde e blu. I caratteri,
numeri e lettere, nel codice esadecimale, aumentando o diminuendo, aumentano
la gradazione dei tre colori, creando poi tutti i colori e le loro
sfumature.
L'unità di misura parte dallo zero e fino al nove, poi continua dalla
lettera A e fino alla lettera F. Quindi, da zero ad effe. Le lettere vanno
sempre scritte in maiuscolo. Partiamo con gli esempi che in parte
chiariscono la teoria.
``#000000``, corrisponde al nero. Lo zero è il valore più basso.
``#FFFFFF``, corrisponde al Bianco. La lettera F, che và scritta sempre
maiuscola, indica il valore più alto.
Altri esempi:
``#FF0000``, indicherà il colore Rosso.
``#00FF00``, indicherà il colore verde.
``#0000FF``, indicherà il colore Blu.
Utilizzando lo screen reader Jaws, premendo Insert + 5 della tastiera
estesa, vi viene vocalizzato il colore del carattere e dello sfondo, per
esempio, nero su bianco. Purtroppo non sempre funziona questa
vocalizzazione. A volte può essere necessario aggiornare con Insert + escape
prima di richiedere il colore sia del carattere che dello sfondo.
Per chi utilizza altri screen reader, verificate nella guida del vostro
programma il comando per la vocalizzazione dei colori di carattere e sfondo.
Vi consiglio di provare a sostituire il codice del colore nel vostro
Template.css e verificare nella Index come varia lo sfondo.
Come già detto, in rete esistono vari siti per recuperare le varie
combinazioni e vi rimando alla rete per questa ricerca. Le combinazioni sono
migliaia e non potrei riportarle tutte. Vi consiglio comunque di visitare
questa pagina dove potrete trovare chiarimenti e vari colori con il codice
corretto: http://it.wikipedia.org/wiki/Lista_dei_colori
Per utilizzare l'indicazione dei colori con il sistema RGB bisogna indicare
la percentuale che si desidera per ogni colore, separando tale percentuale
da una virgola e uno spazio. Un paio di esempi:
``rgb(100%, 0%, 0%)``
Questo è un esempio che indica il colore rosso.
Per far capire meglio, riporto tutta la stringa che avevamo precedentemente
inserito nel file Template, sostituendo la notazione esadecimale con quella
RGB.
``body {background-color: rgb(0%, 100%, 0%); }``
Notate che ho azzerato il rosso e il blu, dando il valore massimo, 100%, al
verde. Dopo la proprietà, la stringa che indica il colore del nostro sfondo,
si inseriscono i due punti e uno spazio. Poi l'indicazione rgb e
successivamente, all'interno delle parentesi tonde, i valori in percentuale
separati da una virgola. Dopo la chiusura della parentesi tonda, il punto e
virgola, uno spazio e chiudiamo la parentesi graffa.
Provate a modificare le percentuali e applicare come esercizio queste
percentuali allo sfondo. Potete anche variare a vostro piacimento e
verificarne poi il risultato, usando sulla pagina aperta con Internet
Explorer, il comando di Jaws insert più 5 della tastiera estesa.
Possiamo applicare queste nozioni anche ai vari elementi di una pagina web,
quindi, anche alle pagine html del nostro sito. Facciamo un altro esempio
che servirà poi per fare esercitazioni, mentre costruiamo il sito.
Apriamo il file style.css ed iniziamo a scrivere, anche in questo file,
qualche dato di formattazione. All'inizio inseriamo la data come indicato
precedentemente, inserendo i codici dei commenti, barra e asterisco
all'inizio, e, asterisco e barra alla fine del commento.
Nota bene, come già spiegato nella parte precedente, nei file css, se non si
inseriscono i commenti mettendo una barra seguita dall'asterisco all'inizio,
e un asterisco seguito dalla barra alla fine del commento, il css non
funziona, dando anche errore di codice quando si verifica il codice con i
validatori che si possono usare.
Una volta che abbiamo inserito la data come commento, inseriamo il seguente
codice :
``h1 {color: rgb(100%, 0%, 0%); }``
Salviamo le modifiche e apriamo il nostro file Index.html, andando a
verificare che le intestazioni h1 siano realmente rosse.
Nota importante: ogni volta che effettuate una modifica al codice, sia a
quello html, sia a quello Css, quando aprite il file index.html, aggiornate
sempre la pagina con f5 prima di verificare le modifiche effettuate, per
evitare di visualizzare la pagina in memoria e non quella fisicamente
modificata. Infatti, si può verificare che il computer mantenga il file
temporaneo, facendovi visualizzare la pagina precedente alla modifica
eseguita.
Premendo F5, siete certi che questo non può accadere, perché si aggiorna la
visualizzazione e il browser ricarica la pagina nuovamente, anche se si
rende conto che è già in memoria.
Per fare esercitazioni, provate ad effettuare il cambio dei colori per tutte
le intestazioni, o per altri elementi della nostra index. Volendo, potete
anche dare un colore diverso ad ogni livello di intestazione. Per questi
esercizi, come già consigliato in precedenza, vi consiglio di utilizzare
magari una copia del vostro sito. L'importante è di avere sempre una copia
del sito originale del corso in linea con le modifiche eseguite nelle
lezioni, tanto, avrete in futuro tutto il tempo per applicare ai vostri siti
tutte le personalizzazioni che vorrete.
Nota importante: anche se sono certo che ci sono delle persone alle quali
certi comportamenti sono ritenuti lesivi della propria personalità e non le
accettano, questo è uno di quei casi per i quali è inutile farsi venire i
mal di pancia, perché senza la vista l'aiuto di una persona vedente non
guasta mai in fase di verifica. Inoltre, è sempre buona norma far visitare
il nostro sito a più persone prima di metterlo visibile a tutti. Sempre
meglio avere più opinioni e a volte, magari è necessario fare una media per
un buon risultato.
Per quanto possa sembrare sbagliato, il sito non deve piacere a chi lo crea,
ma a chi lo visita. Questo concetto vale sia per la disposizione dei colori,
ma anche per la struttura stessa del sito. Infatti, un sito viene giudicato,
secondo le indicazioni del W3c, nei primi secondi della sua apertura. Se
create siti disordinati o con colori sgradevoli, il sito verrà richiuso e
mai più riaperto da chi avrà questa cattiva prima impressione. Il cercare di
colpire l'utente con colori troppo vivaci, o con troppi effetti speciali,
non solo può avere esattamente l'effetto contrario a quello che si aspetta
il programmatore, ma crea anche, per gli ipovedenti e gli anziani, un
problema di fruizione dei contenuti, con la sgradita sorpresa, se fatto
analizzare da persone competenti, di aver realizzato un sito inaccessibile
alle persone che vedono male. Certamente non sarebbe una bella cosa Se un
cieco assoluto creasse un problema di questo genere, pensateci!
Riassumendo, è importante che voi vi rivolgiate a più persone per avere
opinioni realistiche sullo stato dei vostri risultati. Non me ne vogliate,
ma mettiamoci bene in mente che il web nasce per le persone vedenti e tale
rimane. A noi la possibilità e la capacità di farne anche uno strumento
nostro, ma senza mai pretendere lo stravolgimento della rete. Sta a noi, non
solo pretendere l'accessibilità quando i siti li costruiscono gli altri, ma
anche saper costruire in modo accessibile il sito quando a costruirlo siamo
noi con le nostre mani.
Le indicazioni sulla notazione dei colori nei file css, è volutamente
ridotta allo stretto necessario solo per iniziare ad operare. Nelle lezioni
più avanti di questo corso, spiegheremo altri concetti e abbreviazioni del
codice. Accontentiamoci per ora di quello che abbiamo visto, perché con
queste poche nozioni, avete ciò che serve per inserire tutti i colori in un
sito web.
Vi rimando alla prossima lezione dove vedremo le indicazioni dello stile a
seconda dello stato dell'elemento. Esattamente vedremo i link visitati, non
visitati, col puntatore sopra e nel momento della sua attivazione. In
pratica, vedremo come si imposta il colore di un link in funzione di come
cambia il suo stato.
`***********`
Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu <[email protected]>`_