I COLORI NEL WEB.

Presentazione sul tema: "I COLORI NEL WEB."— Transcript della presentazione:

1 I COLORI NEL WEB

2 E’ di grandissimo aiuto per il costruttore di siti web e dvd, conoscere i fondamenti percettivi della visione e della mescolanza dei colori per fornire agli utenti prodotti davvero utili e percettivamente gradevoli.

3 Il sistema esadecimale di codifica dei colori

4 Nel linguaggio HTML per indicare i valori RGB si utilizza il sistema di codifica esadecimale anziché quello decimale. I numeri esadecimali si basano su un sistema di numerazione in base 16 che comprende le cifre da 0 a 9 e da A a F.

5 Se paragonato al sistema di numerazione decimale, il sistema esadecimale ha un aspetto un po' strano poiché i numeri possono includere delle lettere. Questa piccola difficoltà non deve però scoraggiare. Tutto quello che serve è una stampa di riferimento, o meglio ancora, una pagina web che elenchi tutti i colori.

6 A questo proposito potete scaricare per tenerla sempre a portata di mano la tavolozza dei 216 colori sicuri per i browser. I colori sicuri sono i colori predefiniti utilizzati dai browser, che non possono essere modificati quando i sistemi degli utenti sono in modalità 256 colori

7 I codici esadecimali dei colori sono costituiti da numeri di sei cifre
I codici esadecimali dei colori sono costituiti da numeri di sei cifre. Le prime due cifre definiscono il livello del rosso, le seconde due cifre definiscono il livello del verde e la terza coppia di cifre definisce il livello del blu.

8 Questi valori si possono usare in vari elementi del codice Html, ma importante sapere che devono essere sempre racchiusi fra doppie virgolette e preceduti dal segno #.

9 Quando si scrive il codice Html è possibile specificare il nome dei colori al posto del valore esadecimale, ma non tutti i browser supportano questi nomi. In caso di dubbio è preferibile utilizzare i valori esadecimali.

10 Anche la visualizzazione dei colori può essere diversa a seconda del browser o del sistema operativo utilizzato. La stessa pagina (con gli stessi colori) potrebbe apparire diversa se visualizzata da un Pc o da un Mac, da un browser piuttosto che da un altro.

11 Questo è purtroppo un limite intrinseco delle tecnologie Web e non c'è modo di garantirsi un'assoluta fedeltà di riproduzione di colori.

12 La tabella seguente mostra i 16 nomi dei colori riconosciuti dalla maggior parte dei browser, che sono stati elencati nelle specifiche Html Nome del colore Codice Esadecimale Nome del colore Codice Esadecimale Aqua 00FFFF Navy Black Olive Blue 0000FF Purple Fucsia FF00FF Red FF0000 Gray Silver C0C0C0 Green Teal Lime 00FF00 White FFFFFF Maroon Yellow FFFF00

13 Colori primari, secondari e complementari

14 I colori si suddividono, in qualsiasi sintesi, in primari e secondari
I colori si suddividono, in qualsiasi sintesi, in primari e secondari. I colori primari sono: rosso, blu e giallo; i colori secondari sono: verde, viola e arancio.

15 I primari sono i colori che, come si suole dire, "non possono essere generati da altri". I secondari sono invece frutto di associazione fra parti uguali di due primari.

16 Da questa suddivisione otteniamo le coppie di complementari, ovvero le coppie composte da un primario e dal secondario ottenuto dalla mescolanza degli altri due.

17 Le coppie di colori complementari sono: - rosso e verde (verde = giallo + blu) - giallo e viola (viola = blu + rosso) - blu e arancio (arancio = giallo + rosso)

18 Colori caldi e colori freddi

19 La diapositiva seguente riassume la classificazione mettendo nel triangolo centrale i colori primari, nel cerchio i secondari e loro "sfumature" e contrassegna con le frecce e gli asterischi le coppie di complementari. Divide inoltre con una linea rossa i colori denominati normalmente "caldi" da quelli "freddi".

20

21 Cosa sono i colori Web safe?

22 I computer più vecchi hanno schede video e monitor in grado di visualizzare correttamente soltanto 256 colori. Questi 256 colori vengono gestiti diversamente dalle piattafome PC e Mac; a causa di queste differenze rimangono soltanto 216 colori comuni.

23 Se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da qualsiasi utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che visualizzano solo 256 colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori riportati nella tabella qui sotto, detti appunto colori "web safe".

24

25 Oggi, comunque, la stragrande maggioranza degli utenti ha computer che dispongono di una ampia quantità di ram video e di monitor moderni che consentono di visualizzare ben più di 256 colori.

26 Sintesi addittiva e sottrattiva:

27

28 Parlando di Web, è giusto considerare che i nostri lavori verranno nella maggior parte dei casi visualizzati su di un monitor e non letti su carta. Ci sono differenze fondamentali su come i vari media visualizzano i colori e vale la pena averne una minima conoscenza.

29 Per riprodurre nel modo più fedele possibile la gamma dei colori visibili in natura si ricorre normalmente alla miscelazione di alcune tinte di base:dalla loro combinazione si ottengono tutte le sfumature intermedie. Questa miscelazione si basa su due diverse tecniche o metodi:

30 Lo "spazio colore" (così si chiama la gamma dei colori visualizzabili) dei monitor è dato dalla combinazione di fasci di luce di colore differente (rosso, verde e blu) che colpiscono l’occhio. I monitor (e in generale molte delle apparecchiature elettroniche) usano la sintesi additiva RGB (Red - Green - Blue).

31 In pratica, ogni colore è identificato da tre valori (numeri): 1- il primo indica la "quantità" di rosso presente nel colore in questione; 2- il secondo la "quantità" di verde"; 3- il terzo la "quantità" di blu.

32 Ciascuno di questi tre valori può variare da 0 (minimo: componente non presente) a 255 (massimo: componente dominante). Ad esempio il nero corrisponde ai valori RGB 0, 0, 0 mentre il bianco corrisponde ai valori RGB 255, 255, 255.

33 La sintesi additiva è basata sull'emissione e dunque sull'addizione o sovrapposizione della luce.

34 Lo “spazio colore degli stampanti” è basato sull'assorbimento e dunque sulla sottrazione della luce da parte dei corpi fisici e quindi sulla sintesi sottrattiva.

35 La sintesi sottrattiva è basata sull'assorbimento e dunque sulla sottrazione della luce da parte dei corpi fisici. Questa tecnica si applica per la stampa dei colori su carta o su altri supporti. I colori di base in questo caso sono il ciano, il magenta, il giallo e il nero; la sintesi sottrattiva viene perciò indicata con la sigla CMYK (Cyan, Magenta, Yellow, blacK).

36 È importante notare inoltre che i colori CMYK risultano di solito meno brillanti di quelli RGB.

37 È interessante notare che, mentre nella sintesi additiva il colore ottenuto dalla combinazione di rosso, verde e blu è il bianco, nella sintesi sottrattiva il colore risultante dalla somma di ciano, magenta e giallo è il nero.

38 La ragione è che avendo ognuno dei colori primari della sintesi sottrattiva (ciano, magenta e giallo) il potere di assorbire una delle tre differenti parti della radiazione visibile, mescolandoli tutti e tre l'intero spettro visibile verrà assorbito e nessuna luce sarà riflessa verso l'osservatore.

39 La leggibilità del testo di un sito Web: tecniche pratiche

40 I colori complementari sono particolari in quanto, quando vengono avvicinati, essendo fra di loro in massimo contrasto, creano all’occhio un particolare effetto tremolio che rende difficilissima la messa a fuoco e affatica la vista, rendendo difficile la lettura. Eccone un esempio:

41

42 È chiaro quindi quanto sia importante ai fini della leggibilità di un testo scegliere bene il colore del testo e dello sfondo. Uno studio fatto da un’Università del Texas sulla leggibilità in funzione dei colori di testo e sfondo ha riportato i seguenti risultati:

43 Le coppie di parola/sfondo più leggibili erano:

44 GRIGIO

45 NERO

46 GIALLO

47 BLU

48 Le coppie di parola/sfondo meno leggibili erano:

49 VERDE

50 BLU

51 Per scegliere i colori dello sfondo e del testo è bene quindi affinare il proprio senso estetico basandosi su alcune elementari norme grafiche:

52 Come abbiamo già sottolineato, il testo nero su uno sfondo bianco (o grigio molto chiaro) produce il contrasto migliore dei caratteri e la migliore leggibilità. Vediamo altri esempi:

53 Gli sfondi neri sono assai meno leggibili di quelli bianchi, anche quando si utilizzano caratteri bianchi per ottenere il massimo contrasto.

54 Gli sfondi colorati possono funzionare come alternativa al grigio predefinito dei browser se i colori vengono mantenuti in tonalità molto attenuate e con una saturazione di colore bassa (i pastelli, i grigi chiari e le tonalità di marrone chiaro sono i più adatti).

55 L'abbinamento tra colori complementari ad esempio giallo e blu può essere considerato armonioso.

56 Viceversa, abbinare colori fortemente contrastati ad esempio rosso e blu tende ad affaticare l'occhio del lettore e andrebbe dunque evitato.

57 Come già anticipato, ricordate che i colori delle pagine Web, in quanto visualizzati su un monitor, sono mediamente più vividi e brillanti dei corrispettivi stampati su carta.

58 Quando scegliete i colori per i vostri lavori ponete attenzione anche al simbolismo che essi hanno sulla nostra psiche.

59 Ecco una tabella che associa i colori alle sensazioni o ai concetti:

60 Rosso: Passione, energia, amore, forza, azione
Rosso: Passione, energia, amore, forza, azione. Sangue, guerra, pericolo, aggressività. È uno dei colori detti "salienti", ovvero che sembrano avvicinarsi all'osservatore. Verde: Natura, primavera, fertilità, denaro, tenacia, prontezza. Inesperienza, invidia. Usato come simbolo di via libera (es.semaforo); è inteso come colore "giovane". Giallo: Sole, estate, oro, ottimismo, disponibilità, altruismo. Malattia, vigliaccheria, azzardo. Particolarmente visibile anche in situazioni limite (es. antinebbia). Blu: Stabilità, calma, unità, soddisfazione, armonia, fedeltà, cielo, mare Depressione, conservatorismo. Molto usato come colore nelle aziende date le sue caratteristiche positive. Bianco: Neve, purezza, innocenza, pace. Freddo, ospedaliero, ambiente sterile. Grigio: Intelligenza, dignità, maturità. Ombra, noia, depressione, anonimato. Nero: Potenza, formalità, profondità, stile. Cattiveria, timore, morte.

61 Particolare attenzione va quindi fatta per la scelta dei colori: se associate un colore che comunica un messaggio con un altro che simboleggia il concetto opposto potreste risultare poco convincenti, o anche indecisi.

62 È sempre consigliabile non usare troppi colori all'interno dello stesso layout, ed è sempre meglio, a parte casi eccezionali, evitare gli sfondi con immagini elaborate che diminuiscono drasticamente la leggibilità e affaticano inutilmente l'occhio.

63 Come abbiamo visto, è già difficile operare una scelta tra colore di primo piano e di sfondo, quando lo sfondo è costituito da un solo colore. Quando lo sfondo è un'immagine costituita da una trama complessa di colori, mantenere un contrasto sufficiente con il testo diventa ancora più complesso.

64 Per esempio, alcune zone dell'immagine di sfondo conservano un sufficiente livello di contrasto, altre zone no. La presenza di un'immagine sotto il testo distrae inoltre l'attenzione del lettore.

65 Un’altra importante raccomandazione, per garantire una buona leggibilità dei testi agli utenti, è quella di evitare assolutamente di inserire sfondi grafici compositi sotto i testi. Ecco alcuni esempi:

66

67

68 Fate scelte oculate per leggibilità e significato e preferite sempre la semplicità all’esagerazione e all’estro. Non sempre stupire a tutti i costi paga!