1a lezione

A scuola con PC Open
Progetto
Obiettivo: diventare
esperto nella creazione e
cura di siti Web di alto
livello qualitativo.
Benefici: avere le
competenze per produrre
una presenza su Internet
da protagonisti per sé e
per altri, un’abilità da
sfruttare sia per aiutare gli
amici sia per conquistare
nuove prospettive di lavoro
Approfondimenti sui
migliori editor HTML
freeware nella sezione
OPEN Action a p.156
Sul CD GUIDA le versioni
complete degli articoli.
In più sul CD i programmi
(gratuiti e demo) che
abbiamo citato.
1/88
Web Master
iventare Webmaster è co-
D me assumere il comando
di una nave oppure la con-
duzione di un treno. La desti-
nazione e lo scopo del viaggio
vengono quasi sempre scelti
da qualcun altro, ma una volta
partiti, spetta al Webmaster ar-
rivare in porto secondo le sca-
denze previste e con il progetto
completato.
Nelle realtà più piccole, il
Webmaster di solito è anche re-
sponsabile direttamente di pro-
durre il sito in tutte le sue com-
ponenti e di interagire con la
società di servizi che ospita il
server e fornisce la connettività
agli utenti, nel caso di progetti
ospitati all’esterno, oppure di
parlare con i responsabili dei si-
stemi informativi aziendali (ma-
gari un altro consulente nel ca-
so di piccole aziende) per siti
che sono ospitati all’interno.
Che cosa fa
Le competenze centrali di un
Webmaster sono: progettare la
struttura di un sito partendo dai
contenuti che si vogliono pub-
blicare e dal percorso di naviga-
zione che meglio si adatta alla si-
tuazione, produrre una struttu-
ra di pagina HTML che sia leg-
gera, compatibile con i diversi
IL CALENDARIO DELLE LEZIONI

1° LEZIONE novembre 2002
Competenze e strumenti
- descrizione del ruolo di
Webmaster e dei possibili percorsi
professionali
- rudimenti per la progettazione di
un sito e descrizione delle altre
figure coinvolte
- panoramica degli strumenti di
lavoro gratuiti e professionali
(vengono indicati per primi perché
costituiscono la componente
pratica che poi accompagnerà il
corso per tutto il tempo)
- riferimenti (libri – siti) per iniziare
lo studio del linguaggio HTML su
cui sperimentare mediante gli
strumenti indicati
browser e vicina alle specifiche
grafiche previste per il sito, co-
noscenza perfetta dei linguaggi
usati per costruire le pagine
(HTML, JavaScript, Perl CGI,
DHMTL, CSS). Il Webmaster de-
ve anche sapere come promuo-
vere il sito sui principali motori
di ricerca così da attrarre traffi-
co; come procurarsi e mantene-
re un nome a dominio; come in-
tegrare eventuali banner all’in-
terno del sito, da utilizzare sia
come fonte di guadagno (pub-
blicità) sia come promozione in-
crociata tra siti. Una volta che il
sito è onl ine, gran parte del suo
lavoro sarà centrato sulla pub-
blicazione di nuovi contenuti,
che gli arriveranno nei formati
più diversi. Per questo motivo il
Webmaster opera in modo tale
che il sito sia strutturato in mo-
do efficiente così che l’aggiunta
di pagine risulti un’operazione
semplice e veloce.
I problemi maggiori in que-
sto senso si presentano con i si-
ti statici, dove ciascuna pagina
deve essere generata a mano e
dove bisogna aggiornare conti-
nuamente gli elementi di navi-
gazione per includere i nuovi
contenuti.
L’operazione diventa invece
più semplice nel caso dei cosid-
2° LEZIONE– dicembre 2002
Siti statici e linguaggio HTML
- concetti fondamentali della
produzione di un sito statico
- i trucchi del mestiere - la sintassi di
HTML - pagine - tabelle - frame - form
- logica di visualizzazione della
pagina e collocazione degli
elementi
- dove cercare lo spazio per
pubblicarlo: hosting e domini
- esempi usando gli editor di
riferimento
- i termini e gli standard
3° LEZIONE – gennaio 2003
Modelli di pagine e tabelle
- i protocolli di comunicazione
- concetti fondamentali di:
detti siti dinamici,
di Roberto Mazzoni
dove il contenuto
delle pagine viene
alimentato auto-
maticamente da un il corso è
database e basta sul CD
inserire e cataloga- n. 65
re correttamente le
informazioni all’interno del da-
tabase per ottenere un sito ordi-
nato e funzionale.
I siti dinamici si prestano an-
che a un ulteriore livello di au-
tomazione: mediante partico-
lari programmi, detti content
manager, che fanno da inter-
faccia semplificata nei confron-
ti del database e della struttura
del sito, i nuovi contenuti pos-
sono essere caricati diretta-
mente dall’utente, senza l’in-
tervento continuo del Webma-
ster. Si tratta tuttavia di sistemi
complessi e, spesso, costosi
che richiedono un notevole im-
pegno di programmazione.
Spetterà quindi al Webmaster
decidere se e quando usarli,
spesso curando in prima perso-
na le operazioni di sviluppo ne-
cessarie a realizzarli. Nella
realtà, la quasi totalità dei siti so-
no ibridi, con porzioni statiche e
porzioni dinamiche a seconda
della natura delle informazioni e
della vita stimata del sito.
Fogli di stile in cascata
DHTML
JavaScript
- trucchi comuni per rendere il sito
attrattivo con poco sforzo
- differenze tra i tipi di browser
- Risorse esterne su cui
approfondire
- esempi usando gli editor
di riferimento
4° LEZIONE – febbraio 2003
HTML 4.01 e CSS
5° LEZIONE – marzo 2003
Design e multimedialità
6° LEZIONE – aprile 2003
Siti interattivi
7° LEZIONE – maggio 2003
Promuovere il sito

L’ultima trincea
Il Webmaster rappresenta
l’ultimo passaggio di controllo
prima che il sito vada in linea
ed è in “pole position” ogni vol-
ta che si presenta un problema.
Di conseguenza deve essere in
grado d’individuare, corregge-
re o far correggere rapidamen-
te qualsiasi errore compiuto
durante le precedenti fasi di
produzione da programmato-
ri, grafici e sistemisti, le perso-
ne, cioè, che gestiscono fisica-
mente la macchina su cui risie-
de il sito.
Per tale motivo deve dispor-
re di una certa familiarità con i
principali formati grafici del
Web e con i linguaggi di pro-
grammazione usati nello svi-
luppo di siti dinamici.
È anche opportuno che ab-
bia conoscenze elementari di
sicurezza per poter evitare at-
tacchi dall’esterno che potreb-
bero compromettere l’immagi-
ne del sito.
È importante infine che col-
tivi ottimi rapporti con altri
Webmaster, per potersi avvale-
re dell’assistenza di colleghi su
problemi comuni e deve avere
una buona sintonia con il pro-
vider che gestisce fisicamente
il sito, oppure dove sapere met-
tere le mani sul server in prima
persona.
Saper fare un po’ di tutto
Ora che l’epoca della New
Economy è finita e che ci sono
sempre meno soldi per svilup-
pare e mantenere siti, spesso si
chiede al Webmaster di realiz-
zare in proprio anche la parte
di programmazione necessaria
alla produzione di un sito dina-
mico (normalmente affidata a
GLOSSARIO
CONTENT MANAGER
è il responsabile dei contenuti
pubblicati sul sito (testo e grafica) e
da lui vengono le indicazioni operative
per il Webmaster e il Web designer.
In mancanza di questa figura, il ruolo
viene spesso svolto dal Webmaster
medesimo.
LINGUAGGI DI DEFINIZIONE
DELLA PAGINA
questi linguaggi indicano al browser
come visualizzare il contenuto di una
pagina Web.
I più importanti e utilizzati sono
l’HTML (HyperText Markup Language),
il DHTML (Dynamic HTML) e i CSS
(Cascading Style Sheets – fogli di
stile in cascata).
2/88
un Web developer). Quasi mai,
invece, ci si aspetta che il Web-
master realizzi la grafica, a me-
no che si tratti un sito di servi-
zio dove le informazioni com-
paiano quasi sempre in forma-
to testo.
Esiste naturalmente anche
l’eccezione di Webmaster con
particolare sensibilità grafica,
capaci di svolgere pienamente
anche le funzioni di Web desi-
gner, nel qual caso le possibi-
lità di successo saranno anco-
ra maggiori poiché avranno
pieno controllo delle varie fasi
di realizzazione anche senza
doverle eseguire necessaria-
mente in prima persona.
Nella pratica, i problemi
principali a cui il Webmaster
dovrà prestare attenzione gli
verranno proprio dalla grafica
e da una programmazione im-
perfetta.
L’intervento di un Web deve-
loper incompetente può pro-
durre intoppi nel funzionamen-
to del sito difficili da individua-
re e risolvere.
Invece un Web designer in-
competente può produrre pa-
gine troppo complesse perché
siano visualizzate corretta-
mente in tutti i principali brow-
ser, grafica troppo pesante che
rallenta i visitatori del sito, in-
terfacce incomprensibili che
conducono a una navigazione
confusa, uso di “plug-in” poco
comuni che creano problemi
di compatibilità.
Perciò il Webmaster dovrà
essere pronto a intervenire
non solo sulla struttura della
pagina, ma anche sulla naviga-
zione e sugli elementi grafici
per rimediare al volo qualsiasi
intoppo. 
LINGUAGGI DI SCRIPTING
eseguono operazioni programmate
all’interno del browser o del server
Web nel momento in cui vengono
richieste le pagine. I più comuni sono
JavaScript (che funziona sia sul client
sia sul server) e CGI (Common
Gateway Interface) che viene
programmata attraverso lo speciale
linguaggio Perl (Practical extraction
and reporting language) nato per
l’elaborazione di testi oppure
mediante Java, C o Visual Basic.
Nei siti più moderni troviamo anche
ASP (Active Server Pages) di
Microsoft programmabile in VBScript
(il più usato), Javascript e Perlscript -
PHP open source e molto diffuso nel
mondo Linux - CFML (Coldfusion
Dalla nostra
community,
una storia
di successo
il nostro lettore Giuseppe Lachello
ha creato il sito Mio Piemonte, che
si sta rivelando un’ottima vetrina
di presentazione
È stato il primo a rispondere
Giuseppe Lachello, 55 anni,
piemontese doc, quando il
mese scorso abbiamo chiesto
se tra i membri della
community di PC Open ci fosse
qualcuno disposto a raccontare
la propria esperienza sul Web.
E nel caso di Giuseppe, il
primato non è il solo: è lettore
di PC Open dal lontano n°3 e
abbonato dal n°10. Bene,
Giuseppe che attualmente è in
pensione, era il responsabile di
hardware e software per una
società del gruppo Fiat,
dedicata alla gestione
contabilità. “I primi approcci
con il Web risalgono al ‘98,
quando la società per cui
lavoravo mi chiese di creare un
sito interno all’ufficio che
potesse funzionare da centro di
smistamento di report aziendali
con la casa madre”. Le basi di
programmazione (programmava
in Visual Basic) servono a
Giuseppe come struttura su cui
inserire le nuove competenze.
“All’inizio non avevo ben chiare
le nozioni, per cui ho iniziato a
studiare libri sui linguaggi di
programmazione (HTML,
JavaScript) e a navigare in Rete
Markup Language) di Macromedia.
Gli ultimi quattro operano unicamente
sul server.
WEB DESIGNER
progetta e sviluppa l’aspetto grafico
ed estetico di un sito, fornendo tutti
gli strumenti visivi per la navigazione
e la corretta visualizzazione e
organizzazione dei contenuti
all’interno delle pagine. Passa il
proprio lavoro al Webmaster per la
creazione del sito vero e proprio.
WEB DEVELOPER
realizza tutta la componente
“applicativa” dei siti che fanno perno
su un database. Progetta il database
e scrive i programmi che ne
1a lezione
osservando i siti, cercando di
visualizzare la sorgente per poi
tentare di ricostruirli. Nel giro di
quattro mesi ho imparato la
maggior parte di ciò che mi
serviva per mettermi all’opera,
quindi è partito il sito, che è
stato molto apprezzato, tanto
che subito dopo sono stato
contattato dalla casa madre per
fornire una consulenza nella
costruzione del sito aziendale”.
In seguito Giuseppe ha affinato
le sue competenze
frequentando un corso on line
di manuali.net, trovandolo
completo e molto utile. Prima di
andare in pensione, Giuseppe
ha messo in Rete un suo sito,
si chiama Mio Piemonte, come
siamo e come eravamo, e
raccoglie molte informazioni,
documenti e immagini sulla
regione (it.geocities.com/
mepiemont).
“È iniziato per passione, come
hobby, ma si sta rivelando
un’ottima vetrina di
presentazione” ci rivela
Giuseppe, tanto che già alcune
piccole aziende della zona lo
hanno contattato per fornire
consulenza per la costruzione
dei loro siti.
permettono l’interrogazione
attraverso pagine interattive,
anch’esse generate in automatico.
Passa il proprio lavoro al Webmaster
che lo completa se necessario e lo
“mette in linea”.
WEBMASTER
è il responsabile globale di un sito, le
sue competenze abbracciano la
progettazione iniziale, la realizzazione
e la gestione, con particolare
attenzione all’aggiornamento dei
contenuti. Deve sapere fare un po’ di
tutto e mostra i suoi punti di forza
particolari nella conoscenza degli
strumenti e dei linguaggi per produrre
pagine capaci di essere viste
velocemente su qualsiasi browser.

1 I professionisti che affiancano il Webmaster
Web designer, coder, operatore grafico, Web developer, Content manager
e Content editor: ecco le funzioni che svolgono le altre figure professionali
sistono almeno sei interlo-
E cutori con cui il Webmaster
ha relazioni continue e dei
quali, talvolta può trovarsi ad
assumere anche i compiti. Co-
me abbiamo accennato, la pro-
duzione di un sito Web facilita il
mescolamento dei ruoli sia per
ragioni di economia, vale a dire
non esistono mai soldi a suffi-
cienza per ingaggiare tutte le
persone che sarebbero neces-
sarie, sia per motivi di urgenza:
l’incaricato di una determinata
funzione potrebbe essere as-
sente nel momento in cui sia ne-
cessario il suo intervento e per-
ciò chi è presente deve poterne
fare le veci, almeno in parte.
La prima figura in ordine di
tempo con cui il Webmaster en-
tra in contatto è il Web desi-
gner. Solitamente un esperto di
arti grafiche capace di tradurre
gli input del committente in una
struttura grafica di pagina e di
sito che abbia un bell’aspetto,
sia comprensibile dal navigato-
re, serva agli scopi del sito e sia
realizzabile con gli strumenti
tecnologici a disposizione (so-
prattutto osservando i limiti im-
posti dall’HTML e dal modo in
cui i vari browser lo interpreta-
no).
La seconda figura con cui il
Webmaster entra in contatto su-
bito dopo è il cosiddetto coder
vale a dire colui che stila il co-
dice HTML o di programma che
compone le pagine, partendo
dalla bozza grafica preparata
dal Web designer.
Nel caso in cui abbia compe-
tenze centrate su HTML, il co-
der prende il nome comune di
Web editor, nel caso invece sia
competente nei linguaggi di
scripting lato server (come
Perl, ASP eccetera) prende il
nome comune di programma-
tore (le diciture formali si tra-
sformano, poi, a seconda delle
circostanze, ma la sostanza non
cambia). Costui costruisce fisi-
camente le pagine seguendo le
indicazioni di qualcun altro, ma
non ha la responsabilità finale
di pubblicarle sul sito.
L’operatore grafico affianca
il coder nella costruzione del si-
to. Egli è in grado di gestire i va-
3/88
ri elementi grafici che compon-
gono la pagina seguendo i det-
tami del progetto grafico e i vin-
coli della tecnologia
Solitamente, l’operatore gra-
fico lavora con programmi di fo-
toritocco per creare immagini e
bottoni, e per ottimizzare im-
magini fornite da altri.
Nelle situazioni di budget ri-
dotto, il Web designer svolge
anche funzioni di operatore gra-
fico, vale a dire implementa e
continua nel tempo il progetto
grafico che lui stesso ha ideato,
mentre il Webmaster assume su
di sé il ruolo di coder. È raro che
un Webmaster operi anche da
Web designer e viceversa. I due
mestieri hanno matrici ben di-
stinte. Il primo ha origini artisti-
che o grafiche, mentre il secon-
do prevalentemente tecniche.
La figura successiva con cui i
due entrano in contatto quasi
immediatamente è il Web deve-
loper, esperto nella progetta-
I componenti di un sito
Coo
C
mpp
m
tt a
am orr
o
W meenn
WEE
ESPPROG BBDDEEVV
ERT RAM EELLOO
O U MA PPEERR
SAB TOR
ILIT E
Å
zione applicativa di un sito di-
namico, vale a dire un sito che
presenti le proprie informazioni
attingendole da un database. Il
Web developer acquisisce il la-
voro di progettazione grafica e
di codifica delle pagine HTML
già predisposto da qualcun al-
tro, e vi aggiunge gli elementi
applicativi necessari all’intera-
zione col server.
La sua esperienza è centrata
in prevalenza sui linguaggi di
scripting e di interrogazione di
database, ma di solito il suo
corredo di conoscenze com-
prende anche alcuni linguaggi
di programmazione.
Nei progetti in economia, il
Web developer finisce anche
per svolgere le funzioni di coder
e programmatore, realizzando
in prima persona l’intera pagina
e l’intero sito.
Nell’evoluzione delle proprie
competenze, il Webmaster ten-
de a sua volta a diventare Web
WEB MASTER
WEB EDITOR
ARCHITETTO INFORMATIVO
Struttura
Testo
CONTENT MANAGER
CONTENT EDITOR
PUBLISHING SYSTEM
Regole di pubblicazione
Coodd
ii c
cee
I e gr
tt o
o Pre
1a lezione
developer, assumendo sempre
più dimestichezza con la pro-
duzione di pagine dinamiche e
degli elementi di programma-
zione.
La quinta figura di contatto
diretto per il Webmaster e per
gli altri attori coinvolti (soprat-
tutto il Web designer e il Web
developer) prende il nome di
Content Manager e ha la re-
sponsabilità di regolare i conte-
nuti del sito al fine di generare
traffico, come nel caso di un
portale o di un sito d’informa-
zione, incoraggiare l’acquisto,
come nel caso di un sito di com-
mercio elettronico, trasferire
nozioni, come nel caso di un si-
to di formazione a distanza. Nel
caso di siti di grandi dimensioni
viene assistito da Content edi-
tor che si occupano dell’aggior-
namento di particolari segmen-
ti del sito.
Il Content Manager ha solita-
mente un’estrazione giornalisti-
Abbiamo preso a prestito ed
espanso un grafico presente
nel libro “Web Design Arte e
Scienza” di Jeffrey Veen per
spiegare i contributi che le
principali figure professionali
descritte in questo corso
portano nella realizzazione di
un sito.
Il Webmaster estende
spesso il proprio ruolo alle
altre due aree periferiche.
Ma di rado tocca l’area
centrale, a meno che sia
sguarnita
i
m agaifnica
m
one
e n tazi
s
NER ICO
D ESIGE GRAFG
WEBRATOR KETIN
R
OPE MA

ca oppure editoriale, e solita-
mente non dispone di compe-
tenze tecniche, ma deve avere
una discreta sensibilità estetica
e una conoscenza dei vincoli
tecnologici del mezzo così da
trovare, assieme al Web desi-
gner, il giusto modo per presen-
tare le informazioni.
Ha contatti con il Webmaster
o il coder per qualsiasi aggior-
namento o variazione struttura-
le della pagina che diventi ne-
cessaria in corso d’opera al fine
di dare giusto risalto alle infor-
mazioni nuove o più importanti.
Dialoga occasionalmente anche
con il Web developer, soprat-
tutto nella fase iniziale del pro-
getto, per mettere a punto gli
automatismi necessari per l’a-
gevole pubblicazione e aggior-
namento dei contenuti, solita-
mente realizzati tramite una
specifica applicazione che pren-
de il nome di Content Manage-
ment System o, più comune-
mente, sistema di publishing.
Nuove prospettive
per il Webmaster
come Content Publisher
Qui vale la pena di aprire una
piccola parentesi. Nei siti di me-
dio-grandi dimensioni, la scelta
del Content Management System
viene per prima e influenza tut-
te le altre attività in cascata, vi-
sto che il sistema richiederà
l’impiego di precisi linguaggi di
programmazione e porrà vinco-
li importanti nella struttura gra-
fica della pagina e nella codifica
HTML. La scelta del sistema di
publishing non viene quasi mai
eseguita dal Content Manager,
ma spesso è stata demandata a
personale tecnico che opera
sulla base dei requisiti funzio-
nali espressi dal Content Mana-
ger e sui vincoli imposti dal
budget e dalla piattaforma su
4/88
cui opera il server. Purtroppo la
scelta risulta spesso sbagliata e
si traduce in costi e vincoli ina-
spettati per tutte le parti in cau-
sa. Talvolta può arrivare fino al
punto di bloccare lo sviluppo
del sito.
Sono moltissime le realtà del-
la New Economy che hanno fal-
lito proprio perché non hanno
adottato un sistema di publi-
shing fin dal principio, ne hanno
scelto uno sbagliato oppure se
lo sono fatto costruire su misu-
ra partendo da specifiche trop-
po generiche. Il motivo dell’er-
rore è stato nella mancanza, da
parte del ruolo tecnico, di capi-
re quali fossero le reali funzioni
del prodotto.
In conseguenza di ciò veniva-
no valutati principalmente gli
aspetti di costo, compatibilità,
prestazioni, facilità di program-
mazione e via dicendo, senza fa-
re i conti poi con chi avrebbe
dovuto caricare le informazioni
e mantenere il sito, vale a dire il
Webmaster e il Content Mana-
ger. Il risultato si è espresso
quasi sempre in procedure
macchinose nel caricamento
delle informazioni, nell’imposi-
zione di vincoli sul tipo d’infor-
mazioni effettivamente pubbli-
cabili e nella rigidità della strut-
tura del sito (difficile aggiunge-
re, togliere o accorpare sezioni
e canali). Da ciò, l’esigenza di
apportare modifiche costose
dell’ultimo minuto che diminui-
vano la stabilità complessiva
del sito in virtù dei continui
cambiamenti incontrollati.
In alcuni casi si è cercato di
aggirare il problema sviluppan-
do sistemi di publishing che si
basavano sul flusso di lavora-
zione di un giornale su carta.
Di solito, il risultato è stato
migliore rispetto ai sistemi crea-
ti dal nulla, ma le notevoli diffe-
renze nei metodi di lavorazione
dell’editoria su carta e dell’edi-
toria Web hanno compromesso
l’utilità anche di questi ultimi.
Senza considerare, poi, che un
sistema di publishing professio-
nale, capace di gestire siti com-
plessi per una grande industria,
costa diverse centinaia di mi-
gliaia di euro.
Per questi motivi, di recente
ha cominciato a svilupparsi una
figura professionale ibrida che
unisce alcune competenze di
un Content Manager e quelle di
un Webmaster o Web developer
così da poter scegliere o ancor
meglio progettare ex-novo un
sistema di publishing che sia
compatibile con i costi stimati e
che sia abbastanza flessibile da
soddisfare le esigenze future del
committente.
Questa figura non ha ancora
un nome ufficiale, ma noi l’ab-
biamo identificata come Web
Publisher perché ricalca in
qualche modo le funzioni di un
publisher editoriale che sceglie
la carta, il tipo di stampa e il ti-
po di processo da utilizzare per
la produzione di un giornale, la-
sciando alla redazione il compi-
to di generare i contenuti. L’ulti-
mo punto di contatto operativo
è il sistemista, vale a dire il tec-
nico esperto nella gestione del
server su cui il sito opera. Spes-
so è dislocato presso il provider
che ospita il sito e ha la respon-
sabilità di garantirne il funzio-
namento continuo, agendo
principalmente sulla macchina,
ma anche richiedendo variazio-
ni al sito medesimo nel caso in
cui si presentassero incompati-
bilità dovute al lavoro del Web-
master o del Web developer.
Altre figure di contatto
Esistono altre figure con cui il
Webmaster può avere rapporti
1a lezione
occasionali. La prima è il re-
sponsabile di Web marketing,
che solitamente è il promotore
nonché il finanziatore del sito,
perciò ne stabilisce gli obiettivi
e ne approva la realizzazione.
Le sue preoccupazioni princi-
pali sono la capacità di attrarre
visitatori e di trasferire corret-
tamente le informazioni che la
sua azienda gli ha chiesto di co-
municare.
Solitamente chiede al Web-
master di fornirgli statistiche at-
tendibili sul traffico, di promuo-
vere il sito sui principali motori
di ricerca e di allestire sistemi
efficaci per pubblicare banner e
informazioni promozionali. Si
aggiungono poi tre figure che
sono tipiche della fase proget-
tuale e che possono confluire
nell’attività del Webmaster. Il
Project Manager coordina l’at-
tività di tutte le figure coinvolte
nel progetto e garantisce il ri-
spetto delle tempistiche con-
cordate. L’architetto informati-
vo trova la giusta distribuzione
delle informazioni e delle relati-
ve etichette. Il suo compito è so-
stanzialmente di facilitare il re-
perimento delle informazioni
contenute in un sito, ottimiz-
zando i percorsi per arrivarci e
rendendole accessibili in vari
modi contemporaneamente. Un
sito con una buona architettura
impedisce al navigatore di per-
dersi. L’esperto di usabilità in-
fine misura o anticipa le reazio-
ni dei navigatori al sito, ed eli-
mina eventuali ostacoli o possi-
bilità di equivoco. Spesso la sua
funzione è cumulata con quella
di architetto, viste le ampie so-
vrapposizioni possibili tra i due
mestieri. Un Webmaster esper-
to trova spesso l’occasione per
evolvere le proprie competenze
per occuparsi anche di archi-
tettura e di usabilità. 
 1a lezione

2 Gli strumenti di lavoro

Editor testuali,
visuali e ambienti Come scegliere lo strumento di lavoro adeguato
grafici integrati:
cosa sono, come Produttività

Esperienza
funzionano e come
Ambienti
scegliere la grafici
soluzione più integrati
adatta a voi Editor Editor visuali
HTML commerciali
testuali
er svolgere il proprio com-

P pito, il Webmaster ricorre

a strumenti che semplifi-
cano la scrittura e la correzio-
ne delle pagine Web e degli
script associati, spesso con Editor visuali
un’interfaccia grafica che con- semplificati
sente di creare intere sezioni
della pagina senza scrivere Capacità di spesa
nemmeno una riga di HTML.
Il vero Webmaster professio- Gli editor HTML testuali sono una necessità imprescindibile sia per chi comincia, così da poter disporre di
nista, tuttavia, deve essere in una palestra in cui imparare, sia per chi è già esperto, per non perdere controllo sulle pagine. Offrono
grado di scrivere completa- tuttavia una produttività bassa, a meno di essere virtuosi della tastiera.
mente a mano un intero sito, se Gli editor visuali (FrontPage, Web Editor e così via) sono una naturale evoluzione per chi vuole guadagnare
necessario, perché gli capiterà velocità, soprattutto nella stesura iniziale del sito.
sovente di dover correggere Gli ambienti grafici integrati (Macromedia Dreamweaver, Adobe GoLive) offrono alta produttività e controllo
anche gli errori e i contenuti sull’intero sito a chi ha già esperienza e una discreta capacità di spesa
inutili introdotti proprio dai
programmi di generazione au-
tomatica che dovrebbero aiu- colare portale che li ospita, im- e i tag (marcatori) HTML ri- ti. Sono spesso gratuiti, ma ne
tarlo. Gli strumenti di lavoro in ponendo quasi sempre la vi- spetto al testo che costituisce esistono anche versioni com-
questo campo si dividono in sualizzazione dei banner pub- il contenuto informativo della merciali di costo relativamente
quattro categorie. blicitari di quest’ultimo. pagina (rappresentato solita- ridotto. Sono utilissimi per far-
mente in nero). Di solito preve- si le ossa e per correggere ra-
Editor on line gratuiti Editor orientati al testo dono finestre guidate per l’in- pidamente pagine già esistenti.
Sono strumenti da usare nel- Leggeri e precisi, costitui- serimento dei più comuni tag Servono anche per ispezionare
la produzione di siti personali, scono un elemento irrinuncia- HTML (marcatori di formatta- le pagine prodotte con pac-
molto semplici, all’interno di bile nella cassetta degli attrezzi zione), di script già pronti e di chetti più complessi al fine di
portali che offrono spazio gra- di un bravo Webmaster. Vi si ri- moduli (form), frame (finestre controllarne la correttezza.
tuito limitato e che prevedono corre per piccole correzioni al multiple nella pagina) e tabelle. Il fatto di dover scrivere tut-
un’interfaccia propria per la ge- volo oppure per la scrittura Tra le funzioni tipiche abbiamo to a mano, o quasi, ne riduce
nerazione facilitata delle pagi- d’intere pagine, a seconda dei anche l’anteprima all’interno l’utilità. La produttività scende
ne partendo da moduli già im- casi. Semplificano la scrittura di uno o più browser, per veri- e aumenta le possibilità di er-
postati. Non sono stati inseriti di codice HTML, CSS, DHTML, ficare l’aspetto finale della pa- rore, di conseguenza il Webma-
in questa rassegna perché di JavaScript e così via, control- gina, il controllo dei link interni ster finisce per affiancarli o so-
fatto limitano moltissimo il for- lando in automatico la sintassi ed esterni, la riduzione auto- stituirli con editor grafici che
mato e la struttura del sito e lo dei comandi, evidenziando gra- matica delle ridondanze e il tra- automatizzano gran parte della
vincolano al dominio del parti- ficamente (a colori) i comandi sferimento verso server remo- generazione delle pagine e di
interi siti e che permettono di
Gli editor presentati in questo numero “impaginare” i contenuti lavo-
rando col mouse e osservando
Programma Tipo Distribuzione Reperibiità Lingua immediatamente i risultati, an-
1st Page 2000 editor HTML testuale freeware nel CD inglese ziché digitare centinaia di righe
Arachnophilia 5.0 editor HTML testuale freeware nel CD inglese sulla tastiera e fare continue
HTML-kit editor HTML testuale freeware sul Web inglese consigliato anteprime all’interno del brow-
Macromedia Dreamweaver MX ambiente grafico integrato demo nel CD italiano consigliato ser. Alcuni Webmaster veterani
Stone's Web Writer 3.5.2 editor HTML testuale freeware nel CD inglese comunque si limitano a usare i
Top Dawg 2.6 editor HTML testuale freeware nel CD inglese semplici editor di testo, facen-
WebPag-Wiz 1 editor visuale freeware nel CD inglese done un punto di orgoglio, an-
Xoology Coda 2.4 editor visuale freeware nel CD inglese che perché “scottati” dalle pri- 

5/88

Gli strumenti di lavoro presentati nei prossimi numeri
Programma Tipo
Adobe GoLive 6.0 ambiente grafico integrato
CoffeeCup HTML Editor 9.6 editor HTML testuale
HomePage + editor HTML testuale
Hot Metal Pro 6.0 editor HTML testuale
Microsoft FrontPage 2002 editor visuale
Namo Web Editor 5 editor visuale
TopStyle Pro 3 editor HTML testuale
 me edizioni degli editor grafici gli errori e di trasferimento a un
che avevano la pessima abitu- server remoto. Sono indispen-
dine di inserire codice ridon- sabili come base minima di la-
dante o addirittura errato, co- voro per garantire una buona
stringendo a lunghi lavori di produttività e per semplificare
pulizia a mano, che finivano la gestione degli script e delle
per richiedere più tempo di pagine complesse, oltre che di
quanto ce ne sarebbe voluto interi siti. Ne esistono diverse
per scrivere la pagina da zero, edizioni gratuite, ma non ce la
riga per riga. sentiamo di consigliarle per-
Tra i completamente gratui- ché, a differenza degli editor di
ti, abbiamo selezionato: Arac- solo testo, questi programmi
nophilia, Firstpage 2000, possono effettivamente rovina-
HTML Kit, Stone’s Web Writer, re una pagina già ben costruita
Top Dawg, Xoology Coda; tra i in partenza e costringervi a lun-
prodotti a pagamento o sha- ghe operazioni di correzione
reware abbiamo invece sele- manuale.
zionato CoffeCup HTML Edi- L’unico prodotto gratuito di
tor, Home Site, Hot Metal Pro, caratura professionale che si
TopStyle Pro 3.0. può segnalare in questa cate-
goria è Microsoft Web Matrix,
Editor visuali semplificati che s’indirizza in particolare a
Offrono funzioni di “impagi- chi prevede di lavorare su siti
nazione” interattiva: il pro- dinamici dove sia necessario
gramma genera automatica- affiancare all’HTML anche fun-
mente il codice necessario per zioni di programmazione e lin-
produrre la sezione di pagina guaggi di scripting.
dopo che l’abbiamo disegnata In alternativa, conviene
sullo schermo pemettendoci, orientarsi verso una soluzione
poi, di modificarla a mano in commerciale garantita da una
una finestra separata che mo- software house che già operi in
stra le righe di codice HTML, questo mondo da tempo e che
JavaScript, ASP e così via. offra anche continui aggiorna-
È possibile inserire il testo e menti per tenersi al passo con
le immagini di contenuto diret- gli standard. I due campioni di
tamente nella pagina visualiz- questa categoria sono Namo
zata in anteprima, senza corre- Web Editor e Microsoft Front-
re il rischio di alterare i marca- Page 2002.
tori in cui sono contenute e os- Quest’ultimo, rispetto alle
servando immediatamente il ri- versioni precedenti, ha rag-
sultato. Questi programmi giunto una vera caratura pro-
spesso integrano anche funzio- fessionale, pur mantenendo la
ni per la ricerca automatica de- proverbiale facilità d’uso.
In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!
Avete trovato interessante il nostro
corso e volete prepararvi a mettere
alla prova le competenze acquisite?
Per farlo avrete bisogno di uno spazio
vostro sul Web, dove potervi
esercitare nello sviluppo di siti
campione su server reali.
Ecco quindi la nostra iniziativa, che
nasce in collaborazione con
Register.it, il più importante registrar
in Italia: nei prossimi mesi avrete a
disposizione gratuitamente per un
6/88
Segnaliamo in chiusura di
questa categoria Easy Web Edi-
tor, un programma in italiano
che consente di creare pagine
Web semplicemente disegnan-
dole al video, senza scrivere
nemmeno una riga di HTML
(www.visualvision.it). Molto in-
dicato per chi vuole produrre
un sito personale senza dover
studiare, non è consigliato in-
vece ai Webmaster, visto che il
sito viene costruito in formato
proprietario e, solo alla fine,
esportato in formato HTML,
perciò non è possibile esercita-
re un controllo dettagliato su
quel che succede.
Ambienti visuali integrati
Al terzo livello della scala
troviamo gli unici due prodotti
che hanno conquistato, negli
ultimi anni di grande crescita
del Web, la statura di riferi-
mento per i Web Master pro-
fessionisti: Macromedia
Dreamweaver e Adobe GoLi-
ve. Oltre a riunire tutte le fun-
zioni di impaginazione grafica
delle pagine di gestione inte-
grali dei siti, con tutti gli auto-
matismi per il controllo e la va-
lidazione degli stessi, questi
due prodotti hanno anche svi-
luppato collegamenti diretti
con altre applicazioni dello
stesso produttore al fine di co-
struire veri e propri ambienti di
sviluppo integrati dove Web-
master, Web developer e Web
designer possano condividere
tutti la stessa famiglia di pro-
dotti beneficiando di un facile
scambio dei vari sottoprodotti
che vanno a comporre il sito.
Ancora più interessante per
il Webmaster, questi prodotti
gli consentono d’intervenire
con rapidità ed efficacia su
qualsiasi componente del sito
Web, utilizzando un solo stru-
mento che conoscono bene,
anziché dover ricorrere a ogni
genere di utility e di mini-pro-
mese l’uso di uno spazio di hosting
dedicato, oltre ad una serie di altri
servizi supplementari. In più, dal
momento che per poter usare lo
spazio di hosting è necessario
disporre di un dominio, i lettori di PC
Open in esclusiva potranno
acquistare da subito il proprio
dominio presso Register ad un
prezzo scontatissimo (40% in meno,
lo sconto più alto oggi disponibile
sul mercato). Il metodo è
1a lezione
grammi complementari.
Macromedia MX, la versio-
ne più recente del prodotto,
costituisce oggi la fusione di
ben quattro programmi diversi
e permette di spaziare dalla
produzione di siti statici alla
programmazione avanzata, in-
tegrandosi con Fireworks MX
e Flash MX per le componenti
creative, e con Cold Fusion MX
per la componente program-
matica sul server.
Adobe GoLive 6.0 dialoga in-
vece con PhotoShop 7.0 e Ima-
geReady (per l’ottimizzazione
delle immagini per il Web), con
InDesign per l’integrazione tra
editoria sul Web ed editoria
cartacea, con Premiere per la
gestione del video.
Benché saranno ben pochi i
Webmaster che si troveranno a
utilizzare tutti questi strumenti
e saranno ancora meno quelli
che li utilizzeranno per partire,
è importante capire che tanto
Dreamweaver quanto GoLive
costituiscono punti di arrivo
irrinunciabili per lo sviluppo e
la manutenzione di siti come
professione. Dreamweaver è il
più diffuso e il più “tecnico”.
S’indirizza al Webmaster e al
Web designer che abbiano an-
che vocazioni di programmato-
re. GoLive è invece un prodotto
di natura più “editoriale”, de-
stinato a chi debba gestire gli
stessi contenuti sul Web e sulla
carta e abbia uno spiccato
background creativo.
Entrambi costano cari, ma si
ripagano ampiamente nell’uso
intensivo. Mettete in conto un
sensibile sforzo di apprendi-
mento per entrambi, visto che
sono ormai diventati gigante-
schi e ricchissimi di funzioni.
A loro beneficio, indichiamo
che funzionano su piattaforme
diverse (Windows, Mac) e inte-
grano spesso anche ottimi
strumenti tutorial per imparare
cammin facendo. 
semplicissimo: dovrete collegarvi al
sito http://we.register.it/pcopen
oppure al sito www.register.it/pcopen,
inserire il codice segreto x6Wa3P nel
box all’interno della pagina e verrete
inviati alla home page del sito di
Register, da dove le registrazioni
verranno scontate in automatico del
40%. Le registrazioni saranno
comprensive di tutto quanto è indicato
all’indirizzo http://we.register.it
/domains/allincluded.html.

3 Per chi vuole approfondire: i libri consigliati
E
INDISPENSABIL
La “bibbia del Web designer” propone
l’esperienza e i consigli di uno tra i
progettisti che hanno fatto la storia del
Web: Jeffrey Veen. Il libro vi parla di
interfaccia, struttura e comportamento
delle pagine. Altamento informativo, un
classico.
Apogeo, 235 pagine, 35 euro.
E
INDISPENSABIL
Riferimento indiscusso sulla sintassi e
la tecnica della versione più recente
del linguaggio HTML. Un libro che il
Webmaster professionista deve
possedere e conoscere, anche se non
tutte le informazioni sono essenziali e
alcuni strumenti sono datati.
Apogeo, 837 pagine, 45,45 euro.
Standard e tecniche concentrati in
poche pagine con cenni sintetici che vi
portano dalla navigazione, all’usabilità,
all’accessibilità, passando per nozioni
sulla percezione dei colori e sull’uso
del linguaggio XML. Utile riepilogo per
chi sa già come fare. Tecniche Nuove,
212 pagine, 18,80 euro.
7/88
Indirizzato ai designer della
transizione dalla carta a Web. Spiega
concetti base utili a tutti, ma in
particolar modo a chi è già esperto nel
governare un strumento passivo come
la pagina stampata e deve entrare nel
mondo dinamico delle pagine HTML.
Hops, 442 pagine, 35,12 euro.
Introduzione elementare alla
produzione di pagine HTML. Fornisce i
rudimenti del linguaggio per chi vuole
produrre un sito personale oppure
prototipale. Un po’ datato invece per
un impiego professionale: mancano i
riferimenti ai fogli di stile. Jackson
Libri, 334 pagine, 25, 31 euro.
Guida alla riprogettazione di un sito
con indicazioni pratiche e numerose
illustrazioni. Perfetto per il consulente
che si propone di migliorare il lavoro
altrui o perfezionare il proprio
approccio progettuale, dalla definizione
della struttura al lancio.
Apogeo, 245 pagine, 36 euro.
Tutorial per Webmaster alle prime
armi oppure con modesta esperiernza.
Offre un sunto di molti aspetti
operativi utili nella produzione di un
sito, spiegati con illustrazioni ed
esempi. Facile da leggere, anche in
pillole. Manca il perché delle cose.
Jackson Libri, 616 pagine, 44 euro.
Guida complementare al “Web Design
Arte e Scienza” di Veen. Costituisce un
buon manuale pratico per la
produzione dei più comuni elementi
che costituiscono un sito, con anche
po’ di teoria. Accessibile a tutti,
consigliato ai neofiti.
Apogeo, 290 pagine, 20,14 euro.
E
INDISPENSABIL
Master di usabilità. Non si può parlare
di usabilità dei siti Web senza aver
letto questo classico, che alcuni
amano e molti odiano per il totale
“integralismo” dimostrato dall’autore,
universalmente riconosciuto come
l’iniziatore di questa disciplina.
Apogeo, 418 pagine, 40,28 euro.
1a lezione
Usabilità nel redesign. Ecco la
seconda opera di Jackob Nielsen, al di
sotto delle aspettative, ma utile per chi
sta affrontando il redesign di un sito
complesso e vuole trarre spunto
dall’opera altrui. Il libro è più un elenco
di cose da non fare che da fare.
Apogeo, 310 pagine, 45 euro.
E
INDISPENSABIL
Design e usabilità all’italiana. Più
concreto dei manuali di usabilità e più
ampio nei temi rispetto a un semplice
testo di design. Offre l’eperienza
completa di una progettista
professionale italiana che mette in
prospettiva le cose davvero importanti.
Hops, 236 pagine, 18,60 euro.
Quaderno di progetto in grande
formato, già pronto per accogliere le
note che costruirete durante il vostro
lavoro con un ipotetico cliente e che vi
porterà, attraverso le fasi principali, a
un progetto completo. Utile traccia per
i consulenti del Web.
Hops, 70 pagine, 25,31 euro.

Dalla progettazione al lancio: come nasce un sito
rima di mettere mano alle
P pagine e alla scrittura di
marcatori HTML, è neces-
sario definire la struttura del si-
to e la funzione dei diversi ele-
menti che saranno nella pagina.
Questa fase precede anche la
stesura delle bozze grafiche che
traducono in colore e immagini
ciò che si è già ideato schemati-
camente sulla carta.
La progettazione
Esistono tanti modi per pro-
gettare un sito quanti sono i
progettisti, ma l’esperienza de-
gli ultimi anni dimostra che la
sequenza ricorrente e forse ot-
timale segue queste fasi: rac-
colta delle informazioni sugli
scopi del sito ed eventuale ana-
lisi della concorrenza, costru-
zione di una mappa del concet-
tuale sito (disegno schematico),
assemblaggio e sistematizzazio-
ne dei contenuti, definizione di
un sistema di navigazione, defi-
nizione della struttura di pagine
e interfaccia, assemblaggio del
tutto in una sequenza che “rac-
conti” il sito (storyboard), pro-
totipo di sito navigabile che mo-
stri dal vivo lo storyboard, pro-
getto grafico e multimediale,
progetto dinamico che defini-
sca il tipo d’interazione che il si-
to avrà con l’utente e che stabi-
lisca quali elementi di program-
mazione sarà necessario ag-
giungere, incluso l’eventuale
collegamento a un database
che contenga i dati da visualiz-
zare nelle pagine dinamiche.
La realizzazione
Terminate queste fasi proget-
tuali, si passa alla produzione
vera e propria, realizzando i
Fasi di progettazione
Raccolta delle informazioni sugli scopi del sito
Analisi dell’eventuale concorrenza
Costruzione della mappa
Assemblaggio e sistematizzazione contenuti
Definire un sistema di navigazione
Strutturazione della pagina e dell'interfaccia
Assemblaggio sistematico delle pagine del sito
Prototipo solo testo
Progetto grafico e multimediale
Progetto dinamico
Produzione
Test
Lancio
Mantenimento
8/88
1a lezione
template, vale a dire la pagina sistema se commessi da un na-
campione, senza contenuti, da
cui è possibile produrre molte
altre pagine ciascuna con con-
vigatore reale.
Il lancio
Le risorse
on line
tenuti propri. Il template è una Consiste di solito in un’atti- La formazione di un
sorta di “modello” o “stampo” vità frenetica per correggere al- Webmaster non finisce mai.
da cui ricavare molte pagine l’ultimo minuto i difetti riscon- Le tecnologie continuano a
singole che avranno uniformità trati durante la fase di test e per evolvere e ci sono
visiva tra loro. caricare i contenuti finali prima innumerevoli problemi da
Una parte determinante nella della partenza ufficiale, di solito risolvere nel lavoro di tutti i
fase di produzione prima del accompagnata da una qualche giorni. Ecco alcune risorse
lancio è la formattazione dei attività di pubblicità. che consigliamo a tutti,
contenuti, vale a dire la raccolta indipendentemente dal loro
di tutte le informazioni che do- Il mantenimento livello di competenza. Vi
vranno essere presenti sul sito Segue, infine, la fase di man- serviranno per approfondire
al momento dell’avvio e il loro tenimento dove si correggono durante il corso e oltre:
montaggio all’interno di pagine gli errori della fase di lancio e si
HTML statiche oppure il loro in- attivano le procedure per con- http://hotwired.lycos.com/
serimento e catalogazione al- sentire ai gestori del sito di ag- webmonkey/ (uno dei due
l’interno di un server. Spesso si giornarlo gradualmente e per siti americani più famosi per
sottovaluta l’impegno richiesto mantenerlo stabile al crescere i Webmaster e i Web
da questa attività, di per sé sem- del numero dei navigatori. Que- developer. Ricco di tutorial,
plice, ma gravosissima in ragio- sta è la fase più delicata e pesa consigli, moduli già pronti).
ne della grande quantità di ele- fortemente sulle spalle del Web- http://builder.com.com/
menti che vanno elaborati e dal- master a cui viene richiesta (l’altro sito americano di
l’impossibilità di averli tutti in grande esperienza nel ricono- riferimento per i Webmaster
un formato omogeneo fin dalla scere e prevenire eventuali pro- e i Web developer, orientato
partenza. I contenuti arriveran- blemi. Qualsiasi intervento de- a i più esperti).
no infatti dalle fonti e nelle for- ve essere efficace e rapido, poi- http://www.html.it/ (il sito
me più disparate: molto di que- ché è raro poter fermare il sito italiano “storico” per chi
sto lavoro, alla fine peserà sul per lunghi periodi una volta che sviluppa siti e vuole
Webmaster, sul Web editor e sul lo si è avviato. È necessaria una imparare a fare le cose da
Web designer oppure sull’ope- profonda conoscenza della piat- solo. Adesso fornisce anche
ratore grafico. taforma su cui il sito è basato corsi a pagamento).
poiché il comportamento dei http://www.antiloco.com/
Il test server cambia drasticamente al (in italiano, una sorta di
La fase successiva è natural- variare del carico di lavoro. Ele- directory di risorse
mente quella di test. È raro che menti chiave in tal senso sono il soprattutto per i Web
ci sia abbastanza tempo per tipo di server impiegato e il da- developer, ma utile anche ai
condurla come si deve, ma è co- tabase scelto per l’eventuale at- Webmaster).
munque necessaria per mettere tività dinamica. http://www.fare-web.it/
alla prova il sistema di naviga- Fa parte dell’at- (un riferimento in italiano
zione e il sito in generale. Quan- tività di manteni- ricco di spunti tecnici, ma
do si riesce a coinvolgere nel te- mento anche l’ado- anche di attualità)
st utenti estranei alle fasi di pro- zione di misure di http://www.fucinaweb.com/
gettazione, si riesce a mettere in sicurezza.  prosegue home/ (in italiano, realizzato
evidenza i classici errori che fi- (versione integrale sul CD da un giovane sviluppatore
nirebbero per mandare in tilt il dell’articolo sul CD) n. 65 che fornisce non solo
consigli di sviluppo, ma
Risultato finale anche indicazioni su temi più
Concept del sito (sintesi delle varie idee in una singola intenzione) generali come l’interfaccia e
Misura delle funzioni/servizi minimi che il sito deve offrire l’usabilità).
Struttura concettuale del sito http://www.manuali.net/
Catalogazione e priorità delle informazioni (sito dedicato agli autodidatti
Percorsi chiari per arrivare all'informazione, alberazione sito e alla formazione a distanza
Posizione stabile per gli elementi di navigazione in rapporto al contenuto su diversi temi, tra cui anche
Storyboard (descrizione, pagina per pagina, del contenuto statico e dinamico) lo sviluppo Web).
Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo, http://www.scriptando.it/
ma consigliato) (sito ricco di consigli e di
Intercaccia grafica che perfeziona la presentazione e navigazione del sito tutorial realizzato per
Definizione elementi di programma, collegamento eventuale passione da un giovanissimo
a database, scelta di Publishing System Webmaster autodidatta).
Template HTML, elementi di programma lato server e client, http://www.webmasterpoint.
formattazione contenuti org/home.asp (un sito
Sito esaminato da utenti "veri" italiano di consigli e tutorial
Sito attivo e pubblicizzato grazie alle attività di marketing per le cose più semplici).
Sito che cresce nei contenuti e nel traffico
 1a lezione

4 Macromedia Dreamweaver MX, la demo

la nave scuola del Web design sul CD

n. 65

onsiderato nettamente il Si tratta perciò del terreno delle pagine. In sostanza, tra- cando anche la struttura dei

C più diffuso tra gli stru-

menti professionali per lo
sviluppo di siti, Dreamweaver
ha da sempre offerto un effi-
ciente ambiente di editing vi-
suale delle pagine capace di
generare automaticamente co-
dice senza alterare quello già
prodotto a mano dallo svilup-
patore. Non si tratta di una
prerogativa da poco ed è pro-
babilmente la chiave del suo
successo originale.
Oggi il prodotto si presenta
molto arricchito, di fatto riuni-
sce al proprio interno quattro
applicazioni che prima erano
indipendenti e costituisce la
prima completa integrazione
nei prodotti Macromedia delle
tecnologie acquisite da Allaire,
società americana creatrice di
altri due prodotti celebri nel
mondo dei Webmaster: Home
Site (editor non visuale di ele-
vata caratura) e ColdFusion
Studio (ambiente di program-
mazione per creare siti con pa-
gine dinamiche).
L’obiettivo fondamentale di
Dreamweaver MX è di fornire
un ambiente capace di soddi-
sfare contemporaneamente le
esigenze professionali di tre fi-
gure: Web designer, per la
creazione grafica del sito,
Webmaster per la costruzione
delle pagine vere e proprie e
Web developer per program-
mare la logica applicativa che
permetta all’utente d’interro-
gare un database attraverso le
pagine del sito.
perfetto per chi già si sente
preparato in uno di questi tre
campi e vorrebbe ampliare le
proprie competenze, diven-
tando, se possibile, un esperto
veramente completo.
Per la precisione, nel nuovo
Dreamweaver MX convergono
il precedente Dreamweaver 4,
con tutte le relative funzioni di
editing visuale, di controllo
centralizzato del sito, di am-
ministrazione delle varie ri-
sorse e d’integrazione con le
altre applicazioni grafiche di
Macromedia (Flash e Fi-
reworks); Home Site con le re-
lative funzioni di editing ma-
nuale del codice HTML,
XHTML o di qualsiasi altro lin-
guaggio di scripting; UltraDEV
per la programmazione con i
linguaggi di scripting più co-
muni (ASP, ASP.NET, JSP, PHP)
e ColdFusion studio per pro-
gettare applicazioni che usino
il server ColdFusion come in-
terfaccia semplificata nella
produzione di pagine dinami-
che create mediante l’interro-
gazione di un database.
Quest’ultimo in realtà non è
integrato propriamente in
Dreamweaver MX, bensì all’in-
terno di HomeSite+, evoluzio-
ne moderna di HomeSite 5, for-
nito nello stesso CD di
Dreamweaver MX e utilizzabi-
le come strumento di lavoro
rapido per chi è abituato a
operare con il codice di Cold-
Fusion e non ha particolare in-
teresse alla struttura grafica
mite Dreamweaver MX e Ho-
meSite+ aprite le porte a qual-
siasi tipo di sviluppo presente
e futuro, con la possibilità di
allargare le vostre conoscenze
sfruttando un ambiente con
interfaccia uniforme e con tu-
torial di buon livello, integrati.
Come si presenta
Il destinatario principale di
un prodotto come Dreamwea-
ver MX rimane il creatore di si-
ti, Webmaster o Web develo-
per, che ha bisogno di uno
strumento veloce con accesso
immediato al codice e al tem-
po capace di semplificare le
operazioni mediante automa-
tismi che propaghino qualsiasi
variante all’intero sito. Il pro-
gramma si basa su tre elemen-
ti d’interfaccia: la finestra di la-
voro vera e propria, divisa in
due viste, i menu e i pannelli
degli strumenti, e la finestra di
controllo dell’intero sito. Par-
tiamo dalle prime: le due viste
di lavoro principali sono: Co-
dice e Struttura.
Le si può visualizzare alter-
natamene oppure contempo-
raneamente così da vedere al-
l’istante come le variazioni
dell’una si propagano nell’al-
tra.
La vista Codice elenca tutti i
marcatori e ne consente l’edi-
ting diretto come in qualsiasi
altro editor non visuale, la se-
conda invece mostra il risulta-
to che tali marcatori produr-
ranno sulla pagina finita, indi-
vari elementi e le reciproche
relazioni.
Ne permette la manipola-
zione diretta, tramite mouse e
comandi da tastiera. È possi-
bile “disegnare” o costruire vi-
sivamente elementi nella vista
Struttura e osservare al tempo
stesso il codice generato auto-
maticamente nella vista Codi-
ce, o viceversa. Alternandosi
tra le due, si acquista una co-
noscenza molto più profonda
del linguaggio HTML e delle
sue particolarità, e si arriva
anche a produrre sempre più
velocemente risultati di qua-
lità.
Molte delle risorse offerte
dal programma sono proprio
mirate a garantire la qualità
del codice finale e notiamo
una potenzialità didattica no-
tevole: qualsiasi elemento
HTML può essere inserito da
pulsante o da menù, le rispet-
tive caratteristiche sono quin-
di ispezionabili nella vista Co-
dice, che mostra il tag con tut-
ti i rispettivi attributi, oltre
che all’interno di una finestra
di “proprietà” che è costante-
mente visibile e mediante la
quale s’interviene sulle pro-
prietà senza toccare il codice
originale. Inoltre le funzioni di
convalida segnalano la pre-
senza di eventuali errori nella
pagina o nel sito e ci portano
direttamente al punto interes-
sato, così da correggerlo e im-
parare dai nostri errori. Il pro-
gramma integra anche una nu-

1 2 3

Figura 1: La vista Codice di Dreamweaver mostra i marcatori HTML (o di qualsiasi altro linguaggio di scripting) e i relativi parametri ben distinti dal resto del testo mediante colori
chiaramente identificabili. Il programma aggiunge anche rientri differenziati per le varie righe al fine di riprodurre visivamente le varie nidificazioni. Nella barra in alto troviamo icone
suddivise in diversi pannelli per inserire direttamente ciascuno dei marcatori principali. Le icone sono suddivise per tema e ogni tema è raggruppato all’interno di una barra a cui
corrisponde un’etichetta di tabulazione. In aggiunta, tutti gli elementi possono essere inseriti direttamente da menu. Figura 2: La vista Struttura mostra una specie di anteprima
attiva della pagina su cui è possibile intervenire direttamente, mediante mouse e comandi da bottone/menu, modificando gli elementi in modo visivo. I bordi grigi mostrano la
struttura delle tabelle che mantengono ogni elemento in posizione. Figura 3: Prerogativa unica di Dreamweaver è la disponibilità di due viste affiancate e di vedere i cambiamenti
eseguiti nell’una riproporsi immediatamente nell’altra

9/88

trita serie di esercitazioni in
italiano che coprono HTML,
fogli di stile, pagine dinami-
che e altro ancora, con esempi
da eseguire di prima mano.
Tanti approcci diversi
per imparare il codice
alla perfezione
Rispetto alle versioni prece-
denti, Dreamweaver MX con-
sente di spostare e agganciare
(dock) i diversi pannelli di co-
mando all’interno della finestra
a video oppure su un secondo
video, nel caso sia disponibile
sul nostro computer. In tal mo-
do, la pletora di finestre di con-
trollo che accompagnano il
nuovo programma può essere
configurata a piacere, attivan-
do e disattivando selettiva-
mente quel che occorre.
Nel caso si lavori nella vista
Codice, la finestra che contiene
il codice vero e proprio preve-
de tre modalità distinte d’inse-
rimento manuale dei tag. La pri-
ma di tali modalità è anche la
più semplice e consiste nel se-
lezionare dalla barra di coman-
do superiore l’icona corrispon-
dente al marcatore che voglia-
mo inserire.
Ce ne sono a decine, suddi-
vise per argomento. Se non ci
ricordiamo quale sia il tag ido-
neo, la seconda modalità con-
siste nel cliccare su un’icona di
selezione generale che apre un
elenco di selezione dei tag, pre-
si dal database integrato nel
programma. Tale database
contiene la sintassi corretta
per tutti i marcatori standar-
dizzati dei principali linguaggi:
HTML, JavaScript, CSS (Casca-
ding Style Sheets – fogli di stile
in cascata), ASP (Active Server
Pages) e ASP.NET, PHP, JSP (Ja-
va Server Page), WML (Wire-
less Markup Language, per i te-
lefonini) e ColdFusion.
La terza modalità consiste
nel digitare direttamente il
marcatore nella pagina lascian-
do che Dreamweaver completi
per noi la digitazione non ap-
pena ha indovinato di che tag
si tratta. Ciò riduce il lavoro di
battitura e gli errori dovuti a
sviste.
Per il completamento auto-
matico, il programma attinge
sempre dal proprio database
interno che può essere espan-
so a piacere con l’inserimento
di tag personalizzati.
Una volta digitato il marca-
tore, le informazioni corrispon-
denti compariranno all’interno
di due finestre d’ispezione.
10/88
Una, la finestra Proprietà
sempre aperta sulla parte bas-
sa dello schermo, indica i pa-
rametri del marcatore e ci per-
mette di modificarli o inserirne
di nuovi usando le sue caselle,
senza dover scrivere nemme-
no una riga. Sempre dalla fine-
stra delle Proprietà possiamo
anche definire link ad altre pa-
gine interne al sito oppure a si-
ti esterni, confidando nel fatto
che la sintassi sia sempre cor-
retta.
Qualsiasi variazione è co-
munque visibile immediata-
mente nella finestra Codice co-
sì da capire meglio quel che
stiamo facendo.
Una seconda finestra d’ispe-
zione, più complessa, denomi-
nata appunto “Finestra di ispe-
zione tag” elenca tutti i possi-
bili attributi di quel particolare
marcatore, permettendoci di
modificarli usando menù a ten-
dina e altri supporti grafici.
Perciò, combinando icone,
menù e le due finestre d’ispe-
zione, possiamo generare
un’intera pagina senza nem-
meno scrivere una parola di-
rettamente, fino a quando ci
sentiremo abbastanza esperti
per inserire i comandi in prima
persona, fruendo però del con-
trollo e della funzione di com-
pletamento immediato fornita
da Dreamweaver.
Dulcis in fundo, il program-
ma incorpora una serie di mo-
duli già pronti per gli usi prin-
cipali (snippet) da poter inte-
grare nella nostra pagina e da
cui imparare, oltre che ben ot-
to libri interi, forniti da editori
di tutto rispetto come O’Reilly
e Wrox, che descrivono minu-
ziosamente i tag dei principali
linguaggi: HTML, CSS, ASP, JSP,
JavaScript, ColdFusion.
Gli strumenti visuali
per la produttività
Il secondo metodo di lavoro
offerto dal programma è im-
perniato sulla vista Struttura.
Qui la pagina viene disegnata
come apparirà all’interno del
browser però, a differenza di
una semplice anteprima, tutti
gli elementi sono direttamente
modificabili e si può digitare
testo, inserire immagini, liste,
tabelle, moduli usando le stes-
se icone e gli stessi menù già
usati nella vista Codice, con la
differenza che qui gli elementi
si posizionano direttamente
nel punto della pagina in cui
vogliamo e il programma ci
mostra visivamente come inte-
ragiscono con gli altri. Insom-
ma, una sorta di videoimpagi-
nazione Web
È cresciuta anche l’integra-
zione con gli altri strumenti
della famiglia Macromedia, sia
in termini di similitudine d’in-
terfaccia sia in termini di rapi-
dità nel modificare elementi
grafici e Flash mediante la tec-
nica di “andata e ritorno”.
Qualsiasi oggetto modificabile
con Fireworks MX o Flash MX
può essere aperto direttamen-
te dall’interno di Dreamwea-
ver lasciando che sia quest’ul-
timo a passarlo temporanea-
mente in consegna alla nuova
applicazione per poi ripren-
derselo a opera terminata.
Controllo totale del sito
Fin qui abbiamo incontrato
funzioni che sono comuni an-
che ad altri editor HTML, an-
che se non altrettanto svilup-
pate.
La gestione del sito è invece
una prerogativa classica dei
programmi di fascia alta e
Dreamweaver MX realizza, tra-
mite l’abbinata di due finestre
dedicate, un ambiente comple-
to dal quale non solo esplorare
la struttura del sito, i percorsi
di navigazione e le risorse im-
piegate, ma anche modificare
parametri globali (propagan-
do le variazioni su tutte le pa-
gine) e manipolare singoli og-
getti come immagini, sfondi,
oggetti multimediali, collega-
menti, librerie di codice, ecce-
tera. Tramite questo comples-
so pannello di controllo potete
tenere sempre sott’occhio l’in-
tero sito e quindi eseguire au-
tomaticamente gli aggiorna-
menti necessari sul server così
da mandare in produzione le
varianti collaudate prima lo-
calmente.
È possibile anche utilizzare
il pannello Sito per coordinare
il lavoro di più persone, bloc-
cando pagine che voi state mo-
dificando affinché altri non le
possano modificare nel frat-
tempo. Per funzionare al me-
glio, la funzione di coordina-
mento di gruppo richiede l’ac-
quisto di uno strumento ad
hoc di Macromedia da installa-
re sul server (Site-
spring), ma è possi-
bile realizzare si-
stemi di controllo
elementari anche
utilizzando il pac- il corso
chetto di base.  prosegue
(versione integrale
sul CD 65
dell’articolo sul CD)
1a lezione
Identikit
Dreamweaver MX è il più diffuso tra i
Web editor professionali.
Costituisce l’evoluzione del precedente
Dreamweaver 4 e raccoglie al proprio
interno anche le funzioni di UltraDev,
HomeSite e ColdFusion Studio. Nasce
per rendere efficiente il lavoro
congiunto di diverse figure
professionali: il Webmaster, il Web
designer e il Web developer, offrendo a
ciascuna una serie di strumenti
completi. È un prodotto complesso che
richiede un certo impegno per poterlo
conoscere e sfruttare a fondo, di
contro offre una quantità notevole di
strumenti per rendere più rapida la
gestione di un intero sito e più precisa
la produzione di pagine statiche e
dinamiche (con elementi di programma
al loro interno). Costituisce anche
un’eccellente base formativa, con
numerose informazioni tutoriali,
strumenti di verifica e costruzione
automatica del codice. Unica nel suo
genere la possibilità di avere due viste
contemporanee della stessa pagina:
una con il codice e una con la struttura
grafica della stessa. È possibile agire
su una qualsiasi delle due,
osservando immediatamente i
cambiamenti riportati nell’altra.

Punti a favore:
- Incorpora le funzioni di quattro
programmi prima separati
- Ottima palestra formativa
- Offre una vista contemporanea sul
codice generato e sulla disposizione
degli elementi sulla pagina
- Consente di unire efficacemente il
lavoro di creatività e di produzione
tecnica
- È disponibile su diversi sistemi
operativi, compreso Macintosh
- Supporta la gran parte dei linguaggi
di programmazione
- Offre ricchi strumenti per la gestione
di un intero sito
- È compatibile con gli standard più recenti
- Si espande gratuitamente attraverso
moduli opzionali

Punti a sfavore:
- Complesso da imparare
- Richiede un computer abbastanza
potente
- Manca un pieno supporto per il
linguaggio Perl
- Il codice generato con gli strumenti
grafici richiede occasionalmente
verifica manuale
Scheda tecnica
Sito produttore: www.macromedia.com
Costo licenza: 589,50 euro, 146,20
per l’upgrade da una versione
precedente.
Macromedia Studio MX, che include
anche Flash MX, Fireworks MX e
FreeHand 10 costa 1150,80 euro,
574,80 per la versione upgrade.
Requisiti: Windows 98SE, ME, NT4,
2000, XP - Power Macintosh 9.2
oppure OS X 10.1.
 2a lezione

A scuola con PC Open

Progetto Web Master di Roberto Mazzoni

1 Progettare un sito statico

a prima forma di sito che ni e della nostra capacità di mazioni e tag HTML mescolati la tendenza di tutti i progettisti

L qualsiasi Webmaster si tro-

va a realizzare è composta
da pagine HTML di contenuto
permanente, organizzate in
una serie di cartelle e legate da
una struttura di link che defini-
sce la cosiddetta alberatura del
sito e ne consente una naviga-
zione ordinata.
Ogni volta che si vuole ag-
giungere qualcosa, bisogna
creare una pagina ad hoc; men-
tre per modificare i contenuti
già presenti, diventa necessa-
rio agire sulle pagine già pub-
blicate per mezzo di un Editor
HTML di tipo testuale o grafico,
a seconda delle nostre abitudi-
spesa. In buona sostanza, un si-
to statico contiene solo le pagi-
ne che abbiamo individual-
mente realizzato per la pubbli-
cazione e il navigatore non può
chiedere di vedere informazio-
ni visualizzate in modo diverso
da quello noi abbiamo definito
in tali pagine. In un sito centra-
to su database, ossia dinamico,
è invece possibile avere una
pagina campione (template) al-
l'interno della quale riversare
al momento le informazioni più
diverse a seconda di quel che
l'utente chiede.
Ciascuna pagina di un sito
statico contiene invece infor-
tra loro, perciò non è possibile
demandare le attività di pub-
blicazione e di aggiornamento
a persone non tecnicamente
qualificate, poiché, nel cambia-
re il testo o le immagini, po-
trebbero inavvertitamente al-
terare anche i marcatori in cui
questi sono racchiusi, scombi-
nando la pagina.
Esistono tecniche per limita-
re tali rischi, in ogni caso il si-
to statico costituisce un impe-
gno importante di manutenzio-
ne per il Webmaster, che au-
menta al crescere del sito e
che non sempre è possibile far-
si remunerare. Per tale motivo,
è di usare le strutture statiche
solo per i siti più semplici, do-
ve gli aggiornamenti siano po-
co frequenti e di modesta en-
tità, per poi passare, non appe-
na possibile, a strutture dina-
miche, centrate su database.
In ogni caso, qualsiasi sito
nasce statico, nella sua forma
di prototipo originale, e si evol-
ve in dinamico con l'aggiunta
della connessione al database
e con la sostituzione di alcuni
tag HTML con tag scritti in uno
dei vari linguaggi di scripting,
perciò il know how su come
realizzare un sito statico inte-
ressa tutti ed è anche impor-

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso è
• Che cosa fa un Webmaster sul CD
• Gli strumenti di lavoro n. 66
• Le figure professionali che
affiancano il Webmaster
• Le risorse on line
• Tecniche di progettazione del sito
Aggiunte inedite alla prima lezione
disponibili solo sul CD di questo
numero:
Organizzazione delle informazioni: una
descrizione dei vari schemi per strutturare
le informazioni di un sito: schemi esatti,
ambigui e misti.
Costruzione della mappa – gerarchia,
ipertesto, struttura lineare: i tre possibili
approcci per l'architettura del sito e le
relative varianti.
Strumenti di navigazione: elementi che i
browser offrono per la navigazione di un
sito e come sfruttarli nella progettazione.
Sistemi di navigazione: impostare la
navigazione del sito in modo che sia • Spiegazione dei tag HTML per una
comprensibile, inequivocabile ed efficace. pagina vergine
Sistemi di labeling: come scegliere • Esercizi su come creare una pagina
correttamente le "etichette" che vergine e su come progettare un sito
identificano i vari elementi di navigazione.

Lezione 2: Le prossime puntate:
Siti statici e linguaggio HTML
Lezione 3:
Progettare un sito statico: definizione Modelli di pagine e tabelle
della struttura, domini reali e virtuali,
collegamenti assoluti e relativi. Lezione 4:
Progettare la pagina: modelli di pagina, HTML 4.01 e CSS
la caduta della “piega”, tecniche di
impaginazione, usabilità e accesso. Lezione 5:
Pagine HTML e marcatori: sintassi del
linguaggio, formattazione, tag. Design e multimedialità
Strutturare i contenuti della pagina:
tabelle, frame e form. Lezione 6:
Adobe GoLive 6.0: le caratteristiche Siti interattivi
dell’ambiente di sviluppo integrato.
Lezione 7:
contenuti aggiuntivi sul CD Interazione sul server
• Versioni integrali e complete degli
articoli pubblicati sulla rivista Lezione 8:
Promuovere il sito

11/88

tante sapere come predisporlo
fin dall'inizio alla sua evoluzio-
ne dinamica. Un codice HTML
scritto in maniera scorretta
può costringervi a riscrivere
per intero tutte le pagine al mo-
mento del passaggio alla mo-
dalità dinamica. In questo arti-
colo e nei seguenti cercheremo
quindi di esaminare l'approc-
cio corretto fin dal principio.
Definire la struttura
Il primo passo consiste nel
definire una struttura ordinata
per catalogare le informazioni
da pubblicare (vedi Organiz-
zazione delle informazioni
nella lezione 1). Dopo di che si
traccia una mappa del sito, che
imposti l'organizzazione delle
informazioni in generale (vedi
Costruzione della mappa nella
lezione 1) e si arriva infine ai
percorsi di navigazione (vedi
Sistemi di navigazione nella
lezione 1). Da queste tre atti-
vità ricaveremo il sistema di di-
rectory che conterrà i vari file.
Nella pratica, infatti, un sito
statico consiste semplicemen-
te di una serie di file distribuiti
in varie directory.
Un sito molto semplice po-
trebbe avere tutti gli elementi
in una sola cartella, ma se pre-
vediamo un minimo di espan-
sione, sarà opportuno avere
cartelle separate con più livelli
in cascata per tenere ordine
nei contenuti. In effetti, se-
guendo la mappa tracciata pri-
ma, dovremmo avere anche i
nomi e la posizione delle direc-
tory, così da replicare fisica-
mente sul disco, almeno a gran-
di linee, i percorsi di navigazio-
ne previsti per il sito.
GLOSSARIO
MARCATORE (markup) è una
porzione d'informazione che si
aggiunge in testa e in coda a un
blocco di testo per determinarne i
confini, definirne la natura ed
eventualmente l'azione da compiere
su di esso. Il marcatore non fa parte
del contenuto della pagina, bensì
aggiunge semplicemente informazioni
relative a tale contenuto e viene
rimosso dal browser prima della
visualizzazione finale della pagina
sullo schermo del navigatore.
Alcuni marcatori vengono direttamente
rimossi da server prima ancora di
spedire la pagina al browser, nel caso
in cui il marcatore indichi un'azione
che deve essere compiuta sul server.
I marcatori più conosciuti sono quelli
del linguaggio HTML, ma esistono
12/88
La scelta dei nomi delle car-
telle e dei file è importante per-
ché ci deve aiutare a ricordare
che cosa ciascuno contiene
senza doverlo aprire tutte le
volte. Scegliete quindi nomi
mnemonici ed esplicativi che
ricalchino le etichette che ave-
te adottato per il vostro siste-
ma di navigazione (vedi sem-
pre Tecniche di progettazione
nella lezione 1).
Il nome delle directory e dei
file costituisce anche un ausilio
al navigatore che li vedrà com-
parire nella finestra del suo
browser subito dopo il nome
del dominio a cui il sito è abbi-
nato. Una regola importante
nella scelta dei nomi di file e di-
rectory è evitare caratteri spe-
ciali che possano essere in-
compatibili con il sistema ope-
rativo del server.
Poiché quest'ultimo può va-
riare, ci conviene adottare un
approccio che renda i nostri fi-
le compatibili con Windows,
Windows NT/2000 e con
Unix/Linux. È facile, basta man-
tenere i nomi brevi ed evitare
l'uso di spazi bianchi (sostitui-
teli con un tratto di sottolinea-
tura o con un trattino).
Evitiamo anche l'uso di qual-
siasi vocale accentata (sia
maiuscola sia minuscola) e dei
seguenti caratteri speciali: < , ;
: > " ' * / \ & ! % ? = # () [] + il
punto fermo è ammesso, ma
può provocare confusione in
Windows perciò usatelo solo
come separatore tra il nome e
il suffisso obbligatorio e non
aggiungete mai più di un suffis-
so in cascata. Conviene evitare
anche l'uso del segno del dolla-
ro ($) e di qualsiasi caratte- 
molti altri linguaggi basati su
marcatori, in particolare i vari
linguaggi di scripting da usare per
inserire azioni nella pagina Web.
TAG (etichetta) l'indicazione d'inizio
e di fine che si usa per delimitare
l'efficacia di un marcatore, spesso
usata come sinonimo di quest'ultimo.
Qualsiasi tag inizia con i simboli "<"
oppure "</" e termina con i simboli
">" oppure "/>". Molti tag HTML
sono binari, vale a dire operano a
coppie e richiedono un tag di apertura
e un tag di chiusura per completare la
marcatura. Solo il tag di apertura può
contenere attributi e valori.
ATTRIBUTO (attribute)
è una delle caratteristiche che
“Ho trovato lavoro
grazie a PC Open”
Ci incontriamo allo Smau: è
sempre una sensazione strana
vedere finalmente qualcuno con
cui si è intrecciata una relazione
via Internet. Nei mesi cerchi di
immaginarlo e poi eccolo lì
davanti a te, in carne e ossa.
Ed ecco Beatrice Demont, la
BeaBea della community di Pc
Open, ventinove anni, solida e
determinata, una ragazza che
alla tastiera del pianoforte ha
preferito quella del computer.
Infatti spiega:“Nasco come
maestra di pianoforte,
diplomata al Conservatorio di
Genova, la mia città. Ma dopo
un po’ di tempo (e di tentativi),
mi rendo conto che in ambito
musicale non ci sarebbero state
speranze, quindi decido di
iscrivermi all’università, alla
Facoltà di Lingue”. Prosegue gli
studi con successo fino al
giorno fatidico in cui si incaglia
in un computer. “Mi hanno
chiesto di fare una ricerca su
Internet: immediata la mia
risposta - cos’è?-. Mi piazzano
davanti a un PC nel laboratorio
di facoltà e mi dicono come si
accende. Fine. Intorno a me
matricole chattano, scambiano
e-mail con tutto il mondo,
scorazzano sulla Rete: invidia,
quindi ferocia...decido che devo
imparare”. Parte dal computer,
lo acquista, prende una “sola”:
“un chiodo, il commerciante mi
aveva fregato. E ora che ci
faccio?”. Un suo amico le
consiglia di acquistare PC
indicano in che modo applicare il tag
al contenuto e che viene indicata nel
tag di apertura di una qualsiasi
coppia di tag che consenta attributi.
Ad esempio <h1> è il tag che
identifica un titolo e si chiude con il
corrispondente tag </h1>. Possiamo
modificare il tag di apertura
aggiungendo un attributo che
determina l'allineamento del titolo:
align. Uno dei valori da esso
consentiti è right. Perciò <h1
align="right">Titolo allineato a
destra</h1> produrrà un titolo
allineato a destra. Notate che il valore
di un attributo deve essere sempre
compreso tra virgolette. Questa
regola non è imposta dai browser
moderni, ma diventa essenziale per
una futura conversione verso XML.
2a lezione
Open.“Da quel
momento ho
iniziato a
studiare sulla rivista.
Contemporaneamente
preparavo l’esame di
informatica con il professor
Parodi, che richiedeva come
esercitazione la costruzione di
un sito Web. Partivo da zero, ma
con costanza, prima imparando
a utilizzare bene Office poi
programmi come Arachnophilia,
e Front Page, nel giro di sei
mesi ho preparato l’esame,
creato il sito e preso 30 con
tanto di stretta di mano del
professore e offerta di lavoro in
facoltà appena se ne sarebbe
verificata l’opportunità”. Che si
è concretizzata proprio in questo
mese: attualmente Beatrice fa
una sostituzione come
assistente e-learning al Centro
Linguistico Multimediale di
Interfacoltà (Climi) e al Centro di
Teledidattica dell’Università di
Genova. Il suo sogno? Rimanere
in facoltà e aprire un centro
studi ricerche volto allo scambio
di informazioni letterarie e
critiche tra Italia e Francia.
Fondamentali per questo, le sue
competenze informatiche e
ovviamente linguistiche. E, come
ci si poteva aspettare da lei, non
ha certo perso tempo: visto che
Genova nel 2004 sarà Città
della Cultura, ha già inviato il
progetto alla Provincia. BeaBea,
noi di PC Open facciamo il tifo
per te! Daniela Dirceo
ELEMENTO (element)
corrisponde, in HTML, alla
combinazione del tag di apertura,
degli eventuali attributi, del tag di
chiusura e del testo racchiuso tra i
tag. Perciò la scritta:
<h1 align="right">Titolo allineato
a destra</h1> nel suo insieme
costituisce un elemento.
IDENTIFICATORE (identifier)
è il nome del tag, vale a dire la parola
inglese o lettera che compare
all'interno dei simboli < >.
Nell'esempio sopra l'identificatore è
h1.
CONTENUTO (content) qualsiasi
cosa presente nella documento che
non costituisca un marcatore.

 re particolare, mantenendosi
in sostanza all'interno delle let-
tere primarie dell'alfabeto, i nu-
meri, il trattino e la sottolinea-
tura.
Le virgolette doppie (") sono
pericolose anche quando usate
all'interno del testo perché
vengono normalmente utilizza-
te da HTML e dai linguaggi di
scripting per passare i parame-
tri di un comando. Sostituitele
sempre con il codice equiva-
lente previsto da HTML
(&quot;) e fate altrettanto con i
caratteri speciali e le vocali ac-
centate.
Nella definizione dei nomi di
file, prestate anche attenzione
all'impiego delle maiuscole e
delle minuscole, irrilevanti per
Windows, ma riconosciute da
Unix/Linux. Anche la lunghezza
dei nomi è importante. Il DOS è
limitato a 8 caratteri di nome e
3 caratteri di suffisso, il Macin-
tosh si ferma a 31 caratteri,
Windows dalla versione 95 in
avanti consente di usare 255
caratteri e lo stesso vale per
Unix. Alcuni consigliano di
mantenersi entro i vincoli del
DOS, al fine di essere compati-
bili con tutti, ma ciò finisce per
rendere il nome illeggibile. Pro-
babilmente l'approccio miglio-
re è di mantenersi al di sotto
La struttura gerarchica
di un sito
Qui vediamo la mappa abbozzata di una porzione di sito, a partire dalla home page
(index.html) per scendere verso le pagine singole che compongono una lezione del
corso. La mappa è stata realizzata mediante lo strumento di disegno siti di Adobe
GoLive 6.0 che consente di tracciare i contenuti del sito con tutte le relazioni prima
ancora di aver creato una singola pagina. Una volta che la mappa è definita, il
programma genera tutte le pagine e le directory necessarie a rappresentarla.
13/88
dei 31 caratteri e usare ovun-
que possibile caratteri minu-
scoli per i nomi dei file e delle
directory, in tal modo il sito po-
trà spostarsi su macchine Win-
dows, Macintosh o Linux senza
problemi.
È anche importante rispetta-
re i suffissi che seguono i nomi
dei file e che permettono al
browser di riconoscerne la na-
tura e di trattarli di conseguen-
za. I più comuni sono .HTM o
.HTML per le pagine in genera-
le. I due sono intercambiabili in
Windows, e su gran parte dei
server Unix e Linux di recente
concezione, a meno che siano
stati configurati altrimenti. Ma-
cintosh usa in modo nativo il
suffisso .HTML per il lavoro in
locale perciò consigliamo di
usare sempre quest'ultimo,
quando possibile. Per le imma-
gini i suffissi riconosciti dai
browser sono .JPEG e .JPG per
le fotografie, Graphics Inter-
change Format (.GIF) per la gra-
fica a 256 colori e Portable
Network Graphic (.PNG) per
grafica e foto, anche se que-
st'ultimo è tuttora poco diffuso.
Il nome della home page,
cioè della prima pagina del sito,
è determinante perché va rico-
nosciuto automaticamente dal
particolare sistema operativo
2a lezione
presente sul server e
inviato al navigatore
quando costui digita
l'indirizzo del sito
senza indicare una
pagina in particolare.
Il nome di questo file
"indice" è index.htm
o index.html per i ser-
ver Unix e Linux, e
diventa default.htm o
default.asp, nel caso
di Internet Informa-
tion Server di Micro-
soft, con la possibi-
lità di riconoscere
anche index.htm e in-
dex.asp (.ASP è il suf-
fisso delle pagine di-
namiche realizzate
con Active Server Pa-
ges). Può assumere
anche altri nomi co-
me main.htm, welco-
me.htm e home.htm a
seconda del server
Ecco come si traduce sul disco la struttura a
impiegato. directory per realizzare un sito che contenga gli articoli
L'amministratore di questo corso per Webmaster. Notate che,
di sistema può confi- trattandosi di un sito statico, abbiamo raggruppato gli
gurare il server in articoli in base all'argomento e li abbiamo inseriti in
modo da riconoscere una directory di nome esplicativo. Anche i nomi dei file
tutti questi tipi, ma è sono di tipo esplicativo. Non abbiamo seguito la
convenzione di scrivere tutto in minuscolo per renderli
sempre bene verifi- più facili da capire nell'immagine. Qui la vista
care e regolarsi di strutturate delle cartelle è tratta dalla finestra di
conseguenza. Le al- Esplorazione sito di Dreamweaver MX
tre pagine possono
avere un nome a piacere, an- tre, copiando l'intera cartella
che se c'è chi consiglia di crea- siamo sicuri di aver trasferito
re dei file index.html anche per tutto ciò che serve. Come ve-
le home page di secondo e ter- dremo più avanti, un beneficio
zo livello. Infatti in server cerca ulteriore di raggruppare nella
automaticamente tale file ogni stessa cartella tutti gli elemen-
volta che digitiamo un indiriz- ti necessari è la semplificazio-
zo che finisca con il nome di ne dei link.
una directory senza specificare Le immagini che invece sono
nient'altro, ad esempio www.di- comuni all'intero sito (loghi,
gifocus.it/prodotti/fotocamere, icone, pulsanti) si trovano di
e nel caso non lo trovi visualiz- solito in una cartella unica, im-
za in alcuni casi una propria pa- mediatamente sotto la root del
gina indice composta di un sito e accessibile da tutte le al-
elenco dei file e delle cartelle tre pagine. In tal modo saremo
comprese in quella particolare sicuri di avere una singola co-
directory. pia di ciascun elemento grafico
e di poterla modificare a piace-
Collocare i file grafici re sapendo che la variazione
e multimediali sarà immediatamente disponi-
Per comodità, le immagini bile in tutto il sito.
abbinate a una particolare pa- Tuttavia, se pensate di con-
gina HTML vengono spesso vertire il vostro sito da statico
collocate nella stessa directory a dinamico, diventa opportuno
che ospita la pagina creando collocare in una directory uni-
un sistema di cartellette diviso ficata anche tutte le immagini
per argomenti oppure per pe- di contenuto, indipendente-
riodi temporali, a seconda del mente da dove si trovi la pagi-
tipo di contenuti del sito. In tal na a cui si riferiscono. Ciò com-
modo, tutti i contenuti relativi plicherà i link all'interno delle
a un determinato argomento pagine, ma ci metterà nella
sono raccolti in una singola condizione di usare il database
cartella e quando dovessimo in modo efficiente. Infatti, i siti
aggiungere o variare qualcosa dinamici collocano nel databa-
sapremmo dove cercare. Inol- se solo gli elementi di testo e il

Collegamento assoluto - URL
http:// www.digifocus.it/ testlabs/ testlabs.html
protocollo nome a dominio
che punta al sito
Un collegamento assoluto corrisponde all'indirizzo univoco di una pagina, ossia URL (Uniform Resource Locator). La prima parte
dello URL contiene solitamente il dominio abbinato al sito su cui la pagina è residente, seguono immediatamente dopo le eventuali
directory da attraversare prima di arrivare alla pagina, prendendo a riferimento di partenza la directory radice (root) del sito entro cui
si trova la home page
nome delle immagini relative,
sapendo che sono tutte collo-
cate nella stessa directory.
Se metteste nel database
ogni file grafico per intero fini-
reste per appesantire il sistema
e rallentare il sito, se invece do-
veste codificare nel database,
oltre al nome dell'immagine,
anche la relativa posizione, fi-
nireste per complicarvi la vita
e vincolare il database a una
particolare struttura di direc-
tory. Nei siti dinamici, tra l'al-
tro, gran parte delle directory
scompare poiché esistono po-
chissime pagine precostituite,
solitamente di servizio, perciò
il grande "calderone" comune
per le immagini è obbligato.
Tornando ai siti statici, è
consigliabile in ogni caso uti-
lizzare due directory separate
per le immagini di servizio del
sito (loghi, elementi grafici del-
la pagina, bottoni) e per le im-
magini di contenuto. In questo
modo chi lavora al manteni-
mento del sito (Webmaster)
potrà operare senza toccare le
immagini di contenuto e il con-
tent editor o content manager
potrà aggiungere immagini fo-
tografiche e disegni senza can-
cellare inavvertitamente ele-
menti grafici essenziali per la
costruzione dell'intero sito.
Inoltre entrambi potranno
trovare le proprie immagini al
volo, senza rovistare in mezzo
ad altri file di cui non conosco-
no il contenuto. I file multime-
diali, ossia audio e video, ven-
gono spesso inseriti nella stes-
sa directory che contiene le
immagini, tuttavia vale la pena
di prevedere un cartelletta a
parte, se non altro per ordine.
Domini reali e virtuali
La navigazione di un sito av-
viene per mezzo di collega-
menti ipertestuali che indicano
il percorso per passare da una
pagina all'altra. L'interso sito è
unito da questi link, strutturati
14/88
2a lezione
creare infinite variazioni del
dominio che puntino, ciascuna,
a siti separati. Ad esempio, la-
boratorio.pcopen.it potrebbe
rimandare a un sito specifico
per il nostro laboratorio prove.
percorso delle nome della pagina che Chiude l'elenco l'indicazione
directory a partire vogliamo raggiungere del tipo di protocollo utilizzato
dalla homepage per il trasferimento delle infor-
mazioni, cioè l'Hypertext Tran-
sfer Protocol, (HTTP), nel caso
delle pagine Web.
Poiché un nome a dominio è
riservato a un solo detentore
su scala mondiale, diventa un
in modo gerarchico, lineare o che sia anche facile da ricorda- ottimo sostituito per l'indirizzo
completamente libero (iperte- re e digitare. Il domino è solita- del server, al quale viene abbi-
stuale) come descritto nei vari mente composto da tre ele- nato in modo invisibile così che
sistemi di organizzazione delle menti separati da un punto. Il il navigatore digiti il dominio
informazioni (vedi Tecniche di più importante dei tre elemen- conosciuto e questo venga tra-
progettazione nella lezione 1). ti di chiama Top Level Domain dotto nel percorso per arrivare
Il sito stesso poi è accessibile e si trova all'estrema destra del al server corretto. Nel caso in
sul Web per mezzo di un indi- nome a dominio e indica il tipo cui il server sia di vostra pro-
rizzo universale, detto Uniform di categoria a cui il dominio prietà, probabilmente il domi-
Resource Locator (URL), che stesso appartiene: COM per nio sarà residente sul server
identifica il particolare server commerciale, ORG per le orga- medesimo, tuttavia ciò si verifi-
che lo sta ospitando. Nella pra- nizzazioni senza fini di lucro, IT ca di rado e si parla quindi di
tica, lo URL digitato dal naviga- per i domini concessi a perso- dominio virtuale. Vale a dire, il
tore non riflette quasi mai l'in- ne e società residenti nel terri- vostro nome a dominio è con-
dirizzo del server in quanto ta- torio italiano. Questa prima servato su una macchina diver-
le, perché quest'ultimo è spes- parte del dominio è assegnata sa dal server che ospita il sito,
so complicato da ricordare ol- alla gestione di organizzazioni vale a dire su un computer sem-
tre che fuorviante. Infatti il ser- internazionali che ne defini- pre accessibile via Internet che
ver può avere i nomi più astru- scono le regole di assegnazio- rimanda verso il server reale
si (assegnati solitamente dal ne. La seconda spostandosi non appena lo si interroga.
provider per proprio uso inter- verso sinistra contiene il nome Tale computer solitamente
no) e il sito medesimo può tro- scelto da chi registra il domi- appartiene alla società a cui
varsi in qualche subdirectory nio, ad esempio pcopen. La ter- avete affidato la conservazione
dal nome ancora più astruso, il za parte, sempre spostandosi del vostro dominio, tecnica-
che produce alla fine un indi- verso sinistra, prende il nome mente definita maintainer.
rizzo lunghissimo e difficile da di sottodominio. Spesso non Spesso si tratta di chi vi ha
digitare. viene usata e la si riempie con venduto il dominio in primo
La prassi abituale consiste la dicitura www per indicare luogo, talvolta è invece l'ISP
perciò nell'acquisire un nome a che si tratta di un server che che ospita il vostro sito su uno
dominio che in qualche modo contiene pagine Web, tuttavia dei suoi server. La scelta del
comunichi l'identità del sito e potrebbe essere utilizzata per maintainer è importante poi- 
Risoluzione di un indirizzo assoluto - URL
NAVIGATORE
URL root
directory
di servizio
www.digifocus.it
server del
provider Sito
server che ospita il # 15 home.html
dominio (maintainer)
testlabs
testlabs.html pagina
richiesta
Quando digitiamo un dominio, la richiesta viene inviata a una rete di computer che gestisce una mappa di navigazione globale del
Web, nella quale è indicato l'indirizzo fisico della macchina su cui tale dominio è residente. Spesso quest'ultima è un sistema del
maintainer, cioè l'organizzazione che si limita a ospitare il dominio e tenerlo vivo, senza farlo corrispondere, come da regola, alla
directory radice (root) del vostro sito. Si parla quindi di dominio virtuale che rimanda verso la macchina reale che ospita il sito (ad
esempio il sito # 15) e che fa proseguire alla pagina richiesta dal navigatore

livelli più sotto. Il navigatore
Collegamento relativo diretto non vedrà tali livelli accessori,
ma comincerà la navigazione
direttamente dal punto in cui il
si trova la home page del sito e,
home page sulla finestra del suo browser,
vedrà il nome a dominio segui-
articoli to dalla serie di directory e sot-
todirectory che da lì scendono
per portarci alla pagina vera
che abbiamo chiesto. Ad esem-
pio, lo URL http://www.digifo-
testo.html grafica.jpg cus.it/testlabs/testlabs.html ci
dice che stiamo andando alla
“grafica.jpg” pagina testlabs.html nella di-
link diretto =
rectory "testlabs" del sito
www.digifocus.it, indipenden-
temente da dove tale sito sia
Il collegamento relativo diretto può essere utilizzato quando l'elemento a cui si punta
dalla pagina si trova nella stessa cartella (directory) che ospita la pagina medesima. collocato nel server del provi-
È semplice da realizzare e funziona sempre a condizione di mantenere pagina di der.
partenza e oggetto di destinazione nella stessa cartella, dovunque questa si trovi
all'interno del sito Collegamenti assoluti
e relativi
Questo genere d'indirizzo
Collegamento relativo indiretto prende il nome di collegamen-
to assoluto poiché contiene
(consigliato) tutte le informazioni necessa-
rie per arrivare alla pagina sen-
home page za conoscere il punto di par-
articoli
tenza. È il tipo di link che utiliz-
zerete per mandare alla pagina
da un sito esterno oppure dal-
l'interno del testo di una new-
sletter che spedite ai vostri na-
vigatori abituali per informarli
testi immagini delle novità. Funziona in qual-
siasi circostanza perché è au-
tosufficiente, ma non viene mai
testo.html grafica.jpg usato per i collegamenti interni
“.. / immagini / grafica.jpg” del sito perché ogni volta che
link indiretto = sale di scende
si digita un indirizzo assoluto,
un alla il browser esce dal sito, cerca il
livello directory dominio, individua il server fi-
“immagini”
sico corrispondente, ritorna su
quest'ultimo, completa l'indi-
rizzo e ritorna nel sito, con vi-
Il collegamento relativo indiretto mette in relazione la posizione della pagina e della
relativa cartella di origine e dell'oggetto di destinazione con la relativa cartella, stosi rallentamenti alla naviga-
tracciando l'intero percorso che bisogna seguire per passare dall'una all'altra. zione e congestione del server
Cessa di funzionare non appena si sposta uno dei due elementi (origine o che gestisce le richieste del no-
destinazione) all'interno del sito me a dominio.
Di conseguenza, per i pas-
 ché da lui transiteranno tutti momento in cui voleste cam- saggi interni al sito, si usano
coloro che digitano il vostro biare dovreste anche spostare collegamenti relativi che indi-
dominio prima di raggiungere il la posizione del nome a domi- cano le sole informazioni indi-
vostro server e perciò si pos- nio, con inevitabili ritardi di spensabili per raggiungere il fi-
sono verificare rallentamenti propagazione degli aggiorna- le a partire dalla posizione in
oppure completa inaccessibi- menti sulla Rete e temporanea cui ci si trova. Ne esistono di
lità del sito, anche se questo è invisibilità del vostro sito. tre tipi. Chiameremo il primo, il
magari perfettamente funzio- Quando lo digitiamo, il do- più semplice, link diretto per-
nante. minio virtuale ci dirotta verso ché si riferisce alla cartella in
Affidare il nome a dominio a la macchina server e all'interno cui già ci troviamo. Prendiamo
chi ve l'ha venduto è la solu- della particolare directory che l'esempio di un'immagine "gra-
zione più rapida e meno costo- il provider ha riservato al no- fica.jpg" che si trovi nella stes-
sa, e qualora costui sia anche il stro sito (lo stesso server in- sa directory "articoli" della pa-
vostro provider, potrete richie- fatti contiene quasi sempre di- gina "testo.html" in cui dobbia-
dere garanzie sull'efficienza versi siti in directory diverse). mo inserire il link: l'indirizzo re-
tecnica del collegamento tra i Ciò significa che la home page lativo diretto contenuto nella
due server. del nostro sito non si trova nel- pagina "testo.html" sarà sem-
Peraltro tale approccio au- la root (directory principale) plicemente = "grafica.jpg".
menta i vincoli verso quel par- del server Web che la ospita, Nel momento in cui legge
ticolare provider poiché, nel bensì in una cartella due o tre questo indirizzo, il browser sa
15/88
2a lezione
che deve cercare il file "grafi-
ca.jpg" nella stessa cartella del-
la pagina "testo.html". Suppo-
niamo adesso di avere una di-
rectory "testi" e una directory
"immagini" di pari livello en-
trambe contenute nella direc-
tory "articoli" e che la nostra
pagina "testo.html" si trovi ap-
punto in "testi" mentre il file
grafica.jpg sia nella cartella
"immagini".
Dobbiamo usare un link in-
diretto e dire al browser di
uscire dalla directory "testi" in
cui si trova la pagina
"testo.html", salire di un livello
(mediante il segno convenzio-
nale dei due punti consecutivi
..) , cercare la directory "imma-
gini", ridiscendere all'interno
di questa alla ricerca del file
"grafica.jpg". L'indirizzo relati-
vo diventerà in tal caso = "../im-
magini/grafica.jpg" e funzio-
nerà solo fintantoché la pagina
di partenza resterà nella posi-
zione attuale all'interno della
cartella "testi". Nel caso in cui
dovessimo spostare la pagina
"testo.html" oppure la cartella
"testi" a un livello inferiore o
superiore, il link smetterebbe
di funzionare.
Per ovviare a tale inconve-
niente si usa un'altra forma di
link relativo che alcuni defini-
scono, erroneamente, assolu-
to, ma che invece noi chiame-
remo link completo. Si tratta di
un link che non è relativo alla
cartella di partenza, bensì alla
root dell'intero sito. In tal mo-
do il link continua a funzionare
anche nel caso in cui la pagina
"testo.html" fosse spostata in
un altro punto del sito, sempre
a condizione naturalmente che
non si sposti anche la directory
"immagini" a cui il link punta.
La posizione della root è indi-
cata per convenzione da una
barra inclinata (/) perciò il nuo-
vo indirizzo relativo completo
sarebbe = "/articoli/immagi-
ni/grafica.jpg".
Attenzione, però, questo ap-
proccio presenta un problema
diverso, ossia il browser spes-
so interpreta come directory
radice l'effettiva root del ser-
ver, la quale coincide con la
root del sito solo nel raro caso
in cui il server non ospiti
nient'altro, ma che, solitamen-
te, ci spedisce da qualche altra
parte nel caso in cui il nostro
sito sia incapsulato in una di-
rectory secondaria del server
ospite come avviene nel caso
di un provider esterno. Infatti il

mascheramento della struttura
di directory del server ospite
avviene solo quando usiamo
l'indirizzo assoluto, completo
di nome a dominio. La prassi
Collegamento relativo completo
home page
articoli
testi
testo.html
“/ ar ticoli / immagini/grafica.jpg”
link completo =
Il collegamento relativo completo parte dalla radice (root) del sito, vale a dire dalla
directory in cui si trova la home page, per scendere verso la posizione dell'oggetto di
destinazione indicato nel link. Il collegamento è svincolato dalla posizione della pagina
di origine che lo contiene e perciò quest'ultima può essere spostata liberamente nel sito
2 Progettare la pagina
na volta definita la mappa
U del sito e la relativa strut-
tura di directory siamo
pronti a realizzare le prime pa-
gine campione che ci serviran-
no come modello per l'intero
sito, il template o modello, così
chiamato perché serve da
"stampo" per la costruzione di
tutte le pagine successive. Nel
concreto, il template contiene
l'intero codice HTML necessa-
rio per l'ossatura di una pagina
vuota. Avrà quindi gli elementi
di navigazione e gli spazi in cui
inserire successivamente i con-
tenuti (testo e immagini) con
anche le eventuali informazioni
stilistiche (font, colore, sfon-
do, eccetera). Ogni volta che
sarà necessario produrre una
nuova pagina, basterà copiare
il template, inserire il contenu-
to e aggiungere eventuali link.
L'operazione può essere ese-
guita a mano oppure demanda-
ta in automatico agli editor che
dispongono della gestione auto-
matizzata dei template. In que-
st'ultimo caso, ogni volta che ag-
giorneremo il template, saranno
aggiornati anche gli elementi fis-
si (navigazione, pie' di pagina,
eccetera) contenuti nelle pagine
16/88
migliore è pertanto quella di
usare link relativi indiretti, fa-
cendo attenzione a spostare le
pagine il meno possibile una
volta che il sito è stato svilup-
immagini
scende di
1 livello
grafica.jpg
porta scende
alla di 2
radice livelli
del sito
prodotte nel frattempo a partire
da tale template.
Lavorare con i template sen-
za un editor che li gestisca in
automatico aggiunge tempo al
ciclo di produzione, ma il tem-
plate offre il duplice vantaggio
di garantire uniformità a tutte
le pagine del sito e di consenti-
re un più semplice passaggio a
un'architettura dinamica. Que-
st'ultima infatti si basa unica-
mente su template ai quali so-
no stati aggiunti marcatori rea-
lizzati in un linguaggio di scrip-
ting che prelevano il contenuto
da un database, invece che ri-
chiedere l'inserimento manua-
le da parte del Webmaster o
del content editor. Da notare
che il sito dinamico non avrà
altre pagine al di fuori dei tem-
plate, infatti qualsiasi pagina
di contenuto verrà prodotta
automaticamente al momento
della richiesta da parte del na-
vigatore, travasando nel tem-
plate le informazioni prese dal
database, e cesserà di esistere
subito dopo. Per tale motivo,
abituarsi a lavorare per tem-
plate costituisce un'ottima pa-
lestra per affacciarsi al mondo
del Web dinamico.
PC Open 27 Dicembre 2002
pato. La gestione di queste pro-
blematiche diventa in ogni ca-
so molto semplice nel momen-
to in cui s'impiegano ambienti
di sviluppo integrati come
Dreamweaver MX o Adobe Go-
Live 6.0 che contengono fun-
zioni per la gestione integrale
del sito.
In tal caso, se spostiamo un
file oppure una cartella da una
posizione all'altra, usando le
apposite finestre di controllo,
verranno aggiornati automati-
camente tutti i link che vi fanno
riferimento negli altri docu-
menti, a condizione natural-
mente di averli impostato uti-
lizzando le funzioni interne del-
l'editor e non direttamente a
mano. Ci penserà il program-
ma, infatti, a costruire i link re-
lativi indiretti nel modo più ido-
neo, togliendoci dall'impiccio,
e a ricostruirli ogni volta che
spostiamo qualcosa.
Copie locali e aggiornamenti
Un sito statico nasce sul
computer di chi lo sviluppa e
Il template parte da un dise-
gno generale, spesso realizzato
da un creativo, il Web designer,
tuttavia spetta al Webmaster
oppure all'Editor tecnico tra-
sformare il disegno in una co-
difica HTML che possa ripro-
durre nella finestra del brow-
ser ciò che il grafico ha conce-
pito in origine.
La traduzione non è mai per-
fetta, sia perché gli strumenti
stilistici offerti dall'HTML sono
più rozzi di quelli disponibili in
un programma di disegno o di
videoimpaginazione orientato
alla stampa su carta, sia perché
non esiste alcun modo per con-
trollare esattamente l'aspetto
che la pagina avrà quando vi-
sualizzata dal browser del na-
vigatore.
A differenza della pagina di
una rivista, che giace comple-
tamente sotto il controllo del-
l'impaginatore, la pagina Web,
per sua stessa natura, nasce
per essere visualizzata sui tipi
più disparati di computer, equi-
paggiati con i browser più di-
versi e con ogni genere di si-
stema operativo. Inoltre molti
browser offrono al navigatore
la possibilità di personalizzare
2a lezione
viene trasferito a intervalli pe-
riodici sul server di pubblica-
zione, copiando magari solo i
file che sono stati modificati
dopo il precedente aggiorna-
mento.
Per fare in modo che tutto
funzioni a dovere è importante
usare link relativi sulla propria
macchina in modo corretto, ed
è anche importante tenere la
struttura del disco locale iden-
tica a quella del server remoto,
altrimenti i link finiranno per
interrompersi. Per il trasferi-
mento delle pagine finite si usa
il protocollo FTP (File Transfer
Protocol) tramite utility speci-
fiche, oppure mediante le fun-
zioni integrate in gran parte
degli Editor HTML commercia-
li e gratuiti.
I più ricchi tra questi, offro-
no anche un pannelli di con-
trollo dell'intero sito che con-
sentono di esaminare in detta-
glio ciascun elemento, eseguire
simulazioni e verifiche in loca-
le prima dela pubblicazione fi-
nale. 
ciò che vede, modificando la
risoluzione dello schermo, il
numero di colori visualizzati, la
dimensione della finestra, la
grandezza dei caratteri e altro
ancora.
Perciò il progettista deve co-
struire una pagina che manten-
ga una propria coerenza anche
se sottoposta a vistose altera-
zioni nel momento in cui viene
ricevuta. Inoltre, dovrà anche
tenere conto di elementi di usa-
bilità e di navigabilità del sito,
che consentano a chiunque ar-
rivi nella pagina direttamente
dall'esterno di capire dove si
trovi, di che cosa la pagina trat-
ta e dove può andare da quel
punto.
Prima ancora di scrivere una
riga in HTML è necessario divi-
dere la nostra pagina in aree re-
golari e possibilmente costanti
in cui collocare gli elementi di
navigazione, il contenuto vero
e proprio e qualsiasi altro ele-
mento che sia necessario (ad
esempio banner pubblicitari, e
così via).
Modelli di pagina
La creatività non ha limiti e
ci sono diversi approcci possi- 
 2a lezione

 bili. Sul Web si sono consolida- promozionali oppure dal con- 1

ti due approcci ricorrenti per la
strutturazione delle pagine
(per un approfondimento del
tema rimandiamo a "Web desi-
gn arte e scienza" edito da Apo-
geo). Il primo modello prende il
nome di schema tre-quattro pan-
nelli e moduli e prevede nella
parte alta una zona orizzontale
che contiene il logo del sito,
eventuali banner e l'indicazio-
ne di dove ci si trova in quel
momento all'interno del sito
medesimo. Il secondo pannel-
lo, costituito da una verticale a
sinistra, contiene di solito la
barra di navigazione e infine il
terzo pannello, centrale, ospita
il contenuto. Nella pratica la
zona di contenuto non viene
sfruttata appieno per un limite
intrinseco di tutti i browser, e
cioè l'impossibilità di stampare
ciò che si trova all'estrema de-
stra dello schermo (noi abbia-
mo misurato empiricamente
tale limite a 659 pixel dal bordo
sinistro della pagina Web).
Nelle realizzazioni pratiche
troviamo perciò modelli a quat-
tro pannelli, con una colonna
all'estrema destra della pagina
usata per contenuti minori. I
pubblicitari la definiscono, in
gergo, area extramercial, per-
ché ospita banner e bottoni se-
condari, in aggiunta a quelli
primari in testa alla pagina. So-
litamente la si utilizza anche
per elementi di servizio, come
la finestra di login, la naviga-
zione locale (link che collegano
tra loro varie parti di uno stes-
so articolo), i bottoni realizzati
dal marketing per iniziative
Test: leggi le domande e verifica le tue risposte
tent manager per evidenziare
altri contenuti del sito.
Dove cade la piega
Un altro concetto importan-
te nel progettare una pagina e,
in particolare la home page, è
la caduta della piega o fold, al-
l'inglese. Si tratta del limite in-
feriore della porzione visibile
della pagina prima di eseguire
lo scrolling. La parte alta della
home page costituisce la por-
zione più pregiata del sito,
quella che tutti vedranno e che
perciò tenderà ad affollarsi di
elementi di navigazione, di ri-
chiami editoriali e di eventuali
contenuti pubblicitari.
Infatti, solo una parte dei na-
vigatori esegue lo scrolling ver-
Modello a tre-quattro pannelli. È il modello più diffuso nel Web e prevede la
ticale della home page per ve- realizzazione di un modulo o pannello orizzontale superiore (modulo 1) che contiene il
dere il contenuto sottostante, logo del sito e alcuni elementi di navigazione globale, un pannello verticale all'estrema
dopo la piega (below the fold). sinistra (modulo 2) che contiene la navigazione vera e propria, un pannello centrale
Il termine è preso a prestito dal (modulo 3) che ospita i contenuti e un pannello verticale all'estrema destra (modulo 4)
che contiene rimandi locali oppure bottoni promozionali e che sfrutta l'area non
mondo dei quotidiani la cui pri- stampabile della pagina
ma pagina è visibile solo per
metà quando è piegata sul ban- ma si ferma alla home page, il do il quale la home page do-
co dell'edicolante, dunque la numero di elementi da enfatiz- vrebbe contenere l'80% d'infor-
parte superiore, sopra la piega, zare in quest'ultima cresce ra- mazioni di navigazione e solo il
contiene sempre gli elementi di pidamente, perciò è inevitabile 20% di contenuto effettivo, pro-
richiamo più forti. avere home page con uno op- porzione che si ribalta nelle pa-
A dire il vero, i dettami origi- pure anche due scrolling e pa- gine interne dove il contenuto
nali del Web design insegnava- gine interne che arrivano fino regna sovrano e gli elementi di
no a realizzare home page ab- al limite massimo di cinque navigazione sono meno evi-
bastanza semplici da poter es- scrolling. denti (vedi il testo Web usabi-
sere visualizzate per intero Per compensare in parte il lity edito da Apogeo).
senza il bisogno di scrolling e problema della piega e rendere Sempre secondo le indica-
ovunque sia possibile questa il più visibile possibile i conte- zioni di Nielsen, e non solo, il
rimane la soluzione da prefe- nuti interni del sito, alcuni por- navigatore medio si ferma per
rirsi, specie per i siti più sem- tali hanno inventato un altro 8 secondi su una qualsiasi pa-
plici, tuttavia col crescere dei modello di pagina, denominato gina prima di decidere se ap-
siti e con il fatto che almeno in gergo LSD dall'inglese Logo, profondire oppure andare al-
metà dei navigatori non tenta Search box and Directory. In trove, dunque la home page
nemmeno di navigare il sito, pratica fa quel che dice: apre la deve offrire a colpo d'occhio
pagina con il logo e con le infor- ogni possibile strumento per
mazioni che permettono al na- capire cosa ci sia all'interno
vigatore di orientarsi sulla sua del sito.

Riepilogo dei concetti studiati nelle prime due lezioni

1. Quali sono le competenze di un Webmaster?

? posizione attuale e di navigare
nelle sezioni principali, prose-
gue subito sotto con la finestra
di ricerca, messa molto in ri-
2. Che cos'è un editor HTML di tipo testuale? salto perché costituisce uno
3. Che cos'è un editor visuale? degli elementi di navigazione
4. Che cos'è un ambiente di sviluppo integrato? primari per un portale e finisce
5. Quali sono i due possibili schemi per organizzare le informazioni? con la Directory, ossia la clas-
6. Quante possibili strutture esistono per la mappa di un sito? sica visualizzazione tabellare
7. Quali sono gli strumenti di navigazione offerti dal browser? degli argomenti che troviamo
8. Quali sono le dieci regole per un buon sistema di navigazione? in Yahoo, Virgilio, Libero e tan-
9. Che differenza c'è tra un sito statico e uno dinamico? ti altri. Quest'ultima è l'elemen-
10. Che regola seguire nella strutturazione delle directory? to centrale del modello poiché
11. Che differenza c'è tra un collegamento assoluto e uno relativo? consente di creare una struttu-
12. Che cos'è un template? ra di navigazione molto ricca,
13. Che cos'è la piega? in aggiunta alla barra standard,
14. Cos'è HTML? che offre immediata visibilità
15. Cos'è un marcatore (markup) in cosa si differenzia da un tag? di quel che c'è sotto la home
16. Quali sono i più comuni sistemi per "impaginare" un documento Web? page.
Il modello LSD soddisfa an-
(le risposte le trovi a pagina 31) che le raccomandazioni di usa-
bilità di Jakob Nielsen, secon-
È invece pessima e depreca-
ta la prassi del tunnel, vale a di-
re la presentazione ai nuovi na-
vigatori di una sequenza di pa-
gine promozionali da attraver-
sare obbligatoriamente prima
di arrivare alla home page vera
e propria. Altrettanto depreca-
ta, benché meno dannosa, la fa-
migerata splash page, una pagi-
na d'introduzione animata che
cerca di spiegare lo scopo del
sito e che prevede, solitamen-
te, un pulsante skip intro per
procedere direttamente alla
home page del sito. Entrambe
le soluzioni risultano appagan-
ti per il progettista grafico e
magari per il marketing, ma so-
no inutili per il navigatore che
esce dal tunnel appena possi-
bile e non si ferma quasi mai 

17/88

 per osservare l'animazione del- sure" prima di cominciare a mento), tolta l'eventuale barra
la splash page, bensì salta di- scrivere il codice HTML vero e di scorrimento verticale. L’al-
rettamente su altri siti. proprio. In gergo ci chiama can- tezza è invece il numero di
Il metodo più pratico per vas, ossia canovaccio, l'area pixel disponibili nella finestra
realizzare un sito di medie di- per costruire una pagina Web prima della "piega".
mensioni è quello di seguire il che stia nello spazio disponibi- Per capire quanto sia effetti-
modello a tre/quattro pannelli le all'interno della finestra del vamente grande il canovaccio,
per tutte le pagine, compresa la browser. Tale spazio varia in dobbiamo assegnare dimensio-
home page, oppure di adottare funzione del browser, del siste- ni in pixel ai vari elementi. Si
il modello LSD per la home pa- ma operativo e della quantità comincia dal considerare la ri-
ge e per le pagine di navigazio- di pannelli e strumenti acces- soluzione del video utilizzata
ne primarie (le home page di sori che il navigatore mantiene dal navigatore. Se immaginia-
secondo e terzo livello, nel ca- visualizzati. mo che la media dei navigatori
so in cui il sito sia molto ampio I due parametri importanti oggi disponga di monitor con
e profondo), mantenendo i da conoscere sono larghezza e almeno 800 x 600 pixel di riso-
quattro pannelli per tutte le al- altezza del canovaccio, misu- luzione, scopriamo che l'area
tre. rati in pixel. La larghezza corri- massima effettivamente utile
sponde al numero di pixel di- per lo sviluppo è di 780 x 433
Impostare gli spazi sponibili in orizzontale quando pixel, calcolati empiricamente
del "canovaccio" la finestra del browser è aperta su una finestra di Internet Ex-
Definita la struttura della pa- completamente sullo schermo plorer all'interno di Windows
gina, bisogna "prendere le mi- (posizione massimo ingrandi- XP con le principali barre di co-
mando attive. Per una valuta-
2 zione più dettagliata vi riman-
diamo a un articolo sul Web: Si-
zing Up the Browsers accessibi-
le all'indirizzo Internet:
http://hotwired.lycos.
com/webmonkey/99/41/in-
dex3a_page2.html?tw=design.
In generale vediamo che la di-
mensione considerata media-
mente sicura per produrre una
pagina visualizzabile sia di 584
x 599 pixel per schermi da 640
x 480 pixel, 744 x 410 pixel su
schermi da 800 x 600 (i più dif-
fusi) e 968 x 578 pixel su scher-
mi da 1024 x 768.
L'elemento più vincolate è
naturalmente la larghezza, poi-
ché in lunghezza è sempre pos-
sibile eccedere, ricorrendo allo
scorrimento verticale della pa-
gina (scrolling), mentre lo
scrolling orizzontale, benché
usato da alcuni siti, va sicura-
mente evitato. Vediamo che i
diversi siti standardizzano di-
verse misure di larghezza:
Yahoo Italia, ad esempio, ha
pagine larghe 735 pixel, Virgilio
e Libero (IOL) arrivano a 760
pixel.
Una volta decisa la larghezza
complessiva della pagina, che
sarà anche la larghezza del pri-
mo pannello, cioè quello con-
tenente il logo, dobbiamo sta-
bilire le dimensioni delle co-
lonne o pannelli che seguono,
uno parallelo all'altro. Una vol-
ta impostate tutte queste indi-
Modello LSD. Deriva il suo nome dalle iniziali delle parole inglesi Logo Search cazioni, siamo pronti a costrui-
Directory. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte dei re la pagina vera e propria.
portali per la realizzazione della loro home page. La pagina viene divisa in tre fasce
orizzontali, consecutive. La prima contiene il logo del sito e gli eventuali elementi di
navigazione globale del sito. La seconda, di solito piccola, contiene la finestra per Tecniche d'impaginazione
impostare una ricerca per mezzo del motore di ricerca interno al sito/portale. La terza Il Web non prevede stru-
(directory) ed elenca le principali categorie e sottocategorie d'informazioni o servizi menti per l'impaginazione gra-
offerti. Di solito, a fianco della directory troviamo anche colonne verticali che
contengono informazioni, ulteriori elementi di navigazione e bottoni promozionali fica di elementi sulla pagina.
Nato in origine per visualizzare
18/88
2a lezione
semplici testi chilometrici, con
occasionali immagini annegate
nei testi medesimi, l'HTML non
fornisce marcatori per dispor-
re gli oggetti nella posizione
che vogliamo e con le propor-
zioni desiderate. La soluzione
elaborata dai progettisti è stata
di ricorrere alle tabelle, nate in
origine come strumento per la
visualizzazione tabulare di dati
e trasformatesi nel principale
mezzo d'impaginazione del
Web. Ogni elemento viene in-
serito all'intero della cella di
una tabella invisibile e combi-
nando celle e righe contigue si
arriva alla costruzione comple-
ta della pagina. Il codice che ne
risulta è abbastanza comples-
so e richiede una certa espe-
rienza, ma funziona nella gran
parte dei browser.
L'alternativa più rozza e im-
piegata solo nei primissimi
tempi del Web, quando le ta-
belle ancora non esistevano,
consisteva nel creare una gran-
de immagine che contenesse
informazioni cliccabili che poi
rimandavano a pagine interne
di testo. Tecnicamente questo
genere di immagini prende il
nome di imagemap oppure
mappe di immagini e vengono
ancora utilizzate in alcuni con-
testi particolari, ma comporta-
no lentezza nel caricamento
(date le dimensioni del file gra-
fico) e complicazione nell'ag-
giornamento dei contenuti.
In alternativa, nel tempo, si
sono sviluppati altri tre stru-
menti d'impaginazione. Il più
semplice e grossolano prende
il nome di frame e consente di
suddividere la finestra a video
in tante finestre più piccole,
ciascuna contenenti una pagi-
na indipendente. Suddividen-
do i contenuti nelle diverse pa-
gine e regolando le dimensioni
dei frame, possiamo produrre
un'impaginazione approssima-
tiva, ma funzionale. Vedremo
più avanti quali sono i vantaggi
e gli svantaggi dei frame.
Un altro strumento, sicura-
mente indicato per il futuro,
ma ancora poco supportato
dai vari browser, sono i fogli di
stile (CSS), mediante i quali è
possibile posizionare gli ele-
menti sulla pagina indicandone
le coordinate. I fogli di stile fan-
no anche parte del cosiddetto
DHMTL (Dynamic HTML) che
consente di aggiungere anima-
zioni e interazione nella pagina
senza l'impiego di oggetti grafi-
ci. Una variante rispetto ai CSS

3
Le risposte alle domande di pag. 29
1. Progettare la struttura di un sito
partendo dai contenuti che si
vogliono pubblicare e dal percorso di
navigazione che meglio si adatta alla
situazione, produrre una struttura di
pagina HTML che sia leggera,
compatibile con i diversi browser e
vicina alle specifiche grafiche
previste per il sito, conoscenza
perfetta dei linguaggi usati per
costruire le pagine (HTML,
Javascript, Perl CGI, DHMTL, CSS).
2. Sono programmi per l'inserimento
manuale facilitato di codice HTML.
Permettono di inserire i marcatori
usando icone oppure voci di menu e
controllano la sintassi dei marcatori
che abbiamo inserito direttamente.
3. Un programma che nasconde il
codice HTML lasciandoci lavorare
Prendiamo un tipico portale Internet e misuriamo empiricamente lo spazio direttamente sulla struttura visiva
effettivamente disponibile per la visualizzazione della pagina all'interno del nostro della pagina finale, usando
browser (in questo caso Internet Explorer con le principali barre di comando attivate) su strumenti di generazione automatica
uno schermo della risoluzione complessiva di 800 x 600 pixel. Scopriamo di avere 780
x 433 pixel. Nella pratica, il limite consigliato è di 744 x 410 pixel dei tag simili a quelli offerti dagli
editor testuali.
4. Un programma che unisce tutte le
sono i livelli (layer) di Netsca- con Internet Explorer di Micro- caratteristiche più avanzate di un
pe che tuttavia stanno caden- soft ed è abbastanza diffuso editor testuale e di un editor visuale,
do in disuso con il ridimensio- nella Rete, tuttavia si consiglia aggiungendo funzioni per la gestione
narsi della diffusione di tale di avere sempre una versione complessiva del sito e per il
browser. alternativa delle pagine (solo controllo di tutti i link.
Chiude l'elenco l'impagina- testo) per consentire l'accesso 5. Esatto e ambiguo. Il primo
suddivide le informazioni in
zione grafica realizzata me- anche a chi Flash non c'è l'ha
categorie reciprocamente esclusive,
diante strumenti particolari co- oppure non lo può utilizzare ossia le voci che compaiono in una
me Flash. In tal caso usciamo perché magari non vedente e categoria non compaiono in
completamente dal dominio costretto a far riferimento a un nessun'altra. Un esempio tipico è
dell'HTML e generiamo pagine browser che "legga" i contenu- un’organizzazione alfabetica, come
che possono essere visualizza- ti attingendo direttamente dal- nel caso di un dizionario, oppure
te solo mediante l'impiego di la codifica HTML. cronologica, come nel caso di un
speciali plug-in (moduli ag- archivio di articoli di giornale,
giuntivi) nel browser del navi- Usabilità e accesso oppure geografica: i locali di una
gatore. Il plug-in di Flash viene I siti moderni, soprattutto città. Il sistema ambiguo si basa
ormai fornito già in partenza quelli realizzati per la Pub-  sull'esperienza di navigazione del
navigatore tipo e cerca di guidarlo
4 quando non sa esattamente cosa
cercare.
6. Tre: gerarchia, ipertesto e lineare.
La prima è quasi sempre presente
complementata dalla seconda
quando bisogna creare collegamenti
diretti tra zone lontane nello stesso
sito o verso siti esterni.
La struttura lineare è adatta per i
corsi on line.
7. Finestra per digitale gli URL
(indirizzi), i preferiti, i tasti Avanti e
Indietro, il tasto home e la
visualizzazione dei link già visitati
con colore diverso.
8. Essere facile da capire, rimanere
costante, fornire un feedback,
apparire contestuale, offrire
alternative, richiedere un’economia
di tempo e di azione, fornire
messaggi visivi chiari, utilizzare
etichette chiare e comprensibili,
essere idonea per gli scopi del sito,
Visualizziamo la stessa pagina del portale su uno schermo con risoluzione di 1024 x favorire gli obiettivi e i
768 pixel e misuriamo lo spazio empiricamente disponibile con tutti gli "optional" del comportamenti dell’utente.
browser attivi. Troviamo che la pagina che ha una larghezza di 735 pixel sta 9. Un sito statico contiene solo le
comodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato per pagine che abbiamo individualmente
compatibilità con tutti i browser nelle condizioni di default (senza barre di navigazione
opzionali) è di 968 x 578 pixel
19/88
2a lezione
realizzato per la
pubblicazione e il
!
navigatore non può
chiedere di vedere informazioni
visualizzate in modo diverso da
quello noi abbiamo definito in tali
pagine. In un sito centrato su
database, ossia dinamico, è invece
possibile avere una pagina
campione (template) all'interno della
quale riversare al momento le
informazioni più diverse a seconda
di quel che l'utente chiede.
10. Riflettere più fedelmente
possibile il disegno gerarchico
pensato per il sito, usando nomi
mnemonici, mantenendo al
massimo quattro livelli di profondità,
usando solo caratteri minuscoli per
documenti e cartelle, creando una
cartella centralizzata per le immagini
nel caso si voglia poi passare a un
sito dinamico.
11. Un collegamento assoluto indica
l' URL per intero e richiede al
browser di uscire dal sito in cui si
trova per raggiungere la pagina
indicata, anche se questa
appartiene al medesimo sito. Un
collegamento relativo indica invece
la posizione della pagina di
destinazione in rapporto alla pagina
di partenza oppure alla radice
(directory della home page) del sito.
12. È una pagina campione che ci
servirà come modello per molte
altre pagine di contenuto del sito.
13. La linea ideale che separa la
parte visibile della pagina da quella
che può essere vista solo attraverso
lo scorrimento verticale (scrolling)
dei contenuti.
14. L’HyperText Markup Language
nasce nel 1989 nel laboratorio
europeo per la fisica delle particelle
(CERN) come strumento per
consentire la creazione e
distribuzione di documenti
ipertestuali, cioè documenti di testo
liberamente interconnessi tra loro. Il
suo unico obiettivo consiste nella
creazione di pagine di documenti
visualizzabili via rete sulle macchine
più disparate, per mezzo
dell’intermediazione di uno speciale
programma, denominato browser
(“sfogliatore”, alla lettera) che
riconosce i comandi HTML e
visualizza di conseguenza il testo
che essi racchiudono.
15. Il marcatore è una porzione
d'informazione che si aggiunge in
testa e in coda a un blocco di testo
per determinarne i confini, definirne
la natura ed eventualmente l'azione
da compiere su di esso. Il tag
(etichetta) indica l'inizio e la fine
dell'area di efficacia di un
marcatore. Qualsiasi tag inizia con i
simboli "<" oppure "</" e termina
con i simboli ">" oppure "/>".
16. Le tabelle e i frame.

 blica Amministrazione richie-
dono, anche in Italia, l'osser-
vanza di alcune regole che mo-
dificano il modo d'impostare i
contenuti sulla pagina e i siste-
mi d'impaginazione possibili.
Si tratta di regole di usabilità,
per riprodurre un ambiente
che sia familiare al navigatore
e che gli consenta di fruire dei
servizi del sito immediatamen-
te senza dovere imparare a
usarlo, e regole di accessibilità
che consentano di capire i con-
3 Pagine HTML e marcatori
HyperText Markup Lan-
L’ guage nasce nel 1989 nel
laboratorio europeo per
la fisica delle particelle (CERN)
come strumento per la crea-
zione e la distribuzione di do-
cumenti ipertestuali, cioè do-
cumenti di testo liberamente
interconnessi tra loro.
Il suo unico obiettivo consi-
ste nella creazione di pagine di
documenti visualizzabili via re-
te sulle macchine più dispara-
te, per mezzo dell’intermedia-
zione di uno speciale program-
ma, denominato browser (alla
lettera “sfogliatore” o "visua-
lizzatore") che riconosce i
marcatori HTML e li elabora,
estraendo il testo che essi rac-
chiudono e visualizzandolo in
funzione del tipo di marcatore
usato. Costituisce un’edizione
ridotta di un linguaggio prece-
dente, molto complesso e già
ben conosciuto nel mondo
scientifico e informatico: lo
Standard Generalized Markup
Language, del quale mantiene
solo le funzioni essenziali per
la produzione di documenti di
lavoro, adattate al concetto d’i-
pertesto.
L’HTML codifica ogni ele-
mento della pagina mediante
un sistema di marcatori, tag al-
l’inglese, che si pongono all’i-
nizio e in chiusura della por-
zione di testo che si vuole con-
trassegnare. La gran parte dei
tag ha un significato struttura-
le, vale a dire spiega la natura
di quella particolare porzione
di testo: titolo, sottotitolo, pa-
ragrafo, tabella, immagine, col-
legamento (link) e non dice in
che modo visualizzarla. L’in-
tenzione originale era di la-
sciare al browser la scelta di
20/88
tenuti anche a chi, per vali mo-
tivi, non può utilizzare un
browser convenzionale.
L'usabilità si centra in buo-
na sostanza sulla ripetizione
di modelli che si sono dimo-
strati vincenti sul Web e limita
l'originalità del sito. Il classico
esempio di usabilità è l'auto-
mobile: quando salite al posto
di guida, il volante e i pedali
dell'acceleratore, della frizio-
ne e del freno sono sempre
nella stessa posizione, qualun-
come comportarsi in funzione
delle potenzialità della mac-
china su cui era installato.
I primi siti Web si presenta-
vano perciò molto scarni nell’a-
spetto: semplici elenchi di testo
nero su sfondo grigio, con i link
di colore blu e sottolineati, e
con titoli molto vistosi. Non ap-
pena il Web è uscito dal conte-
sto universitario per trasfor-
marsi, nella metà degli anni No-
vanta, in uno strumento com-
merciale, si è presentata la ne-
cessità di fornire un minimo di
estetica e sono nati alcuni mar-
catori stilistici che modificano
direttamente la visualizzazione
del testo viene visualizzato e
che hanno trovato la loro mas-
sima applicazione nell’HTML
3.2, ai tempi di Netscape 4x e In-
ternet Explorer 4x.
Tali marcatori stilistici,
tutt’ora in uso, sono stati de-
precati dal World Wide Web
Consortium (www.w3c.org),
detentore e promulgatore del-
le specifiche HTML, al momen-
to del rilascio della versione
più recente del linguaggio, la
4.01, ormai supportata, alme-
no parzialmente, da tutti i nuo-
vi browser.
L'attuale orientamento è in-
fatti quello di riportare l’HTML
a funzioni unicamente struttu-
rali, lasciando ai fogli di stile in
cascata (Cascading Style
Sheets) il compito di aggiunge-
re stile al testo.
Questi ultimi, tuttavia, non
trovano ancora piena imple-
mentazione in alcuni browser
e perciò molti progettisti anco-
ra abbinano fogli di stile e mar-
catori HTML stilistici secondo
tecniche che vedremo e che
prendono il nome di transitio-
que modello scegliate. I pochi
modelli che sono "originali" al-
la fine vengono usati poco.
L'accessibilità di traduce in-
vece nel fornire alternative te-
stuali a qualsiasi cosa che non
sia decifrabile se non guardan-
dola su un monitor: tipicamen-
te immagini e tabelle.
Inserendo una nota di com-
mento per ciascuna immagine
e un sunto per ogni tabella, en-
trambi previsti dai rispettivi
tag HTML, chi "legge" la pagina
nal (soluzioni transitorie).
La sintassi del linguaggio
HTML è semplicissima e si ba-
sa su parole inglesi comuni.
Non occorrono particolari pro-
grammi per scrivere una pagi-
na HTML, basta infatti un qual-
siasi editor di testo. L’impiego
tuttavia di editor dedicati svel-
tisce il lavoro e riduce gli erro-
ri.
Ogni marcatore è contenuto
tra il simbolo di minore < e
maggiore > senza spazi e si
presenta solitamente in cop-
pia, con un marcatore di aper-
tura e uno di chiusura prece-
duto dalla barra inclinata. Gra-
zie a questo approccio ele-
mentare, è facile delimitare la
porzione di testo a cui il tag si
applica.
Ad esempio <strong>testo in
grassetto</strong> indica che la
frase contenuta tra i due mar-
catori va visualizzata con forza
(strong) il che significa in gras-
setto, nell'interpretazione abi-
tuale del browser Web (può in-
vece assumere forme diverse
Struttura minima della pagina
Qui vediamo la sequenza di marcatori indispensabili per costruire una pagina Web.
Head contiene l'intestazione del documento, invisibile nella finestra del browser con la
sola eccezione del titolo. L'intestazione serve per allegare alla pagina informazioni utili
per i motori di ricerca e per altri scopi. Il documento vero e proprio, visibile al
navigatore, è contenuto tra i tag <body> e </body>
2a lezione
attraverso un sistema di sinte-
si vocale anziché guardarla a
video, può capire di cosa si sta
parlando. Ciò impone maggio-
re lavoro su chi produce con-
tenuti, ma allarga il pubblico
potenziale non solo ai portato-
ri di handicap, ma anche a chi
consulta un sito via telefono
(attraverso sintetizzatore vo-
cale) oppure dal browser vo-
cale montato sull’autoradio
(uno scenario poi non tanto fu-
turibile). 
in browser di natura diversa,
come quelli usati sui telefonini
abilitati alla navigazione di siti
Internet).
Nel caso in cui non ci sia al-
cun testo tra i due tag, il brow-
ser ignorerà il tag e non visua-
lizzerà nulla all'interno della
pagina. L'unica eccezione sono
i tag che non prevedono un
marcatore di chiusura e che
perciò producono un effetto in
ogni caso. Un esempio è il tag
di ritorno a capo <br> che for-
malmente dovrebbe essere
scritto <br/> al fine d'indicare
che si tratta di un tag partico-
lare.
Esistono, poi, tag che hanno
un tag di chiusura facoltativo e
che perciò producono un effet-
to anche se manca il testo cor-
rispondente. Un esempio clas-
sico in questo senso è il tag di
paragrafo <p> che produce un
ritorno a capo con inserimento
di una riga bianca anche se il
paragrafo fosse vuoto. XHTML,
il nuovo linguaggio di unisce
HTML e XML, rende obbligato-

ria la chiusura di tutte le cop-
pie di tag, anche quelle facol-
tative, perciò tanto vale abi-
tuarsi fin d'ora a chiudere re-
golarmente tutti i tag che pos-
sono essere chiusi, come viene
già fatto dagli editor che gene-
rano codice in automatico.
I tag HMTL possono essere
scritti con lettere maiuscole o
minuscole indifferentemente,
tuttavia la pagina risulterà più
ordinata se cercherete di se-
guire una regola. Alcuni Web-
master preferiscono scrivere
sempre i tag tutti maiuscoli per
distinguerli più facilmente dal
resto del testo (effetto otteni-
bile anche con la colorazione
diversa offerta da molti editor
moderni). Altri preferiscono
scriverli tutti minuscoli così
da essere già compatibili con
XHTML, che distingue tra
maiuscole e minuscole.
È possibile nidificare diversi
tag al fine di creare un effetto
cumulato, in tal caso bisogna
sempre chiudere per primo
l'ultimo tag aperto (come av-
viene nelle parentesi in mate-
matica) e fare molta attenzione
a non sovrapporre tag diversi.
Ad esempio: <b><i>testo corsi-
21/88
vo grassetto </i></b> è corretto
perché i tag sono nidificati,
mentre <b><i>testo corsivo
grassetto </b></i> è sbagliato
perché i tag s'incrociano.
Un'altra particolarità impor-
tante è che HTML riconosce
un singolo spazio, perciò se
utilizzate diversi spazi vuoti in
sequenza per separare tra loro
le parole o per far rientrare
una riga rispetto al margine si-
nistro, il browser visualizzerà
sempre e comunque uno spa-
zio solo, a meno che lo abbiate
istruito di mantenere esatta-
mente il formato originale, con
il tag <pre> (preformatted text)
usato solitamente per visualiz-
zare listati di programma o al-
tri testi tecnici. HTML ignora
anche i ritorni a capo e di fatto
rientri e ritorni a capo servono
unicamente per tenere ordine
nella pagina e beneficio di chi
scrive il codice, ma aggiungo-
no caratteri e peso alla stessa.
Se vogliamo mandare a capo
una riga sulla pagina dobbia-
mo usare un tag specifico co-
me <br> oppure <p> (che ag-
giunge anche una riga bianca).
Tutti i ritorni a capo e i rientri
prodotti nella pagina HTML
originale ("source" in gergo)
con un editor di testi oppure
un editor HTML servono uni-
camente a tenere ordine visivo
tra le righe quando le si scrive,
ma aggiunge peso inutile alla
pagina finale. Per tale motivo,
una volta completato il lavoro,
diversi editor HTML consento-
no di eseguire un'ottimizzazio-
ne rimuovendo tutti gli spazi e
i ritorni a capo superflui. In tal
modo, la pagina sarà più legge-
ra e veloce da trasferire, ma
sarà anche più difficilmente
decifrabile da parte di terzi. In
generale i ritorni a capo forza-
ti nel codice (l'insieme di istru-
zioni HTML che compongono
la pagina) vanno usati con mol-
ta prudenza, in particolare
vanno evitati in mezzo ai tag,
cioè si sconsiglia fortemente di
andare a capo lasciando metà
degli attributi associati marca-
tore su una riga e metà sulla
successiva. Molto rischiosa
l'interruzione di tag che con-
tengono link ipertestuali ed
elementi di tabella. Alcuni
browser generano problemi di
allineamento tra le celle di una
tabella per il solo fatto che
queste erano state separate da
2a lezione
un ritorno a capo. Perciò,
quando notate un comporta-
mento strano negli allineamen-
ti, provate a rimuovere i ritorni
a capo in mezzo a quella por-
zione di codice.
Anche nel caso del testo, il
consiglio è di andare a capo so-
lo quando si vogliono effetti-
vamente separare i paragrafi.
A questo riguardo è bene pre-
stare attenzione alle funzioni
di "a capo" automatico fornite
da alcuni editor.
Sono necessarie per leggere
chiaramente righe di codice
molto lunghe senza dover con-
tinuamente scorrere la pagina
in orizzontale, ma si dimostra-
no deleterie quando realizzate
per mezzo di un a capo forzato
che rimane nella pagina in per-
manenza. Accertatevi che il
programma esegua il "soft
wrap", cioè il ritorno a capo di-
namico delle righe
ripiegandole a ca-
po solo a video,
senza l'aggiunta di
ritorni a capo fisici
nel documento.  prosegue
sul CD
(versione integrale n. 66
dell’articolo sul CD)

4 Per chi vuole approfondire: i libri consigliati
INDISPENSABIL
E
Usabilità e progetto grafico si fondono
in questo libro di gradevole lettura, che
codifica i principi concreti da osservare
nella progettazione di una pagina e
degli elementi di navigazione di un
sito. Ricco di esempi, si dimostrerà
rivelatorio per molti.
Hops, 192 pagine, 33,05 euro.
Corso interattivo sulle basi del
linguaggio HTML e di CSS (fogli di
stile). Semplice nel linguaggio e
limitato agli attibuti fondamentali dei
due linguaggi, ottimo per chi comincia
grazie anche alle lezioni contenute su
CD.
MCGraw-Hill, 236 pagine, 30,00 euro.
Approccio inedito all’usabilità
condotto da uno specialista italiano
che riporta i concetti generali di questa
nuova disciplina alle peculiarità del
nostro Paese.
Lettura interessante per allargare il
proprio punto di vista.
Apogeo, 170 pagine, 16,53 euro.
22/88
Manualetto tascabile per tenere a
portata di mano i comandi HTML e per
imparare i rudimenti del linguaggio
quel tanto che basta per aggiornare
pagine già fatte da qualcun altro,
oppure per produrre pagine molto
semplici.
Hops, 264 pagine, 8,26 euro.
E E
INDISPENSABIL
Padroneggiare lo sviluppo avanzato di
un sito che sia conforme ai nuovi
standard XHMTL. Non è una
“reference”, bensì un manuale
operativo, ricco di esempi visivi e con
informazioni di qualità.
Jackson Libri, 682 pagine, 40,80
euro.
E
INDISPENSABIL
Riferimento autorevole sui temi della
navigabilità di un sito e delle regole
che sottendono qualsiasi sistema di
navigazione. Da conoscere prima di
affrontare la progettazione di un nuovo
sito o prima di eseguire il restyling di
uno esistente.
Hops, 334 pagine, 25,31 euro.
Guida intermedia per imparare lo
sviluppo manuale di pagine HTML e
l’uso appropriato dei tag più
importanti. Strutturato con una grafica
facilmente leggibile, il libro è
assimilabile anche da un principiante,
pur non essendo elementare.
McGraw-Hill, 338 pagine, 18,50 euro.
INDISPENSABIL
Bibbia dello sviluppatore per imparare
l’uso di JavaScript all’interno di pagine
dinamiche. Richiede alcune basi di
programmazione, perciò non è alla
portata del neofita. Strumento
indispensabile per un Webmaster
professionista.
Apogeo, 823 pagine, 50,61 euro.
Nonostante il titolo questo è un
volume ricco d’informazioni utili e
consigli che possono servire anche al
professionista. Affronta in dettaglio
quel che un Webmaster dovrebbe
sapere per rapportarsi con fornitori
esterni.
Apogeo, 404 pagine, 18,59 euro.
2a lezione
E
INDISPENSABIL
Ottimo riferimento professionale.
Fornisce una preziosa base per la
transizione da HTML 4 a XHTML, sia in
termini generali, sia nel dettaglio del
singolo tag. Una lettura indispensabile
per il Webmaster che voglia costruire
siti duraturi nel tempo.
McGraw-Hill, 499 pagine, 33,50 euro.
Panoramica delle tecniche per la
produzione di qualsiasi componente di
sito; dalle pagine HTML, ai contenuti
multimediali; audio e video. Utili le
sezioni sui CSS (fogli di stile) e
JavaScript. Prontuario generale per chi
non ha tempo di leggere altro.
Apogeo, 392 pagine, 25,31 euro.
Unico manuale oggi disponibile in
italiano sulla nuova versione di GoLive
(integrata nel CD di questo numero).
Copre tutte le funzioni di uso comune
del programma, con svariati esempi e
consigli validi per Mac e per Windows.
Jackson Libri, 299 pagine, 36,00
euro.

5 Strutturare i contenuti nella pagina:
tabelle, frame e form
a costruzione di una pagina
L HTML equivale alla battitu-
ra di un testo con una tele-
scrivente. Il browser costrui-
sce la pagina leggendo in se-
quenza ciascuna riga, caratte-
re per carattere. Combinando i
comandi e i contenuti che tro-
va lungo il percorso, arriva alla
fine a produrre l’impianto de-
siderato.
Ogni cosa che si trova nella
pagina è di fatto un carattere di
testo che esprime un coman-
do, indica la posizione di
un’immagine e le relative di-
mensioni, descrive un link
esterno, indica un testo da vi-
sualizzare, stabilisce la posi-
zione dei diversi elementi.
Si dice tecnicamente che
ogni elemento è inline, vale a
dire si trova inserito in una ri-
ga sequenziale e non può esse-
re letto prima che siano stati
letti gli altri caratteri che lo
precedono.
Poiché nasce per visualizza-
re testo che fluisce in conti-
nuo, HTML non prevede alcu-
na funzione per “impaginare”
gli elementi, ossia per collo-
carli in una determinata posi-
zione nella pagina, all’interno
1 2
Fig. 1 Esempio di un'impaginazione tabellare. L'immagine che segue si riferisce a una pagina Web costruita usando una complessa
griglia di tabelle nidificate che tengono al proprio posto i vari elementi.
Fig. 2 Tabella evidenziata. Qui vediamo evidenziato in modo grossolano alcune delle tabelle che compongono la pagina. Notate che
esiste una tabella principale esterna che ne contiene altre che a loro volta ne contengono altre in uno schema di scatole cinesi
23/88
di riquadri o colonne che ab-
biano proporzioni ben definite
rispetto al resto.
Se ci affidiamo agli strumen-
ti base del linguaggio, l’unica
forma di pagina possibile sa-
rebbe un testo chilometrico,
occasionalmente interrotto da
un’immagine o da un link verso
altri documenti.
Talvolta questo può anche
essere sufficiente, come nei
primi siti universitari e amato-
riali che si sono visti sul Web.
In tal caso non dovete far altro
che iniziare a inserire il testo e
le immagini in sequenza nella
zona compresa tra il tag
<body> e il suo gemello
</body> che, come abbiamo
detto, delimitano l’inizio e la fi-
ne del documento vero e pro-
prio.
Nella maggior parte dei casi,
però, si vuole un’impaginazio-
ne più raffinata, che divida la
pagina in aree ben distinte, cia-
scuna con elementi propri, co-
me ad esempio la struttura a
quattro pannelli che abbiamo
visto nei modelli d’impostazio-
ne della pagina. In tal caso, pri-
ma ancora di cominciare a in-
serire il contenuto, ci serve
una struttura capace di conte-
nerlo. Le scelte possibili sono
tre: tabella, frame e form. In
realtà esiste anche la possibi-
lità di collocare gli elementi
mediante le funzioni di posi-
zionamento dei fogli di stile in
cascata, CSS, ma queste ultime
non sono supportate da tutti i
browser e ne parleremo, più
avanti, quando affronteremo il
tema dei fogli di stile.
Il più diffuso e versatile dei
tre sistemi sono le tabelle, per-
ché compatibili con tutti i
browser e prive di controindi-
cazioni in materia di usabilità e
di estetica. Se le configuriamo
senza bordo, le tabelle diven-
tano una specie di griglia invi-
sibile che tiene al loro posto i
vari elementi della pagina, im-
magini e testo. Gli unici svan-
taggi delle tabelle sono il non
garantire l’assoluta stabilità
delle dimensioni e delle pro-
porzioni tra i componenti e la
difficoltà d’implementazione.
Particolarità dei frame
I frame sono invece più faci-
li da realizzare e offrono un
controllo molto più rigoroso
degli spazi. Tuttavia presenta-
2a lezione
no importanti svantaggi di usa-
bilità e di estetica. Dividono la
finestra in diversi riquadri, cia-
scuno contenente una pagina
Web indipendente, perciò di-
venta impossibile far funziona-
re i tasti di navigazione in avan-
ti e all’indietro del browser. In-
fatti, con tre o quattro pagine
contemporaneamente presenti
a video, non è chiaro quale sia
la pagina in cui ci troviamo
esattamente e in quale dei di-
versi riquadri debba essere ca-
ricata quella a cui si vuole ri-
tornare. Inoltre, anche nel defi-
nire le istruzioni di navigazione
nel sito, dobbiamo sempre in-
dicare in quale pannello inseri-
re la pagina a cui il link è indi-
rizzato, il che complica un po-
co i collegamenti ipertestuali.
In materia di stampa si può
stampare un solo riquadro per
volta e il browser non sa quale
sia quello giusto a meno che
glielo indichiamo noi usando
una complessa sequenza con il
tasto destro del mouse, ben
poco amichevole per il naviga-
tore comune. Infine la dimen-
sione rigorosamente bloccata
dei riquadri può anche diven-
tare un problema quando la
pagina esce dai contorni del vi-
deo e diventa necessario ese-
guire lo scrolling verticale. In
tal caso compariranno una
banda di scorrimento verticale
e orizzontale (a seconda della
direzione in cui il contento de-
borda rispetto al progetto ori-
ginale) che sfigurano la pagina
e ne complicano l’uso.
Form per la registrazione
I form o moduli servono a
formattare un particolare ge-
nere di pagina, quelle utilizzate
per raccogliere informazioni
dal navigatore. Hanno il tipico
formato di un formulario da
compilare, con una serie di ca-
selle accompagnate dalle rela-
tive etichette esplicative, più
eventuali menu a tendina da
cui scegliere voci già reimpo-
state oppure caselle da barra-
re per operare scelte immedia-
te. Sono compatibili con ogni
genere di browser possono es-
sere a loro volta incapsulati al-
l’interno di tabelle o frame, ma
non è indispensabile. 

6 Adobe GoLive 6.0 maestro di tabelle
on la nuova versione del
C suo celebre ambiente di
sviluppo integrato, Adobe
consolida una soluzione che è
particolarmente mirata all’inte-
grazione tra editoria su carta
stampata ed editoria sul Web,
aggiungendo anche funzioni
per la produzione di contenuti
multimediali e mobili, cioè da
visualizzare su telefonino e
PDA in alternativa al computer.
Il quadro competitivo rispetto a
Dreamweaver, l’antagonista di
sempre, è migliorato drastica-
mente sia con l’aggiunta di una
doppia vista che abbina in con-
temporanea codice e struttura
grafica, sia con l’aggiunta di
funzioni per il coordinamento
del lavoro di gruppo che sono
invece assenti dalla piattafor-
ma Macromedia.
Migliorata drasticamente an-
che l’integrazione con gli altri
prodotti Adobe che vanno a
comporre la Creative Suite, in-
fatti GoLive 6.0 oggi può impor-
tare livelli di Photoshop, illu-
strazioni vettoriali di Illustra-
tor e animazioni di LiveMotion
2.0. Mantenuta infine l’integra-
zione con InDesign, il pacchetto
di videompaginazione per l’edi-
toria tradizionale che consente
un efficace passaggio dei con-
tenuti dalla carta al Web e vice-
versa.
Al momento esistono due
suite che si contendono il mer-
cato dei creativi che cercano un
ambiente editoriale completa-
mente integrato: Adobe Creati-
ve Suite, più orientata al mondo
dei creativi tradizionali che
hanno bisogno di un efficiente
sbocco sul Web, e Macromedia
Studio MX che si rivolge invece
a un ambiente puramente Web
e che coordina la generazione
di siti statici e dinamici, con
particolare enfasi sui linguaggi
di scripting e sullo sviluppo di
applicazioni.
Particolarità dell'interfaccia
GoLive si differenzia da qual-
siasi editor visuale per il fatto
di offrire una grande varietà di
viste per lavorare sul docu-
mento oppure sull’intero sito. Il
Errata: segnaliamo un'imprecisione
nella prova di Dreamweaver MX
pubblicata lo scorso numero: il prezzo
del prodotto Macromedia è 574,80
euro, e 286,80 euro per l'upgrade
24/88
Caratteristiche
Produttore e sito: Adobe - www.adobe.com
Requisiti: Windows 98SE, ME, 2000 con Service Pack 2, XP, per la
funzione Web Workgroup Server è richiesto Windows 2000 o XP
Costo licenza: 589,50 euro, 146,20 per l’upgrade da una versione
precedente. Adobe Creative Suite Premium, che include anche Photoshop
7.0, Illustrator 10, InDesign 2.0, Premiere 6.5 e Acrobat Distiller 5.0
Prezzo: 2158,80 euro IVA compresa
programma identifica quattro
categorie di elementi e fornisce
strumenti ad hoc per ciascuna.
Le categorie sono la pagina nel
suo complesso, il codice sor-
gente (HTML o di altro tipo), il
sito e le funzioni avanzate, co-
me ad esempio i fogli di stile.
La prima categoria di oggetti
è la più comune e contiene la
pagina con tutti i relativi com-
ponenti: tabelle, moduli, testo e
immagini. La sua lavorazione è
imperniata su una finestra di
Layout che ne mostra una ver-
sione grafica modificabile.
Lavorando con il mouse e i
menu, è possibile inserire, can-
cellare, spostare e ridimensio-
nare qualsiasi elemento, osser-
vando il risultato immediato a
video. Le tecniche di lavoro so-
no due: inserire gli oggetti at-
tingendo dalla palette dedicata,
oppure costruire una griglia vi-
siva su cui poi collocare dei se-
gnaposto per gli oggetti.
La griglia, che assomiglia alla
“gabbia“ d’impaginazione di
una pagina su carta, si trasfor-
ma poi automaticamente in ta-
bella, collocando tutti gli ele-
menti al posto giusto. Questa
particolare modalità progettua-
le, molto vicina al sistema di la-
voro di un progettista grafico,
non è presente in nessun altro
editor HTML e viene fornita dal
concorrente principale, Dream-
weaver MX, solo grazie all’im-
piego di un prodotto comple-
mentare esterno, Fireworks MX.
Il secondo elemento di lavo-
ro che ci accompagna ovunque
è la finestra Inspector che mo-
stra i parametri di qualsiasi og-
getto selezionato permettendo-
ci di modificarli senza interve-
nire manualmente sul codice.
Si notano anche alcune fi-
nezze nella finestra Layout: il ti-
tolo della pagina è immediata-
mente accessibile nella cornice
superiore della finestra di
Layout e può essere modificato
direttamente (come avviene an-
che in Dreamweaver), ma qui
possiamo anche estendere il
bordo superiore e accedere a
tutti gli altri elementi dell’inte-
stazione (head), senza dover
scorrere il listato HTML come
invece accade in altri editor.
In basso alla finestra, come
in Dreamwaver, abbiamo l’indi-
cazione della larghezza in pixel
della pagina su cui stiamo lavo-
rando.
Rispetto alla versione prece-
dente, ora è anche possibile
aprire una finestra di esplora-
zione del codice immediata-
mente sotto alla finestra di
Layout così da vedere in che
2a lezione
Identikit

Adobe GoLive 6.0 si colloca
come il secondo ambiente di
sviluppo integrato per l'impiego
professionale sul Web. Rispetto al
suo concorrente diretto,
Dreamweaver MX, offre funzioni più
evolute di gestione delle tabelle,
d'integrazione la carta stampata e
di gestione di gruppi di lavoro.
L'aggiunta di una vista del codice in
parallelo alla vista grafica
strutturale colma una lacuna che lo
vedeva in svantaggio rispetto alle
versioni precedenti di Dreamweaver
e consente di avere due viste
contemporanee della stessa
pagina: una con il codice e una con
la struttura grafica della stessa. È
possibile agire su una qualsiasi
delle due, osservando subito i
cambiamenti riportati nell’altra.
Idoneo per chi viene dal mondo
della grafica tradizionale e vuole
creare siti oppure travasare lavoro
editoriale sul Web senza traumi.
Forti anche le funzioni di gestione di
contenuti multimediali, grazie
all'integrazione con LiveMotion. È
un prodotto complesso con
un'interfaccia singolare e richiede
un certo impegno per poterne
sfruttare a fondo le caratteristiche.
Ottime le funzioni di gestione
integrata del sito. Dreamweaver, in
confronto, appare più orientato allo
sviluppatore di siti che centra gran
parte della propria attività sulla
produzione di codice e
sull'integrazione con database.

Pro
- Eccezionale gestione delle tabelle
- Ottima palestra formativa.
- Vista contemporanea sul codice
generato e sulla disposizione degli
elementi sulla pagina.
- Unisce efficacemente il lavoro di
creatività e di produzione tecnica.
- È disponibile su diversi sistemi
operativi, compreso Macintosh.
- Viste inedite sulla gerarchia del
sito e sulla struttura della pagina.
- Offre ricchi strumenti per la
gestione di un intero sito.
- È compatibile con gli standard più
recenti

Contro
- Complesso da imparare.
- Richiede un computer abbastanza
potente.
- Il codice generato con gli strumenti
grafici richiede occasionalmente
verifica manuale.
- Finestra di codifica diretta più
debole rispetto ad altri editor

modo le variazioni apportate
graficamente si traducono in
istruzioni HTML e, viceversa,
per vedere come una modifica
manuale dei tag si ripercuota
sulla finestra di Layout che fun-
ziona come una sorta di ante-
prima immediata e modificabile.
Questa visualizzazione dop-
pia e contemporanea emula
una prerogativa che finora è
stata unica di Dreamweaver.
La differenza tra i due è che
Adobe GoLive non visualizza
nella finestra Layout l’effetto
prodotto dagli eventuali fogli di
stile, ma dispone in compenso
di una finestra di Anteprima in-
terna al programma che visua-
lizza immediatamente la pagi-
na nella sua struttura finale, in-
vece di dover aprire una fine-
stra esterna allo scopo come
accade in Dreamweaver.
Un altro modo unico di GoLi-
ve per visualizzare il codice sor-
gente a fianco della finestra
Layout consiste nella palette del
Codice Sorgente. Una finestrella
ridimensionabile che si apre so-
pra la vista Layout e mostra la
porzione di codice che corri-
sponde all'area selezionata. Il
terzo modo possibile consiste
nell'apertura di una speciale fi-
nestra denominata Visual Tag
Editor che mostra la codifica del
particolare tag su sui è posizio-
nato il cursore e consente di
modificarlo agendo direttamen-
te su quella particolare porzio-
ne di codice sorgente.
Operare direttamente
sul codice
Esiste anche, naturalmente,
la finestra per l’editing testuale
a tutto schermo. Si chiama fi-
nestra Origine e prevede la co-
lorazione dinamica degli ele-
1 2
Fig. 1 Anche Adobe GoLive 6.0, alla pari di Dreamweaver, consente di visualizzare contemporaneamente la vista Layout (struttura) e la vista Origine (codice) modificando
liberamente gli elementi nell'una o nell'altra e osservando le variazioni riportate immediatamente in entrambe. Un ottimo sistema per imparare l'uso di HTML e per manipolare
con efficacia documenti complessi. Fig. 2 La finestra Origine mostra il codice HTML originale e consente di lavorare come in un qualsiasi altro editor HTML testuale di fascia
medio-alta. Questa vista rimane comunque meno potente della corrispondente vista Codice di Dreamweaver MX. Fig. 3 La vista struttura mostra un'analisi strutturale del
documento in termini di gerarchie tra i vari marcatori. Preziosa per l'analisi delle tabelle e delle altre forme complesse di HTML, non trova paragoni in nessun altro programma per
la creazione di pagine Web
25/88
menti di programma distinta-
mente dai tag HTML e dal te-
sto. Qui, a differenza di altri
programmi abbiamo la possibi-
lità di scegliere al volo, me-
diante icone, che cosa colora-
re: i marcatori distinti dai rela-
tivi attributi e distinti dal testo,
gli elementi nel loro insieme
(cioè tag, più attributi più testo
contenuto all’interno del tag), i
soli collegamenti, il codice ese-
guibile su server. In questo mo-
do è possibile eseguire analisi
selettive delle diverse compo-
nenti della pagina e intervenire
di conseguenza.
Alla pari di altri ambienti,
troviamo la possibilità di vi-
sualizzare i numeri di riga e di
attivare un a capo automatico
(soft wrap) delle righe in modo
da non dover eseguire lo scrol-
ling orizzontale e al tempo
stesso non modificare il codice
con l’aggiunta di a capo per-
manenti.
L’inserimento di qualsiasi
elemento HTML è affidato alla
stessa palette di oggetti che
abbiamo visto nella finestra
Layout e anche qui possiamo
usare il selettore di colori per
qualsiasi elemento colorabile
della pagina. La finestra Inspec-
tor perde invece di utilità.
Rispetto a Dreamweaver
sentiamo la mancanza di una fi-
nestra grafica d'impostazione
dei parametri di ciascun tag,
sensibile alla posizione del cur-
sore, e il completamento auto-
matico dei tag in fase di digita-
zione diretta.
Superlativa invece la gestio-
ne delle tabelle, quasi del tutto
automatizzata, con completa-
mento automatico degli ele-
menti mancanti e con importa-
zione diretta di qualsiasi gene-
re d'informazioni tabellari, ver-
sate automaticamente in una
tabella con il numero giusto di
righe e di celle.
Nella manipolazione delle ta-
belle GoLive non è secondo a
nessuno.
Funzioni speciali
del programma
Unico nel suo genere, GoLive
fornisce altre due viste parti-
colari dedicate esplicitamente
all’analisi dei frame (riquadri) e
della struttura del documento
(in particolare le tabelle).
In pratica, compare un edi-
tor strutturale che mostra le re-
lazioni gerarchiche tra i vari
elementi della pagina oppure
tra i riquadri di un frame, con-
sentendo di modificare diretta-
mente gli attributi di ciascuno
e di correggere eventuali erro-
ri, spesso difficili da notare nel-
la vista Origine, dove le molte-
plici righe di codice oscurano il
disegno strutturale che sta die-
tro alla pagina. Le modifiche
apportate nell’editor di strut-
tura di tabelle o frame si mo-
strano, poi, direttamente nelle
altre finestre.
La progettazione del sito
Questo è un dei punti di for-
za di GoLive che, alla pari di
Dreamweaver, consente di te-
nere sotto controllo tutti gli
elementi del sito, creare tem-
plate modello per tutte le pagi-
ne, ispezionare graficamente
link e gerarchie e modificare
qualsiasi elemento nel sito con
un doppio clic. Una prerogativa
unica di GoLive è tuttavia quel-
la di disegnare il sito da zero,
su uno schema grafico che vi-
sualizza tutti i possibili ele-
menti. Lo schema può essere
3
2a lezione
stampato ed esportato per sot-
toporlo all'approvazione del
committente oppure semplice-
mente per tenere una docu-
mentazione delle varie fasi.
Una volta che lo schema è
completo, il programma gene-
ra automaticamente tutte le pa-
gine e gli oggetti corrisponden-
ti, tenendo traccia dei link pre-
visti che saranno aggiunti a ma-
no a mano che inseriamo con-
tenuti nelle pagine così create.
Un esempio in questo senso è
fornito dall'esercizio presente
sul CD Guida.
Il lavoro di gruppo
Un'altra area di netta diffe-
renziazione rispetto a
Dreamweaver è la gestione
coordinata del lavoro di grup-
po. Utilizzando una tecnologia
residente su server, GoLive tie-
ne traccia di chi sta lavorando
sul documento in un certo
istante e di tutte le versioni rea-
lizzate. In tal modo, si evitano
variazioni conflittuali e si può
procedere allo sviluppo paral-
lelo dello stesso sito da parte di
un team di professionisti.
La funzione, denominata
Workgroup Server, è totalmen-
te gratuita e integrata nel pro-
gramma base. La tecnologia
corrispondente di Macromedia
prendeva il nome di Sitespring
ed è stata abbandonata prima
del rilascio di Dreamweaver MX
senza fornire nel frattempo al-
ternative percorri-
bili, perciò GoLive è
l'unico ambiente di
sviluppo sul merca-
to che consenta
una gestione effica- prosegue
ce di un team.  sul CD
(versione integrale
dell’articolo sul CD)
n. 66
 3a lezione

A scuola con PC Open

Progetto Web Master di Roberto Mazzoni

1 La tabella come elemento strutturale

ominciamo la nostra ne" per le pagina Web. "telescrivente", ossia vengo- Inoltre, come qualsiasi al-

C esplorazione in detta-
glio del linguaggio
HTML dalle tabelle, un tema
che non viene mai affrontato
per primo nei testi e nei cor-
si su questo linguaggio, in ra-
gione della sua complessità,
ma che a nostro avviso è ne-
cessario invece conoscere da
subito al fine di progettare
pagine funzionali. Oltre alla
loro funzione primaria, che
consiste nel rappresentare
informazioni tabulari, le ta-
belle costituiscono il più dif-
fuso sistema di "impaginazio-
Funzionano come una gri-
glia invisibile, che suddivide
lo spazio della pagina in con-
tenitori ben definiti in cui ri-
versare testo e immagini.
Il professionista perciò ini-
zia il proprio lavoro su una
pagina vergine proprio dalla
progettazione della tabella e
prosegue, poi, con il riversa-
mento dei contenuti e l'ag-
giunta degli elementi stilisti-
ci.
Come qualsiasi altro ele-
mento HTML, anche le tabel-
le operano nella logica della
no lette dal browser un ca-
rattere alla volta, dall'inizio
dalla fine della riga, per poi
cominciare con la riga suc-
cessiva.
Non esiste modo di sapere
come una tabella sia esatta-
mente composta fino a che il
browser non è arrivato in fon-
do alla lettura dei vari tag
che la compongono.
Basta un tag sbagliato op-
pure mancante, per scombi-
nare l'intera pagina e render-
la incomprensibile al suo
stesso progettista.
tro elemento HTML, le tabel-
le cambiano il proprio fun-
zionamento a seconda della
versione di browser utilizza-
to e del modo in cui il codice
originale è stato scritto.
Codifiche teoricamente
equivalenti e sintatticamente
corrette possono produrre ri-
sultati visibilmente diversi.
È proprio in questo ambito
che i cosiddetti editor HTML
visuali mostrano le maggiori
differenze producendo in au-
tomatico codice HTML che
talvolta va rivisto riga per ri-

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso è
• Che cosa fa un Webmaster sul CD
• Gli strumenti di lavoro n. 67
• Le figure professionali che
affiancano il Webmaster
• Le risorse on line
• Tecniche di progettazione del sito
Aggiunte inedite alla prima lezione
disponibili solo sul CD
di questo numero:
• Organizzazione delle informazioni
• Costruzione della mappa – gerarchia,
ipertesto, struttura lineare
• Strumenti di navigazione
• Sistemi di navigazione
• Sistemi di labeling
Lezione 2:
Siti statici e linguaggio HTML
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
• Adobe GoLive 6.0
dimensionare tabelle con celle miste,
Contenuti aggiuntivi sul CD allineamento spontaneo delle tabelle
consecutive
• Versioni integrali e complete degli articoli • Template con struttura complessa:
pubblicati sulla rivista come creare tabelle complesse
• Spiegazione dei tag HTML per una pagina • Template con tabelle nidificate: tabelle
vergine nidificate in cascata, complesse
• Esercizi su come creare una pagina e consecutive
vergine e su come progettare un sito • Esercizi: esplorare i tag delle tabelle,
creare una tabella semplice con
HTML-Kit

Lezione 3:
Modelli di pagina e tabelle
Le prossime puntate:
• La tabella come elemento strutturale:
comporre gli elementi della pagina Lezione 4 - febbraio 2003:
utilizzando una tabella di riferimento HTML 4.01 e CSS
invisibile
• Progettare layout fluidi e statici: Lezione 5 - marzo 2003:
scegliere il migliore per le proprie Design e multimedialità
esigenze
• Costruire template con le tabelle Lezione 6 - aprile 2003:
di layout: produrre modelli riutilizzabili Siti interattivi
• NamoWeb Editor 5: per siti statici
professionali Lezione 7 - maggio 2003:
Contenuti aggiuntivi sul CD Interazione sul server
• Dimensionare tabelle e celle fluide, Lezione 8 - giugno 2003:
Promuovere il sito

26/88

ga dal progettista per elimi-
nare gli "errori" introdotti dal
programma.
La corretta gestione delle
tabelle è quindi una vera e
propria arte e costituisce uno
dei pilastri essenziali su cui si
regge il lavoro di chi costrui-
sce siti. A differenza delle ta-
belle costruite da un foglio
elettronico o da un wordpro-
cessor, che hanno righe e co-
lonne ben identificate e rego-
labili singolarmente, le tabel-
le HTML sono semplicemen-
te sequenze di righe e di cel-
le all’interno di tali righe.
Non esiste alcun marcato-
re per definire le colonne in
quanto tali e il concetto stes-
so di colonna viene simulato
grazie all'intervento del
browser che, combinando di-
verse celle appartenenti a ri-
ghe consecutive, crea l'im-
pressione di un'unità vertica-
le.
La tabella in quanto tale
viene costruita dal browser
combinando i vari tag che de-
finiscono una serie di righe
sequenziali che contengono
una serie di celle le quali,
combinandosi con quelle di
pari posizione nella riga pre-
cedente e nella riga successi-
va, danno l’impressione di
formare colonne verticali,
che in realtà non esistono.
Il browser intraprende al-
cune azioni autonome per ag-
giustare e modificare l'aspet-
to originale delle celle in mo-
do da creare un risultato rite-
nuto migliore, ma che po-
trebbe anche essere diverso
dall'intendimento originale
del progettista.
Alcune regole da tenere
sempre a mente
Qualsiasi dimensione speci-
ficata per la tabella e per le
celle dal progettista viene in-
tesa dal browser come dimen-
sione minima e puramente in-
dicativa. Nel caso in cui abbia-
mo indicato unicamente la lar-
ghezza della tabella, come
consigliato da alcuni, questa
sarà ripartita tra le diverse cel-
le, in parti più o meno uguali e
sarà quindi modificata dal
contenuto inserito (immagine
o testo).
La larghezza di una riga
coincide sempre con la lar-
ghezza della tabella o con la
somma delle larghezze specifi-
cate per le celle che la com-
pongono. Non esiste modo per
27/88
definire la larghezza della riga
in quanto tale.
Nel caso in cui tale somma
superasse la larghezza speci-
ficata in origine per la tabella,
quest'ultima si allargherà per
adattarsi (qualsiasi cosa defi-
nito a livello di cella ha sem-
pre la precedenza su tutto il
resto). La più grande delle
celle di una colonna determi-
na la larghezza di tutte le altre
di quella colonna, anche se
avessimo esplicitamente in-
dicato larghezze inferiori per
le altre celle di quella colon-
na.
Nella pratica è sufficiente
indicare la larghezza di una
sola cella della colonna affin-
ché tutte le altre si adattino di
conseguenza.
Se inseriamo nella cella
un'immagine che ne supera le
dimensioni, la cella si allar-
gherà automaticamente in mo-
do da contenere l'immagine in-
serita e farà allargare tutte le
celle che corrispondono alla
stessa colonna.
L'allargamento porterà
pressione sulle celle circo-
stanti riducendone le dimen-
sioni originali, se tuttavia an-
che queste contenessero
un'immagine, incomprimibile
per definizione, l'intera tabella
deborderebbe oltre i limiti
consentiti.
Le immagini hanno una for-
tissima influenza sul compor-
tamento delle tabelle tanto
che per lungo tempo i proget-
tisti Web le hanno usate come
strumento di costruzione del-
la pagina, ben sapendo che
un'immagine non può essere
né allungata né compressa e
che perciò la cella in cui essa è
contenuta rimarrà stabile
qualsiasi cosa succeda al re-
sto della tabella.
Il trucco delle immagini
spaziatrici
Il trucco classico consiste
nel prendere un'immagine di
colore invisibile larga un pixel
e quindi dimensionarla (altez-
za e larghezza) all'interno del-
la cella di cui vogliamo bloc-
care le dimensioni.
Di solito viene inserita nel-
l'ultima riga della tabella, che
per il resto rimane vuota, così
da condizionare tutte le altre
celle presenti nella stessa co-
lonna.
Lo stesso trucco può essere
ripetuto su più celle fino a
bloccare l'intera tabella.  dell'ultima cella dell'ultima riga il browser sa esattamente come sia composta la tabella
Un futuro ingegnere
col Pinguino
nel cuore
Ventisei anni, romano, Marco
Leli appare un giorno nella
nostra community per fornire il
suo commento al nostro corso
per diventare Webmaster.
Lettore “affezionato” di PC
Open (ci segue dal 1999),
partecipa alla vita della
community da spettatore per un
po’, finchè decide di gettarsi
nella mischia...e noi lo
acciuffiamo subito: “che ne dici
di fare quattro chiacchiere con
noi per raccontarci la tua
esperienza?”. All’inizio una
certa ritrosia, poi la tentazione
di apparire “sulla rivista di
informatica preferita” ha la
meglio.
Marco è iscritto alla facoltà di
Ingegneria Informatica
dell’università capitolina La
Sapienza ma gli studi vivono
una fase di stallo “L’università
stava andando un po’ per le
lunghe, quindi ho iniziato a
pensare cosa sarebbe stato
meglio fare e a guardarmi un
po’ in giro; è capitata
l’occasione e ho deciso di
frequentare un corso promosso
dalla Regione e dalla Comunità
europea per Progettista di
applicazioni multimediali”. Qui
Marco prende dimestichezza e
approfondisce gli argomenti
che si ritrovano anche nel
programma del nostro corso:
HTML, Javascript, Dreamweaver
e Flash, fondamenti di
programmazione e ASP. Il corso
termina con uno stage di cento
ore presso una giovane azienda
che sviluppa siti Internet.
“All’inizio mi sono occupato
principalmente dello sviluppo in
HTML, ma poi dall’azienda mi
HTML costruisce le tabelle secondo una sequenza lineare, come se fosse una
telescrivente: una cella dopo l'altra sino a completare la riga e quindi ritorna all'inizio
della riga successiva e riprende la costruzione fino a terminare la tabella. Solo alla fine
3a lezione
veniva richiesta la conoscenza
di PHP/Mysql. Grazie al loro
aiuto (e pazienza) e un po’ di
applicazione, ho iniziato a
impratichirmi con questo
ambiente di sviluppo”. E anche
se Marco consiglia di non
affezionarsi mai a nessuna
tecnologia e di usare, volta per
volta, quella più utile alle
esigenze, si capisce da quello
che dice che il suo cuore batte
per il Pinguino. “Linux è
indubbiamente un sistema
difficile da usare, non è
intuitivo come l’ambiente
Windows, crea più problemi
quando si devono utilizzare
periferiche, i driver non sono
sempre facili da trovare, ma
indubbiamente la filosofia che
sta dietro il sistema ha un
grande fascino e poi c’è il
vantaggio che è gratuito”.
E secondo Marco, su cosa vale
la pena di investire?
“Approfondire la tecnologia
Flash, che mi sembra abbia
grosse potenzialità: è
abbastanza portabile, gira sia
sotto Windows sia sotto Linux e
ha un buon supporto per la
programmazione: credo che
potrebbe essere piuttosto
richiesta dal mercato”.
Sogni nel cassetto, programmi
per il futuro? “Non ho
particolari progetti” risponde
Marco “Spero di avere
l’opportunità di approfondire il
settore di cui mi sto occupando
adesso: seguire lo sviluppo
delle tecnologie per il
commercio elettronico, magari
riprendere l’università e intanto
prendermi la laurea di primo
livello”. Daniela Dirceo
 3a lezione

 Questo genere di artificio
(definito shim inglese cioè zep-
pa oppure immagine spaziatri-
ce in italiano) è tutt'ora in uso,
ma presenta l'inconveniente
d'inserire elementi estranei
nella tabella e di perdere l'effi-
cacia qualora il navigatore
avesse disattivato la visualiz-
zazione delle immagini sul
proprio browser.
L'uso delle immagini spazia-
trici è considerato peccato
grave dai puristi, ma è sicura-
mente utile in alcune circo-
stanze.
La flessibilità delle tabelle,
se conosciuta e governata,
può trasformarsi in un pregio
progettuale portando a quello
che viene definito progetto
"fluido" o "liquido", vale a dire
una struttura della pagina ca-
pace di adattarsi alla risolu-
zione del monitor su cui è vi-
sualizzata.
La regola generale è co-
munque di mantenere più
semplici possibili le tabelle
strutturali, usandole solo do-
ve necessario ed evitando, se
possibile, di nidificarne, ossia
di innestare una tabella den-
tro l'altra. Una pagina compo-
sta di tabelle molto comples-
se e incapsulate l'una nell'al-
tra finisce per essere pesante
e per richiedere tempo prima
di poter essere elaborata e vi-
sualizzata dal browser, senza
contare le possibilità di erro-
re, che si moltiplicano al cre-
scere del numero di tag utiliz-
zati. 

Come creare una tabella

Abbiamo costruito una tabella composta da due righe di tre celle
ciascuna assegnando alla tabella nel suo complesso una larghezza
interna di 400 pixel (incluso il bordo).
Fase 1: la tabella è completamente vuota e lo spazio viene ripartito
equamente tra le tre celle che diventano ciascuna di 130 pixel.
La loro somma ci dà 390 pixel, gli altri 10 pixel che mancano per
arrivare a 400 sono utilizzati per il bordo della tabella, largo 1 pixel di
default e calcolato su entrambi i lati, e per la spaziatura tra le celle,
larga 2 pixel di default, e riportata quattro volte per spaziare 3 celle,
per un totale di 8 pixel.
Regola: in mancanza di contenuto e d'indicazioni per le singole
celle, il browser cerca di ripartire equamente lo spazio assegnato
alla tabella nelle varie colonne.
Fase 2: inseriamo il testo e notiamo come questo influenza la
distribuzione naturale degli spazi. La seconda cella della prima riga si
allarga per adattarsi a una scritta che è più lunga delle altre due e
determina anche l'allargamento automatico della cella seguente che
appartiene alla stessa colonna. Adesso la ripartizione degli spazi,
attuata automaticamente dal browser è di 120, 150 e 120 pixel. La
seconda colonna si è allargata a spese delle altre due. La tabella
mantiene le sue dimensioni originali.
Regola: il testo inserito nelle celle ne influenza la dimensione
originale a meno di aver indicato una larghezza fissa per la singola
cella, in aggiunta alle indicazioni di larghezza della tabella.
Lo spazio viene ripartito in modo diverso tra le celle in funzione
del contenuto e si applica in modo uniforme a tutte le celle di
quella colonna, mantenendo invariata la larghezza complessiva
della tabella.
seconda colonna, che in origine era la più larga avendo anche il testo
più lungo, ma per la quale non abbiamo indicato nessuna larghezza
minima, si restringe al punto di mandare il testo a capo e determinare
in tal modo una maggiore altezza per tutta la prima riga. La tabella
mantiene comunque le sue dimensioni originali e la ripartizione degli
spazi adesso è: 146, 61 e 183 pixel (179 dell'immagine più i quattro
di contorno).
Regola: un’immagine grafica ha sempre priorità rispetto al testo e
rispetto a qualsiasi impostazione di larghezza definita per le
singole celle o per la tabella nel suo complesso. La presenza di
un'immagine determina in modo immutabile la dimensione della
cella, della riga e della colonna a cui questa appartiene.
Fase 5: aggiungiamo la stessa immagine anche nella seconda cella
della seconda riga il che determina l'espansione della seconda
colonna per intero alle dimensioni dell'immagine e il restringimento
della prima colonna ai minimi termini, però insufficienti a mantenere le
dimensioni originali della tabella che deborda oltre il limite imposto di
400 pixel portandoci alla una situazione: 43, 183 e 183 pixel.
Regola: la somma delle larghezze imposte alle singole celle può
superare la larghezza massima definita per la tabella nel qual
caso la tabella si allargherà per adattarsi alle nuove misure.
La presenza di elementi grafici in una cella ne blocca le
dimensioni impedendone la compressione.

Fase 3: forziamo la dimensione della prima cella della prima riga

indicando, a livello di cella singola, una larghezza di 200 pixel (a cui si
aggiungono i 4 pixel del bordo destro e sinistro all'esterno).
La cella e la relativa colonna si allargano indipendentemente dal
contenuto e costringono le altre due celle a restringersi. Queste però si
restringono diversamente in funzione del testo contenuto. La
situazione finale è la seguente: 204, 104 e 82 pixel.

Regola: l'impostazione di larghezza definita a livello di singola

cella ha la priorità sulle impostazioni di larghezza della tabella e
sul testo eventualmente contenuto. Basta impostare la larghezza
di una sola cella per modificare l'intera colonna a cui appartiene.

Fase 4: aggiungiamo un'immagine larga 179 pixel e alta 56 pixel nella

terza cella della seconda riga. Le altre due colonne si restringono, ma
in modo diverso. La prima colonna, per la quale avevamo specificato
una larghezza obbligata di 200 pixel si riduce a 146 pixel, mentre la

28/88
 3a lezione

2 Progettare layout fluidi o statici

na volta creata la nostra cio è comunque sempre più dif-

U pagina vergine siamo pron-

ti a costruire la struttura di
layout in cui inserire successi-
vamente i contenuti.
Abbiamo scelto le tabelle co-
me strumento d'impaginazione
perché garantiscono maggiore
compatibilità con i diversi tipi
di browser e anche il miglior ef-
fetto estetico. A questo punto si
presentano alcune alternative.
La prima è decidere se incapsu-
lare l'intera pagina in una gran-
de tabella che poi ne conterrà
altre, oppure se ridurre al mini-
mo la quantità di tabelle pre-
senti nella pagina facendo affi-
damento sullo spontaneo alli-
neamento delle stesse tra loro e
sulla possibilità di affiancarle e
sovrapporle a paragrafi e im-
magini che fluiscano liberamen-
te nella pagina.
Il primo approccio è anche il
più diffuso perché consente un
miglior controllo degli elementi
e si presta particolarmente alla
produzione di template (pagine
modello) per un sito dinamico.
Infatti, i template di un sito di-
namico sono privi dei contenu-
ti che altrimenti sarebbero ne-
cessari per tenere al loro posto
le tabelle in una pagina a strut-
tura libera, perciò è difficile ve-
dere durante la progettazione
quale sarà il risultato finale e nel
momento di generare la pagina
in automatico prelevando i con-
tenuti dal database, si otterran-
no risultati variabili al cambiare
dei contenuti forniti.
Il secondo approccio, che
consiste nel lasciare la pagina li-
bera da una struttura generale e
incapsularne solo alcune parti,
è preferito dai puristi perché
consente di mantenere le pagi-
ne più leggere e più semplici.
Inoltre, alcuni browser delle
precedenti generazioni aveva-
fuso grazie al diffondersi dei si-
ti dinamici, i principali browser
moderni dispongono di una fun-
zione che riduce il ritardo di vi-
sualizzazione e che si chiama
"rendering progressivo".
Il programma comincia a vi-
sualizzare i primi elementi della
tabella prima di averla caricata
per intero. In tal modo, i primi
elementi di una pagina lunga e
complessa appariranno imme-
diatamente, così da riempire la
finestra video che il navigatore
sta osservando e dando l’idea
che la pagina sia disponibile per
intero. In realtà, il browser sta
ancora lavorando dietro le quin-
te per completare l'elaborazio-
ne della tabella e comporre la
porzione inferiore della pagina
così che sia pronta quando de-
cideremo di eseguire lo scrol-
ling. Di contro può succedere
che la pagina compaia inizial-
mente con un determinato as-
setto che si modifica dopo alcu-
ni secondi quando il browser ha
terminato la lettura della tabel-
la nel suo complesso. L'unico Tabella statica e dinamica: le tabelle a larghezza fissa, indicata in pixel, mantengono
accorgimento da adottare nel il proprio assetto qualsiasi sia la dimensione della finestra del browser. Perciò, nel
progettare una pagina inserita caso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie, una parte
in una tabella globale sfruttan- della tabella diventerebbe invisibile. Viceversa le tabelle a dimensione variabile,
do il rendering progressivo è di espressa in percentuale, modificano la propria ampiezza in funzione della dimensione
della finestra e hanno perciò un aspetto meno prevedibile
creare i primi elementi in modo
che non siano indipendenti dal
resto della tabella. Tipicamente relative celle (colonne) in pixel percentuali, la tabella si allar-
lo si fa creando una prima ta- oppure in percentuale. Se indi- gherà o si stringerà (compati-
bella orizzontale larga nidificata chiamo un valore in pixel la ta- bilmente con i contenuti) al va-
nella tabella primaria e larga bella resterà di quella dimen- riare della dimensione della fi-
quanto l’intera pagina che con- sione qualunque sia l'ampiezza nestra di navigazione. È anche
tenga la barra del logo e i primi della finestra disponibile per il possibile adottare una soluzio-
elementi di navigazione del sito. browser sul computer dell'u- ne mista dove solo alcune co-
Dopo di che si prosegue a tente. Nel caso invece di valori lonne abbiano una dimensione
scendere con una serie di tabel-
le che si compongano da sini-
stra a destra e dall’alto verso il Test: leggi le domande e verifica le tue risposte
basso. Qualunque sia la solu-
zione adottata, vale comunque
il criterio di ridurre le tabelle al
minimo e, in particolare, di ri-
Riepilogo dei concetti della Lezione 3

1. Perché le tabelle sono diventate lo strumento principale per

no la brutta abitudine di aspet-
tare il caricamento e l'elabora-
zione dell'intera tabella globale
prima di visualizzare la pagina.
Sezionando la pagina in tabelle
autonome, la generazione è più
rapida sia perché le prime parti
della pagina appaiono subito
mentre il browser sta ancora la-
vorando all'elaborazione delle
successive sia perché la sem-
plicità delle tabelle richiede po-
co impegno elaborativo al
browser prima della visualizza-
zione. Poiché il primo approc-
durre la nidificazione progressi-
va delle tabelle (inserimento di
una tabella in un'altra) perché
una pagina troppo complessa
richiede al browser molto tem-
po per essere elaborata e può
produrre errori inaspettati.
Fluido, statico o misto
La seconda scelta importan-
te è decidere se la struttura del-
la nostra tabella avrà dimensio-
ni fisse oppure variabili. HTML
consente infatti di specificare la
larghezza della tabella e delle
?
definire il layout delle pagine Web?
2. In che modo una tabella viene letta e costruita dal browser?
3. Che differenza esiste tra le tabelle HTML e quelle convenzionali?
4. Quali sono i tag principali di una tabella?
5. Che rapporti di priorità esistono tra le indicazioni fornite a livello
di tabella e a livello di singola cella?
6. Che cos'è il layout fluido o liquido?
7. Che cos'è una tabella nidificata?
8. Quali sono le principali regole da osservare nella progettazione di
una tabella di layout?
9. Che cosa differenzia una tabella di contenuto da una tabella di
layout?
10. Che cos'è in rendering progressivo?
(risposte a pagina 34)

29/88
 3a lezione

Tabella semplice. Una tabella si apre e si chiude con la coppia di tag <table></table>.
Ogni riga è identificata da una coppia di tag <tr></tr> (che in inglese corrisponde
all'abbreviazione di table row) e al loro interno troviamo varie celle, disposte in
sequenza, e ciascuna delimitata dalla coppia di tag <td></td> (che in inglese significa
table data). Affinché la tabella sia valida e visualizzabile deve contenere almeno una
riga che contenga almeno una cella. Le celle vuote non vengono visualizzate da alcuni
browser perciò ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbe
almeno contenere uno spazio fisso - non breaking space, ossia il simbolo &nbps.
Pagine ad assetto variabile: vediamo un esempio reale di pagina costruita
integralmente con un layout fluido. La videata 1 è larga 1.005 pixel (mintor da 1024 x
768 pixel), la 2 è larga 735 pixel e la 3 è larga 502 pixel. Qualunque siano le
dimensioni della finestra del browser, tutti gli elementi rimangono visibili. La colonna di
navigazione a sinistra ha dimensione fissa, mentre la colonna di testo e la barra
orizzontale contenente il logo e la navigazione globale sono flessibili. L'unico elemento
orizzontale che non si adatta è il banner, che naturalmente ha dimensione fissa e
scompare parzialmente quando la finestra viene ridotta alla posizione 3

 fissa, ad esempio quelle conte- cale, ma si tratta di soluzione

nenti i link di navigazione, men-
tre le altre abbiano una dimen-
sione variabile, ad esempio
quelle che contengono il testo.
Tag fondamentali
di una tabella
Qualunque sia l'impostazio-
ne progettuale, una tabella si
apre e si chiude sempre con i
tag <table> e </table> all’interno
di quali troviamo una serie di ri-
ghe delimitate dai tag <tr> e
</tr> che a loro volta contengo-
no un certo numero di celle
contrassegnate dai tag <td> e
</td>. Prendendo a prestito una
metafora dal libro "HTML 4 Tut-
to & Oltre", costruire una tabel-
la è come erigere un muro. Si
crea la base con <table> quindi
si stende il primo strato di ce-
mento con <tr> si posano diver-
si mattoncini in sequenza con
<td> e </td> dopo di che si pas-
sa al nuovo strato di cemento
con </tr> e <tr>. Il numero di ri-
ghe può variare liberamente,
ma il numero di celle deve esse-
re costante riga per riga altri-
menti sarà impossibile costrui-
re le colonne. La larghezza delle
celle non deve essere necessa-
riamente uguale, invece, sebbe-
ne sarebbe meglio che lo fosse.
Se non fosse possibile mante-
nere lo stesso numero di celle
per ogni riga. è consentito usare
speciali comandi per estendere
una cella su più colonne in oriz-
zontale o su più righe in verti-
usata di rado per le tabelle di
layout e sconsigliata anche per
le tabelle di dati, visto che si
presta a interpretazioni diverse
da parte dei browser.
Se per errore il numero di
celle presente in una riga non
corrispondesse alle altre, la ta-
bella sarà scombinata e la vi-
sualizzazione risultante sarà
confusa. Ne consegue che è dif-
ficile realizzare tabelle molto
complesse senza perderne il
controllo. I principali errori di
codifica di una pagina HTML ri-
siedono proprio nella costru-
zione delle tabelle. In particola-
re, una tabella non chiusa pro-
priamente con il tag finale </ta-
ble> può scombinare la pagina
al punto da renderla irricono-
scibile. Possono nascere pro-
blemi anche dalla mancata
chiusura dei tag interni di riga o
di cella. Fortunatamente i brow-
ser moderni dispongono di
strumenti particolari per com-
pensare la complessa gestione
delle tabelle. Internet Explorer,
ad esempio, completa automa-
ticamente una riga non chiusa
quando incontra il marcatore
d’inizio della successiva (<tr>) e
riesce anche a risolvere alcuni
dei casi di tabella non chiusa.
Più rigidi sono invece Netscape
Navigator e Opera; per tale mo-
tivo si consiglia sempre di ese-
guire un’anteprima della pagina
con uno di questi programmi
prima di rilasciarla. 
Le risposte alle domande di pag. 33
1. Consentono di controllare gli
spazi nella pagina senza
alterarne l'aspetto estetico.
Sono compatibili con
qualsiasi tipo di browser e
offrono la massima
flessibilità di configurazione,
a fronte di una certa
complessità di realizzazione.
2. In modo sequenziale,
carattere per carattere,
dall'inizio alla fine della riga
per poi ricominciare
dall'inizio della riga
successiva. Solo al termine
della lettura dell'intera
tabella il browser sa
effettivamente com'è fatta e
come debba essere
riprodotta.
3. Le tabelle HTML non hanno
colonne definibili in quanto
tali. Ciascuna colonna viene
costruita combinando in
verticale le celle di ciascuna
riga.
4. Sono tre: <table> per aprire
e chiudere la tabella <tr>
(table row) per aprire e
chiudere ciascuna riga e
<td> (table data) per aprire e
chiudere ciascuna cella.
5. Le indicazioni fornite a livello
di cella hanno sempre la
priorità su quanto definito a
livello globale di tabella.
6. Un layout basato su tabelle o
elementi di tabelle che
hanno una
larghezza definita
!
in termini percentuali
rispetto all'ampiezza
complessiva della finestra
del browser. Un layout fisso
o statico usa invece tabelle
con larghezza in pixel.
7. Una tabella costruita
all'interno della cella di
un'altra tabella.
8. Evitare una complessità
eccessiva e, particolare,
l'impiego eccessivo di tabelle
nidificate. Ricordarsi che la
larghezza di una riga coincide
sempre con la larghezza
della tabella o con la somma
delle larghezze specificate
per le celle che la
compongono e che qualsiasi
oggetto inserito in una cella
può influenzarne le
dimensioni, alterando
l'assetto complessivo della
tabella.
9. La tabella di contenuto ha
bordi visibili e talvolta anche
uno sfondo. Contiene una
serie di attributi stilistici che
servono alla corretta
gestione del testo e che non
sono necessari in una
tabella di layout.
10.La visualizzazione graduale
dei primi elementi di una
tabella prima che sia stata
letta per intero dal browser.

30/88

3 Costruire template con le tabelle di layout
efinire la struttura della
D pagina mediante l'impiego
di tabelle è una delle ope-
razioni più complesse con cui il
Webmaster e il Web designer si
devono misurare. D'altro canto
è essenziale nella costruzione
di un sito e una volta prodotto il
modello, alias template, sarà
possibile costruire numerose
pagine strutturalmente identi-
che tra loro, ma capaci di ospi-
tare contenuti diversi. A tal fine
sarà importante concepire una
struttura che sia capace di
adattarsi al variare dei conte-
nuti e sia riutilizzabile il più
possibile. Mantenere al minimo
il numero di template è un re-
quisito necessario per avere un
sito gestibile e per facilitarne la
successiva evoluzione a sito di-
namico.
Il primo passo consiste nel
decidere se incapsulare il tutto
in una singola tabella oppure
creare diverse tabelle separate
che si allineano spontaneamen-
te. A favore della prima solu-
zione gioca il completo control-
lo della struttura e delle sue di-
mensioni, a favore della secon-
da una maggiore leggerezza del-
la pagina e semplicità delle ta-
belle che porta, alla fine, a una
maggiore velocità di visualizza-
zione nel browser (per una de-
scrizione di come allineare le
tabelle rimandiamo all'articolo
Tabelle consecutive sul CD).
La seconda decisione è tra
una struttura fissa, immutabile
al variare della dimensione del
browser oppure fluida, capace
quindi di espandersi e di con-
trarsi all'unisono con la fine-
stra del navigatore. Nella prati-
ca, è raro trovare pagine fluide
in tutti i loro componenti, per-
ciò anche nel caso di un design
Le tabelle HTML prevedono due attributi
per estendere una cella in orizzontale e in
verticale creando così strutture
complesse che permettono una
distribuzione degli spazi non regolare
31/88
fluido, dovrete decidere quali
elementi mantenere stabili al
loro interno.
Pagine fisse e variabili
Il comportamento statico op-
pure fluido della tabella e delle
sue celle dipende dall'imposta-
zione di un singolo attributo:
width che può assumere valori
in pixel, perciò assoluti, oppure
valori in percentuale (da 1 a
100). Assegnando una larghez-
za percentuale all'intera tabella,
ad esempio con il tag <table
width="75%">, otterremo un og-
getto con una dimensione com-
plessiva pari al settantacinque
per cento della finestra del
browser, qualunque siano le di-
mensioni di quest'ultima. Tale
ampiezza sarà, poi, distribuita
in modo uguale tra tutte le cel-
le/colonne, salvo modificare le
dimensioni di una particolare
colonna rispetto alle altre a se-
guito dell'inserimento di testo o
immagini, come visto nell'arti-
colo precedente. Se volete con-
trollare le dimensioni percen-
tuali di una colonna rispetto al-
le altre, potete assegnarle un
valore specifico.
Di solito s'imposta la dimen-
sione della prima o dell'ultima
cella, usando sempre l'attributo
width all'interno, in questo ca-
so, del tag <td>. Ad esempio <td
witdh="30%"> imposta le di-
mensioni della cella e della re-
lativa colonna in modo che sia
il trenta per cento del totale
della tabella, nel nostro esem-
pio sarebbe il 30% del 75%. Lo
spazio restante sarà distribuito
in modo equo tra le altre colon-
ne. Il vantaggio di assegnare
una dimensione percentuale
esplicita a una delle colonne è
duplice: creare proporzioni di-
verse nelle dimensioni di cia-
scuna rispetto a quanto deter-
minato automaticamente dal
browser e garantirne la stabilità
anche quando inseriamo testo
o altri elementi di contenuto.
Infatti, una tabella che abbia
una larghezza impostata per al-
meno una delle sue colonne,
manterrà il suo assetto anche
nel momento in cui inseriamo
testo nelle varie colonne. Qua-
lora il testo fosse troppo lungo
per essere contenuto nella cel-
la, il browser lo manderebbe
automaticamente a capo allun-
gando in verticale la cella e tut-
PC Open 35
Prendiamo la struttura tipica di una delle pagine del corso sul CD e analizziamo le
tabelle che la compongono. Notiamo una grande tabella generale che contiene l'intera
pagina all'interno della quale si sviluppano nove tabelle nidificate suddivise in cinque
aree logiche distinte
ta la riga a cui essa appartiene.
Diversa è invece la situazione
nel caso in cui venga inserita
un'immagine in una cella con
dimensionamento percentuale.
Infatti l'immagine, essendo in-
comprimibile, obbligherà la cel-
la a mantenere una larghezza al-
meno pari alla propria o supe-
riore (trovate un dettaglio
esemplificativo di questi pas-
saggi nell'articolo Dimensiona-
re tabelle e celle sul CD).
Soluzioni miste
Cosa succede se nella nostra
tabella fluida volessimo blocca-
re una colonna? Dovremmo im-
postarne le dimensioni in pixel
e lasciare libere le altre oppure
impostarle in percentuale. An-
che in questo caso sarà suffi-
ciente impostare la larghezza di
una sola delle celle che com-
pongono la colonna a dimen-
sione fissa. Ad esempio il tag
<td width="120"> inserito nella
cella della prima o dell'ultima
riga, imposterà la larghezza del-
l'intera colonna a 120 pixel e fis-
serà anche la dimensione com-
plessiva della tabella. Ricordia-
mo un concetto importante del
dimensionamento fisso: la mi-
sura espressa in pixel indica la
larghezza massima della colon-
na. Perciò il browser non la
espanderà anche quando la fi-
nestra si allarga, ma non è vero
il contrario.
Come già visto nell'assegna-
zione delle priorità dimensio-
nali in una tabella fissa (vedi
l'articolo Stabilità delle di-
mensioni), è sempre possibile
restringere la larghezza di una
cella/colonna a dimensione fis-
3a lezione
sa quando imposto dal compri-
mersi della finestra o dall'e-
spandersi del contenuto nelle
colonne circostanti. L'unico
modo per garantire che una co-
lonna rimanga davvero blocca-
ta sia in espansione sia in com-
pressione (una caratteristica
necessaria ad esempio per una
barra di navigazione) consiste
nell'inserire un'immagine di lar-
ghezza esattamente identica al-
la larghezza della colonna. Di
solito l'immagine trova posto in
una cella in fondo alla colonna,
collocata all'interno di una riga
altrimenti vuota così da non es-
sere visibile al navigatore. Allo
scopo si usa di solito di un'im-
magine trasparente lunga e lar-
ga un pixel, il cosiddetto spa-
ziatore o immagine spaziatrice
(shim).
E fin qui sembrerebbe tutto
chiaro: per produrre un sito
con pagine fluide basta blocca-
re le colonne che contengono
elementi di navigazione e la-
sciare libere quelle che invece
ospitano il contenuto (testo e
immagini). In tal modo il conte-
nuto utilizzerà tutto lo spazio
disponibile nella finestra del
browser e, al contempo, il navi-
gatore non sarà sorpreso da
elementi di navigazione che
continuano a cambiare aspetto
(per un dettaglio su come co-
struire pagine di questo tipo
vedi l'articolo Dimensionare
tabelle con celle miste sul CD).
Purtroppo, però, le tabelle
ad assetto misto (fluido e stati-
co) presentano alcune stranez-
ze con cui bisogna fare i conti.
Innanzi tutto i browser più vec-
chi non rispettano la dimensio- 
 3a lezione

produrre l'effetto desiderato e derarle come un livello inter-

bisogna creare forme più com- medio tra la tabella e la singola
plesse mediante l'estensione di cella. HTML è costruito secon-
celle su più righe e colonne op- do una logica di concatenazio-
pure mediante l'innesto di una ne gerarchica degli attributi ta-
tabella nell'altra. L'estensione le per cui gli attributi dell'entità
di una cella su più righe o co- maggiore si trasferiscono alle
lonne è un'operazione poco in- entità minori salvo che queste
tuitiva e delicata perché i brow- dispongano di attributi propri
ser la interpretano a modo loro. che hanno priorità rispetto a
I puristi consigliano di evitarla, quelli ereditati dal livello supe-
ma esistono diverse situazioni riore.
in cui non è possibile farne a Come abbiamo visto, una lar-
meno, perciò tanto vale padro- ghezza impostata a livello di ta-
Ecco la stessa pagina da cui abbiamo rimosso tutto il contenuto di testo. Le cinque neggiarla. L'operazione si basa bella si divide equamente tra le
zone diventano più evidenti. Sono interamente comprese in una tabella globale che ne sull'impiego di due attributi del varie celle a meno che queste
ospita 9 nidificate. La zona 1 contiene il logo (che occupa la prima tabella nidificata al tag <td>, ossia colspan per indi- non abbiamo indicazioni di-
primo livello) e la navigazione globale del CD (che occupa la seconda tabella nidificata care su quante colonne si deb- mensionali proprie e queste ul-
al secondo livello). La zona 2 contiene la navigazione gerarchica e utilizza due tabelle
nidificate una nell'altra. La zona 3 ospita i contenuti con due tabelle nidificate ba estendere la cella in oriz- time vengano superate da even-
consecutive. La zona 4 contiene la navigazione locale della lezione e usa altre due zontale e rowspan per indicare tuali assestamenti dimensiona-
tabelle nidificate consecutive. La zona 5 contiene il riferimento ai credits e usa una su quante righe debba esten- li determinati dall'inserimento
tabella larga quanto l'intera pagina dersi in verticale (vedi sul CD di contenuto nella cella stessa.
l'articolo dettagliato Creare ta- È la logica dell'assegnare prio-
 ne massima imposta per le co- glio dover lavorare su una sola belle complesse). rità agli attributi in cascata. Una
lonne a larghezza fissa inserite riga che doverne cambiare tan- È più facile capire il funzio- logica che vedremo utilizzata
in una tabella fluida e quando la te. namento di questi due attributi anche dai Cascading Style Sheet
finestra viene allargata finisce Finora abbiamo parlato solo se li consideriamo capaci di (fogli di stile in cascata). Le cel-
per espandersi anche la colon- di larghezza di tabelle e celle, unire due celle adiacenti per le espanse, quindi, hanno attri-
na che dovrebbe restare bloc- ma i tag <table> e <td> consen- formarne una sola. In effetti buti tra loro pari, perciò una
cata. Persino l'immagine spa- tono di specificarne anche l'al- questa è esattamente l'opera- cella espansa può influenzarne
ziatrice non ci aiuta in questo tezza minima che anche in que- zione compiuta da alcuni editor un'altra e avere la meglio sugli
caso perché essa garantisce sto caso può essere espressa in visuali nel momento in cui attributi dimensionali della ta-
che la colonna non si restringa pixel oppure in percentuale ri- chiediamo di estendere una cel- bella nel suo complesso. Sono
al di sotto della propria dimen- spetto all'altezza della finestra la in orizzontale o verticale. Se anche capaci d'influenzare il
sione, ma non può impedirle di del browser. È un attributo usa- invece lavoriamo a mano, dob- comportamento dimensionale
allargarsi. to di rado poiché la norma è la- biamo occuparci di cancellare delle righe e colonne che rac-
Il problema è stato ormai ri- sciare che la tabella si allunghi personalmente la cella contin- chiudono a condizione che
solto dalle versioni recenti di e si accorci da sola in funzione gua nel cui spazio vogliamo queste non contengano indica-
browser, ma se pensate che i del contenuto inserito, tuttavia estendere la cella espansa. In zioni dimensionali proprie. Per
vostri utenti usino browser di è importante sapere che a dif- pratica quando aggiungiamo avere un'idea pratica di come si
due o tre anni fa, bisogna ricor- ferenza della larghezza, dove si colspan o rowspan entro una comportano, rimandiamo al-
rere a un altro trucco: imposta- indica un valore massimo, qui cella esistente, questa si allar- l'articolo Creare tabelle com-
re la larghezza di una delle co- viene sempre indicato un valo- gherà ad occupare lo spazio plesse sul CD).
lonne variabili al 100% in modo re minimo, al di sotto del quale della cella adiacente facendo
che la somma delle percentuali il browser non può scendere, scorrere tutte le celle della riga Nidificare le tabelle
superi 100. Il browser darà sem- ma che può essere incrementa- o della colonna di una posizio- Purtroppo anche l'impiego
pre a tale colonna la massima to se il contenuto nelle celle ne, scombinando la struttura di celle espanse non è suffi-
larghezza possibile "tenendo a contigue lo richieda. Indicando della tabella. Togliendo la cella ciente a coprire tutte le esigen-
bada" tutte le altre. Questo una lunghezza e una larghezza di cui abbiamo preso il posto, la ze di layout di una pagina, per-
stratagemma può servire an- pari al 100%, la tabella occu- tabella si rimette a posto. ciò esiste un ulteriore livello di
che a definire una pagina che perà sempre il massimo dello Oltre a consentire maggiore complessità a cui ricorrere, che
abbia solo colonne a larghezza spazio disponibile nella fine- flessibilità estetica nella ripro- consiste nell'inserire una tabel-
fissa eccetto una, quella dedi- stra. Non esiste un'altezza di ri- duzione degli spazi, le celle la nell'altra. Di solito è sconsi-
cata al testo, e che quest'ultima ga perché in realtà quest'ultima espanse svolgono anche una gliato spingersi oltre ai tre o
si estenda a garantire alla co- eredita l'altezza della cella più funzione di controllo sulla por- quattro livelli di nidificazione
lonna variabile sempre la mas- alta al suo interno. Anche in zione di tabella a cui apparten- per non mandare in crisi il
sima ampiezza possibile. Avre- questo caso, se dovete indicare gono. Ad esempio, una cella browser che trova sempre diffi-
te notato che insistiamo sull'as- un valore, fatelo su una cella espansa in orizzontale riunisce cile interpretare tabelle nidifi-
segnare la larghezza sempre a soltanto, la prima o l'ultima del- diverse colonne in modo che cate. Alcuni consigliano di evi-
una sola cella della colonna, i la riga. queste definiscano le proprie tarle del tutto, il che è pratica-
motivi sono tre: è inutile speci- ampiezze in relazione al rag- mente impossibile se non nelle
ficarlo per le altre celle visto Template con struttura gruppamento prima ancora pagine più elementari. Il consi-
che queste si adattano automa- complessa che in relazione alla tabella nel glio è di ridurle al minimo e di
ticamente facendoci risparmia- Nella definizione del layout suo insieme. Le celle estese di- nidificare tabelle semplici, pos-
re codice e mantenendo la pa- di una pagina è raro trovarsi ventano quindi anche uno stru- sibilmente con dimensioni fisse
gina più leggera; nelle tabelle con le strutture molto regolari mento d'impaginazione, ma (in pixel). Nidificare significa
complesse è facile perdere il fi- consentite dalle tabelle sempli- purtroppo risultano persino inserire un'intera tabella all'in-
lo e assegnare dimensioni di- ci con un numero uniforme di più incostanti nel comporta- terno della cella di una tabella
verse a celle della stessa colon- celle per ciascuna riga. Anche mento rispetto alle celle singo- esistente, seguendo le stesse
na; in caso di modifica delle di- ricorrendo a tabelle multiple le. Un criterio generale che può regole di costruzione usate per
mensioni della tabella, è me- consecutive, non si riesce a ri- aiutare a orientarsi è di consi- le tabelle normali. Un listato

32/88

Per comodità qui abbiamo attivato la visualizzazione dei bordi della tabella di layout
globale. Riconosciamo visivamente la distribuzione delle righe e delle celle che la
compongono
con tabelle nidificate diventa
molto complesso e difficile da
decifrare se non a occhi molto
esperti.
Cerchiamo di capire le regole
fondamentali. Le informazioni
fornite fin qui valgono sia per le
tabelle di layout sia per le ta-
belle di contenuto, ma quando
si entra nel dominio delle tabel-
le nidificate ci troviamo unica-
mente nel dominio del layout,
perciò introduciamo per prima
cosa alcuni accorgimenti che
sono tipici di questo ambiente.
A differenza di una tabella di
contenuto, le tabelle di layout
sono invisibili poiché non con-
tribuiscono all'informazione
della pagina, ma servono uni-
camente per fissare le posizioni
dei vari elementi. Ne consegue
che devono essere invisibili, il
che richiede l'impostazione
uniforme di tre attributi: bor-
der="0" per nascondere i bordi
(li si può tenere visibili come
aiuto nella fase di progettazio-
ne, per poi rimuoverli alla fine),
cellpadding="0" per azzerare la
spaziatura interna alla cella e
cellspacing="0" per azzerare la
spaziatura tra le celle. Di de-
fault il browser assegna un bor-
do di un pixel e una spaziatura
interna ed esterna di 2 pixel
per lato a ciascuna cella, perciò
è importante ricordarsi di di-
sattivare questi tre elementi
prima di cominciare a costruire
la tabella di layout.
Si comincia sempre col defi-
nire le dimensioni della tabella
generale che conterrà l'intera
pagina oppure una porzione di
questa e poi la si suddivide in
colonne. La seconda fase con-
siste nel dimensionare le tabel-
le nidificate e le colonne di que-
ste ultime, una per una. Spesso
dovrete ricorrere alle immagini
spaziatrici trasparenti per ga-
rantire la stabilità degli elemen-
ti della pagina, ma si possono
usare allo scopo anche elemen-
ti grafici visibili, che possibil-
33/88
mente facciano già parte del
progetto grafico della pagina.
La generazione di tabelle nidifi-
cate è semplificata enorme-
mente dall'impiego di editor vi-
suali che consentono di dise-
gnare la pagina col mouse su un
foglio bianco e quindi generano
in automatico tutte le tabelle
necessarie. Rientrano in que-
sta categoria Dreamweaver
MX e Fireworks MX, GoLive
6.0, FrontPage 2002, Namo We-
beditor, Hot Metal Pro.
Ciascuno segue un approc-
cio diverso e genera tabelle più
o meno efficienti. Namo si di-
stingue per il fatto di realizzare
un tracciato provvisorio della
pagina, modificabile in tutti i
suoi elementi, ma nel quale è
già possibile inserire contenuti
per avere un'idea dell'aspetto fi-
nale della pagina prima di pro-
durre il codice HTML vero e
proprio. Anche Fireworks si
comporta in modo analogo,
con l'aggiunta di conservare
sempre l'originale modificabile
del progetto e quindi di poter
ripetere la generazione del-
l'HTML quante volte si vuole,
per poi darlo in pasto a
Dreamweaver MX. Quest'ulti-
mo dispone di una funzione
propria di generazione grafica
del layout che produce il codi-
ce immediatamente, ma per-
mette comunque di modificare
visualmente gli elementi già ge-
nerati (per una prova completa
vedi Macromedia Dreamwea-
ver MX, la nave scuola del
Web design sul CD).
Discorso analogo per GoLive
6.0 che trasforma la generazio-
ne della pagina Web in una vera
e propria operazione di dise-
gno: c'è una tela bianca con
una griglia di riferimento su cui
collocare qualsiasi tipo di og-
getto. Ogni elemento rimane
modificabile e la generazione o
rigenerazione del codice HTML
è immediata (vedi Adobe GoLi-
ve 6.0 maestro di tabelle sul
3a lezione
pagina mantenga la
propria larghezza e
struttura. A sua volta
include una delle altre
tabelle nidificate che
contiene le voci di na-
vigazione globale (ho-
me, indice, corsi, ecce-
tera). La seconda area
è composta da due ta-
belle, una nell'altra che
si appoggiano sponta-
neamente sotto la ta-
bella del logo e che
ospitano la navigazio-
ne del CD. La terza
area è composta da
due tabelle indipen-
denti, collocate una
sotto l'altra, che con-
Ecco la stessa pagina visualizzata secondo la tengono il testo e le
struttura del codice HTML della tabella principale. immagini della pagina
Notiamo che si compone di cinque righe, tre delle oltre che un elemento
quali contengono a loro volta una o più tabelle di navigazione locale
nidificate. Proviamo ad aprire la prima riga e
scopriamo che contiene una sola cella in cui trova (Precedente – Prossi-
posto la prima tabella, quella che contiene il logo. mo). La quarta area
Quest'ultima a sua volta si compone di tre righe contiene altre due ta-
nella seconda della quale troviamo un'altra tabella belle che elencano tut-
nidificata, che contiene la navigazione globale ti i link di una partico-
lare lezione. La quinta
CD). FrontPage 2002 genera im- area contiene semplicemente
mediatamente il codice e offre una riga di chiusura.
possibilità di modifica sugli ele- Tutte e cinque le aree vengo-
menti essenziali (ne parleremo no tenute al loro posto e collo-
nella prossima lezione). In cate reciprocamente dalla ta-
mancanza di strumenti visuali, bella principale che vediamo
la costruzione del layout passa schematizzata in un grafico ge-
per un lungo processo di codi- nerato con GoLive. L'area 1 oc-
fica dei vari elementi, partendo cupa l'unica cella che compone
da dimensioni tracciate in anti- la prima riga della tabella. La
cipo su un foglio di carta o an- seconda riga contiene una ta-
cor meglio su una stampa del bella invisibile che serve da
progetto grafico della pagina. spaziatore tra il logo e il resto
della pagina e che a sua volta
Un esempio di tabelle ospita tre celle con immagini
nidificate spaziatrici invisibili che ne
A titolo di esempio riportia- bloccano le dimensioni impo-
mo la struttura di tabelle nidifi- stando la larghezza delle tre co-
cate usata per le pagine interne lonne successive che ospitano
del nostro corso su CD. Vedia- le aree 2, 3 e 4 composte da al-
mo una tabella generale, che trettante celle contigue nella
avvolge tutta la pagina, all'in- terza riga. La riga quattro con-
terno della quale sono state in- tiene semplicemente la linea
serite otto tabelle nidificate: blu di chiusura e la riga cinque
una espressamente dedicata al corrisponde all'area 5 nel no-
testo e ai contenuti informativi, stro schema, quella che contie-
le altre riservate agli elementi ne il link alla pagina dei credits.
di navigazione e alla barra oriz- Benché possa sembrare
zontale che contiene il logo. complessa, questa è una pagina
Il modello di pagina è quello abbastanza comune in un sito e
classico a quattro pannelli de- sicuramente è meno articolata
scritto nella seconda lezione di una home page. Per vedere
(vedi l'articolo Impostare gli come è stata costruita riman-
spazi del canovaccio sul CD). diamo agli articoli nel CD: Ta-
Osservando la pagina senza belle nidificate in cascata, Ta-
contenuti notiamo che le otto belle nidificate complesse e
tabelle nidificate si dividono in Tabelle nidificate consecutive.
cinque aree principali. La prima Rimandiamo invece alla prossi-
è la tabella che contiene la bar- ma lezione per esaminare gli
ra orizzontale del logo, indi- aspetti delle tabelle in quanto
spensabile per garantire che la elementi di contenuto. 

4 Namo WebEditor 5, per siti statici professionali
onostante la sua matrice
N coreana, questo software
ha già conquistato una di-
screta popolarità nel mondo
dei Webdesigner grazie al co-
sto ridotto, alla semplicità d'in-
terfaccia e alla precisione del
suo ambiente di sviluppo vi-
suale. È una soluzione valida
per chi voglia evolvere da un
editor basato sul testo verso
un approccio visuale capace di
offrire le principali funzioni
professionali a cui è già abitua-
to. Offre un buon compromes-
so di funzioni per chi voglia ge-
stire tutte le componenti del si-
to, dalle pagine agli elementi
grafici e alle animazioni. Il pro-
gramma offre strumenti per la
generazione di tutti gli elemen-
ti grafici di supporto a benefi-
cio dei Webmaster che non sia-
no dotati del tocco artistico.
Pregevole in questo senso la
raccolta di clip art e di siti pre-
configurati abbinata al pro-
gramma.
Il programma è concepito
per l'impiego immediato anche
senza lettura del manuale. Le
opzioni sono state ridotte al-
l'essenziale e i parametri di la-
voro sono impostati per de-
fault ai valori che si reputano
idonei per la maggior parte dei
siti. Il suo ambiente grafico è
ottimo per la generazione rapi-
da di prototipi di pagina e di si-
to. Il progettista trova infatti
un'interfaccia completamente
grafica per "disegnare" gli spa-
zi della pagina (layout) e quin-
di generare in automatico il co-
dice della tabella che per tra-
durre tale layout in HTML. La
generazione del codice avviene
solo su comando, una volta
che il disegno della pagina è
completo. Fino a quel momen-
to, qualsiasi elemento può es-
sere modificato, spostato e ri-
dimensionato ed è possibile in-
serire i contenuti finali negli
spazi (testo e immagini) per
osservare quale sia il risultato
finale prima di partire con la
codifica HTML automatica che
appare pulita e senza sorprese.
Questa funzione di design inte-
rattivo non offre la potenza che
si trova in Dreamweaver e Go-
Live, ma in compenso è utiliz-
zabile in pochi minuti e può
soddisfare la gran parte delle
situazioni. Il corredo di funzio-
nalità di Namo WebEditor offre
34/88
La vista HTML mostra il codice originale della pagina e consente di modificarlo
in diretta come qualsiasi altro editor testuale. Il programma evidenzia i tag e i
relativi attributi differenziandoli dal testo e numera le righe
Caratteristiche
Sito produttore: www.namo.com
Sito distributore: www.questar.it
Costo licenza: 199,89 euro, upgrade 99,90 euro, versione "Education"
99,90 euro
Requisiti: Windows 98, SE, ME, NT 4, 2000, XP
un livello intermedio interes-
sante per chi è stanco di lavo-
rare con un semplice editor
HTML di tipo testuale, ma non
è pronto per il passaggio diret-
to a Dreamweaver o GoLive e
non si fida del codice generato
in automatico da FrontPage.
Tre modalità di lavoro
Il programma offre due am-
bienti di lavoro primari: la fine-
stra HTML che mostra il codice
nella sua versione integrale e la
vista Modifica che mostra una
sorta di anteprima grafica della
pagina su cui è possibile inter-
venire direttamente usando
mouse, icone e menu. Alla vista
Modifica è possibile aggiunge-
re la modalità Layout per dise-
gnare a mano libera i contorni
degli spazi che vogliamo creare
nella pagina per poi lasciare al
programma la generazione au-
tomatica delle tabelle che li
conterranno.
Oltre che in fase di progetta-
zione, la vista Modifica risulta
comoda per aggiungere, modi-
ficare e aggiornare qualsiasi
elemento della pagina. Offre
strumenti rapidi per interveni-
re su testo, immagini e tabelle,
osservando immediatamente i
risultati. Qualsiasi operazione
eseguita in modalità grafica si
trasforma in una modifica se-
quenza del codice HTML che
può essere riesaminato entran-
do in vista HTML.
In tale vista, appaiono evi-
denziati con un colore diverso
tutti tag e i relativi attributi,
inoltre il programma numera
automaticamente le righe e le
manda a capo con un soft wrap
(senza aggiungere un ritorno a
capo forzato) per facilitarne la
lettura. È possibile inserire tag
in automatico cliccando sulle
relative icone oppure selezio-
nando le rispettive voci di me-
nu. Non troviamo invece le fun-
zioni di completamento e cor-
rezione immediata del tag co-
me negli editor professionali,
ma per lo meno il WebEditor
evidenzia eventuali tag incom-
pleti. Consideriamola una vista
di complemento all'editing vi-
suale, utile per la produzione di
siti statici, ma non per lo svi-
luppo di siti dinamici, dove la
codifica manuale è preponde-
rante e dove servono anche
strumenti per sveltire la scrit-
tura nei vari linguaggi di scrip-
ting e dove la digitazione ma-
nuale deve raggiungere un ele-
vato livello di precisione e ve-
locità.
Namo WebEditor fornisce
una serie di script già pronti,
da configurare mediante wi-
zard, per realizzare gli effetti
più comuni. Non offre tuttavia
strumenti mirati a chi debba
3a lezione
Identikit

Namo WebEditor è uno dei più
popolari editor visuali in
circolazione. Offre una buona
miscela di funzioni orientate
soprattutto alla progettazione,
alla pubblicazione e
manutenzione rapida di un sito
statico. Include tutte le funzioni
necessarie al Webmaster per
coprire anche la componente di
design. Indicato per progetti di
media complessità e per chi vuole
evolvere da un semplice editor a
base testo verso un ambiente
visuale economico e facile da
imparare.

Pro
- Interfaccia semplice ed efficace
- Ottima palestra formativa
- La vista di layout consente la
produzione istantanea di
prototipi
- Integra le componenti
necessarie per produrre gli
elementi grafici del sito
- Include una gestione integrata
del sito e delle sue risorse
- Genera in automatico un HTML
corretto

Contro
- Manca un editor specifico per i
CSS
- Scarso supporto per i linguaggi
di scripting
- Poco efficiente per la produzione
di siti dinamici
scrivere script da zero. A que-
sto scopo è perciò necessario
affiancare altri programmi spe-
cializzati come HomeSite op-
pure uno dei tanti editor gra-
tuiti, come quello che abbiamo
scelto per il nostro corso:
HTML-Kit. Sono invece veloci
ed efficaci invece i suoi stru-
menti di controllo e ripulitura
del codice già scritto. I fogli di
stile sono supportati, sebbene
manchi un editor dedicato alla
loro gestione. Il supporto al-
l'HTML dinamico è abbastanza
buono. Buone anche le funzio-
ni di controllo del sito nel suo
complesso: il Gestore Risorse
tiene traccia dei vari elementi
disponibili: pulsanti, set di co-
lori, stili, eccetera, mentre il
Gestore Siti aiuta a tener traccia
dei file che compongono un de-
terminato sito e della struttura
di navigazione corrisponden-

te. Da qui è possibile eseguire
alcune operazioni che si esten-
dono all'intero sito come la ri-
cerca e sostituzione di testo, il
controllo del codice, la verifica
e correzione guidata dei colle-
gamenti interrotti, la conver-
sione globale dei nomi di file in
lettere tutte minuscole, la pub-
blicazione in remoto mediante
protocollo FTP. Nella confezio-
ne del prodotto sono incluse
anche tre utility: Namo Captu-
re per catturare le immagini a
video, Namo GIF Animator per
creare GIF animate e Namo Sli-
cer per suddividere immagini
troppo grandi in modo che sia-
no visualizzate progressiva-
mente all'interno di una pagina,
5 L’iter per registrare un dominio
uno dei business più pro-
È fittevoli della Rete che ha
tenuto botta nonostante la
crisi della new economy. Non a
caso se su Yahoo si cerca l’e-
lenco delle aziende che vendo-
no i vari .com o .it si trova un
elenco che conta quasi una cin-
quantina di nomi. Il motivo si
spiega facilmente. La vendita
di domini non comporta il tra-
sferimento di beni fisici, ma so-
lo il trasferimento di “oggetti”
digitali. Poi si porta dietro la
vendita di altri servizi e infine il
mercato continua a tirare per-
ché la vendita dei suffissi si ri-
volge indistintamente a privati
In arrivo il “.eu”
Appuntamento per l’estate 2003.
Dovrebbe essere questo il
momento del debutto per il dominio
.eu che servirà a identificare le
imprese del Vecchio Continente. Il
25 ottobre è scaduto il termine per
la presentazione delle
manifestazioni d'interesse alla
Commissione europea da parte
degli organi interessati a diventare
gestori dei domini .eu. Fra gli enti
interessati c’è anche un consorzio
italiano formato dalle authority
italiana, belga e svedese alle quali
in caso di vittoria potrebbero
aggiungersi le authority slovena e
ceca oltre a l’Isoc Europe. Per la
prima volta nella storia di Internet a
decidere chi dovrà gestire il registro
del .eu non sarà l’ICANN ma
l’Unione europea, alla quale rimarrà
la paternità del .eu, che in questo
35/88
pezzo per pezzo, pur mante-
nendone l'integrità visiva me-
diante l'impiego di una tabella.
Il programma in questo caso
genera in automatico anche la
tabella HTML che conterrà le
diverse parti dell'immagine.
Curiosa la disponibilità di
una modalità di progettazione
"i-mode" per lo sviluppo di pa-
gine visualizzabili sui telefonini
cellulari multimediali disponi-
bili in Giappone,
ma del resto si trat-
ta di un software
coreano, il che
spiega tutto. 
il corso è
(versione integrale sul CD
n. 67
dell’articolo sul CD)
e aziende. E soprattutto queste
ultime non possono ormai fare
a meno di avere una presenza
in rete. Tutto questo è testimo-
niato dalla crescita del mercato
che oggi in Italia conta 742.939
domini, una cifra che in Europa
è inferiore solo a quella dell’O-
landa 790.304 del Regno Unito
(3.635.585) e della Germania
che guida la classifica dei paesi
dell’Unione europea con
5.666.269. Nonostante il ritardo
nell’utilizzo di Internet, l’Italia
ha risposto bene all’offerta di
domini che nel corso del tempo
si è andata ampliando. Dopo i
classici .com, .net e .org e l’itali-
non seguirà il normale iter dei gTLD
(.com, .net, .org). "Creato a
garanzia della proprietà industriale
e della personalità delle realtà
aziendali, personali o pubbliche che
ne faranno richiesta – spiega Bruno
Piarulli di Register.it –, il nuovo
identificativo è destinato ad aprire
nuovi orizzonti sulle attività
commerciali, culturali e sociali del
Vecchio continente, contribuendo
alla diffusione di Internet e dell’e-
commerce in quella che, una volta
allargata, sarà la terza comunità al
mondo per numero d’individui". E
che il business sia importante lo
testimoniano gli operatori che
hanno iniziato già a raccogliere le
preregistrazioni in rete. Peccato che
la Commissione europea abbia
spiegato che le preregistrazioni
potranno partire solo quando il
futuro registro europeo sarà
operativo.
La vista Modifica è la più importante di Namo WebEditor e contiene tutte le funzioni
per la creazione e modifica visuale degli elementi nella pagina
co .it sono arrivati altri domini
come .biz, .info e .name a quali-
ficare ulteriormente la presen-
za in Rete. Il fatto che non ab-
biano avuto lo straordinario
successo dei domini generici
che hanno caratterizzato la pri-
ma fase di vita di Internet non
significa che il mercato si stia
sgonfiando. Anzi, altri domini
arriveranno, il .eu per esempio
per permettere di identificare
sempre meglio l’attività che si
vuole svolgere in rete o la pro-
venienza geografica di persone
e aziende. Ma vediamo di ap-
profondire tutti i segreti del
mondo dei domini Internet.
Il dominio è insieme all’indi-
rizzo IP il modo che ci permette
di essere individuati su Inter-
net. Si tratta di una parola (che
può essere anche l’unione di
più parole) accompagnata da
uno dei suffissi che oggi è pos-
sibile registrare. Nel caso di PC
Open, per esempio, parliamo di
pcopen.it. Il dominio da regi-
strare in rete deve infatti essere
composto da una sola parola o
da più parole spezzate anche
da trattini. Vietati apostrofi e
accenti, simboli della punteg-
giatura e altri caratteri partico-
lari come ad esempio @, &, %.
In generale il dominio deve ave-
re una lunghezza minima di tre
caratteri e massima di 63
(estensioni escluse) e non può
cominciare o finire con un trat-
tino. A questa regola però ci so-
no alcune eccezioni. Per i gTLD
(generic Top Level Domain)
3a lezione
quali .com, .net e .org, .biz, .info
e .name, infatti, è possibile an-
che registrare domini di due
lettere.
In Italia i domini possono es-
sere acquistati da chiunque,
persona fisica o giuridica, a pat-
to che faccia parte dell’Unione
europea.
La struttura mondiale
della Rete
Prima di affrontare la proce-
dura di registrazione e gli enti
italiani che governano Internet
è il caso di disegnare la struttu-
ra mondiale della rete. Il vertice
è costituito dall’ICANN (Inter-
net Corporation for Assigned
Names and Numbers), l’organi-
smo che sovrintende all’asse-
gnazione dei domini. Si tratta di
un ente non profit le cui scelte
sono ratificate dal ministero del
Commercio statunitense il cui
board of director, secondo le
nuove regole recentemente ap-
provate, sarà formato da 18
membri. Il consiglio sarà eletto
da un comitato elettivo e da tre
organizzazioni che rappresen-
tano i gruppi di proprietari di
URL (Universal Resource Loca-
tor, l'indirizzo di una pagina
Web su Internet). Sparisce così
la norma che prevedeva che
cinque membri fossero eletti
dagli utenti della Rete. Una de-
cisione che secondo molti al-
lontana il vertice di Internet dai
bisogni dei navigatori.
All’ICANN spetta il compito
di decidere quali siano i nuovi 

 domini da adottare e chi dovrà
gestirli. Un compito non facile
soggetto a numerose pressioni
(il business fa gola a molti) e
che fino a oggi ha comportato
tempi molto lenti nell’adozione
di nuovi domini che hanno cau-
sato anche la nascita di società
alternative delle quali parlere-
mo più avanti.
Nonostante le proteste,
ICANN rimane il massimo orga-
no di Internet al quale è delega-
ta anche la scelta dei registry
dei gTLD, le società che si oc-
cupano di gestire i database dei
vari .com, .org o .info. La scelta
dei registry che si occupano
dei ccTLD (Country Code Top
Level Domain) è invece fatta in
modo autonomo dalle locali co-
munità Internet dei vari Paesi
con il parere favorevole del go-
verno. Il livello successivo è co-
stituito dai registrar o maintai-
ner ai quali i registry appaltano
di solito vendita dei domini. Di
solito si utilizza il termine regi-
strar quando questi soggetti
possono vendere i gTLD e han-
no la possibilità di scrivere di-
rettamente nel database di chi
gestisce questi domini. Si tratta
di un privilegio riservato a po-
chi visto che le società che pos-
sono vantare questa qualifica
sono 110 nel mondo fra le quali
c’è l’italiana Register.it. Molto
più accessibile è la qualifica di
maintainer, il quale vende gli al-
tri suffissi. In questo caso le ri-
chieste di registrazione devono
essere inviate all’Authority e
non si accede direttamente ai
database. In Italia si preferisce
utilizzare il termine maintainer.
La Registration Authority
(www.nic.it), che ha sede pres-
so l’Istituto per le applicazioni
telematiche del CNR di Pisa, ha
il compito di assegnare e regi-
strare tutti i nomi a dominio
che utilizzano il suffisso .it. La
Naming Authority si occupa in-
vece di stabilire regole e proce-
dure attraverso le quali sono
gestiti i domini.
Requisiti per poter
registrare un dominio
Per registrare i domini .it bi-
sogna possedere una Partita
IVA (per le aziende) o un codice
fiscale (i privati) e avere la resi-
denza in uno dei Paesi dell’U-
nione europea. Le aziende eu-
ropee possono registrare a loro
nome un numero illimitato di
domini .it, mentre i privati pos-
sono registrare a loro nome un
solo dominio .it. Per i domini
36/88
.com, .org e .net non è prevista
invece nessuna limitazione an-
che per i privati.
A meno di offerte particolari
o altri accordi, l’acquisto del
dominio vale per un anno. Alla
scadenza di solito (questo di-
pende dai servizi offerti dalla
società che vi ha venduto il do-
minio) l’utente viene avvisato e
può così procedere al rinnovo o
all’abbandono.
Come si registra un dominio
Chi vuole acquistare un do-
minio .it oltre che essere mag-
giorenne deve firmare e inviare
via fax (al numero 050/542.420)
o per posta raccomandata ( Re-
gistration authority italiana,
Istituto per le applicazioni tele-
matiche del CNR, via Giuseppe
Moruzzi 1, 56124 Pisa) una let-
tera di assunzione di responsa-
bilità. La lettera può essere di
solito stampata da Internet nel
sito del maintainer. L’assegna-
zione da parte della Registra-
tion authority non è in tempo
reale e segue il principio del fir-
st come first served. In sostanza
se due persone o aziende invia-
no la richiesta di acquisto del
medesimo dominio viene pre-
miata la richiesta arrivata per
prima a Pisa. Per controllare se
un dominio è già occupato, ed
eventualmente chi l’ha acqui-
stato, bisogna interrogare il da-
tabase della Registration
Authority. Per farlo bisogna an-
dare sul sito www.nic.it/RA/in-
dex.html oppure passare per i
siti delle società che vendono i
domini che di solito offrono an-
che la possibilità di interrogare
direttamente il database della
Ra (come Register.it). Per otte-
nere un dominio sono necessa-
ri circa tre-quattro giorni. Una
volta effettuata la registrazione
la Registration authority prov-
vederà a rendere tecnicamente
visibile in Rete l’utente regi-
strato. In pratica la Ra compie
un atto amministrativo regi-
strando il nuovo dominio e uno
di tipo tecnico registrando il
fatto che il dominio risiede in
almeno due DNS, Domain Name
Server. I DNS servono per con-
vertire i nomi dei nodi (come
www.pcopen.it) in indirizzi nu-
merici IP. Di solito questi server
sono di proprietà della società
che ha venduto il dominio e ne
ha effettuato la registrazione,
ma nel caso di grandi organiz-
zazioni (ad esempio Fiat o Mi-
crosoft) i server sono di pro-
prietà delle società che in que-
Il trasferimento “a pacchetti”
Internet è formata da un numero
imprecisato di computer host
collegati tra loro. Questi host
dialogano trasferendosi pacchetti
di dati che passano attraverso vari
server Internet fino ad arrivare al
destinatario. In questo viaggio i
dati vengono riconosciuti e
interpretati dai vari host che
capiscono se sono destinati a loro
o se devono trasmetterli a un’altra
macchina. Il protocollo TCP/IP
permette di effettuare queste
operazioni trasferendo i dati a
pacchetti. I pacchetti sono gruppi
di dati che riportano sempre
l’indirizzo del mittente e quello del
destinatario. L’indirizzo è codificato
a 32 bit e consiste in un alternarsi
di 0 e 1 (codifica binaria). Il numero
viene diviso in una sequenza di
quattro cifre che sono poi
trasformate in base dieci. Questo
dà vita a numeri come
sto modo possono attivare sen-
za problemi i sottodomini.
Chi invece deve acquistare
un dominio .com, .net, .org non
deve compilare la lettera di as-
sunzione di responsabilità.
Quando si acquista un dominio
non si entra in possesso per
sempre del nome (il mercato
avrebbe vita breve) ma in so-
stanza si acquisisce il diritto di
utilizzare quel nome per uno o
più anni. Il prezzo varia a se-
conda del suffisso che si inten-
de utilizzare.
Quanto costa?
L’offerta in rete è molto va-
ria; si passa da 9,95 a 35 euro
per un .it oppure a 14,95 per un
.com. Dipende dai livelli di ri-
vendita, dalla politica commer-
ciale e anche dai servizi offerti
in abbinamento con la vendita
del dominio.
Attenzione però a non farvi
abbagliare dal prezzo. Il costo
principale di chi vende il domi-
nio è dato infatti dalla gestione
dei nomi. In pratica quello che
si paga non è il dominio in sé
ma i servizi (per esempio il
cambio di DNS o altro) richiesti
a queste società che foniscono
anche una sorta di assicurazio-
ne che tutto funzionerà per il
meglio.
E in certi momenti un servi-
zio consumatori che funziona e
dà seguito immediatamente al-
le vostre richieste può essere
molto utile. Quante volte vi sie-
te scontrati con un indirizzo e-
3a lezione
192.153.169.24, e questa è la
tipica forma di un indirizzo IP.
Ovviamente ricordarsi ogni volta la
sequenza di numeri sarebbe troppo
macchinoso, e per questo si è
pensato di introdurre la possibilità
di legare a un indirizzo IP un nome
a dominio. La “traduzione” da
dominio a indirizzo IP è affidata al
DNS. Non tutti i nomi a dominio
possono essere registrati. Esistono
infatti nomi riservati. Per esempio
non sono assegnabili i nomi di
regioni e province, le sigle a due
lettere delle province a tre lettere
delle regioni, i nomi corrispondenti
all’identificazione dell’Italia e i
nomi dei comuni italiani. Gov.it e
governo.it sono riservati al sito
dell’esecutivo così come it.it,
Italia.it, Repubblica-Italiana.it e
RepubblicaItaliana.it sono
assegnabili solo agli organi
istituzionali dello Stato.
mail dal quale non arriva mai
una risposta?
Il servizio di hosting
Spesso alla vendita dei do-
mini è abbinata quella dell’ho-
sting. Questo perché acquista-
re un dominio senza lo spazio
Web non avrebbe grande senso
a meno che non sia un acquisto
di tipo difensivo fatto da so-
cietà che in questo modo vo-
gliono cautelarsi dall’utilizzo di
nomi che potrebbero corri-
spondere a marchi che lance-
ranno in futuro.
Nel caso invece l’acquisto
del dominio sia collegato all’a-
pertura di un sito è necessario
possedere anche lo spazio Web
che spesso porta con sé anche
un servizio di hosting. In prati-
ca la società che ha venduto il
dominio ospita sui propri ser-
ver le pagine Web del sito e la
posta elettronica.
Anche in questo caso le of-
ferte presenti in Rete sono mol-
to differenti e prima di scegliere
è il caso di leggere attentamen-
te le voci del contratto con i re-
lativi servizi e soprattutto ave-
re ben chiaro in mente cosa si
vuole fare con il proprio sito. Se
le ambizioni, per il privato o l’a-
zienda, si traducono semplice-
mente nel primo passo su In-
ternet con un sito dedicato alla
famiglia o una vetrina delle atti-
vità aziendali non è il caso di
spendere molti soldi.
Lo spazio gratuito spesso
concesso con l’acquisto di un

dominio può essere sufficiente.
Pochi MB bastano per foto e te-
sti, poi quando le idee saranno
più chiare e i progetti su Inter-
net più definiti, si potranno
chiedere spazi più ampi.
È inutile farsi abbagliare da
offerte mirabolanti con spazi
infiniti che non saranno mai uti-
lizzati. Meglio concentrarsi su
elementi più importanti come
l’affidabilità del sistema e i mar-
gini di autonomia che possiede
l’utente per effettuare le opera-
zioni di configurazione del suo
sito. Quanti sono i server a di-
sposizione? Qual è il livello di
sicurezza della connettività?
Sono queste alcune domande
da porsi (anche in relazione al
tipo di progetto che avete in-
tenzione di realizzare sul Web)
quando si affronta la scelta del-
l’hosting. Tenendo presente
che l’aspetto principale è quel-
lo della vostra autonomia.
L’utente deve infatti avere la
possibilità di muoversi a pro-
prio agio nel suo sito senza do-
ver avere la necessità di chie-
dere via e-mail modifiche o al-
tro. Questo però non esclude
che l’esistenza di un eccellente
servizio ai consumatori che
aiuti i navigatori in difficoltà sia
un altro elemento importante
nella scelta dell’hosting. Per
quanto riguarda la scelta di una
piattaforma Linux o Windows è
una questione che può interes-
sare soprattutto chi ha in pro-
gramma l’allestimento di siti
complessi che prevedono rela-
zioni con i database. In caso
contrario la piattaforma ha po-
ca importanza.  ming Authority. Il procedi-
Luigi Ferro
37/88
Quando ti “rubano” il sito
nni fa gli squatter occu-
A pavano le case. Poi è arri-
vata Internet e qualcuno
ha pensato fosse il caso di oc-
cupare anche il Web. Nasce
così il cybersquatting, l’occu-
pazione abusiva di domini. In
pratica, il furbo di turno, deci-
de di acquistare un dominio
che guarda caso è uguale al
nome o al marchio di un’a-
zienda. Di solito lo fa solo per
poi rivenderlo a caro prezzo
ma può anche utilizzarlo per
sfruttare la notorietà del mar-
chio.
Così un mcdonald.it può di-
ventare per esempio un sito
per parlare male degli ham-
burger o cocacola.it per dire
quanto fanno male le bibite
gassate. Peccato però che,
passata l’equiparazione del
nome a dominio con il brand,
questa pratica non sia legale.
Internet non è il selvaggio We-
st dove vige la legge del più
forte o semplicemente di chi
arriva prima, ma un luogo vir-
tuale con regole assolutamen-
te reali. Per questo motivo si è
proceduto a varare norme
precise per dare ai domini i le-
gittimi proprietari. Le proce-
dure di rassegnazione dei no-
mi a dominio sono denomina-
te MAP (Mandatory Admini-
strative Proceeding) e sono
attivate da Enti conduttori
che hanno ricevuto l’autoriz-
zazione a operare dalla Na-
mento avviato dagli enti con-
duttori ha natura amministra-
tiva e non esclude quindi la
possibilità di ricorrere alla
magistratura ordinaria. A van-
taggio di questa soluzione,
però, c’è la velocità della pro-
cedura. Secondo le regole sta-
bilite dalla Naming Authority
è possibile ricorrere sotto tre
condizioni:
1) quando il nome a domi-
nio utilizzato da un terzo sia
identico o tale da indurre a
confusione rispetto ad un mar-
chio su cui egli vanta diritti o
sia identico al proprio nome e
cognome;
2) se l'attuale assegnatario
non abbia alcun diritto o titolo
in relazione al nome a dominio
contestato;
3) il nome a dominio sia sta-
to registrato e venga utilizzato
in mala fede.
Chi ricorre potrà ottenere la
rassegnazione del nome a do-
minio in caso di presenza con-
temporanea della prima e ter-
za condizione e il presunto cy-
bersquatter non provi di avere
diritto o titolo in relazione al
dominio contestato. Per quan-
to riguarda il secondo punto
per poter continuare a utilizza-
re il dominio il resistente (colui
che ha acquistato il nome a do-
minio oggetto della contesa)
deve dimostrare di:
a) aver utilizzato o di esser-
si oggettivamente preparato
ad usare, in buona fede, il no-
me a dominio o un nome ad
esso corrispondente per offer-
3a lezione
ta al pubblico di beni e servizi,
prima di aver avuto notizia
della contestazione;
b) essere stato conosciuto,
personalmente, come associa-
zione o ente commerciale con il
nome corrispondente al nome a
dominio registrato, pur non
avendo registrato il relativo mar-
chio;
c) aver effettuato un legitti-
mo uso commerciale o non
commerciale, del nome a do-
minio, senza l'intento di sviare
la clientela del ricorrente o di
violarne il marchio registrato.
In base a queste regole lo sti-
lista Giorgio Armani non ha po-
tuto prendere possesso del no-
me a dominio armani.it, già re-
gistrato dal timbrificio Armani,
mentre la Warner Village Cine-
ma ha ottenuto Warnervillage.it.
www.nic.it/NA/maps/ è l’in-
dirizzo presso il quale si trova-
no i link agli enti conduttori per
i domini .it, mentre
www.icann.org/udrp/appro-
ved-providers.htm è l’altro in-
dirizzo per i domini .com, .net,
org.
I costi della procedura, a ca-
rico del ricorrente, variano a
seconda di quanti saggi fanno
parte del collegio e possono
andare per esempio da 800 eu-
ro (un dominio con un saggio)
fino a 2.240 (un dominio con
tre saggi). La decisione deve
pervenire entro sessanta gior-
ni dalla data di presentazione
del reclamo. 
L.F.
 4a lezione

A scuola con PC Open

Progetto Web Master di Roberto Mazzoni

1 Stile e struttura: usare i tag HTML nativi

elle lezioni precedenti con funzioni specifiche. in che modo visualizzarlo, ba- velli consecutivi così da deter-

N abbiamo visto come pro-

gettare e realizzare un si-
to statico e come strutturare
pagine modello da utilizzare
come elemento standard per
conferigli una certa omoge-
neità di layout e di navigazio-
ne.
Adesso è arrivato il momen-
to di versare il contenuto, co-
minciando dal testo che costi-
tuisce di gran lunga l'elemento
più comune di un sito e di con-
seguenza prevede anche la più
grande varietà di tag, ciascuno
La gestione del testo solleva
una questione che avevamo
già anticipato all'inizio del cor-
so, vale a dire la differenza tra
marcatori strutturali e marca-
tori stilistici.
HTML, infatti, nasce in ori-
gine come linguaggio struttu-
rale. I suoi tag servono a indi-
care il ruolo che un determi-
nato componente svolge all'in-
terno della pagina e non il mo-
do in cui questo debba essere
rappresentato.
Spetta al browser decidere
sandosi sulle caratteristiche
del computer e sulle eventuali
preferenze indicate dall'uten-
te. Tuttavia, l'impiego dei soli
tag strutturali codificati nelle
prime due versioni di HTML
produceva pagine estetica-
mente orribili, del tutto ina-
datte alle esigenze della nuova
forma di editoria che si stava
sviluppando sul Web.
Prendiamo l'esempio della
marcatore <h#> che identifica
un titolo (heading) e al quale si
possono associare fino a sei li-
minare una struttura gerarchi-
ca di titoli e sotto-titoli:
<h1></h1> seguito da <h2>
</h2> eccetera.
Benché offra un sistema
pratico per strutturare docu-
menti di tipo scientifico, pro-
duce una visualizzazione del
tutto sproporzionata rispetto
al testo normale, identificato
dal tag <p>, decisamente brut-
ta a vedersi.
Inoltre né <h#> né <p> con-
sentono di variare il tipo di
font utilizzato nella pagina e il

IL CALENDARIO DELLE LEZIONI

Lezione 1: • Esercizi su come creare una pagina • Cosa si può fare con i fogli stile
Competenze e strumenti vergine e su come progettare un sito • Quattro tipi di CSS
(disponibile integralmente • I colori del Web
sul CD) Lezione 3: • Gestire le immagini
il corso è Modelli di pagina e tabelle • Esercizi
• Che cosa fa un Webmaster sul CD (disponibile integralmente sul CD)
• Gli strumenti di lavoro n. 68 Contenuti aggiuntivi sul CD
• Le figure professionali che • La tabella come elemento strutturale • Versioni integrali e complete
affiancano il Webmaster • Progettare layout fluidi e statici degli articoli pubblicati sulla rivista
• Le risorse on line • Costruire template con le tabelle • Ereditarietà e innesco a cascata
• Tecniche di progettazione del sito di layout • Proprietà di trasferimento dei parametri
• Organizzazione delle informazioni • NamoWeb Editor5: per siti statici • Regole di ereditarietà
• Costruzione della mappa – gerarchia, professionali • Selettori di classe
ipertesto, struttura lineare • Dimensionare tabelle e celle fluide, • Websafe palette
• Strumenti di navigazione dimensionare tabelle con celle miste,
• Sistemi di navigazione allineamento spontaneo delle tabelle
• Sistemi di labeling consecutive
• Template con struttura complessa Le prossime puntate
• Template con tabelle nidificate
Lezione 2: • Esercizi Lezione 5:
Siti statici e linguaggio HTML Design e multimedialità
(disponibile integralmente
sul CD)
Lezione 4: Lezione 6:
HTML 4.01 e CSS Siti interattivi
• Progettare un sito statico
• Progettare la pagina Lezione 7:
• Pagine HTML e marcatori • Stile e struttura: usare i tag HTML nativi
• Strutturare i contenuti della pagina • Il deprecato tag font Interazione sul server
• Adobe GoLive 6.0 • I marcatori per formattare il testo
• Spiegazione dei tag HTML per una pagina • Gestire gli spazi nel testo Lezione 8:
vergine • CSS e HTML 4.01 Promuovere il sito

38/88

relativo colore, e ben sappia-
mo che testi uniformemente
neri e tutti con carattereTimes
Roman non facilitano il rico-
noscimento e la lettura "tipo-
grafica" di una pagina edito-
riale. Anzi, Times Roman è na-
to per funzionare bene sulla
carta, mentre rende male sullo
schermo.
Esistono invece font conce-
piti espressamente per il Web
che sono ormai riconosciuti
da tutti i browser e che facili-
tano la lettura a video, un
esempio in tal senso il Verda-
na, evoluzione telematica del-
lo storico Helvetica.
Tag e attributi deprecati
L'esigenza di fornire ele-
menti per il controllo della vi-
sualizzazione a video del testo
ha portato all'inserimento nel
GLOSSARIO
CSS (Cascading Style Sheets):
fogli di stile in cascata, un
sistema concepito nel 1996 per
assegnare attributi stilistici agli
elementi di una pagina Web in
modo distinto e complementare
rispetto al linguaggio HTML.
Consentono di definire numerosi
attributi tipografici per ciascun
elemento presente nella pagina,
oltre che indicarne la posizione e
il comportamento al verificarsi di
alcune circostanze (passaggio
del mouse sopra la parola o
frase, eccetera).
Consentono di centralizzare in un
solo documento tutti i parametri
stilistici di un sito così che, con
una sola modifica, sia possibile
variare tutte le pagine del sito.
Alleggeriscono le pagine
medesime poiché le informazioni
stilistiche per un certo sito
vengono caricate una volta sola.
Garantiscono compatibilità tra i
diversi browser, dispensando il
Webmaster dall'usare tag
particolari per ciascuno.
Possono anche funzionare in
abbinamento a documenti XML
per fornire le informazioni di
presentazione.
La versione corrente è la 2.0,
ma il W3C sta già lavorando alla
3.0
DOM (Document Object Module):
un modello mediante il quale è
possibile manipolare gli oggetti
che sono contenuti in una
pagina. Per oggetti s'intende gli
elementi (la combinazione del
39/88
linguaggio HTML di marcatori
e attributi con funzioni unica-
mente stilistiche, come ad
esempio la coppia di tag
<font></font> che determina il
tipo, la dimensione e il colore
della font attribuita al brano di
testo che racchiude.
È proprio grazie a questi tag
"irregolari" che sono potuti na-
scere i primi siti editoriali e i
grandi portali, ma il loro im-
piego indiscriminato ha porta-
to a pagine complesse da ge-
stire, alterando la "purezza"
originale di HTML.
Con la versione 4 di questo
linguaggio il W3C (World Wide
Web Consortium – www.
w3c.org) ha cercato di riporta-
re ordine mantenendo compa-
tibilità con i precedenti tag sti-
listici, ma offrendo un'alterna-
tiva attraverso l'impiego di
tag di apertura, degli eventuali
attributi, del tag di chiusura e del
testo racchiuso tra i tag), i
collegamenti ipertestuali e altro
ancora. Diventa quindi possibile
cancellare, aggiungere e
modificare un elemento,
cambiarne il contenuto oppure
aggiungere, cancellare e
modificare un attributo.
Ad esempio è possibile chiedere
via programma l'elenco di tutti gli
elementi predenti nel documento
che sono identificati dal tag
<h1>.
HTML 4.01 (HyperText Markup
Language): lo versione corrente
del linguaggio di marcatori (mark
up) per la costruzione di pagine
Web. Definita per la prima volta
nel dicembre 1999 come
evoluzione della precedente
versione 4.0 (dicembre 1997)
stabilizza quest'ultima in termini
di tag e d'integrazione con i fogli
di stile, aggiungendo il supporto
per il modello DOM (Document
Object Model) per la creazione e
manipolazione di documenti
HTML via programma.
SGML (Standard Generalized
Markup Language): è un
metalinguaggio, vale a dire un
linguaggio per definirne altri,
standardizzato nel 1986
dall'International Standard
Organization (ISO). All'epoca
esistevano diversi linguaggi di
markup, ma nessuno di essi era
portabile, vale a dire che erano
uno strumento aggiuntivo: i fo-
gli di stile in cascata (Casca-
ding Style Sheets).
Purtroppo, come ben sap-
piamo, i produttori di browser
non sempre dedicano la mas-
sima priorità all'adeguamento
nei confronti degli standard e
perciò a tutt'oggi il supporto
per i fogli di stile non è com-
pleto.
Tuttavia è già possibile rim-
piazzare il tag <font> quasi
ovunque e la specifica 4.01 ci
aiuta a trovare la giusta transi-
zione per arrivare a tale risul-
tato, identificando attributi e
tag deprecati e indicando co-
me e dove sostituirli.
Naturalmente non è obbli-
gatorio sposare i fogli di stile e
ci sono ancora molti siti in cir-
colazione che impiegano libe-
ramente il tag <font> e molti al-
nati per un particolare tipo di
computer e un particolare tipo di
ambiente software. Con SGML si
è creata una base teorica per la
definizione di altri linguaggi (tra
cui HTML e XML) che sono
pienamente portabili.
XHTML 1.0 (Extensible
HyperText Markup Language): lo
standard che definisce la
"riscrittura" di HTML secondo gli
standard di XML. XHTML 1.0 è
concepito per facilitare la
transizione graduale da HTML
4.01 verso il nuovo mondo XML
che è assai più rigoroso in
termini di sintassi e fortemente
orientato all'uso delle pagine
Web come combinazioni di
oggetti da manipolare via
programma. La specifica XHTML
1.0 è stata pubblicata nel
gennaio del 2000 e aggiornata
nell'agosto del 2002 per
correggere errori segnalati nei
primi due anni d'impiego.
Costituisce il primo passo per la
migrazione verso siti di nuova
generazione
XHTML 1.1: questa versione è
molto più rigorosa rispetto
XHTML 1.0 e non concede alcun
compromesso di compabilità
verso i tag deprecati che ancora
troviamo in HTML 4.0.
Raggruppa in moduli i vari
elementi previsti dal linguaggio
XHTML così da facilitarne
l'impiego all'interno di
documenti che usano altri
4a lezione
tri artifici deprecati. Funziona-
no e continueranno a funzio-
nare anche in futuro, ma limi-
tano moltissimo l'evoluzione
verso lo standard XML (eXten-
sible Markup Language) che
impone il massimo rigore nella
separazione tra informazioni
di struttura e informazioni sti-
listiche.
Di fatto, scoprirete che l'im-
piego dei fogli di stile offre so-
luzioni più eleganti e più gesti-
bili rispetto ai corrispettivi tag
stilistici del vecchio HTML 3.2,
ma bisogna conoscerne le sfu-
mature e sapere come farli
convivere al fine di garantire la
massima compatibilità con i
vari tipi di browser in circola-
zione.
Markup fisici e logici
Cominciamo con l'esamina- 
insiemi di tag (come ad esempio
MathML che usa XML per
definire tag specifici per i
documenti matematici).
XHTML 2.0: nuovo standard in
via di definizione, la cui versione
più recente risale al dicembre
2002. È incompatibile con le
precedenti versioni XHTML 1.0 e
1.1 Il W3C sta lavorando alla
versione 2.0, aggiornata a
dicembre 2002.
XML (Extensible Markup
Language): un linguaggio di
marcatori che vi permette di
sviluppare i vostri marcatori
personalizzati da utilizzare
all'interno di applicazioni
particolari. In pratica un
linguaggio per lo sviluppo di
linguaggi. Non si occupa affatto
di definire la presentazione a
video dei vari elementi, ma ne
classifica solo la natura.
Non costituisce una derivazione
di HTML, sebbene mantenga
diversi elementi di somiglianza,
rappresenta invece
un'evoluzione diretta dell'SGML
da cui HTML è un semplice
derivato.
XSL (Extensible Stylesheet
Language): linguaggio per la
definizione di fogli di stile da
abbinare a documenti XML.
Viene utilizzato ancora poco
perché molto complesso e
orientato ai programmatori più
che ai creativi.

 re la differenza tra tag fisici
(stilistici) e logici (strutturali)
usando un esempio classico:
In questa figura notiamo come gli
attributi tipografici di base assegnati da
HTML a un testo formattato unicamente
con tag strutturali siano inadeguati. Il
titolo di primo livello appare gigantesco
rispetto al testo e con una spaziatura
eccessiva sia sopra che sotto. Gli altri
due livelli di titolo mostrano lo stesso
problema, benché ridimensionato.
Notiamo invece l'effetto identico ottenuto
con i tag stilistici <b> e <i> rispetto ai
corrispettivi tag strutturali <strong> ed
<em> (consigliati)
Gestire gli spazi nel testo
Tutti i browser hanno una
caratteristica in comune: generare
una presentazione del contenuto
che sia adatta al tipo di computer
su cui stanno funzionando,
interpretando a proprio modo le
informazioni della pagina ed
eliminando il superfluo o ciò che
credono tale. In effetti il Web è
nato in un contesto accademico
dove crediamo che gli autori
fossero più concentrati
sull'informazione che volevano
trasferire che non sulla sua forma
e c'era l'esigenza di garantire che
un testo composto su un tipo di
computer rimanesse
comprensibile anche quando
trasferito altrove. Mancando di
qualsiasi funzioni tipografica nella
versione 1.0 e 2.0 di HTML,
l'unico modo disponibile per
impaginare le informazioni
consisteva nell'allineare i vari
elementi all'interno della colonna
di testo usando spazi multipli,
spazi che possono essere usati
come rientro per le righe di un
paragrafo oppure come
distanziatori tra le voci di un
indice e i numeri di pagina
all'altro estremo della riga.
40/88
l'evidenziazione di una parola
o di una frase rispetto al resto
del paragrafo. È possibile rea-
lizzarla mediante due tag fisi-
ci: <b></b> per il grassetto
(bold) e <i></i> per il corsivo
(italic) oppure mediante due
corrispettivi tag logici:
<strong></strong> ed
<em></em> (emphasize).
Nel primo caso diciamo al
browser di visualizzare obbli-
gatoriamente un testo in gras-
setto e un testo corsivo (diffi-
cilmente leggibile a video), nel
secondo caso gli diciamo sem-
plicemente di rafforzarne la vi-
sualizzazione oppure di enfa-
tizzarlo, lasciandolo libero di
scegliere il modo più idoneo
per farlo.
Nella pratica, <b> e <strong>
produrranno entrambi un te-
sto in grassetto e <i> ed <em>
produrranno entrambi un te-
sto in corsivo, ma <strong> ed
<em> sono consigliati dallo
standard HTML 4.01 puristi
perché indicano al browser
una caratteristica del testo,
vale a dire che si tratta di pa-
Il problema è che tali spazi
possono cambiare dimensione
quando mostrati su computer
diversi con font differenti e tutti gli
allineamenti costruiti in origine
dall'autore finiscono per
scombinarsi creando confusione
anziché aiutare la comprensione
del contenuto, inoltre molti
"scrittori" non professionali
inseriscono distrattamente due o
tre spazi tra le parole mentre le
digitano, presentando un
documento che ha un aspetto
trasandato.
Al fine di prevenire tali
inconvenienti e filtrare gli errori,
tutti browser eliminano
automaticamente qualsiasi spazio
aggiuntivo e richiedono all'autore
di specificare un particolare tipo
di entità nel caso voglia avere una
serie di spazi consecutivi,
rendendolo in tal modo
consapevole che si tratta di una
soluzione particolare di cui si
assume piena responsabilità.
Tale entità prende il nome di
spazio unificatore (non breaking
space) e si scrive &nbsp;
all'interno della pagina HTML
(ripetendolo per ogni singolo
role da mostrare con più forza
oppure da enfatizzare, anziché
specificare come farlo.
In effetti questi ultimi due
attributi potrebbero anche
produrre un testo sottolineato
su un monitor che non sia in
grado di generare grassetto e
sottolineato, come nel caso
del display di molti telefonini.
Esistono altri esempi di que-
sto tipo come nel caso del sot-
tolineato e del barrato che si
ottengono rispettivamente
con i due tag fisici <u> e <s>,
ma che possono essere ripro-
dotti anche con due nuovi tag
specifici di HTML 4.01: <ins> e
<del>. Il primo indica concet-
tualmente l'inserimento
d'informazioni che potrebbero
essere temporanee e che de-
vono essere verificate oppure
che potrebbero cambiare in
futuro, il secondo indica inve-
ce la cancellazione visiva del
brano d'informazione che rac-
chiude. Vediamo perciò che
l'impiego di tag logici aggiunge
significato al semplice effetto
grafico e che tale significato
spazio). Lo spazio unificatore
svolge tre funzioni: impedisce la
separazione di due parole in fine
di riga per effetto del ritorno a
capo automatico eseguito dal
browser, blocca una cella di
tabella oppure un paragrafo
mostrando al browser che non
sono vuoti e perciò non possono
essere eliminati in automatico,
inserire spazi consecutivi multipli
all'interno del testo per creare
rientri e spaziature impossibili con
gli spazi convenzionali.
È chiaro che anche lo spazio
unificatore non risolve il problema
delle diverse dimensioni che
possono essere attribuite ai
caratteri, e perciò agli spazi, al
variare del tipo di computer.
Per tale motivo HTML prevede una
serie di altri marcatori che
indicano al browser di utilizzare un
carattere monospaziato alias
testo a spaziatura fissa.
Si tratta di un termine preso a
prestito dal mondo della tipografia
e indica un particolare font dove
tutti i caratteri,
indipendentemente dalla loro
forma e dal fatto che siano
maiuscoli o minuscoli occupano
4a lezione
Il listato HTML che produce l'effetto
visualizzato nella figura precedente.
Notate che ciascun titolo dispone di un
proprio tag e che il testo è integralmente
racchiuso in un tag di paragrafo che lo
identifica. Notate che la "è" viene
trasformata in una delle entità previste
da HTML per la codifica dei caratteri
particolari, in questo caso &egrave; -
notate che l'entità comincia sempre con
& e termina con il punto e virgola
può quindi essere utilizzato al-
l'interno di programmi di let-
tura automatica delle pagine
Web (vedremo meglio questo
genere di applicazioni quando
tutti lo stesso spazio,
corrispondente di solito a quello
necessario per il carattere più
largo dell'alfabeto usato (la M
maiuscola). Lo stesso spazio
viene naturalmente occupato
anche dai singoli segni
d'interpunzione e dagli spazi
eventualmente presenti perciò gli
allineamenti verticali tra righe
diverse vengono garantiti
perfettamente indipendentemente
dal contenuto di ciascuna di esse.
Il prezzo che si paga è di avere un
testo goffo e sgradevole a vedersi
e perciò anche difficile da
leggere. In effetti, la scelta di
attribuire una spaziatura diversa
ai vari caratteri tipografici serve
proprio a facilitarne la lettura, su
carta e a video, e a fornire una
certa armonia estetica.
Se osservate una pagina di
giornale noterete che la i
minuscola occupa meno spazio in
orizzontale rispetto alla j e
rispetto alla M o T maiuscole.
Questo genere d'impostazione
prende il nome di spaziatura
proporzionale. I caratteri
monospaziati vengono di solito
utilizzati solo per rappresentare

parleremo di XML). Nella ta-
bella "Marcatori per formatta-
re il testo" trovate una sintesi
di tutti i tag compatibili con
HTML 4.01 per modificare l'a-
spetto e il significato di un
blocco di testo.
Ma cosa succede quando
decidiamo d'intervenire su in-
teri blocchi di testo modifi-
candone, ad esempio, font, co-
lore, dimensione, allineamen-
to e posizionamento rispetto
ad altri elementi?
Dobbiamo decidere se se-
guire la vecchia strada dei tag
stilistici oppure abbracciare la
nuova dei fogli di stile.
Vediamo innanzi tutto la pri-
ma soluzione, cioè cosa si può
fare utilizzando i tag e gli attri-
buti che ereditiamo dall'HTML
3.2. Il primo tra questi è <p>
che definisce il paragrafo e
che impone al browser per la
sua sola presenza d'inserire
una riga vuota prima e dopo il
paragrafo stesso.
Alcuni lo usano anche da
solo per inserire spazi bianchi
listati di programma, brevi elenchi
o altri brani di testo brevi dove gli
allineamenti siano più importanti
dell'omogeneità visiva e dove,
semmai, sia opportuna una netta
distinzione rispetto alla parte
principale del testo.
Il marcatore storico usato per
questo genere di funzione è <pre>
che definisce un testo
"preformattato", tipicamente
usando il font courier a spaziatura
fissa e inserendo una riga vuota
prima e dopo il brano compreso
tra i due tag. È stato deprecato
dalle specifiche HTML 4.01
perché si tratta di un markup
fisico (stilistico) e non logico
(strutturale), inoltre non funziona
in maniera omogenea in tutti i
browser. Ha il pregio di mantenere
qualsiasi indicazione di
formattazione contenuta nel testo
originale, compresi spazi multipli,
ritorni a capo nel testo e
lunghezza delle righe. Dispone di
un singolo attributo facoltativo,
witdh, che determina il numero
massimo di caratteri, spazi
inclusi, che possono comparire su
una riga e forza il ritorno a capo al
superamento di tale valore
(l'attributo width non è supportato
da Internet Explorer 6.0 mentre
funziona ancora in Netscape 7.0).
41/88
all'interno della pagina, ma i
browser di futura generazione
potrebbero filtrare i paragrafi
vuoti eliminando gli spazi così
introdotti.
Perciò alla pari delle tabelle,
dove non è consigliabile crea-
re celle completamente vuote
anche se servono al fine di
creare spazi bianchi, il consi-
glio è di riempire il paragrafo
con almeno uno spazio bianco
non eliminabile, che in HTML
viene generato con l'entità
&nbsp; (non breaking space di
cui parliamo più dettagliata-
mente in un riquadro a parte
"Gestire gli spazi nel testo").
Nell'HTML 3.2 il tag di chiusu-
ra </p> è facoltativo, ma di-
venta obbligatorio in XHMTL
1.0 (la versione di HTML che
consente l'impiego delle fun-
zioni avanzate di XML). L'attri-
buto "storico" del tag <p> de-
precato da HTML 4.01 è align
che regge i parametri: left, cen-
ter, right, justify (quest'ultimo
supportato solo da vecchie
versioni di browser), per alli-
Il marcatore <pre> riconosce e
riproduce anche eventuali
grassetti e corsivi presenti nel
testo. È sicuramente il più
flessibile tra i marcatori per la
generazione di testo
monospaziato ed è molto utile
quando si devono riconvertire per
il Web documenti che sono già
stati impaginati con un
wordprocessor e non vale la pena
rimaneggiarli daccapo. È l'unico
che conservi integralmente il
contenuto originale e non è
possibile riprodurne la totalità
delle funzioni nemmeno con i fogli
di stile (che non conservano gli
spazi multipli e i ritorni a capo).
Esistono diversi altri markup fisici
e logici che producono testo
monospaziato, elencati per
comodità nella tabella "Marcatori
per formattare il testo" e di cui
riportiamo le caratteristiche
dettagliate sul CD all'interno del
documento "Prontuario dei tag di
testo". Tra i marcatori riportati in
tabella, segnaliamo comunque
<blockquote> che consente di
produrre blocchi di testo
evidenziati all'interno del
documento principale mediante
un rientro su entrambi i lati. Tra
l'altro, <blockquote> è l'unico
marcatore HTML a consentire la
4a lezione
neare il testo al bordo sinistro,
destro oppure al centro della
pagina.
Nel caso non volessimo in-
serire una riga vuota al termi-
ne del paragrafo, ma sempli-
cemente andare a capo oppu-
re volessimo inserire diverse
righe vuote consecutive, uti-
lizzeremmo il tag <br> (break)
che fa continuare il paragrafo
e ne mantiene le impostazioni
anche dopo il ritorno a capo e
non richiede tag di chiusura.
Il deprecato tag font I vari effetti che possiamo creare
Il marcatore fisico più im- mediante l'allineamento del testo a livello
portante per la "tipografia" sul di paragrafo e l'applicazione del tag
Web, è <font> che regge diver- <font> per modificare il tipo, il colore e la
dimensione del carattere. Il tag <font>,
si attributi di cui i principali deprecato da HTML 4.01, prevede sette
sono: face per indicare il tipo dimensioni assolute diverse per i
di carattere, size per definirne caratteri più un'impostazione relativa che
le dimensioni e color per spe- va da – 7 a + 7 e ingrandisce o
cificarne il colore. diminuisce il carattere pre-impostato nel
Il tag non tiene conto della browser
struttura del documento per-
ciò potete attribuire un font a ri oppure a tutta la pagina.
una singola lettera, a una sin- Il suo effetto viene unica-
gola parola o porzione della mente delimitato dalla posi-
stessa, a frasi e paragrafi inte- zione dei tag di apertura e 
nidificazione di se stesso, vale a </blockquote></blockquote>. Il
dire che potete inserire diversi problema di questo approccio è
<blockquote> uno dentro l'altro al che richiede l'impiego di un
fine di produrre rientri sempre più marcatore strutturale, nato per
profondi, usando una sintassi del evidenziare delle citazioni, per uno
tipo <blockquote>Primo rientro scopo stilistico che in origine non
<blockquote>Secondo rientro era previsto. Quando un motore di
ricerca passa in
esame le pagine
dove
<blockquote> è
stato utilizzato
unicamente per
produrre un
rientro,
codificherà come
citazione qualcosa
che non lo è
affatto. Lo stesso
effetto può essere
prodotto più
efficacemente e
con maggiore
accuratezza
usando i fogli di
stile in cascata.
Qui vediamo il marcatore <pre> all'opera. Nel primo riquadro in alto compare il testo
originale scritto con Word dove mettiamo in evidenza gli spazi e i ritorni a capo
generati con il wordprocessor. Subito sotto notiamo come lo stesso brano di testo si
trasformi quando copiato direttamente in una pagina HTML: gli spazi multipli e i ritorni
a capo scompaiono, producendo una singola riga ininterrotta e illeggibile (grassetto e
corsivo nella pagina Web devono naturalmente essere aggiunti con marcatori ad hoc).
Proviamo ora a copiare lo stesso brano, inserendolo nella coppia di tag <pre> e
</pre>. Otteniamo nuovo il formato originale, visualizzato con un carattere courier a
spaziatura fissa invece del Times a spaziatura proporzionale scelto di default dal
browser

 chiusura: <font> e </font>. L'u-
nica eccezione in questo sen-
so, come vedremo, sono le ta-
belle che richiedono di indica-
re il tag <font> per ogni singola
cella anche nel caso in cui i pa-
rametri restino invariati per
l'intera tabella.
L'attributo face consente
d'indicare diversi tipi di font,
da scegliere in sequenza e in
alternativa al principale qua-
lora questo non fosse disponi-
bile sul browser, size invece
indica dimensioni assolute o
relative.
Si va da 1 a 7 oppure da –7 a
+7. I due tipi di valori hanno si-
gnificati diversi. Il primo sta-
bilisce una dimensione fissa
dove il default è 3 e corrispon-
de alla dimensione base asse-
gnata dal browser al testo (cir-
ca 10 pixel).
Il secondo stabilisce invece
il livello d'ingrandimento o ri-
duzione rispetto al valore di
default (3 appunto), perciò –1
corrisponde a 2, +1 corrispon-
de a 4, eccetera.
In entrambi i casi si tratta di
valori dinamici, vale a dire
sensibili all'impostazione del
browser per visualizzare il te-
sto.
Se per esempio l'utente do-
vesse scegliere da Internet Ex-
plorer il parametro Visualizza
> Carattere > Grande tutta la
scala di valori verrebbe alzata
di un livello, se invece sce-
gliesse Visualizza > Carattere >
Molto piccolo tutta la scala di
valori verrebbe ridotta di due
livelli. Il valore di default per il
browser corrisponde natural-
mente a Visualizza > Carattere
> Medio.
Perciò impostando la di-
mensione del carattere usan-
do <font size> lasciamo libero
l'utente d'ingrandire e rimpic-
ciolire il testo a piacere a se-
conda delle sue necessità di
visione. Color infine accetta,
come qualsiasi altro tag che
preveda l'uso del colore, il no-
me di uno dei sedici colori co-
dificati in HTML oppure il co-
dice esadecimale della tinta
scelta, che di solito viene pre-
levata da una palette di 216 co-
lori cosiddetti sicuri, cioè vi-
sualizzabili senza alterazioni
in qualsiasi tipo di browser sia
su Windows sia su Macintosh
(per un riferimento vedi
http://www.webmonkey/ refe-
rence/color_codes/ e il riqua-
dro "Colori sicuri").
Nell'impiego del tag <font>
42/88
Marcatori per formattare il testo
Tag fisici Tag logici
<b> <strong>
<i> <em>
<u> <ins>
<s> <del>
<pre>
<tt> <kbd>
<samp>
<code>
<blink>
<address>
<cite>
<blockquote>
<big>
<small>
<sub>
<sup>
<abbr>
<dfn>
<q>
<var>
<h1>-<h6>
Tutti questi marcatori possono essere inseriti all'interno di un paragrafo, ma <h#> e <blockquote> possono anche
vivere separatamente. Tutti i tag fisici sono deprecati da HTML 4.01
notiamo una caratteristica che
costituisce la base per il fun-
zionamento dei fogli di stile in
cascata, come vedremo più
avanti.
È possibile nidificare diversi
tag <font> ereditando di livello
in livello le caratteristiche dei
livelli superiori. Nell'esempio
che riportiamo in figura, l'inte-
ro documento è contenuto al-
l'interno di un tag <font> che
specifica il tipo Verdana, il co-
lore rosso e una dimensione
pari a quattro (+1).
I primi due attributi si man-
tengono costanti per l'intero
documento poiché non modi-
ficati dai tag <font> successivi,
mentre varia invece la dimen-
sione, indicata nel tag che è
più vicino alla porzione di te-
sto a cui si applica.
Si dice quindi che gli attri-
buti si applicano in cascata
con i livelli superiori che in-
fluenzano tutto ciò che con-
tengono, ma che possono es-
sere modificati dai livelli infe-
riori che hanno una priorità
crescente a mano a mano che
si è fisicamente più vicini al
brano di testo da modificare.
Altri tag logici per il testo
Esistono situazioni in cui il
4a lezione
Effetto visibile Significato
grassetto evidenziato
corsivo evidenziato
sottolineato inserimento temporaneo
barrato cancellazione visibile
monospaziato con riporto di tutti gli testo preformattato
spazi e ritorni a capo presenti nel
documento originale e con riga vuota
sopra e sotto. Conserva grassetti
e corsivi.
monospaziato testo non formattabile
monospaziato testo campione
monospaziato codice programma
lampeggiante (Netscape) evidenziato
corsivo e ritorno a capo indirizzo
corsivo citazione
rientro con riga vuota sopra e sotto citazione a blocco
aumento dimensioni corpo testo grande
riduzione dimensioni corpo testo piccolo
testo a pedice pedice
testo ad apice apice
nessuno abbreviazione
nessuno definizione termine
nessuno citazione in paragrafo
corsivo nome di variabile
aumento dimensioni e spaziatura titolo e titolini
Il codice usato per creare
la figura precedente
mostra che gli attributi font
possono essere nidificati e
che quelli più interno
ereditano i parametri del
più esterno (in questo
caso colore e tipo) ma
possono impostarne di
propri (come in questo
caso la dimensione) che
ha priorità rispetto al tag
più esterno.
Notate anche che il tag
<font> può abbracciare
una quantità indefinita di
testo, dalla singola parola
all'intero documento.
I tag nidificati all'interno
vanno chiusi, come
sempre, prima di chiudere
il tag più esterno
(qui evidenziato in viola)
testo non fluisce a colonne, merate è possibile determina-
ma richiede una formattazione re il tipo di numerazione in
particolare, come nel caso del- uso (araba, romana, lettere) e
le liste. HTML prevede una se- la lettera o numero da cui far
rie di marcatori specifici per partire l'elenco.
queste esigenze: <ol> (ordered Nelle liste non numerate in-
list) e <ul> (unordered list) de- vece è possibile evidenziare
limitano una lista le cui voci ogni singola riga con un palli-
sono rispettivamente numera- no (default), un quadrato o un
te e non numerate. cerchio. Tutte le impostazioni
Ciascuna voce della lista stilistiche previste dal tag
viene poi identificata median- <font> si applicano alle liste,
te la coppia di tag <li></li> (li- come pure alle tabelle che
st item). Nel caso di liste nu- contengano testo. 

2 CSS e HTML 4.01
Cascading Style Sheets (fogli
I di stile in cascata) costitui-
scono lo strumento più im-
portante per gestire gli attribu-
ti tipografici di un sito moder-
no. Sebbene esistano fin al
1996, hanno trovato la loro dif-
fusione naturale con HTML 4.0
e il loro pieno sviluppo con
HTML 4.01, che ne recepisce
appieno le caratteristiche.
Offrono numerosi vantaggi:
controllare l'aspetto del testo e
degli altri elementi della pagina
con una precisione molto su-
periore a quella possibile me-
diante i tag fisici di HTML, rag-
gruppare tutte le informazioni
stilistiche di un sito all'interno
di un documento che venga ca-
ricato una sola volta per quel
particolare sito, alleggerendo
le singole pagine e facilitando
eventuali modifiche e aggior-
namenti. Basta cambiare una
delle voci contenute nel foglio
di stile affinché la variante si
propaghi immediatamente su
tutte le pagine del sito che con-
tengono quel particolare ele-
mento.
Purtroppo i browser fino alla
generazione 4 non erano com-
patibili con le funzioni dei CSS
e perciò si è dovuto aspettare
la diffusione capillare della ge-
nerazione 5 per cominciare a
vedere siti che ne facessero un
impiego concreco.
La compatibilità è cresciuta
ulteriormente con l'arrivo dei
browser della generazione 6 e
poiché possiamo ormai consi-
derare tramontata la stagione
dei vari Internet Explorer 4.0 e
Netscape 4.x, tanto vale abban-
donare l'impiego dei tag fisici,
in particolare <font> e abbrac-
ciare in toto i CSS nella nostra
progettazione tipografica.
Raggiungeremo il doppio
obiettivo di essere pienamente
conformi alle specifiche di
HTML 4.01, che depreca l'uso
di tag stilistici, e di beneficiare
delle evidenti potenzialità dei
CSS.
Avendo così eliminato anche
i vari tag particolari che ac-
compagnavano le diverse fami-
glie di browser, diventa possi-
bile realizzare soluzioni tipo-
grafiche che siano compatibili
a trecentosessanta gradi, senza
doversi far carico di produrre
versioni diverse della stessa
pagina a seconda del browser
43/88
utilizzato dal navigatore, come
invece accadeva in passato.
Separare
la forma dalla struttura
Il sogno di qualsiasi proget-
tista di siti è la separazione de-
gli attributi tipografici e stilisti-
ci dalle componenti strutturali
della pagina, soprattutto in siti
di tipo dinamico.
Tale separazione è impor-
tante per raggiungere un ade-
guato livello di efficienza nella
gestione del sito. Infatti, fintan-
toché gli elementi stilistici so-
no mescolati con il codice
HTML, è necessario chiamare
in causa il Webmaster per ogni
singola modifica estetica, mo-
difica che deve essere replicata
a mano, pagina per pagina.
Se poi si trattava di un sito
dinamico, diventa addirittura
necessario chiamare in causa
un programmatore oppure un
Web developer, perché il colo-
re di sfondo e le font del testo
sono indissolubilmente legate
ai tag del linguaggio di scrip-
ting che fa funzionare la pagina
in abbinamento al database.
Ogni modifica nell'aspetto
della pagina diventa perciò co-
stosa e impegnativa, tanto da
scoraggiare la revisione stilisti-
ca di molti siti che non riesco-
no perciò a migliorare la pro-
pria usabilità, la propria navi-
gabilità e la propria estetica
sulla scorta delle informazioni
raccolte dai navigatori durante
l'uso del sito.
I CSS sono il primo strumen-
to che ha consentito di separa-
re i due mondi e di lasciare una
notevole libertà d'intervento ai
creativi senza interferire con il
lavoro di programmazione e di
gestione del codice HTML ese-
guito dai tecnici.
Inoltre, fornendo una gam-
ma di opzioni tipografiche mol-
to ampia, ha consentito anche
a chi non è creativo di produr-
re risultati presentabili e gra-
devoli, con poco sforzo.
La nascita dei fogli di stile e
dell'HTML 4.0 risolve anche
una stortura concettuale intro-
dotta nel Web con il rilascio
della versione 3.2 di HTML che
ha rinnegato la natura originale
del linguaggio, nato per con-
trollare la struttura e non la
presentazione di una pagina,
per assecondare i desideri dei
4a lezione
Esempio di un foglio di stile: ecco il formato tipico di un foglio di stile. È un semplice
file di testo o porzione di pagina HTML, dove ogni regola è composta da un selettore (in
rosso) e da una dichiarazione (tra parentesi graffe) che riunisce una serie di proprietà e
di valori corrispondenti che spiegano in che modo il selettore (un elemento HTML) deve
essere visualizzato e perciò modificato rispetto alle proprie caratteristiche originali
vari produttori di browser, ficati rapidamente senza dover
creando così enormi problemi ripassare a mano ogni singola
di compatibilità e di manuteni- pagina del volume.
bilità dei siti, per non parlare Nel Web costituiscono un
della loro usabilità. complemento di HTML e si
Tuttavia i Cascading Style sposano con i tag di quest'ulti-
Sheets non si limitano agli attri- mo in modo abbastanza sem-
buti tipografici, bensì consen- plice e intuitivo. Per aggiun-
tono di posizionare con preci- gerli alla pagina basta digitare
sione gli elementi sulla pagina, codice aggiuntivo che non in-
sostituendosi alle tabelle come terferisce con il codice HTML
metodo per definire il layout, e originale il quale viene comun-
introducono anche una certa que riconosciuto senza pro-
dose d'interattività nella pagi- blemi dai browser di vecchia
na, facilmente accessibile an- generazione. In effetti è persi-
che da chi non conosce lin- no possibile combinare nella
guaggi di programmazione co- stessa pagina CSS e marcatori
me JavaScript. fisici, come ad esempio <font>,
al fine di avere la piena com-
Relazione patibilità con tutti i tipi di
tra CSS e HTML browser in circolazione, sfrut-
I fogli di stile definiscono un tando al tempo stesso le fun-
insieme di regole per indicare il zioni evolute dei fogli di stile.
tipo di formattazione da appli- In tal caso, la pagina avrà un
care ai contenuti di una pagina aspetto più gradevole quando
stampata o visualizzata elet- visualizzata da un browser di
tronicamente. Nascono con- generazione 5 o 6, ma sarà co-
cettualmente nel mondo dell'e- munque utilizzabile su un
ditoria dove, per semplificare il browser di generazione 4.
lavoro, gli attributi tipografici Le tre funzioni primarie di
di un libro vengono definiti pri- un foglio di stile sono: impo-
ma d'iniziarne la stesura e ven- stare gli attributi tipografici del
gono mantenuti separati dal te- testo, definire un livello e la sua
sto vero e proprio così da po- posizione nella pagina (vedre-
ter essere applicati in modo mo più avanti di che si tratta),
uniforme a più testi della stes- modificare le caratteristiche
sa collana e poter essere modi- originali dei tag HTML. 

3 Cosa si può fare con i CSS
ispetto ai markup fisici di
R HTML e in particolare al
tag <font>, i fogli di stile in
cascata offrono moltissime
possibilità, tanto che uno stu-
dio di tutte le loro funzioni ri-
chiederebbe un impegno para-
gonabile a quello speso per im-
parare HTML. A differenza di
quest'ultimo, però, i fogli di sti-
le possono essere conosciuti
un po' alla volta, esplorandone
le funzioni a mano a mano che
se ne presenti l'occasione e ag-
giornando il sito gradualmente,
ogni volta che si scopra qual-
cosa di nuovo.
C'è anche un altro motivo
per procedere con calma: la
gran parte dei browser in cir-
colazione sono pienamente
compatibili con le specifiche
dei CSS di livello 1, ma non
supportano ancora appieno i
CSS di livello 2 che aggiungono
una pletora di nuove funzioni,
specie nella gestione di conte-
nuti multimediali. Di conse-
guenza conviene partire stu-
diando le funzioni di livello 1
(che costituiscono l'argomento
centrale di questa lezione) per
poi estendersi al livello 2 in un
secondo momento.
Il prezzo da pagare per l'a-
dozione dei CSS è l'aggiunta di
un nuovo linguaggio alla pro-
pria cassetta degli attrezzi e al
proprio sito, con la necessità
d'imparare complesse regole
astratte che governano eredi-
tarietà ed effetto a cascata. Si
producono talvolta anche ef-
fetti imprevedibili e incostanti,
difficili da diagnosticare e ri-
solvere anche per i limiti di
molti editor HTML oggi in cir-
colazione, non dotati di speci-
fiche utilità per la gestione dei
CSS. L'unico programma che
contenga una funzione diagno-
stica specifica per i CSS è Top
Style 3.0, che funge anche da
editor testuale per pagine
HTML, senza tuttavia rimpiaz-
zare un vero e proprio ambien-
te visuale. Di conseguenza co-
stituisce un investimento ag-
giuntivo.
La natura tipografica
degli stili
Il primo ambito d'intervento
dei fogli di stile è nell'imposta-
zione degli attributi tipografici
del testo. Non solo possiamo
scegliere la font, il colore e le
44/88
dimensioni del carattere, come
avveniva nel tag <font>, ma
possiamo anche stabilire con
precisione l'altezza di ogni let-
tera, usando diverse unità di
misura, il peso delle stesse
(sottile, normale e grassetto),
la spaziatura, l'interlinea, even-
tuali bordi, attributi come il
corsivo e il maiuscoletto, effet-
ti particolari come il sottoli-
neato, il barrato e molto altro
ancora.
Nel caso si tratti di testo usa-
to per collegamenti ipertestua-
li, possiamo anche modificarne
l'aspetto quando vi passi sopra
il cursore e una volta che sia
stato visitato. Inoltre, anziché
ripetere in continuazione il tag
<font> per ogni elemento, sarà
sufficiente stabilire una volta
sola per l'intero sito l'aspetto
del testo, dei titoli e dei link, per
avere un'estensione automati-
ca delle specifiche a tutte le pa-
gine. Anche la gestione delle
tabelle viene potenziata e sem-
plificata enormemente, poten-
do definire attributi globali a li-
vello di tabella, di riga e di cella.
Per comprendere i vari ter-
mini usati nella definizione di
questi attributi bisogna cono-
scere un po' di tipografia. Tan-
to per cominciare, la proprietà
più comune, font-family, de-
scrive la famiglia di font scelte
per quel particolare brano di
testo. Si parla di famiglia poi-
ché si compone di tanti insiemi
di caratteri con dimensioni di-
verse, ciascuna delle quali
prende il nome di font. Tipo-
graficamente, quando s'ingran-
disce un carattere o lo si rim-
picciolisce, si cambiano anche
le caratteristiche delle varie
lettere che lo compongono per
adattarsi al diverso effetto visi-
vo prodotto dalle nuove di-
mensioni.
La scelta di una singola font
all'interno della famiglia avvie-
ne quindi mediante la proprietà
font-size che identifica l'altezza
delle lettere maiuscole per il
particolare insieme che abbia-
mo scelto. Tale altezza può es-
sere espressa in pixel, bloccan-
do la visualizzazione del testo a
una dimensione precisa sullo
schermo. Si ottiene così il pieno
controllo della visualizzazione
del sito e s'impedisce all'utente
di modificarla agendo sulle fun-
zioni di dimensionamento pre-
4a lezione
Confronto tra CSS e <font>: qui vediamo la grande varietà di unità di misura e di effetti
che si possono produrre con i fogli di stile rispetto alle ristrette prerogative del tag
<font>, il quale può determinare unicamente il tipo di font, il colore e la dimensione
relativa (size) in rapporto al default del browser.
Con i fogli di stile possiamo invece replicare esattamente il comportamento delle
misure relative di font, mediante gli attributi relativi small, medium, large, eccetera; ma
possiamo anche imporre una dimensione fissa in pixel o punti tipografici (quest'ultima
preferibile se vogliamo poi anche stampare le pagine). Possiamo anche maggiorare le
dimensioni di una particolare porzione di testo (il grassetto "maggiorato" è del 10% più
grande del testo normale a cui è abbinato), possiamo infine raggiungere dimensioni
assolutamente inarrivabili con il tag <font> e aggiungere bordi, variamente colorati e
strutturati, sfondi a tinta unita oppure composti da immagini e possiamo anche
restringere o allargare lo spazio tra le lettere e le parole, anche se quest'ultima
funzione non è supportata da Opera 5.0 e Netscape 7
viste dal browser. Lo svantag- te di ridimensionare il proprio
gio è di complicare la vita a chi testo, mantenendone tuttavia
abbia difficoltà di lettura e di le proporzioni rispetto al resto
rendere imprevedibile l'effetto della pagina. Si prestano alla
in stampa. In alternativa i CSS creazione di effetti speciali.
offrono altri due tipi di unità di Ad esempio possiamo deci-
misura: assolute e relative. Le dere di impostare il testo gras-
unità assolute definiscono un setto in modo che sia legger-
valore rigoroso, alla pari dei mente più grosso del testo nor-
pixel, ma facilmente riconosci- male utilizzando l'unità di mi-
bile anche dalla stampante: mil- sura em che in tipografia indica
limetri, centimetri, pollici, pica le dimensioni della M maiusco-
e punti (un pica corrisponde a la di un determinato font, in
12 punti tipografici). pratica la lettera più larga del-
Queste ultime due sono en- l'intera font rispetto alla quale
trambe unità di misura tipogra- si misurano tutte le altre. Im-
fica e sono da preferirsi alle mi- postando il grassetto in modo
sure in pixel se volete anche che sia 1.1 em avremo un gras-
stampare le pagine Web su car- setto più corposo perché leg-
ta senza sorprese. Nella pratica germente più grande della font
9 punti corrispondono a 12 normale. Basta indicare b {font-
pixel (la misura più leggibile size: 1.1 em} perché tutti i ca-
per un testo lungo sia a video ratteri bold dell'intero sito, non
sia in stampa), 8 punti corri- importa quale font e quale di-
spondono a 10 pixel, una misu- mensione, vengano maggiorati
ra adatta per le didascalie, e via del 10% rispetto agli altri carat-
di questo passo. Le unità relati- teri del testo in cui sono conte-
ve lasciano invece libero l'uten- nuti: una finezza facile da rea-
 4a lezione

per alcuni casi,

con le versioni più
recenti.

Quattro tipi di CSS Inserire un foglio di stile esterno: nella gran parte dei siti che usano CSS il foglio di
Esistono quattro stile è centralizzato. Lo si collega a ogni singola pagina mediante il tag <link> seguito
modi diversi per da un serie di attribiti obbligatori tra cui il riferimento ipertestuale (href) alla posizione
innestare un fo- dello stile nel sito
glio di stile all'in-
terno di una pagi- zione delle varie pagine nella be: <p style="font-family: Times;
na HTML. struttura di directory del sito. font-size: 18px"> che dice al pa-
Il primo, che Il tag <link> va inserito nell'in- ragrafo corrente di visualizza-
prende il nome di testazione di ciascuna pagina, re il testo in Times a 18 pixel.
foglio di stile al termine della zona compre- Se volessimo realizzare lo stes-
esterno, è il più sa dalla coppia di tag <head> so effetto non sul paragrafo,
diffuso e consiste </head>. bensì su una porzione più pic-
Incorporare un foglio di stile nella pagina: usando invece il
nell'aggiungere Il secondo modo per inseri- cola di testo useremmo <span
marcatore <style> è possibile definire un foglio di stile che nell'intestazione re un CSS nella pagina prende style="font-family: Times; font-si-
vale solo per quella pagina particolare. Qui notiamo che il della pagina il nome di foglio di stile incor- ze: 18px">testo da modificare
nostro foglio ipotetico contiene un elemento definito, table, (<head>) un link porato e consiste nel digitare </span>.
che indica il tipo, la dimensione e il colore nero del testo al documento che la descrizione del CSS per inte-
da usare nelle tabelle contenute nella pagina. Seguono poi contiene il foglio ro all'interno dell'intestazione Le regole
quattro classi generiche (dida, rosso, bianco e blu)
corrispondenti ad altrettante varianti del testo da usare di stile (un sem- della pagina, racchiudendola di costruzione dei CSS
mediante il marcatore <span></span> direttamente plice documento entro di uno speciale tag con- Ogni regola dei CSS si com-
all'interno del testo della tabella. Ne vediamo un esempio di testo) affinché cepito allo scopo: <style>. In pone di due parti: il selettore e
nella Websafe palette integrata nel CD quest'ultimo ven- questo caso, il foglio di stile va- la dichiarazione. Il selettore,
ga caricato assie- le solo per quella pagina parti- posizionato a sinistra, defini-
me alla prima pa- colare e dovremo aprire la pa- sce le parti del documento a
lizzare che può migliorare la gina del sito. Mediante tale ap- gina ogni volta che bisognerà cui applicare lo stile. La di-
leggibilità del testo. proccio è possibile definire un modificarlo, tuttavia avremo chiarazione, sulla destra e se-
A qualsiasi elemento HTML, singolo foglio di stile per l'inte- comunque il vantaggio di tro- parata dal selettore mediante
testo compreso, è possibile poi ro sito e beneficiare della mas- vare tutte le informazioni stili- due punti, indica le varie pro-
abbinare bordi, sfondi colorati sima flessibilità di modifica dei stiche racchiuse in un solo prietà e i valori per tali pro-
addirittura immagini di sfon- parametri. Il tag da utilizzare in punto del documento anziché prietà. Il selettore può corri-
do, con un controllo molto pre- questo caso è <link> con l'indi- sparpagliate in mezzo ai tag spondere a uno degli elementi
ciso sulla forma e la posizione cazione del tipo di relazione del contenuto. nativi di HTML, in tal caso par-
degli stessi. tra i due documenti (attributo Il terzo modo prende il no- leremo di selettore di tipo. Il
Ad esempio possiamo realiz- rel) la posizione del foglio di me di foglio di stile importato e selettore h1, ad esempio, indi-
zare un testo bordato solo su stile (attributo href) e la sua costituisce una via di mezzo cherebbe che lo stile si applica
tre lati. È anche possibile infine natura (type="text/css"). tra i due definiti prima, il foglio a tutti i titoli di primo livello.
determinare con precisione la La dicitura completa per in- viene incorporato nell'intesta- La dichiarazione ospita invece
posizione degli elementi ri- serire il foglio usato nelle pagi- zione della pagina mediante il tutti i possibili attributi stilisti-
spetto ad altri elementi conti- ne del nostro CD è la seguente: tag <style>, però proviene da ci previsti per quel particolare
gui e rispetto al canovaccio <link rel="stylesheet" un singolo documento centra- oggetto.
complessivo della pagina. href="/zzz/stili.css" lizzato, identico per diverse Ad esempio, h1 { font-family:
Purtroppo tutta questa li- type="text/css">, il valore di pagine. È un sistema usato di Verdana, Arial, Helvetica, sans-
bertà ha un prezzo: la poten- href (hypertext reference) qui rado anche perché mal sup- serif; font-size: 16px; color:
ziale incompatibilità con i è indicato per la home page e portato da alcuni browser. #003399 } indica che i titoli del-
browser più vecchi e anche, cambia al variare della posi- Il quarto tipo di CSS prende le nostre pagine saranno vi-
il nome di foglio di stile in linea sualizzati con il font Verdana,
(inline) e viene inserito diret- oppure in alternativa con Arial,
Test: leggi le domande e verifica le tue risposte tamente all'interno di un parti-
colare elemento della pagina,
Helvetica o con un qualsiasi
font di tipo san serif (senza
Riepilogo dei concetti della Lezione 4
1. Quali sono i marcatori più importanti per il testo e
dove si usano rispettivamente?
? come ad esempio nel tag di
paragrafo <p> oppure nel tag
divisionale <div> oppure nel
grazie – le grazie sono gli arro-
tondamenti che si notano alle
estremità delle lettere di alcu-
2. Che differenza c'è tra un marcatore o tag fisico e un tag logico? tag di tabella <table> utilizzan- ne font aggraziate, come il Ti-
3. Come si può allineare il testo all'interno di una pagina? Si do l'attributo style seguito dal- mes Roman e che servono per
possono usare spazi bianchi multipli? la definizione delle proprietà facilitare la lettura su carta,
4. Che differenza c'è tra HTML 4.01 e XHMTL 1.0? che vogliamo attribuire a quel ma che mancano invece nelle
5. Che cosa sono i CSS e a che cosa servono? particolare elemento rispetto font di tipo "bastone" che sono
6. Cosa si può fare con i CSS? alle specifiche generali del fo- lisce e senza ghrigori e risulta-
7. Come funziona il meccanismo dell'ereditarietà? glio di stile esterno oppure in- no più facili da leggere a scher-
8. In che modo si può inserire un foglio di stile all'interno della corporato. Da notare che me- mo).
pagina? diante l'uso del tag <div> op- La regola indica inoltre che
9. Se il browser non supporta le funzioni dei CSS che cosa pure <span> è possibile appli- il titolo dovrà avere una di-
succede? care un foglio di stile a una mensione di 16 pixel (il valore
10. Che cos'è la Websafe palette? porzione liberamente definita è preciso, impossibile a defi-
11. Che tipo d'immagine può entrare nella pagina di un sito? del documento (da una sola nirsi con il tag <font>) nonché
(le risposte le trovi a pagina 40) lettera a un'intero blocco di un colore blu. Notate che la re-
paragrafi). Un esempio sareb- gola si apre e si chiude con una

45/88

parentesi graffa così da essere
distinta dalle altre e che ogni
proprietà viene separata da un
punto e virgola.
Possiamo proseguire nella
nostra lista e definire tante re-
gole quanti sono i tag che pen-
siamo di utilizzare nelle pagine
del nostro sito e alla fine otter-
remo un file di testo che può
vivere indipendentemente al-
l'interno del sito medesimo,
oppure essere incorporato nel-
le singole pagine.
Così come ci si possono es-
sere molte proprietà per un
singolo selettore, possono al-
tresì esserci numerosi seletto-
ri per una singola proprietà. In-
fatti la regola h1,h2,h3,
h4,h5,h6 { color: #003399 } ci di-
ce che tutti i titoli e titolini del
nostro sito saranno blu.
Se volessimo invece modifi-
care uno specifico tag all'inter-
4 I colori del Web
l colore costituisce un ele-
I
mento importante nelle pagi-
ne Web. Ci permette di ag-
giungere informazioni visuali
alla pagina, differenziare vari ti-
pi di testo, mettere in risalto i
collegamenti ipertestuali, ab-
bellire il documento e le tabel-
le con sfondi e con bordi che
ne aumentino l'effetto estetico
e ne facilitino la lettura. Esisto-
no due modi fondamentali per
inserirlo: creare un'immagine
esterna alla pagina oppure
sfruttare le funzioni intrinse-
che di HTML. Il secondo pro-
duce pagine più leggere e più
semplici da gestire e, mediante
l'impiego dei fogli di stile, offre
anche un buon livello di con-
trollo sui risultati. Senza i CSS,
invece, i risultati sono abba-
stanza poveri, soprattutto nel-
la gestione del testo, e capita
spesso di trovare, specie nei si-
ti di vecchia concezione, l'uso
d'immagini anche per rappre-
sentare titoli e brani di testo, il
che porta a pagine pesanti e
molto scomode da aggiornare.
Immaginatevi di correggere un
refuso o modificare un testo
contenuto in un’immagine: do-
vreste aprire un programma ad
hoc (Photoshop, Flash o qual-
siasi altro strumento sia stato
usato per generare il testo-im-
magine) e trasformare l'imma-
46/88
no di una pagina la sintassi di-
venterebbe: <h1 style=font-size:
16px; color: #003399">. Come
vedete è abbastanza semplice
e si sposa perfettamente con la
sintassi originale propria di
HTML.
Per i browser che non rico-
noscono i fogli di stile, il tag
<h1> dell'esempio verrà inter-
pretato normalmente, ignoran-
do l'attributo style.
Esiste anche una seconda
categoria di selettori basati sui
tag nativi HTML, i selettori
contestuali: servono per go-
vernare la visualizzazione del
testo contenuto in un determi-
nato tag al verificarsi di condi-
zioni particolari. Ad esempio
la regola li b {color: red} ci dice
che ogni volta che in una lista
comparirà un testo in grasset-
to dovrà essere di colore ros-
so.  unificatore” (&nbsp;) oppure
gine, anziché semplicemente
intervenire direttamente sulla
pagina HTML. Oggi, con la pre-
cisione tipografica consentita
dai CSS, diventa non solo pos-
sibile, ma anche altamente con-
sigliato, sfruttare al massimo
gli elementi di colore prodotti
in modo nativo dal browser.
Sono diversi i tag HTML che
consentono d'impostare il co-
lore per i propri elementi me-
diante l'uso di attributi come
color (per il corpo dell'elemen-
to), bgcolor (per gli sfondi) e
bordercolor (per i bordi). In tut-
ti i casi, i colori vanno espressi
in due modi possibili: indican-
doli per nome oppure median-
te una notazione esadecimale. I
CSS aggiungono come terza
possibilità, consigliata, l'uso di
una un notazione decimale o
percentuale che indica diretta-
mente i livelli di rosso, verde e
blu da utilizzare nella composi-
zione del colore finale.
Il primo metodo, quello dei
nomi, è poco usato poiché pre-
vede un numero limitato di co-
lori, 16, di cui solo 8 apparten-
gono alla Websafe palette che
vedremo più avanti. Tale meto-
do, inoltre, usa nomi che sono
mnemonici solo in inglese, ma
che sono poco comprensibili
per un italiano (per un riferi-
mento sui 16 colori predefiniti
Le risposte alle domande di pag. 39
1. Si tratta di <p> per la
definizione dei paragrafi e
<h#> per la definizione dei
titoli, a partire da <h1> per
arrivare ad <h6>.
2. Un marcatore o tag fisico
indica il modo in cui una
porzione di testo deve
essere visualizzata sullo
schermo, un marcatore
logico ne definisce invece la
funzione e lascia al browser
la scelta di come
visualizzarla.
3. Il marcatore <pre> mantiene
l’allineamento di un testo
come nel documento
originale. Per conservare gli
spazi bianchi bisogna
utilizzare l'entità “spazio
creare un rientro su ambo i
lati con <blockquote>.
4. HTML 4.01 è la più recente
specifica per la produzione di
siti Web. XHTML 1.0 prevede
una sintassi più rigorosa per
la migrazione verso XML.
5. I Cascading Style Sheets
costituiscono lo strumento
più importante per gestire gli
attributi tipografici di un sito
moderno. Raggruppano tutte
le informazioni stilistiche di
un sito all'interno di un
documento centrale.
6. Creare attributi tipografici per
il testo molto più ricchi e
precisi rispetto a quanto
vedi l'indirizzo http://www. we-
breference.com/html/referen-
ce/color/named.html).
Esiste un ulteriore rischio
nell'uso dei nomi per i colori.
Microsoft ha definito una tavo-
lozza estesa che contiene 140
colori, con nomi molto esotici
come "darkslategray" (grigio
lavagna scuro), "biscuit" (bi-
scotto) o “forestgreen” (verde
foresta), ma che includono an-
che i 16 colori di base. I nomi
aggiuntivi di questa palette fun-
zionano unicamente con Inter-
net Explorer dalla versione 4.0
in avanti e non sono supporta-
ti da nessuno standard, perciò
abituarsi a usare i nomi per i
colori porta facilmente a pro-
durre pagine incompatibili (per
un elenco dei nomi particolari
definiti da Microsoft vedi
http://www.webreference.com/
html/reference/color/propco-
lor.html#HEAD-2 oppure
4a lezione
possibile con
!
HTML,
posizionare gli elementi sulla
pagina con estrema
precisione, inserire elementi
dinamici e multimediali nella
pagina.
7. Gli attributi passano di padre
in figlio con il figlio che ha la
priorità nel variare quel che
gli viene dal padre.
8. Esistono quattro modi
possibili: creando all'interno
della pagina un collegamento
a un file che contiene le
indicazioni di stile per l'intero
sito, integrando il foglio di
stile direttamente nella
pagina, importando
all'interno di questa un foglio
di stile residente in un file
esterno, inserendo le
informazioni di stile
direttamente nel tag HTML
che si vuole modificare.
9. Se non le supporta affatto
non succede niente. Se
invece le supporta solo
parzialmente può produrre
risultati inaspettati in
qualche raro caso.
10.Un insieme di 216 colori che
possono essere visualizzati
senza varianti un Macintosh
oppure un PC Windows.
11.Esistono tre formati usabili
direttamente dal browser:
GIF per grafici e disegni,
JPEG per le fotografie e PNG
http://www.oreilly.com/ cata-
log/wdnut/excerpt/color_na-
mes.html).
Il metodo basato sui valori
esadecimali è invece il più co-
mune perché utilizzabile diret-
tamente dall'interno di un tag
HTML e compatibile con qual-
siasi browser.
Basta indicare i valori RGB
che vogliamo riprodurre per
ottenere qualsiasi genere di tin-
ta. Il risultato è una sequenza
di sei cifre esadecimali come
ad esempio FF0033 (rosso vi-
vo), due per ciascuno dei tre
colori: rosso, verde e blu. Que-
sti colori primari,
combinati sullo
schermo, produco-
no tutti i colori vi-
sibili.
l’articolo
è sul CD
(versione integrale
dell’articolo sul CD)
n. 68

5 Gestire le immagini
l secondo tipo di contenuto ti-
I
pico di una pagina Web sono
le immagini. A differenza del
testo, non si trovano nella pagi-
na HMTL, ma vengono caricate
in quest'ultima per mezzo di
uno speciale marcatore che ne
indica la posizione all'interno
del sito in relazione al docu-
mento oltre che le caratteristi-
che di visualizzazione e l'alli-
neamento rispetto al testo. Nel-
la gestione delle immagini, esi-
stono quindi due fasi: la prima
consiste nel preparare il file che
le contiene e la seconda nel col-
legarlo alla pagina nella posi-
zione in cui vogliamo che ap-
paia quando spedito al browser
del navigatore. Per tale motivo
bisogna conoscere i formati di
file utilizzabili e sapere sceglie-
re quello corretto in funzione
del contenuto, cioè del tipo di
immagine che si vuole ripro-
durre.
Grafica bitmap e vettoriale
Le immagini prodotte a com-
puter si dividono in due grandi
famiglie: le immagini bit map so-
no composte da una mappa di
bit che definisce il colore di cia-
scun punto della mappa rettan-
golare di pixel (picture ele-
ments) che saranno visualizzati
sullo schermo. Sono le uniche
direttamente riconoscibili dai
browser e hanno un formato fis-
so e difficilmente modificabile.
Le variazioni possibili di un'im-
magine bitmap consistono nella
modifica dei colori dei singoli
pixel, nel ridimensionamento
dell'immagine oppure nel rita-
glio di un particolare: tutte ope-
razioni da realizzare mediante
un programma di ritocco come
Photoshop, Image Ready, Fi-
reworks, Gimp e altri. Qualsiasi
operazione è di fatto un ritocco
basato su collage di elementi,
magari presi da immagini diver-
se e sulla modifica del colore di
quelli esistenti. Non è possibile
cambiare in maniera interattiva
le dimensioni o l'orientamento
degli oggetti contenuti in un'im-
magine bit map e nemmeno al-
terare il contenuto di un even-
tuale testo presente. È anche
molto difficile ingrandire l'im-
magine senza perdere qualità,
visto che l'ingrandimento viene
realizzato mediante l'aggiunta di
punti simulati matematicamen-
te mediante una duplicazione
47/88
approssimata di quelli già esi-
stenti.
Le immagini vettoriali hanno
invece la caratteristica di defini-
re ciascun oggetto mediante
coordinate geometriche e per-
ciò ne consentono la modifica a
piacere: ingrandimento, rimpic-
ciolimento, sostituzione ed eli-
minazione di interi elementi
senza lasciare segno, riscrittura
del testo. Sono anche partico-
larmente adatte per produrre
animazioni. Richiedono una no-
tevole "intelligenza" di calcolo,
non disponibile sui normali
browser e perciò possono esse-
re riprodotte unicamente me-
diante speciali aggiunte (plug-
in) che di solito sono concepite
per gestire solo un formato par-
ticolare, come Flash di Macro-
media oppure Acrobat di Ado-
be, e vengono utilizzati solo per
porzioni particolari di un sito
non consultabili in assenza del
plug-in. Esiste anche un formato
vettoriale definito come stan-
dard nel 1999 dal World Wide
Web Consortium (http://www.
w3c.org), lo SVG (Scalable Vec-
tor Graphics), concepito per la
definizione vettoriale d'immagi-
ni bidimensionali e basato su
XML. È stato adottato da nume-
rosi produttori di software, tra
cui la stessa Microsoft che lo ha
scelto per Office 11, perciò lo ve-
dremo affiorare gradualmente
in futuro.
Nella pratica, tutti i principa-
li programmi di modifica delle
immagini bitmap consentono di
produrre un file di lavoro con al-
cuni contenuti vettoriali, come
ad esempio il testo e le forme
geometriche chiave (linea, cer-
chio, rettangolo) che viene quin-
di esportato in formato pura-
mente bitmap al termine dell'e-
laborazione. In questo modo
avremo due file distinti: uno di
lavoro realizzato nel formato
vettoriale tipico del program-
ma, su cui potremo continuare a
intervenire con le nostre varia-
zioni e correzioni e uno da pub-
blicare, salvato in uno dei tre
formati direttamente riconosci-
bili dai browser: GIF, JPEG e
PNG.
I tre moschettieri
della grafica Web
Oggi non esiste modo per
pubblicare un'immagine sul
Web che non passi attraverso
4a lezione
Esempio di codice
HTML per inserire
un'immagine.
Sotto vediamo una
parte della pagina che
è stata utilizzata per
realizzare la figura a
fianco. Le immagini
sono state inserite in
una tabella che
contiene uno stile in
linea sia per la tabella
in quanto tale (vedi la
parte in blu nel tag
<table>) sia per la
didascalia (vedi la
parte in blu nel tag
<caption>).
Il tag <img> inserisce
l'immagine nella cella
della tabella
specificando mediante
l'attributo src, il
percorso di
destinazione e,
mediante l'attributo
align come allinearla
rispetto al testo che
segue direttamente la
chiusura del tag
<img>
Allineare il testo
all'immagine.
Il punto d'inserimento
dell'immagine nella pagina
viene indicato mediante il
marcatore <img> al quale
si associa anche l'attributo
di allineamento rispetto al
testo già esistente
l'adozione dei tre formati stan- che si fondono senza soluzione
dard: GIF, JPEG e PNG. I primi di continuità con lo sfondo
due sono compatibili con tutte HTML della pagina o della tabel-
le versioni di browser in circola- la che le contiene. Consente
zione, mentre il terzo è stato inoltre di creare semplici ani-
supportato in modo imperfetto mazioni.
fino alla generazione 5.x, perciò Il formato JPEG (Joint Pho-
va usato con attenzione, anche tographic Experts Group) s'in-
se di gran lunga preferibile agli dirizza, come indicato dal nome,
altri due. alle immagini fotografiche. Pre-
Il fomato GIF (Graphics In- vede diversi livelli di compres-
terchange Format) è adatto per sione con una perdita progres-
comprimere immagini che usino siva di dati e di qualità. È molto
tinte unite e un numero limitato efficace nella compressione
di colori (256), come ad esem- d'immagini con sfumature e toni
pio grafici, disegni schematici, a variazione continua.
videate. In tale contesto, offre Il PNG (Portable Network
un ottimo livello di compressio- Graphics) è nato dopo l'avvento
ne senza perdita di dati (los- dei principali browser e ha trat-
sless) e una buona qualità di ri- to beneficio dalle prime espe-
produzione che può anche adat- rienze realizzate dai progettisti
tarsi ai colori nativi prodotti da del Web. Si propone come alter-
HTML così da creare immagini nativa evoluta al GIF, ma può an- 
 4a lezione

 che gestire fotografie visto che
permette di riprodurre 16 milio-
ni di colori mediante una com-
pressione senza perdita più effi-
ciente rispetto a quella del for-
mato GIF. Offre anch'esso la pos-
sibilità di creare semplici ani-
mazioni.
Per il momento è sufficiente
ricordare questa regola: GIF o
PNG per grafici, immagini con
tinte unite o animazioni; JPEG
per le fotografie. Nella lezione
dedicata al Web design vedremo
meglio come sfruttare ciascuno
di essi.
Inserire l'immagine
nella pagina HTML
Abbiamo detto che ogni im-
magine costituisce un oggetto
esterno alla pagina Web e che
viene abbinata a quest'ultima
nel momento in cui il server la
spedisce al browser del naviga-
tore. A tale scopo è sufficiente
inserire nel codice HTML della
pagina, lì dove vogliamo che
l'immagine compaia, un riferi-
mento che punti alla posizione
del file che la contiene e che ne
indichi le principali caratteristi-
che di visualizzazione. Ciò per-
mette di svincolare HTML e gra-
fica di conservare tutte le im-
magini in una directory centra-
lizzata, una tecnica particolar-
mente utile nei siti dinamici.
Il marcatore HTML che inse-
risce l'immagine nella pagina è
<img> (image) che deve essere
necessariamente abbinato al-
l'attributo src (source – fonte)
per indicare la posizione del file
grafico. Un esempio pratico del
suo uso sarebbe <img
src="/zzz/pcopenlogo.gif"
width="168" height="55" bor-
der="0"> dove si dice che l'im-
magine pcopenlogo.gif si trova
nella cartelletta "zzz" e che va vi-
sualizzata con una larghezza di
168 pixel e un'altezza di 55 pixel,
senza bordo. Altezza e larghezza
non sono indispensabili, poiché
il browser userà automatica-
mente le dimensioni dell'imma-
gine contenuta nel file, tuttavia
sono utili per velocizzare la vi-
sualizzazione della pagina. In-
fatti, sapendo lo spazio da riser-
vare, il browser può comporre
la pagina immediatamente sen-
za aspettare che l'immagine sia
stata caricata per intero. I due
parametri servono anche per vi-
sualizzare l'immagine a dimen-
sioni diverse (solitamente più
piccole) rispetto all'originale.
Questo può essere utile nel caso
in cui la stessa immagine com-
paia in più pagine con risoluzio-
ni diverse e non si voglia pro-
durne più versioni. Non è sem-
pre una strategia vincente poi-
ché costringe il browser a com-
piere un doppio lavoro: scarica-
re un file più grande del neces-
sario e ridimensionarlo, a scapi-
to della velocità di visualizza-
zione della pagina. Può essere
utile solo quando siamo sicuri
che le versioni multiple della
stessa immagine siano viste nel-
la stessa sessione di navigazio-
ne, magari perché sono nella
stessa pagina. In tal caso, il be-
neficio di caricare un solo file in-
vece che diversi compensa i ral-
lentamenti dovuti alla rielabora-
zione.
L'attributo border serve a vi-
sualizzare o meno un bordo blu,
usato per indicare che all'imma-
gine è abbinato un collegamen-
to ipertestuale. È rarissimo tro-
vare siti che usino ancora im-
magini bordate perché il bordo
è decisamente antiestetico e or-
mai inutile, visto che i navigato-
ri suppongono quasi sempre
che tutte le immagini siano clic-
cabili e possono averne confer-
ma semplicemente portandovi
sopra il cursore del mouse.
Un altro attributo molto im-
portante è align usato per alli-
neare l'immagine rispetto agli
elementi che la circondano. Poi-
ché si tratta di un attributo che
modifica l'impaginazione e non
fornisce invece informazioni
strutturali, è stato deprecato da
HTML 4.01 che consiglia di so-
stituirlo con una funzione equi-
valente dei CSS. Tuttavia i pro-
gettisti di siti si sono talmente
abituati a utilizzarlo che non
sparirà tanto presto dalla circo-
lazione. L'attributo align preve-
de cinque valori: il più comune,
left, allinea l'immagine lungo il
margine sinistro della finestra,
tabella o altro elemento in cui si
trova, lasciando il testo fluire
sulla destra. Con right si ottiene
naturalmente l'effetto opposto.
Con top si allinea il margine su-
periore dell'immagine al margine
superiore della prima riga di te-
sto corrente. Il parametro midd-
le allinea la base della prima riga
di testo al centro dell'immagine.
Infine bottom allinea la base del-
la prima riga del testo corrente
alla base dell'immagine. Trovate
un esempio HTML delle varie
modalità nel file "Allineamento
immagine" sul CD Guida.
Un altro attributo importan-
te, ma spesso trascurato è alt
(alternate) che serve a contene-
re una breve descrizione del-
l'immagine da usare nel caso in
cui l'immagine stessa non fosse
visibile, vuoi perché il navigato-
re ne ha disattivato la visualiz-
zazione sul proprio browser,
vuoi perché non è in grado di ve-
derla. La seconda ipotesi si rife-
risce sia a navigatori non-ve-
denti sia a chi utilizza browser
vocali che "leggono" il contenu-
to della pagina al telefono oppu-
re su altro dispositivo di naviga-
zione uditivo (come i navigatori
per automobile). L'uso dell'at-
tributo alt costituisce un requi-
sito per rendere il sito accessi-
bile secondo le specifiche WAI
(Web Accessibilità Iniziative -
http://www.w3.org/WAI/) e sono
ormai diventate obbligatorie in
gran parte dei siti dell'ammini-
strazione pubblica. Un'alternati-
va è longdesc che consente d'in-
serire un link a un altro docu-
mento che descriva il contenuto
dell'immagine.
Chiudono l'elenco degli attri-
buti per le immagini convenzio-
nali hspace e vspace che indica-
no in pixel rispettivamente lo
spazio orizzontale e verticale da
riservare attorno all'immagine.
Vengono usati di rado perché si
applicano uniformemente sui
quattro lati dell'immagine com-
promettendo anche gli allinea-
menti rispetto al testo e alla ta-
bella di layout. Di solito, dell'im-
magine rispetto agli elementi sui
lati che c'interessano viene rea-
lizzata con maggiore precisione
usando celle vuote nella tabella
di layout. 
FrontPage 2002 non è stato provato,
com'era nelle nostre iniziali intenzioni,
in quanto è in arrivo la nuova versione,
contenuta in Office 11. Potete però
trovare una copia dimostrativa integrale di
FrontPage 2002 sul CD GUIDA n.68

In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!

Avete trovato interessante il nostro corso e volete prepararvi a mettere alla prova le competenze acquisite? Per farlo
avrete bisogno di uno spazio vostro sul Web, dove potervi esercitare nello sviluppo di siti campione su server reali.
Ecco quindi la nostra iniziativa, che nasce in acquistare da subito punto verrete inviati alla home page del sito
collaborazione con Register.it, il più il proprio dominio presso di Register, da dove le registrazioni verranno
importante registrar in Italia: nei prossimi Register ad un prezzo scontate in automatico del 40%.
mesi avrete a disposizione gratuitamente per scontatissimo (40% in meno,
un mese l’uso di uno spazio di hosting lo sconto più alto oggi disponibile sul Le registrazioni saranno comprensive di tutto
dedicato, oltre ad una serie di altri servizi mercato). quanto è indicato all’indirizzo
supplementari. Il metodo è semplicissimo: http://we.register.it
In più, dal momento che per poter usare lo dovrete collegarvi al sito Internet /domains/allincluded.html.
spazio di hosting è necessario disporre di un www.register.it/pcopen,
dominio, inserire il codice seguente: x6Wa3P Per il servizio di supporto inviare le e-mail
i lettori di PC Open in esclusiva potranno nel box all’interno della pagina e a questo all’indirizzo support@register.it

48/88
 5a lezione

A scuola con PC Open

Progetto Web Master di Roberto Mazzoni

1 Elementi di design per il Web

a creazione stilistica di un e, al tempo stesso, funzionale. Criteri di base sere lette saltando da un punto

L sito è solitamente appan-

naggio di un Web designer,
vale a dire un professionista
esperto nelle arti grafiche che
ha dimestichezza con gli stru-
menti e le tecniche necessarie.
Tuttavia, il Webmaster può tro-
varsi nella necessità di fare tut-
to da solo oppure di realizzare
nel concreto il progetto impo-
stato da altri. Di conseguenza,
deve conoscere alcuni dei cri-
teri da seguire per realizzare
una pubblicazione elettronica
che sia di buon livello estetico
Abbiamo già affrontato gli
aspetti progettuali per stabilire
le finalità del sito e il tipo di
pubblico che lo visiterà. Cono-
scere il navigatore che pensia-
mo di attrarre è indispensabile
per determinare la ricchezza
dell'interfaccia da fornire (vedi
Tecniche di progettazione del
sito nella prima lezione e Pro-
gettare la pagina nella secon-
da lezione). Una volta compiu-
to questo primo passo, siamo
pronti a disegnare la pagina ve-
ra e propria.
La progettazione di una pa-
gina Web, come per qualsiasi
altro tipo di pubblicazione su
carta o altro supporto, consi-
ste nel collocare gli elementi su
una griglia ordinata, assegnan-
do dimensioni proporzionate e
tracciando un percorso di let-
tura che guidi l'occhio del na-
vigatore attraverso la pagina
nella sequenza che noi deside-
riamo, da sinistra a destra e
dall'alto in basso. Rispetto alla
carta, le pagine Web hanno la
caratteristica peculiare di es-
all'altro perciò è necessario
prevedere diversi punti di at-
tenzione e mettere ben in evi-
denza gli elementi chiave. La
vera arte del design consiste in
realtà nel dosare gli elementi e
gli spazi bianchi. Lo spazio è un
elemento essenziale e comun-
que preponderante nella pagi-
na; può essere bianco oppure
avere il colore dello sfondo, ma
deve immancabilmente com-
parire nella stessa proporzione
armonica degli elementi che
contiene. Una pagina troppo

IL CALENDARIO DELLE LEZIONI

Lezione 1: professionali
Competenze e strumenti • Dimensionare tabelle e celle fluide,
Lezione 5:
(disponibile integralmente dimensionare tabelle con celle miste, Design e multimedialità
sul CD) allineamento spontaneo delle tabelle
il corso è consecutive • Elementi di design per il Web
sul CD • Template con struttura complessa
Lezione 2: n. 69 • Template con tabelle nidificate • La ruota colore
Siti statici e linguaggio • Esercizi
HTML • Grafica e formati di immagini per Internet
(disponibile integralmente
sul CD) Lezione 4: • Link ipertestuali
HTML 4.01 e CSS
• Progettare un sito statico • Tabelle d’immagini
• Progettare la pagina (disponibile integralmente sul CD)
• Pagine HTML e marcatori • Mappe immagine
• Strutturare i contenuti della pagina • Stile e struttura: usare i tag HTML nativi
• Adobe GoLive 6.0 • Il deprecato tag font • Audio e video
• Spiegazione dei tag HTML per una pagina • I marcatori per formattare il testo
vergine • Gestire gli spazi nel testo
• Esercizi su come creare una pagina • CSS e HTML 4.01
vergine e su come progettare un sito • Cosa si può fare con i fogli stile Le prossime puntate
• Quattro tipi di CSS
Lezione 3: • I colori del Web Lezione 6:
Modelli di pagina e tabelle • Gestire le immagini Siti interattivi
(disponibile integralmente sul CD) • Esercizi
• Ereditarietà e innesco a cascata Lezione 7:
• La tabella come elemento strutturale • Proprietà di trasferimento Interazione sul server
• Progettare layout fluidi e statici dei parametri
• Costruire template con le tabelle • Regole di ereditarietà Lezione 8:
di layout • Selettori di classe
• NamoWeb Editor5: per siti statici • Websafe palette Promuovere il sito

49/88

per fare a pugni anche con la
grafica e con le immagini pre-
senti nella pagina. La regola
d'oro del buon designer è che
meno elementi ci sono, specie
se decorativi, migliore sarà il ri-
sultato finale. La pagina sem-
brerà più chiara, elegante e leg-
gibile. Una delle tecniche se-
guite nel design editoriale è
quella di aggiungere tutto ciò
che riteniamo sia necessario e,
una volta soddisfatti, togliere
tutto quel che riusciamo senza
alterare la funzionalità del no-
stro design, a quel punto arri-
veremo a un distillato di stile
efficace.
Il testo, solitamente prepon-
derante, dovrebbe essere scu-
ro su sfondo chiaro o vicever-
sa, e richiamare poca attenzio-
ne. Dev'essere soprattutto leg-
gibile e bisogna distinguere vi-
sivamente il testo corrente dai
titoli, dalle didascalie e dai link
ipertestuali. Questi ultimi sono
La home page di un sito progettato con ordine. Questo è il famoso
www.webpagesthatsuck.com ossia un sito dedicato a promuovere o bocciare le varie storicamente blu e sottolineati,
soluzioni di design che si trovano sul Web. Notate la struttura regolare, dove il testo la tuttavia è facile trovare siti che
fa da padrone e dove compare ampio spazio bianco che dà risalto ai contenuti omettano la sottolineatura e
facilitandone anche la lettura che adottino colori diversi dal
blu originale. L'importante è
affollata sembra disordinata e sfondi colorati vanno utilizzati che i link abbiano caratteristi-
risulta anche difficile da legge- con parsimonia, solo per evi- che costanti nell'intero sito e
re. denziare aree particolari della che siano riconoscibili a colpo
Persino i portali più impor- pagina e mantenendosi co- d'occhio per quel che sono.
tanti, noterete, usano generose munque su tinte pastello, te-
porzioni di bianco benché mo- nui. La leggibilità del testo vie- Coerenza, allineamento,
strino in home page una quan- ne prima di ogni cosa e uno posizione e ripetizione
tità impressionante di link. Gli sfondo di colore intenso finisce Queste sono le quattro paro-
le chiave da tenere a mente
quando si progetta la grafica di
un sito. La coerenza si riferisce
alla costanza con cui gli ele-
menti di riferimento si ripetono
di pagina in pagina conservan-
do aspetto, posizione e dimen-
sione. Il sito avrà sicuramente
diversi modelli di pagina (tem-
plate), ma ci saranno alcuni
elementi che non cambiano,
come ad esempio il logo, le bar-
re di navigazione, i link iperte-
stuali, lo sfondo, eccetera.
Mantenendo invariati questi
elementi, si trasmetterà un'im-
pressione di ordine e si facili-
terà l'orientamento del naviga-
tore che potrà concentrarsi sui
contenuti. L'allineamento è un
criterio fondamentale dell'im-
paginazione tipografica e si ri-
propone anche sul Web. Il testo
e le immagini devono mantene-
re un allineamento regolare tra
loro e rispetto alla griglia di
layout. È anche possibile sfrut-
tare variazioni di allineamento
Questa è invece una delle pagine recentemente bocciate da WebPagesThatSuck. È un
garbuglio di colori e di elementi, alcuni animati, che sconcertano il navigatore
rispetto alla norma per mettere
impedendogli di capire dove sia capitato e dove possa andare da quel punto. in evidenza elementi particola-
Graficamente divertente, ma decisamente bocciata in termini di utilità per il Web ri, come ad esempio un titolo
50/88
5a lezione
centrato rispetto al testo che
invece è allineato a sinistra.
La posizione degli elementi
identifica la sequenza con cui
vogliamo che il navigatore li
veda. In alcuni casi fornisce
informazioni anche sul tipo di
contenuto. Ad esempio, una di-
dascalia di solito si trova vicino
all'immagine a cui si riferisce,
gli elementi di navigazione si
trovano sui bordi laterali op-
pure in alto e in basso, e via di
seguito. Inoltre la scelta della
posizione serve anche a bilan-
ciare il "peso" di un elemento
così da non rendere la pagina
sbilanciata. Ad esempio se
avessimo le immagini tutte da
una parte e il testo dall'altra
non percepiremmo un effetto
armonico.
La ripetizione è simile alla
coerenza, ma consiste nel ri-
proporre alcune informazioni
che vogliamo far ricordare al
navigatore, siano esse un bra-
no di testo che spiega discreta-
mente la natura del sito, un
piccolo motivo grafico che
contrassegna ripetitivamente
un certo tipo di contenuto, una
barra di navigazione globale,
presente in tutto il sito e via di-
cendo.
Dosare il colore
Il colore è notoriamente l'e-
lemento più visibile all'interno
di una pagina e perciò gli ele-
menti colorati dovrebbero es-
sere usati con attenzione, così
da non sopraffare l'attenzione
del navigatore. Usate tinte po-
co intense per le grandi aree,
come gli sfondi e le cornici. È
anche importante che i colori
presenti sulla pagina siano tra
loro compatibili, vale a dire che
si sposino bene insieme. Il loro
abbinamento è un'arte con re-
gole precise di cui parliamo più
avanti nell’articolo, ma esisto-
no anche strumenti che aiuta-
no a scegliere le combinazioni
adatte, vedi ad esempio l'utility
gratuita SLUGS da integrare nel
programma gratuito HTML-Kit
di cui abbiamo parlato in que-
sto corso, che seleziona per
voi i colori complementari ri-
spetto alla base che avete iden-
tificato e li rapporta anche in
termini di saturazione e gra-
dienti d'intensità (passaggio da
un colore all'altro con le princi-
pali tinte intermedie).
Parlando di colori, dovrete
anche decidere se uniformarvi
alla Websafe palette (vedi la
scorsa lezione), il che sarebbe 
 5a lezione

 consigliabile per lo meno negli
elementi di navigazione.
Ancora più visibili dei colori
sono le fotografie e gli elemen-
ti grafici, specie se tridimen-
sionali. Le fotografie aggiungo-
no anche informazioni di con-
tenuto, ma è bene ricordare
che ogni immagine aggiunta au-
menta il tempo di scaricamen-
to della pagina. Il rallentamen-
to diventa particolarmente vi-
stoso con immagini di grandi
dimensioni e le pagine che con-
tengono un gran numero d'im-
magini diventano inaccessibili
a chi usi browser non conven-
zionali (come telefonino, PDA,
eccetera) e difficili da aggior-
nare.
Gli elementi grafici 3D sono
invece spesso una parte inte-
grante del sistema di naviga-
zione del sito. L'effetto tridi-
mensionale è facilmente realiz-
zato aggiungendo un'ombra al-
la figura, icona, pulsante o bar-
ra di navigazione, e creando
bordi smussati. L'uso di grafica
per le barre di navigazione ne
aumenta la visibilità, ma ne
complica la gestione.
L'uso delle icone può essere
invece esteticamente efficace,
ma bisogna ricordarsi di ag-
giungere sempre un testo che
spieghi la funzione di ciascuna,
poiché non sempre il navigato-
re capisce il significato dell'ico-
na semplicemente guardando-
la, anche se a noi potrebbe ri-
sultare del tutto evidente.
Immagini in movimento
per dare vita alla pagina
Il prossimo elemento a salire
nella nostra graduatoria di vi-
sibilità sono le immagini in mo-
vimento, balzano all'occhio più
di qualsiasi altra cosa e contri-
buiscono a differenziare il Web
dalla carta stampata. Qui gli
esperti di usabilità sono con-
cordi: mai superare i due ele-
menti per pagina. Nella realtà si
finisce per averne diversi an-
che perché i banner e i bottoni
pubblicitari sono spesso ani-
mati e si sommano agli ele-
menti dinamici già presenti nel
sito.
Il sistema più semplice e dif-
fuso per creare animazioni con-
siste nello sfruttare una funzio-
ne del formato GIF che permet-
te di combinare tra loro diversi
"fotogrammi", tutti dello stesso
formato, e mostrarli ciclica-
mente al posto dell'immagine
di partenza. Il GIF animato è fa-
cile da realizzare e compatibile
con qualsiasi browser. Presen-
ta solo l'inconveniente di appe-
santire il file che lo contiene. Il
secondo elemento di animazio-
ne molto diffuso è Macromedia
Flash, un programma che pro-
duce animazioni grafiche di na-
tura vettoriale, ossia definite
per mezzo di formule matema-
tiche.
Ciò permette di ottenere ri-
sultati molto più raffinati ri-
spetto al GIF con file molto più
leggeri, ma impone l'impiego
di uno speciale software da ab-
binare al browser (plug-in) che
nel caso di Flash è spesso inte-
grato nelle versioni più moder-
ne dei principali browser. Esi-
stono soluzioni di animazione
ancora più complesse che pre-
vedono l'inserimento di filmati
o di sequenze prodotte con al-
tri software.
Ciascuna di questi richiede
tuttavia speciali plug-in oppure
veri e propri applicativi, non di-
sponibili a tutti i navigatori
benché gratuiti.
L'ultima novità in materia di
grafica vettoriale per il Web è il
formato SVG (Scalable Vector
Graphics) che costituisce uno
standard nato con il nuovo lin-
guaggio XML e che richiede an-
ch'esso l'impiego di plug-in gra-
tuiti, ma che in prospettiva di-
venterà parte integrante dei
browser. SVG sarà probabil-
mente uno dei formati di riferi-
mento del futuro, ma per il mo-
mento la scelta per le anima-
zioni sul Web si concentra su
GIF, e la relativa evoluzione
PNG, e su Flash. 

2 La ruota colore del Web

armonia dei colori costi- tre il colore complementare del

L’
tuisce un elemento cen-
trale per qualsiasi proget-
to grafico. Il contrasto e gli ab-
binamenti vanno studiati ba-
sandosi sui rapporti esistenti
in natura. Nelle arti grafiche,
esiste un oggetto chiamato ruo-
ta colore (colorwheel) che
identifica i tre colori primari
(rosso, giallo e blu) e li pone in
relazione ai loro complementi e
omologhi. Nel Web usiamo una
ruota colore differente basata
sul modello RGB che, come ab-
biamo visto, utilizza un colore
primario diverso: il verde al po-
sto del giallo, mantenendo inal-
terati gli altri due: rosso e blu.
La ruota colore del Web, alla
pari di quella tradizionale, defi-
nisce una serie di relazioni spe-
cifiche tra i diversi colori al fine
di ottenere precisi effetti di ar-
monia e di contrasto. Ogni co-
lore primario ha un colore
complementare che si trova
nella posizione immediatamen-
te opposta sulla ruota. La com-
binazione dei due produce un
forte impatto visuale, pur man-
tenendo l'armonia dell'insieme.
Il colore complementare del
blu ad esempio è il giallo, men-
rosso è il ciano (azzurro), infi-
ne il colore complementare del
verde è il violetto.
Se invece volete realizzare
un effetto meno contrastato
potete scegliere colori analo-
ghi che si trovino immediata-
mente a fianco del colore di ri-
ferimento scelto. Nel caso del
giallo i colori analoghi sono l'a-
rancione e il verde chiaro, per
il blu sono il blu chiaro e il vio-
la, eccetera.
Esistono diverse altre com-
binazioni per le quali vi riman-
diamo all'articolo Color Har-
mony pubblicato sul sito
http://builder.cnet.com, quel
che conta è ricordare che i co-
lori vanno abbinati in modo ar-
monico seguendo regole ben
precise. La scelta del colore di
riferimento, poi, è importante
per stabilire la natura del sito.
Avrete un effetto caldo usando
i colori del fuoco (rosso, aran-
cione) oppure freddo usando i
colori dell'acqua e dell'aria (blu
e verde). Per un'analisi com-
pleta delle armonie cromatiche
rimandiamo al testo Il colore
nel Web di Molly E. Holzschlag,
edito da Apogeo. 
Questa è un riproduzione della ruota
colore per il Web. Rispetto alla ruota
colore tradizionale, vediamo che il
giallo è stato sostituito dal verde
come colore primario, mentre
rimangono invariati gli altri due: blu e
rosso. Combinando i tre colori primari
in diverse percentuali si ottengono
tutti gli altri colori. La ruota serve per
scegliere accostamenti armonici.
Nell'esempio vediamo che il rosso
sta bene con l'azzurro che è il colore
complementare oppure con l'arancio
e il violetto che sono analoghi.
Si possono anche combinare il rosso
e i due colori che sono di fianco
all'azzurro (blu chiaro e il la banda
più scura del verde), i cosiddetti
complementari separati
L'utility SLUGS, da utilizzare in
abbinamento all'editor HTML-Kit che
abbiamo presentato all'inizio di
questo corso, vi guida nella selezione
dei colori armonici.
Basta selezionare il colore di
riferimento, che compare al centro,
per vedere il colore complementare
(inverse), gli analoghi (near), gli split
complementari e la triade
(altri due colori che sono equidistanti
sulla ruota rispetto a quello di
riferimento).
L'utility è disponibile al seguente
indirizzo:
http://www.chamisplace.com/asp/
hkp.asp?f=cmslugs

51/88
3 Grafica per il Web
opo il testo, la grafica co-
D stituisce il contenuto più
comune per un un sito
Web. Nella scorsa lezione ab-
biamo visto come inserire e al-
lineare un'immagine all'inter-
no di una pagina HTML, ora ve-
diamo come costruirne una al
fine di ottenere il miglior risul-
tato possibile. La prima cosa
da capire è che l'immagine che
voi vedete sul vostro schermo
non sarà mai esattamente
quella che il navigatore guar-
derà sul proprio computer. Le
differenze tra i browser, tra le
diverse famiglie di computer e
anche semplicemente nella ca-
librazione dei due monitor
produrranno variazioni anche
molto vistose. Di conseguenza
non c'è scopo nel puntare alla
miglior qualità possibile e con-
viene semmai cercare di ridur-
re al massimo il peso dell'im-
magine pur conservandone i
contenuti. Una simile opera-
zione prende il nome di "otti-
mizzazione" e costituisce
un'arte di per sé stessa. Essa
combina la scelta del formato
di memorizzazione più adatto
al tipo d'immagine e la defini-
zione della dimensione, della
qualità e del numero di colori
presenti al suo interno.
Il primo passo consiste nel
conoscere lo strumento che
dovrà visualizzare la nostra
immagine, vale a dire il perso-
nal computer. Esiste una prima
differenza fondamentale tra le
diverse famiglie: il Macintosh
tende a mostrare le immagini
più chiare rispetto alle mac-
chine Windows. Perciò se la-
vorate su un Macintosh dovre-
ste cercare di generare imma-
gini che sembrino un po' più
Queste due immagini sono composte da
colori pieni e perciò si adattano
particolarmente alla compressione in
formato GIF. Quest'ultima codifica le
variazioni di colore registrate su ciascuna
riga orizzontale, dunque vediamo che la
seconda immagine, con le righe
orizzontali, viene compressa molto
meglio della prima, pur avendo identiche
dimensioni e numero di colori
52/88
chiare del dovuto, così da ap-
parire accettabili sullo scher-
mo di un PC. Viceversa, cerca-
te di produrre immagini che
sembrino un po' più scure del
dovuto sullo schermo del PC
per fare in modo che non ap-
paiano slavate quando visua-
lizzate su un Mac. Attenzione
anche alle differenze tra Linux
e Windows che, per quanto
meno evidenti, comunque esi-
stono.
Inoltre, con la diffusione
progressiva dei monitor LCD e
dei notebook, in aggiunta ai
comuni tubi a raggi catodici,
dovete mettere anche in conto
sostanziali difformità nella re-
sa dei colori a seconda del tipo
di display usato dal navigato-
re. Già era difficile garantire
una ragionevole uniformità tra
CRT di marca e tipo diverso;
ora con gli LCD le differenze
tra modelli diventano macro-
scopiche. Pertanto, nel creare
immagini da zero, bisogna evi-
tare accostamenti di colori
troppo vicini tra loro, con
scarso contrasto, perché po-
trebbero sparire completa-
mente sul monitor di qualcun
altro rendendo l'immagine del
tutto indistinguibile e bisogna
anche prepararsi a condurre
test periodici su macchine di-
verse.
La risoluzione corretta
Lo schermo di un computer
visualizza tipicamente 72 pun-
ti per pollice, mentre la gran
parte delle immagini predispo-
ste per la stampa su carta ha
una risoluzione di 300 punti
per pollice. Ciò significa che, a
parità di grandezza visiva, il fi-
le visualizzato sullo schermo
sarà di quattro volte più picco-
lo rispetto a quello inviato alla
stampante. Una variante sul te-
ma è rappresentata dai moni-
tor di grandissime dimensioni
che visualizzano 96 punti per
pollice, ma di solito si tiene co-
munque valido il valore di 72,
lasciando che poi l'immagine si
adatti automaticamente ai vari
display.
La conversione da 300 a 72
punti viene solitamente ese-
guita mediante un programma
di fotoritocco che riduce il nu-
mero complessivo di pixel ese-
guendo in alcuni casi anche la
compressione e l'ottimizzazio-
ne del risultato. È bene salvare
la copia di dimensioni ridotte
separatamente perché non
sarà più possibile tornare alla
risoluzione originale compien-
do il percorso inverso. Infatti, i
programmi di fotoritocco se la
cavano benissimo nel togliere
informazioni per rimpicciolire,
ma una volta che le hanno eli-
minate queste non possono es-
sere ricostruite se non me-
diante formule matematiche
che sintetizzano i punti man-
canti, ma che producono un ef-
fetto finale posticcio. Mante-
nere una copia dell'originale
serve anche per poter realiz-
zare diverse varianti della stes-
sa immagine partendo sempre
dalla situazione migliore. Infat-
ti, se aveste deciso di usare il
comunissimo formato JPEG,
l'elaborazione e il salvataggio
continui della stessa immagine
ne ridurranno progressiva-
mente la qualità. Il difetto di
questo formato è di perdere
informazioni ogni volta che si
salva l'immagine, anche se non
si eliminano punti o non la si
modifica in alcun modo. Dun-
que la scelta e la corretta ge-
stione del formato costituisce
un passo fondamentale nella
preparazione di elementi grafi-
ci per il Web.
L'eclettico GIF
Il Graphic Interchange For-
mat è il più comune tra i for-
mati per il Web. Si presta parti-
colarmente per la codifica di
disegni e grafici, ma può esse-
re utilizzato anche per la me-
morizzazione di fotografie nel
caso in cui volessimo usare
due sue peculiarità: l'anima-
zione e l'effetto trasparenza.
Gode del supporto di tutti i
browser in circolazione, offre
una compressione molto effi-
cace e permette anche di crea-
re immagini con caricamento
progressivo (interfacciate) per
sveltire la visualizzazione della
pagina senza rinunciare alla
qualità finale. Inoltre la com-
pressione offerta da GIF è di ti-
po lossless vale a dire che non
comporta la perdita di dati, co-
me invece accade nel caso del
JPEG. Va comunque notato che
i programmi più moderni con-
sentono di eseguire una com-
pressione con perdita anche
con il formato GIF al fine di 
 5a lezione

 ridurne le dimensioni oltre
quel che si riesce a fare agendo
sul numero di colori.
Il formato GIF comprime
l'immagine esaminando in oriz-
zontale il contenuto di ciascu-
na riga e codificando qualsiasi
variazione di colore. Ciò signi-
fica che immagini con ampi
spazi di tinte unite vengono
compressi con grandissima ef-
ficienza perché quando il colo-
re non cambia, il formato si li-
mita a registrare il valore ini-
ziale e il numero di pixel per
cui deve essere ripetuto. L'effi-
cienza diminuisce al crescere
degli elementi di colore diver-
so che tagliano l'immagine in
verticale e precipita in presen-
za di sfumature di colore. Un
esempio classico per vedere
la differenza consiste nel com-
primere un'immagine a strisce
verticali e confrontarla con la
stessa immagine a strisce oriz-
zontali, su sfondo uniforme: la
seconda, pur contenendo lo
stesso numero di pixel e di co-
lori, avrà una dimensione mol-
to inferiore perché le variazio-
ni su ciascuna riga saranno po-
chissime (vedi le figure di
esempio).
Il limite importante del for-
mato GIF sta nel fatto che può
memorizzare al massimo 256
colori per ogni immagine. Que-
sti possono essere diversi ogni
volta e costituire un campio-
namento di quel che l'immagi-
ne contiene (tavolozza adatta-
ta - adaptive palette) oppure
provenire dalla tavolozza di si-
stema utilizzata sul particolare
computer che dovrà visualiz-
zare l'immagine. Una terza so-
luzione consiste nello sceglie-
re colori presi dalla Websafe
palette (di cui abbiamo parlato
nella scorsa lezione) che elen-
ca i 216 colori visualizzabili
senza distorsioni sia su Macin-
tosh sia su PC.
Una quarta soluzione, abba-
stanza comune nei programmi
di grafica moderni, consiste
nel costruire una tavolozza
adattata che contenga anche
colori Websafe. Il programma
esamina tutti i colori della ta-
volozza e ogni volta che ne tro-
va uno vicino a un corrispon-
dente colore Websafe lo sosti-
tuisce con quest'ultimo (Ma-
cromedia Fireworks MX chia-
ma questa particolare tecnica
Websnap, Adobe Imageready
la chiama invece Selettiva). In-
fine abbiamo una quinta possi-
bilità che consiste nel creare
una palette che dà priorità ai
colori che sono più facilmente
percepibili dall'occhio umano,
indipendentemente dalla fre-
quenza con cui vengono usati
nell'immagine (palette Percet-
tiva, usata da ImageReady e
Photoshop).
I programmi di grafica com-
patibili con il formato GIF soli-
tamente propongono in auto-
matico una palette che conser-
vi la miglior fedeltà possibile
dell'immagine e ci permetto-
no, poi, di "ottimizzarla" inter-
venendo su due parametri fon-
damentali: il numero di colori
nella palette e la presenza o
meno del dithering. Quest'ulti-
mo è un sistema per simulare
le gradazioni utilizzando la

Tutti i moderni programmi di elaborazione delle immagini (qui vediamo ImageReady di

Adobe) offrono la possibilità di aprire finestre multiple in cui confrontare l'immagine
originale con le versioni ottimizzate. Qui vediamo una scritta di testo che si adatta
particolarmente bene alla codifica GIF. Nella prima finestra abbiamo una versione con
palette selettiva a 32 colori (ce ne sono 17 in totale nell'immagine) che pesa 2,52
Kbyte. Nella seconda finestra in alto abbiamo la stessa immagine ridotta però a 2
colori (il minimo) che pesa 1,386 KB, ma che perde la possibilità di utilizzare le
sfumature di arancione e di blu per realizzare l'antialiasing come vedremo. Nelle altre
due finestre abbiamo utilizzato il formato JPEG con qualità bassa (30) e bassissima. Le
dimensioni sono rispettivamente 6.06 Kbyte e 4,105 Kbyte, perciò entrambe superiori
al formato GIF e con una perdita di qualità vistosa

Un esempio di ottimizzazione d'immagine GIF realizzata mediante la riduzione dei

Qui vediamo la stessa immagine precedente, ingrandita per osservare meglio i
contorni del testo. Notiamo che la versione GIF a 2 colori mostra calettature visibili
poiché vengono a mancare gli altri colori intermedi che in questa immagine servono per
realizzare l'antialiasing. Volendo è possibile scendere a 8 bit, comprimendo l'immagine
senza perdere l'effetto aliasing in modo apprezzabile. Qui vediamo anche i brutti
risultati sul testo del formato di compressione JPEG, del tutto inadatto a elaborare
immagini con colori pieni
colori. Nella finestra in altro a sinistra vediamo un logo che richiede 32 colori per
essere rappresentato fedelmente, la dimensione dell'immagine è di 5,103 Kbyte. Nella
finestra a fianco abbiamo ridotto i colori a 16 e la dimensione è scesa a 3,178 Kbyte,
ma notiamo una leggera alterazione del petalo Magenta in basso a destra. Passiamo
alla terza finestra, in basso a sinistra. Qui siamo scesi a 8 colori con una dimensione
di 2,434 Kbyte, meno di metà del file originale. Il logo è ancora riconoscibile benché il
magenta e il rosso non siano più fedeli e la scritta abbia cambiato colore. La quarta
versione con soli 4 colori è diventata naturalmente irriconoscibile

53/88
 camente se grammi di ottimizzazione per
esistono colo- Web aprono due o quattro fi-
ri a sufficien- nestre che permettono di con-
za. frontare visivamente l'origina-
Il numero dei le di partenza con la versione
colori è l'ele- ottimizzata, della quale posso-
mento che più no esistere contemporanea-
di qualsiasi al- mente quattro varianti.
tro influenza
L'immagine che contiene il bottone di questo esempio ha uno
la dimensione GIF trasparente e animato
sfondo blu identico allo sfondo della pagina HTML in cui finale di Due varianti preziose del
s'inserisce. In tal modo i due si fondono e il bottone si fonde un'immagine. formato GIF ci permettono di
perfettamente con la pagina Partendo da creare effetti grafici ancora più
una qualsiasi interessanti. La prima consi-
delle numero- ste nell'attribuire la trasparen-
se palette di- za a uno dei colori contenuti
sponibili per nella palette dell'immagine.
il formato GIF, Può trattarsi di un colore qual-
possiamo ri- siasi: una volta selezionato, di-
durre seletti- venterà trasparente e lascerà
vamente il nu- intravedere il colore di sfondo
mero di colori impostato via HTML per l'ele-
così da au- mento HTML che contiene
Cambiando lo sfondo della pagina diventa evidente lo sfondo mentare la l'immagine (tabella o pagina).
dell'immagine compressione Questo genere di tecnica è
dell'immagi- utile quando un'immagine de-
combinazione di colori già pre- ne. Di default si parte con una ve fondersi con la pagina senza
senti nell'immagine. Non au- tavolozza di 256 colori, si può mostrare il classico bordo ret-
menta perciò il numero di co- quindi scendere a 128, 64, 32, tangolare. In pratica il soggetto
lori, ma incrementa comunque eccetera, oppure prendere la dell'immagine si mescola con
la dimensione del file aggiun- scorciatoia e chiedere al pro- la pagina. Esistono due metodi
gendo informazioni che mi- gramma di generare una palet- per realizzare tale soluzione. Il
gliorano soprattutto le even- te "esatta", cioè contenente l'e- primo consiste semplicemente
tuali sfumature. Un parente satto numero di colori effetti- nel creare uno sfondo per l'im-
prossimo del dithering è l'an- vamente presenti nell'immagi- magine che sia identico a quel-
tialiasing, che consiste nell'u- ne. Le due strade non sono lo della pagina. Per far questo
sare sfumature di colore per equivalenti. La tavolozza esat- bisogna conoscere bene i colo-
attenuare i bordi netti dei ca- ta consente infatti di eliminare ri HTML e la Websafe palette in
ratteri tipografici di grandi di- semplicemente le posizioni modo da non avere differenze
mensioni, riducendone l'effet- non occupate all'interno della visibili. Prendiamo l'esempio
to scalettatura. Il dithering è codifica GIF e produce effetti di un bottone che vogliamo in-
direttamente attivabile e disat- apprezzabili solo su immagini serire nella nostra home page.
tivabile nel momento in cui ge- che abbiamo già pochi colori Assegniamo al rettangolo che
neriamo l'immagine, l'antialia- di partenza. La riduzione ma- lo circonda un colore identico
sing viene realizzato automati- nuale forzata dei colori, inve- a quello che sarà lo sfondo del-
ce, permette la pagina. La differenza tra i
di scalare la due non sarà visibile sul no-
dimensione stro computer e l'immagine si
del file in mo- fonderà perfettamente con il
do controlla- resto della pagina. Di solito i
to, alterando- programmi di elaborazione
ne l'aspetto, delle immagini per il Web con-
ma in modo sentono di definire i colori me-
poco visibile. diante gli stessi codici esade-
Potete anche cimali che useremo per lo sfon-
bloccare par- do della pagina HTML, perciò
ticolari colori sarete matematicamente sicuri
che non deb- del risultato.
bano essere Tuttavia, nel caso volessi-
eliminati dalla mo cambiare lo sfondo della
scalatura, ar- pagina, saremmo anche co-
rivando a di- stretti a modificare ogni singo-
mensioni che lo bottone. Per ovviare a tale
sono anche problema e per consentire an-
Per creare un bottone con sfondo trasparente, è necessario meno della che l'uso di sfondi colorati in
scegliere come colore di trasparenza lo stesso che attribuiremo metà dell'ori- modo vario (mediante l'impie-
allo sfondo della nostra pagina Web, in questo caso il blu. In tal ginale di par- go d'immagini di background)
modo il programma di grafica costruirà le sfumature di blu
necessarie per favorire la saldatura morbida tra l'immagine e lo
tenza. Per si assegna allo sfondo che con-
sfondo. Nell'esempio in figura vediamo che Fireworks MX ha semplificare torna il nostro pulsante un co-
identificato con gli scacchi grigio-bianchi la zona trasparente e queste scelte, lore trasparente. Un'operazio-
ha generato un contorno bluastro tutt'intorno al pulsante tutti i pro- ne facilissima: basta indica 

54/88
 5a lezione

browser il che aggiunge un ri-

tardo di visualizzazione che
non dipende dal tempo di tra-
sferimento dell'immagine. Per
tale motivo, un'immagine JPEG
sarà sempre più lenta da vi-
sualizzare di un'immagine GIF
di pari dimensioni.
La versione più recente del
formato JPEG consente di re-
golare il livello di compressio-
ne con variazioni di un cente-
simo e di creare immagini che
si visualizzano progressiva-
mente. In quest'ultimo caso
l'immagine compare immedia-
Qui vediamo la stessa immagine a cui è stato attribuito uno Un'immagine con bordo trasparente con bordi irregolari può tamente nella pagina, anche se
sfondo trasparente partendo, nel primo caso, dallo sfondo essere montata su una pagina che contenga un'immagine di sfocata, per poi perfezionarsi
bianco originale e, nel secondo caso, da uno sfondo blu identico background creando un effetto di sovrapposizione perfetto non appena il browser ne com-
a quello previsto per la pagina. Nella prima si nota un bordo
biancastro e alcuni segni spuri che disturbano l'immagine, che pleta l'elaborazione. Per le fo-
sono invece assenti dal secondo tografie il JPEG non è secondo
a nessuno e garantisce effi-
re il colore prescelto per la tra- biancastro e irregolare attorno L'ultima variante del GIF cienze inarrivabili dagli altri
sparenza e il gioco è fatto. alla sagoma della figura. Par- consiste nel formato interlac- due formati: GIF e PNG. Risulta
L'unico accorgimento da tendo invece da uno sfondo ciato, usato di rado perché ap- invece pessimo per le immagi-
eseguire in questa operazione blu che venga poi reso traspa- pesantisce il file e di fatto ag- ni con contorni netti e colori
consiste nello scegliere come rente, la saldatura sarebbe grava il problema che vorreb- pieni, regno incontrastato del
colore di sfondo dell'immagine perfetta. be risolvere. Un'immagine in- formato GIF.
a cui assegnare la trasparenza L'animazione è la seconda terlacciata compare sul video
il medesimo colore che pen- grande prerogativa del forma- un po' per volta. La tecnica è PNG tuttofare
siamo di realizzare per lo sfon- to GIF e consente di riunire stata sviluppata per consenti- Il formato Portable Network
do della nostra pagina. Sembra due o più fotogrammi della re al browser di visualizzare Graphics nasce per rimpiazza-
un controsenso, ma in realtà stessa dimensione all'interno una versione a bassa risolu- re GIF e per sostituirsi a JPEG
deriva dalla necessità pratica di un singolo file in modo da vi- zione dell'immagine non appe- in alcune circostanze. Alla pari
di creare una transizione sualizzarli ciclicamente. Il for- na sia disponibile 1/8 del suo di GIF, offre l'effetto di traspa-
uniforme tra i bordi arrotonda- mato consente di creare un ci- contenuto, proseguendo poi renza, molto migliorato quali-
ti dell'immagine e lo sfondo clo ripetitivo che prosegue con la costruzione della pagina tativamente poiché realizzato
circostante. In questi punti di senza interruzione oppure ter- mentre l'immagine termina di a vari livelli, e la generazione
transizione il programma di mina dopo un certo numero di caricarsi e diventa perfetta- d'immagini interlacciate la cui
elaborazione dell'immagine ripetizioni. Permette anche di mente visibile. La tecnica svel- visualizzazione comincia dopo
crea sfumature che tendono definire l'intervallo di tempo tisce la navigazione di pagine che è stato caricato 1/64 del fi-
verso il colore circostante così tra un'immagine e la successi- con immagini di grandi dimen- le e non 1/8 come nel caso del
da ottenere l'effetto di antialia- va. In termini pratici, la se- sioni, tuttavia è altamente GIF.
sing (rimozione delle scaletta- quenza d'immagini apparirà sconsigliata per eventuali ele- A differenza del GIF, codifica
ture e frastagliature dai bordi). come un singolo elemento e menti di navigazione grafici vi- 16 milioni di colori e non con-
Nel caso in cui lo sfondo fosse verrà inserita nella pagina sto che l'utente sarebbe co- sente l'animazione. Viene uti-
bianco e lo rendessimo traspa- HTML come qualsiasi altra im- stretto ad aspettare prima di lizzato come formato interno
rente per poi montare l'imma- magine. È possibile creare un riuscire a capire di che cosa si da alcuni programmi di elabo-
gine che ne risulta su una pagi- GIF animato anche con sfondo tratti. razione grafica, come Fi-
na blu, vedremmo un contorno trasparente. reworks, poiché memorizza
JPEG per le fotografie anche i vari stadi intermedi di
Il formato standard per la re- manipolazione così da modifi-
gistrazione di immagini foto- care il testo e altri elementi
grafiche è il Joint Photographic geometrici vettoriali inseriti
Experts Group. Offre il massimo nella pagina anche dopo che
rendimento in tutte le situa- l'immagine è stata salvata. Po-
zioni in cui esistano sfumature tendo arrivare a 48 bit di colo-
di colore e passaggi tonali mor- re e 16 bit di scala di grigio è
bidi. Codifica fino a 16 milioni possibile utilizzarlo anche in
di colori e realizza una com- sostituzione del JPEG, specie
pressione di qualità regolabile quando si vuole l'effetto tra-
che comporta in ogni caso la sparenza per un'immagine fo-
perdita parziale delle informa- tografica. Nella compressione
zioni originali, senza che tutta- non si perdono informazioni e
via tale perdita risulti evidente perciò è possibile elaborare e
all'occhio, salvo quando si esa- salvare ripetutamente lo stes-
gera con la compressione. so file senza scadere in qualità.
Questa foto è riprodotta in quattro formati diversi. Il primo è l'orginale salvato in
A differenza del formato GIF, Il suo difetto sta nel suppor-
formato TIFF, usato nel mondo dell'editoria perché comprime senza perdere il JPEG richiede anche l'opera- to ancora parziale offerto dai
informazioni. Gli altri tre mostrano quanto si perda in qualità con GIF o PNG cercando di zione di decompressione vari browser, soprattutto alla
comprimere un'immagine allo stesso livello ottenibile con JPEG quando viene visualizzato dal trasparenza variabile. 

55/88

4 Link ipertestuali
l Web esiste grazie al concet-
I to di ipertesto mediante il
quale diversi documenti pos-
sono essere consultati in ordi-
ne libero sfruttando collega-
menti reciproci.
Questi ultimi prendono il no-
me di collegamenti ipertestua-
li e consentono di saltare da
una posizione all'altra nella
stessa pagina, da una pagina a
un'altra dello stesso sito e da
un sito all'altro. Basta cliccare
sul link e si viene immediata-
mente proiettati verso la desti-
nazione richiesta.
Esistono due modi per inse-
rire un link ipertestuale in una
pagina Web: nella forma di te-
sto e nella forma di immagine.
In entrambi i casi, si sfrutta lo
stesso marcatore, denominato
“ancora” il quale a sua volta
esiste in due varianti.
La più comune prende il no-
me di “ancora sorgente” per-
ché identifica il punto di par-
tenza del collegamento e ne
fornisce la descrizione della
destinazione. È il classico link
che troviamo nella maggior
parte delle pagine Web e sul
quale clicchiamo per saltare a
un'altra pagina. La seconda va-
riante è invece l'ancora di de-
stinazione utile per marcare il
punto di arrivo di un particola-
re link all'interno della pagina.
La si usa solitamente per
creare link a porzioni interne
dello stesso documento oppu-
re per fare in modo che la pagi-
na richiamata da un link ester-
no si apra in corrispondenza di
un particolare paragrafo, anzi-
ché alla prima riga.
Ancore sorgente
Il testo o l'immagine che de-
limitano il "punto caldo" (hot
spot) del collegamento sorgen-
te, cioè il punto da cliccare, so-
no racchiusi tra i tag <a> e </a>.
La destinazione del link è inve-
ce indicata mediante l'attributo
href (hypertext reference) che
può contenere un collegamen-
to relativo (pertinente al sito in
cui già ci troviamo) oppure as-
soluto (diretto a un sito ester-
no). All'interno di un sito, la
gran parte dei link saranno re-
lativi, vale a dire che indiche-
ranno la posizione del docu-
mento di destinazione in rela-
zione alla directory principale
del sito (collegamento relativo
56/88
completo) oppure in relazione
al documento di partenza (col-
legamento relativo indiretto o
diretto – vedi l'articolo Colle-
gamenti assoluti e relativi nel-
la seconda lezione).
Prendiamo ad esempio il col-
legamento che dalla home pa-
ge del nostro corso porta alla
prima pagina della quinta le-
zione: <a href="Lezione_5/Le-
zione_5.htm">quinta lezio-
ne</a> vediamo che la frase
che comparirà sulla pagina è
"quinta lezione" e quando ci
cliccheremo sopra, si aprirà la
pagina "Lezione_5.htm" che si
trova nella cartelletta "Lezio-
ne_5" collocata un livello sotto
alla cartelletta in cui ci trovia-
mo al momento. Esistono vari
altri attributi, ma il più impor-
tante è target che specifica do-
ve inviare la nuova pagina che
stiamo per aprire. È un attribu-
to indispensabile nei frame, co-
me vedremo più avanti, ma tor-
na utile anche quando voglia-
mo inserire un link esterno e
non vogliamo che il navigatore
abbandoni il nostro sito.
In tal caso basterà impostare
target="_blank" per far aprire al
browser una nuova finestra in
aggiunta a quella da cui siamo
partiti. In alternativa è anche
possibile aprire una nuova fi-
nestra e assegnarle un nome di
fantasia: target="pippo".
In questo caso la nuova pa-
gina verrà aperta in una nuova
finestra denominata "pippo".
Da notare che esiste tuttavia
una differenza sostanziale tra
"_blank" e "pippo". Il primo de-
terminerà ogni volta l'apertura
di una nuova finestra che si ag-
giungerà a quelle già presenti.
Il secondo invece invierà qual-
siasi altra nuova pagina nella
stessa finestra, sostituendo il
contenuto esistente.
Nel caso di link applicati a
un'immagine la sintassi rimane
la stessa salvo aggiungere il
marcatore <img>. Vediamo un
esempio sempre tratto dal no-
stro corso: <a href="Lezio-
ne_5/Lezione_5.htm"><img
src="Lezione_5/immagine.gif"
width="100" height="100" bor-
der="0"></a> ci dice che clic-
cando su immagine nella pagi-
na corrente saremo trasportati
nella pagina Lezione_5.htm che
si trova nella cartelletta Lezio-
ne_5 subito sotto di noi.
5a lezione
Notate che la coppia di tag
<a> e </a> racchiude comple-
tamente il marcatore <img>
con tutte le informazioni relati-
ve all'immagine.
Tra gli attributi previsti da
quest'ultimo notiamo border
che serve a bordare l'immagine
con una cornice blu per indica-
re che vi è associato un link
ipertestuale (prerogativa soli-
tamente non usata per motivi
estetici).
Ancore di destinazione
Le ancore di destinazione
sono usate abbastanza di rado.
È infatti preferibile comporre
documenti brevi che puntino
ad altri documenti altrettanto
brevi che non creare pagine in-
terminabili che necessitino di
riferimenti interni. In ogni caso,
queste ancore possono tornare
utili in alcune situazioni. La lo-
ro caratteristica essenziale
consiste nell'identificare un
punto del documento come de-
stinazione di un collegamento
origine. Tale punto può coinci-
dere con un qualsiasi elemento
HTML (paragrafo, titolo), con
un brano di testo (anche sem-
plicemente uno spazio bianco)
oppure con un'immagine.
La sintassi da usare nel caso
di un elemento HTML è la se-
guente <h1 id="pippo">brano di
testo </a>. Si sfrutta l'attributo
id tipico delle versioni più re-
centi di HTML per identificare
l'elemento a cui vogliamo pun-
tare. Nel caso invece di un bra-
no di testo o di un'immagine, la
sintassi sarà la seguente: <a na-
me="pippo">brano di testo o im-
magine</a>. In entrambi i casi
il link sarà invisibile nella fine-
stra del browser e non sarà
cliccabile proprio perché si
tratta di una destinazione e
non di un'origine. Avrete nota-
to che nei due esempi abbiamo
inserito un nome di fantasia
(pippo) che ci servirà per pun-
tare all'ancora di destinazione
dall'interno di un'ancora di ori-
gine. Supponiamo di voler
creare un link in cima al docu-
mento che faccia scorrere il te-
sto nella finestra fino a rag-
giungere l'ancora di destinazio-
ne. La sintassi sarebbe <a
href="#pippo">testo da clicca-
re</a>. Notate che abbiamo
usato il simbolo di cancelletto
prima di "pippo" per indi- 

 care che si tratta del nome
di un'ancora di destinazione.
Nel caso di un link contenuto in
un documento esterno la sin-
tassi sarebbe: <a href="docu-
mento.html#pippo">testo da
cliccare</a>.
Il documento.html si aprirà
5 Tabelle d’immagini
bbiamo già visto che le ta-
A belle svolgono un ruolo
essenziale per costruire il
layout di una pagina Web. Inse-
rendo brani di testo e immagini
entro le celle di una tabella in-
visibile, possiamo stabilirne le
posizioni e gli allineamenti.
Un impiego particolare di
questa funzione consiste nel-
l'usare la tabella come elemen-
to di unione per più immagini
oppure per gli elementi frazio-
nati di una singola immagine
più grande.
Il primo caso è il più comune
e lo troviamo nella gran parte
dei siti. Prendiamo ad esempio
il sito italiano www.film.it che
parla di novità cinematografi-
che. Se scomponiamo la sua
home page, vediamo che con-
tiene una tabella che salda tra
loro testo, fotografie, pulsanti
navigazione e testatine grafi-
che (vedi la figura).
Il secondo caso adotta inve-
ce una tecnica di frammenta-
zione dell'immagine sviluppata
dai progettisti Web per sveltire
il caricamento di un'immagine
di grandi dimensioni e per usa-
re la stessa immagine come
strumento di navigazione. L'o-
In questa pagina presa dal Web (www.film.it) vediamo cerchiate in rosso e in verde
tutte le immagini che sono state unite mediante la tabella invisibile che regge l'intera
pagina. Nella parte alta di navigazione, il riquadro nero, le immagini si mescolano con
lo sfondo della cella sembrando un tutt'uno
57/88
nella finestra del browser esat-
tamente nel punto contrasse-
gnato dall'ancora "pippo".
La terza variante di link iper-
testuale ci consente d'identifi-
care esplicitamente che le pa-
role che seguono corrispondo-
no a un indirizzo di posta elet-
perazione richiede una certa
dimestichezza con i program-
mi di grafica e prevede la sud-
divisione di un'immagine in
tanti riquadri di dimensione va-
riabile, che saranno uniti me-
diante una tabella così da ri-
comporre visivamente l'imma-
gine originale senza lasciar tra-
sparire la tabella sottostante.
Poiché ogni singola porzione
dell'immagine sarà contenuta
in una cella indipendente e
sarà un'immagine autonoma,
diventerà possibile abbinarle
un collegamento ipertestuale
così da creare un sistema di na-
vigazione grafico (vedi l'esem-
pio). Potremo anche animare
alcune porzioni dell'immagine,
creando un GIF animato per
quel particolare frammento, e
creare i cosiddetti rollover, va-
le a dire cambiamento d'imma-
gine al passaggio del mouse. La
frammentazione (slicing) di
un’immmagine comporta note-
voli benefici anche nel regolare
il peso della pagina. Supponia-
mo infatti di avere una figura
che contenga ampi spazi a tin-
ta unita con magari porzioni di
testo al loro interno. Realizzare
il tutto in grafica vorrebbe dire
tronica e che perciò, cliccan-
dovi sopra, sarà possibile in-
viare un messaggio diretta-
mente a quel destinatario.
Si tratta di una funzione mol-
to usata per facilitare il contat-
to con il gestore del sito o con
altre persone.
appesantire la pagina e compli-
care qualsiasi successiva mo-
difica del testo. Mediante la
frammentazione, invece, pos-
siamo rimpiazzare con un sem-
plice sfondo HTML tutte le por-
5a lezione
La sintassi è la seguente: <a
href="mailto:pippo@pippo.com"
>pippo</a> quando il navigato-
re cliccherà su "pippo" gli si
aprirà automaticamente il pro-
gramma di posta e nella casella
del destinatario comparirà l'in-
dirizzo "pippo@pippo.com". 
zioni dell'immagine che hanno
una tinta unita e che magari
contengono testo. Oggi esisto-
no numerosi programmi con
strumenti dedicati alla fram-
mentazione automatica delle
Qui vediamo Fireworks
MX usato per
suddividere una foto in
porzioni che andranno a
riempire altrettante
celle di una tabella che
viene generata
automaticamente dal
programma
Ecco la tabella
visualizzata all'interno
di Dreamweaver MX.
Notiamo le celle e le
singole immagini che vi
sono contenute. A
ciascuna possiamo
assegnare un link
ipertestuale così da
creare un elemento
grafico di navigazione
Una volta visualizzata
nel browser, l'immagine
sembra completamente
ricomposta e la tabella
sottostante sarà
invisibile. Tuttavia se
porteremo il cursore
sulle diverse porzioni
vedremo che
contengono link
ipertestuali attivi

 Ottimizziamo l'immagine già elaborata prima, definendo altre due porzioni di taglio (slicing) che trasformiamo in aree HTML visto
che hanno uno sfondo bianco tinta unita che può essere facilmente riprodotto mediante i colori di sfondo della tabella. Durante la
fase di esportazione, Fireworks MX genera automaticamente la tabella finale
6 Mappe immagine
bbiamo visto che un'im-
A magine può essere frazio-
nata in blocchi così da far
corrispondere a ciascun bloc-
co un link ipertestuale e creare
un sistema di navigazione gra-
fico. L'unione dei vari blocchi
in modo da riprodurre visiva-
mente l'immagine originale sul-
la pagina Web richiede l'impie-
go di una tabella di layout. Il si-
stema è tuttavia complesso,
trascina con sé tutte le impre-
vedibilità delle tabelle e non si
presta a layout complessi, ma-
gari di forma astratta.
Esiste un'alternativa che
consiste nell'assegnare all'im-
magine che dovrà fungere da
elemento di navigazione una
serie di coordinate che identi-
ficano aree cliccabili.
A ciascuna di tali aree, poi,
attribuiremo un link iperte-
stuale. In pratica tracciamo sul-
l'immagine una mappa invisibi-
le, indicando le coordinate in
pixel dei vertici delle varie for-
me, calcolati partendo dall'an-
golo superiore sinistro dell'im-
magine.
Calcolare le coordinate a ma-
no sarebbe un'impresa non da
poco, ma fortunatamente tutti i
principali editor HTML visuali
prevedono strumenti che sem-
plificano moltissimo questa
operazione. Basta tracciare sul-
la figura i contorni delle varie
zone e il programma calcolerà
tutte le coordinate relative pro-
ducendo anche il codice HMTL
necessario per inserire la map-
58/88
5a lezione
immagini, in particolare Photo-
shop, ImageReady e Fireworks
MX. È sufficiente posizionare le
guide di taglio per identificare
le varie porzioni e in alcuni ca-
si è anche possibile assegnare,
già dall'interno del programma
di grafica, l'effetto rollover e ge-
nerare automaticamente la ta-
bella HTML finale. 
 Nella tabella finale vediamo che sono
presenti due celle vuote con sfondo
bianco che sostituiscono due porzioni
dell'immagine contenute nella versione
precedente.
Con questo semplice accorgimento,
la dimensione complessiva della pagina è
passata da 66 a 54 Kbyte. Disponendo
d'immagini con porzioni più ampie di
colore uniforme è chiaramente possibile
recuperare più spazio
pa immagine (image map) nella punta a una mappa identificata A ciascuna di queste asso-
pagina. Le zone possono avere
tre forme: circolare, rettango-
lare o poligonale.
dal tag <map name=
"nome_mappa"> che contiene
tutte le coordinate delle zone
ciamo, poi, un link ipertestuale
in modo tale da trasformare
l'immagine in un elemento di
Le mappe immagine posso- cliccabili (hot spot). navigazione. 
no essere di due tipi: il primo,
che è anche il più comune,
prende il nome di mappa im-
magine lato client (client side
imagemap) e memorizza tutte
le informazioni relative alla
mappa all'interno della pagina
HTML che contiene l'immagi-
ne. Ciò consente al browser di
fornire informazioni sui link as-
sociati a ciascuna zona e costi-
tuisce il metodo di mappatura
raccomandato dalle specifiche
HTML 4.01.
Il secondo metodo, usato in
origine, prendeva il nome di
mappe immagine lato server e
depositava le coordinate sul
server che ospitava il sito, la-
sciando al server medesimo il
compito d'interpretare l'azione
dell'utente sulla mappa, resti-
tuendo l'indirizzo di link cor- Ecco il codice HTML
per generare la
retto. Oltre a essere molto più mappa immagine
complicate da realizzare delle vista prima
mappe lato client, le server si-
de imagemap presentavano
anche lo svantaggio di funzio-
nare in modo diverso a secon-
da del server impiegato e di ri-
chiedere continue connessio-
ni al server.
Per aggiungere una mappa a
un'immagine esistente si usa il
parametro usemap="nome_
mappa" all'interno del tag Qui vediamo un'immagine a cui sono state abbinate tre zone
<img> che identifica l'immagine cliccabili mediante la creazione di una mappa. Riconosciamo
stessa. Il valore nome_mappa le tre forme consentite: rettangolo, cerchio e poligono
 6a lezione

A scuola con PC Open

Progetto Web Master di Michele Nasi

1 I linguaggi di programmazione
linguaggi di programmazione dei cosiddetti compilatori. Ciò lato in Java Bytecode quindi in- sono quindi essere considerati

I si dividono essenzialmente in
tre grandi gruppi: linguaggi
compilati, semi-compilati ed in-
terpretati.
Nel caso dei linguaggi compi-
lati, il codice sorgente (ossia il
file testuale contenente le istru-
zioni che devono essere ese-
guite da parte del personal
computer) viene “impacchet-
tato” sotto forma di un file ese-
guibile. I sorgenti vengono “tra-
dotti” in codice macchina,
comprensibile al personal
computer, mediante l’utilizzo
comporta che un programma
“trasformato” in codice mac-
china può funzionare solo ed
esclusivamente in un partico-
lare ambiente hardware-soft-
ware.
Tra i linguaggi semi-compila-
ti, citiamo Java: nato per affian-
care l’HTML, permette lo svi-
luppo e l’utilizzo di applicazio-
ni indipendenti dalla piattafor-
ma. Ciò significa che Java è in-
dipendente dalla specifica piat-
taforma hardware-software: il
programma Java viene compi-
terpretato ed eseguito dalla
speciale Java Virtual Machine
(ne esistono versioni per tutte
le piattaforme hardware-soft-
ware in circolazione).
La terza categoria di lin-
guaggi di programmazione è
composta dai linguaggi inter-
pretati: in questo caso, il codice
sorgente viene proposto in
chiaro, senza alcun tipo di co-
difica: sta al browser Internet
interpretarlo ed eseguire le
istruzioni elencate.
I linguaggi interpretati pos-
come una sorta di “estensione”
dell’HTML. Come avrete avuto
modo di apprendere nelle le-
zioni precedenti del nostro cor-
so, l’HTML non è un linguaggio
di programmazione vero e pro-
prio (nonostante sia spesso, in
maniera colloquiale, erronea-
mente definito come tale).
L’HTML è un linguaggio di defi-
nizione della pagina che per-
mette di impostare la posizione
di testo ed immagini in una pa-
gina Web, di posizionare tabel-
le, frame, liste puntate e nume-

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso
è sul CD
Lezione 2:
Siti statici e linguaggio
HTML
(disponibile integralmente
sul CD)
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
• Adobe GoLive 6.0
• Spiegazione dei tag HTML per una pagina
vergine
• Esercizi su come creare una pagina
vergine e su come progettare un sito
Lezione 3:
Modelli di pagina e tabelle
(disponibile integralmente sul CD)
• La tabella come elemento strutturale
• Progettare layout fluidi e statici
• Costruire template con le tabelle
di layout
• NamoWeb Editor5: per siti statici
professionali Lezione 5:
• Dimensionare tabelle e celle fluide, Design e multimedialità
dimensionare tabelle con celle miste, (disponibile integralmente sul CD)
allineamento spontaneo delle tabelle • Elementi di design per il Web
consecutive • La ruota colore
• Template con struttura complessa • Grafica e formati di immagini per Internet
n. 70 • Template con tabelle nidificate • Link ipertestuali
• Esercizi • Tabelle d’immagini
• Mappe immagine
• Audio e video
Lezione 4:
HTML 4.01 e CSS
Lezione 6:
(disponibile integralmente sul CD) Siti interattivi
• I linguaggi di programmazione
• La programmazione orientata agli oggetti
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font • Oggetti e prioprietà
• Eventi e funzioni
• I marcatori per formattare il testo
• Gestire gli spazi nel testo • Variabili e stringhe
• Gli operatori in JavaScript
• CSS e HTML 4.01
• Istruzioni condizionali
• Cosa si può fare con i fogli stile • Interazione tra JavaScript e form HTML
• Quattro tipi di CSS • Interazione tra JavaScript e frame
• I colori del Web • DHTML
• Gestire le immagini
• Esercizi
• Ereditarietà e innesco a cascata Le prossime puntate
• Proprietà di trasferimento Lezione 7:
dei parametri Interazione sul server
• Regole di ereditarietà
• Selettori di classe Lezione 8:
• Websafe palette Promuovere il sito

59/88
 6a lezione

rate e così via, oltre a stabilire (client), il server esegue le azio-

le proprietà caratteristiche
(ampiezza, colore, allineamen-
to) di ciascun elemento.
Fatta eccezione per i form,
l’HTML non ha in sé né struttu-
re in grado di interagire con l’u-
tente né strutture decisionali.
L’HTML, insomma, è completa-
mente statico.
Con questa lezione del no-
stro corso, ci proponiamo di
aggiungere un altro importante
tassello alle nostre conoscen-
ze: presenteremo JavaScript e
DHTML.
JavaScript può essere consi-
derato come il complemento di
HTML. È un linguaggio inter-
pretato ed è un linguaggio di
scripting. JavaScript è sempli-
ce perché si basa su un numero
ristretto di oggetti di program-
mazione, tuttavia il suo utilizzo
potrebbe non risultare indicato
per lo svolgimento delle opera-
zioni più complesse: procedure
all’apparenza assai semplici,
potrebbero infatti implicare lo
sviluppo di script piuttosto
complicati.
JavaScript è sicuro e affida-
L’identikit di JavaScript ni previste dal programmatore
e comunica al computer client
• JavaScript è un linguaggio di scripting (e quindi al suo browser Inter-
• Un linguaggio di scripting è un linguaggio di programmazione net) il responso.
“ridotto all’osso” Il codice JavaScript, invece,
• Uno script JavaScript si compone di una serie di istruzioni non viene interpretato ed ese-
eseguibili dal personal computer client guito sul server ma viene invia-
• Il codice JavaScript è inseribile all’interno di una qualsiasi pagina to – così com’è – al client: pen-
HTML serà, quindi, il browser Internet
• JavaScript è un linguaggio aperto che può essere liberamente (per esempio Internet Explo-
utilizzato da chiunque senza la necessità di acquistare una rer) ad interpretarlo e ad ese-
licenza d’uso guire le istruzioni specificate.
• JavaScript è supportato da tutti i browser Internet Il codice di uno script Java-
Script deve essere quindi sca-
ricato completamente da parte
bile: proprio per la sua peculia- vendosi della funzione Visua- del browser installato sul per-
rità di essere un linguaggio lizza l’HTML del browser, desi- sonal computer client, prima di
piuttosto limitato – per numero deri di consultare il codice poter essere eseguito.
e complessità delle strutture HTML della pagina Web che In questo modo, JavaScript
che mette a disposizione – non sta visitando. dispensa il server dall’effettua-
si conoscono problemi di sicu- Il codice JavaScript, inoltre, re una mole di lavoro aggiunti-
rezza e di affidabilità. viene eseguito sul client, ossia va (il server non deve proces-
Tutti i bug e le “falle” di sicu- sul personal computer che sta sare il codice JavaScript) ma
rezza di JavaScript sono stati visitando un determinato sito costringe ogni client ad un’o-
scoperti e risolti sin dall’uscita Internet. Si tratta di un aspetto pera di interpretazione ed ese-
delle prime versioni. importante che deve essere te- cuzione degli script.
Tra le caratteristiche princi- nuto a mente: altri linguaggi di È bene, quindi, non realizza-
pali abbiamo già messo in luce programmazione vengono det- re in JavaScript, script troppo
come il codice sia in chiaro, ti “lato server” perché, ad ogni complessi, che richiedano, da
ossia visibile da parte di richiesta di connessione da parte dei client, elevati tempi
chiunque, semplicemente ser- parte di un personal computer di elaborazione. 

2 La programmazione orientata agli oggetti

i sente sempre più spesso televisore è acceso o spento? due città e di calcolare la di- che riguardano lo sviluppo di

S parlare di programmazio-
ne orientata agli oggetti
(in inglese OOP, Object Orien-
Su quale canale è sintonizza-
to?). Analogamente, anche gli
oggetti software dialogano tra
stanza tra di esse. Possiamo
supporre che tale oggetto
software preveda l’invio di due
programmi, come vedremo più
avanti.

ted Programming). Pochi ne co-
noscono, però, il reale signifi-
cato. Per far luce sull’argomen-
to è sufficiente pensare un pro-
gramma come un insieme di
oggetti (oggetti software) che
cooperano tra loro.
Ogni oggetto è in grado di
eseguire azioni particolari che
vengono effettuate solo quan-
do richiesto da un altro oggetto
software. Pensate ad un televi-
sore: si tratta di uno strumento
che, per esempio, sa accender-
si, sa sintonizzarsi su canali
specifici, sa spegnersi. Ogni
azione è però richiesta esplici-
tamente da parte dell’utente,
servendosi di un altro oggetto
(il telecomando).
In pratica, è il telecomando
che invia al televisore un mes-
saggio comunicandogli quale
azione deve essere intrapresa.
Il televisore poi è in grado di
conoscere il suo stato attuale
ossia le proprie proprietà (il
loro per mezzo di messaggi ed
ogni oggetto è caratterizzato
da un insieme di proprietà che
ne descrivono lo stato.
I linguaggi di programmazio-
ne più moderni fanno uso degli
oggetti software per rendere la
scrittura dei programmi più
semplice e intuitiva. Non è ri-
chiesta, infatti, al programma-
tore la conoscenza sul funzio-
namento “interno” dell’oggetto
software (chi utilizza il televi-
sore non deve sapere come so-
no strutturati i circuiti elettro-
nici che gli permettono di fun-
zionare): gli è sufficiente ap-
prendere le modalità per collo-
quiare con lui, ossia i messaggi
che possono essere inviati e
l’effetto di ogni singolo mes-
saggio (semantica).
Semplificando molto, prova-
te a pensare ad un ipotetico og-
getto software chiamato “cal-
cola distanze”: tale oggetto è in
grado di acquisire il nome di
messaggi: il primo per richie-
dere l’acquisizione dei nomi
delle città da parte dell’utiliz-
zatore del programma, il se-
condo per richiedere il calcolo
della distanza tra le due città
specificate. Le proprietà del-
l’oggetto saranno essenzial-
mente due: la prima permet-
terà di avere informazioni sul
nome della prima città inserita;
la seconda proprietà sul nome
della seconda città. I valori di
ogni proprietà sono memoriz-
zati in appositi contenitori
(porzioni della memoria) de-
nominati variabili. Ciascun og-
getto software è poi caratteriz-
zato da alcuni metodi: essi de-
scrivono le azioni che l’oggetto
deve compiere non appena ri-
ceve un messaggio specifico.
La programmazione orienta-
ta agli oggetti è, quindi, una
tecnica di programmazione
che permette di semplificare
notevolmente alcuni concetti
Come inserire uno script
in una pagina Web
Nelle precedenti puntate del
nostro corso abbiamo avuto
modo di familiarizzare con nu-
merosi tag (o marcatori)
HTML. Ne aggiungiamo un al-
tro: <SCRIPT> e </SCRIPT> con-
sentono di delimitare il codice
JavaScript e quello proprio di
altri linguaggi di scripting.
Nella pratica, vanno utilizza-
ti i tag seguenti:
<SCRIPT
Language=“Javascript”><!--
//--></SCRIPT>
Com’è facile notare, all’inter-
no della tag <SCRIPT> è sempre
bene specificare con quale lin-
guaggio è stato realizzato lo
script. Qualora si indichi anche
la versione di JavaScript, lo
script verrà interpretato ed
eseguito solo dai browser che
la supportano. Ad esempio, il
codice contenuto all’interno
delle tag che seguono verrà in- 

60/88

 terpretato solo da Internet Ex-
plorer 4.0 o Netscape 4.0 e ver-
sioni successive:
<SCRIPT
Language=“Javascript1.2”><!--
//--></SCRIPT>
Omettendo l’indicazione del-
la versione, il codice verrà pro-
cessato da tutti i browser.
In alternativa, è possibile uti-
lizzare il tag <script type=
“text/javascript”> che consen-
te, egualmente, di definire Ja-
vaScript come linguaggio di
scripting.
Il codice JavaScript può es-
sere inserito direttamente al-
l’interno di una pagina Web op-
pure in un file esterno. Tale file
dovrà poi essere opportuna-
mente richiamato dal corpo
della pagina HTML.
Se si vuole inserire lo script
nella pagina HTML, si deve te-
nere presente che questo può
essere collocato all’interno del-
le tag <HEAD> e </HEAD> (ov-
vero nell’intestazione della pa-
gina Web), oppure tra le tag
<BODY> e </BODY> (il corpo
vero e proprio della pagina
HTML). È importante ricordare
che gli script vengono eseguiti
in maniera sequenziale, uno
dopo l’altro, a seconda della lo-
ro posizione all’interno del co-
dice HTML della pagina Web. In
particolare, gli script inseriti
nell’intestazione tra le tag
<HEAD> e </HEAD> vengono
eseguiti per primi.
I browser Internet
e gli script
Abbiamo già evidenziato co-
me tutti i browser, soprattutto
quelli di ultima generazione,
siano in grado di processare i
JavaScript, qualsiasi sia la loro
versione. Ma cosa succede se
la pagina Web facente uso di Ja-
vaScript viene visualizzata con
3 Oggetti e priorità
icollegandoci con quanto
R introdotto poco fa circa la
programmazione orienta-
ta agli oggetti, passiamo ad il-
lustrare, nella pratica, il signifi-
cato di oggetti e proprietà.
Una pagina Web, visualizzata
all’interno del browser Inter-
net, è considerabile come un
oggetto. Ogni tabella, pulsante,
immagine, form, link, presente
61/88
un browser obsoleto? Di solito
o il codice non viene eseguito o
si presentano problemi. Qualo-
ra, poi, l’esecuzione degli
script fosse disattivata o si
usassero browser che non sup-
portano JavaScript, il codice
presente nella pagina Web non
verrebbe eseguito. Spesso si ri-
corre, quindi, all’uso della tag
<NOSCRIPT></NOSCRIPT> che
permette di specificare il com-
portamento che il browser de-
ve tenere qualora non fosse
possibile interpretare lo script.
Spesso si usa quindi il co-
strutto che segue:
<NOSCRIPT>
<META HTTP-EQUIV REFRESH
CONTENT=“0;
URL=nomedellapagina.html”>
</NOSCRIPT>
In pratica, il tag <META RE-
FRESH> ordina al browser, qua-
lora questo non sia in grado di
riconoscere adeguatamente lo
script, di passare immediata-
mente alla visualizzazione del-
la pagina HTML “nomedellapa-
gina.html”. Il buon programma-
tore avrà cura di inserire, in ta-
le pagina, una versione del sito
visualizzabile con i browser più
vetusti.
Come regola generale, vi
suggeriamo di racchiudere
sempre il codice JavaScript tra
le tag <!-- e --> che, in HTML, in-
dicano i commenti.
Questo perché alcuni brow-
ser (quelli più vecchi) qualora
non riconoscano il codice Ja-
vaScript, potrebbero, anziché
eseguirlo, visualizzarlo sulla
pagina Web (cosa che va asso-
lutamente evitata). Delimitan-
do, invece, gli script tra le tag
<!-- e -->, i browser più vecchi,
non in grado di riconoscere Ja-
vaScript, ne interpreteranno il
codice semplicemente come
commenti HTML (che non de-
nella vostra pagina Web è un
oggetto. Ogni oggetto dispone
di un certo numero di pro-
prietà che lo caratterizzano in
modo univoco.
Le informazioni per la visua-
lizzazione del colore dello sfon-
do della pagina HTML sono,
per esempio, memorizzate nel-
la proprietà bgcolor dell’ogget-
to document.
vono essere stampati sulla pa-
gina Web).
Alcuni browser, soprattutto
le versioni più datate di Net-
scape, hanno difficoltà nel ge-
stire il segno > di fine commen-
to: è bene perciò anteporre una
doppia barra // (commento Ja-
vaScript) prima del tag -->.
Create una nuova pagina
HTML, servendovi di uno degli
editor presentati nelle prece-
denti lezioni del corso (potete
servirvi semplicemente del
Blocco Note di Windows o di un
editor testuale), quindi copiate
al suo interno quanto segue:
<html>
<head>
</head>
<body>
<SCRIPT
Language=“Javascript”><!--
document.write(“Benvenuto nel
mondo di JavaScript!”);
alert(’Questo è il tuo primo
script’);
//--></SCRIPT>
</body>
</html>
In questo script potete facil-
mente notare tutto quanto è
stato sinora introdotto.
È possibile notare come, in
questo caso, il codice Java-
Script sia stato inserito all’in-
terno della tag <BODY> (corpo
della pagina HTML). È stato fat-
to uso delle tag <!-- e --> (per im-
pedire ai browser più datati la
visualizzazione dello script sul-
la pagina Web) e della doppia
barra finale (//).
Le righe evidenziate in rosso
sono istruzioni.
In JavaScript ogni istruzione
ha termine con il salto di riga
(il ritorno a capo) oppure con il
punto e virgola (;).
Consigliamo di usare sempre
Utilizzando l’istruzione Java-
Script document.bgcolor=“red”
alla vostra pagina Web sarà as-
segnato, come colore di sfon-
do, il rosso.
Il contenuto di un ipotetico
campo denominato username,
facente parte del form miolo-
gin, può essere recuperato uti-
lizzando la proprietà value: do-
cument.miologin.username.va-
6a lezione
il punto e virgola: vi consentirà
di identificare più istruzioni che
stanno sulla stessa riga.
Eseguire uno script esterno
Chi sviluppa una pagina Web
che fa uso di JavaScript, può
decidere se inserire gli script
direttamente nella pagina
HTML oppure se utilizzare file
esterni.
La sintassi da usare è la se-
guente:
<SCRIPT
SRC=“nomedelfilejavascript.js”></
SCRIPT>
dove il file “nomedelfilejava-
script.js” è il file contenente il
codice JavaScript e che deve
essere richiamato.
I vantaggi che derivano dal-
l’uso di file esterni sono enor-
mi: se si prevede di utilizzare lo
stesso codice JavaScript in più
pagine HTML, si potrà sempli-
cemente far riferimento al file
esterno che lo contiene, senza
doverlo riscrivere ogni volta.
Supponiamo, ad esempio, che
dieci pagine HTML del sito Web
che state realizzando debbano
impiegare lo stesso codice Ja-
vaScript: basterà memorizzare
lo script in un unico file di te-
sto (ad esempio ilmioscript.js)
e richiamarlo da ciascuna pa-
gina servendosi della tag
SCRIPT SRC.
Ricorrendo a file esterni si
attribuisce al sito che si sta
realizzando una struttura mo-
dulare che porterà ad indubbi
vantaggi in termini di spazio
occupato (le pagine Web sa-
ranno più snelle e compatte) e
faciliterà eventuali modifiche
del codice JavaScript (si dovrà
intervenire solo sul file ester-
no e non sulla struttura di cia-
scuna pagina HTML), con
grossi vantaggi in termini di
tempo. 
lue. Notare che la proprietà va-
lue si riferisce all’oggetto user-
name (campo testo) che è par-
te dell’oggetto miologin (form),
il quale, a sua volta, è contenu-
to nell’oggetto document (la pa-
gina Web).
Metodi
I metodi descrivono le azioni
che l’oggetto deve compiere
 6a lezione

non appena riceve un messag-

gio specifico. In pratica, i me-
todi sono le azioni che l’ogget-
to è in grado di compiere.
Così come una porta può es-
sere aperta o chiusa, una lam-
padina accesa o spenta, gli og-
getti sono in grado di compiere
molte azioni.
Write() è, per esempio, un
metodo dell’oggetto docu-
ment: abbiamo già avuto modo
di fare la sua prima superficia-
le conoscenza con lo script del-
l’Esempio 1: l’istruzione docu-
ment.write (“Benvenuto nel
mondo di JavaScript!”) ci ha
permesso di scrivere la frase
indicata sulla nostra pagina
Web.
L’istruzione document.open()
permette, invece, di aprire un
nuovo documento (pagina
Web).
La lista dei principali gruppi di metodi
messi a disposizione in JavaScript
• Metodi di finestra - operano sull’oggetto Window e consentono di aprire e chiudere nuove finestre
• Metodi di documento - permettono di generare “al volo” nuovi documenti (pagine HTML)
• Metodi per i form - per selezionare gli oggetti che compongono un form (ad esempio un modulo di
richiesta di informazioni), per spostare il cursore sulle caselle di testo dei forum
• Metodi relativi alla cronologia - intervengono sulla cronologia dei siti Web visitati
• Metodi di data - permettono di operare su data e ora
• Metodi di testo - per modificare le proprietà caratteristiche del testo
• Metodi matematici - le principali funzioni matematiche
• Metodi “messagebox” - per generare finestre di dialogo
Se si vuole aprire una nuova zione: gina HTML che deve esse-
finestra da JavaScript, è neces- Miafinestra = window.open() re visualizzata all’interno
sario - in primo luogo - fissare Il metodo window.open per- della nuova finestra
un nome identificativo da attri- mette l’utilizzo di tre parametri • Un titolo per la finestra
buirle (ad esempio Miafine- opzionali che possono essere • Una serie di informazioni
stra). Sarà quindi possibile inseriti all’interno delle paren- legate al “look” grafico della
aprire la nuova finestra ser- tesi tonde: finestra (dimensioni, posi-
vendosi della seguente istru- • Un URL contenente la pa- zionamento, e così via). 

4 Eventi e funzioni
li eventi consentono di che consente la visualizzazio- alert). Accade però molto

G
specificare quando - ed
in quali condizioni (per
esempio all’apertura di una
pagina Web, quando l’utente
clicca su un pulsante, quando
si muove il mouse su un de-
terminato oggetto, e così via)
- un determinato script debba
essere eseguito.
A differenza di quanto visto
sinora, gli eventi non vengono
definiti all’interno della tag
<SCRIPT> ma vengono gene-
ralmente inseriti (a parte
qualche caso) nel codice
HTML della pagina Web.
Provate a creare una pagina
Web utilizzando il codice che
segue:
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT
Language=“Javascript”>
<!--
alert(’Benvenuto!’);
//--></SCRIPT>
<center>
<img src=“pcopen.gif”
onmouseover=“alert(’Hai
spostato il puntatore del
mouse
sull\’immagine’)”></img>
</center>
<a href=“javascript:alert(’Hai
cliccato’)”>Clicca qui</a><br>
<a
href=“http://www.pcopen.it”
onclick=“alert(’Stai per
raggiungere il sito di PC
Open’)”>Vai al sito Web di PC
Open...</a><br>
</BODY>
</HTML>
In questo caso, il primo
script ad essere eseguito è
quello inserito immediata-
mente dopo l’apertura della
tag <BODY>: l’istruzione alert
(’Benvenuto!’) mostrerà al vi-
sitatore un messaggio iniziale
di benvenuto. L’esempio ci
permette di provare sul cam-
po l’utilizzo degli eventi: a tal
proposito, ci si può subito
rendere conto di come gli
eventi JavaScript siano utiliz-
zati all’interno del codice
HTML.
Onmouseover e Onclick so-
no due eventi: il primo viene
attivato non appena l’utente
porta il puntatore del mouse
sull’oggetto cui la tag HTML fa
riferimento; il secondo evento
ha luogo quando l’utente “fa
clic” con il tasto sinistro del
mouse. Nel nostro esempio,
l’evento Onmouseover viene
attivato non appena il visita-
tore della nostra pagina Web
sposti il puntatore del mouse
sull’immagine raffigurante il
logo di PC Open (pcopen.gif).
Si noti come l’evento Java-
Script è stato inserito diretta-
mente nella tag HTML <IMG>
ne di un’immagine all’interno
di una pagina Web. Analoga-
mente, l’evento Onclick è in-
serito in una tag anchor <A
HREF… ed attivato non appe-
na l’utente clicca sul link (nel
nostro esempio, viene visua-
lizzato il messaggio “Stai per
raggiungere il sito di PC Open”
prima di indirizzare il browser
verso l’URL indicato nella tag
anchor).
Inizialmente JavaScript
metteva a disposizione del
programmatore solo pochi
eventi. Questi, inoltre, pote-
vano essere abbinati ad un nu-
mero molto limitato di tag
HTML. Le nuove versioni di In-
ternet Explorer hanno esteso
la possibilità d’uso degli even-
ti di JavaScript anche a nume-
rose altre tag HTML mentre
Netscape, di contro, è rimasto
fedele al passato. Suggeriamo,
per questo motivo, di effet-
tuare test di compatibilità del-
le proprie pagine Web sulle
varie versioni dei browser In-
ternet.
Come abbiamo avuto modo
di apprendere, un evento può
richiamare una ed una sola
istruzione (nell’esempio pre-
cedente, sia l’evento Onmou-
seover che l’evento Onclick,
invocano la visualizzazione di
un messaggio d’avviso me-
diante l’uso dell’istruzione
spesso che le operazioni che
debbono essere eseguite al
verificarsi di un certo evento
siano diverse, assolutamente
non rappresentabili mediante
un’unica istruzione.
In questo caso è necessario
ricorrere all’uso delle funzioni
(handler o gestori di eventi):
si tratta di porzioni ben defi-
nite di codice che possono ri-
cevere in ingresso dei dati da
elaborare e restituiscono in
uscita, dopo l’esecuzione del-
le istruzioni previste, un certo
risultato.
Nel caso in cui un evento
debba eseguire una serie di
istruzioni, tali righe di codice
vengono racchiuse in un’uni-
ca funzione, generalmente de-
finita nell’intestazione della
pagina Web o nel corpo della
pagina HTML. L’evento farà
poi riferimento alla funzione
definita in precedenza. Ad
esempio Onclick=“mia_funzio-
ne()” invocherà, alla pressio-
ne del tasto sinistro del mou-
se, la funzione denominata
mia_funzione.
Un esempio concreto con-
tribuirà a comprendere me-
glio il concetto:
<HTML>
<HEAD>
<SCRIPT
LANGUAGE=“JavaScript”>

62/88
 6a lezione

<!-- Inizio del codice Javascript informazioni per i

function msgbox (testo) {
alert (testo) }
// - Fine del codice JavaScript
- -->
</SCRIPT>
</HEAD>
<BODY>
<p align=“center”>
<a
href=“http://www.pcopen.it”
onclick=“msgbox(’State per
visitare il sito Web di PC
Open’)”>PC Open</a><br>
<a href=“http://www.01net.it”
onclick=“msgbox(’State per
visitare 01Net, il sito Web del
gruppo editoriale Agepe rivolto
ai professionisti dell\’IT e del
Web’)”>01Net</a><br>
<a
href=“http://www.digifocus.it”
onclick=“msgbox(’State per
visitare Digifocus: tutte le
professionisti dell\’
immagine.’)”>Digifocus</a><
Eventi importanti
br>
onClick Consente il rilevamento di un clic del mouse
<a
href=“http://www.ilsoftware.it
onDblClick Consente il rilevamento di un doppio clic del mouse
” onclick=“msgbox(’State per
visitare IlSoftware.it: il sito
onKeyDown Permette il rilevamento della pressione di un tasto
italiano interamente dedicato
al mondo del software.
onLoad Evento attivato in fase di caricamento
’)”>IlSoftware.it</a><br>
della pagina Web
</p>
</BODY>
onMouseOut Il puntatore del mouse si sta allontanando
</HTML>
da un’area specifica (ad esempio un’immagine
od un collegamento)
onMouseOver Il puntatore del mouse è stato spostato su un’area
In questo esempio, abbia-
specifica (ad esempio un’immagine od un
mo definito una funzione msg-
collegamento)
box contenente un’unica istru-
zione.
Tale funzione viene richia-
mata da parte dell’evento on- La funzione msgbox, inoltre, deve essere mostrato nella fi-
click, inserito in ogni tag <A>. riceve in ingresso il testo che nestra d’allerta. 

5 Variabili e stringhe
n qualsiasi linguaggio di pro- Va ricordato che le stringhe go, sarà sufficiente eseguire saggio di benvenuto.

I grammazione, le variabili
possono essere considerate
come delle scatole all’interno
delle quali è possibile imma-
gazzinare dei dati.
Ogni variabile può memo-
rizzare dati di un certo tipo:
numeri, stringhe (qualsiasi va-
lore letterale), valori booleani.
Le variabili possono assumere
anche lo speciale valore “null”:
quest’ultimo si incontra spes-
so nella programmazione e
non rappresenta un valore
specifico.
In molti linguaggi di pro-
grammazione (per esempio Ja-
va, C, C++) le variabili devono
essere dichiarate prima di po-
ter essere utilizzate: è quindi
indispensabile inizializzarle
specificando il loro nome e il
tipo di dati che esse andranno
a contenere.
In JavaScript la dichiarazio-
ne delle variabili non è stretta-
mente necessaria.
Ad esempio, l’istruzione luo-
gonascita=“Milano” provvede
automaticamente ad inizializ-
zare una variabile (luogona-
scita) come stringa e a porvi,
al suo interno, il valore Milano.
Il simbolo di uguaglianza indi-
ca che stiamo effettuando un
assegnamento (stiamo asso-
ciando alla variabile indicata
alla sinistra dell’uguale il valo-
re specificato alla sua destra).
(espressioni letterali) vanno
sempre racchiuse tra doppio
apice.
A tal proposito, analizzate le
seguenti due istruzioni:
luogonascita=“Milano”
luogonascita=Milano
Si tratta di due istruzioni
completamente differenti. Nel
primo caso il valore stringa
Milano viene memorizzato nel-
la variabile luogonascita; nel
secondo caso viene memoriz-
zato in luogonascita il valore
della variabile chiamata Mila-
no.
Le variabili possono anche
essere inizializzate esplicita-
mente con la dichiarazione
var.
L’istruzione var luogonasci-
ta, per esempio, crea in me-
moria una variabile denomi-
nata luogonascita e le attribui-
sce il valore “null”.
Facciamo alcuni
esempi
Utilizziamo il metodo
prompt() per richiedere all’u-
tente che visita la nostra pagi-
na Web, di inserire il suo no-
me. La stringa di testo inserita
verrà successivamente utiliz-
zata per visualizzare un mes-
saggio di benvenuto.
Poiché il metodo prompt()
restituisce il testo che l’utente
immette nella finestra di dialo-
un’operazione di assegnazio-
ne.
utente=prompt(“Inserisci il
tuo nome”,“Inserisci qui il tuo
nome”);
inizializzerà una variabile
utente, quindi vi memorizzerà
il valore specificato a destra
dell’operatore di assegnazione
(in questo caso proprio il va-
lore stringa restituito dal me-
todo prompt()).
<html>
<head>
<title>Corso OpenMaster -
Lezione 6 - JavaScript -
Esempio 4</title>
</head>
<body>
<SCRIPT
Language=“Javascript”>
<!--
utente=prompt(“Inserisci il tuo
nome”,“Inserisci qui il tuo
nome”);
document.write(“Benvenuto ”);
document.write(utente);
//-->
</SCRIPT>
</body>
</html>
Facendo riferimento a que-
sto esempio, una volta memo-
rizzato il valore stringa nella
variabile utente, tale variabile
potrà essere successivamente
usata per visualizzare il mes-
La prima istruzione docu-
ment.write stampa sulla pagina
Web il testo Benvenuto; la se-
conda inserisce nella pagina il
contenuto della variabile uten-
te.
Sulle variabili è poi possibi-
le eseguire tutta una serie di
operazioni.
Una delle più importanti è il
concatenamento: due o più va-
riabili possono, cioè, essere
unite assieme.
Nell’esempio precedente
avremmo potuto usare un’uni-
ca istruzione document.write
impiegando il codice che se-
gue:
document.write(“Benvenuto
”+utente);
Il segno di addizione effet-
tua, appunto, un concatena-
mento tra la stringa Benvenuto
e la variabile stringa utente.
Qualora si fosse utilizzato il
“+” tra variabili numeriche
(contenenti, cioè, un valore
numerico) avremmo ottenuto
una somma:
primo_valore=25;
secondo_valore=10;
document.write(primo_valo-
re+secondo_valore);
In questo caso l’istruzione
document.write stampa sulla
pagina Web il valore 35, essen-
do primo_valore e secondo_va-
lore due variabili numeriche. 

63/88
 6a lezione

6 Gli operatori in Javascript

Gli operatori si dividono in: 3. Operatori relazionali
1. operatori aritmetici
2. operatori di assegnamento Operatore Descrizione Esempio
3. operatori relazionali
4. operatori logici == è uguale a 5==8 restituisce “false”
5. operatori su stringhe != non è uguale a 5!=8 restituisce “true”
Segnaliamo anche gli operatori sui bit (utilizzati di solito solo
per generare colori). Di seguito elenchiamo i principali operato- > è maggiore di 5>8 restituisce “false”
ri che JavaScript mette a disposizione del programmatore citan-
do, per ognuno di essi, un esempio. < è minore di 5<8 restituisce “true”
>= è maggiore o uguale a 5>=8 restituisce “false”
<= è minore o uguale a 5<=8 restituisce “true”
1. Operatori aritmetici
Operatore Descrizione Esempio Risultato Gli operatori relazioni si basano false (falso) oppure true (vero).
+ Addizione x=2 4 sul concetto di “vero” e “falso”: Se avessimo inizializzato in
x+2 consentono di mettere in precedenza due variabili x e y,
relazione un valore (o una ponendo la prima uguale a 5
– Sottrazione x=2 3 variabile) rispetto ad un altro. (x=5), la seconda uguale a 8
5-x Il doppio uguale (==) permette, (x=8), un confronto x==y
* Moltiplicazione x=4 20 ad esempio, di verificare se un restituirebbe false (non è vero
x*5 valore è uguale ad un altro (nel che il contenuto della variabile x
/ Divisione 15/5 3 caso delle variabili, se esse è uguale al contenuto della
5/2 2.5 ospitano lo stesso contenuto). variabile y).
% Modulo (resto 5%2 1 I valori possibili che vengono Gli operatori relazioni sono tutti
di una divisione) 10%8 2 restituiti dopo il confronto sono binari.
10%2 0
++ Incremento x=5 x=6
(operatore unario) x++ 4. Operatori logici
–– Decremento x=5 x=4 Operatore Descrizione Esempio
(operatore unario) x––
&& and x=6
y=3
2. Operatori di assegnamento (x < 10 && y > 1) restituisce “true”
Operatore Esempio Equivale a || or x=6
(stessa semantica) y=3
= x=y x=y (x==5 || y==5) restituisce “false”
+= x+=y x=x+y ! not x=6
-= x-=y x=x-y y=3
*= x*=y x=x*y x != y restituisce “true”
/= x/=y x=x/y
%= x%=y x=x%y
Gli operatori logici sono essenziali per effettuare confronti più
Com’è facile notare, un’operazione di assegnamento può essere complessi tra valori e/o variabili. Sono ampiamente utilizzati nelle
scritta in forma compatta (cioè abbinata ad un operatore strutture decisionali (if…then…else).
aritmetico). Nel primo esempio si suppone che la variabile x contenga il valore 6,
L’operatore “+=” , per esempio, somma i valori delle due variabili y il valore 3 (siano state effettuate le relative operazioni di
indicate e memorizza il risultato all’interno della variabile di sinistra. assegnamento).
Nella colonna “equivale a” potete verificare come si sarebbe potuta L’espressione (x<10 && y>1) restituisce il valore true perché sono
scrivere, in alternativa, ogni singola operazione senza ricorrere alla vere entrambe le condizioni indicate (è vero, cioè, che x sia minore
forma compatta. di 10 ed è altrettanto vero che y sia maggiore di 1).

5. Operatori su stringhe
Per quanto riguarda gli operatori
su stringhe, abbiamo già avuto
modo di presentare, in
precedenza, il “+”, utilizzato per
concatenare assieme due o più
stringhe.
Lo script seguente, ad esempio,
assegna alla variabile testo3 la
stringa “Benvenuti al corso di PC
Open”:
testo1=“Benvenuti al corso”
testo2=“di PC Open”
testo3=testo1+testo2
Per aggiungere uno spazio tra le
due variabili stringa le soluzioni
possibili sono due.
La prima consiste nell’inserire
una stringa “spazio” nell’ultima
istruzione:
testo1=“Benvenuti al corso”
testo2=“di PC Open”
testo3=testo1+“ ”+testo2
In alternativa, come seconda
soluzione, si può aggiungere uno
spazio in calce alla stringa testo1
oppure in testa alla stringa
testo2:
testo1=“Benvenuti al corso ”
testo2=“di PC Open”
testo3=testo1+“ ”+testo2
In questo modo, la variabile
testo3 contiene la stringa
“Benvenuti al corso di PC Open”.

64/88
 6a lezione

Mettiamoci alla prova Cimentiamoci ora con un esercizio riassuntivo un po’ più complesso.
Supponiamo di voler creare una pagina Web dalla quale si possa
richiamare una nuova finestra. Tale finestra deve possedere attributi
1 specifici: deve misurare 300 pixel in altezza e 300 in larghezza, deve
mostrare la data attuale, visualizzare un testo, inserire un link HTML
il cui testo può essere liberamente deciso a priori.
La nuova finestra, inoltre, deve risultare perfettamente centrata,
qualsiasi risoluzione si stia impiegando.

1. Per prima cosa, inserite nella vostra pagina Web il codice HTML
che consenta la visualizzazione di un form costituito da un’unica casella
di testo e da un pulsante.

2. Passiamo ora allo sviluppo della funzione che dovrà aprire la nuova
finestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>.
Poiché la funzione deve ricevere in ingresso un valore stringa, ricorriamo
all’utilizzo di una variabile messaggio.
All’interno della funzione JavaScript, dobbiamo quindi inserire una serie
di istruzioni che consentano di recuperare data ed ora attuali (nel formato
utilizzato sul personal computer client), che definiscano il contenuto
2 della nuova finestra e le proprietà della stessa (posizione e dimensioni).
Per quanto riguarda le informazioni relative a data ed ora impieghiamo
il codice che segue:
now = new Date();
data_ora = now.toLocaleString();
La data/ora viene recuperata con il metodo Date() quindi memorizzata
all’interno della variabile now, creata allo scopo. Il metodo
toLocaleString(), applicato alla variabile now, permette di “trasformare”
la data nel formato utilizzato sul personal computer locale (per esempio,
mercoledì 12 febbraio 2003 12.23.17).
Definiamo ora il contenuto della nuova finestra. Nella variabile contenuto
abbiamo deciso di memorizzare tutto il codice HTML che costituirà
la nuova finestra. Osservate le concatenazioni tra stringhe che abbiamo
utilizzato. In particolare, è possibile notare come il nome da attribuire
al link <A> sia generato recuperando il valore assunto dalla variabile
messaggio. Successivamente, memorizziamo in due variabili distinte
l’altezza e la larghezza che deve avere la finestra da creare quindi
calcoliamo le coordinate della finestra (in pixel) affinché questa risulti
centrata, qualunque risoluzione si stia utilizzando.

3. Per far questo, è necessario controllare il valore delle proprietà width

(larghezza) e height (altezza) dell’oggetto screen (schermo). Sottraendo
a tali valori, rispettivamente, la larghezza della nostra finestra e la sua
altezza, dividendo per due otterremo le coordinate in pixel che
3 permetteranno di centrare la finestra:
sinistra=(screen.width-larghezza)/2;
alto=(screen.height-larghezza)/2;
Se la nostra finestra deve essere alta e larga 300 pixel, alla risoluzione
800x600 pixel la variabile sinistra assumerà il valore 250, alto il valore
150; alla risoluzione 1024x768 pixel in sinistra verrà memorizzato
il valore 362, nella variabile alto il valore 234.
In ogni caso, comunque, la finestra risulterà perfettamente centrata.
Potete provare ad effettuare qualche verifica modificando la risoluzione
dello schermo di Windows (Pannello di controllo | Schermo).
Le istruzioni successive permettono di creare la nuova finestra:
newwindow=window.open(“”,“miafinestra”,
“toolbar=0,status=0,menubar=0,scrollbars=0,resizable=0,width=”+la
rghezza+“,height=”+altezza+“,top=”+alto+“,left=”+sinistra);
newwindow.document.writeln(data_ora);
newwindow.document.write(contenuto);
L’oggetto “nuova finestra” è chiamato newwindow. La terza opzione
permette di specificare tutte le caratteristiche della finestra.
Le successive istruzioni - document.writeln(data_ora) e
document.write(contenuto) - inseriscono nella pagina Web della nuova
finestra, il contenuto della variabile data_ora e il codice HTML presente
in contenuto.
L’esempio è consultabile su CD utilizzando il file 05_riassuntivo.html
oppure online all’indirizzo seguente:
http://www.ilsoftware.it/libreria/js/jstest.asp?f=05_riassuntivo

65/88

gni giorno noi ci troviamo
O
a compiere delle scelte:
“se facciamo una cosa al-
lora le conseguenze sono....” è
il nostro ragionamento. L’equi-
valente in JavaScript è l’istru-
zione condizionale If...Else che
può essere efficacemente tra-
dotta in questi termini: Se...Al-
lora.
La forma più semplice con
cui si può presentare l’istruzio-
ne condizionale è la seguente:
if (espressione) istruzione1
[else istruzione2]...
espressione può assumere
solamente i valori true (vero)
oppure false (falso): è quindi
“booleana”. Qualora tale
espressione assuma il valore
true, verrà eseguita istruzione1
altrimenti istruzione2 (l’istru-
zione che segue l’else). (Sul CD
ROM l’esempio 06_if_then.html
mostra l’utilizzo del costrutto
if…else).
Recuperiamo data e ora at-
tuali servendoci del metodo
Date(); usiamo quindi il meto-
do GetHours(), applicato alla
variabile data d, per memoriz-
zare l’ora corrente.
<html>
<body>
<script type=“text/javascript”>
var d = new Date()
var time = d.getHours()
if (time < 12)
{ compreso tra 0 ed 1 (decimali
document.write(“<b>Buongiorn
o!</b>”)
} ra numeri casuali del tipo
66/88
else
{ così via. Memorizziamo il nu-
document.write(“<b>Buonasera
!</b>”)
} denominata r.
</script>
<p>Questo esempio mostra
l’utilizzo del costrutto
if...else</p>
<p>Prima delle ore 12 lo script
visualizza il messaggio
“Buongiorno!”,
dopo le 12 “Buonasera!”.</p>
</body></html>
Nel costrutto if...else, inse-
riamo come condizione l’e-
spressione time < 12.
In questo modo, qualora l’o-
ra attuale sia precedente a
mezzogiorno, verrà stampata,
sulla pagina HTML, l’esclama-
zione Buongiorno!, altrimenti
Buonasera!.
Proviamo ora a scrivere uno
script che ci consenta di pre-
sentare, all’utente che visita il
nostro sito Web, o il sito uffi-
ciale di PC Open (www.pco-
pen.it) o Digifocus (www.di-
gifocus.it).
La scelta dovrà essere ope-
rata in modo del tutto casuale
(il link di PC Open o quello di
Digifocus avranno il 50% di
possibilità di venire mostrati).
Il metodo Random(), appli-
cato all’oggetto Math, consente
di generare un numero casuale
compresi): ciò significa che l’i-
struzione Math.random() gene-
4,345125 oppure 5,899271236 e
mero prodotto in una variabile:
nel nostro esempio l’abbiamo
Utilizziamo, quindi, l’istru-
zione if…then imponendo, co-
me condizione, r>0.5. In pratica
se il numero generato è mag-
giore di 0.5, viene proposto il
link di PC Open; altrimenti
quello di Digifocus.
<html>
<body>
<script type=“text/javascript”>
var r=Math.random()
if (r>0.5)
{ chiamo, dapprima, per 10 il
document.write(“<a
href=’http://www.pcopen.it’>Vi
sita www.pcopen.it</a>”)
} floor per approssimare, all’in-
else
{ nuto. Saremo certi, così, di
document.write(“<a
href=’http://www.digifocus.it’>
Visita www.digifocus.it</a>”)
} variabile r viene quindi con-
</script>
</body>
</html>
Qualora si debbano effettua-
re numerosi test su un’unica
espressione, conviene ricorre-
re all’utilizzo dell’istruzione
Switch.
Il valore assunto dall’espres-
sione viene infatti confrontato,
in questo caso, con una serie di
possibilità. Anziché uno solo,
possono essere eseguiti, in se-
6a lezione
quenza, numerosi confronti.
Analizziamo un possibile uti-
lizzo dell’istruzione condizio-
nale Switch con un esempio
pratico.
Supponiamo di voler acco-
gliere l’utente che visita il no-
stro sito Web con una frase spi-
ritosa, scelta - in modo del tut-
to casuale - tra dieci diverse
possibilità. Come nel caso pre-
cedente, anche qui possiamo
ricorrere all’utilizzo del meto-
do Math.random().
Per ottenere un numero in-
tero da 0 a 9 (le frasi da pro-
porre sono dieci) utilizziamo
un semplice trucco: moltipli-
contenuto della variabile r (ge-
nerato da Math.random())
quindi utilizziamo il metodo
tero più vicino, il numero otte-
avere - come contenuto della
variabile r - un intero compreso
tra 0 e 9. Il valore assunto dalla
frontato, dall’istruzione switch
(r) con una serie di possibilità
(indicate con i vari case).
L’istruzione break consente
allo script di uscire dal ciclo di
switch: se fosse mancante, Ja-
vaScript continuerebbe a con-
frontare il valore. È possibile in-
serire, opzionalmente, anche
un’istruzione default: essa vie-
ne eseguita solo nel caso in cui
il ciclo switch non trovi alcuna
corrispondenza tra il valore as-
sunto dall’espressione e le va-

 rie istruzioni case (nel nostro
esempio default non è neces-
sario). Va ricordato che sia nel-
le espressioni if…then che in
switch, l’operatore di ugua-
glianza che va utilizzano è ==
(come già visto in precedenza)
e non = (l’operatore di asse-
gnamento). Si tratta di un erro-
re molto comune che spesso
provoca comportamenti inat-
tesi (JavaScript si limita ad
ignorare l’espressione).
Strutture iterattive
Una delle più famose strut-
ture iterative, comune a molti
altri linguaggi di programma-
zione, è il ciclo for.
Tale istruzione è detta ap-
punto “ciclo” perché esegue
iterativamente una serie di
azioni finché non viene rag-
giunto un limite prestabilito,
da parte del programmatore,
ed indicato in una condizione.
Il ciclo for utilizza la seguen-
te sintassi:
for (inizializzazione; condi-
zione; incremento) istruzioni;
l’iterazione è regolata da una
variabile contatore.
Ciò significa che ogni volta
8 Interazione tra JavaScript e form HTML
moduli HTML (form) sono
I
una sorta di questionari com-
pilabili on line da parte dei vi-
sitatori di un sito Web. Inizial-
mente il loro utilizzo era limita-
to: si adottavano esclusiva-
mente per raccogliere informa-
zioni sulle opinioni e sulle pre-
ferenze degli utenti. I moduli
compilati venivano infatti poi
automaticamente inviati ad un
indirizzo e-mail (ad esempio,
quello del webmaster del sito
Internet). Oggi, le possibilità di
utilizzo dei form si sono enor-
memente ampliate: vengono
utilizzati, su un sempre mag-
gior numero di siti, per intera-
gire con l’utente. Ad esempio,
form online vengono proposti
per effettuare ricerche all’in-
terno degli articoli contenuti
in un sito, per inviare i propri
messaggi in un forum, per ge-
stire contenuti ed aree specifi-
che del sito e così via.
Per interagire con un modu-
lo HTML mediante codice Ja-
vaScript, è necessario far uso -
nella propria pagina Web - del-
le apposite tag
67/88
che l’istruzione for esegue il ci-
clo, il contenuto della variabile
contatore subisce una varia-
zione.
L’espressione inizializzazio-
ne permette di specificare il va-
lore cui deve essere inizializza-
ta la variabile contatore (ad
esempio: i=0); condizione con-
sente di impostare la condizio-
ne che deve verificarsi affin-
ché venga eseguito il ciclo (ite-
razione); incremento permette
di indicare quale incremento o
decremento deve subire la va-
riabile contatore ad ogni itera-
zione. Ad esempio, impostan-
do i<10 come condizione e i++
come incremento, si stabilirà
che il ciclo for dovrà essere ri-
petuto finché la variabile i as-
sumerà un valore inferiore a 10.
Inoltre, ad ogni iterazione, il
valore numerico contenuto nel-
la variabile i sarà incrementato
di una unità (i++).
Per provare subito l’utilizzo
di for, supponiamo di voler svi-
luppare un semplice script che
faccio uso dei marcatori <h#>
per la visualizzazione di titoli e
sottotitoli di varie dimensioni.
Nella quarta lezione del no-
<FORM> e </FORM>.
Proviamo ad inserire, nella
nostra pagina HTML, un form
che richieda all’utente di digi-
tare il suo indirizzo e-mail veri-
ficandone, successivamente, la
validità.
Per motivi di semplicità, li-
miteremo il controllo circa la
validità dell’indirizzo di posta
elettronica specificato, alla pre-
senza del simbolo @.
Se l’utente inserirà una strin-
ga di testo contenente la chioc-
ciolina, quanto introdotto nel
campo di testo verrà conside-
rato come un indirizzo e-mail
valido. È ovvio che nella “vita
reale” si dovranno sviluppare
dei controlli aggiuntivi sulla va-
lidità dell’indirizzo e-mail (ad
esempio, verificare la presenza
di un suffisso .it, .com, .net, .org
e così via).
Iniziamo con l’inserire il co-
dice HTML per la visualizzazio-
ne di una casella di testo e di
un pulsante Invia:
<html><head></head>
<body>
<form name=“form_email”
stro corso, abbiamo spiegato
come al marcatore <h#> possa-
no essere associato fino a sei
livelli consecutivi, così da de-
terminare una struttura gerar-
chica di titoli e sottotitoli
(<h1></h1>, seguito da
<h2></h2> e così via).
Inserite il seguente script tra
le tag <HEAD> e </HEAD>, os-
sia nell’intestazione della vo-
stra pagina Web:
<script type=“text/javascript”>
for (i = 1; i <= 6; i++)
{ document.write(“<h” + i +
“>Questo è il titolo numero ” + i)
document.write(“</h” + i + “>”) }
</script>
In pratica, ad ogni iterazio-
ne, il valore contenuto nella va-
riabile contatore i (inizialmen-
te impostato a 1) viene incre-
mentato di un intero (i++). Fin-
ché tale valore è minore o
uguale a 6, l’esecuzione del ci-
clo for viene ripetuta.
Ad ogni ciclo, vengono ese-
guite le due istruzioni docu-
ment.write che s’incaricano di
scrivere, sulla pagina Web,
quanto indicato tra parentesi.
Utilizzando l’operatore +, si ef-
fettua una concatenazione tra
action=“form_ok.html”>
Inserisci il tuo indirizzo e-mail:
<input type=“text” name=“email”>
<input type=“submit”
value=“Invia”>
</form>
</body></html>
Assicuriamoci di assegnare
al form HTML un nome specifi-
co, inserendo il parametro na-
me (nel nostro caso, abbiamo
scelto il nome form_email).
Il parametro action consente
di stabilire la pagina ove il
browser Internet deve essere
reindirizzato dopo la pressio-
ne, da parte dell’utente, del
pulsante Invia.
Le tag <INPUT>, che debbo-
no essere sempre comprese tra
<FORM> e </FORM>, consento-
no di stabilire gli elementi fa-
centi parte del modulo HTML.
Per ogni tag <INPUT> è neces-
sario indicare, ricorrendo al pa-
rametro type, il tipo di elemen-
to che si vuole utilizzare.
Ad esempio, specificando ty-
pe=“text”, si inserirà, nel modu-
lo HTML, una casella di testo;
con type=“checkbox” una casel-
6a lezione
le stringhe racchiuse tra virgo-
lette ed il valore assunto, di
volta in volta, dalla variabile
contatore i.
Lo script ha permesso così
di generare il codice HTML
equivalente al seguente:
<h1>Questo è il titolo numero 1</h1>
<h2>Questo è il titolo numero 2</h2>
<h3>Questo è il titolo numero 3</h3>
<h4>Questo è il titolo numero 4</h4>
<h5>Questo è il titolo numero 5</h5>
<h6>Questo è il titolo numero 6</h6>
Altre strutture iterative, as-
sai utili nella programmazione
JavaScript, sono while e do…
while.
L’istruzione while va utiliz-
zata nella forma while (condi-
zione) espressione: l’espres-
sione verrà eseguita finché la
condizione specificata risul-
terà vera. Il ciclo do…while va
impiegato, invece, nei casi in
cui si vuole che l’iterazione
venga eseguita almeno una vol-
ta. La sintassi dell’istruzione è
infatti la seguente: do {istruzio-
ni} while (condizione)
Le istruzioni specificate, tra
parentesi graffe, dopo il do ver-
ranno eseguite finché la condi-
zione risulterà verificata. 
la che può essere spuntata o
meno; con type=“radio” un “op-
tion box”; con type=“button” un
pulsante…
Type=“submit” è importan-
tissimo: consente di inserire un
pulsante “speciale” che prov-
vede ad inviare il contenuto
del form all’indirizzo specifica-
to nel parametro action.
Per approfondire l’utilizzo
dei form HTML e scoprire tutte
le possibilità che questi offro-
no, vi consigliamo di fare riferi-
mento all’indirizzo www.w3.
org/TR/REC-html40/
interact/forms.html (in lingua
inglese).
Passiamo, a questo punto,
alla stesura dello script che
consentirà la validazione del-
l’indirizzo e-mail inserito da
parte dell’utente.
Provvediamo, quindi, a col-
locare - al solito - tra i tag
<HEAD> e </HEAD> (intesta-
zione), il codice JavaScript se-
guente:
<script type=“text/javascript”>
function controlla()
{

x=document.form_email
at=x.email.value.indexOf(“@”)
if (at == -1)
{ nostro sito Web), permetterà di
alert(“Indirizzo e-mail non
valido.”)
return false
} rappresenta, quindi, la migliore
} soluzione per la realizzazione
</script>
Cosa abbiamo scritto? In pri-
mo luogo abbiamo denominato
controlla() la funzione che ef-
fettua la validazione dell’indi-
rizzo e-mail. Una volta invocata
tale funzione, JavaScript me-
morizza nella variabile x il con-
tenuto del form form_email.
L’istruzione successiva recu-
pera, prima, il valore del
campo denominato email
(x.email.value), quindi applica
il metodo indexOf.
Tale metodo restituisce la
posizione della prima occor-
renza della stringa specificata
all’interno di un’altra stringa.
Se la stringa indicata tra paren-
tesi tonde non viene trovata, il
metodo restituisce il valore -1.
Per fare un esempio concre-
to, supponiamo di assegnare
ad una variabile x la stringa
“La mia rivista preferita è PC
Open”:
x=“La mia rivista preferita è PC
Open”
pos=x.indexOf(“PC Open”)
document.write(pos)
Invocando il metodo in-
dexOf(“PC Open”), lo script
cercherà la prima occorrenza
della stringa PC Open all’inter-
no della frase La mia rivista
preferita è PC Open.
La variabile pos assumerà, in
9 Interazione tra JavaScript e frame
avaScript risulta molto utile
J anche quando si debba ge-
stire una struttura a frame.
I frame sono infatti strutture
ampiamente utilizzate in nu-
merosi siti Web perché per-
mettono di suddividere la fine-
stra del browser Internet in più
sottoaree. Ciascuna di esse
può gestire i suoi contenuti in
modo del tutto autonomo, sen-
za dipendere dalle altre. In que-
sto modo è possibile pensare
di tenere fissa una porzione del
documento evitando che il
browser debba ricaricare, ad
ogni refresh, l’intera pagina.
JavaScript offre tutta una se-
68/88
JavaScript risulta un’ottima soluzione per la validazione dei dati direttamente sul personal
computer dell’utente che visita il nostro sito, evitando così di “caricare” il server del sito
questo caso, il valore 27 (la
stringa PC Open è stata trovata
in corrispondenza del ventiset-
tesimo carattere). Provate a so-
stituire la seconda istruzione
con la seguente:
pos=x.indexOf(“La gazzet-
ta”)
In questo caso, il metodo in-
dexOf restituirà il valore -1
(non è stata trovata alcuna oc-
correnza de La gazzetta).
Analogamente, nel nostro
esempio, indexOf permette di
ricercare il simbolo “@”, all’in-
terno della stringa specificata
dall’utente nel campo e-mail; il
valore restituito viene memo-
rizzato nella variabile at. A que-
sto punto utilizziamo l’istruzio-
ne condizionale if…else per
controllare il valore assunto
dalla variabile at: se il valore è -
1 (non è stata trovata alcuna
occorrenza di “@”) viene mo-
strato il messaggio d’errore “In-
dirizzo e-mail non valido” inol-
tre, la funzione controlla() as-
sumerà il valore false (return
false). Ora inseriamo, nel codi-
rie di strumenti che permetto-
no di interfacciarsi con i frame
HTML e quindi di facilitarne la
gestione.
Vediamo, ad esempio, come
è possibile aggiornare due fra-
me diversi con un solo clic del
mouse.
In primo luogo, creiamo un
normale file HTML. Tale file
non avrà bisogno dell’aggiunta
di alcun codice JavaScript: al
suo interno porremo solo alcu-
ni conosciuti tag HTML che
consentiranno di attribuire alla
nostra pagina Web una struttu-
ra a frame. Creiamo un nuovo
file HTML attribuendogli il no-
ce HTML che consente la vi-
sualizzazione del form, l’invo-
cazione della funzione control-
la(): aggiungiamo, nella tag
<FORM> un riferimento all’e-
vento onSubmit (ciò significa
che non appena l’utente agirà
sul pulsante Invia (Submit),
verrà eseguita la funzione Ja-
vaScript appena illustrata).
L’argomento dell’evento on-
Submit è return controlla(). Il re-
turn che precede la chiamata
della funzione controlla(), per-
metterà di annullare l’invio del
contenuto del form alla pagina
form_ok.html (specificata col
parametro action) se la funzio-
ne restituisce il valore false (co-
me abbiamo visto, tale valore
viene assunto solo nel caso in
cui @ non sia presente, ossia
qualora l’indirizzo e-mail non
sia valido).
Se invece la funzione con-
trolla() restituisce un valore di-
verso, l’invio dei dati del form
verrà consentito.
La validazione dei dati (ossia
il controllo della loro corret-
me frame.html. Incolliamo,
quindi, al suo interno, il codice
HTML che segue:
<html>
<frameset rows=“30%,*”
frameborder=“1”>
<frame name=“frame_sup”
src=“frame_superiore.html”>
<frame name=“frame_inf”
src=“frame_inferiore.html”>
</frameset>
</html>
La pagina Web sarà suddivi-
sa in due sezioni: la prima,
quella superiore, occuperà il
30% dello spazio a disposizione
6a lezione
tezza) sul lato client (ossia di-
rettamente sul personal com-
puter dell’utente che visita il
evitare di sovraccaricare il ser-
ver Web che ospita il sito di un
lavoro aggiuntivo. JavaScript
di questo tipo di controlli.
Il codice HTML e lo script Ja-
vaScript sono contenuti all’in-
terno del file form_email.html
nel CD ROM.
L’esempio form_focus.html
(disponibile nel CD ROM di PC
Open) presenta, invece, l’utiliz-
zo del metodo focus() per sele-
zionare un campo specifico fa-
cente parte di un qualsiasi mo-
dulo HTML presente nella pa-
gina Web.
L’istruzione document.forms
[0].campo1.focus(), consente
di selezionare (impostare il
“focus”) sull’elemento denomi-
nato campo1, contenuto nel
primo modulo HTML (forms
[0]) posizionato nella pagina
Web (document). In questo ca-
so infatti, non avendo assegna-
to alcun nome al form (serven-
doci del parametro name), pos-
siamo interfacciarci ricorren-
do all’array forms[0].
Qualora avessimo attribuito
al modulo HTML il nome
“mioform” (<FORM name=
“mioform”>...</FORM>),
avremmo potuto utilizzare l’i-
struzione document.mioform.
campo1.focus() in luogo di do-
cument.forms[0].campo1.fo-
cus() (com’è possibile verifica-
re visionando il file form_fo-
cus_2.html). 
sull’asse verticale ed ospiterà il
file frame_superiore.html; la se-
conda, l’area più in basso, lo
spazio restante (al suo interno
verrà collocato il contenuto del
file frame_inferiore.html).
I nomi assegnati ai file che
ospitano il contenuto dei frame
non sono importanti mentre lo
sono i parametri name indicati
in ciascun tag <frame>: si tratta
infatti di apposite “etichette”
che debbono essere ricordate
se si vuole interagire corretta-
mente con i frame da Java-
Script. Mentre nel file frame_su-
periore.html abbiamo inserito
semplicemente il codice HTML

Sopra: la funzione JavaScript per la modifica del contenuto dei frame. Sotto: La
funzione debugger che ci segnala gli errori commessi in fase di programmazione
per la visualizzazione del logo
della rivista, frame_inferiore
.html contiene una funzione Ja-
vaScript che abbiamo denomi-
nato modifica_frame.
function modifica_frame()
{parent.frame_sup.location.href=“f
rame_superiore_2.html”
parent.frame_inf.location.href=“fra
me_inferiore_2.html” }
Le due istruzioni JavaScript
stabiliscono quali file HTML
10 DHTML: sempre più dinamici
HTML è un linguaggio che
D permette di attribuire
maggiore dinamicità alle
pagine Web: la “D” iniziale sta
per Dynamic HTML a sottoli-
neare che DHTML non è solo
un linguaggio puramente de-
scrittivo (così come HTML) ma
la visione di un Web maggior-
mente “interattivo”.
69/88
devono essere caricati in cia-
scun frame. Notare che nel fra-
me di nome frame_sup viene in-
serito il contenuto del file fra-
me_superiore_2.html, mentre in
frame_inf il codice HTML di fra-
me_inferiore_2.html.
La funzione JavaScript per la
modifica del contenuto dei fra-
me viene invocata mediante l’e-
vento Onclick, associato al pul-
sante Modifica contenuto frame.
Con DHTML è possibile mo-
dificare ogni elemento che
compone le nostre pagine
Web, introducendo effetti spe-
ciali, animazioni e la gestione
di ogni singola immagine.
Durante la vostra “naviga-
zione” in Rete vi sarete certa-
mente imbattuti in menu ani-
mati (spesso menù a cascata
Per documentarvi ulterior-
mente sull’utilizzo dei frame
HTML, vi consigliamo di visita-
re la pagina seguente: www.
w3.org/TR/REC-html40/pre
sent/frames.html (in inglese).
Linee guida
per la programmazione
Quando programmate con
JavaScript, per evitare di in-
correre in fastidiosi errori,
spesso difficili da individuare,
è bene ricordarsi di seguire al-
cune semplici linee guida.
• JavaScript è un linguaggio
“case sensitive”. In informatica,
quando un linguaggio o un si-
stema operativo viene definito
“case sensitive” significa che
questo fa differenza tra co-
mandi e istruzioni scritti in
maiuscolo od in lettere minu-
scole.
Per JavaScript una funzione
denominata MiaFunzione è dif-
ferente da un’altra chiamata
miafunzione. Accertatevi, quin-
di, di riferirvi in un modo uni-
voco a funzioni e variabili.
• Gli spazi vengono ignorati.
JavaScript ignora gli spazi pre-
senti all’interno di una istru-
zione. Ad esempio, l’istruzione
di assegnamento citta=“Mila-
no” (senza spazi) equivale a cit-
ta = “Milano” (con gli spazi).
• Non dimenticate di chiu-
dere le parentesi.
Qualsiasi parentesi (tonda,
graffa o quadra) venga aperta
in uno script deve essere suc-
cessivamente chiusa. Per
esempio, se avete aperto una
parentesi graffa per delimitare
le istruzioni che compongono
una certa funzione, ricordatevi
di chiuderla.
• Se all’interno di una stringa
desiderate utilizzare simboli
speciali come “ ’ ; e &, antepo-
nete ad essi la barra rovescia-
ta. Esempio: document.write
(“L\’uno e l\’altro”).
che si aprono non appena si
sposta il puntatore del mouse
sopra di essi): spesso è pro-
prio DHTML che ne consente
la visualizzazione.
DHTML si avvale di un insie-
me di tecnologie. Per raggiun-
gere lo scopo di attribuire
maggiore dinamicità alle pagi-
ne Web, questo linguaggio ri-
6a lezione
E se si commettono errori?
Errare è umano e durante lo
sviluppo in JavaScript o in qua-
lunque altro linguaggio di pro-
grammazione di errori è natu-
rale commetterne molti.
Anche i più esperti incappe-
ranno certamente in sviste co-
muni come la mancata chiusu-
ra di una parentesi, delle virgo-
lette, la dimenticanza di un
punto e virgola.
In tutti questi casi (e comun-
que in presenza di un qualun-
que altro tipo di errore), il vo-
stro script non funzionerà.
Tutti i browser Internet in-
corporano un debugger ossia
uno strumento in grado di rile-
vare gli errori commessi in fase
di programmazione.
Internet Explorer, per esem-
pio, visualizzerà nella barra di
stato, in basso a sinistra, un’i-
cona raffigurante un piccolo
triangolo a fondo giallo.
Facendovi doppio clic si ot-
terranno le informazioni detta-
gliate circa l’errore riscontrato.
Nel nostro caso, com’è pos-
sibile verificare in figura, ci sia-
mo dimenticati di chiudere
una parentesi tonda (il debug-
ger ci segnala riga e carattere
ove è stato individuato l’erro-
re, all’interno della pagina
HTML).
Per approfondire...
All’indirizzo www.jsdir.com,
sito Web realizzato e curato da
un team italiano, trovate una
valanga di informazioni sulla
programmazione JavaScript:
tutorial passo-passo, guide on-
line, suggerimenti, esempi pra-
tici, le risposte alle domande
più frequenti (FAQ), guidano
gli aspiranti webmaster alla
scoperta di JavaScript.
Altri esempi pratici possono
essere reperiti all’indirizzo
www.html.it/javascript/tuto
rial/. 
corre infatti all’utilizzo di tre
componenti tecnici: i linguaggi
di script come JavaScript (ma
anche il VBScript di Micro-
soft), i fogli di stile (CSS, Ca-
scading Style Sheets) - già illu-
strati nella quarta lezione del
nostro corso - ed infine, ovvia-
mente, HTML.
Il punto debole di DHTML è,

Il codice JavaScript va inserito nell’intestazione della pagina e permette di stabilire
quale browser Internet si sta utilizzando
però, la compatibilità tra brow-
ser. Sia Netscape che Microsoft
hanno da sempre cercato di
imporre la loro visione: talvol-
ta può accadere, quindi, che
una pagina dinamica DHTML
sia visualizzata correttamente
con Internet Explorer ma non
con Netscape (o viceversa).
È quindi necessario assicu-
rarsi di produrre pagine
DHTML che siano perfetta-
mente compatibili con tutti i
browser Internet (che siano,
cioè, cross-browser): qualora
non si provvedesse ad effet-
tuare gli opportuni controlli, si
rischierebbe di perdere nume-
rosi visitatori infastiditi dal-
l’impossibilità di visualizzare
correttamente il vostro sito.
Qualora non si riuscisse a ren-
dere cross-browser la propria
pagina DHTML, si può pensare
di creare due differenti versio-
ni del sito Internet: una, per
esempio, destinata agli utiliz-
zatori di Internet Explorer, l’al-
tra agli utenti di Netscape.
Va tenuto comunque pre-
sente che il DHTML è suppor-
tato solo a partire dalla versio-
ne 4 di Internet Explorer e Net-
scape: se prevedete di servirvi
di DHTML nelle vostre pagine
Web, è bene indicare i requisi-
ti minimi per una corretta vi-
sualizzazione del sito.
Il DHTML si basa sulla strut-
tura DOM (Document Object
Model): si tratta di un modello
che considera qualsiasi docu-
mento (pagina Web) come un
oggetto. Ciò significa che ogni
documento viene suddiviso in
elementi più semplici sui quali
è possibile operare secondo le
70/88
servirà, in seguito, per modifi-
care le proprietà dell’immagi-
ne. In alternativa, è possibile
utilizzare anche il modello
strutturale. Se l’immagine da
modificare è la terza che com-
pare nella nostra pagina Web,
si potrà usare il codice se-
guente:
document.images[3]
Il codice indica che stiamo
facendo riferimento alla terza
immagine della “collezione”
images, contenuta nell’ogget-
to document (la pagina Web).
DHTML consente di sposta-
re gli elementi costitutivi di
una pagina Web senza la ne-
cessità di dover ricaricare la
stessa. A tal proposito, è sug-
gerito l’utilizzo dei tag <DIV> e
<SPAN>, caratteristici dei fogli
di stile (e già incontrati a pag.
38 nella quarta lezione del no-
specifiche della programma- stro corso) in quanto sono pie-
zione orientata agli oggetti. namente supportati sia da In-
Qualunque oggetto che fa ternet Explorer che da Netsca-
parte di una pagina Web defi- pe. Utilizzando <DIV> e <SPAN>
nito con le classiche tag HTML avrete la possibilità, servendo-
- per esempio una qualsiasi im- vi di DHTML, di spostare “al
magine <IMG> o un link <A> volo” qualsiasi blocco che co-
(àncora di collegamento, an- stituisca la vostra pagina (co-
chor) - è accessibile da DHTML lonne, paragrafi, riquadri di te-
servendosi proprio della strut- sto,…) senza ricorrere all’im-
tura DOM e di un linguaggio di piego di tabelle nidificate.
scripting come JavaScript. DHTML permetterà di agire
Il DOM agisce, quindi, da in- sulle dimensioni e sulla posi-
terfaccia tra il documento zione di ciascun blocco <DIV>
HTML ed il linguaggio di scrip- e <SPAN> offrendovi un meto-
ting: esso interpreta, infatti, do più semplice e veloce per
ogni elemento costitutivo della creare il layout delle vostre pa-
pagina Web ed offre i metodi gine Web. L’uso dei fogli di sti-
per accedervi. le consentirà, poi, di interveni-
Per modificare un elemento re sulla scelta dei caratteri (sti-
presente nella vostra pagina le, dimensioni,…), sulla for-
Web, è sufficiente attribuirgli mattazione dei collegamenti
un nome. Ad esempio: ipertestuali, sull’impostazione
<img src=“pcopen.gif” id=“lo- dei margini e così via.
gopcopen”>
In questo caso abbiamo as- Un esempio: creare un menu
segnato all’immagine pco- a tendina con DHTML
pen.gif, inserita nel codice del- Cimentiamoci subito su di
la pagina Web mediante l’ap- un esempio pratico: proviamo
posito tag <IMG>, il nome lo- a creare un menu “a tendina”
gopcopen: tale identificativo ci per la nostra pagina Web: non
Un esempio pratico: creare un menù a tendina per il nostro sito utilizzando DHTML
6a lezione
appena il puntatore del mouse
verrà posizionato su una voce
del menu, dovranno esserne
immediatamente visualizzate
le relative voci. Prima di tutto
creiamo il codice base della
nostra pagina HTML:
<HTML>
<HEAD>
<TITLE>PC Open - Un menu a
tendina con DHTML</TITLE>
</HEAD>
<BODY BGCOLOR=“white”>
<CENTER><IMG
SRC=“logo_PCOPEN.gif”>
<BR><BR>
</CENTER>
</BODY>
</HTML>
Definiamo, quindi, tra le tag
<HEAD> e </HEAD> (intesta-
zione della pagina HTML), ser-
vendoci di un foglio di stile,
quali debbano essere le carat-
teristiche dei collegamenti
ipertestuali (tag <A>, anchor)
presenti nella pagina Web:
<STYLE>
A:Hover {color:red; text-
decoration:none; font-
weight:bold }
A {color:black; text-
decoration:none; font-size:
10pt; font-family:
Tahoma,Verdana,Arial }
</STYLE>
Il codice JavaScript eviden-
ziato nell’immagine a lato, va
inserito sempre nell’intesta-
zione della pagina e consente
di stabilire, in primo luogo,
quale browser Internet si sta
utilizzando.
Come già anticipato in pre-
cedenza, Internet Explorer e
Netscape utilizzano diverse
sintassi per interagire con i
layer ossia i livelli definiti con
DHTML (i blocchi delimitati
con <DIV> e <SPAN>). Lo script
permette di individuare la ver-
sione del browser in uso ed
usare document.layers[layerid]
nel caso di Netscape, docu-
ment.all[layerid] nel caso di
Internet Explorer.
Nel corpo della pagina
HTML (<BODY></BODY>), ab-
biamo inserito una serie di li-
velli <DIV>. A ciascun blocco
<DIV> è stato assegnato un no-
me identificativo. Si è poi fatto
uso delle funzioni apri_tendina
e chiudi_tendina, opportuna-
mente invocate dagli eventi
Onmouseover e Onmouseout
per visualizzare o nascondere,
all’occorrenza, le tendine dei
vari menu dinamici, a seconda
della posizione del puntatore
del mouse. 
 7a lezione

A scuola con PC Open

Progetto Web Master di Michele Nasi

1 Il server Web
a produzione di un sito sta- meno una sua porzione sia di- viste nella scorsa lezione e nerate unendo la parte statica e

L tico, a cui questo corso è de-

dicato, richiede talvolta l'in-
serimento di componenti dina-
mici o comunque di componen-
ti esterni alla pagina che avete
costruito staticamente. Pensia-
mo ad esempio a un sito che of-
fra consigli di viaggio e che in-
cluda previsioni del tempo co-
stantemente aggiornate, attin-
gendo a risorse esterne. Benché
la struttura della pagina che
contiene tali previsioni possa
essere statica, cioè invariabile,
le informazioni in costante ag-
giornamento richiedono che al-
namica, ossia venga generata
nel momento in cui il navigatore
la richiede, utilizzando informa-
zioni fresche. Situazioni analo-
ghe si verificano anche quando
il sito chiede una certa intera-
zione ai propri navigatori come
nel caso della compilazione di
inchieste o di votazioni, della
firma del libro degli ospiti (gue-
st book) oppure della ricerca di
pagine all'interno del sito oppu-
re sul Web. Si tratta di operazio-
ni che non possono essere ese-
guite mediante le funzioni di
programmazione di JavaScript,
orientate a creare pagine che di-
ventano interattive quando ar-
rivano sul computer del naviga-
tore. Qui la decisione di cosa in-
serire o visualizzare nella pagi-
na deve essere fatta prima che
la pagina stessa sia spedita sul
Web e perciò l'interazione deve
svolgersi necessariamente sul
server. Avremo quindi pagine
costruite solo in parte, all'inter-
no delle quali il server aggiun-
gerà informazioni provenienti
da altre fonti oppure che sono il
risultato di un'elaborazione in-
terna. Tali pagine verranno ge-
la parte variabile ogni volta che
un nuovo navigatore le richie-
derà, il che imporrà un certo ca-
rico elaborativo sul server, ma
consentirà di avere contenuti
sempre freschi oppure adatti al
contesto. Ciò non significa, tut-
tavia, che si è creato un vero e
proprio sito dinamico, la cui de-
finizione prevede che le pagine
vengano generate dinamica-
mente nella loro interezza a par-
tire da informazioni registrate in
un database, tema che sarà
l'argomento di un prossimo cor-
so. 

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso
è sul CD
Lezione 2:
Siti statici e linguaggio
HTML
(disponibile integralmente
sul CD)
Lezione 3:
Modelli di pagina e tabelle
(disponibile integralmente sul CD)
• La tabella come elemento
strutturale
• Progettare layout fluidi e statici
• Costruire template con le tabelle
di layout
• NamoWeb Editor5: per siti statici
professionali
• Dimensionare tabelle e celle fluide,
dimensionare tabelle con celle miste,
allineamento spontaneo delle tabelle
consecutive
• Template con struttura complessa
• Template con tabelle nidificate
• Esercizi
Lezione 4: Lezione 6:
HTML 4.01 e CSS Siti interattivi
(disponibile integralmente sul CD) (disponibile integralmente sul CD)
• I linguaggi di programmazione
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font • La programmazione orientata agli oggetti
• I marcatori per formattare il testo • Oggetti e priorità
n. 71 • Gestire gli spazi nel testo • Eventi e funzioni
• CSS e HTML 4.01 • Variabili e stringhe
• Cosa si può fare con i fogli stile • Gli operatori in JavaScript
• Istruzioni condizionali
• Quattro tipi di CSS
• I colori del Web • Interazione tra JavaScript e form HTML
• Gestire le immagini • Interazione tra JavaScript e frame
• Esercizi • DHTML
• Ereditarietà e innesco a cascata
• Proprietà di trasferimento
Lezione 7:
dei parametri Interazione sul server
• Regole di ereditarietà • Il server Web
• Selettori di classe • I form: la porta per l’utilizzo degli script
• Websafe palette CGI
• Installare e configurare un server Web
Lezione 5: • Configurazione del sito Web predefinito
Design e multimedialità in Windows XP Professional
(disponibile integralmente sul CD) • Installare e configurare Apache sotto
• Elementi di design per il Web Windows
• La ruota colore
• Grafica e formati di immagini per Internet
• Link ipertestuali L’ultima puntata
• Tabelle d’immagini
• Mappe immagine Lezione 8:
• Audio e video Promuovere il sito

71/88

Che cos’è un server Web
Per capire come attivare que-
sto genere d'interazione dob-
biamo anche capire che cosa è
un server Web. Si tratta di un
computer dotato di uno specia-
le software capace di ricevere
richieste via protocollo HTTP
(Hypertext Markup Protocol) e ri-
spondere mediante l'invio della
pagina che corrisponde all'indi-
rizzo indicato dal navigatore
per mezzo del suo browser.
Il server raccoglie tutti gli ele-
menti necessari alla composi-
zione della pagina e li manda al
browser remoto il quale co-
struisce la pagina vera e propria
sul video. Nel caso di una pagi-
na statica, avremo il file HTML
che la compone, le immagini
collegate ed eventuali oggetti
creati con programmi esterni
(suoni, animazioni, eccetera).
Nel caso di una pagina compo-
sita (in parte statica e in parte
dinamica) avremo il file HTML
che contiene gli elementi fissi, le
immagini e gli elementi variabi-
li da calcolare o da prelevare
dall'esterno e inserire al mo-
mento della spedizione.
Giusto per chiarire le diffe-
renze tra l'interazione lato
client, che abbiamo visto nella
scorsa lezione con JavaScript e
Dynamic HTML, e l'interazione
lato server, che descriviamo in
questa lezione, diciamo che la
prima inizia nel momento in cui
la pagina arriva al browser del
navigatore e continua da quel
momento in poi, la seconda si
verifica sul server nell'istante in
cui la pagina viene richiesta e si
esaurisce non appena gli ele-
menti che la compongono sono
partiti in direzione del naviga-
tore. Perciò comprendiamo che
l'interazione lato client dipende
fortemente dal tipo di browser
utilizzato e ne deve tenere con-
to, mentre l'interazione lato ser-
ver è invece completamente
svincolata dal browser, ma deve
invece risultare compatibile
con le funzioni e i servizi previ-
sti dal server che intendiamo
utilizzare.
I Server Side Include
Il metodo più semplice per
inserire elementi variabili all'in-
terno di una pagina consiste nel
collocare nella giusta riga del li-
stato HTML un "segnaposto"
che indichi il nome e la posizio-
ne del file esterno che va inseri-
to in quel punto. È una tecnica
che consente di ripetere in più
pagine parti comuni che posso-
72/88
no quindi essere modificate
agendo su un singolo documen-
to (come ad esempio elementi
di navigazione) oppure per in-
nestare nella nostra pagina par-
ti di una pagina esterna o il ri-
sultato dell'elaborazione di un
programma interno. Il server
Web non deve far altro che scor-
rere la pagina prima di spedirla,
notare la presenza di eventuali
istruzioni di inclusione e allega-
re la parte indicata. Non è ri-
chiesta nessuna elaborazione
dei contenuti perciò l'operazio-
ne non appesantisce il server.
È una tecnica che si dimostra
efficace quando gran parte del-
la pagina è di tipo statico e l'ele-
mento variabile costituisce una
frazione del contenuto. Il tipo di
include consentito cambia a se-
conda del server impiegato. Nel
caso di Apache, il più diffuso tra
i server Web in ambito Linux e
disponibile gratuitamente an-
che per Windows, si parla di XS-
SI, ossia Extended Server Side In-
cludes. Si tratta di una serie di
comandi che consentono d'in-
serire nella pagina corrente un
file esterno con la possibilità
anche di scegliere soluzioni di-
verse al verificarsi di situazioni
diverse. Microsoft prevede una
soluzione analoga nel suo lin-
guaggio ASP (Active Server Pa-
ges), che vedremo brevemente
più avanti.
I Server Side Include o gli XSSI
offrono numerosi vantaggi: so-
no facili da imparare, vengono
supportati da numerosi server,
consentono d'inserire informa-
zioni aggiornate in pagine che
altrimenti sarebbero completa-
mente statiche, non dipendono
dal tipo di browser impiegato, i
comandi non compaiono nel
browser perciò all'esterno non
si sa da dove provengono le no-
stre informazioni, consumano
poca potenza di elaborazione.
Ci sono naturalmente anche
svantaggi: il server deve co-
munque farsi carico di un mini-
mo di attività elaborativa e per-
ciò risponde alle richieste con
un leggero ritardo rispetto alla
spedizione di pagine completa-
mente statiche; inoltre l'attiva-
zione degli SSI può comportare
problemi di sicurezza, non gra-
vi, e perciò alcuni provider pos-
sono impedirne l'uso, infine la
loro funzionalità è fortemente
influenzata dalla configurazio-
ne del server. Diventa perciò in-
dispensabile contattare il pro-
prio amministratore di sistema
prima di pianificarne l'impiego.
7a lezione
Come si presenta un SSI mandi e della relativa sintassi ri-
Alla pari di ciò che accade in mandiamo alla documentazio-
JavaScript, un comando SSI vie- ne dei diversi tipi di server. Af-
ne inserito nella pagina HTML finché vengano riconosciuti e il
sotto forma di commento, cioè server ne esegua l'esplorazione
viene preceduto dai simboli <!-- (parsing) per identificare cosa
e seguito dai simboli -->>. inserire e dove, i file che con-
In tal modo, qualora il server tengono SSI vanno contrasse-
non riconoscesse il comando e gnati con un suffisso particola-
questo rimanesse all'interno re. Spesso si usa il suffisso
della pagina che viene spedita SHTML, ma il server può essere
al navigatore, il browser ne configurato per accettare qual-
ometterebbe la visualizzazione siasi altro suffisso (tale discorso
considerandolo alla stregua di naturalmente non si applica ai
un normale commento. In caso file generati con ASP o PHP, che
contrario, il riconoscimento del vengono comunque tutti elabo-
comando comporta l'elimina- rati prima di essere inviati, com-
zione dello stesso dal listato presa la gestione di eventuali in-
della pagina che viene inviata al clude lato server).
navigatore e la sua sostituzione
con l'elemento da inserire. Il co- La Common Gateway
mando in sostanza funge da se- Interface
gnaposto e cede il proprio spa- Il secondo passo, più impe-
zio all'elemento da innestare gnativo, nella produzione di pa-
(include). Molto semplice e mol- gine con contenuto dinamico
to pratico. consiste nell'affiancare al ser-
Per un'analisi dei vari co- ver Web uno o più programmi 
Due file per ogni esempio
Nel CD ROM di PC Open trovate (a meno che non sia specificato
diversamente) due file per ciascuno script di esempio. Il primo è un
file in formato HTML, il secondo è lo script CGI-Perl vero e proprio
(da memorizzare sul proprio server nella cartella cgi-bin).
Tutti gli script CGI-Perl (facilmente riconoscibili per l’estensione .PL
a loro assegnata) sono richiamati dalle pagine HTML facendo
riferimento al sito www.openmaster.info/cgi-bin: abbiamo infatti
provveduto a memorizzarli nella cartella cgi-bin del server Web
dedicato al nostro progetto “OpenMaster”.
Chi intendesse utilizzare gli script presentati in questa lezione sui
propri server, dovrà aver cura di modificare l’attributo action,
contenuto nella tag <FORM> di ciascun file HTML, con l’indirizzo
completo della cartella cgi-bin presente sul proprio server seguito
dal CGI che si desidera richiamare.
Gli script CGI che si invocano dovranno ovviamente essere caricati
sul proprio spazio Web nella cartella cgi-bin.
Ad esempio, se si è interessati ad utilizzare, sul proprio server
Web, il guestbook, caricate nella vostra cartella cgi-bin il file
guest.cgi quindi modificate l’attributo action contenuto nella tag
<FORM> del file guest.html.

 che elaborino contenuti in base
alle selezioni e alle richieste del
navigatore. In questo caso non
si tratta semplicemente d'inse-
rire contenuti esterni, aggiorna-
ti di frequente, come nel caso
degli SSI, ma di costruirli sulla
base di quel che il navigatore
chiede o fa. Tali contenuti pos-
sono provenire da fonti esterne,
dal navigatore che risponde a
quesiti posti su pagine prece-
denti oppure da altri program-
mi presenti nel sito. Qualunque
ne sia la fonte, tali informazioni
non possono essere visualizza-
te direttamente, ma richiedono
trattamento, eseguito mediante
uno dei tanti linguaggi di pro-
grammazione che possono fun-
zionare sul vostro server Web
oppure su un altro server che
lavori in parallelo.
L'approccio CGI comporta un
carico di lavoro maggiore ri-
spetto ai semplici SSI perciò
può essere necessario allestire
una macchina di appoggio op-
pure sfruttare le risorse di un si-
to remoto, come nel caso dei
motori di ricerca che offrono la
possibilità di eseguire ricerche
anche nel nostro sito.
CGI è l’acronimo di Common
Gateway Interface: si tratta di un
metodo che consente di mette-
re in comunicazione diversi
programmi presenti sullo stes-
so server o su server differenti.
I programmi possono essere
scritti in uno qualsiasi dei lin-
guaggi compatibili con CGI: Vi-
sualBasic, C, C++, tcl, Perl e Ap-
pleScript per citare i più diffusi.
In particolare, il linguaggio
Perl (Practical Extraction and
Report Language) è il più usato
nell’ambito della programma-
zione CGI perché nasce con una
predisposizione per la gestione
delle informazioni, come si ca-
pisce anche dal nome. Ogni vol-
Schema di funzionamento dell’applicazione CGI
Form compilato da navigatore
e inviato al server
Form
Web
Browser
SERVER
Risposta inviata al navigatore
73/88
ta che dovete elaborare file di
testo (il che include natural-
mente anche numeri, intesi co-
me informazione), Perl è insu-
perabile. Inoltre è relativamente
facile da imparare.
Tornando al CGI, vediamo
che funge da interfaccia tra il
"mondo" legato al server Web e
quello che ruota intorno al PC
client che si collega al sito.
Il browser in uso sul compu-
ter client non deve conoscere i
vari linguaggi di programmazio-
ne: deve solamente interpretare
le informazioni CGI restituite dal
server cui è collegato.
In pratica, diventa possibile
creare pagine HTML basandosi
su dati residenti sul server, ma
disponibili direttamente all'u-
tente. Ciò naturalmente pone
problemi di sicurezza superiori
rispetto a quelli legati all'uso
degli SSI e perciò solo alcuni
provider sono disponibili a con-
sentire l'uso di CGI sui propri
server. Un esempio tipico nel-
l'impiego di quest'ultimo è nella
compilazione di form (moduli
online) che raccolgono dati dal-
l'utente e gli restituiscono ri-
sposte. I form servono agli im-
pieghi più disparati: registrazio-
ne dei nuovi utenti, compilazio-
ne di questionari, votazioni su
sondaggi, acquisto di prodotti,
raccolta dei parametri per una
ricerca, e via dicendo. Spesso si
usa CGI anche per allestire gue-
stbook (libro degli ospiti) dove i
visitatori possano inserire il lo-
ro nome e un breve commento
sul sito oppure per costruire un
modulo per la ricerca rapida di
informazioni.
Nella descrizione di un sito
statico, abbiamo visto che ogni
volta che digitiamo un URL
qualsiasi nella barra degli indi-
rizzi del browser Internet, il no-
stro computer (client) contatta
Informazioni contenute nel form
passate ad applicazione tramite CGI
Applicazione
con interfaccia
CGI
Risposta dell'applicazionevia CGI
il server Web sul quale "risiede"
il sito, indicandogli la pagina
desiderata. Il server Web cerca
il file corrispondente e lo tra-
smette al browser Internet che
lo interpreta e lo mostra a vi-
deo. Nel caso di pagine dinami-
che, il server esegue localmente
l'elaborazione necessaria, ossia
l'inserimento di un include op-
pure l'elaborazione di contenu-
ti mediante CGI e trasmette al
browser del navigatore solo il ri-
sultato.
Molti di voi avranno visto si-
ti con il classico contatore degli
accessi. Si tratta di un contenu-
to dinamico che incrementa au-
tomaticamente a ogni nuova vi-
sita. Bene, il contatore costitui-
sce un classico esempio di file
generato mediante uno script
CGI eseguito direttamente sul
server. Uno script, lo ricordia-
mo, è un file che contiene una
serie di righe di codice che ven-
gono interpretate, una per una,
dall'interprete del linguaggio in
cui sono state scritte e conver-
tite in comandi eseguibili dal
server. Tale file, una volta ese-
guito (in questo caso all’atto
dell’ingresso nel sito Web di un
nuovo visitatore), legge l’ultimo
valore assunto dal contatore (e
memorizzato sul disco fisso del
server Web), lo incrementa di
uno quindi “spedisce” al client
l’output (in questo caso il valo-
re del contatore sotto forma di
testo o d'immagine gif).
Gli script CGI sono facili da
comporre e hanno dimensioni
ridotte. Bisogna memorizzarli
in una cartella all’interno della
quale il server possa localizzar-
li. Se avete acquistato un servi-
zio di hosting per il vostro sito
Internet presso un qualsiasi
provider Internet, verificate che
lo spazio Web a vostra disposi-
zione vi permetta di eseguire
anche script CGI: accedete via
FTP (potete utilizzare, a tale
scopo, il programma SmartFTP,
presentato nel numero di marzo
2003 di PC Open a pagina 148) al
server sul quale avete acquista-
to il vostro spazio Web e cerca-
te una cartella denominata cgi-
bin. L’identificazione della car-
tella cgi-bin e delle modalità per
l’accesso alla stessa costitui-
scono le prime operazioni da
compiere: proprio (e solo) da
questa cartella, infatti, potran-
no essere eseguiti i vostri script
CGI. Non tutti gli amministrato-
ri consentono l’utilizzo di CGI,
solitamente per motivi di sicu-
rezza. Se possibile, è quindi
7a lezione
sempre bene chiedere al pro-
prio provider se abiliti le fun-
zioni CGI e se offra la compati-
bilità con i linguaggi che inten-
diamo utilizzare.
Più avanti, sempre con lo
scopo di testare i nostri script
CGI prima di caricarli sul server
Web, vedremo come configura-
re Apache e Microsoft IIS (i ser-
ver Web più utilizzati in tutto il
mondo) per eseguirli in locale. Il
collaudo in locale offrirà nume-
rosi vantaggi evitando la neces-
sità di tenere sempre attiva la
connessione Internet e d'impe-
gnarsi in continui upload trami-
te protocollo FTP.
Perl, gratuito e "testuale"
Abbiamo già evidenziato co-
me i CGI possano essere scritti
in vari linguaggi: abbiamo scel-
to per voi Perl, il più utilizzato.
È completamente gratuito e su-
pera qualsiasi altro linguaggio
nelle sue funzioni di elaborazio-
ni dei testi. Sono molte le carat-
teristiche che rendono il Perl un
linguaggio assai interessante e
“piacevole” da utilizzare: di-
stingue automaticamente tra
stringhe di testo e numeri a se-
conda dell’operatore utilizzato
(quindi non è necessario perde-
re tempo e sprecare risorse per
la conversione di un numero in
stringa o viceversa); permette
di separare rapidamente i ca-
ratteri in campi ed in dati che
possono poi essere utilizzati
dallo script CGI-Perl in vari mo-
di; facilita il trasporto (porting)
degli script sviluppati su piat-
taforme diverse (ad esempio da
Windows a Linux e viceversa).
Per la stesura del codice Perl
o per la visualizzazione di
script, suggeriamo l’utilizzo di
un normale editor di testo. Per
programmare uno script CGI,
così come per JavaScript, può
andar bene il Blocco Note di
Windows.
Ci sentiamo tuttavia di cal-
deggiare l’adozione di un editor
testuale più evoluto: ad esem-
pio, TextPad (www.textpad.
com) oppure HTML-Kit già pre-
sentato nelle precedenti lezioni
del nostro corso. Una volta rea-
lizzato lo script Perl sul proprio
personal computer, si dovrà
quindi provvedere a caricarlo
(via FTP) nella cartella cgi-bin,
all’interno dello spazio Web
messo a disposizione dal provi-
der Internet.
In questo modo lo script po-
trà essere richiamato e manda-
to in esecuzione. 
 7a lezione

2 I form: la porta per l’utilizzo degli script CGI

ella scorsa lezione abbia- form HTML sono i migliori can- gina HTML, campi per l’inseri- info/cgi-bin/test.pl (sostituite,

N mo già illustrato, breve-

mente, cosa sono e a che
cosa servono i moduli HTML (o
didati per l’acquisizione di
informazioni da parte dell’u-
tente che visita il sito Web: so-
mento del testo (se il parame-
tro type è impostato a text), ca-
selle di tipo checkbox (che
ovviamente, www.openma
ster.info con l’indirizzo del vo-
stro server Web).
form): essi sono una sorta di no quindi gli strumenti più possono essere o meno spun- Se, sulla pagina Internet,
questionari compilabili on line adatti per interagire con i visi- tate; se il parametro type è im- verrà mostrato il messaggio
da parte dei visitatori di un sito tatori. postato a checkbox), option box “Ecco la mia prima applicazio-
Web. Inizialmente il loro utiliz- Nella figura 1 potete notare (se il parametro type è impo- ne CGI”… congratulazioni!
zo era limitato: si adottavano tutti gli elementi caratteristici stato a radio), pulsanti di invio Avrete eseguito il vostro primo
esclusivamente per raccogliere di un classico form. (con il parametro type impo- script CGI.
informazioni sulle opinioni e In primo luogo, ricordiamo stato a submit) e di reset (an- In definitiva, il file test.pl con-
sulle preferenze degli utenti. che qualsiasi form HTML deve nullamento) dei dati (con type sente di verificare che gli script
I moduli compilati venivano essere racchiuso entro le ap- impostato a reset). Perl siano correttamente sup-
infatti poi automaticamente in- posite tag <FORM> e </FORM>. La parte più importante del portati.
viati ad un indirizzo e-mail (ad La tag iniziale <FORM> contie- form risulta essere comunque
esempio, quello del webmaster ne anche due importanti para- proprio la tag <FORM>: l’attri- Fondamenti di
del sito Internet). Oggi, le pos- metri (method e action), oltre al buto method segnala al brow- programmazione in Perl
sibilità di utilizzo dei form si so- nome attribuito al form (indi- ser Internet che i dati inseriti Perl è il linguaggio più popo-
no enormemente ampliate: cato col parametro name): il lo- dall’utente all’interno del form lare per la stesura di script Perl.
vengono utilizzati, su un sem- ro significato sarà presto chia- debbono essere trasmessi al Così come nel caso di Java-
pre maggior numero di siti, per ro. La restante struttura del server con la modalità post o Script, parliamo di script e non
interagire con l’utente. form deve essere composta se- get; l’attributo action indica in- di programmi. È bene infatti
Nella lezione precedente ab- guendo le specifiche HTML che vece che, dopo la pressione del sottolineare la differenza che
biamo visto com’è possibile in- consentono l’inserimento di pulsante di invio dei dati deve esiste tra i due termini: gli
teragire con un form HTML, di- caselle di testo, checkbox, op- essere raggiunto ed invocato lo script sono righe di codice che
rettamente sul personal com- tion box, pulsanti e così via. script CGI specificato (nell’e- indicano le azioni che devono
puter client, tramite JavaScript. Per approfondire l’utilizzo sempio http://www.openma essere compiute da parte del
Questa volta aggiungiamo un dei form HTML e scoprire tutte ster.info/cgi-bin/guest.cgi). computer sul quale sono ese-
altro tassello: ci proponiamo le possibilità che questi offro- guiti; ogni riga viene interpre-
di illustrare come gli script CGI no, vi consigliamo di fare riferi- La prima applicazione CGI tata (nel caso di JavaScript dal
possano interagire con i form. mento all’indirizzo Internet Per verificare che gli script browser Internet, nel caso di
La differenza è abissale: mentre www.w3.org/TR/REC-html40/ Perl, memorizzati nella cartella Perl dal software residente sul
nella scorsa lezione ci siamo interact/forms.html (in lingua cgi-bin del vostro server Web, server). I programmi sono in-
occupati dell’aspetto client, qui inglese). vengano correttamente esegui- vece preventivamente compi-
spostiamo l’attenzione sull’am- Le tag <INPUT>, specificate ti, provate a creare con un lati, in modo da risultare più
biente server ricorrendo pro- all’interno del corpo del form, qualsiasi editor di testo (va be- veloci da eseguire (seppur de-
prio all’utilizzo di CGI-Perl. I consentono di porre, sulla pa- ne anche il Blocco Note di Win- cisamente più “ingombranti”
dows) un file contenente quan- degli script).
1 to segue: Per programmare in Perl
non serve nulla di particolare:
è sufficiente un normale editor
testuale come il Blocco Note di
#!/usr/local/bin/perl Windows oppure - meglio -
#Questa riga indica dove è TextPad, 1st Page 2000 o
localizzato l’interprete Perl software similari. Chi lavora su
Linux può orientarsi sull’utiliz-
print "Content-type: zo di Emacs o di Vi (riconosce
text/html\n\n"; molti linguaggi ed è in grado di
#Questa linea consente di colorare opportunamente co-
stabilire che tipo di mandi, funzioni e parole chia-
contenuto deve essere visua- ve) - disponibile anche nella
lizzato più recente versione grafica de-
nominata “GVim” -.
print "Ecco la mia prima
applicazione CGI!"; Le variabili e i tipi
#Questa linea imposta il Già dalla precedente lezione
testo che dovrà essere visua- sapete cosa sono le variabili.
lizzato sulla pagina Web Si tratta di appositi “conteni-
tori” (porzioni della memoria)
1. L’attributo “method” indica che i dati inseriti nel form devono essere trasmessi con
la modalità “post”. all’interno dei quali è possibile
2. “Action” indica lo script CGI che deve essere avviato dopo la pressione del pulsante Memorizzate il file con il no- memorizzare ogni tipo di dato.
“Submit” (Invia). me di test.pl e caricatelo nella In Perl è necessario anteporre
3. Le tag <INPUT type=”text”> permettono di inserire altrettanti campi per cartella cgi-bin del vostro ser- al nome della variabile un’indi-
l’inserimento di testo. ver. Provate quindi ad inserire cazione che permette di stabi-
4. La tag <TEXTAREA> consente l’inserimento di un testo lungo (la casella per
l’inserimento del testo occupa, in questo caso, 5 righe e 50 colonne).
nella barra degli indirizzi del lire il tipo di dato che verrà in
5. I pulsanti “Submit” e “Reset” permettono, rispettivamente, la trasmissione al server browser Internet, il seguente essa memorizzato.
Web delle informazioni inserite e la pulizia del contenuto del form. URL: http://www.openmaster. Se si intende salvare in una 

74/88

 variabile un tipo di dato scala-
re cioè un numero, una stringa
(un testo) o una costante, è in-
dispensabile anteporre, al no-
me della variabile, il simbolo
del dollaro ($). Ad esempio,
$nome è una variabile di tipo
scalare che potrà essere utiliz-
zata per memorizzare una
stringa di testo.
Oltre agli scalari, esistono in
Perl altri tipi di variabili.
Anteponendo il carattere @
(at o chiocciolina) al nome del-
la variabile, è possibile inizia-
lizzarla come variabile di tipo
array (chiamati anche matrici).
Gli array sono dei gruppi di
scalari: ciò significa che all’in-
terno di una variabile di tipo ar-
ray è possibile memorizzare un
insieme di valori (stringhe di
testo, numeri, costanti). Un ar-
ray può contenere da zero ele-
menti sino a quanti sono con-
sentiti dal quantitativo di me-
moria in uso.
Un esempio di array è il se-
guente:
@redazione = ($direttore,
$caporedattore,$caposervizio,”
Gruppo Editoriale Agepe”,$impiegati)
Com’è possibile notare, l’ar-
ray “Redazione” è formato da
cinque elementi ordinati: quat-
tro stringhe (direttore, capore-
dattore, caposervizio e impie-
gati) ed una costante di tipo
stringa opportunamente deli-
mitata (com’è obbligatorio) tra
apici.
Esiste, poi, un tipo denomi-
nato hash (o array associativo):
questo permette di abbinare,
in un’unica variabile, un insie-
me di scalari. Le variabili hash
devono essere precedute dal
simbolo % (percento). Un
esempio di hash è il seguente:
%libro =
(“Titolo:”,$titolo_libro,”Codice:”,
$codice,”Autore:”,$autore)
Con l’esperienza ci si accor-
gerà che gli hash possono rap-
presentare un ottimo strumen-
to: essi infatti consentono di
correlare, in un’unica variabile
immediatamente accessibile,
un nome ed il relativo valore.
L’istruzione “print”
e il codice HTML
Nel primo esempio di script
CGI abbiamo utilizzato un’uni-
ca istruzione Perl: si tratta di
print. Analogamente a docu-
ment.write di JavaScript, con-
sente di “stampare”, sulla pagi-
na Web, una stringa di testo.
Bisogna sempre ricordare,
se si vuole visualizzare qualco-
75/88
sa su una pagina Web, di porre
inizialmente l’istruzione print
"Content-type: text/html\n\n";.
In questo modo si comuni-
cherà al browser Internet che
dovrà aspettarsi l’arrivo di una
pagina in formato HTML.
Tramite l’istruzione print, si
può stampare sulla pagina Web
anche del codice HTML. Verifi-
cate, per esempio, come lo
script Perl creahtml.pl crei una
pagina Web direttamente dallo
script CGI.
Passaggio dei dati a script
CGI: metodi POST e GET
Abbiamo già evidenziato co-
me gli script CGI consentano di
interagire con l’utente che visi-
ta il nostro sito. Tale interazio-
ne si concretizza con l’uso di
script CGI “collegati” a normali
form HTML. Uno degli accorgi-
menti più importanti per rice-
vere dati, consiste nel contras-
segnare ogni campo che costi-
tuisce il form con un nome
identificativo. L’operazione è
del tutto analoga a quanto già
visto nella scorsa lezione con il
JavaScript: è sufficiente ag-
giungere, all’interno dei marca-
tori <INPUT>, <SELECT>, <TEX-
TAREA> l’attributo name.
Provate ad analizzare il codi-
ce HTML del file guest.html: cia-
scun campo che costituisce il
form per l’inserimento dei dati
del “libro degli ospiti” è identi-
ficato con un attributo name.
Lo script CGI acquisirà i dati
inseriti dall’utente in ciascun
campo del form proprio rife-
rendosi agli attributi name:
scegliete, quindi, per ciascun
campo, un identificativo adatto
(fig. 2).
Ma come vengono passati i
dati allo script CGI che deve ri-
ceverli eD elaborarli? L’attribu-
to action, da inserire nella tag
<FORM>, permette di specifi-
care lo script CGI che dovrà ac-
2 La variabile ambiente RE-
3
quisire le informazioni inserite
nel form HTML mentre l’attri-
buto method consente di stabi-
lire la modalità di passaggio
dei dati.
I possibili valori assegnabili
all’attributo method sono POST
e GET. Il primo consente di in-
viare allo script CGI, memoriz-
zato sul server Web, una quan-
tità illimitata di dati.
Proprio per questo motivo è
il metodo più utilizzato. Quan-
do si utilizza il metodo POST,
inoltre, sulla barra degli indi-
rizzi non vengono visualizzate
informazioni sui dati che ven-
gono trasmessi al CGI.
Il metodo GET è quindi scar-
samente utilizzato quando si
vogliono acquisire dei dati da
un normale form HTML.
È bene però precisare che i
form non rappresentano l’uni-
co modo per trasmettere dati
ad uno script CGI: è infatti pos-
sibile inviarli anche tramite un
normale link HTML del tipo <A
7a lezione
HREF>. Ad esempio il link se-
guente, permette di inviare allo
script libro.pl, le informazioni
indicate dopo il simbolo ?
(punto interrogativo):
<a href=”http://www.open
master.info/cgi-bin/libro.pl?au
tore=rossi&tipo=informatica&a
nno=2002”>Trova i libri di infor
matica scritti dal Sig. Rossi nel
l’anno 2002</a>
In questo caso, per il pas-
saggio dei dati, viene utilizzato
il metodo GET.
Osservate il formato da uti-
lizzare per l’invio dei dati: dopo
il punto interrogativo deve se-
guire il nome del dato, il sim-
bolo di uguaglianza quindi il
valore. Qualora si debbano in-
viare più dati è necessario se-
pararli con l’utilizzo del simbo-
lo & (fig. 3).
Le variabili d’ambiente con-
tengono il gruppo di dati che
viene inviato allo script CGI re-
sidente sul server Web e sono
memorizzate in una variabile di
tipo hash denominata %ENV.
QUEST_METHOD consente di
stabilire con quale metodo so-
no stati passati i dati allo script
CGI mentre QUERY_STRING
permette di visualizzare il va-
lore ricevuto tramite il metodo
GET.
Lo script libro.pl che viene
invocato dal link HTML (ved. fi-
le libro.html) offre la possibilità
di verificare l’uso delle variabi-
li d’ambiente.
Notate che l’argomento della
variabile $ENV deve essere
racchiuso tra parentesi graffe
 7a lezione

ed apici. Esistono altre variabi- dati inseriti nel form; method semplice – come l’invio di un che l’utente avrà cliccato sul
li d’ambiente: CONTENT_ stabilisce la modalità di invio messaggio -, altre volte si de- pulsante Invia, i dati trasmessi
LENGTH consente di stabilire la degli stessi. vono gestire funzionalità più allo script sondaggio.pl assume-
lunghezza dei dati trasmessi Com’è possibile sviluppare complesse come l’inoltro di un ranno una forma simile alla se-
col metodo POST; HTTP_USER_ uno script CGI che acquisisca ordine di acquisto. guente: txt_nome=Mario+ Ros-
AGENT di recuperare le infor- le informazioni trasmessegli In ogni caso, lo script CGI si&Eta=30&risp1=buono.
mazioni sul browser e sul si- dal form con l’utilizzo del me- che deve elaborare le informa- Il parsing dei dati permette
stema operativo utilizzati dal- todo POST? zioni inserite nel form ha biso- di scomporre le informazioni
l’utente; HTTP_REFERER di ot- Non ci dilungheremo qui in gno di quei dati. Abbiamo già ricevute nella forma che lo
tenere l’indirizzo della pagina una trattazione dettagliata del visto come i dati possano pro- script CGI si aspetta.
Web che ha richiamato l’esecu- problema perché meriterebbe venire da fonti diverse: da nor- Il blocco racchiuso tra i com-
zione dello script CGI. un’analisi piuttosto approfon- mali form HTML, da link, da va- menti #inizio_parsing e #fi-
Il CGI variabili_ambiente.pl dita. Abbiamo comunque già riabili d’ambiente. ne_parsing nello script sondag-
permette di ottenere la lista visto come, quando un utente Quando un utente invia i da- gio.pl effettua proprio il par-
completa dei valori assunti da clicca sul pulsante di invio, i ti inseriti nel form cliccando sing dei dati ricevuti dal form
tutte le variabili d’ambiente al dati del form vengano trasmes- sull’apposito pulsante submit, HTML contenuto in sondag-
momento della sua esecuzione. si al server. o quando clicca su un link (co- gio.html.
Proviamo ora a cimentarci Tali informazioni, però, per me quello che invocava lo
con l’utilizzo del metodo POST. poter essere utilizzabili, devo- script libro.pl), il server riceve i Esempi e risorse
Immaginiamo di aver creato no essere “confezionate” in un dati sotto forma di coppie no- per approfondire
una pagina Web (ved. il file son- formato correttamente leggibi- me-valore, in un unico blocco Chi volesse approfondire l’ar-
daggio.html) contenente, al suo le da parte del vostro script continuo. gomento programmazione CGI-
interno, il seguente codice per CGI. Lo script CGI, per poter far Perl, estremamente vasto e sfac-
la visualizzazione di un form I visitatori del vostro sito uso di tali informazioni, deve cettato, può fare riferimento ai
(listato 1): Web si aspettano che, inseren- necessariamente scomporle in siti Web www.perl.com,
Al solito, l’attributo action do dei dati in un form, venga re- pezzetti più piccoli: il processo www.perl.org ed al newsgroup
consente di indicare lo script stituito loro un risultato: tal- prende il nome di parsing. italiano it.comp.www.cgi (con-
CGI cui devono essere passati i volta può trattarsi di una cosa Nel nostro esempio, dopo sultabile anche via Web all’indi-
rizzo http://groups.google.com/
LISTATO 1 groups?hl=it&lr=&ie=UTF-8&
<form name="form_sondaggio" method="post" action="http://www.openmaster.info/cgi-bin/sondaggio.pl"> group=it.comp.www.cgi).
Nome:<br><input type="text" name="txt_nome" size="30"><br> Chi invece fosse interessato
Et&agrave;:<br><input type="text" name="txt_eta" size="3"><br> all’utilizzo di script CGI che con-
<br>Giudizio attribuito al nostro sito:<br> sentano la visualizzazione di
<input name="risp1" type="radio" value="eccellente">Eccellente<br> contatori grafici e testuali per il
<input name="risp1" type="radio" value="buono">Buono<br> proprio sito Web, guestbook,
<input name="risp1" type="radio" value="sufficiente">Sufficiente<br> piccoli motori di ricerca, carrel-
<input name="risp1" type="radio" value="insufficiente">Insufficiente<br> li della spesa, mailing list e così
<input name="risp1" type="radio" value="mediocre">Mediocre<br> via, può fare riferimento al sito
Messaggio:<br><textarea name="txt_messaggio" rows="5" cols="50"></textarea><br> http://cgipoint.html.it: è possi-
<input type="submit" value="Invia"> bile reperire qui un’ampia rac-
<input type="reset" value="Annulla"> colta di link verso siti Web che
</form> offrono materiale in modo del
tutto gratuito. 

3 Installare e configurare un server Web

bbiamo già anticipato co- guiti su ciascun computer sulterà adeguatamente confi- teressati all’argomento, po-

A me Apache e Microsoft IIS

siano i server Web più uti-
lizzati nel mondo e come i CGI
rappresentino un primo esem-
pio di script server-side: essi
vengono eseguiti direttamente
sul server; il risultato dell’ope-
razione viene quindi trasmes-
so al browser (client) dell’u-
tente che sta visitando il sito
Web. Nel caso di JavaScript, in-
vece, così come abbiamo avu-
to modo di apprendere nella
scorsa lezione, gli script conte-
nenti le operazioni da effettua-
re vengono trasmessi in chiaro
- “così come sono” - al browser
Internet, interpretati ed ese-
client.
L’obiettivo di questa lezione
non è quello di improvvisare
sistemisti i nostri lettori ma
vuole rappresentare un punto
di partenza per tutti coloro
che desiderano approfondire
le tematiche relative alla pro-
grammazione lato server.
Comprendere come opera-
no Apache o IIS consentirà,
dapprima, di “convertire” - a
mero scopo didattico - un per-
sonal computer di casa o del-
l’ufficio a server Web: potrete
effettuare qui le vostre prime
prove di configurazione.
Una volta che il sistema ri-
gurato, potrete utilizzarlo per
testare le vostre pagine Web fa-
centi uso di tecniche di pro-
grammazione che implicano
l’interazione con il server, pri-
ma ancora di caricarle sullo
spazio Web messovi a disposi-
zione dal vostro provider In-
ternet.
Chi sviluppa siti Web dina-
mici, infatti, è bene allestisca -
a casa propria o nel proprio uf-
ficio - uno o più server Web in
modo tale da verificare il per-
fetto funzionamento delle pa-
gine realizzate prima ancora
di porle online.
I più volenterosi ed i più in-
tranno raffinare le stesse co-
noscenze con l’obiettivo di al-
lestire un vero e proprio ser-
ver Web personale. Chi dispo-
ne di connessioni Internet a
larga banda (ADSL o fibra otti-
ca) può provare a rendere uno
o più siti Web accessibili al
mondo intero direttamente da
uno dei propri computer di ca-
sa o dell’ufficio. Chi possiede
una rete locale può pensare al-
la realizzazione di servizi di
gestione della propria attività
basati su Intranet.
Il lettore avrà quindi già
compreso come la conoscenza
del funzionamento del server 

76/88

 Web apra enormi possibilità.
Va sottolineato che la realizza-
zione di progetti complessi im-
plicherà la necessità di misu-
rarsi immediatamente con pro-
blematiche assai importanti
come quella della sicurezza.
Se non si vuole vedere il pro-
prio server Web violato dall’e-
sterno, attraverso la Rete, da
parte di hacker e malintenzio-
nati, si dovrà imparare ad ap-
plicare patch e severe policy di
sicurezza. Queste tematiche,
che necessiterebbero una trat-
tazione ampia ed articolata, sa-
ranno oggetto di servizi futuri.
Server Web professionali
Al giorno d’oggi sono dispo-
nibili numerosi server Web
(gratuiti o meno): alcuni di es-
si sono liberamente prelevabi-
li da Internet in modo che pos-
sano esserne saggiate tutte le
caratteristiche.
L’indagine che Netcraft ef-
fettua mensilmente (www.net
craft.com) suggerisce quali
siano, al momento, i server
Web più utilizzati in tutto il
mondo. Secondo le statistiche
disponibili all’indirizzo www.
netcraft.com/survey/, nel me-
se di marzo 2003, Apache ri-
sultava in uso sul 62,5% dei
server totali a livello mondiale
mentre Microsoft IIS sul 27%.
Gli aspetti che vanno consi-
derati prima della “messa in
opera” di un server Web sono
la facilità d’installazione e di
configurazione, le possibilità
di personalizzazione, le sue
caratteristiche peculiari, le
sue dimensioni, le performan-
ce garantite ed il consumo di
risorse macchina, il supporto
di transazioni sicure, la dispo-
nibilità del codice sorgente, la
puntualità con cui vengono ri-
lasciati aggiornamenti, even-
tuali patch e nuove versioni, il
supporto tecnico, il supporto
di più piattaforme hardware-
software, la disponibilità di
versioni gratuite. I server Web
disponibili oggi non consento-
no solo di restituire pagine sta-
tiche ai personal computer
che si collegano con un certo
sito ma supportano tutti i più
recenti linguaggi di scripting.
I tempi in cui il Web era con-
cepito come un insieme di pa-
gine statiche collegate da sem-
plici collegamenti ipertestuali
(link) sono ormai remoti.
Gli sviluppatori di pagine
Web hanno sentito infatti, da
subito, l’esigenza di svincolar-
77/88
si dalla staticità dell’HTML.
Nacquero, quindi, i primi lin-
guaggi server-side: l’intento era
quello di garantire una mag-
giore interattività delle pagine
Internet, restituendo all’utente
solo le informazioni cui egli
era effettivamente interessa-
to.
CGI è proprio una delle pri-
me tecnologie che vennero of-
ferte agli sviluppatori per ren-
dere maggiormente dinamici i
propri progetti sul Web.
Dopo CGI hanno preso am-
piamente piede ASP, PHP,
ColdFusion e JSP mentre sta
cominciando a fare capolino il
nuovo Microsoft .NET.
Il denominatore comune dei
linguaggi di scripting “server-si-
de” consiste nel fatto che il co-
dice viene eseguito e interpre-
tato direttamente sul server
che ospita il sito Internet (una
situazione inversa rispetto a
quanto accade nel caso di Ja-
vaScript).
In questo modo è possibile
acquisire dall’utente la lista
delle informazioni alle quali
egli è interessato, ricercarle
sul server quindi proporgliele
sotto forma di una normale
pagina HTML, preparata “al vo-
lo” direttamente sul server
Web. Il processo è del tutto
trasparente agli occhi dell’u-
tente.
Linguaggi come ASP e PHP
hanno aperto scenari fantasti-
ci, impensabili all’epoca in cui
tutto il Web era immobile, con-
dizionato dalla staticità del-
l’HTML: si pensi, a mero titolo
esemplificativo, che è oggi
possibile generare automati-
camente pagine HTML river-
sando, al loro interno, il con-
tenuto di un database. In pra-
tica, immaginate di poter me-
morizzare tutte le informazio-
ni che dovranno essere inseri-
te nel vostro sito Web (ad
esempio, il catalogo dei vostri
prodotti con nome, descrizio-
ne ed altri dati caratterizzanti)
in unico database. Grazie al-
l’utilizzo di script “server-side”
il server Web sarà in grado di
attingere dal database solo le
informazioni alle quali il visi-
tatore è interessato, comporre
una normale pagina HTML, in-
serirvi all’interno i dati richie-
sti e proporre il tutto all’uten-
te. Nel caso di un catalogo me-
morizzato all’interno di un da-
tabase (per esempio, in for-
mato Microsoft Access), si do-
vrà esclusivamente realizzare
7a lezione
IIS, le differenze in Windows XP
Pro e 2000/2003 Server
Sia la versione Professional di Windows XP (così come Windows
2000 Professional), sia la versione Server di Windows
2000/2003, mettono a disposizione Internet Information
Services (IIS).
Le differenze tra le due versioni, sebbene siano molto simili per
ciò che concerne l’interfaccia grafica di amministrazione, sono
piuttosto marcate. La versione di IIS inclusa in Windows XP
Professional è assai limitata: il webmaster o il programmatore può
farne uso con il solo scopo di testing delle pagine Internet
sviluppate.
Una volta verificata la corretta visualizzazione di tutte le pagine
Internet su una tranquilla workstation locale dotata di Windows XP
Professional e IIS, una volta soddisfatti del proprio lavoro, si potrà
procedere alla “pubblicazione” del sito sul server della società o
del provider Internet sul quale sarà in esecuzione Windows 2000
Server e IIS oppure, se più fortunati, Windows 2003 Server, molto
superiore rispetto a Windows 2000 Server in termini di affidabilità
e di prestazioni.
La versione di IIS di Windows XP Professional non permette infatti,
di creare veri e propri siti Internet, raggiungibili dall’esterno nella
forma http://www.nomedelsito.com ma semplicemente di creare
una serie di directory virtuali: in ciascuna di esse si potranno
memorizzare le pagine costituenti un unico sito.
Ciascun sito “virtuale” sarà però raggiungibile nella forma
http://123.45.67.89/nome_sito ove 123.45.67.89 è l’indirizzo IP
associato in quel momento alla macchina dotata di Windows
2000 Professional e IIS; nome_sito è il nome della directory
virtuale contenente le pagine Web da visualizzare.
Sebbene questo tipo di struttura possa essere adeguata per
piccole realtà aziendali che utilizzano reti locali per offrire ai propri
dipendenti servizi Intranet (ad esempio, la possibilità di accedere
a determinati dati, di acquisire ordini dai clienti, di gestire la
contabilità dell’azienda semplicemente da un’interfaccia Web),
non è pensabile adottare questa soluzione nel caso in cui, dalla
medesima macchina, si desideri rendere accessibili numerosi siti
Internet nella forma www.ilmiosito.it o www.ilsuosito.com.
lo script in grado di recuperare Server e quello che viene for-
le informazioni e di generare la nito con le versioni Professio-
pagina Web. nal sono notevoli (a tal propo-
In questo modo si eviterà di sito, fate riferimento al box di
sprecare tempo e risorse nello approfondimento qui sopra).
sviluppo di una pagina HTML Sostanzialmente, la versio-
statica per ciascun prodotto ne di IIS inclusa in Windows
che si vuole mettere in Rete. XP Professional può essere
Eventuali modifiche (grafiche utilizzata con il solo scopo di
e non) dovranno essere inoltre sviluppare e testare a fondo i
applicate solo allo script ser- siti Web che si stanno realiz-
ver-side e non ad ogni singola zando, prima ancora di “pub-
pagina HTML! Presenteremo blicarli” on line (sul server
linguaggi come ASP e PHP nel Web messo a disposizione dal
prossimo futuro. proprio provider Internet). Ta-
le versione di IIS è infatti asso-
Installare e configurare IIS lutamente inadatta se si vuole
Internet Information Services allestire un server professio-
(IIS) è il server Web che Mi- nale.
crosoft mette a disposizione La versione di IIS inclusa in
nelle versioni Professional e Windows XP Professional è la
Server di Windows 2000 ed in stessa che viene fornita insie-
Windows XP Professional (di me con Windows 2000 Profes-
Windows 2003 Server, in test sional (cambia solo il numero
presso diverse aziende già da della versione: IIS 5.1 in luogo
un paio di anni, è atteso per i di 5.0). In Windows XP Profes-
primi di maggio). Le differenze sional, l’installazione di IIS de-
tra l’IIS incluso nelle versioni ve essere avviata manualmen-

4 net Information Services.
te accedendo al Pannello di
controllo di Windows, cliccan-
do su Installazione applicazio-
ni quindi su Installazione com-
ponenti di Windows.
Dalla lista dei componenti
installabili, selezionate la voce
Internet Information Service
(IIS) quindi cliccate sul pul-
sante Dettagli. Qualora siate
interessati ad allestire solo un
server Web, potete limitarvi a
spuntare le caselle File comu-
ni, Servizio Web, Snap-in Inter-
4 Configurazione del sito Web predefinito
in Windows XP Professional
ccedendo al Pannello di
A controllo di Windows XP
Professional e facendo
doppio clic sull’icona Strumen-
ti di amministrazione quindi su
Internet Information Services, si
accederà alla finestra di confi-
gurazione del server IIS. Da
questa finestra è possibile ge-
stire siti Web, funzionalità FTP
e SMTP.
Dopo l’installazione di IIS,
viene automaticamente creato
un sito Web predefinito conte-
nente, essenzialmente, i riferi-
menti ai file della guida di In-
ternet Information Services.
È opportuno considerare le
varie opzioni per la configura-
zione di un sito Web da un pun-
to di vista gerarchico: maggio-
re è il livello gerarchico dell’e-
lemento sul quale si stanno ap-
portando delle modifiche,
maggiore sarà l’impatto globa-
le degli stessi interventi.
Molte schede per la configu-
razione compaiono a più livel-
li gerarchici: ciò significa che
effettuando una modifica al li-
vello più alto verrà influenzato
un maggior numero di oggetti
componenti il sito.
Fate clic con il tasto destro
78/88
Cliccando su OK vi verrà ri-
chiesto di inserire il CD ROM
di installazione di Windows
XP.
Al termine della fase di se-
tup, che procederà in modo
automatico, consigliamo di
riavviare il sistema operativo
(fig. 4). Per controllare che IIS
sia installato e funzionante, av-
viate il browser Internet quin-
di digitate, nella barra degli
indirizzi, http://localhost (lo-
calhost è detto anche indirizzo
di loopback ed identifica il vo-
stro stesso computer).
Il server Web (IIS) dovrebbe
rispondere alla vostra richie-
sta mostrandovi la pagina di
default.
Se il computer è connesso
in rete locale, provate ad ac-
cedere alla visualizzazione
della pagina HTML di default
di IIS da un client qualsiasi.
del mouse sulla voce Sito pre-
definito quindi scegliete Pro-
prietà. La prima parte della fi-
nestra contiene le informazio-
ni necessarie per l’identifica-
zione del sito, compresi nome
e indirizzo. Vi sono poi due vo-
ci relative alle porte da utiliz-
zare: la prima, per gli accessi
anonimi dal server, la seconda
per l’accesso SSL. Una delle li-
mitazioni che Windows XP Pro-
fessional impone consiste nel
fatto di mettere a disposizione
l’utilizzo, per le connessioni
SSL, di un’unica porta: la 443.
L’altra grossa limitazione
della versione di IIS contenuta
in Windows XP Professional,
consiste nel fatto che il nume-
ro di connessioni che possono
essere effettuate è limitato a
10. Questa restrizione rende
Windows XP Professional as-
solutamente inadatto per la ge-
stione di un normale sito Web
che preveda un numero di ac-
cessi contemporanei superio-
re.
Il campo Timeout connessio-
ne permette di stabilire il tem-
po massimo (in secondi) du-
rante il quale un utente inatti-
vo - che non “naviga” cioè al-
7a lezione
Per far ciò eseguite Internet 5
Explorer (o il browser installa-
to) e digitate, come URL,
http:// seguito dal nome del
computer sul quale è in esecu-
zione IIS (per esempio:
http://michelesrv).
Per verificare il nome asse-
gnato al computer sul quale
avete provveduto ad installare
IIS, accedete al Pannello di con-
trollo, fate doppio clic sull’ico-
na Sistema, cliccate sulla
scheda Nome computer.
Il pulsante Cambia… per-
mette di modificare a proprio
piacimento il nome della mac-
china (fig. 5). In alternativa, personal computer della LAN
potete provare a raggiungere per accedere alla pagina pre-
la macchina IIS facendo riferi- definita proposta da IIS.
mento al suo indirizzo IP. Se poi il computer è colle-
Supponiamo che all’interno gato ad Internet dovrebbe es-
della rete locale gli sia stato sere possibile raggiungerlo
assegnato l’IP 192.168.0.4: pro- dall’esterno indicando l’IP as-
vate a digitare http:// segnato dal provider al mo-
192.168.0.4 da un qualsiasi mento della connessione. 
l’interno del sito - può restare di spazio su disco. In caso con-
collegato al server IIS.
Poiché l’utilizzo della ver-
sione di IIS inclusa in Windows
trario, se si prevede che la
macchina sulla quale è instal-
lato IIS debba essere raggiun-
XP Professional è consigliato gibile anche dalla Rete Inter-
pressoché esclusivamente al- net, è bene attivare l’utilizzo
l’interno di una rete locale In- dei file di log in modo da rile-
tranet, suggeriamo di ridurre il vare anche eventuali tentativi
valore impostato nel campo Ti- di intrusione. Il formato più dif-
meout connessione in modo da fuso per la creazione dei file di
agevolare l’ingresso di utenti log è il W3C Extended Log File
in attesa e di accelerare le pre- Format che costituisce lo stan-
stazioni del sistema. dard per la maggior parte dei
Suggeriamo, inoltre, di atti- server Web ed è supportato
vare la casella Abilita keep-ali- anche dagli sviluppatori di
ve HTTP: è possibile così mi- strumenti di analisi e gestione
gliorare le prestazioni del ser- (fig. 6). 
ver permettendo ad ogni client
di mantenere attiva la connes- 6
sione con IIS anziché crearne
una nuova ad ogni richiesta di
accesso.
La sezione Consenti registra-
zione attività permette di con-
figurare le impostazioni relati-
ve alla creazione dei file di log
ossia dei file testuali che regi-
strano tutti i tentativi di acces-
so al server IIS. Se si prevede
di utilizzare IIS solo all’interno
della propria Intranet, è possi-
bile disattivare la casella Con-
senti registrazione attività in
modo da evitare l’occupazione

 A questo livello non ci sem- lizza in formato ipertestuale il
bra opportuno dilungarci sui contenuto di una cartella non
filtri ISAPI: basti sapere che es- virtuale. Per visualizzare il
si consentono di eseguire con- contenuto di queste ultime bi-
trolli in background sul sito sognerà conoscerne l'alias as-
Web. Vi sono diversi tipi di fil- sociato. Se l'opzione non è abi-
tri: alcuni soddisfano esigenze litata e l'utente specifica all'in-
relative alla sicurezza, altri la terno dell'URL un percorso ad
mappatura degli URL e l’elabo- una risorsa inesistente, il ser-
razione delle intestazioni ri- ver Web risponderà con un
chieste. messaggio di errore (accesso
La scheda Home Directory negato); Registra visite aggiun-
permette invece di specificare ge la risorsa a quelle da moni-
dove debbono essere reperiti i torare per mezzo dei file di log;
file che compongono il sito Indicizza questa risorsa se il
Web che si sta configurando in servizio di indicizzazione è at-
IIS. Le scelte possibili sono tre: tivo, aggiunge la risorsa a quel-
Directory situata in questo com- le da indicizzare.
puter, Directory condivisa si- Il menU a tendina Autorizza-
tuata in un altro computer e zioni di esecuzione permette di
Reindirizzamento a un URL. indicare il livello di esecuzione
La scheda può assumere di- autorizzato sulla risorsa: solo
verse forme a seconda che si file HTML, script oppure script
sia selezionata una directory, ed eseguibili.
una directory virtuale o un file La scheda Documenti con-
(fig.7). La sezione sottostante sente di impostare le pagine
della finestra permette di im- che devono essere automati-
postare le tipologie di accesso camente proposte all’utente
consentite. qualora egli non specifichi il
Accesso origine script, se se- nome di un file memorizzato
lezionato, e se sono impostati i sul server.
premessi di lettura e/o scrittu-
ra, permette l'accesso al codi- Primi accorgimenti
ce sorgente degli script; Lettura e creazione di una
consente l'accesso alla risorsa directory virtuale
in sola lettura; Scrittura per- Microsoft stessa, per motivi
mette l'accesso alla risorsa in di sicurezza, consiglia di elimi-
lettura/scrittura; Esplorazione nare i riferimenti ai file della
directory se selezionato, visua- guida ed agli esempi installati
automaticamente insieme con
7 IIS (per ottenere la lista com-
pleta delle patch da installare e
delle politiche di sicurezza che
è consigliabile applicare, sug-
geriamo l’utilizzo del software
Microsoft Baseline Security
Analyzer (MBSA), già presen-
tato nei numeri 78 (a pagina
61) e 79 (a pagina 69) di PC
Open.
Per far questo eliminate, dal-
la finestra di amministrazione
di IIS, tutte le directory virtua-
li create dopo l’installazione di
Internet Information Services
(cancellate le directory virtua-
li Scripts, IISAdmin, IISSamples,
8 MSADC, IISHelp, WebPub, Prin-
ters) e tutti i contenuti predefi-
niti (cancellate le cartelle inet-
srv\iisadmin e inetsrv\ii-
sadmpwd – entrambe contenu-
te nella cartella \winnt\sy-
stem32 -; cancellate anche le
cartelle \inetpub\wwwroot (o
\ftproot o \smtproot), inet-
pub\scripts, inetpub\iissam-
ples, inetpub\adminscripts,
%systemroot%\help\iishelp\iis
e %systemroot%\web\printers.
A questo punto fate clic con
79/88
7a lezione
il tasto destro del mouse su Si- 9
to web predefinito, cliccate sul-
la scheda Home director y,
quindi eliminate wwwroot dalla
casella Percorso locale (do-
vrebbe restare solo c:\inet-
pub). Questa modifica vi per-
metterà di evitare un messag-
gio d’errore che informa sull’i-
nesistenza della cartella speci-
ficata (fig. 8-9).
Dopo aver effettuato le re-
golazioni iniziali, sinora illu-
strate, è possibile passare alla
creazione di una directory vir-
tuale. Nella versione di IIS in-
clusa in Windows XP Profes- vuole accedere alla directory
sional è immediato pensare di virtuale di PC Open, creata sul
creare una directory virtuale nostro computer, dovremo di-
per ogni sito Web che si sta svi- gitare, nella barra degli indiriz-
luppando. zi http://localhost/pcopen.
Destinando una directory Per accedere alla stessa di-
virtuale a ciascun sito su cui si rectory virtuale, un utente del-
sta lavorando, è possibile si- la nostra LAN dovrà digitare, in
mulare, sul proprio computer, luogo di localhost, l’indirizzo IP
il comportamento del server associato alla nostra macchina
Web che lo ospiterà. È possibi- oppure il nome della stessa: ad
le visualizzare, quindi, pagine esempio, http://paperino/pco-
Web statiche e dinamiche così pen.
come appariranno successiva- Tenete presente che è pos-
mente dopo averle caricate sul sibile accedere alle directory
server. L’utilizzo delle direc- virtuali configurate su un per-
tory virtuali permette di risol- sonal computer dotato di Win-
vere eventuali problemi prima dows XP Professional e IIS an-
ancora di “pubblicare” i file sul che dalla Rete Internet specifi-
server Web del provider Inter- cando, al posto di localhost,
net consentendo di concen- l’indirizzo IP associato in quel
trarsi esclusivamente sulla momento alla macchina (per
programmazione e sull’otti- stabilire l’indirizzo IP associa-
mizzazione del sito. La parti- to al proprio computer all’atto
colarità delle directory virtua- della connessione Internet, fa-
li consiste nel fatto di fungere te doppio clic sull’icona raffi-
da “puntatore” verso una car- gurante due piccoli computer,
tella residente su un disco fis- nella traybar in basso a destra,
so locale o su un altro personal cliccate sulla scheda Dettagli
computer in rete (fig. 10). quindi fate riferimento al valo-
Per creare una nuova direc- re Indirizzo IP del client).
tory virtuale, è sufficiente fare Per evitare l’accesso ai siti
clic con il tasto destro del configurati su IIS è necessario
mouse su Sito web predefinito applicare alcune politiche di
quindi seguire la procedura sicurezza sugli account utente
passo-passo che viene presen- o configurare un firewall in mo-
tata. do tale che respinga i tentativi
La finestra immediatamente di accedere al server IIS dalla
successiva a quella di presen- Rete Internet (a tal proposito,
tazione, richiede di specificare fate riferimento al box dedica-
un alias per la directory vir- to ad Outpost Firewall) fig. 11.
tuale che si sta crean-
do. 10
L’alias è l’identifica-
tivo che dovrà digita-
re, nella barra degli in-
dirizzi del browser In-
ternet, chiunque vorrà
accedere al contenuto
della directory virtua-
le. Ad esempio, sup-
poniamo di inserire
pcopen come alias: ciò
significa che se dal
browser Internet si

11
Dopo l’impostazione dell’a-
lias, è necessario indicare la
cartella che deve essere pun-
tata ossia la directory su disco
che contiene (o all’interno del-
la quale si intende memorizza-
re) i file che costituiscono il si-
to Web. Il nostro consiglio è
quello di effettuare una prova
copiando i file d’esempio che
trovate nel CD ROM allegato a
questo numero di PC Open in
una cartella sul vostro disco
fisso. Ad esempio, se decidete
di porre tali file in una cartella
denominata C:\PCOpen_esem-
pi, specificate qui la stessa di-
rectory (servendovi del pul-
sante Sfoglia…) (fig. 12).
Come ultimo passo, è neces-
sario specificare le autorizza-
zioni che si desiderano impo-
stare per la directory virtuale
in corso di creazione. Sugge-
riamo di attivare solo le casel-
le Lettura ed Esecuzione script.
Cliccando sul pulsante Avanti
quindi su Fine, si concluderà la
procedura guidata.
Come risultato, vedrete
comparire all’interno del ramo
Sito web predefinito, una nuova
12
80/88
voce, corrispondente all’alias
da voi scelto per la directory
virtuale.
Cliccando con il tasto de-
stro del mouse sulla directory
virtuale pcopen appena creata
quindi scegliendo Proprietà,
avrete accesso alla finestra
delle proprietà, molto simile a
quella già vista in precedenza
per il Sito Web predefinito
(fig. 13).
Sono due gli aspetti che, a
questo livello, è bene sottoli-
neare. Il primo riguarda la ge-
stione della sicurezza. La sche-
da Protezione directory per-
mette di stabilire le modalità
con le quali un utente può ac-
cedere alla directory virtuale.
Diversamente dalla versio-
ne server di IIS, in Windows XP
Professional non è possibile
controllare l’accesso in base
all’indirizzo IP.
Facendo clic sul pulsante
Modifica, viene visualizzata la
finestra Metodi di autenticazio-
ne: selezionando la casella Ac-
cesso anonimo è possibile fare
in modo che chiunque possa
accedere alla directory (pur
consentendo di man-
tenere il controllo sul-
le sottodirectory e sui
singoli file).
Nonostante l’accesso
sia “anonimo”, l’utente
verrà registrato nel si-
stema per mezzo di un
account “ad hoc” (ge-
neralmente denomina-
to IUSR_nomecompu-
ter, ove nomecompu-
ter è il nome associato
al computer sul quale
è in esecuzione IIS).
Gli utenti anonimi non
13
dovranno inserire alcun nome
utente identificativo né alcuna
password per accedere ad una
directory virtuale sul vostro
computer. Se su un server Web
di solito si deve consentire
l’accesso ad un sito senza digi-
tare alcun nome utente e pas-
sword, sul vostro computer lo-
cale sarebbe bene inibire, per
ragioni di sicurezza, qualsiasi
forma di accesso anonimo.
Gli altri tre livelli di accesso
richiedono l’identificazione
dell’utente prima di consentire
l’accesso alla directory.
Attivando la casella Autenti-
cazione di base vengono ri-
chiesti il nome e la password
dell’utente. L’unico problema è
che tali informazioni vengono
trasmesse in chiaro e possono
essere quindi intercettate con-
sentendo ad utenti malinten-
zionati di accedere al sistema
in modo non autorizzato.
L’intercettazione può avve-
nire tramite un software (o un
hardware) denominato sniffer,
in grado di analizzare il conte-
nuto di ogni pacchetto inviato
e ricevuto.
Le due opzioni successive
sono utilizzabili in Windows
2000 Professional solo
se la macchina è colle- 14
gata ad un server di
dominio.
L’opzione Autentica-
zione integrata di Win-
dows sfrutta invece un
metodo completamen-
te diverso per l’identi-
ficazione dell’utente:
in questo caso il siste-
ma operativo effettua
uno scambio di dati
crittografati con il
browser dell’utente
grazie ad un metodo
di certificazione digi-
7a lezione
tale installato sul personal
computer client insieme con il
browser Internet.
Il secondo aspetto da evi-
denziare riguarda la priorità
con la quale vengono visualiz-
zati i documenti contenuti in
una directory virtuale.
Nella scheda Documenti, è
possibile indicare quali file de-
vono essere mostrati se l’uten-
te non richiede la visualizza-
zione di uno specifico file.
Digitando, nella barra degli
indirizzi del browser, l’URL
http://localhost/pcopen, verrà
dapprima cercato il file de-
fault.htm, se questo non viene
trovato, IIS passa alla ricerca di
default.asp. Se anche il file de-
fault.asp non è presente nella
cartella, IIS ricerca iisstart.asp;
se anche tale file risulta irrepe-
ribile, viene visualizzato un
messaggio d’errore che segna-
la all’utente l’impossibilità di
accedere alla directory. La lista
dei documenti predefiniti è li-
beramente personalizzabile
(fig. 14). Nel nostro esempio,
digitando nel browser l’URL
http://localhost/pcopen, verrà
infatti visualizzata automatica-
mente la pagina default.htm. 

5 Installare e configurare Apache sotto Windows
pache è il server Web at-
A
tualmente più utilizzato al
mondo, nato per funziona-
re come processo “stand alone”
ossia senza richiedere l’appog-
gio di altre applicazioni o di altri
componenti software.
Si tratta di un prodotto soli-
do, performante e supercollau-
dato: è il frutto (completamente
gratuito) del lavoro di un team
di volontari, noto come “Apa-
che Group”.
Apache è un software estre-
mamente aperto (sono addirit-
tura reperibili sul sito www.apa
che.org i sorgenti veri e propri)
che offre anche la possibilità ad
altre aziende di crearsi un busi-
ness mediante lo sviluppo di
plug-in, aggiunte varie, stru-
menti di configurazione, tool di
supporto e così via.
Il server Web Apache, nato in
ambiente Linux, è disponibile
per tutte le piattaforme Unix, in-
cluso Mac OSX e, più di recente,
è stato portato anche in Win-
dows.
Apache differisce da IIS per il
fatto di essere completamente
gratuito e di mettere a disposi-
zione tutte le funzionalità di un
server Web avanzato. Tra l’altro
Apache può essere impiegato
su una qualunque versione di
Windows (Windows 9x compre-
so).
L’ultima versione di Apache
disponibile al momento della
stesura di questo servizio, è la
2.0.44: sul sito dedicato a que-
sto server Web (http://httpd.
apache.org/) è possibile reperi-
re le informazioni relative all’in-
stallazione, alla configurazione
ed all’aggiornamento dello stes-
so. L’Apache Group è poi solito
pubblicare tempestivamente,
proprio in questo sito Web, le
patch risolutive per eventuali
bug di sicurezza scoperti con il
passare del tempo.
15
81/88
Per avviare l’installazione di
Apache, fate doppio clic sul file
apache_2.0.44-win32-x86-
no_ssl.msi (prelevabile gratuita-
mente all’indirizzo http://na
goya.apache.org/mirror/httpd/
binaries/win32/apache_2.0.44-
win32-x86-no_ssl.msi).
Dopo l’accettazione dei ter-
mini della licenza d’uso (che
consigliamo di leggere con at-
tenzione) e delle note generali
sull’installazione (Read This Fir-
st) sarà necessario inserire al-
cune informazioni riguardo al
server Web che si sta configu-
rando. Se state installando Apa-
che per la prima volta, con lo
scopo di saggiarne le principali
funzionalità, digitate localhost
nel campo Server Name ed inse-
rite la vostra e-mail nel campo
Administrator’s email address.
Lasciate attiva l’opzione for All
users, on Port 80, as a service
(fig. 15).
Nella finestra successiva se-
lezionate Typical quale moda-
lità di installazione quindi inse-
rite la cartella ove desiderate
che Apache venga collocato.
Cliccando sul pulsante Install
verrà avviata la fase di setup
che si concluderà in pochi
istanti. Al termine della proce-
dura, all’interno della traybar
(ossia l’area situata in basso a
destra, accanto all’orologio di
Windows), dovrebbe comparire
l’icona di Apache, a segnalare
che il Web server è già in esecu-
zione (fig 16).
Ad installazione conclusa
provate ad avviare Internet Ex-
plorer o il browser in uso e digi-
tate http://localhost. Se il server
Web vi risponderà con la fine-
stra visualizzata in figura avrete
installato correttamente Apa-
che. I file componenti il sito
Web (HTML, PHP,…) andranno
posti nella sottodirectory deno-
minata htdocs. All’interno della
stessa cartella, potete creare
sottodirectory in modo che il lo-
ro contenuto possa essere ri-
chiamato, dal browser Internet,
nella forma http://localhost/no-
mesottodirectory/nomefile.html.
Se l’utente non specifica alcun
file ma si limita a digitare un
URL del tipo http://localhost/no-
mesottodirectory, il primo file
che verrà automaticamente ri-
chiamato sarà index.html.
Così come in Linux, anche in
Windows il file che consente la
16
configurazione dell’intero ser-
ver Web è httpd.conf contenuto
nella cartella \Apache\conf.
Ricorrendo all’utilizzo di Ri-
sorse del computer (o Gestione
risorse), portatevi all’interno
della cartella ove avete installa-
to Apache quindi fate doppio
clic sulla directory denominata
Conf.
L’analisi delle varie opzioni di
configurazione di Apache, effet-
tuabili agendo sul file httpd.conf,
va oltre gli obiettivi di questa le-
zione. Suggeriamo di fare riferi-
mento alla pagina http://httpd.
apache.org/docs-2.0/mod/
quickreference.html per ottene-
re una lista completa delle re-
golazioni (direttive) applicabili.
Per rendere la configurazione di
Apache più semplice ed intuiti-
va – evitando, così, di dover in-
tervenire direttamente sul file di
testo httpd.conf – sono nati dei
tool basati su interfaccia grafi-
ca. A titolo d’esempio citiamo
ApacheConf (a pagamento) pre-
levabile all’indirizzo http://
www.apache-gui.com/.
ActivePerl su Windows
ActivePerl è un software gra-
tuito che contiene la più recen-
te versione di Perl per ambiente
Windows. Il produttore, Active-
State, ne offre anche una ver-
sione per Linux così da non mo-
dificare il proprio lavoro nel ca-
so lo si traghettasse nell'altro
ambiente. Trattandosi di un lin-
guaggio interpretato, che viene
quindi tradotto in linguaggio
macchina al momento dell'ese-
cuzione, è necessario disporre
di un interprete ad hoc per cia-
scuna delle piattaforme su cui
lo s'intende utilizzare.
ActivePerl è semplicissimo
da installare e configurare in en-
7a lezione
trambi i mondi: servendosene
si potrà provare tutti gli script
CGI Perl sul proprio personal
computer.
La versione Windows è di-
sponibile sul CD guida allegato
per concessione di Active State
che detiene il copyright su Acti-
ve Perl e Perlscript.
L’installazione di ActivePerl
per Windows è avviabile facen-
do doppio clic sul file ActivePerl-
5.8.0.805-MSWin32-x86.msi. Do-
po la schermata iniziale, per pri-
ma cosa si dovrà accettare il
contratto di licenza d’uso (da
leggere attentamente) quindi
scegliere la cartella all’interno
della quale si desidera installare
il pacchetto software (fig. 17).
ActivePerl si compone di di-
Apache sotto Linux
Alcune distribuzioni Linux
contengono già il server Web
Apache e ne offrono
l’installazione. Se si desidera
comunque utilizzare l’ultima
versione disponibile, è
sufficiente collegarsi con il sito
www.apache.org e scaricare il
file d’installazione per Linux
(httpd-2.0.44.tar.gz).
Portatevi alla riga di comando
Linux, accedete alla cartella
ove avete scaricato il file
d’installazione in formato
.tar.gz quindi seguite
scrupolosamente i comandi
che trovate elencati nella
documentazione di Apache
circa l’installazione del Web
server in ambiente Linux,
consultabile in qualunque
momento all’indirizzo
seguente:
http://httpd.apache.org/
docs-2.0/install.html.
 17
elementi. Quello che ci in-
sa in questo momento è il
n ISAPI per il server Web:
tta di un componente che
erfaccia con IIS e che con-
di elaborare script CGI.
nstallarlo, in fase di setup ci
ve assicurare di attivare le
le Create IIS script mapping
erl e Create IIS script map-
for Perl ISAPI. Di solito, l’in-
zione di ActivePerl abilita
ro server Web all’esecu-
dei CGI (da qualsiasi sito
configurato, da qualunque
tory virtuale e da qualsiasi
18
82/88
cartella). Nel caso in cui si do-
vesse configurare un server
Web reale – non un computer
destinato esclusivamente al te-
st in locale dei propri script – sa-
rebbe bene, per motivi di sicu-
rezza, restringere l’esecuzione
degli script CGI solo alle cartel-
le in cui ciò risulti effettivamen-
te necessario. Una volta termi-
nato il setup di ActivePerl, acce-
dete quindi alla finestra Gestio-
ne Servizio Internet Microsoft dal
Pannello di controllo, cliccate
con il tasto destro del mouse
sul nome del server e scegliete
la voce Proprietà, selezionate la
voce Servizio WWW quindi clic-
cate sul pulsante Modifica (fig.
18).
Provate a copiare lo script te-
st.pl che trovate nel CD ROM di
PC Open nella cartella cgi-bin
della directory virtuale pcopen,
creata in precedenza in IIS. Apri-
te Internet Explorer e digitate,
nella barra degli indirizzi
http://localhost/pcopen/cgi-
bin/test.pl: il browser Internet
visualizzerà semplicemente il
codice Perl che compone lo
script CGI ma questo non verrà
eseguito.
Selezionate, a questo punto,
la cartella Home directory, clic-
cate sul pulsante Configurazio-
ne: la procedura di installazione
di ActivePerl dovrebbe aver in-
serito, nell’elenco contenuto
nella scheda Mapping applica-
zioni, le voci Perl %s %s e Per-
lIS.dll. In questo modo gli script
Perl saranno eseguibili nell’in-
tero server Web.
Avviando ora Internet Explo-
rer e digitando nuovamente
http://localhost/pcopen/cgi-
bin/test.pl, lo script CGI test.pl
verrà correttamente eseguito
visualizzando la frase Ecco il
mio primo script CGI! (fig. 19).
Per provare gli script Perl
contenuti nel nostro CD, diret-
tamente sul vostro computer, è
quindi sufficiente copiare i file
con estensione .pl (Perl) nella
cartella cgi-bin.
ActivePerl offre anche la pos-
sibilità di controllare la sintassi
di uno script Perl da voi svilup-
pato. È sufficiente accedere al
prompt di MS DOS, portarsi nel-
la cartella dove avete memoriz-
zato il vostro file Perl, quindi di-
gitare perl –c nomefile.pl (sosti-
tuendo a nomefile.pl il nome del
vostro script Perl): ActivePerl vi
segnalerà eventuali errori di sin-
tassi facendovi risparmiare
molto tempo. ActivePerl offrirà
il supporto per l’esecuzione de-
gli script Perl anche se decidete
di montare il server Web Apa-
che in versione Windows. Ad in-
stallazione di Apache conclusa
è sufficiente provvedere al se-
tup di ActivePerl, seguendo le li-
nee guida appena illustrate,
quindi copiare gli script con
estensione .pl che trovate nel
CD allegato a PC Open nella car-
tella cgi-bin. Tenete presente
che, nel caso di Apache, la car-
tella cgi-bin viene automatica-
mente all’interno della direc-
tory di installazione del server
Web. Memorizzate, quindi, nella
cartella cgi-bin tutti i file Perl da
voi creati (o quelli d’esempio
che trovate nel CD di PC Open).
Supponiamo che abbiate copia-
to, nella cartella cgi-bin, lo script
test.pl. Avviate Internet Explorer
e digitate, nella barra degli indi-
rizzi, l’URL http://localhost/cgi-
bin/test.pl. Qualora vi venisse
19
restituito un Internal server er-
ror, aprite con un normale edi-
tor di testo tutti i file con esten-
sione .pl che avete posizionato
nella cartella cgi-bin e modifica-
te la prima riga da #!/usr/lo-
cal/bin/perl a #!c:/Perl/
bin/Perl.exe (supponendo di
aver installato ActivePerl nella
cartella c:\Perl). Adesso, digi-
tando http://localhost/cgi-
bin/test.pl nel browser Internet,
dovrebbe venire correttamente
visualizzata la frase Ecco la mia
prima applicazione CGI!
(fig. 20). Per chi volesse ap-
profondire ulteriormente le mo-
dalità di utilizzo, le potenzialità
e la configurazione di Active-
Perl, suggeriamo di consultare
l’ottima guida, disponibile in
formato HTML, ed installata in-
sieme con il programma vero e
proprio. Per accedervi, cliccate
su Start, Programmi, ActiveState
ActivePerl quindi su Documen-
tation. 
20
 8a lezione

A scuola con PC Open

Progetto Web Master di Roberto e Alessandro Abbate

Promuovere il proprio sito Web

siamo così arrivati all’ulti- al popolo della Rete di quanto La promozione di un sito si essere altrettanto capaci di far

E ma puntata del nostro cor-

so per diventare WebMa-
ster. Ricominceremo dopo l’e-
state con un nuovo appunta-
mento dedicato a chi è interes-
sato ad acquisire competenze
da Web designer
In questa ultima puntata, do-
po aver analizzato le tecniche e
i segreti per la creazione di un
sito Internet, ci occuperemo
della sua promozione.
Tutto l'impegno e il tempo fi-
nora dedicato alla realizzazio-
ne del sito Web ha avuto un
unico grande scopo: mostrare
siamo stati capaci.
Indipendemente dal risulta-
to raggiunto, dalle conoscenze
accumulate e dall'esperienza
maturata, la creazione di un si-
to ha un solo grande obiettivo:
quello di essere visto da altri.
È in quest'ottica che si ra-
giona nel momento in cui si
inizia a parlare di “promozione
di un sito Internet”.
Con il termine promozione,
è nostro intento raccogliere
tutte quelle attività per far co-
noscere un Web site al popolo
di Internet.
divide in due parti ben distin-
te: il raggiungimento degli
utenti e la loro fidelizzazione.
Cosa significa tutto ciò? Pos-
siamo spiegare meglio il con-
cetto con una similitudine: In-
ternet è un mare, i navigatori
sono i pesci e il nostro sito
Web è la rete da pesca, a que-
sto punto, il lettore diventato
ormai WebMaster è ovviamen-
te il pescatore.
Se siamo abbastanza capaci
di lanciare la nostra rete da pe-
sca tanto lontano da racco-
gliere molti pesci, dobbiamo
sì che nessuno poi scappi dal-
la rete.
Fuor di metafora, tutte le at-
tività rivolte alla promozione
del nostro sito Web, dovranno
essere così efficaci che gli
utenti che raccoglieremo do-
vranno rimanere all'interno
del sito e, ancora meglio, do-
vranno ricordarsi di tornarci a
visitarlo.
Come è possibile raggiun-
gere un obiettivo tanto impor-
tante? La risposta naturalmen-
te, la troverete nelle prossime
pagine. 

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso
è sul CD
Lezione 2:
Siti statici e linguaggio
HTML
(disponibile integralmente
sul CD)
Lezione 3:
Modelli di pagina e tabelle
(disponibile integralmente sul CD)
Lezione 4:
HTML 4.01 e CSS
(disponibile integralmente sul CD)
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font
• I marcatori per formattare il testo
• Gestire gli spazi nel testo
• CSS e HTML 4.01
• Cosa si può fare con i fogli stile
• Quattro tipi di CSS
• I colori del Web
• Gestire le immagini
• Esercizi • Istruzioni condizionali
• Ereditarietà e innesco a cascata • Interazione tra JavaScript e form HTML
• Proprietà di trasferimento • Interazione tra JavaScript e frame
dei parametri • DHTML
• Regole di ereditarietà
• Selettori di classe
• Websafe palette Lezione 7:
guida Interazione sul server
(disponibile integralmente sul CD)
Lezione 5:
Design e multimedialità • Il server Web
• I form: la porta per l’utilizzo degli script
(disponibile integralmente sul CD) CGI
• Elementi di design per il Web • Installare e configurare un server Web
• La ruota colore • Configurazione del sito Web predefinito
• Grafica e formati di immagini in Windows XP Professional
per Internet • Installare e configurare Apache sotto
• Link ipertestuali Windows
• Tabelle d’immagini
• Mappe immagine
• Audio e video

Lezione 8:
Promuovere il sito
Lezione 6: • Tecniche di promozione:
Siti interattivi cosa fare e cosa evitare
(disponibile integralmente sul CD) • I motori di ricerca: vietato mancare
• I linguaggi di programmazione • Come ottimizzare il proprio sito
• La programmazione orientata agli oggetti • Cross promotion: ovvero la pubblicità
• Oggetti e priorità gratuita
• Eventi e funzioni • Per chi vuole approfondire: libri e siti
• Variabili e stringhe consigliati
• Gli operatori in JavaScript

83/88

1 Tecniche di promozione: cosa fare e cosa evitare
ono state sprecate pagi-
S ne, parole, convegni e in-
contri per spiegare quali
sono le tecniche per fidelizzare
l'utente: ovvero per far sì che
torni su un sito Web.
Cosa fare
A nostro modo di vedere
però, di tutte le pratiche e tec-
niche che si possono applicare,
ne esistono alcune che merita-
no di essere sottolineate:
1 - Innanzitutto il sito deve ave-
re dei contenuti interessan-
ti. È impossibile spiegare
quando un sito Web è inte-
ressante, infatti lo diventa
quando ci sono utenti che lo
ritengono tale.
Il miglior sistema per rag-
giungere questo primo, es-
senziale obiettivo, è quello
di pubblicare con una certa
continuità, contenuti e argo-
menti che a nostro modo di
vedere possono attirare l'at-
tenzione. Nel vastissimo
mondo di Internet infatti, ci
sarà certamente qualcun al-
tro che condivide il nostro
pensiero e avrà quindi inte-
resse a visitare il sito da noi
creato.
2 I motori di ricerca: vietato mancare
desso che sappiamo quali
A sono le pratiche consiglia-
te per promuovere un sito
Web e quali quelle da evitare,
possiamo iniziare con le pri-
me, piccole attività di marke-
ting, o meglio, Web marketing.
Ma da dove si comincia?
Se lo chiedono tutti. Tante
ore investite nella creazione di
un sito Web e poi, una volta
messo on line, la dura realtà:
nessuno (a parte noi e la nostra
ristretta cerchia di amici) lo vi-
sita. Come rimediare? Come
iniziare a promuoverlo?
La risposta è semplicissima:
noi, da utenti, quando cerchia-
mo qualcosa, dove andiamo?
Dove iniziano le nostre naviga-
zioni?
La risposta può essere una
ed una soltanto: i motori di ri-
cerca.
84/88
2 - Cercate sempre l'interazio-
ne con i vostri utenti. È es-
senziale che i visitatori del
vostro sito possano intera-
gire con il WebMaster del si-
to: innanzitutto potranno
farvi avere le loro opinioni
ed il loro parere (il cosid-
detto feedback). Questo
sarà per voi oro colato:
niente è più importante del-
le sensazioni dei vostri visi-
tatori: saranno loro infatti a
indirizzarvi verso le scelte
migliori e a farvi notare gli
errori da voi commessi. È
grazie al loro aiuto che po-
trete migliorare il vostro si-
to. Se poi capitasse di in-
trecciare nuove conoscen-
ze, la cosa non potrà che
farvi piacere.
3 - Dovrete tenere presenti due
parole importantissime in
Internet: leggerezza e sem-
plicità. Essere leggeri signi-
fica creare immagini e docu-
menti che possano essere
navigati velocemente dal
vostro visitatore. Ci sono
moltissime persone infatti
che possiedono ancora un
collegamento a 56 Kpbs via
modem e non saranno certo
entusiasti di aspettare trop-
È da lì quindi che inizieremo
il nostro viaggio alla scoperta
dei migliori trucchi per far co-
noscere il nostro sito Web.
Come per tutti gli strumenti,
per usarli al meglio è necessa-
rio conoscerli in maniera ap-
profondita. Innanzitutto cos'è
un motore di ricerca e come
funziona? Quali sono i più dif-
fusi e utili?
Un motore di ricerca è un
servizio che consente di cerca-
re informazioni all'interno di
Internet. Con informazioni non
intendiamo solo pagine Web,
ma anche file di ogni tipo: im-
magini, documenti di altra na-
tura (ad esempio i PDF di Acro-
bat), tracce audio (MP3, WAV),
video e così via.
Ad essere corretti, questi
motori non cercano in tutta In-
ternet, o in tutto il World Wide
po tempo per visitare una
pagina Web. Per l'attesa, il
tempo massimo è di 10 se-
condi, mentre per quanto ri-
guarda il peso, fate in modo
che la pagina con tutti gli
elementi (immagini, even-
tuali suoni e così via) non
superi i 70 KB.
4- Al punto precedente abbia-
mo parlato anche di sempli-
cità: con ciò vogliamo dire
che è meglio evitare sfondi
troppo colorati, o riempire
la pagina di immagini ani-
mate. Il vostro visitatore do-
vrà poter leggere le vostre
pagine senza fare fatica: non
deve quindi affaticare la vi-
sta con contrasti di colore
poco chiari o elementi che
ne distraggano la lettura.
La migliore soluzione è quel-
la di usare sfondi chiari e te-
sto scuro. I link è bene la-
sciarli sottolineati o se pro-
prio volete cambiarli, fate in
modo che siano sempre ben
distinti dal resto del testo
normale. Assolutamente da
evitare sfondi animati o co-
lori poco contrastanti (co-
me arancione su nero, o gial-
lo su rosso).
Il buon senso vi guiderà ver-
Web, semplicemente eseguono
una ricerca all'interno del loro
database, che si compone di
tutti quei file che i loro spider
rintracciano. Prima parola ma-
gica: spider, per chi conosce
l'inglese, spider significa ragno.
Questo perché i software di cui
si avvalgono i motori di ricerca,
scandagliano il Web proprio
come fanno i ragni all'interno
delle ragnatele.
Ogni motore di ricerca ha
uno o più spider (chiamati an-
che bot) che periodicamente
navigano il Web e schedulano i
contenuti all'interno dei loro
database. Questo tutto auto-
maticamente.
Il nostro primo obiettivo
sarà quello di rientrare tra i
percorsi dei bot.
Non tutti però fanno uso de-
gli spider. O meglio, esistono
8a lezione
so le scelte più adatte: leg-
gete con attenzione le vo-
stre pagine Web e con una
certa dose di autocritica.
Cosa evitare
Per esclusione, le prime co-
se da evitare corrispondono a
tutto ciò che si contrappone
con quanto abbiamo scritto
precedentemente.
Per il resto, abbiamo rac-
colto le pratiche da non segui-
re all'interno del box sulla ne-
tiquette più in là nel’articolo.
Si tratta delle azioni che asso-
lutamente devono essere evi-
tate per promuovere con suc-
cesso un sito Web. Quando si
inizia infatti, è facile incappare
in errori a dir poco evitabili:
troppa “foga” nella promozio-
ne.
Ricordiamoci che i visitato-
ri hanno sempre un ottimo
motivo per non navigare il no-
stro sito Web: dovremo essere
noi che, con discrezione e per-
severanza, gli offriremo il pre-
testo per accedere al sito da
noi creato.
Dovremo quindi stuzzicare
la loro curiosità e nello stesso
tempo guadagnarci il loro ri-
spetto. 
dei siti Internet che spesso
vengono accumunati ai motori
di ricerca ma che in realtà non
lo sono e per questo, non fanno
uso di software come gli spider.
Motori di ricerca
Un motore di ricerca è ap-
punto un sito che scandaglia e
scheda il Web con l'utilizzo di
software automatici. I principa-
li motori di ricerca italiani sono
il Trovatore, raggiungibile al-
l'indirizzo http://www.iltrovato
re.it e Arianna, reperibile su
http://arianna.iol.it. All'estero, il
più famoso e conosciuto è Goo-
gle (http://www.google. com, in
versione italiana su http://
www.google.it) ma ne sistono
altri come Altavista (http://
www.altavista.com, disponibile
in Italia su http://www.altavi
sta.it), MSN http://www.msn. 

 com, in italiano su http://
www.msn.it).
Directory
Le directory sono servizi
che raccolgono e catalogano i
siti in base al loro contenuto. In
Italia, il più conosciuto sito di
questo tipo è Virgilio (http://
www.virgilio.it) ma anche all'e-
stero ce ne sono molte, tra cui
lo storico Yahoo! (http://www.
yahoo.com e in italiano su
http://www.yahoo.it) e Dmoz
(o Open Directory Project:
http://www.dmoz.org, la cui lo-
calizzazione italiana è reperibi-
le all'indirizzo http://www.
dmoz.org/World/Italiano). Un
altro esempio di directory di
successo è 100Links (http://
www.100links.it), nata per rac-
cogliere i siti recensiti all'inter-
no della sua mailing list che
suggerisce 25 siti a settimana
(da qui il nome, 100 links al me-
se) è ora la directory su cui si
appoggia l'intero network di
Dada con il sito SuperEva
(http://www.supereva.it).
In questo campo, le direc-
tory specializzate sono tantis-
sime: esistono siti che catalo-
gano solo pagine in una deter-
minata lingua oppure che trat-
tano un solo argomento. Ad
esempio esiste TuttoGratis
(http://www.tuttogratis.it) che
raccoglie solo siti che offrono
servizi gratuiti, stesso compito
svolto da FreeOnLine
(http://www.freeonline.it). In-
somma, le strade da percorrere
sono tante, si tratta solo di se-
guirle tutte.
Metamotori
Trattiamo questo argomento
solo per completezza delle
informazioni. I metamotori in-
fatti sono motori di ricerca che
restituiscono i risultati delle ri-
cerche interrogando altri mo-
tori. Si può quindi fare ben po-
co per apparire in questi: sarà
infatti sufficiente comparire tra
i principali motori di ricerca
per essere inseriti anche in
questi. Alcuni esempi sono Me-
tacrawler (http://www. meta
crawler.com), DogPile (http://
www.dogpile.com) e Web-
Crawler (http://www.web
crawler.com).
Queste differenze, spesso si
assottigliano con accordi di
marketing tra le società che ge-
stiscono i motori di ricerca e le
directory. Ad esempio Virgilio e
Yahoo! sfruttano anche il data-
base di Google per offrire i mi-
85/88
gliori risultati. Google stesso,
per la propria directory
(http://directory.google.com)
fa uso di Dmoz e gli accordi
strategici ovviamente non si
fermano qui.
Una volta raggiunto un mo-
tore di ricerca, ciò che dovre-
mo fare è trovare un link del ti-
po Aggiungi URL o in inglese
Add URL. Da qui poi, sarà ne-
cessario specificare l'indirizzo
del nostro sito e poi, compilare
gli altri campi che potrebbero
esserci stati richiesti: come ti-
tolo della pagina, descrizione,
keywords (ovvero le parole
chiave) e via dicendo. Se non
sapete che parole chiave usare,
pensate semplicemente con
quali termini volete che i navi-
gatori di Internet possano tro-
vare il vostro sito; evitate però
parole troppo generiche: ri-
schiereste di trovarvi assieme
a qualche migliaio di siti che
sicuramente non agevoleranno
l'utente nel cliccare sul vostro.
Google il più utilizzato
dal popolo della Rete
È ovvio che il motore di ri-
cerca più usato sia quello ca-
pace di portare più utenti. È al-
trettanto ovvio quindi, che il
motore di ricerca da tenere in
maggiore considerazione sia
proprio quello più utilizzato. In
Italia e nel mondo, quello più
usato è Google. Anche nei siti
con maggiore traffico, un posi-
zionamento ben studiato su
Google può portare ad avere il
50% dell'utenza referente por-
tata da questo motore di ricer-
ca. Con il termine referente, in-
tendiamo tutti quei visitatori
che cliccando su altri link arri-
vano al nostro sito.
Sul totale degli utenti arriva-
ti dai motori di ricerca, Google
è capace di segnare, da solo, un
80% sul totale.
Balza subito in mente quin-
di, quale sia il motore di ricerca
da studiare per apparire in te-
sta alle sue ricerche.
Google “dà il voto” alle
pagine Web
Quando lo spider di Google
(che prende il nome di Google-
Bot) scheda una pagina Web, le
assegna un voto: questo voto è
dato da una lunga equazione
matematica i cui termini sono
ovviamente coperti da segreto
e nessuno, a parte gli ideatori e
gli sviluppatori di Google, ne
conosce gli estremi.
A ciò che è dato sapere agli
esperti del settore, una voce in
capitolo molto “pesante” nel
calcolo del voto sono i link ver-
so una determinata pagina
Web. La regola di base è: più
link da siti esterni portano ver-
so le nostre pagine, maggiore
sarà il nostro Page Rank.
Un'altro valore che farà au-
mentare il nostro Page Rank
(PR) è il voto dato da Google al-
la pagina che ci linka. Detto in
parole semplici, se la nostra
Home page ha un PR di 5, se ci
linka una pagina con PR 7, è
possibile che il nostro Page
Rank salga.
Per aumentare quindi il voto
che Google assegna al nostro
sito, è necessario instaurare
degli scambi link tra noi e altri
siti. Meglio se il nome del colle-
gamento ipertestuale conterrà
delle parole chiave: ad esem-
pio se il nostro sito tratta di
modellismo statico, sarebbe
bene che i nostri siti partner ci
richiamassero con un codice
simile:
<a href=”http://www.indirizzo-del-
tuo-sito.com” title=”Modellismo
statico”>Modellismo statico</a>
Per maggiori informazioni
sui collegamenti ipertestuali,
fate riferimento a Pc Open di
Marzo a pagina 25 o alla relati-
va lezione sul CD.
Per conoscere quale sia il
Page Rank di un sito, è possibi-
le scaricare e installare la Goo-
gle Toolbar (http://toolbar.goo-
gle.com), una banda che si ag-
giunge al browser Microsoft In-
ternet Explorer e che riporta
appunto il Page Rank.
Questo comunque non è l'u-
nico parametro che Google va-
luta per visualizzare i risultati
di una ricerca. Ne esistono altri
che tratteremo nel capitolo
“Ottimizzazione del proprio si-
to”.
Software per l'inserimento
dei siti Internet nei motori
di ricerca
Esistono software studiati
appositamente per gestire i
motori di ricerca. Questi pro-
grammi, nati all'inizio solo per
inserire il proprio sito nei mo-
tori di ricerca, sono ora delle
vere e proprie suite per capire
quanto stia funzionando il la-
voro di segnalazione del pro-
prio sito. È infatti possibile, ol-
tre al classico inserimento au-
tomatico su più motori, rileva-
re il proprio ranking, e applica-
8a lezione
re quindi le migliori strategie
per risultare in testa ai risulta-
ti. Ma cosa è questo ranking?
È un termine inglese che in-
dica la posizione con cui il no-
stro sito appare nei risultati di
una ricerca in base ad una de-
terminata parola chiave.
Ad esempio, se il nostro sito
tratta di modellismo (magari
statico) e se digitando su Goo-
gle i termini modellismo statico
il nostro sito apparisse in
180esima posizione, è ovvio
che il nostro ranking sarebbe
troppo basso e che sarebbe
ora di studiare qualche piccolo
trucco per migliorare la pro-
pria posizione.
Si ottengono vantaggi reali
nell'utilizzo di questi software?
È inutile negare che la stra-
tegia migliore sia quella di ef-
fettuare la segnalazione a ma-
no. Questo perché potremo via
via ottimizzare le tecniche che
impareremo nel prosieguo del-
l'articolo in base al motore di
ricerca che ci troviamo di fron-
te. Un software con una segna-
lazione “selvaggia” del nostro
sito, non potrebbe ottenere lo
stesso risultato: avremo ri-
sparmiato tempo ma certo non
potremmo godere degli stessi
risultati.
Questi software infatti, ven-
gono usati da quei WebMaster
che devono gestire decine di si-
ti e devono quindi curarne la
loro posizione nei motori di ri-
cerca. Con numeri simili, è me-
glio avere dei risultati minori
ma poter avere in ogni momen-
to il polso dell'intera situazione
sotto mano: al massimo, i siti di
punta possono essere seguiti
in maniera manuale.
I software più diffusi
sul mercato
L'inserimento manuale del
proprio sito nelle directory e
motori di ricerca è obiettiva-
mente la soluzione migliore per
ottenere i risultati più soddi-
sfacenti.
Per chi non avesse comun-
que il tempo, le capacità oppu-
re avesse in gestione diversi si-
ti Web da inserire e ottimizzare
nei motori di ricerca, i software
creati ad hoc per il posiziona-
mento, automatizzano il tutto e
sostituiscono completamente
il lavoro manuale del WebMa-
ster.
Ne esistono di diversi, gra-
tuiti o a pagamento, ognuno
con le proprie caratteristiche
 8a lezione

interessanti. Quasi tutti questi
tool inoltre, forniscono stru-
menti avanzati quali ad esem-
pio la verifica del posiziona-
mento del sito tra centinaia di
motori di ricerca ed il migliora-
mento delle pagine (ad esem-
pio Meta Tags e frasi chiave),
per ottenere i migliori risultati
nelle ricerche.
Un solo consiglio, non abu-
satene, anche perché potreste
ottenere l'effetto contrario, es-
sere cancellati dai database
per uso illecito nelle segnala-
zioni.
AddWeb Web Site Promoter 6.0
http://www.addweb.it
Costo: 69 euro. Lingua: inglese
Uno dei più completi softwa-
re di promozione Web disponi-
bile sul mercato.
È possibile prelevare e pro-
vare AddWeb in versioni suc-
cessivamente registrabili per
valutarne le potenti funziona-
lità. La versione trial è disponi-
bile nel nostro CD Guida.
Ecco le funzionalità di mag-
gior interesse di AddWeb Web
Site Promoter:
• Analizza le pagine per ottene-
re il migliore posizionamento
• Costruisce pagine Web otti-
mizzate per determinate parole
o frasi chiave.
• Inserisce il sito nei principali
motori di ricerca nazionali e
internazionali e in altre migliaia
risorse di ricerca.
• Monitorizza di continuo la
posizione acquisita nei motori
di ricerca.
• Monitorizza in maniera det-
tagliata l'accesso alle pagine
Web con SiteStatsLive.
• Aumenta la Link Popularity
con Linktrader.
SubmitWolf IT v5.0
www.trellian.com/it/submitwolfit
Prezzo: 165 dollari. Lingua: italiana
Pacchetto
software pro-
fessionale, ma
di facile utiliz-
zo, progettato
specificamen-
te per la pro-
mozione di siti
Web. Ha anche una versione
gratuita con forti limitazioni ri-
spetto alla release ufficiale, che
ha raggiunto 1.500.000 copie
scaricate. Si può quindi tran-
quillamente definire il prodotto
più diffuso attualmente sul
mercato.
Tra le caratteristiche princi-
pali segnaliamo:
• Registra la tua pagina ad oltre
1000 motori di ricerca in pochi
minuti.
• più di 280 motori Italiani.
• Aggiungi il tuo link a più di
500.000 pagine di link.
• Registra quanti URL vuoi sen-
za costi addizionali.
• Registrazione Prioritaria a Pa-
gamento in 48 ore su Altavista,
HotBot, Inktomi, LookSmart,
MSN, Overture, Slider, whatU-
seek e molti altri siti.
• Analizza come si classificano
le vostre pagine nei motori di
ricerca.
• Ottimizza la tua pagina Web
per migliorare il posizionamento.
• Creati specificamente per i
siti Web italiani, con l'enfasi sui
motori italiani.
Active WebTraffic 5.0
www.myrasoft.com/activewebtraffic
Prezzo: 119 dollari. Lingua: inglese
Active Web-
Traffic è una
nuova genera-
zione di
software per
la promozione
di siti Web in
grado di sot-
toporre auto-
maticamente il vostro sito a
300.000 motori di ricerca, di-
rectories, mezzi di informazio-
ne e liste di Web site. Myrasoft,
il produttore, certo della qua-
lità del suo sistema di promo-
zione, offre una versione trial.
Active WebTraffic ha ricevu-
to numerosi premi come il
software di promozione Web
più potente su Internet.
In breve le peculiarità del
programma:
• Facile da imparare ed utiliz-
zare
• Possibilità di aggiungere i vo-
stri motori di ricerca preferiti
al datababase dei presenti
• Ricerca automatica dei moto-
ri di ricerca.
• Report dettagliati sui risulta-
ti ottenuti.
• Imposta automaticamente le
regole di segnalazione del sito
(ad esempio su Google non ef-
fettuerà giornalmente la richie-
sta di inserimento, per non ri-
schiare la cancellazione del-
l'URL per motivi di spamming).
Web Position Gold 2
www.webposition.com/product.htm
Prezzo: 149 dollari; Lingua: inglese
Web Position
Gold 2 è uno dei più
apprezzati software
per l'indicizzazio-
ne, l'ottimizzazione sul CD
delle pagine Web Guida di
ed il controllo del PC Open
posizionamento
dei siti sui motori di ricerca ri-
spetto alle parole chiave sele-
zionate. Il produttore di Web
Position Gold 2 offre agli utenti
anche una versione trial, (di-
sponibile per l’installazione al-
l’interno del CD guida allegato
alla rivista).
Le principali caratteristiche
del programma sono:
• Registrazione in più di 94 mo-
tori di ricerca internazionali
(compresi gli italiani Iol, Lycos,
MSN, SuperEva, Tiscali, Virgilio
e Yahoo Directory).
• Analisi delle pagine Web in
funzione del posizionamento.
• Creazione di pagine ottimizza-
te per il posizionamento.
• Download delle pagine sul
proprio server.
• Registrazione sui motori di ri-
cerca.
• Analisi dettagliata del posizio-
namento. 

3 Ottimizzazione del proprio sito

vvero come far sì che il pali. Dalla Home page poi, do- Nell'immagine

O nostro sito sia strutturato

in maniera tale da piacere
ai motori di ricerca.
vremo richiamare quelle sezio-
ni che per noi sono più impor-
tanti. I bot dei motori di ricerca
STRUTTURA
DEL SITO
abbiamo
abbozzato una
possibile
struttura del
La prima regola è molto sem- infatti, sono in grado di passare sito: dalla
plice: fare in modo che tutte le da un link ad un altro in manie- Home page è
pagine che dovranno figurare ra automatica ed è quindi es- possibile
raggiungere le
nei risultati di una ricerca, sia- senziale che riescano a rintrac- principali
no linkate tra loro. Ciò non si- ciare e quindi schedare tutte le sezioni. Ogni
gnifica che le pagine devono pagine del nostro sito. pagina poi,
contenere un link verso tutti gli dovrà
altri documenti, ma è bene che I trucchi degli esperti contenere un
ogni pagina contenga un ri- Gli sviluppatori Web più link per tornare
alla Home page
chiamo per tornare alla home esperti, quando si trovano di e un menu per
page e un menu che riporti al- fronte alla creazione di siti In- raggiungere le
meno verso le sezioni princi- ternet, seguono delle re-  altre sezioni

86/88

 gole che saranno loro utili nel
momento in cui dovranno se-
gnalare il sito ai vari motori di
ricerca.
I meta tags
Una buona abitudine, è quel-
la di inserire in ogni pagina del
proprio sito i meta tags de-
scription e keywords. Questi
sono dei marcatori che raccol-
gono la descrizione del sito e le
parole chiavi. Tornando all'e-
sempio del modellismo statico,
questi due marcatori andreb-
bero definiti come segue:
<meta name=”description”
content=”Le fotografie delle mie
realizzazioni di modellismo statico:
dalle moto da corsa alle auto di
Formula 1, passando per gli aerei
civili e i paesaggi.”>
<meta name=”keywords”
content=”modellismo, statico,
aerei, moto, corsa, corse, auto,
formula, uno, 1, paesaggio,
paesaggi, foto, fotografie”>
Per personalizzare questi
marcatori, è bene non superare
i 500 caratteri nel campo de-
scription e keywords.
Questi marcatori, seppur or-
mai ignorati da molti motori di
ricerca, è bene inserirli sempre
e comunque in tutte le pagine
del nostro sito. Nei casi in cui
ce ne fosse bisogno, potremmo
anche modificarli in base al
contenuto del documento.
Il marcatore <title>
Esistono poi altre regole di
primaria importanza. Ad esem-
pio il tag <title>, che assegna un
titolo alla pagina e conseguen-
temente alla finestra del brow-
ser. All'interno di questo mar-
catore è bene definire poche
parole, ma che noi riteniamo di
primaria importanza. I termini
segnalati all'interno di questo
tag infatti, vengono presi in
considerazione con particolare
importanza. Ecco come:
4 Cross promotion: ovvero pubblicità gratuita
uando abbiamo parlato
Q del Page Rank di Google, è
stato spiegato che è im-
portante avere dei link verso le
proprie pagine. Un buon meto-
do per iniziare è quello di in-
staurare uno scambio link con
piccoli siti che trattano lo stes-
so argomento. In questo modo,
87/88
<title>Modellismo statico: le foto
delle creazioni di Mario
Rossi<title>
Gli headings
Gli headings sono quei tag
<h#> dove # rappresenta una ci-
fra da 1 a 6 e servono per gesti-
re i titoli dei vari paragrafi. Per
chi li avesse dimenticati, può
fare riferimento a PC Open di
Febbraio e alle lezioni del CD.
I motori di ricerca danno
particolare importanza ai ter-
mini presenti in questi marca-
tori, perché spesso raccolgono
in poche parole l'intera pagina.
È per questo che è indispensa-
bile inserirli e usarli al meglio.
I tags per la formattazione
Sono i cosidetti inline ele-
ments, analizzati su questo
stesso corso nel numero di
Febbraio. Molti di questi assu-
mono una particolare impor-
tanza rispetto al resto del te-
sto. Ad esempio, quando ci tro-
viamo di fronte a una parola
chiave per il nostro sito, sareb-
be bene enfatizzarla, cosicché i
motori di ricerca siano in grado
di capire che quel determinato
termine ha una rilevanza mag-
giore.
Ad esempio, in un sito di mo-
dellismo, sarebbe utile appli-
care il tag <b> (bold, ovvero
grassetto) o <em> (emphatized,
ovvero enfatizzato) alle parole
più importanti, come appunto
modellismo, statico, auto, mo-
to, e così via. Attenzione ad ap-
plicare queste formattazioni
solo al testo che verrà stampa-
to nella pagina, e non quindi al-
le parole presenti nei meta tags
appena analizzati, nel <title> e
in generale agli elementi che
non visualizzano nulla nel do-
cumento.
L'unico problema, è che ogni
qual volta venisse applicato un
tag per la formattazione, il te-
gli utenti che visitano un deter-
minato sito, potranno visitare
un altro sito in tema: il vantag-
gio è ovvio... quando i due siti
hanno un numero di utenti pres-
socché simile, entrambi potran-
no aumentare gli accessi.
Cosa non importante poi,
quando lo spider dei motori di
sto viene appunto formattato
seguendo le istruzioni asse-
gnate.
Ad esempio, un testo simile:
Questo è il sito di
<b>modellismo</b> di <b>Mario
Rossi</b>, all'interno del quale
potrai trovare <b>foto</b> di ogni
tipo sulle mie <b>creazioni</b>:
<b>formula 1</b>, <b>moto da
corsa</b>, <b>aerei civili</b>
ecc.
Verrebbe stampato a video
come segue:
Questo è il sito di modelli-
smo di Mario Rossi, all'interno
del quale potrai trovare foto di
ogni tipo sulle mie creazioni:
formula 1, moto da corsa, ae-
rei civili ecc.
Onde evitare il continuo ac-
cumularsi di testo in grassetto,
è possibile applicare un picco-
lo trucco. Dove realmente non
si vuole aumentare il peso di
una parola ma la si vuole co-
munque rendere più importan-
te per i motori di ricerca, pos-
siamo racchiuderla tra i tag
<strong> e </strong> e poi ap-
plicarci un foglio di stile che an-
nulli la formattazione, ma non
intacchi l'importanza datagli
per i motori di ricerca. Ecco un
esempio molto semplice:
<html>
<head>
<title>Modellismo statico: le foto
delle creazioni di Mario
Rossi</title>
<meta name=”description”
content=”Le fotografie delle mie
Dall'immagine è possibile vedere che il foglio di stile associato alla pagina ha
annullato la formattazione del tag <strong>, senza cancellare fisicamente il marcatore.
In questo modo, i motori di ricerca interpreteranno quelle parole come dei termini con
maggiore rilevanza rispetto al resto del testo
ricerca passerà da uno dei due
siti, automaticamente sche-
derà anche l'altro, il che non fa
altro che aumentare i vantaggi.
Esistono poi dei servizi che
mettono a disposizione dei si-
stemi per aumentare gli accessi
di un sito: questi sono gli scam-
bi banner, scambi link e così via.
8a lezione
realizzazioni di modellismo statico:
dalle moto da corsa alle auto di
Formula 1, passando per gli aerei
civili e i paesaggi.”>
<meta name=”keywords”
content=”modellismo, statico,
aerei, moto, corsa, corse, auto,
formula, uno, 1, paesaggio,
paesaggi, foto, fotografie”>
<style type=”text/css”>
<!--
strong {
font-weight: normal;
}
-->
</style>
</head>
<body>
Questo è il sito di
<b>modellismo</b> di <b>Mario
Rossi</b>, all'interno del quale
potrai trovare
<strong>foto</strong> di ogni tipo
sulle mie
<strong>creazioni</strong>:
<strong>formula 1</strong>,
<strong>moto da corsa</strong>,
<strong>aerei civili</strong> ecc.
</body>
</html>
Il risultato è pubblicato nel-
l'immagine in basso. L'unica
raccomandazione, è quella di
non abusare del trucco: i mo-
tori di ricerca più avanzati po-
trebbero rilevare la continua
apertura e chiusura del tag
<strong> e rilevare questo espe-
diente come un trucco per fal-
sare i suoi risultati. Insomma,
facciamo i furbi ma facciamolo
bene. 
Ce ne sono davvero di tutti i gu-
sti e Internet, in questo senso, è
una fonte inesauribile di infor-
mazioni. Maggiori informazioni
su questi sistemi di promozione
sono reperibili agli indirizzi:
http://www.risorse.net/gratis
http://www.tuttogratis.it
http://www.freeonline.it
 8a lezione

5 Per chi vuole approfondire: i libri consigliati

Un libro per chi vuole investire nella
pubblicità e pensa che Internet possa
ancora produrre risultati. Una storia
della comunicazione su Internet
abbinata a dati oggettivi e
suggerimenti per creare un mix
intelligente
Hops, 399 pagine, 19,90 euro
Saldatura tra management e
marketing nella conduzione di un sito
Web aziendale. L’autore propone un
approccio molto sistematico alla
valutazione di efficienza del proprio
sito e alla sua gestione.
Apogeo, 346 pagine, 21,69 euro
Uno dei più famosi esperti italiani di
promozione di siti attraverso i motori
di ricerca, spiega le strategie e le
regole fondamentali per muoversi in
questo ambito. Una buona lettura
per affacciarsi a questo mondo.
Apogeo, 159 pagine, 13,43 euro
Come puntare ai profitti nella
creazione di un sito, visto da un’ottica
americana. Il testo è una guida alle
attività essenziali di Web marketing,
depurate dai fallimenti e orientate su
casi che hanno raggiunto profittabilità.
Apogeo, 334 pagine, 21,69 euro
Risorse sull'argomento
La promozione di un sito Web è un argomento caro a molti siti e come
avevamo anticipato, in molti si sono concentrati su questo
argomento. Grazie a ciò, le risorse disponibili sono davvero tante.
Iniziamo con un libro dal titolo Guadagnare con Internet
edito da Jackson Libri e scritto da Luigi Manzo, responsabile del sito
Internet Manuali.net. All'interno del testo, si trovano poco più di 150
pagine con le principali tecniche per la promozione di un sito Internet
e perché no, i servizi che permettono di guadagnare qualche euro
facendo pubblicità.
Su Internet invece, oltre ai link già segnalati, possiamo riportare
qualche sito specializzato sui motori di ricerca, come l'ottimo
Submission (http://www.submission.it),
lo storico MotoriDiRicerca (http://www.motoridiricerca.it)
e il giovane MotoRicerca (http://www.motoricerca.info).
Un po’ di netiquette
All'interno dell'articolo, quando abbiamo presentato le pratiche di
promozione da fare e da non fare, abbiamo accennato agli errori in
cui può incappare chi inizia a far pubblicità al proprio sito Web.
Innanzitutto è fondamentale guadagnarsi il rispetto degli utenti: è
importante quindi evitare accuratamente quelle pratiche che i
navigatori ravvisano come una mancanza di rispetto nei loro confronti.
Quindi attenzione allo spam.
Una volta che abbiamo aperto il nostro sito Internet, nessuno ci vieta
di scrivere un bel messaggio di posta elettronica per avvisare i nostri
amici più cari del lavoro appena svolto.
Attenzione però a segnalare la nascita del sito solo ed
esclusivamente ai nostri amici e non a tutte quelle persone che
abbiamo in rubrica o con le quali magari abbiamo appena scambiato
due chiacchiere e delle quali abbiamo il loro indirizzo di posta senza
neanche ricordarci il perché.
Quando invece andremo ad attivare i servizi di scambio banner,
scambi link e così via, attenzione a distinguere la pubblicità dai
contenuti del sito e ancora più importante, non inondare le pagine di
pubblicità: massimo due banner a pagina (uno sopra e uno in fondo)
e possibilmente, evitate tutti quei servizi che vi aprono nuove
finestre del browser in maniera automatica. I visitatori vi
ringrazieranno.

In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!

Avete trovato interessante il nostro corso e volete prepararvi a mettere alla prova le competenze acquisite? Per farlo
avrete bisogno di uno spazio vostro sul Web, dove potervi esercitare nello sviluppo di siti campione su server reali.
Ecco quindi la nostra iniziativa, che nasce il proprio dominio presso page del sito di Register, da dove le
in collaborazione con Register.it, il più Register ad un prezzo registrazioni verranno scontate in automatico
importante registrar in Italia: nei prossimi scontatissimo (40% in meno, del 40%.
mesi avrete a disposizione gratuitamente lo sconto più alto oggi disponibile
per un mese l’uso di uno spazio di hosting sul mercato). Le registrazioni saranno comprensive di tutto
dedicato, oltre ad una serie di altri servizi Il metodo è semplicissimo: quanto è indicato all’indirizzo
supplementari. dovrete collegarvi al sito Internet http://we.register.it
In più, dal momento che per poter usare www.register.it/pcopen, /domains/allincluded.html.
lo spazio di hosting è necessario disporre inserire il codice seguente: 2c7A4s
di un dominio, i lettori di PC Open in nel box all’interno della pagina Per il servizio di supporto inviare le e-mail
esclusiva potranno acquistare da subito e a questo punto verrete inviati alla home all’indirizzo support@register.it

88/88