-
DylanDog.
User deleted
Principi di web design
In maniera superficiale si può affermare che per creare un sito web è sufficiente avere un'editor Html WYSIWYG e cercare sul mercato un server dove poterlo pubblicare.
Effettivamente le cose non stanno proprio in questo modo, perchè nella progettazione e nella realizzazione di un sito web bisogna prendere decisioni con cognizione di causa, e questo è possibile soltanto conoscendo i concetti fondamentali del web design.
Ecco, quindi, i principi che vi aiuteranno a pianificare e sviluppare siti web caratterizzati dall'efficacia di navigazione e da un uso bilanciato di grafica, testo e colore:
Variabili di un progetto web
- I browser: la visualizzazione di una pagina web è influenzata dal tipo di browser.
- La risoluzione dello schermo: la visualizzazione di una pagina web dipende anche dalla risoluzione utilizzata.
- La velocità di connessione: la maggior parte degli utenti non sopporta tempi di caricamento superiori a 20 secondi.
Il progetto web
- Progettare il sito: l'organizzazione delle informazioni e modelli informativi.
- Progettare l'home page e le pagine: consigli per progettare l'home e le pagine di un sito web.
- Progettazione grafica: senza un impatto visivo di forma, colore e contrasto le pagine risulteranno noiose e non attireranno i visitatori.
La grafica per il web
- Le immagini digitali: le caratteristiche delle immagini digitali, risoluzione, profondità di colore e formato.
- Il formato GIF: caratteristiche delle immagini gif.
- Le animazione GIF: caratteristiche delle animazioni gif.
- Il formato JPG: caratteristiche delle immagini jpeg
- Il formato PNG: caratteristiche delle immagini png.
- Immagini e banda di rete: il peso delle immagini contribuisce ad aumentare il tempo di caricamento delle pagine web.
I colori per il web
- Come vengono riprodotti: sintesi additiva e sintesi sottrativa.
- La codifica esedecimale: in html per indicare i valori rgb si utilizza il sistema di codifica esadecimale.
- Colori e leggibilità: la leggibilità di una pagina web dipenda anche dai colori utilizzati.
La tipografia per il web
- Nozioni: cos'è la tipografia.
- Leggibilità: consigli per rendere una pagina web leggibile.
- L'allineamento: le opzioni di allineamento del testo.
- Lunghezza di riga e interlinea: consigli su come impostare queste due caratteristiche di una brano di testo.
- Caratteri e testo grafico: i tipi di caratteri per il web e l'uso del testo grafico.
- Risalto: come dare risalto al testo in una pagina web.
La pubblicazione e la promozione di un sito web
- Scelta del provider: per dare vita al sito Web occorre trasferire i file su un server Web.
- Promozione del sito: dato che nel web esistono milioni di pagine, può essere difficile farsi notare.
VARIABILI DI UN PROGETTO WEB - I browser
Uno dei problemi che bisogna risolvere consiste nel riuscire a produrre una visualizzazione corretta sui vari browser disponibili. Ogni browser contiene un programma chiamato parser, che interpreta i tag contenuti in un file Html e visualizza i risultati sulla finestra del browser, che tecnicamente è chiamata canvas. Purtroppo la logica di interpretazione dei tag Html varia da browser a browser e questo ha come conseguenza interpretazioni differenti e talvolta in conflitto fra loro per il modo in cui deve essere visualizzato il file Html. Provate allora a visualizzare le vostre pagine web con Microsoft Internet Explorer e con Netscape Navigator e sicuramente resterete sorpresi dalle differenze di visualizzazione.
A questo punto, viene da chiedersi per quale motivo si deve rendere il proprio lavoro compatibile con più browser. Il motivo è molto semplice, infatti, per un autore web l'obiettivo principale dovrebbe essere la realizzazione di pagine accessibili dal maggior numero possibile di utenti.
Generalmente non si può sapere a priori quali browser verranno impiegati per la visualizzazione e non si può sempre supporre che gli utenti usino l'ultima versione di un determinato browser o sistema operativo, quindi un buon progettista web deve collaudare durante ed alla fine del processo di sviluppo il proprio lavoro con il maggior numero possibile di browser e loro versioni per far sì che le pagine web progettate vengano visualizzate correttamente nella maggior parte dei casi.
Tenete anche in considerazione che i browser esibiscono subdole differenze anche a seconda della piattaforma utilizzata. Ad esempio Netscape Navigator per Windows non è esattamente identico a Netscape Navigator per Macintosh. Quindi se ne avete la possibilità, testate le vostre pagine web anche con sistemi operativi differenti.
Alla luce di queste considerazioni può sembrare impossibile creare pagine web che vengano sempre visualizzate correttamente, ma non è effettivamente così.
Un modo efficace per creare pagine visibili correttamente dai diversi browser consiste nell'usare l'approccio a "minimo comune denominatore". Questo approccio offre un'ampia accettabilità da parte dei browser in quanto l'autore web sceglie di utilizzare la penultima release di Html. Ad esempio quando furono introdotti i browser che supportavano Html 4.0, molti continuarono a lavorare in Html 3.2, confidando sul fatto che il codice sarebbe stato visualizzato in modo più uniforme in quanto tutti i tipi di browser l'avrebbero riconosciuto.
Usare una specifica Html non aggiornata non significa che il vostro sito sarà graficamente meno interessante, ma solo che si dovrà rinunciare ad utilizzare le estensioni più recenti.
L'approccio a minimo comune denominatore è il metodo di programmazione più sicuro ed è ampiamente utilizzato nei siti interessati alla massima diffusione possibile delle informazioni.
Un altro modo per aggirare il problema è quello di includere nelle pagine del proprio sito web un avviso del tipo: "Questo sito è ottimizzato per Internet Explorer 5.0". Ciò significa utilizzare alcune estensioni specifiche di un browser ed essere consapevoli che il proprio sito non viene visualizzato correttamente da altri browser e non voler risolvere il problema. Adottare questo tipo di tecnica è sicuramente un metodo molto rapido di progettare pagine web ma potrebbe avere come conseguenza l'allontanamento di un significativo numero di lettori che se ne andranno immediatamente solo perché ritengono di non avere un browser adatto. L'uso di questa tecnica è indicato nel caso in cui si deve progettare un sito per un'intranet aziendale e quindi si conosce quale browser verrà utilizzato.
Nella progettazione di un sito web si può scegliere di impiegare gli standard più recenti. Secondo alcuni sviluppatori, così facendo, i propri utenti aggiorneranno subito i loro browser. Questa strategia di progettazione porta sicuramente a risultati interessanti. Basti pensare all'uso di Macromedia Flash grazie al quale si possono creare pagine web dinamiche ed interattive che hanno sicuramente un maggiore effetto rispetto alle pagine web statiche.
Le animazioni prodotte con Flash, per essere visualizzate richiedono che sia installata nel browser un estensione in grado di leggerle. Le ultime versioni dei browser hanno questa estensione, mentre le vecchie versioni potrebbero non averla, a meno che l'utente non l'abbia installata.
Il problema quindi si ripresenta, perché molti utenti non saranno in grado di visualizzare le pagine web create con questo potente strumento. Se proprio non si vuole fare a meno di questa tecnologia, è preferibile creare due versioni delle vostre pagine web, una flash ed una html. In questo modo darete la possibilità all'utente di scegliere quale versione delle vostre pagine visualizzare senza escludere nessuno.
Se invece non si ha intenzione di adottare una soluzione di questo tipo, è preferibile che i contenuti più importanti del sito non facciano affidamento sulle tecnologie più recenti, in modo che il messaggio possa essere recepito anche dagli utenti che usano browser meno recenti.
Come si è visto, rendere le pagine accessibili al maggior numero possibile di utenti è abbastanza difficile; allora è compito del progettista web fare le giuste scelte per garantire una buona visibilità a tutti.
VARIABILI DI UN PROGETTO WEB - La risoluzione dello schermo
Indipendentemente della cura che si pone nella progettazione, a causa delle varie risoluzioni disponibili non si può mai sapere il modo in cui gli utenti visualizzeranno le pagine. La gamma di risoluzioni visualizzabili dipende dalla caratteristiche del monitor e della scheda video installata nel computer.
Le tre risoluzioni più utilizzate sono: 640x480, 800x600 e 1024x768 pixel. La risoluzione di 640x480 pixel è tipicamente usata da chi possiede monitor da 14 pollici, mentre chi ha un monitor da 15 pollici potrebbe utilizzare la risoluzione di 800x600 pixel.
Considerando che oggi i prezzi dei monitor sono notevolmente scesi rispetto ad alcuni anni fa, si può affermare che la maggior parte degli utenti avranno almeno un monitor da 15 pollici se non addirittura un monitor da 17 pollici.
Aldilà di queste considerazioni, la risoluzione dello schermo scelta dagli utenti è un fattore su cui il progettista web non ha alcun controllo. Bisogna allora decidere di realizzare il sito in modo da gestire più risoluzioni.
Realizziamo una pagina web per 800x600 pixel e visualizziamola ad una risoluzione di 640x480 pixel. Saremo costretti a eseguire continui scorrimenti a destra e sinistra per leggere il testo.
La presenza della barra di scorrimento orizzontale, al contrario della barra di scorrimento verticale, è considerata negativa e scomoda da molti utenti.
Alcuni progettisti sostengono che si dovrebbero sviluppare le pagine basandosi sul minimo comune denominatore che attualmente è rappresentato dalla risoluzione di 640x480 pixel ed, in effetti, molti importanti siti seguono questa impostazione. Si capisce però che utilizzando questa risoluzione per progettare le pagine web, si ha a disposizione meno spazio per gestire i contenuti di una pagina.
È anche possibile progettare una pagina web che si adatti alle varie risoluzioni dello schermo. Ad esempio, il layout di gdesign.it è stato progettato in questo modo. Provate, allora, a cambiare la risoluzione del vostro monitor, vi accorgerete che le pagine si adattano alla grandezza della finestra del browser.
Adottare questa tecnica è un'ottima soluzione ma è sicuramente più impegnativo che sviluppare un layout dalle dimensioni "fisse".
Si può anche pensare di realizzare diverse versioni delle vostre pagine per ogni risoluzione e fare scegliere all'utente quale versione utilizzare, ma si tratta di una tecnica troppo laboriosa e poco usata.
Alla luce di queste considerazioni resta a voi la scelta di ottimizzare le vostre pagine per un determinato tipo di risoluzione.
VARIABILI DI UN PROGETTO WEB - La velocità di connessione
La velocità di connessione è una variabile che influenza notevolmente la progettazione delle pagine web. La maggior parte degli utenti non sopporta che il caricamento di una pagina richieda più di 20-25 secondi e quindi se la vostra pagina viene caricata lentamente il visitatore potrebbe andarsene prima ancora di iniziare a visualizzare i contenuti del sito. È necessario quindi eseguire il collaudo del sito a varie velocitàdi connessione per verificare che i tempi di caricamento delle pagine non superino i 20-25 secondi evitando di perdere potenziali visitatori.
Come velocità di connessione base, per effettuare il collaudo delle vostre pagine, si può considerare 28.8 Kbps, tipica degli utenti che utilizzano vecchi modem. Per poter effettuare un giusto collaudo delle nostre pagine dobbiamo sapere in che modo le pagine vengono inviate all'utente.
Quando si digita l'indirizzo web nel proprio browser, questo si connette al server web appropriato e richiede il file specificato. Il server, allora, fornisce il file in modo che il browser possa prelevarlo. La prima volta che si visita un sito, sarà necessario caricare sia il file Html che ogni immagine cui fa riferimento il codice Html.
Se successivamente si ritorna a visitare lo stesso sito, il browser preleva e analizza il file Html. Poi il browser controlla se le immagini specificate nel file Html sono già memorizzate nell'area cache del nostro computer.
La cache è un'area di memorizzazione temporanea delle pagine web e delle immagini, ed il browser tenta sempre di caricare le immagini dall'area cache piuttosto che ricaricarle dal web.
Questa breve spiegazione ci fa capire che dobbiamo stare attenti quando collaudiamo il nostro sito alle diverse velocità di connessione, poiché dobbiamo immaginare di essere un utente che visita il sito la prima volta. Proprio questo è il momento in cui l'utente sperimenta i tempi di prelevamento più lunghi.
Allora per effettuare un collaudo che ci dia realmente il tempo di caricamento è necessario svuotare ogni volta l'area cache del proprio browser.
La velocità di visualizzazione delle pagine è maggiormente influenzata dal numero e dalle dimensioni delle immagini contenute nelle pagine web.
Bisogna quindi non complicare troppo il progetto delle pagine riducendo il numero immagini. Considerando come connessione base 28.8 Kbps, nessuna immagine del sito web dovrebbe superare i 10-15 KB.
In fase di progetto, teniamo anche conto della funzionalità cache del browser, riutilizzando le immagini e la grafica quanto più possibile all'interno del sito.
Questo ci permetterà di avere oltre ad un aspetto uniforme delle pagine, anche un caricamento più rapido delle pagine. Infatti una volta che un'immagine è stata prelevata, questa permane nell'area cache per il numero di giorni specificato nelle apposite impostazioni del browser.
La maggior parte degli utenti non cambia queste impostazioni ed è quindi probabile che le immagini rimarranno nel disco fisso dell'utente per qualche tempo. Ogni volta che l'utente torna a visitare il nostro sito, verrà utilizzata la copia locale delle immagini, evitando di prelevare nuovamente le immagini dal server web.
IL PROGETTO WEB - Progettare il sito
La fase più importante della progettazione di un sito web è l'organizzazione delle informazioni. Al fine di considerare accuratamente ciò che si desidera dire e come si desidera dirlo è fondamentale conoscere profondamente il contenuto del proprio sito.
Allora, prima di passare alla realizzazione del sito e delle pagine, è preferibile creare prospetti e suddividere le informazioni in sezioni e sottosezioni, e pensare alle interrelazioni tra le sezioni create.
Bisogna inoltre, avere le idee chiare su come una sezione del sito si collega ad un'altra, ed avere un chiaro senso dell'organizzazione; se tutto ciò viene a mancare i vostri utenti se ne accorgeranno ben presto e la maggior parte di essi andrà a cercarsi materiali migliori.
È possibile utilizzare quattro strutture essenziali per creare siti web: sequenze, griglie, gerarchie e reticolati.
Sequenze - Questo è il modo più semplice per organizzare le informazioni e consiste nell'inserirle in sequenza. L'ordinamento sequenziale può essere cronologico oppure alfabetico come nelle enciclopedie.
Questo tipo di struttura è adatta per i siti nei quali il lettore deve percorrere una sequenza fissa di informazioni ed i collegamenti costituiscono un percorso lineare. Anche i siti web più complessi possono essere organizzati come sequenza logica, ma ogni pagina della sequenza principale può avere collegamenti ad altre pagine non facenti parte della sequenza o ad altri siti web.
Griglie - Le griglie rappresentano un buon metodo per correlare variabili, come informazioni cronologiche i storiche, in varie categorie standard, per esempio tecnologia, cultura, storia. Le singole unità di una griglia devono condividere una struttura uniforme di argomenti e sottoargomenti ed il pubblico deve essere in grado si comprendere la natura della struttura generale. Quindi le griglie possono essere difficili da seguire se gli utenti non riconoscono le relazioni tra le categorie e le informazioni; per questo motivo sono più adatte ad un'utenza esperta con una certa comprensione dell'argomento trattato e della sua organizzazione logica.
Gerarchie - Per organizzare unità complesse di informazioni le gerarchie sono il modo migliore.
Generalmente i siti web sono organizzati su un'unica home page, e gli schemi gerarchici sono particolarmente adatti a tale organizzazione. Inoltre i diagrammi gerarchici sono molto utilizzati nella vita aziendale ed istituzionale, quindi per la gran parte degli utenti questa struttura è di facile comprensione. Attenzione però, perché le gerarchie sono pratiche solo con materiali ben organizzati, e questo richiede un'approfondita organizzazione analitica delle informazioni da proporre.
Reticolati - Nelle strutture a reticolato l'obiettivo è imitare il pensiero associativo ed il flusso libero delle idee, consentendo agli utenti di seguire i loro interessi senza alcuna sequenza preimpostata. Con questa struttura si sfrutta al massimo la potenza di collegamento e associazione web, ma talvolta la struttura a reticolato può indurre in confusione. Questo perché gli schemi organizzativi associativi sono molto difficili da comprendere e prevedere per l'utente. Allora le strutture a reticolato sono adatte a siti di piccole dimensioni basati su elenchi di collegamenti e non sono adatte alla comprensione di un argomento.
Il progettista web, che conosce a fondo le informazioni che vuole proporre, potrà scegliere di usare uno dei quattro modelli informativi descritti, ma potrà anche creare un modello che condivida alcuni aspetti di tutti e quattro i tipi di struttura.
IL PROGETTO WEB - Progettare l'home page e le pagine
- L'home page
Tutti i siti web sono organizzati attorno ad una home page che rappresenta il punto d'ingresso logico nel sistema di pagine web. L'home page inoltre, è la pagina più visitata di ogni sito web e su questa pagina si basa la prima impressione dei vostri utenti. Se i vostri utenti avranno un'impressione negativa, difficilmente continueranno la navigazione delle vostre pagine web.
L'alta visibilità della home page la rende anche il posto migliore per inserire un menù di collegamenti o un sommario del sito. La maggior parte degli utenti visualizzerà il sito su un monitor con dimensioni da 14 a 17 pollici, ed i 4/5 pollici verticali superiori sono l'unica parte sicuramente visibile sui loro schermi. Allora, per ottenere una navigazione efficiente, il numero di collegamenti nella parte superiore della home page deve essere massimo.
L'home page richiede una progettazione accurata considerando anche che non deve subire grosse variazioni una volta che il vostro sito è on line perché gli utenti resterebbero disorientati se una home page cambia eccessivamente ogni settimana.
- Le pagine
Dopo aver definito l'home page andiamo a progettare le singole pagine del nostro sito che saranno differenti tra loro per lunghezza e contenuti.
Lunghezza - Abbiamo già parlato della larghezza di una pagina web ma non della sua lunghezza. Se una pagina web è troppo lunga l'utente non riuscirà a visualizzarla interamente sullo schermo e sarà costretto a scorrerla verticalmente. Lo scorrimento verticale può causare la perdita di contesto da parte dell'utente, perché gli elementi come i titoli dei documenti, gli identificatori del sito e i collegamenti alle altre pagine del sito scompaiono dallo schermo.
Se volete progettare pagine lunghe prevedete di inserire pulsanti tipo "Torna Su" a intervalli equivalenti ad una schermata piccola (circa 300 pixel verticali); così facendo l'utente non dovrà mai scorrere più di metà schermo per trovare un pulsante di navigazione che lo riporti all'inizio della pagina.
Contenuti - Ogni pagina di un sito web dovrebbe contenere: titolo, autore, affiliazione istituzionale, data di revisione, informazioni di copyright e collegamento alla home page. Spesso le pagine Web vengono stampate o salvate su disco e senza queste informazioni non è semplice determinare l'origine di un documento. Paragonate ogni pagina del vostro sito a un ritaglio di giornale e assicuratevi di includere le informazioni necessarie per determinarne la fonte.
IL PROGETTO WEB - Progettazione grafica
La progettazione di un sito web comprende anche la progettazione grafica di ogni singola pagina. Una buona progettazione grafica crea logica visiva e cerca un equilibrio ottimale tra la sensazione visiva e le informazioni grafiche. Senza un impatto visivo di forma, colore e contrasto le pagine risulteranno noiose e non attireranno il visitatore.
Quindi il compito principale della progettazione grafica è creare una gerarchia visiva forte e coerente, nella quale gli elementi importanti vengono sottolineati ed il contenuto è organizzato in modo logico e prevedibile. Quando una pagina viene visualizzata da un utente, appare come una vasta massa di forme e colori, con elementi in primo piano in contrasto con lo sfondo.
Solo secondariamente le informazioni specifiche vengono colte, prima grazie alle immagini, se presenti, ed infine con l'analisi del testo. Il lettore deve essere attirato verso il contenuto, e ciò è possibile trovando il giusto equilibrio grafico.
Ad esempio una pagina piena di testo respinge l'occhio, perché sembra una massa di grigio indifferenziato, cosi come una pagina dominata da grafica scadente o eccessivamente pesante respinge gli utenti che cercano contenuti reali.
Cercare allora il giusto equilibrio tra testo e collegamenti, con immagini relativamente piccole è sicuramente il modo migliore per realizzare pagine web di successo.
La coerenza è un altro fattore che influisce pesantemente sulla riuscita del vostro sito web. Una volta che si definisce il layout grafico e lo stile di gestione del testo e delle immagini, è necessario applicarlo a tutte le pagine del sito per creare ritmo e unità.
La ripetizione non è assolutamente noiosa e fornisce al sito un'identità grafica coerente che lo rende riconoscibile e memorabile. Inoltre la coerenza del layout delle pagine consentirà agli utenti di adattarsi rapidamente e di prevedere con sicurezza la posizione delle informazioni.
LA GRAFICA PER IL WEB - Le immagini digitali
Ogni immagine digitale è caratterizzata da tre aspetti:
Risoluzione: rapporto tra dimensioni e qualità visiva dell'immagine; comprende due aspetti:
- Quantità di punti che compongono effettivamente l'immagine; si misura in pixel.
Esempio: 640 x 480 (640 pixel orizzontali x 480 verticali), 1024 x 768 e così via.
- Densità dei punti nella visualizzazione o stampa; si misura in dpi (dot per inch, punti per pollice).
Esempio: 72 dpi, 300 dpi e così via.
Profondità di colore: numero massimo di colori possibili; si misura in bit.
Valori tipici: 8 bit (256 colori), 16 bit (65mila colori), 24 bit (milioni di colori).
Formato/compressione: formato di salvataggio o codifica del file. Alcuni formati permettono di comprimere i dati, ottenendo file di dimensioni ridotte, in tal caso però certi metodi di compressione (detti lossy o distruttivi) possono influire negativamente sulla qualità dell'immagine.
Esempio di formato non compresso: BMP (Windows/OS2 Bitmap).
Esempi di formati compressi: TIFF, GIF, JPEG, PNG.
Ciascuno di questi tre aspetti concorre a determinare le dimensioni complessive del file dell'immagine: a parità di risoluzione, una maggiore profondità di colore produce un file più ingombrante, e così via.
Attualmente nel Web vengono usati solo tre formati per le immagini: GIF, JPEG e PNG. Questi formati comprimono le dimensioni dei file delle immagini per ridurre i tempi di caricamento. È importante sapere quale formato utilizzare per ogni diverso tipo di immagine.
Se si sceglie un formato errato, l'immagine potrebbe non venir compressa a sufficienza o potrebbe non avere l'aspetto desiderato. In ogni caso per creare un sito web attraente occorre utilizzare la grafica con accortezza.
Se si usano immagini in quantità eccessiva, i tempi di caricamento delle pagine web risulteranno troppo lunghi e gli utenti generalmente non sono intenzionati ad attendere. Allora si deve bilanciare accuratamente il testo e le immagini sfruttando le funzionalità grafiche del linguaggio Html per rispondere alle esigenze degli utenti.
LA GRAFICA PER IL WEB - Il formato GIF
Il formato GIF (Graphic Interchange Format) fu diffuso negli anni Ottanta come metodo efficiente di trasmissione delle immagini su reti di dati. All'inizio degli anni Novanta i progettisti originali del web lo adottarono per l'efficienza che offriva. Oggi la stragrande maggioranza delle immagini sul web è in questo formato ed è supportato da tutti i browser web.
Il formato GIF usa una forma di compressione LZW che mantiene inalterata la qualità dell'immagine, ovvero riduce le dimensioni del file senza pregiudicare la qualità grafica dell'immagine. La profondità dei colori delle immagini GIF è di 8 bit, che consente di usare una tavolozza di 256 colori. Meno colori si usano e maggiori saranno le possibilità di compressione, ovvero minori saranno le dimensioni del file.
Lo schema di compressione LZW è più adatto a comprimere immagini con grossi campi di colore omogeneo ed è meno efficiente nella compressione di immagini complicate con molti colori e grane complesse.
È possibile sfruttare le caratteristiche della compressione LZW per migliorarne l'efficienza e ridurre di conseguenza le dimensioni delle immagini GIF. La strategia consiste nel ridurre il numero di colori in un'immagine GIF al numero minimo necessario e nell'eliminare i colori isolati non necessari per la rappresentazione dell'immagine.
Un'immagine GIF non può avere più di 256 colori, ma può averne meno, fino a un minimo di due (bianco e nero). Le immagini con meno colori sono compresse più efficacemente con la compressione LZW.
Questa compressione consente anche di salvare le immagini in un formato interllacciato. Il formato a interllaciamento 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.
Molti utenti trovano attraente l'effetto animato "da sfocato a nitido" dell'interlacciamento, ma 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.
Supponiamo di voler creare un pulsante di forma circolare di colore rosso da inserire sopra un colore di sfondo usando Adobe Photoshop. Photoshop smussa la forma circolare inserendo pixel di colori intermedi lungo i bordi della forma; questa smussatura migliora l'aspetto delle immagini su schermo ammorbidendo i bordi frastagliati.
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.
Occorre allora prestare attenzione quando si usa la trasparenza nelle immagini GIF per evitare il problema sopra descritto.
LA GRAFICA PER IL WEB - Le animazioni GIF
Il formato GIF consente di memorizzare in un unico file più immagini cui sono associate delle informazioni di temporizzazione. Questo consente di costruire semplici animazioni costituite da più immagini statiche che vengono presentate in successione creando l'illusione del movimento. Si tratta esattamente della stessa tecnica utilizzata nell'animazione a fotogrammi.
Quando si crea un'animazione GIF, si può determinare il tempo che deve intercorrere fra la visualizzazione di due immagini successive e il numero di volte che deve essere riprodotta l'animazione. Con un po' di immaginazione è possibile creare interessanti effetti di animazione come ad esempio testo scorrevole, colori alternati, icone animate e piccole presentazioni.
Occorre non esagerare nell'uso di immagini GIF animate che rappresentano ad esempio icone lampeggianti o messaggi scorrevoli. Molti potrebbero, infatti, trovare fastidioso questo effetto ripetitivo, che può distrarre dal contenuto vero e proprio della pagina.
Si consideri se è il caso di ripetere l'animazione, solo, un determinato di numero di volte invece di lasciare che l'animazione si ripeta all'infinito.
Se volete utilizzare un'animazione GIF come contenuto, visualizzate l'animazione in una finestra secondaria, in questo modo i vostri utenti potranno visualizzare l'animazione e quindi chiudere la finestra. Se invece, presentate l'animazione sulla pagina principale di contenuto, questa interferirà con gli altri elementi della pagina.
Per creare immagini GIF animate basta usare un software di animazione GIF. Questi strumenti semplificano notevolmente l'impostazione della temporizzazione, della tavolozza dei colori e degli effetti da applicare alle singole immagini.
LA GRAFICA PER IL WEB - Il formato JPEG
Un formato grafico utilizzato di frequente sul Web per ridurre le dimensioni dei file grafici è lo schema di compressione JPEG (Joint Photographic Expert Group). A differenza delle immagini GIF, le immagini JPEG sono policrome (24 bit, o 16,8 milioni di colori).
Questo tipo di immagini ha generato un altissimo interesse tra fotografi, artisti, progettisti grafici, specialisti della composizione di immagini mediche, storici dell'arte e altri gruppi per i quali la qualità dell'immagine è d'importanza fondamentale e per i quali non è possibile accettare compromessi sulla fedeltà dei colori tramite retinatura di un'immagine a colori a 8 bit.
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. La compressione JPEG utilizza una sofisticata tecnica matematica, chiamata trasformazione discreta del coseno, per produrre una scala scorrevole di compressione delle immagini.
È possibile scegliere il grado di compressione che si desidera applicare a un'immagine in formato JPEG, ma in questo modo si determina anche la qualità dell'immagine. Più si comprime un'immagine con la compressione JPEG, più si riduce la qualità dell'immagine stessa.
JPEG può raggiungere rapporti di compressione incredibili, riducendo le immagini di circa un centinaio di volte rispetto ai file originali; questo è possibile perché‚ l'algoritmo JPEG scarta i dati non necessari durante la compressione dell'immagine e per questo motivo la tecnica di compressione è definita a perdita.
Sta a voi quindi sperimentare l'impostazione più adatta per creare un file dall'aspetto accettabile. Quando create immagini JPEG ricordate sempre di salvare una copia dell'immagine originale. Infatti il formato JPEG degrada in modo permanente la qualità dell'immagine risultante.
Dopo aver convertito un'immagine in formato JPEG, non è più possibile recuperare la qualità dell'immagine originale.
LA GRAFICA PER IL WEB - Il formato PNG
Il formato PNG (Portable Network Graphies) è stato sviluppato appositamente per il Web. Questo formato è stato disponibile fin dal 1995 ma ha stentato ad acquisire popolarità a causa della mancanza di un supporto generalizzato da parte dei browser. Si tratta di un formato che secondo le intenzioni degli autori doveva sostituire il formato GIF.
Questo formato senza perdita di informazioni comprime le immagini a 8 bit producendo file di dimensioni inferiori rispetto a GIF. Inoltre il formato PNG può essere utilizzato anche per la stampa delle immagini e pertanto supporta immagini a colori a 8 bit, scale di grigio a 16 bit e colori True Color a 24 bit.
Anche se il formato PNG supporta il colore a 24 bit, la sua routine di compressione senza perdita di informazioni non è in grado di raggiungere l'efficienza del formato JPEG.
Il formato PNG supporta le funzionalità di trasparenza e interallacciamento ma non l'animazione, anche se il consorzio W3C ha creato una bozza per il formato MPG (Multiple-Image Network Graphics) che supporta l'animazione.
Un'utile caratteristica del formato PNG è la capacità di incorporare del testo per offrire la possibilità di eseguire ricerche sulle immagini; è infatti possibile memorizzare nel file dell'immagine una stringa che identifica l'immagine stessa.
Purtroppo il formato grafico PNG non è ampiamente supportato e l'implementazione corrente delle immagini PNG in Netscape Navigator e Microsoft Internet Explorer non supporta completamente tutte le sue funzioni.
Questa situazione è destinata a cambiare a cambiare nel corso degli anni, ma non mettete in programma di utilizzare le immagini PNG finché non siete sicuri che la maggior parte dei vostri utenti utilizzi browser in grado di supportare il formato PNG.
LA GRAFICA PER IL WEB - Immagini e banda di rete
Attualmente la maggior parte degli utenti Web accede al proprio Internet service provider tramite modem a velocità di 28,8 kilobyte al secondo (kbps) dalle case, dagli uffici o da siti di lavoro remoti.
A 28,8 kbps il tasso di scaricamento effettivo è di circa 3,6 kilobyte (KB) al secondo (un byte è formato da 8 bit): questo significa che una modesta immagine di 36 KB su una pagina Web potrebbe impiegare più di dieci secondi per essere scaricata sul browser Web del lettore.
I tassi di trasmissione dati effettivi variano a seconda del modem dell'utente, della velocità del server Web, della connessione a Internet e da altri fattori, ma il quadro generale è chiaro: maggiore è il numero di immagini incorporate, maggiore sarà il tempo necessario all'utente per visualizzare la pagina.
Un menu grafico a schermo pieno su una home page, sommato a immagini di sfondo, potrebbe lasciare i lettori che si collegano tramite modem a girarsi i pollici per un intero minuto, se non di più, anche se dispongono di un modem avanzato e una buona connessione a Internet.
Guardate l'orologio per un intero minuto, quindi decidete se siete disposti a chiedere ai vostri utenti di attendere così a lungo quando visitano il vostro sito Web.
Una strategia migliore consiste nell'aumentare gradualmente lo scaricamento delle immagini delle pagine, offrendo ai lettori tempi di scaricamento ragionevoli. Man mano che i lettori cominciano a interessarsi al vostro contenuto, saranno più disposti a sopportare ritardi maggiori, soprattutto se li avete informati delle dimensioni delle immagini o avvisati che determinate pagine di immagini e si impiegherà quindi più tempo per lo scaricamento.
Alle velocità odierne dei modem di medio livello, la maggior parte delle pagine destinate agli utenti che si collegano tramite connessione telefonica da casa non dovrebbe contenere più di 50/75 kilobyte di immagini.
Se si deve necessariamente usare un'immagine di grandi dimensioni, è opportuno presentare all'utente una sua rappresentazione in miniatura e fornire indicazioni sulle dimensioni totali del file contenente l'immagine intera.
I COLORI PER IL WEB - Come vengono riprodotti
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 primaria 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.
I COLORI PER IL WEB - La codifica esadecimale
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.
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.
A questo proposito potete scaricare per tenerla sempre a portata di mano la tavolozza (45Kb/.zip) 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
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. 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 #.
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.
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. Questo è purtroppo un limite intrinseco delle tecnologie Web e non c'è modo di garantirsi un'assoluta fedeltà di riproduzione di colori.
La tabella seguente mostra i 16 nomi dei colori riconosciuti dalla maggior parte dei browser, che sono stati elencati nelle specifiche Html 4.0 prodotte dal consorzio W3C.
I COLORI PER IL WEB - Colori e leggibilità
Quando si progetta una pagina web la priorità maggiore è la leggibilità su schermo, quindi il cambiamento dello sfondo di pagina da grigio a bianco è la sola modifica dello sfondo standard di pagina Web che è raccomandabile. La leggibilità dei caratteri sullo schermo del computer è già compromessa dalla bassa risoluzione dello schermo stesso, il tipico schermo dei computer Macintosh o Windows visualizza il testo a 72/80 punti per pollice (circa 5.200 punti per pollice quadrato), ossia una risoluzione quasi 300 volte inferiore rispetto a quella di una tipica pagina di rivista (1.440.000 punti per pollice quadrato).
Il testo nero su uno sfondo bianco (o grigio molto chiaro) produce il contrasto migliore dei caratteri e la migliore leggibilità.
Gli sfondi neri sono assai meno leggibili di quelli bianchi, anche quando si utilizzano caratteri bianchi per ottenere il massimo contrasto.
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).
L'abbinamento tra colori complementari ad esempio giallo e blu può essere considerato armonioso. Viceversa, abbinare colori fortemente contrastati ad esempio rosso e blu tende ad affaticare l'occhio del lettore e andrebbe dunque evitato.
Ricordate anche che i colori delle pagine web, in quanto visualizzati su un monitor sono mediamente più vividi e brillanti dei corrispettivi stampati su carta.
Per scegliere i colori dello sfondo e del testo è bene affinare il proprio senso estetico basandosi su alcune elementari norme grafiche.
LA TIPOGRAFIA PER IL WEB - Nozioni
La tipografia è l'equilibrio e l'interrelazione tra la forma delle lettere sulla pagina, un'equazione verbale e visiva che aiuta il lettore a comprendere la forma e ad assorbire la sostanza del contenuto. Essa svolge un doppio ruolo in qualità di comunicazione verbale e visiva; infatti man mano che i lettori analizzano una pagina, sono inconsciamente consapevoli di entrambe queste funzioni: per prima cosa studiano i modelli grafici generali della pagina e poi analizzano il linguaggio leggendo il testo.
Allora una buona tipografia stabilisce una gerarchia visiva per la prosa sulla pagina e fornisce punteggiatura visiva e accenti grafici che aiutano il lettore a capire le relazioni tra la prosa e le immagini, i titoli e i blocchi subordinati di testo.
Anche se le regole di base della tipografia sono molto simili per le pagine web e i documenti di stampa tradizionali, i caratteri stampati su carta e quelli visualizzati su schermo mostrano differenze non trascurabili.
Innanzi tutto lo schermo di un computer visualizza i caratteri tipografici ad una risoluzione assai inferiore rispetto a quella dei libri e delle riviste. Infatti la tipografia delle riviste e dei libri è in maggior parte composta da 1200 punti per pollici (dpi), mentre lo schermo di un computer visualizza raramente più di 85 dpi.
Inoltre l'area utilizzabile di uno schermo standard è molto inferiore rispetto alle pagine dei libri e delle riviste, e questo limita la quantità di informazioni visualizzabili su una pagina web senza scorrimento.
Ma la peculiarità della tipografia web è data dalla sua variabilità: le pagine web vengono create al momento dello scaricamento sul browser web; ogni singola riga di testo, titolo, carattere e relativo stile sono ricreati al momento dello scaricamento da un'interazione tra browser, server web e sistema operativo dell'utente.
Quindi, un carattere mancante, un browser obsoleto, o un set particolare di caratteri rappresentano una serie di imprevisti del processo di visualizzazione di una pagina web.
Per le probabilità che accada uno dei sopra citati imprevisti, un autore web non può essere sicuro al 100% che ogni lettore visualizzi le pagine sullo schermo così come lui le ha progettate.
LA TIPOGRAFIA PER IL WEB - La leggibilità
Il contrasto visivo tra i vari caratteri e i blocchi di testo, i titoli e lo spazio circostante sono fondamentali per ottenere una buona tipografia. L'occhio e il cervello del lettore sono attratti da un contrasto forte e da motivi caratteristici che è possibile ottenere solo attraverso un progetto accurato delle pagine.
Se riempiamo le pagine web con testo denso, i lettori vedranno un muro grigio e saranno istintivamente respinti dalla mancanza di contrasto visivo. È inutile anche ingrandire tutti gli elementi allo stesso modo; anche i caratteri in grassetto diventano monotoni perché, se tutto è in grassetto, niente risalta nel modo giusto.
Se il contenuto delle pagine web è rappresentato soprattutto da testo, la tipografia è lo strumento da utilizzare per creare modelli di organizzazione della pagina. Prima di essere autori web, anche noi siamo lettori, e la prima cosa che vediamo in una pagina non è il titolo o altri dettagli, bensì il modello e il contrasto generale.
Modelli regolari e ripetuti, ottenuti dal giusto equilibrio tra grafica e testo aiutano il lettore a determinare la giusta posizione e l'organizzazione delle informazioni e ad aumentare la leggibilità del documento.
Al contrario invece, intestazioni di testo rattoppate ed eterogenee rendono difficile la visione di motivi ripetuti ed è quasi impossibile prevedere la posizione delle informazioni in documenti non familiari.
Anche un buon uso dei margini e dello spazio bianco aumenta la leggibilità di una pagina web. I margini e lo spazio bianco possono allora essere utilizzati per diversificare il testo principale dagli altri elementi della pagina.
I margini, usati in modo coerente, forniscono una struttura e un aspetto uniforme per le pagine web. Inoltre, aggiungono interesse visivo creando un contrasto tra lo spazio positivo dello schermo (testo, grafica) e lo spazio negativo (bianco).
LA TIPOGRAFIA PER IL WEB - L'allineamento
I blocchi di testo si inseriscono tra i margini in modi diversi; le opzioni di allineamento disponibili sul web sono:
Giustificazione a destra; i blocchi di testo allineati a destra sono difficili da leggere, perché nel mondo occidentale leggiamo da sinistra a destra ancorandoci alla linea verticale del margine sinistro. La giustificazione del testo a destra crea dei margini sinistri irregolari e questi rende difficile la lettura perché l'occhio deve cercare l'inizio di ogni nuova riga.
Giustificazione al centro; sconsigliabile per le stesse motivazioni della giustificazione a destra.
Giustificazione a sinistra; è l'opzione più leggibile per le pagine web, perché il margine sinistro è uniforme e prevedibile e quello destro è irregolare. L'irregolarità del margine destro aggiunge diversità e interesse alla pagina, senza interferire con la leggibilità.
Testo giustificato; i blocchi di testo giustificato creano rettangolipieni e le intestazioni dei blocchi sono generalmente centrate per ottenere documenti dall'aspetto simmetrico e formale. Non tutti i browser offrono un pieno controllo a questo tipo di allineamento, quindi il testo giustificato nelle pagine web va usato con cautela.
Vediamo anche come allineare i titoli di pagina o di paragrafo: sul testo giustificato a sinistra i titoli e le intestazioni dovrebbero a loro volta essere allineati a sinistra.
Le intestazioni allineate a centro si adattano bene al testo giustificato, che però non si dovrebbe usare per le pagine web.
Le intestazioni allineate a centro su testo giustificato a sinistra sono in netto contrasto con l'asimmetria del margine destro ed il risultato è una pagina sbilanciata.
LA TIPOGRAFIA PER IL WEB - Lunghezza di riga e interlinea
Lunghezza di riga
Abbiamo già visto che il testo visualizzato su schermo è difficile da leggere per via della bassa risoluzione degli schermi. Anche la lunghezza delle righe di testo delle pagine web gioca un ruolo fondamentale per la leggibilità.
Righe di testo troppo ampie richiedono al lettore di spostare leggermente la testa o di affaticare i muscoli dell'occhio; allora la leggibilità ne soffre perché, lungo la distanza di ritorno al margine sinistro, il lettore può perdere la posizione della nuova riga.
E' opportuno restringere la lunghezza delle righe di testo a circa 60/70 caratteri per riga. Il conteggio esatto dei caratteri è difficile da prevedere perché le dimensioni dei caratteri variano a seconda dei browser e dei sistemi operativi.
Una soluzione consiste nell'usare tabelle di layout di pagine con celle di testo non superiori a 365 pixel di larghezza. Ad esempio utilizzando il carattere Times New Roman da 12 punti, tale larghezza di cella produce una riga lunga circa 50 caratteri con una media di circa nove/dieci parole per riga.
Partendo da questa base provate a variare caratteri e dimensioni per ottenere il migliore equilibrio tra efficienza spaziale e leggibilità.
Interlinea
Anche l'interlinea influenza notevolmente la leggibilità dei blocchi di testo: un'interlinea eccessiva rende difficile all'occhio trovare l'inizio della riga successiva, mentre un'interlinea troppo ridotta confonde le righe di caratteri.
Nella stampa tradizionale si imposta l'interlinea dei blocchi di testo sommando circa 2 punti alle dimensioni dei caratteri; ad esempio un carattere a 12 punti dovrebbe essere impostato con un'interlinea di 14 punti.
Purtroppo l'HTML semplice non ha un controllo affidabile sull'interlinea. Se si vuole gestire correttamente l'interlinea bisogna ricorrere ai fogli di stile.
LA TIPOGRAFIA PER IL WEB - Caratteri e testo grafico
Caratteri
Il tipo di carattere utilizzato è uno degli elementi più importanti di un sito Web ben realizzato. Tutti coloro che visiteranno il sito Web risponderanno in modo istintivo a un determinato tipo di caratteri. Nella progettazione di pagine web la scelta dei caratteri da usare non è molto vasta ma bisogna limitarsi all'uso dei caratteri predefiniti residenti nella maggior parte dei sistemi operativi.
Infatti se nelle nostre pagine web specifichiamo un font che non è disponibile sul sistema dell'utente, il suo browser lo sostituirà con il font standard, che nella maggior parte dei browser è il Times New Roman.
I caratteri predefiniti residenti nella maggior parte dei sistemi operativi sono: Arial, Courier, Georgia, Times New Roman, Trebuchet e Verdana.
La leggibilità su schermo dipende soprattutto dalla cosiddetta altezza x (l'altezza di una x minuscola) e dalla dimensione generale del carattere. Così un tipo di carattere come Times New Roman ha una leggibilità media sullo schermo del computer perché ha un'altezza x moderata. Questo carattere è consigliato nei documenti con molto testo che probabilmente saranno stampati e non letti sullo schermo.
Invece caratteri quali Georgia e Verdana sono stati progettati per essere letti su schermo, infatti hanno altezze x esagerate e sono molto grandi, se paragonati a tipi di caratteri più tradizionali con la stessa dimensione di punti.
Le altezze x esagerate e la forma pesante di questi caratteri conferiscono però un aspetto massiccio e rozzo al documento se questo viene stampato. Lo schema più convenzionale per l'uso dei caratteri impone di utilizzare un carattere con grazie come Times New Roman o Georgia per il testo ed un carattere senza grazie come Verdana o Arial come contrasto per i titoli.
Questo schema può essere considerato come suggerimento o punto di partenza per la scelta dei caratteri delle proprie pagine web; ogni progettista web è libero di scegliere i caratteri da usare testandoli opportunamente sullo schermo per produrre un ragionevole equilibrio tra densità d'informazioni e leggibilità generale.
È consigliabile comunque, utilizzare pochi font e poche dimensioni, per dare alle pagine un aspetto più chiaro, così come, per dare uniformità, si deve applicare lo stesso tipo di carattere e la stessa combinazione di stili in tutte le pagine di un sito Web evitando cambiamenti casuali.
Testo grafico
Se si deve necessariamente usare un font ben preciso, non standard, si può creare il testo all'interno di un'immagine GIF o JPEG. Questa tecnica consente anche di applicare al testo ombreggiature ed altri effetti grafici.
Utilizzare testo grafico per titoli, sottotitoli o addirittura per interi blocchi di testo è fortemente sconsigliabile perché, oltre ad allungare i tempi di caricamento delle pagine web, il testo grafico non può essere oggetto di ricerca e non viene indicizzato dai motori di ricerca.
Il testo grafico è indicato per creare loghi, intestazioni di pagina e immagini di navigazione.
LA TIPOGRAFIA PER IL WEB - Risalto
Risulta difficile analizzare la struttura del contenuto di una pagina web composta da un corpo di testo che non attira l'occhio. A volte basta una piccola modifica per creare un contrasto visivo che attira l'occhio. Esistono strumenti tipografici consolidati che permettono di dare risalto ad un blocco di testo, ma è importante non utilizzarli in modo errato.
Infatti, se mettiamo tutto il testo in grassetto, niente risalterà e otterremo soltanto un effetto sgradito alla maggior parte dei lettori; analizziamo adesso in dettaglio quali sono e quando vanno usati gli strumenti tipografici che permettono di dare risalto al testo.
Corsivo - Il corsivo attira l'occhio perché è in contrasto con la forma del corpo del testo; va utilizzato come convenzione o all'interno del testo per parole o frasi accentuate o straniere. Poiché la leggibilità del testo in corsivo è inferiore rispetto al testo normale della stessa misure, è preferibile non usarlo per lunghi blocchi di testo.
Grassetto - Il testo in grassetto conferisce risalto essendo in contrasto con il colore del testo normale. Il grassetto è abbastanza leggibile su schermo, ma grossi blocchi di testo in grassetto mancano di contrasto e si perde quindi il risalto.
Sottolineato - Il testo sottolineato, risale ai tempi delle macchine da scrivere, quando il corsivo e il grassetto non erano disponibili, e risulta troppo pesante interferendo con la forma delle lettere. Inoltre la sottolineatura nei documenti web ha un significato speciale funzionale, infatti indica un collegamento ipertestuale. Quindi se usiamo testo sottolineato in una pagina web, questa sarà sicuramente confuso con un collegamento ipertestuale.
Testo Colorato - Anche l'uso del colore, come la sottolineatura ha un significato funzionale speciale nei documenti web. È sconsigliabile usare testo colorato all'interno del testo, perché i lettori penseranno che si tratta di un collegamento ipertestuale. Tuttavia il testo colorato funziona bene per dare risalto ai titoli di sezione e di paragrafo. Scegliete colori scuri in contrasto con lo sfondo della pagina e non utilizzate il blu e il viola che sono i colori predefiniti dei collegamenti web.
Lettere maiuscole - Il testo in lettere maiuscole è uno dei metodi più comuni e meno efficaci per aggiungere risalto tipografico. L'occhio legge soprattutto riconoscendo la forma generale delle parole, non analizzando tutte le lettere e riunendole in una parola riconoscibile. Le parole o i titoli tutti maiuscoli formano rettangoli monotoni che non catturano l'occhio. Per leggere un blocco di testo tutto maiuscolo è necessario leggere il testo lettera per lettera, il che si traduce in una lettura scomoda e lenta. È consigliabile anche evitare di utilizzare le lettere iniziali maiuscole in tutte le parole delle intestazioni.
Spaziatura e rientri - Uno dei modi più efficaci e sottili per variare il contrasto visivo e l'importanza relativa di una porzione di testo consiste semplicemente nell'isolarla o trattarla in modo diverso dal testo circostante. Se desiderate evidenziare le intestazioni principali di una pagina senza ingrandirle, aggiungete uno spazio sopra e sotto ogni intestazione per separarla dalle altre intestazioni e dal testo successivo. Anche i rientri rappresentano un altro modo efficace per distinguere porzioni di testo come gli elenchi puntati, le citazioni o il testo di esempio.
LA PUBBLICAZIONE E LA PROMOZIONE DI UN SITO WEB - Scelta del provider
Per dare vita al sito Web occorre trasferire i file su un server Web, che è un computer connesso a Internet sul quale è in esecuzione un apposito software chiamato appunto "server", che consente al computer di utilizzare il protocollo HTTP per inviare i file HTML ai browser Web che ne fanno richiesta. Se la propria società o organizzazione non è dotata di un server Web, occorre chiedere aiuto a un provider.
Questa è una delle scelte più importanti che può influire sul successo del vostro sito web. Il provider Internet è la società che ospiterà le pagine Web sul proprio server rendendole disponibili per chiunque conosca l'indirizzo URL di tali pagine.
Esistono anche servizi che si occupano unicamente di fornire spazio Web ma sono più adatti a ospitare siti Web commerciali di dimensioni non indifferenti.
I provider forniscono invece un accesso telefonico a Internet e nella maggior parte dei casi offrono un limitato spazio Web sul proprio server dell'ambito del pacchetto di accesso.
Per i siti Web più piccoli (circa 15 - 20 pagine di contenuti) non dovrebbero essere necessari più di 1 - 2 MB di spazio che comprendono sia le pagine che le immagini in esse visualizzate. Tipicamente un provider fornisce almeno 10 MB di spazio per offrire alla pagina Web la possibilità di crescere.
I siti più estesi o complessi richiedono una maggiore quantità di spazio, specialmente se si offrono file prelevabili, archivi, grandi quantità di contenuti grafici o database.
La ricerca di un provider Internet può non essere così semplice in quanto non sempre è agevole fare confronti esatti fra le varie offerte. Basta però eseguire qualche ricerca e informarsi sulle proposte dei vari provider.
LA PUBBLICAZIONE E LA PROMOZIONE DI UN SITO WEB - Promozione del sito
Dato che nel web esistono milioni di pagine, può essere difficile farsi notare. Si deve allora pubblicizzare quanto più possibile il proprio indirizzo URL, utilizzando tutti i mezzi disponibili, compresi biglietti da visita, lettere, cataloghi, messaggi di posta elettronica e così via. Oltre a diffondere l'indirizzo URL del sito si deve considerare il modo in cui i visitatori troveranno il sito web.
Per cercare informazioni sul web nella maggior parte dei casi si usano appositi siti chiamati motori di ricerca nei quali vengono creati cataloghi contenenti gli argomenti trattati nei siti web.
Per entrare a far parte degli indirizzi elencati dai motori di ricerca più diffusi bisogna inviare su tali siti il proprio indirizzo URL. Il motore di ricerca del sito individuerà così il sito web creando un indice delle informazioni in esso contenute.
Per sfruttare il comportamento dei motori di ricerca occorre:
Utilizzare titoli significativi; tutte le pagine del sito web devono riportare informazioni efficaci all'interno dell'elemento <title>, perché alcuni motori di ricerca leggono solo il contenuto dell'elemento <title>.
Includere elementi <meta>; tali elementi consentono di specificare delle informazioni invisibili all'utente. I motori di ricerca possono leggere queste informazioni per catalogare le pagine del vostro sito. Attraverso l'elemento <meta> si includono generalmente informazioni sull'autore delle pagine, una breve descrizione del sito ed un elenco di parole riservate che i potenziali utenti potrebbero specificare nelle proprie ricerche.
Uso di testi ALT per le immagini; é sempre consigliabile inserire delle informazioni ALT in tutte le immagini della pagina perché alcuni motori di ricerca leggono il contenuto di questo attributo che è particolarmente utile quando la pagina inizia con un'immagine.
fonte: http://www.gdesign.it
Edited by DylanDog - 2/5/2009, 16:08
.
WEB DESIGNI PRINCIPI BASE |
