I colori e i formati immagini per il web

Il sistema esadecimale e il modello RGB

Il sistema esadecimale è composto da 16 cifre, queste possono assumere valore da 0 a 9 più le lettere da "A" a "F". Nel web i colori vengono rappresentati utilizzando il sistema esadecimale, in quanto utilizza un numero minore di cifre rispetto a quello decimale e quindi permette un risparmio della memoria del computer. 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. I codici devono essere sempre preceduti dal segno #. (Es. il colore grigio in esadecimale è “#808080” mentre in decimale “128, 128, 128”). Questo è il cosidetto modello RGB (Red, Green, Blu), chiamato così perché i tre colori primari sono appunto rosso, verde e blu, sommando i quali vengono prodotti gli altri colori. Tra questi i principali sono il bianco (#FFFFFF), il nero (#000000), il giallo (#FFFF00), il celeste (#00FFFF), il verde (#00FF00), il rosso (#FF0000), il blu (#0000FF), ecc.

I colori Web-Safe

I colori web-safe sono quelli che vengono visualizzati allo stesso modo nei vari Browser e su entrambe le piattaforme Windows e Macintosh nella modalità a 256 colori (8-bit). Per convenzione, esistono 216 colori comuni e ogni valore esadecimale che combina le coppie 00, 33, 66, 99, CC e FF rappresenta un colore web-safe.
Quando comparvero i primi browser i computer visualizzavano solo 265 colori. Oggi, invece, i computer visualizzano migliaia o milioni di colori e le ragioni per utilizzare soltanto i colori web-safe sono notevolmente diminuite se si sviluppa un sito destinato a utenti provvisti di computer moderni. L'uso dei colori web-safe oggi è giustificato dalla necessità di una compatibilità all’indietro, cioè di rendere accessibili i siti anche a chi dispone di computer obsoleti, e dal fatto che adesso i siti possono essere visualizzati anche da altri dispositivi o “user agents” come i telefoni o palmari, molti dei quali dispongono solo di 256 colori.

I formati delle immagini web

I formati (cioè i metodi di salvataggio elettronico) utilizzati nel web sono molti ma i principali sono:
GIF, JPEG, PNG, e BMP.

- GIF: Il formato GIF (Graphics Intechange Format) è un formato molto utilizzato nel web. Supporta un massimo di 256 colori, permette di realizzare immagini in movimento e può avere il colore “trasparente”. È utilizzato soprattutto per creare banner, loghi, scritte e pulsanti, in quanto indicato per immagini con pochi colori o molto estese di un unico colore.
- JPEG: Il formato JPEG (Joint Photograpix Expert Group) è un formato ideale per la rappresentazione di immagini e fotografie particolarmente ricche di colori. E' in grado di comprimere molto i dati (risparmiando spazio in memoria), senza perdere eccessivamente la qualità dell' immagine.
- PNG: Il formato PNG (Portable Network Graphics) non ha ancora preso piede in maniera definitiva, ma in teoria potrebbe sostituire sia GIF sia JPEG senza rimpianti. Supporta fino a 16 milioni di colori, può avere la trasparenza, ma non può essere utilizzato per creare immagini animate. È un formato più pesante in termini di KB rispetto a JPEG ma mantiene una qualità delle immagini migliore.
- BMP: Nel formato BMP (Bit MaP) tutte le informazioni vengono raccolte in un file dove, per ogni pixel, viene descritto il colore. È in grado di visualizzare fino a 16,8 milioni di colori.
La scelta del formato in cui salvare un’immagine acquisita da scanner dipende dalle caratteristiche dell’immagine stessa. Se è una foto o un’immagine ricca di colori il formato adatto in cui salvarla sarà JPEG, se invece ha pochi colori è più indicato salvarla in GIF o PNG.

Sitografia:

- http://www.gdesign.it/pages/principi/colori/codifica.php
- http://livedocs.macromedia.com/dreamweaver/8_it/using/13_page5.htm
- http://www.shinynews.it/usability/0904-immagini.shtml

Information Architecture

Il termine “Information Architecture”(Architettura dell’informazione) fu coniato da Richard Saul Wurman nel 1975 e si riferisce alla struttura e all’organizzazione di un sito e a come le sue pagine si relazionino tra di loro. L'architettura dell'informazione si occupa di organizzare, categorizzare e creare gli schemi di navigazione all'interno di un sistema informativo, facilitare il reperimento e la gestione delle informazioni da parte degli utenti e disegnare la struttura dello spazio informativo in modo da facilitare eventuali operazioni e l'accesso ai contenuti..
Per delineare l’architettura di un sito web è necessario raccogliere tutto il materiale di cui si è in possesso e organizzarlo secondo una struttura che aiuti l’utente a navigare efficientemente.

Il processo dell’architettura dell’informazione si divide in quattro fasi:

- Discovery: È essenziale comprendere il contesto, gli obiettivi e il target del sito per iniziare a delineare una strategia n modo da mettere i primi punti fermi al progetto. Per fare tutto ciò è necessario partire da un'attenta analisi del cliente, del mercato in cui opera, della sua struttura aziendale, della comunicazione.

- Analysis: In questa fase si approfondiscono i temi accennati nella fase di Discovery partendo con l'individuazione del profilo degli utenti. Per fare questo si utilizzano interviste, questionari, focus group con l'obiettivo di sviluppare una solida conoscenza degli utenti.

- Architecture: In questa fase si parte con la definizione del piano generale dei contenuti Avendo una panoramica completa dei contenuti è possibile valutare se creare una loro categorizzazione e quindi procedere al labeling, cioè al trovare al nome alle varie cose del sito (menù, link o qualsiasi cosa funga da etichetta). Una volta disponibile il piano dei contenuti è possibile creare la struttura del sito, andando a organizzare sezioni e sottosezioni. Successivamente si passerà a creare il sistema di navigazione di un sito, fondato sulla struttura gerarchica dei contenuti.

- Develop: In quest’ultima fase si ci occupa della definizione di tutti gli elementi di dettaglio che ancora mancano, della verifica e test dei componenti realizzati e della finalizzazione del progetto.

Sitografia:

- http://www.lettere.unipa.it/lxweb/rol/Information%20architecture.pdf
- http://webdesign.html.it/articoli/leggi/236/quattro-fasi-per-linformation-architecture/1/
- http://www.informationarchitecture.it/struemet.shtml