UNIVERSIT DEGLI STUDI DI BARI

FACOLT DI LETTERE E FILOSOFIA

CORSO DI PERFEZIONAMENTO IN CROMODIDATTICA

IL COLORE NELLE APPLICAZIONI AD INTERFACCIA GRAFICA

Relatori: Chiar.ma Prof. ssa M. SINATRA Dott. ssa A. Campanile a cura di: Dott. ssa Nunzia de Gennaro

ANNO ACCADEMICO 1997-1998

Indice
Premessa .......................................................................................... pag. 1

1. La percezione del colore ............................................................... pag. 2 1.1. Il colore nella fisica ............................................................. pag. 2

1.2. Il colore in fisiologia ............................................................ pag. 4 1.3. Il colore in psicologia .......................................................... 2. Informatica e colore ...................................................................... 2.1. Computer e scuola ............................................................... pag. 5 pag. 8 pag. 8

2.2. Il colore nelle applicazioni ad interfaccia grafica .................. pag. 12 3. Grafica a colori: programmi e strumenti ........................................ pag. 15 3.1. Grafica raster e grafica vettoriale ......................................... pag. 15 3.2. Propriet rappresentative della grafica ................................. pag. 17 3.3. Vantaggi comparativi ........................................................... pag. 18 3.4. Programmi di paint e di draw ........................................ pag. 19 3.5. Acquisizione di immagini ..................................................... pag. 21 3.6. Dispositivi di acquisizione: lo scanner .................................. pag. 21 3.7. Periferiche: monitor e stampanti ........................................... pag. 22 4. Colore negli ipertesti ..................................................................... pag. 23 4.1. Caratteristiche degli ipertesti ................................................ pag. 23 4.2. Realizzazione di un ipertesto per linsegnamento delleducazione stradale ...................................................... pag. 25 4.3. Considerazioni finali ............................................................ pag. 27 Bibliografia. ...................................................................................... pag. 28

Premessa

Lo scopo di questo lavoro quello di fornire una panoramica generale sulla percezione del colore e sullinfluenza di questultimo sullindividuo. In particolare, si analizzato lutilizzo del colore in campo informatico, con specifico riferimento alle applicazioni ad interfaccia grafica e alla loro importanza in ambito didattico. E stato, quindi, realizzato un prototipo di ipertesto a finalit didattica per l'insegnamento dell'educazione stradale, utilizzando come ambiente di sviluppo Asymetrix Toolbook 1.5. Per chiarire tali concetti ai non addetti ai lavori, si preferito far precedere la descrizione del lavoro ipertestuale realizzato, da una parte teorica relativa a: colore dal punto di vista fisico, fisiologico e psicologico; colore nelle applicazioni grafiche; programmi e strumenti per la grafica; cenni sugli ipertesti.

1. La percezione del colore

Il colore pu essere considerato uno degli elementi costitutivi del linguaggio visuale. Da qualche decennio esso oggetto di studio della fisica (onde elettromagnetiche, frequenze d'onda dei colori), della biologia (funzione biologica del colore nella natura), della fisiologia (meccanismo della visione del colore), della psicologia (significato espressivo e simbolico del colore).

1.1 Il colore in fisica

La percezione del colore una sensazione ottica prodotta da un qualsiasi corpo illuminato o emittente una luce. Nel primo caso, le radiazioni luminose emanate da una sorgente, colpiscono il corpo che, in proporzioni variabili, ne assorbe alcune e ne riflette altre. Da ci si pu dedurre che anche la natura della sorgente luminosa influenza la sensazione cromatica proveniente da questo corpo. Fra le radiazioni solo tre sono state definite come luci primarie, in quanto non possono essere ulteriormente scomposte, bens, in percentuali variabili, possono ricostruire qualsiasi tinta cromatica. Queste tre radiazioni sono quelle corrispondenti alla luce rossa, verde e blu che, proiettate insieme, ricreano la sensazione della luce bianca (sintesi additiva dei colori della luce). Prendiamo come esempio un foglio di carta bianca. Quando questo illuminato da una luce bianca, come per esempio quella proveniente dal sole, tutte le radiazioni incidenti vengono completamente riflesse e la sensazione cromatica , di conseguenza, quella del bianco. Questo avviene perch la natura del corpo stesso permette di riflettere qualsiasi radiazione incidente.

Infatti, se al posto di una luce bianca prendiamo la luce colorata e illuminiamo il nostro foglio di carta, la sensazione cromatica sar quella del colore della luce stessa. BGR R

Superficie bianca

Superficie bianca

In un corpo colorato invece, oltre alla natura della sorgente luminosa, si deve considerare anche la capacit dell'oggetto di filtrare la luce incidente, quindi di assorbire alcune radiazioni e di rifletterne altre. BGR BGR R BGR GR

Superficie nera

Superficie rossa

Superficie gialla

L'effetto del colore di un oggetto dipende, inoltre, dal materiale di cui costituita la superficie e dalla sua ruvidezza, dalla vicinanza dell'oggetto ad altri di diverso colore e dalla distanza dell'oggetto dalla sorgente di luce. La luce visibile fa parte di uno spettro di onde elettromagnetiche, di cui quelle percepibili dall'occhio umano, sotto forma di colore, corrispondono alle radiazioni di lunghezza d'onda compresa tra 380 e 760 nanometri (nm): il colore varia al variare della lunghezza d'onda. Le onde pi corte (380 nm) determinano la percezione del violetto, quelle pi lunghe (760 nm) la percezione del rosso. Oltre alla lunghezza d'onda, altre caratteristiche del colore sono la tonalit, che corrisponde ai nomi dei colori generici (rosso, verde, giallo, ecc.); la chiarezza, che rappresenta il grado di luminosit di un colore; la

purezza o saturazione, cio il colore allo stato puro, senza immissioni di bianco e nero.

1.2 Il colore in fisiologia

Dal punto di vista fisiologico, l'organo recettore degli stimoli visivi del mondo che ci circonda l'occhio, che traduce l'energia della luce in segnali nervosi comprensibili al cervello. La parte pi sensibile a tali segnali rappresentata dalla retina, formata dalle terminazioni del nervo ottico e costituita da vari strati di cellule e fibre nervose tra cui quello dei fotorecettori, coni e bastoncelli, incaricati rispettivamente della percezione dei colori e dell'intensit luminosa. Questo perch i coni, situati nella parte centrale della retina (fovea), si attivano in condizioni di alta luminosit, mentre i bastoncelli, situati nelle zone periferiche della retina, esercitano la loro azione in condizioni di bassa luminosit. Il percepire o meno il colore, quindi, non dipende direttamente dal grado di luminosit presente, ma dai differenti fotorecettori attivati in diverse condizioni di luminosit. Da ci si deduce che possibile vedere i colori di giorno ma non di sera perch solo i fotorecettori diurni (coni) sono in grado di percepire i colori. La sensibilit cromatica, ossia la possibilit di distinguere i vari colori dello spettro, stata classicamente spiegata con la teoria di YoungHelmholtz legata ai coni, nei quali sarebbero presenti meccanismi sensoriali con un massimo di sensibilit rispettivamente per il rosso, per il verde e per il blu; la sensazione globale sarebbe la risultante delle tre risposte allo stimolo colorato, costituito da tre stimoli componenti. Un'altra teoria sulla percezione del colore quella di Hering che presuppone l'esistenza di due sistemi di fotorecettori sensibili rispettivamente a due coppie di colori tra

loro antagonisti: rosso-verde e giallo-blu. Entrambe le teorie sono accettabili.

1.3 Il colore in psicologia

I colori influenzano profondamente la sfera emotiva suscitando emozioni sempre nuove a seconda dello stato d'animo, dell'et e dell'esperienza della persona. Ci che viene percepito dall'organo della vista come colore agisce in qualit di stimolo pi o meno gradevole sui nostri centri nervosi, determinando una serie di reazioni, a volte anche notevoli, ciascuna delle quali pu essere collegata ad un determinato colore. E' pertanto possibile realizzare una prima classificazione che tenga conto delle particolari sensazioni riferibili a ciascun colore: sensazione di caldo o di freddo colore colori caldi: rosso, arancione, giallo, rosa, marrone; colori freddi: azzurro, grigio, verde, turchese, blu, ametista. di distanza alcuni colori (caldi) avvicinano le cose, altri (freddi) le allontanano di spazio l'azzurro chiaro, il bianco ed i colori chiari in genere dilatano lo spazio, mentre i colori scuri lo restringono di eccitazione Il rosso stimola notevolmente il sistema nervoso, aumenta il battito cardiaco, suscita forti emozioni (aggressivit, passione, ...), ma pu essere anche

opprimente e stancante. Diversi animali reagiscono nervosamente e alcuni con violenza alla vista di questo colore (es. toro nelle corride). Si osserva che proprio a causa di questa azione eccitante, ed una recente indagine l'ha confermato, l'uso del colore rosso per i semafori potrebbe ritenersi poco appropriato. di attenzione Giallo, rosso e colori molto vivaci richiamano l'attenzione e gialli). di rilassamento il verde e il blu hanno un effetto calmante e riposante, e pertanto sono tra i colori pi indicati per ambienti di riposo. Il blu, in particolare, provoca il rilassamento pi profondo e trasmette un senso di appagamento e di infinita armonia, di ordine, di affetto e sicurezza; favorisce, inoltre, la meditazione ed evoca pace e tranquillit (mare calmo, cielo sereno). Il verde, colore dell'equilibrio per eccellenza, agisce anche da tranquillante emotivo (ad es. il verde della natura ) e trasmette un senso di stabilit, solidit, ma anche di spensieratezza (anni verdi o adolescenza) di allegria Arancione e giallo sono colori caldi e solari che suscitano ottimismo e gioia (es. una giornata di sole) di tristezza Viola e nero sono spesso associati a significati di lutto, malaugurio (il viola per la gente di teatro), pessimismo stimolano la curiosit (es. libri

di noia

il grigio spesso considerato scialbo, monotono, desolante, squallido (es. citt grigia)

Le sensazioni precedentemente descritte hanno un valore molto generalizzato in quanto riscontrabili nella maggioranza dei casi, salvo poche eccezioni. I valori che vengono attribuiti ai colori variano a seconda della modalit di impiego, dei rapporti con altri colori ed in particolare del grado di "civilizzazione" della societ. Non esistono delle regole fisse di interpretazione, per cui alcuni colori che, in certi contesti, hanno valenza negativa, in altri casi assumono un significato diverso. Ad esempio il colore nero va sempre pi perdendo la sua connotazione di lutto e malinconia, di buio e pessimismo in quanto pu indicare eleganza e ricercatezza; esso, inoltre, misterioso e intrigante perch in realt non esiste; sontuoso perch trattiene dentro di s tutti i colori; teatrale e romantico allo stesso tempo e nella storia del costume sempre stato simbolo di rottura, un andare controcorrente.

2. Informatica e colore

Da quando, per la prima volta, il computer entrato negli uffici o nelle case, relativamente all'hardware, non cambiato molto. L'aspetto del computer sempre lo stesso: una tastiera, una scatola, un monitor, una stampante. Per quel che riguarda i programmi, invece, si assistito ad una vera e propria rivoluzione concettuale. In passato, quando era diffuso il sistema operativo MS-DOS, all'accensione del computer l'utente si trovava di fronte ad una serie insistente di "bip" e una sequenza di parole incomprensibili, fino a che, su un noioso schermo nero a caratteri verdastri, non si formava la lettera "C" seguita da due punti, una barra e un trattino che lampeggiava senza sosta. Se si prova, oggi, ad accendere un computer con un sistema operativo ad interfaccia grafica (colori, finestre, icone, suoni), come se dai tempi del vecchio prompt fossero passati secoli, ere geologiche; e invece sono passati solo pochi anni. Grazie ai nuovi programmi, il computer di oggi comunica in modo pi simile al nostro, e noi riusciamo a comunicare con lui pi facilmente. Tale evoluzione, rappresentata dall'uso di applicazioni ad interfaccia grafica sempre pi amichevole, ha facilitato l'inserimento del computer anche all'interno della realt scolastica.

2.1 Computer e scuola

La scuola viene spesso criticata per l'apparente ritrosia che mostra verso l'introduzione delle innovazioni. Il computer, gi entrato nella scuola da qualche anno, ne un esempio rappresentativo. Non c' dubbio che il suo uso sottodimensionato rispetto al suo potenziale; d'altra parte la sua diffusione nei settori della societ cresciuta in maniera esponenziale. Naturalmente non vero che la scuola sia

restia all'introduzione di nuove tecnologie, ma ha il dovere di vagliarne le finalit ed i possibili utilizzi prima di diffonderne l'uso. Compito istituzionale della scuola sono lo sviluppo e la formazione della personalit del discente nel suo divenire, sulla scorta delle attitudini, delle potenzialit e delle capacit considerate nella loro unicit e peculiarit. L'utilizzo del computer nella scuola a fini didattici assume una determinante importanza. Il computer tanto pi utile quanto pi valida la qualit dei programmi di cui dotato. Con un programma adeguato, un computer pu avere la capacit di fare le cose pi disparate e divenire cos uno strumento molto utile per raggiungere gli obiettivi didattici fissati dall'insegnante. Negli ultimi vent'anni si pervenuti ad un tale grado di sviluppo dell'informatica proiettata nel mondo del lavoro da ipotizzare e rilevare, in base a sperimentazioni effettuate su basi empiriche e a ricerche, la sua importanza in ambito didattico. Le principali caratteristiche che rendono efficace l'uso del computer rivolto alla didattica sono le seguenti: Il computer, questa macchina che alcuni ritengono "meravigliosa" e ad altri invece pu incutere "soggezione", ha la capacit di memorizzare una quantit pressoch illimitata di dati in modo organizzato e disponibile sempre in modo immediato, ogni qual volta l'operatore gliene faccia richiesta. Anche l'uomo ha la capacit di memorizzare, nell'arco della sua vita, una notevole quantit di informazioni, ma non ha la capacit di "ripescare" dal magazzino della sua mente, in forma assoluta, tutto ci che ha memorizzato e tantomeno in modo sempre eguale e completo. Il computer pu effettuare con velocit straordinaria elaborazioni estremamente complesse e che l'uomo non sarebbe mai capace di fare entro gli stessi termini (archivi, biblioteche, ecc.).

 Grazie alla tecnica delle comunicazioni combinata con quella dell'informatica, il computer offre all'uomo la possibilit di accedere velocemente, sia in entrata che in uscita, ad archivi, banche dati, conferenze, gruppi di studio o semplicemente "semplici conversazioni" tramite computer distanti anche migliaia di chilometri tra loro (basti pensare al servizio "Internet"). Possiamo "insegnare" al computer, attraverso software anche molto elaborati, ci che noi vogliamo "impari" a fare. Uno tra gli aspetti pi significativi dell'uso del computer nella didattica quello della interattivit tra la macchina e l'utente. Tentare l'approccio a questa "disciplina" dovrebbe pertanto trovare d'accordo i sostenitori di qualsiasi metodo pedagogico/scientifico o metodologia didattico/educativa. Non si dovrebbe ignorare questa modalit di insegnamento, specie se si considera l'importanza di continue sperimentazioni per esaminare l'efficacia e convalidare l'efficienza prodotta dalla nuova opportunit di utilizzare il computer come "insegnante di concetti": utilizzare software adeguati pu favorire il processo di apprendimento. Per favorire la divulgazione e lo sviluppo della didattica tramite computer, la scuola come istituzione dovrebbe: mettere a disposizione i mezzi (computer e software); favorire l'informazione e l'aggiornamento degli insegnanti (corsi di aggiornamento, di alfabetizzazione informatica, di tirocinio pratico presso altre scuole o istituzioni che adottano gi queste modalit di insegnamento); sollecitare lo scambio di esperienze tra docenti di altre scuole o istituti in modo da favorire l'acquisizione di nuove conoscenze riguardo i percorsi effettuati e i risultati ottenuti.

L'insegnante dovrebbe: essere interessato ed aperto all'uso di nuove tecnologie nella didattica (computer, ausili informatici, software); partecipare ad incontri, dibattiti, convegni sul tema per acquisirne una buona conoscenza; acquisire la capacit di valutare la qualit di un software per decidere se e quale presenta i requisiti indispensabili agli obiettivi didattici prefissati; avere la capacit di operare con il computer: come si accende, si spegne, come si gestisce il software presente. Non deve saper programmare bene un computer ma saper programmare bene la didattica tramite computer. L'importanza che pu avere l'uso del computer, all'interno di un'attivit didattica ben organizzata, flessibile e consapevole, notevole. Quando un computer entra in classe, gi dal primo impatto la situazione risulta molto favorevole: tutti i bambini amano questo strumento in modo quasi incondizionato, al contrario di molti adulti per i quali esso spesso un amico da sfidare. Per i bambini tutto pi facile: sono cresciuti in una civilt pi tecnologica rispetto a quella dei loro educatori e per loro molto pi naturale muoversi tra telecomandi, videoregistratori, telecamere, videogiochi, computer. Di certo la presenza fisica del computer in classe non disturba, anzi favorisce immediatamente un'atmosfera gioiosa e molto motivante per tutti. Il computer potrebbe anche creare dei conflitti all'interno della classe, tra bambini che hanno gi un po' di dimestichezza all'uso (magari perch lo possiedono in casa) e quelli che lo "scoprono" per la prima volta con la conseguenza "che i bambini che ancora non sanno fare" potrebbero demotivarsi ad apprendere. Un'attivit didattica tramite computer,

programmata in modo corretto ed equilibrato, deve riuscire a superare queste

situazioni, che spesso hanno come effetto un'agguerrita competizione tra gli stessi componenti del gruppo-classe (io sono pi bravo di te..., tu non sai fare niente, io s...). L'ottimizzazione dei tempi di apprendimento, che sembra avvenire utilizzando il computer, permette di aumentare la quantit dei concetti appresi dal bambino: si pu imparare in minor tempo, quindi si possono insegnare al bambino pi concetti.

2.2 Il colore nelle applicazioni ad interfaccia grafica

Tra le attrattive del computer, che stimolano di pi la fantasia e l'interesse dell'allievo, la grafica a colori assieme all'animazione ed al suono, occupa un posto di primaria importanza. Una delle doti che un computer dovrebbe avere quella di essere user friendly, cio amichevole con chi lo usa. Il colloquio fra computer ed utente sempre meno legato alla tastiera e alle parole che con essa si possono comporre; l'uso di periferiche (es. mouse) che permettono di muoversi sullo schermo senza l'uso dei tasti ha reso il computer uno strumento di uso comune e di facile gestibilit. Nelle applicazioni ad interfaccia grafica, rilevante la scelta dei colori affinch tali applicazioni rispondano a requisiti quali: la piacevolezza grafica l'impatto visivo la volont di catturare l'attenzione e di non stancare l'utente Tale scelta, inoltre, dipende anche dal tipo di applicazione e dal target, ossia dall'utente a cui rivolta. Le applicazioni ad interfaccia grafica possono essere raggruppate in due grandi categorie: da un lato si hanno tutti quei programmi di uso comune, utili sia in casa che in ufficio (programmi di

videoscrittura, fogli elettronici, programmi di archiviazione, di grafica, ecc.); dall'altro, videogiochi, pagine Web e prodotti multimediali (enciclopedie, favole, ecc.). Nel primo caso, per lo sfondo di un'applicazione, preferibile utilizzare colori che non affaticano la vista e che, in generale, sono ritenuti riposanti; per il testo, invece, la scelta del colore legata a quella dello sfondo, rispetto al quale deve esistere un opportuno contrasto che ne migliora la leggibilit. Con uno sfondo scuro , pertanto, preferibile utilizzare colori chiari e neutri (es. bianco, grigio chiaro, ecc.); con uno sfondo chiaro, viceversa, si prediligono per il testo, colori scuri (es. blu, nero, ecc.). Nelle maggior parte delle applicazioni di questo tipo, si utilizzano, come colori predefiniti, il blu per le barre dei titoli, il bianco per lo sfondo, il grigio per i bottoni ed il nero per il testo; tali combinazioni di colore possono, tuttavia, essere modificate dall'utente in base al proprio gusto personale. Esistono, comunque, anche applicazioni che utilizzano colori diversi e non modificabili. Nel secondo caso, la scelta cromatica presuppone un'analisi pi attenta per quanto riguarda l'impatto visivo, che deve essere particolarmente accattivante e deve suscitare interesse e curiosit. A tale proposito, l'interfaccia pi indicata deve basarsi su una grafica a colori molto accurata, in cui il testo, se presente, pu essere di diversi colori, tipi e dimensioni; lo sfondo, pi o meno colorato, pu contenere pulsanti dalle forme anche strampalate, immagini ferme o mobili, filmati video ed effetti sonori. Questi elementi sicuramente arricchiscono ed abbelliscono, anche se, e questa l'altra faccia della medaglia, rischiano di appesantire troppo la videata sia per l'effetto disorientante che per la lentezza di caricamento. Ma questi inconvenienti possono essere ricompensati dalla bellezza di ci che vediamo o sentiamo. Nei videogiochi, ad esempio, si mira a creare un ambiente particolarmente "immersivo" e coinvolgente, grazie all'uso di effetti speciali impressionanti e

di una grafica superba e suggestiva in cui il sapiente utilizzo di migliaia di sfumature di colore contribuisce a rendere l'atmosfera quasi palpabile. Per quanto riguarda il colore, per giochi in cui sono simulati combattimenti e battaglie, si prediligono colori caldi e cupi (ad es. nero, rosso cupo, giallo, arancio), mentre in quelli in cui prevale la componente del mistero e della suspense, si utilizzano colori tendenzialmente scuri e freddi (ad es. viola, blu notte, nero). Nei giochi per bambini e nelle favole multimediali, invece, si scelgono generalmente colori brillanti e luminosi oppure colori pastello, a seconda che prevalga la componente avventurosa o fiabesca. Particolare attenzione va dedicata all'influenza e agli effetti causati da alcuni tipi di videogiochi. Ad esempio, i giochi che simulano guerre e combattimenti aumentano l'aggressivit, l'irritabilit e la tensione nervosa (si pensi all'effetto altamente eccitante e stimolante del colore rosso utilizzato prevalentemente in questo tipo di applicazioni). Certi effetti di luce, inoltre, come l'alternanza di luci dalla diversa intensit, possono far emergere patologie congenite come l'epilessia. Va precisato che i soggetti che ne rimangono vittime devono essere gi predisposti per natura, e non devono essere per forza impegnati in un videogioco: anche un normale televisore, fornendo stimoli luminosi o l'alternanza di luci in una galleria stradale, possono innescare il fenomeno. E necessario, quindi, tenere conto di tutte queste problematiche nella realizzazione di applicazioni ad interfaccia grafica a colori, affinch si ottenga un prodotto gradevole ed interessante.

3. Grafica a colori: applicazioni e strumenti

Dopo aver esaminato l'importanza del colore nelle applicazioni ad interfaccia grafica e la loro diffusione anche in ambito scolastico grazie alla facilit di utilizzo, si passa ad analizzare la grafica a colori da un punto di vista pi tecnico. In particolare si descriver come le immagini grafiche sono rappresentate all'interno di un supporto digitale, con quali programmi possono essere elaborate e dei dispositivi utilizzati per l'acquisizione, la visualizzazione e la stampa a colori.

3.1 Grafica raster e grafica vettoriale

La rappresentazione di immagini e disegni, genericamente denominata "grafica", pu essere organizzata in un supporto digitale secondo due tecniche differenti: grafica raster e grafica vettoriale. La grafica raster, detta anche bit-mapped, rappresenta le immagini o i disegni in una matrice come un insieme di punti, denominati pixel (PICture Element), i quali conservano un rapporto di corrispondenza uno-a-uno con il modello di punti dell'immagine. Il termine "raster" deriva dalla particolare tecnica di composizione dell'immagine su supporto visivo, a rastrello, ovvero per righe.

Se prendiamo un foglio a quadretti e ne anneriamo alcuni, otterremo un'immagine bit-mapped di tipo elementare dove il dettaglio del disegno sar tanto pi accurato quanto pi piccoli saranno i quadretti.

La risoluzione di un'immagine rappresenta il livello di dettaglio, ossia la dimensione del pixel, e viene abitualmente definita in punti per pollice (DPI, Dots Per Inch) dove a valore maggiore corrisponde un'immagine meglio definita. Il colore di un'immagine raster rappresenta il numero dei colori utilizzati per ogni singolo pixel. Il numero dei colori dipende dalla quantit di memoria (misurata in bit) assegnata a ciascun pixel. Si parla di immagini a 8, 16, 24, o 32 bit per pixel per esprimere immagini a 256, 65.536, 16.777.216 (16 Ml di colori), 4.294.967.296 colori. Poich ogni pixel composto da tre componenti di colore (Red, Green, Blue), in un'immagine a 24 bit per pixel si avranno 8 bit per ciascuna componente, cio 256 (28) sfumature di colore per ogni componente, che portano ad un totale di 16 Ml (256*256*256) di colori. La dimensione di un'immagine rappresenta il numero di punti in orizzontale e verticale. grafica vettoriale, invece, rappresenta le immagini e i disegni

La

attraverso una espressione matematica o "primitiva" grafica (line, box, circle, elipse, ecc.), che contiene i dati relativi alla forma, alla posizione ed al colore di ogni oggetto. Un cerchio sar rappresentato attraverso l'equazione della circonferenza con i valori numerici relativi al centro, al raggio e all'informazione relativa al colore del bordo e del riempimento. Per la rappresentazione di un quadrato, baster fornire le quattro coppie di numeri relativi alle posizioni dei vertici in coordinate cartesiane. Gli oggetti possono essere linee, punti, archi, cerchi, poligoni regolari o irregolari, pieni o vuoti. Qualsiasi disegno, anche un semplice scarabocchio, costruito in questo modo, cio usando la sua formula matematica che pu essere anche molto complessa.

Il termine "vettoriale" deriva dalla particolare tecnica di composizione del disegno sul supporto visivo attraverso vettori ovvero linee da punto a punto.

La grafica vettoriale usata soprattutto per disegnare, per costruire figure in due o tre dimensioni. Sono esempi di grafica vettoriale i programmi CAD, di disegno tecnico o di progettazione architettonica.

3.2 Propriet rappresentative della grafica

Si possono definire propriet rappresentative

per la grafica raster: Colore (numero di bit per pixel) Risoluzione (dimensione del pixel) Dimensione (orizzontale e verticale del disegno) per la grafica vettoriale: Colore (numero di bit per pixel) Spessore delle linee (nessuno, sottile, spesso, ecc.) Forma di tracciamento (continua, tratteggiata, ecc.) Riempimento (per le aree chiuse) Terminazioni (arrotondate, a spigoli)

3.3 Vantaggi comparativi

Il vantaggio principale della grafica vettoriale, rispetto alla grafica raster, dato dalla possibilit di modificare i disegni (scalare, ruotare, spostare, eliminare componenti, ecc.) mantenendone inalterata la qualit, poich tali operazioni sono trasformazioni matematiche su vettori. L'ingrandimento di un cerchio, ad esempio, verr eseguito dal programma di elaborazione andando a modificare il valore del raggio e/o le coordinate del centro nella formula matematica che lo descrive. L'immagine verr riformata per adattarsi alle nuove dimensioni e non subir alcun deterioramento. Le immagini raster, invece, non possono essere ingrandite senza perdita di qualit e questo perch raddoppiare le dimensioni del cerchio significa raddoppiare le dimensioni dei punti che lo compongono proprio come se lo si osservasse attraverso una lente di ingrandimento. Le variazioni su immagini raster possono riguardare solo la gestione dei colori, l'eliminazione o l'aggiunta di parti, la miscelazione di pi immagini ed effetti speciali di tipo visivo. Un'altra differenza sostanziale tra la grafica raster e vettoriale sta nel fatto che il file contenente un'immagine raster di dimensioni molto pi grandi di quello relativo alla stessa immagine in forma vettoriale. Infatti, mentre per le immagini vettoriali, semplici oggetti possono essere definiti con poche formule e con bassa occupazione di memoria, nel caso di immagini raster, almeno per le immagini monocromatiche, ogni punto deve essere dichiarato acceso o spento, bianco o nero, e quindi con grande occupazione di memoria, anche se si vuole definire una pagina completamente bianca. Dalle considerazioni fatte, le immagini vettoriali sembrano risultare pi vantaggiose: perch allora non usare sempre e solo le immagini vettoriali e

abbandonare per sempre quelle di tipo raster? Il motivo che tutte le immagini esistenti nella realt, come fotografie, diapositive, disegni su carta, ecc., vengono portate nell'elaboratore elettronico in formato bit-mapped. Inoltre, mentre sempre possibile trasformare un'immagine vettoriale in una raster, non sempre possibile o estremamente difficoltoso il processo inverso.

3.4 Programmi di "paint" e di "draw" I programmi di paint o pittorici consentono di creare o manipolare immagini di tipo raster utilizzando un insieme di strumenti. Tra gli strumenti base, comuni a tutti i software pittorici, troviamo la matita ed il pennello per disegnare, la gomma per cancellare, le forbici per ritagliare alcune parti di un'immagine, la manina per postare, lo spray con funzione di aerografo, i tracciatori geometrici per disegnare linee (curve o rette), quadrati o cerchi, l'editor di caratteri per poter scrivere con diversi fonts e stili, il barattolo di vernice per riversare un colore in una area chiusa. Le nuove applicazioni grafiche dispongono inoltre di una serie di effetti speciali quali la regolazione del colore, del contrasto, della luminosit, della tonalit, effetto movimento, arricciatura, increspatura, rilievo, rotazione, vortice, vento, puzzle, prospettiva, vetro, ecc. A differenza di quanto avviene con i programmi di disegno vettoriale, dove tutto quello che viene disegnato diventa un oggetto che, come tale, sar sempre modificabile in tutti i suoi parametri (forma, posizione, colori sia del contorno che del riempimento), nei pacchetti di paint si disegna direttamente con il colore e, una volta terminata l'operazione, non pi possibile

effettuare modifiche, se non cancellando e ridisegnando, n cambiare gli attributi del disegno in quanto esso viene interpretato come una serie di pixel e non diventa un oggetto. I principali pacchetti di tipo "paint" sono: Paint Shop Pro, Paintbrush, Corel Paint, Photoshop, ecc.. I programmi di draw, invece, consentono di creare o modificare una immagine di tipo vettoriale attraverso delle primitive grafiche come line, box, circle, ecc.. Gli strumenti messi a disposizione dell'utente sono identici a quelli di tutti gli altri pacchetti di grafica, compresi quelli di tipo bitmapped (la lente di ingrandimento, la matita per disegnare a mano libera o tracciare segmenti di retta, il rettangolo, l'ellisse, l'icona della modalit testo, il barattolo di vernice per le operazioni di riempimento colore), tranne che nell'editor dei nodi, che specifico dei programmi vettoriali. I nodi sono dei punti di controllo, rappresentati da quadratini, posizionati sul contorno di qualsiasi oggetto. Spostando un nodo lungo una curva, la curva cambia forma, angolo di curvatura, simmetria, ecc.

La filosofia dei programmi vettoriali quella di operare per "oggetti". Tutto quello che viene disegnato diventa un oggetto e come tale sar sempre modificabile in tutti i suoi parametri: forma, posizione, colori sia del contorno che del riempimento. I principali pacchetti di tipo "draw" sono: Corel Draw, AutoCAD, ecc..

3.5 Acquisizione di immagini

Le immagini grafiche raster possono essere ottenute per mezzo di: Scanner/Telecamera (acquisizione di fotografie) Programmi di "paint" (ad es. Paintbrush) Immagini pre-disegnate (Clip Art) Le immagini grafiche vettoriali possono essere ottenute per mezzo di: Programmi di "draw" (ad es. Corel Draw) disegni pre-confezionati (librerie grafiche)

3.6 Dispositivi di acquisizione: lo scanner Lo scanner lo strumento principale per effettuare la digitalizzazione. E' in genere disponibile in tre diversi formati: a piano fisso, in cui l'immagine da digitalizzare viene posta su un piano di vetro simile a quello delle fotocopiatrici; a trascinamento, in cui il foglio viene trascinato dallo scanner; manuale, simile ad un mouse, che viene mosso sull'immagine. A seconda dell'elettronica di controllo che alla base del funzionamento dello scanner, esso pu acquisire immagini in modo monocromatico, a pi livelli di grigio o a colori. In particolare in uno scanner a colori (come anche nei televisori), il metodo usato per la generazione dei colori si chiama "sintesi additiva" e si basa sulla generazione dei colori a partire dalla somma delle componenti dei tre colori rosso, verde e blu. Il colore degli oggetti dato dalla luce che riflettono: un oggetto blu assorbe tutti i colori, ma respinge il blu; un oggetto rosso respinge il rosso, e cos via. Se noi illuminiamo un oggetto con un particolare colore, esso rifletter una quantit

di luce diversa a seconda della propria colorazione. Se dotiamo lo scanner di tre lampade, una per colore, e scandiamo l'immagine tre volte (una per lampada) otteniamo come risultato tre file con la stessa immagine secondo i tre colori fondamentali. Ricomponendo i tre file in uno, otteniamo l'immagine a colori, secondo i principi della sintesi additiva. Un altro approccio prevede l'impiego di una sola lampada, alla quale vengono sovrapposti in sequenza tre filtri (sempre rosso, verde e blu).

3.7 Periferiche: monitor e stampanti

Per poter apprezzare la grafica a colori necessario disporre di strumenti hardware opportuni quali monitor a colori, scheda grafica e stampante a colori. I monitor vengono classificati in base alla risoluzione e al numero di colori che possono essere visualizzati; di norma, quanto pi elevata la risoluzione di un monitor, tanto maggiore il numero di colori che possono essere visualizzati. Per poter visualizzare i colori, i monitor combinano rosso, verde e blu a diverse intensit. Per la stampa a colori, le stampanti combinano invece ciano, giallo e magenta sovrapponendo i punti di colore in una grande variet di combinazioni con diverse quantit di inchiostro, in modo da creare virtualmente qualsiasi colore. Dato che i monitor e le stampanti utilizzano metodi completamente diversi per creare il colore, il conseguimento della perfetta corrispondenza tra immagine visualizzata ed immagine stampata pu essere molto difficile in alcuni casi.

4. Colore negli ipertesti

Dopo aver analizzato lutilizzo del colore in campo informatico, con particolare riferimento alle applicazioni grafiche e alla loro importanza in ambito didattico, si passa ad esaminare luso del colore negli ipertesti, di cui nel paragrafo successivo si d una breve descrizione. Naturalmente, nella realizzazione di ipertesti, valgono le stesse considerazioni fatte in precedenza per quanto riguarda la scelta del colore nelle applicazioni ad interfaccia grafica per garantire la piacevolezza grafica, un impatto visivo accattivante e per non stancare lutente.

4.1. Caratteristiche degli ipertesti Lipertesto un testo non lineare, ossia un documento che risponde a determinati requisiti di costruzione strutturata, creato in modo tale da poter offrire un collegamento tra un punto del testo e altri documenti o altri punti dello stesso documento, formando un insieme costruito logicamente. In altre parole, invece di leggere un testo elettronico normale in una struttura rigida, lineare e sequenziale, negli ipertesti si pu saltare facilmente da un punto allaltro, cercare informazioni, tornare indietro ad un argomento, ecc.; il tutto con la facilit e limmediatezza del click del mouse. Gli elementi collegati in un ipertesto si chiamano NODI, i collegamenti si chiamano LEGAMI (link). Se i nodi sono solo documenti testuali, allora lipertesto si dice puro; altrimenti, se oltre al testo, coesistono immagini grafiche, suoni o sequenze in movimento, allora lipertesto un ipermedia. I collegamenti (link) permettono di spostarsi o di navigare nelle informazioni dellipertesto, seguendo di volta in volta il percorso che in quel momento si ritiene pi interessante o pi opportuno. I link vengono rappresentati nei

nodi mediante oggetti particolari detti hot-spot (lett. punto caldo), cio pulsanti o parole calde (hot-word), che reagiscono ad alcuni eventi, come il click o il passaggio del mouse sullhot-spot, permettendo di interagire con lipertesto. Per distinguere le parole calde da quelle fredde sufficiente attribuire loro un diverso colore o sottolinearle: un click sulla parola potrebbe visualizzare, ad es., un riquadro che spiega il significato di quella parola o saltare ad un altro nodo dellipertesto. Per quanto riguarda il colore delle hot-word, si prediligono colori diversi e brillanti per distinguerli dal rimanente testo. La navigazione ipertestuale , generalmente, pi impegnativa della lettura tradizionale e comporta rischi di disorientamento e di sovraccarico cognitivo. Il disorientamento consiste nella sensazione di non sapere pi dove ci si trova; il sovraccarico cognitivo dovuto alleccesso di informazioni che si presentano contemporaneamente al lettore, che possono a volte confonderlo. Allo scopo di risolvere questo genere di problemi, gli ipertesti ben progettati sono dotati di una o pi mappe dei contenuti (dette anche mappe concettuali o ipertestuali), in forma grafica o in forma di indice, che rappresentano la struttura generale dellipertesto. Tali mappe sono accessibili da qualunque punto e permettono in qualsiasi momento di sapere dove ci si trova. Un ipertesto, inoltre, deve essere dotato di strumenti di navigazione, come ad esempio di un apposito comando che consente di rivedere le pagine consultate fino a quel momento, come pure di un altro comando per tornare al nodo iniziale. Volendo fare un paragone, si pensi ai sistemi di aiuto in linea (help) esistenti in ambiente Windows, i quali sono costituiti spesso da molti documenti uniti in un collegamento di tipo gerarchico o secondo altri schemi.

Un altro esempio rappresentato dal Web dove, per realizzare gli ipertesti si utilizza il linguaggio HTML (HyperText Markup Language) che prevede linserimento di istruzioni allinterno del testo. Partendo da un indice, si ha la possibilit di essere sparati al di fuori dei confini nazionali, allinterno degli archivi di una biblioteca, puntando direttamente e precisamente allarticolo che si sta cercando, senza dover risalire di alcun livello, da alcuna struttura. Web , infatti, la sistemazione intelligente delle capacit e della praticit dutilizzo degli ipertesti allinterno del gigantesco sistema informativo chiamato Internet. Nella progettazione di un ipertesto bisogna rispettare alcune regole quali: facilit di lettura e apprendimento, coerenza delle informazioni

indipendentemente dal percorso scelto, utilizzo di immagini e concetti significativi, eliminazione del problema del disorientamento fornendo una mappa concettuale, possibilit di letture multiple attraverso la scelta dei percorsi, possibilit di tornare allinizio di tutti percorsi. Negli ipertesti con finalit educative e didattiche, si deve inoltre tener conto delle caratteristiche del discente, si devono avere chiari gli obiettivi, mettere a punto un modello pedagogico, stabilire linterfaccia e la struttura dellapplicazione, definire il contenuto, scegliere il formato, ossia il mezzo per rappresentare il contenuto (testo, suoni, grafici, animazione, ecc.).

4.2. Realizzazione di un ipertesto per l'insegnamento dell'educazione stradale

E stato realizzato un prototipo di ipertesto a finalit didattica per l'insegnamento dell'educazione stradale, sviluppato con Asymetrix Toolbook 1.5, con lo scopo di facilitare la conoscenza della segnaletica stradale.

Lipertesto comprende due sezioni: una relativa alla descrizione dei vari segnali stradali e alla loro rappresentazione visiva; laltra, relativa alle esercitazioni, per verificare il livello di apprendimento. Poich un prodotto rivolto a bambini, appare semplice nella presentazione e nei contenuti. Per rendere lapplicazione pi amichevole, si pensato di inserire lassistente Fido, un cane instancabile che conosce la strada meglio della sua cuccia, per guidare e dare informazioni quando il bambino le richiede (spostando il mouse su Fido). Dopo essere stato accolto dal nostro simpatico istruttore e aver familiarizzato con linterfaccia grafica, lutente pu cominciare il corso selezionando liberamente gli argomenti proposti. Sullo schermo sono sempre presenti alcuni strumenti di navigazione, che permettono di spostarsi tra le varie pagine, o di tornare allindice (pulsante arcobaleno).

Lipertesto presenta, per tutte le pagine, uno sfondo blu, perch non stanca, a cui vengono sovrapposti elementi vari, quali pulsanti, campi di testo, immagini, dai colori opportunamente scelti. Per la descrizione dei vari segnali, il colore utilizzato per il testo il bianco; in particolare, per le indicazioni fornite da Fido, si utilizzano riquadri con sfondo giallo e testo blu. La scelta del colore giallo giustificata dal fatto che il giallo, pi di ogni altro colore, richiama lattenzione. Per quanto riguarda le due sezioni, si utilizzata, per entrambe, lo stesso schema strutturale con ununica variante legata alla scelta di un colore diverso per alcuni elementi presenti allinterno della pagina: nella parte relativa alla descrizione dei segnali stradali, tali elementi presentano un tono di blu, leggermente pi chiaro rispetto a quello dello sfondo, che risulta

essere riposante ed, inoltre, allevia la fatica, nellaparte relativa allesercitazione, invece, gli stessi elementi sono stati colorati di un verde bluastro rilassante che favorisce la concentrazione.

4.3 Considerazioni finali

Il prototipo di ipertesto sulleducazione stradale realizzato stato presentato ad alcuni bambini di et compresa tra i 7 e 11 anni per verificare quale impatto tale lavoro avesse su di loro. E emerso che dal punto di vista cromatico e grafico il prodotto risultato assai gradito, grazie anche alla presenza di un simpatico assistente, il cane Fido, che accompagna il bambino per tutto il percorso. Inoltre, la piacevolezza grafica ha reso il prodotto cos interessante che ogni bambino ha mostrato curiosit ed ha esaminato con attenzione tutte le pagine, dalla prima fino allultima, senza mai annoiarsi o distrarsi (nessuno ha mai scelto il pulsante EXIT prima dellultima pagina); al contrario, qualcuno ha mostrato un po di delusione per lesiguo numero di pagine, soprattutto nella parte dedicata alle esercitazioni. Nel complesso il risultato stato soddisfacente e apprezzabile e questo grazie soprattutto alla cura prestata nella realizzazione dellinterfaccia grafica, in cui si cercato di puntare ad un equilibrato e studiato uso del colore.

Bibliografia
L. L. Fontana - Comunicazione visiva e scuola - Franco Angeli Editore (1983)

Trisciuzzi - Informatica e alfabetizzazione. Luso del computer nella scuola elementare - Ed. Tecnodid (1984)

C. Ricci - Il Computer Insegna. - HD n.68, Quaderni della Lega del Filo dOro (1995).

M. Giampieri - Didattica e computer: istruzioni per un utilizzo efficace. - HD n.68 (1995).

V. Badii, F. Leonetti - Costruire ipertesti. Guida didattica alluso di toolbook. Garamond, Roma (1995);

R. Boschin - HTML. Creare pagine WWW con stile - Ed. Apogeo (1995)

AA. VV. - Computer no problem: dalla teoria alla pratica - Suppl.ti a La Repubblica (1996)

AA. VV. - Computer valley - Suppl.ti a La Repubblica (1998)

AA. VV. - PC Interactive - Ed. Mondadori Informatica (suppl. a PC Professionale n. 74 - giugno 97)

AA. VV. - PC Professionale - Ed. Mondadori Informatica (marzo e maggio 98)