TECNICHE GRAFICHE: elementi di progettazione 18 Elementi di

Elementi di progettazione di un sito web
Lo scopo del web designer è quello di rendere accessibile il proprio sito al maggior
numero possibile di utenti, alla luce di questo è importantissimo tenere in considerazione
alcuni ma basilari principi che è bene osservare in fase di progettazione.
Schematicamente possono essere così riassunti:
•
•
•
•
•
•
risoluzione del monitor
tipi di browser
velocità di connessione
caratteri (fonts)
colori
formati grafici
Risoluzione del monitor
Questo è probabilmente il parametro più importante da tenere presente.
Innanzitutto per risoluzione del monitor, si intende esprimere quanti pixel ci sono sia in
orizzontale che in verticale all’interno dello schermo di un p.c.
Ovviamente questo è al fuori del controllo del progettista, il quale però deve fare in modo
che tutti gli utenti finali, possano visualizzare nel miglior modo possibile il sito realizzato.
Attualmente le risoluzioni più utilizzate sono tre:
640x480 (quasi totalmente in disuso) – 800x600 - 1024x768 pixels.
Questi valori vengono spesso confusi con i pollici, che invece indicano la lunghezza della
diagonale dello schermo.
Al fine di permettere una buona visualizzazione, è bene progettare il sito con la
risoluzione di gran lunga più diffusa che è 800x600.
In questo modo chi ha un monitor con una risoluzione maggiore vedrà il sito solo un po’
più piccolo, al contrario se avessimo usato una risoluzione 1024x768, avremmo costretto
chi ha una risoluzione minore a muoversi con le barre di scorrimento (come si dice in
gergo “scrollare”) oltre che in verticale, anche in orizzontale.
Teniamo presente che lo scrolling verticale è normale per permettere di scorrere tutta la
pagina, al contrario lo scrolling orizzontale è una pratica poco usata e ancor meno
gradita, salvo che rientri nelle intenzioni del progettista.
Tipi di Browser
Questo è un parametro che riporta alla famosa “guerra dei browser”, ossia Microsoft
contro Netscape.
Pur parlando lo stesso linguaggio che è l’html, lo interpretano in modi differenti,
possiamo stare certi che il nostro sito non si vedrà nello stesso modo in entrambi i
browser, per ovviare a questo inconveniente, è bene testare ogni modifica apportata sia
in Explorer che in Netscape.
Certo è un lavoro lungo ma necessario.
TECNICHE GRAFICHE: elementi di progettazione
18
Un consiglio è quello di non usare le specifiche dell’html dell’ultima versione (attualmente
la 4.0), ma quelle della release precedente (3.2), così si è sicuri che anche i browser più
datati visualizzino in modo corretto.
Velocità di connessione
Ecco un altro tasto dolente, purtroppo le nostre città non sono ancora cablate come
quelle americane, e le velocità di connessione dipendono da modem analogici, e nelle
migliori ipotesi da linee digitali, ma ancora piuttosto costose.
Questo parametro condiziona le dimensioni in peso delle pagine che compongono il sito.
A tal proposito una pagina non dovrebbe pesare più di 50-70 kb, immagini comprese, per
permettere uno scaricamento in tempi accettabili, cioè circa 20-25 secondi.
NOTA: da quanto finora detto, si capisce l’importanza di testare il sito prima della
pubblicazione definitiva, perciò sarebbe buona regola avere un gruppo di amici con
sistemi operativi, browser e connessioni differenti, che possano verificare che il sito sia
visibile da tutti nel miglior modo possibile.
Caratteri (fonts)
I caratteri si dividono in due categorie, i serif (con grazie) e i sans serif (senza grazie).
Alla categoria serif appartiene il noto Times new roman, mentre gli esponenti di spicco
dei sans serif sono Arial e Verdana.
Il Verdana è stato studiato appositamente per internet, infatti è il carattere più leggibile
sui monitor.
In una pagina web è bene usare due, al massimo tre tipi di caratteri diversi, questo per
distinguere i vari blocchi delle informazioni che si vogliono dare.
Ad esempio un titolo può essere scritto con un Times, mentre il corpo del testo
sicuramente con un Verdana.
Seppure questi due font siano installati su tutti i p.c., è bene caricarne una copia sul
server, per permettere a chi non li avesse di visualizzare il testo correttamente.
Se si vogliono usare font particolari, è buona norma destinarli a parti di menù o di
sezioni, e trasformarli in immagini, in questo modo si elimina il problema del caricamento
e della visualizzazione del carattere.
Anche la larghezza del testo ha la sua importanza, quindi mediamente non si dovrebbero
superare i 60 caratteri per riga, che corrispondono ad una decina di parole.
Per quanto riguarda l’allineamento del testo, la giustificazione a sinistra è la soluzione
ottimale, in quanto non costringe l’occhio a cercare l’inizio della riga e inoltre crea un
effetto ottico di movimento, che nelle pagine web è sempre gradito.
TECNICHE GRAFICHE: elementi di progettazione
19
Colori per il web
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:
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).
La sintesi additiva, basata sull'emissione e dunque sull'addizione o sovrapposizione
della luce grazie a dispositivo di proiezione.
Questa tecnica si applica per la visualizzazione dei colori su schermi e monitor.
I colori di base in questo caso sono il rosso, il verde e il blu; la sintesi additiva viene
perciò indicata con la sigla RGB (Red, Green, Blue).
Poiché le pagine Web hanno come applicazione principale la visualizzazione sui monitor, il
metodo di riferimento per la gestione dei colori è la sintesi additiva (RGB).
Ogni possibile tonalità di colore è definita da una combinazione di valori delle tre
componenti di base: rosso, verde e blu.
In pratica, ogni colore è identificato da tre valori (numeri):
il primo indica la "quantità" di rosso presente nel colore in questione;
il secondo la "quantità" di verde";
il terzo la "quantità" di blu.
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, il bianco corrisponde ai valori RGB
255, 255, 255.
Vedremo nella pratica che i colori saranno codificati in forma esadecimale, che è il
formato richiesto dall’HTML, quindi al nero e al bianco corrispondono rispettivamente i
codici esadecimali #000000 e #FFFFFF.
I numeri esadecimali si basano su un sistema di numerazione in base 16 che comprende
le cifre da0 a 9 e da A a F.
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, e la sequenza alfanumerica
deve essere preceduta dal simbolo di cancelletto #.
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
P.c. o da un Mac, da un browser piuttosto che da un altro.
Una soluzione per ovviare a questo inconveniente è quella di utilizzare una tavolozza
colori chiamata WEB SAFE (colori sicuri per il web), che comprende 256 colori,
riconosciuta da tutti i browser e dai differenti sistemi operativi.
TECNICHE GRAFICHE: elementi di progettazione
20
Formati grafici
Quando si progetta la grafica per internet, i formati grafici permessi sono due: uno
bitmap e l’altro vettoriale, vediamoli entrambi in dettaglio.
Formato Bitmap (BMP)
E’ un formato a mappatura di bit: l’immagine viene mappata, cioè catalogata pixel per
pixel, e per ogni pixel viene fornita un’informazione relativa al colore, alla sua profondità,
alla luminosità, alla brillantezza e alla saturazione.
Quello che ne ricaviamo è un file piuttosto pesante e poco adatto ad essere utilizzato per
internet, quindi i file in questo formato devono essere compressi.
Esistono due tipi di compressione a seconda delle caratteristiche dell’immagine che
dobbiamo trattare, e sono GIF e JPEG.
GIF (Graphic Interchange Format)
Questo formato supporta fino ad un massimo di 256 colori, quindi è adatto a comprimere
immagini con colori solidi o con grossi campi di colore omogeneo ed è meno efficiente
nella compressione di immagini complicate con molti colori e sfumature o gradienti.
Questa compressione consente anche di salvare le immagini in un formato interlacciato.
Il formato a interlacciamento produce una visualizzazione graduale di un'immagine in una
serie di passate sempre più definite a mano a mano che i dati arrivano al browser.
Ogni nuovo passo crea un'immagine più nitida fino al completamento dell'intera
immagine.
Il vantaggio più importante di questa tecnica è che offre un'anteprima dell'intera area
dell'immagine mentre l'immagine viene scaricata sul browser.
L'interlacciamento è più adatto a immagini GIF di grandi dimensioni, quali le illustrazioni
e le fotografie, ma non rappresenta una buona scelta per immagini GIF di piccole
dimensioni come le barre di navigazione, i pulsanti e le icone che vengono caricate su
schermo molto più rapidamente se mantenute nel formato GIF tradizionale (non
interlacciato).
In generale, l'interlacciamento non ha effetti significativi sulle dimensioni dei file
d'immagine GIF.
Il formato GIF consente anche di scegliere nell'immagine un colore che risulterà
trasparente nel browser.
Nelle aree di colore contrassegnato come trasparente, verrà visualizzato il colore di
sfondo della pagina.
Purtroppo la proprietà trasparente non è selettiva: se rendiamo trasparente un colore,
ogni pixel dell'immagine caratterizzato da tale colore diventerà a sua volta trasparente, e
questo può produrre risultati imprevisti.
L'aggiunta di trasparenza a un'immagine GIF può anche produrre risultanti deludenti
quando l'immagine contiene smussature o antialiasing.
I problemi iniziano quando s'imposta il colore di sfondo a trasparente e si utilizza
l'immagine in una pagina web su un altro colore di sfondo: il pixel soggetto ad
antialiasing nell'immagine corrisponderà sempre al colore di sfondo originale e quindi si
vedrà un brutto alone attorno all'immagine.
JPEG (Joint Photografic Expert Group)
Questo formato supporta i milioni di colori, quindi da quanto detto per il GIF, si deduce
che la compressione JPEG è più adatta al trattamento di immagini di tipo fotografico.
Una forma più recente di JPEG, chiamata JPEG progressivo, conferisce alle immagini JPEG
la stessa gradualità di visualizzazione delle immagini GIF interlacciate; al pari di queste
ultime, le immagini JPEG progressive impiegano spesso un tempo maggiore per lo
scaricamento sulla pagina rispetto ai JPEG standard, ma offrono al lettore un'anteprima
più rapida.
TECNICHE GRAFICHE: elementi di progettazione
21
Solitamente il grado di compressione applicato al formato JPEG è del 75%, ma è possibile
cambiare questo valore, determinando la qualità dell'immagine.
Più si comprime un'immagine con la compressione JPEG, più si riduce la qualità
dell'immagine stessa.
Formato vettoriale
Il formato vettoriale, è un’esclusiva dei programmi vettoriali, come Flash, questo formato
non fa nessuna mappatura, ma si basa su algoritmi matematici per la definizione delle
forme e sulle informazioni di colore.
Quindi risulta molto più leggero rispetto ai formati GIF e JPEG.
TECNICHE GRAFICHE: elementi di progettazione
22