aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

I colori del Web

 

Il colore costituisce un elemento importante nelle pagine Web. Ci permette di aggiungere informazioni visuali alla pagina, differenziare vari tipi di testo, mettere in risalto i collegamenti ipertestuali, abbellire il documento e le tabelle con sfondi e con bordi che ne aumentino l'effetto estetico e ne facilitino la lettura. Esistono due modi fondamentali per inserirlo: creare un'immagine esterna alla pagina oppure sfruttare le funzioni intrinseche di HTML.

Il secondo produce pagine più leggere e più semplici da gestire e, mediante l'impiego dei fogli di stile, offre anche un buon livello di controllo sui risultati. Senza i CSS, invece, i risultati sono abbastanza poveri, soprattutto nella gestione del testo, e capita spesso di trovare, specie nei siti di vecchia concezione, l'uso d'immagini anche per rappresentare titoli e brani di testo, il che porta a pagine pesanti e molto scomode da aggiornare. Immaginatevi di correggere un refuso o modificare un testo contenuto un immagine: dovreste aprire un programma ad hoc (Photoshop, Flash o qualsiasi altro strumento sia stato usato per generare il testo-immagine) e trasformare l'immagine, anziché semplicemente intervenire direttamente sulla pagina HTML. Oggi, con la precisione tipografica consentita dai CSS, diventa non solo possibile, ma anche altamente consigliato, sfruttare al massimo gli elementi di colore prodotti in modo nativo dal browser.

Sono diversi i tag HTML che consentono d'impostare il colore per i propri elementi mediante l'uso di attributi come color (per il corpo dell'elemento), bgcolor (per gli sfondi) e bordercolor (per i bordi). In tutti i casi, i colori vanno espressi in due modi possibili: indicandoli per nome oppure mediante una notazione esadecimale. I CSS aggiungono come terza possibilità, consigliata, l'uso di una un notazione decimale o percentuale che indica direttamente i livelli di rosso, verde e blu da utilizzare nella composizione del colore finale.

Il primo metodo, quello dei nomi, è poco usato poiché prevede un numero limitato di colori, 16, di cui solo 8 appartengono alla Websafe palette che vedremo più avanti. Tale metodo, inoltre, usa nomi che sono mnemonici solo per in inglese, ma che sono poco comprensibili per un italiano.

I sedici colori con nome
Nome Traduzione Valore esadecimale Websafe
Reallywebsafe
Esempio
black nero #000000  
white bianco #FFFFFF  
red rosso #FF0000  
yellow giallo #FFFF00  
blue blu #0000FF  
aqua acqua #00FFFF  
fuchsia fucsia #FF00FF  
lime lime #00FF00  
silver argento #C0C0C0 No  
gray grigio #808080 No  
maroon marrone #800000 No  
purple porpora #800080No  
green verde #008000 No  
olive oliva #808000 No  
navy blu marino #000080 No  
teal germano #008080 No  

Questa tabella riunisce i 16 colori che possono essere indicato direttamente per nome in una pagina HTML. Abbiamo riunito in cima i colori che sono anche compatibili con la Websafe palette e con la Reallywebsafe palette (per un riferimento completo sui 16 colori predefiniti vedi l'indirizzo http://www.webreference.com/html/
reference/color/named.html
).

Esiste un ulteriore rischio nell'uso dei nomi per i colori. Microsoft ha definito una tavolozza estesa che contiene 140 colori, con nomi molto esotici come "darkslategray" (grigio lavagna scuro), "biscuit" (biscotto) o forestgreen (verde foresta), ma che includono anche i 16 colori di base. I nomi aggiuntivi di questa palette funzionano unicamente con Internet Explorer dalla versione 4.0 in avanti e non sono supportati da nessuno standard, perciò abituarsi a usare i nomi per i colori porta facilmente a produrre pagine incompatibili (per un elenco dei nomi particolari definiti da Microsoft vedi http://www.webreference.com/html/reference/
color/propcolor.html
e http://www.oreilly.com/catalog/
wdnut/excerpt/color_names.html
).

Il metodo basato sui valori esadecimali è invece il più comune perché utilizzabile direttamente dall'interno di un tag HTML e compatibile con qualsiasi browser. Basta indicare i valori RGB che vogliamo riprodurre per ottenere qualsiasi genere di tinta. Il risultato è una sequenza di sei cifre esadecimali come ad esempio FF0033 (rosso vivo), due per ciascuno dei tre colori: rosso, verde e blu. Questi colori primari, combinati sullo schermo, producono tutti i colori visibili.

Colori primari e numero di bit
Nel mondo dei computer, i colori scomposti in tre loro colori primari, rosso, verde e blu (Red, Green, Blue) che vanno combinati da loro in proporzioni variabili. Questi non corrispondono ai colori primari esistenti in natura, che sono invece rosso, giallo e blu (il verde in natura è una combinazione di giallo e blu), ma sono i tre colori producibili con uno schermo a fosfori. Ciascun punto dello schermo (pixel) contiene tre punti di fosforo di colore diverso, illuminati da tre differenti cannoni elettronici con intensità variabile. Tre punti completamente spenti ci danno un pixel nero, tre punti completamente accesi di danno un pixel bianco con tutte le gradazioni di grigio intermedie. Se modifichiamo l'intensità di un punto rispetto agli altri due avremo un colore. Negli schermi a cristalli liquidi il meccanismo è lo stesso, anche se viene prodotto in maniera più complessa.

I valori di questa intensità luminosa che, nella realtà sono continui, vengono suddivisi secondo una serie di valori numerici perché non c'è modo di riportare in un computer i toni a variazione continua percepibili dall'occhio. Bisogna necessariamente trasformarli in formato digitale e il numero di bit utilizzato per ciascun colore è direttamente proporzionale alla fedeltà rispetto alla variazione continua originale. Il minino consentito da tutte le schede grafiche in circolazione è 8 bit che produce 256 colori, appena sufficienti per visualizzare i vari tipi di finestre e pulsanti disponibili sullo schermo, ma non certo adatto per riprodurre disegni e fotografie. Si sale poi a 15 o 16 bit che ci danno rispettivamente 32.768 e 65.536 colori, idonei a una riproduzione abbastanza convincente delle immagini, ma comunque imperfetta. Solo con 24 bit, ossia 16 milioni di colori contemporanei, si raggiunge un risultato visivo tale da non distinguere a video la variazione tra i diversi toni e produrre una visualizzazione fedele, denominata in inglese true color.

Un personal computer non può spingersi oltre i sedici milioni di colori poiché vincolato dal modello RGB che definisce un massimo di 256 livelli (8 bit) per ciascuno dei suoi tre colori primari. Nei computer moderni che consentono di visualizzare 32 bit, gli 8 bit aggiuntivi sono in realtà utilizzati per la "trasparenza", utile per determinare la posizione di un oggetto in relazione agli altri e la relativa trasparenza degli strati sovrapposti quando si genera grafica tridimensionale a computer (giochi e CAD).

Il modo più naturale per indicare un colore sarebbe definirne la composizione percentuale nei vari colori primari: 100% di rosso e 100% di verde e 0% di blu produce il giallo. Questo metodo è stato infatti adottato nei fogli di stile che sono nati apposta per favorire la progettazione stilistica della pagina. Il secondo modo, un po' meno naturale, ma più preciso, consiste nell'indicare il valore decimale del corrispondente livello RGB da 0 a 255 (anch'esso possibile con i CSS). Nel caso del giallo visto prima questo sarebbe 255,255,0. Il terzo modo, più sintetico, ma decisamente innaturale è quello adottato da HTML che consiste nel trasformare in esadecimale il valore decimale del livello RGB. Per il giallo la numerazione esadecimale sarebbe: FF (255) FF (255) 00 (0).

I colori nei fogli di stile
I CSS permettono di specificare i colori in tutti i formati possibili: nome, esadecimale, decimale e percentuale. Prendiamo di nuovo l'esempio del giallo, ecco le variazioni possibili: { color: yellow } usando il nome convenzionale, { color: #FFFF00 } usando la notazione esadecimale comune ad HTML, { color: rgb(255,255,0) } usando i valori esatti decimali dei livelli RGB, {color: rgb(100%,100%,0%) } usando i valori percentuali di RGB. Tutti i quattro produrranno lo stesso effetto, ma le ultime due soluzioni sono quelle consigliate dal nuovo standard.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
1. Stile e struttura
  1. Markup fisici e logici
  2. Il deprecato tag font
  3. Gestire gli spazi nel testo
2. Gli standard dell'editoria sul Web
3. CSS e HTML 4.01
  1. Cosa si può fare coi fogli di stile
  2. Ereditarietà e innesco a cascata
  3. Proprietà di trasferimento dei parametri
  4. Regole di ereditarietà
  5. Quattro tipi di CSS
  6. Selettori di classe
4. I colori del Web
  1. Websafe palette
5. Gestire le immagini
6. Esercizi
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits