Corso Webmaster

1a lezione
A scuola con PC Open
Progetto
Web Master
di Roberto Mazzoni
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, unabilit 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.
iventare Webmaster come assumere il comando

di una nave oppure la conduzione di un treno. La destinazione e lo scopo del viaggio
vengono quasi sempre scelti
da qualcun altro, ma una volta
partiti, spetta al Webmaster arrivare in porto secondo le scadenze previste e con il progetto
completato.
Nelle realt pi piccole, il
Webmaster di solito anche responsabile direttamente di produrre il sito in tutte le sue componenti e di interagire con la
societ di servizi che ospita il
server e fornisce la connettivit
agli utenti, nel caso di progetti
ospitati allesterno, oppure di
parlare con i responsabili dei sistemi informativi aziendali (magari un altro consulente nel caso di piccole aziende) per siti
che sono ospitati allinterno.
Che cosa fa
Le competenze centrali di un
Webmaster sono: 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). Il Webmaster deve anche sapere come promuovere il sito sui principali motori
di ricerca cos da attrarre traffico; come procurarsi e mantenere un nome a dominio; come integrare eventuali banner allinterno del sito, da utilizzare sia
come fonte di guadagno (pubblicit) sia come promozione incrociata tra siti. Una volta che il
sito onl ine, gran parte del suo
lavoro sar centrato sulla pubblicazione 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 modo efficiente cos che laggiunta
di pagine risulti unoperazione
semplice e veloce.
I problemi maggiori in questo senso si presentano con i siti statici, dove ciascuna pagina
deve essere generata a mano e
dove bisogna aggiornare continuamente gli elementi di navigazione per includere i nuovi
contenuti.
Loperazione diventa invece
pi semplice nel caso dei cosid-
detti siti dinamici,

dove il contenuto
delle pagine viene
alimentato automaticamente da un
il corso
database e basta
sul CD
inserire e catalogan. 65
re correttamente le
informazioni allinterno del database per ottenere un sito ordinato e funzionale.
I siti dinamici si prestano anche a un ulteriore livello di automazione: mediante particolari programmi, detti content
manager, che fanno da interfaccia semplificata nei confronti del database e della struttura
del sito, i nuovi contenuti possono essere caricati direttamente dallutente, senza lintervento continuo del Webmaster. Si tratta tuttavia di sistemi
complessi e, spesso, costosi
che richiedono un notevole impegno di programmazione.
Spetter quindi al Webmaster
decidere se e quando usarli,
spesso curando in prima persona le operazioni di sviluppo necessarie a realizzarli. Nella
realt, la quasi totalit dei siti sono ibridi, con porzioni statiche e
porzioni dinamiche a seconda
della natura delle informazioni e
della vita stimata del sito.
IL CALENDARIO DELLE LEZIONI

1/88
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
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:
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
1a lezione
Lultima trincea
Il Webmaster rappresenta
lultimo passaggio di controllo
prima che il sito vada in linea
ed in pole position ogni volta che si presenta un problema.
Di conseguenza deve essere in
grado dindividuare, correggere o far correggere rapidamente qualsiasi errore compiuto
durante le precedenti fasi di
produzione da programmatori, grafici e sistemisti, le persone, cio, che gestiscono fisicamente la macchina su cui risiede il sito.
Per tale motivo deve disporre di una certa familiarit con i
principali formati grafici del
Web e con i linguaggi di programmazione usati nello sviluppo di siti dinamici.
anche opportuno che abbia conoscenze elementari di
sicurezza per poter evitare attacchi dallesterno che potrebbero compromettere limmagine del sito.
importante infine che coltivi ottimi rapporti con altri
Webmaster, per potersi avvalere dellassistenza di colleghi su
problemi comuni e deve avere
una buona sintonia con il provider che gestisce fisicamente
il sito, oppure dove sapere mettere le mani sul server in prima
persona.
Saper fare un po di tutto

Ora che lepoca della New
Economy finita e che ci sono
sempre meno soldi per sviluppare e mantenere siti, spesso si
chiede al Webmaster di realizzare in proprio anche la parte
di programmazione necessaria
alla produzione di un sito dinamico (normalmente affidata a
un Web developer). Quasi mai,

invece, ci si aspetta che il Webmaster realizzi la grafica, a meno che si tratti un sito di servizio dove le informazioni compaiano quasi sempre in formato testo.
Esiste naturalmente anche
leccezione di Webmaster con
particolare sensibilit grafica,
capaci di svolgere pienamente
anche le funzioni di Web designer, nel qual caso le possibilit di successo saranno ancora maggiori poich avranno
pieno controllo delle varie fasi
di realizzazione anche senza
doverle eseguire necessariamente in prima persona.
Nella pratica, i problemi
principali a cui il Webmaster
dovr prestare attenzione gli
verranno proprio dalla grafica
e da una programmazione imperfetta.
Lintervento di un Web developer incompetente pu produrre intoppi nel funzionamento del sito difficili da individuare e risolvere.
Invece un Web designer incompetente pu produrre pagine troppo complesse perch
siano visualizzate correttamente in tutti i principali browser, grafica troppo pesante che
rallenta i visitatori del sito, interfacce 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 navigazione e sugli elementi grafici
per rimediare al volo qualsiasi
intoppo.
Dalla nostra
community,
una storia
di successo
il nostro lettore Giuseppe Lachello
ha creato il sito Mio Piemonte, che
si sta rivelando unottima 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 n3 e
abbonato dal n10. 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 allufficio 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.
Allinizio non avevo ben chiare
le nozioni, per cui ho iniziato a
studiare libri sui linguaggi di
programmazione (HTML,
JavaScript) e a navigare in Rete
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 allopera,
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
unottima 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.
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
lHTML (HyperText Markup Language),
il DHTML (Dynamic HTML) e i CSS
(Cascading Style Sheets fogli di
stile in cascata).
2/88
LINGUAGGI DI SCRIPTING
eseguono operazioni programmate
allinterno 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
lelaborazione 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
Markup Language) di Macromedia.

Gli ultimi quattro operano unicamente
sul server.
WEB DESIGNER
progetta e sviluppa laspetto grafico
ed estetico di un sito, fornendo tutti
gli strumenti visivi per la navigazione
e la corretta visualizzazione e
organizzazione dei contenuti
allinterno 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
permettono linterrogazione
attraverso pagine interattive,
anchesse 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 allaggiornamento 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.
1a lezione
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 interlocutori con cui il Webmaster
ha relazioni continue e dei
quali, talvolta pu trovarsi ad
assumere anche i compiti. Come abbiamo accennato, la produzione di un sito Web facilita il
mescolamento dei ruoli sia per
ragioni di economia, vale a dire
non esistono mai soldi a sufficienza per ingaggiare tutte le
persone che sarebbero necessarie, sia per motivi di urgenza:
lincaricato di una determinata
funzione potrebbe essere assente nel momento in cui sia necessario il suo intervento e perci chi presente deve poterne
fare le veci, almeno in parte.
La prima figura in ordine di
tempo con cui il Webmaster entra in contatto il Web designer. 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 bellaspetto,
sia comprensibile dal navigatore, serva agli scopi del sito e sia
realizzabile con gli strumenti
tecnologici a disposizione (soprattutto osservando i limiti imposti dallHTML e dal modo in
cui i vari browser lo interpretano).
La seconda figura con cui il
Webmaster entra in contatto subito dopo il cosiddetto coder
vale a dire colui che stila il codice HTML o di programma che
compone le pagine, partendo
dalla bozza grafica preparata
dal Web designer.
Nel caso in cui abbia competenze centrate su HTML, il coder 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 programmatore (le diciture formali si trasformano, poi, a seconda delle
circostanze, ma la sostanza non
cambia). Costui costruisce fisicamente le pagine seguendo le
indicazioni di qualcun altro, ma
non ha la responsabilit finale
di pubblicarle sul sito.
Loperatore grafico affianca
il coder nella costruzione del sito. Egli in grado di gestire i va-
3/88
ri elementi grafici che compongono la pagina seguendo i dettami del progetto grafico e i vincoli della tecnologia
Solitamente, loperatore grafico lavora con programmi di fotoritocco per creare immagini e
bottoni, e per ottimizzare immagini fornite da altri.
Nelle situazioni di budget ridotto, il Web designer svolge
anche funzioni di operatore grafico, 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 distinte. Il primo ha origini artistiche o grafiche, mentre il secondo prevalentemente tecniche.
La figura successiva con cui i
due entrano in contatto quasi
immediatamente il Web developer, esperto nella progetta-
zione applicativa di un sito dinamico, vale a dire un sito che

presenti le proprie informazioni
attingendole da un database. Il
Web developer acquisisce il lavoro di progettazione grafica e
di codifica delle pagine HTML
gi predisposto da qualcun altro, e vi aggiunge gli elementi
applicativi necessari allinterazione 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 comprende 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 lintera pagina
e lintero sito.
Nellevoluzione delle proprie
competenze, il Webmaster tende a sua volta a diventare Web
developer, assumendo sempre

pi dimestichezza con la produzione di pagine dinamiche e
degli elementi di programmazione.
La quinta figura di contatto
diretto per il Webmaster e per
gli altri attori coinvolti (soprattutto il Web designer e il Web
developer) prende il nome di
Content Manager e ha la responsabilit di regolare i contenuti del sito al fine di generare
traffico, come nel caso di un
portale o di un sito dinformazione, incoraggiare lacquisto,
come nel caso di un sito di commercio elettronico, trasferire
nozioni, come nel caso di un sito di formazione a distanza. Nel
caso di siti di grandi dimensioni
viene assistito da Content editor che si occupano dellaggiornamento di particolari segmenti del sito.
Il Content Manager ha solitamente unestrazione giornalisti-
I componenti di un sito
WEB MASTER
WEB EDITOR
ARCHITETTO INFORMATIVO
Struttura
Testo
CONTENT MANAGER
CONTENT EDITOR
PUBLISHING SYSTEM
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 larea
centrale, a meno che sia
sguarnita
Regole di pubblicazione
Coo
C
mpp
m
Coodd
orr
o
ii c
cee
tt a
am
meenn
W
WEE
tt o
o
ESPPROG BBDDEEVV
ERT RAM EELLOO
O U MA PPEERR
SAB TOR
ILIT E
i
agaifnica
m
m
I e gr
one
tazi
n
e
s
Pre
NER ICO
ESIGE GRAFG
D
WEBRATOR KETIN
R
OPE MA
1a lezione
ca oppure editoriale, e solitamente non dispone di competenze tecniche, ma deve avere

una discreta sensibilit estetica
e una conoscenza dei vincoli
tecnologici del mezzo cos da
trovare, assieme al Web designer, il giusto modo per presentare le informazioni.
Ha contatti con il Webmaster
o il coder per qualsiasi aggiornamento o variazione strutturale della pagina che diventi necessaria in corso dopera al fine
di dare giusto risalto alle informazioni nuove o pi importanti.
Dialoga occasionalmente anche
con il Web developer, soprattutto nella fase iniziale del progetto, per mettere a punto gli
automatismi necessari per lagevole pubblicazione e aggiornamento dei contenuti, solitamente realizzati tramite una
specifica applicazione che prende il nome di Content Management System o, pi comunemente, sistema di publishing.
Nuove prospettive
per il Webmaster
come Content Publisher
Qui vale la pena di aprire una
piccola parentesi. Nei siti di medio-grandi dimensioni, la scelta
del Content Management System
viene per prima e influenza tutte le altre attivit in cascata, visto che il sistema richieder
limpiego di precisi linguaggi di
programmazione e porr vincoli importanti nella struttura grafica 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 funzionali espressi dal Content Manager 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 inaspettati per tutte le parti in causa. Talvolta pu arrivare fino al
punto di bloccare lo sviluppo
del sito.
Sono moltissime le realt della New Economy che hanno fallito proprio perch non hanno
adottato un sistema di publishing fin dal principio, ne hanno
scelto uno sbagliato oppure se
lo sono fatto costruire su misura partendo da specifiche troppo generiche. Il motivo dellerrore stato nella mancanza, da
parte del ruolo tecnico, di capire quali fossero le reali funzioni
del prodotto.
In conseguenza di ci venivano valutati principalmente gli
aspetti di costo, compatibilit,
prestazioni, facilit di programmazione e via dicendo, senza fare i conti poi con chi avrebbe
dovuto caricare le informazioni
e mantenere il sito, vale a dire il
Webmaster e il Content Manager. Il risultato si espresso
quasi sempre in procedure
macchinose nel caricamento
delle informazioni, nellimposizione di vincoli sul tipo dinformazioni effettivamente pubblicabili e nella rigidit della struttura del sito (difficile aggiungere, togliere o accorpare sezioni
e canali). Da ci, lesigenza di
apportare modifiche costose
dellultimo minuto che diminuivano la stabilit complessiva
del sito in virt dei continui
cambiamenti incontrollati.
In alcuni casi si cercato di
aggirare il problema sviluppando sistemi di publishing che si
basavano sul flusso di lavorazione di un giornale su carta.
Di solito, il risultato stato
migliore rispetto ai sistemi creati dal nulla, ma le notevoli diffe-
renze nei metodi di lavorazione

delleditoria su carta e delleditoria Web hanno compromesso
lutilit anche di questi ultimi.
Senza considerare, poi, che un
sistema di publishing professionale, capace di gestire siti complessi per una grande industria,
costa diverse centinaia di migliaia 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 labbiamo 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 tipo di processo da utilizzare per
la produzione di un giornale, lasciando alla redazione il compito di generare i contenuti. Lultimo punto di contatto operativo
il sistemista, vale a dire il tecnico esperto nella gestione del
server su cui il sito opera. Spesso dislocato presso il provider
che ospita il sito e ha la responsabilit di garantirne il funzionamento continuo, agendo
principalmente sulla macchina,
ma anche richiedendo variazioni al sito medesimo nel caso in
cui si presentassero incompatibilit dovute al lavoro del Webmaster o del Web developer.
Altre figure di contatto

Esistono altre figure con cui il
Webmaster pu avere rapporti
occasionali. La prima il responsabile 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 principali sono la capacit di attrarre
visitatori e di trasferire correttamente le informazioni che la
sua azienda gli ha chiesto di comunicare.
Solitamente chiede al Webmaster di fornirgli statistiche attendibili sul traffico, di promuovere 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 progettuale e che possono confluire
nellattivit del Webmaster. Il
Project Manager coordina lattivit di tutte le figure coinvolte
nel progetto e garantisce il rispetto delle tempistiche concordate. Larchitetto informativo trova la giusta distribuzione
delle informazioni e delle relative etichette. Il suo compito sostanzialmente di facilitare il reperimento delle informazioni
contenute in un sito, ottimizzando i percorsi per arrivarci e
rendendole accessibili in vari
modi contemporaneamente. Un
sito con una buona architettura
impedisce al navigatore di perdersi. Lesperto di usabilit infine misura o anticipa le reazioni dei navigatori al sito, ed elimina eventuali ostacoli o possibilit di equivoco. Spesso la sua
funzione cumulata con quella
di architetto, viste le ampie sovrapposizioni possibili tra i due
mestieri. Un Webmaster esperto trova spesso loccasione per
evolvere le proprie competenze
per occuparsi anche di architettura e di usabilit.
1a lezione
2 Gli strumenti di lavoro

Come scegliere lo strumento di lavoro adeguato
Produttivit
Esperienza
Editor testuali,
visuali e ambienti
grafici integrati:
cosa sono, come
funzionano e come
scegliere la
soluzione pi
adatta a voi
Ambienti
grafici
integrati
Editor
HTML
testuali
er svolgere il proprio compito, il Webmaster ricorre

a strumenti che semplificano la scrittura e la correzione delle pagine Web e degli
script associati, spesso con
uninterfaccia grafica che consente di creare intere sezioni
della pagina senza scrivere
nemmeno una riga di HTML.
Il vero Webmaster professionista, tuttavia, deve essere in
grado di scrivere completamente a mano un intero sito, se
necessario, perch gli capiter
sovente di dover correggere
anche gli errori e i contenuti
inutili introdotti proprio dai
programmi di generazione automatica che dovrebbero aiutarlo. Gli strumenti di lavoro in
questo campo si dividono in
quattro categorie.
colare portale che li ospita, imponendo quasi sempre la visualizzazione dei banner pubblicitari di questultimo.
Editor on line gratuiti
Editor orientati al testo
Sono strumenti da usare nella produzione di siti personali,

molto semplici, allinterno di
portali che offrono spazio gratuito limitato e che prevedono
uninterfaccia propria per la generazione facilitata delle pagine partendo da moduli gi impostati. Non sono stati inseriti
in questa rassegna perch di
fatto limitano moltissimo il formato e la struttura del sito e lo
vincolano al dominio del parti-
Leggeri e precisi, costituiscono un elemento irrinunciabile nella cassetta degli attrezzi

di un bravo Webmaster. Vi si ricorre per piccole correzioni al
volo oppure per la scrittura
dintere pagine, a seconda dei
casi. Semplificano la scrittura
di codice HTML, CSS, DHTML,
JavaScript e cos via, controllando in automatico la sintassi
dei comandi, evidenziando graficamente (a colori) i comandi
Editor visuali
commerciali
Editor visuali
semplificati
Capacit di spesa
Gli editor HTML testuali sono una necessit imprescindibile sia per chi comincia, cos da poter disporre di
una palestra in cui imparare, sia per chi gi esperto, per non perdere controllo sulle pagine. Offrono
tuttavia una produttivit bassa, a meno di essere virtuosi della tastiera.
Gli editor visuali (FrontPage, Web Editor e cos via) sono una naturale evoluzione per chi vuole guadagnare
velocit, soprattutto nella stesura iniziale del sito.
Gli ambienti grafici integrati (Macromedia Dreamweaver, Adobe GoLive) offrono alta produttivit e controllo
sullintero sito a chi ha gi esperienza e una discreta capacit di spesa
e i tag (marcatori) HTML rispetto al testo che costituisce
il contenuto informativo della
pagina (rappresentato solitamente in nero). Di solito prevedono finestre guidate per linserimento dei pi comuni tag
HTML (marcatori di formattazione), di script gi pronti e di
moduli (form), frame (finestre
multiple nella pagina) e tabelle.
Tra le funzioni tipiche abbiamo
anche lanteprima allinterno
di uno o pi browser, per verificare laspetto finale della pagina, il controllo dei link interni
ed esterni, la riduzione automatica delle ridondanze e il trasferimento verso server remo-
Gli editor presentati in questo numero

Programma
1st Page 2000
Arachnophilia 5.0
HTML-kit
Macromedia Dreamweaver MX
Stone's Web Writer 3.5.2
Top Dawg 2.6
WebPag-Wiz 1
Xoology Coda 2.4
5/88
Tipo
editor HTML testuale
ambiente grafico integrato
editor visuale
editor visuale
Distribuzione
freeware
freeware
freeware
demo
freeware
freeware
freeware
freeware
Reperibiit
nel CD
nel CD
sul Web
nel CD
nel CD
nel CD
nel CD
nel CD
Lingua
inglese
inglese
inglese consigliato
italiano consigliato
inglese
inglese
inglese
inglese
ti. Sono spesso gratuiti, ma ne

esistono anche versioni commerciali di costo relativamente
ridotto. Sono utilissimi per farsi le ossa e per correggere rapidamente pagine gi esistenti.
Servono anche per ispezionare
le pagine prodotte con pacchetti pi complessi al fine di
controllarne la correttezza.
Il fatto di dover scrivere tutto a mano, o quasi, ne riduce
lutilit. La produttivit scende
e aumenta le possibilit di errore, di conseguenza il Webmaster finisce per affiancarli o sostituirli con editor grafici che
automatizzano gran parte della
generazione delle pagine e di
interi siti e che permettono di
impaginare i contenuti lavorando col mouse e osservando
immediatamente i risultati, anzich digitare centinaia di righe
sulla tastiera e fare continue
anteprime allinterno del browser. Alcuni Webmaster veterani
comunque si limitano a usare i
semplici editor di testo, facendone un punto di orgoglio, anche perch scottati dalle pri-
1a lezione
Gli strumenti di lavoro presentati nei prossimi numeri
Programma
Adobe GoLive 6.0
CoffeeCup HTML Editor 9.6
HomePage +
Hot Metal Pro 6.0
Microsoft FrontPage 2002
Namo Web Editor 5
TopStyle Pro 3
Tipo
ambiente grafico integrato
editor visuale
editor visuale
me edizioni degli editor grafici

che avevano la pessima abitudine di inserire codice ridondante o addirittura errato, costringendo a lunghi lavori di
pulizia a mano, che finivano
per richiedere pi tempo di
quanto ce ne sarebbe voluto
per scrivere la pagina da zero,
riga per riga.
Tra i completamente gratuiti, abbiamo selezionato: Aracnophilia, Firstpage 2000,
HTML Kit, Stones Web Writer,
Top Dawg, Xoology Coda; tra i
prodotti a pagamento o shareware abbiamo invece selezionato CoffeCup HTML Editor, Home Site, Hot Metal Pro,
TopStyle Pro 3.0.
Editor visuali semplificati

Offrono funzioni di impaginazione interattiva: il programma genera automaticamente il codice necessario per
produrre la sezione di pagina
dopo che labbiamo disegnata
sullo schermo pemettendoci,
poi, di modificarla a mano in
una finestra separata che mostra le righe di codice HTML,
JavaScript, ASP e cos via.
possibile inserire il testo e
le immagini di contenuto direttamente nella pagina visualizzata in anteprima, senza correre il rischio di alterare i marcatori in cui sono contenute e osservando immediatamente il risultato. Questi programmi
spesso integrano anche funzioni per la ricerca automatica de-
gli errori e di trasferimento a un

server remoto. Sono indispensabili come base minima di lavoro per garantire una buona
produttivit e per semplificare
la gestione degli script e delle
pagine complesse, oltre che di
interi siti. Ne esistono diverse
edizioni gratuite, ma non ce la
sentiamo di consigliarle perch, a differenza degli editor di
solo testo, questi programmi
possono effettivamente rovinare una pagina gi ben costruita
in partenza e costringervi a lunghe operazioni di correzione
manuale.
Lunico prodotto gratuito di
caratura professionale che si
pu segnalare in questa categoria Microsoft Web Matrix,
che sindirizza in particolare a
chi prevede di lavorare su siti
dinamici dove sia necessario
affiancare allHTML anche funzioni di programmazione e linguaggi di scripting.
In alternativa, conviene
orientarsi verso una soluzione
commerciale garantita da una
software house che gi operi in
questo mondo da tempo e che
offra anche continui aggiornamenti per tenersi al passo con
gli standard. I due campioni di
questa categoria sono Namo
Web Editor e Microsoft FrontPage 2002.
Questultimo, rispetto alle
versioni precedenti, ha raggiunto una vera caratura professionale, pur mantenendo la
proverbiale facilit duso.
Segnaliamo in chiusura di
questa categoria Easy Web Editor, un programma in italiano
che consente di creare pagine
Web semplicemente disegnandole al video, senza scrivere
nemmeno una riga di HTML
(www.visualvision.it). Molto indicato per chi vuole produrre
un sito personale senza dover
studiare, non consigliato invece ai Webmaster, visto che il
sito viene costruito in formato
proprietario e, solo alla fine,
esportato in formato HTML,
perci non possibile esercitare 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 riferimento per i Web Master professionisti:
Macromedia
Dreamweaver e Adobe GoLive. Oltre a riunire tutte le funzioni di impaginazione grafica
delle pagine di gestione integrali dei siti, con tutti gli automatismi per il controllo e la validazione degli stessi, questi
due prodotti hanno anche sviluppato collegamenti diretti
con altre applicazioni dello
stesso produttore al fine di costruire veri e propri ambienti di
sviluppo integrati dove Webmaster, Web developer e Web
designer possano condividere
tutti la stessa famiglia di prodotti beneficiando di un facile
scambio dei vari sottoprodotti
che vanno a comporre il sito.
Ancora pi interessante per
il Webmaster, questi prodotti
gli consentono dintervenire
con rapidit ed efficacia su
qualsiasi componente del sito
Web, utilizzando un solo strumento che conoscono bene,
anzich dover ricorrere a ogni
genere di utility e di mini-pro-
grammi complementari.
Macromedia MX, la versione 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, integrandosi con Fireworks MX
e Flash MX per le componenti
creative, e con Cold Fusion MX
per la componente programmatica sul server.
Adobe GoLive 6.0 dialoga invece con PhotoShop 7.0 e ImageReady (per lottimizzazione
delle immagini per il Web), con
InDesign per lintegrazione 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.
Sindirizza al Webmaster e al
Web designer che abbiano anche vocazioni di programmatore. GoLive invece un prodotto
di natura pi editoriale, destinato 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 nelluso
intensivo. Mettete in conto un
sensibile sforzo di apprendimento per entrambi, visto che
sono ormai diventati giganteschi e ricchissimi di funzioni.
A loro beneficio, indichiamo
che funzionano su piattaforme
diverse (Windows, Mac) e integrano spesso anche ottimi
strumenti tutorial per imparare
cammin facendo.
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
mese luso 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
semplicissimo: dovrete collegarvi al

sito http://we.register.it/pcopen
oppure al sito www.register.it/pcopen,
inserire il codice segreto x6Wa3P nel
box allinterno 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
allindirizzo http://we.register.it
/domains/allincluded.html.
1a lezione
3 Per chi vuole approfondire: i libri consigliati

INDISPENSABIL
La bibbia del Web designer propone

lesperienza 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.
INDISPENSABIL
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.
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.
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.
INDISPENSABIL
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 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.
INDISPENSABIL
Standard e tecniche concentrati in

poche pagine con cenni sintetici che vi
portano dalla navigazione, allusabilit,
allaccessibilit, passando per nozioni
sulla percezione dei colori e sulluso
del linguaggio XML. Utile riepilogo per
chi sa gi come fare. Tecniche Nuove,
212 pagine, 18,80 euro.
7/88
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
dallopera altrui. Il libro pi un elenco
di cose da non fare che da fare.
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.
Design e usabilit allitaliana. Pi

concreto dei manuali di usabilit e pi
ampio nei temi rispetto a un semplice
testo di design. Offre leperienza
completa di una progettista
professionale italiana che mette in
prospettiva le cose davvero importanti.
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 dallautore,
universalmente riconosciuto come
liniziatore di questa disciplina.
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.
1a lezione
Dalla progettazione al lancio: come nasce un sito

rima di mettere mano alle
pagine e alla scrittura di
marcatori HTML, necessario definire la struttura del sito e la funzione dei diversi elementi che saranno nella pagina.
Questa fase precede anche la
stesura delle bozze grafiche che
traducono in colore e immagini
ci che si gi ideato schematicamente sulla carta.
La progettazione
Esistono tanti modi per progettare un sito quanti sono i
progettisti, ma lesperienza degli ultimi anni dimostra che la
sequenza ricorrente e forse ottimale segue queste fasi: raccolta delle informazioni sugli
scopi del sito ed eventuale analisi della concorrenza, costruzione di una mappa del concettuale sito (disegno schematico),
assemblaggio e sistematizzazione dei contenuti, definizione di
un sistema di navigazione, definizione della struttura di pagine
e interfaccia, assemblaggio del
tutto in una sequenza che racconti il sito (storyboard), prototipo di sito navigabile che mostri dal vivo lo storyboard, progetto grafico e multimediale,
progetto dinamico che definisca il tipo dinterazione che il sito avr con lutente e che stabilisca quali elementi di programmazione sar necessario aggiungere, incluso leventuale
collegamento a un database
che contenga i dati da visualizzare nelle pagine dinamiche.
La realizzazione
Terminate queste fasi progettuali, si passa alla produzione
vera e propria, realizzando i
template, vale a dire la pagina

campione, senza contenuti, da
cui possibile produrre molte
altre pagine ciascuna con contenuti propri. Il template una
sorta di modello o stampo
da cui ricavare molte pagine
singole che avranno uniformit
visiva tra loro.
Una parte determinante nella
fase di produzione prima del
lancio la formattazione dei
contenuti, vale a dire la raccolta
di tutte le informazioni che dovranno essere presenti sul sito
al momento dellavvio e il loro
montaggio allinterno di pagine
HTML statiche oppure il loro inserimento e catalogazione allinterno di un server. Spesso si
sottovaluta limpegno richiesto
da questa attivit, di per s semplice, ma gravosissima in ragione della grande quantit di elementi che vanno elaborati e dallimpossibilit di averli tutti in
un formato omogeneo fin dalla
partenza. I contenuti arriveranno infatti dalle fonti e nelle forme pi disparate: molto di questo lavoro, alla fine peser sul
Webmaster, sul Web editor e sul
Web designer oppure sulloperatore grafico.
Il test
La fase successiva naturalmente quella di test. raro che
ci sia abbastanza tempo per
condurla come si deve, ma comunque necessaria per mettere
alla prova il sistema di navigazione e il sito in generale. Quando si riesce a coinvolgere nel test utenti estranei alle fasi di progettazione, si riesce a mettere in
evidenza i classici errori che finirebbero per mandare in tilt il
sistema se commessi da un navigatore reale.
Il lancio
Consiste di solito in unattivit frenetica per correggere allultimo minuto i difetti riscontrati durante la fase di test e per
caricare i contenuti finali prima
della partenza ufficiale, di solito
accompagnata da una qualche
attivit di pubblicit.
Il mantenimento
Segue, infine, la fase di mantenimento dove si correggono
gli errori della fase di lancio e si
attivano le procedure per consentire ai gestori del sito di aggiornarlo gradualmente e per
mantenerlo stabile al crescere
del numero dei navigatori. Questa la fase pi delicata e pesa
fortemente sulle spalle del Webmaster a cui viene richiesta
grande esperienza nel riconoscere e prevenire eventuali problemi. Qualsiasi intervento deve essere efficace e rapido, poich raro poter fermare il sito
per lunghi periodi una volta che
lo si avviato. necessaria una
profonda conoscenza della piattaforma su cui il sito basato
poich il comportamento dei
server cambia drasticamente al
variare del carico di lavoro. Elementi chiave in tal senso sono il
tipo di server impiegato e il database scelto per leventuale attivit dinamica.
Fa parte dellattivit di mantenimento anche ladozione di misure di
prosegue
sicurezza.

(versione integrale
dellarticolo sul CD)
sul CD
n. 65
Fasi di progettazione
Risultato finale
Raccolta delle informazioni sugli scopi del sito

Analisi delleventuale 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
Concept del sito (sintesi delle varie idee in una singola intenzione)
Misura delle funzioni/servizi minimi che il sito deve offrire
Struttura concettuale del sito
Catalogazione e priorit delle informazioni
Percorsi chiari per arrivare all'informazione, alberazione sito
Posizione stabile per gli elementi di navigazione in rapporto al contenuto
Storyboard (descrizione, pagina per pagina, del contenuto statico e dinamico)
Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo,
ma consigliato)
Intercaccia grafica che perfeziona la presentazione e navigazione del sito
Definizione elementi di programma, collegamento eventuale
a database, scelta di Publishing System
Template HTML, elementi di programma lato server e client,
formattazione contenuti
Sito esaminato da utenti "veri"
Sito attivo e pubblicizzato grazie alle attivit di marketing
Sito che cresce nei contenuti e nel traffico
Progetto grafico e multimediale

Progetto dinamico
Produzione
Test
Lancio
Mantenimento
8/88
Le risorse
on line
La formazione di un
Webmaster non finisce mai.
Le tecnologie continuano a
evolvere e ci sono
innumerevoli problemi da
risolvere nel lavoro di tutti i
giorni. Ecco alcune risorse
che consigliamo a tutti,
indipendentemente dal loro
livello di competenza. Vi
serviranno per approfondire
durante il corso e oltre:
http://hotwired.lycos.com/
webmonkey/ (uno dei due
siti americani pi famosi per
i Webmaster e i Web
developer. Ricco di tutorial,
consigli, moduli gi pronti).
http://builder.com.com/
(laltro sito americano di
riferimento per i Webmaster
e i Web developer, orientato
a i pi esperti).
http://www.html.it/ (il sito
italiano storico per chi
sviluppa siti e vuole
imparare a fare le cose da
solo. Adesso fornisce anche
corsi a pagamento).
http://www.antiloco.com/
(in italiano, una sorta di
directory di risorse
soprattutto per i Web
developer, ma utile anche ai
Webmaster).
http://www.fare-web.it/
(un riferimento in italiano
ricco di spunti tecnici, ma
anche di attualit)
http://www.fucinaweb.com/
home/ (in italiano, realizzato
da un giovane sviluppatore
che fornisce non solo
consigli di sviluppo, ma
anche indicazioni su temi pi
generali come linterfaccia e
lusabilit).
http://www.manuali.net/
(sito dedicato agli autodidatti
e alla formazione a distanza
su diversi temi, tra cui anche
lo sviluppo Web).
http://www.scriptando.it/
(sito ricco di consigli e di
tutorial realizzato per
passione da un giovanissimo
Webmaster autodidatta).
http://www.webmasterpoint.
org/home.asp (un sito
italiano di consigli e tutorial
per le cose pi semplici).
1a lezione
4 Macromedia Dreamweaver MX,

la nave scuola del Web design
onsiderato nettamente il
pi diffuso tra gli strumenti professionali per lo
sviluppo di siti, Dreamweaver
ha da sempre offerto un efficiente ambiente di editing visuale delle pagine capace di
generare automaticamente codice senza alterare quello gi
prodotto a mano dallo sviluppatore. Non si tratta di una
prerogativa da poco ed probabilmente la chiave del suo
successo originale.
Oggi il prodotto si presenta
molto arricchito, di fatto riunisce 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 elevata caratura) e ColdFusion
Studio (ambiente di programmazione per creare siti con pagine dinamiche).
Lobiettivo fondamentale di
Dreamweaver MX di fornire
un ambiente capace di soddisfare contemporaneamente le
esigenze professionali di tre figure: Web designer, per la
creazione grafica del sito,
Webmaster per la costruzione
delle pagine vere e proprie e
Web developer per programmare la logica applicativa che
permetta allutente dinterrogare un database attraverso le
pagine del sito.
Si tratta perci del terreno

perfetto per chi gi si sente
preparato in uno di questi tre
campi e vorrebbe ampliare le
proprie competenze, diventando, 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 amministrazione delle varie risorse e dintegrazione con le
altre applicazioni grafiche di
Macromedia (Flash e Fireworks); Home Site con le relative funzioni di editing manuale del codice HTML,
XHTML o di qualsiasi altro linguaggio di scripting; UltraDEV
per la programmazione con i
linguaggi di scripting pi comuni (ASP, ASP.NET, JSP, PHP)
e ColdFusion studio per progettare applicazioni che usino
il server ColdFusion come interfaccia semplificata nella
produzione di pagine dinamiche create mediante linterrogazione di un database.
Questultimo in realt non
integrato propriamente in
Dreamweaver MX, bens allinterno di HomeSite+, evoluzione moderna di HomeSite 5, fornito nello stesso CD di
Dreamweaver MX e utilizzabile come strumento di lavoro
rapido per chi abituato a
operare con il codice di ColdFusion e non ha particolare interesse alla struttura grafica
delle pagine. In sostanza, tramite Dreamweaver MX e HomeSite+ aprite le porte a qualsiasi tipo di sviluppo presente
e futuro, con la possibilit di
allargare le vostre conoscenze
sfruttando un ambiente con
interfaccia uniforme e con tutorial di buon livello, integrati.
Come si presenta
Il destinatario principale di
un prodotto come Dreamweaver MX rimane il creatore di siti, Webmaster o Web developer, che ha bisogno di uno
strumento veloce con accesso
immediato al codice e al tempo capace di semplificare le
operazioni mediante automatismi che propaghino qualsiasi
variante allintero sito. Il programma si basa su tre elementi dinterfaccia: la finestra di lavoro vera e propria, divisa in
due viste, i menu e i pannelli
degli strumenti, e la finestra di
controllo dellintero sito. Partiamo dalle prime: le due viste
di lavoro principali sono: Codice e Struttura.
Le si pu visualizzare alternatamene oppure contemporaneamente cos da vedere allistante come le variazioni
delluna si propagano nellaltra.
La vista Codice elenca tutti i
marcatori e ne consente lediting diretto come in qualsiasi
altro editor non visuale, la seconda invece mostra il risultato che tali marcatori produrranno sulla pagina finita, indi-
la demo
sul CD
n. 65
cando anche la struttura dei
vari elementi e le reciproche
relazioni.
Ne permette la manipolazione diretta, tramite mouse e
comandi da tastiera. possibile disegnare o costruire visivamente elementi nella vista
Struttura e osservare al tempo
stesso il codice generato automaticamente nella vista Codice, o viceversa. Alternandosi
tra le due, si acquista una conoscenza molto pi profonda
del linguaggio HTML e delle
sue particolarit, e si arriva
anche a produrre sempre pi
velocemente risultati di qualit.
Molte delle risorse offerte
dal programma sono proprio
mirate a garantire la qualit
del codice finale e notiamo
una potenzialit didattica notevole: qualsiasi elemento
HTML pu essere inserito da
pulsante o da men, le rispettive caratteristiche sono quindi ispezionabili nella vista Codice, che mostra il tag con tutti i rispettivi attributi, oltre
che allinterno di una finestra
di propriet che costantemente visibile e mediante la
quale sinterviene sulle propriet senza toccare il codice
originale. Inoltre le funzioni di
convalida segnalano la presenza di eventuali errori nella
pagina o nel sito e ci portano
direttamente al punto interessato, cos da correggerlo e imparare dai nostri errori. Il programma integra anche una nu-
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 allinterno di una barra a cui
corrisponde unetichetta 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 nelluna riproporsi immediatamente nellaltra
9/88
1a lezione
trita serie di esercitazioni in
italiano che coprono HTML,
fogli di stile, pagine dinamiche e altro ancora, con esempi
da eseguire di prima mano.
Tanti approcci diversi

per imparare il codice
alla perfezione
Rispetto alle versioni precedenti, Dreamweaver MX consente di spostare e agganciare
(dock) i diversi pannelli di comando allinterno della finestra
a video oppure su un secondo
video, nel caso sia disponibile
sul nostro computer. In tal modo, la pletora di finestre di controllo che accompagnano il
nuovo programma pu essere
configurata a piacere, attivando e disattivando selettivamente quel che occorre.
Nel caso si lavori nella vista
Codice, la finestra che contiene
il codice vero e proprio prevede tre modalit distinte dinserimento manuale dei tag. La prima di tali modalit anche la
pi semplice e consiste nel selezionare dalla barra di comando superiore licona corrispondente al marcatore che vogliamo inserire.
Ce ne sono a decine, suddivise per argomento. Se non ci
ricordiamo quale sia il tag idoneo, la seconda modalit consiste nel cliccare su unicona di
selezione generale che apre un
elenco di selezione dei tag, presi dal database integrato nel
programma. Tale database
contiene la sintassi corretta
per tutti i marcatori standardizzati dei principali linguaggi:
HTML, JavaScript, CSS (Cascading Style Sheets fogli di stile
in cascata), ASP (Active Server
Pages) e ASP.NET, PHP, JSP (Java Server Page), WML (Wireless Markup Language, per i telefonini) e ColdFusion.
La terza modalit consiste
nel digitare direttamente il
marcatore nella pagina lasciando che Dreamweaver completi
per noi la digitazione non appena ha indovinato di che tag
si tratta. Ci riduce il lavoro di
battitura e gli errori dovuti a
sviste.
Per il completamento automatico, il programma attinge
sempre dal proprio database
interno che pu essere espanso a piacere con linserimento
di tag personalizzati.
Una volta digitato il marcatore, le informazioni corrispondenti compariranno allinterno
di due finestre dispezione.
10/88
Una, la finestra Propriet

sempre aperta sulla parte bassa dello schermo, indica i parametri del marcatore e ci permette di modificarli o inserirne
di nuovi usando le sue caselle,
senza dover scrivere nemmeno una riga. Sempre dalla finestra delle Propriet possiamo
anche definire link ad altre pagine interne al sito oppure a siti esterni, confidando nel fatto
che la sintassi sia sempre corretta.
Qualsiasi variazione comunque visibile immediatamente nella finestra Codice cos da capire meglio quel che
stiamo facendo.
Una seconda finestra dispezione, pi complessa, denominata appunto Finestra di ispezione tag elenca tutti i possibili attributi di quel particolare
marcatore, permettendoci di
modificarli usando men a tendina e altri supporti grafici.
Perci, combinando icone,
men e le due finestre dispezione, possiamo generare
unintera pagina senza nemmeno scrivere una parola direttamente, fino a quando ci
sentiremo abbastanza esperti
per inserire i comandi in prima
persona, fruendo per del controllo e della funzione di completamento immediato fornita
da Dreamweaver.
Dulcis in fundo, il programma incorpora una serie di moduli gi pronti per gli usi principali (snippet) da poter integrare nella nostra pagina e da
cui imparare, oltre che ben otto libri interi, forniti da editori
di tutto rispetto come OReilly
e Wrox, che descrivono minuziosamente 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 imperniato sulla vista Struttura.
Qui la pagina viene disegnata
come apparir allinterno 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 stesse 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. Insomma, una sorta di videoimpaginazione Web

cresciuta anche lintegrazione con gli altri strumenti
della famiglia Macromedia, sia
in termini di similitudine dinterfaccia sia in termini di rapidit nel modificare elementi
grafici e Flash mediante la tecnica di andata e ritorno.
Qualsiasi oggetto modificabile
con Fireworks MX o Flash MX
pu essere aperto direttamente dallinterno di Dreamweaver lasciando che sia questultimo a passarlo temporaneamente in consegna alla nuova
applicazione per poi riprenderselo a opera terminata.
Controllo totale del sito

Fin qui abbiamo incontrato
funzioni che sono comuni anche ad altri editor HTML, anche se non altrettanto sviluppate.
La gestione del sito invece
una prerogativa classica dei
programmi di fascia alta e
Dreamweaver MX realizza, tramite labbinata di due finestre
dedicate, un ambiente completo dal quale non solo esplorare
la struttura del sito, i percorsi
di navigazione e le risorse impiegate, ma anche modificare
parametri globali (propagando le variazioni su tutte le pagine) e manipolare singoli oggetti come immagini, sfondi,
oggetti multimediali, collegamenti, librerie di codice, eccetera. Tramite questo complesso pannello di controllo potete
tenere sempre sottocchio lintero sito e quindi eseguire automaticamente gli aggiornamenti necessari sul server cos
da mandare in produzione le
varianti collaudate prima localmente.
possibile anche utilizzare
il pannello Sito per coordinare
il lavoro di pi persone, bloccando pagine che voi state modificando affinch altri non le
possano modificare nel frattempo. Per funzionare al meglio, la funzione di coordinamento di gruppo richiede lacquisto di uno strumento ad
hoc di Macromedia da installare sul server (Sitespring), ma possibile realizzare sistemi di controllo
elementari anche
utilizzando il pacil corso
chetto di base.
prosegue
(versione integrale
sul CD 65
Identikit
Dreamweaver MX il pi diffuso tra i
Web editor professionali.
Costituisce levoluzione 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
uneccellente 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 nellaltra.
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 lupgrade 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
Progetto
Web Master
di Roberto Mazzoni
1 Progettare un sito statico

a prima forma di sito che
qualsiasi Webmaster si trova a realizzare composta
da pagine HTML di contenuto
permanente, organizzate in
una serie di cartelle e legate da
una struttura di link che definisce la cosiddetta alberatura del
sito e ne consente una navigazione ordinata.
Ogni volta che si vuole aggiungere qualcosa, bisogna
creare una pagina ad hoc; mentre per modificare i contenuti
gi presenti, diventa necessario agire sulle pagine gi pubblicate per mezzo di un Editor
HTML di tipo testuale o grafico,
a seconda delle nostre abitudi-
ni e della nostra capacit di

spesa. In buona sostanza, un sito statico contiene solo le pagine che abbiamo individualmente 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.
Ciascuna pagina di un sito
statico contiene invece infor-
mazioni e tag HTML mescolati

tra loro, perci non possibile
demandare le attivit di pubblicazione e di aggiornamento
a persone non tecnicamente
qualificate, poich, nel cambiare il testo o le immagini, potrebbero inavvertitamente alterare anche i marcatori in cui
questi sono racchiusi, scombinando la pagina.
Esistono tecniche per limitare tali rischi, in ogni caso il sito statico costituisce un impegno importante di manutenzione per il Webmaster, che aumenta al crescere del sito e
che non sempre possibile farsi remunerare. Per tale motivo,
la tendenza di tutti i progettisti

di usare le strutture statiche
solo per i siti pi semplici, dove gli aggiornamenti siano poco frequenti e di modesta entit, per poi passare, non appena possibile, a strutture dinamiche, centrate su database.
In ogni caso, qualsiasi sito
nasce statico, nella sua forma
di prototipo originale, e si evolve 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 interessa tutti ed anche impor-

Lezione 1:
Sistemi di navigazione: impostare la

navigazione del sito in modo che sia
comprensibile, inequivocabile ed efficace.
(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.
11/88
Sistemi di labeling: come scegliere

correttamente le "etichette" che
identificano i vari elementi di navigazione.
Lezione 2:
Spiegazione dei tag HTML per una

pagina vergine
Esercizi su come creare una pagina
vergine e su come progettare un sito
Le prossime puntate:

Progettare un sito statico: definizione
della struttura, domini reali e virtuali,
collegamenti assoluti e relativi.
Progettare la pagina: modelli di pagina,
la caduta della piega, tecniche di
impaginazione, usabilit e accesso.
Pagine HTML e marcatori: sintassi del
linguaggio, formattazione, tag.
Strutturare i contenuti della pagina:
tabelle, frame e form.
Adobe GoLive 6.0: le caratteristiche
dellambiente di sviluppo integrato.
contenuti aggiuntivi sul CD
Versioni integrali e complete degli
articoli pubblicati sulla rivista
Lezione 3:
Modelli di pagine e tabelle
Lezione 4:
HTML 4.01 e CSS
Lezione 5:
Lezione 6:
Siti interattivi
Lezione 7:
Interazione sul server
Lezione 8:
Promuovere il sito
2a lezione
tante sapere come predisporlo
fin dall'inizio alla sua evoluzione dinamica. Un codice HTML
scritto in maniera scorretta
pu costringervi a riscrivere
per intero tutte le pagine al momento del passaggio alla modalit dinamica. In questo articolo e nei seguenti cercheremo
quindi di esaminare l'approccio corretto fin dal principio.
Definire la struttura
Il primo passo consiste nel
definire una struttura ordinata
per catalogare le informazioni
da pubblicare (vedi Organizzazione 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 attivit ricaveremo il sistema di directory che conterr i vari file.
Nella pratica, infatti, un sito
statico consiste semplicemente di una serie di file distribuiti
in varie directory.
Un sito molto semplice potrebbe avere tutti gli elementi
in una sola cartella, ma se prevediamo un minimo di espansione, sar opportuno avere
cartelle separate con pi livelli
in cascata per tenere ordine
nei contenuti. In effetti, seguendo la mappa tracciata prima, dovremmo avere anche i
nomi e la posizione delle directory, cos da replicare fisicamente sul disco, almeno a grandi linee, i percorsi di navigazione previsti per il sito.
La scelta dei nomi delle cartelle e dei file importante perch 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 avete adottato per il vostro sistema di navigazione (vedi sempre Tecniche di progettazione
nella lezione 1).
Il nome delle directory e dei
file costituisce anche un ausilio
al navigatore che li vedr comparire nella finestra del suo
browser subito dopo il nome
del dominio a cui il sito abbinato. Una regola importante
nella scelta dei nomi di file e directory evitare caratteri speciali che possano essere incompatibili con il sistema operativo del server.
Poich quest'ultimo pu variare, ci conviene adottare un
approccio che renda i nostri file compatibili con Windows,
Windows NT/2000 e con
Unix/Linux. facile, basta mantenere i nomi brevi ed evitare
l'uso di spazi bianchi (sostituiteli con un tratto di sottolineatura o con un trattino).
Evitiamo anche l'uso di qualsiasi 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 suffisso in cascata. Conviene evitare
anche l'uso del segno del dollaro ($) e di qualsiasi caratte-
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 alluniversit, 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
Open.Da quel
momento ho
iniziato a
studiare sulla rivista.
Contemporaneamente
preparavo lesame 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 lesame,
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 lopportunit. 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 dellUniversit 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
Daniela Dirceo
per te!
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
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
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.
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.
2a lezione
re particolare, mantenendosi
in sostanza all'interno delle lettere primarie dell'alfabeto, i numeri, il trattino e la sottolineatura.

Le virgolette doppie (") sono
pericolose anche quando usate
all'interno del testo perch
vengono normalmente utilizzate da HTML e dai linguaggi di
scripting per passare i parametri di un comando. Sostituitele
sempre con il codice equivalente previsto da HTML
(") e fate altrettanto con i
caratteri speciali e le vocali accentate.
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 Macintosh 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 compatibili con tutti, ma ci finisce per
rendere il nome illeggibile. Probabilmente l'approccio migliore di mantenersi al di sotto
dei 31 caratteri e usare ovunque possibile caratteri minuscoli per i nomi dei file e delle
directory, in tal modo il sito potr spostarsi su macchine Windows, Macintosh o Linux senza
problemi.
anche importante rispettare i suffissi che seguono i nomi
dei file e che permettono al
browser di riconoscerne la natura e di trattarli di conseguenza. I pi comuni sono .HTM o
.HTML per le pagine in generale. 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. Macintosh usa in modo nativo il
suffisso .HTML per il lavoro in
locale perci consigliamo di
usare sempre quest'ultimo,
quando possibile. Per le immagini i suffissi riconosciti dai
browser sono .JPEG e .JPG per
le fotografie, Graphics Interchange Format (.GIF) per la grafica a 256 colori e Portable
Network Graphic (.PNG) per
grafica e foto, anche se quest'ultimo tuttora poco diffuso.
Il nome della home page,
cio della prima pagina del sito,
determinante perch va riconosciuto automaticamente dal
particolare sistema operativo
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
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 server Unix e Linux, e
diventa default.htm o
default.asp, nel caso
di Internet Information Server di Microsoft, con la possibilit di riconoscere
anche index.htm e index.asp (.ASP il suffisso delle pagine dinamiche realizzate
con Active Server Pages). Pu assumere
anche altri nomi come main.htm, welcome.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 vele 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 elemenvolta che digitiamo un indiriz- ti necessari la semplificaziozo che finisca con il nome di ne dei link.
Le immagini che invece sono
una directory senza specificare
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, imza in alcuni casi una propria pa- mediatamente sotto la root del
gina indice composta di un sito e accessibile da tutte le alelenco dei file e delle cartelle tre pagine. In tal modo saremo
comprese in quella particolare sicuri di avere una singola copia di ciascun elemento grafico
directory.
e di poterla modificare a piaceCollocare i file grafici
re sapendo che la variazione
e multimediali
sar immediatamente disponiPer comodit, le immagini bile in tutto il sito.
abbinate a una particolare paTuttavia, se pensate di congina 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 uniun sistema di cartellette diviso ficata anche tutte le immagini
per argomenti oppure per pe- di contenuto, indipendenteriodi temporali, a seconda del mente da dove si trovi la pagitipo di contenuti del sito. In tal na a cui si riferiscono. Ci commodo, 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 databasapremmo dove cercare. Inol- se solo gli elementi di testo e il
2a lezione
Collegamento assoluto - URL

http:// www.digifocus.it/ testlabs/ testlabs.html
protocollo
nome a dominio
che punta al sito
percorso delle
nome della pagina che
directory a partire vogliamo raggiungere
dalla homepage
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 collocate nella stessa directory.
Se metteste nel database
ogni file grafico per intero finireste per appesantire il sistema
e rallentare il sito, se invece doveste codificare nel database,
oltre al nome dell'immagine,
anche la relativa posizione, finireste per complicarvi la vita
e vincolare il database a una
particolare struttura di directory. Nei siti dinamici, tra l'altro, gran parte delle directory
scompare poich esistono pochissime pagine precostituite,
solitamente di servizio, perci
il grande "calderone" comune
per le immagini obbligato.
Tornando ai siti statici,
consigliabile in ogni caso utilizzare due directory separate
per le immagini di servizio del
sito (loghi, elementi grafici della pagina, bottoni) e per le immagini di contenuto. In questo
modo chi lavora al mantenimento del sito (Webmaster)
potr operare senza toccare le
immagini di contenuto e il content editor o content manager
potr aggiungere immagini fotografiche e disegni senza cancellare inavvertitamente elementi 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 conoscono il contenuto. I file multimediali, ossia audio e video, vengono spesso inseriti nella stessa directory che contiene le
immagini, tuttavia vale la pena
di prevedere un cartelletta a
parte, se non altro per ordine.
in modo gerarchico, lineare o

completamente libero (ipertestuale) come descritto nei vari
sistemi di organizzazione delle
informazioni (vedi Tecniche di
progettazione nella lezione 1).
Il sito stesso poi accessibile
sul Web per mezzo di un indirizzo universale, detto Uniform
Resource Locator (URL), che
identifica il particolare server
che lo sta ospitando. Nella pratica, lo URL digitato dal navigatore non riflette quasi mai l'indirizzo del server in quanto tale, perch quest'ultimo spesso complicato da ricordare oltre che fuorviante. Infatti il server pu avere i nomi pi astrusi (assegnati solitamente dal
provider per proprio uso interno) e il sito medesimo pu trovarsi in qualche subdirectory
dal nome ancora pi astruso, il
che produce alla fine un indirizzo lunghissimo e difficile da
digitare.
La prassi abituale consiste
perci nell'acquisire un nome a
dominio che in qualche modo
comunichi l'identit del sito e
che sia anche facile da ricordare e digitare. Il domino solitamente composto da tre elementi separati da un punto. Il
pi importante dei tre elementi di chiama Top Level Domain
e si trova all'estrema destra del
nome a dominio e indica il tipo
di categoria a cui il dominio
stesso appartiene: COM per
commerciale, ORG per le organizzazioni senza fini di lucro, IT
per i domini concessi a persone e societ residenti nel territorio italiano. Questa prima
parte del dominio assegnata
alla gestione di organizzazioni
internazionali che ne definiscono le regole di assegnazione. La seconda spostandosi
verso sinistra contiene il nome
scelto da chi registra il dominio, ad esempio pcopen. La terza parte, sempre spostandosi
verso sinistra, prende il nome
di sottodominio. Spesso non
viene usata e la si riempie con
la dicitura www per indicare
che si tratta di un server che
contiene pagine Web, tuttavia
potrebbe essere utilizzata per
creare infinite variazioni del

dominio che puntino, ciascuna,
a siti separati. Ad esempio, laboratorio.pcopen.it potrebbe
rimandare a un sito specifico
per il nostro laboratorio prove.
Chiude l'elenco l'indicazione
del tipo di protocollo utilizzato
per il trasferimento delle informazioni, cio l'Hypertext Transfer Protocol, (HTTP), nel caso
delle pagine Web.
Poich un nome a dominio
riservato a un solo detentore
su scala mondiale, diventa un
ottimo sostituito per l'indirizzo
del server, al quale viene abbinato in modo invisibile cos che
il navigatore digiti il dominio
conosciuto e questo venga tradotto nel percorso per arrivare
al server corretto. Nel caso in
cui il server sia di vostra propriet, probabilmente il dominio sar residente sul server
medesimo, tuttavia ci si verifica di rado e si parla quindi di
dominio virtuale. Vale a dire, il
vostro nome a dominio conservato su una macchina diversa dal server che ospita il sito,
vale a dire su un computer sempre accessibile via Internet che
rimanda verso il server reale
non appena lo si interroga.
Tale computer solitamente
appartiene alla societ a cui
avete affidato la conservazione
del vostro dominio, tecnicamente definita maintainer.
Spesso si tratta di chi vi ha
venduto il dominio in primo
luogo, talvolta invece l'ISP
che ospita il vostro sito su uno
dei suoi server. La scelta del
maintainer importante poi-
Risoluzione di un indirizzo assoluto - URL

NAVIGATORE
root
URL
directory
di servizio
www.digifocus.it
server del
provider
server che ospita il
dominio (maintainer)
Sito
# 15
home.html
testlabs
testlabs.html
Domini reali e virtuali

La navigazione di un sito avviene per mezzo di collegamenti ipertestuali che indicano
il percorso per passare da una
pagina all'altra. L'interso sito
unito da questi link, strutturati
14/88
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
2a lezione
Collegamento relativo diretto

home page
articoli
testo.html
grafica.jpg
link diretto =
grafica.jpg
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.
semplice da realizzare e funziona sempre a condizione di mantenere pagina di
partenza e oggetto di destinazione nella stessa cartella, dovunque questa si trovi
all'interno del sito
Collegamento relativo indiretto

(consigliato)
home page
articoli
testi
immagini
grafica.jpg
testo.html
.. / immagini / grafica.jpg
link indiretto =
sale di
un
livello
scende
alla
directory
immagini
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,
tracciando l'intero percorso che bisogna seguire per passare dall'una all'altra.
Cessa di funzionare non appena si sposta uno dei due elementi (origine o
destinazione) all'interno del sito
ch da lui transiteranno tutti
coloro che digitano il vostro

dominio prima di raggiungere il
vostro server e perci si possono verificare rallentamenti
oppure completa inaccessibilit del sito, anche se questo
magari perfettamente funzionante.
Affidare il nome a dominio a
chi ve l'ha venduto la soluzione pi rapida e meno costosa, e qualora costui sia anche il
vostro provider, potrete richiedere garanzie sull'efficienza
tecnica del collegamento tra i
due server.
Peraltro tale approccio aumenta i vincoli verso quel particolare provider poich, nel
15/88
momento in cui voleste cambiare dovreste anche spostare

la posizione del nome a dominio, con inevitabili ritardi di
propagazione degli aggiornamenti sulla Rete e temporanea
invisibilit del vostro sito.
Quando lo digitiamo, il dominio virtuale ci dirotta verso
la macchina server e all'interno
della particolare directory che
il provider ha riservato al nostro sito (lo stesso server infatti contiene quasi sempre diversi siti in directory diverse).
Ci significa che la home page
del nostro sito non si trova nella root (directory principale)
del server Web che la ospita,
bens in una cartella due o tre
livelli pi sotto. Il navigatore

non vedr tali livelli accessori,
ma comincer la navigazione
direttamente dal punto in cui il
si trova la home page del sito e,
sulla finestra del suo browser,
vedr il nome a dominio seguito dalla serie di directory e sottodirectory che da l scendono
per portarci alla pagina vera
che abbiamo chiesto. Ad esempio, lo URL http://www.digifocus.it/testlabs/testlabs.html ci
dice che stiamo andando alla
pagina testlabs.html nella directory "testlabs" del sito
www.digifocus.it, indipendentemente da dove tale sito sia
collocato nel server del provider.
Collegamenti assoluti
e relativi
Questo genere d'indirizzo
prende il nome di collegamento assoluto poich contiene
tutte le informazioni necessarie per arrivare alla pagina senza conoscere il punto di partenza. il tipo di link che utilizzerete per mandare alla pagina
da un sito esterno oppure dall'interno del testo di una newsletter che spedite ai vostri navigatori abituali per informarli
delle novit. Funziona in qualsiasi circostanza perch autosufficiente, ma non viene mai
usato per i collegamenti interni
del sito perch ogni volta che
si digita un indirizzo assoluto,
il browser esce dal sito, cerca il
dominio, individua il server fisico corrispondente, ritorna su
quest'ultimo, completa l'indirizzo e ritorna nel sito, con vistosi rallentamenti alla navigazione e congestione del server
che gestisce le richieste del nome a dominio.
Di conseguenza, per i passaggi interni al sito, si usano
collegamenti relativi che indicano le sole informazioni indispensabili per raggiungere il file a partire dalla posizione in
cui ci si trova. Ne esistono di
tre tipi. Chiameremo il primo, il
pi semplice, link diretto perch si riferisce alla cartella in
cui gi ci troviamo. Prendiamo
l'esempio di un'immagine "grafica.jpg" che si trovi nella stessa directory "articoli" della pagina "testo.html" in cui dobbiamo inserire il link: l'indirizzo relativo diretto contenuto nella
pagina "testo.html" sar semplicemente = "grafica.jpg".
Nel momento in cui legge
questo indirizzo, il browser sa
che deve cercare il file "grafica.jpg" nella stessa cartella della pagina "testo.html". Supponiamo adesso di avere una directory "testi" e una directory
"immagini" di pari livello entrambe contenute nella directory "articoli" e che la nostra
pagina "testo.html" si trovi appunto in "testi" mentre il file
grafica.jpg sia nella cartella
"immagini".
Dobbiamo usare un link indiretto e dire al browser di
uscire dalla directory "testi" in
cui si trova la pagina
"testo.html", salire di un livello
(mediante il segno convenzionale dei due punti consecutivi
..) , cercare la directory "immagini", ridiscendere all'interno
di questa alla ricerca del file
"grafica.jpg". L'indirizzo relativo diventer in tal caso = "../immagini/grafica.jpg" e funzioner solo fintantoch la pagina
di partenza rester nella posizione 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 inconveniente si usa un'altra forma di
link relativo che alcuni definiscono, erroneamente, assoluto, ma che invece noi chiameremo link completo. Si tratta di
un link che non relativo alla
cartella di partenza, bens alla
root dell'intero sito. In tal modo 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 indicata per convenzione da una
barra inclinata (/) perci il nuovo indirizzo relativo completo
sarebbe = "/articoli/immagini/grafica.jpg".
Attenzione, per, questo approccio presenta un problema
diverso, ossia il browser spesso interpreta come directory
radice l'effettiva root del server, la quale coincide con la
root del sito solo nel raro caso
in cui il server non ospiti
nient'altro, ma che, solitamente, ci spedisce da qualche altra
parte nel caso in cui il nostro
sito sia incapsulato in una directory secondaria del server
ospite come avviene nel caso
di un provider esterno. Infatti il
2a lezione
mascheramento della struttura
di directory del server ospite
avviene solo quando usiamo
l'indirizzo assoluto, completo
di nome a dominio. La prassi
migliore pertanto quella di

usare link relativi indiretti, facendo attenzione a spostare le
pagine il meno possibile una
volta che il sito stato svilup-
Collegamento relativo completo

home page
articoli
immagini
testi
scende di
1 livello
grafica.jpg
testo.html
/ ar ticoli / immagini/grafica.jpg
link completo =
porta
alla
radice
del sito
scende
di 2
livelli
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
pato. La gestione di queste problematiche diventa in ogni caso molto semplice nel momento in cui s'impiegano ambienti
di sviluppo integrati come
Dreamweaver MX o Adobe GoLive 6.0 che contengono funzioni 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 automaticamente tutti i link che vi fanno
riferimento negli altri documenti, a condizione naturalmente di averli impostato utilizzando le funzioni interne dell'editor e non direttamente a
mano. Ci penser il programma, infatti, a costruire i link relativi indiretti nel modo pi idoneo, 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
viene trasferito a intervalli periodici sul server di pubblicazione, copiando magari solo i
file che sono stati modificati
dopo il precedente aggiornamento.
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 identica a quella del server remoto,
altrimenti i link finiranno per
interrompersi. Per il trasferimento delle pagine finite si usa
il protocollo FTP (File Transfer
Protocol) tramite utility specifiche, oppure mediante le funzioni integrate in gran parte
degli Editor HTML commerciali e gratuiti.
I pi ricchi tra questi, offrono anche un pannelli di controllo dell'intero sito che consentono di esaminare in dettaglio ciascun elemento, eseguire
simulazioni e verifiche in locale prima dela pubblicazione finale.
2 Progettare la pagina
na volta definita la mappa
del sito e la relativa struttura di directory siamo
pronti a realizzare le prime pagine campione che ci serviranno 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 necessario per l'ossatura di una pagina
vuota. Avr quindi gli elementi
di navigazione e gli spazi in cui
inserire successivamente i contenuti (testo e immagini) con
anche le eventuali informazioni
stilistiche (font, colore, sfondo, eccetera). Ogni volta che
sar necessario produrre una
nuova pagina, baster copiare
il template, inserire il contenuto e aggiungere eventuali link.
L'operazione pu essere eseguita a mano oppure demandata in automatico agli editor che
dispongono della gestione automatizzata dei template. In quest'ultimo caso, ogni volta che aggiorneremo il template, saranno
aggiornati anche gli elementi fissi (navigazione, pie' di pagina,
eccetera) contenuti nelle pagine
16/88
prodotte nel frattempo a partire

da tale template.
Lavorare con i template senza un editor che li gestisca in
automatico aggiunge tempo al
ciclo di produzione, ma il template offre il duplice vantaggio
di garantire uniformit a tutte
le pagine del sito e di consentire un pi semplice passaggio a
un'architettura dinamica. Quest'ultima infatti si basa unicamente su template ai quali sono stati aggiunti marcatori realizzati in un linguaggio di scripting che prelevano il contenuto
da un database, invece che richiedere l'inserimento manuale da parte del Webmaster o
del content editor. Da notare
che il sito dinamico non avr
altre pagine al di fuori dei template, infatti qualsiasi pagina
di contenuto verr prodotta
automaticamente al momento
della richiesta da parte del navigatore, travasando nel template le informazioni prese dal
database, e cesser di esistere
subito dopo. Per tale motivo,
abituarsi a lavorare per template costituisce un'ottima palestra per affacciarsi al mondo
del Web dinamico.
Il template parte da un disegno generale, spesso realizzato

da un creativo, il Web designer,
tuttavia spetta al Webmaster
oppure all'Editor tecnico trasformare il disegno in una codifica HTML che possa riprodurre nella finestra del browser ci che il grafico ha concepito in origine.
La traduzione non mai perfetta, 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 controllare esattamente l'aspetto
che la pagina avr quando visualizzata dal browser del navigatore.
A differenza della pagina di
una rivista, che giace completamente sotto il controllo dell'impaginatore, la pagina Web,
per sua stessa natura, nasce
per essere visualizzata sui tipi
pi disparati di computer, equipaggiati con i browser pi diversi e con ogni genere di sistema operativo. Inoltre molti
browser offrono al navigatore
la possibilit di personalizzare
PC Open 27 Dicembre 2002
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 costruire una pagina che mantenga una propria coerenza anche
se sottoposta a vistose alterazioni nel momento in cui viene
ricevuta. Inoltre, dovr anche
tenere conto di elementi di usabilit e di navigabilit del sito,
che consentano a chiunque arrivi nella pagina direttamente
dall'esterno di capire dove si
trovi, di che cosa la pagina tratta e dove pu andare da quel
punto.
Prima ancora di scrivere una
riga in HTML necessario dividere la nostra pagina in aree regolari e possibilmente costanti
in cui collocare gli elementi di
navigazione, il contenuto vero
e proprio e qualsiasi altro elemento 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-
ti due approcci ricorrenti per la

strutturazione delle pagine
(per un approfondimento del
tema rimandiamo a "Web design arte e scienza" edito da Apogeo). Il primo modello prende il
nome di schema tre-quattro pannelli e moduli e prevede nella
parte alta una zona orizzontale
che contiene il logo del sito,
eventuali banner e l'indicazione di dove ci si trova in quel
momento all'interno del sito
medesimo. Il secondo pannello, 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 destra dello schermo (noi abbiamo misurato empiricamente
tale limite a 659 pixel dal bordo
sinistro della pagina Web).
Nelle realizzazioni pratiche
troviamo perci modelli a quattro pannelli, con una colonna
all'estrema destra della pagina
usata per contenuti minori. I
pubblicitari la definiscono, in
gergo, area extramercial, perch ospita banner e bottoni secondari, in aggiunta a quelli
primari in testa alla pagina. Solitamente la si utilizza anche
per elementi di servizio, come
la finestra di login, la navigazione locale (link che collegano
tra loro varie parti di uno stesso articolo), i bottoni realizzati
dal marketing per iniziative
promozionali oppure dal content manager per evidenziare

altri contenuti del sito.
Dove cade la piega

Un altro concetto importante nel progettare una pagina e,
in particolare la home page,
la caduta della piega o fold, all'inglese. Si tratta del limite inferiore della porzione visibile
della pagina prima di eseguire
lo scrolling. La parte alta della
home page costituisce la porzione pi pregiata del sito,
quella che tutti vedranno e che
perci tender ad affollarsi di
elementi di navigazione, di richiami editoriali e di eventuali
contenuti pubblicitari.
Infatti, solo una parte dei navigatori esegue lo scrolling verticale della home page per vedere il contenuto sottostante,
dopo la piega (below the fold).
Il termine preso a prestito dal
mondo dei quotidiani la cui prima pagina visibile solo per
met quando piegata sul banco dell'edicolante, dunque la
parte superiore, sopra la piega,
contiene sempre gli elementi di
richiamo pi forti.
A dire il vero, i dettami originali del Web design insegnavano a realizzare home page abbastanza semplici da poter essere visualizzate per intero
senza il bisogno di scrolling e
ovunque sia possibile questa
rimane la soluzione da preferirsi, specie per i siti pi semplici, tuttavia col crescere dei
siti e con il fatto che almeno
met dei navigatori non tenta
nemmeno di navigare il sito,
Test: leggi le domande e verifica le tue risposte

Riepilogo dei concetti studiati nelle prime due lezioni
1. Quali sono le competenze di un Webmaster?

2. Che cos' un editor HTML di tipo testuale?
3. Che cos' un editor visuale?
4. Che cos' un ambiente di sviluppo integrato?
5. Quali sono i due possibili schemi per organizzare le informazioni?
6. Quante possibili strutture esistono per la mappa di un sito?
7. Quali sono gli strumenti di navigazione offerti dal browser?
8. Quali sono le dieci regole per un buon sistema di navigazione?
9. Che differenza c' tra un sito statico e uno dinamico?
10. Che regola seguire nella strutturazione delle directory?
11. Che differenza c' tra un collegamento assoluto e uno relativo?
12. Che cos' un template?
13. Che cos' la piega?
14. Cos' HTML?
15. Cos' un marcatore (markup) in cosa si differenzia da un tag?
16. Quali sono i pi comuni sistemi per "impaginare" un documento Web?
(le risposte le trovi a pagina 31)
17/88
Modello a tre-quattro pannelli. il modello pi diffuso nel Web e prevede la

realizzazione di un modulo o pannello orizzontale superiore (modulo 1) che contiene il
logo del sito e alcuni elementi di navigazione globale, un pannello verticale all'estrema
sinistra (modulo 2) che contiene la navigazione vera e propria, un pannello centrale
(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
stampabile della pagina
ma si ferma alla home page, il

numero di elementi da enfatizzare in quest'ultima cresce rapidamente, perci inevitabile
avere home page con uno oppure anche due scrolling e pagine interne che arrivano fino
al limite massimo di cinque
scrolling.
Per compensare in parte il
problema della piega e rendere
il pi visibile possibile i contenuti interni del sito, alcuni portali hanno inventato un altro
modello di pagina, denominato
in gergo LSD dall'inglese Logo,
Search box and Directory. In
pratica fa quel che dice: apre la
pagina con il logo e con le informazioni che permettono al navigatore di orientarsi sulla sua
posizione attuale e di navigare
nelle sezioni principali, prosegue subito sotto con la finestra
di ricerca, messa molto in risalto perch costituisce uno
degli elementi di navigazione
primari per un portale e finisce
con la Directory, ossia la classica visualizzazione tabellare
degli argomenti che troviamo
in Yahoo, Virgilio, Libero e tanti altri. Quest'ultima l'elemento centrale del modello poich
consente di creare una struttura di navigazione molto ricca,
in aggiunta alla barra standard,
che offre immediata visibilit
di quel che c' sotto la home
page.
Il modello LSD soddisfa anche le raccomandazioni di usabilit di Jakob Nielsen, secon-
do il quale la home page dovrebbe contenere l'80% d'informazioni di navigazione e solo il

20% di contenuto effettivo, proporzione che si ribalta nelle pagine interne dove il contenuto
regna sovrano e gli elementi di
navigazione sono meno evidenti (vedi il testo Web usability edito da Apogeo).
Sempre secondo le indicazioni di Nielsen, e non solo, il
navigatore medio si ferma per
8 secondi su una qualsiasi pagina prima di decidere se approfondire oppure andare altrove, dunque la home page
deve offrire a colpo d'occhio
ogni possibile strumento per
capire cosa ci sia all'interno
del sito.
invece pessima e deprecata la prassi del tunnel, vale a dire la presentazione ai nuovi navigatori di una sequenza di pagine promozionali da attraversare obbligatoriamente prima
di arrivare alla home page vera
e propria. Altrettanto deprecata, bench meno dannosa, la famigerata splash page, una pagina d'introduzione animata che
cerca di spiegare lo scopo del
sito e che prevede, solitamente, un pulsante skip intro per
procedere direttamente alla
home page del sito. Entrambe
le soluzioni risultano appaganti per il progettista grafico e
magari per il marketing, ma sono inutili per il navigatore che
esce dal tunnel appena possibile e non si ferma quasi mai
2a lezione
per osservare l'animazione del-
la splash page, bens salta direttamente su altri siti.

Il metodo pi pratico per
realizzare un sito di medie dimensioni quello di seguire il
modello a tre/quattro pannelli
per tutte le pagine, compresa la
home page, oppure di adottare
il modello LSD per la home page e per le pagine di navigazione primarie (le home page di
secondo e terzo livello, nel caso in cui il sito sia molto ampio
e profondo), mantenendo i
quattro pannelli per tutte le altre.
Impostare gli spazi

del "canovaccio"
Definita la struttura della pagina, bisogna "prendere le mi-
sure" prima di cominciare a

scrivere il codice HTML vero e
proprio. In gergo ci chiama canvas, ossia canovaccio, l'area
per costruire una pagina Web
che stia nello spazio disponibile all'interno della finestra del
browser. Tale spazio varia in
funzione del browser, del sistema operativo e della quantit
di pannelli e strumenti accessori che il navigatore mantiene
visualizzati.
I due parametri importanti
da conoscere sono larghezza e
altezza del canovaccio, misurati in pixel. La larghezza corrisponde al numero di pixel disponibili in orizzontale quando
la finestra del browser aperta
completamente sullo schermo
(posizione massimo ingrandi-
Modello LSD. Deriva il suo nome dalle iniziali delle parole inglesi Logo Search
Directory. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte dei
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
impostare una ricerca per mezzo del motore di ricerca interno al sito/portale. La terza
(directory) ed elenca le principali categorie e sottocategorie d'informazioni o servizi
offerti. Di solito, a fianco della directory troviamo anche colonne verticali che
contengono informazioni, ulteriori elementi di navigazione e bottoni promozionali
18/88
mento), tolta l'eventuale barra

di scorrimento verticale. Laltezza invece il numero di
pixel disponibili nella finestra
prima della "piega".
Per capire quanto sia effettivamente grande il canovaccio,
dobbiamo assegnare dimensioni in pixel ai vari elementi. Si
comincia dal considerare la risoluzione del video utilizzata
dal navigatore. Se immaginiamo che la media dei navigatori
oggi disponga di monitor con
almeno 800 x 600 pixel di risoluzione, scopriamo che l'area
massima effettivamente utile
per lo sviluppo di 780 x 433
pixel, calcolati empiricamente
su una finestra di Internet Explorer all'interno di Windows
XP con le principali barre di comando attive. Per una valutazione pi dettagliata vi rimandiamo a un articolo sul Web: Sizing Up the Browsers accessibile
all'indirizzo
Internet:
http://hotwired.lycos.
com/webmonkey/99/41/index3a_page2.html?tw=design.
In generale vediamo che la dimensione considerata mediamente 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 diffusi) e 968 x 578 pixel su schermi da 1024 x 768.
L'elemento pi vincolate
naturalmente la larghezza, poich in lunghezza sempre possibile eccedere, ricorrendo allo
scorrimento verticale della pagina (scrolling), mentre lo
scrolling orizzontale, bench
usato da alcuni siti, va sicuramente evitato. Vediamo che i
diversi siti standardizzano diverse 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 primo pannello, cio quello contenente il logo, dobbiamo stabilire le dimensioni delle colonne o pannelli che seguono,
uno parallelo all'altro. Una volta impostate tutte queste indicazioni, siamo pronti a costruire la pagina vera e propria.
Tecniche d'impaginazione
Il Web non prevede strumenti per l'impaginazione grafica di elementi sulla pagina.
Nato in origine per visualizzare
semplici testi chilometrici, con

occasionali immagini annegate
nei testi medesimi, l'HTML non
fornisce marcatori per disporre gli oggetti nella posizione
che vogliamo e con le proporzioni 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 inserito all'intero della cella di
una tabella invisibile e combinando celle e righe contigue si
arriva alla costruzione completa della pagina. Il codice che ne
risulta abbastanza complesso e richiede una certa esperienza, ma funziona nella gran
parte dei browser.
L'alternativa pi rozza e impiegata solo nei primissimi
tempi del Web, quando le tabelle ancora non esistevano,
consisteva nel creare una grande 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 contesti particolari, ma comportano lentezza nel caricamento
(date le dimensioni del file grafico) e complicazione nell'aggiornamento dei contenuti.
In alternativa, nel tempo, si
sono sviluppati altri tre strumenti 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 pagina indipendente. Suddividendo i contenuti nelle diverse pagine e regolando le dimensioni
dei frame, possiamo produrre
un'impaginazione approssimativa, ma funzionale. Vedremo
pi avanti quali sono i vantaggi
e gli svantaggi dei frame.
Un altro strumento, sicuramente indicato per il futuro,
ma ancora poco supportato
dai vari browser, sono i fogli di
stile (CSS), mediante i quali
possibile posizionare gli elementi sulla pagina indicandone
le coordinate. I fogli di stile fanno anche parte del cosiddetto
DHMTL (Dynamic HTML) che
consente di aggiungere animazioni e interazione nella pagina
senza l'impiego di oggetti grafici. Una variante rispetto ai CSS
2a lezione
3
Le risposte alle domande di pag. 29
Prendiamo un tipico portale Internet e misuriamo empiricamente lo spazio

effettivamente disponibile per la visualizzazione della pagina all'interno del nostro
browser (in questo caso Internet Explorer con le principali barre di comando attivate) su
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
sono i livelli (layer) di Netscape che tuttavia stanno cadendo in disuso con il ridimensionarsi della diffusione di tale
browser.
Chiude l'elenco l'impaginazione grafica realizzata mediante strumenti particolari come Flash. In tal caso usciamo
completamente dal dominio
dell'HTML e generiamo pagine
che possono essere visualizzate solo mediante l'impiego di
speciali plug-in (moduli aggiuntivi) nel browser del navigatore. Il plug-in di Flash viene
ormai fornito gi in partenza
con Internet Explorer di Microsoft ed abbastanza diffuso

nella Rete, tuttavia si consiglia
di avere sempre una versione
alternativa delle pagine (solo
testo) per consentire l'accesso
anche a chi Flash non c' l'ha
oppure non lo pu utilizzare
perch magari non vedente e
costretto a far riferimento a un
browser che "legga" i contenuti attingendo direttamente dalla codifica HTML.
Usabilit e accesso
I siti moderni, soprattutto
quelli realizzati per la Pub-
Visualizziamo la stessa pagina del portale su uno schermo con risoluzione di 1024 x
768 pixel e misuriamo lo spazio empiricamente disponibile con tutti gli "optional" del
browser attivi. Troviamo che la pagina che ha una larghezza di 735 pixel sta
comodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato per
compatibilit con tutti i browser nelle condizioni di default (senza barre di navigazione
opzionali) di 968 x 578 pixel
19/88
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
direttamente sulla struttura visiva
della pagina finale, usando
strumenti di generazione automatica
dei tag simili a quelli offerti dagli
editor testuali.
4. Un programma che unisce tutte le
caratteristiche pi avanzate di un
editor testuale e di un editor visuale,
aggiungendo funzioni per la gestione
complessiva del sito e per il
controllo di tutti i link.
5. Esatto e ambiguo. Il primo
suddivide le informazioni in
categorie reciprocamente esclusive,
ossia le voci che compaiono in una
categoria non compaiono in
nessun'altra. Un esempio tipico
unorganizzazione alfabetica, come
nel caso di un dizionario, oppure
cronologica, come nel caso di un
archivio di articoli di giornale,
oppure geografica: i locali di una
citt. Il sistema ambiguo si basa
sull'esperienza di navigazione del
navigatore tipo e cerca di guidarlo
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 uneconomia
di tempo e di azione, fornire
messaggi visivi chiari, utilizzare
etichette chiare e comprensibili,
essere idonea per gli scopi del sito,
favorire gli obiettivi e i
comportamenti dellutente.
9. Un sito statico contiene solo le
pagine che abbiamo individualmente
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. LHyperText 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
dellintermediazione 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.
2a lezione
blica Amministrazione richie-
dono, anche in Italia, l'osservanza di alcune regole che modificano il modo d'impostare i
contenuti sulla pagina e i sistemi 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 immediatamente senza dovere imparare a
usarlo, e regole di accessibilit
che consentano di capire i con-
tenuti anche a chi, per vali motivi, non pu utilizzare un

browser convenzionale.
L'usabilit si centra in buona sostanza sulla ripetizione
di modelli che si sono dimostrati vincenti sul Web e limita
l'originalit del sito. Il classico
esempio di usabilit l'automobile: quando salite al posto
di guida, il volante e i pedali
dell'acceleratore, della frizione e del freno sono sempre
nella stessa posizione, qualun-
que modello scegliate. I pochi

modelli che sono "originali" alla fine vengono usati poco.
L'accessibilit di traduce invece nel fornire alternative testuali a qualsiasi cosa che non
sia decifrabile se non guardandola su un monitor: tipicamente immagini e tabelle.
Inserendo una nota di commento per ciascuna immagine
e un sunto per ogni tabella, entrambi previsti dai rispettivi
tag HTML, chi "legge" la pagina
attraverso un sistema di sintesi vocale anzich guardarla a

video, pu capire di cosa si sta
parlando. Ci impone maggiore lavoro su chi produce contenuti, ma allarga il pubblico
potenziale non solo ai portatori di handicap, ma anche a chi
consulta un sito via telefono
(attraverso sintetizzatore vocale) oppure dal browser vocale montato sullautoradio
(uno scenario poi non tanto futuribile).
3 Pagine HTML e marcatori

HyperText Markup Language nasce nel 1989 nel
laboratorio europeo per
la fisica delle particelle (CERN)
come strumento per la creazione e la 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 dellintermediazione di uno speciale programma, denominato browser (alla
lettera sfogliatore o "visualizzatore") che riconosce i
marcatori HTML e li elabora,
estraendo il testo che essi racchiudono e visualizzandolo in
funzione del tipo di marcatore
usato. Costituisce unedizione
ridotta di un linguaggio precedente, 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 dipertesto.
LHTML codifica ogni elemento della pagina mediante
un sistema di marcatori, tag allinglese, che si pongono allinizio e in chiusura della porzione di testo che si vuole contrassegnare. La gran parte dei
tag ha un significato strutturale, vale a dire spiega la natura
di quella particolare porzione
di testo: titolo, sottotitolo, paragrafo, tabella, immagine, collegamento (link) e non dice in
che modo visualizzarla. Lintenzione originale era di lasciare al browser la scelta di
20/88
come comportarsi in funzione

delle potenzialit della macchina su cui era installato.
I primi siti Web si presentavano perci molto scarni nellaspetto: semplici elenchi di testo
nero su sfondo grigio, con i link
di colore blu e sottolineati, e
con titoli molto vistosi. Non appena il Web uscito dal contesto universitario per trasformarsi, nella met degli anni Novanta, in uno strumento commerciale, si presentata la necessit di fornire un minimo di
estetica e sono nati alcuni marcatori stilistici che modificano
direttamente la visualizzazione
del testo viene visualizzato e
che hanno trovato la loro massima applicazione nellHTML
3.2, ai tempi di Netscape 4x e Internet Explorer 4x.
Tali marcatori stilistici,
tuttora in uso, sono stati deprecati dal World Wide Web
Consortium (www.w3c.org),
detentore e promulgatore delle specifiche HTML, al momento del rilascio della versione
pi recente del linguaggio, la
4.01, ormai supportata, almeno parzialmente, da tutti i nuovi browser.
L'attuale orientamento infatti quello di riportare lHTML
a funzioni unicamente strutturali, lasciando ai fogli di stile in
cascata (Cascading Style
Sheets) il compito di aggiungere stile al testo.
Questi ultimi, tuttavia, non
trovano ancora piena implementazione in alcuni browser
e perci molti progettisti ancora abbinano fogli di stile e marcatori HTML stilistici secondo
tecniche che vedremo e che
prendono il nome di transitio-
nal (soluzioni transitorie).

La sintassi del linguaggio
HTML semplicissima e si basa su parole inglesi comuni.
Non occorrono particolari programmi per scrivere una pagina HTML, basta infatti un qualsiasi editor di testo. Limpiego
tuttavia di editor dedicati sveltisce il lavoro e riduce gli errori.
Ogni marcatore contenuto
tra il simbolo di minore < e
maggiore > senza spazi e si
presenta solitamente in coppia, con un marcatore di apertura e uno di chiusura preceduto dalla barra inclinata. Grazie a questo approccio elementare, 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 marcatori va visualizzata con forza
(strong) il che significa in grassetto, nell'interpretazione abituale del browser Web (pu invece assumere forme diverse
in browser di natura diversa,

come quelli usati sui telefonini
abilitati alla navigazione di siti
Internet).
Nel caso in cui non ci sia alcun testo tra i due tag, il browser ignorer il tag e non visualizzer 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 formalmente dovrebbe essere
scritto <br/> al fine d'indicare
che si tratta di un tag particolare.
Esistono, poi, tag che hanno
un tag di chiusura facoltativo e
che perci producono un effetto anche se manca il testo corrispondente. Un esempio classico 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-
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
ria la chiusura di tutte le coppie di tag, anche quelle facoltative, perci tanto vale abituarsi fin d'ora a chiudere regolarmente tutti i tag che possono essere chiusi, come viene
gi fatto dagli editor che generano codice in automatico.
I tag HMTL possono essere
scritti con lettere maiuscole o
minuscole indifferentemente,
tuttavia la pagina risulter pi
ordinata se cercherete di seguire una regola. Alcuni Webmaster preferiscono scrivere
sempre i tag tutti maiuscoli per
distinguerli pi facilmente dal
resto del testo (effetto ottenibile 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 avviene nelle parentesi in matematica) 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 importante 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 sinistro, il browser visualizzer
sempre e comunque uno spazio solo, a meno che lo abbiate
istruito di mantenere esattamente il formato originale, con
il tag <pre> (preformatted text)
usato solitamente per visualizzare listati di programma o altri 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 aggiungono caratteri e peso alla stessa.
Se vogliamo mandare a capo
una riga sulla pagina dobbiamo usare un tag specifico come <br> oppure <p> (che aggiunge 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 unicamente 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 consentono di eseguire un'ottimizzazione rimuovendo tutti gli spazi e
i ritorni a capo superflui. In tal
modo, la pagina sar pi leggera e veloce da trasferire, ma
sar anche pi difficilmente
decifrabile da parte di terzi. In
generale i ritorni a capo forzati nel codice (l'insieme di istruzioni HTML che compongono
la pagina) vanno usati con molta prudenza, in particolare
vanno evitati in mezzo ai tag,
cio si sconsiglia fortemente di
andare a capo lasciando met
degli attributi associati marcatore su una riga e met sulla
successiva. Molto rischiosa
l'interruzione di tag che contengono 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
un ritorno a capo. Perci,

quando notate un comportamento strano negli allineamenti, provate a rimuovere i ritorni
a capo in mezzo a quella porzione di codice.
Anche nel caso del testo, il
consiglio di andare a capo solo quando si vogliono effettivamente separare i paragrafi.
A questo riguardo bene prestare attenzione alle funzioni
di "a capo" automatico fornite
da alcuni editor.
Sono necessarie per leggere
chiaramente righe di codice
molto lunghe senza dover continuamente scorrere la pagina
in orizzontale, ma si dimostrano deleterie quando realizzate
per mezzo di un a capo forzato
che rimane nella pagina in permanenza. Accertatevi che il
programma esegua il "soft
wrap", cio il ritorno a capo dinamico delle righe
ripiegandole a capo solo a video,
senza l'aggiunta di
ritorni a capo fisici
nel documento.
prosegue
(versione integrale
sul CD
n. 66
2a lezione

INDISPENSABIL
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.
INDISPENSABIL
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.
INDISPENSABIL
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.
22/88
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.
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.
INDISPENSABIL
Approccio inedito allusabilit

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.
Guida intermedia per imparare lo

sviluppo manuale di pagine HTML e
luso 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.
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.
INDISPENSABIL
Bibbia dello sviluppatore per imparare

luso di JavaScript allinterno di pagine
dinamiche. Richiede alcune basi di
programmazione, perci non alla
portata del neofita. Strumento
indispensabile per un Webmaster
professionista.
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.
Nonostante il titolo questo un

volume ricco dinformazioni utili e
consigli che possono servire anche al
professionista. Affronta in dettaglio
quel che un Webmaster dovrebbe
sapere per rapportarsi con fornitori
esterni.
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.
2a lezione
5 Strutturare i contenuti nella pagina:

tabelle, frame e form
a costruzione di una pagina
HTML equivale alla battitura di un testo con una telescrivente. Il browser costruisce la pagina leggendo in sequenza ciascuna riga, carattere per carattere. Combinando i
comandi e i contenuti che trova lungo il percorso, arriva alla
fine a produrre limpianto desiderato.
Ogni cosa che si trova nella
pagina di fatto un carattere di
testo che esprime un comando, indica la posizione di
unimmagine e le relative dimensioni, descrive un link
esterno, indica un testo da visualizzare, stabilisce la posizione dei diversi elementi.
Si dice tecnicamente che
ogni elemento inline, vale a
dire si trova inserito in una riga sequenziale e non pu essere letto prima che siano stati
letti gli altri caratteri che lo
precedono.
Poich nasce per visualizzare testo che fluisce in continuo, HTML non prevede alcuna funzione per impaginare
gli elementi, ossia per collocarli in una determinata posizione nella pagina, allinterno
di riquadri o colonne che abbiano proporzioni ben definite

rispetto al resto.
Se ci affidiamo agli strumenti base del linguaggio, lunica
forma di pagina possibile sarebbe un testo chilometrico,
occasionalmente interrotto da
unimmagine o da un link verso
altri documenti.
Talvolta questo pu anche
essere sufficiente, come nei
primi siti universitari e amatoriali 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 linizio e la fine del documento vero e proprio.
Nella maggior parte dei casi,
per, si vuole unimpaginazione pi raffinata, che divida la
pagina in aree ben distinte, ciascuna con elementi propri, come ad esempio la struttura a
quattro pannelli che abbiamo
visto nei modelli dimpostazione della pagina. In tal caso, prima ancora di cominciare a inserire il contenuto, ci serve
una struttura capace di contenerlo. Le scelte possibili sono

tre: tabella, frame e form. In
realt esiste anche la possibilit di collocare gli elementi
mediante le funzioni di posizionamento 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, perch compatibili con tutti i
browser e prive di controindicazioni in materia di usabilit e
di estetica. Se le configuriamo
senza bordo, le tabelle diventano una specie di griglia invisibile che tiene al loro posto i
vari elementi della pagina, immagini e testo. Gli unici svantaggi delle tabelle sono il non
garantire lassoluta stabilit
delle dimensioni e delle proporzioni tra i componenti e la
difficolt dimplementazione.
Particolarit dei frame

I frame sono invece pi facili da realizzare e offrono un
controllo molto pi rigoroso
degli spazi. Tuttavia presenta-
no importanti svantaggi di usabilit e di estetica. Dividono la

finestra in diversi riquadri, ciascuno contenente una pagina
Web indipendente, perci diventa impossibile far funzionare i tasti di navigazione in avanti e allindietro del browser. Infatti, con tre o quattro pagine
contemporaneamente presenti
a video, non chiaro quale sia
la pagina in cui ci troviamo
esattamente e in quale dei diversi riquadri debba essere caricata quella a cui si vuole ritornare. Inoltre, anche nel definire le istruzioni di navigazione
nel sito, dobbiamo sempre indicare in quale pannello inserire la pagina a cui il link indirizzato, il che complica un poco 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 navigatore comune. Infine la dimensione rigorosamente bloccata
dei riquadri pu anche diventare un problema quando la
pagina esce dai contorni del video e diventa necessario eseguire lo scrolling verticale. In
tal caso compariranno una
banda di scorrimento verticale
e orizzontale (a seconda della
direzione in cui il contento deborda rispetto al progetto originale) che sfigurano la pagina
e ne complicano luso.
Form per la registrazione
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
I form o moduli servono a

formattare un particolare genere di pagina, quelle utilizzate
per raccogliere informazioni
dal navigatore. Hanno il tipico
formato di un formulario da
compilare, con una serie di caselle accompagnate dalle relative etichette esplicative, pi
eventuali menu a tendina da
cui scegliere voci gi reimpostate oppure caselle da barrare per operare scelte immediate. Sono compatibili con ogni
genere di browser possono essere a loro volta incapsulati allinterno di tabelle o frame, ma
non indispensabile.
2a lezione
6 Adobe GoLive 6.0 maestro di tabelle

on la nuova versione del
suo celebre ambiente di
sviluppo integrato, Adobe
consolida una soluzione che
particolarmente mirata allintegrazione 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, lantagonista di
sempre, migliorato drasticamente sia con laggiunta di una
doppia vista che abbina in contemporanea codice e struttura
grafica, sia con laggiunta di
funzioni per il coordinamento
del lavoro di gruppo che sono
invece assenti dalla piattaforma Macromedia.
Migliorata drasticamente anche lintegrazione con gli altri
prodotti Adobe che vanno a
comporre la Creative Suite, infatti GoLive 6.0 oggi pu importare livelli di Photoshop, illustrazioni vettoriali di Illustrator e animazioni di LiveMotion
2.0. Mantenuta infine lintegrazione con InDesign, il pacchetto
di videompaginazione per leditoria tradizionale che consente
un efficace passaggio dei contenuti dalla carta al Web e viceversa.
Al momento esistono due
suite che si contendono il mercato dei creativi che cercano un
ambiente editoriale completamente integrato: Adobe Creative 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 qualsiasi editor visuale per il fatto
di offrire una grande variet di
viste per lavorare sul documento oppure sullintero 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
Identikit
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 lupgrade 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 sorgente (HTML o di altro tipo), il
sito e le funzioni avanzate, come ad esempio i fogli di stile.
La prima categoria di oggetti
la pi comune e contiene la
pagina con tutti i relativi componenti: tabelle, moduli, testo e
immagini. La sua lavorazione
imperniata su una finestra di
Layout che ne mostra una versione grafica modificabile.
Lavorando con il mouse e i
menu, possibile inserire, cancellare, spostare e ridimensionare qualsiasi elemento, osservando il risultato immediato a
video. Le tecniche di lavoro sono due: inserire gli oggetti attingendo dalla palette dedicata,
oppure costruire una griglia visiva su cui poi collocare dei segnaposto per gli oggetti.
La griglia, che assomiglia alla
gabbia dimpaginazione di
una pagina su carta, si trasforma poi automaticamente in tabella, collocando tutti gli elementi al posto giusto. Questa
particolare modalit progettuale, molto vicina al sistema di lavoro di un progettista grafico,
non presente in nessun altro
editor HTML e viene fornita dal

concorrente principale, Dreamweaver MX, solo grazie allimpiego di un prodotto complementare esterno, Fireworks MX.
Il secondo elemento di lavoro che ci accompagna ovunque
la finestra Inspector che mostra i parametri di qualsiasi oggetto selezionato permettendoci di modificarli senza intervenire manualmente sul codice.
Si notano anche alcune finezze nella finestra Layout: il titolo della pagina immediatamente accessibile nella cornice
superiore della finestra di
Layout e pu essere modificato
direttamente (come avviene anche in Dreamweaver), ma qui
possiamo anche estendere il
bordo superiore e accedere a
tutti gli altri elementi dellintestazione (head), senza dover
scorrere il listato HTML come
invece accade in altri editor.
In basso alla finestra, come
in Dreamwaver, abbiamo lindicazione della larghezza in pixel
della pagina su cui stiamo lavorando.
Rispetto alla versione precedente, ora anche possibile
aprire una finestra di esplorazione del codice immediatamente sotto alla finestra di
Layout cos da vedere in che
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 nellaltra.
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
2a lezione
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 funziona come una sorta di anteprima immediata e modificabile.
Questa visualizzazione doppia e contemporanea emula
una prerogativa che finora
stata unica di Dreamweaver.
La differenza tra i due che
Adobe GoLive non visualizza
nella finestra Layout leffetto
prodotto dagli eventuali fogli di
stile, ma dispone in compenso
di una finestra di Anteprima interna al programma che visualizza immediatamente la pagina nella sua struttura finale, invece di dover aprire una finestra esterna allo scopo come
accade in Dreamweaver.
Un altro modo unico di GoLive per visualizzare il codice sorgente a fianco della finestra
Layout consiste nella palette del
Codice Sorgente. Una finestrella
ridimensionabile che si apre sopra la vista Layout e mostra la
porzione di codice che corrisponde all'area selezionata. Il
terzo modo possibile consiste
nell'apertura di una speciale finestra denominata Visual Tag
Editor che mostra la codifica del
particolare tag su sui posizionato il cursore e consente di
modificarlo agendo direttamente su quella particolare porzione di codice sorgente.
Operare direttamente
sul codice
Esiste anche, naturalmente,
la finestra per lediting testuale
a tutto schermo. Si chiama finestra Origine e prevede la colorazione dinamica degli ele-
menti di programma distintamente dai tag HTML e dal testo. Qui, a differenza di altri
programmi abbiamo la possibilit di scegliere al volo, mediante icone, che cosa colorare: i marcatori distinti dai relativi attributi e distinti dal testo,
gli elementi nel loro insieme
(cio tag, pi attributi pi testo
contenuto allinterno del tag), i
soli collegamenti, il codice eseguibile su server. In questo modo possibile eseguire analisi
selettive delle diverse componenti della pagina e intervenire
di conseguenza.
Alla pari di altri ambienti,
troviamo la possibilit di visualizzare i numeri di riga e di
attivare un a capo automatico
(soft wrap) delle righe in modo
da non dover eseguire lo scrolling orizzontale e al tempo
stesso non modificare il codice
con laggiunta di a capo permanenti.
Linserimento 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 Inspector perde invece di utilit.
Rispetto a Dreamweaver
sentiamo la mancanza di una finestra grafica d'impostazione
dei parametri di ciascun tag,
sensibile alla posizione del cursore, e il completamento automatico dei tag in fase di digitazione diretta.
Superlativa invece la gestione delle tabelle, quasi del tutto
automatizzata, con completamento automatico degli elementi mancanti e con importazione diretta di qualsiasi gene-
re d'informazioni tabellari, versate automaticamente in una

tabella con il numero giusto di
righe e di celle.
Nella manipolazione delle tabelle GoLive non secondo a
nessuno.
Funzioni speciali
del programma
Unico nel suo genere, GoLive
fornisce altre due viste particolari dedicate esplicitamente
allanalisi dei frame (riquadri) e
della struttura del documento
(in particolare le tabelle).
In pratica, compare un editor strutturale che mostra le relazioni gerarchiche tra i vari
elementi della pagina oppure
tra i riquadri di un frame, consentendo di modificare direttamente gli attributi di ciascuno
e di correggere eventuali errori, spesso difficili da notare nella vista Origine, dove le molteplici righe di codice oscurano il
disegno strutturale che sta dietro alla pagina. Le modifiche
apportate nelleditor di struttura di tabelle o frame si mostrano, poi, direttamente nelle
altre finestre.
La progettazione del sito

Questo un dei punti di forza di GoLive che, alla pari di
Dreamweaver, consente di tenere sotto controllo tutti gli
elementi del sito, creare template modello per tutte le pagine, ispezionare graficamente
link e gerarchie e modificare
qualsiasi elemento nel sito con
un doppio clic. Una prerogativa
unica di GoLive tuttavia quella di disegnare il sito da zero,
su uno schema grafico che visualizza tutti i possibili elementi. Lo schema pu essere
stampato ed esportato per sottoporlo all'approvazione del

committente oppure semplicemente per tenere una documentazione delle varie fasi.
Una volta che lo schema
completo, il programma genera automaticamente tutte le pagine e gli oggetti corrispondenti, tenendo traccia dei link previsti che saranno aggiunti a mano a mano che inseriamo contenuti 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 differenziazione
rispetto
a
Dreamweaver la gestione
coordinata del lavoro di gruppo. Utilizzando una tecnologia
residente su server, GoLive tiene traccia di chi sta lavorando
sul documento in un certo
istante e di tutte le versioni realizzate. In tal modo, si evitano
variazioni conflittuali e si pu
procedere allo sviluppo parallelo dello stesso sito da parte di
un team di professionisti.
La funzione, denominata
Workgroup Server, totalmente gratuita e integrata nel programma base. La tecnologia
corrispondente di Macromedia
prendeva il nome di Sitespring
ed stata abbandonata prima
del rilascio di Dreamweaver MX
senza fornire nel frattempo alternative percorribili, perci GoLive
l'unico ambiente di
sviluppo sul mercato che consenta
una gestione efficaprosegue
ce di un team.
sul CD
(versione integrale
n. 66
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
3a lezione
Progetto
Web Master
di Roberto Mazzoni
1 La tabella come elemento strutturale

ominciamo la nostra
esplorazione in dettaglio del linguaggio
HTML dalle tabelle, un tema
che non viene mai affrontato
per primo nei testi e nei corsi su questo linguaggio, in ragione della sua complessit,
ma che a nostro avviso necessario invece conoscere da
subito al fine di progettare
pagine funzionali. Oltre alla
loro funzione primaria, che
consiste nel rappresentare
informazioni tabulari, le tabelle costituiscono il pi diffuso sistema di "impaginazio-
ne" per le pagina Web.

Funzionano come una griglia invisibile, che suddivide
lo spazio della pagina in contenitori ben definiti in cui riversare testo e immagini.
Il professionista perci inizia il proprio lavoro su una
pagina vergine proprio dalla
progettazione della tabella e
prosegue, poi, con il riversamento dei contenuti e l'aggiunta degli elementi stilistici.
Come qualsiasi altro elemento HTML, anche le tabelle operano nella logica della
"telescrivente", ossia vengono lette dal browser un carattere alla volta, dall'inizio
dalla fine della riga, per poi
cominciare con la riga successiva.
Non esiste modo di sapere
come una tabella sia esattamente composta fino a che il
browser non arrivato in fondo alla lettura dei vari tag
che la compongono.
Basta un tag sbagliato oppure mancante, per scombinare l'intera pagina e renderla incomprensibile al suo
stesso progettista.
Inoltre, come qualsiasi altro elemento HTML, le tabelle cambiano il proprio funzionamento a seconda della
versione di browser utilizzato e del modo in cui il codice
originale stato scritto.
Codifiche teoricamente
equivalenti e sintatticamente
corrette possono produrre risultati visibilmente diversi.
proprio in questo ambito
che i cosiddetti editor HTML
visuali mostrano le maggiori
differenze producendo in automatico codice HTML che
talvolta va rivisto riga per ri-

Lezione 1:
Adobe GoLive 6.0
Contenuti aggiuntivi sul CD
sul CD)
il corso

sul CD
n. 67
Le risorse on line
Aggiunte inedite alla prima lezione

disponibili solo sul CD
di questo numero:
Organizzazione delle informazioni
ipertesto, struttura lineare
Strumenti di navigazione
Sistemi di navigazione
Sistemi di labeling
Lezione 2:
Progettare un sito statico
Progettare la pagina
Pagine HTML e marcatori
Strutturare i contenuti della pagina
26/88
Versioni integrali e complete degli articoli

pubblicati sulla rivista
Spiegazione dei tag HTML per una pagina
vergine
dimensionare tabelle con celle miste,

allineamento spontaneo delle tabelle
consecutive
Template con struttura complessa:
come creare tabelle complesse
Template con tabelle nidificate: tabelle
nidificate in cascata, complesse
e consecutive
Esercizi: esplorare i tag delle tabelle,
creare una tabella semplice con
HTML-Kit
Lezione 3:
Modelli di pagina e tabelle

La tabella come elemento strutturale:
comporre gli elementi della pagina
utilizzando una tabella di riferimento
invisibile
Progettare layout fluidi e statici:
scegliere il migliore per le proprie
esigenze
Costruire template con le tabelle
di layout: produrre modelli riutilizzabili
NamoWeb Editor 5: per siti statici
professionali
Le prossime puntate:
Lezione 4 - febbraio 2003:
HTML 4.01 e CSS
Lezione 5 - marzo 2003:

Lezione 6 - aprile 2003:

Siti interattivi
Lezione 7 - maggio 2003:
Dimensionare tabelle e celle fluide,
Lezione 8 - giugno 2003:

Promuovere il sito
3a lezione
ga dal progettista per eliminare 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 costruisce siti. A differenza delle tabelle costruite da un foglio
elettronico o da un wordprocessor, che hanno righe e colonne ben identificate e regolabili singolarmente, le tabelle HTML sono semplicemente sequenze di righe e di celle allinterno di tali righe.
Non esiste alcun marcatore per definire le colonne in
quanto tali e il concetto stesso di colonna viene simulato
grazie all'intervento del
browser che, combinando diverse celle appartenenti a righe consecutive, crea l'impressione di un'unit verticale.
La tabella in quanto tale
viene costruita dal browser
combinando i vari tag che definiscono una serie di righe
sequenziali che contengono
una serie di celle le quali,
combinandosi con quelle di
pari posizione nella riga precedente e nella riga successiva, danno limpressione di
formare colonne verticali,
che in realt non esistono.
Il browser intraprende alcune azioni autonome per aggiustare e modificare l'aspetto originale delle celle in modo da creare un risultato ritenuto migliore, ma che potrebbe anche essere diverso
dall'intendimento originale
del progettista.
Alcune regole da tenere

sempre a mente
Qualsiasi dimensione specificata per la tabella e per le
celle dal progettista viene intesa dal browser come dimensione minima e puramente indicativa. Nel caso in cui abbiamo indicato unicamente la larghezza della tabella, come
consigliato da alcuni, questa
sar ripartita tra le diverse celle, 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 larghezza della tabella o con la
somma delle larghezze specificate per le celle che la compongono. Non esiste modo per
27/88
definire la larghezza della riga

in quanto tale.
Nel caso in cui tale somma
superasse la larghezza specificata in origine per la tabella,
quest'ultima si allargher per
adattarsi (qualsiasi cosa definito a livello di cella ha sempre la precedenza su tutto il
resto). La pi grande delle
celle di una colonna determina la larghezza di tutte le altre
di quella colonna, anche se
avessimo esplicitamente indicato larghezze inferiori per
le altre celle di quella colonna.
Nella pratica sufficiente
indicare la larghezza di una
sola cella della colonna affinch tutte le altre si adattino di
conseguenza.
Se inseriamo nella cella
un'immagine che ne supera le
dimensioni, la cella si allargher automaticamente in modo da contenere l'immagine inserita e far allargare tutte le
celle che corrispondono alla
stessa colonna.
L'allargamento
porter
pressione sulle celle circostanti riducendone le dimensioni originali, se tuttavia anche queste contenessero
un'immagine, incomprimibile
per definizione, l'intera tabella
deborderebbe oltre i limiti
consentiti.
Le immagini hanno una fortissima influenza sul comportamento delle tabelle tanto
che per lungo tempo i progettisti Web le hanno usate come
strumento di costruzione della 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 resto della tabella.
Il trucco delle immagini

spaziatrici
Il trucco classico consiste
nel prendere un'immagine di
colore invisibile larga un pixel
e quindi dimensionarla (altezza e larghezza) all'interno della cella di cui vogliamo bloccare le dimensioni.
Di solito viene inserita nell'ultima riga della tabella, che
per il resto rimane vuota, cos
da condizionare tutte le altre
celle presenti nella stessa colonna.
Lo stesso trucco pu essere
ripetuto su pi celle fino a
bloccare l'intera 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?. Allinizio una
certa ritrosia, poi la tentazione
di apparire sulla rivista di
informatica preferita ha la
meglio.
Marco iscritto alla facolt di
Ingegneria Informatica
delluniversit capitolina La
Sapienza ma gli studi vivono
una fase di stallo Luniversit
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
loccasione 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.
Allinizio mi sono occupato
principalmente dello sviluppo in
HTML, ma poi dallazienda mi
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 lambiente
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
lopportunit di approfondire il
settore di cui mi sto occupando
adesso: seguire lo sviluppo
delle tecnologie per il
commercio elettronico, magari
riprendere luniversit e intanto
prendermi la laurea di primo
Daniela Dirceo
livello.
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
dell'ultima cella dell'ultima riga il browser sa esattamente come sia composta la tabella
3a lezione
Questo genere di artificio

(definito shim inglese cio zeppa oppure immagine spaziatrice in italiano) tutt'ora in uso,
ma presenta l'inconveniente
d'inserire elementi estranei
nella tabella e di perdere l'efficacia qualora il navigatore
avesse disattivato la visualizzazione delle immagini sul
proprio browser.
L'uso delle immagini spaziatrici considerato peccato

grave dai puristi, ma sicuramente utile in alcune circostanze.
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 capace di adattarsi alla risoluzione del monitor su cui visualizzata.
La regola generale comunque di mantenere pi
semplici possibili le tabelle
strutturali, usandole solo dove necessario ed evitando, se
possibile, di nidificarne, ossia
di innestare una tabella den-
tro l'altra. Una pagina composta di tabelle molto complesse e incapsulate l'una nell'altra finisce per essere pesante
e per richiedere tempo prima
di poter essere elaborata e visualizzata dal browser, senza
contare le possibilit di errore, che si moltiplicano al crescere 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.
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
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: unimmagine 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.
3a lezione
2 Progettare layout fluidi o statici

na volta creata la nostra
pagina vergine siamo pronti a costruire la struttura di
layout in cui inserire successivamente i contenuti.
Abbiamo scelto le tabelle come strumento d'impaginazione
perch garantiscono maggiore
compatibilit con i diversi tipi
di browser e anche il miglior effetto estetico. A questo punto si
presentano alcune alternative.
La prima decidere se incapsulare l'intera pagina in una grande tabella che poi ne conterr
altre, oppure se ridurre al minimo la quantit di tabelle presenti nella pagina facendo affidamento sullo spontaneo allineamento delle stesse tra loro e
sulla possibilit di affiancarle e
sovrapporle a paragrafi e immagini che fluiscano liberamente 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 dinamico sono privi dei contenuti che altrimenti sarebbero necessari per tenere al loro posto
le tabelle in una pagina a struttura libera, perci difficile vedere durante la progettazione
quale sar il risultato finale e nel
momento di generare la pagina
in automatico prelevando i contenuti dal database, si otterranno risultati variabili al cambiare
dei contenuti forniti.
Il secondo approccio, che
consiste nel lasciare la pagina libera da una struttura generale e
incapsularne solo alcune parti,
preferito dai puristi perch
consente di mantenere le pagine pi leggere e pi semplici.
Inoltre, alcuni browser delle
precedenti generazioni avevano la brutta abitudine di aspettare il caricamento e l'elaborazione 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 lavorando all'elaborazione delle
successive sia perch la semplicit delle tabelle richiede poco impegno elaborativo al
browser prima della visualizzazione. Poich il primo approc-
29/88
cio comunque sempre pi diffuso grazie al diffondersi dei siti dinamici, i principali browser
moderni dispongono di una funzione che riduce il ritardo di visualizzazione e che si chiama
"rendering progressivo".
Il programma comincia a visualizzare i primi elementi della
tabella prima di averla caricata
per intero. In tal modo, i primi
elementi di una pagina lunga e
complessa appariranno immediatamente, cos da riempire la
finestra video che il navigatore
sta osservando e dando lidea
che la pagina sia disponibile per
intero. In realt, il browser sta
ancora lavorando dietro le quinte per completare l'elaborazione della tabella e comporre la
porzione inferiore della pagina
cos che sia pronta quando decideremo di eseguire lo scrolling. Di contro pu succedere
che la pagina compaia inizialmente con un determinato assetto che si modifica dopo alcuni secondi quando il browser ha
terminato la lettura della tabella nel suo complesso. L'unico
accorgimento da adottare nel
progettare una pagina inserita
in una tabella globale sfruttando il rendering progressivo di
creare i primi elementi in modo
che non siano indipendenti dal
resto della tabella. Tipicamente
lo si fa creando una prima tabella orizzontale larga nidificata
nella tabella primaria e larga
quanto lintera pagina che contenga la barra del logo e i primi
elementi di navigazione del sito.
Dopo di che si prosegue a
scendere con una serie di tabelle che si compongano da sinistra a destra e dallalto verso il
basso. Qualunque sia la soluzione adottata, vale comunque
il criterio di ridurre le tabelle al
minimo e, in particolare, di ridurre la nidificazione progressiva delle tabelle (inserimento di
una tabella in un'altra) perch
una pagina troppo complessa
richiede al browser molto tempo per essere elaborata e pu
produrre errori inaspettati.
Fluido, statico o misto

La seconda scelta importante decidere se la struttura della nostra tabella avr dimensioni fisse oppure variabili. HTML
consente infatti di specificare la
larghezza della tabella e delle
Tabella statica e dinamica: le tabelle a larghezza fissa, indicata in pixel, mantengono

il proprio assetto qualsiasi sia la dimensione della finestra del browser. Perci, nel
caso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie, una parte
della tabella diventerebbe invisibile. Viceversa le tabelle a dimensione variabile,
espressa in percentuale, modificano la propria ampiezza in funzione della dimensione
della finestra e hanno perci un aspetto meno prevedibile
relative celle (colonne) in pixel

oppure in percentuale. Se indichiamo un valore in pixel la tabella rester di quella dimensione qualunque sia l'ampiezza
della finestra disponibile per il
browser sul computer dell'utente. Nel caso invece di valori
percentuali, la tabella si allargher o si stringer (compatibilmente con i contenuti) al variare della dimensione della finestra di navigazione. anche
possibile adottare una soluzione mista dove solo alcune colonne abbiano una dimensione

Riepilogo dei concetti della Lezione 3
1. Perch le tabelle sono diventate lo strumento principale per

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)
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.
fissa, ad esempio quelle conte-
nenti i link di navigazione, mentre le altre abbiano una dimensione variabile, ad esempio
quelle che contengono il testo.
Tag fondamentali
di una tabella
Qualunque sia l'impostazione progettuale, una tabella si
apre e si chiude sempre con i
tag <table> e </table> allinterno
di quali troviamo una serie di righe delimitate dai tag <tr> e
</tr> che a loro volta contengono un certo numero di celle
contrassegnate dai tag <td> e
</td>. Prendendo a prestito una
metafora dal libro "HTML 4 Tutto & Oltre", costruire una tabella come erigere un muro. Si
crea la base con <table> quindi
si stende il primo strato di cemento con <tr> si posano diversi mattoncini in sequenza con
<td> e </td> dopo di che si passa al nuovo strato di cemento
con </tr> e <tr>. Il numero di righe pu variare liberamente,
ma il numero di celle deve essere costante riga per riga altrimenti sar impossibile costruire le colonne. La larghezza delle
celle non deve essere necessariamente uguale, invece, sebbene sarebbe meglio che lo fosse.
Se non fosse possibile mantenere lo stesso numero di celle
per ogni riga. consentito usare
speciali comandi per estendere
una cella su pi colonne in orizzontale o su pi righe in verti-
30/88
cale, ma si tratta di soluzione

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 tabella sar scombinata e la visualizzazione risultante sar
confusa. Ne consegue che difficile realizzare tabelle molto
complesse senza perderne il
controllo. I principali errori di
codifica di una pagina HTML risiedono proprio nella costruzione delle tabelle. In particolare, una tabella non chiusa propriamente con il tag finale </table> pu scombinare la pagina
al punto da renderla irriconoscibile. Possono nascere problemi anche dalla mancata
chiusura dei tag interni di riga o
di cella. Fortunatamente i browser moderni dispongono di
strumenti particolari per compensare la complessa gestione
delle tabelle. Internet Explorer,
ad esempio, completa automaticamente una riga non chiusa
quando incontra il marcatore
dinizio 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 motivo si consiglia sempre di eseguire unanteprima della pagina
con uno di questi programmi
prima di rilasciarla.
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

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.
3a lezione
3 Costruire template con le tabelle di layout

efinire la struttura della
pagina mediante l'impiego
di tabelle una delle operazioni 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 identiche tra loro, ma capaci di ospitare contenuti diversi. A tal fine
sar importante concepire una
struttura che sia capace di
adattarsi al variare dei contenuti e sia riutilizzabile il pi
possibile. Mantenere al minimo
il numero di template un requisito necessario per avere un
sito gestibile e per facilitarne la
successiva evoluzione a sito dinamico.
decidere se incapsulare il tutto
in una singola tabella oppure
creare diverse tabelle separate
che si allineano spontaneamente. A favore della prima soluzione gioca il completo controllo della struttura e delle sue dimensioni, a favore della seconda una maggiore leggerezza della pagina e semplicit delle tabelle che porta, alla fine, a una
maggiore velocit di visualizzazione nel browser (per una descrizione 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 contrarsi all'unisono con la finestra del navigatore. Nella pratica, raro trovare pagine fluide
in tutti i loro componenti, perci 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 oppure fluido della tabella e delle
sue celle dipende dall'impostazione di un singolo attributo:
width che pu assumere valori
in pixel, perci assoluti, oppure
valori in percentuale (da 1 a
100). Assegnando una larghezza percentuale all'intera tabella,
ad esempio con il tag <table
width="75%">, otterremo un oggetto con una dimensione complessiva pari al settantacinque
per cento della finestra del
browser, qualunque siano le dimensioni di quest'ultima. Tale
ampiezza sar, poi, distribuita
in modo uguale tra tutte le celle/colonne, salvo modificare le
dimensioni di una particolare
colonna rispetto alle altre a seguito dell'inserimento di testo o
immagini, come visto nell'articolo precedente. Se volete controllare le dimensioni percentuali di una colonna rispetto alle altre, potete assegnarle un
valore specifico.
Di solito s'imposta la dimensione della prima o dell'ultima
cella, usando sempre l'attributo
width all'interno, in questo caso, del tag <td>. Ad esempio <td
witdh="30%"> imposta le dimensioni della cella e della relativa colonna in modo che sia
il trenta per cento del totale
della tabella, nel nostro esempio sarebbe il 30% del 75%. Lo
spazio restante sar distribuito
in modo equo tra le altre colonne. Il vantaggio di assegnare
una dimensione percentuale
esplicita a una delle colonne
duplice: creare proporzioni diverse nelle dimensioni di ciascuna rispetto a quanto determinato 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 almeno una delle sue colonne,
manterr il suo assetto anche
nel momento in cui inseriamo
testo nelle varie colonne. Qualora il testo fosse troppo lungo
per essere contenuto nella cella, il browser lo manderebbe
automaticamente a capo allungando 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 incomprimibile, obbligher la cella a mantenere una larghezza almeno pari alla propria o superiore (trovate un dettaglio
esemplificativo di questi passaggi nell'articolo Dimensionare tabelle e celle sul CD).
Soluzioni miste
Cosa succede se nella nostra
tabella fluida volessimo bloccare una colonna? Dovremmo impostarne le dimensioni in pixel
e lasciare libere le altre oppure
impostarle in percentuale. Anche in questo caso sar sufficiente impostare la larghezza di
una sola delle celle che compongono la colonna a dimensione fissa. Ad esempio il tag
<td width="120"> inserito nella
cella della prima o dell'ultima
riga, imposter la larghezza dell'intera colonna a 120 pixel e fisser anche la dimensione complessiva della tabella. Ricordiamo un concetto importante del
dimensionamento fisso: la misura espressa in pixel indica la
larghezza massima della colonna. Perci il browser non la
espander anche quando la finestra si allarga, ma non vero
il contrario.
Come gi visto nell'assegnazione delle priorit dimensionali in una tabella fissa (vedi
l'articolo Stabilit delle dimensioni), sempre possibile
restringere la larghezza di una
cella/colonna a dimensione fis-
sa quando imposto dal comprimersi della finestra o dall'espandersi del contenuto nelle
colonne circostanti. L'unico
modo per garantire che una colonna rimanga davvero bloccata sia in espansione sia in compressione (una caratteristica
necessaria ad esempio per una
barra di navigazione) consiste
nell'inserire un'immagine di larghezza esattamente identica alla 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 essere visibile al navigatore. Allo
scopo si usa di solito di un'immagine trasparente lunga e larga un pixel, il cosiddetto spaziatore o immagine spaziatrice
(shim).
E fin qui sembrerebbe tutto
chiaro: per produrre un sito
con pagine fluide basta bloccare le colonne che contengono
elementi di navigazione e lasciare libere quelle che invece
ospitano il contenuto (testo e
immagini). In tal modo il contenuto utilizzer tutto lo spazio
disponibile nella finestra del
browser e, al contempo, il navigatore non sar sorpreso da
elementi di navigazione che
continuano a cambiare aspetto
(per un dettaglio su come costruire pagine di questo tipo
vedi l'articolo Dimensionare
tabelle con celle miste sul CD).
Purtroppo, per, le tabelle
ad assetto misto (fluido e statico) presentano alcune stranezze con cui bisogna fare i conti.
Innanzi tutto i browser pi vecchi non rispettano la dimensio-
3a lezione
Ecco la stessa pagina da cui abbiamo rimosso tutto il contenuto di testo. Le cinque
zone diventano pi evidenti. Sono interamente comprese in una tabella globale che ne
ospita 9 nidificate. La zona 1 contiene il logo (che occupa la prima tabella nidificata al
primo livello) e la navigazione globale del CD (che occupa la seconda tabella nidificata
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
consecutive. La zona 4 contiene la navigazione locale della lezione e usa altre due
tabelle nidificate consecutive. La zona 5 contiene il riferimento ai credits e usa una
tabella larga quanto l'intera pagina
ne massima imposta per le co-
lonne a larghezza fissa inserite

in una tabella fluida e quando la
finestra viene allargata finisce
per espandersi anche la colonna che dovrebbe restare bloccata. Persino l'immagine spaziatrice non ci aiuta in questo
caso perch essa garantisce
che la colonna non si restringa
al di sotto della propria dimensione, ma non pu impedirle di
allargarsi.
Il problema stato ormai risolto dalle versioni recenti di
browser, ma se pensate che i
vostri utenti usino browser di
due o tre anni fa, bisogna ricorrere a un altro trucco: impostare la larghezza di una delle colonne variabili al 100% in modo
che la somma delle percentuali
superi 100. Il browser dar sempre a tale colonna la massima
larghezza possibile "tenendo a
bada" tutte le altre. Questo
stratagemma pu servire anche a definire una pagina che
abbia solo colonne a larghezza
fissa eccetto una, quella dedicata al testo, e che quest'ultima
si estenda a garantire alla colonna variabile sempre la massima ampiezza possibile. Avrete notato che insistiamo sull'assegnare la larghezza sempre a
una sola cella della colonna, i
motivi sono tre: inutile specificarlo per le altre celle visto
che queste si adattano automaticamente facendoci risparmiare codice e mantenendo la pagina pi leggera; nelle tabelle
complesse facile perdere il filo e assegnare dimensioni diverse a celle della stessa colonna; in caso di modifica delle dimensioni della tabella, me-
32/88
glio dover lavorare su una sola

riga che doverne cambiare tante.
Finora abbiamo parlato solo
di larghezza di tabelle e celle,
ma i tag <table> e <td> consentono di specificarne anche l'altezza minima che anche in questo caso pu essere espressa in
pixel oppure in percentuale rispetto all'altezza della finestra
del browser. un attributo usato di rado poich la norma lasciare che la tabella si allunghi
e si accorci da sola in funzione
del contenuto inserito, tuttavia
importante sapere che a differenza della larghezza, dove si
indica un valore massimo, qui
viene sempre indicato un valore minimo, al di sotto del quale
il browser non pu scendere,
ma che pu essere incrementato se il contenuto nelle celle
contigue lo richieda. Indicando
una lunghezza e una larghezza
pari al 100%, la tabella occuper sempre il massimo dello
spazio disponibile nella finestra. Non esiste un'altezza di riga perch in realt quest'ultima
eredita l'altezza della cella pi
alta al suo interno. Anche in
questo caso, se dovete indicare
un valore, fatelo su una cella
soltanto, la prima o l'ultima della riga.
Template con struttura

complessa
Nella definizione del layout
di una pagina raro trovarsi
con le strutture molto regolari
consentite dalle tabelle semplici con un numero uniforme di
celle per ciascuna riga. Anche
ricorrendo a tabelle multiple
consecutive, non si riesce a ri-
produrre l'effetto desiderato e

bisogna creare forme pi complesse mediante l'estensione di
celle su pi righe e colonne oppure mediante l'innesto di una
tabella nell'altra. L'estensione
di una cella su pi righe o colonne un'operazione poco intuitiva e delicata perch i browser la interpretano a modo loro.
I puristi consigliano di evitarla,
ma esistono diverse situazioni
in cui non possibile farne a
meno, perci tanto vale padroneggiarla. L'operazione si basa
sull'impiego di due attributi del
tag <td>, ossia colspan per indicare su quante colonne si debba estendere la cella in orizzontale e rowspan per indicare
su quante righe debba estendersi in verticale (vedi sul CD
l'articolo dettagliato Creare tabelle complesse).
pi facile capire il funzionamento di questi due attributi
se li consideriamo capaci di
unire due celle adiacenti per
formarne una sola. In effetti
questa esattamente l'operazione compiuta da alcuni editor
visuali nel momento in cui
chiediamo di estendere una cella in orizzontale o verticale. Se
invece lavoriamo a mano, dobbiamo occuparci di cancellare
personalmente la cella contingua nel cui spazio vogliamo
estendere la cella espansa. In
pratica quando aggiungiamo
colspan o rowspan entro una
cella esistente, questa si allargher ad occupare lo spazio
della cella adiacente facendo
scorrere tutte le celle della riga
o della colonna di una posizione, scombinando la struttura
della tabella. Togliendo la cella
di cui abbiamo preso il posto, la
tabella si rimette a posto.
Oltre a consentire maggiore
flessibilit estetica nella riproduzione degli spazi, le celle
espanse svolgono anche una
funzione di controllo sulla porzione di tabella a cui appartengono. Ad esempio, una cella
espansa in orizzontale riunisce
diverse colonne in modo che
queste definiscano le proprie
ampiezze in relazione al raggruppamento prima ancora
che in relazione alla tabella nel
suo insieme. Le celle estese diventano quindi anche uno strumento d'impaginazione, ma
purtroppo risultano persino
pi incostanti nel comportamento rispetto alle celle singole. Un criterio generale che pu
aiutare a orientarsi di consi-
derarle come un livello intermedio tra la tabella e la singola

cella. HTML costruito secondo una logica di concatenazione gerarchica degli attributi tale per cui gli attributi dell'entit
maggiore si trasferiscono alle
entit minori salvo che queste
dispongano di attributi propri
che hanno priorit rispetto a
quelli ereditati dal livello superiore.
Come abbiamo visto, una larghezza impostata a livello di tabella si divide equamente tra le
varie celle a meno che queste
non abbiamo indicazioni dimensionali proprie e queste ultime vengano superate da eventuali assestamenti dimensionali determinati dall'inserimento
di contenuto nella cella stessa.
la logica dell'assegnare priorit agli attributi in cascata. Una
logica che vedremo utilizzata
anche dai Cascading Style Sheet
(fogli di stile in cascata). Le celle espanse, quindi, hanno attributi tra loro pari, perci una
cella espansa pu influenzarne
un'altra e avere la meglio sugli
attributi dimensionali della tabella nel suo complesso. Sono
anche capaci d'influenzare il
comportamento dimensionale
delle righe e colonne che racchiudono a condizione che
queste non contengano indicazioni dimensionali proprie. Per
avere un'idea pratica di come si
comportano, rimandiamo all'articolo Creare tabelle complesse sul CD).
Nidificare le tabelle
Purtroppo anche l'impiego
di celle espanse non sufficiente a coprire tutte le esigenze di layout di una pagina, perci esiste un ulteriore livello di
complessit a cui ricorrere, che
consiste nell'inserire una tabella nell'altra. Di solito sconsigliato spingersi oltre ai tre o
quattro livelli di nidificazione
per non mandare in crisi il
browser che trova sempre difficile interpretare tabelle nidificate. Alcuni consigliano di evitarle del tutto, il che praticamente impossibile se non nelle
pagine pi elementari. Il consiglio di ridurle al minimo e di
nidificare tabelle semplici, possibilmente con dimensioni fisse
(in pixel). Nidificare significa
inserire un'intera tabella all'interno della cella di una tabella
esistente, seguendo le stesse
regole di costruzione usate per
le tabelle normali. Un listato
3a lezione
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 tabelle di contenuto, ma quando
si entra nel dominio delle tabelle nidificate ci troviamo unicamente 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 contribuiscono all'informazione
della pagina, ma servono unicamente per fissare le posizioni
dei vari elementi. Ne consegue
che devono essere invisibili, il
che richiede l'impostazione
uniforme di tre attributi: border="0" per nascondere i bordi
(li si pu tenere visibili come
aiuto nella fase di progettazione, 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 default il browser assegna un bordo di un pixel e una spaziatura
interna ed esterna di 2 pixel
per lato a ciascuna cella, perci
importante ricordarsi di disattivare questi tre elementi
prima di cominciare a costruire
la tabella di layout.
Si comincia sempre col definire 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 consiste nel dimensionare le tabelle nidificate e le colonne di queste ultime, una per una. Spesso
dovrete ricorrere alle immagini
spaziatrici trasparenti per garantire la stabilit degli elementi della pagina, ma si possono
usare allo scopo anche elementi grafici visibili, che possibil-
33/88
mente facciano gi parte del

progetto grafico della pagina.
La generazione di tabelle nidificate semplificata enormemente dall'impiego di editor visuali che consentono di disegnare la pagina col mouse su un
foglio bianco e quindi generano
in automatico tutte le tabelle
necessarie. Rientrano in questa categoria Dreamweaver
MX e Fireworks MX, GoLive
6.0, FrontPage 2002, Namo Webeditor, Hot Metal Pro.
Ciascuno segue un approccio diverso e genera tabelle pi
o meno efficienti. Namo si distingue 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 finale della pagina prima di produrre 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 dell'HTML quante volte si vuole,
per poi darlo in pasto a
Dreamweaver MX. Quest'ultimo dispone di una funzione
propria di generazione grafica
del layout che produce il codice immediatamente, ma permette comunque di modificare
visualmente gli elementi gi generati (per una prova completa
vedi Macromedia Dreamweaver MX, la nave scuola del
Web design sul CD).
Discorso analogo per GoLive
6.0 che trasforma la generazione della pagina Web in una vera
e propria operazione di disegno: c' una tela bianca con
una griglia di riferimento su cui
collocare qualsiasi tipo di oggetto. Ogni elemento rimane
modificabile e la generazione o
rigenerazione del codice HTML
immediata (vedi Adobe GoLive 6.0 maestro di tabelle sul
pagina mantenga la
propria larghezza e
struttura. A sua volta
include una delle altre
tabelle nidificate che
contiene le voci di navigazione globale (home, indice, corsi, eccetera). La seconda area
composta da due tabelle, una nell'altra che
si appoggiano spontaneamente sotto la tabella del logo e che
ospitano la navigazione del CD. La terza
area composta da
due tabelle indipendenti, collocate una
sotto l'altra, che contengono il testo e le
Ecco la stessa pagina visualizzata secondo la
immagini della pagina
struttura del codice HTML della tabella principale.
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
(Precedente Prossiscopriamo che contiene una sola cella in cui trova
mo). La quarta area
posto la prima tabella, quella che contiene il logo.
contiene altre due taQuest'ultima a sua volta si compone di tre righe
nella seconda della quale troviamo un'altra tabella
belle che elencano tutnidificata, che contiene la navigazione globale
ti i link di una particolare lezione. La quinta
CD). FrontPage 2002 genera im- area contiene semplicemente
mediatamente il codice e offre una riga di chiusura.
Tutte e cinque le aree vengopossibilit di modifica sugli elementi essenziali (ne parleremo no tenute al loro posto e collonella prossima lezione). In cate reciprocamente dalla tamancanza di strumenti visuali, bella principale che vediamo
la costruzione del layout passa schematizzata in un grafico geper un lungo processo di codi- nerato con GoLive. L'area 1 ocfica 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 tacor meglio su una stampa del bella invisibile che serve da
spaziatore tra il logo e il resto
progetto grafico della pagina.
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 impomo la struttura di tabelle nidifi- stando la larghezza delle tre cocate usata per le pagine interne lonne successive che ospitano
del nostro corso su CD. Vedia- le aree 2, 3 e 4 composte da almo una tabella generale, che trettante celle contigue nella
avvolge tutta la pagina, all'in- terza riga. La riga quattro conterno 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 notesto e ai contenuti informativi, stro schema, quella che contiele altre riservate agli elementi ne il link alla pagina dei credits.
di navigazione e alla barra orizBench 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 rimanspazi del canovaccio sul CD). diamo agli articoli nel CD: TaOsservando la pagina senza belle nidificate in cascata, Tacontenuti 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.
3a lezione
4 Namo WebEditor 5, per siti statici professionali

onostante la sua matrice
coreana, questo software
ha gi conquistato una discreta popolarit nel mondo
dei Webdesigner grazie al costo ridotto, alla semplicit d'interfaccia e alla precisione del
suo ambiente di sviluppo visuale. 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 abituato. Offre un buon compromesso di funzioni per chi voglia gestire tutte le componenti del sito, dalle pagine agli elementi
grafici e alle animazioni. Il programma offre strumenti per la
generazione di tutti gli elementi grafici di supporto a beneficio dei Webmaster che non siano dotati del tocco artistico.
Pregevole in questo senso la
raccolta di clip art e di siti preconfigurati abbinata al programma.
Il programma concepito
per l'impiego immediato anche
senza lettura del manuale. Le
opzioni sono state ridotte all'essenziale e i parametri di lavoro sono impostati per default ai valori che si reputano
idonei per la maggior parte dei
siti. Il suo ambiente grafico
ottimo per la generazione rapida di prototipi di pagina e di sito. Il progettista trova infatti
un'interfaccia completamente
grafica per "disegnare" gli spazi della pagina (layout) e quindi generare in automatico il codice della tabella che per tradurre tale layout in HTML. La
generazione del codice avviene
solo su comando, una volta
che il disegno della pagina
completo. Fino a quel momento, qualsiasi elemento pu essere modificato, spostato e ridimensionato ed possibile inserire 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 interattivo non offre la potenza che
si trova in Dreamweaver e GoLive, ma in compenso utilizzabile in pochi minuti e pu
soddisfare la gran parte delle
situazioni. Il corredo di funzionalit di Namo WebEditor offre
34/88
Identikit
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 interessante per chi stanco di lavorare con un semplice editor
HTML di tipo testuale, ma non
pronto per il passaggio diretto a Dreamweaver o GoLive e
non si fida del codice generato
in automatico da FrontPage.
Tre modalit di lavoro

Il programma offre due ambienti di lavoro primari: la finestra 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 intervenire direttamente usando
mouse, icone e menu. Alla vista
Modifica possibile aggiungere la modalit Layout per disegnare a mano libera i contorni
degli spazi che vogliamo creare
nella pagina per poi lasciare al
programma la generazione automatica delle tabelle che li
conterranno.
Oltre che in fase di progettazione, la vista Modifica risulta
comoda per aggiungere, modificare e aggiornare qualsiasi
elemento della pagina. Offre
strumenti rapidi per intervenire su testo, immagini e tabelle,
osservando immediatamente i
risultati. Qualsiasi operazione
eseguita in modalit grafica si
trasforma in una modifica sequenza del codice HTML che
pu essere riesaminato entrando in vista HTML.

In tale vista, appaiono evidenziati 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 selezionando le rispettive voci di menu. Non troviamo invece le funzioni di completamento e correzione immediata del tag come negli editor professionali,
ma per lo meno il WebEditor
evidenzia eventuali tag incompleti. Consideriamola una vista
di complemento all'editing visuale, utile per la produzione di
siti statici, ma non per lo sviluppo di siti dinamici, dove la
codifica manuale preponderante e dove servono anche
strumenti per sveltire la scrittura nei vari linguaggi di scripting e dove la digitazione manuale deve raggiungere un elevato livello di precisione e velocit.
Namo WebEditor fornisce
una serie di script gi pronti,
da configurare mediante wizard, per realizzare gli effetti
pi comuni. Non offre tuttavia
strumenti mirati a chi debba
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 questo scopo perci necessario
affiancare altri programmi specializzati come HomeSite oppure uno dei tanti editor gratuiti, come quello che abbiamo
scelto per il nostro corso:
HTML-Kit. Sono invece veloci
ed efficaci invece i suoi strumenti di controllo e ripulitura
del codice gi scritto. I fogli di
stile sono supportati, sebbene
manchi un editor dedicato alla
loro gestione. Il supporto all'HTML dinamico abbastanza
buono. Buone anche le funzioni di controllo del sito nel suo
complesso: il Gestore Risorse
tiene traccia dei vari elementi
disponibili: pulsanti, set di colori, stili, eccetera, mentre il
Gestore Siti aiuta a tener traccia
dei file che compongono un determinato sito e della struttura
di navigazione corrisponden-
3a lezione
te. Da qui possibile eseguire
alcune operazioni che si estendono all'intero sito come la ricerca e sostituzione di testo, il
controllo del codice, la verifica
e correzione guidata dei collegamenti interrotti, la conversione globale dei nomi di file in
lettere tutte minuscole, la pubblicazione in remoto mediante
protocollo FTP. Nella confezione del prodotto sono incluse
anche tre utility: Namo Capture per catturare le immagini a
video, Namo GIF Animator per
creare GIF animate e Namo Slicer per suddividere immagini
troppo grandi in modo che siano visualizzate progressivamente all'interno di una pagina,
pezzo per pezzo, pur mantenendone l'integrit visiva mediante 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 pagine visualizzabili sui telefonini
cellulari multimediali disponibili in Giappone,
ma del resto si tratta di un software
coreano, il che
spiega tutto.

(versione integrale
il corso
sul CD
n. 67
La vista Modifica la pi importante di Namo WebEditor e contiene tutte le funzioni

per la creazione e modifica visuale degli elementi nella pagina
5 Liter per registrare un dominio

uno dei business pi profittevoli della Rete che ha
tenuto botta nonostante la
crisi della new economy. Non a
caso se su Yahoo si cerca lelenco delle aziende che vendono i vari .com o .it si trova un
elenco che conta quasi una cinquantina di nomi. Il motivo si
spiega facilmente. La vendita
di domini non comporta il trasferimento di beni fisici, ma solo il trasferimento di oggetti
digitali. Poi si porta dietro la
vendita di altri servizi e infine il
mercato continua a tirare perch la vendita dei suffissi si rivolge indistintamente a privati
In arrivo il .eu
Appuntamento per lestate 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 lIsoc Europe. Per la
prima volta nella storia di Internet a
decidere chi dovr gestire il registro
del .eu non sar lICANN ma
lUnione europea, alla quale rimarr
la paternit del .eu, che in questo
35/88
e aziende. E soprattutto queste

ultime non possono ormai fare
a meno di avere una presenza
in rete. Tutto questo testimoniato dalla crescita del mercato
che oggi in Italia conta 742.939
domini, una cifra che in Europa
inferiore solo a quella dellOlanda 790.304 del Regno Unito
(3.635.585) e della Germania
che guida la classifica dei paesi
dellUnione europea con
5.666.269. Nonostante il ritardo
nellutilizzo di Internet, lItalia
ha risposto bene allofferta di
domini che nel corso del tempo
si andata ampliando. Dopo i
classici .com, .net e .org e litalinon 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 dellecommerce in quella che, una volta
allargata, sar la terza comunit al
mondo per numero dindividui". 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.
co .it sono arrivati altri domini

come .biz, .info e .name a qualificare ulteriormente la presenza in Rete. Il fatto che non abbiano avuto lo straordinario
successo dei domini generici
che hanno caratterizzato la prima 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 lattivit che si
vuole svolgere in rete o la provenienza geografica di persone
e aziende. Ma vediamo di approfondire tutti i segreti del
mondo dei domini Internet.
Il dominio insieme allindirizzo IP il modo che ci permette
di essere individuati su Internet. Si tratta di una parola (che
pu essere anche lunione di
pi parole) accompagnata da
uno dei suffissi che oggi possibile registrare. Nel caso di PC
Open, per esempio, parliamo di
pcopen.it. Il dominio da registrare in rete deve infatti essere
composto da una sola parola o
da pi parole spezzate anche
da trattini. Vietati apostrofi e
accenti, simboli della punteggiatura e altri caratteri particolari come ad esempio @, &, %.
In generale il dominio deve avere una lunghezza minima di tre
caratteri e massima di 63
(estensioni escluse) e non pu
cominciare o finire con un trattino. A questa regola per ci sono alcune eccezioni. Per i gTLD
(generic Top Level Domain)
quali .com, .net e .org, .biz, .info

e .name, infatti, possibile anche registrare domini di due
lettere.
In Italia i domini possono essere acquistati da chiunque,
persona fisica o giuridica, a patto che faccia parte dellUnione
europea.
La struttura mondiale
della Rete
Prima di affrontare la procedura di registrazione e gli enti
italiani che governano Internet
il caso di disegnare la struttura mondiale della rete. Il vertice
costituito dallICANN (Internet Corporation for Assigned
Names and Numbers), lorganismo che sovrintende allassegnazione 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 approvate, sar formato da 18
membri. Il consiglio sar eletto
da un comitato elettivo e da tre
organizzazioni che rappresentano i gruppi di proprietari di
URL (Universal Resource Locator, l'indirizzo di una pagina
Web su Internet). Sparisce cos
la norma che prevedeva che
cinque membri fossero eletti
dagli utenti della Rete. Una decisione che secondo molti allontana il vertice di Internet dai
bisogni dei navigatori.
AllICANN spetta il compito
di decidere quali siano i nuovi
3a lezione
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 nelladozione
di nuovi domini che hanno causato anche la nascita di societ
alternative delle quali parleremo pi avanti.
Nonostante le proteste,
ICANN rimane il massimo organo di Internet al quale delegata anche la scelta dei registry
dei gTLD, le societ che si occupano 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 comunit Internet dei vari Paesi
con il parere favorevole del governo. Il livello successivo costituito dai registrar o maintainer ai quali i registry appaltano
di solito vendita dei domini. Di
solito si utilizza il termine registrar quando questi soggetti
possono vendere i gTLD e hanno la possibilit di scrivere direttamente nel database di chi
gestisce questi domini. Si tratta
di un privilegio riservato a pochi visto che le societ che possono vantare questa qualifica
sono 110 nel mondo fra le quali
c litaliana Register.it. Molto
pi accessibile la qualifica di
maintainer, il quale vende gli altri suffissi. In questo caso le richieste di registrazione devono
essere inviate allAuthority e
non si accede direttamente ai
database. In Italia si preferisce
utilizzare il termine maintainer.
La Registration Authority
(www.nic.it), che ha sede presso lIstituto per le applicazioni
telematiche del CNR di Pisa, ha
il compito di assegnare e registrare tutti i nomi a dominio
che utilizzano il suffisso .it. La
Naming Authority si occupa invece di stabilire regole e procedure attraverso le quali sono
gestiti i domini.
Requisiti per poter

registrare un dominio
Per registrare i domini .it bisogna possedere una Partita
IVA (per le aziende) o un codice
fiscale (i privati) e avere la residenza in uno dei Paesi dellUnione europea. Le aziende europee possono registrare a loro
nome un numero illimitato di
domini .it, mentre i privati possono registrare a loro nome un
solo dominio .it. Per i domini
36/88
.com, .org e .net non prevista

invece nessuna limitazione anche per i privati.
A meno di offerte particolari
o altri accordi, lacquisto del
dominio vale per un anno. Alla
scadenza di solito (questo dipende dai servizi offerti dalla
societ che vi ha venduto il dominio) lutente viene avvisato e
pu cos procedere al rinnovo o
allabbandono.
Come si registra un dominio

Chi vuole acquistare un dominio .it oltre che essere maggiorenne deve firmare e inviare
via fax (al numero 050/542.420)
o per posta raccomandata ( Registration authority italiana,
Istituto per le applicazioni telematiche del CNR, via Giuseppe
Moruzzi 1, 56124 Pisa) una lettera di assunzione di responsabilit. La lettera pu essere di
solito stampata da Internet nel
sito del maintainer. Lassegnazione da parte della Registration authority non in tempo
reale e segue il principio del first come first served. In sostanza
se due persone o aziende inviano la richiesta di acquisto del
medesimo dominio viene premiata la richiesta arrivata per
prima a Pisa. Per controllare se
un dominio gi occupato, ed
eventualmente chi lha acquistato, bisogna interrogare il database della Registration
Authority. Per farlo bisogna andare sul sito www.nic.it/RA/index.html oppure passare per i
siti delle societ che vendono i
domini che di solito offrono anche la possibilit di interrogare
direttamente il database della
Ra (come Register.it). Per ottenere un dominio sono necessari circa tre-quattro giorni. Una
volta effettuata la registrazione
la Registration authority provveder a rendere tecnicamente
visibile in Rete lutente registrato. In pratica la Ra compie
un atto amministrativo registrando 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 convertire i nomi dei nodi (come
www.pcopen.it) in indirizzi numerici 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 organizzazioni (ad esempio Fiat o Microsoft) i server sono di propriet 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 unaltra
macchina. Il protocollo TCP/IP
permette di effettuare queste
operazioni trasferendo i dati a
pacchetti. I pacchetti sono gruppi
di dati che riportano sempre
lindirizzo del mittente e quello del
destinatario. Lindirizzo 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 senza problemi i sottodomini.

Chi invece deve acquistare
un dominio .com, .net, .org non
deve compilare la lettera di assunzione di responsabilit.
Quando si acquista un dominio
non si entra in possesso per
sempre del nome (il mercato
avrebbe vita breve) ma in sostanza si acquisisce il diritto di
utilizzare quel nome per uno o
pi anni. Il prezzo varia a seconda del suffisso che si intende utilizzare.
Quanto costa?
Lofferta in rete molto varia; si passa da 9,95 a 35 euro
per un .it oppure a 14,95 per un
.com. Dipende dai livelli di rivendita, dalla politica commerciale 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 dominio 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 assicurazione che tutto funzioner per il
meglio.
E in certi momenti un servizio consumatori che funziona e
d seguito immediatamente alle vostre richieste pu essere
molto utile. Quante volte vi siete scontrati con un indirizzo e-
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
allidentificazione dellItalia e i
nomi dei comuni italiani. Gov.it e
governo.it sono riservati al sito
dellesecutivo 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 domini abbinata quella dellhosting. Questo perch acquistare un dominio senza lo spazio
Web non avrebbe grande senso
a meno che non sia un acquisto
di tipo difensivo fatto da societ che in questo modo vogliono cautelarsi dallutilizzo di
nomi che potrebbero corrispondere a marchi che lanceranno in futuro.
Nel caso invece lacquisto
del dominio sia collegato allapertura di un sito necessario
possedere anche lo spazio Web
che spesso porta con s anche
un servizio di hosting. In pratica la societ che ha venduto il
dominio ospita sui propri server le pagine Web del sito e la
posta elettronica.
Anche in questo caso le offerte presenti in Rete sono molto differenti e prima di scegliere
il caso di leggere attentamente le voci del contratto con i relativi servizi e soprattutto avere ben chiaro in mente cosa si
vuole fare con il proprio sito. Se
le ambizioni, per il privato o lazienda, si traducono semplicemente nel primo passo su Internet con un sito dedicato alla
famiglia o una vetrina delle attivit aziendali non il caso di
spendere molti soldi.
Lo spazio gratuito spesso
concesso con lacquisto di un
3a lezione
dominio pu essere sufficiente.
Pochi MB bastano per foto e testi, poi quando le idee saranno
pi chiare e i progetti su Internet pi definiti, si potranno
chiedere spazi pi ampi.
inutile farsi abbagliare da
offerte mirabolanti con spazi
infiniti che non saranno mai utilizzati. Meglio concentrarsi su
elementi pi importanti come
laffidabilit del sistema e i margini di autonomia che possiede
lutente per effettuare le operazioni di configurazione del suo
sito. Quanti sono i server a disposizione? Qual il livello di
sicurezza della connettivit?
Sono queste alcune domande
da porsi (anche in relazione al
tipo di progetto che avete intenzione di realizzare sul Web)
quando si affronta la scelta dellhosting. Tenendo presente
che laspetto principale quello della vostra autonomia.
Lutente deve infatti avere la
possibilit di muoversi a proprio agio nel suo sito senza dover avere la necessit di chiedere via e-mail modifiche o altro. Questo per non esclude
che lesistenza di un eccellente
servizio ai consumatori che
aiuti i navigatori in difficolt sia
un altro elemento importante
nella scelta dellhosting. Per
quanto riguarda la scelta di una
piattaforma Linux o Windows
una questione che pu interessare soprattutto chi ha in programma lallestimento di siti
complessi che prevedono relazioni con i database. In caso
contrario la piattaforma ha poca importanza.

Luigi Ferro
37/88
Quando ti rubano il sito

nni fa gli squatter occupavano le case. Poi arrivata Internet e qualcuno
ha pensato fosse il caso di occupare anche il Web. Nasce
cos il cybersquatting, loccupazione abusiva di domini. In
pratica, il furbo di turno, decide di acquistare un dominio
che guarda caso uguale al
nome o al marchio di unazienda. Di solito lo fa solo per
poi rivenderlo a caro prezzo
ma pu anche utilizzarlo per
sfruttare la notoriet del marchio.
Cos un mcdonald.it pu diventare per esempio un sito
per parlare male degli hamburger o cocacola.it per dire
quanto fanno male le bibite
gassate. Peccato per che,
passata lequiparazione del
nome a dominio con il brand,
questa pratica non sia legale.
Internet non il selvaggio West dove vige la legge del pi
forte o semplicemente di chi
arriva prima, ma un luogo virtuale con regole assolutamente reali. Per questo motivo si
proceduto a varare norme
precise per dare ai domini i legittimi proprietari. Le procedure di rassegnazione dei nomi a dominio sono denominate MAP (Mandatory Administrative Proceeding) e sono
attivate da Enti conduttori
che hanno ricevuto lautorizzazione a operare dalla Naming Authority. Il procedimento avviato dagli enti con-
duttori ha natura amministrativa e non esclude quindi la

possibilit di ricorrere alla
magistratura ordinaria. A vantaggio di questa soluzione,
per, c la velocit della procedura. Secondo le regole stabilite dalla Naming Authority
possibile ricorrere sotto tre
condizioni:
1) quando il nome a dominio utilizzato da un terzo sia
identico o tale da indurre a
confusione rispetto ad un marchio 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 stato registrato e venga utilizzato
in mala fede.
Chi ricorre potr ottenere la
rassegnazione del nome a dominio in caso di presenza contemporanea della prima e terza condizione e il presunto cybersquatter non provi di avere
diritto o titolo in relazione al
dominio contestato. Per quanto riguarda il secondo punto
per poter continuare a utilizzare il dominio il resistente (colui
che ha acquistato il nome a dominio oggetto della contesa)
deve dimostrare di:
a) aver utilizzato o di essersi oggettivamente preparato
ad usare, in buona fede, il nome a dominio o un nome ad
esso corrispondente per offer-
ta al pubblico di beni e servizi,

prima di aver avuto notizia
della contestazione;
b) essere stato conosciuto,
personalmente, come associazione o ente commerciale con il
nome corrispondente al nome a
dominio registrato, pur non
avendo registrato il relativo marchio;
c) aver effettuato un legittimo uso commerciale o non
commerciale, del nome a dominio, senza l'intento di sviare
la clientela del ricorrente o di
violarne il marchio registrato.
In base a queste regole lo stilista Giorgio Armani non ha potuto prendere possesso del nome a dominio armani.it, gi registrato dal timbrificio Armani,
mentre la Warner Village Cinema ha ottenuto Warnervillage.it.
www.nic.it/NA/maps/ lindirizzo presso il quale si trovano i link agli enti conduttori per
i
domini
.it,
mentre
www.icann.org/udrp/approved-providers.htm laltro indirizzo per i domini .com, .net,
org.
I costi della procedura, a carico del ricorrente, variano a
seconda di quanti saggi fanno
parte del collegio e possono
andare per esempio da 800 euro (un dominio con un saggio)
fino a 2.240 (un dominio con
tre saggi). La decisione deve
pervenire entro sessanta giorni dalla data di presentazione
del reclamo.

L.F.
4a lezione
Progetto
Web Master
di Roberto Mazzoni
1 Stile e struttura: usare i tag HTML nativi

elle lezioni precedenti
abbiamo visto come progettare e realizzare un sito statico e come strutturare
pagine modello da utilizzare
come elemento standard per
conferigli una certa omogeneit di layout e di navigazione.
Adesso arrivato il momento di versare il contenuto, cominciando dal testo che costituisce di gran lunga l'elemento
pi comune di un sito e di conseguenza prevede anche la pi
grande variet di tag, ciascuno
con funzioni specifiche.

La gestione del testo solleva
una questione che avevamo
gi anticipato all'inizio del corso, vale a dire la differenza tra
marcatori strutturali e marcatori stilistici.
HTML, infatti, nasce in origine come linguaggio strutturale. I suoi tag servono a indicare il ruolo che un determinato componente svolge all'interno della pagina e non il modo in cui questo debba essere
rappresentato.
Spetta al browser decidere
in che modo visualizzarlo, basandosi sulle caratteristiche

del computer e sulle eventuali
preferenze indicate dall'utente. Tuttavia, l'impiego dei soli
tag strutturali codificati nelle
prime due versioni di HTML
produceva pagine esteticamente orribili, del tutto inadatte 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-
velli consecutivi cos da determinare una struttura gerarchica di titoli e sotto-titoli:

<h1></h1> seguito da <h2>
</h2> eccetera.
Bench offra un sistema
pratico per strutturare documenti di tipo scientifico, produce una visualizzazione del
tutto sproporzionata rispetto
al testo normale, identificato
dal tag <p>, decisamente brutta a vedersi.
Inoltre n <h#> n <p> consentono di variare il tipo di
font utilizzato nella pagina e il

Lezione 1:

sul CD)
Lezione 3:
il corso
sul CD
n. 68

Le risorse on line
Organizzazione delle informazioni
ipertesto, struttura lineare
Strumenti di navigazione
Sistemi di navigazione
Sistemi di labeling
Lezione 2:

(disponibile integralmente sul CD)
La tabella come elemento strutturale
Progettare layout fluidi e statici
di layout
NamoWeb Editor5: per siti statici
professionali
consecutive
Template con struttura complessa
Template con tabelle nidificate
Esercizi

sul CD)
Adobe GoLive 6.0
vergine
38/88
Cosa si pu fare con i fogli stile

Quattro tipi di CSS
I colori del Web
Gestire le immagini
Esercizi
Versioni integrali e complete
degli articoli pubblicati sulla rivista
Ereditariet e innesco a cascata
Propriet di trasferimento dei parametri
Regole di ereditariet
Selettori di classe
Websafe palette
Le prossime puntate
Lezione 5:
Lezione 4:
Lezione 6:
HTML 4.01 e CSS
Siti interattivi
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
Lezione 7:
Lezione 8:
Promuovere il sito
4a lezione
relativo colore, e ben sappiamo che testi uniformemente
neri e tutti con carattereTimes
Roman non facilitano il riconoscimento e la lettura "tipografica" di una pagina editoriale. Anzi, Times Roman nato per funzionare bene sulla
carta, mentre rende male sullo
schermo.
Esistono invece font concepiti espressamente per il Web
che sono ormai riconosciuti
da tutti i browser e che facilitano la lettura a video, un
esempio in tal senso il Verdana, evoluzione telematica dello storico Helvetica.
Tag e attributi deprecati

L'esigenza di fornire elementi per il controllo della visualizzazione a video del testo
ha portato all'inserimento nel
linguaggio HTML di marcatori

e attributi con funzioni unicamente 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 nascere i primi siti editoriali e i
grandi portali, ma il loro impiego indiscriminato ha portato a pagine complesse da gestire, 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 riportare ordine mantenendo compatibilit con i precedenti tag stilistici, ma offrendo un'alternativa attraverso l'impiego di
uno strumento aggiuntivo: i fogli di stile in cascata (Cascading Style Sheets).

Purtroppo, come ben sappiamo, i produttori di browser
non sempre dedicano la massima priorit all'adeguamento
nei confronti degli standard e
perci a tutt'oggi il supporto
per i fogli di stile non completo.
Tuttavia gi possibile rimpiazzare il tag <font> quasi
ovunque e la specifica 4.01 ci
aiuta a trovare la giusta transizione per arrivare a tale risultato, identificando attributi e
tag deprecati e indicando come e dove sostituirli.
Naturalmente non obbligatorio sposare i fogli di stile e
ci sono ancora molti siti in circolazione che impiegano liberamente il tag <font> e molti al-
tri artifici deprecati. Funzionano e continueranno a funzionare anche in futuro, ma limitano moltissimo l'evoluzione
verso lo standard XML (eXtensible Markup Language) che
impone il massimo rigore nella
separazione tra informazioni
di struttura e informazioni stilistiche.
Di fatto, scoprirete che l'impiego dei fogli di stile offre soluzioni pi eleganti e pi gestibili rispetto ai corrispettivi tag
stilistici del vecchio HTML 3.2,
ma bisogna conoscerne le sfumature e sapere come farli
convivere al fine di garantire la
massima compatibilit con i
vari tipi di browser in circolazione.
Markup fisici e logici

Cominciamo con l'esamina-
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
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
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
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.
4a lezione
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)
l'evidenziazione di una parola

o di una frase rispetto al resto
del paragrafo. possibile realizzarla mediante due tag fisici: <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 obbligatoriamente un testo in grassetto e un testo corsivo (difficilmente leggibile a video), nel
secondo caso gli diciamo semplicemente di rafforzarne la visualizzazione oppure di enfatizzarlo, lasciandolo libero di
scegliere il modo pi idoneo
per farlo.
Nella pratica, <b> e <strong>
produrranno entrambi un testo in grassetto e <i> ed <em>
produrranno entrambi un testo 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-
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 questo tipo come nel caso del sottolineato e del barrato che si
ottengono rispettivamente
con i due tag fisici <u> e <s>,
ma che possono essere riprodotti anche con due nuovi tag
specifici di HTML 4.01: <ins> e
<del>. Il primo indica concettualmente
l'inserimento
d'informazioni che potrebbero
essere temporanee e che devono essere verificate oppure
che potrebbero cambiare in
futuro, il secondo indica invece la cancellazione visiva del
brano d'informazione che racchiude. Vediamo perci che
l'impiego di tag logici aggiunge
significato al semplice effetto
grafico e che tale significato
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 è notate che l'entit comincia sempre con
& e termina con il punto e virgola
pu quindi essere utilizzato all'interno di programmi di lettura automatica delle pagine

Web (vedremo meglio questo
genere di applicazioni quando

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
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
all'interno della pagina HTML
(ripetendolo per ogni singolo
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
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
4a lezione
parleremo di XML). Nella tabella "Marcatori per formattare il testo" trovate una sintesi
di tutti i tag compatibili con
HTML 4.01 per modificare l'aspetto e il significato di un
blocco di testo.
Ma cosa succede quando
decidiamo d'intervenire su interi blocchi di testo modificandone, ad esempio, font, colore, dimensione, allineamento e posizionamento rispetto
ad altri elementi?
Dobbiamo decidere se seguire la vecchia strada dei tag
stilistici oppure abbracciare la
nuova dei fogli di stile.
Vediamo innanzi tutto la prima soluzione, cio cosa si pu
fare utilizzando i tag e gli attributi 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 creare celle completamente vuote
anche se servono al fine di
creare spazi bianchi, il consiglio di riempire il paragrafo
con almeno uno spazio bianco
non eliminabile, che in HTML
viene generato con l'entit
(non breaking space di
cui parliamo pi dettagliatamente in un riquadro a parte
"Gestire gli spazi nel testo").
Nell'HTML 3.2 il tag di chiusura </p> facoltativo, ma diventa obbligatorio in XHMTL
1.0 (la versione di HTML che
consente l'impiego delle funzioni avanzate di XML). L'attributo "storico" del tag <p> deprecato da HTML 4.01 align
che regge i parametri: left, center, 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
neare il testo al bordo sinistro,

destro oppure al centro della
pagina.
Nel caso non volessimo inserire una riga vuota al termine del paragrafo, ma semplicemente andare a capo oppure volessimo inserire diverse
righe vuote consecutive, utilizzeremmo 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 marcatore fisico pi importante per la "tipografia" sul
Web, <font> che regge diversi attributi di cui i principali
sono: face per indicare il tipo
di carattere, size per definirne
le dimensioni e color per specificarne il colore.
Il tag non tiene conto della
struttura del documento perci potete attribuire un font a
una singola lettera, a una singola parola o porzione della
stessa, a frasi e paragrafi inte-
nidificazione di se stesso, vale a

dire che potete inserire diversi
<blockquote> uno dentro l'altro al
fine di produrre rientri sempre pi
profondi, usando una sintassi del
tipo <blockquote>Primo rientro
<blockquote>Secondo rientro
I vari effetti che possiamo creare

mediante l'allineamento del testo a livello
di paragrafo e l'applicazione del tag
<font> per modificare il tipo, il colore e la
dimensione del carattere. Il tag <font>,
deprecato da HTML 4.01, prevede sette
dimensioni assolute diverse per i
caratteri pi un'impostazione relativa che
va da 7 a + 7 e ingrandisce o
diminuisce il carattere pre-impostato nel
browser
ri oppure a tutta la pagina.

Il suo effetto viene unicamente delimitato dalla posizione dei tag di apertura e
</blockquote></blockquote>. Il
problema di questo approccio
che richiede l'impiego di un
marcatore strutturale, nato per
evidenziare delle citazioni, per uno
scopo stilistico che in origine non
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
4a lezione
chiusura: <font> e </font>. L'unica eccezione in questo senso, come vedremo, sono le tabelle che richiedono di indicare il tag <font> per ogni singola
cella anche nel caso in cui i parametri 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 qualora questo non fosse disponibile 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 significati diversi. Il primo stabilisce una dimensione fissa
dove il default 3 e corrisponde alla dimensione base assegnata dal browser al testo (circa 10 pixel).
Il secondo stabilisce invece
il livello d'ingrandimento o riduzione rispetto al valore di
default (3 appunto), perci 1
corrisponde a 2, +1 corrisponde a 4, eccetera.
In entrambi i casi si tratta di
valori dinamici, vale a dire
sensibili all'impostazione del
browser per visualizzare il testo.
Se per esempio l'utente dovesse scegliere da Internet Explorer il parametro Visualizza
> Carattere > Grande tutta la
scala di valori verrebbe alzata
di un livello, se invece scegliesse Visualizza > Carattere >
Molto piccolo tutta la scala di
valori verrebbe ridotta di due
livelli. Il valore di default per il
browser corrisponde naturalmente a Visualizza > Carattere
> Medio.
Perci impostando la dimensione del carattere usando <font size> lasciamo libero
l'utente d'ingrandire e rimpicciolire il testo a piacere a seconda delle sue necessit di
visione. Color infine accetta,
come qualsiasi altro tag che
preveda l'uso del colore, il nome di uno dei sedici colori codificati in HTML oppure il codice esadecimale della tinta
scelta, che di solito viene prelevata da una palette di 216 colori cosiddetti sicuri, cio visualizzabili senza alterazioni
in qualsiasi tipo di browser sia
su Windows sia su Macintosh
(per un riferimento vedi
http://www.webmonkey/ reference/color_codes/ e il riquadro "Colori sicuri").
Nell'impiego del tag <font>
42/88
Marcatori per formattare il testo

Tag fisici
Tag logici
Effetto visibile
Significato
<b>
<i>
<u>
<s>
<pre>
<strong>
<em>
<ins>
<del>
evidenziato
evidenziato
inserimento temporaneo
cancellazione visibile
testo preformattato
<tt>
<kbd>
<samp>
<code>
grassetto
corsivo
sottolineato
barrato
monospaziato con riporto di tutti gli
spazi e ritorni a capo presenti nel
documento originale e con riga vuota
sopra e sotto. Conserva grassetti
e corsivi.
monospaziato
monospaziato
monospaziato
lampeggiante (Netscape)
corsivo e ritorno a capo
corsivo
rientro con riga vuota sopra e sotto
aumento dimensioni corpo
riduzione dimensioni corpo
testo a pedice
testo ad apice
nessuno
nessuno
nessuno
corsivo
aumento dimensioni e spaziatura
<blink>
<address>
<cite>
<blockquote>
<big>
<small>
<sub>
<sup>
<abbr>
<dfn>
<q>
<var>
<h1>-<h6>
testo non formattabile

testo campione
codice programma
evidenziato
indirizzo
citazione
citazione a blocco
testo grande
testo piccolo
pedice
apice
abbreviazione
definizione termine
citazione in paragrafo
nome di variabile
titolo e titolini
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 funzionamento 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'intero documento contenuto all'interno di un tag <font> che
specifica il tipo Verdana, il colore rosso e una dimensione
pari a quattro (+1).
I primi due attributi si mantengono costanti per l'intero
documento poich non modificati dai tag <font> successivi,
mentre varia invece la dimensione, indicata nel tag che
pi vicino alla porzione di testo a cui si applica.
Si dice quindi che gli attributi si applicano in cascata
con i livelli superiori che influenzano tutto ci che contengono, ma che possono essere modificati dai livelli inferiori 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
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,

ma richiede una formattazione
particolare, come nel caso delle liste. HTML prevede una serie di marcatori specifici per
queste esigenze: <ol> (ordered
list) e <ul> (unordered list) delimitano una lista le cui voci
sono rispettivamente numerate e non numerate.
Ciascuna voce della lista
viene poi identificata mediante la coppia di tag <li></li> (list item). Nel caso di liste nu-
merate possibile determinare il tipo di numerazione in

uso (araba, romana, lettere) e
la lettera o numero da cui far
partire l'elenco.
Nelle liste non numerate invece possibile evidenziare
ogni singola riga con un pallino (default), un quadrato o un
cerchio. Tutte le impostazioni
stilistiche previste dal tag
<font> si applicano alle liste,
come pure alle tabelle che
contengano testo.
4a lezione
2 CSS e HTML 4.01

Cascading Style Sheets (fogli
di stile in cascata) costituiscono lo strumento pi importante per gestire gli attributi tipografici di un sito moderno. Sebbene esistano fin al
1996, hanno trovato la loro diffusione 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 superiore a quella possibile mediante i tag fisici di HTML, raggruppare tutte le informazioni
stilistiche di un sito all'interno
di un documento che venga caricato una sola volta per quel
particolare sito, alleggerendo
le singole pagine e facilitando
eventuali modifiche e aggiornamenti. Basta cambiare una
delle voci contenute nel foglio
di stile affinch la variante si
propaghi immediatamente su
tutte le pagine del sito che contengono quel particolare elemento.
Purtroppo i browser fino alla
generazione 4 non erano compatibili con le funzioni dei CSS
e perci si dovuto aspettare
la diffusione capillare della generazione 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 considerare tramontata la stagione
dei vari Internet Explorer 4.0 e
Netscape 4.x, tanto vale abbandonare l'impiego dei tag fisici,
in particolare <font> e abbracciare 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 accompagnavano le diverse famiglie di browser, diventa possibile realizzare soluzioni tipografiche 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 progettista di siti la separazione degli attributi tipografici e stilistici dalle componenti strutturali
della pagina, soprattutto in siti
di tipo dinamico.
Tale separazione importante per raggiungere un adeguato livello di efficienza nella
gestione del sito. Infatti, fintantoch gli elementi stilistici sono mescolati con il codice
HTML, necessario chiamare
in causa il Webmaster per ogni
singola modifica estetica, modifica 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 colore di sfondo e le font del testo
sono indissolubilmente legate
ai tag del linguaggio di scripting che fa funzionare la pagina
in abbinamento al database.
Ogni modifica nell'aspetto
della pagina diventa perci costosa e impegnativa, tanto da
scoraggiare la revisione stilistica di molti siti che non riescono perci a migliorare la propria usabilit, la propria navigabilit e la propria estetica
sulla scorta delle informazioni
raccolte dai navigatori durante
l'uso del sito.
I CSS sono il primo strumento che ha consentito di separare 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 eseguito dai tecnici.
Inoltre, fornendo una gamma di opzioni tipografiche molto ampia, ha consentito anche
a chi non creativo di produrre risultati presentabili e gradevoli, con poco sforzo.
La nascita dei fogli di stile e
dell'HTML 4.0 risolve anche
una stortura concettuale introdotta nel Web con il rilascio
della versione 3.2 di HTML che
ha rinnegato la natura originale
del linguaggio, nato per controllare la struttura e non la
presentazione di una pagina,
per assecondare i desideri dei
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,

creando cos enormi problemi
di compatibilit e di manutenibilit dei siti, per non parlare
della loro usabilit.
Tuttavia i Cascading Style
Sheets non si limitano agli attributi tipografici, bens consentono di posizionare con precisione gli elementi sulla pagina,
sostituendosi alle tabelle come
metodo per definire il layout, e
introducono anche una certa
dose d'interattivit nella pagina, facilmente accessibile anche da chi non conosce linguaggi di programmazione come JavaScript.
Relazione
tra CSS e HTML
I fogli di stile definiscono un
insieme di regole per indicare il
tipo di formattazione da applicare ai contenuti di una pagina
stampata o visualizzata elettronicamente. Nascono concettualmente nel mondo dell'editoria dove, per semplificare il
lavoro, gli attributi tipografici
di un libro vengono definiti prima d'iniziarne la stesura e vengono mantenuti separati dal testo vero e proprio cos da poter essere applicati in modo
uniforme a pi testi della stessa collana e poter essere modi-
ficati rapidamente senza dover

ripassare a mano ogni singola
pagina del volume.
Nel Web costituiscono un
complemento di HTML e si
sposano con i tag di quest'ultimo in modo abbastanza semplice e intuitivo. Per aggiungerli alla pagina basta digitare
codice aggiuntivo che non interferisce con il codice HTML
originale il quale viene comunque riconosciuto senza problemi dai browser di vecchia
generazione. In effetti persino possibile combinare nella
stessa pagina CSS e marcatori
fisici, come ad esempio <font>,
al fine di avere la piena compatibilit con tutti i tipi di
browser in circolazione, sfruttando al tempo stesso le funzioni evolute dei fogli di stile.
In tal caso, la pagina avr un
aspetto pi gradevole quando
visualizzata da un browser di
generazione 5 o 6, ma sar comunque utilizzabile su un
browser di generazione 4.
Le tre funzioni primarie di
un foglio di stile sono: impostare gli attributi tipografici del
testo, definire un livello e la sua
posizione nella pagina (vedremo pi avanti di che si tratta),
modificare le caratteristiche
originali dei tag HTML.
4a lezione
3 Cosa si pu fare con i CSS

ispetto ai markup fisici di
HTML e in particolare al
tag <font>, i fogli di stile in
cascata offrono moltissime
possibilit, tanto che uno studio di tutte le loro funzioni richiederebbe un impegno paragonabile a quello speso per imparare HTML. A differenza di
quest'ultimo, per, i fogli di stile possono essere conosciuti
un po' alla volta, esplorandone
le funzioni a mano a mano che
se ne presenti l'occasione e aggiornando il sito gradualmente,
ogni volta che si scopra qualcosa di nuovo.
C' anche un altro motivo
per procedere con calma: la
gran parte dei browser in circolazione 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 contenuti multimediali. Di conseguenza conviene partire studiando 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'adozione dei CSS l'aggiunta di
un nuovo linguaggio alla propria cassetta degli attrezzi e al
proprio sito, con la necessit
d'imparare complesse regole
astratte che governano ereditariet ed effetto a cascata. Si
producono talvolta anche effetti imprevedibili e incostanti,
difficili da diagnosticare e risolvere anche per i limiti di
molti editor HTML oggi in circolazione, non dotati di specifiche utilit per la gestione dei
CSS. L'unico programma che
contenga una funzione diagnostica specifica per i CSS Top
Style 3.0, che funge anche da
editor testuale per pagine
HTML, senza tuttavia rimpiazzare un vero e proprio ambiente visuale. Di conseguenza costituisce un investimento aggiuntivo.
La natura tipografica
degli stili
Il primo ambito d'intervento
dei fogli di stile nell'impostazione 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 lettera, usando diverse unit di
misura, il peso delle stesse
(sottile, normale e grassetto),
la spaziatura, l'interlinea, eventuali bordi, attributi come il
corsivo e il maiuscoletto, effetti particolari come il sottolineato, il barrato e molto altro
ancora.
Nel caso si tratti di testo usato per collegamenti ipertestuali, 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 automatica delle specifiche a tutte le pagine. Anche la gestione delle
tabelle viene potenziata e semplificata enormemente, potendo definire attributi globali a livello di tabella, di riga e di cella.
Per comprendere i vari termini usati nella definizione di
questi attributi bisogna conoscere un po' di tipografia. Tanto per cominciare, la propriet
pi comune, font-family, descrive la famiglia di font scelte
per quel particolare brano di
testo. Si parla di famiglia poich si compone di tanti insiemi
di caratteri con dimensioni diverse, ciascuna delle quali
prende il nome di font. Tipograficamente, quando s'ingrandisce un carattere o lo si rimpicciolisce, si cambiano anche
le caratteristiche delle varie
lettere che lo compongono per
adattarsi al diverso effetto visivo prodotto dalle nuove dimensioni.
La scelta di una singola font
all'interno della famiglia avviene quindi mediante la propriet
font-size che identifica l'altezza
delle lettere maiuscole per il
particolare insieme che abbiamo scelto. Tale altezza pu essere espressa in pixel, bloccando 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 funzioni di dimensionamento pre-
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 svantaggio di complicare la vita a chi

abbia difficolt di lettura e di
rendere imprevedibile l'effetto
in stampa. In alternativa i CSS
offrono altri due tipi di unit di
misura: assolute e relative. Le
unit assolute definiscono un
valore rigoroso, alla pari dei
pixel, ma facilmente riconoscibile anche dalla stampante: millimetri, centimetri, pollici, pica
e punti (un pica corrisponde a
12 punti tipografici).
Queste ultime due sono entrambe unit di misura tipografica e sono da preferirsi alle misure in pixel se volete anche
stampare le pagine Web su carta senza sorprese. Nella pratica
9 punti corrispondono a 12
pixel (la misura pi leggibile
per un testo lungo sia a video
sia in stampa), 8 punti corrispondono a 10 pixel, una misura adatta per le didascalie, e via
di questo passo. Le unit relative lasciano invece libero l'uten-
te di ridimensionare il proprio
testo, mantenendone tuttavia
le proporzioni rispetto al resto
della pagina. Si prestano alla
creazione di effetti speciali.
Ad esempio possiamo decidere di impostare il testo grassetto in modo che sia leggermente pi grosso del testo normale utilizzando l'unit di misura em che in tipografia indica
le dimensioni della M maiuscola di un determinato font, in
pratica la lettera pi larga dell'intera font rispetto alla quale
si misurano tutte le altre. Impostando il grassetto in modo
che sia 1.1 em avremo un grassetto pi corposo perch leggermente pi grande della font
normale. Basta indicare b {fontsize: 1.1 em} perch tutti i caratteri bold dell'intero sito, non
importa quale font e quale dimensione, vengano maggiorati
del 10% rispetto agli altri caratteri del testo in cui sono contenuti: una finezza facile da rea-
4a lezione
per alcuni casi,
con le versioni pi
recenti.
Quattro tipi di CSS

Esistono quattro
modi diversi per
innestare un foglio di stile all'interno di una pagina HTML.
Il primo, che
prende il nome di
foglio di stile
esterno, il pi
diffuso e consiste
nell'aggiungere
Incorporare un foglio di stile nella pagina: usando invece il
nell'intestazione
marcatore <style> possibile definire un foglio di stile che
della
pagina
vale solo per quella pagina particolare. Qui notiamo che il
nostro foglio ipotetico contiene un elemento definito, table, (<head>) un link
che indica il tipo, la dimensione e il colore nero del testo
al documento che
da usare nelle tabelle contenute nella pagina. Seguono poi
contiene il foglio
quattro classi generiche (dida, rosso, bianco e blu)
di stile (un semcorrispondenti ad altrettante varianti del testo da usare
plice documento
mediante il marcatore <span></span> direttamente
all'interno del testo della tabella. Ne vediamo un esempio
di testo) affinch
nella Websafe palette integrata nel CD
quest'ultimo venga caricato assieme alla prima palizzare che pu migliorare la gina del sito. Mediante tale apleggibilit del testo.
proccio possibile definire un
A qualsiasi elemento HTML, singolo foglio di stile per l'intetesto compreso, possibile poi ro sito e beneficiare della masabbinare bordi, sfondi colorati sima flessibilit di modifica dei
addirittura immagini di sfon- parametri. Il tag da utilizzare in
do, con un controllo molto pre- questo caso <link> con l'indiciso sulla forma e la posizione cazione del tipo di relazione
degli stessi.
tra i due documenti (attributo
Ad esempio possiamo realiz- rel) la posizione del foglio di
zare un testo bordato solo su stile (attributo href) e la sua
tre lati. anche possibile infine natura (type="text/css").
determinare con precisione la
La dicitura completa per inposizione degli elementi ri- serire il foglio usato nelle pagispetto ad altri elementi conti- ne del nostro CD la seguente:
gui e rispetto al canovaccio <link
rel="stylesheet"
complessivo della pagina.
href="/zzz/stili.css"
Purtroppo tutta questa li- type="text/css">, il valore di
bert ha un prezzo: la poten- href (hypertext reference) qui
ziale incompatibilit con i indicato per la home page e
browser pi vecchi e anche, cambia al variare della posi-
Riepilogo dei concetti della Lezione 4

1. Quali sono i marcatori pi importanti per il testo e
dove si usano rispettivamente?
2. Che differenza c' tra un marcatore o tag fisico e un tag logico?
3. Come si pu allineare il testo all'interno di una pagina? Si
possono usare spazi bianchi multipli?
4. Che differenza c' tra HTML 4.01 e XHMTL 1.0?
5. Che cosa sono i CSS e a che cosa servono?
6. Cosa si pu fare con i CSS?
7. Come funziona il meccanismo dell'ereditariet?
8. In che modo si pu inserire un foglio di stile all'interno della
pagina?
9. Se il browser non supporta le funzioni dei CSS che cosa
succede?
10. Che cos' la Websafe palette?
11. Che tipo d'immagine pu entrare nella pagina di un sito?
(le risposte le trovi a pagina 40)
45/88
Inserire un foglio di stile esterno: nella gran parte dei siti che usano CSS il foglio di
stile centralizzato. Lo si collega a ogni singola pagina mediante il tag <link> seguito
da un serie di attribiti obbligatori tra cui il riferimento ipertestuale (href) alla posizione
dello stile nel sito
zione delle varie pagine nella

struttura di directory del sito.
Il tag <link> va inserito nell'intestazione di ciascuna pagina,
al termine della zona compresa dalla coppia di tag <head>
</head>.
Il secondo modo per inserire un CSS nella pagina prende
il nome di foglio di stile incorporato e consiste nel digitare
la descrizione del CSS per intero all'interno dell'intestazione
della pagina, racchiudendola
entro di uno speciale tag concepito allo scopo: <style>. In
questo caso, il foglio di stile vale solo per quella pagina particolare e dovremo aprire la pagina ogni volta che bisogner
modificarlo, tuttavia avremo
comunque il vantaggio di trovare tutte le informazioni stilistiche racchiuse in un solo
punto del documento anzich
sparpagliate in mezzo ai tag
del contenuto.
Il terzo modo prende il nome di foglio di stile importato e
costituisce una via di mezzo
tra i due definiti prima, il foglio
viene incorporato nell'intestazione della pagina mediante il
tag <style>, per proviene da
un singolo documento centralizzato, identico per diverse
pagine. un sistema usato di
rado anche perch mal supportato da alcuni browser.
Il quarto tipo di CSS prende
il nome di foglio di stile in linea
(inline) e viene inserito direttamente all'interno di un particolare elemento della pagina,
come ad esempio nel tag di
paragrafo <p> oppure nel tag
divisionale <div> oppure nel
tag di tabella <table> utilizzando l'attributo style seguito dalla definizione delle propriet
che vogliamo attribuire a quel
particolare elemento rispetto
alle specifiche generali del foglio di stile esterno oppure incorporato. Da notare che mediante l'uso del tag <div> oppure <span> possibile applicare un foglio di stile a una
porzione liberamente definita
del documento (da una sola
lettera a un'intero blocco di
paragrafi). Un esempio sareb-
be: <p style="font-family: Times;

font-size: 18px"> che dice al paragrafo corrente di visualizzare il testo in Times a 18 pixel.
Se volessimo realizzare lo stesso effetto non sul paragrafo,
bens su una porzione pi piccola di testo useremmo <span
style="font-family: Times; font-size: 18px">testo da modificare
</span>.
Le regole
di costruzione dei CSS
Ogni regola dei CSS si compone di due parti: il selettore e
la dichiarazione. Il selettore,
posizionato a sinistra, definisce le parti del documento a
cui applicare lo stile. La dichiarazione, sulla destra e separata dal selettore mediante
due punti, indica le varie propriet e i valori per tali propriet. Il selettore pu corrispondere a uno degli elementi
nativi di HTML, in tal caso parleremo di selettore di tipo. Il
selettore h1, ad esempio, indicherebbe che lo stile si applica
a tutti i titoli di primo livello.
La dichiarazione ospita invece
tutti i possibili attributi stilistici previsti per quel particolare
oggetto.
Ad esempio, h1 { font-family:
Verdana, Arial, Helvetica, sansserif; font-size: 16px; color:
#003399 } indica che i titoli delle nostre pagine saranno visualizzati con il font Verdana,
oppure in alternativa con Arial,
Helvetica o con un qualsiasi
font di tipo san serif (senza
grazie le grazie sono gli arrotondamenti che si notano alle
estremit delle lettere di alcune font aggraziate, come il Times Roman e che servono per
facilitare la lettura su carta,
ma che mancano invece nelle
font di tipo "bastone" che sono
lisce e senza ghrigori e risultano pi facili da leggere a schermo).
La regola indica inoltre che
il titolo dovr avere una dimensione di 16 pixel (il valore
preciso, impossibile a definirsi con il tag <font>) nonch
un colore blu. Notate che la regola si apre e si chiude con una
4a lezione
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 regole quanti sono i tag che pensiamo di utilizzare nelle pagine
del nostro sito e alla fine otterremo un file di testo che pu
vivere indipendentemente all'interno del sito medesimo,
oppure essere incorporato nelle singole pagine.
Cos come ci si possono essere molte propriet per un
singolo selettore, possono altres esserci numerosi selettori per una singola propriet. Infatti la regola h1,h2,h3,
h4,h5,h6 { color: #003399 } ci dice che tutti i titoli e titolini del
nostro sito saranno blu.
Se volessimo invece modificare uno specifico tag all'inter-
no di una pagina la sintassi diventerebbe: <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 riconoscono i fogli di stile, il tag
<h1> dell'esempio verr interpretato normalmente, ignorando l'attributo style.
Esiste anche una seconda
categoria di selettori basati sui
tag nativi HTML, i selettori
contestuali: servono per governare la visualizzazione del
testo contenuto in un determinato tag al verificarsi di condizioni particolari. Ad esempio
la regola li b {color: red} ci dice
che ogni volta che in una lista
comparir un testo in grassetto dovr essere di colore rosso.
4 I colori del Web

l colore costituisce un elemento importante nelle pagine Web. Ci permette di aggiungere informazioni visuali
alla pagina, differenziare vari tipi di testo, mettere in risalto i
collegamenti ipertestuali, abbellire il documento e le tabelle con sfondi e con bordi che
ne aumentino l'effetto estetico
e ne facilitino la lettura. Esistono due modi fondamentali per
inserirlo: creare un'immagine
esterna alla pagina oppure
sfruttare le funzioni intrinseche di HTML. Il secondo produce pagine pi leggere e pi
semplici da gestire e, mediante
l'impiego dei fogli di stile, offre
anche un buon livello di controllo sui risultati. Senza i CSS,
invece, i risultati sono abbastanza poveri, soprattutto nella gestione del testo, e capita
spesso di trovare, specie nei siti di vecchia concezione, l'uso
d'immagini anche per rappresentare 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 unimmagine: dovreste aprire un programma ad
hoc (Photoshop, Flash o qualsiasi altro strumento sia stato
usato per generare il testo-immagine) e trasformare l'imma-
46/88
gine, anzich semplicemente

intervenire direttamente sulla
pagina HTML. Oggi, con la precisione tipografica consentita
dai CSS, diventa non solo possibile, ma anche altamente consigliato, sfruttare al massimo
gli elementi di colore prodotti
in modo nativo dal browser.
Sono diversi i tag HTML che
consentono d'impostare il colore per i propri elementi mediante l'uso di attributi come
color (per il corpo dell'elemento), bgcolor (per gli sfondi) e
bordercolor (per i bordi). In tutti i casi, i colori vanno espressi
in due modi possibili: indicandoli per nome oppure mediante una notazione esadecimale. I
CSS aggiungono come terza
possibilit, consigliata, l'uso di
una un notazione decimale o
percentuale che indica direttamente i livelli di rosso, verde e
blu da utilizzare nella composizione del colore finale.
Il primo metodo, quello dei
nomi, poco usato poich prevede un numero limitato di colori, 16, di cui solo 8 appartengono alla Websafe palette che
vedremo pi avanti. Tale metodo, inoltre, usa nomi che sono
mnemonici solo in inglese, ma
che sono poco comprensibili
per un italiano (per un riferimento sui 16 colori predefiniti

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
lallineamento di un testo
come nel documento
originale. Per conservare gli
spazi bianchi bisogna
utilizzare l'entit spazio
unificatore ( ) oppure
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. webreference.com/html/reference/color/named.html).
Esiste un ulteriore rischio
nell'uso dei nomi per i colori.
Microsoft ha definito una tavolozza estesa che contiene 140
colori, con nomi molto esotici
come "darkslategray" (grigio
lavagna scuro), "biscuit" (biscotto) o forestgreen (verde
foresta), ma che includono anche i 16 colori di base. I nomi
aggiuntivi di questa palette funzionano unicamente con Internet Explorer dalla versione 4.0
in avanti e non sono supportati da nessuno standard, perci
abituarsi a usare i nomi per i
colori porta facilmente a produrre pagine incompatibili (per
un elenco dei nomi particolari
definiti da Microsoft vedi
http://www.webreference.com/
html/reference/color/propcolor.html#HEAD-2
oppure
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/ catalog/wdnut/excerpt/color_names.html).
Il metodo basato sui valori
esadecimali invece il pi comune perch utilizzabile direttamente dall'interno di un tag
HTML e compatibile con qualsiasi browser.
Basta indicare i valori RGB
che vogliamo riprodurre per
ottenere qualsiasi genere di tinta. Il risultato una sequenza
di sei cifre esadecimali come
ad esempio FF0033 (rosso vivo), due per ciascuno dei tre
colori: rosso, verde e blu. Questi colori primari,
combinati sullo
schermo, producono tutti i colori visibili.
(versione integrale
larticolo
sul CD
n. 68
4a lezione
5 Gestire le immagini
l secondo tipo di contenuto tipico di una pagina Web sono
le immagini. A differenza del
testo, non si trovano nella pagina 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 documento oltre che le caratteristiche di visualizzazione e l'allineamento rispetto al testo. Nella gestione delle immagini, esistono quindi due fasi: la prima
consiste nel preparare il file che
le contiene e la seconda nel collegarlo alla pagina nella posizione in cui vogliamo che appaia quando spedito al browser
del navigatore. Per tale motivo
bisogna conoscere i formati di
file utilizzabili e sapere scegliere quello corretto in funzione
del contenuto, cio del tipo di
immagine che si vuole riprodurre.
Grafica bitmap e vettoriale

Le immagini prodotte a computer si dividono in due grandi
famiglie: le immagini bit map sono composte da una mappa di
bit che definisce il colore di ciascun punto della mappa rettangolare di pixel (picture elements) che saranno visualizzati
sullo schermo. Sono le uniche
direttamente riconoscibili dai
browser e hanno un formato fisso e difficilmente modificabile.
Le variazioni possibili di un'immagine bitmap consistono nella
modifica dei colori dei singoli
pixel, nel ridimensionamento
dell'immagine oppure nel ritaglio di un particolare: tutte operazioni da realizzare mediante
un programma di ritocco come
Photoshop, Image Ready, Fireworks, Gimp e altri. Qualsiasi
operazione di fatto un ritocco
basato su collage di elementi,
magari presi da immagini diverse e sulla modifica del colore di
quelli esistenti. Non possibile
cambiare in maniera interattiva
le dimensioni o l'orientamento
degli oggetti contenuti in un'immagine bit map e nemmeno alterare il contenuto di un eventuale testo presente. anche
molto difficile ingrandire l'immagine senza perdere qualit,
visto che l'ingrandimento viene
realizzato mediante l'aggiunta di
punti simulati matematicamente mediante una duplicazione
47/88
approssimata di quelli gi esistenti.

Le immagini vettoriali hanno
invece la caratteristica di definire ciascun oggetto mediante
coordinate geometriche e perci ne consentono la modifica a
piacere: ingrandimento, rimpicciolimento, sostituzione ed eliminazione di interi elementi
senza lasciare segno, riscrittura
del testo. Sono anche particolarmente adatte per produrre
animazioni. Richiedono una notevole "intelligenza" di calcolo,
non disponibile sui normali
browser e perci possono essere riprodotte unicamente mediante speciali aggiunte (plugin) che di solito sono concepite
per gestire solo un formato particolare, come Flash di Macromedia oppure Acrobat di Adobe, e vengono utilizzati solo per
porzioni particolari di un sito
non consultabili in assenza del
plug-in. Esiste anche un formato
vettoriale definito come standard nel 1999 dal World Wide
Web Consortium (http://www.
w3c.org), lo SVG (Scalable Vector Graphics), concepito per la
definizione vettoriale d'immagini bidimensionali e basato su
XML. stato adottato da numerosi produttori di software, tra
cui la stessa Microsoft che lo ha
scelto per Office 11, perci lo vedremo affiorare gradualmente
in futuro.
Nella pratica, tutti i principali programmi di modifica delle
immagini bitmap consentono di
produrre un file di lavoro con alcuni contenuti vettoriali, come
ad esempio il testo e le forme
geometriche chiave (linea, cerchio, rettangolo) che viene quindi esportato in formato puramente bitmap al termine dell'elaborazione. In questo modo
avremo due file distinti: uno di
lavoro realizzato nel formato
vettoriale tipico del programma, su cui potremo continuare a
intervenire con le nostre variazioni e correzioni e uno da pubblicare, salvato in uno dei tre
formati direttamente riconoscibili 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
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 standard: GIF, JPEG e PNG. I primi

due sono compatibili con tutte
le versioni di browser in circolazione, mentre il terzo stato
supportato in modo imperfetto
fino alla generazione 5.x, perci
va usato con attenzione, anche
se di gran lunga preferibile agli
altri due.
Il fomato GIF (Graphics Interchange Format) adatto per
comprimere immagini che usino
tinte unite e un numero limitato
di colori (256), come ad esempio grafici, disegni schematici,
videate. In tale contesto, offre
un ottimo livello di compressione senza perdita di dati (lossless) e una buona qualit di riproduzione che pu anche adattarsi ai colori nativi prodotti da
HTML cos da creare immagini
che si fondono senza soluzione

di continuit con lo sfondo
HTML della pagina o della tabella che le contiene. Consente
inoltre di creare semplici animazioni.
Il formato JPEG (Joint Photographic Experts Group) s'indirizza, come indicato dal nome,
alle immagini fotografiche. Prevede diversi livelli di compressione con una perdita progressiva di dati e di qualit. molto
efficace nella compressione
d'immagini con sfumature e toni
a variazione continua.
Il PNG (Portable Network
Graphics) nato dopo l'avvento
dei principali browser e ha tratto beneficio dalle prime esperienze realizzate dai progettisti
del Web. Si propone come alternativa evoluta al GIF, ma pu an-
4a lezione
che gestire fotografie visto che
permette di riprodurre 16 milioni di colori mediante una compressione senza perdita pi efficiente rispetto a quella del formato GIF. Offre anch'esso la possibilit di creare semplici animazioni.
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 immagine 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 navigatore. A tale scopo sufficiente
inserire nel codice HTML della
pagina, l dove vogliamo che
l'immagine compaia, un riferimento che punti alla posizione
del file che la contiene e che ne
indichi le principali caratteristiche di visualizzazione. Ci permette di svincolare HTML e grafica di conservare tutte le immagini in una directory centralizzata, una tecnica particolarmente utile nei siti dinamici.
Il marcatore HTML che inserisce l'immagine nella pagina
<img> (image) che deve essere
necessariamente abbinato all'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'immagine pcopenlogo.gif si trova

nella cartelletta "zzz" e che va visualizzata con una larghezza di
168 pixel e un'altezza di 55 pixel,
senza bordo. Altezza e larghezza
non sono indispensabili, poich
il browser user automaticamente le dimensioni dell'immagine contenuta nel file, tuttavia
sono utili per velocizzare la visualizzazione della pagina. Infatti, sapendo lo spazio da riservare, il browser pu comporre
la pagina immediatamente senza aspettare che l'immagine sia
stata caricata per intero. I due
parametri servono anche per visualizzare l'immagine a dimensioni diverse (solitamente pi
piccole) rispetto all'originale.
Questo pu essere utile nel caso
in cui la stessa immagine compaia in pi pagine con risoluzioni diverse e non si voglia produrne pi versioni. Non sempre una strategia vincente poich costringe il browser a compiere un doppio lavoro: scaricare un file pi grande del necessario e ridimensionarlo, a scapito della velocit di visualizzazione della pagina. Pu essere
utile solo quando siamo sicuri
che le versioni multiple della
stessa immagine siano viste nella stessa sessione di navigazione, magari perch sono nella
stessa pagina. In tal caso, il beneficio di caricare un solo file invece che diversi compensa i rallentamenti dovuti alla rielaborazione.
L'attributo border serve a visualizzare o meno un bordo blu,
usato per indicare che all'immagine abbinato un collegamento ipertestuale. rarissimo tro-
vare siti che usino ancora immagini bordate perch il bordo

decisamente antiestetico e ormai inutile, visto che i navigatori suppongono quasi sempre
che tutte le immagini siano cliccabili e possono averne conferma semplicemente portandovi
sopra il cursore del mouse.
Un altro attributo molto importante align usato per allineare l'immagine rispetto agli
elementi che la circondano. Poich si tratta di un attributo che
modifica l'impaginazione e non
fornisce invece informazioni
strutturali, stato deprecato da
HTML 4.01 che consiglia di sostituirlo con una funzione equivalente dei CSS. Tuttavia i progettisti di siti si sono talmente
abituati a utilizzarlo che non
sparir tanto presto dalla circolazione. L'attributo align prevede 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 superiore dell'immagine al margine
superiore della prima riga di testo corrente. Il parametro middle allinea la base della prima riga
di testo al centro dell'immagine.
Infine bottom allinea la base della 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 importante, ma spesso trascurato alt
(alternate) che serve a contenere una breve descrizione dell'immagine da usare nel caso in
cui l'immagine stessa non fosse

visibile, vuoi perch il navigatore ne ha disattivato la visualizzazione sul proprio browser,
vuoi perch non in grado di vederla. La seconda ipotesi si riferisce sia a navigatori non-vedenti sia a chi utilizza browser
vocali che "leggono" il contenuto della pagina al telefono oppure su altro dispositivo di navigazione uditivo (come i navigatori
per automobile). L'uso dell'attributo alt costituisce un requisito per rendere il sito accessibile secondo le specifiche WAI
(Web Accessibilit Iniziative http://www.w3.org/WAI/) e sono
ormai diventate obbligatorie in
gran parte dei siti dell'amministrazione pubblica. Un'alternativa longdesc che consente d'inserire un link a un altro documento che descriva il contenuto
dell'immagine.
Chiudono l'elenco degli attributi per le immagini convenzionali hspace e vspace che indicano 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 compromettendo anche gli allineamenti rispetto al testo e alla tabella di layout. Di solito, dell'immagine rispetto agli elementi sui
lati che c'interessano viene realizzata 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

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 mese luso 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
48/88
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 semplicissimo:
dovrete collegarvi al sito Internet
www.register.it/pcopen,
inserire il codice seguente: x6Wa3P
nel box allinterno della pagina e a questo
punto 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 allindirizzo
http://we.register.it
Per il servizio di supporto inviare le e-mail
allindirizzo support@register.it
5a lezione
Progetto
Web Master
di Roberto Mazzoni
1 Elementi di design per il Web

a creazione stilistica di un
sito solitamente appannaggio di un Web designer,
vale a dire un professionista
esperto nelle arti grafiche che
ha dimestichezza con gli strumenti e le tecniche necessarie.
Tuttavia, il Webmaster pu trovarsi nella necessit di fare tutto da solo oppure di realizzare
nel concreto il progetto impostato da altri. Di conseguenza,
deve conoscere alcuni dei criteri da seguire per realizzare
una pubblicazione elettronica
che sia di buon livello estetico
e, al tempo stesso, funzionale.

Abbiamo gi affrontato gli
aspetti progettuali per stabilire
le finalit del sito e il tipo di
pubblico che lo visiter. Conoscere il navigatore che pensiamo di attrarre indispensabile
per determinare la ricchezza
dell'interfaccia da fornire (vedi
Tecniche di progettazione del
sito nella prima lezione e Progettare la pagina nella seconda lezione). Una volta compiuto questo primo passo, siamo
pronti a disegnare la pagina vera e propria.
Criteri di base
La progettazione di una pagina Web, come per qualsiasi
altro tipo di pubblicazione su
carta o altro supporto, consiste nel collocare gli elementi su
una griglia ordinata, assegnando dimensioni proporzionate e
tracciando un percorso di lettura che guidi l'occhio del navigatore attraverso la pagina
nella sequenza che noi desideriamo, da sinistra a destra e
dall'alto in basso. Rispetto alla
carta, le pagine Web hanno la
caratteristica peculiare di es-
sere lette saltando da un punto

all'altro perci necessario
prevedere diversi punti di attenzione e mettere ben in evidenza 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 comunque preponderante nella pagina; pu essere bianco oppure
avere il colore dello sfondo, ma
deve immancabilmente comparire nella stessa proporzione
armonica degli elementi che
contiene. Una pagina troppo

Lezione 1:
sul CD)
Lezione 2:
Siti statici e linguaggio
HTML
il corso
sul CD
n. 69
sul CD)
Adobe GoLive 6.0
vergine
Lezione 3:
di layout
49/88
professionali
consecutive
Esercizi
Lezione 5:
Elementi di design per il Web
La ruota colore
Grafica e formati di immagini per Internet
Lezione 4:
HTML 4.01 e CSS
CSS e HTML 4.01
Quattro tipi di CSS
I colori del Web
Gestire le immagini
Esercizi
Propriet di trasferimento
dei parametri
Selettori di classe
Websafe palette
Link ipertestuali
Tabelle dimmagini
Mappe immagine
Audio e video
Le prossime puntate
Lezione 6:
Siti interattivi
Lezione 7:
Lezione 8:
Promuovere il sito
5a lezione
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
soluzioni di design che si trovano sul Web. Notate la struttura regolare, dove il testo la
fa da padrone e dove compare ampio spazio bianco che d risalto ai contenuti
facilitandone anche la lettura
affollata sembra disordinata e

risulta anche difficile da leggere.
Persino i portali pi importanti, noterete, usano generose
porzioni di bianco bench mostrino in home page una quantit impressionante di link. Gli
sfondi colorati vanno utilizzati

con parsimonia, solo per evidenziare aree particolari della
pagina e mantenendosi comunque su tinte pastello, tenui. La leggibilit del testo viene prima di ogni cosa e uno
sfondo di colore intenso finisce
Questa invece una delle pagine recentemente bocciate da WebPagesThatSuck. un

garbuglio di colori e di elementi, alcuni animati, che sconcertano il navigatore
impedendogli di capire dove sia capitato e dove possa andare da quel punto.
Graficamente divertente, ma decisamente bocciata in termini di utilit per il Web
50/88
per fare a pugni anche con la

grafica e con le immagini presenti nella pagina. La regola
d'oro del buon designer che
meno elementi ci sono, specie
se decorativi, migliore sar il risultato finale. La pagina sembrer pi chiara, elegante e leggibile. Una delle tecniche seguite 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 nostro design, a quel punto arriveremo a un distillato di stile
efficace.
Il testo, solitamente preponderante, dovrebbe essere scuro su sfondo chiaro o viceversa, e richiamare poca attenzione. Dev'essere soprattutto leggibile e bisogna distinguere visivamente il testo corrente dai
titoli, dalle didascalie e dai link
ipertestuali. Questi ultimi sono
storicamente blu e sottolineati,
tuttavia facile trovare siti che
omettano la sottolineatura e
che adottino colori diversi dal
blu originale. L'importante
che i link abbiano caratteristiche costanti nell'intero sito e
che siano riconoscibili a colpo
d'occhio per quel che sono.
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 didascalia di solito si trova vicino
all'immagine a cui si riferisce,
gli elementi di navigazione si
trovano sui bordi laterali oppure in alto e in basso, e via di
seguito. Inoltre la scelta della
posizione serve anche a bilanciare 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 riproporre alcune informazioni
che vogliamo far ricordare al
navigatore, siano esse un brano di testo che spiega discretamente 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 dicendo.
Dosare il colore
Coerenza, allineamento,
posizione e ripetizione
Queste sono le quattro parole chiave da tenere a mente
quando si progetta la grafica di
un sito. La coerenza si riferisce
alla costanza con cui gli elementi di riferimento si ripetono
di pagina in pagina conservando aspetto, posizione e dimensione. Il sito avr sicuramente
diversi modelli di pagina (template), ma ci saranno alcuni
elementi che non cambiano,
come ad esempio il logo, le barre di navigazione, i link ipertestuali, lo sfondo, eccetera.
Mantenendo invariati questi
elementi, si trasmetter un'impressione di ordine e si faciliter l'orientamento del navigatore che potr concentrarsi sui
contenuti. L'allineamento un
criterio fondamentale dell'impaginazione tipografica e si ripropone anche sul Web. Il testo
e le immagini devono mantenere un allineamento regolare tra
loro e rispetto alla griglia di
layout. anche possibile sfruttare variazioni di allineamento
rispetto alla norma per mettere
in evidenza elementi particolari, come ad esempio un titolo
Il colore notoriamente l'elemento pi visibile all'interno

di una pagina e perci gli elementi colorati dovrebbero essere usati con attenzione, cos
da non sopraffare l'attenzione
del navigatore. Usate tinte poco 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 regole precise di cui parliamo pi
avanti nellarticolo, ma esistono anche strumenti che aiutano a scegliere le combinazioni
adatte, vedi ad esempio l'utility
gratuita SLUGS da integrare nel
programma gratuito HTML-Kit
di cui abbiamo parlato in questo corso, che seleziona per
voi i colori complementari rispetto alla base che avete identificato e li rapporta anche in
termini di saturazione e gradienti d'intensit (passaggio da
un colore all'altro con le principali 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 elementi grafici, specie se tridimensionali. Le fotografie aggiungono anche informazioni di contenuto, ma bene ricordare
che ogni immagine aggiunta aumenta il tempo di scaricamento della pagina. Il rallentamento diventa particolarmente vistoso con immagini di grandi
dimensioni e le pagine che contengono un gran numero d'immagini diventano inaccessibili
a chi usi browser non convenzionali (come telefonino, PDA,
eccetera) e difficili da aggiornare.
Gli elementi grafici 3D sono
invece spesso una parte integrante del sistema di navigazione del sito. L'effetto tridimensionale facilmente realizzato aggiungendo un'ombra alla figura, icona, pulsante o barra 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 aggiungere sempre un testo che
spieghi la funzione di ciascuna,
poich non sempre il navigatore capisce il significato dell'icona semplicemente guardandola, anche se a noi potrebbe risultare del tutto evidente.
Immagini in movimento
per dare vita alla pagina
Il prossimo elemento a salire
nella nostra graduatoria di visibilit sono le immagini in movimento, balzano all'occhio pi
di qualsiasi altra cosa e contribuiscono a differenziare il Web
dalla carta stampata. Qui gli
esperti di usabilit sono concordi: mai superare i due elementi per pagina. Nella realt si
finisce per averne diversi anche perch i banner e i bottoni
pubblicitari sono spesso ani-
mati e si sommano agli elementi dinamici gi presenti nel

sito.
Il sistema pi semplice e diffuso per creare animazioni consiste nello sfruttare una funzione del formato GIF che permette di combinare tra loro diversi
"fotogrammi", tutti dello stesso
formato, e mostrarli ciclicamente al posto dell'immagine
di partenza. Il GIF animato facile da realizzare e compatibile
con qualsiasi browser. Presenta solo l'inconveniente di appesantire il file che lo contiene. Il
secondo elemento di animazione molto diffuso Macromedia
Flash, un programma che produce animazioni grafiche di natura vettoriale, ossia definite
per mezzo di formule matematiche.
Ci permette di ottenere risultati molto pi raffinati rispetto al GIF con file molto pi
leggeri, ma impone l'impiego
di uno speciale software da abbinare al browser (plug-in) che
2 La ruota colore del Web

armonia dei colori costituisce un elemento centrale per qualsiasi progetto grafico. Il contrasto e gli abbinamenti vanno studiati basandosi sui rapporti esistenti
in natura. Nelle arti grafiche,
esiste un oggetto chiamato ruota 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 abbiamo visto, utilizza un colore
primario diverso: il verde al posto del giallo, mantenendo inalterati gli altri due: rosso e blu.
La ruota colore del Web, alla
pari di quella tradizionale, definisce una serie di relazioni specifiche tra i diversi colori al fine
di ottenere precisi effetti di armonia e di contrasto. Ogni colore primario ha un colore
complementare che si trova
nella posizione immediatamente opposta sulla ruota. La combinazione dei due produce un
forte impatto visuale, pur mantenendo l'armonia dell'insieme.
Il colore complementare del
blu ad esempio il giallo, men-
51/88
tre il colore complementare del

rosso il ciano (azzurro), infine il colore complementare del
verde il violetto.
Se invece volete realizzare
un effetto meno contrastato
potete scegliere colori analoghi che si trovino immediatamente a fianco del colore di riferimento scelto. Nel caso del
giallo i colori analoghi sono l'arancione e il verde chiaro, per
il blu sono il blu chiaro e il viola, eccetera.
Esistono diverse altre combinazioni per le quali vi rimandiamo all'articolo Color Harmony pubblicato sul sito
http://builder.cnet.com, quel
che conta ricordare che i colori vanno abbinati in modo armonico 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, arancione) oppure freddo usando i
colori dell'acqua e dell'aria (blu
e verde). Per un'analisi completa 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
nel caso di Flash spesso integrato nelle versioni pi moderne dei principali browser. Esistono soluzioni di animazione
ancora pi complesse che prevedono l'inserimento di filmati
o di sequenze prodotte con altri software.
Ciascuna di questi richiede
tuttavia speciali plug-in oppure
veri e propri applicativi, non disponibili 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 linguaggio XML e che richiede anch'esso l'impiego di plug-in gratuiti, ma che in prospettiva diventer parte integrante dei
browser. SVG sar probabilmente uno dei formati di riferimento del futuro, ma per il momento la scelta per le animazioni sul Web si concentra su
GIF, e la relativa evoluzione
PNG, e su Flash.
3 Grafica per il Web

opo il testo, la grafica costituisce il contenuto pi
comune per un un sito
Web. Nella scorsa lezione abbiamo visto come inserire e allineare un'immagine all'interno di una pagina HTML, ora vediamo come costruirne una al
fine di ottenere il miglior risultato possibile. La prima cosa
da capire che l'immagine che
voi vedete sul vostro schermo
non sar mai esattamente
quella che il navigatore guarder sul proprio computer. Le
differenze tra i browser, tra le
diverse famiglie di computer e
anche semplicemente nella calibrazione dei due monitor
produrranno variazioni anche
molto vistose. Di conseguenza
non c' scopo nel puntare alla
miglior qualit possibile e conviene semmai cercare di ridurre al massimo il peso dell'immagine pur conservandone i
contenuti. Una simile operazione prende il nome di "ottimizzazione" e costituisce
un'arte di per s stessa. Essa
combina la scelta del formato
di memorizzazione pi adatto
al tipo d'immagine e la definizione della dimensione, della
qualit e del numero di colori
presenti al suo interno.
conoscere lo strumento che
dovr visualizzare la nostra
immagine, vale a dire il personal computer. Esiste una prima
differenza fondamentale tra le
diverse famiglie: il Macintosh
tende a mostrare le immagini
pi chiare rispetto alle macchine Windows. Perci se lavorate su un Macintosh dovreste cercare di generare immagini 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 apparire accettabili sullo schermo di un PC. Viceversa, cercate di produrre immagini che
sembrino un po' pi scure del
dovuto sullo schermo del PC
per fare in modo che non appaiano slavate quando visualizzate su un Mac. Attenzione
anche alle differenze tra Linux
e Windows che, per quanto
meno evidenti, comunque esistono.
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 resa dei colori a seconda del tipo
di display usato dal navigatore. Gi era difficile garantire
una ragionevole uniformit tra
CRT di marca e tipo diverso;
ora con gli LCD le differenze
tra modelli diventano macroscopiche. Pertanto, nel creare
immagini da zero, bisogna evitare accostamenti di colori
troppo vicini tra loro, con
scarso contrasto, perch potrebbero sparire completamente sul monitor di qualcun
altro rendendo l'immagine del
tutto indistinguibile e bisogna
anche prepararsi a condurre
test periodici su macchine diverse.
ne del risultato. bene salvare

la copia di dimensioni ridotte
separatamente perch non
sar pi possibile tornare alla
risoluzione originale compiendo il percorso inverso. Infatti, i
programmi di fotoritocco se la
cavano benissimo nel togliere
informazioni per rimpicciolire,
ma una volta che le hanno eliminate queste non possono essere ricostruite se non mediante formule matematiche
che sintetizzano i punti mancanti, ma che producono un effetto finale posticcio. Mantenere una copia dell'originale
serve anche per poter realizzare diverse varianti della stessa immagine partendo sempre
dalla situazione migliore. Infatti, se aveste deciso di usare il
comunissimo formato JPEG,
l'elaborazione e il salvataggio
continui della stessa immagine
ne ridurranno progressivamente 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. Dunque la scelta e la corretta gestione del formato costituisce
un passo fondamentale nella
preparazione di elementi grafici per il Web.
L'eclettico GIF
La risoluzione corretta
Lo schermo di un computer
visualizza tipicamente 72 punti per pollice, mentre la gran
parte delle immagini predisposte per la stampa su carta ha
una risoluzione di 300 punti
per pollice. Ci significa che, a
parit di grandezza visiva, il file visualizzato sullo schermo
sar di quattro volte pi piccolo rispetto a quello inviato alla
stampante. Una variante sul tema rappresentata dai monitor di grandissime dimensioni
che visualizzano 96 punti per
pollice, ma di solito si tiene comunque 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 eseguita mediante un programma
di fotoritocco che riduce il numero complessivo di pixel eseguendo in alcuni casi anche la
compressione e l'ottimizzazio-
Il Graphic Interchange Format il pi comune tra i formati per il Web. Si presta particolarmente per la codifica di
disegni e grafici, ma pu essere utilizzato anche per la memorizzazione di fotografie nel
caso in cui volessimo usare
due sue peculiarit: l'animazione e l'effetto trasparenza.
Gode del supporto di tutti i
browser in circolazione, offre
una compressione molto efficace e permette anche di creare immagini con caricamento
progressivo (interfacciate) per
sveltire la visualizzazione della
pagina senza rinunciare alla
qualit finale. Inoltre la compressione offerta da GIF di tipo lossless vale a dire che non
comporta la perdita di dati, come invece accade nel caso del
JPEG. Va comunque notato che
i programmi pi moderni consentono di eseguire una compressione 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 orizzontale il contenuto di ciascuna riga e codificando qualsiasi
variazione di colore. Ci significa che immagini con ampi
spazi di tinte unite vengono
compressi con grandissima efficienza perch quando il colore non cambia, il formato si limita a registrare il valore iniziale e il numero di pixel per
cui deve essere ripetuto. L'efficienza diminuisce al crescere

degli elementi di colore diverso che tagliano l'immagine in
verticale e precipita in presenza di sfumature di colore. Un
esempio classico per vedere
la differenza consiste nel comprimere un'immagine a strisce
verticali e confrontarla con la
stessa immagine a strisce orizzontali, su sfondo uniforme: la
seconda, pur contenendo lo
stesso numero di pixel e di colori, avr una dimensione mol-
to inferiore perch le variazioni su ciascuna riga saranno pochissime (vedi le figure di

esempio).
Il limite importante del formato GIF sta nel fatto che pu
memorizzare al massimo 256
colori per ogni immagine. Questi possono essere diversi ogni
volta e costituire un campionamento di quel che l'immagine contiene (tavolozza adattata - adaptive palette) oppure
provenire dalla tavolozza di sistema utilizzata sul particolare
computer che dovr visualizzare l'immagine. Una terza soluzione consiste nello scegliere colori presi dalla Websafe
palette (di cui abbiamo parlato
nella scorsa lezione) che elenca i 216 colori visualizzabili
senza distorsioni sia su Macintosh sia su PC.
Una quarta soluzione, abbastanza 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 trova uno vicino a un corrispondente colore Websafe lo sostituisce con quest'ultimo (Macromedia Fireworks MX chiama questa particolare tecnica
Websnap, Adobe Imageready
la chiama invece Selettiva). Infine abbiamo una quinta possibilit che consiste nel creare
una palette che d priorit ai
colori che sono pi facilmente
percepibili dall'occhio umano,
indipendentemente dalla frequenza con cui vengono usati
nell'immagine (palette Percettiva, usata da ImageReady e
Photoshop).
I programmi di grafica compatibili con il formato GIF solitamente propongono in automatico una palette che conservi la miglior fedelt possibile
dell'immagine e ci permettono, poi, di "ottimizzarla" intervenendo su due parametri fondamentali: il numero di colori
nella palette e la presenza o
meno del dithering. Quest'ultimo 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
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
53/88
Un esempio di ottimizzazione d'immagine GIF realizzata mediante la riduzione dei

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
camente se
esistono colori a sufficienza.
Il numero dei
colori l'elemento che pi
di qualsiasi altro influenza
la dimensione
L'immagine che contiene il bottone di questo esempio ha uno
finale
di
sfondo blu identico allo sfondo della pagina HTML in cui
un'immagine.
s'inserisce. In tal modo i due si fondono e il bottone si fonde
perfettamente con la pagina
Partendo da
una qualsiasi
delle numerose palette disponibili per
il formato GIF,
possiamo ridurre selettivamente il numero di colori
cos da aumentare
la
Cambiando lo sfondo della pagina diventa evidente lo sfondo
compressione
dell'immagine
dell'immagicombinazione di colori gi pre- ne. Di default si parte con una
senti nell'immagine. Non au- tavolozza di 256 colori, si pu
menta perci il numero di co- quindi scendere a 128, 64, 32,
lori, ma incrementa comunque eccetera, oppure prendere la
la dimensione del file aggiun- scorciatoia e chiedere al progendo informazioni che mi- gramma di generare una paletgliorano soprattutto le even- te "esatta", cio contenente l'etuali sfumature. Un parente satto numero di colori effettiprossimo del dithering l'an- vamente presenti nell'immagitialiasing, che consiste nell'u- ne. Le due strade non sono
sare sfumature di colore per equivalenti. La tavolozza esatattenuare i bordi netti dei ca- ta consente infatti di eliminare
ratteri tipografici di grandi di- semplicemente le posizioni
mensioni, riducendone l'effet- non occupate all'interno della
to scalettatura. Il dithering codifica GIF e produce effetti
direttamente attivabile e disat- apprezzabili solo su immagini
tivabile nel momento in cui ge- che abbiamo gi pochi colori
neriamo l'immagine, l'antialia- di partenza. La riduzione masing viene realizzato automati- nuale forzata dei colori, invece, permette
di scalare la
dimensione
del file in modo controllato, alterandone l'aspetto,
ma in modo
poco visibile.
Potete anche
bloccare particolari colori
che non debbano essere
eliminati dalla
scalatura, arrivando a dimensioni che
sono anche
meno della
Per creare un bottone con sfondo trasparente, necessario
scegliere come colore di trasparenza lo stesso che attribuiremo
met dell'oriallo sfondo della nostra pagina Web, in questo caso il blu. In tal
ginale di parmodo il programma di grafica costruir le sfumature di blu
tenza.
Per
necessarie per favorire la saldatura morbida tra l'immagine e lo
semplificare
sfondo. Nell'esempio in figura vediamo che Fireworks MX ha
queste scelte,
identificato con gli scacchi grigio-bianchi la zona trasparente e
ha generato un contorno bluastro tutt'intorno al pulsante
tutti i pro-
54/88
grammi di ottimizzazione per

Web aprono due o quattro finestre che permettono di confrontare visivamente l'originale di partenza con la versione
ottimizzata, della quale possono esistere contemporaneamente quattro varianti.
GIF trasparente e animato

Due varianti preziose del
formato GIF ci permettono di
creare effetti grafici ancora pi
interessanti. La prima consiste nell'attribuire la trasparenza a uno dei colori contenuti
nella palette dell'immagine.
Pu trattarsi di un colore qualsiasi: una volta selezionato, diventer trasparente e lascer
intravedere il colore di sfondo
impostato via HTML per l'elemento HTML che contiene
l'immagine (tabella o pagina).
Questo genere di tecnica
utile quando un'immagine deve fondersi con la pagina senza
mostrare il classico bordo rettangolare. In pratica il soggetto
dell'immagine si mescola con
la pagina. Esistono due metodi
per realizzare tale soluzione. Il
primo consiste semplicemente
nel creare uno sfondo per l'immagine che sia identico a quello della pagina. Per far questo
bisogna conoscere bene i colori HTML e la Websafe palette in
modo da non avere differenze
visibili. Prendiamo l'esempio
di un bottone che vogliamo inserire nella nostra home page.
Assegniamo al rettangolo che
lo circonda un colore identico
a quello che sar lo sfondo della pagina. La differenza tra i
due non sar visibile sul nostro computer e l'immagine si
fonder perfettamente con il
resto della pagina. Di solito i
programmi di elaborazione
delle immagini per il Web consentono di definire i colori mediante gli stessi codici esadecimali che useremo per lo sfondo della pagina HTML, perci
sarete matematicamente sicuri
del risultato.
Tuttavia, nel caso volessimo cambiare lo sfondo della
pagina, saremmo anche costretti a modificare ogni singolo bottone. Per ovviare a tale
problema e per consentire anche l'uso di sfondi colorati in
modo vario (mediante l'impiego d'immagini di background)
si assegna allo sfondo che contorna il nostro pulsante un colore trasparente. Un'operazione facilissima: basta indica
5a lezione
Qui vediamo la stessa immagine a cui stato attribuito uno

sfondo trasparente partendo, nel primo caso, dallo sfondo
bianco originale e, nel secondo caso, da uno sfondo blu identico
a quello previsto per la pagina. Nella prima si nota un bordo
biancastro e alcuni segni spuri che disturbano l'immagine, che
sono invece assenti dal secondo
re il colore prescelto per la trasparenza e il gioco fatto.

L'unico accorgimento da
eseguire in questa operazione
consiste nello scegliere come
colore di sfondo dell'immagine
a cui assegnare la trasparenza
il medesimo colore che pensiamo di realizzare per lo sfondo della nostra pagina. Sembra
un controsenso, ma in realt
deriva dalla necessit pratica
di creare una transizione
uniforme tra i bordi arrotondati dell'immagine e lo sfondo
circostante. In questi punti di
transizione il programma di
elaborazione dell'immagine
crea sfumature che tendono
verso il colore circostante cos
da ottenere l'effetto di antialiasing (rimozione delle scalettature e frastagliature dai bordi).
Nel caso in cui lo sfondo fosse
bianco e lo rendessimo trasparente per poi montare l'immagine che ne risulta su una pagina blu, vedremmo un contorno
Un'immagine con bordo trasparente con bordi irregolari pu

essere montata su una pagina che contenga un'immagine di
background creando un effetto di sovrapposizione perfetto
biancastro e irregolare attorno

alla sagoma della figura. Partendo invece da uno sfondo
blu che venga poi reso trasparente, la saldatura sarebbe
perfetta.
L'animazione la seconda
grande prerogativa del formato GIF e consente di riunire
due o pi fotogrammi della
stessa dimensione all'interno
di un singolo file in modo da visualizzarli ciclicamente. Il formato consente di creare un ciclo ripetitivo che prosegue
senza interruzione oppure termina dopo un certo numero di
ripetizioni. Permette anche di
definire l'intervallo di tempo
tra un'immagine e la successiva. In termini pratici, la sequenza d'immagini apparir
come un singolo elemento e
verr inserita nella pagina
HTML come qualsiasi altra immagine. possibile creare un
GIF animato anche con sfondo
trasparente.
L'ultima variante del GIF

consiste nel formato interlacciato, usato di rado perch appesantisce il file e di fatto aggrava il problema che vorrebbe risolvere. Un'immagine interlacciata compare sul video
un po' per volta. La tecnica
stata sviluppata per consentire al browser di visualizzare
una versione a bassa risoluzione dell'immagine non appena sia disponibile 1/8 del suo
contenuto, proseguendo poi
con la costruzione della pagina
mentre l'immagine termina di
caricarsi e diventa perfettamente visibile. La tecnica sveltisce la navigazione di pagine
con immagini di grandi dimensioni, tuttavia altamente
sconsigliata per eventuali elementi di navigazione grafici visto che l'utente sarebbe costretto ad aspettare prima di
riuscire a capire di che cosa si
tratti.
JPEG per le fotografie
Questa foto riprodotta in quattro formati diversi. Il primo l'orginale salvato in

formato TIFF, usato nel mondo dell'editoria perch comprime senza perdere
informazioni. Gli altri tre mostrano quanto si perda in qualit con GIF o PNG cercando di
comprimere un'immagine allo stesso livello ottenibile con JPEG
55/88
Il formato standard per la registrazione di immagini fotografiche il Joint Photographic

Experts Group. Offre il massimo
rendimento in tutte le situazioni in cui esistano sfumature
di colore e passaggi tonali morbidi. Codifica fino a 16 milioni
di colori e realizza una compressione di qualit regolabile
che comporta in ogni caso la
perdita parziale delle informazioni originali, senza che tuttavia tale perdita risulti evidente
all'occhio, salvo quando si esagera con la compressione.
A differenza del formato GIF,
il JPEG richiede anche l'operazione di decompressione
quando viene visualizzato dal
browser il che aggiunge un ritardo di visualizzazione che

non dipende dal tempo di trasferimento dell'immagine. Per
tale motivo, un'immagine JPEG
sar sempre pi lenta da visualizzare di un'immagine GIF
di pari dimensioni.
La versione pi recente del
formato JPEG consente di regolare il livello di compressione con variazioni di un centesimo e di creare immagini che
si visualizzano progressivamente. In quest'ultimo caso
l'immagine compare immediatamente nella pagina, anche se
sfocata, per poi perfezionarsi
non appena il browser ne completa l'elaborazione. Per le fotografie il JPEG non secondo
a nessuno e garantisce efficienze inarrivabili dagli altri
due formati: GIF e PNG. Risulta
invece pessimo per le immagini con contorni netti e colori
pieni, regno incontrastato del
formato GIF.
PNG tuttofare
Il formato Portable Network
Graphics nasce per rimpiazzare GIF e per sostituirsi a JPEG
in alcune circostanze. Alla pari
di GIF, offre l'effetto di trasparenza, molto migliorato qualitativamente poich realizzato
a vari livelli, e la generazione
d'immagini interlacciate la cui
visualizzazione comincia dopo
che stato caricato 1/64 del file e non 1/8 come nel caso del
GIF.
A differenza del GIF, codifica
16 milioni di colori e non consente l'animazione. Viene utilizzato come formato interno
da alcuni programmi di elaborazione grafica, come Fireworks, poich memorizza
anche i vari stadi intermedi di
manipolazione cos da modificare il testo e altri elementi
geometrici vettoriali inseriti
nella pagina anche dopo che
l'immagine stata salvata. Potendo arrivare a 48 bit di colore e 16 bit di scala di grigio
possibile utilizzarlo anche in
sostituzione del JPEG, specie
quando si vuole l'effetto trasparenza per un'immagine fotografica. Nella compressione
non si perdono informazioni e
perci possibile elaborare e
salvare ripetutamente lo stesso file senza scadere in qualit.
Il suo difetto sta nel supporto ancora parziale offerto dai
vari browser, soprattutto alla
trasparenza variabile.
5a lezione
4 Link ipertestuali
l Web esiste grazie al concetto di ipertesto mediante il
quale diversi documenti possono essere consultati in ordine libero sfruttando collegamenti reciproci.
Questi ultimi prendono il nome di collegamenti ipertestuali 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 immediatamente proiettati verso la destinazione richiesta.
Esistono due modi per inserire un link ipertestuale in una
pagina Web: nella forma di testo 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 nome di ancora sorgente perch identifica il punto di partenza 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 variante invece l'ancora di destinazione utile per marcare il
punto di arrivo di un particolare link all'interno della pagina.
La si usa solitamente per
creare link a porzioni interne
dello stesso documento oppure per fare in modo che la pagina richiamata da un link esterno si apra in corrispondenza di
un particolare paragrafo, anzich alla prima riga.
Ancore sorgente
Il testo o l'immagine che delimitano il "punto caldo" (hot
spot) del collegamento sorgente, cio il punto da cliccare, sono racchiusi tra i tag <a> e </a>.
La destinazione del link invece indicata mediante l'attributo
href (hypertext reference) che
pu contenere un collegamento relativo (pertinente al sito in
cui gi ci troviamo) oppure assoluto (diretto a un sito esterno). All'interno di un sito, la
gran parte dei link saranno relativi, vale a dire che indicheranno la posizione del documento di destinazione in relazione alla directory principale
del sito (collegamento relativo
56/88
completo) oppure in relazione

al documento di partenza (collegamento relativo indiretto o
diretto vedi l'articolo Collegamenti assoluti e relativi nella seconda lezione).
Prendiamo ad esempio il collegamento che dalla home page del nostro corso porta alla
prima pagina della quinta lezione: <a href="Lezione_5/Lezione_5.htm">quinta lezione</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 "Lezione_5" collocata un livello sotto
alla cartelletta in cui ci troviamo al momento. Esistono vari
altri attributi, ma il pi importante target che specifica dove inviare la nuova pagina che
stiamo per aprire. un attributo indispensabile nei frame, come vedremo pi avanti, ma torna utile anche quando vogliamo 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 finestra e assegnarle un nome di
fantasia: target="pippo".
In questo caso la nuova pagina verr aperta in una nuova
finestra denominata "pippo".
Da notare che esiste tuttavia
una differenza sostanziale tra
"_blank" e "pippo". Il primo determiner ogni volta l'apertura
di una nuova finestra che si aggiunger a quelle gi presenti.
Il secondo invece invier qualsiasi 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 nostro corso: <a href="Lezione_5/Lezione_5.htm"><img
src="Lezione_5/immagine.gif"
width="100" height="100" border="0"></a> ci dice che cliccando su immagine nella pagina corrente saremo trasportati
nella pagina Lezione_5.htm che
si trova nella cartelletta Lezione_5 subito sotto di noi.
Notate che la coppia di tag

<a> e </a> racchiude completamente il marcatore <img>
con tutte le informazioni relative all'immagine.
Tra gli attributi previsti da
quest'ultimo notiamo border
che serve a bordare l'immagine
con una cornice blu per indicare che vi associato un link
ipertestuale (prerogativa solitamente 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 interminabili che necessitino di
riferimenti interni. In ogni caso,
queste ancore possono tornare
utili in alcune situazioni. La loro caratteristica essenziale
consiste nell'identificare un
punto del documento come destinazione di un collegamento
origine. Tale punto pu coincidere con un qualsiasi elemento
HTML (paragrafo, titolo), con
un brano di testo (anche semplicemente uno spazio bianco)
oppure con un'immagine.
La sintassi da usare nel caso
di un elemento HTML la seguente <h1 id="pippo">brano di
testo </a>. Si sfrutta l'attributo
id tipico delle versioni pi recenti di HTML per identificare
l'elemento a cui vogliamo puntare. Nel caso invece di un brano di testo o di un'immagine, la
sintassi sar la seguente: <a name="pippo">brano di testo o immagine</a>. In entrambi i casi
il link sar invisibile nella finestra del browser e non sar
cliccabile proprio perch si
tratta di una destinazione e
non di un'origine. Avrete notato che nei due esempi abbiamo
inserito un nome di fantasia
(pippo) che ci servir per puntare all'ancora di destinazione
dall'interno di un'ancora di origine. Supponiamo di voler
creare un link in cima al documento che faccia scorrere il testo nella finestra fino a raggiungere l'ancora di destinazione. La sintassi sarebbe <a
href="#pippo">testo da cliccare</a>. Notate che abbiamo
usato il simbolo di cancelletto
prima di "pippo" per indi-
5a lezione
care che si tratta del nome
di un'ancora di destinazione.
Nel caso di un link contenuto in
un documento esterno la sintassi sarebbe: <a href="documento.html#pippo">testo da
cliccare</a>.
Il documento.html si aprir
nella finestra del browser esattamente nel punto contrassegnato dall'ancora "pippo".
La terza variante di link ipertestuale ci consente d'identificare esplicitamente che le parole che seguono corrispondono a un indirizzo di posta elet-
tronica e che perci, cliccandovi sopra, sar possibile inviare un messaggio direttamente a quel destinatario.
Si tratta di una funzione molto usata per facilitare il contatto con il gestore del sito o con
altre persone.
La sintassi la seguente: <a

href="mailto:pippo@pippo.com"
>pippo</a> quando il navigatore cliccher su "pippo" gli si
aprir automaticamente il programma di posta e nella casella
del destinatario comparir l'indirizzo "pippo@pippo.com".
appesantire la pagina e complicare qualsiasi successiva modifica del testo. Mediante la

frammentazione, invece, possiamo rimpiazzare con un semplice sfondo HTML tutte le por-
zioni dell'immagine che hanno

una tinta unita e che magari
contengono testo. Oggi esistono numerosi programmi con
strumenti dedicati alla frammentazione automatica delle
5 Tabelle dimmagini
bbiamo gi visto che le tabelle svolgono un ruolo
essenziale per costruire il
layout di una pagina Web. Inserendo brani di testo e immagini
entro le celle di una tabella invisibile, possiamo stabilirne le
posizioni e gli allineamenti.
Un impiego particolare di
questa funzione consiste nell'usare la tabella come elemento di unione per pi immagini
oppure per gli elementi frazionati 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 cinematografiche. Se scomponiamo la sua
home page, vediamo che contiene una tabella che salda tra
loro testo, fotografie, pulsanti
navigazione e testatine grafiche (vedi la figura).
Il secondo caso adotta invece una tecnica di frammentazione dell'immagine sviluppata
dai progettisti Web per sveltire
il caricamento di un'immagine
di grandi dimensioni e per usare la stessa immagine come
strumento di navigazione. L'o-
perazione richiede una certa

dimestichezza con i programmi di grafica e prevede la suddivisione di un'immagine in
tanti riquadri di dimensione variabile, che saranno uniti mediante una tabella cos da ricomporre visivamente l'immagine originale senza lasciar trasparire 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 navigazione grafico (vedi l'esempio). Potremo anche animare
alcune porzioni dell'immagine,
creando un GIF animato per
quel particolare frammento, e
creare i cosiddetti rollover, vale a dire cambiamento d'immagine al passaggio del mouse. La
frammentazione (slicing) di
unimmmagine comporta notevoli benefici anche nel regolare
il peso della pagina. Supponiamo infatti di avere una figura
che contenga ampi spazi a tinta unita con magari porzioni di
testo al loro interno. Realizzare
il tutto in grafica vorrebbe dire
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
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
5a lezione
immagini, in particolare Photoshop, ImageReady e Fireworks
MX. sufficiente posizionare le
guide di taglio per identificare
le varie porzioni e in alcuni casi anche possibile assegnare,
gi dall'interno del programma
di grafica, l'effetto rollover e generare automaticamente la tabella HTML finale.
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
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
6 Mappe immagine
bbiamo visto che un'immagine pu essere frazionata in blocchi cos da far
corrispondere a ciascun blocco un link ipertestuale e creare
un sistema di navigazione grafico. L'unione dei vari blocchi
in modo da riprodurre visivamente l'immagine originale sulla pagina Web richiede l'impiego di una tabella di layout. Il sistema tuttavia complesso,
trascina con s tutte le imprevedibilit delle tabelle e non si
presta a layout complessi, magari di forma astratta.
Esiste un'alternativa che
consiste nell'assegnare all'immagine che dovr fungere da
elemento di navigazione una
serie di coordinate che identificano aree cliccabili.
A ciascuna di tali aree, poi,
attribuiremo un link ipertestuale. In pratica tracciamo sull'immagine una mappa invisibile, indicando le coordinate in
pixel dei vertici delle varie forme, calcolati partendo dall'angolo superiore sinistro dell'immagine.
Calcolare le coordinate a mano sarebbe un'impresa non da
poco, ma fortunatamente tutti i
principali editor HTML visuali
prevedono strumenti che semplificano moltissimo questa
operazione. Basta tracciare sulla figura i contorni delle varie
zone e il programma calcoler
tutte le coordinate relative producendo anche il codice HMTL
necessario per inserire la map-
58/88
pa immagine (image map) nella

pagina. Le zone possono avere
tre forme: circolare, rettangolare o poligonale.
Le mappe immagine possono essere di due tipi: il primo,
che anche il pi comune,
prende il nome di mappa immagine lato client (client side
imagemap) e memorizza tutte
le informazioni relative alla
mappa all'interno della pagina
HTML che contiene l'immagine. Ci consente al browser di
fornire informazioni sui link associati a ciascuna zona e costituisce 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, lasciando al server medesimo il
compito d'interpretare l'azione
dell'utente sulla mappa, restituendo l'indirizzo di link corretto. Oltre a essere molto pi
complicate da realizzare delle
mappe lato client, le server side imagemap presentavano
anche lo svantaggio di funzionare in modo diverso a seconda del server impiegato e di richiedere continue connessioni al server.
Per aggiungere una mappa a
un'immagine esistente si usa il
parametro usemap="nome_
mappa" all'interno del tag
<img> che identifica l'immagine
stessa. Il valore nome_mappa
punta a una mappa identificata

dal
tag
<map
name=
"nome_mappa"> che contiene
tutte le coordinate delle zone
cliccabili (hot spot).
A ciascuna di queste associamo, poi, un link ipertestuale

in modo tale da trasformare
l'immagine in un elemento di
navigazione.
Ecco il codice HTML

per generare la
mappa immagine
vista prima
Qui vediamo un'immagine a cui sono state abbinate tre zone

cliccabili mediante la creazione di una mappa. Riconosciamo
le tre forme consentite: rettangolo, cerchio e poligono
6a lezione
Progetto
Web Master
di Michele Nasi
1 I linguaggi di programmazione
linguaggi di programmazione
si dividono essenzialmente in
tre grandi gruppi: linguaggi
compilati, semi-compilati ed interpretati.
Nel caso dei linguaggi compilati, il codice sorgente (ossia il
file testuale contenente le istruzioni che devono essere eseguite da parte del personal
computer) viene impacchettato sotto forma di un file eseguibile. I sorgenti vengono tradotti in codice macchina,
comprensibile al personal
computer, mediante lutilizzo
dei cosiddetti compilatori. Ci

comporta che un programma
trasformato in codice macchina pu funzionare solo ed
esclusivamente in un particolare ambiente hardware-software.
Tra i linguaggi semi-compilati, citiamo Java: nato per affiancare lHTML, permette lo sviluppo e lutilizzo di applicazioni indipendenti dalla piattaforma. Ci significa che Java indipendente dalla specifica piattaforma hardware-software: il
programma Java viene compi-
lato in Java Bytecode quindi interpretato ed eseguito dalla

speciale Java Virtual Machine
(ne esistono versioni per tutte
le piattaforme hardware-software in circolazione).
La terza categoria di linguaggi di programmazione
composta dai linguaggi interpretati: in questo caso, il codice
sorgente viene proposto in
chiaro, senza alcun tipo di codifica: sta al browser Internet
interpretarlo ed eseguire le
istruzioni elencate.
I linguaggi interpretati pos-
sono quindi essere considerati

come una sorta di estensione
dellHTML. Come avrete avuto
modo di apprendere nelle lezioni precedenti del nostro corso, lHTML non un linguaggio
di programmazione vero e proprio (nonostante sia spesso, in
maniera colloquiale, erroneamente definito come tale).
LHTML un linguaggio di definizione della pagina che permette di impostare la posizione
di testo ed immagini in una pagina Web, di posizionare tabelle, frame, liste puntate e nume-

Lezione 1:
sul CD)
Lezione 2:
HTML
il corso
sul CD
n. 70
sul CD)
Adobe GoLive 6.0
vergine
Lezione 3:
di layout
59/88
professionali
consecutive
Esercizi
Lezione 4:
HTML 4.01 e CSS
CSS e HTML 4.01
Quattro tipi di CSS
I colori del Web
Gestire le immagini
Esercizi
dei parametri
Selettori di classe
Websafe palette
Lezione 5:
La ruota colore
Link ipertestuali
Tabelle dimmagini
Mappe immagine
Audio e video
Lezione 6:
Siti interattivi
I linguaggi di programmazione
La programmazione orientata agli oggetti
Oggetti e priopriet
Eventi e funzioni
Variabili e stringhe
Gli operatori in JavaScript
Istruzioni condizionali
Interazione tra JavaScript e form HTML
Interazione tra JavaScript e frame
DHTML
Le prossime puntate
Lezione 7:
Lezione 8:
Promuovere il sito
6a lezione
rate e cos via, oltre a stabilire
le propriet caratteristiche
(ampiezza, colore, allineamento) di ciascun elemento.
Fatta eccezione per i form,
lHTML non ha in s n strutture in grado di interagire con lutente n strutture decisionali.
LHTML, insomma, completamente statico.
Con questa lezione del nostro corso, ci proponiamo di
aggiungere un altro importante
tassello alle nostre conoscenze: presenteremo JavaScript e
DHTML.
JavaScript pu essere considerato come il complemento di
HTML. un linguaggio interpretato ed un linguaggio di
scripting. JavaScript semplice perch si basa su un numero
ristretto di oggetti di programmazione, tuttavia il suo utilizzo
potrebbe non risultare indicato
per lo svolgimento delle operazioni pi complesse: procedure
allapparenza assai semplici,
potrebbero infatti implicare lo
sviluppo di script piuttosto
complicati.
JavaScript sicuro e affida-
Lidentikit di JavaScript
JavaScript un linguaggio di scripting
Un linguaggio di scripting un linguaggio di programmazione
ridotto allosso
Uno script JavaScript si compone di una serie di istruzioni
eseguibili dal personal computer client
Il codice JavaScript inseribile allinterno di una qualsiasi pagina
HTML
JavaScript un linguaggio aperto che pu essere liberamente
utilizzato da chiunque senza la necessit di acquistare una
licenza duso
JavaScript supportato da tutti i browser Internet
bile: proprio per la sua peculiarit di essere un linguaggio
piuttosto limitato per numero
e complessit delle strutture
che mette a disposizione non
si conoscono problemi di sicurezza e di affidabilit.
Tutti i bug e le falle di sicurezza di JavaScript sono stati
scoperti e risolti sin dalluscita
delle prime versioni.
Tra le caratteristiche principali abbiamo gi messo in luce
come il codice sia in chiaro,
ossia visibile da parte di
chiunque, semplicemente ser-
vendosi della funzione Visualizza lHTML del browser, desideri di consultare il codice
HTML della pagina Web che
sta visitando.
Il codice JavaScript, inoltre,
viene eseguito sul client, ossia
sul personal computer che sta
visitando un determinato sito
Internet. Si tratta di un aspetto
importante che deve essere tenuto a mente: altri linguaggi di
programmazione vengono detti lato server perch, ad ogni
richiesta di connessione da
parte di un personal computer
(client), il server esegue le azioni previste dal programmatore

e comunica al computer client
(e quindi al suo browser Internet) il responso.
Il codice JavaScript, invece,
non viene interpretato ed eseguito sul server ma viene inviato cos com al client: penser, quindi, il browser Internet
(per esempio Internet Explorer) ad interpretarlo e ad eseguire le istruzioni specificate.
Il codice di uno script JavaScript deve essere quindi scaricato completamente da parte
del browser installato sul personal computer client, prima di
poter essere eseguito.
In questo modo, JavaScript
dispensa il server dalleffettuare una mole di lavoro aggiuntiva (il server non deve processare il codice JavaScript) ma
costringe ogni client ad unopera di interpretazione ed esecuzione degli script.
bene, quindi, non realizzare in JavaScript, script troppo
complessi, che richiedano, da
parte dei client, elevati tempi
di elaborazione.
2 La programmazione orientata agli oggetti

i sente sempre pi spesso
parlare di programmazione orientata agli oggetti
(in inglese OOP, Object Oriented Programming). Pochi ne conoscono, per, il reale significato. Per far luce sullargomento sufficiente pensare un programma come un insieme di
oggetti (oggetti software) che
cooperano tra loro.
Ogni oggetto in grado di
eseguire azioni particolari che
vengono effettuate solo quando richiesto da un altro oggetto
software. Pensate ad un televisore: si tratta di uno strumento
che, per esempio, sa accendersi, sa sintonizzarsi su canali
specifici, sa spegnersi. Ogni
azione per richiesta esplicitamente da parte dellutente,
servendosi di un altro oggetto
(il telecomando).
In pratica, il telecomando
che invia al televisore un messaggio comunicandogli quale
azione deve essere intrapresa.
Il televisore poi in grado di
conoscere il suo stato attuale
ossia le proprie propriet (il
60/88
televisore acceso o spento?

Su quale canale sintonizzato?). Analogamente, anche gli
oggetti software dialogano tra
loro per mezzo di messaggi ed
ogni oggetto caratterizzato
da un insieme di propriet che
ne descrivono lo stato.
I linguaggi di programmazione pi moderni fanno uso degli
oggetti software per rendere la
scrittura dei programmi pi
semplice e intuitiva. Non richiesta, infatti, al programmatore la conoscenza sul funzionamento interno delloggetto
software (chi utilizza il televisore non deve sapere come sono strutturati i circuiti elettronici che gli permettono di funzionare): gli sufficiente apprendere le modalit per colloquiare con lui, ossia i messaggi
che possono essere inviati e
leffetto di ogni singolo messaggio (semantica).
Semplificando molto, provate a pensare ad un ipotetico oggetto software chiamato calcola distanze: tale oggetto in
grado di acquisire il nome di
due citt e di calcolare la distanza tra di esse. Possiamo

supporre che tale oggetto
software preveda linvio di due
messaggi: il primo per richiedere lacquisizione dei nomi
delle citt da parte dellutilizzatore del programma, il secondo per richiedere il calcolo
della distanza tra le due citt
specificate. Le propriet delloggetto saranno essenzialmente due: la prima permetter di avere informazioni sul
nome della prima citt inserita;
la seconda propriet sul nome
della seconda citt. I valori di
ogni propriet sono memorizzati in appositi contenitori
(porzioni della memoria) denominati variabili. Ciascun oggetto software poi caratterizzato da alcuni metodi: essi descrivono le azioni che loggetto
deve compiere non appena riceve un messaggio specifico.
La programmazione orientata agli oggetti , quindi, una
tecnica di programmazione
che permette di semplificare
notevolmente alcuni concetti
che riguardano lo sviluppo di

programmi, come vedremo pi
avanti.
Come inserire uno script

in una pagina Web
Nelle precedenti puntate del
nostro corso abbiamo avuto
modo di familiarizzare con numerosi tag (o marcatori)
HTML. Ne aggiungiamo un altro: <SCRIPT> e </SCRIPT> consentono di delimitare il codice
JavaScript e quello proprio di
altri linguaggi di scripting.
Nella pratica, vanno utilizzati i tag seguenti:
<SCRIPT
Language=Javascript><!-//--></SCRIPT>
Com facile notare, allinterno della tag <SCRIPT> sempre
bene specificare con quale linguaggio 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 allinterno
delle tag che seguono verr in-
6a lezione
terpretato solo da Internet Ex-
plorer 4.0 o Netscape 4.0 e versioni successive:

<SCRIPT
Language=Javascript1.2><!-//--></SCRIPT>
Omettendo lindicazione della versione, il codice verr processato da tutti i browser.
In alternativa, possibile utilizzare il tag <script type=
text/javascript> che consente, egualmente, di definire JavaScript come linguaggio di
scripting.
Il codice JavaScript pu essere inserito direttamente allinterno di una pagina Web oppure in un file esterno. Tale file
dovr poi essere opportunamente richiamato dal corpo
della pagina HTML.
Se si vuole inserire lo script
nella pagina HTML, si deve tenere presente che questo pu
essere collocato allinterno delle tag <HEAD> e </HEAD> (ovvero nellintestazione della pagina 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 laltro, a seconda della loro posizione allinterno del codice HTML della pagina Web. In
particolare, gli script inseriti
nellintestazione tra le tag
<HEAD> e </HEAD> vengono
eseguiti per primi.
I browser Internet
e gli script
Abbiamo gi evidenziato come 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 JavaScript viene visualizzata con
un browser obsoleto? Di solito

o il codice non viene eseguito o
si presentano problemi. Qualora, poi, lesecuzione degli
script fosse disattivata o si
usassero browser che non supportano JavaScript, il codice
presente nella pagina Web non
verrebbe eseguito. Spesso si ricorre, quindi, alluso della tag
<NOSCRIPT></NOSCRIPT> che
permette di specificare il comportamento che il browser deve tenere qualora non fosse
possibile interpretare lo script.
Spesso si usa quindi il costrutto che segue:
<NOSCRIPT>
<META HTTP-EQUIV REFRESH
CONTENT=0;
URL=nomedellapagina.html>
</NOSCRIPT>
In pratica, il tag <META REFRESH> ordina al browser, qualora questo non sia in grado di
riconoscere adeguatamente lo
script, di passare immediatamente alla visualizzazione della pagina HTML nomedellapagina.html. Il buon programmatore avr cura di inserire, in tale 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  che, in HTML, indicano i commenti.
Questo perch alcuni browser (quelli pi vecchi) qualora
non riconoscano il codice JavaScript, potrebbero, anzich
eseguirlo, visualizzarlo sulla
pagina Web (cosa che va assolutamente evitata). Delimitando, invece, gli script tra le tag
, i browser pi vecchi,
non in grado di riconoscere JavaScript, ne interpreteranno il
codice semplicemente come
commenti HTML (che non de-
vono essere stampati sulla pagina Web).

Alcuni browser, soprattutto
le versioni pi datate di Netscape, hanno difficolt nel gestire il segno > di fine commento: bene perci anteporre una
doppia barra // (commento JavaScript) prima del tag -->.
Create una nuova pagina
HTML, servendovi di uno degli
editor presentati nelle precedenti 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 facilmente notare tutto quanto
stato sinora introdotto.
possibile notare come, in
questo caso, il codice JavaScript sia stato inserito allinterno della tag <BODY> (corpo
della pagina HTML). stato fatto uso delle tag  (per impedire ai browser pi datati la
visualizzazione dello script sulla 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
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 seguente:
<SCRIPT
SRC=nomedelfilejavascript.js></
SCRIPT>
dove il file nomedelfilejavascript.js il file contenente il
codice JavaScript e che deve
essere richiamato.
I vantaggi che derivano dalluso di file esterni sono enormi: se si prevede di utilizzare lo
stesso codice JavaScript in pi
pagine HTML, si potr semplicemente 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 JavaScript: baster memorizzare
lo script in un unico file di testo (ad esempio ilmioscript.js)
e richiamarlo da ciascuna pagina servendosi della tag
SCRIPT SRC.
Ricorrendo a file esterni si
attribuisce al sito che si sta
realizzando una struttura modulare che porter ad indubbi
vantaggi in termini di spazio
occupato (le pagine Web saranno pi snelle e compatte) e
faciliter eventuali modifiche
del codice JavaScript (si dovr
intervenire solo sul file esterno e non sulla struttura di ciascuna pagina HTML), con
grossi vantaggi in termini di
tempo.
3 Oggetti e priorit
icollegandoci con quanto
introdotto poco fa circa la
programmazione orientata agli oggetti, passiamo ad illustrare, nella pratica, il significato di oggetti e propriet.
Una pagina Web, visualizzata
allinterno del browser Internet, considerabile come un
oggetto. Ogni tabella, pulsante,
immagine, form, link, presente
61/88
nella vostra pagina Web un

oggetto. Ogni oggetto dispone
di un certo numero di propriet che lo caratterizzano in
modo univoco.
Le informazioni per la visualizzazione del colore dello sfondo della pagina HTML sono,
per esempio, memorizzate nella propriet bgcolor delloggetto document.
Utilizzando listruzione JavaScript document.bgcolor=red

alla vostra pagina Web sar assegnato, come colore di sfondo, il rosso.
Il contenuto di un ipotetico
campo denominato username,
facente parte del form miologin, pu essere recuperato utilizzando la propriet value: document.miologin.username.va-
lue. Notare che la propriet value si riferisce alloggetto username (campo testo) che parte delloggetto miologin (form),
il quale, a sua volta, contenuto nelloggetto document (la pagina Web).
Metodi
I metodi descrivono le azioni
che loggetto deve compiere
6a lezione
non appena riceve un messaggio specifico. In pratica, i metodi sono le azioni che loggetto in grado di compiere.
Cos come una porta pu essere aperta o chiusa, una lampadina accesa o spenta, gli oggetti sono in grado di compiere
molte azioni.
Write() , per esempio, un
metodo delloggetto document: abbiamo gi avuto modo
di fare la sua prima superficiale conoscenza con lo script dellEsempio 1: listruzione document.write (Benvenuto nel
mondo di JavaScript!) ci ha
permesso di scrivere la frase
indicata sulla nostra pagina
Web.
Listruzione 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 sulloggetto 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
finestra da JavaScript, necessario - in primo luogo - fissare
un nome identificativo da attribuirle (ad esempio Miafinestra). Sar quindi possibile
aprire la nuova finestra servendosi della seguente istru-
zione:
Miafinestra = window.open()
Il metodo window.open permette lutilizzo di tre parametri
opzionali che possono essere
inseriti allinterno delle parentesi tonde:
Un URL contenente la pa-
gina HTML che deve essere visualizzata allinterno

della nuova finestra
Un titolo per la finestra
Una serie di informazioni
legate al look grafico della
finestra (dimensioni, posizionamento, e cos via).
che consente la visualizzazione di unimmagine allinterno

di una pagina Web. Analogamente, levento Onclick inserito in una tag anchor <A
HREF ed attivato non appena lutente clicca sul link (nel
nostro esempio, viene visualizzato il messaggio Stai per
raggiungere il sito di PC Open
prima di indirizzare il browser
verso lURL indicato nella tag
anchor).
Inizialmente JavaScript
metteva a disposizione del
programmatore solo pochi
eventi. Questi, inoltre, potevano essere abbinati ad un numero molto limitato di tag
HTML. Le nuove versioni di Internet Explorer hanno esteso
la possibilit duso degli eventi di JavaScript anche a numerose altre tag HTML mentre
Netscape, di contro, rimasto
fedele al passato. Suggeriamo,
per questo motivo, di effettuare test di compatibilit delle proprie pagine Web sulle
varie versioni dei browser Internet.
Come abbiamo avuto modo
di apprendere, un evento pu
richiamare una ed una sola
istruzione (nellesempio precedente, sia levento Onmouseover che levento Onclick,
invocano la visualizzazione di
un messaggio davviso mediante luso dellistruzione
alert). Accade per molto

spesso che le operazioni che
debbono essere eseguite al
verificarsi di un certo evento
siano diverse, assolutamente
non rappresentabili mediante
ununica istruzione.
In questo caso necessario
ricorrere alluso delle funzioni
(handler o gestori di eventi):
si tratta di porzioni ben definite di codice che possono ricevere in ingresso dei dati da
elaborare e restituiscono in
uscita, dopo lesecuzione delle istruzioni previste, un certo
risultato.
Nel caso in cui un evento
debba eseguire una serie di
istruzioni, tali righe di codice
vengono racchiuse in ununica funzione, generalmente definita nellintestazione della
pagina Web o nel corpo della
pagina HTML. Levento far
poi riferimento alla funzione
definita in precedenza. Ad
esempio Onclick=mia_funzione() invocher, alla pressione del tasto sinistro del mouse, la funzione denominata
mia_funzione.
Un esempio concreto contribuir a comprendere meglio il concetto:
4 Eventi e funzioni
li eventi consentono di
specificare quando - ed
in quali condizioni (per
esempio allapertura di una
pagina Web, quando lutente
clicca su un pulsante, quando
si muove il mouse su un determinato oggetto, e cos via)
- un determinato script debba
essere eseguito.
A differenza di quanto visto
sinora, gli eventi non vengono
definiti allinterno della tag
<SCRIPT> ma vengono generalmente 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
62/88
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 immediatamente dopo lapertura della
tag <BODY>: listruzione alert
(Benvenuto!) mostrer al visitatore un messaggio iniziale
di benvenuto. Lesempio ci
permette di provare sul campo lutilizzo degli eventi: a tal
proposito, ci si pu subito
rendere conto di come gli
eventi JavaScript siano utilizzati allinterno del codice
HTML.
Onmouseover e Onclick sono due eventi: il primo viene
attivato non appena lutente
porta il puntatore del mouse
sulloggetto cui la tag HTML fa
riferimento; il secondo evento
ha luogo quando lutente fa
clic con il tasto sinistro del
mouse. Nel nostro esempio,
levento Onmouseover viene
attivato non appena il visitatore della nostra pagina Web
sposti il puntatore del mouse
sullimmagine raffigurante il
logo di PC Open (pcopen.gif).
Si noti come levento JavaScript stato inserito direttamente nella tag HTML <IMG>
<HTML>
<HEAD>
<SCRIPT
LANGUAGE=JavaScript>
6a lezione

</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
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
visitare Digifocus: tutte le
informazioni per i
professionisti dell\
immagine.)>Digifocus</a><
br>
<a
href=http://www.ilsoftware.it
visitare IlSoftware.it: il sito
italiano interamente dedicato
al mondo del software.
)>IlSoftware.it</a><br>
</p>
</BODY>
</HTML>
In questo esempio, abbiamo definito una funzione msgbox contenente ununica istruzione.
Tale funzione viene richiamata da parte dellevento onclick, inserito in ogni tag <A>.
Eventi importanti
onClick
Consente il rilevamento di un clic del mouse
onDblClick
Consente il rilevamento di un doppio clic del mouse
onKeyDown
Permette il rilevamento della pressione di un tasto
onLoad
Evento attivato in fase di caricamento

della pagina Web
onMouseOut
Il puntatore del mouse si sta allontanando

da unarea specifica (ad esempio unimmagine
od un collegamento)
onMouseOver
Il puntatore del mouse stato spostato su unarea

specifica (ad esempio unimmagine od un
collegamento)
La funzione msgbox, inoltre,

riceve in ingresso il testo che
deve essere mostrato nella finestra dallerta.

go, sar sufficiente eseguire

unoperazione di assegnazione.
utente=prompt(Inserisci il
tuo nome,Inserisci qui il tuo
nome);
inizializzer una variabile
utente, quindi vi memorizzer
il valore specificato a destra
delloperatore di assegnazione
(in questo caso proprio il valore stringa restituito dal metodo prompt()).
saggio di benvenuto.
La prima istruzione document.write stampa sulla pagina
Web il testo Benvenuto; la seconda inserisce nella pagina il
contenuto della variabile utente.
Sulle variabili poi possibile eseguire tutta una serie di
operazioni.
Una delle pi importanti il
concatenamento: due o pi variabili possono, cio, essere
unite assieme.
Nellesempio precedente
avremmo potuto usare ununica istruzione document.write
impiegando il codice che segue:
5 Variabili e stringhe
n qualsiasi linguaggio di programmazione, le variabili
possono essere considerate
come delle scatole allinterno
delle quali possibile immagazzinare dei dati.
Ogni variabile pu memorizzare dati di un certo tipo:
numeri, stringhe (qualsiasi valore letterale), valori booleani.
Le variabili possono assumere
anche lo speciale valore null:
questultimo si incontra spesso nella programmazione e
non rappresenta un valore
specifico.
In molti linguaggi di programmazione (per esempio Java, C, C++) le variabili devono
essere dichiarate prima di poter essere utilizzate: quindi
indispensabile inizializzarle
specificando il loro nome e il
tipo di dati che esse andranno
a contenere.
In JavaScript la dichiarazione delle variabili non strettamente necessaria.
Ad esempio, listruzione luogonascita=Milano provvede
automaticamente ad inizializzare una variabile (luogonascita) come stringa e a porvi,
al suo interno, il valore Milano.
Il simbolo di uguaglianza indica che stiamo effettuando un
assegnamento (stiamo associando alla variabile indicata
alla sinistra delluguale il valore specificato alla sua destra).
63/88
Va ricordato che le stringhe

(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 nella variabile luogonascita; nel
secondo caso viene memorizzato in luogonascita il valore
della variabile chiamata Milano.
Le variabili possono anche
essere inizializzate esplicitamente con la dichiarazione
var.
Listruzione var luogonascita, per esempio, crea in memoria una variabile denominata luogonascita e le attribuisce il valore null.
Facciamo alcuni
esempi
Utilizziamo il metodo
prompt() per richiedere allutente che visita la nostra pagina Web, di inserire il suo nome. La stringa di testo inserita
verr successivamente utilizzata per visualizzare un messaggio di benvenuto.
Poich il metodo prompt()
restituisce il testo che lutente
immette nella finestra di dialo-
<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 questo esempio, una volta memorizzato il valore stringa nella
variabile utente, tale variabile
potr essere successivamente
usata per visualizzare il mes-
document.write(Benvenuto
+utente);
Il segno di addizione effettua, appunto, un concatenamento 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_valore+secondo_valore);
In questo caso listruzione
document.write stampa sulla
pagina Web il valore 35, essendo primo_valore e secondo_valore due variabili numeriche.
6a lezione
6 Gli operatori in Javascript

Gli operatori si dividono in:
3. Operatori relazionali
1. operatori aritmetici
2. operatori di assegnamento
3. operatori relazionali
4. operatori logici
5. operatori su stringhe
Segnaliamo anche gli operatori sui bit (utilizzati di solito solo
per generare colori). Di seguito elenchiamo i principali operatori che JavaScript mette a disposizione del programmatore citando, per ognuno di essi, un esempio.
1. Operatori aritmetici
Operatore
+
Descrizione
Addizione
Sottrazione
Moltiplicazione
Divisione
Modulo (resto
di una divisione)
++
Incremento
(operatore unario)
Decremento
(operatore unario)
Esempio
x=2
x+2
x=2
5-x
x=4
x*5
15/5
5/2
5%2
10%8
10%2
x=5
x++
x=5
x
Risultato
4
3
20
3
2.5
1
2
0
x=6
x=4
Operatore
Descrizione
Esempio
==
uguale a
5==8 restituisce false
!=
non uguale a
5!=8 restituisce true
>
maggiore di
5>8 restituisce false
<
minore di
5<8 restituisce true
>=
maggiore o uguale a
5>=8 restituisce false
<=
minore o uguale a
5<=8 restituisce true
Gli operatori relazioni si basano

sul concetto di vero e falso:
consentono di mettere in
relazione un valore (o una
variabile) rispetto ad un altro.
Il doppio uguale (==) permette,
ad esempio, di verificare se un
valore uguale ad un altro (nel
caso delle variabili, se esse
ospitano lo stesso contenuto).
I valori possibili che vengono
restituiti dopo il confronto sono
4. Operatori logici
Operatore
&&
Descrizione
and
Esempio
x=6
y=3
(x < 10 && y > 1) restituisce true
||
or
x=6
y=3
(x==5 || y==5) restituisce false
not
x=6
y=3
x != y restituisce true
2. Operatori di assegnamento
Operatore
Esempio
=
+=
-=
*=
/=
%=
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
Equivale a
(stessa semantica)
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
Com facile notare, unoperazione di assegnamento pu essere

scritta in forma compatta (cio abbinata ad un operatore
aritmetico).
Loperatore += , per esempio, somma i valori delle due variabili
indicate e memorizza il risultato allinterno della variabile di sinistra.
Nella colonna equivale a potete verificare come si sarebbe potuta
scrivere, in alternativa, ogni singola operazione senza ricorrere alla
forma compatta.
false (falso) oppure true (vero).

Se avessimo inizializzato in
precedenza due variabili x e y,
ponendo la prima uguale a 5
(x=5), la seconda uguale a 8
(x=8), un confronto x==y
restituirebbe false (non vero
che il contenuto della variabile x
uguale al contenuto della
variabile y).
Gli operatori relazioni sono tutti
binari.
Gli operatori logici sono essenziali per effettuare confronti pi

complessi tra valori e/o variabili. Sono ampiamente utilizzati nelle
strutture decisionali (ifthenelse).
Nel primo esempio si suppone che la variabile x contenga il valore 6,
y il valore 3 (siano state effettuate le relative operazioni di
assegnamento).
Lespressione (x<10 && y>1) restituisce il valore true perch sono
vere entrambe le condizioni indicate ( vero, cio, che x sia minore
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
64/88
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 nellinserire
una stringa spazio nellultima

istruzione:
testo2=di PC Open
testo3=testo1+ +testo2
oppure in testa alla stringa

testo2:
testo2=di PC Open
testo3=testo1+ +testo2
In alternativa, come seconda

soluzione, si pu aggiungere uno
spazio in calce alla stringa testo1
In questo modo, la variabile

testo3 contiene la stringa
Benvenuti al corso di PC Open.
6a lezione
Mettiamoci alla prova

1
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
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 ununica 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
allutilizzo di una variabile messaggio.
Allinterno 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
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
allinterno 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
laltezza 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) delloggetto 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
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);
Loggetto 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.
Lesempio consultabile su CD utilizzando il file 05_riassuntivo.html
oppure online allindirizzo seguente:
http://www.ilsoftware.it/libreria/js/jstest.asp?f=05_riassuntivo
65/88
6a lezione
gni giorno noi ci troviamo

a compiere delle scelte:
se facciamo una cosa allora le conseguenze sono....
il nostro ragionamento. Lequivalente in JavaScript listruzione condizionale If...Else che
pu essere efficacemente tradotta in questi termini: Se...Allora.
La forma pi semplice con
cui si pu presentare listruzione 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 (listruzione che segue lelse). (Sul CD
ROM lesempio 06_if_then.html
mostra lutilizzo del costrutto
ifelse).
Recuperiamo data e ora attuali servendoci del metodo
Date(); usiamo quindi il metodo GetHours(), applicato alla
variabile data d, per memorizzare lora corrente.
<html>
<body>
<script type=text/javascript>
var d = new Date()
var time = d.getHours()
if (time < 12)
{
document.write(<b>Buongiorn
o!</b>)
}
66/88
else
{
document.write(<b>Buonasera
!</b>)
}
</script>
<p>Questo esempio mostra
lutilizzo 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, inseriamo come condizione lespressione time < 12.
In questo modo, qualora lora attuale sia precedente a
mezzogiorno, verr stampata,
sulla pagina HTML, lesclamazione Buongiorno!, altrimenti
Buonasera!.
Proviamo ora a scrivere uno
script che ci consenta di presentare, allutente che visita il
nostro sito Web, o il sito ufficiale di PC Open (www.pcopen.it) o Digifocus (www.digifocus.it).
La scelta dovr essere operata 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(), applicato alloggetto Math, consente
di generare un numero casuale
compreso tra 0 ed 1 (decimali
compresi): ci significa che listruzione Math.random() genera numeri casuali del tipo
4,345125 oppure 5,899271236 e

cos via. Memorizziamo il numero prodotto in una variabile:
nel nostro esempio labbiamo
denominata r.
Utilizziamo, quindi, listruzione ifthen imponendo, come condizione, r>0.5. In pratica
se il numero generato maggiore di 0.5, viene proposto il
link di PC Open; altrimenti
quello di Digifocus.
<html>
<body>
var r=Math.random()
if (r>0.5)
{
document.write(<a
href=http://www.pcopen.it>Vi
sita www.pcopen.it</a>)
}
else
{
document.write(<a
href=http://www.digifocus.it>
Visita www.digifocus.it</a>)
}
</script>
</body>
</html>
Qualora si debbano effettuare numerosi test su ununica
espressione, conviene ricorrere allutilizzo dellistruzione
Switch.
Il valore assunto dallespressione viene infatti confrontato,
in questo caso, con una serie di
possibilit. Anzich uno solo,
possono essere eseguiti, in se-
quenza, numerosi confronti.

Analizziamo un possibile utilizzo dellistruzione condizionale Switch con un esempio
pratico.
Supponiamo di voler accogliere lutente che visita il nostro sito Web con una frase spiritosa, scelta - in modo del tutto casuale - tra dieci diverse
possibilit. Come nel caso precedente, anche qui possiamo
ricorrere allutilizzo del metodo Math.random().
Per ottenere un numero intero da 0 a 9 (le frasi da proporre sono dieci) utilizziamo
un semplice trucco: moltiplichiamo, dapprima, per 10 il
contenuto della variabile r (generato da Math.random())
quindi utilizziamo il metodo
floor per approssimare, allintero pi vicino, il numero ottenuto. Saremo certi, cos, di
avere - come contenuto della
variabile r - un intero compreso
tra 0 e 9. Il valore assunto dalla
variabile r viene quindi confrontato, dallistruzione switch
(r) con una serie di possibilit
(indicate con i vari case).
Listruzione break consente
allo script di uscire dal ciclo di
switch: se fosse mancante, JavaScript continuerebbe a confrontare il valore. possibile inserire, opzionalmente, anche
unistruzione default: essa viene eseguita solo nel caso in cui
il ciclo switch non trovi alcuna
corrispondenza tra il valore assunto dallespressione e le va-
6a lezione
rie istruzioni case (nel nostro
esempio default non necessario). Va ricordato che sia nelle espressioni ifthen che in
switch, loperatore di uguaglianza che va utilizzano ==
(come gi visto in precedenza)
e non = (loperatore di assegnamento). Si tratta di un errore molto comune che spesso
provoca comportamenti inattesi (JavaScript si limita ad
ignorare lespressione).
Strutture iterattive
Una delle pi famose strutture iterative, comune a molti
altri linguaggi di programmazione, il ciclo for.
Tale istruzione detta appunto ciclo perch esegue
iterativamente una serie di
azioni finch non viene raggiunto un limite prestabilito,
da parte del programmatore,
ed indicato in una condizione.
Il ciclo for utilizza la seguente sintassi:
for (inizializzazione; condizione; incremento) istruzioni;
literazione regolata da una
variabile contatore.
Ci significa che ogni volta
che listruzione for esegue il ciclo, il contenuto della variabile

contatore subisce una variazione.
Lespressione inizializzazione permette di specificare il valore cui deve essere inizializzata la variabile contatore (ad
esempio: i=0); condizione consente di impostare la condizione che deve verificarsi affinch venga eseguito il ciclo (iterazione); incremento permette
di indicare quale incremento o
decremento deve subire la variabile contatore ad ogni iterazione. Ad esempio, impostando i<10 come condizione e i++
come incremento, si stabilir
che il ciclo for dovr essere ripetuto finch la variabile i assumer un valore inferiore a 10.
Inoltre, ad ogni iterazione, il
valore numerico contenuto nella variabile i sar incrementato
di una unit (i++).
Per provare subito lutilizzo
di for, supponiamo di voler sviluppare un semplice script che
faccio uso dei marcatori <h#>
per la visualizzazione di titoli e
sottotitoli di varie dimensioni.
Nella quarta lezione del no-
stro corso, abbiamo spiegato

come al marcatore <h#> possano essere associato fino a sei
livelli consecutivi, cos da determinare una struttura gerarchica di titoli e sottotitoli
(<h1></h1>,
seguito
da
<h2></h2> e cos via).
Inserite il seguente script tra
le tag <HEAD> e </HEAD>, ossia nellintestazione della vostra pagina Web:
for (i = 1; i <= 6; i++)
{ document.write(<h + i +
>Questo il titolo numero + i)
document.write(</h + i + >) }
</script>
In pratica, ad ogni iterazione, il valore contenuto nella variabile contatore i (inizialmente impostato a 1) viene incrementato di un intero (i++). Finch tale valore minore o
uguale a 6, lesecuzione del ciclo for viene ripetuta.
Ad ogni ciclo, vengono eseguite le due istruzioni document.write che sincaricano di
scrivere, sulla pagina Web,
quanto indicato tra parentesi.
Utilizzando loperatore +, si effettua una concatenazione tra
le stringhe racchiuse tra virgolette 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>
Altre strutture iterative, assai utili nella programmazione

JavaScript, sono while e do
while.
Listruzione while va utilizzata nella forma while (condizione) espressione: lespressione verr eseguita finch la
condizione specificata risulter vera. Il ciclo dowhile va
impiegato, invece, nei casi in
cui si vuole che literazione
venga eseguita almeno una volta. La sintassi dellistruzione
infatti la seguente: do {istruzioni} while (condizione)
Le istruzioni specificate, tra
parentesi graffe, dopo il do verranno eseguite finch la condizione risulter verificata.
8 Interazione tra JavaScript e form HTML

moduli HTML (form) sono
una sorta di questionari compilabili on line da parte dei visitatori di un sito Web. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze 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 enormemente ampliate: vengono
utilizzati, su un sempre maggior numero di siti, per interagire con lutente. Ad esempio,
form online vengono proposti
per effettuare ricerche allinterno degli articoli contenuti
in un sito, per inviare i propri
messaggi in un forum, per gestire contenuti ed aree specifiche del sito e cos via.
Per interagire con un modulo HTML mediante codice JavaScript, necessario far uso nella propria pagina Web - delle apposite tag
67/88
<FORM> e </FORM>.
Proviamo ad inserire, nella
nostra pagina HTML, un form
che richieda allutente di digitare il suo indirizzo e-mail verificandone, successivamente, la
validit.
Per motivi di semplicit, limiteremo il controllo circa la
validit dellindirizzo di posta
elettronica specificato, alla presenza del simbolo @.
Se lutente inserir una stringa di testo contenente la chiocciolina, quanto introdotto nel
campo di testo verr considerato come un indirizzo e-mail
valido. ovvio che nella vita
reale si dovranno sviluppare
dei controlli aggiuntivi sulla validit dellindirizzo e-mail (ad
esempio, verificare la presenza
di un suffisso .it, .com, .net, .org
e cos via).
Iniziamo con linserire il codice HTML per la visualizzazione di una casella di testo e di
un pulsante Invia:
<html><head></head>
<body>
<form name=form_email
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 specifico, inserendo il parametro name (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 pressione, da parte dellutente, del
pulsante Invia.
Le tag <INPUT>, che debbono essere sempre comprese tra
<FORM> e </FORM>, consentono di stabilire gli elementi facenti parte del modulo HTML.
Per ogni tag <INPUT> necessario indicare, ricorrendo al parametro type, il tipo di elemento che si vuole utilizzare.
Ad esempio, specificando type=text, si inserir, nel modulo HTML, una casella di testo;
con type=checkbox una casel-
la che pu essere spuntata o

meno; con type=radio un option box; con type=button un
pulsante
Type=submit importantissimo: consente di inserire un
pulsante speciale che provvede ad inviare il contenuto
del form allindirizzo specificato nel parametro action.
Per approfondire lutilizzo
dei form HTML e scoprire tutte
le possibilit che questi offrono, vi consigliamo di fare riferimento allindirizzo www.w3.
org/TR/REC-html40/
interact/forms.html (in lingua
inglese).
Passiamo, a questo punto,
alla stesura dello script che
consentir la validazione dellindirizzo e-mail inserito da
parte dellutente.
Provvediamo, quindi, a collocare - al solito - tra i tag
<HEAD> e </HEAD> (intestazione), il codice JavaScript seguente:
function controlla()
{
6a lezione
x=document.form_email
at=x.email.value.indexOf(@)
if (at == -1)
{
alert(Indirizzo e-mail non
valido.)
return false
}
}
</script>
Cosa abbiamo scritto? In primo luogo abbiamo denominato
controlla() la funzione che effettua la validazione dellindirizzo e-mail. Una volta invocata
tale funzione, JavaScript memorizza nella variabile x il contenuto del form form_email.
Listruzione successiva recupera, prima, il valore del
campo denominato email
(x.email.value), quindi applica
il metodo indexOf.
Tale metodo restituisce la
posizione della prima occorrenza della stringa specificata
allinterno di unaltra stringa.
Se la stringa indicata tra parentesi tonde non viene trovata, il
metodo restituisce il valore -1.
Per fare un esempio concreto, 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 indexOf(PC Open), lo script
cercher la prima occorrenza
della stringa PC Open allinterno della frase La mia rivista
preferita PC Open.
La variabile pos assumer, in
JavaScript risulta unottima soluzione per la validazione dei dati direttamente sul personal
computer dellutente 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 ventisettesimo carattere). Provate a sostituire la seconda istruzione
con la seguente:
pos=x.indexOf(La gazzetta)
In questo caso, il metodo indexOf restituir il valore -1
(non stata trovata alcuna occorrenza de La gazzetta).
Analogamente, nel nostro
esempio, indexOf permette di
ricercare il simbolo @, allinterno della stringa specificata
dallutente nel campo e-mail; il
valore restituito viene memorizzato nella variabile at. A questo punto utilizziamo listruzione condizionale ifelse per
controllare il valore assunto
dalla variabile at: se il valore 1 (non stata trovata alcuna
occorrenza di @) viene mostrato il messaggio derrore Indirizzo e-mail non valido inoltre, la funzione controlla() assumer il valore false (return
false). Ora inseriamo, nel codi-
ce HTML che consente la visualizzazione del form, linvocazione della funzione controlla(): aggiungiamo, nella tag
<FORM> un riferimento allevento onSubmit (ci significa
che non appena lutente agir
sul pulsante Invia (Submit),
verr eseguita la funzione JavaScript appena illustrata).
Largomento dellevento onSubmit return controlla(). Il return che precede la chiamata
della funzione controlla(), permetter di annullare linvio del
contenuto del form alla pagina
form_ok.html (specificata col
parametro action) se la funzione restituisce il valore false (come abbiamo visto, tale valore
viene assunto solo nel caso in
cui @ non sia presente, ossia
qualora lindirizzo e-mail non
sia valido).
Se invece la funzione controlla() restituisce un valore diverso, linvio dei dati del form
verr consentito.
La validazione dei dati (ossia
il controllo della loro corret-
tezza) sul lato client (ossia direttamente sul personal computer dellutente che visita il
nostro sito Web), permetter di
evitare di sovraccaricare il server Web che ospita il sito di un
lavoro aggiuntivo. JavaScript
rappresenta, quindi, la migliore
soluzione per la realizzazione
di questo tipo di controlli.
Il codice HTML e lo script JavaScript sono contenuti allinterno del file form_email.html
nel CD ROM.
Lesempio form_focus.html
(disponibile nel CD ROM di PC
Open) presenta, invece, lutilizzo del metodo focus() per selezionare un campo specifico facente parte di un qualsiasi modulo HTML presente nella pagina Web.
Listruzione document.forms
[0].campo1.focus(), consente
di selezionare (impostare il
focus) sullelemento denominato campo1, contenuto nel
primo modulo HTML (forms
[0]) posizionato nella pagina
Web (document). In questo caso infatti, non avendo assegnato alcun nome al form (servendoci del parametro name), possiamo interfacciarci ricorrendo allarray forms[0].
Qualora avessimo attribuito
al modulo HTML il nome
mioform (<FORM name=
mioform>...</FORM>),
avremmo potuto utilizzare listruzione document.mioform.
campo1.focus() in luogo di document.forms[0].campo1.focus() (com possibile verificare visionando il file form_focus_2.html).
9 Interazione tra JavaScript e frame

avaScript risulta molto utile
anche quando si debba gestire una struttura a frame.
I frame sono infatti strutture
ampiamente utilizzate in numerosi siti Web perch permettono di suddividere la finestra del browser Internet in pi
sottoaree. Ciascuna di esse
pu gestire i suoi contenuti in
modo del tutto autonomo, senza dipendere dalle altre. In questo modo possibile pensare
di tenere fissa una porzione del
documento evitando che il
browser debba ricaricare, ad
ogni refresh, lintera pagina.
JavaScript offre tutta una se-
68/88
rie di strumenti che permettono di interfacciarsi con i frame

HTML e quindi di facilitarne la
gestione.
Vediamo, ad esempio, come
possibile aggiornare due frame diversi con un solo clic del
mouse.
In primo luogo, creiamo un
normale file HTML. Tale file
non avr bisogno dellaggiunta
di alcun codice JavaScript: al
suo interno porremo solo alcuni conosciuti tag HTML che
consentiranno di attribuire alla
nostra pagina Web una struttura a frame. Creiamo un nuovo
file HTML attribuendogli il no-
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 suddivisa in due sezioni: la prima,
quella superiore, occuper il
30% dello spazio a disposizione
sullasse verticale ed ospiter il

file frame_superiore.html; la seconda, larea 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 correttamente con i frame da JavaScript. Mentre nel file frame_superiore.html abbiamo inserito
semplicemente il codice HTML
6a lezione
Per documentarvi ulteriormente sullutilizzo dei frame
HTML, vi consigliamo di visitare la pagina seguente: www.
w3.org/TR/REC-html40/pre
sent/frames.html (in inglese).
Linee guida
per la programmazione
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 JavaScript che abbiamo denominato 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
devono essere caricati in ciascun frame. Notare che nel frame di nome frame_sup viene inserito il contenuto del file frame_superiore_2.html, mentre in
frame_inf il codice HTML di frame_inferiore_2.html.
La funzione JavaScript per la
modifica del contenuto dei frame viene invocata mediante levento Onclick, associato al pulsante Modifica contenuto frame.
Quando programmate con

JavaScript, per evitare di incorrere in fastidiosi errori,
spesso difficili da individuare,
bene ricordarsi di seguire alcune semplici linee guida.
JavaScript un linguaggio
case sensitive. In informatica,
quando un linguaggio o un sistema operativo viene definito
case sensitive significa che
questo fa differenza tra comandi e istruzioni scritti in
maiuscolo od in lettere minuscole.
Per JavaScript una funzione
denominata MiaFunzione differente da unaltra chiamata
miafunzione. Accertatevi, quindi, di riferirvi in un modo univoco a funzioni e variabili.
Gli spazi vengono ignorati.
JavaScript ignora gli spazi presenti allinterno di una istruzione. Ad esempio, listruzione
di assegnamento citta=Milano (senza spazi) equivale a citta = Milano (con gli spazi).
Non dimenticate di chiudere le parentesi.
Qualsiasi parentesi (tonda,
graffa o quadra) venga aperta
in uno script deve essere successivamente chiusa. Per
esempio, se avete aperto una
parentesi graffa per delimitare
le istruzioni che compongono
una certa funzione, ricordatevi
di chiuderla.
Se allinterno di una stringa
desiderate utilizzare simboli
speciali come ; e &, anteponete ad essi la barra rovesciata. Esempio: document.write
(L\uno e l\altro).
E se si commettono errori?
Errare umano e durante lo
sviluppo in JavaScript o in qualunque altro linguaggio di programmazione di errori naturale commetterne molti.
Anche i pi esperti incapperanno certamente in sviste comuni come la mancata chiusura di una parentesi, delle virgolette, la dimenticanza di un
punto e virgola.
In tutti questi casi (e comunque in presenza di un qualunque altro tipo di errore), il vostro script non funzioner.
Tutti i browser Internet incorporano un debugger ossia
uno strumento in grado di rilevare gli errori commessi in fase
di programmazione.
Internet Explorer, per esempio, visualizzer nella barra di
stato, in basso a sinistra, unicona raffigurante un piccolo
triangolo a fondo giallo.
Facendovi doppio clic si otterranno le informazioni dettagliate circa lerrore riscontrato.
Nel nostro caso, com possibile verificare in figura, ci siamo dimenticati di chiudere
una parentesi tonda (il debugger ci segnala riga e carattere
ove stato individuato lerrore, allinterno della pagina
HTML).
Per approfondire...
Allindirizzo www.jsdir.com,
sito Web realizzato e curato da
un team italiano, trovate una
valanga di informazioni sulla
programmazione JavaScript:
tutorial passo-passo, guide online, suggerimenti, esempi pratici, le risposte alle domande
pi frequenti (FAQ), guidano
gli aspiranti webmaster alla
scoperta di JavaScript.
Altri esempi pratici possono
essere reperiti allindirizzo
www.html.it/javascript/tuto
rial/.
10 DHTML: sempre pi dinamici

HTML un linguaggio che
permette di attribuire
maggiore dinamicit alle
pagine Web: la D iniziale sta
per Dynamic HTML a sottolineare che DHTML non solo
un linguaggio puramente descrittivo (cos come HTML) ma
la visione di un Web maggiormente interattivo.
69/88
Con DHTML possibile modificare ogni elemento che

compone le nostre pagine
Web, introducendo effetti speciali, animazioni e la gestione
di ogni singola immagine.
Durante la vostra navigazione in Rete vi sarete certamente imbattuti in menu animati (spesso men a cascata
che si aprono non appena si

sposta il puntatore del mouse
sopra di essi): spesso proprio DHTML che ne consente
la visualizzazione.
DHTML si avvale di un insieme di tecnologie. Per raggiungere lo scopo di attribuire
maggiore dinamicit alle pagine Web, questo linguaggio ri-
corre infatti allutilizzo di tre

componenti tecnici: i linguaggi
di script come JavaScript (ma
anche il VBScript di Microsoft), i fogli di stile (CSS, Cascading Style Sheets) - gi illustrati nella quarta lezione del
nostro corso - ed infine, ovviamente, HTML.
Il punto debole di DHTML ,
6a lezione
Il codice JavaScript va inserito nellintestazione della pagina e permette di stabilire

quale browser Internet si sta utilizzando
per, la compatibilit tra browser. Sia Netscape che Microsoft

hanno da sempre cercato di
imporre la loro visione: talvolta pu accadere, quindi, che
una pagina dinamica DHTML
sia visualizzata correttamente
con Internet Explorer ma non
con Netscape (o viceversa).
quindi necessario assicurarsi di produrre pagine
DHTML che siano perfettamente compatibili con tutti i
browser Internet (che siano,
cio, cross-browser): qualora
non si provvedesse ad effettuare gli opportuni controlli, si
rischierebbe di perdere numerosi visitatori infastiditi dallimpossibilit di visualizzare
correttamente il vostro sito.
Qualora non si riuscisse a rendere cross-browser la propria
pagina DHTML, si pu pensare
di creare due differenti versioni del sito Internet: una, per
esempio, destinata agli utilizzatori di Internet Explorer, laltra agli utenti di Netscape.
Va tenuto comunque presente che il DHTML supportato solo a partire dalla versione 4 di Internet Explorer e Netscape: se prevedete di servirvi
di DHTML nelle vostre pagine
Web, bene indicare i requisiti minimi per una corretta visualizzazione del sito.
Il DHTML si basa sulla struttura DOM (Document Object
Model): si tratta di un modello
che considera qualsiasi documento (pagina Web) come un
oggetto. Ci significa che ogni
documento viene suddiviso in
elementi pi semplici sui quali
possibile operare secondo le
70/88
specifiche della programmazione orientata agli oggetti.

Qualunque oggetto che fa
parte di una pagina Web definito con le classiche tag HTML
- per esempio una qualsiasi immagine <IMG> o un link <A>
(ncora di collegamento, anchor) - accessibile da DHTML
servendosi proprio della struttura DOM e di un linguaggio di
scripting come JavaScript.
Il DOM agisce, quindi, da interfaccia tra il documento
HTML ed il linguaggio di scripting: esso interpreta, infatti,
ogni elemento costitutivo della
pagina Web ed offre i metodi
per accedervi.
Per modificare un elemento
presente nella vostra pagina
Web, sufficiente attribuirgli
un nome. Ad esempio:
<img src=pcopen.gif id=logopcopen>
In questo caso abbiamo assegnato allimmagine pcopen.gif, inserita nel codice della pagina Web mediante lapposito tag <IMG>, il nome logopcopen: tale identificativo ci
servir, in seguito, per modificare le propriet dellimmagine. In alternativa, possibile

utilizzare anche il modello
strutturale. Se limmagine da
modificare la terza che compare nella nostra pagina Web,
si potr usare il codice seguente:
document.images[3]
Il codice indica che stiamo
facendo riferimento alla terza
immagine della collezione
images, contenuta nelloggetto document (la pagina Web).
DHTML consente di spostare gli elementi costitutivi di
una pagina Web senza la necessit di dover ricaricare la
stessa. A tal proposito, suggerito lutilizzo dei tag <DIV> e
<SPAN>, caratteristici dei fogli
di stile (e gi incontrati a pag.
38 nella quarta lezione del nostro corso) in quanto sono pienamente supportati sia da Internet Explorer che da Netscape. Utilizzando <DIV> e <SPAN>
avrete la possibilit, servendovi di DHTML, di spostare al
volo qualsiasi blocco che costituisca la vostra pagina (colonne, paragrafi, riquadri di testo,) senza ricorrere allimpiego di tabelle nidificate.
DHTML permetter di agire
sulle dimensioni e sulla posizione di ciascun blocco <DIV>
e <SPAN> offrendovi un metodo pi semplice e veloce per
creare il layout delle vostre pagine Web. Luso dei fogli di stile consentir, poi, di intervenire sulla scelta dei caratteri (stile, dimensioni,), sulla formattazione dei collegamenti
ipertestuali, sullimpostazione
dei margini e cos via.
Un esempio: creare un menu

a tendina con DHTML
Cimentiamoci subito su di
un esempio pratico: proviamo
a creare un menu a tendina
per la nostra pagina Web: non
Un esempio pratico: creare un men a tendina per il nostro sito utilizzando DHTML
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> (intestazione della pagina HTML), servendoci di un foglio di stile,
quali debbano essere le caratteristiche dei collegamenti
ipertestuali (tag <A>, anchor)
presenti nella pagina Web:
<STYLE>
A:Hover {color:red; textdecoration:none; fontweight:bold }
A {color:black; textdecoration:none; font-size:
10pt; font-family:
Tahoma,Verdana,Arial }
</STYLE>
Il codice JavaScript evidenziato nellimmagine a lato, va
inserito sempre nellintestazione della pagina e consente
di stabilire, in primo luogo,
quale browser Internet si sta
utilizzando.
Come gi anticipato in precedenza, 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 versione del browser in uso ed
usare document.layers[layerid]
nel caso di Netscape, document.all[layerid] nel caso di
Internet Explorer.
Nel corpo della pagina
HTML (<BODY></BODY>), abbiamo inserito una serie di livelli <DIV>. A ciascun blocco
<DIV> stato assegnato un nome identificativo. Si poi fatto
uso delle funzioni apri_tendina
e chiudi_tendina, opportunamente invocate dagli eventi
Onmouseover e Onmouseout
per visualizzare o nascondere,
alloccorrenza, le tendine dei
vari menu dinamici, a seconda
della posizione del puntatore
del mouse.
7a lezione
Progetto
Web Master
di Michele Nasi
1 Il server Web
a produzione di un sito statico, a cui questo corso dedicato, richiede talvolta l'inserimento di componenti dinamici o comunque di componenti esterni alla pagina che avete
costruito staticamente. Pensiamo ad esempio a un sito che offra consigli di viaggio e che includa previsioni del tempo costantemente aggiornate, attingendo a risorse esterne. Bench
la struttura della pagina che
contiene tali previsioni possa
essere statica, cio invariabile,
le informazioni in costante aggiornamento richiedono che al-
meno una sua porzione sia dinamica, ossia venga generata

nel momento in cui il navigatore
la richiede, utilizzando informazioni fresche. Situazioni analoghe si verificano anche quando
il sito chiede una certa interazione ai propri navigatori come
nel caso della compilazione di
inchieste o di votazioni, della
firma del libro degli ospiti (guest book) oppure della ricerca di
pagine all'interno del sito oppure sul Web. Si tratta di operazioni che non possono essere eseguite mediante le funzioni di
programmazione di JavaScript,
viste nella scorsa lezione e

orientate a creare pagine che diventano interattive quando arrivano sul computer del navigatore. Qui la decisione di cosa inserire o visualizzare nella pagina 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'interno delle quali il server aggiunger informazioni provenienti
da altre fonti oppure che sono il
risultato di un'elaborazione interna. Tali pagine verranno ge-
nerate unendo la parte statica e

la parte variabile ogni volta che
un nuovo navigatore le richieder, il che imporr un certo carico elaborativo sul server, ma
consentir di avere contenuti
sempre freschi oppure adatti al
contesto. Ci non significa, tuttavia, che si creato un vero e
proprio sito dinamico, la cui definizione prevede che le pagine
vengano generate dinamicamente nella loro interezza a partire da informazioni registrate in
un database, tema che sar
l'argomento di un prossimo corso.

Lezione 4:
Lezione 6:
HTML 4.01 e CSS
Siti interattivi
sul CD)

CSS e HTML 4.01
Quattro tipi di CSS
I colori del Web
Gestire le immagini
Esercizi
dei parametri
Selettori di classe
Websafe palette

Oggetti e priorit
Eventi e funzioni
DHTML
Lezione 1:
Lezione 2:
HTML
il corso
sul CD
n. 71
sul CD)
Lezione 3:
La tabella come elemento
strutturale
di layout
professionali
consecutive
Esercizi
71/88
Lezione 5:
La ruota colore
Link ipertestuali
Tabelle dimmagini
Mappe immagine
Audio e video
Lezione 7:

Il server Web
I form: la porta per lutilizzo degli script
CGI
Installare e configurare un server Web
Configurazione del sito Web predefinito
in Windows XP Professional
Installare e configurare Apache sotto
Windows
Lultima puntata
Lezione 8:
Promuovere il sito
7a lezione
Che cos un server Web
Per capire come attivare questo genere d'interazione dobbiamo anche capire che cosa
un server Web. Si tratta di un
computer dotato di uno speciale software capace di ricevere
richieste via protocollo HTTP
(Hypertext Markup Protocol) e rispondere mediante l'invio della
pagina che corrisponde all'indirizzo indicato dal navigatore
per mezzo del suo browser.
Il server raccoglie tutti gli elementi necessari alla composizione della pagina e li manda al
browser remoto il quale costruisce la pagina vera e propria
sul video. Nel caso di una pagina 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 composita (in parte statica e in parte
dinamica) avremo il file HTML
che contiene gli elementi fissi, le
immagini e gli elementi variabili da calcolare o da prelevare
dall'esterno e inserire al momento della spedizione.
Giusto per chiarire le differenze 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 elementi che la compongono sono
partiti in direzione del navigatore. Perci comprendiamo che
l'interazione lato client dipende
fortemente dal tipo di browser
utilizzato e ne deve tenere conto, mentre l'interazione lato server invece completamente
svincolata dal browser, ma deve
invece risultare compatibile
con le funzioni e i servizi previsti dal server che intendiamo
utilizzare.
I Server Side Include

Il metodo pi semplice per
inserire elementi variabili all'interno di una pagina consiste nel
collocare nella giusta riga del listato HTML un "segnaposto"
che indichi il nome e la posizione del file esterno che va inserito 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 documento (come ad esempio elementi
di navigazione) oppure per innestare nella nostra pagina parti di una pagina esterna o il risultato dell'elaborazione di un
programma interno. Il server
Web non deve far altro che scorrere la pagina prima di spedirla,
notare la presenza di eventuali
istruzioni di inclusione e allegare la parte indicata. Non richiesta nessuna elaborazione
dei contenuti perci l'operazione non appesantisce il server.
una tecnica che si dimostra
efficace quando gran parte della pagina di tipo statico e l'elemento variabile costituisce una
frazione del contenuto. Il tipo di
include consentito cambia a seconda del server impiegato. Nel
caso di Apache, il pi diffuso tra
i server Web in ambito Linux e
disponibile gratuitamente anche per Windows, si parla di XSSI, ossia Extended Server Side Includes. Si tratta di una serie di
comandi che consentono d'inserire nella pagina corrente un
file esterno con la possibilit
anche di scegliere soluzioni diverse al verificarsi di situazioni
diverse. Microsoft prevede una
soluzione analoga nel suo linguaggio ASP (Active Server Pages), che vedremo brevemente
pi avanti.
I Server Side Include o gli XSSI
offrono numerosi vantaggi: sono facili da imparare, vengono
supportati da numerosi server,
consentono d'inserire informazioni aggiornate in pagine che
altrimenti sarebbero completamente statiche, non dipendono
dal tipo di browser impiegato, i
comandi non compaiono nel
browser perci all'esterno non
si sa da dove provengono le nostre informazioni, consumano
poca potenza di elaborazione.
Ci sono naturalmente anche
svantaggi: il server deve comunque farsi carico di un minimo di attivit elaborativa e perci risponde alle richieste con
un leggero ritardo rispetto alla
spedizione di pagine completamente statiche; inoltre l'attivazione degli SSI pu comportare
problemi di sicurezza, non gravi, e perci alcuni provider possono impedirne l'uso, infine la
loro funzionalit fortemente
influenzata dalla configurazione del server. Diventa perci indispensabile contattare il proprio amministratore di sistema
prima di pianificarne l'impiego.
Come si presenta un SSI

Alla pari di ci che accade in
JavaScript, un comando SSI viene inserito nella pagina HTML
sotto forma di commento, cio
viene preceduto dai simboli <!-e seguito dai simboli -->>.
In tal modo, qualora il server
non riconoscesse il comando e
questo rimanesse all'interno
della pagina che viene spedita
al navigatore, il browser ne
ometterebbe la visualizzazione
considerandolo alla stregua di
un normale commento. In caso
contrario, il riconoscimento del
comando comporta l'eliminazione dello stesso dal listato
della pagina che viene inviata al
navigatore e la sua sostituzione
con l'elemento da inserire. Il comando in sostanza funge da segnaposto e cede il proprio spazio all'elemento da innestare
(include). Molto semplice e molto pratico.
Per un'analisi dei vari co-
mandi e della relativa sintassi rimandiamo alla documentazione dei diversi tipi di server. Affinch vengano riconosciuti e il
server ne esegua l'esplorazione
(parsing) per identificare cosa
inserire e dove, i file che contengono SSI vanno contrassegnati con un suffisso particolare. Spesso si usa il suffisso
SHTML, ma il server pu essere
configurato per accettare qualsiasi altro suffisso (tale discorso
naturalmente non si applica ai
file generati con ASP o PHP, che
vengono comunque tutti elaborati prima di essere inviati, compresa la gestione di eventuali include lato server).
La Common Gateway
Interface
Il secondo passo, pi impegnativo, nella produzione di pagine con contenuto dinamico
consiste nell'affiancare al server 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 lestensione .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 lattributo action,
contenuto nella tag <FORM> di ciascun file HTML, con lindirizzo
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 lattributo action contenuto nella tag
<FORM> del file guest.html.
7a lezione
che elaborino contenuti in base
alle selezioni e alle richieste del

navigatore. In questo caso non
si tratta semplicemente d'inserire contenuti esterni, aggiornati di frequente, come nel caso
degli SSI, ma di costruirli sulla
base di quel che il navigatore
chiede o fa. Tali contenuti possono provenire da fonti esterne,
dal navigatore che risponde a
quesiti posti su pagine precedenti oppure da altri programmi presenti nel sito. Qualunque
ne sia la fonte, tali informazioni
non possono essere visualizzate direttamente, ma richiedono
trattamento, eseguito mediante
uno dei tanti linguaggi di programmazione che possono funzionare sul vostro server Web
oppure su un altro server che
lavori in parallelo.
L'approccio CGI comporta un
carico di lavoro maggiore rispetto ai semplici SSI perci
pu essere necessario allestire
una macchina di appoggio oppure sfruttare le risorse di un sito remoto, come nel caso dei
motori di ricerca che offrono la
possibilit di eseguire ricerche
anche nel nostro sito.
CGI lacronimo di Common
Gateway Interface: si tratta di un
metodo che consente di mettere in comunicazione diversi
programmi presenti sullo stesso server o su server differenti.
I programmi possono essere
scritti in uno qualsiasi dei linguaggi compatibili con CGI: VisualBasic, C, C++, tcl, Perl e AppleScript per citare i pi diffusi.
In particolare, il linguaggio
Perl (Practical Extraction and
Report Language) il pi usato
nellambito della programmazione CGI perch nasce con una
predisposizione per la gestione
delle informazioni, come si capisce anche dal nome. Ogni vol-
ta che dovete elaborare file di

testo (il che include naturalmente anche numeri, intesi come informazione), Perl insuperabile. 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 computer client non deve conoscere i
vari linguaggi di programmazione: 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'utente. Ci naturalmente pone
problemi di sicurezza superiori
rispetto a quelli legati all'uso
degli SSI e perci solo alcuni
provider sono disponibili a consentire l'uso di CGI sui propri
server. Un esempio tipico nell'impiego di quest'ultimo nella
compilazione di form (moduli
online) che raccolgono dati dall'utente e gli restituiscono risposte. I form servono agli impieghi pi disparati: registrazione dei nuovi utenti, compilazione di questionari, votazioni su
sondaggi, acquisto di prodotti,
raccolta dei parametri per una
ricerca, e via dicendo. Spesso si
usa CGI anche per allestire guestbook (libro degli ospiti) dove i
visitatori possano inserire il loro 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 indirizzi del browser Internet, il nostro computer (client) contatta
Schema di funzionamento dellapplicazione CGI

Form compilato da navigatore
e inviato al server
Informazioni contenute nel form

passate ad applicazione tramite CGI
Form
Web
Applicazione
con interfaccia
CGI
Browser
SERVER
Risposta inviata al navigatore
73/88
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 trasmette al browser Internet che
lo interpreta e lo mostra a video. Nel caso di pagine dinamiche, il server esegue localmente
l'elaborazione necessaria, ossia
l'inserimento di un include oppure l'elaborazione di contenuti mediante CGI e trasmette al
browser del navigatore solo il risultato.
Molti di voi avranno visto siti con il classico contatore degli
accessi. Si tratta di un contenuto dinamico che incrementa automaticamente a ogni nuova visita. Bene, il contatore costituisce un classico esempio di file
generato mediante uno script
CGI eseguito direttamente sul
server. Uno script, lo ricordiamo, un file che contiene una
serie di righe di codice che vengono interpretate, una per una,
dall'interprete del linguaggio in
cui sono state scritte e convertite in comandi eseguibili dal
server. Tale file, una volta eseguito (in questo caso allatto
dellingresso nel sito Web di un
nuovo visitatore), legge lultimo
valore assunto dal contatore (e
memorizzato sul disco fisso del
server Web), lo incrementa di
uno quindi spedisce al client
loutput (in questo caso il valore 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 allinterno della
quale il server possa localizzarli. Se avete acquistato un servizio di hosting per il vostro sito
Internet presso un qualsiasi
provider Internet, verificate che
lo spazio Web a vostra disposizione 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 acquistato il vostro spazio Web e cercate una cartella denominata cgibin. Lidentificazione della cartella cgi-bin e delle modalit per
laccesso alla stessa costituiscono le prime operazioni da
compiere: proprio (e solo) da
questa cartella, infatti, potranno essere eseguiti i vostri script
CGI. Non tutti gli amministratori consentono lutilizzo di CGI,
solitamente per motivi di sicurezza. Se possibile, quindi
sempre bene chiedere al proprio provider se abiliti le funzioni CGI e se offra la compatibilit con i linguaggi che intendiamo utilizzare.
Pi avanti, sempre con lo
scopo di testare i nostri script
CGI prima di caricarli sul server
Web, vedremo come configurare Apache e Microsoft IIS (i server Web pi utilizzati in tutto il
mondo) per eseguirli in locale. Il
collaudo in locale offrir numerosi vantaggi evitando la necessit di tenere sempre attiva la
connessione Internet e d'impegnarsi in continui upload tramite protocollo FTP.
Perl, gratuito e "testuale"

Abbiamo gi evidenziato come i CGI possano essere scritti
in vari linguaggi: abbiamo scelto per voi Perl, il pi utilizzato.
completamente gratuito e supera qualsiasi altro linguaggio
nelle sue funzioni di elaborazioni dei testi. Sono molte le caratteristiche che rendono il Perl un
linguaggio assai interessante e
piacevole da utilizzare: distingue automaticamente tra
stringhe di testo e numeri a seconda delloperatore utilizzato
(quindi non necessario perdere tempo e sprecare risorse per
la conversione di un numero in
stringa o viceversa); permette
di separare rapidamente i caratteri in campi ed in dati che
possono poi essere utilizzati
dallo script CGI-Perl in vari modi; facilita il trasporto (porting)
degli script sviluppati su piattaforme diverse (ad esempio da
Windows a Linux e viceversa).
Per la stesura del codice Perl
o per la visualizzazione di
script, suggeriamo lutilizzo 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 caldeggiare ladozione di un editor
testuale pi evoluto: ad esempio, TextPad (www.textpad.
com) oppure HTML-Kit gi presentato nelle precedenti lezioni
del nostro corso. Una volta realizzato lo script Perl sul proprio
personal computer, si dovr
quindi provvedere a caricarlo
(via FTP) nella cartella cgi-bin,
allinterno dello spazio Web
messo a disposizione dal provider Internet.
In questo modo lo script potr essere richiamato e mandato in esecuzione.
7a lezione
2 I form: la porta per lutilizzo degli script CGI

ella scorsa lezione abbiamo gi illustrato, brevemente, cosa sono e a che
cosa servono i moduli HTML (o
form): essi sono una sorta di
questionari compilabili on line
da parte dei visitatori di un sito
Web. Inizialmente il loro utilizzo era limitato: si adottavano
esclusivamente per raccogliere
informazioni sulle opinioni e
sulle preferenze 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 enormemente ampliate:
vengono utilizzati, su un sempre maggior numero di siti, per
interagire con lutente.
Nella lezione precedente abbiamo visto com possibile interagire con un form HTML, direttamente sul personal computer client, tramite JavaScript.
Questa volta aggiungiamo un
altro tassello: ci proponiamo
di illustrare come gli script CGI
possano interagire con i form.
La differenza abissale: mentre
nella scorsa lezione ci siamo
occupati dellaspetto client, qui
spostiamo lattenzione sullambiente server ricorrendo proprio allutilizzo di CGI-Perl. I
form HTML sono i migliori candidati per lacquisizione di

informazioni da parte dellutente che visita il sito Web: sono quindi gli strumenti pi
adatti per interagire con i visitatori.
Nella figura 1 potete notare
tutti gli elementi caratteristici
di un classico form.
In primo luogo, ricordiamo
che qualsiasi form HTML deve
essere racchiuso entro le apposite tag <FORM> e </FORM>.
La tag iniziale <FORM> contiene anche due importanti parametri (method e action), oltre al
nome attribuito al form (indicato col parametro name): il loro significato sar presto chiaro. La restante struttura del
form deve essere composta seguendo le specifiche HTML che
consentono linserimento di
caselle di testo, checkbox, option box, pulsanti e cos via.
Per approfondire lutilizzo
dei form HTML e scoprire tutte
le possibilit che questi offrono, vi consigliamo di fare riferimento allindirizzo Internet
www.w3.org/TR/REC-html40/
interact/forms.html (in lingua
inglese).
Le tag <INPUT>, specificate
allinterno del corpo del form,
consentono di porre, sulla pa-
gina HTML, campi per linserimento del testo (se il parametro type impostato a text), caselle di tipo checkbox (che
possono essere o meno spuntate; se il parametro type impostato a checkbox), option box
(se il parametro type impostato a radio), pulsanti di invio
(con il parametro type impostato a submit) e di reset (annullamento) dei dati (con type
impostato a reset).
La parte pi importante del
form risulta essere comunque
proprio la tag <FORM>: lattributo method segnala al browser Internet che i dati inseriti
dallutente allinterno del form
debbono essere trasmessi al
server con la modalit post o
get; lattributo action indica invece che, dopo la pressione del
pulsante di invio dei dati deve
essere raggiunto ed invocato lo
script CGI specificato (nellesempio http://www.openma
ster.info/cgi-bin/guest.cgi).
La prima applicazione CGI

Per verificare che gli script
Perl, memorizzati nella cartella
cgi-bin del vostro server Web,
vengano correttamente eseguiti, provate a creare con un
qualsiasi editor di testo (va bene anche il Blocco Note di Windows) un file contenente quanto segue:
#!/usr/local/bin/perl
#Questa riga indica dove
localizzato linterprete Perl
print "Content-type:
text/html\n\n";
#Questa linea consente di
stabilire che tipo di
contenuto deve essere visualizzato
print "Ecco la mia prima
applicazione CGI!";
#Questa linea imposta il
testo che dovr essere visualizzato sulla pagina Web
1. Lattributo method indica che i dati inseriti nel form devono essere trasmessi con
la modalit post.
2. Action indica lo script CGI che deve essere avviato dopo la pressione del pulsante
Submit (Invia).
3. Le tag <INPUT type=text> permettono di inserire altrettanti campi per
linserimento di testo.
4. La tag <TEXTAREA> consente linserimento di un testo lungo (la casella per
linserimento del testo occupa, in questo caso, 5 righe e 50 colonne).
5. I pulsanti Submit e Reset permettono, rispettivamente, la trasmissione al server
Web delle informazioni inserite e la pulizia del contenuto del form.
74/88
Memorizzate il file con il nome di test.pl e caricatelo nella

cartella cgi-bin del vostro server. Provate quindi ad inserire
nella barra degli indirizzi del
browser Internet, il seguente
URL: http://www.openmaster.
info/cgi-bin/test.pl (sostituite,
ovviamente, www.openma
ster.info con lindirizzo del vostro server Web).
Se, sulla pagina Internet,
verr mostrato il messaggio
Ecco la mia prima applicazione CGI congratulazioni!
Avrete eseguito il vostro primo
script CGI.
In definitiva, il file test.pl consente di verificare che gli script
Perl siano correttamente supportati.
Fondamenti di
programmazione in Perl
Perl il linguaggio pi popolare per la stesura di script Perl.
Cos come nel caso di JavaScript, parliamo di script e non
di programmi. bene infatti
sottolineare la differenza che
esiste tra i due termini: gli
script sono righe di codice che
indicano le azioni che devono
essere compiute da parte del
computer sul quale sono eseguiti; ogni riga viene interpretata (nel caso di JavaScript dal
browser Internet, nel caso di
Perl dal software residente sul
server). I programmi sono invece preventivamente compilati, in modo da risultare pi
veloci da eseguire (seppur decisamente pi ingombranti
degli script).
Per programmare in Perl
non serve nulla di particolare:
sufficiente un normale editor
testuale come il Blocco Note di
Windows oppure - meglio TextPad, 1st Page 2000 o
software similari. Chi lavora su
Linux pu orientarsi sullutilizzo di Emacs o di Vi (riconosce
molti linguaggi ed in grado di
colorare opportunamente comandi, funzioni e parole chiave) - disponibile anche nella
pi recente versione grafica denominata GVim -.
Le variabili e i tipi
Gi dalla precedente lezione
sapete cosa sono le variabili.
Si tratta di appositi contenitori (porzioni della memoria)
allinterno dei quali possibile
memorizzare ogni tipo di dato.
In Perl necessario anteporre
al nome della variabile unindicazione che permette di stabilire il tipo di dato che verr in
essa memorizzato.
Se si intende salvare in una
7a lezione
variabile un tipo di dato scala-
re cio un numero, una stringa

(un testo) o una costante, indispensabile anteporre, al nome della variabile, il simbolo
del dollaro ($). Ad esempio,
$nome una variabile di tipo
scalare che potr essere utilizzata per memorizzare una
stringa di testo.
Oltre agli scalari, esistono in
Perl altri tipi di variabili.
Anteponendo il carattere @
(at o chiocciolina) al nome della variabile, possibile inizializzarla come variabile di tipo
array (chiamati anche matrici).
Gli array sono dei gruppi di
scalari: ci significa che allinterno di una variabile di tipo array possibile memorizzare un
insieme di valori (stringhe di
testo, numeri, costanti). Un array pu contenere da zero elementi sino a quanti sono consentiti dal quantitativo di memoria in uso.
Un esempio di array il seguente:
@redazione = ($direttore,
$caporedattore,$caposervizio,
Gruppo Editoriale Agepe,$impiegati)
Com possibile notare, larray Redazione formato da
cinque elementi ordinati: quattro stringhe (direttore, caporedattore, caposervizio e impiegati) ed una costante di tipo
stringa opportunamente delimitata (com obbligatorio) tra
apici.
Esiste, poi, un tipo denominato hash (o array associativo):
questo permette di abbinare,
in ununica variabile, un insieme 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 lesperienza ci si accorger che gli hash possono rappresentare un ottimo strumento: essi infatti consentono di
correlare, in ununica variabile
immediatamente accessibile,
un nome ed il relativo valore.
Listruzione print
e il codice HTML
Nel primo esempio di script
CGI abbiamo utilizzato ununica istruzione Perl: si tratta di
print. Analogamente a document.write di JavaScript, consente di stampare, sulla pagina Web, una stringa di testo.
Bisogna sempre ricordare,
se si vuole visualizzare qualco-
75/88
sa su una pagina Web, di porre

inizialmente listruzione print
"Content-type: text/html\n\n";.
In questo modo si comunicher al browser Internet che
dovr aspettarsi larrivo di una
pagina in formato HTML.
Tramite listruzione print, si
pu stampare sulla pagina Web
anche del codice HTML. Verificate, 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 come gli script CGI consentano di
interagire con lutente che visita il nostro sito. Tale interazione si concretizza con luso di
script CGI collegati a normali
form HTML. Uno degli accorgimenti pi importanti per ricevere dati, consiste nel contrassegnare ogni campo che costituisce il form con un nome
identificativo. Loperazione
del tutto analoga a quanto gi
visto nella scorsa lezione con il
JavaScript: sufficiente aggiungere, allinterno dei marcatori <INPUT>, <SELECT>, <TEXTAREA> lattributo name.
Provate ad analizzare il codice HTML del file guest.html: ciascun campo che costituisce il
form per linserimento dei dati
del libro degli ospiti identificato con un attributo name.
Lo script CGI acquisir i dati
inseriti dallutente in ciascun
campo del form proprio riferendosi agli attributi name:
scegliete, quindi, per ciascun
campo, un identificativo adatto
(fig. 2).
Ma come vengono passati i
dati allo script CGI che deve riceverli eD elaborarli? Lattributo action, da inserire nella tag
<FORM>, permette di specificare lo script CGI che dovr ac2
quisire le informazioni inserite

nel form HTML mentre lattributo method consente di stabilire la modalit di passaggio
dei dati.
I possibili valori assegnabili
allattributo method sono POST
e GET. Il primo consente di inviare allo script CGI, memorizzato sul server Web, una quantit illimitata di dati.
Proprio per questo motivo
il metodo pi utilizzato. Quando si utilizza il metodo POST,
inoltre, sulla barra degli indirizzi non vengono visualizzate
informazioni sui dati che vengono trasmessi al CGI.
Il metodo GET quindi scarsamente utilizzato quando si
vogliono acquisire dei dati da
un normale form HTML.
bene per precisare che i
form non rappresentano lunico modo per trasmettere dati
ad uno script CGI: infatti possibile inviarli anche tramite un
normale link HTML del tipo <A
HREF>. Ad esempio il link seguente, 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
lanno 2002</a>
In questo caso, per il passaggio dei dati, viene utilizzato
il metodo GET.
Osservate il formato da utilizzare per linvio dei dati: dopo
il punto interrogativo deve seguire il nome del dato, il simbolo di uguaglianza quindi il
valore. Qualora si debbano inviare pi dati necessario separarli con lutilizzo del simbolo & (fig. 3).
Le variabili dambiente contengono il gruppo di dati che
viene inviato allo script CGI residente sul server Web e sono
memorizzate in una variabile di
tipo hash denominata %ENV.
La variabile ambiente REQUEST_METHOD consente di
stabilire con quale metodo sono stati passati i dati allo script
CGI mentre QUERY_STRING
permette di visualizzare il valore ricevuto tramite il metodo
GET.
Lo script libro.pl che viene
invocato dal link HTML (ved. file libro.html) offre la possibilit
di verificare luso delle variabili dambiente.
Notate che largomento della
variabile $ENV deve essere
racchiuso tra parentesi graffe
7a lezione
ed apici. Esistono altre variabili dambiente: CONTENT_
LENGTH consente di stabilire la
lunghezza dei dati trasmessi
col metodo POST; HTTP_USER_
AGENT di recuperare le informazioni sul browser e sul sistema operativo utilizzati dallutente; HTTP_REFERER di ottenere lindirizzo della pagina
Web che ha richiamato lesecuzione dello script CGI.
Il CGI variabili_ambiente.pl
permette di ottenere la lista
completa dei valori assunti da
tutte le variabili dambiente al
momento della sua esecuzione.
Proviamo ora a cimentarci
con lutilizzo del metodo POST.
Immaginiamo di aver creato
una pagina Web (ved. il file sondaggio.html) contenente, al suo
interno, il seguente codice per
la visualizzazione di un form
(listato 1):
Al solito, lattributo action
consente di indicare lo script
CGI cui devono essere passati i
dati inseriti nel form; method

stabilisce la modalit di invio
degli stessi.
Com possibile sviluppare
uno script CGI che acquisisca
le informazioni trasmessegli
dal form con lutilizzo del metodo POST?
Non ci dilungheremo qui in
una trattazione dettagliata del
problema perch meriterebbe
unanalisi piuttosto approfondita. Abbiamo comunque gi
visto come, quando un utente
clicca sul pulsante di invio, i
dati del form vengano trasmessi al server.
Tali informazioni, per, per
poter essere utilizzabili, devono essere confezionate in un
formato correttamente leggibile da parte del vostro script
CGI.
I visitatori del vostro sito
Web si aspettano che, inserendo dei dati in un form, venga restituito loro un risultato: talvolta pu trattarsi di una cosa
semplice come linvio di un

messaggio -, altre volte si devono gestire funzionalit pi
complesse come linoltro di un
ordine di acquisto.
In ogni caso, lo script CGI
che deve elaborare le informazioni inserite nel form ha bisogno di quei dati. Abbiamo gi
visto come i dati possano provenire da fonti diverse: da normali form HTML, da link, da variabili dambiente.
Quando un utente invia i dati inseriti nel form cliccando
sullapposito pulsante submit,
o quando clicca su un link (come quello che invocava lo
script libro.pl), il server riceve i
dati sotto forma di coppie nome-valore, in un unico blocco
continuo.
Lo script CGI, per poter far
uso di tali informazioni, deve
necessariamente scomporle in
pezzetti pi piccoli: il processo
prende il nome di parsing.
Nel nostro esempio, dopo
LISTATO 1
<form name="form_sondaggio" method="post" action="http://www.openmaster.info/cgi-bin/sondaggio.pl">
Nome:<br><input type="text" name="txt_nome" size="30"><br>
Età:<br><input type="text" name="txt_eta" size="3"><br>
<br>Giudizio attribuito al nostro sito:<br>
<input name="risp1" type="radio" value="eccellente">Eccellente<br>
<input name="risp1" type="radio" value="buono">Buono<br>
<input name="risp1" type="radio" value="sufficiente">Sufficiente<br>
<input name="risp1" type="radio" value="insufficiente">Insufficiente<br>
<input name="risp1" type="radio" value="mediocre">Mediocre<br>
Messaggio:<br><textarea name="txt_messaggio" rows="5" cols="50"></textarea><br>
<input type="submit" value="Invia">
<input type="reset" value="Annulla">
</form>
che lutente avr cliccato sul

pulsante Invia, i dati trasmessi
allo script sondaggio.pl assumeranno una forma simile alla seguente: txt_nome=Mario+ Rossi&Eta=30&risp1=buono.
Il parsing dei dati permette
di scomporre le informazioni
ricevute nella forma che lo
script CGI si aspetta.
Il blocco racchiuso tra i commenti #inizio_parsing e #fine_parsing nello script sondaggio.pl effettua proprio il parsing dei dati ricevuti dal form
HTML contenuto in sondaggio.html.
Esempi e risorse
per approfondire
Chi volesse approfondire largomento programmazione CGIPerl, estremamente vasto e sfaccettato, pu fare riferimento ai
siti
Web
www.perl.com,
www.perl.org ed al newsgroup
italiano it.comp.www.cgi (consultabile anche via Web allindirizzo http://groups.google.com/
groups?hl=it&lr=&ie=UTF-8&
group=it.comp.www.cgi).
Chi invece fosse interessato
allutilizzo di script CGI che consentano la visualizzazione di
contatori grafici e testuali per il
proprio sito Web, guestbook,
piccoli motori di ricerca, carrelli della spesa, mailing list e cos
via, pu fare riferimento al sito
http://cgipoint.html.it: possibile reperire qui unampia raccolta di link verso siti Web che
offrono materiale in modo del
tutto gratuito.
3 Installare e configurare un server Web

bbiamo gi anticipato come Apache e Microsoft IIS
siano i server Web pi utilizzati nel mondo e come i CGI
rappresentino un primo esempio di script server-side: essi
vengono eseguiti direttamente
sul server; il risultato delloperazione viene quindi trasmesso al browser (client) dellutente che sta visitando il sito
Web. Nel caso di JavaScript, invece, cos come abbiamo avuto modo di apprendere nella
scorsa lezione, gli script contenenti le operazioni da effettuare vengono trasmessi in chiaro
- cos come sono - al browser
Internet, interpretati ed ese-
76/88
guiti su ciascun computer

client.
Lobiettivo 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 programmazione lato server.
Comprendere come operano Apache o IIS consentir,
dapprima, di convertire - a
mero scopo didattico - un personal computer di casa o dellufficio a server Web: potrete
effettuare qui le vostre prime
prove di configurazione.
Una volta che il sistema ri-
sulter adeguatamente configurato, potrete utilizzarlo per

testare le vostre pagine Web facenti uso di tecniche di programmazione che implicano
linterazione con il server, prima ancora di caricarle sullo
spazio Web messovi a disposizione dal vostro provider Internet.
Chi sviluppa siti Web dinamici, infatti, bene allestisca a casa propria o nel proprio ufficio - uno o pi server Web in
modo tale da verificare il perfetto funzionamento delle pagine realizzate prima ancora
di porle online.
I pi volenterosi ed i pi in-
teressati allargomento, potranno raffinare le stesse conoscenze con lobiettivo di allestire un vero e proprio server Web personale. Chi dispone di connessioni Internet a
larga banda (ADSL o fibra ottica) pu provare a rendere uno
o pi siti Web accessibili al
mondo intero direttamente da
uno dei propri computer di casa o dellufficio. Chi possiede
una rete locale pu pensare alla realizzazione di servizi di
gestione della propria attivit
basati su Intranet.
Il lettore avr quindi gi
compreso come la conoscenza
del funzionamento del server
7a lezione
Web apra enormi possibilit.
Va sottolineato che la realizzazione di progetti complessi implicher la necessit di misurarsi immediatamente con problematiche assai importanti
come quella della sicurezza.
Se non si vuole vedere il proprio server Web violato dallesterno, attraverso la Rete, da
parte di hacker e malintenzionati, si dovr imparare ad applicare patch e severe policy di
sicurezza. Queste tematiche,
che necessiterebbero una trattazione ampia ed articolata, saranno oggetto di servizi futuri.
Server Web professionali

Al giorno doggi sono disponibili numerosi server Web
(gratuiti o meno): alcuni di essi sono liberamente prelevabili da Internet in modo che possano esserne saggiate tutte le
caratteristiche.
Lindagine che Netcraft effettua mensilmente (www.net
craft.com) suggerisce quali
siano, al momento, i server
Web pi utilizzati in tutto il
mondo. Secondo le statistiche
disponibili allindirizzo www.
netcraft.com/survey/, nel mese di marzo 2003, Apache risultava in uso sul 62,5% dei
server totali a livello mondiale
mentre Microsoft IIS sul 27%.
Gli aspetti che vanno considerati prima della messa in
opera di un server Web sono
la facilit dinstallazione e di
configurazione, le possibilit
di personalizzazione, le sue
caratteristiche peculiari, le
sue dimensioni, le performance garantite ed il consumo di
risorse macchina, il supporto
di transazioni sicure, la disponibilit del codice sorgente, la
puntualit con cui vengono rilasciati aggiornamenti, eventuali patch e nuove versioni, il
supporto tecnico, il supporto
di pi piattaforme hardwaresoftware, la disponibilit di
versioni gratuite. I server Web
disponibili oggi non consentono solo di restituire pagine statiche 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 concepito come un insieme di pagine statiche collegate da semplici collegamenti ipertestuali
(link) sono ormai remoti.
Gli sviluppatori di pagine
Web hanno sentito infatti, da
subito, lesigenza di svincolar-
77/88
si dalla staticit dellHTML.

Nacquero, quindi, i primi linguaggi server-side: lintento era
quello di garantire una maggiore interattivit delle pagine
Internet, restituendo allutente
solo le informazioni cui egli
era effettivamente interessato.
CGI proprio una delle prime tecnologie che vennero offerte agli sviluppatori per rendere maggiormente dinamici i
propri progetti sul Web.
Dopo CGI hanno preso ampiamente piede ASP, PHP,
ColdFusion e JSP mentre sta
cominciando a fare capolino il
nuovo Microsoft .NET.
Il denominatore comune dei
linguaggi di scripting server-side consiste nel fatto che il codice viene eseguito e interpretato direttamente sul server
che ospita il sito Internet (una
situazione inversa rispetto a
quanto accade nel caso di JavaScript).
In questo modo possibile
acquisire dallutente la lista
delle informazioni alle quali
egli interessato, ricercarle
sul server quindi proporgliele
sotto forma di una normale
pagina HTML, preparata al volo direttamente sul server
Web. Il processo del tutto
trasparente agli occhi dellutente.
Linguaggi come ASP e PHP
hanno aperto scenari fantastici, impensabili allepoca in cui
tutto il Web era immobile, condizionato dalla staticit dellHTML: si pensi, a mero titolo
esemplificativo, che oggi
possibile generare automaticamente pagine HTML riversando, al loro interno, il contenuto di un database. In pratica, immaginate di poter memorizzare tutte le informazioni che dovranno essere inserite nel vostro sito Web (ad
esempio, il catalogo dei vostri
prodotti con nome, descrizione ed altri dati caratterizzanti)
in unico database. Grazie allutilizzo di script server-side
il server Web sar in grado di
attingere dal database solo le
informazioni alle quali il visitatore interessato, comporre
una normale pagina HTML, inserirvi allinterno i dati richiesti e proporre il tutto allutente. Nel caso di un catalogo memorizzato allinterno di un database (per esempio, in formato Microsoft Access), si dovr esclusivamente realizzare
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 linterfaccia 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 dallesterno 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 lindirizzo 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 dellazienda semplicemente da uninterfaccia 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
le informazioni e di generare la
pagina Web.
In questo modo si eviter di
sprecare tempo e risorse nello
sviluppo di una pagina HTML
statica per ciascun prodotto
che si vuole mettere in Rete.
Eventuali modifiche (grafiche
e non) dovranno essere inoltre
applicate solo allo script server-side e non ad ogni singola
pagina HTML! Presenteremo
linguaggi come ASP e PHP nel
prossimo futuro.
Installare e configurare IIS

Internet Information Services
(IIS) il server Web che Microsoft mette a disposizione
nelle versioni Professional e
Server di Windows 2000 ed in
Windows XP Professional (di
Windows 2003 Server, in test
presso diverse aziende gi da
un paio di anni, atteso per i
primi di maggio). Le differenze
tra lIIS incluso nelle versioni
Server e quello che viene fornito con le versioni Professional sono notevoli (a tal proposito, fate riferimento al box di
approfondimento qui sopra).
Sostanzialmente, la versione di IIS inclusa in Windows
XP Professional pu essere
utilizzata con il solo scopo di
sviluppare e testare a fondo i
siti Web che si stanno realizzando, prima ancora di pubblicarli on line (sul server
Web messo a disposizione dal
proprio provider Internet). Tale versione di IIS infatti assolutamente inadatta se si vuole
allestire un server professionale.
La versione di IIS inclusa in
Windows XP Professional la
stessa che viene fornita insieme con Windows 2000 Professional (cambia solo il numero
della versione: IIS 5.1 in luogo
di 5.0). In Windows XP Professional, linstallazione di IIS deve essere avviata manualmen-
7a lezione
4
te accedendo al Pannello di
controllo di Windows, cliccando su Installazione applicazioni quindi su Installazione componenti di Windows.
Dalla lista dei componenti
installabili, selezionate la voce
Internet Information Service
(IIS) quindi cliccate sul pulsante Dettagli. Qualora siate
interessati ad allestire solo un
server Web, potete limitarvi a
spuntare le caselle File comuni, Servizio Web, Snap-in Inter-
net Information Services.

Cliccando su OK vi verr richiesto di inserire il CD ROM
di installazione di Windows
XP.
Al termine della fase di setup, che proceder in modo
automatico, consigliamo di
riavviare il sistema operativo
(fig. 4). Per controllare che IIS
sia installato e funzionante, avviate il browser Internet quindi digitate, nella barra degli
indirizzi, http://localhost (localhost detto anche indirizzo
di loopback ed identifica il vostro stesso computer).
Il server Web (IIS) dovrebbe
rispondere alla vostra richiesta mostrandovi la pagina di
default.
Se il computer connesso
in rete locale, provate ad accedere alla visualizzazione
della pagina HTML di default
di IIS da un client qualsiasi.
Per far ci eseguite Internet

Explorer (o il browser installato) e digitate, come URL,
http:// seguito dal nome del
computer sul quale in esecuzione IIS (per esempio:
http://michelesrv).
Per verificare il nome assegnato al computer sul quale
avete provveduto ad installare
IIS, accedete al Pannello di controllo, fate doppio clic sullicona Sistema, cliccate sulla
scheda Nome computer.
Il pulsante Cambia permette di modificare a proprio
piacimento il nome della macchina (fig. 5). In alternativa,
potete provare a raggiungere
la macchina IIS facendo riferimento al suo indirizzo IP.
Supponiamo che allinterno
della rete locale gli sia stato
assegnato lIP 192.168.0.4: provate a digitare http://
192.168.0.4 da un qualsiasi
personal computer della LAN

per accedere alla pagina predefinita proposta da IIS.
Se poi il computer collegato ad Internet dovrebbe essere possibile raggiungerlo
dallesterno indicando lIP assegnato dal provider al momento della connessione.
4 Configurazione del sito Web predefinito

ccedendo al Pannello di
controllo di Windows XP
Professional e facendo
doppio clic sullicona Strumenti di amministrazione quindi su
Internet Information Services, si
acceder alla finestra di configurazione del server IIS. Da
questa finestra possibile gestire siti Web, funzionalit FTP
e SMTP.
Dopo linstallazione di IIS,
viene automaticamente creato
un sito Web predefinito contenente, essenzialmente, i riferimenti ai file della guida di Internet Information Services.
opportuno considerare le
varie opzioni per la configurazione di un sito Web da un punto di vista gerarchico: maggiore il livello gerarchico dellelemento sul quale si stanno apportando delle modifiche,
maggiore sar limpatto globale degli stessi interventi.
Molte schede per la configurazione compaiono a pi livelli gerarchici: ci significa che
effettuando una modifica al livello pi alto verr influenzato
un maggior numero di oggetti
componenti il sito.
Fate clic con il tasto destro
78/88
del mouse sulla voce Sito predefinito quindi scegliete Propriet. La prima parte della finestra contiene le informazioni necessarie per lidentificazione del sito, compresi nome
e indirizzo. Vi sono poi due voci relative alle porte da utilizzare: la prima, per gli accessi
anonimi dal server, la seconda
per laccesso SSL. Una delle limitazioni che Windows XP Professional impone consiste nel
fatto di mettere a disposizione
lutilizzo, per le connessioni
SSL, di ununica porta: la 443.
Laltra grossa limitazione
della versione di IIS contenuta
in Windows XP Professional,
consiste nel fatto che il numero di connessioni che possono
essere effettuate limitato a
10. Questa restrizione rende
Windows XP Professional assolutamente inadatto per la gestione di un normale sito Web
che preveda un numero di accessi contemporanei superiore.
Il campo Timeout connessione permette di stabilire il tempo massimo (in secondi) durante il quale un utente inattivo - che non naviga cio al-
linterno del sito - pu restare

collegato al server IIS.
Poich lutilizzo della versione di IIS inclusa in Windows
XP Professional consigliato
pressoch esclusivamente allinterno di una rete locale Intranet, suggeriamo di ridurre il
valore impostato nel campo Timeout connessione in modo da
agevolare lingresso di utenti
in attesa e di accelerare le prestazioni del sistema.
Suggeriamo, inoltre, di attivare la casella Abilita keep-alive HTTP: possibile cos migliorare le prestazioni del server permettendo ad ogni client
di mantenere attiva la connessione con IIS anzich crearne
una nuova ad ogni richiesta di
accesso.
La sezione Consenti registrazione attivit permette di configurare le impostazioni relative alla creazione dei file di log
ossia dei file testuali che registrano tutti i tentativi di accesso al server IIS. Se si prevede
di utilizzare IIS solo allinterno
della propria Intranet, possibile disattivare la casella Consenti registrazione attivit in
modo da evitare loccupazione
di spazio su disco. In caso contrario, se si prevede che la

macchina sulla quale installato IIS debba essere raggiungibile anche dalla Rete Internet, bene attivare lutilizzo
dei file di log in modo da rilevare anche eventuali tentativi
di intrusione. Il formato pi diffuso per la creazione dei file di
log il W3C Extended Log File
Format che costituisce lo standard per la maggior parte dei
server Web ed supportato
anche dagli sviluppatori di
strumenti di analisi e gestione
(fig. 6).

6
7a lezione
A questo livello non ci sembra opportuno dilungarci sui

filtri ISAPI: basti sapere che essi consentono di eseguire controlli in background sul sito
Web. Vi sono diversi tipi di filtri: alcuni soddisfano esigenze
relative alla sicurezza, altri la
mappatura degli URL e lelaborazione delle intestazioni richieste.
La scheda Home Directory
permette invece di specificare
dove debbono essere reperiti i
file che compongono il sito
Web che si sta configurando in
IIS. Le scelte possibili sono tre:
Directory situata in questo computer, Directory condivisa situata in un altro computer e
Reindirizzamento a un URL.
La scheda pu assumere diverse forme a seconda che si
sia selezionata una directory,
una directory virtuale o un file
(fig.7). La sezione sottostante
della finestra permette di impostare le tipologie di accesso
consentite.
Accesso origine script, se selezionato, e se sono impostati i
premessi di lettura e/o scrittura, permette l'accesso al codice sorgente degli script; Lettura
consente l'accesso alla risorsa
in sola lettura; Scrittura permette l'accesso alla risorsa in
lettura/scrittura; Esplorazione
directory se selezionato, visua7
79/88
lizza in formato ipertestuale il

contenuto di una cartella non
virtuale. Per visualizzare il
contenuto di queste ultime bisogner conoscerne l'alias associato. Se l'opzione non abilitata e l'utente specifica all'interno dell'URL un percorso ad
una risorsa inesistente, il server Web risponder con un
messaggio di errore (accesso
negato); Registra visite aggiunge la risorsa a quelle da monitorare per mezzo dei file di log;
Indicizza questa risorsa se il
servizio di indicizzazione attivo, aggiunge la risorsa a quelle da indicizzare.
Il menU a tendina Autorizzazioni di esecuzione permette di
indicare il livello di esecuzione
autorizzato sulla risorsa: solo
file HTML, script oppure script
ed eseguibili.
La scheda Documenti consente di impostare le pagine
che devono essere automaticamente proposte allutente
qualora egli non specifichi il
nome di un file memorizzato
sul server.
Primi accorgimenti
e creazione di una
directory virtuale
Microsoft stessa, per motivi
di sicurezza, consiglia di eliminare i riferimenti ai file della
guida ed agli esempi installati
automaticamente insieme con
IIS (per ottenere la lista completa delle patch da installare e
delle politiche di sicurezza che
consigliabile applicare, suggeriamo lutilizzo del software
Microsoft Baseline Security
Analyzer (MBSA), gi presentato nei numeri 78 (a pagina
61) e 79 (a pagina 69) di PC
Open.
Per far questo eliminate, dalla finestra di amministrazione
di IIS, tutte le directory virtuali create dopo linstallazione di
Internet Information Services
(cancellate le directory virtuali Scripts, IISAdmin, IISSamples,
MSADC, IISHelp, WebPub, Printers) e tutti i contenuti predefiniti (cancellate le cartelle inetsrv\iisadmin e inetsrv\iisadmpwd entrambe contenute nella cartella \winnt\system32 -; cancellate anche le
cartelle \inetpub\wwwroot (o
\ftproot o \smtproot), inetpub\scripts, inetpub\iissamples, inetpub\adminscripts,
%systemroot%\help\iishelp\iis
e %systemroot%\web\printers.
A questo punto fate clic con
il tasto destro del mouse su Sito web predefinito, cliccate sulla scheda Home director y,
quindi eliminate wwwroot dalla
casella Percorso locale (dovrebbe restare solo c:\inetpub). Questa modifica vi permetter di evitare un messaggio derrore che informa sullinesistenza della cartella specificata (fig. 8-9).
Dopo aver effettuato le regolazioni iniziali, sinora illustrate, possibile passare alla
creazione di una directory virtuale. Nella versione di IIS inclusa in Windows XP Professional immediato pensare di
creare una directory virtuale
per ogni sito Web che si sta sviluppando.
Destinando una directory
virtuale a ciascun sito su cui si
sta lavorando, possibile simulare, sul proprio computer,
il comportamento del server
Web che lo ospiter. possibile visualizzare, quindi, pagine
Web statiche e dinamiche cos
come appariranno successivamente dopo averle caricate sul
server. Lutilizzo delle directory virtuali permette di risolvere eventuali problemi prima
ancora di pubblicare i file sul
server Web del provider Internet consentendo di concentrarsi esclusivamente sulla
programmazione e sullottimizzazione del sito. La particolarit delle directory virtuali consiste nel fatto di fungere
da puntatore verso una cartella residente su un disco fisso locale o su un altro personal
computer in rete (fig. 10).
Per creare una nuova directory virtuale, sufficiente fare
clic con il tasto destro del
mouse su Sito web predefinito
quindi seguire la procedura
passo-passo che viene presentata.
La finestra immediatamente
successiva a quella di presentazione, richiede di specificare
un alias per la directory virtuale che si sta crean10
do.
Lalias lidentificativo che dovr digitare, nella barra degli indirizzi del browser Internet, chiunque vorr
accedere al contenuto
della directory virtuale. Ad esempio, supponiamo di inserire
pcopen come alias: ci
significa che se dal
browser Internet si
vuole accedere alla directory

virtuale di PC Open, creata sul
nostro computer, dovremo digitare, nella barra degli indirizzi http://localhost/pcopen.
Per accedere alla stessa directory virtuale, un utente della nostra LAN dovr digitare, in
luogo di localhost, lindirizzo IP
associato alla nostra macchina
oppure il nome della stessa: ad
esempio, http://paperino/pcopen.
Tenete presente che possibile accedere alle directory
virtuali configurate su un personal computer dotato di Windows XP Professional e IIS anche dalla Rete Internet specificando, al posto di localhost,
lindirizzo IP associato in quel
momento alla macchina (per
stabilire lindirizzo IP associato al proprio computer allatto
della connessione Internet, fate doppio clic sullicona raffigurante due piccoli computer,
nella traybar in basso a destra,
cliccate sulla scheda Dettagli
quindi fate riferimento al valore Indirizzo IP del client).
Per evitare laccesso ai siti
configurati su IIS necessario
applicare alcune politiche di
sicurezza sugli account utente
o configurare un firewall in modo tale che respinga i tentativi
di accedere al server IIS dalla
Rete Internet (a tal proposito,
fate riferimento al box dedicato ad Outpost Firewall) fig. 11.
7a lezione
11
13
Dopo limpostazione dellalias, necessario indicare la

cartella che deve essere puntata ossia la directory su disco
che contiene (o allinterno della quale si intende memorizzare) i file che costituiscono il sito Web. Il nostro consiglio
quello di effettuare una prova
copiando i file desempio 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_esempi, specificate qui la stessa directory (servendovi del pulsante Sfoglia) (fig. 12).
Come ultimo passo, necessario specificare le autorizzazioni che si desiderano impostare per la directory virtuale
in corso di creazione. Suggeriamo di attivare solo le caselle Lettura ed Esecuzione script.
Cliccando sul pulsante Avanti
quindi su Fine, si concluder la
procedura guidata.
Come risultato, vedrete
comparire allinterno del ramo
Sito web predefinito, una nuova
12
80/88
voce, corrispondente allalias

da voi scelto per la directory
virtuale.
Cliccando con il tasto destro 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 sottolineare. Il primo riguarda la gestione della sicurezza. La scheda Protezione directory permette di stabilire le modalit
con le quali un utente pu accedere alla directory virtuale.
Diversamente dalla versione server di IIS, in Windows XP
Professional non possibile
controllare laccesso in base
allindirizzo IP.
Facendo clic sul pulsante
Modifica, viene visualizzata la
finestra Metodi di autenticazione: selezionando la casella Accesso anonimo possibile fare
in modo che chiunque possa
accedere alla directory (pur
consentendo di mantenere il controllo sulle sottodirectory e sui
singoli file).
Nonostante laccesso
sia anonimo, lutente
verr registrato nel sistema per mezzo di un
account ad hoc (generalmente denominato IUSR_nomecomputer, ove nomecomputer il nome associato
al computer sul quale
in esecuzione IIS).
Gli utenti anonimi non
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
laccesso ad un sito senza digitare alcun nome utente e password, sul vostro computer locale sarebbe bene inibire, per
ragioni di sicurezza, qualsiasi
forma di accesso anonimo.
Gli altri tre livelli di accesso
richiedono lidentificazione
dellutente prima di consentire
laccesso alla directory.
Attivando la casella Autenticazione di base vengono richiesti il nome e la password
dellutente. Lunico problema
che tali informazioni vengono
trasmesse in chiaro e possono
essere quindi intercettate consentendo ad utenti malintenzionati di accedere al sistema
in modo non autorizzato.
Lintercettazione pu avvenire tramite un software (o un
hardware) denominato sniffer,
in grado di analizzare il contenuto 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.
Lopzione Autenticazione integrata di Windows sfrutta invece un
metodo completamente diverso per lidentificazione dellutente:
in questo caso il sistema operativo effettua
uno scambio di dati
crittografati con il
browser dellutente
grazie ad un metodo
di certificazione digi-
tale installato sul personal

computer client insieme con il
browser Internet.
Il secondo aspetto da evidenziare riguarda la priorit
con la quale vengono visualizzati i documenti contenuti in
una directory virtuale.
Nella scheda Documenti,
possibile indicare quali file devono essere mostrati se lutente non richiede la visualizzazione di uno specifico file.
Digitando, nella barra degli
indirizzi del browser, lURL
http://localhost/pcopen, verr
dapprima cercato il file default.htm, se questo non viene
trovato, IIS passa alla ricerca di
default.asp. Se anche il file default.asp non presente nella
cartella, IIS ricerca iisstart.asp;
se anche tale file risulta irreperibile, viene visualizzato un
messaggio derrore che segnala allutente limpossibilit di
accedere alla directory. La lista
dei documenti predefiniti liberamente personalizzabile
(fig. 14). Nel nostro esempio,
digitando nel browser lURL
http://localhost/pcopen, verr
infatti visualizzata automaticamente la pagina default.htm.
7a lezione
5 Installare e configurare Apache sotto Windows

pache il server Web attualmente pi utilizzato al
mondo, nato per funzionare come processo stand alone
ossia senza richiedere lappoggio di altre applicazioni o di altri
componenti software.
Si tratta di un prodotto solido, performante e supercollaudato: il frutto (completamente
gratuito) del lavoro di un team
di volontari, noto come Apache Group.
Apache un software estremamente aperto (sono addirittura reperibili sul sito www.apa
che.org i sorgenti veri e propri)
che offre anche la possibilit ad
altre aziende di crearsi un business mediante lo sviluppo di
plug-in, aggiunte varie, strumenti di configurazione, tool di
supporto e cos via.
Il server Web Apache, nato in
ambiente Linux, disponibile
per tutte le piattaforme Unix, incluso Mac OSX e, pi di recente,
stato portato anche in Windows.
Apache differisce da IIS per il
fatto di essere completamente
gratuito e di mettere a disposizione tutte le funzionalit di un
server Web avanzato. Tra laltro
Apache pu essere impiegato
su una qualunque versione di
Windows (Windows 9x compreso).
Lultima versione di Apache
disponibile al momento della
stesura di questo servizio, la
2.0.44: sul sito dedicato a questo server Web (http://httpd.
apache.org/) possibile reperire le informazioni relative allinstallazione, alla configurazione
ed allaggiornamento dello stesso. LApache 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 linstallazione di

Apache, fate doppio clic sul file
apache_2.0.44-win32-x86no_ssl.msi (prelevabile gratuitamente allindirizzo http://na
goya.apache.org/mirror/httpd/
binaries/win32/apache_2.0.44win32-x86-no_ssl.msi).
Dopo laccettazione dei termini della licenza duso (che
consigliamo di leggere con attenzione) e delle note generali
sullinstallazione (Read This First) sar necessario inserire alcune informazioni riguardo al
server Web che si sta configurando. Se state installando Apache per la prima volta, con lo
scopo di saggiarne le principali
funzionalit, digitate localhost
nel campo Server Name ed inserite la vostra e-mail nel campo
Administrators email address.
Lasciate attiva lopzione for All
users, on Port 80, as a service
(fig. 15).
Nella finestra successiva selezionate Typical quale modalit di installazione quindi inserite 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 procedura, allinterno della traybar
(ossia larea situata in basso a
destra, accanto allorologio di
Windows), dovrebbe comparire
licona di Apache, a segnalare
che il Web server gi in esecuzione (fig 16).
Ad installazione conclusa
provate ad avviare Internet Explorer o il browser in uso e digitate http://localhost. Se il server
Web vi risponder con la finestra visualizzata in figura avrete
installato correttamente Apache. I file componenti il sito
Web (HTML, PHP,) andranno
posti nella sottodirectory denominata htdocs. Allinterno della
stessa cartella, potete creare
sottodirectory in modo che il loro contenuto possa essere richiamato, dal browser Internet,
nella forma http://localhost/nomesottodirectory/nomefile.html.
Se lutente non specifica alcun
file ma si limita a digitare un
URL del tipo http://localhost/nomesottodirectory, il primo file
che verr automaticamente richiamato sar index.html.
Cos come in Linux, anche in
Windows il file che consente la
16
configurazione dellintero server Web httpd.conf contenuto

nella cartella \Apache\conf.
Ricorrendo allutilizzo di Risorse del computer (o Gestione
risorse), portatevi allinterno
della cartella ove avete installato Apache quindi fate doppio
clic sulla directory denominata
Conf.
Lanalisi delle varie opzioni di
configurazione di Apache, effettuabili agendo sul file httpd.conf,
va oltre gli obiettivi di questa lezione. Suggeriamo di fare riferimento alla pagina http://httpd.
apache.org/docs-2.0/mod/
quickreference.html per ottenere una lista completa delle regolazioni (direttive) applicabili.
Per rendere la configurazione di
Apache pi semplice ed intuitiva evitando, cos, di dover intervenire direttamente sul file di
testo httpd.conf sono nati dei
tool basati su interfaccia grafica. A titolo desempio citiamo
ApacheConf (a pagamento) prelevabile allindirizzo http://
www.apache-gui.com/.
ActivePerl su Windows
ActivePerl un software gratuito che contiene la pi recente versione di Perl per ambiente
Windows. Il produttore, ActiveState, ne offre anche una versione per Linux cos da non modificare il proprio lavoro nel caso lo si traghettasse nell'altro
ambiente. Trattandosi di un linguaggio interpretato, che viene
quindi tradotto in linguaggio
macchina al momento dell'esecuzione, necessario disporre
di un interprete ad hoc per ciascuna delle piattaforme su cui
lo s'intende utilizzare.
ActivePerl semplicissimo
da installare e configurare in en-
trambi i mondi: servendosene

si potr provare tutti gli script
CGI Perl sul proprio personal
computer.
La versione Windows disponibile sul CD guida allegato
per concessione di Active State
che detiene il copyright su Active Perl e Perlscript.
Linstallazione di ActivePerl
per Windows avviabile facendo doppio clic sul file ActivePerl5.8.0.805-MSWin32-x86.msi. Dopo la schermata iniziale, per prima cosa si dovr accettare il
contratto di licenza duso (da
leggere attentamente) quindi
scegliere la cartella allinterno
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
linstallazione. Se si desidera
comunque utilizzare lultima
versione disponibile,
sufficiente collegarsi con il sito
www.apache.org e scaricare il
file dinstallazione per Linux
(httpd-2.0.44.tar.gz).
Portatevi alla riga di comando
Linux, accedete alla cartella
ove avete scaricato il file
dinstallazione in formato
.tar.gz quindi seguite
scrupolosamente i comandi
che trovate elencati nella
documentazione di Apache
circa linstallazione del Web
server in ambiente Linux,
consultabile in qualunque
momento allindirizzo
seguente:
http://httpd.apache.org/
docs-2.0/install.html.
17
elementi. Quello che ci insa in questo momento il

n ISAPI per il server Web:
tta di un componente che
erfaccia con IIS e che condi elaborare script CGI.
nstallarlo, in fase di setup ci
ve assicurare di attivare le
le Create IIS script mapping
erl e Create IIS script mapfor Perl ISAPI. Di solito, linzione di ActivePerl abilita
ro server Web allesecudei CGI (da qualsiasi sito
configurato, da qualunque
tory virtuale e da qualsiasi
18
82/88
cartella). Nel caso in cui si dovesse configurare un server

Web reale non un computer
destinato esclusivamente al test in locale dei propri script sarebbe bene, per motivi di sicurezza, restringere lesecuzione
degli script CGI solo alle cartelle in cui ci risulti effettivamente necessario. Una volta terminato il setup di ActivePerl, accedete quindi alla finestra Gestione 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 cliccate sul pulsante Modifica (fig.
18).
Provate a copiare lo script test.pl che trovate nel CD ROM di
PC Open nella cartella cgi-bin
della directory virtuale pcopen,
creata in precedenza in IIS. Aprite Internet Explorer e digitate,
nella barra degli indirizzi
http://localhost/pcopen/cgibin/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, cliccate sul pulsante Configurazione: la procedura di installazione
di ActivePerl dovrebbe aver inserito, nellelenco contenuto
nella scheda Mapping applicazioni, le voci Perl %s %s e PerlIS.dll. In questo modo gli script
Perl saranno eseguibili nellintero server Web.
Avviando ora Internet Explorer e digitando nuovamente
http://localhost/pcopen/cgibin/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, direttamente sul vostro computer,
quindi sufficiente copiare i file
con estensione .pl (Perl) nella
cartella cgi-bin.
ActivePerl offre anche la possibilit di controllare la sintassi
di uno script Perl da voi sviluppato. sufficiente accedere al
prompt di MS DOS, portarsi nella cartella dove avete memorizzato il vostro file Perl, quindi digitare perl c nomefile.pl (sostituendo a nomefile.pl il nome del
vostro script Perl): ActivePerl vi
segnaler eventuali errori di sintassi facendovi risparmiare
molto tempo. ActivePerl offrir
il supporto per lesecuzione degli script Perl anche se decidete
di montare il server Web Apache in versione Windows. Ad installazione di Apache conclusa
sufficiente provvedere al setup di ActivePerl, seguendo le linee guida appena illustrate,
quindi copiare gli script con
estensione .pl che trovate nel
CD allegato a PC Open nella cartella cgi-bin. Tenete presente
che, nel caso di Apache, la cartella cgi-bin viene automaticamente allinterno della directory di installazione del server
Web. Memorizzate, quindi, nella
cartella cgi-bin tutti i file Perl da
voi creati (o quelli desempio
che trovate nel CD di PC Open).
Supponiamo che abbiate copiato, nella cartella cgi-bin, lo script
test.pl. Avviate Internet Explorer
e digitate, nella barra degli indirizzi, lURL http://localhost/cgibin/test.pl. Qualora vi venisse
19
restituito un Internal server error, aprite con un normale editor di testo tutti i file con estensione .pl che avete posizionato
nella cartella cgi-bin e modificate la prima riga da #!/usr/local/bin/perl
a
#!c:/Perl/
bin/Perl.exe (supponendo di
aver installato ActivePerl nella
cartella c:\Perl). Adesso, digitando http://localhost/cgibin/test.pl nel browser Internet,
dovrebbe venire correttamente
visualizzata la frase Ecco la mia
prima
applicazione
CGI!
(fig. 20). Per chi volesse approfondire ulteriormente le modalit di utilizzo, le potenzialit
e la configurazione di ActivePerl, suggeriamo di consultare
lottima guida, disponibile in
formato HTML, ed installata insieme con il programma vero e
proprio. Per accedervi, cliccate
su Start, Programmi, ActiveState
ActivePerl quindi su Documentation.

20
8a lezione
Progetto
Web Master
di Roberto e Alessandro Abbate
Promuovere il proprio sito Web

siamo cos arrivati allultima puntata del nostro corso per diventare WebMaster. Ricominceremo dopo lestate con un nuovo appuntamento dedicato a chi interessato ad acquisire competenze
da Web designer
In questa ultima puntata, dopo 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 finora dedicato alla realizzazione del sito Web ha avuto un
unico grande scopo: mostrare
al popolo della Rete di quanto

siamo stati capaci.
Indipendemente dal risultato raggiunto, dalle conoscenze
accumulate e dall'esperienza
maturata, la creazione di un sito ha un solo grande obiettivo:
quello di essere visto da altri.
in quest'ottica che si ragiona 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 conoscere un Web site al popolo
di Internet.
La promozione di un sito si
divide in due parti ben distinte: il raggiungimento degli
utenti e la loro fidelizzazione.
Cosa significa tutto ci? Possiamo spiegare meglio il concetto con una similitudine: Internet un mare, i navigatori
sono i pesci e il nostro sito
Web la rete da pesca, a questo punto, il lettore diventato
ormai WebMaster ovviamente il pescatore.
Se siamo abbastanza capaci
di lanciare la nostra rete da pesca tanto lontano da raccogliere molti pesci, dobbiamo
essere altrettanto capaci di far

s che nessuno poi scappi dalla rete.
Fuor di metafora, tutte le attivit rivolte alla promozione
del nostro sito Web, dovranno
essere cos efficaci che gli
utenti che raccoglieremo dovranno rimanere all'interno
del sito e, ancora meglio, dovranno ricordarsi di tornarci a
visitarlo.
Come possibile raggiungere un obiettivo tanto importante? La risposta naturalmente, la troverete nelle prossime
pagine.

Lezione 1:
sul CD)
Lezione 2:
HTML
il corso
sul CD
guida
sul CD)
Lezione 3:
Lezione 4:
HTML 4.01 e CSS
CSS e HTML 4.01
Quattro tipi di CSS
I colori del Web
Gestire le immagini
83/88
Esercizi
dei parametri
Selettori di classe
Websafe palette
DHTML
Lezione 7:
Lezione 5:
La ruota colore
Grafica e formati di immagini
per Internet
Link ipertestuali
Tabelle dimmagini
Mappe immagine
Audio e video
Lezione 6:
Siti interattivi
Oggetti e priorit
Eventi e funzioni

Il server Web
I form: la porta per lutilizzo degli script
CGI
Installare e configurare un server Web
Configurazione del sito Web predefinito
Installare e configurare Apache sotto
Windows
Lezione 8:
Promuovere il sito
Tecniche di promozione:
cosa fare e cosa evitare
I motori di ricerca: vietato mancare
Come ottimizzare il proprio sito
Cross promotion: ovvero la pubblicit
gratuita
Per chi vuole approfondire: libri e siti
consigliati
8a lezione
1 Tecniche di promozione: cosa fare e cosa evitare

ono state sprecate pagine, parole, convegni e incontri 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 tecniche che si possono applicare,
ne esistono alcune che meritano di essere sottolineate:
1 - Innanzitutto il sito deve avere dei contenuti interessanti. impossibile spiegare
quando un sito Web interessante, infatti lo diventa
quando ci sono utenti che lo
ritengono tale.
Il miglior sistema per raggiungere questo primo, essenziale obiettivo, quello
di pubblicare con una certa
continuit, contenuti e argomenti che a nostro modo di
vedere possono attirare l'attenzione. Nel vastissimo
mondo di Internet infatti, ci
sar certamente qualcun altro che condivide il nostro
pensiero e avr quindi interesse a visitare il sito da noi
creato.
2 - Cercate sempre l'interazione con i vostri utenti. essenziale che i visitatori del
vostro sito possano interagire con il WebMaster del sito: innanzitutto potranno
farvi avere le loro opinioni
ed il loro parere (il cosiddetto feedback). Questo
sar per voi oro colato:
niente pi importante delle sensazioni dei vostri visitatori: saranno loro infatti a
indirizzarvi verso le scelte
migliori e a farvi notare gli
errori da voi commessi.
grazie al loro aiuto che potrete migliorare il vostro sito. Se poi capitasse di intrecciare nuove conoscenze, la cosa non potr che
farvi piacere.
3 - Dovrete tenere presenti due
parole importantissime in
Internet: leggerezza e semplicit. Essere leggeri significa creare immagini e documenti 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-
po tempo per visitare una

pagina Web. Per l'attesa, il
tempo massimo di 10 secondi, mentre per quanto riguarda il peso, fate in modo
che la pagina con tutti gli
elementi (immagini, eventuali suoni e cos via) non
superi i 70 KB.
4- Al punto precedente abbiamo parlato anche di semplicit: con ci vogliamo dire
che meglio evitare sfondi
troppo colorati, o riempire
la pagina di immagini animate. Il vostro visitatore dovr poter leggere le vostre
pagine senza fare fatica: non
deve quindi affaticare la vista con contrasti di colore
poco chiari o elementi che
ne distraggano la lettura.
La migliore soluzione quella di usare sfondi chiari e testo scuro. I link bene lasciarli sottolineati o se proprio volete cambiarli, fate in
modo che siano sempre ben
distinti dal resto del testo
normale. Assolutamente da
evitare sfondi animati o colori poco contrastanti (come arancione su nero, o giallo su rosso).
Il buon senso vi guider ver-
so le scelte pi adatte: leggete con attenzione le vostre pagine Web e con una
certa dose di autocritica.
Cosa evitare
Per esclusione, le prime cose da evitare corrispondono a
tutto ci che si contrappone
con quanto abbiamo scritto
precedentemente.
Per il resto, abbiamo raccolto le pratiche da non seguire all'interno del box sulla netiquette pi in l nelarticolo.
Si tratta delle azioni che assolutamente devono essere evitate per promuovere con successo un sito Web. Quando si
inizia infatti, facile incappare
in errori a dir poco evitabili:
troppa foga nella promozione.
Ricordiamoci che i visitatori hanno sempre un ottimo
motivo per non navigare il nostro sito Web: dovremo essere
noi che, con discrezione e perseveranza, gli offriremo il pretesto per accedere al sito da
noi creato.
Dovremo quindi stuzzicare
la loro curiosit e nello stesso
tempo guadagnarci il loro rispetto.
2 I motori di ricerca: vietato mancare

desso che sappiamo quali
sono le pratiche consigliate per promuovere un sito
Web e quali quelle da evitare,
possiamo iniziare con le prime, piccole attivit di marketing, 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 visita. Come rimediare? Come
iniziare a promuoverlo?
La risposta semplicissima:
noi, da utenti, quando cerchiamo qualcosa, dove andiamo?
Dove iniziano le nostre navigazioni?
La risposta pu essere una
ed una soltanto: i motori di ricerca.
84/88
da l quindi che inizieremo

il nostro viaggio alla scoperta
dei migliori trucchi per far conoscere il nostro sito Web.
Come per tutti gli strumenti,
per usarli al meglio necessario conoscerli in maniera approfondita. Innanzitutto cos'
un motore di ricerca e come
funziona? Quali sono i pi diffusi e utili?
Un motore di ricerca un
servizio che consente di cercare informazioni all'interno di
Internet. Con informazioni non
intendiamo solo pagine Web,
ma anche file di ogni tipo: immagini, documenti di altra natura (ad esempio i PDF di Acrobat), tracce audio (MP3, WAV),
video e cos via.
Ad essere corretti, questi
motori non cercano in tutta Internet, o in tutto il World Wide
Web, semplicemente eseguono

una ricerca all'interno del loro
database, che si compone di
tutti quei file che i loro spider
rintracciano. Prima parola magica: 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 anche bot) che periodicamente
navigano il Web e schedulano i
contenuti all'interno dei loro
database. Questo tutto automaticamente.
Il nostro primo obiettivo
sar quello di rientrare tra i
percorsi dei bot.
Non tutti per fanno uso degli spider. O meglio, esistono
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 appunto un sito che scandaglia e
scheda il Web con l'utilizzo di
software automatici. I principali motori di ricerca italiani sono
il Trovatore, raggiungibile all'indirizzo http://www.iltrovato
re.it e Arianna, reperibile su
http://arianna.iol.it. All'estero, il
pi famoso e conosciuto Google (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.
8a lezione
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'estero 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 localizzazione italiana reperibile all'indirizzo http://www.
dmoz.org/World/Italiano). Un
altro esempio di directory di
successo 100Links (http://
www.100links.it), nata per raccogliere i siti recensiti all'interno della sua mailing list che
suggerisce 25 siti a settimana
(da qui il nome, 100 links al mese) ora la directory su cui si
appoggia l'intero network di
Dada con il sito SuperEva
(http://www.supereva.it).
In questo campo, le directory specializzate sono tantissime: esistono siti che catalogano solo pagine in una determinata lingua oppure che trattano 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). Insomma, le strade da percorrere
sono tante, si tratta solo di seguirle tutte.
Metamotori
Trattiamo questo argomento
solo per completezza delle
informazioni. I metamotori infatti sono motori di ricerca che
restituiscono i risultati delle ricerche interrogando altri motori. Si pu quindi fare ben poco per apparire in questi: sar
infatti sufficiente comparire tra
i principali motori di ricerca
per essere inseriti anche in
questi. Alcuni esempi sono Metacrawler (http://www. meta
crawler.com), DogPile (http://
www.dogpile.com) e WebCrawler
(http://www.web
crawler.com).
Queste differenze, spesso si
assottigliano con accordi di
marketing tra le societ che gestiscono i motori di ricerca e le
directory. Ad esempio Virgilio e
Yahoo! sfruttano anche il database 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 motore di ricerca, ci che dovremo fare trovare un link del tipo Aggiungi URL o in inglese
Add URL. Da qui poi, sar necessario specificare l'indirizzo
del nostro sito e poi, compilare
gli altri campi che potrebbero
esserci stati richiesti: come titolo 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 navigatori di Internet possano trovare il vostro sito; evitate per
parole troppo generiche: rischiereste 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 ricerca pi usato sia quello capace di portare pi utenti. altrettanto 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 posizionamento ben studiato su
Google pu portare ad avere il
50% dell'utenza referente portata da questo motore di ricerca. Con il termine referente, intendiamo tutti quei visitatori
che cliccando su altri link arrivano al nostro sito.
Sul totale degli utenti arrivati dai motori di ricerca, Google
capace di segnare, da solo, un
80% sul totale.
Balza subito in mente quindi, quale sia il motore di ricerca
da studiare per apparire in testa alle sue ricerche.
Google d il voto alle

pagine Web
Quando lo spider di Google
(che prende il nome di GoogleBot) 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 verso una determinata pagina
Web. La regola di base : pi
link da siti esterni portano verso le nostre pagine, maggiore
sar il nostro Page Rank.
Un'altro valore che far aumentare il nostro Page Rank
(PR) il voto dato da Google alla 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 collegamento ipertestuale conterr
delle parole chiave: ad esempio 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-deltuo-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 relativa lezione sul CD.
Per conoscere quale sia il
Page Rank di un sito, possibile scaricare e installare la Google Toolbar (http://toolbar.google.com), una banda che si aggiunge al browser Microsoft Internet Explorer e che riporta
appunto il Page Rank.
Questo comunque non l'unico parametro che Google valuta per visualizzare i risultati
di una ricerca. Ne esistono altri
che tratteremo nel capitolo
Ottimizzazione del proprio sito.
Software per l'inserimento

dei siti Internet nei motori
di ricerca
Esistono software studiati
appositamente per gestire i
motori di ricerca. Questi programmi, nati all'inizio solo per
inserire il proprio sito nei motori di ricerca, sono ora delle
vere e proprie suite per capire
quanto stia funzionando il lavoro di segnalazione del proprio sito. infatti possibile, oltre al classico inserimento automatico su pi motori, rilevare il proprio ranking, e applica-
re quindi le migliori strategie

per risultare in testa ai risultati. Ma cosa questo ranking?
un termine inglese che indica la posizione con cui il nostro sito appare nei risultati di
una ricerca in base ad una determinata parola chiave.
Ad esempio, se il nostro sito
tratta di modellismo (magari
statico) e se digitando su Google 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 propria posizione.
Si ottengono vantaggi reali

nell'utilizzo di questi software?
inutile negare che la strategia migliore sia quella di effettuare la segnalazione a mano. Questo perch potremo via
via ottimizzare le tecniche che
impareremo nel prosieguo dell'articolo in base al motore di
ricerca che ci troviamo di fronte. Un software con una segnalazione selvaggia del nostro
sito, non potrebbe ottenere lo
stesso risultato: avremo risparmiato tempo ma certo non
potremmo godere degli stessi
risultati.
Questi software infatti, vengono usati da quei WebMaster
che devono gestire decine di siti e devono quindi curarne la
loro posizione nei motori di ricerca. Con numeri simili, meglio avere dei risultati minori
ma poter avere in ogni momento 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 obiettivamente la soluzione migliore per
ottenere i risultati pi soddisfacenti.
Per chi non avesse comunque il tempo, le capacit oppure avesse in gestione diversi siti Web da inserire e ottimizzare
nei motori di ricerca, i software
creati ad hoc per il posizionamento, automatizzano il tutto e
sostituiscono completamente
il lavoro manuale del WebMaster.
Ne esistono di diversi, gratuiti o a pagamento, ognuno
con le proprie caratteristiche
8a lezione
interessanti. Quasi tutti questi
tool inoltre, forniscono strumenti avanzati quali ad esempio la verifica del posizionamento del sito tra centinaia di
motori di ricerca ed il miglioramento delle pagine (ad esempio Meta Tags e frasi chiave),
per ottenere i migliori risultati
nelle ricerche.
Un solo consiglio, non abusatene, anche perch potreste
ottenere l'effetto contrario, essere cancellati dai database
per uso illecito nelle segnalazioni.
AddWeb Web Site Promoter 6.0
http://www.addweb.it
Costo: 69 euro. Lingua: inglese
Uno dei pi completi software di promozione Web disponibile sul mercato.

possibile prelevare e provare AddWeb in versioni successivamente registrabili per
valutarne le potenti funzionalit. La versione trial disponibile nel nostro CD Guida.
Ecco le funzionalit di maggior interesse di AddWeb Web
Site Promoter:
Analizza le pagine per ottenere il migliore posizionamento
Costruisce pagine Web ottimizzate 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 dettagliata 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 professionale, ma
di facile utilizzo, progettato
specificamente per la promozione di siti
Web. Ha anche una versione
gratuita con forti limitazioni rispetto alla release ufficiale, che
ha raggiunto 1.500.000 copie
scaricate. Si pu quindi tranquillamente definire il prodotto
pi diffuso attualmente sul
mercato.
Tra le caratteristiche principali 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 senza costi addizionali.
Registrazione Prioritaria a Pagamento in 48 ore su Altavista,
HotBot, Inktomi, LookSmart,
MSN, Overture, Slider, whatUseek 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.
regole di segnalazione del sito

(ad esempio su Google non effettuer giornalmente la richiesta di inserimento, per non rischiare la cancellazione dell'URL per motivi di spamming).
Web Position Gold 2
www.webposition.com/product.htm
Prezzo: 149 dollari; Lingua: inglese
Active WebTraffic 5.0

www.myrasoft.com/activewebtraffic
Prezzo: 119 dollari. Lingua: inglese
Active WebTraffic una
nuova generazione
di
software per
la promozione
di siti Web in
grado di sottoporre automaticamente il vostro sito a
300.000 motori di ricerca, directories, mezzi di informazione e liste di Web site. Myrasoft,
il produttore, certo della qualit del suo sistema di promozione, offre una versione trial.
Active WebTraffic ha ricevuto numerosi premi come il
software di promozione Web
pi potente su Internet.
In breve le peculiarit del
programma:
Facile da imparare ed utilizzare
Possibilit di aggiungere i vostri motori di ricerca preferiti
al datababase dei presenti
Ricerca automatica dei motori di ricerca.
Report dettagliati sui risultati ottenuti.
Imposta automaticamente le
Web Position
Gold 2 uno dei pi
apprezzati software
per l'indicizzaziosul CD
ne, l'ottimizzazione
delle pagine Web
Guida di
ed il controllo del
PC Open
posizionamento
dei siti sui motori di ricerca rispetto alle parole chiave selezionate. Il produttore di Web
Position Gold 2 offre agli utenti
anche una versione trial, (disponibile per linstallazione allinterno del CD guida allegato
alla rivista).
Le principali caratteristiche
del programma sono:
Registrazione in pi di 94 motori 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 ottimizzate per il posizionamento.
Download delle pagine sul
proprio server.
Registrazione sui motori di ricerca.
Analisi dettagliata del posizionamento.
3 Ottimizzazione del proprio sito

vvero come far s che il
nostro sito sia strutturato
in maniera tale da piacere
ai motori di ricerca.
La prima regola molto semplice: fare in modo che tutte le
pagine che dovranno figurare
nei risultati di una ricerca, siano linkate tra loro. Ci non significa che le pagine devono
contenere un link verso tutti gli
altri documenti, ma bene che
ogni pagina contenga un richiamo per tornare alla home
page e un menu che riporti almeno verso le sezioni princi-
86/88
pali. Dalla Home page poi, dovremo richiamare quelle sezioni che per noi sono pi importanti. I bot dei motori di ricerca
infatti, sono in grado di passare
da un link ad un altro in maniera automatica ed quindi essenziale che riescano a rintracciare e quindi schedare tutte le
pagine del nostro sito.
I trucchi degli esperti

Gli sviluppatori Web pi
esperti, quando si trovano di
fronte alla creazione di siti Internet, seguono delle re-
STRUTTURA
DEL SITO
Nell'immagine
abbiamo
abbozzato una
possibile
struttura del
sito: dalla
Home page
possibile
raggiungere le
principali
sezioni. Ogni
pagina poi,
dovr
contenere un
link per tornare
alla Home page
e un menu per
raggiungere le
altre sezioni
8a lezione
gole che saranno loro utili nel
momento in cui dovranno segnalare il sito ai vari motori di
ricerca.
<title>Modellismo statico: le foto

delle creazioni di Mario
Rossi<title>
Gli headings
I meta tags
Una buona abitudine, quella di inserire in ogni pagina del
proprio sito i meta tags description e keywords. Questi
sono dei marcatori che raccolgono la descrizione del sito e le
parole chiavi. Tornando all'esempio del modellismo statico,
questi due marcatori andrebbero 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 description e keywords.
Questi marcatori, seppur ormai 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 esempio il tag <title>, che assegna un
titolo alla pagina e conseguentemente alla finestra del browser. All'interno di questo marcatore 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:
Gli headings sono quei tag

<h#> dove # rappresenta una cifra da 1 a 6 e servono per gestire 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 termini presenti in questi marcatori, perch spesso raccolgono
in poche parole l'intera pagina.
per questo che indispensabile inserirli e usarli al meglio.
I tags per la formattazione

Sono i cosidetti inline elements, analizzati su questo
stesso corso nel numero di
Febbraio. Molti di questi assumono una particolare importanza rispetto al resto del testo. Ad esempio, quando ci troviamo di fronte a una parola
chiave per il nostro sito, sarebbe bene enfatizzarla, cosicch i
motori di ricerca siano in grado
di capire che quel determinato
termine ha una rilevanza maggiore.
Ad esempio, in un sito di modellismo, sarebbe utile applicare il tag <b> (bold, ovvero
grassetto) o <em> (emphatized,
ovvero enfatizzato) alle parole
pi importanti, come appunto
modellismo, statico, auto, moto, e cos via. Attenzione ad applicare queste formattazioni
solo al testo che verr stampato nella pagina, e non quindi alle parole presenti nei meta tags
appena analizzati, nel <title> e
in generale agli elementi che
non visualizzano nulla nel documento.
L'unico problema, che ogni
qual volta venisse applicato un
tag per la formattazione, il te-
sto viene appunto formattato

seguendo le istruzioni assegnate.
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 modellismo di Mario Rossi, all'interno
del quale potrai trovare foto di
ogni tipo sulle mie creazioni:
formula 1, moto da corsa, aerei civili ecc.
Onde evitare il continuo accumularsi di testo in grassetto,
possibile applicare un piccolo trucco. Dove realmente non
si vuole aumentare il peso di
una parola ma la si vuole comunque rendere pi importante per i motori di ricerca, possiamo racchiuderla tra i tag
<strong> e </strong> e poi applicarci un foglio di stile che annulli 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
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 nell'immagine in basso. L'unica
raccomandazione, quella di
non abusare del trucco: i motori di ricerca pi avanzati potrebbero rilevare la continua
apertura e chiusura del tag
<strong> e rilevare questo espediente come un trucco per falsare i suoi risultati. Insomma,
facciamo i furbi ma facciamolo
bene.
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
4 Cross promotion: ovvero pubblicit gratuita

uando abbiamo parlato
del Page Rank di Google,
stato spiegato che importante avere dei link verso le
proprie pagine. Un buon metodo per iniziare quello di instaurare uno scambio link con
piccoli siti che trattano lo stesso argomento. In questo modo,
87/88
gli utenti che visitano un determinato sito, potranno visitare

un altro sito in tema: il vantaggio ovvio... quando i due siti
hanno un numero di utenti pressocch simile, entrambi potranno aumentare gli accessi.
Cosa non importante poi,
quando lo spider dei motori di
ricerca passer da uno dei due

siti, automaticamente scheder anche l'altro, il che non fa
altro che aumentare i vantaggi.
Esistono poi dei servizi che
mettono a disposizione dei sistemi per aumentare gli accessi
di un sito: questi sono gli scambi banner, scambi link e cos via.
Ce ne sono davvero di tutti i gusti e Internet, in questo senso,

una fonte inesauribile di informazioni. 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

Risorse sull'argomento
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
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
Saldatura tra management e

marketing nella conduzione di un sito
Web aziendale. Lautore propone un
approccio molto sistematico alla
valutazione di efficienza del proprio
sito e alla sua gestione.
Come puntare ai profitti nella

creazione di un sito, visto da unottica
americana. Il testo una guida alle
attivit essenziali di Web marketing,
depurate dai fallimenti e orientate su
casi che hanno raggiunto profittabilit.
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.

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 mese luso 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
88/88
il proprio dominio presso

Register ad un prezzo
scontatissimo (40% in meno,
lo sconto pi alto oggi disponibile
sul mercato).
Il metodo semplicissimo:
dovrete collegarvi al sito Internet
www.register.it/pcopen,
inserire il codice seguente: 2c7A4s
nel box allinterno della pagina
e a questo punto 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 allindirizzo
http://we.register.it
Per il servizio di supporto inviare le e-mail
allindirizzo support@register.it

Corso Webmaster

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Corso Webmaster

Caricato da

Copyright:

Formati disponibili

1a lezione

A scuola con PC Open

iventare Webmaster come assumere il comando

browser e vicina alle specifiche

detti siti dinamici,

IL CALENDARIO DELLE LEZIONI

1 LEZIONE novembre 2002

2 LEZIONE dicembre 2002

Fogli di stile in cascata

Saper fare un po di tutto

un Web developer). Quasi mai,

stato il primo a rispondere

osservando i siti, cercando di

Markup Language) di Macromedia.

1 I professionisti che affiancano il Webmaster

zione applicativa di un sito dinamico, vale a dire un sito che

developer, assumendo sempre

Abbiamo preso a prestito ed

ca oppure editoriale, e solitamente non dispone di competenze tecniche, ma deve avere

cui opera il server. Purtroppo la

renze nei metodi di lavorazione

Altre figure di contatto

occasionali. La prima il responsabile di Web marketing,

2 Gli strumenti di lavoro

er svolgere il proprio compito, il Webmaster ricorre

Editor on line gratuiti

Editor orientati al testo

Sono strumenti da usare nella produzione di siti personali,

Leggeri e precisi, costituiscono un elemento irrinunciabile nella cassetta degli attrezzi

Gli editor presentati in questo numero

ti. Sono spesso gratuiti, ma ne

me edizioni degli editor grafici

Editor visuali semplificati

gli errori e di trasferimento a un

Ambienti visuali integrati

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

mese luso di uno spazio di hosting

semplicissimo: dovrete collegarvi al

3 Per chi vuole approfondire: i libri consigliati

La bibbia del Web designer propone

Indirizzato ai designer della

Tutorial per Webmaster alle prime

Riferimento indiscusso sulla sintassi e

Introduzione elementare alla

Guida complementare al Web Design

Standard e tecniche concentrati in

Usabilit nel redesign. Ecco la

Guida alla riprogettazione di un sito

Design e usabilit allitaliana. Pi

Master di usabilit. Non si pu parlare

Quaderno di progetto in grande

Dalla progettazione al lancio: come nasce un sito

template, vale a dire la pagina

sistema se commessi da un navigatore reale.

Raccolta delle informazioni sugli scopi del sito

Progetto grafico e multimediale

4 Macromedia Dreamweaver MX,

Si tratta perci del terreno

Tanti approcci diversi

Una, la finestra Propriet

Gli strumenti visuali

ragiscono con gli altri. Insomma, una sorta di videoimpaginazione Web

Controllo totale del sito

1 Progettare un sito statico