Pro Get Tares

Progettare
un

Sito Web

A cura del prof. Cristoforo Modugno

Progettare un Sito Web - prof. Cristoforo Modugno - Pag. 2
1. La professione del web designer

1.1. Chi il web designer e cosa fa
Definizione di un mestiere: il Web Designer
1.2. Figure coinvolte con il web designer
Il team di progettazione e costruzione di un sito Web
2. Cominciamo a produrre
2.1. Definiamo il concept
Il concept l'idea e la base strategica di ogni sito Web
2.2. Produrre e organizzare i contenuti
Progettare il contenuto assieme al Content Manager
2.3. Controllo, valutazione e manutenzione del sito
Test e controlli da compiere una volta che il sito ondine
3. L'interfaccia e le sue definizioni
3.1. Definizione di interfaccia
Che cos' un'interfaccia: definizioni di base e modelli
3.2. L'iterfaccia e i suoi utilizzatori
L'interfaccia, i suoi obbiettivi e il sistema culturale degli utenti
3.3. Tipi di interfaccia
Le principale categorie di interfacce da poter utilizzare
3.4. Utilizziamo metafore
Utilizzare un sistema a prova di utente attraverso metafore comuni
3.5. Guidare e soddisfare l'utente
Consigli su cosa includere e come costruire un'interfaccia Web
3.6. Conclusione: l'interfaccia efficace
Quando poter considerare un'interfaccia Web efficace
4. I Software per il Web
4.1. I software per il Web
Quali sono e come usare i "ferri del mestiere" dei Webmaster
4.2. I Programmi di Grafica
Grafica Bitmap e grafica vettoriale: le immagini per il Web
4.3. Gli editor HTML
I programmi per la costruzione delle pagine Web: WYSIWYG e
testuali
4.4. Programmi per animazioni e 3D
Programmi per Gif Animate, Flash, Quick Time e 3D
4.5. I Browser
Quali sono i browser pi diffusi sul Web
5. La pagina Web

5.1. Progettare la pagina Web: Ideazione e sviluppo

Primo passo: il progetto. Concepimento e sviluppo di una pagina web.
5.2. Progettare la pagina Web: Messa online e verifica
Primo passo: il progetto. Messa online del sito e checklist di verifica
finale.
5.3. Le tensioni della schermata
Dove collocare gli elementi in una pagina Web e quali punti di forza
sfruttare
5.4. L'ipertesto e la struttura dell'Homepage
Impostare una navigazione ipertestuale e progettare una homepage
efficace
5.5. Organizzare la navigazione
Quali strumenti di navigazione utilizzare e come impostare le icone e
le metafore
5.6. Regole da tenere sempre a mente
Alcune regole da considerare nella progettazione di una pagina Web
6. Le immagini per il Web
6.1. Il formato JPG
I formati che vengono usati nel web supportati da tutti i browser sono
di sue tipi: JPEG e GIF. Li esamineremo velocemente entrambi.
6.2. Il formato gif
Come utilizzare e cosa il formato GIF
6.3. Il formato png
Come utilizzare e cosa il formato PNG
6.4. La risoluzione
La risoluzione del video e delle immagini
6.5. Suggerimenti e porzioni
Cose da tenere a mente. Come suddividere le immagini in porzioni
7. I contenuti per il web
7.1. Lo stile del Web
I principi della comunicazione e della scrittura sul Web. La scrittura
sintetica
7.2. Organizza la struttura
Il testo come uno spazio geografico e come tale deve seguire un
ordine
7.3. Consigli in pillole
Cinque consigli per scrivere un efficace testo per il Web
8. Il colore per il web
8.1. La percezione del colore
Cosa vuol dire creare ambienti reali e virtuali con il colore

8.2. Fisica, percezione e psicologia del colore

Da dove nascono, come si percepiscono e come incidono sulla nostra
mente i colori
8.3. I modelli del colore
Modello RGB e modello CMYK. Un glossario per capire i colori del Web
8.4. Tavolozza di colori per il web
Progettare i colori per tutti i browser e tutte le visualizzazioni
9. Il Linguaggio HTML
9.1. Introduzione all'HTML
Breve storia dell'HTML
9.2. Concetti di base dell'HTML
Cosa puoi fare e cosa non puoi fare con il linguaggio HTML
9.3. Anatomia di una pagina Web
I Tag principali di una pagina Web e il loro uso
9.4. Il colore e i commenti in HTML
Come esprime il colore e i commenti all'interno di una pagina HTML
9.5. Gli elementi deprecati dell'HTML
Quali sono i TAG HTML da non utilizzare. Come sostituirli con i CSS o
altro.
10. Progettare un sito basato sui frame
10.1. Panoramica sui Frame
Primo approccio al design di un sito basato sui frame
10.2. Vantaggi e svantaggi nell'uso dei frame
Cinque spunti per decidere se usare o non usare i frame
10.3. Suggerimenti per il designer
Il Web designer deve fare attenzione ad alcuni aspetti dei frame.
Vediamo quali
10.4. Creiamo un sito suddiviso in frame
Quale codice utilizzare per creare un sito basato sui frame
10.5. Dove vanno a finire i link
Gestire i collegamenti interni e esterni ai frame
10.6. Ultimi appunti
Suggerimenti utili per creare una pagina "perfetta"
11. Il mondo di Flash
11.1. Cosa Flash
Introduzione a Flash: file, estensioni, il Flash Player
11.2. Flash s / Flash No
Quando utilizzare Flash e quando meglio lasciarlo da parte
11.3. Come funziona Flash
Perch Flash cos diffuso: basi del suo funzionamento

11.4. L'ambiente di lavoro di Flash

Flash e il suo ambiente di lavoro: strumenti da tenere d'occhio
12. Linguaggi
12.1. I CSS o Fogli di stile
Cosa sono e perch utilizzare i CSS
12.2. Come utilizzare i CSS
Come utilizzare i CSS per dare un po' di "stile" alle tue pagine Web
12.3. JavaScript
Introduzione alla "programmazione" in JavaScript
12.4. HTML E JavaScript
Come integrare JavaScript in un pagina HTML
12.5. Le componenti di JavaScript
Variabili, funzioni e oggetti JavaScript
12.6. Il DHTML o HTML Dinamico
Cosa e perch utilizzare il DHTML
12.7. Prima di utilizzare DHTML
Suggerimenti per l'utilizzo di DHTML nelle proprie pagine Web
13. La tipografia per il Web
13.1. La tipografia sul Web
Perch porsi il problema della tipografia sui siti Web
13.2. La scelta dei caratteri
I passi da affrontare per scegliere i caratteri per il proprio sito
13.3. La tipografia e la scrittura I
Dare leggibilit alla pagina e risalto alle parole
13.4. La tipografia e la scrittura II
Quantit della scrittura e allineamenti dei paragrafi
14. I Motori di ricerca
14.1. Cosa sono e come lavorano i motori di ricerca
La storia dei motori di ricerca, gli spider, la segnalazione, i principali
motori
14.2. L'ottimizzazione delle pagine
Quale codice utilizzare per ottimizzare le pagine per i motori di ricerca
14.3. Alcuni suggerimenti per migliorare il posizionamento
Consigli veloci e pratici per ottenere un buon posizionamento nelle
ricerche sul motori
14.4. La pubblicit sui motori
Se avete soldi e non avete tempo potete pagare i motori

Chi il web designer e cosa fa

Il web designer si occupa dell'aspetto visivo e del coinvolgimento emotivo di
siti Web business to business e business to consumer . Il web designer risolve i
problemi di comunicazione dei loro clienti, valorizzando l'identit del marchio in
modo specificamente pensato per il web, sfruttandone i punti di forza,
conoscendo le possibilit offerte dalla tecnologia. Collabora con il gruppo di
lavoro e con i clienti per realizzare siti che siano accattivanti dal punto di vista
grafico, abbiano un buon impatto visivo, siano semplice da navigare,
compatibili con le esigenze dei visitatori e accessibili utilizzando browser e
componenti diversi. A lui spetta il compito di coniugare design e navigazione
mediante l'utilizzo delle tecnologie disponibili.
Le sue funzioni si articolano in diversi compiti, svolti in collaborazione con un
team di lavoro. Il web designer fondamentalmente un comunicatore,
capace di coniugare le esigenze del cliente con quelle degli utenti. Egli infatti:
comprende la tecnologia da usare, conoscendo le possibilit e i limiti
che si possono incontrare nella realizzazione di un sito e ne discute con i
clienti e gli altri professionisti impegnati nel progetto
traduce le esigenze, i contenuti e il marchio del cliente in concetti
strutturati adatti a un sito web, rispondendo alle esigenze degli utenti
e proponendo prove a colori, adatte allo strumento su cui saranno
veicolate e realizzabili dal punto di vista tecnico
progetta i componenti necessari alla navigazione
trasforma gli elementi di progettazione realizzati con software grafici
(Photoshop e Illustrator per esempio) in componenti utilizzabili e
modificabili su un sito Web
prepara il layout delle pagine del sito utilizzando l'HTML e altri
linguaggi di programmazione (JavaScript e fogli di stile) insieme a
sviluppatori e tecnici web

decide lo stile delle pagine web a livello di grafica, layout, tipografia,

colori.
prepara e presenta i contenuti in modo che risultino ben leggibili e ben
strutturati seguendo le linee guida stabilite dal content manager
responsabile del mantenimento del sito, apporta le modifiche
grafiche e di codice necessarie, aggiornando e curando il sito

Figure coinvolte con il web designer
Realizzare un sito web un'impresa complessa e per realizzarla bene
necessario un team di lavoro. Le figure principali coinvolte sono numerose e
ciascuna ha un ruolo importante nella realizzazione del progetto.
Identifichiamo tre aree fondamentali e un responsabile di progetto, consapevoli
che la definizione dei ruoli e delle competenze in costante evoluzione e
risponde alle necessit di un settore in espansione che crea continuamente
nuove professioni.
l il project manager: coordina i professionisti e i team di lavoro coinvolti,
stabilisce il budget necessario per la realizzazione del progetto, il numero di
persone coinvolte, le diverse voci di costo e i tempi di costruzione. in
costante contatto con il cliente.
l il team del marketing: i siti sono sempre pi numerosi. Per potersi
assicurare un traffico ragionevole sul proprio sito internet necessario un
piano marketing che:
crea i contenuti del sito: il sito web deve presentare la cosa giusta, il
prodotto giusto nel modo giusto. La scelte sui tipi di contenuti spettano
in parte all'area marketing che collabora strettamente con quella
impegnata sui contenuti
attira i visitatori: il compito del web marketing quello di immaginare
come condurre i navigatori del web sul proprio sito. Creare partnership,

preparare campagne di comunicazione, monitorare l'utenza sono tra le

funzioni di quest'area.
l il team dei contenuti: esperti di scrittura sul web, giornalisti e scrittori si
occupano della redazione dei testi, guidati dal content manager, responsabile
dell'organizzazione e del trattamento dei contenuti. Lo sviluppo di portali e di
siti ad alta quantit e qualit di informazioni ha dato maggiore importanza a
quest'area, fondamentale per garantire fidelity tra gli utenti.
l il team di produzione, composto da
il web concept designer: stabilisce col cliente e con il project manager
l'identit digitale che il sito deve trasmettere e che deve essere coerente
all'interno di tutte le pagine che compongono il sito stesso.
il web designer: costruisce l'architettura del sito, il modello di
navigazione e di interfaccia utente. Decide l'aspetto del sito, integrando
testo, grafica e animazione per avere un'unica soluzione che soddisfi gli
scopi e i desideri del cliente
specialista del multimediale: audio MP3, Flash e Realmedia sono tra
le opportunit che il web offre per chi crea pagine web. Vista la
complessit di questi programmi, utile affidare a figure professionali
specializzate la creazioni di animazioni e applicazioni altamente
interattive
esperti di programmazione: l'HTML un linguaggio che richiede molta
creativit e intuito. Per ragioni tecniche i browser interpretano a volte i
codici in maniera diversa, con il rischio di cambiare il risultato finale della
pagina web. Per questo motivo esperti dei linguaggi digitali garantiscono
che il layout stabilito dal web designer si conservi indipendentemente
dalla macchina in cui sar visualizzata la pagina internet. Realizzando un
sito necessario anche il contributo non solo di programmatori di
linguaggi, ma anche di tecnici capaci di implementare database,
sviluppati con software che utilizzano il linguaggio PHP, Microsoft ASP .

Definiamo il concept
Uno dei cambiamenti pi determinanti segnati dalla rete il passaggio dai siti
tradizionali "vetrina" in cui si presenta il "chi siamo", "cosa facciamo", "i nostri
prodotti" ad un'idea di presenza sul web che abbia un valore aggiunto. I siti
sono sempre pi delle strutture complesse che permettono l'identificazione
della marca, attraverso un media nuovo, che diventa parte integrante di una
strategia di comunicazione completa. Si punta quindi all'omogeneit, come
possibilit di riconoscere la marca anche nei servizi che offre. Questo obiettivo
di coerenza deriva dall'esistenza di un concept. C' un mondo all'interno del
sito con dei codici di riferimento e una forte coerenza interna che contribuisce
a mostrare quello che il sito vuole trasmettere.
Il concept un'idea e Internet il campo ideale dove trasferire l'idea che il
concept definisce. Un sito quasi sempre la metafora comunicativa di ci che il
concept, vuole trasmettere. I siti di e-commerce diventano metafore di fiere di
paese, i siti di informazione metafora di quotidiani e lo sviluppo nel concept
influenza la struttura e la navigazione del sito, permeandole con questa
metafora.
In realt, il concept non solo un'idea, ma un progetto. Questo significa che
diventa l'elemento che fornisce identit alla marca, da sviscerare in tutte le sue
componenti fino ad arrivare alla definizione del piano editoriale. In questo si
evidenzia la differenza pi forte tra il web e i media tradizionali. Nella
pubblicit esiste un concept di strategia: nella fase di produzione c' bisogno di
uno studio dettagliato, mentre in una frase come "Dove c' Barilla, c' casa"
semplicemente definita la promessa. Un sito Internet ha invece una struttura
complessa, non chiusa in s stessa, perch si tratta di un prodotto di
comunicazione, ma anche di un prodotto di servizio.
Sorge a questo punto la domanda spontanea: il concept, idea e progetto,
strategia o creativit? In realt entrambe le cose. Definisce gli obiettivi di
business, legando obiettivi di guadagno alla creativit.
Il concept designer la figura che durante tutta la durata del progetto
garantisce che i concept iniziali, definiti in fase di analisi e strategia, vengano

rispettati e non siano stravolti nel momento in cui per esempio si procede al
restyling o in una campagna pubblicitaria. In sostanza il concept designer un
garante della continuit del progetto. Alcune delle sue attivit percorrono tutto
il progetto, mentre altre incidono particolarmente in momenti specifici.
Nelle fasi prima evidenziate le attivit fondamentali del concept possono essere
sintetizzate cos:
Fase Aree di competenza Attivit correlate
1. Analisi Analisi della concorrenza Benchmark della concorrenza
online
Analisi semiotica Studio della percezione
dellimmagine aziendale
(attraverso il sito) presso il
pubblico
Analisi del contesto Web watching, news, mailing
list, forum, ecc.
Web trends Dati circa lutenza Internet
(analisi quantitative di tipo
campionario; analisi quali-
quantitative on-line e off-line,
attraverso interviste, focus
groups, ecc.)
Concept test Test di usabilit di un
prototipo e post-lancio
2. Strategia Posizionamento e
progettazione dellidentit
digitale dellazienda
Relation and communication
marketing program
Cross media strategy Concept publishing
Web designing

3. Produzione Definizione dellimpianto

grafico con il web designer e
del piano editoriale con il
web content manager.
Attivit di monitoraggio e di
guida

Il lavoro del concept designer si concretizza nella redazione di un documento
di concept che definisce l'identit, i messaggi comunicativi, la strategia e i tipi
di interazione che si vogliono avere con gli utenti. A ci si aggiunge la
definizione delle aree concettuali. Sintetizzando le diverse parti di questo
documento, che d il nome al professionista che lo scrive abbiamo:
Premessa: cosa conterr il documento
Obiettivi del progetto
Obiettivi del documento, da non confondere con quelli del progetto
Utilizzo delle piattaforme
Target: anche in relazione alla rete, accentuando aspetti qualitativi e
riferimenti a target laterali
Valori della marca: cosa deve trasmettere una marca e dove deve
trasmettere questo messaggio
Value Proposition: area che attiene al business e mette in luce i bisogni
del target che si intendono soddisfare
Concept: il cuore del documento, l'idea
Linee guida della comunicazione, elementi soggetti a modifiche costanti
Grafica: forme, colori, icone, foto, modalit di fruizione dei contenuti,
struttura
Macrostrategia dei contenuti, dipende direttamente dalla strategia e
determina le aree di contenuto e i loro pesi
Il documento di concept si rivolge a tre pubblici differenti:

interno: le persone che costruiranno il sito

esterno: l'azienda cliente
l'utente finale: destinatario dell'idea che si vuole esprimere, un target
di primo livello e come gli altri deve percepire subito l'idea contenuta nel
concept.
La difficolt maggiore consiste nel potersi far comprendere da tutti i pubblici
che sono assai differenti. Apparentemente poco concreto, il documento di
concept spiega il perch e motiva di alcune scelte.
Prima di redigere il documento di concept, importante definire la digital
strategy, documento che raccoglie elementi della marca gi esistenti. Il
posizionamento su un canale digitale per una marca significa creare un e-
brand. Partendo dall'analisi degli obiettivi di comunicazione tradizionale, utile
evidenziare quelli per il web, che hanno principi diversi.
Tenendo conto che l'utente in Internet non il consumatore, l'immagine di
marca deve essere trasferita in rete. Tante le differenze: non si pu puntare
sull'emozionalit pura (al contrario dello spot pubblicitario), bisogna
conquistare rapidamente e cercare di trattenere offrendo qualcosa. C' una
cultura di marca con cui fare i conti e una cultura di marca digitale da creare
su Internet.

Produrre e organizzare i contenuti
I contenuti internet sono assai diversi e richiedono strumenti e metodologie
che possano permettere la gestione, la trasferibilit e la fruibilit efficace.
Le tipologie dei contenuti sono svariate: informativi, interattivi,
rappresentativi, educativi, istituzionali, d'intrattenimento, promozionali.
Scelti in maniera coerente con l'obiettivo del sito, possono avere diversi
formati: testi (per cui si dovranno gestire lunghezze, suddivisioni, ipertesti,
archivi); immagini (l'attenzione qui sar posta su dimensioni, taglio, figure,
sfondo, peso, sequenze, didascalie, copyright); elementi di interazione

(email, forum, chat, sondaggi, questionari, newsletter); audio, video e altri

file (la presenza di file da copiare, visualizzare, ascoltare e scaricare crea
problemi legati ai limiti di peso e banda larga, convergenza fra internet e la
televisione, download, necessit di software per diffusione e utilizzo).
Infine i microcontenuti. Definiti da Jacob Nielsen "perle di chiarezza",
garantiscono una migliore navigazione del sito ed una pi rapida acquisizione
dei contenuti. Tra gli altri men e indici, titoli e sottotitoli, didascalie, parole in
grassetto, link, URL, bottoni, infografica, nomi dei file, nomi delle cartelle,
didascalie, titoli delle pagine (nel codice), meta keyword (nel codice), meta
description (nel codice), oggetti delle mail, titoli di forum e sondaggi.
L'attenzione a questi elementi facilita la navigazione interna ed esterna,
fornisce informazioni rapide, articola l'ipertesto, favorisce l'attivit dei motori di
ricerca, facilita l'organizzazione di archivi.
I siti sono spesso redatti in pi lingue. Non sempre basta la semplice
traduzione dei testi, risolvibile con una clonazione (e limitando i problemi a
questioni di lunghezza): in certi casi necessario adeguare la comunicazione al
contesto culturale del paese interessato, attivit non sempre cos facile.
Chi si occupa di content attua scelte stilistiche, analitiche e strategiche del sito.
Partendo dai dati forniti dal business plan e dal marketing plan, il content
manager stende il piano editoriale, descrive in modo dettagliato quali sono i
contenuti e gli strumenti di gestione, decide le tipologie di argomenti da
inserire, i servizi da fornire (forum, chat, posta, motori di ricerca.) e i
programmi utilizzati per la gestione e per la pubblicazione (editor, sistema
editoriale, CMS...). Collabora nella creazione di database, sistemi di
"profilazione" utenti (registrazione, questionari) e programma l'archiviazione
(consistenza e previsione crescita). Stabilisce poi i servizi da fornire, elenchi
puntati, indici, mappa, motori di ricerca interni, modalit di registrazione. D
indicazioni a chi fa il template, lavorando con il grafico e con chi si occupa della
struttura informatica.
La gestione dei contenuti avviene spesso attraverso l'uso di sistemi informatici,
detti sistemi di content management (CMS). Questi sistemi raccolgono l'intero

processo tecnologico dalla fonte alla pubblicazione, anche se non sempre

considerano tutto il processo nella sua complessit ed quindi necessario
intervenire per garantire l'impostazione data e la struttura definita nel piano
editoriale.

Controllo, valutazione e manutenzione del sito
Il controllo della qualit uno degli step pi trascurati ma che, insieme ai
test di utilizzo invece fondamentale. Potrebbe essere utile prevedere circa il
10% del tempo e delle risorse del progetto a questa fase, che garantir la
soddisfazione del tuo cliente, garantendogli un prodotto funzionante. Il
processo di testing pu essere svolto in modo informale da alcuni membri del
team impegnato sul progetto, oppure in modo pi esteso, ricorrendo ad un
altro gruppo di persone o ad un'agenzia esterna.
utile stabilire un piano di controllo qualit fin dall'inizio: pi il sito
complesso, pi sar grande l'impegno nell'attivit di testing. Link, template,
script, frame. sono tutti elementi da controllare. Scegli il livello di controllo pi
adatto al progetto realizzato, stabilisci risorse e tempi da dedicarci, aspettative
e criteri di valutazioni, persone da coinvolgere e suddividi le responsabilit tra
team e cliente.
Identifica due fasi nel controllo della qualit: il primo per individuare gli errori,
il secondo, dopo averli corretti, per verificare la funzionalit finale del prodotto.
I criteri di valutazione cambiano per ciascun caso e dipendono dal tipo di sito:
pop up, procedure di login, sistemi operativi. Tra i vari tipi di test di base
ricordiamo:
testing informale: senza un piano formalizzato, quello pi
frequentemente utilizzato
alpha testing: il controllo iniziale di un sito dopo il completamento di
produzione e funzionalit che avviene prima della pubblicazione
test di utilizzo: un'analisi delle effettive interazioni tra utente e sito.
Sono stabiliti dei task da raggiungere e l'utente osservato direttamente

user acceptance: una batteria di test che dipendono dalle

caratteristiche del progetto e hanno l'obiettivo di verificare la
rispondenza ai requisiti degli utenti
check up contenuti: controllo dell'esatta collocazione e correttezza dei
contenuti pubblicati (testi e immagini)
beta testing: controllo finale di tutto il sito appena prima del lancio
(quando il sito stato gi caricato sul server)
Tra i test avanzati:
test di carico: si simulano un gran numero di accessi simultanei per
verificare i limiti di carico di lavoro che il server riesce a sostenere
test funzionale: serve per confermare le funzionalit implementate in
rapporto alla lista delle specifiche. Chi fa il test non conosce i dettagli
della programmazione ma i risultati attesi
pre-test delle componenti: verifica ciascuna componente della pagina
web prima dell'assemblaggio e dell'integrazione
controllo finale: svolto a posteriori, dopo aver effettuato il debugging.
Garantisce che tutti i bug siano stati coretti e che il codice funzioni dopo
le correzioni.
test di sicurezza: verifica che hacker e accessi illeciti ai dati raccolti
siano esclusi
Una volta conclusa l'attivit di controllo, con un'attenta valutazione del
progetto realizzato finalmente giunto il momento di essere online. La
valutazione del sito fatta misurando, in tempi differenti, il raggiungimento
degli obiettivi fissati all'inizio. Per attuarla, saranno utili analisi e feedback degli
utenti, che potranno essere raccolti utilizzando form e questionari
Un volta online, il sito comincia ad esistere e il lavoro non finisce qui. L'attivit
di manutenzione funzionale alla nascita di una relazione duratura con
l'utente che torner a visitare il sito solo se questo sapr rinnovarsi e fornire
sempre qualcosa di nuovo. Secondo una recente analisi di Forrester Resarch

tra i motivi che spingono un utente a tornare su un sito c'era l'alta qualit dei
contenuti, la facilit d'uso, i tempi brevi di caricamento, gli aggiornamenti
frequenti. Sono proprio gli aggiornamenti regolari che mantengono contenuti di
alta qualit, sempre nuovi. Non porre l'attenzione solo sul punto di vista
tecnico, ma anche sugli aspetti stilistici e redazionali dei contenuti. Si visita un
sito alla ricerca di informazioni: quelle dovranno essere presentate e redatte
nel modo pi efficace e chiaro possibile. L'area content acquista in questa fase
un ruolo strategico e potr garantire il ritorno sul sito dei visitatori.
Insieme agli aspetti contenutistici, occorre un piano per gli aggiustamenti
immediati, per quelli regolari e a lungo termine. Includi anche le modalit per
affrontare i malfunzionamenti, i problemi di utilizzo e gli aggiornamenti
programmati. Verifica i feedback degli utenti con test di utilizzo non solo
appena siete online, ma anche dopo qualche mese. L'attivit di manutenzione
e aggiornamento potr essere affidata ad un team interno o esterno
dell'azienda cliente, ma in ogni caso ti permetter di stimare e definire poi gli
obiettivi dopo il lancio.

Definizione di interfaccia
Il vocabolario definisce interfaccia l'elemento di contatto o di intermediazione
fra entit, sistemi, cose o persone diverse . Si tratta di un insieme di strumenti
che consente l'interazione con un ambiente.
Anche se non ce ne rendiamo conto, nella vita di tutti i giorni utilizziamo un
gran numero di interfacce, come per esempio:
rubinetti
stereo
lavatrice
telecomando TV
interruttori
sistemi di apertura-chiusura di porte

sistema di guida dell'automobile (cruscotto + comandi)

computer (sistema operativo e programmi)
Quando parliamo di Internet, l'interfaccia quell'insieme di strumenti (per lo
pi piccole immagini, scritte e testi) che consentono la navigazione nel sito. Tra
le caratteristiche principali di un'interfaccia che funzioni ci sono due elementi
fondamentali: chiarezza e semplicit, garanzia di efficacia comunicativa.
Ti mai successo di trovarti davanti ad una porta e di non capire come fare
per aprirla? proprio quando ci troviamo di fronte a oggetti di uso quotidiano,
che non riusciamo ad usare in modo immediato e spontaneo che ci imbattiamo
in esempi di cattiva interfaccia.
Un esempio di un'interfaccia ben progettata invece il sistema dei comandi di
un'automobile. Se sai guidare, puoi utilizzare anche macchine che non hai mai
usato prima, seguendo comportamenti e azioni che fanno parte ormai
dell'abitudine di qualunque conducente.
Progettare l'Interfaccia Utente significa comporre in un unico disegno:
metafore di interazione, immagini, e concetti usati per veicolare funzioni e
contenuto informativo sullo schermo. Proprio per questo risulta essere di
fondamentale importanza un'accurata progettazione che ponga l'attenzione
sull'Utente e i suoi Compiti piuttosto che sugli aspetti tecnologici .

L'iterfaccia e i suoi utilizzatori
L'interfaccia permette l'utilizzo di un sistema tecnologico complesso e dipende
dal livello di esperienza culturale di chi utilizza l'oggetto tecnologico, cio
dall'esperienza e dal know how di quell'ambiente specifico posseduti
dall'utilizzatore. possibile riuscire ad utilizzare un telefonino con le istruzioni
in cinese, se hai una buona esperienza di telefonini perch sei in grado di
interpretare la struttura semiotica del telefonino anche senza capire i singoli
"segni".

Nello stesso modo puoi utilizzare una macchina con cui hai minore
dimestichezza se le istruzioni (cio l'interfaccia) sono sufficientemente chiare.
Sintetizzando, per utilizzare agevolmente una interfaccia due sono le opzioni
possibili: "capire" il linguaggio e/o devo "conoscere" l'utilizzo. Un'interfaccia fa
sempre riferimento ad un ipotetico "livello medio" cognitivo dell'utilizzatore,
che si identificano con l'ambito culturale e la familiarit tecnologica col sistema.
cosa nota che gli utenti di molte "macchine"- dai videoregistratori al
computer - utilizzano solo in parte l'insieme delle operazioni consentite dalla
"macchina". Proprio per questo si identificano tre categorie di operazioni, che
qui sintetizziamo:
1. le operazioni che un oggetto permette di compiere
2. le operazioni che l'utilizzatore percepisce come consentite dall'oggetto
3. le operazioni che l'utilizzatore effettivamente compie con l'oggetto
Una buona interfaccia (o potremmo dire un buon design) deve ridurre le
distanze tra le operazioni che l'oggetto permette di compiere e quelle che
effettivamente compie. Il progetto di una interfaccia di un sito Web efficiente
deve rispondere ai requisiti di facilit di navigazione e deve essere
caratterizzato da una organizzazione intuitiva.

Obiettivi dell'interfaccia web
Una buona interfaccia web deve assolvere a diverse funzioni:
far percepire i contenuti
permettere di individuare le principali aree tematiche
far orientare il visitatore, cio far capire dove si trova in ogni momento
consentire di passare agevolmente da un argomento all'altro con percorsi
diretti e rapidi
facilitare la ricerca di un argomento

Gli obiettivi, che sembrano ambiti, si raggiungono utilizzando sia testi che
immagini. A quelli vanno aggiunti creativit e capacit comunicative e
soprattutto la capacit di mettersi nei panni del nostro visitatore.

Tipi di interfaccia
Agli albori di Internet, non esistevano interfacce grafiche, ma solo interfacce
testuali. Oggi le cose sono molto cambiate e il linguaggio visuale diventato
un elemento fondamentale nel sistema di comunicazione dell'interfaccia.
L'idea di base di Internet molto semplice: costruire un ponte tra l'uomo e
la rete che risulti il pi intuitivo possibile. La rete ci deve sembrare come parte
integrante dell'ambiente che ci circonda se non del proprio corpo. In effetti
dopo aver lavorato per un po' con il Web, questa diventa come un luogo fisico
nel quale ci muoviamo senza problemi sfruttando la mappa che il cervello
costruisce e aggiorna in continuazione usando le informazioni che gli arrivano
dagli organi di senso.
Tim Berners Lee, l'inventore di questa interfaccia, ha raccontato di aver
sempre avuto problemi a ricordare i nomi delle persone e di aver all'inizio
usato l'ipertesto come una specie di sostituto della propria memoria. In seguito
ha avuto l'idea del Web (cio l'ipertesto implementato su Internet) perch cos
poteva cercare non solo sui propri documenti ma anche sui documenti di altri
colleghi sparsi in tutto il mondo.
Esistono vari tipi di interfaccia, ma possiamo dividere i modelli esistenti in tre
categorie:
Interfaccia come simulazione: interfacce che simulano un ambiente
"virtuale" o una esperienza, come per esempio i videogiochi o i cosiddetti
ambienti virtuali
Interfaccia come rappresentazione: interfacce che usano come link
degli oggetti che richiamano delle azioni, come per esempio le mappe
geografiche interattive, dove per avere notizie di un determinato

monumento basta cliccare sopra al disegno che rappresenta il

monumento in questione.
Interfaccia come azione: interfacce in cui il linguaggio visuale
rappresenta l'azione consentita: una freccia per andare avanti o indietro,
le forbici per tagliare, la busta delle lettere per spedire una e-mail, etc.

Utilizziamo metafore
L'Enciclopedia Europea Garzanti definisce metafora (dal greco metaphrein,
portare oltre) la "figura semantica per cui si realizza un trasferimento di senso
da un termine proprio ad un altro legato al primo da un fattore di equivalenza"
Trasferimenti di sensi che collegano elementi appartenenti a mondi che paiono
cos distanti capitano tutti i giorni e spesso colorano il nostro parlare. Pensiamo
alla strada metafora della vita, al sole metafora della luce.
Puoi approfittare della conoscenza che la gente ha del mondo che la circonda
usando le metafore per trasportare i concetti e le caratteristiche
dell'applicazione su cui stai lavorando. Usa le metafore che coinvolgono le idee
concrete e gli oggetti reali per renderle adatte allo scopo, di modo che gli
utenti avranno pi familiarit con le operazioni che il computer e quindi il web
permettono di fare. Un esempio semplice la HOME con cui viene definita la
prima pagina dei siti Internet. Casa, ingresso, primo contatto e non solo:
benvenuto. per poi entrare nelle diverse stanze di cui il sito - in questo caso -
fatto.
Un altro esempio quello che avviene negli uffici per la catalogazione dei
documenti: ci sono degli archivi che contengono tante cartelle divise per
argomenti e a loro volta nelle cartelle troviamo i fogli che trattano gli
argomenti indicati nelle cartelle. La stessa cosa avviene nei computer: l'utente
non conosce la programmazione che serve per catalogare i file o dividerli, ma
dato che ha familiarit con l'idea delle cartelle e dei fogli, riesce agevolmente a
gestire la divisione dei file grazie alle icone usate per rappresentarli. Le

metafore nell'interfaccia del calcolatore suggeriscono un uso per qualcosa, ma

quell'uso non definisce o non limita l'esecuzione della metafora.

Guidare e soddisfare l'utente
L'utente deve sempre avere l'idea di essere lui a controllare ci che vuole fare
e non il computer a decidere per lui. Troppo spesso, tuttavia, l'utente reagisce
soltanto all'interno di un insieme limitato di opzioni. La soluzione ideale
generare un equilibrio tra il fornire agli utenti delle possibilit di scelta e nello
stesso tempo "guidare" l'utente fornendo dei percorsi chiari indicati da noi.

Dai sempre una risposta
Fai in modo che i tuoi utenti siano sempre "informati" su che cosa accadr
dopo le loro azioni. Forniscigli nel pi breve tempo possibile una risposta,
visiva o uditiva (o entrambe). Darai all'utente la sensazione che la tua
applicazione ha ricevuto l'input dell'utente e sta funzionando su esso. Se usi
flash nei tuoi siti, prevedi che ci sar un lasso di tempo durante il quale
avverr il caricamento dei file e l'utente non vedr nulla, a meno che utilizzi i
famosi "loading": immagini e suoni che fanno percepire che il computer sta
caricando i file che corrispondono a quello che gli stato chiesto. L'utente
capir cos che alla sua azione seguir qualcosa e l'attesa si far pi paziente,
senza perdere di aspettative.

Dai valore alla coerenza estetica
Le esigenze di un'interfaccia funzionale non devono tuttavia farti dimenticare
che i suoi elementi devono obbedire anche a regole estetico-culturali che
danno identit all'ambiente. Non diversamente da quanto avviene in una
progettazione tradizionale forme, colori, disposizione degli elementi,
"comunicano" chi siamo o chi vogliamo essere. Integrit estetica significa che
l'informazione organizzata bene ed coerente rispetto ai principi del visual

design. Ci significa che i contenuti sono ben visualizzati sullo schermo e la

tecnologia dell'esposizione di alta qualit.

Tieni conto del target
Identificare e capire il target a cui ti rivolgi una delle cose pi importanti
quando ti accingi a progettare la tua interfaccia.

Accessibilit
Un'interfaccia ben progettata dovrebbe essere accessibile a chiunque sceglie di
usarla. Gli utenti varieranno indubbiamente per et, stili ed abilit. Possono
anche presentare le limitazioni fisiche o conoscitive, differenze linguistiche o
semplicemente di attitudini. Cerca di considerare le differenze. Fa si che i tuoi
siti siano accessibili esaminando i bisogni e le aspettative culturali e
linguistiche dei destinatari. Su HTML.it disponibile una guida dedicatata
all'accessibilit.

Conclusione: l'interfaccia efficace
Alla fine delle osservazioni fatte fino ad ora giungiamo a una considerazione
importante: se l'interfaccia buona non si nota, sembra "logica" e permette di
navigare il sito senza preoccuparsene. Evidenzia i contenuti e non se stessa.
Rifletti quindi quando ti accorgi che un'interfaccia, porta di accesso a qualcosa
d'altro, talmente "discreta" da non farti accorgere della sua esistenza. Quella
un'interfaccia efficace.

Il Consiglio Del Web Designer ;)
Il nostro sito deve essere sempre un giusto mix tra interfaccia e contenuto:

se non offriamo al nostro utente dei contenuti interessanti, non

riusciremo a fidelizzarlo offrendo solo un'interfaccia ben realizzata e una
grafica accattivante
se rendiamo solo i contenuti interessanti offrendo un'interfaccia
progettata male e una grafica poco curata, difficilmente l'utente riuscir
a trovare ci di cui ha bisogno
la rete grande e lenta: il surfer non vuole perdere il suo tempo per
trovare le cose che gli interessano. Le prime 10 ore in rete le ha passate
per capire come arrivare nei posti che cerca. Le prime 100 ore ha
guardato i siti che gli amici e i giornali gli avevano segnalato. Le prime
1000 ore le ha "perse" per surfare un po' a caso, arrivando in posti
incredibili (incredibilmente belli o incredibilmente brutti). Da qui in poi ha
sufficiente "uso di mondo" da decidere cosa gli interessa e cosa no e da
volerlo fare in pochi minuti (o anche meno).
Attenzione: ci saranno sempre pi surfers con oltre 1000 ore di rete...

I software per il Web
Il lavoro del web designer richiede, oltre a una pi che buona cultura grafica,
una grande creativit e curiosit. Devi leggere molto, informarti e seguire tutte
le iniziative che riesci a trovare che possono essere inerenti alla comunicazione
e all'arte: devi essere curioso! Ovviamente devi avere anche una buona
"cassetta degli attrezzi" e conoscere bene tutti i "ferri del mestiere" che
contiene.
Ovviamente i "ferri del mestiere" sono, nel tuo caso i software, che, se
conosciuti bene, possono esserti di grande supporto per svolgere al meglio il
tuo lavoro, a patto di non far mai prevalere il mezzo sulla logica. Devi sempre
ricordare che i software sono paragonabili alla matita dei vecchi architetti. Non
mai stata la matita a prendere importanti decisioni progettuali, o a produrre
progetti che puntassero sull'effetto che la matita poteva rendere sulla carta, o
tanto meno a condizionare l'architetto a punto tale da non seguire con

coerenza le finalit del progetto. Un progetto deve essere forte perch ben
pensato e studiato, il software solo un mezzo, attraverso il quale puoi
realizzare il tuo progetto.
Fortunatamente i software a nostra disposizione sono moltissimi, e
interagiscono tutti abbastanza bene tra di loro. Il numero dei software non
deve spaventarti: ricorda che imparare ad usare un programma non un
problema, basta l'impegno e l'esercizio, la cosa che pi devi curare
l'attitudine alla progettazione, la capacit di capire un progetto e portarlo a
termine nel migliore dei modi, questa una cosa che difficilmente imparerai
con una guida o un manuale, ma solo con la tua volont e la voglia di
migliorare!
Finita la "paternale" rimbocchiamoci le maniche e vediamo quello che possiamo
fare.

I "Ferri Del Mestiere"
I software che hai a disposizione per fare al meglio il web designer possono
essere divisi in quattro categorie principali:
1. Programmi di grafica (disegno e fotoritocco)
2. Editor HTML
3. Programmi specializzati nell'applicazione di effetti particolari a testo e
immagini (come animazioni e 3D)
4. Browser
Molti dei programmi potranno essere scaricati dalla sezione Download di
HTML.it.

I Programmi di Grafica

Prima di parlare nello specifico dei software devi sapere dei concetti di base
sulle immagini del computer. Le immagini che visualizzi nel tuo monitor non
sono tutte uguali, ma si dividono in due categorie
immagini bitmap
immagini vettoriali
Le immagini bitmap, chiamate anche immagini raster, sono quelle immagini
che per la loro visualizzazione hanno bisogno di una griglia o retino di piccoli
quadratini (i pixel). A ogni pixel di un'immagine bitmap il computer assegna
una posizione specifica e un valore di colore.
Da queste considerazione capirai che quando intervieni a modificare
un'immagine bitmap operi sulla modifica di gruppi di pixel anzich sulla
modifica di oggetti o di forme. Questa categoria di immagini dipendono dalla
risoluzione cio il numero di pixel per unit di superficie.
Usa questo tipo di immagini per riprodurre foto o immagini che necessitano di
sottili sfumature cromatiche.
Le immagini vettoriali sono caratterizzate da linee e curve definite da entit
matematiche: i vettori. I vettori descrivono un'immagine o meglio i disegni in
base alle loro caratteristiche geometriche. Il vantaggio delle immagini vettoriali
la loro indipendenza dalla risoluzione. Infatti puoi ridurre o ingrandire
un'immagine vettoriale senza temere di perdere in definizione, poich non vai
a intervenire sulla grandezza del file in termini di peso (Kb).
Usa le immagini vettoriali per riprodurre contorni nitidi o disegni geometrici,
per i caratteri o le immagini piatte, come ad esempio i logo.
A monitor difficilmente puoi renderti conto della differenza reale che c' tra
questi due tipi di formato perch il monitor del computer rappresenta le
immagini visualizzandole su un retino, quindi entrambi i formati vengono
rappresentati a video in pixel.
In commercio puoi trovare software che gestiscono o l'uno o l'altro tipo di
immagine, ma puoi trovare software in grado di gestirli entrambi.

Vediamo insieme quali sono i programmi pi famosi e che vengono usati in

ambito professionale.
1. Gestione delle immagini bitmap: Adobe Photoshop (arrivato alla versione
7)
2. Gestione delle immagini vettoriali: Macromedia FreeHand (arrivato alla
versione 10), Adobe Illustrator (arrivato alla versione 10)
3. Gestione di entrambi i formati: Macromedia Fireworks (arrivato alla
versione 4)

Gli editor HTML
Per quanto riguarda gli editor HTML hai a disposizione due tipologie di
approccio per scrivere il codice:
Editor testuali
Editor What You See Is What You Get (WYSIWYG)
Gli Editor testuali sono programmi che ti permettono di effettuare modifiche
direttamente sul codice HTML puro con possibilit di preview del risultato. Per
renderti pi facile la scrittura del codice ti mettono a disposizione comandi
preconfezionati attivabili con semplici click. Il difetto maggiore
nell'apprendimento pi difficile rispetto agli editor WYSIWYG.
Gli Editor What You See Is What You Get, che sono indicati per brevit con
l'acronimo WYSIWYG, possono gi dal nome farti capire che con questo tipo di
editor ci che vedi sullo schermo ci che ottieni nel browser Web. In altre
parole con questi editor non visualizzi il codice HTML ma gli oggetti, le
immagini ed il testo. In questo modo hai la possibilit di non lavorare
direttamente sul codice HTML ma vedrai la pagina cos come sar visualizzata
nel browser. In pratica puoi semplicemente prendere gli oggetti, il testo e le
immagini e spostarle con un semplice click del mouse.
Il vantaggio di questo tipo di editor evidente: lo sforzo di comprensione delle
specifiche HTML ridotto al minimo e il tempo di apprendimento brevissimo.

Questo tipo di editor, per spesso genera un codice "sporco" su cui bisogna
comunque intervenire manualmente per correggere gli errori, quindi, devi in
ogni caso conoscere bene il codice per essere in grado di capire dove si
nascondono i problemi.
Vediamo insieme quali sono gli editor pi usati:
Editor testuali:
HomeSite
HotDog
Editor What You See Is What You Get:
Front Page
Editor WYSIWYG e Testuali:
Dreamweaver MX

Programmi per animazioni e 3D
Il web ti offre la possibilit di dar vita ad un'idea in modo multimediale
attraverso movimento, suono, interazione e passaggio del tempo. Questo puoi
farlo attraverso diversi tipi di programmi che producono diversi tipi di formati
che il web in grado di visualizzare.
Facciamo una panoramica di quello che in termini di multimedialit possibile
creare per la rete.
Gif animati
Sono delle piccole animazioni che non presentano praticamente alcun
problema di compatibilit ma ti offrono ben poche possibilit di effetti e
nessun tipo di interazione, tanto che dovresti usarli quasi solo per i
banner, in quanto presentano comunque il vantaggio di articolare un
discorso in pi fasi, grazie al movimento. Sono usati quasi sempre in loop
(cio con il movimento che si ripete indefinitamente) ma possono anche
essere impostati diversamente, cio con un numero definito di ripetizioni.

Si realizzano con svariati tipi di software da quelli comunemente usati

per la grafica a quelli che ti permettono di fare animazioni.
Flash
Flash ti da la possibilit di animare gli oggetti, permettendo all'utente di
un sito web di interagire con queste animazioni. Flash ti permette di
esprimere un messaggio, attraverso l'uso di diverse forme di
comunicazione, il programma multimediale per eccellenza, ma richiede
un progetto ben studiato per funzionare al meglio. Flash un software
che offre tantissime possibilit, ma viene troppo spesso impiegato in
modo errato, per "meravigliare" e fare sfoggio di "muscoli multimediali",
piuttosto che contribuire a dare corpo e spessore ai contenuti di un sito.
L'unico problema di questo software, che speriamo sar risolto con le
nuove versioni del programma, la difficolt dell'aggiornamento.
Quick time
Quick Time una tecnologia Apple per contenuti di tipo audiovisivo,
creata nel 1991. E' supportata sia da Mac che da PC e attualmente molto
diffusa per le sue qualit di compatibilit e compressione (file "leggeri" e
"limitato" tempo di download). Non usare questo software per realizzare
interfacce, non sicuramente sviluppato per questa funzione anche se
permette una limitatissima interattivit. QuickTime anche utilizzabile
come helper, in questo caso si aprir sul tuo monitor QuickTime Player,
che ha un set di comandi minimo. Le funzionalit di streaming presenti
da Quick Time 2.5 in poi, hanno reso questo formato competitivo con
Real (il cui vantaggio resta comunque uno streaming migliore).
Real Audio/Video
Real un'altra tecnologia di compressione e trasmissione di materiali
audiovisivi. Real Audio stata la prima tecnologia veramente diffusa ed
efficace per trasmettere voce e musica via web, consentendo la nascita
delle prime web radio. Anche il player di Real, come il player di
QuickTime uno helper, distribuito freeware ma non presente

"automaticamente" su ogni computer. I file Real, infine, consentono

un'interattivit limitatissima.
Shockwave
Shockwave il fratello maggiore (pi anziano e per certi versi potente) di
Flash. A differenza di Flash, shockwave non viene intallato di default con
i browser e se non completamente scomparso, solo perch il
formato per salvare da Director (principale applicazione per lo sviluppo di
CD rom) file visibili via web.
Il mondo del 3D
Un altro modo per creare animazioni per il web l'uso di software 3d. Il
pi famoso sicuramente 3d studio max che prevede diversi metodi di
creazione delle animazioni. Con questo software si possono creare
oggetti tridimensionali molto complessi e dare loro un'animazione. 3D
studio ti permette di esportare l'animazione nei formati pi disparati:
.swf, .mov, .avi, e molti altri. Questo software ha fondamentalmente due
problemi: abbastanza complesso da usare (anche se poi da molte
soddisfazioni) e gira solo su PC. Per il Machintosh esistono dei programmi
analoghi al 3d studio, ma che non permettono la stessa qualit di
rendering.

I Browser
Il browser o client web il software di cui necessitano gli utenti per accedere a
Internet e al mondo del WWW. I browser web sono diversi a seconda delle
macchine su cui girano. Comunque tutti i browser grafici si basano sul click del
mouse per interagire con le informazioni. Approccio condiviso anche dai
browser che visualizzano esclusivamente testo come Lynx.
Internamente, il browser una macchina che riceve file di diverso tipo e li
assegna a una macchina interna:
HTML (rasterizatore

JPG, GIF, PNG (bit blaster

Javascript (interprete
Java (motore esterno: la Java Virtual Machine
Dove non arriva il browser c' il plug-in, che "vive" dentro al browser e mostra
ci che elabora dentro la finestra del browser. I plug-in sono multibrowser, cio
funzionano con vari tipi di browser, e sono multipiattaforma, cio funzionano
sia su Mac che su PC, sono aggiornabili e possono essere pi di uno nello
stesso computer.
Un browser pu anche appoggiarsi a una applicazione esterna per gestire i file
che riceve: lo helper. Al contrario del plug-in lo helper "vive" fuori dal browser
il risultato delle sue elaborazioni avviene fuori dalla finestra del browser.
Ma come fa il browser a sapere se l'informazione che riceve e che non sa
interpretare deve passarle al plug-in (e a quale plug-in) o allo helper? Lo fa
attraverso il tipo MIME, acronimo di Multipurpose Internet Mail Extension.
Per migliorare le proprie prestazioni, il browser adotta un meccanismo di file
scaricabili chiamato "cache". Secondo l'ultimo rapporto di StatMarket, i
browser pi diffusi nell'intero Web al 26 Agosto 2002 sono:
1. Microsoft Internet Explorer 95.97%
2. Netscape 3.39%
3. Altri .64%
Tra i browser "altri" vanno annoverati Opera e Lynx. Nel lungo periodo vi da
considerare che Mozilla, il browser open source sviluppato da un team di
sviluppatori con il supporto della Netscape, sta attraendo diversi utilizzatori.

Progettare la pagina Web: Ideazione e sviluppo

Le fasi di sviluppo

Lo sviluppo di un sito web molto pi complicato di quanto si possa pensare,

ma con una buona pianificazione del flusso di lavoro possiamo semplificarci
molto la vita. La grafica solo l'ultima fase del lavoro del web designer. Non
esiste una legge scritta su come sia meglio sviluppare il progetto di un sito, ma
orientativamente possiamo individuare nel percorso di produzione diverse fasi.
Cerchiamo di analizzarle insieme
1. L'idea del sito e i suoi obiettivi
2. Organizzare l'albero di navigazione
3. Realizzazione del sito
4. Verifica
5. Pubblicazione
Vediamo ore nello specifico i vari passaggi.

L'idea del sito e i suoi obiettivi
Il primo passo da fare consiste nella precisazione dell'idea di base del sito e dei
suoi obiettivi e destinatari. Abbiamo gi visto nella seconda e nella terza
lezione di questa guida cosa bisogna fare prima di passare alla vera e propria
fase di "produzione" e diamo quindi per acquisiti queste fasi.

Organizzare l'albero di navigazione
Un passaggio fondamentale prima della produzione grafica avere ben chiara
in mente e, possibilmente, anche su un pezzo di carta, la struttura generale del
sito: tipo di navigazione o navigator, numero di pagine, collegamenti interni ed
esterni, contenuti sia grafici che testuali, tecnologie da usare. In questa fase
molto utile pianificare il nome da assegnare a ogni pagina (e agli eventuali file
multimediali allegati). Oltre che essere un ottimo esercizio per entrare nella
logica della progettazione dei siti, risulter pi facile apportare eventuali
correzioni o modifiche che non erano state previste all'inizio del lavoro.


Il Consiglio Del Web Designer ;)
una buona abitudine indicare le varie pagine con i numeri anzich dare un
nome letterale. Supponiamo di dover sviluppare il nostro sito personale,
ipotizziamo di avere quattro sezioni: chi sono, il mio curriculum, i miei lavori,
contattami. La cosa pi istintiva quella di nominare le pagine esattamente
come i titoli che gli abbiamo dato. Risulter pi utile nominare i file con i
numeri:
1.htm (chi sono),
2.htm (il mio curriculum),
3.htm (i miei lavori),
4.htm (contattami).
In questo modo diventer pi semplice creare le pagine interne ed
eventualmente aggiungerne di nuove.
Supponiamo che dalla pagina "i miei lavori" si possa arrivare a quattro lavori
visualizzati, i nomi saranno: 3_1.htm (lavoro 1), 3_2.htm (lavoro 2), 3_3.htm
(lavoro 3), 3_4.htm (lavoro 4). Sembra pi difficile a dirsi che a farsi. solo
una questione di esercizio!

Realizzazione del sito
A questo punto si pu passare alla realizzazione materiale del sito.
Se il sito realizzato in html il primo passo quello di disegnare la grafica,
usando i software illustrati nelle lezioni precedenti e scegliendo quello che
meglio si adatta alle nostre esigenze. Successivamente possiamo tagliare le
nostre immagini e scrivere il codice html, aiutandoci sempre con i software
adatti.

Se il sito pensato per essere realizzato in flash, la costruzione della grafica

andr di pari passo con la scrittura degli actionscript e della programmazione
necessaria.
Unica avvertenza da usare in questa fase fare molta attenzione ai
collegamenti del sito: collegamenti tra le pagine e collegamenti con i rispettivi
file multimediali come immagini, suoni, animazioni...
Il Consiglio Del Web Designer ;) La cosa migliore quella di creare una cartella
che contenga tutto il sito. All'interno della cartella andr posizionata la nostra
homepage, che deve assolutamente chiamarsi index.html o index.htm. Sempre
all'interno della cartella crea due cartelle una che conterr tutte le immagini e i
contributi multimediali e una che conterr tutte le pagine del sito. Vedrai che in
questo modo riuscirai a renderti le cose molto pi semplici.

Normalmente, il sito verr dapprima costruito sul disco fisso locale e solo
successivamente sar trasferito sull'apposito server Web per la pubblicazione
online (ossia per renderlo visibile e accessibile via Internet).

Progettare la pagina Web: Messa online e verifica
Fai tutte le verifiche
Ora che hai completato la realizzazione del sito bisogna verificare che tutto
funzioni e che non ti sia sfuggito qualche piccolo errore. Le verifiche principali
da svolgere sono:
velocit di caricamento
verifica del corretto funzionamento con i vari tipi di browser
verifica dei collegamenti e dei contenuti
verifica della visualizzazione con differenti risoluzioni video
Per cominciare, inutile valutare a occhio la velocit di caricamento delle
pagine. L'ideale rimanere entro i limiti di 50k di peso per pagina html, in

questo modo anche chi ha a disposizione una connessione lenta, non dovr
aspettare troppo prima di riuscire a visualizzare il vostro lavoro. In ogni caso la
tecnologia ci viene incontro, e anche per la risoluzione di questo problema,
molti editor sono in grado di fare un'analisi approssimativa della velocit di
caricamento delle varie pagine.
Non tralasciare poi la compatibilit del sito con browser differenti. Non tutti gli
utenti Internet usano Internet Explorer, molti usano anche Netscape.
Sicuramente vale la regola generale che gli utenti siano molto restii a cambiare
browser. Puoi venire incontro alle esigenze di tutti testando il sito prima di
metterlo in linea (almeno otto volte!!!). Il test andr fatto sia su Mac che su Pc,
su Netscape Communicator e su Internet Explorer (se poi vuoi essere
veramente professionali potete testarlo anche su Opera).
Pratica ideale far verificare il sito a una persona diversa da chi lo ha
realizzato. Si deve controllare l'esattezza dei collegamenti tra le pagine,
aprendo il sito nel proprio browser e provando a navigarlo, esplorandone ogni
sezione, con un occhio di riguardo all'ortografia e alla grammatica. Per il
corretto funzionamento dei link, bene usare il controllo automatico del sito
che effettua ogni buon editor web.
Altra verifica da fare infine la qualit della visualizzazione. Controlla l'aspetto
del sito in base a differenti risoluzioni video. Non ci sono degli standard
tassativi per quanto riguarda la risoluzione video, ma non cadrai in errore
ottimizzando il tuo sito sia per la risoluzione 800x600 sia per la risoluzione
1024x768. Sono queste infatti le risoluzioni pi usate nei monitor.
L'esperienza e la pratica ti aiuteranno poi ad ottimizzare sempre meglio i tuoi
siti e le verifiche ti insegneranno a non commettere pi errori nella fase di
produzione.
Tempo di andare online
Siamo giunti alla fine del nostro lavoro, possiamo pubblicare il sito. Il
trasferimento del sito sul server remoto avviene generalmente tramite
protocollo FTP (una scelta di software disponibile nella sezione download di

HTML.it). Questa operazione pu essere fatta sia con alcuni editor web che con
appositi programmi per il trasferimento dei file.
in questa fase che ci accorgiamo dell'importanza di aver progettato
coerentemente il sito e di aver controllato i collegamenti e la posizione di file e
cartelle. Se la struttura del sito remoto non corrisponde a quella del sito locale,
i file vengono caricati nella posizione sbagliata e non saranno visibili ai
visitatori del sito e i percorsi delle immagini e dei collegamenti verranno
interrotti. Verifica che tutto funzioni, sei finalmente online.

Le tensioni della schermata
Progettando la grafica delle pagine Web ricorda sempre che il tuo lavoro sar
visualizzato su uno schermo video. Questo significa che avrai a che fare con
alcune limitazioni gi in partenza rispetto a quanto avviene nella grafica
tradizionale, la cui visualizzazione avviene sulla carta stampata. Ci non toglie
che il video offre dall'altra parte invece nuove opportunit specificatamente
legate al video stesso. Quando progetti per lo schermo tieni presente quali
sono le principali differenze rispetto all'attivit di progettazione per la carta
stampata, che possiamo sintetizzare cos.
1. La forma dello schermo del computer diversa da quella del foglio di
carta. Il video ha generalmente una forma orizzontale, mentre la carta
generalmente posizionata in verticale.
2. La risoluzione della carta stampata molto pi alta rispetto a quella di
un video.
3. Lo schermo una sorgente di luce, al contrario della carta che la riflette.
Questo condiziona molto i colori che possiamo usare, i font e la loro
dimensione.
Partiamo dunque dai vincoli principali: lo schermo.
Lo schermo fortemente condizionante per l'interfaccia dei nostri siti proprio
per la sua forma rettangolare. Il rettangolo composto da due tipologie di

linee: verticali e orizzontali. Quale sensazione ci danno queste due tipologie di

linea? Sicuramente le linee orizzontali ci danno una sensazione di stabilit e
pacatezza, mentre quelle verticali ci trasmettono una sensazione di tensione.
Se la schermata caratterizzata da una prevalenza di linee orizzontali si avr
quindi un'idea di maggiore stabilit. Se al contrario a caratterizzare la
schermata la prevalenza delle linee verticali, avremo un effetto di maggiore
dinamismo.
Il "peso" dello schermo
Il tipo di comunicazione che trasmette la schermata sar determinato dalla
forma che decideremo di farle assumere. Le schermata orizzontali, essendo
percepite come pi stabili, ci danno la possibilit di poter bilanciare meglio
degli elementi dinamici. Le schermate verticali, percepite come dinamiche,
consentono un agevole inserimento di elementi statici: testo, grafici, scrollino
(sempre a patto di non esagerare).

Analizziamo queste due figure da un punto di vista della percezione:
generalmente il basso la sezione della superficie che d maggiormente l'idea
della pesantezza, mentre l'alto da pi un'idea di leggerezza. In base a questi
ragionamenti il rettangolo arancione risulta pi in equilibrio nella figura a
sinistra e meno in equilibrio nella figura di destra.
Quando si ha a che fare con l'interfaccia di un computer le cose cambiano.
I browser e le interfacce dei software contribuiscono a cambiare questa
concezione, infatti gli elementi pi importanti della pagina sono posizionati in
alto. Navigando tra i siti ti accorgerai che nella parte alta della pagina trovi
sempre la barra del titolo, la barra dei menu, i pulsanti e la barra dell'indirizzo
del sito.
Ora che abbiamo fissato l'importanza della parte alta dello schermo, vediamo
come si comportano i lati destro e sinistro. Sicuramente il metodo di lettura

occidentale (da sinistra verso destra) e la presenza delle principali funzioni

delle barre dei menu sulla sinistra determinano il maggior peso del lato sinistro
rispetto al destro.
Questo evidenzia che la parte sinistra pi adatta ad essere occupata da
elementi grafici pi marcati.
Facendo una somma di pesi e tensioni che si vengono a generare all'interno
della nostra schermata, possiamo ricavare una specie di diagramma delle
tensioni che ci far capire qual l'area pi "importante" dello schermo e quale
invece passa pi inosservata.
Viene a determinarsi un'area molto forte in alto a sinistra. Questo vale per le
pagine con interfaccia browser, mentre per le finestre pop-up la situazione
diversa. La finestra pop-up di solito viene usata per l'animazione dei siti in
flash, perch perdendo le aree funzionali diventano pi neutre.
Tenendo presente che le eccezioni esistono (e confermano le regole) la
collocazione pi comune degli elementi grafici generalmente la seguente:
1. In alto a sinistra (quindi nell'area che offre maggiore visibilit) inserito
il simbolo o il titolo (ad esempio il logo o il marchio aziendale)
2. In alto e a sinistra le barre di menu e navigazione, iniziando sempre dalle
voci pi importanti
L'obiettivo principale rendere la partitura grafico-visiva della schermata
comunicativamente efficace e, in caso di dubbi, ti consiglio di rispettare sempre
i principi prima spiegati.
Le interfacce sono sviluppate per servire l'utente, non per dimostrare la nostra
bravura o la nostra padronanza tecnica (a meno che bravura e padronanza
tecnica siano una parte essenziale della marca e quindi della mission del sito).
Il disegno migliore pu passare inosservato dagli utenti, ma se un sito ben
studiato e progettato sicuramente avremo un riscontro in numero di visitatori e
in fedelt dell'utenza.

Le buone interfacce devono considerare il target, il contenuto e gli attributi di

marca particolari di ogni luogo. Quando la navigazione prevede i bisogni degli
utenti e li guida attraverso il sito, potrai essere soddisfatto del tuo lavoro e dire
che il progetto riuscito.
Il disegno grafico impeccabile non porta necessariamente al buon disegno
dell'interfaccia.
Possiamo anzi dire che un disegno molto complesso dell'interfaccia pu rendere
appagato e felice il progettista, ma non incontrer facilmente il favore del
pubblico, soprattutto se viene a mancare facilit di navigazione e
comprensione dei contenuti del sito. Non dimenticare che i tuoi utenti hanno
sempre la possibilit di scegliere un sito che sia pi facile da usare e che
risponda meglio alle loro esigenze. E il concorrente a portata di un semplice
click!

L'ipertesto e la struttura dell'Homepage
L'interfaccia di navigazione determina l'aspetto del nostro sito. Cosa significa
questa regola? Il tipo di grafica che vuoi usare riguarda sia il funzionamento
del sito sia l'immagine che vuoi dare agli utenti.
Per ottenere un buon risultato occorre presentare e organizzare al meglio le
informazioni offerte. Le scelte grafiche e di navigazione devono rispecchiare al
meglio il percorso ipertestuale che il sito pu offrire all'utente: si pu scegliere
di navigare in maniera casuale, ma generalmente si vuole trovare subito quello
di cui si ha bisogno.
L'ipertesto un concetto fondamentale per capire l'impostazione che
dobbiamo dare alle nostre pagine web. L'ipertesto un testo, quindi un
messaggio dotato di significato, ma i suoi contenuti non sono articolati secondo
un ordine prestabilito.
Un ipertesto caratterizzato dalla combinazione di due tipi di elementi:
i singoli blocchi di contenuti cio le pagine di un sito Web

i collegamenti, sia logici che "fisici", cio le molteplici vie che il lettore
pu seguire per passare da un contenuto all'altro.
Per quanto bravi possiamo essere a predisporre i collegamenti tra le varie
pagine del sito, e quindi tra i contenuti dello stesso, non puoi sapere a priori
quale percorso sceglier l'utente per trovare ci che sta cercando.
Puoi quindi partire dal presupposto che in qualunque pagina del sito si trovi il
visitatore, sappia dove si trova. Sviluppa allora una grafica coerente per tutto il
sito, che faciliti l'utente e lo rassicuri. Se proponi una grafica molto diversa tra
le pagine web, il rischio che l'utente pensi di saltare da un sito ad un altro,
invece di trovarsi sempre all'interno dello stesso sito.
Homepage: il biglietto da visita del sito
Non necessariamente la prima pagina che si visita, ma sicuramente la pi
importante. Le sue caratteristiche principali devono essere quelle dell'equilibrio
e della chiarezza: entrando in un sito devo capire subito di cosa si parla, devo
capire chi mi parla e soprattutto devo essere attratto da qualche cosa. Per il
primo punto posso risolvere il problema con il logo e il pay off. La capacit
attrattiva data da una grafica accattivante, il linguaggio, la relazione che
nasce tra emittente e destinatario.
Gli utenti che arrivano per la prima volta hanno bisogno di sapere dove si
trovano e che tipo di navigazione possono fare nel nostro sito, quindi possiamo
dire che fornire identit e orientamento sono dunque le due funzionalit
principali dell'homepage.
Gli utenti che ritornano sul sito lo conoscono gi. probabile che le cose
che vogliono trovare sono informazioni sui pi recenti aggiornamenti, e, in
generale sulle novit e avere facilitazioni nella navigazione.
La homepage, nel suo insieme, deve presentare informazioni semplici
ed efficaci sull'identit del sito.

Organizzare la navigazione

Strumenti di navigazione
Gli strumenti di navigazione assumono un'importanza fondamentale all'interno
delle nostre pagine. Possono consistere in un indice, ossia un elenco di
collegamenti testuali o una serie di pulsanti, associati ciascuno a una delle
pagine del sito, in modo che il visitatore possa navigare liberamente da un
punto all'altro facendo click sui collegamenti proposti.
La barra di navigazione dovrebbe essere sempre costante e presente in tutte le
pagine del sito e deve diventare la bussola dell'utente. Attraverso questo
strumento l'utente deve sempre poter scegliere dove andare e cosa fare.
Tra le voci che dovrebbero essere sempre presenti in una barra di navigazione,
sicuramente troviamo:
mappa del sito: linkala sempre alle diverse sezioni del sito. di
fondamentale utilit nei siti molto grandi, meno importante nei siti piccoli
help: molto utile anche nei siti piccoli, perch rassicura il navigatore
pulsanti avanti e indietro: non servono se si riesce a far stare tutto il
testo in una sola schermata.
barra di scorrimento
presenza del mail-to (cio dell'indirizzo e-mail): fondamentale per
l'interazione tra emittente e destinatario.
Ci sono vari tipi di barre di navigazione o navigator:
1. navigator orizzontale
2. navigator verticale
3. navigator doppio
4. navigator contestualizzato
5. navigator a scomparsa
6. navigator statico o dinamico

bene non usare il navigator doppio in homepage. I navigator contestuali

possono cambiare di pagina in pagina. Il navigator contestuale dipende dal
principale.
Importantissime sono le coordinate testuali interattive (il path). Come dice la
parola stessa sono coordinate, ci segnalano esattamente dove ci troviamo.
Generalmente il path semplice testo linkabile.
La barra di navigazione non sempre fatta di solo testo, anzi essendo
solitamente integrata nella grafica della pagina, fatta di immagini o pulsanti.
Dato che i nostri utenti potrebbero avere disabilitato il caricamento automatico
delle immagini nel proprio browser, bene riproporre una versione fatta di solo
testo della stessa barra di navigazione, e comunque usare l'alt text. In questo
modo, anche chi non potesse visualizzare le immagini pu comunque capire il
testo del pulsante in questione, e quindi capire dove arriver cliccandoci sopra.
Un'altra sana abitudini riproporre il men principale in fondo alla pagina web,
soprattutto se si tratta di pagine lunghe, che richiedono lo scrolling verticale.
Giunti alla fine non obbligare il tuo visitatore a tornare in cima alla pagina per
trovare stimoli e proposte per andare nelle altre sezioni del sito: riproponi i link
testuali anche sul fondo!
Tutti gli strumenti di navigazione sono basati su etichette testuali.
importantissimo che i nomi scelti per ogni elemento e ogni sezione siano il pi
possibile significativi per l'utente finale. Orienta il sito in maniera da facilitare
all'utente l'esecuzione dei compiti scegliendo nomi di azioni o prodotti per lui
significativi.
Icone e metafore
Il problema principale del web design rimane comunque quello di fornire degli
indicatori di percorso che consentano una buona. Spesso un'immagine vale pi
di cento parole: normale perci, anche nella progettazione di pagine Web, il
ricorso a icone che simboleggiano concetti e funzioni di vario genere. Tuttavia
la scelta dell'immagine pi appropriata non sempre immediata: ci dovuto

al fatto che esse esprimono in genere metafore di oggetti quotidiani, non tutti
ugualmente familiari a chiunque.
Altro vantaggio delle icone che aiutano gli ospiti internazionali, che non
conoscono la lingua usata nel nostro sito. Stai attento, quando scegli
un'immagine per rappresentare un concetto, a cercare di usare simboli
semplici ma efficaci. Per farti degli esempi, le frecce avanti e indietro sono
sensi comuni della navigazione da pagina a pagina. L'icona di una matita o di
una penna pu collegarsi al concetto di una cartolina o di un messaggio da
scrivere, un'icona del giornale o di un libro pu richiamare il concetto del
download o della stampa, e cos via.

Regole da tenere sempre a mente
Gli aspetti visuali e l'interfaccia grafica del sito costituiscono il punto di contatto
tra utente e brand del cliente. Con il visual design devi comunicare in modo
efficace le informazioni offerte da sito attraverso una veste grafica adatta e
gradevole, ma contemporaneamente devi rispettare i vincoli posti dalle
tecnologie e dal budget, rispettando i tempi previsti dalla pianificazione.
Adotta sempre una grafica "leggera" in modo che il navigatore non sia
disturbato nella ricerca delle informazioni che le servono e soprattutto fai in
modo che l'aspetto grafico arricchisca di contenuto il sito stesso. Non
dimenticare che c' un'enorme differenza di efficacia tra una grafica d'effetto,
anche se semplice e una grafica monotona e scontata.
Dopo queste considerazioni avrai capito che l'uso delle immagini deve essere
studiato ad hoc, per far si che non influiscano a rallentare il caricamento della
pagina, ma contribuiscano ad esaltare e armonizzarsi con il contenuto delle
pagine stesse.
Anche le animazioni non devono essere troppo "invasive". Purtroppo molti
web designer non sanno trattenersi dall'usare gli innumerevoli effetti speciali
che offrono i vari tipi di software. Corri il rischio, se non ponderi bene le tue
scelte, di utilizzare una grafica ridondante e conflittuale, che non contribuisce

al raggiungimento degli obiettivi che ti poni. La cosa migliore che puoi fare per
compiere i tuoi primi passi nel web design GUARDARTI INTORNO. Per
capire quali sono gli standard a cui attenerti per realizzare una buona grafica
basta studiare i 20 - 30 siti pi visitati in Internet e osservare (meglio ancora
studiare) come sono stati realizzati. Se troviamo delle caratteristiche o degli
elementi comuni nel 90% dei siti che analizziamo puoi ritenere questi elementi
degli standard di fatto. Considera sempre che gli utenti arriveranno al tuo sito
dopo averne visitati altri e avendo imparato a utilizzare strumenti di
navigazione e funzioni visive che gli sono oramai familiari. Sfrutta quindi la
cultura che il tuo utente ha maturato navigando e pur stupendolo, non
dimenticare che alcune consuetudini della Rete (pensa per esempio al
posizionamento del marchio in homepage in alto a sinistra) possono essere
funzionali per comunicare meglio.
Per non sbagliare
l Usa il logo e il nome del sito in tutte le pagine del sito in una posizione
strategica, e collegali tramite link alla homepage del sito stesso.
l Se stai progettando il sito web di un'azienda, fai in modo che la grafica che
stai usando sia coerente con l'immagine coordinata dell'azienda stessa, in
modo tale che l'immagine dell'azienda sia riportata coerentemente anche sul
web. Quando questa operazione non possibile perch l'azienda non dotata
di un'immagine coordinata, fai si che almeno il sito sia caratterizzato da una
certa coerenza grafica.
l I simboli e le funzioni che usi devono essere riconoscibili e identificabili in
tutto il sito e non devono cambiare da una pagina all'altra.
l Quando il tuo sito diventa molto grande e comunque quando presenta un
numero di pagine superiore alle 100, bene usare una funzione di ricerca.
l Usa dei font standard, perch non tutte le macchine hanno installati tutti i
font. Potresti incappare in un utente con un PC appena "sballato" dalla
confezione con una dozzina di font preinstallati. La soluzione indicare nel
codice html i font in ordine di preferenza, da quello che vorresti a quello che

sei "disposto ad accettare". Hai a disposizione diversi tipi di carattere,

raggruppati per famiglie:
Times New Roman, Times, Georgia, Serif
Courier New, Courier, Mono
Verdana, Arial, Helvetica, Geneva, Sans-serif
Ricorda che dagli studi di usabilit fatti, la leggibilit dei caratteri sul monitor
diversa dalla leggibilit sulla carta. Mentre sulla carta i caratteri pi leggibili
sono quelli con le grazie (Serif), sul monitor la lettura pi agevolata dai
caratteri Sans serif. In modo particolare i caratteri in assoluto pi leggibili sono
il Verdana e il Trebuchet.
Se poi proprio non puoi fare a meno di usare i caratteri standard, allora
trasforma il testo in immagine: solo in questo modo puoi essere sicuro che tutti
lo visualizzeranno cos come lo hai progettato. Ovviamente devi sempre
ricordarti che le immagini pesano in termini di caricamento della pagina, per
cui cerca di limitare l'uso di questo stratagemma solo ai titoli, ai bottoni, o per
qualche scritta di rilievo.
l Scegli le dimensioni del testo prendendo in considerazione la sua
visualizzazione. Come abbiamo gi visto non tutti usano un pc con Windows,
quindi non tutti i font appaiono ai visitatori con la stessa dimensione. L'aspetto
di un font Verdana di dimensione 10 su PC uguale all'aspetto di un font
Verdana ma di dimensione 12 su Macintosh. Questo dipende dal fatto che un
PC definisce la risoluzione a 96 punti per pollice, mentre tutti gli altri sistemi
operativi usano la risoluzione standard a 72 punti per pollice. Quindi non far
apparire le scritte in dimensioni corrette sui PC e illeggibilmente su ogni altro
computer.
l Puoi arricchire graficamente il sito anche usando i font solo standard.
Ultimamente sta diventando abitudine diffusa (soprattutto nei siti legati al web
design) usare coppie di sue punti (::) e i segni di maggiore e minore o
parentesi uncinate (><) come elementi grafici decorativi, soprattutto nei titoli
delle pagine.

l Non sottovalutare l'importanza che assumono, nell'ambito della schermata i

titoli, abstract e trafiletti. Ogni testo che abbia importanza o rilievo deve far
capire a colpo d'occhio il senso di tutta la sezione a cui fa riferimento. In tal
modo riuscirai a sfruttare lo "scanning" del lettore a tuo favore.
l Se devi inserire delle immagini molto grandi utile creare dei bottoni o
delle icone, che possono essere resi sotto forma di miniatura dell'immagine
stessa, e che richiamano lo zoom dell'immagine.
l Non fare un uso smodato della tecnologia, a meno che il sito non lo
richieda. Piuttosto fa' in modo che la grafica e i contenuti multimediali aiutino a
far apprezzare all'utente i contenuti del sito.
l Cura la navigazione e il navigatore, in modo che l'utente riesca sin dalla
prima visita a raggiungere le informazione di cui ha bisogno.

Il formato JPG
I formati che vengono usati nel web supportati da tutti i browser sono di due
tipi: JPEG e GIF. Li esamineremo velocemente entrambi.
Un formato di file semplicemente un modo per salvare le parti elettroniche
che compongono i file di un computer. I diversi formati strutturano le varie
parti in maniera differente.
Il formato jpeg
La sigla JPEG o JPG l'acronimo di Joint Photographic Experts Group.
Questo tipo di immagine usa una compressione con perdita di dati. La perdita
dei dati consiste nel fatto che alcuni dati che formavano la tua immagine
vengono persi durante il processo di compressione. Questo corrisponde a una
perdita di qualit nell'immagine, direttamente proporzionale al livello di
compressione che sceglierai. Possiamo dire che a bassi livelli di compressione
la perdita di qualit praticamente nulla e non si percepisce a occhio nudo, ma
se aumentiamo il livello di compressione dobbiamo controllare che l'immagine

sia comunque di buona qualit, perch la perdita di dati in questo caso pu

essere rilevante.
Qualsiasi sia il numero di profondit dei colori dell'immagine sorgente il
formato JPEG supporta colori a 24 bit. Usa questo tipo di formato per immagini
a tinte non piatte, cio per immagini fotografiche o con immagini con
sfumature leggere e continue. Il formato Jpeg non sicuramente adatto per il
trattamento di immagini vettoriali o contenenti testo. Allora usa questo
formato di esportazione (Jpeg) per riportare sul web immagini ottenute tramite
scansione di fotografie, oppure per le immagini che utilizzano texture e
comunque per tutte quelle che necessitano di un numero di colori superiore a
256.
Ricorda che questo formato non supporta le trasparenze.
Dato che, come abbiamo gi detto, il formato a perdita di dati non una
buona soluzione salvare un'immagine JPEG da un'altra immagine JPEG. La cosa
migliore ottenere immagini JPEG dall'immagine originale.
Esiste anche un formato chiamato JPEG selettivo. Questo permette di
esportare un'immagine con una diversa compressione applicata alle varie parti
che la compongono.

Il formato gif
La sigla GIF acronimo di Graphic Interchange Format. Questo tipo di
compressione, al contrario del JPEG non lavora a perdita di dati, ma pu
esportare solo immagini che contengono al massimo 256 colori. Se loriginale
contiene un numero pi elevato di colori, la perdita di qualit sar significativa.
Il formato GIF usa colori a 8 bit ed efficace per comprimere immagini
vettoriali, geometriche o testo.
Il formato GIF supporta la trasparenza, quindi puoi far emergere lo sfondo
attraverso limmagine senza vincolare le immagini stesse al solo formato
rettangolare o quadrato.

Le immagini GIF ti permettono anche di creare delle piccole animazioni, le GIF

ANIMATE, perch supportano anche fotogrammi multipli. I GIF animati si
realizzano con semplici tool grafiche e con la tecnica del cartone animato.

Il formato png
Il formato PNG acronimo di Portable Network Graphic.
Questo tipo di formato non supportato da tutti i tipi di browser, ma tuttavia
possibile installare un plug-in per visualizzare le immagini PNG. Non usare
questo formato se il tuo sito dovr essere accessibile a un grande numero di
utenti, tuttavia utile sapere come funziona, quali sono le sue caratteristiche e
quali opportunit offre.
Questo formato supporta colori fino a 32 bit e pu contenere la trasparenza. E
un tipo di compressione senza perdita di dati, anche per alte profondit di
colore. Purtroppo per produce file di grandi dimensioni.
Esistono due tipi di file PNG:
1. PNG-8
2. PNG-24
Il formato PNG-8 usa colori a 8 bit e presenta molte analogie con i file di tipo
GIF. Risulta utile per la compressione di aree a tinta unita e mantiene i dettagli
nitidi.
Il formato PNG-24 supporta colori a 24 bit e presenta molte analogie con i file
di tipo JPEG. adatto sia per le immagini fotografiche che per le immagini
geometriche e in pi ha il vantaggio di supportare la trasparenza anche su pi
livelli.

La risoluzione
La risoluzione delle immagini

La dimensione del file di unimmagine proporzionale alla sua dimensione in

pixel, il numero di pixel visualizzato per unit di lunghezza in unimmagine
viene chiamato RISOLUZIONE dellimmagine. La risoluzione delle immagini
viene misurata in pixel per pollice. Nel web la risoluzione dellimmagine
condizionata dalla risoluzione del monitor.
Risoluzione del monitor
Il numero di pixel visualizzati per unit di lunghezza sul monitor variano a
seconda della macchina che stai usando:
PC: ha una risoluzione del monitor pari a 96 dpi (punti per pollice)
Mac: ha una risoluzione del monitor pari a 72 dpi
Se consideri che la risoluzione usata per la stampa di 300 pixel per pollice,
capisci quanto sia differente preparare unimmagine per il web piuttosto che
unimmagine che debba poi essere stampata.
Cosa vuol dire questo? Intuitivamente si capisce che se unimmagine ha una
risoluzione pi alta della risoluzione del monitor, questa apparir molto pi
grande delle sue dimensioni reali

Suggerimenti e porzioni
Cose da tenere bene a mente:
1. Imposta sempre immagini con risoluzione a 72 dpi, in modo tale da
permettere a tutti i tipi di computer di poter visualizzare correttamente le
vostre immagini.
2. Se devi ridimensionare un'immagine, ricordati che nel passaggio da
un'alta risoluzione a una bassa risoluzione non c' sostanziale perdita di
qualit, ma quando cambi la risoluzione di un'immagine da una pi bassa
a una pi alta il rischio di perdere qualit dell'immagine.
3. Quando imposti un'immagine per il web non difficile definire la
dimensione in cui l'immagine deve essere visualizzata, soprattutto
se si usa un editor. Se lavori direttamente con il codice non devi far altro

che impostare le dimensioni dell'immagine usando gli attributi WIDTH e

HEIGHT. Qualsiasi sia la soluzione che vuoi adottare definisci sempre le
dimensioni dell'immagine nel codice, anche se sono uguali alle
dimensioni reali. In questo modo faciliterai il browser a strutturare la
pagina accelerando il caricamento.
4. Non dimenticare mai di usare l'ALT TEXT, cio il testo alternativo.
Specifica un testo alternativo da visualizzare al posto dell'immagine nei
browser che non supportano la modalit grafica oppure sono configurati
per lo scaricamento manuale delle immagini. Per gli utenti non vedenti
che utilizzano sintetizzatori vocali con browser in modalit testo, questo
testo viene riprodotto ad alto volume. In alcuni browser, questo testo
appare anche quando il puntatore si trova sopra l'immagine. Questa
funzione inoltre comoda perch alcuni motori di ricerca usano questo
strumento per catalogare le pagine, usando questo testo come le parole
chiave. Puoi approfondire l'argomento con la guida all'usabilit.
5. Ultimo consiglio per questa lezione, anche se pu sembrare ovvio:
quando organizzi le immagini per il tuo sito di raggruppale tutte in una
cartella (directory) e di d dei nomi standard associati alle pagine. In
questo modo sar pi agevole sostituirle o ritrovarle tra le tante per
modificarle.
L'esportazione delle porzioni di immagini
Se vuoi fare un'operazione un po' pi "complessa" del semplice inserimento di
un'immagine in una tabella e - soprattutto - se il tipo di grafica che vuoi
inserire complesso e occupa lo spazio dell'intera schermata, puoi tagliare
l'elemento grafico che hai creato in pi parti, che sono comunemente definite
porzioni. Questo tipo di operazione denominata suddivisione in porzioni ed
utile, ad esempio, per esportare alcune parti di un'immagine come file GIF e
altre come file JPEG per usufruire poi di entrambi i formati. Potrai poi
riassemblare tali parti sulla pagine Web tramite una tabella HTML. La Guida a
Fireworks 4 ha una lezione dedicata alle porzioni.

Lo stile del Web

A scuola ci hanno insegnato a differenziare lo scritto dall'orale, a usare un
registro linguistico basso nella parola parlata, e una terminologia pi sofisticata
e ricercata per lo scritto. Dico "fare" e scrivo "effettuare", o addirittura
"implementare". Ma sul web come funziona?
La rete si riempie di parole e di informazioni e il tono e la scrittura sul web sta
acquisendo peculiarit e specificit, legate alle modalit di utilizzo di questo
strumento, molto pi simili alla comunicazione orale e informale rispetto a
quella scritta e formale.
Tra le regole della comunicazione una in particolare acquista maggior valore:
scrittura reader oriented. Un grande esperto di Direct Marketing degli anni
Ottanta scrive Stop thinking of your product, thinking of your custumers.
Applica questa regola anche quando ti trovi davanti ad una tastiera e con una
pagina Web da scrivere.
Per approfondimenti rimandiamo alla Guida al Web Writing e alla sezione Web
Writing di PRO.HTML.it
Scrivi Chiaro
1. Usa periodi brevi: un periodo troppo lungo se non riesco a pronunciarlo
con un'unica espirazione, come gi diceva Cicerone. Senza cadere
nell'eccesso opposto, sono molto utili a questo proposito le formule di
passaggio e conjunctions.
2. Parole semplici e comuni: parliamo e scriviamo con parole semplici e
comuni, riduci quindi i tecnicismi e le parole straniere. La domanda da
porsi se quello che sta di l capisce o non capisce il mio messaggio.
3. Usa la forma attiva per aumentare l'assunzione di responsabilit.
Soggetto - verbo - complemento uno schema utile per gratificare se si
tratta di un merito per colpevolizzare se si tratta di una colpa.
4. Usa il passivo solo quando serve, per metter in risalto l'oggetto di
un'azione.

5. Riduci la forma impersonale: in Internet il rapporto sempre personale

da uno a uno. Dimentica i "SI INFORMA che.", "il Sindaco ORDINA
(perch fa delle ordinanze) che in caso di."
6. Scegli la concretezza e le espressioni dirette
7. Scrivi per punti: esistono elenchi democratici, egualitari, con bullet e
trattini, e elenchi gerarchici con numeri e lettere. I numeri sono una
grandissima risorsa attenzionale, se usati con effetto.
8. Evita le costruzioni linguistiche complesse e l'utilizzo di modi come il
congiuntivo, in linea di massima sconveniente per la comunicazione
diretta di Internet
La sintesi: stop a libri e pagine troppo lunghe
Vi scrivo una lettera lunga perch non ho tempo di scriverne una breve. Ha
dell'assurdo l'affermazione di Voltaire? No, perch molto pi macchinoso
scrivere testi che racchiudono in poche frasi tutto il significato rispetto alla
semplicit di un testo spontaneamente prolisso.
Pensa ad una scultura: nel blocco di marmo la statua c' gi e l'arte sta nel
togliere, come nella fotografia il bravo fotografo capace di selezionare e
inquadrare. Nel blocco di marmo Michelangelo vedeva gi la statua, eliminando
prima con grandi colpi e poi con lo scalpellino otteneva un capolavoro. Cos
devi fare tu, soprattutto se scrivi sul web.
Nel testo devono rimanere quelle parole che catturano l'attenzione del lettore,
le cosiddette parole lampo, i ganci linguistici. Queste possono venire
offuscate se permangono alcune parole lucciola a distrarre il lettore.
Se vuoi far arrivare prima un concetto al lettore spostalo all'inizio. Una prima
frase ad effetto provoca una reazione di allarme e l'attenzione viene usata
come gancio.
Quanto agli aggettivi, Flaubert sosteneva che esiste una sola parola che
esprime il concetto che voglio dire, non c' nessun bisogno di aggiungere nulla.

Usa pochi avverbi: sono le parole pi subdole della lingua secondo una
definizione di Stephen King nel suo On Writing: modificano la parola alla quale
stanno affianco, inquinandola. Hanno un effetto cacofonico, soprattutto in
italiano perch finiscono in -mente.
Non detto che sia necessario togliere le introduzioni per essere pi sintetici.
Per convincere il lettore dobbiamo creargli noi stessi alcuni bisogni, e non
sempre vero che sul web si debba andare subito al sodo, alle volte meglio
iniziare con una presentazione introduttiva che coinvolga il lettore.

Organizza la struttura
Il testo giornalistico segue normalmente la struttura basata sulla teoria delle
5W (who, what, when, where, why). Sul web si parla non solo di testo ma
anche di ipertesto. Il lettore legge e attraversa le pagine quando trova parole
generalmente sottolineate che indicano collegamenti e approfondimenti.
Lo sforzo per costruire la mappa ipertestuale, soprattutto di fronte a temi
ampi e complessi, un esercizio utilissimo per organizzare le informazioni, per
abbracciare il nostro lavoro con un solo sguardo. , insomma, la scaletta dei
nostri contenuti, che possiamo riutilizzare anche per scrivere una brochure,
un articolo, un discorso.
L'organizzazione dei concetti e delle frasi acquista quindi un nuovo spessore
(la profondit), permettendo al lettore di muoversi, di "navigare" secondo
percorsi proposti, che lasciano per la libert all'utente di non seguire pi la
lettura sequenziale che caratterizza invece la carta.
Quando scrivi per il web, hai davanti un lettore interattivo. Lo stile del web
quindi simile a quello giornalistico, si arricchisce di domande e di possibilit di
approfondimento (che non devono diventare di fuga).
Jacob Niesen (http://www.useit.com/alertbox/9710a.html) scrive: "How Users
Read on the Web". Non c' punto di domanda ma la domanda c', e c' anche
la risposta: "they don't", perch l'utente di Internet non legge, scansiona la
pagina.

Quando devi organizzare il testo, trova le giuste posizioni per i tuoi link: non
devono essere inviti a fuggire via, ma ad approfondire, a creare nella mente
dell'utente dei collegamenti. Guidalo nella navigazione attraverso parole
evocative ed espressioni dirette.
La struttura dei contenuti
Per organizzare il testo puoi prendere spunto dalle regole classiche della
comunicazione, trovando all'interno dell'organizzazione logica una collocazione
adeguata delle informazioni che vuoi fornire al tuo lettore, rifacendoti agli
ordini BLOT, BIM e BLOB:
BLOT = Bottom Line on Top
lo schema dei giornalisti: segue la struttura delle 5W: Who, What, Where,
When e Why. Il perch alla fine, poich nella notizia di cronaca l'elemento
soggettivo non deve condizionare il lettore fin da subito. Nel caso di un articolo
di critica pu essere spostato, per dare un giudizio.
BLIM = Bottom Line in the Middle
la logica del sandwich: l'informazione pi importate, che in questo caso non
sar da valorizzare, ad esempio una cattiva notizia, inserita tra due belle e
buone fette di pane. anche detta legge delle 3Key: Kiss, Kick and Kiss.
BLOB = Bottom Line on the Bottom
Il caso tipico della struttura della comunicazione di vendita, l'informazione pi
importante alla fine ed la conclusione della trattativa ed quello che spesso
risulta pi efficace in rete. Queste sono 3 indicazioni di massima:
1. Esponi il messaggio,
2. Argomenta e descrivi i fatti
3. Ribadisci il messaggio ed esorta all'azione.
un po' come volare: durante la fase di decollo c' l'esperienza pi emotiva,
in cui cresce l'ansia, che si ritrova anche nella fase finale, durante l'atterraggio
dove entra ancora la fase dell'emotivit, nella fase intermedia si vive bene, con
tranquillit.

Jacob Nielsen parla di piramide rovesciata. Ci sono molti modi di procedere

ciascuno di noi pi predisposto a seguirne uno: c' l'ordine naturale che si
adatta alla descrizioni scientifiche, l'ordine deduttivo e quello induttivo. Pu
servire scegliere l'ordine in base alla nostra struttura psicologica, scrivi
orientato al lettore tenendo conto del suo orientamento. In altri cosi utile
scegliere l'ordine cronologico soprattutto per la narrazione storica. Tra le altre
tecniche chi si ritrovano in rete c' quella del problema/soluzione, l'uso del
caso con un valore simbolico. I CON & PRO, secondo la dicitura americana,
sarebbero i nostri PRO e CONTRO rovesciati: quindi vantaggi e svantaggi,
facendo percepire anche i punti deboli.

Consigli in pillole
Ecco, infine, cinque consigli per sopravvivere nello scrivere per il Web.
Se decidi di aggiungere parole alle tue pagine web, il tuo obiettivo
primario quello di essere capito. Riduci al minimo la possibilit di
fraintendimento, scegli parole corte che entrano pi facilmente nel
processo di comprensione, frasi composte da un massimo di 24, 25
parole, e usa espressioni concrete, tangibili. Se per esempio stai facendo
un sito per una banca scrivi "soldi", non "liquidit". Le parole devono
essere precise e dirette, evita eccessivi tecnicismi. Concentrati quindi
sulla percezione che potr avere il tuo lettore.
Evita l'abuso delle abbreviazioni e delle sigle e aumenta la
comprensione e la chiarezza linguistica. Se la sigla invece nota alla
community a cui ti rivolgi facilita: nell'ambiente giornalistico per esempio
ndr la "nota della redazione", cos come l'odg "ordine del giorno".
Ti sconsiglio anche i messaggi generalisti, le formule stereotipate:
autunno caldo, forze dell'ordine, tragico bilancio, brillante operazione,
discesa in campo. Hanno perso la loro efficacia perch sono gi sentite e
logore. Anche la metafora usata fuori dal suo contesto rischia di creare
disagio e incomprensione.

Dopo aver scritto il testo fa pulizia di ci che appesantisce e complica.

Usa un linguaggio simple and direct, senza trascurare la forma che un
elemento molto utile per ridurre l'incomprensione.
Usa marcature e segni grafici. I corsivi funzionano pochissimo, i
sottolineati sono sconsigliati perch si confondono con i link, sfrutta
invece i grassetti.

La percezione del colore
"Nel mondo fenomenico tutto relativo ed i colori esistono soltanto come
relativit (...)".
Questa frase di G. C. Argan tratta dalla sua introduzione al libro Teoria dei
colori di J. W. Goethe significativa di come anche in un evento visivo insieme
al colore concorre un complesso di elementi (gli stimoli) che i sensi umani
leggono ed organizzano in percezioni, in cui il massimo valore dato
all'insieme percepito, cio nel caso della percezione visiva di forma, direzione,
posizione, textura, valore, trasparenza, tinta (cfr. N. Silvestrini, Le variabili
visive).
Laddove la misura comunque l'uomo, teorie e discipline del colore
dovrebbero contribuire alla realizzazione di ambienti sia reali sia virtuali dove
l'immaginario, la cultura e le capacit sensoriali umane sono completate e
compensate dal riferimento cromatico, che rimane indice e indicatore del
modus percettivo e precettivo della comunicazione .
Questa frase di Daniela Calabi (cfr.
http://www.idearium.it/nuke/article.php?sid=38), non deve spaventarti, ma
vuole solo farti capire quanto sia complesso l'argomento del colore in generale,
e del colore sul web in particolare. I fattori da considerare sono molteplici e
dipendono da una vastissima quantit di parametri che variano a seconda del
mezzo, della persona, delle condizioni climatiche, delle condizioni di salute, del
momento della giornata e cos via.

Ti proponiamo ora una panoramica generale alcuni argomenti legati al colore

sul web, che poi potrai approfondire, se vorrai, su siti specializzati
sull'argomento.
Un altra risorsa su HTML.it l'articolo I colori e il loro uso nel Web della
sezione PRO.HTML.it
Ma ora iniziamo con un po' di teoria...

Fisica, percezione e psicologia del colore
La Fisica del colore
Ti sei mai chiesto come tu percepisci il mondo che ti circonda? Un buon web
designer deve sapere almeno i concetti di base. Secondo Giulio Bertagna (color
designer: http://www.colordesign.it) il meccanismo della percezione visiva pu
essere riassunto come segue:
1. Le cose illuminate emettono una parte della luce, la quale arriva ai nostri
occhi e vi penetra.
2. I nostri occhi elaborano la luce emessa da un oggetto codificandone
forma, rapporto chiaro-scuro e colore.
3. Queste diverse codifiche vengono inviate al cervello che ce le fa
percepire attivandosi in diverse aree ben identificate dalle neuroscienze.
4. La percezione visiva avviene quindi grazie al cervello e nel cervello
stesso: quindi "virtuale" come i nostri pensieri e la nostra
immaginazione e, come questi, in grado di provocare risposte emotive ed
atteggiamenti psicologici diversi.
5. La visione un'interpretazione intersoggettiva (comune a tutte le
persone) della realt che ci circonda ma, attivandosi in sinergia con le
complessit del pensiero e della situazione psicologica dell'individuo,
assume anche delle connotazioni di soggettivit.
La Percezione del colore

Ma come percepiamo i colori? Il colore altro non che una sensazione che
viene avvertita in una zona particolare del cervello e viene provocata
dall'azione che i fotoni compiono sui coni; possiamo quindi ritenere i fotoni e i
coni retinici gli attori principali della rappresentazione cromatica che ha luogo
quotidianamente nell'immenso teatro del nostro cervello.
I coni sono distribuiti nella zona centrale della rtina (cio dove mettiamo a
fuoco l'immagine) e soprattutto nella fvea, sono circa cinque milioni, sono
grossi un millesimo di millimetro e si dividono in tre diversi gruppi di
fotosensibilit (cio di sensibilit alla luce) .
In parole molto semplici, gli oggetti intorno a noi "emettono" un certo numero
di fotoni, i quali vanno a colpire la rtina dei nostri occhi. In questo modo
vengono a determinarsi una serie di sensazioni cerebrali di tipo visivo alle quali
possiamo dare il nome di "COLORI".
La Psicologia del colore
Il colore quindi una sensazione che viene avvertita dal cervello e avr
conseguenze anche nel nostro organismo e sul nostro atteggiamento
psicologico.
Questo argomento riguarda da vicino una scienza chiamata neurofisiologia.
Non siamo ora chiamati ad approfondirlo, ma per renderti conto di quanto
questa scienza studi meccanismi in realt molto vicino alla nostra quotidianit,
pensa all'effetto diverso che hanno sulla nostra psiche una bella mattinata di
sole o una giornata di pioggia o la notte.

I modelli del colore
Prima di affrontare i modelli di colore, indichiamo il significato di alcune parole
che ci aiuteranno nella comprensione dei prossimi concetti.
Tinta:
attributo della percezione di colore per mezzo del quale l'oggetto della
percezione definito di un certo colore (rosso, giallo, verde.).

Saturazione:
attributo della percezione di colore che permette di valutare la purezza di
un colore.
Valore:
indica la quantit di bianco nero o grigio presenti nel colore
Contrasto:
la differenza tra i valori.
Tono:
mentre la tinta definita nel sistema cromatico secondo la sua lunghezza
d'onda, il tono descrive il manifestarsi della tinta, che pu modificarsi da
condizione a condizione.
Il modello RGB
Una vasta percentuale dello spettro visibile pu essere rappresentata
miscelando i colori primari rosso, verde e blu (Red, Green, Blue, ovvero RGB)
in diverse proporzioni e intensit. Quando questi colori si sovrappongono, si
ottiene il cyan, il magenta e il giallo.
I colori primari possono essere combinati per creare il bianco, e sono anche
detti colori additivi. Unendo tutti i colori si ottiene il bianco: in pratica, tutta la
luce viene riflessa e percepita dall'occhio. I monitor dei computer creano il
colore emettendo luce attraverso fosfori rossi, verdi e blu.
Il monitor infatti riproduce i colori utilizzando un metodo detto "Sintesi
Additiva", aggiungendo cio colori per ottenerne altri i quali non sono
nient'altro che la somma dei colori di partenza. In natura invece succede il
contrario. Tutto ci che l'occhio umano riesce a percepire in effetti ci che un
certo oggetto (composto da un determinato materiale) respinge dopo aver
assorbito tutte le componenti cromatiche della luce tranne una.
Il modello CMYK

Il secondo modello che dobbiamo conoscere per la creazione del colore si

chiama CMYK (Cyan, Magenta, Yellow, blacK) e si basa sulla capacit propria
dell'inchiostro di assorbire la luce sulla carta. Quando la luce bianca colpisce gli
inchiostri traslucidi, una parte dello spettro viene assorbita e una parte viene
riflessa e percepita dall'occhio.
Teoricamente, i pigmenti puri di cyan (C), magenta (M) e giallo (Y) dovrebbero
combinarsi per assorbire tutto il colore e produrre il nero (per questa ragione
sono anche detti colori sottrattivi). Nella realt tutti gli inchiostri per la stampa
non producono un colore nero puro ma producono un colore marrone scuro.
Per ottenere il nero vero e proprio devono essere combinati con un inchiostro
nero (K di blacK, da non confondere con B di Blue). La combinazione di questi
quattro inchiostri per riprodurre il colore definita quadricromia.
I colori sottrattivi (CMY) e i colori additivi (RGB) sono complementari. Ogni
coppia di colori sottrattivi crea un colore additivo e viceversa.

Tavolozza di colori per il web
La 'tavolozza Web' un insieme di 216 colori che ogni web designer dovrebbe
conoscere e saper utilizzare per consentire ai visitatori di visualizzare le pagine
nel modo in cui sono state progettate.
Un PC dotato di scheda video a 256 colori pu mostrare solo 216 colori fissi in
modo affidabile, ma non tutti i nostri utenti possono disporre di una scheda
video capace di visualizzare migliaia di colori.
Quando un browser non dispone di determinati colori, avendone disponibili solo
256, prova a "crearli", mescolando pixel di colori. Il colore ottenuto simile a
quello non disponibile, ma non il colore che hai scelto tu. Allora cosa fare per
non rischiare?
Usa la palette di colori web safe che comune a tutti i browser e che consente
di evitare il processo di retinatura.

Ti starai ora chiedendo perch 216 colori e non 256? presto detto: alcuni di
questi 256 colori sono utilizzati dall'interfaccia del sistema operativo e non
sono disponibili al browser. La cosa non deve farti disperare, n deve
preoccuparti pi di tanto perch la maggior parte degli editor HTML e degli
strumenti grafici include la tavolozza Web, devi solo essere sicuro di avere
selezionato la tavolozza giusta.
Questo vale soprattutto per i programmi come Photoshop, con i quali
possibile lavorare sia per il web che per la grafica da mandare in stampa, nei
quali bisogna accertarsi che a palette che stiamo usando sia proprio quella
giusta.
Se preferisci la codifica HTML diretta, devi per conoscere il valore decimale di
ciascun colore per il Web. Nel codice HTML ciascun valore formato da sei
cifre, preceduti dal simbolo #: i colori del Web sono sempre formati da tre
coppie di cifre identiche, essendo tutte le cifre multiple di 3 (cio 0, 3, 6, 9, C,
F).
Ci significa che #6600ff un colore del Web, mentre non lo #663d4e1.
Con l'evoluzione tecnologica la limitazione dei colori nel web sta gradualmente
sparendo. Questo un vantaggio ma pu rivelarsi fatale per una buona riuscita
del progetto grafico dove bisognerebbe avere una rigorosa limitazione e
un'armonia nell'utilizzo delle leggi cromatiche.
Basta guardare quello che succede nella comunicazione e nell'immagine
coordinata delle aziende: l'uso dei colori limitato. Allora questa regola
dovrebbe essere usata anche nel web.
Stabilisci una gamma di colori limitata da usare nel tuo sito, e gioca con le loro
diverse combinazioni per caratterizzare gli elementi che ne compongono la
struttura grafica. Puoi anche giocare con il colore per differenziare le varie
sezioni del tuo sito e creare con il colore delle chiavi di lettura.
Combinazioni efficaci di colore sono una questione di relazione tra colori,
piuttosto che di scelta di una determinata sfumatura (sfumatura all'interno di
una gamma).


Introduzione all'HTML
Questa breve introduzione all'html non vuole essere un manuale d'uso, ma,
dato che si rivolge a chi non ha mai usato lo HTML per creare pagine web,
vuole essere solo un'introduzione per il web designer. Chi volesse approfondire
pu far riferiemento alla Guida HTML.
Lo HTML (Hyper Text Mark-up Language) nasce come linguaggio per la
descrizione di testi strutturati. Devi sapere che lo HTML non come un
linguaggio di programmazione ma un semplice sistema di contrassegno, i cui
TAG vengono riconosciuti ed interpretati dai browser web. Le peculiarit dello
HTML fanno si che tu puoi avvicinarti al web publishing senza avere alcuna
conoscenza tecnica preesistente.
Per chi comincia da zero consigliabile utilizzare il notepad di windows per
scrivere il codice html delle pagine che si andranno a realizzare. Esistono
tuttavia appositi editor visuali che permettono di operare con maggiore
semplicit (frontpage, dreamweaver ecc...).
Un Po' Di Storia
Le specifiche del linguaggio HTML sono state pubblicate dal World Wide Web
Consortium (W3C). Questo organismo internazionale, fondato nell'ottobre
1994, composto da universit e aziende private (tra cui IBM, Microsoft,
Netscape Communications Corporation, Novell Softquad, Spyglass e Sun
Microsystems) e coordinato da LCS (Laboratory for Computer Science). Esso
ha lo scopo di guidare lo sviluppo del Web e di definirne gli standard.
HTML 3.2
I browser di terza generazione (in pratica anche i pi vecchi ancor oggi
utilizzati) comprendono lo HTML3.2. Questo caratterizzato da TAG
(tipicamente inseriti in coppie) che possono venire ulteriormente specificati con
attributi. Quando i designer "sbarcano" su internet decidono di voler usare lo
HTML, che come abbiamo detto all'inizio nato per descrivere TESTI
strutturati, per creare pagine eleganti con l'inserimento di grafica. In poche

parole una forzatura. L'unico strumento che questi designer hanno a loro
disposizione per l'impaginazione delle immagini erano (e sono tuttora) le
tabelle dello HTML, che da questo momento in poi diventano uno strumento
usato e abusato! Lo HTML 3.2 permette di regolare gli allineamenti delle celle
della tabella al punto, ed l'unico contesto in cui gli allineamenti si assegnano
per pixel. Lo HTML 3.2 permette anche di allargare una cella per occupare le
colonne limitrofe o le righe limitrofe.
HTML 4.0
Nasce nel 1999 con l'intento di:
1. Ridurre la differenza tra lo HTML compreso dai browser e lo HTML
ufficiale. Per esempio, standardizza i frame;
2. Separare contenitore da contenuto;
3. Aggiungere supporto per alcune nuove tecnologie;
4. Migliorare l'accesso al web per i portatori di handicap;
5. Abbracciare Unicode 2.0.

Concetti di base dell'HTML
1. Un file HTML , in origine, un semplice documento di testo non
formattato (di tipo ASCII, con estensione .txt, come quelli che si possono
creare con il Blocco note di Windows).
2. Cosa vuol dire formattare un testo? Semplicemente assegnare a un testo
un formato, o meglio una serie di attributi. Facciamo un esempio:
assegnare le parti in grassetto, corsivo, un colore a un testo o un
determinato font, dimensioni e cos via. Quando invece vuoi formattare
un intero documento vuol dire definire la collocazione e il tipo di
visualizzazione (il layout) di tutti gli elementi presenti nel documento
stesso.

3. All'interno del documento devi inserire non solo il testo che vuoi far
apparire nella pagina Web ma anche alcune istruzioni specifiche (TAG o
marcatori) del linguaggio HTML.
4. Ricorda che per i nomi dei file e per le estensioni degli stessi si usano
sempre i caratteri in minuscolo: .html o .htm
5. I parametri o TAG (Markup TAGs = marcatori), attraverso i quali
forniamo allo HTML le indicazioni per la formattazione al documento oltre
che all'inserimento di immagini e altri elementi multimediali, non sono
altro che parole chiave contenute all'interno dei simboli "<" (maggiore) e
">" (minore), chiamati anche parentesi uncinate.
6. Tutti gli elementi ed il contenuto di un documento HTML sono compresi
all'interno dei marcatori <html> e </html>. Il simbolo "/" (slash) indica
la fine del TAG.
7. Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML testuale,
ma anche solo il Blocco Notes di Windows.
8. Abbiamo gi detto, ma bene ripeterlo, i siti Web, prima della
pubblicazione, vanno creati in locale, cio sul tuo hard disk. Solo in un
secondo momento vengono trasferiti nei server attraverso (in genere)
programmi di FTP (= File Transfer Protocol) mediante passord e UserID,
per cui nessuno oltre te dovrebbe poter modificare le tue pagine.
9. Esistono anche dei TAG che non hanno bisogno di chiusura, perch la
loro funzione non quella di marcare un elemento, ma di fornire
informazioni di diverso tipo.
10. ATTRIBUTI E VALORI: le istruzioni inserite all'interno dei TAG
possono contenere oltre ai nomi, anche gli attributi e i valori del
comando dato. In generale, lo schema previsto dalla sintassi HTML il
seguente: <TAG ATTRIBUTO=VALORE>.</TAG>
11. All'interno della pagina HTML puoi inserire: testo, immagini,
tabelle, suoni, liste, moduli, altre pagine, effetti particolari e collegamenti
ipertestuali (link).

12. Puoi inserire il testo direttamente all'interno del documento HTML,

insieme ai TAG necessari.
13. I materiali multimediali devi considerarli come file esterni,
richiamati nella pagina in fase di visualizzazione mediante i rispettivi TAG
presenti nel file HTML.
14. I collegamenti ipertestuali possono essere associati in modi diversi
(mediante appositi TAG, sempre inseriti nel file HTML di base) a singole
parole, intere frasi o immagini, facendo clic sulle quali il tuo utente pu
passare ad altri punti dello stesso documento (link interni), o ad altri
documenti o indirizzi di posta elettronica (link esterni).

Anatomia di una pagina Web
I Tag Principali
Il codice HTML si caratterizza sempre per la presenza al suo interno di tre TAG
fondamentali: <HTML>, <HEAD> e <BODY>. La struttura di base di ogni
documento HTML quindi articolata in questo modo: <HTML> <HEAD>
</HEAD> <BODY> </BODY> </HTML>
Il browser sa che deve leggere tutto ci che contenuto entro i TAG
<HTML>.</HTML> come codice HTML ed in grado di riconoscere il punto di
inizio e quello di chiusura rispettivamente della testa e del corpo del
documento.
Come avrai gi capito, quindi, un documento HTML si divide in due parti
fondamentali: l'intestazione e il corpo del documento.
<head> = intestazione
Gli elementi <head> e </head> sono posti immediatamente dopo l'apertura
del TAG <html> e racchiudono l'intestazione vera e propria del documento. In
questa parte del codice devi mettere tutte le informazioni necessarie al
browser per una corretta interpretazione del documento, ma che l'utente non

visualizza sulla schermo, a meno che non apra la finestra del browser che fa
visualizzare il codice sorgente.
L'intestazione fornisce: il titolo della pagina e le parole chiave per i motori di
ricerca. Le parole chiave altro non sono che delle informazioni che vengono
passate al browser tramite dei TAG specifici, e che servono ai motori di ricerca
per comprendere il contenuto del tuo sito.
Vedremo pi da vicino nella lezione relativa ai motori di ricerca.
<html> <head> <title>titolo del documento</title> </head> <body>
</body> </html>
<body> = corpo del documento
Contiene tutti gli elementi della pagina che verranno effettivamente visualizzati
a video: il testo, le immagini, gli applet Java, il codice Javascript, e tutti quei
contenuti multimediali che vengono mostrati sullo schermo. Il TAG <body>,
pu essere utilizzato in forma semplice oppure se ne possono specificare alcuni
attributi e i relativi valori.
Se lasci questo TAG privo di attributi, lascerai gran parte dei criteri di
visualizzazione della tua pagina alle impostazioni predefinite del browser di
ciascun visitatore: il colore dello sfondo, il colore dei testi, quello dei
collegamenti ipertestuali attivi e visitati.
Viceversa, specificando nel codice HTML gli opportuni attributi del TAG <body>
puoi definire indicazioni specifiche circa la visualizzazione di questi elementi,
esattamente come tu li hai progettati.

Il colore e i commenti in HTML
Anche se abbiamo gi trattato questo argomento nella sezione relativa al
colore nel web, utile rivedere insieme alcuni concetti chiave che non dovrai
mai dare per scontati, ma che una volta acquisiti saranno per te molto
spontanei.

La definizione del tipo di colore viene espressa mediante caratteri esadecimali

preceduti dal simbolo "#" (cancelletto): essi possono comprendere i numeri da
0 a 9 e le lettere da "A" a "F". I primi due caratteri si riferiscono alla quantit di
rosso presente nella gamma RGB (Red Green Blue), i due successivi
determinano la quantit di verde, mentre gli ultimi due si riferiscono alla
componente blu. L'intera gamma di colore compresa tra "#FFFFFF" (bianco)
e "#000000" (nero). In Internet non puoi utilizzare tutti i colori esistenti nello
spettro cromatico, ma consigliabile operare una scelta attraverso quelli
disponibili nella "palette web" (una raccolta di 216 colori comuni a sistemi
operativi differenti), altrimenti i browser potrebbero sostituire il colore che tu
hai scelto, ma che non supportato con un altro simile a quello ma non
esattamente identico, vanificando i tuoi sforzi di progettazione grafica.
I Commenti
Ricordati che a volte pu essere utile "commentare il codice HTML, soprattutto
quando usi determinate funzioni di javascript. I commenti non sono visualizzati
dal browser, ma ti saranno sicuramente utili quando dovrai "rimettere le mani
nel codice" per cambiarlo, o semplicemente per usarlo in altre occasioni. La
creazione di un commento genera il seguente codice HTML: 

Gli elementi deprecati dell'HTML
L'HTML 4.01 il principale linguaggio di marcatura presente sul Web. Tuttavia
da alcuni anni il consorzio WWW ha stabilito che il linguaggio standard con cui
organizzare i contenuti del proprio sito Web l'XHTML. Se si volesse essere
fiscali, dunque con l'XHTML che si dovrebbero costruire le pagine Web.
Per chi vuole continuare ad utilizzare questo linguaggio bene sapere che,
sempre secondo gli standard pubblicati dal W3C, ci sono alcuni elementi che
sono stati deprecati, ossia considerati superati da altre tecnologie o da altri
linguaggi. Tra questi ci sono alcuni tag diffusissimi come <FONT> o <B>. Qui

sotto forniamo un elenco dei principali tag deprecati e accanto la tecnologia

con cui sostituirli.
Tag Deprecato
Sostituto Corretto
<APPLET>
Il noto tag per includere le applet Java deve essere sostituito dal tag
<OBJECT>. Per esempio <OBJECT title="Una bandiera"
classid="java:Flag.class" width="300" height="200">.
<B>
Un tag tuttora usatissimo, in tutti i siti e in tutti gli ambiti. Dev'essere sostituito
con i CSS. In particolare con l'attributo font-weight: bold.
<FONT>
Anche in questo caso si tratta di un tag diffusissimo e anche in questo caso
dovrebbe essere sostituito dall'uso dei CSS. In particolar modo dai tag font-
family, font-size, color ecc. Si veda anche in questo caso il capitolo della guida
sui font e css per tutte le opzioni disponibili.
<CENTER>
Il tag <CENTER> non dovrebbe pi essere utilizzato. Si consiglia di utilizzare
<DIV ALIGN="CENTER"> </DIV>.
<S>
il tag per visualizzare una linea di cancellazione sulla parola visualizzata.
Andrebbe sostituito con i CSS: text-decoration: line-through;.
<U>
il tag per visualizzare una parola sottolineata. Andrebbe sostituito con i CSS:
text-decoration: underline;.

Ricordiamo anche che le tabelle non vanno utilizzate come impostazione per il
layout del sito. L'utilizzo pi corretto quello di utilizzare un layout con i css. Per

un elenco dei tag deprecati dal passaggio dall'HTML 4.0 all'HTML 4.01 si
rimanda all'elenco del W3C.

Panoramica sui Frame
Cosa sono
Ora che hai imparato ad usare lo HTML vediamo come puoi usarlo in
applicazioni pi complesse. I frame sono entrati ormai nella consuetudine del
web, anche se hanno creato intorno alla loro presenza pareri discordanti tra
che li ama e chi li odia. La parola frame significa riquadro, cornice. Nel codice
HTML puoi utilizzare i frame all'interno di una pagina Web per suddividerla in
pi riquadri, o meglio in pi pagine HTML. Regola numero uno: ogni frame
una pagina HTML indipendente.
A cosa servono
I frame che compongono una pagina web funzionano insieme mediante l'uso di
uno o pi set di frame. Il set di frame altro non che una pagina HTML che
definisce la struttura e le propriet della pagina Web, comprese le informazioni
sul numero di frame visualizzati su una pagina, la dimensione dei frame,
l'origine della pagina caricata in un frame e altre propriet definibili. La pagina
di un set di frame non viene visualizzata nei browser, serve solo a
memorizzare le modalit di visualizzazione dei frame.
Facciamo un esempio
Supponiamo che tu voglia costruire una pagina web che contiene tre frame. Di
quante pagine HTML hai bisogno? La risposta semplice: le pagine che ti
occorrono sono quattro: il file del set di frame e i tre file con il contenuto che
viene visualizzato all'interno dei frame. Quando progetti una pagina mediante i
set di frame, devi salvare ciascuno di questi quattro file per garantire che la
pagina funzioni correttamente nel browser.
Cosa scegliere

I frame vengono generalmente utilizzati perch facilitano la navigazione e

l'organizzazione della navigazione di un sito internet, a patto di non abusarne e
di saperli gestire nel migliore dei modi. Ad esempio, in una pagina Web un
frame pu contenere il menu di navigazione e un altro frame pu essere
riservato al contenuto. Poich il menu di navigazione si trova in un frame, il
visitatore del sito pu fare clic su una voce di menu e il contenuto viene
visualizzato nell'apposito frame senza che il menu di navigazione venga
modificato. In questo modo, gli utenti si orientano pi facilmente all'interno del
sito.
Tuttavia, poich gestire un sito realizzato con i frames pu risultare complesso,
spesso possibile creare una pagina Web senza frames in grado di fornire lo
stesso effetto di una pagina che utilizza i frames. Ad esempio, se si desidera
avere la struttura di navigazione sul lato sinistro della pagina, possibile
suddividere la pagina in due frames oppure includere la struttura di
navigazione sul lato sinistro di ogni pagina del sito.
Perch allora utilizzare i frames? La differenza nell'organizzazione dei file
appena vista consiste esclusivamente nel fatto che i frames consentono di
creare la struttura di navigazione una sola volta. Se si decide di utilizzare i
frames nella pagina Web, DEVI avere ben chiara la relazione tra i singoli frame
e i set di frame per evitare problemi con i collegamenti.

Vantaggi e svantaggi nell'uso dei frame
Se ci sono per tante persone che non amano questo sistema di gestione di un
sito ci saranno dei motivi. Analizziamoli insieme.
1. Abbiamo detto che i frames dovrebbero agevolare l'utente durante
la navigazione delle pagine web, ma spesso questo non succede.
Dipende dal sistema o dipende dal progettista? Sicuramente chi alle
prime armi con la progettazione dei siti internet potrebbe abusare
nell'uso dei frames, e quindi creare un sito che invece di aiutare l'utente,
gli renda impossibile la navigazione nel modo corretto.

2. Un altro problema riguarda l'indicizzazione nei motori di ricerca. Devi

sapere che gli spider di molti motori di ricerca non sono al passo con le
innovazioni tecnologiche e, comportandosi in maniera molto simile ai
vecchi browser testuali, saltano i TAG FRAMESET e i loro contenuti. Di
conseguenza si rischia di non far visualizzare agli stessi spider gli URL e i
file HTML contenuti nei TAG FRAME, e quindi di non indicizzare tutte le
pagine che appartengono al sito web visitato. Devi dunque fare in modo
che lo spider trovi altrove gli URL alle altre pagine o almeno un singolo
URL ad una pagina che elenchi tutte le principali sezioni del sito, con
relativi collegamenti. Nella lezione relativa ai motori di ricerca vedremo
come risolvere questo problema.
3. E' molto importante anche dare ai visitatori la possibilit di stampare
le pagine del sito di cui hanno bisogno (soprattutto se il tuo sito
presenta delle schede tecniche di prodotti), ma con i frame questo non
possibile, poich un frame viene stampato se attivo (cio se l'ultimo
frame su cui ha fatto clic l'utente). Se un altro frame ad essere attivo,
il suo contenuto ad essere stampato.
4. Anche con i bookmark o preferiti abbiamo problemi: l'aggiunta di un
frame indicherebbe il set di frame e non il contenuto desiderato.
5. L'unico aspetto che depone veramente a sfavore dei frames la loro
incompatibilit con i programmi di navigazione dei non vedenti.
Nell'attesa che la tecnologia risolva questo problema e "abbatta" questa
barriera "architettonica", cerchiamo di rendere il web accessibile a tutti!
Cosa fare
Se per il tuo sito sono fondamentali tutti e cinque i punti sopra elencati,
sicuramente non consigliabile l'utilizzo dei frames, se invece, non hai la
necessit di far stampare delle pagine, non ti interessa l'inserimento nei
bookmark, e non vuoi che tutti possano accedere al tuo sito non esitare ad
utilizzarli.
La decisione presa

Hai analizzato i problemi ergonomici analizzati prima? Hai comunque deciso di

usare i frame nel tuo sito? Allora vediamo insieme qual il modo pi corretto
per progettare un sito internet con i frames.

Suggerimenti per il designer
I browser di ultima generazione hanno "fatto pace" con i frames e hanno
risolto tutti i problemi legati alla lettura e alla visualizzazione dei siti che
utilizzano i frames. Il problema per rimane: un cattivo progettista il nemico
principale del proprio sito.
1. Ricorri all'uso dei frames se la navigazione del tuo sito molto complessa
e vuoi facilitare la vita del tuo utente creando un sistema di spostamenti
stabile all'interno del sito.
2. Cerca di nascondere i bordi dei frame. In questo modo eviterai di rubare
spazio al contenuto del sito stesso. Ricorda che non tutti gli utenti hanno
un monitor da 17 pollici o superiore!!!
3. Prima di pensare alla grafica organizza in modo sistematico la
navigazione e le sezioni del sito, eviterai di complicarti ulteriormente la
vita.
4. Se il sito progettato bene anche i motori di ricerca riusciranno a trovare
tutte le tue pagine.

Creiamo un sito suddiviso in frame
Per creare una pagina web strutturata con i frames necessario creare pi files
HTML. Questi file da soli non sono visualizzati correttamente, ma hanno
bisogno di essere richiamati da un file principale che e' poi quello che ne
permette la gestione. Prima di tutto quindi devi impostare questo file
"sorgente", e poi successivamente gli altri files che compongono il set di frame.
Il codice

Il codice del frame e' racchiuso tra i comandi <FRAMESET></FRAMESET> che

si comportano come i comandi <HTML></HTML>.
Supponiamo che tu debba impostare una pagina web come quella mostrata in
figura:
La tua pagina costituita da un frame a sinistra fisso (nel quale caricheremo il
file "sx.htm" da creare a parte) e un frame a destra (nel quale caricheremo il
file "dx.htm" da creare a parte) il quale cambier a seconda della pagina che si
vorrai far visualizzare. Come detto sopra devi gestire questi due frames
attraverso un terzo files il quale dovra' richiamarli assegnando loro una parte
della pagina. Analizziamo insieme il codice sorgente:
<HTML>
<HEAD>
<TITLE>la mia pagina con i frame</TITLE>
</HEAD>
<FRAMESET cols="100,*">
<frame name="sinistra" src="sx.htm">
<frame name="destra" src="dx.htm">
</FRAMESET>
<NOFRAMES>
<BODY>
Qui si scrivono messaggi (e codice HTML) che verranno visualizzati dai
browser che non supportano i frames e ignorati da quelli che invece li
supportano.
</BODY>
</NOFRAMES>
</HTML>

Impostati i due parametri <FRAMESET></FRAMESET>, devi definire al loro

interno i nomi e i files da richiamare nei due frames creati. Devi dare un nome
al frames (name="nome del frame") e indicare il file HTML che dentro al frame
dovrai caricare (SRC="nome del file.htm"). Devi quindi avere creato due files
di nome "sx.htm" e "dx.htm".
Avrai gi notato l'assenza del TAG BODY. La cosa non deve stupirti perch,
come abbiamo gi detto ci sono solo istruzioni di visualizzazione e struttura e
non contenuti. Il Frameset inizia subito dopo l'HEAD. Cos'altro ci dice il codice?
La linea <FRAMESET cols="100,*"> descrive il frameset COLS = colonne
Quando presente nel codice questo attributo significa che il nostro frame
diviso verticalmente. Se invece vuoi dividere il frame orizzontalmente
l'attributo che devi usare ROWS = righe. <FRAMESET cols="100,*"> ci
dice ancora molte cose. Innanzi tutto le dimensioni dei singoli frames.
Nell'esempio che stiamo considerando il codice ci dice che le colonne sono due
(abbiamo due cifre tra le virgolette e separate da una virgola) e sono
dimensionate in pixel.
E pi precisamente avrai un frame da 100 pixel a sinistra e un frame, a destra,
che occupa tutto lo spazio restante. "Tutto lo spazio restante" indicato con il
simbolo asterisco (*). Generalmente, quando diamo le dimensioni in pixel pi
utile definire solo la dimensione dei frame pi piccoli e indicare con l'asterisco
la dimensione del frame pi grande.
Se vuoi hai anche la possibilit di dimensionare i frame secondo percentuale.
In questo caso la sintassi che devi usare la seguente: <FRAMESET
COLS="25%,75%">.
Il tag NOFRAME
I vecchi browsers non supportavano i frames per cui, nella prospettiva che le
pagine vengano visualizzate da uno di questi "vecchi" software, e' utile inserire
del codice che avverta della presenza di frames e della impossibilita' da parte
del browser di visualizzarle. Il tag NOFRAMES stato introdotto (anche) a
questo scopo ed dedicato a tutti quei browser che non supportano i frames.
Per vedere tutte le possibili combinazioni dei frames, su HTML.it trovi una

guida che ti spiega con esempi pratici cosa fare, all'indirizzo:

http://www.html.it/guida/html_13.htm.

Dove vanno a finire i link
Il vero problema della gestione dei frames nasce nel momento in cui devi
inserire i link, ma non una "mission impossibile". Devi solo considerare che:
1. Il browser, in assenza di specifiche, visualizza la pagina linkata all'interno
della finestra che contiene il link.
2. Devi dire tu al browser dove vuoi che sia visualizzata la nuova pagina.
3. Per ogni link presente nelle singole pagine che compongono il frame set
devi specificare in quale finestra si dovr aprire il file che hai linkato
Consideriamo la pagina che abbiamo analizzato all'inizio.
Supponi che da un link presente su "sinistra", tu debba caricare un'altra pagina
sul frame "destra". Cosa succederebbe se tu utilizzassi la solita sintassi dei
link?
Con questa sintassi <A HREF="nuova.htm">Clicca</A> faresti caricare la
pagina che vuoi caricare a destra nella parte sinistra, cio nello stesso frame
da cui "partito" il link.
Devi essere pi preciso nelle indicazioni del codice. La sintassi giusta :
<A HREF="nuova.htm" TARGET="destra">Clicca</A>
L'attributo TARGET serve appunto per dire al browser in quale frame si deve
aprire la nuova finestra.
Cosa possiamo fare con l'attributo TARGET:
1. TARGET="_blank" Apre il documento collegato in una nuova finestra del
browser senza chiudere la finestra corrente.
2. TARGET="_parent" Apre il documento collegato nel set di frame
principale del collegamento. Purtroppo, Netscape 4.01 (quantomeno la

versione per Mac) visualizza il target=_parent come se fosse un

target=_top.
3. TARGET="_self" Apre il collegamento nel frame corrente sostituendone il
contenuto.
4. TARGET="_top" Apre il collegamento nel set di frame pi esterno del
documento corrente sostituendo tutti i frame.

Ultimi appunti
Eliminare i bordi
FRAMEBORDER=NO elimina i bordi 3D tra un frames e l'altro. BORDER=0
indica lo spessore in pixel dell'eventuale bordo che di default 5 (queste
istruzioni funzionano solo per Netscape3 e successivi). FRAMEBORDER=0
elimina i bordi per Internet Explorer3 (e successivi). Se inserisci tutte e tre le
istruzioni, la pagina viene visualizzata correttamente da entrambi i browser.
<frameset cols="10%,80%,10%" FRAMEBORDER=NO BORDER=0
FRAMEBORDER=0>
Ridimensionare i frame? meglio di no! NORESIZE impedisce all'utente di
ridimensionare i frame a suo piacimento, rischiando di rendere vano il tuo
sforzo di coerenza grafica e gestione del codice
<frame name="destra" src="dx.htm" NORESIZE>

Le barre di scorrimento
Vuoi eliminare sempre le barre di scorrimento (scrollbars)?
< frame name="destra" src="dx.htm" SCROLLING="NO">
Vuoi renderle sempre visibili?
< frame name="destra" src="dx.htm" SCROLLING="YES">
Vuoi renderle visibili solo quando servono?

< frame name="destra" src="dx.htm" SCROLLING="AUTO">

Prendiamo le distanze Se vuoi puoi anche regolare la distanza del contenuto
del frame dal margine alto (manginheight) e sinistro e destro (marginwidth):
< frame name="destra" src="dx.htm" MARGINHEIGHT=3 MARGINWIDTH=4>

Cosa Flash
Questa lezione non vuole essere una guida all'uso di Flash, ma una panoramica
generale sulle potenzialit che offre questo programma e sull'interfaccia di
lavoro. Per maggiori informazioni visitate il sito di HTML.it dedicato
interamente a Flash-MX.
Cosa Flash
Flash un software che ti permette di realizzare animazioni per il web e non
solo.I filmati che puoi produrre con Flash sono grafici e animazioni composti
principalmente da grafici vettoriali, e possono contenere audio e grafici bitmap
importati. Attraverso i filmati realizzati in Flash puoi realizzare un contenuto
interattivo per il tuo sito.
Puoi usare Flash per :
Riempire le forme e il testo con sfumature, colori che gradualmente si
trasformano in altri colori.
Creare un testo semplice o elaborato che rimanga fisso o appaia animato
sulla pagina Web.
Usare gli strumenti di Flash per creare immagini per la propria pagina
Web o per importarle.
Animare le immagini e fare apparire e scomparire gli oggetti usando la
funzione trasparenza.
Creare pulsanti per le pagine Web che non si limitino al solo caricamento
dei programmi ma che cambiano anche forma e colore.

Aggiungere suoni o musica al filmato.

Creare menu di scelta rapida che i visitatori possano usare per esplorare
il sito.
Creare tutto un intero sito.
Prima di tutto il Flash player
La prima cosa che devi fare assicurarti che il tuo browser supporti le
animazioni Flash. Flash una tecnologia che richiede l'installazione di un plug-
in sul browser affinch i file siano correttamente visualizzati. Il Flash Player
un plug-in gratuito che si pu scaricare dal sito della Macromedia e che
permette di visualizzare i filmati realizzati con Flash. Flash Player risiede sui
computer locali, dove riproduce i filmati in un browser o come applicazione
autonoma.
File e estensioni
Devi sapere che il file su cui lavori per creare un'animazione Flash, non lo
stesso file che poi devi utilizzare per la pubblicazione degli stessi filmati sul
web. Il file su cui costruisci l'animazione, gestisci le immagini e i suoni ha
estensione .fla mentre il file che devi usare per la pubblicazione sul web,
generato dallo stesso programma, ma ha estensione .swf.
I file .swf conservano solo le informazioni necessarie per far visualizzare il
filmato perch vengono compressi e ottimizzati dal programma. ovvio, ma
vale la pena di sottolinearlo, Flash non fa i miracoli, quindi sta a te progettare
un filmato tenendo sempre sotto controllo il peso (in termini di Kb) che mano a
mano verr ad acquisire.

Flash s / Flash No
Quando e perch puoi usare questo fantastico programma? E quando e perch
meglio evitarne l'uso?
La vera forza di Flash sta nella possibilit di animare gli oggetti, permettendo
all'utente di un sito web di interagire con queste animazioni. Flash ti permette

di esprimere un messaggio, attraverso l'uso di diverse forme di

comunicazione. Questa fondamentale caratteristica, insieme a molte altre
hanno fatto si che Flash, nonostante le previsioni pessimistiche di molti
operatori in HTML, ha fatto diffondere Flash molto pi velocemente di quanto
anche la casa costruttrice si aspettasse. E forse questa rapida diffusione non
ha permesso agli sviluppatori del programma di risolvere i problemi legati agli
standard di accessibilit. Come in tutte le cose per non bisogna abusare dello
strumento. Ci sono dei siti in cui usare Flash inutile e pu essere addirittura
deleterio. Ad esempio, quando si devono creare pagine semplici composte in
prevalenza da testo e poche immagini statiche, senza effetti di movimento.
comunque buona norma offrire all'utente finale la possibilit di scegliere,
per lo stesso sito, la versione in Flash o in HTML, soprattutto perch un sito in
Flash non compatibile con i browser usati dalle persone affette da disfunzioni
(gli "screen reader").
Va detto comunque che molto spesso i file hanno dimensioni e tempi di
caricamento ragguardevoli se non si possiede un buon collegamento ad
internet, la stragrande maggioranza delle volte molto pi alti dell'HTML.
Ricordati che gli utenti non gradiscono lunghe attese davanti al monitor del
computer, perch si annoiano e si distraggono, scegliendo altri siti: la tua
prima preoccupazione, quando progetti un sito in Flash, deve essere quella di
assicurarti che sia veloce da caricare.
Ma non tutto oro ci che riluce, infatti le prime versioni di questo software
presentavano un elevato numero di problemi, che la casa produttrice
(Macromedia) sta cercando di risolvere con le nuove versioni del programma. Il
problema pi sentito sicuramente quello di migliorare gli standard di
accessibilit di Flash.
Non devi dimenticare che lo scopo primario di un sito quello di fornire
informazioni e servizi utili all'utente. Flash pu svolgere questo compito se
dietro al sito web c' un bravo progettista. A differenza dello HTML, Flash non
un linguaggio di descrizione di documenti, ma un linguaggio visivo, devi
perci sfruttare al meglio le sue potenzialit per migliorare il tuo sito.


Come funziona Flash
Quando lavori con Flash, in pratica crei un vero e proprio filmato, attraverso
l'animazione di immagini, che puoi disegnare o importare, che devi disporre
su una linea temporale. Puoi rendere interattive le tue animazioni, assegnando
delle azioni.
Flash un software che si basa sull'uso della grafica vettoriale, in questo modo
si rende autonomo dalla risoluzione. Cosa vuol dire? Se crei un'immagine puoi
ingrandirla e ridurla senza perdere in qualit, perch non devi intervenire sulla
dimensione del file.
La grafica vettoriale tuttavia non ti permette di realizzare tutti gli effetti grafici
che puoi ottenere con i software che lavorano con le immagini bitmap, puoi
comunque importare immagini bitmap precedentemente create con altri
software, dopo averle ottimizzate per il web.
I filmati realizzati con Flash non sono destinati solo al web, ma possono essere
trasformati attraverso l'esportazione in filmati video e cd-rom, che possono
essere visualizzati sia su Windows sia su Machintosh ed anche su Linux. Se
decidi di impiegarlo nel web puoi costruire un intero sito, oppure realizzare solo
alcune parti del sito, che vanno dalla barra di navigazione, ai banner, o anche
per aggiungere una colonna sonora.
Poich la visualizzazione dei filmati Flash avviene, come abbiamo gi visto,
attraverso un plug-in, non avrai problemi di incompatibilit tra i browser.
Infine Flash ti da la possibilit di lavorare in streaming, cio l'utente del tuo
sito non dovr aspettare di aver scaricato dalla rete tutto il sito per poterlo
visualizzare. Flash permette di far scaricare le informazioni necessarie alla
visualizzazione in modo incrementale. Lo streaming dunque una tecnologia
che fa in modo che il filmato inizi ad essere visualizzato quasi subito,
continuando a scorrere mentre il download in corso.

Gestito da server adeguati, lo streaming abbassa la qualit con il rallentare

della trasmissione, per tornare ad una buona qualit, non appena la
trasmissione torna ad essere veloce.
Non sottovalutare l'importanza di questa possibilit, non c' niente di peggio,
nella progettazione del sito, che creare smarrimento nell'utente. Al clic del
mouse, deve sempre corrispondere una reazione nel browser. Se l'utente al
clic non vede accadere niente perch il browser sta scaricando i dati dal server
remoto, pu succedere che decida di cambiare sito. Per risolvere questo
problema puoi (anzi devi!!!) usare un preload. Questa tecnica ti permette di
usare un'animazione semplice e leggera ma dall'efficace impatto emotivo, che
ti permetter di "ingannare" l'attesa dell'utente, perch sar visualizzata subito
al clic del mouse, mentre il browser avr il tempo di scaricare tutte le
informazioni per la visualizzazione della pagina in questione.

L'ambiente di lavoro di Flash
Per chi desidera costruire un filmato flash passo passo rimandiamo alla
completissima guida Costruire un sito in Flash. Quando lavori con Flash hai a
disposizione sei diverse funzionalit:
l'AREA DI LAVORO
lo STAGE, cio l'area rettangolare in cui viene riprodotto il filmato
la LINEA TEMPORALE, che detta i tempi dell'animazione
la LIBRERIA
i PANNELLI
gli STRUMENTI
Apriamo insieme il programma e vediamo cosa troviamo.
L'area di lavoro paragonabile alla tua scrivania, dove puoi trovare tutto
quello che ti serve per svolgere al meglio il lavoro. L'elemento che occupa la
parte pi grande dello schermo lo STAGE, l'area rettangolare in cui devi

creare il contenuto dei singoli fotogrammi, disegnando direttamente all'interno

di quest'area.
Prima di iniziare a lavorare ricordati di impostare:
le dimensioni dello stage o in pixel, o in modo che lo spazio intorno al
contenuto sia uguale su tutti i lati o in base all'area di stampa
la frequenza dei fotogrammi impostando il numero dei fotogrammi da
visualizzare per secondo di animazione (12 f/s la frequenza consigliata
per il web)
il colore di sfondo del filmato
Nella parte alta dello schermo trovi la LINEA TEMPORALE o TIME LINE. In
quest'area puoi controllare due operazioni essenziali: sincronizzare
l'animazione e montare le immagini a livelli separati. Nella linea temporale,
attraverso i fotogrammi o keyframes, puoi sincronizzare l'animazione.
La LIBRERIA l'area in cui gestisci, organizzandoli per cartelle, i simboli creati
con Flash, i file audio, le immagini che hai importato e i filmati di Quick Time.
I SIMBOLI sono parte integrante nella creazione dei filmati. Hai a disposizione
tre tipi di simboli: grafici, pulsanti e clip filmato. Sono molto importanti perch
ti aiutano a ridurre la dimensione dei file perch, indipendentemente dal
numero di copie che fai di uno stesso simbolo, questo viene caricato una sola
volta. Puoi modificare i simboli sia sullo stage, che in una finestra separata.
I PANNELLI contengono i comandi e le opzioni relative a ciascun tipo di
elemento. Usa i pannelli per modificare i simboli, le istanze, i colori, i
riempimenti, il testo e altri tipi di elementi. Puoi usare il lay out predefinito o
personalizzare la disposizione dei pannelli. La maggior parte dei pannelli
include il men a comparsa Opzioni, che ti permette di accedere ad opzioni
aggiuntive. indicato da un triangolo nella parte superiore destra del pannello.
Il pannello degli STRUMENTI molto simile agli altri software della Macromedia
e si pu dividere in quattro sezioni:

1. una sezione STRUMENTI, dove trovi tutto ci che ti serve per realizzare
la grafica delle animazioni
2. una sezione di VISUALIZZAZIONE, dove trovi lo zoom e lo strumento
panoramica
3. una sezione COLORI, dove trovi le palette dei colori sicuri per il web sia
per il colore dei tratti che per il colore dei riempimenti
4. una sezione OPZIONI, dove trovi i modificatori per lo strumento che hai
selezionato
Anteprima e prova dei filmati
Man mano che crei il tuo filmato hai bisogno di monitorare la produzione per
controllare il peso, i tempi di caricamento e la velocit di riproduzione dei
fotogrammi. Per fare questo hai una doppia possibilit di scelta: provare i
filmati nell'ambiente di creazione di Flash o fare un'anteprima nel browser web.
La cosa migliore che puoi fare usare l'anteprima nell'ambiente Flash durante
la creazione del filmato, perch grazie l'opzione "mostra streaming" puoi avere
un'idea dei tempi di caricamento in base al tipo di connessione e la dimensione
del file. Quando il filmato finito puoi vedere direttamente l'anteprima nel
browser. Ultimato e ottimizzato il lavoro puoi impostare l'esportazione con la
possibilit di settare diversi parametri di scelta.

I CSS o Fogli di stile
Ora che hai imparato ad usare lo HTML dovresti anche aver capito i suoi
vantaggi e i suoi limiti. Oggi vedremo insieme come porre rimedio ai limiti. Su
HTML.it esiste una validissima guida all'indirizzo http://www.html.it/css/. Qui
cercheremo di analizzare insieme gli aspetti concettuali sui quali si basa l'intera
struttura dei CSS.
Quando nato il web il problema principale era semplicemente quello della
gestione dei contenuti, dato anche il basso numero di utenti. Col passare del
tempo il web si diffuso a macchia d'olio, gli utenti sono diventati moltissimi, e

i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a

preoccuparsi anche della loro presentazione grafica. in questo momento che
si scoprono tutti i problemi legati allo HTML e soprattutto alla sua gestione, i
web designers si sono visti costretti ad aggirare i limiti stilistici che pone lo
HTML scontrandosi per con nuovi problemi. Vediamo quali sono i limiti pratici
principali:
conversione del testo in immagini
uso di immagini per il controllo dello spazio bianco
uso di tabelle per l'impaginazione
scrittura di programmi in sostituzione dello HTML
difficile gestione degli aggiornamenti
modifiche da effettuare sui singoli file
Abbiamo gi avuto modo di vedere che le conoscenze che hai acquisito fino ad
ora rendono molto complesse le pagine web, che sono poco flessibili e
soprattutto creano barriere agli utenti disabili (pensiamo ai frame).
I Cascade Style Sheets, che in italiano significa Fogli di stile a cascata,
risolvono gran parte dei problemi di gestione e organizzazione delle pagine
web.
Il vantaggio fondamentale che offrono i fogli di stile rispetto allo HTML il
controllo dello stile delle pagine web attraverso la separazione tra contenuti,
struttura e stile.

I fogli di stile ti permettono di specificare in modo semplice la spaziatura delle
righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei
caratteri e una moltitudine di altri dettagli.
Vediamo la gestione di una riga di testo attraverso lo HTML:
<FONT FACE=VERDANA SIZE=2 COLOR=BLACK>questo un testo</FONT>
Attraverso questa riga di codice noi diciamo al browser di far visualizzare la
scritta "questo un testo" con un font Verdana di dimensioni 2 e di colore

nero. Il testo e lo stile (font, dimensione e colore) con cui deve essere
visualizzato sono uniti in un'unica riga di codice. Cosa succederebbe se dovessi
cambiare il font di tutte le pagine del tuo sito, magari composto da pi di 100
pagine? Dovresti aprire tutti i file e modificali uno ad uno.
I fogli di stile, ti risolvono il problema perch separano lo stile dal
contenuto.
Purtroppo uno dei limiti dei fogli di stile che non sono compatibili con tutti
browser nonostante siano stati approvati da il W3C. I browser che offrono la
maggiore compatibilit sono Explorer (dalla versione 5.5) e Mozilla (ossia
Netscape 7). Netscape 4 ha seri problemi di gestione dei CSS.

Come utilizzare i CSS
Ma cosa si intende per stile? Uno stile un gruppo di attributi di formattazione
che definiscono l'aspetto di una parte di testo all'interno di un singolo
documento.
Puoi utilizzare un foglio di stile CSS per controllare molti documenti
contemporaneamente e comprendere in un unico foglio tutti gli stili di un
documento. Attraverso l'uso combinato di un foglio di stile CSS e uno stile
HTML hai il vantaggio di collegare pi documenti. Di conseguenza quando vuoi
aggiornare delle caratteristiche di formattazione delle pagine web devi solo
modificare il foglio di stile e automaticamente modificherai la formattazione di
tutti documenti che utilizzano quello stile CSS.
La formattazione HTML manuale ha la precedenza rispetto alla formattazione
applicata da uno stile CSS. Per fare in modo che gli stili CSS controllino la
formattazione di un paragrafo, necessario eliminare tutta la formattazione
HTML manuale o gli stili HTML.
I documenti HTML possono contenere regole di stile direttamente al loro
interno o possono importare i fogli di stile. Separare i fogli di stile dai
documenti HTML offre svariati benefici:

puoi condividere i fogli di stile per un gran numero di documenti (e siti).

puoi cambiare il foglio di stile senza che ci richieda modifiche al
documento.
Possiamo dividere i fogli di stile in 3 categorie:
fogli di stile in linea: con questo metodo puoi utilizzare uno stile da
applicare ad un singolo tag HTML.
fogli di stile interni: con questo metodo definisci lo stile non per il
singolo TAG, ma per tutta la pagina.
fogli di stile esterni: con questo metodo lo stile che vai a definire pu
essere utilizzato da pi pagine web, infatti la definizione viene data
all'interno di un file esterno (con estensione .css ) che viene linkato alla
pagina con un apposito costrutto.
La sintassi che devi usare nei fogli di stile la seguente :
inserisci gli attributi dentro le parentesi graffe { }
separa gli argomenti consecutivi dal segno punto e virgola (;) invece che
dalla virgola
usa i due punti (:) al posto del segno uguale (=)
separa con un trattino (-) gli attributi composti da piu' termini
Quando un attributo considerato proprieta' di un oggetto eliminalo e
trasforma da minuscole in maiuscole le iniziali dei termini (per esempio:
font-style diventa FontStyle)
Per inserire i fogli di stile su una pagina html bisogna inserire tra i TAG <head>
il TAG <style> in questo modo :
<style type="text/css">
...
</stile>
Per qualsiasi dubbio rimandiamo alla guida ai CSS di HTML.it e alla sezione
CSS di PRO.HTML.it


JavaScript
Anche in questo caso non vogliamo insegnare ad utilizzare JavaScript ma solo
farti avere una panoramica delle possibilit offerte dalla tecnologia e darti una
preparazione generale sull'argomento. Per delle guide pi dettagliate puoi
consultare l'elenco delle numerose guide JavaScript offerte da HTML.it.
Javascript un linguaggio di scripting per le pagine web che stato sviluppato
all'inizio dalla Netscape. Con questa lezione vedremo insieme alcuni semplici
concetti della "programmazione" per capire come strutturato uno script
JavaScript.
In questo capitolo useremo la parola "programma" e "programmazione" per
JavaScript anche se siamo ben consapevoli che non si tratta di un linguaggio di
programmazione. Tuttavia alcuni costrutti e la logica di JavaScript fanno ben
ricordare le logiche di programmazione.
Cosa un programma
Un programma una sequenza di istruzioni, o meglio un elenco di istruzioni
che vengono eseguite in fila, dalla prima verso l'ultima Eccoti un esempio forse
banale ma efficace: pensa di dover chiedere istruzioni a un passante "Come si
arriva in via Alfieri?" il passante risponde:
1. Vai dritto per 50 metri
2. gira a destra
3. prosegui dritto fino alla rotonda e svolta alla prima strada sulla destra
4. vai fino al terzo semaforo
5. svolta a sinistra
Questo quello che fa un programma: d delle indicazioni.
<SCRIPT type="text/javascript">
document.write("Adesso sommo uno e uno e vediamo.")
document.write(1+1)

</SCRIPT>
<NOSCRIPT>
Mi sarebbe piaciuto calcolare uno pi uno ma non posso farlo
</NOSCRIPT>
Adesso sommo uno e uno e vediamo.2

HTML E JavaScript
Lo HTML permette di specificare in che linguaggio stato scritto un programma
eseguibile. Questo programma viene eseguito da tutti i browser:
<SCRIPT type="text/javascript"> </SCRIPT>
Questo programma viene eseguito solo dai browser di terza generazione o
posteriore:
<SCRIPT LANGUAGE="JavaScript1.1" type="text/javascript"> </SCRIPT>
Questo programma viene eseguito solo dai browser di quarta generazione o
posteriore:
<SCRIPT LANGUAGE="JavaScript1.2" type="text/javascript"> </SCRIPT>

Dove e Quando
Lo script viene eseguito dal browser del visitatore quando lo incontra e nel
punto in cui lo incontra.
<SCRIPT type="text/javascript"> document.write("<IMG
SRC="immaginetta.gif">"); </SCRIPT>
L'immagine appare nel punto indicato. Lo HTML visto sopra equivalente al
seguente:
<IMG SRC="immaginetta.gif">

Le componenti di JavaScript
Variabili
I programmi possono manipolare le variabili. La variabile un dato eseguito
dalle istruzioni, che sono a loro volta eseguite dal programma.
Una variabile composta da un nome e un valore che puoi assegnare e
modificare quando ne hai voglia.
Ricordati che a differenza dello HTML nel Javascript le maiuscole e le minuscole
sono differenti. Vediamo la sintassi:
<SCRIPT type="text/javascript">
mionome="Pinco Pallo"
document.write (mionome);
</SCRIPT>

Funzioni
Una funzione un blocco di righe, isolato e etichettato con un nome suo, che
serve ad un determinato scopo e che viene utilizzato pi volte nel corso di un
programma.
Puoi riconoscere una funzione dalla presenza delle parentesi. Ricordi qualcosa
di matematica? Bene, puoi considerare la funzione del JavaScript come le
funzioni matematiche. In pratica una funzione un sottoprogramma, cio un
pezzettino di programma che fa una piccolissima cose, ma che la porta a
termine, finita.
Una funzione si scrive cos:
function nome_della_funzione
(argomenti)
{
istruzioni;

return risultato;
}
Per chiamare la funzione devi scrivere il suo nome. Esistono anche funzioni che
non hanno argomenti, o funzioni che non restituiscono risultato.
Oggetti
Se metti insieme variabili e funzioni ottieni gli oggetti che puoi appunto definire
come raccolta di funzioni e variabili. Qualsiasi programma JavaScript ha a
disposizione una certa quantit di oggetti predefiniti:
DOCUMENT cio la pagina web che stai guardando
SCREEN il monitor che stai usando per visualizzare la pagina
FORM cio I moduli dello HTML
BROWSER il programma stesso
A tutti questi oggetti puoi dare degli ordini attraverso le funzioni Puoi inviare
agli oggetti del JavaScript dei messaggi che prendono il nome di eventi e
corrispondono generalmente ad azioni dell'utente. A ogni evento puoi associare
un programma.

Il DHTML o HTML Dinamico
Quando si parla di HTML dinamico in effetti si parla si un'estensione del vecchio
HTML (arrivato alla versione 4.0) con l'uso di tre nuove tecnologie:
DOM (Document Object Model) - Modello a oggetti della pagina Web
Javascript - linguaggio di programmazione per la scrittura degli script
CSS (Cascading Style Sheets) - Fogli di stile a cascata
Il DOM la descrizione della pagina Web cosi' come verrebbe fatta in un
moderno linguaggio di programmazione, come una gerarchia di oggetti.
Una volta che il browser ha implementato il DOM, allora i normali comandi
HTML servono a creare oggetti. Usando Javascript puoi inviare ai singoli oggetti

dei comandi. L'oggetto in base al comando ricevuto modifica il proprio

comportamento. Uno script non altro che una lista di questi comandi che
indicano il comportamento dinamico del documento.
Devi comunque sapere che l'HTML dinamico molto piu' difficile del vecchio
HTML. In particolare per sviluppare dei documenti devi necessariamente
conoscere un p la programmazione ma c' il grosso vantaggio di avere
sempre il sorgente disponibile.
I Gradi di complessita' del DHTML
Ci sono quattro gradi di complessit che devi conoscere e affrontare se desideri
lavorare con il DHTML.
1. Hai i concetti alla base di ogni programma di computer : una serie di dati
in ingresso vengono manipolati da funzioni producendo dei risultati in
uscita.
2. Devi conoscere il DOM in modo da poter manipolare frames, finestre,
elementi di moduli, etc, inviando loro dei comandi quando si verificano
degli eventi in seguito ad azioni degli utenti.
3. Devi sapere come si fa a definire nuovi tipi di oggetti che poi ti
serviranno per contenere le informazioni del data base.
4. Devi tener conto delle differenze tra i vari browsers

Prima di utilizzare DHTML
Compatibilit con i Browser
difficile sviluppare una pagina dinamica che sia supportata da tutti i browser.
Come avrai capito i diversi browser non utilizzano lo stesso modello, n la
stessa descrizione della pagina. Senza entrare troppo nei dettagli, devi
assolutamente assicurarti che il tuo sito offra ai visitatori pagine che siano
visualizzabili da entrambi i browser.

Puoi ovviare al problema producendo un codice cross-browser, che sia in grado

di funzionare nei due browser, utilizzando caratteristiche di base comuni. Sta a
te utilizzare tutte le tecniche disponibili per evitare di perdere troppi visitatori.
Il browser giusto
La versione 4 e quelle successive di Internet Explorer e Netscape Navigator
supportano DHTML. Se utilizzi DHTML sul tuo sito, la cosa migliore informare
i visitatori del fatto che questi browser rappresentano il requisito minimo.
Hai anche la possibilit di creare diverse versioni di una pagina DHTML e,
utilizzando uno script JavaScript, di rilevare il browser utilizzato dai visitatori,
quindi di caricare la pagina appropriata: abilitata a Microsoft o a Netscape, e
magari anche in puro HTML per persone che utilizzano browser non compatibili
con DHTML. Conoscenza necessaria impensabile utilizzare DHTML senza
conoscere i principi di HTML e di JavaScript, o di uno dei linguaggi di
programmazione.
Per creare pagine che fanno uso del DHTML puoi utilizzare lo stesso software
destinato alla creazione di pagine statiche. Basta semplicemente ricorrere ad
un editor di testo (ad esempio, Blocco note su Windows o BBEdit su
Macintosh). Se invece scegli di ricorrere ad editor, necessario operare sul
codice manualmente. La maggior parte degli editor non supporta DHTML o lo
supporta so

La tipografia sul Web
In questa lezione analizziamo insieme quali sono le possibilit tipografiche che
puoi utilizzare nel tuo sito web per aiutare il lettore delle tue pagine a
comprendere la forma e ad assorbire la sostanza del contenuto dei testi.
Fondamenti di tipografia per il Web
Ripassiamo ora alcuni punti molto importanti che abbiamo gi analizzato nelle
precedenti lezioni ma che devi sempre tenere a mente per quanto riguarda la

tipografia del web. Come avrai gi capito i caratteri stampati su carta e quelli
visualizzati a monitor mostrano delle differenze che non devi mai trascurare:
1. Non puoi avere mai la certezza che il tuo lettore visualizzi le pagine che
crei cos come le hai progettate. Questo perch le pagine altro non sono
che un'interazione tra browser, server web e sistema operativo
dell'utente stesso. Quando il browser di un visitatore scarica una pagina
da un sito, pu visualizzare solo i caratteri installati nel sistema del
visitatore.
2. Hai a disposizione un'area molto inferiore rispetto alle pagine dei libri o
delle riviste, con grosse limitazioni per le schermate che non prevedono
uno scroll.
3. La risoluzione del monitor molto pi bassa rispetto alla definizione della
carta stampata.

La scelta dei caratteri
Il tipo di carattere
Il tipo di carattere utilizzato uno degli elementi pi importanti di un sito Web
ben realizzato. I caratteri predefiniti residenti nella maggior parte dei sistemi
operativi sono: Arial, Courier, Georgia, Times New Roman, Trebuchet e
Verdana. Analizzando nello specifico possiamo fare un'ulteriore distinzione:
Sistemi Windows: Times New Roman, Arial e Courier New
Sistemi Mac OS: Times, Helvetica e Courier
Ma questi caratteri, come gi saprai, non sono tutti uguali. Possiamo dividerli
ulteriormente in tre grandi famiglie:
Times e Times New Roman sono caratteri serif. Vanno bene per i
documenti stampati, ma sono meno leggibili sullo schermo di un
computer.
Arial e Helvetica sono caratteri sans-serif. Sono chiaramente leggibili
sullo schermo.

Courier e Courier New sono caratteri a larghezza fissa, sono come i

caratteri di una macchina da scrivere.

Leggibilit dei caratteri sul monitor
Ti sei mai chiesto da cosa dipende la leggibilt o meno di un font? presto
detto: 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. 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. Per risolvere questo inconveniente, come
abbiamo gi detto pi volte devi offrire al tuo visitatore una scelta di caratteri.
Hai la possibilit di associare ad una pagina una lista di caratteri. Se il browser
dell'utente non trova il primo carattere elencato, tenta con il successivo e cos
via. La cosa migliore da fare di definire un elenco di caratteri come segue:
1. Scegli un carattere che ti piace, e verifica che sia tra quelli pi
comunemente disponibili.
2. Dai caratteri di pi largo uso, scegline uno che sia simile (per Windows e
per Mac) al tuo preferito.
La maggior parte degli editor HTML WYSIWYG come Dreamweaver o GoLive
consentono di selezionare un carattere da una lista. Come puoi vedere in figura
con Dreamweaver, basta scegliere la lista di caratteri desiderati.


Puoi anche modificare la lista dei font modificando nel codice HTML la lista
presente nell'attributo FACE, come ormai avrai gi imparato a fare nelle lezioni
sullo HTML. Utilizza sempre pochi font e poche dimensioni, per dare alle pagine
un aspetto pi chiaro, inoltre, per dare uniformit, applica sempre lo stesso
tipo di carattere e la stessa combinazione di stili in tutte le pagine di un sito
Web evitando cambiamenti casuali.

La tipografia e la scrittura I
La leggibilit delle pagine
Ricorda che in un sito il cui contenuto rapprsentato prevalentemente dal
testo, la tipografia uno strumento fondamentale per organizzare anche la
grafica.
Cerca di non riempire le tue pagine con untesto denso, ma organizza le tue
schermate fornendo sempre un minimo di contrasto con un giusto equilibrio tra
grafica e testo, in modo da facilitare la comprensione dell'organizzazione delle
informazioni ed aumentare la leggibilit del documento.
Un buon uso dei margini e dello spazio bianco aumenta la leggibilit di una
pagina web quindi puoi utilizzarli per diversificare il testo principale dagli altri
elementi della pagina.
Diamo risalto alle parole
Cerca sempre di attirare l'occhio del lettore anche attraverso un giusto
"movimento" del testo. A volte basta una piccola modifica per creare un
contrasto visivo che attira l'occhio. Hai a tua disposizione strumenti tipografici

consolidati che permettono di dare risalto ad un blocco di testo, ma

importante non utilizzarli in modo errato.
1. Corsivo (es: Corsivo) - Il testo corsivo attira l'occhio perch in
contrasto con la forma del corpo del testo ma non molto leggibile sullo
schermo, utilizzalo all'interno del testo per parole o frasi accentuate o
straniere e comunque quando non puoi proprio farne a meno.
2. Grassetto (es: Grassetto) - Il testo in grassetto conferisce risalto
essendo in contrasto con il colore del testo normale. Il grassetto
abbastanza leggibile su schermo, ma bene usare il grassetto per
evidenziare singole parole e non intere frasi, altrimenti la sua funzione
viene a cadere.
3. Sottolineato (es: Sottolineato) - Il testo sottolineato una convenzione
tipografica che risale ai tempi delle macchine da scrivere, quando il
corsivo e il grassetto non erano disponibili. buona norma evitare la
sottolineatura nei documenti web poich generalmente indica un
collegamento ipertestuale. Se usi testo sottolineato in una pagina web,
puoi star certo che sar sicuramente confuso con un collegamento
ipertestuale.
4. Testo Colorato (es: Testo Colorato) - Generalmente il testo colorato
come il testo sottolineato ha funzione di collegamento ipertestuale,
perci usalo solo per questa funzione, cercando di dare lo stesso colore a
tutti i link presenti nei tuoi testi.
5. Lettere maiuscole (es: LETTERE MAIUSCOLE) - Il testo in lettere
maiuscole uno dei metodi pi comuni e meno efficaci per aggiungere
risalto tipografico. Ha pi o meno la stessa funzione del grassetto, ma
probabilmente non ha la stessa efficacia. Considera sempre di usarlo solo
per dare risalto ad alcune parole, quando proprio non puoi usare il
grassetto, e comunque non usarlo per grandi blocchi di testo.
6. Spaziatura tra paragrafi - 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. Dividi il testo in tanti piccoli blocchi e distanziali leggermente
tra di loro sar pi facile leggerli e comprenderli.

La tipografia e la scrittura II
Quanto scrivere?
Scegli parole corte che entrano pi facilmente nel processo di comprensione,
fai in modo che le tue frasi siano composte da un massimo di 24, 25 parole, e
usa espressioni concrete, tangibili.
Anche la lunghezza delle righe di testo delle pagine web gioca un ruolo
fondamentale per la leggibilit. 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.
Gli allineamenti
Le opzioni di allineamento disponibili sul web sono quelle di allineamento
standard:
Giustificazione a destra
Giustificazione al centro
Giustificazione a sinistra
Testo giustificato
La 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.
Immagini come testo

Se desideri utilizzare un carattere non standard per un titolo o un capolettera,

il codice HTML non di alcuna utilit. La soluzione consiste nel creare
un'immagine GIF del tuo testo o lettera in un programma di gestione delle
immagini e semplicemente inserirla come immagine nel tuo documento.
Verifica per che il colore di sfondo del testo sia lo stesso della pagina. Non
ricorrere troppo spesso a questo metodo perch, come ormai avrai ben capito,
un file con immagini di dimensioni superiori rispetto ad un file di testo e che
di conseguenza aumenta il tempo necessario allo scaricamento della pagina.
Questo trucco, inoltre impedisce ai motori di ricerca di leggere i tuoi testi

Cosa sono e come lavorano i motori di ricerca
Come gi saprai, il successo del tuo sito dipende unicamente dal numero di
accessi che riesci a registrare. Per far si che gli accessi siano il pi numerosi
possibile, oltre chiaramente a un buon progetto, comparire nei principali
motori di ricerca, preferibilmente nelle prime posizioni.
Prima dei motori, le directory
Il primo servizio per cercare un sito stato probabilmente Yahoo, fondato nel
1994 da due studenti di Stanford, Jerry Yang e David Filo. Yahoo non era un
motore di ricerca, ma una Directory efunziona come le pagine gialle: l'autore di
un sito segnala ai responsabili del servizio la sua creazione e nel giro di
qualche giorno una persona dello staff di Yahoo visita il sito e lo osserva. Ogni
sito viene classificato in una categoria e listato insieme ai suoi simili.
Con l'esplosione del Web Yahoo ha assunto una dimensione ciclopica. Gi nel
1996 Yahoo era diventata una impresa commerciale commercialmente in
attivo, listava oltre 200.000 siti Internet e impiegava studiosi di ontologia per
classificare i siti segnalati (per esempio, voi piazzereste il cinema sotto
"intrattenimento" oppure "arte"? Yahoo ha scelto la prima classificazione). Il
corrispettivo italiano di Yahoo e Virgilio (entrambi utilizzano comunque anche
le ricerche di un vero motore di ricerca: Google).
Nascono i ragni della rete: Gli Spider

Nasce Altavista e nasce un motore di ricerca: alla base del sistema si trova un
motore e una base dati. Con frequenza settimanale, il sistema fa partire un
piccolo programma che va a visitare ciascun sito conosciuto. Questo
programma viene chiamato in gergo "spider" (cio "ragno": un gioco di parole
dovuto al fatto che esso percorre il web, cio la "ragnatela"). Lo spider legge la
pagina principale del tuo sito e cerca di catalogarla nella base di dati; strada
facendo incontra riferimenti ipertestuali, i link, ad altre pagine del tuo sito; di
seguito legger anche quelle pagine. Finisce cos per visitare tutte le pagine del
sito e piano piano tutte le pagine del web. Il migliore motore di ricerca ad oggi
Google, creato nel 1998 da due studenti dell'Universit americana di
Stanford.
La segnalazione
Affinch tutto funzioni al meglio necessario che qualcuno segnali ad Altavista
che un nuovo sito nato, di modo che uno spider venga inviato a visitarlo per
la prima catalogazione. La necessit non ferrea, come nel caso di Yahoo,
perch Altavista pu facilmente scoprire siti che non le sono mai stati
segnalati: quando uno spider incontra un link a un sito sconosciuto pu
facilmente inviare un suo fratello a visitarlo. Un sito neonato, per, tipicamente
contiene molti riferimenti ai siti pre-esistenti ma non viene puntato da nessun
altro sito; questo significa che Altavista ne scoprir autonomamente l'esistenza
solo dopo parecchie settimane, quando uno dei siti pi vecchi per qualche
motivo comincer a far riferimento al nuovo arrivato.
Principali motori di ricerca e portali
Gli americani...
http://www.google.com/
http://www.altavista.com/
http://www.excite.com/
http://guide.infoseek.com/
http://www.lycos.com/

http://www.mckinley.com/
http://webcrawler.com/
http://www.yahoo.com/
http://www.hotbot.com/
... e gli italiani
http://www.virgilio.it/
http://www.arianna.it/
http://www.yahoo.it/
http://www.lycos.it/
http://www.google.it

L'ottimizzazione delle pagine
Ti sei mai chiesto come lavora uno spider? Idealmente deve capire di cosa
parla la pagina e cercare anche di scoprire qual la lingua in cui la pagina
scritta e applicare qualche conoscenza del suo vocabolario. Come pu fare lo
spider? Cerchiamo di aiutarlo e di aiutarti! Per aiutarti devi sapere che gli
Spider analizzano sia il contenuto del sito sia quelle parti del codice HTML
chiamate meta informazioni: invisibili all'utente ma non ai motori di ricerca.
Per raggiungere il tuo scopo devi usare i META TAG, cio dei TAG HTML speciali
che vengono inseriti tra i marcatori <head> e </head>. Vedremo pi avanti
come i meta tag non sono comunque da tempo la principale soluzione per
indicizzare un proprio sito sui motori.
Le metainformazioni
Le metainformazioni o meta tag vanno inserite in ciascuna pagina del sito.
Inserire le parole chiave
<META NAME="keywords" CONTENT="Fai un elenco di parole chiave per le
quali vuoi essere segnalato">
ACCORGIMENTI:

inserisci meno di 1000 caratteri

non ripetere molte volte la stessa parola (potresti ritrovarti addirittura
escluso dal data base del motore di ricerca)
inserisci per prime le parole pi significative
Vuoi scoprire quali sono le keywords pi ricercate in questo momento? Puoi
ottenere questa informazione da yahoo: http://buzz.yahoo.com/ e anche da
Google: http://www.google.com/press/zeitgeist.html Inserire la descrizione
della pagina
<META NAME="description" CONTENT="Inserisci tra queste virgolette una o
due righe di testo con la descrizione della pagina e del suo contenuto.">
Il motore di ricerca user il testo che gli fornisci quando segnala la tua pagina
al visitatore.
ACCORGIMENTI:
non inserire pi di 300 caratteri
usa parole che siano realmente presenti anche nelle keywords e nel sito
Ci sono poi tutta una serie di metainformazioni meno conosciute, ma che sono
utili ai fini della indicizzazione. La Lingua Usata Per indicare la lingua usata:
<META HTTP-EQUIV="Content-language" CONTENT="it-IT">
Altri valori di content che potrebbero servire sono en-GB per l'inglese
britannico, en-US per l'inglese americano. Vietare o favorire l'accesso agli
spider Se vuoi che una pagina non sia indicizzata o che sia indicizzata in modo
particolare inserisci anche:
<META name="robots" CONTENT="nofollow/index/noindex/follow/all">
Le opzioni del campo CONTENT possono essere:
nofollow = non proseguire nell'indicizzazione
index = indicizza questa pagina
noindex = non indicizzare questa pagina

follow = prosegui ad indicizzare le altre pagine

all = indicizza tutte le pagine
Altri tag importanti
Il titolo
<TITLE>::il mio primo sito::</TITLE>
Ricordati che molti motori di ricerca danno la massima importanza a questo
TAG. Quindi cerca di renderlo il pi descrittivo possibile. Questa operazione ti
sar utile anche quando gli utenti metteranno nei bookmark il tuo sito: la
descrizione render agli utenti pi semplice ritrovarti. La firma
<META name="creator" CONTENT="nome cognome">
In questo modo possiamo associare il nostro nome alle pagine web che
creiamo Il JavaScript Se nelle tue pagine le prime 100/200 righe di codice
sono occupate dal javascript, metti le metainformazioni prima degli script, sia
perch gli spider hanno indicazioni di dare maggiore importanza al testo
situato nella parte superiore della pagine piuttosto che in quella inferiore sia
perch gli spider non leggono ci che viene scritto per mezzo di JavaScript o
altro. Alt Tag Specifica sempre un testo alternativo da visualizzare al posto
dell'immagine, specialmente se il tuo sito presenta molta grafica, foto o mappe
di immagini. Generalmente la sintassi da usare la seguente: <img
src="./images/foto.jpg" alt="la mia fotografia">.

Alcuni suggerimenti per migliorare il posizionamento
Alcuni motori di ricerca non considerano il meta tag keywords. Usano invece:
1. Testi significativi (title, h1, img alt)
2. Testi all'inizio pi importanti che testi alla fine
3. Frequenza della parola nel testo
4. Analisi lessicale
All'interno del TITLE e dello ALT text si considerano circa i primi 70 caratteri.

Un sito linkato viene raggiunge posizioni maggiori di un sito isolato: contano

sia link in ingresso trovati negli altri siti sia i link interni al sito stesso.
La popolarit del sito nel motore di ricerca stesso indice di efficacia nella
segnalazione e modifica dinamicamente la posizione del sito segnalato nelle
prossime ricerche!
Un sito aggiornato pi di frequente viene favorito su un sito statico e stantio.
Non tentare di "spammare" il motore di ricerca usando keywords uguali e
ripetute tante volte.
Se alla societ che gestisce il motore di ricerca arrivano lamentele a proposito
di un sito segnalato, il personale interviene e modifica manualmente il peso del
sito in modo da segnalarlo per ultimo. Nessun motore di ricerca ancora in
grado di interpretare in modo soddisfacente e pari al contenuto testuale:
Le animazioni Flash
In generale, il contenuto dei plug-in
Le parole rappresentate in grafica (titoli in GIF e JPEG...)
In genere tutto ci che non HTML puro
Non tutti i motori di ricerca indicizzano tutte le pagine interne. Alcuni motori si
fermano a un certo livello di profondit. Dunque: posiziona le keyword
principali nelle pagine pi in vista.

La pubblicit sui motori
Da tempo quasi tutti i principali motori di ricerca e portali hanno introdotto
delle formule per offrire un servizio migliore a chi disposto a pagare alcune
somme di denaro. In alcuni casi si garantisce un miglior posizionamento, in
altri si favorisce una frequenza di aggiornamento delle pagine pi efficente.
Se avete un sito commerciale che ha bisogno di farsi conoscere bene
prendere parte a questi programmi che consentono una maggiore visibilit in
minor tempo. Ci sono anche agenzie e aziende che programmano e pianificano

campagne di promozione sui motori di ricerca. Una delle pi note AdMaiora

altre le troverete nella pagina dedicata ai servizi di idicizzazione di
B2B.HTML.it.
Insomma la soluzione finale per chi ha soldi e non ha tempo quella di
comperare le parole chiave sul motore di ricerca. Google, ad esempio, ha un
programma "self-service" molto economico ed efficiente:
https://adwords.google.com/adwords/Welcome.html.

Pro Get Tares

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Pro Get Tares

Caricato da

Copyright:

Formati disponibili

Progettare

1. La professione del web designer

5.1. Progettare la pagina Web: Ideazione e sviluppo

8.2. Fisica, percezione e psicologia del colore

11.4. L'ambiente di lavoro di Flash

Chi il web designer e cosa fa

decide lo stile delle pagine web a livello di grafica, layout, tipografia,

preparare campagne di comunicazione, monitorare l'utenza sono tra le

3. Produzione Definizione dellimpianto

interno: le persone che costruiranno il sito

(email, forum, chat, sondaggi, questionari, newsletter); audio, video e altri

processo tecnologico dalla fonte alla pubblicazione, anche se non sempre

user acceptance: una batteria di test che dipendono dalle

sistema di guida dell'automobile (cruscotto + comandi)

monumento basta cliccare sopra al disegno che rappresenta il

metafore nell'interfaccia del calcolatore suggeriscono un uso per qualcosa, ma

design. Ci significa che i contenuti sono ben visualizzati sullo schermo e la

se non offriamo al nostro utente dei contenuti interessanti, non

Vediamo insieme quali sono i programmi pi famosi e che vengono usati in

Si realizzano con svariati tipi di software da quelli comunemente usati

"automaticamente" su ogni computer. I file Real, infine, consentono

JPG, GIF, PNG (bit blaster

Lo sviluppo di un sito web molto pi complicato di quanto si possa pensare,

Se il sito pensato per essere realizzato in flash, la costruzione della grafica

linee: verticali e orizzontali. Quale sensazione ci danno queste due tipologie di

occidentale (da sinistra verso destra) e la presenza delle principali funzioni

Le buone interfacce devono considerare il target, il contenuto e gli attributi di

bene non usare il navigator doppio in homepage. I navigator contestuali

sei "disposto ad accettare". Hai a disposizione diversi tipi di carattere,

l Non sottovalutare l'importanza che assumono, nell'ambito della schermata i

sia comunque di buona qualit, perch la perdita di dati in questo caso pu

Le immagini GIF ti permettono anche di creare delle piccole animazioni, le GIF

La dimensione del file di unimmagine proporzionale alla sua dimensione in

che impostare le dimensioni dell'immagine usando gli attributi WIDTH e

Lo stile del Web

5. Riduci la forma impersonale: in Internet il rapporto sempre personale

Jacob Nielsen parla di piramide rovesciata. Ci sono molti modi di procedere

Dopo aver scritto il testo fa pulizia di ci che appesantisce e complica.

Ti proponiamo ora una panoramica generale alcuni argomenti legati al colore

Il secondo modello che dobbiamo conoscere per la creazione del colore si

12. Puoi inserire il testo direttamente all'interno del documento HTML,

La definizione del tipo di colore viene espressa mediante caratteri esadecimali

sotto forniamo un elenco dei principali tag deprecati e accanto la tecnologia

I frame vengono generalmente utilizzati perch facilitano la navigazione e

2. Un altro problema riguarda l'indicizzazione nei motori di ricerca. Devi

Hai analizzato i problemi ergonomici analizzati prima? Hai comunque deciso di

Il codice del frame e' racchiuso tra i comandi <FRAMESET></FRAMESET> che

Impostati i due parametri <FRAMESET></FRAMESET>, devi definire al loro

guida che ti spiega con esempi pratici cosa fare, all'indirizzo:

versione per Mac) visualizza il target=_parent come se fosse un

< frame name="destra" src="dx.htm" SCROLLING="AUTO">

Aggiungere suoni o musica al filmato.

di esprimere un messaggio, attraverso l'uso di diverse forme di

Gestito da server adeguati, lo streaming abbassa la qualit con il rallentare

creare il contenuto dei singoli fotogrammi, disegnando direttamente all'interno

i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a

puoi condividere i fogli di stile per un gran numero di documenti (e siti).

dei comandi. L'oggetto in base al comando ricevuto modifica il proprio

Puoi ovviare al problema producendo un codice cross-browser, che sia in grado

Courier e Courier New sono caratteri a larghezza fissa, sono come i

consolidati che permettono di dare risalto ad un blocco di testo, ma

semplicemente nell'isolarla o trattarla in modo diverso dal testo

Se desideri utilizzare un carattere non standard per un titolo o un capolettera,

inserisci meno di 1000 caratteri