You are on page 1of 88

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, un’abilità da
sfruttare sia per aiutare gli
amici sia per conquistare
nuove prospettive di lavoro
Approfondimenti sui
migliori editor HTML
freeware nella sezione
OPEN Action a p.156
Sul CD GUIDA le versioni
complete degli articoli.
In più sul CD i programmi
(gratuiti e demo) che
abbiamo citato.

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 all’esterno, oppure di
parlare con i responsabili dei sistemi informativi aziendali (magari un altro consulente nel caso di piccole aziende) per siti
che sono ospitati all’interno.

D

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 all’interno 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 l’aggiunta
di pagine risulti un’operazione
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.
L’operazione 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 all’interno 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 dall’utente, senza l’intervento 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
L’ultima trincea
Il Webmaster rappresenta
l’ultimo 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 d’individuare, 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 dall’esterno che potrebbero compromettere l’immagine del sito.
È importante infine che coltivi ottimi rapporti con altri
Webmaster, per potersi avvalere dell’assistenza 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 l’epoca 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
l’eccezione 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.
L’intervento 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 un’ottima vetrina
di presentazione

È stato il primo a rispondere
Giuseppe Lachello, 55 anni,
piemontese doc, quando il
mese scorso abbiamo chiesto
se tra i membri della
community di PC Open ci fosse
qualcuno disposto a raccontare
la propria esperienza sul Web.
E nel caso di Giuseppe, il
primato non è il solo: è lettore
di PC Open dal lontano n°3 e
abbonato dal n°10. Bene,
Giuseppe che attualmente è in
pensione, era il responsabile di
hardware e software per una
società del gruppo Fiat,
dedicata alla gestione
contabilità. “I primi approcci
con il Web risalgono al ‘98,
quando la società per cui
lavoravo mi chiese di creare un
sito interno all’ufficio che
potesse funzionare da centro di
smistamento di report aziendali
con la casa madre”. Le basi di
programmazione (programmava
in Visual Basic) servono a
Giuseppe come struttura su cui
inserire le nuove competenze.
“All’inizio non avevo ben chiare
le nozioni, per cui ho iniziato a
studiare libri sui linguaggi di
programmazione (HTML,
JavaScript) e a navigare in Rete

osservando i siti, cercando di
visualizzare la sorgente per poi
tentare di ricostruirli. Nel giro di
quattro mesi ho imparato la
maggior parte di ciò che mi
serviva per mettermi all’opera,
quindi è partito il sito, che è
stato molto apprezzato, tanto
che subito dopo sono stato
contattato dalla casa madre per
fornire una consulenza nella
costruzione del sito aziendale”.
In seguito Giuseppe ha affinato
le sue competenze
frequentando un corso on line
di manuali.net, trovandolo
completo e molto utile. Prima di
andare in pensione, Giuseppe
ha messo in Rete un suo sito,
si chiama Mio Piemonte, come
siamo e come eravamo, e
raccoglie molte informazioni,
documenti e immagini sulla
regione (it.geocities.com/
mepiemont).
“È iniziato per passione, come
hobby, ma si sta rivelando
un’ottima vetrina di
presentazione” ci rivela
Giuseppe, tanto che già alcune
piccole aziende della zona lo
hanno contattato per fornire
consulenza per la costruzione
dei loro siti.

GLOSSARIO
CONTENT MANAGER
è il responsabile dei contenuti
pubblicati sul sito (testo e grafica) e
da lui vengono le indicazioni operative
per il Webmaster e il Web designer.
In mancanza di questa figura, il ruolo
viene spesso svolto dal Webmaster
medesimo.
LINGUAGGI DI DEFINIZIONE
DELLA PAGINA
questi linguaggi indicano al browser
come visualizzare il contenuto di una
pagina Web.
I più importanti e utilizzati sono
l’HTML (HyperText Markup Language),
il DHTML (Dynamic HTML) e i CSS
(Cascading Style Sheets – fogli di
stile in cascata).

2/88

LINGUAGGI DI SCRIPTING
eseguono operazioni programmate
all’interno del browser o del server
Web nel momento in cui vengono
richieste le pagine. I più comuni sono
JavaScript (che funziona sia sul client
sia sul server) e CGI (Common
Gateway Interface) che viene
programmata attraverso lo speciale
linguaggio Perl (Practical extraction
and reporting language) nato per
l’elaborazione di testi oppure
mediante Java, C o Visual Basic.
Nei siti più moderni troviamo anche
ASP (Active Server Pages) di
Microsoft programmabile in VBScript
(il più usato), Javascript e Perlscript PHP open source e molto diffuso nel
mondo Linux - CFML (Coldfusion

Markup Language) di Macromedia.
Gli ultimi quattro operano unicamente
sul server.
WEB DESIGNER
progetta e sviluppa l’aspetto grafico
ed estetico di un sito, fornendo tutti
gli strumenti visivi per la navigazione
e la corretta visualizzazione e
organizzazione dei contenuti
all’interno delle pagine. Passa il
proprio lavoro al Webmaster per la
creazione del sito vero e proprio.
WEB DEVELOPER
realizza tutta la componente
“applicativa” dei siti che fanno perno
su un database. Progetta il database
e scrive i programmi che ne

permettono l’interrogazione
attraverso pagine interattive,
anch’esse generate in automatico.
Passa il proprio lavoro al Webmaster
che lo completa se necessario e lo
“mette in linea”.
WEBMASTER
è il responsabile globale di un sito, le
sue competenze abbracciano la
progettazione iniziale, la realizzazione
e la gestione, con particolare
attenzione all’aggiornamento dei
contenuti. Deve sapere fare un po’ di
tutto e mostra i suoi punti di forza
particolari nella conoscenza degli
strumenti e dei linguaggi per produrre
pagine capaci di essere viste
velocemente su qualsiasi browser.

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:
l’incaricato 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 bell’aspetto,
sia comprensibile dal navigatore, serva agli scopi del sito e sia
realizzabile con gli strumenti
tecnologici a disposizione (soprattutto osservando i limiti imposti dall’HTML 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.
L’operatore grafico affianca
il coder nella costruzione del sito. Egli è in grado di gestire i va-

E

3/88

ri elementi grafici che compongono la pagina seguendo i dettami del progetto grafico e i vincoli della tecnologia
Solitamente, l’operatore 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 all’interazione 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 l’intera pagina
e l’intero sito.
Nell’evoluzione 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 d’informazione, incoraggiare l’acquisto,
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 dell’aggiornamento di particolari segmenti del sito.
Il Content Manager ha solitamente un’estrazione 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 l’area
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 d’opera 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 l’agevole 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à
l’impiego 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 dell’errore è 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, nell’imposizione di vincoli sul tipo d’informazioni effettivamente pubblicabili e nella rigidità della struttura del sito (difficile aggiungere, togliere o accorpare sezioni
e canali). Da ciò, l’esigenza di
apportare modifiche costose
dell’ultimo 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
dell’editoria su carta e dell’editoria Web hanno compromesso
l’utilità 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 l’abbiamo 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. L’ultimo 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
nell’attività del Webmaster. Il
Project Manager coordina l’attività di tutte le figure coinvolte
nel progetto e garantisce il rispetto delle tempistiche concordate. L’architetto 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. L’esperto 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 l’occasione per
evolvere le proprie competenze
per occuparsi anche di architettura e di usabilità. 

a meno di essere virtuosi della tastiera. deve essere in grado di scrivere completamente a mano un intero sito. Il fatto di dover scrivere tutto a mano. anche perché “scottati” dalle pri. Gli editor visuali (FrontPage. all’interno di portali che offrono spazio gratuito limitato e che prevedono un’interfaccia propria per la generazione facilitata delle pagine partendo da moduli già impostati. perché gli capiterà sovente di dover correggere anche gli errori e i contenuti inutili introdotti proprio dai programmi di generazione automatica che dovrebbero aiutarlo. ma ne esistono anche versioni commerciali di costo relativamente ridotto. per non perdere controllo sulle pagine. tuttavia. la riduzione automatica delle ridondanze e il trasferimento verso server remo- Gli editor presentati in questo numero Programma 1st Page 2000 Arachnophilia 5. Servono anche per ispezionare le pagine prodotte con pacchetti più complessi al fine di controllarne la correttezza. Vi si ricorre per piccole correzioni al volo oppure per la scrittura d’intere pagine. Tra le funzioni tipiche abbiamo anche l’anteprima all’interno di uno o più browser. il controllo dei link interni ed esterni. il Webmaster ricorre a strumenti che semplificano la scrittura e la correzione delle pagine Web e degli script associati. DHTML. ne riduce l’utilità. CSS. Adobe GoLive) offrono alta produttività e controllo sull’intero 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). . imponendo quasi sempre la visualizzazione dei banner pubblicitari di quest’ultimo. Sono spesso gratuiti. evidenziando graficamente (a colori) i comandi Editor visuali commerciali P Editor visuali semplificati Capacità di spesa Gli editor HTML testuali sono una necessità imprescindibile sia per chi comincia. 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. spesso con un’interfaccia grafica che consente di creare intere sezioni della pagina senza scrivere nemmeno una riga di HTML. facendone un punto di orgoglio. frame (finestre multiple nella pagina) e tabelle. sia per chi è già esperto. Gli strumenti di lavoro in questo campo si dividono in quattro categorie.1a lezione 2 Gli strumenti di lavoro Come scegliere lo strumento di lavoro adeguato Produttività Esperienza Editor testuali. così da poter disporre di una palestra in cui imparare.5. Editor on line gratuiti Editor orientati al testo Sono strumenti da usare nella produzione di siti personali.0 HTML-kit Macromedia Dreamweaver MX Stone's Web Writer 3. Semplificano la scrittura di codice HTML.6 WebPag-Wiz 1 Xoology Coda 2. molto semplici. controllando in automatico la sintassi dei comandi. a seconda dei casi. colare portale che li ospita.4 5/88 Tipo editor HTML testuale editor HTML testuale editor HTML testuale ambiente grafico integrato editor HTML testuale editor HTML testuale 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. soprattutto nella stesura iniziale del sito. come funzionano e come scegliere la soluzione più adatta a voi Ambienti grafici integrati Editor HTML testuali er svolgere il proprio compito. Offrono tuttavia una produttività bassa. se necessario. Di solito prevedono finestre guidate per l’inserimento dei più comuni tag HTML (marcatori di formattazione). anziché digitare centinaia di righe sulla tastiera e fare continue anteprime all’interno del browser. Alcuni Webmaster veterani comunque si limitano a usare i semplici editor di testo. o quasi.2 Top Dawg 2. Web Editor e così via) sono una naturale evoluzione per chi vuole guadagnare velocità. visuali e ambienti grafici integrati: cosa sono. 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. per verificare l’aspetto finale della pagina. di script già pronti e di moduli (form). costituiscono un elemento irrinunciabile nella cassetta degli attrezzi di un bravo Webmaster. La produttività scende e aumenta le possibilità di errore. Sono utilissimi per farsi le ossa e per correggere rapidamente pagine già esistenti. Gli ambienti grafici integrati (Macromedia Dreamweaver. Il vero Webmaster professionista. JavaScript e così via.

riga per riga. il più importante registrar in Italia: nei prossimi mesi avrete a disposizione gratuitamente per un 6/88 mese l’uso di uno spazio di hosting dedicato. oltre ad una serie di altri servizi supplementari. Le registrazioni saranno comprensive di tutto quanto è indicato all’indirizzo http://we.0 e ImageReady (per l’ottimizzazione delle immagini per il Web). Benché saranno ben pochi i Webmaster che si troveranno a utilizzare tutti questi strumenti e saranno ancora meno quelli che li utilizzeranno per partire. Firstpage 2000. HTML Kit. Ne esistono diverse edizioni gratuite.visualvision. GoLive è invece un prodotto di natura più “editoriale”.it/pcopen oppure al sito www.0 CoffeeCup HTML Editor 9. questi programmi possono effettivamente rovinare una pagina già ben costruita in partenza e costringervi a lunghe operazioni di correzione manuale. costringendo a lunghi lavori di pulizia a mano. integrandosi con Fireworks MX e Flash MX per le componenti creative.0. Mac) e integrano spesso anche ottimi strumenti tutorial per imparare cammin facendo. che s’indirizza in particolare a chi prevede di lavorare su siti dinamici dove sia necessario affiancare all’HTML anche funzioni di programmazione e linguaggi di scripting. tra i prodotti a pagamento o shareware abbiamo invece selezionato CoffeCup HTML Editor. questi prodotti gli consentono d’intervenire con rapidità ed efficacia su qualsiasi componente del sito Web. visto che il sito viene costruito in formato proprietario e. ha raggiunto una vera caratura professionale. poi. esportato in formato HTML.0 dialoga invece con PhotoShop 7. Adobe GoLive 6. S’indirizza al Webmaster e al Web designer che abbiano anche vocazioni di programmatore.register. è importante capire che tanto Dreamweaver quanto GoLive costituiscono punti di arrivo irrinunciabili per lo sviluppo e la manutenzione di siti come professione. da dove le registrazioni verranno scontate in automatico del 40%. negli ultimi anni di grande crescita del Web.it/pcopen.it.html. che nasce in collaborazione con Register. Il metodo è semplicissimo: dovrete collegarvi al sito http://we. Quest’ultimo. visto che sono ormai diventati giganteschi e ricchissimi di funzioni. utilizzando un solo strumento che conoscono bene. solo alla fine. ma si ripagano ampiamente nell’uso intensivo. In alternativa. TopStyle Pro 3. con Premiere per la gestione del video. Xoology Coda. Stone’s Web Writer. Ambienti visuali integrati Al terzo livello della scala troviamo gli unici due prodotti che hanno conquistato. di modificarla a mano in una finestra separata che mostra le righe di codice HTML. che finivano per richiedere più tempo di quanto ce ne sarebbe voluto per scrivere la pagina da zero. pur mantenendo la proverbiale facilità d’uso. rispetto alle versioni precedenti.it).  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. Hot Metal Pro. i lettori di PC Open in esclusiva potranno acquistare da subito il proprio dominio presso Register ad un prezzo scontatissimo (40% in meno. la statura di riferimento per i Web Master professionisti: Macromedia Dreamweaver e Adobe GoLive. Mettete in conto un sensibile sforzo di apprendimento per entrambi. senza correre il rischio di alterare i marcatori in cui sono contenute e osservando immediatamente il risultato.register. Home Site. inserire il codice segreto x6Wa3P nel box all’interno della pagina e verrete inviati alla home page del sito di Register. perciò non è possibile esercitare un controllo dettagliato su quel che succede. Molto indicato per chi vuole produrre un sito personale senza dover studiare. con InDesign per l’integrazione tra editoria sul Web ed editoria cartacea. I due campioni di questa categoria sono Namo Web Editor e Microsoft FrontPage 2002. costituisce oggi la fusione di ben quattro programmi diversi e permette di spaziare dalla produzione di siti statici alla programmazione avanzata. 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. Top Dawg. 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. e con Cold Fusion MX per la componente programmatica sul server. Editor visuali semplificati Offrono funzioni di “impaginazione” interattiva: il programma genera automaticamente il codice necessario per produrre la sezione di pagina dopo che l’abbiamo disegnata sullo schermo pemettendoci.register. non è consigliato invece ai Webmaster. Segnaliamo in chiusura di questa categoria Easy Web Editor. anziché dover ricorrere a ogni genere di utility e di mini-pro- grammi complementari. oltre che di interi siti. Macromedia MX. Tra i completamente gratuiti. dal momento che per poter usare lo spazio di hosting è necessario disporre di un dominio. JavaScript. lo sconto più alto oggi disponibile sul mercato). ASP e così via. Oltre a riunire tutte le funzioni di impaginazione grafica delle pagine di gestione integrali dei siti. . Dreamweaver è il più diffuso e il più “tecnico”. Ecco quindi la nostra iniziativa. destinato a chi debba gestire gli stessi contenuti sul Web e sulla carta e abbia uno spiccato background creativo. abbiamo selezionato: Aracnophilia. A loro beneficio. 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. a differenza degli editor di solo testo. con tutti gli automatismi per il controllo e la validazione degli stessi.0 Microsoft FrontPage 2002 Namo Web Editor 5 TopStyle Pro 3 Tipo ambiente grafico integrato editor HTML testuale editor HTML testuale editor HTML testuale editor visuale editor visuale editor HTML testuale  me edizioni degli editor grafici che avevano la pessima abitudine di inserire codice ridondante o addirittura errato. ma non ce la sentiamo di consigliarle perché.it /domains/allincluded.1a lezione Gli strumenti di lavoro presentati nei prossimi numeri Programma Adobe GoLive 6. Ancora più interessante per il Webmaster. L’unico prodotto gratuito di caratura professionale che si può segnalare in questa categoria è Microsoft Web Matrix. dove potervi esercitare nello sviluppo di siti campione su server reali. un programma in italiano che consente di creare pagine Web semplicemente disegnandole al video.6 HomePage + Hot Metal Pro 6. la versione più recente del prodotto. Sono indispensabili come base minima di lavoro per garantire una buona produttività e per semplificare la gestione degli script e delle pagine complesse. senza scrivere nemmeno una riga di HTML (www. È possibile inserire il testo e le immagini di contenuto direttamente nella pagina visualizzata in anteprima. Questi programmi spesso integrano anche funzioni per la ricerca automatica de- gli errori e di trasferimento a un server remoto. In più. Entrambi costano cari. indichiamo che funzionano su piattaforme diverse (Windows.

con anche po’ di teoria. Facile da leggere. Tutorial per Webmaster alle prime armi oppure con modesta esperiernza. Apogeo. Jackson Libri. INDISPENSABIL Introduzione elementare alla produzione di pagine HTML.14 euro. 616 pagine. Utile traccia per i consulenti del Web. Apogeo. Guida complementare al “Web Design Arte e Scienza” di Veen. 18. 35.60 euro. 25. 70 pagine. INDISPENSABIL Standard e tecniche concentrati in poche pagine con cenni sintetici che vi portano dalla navigazione. Apogeo. Apogeo. struttura e comportamento delle pagine. all’accessibilità. Hops. Fornisce i rudimenti del linguaggio per chi vuole produrre un sito personale oppure prototipale. Accessibile a tutti. Il libro vi parla di interfaccia. Perfetto per il consulente che si propone di migliorare il lavoro altrui o perfezionare il proprio approccio progettuale. Apogeo. 40. Costituisce un buon manuale pratico per la produzione dei più comuni elementi che costituiscono un sito. E Master di usabilità. che alcuni amano e molti odiano per il totale “integralismo” dimostrato dall’autore. 837 pagine. 290 pagine. Quaderno di progetto in grande formato. Hops. 18. Offre l’eperienza completa di una progettista professionale italiana che mette in prospettiva le cose davvero importanti. Jackson Libri. consigliato ai neofiti. passando per nozioni sulla percezione dei colori e sull’uso del linguaggio XML. Guida alla riprogettazione di un sito con indicazioni pratiche e numerose illustrazioni. Manca il perché delle cose. 45. 31 euro. anche in pillole. 310 pagine. INDISPENSABIL Indirizzato ai designer della transizione dalla carta a Web. 25.1a lezione 3 Per chi vuole approfondire: i libri consigliati INDISPENSABIL E La “bibbia del Web designer” propone l’esperienza e i consigli di uno tra i progettisti che hanno fatto la storia del Web: Jeffrey Veen. al di sotto delle aspettative. già pronto per accogliere le note che costruirete durante il vostro lavoro con un ipotetico cliente e che vi porterà. 334 pagine. all’usabilità. 7/88 Usabilità nel redesign. E Riferimento indiscusso sulla sintassi e la tecnica della versione più recente del linguaggio HTML. Hops. Altamento informativo. 45 euro. Più concreto dei manuali di usabilità e più ampio nei temi rispetto a un semplice testo di design. dalla definizione della struttura al lancio. Un libro che il Webmaster professionista deve possedere e conoscere.31 euro.28 euro. Non si può parlare di usabilità dei siti Web senza aver letto questo classico. 36 euro. attraverso le fasi principali. Ecco la seconda opera di Jackob Nielsen. ma utile per chi sta affrontando il redesign di un sito complesso e vuole trarre spunto dall’opera altrui. 245 pagine.12 euro. anche se non tutte le informazioni sono essenziali e alcuni strumenti sono datati. Un po’ datato invece per un impiego professionale: mancano i riferimenti ai fogli di stile. 44 euro. 212 pagine. Spiega concetti base utili a tutti. 236 pagine. Offre un sunto di molti aspetti operativi utili nella produzione di un sito. a un progetto completo. 20. Il libro è più un elenco di cose da non fare che da fare. 35 euro. E Design e usabilità all’italiana. 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. Tecniche Nuove.80 euro. universalmente riconosciuto come l’iniziatore di questa disciplina. . 418 pagine. 235 pagine. un classico. Utile riepilogo per chi sa già come fare. 442 pagine. spiegati con illustrazioni ed esempi. Apogeo.45 euro.

Spesso si sottovaluta l’impegno richiesto da questa attività. ma è comunque necessaria per mettere alla prova il sistema di navigazione e il sito in generale.it/ (un riferimento in italiano ricco di spunti tecnici. senza contenuti.1a lezione Dalla progettazione al lancio: come nasce un sito rima di mettere mano alle pagine e alla scrittura di marcatori HTML. assemblaggio e sistematizzazione dei contenuti. si riesce a mettere in evidenza i classici errori che finirebbero per mandare in tilt il sistema se commessi da un navigatore reale. http://www. prototipo di sito navigabile che mostri dal vivo lo storyboard. I contenuti arriveranno infatti dalle fonti e nelle forme più disparate: molto di questo lavoro. di solito accompagnata da una qualche attività di pubblicità. progetto dinamico che definisca il tipo d’interazione che il sito avrà con l’utente e che stabilisca quali elementi di programmazione sarà necessario aggiungere.asp (un sito italiano di consigli e tutorial per le cose più semplici).antiloco.  (versione integrale dell’articolo sul CD) sul CD n. si passa alla produzione vera e propria. è necessario definire la struttura del sito e la funzione dei diversi elementi che saranno nella pagina. realizzato da un giovane sviluppatore che fornisce non solo consigli di sviluppo. http://www. elementi di programma lato server e client. ma utile anche ai Webmaster).html.fucinaweb. collegamento eventuale a database. Adesso fornisce anche corsi a pagamento). 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. indipendentemente dal loro livello di competenza. Questa è la fase più delicata e pesa fortemente sulle spalle del Webmaster a cui viene richiesta grande esperienza nel riconoscere e prevenire eventuali problemi. Questa fase precede anche la stesura delle bozze grafiche che traducono in colore e immagini ciò che si è già ideato schematicamente sulla carta. alberazione sito Posizione stabile per gli elementi di navigazione in rapporto al contenuto Storyboard (descrizione. Fa parte dell’attività di mantenimento anche l’adozione di misure di prosegue sicurezza. . Una parte determinante nella fase di produzione prima del lancio è la formattazione dei contenuti. Il mantenimento Segue. pagina per pagina.com. tra cui anche lo sviluppo Web). definizione di un sistema di navigazione. da cui è possibile produrre molte altre pagine ciascuna con contenuti propri. una sorta di directory di risorse soprattutto per i Web developer. realizzando i template. ma l’esperienza 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. definizione della struttura di pagine e interfaccia. P La progettazione Esistono tanti modi per progettare un sito quanti sono i progettisti. incluso l’eventuale collegamento a un database che contenga i dati da visualizzare nelle pagine dinamiche. Quando si riesce a coinvolgere nel test utenti estranei alle fasi di progettazione.lycos. costruzione di una mappa del concettuale sito (disegno schematico). http://www. vale a dire la pagina campione. Il template è una sorta di “modello” o “stampo” da cui ricavare molte pagine singole che avranno uniformità visiva tra loro. moduli già pronti). scelta di Publishing System Template HTML. poiché è raro poter fermare il sito per lunghi periodi una volta che lo si è avviato.it/ (sito ricco di consigli e di tutorial realizzato per passione da un giovanissimo Webmaster autodidatta). Il lancio Consiste di solito in un’attività frenetica per correggere all’ultimo minuto i difetti riscontrati durante la fase di test e per caricare i contenuti finali prima della partenza ufficiale.webmasterpoint. consigli.scriptando.fare-web. progetto grafico e multimediale. Il test La fase successiva è naturalmente quella di test. infine. vale a dire la raccolta di tutte le informazioni che dovranno essere presenti sul sito al momento dell’avvio e il loro montaggio all’interno di pagine HTML statiche oppure il loro inserimento e catalogazione all’interno di un server. sul Web editor e sul Web designer oppure sull’operatore grafico. La realizzazione Terminate queste fasi progettuali. È necessaria una profonda conoscenza della piattaforma su cui il sito è basato poiché il comportamento dei server cambia drasticamente al variare del carico di lavoro. assemblaggio del tutto in una sequenza che “racconti” il sito (storyboard). http://www. org/home.net/ (sito dedicato agli autodidatti e alla formazione a distanza su diversi temi. alla fine peserà sul Webmaster. 65 Fasi di progettazione Risultato finale Raccolta delle informazioni sugli scopi del sito Analisi dell’eventuale concorrenza Costruzione della mappa Assemblaggio e sistematizzazione contenuti Definire un sistema di navigazione Strutturazione della pagina e dell'interfaccia Assemblaggio sistematico delle pagine del sito Prototipo solo testo 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. http://builder. 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. ma anche indicazioni su temi più generali come l’interfaccia e l’usabilità). Qualsiasi intervento deve essere efficace e rapido. Elementi chiave in tal senso sono il tipo di server impiegato e il database scelto per l’eventuale attività dinamica. ma consigliato) Intercaccia grafica che perfeziona la presentazione e navigazione del sito Definizione elementi di programma.com/ (in italiano. del contenuto statico e dinamico) Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo. orientato a i più esperti). È raro che ci sia abbastanza tempo per condurla come si deve.com/ webmonkey/ (uno dei due siti americani più famosi per i Webmaster e i Web developer. http://www. ma anche di attualità) http://www. Le tecnologie continuano a evolvere e ci sono innumerevoli problemi da risolvere nel lavoro di tutti i giorni.manuali. http://www. di per sé semplice.it/ (il sito italiano “storico” per chi sviluppa siti e vuole imparare a fare le cose da solo. ma gravosissima in ragione della grande quantità di elementi che vanno elaborati e dall’impossibilità di averli tutti in un formato omogeneo fin dalla partenza.com/ home/ (in italiano.com/ (l’altro sito americano di riferimento per i Webmaster e i Web developer. Ricco di tutorial. Ecco alcune risorse che consigliamo a tutti. Vi serviranno per approfondire durante il corso e oltre: http://hotwired.

La vista Codice elenca tutti i marcatori e ne consente l’editing diretto come in qualsiasi altro editor non visuale. la seconda invece mostra il risultato che tali marcatori produrranno sulla pagina finita. di amministrazione delle varie risorse e d’integrazione con le altre applicazioni grafiche di Macromedia (Flash e Fireworks). PHP) e ColdFusion studio per progettare applicazioni che usino il server ColdFusion come interfaccia semplificata nella produzione di pagine dinamiche create mediante l’interrogazione di un database.NET. le rispettive caratteristiche sono quindi ispezionabili nella vista Codice. Le si può visualizzare alternatamene oppure contemporaneamente così da vedere all’istante come le variazioni dell’una si propagano nell’altra. Il programma si basa su tre elementi d’interfaccia: la finestra di lavoro vera e propria. o viceversa. Webmaster o Web developer. UltraDEV per la programmazione con i linguaggi di scripting più comuni (ASP. I bordi grigi mostrano la struttura delle tabelle che mantengono ogni elemento in posizione. Partiamo dalle prime: le due viste di lavoro principali sono: Codice e Struttura. oltre che all’interno di una finestra di “proprietà” che è costantemente visibile e mediante la quale s’interviene sulle proprietà senza toccare il codice originale. di controllo centralizzato del sito. con tutte le relative funzioni di editing visuale. In sostanza. che mostra il tag con tutti i rispettivi attributi. Quest’ultimo in realtà non è integrato propriamente in Dreamweaver MX. C 1 Si tratta perciò del terreno perfetto per chi già si sente preparato in uno di questi tre campi e vorrebbe ampliare le proprie competenze. modificando gli elementi in modo visivo. Figura 2: La vista Struttura mostra una specie di anteprima attiva della pagina su cui è possibile intervenire direttamente. Inoltre le funzioni di convalida segnalano la presenza di eventuali errori nella pagina o nel sito e ci portano direttamente al punto interessato. È possibile “disegnare” o costruire visivamente elementi nella vista Struttura e osservare al tempo stesso il codice generato automaticamente nella vista Codice. Le icone sono suddivise per tema e ogni tema è raggruppato all’interno di una barra a cui corrisponde un’etichetta di tabulazione. nel nuovo Dreamweaver MX convergono il precedente Dreamweaver 4. indi- la demo sul CD n. con la possibilità di allargare le vostre conoscenze sfruttando un ambiente con interfaccia uniforme e con tutorial di buon livello. Ne permette la manipolazione diretta. diventando. 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). XHTML o di qualsiasi altro linguaggio di scripting. Webmaster per la costruzione delle pagine vere e proprie e Web developer per programmare la logica applicativa che permetta all’utente d’interrogare un database attraverso le pagine del sito. divisa in due viste. Figura 3: Prerogativa unica di Dreamweaver è la disponibilità di due viste affiancate e di vedere i cambiamenti eseguiti nell’una riproporsi immediatamente nell’altra 9/88 . 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ù.1a lezione 4 Macromedia Dreamweaver MX. L’obiettivo fondamentale di Dreamweaver MX è di fornire un ambiente capace di soddisfare contemporaneamente le esigenze professionali di tre figure: Web designer. 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. i menu e i pannelli degli strumenti. per la creazione grafica del sito. integrati. Come si presenta Il destinatario principale di un prodotto come Dreamweaver MX rimane il creatore di siti. Il programma integra anche una nu- 3 Figura 1: La vista Codice di Dreamweaver mostra i marcatori HTML (o di qualsiasi altro linguaggio di scripting) e i relativi parametri ben distinti dal resto del testo mediante colori chiaramente identificabili. 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 2 delle pagine. Oggi il prodotto si presenta molto arricchito. così da correggerlo e imparare dai nostri errori. Alternandosi tra le due. tramite mouse e comandi da tastiera. e si arriva anche a produrre sempre più velocemente risultati di qualità. 65 cando anche la struttura dei vari elementi e le reciproche relazioni. la nave scuola del Web design onsiderato nettamente il più diffuso tra gli strumenti professionali per lo sviluppo di siti. tutti gli elementi possono essere inseriti direttamente da menu. se possibile. un esperto veramente completo. Non si tratta di una prerogativa da poco ed è probabilmente la chiave del suo successo originale. 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. ASP. Il programma aggiunge anche rientri differenziati per le varie righe al fine di riprodurre visivamente le varie nidificazioni. mediante mouse e comandi da bottone/menu. Per la precisione. In aggiunta. Nella barra in alto troviamo icone suddivise in diversi pannelli per inserire direttamente ciascuno dei marcatori principali. Home Site con le relative funzioni di editing manuale del codice HTML. si acquista una conoscenza molto più profonda del linguaggio HTML e delle sue particolarità. 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 all’intero sito. e la finestra di controllo dell’intero sito. JSP. bensì all’interno di HomeSite+. tramite Dreamweaver MX e HomeSite+ aprite le porte a qualsiasi tipo di sviluppo presente e futuro. evoluzione moderna di HomeSite 5.

WML (Wireless Markup Language. pagine dinamiche e altro ancora. È possibile agire su una qualsiasi delle due. Se non ci ricordiamo quale sia il tag idoneo. CSS (Cascading Style Sheets – fogli di stile in cascata). 146.80 euro. fruendo però del controllo e della funzione di completamento immediato fornita da Dreamweaver.NET.Ottima palestra formativa . Qualsiasi oggetto modificabile con Fireworks MX o Flash MX può essere aperto direttamente dall’interno di Dreamweaver lasciando che sia quest’ultimo a passarlo temporaneamente in consegna alla nuova applicazione per poi riprenderselo a opera terminata.È compatibile con gli standard più recenti . Macromedia Studio MX. Nasce per rendere efficiente il lavoro congiunto di diverse figure professionali: il Webmaster. ASP (Active Server Pages) e ASP. 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). eccetera. ColdFusion. suddivise per argomento.com Costo licenza: 589.20 per l’upgrade da una versione precedente. JSP (Java Server Page). Qui la pagina viene disegnata come apparirà all’interno del browser però. tabelle. Gli strumenti visuali per la produttività Il secondo metodo di lavoro offerto dal programma è imperniato sulla vista Struttura. collegamenti. sfondi.È disponibile su diversi sistemi operativi. un ambiente completo dal quale non solo esplorare la struttura del sito.Manca un pieno supporto per il linguaggio Perl . inserire immagini. Ciò riduce il lavoro di battitura e gli errori dovuti a sviste. i percorsi di navigazione e le risorse impiegate. più complessa.Supporta la gran parte dei linguaggi di programmazione . oggetti multimediali. NT4. Qualsiasi variazione è comunque visibile immediatamente nella finestra Codice così da capire meglio quel che stiamo facendo. moduli usando le stesse icone e gli stessi menù già usati nella vista Codice. Requisiti: Windows 98SE. che descrivono minuziosamente i tag dei principali linguaggi: HTML.1a lezione trita serie di esercitazioni in italiano che coprono HTML. Nel caso si lavori nella vista Codice. La prima di tali modalità è anche la più semplice e consiste nel selezionare dalla barra di comando superiore l’icona corrispondente al marcatore che vogliamo inserire. per i telefonini) e ColdFusion. il Web designer e il Web developer.  Punti a favore: . È possibile anche utilizzare il pannello Sito per coordinare il lavoro di più persone. presi dal database integrato nel programma.Complesso da imparare .Power Macintosh 9. ME. anche se non altrettanto sviluppate. HomeSite e ColdFusion Studio. Controllo totale del sito Fin qui abbiamo incontrato funzioni che sono comuni anche ad altri editor HTML. attivando e disattivando selettivamente quel che occorre. a differenza di una semplice anteprima. Una seconda finestra d’ispezione. le informazioni corrispondenti compariranno all’interno di due finestre d’ispezione. librerie di codice. ma anche modificare parametri globali (propagando le variazioni su tutte le pagine) e manipolare singoli oggetti come immagini.Richiede un computer abbastanza potente . 2000. Ce ne sono a decine. JSP. Tale database contiene la sintassi corretta per tutti i marcatori standardizzati dei principali linguaggi: HTML. indica i parametri del marcatore e ci permette di modificarli o inserirne di nuovi usando le sue caselle. con numerose informazioni tutoriali. Dulcis in fundo. Sempre dalla finestra delle Proprietà possiamo anche definire link ad altre pagine interne al sito oppure a siti esterni. CSS. tutti gli elementi sono direttamente modificabili e si può digitare testo. Per il completamento automatico.1.Offre una vista contemporanea sul codice generato e sulla disposizione degli elementi sulla pagina . 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. senza dover scrivere nemmeno una riga. la seconda modalità consiste nel cliccare su un’icona di selezione generale che apre un elenco di selezione dei tag. JavaScript. possiamo generare un’intera pagina senza nemmeno scrivere una parola direttamente. Tanti approcci diversi per imparare il codice alla perfezione Rispetto alle versioni precedenti. che include anche Flash MX.  prosegue (versione integrale dell’articolo sul CD) sul CD 65 Identikit Dreamweaver MX è il più diffuso tra i Web editor professionali.Si espande gratuitamente attraverso moduli opzionali  Punti a sfavore: . oltre che ben otto libri interi. permettendoci di modificarli usando menù a tendina e altri supporti grafici. XP . 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. Tramite questo complesso pannello di controllo potete tenere sempre sott’occhio l’intero sito e quindi eseguire automaticamente gli aggiornamenti necessari sul server così da mandare in produzione le varianti collaudate prima localmente. Perciò. bloccando pagine che voi state modificando affinché altri non le possano modificare nel frattempo. denominata appunto “Finestra di ispezione tag” elenca tutti i possibili attributi di quel particolare marcatore. con esempi da eseguire di prima mano. nel caso sia disponibile sul nostro computer.Offre ricchi strumenti per la gestione di un intero sito . forniti da editori di tutto rispetto come O’Reilly e Wrox. la finestra Proprietà sempre aperta sulla parte bassa dello schermo. sia in termini di similitudine d’interfaccia sia in termini di rapidità nel modificare elementi grafici e Flash mediante la tecnica di “andata e ritorno”.Il codice generato con gli strumenti grafici richiede occasionalmente verifica manuale Scheda tecnica Sito produttore: www. tramite l’abbinata di due finestre dedicate. confidando nel fatto che la sintassi sia sempre corretta. Per funzionare al meglio. Dreamweaver MX consente di spostare e agganciare (dock) i diversi pannelli di comando all’interno della finestra a video oppure su un secondo video. fino a quando ci sentiremo abbastanza esperti per inserire i comandi in prima persona. È un prodotto complesso che richiede un certo impegno per poterlo conoscere e sfruttare a fondo. In tal modo. Costituisce anche un’eccellente base formativa. Insomma. una sorta di videoimpaginazione Web È cresciuta anche l’integrazione con gli altri strumenti della famiglia Macromedia.Incorpora le funzioni di quattro programmi prima separati . compreso Macintosh . ASP. la finestra che contiene il codice vero e proprio prevede tre modalità distinte d’inserimento manuale dei tag. il programma incorpora una serie di moduli già pronti per gli usi principali (snippet) da poter integrare nella nostra pagina e da cui imparare. ma è possibile realizzare sistemi di controllo elementari anche utilizzando il pacil corso chetto di base.2 oppure OS X 10.50 euro.Consente di unire efficacemente il lavoro di creatività e di produzione tecnica . strumenti di verifica e costruzione automatica del codice. Costituisce l’evoluzione del precedente Dreamweaver 4 e raccoglie al proprio interno anche le funzioni di UltraDev. combinando icone. il programma attinge sempre dal proprio database interno che può essere espanso a piacere con l’inserimento di tag personalizzati. fogli di stile.80 per la versione upgrade. JavaScript. menù e le due finestre d’ispezione. 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. . 574. La gestione del sito è invece una prerogativa classica dei programmi di fascia alta e Dreamweaver MX realizza. PHP. la funzione di coordinamento di gruppo richiede l’acquisto di uno strumento ad hoc di Macromedia da installare sul server (Sitespring). Una volta digitato il marcatore. liste. Fireworks MX e FreeHand 10 costa 1150.macromedia. offrendo a ciascuna una serie di strumenti completi. osservando immediatamente i cambiamenti riportati nell’altra. la pletora di finestre di controllo che accompagnano il nuovo programma può essere configurata a piacere. 10/88 Una.

a seconda delle nostre abitudi- L ni e della nostra capacità di spesa.  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: Siti statici e linguaggio HTML Progettare un sito statico: definizione della struttura. collegamenti assoluti e relativi. per poi passare. potrebbero inavvertitamente alterare anche i marcatori in cui questi sono racchiusi. perciò il know how su come realizzare un sito statico interessa tutti ed è anche impor- IL CALENDARIO DELLE LEZIONI Lezione 1: Sistemi di navigazione: impostare la navigazione del sito in modo che sia comprensibile. perciò non è possibile demandare le attività di pubblicazione e di aggiornamento a persone non tecnicamente qualificate. Ogni volta che si vuole aggiungere qualcosa. Esistono tecniche per limitare tali rischi. Strumenti di navigazione: elementi che i browser offrono per la navigazione di un sito e come sfruttarli nella progettazione. nel cambiare il testo o le immagini. In buona sostanza. 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. che aumenta al crescere del sito e che non sempre è possibile farsi remunerare. struttura lineare: i tre possibili approcci per l'architettura del sito e le relative varianti. mentre per modificare i contenuti già presenti. centrate su database. 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. Progettare la pagina: modelli di pagina. a strutture dinamiche. Costruzione della mappa – gerarchia.2a lezione  A scuola con PC Open 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. contenuti aggiuntivi sul CD • Versioni integrali e complete degli articoli pubblicati sulla rivista Lezione 3: Modelli di pagine e tabelle Lezione 4: HTML 4. inequivocabile ed efficace. tag. domini reali e virtuali. ambigui e misti. scombinando la pagina. ossia dinamico. 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. diventa necessario agire sulle pagine già pubblicate per mezzo di un Editor HTML di tipo testuale o grafico. la caduta della “piega”. è 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. Competenze e strumenti (disponibile integralmente sul CD) il corso è • Che cosa fa un Webmaster sul CD • Gli strumenti di lavoro n. Pagine HTML e marcatori: sintassi del linguaggio. poiché. usabilità e accesso. frame e form. Per tale motivo. Strutturare i contenuti della pagina: tabelle. In un sito centrato su database. la tendenza di tutti i progettisti è di usare le strutture statiche solo per i siti più semplici. 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.01 e CSS Lezione 5: Design e multimedialità Lezione 6: Siti interattivi Lezione 7: Interazione sul server Lezione 8: Promuovere il sito . formattazione. qualsiasi sito nasce statico. non appena possibile. dove gli aggiornamenti siano poco frequenti e di modesta entità. 11/88 Sistemi di labeling: come scegliere correttamente le "etichette" che identificano i vari elementi di navigazione. In ogni caso. nella sua forma di prototipo originale.0: le caratteristiche dell’ambiente di sviluppo integrato. bisogna creare una pagina ad hoc. tecniche di impaginazione. Adobe GoLive 6. Ciascuna pagina di un sito statico contiene invece infor- mazioni e tag HTML mescolati tra loro. ipertesto. in ogni caso il sito statico costituisce un impegno importante di manutenzione per il Webmaster.

il commerciante mi aveva fregato. non ha certo perso tempo: visto che Genova nel 2004 sarà Città della Cultura. ma con costanza. 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. Un suo amico le consiglia di acquistare PC Open. la mia città. 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). Dopo di che si traccia una mappa del sito. basta mantenere i nomi brevi ed evitare l'uso di spazi bianchi (sostituiteli con un tratto di sottolineatura o con un trattino). Ad esempio <h1> è il tag che identifica un titolo e si chiude con il corrispondente tag </h1>. Nei mesi cerchi di immaginarlo e poi eccolo lì davanti a te. scambiano e-mail con tutto il mondo. 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. lo acquista. E. 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. creato il sito e preso 30 con tanto di stretta di mano del professore e offerta di lavoro in facoltà appena se ne sarebbe verificata l’opportunità”. ma diventa essenziale per una futura conversione verso XML. del tag di chiusura e del testo racchiuso tra i tag. spesso usata come sinonimo di quest'ultimo. in HTML. CONTENUTO (content) qualsiasi cosa presente nella documento che non costituisca un marcatore. Fine. Questa regola non è imposta dai browser moderni. diplomata al Conservatorio di Genova. . È facile. Poiché quest'ultimo può variare. Molti tag HTML sono binari. e Front Page. “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. Notate che il valore di un attributo deve essere sempre compreso tra virgolette. definirne la natura ed eventualmente l'azione da compiere su di esso. ELEMENTO (element) corrisponde. Nell'esempio sopra l'identificatore è h1. Perciò <h1 align="right">Titolo allineato a destra</h1> produrrà un titolo allineato a destra. seguendo la mappa tracciata prima. ci conviene adottare un approccio che renda i nostri file compatibili con Windows. Infatti spiega:“Nasco come maestra di pianoforte. Una regola importante nella scelta dei nomi di file e directory è evitare caratteri speciali che possano essere incompatibili con il sistema operativo del server. che richiedeva come esercitazione la costruzione di un sito Web. In questo articolo e nei seguenti cercheremo quindi di esaminare l'approccio corretto fin dal principio. ventinove anni.decido che devo imparare”. Un codice HTML scritto in maniera scorretta può costringervi a riscrivere per intero tutte le pagine al momento del passaggio alla modalità dinamica. Parte dal computer. Partivo da zero. Uno dei valori da esso consentiti è right. nel caso in cui il marcatore indichi un'azione che deve essere compiuta sul server. un sito statico consiste semplicemente di una serie di file distribuiti in varie directory.“Da quel momento ho iniziato a studiare sulla rivista. TAG (etichetta) l'indicazione d'inizio e di fine che si usa per delimitare l'efficacia di un marcatore. la BeaBea della community di Pc Open. Alcuni marcatori vengono direttamente rimossi da server prima ancora di spedire la pagina al browser. 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. nel giro di sei mesi ho preparato l’esame. BeaBea. vale a dire la parola inglese o lettera che compare all'interno dei simboli < >. Intorno a me matricole chattano. 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. ha già inviato il progetto alla Provincia. ma esistono 12/88 molti altri linguaggi basati su marcatori.. vale a dire operano a coppie e richiedono un tag di apertura e un tag di chiusura per completare la marcatura. 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). Evitiamo anche l'uso di qualsiasi vocale accentata (sia maiuscola sia minuscola) e dei seguenti caratteri speciali: < . Che si è concretizzata proprio in questo mese: attualmente Beatrice fa una sostituzione come assistente e-learning al Centro Linguistico Multimediale di Interfacoltà (Climi) e al Centro di Teledidattica dell’Università di Genova. in carne e ossa. bensì aggiunge semplicemente informazioni relative a tale contenuto e viene rimosso dal browser prima della visualizzazione finale della pagina sullo schermo del navigatore. Nella pratica. Windows NT/2000 e con Unix/Linux. In effetti. Ma dopo un po’ di tempo (e di tentativi). “Mi hanno chiesto di fare una ricerca su Internet: immediata la mia risposta . Fondamentali per questo. Perciò la scritta: <h1 align="right">Titolo allineato a destra</h1> nel suo insieme costituisce un elemento.cos’è?-.2a lezione tante sapere come predisporlo fin dall'inizio alla sua evoluzione dinamica. mi rendo conto che in ambito musicale non ci sarebbero state speranze. così da replicare fisicamente sul disco. Possiamo modificare il tag di apertura aggiungendo un attributo che determina l'allineamento del titolo: align. Ed ecco Beatrice Demont. dovremmo avere anche i nomi e la posizione delle directory. i percorsi di navigazione previsti per il sito. come ci si poteva aspettare da lei. Il marcatore non fa parte del contenuto della pagina. Solo il tag di apertura può contenere attributi e valori. Contemporaneamente preparavo l’esame di informatica con il professor Parodi. quindi decido di iscrivermi all’università. una ragazza che alla tastiera del pianoforte ha preferito quella del computer. Il suo sogno? Rimanere in facoltà e aprire un centro studi ricerche volto allo scambio di informazioni letterarie e critiche tra Italia e Francia. solida e determinata. almeno a grandi linee. E ora che ci faccio?”. . prima imparando a utilizzare bene Office poi programmi come Arachnophilia. Mi piazzano davanti a un PC nel laboratorio di facoltà e mi dicono come si accende. infatti. : > " ' * / \ & ! % ? = # () [] + il punto fermo è ammesso. prende una “sola”: “un chiodo. ma se prevediamo un minimo di espansione. 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). Un sito molto semplice potrebbe avere tutti gli elementi in una sola cartella. alla combinazione del tag di apertura. sarà opportuno avere cartelle separate con più livelli in cascata per tenere ordine nei contenuti. le sue competenze informatiche e ovviamente linguistiche. Prosegue gli studi con successo fino al giorno fatidico in cui si incaglia in un computer. Da queste tre attività ricaveremo il sistema di directory che conterrà i vari file. alla Facoltà di Lingue”. quindi ferocia. IDENTIFICATORE (identifier) è il nome del tag. scorazzano sulla Rete: invidia. I marcatori più conosciuti sono quelli del linguaggio HTML. in particolare i vari linguaggi di scripting da usare per inserire azioni nella pagina Web.. Conviene evitare anche l'uso del segno del dollaro ($) e di qualsiasi caratte. Qualsiasi tag inizia con i simboli "<" oppure "</" e termina con i simboli ">" oppure "/>". degli eventuali attributi.

13/88 presente sul server e inviato al navigatore quando costui digita l'indirizzo del sito senza indicare una pagina in particolare. 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. Il nome della home page. il Macintosh si ferma a 31 caratteri. 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. Per le immagini i suffissi riconosciti dai browser sono .siamo sicuri di aver trasferito re dei file index.HTML per le pagine in generale.JPG per le fotografie.HTM o . 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. Le al. irrilevanti per Windows. I più comuni sono . Qui la vista care e regolarsi di strutturate delle cartelle è tratta dalla finestra di conseguenza.PNG) per grafica e foto.asp (. abbinate a una particolare paTuttavia. a partire dalla home page (index. a meno che siano stati configurati altrimenti. quando possibile. ad esempio www. a seconda del mente da dove si trovi la pagitipo di contenuti del sito. i siti aggiungere o variare qualcosa dinamici collocano nel databasapremmo dove cercare.HTML per il lavoro in locale perciò consigliamo di usare sempre quest'ultimo. mantenendosi in sostanza all'interno delle lettere primarie dell'alfabeto.se solo gli elementi di testo e il . ma ciò finisce per rendere il nome illeggibile.asp. 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.htm e home.htm e index. ma riconosciute da Unix/Linux. indipendenteriodi temporali. Inol. Il nome di questo file "indice" è index. prestate anche attenzione all'impiego delle maiuscole e delle minuscole. e su gran parte dei server Unix e Linux di recente concezione.htm o index. al fine di essere compatibili con tutti. Infatti.2a lezione  re particolare. con la possibilità di riconoscere anche index. Ciò commodo. copiando l'intera cartella che se c'è chi consiglia di crea. se pensate di congina HTML vengono spesso vertire il vostro sito da statico collocate nella stessa directory a dinamico.0 che consente di tracciare i contenuti del sito con tutte le relazioni prima ancora di aver creato una singola pagina. Può assumere anche altri nomi come main.solito in una cartella unica. an. tutti i contenuti relativi plicherà i link all'interno delle a un determinato argomento pagine.ASP è il suffisso delle pagine dinamiche realizzate con Active Server Pages). Anche i nomi dei file tutti questi tipi. I due sono intercambiabili in Windows. di sistema può confi. ma ci metterà nella sono raccolti in una singola condizione di usare il database cartella e quando dovessimo in modo efficiente. welcome. cioè della prima pagina del sito. La mappa è stata realizzata mediante lo strumento di disegno siti di Adobe GoLive 6. Il DOS è limitato a 8 caratteri di nome e 3 caratteri di suffisso.ti necessari è la semplificaziozo che finisca con il nome di ne dei link. Come vele home page di secondo e ter.di contenuto.) e fate altrettanto con i caratteri speciali e le vocali accentate.tre. gifocus.più facili da capire nell'immagine. il programma genera tutte le pagine e le directory necessarie a rappresentarla. È 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. icone. è 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.mediatamente sotto la root del gina indice composta di un sito e accessibile da tutte le alelenco dei file e delle cartelle tre pagine.JPEG e .comuni all'intero sito (loghi.GIF) per la grafica a 256 colori e Portable Network Graphic (. il trattino e la sottolineatura.Esplorazione sito di Dreamweaver MX tre pagine possono avere un nome a piacere. Le immagini che invece sono una directory senza specificare nient'altro. Macintosh usa in modo nativo il suffisso . In tal modo saremo comprese in quella particolare sicuri di avere una singola copia di ciascun elemento grafico directory. le immagini bile in tutto il sito.htm o default. ma è sono di tipo esplicativo. imza in alcuni casi una propria pa.htm. Sostituitele sempre con il codice equivalente previsto da HTML (&quot.html per i server Unix e Linux. Infatti in server cerca ulteriore di raggruppare nella automaticamente tale file ogni stessa cartella tutti gli elemenvolta che digitiamo un indiriz. i numeri.dremo più avanti. Alcuni consigliano di mantenersi entro i vincoli del DOS. Windows dalla versione 95 in avanti consente di usare 255 caratteri e lo stesso vale per Unix. Macintosh o Linux senza problemi. Notate che. nel caso di Internet Information Server di Microsoft. directory per realizzare un sito che contenga gli articoli L'amministratore di questo corso per Webmaster. Una volta che la mappa è definita. pulsanti) si trovano di e nel caso non lo trovi visualiz. Anche la lunghezza dei nomi è importante.it/prodotti/fotocamere.html) per scendere verso le pagine singole che compongono una lezione del corso. anche se quest'ultimo è tuttora poco diffuso. Graphics Interchange Format (.html anche per tutto ciò che serve. in tal modo il sito potrà spostarsi su macchine Windows. e di poterla modificare a piaceCollocare i file grafici re sapendo che la variazione e multimediali sarà immediatamente disponiPer comodità. In tal na a cui si riferiscono. un beneficio zo livello.htm a seconda del server Ecco come si traduce sul disco la struttura a impiegato.trattandosi di un sito statico. Non abbiamo seguito la convenzione di scrivere tutto in minuscolo per renderli sempre bene verifi. e diventa default. Nella definizione dei nomi di file.

La terza parte. detto Uniform Resource Locator (URL).URL http:// www. laboratorio. cioè l'Hypertext Transfer Protocol. Risoluzione di un indirizzo assoluto .it/ testlabs/ testlabs. è consigliabile in ogni caso utilizzare due directory separate per le immagini di servizio del sito (loghi. senza farlo corrispondere. Nel caso in cui il server sia di vostra proprietà. gran parte delle directory scompare poiché esistono pochissime pagine precostituite. Il sito stesso poi è accessibile sul Web per mezzo di un indirizzo universale. perché quest'ultimo è spesso complicato da ricordare oltre che fuorviante. anche la relativa posizione. talvolta è invece l'ISP che ospita il vostro sito su uno dei suoi server.digifocus. tuttavia potrebbe essere utilizzata per creare infinite variazioni del dominio che puntino. 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. se invece doveste codificare nel database. nel caso delle pagine Web. ciascuna. bottoni) e per le immagini di contenuto. tuttavia vale la pena di prevedere un cartelletta a parte. il vostro nome a dominio è conservato su una macchina diversa dal server che ospita il sito. solitamente di servizio. a siti separati. Inoltre entrambi potranno trovare le proprie immagini al volo. ORG per le organizzazioni senza fini di lucro.it server del provider server che ospita il dominio (maintainer) Sito # 15 home.URL NAVIGATORE root URL directory di servizio www. L'interso sito è unito da questi link. tra l'altro. diventa un ottimo sostituito per l'indirizzo del server. Il domino è solitamente composto da tre elementi separati da un punto. 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 . Questa prima parte del dominio è assegnata alla gestione di organizzazioni internazionali che ne definiscono le regole di assegnazione. 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.pcopen.html testlabs testlabs. Nella pratica. oltre al nome dell'immagine.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.2a lezione Collegamento assoluto . Vale a dire. strutturati 14/88 pagina richiesta Quando digitiamo un dominio. che identifica il particolare server che lo sta ospitando. sempre spostandosi verso sinistra. come da regola. 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. finireste per complicarvi la vita e vincolare il database a una particolare struttura di directory. Chiude l'elenco l'indicazione del tipo di protocollo utilizzato per il trasferimento delle informazioni. Spesso non viene usata e la si riempie con la dicitura www per indicare che si tratta di un server che contiene pagine Web. lineare o completamente libero (ipertestuale) come descritto nei vari sistemi di organizzazione delle informazioni (vedi Tecniche di progettazione nella lezione 1). sapendo che sono tutte collocate nella stessa directory. IT per i domini concessi a persone e società residenti nel territorio italiano. La scelta del maintainer è importante poi. seguono immediatamente dopo le eventuali directory da attraversare prima di arrivare alla pagina.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. I file multimediali. in modo gerarchico. Ad esempio. senza rovistare in mezzo ad altri file di cui non conoscono il contenuto. Nei siti dinamici. Spesso quest'ultima è un sistema del maintainer. 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. tuttavia ciò si verifica di rado e si parla quindi di dominio virtuale. ad esempio pcopen. se non altro per ordine. nella quale è indicato l'indirizzo fisico della macchina su cui tale dominio è residente. (HTTP). vengono spesso inseriti nella stessa directory che contiene le immagini. lo URL digitato dal navigatore non riflette quasi mai l'indirizzo del server in quanto tale. prende il nome di sottodominio. Se metteste nel database ogni file grafico per intero finireste per appesantire il sistema e rallentare il sito. la richiesta viene inviata a una rete di computer che gestisce una mappa di navigazione globale del Web. tecnicamente definita maintainer. probabilmente il dominio sarà residente sul server medesimo. Tale computer solitamente appartiene alla società a cui avete affidato la conservazione del vostro dominio. alla directory radice (root) del vostro sito. La seconda spostandosi verso sinistra contiene il nome scelto da chi registra il dominio. Tornando ai siti statici. Poiché un nome a dominio è riservato a un solo detentore su scala mondiale. Spesso si tratta di chi vi ha venduto il dominio in primo luogo. ossia URL (Uniform Resource Locator). ossia audio e video. La prima parte dello URL contiene solitamente il dominio abbinato al sito su cui la pagina è residente.digifocus. 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. perciò il grande "calderone" comune per le immagini è obbligato. prendendo a riferimento di partenza la directory radice (root) del sito entro cui si trova la home page nome delle immagini relative.it potrebbe rimandare a un sito specifico per il nostro laboratorio prove. elementi grafici della pagina. vale a dire su un computer sempre accessibile via Internet che rimanda verso il server reale non appena lo si interroga. cioè l'organizzazione che si limita a ospitare il dominio e tenerlo vivo. il che produce alla fine un indirizzo lunghissimo e difficile da digitare.

. anche se questo è magari perfettamente funzionante. Chiameremo il primo.html" in cui dobbiamo inserire il link: l'indirizzo relativo diretto contenuto nella pagina "testo.html" si trovi appunto in "testi" mentre il file grafica.html grafica. la quale coincide con la root del sito solo nel raro caso in cui il server non ospiti nient'altro.jpg". questo approccio presenta un problema diverso. 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. il browser esce dal sito. ma che invece noi chiameremo link completo. Attenzione. Infatti il . ridiscendere all'interno di questa alla ricerca del file "grafica. Per ovviare a tale inconveniente si usa un'altra forma di link relativo che alcuni definiscono.jpg testo. Ad esempio. indipendentemente da dove tale sito sia collocato nel server del provider. 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.html “.html nella directory "testlabs" del sito www. È semplice da realizzare e funziona sempre a condizione di mantenere pagina di partenza e oggetto di destinazione nella stessa cartella.html" fosse spostata in un altro punto del sito. L'indirizzo relativo diventerà in tal caso = "./immagini/grafica.jpg".. il browser sa che deve cercare il file "grafica. sulla finestra del suo browser.digifocus. completa l'indirizzo e ritorna nel sito. La posizione della root è indicata per convenzione da una barra inclinata (/) perciò il nuovo indirizzo relativo completo sarebbe = "/articoli/immagini/grafica. Peraltro tale approccio aumenta i vincoli verso quel particolare provider poiché.jpg". si usano collegamenti relativi che indicano le sole informazioni indispensabili per raggiungere il file a partire dalla posizione in cui ci si trova. ma che.it.html" sarà semplicemente = "grafica.jpg" nella stessa cartella della pagina "testo. con inevitabili ritardi di propagazione degli aggiornamenti sulla Rete e temporanea invisibilità del vostro sito. bensì alla root dell'intero sito. Funziona in qualsiasi circostanza perché è autosufficiente. bensì in una cartella due o tre livelli più sotto.jpg" che si trovi nella stessa directory "articoli" della pagina "testo. Dobbiamo usare un link indiretto e dire al browser di uscire dalla directory "testi" in cui si trova la pagina "testo. vedrà il nome a dominio seguito dalla serie di directory e sottodirectory che da lì scendono per portarci alla pagina vera che abbiamo chiesto. salire di un livello (mediante il segno convenzionale dei due punti consecutivi . cerca il dominio. 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. però.html". dovunque questa si trovi all'interno del sito Collegamento relativo indiretto (consigliato) home page articoli testi immagini grafica. Di conseguenza.. Nel caso in cui dovessimo spostare la pagina "testo. Affidare il nome a dominio a chi ve l'ha venduto è la soluzione più rapida e meno costosa. Il navigatore non vedrà tali livelli accessori. ossia il browser spesso interpreta come directory radice l'effettiva root del server. assoluto.jpg sia nella cartella "immagini". Ne esistono di tre tipi.html ci dice che stiamo andando alla pagina testlabs. 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.2a lezione Collegamento relativo diretto home page articoli testo. Ciò significa che la home page del nostro sito non si trova nella root (directory principale) del server Web che la ospita.jpg link diretto = “grafica.jpg" e funzionerà solo fintantoché la pagina di partenza resterà nella posizione attuale all'interno della cartella "testi". cercare la directory "immagini". sempre a condizione naturalmente che non si sposti anche la directory "immagini" a cui il link punta.digifocus. tracciando l'intero percorso che bisogna seguire per passare dall'una all'altra. Nel momento in cui legge questo indirizzo. ma non viene mai usato per i collegamenti interni del sito perché ogni volta che si digita un indirizzo assoluto. con vistosi rallentamenti alla navigazione e congestione del server che gestisce le richieste del nome a dominio. 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).html" oppure la cartella "testi" a un livello inferiore o superiore. / immagini / grafica. Prendiamo l'esempio di un'immagine "grafica.it/testlabs/testlabs. In tal modo il link continua a funzionare anche nel caso in cui la pagina "testo.) . il più semplice. erroneamente. nel 15/88 momento in cui voleste cambiare dovreste anche spostare la posizione del nome a dominio. potrete richiedere garanzie sull'efficienza tecnica del collegamento tra i due server.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. È 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à. link diretto perché si riferisce alla cartella in cui già ci troviamo. e qualora costui sia anche il vostro provider. lo URL http://www. per i passaggi interni al sito.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. ritorna su quest'ultimo. il link smetterebbe di funzionare. solitamente.html". ma comincerà la navigazione direttamente dal punto in cui il si trova la home page del sito e. individua il server fisico corrispondente. Quando lo digitiamo. Si tratta di un link che non è relativo alla cartella di partenza.

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. Inoltre. 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. dovrà anche tenere conto di elementi di usabilità e di navigabilità del sito. pie' di pagina. usando le apposite finestre di controllo. se spostiamo un file oppure una cartella da una posizione all'altra.2a lezione mascheramento della struttura di directory del server ospite avviene solo quando usiamo l'indirizzo assoluto. a condizione naturalmente di averli impostato utilizzando le funzioni interne dell'editor e non direttamente a mano. e cesserà di esistere subito dopo. il numero di colori visualizzati. 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. Perciò il progettista deve costruire una pagina che mantenga una propria coerenza anche se sottoposta a vistose alterazioni nel momento in cui viene ricevuta. il template o modello. offrono anche un pannelli di controllo dell'intero sito che consentono di esaminare in dettaglio ciascun elemento. spesso realizzato da un creativo. In tal caso. il contenuto vero e proprio e qualsiasi altro elemento che sia necessario (ad esempio banner pubblicitari. verranno aggiornati automaticamente tutti i link che vi fanno riferimento negli altri documenti. completo di nome a dominio. e a ricostruirli ogni volta che spostiamo qualcosa. oppure mediante le funzioni integrate in gran parte degli Editor HTML commerciali e gratuiti.jpg testo.  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. per scendere verso la posizione dell'oggetto di destinazione indicato nel link.html “/ ar ticoli / immagini/grafica. 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. invece che richiedere l'inserimento manuale da parte del Webmaster o del content editor. I più ricchi tra questi. Ogni volta che sarà necessario produrre una nuova pagina. copiando magari solo i file che sono stati modificati dopo il precedente aggiornamento. Modelli di pagina La creatività non ha limiti e ci sono diversi approcci possi. Per il trasferimento delle pagine finite si usa il protocollo FTP (File Transfer Protocol) tramite utility specifiche. saranno aggiornati anche gli elementi fissi (navigazione. per sua stessa natura. La prassi migliore è pertanto quella di usare link relativi indiretti. altrimenti i link finiranno per interrompersi. sfondo. il template contiene l'intero codice HTML necessario per l'ossatura di una pagina vuota. la dimensione della finestra. infatti qualsiasi pagina di contenuto verrà prodotta automaticamente al momento della richiesta da parte del navigatore. la grandezza dei caratteri e altro ancora. .0 che contengono funzioni per la gestione integrale del sito. La traduzione non è mai perfetta. In quest'ultimo caso. 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. ed è anche importante tenere la struttura del disco locale identica a quella del server remoto. eccetera) contenuti nelle pagine U 16/88 prodotte nel frattempo a partire da tale template. che giace completamente sotto il controllo dell'impaginatore. basterà copiare il template. vale a dire dalla directory in cui si trova la home page. nasce per essere visualizzata sui tipi più disparati di computer. così chiamato perché serve da "stampo" per la costruzione di tutte le pagine successive. che consentano a chiunque arrivi nella pagina direttamente dall'esterno di capire dove si trovi. colore. togliendoci dall'impiccio. ogni volta che aggiorneremo il template. e così via). sia perché non esiste alcun modo per controllare esattamente l'aspetto che la pagina avrà quando visualizzata dal browser del navigatore. Copie locali e aggiornamenti Un sito statico nasce sul computer di chi lo sviluppa e viene trasferito a intervalli periodici sul server di pubblicazione. Il template parte da un disegno generale. a costruire i link relativi indiretti nel modo più idoneo. 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. abituarsi a lavorare per template costituisce un'ottima palestra per affacciarsi al mondo del Web dinamico. eseguire simulazioni e verifiche in locale prima dela pubblicazione finale. modificando la risoluzione dello schermo. Inoltre molti browser offrono al navigatore la possibilità di personalizzare PC Open 27 Dicembre 2002 ciò che vede. Nel concreto. di che cosa la pagina tratta e dove può andare da quel punto. Da notare che il sito dinamico non avrà altre pagine al di fuori dei template. Per fare in modo che tutto funzioni a dovere è importante usare link relativi sulla propria macchina in modo corretto. L'operazione può essere eseguita a mano oppure demandata in automatico agli editor che dispongono della gestione automatizzata dei template. inserire il contenuto e aggiungere eventuali link. travasando nel template le informazioni prese dal database. Il collegamento è svincolato dalla posizione della pagina di origine che lo contiene e perciò quest'ultima può essere spostata liberamente nel sito pato. infatti. il Web designer. 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.jpg” link completo = porta alla radice del sito scende di 2 livelli Il collegamento relativo completo parte dalla radice (root) del sito. Per tale motivo. Lavorare con i template senza un editor che li gestisca in automatico aggiunge tempo al ciclo di produzione. A differenza della pagina di una rivista. la pagina Web. Ci penserà il programma. 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. eccetera). equipaggiati con i browser più diversi e con ogni genere di sistema operativo.

Che cos'è un editor visuale? 4. Search box and Directory. Libero e tanti altri. Quali sono gli strumenti di navigazione offerti dal browser? 8. Quali sono i due possibili schemi per organizzare le informazioni? 6. che offre immediata visibilità di quel che c'è sotto la home page. benché meno dannosa. la navigazione locale (link che collegano tra loro varie parti di uno stesso articolo). perciò è inevitabile avere home page con uno oppure anche due scrolling e pagine interne che arrivano fino al limite massimo di cinque scrolling. Entrambe le soluzioni risultano appaganti per il progettista grafico e magari per il marketing. di richiami editoriali e di eventuali contenuti pubblicitari. Che cos'è un editor HTML di tipo testuale? 3. centrale. Cos'è HTML? 15. solitamente. la famigerata splash page. i bottoni realizzati dal marketing per iniziative promozionali oppure dal content manager per evidenziare altri contenuti del sito. Che differenza c'è tra un collegamento assoluto e uno relativo? 12. in aggiunta a quelli primari in testa alla pagina. solo una parte dei navigatori esegue lo scrolling verticale della home page per vedere il contenuto sottostante. un pulsante skip intro per procedere direttamente alla home page del sito. Test: leggi le domande e verifica le tue risposte Riepilogo dei concetti studiati nelle prime due lezioni ? 1. perché ospita banner e bottoni secondari. quella che tutti vedranno e che perciò tenderà ad affollarsi di elementi di navigazione. È invece pessima e deprecata la prassi del tunnel. Solitamente la si utilizza anche per elementi di servizio. con una colonna all'estrema destra della pagina usata per contenuti minori. È 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. Che cos'è un ambiente di sviluppo integrato? 5. area extramercial. 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. Che differenza c'è tra un sito statico e uno dinamico? 10. ossia la classica visualizzazione tabellare degli argomenti che troviamo in Yahoo. alcuni portali hanno inventato un altro modello di pagina. Il modello LSD soddisfa anche le raccomandazioni di usabilità di Jakob Nielsen. dopo la piega (below the fold). Virgilio. Nella pratica la zona di contenuto non viene sfruttata appieno per un limite intrinseco di tutti i browser. Quest'ultima è l'elemento centrale del modello poiché consente di creare una struttura di navigazione molto ricca. 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. il navigatore medio si ferma per 8 secondi su una qualsiasi pagina prima di decidere se approfondire oppure andare altrove. 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. è la caduta della piega o fold. A dire il vero. il numero di elementi da enfatizzare in quest'ultima cresce rapidamente. Quante possibili strutture esistono per la mappa di un sito? 7. come la finestra di login. dunque la home page deve offrire a colpo d'occhio ogni possibile strumento per capire cosa ci sia all'interno del sito. in aggiunta alla barra standard. Quali sono le competenze di un Webmaster? 2. Il termine è preso a prestito dal mondo dei quotidiani la cui prima pagina è visibile solo per metà quando è piegata sul banco dell'edicolante. Altrettanto deprecata. 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). contiene sempre gli elementi di richiamo più forti. eventuali banner e l'indicazione di dove ci si trova in quel momento all'interno del sito medesimo. Per compensare in parte il problema della piega e rendere il più visibile possibile i contenuti interni del sito. denominato in gergo LSD dall'inglese Logo. Sempre secondo le indicazioni di Nielsen. Che regola seguire nella strutturazione delle directory? 11. in particolare la home page. Che cos'è un template? 13. 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). sopra la piega. all'inglese. contiene di solito la barra di navigazione e infine il terzo pannello. 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. specie per i siti più semplici. ma sono inutili per il navigatore che esce dal tunnel appena possibile e non si ferma quasi mai  . Quali sono i più comuni sistemi per "impaginare" un documento Web? (le risposte le trovi a pagina 31) 17/88 1 Modello a tre-quattro pannelli. un pannello verticale all'estrema sinistra (modulo 2) che contiene la navigazione vera e propria. e non solo. tuttavia col crescere dei siti e con il fatto che almeno metà dei navigatori non tenta nemmeno di navigare il sito. una pagina d'introduzione animata che cerca di spiegare lo scopo del sito e che prevede.2a lezione  bili. Si tratta del limite inferiore della porzione visibile della pagina prima di eseguire lo scrolling. Dove cade la piega Un altro concetto importante nel progettare una pagina e. Nelle realizzazioni pratiche troviamo perciò modelli a quattro pannelli. prosegue subito sotto con la finestra di ricerca. Quali sono le dieci regole per un buon sistema di navigazione? 9. La parte alta della home page costituisce la porzione più pregiata del sito. ospita il contenuto. 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 secondo pannello. costituito da una verticale a sinistra. 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. messa molto in risalto perché costituisce uno degli elementi di navigazione primari per un portale e finisce con la Directory. I pubblicitari la definiscono. in gergo. secon- do il quale la home page dovrebbe contenere l'80% d'informazioni di navigazione e solo il 20% di contenuto effettivo. Cos'è un marcatore (markup) in cosa si differenzia da un tag? 16. Che cos'è la piega? 14. dunque la parte superiore. Infatti.

con occasionali immagini annegate nei testi medesimi. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte dei portali per la realizzazione della loro home page. l'area per costruire una pagina Web che stia nello spazio disponibile all'interno della finestra del browser. La seconda. Virgilio e Libero (IOL) arrivano a 760 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. bensì salta direttamente su altri siti. Suddividendo i contenuti nelle diverse pagine e regolando le dimensioni dei frame. ad esempio. possiamo produrre un'impaginazione approssimativa. nel caso in cui il sito sia molto ampio e profondo). Il metodo più pratico per realizzare un sito di medie dimensioni è quello di seguire il modello a tre/quattro pannelli per tutte le pagine. ossia canovaccio. I due parametri importanti da conoscere sono larghezza e altezza del canovaccio. nate in origine come strumento per la visualizzazione tabulare di dati e trasformatesi nel principale mezzo d'impaginazione del Web. ma funziona nella gran parte dei browser. ha pagine larghe 735 pixel. L'elemento più vincolate è naturalmente la larghezza. mentre lo scrolling orizzontale. L'alternativa più rozza e impiegata solo nei primissimi tempi del Web. Un altro strumento. compresa la home page. Si comincia dal considerare la risoluzione del video utilizzata dal navigatore.lycos. In gergo ci chiama canvas. Tecniche d'impaginazione Il Web non prevede strumenti per l'impaginazione grafica di elementi sulla pagina. Il codice che ne risulta è abbastanza complesso e richiede una certa esperienza. l'HTML non fornisce marcatori per disporre gli oggetti nella posizione che vogliamo e con le proporzioni desiderate. mediante i quali è possibile posizionare gli elementi sulla pagina indicandone le coordinate. va sicuramente evitato. nel tempo. La larghezza corrisponde al numero di pixel disponibili in orizzontale quando la finestra del browser è aperta completamente sullo schermo (posizione massimo ingrandi- 2 Modello LSD. consisteva nel creare una grande immagine che contenesse informazioni cliccabili che poi rimandavano a pagine interne di testo. In alternativa. scopriamo che l'area massima effettivamente utile per lo sviluppo è di 780 x 433 pixel. dobbiamo assegnare dimensioni in pixel ai vari elementi. Una volta decisa la larghezza complessiva della pagina. a fianco della directory troviamo anche colonne verticali che contengono informazioni. Di solito. si sono sviluppati altri tre strumenti d'impaginazione. sono i fogli di stile (CSS). Nato in origine per visualizzare semplici testi chilometrici. L’altezza è invece il numero di pixel disponibili nella finestra prima della "piega". contiene la finestra per impostare una ricerca per mezzo del motore di ricerca interno al sito/portale. quando le tabelle ancora non esistevano. poiché in lunghezza è sempre possibile eccedere. siamo pronti a costruire la pagina vera e propria. consecutive. Per capire quanto sia effettivamente grande il canovaccio. misurati in pixel. dobbiamo stabilire le dimensioni delle colonne o pannelli che seguono. sicuramente indicato per il futuro.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. Tale spazio varia in funzione del browser. di solito piccola. Una variante rispetto ai CSS . 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. Tecnicamente questo genere di immagini prende il nome di imagemap oppure mappe di immagini e vengono ancora utilizzate in alcuni contesti particolari. La pagina viene divisa in tre fasce orizzontali. 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. benché usato da alcuni siti. ma comportano lentezza nel caricamento (date le dimensioni del file grafico) e complicazione nell'aggiornamento dei contenuti. Una volta impostate tutte queste indicazioni. La terza (directory) ed elenca le principali categorie e sottocategorie d'informazioni o servizi offerti. Se immaginiamo che la media dei navigatori oggi disponga di monitor con almeno 800 x 600 pixel di risoluzione. ricorrendo allo scorrimento verticale della pagina (scrolling). La soluzione elaborata dai progettisti è stata di ricorrere alle tabelle. Vedremo più avanti quali sono i vantaggi e gli svantaggi dei frame. calcolati empiricamente su una finestra di Internet Explorer all'interno di Windows XP con le principali barre di comando attive.2a lezione  per osservare l'animazione del- la splash page. cioè quello contenente il logo. Per una valutazione più dettagliata vi rimandiamo a un articolo sul Web: Sizing Up the Browsers accessibile all'indirizzo Internet: http://hotwired. che sarà anche la larghezza del primo pannello. del sistema operativo e della quantità di pannelli e strumenti accessori che il navigatore mantiene visualizzati. ulteriori elementi di navigazione e bottoni promozionali 18/88 mento). com/webmonkey/99/41/index3a_page2. uno parallelo all'altro. ma funzionale. Impostare gli spazi del "canovaccio" Definita la struttura della pagina. mantenendo i quattro pannelli per tutte le altre. Il più semplice e grossolano prende il nome di frame e consente di suddividere la finestra a video in tante finestre più piccole. Vediamo che i diversi siti standardizzano diverse misure di larghezza: Yahoo Italia. 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. ma ancora poco supportato dai vari browser. La prima contiene il logo del sito e gli eventuali elementi di navigazione globale del sito. tolta l'eventuale barra di scorrimento verticale. bisogna "prendere le mi- sure" prima di cominciare a scrivere il codice HTML vero e proprio. Deriva il suo nome dalle iniziali delle parole inglesi Logo Search Directory. ciascuna contenenti una pagina indipendente.

definirne la natura ed eventualmente l'azione da compiere su di esso. come nel caso di un dizionario. fornire messaggi visivi chiari. Usabilità e accesso I siti moderni. 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. conoscenza perfetta dei linguaggi usati per costruire le pagine (HTML. Un programma che nasconde il codice HTML lasciandoci lavorare direttamente sulla struttura visiva della pagina finale. aggiungendo funzioni per la gestione complessiva del sito e per il controllo di tutti i link. 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. Un esempio tipico è un’organizzazione alfabetica. 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. ossia le voci che compaiono in una categoria non compaiono in nessun'altra. 8. essere idonea per gli scopi del sito. Riflettere più fedelmente possibile il disegno gerarchico pensato per il sito. 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. L’HyperText Markup Language nasce nel 1989 nel laboratorio europeo per la fisica delle particelle (CERN) come strumento per consentire la creazione e distribuzione di documenti ipertestuali. rimanere costante. usando solo caratteri minuscoli per documenti e cartelle. come nel caso di un archivio di articoli di giornale. Troviamo che la pagina che ha una larghezza di 735 pixel sta comodamente nel canovaccio di 800 x 579 pixel. 5. i preferiti.2a lezione 3 Le risposte alle domande di pag. 13. alla lettera) che riconosce i comandi HTML e visualizza di conseguenza il testo che essi racchiudono. mantenendo al massimo quattro livelli di profondità. Il tag (etichetta) indica l'inizio e la fine dell'area di efficacia di un marcatore. usando strumenti di generazione automatica dei tag simili a quelli offerti dagli editor testuali. Progettare la struttura di un sito partendo dai contenuti che si vogliono pubblicare e dal percorso di navigazione che meglio si adatta alla situazione. 16. Nella pratica. Il sistema ambiguo si basa sull'esperienza di navigazione del navigatore tipo e cerca di guidarlo quando non sa esattamente cosa cercare. oppure geografica: i locali di una città. 4 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. apparire contestuale. ossia dinamico. Javascript. oppure cronologica. denominato browser (“sfogliatore”. ipertesto e lineare. La linea ideale che separa la parte visibile della pagina da quella che può essere vista solo attraverso lo scorrimento verticale (scrolling) dei contenuti. Il suo unico obiettivo consiste nella creazione di pagine di documenti visualizzabili via rete sulle macchine più disparate. La prima è quasi sempre presente complementata dalla seconda quando bisogna creare collegamenti diretti tra zone lontane nello stesso sito o verso siti esterni. Il plug-in di Flash viene ormai fornito già in partenza con Internet Explorer di Microsoft ed è abbastanza diffuso nella Rete. 14. per mezzo dell’intermediazione di uno speciale programma. 10. soprattutto quelli realizzati per la Pub. 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. 3. creando una cartella centralizzata per le immagini nel caso si voglia poi passare a un sito dinamico. Chiude l'elenco l'impaginazione grafica realizzata mediante strumenti particolari come Flash. 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. Qualsiasi tag inizia con i simboli "<" oppure "</" e termina con i simboli ">" oppure "/>". 7. È una pagina campione che ci servirà come modello per molte altre pagine di contenuto del sito. Sono programmi per l'inserimento manuale facilitato di codice HTML. Tre: gerarchia. 15. produrre una struttura di pagina HTML che sia leggera. è 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. 9. 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. Il primo suddivide le informazioni in categorie reciprocamente esclusive. Scopriamo di avere 780 x 433 pixel. Essere facile da capire. 6. offrire alternative. cioè documenti di testo liberamente interconnessi tra loro. La struttura lineare è adatta per i corsi on line. Il marcatore è una porzione d'informazione che si aggiunge in testa e in coda a un blocco di testo per determinarne i confini. Un programma che unisce tutte le caratteristiche più avanzate di un editor testuale e di un editor visuale. CSS). In un sito centrato su database. richiedere un’economia di tempo e di azione. 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. . 2. Le tabelle e i frame. i tasti Avanti e Indietro. 12. favorire gli obiettivi e i comportamenti dell’utente. Esatto e ambiguo. fornire un feedback. il tasto home e la visualizzazione dei link già visitati con colore diverso. compatibile con i diversi browser e vicina alle specifiche grafiche previste per il sito. 4. anche se questa appartiene al medesimo sito. Permettono di inserire i marcatori usando icone oppure voci di menu e controllano la sintassi dei marcatori che abbiamo inserito direttamente. utilizzare etichette chiare e comprensibili. DHMTL. Perl CGI. usando nomi mnemonici. Finestra per digitale gli URL (indirizzi). 11.

il volante e i pedali dell'acceleratore. tabella. detentore e promulgatore delle specifiche HTML. almeno parzialmente. cioè documenti di testo liberamente interconnessi tra loro. e con titoli molto vistosi. Il documento vero e proprio. tutt’ora in uso. ma allarga il pubblico potenziale non solo ai portatori di handicap. anche in Italia. ma anche a chi consulta un sito via telefono (attraverso sintetizzatore vocale) oppure dal browser vocale montato sull’autoradio (uno scenario poi non tanto futuribile). qualun- que modello scegliate. della frizione e del freno sono sempre nella stessa posizione. 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. tag che hanno un tag di chiusura facoltativo e che perciò producono un effetto anche se manca il testo corrispondente. non può utilizzare un browser convenzionale. entrambi previsti dai rispettivi tag HTML. Questi ultimi. da tutti i nuovi browser. nell'interpretazione abituale del browser Web (può invece assumere forme diverse in browser di natura diversa.w3c. il nuovo linguaggio di unisce HTML e XML. L'attuale orientamento è infatti quello di riportare l’HTML a funzioni unicamente strutturali. 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. vale a dire spiega la natura di quella particolare porzione di testo: titolo. nella metà degli anni Novanta. ormai supportata. Il suo unico obiettivo consiste nella creazione di pagine di documenti visualizzabili via rete sulle macchine più disparate. sottotitolo. 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. L'unica eccezione sono i tag che non prevedono un marcatore di chiusura e che perciò producono un effetto in ogni caso. può capire di cosa si sta parlando. per vali motivi. L’HTML codifica ogni elemento della pagina mediante un sistema di marcatori. 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. immagine. L’impiego tuttavia di editor dedicati sveltisce il lavoro e riduce gli errori. chi "legge" la pagina attraverso un sistema di sintesi vocale anziché guardarla a video. basta infatti un qualsiasi editor di testo. Il classico esempio di usabilità è l'automobile: quando salite al posto di guida. Nel caso in cui non ci sia alcun testo tra i due tag. Tali marcatori stilistici. I pochi modelli che sono "originali" alla fine vengono usati poco. tuttavia. tag all’inglese. denominato browser (alla lettera “sfogliatore” o "visualizzatore") che riconosce i marcatori HTML e li elabora. il browser ignorerà il tag e non visualizzerà nulla all'interno della pagina. al momento del rilascio della versione più recente del linguaggio. e regole di accessibilità che consentano di capire i con- tenuti anche a chi.org). La gran parte dei tag ha un significato strutturale. sono stati deprecati dal World Wide Web Consortium (www. ai tempi di Netscape 4x e Internet Explorer 4x. è contenuto tra i tag <body> e </body> . del quale mantiene solo le funzioni essenziali per la produzione di documenti di lavoro. L'usabilità si centra in buona sostanza sulla ripetizione di modelli che si sono dimostrati vincenti sul Web e limita l'originalità del sito. adattate al concetto d’ipertesto. con i link di colore blu e sottolineati. Inserendo una nota di commento per ciascuna immagine e un sunto per ogni tabella. collegamento (link) e non dice in che modo visualizzarla. è facile delimitare la porzione di testo a cui il tag si applica. L'intestazione serve per allegare alla pagina informazioni utili per i motori di ricerca e per altri scopi.2. con un marcatore di apertura e uno di chiusura preceduto dalla barra inclinata. come quelli usati sui telefonini abilitati alla navigazione di siti Internet). I primi siti Web si presentavano perciò molto scarni nell’aspetto: semplici elenchi di testo nero su sfondo grigio. la 4. paragrafo.01.2a lezione  blica Amministrazione richie- dono. 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. per mezzo dell’intermediazione di uno speciale programma. Non occorrono particolari programmi per scrivere una pagina HTML. l'osservanza di alcune regole che modificano il modo d'impostare i contenuti sulla pagina e i sistemi d'impaginazione possibili. rende obbligato- Struttura minima della pagina Qui vediamo la sequenza di marcatori indispensabili per costruire una pagina Web. visibile al navigatore. Ciò impone maggiore lavoro su chi produce contenuti. estraendo il testo che essi racchiudono e visualizzandolo in funzione del tipo di marcatore usato. in uno strumento commerciale. Non appena il Web è uscito dal contesto universitario per trasformarsi. La sintassi del linguaggio HTML è semplicissima e si basa su parole inglesi comuni. lasciando ai fogli di stile in cascata (Cascading Style Sheets) il compito di aggiungere stile al testo. Ogni marcatore è contenuto tra il simbolo di minore < e maggiore > senza spazi e si presenta solitamente in coppia. invisibile nella finestra del browser con la sola eccezione del titolo. 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). L’intenzione originale era di lasciare al browser la scelta di L’ 20/88 come comportarsi in funzione delle potenzialità della macchina su cui era installato. Grazie a questo approccio elementare. Costituisce un’edizione ridotta di un linguaggio precedente. molto complesso e già ben conosciuto nel mondo scientifico e informatico: lo Standard Generalized Markup Language. 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 nell’HTML 3. Si tratta di regole di usabilità. Esistono.  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. XHTML. Head contiene l'intestazione del documento. che si pongono all’inizio e in chiusura della porzione di testo che si vuole contrassegnare. poi.

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). a meno che lo abbiate istruito di mantenere esattamente il formato originale. In tal modo.  prosegue (versione integrale dell’articolo sul CD) sul CD n. In generale i ritorni a capo forzati nel codice (l'insieme di istruzioni HTML che compongono la pagina) vanno usati con molta prudenza. ma si dimostrano deleterie quando realizzate per mezzo di un a capo forzato che rimane nella pagina in permanenza. 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 sarà anche più difficilmente decifrabile da parte di terzi. in particolare vanno evitati in mezzo ai tag. anche quelle facoltative. come viene già fatto dagli editor che generano codice in automatico. tuttavia la pagina risulterà più ordinata se cercherete di seguire una regola. 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. A questo riguardo è bene prestare attenzione alle funzioni di "a capo" automatico fornite da alcuni editor. Altri preferiscono scriverli tutti minuscoli così da essere già compatibili con XHTML. Sono necessarie per leggere chiaramente righe di codice molto lunghe senza dover continuamente scorrere la pagina in orizzontale. Se vogliamo mandare a capo una riga sulla pagina dobbiamo usare un tag specifico come <br> oppure <p> (che aggiunge anche una riga bianca). con il tag <pre> (preformatted text) usato solitamente per visualizzare listati di programma o altri testi tecnici. la pagina sarà più leggera e veloce da trasferire. senza l'aggiunta di ritorni a capo fisici nel documento. una volta completato il lavoro. Accertatevi che il programma esegua il "soft wrap". quando notate un comportamento strano negli allineamenti. ma aggiunge peso inutile alla pagina finale. Un'altra particolarità importante è che HTML riconosce un singolo spazio. ma aggiungono caratteri e peso alla stessa. Per tale motivo. perciò tanto vale abituarsi fin d'ora a chiudere regolarmente tutti i tag che possono essere chiusi. provate a rimuovere i ritorni a capo in mezzo a quella porzione di codice. I tag HMTL possono essere scritti con lettere maiuscole o minuscole indifferentemente. 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ò se utilizzate diversi spazi vuoti in sequenza per separare tra loro le parole o per far rientrare una riga rispetto al margine sinistro. 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. il consiglio è di andare a capo solo quando si vogliono effettivamente separare i paragrafi. diversi editor HTML consentono di eseguire un'ottimizzazione rimuovendo tutti gli spazi e i ritorni a capo superflui. È possibile nidificare diversi tag al fine di creare un effetto cumulato.2a lezione ria la chiusura di tutte le coppie di tag. il browser visualizzerà sempre e comunque uno spazio solo. 66 . cioè si sconsiglia fortemente di andare a capo lasciando metà degli attributi associati marcatore su una riga e metà sulla successiva. Anche nel caso del testo. Molto rischiosa l'interruzione di tag che contengono link ipertestuali ed elementi di tabella. Perciò. che distingue tra maiuscole e minuscole. 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. cioè il ritorno a capo dinamico delle righe ripiegandole a capo solo a video.

il libro è assimilabile anche da un principiante. ricco di esempi visivi e con informazioni di qualità.00 euro. bensì un manuale operativo. Panoramica delle tecniche per la produzione di qualsiasi componente di sito. 192 pagine. Jackson Libri. Lettura interessante per allargare il proprio punto di vista.31 euro. Affronta in dettaglio quel che un Webmaster dovrebbe sapere per rapportarsi con fornitori esterni. Hops. 33. 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. 236 pagine. E E .31 euro.50 euro. Prontuario generale per chi non ha tempo di leggere altro. con svariati esempi e consigli validi per Mac e per Windows. Hops. Fornisce una preziosa base per la transizione da HTML 4 a XHTML.05 euro. 338 pagine. audio e video. sia in termini generali. Apogeo.2a lezione 4 Per chi vuole approfondire: i libri consigliati INDISPENSABIL E Usabilità e progetto grafico si fondono in questo libro di gradevole lettura. che codifica i principi concreti da osservare nella progettazione di una pagina e degli elementi di navigazione di un sito. Semplice nel linguaggio e limitato agli attibuti fondamentali dei due linguaggi. McGraw-Hill. Richiede alcune basi di programmazione. ottimo per chi comincia grazie anche alle lezioni contenute su CD.59 euro. 30. Copre tutte le funzioni di uso comune del programma. si dimostrerà rivelatorio per molti. 16. INDISPENSABIL Corso interattivo sulle basi del linguaggio HTML e di CSS (fogli di stile). Ricco di esempi. E E Padroneggiare lo sviluppo avanzato di un sito che sia conforme ai nuovi standard XHMTL. dalle pagine HTML. 8. Strutturato con una grafica facilmente leggibile. 36. 22/88 Ottimo riferimento professionale. pur non essendo elementare. 823 pagine. Una lettura indispensabile per il Webmaster che voglia costruire siti duraturi nel tempo. 682 pagine. 25. ai contenuti multimediali. 264 pagine. 170 pagine. Strumento indispensabile per un Webmaster professionista.00 euro. Apogeo. Non è una “reference”. sia nel dettaglio del singolo tag.80 euro. Unico manuale oggi disponibile in italiano sulla nuova versione di GoLive (integrata nel CD di questo numero). Nonostante il titolo questo è un volume ricco d’informazioni utili e consigli che possono servire anche al professionista. Da conoscere prima di affrontare la progettazione di un nuovo sito o prima di eseguire il restyling di uno esistente. MCGraw-Hill. Guida intermedia per imparare lo sviluppo manuale di pagine HTML e l’uso appropriato dei tag più importanti.50 euro. Hops. Apogeo. 299 pagine. 50. 33. INDISPENSABIL Approccio inedito all’usabilità condotto da uno specialista italiano che riporta i concetti generali di questa nuova disciplina alle peculiarità del nostro Paese. 392 pagine. 25. Riferimento autorevole sui temi della navigabilità di un sito e delle regole che sottendono qualsiasi sistema di navigazione. 404 pagine. McGraw-Hill.26 euro.53 euro. 18. perciò non è alla portata del neofita. Apogeo. 18. Jackson Libri. Utili le sezioni sui CSS (fogli di stile) e JavaScript. INDISPENSABIL Bibbia dello sviluppatore per imparare l’uso di JavaScript all’interno di pagine dinamiche. 40.61 euro. 499 pagine. 334 pagine.

il che complica un poco i collegamenti ipertestuali. l’unica forma di pagina possibile sarebbe un testo chilometrico. arriva alla fine a produrre l’impianto desiderato. indica la posizione di un’immagine e le relative dimensioni. descrive un link esterno. Particolarità dei frame I frame sono invece più facili da realizzare e offrono un controllo molto più rigoroso degli spazi. si vuole un’impaginazione più raffinata. ma non è indispensabile. più avanti. Si dice tecnicamente che ogni elemento è inline. perché compatibili con tutti i browser e prive di controindicazioni in materia di usabilità e di estetica. ci serve una struttura capace di contenerlo. Fig. carattere per carattere. Il browser costruisce la pagina leggendo in sequenza ciascuna riga. però. immagini e testo. 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. In realtà esiste anche la possibilità di collocare gli elementi mediante le funzioni di posizionamento dei fogli di stile in cascata. come abbiamo detto. come ad esempio la struttura a quattro pannelli che abbiamo visto nei modelli d’impostazione della pagina. Talvolta questo può anche essere sufficiente. Se le configuriamo senza bordo. anche nel definire le istruzioni di navigazione nel sito. 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 l’uso. Se ci affidiamo agli strumenti base del linguaggio. 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. ossia per collocarli in una determinata posizione nella 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. Gli unici svantaggi delle tabelle sono il non garantire l’assoluta stabilità delle dimensioni e delle proporzioni tra i componenti e la difficoltà d’implementazione. 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. frame e form. Combinando i comandi e i contenuti che trova lungo il percorso. Nella maggior parte dei casi. con tre o quattro pagine contemporaneamente presenti a video. Hanno il tipico formato di un formulario da compilare. Il più diffuso e versatile dei tre sistemi sono le tabelle. ben poco amichevole per il navigatore comune. quelle utilizzate per raccogliere informazioni dal navigatore. Poiché nasce per visualizzare testo che fluisce in continuo. frame e form a costruzione di una pagina HTML equivale alla battitura di un testo con una telescrivente. 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. Form per la registrazione Fig. CSS. Tuttavia presenta- 2 no importanti svantaggi di usabilità e di estetica. Infatti. 2 Tabella evidenziata. Le scelte possibili sono tre: tabella. come nei primi siti universitari e amatoriali che si sono visti sul Web. occasionalmente interrotto da un’immagine o da un link verso altri documenti. ciascuno contenente una pagina Web indipendente. Ogni cosa che si trova nella pagina è di fatto un carattere di testo che esprime un comando. Dividono la finestra in diversi riquadri. dobbiamo sempre indicare in quale pannello inserire la pagina a cui il link è indirizzato. prima ancora di cominciare a inserire il contenuto. quando affronteremo il tema dei fogli di stile. ciascuna con elementi propri. Inoltre.2a lezione 5 Strutturare i contenuti nella pagina: tabelle. 1 Esempio di un'impaginazione tabellare. con una serie di caselle accompagnate dalle relative etichette esplicative. Sono compatibili con ogni genere di browser possono essere a loro volta incapsulati all’interno di tabelle o frame. indica un testo da visualizzare. 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. In tal caso. all’interno L 1 di riquadri o colonne che abbiano proporzioni ben definite rispetto al resto. più eventuali menu a tendina da cui scegliere voci già reimpostate oppure caselle da barrare per operare scelte immediate. stabilisce la posizione dei diversi elementi. Qui vediamo evidenziato in modo grossolano alcune delle tabelle che compongono la pagina. le tabelle diventano una specie di griglia invisibile che tiene al loro posto i vari elementi della pagina. perciò diventa impossibile far funzionare i tasti di navigazione in avanti e all’indietro del browser. ma queste ultime non sono supportate da tutti i browser e ne parleremo. che divida la pagina in aree ben distinte. delimitano l’inizio e la fine del documento vero e proprio. 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.  . HTML non prevede alcuna funzione per “impaginare” gli elementi.

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). .80 euro per l'upgrade 24/88 Identikit Caratteristiche Produttore e sito: Adobe . ma qui possiamo anche estendere il bordo superiore e accedere a tutti gli altri elementi dell’intestazione (head). è possibile inserire. Questa particolare modalità progettuale. si trasforma poi automaticamente in tabella. InDesign 2. ora è anche possibile aprire una finestra di esplorazione del codice immediatamente sotto alla finestra di Layout così da vedere in che  Adobe GoLive 6. Dreamweaver MX. Dreamweaver. con particolare enfasi sui linguaggi di scripting e sullo sviluppo di applicazioni. il sito e le funzioni avanzate. La prima categoria di oggetti è la più comune e contiene la pagina con tutti i relativi componenti: tabelle. In basso alla finestra. Ottime le funzioni di gestione integrata del sito. moduli. d'integrazione la carta stampata e di gestione di gruppi di lavoro. .Il codice generato con gli strumenti grafici richiede occasionalmente verifica manuale.Vista contemporanea sul codice generato e sulla disposizione degli elementi sulla pagina. Illustrator 10. 2000 con Service Pack 2. il codice sorgente (HTML o di altro tipo). .È compatibile con gli standard più recenti  Contro . Il Errata: segnaliamo un'imprecisione nella prova di Dreamweaver MX pubblicata lo scorso numero: il prezzo del prodotto Macromedia è 574. Dreamweaver MX. aggiungendo anche funzioni per la produzione di contenuti multimediali e mobili.www. sia con l’aggiunta di funzioni per il coordinamento del lavoro di gruppo che sono invece assenti dalla piattaforma Macromedia. infatti GoLive 6. è migliorato drasticamente sia con l’aggiunta di una doppia vista che abbina in contemporanea codice e struttura grafica. .Eccezionale gestione delle tabelle . È un prodotto complesso con un'interfaccia singolare e richiede un certo impegno per poterne sfruttare a fondo le caratteristiche. Lavorando con il mouse e i menu.adobe. e Macromedia Studio MX che si rivolge invece a un ambiente puramente Web e che coordina la generazione di siti statici e dinamici. Idoneo per chi viene dal mondo della grafica tradizionale e vuole creare siti oppure travasare lavoro editoriale sul Web senza traumi. Al momento esistono due suite che si contendono il mercato dei creativi che cercano un ambiente editoriale completamente integrato: Adobe Creative Suite. È possibile agire su una qualsiasi delle due. l’antagonista di sempre.0 si colloca come il secondo ambiente di sviluppo integrato per l'impiego professionale sul Web.50 euro. non è presente in nessun altro editor HTML e viene fornita dal concorrente principale. Adobe Creative Suite Premium. 146. solo grazie all’impiego di un prodotto complementare esterno. che assomiglia alla “gabbia“ d’impaginazione di una pagina su carta. testo e immagini. collocando tutti gli elementi al posto giusto. abbiamo l’indicazione della larghezza in pixel della pagina su cui stiamo lavorando. Rispetto alla versione precedente.Viste inedite sulla gerarchia del sito e sulla struttura della pagina.0 oggi può importare livelli di Photoshop. compreso Macintosh.Ottima palestra formativa. Adobe consolida una soluzione che è particolarmente mirata all’integrazione tra editoria su carta stampata ed editoria sul Web. . Mantenuta infine l’integrazione con InDesign. illustrazioni vettoriali di Illustrator e animazioni di LiveMotion 2. Fireworks MX. .20 per l’upgrade da una versione precedente. grazie all'integrazione con LiveMotion.0 Prezzo: 2158. come ad esempio i fogli di stile.0 maestro di tabelle on la nuova versione del suo celebre ambiente di sviluppo integrato. come in Dreamwaver.com Requisiti: Windows 98SE. spostare e ridimensionare qualsiasi elemento. XP.0. più orientata al mondo dei creativi tradizionali che hanno bisogno di un efficiente sbocco sul Web.5 e Acrobat Distiller 5.Complesso da imparare. il pacchetto di videompaginazione per l’editoria tradizionale che consente un efficace passaggio dei contenuti dalla carta al Web e viceversa. per la funzione Web Workgroup Server è richiesto Windows 2000 o XP Costo licenza: 589. in confronto. offre funzioni più evolute di gestione delle tabelle. 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.Richiede un computer abbastanza potente. Le tecniche di lavoro sono due: inserire gli oggetti attingendo dalla palette dedicata.80 euro IVA compresa programma identifica quattro categorie di elementi e fornisce strumenti ad hoc per ciascuna. cancellare. La sua lavorazione è imperniata su una finestra di Layout che ne mostra una versione grafica modificabile. e 286.È disponibile su diversi sistemi operativi.0. . Migliorata drasticamente anche l’integrazione con gli altri prodotti Adobe che vanno a comporre la Creative Suite. Il quadro competitivo rispetto a Dreamweaver. . senza dover scorrere il listato HTML come invece accade in altri editor. Le categorie sono la pagina nel suo complesso. oppure costruire una griglia visiva su cui poi collocare dei segnaposto per gli oggetti.Unisce efficacemente il lavoro di creatività e di produzione tecnica. molto vicina al sistema di lavoro di un progettista grafico. cioè da visualizzare su telefonino e PDA in alternativa al computer.2a lezione 6 Adobe GoLive 6.Offre ricchi strumenti per la gestione di un intero sito. La griglia. . Premiere 6.80 euro. ME. che include anche Photoshop 7. C 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 sull’intero sito. appare più orientato allo sviluppatore di siti che centra gran parte della propria attività sulla produzione di codice e sull'integrazione con database. Forti anche le funzioni di gestione di contenuti multimediali.0. osservando il risultato immediato a video.  Pro .Finestra di codifica diretta più debole rispetto ad altri editor . Rispetto al suo concorrente diretto. osservando subito i cambiamenti riportati nell’altra. 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.

2a lezione modo le variazioni apportate graficamente si traducono in istruzioni HTML e. su uno schema grafico che visualizza tutti i possibili elementi. consentendo di modificare direttamente gli attributi di ciascuno e di correggere eventuali errori. con completamento automatico degli elementi mancanti e con importazione diretta di qualsiasi gene- 2 re d'informazioni tabellari. Operare direttamente sul codice Esiste anche. Preziosa per l'analisi delle tabelle e delle altre forme complesse di HTML. denominata Workgroup Server. perciò GoLive è l'unico ambiente di sviluppo sul mercato che consenta una gestione efficaprosegue ce di un team. compare un editor strutturale che mostra le relazioni gerarchiche tra i vari elementi della pagina oppure tra i riquadri di un frame. il programma genera automaticamente tutte le pagine e gli oggetti corrispondenti. alla pari di Dreamweaver. Una prerogativa unica di GoLive è tuttavia quella di disegnare il sito da zero. Superlativa invece la gestione delle tabelle. Utilizzando una tecnologia residente su server. Alla pari di altri ambienti. Rispetto a Dreamweaver sentiamo la mancanza di una finestra grafica d'impostazione dei parametri di ciascun tag. poi.  sul CD (versione integrale n. Questa vista rimane comunque meno potente della corrispondente vista Codice di Dreamweaver MX. viceversa. Una finestrella ridimensionabile che si apre sopra la vista Layout e mostra la porzione di codice che corrisponde all'area selezionata. il codice eseguibile su server. GoLive fornisce altre due viste particolari dedicate esplicitamente all’analisi dei frame (riquadri) e della struttura del documento (in particolare le tabelle). che cosa colorare: i marcatori distinti dai relativi attributi e distinti dal testo. Un esempio in questo senso è fornito dall'esercizio presente sul CD Guida. 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. è totalmente gratuita e integrata nel programma base. Si chiama finestra Origine e prevede la colorazione dinamica degli ele- 1 menti di programma distintamente dai tag HTML e dal testo. creare template modello per tutte le pagine. GoLive tiene traccia di chi sta lavorando sul documento in un certo istante e di tutte le versioni realizzate. per vedere come una modifica manuale dei tag si ripercuota sulla finestra di Layout che funziona come una sorta di anteprima immediata e modificabile. Lo schema può essere stampato ed esportato per sottoporlo all'approvazione del committente oppure semplicemente per tenere una documentazione delle varie fasi. 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. In pratica. gli elementi nel loro insieme (cioè tag. direttamente nelle altre finestre. Il lavoro di gruppo Un'altra area di netta differenziazione rispetto a Dreamweaver è la gestione coordinata del lavoro di gruppo. dove le molteplici righe di codice oscurano il disegno strutturale che sta dietro alla pagina. 3 La vista struttura mostra un'analisi strutturale del documento in termini di gerarchie tra i vari marcatori. La funzione. mediante icone. Questa visualizzazione doppia e contemporanea emula una prerogativa che finora è stata unica di Dreamweaver. 1 Anche Adobe GoLive 6. consente di tenere sotto controllo tutti gli elementi del sito. invece di dover aprire una finestra esterna allo scopo come accade in Dreamweaver. spesso difficili da notare nella vista Origine. In tal modo. quasi del tutto automatizzata. La progettazione del sito Questo è un dei punti di forza di GoLive che. ispezionare graficamente link e gerarchie e modificare qualsiasi elemento nel sito con un doppio clic. In questo modo è possibile eseguire analisi selettive delle diverse componenti della pagina e intervenire di conseguenza. Fig. 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. naturalmente. versate automaticamente in una tabella con il numero giusto di righe e di celle. si evitano variazioni conflittuali e si può procedere allo sviluppo parallelo dello stesso sito da parte di un team di professionisti. Funzioni speciali del programma Unico nel suo genere. più attributi più testo contenuto all’interno del tag). la finestra per l’editing testuale a tutto schermo. Una volta che lo schema è completo. e il completamento automatico dei tag in fase di digitazione diretta. Qui. 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 l’aggiunta di a capo permanenti. i soli collegamenti. Un ottimo sistema per imparare l'uso di HTML e per manipolare con efficacia documenti complessi. alla pari di Dreamweaver. a differenza di altri programmi abbiamo la possibilità di scegliere al volo. sensibile alla posizione del cursore. Nella manipolazione delle tabelle GoLive non è secondo a nessuno. Fig. tenendo traccia dei link previsti che saranno aggiunti a mano a mano che inseriamo contenuti nelle pagine così create. L’inserimento di qualsiasi elemento HTML è affidato alla stessa palette di oggetti che abbiamo visto nella finestra Layout e anche qui possiamo usare il selettore di colori per qualsiasi elemento colorabile della pagina. Un altro modo unico di GoLive per visualizzare il codice sorgente a fianco della finestra Layout consiste nella palette del Codice Sorgente. non trova paragoni in nessun altro programma per la creazione di pagine Web 25/88 . 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. 66 dell’articolo sul CD) 3 Fig. La differenza tra i due è che Adobe GoLive non visualizza nella finestra Layout l’effetto prodotto dagli eventuali fogli di stile.0. La finestra Inspector perde invece di utilità. ma dispone in compenso di una finestra di Anteprima interna al programma che visualizza immediatamente la pagina nella sua struttura finale. Le modifiche apportate nell’editor di struttura di tabelle o frame si mostrano.

le tabelle costituiscono il più diffuso sistema di "impaginazio- C ne" per le pagina Web.01 e CSS Lezione 5 . che suddivide lo spazio della pagina in contenitori ben definiti in cui riversare testo e immagini.maggio 2003: Contenuti aggiuntivi sul CD Interazione sul server • Dimensionare tabelle e celle fluide. struttura lineare • Strumenti di navigazione • Sistemi di navigazione • Sistemi di labeling Lezione 2: Siti statici e linguaggio HTML • Progettare un sito statico • Progettare la pagina • Pagine HTML e marcatori • Strutturare i contenuti della pagina 26/88 • Versioni integrali e complete degli articoli pubblicati sulla rivista • Spiegazione dei tag HTML per una pagina vergine • Esercizi su come creare una pagina vergine e su come progettare un sito dimensionare tabelle con celle miste. per poi cominciare con la riga successiva. Lezione 8 . Funzionano come una griglia invisibile. 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 . Come qualsiasi altro elemento HTML.giugno 2003: Promuovere il sito . 67 • Le figure professionali che affiancano il Webmaster • Le risorse on line • Tecniche di progettazione del sito Aggiunte inedite alla prima lezione disponibili solo sul CD di questo numero: • Organizzazione delle informazioni • Costruzione della mappa – gerarchia. ipertesto. le tabelle cambiano il proprio funzionamento a seconda della versione di browser utilizzato e del modo in cui il codice originale è stato scritto. poi. anche le tabelle operano nella logica della "telescrivente".aprile 2003: Siti interattivi Lezione 7 . Inoltre. allineamento spontaneo delle tabelle consecutive • Template con struttura complessa: come creare tabelle complesse • Template con tabelle nidificate: tabelle nidificate in cascata. È 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- IL CALENDARIO DELLE LEZIONI Lezione 1: • Adobe GoLive 6. Il professionista perciò inizia il proprio lavoro su una pagina vergine proprio dalla progettazione della tabella e prosegue. come qualsiasi altro elemento HTML. in ragione della sua complessità. Codifiche teoricamente equivalenti e sintatticamente corrette possono produrre risultati visibilmente diversi. ossia vengono lette dal browser un carattere alla volta. complesse e consecutive • Esercizi: esplorare i tag delle tabelle. che consiste nel rappresentare informazioni tabulari.febbraio 2003: HTML 4.0 Competenze e strumenti Contenuti aggiuntivi sul CD (disponibile integralmente sul CD) il corso è • Che cosa fa un Webmaster sul CD • Gli strumenti di lavoro n. un tema che non viene mai affrontato per primo nei testi e nei corsi su questo linguaggio.3a lezione  A scuola con PC Open Progetto Web Master di Roberto Mazzoni 1 La tabella come elemento strutturale ominciamo la nostra esplorazione in dettaglio del linguaggio HTML dalle tabelle. ma che a nostro avviso è necessario invece conoscere da subito al fine di progettare pagine funzionali. dall'inizio dalla fine della riga. per scombinare l'intera pagina e renderla incomprensibile al suo stesso progettista. con il riversamento dei contenuti e l'aggiunta degli elementi stilistici. Basta un tag sbagliato oppure mancante.marzo 2003: Design e multimedialità Lezione 6 . Oltre alla loro funzione primaria. 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.

ma che potrebbe anche essere diverso dall'intendimento originale del progettista. danno l’impressione di formare colonne verticali. ho iniziato a impratichirmi con questo ambiente di sviluppo”. poi la tentazione di apparire “sulla rivista di informatica preferita” ha la meglio. Solo alla fine dell'ultima cella dell'ultima riga il browser sa esattamente come sia composta la tabella . Javascript. crea più problemi quando si devono utilizzare periferiche. crea l'impressione di un'unità verticale. “Linux è indubbiamente un sistema difficile da usare.e noi lo acciuffiamo subito: “che ne dici di fare quattro chiacchiere con noi per raccontarci la tua esperienza?”. gira sia sotto Windows sia sotto Linux e ha un buon supporto per la programmazione: credo che potrebbe essere piuttosto richiesta dal mercato”. si capisce da quello che dice che il suo cuore batte per il Pinguino. la cella si allargherà automaticamente in modo da contenere l'immagine inserita e farà allargare tutte le celle che corrispondono alla stessa colonna. ma indubbiamente la filosofia che sta dietro il sistema ha un grande fascino e poi c’è il vantaggio che è gratuito”. quest'ultima si allargherà per adattarsi (qualsiasi cosa definito a livello di cella ha sempre la precedenza su tutto il resto).  Un futuro ingegnere col Pinguino nel cuore Ventisei anni. Qui Marco prende dimestichezza e approfondisce gli argomenti che si ritrovano anche nel programma del nostro corso: HTML. Nel caso in cui tale somma superasse la larghezza specificata in origine per la tabella. è capitata l’occasione e ho deciso di frequentare un corso promosso dalla Regione e dalla Comunità europea per Progettista di applicazioni multimediali”. 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. le tabelle HTML sono semplicemente sequenze di righe e di celle all’interno di tali righe. 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. combinando diverse celle appartenenti a righe consecutive. combinandosi con quelle di pari posizione nella riga precedente e nella riga successiva. volta per volta. finchè decide di gettarsi nella mischia. HTML costruisce le tabelle secondo una sequenza lineare. se tuttavia anche queste contenessero un'immagine. anche se avessimo esplicitamente indicato larghezze inferiori per le altre celle di quella colonna. romano. La più grande delle celle di una colonna determina la larghezza di tutte le altre di quella colonna. Il corso termina con uno stage di cento ore presso una giovane azienda che sviluppa siti Internet. Di solito viene inserita nell'ultima riga della tabella. 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. 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. questa sarà ripartita tra le diverse celle. 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. 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. Non esiste modo per 27/88 definire la larghezza della riga in quanto tale. fondamenti di programmazione e ASP. programmi per il futuro? “Non ho particolari progetti” risponde Marco “Spero di avere l’opportunità di approfondire il settore di cui mi sto occupando adesso: seguire lo sviluppo delle tecnologie per il commercio elettronico. non è intuitivo come l’ambiente Windows. partecipa alla vita della community da spettatore per un po’. Marco è iscritto alla facoltà di Ingegneria Informatica dell’università capitolina La Sapienza ma gli studi vivono una fase di stallo “L’università stava andando un po’ per le lunghe.. 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. che mi sembra abbia grosse potenzialità: è abbastanza portabile. quindi ho iniziato a pensare cosa sarebbe stato meglio fare e a guardarmi un po’ in giro. i driver non sono sempre facili da trovare. Dreamweaver e Flash. Lo stesso trucco può essere ripetuto su più celle fino a bloccare l'intera tabella. in parti più o meno uguali e sarà quindi modificata dal contenuto inserito (immagine o testo). che in realtà non esistono. così da condizionare tutte le altre celle presenti nella stessa colonna. “All’inizio mi sono occupato principalmente dello sviluppo in HTML. Il browser intraprende alcune azioni autonome per aggiustare e modificare l'aspetto originale delle celle in modo da creare un risultato ritenuto migliore. Nel caso in cui abbiamo indicato unicamente la larghezza della tabella. che per il resto rimane vuota. All’inizio una certa ritrosia. come consigliato da alcuni. Marco Leli appare un giorno nella nostra community per fornire il suo commento al nostro corso per diventare Webmaster. l'intera tabella deborderebbe oltre i limiti consentiti. Nella pratica è sufficiente indicare la larghezza di una sola cella della colonna affinché tutte le altre si adattino di conseguenza. 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. Sogni nel cassetto. E secondo Marco. ma poi dall’azienda mi veniva richiesta la conoscenza di PHP/Mysql. Se inseriamo nella cella un'immagine che ne supera le dimensioni. che hanno righe e colonne ben identificate e regolabili singolarmente.. quella più utile alle esigenze. magari riprendere l’università e intanto prendermi la laurea di primo Daniela Dirceo livello”. su cosa vale la pena di investire? “Approfondire la tecnologia Flash. incomprimibile per definizione.3a lezione ga dal progettista per eliminare gli "errori" introdotti dal programma. 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. A differenza delle tabelle costruite da un foglio elettronico o da un wordprocessor. E anche se Marco consiglia di non affezionarsi mai a nessuna tecnologia e di usare. Lettore “affezionato” di PC Open (ci segue dal 1999). Grazie al loro aiuto (e pazienza) e un po’ di applicazione. L'allargamento porterà pressione sulle celle circostanti riducendone le dimensioni originali.

Fase 4: aggiungiamo un'immagine larga 179 pixel e alta 56 pixel nella terza cella della seconda riga. La flessibilità delle tabelle. può trasformarsi in un pregio progettuale portando a quello che viene definito progetto "fluido" o "liquido". usandole solo dove necessario ed evitando. La loro somma ci dà 390 pixel. 150 e 120 pixel. 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. in aggiunta alle indicazioni di larghezza della tabella. 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. e per la spaziatura tra le celle. il browser cerca di ripartire equamente lo spazio assegnato alla tabella nelle varie colonne. La presenza di elementi grafici in una cella ne blocca le dimensioni impedendone la compressione. Basta impostare la larghezza di una sola cella per modificare l'intera colonna a cui appartiene. Fase 3: forziamo la dimensione della prima cella della prima riga indicando. Adesso la ripartizione degli spazi. ma in modo diverso. Regola: in mancanza di contenuto e d'indicazioni per le singole celle. 61 e 183 pixel (179 dell'immagine più i quattro di contorno). però insufficienti a mantenere le dimensioni originali della tabella che deborda oltre il limite imposto di 400 pixel portandoci alla una situazione: 43. se conosciuta e governata. ma è sicuramente utile in alcune circostanze. per un totale di 8 pixel. La regola generale è comunque di mantenere più semplici possibili le tabelle strutturali. 183 e 183 pixel. Fase 1: la tabella è completamente vuota e lo spazio viene ripartito equamente tra le tre celle che diventano ciascuna di 130 pixel. si restringe al punto di mandare il testo a capo e determinare in tal modo una maggiore altezza per tutta la prima riga. attuata automaticamente dal browser è di 120. . La cella e la relativa colonna si allargano indipendentemente dal contenuto e costringono le altre due celle a restringersi. La seconda colonna si è allargata a spese delle altre due. Le altre due colonne si restringono. ma per la quale non abbiamo indicato nessuna larghezza minima. e riportata quattro volte per spaziare 3 celle. 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. La prima colonna. per la quale avevamo specificato una larghezza obbligata di 200 pixel si riduce a 146 pixel. La tabella mantiene comunque le sue dimensioni originali e la ripartizione degli spazi adesso è: 146. che si moltiplicano al crescere del numero di tag utiliz zati. Queste però si restringono diversamente in funzione del testo contenuto. 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. a livello di cella singola. 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. che in origine era la più larga avendo anche il testo più lungo. larga 2 pixel di default. La presenza di un'immagine determina in modo immutabile la dimensione della cella. largo 1 pixel di default e calcolato su entrambi i lati. Fase 2: inseriamo il testo e notiamo come questo influenza la distribuzione naturale degli spazi. gli altri 10 pixel che mancano per arrivare a 400 sono utilizzati per il bordo della tabella. una larghezza di 200 pixel (a cui si aggiungono i 4 pixel del bordo destro e sinistro all'esterno). senza contare le possibilità di errore. di nidificarne. vale a dire una struttura della pagina capace di adattarsi alla risoluzione del monitor su cui è visualizzata. 104 e 82 pixel.3a lezione  Questo genere di artificio (definito shim inglese cioè zeppa oppure immagine spaziatrice in italiano) è tutt'ora in uso. Regola: un’immagine grafica ha sempre priorità rispetto al testo e rispetto a qualsiasi impostazione di larghezza definita per le singole celle o per la tabella nel suo complesso. La situazione finale è la seguente: 204. ossia di innestare una tabella den- tro l'altra. della riga e della colonna a cui questa appartiene. se possibile. La tabella mantiene le sue dimensioni originali. 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. 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. L'uso delle immagini spaziatrici è considerato peccato grave dai puristi. Regola: il testo inserito nelle celle ne influenza la dimensione originale a meno di aver indicato una larghezza fissa per la singola cella. mentre la 28/88 seconda colonna. 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).

In tal modo. 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. in particolare. Infatti. Qualunque sia la soluzione adottata. Poiché il primo approc- U 29/88 cio è comunque sempre più diffuso grazie al diffondersi dei siti dinamici. che consiste nel lasciare la pagina libera da una struttura generale e incapsularne solo alcune parti. Quali sono le principali regole da osservare nella progettazione di una tabella di layout? 9. i primi elementi di una pagina lunga e complessa appariranno immediatamente. 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. una parte della tabella diventerebbe invisibile. i principali browser moderni dispongono di una funzione che riduce il ritardo di visualizzazione e che si chiama "rendering progressivo". Perciò. 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. 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. Che rapporti di priorità esistono tra le indicazioni fornite a livello di tabella e a livello di singola cella? 6. si otterranno risultati variabili al cambiare dei contenuti forniti. Il secondo approccio. così da riempire la finestra video che il navigatore sta osservando e dando l’idea che la pagina sia disponibile per intero. 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. è preferito dai puristi perché consente di mantenere le pagine più leggere e più semplici. Inoltre. 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. Perché le tabelle sono diventate lo strumento principale per definire il layout delle pagine Web? 2. mantengono il proprio assetto qualsiasi sia la dimensione della finestra del browser. HTML consente infatti di specificare la larghezza della tabella e delle Tabella statica e dinamica: le tabelle a larghezza fissa. statico o misto La seconda scelta importante è decidere se la struttura della nostra tabella avrà dimensioni fisse oppure variabili. In che modo una tabella viene letta e costruita dal browser? 3. Che cos'è il layout fluido o liquido? 7. Fluido. In realtà. 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. Nel caso invece di valori percentuali. 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. la tabella si allargherà o si stringerà (compatibilmente con i contenuti) al variare della dimensione della finestra di navigazione. 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. 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. nel caso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie. Tipicamente lo si fa creando una prima tabella orizzontale larga nidificata nella tabella primaria e larga quanto l’intera pagina che contenga la barra del logo e i primi elementi di navigazione del sito. Viceversa le tabelle a dimensione variabile. Il programma comincia a visualizzare i primi elementi della tabella prima di averla caricata per intero. vale comunque il criterio di ridurre le tabelle al minimo e. È anche possibile adottare una soluzione mista dove solo alcune colonne abbiano una dimensione Test: leggi le domande e verifica le tue risposte Riepilogo dei concetti della Lezione 3 ? 1. 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. 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. Sezionando la pagina in tabelle autonome.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. Che cos'è una tabella nidificata? 8. espressa in percentuale. Che cos'è in rendering progressivo? (risposte a pagina 34) . Quali sono i tag principali di una tabella? 5. La prima è decidere se incapsulare l'intera pagina in una grande tabella che poi ne conterrà altre. Che differenza esiste tra le tabelle HTML e quelle convenzionali? 4. Dopo di che si prosegue a scendere con una serie di tabelle che si compongano da sinistra a destra e dall’alto verso il basso. Che cosa differenzia una tabella di contenuto da una tabella di layout? 10. indicata in pixel. 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.

una tabella non chiusa propriamente con il tag finale </table> può scombinare la pagina al punto da renderla irriconoscibile. 3.non breaking space. una tabella si apre e si chiude sempre con i tag <table> e </table> all’interno 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>. Una tabella costruita all'interno della cella di un'altra tabella. 7. La larghezza delle celle non deve essere necessariamente uguale. mentre la colonna di testo e la barra orizzontale contenente il logo e la navigazione globale sono flessibili. Solo al termine della lettura dell'intera tabella il browser sa effettivamente com'è fatta e come debba essere riprodotta. Le celle vuote non vengono visualizzate da alcuni browser perciò ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbe almeno contenere uno spazio fisso . invece.  Pagine ad assetto variabile: vediamo un esempio reale di pagina costruita integralmente con un layout fluido. ad esempio. 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. è consentito usare speciali comandi per estendere una cella su più colonne in orizzontale o su più righe in verti- 30/88 cale. tutti gli elementi rimangono visibili. ma il numero di celle deve essere costante riga per riga altrimenti sarà impossibile costruire le colonne. 9. Consentono di controllare gli spazi nella pagina senza alterarne l'aspetto estetico. a fronte di una certa complessità di realizzazione. Tag fondamentali di una tabella Qualunque sia l'impostazione progettuale. Possono nascere problemi anche dalla mancata chiusura dei tag interni di riga o di cella. ma si tratta di soluzione usata di rado per le tabelle di layout e sconsigliata anche per le tabelle di dati. Se per errore il numero di celle presente in una riga non corrispondesse alle altre. carattere per carattere. disposte in sequenza. Un layout fisso o statico usa invece tabelle con larghezza in pixel. Le indicazioni fornite a livello di cella hanno sempre la priorità su quanto definito a livello globale di tabella. che naturalmente ha dimensione fissa e scompare parzialmente quando la finestra viene ridotta alla posizione 3 Le risposte alle domande di pag. 6. 8. la 2 è larga 735 pixel e la 3 è larga 502 pixel. 4. ossia il simbolo &nbps. 33 1.005 pixel (mintor da 1024 x 768 pixel). Evitare una complessità eccessiva e. Sono compatibili con qualsiasi tipo di browser e offrono la massima flessibilità di configurazione. Le tabelle HTML non hanno colonne definibili in quanto tali. visto che si presta a interpretazioni diverse da parte dei browser. La videata 1 è larga 1.3a lezione Tabella semplice. Affinché la tabella sia valida e visualizzabile deve contenere almeno una riga che contenga almeno una cella. 10. dall'inizio alla fine della riga per poi ricominciare dall'inizio della riga successiva. La tabella di contenuto ha bordi visibili e talvolta anche uno sfondo. I principali errori di codifica di una pagina HTML risiedono proprio nella costruzione delle tabelle. . 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>. l'impiego eccessivo di tabelle nidificate. Il numero di righe può variare liberamente. Internet Explorer. e ciascuna delimitata dalla coppia di tag <td></td> (che in inglese significa table data). completa automaticamente una riga non chiusa quando incontra il marcatore d’inizio della successiva (<tr>) e riesce anche a risolvere alcuni dei casi di tabella non chiusa. L'unico elemento orizzontale che non si adatta è il banner. Una tabella si apre e si chiude con la coppia di tag <table></table>. alterando l'assetto complessivo della tabella. Ne consegue che è difficile realizzare tabelle molto complesse senza perderne il controllo. La colonna di navigazione a sinistra ha dimensione fissa. 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. Se non fosse possibile mantenere lo stesso numero di celle per ogni riga. ad esempio quelle che contengono il testo. la tabella sarà scombinata e la visualizzazione risultante sarà confusa. In modo sequenziale. Fortunatamente i browser moderni dispongono di strumenti particolari per compensare la complessa gestione delle tabelle. Contiene una serie di attributi stilistici che servono alla corretta gestione del testo e che non sono necessari in una tabella di layout.La visualizzazione graduale dei primi elementi di una tabella prima che sia stata letta per intero dal browser. costruire una tabella è come erigere un muro. Più rigidi sono invece Netscape Navigator e Opera. 5. Ciascuna colonna viene costruita combinando in verticale le celle di ciascuna riga. ad esempio quelle conte- nenti i link di navigazione. 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.  fissa. 2. particolare. per tale motivo si consiglia sempre di eseguire un’anteprima della pagina con uno di questi programmi prima di rilasciarla. Qualunque siano le dimensioni della finestra del browser. In particolare. sebbene sarebbe meglio che lo fosse. 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. mentre le altre abbiano una dimensione variabile. Prendendo a prestito una metafora dal libro "HTML 4 Tutto & Oltre".

D'altro canto è essenziale nella costruzione di un sito e una volta prodotto il modello. una tabella che abbia una larghezza impostata per almeno una delle sue colonne. immutabile al variare della dimensione del browser oppure fluida. Purtroppo. Ad esempio il tag <td width="120"> inserito nella cella della prima o dell'ultima riga. Infatti l'immagine. perciò assoluti. sarà possibile costruire numerose pagine strutturalmente identiche tra loro. 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). . però. alla fine. è raro trovare pagine fluide in tutti i loro componenti. capace quindi di espandersi e di contrarsi all'unisono con la finestra del navigatore. poi. 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. ma non è vero il contrario. 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. 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). 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. Assegnando una larghezza percentuale all'intera tabella. 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. al contempo. La seconda decisione è tra una struttura fissa. usando sempre l'attributo width all'interno. Mantenere al minimo il numero di template è un requisito necessario per avere un sito gestibile e per facilitarne la successiva evoluzione a sito dinamico. collocata all'interno di una riga altrimenti vuota così da non essere visibile al navigatore. 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. come visto nell'articolo precedente. 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). del tag <td>. ma capaci di ospitare contenuti diversi. Nella pratica. salvo modificare le dimensioni di una particolare colonna rispetto alle altre a seguito dell'inserimento di testo o immagini.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. il cosiddetto spaziatore o immagine spaziatrice (shim). alias template. a una maggiore velocità di visualizzazione nel browser (per una descrizione di come allineare le tabelle rimandiamo all'articolo Tabelle consecutive sul CD). 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. A tal fine sarà importante concepire una struttura che sia capace di adattarsi al variare dei contenuti e sia riutilizzabile il più possibile. Di solito l'immagine trova posto in una cella in fondo alla colonna. oppure valori in percentuale (da 1 a 100). Lo spazio restante sarà distribuito in modo equo tra le altre colonne. potete assegnarle un valore specifico. otterremo un oggetto con una dimensione complessiva pari al settantacinque per cento della finestra del browser. Tale ampiezza sarà. nel nostro esempio sarebbe il 30% del 75%. ad esempio con il tag <table width="75%">. Perciò il browser non la espanderà anche quando la finestra si allarga. qualunque siano le dimensioni di quest'ultima. A favore della prima soluzione gioca il completo controllo della struttura e delle sue dimensioni. perciò anche nel caso di un design D 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. Se volete controllare le dimensioni percentuali di una colonna rispetto alle altre. le tabelle ad assetto misto (fluido e statico) presentano alcune stranezze con cui bisogna fare i conti. Anche in questo caso sarà sufficiente impostare la larghezza di una sola delle celle che compongono la colonna a dimensione fissa. Di solito s'imposta la dimensione della prima o dell'ultima cella. Il primo passo consiste nel decidere se incapsulare il tutto in una singola tabella oppure creare diverse tabelle separate che si allineano spontaneamente. Ricordiamo un concetto importante del dimensionamento fisso: la misura espressa in pixel indica la larghezza massima della colonna. Infatti. imposterà la larghezza dell'intera colonna a 120 pixel e fisserà anche la dimensione complessiva della tabella. dovrete decidere quali elementi mantenere stabili al loro interno. Allo scopo si usa di solito di un'immagine trasparente lunga e larga un pixel. a favore della seconda una maggiore leggerezza della pagina e semplicità delle tabelle che porta. in questo caso. manterrà il suo assetto anche nel momento in cui inseriamo testo nelle varie colonne. Come già visto nell'assegnazione delle priorità dimensionali in una tabella fissa (vedi l'articolo Stabilità delle dimensioni). essendo incomprimibile. 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. è 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. In tal modo il contenuto utilizzerà tutto lo spazio disponibile nella finestra del browser e. Qualora il testo fosse troppo lungo per essere contenuto nella cella. Innanzi tutto i browser più vecchi non rispettano la dimensio. Diversa è invece la situazione nel caso in cui venga inserita un'immagine in una cella con dimensionamento percentuale. distribuita in modo uguale tra tutte le celle/colonne.

In effetti questa è esattamente l'operazione compiuta da alcuni editor visuali nel momento in cui chiediamo di estendere una cella in orizzontale o verticale. 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. perciò una cella espansa può influenzarne un'altra e avere la meglio sugli attributi dimensionali della tabella nel suo complesso. possibilmente con dimensioni fisse (in pixel). dove si indica un valore massimo. Indicando una lunghezza e una larghezza pari al 100%. 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. ma esistono diverse situazioni in cui non è possibile farne a meno. ma che può essere incrementato se il contenuto nelle celle contigue lo richieda. Sono anche capaci d'influenzare il comportamento dimensionale delle righe e colonne che racchiudono a condizione che queste non contengano indicazioni dimensionali proprie. al di sotto del quale il browser non può scendere. 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. in caso di modifica delle dimensioni della tabella. 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. ma non può impedirle di allargarsi. L'estensione di una cella su più righe o colonne è un'operazione poco intuitiva e delicata perché i browser la interpretano a modo loro. la prima o l'ultima della riga. Il browser darà sempre a tale colonna la massima larghezza possibile "tenendo a bada" tutte le altre. perciò tanto vale padroneggiarla. In pratica quando aggiungiamo colspan o rowspan entro una cella esistente. la tabella occuperà sempre il massimo dello spazio disponibile nella finestra. quella dedicata al testo. hanno attributi tra loro pari. nelle tabelle complesse è facile perdere il filo e assegnare dimensioni diverse a celle della stessa colonna. È più facile capire il funzionamento di questi due attributi se li consideriamo capaci di unire due celle adiacenti per formarne una sola.3a lezione Ecco la stessa pagina da cui abbiamo rimosso tutto il contenuto di testo. quindi. Le celle espanse. Un listato . seguendo le stesse regole di costruzione usate per le tabelle normali. Anche in questo caso. Le celle estese diventano quindi anche uno strumento d'impaginazione. 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. La zona 2 contiene la navigazione gerarchica e utilizza due tabelle nidificate una 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. È un attributo usato di rado poiché la norma è lasciare che la tabella si allunghi e si accorci da sola in funzione del contenuto inserito. dobbiamo occuparci di cancellare personalmente la cella contingua nel cui spazio vogliamo estendere la cella espansa. Ad esempio. 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. qui viene sempre indicato un valore minimo. 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. rimandiamo all'articolo Creare tabelle complesse sul CD). I puristi consigliano di evitarla. Se invece lavoriamo a mano. scombinando la struttura della tabella. Nidificare significa inserire un'intera tabella all'interno della cella di una tabella esistente. 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. Avrete notato che insistiamo sull'assegnare la larghezza sempre a una sola cella della colonna. Per avere un'idea pratica di come si comportano. ma se pensate che i vostri utenti usino browser di due o tre anni fa. L'operazione si basa sull'impiego di due attributi del tag <td>. le celle espanse svolgono anche una funzione di controllo sulla porzione di tabella a cui appartengono. Un criterio generale che può aiutare a orientarsi è di consi- derarle come un livello intermedio tra la tabella e la singola cella. se dovete indicare un valore. Nidificare le tabelle Purtroppo anche l'impiego di celle espanse non è sufficiente a coprire tutte le esigenze di layout di una pagina. e che quest'ultima si estenda a garantire alla colonna variabile sempre la massima ampiezza possibile. Questo stratagemma può servire anche a definire una pagina che abbia solo colonne a larghezza fissa eccetto una. 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). Finora abbiamo parlato solo di larghezza di tabelle e celle. Alcuni consigliano di evitarle del tutto. Anche ricorrendo a tabelle multiple consecutive. tuttavia è importante sapere che a differenza della larghezza. La zona 3 ospita i contenuti con due tabelle nidificate consecutive. Sono interamente comprese in una tabella globale che ne ospita 9 nidificate. Il consiglio è di ridurle al minimo e di nidificare tabelle semplici. Le cinque zone diventano più evidenti. Come abbiamo visto. è me- 32/88 glio dover lavorare su una sola riga che doverne cambiare tante. Una logica che vedremo utilizzata anche dai Cascading Style Sheet (fogli di stile in cascata). 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. fatelo su una cella soltanto. la tabella si rimette a posto. Togliendo la cella di cui abbiamo preso il posto. 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. La zona 4 contiene la navigazione locale della lezione e usa altre due tabelle nidificate consecutive. questa si allargherà ad occupare lo spazio della cella adiacente facendo scorrere tutte le celle della riga o della colonna di una posizione. È la logica dell'assegnare priorità agli attributi in cascata. ma purtroppo risultano persino più incostanti nel comportamento rispetto alle celle singole. il che è praticamente impossibile se non nelle pagine più elementari. Oltre a consentire maggiore flessibilità estetica nella riproduzione degli spazi. che consiste nell'inserire una tabella nell'altra. 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). perciò esiste un ulteriore livello di complessità a cui ricorrere. Non esiste un'altezza di riga perché in realtà quest'ultima eredita l'altezza della cella più alta al suo interno. Il problema è stato ormai risolto dalle versioni recenti di browser.

3a lezione Per comodità qui abbiamo attivato la visualizzazione dei bordi della tabella di layout globale. Discorso analogo per GoLive 6. Spesso dovrete ricorrere alle immagini spaziatrici trasparenti per garantire la stabilità degli elementi della pagina. Anche Fireworks si comporta in modo analogo. all'in. Di default il browser assegna un bordo di un pixel e una spaziatura interna ed esterna di 2 pixel per lato a ciascuna cella. una nell'altra che si appoggiano spontaneamente sotto la tabella del logo e che ospitano la navigazione del CD. La quinta CD). ma permette comunque di modificare visualmente gli elementi già generati (per una prova completa vedi Macromedia Dreamweaver MX. La seconda fase consiste nel dimensionare le tabelle nidificate e le colonne di queste ultime. Tutte e cinque le aree vengopossibilità di modifica sugli elementi essenziali (ne parleremo no tenute al loro posto e collonella prossima lezione). corsi. per poi rimuoverli alla fine). Rientrano in questa categoria Dreamweaver MX e Fireworks MX.le aree 2. 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. indice.terza riga. collocate una sotto l'altra. per poi darlo in pasto a Dreamweaver MX. Le informazioni fornite fin qui valgono sia per le tabelle di layout sia per le tabelle di contenuto. cinque aree principali. Quest'ultimo dispone di una funzione propria di generazione grafica del layout che produce il codice immediatamente. cellpadding="0" per azzerare la spaziatura interna alla cella e cellspacing="0" per azzerare la spaziatura tra le celle. La seconda area è composta da due tabelle. 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. tre delle oltre che un elemento quali contengono a loro volta una o più tabelle di navigazione locale nidificate. la nave scuola del Web design sul CD). L'area 1 ocfica dei vari elementi. le tabelle di layout sono invisibili poiché non contribuiscono all'informazione della pagina.sicuramente è meno articolata scritto nella seconda lezione di una home page. perciò introduciamo per prima cosa alcuni accorgimenti che sono tipici di questo ambiente.bloccano le dimensioni impomo la struttura di tabelle nidifi.ma lezione per esaminare gli ra orizzontale del logo.stando la larghezza delle tre cocate usata per le pagine interne lonne successive che ospitano del nostro corso su CD. che possibil- 33/88 mente facciano già parte del progetto grafico della pagina. Notiamo che si compone di cinque righe. che trettante celle contigue nella avvolge tutta la pagina. La quarta area posto la prima tabella. ma si possono usare allo scopo anche elementi grafici visibili. La prima Rimandiamo invece alla prossiè la tabella che contiene la bar.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. ma servono unicamente per fissare le posizioni dei vari elementi. FrontPage 2002 genera im. indi. 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. Tacontenuti notiamo che le otto belle nidificate complesse e tabelle nidificate si dividono in Tabelle nidificate consecutive. 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. ma quando si entra nel dominio delle tabelle nidificate ci troviamo unicamente nel dominio del layout. quella che contiene il logo. stro schema. In cate reciprocamente dalla tamancanza di strumenti visuali. La cipo su un foglio di carta o an. che contengono il testo e le Ecco la stessa pagina visualizzata secondo la immagini della pagina struttura del codice HTML della tabella principale. con l'aggiunta di conservare sempre l'originale modificabile del progetto e quindi di poter ripetere la generazione dell'HTML quante volte si vuole. La terza area è composta da due tabelle indipendenti. Cerchiamo di capire le regole fondamentali. quella che contiele altre riservate agli elementi ne il link alla pagina dei credits.  . modificabile in tutti i suoi elementi. eccetera).0 maestro di tabelle sul pagina mantenga la propria larghezza e struttura.la prima riga della tabella. bella principale che vediamo la costruzione del layout passa schematizzata in un grafico geper un lungo processo di codi. partendo cupa l'unica cella che compone da dimensioni tracciate in anti.0. diamo agli articoli nel CD: TaOsservando la pagina senza belle nidificate in cascata.nerato con GoLive.area contiene semplicemente mediatamente il codice e offre una riga di chiusura. 3 e 4 composte da almo una tabella generale. perciò è importante ricordarsi di disattivare questi tre elementi prima di cominciare a costruire la tabella di layout. Per vedere (vedi l'articolo Impostare gli come è stata costruita rimanspazi del canovaccio sul CD). questa è una pagina Il modello di pagina è quello abbastanza comune in un sito e classico a quattro pannelli de. una per una. Proviamo ad aprire la prima riga e (Precedente – Prossiscopriamo che contiene una sola cella in cui trova mo). 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. che contiene la navigazione globale ti i link di una particolare lezione. FrontPage 2002. GoLive 6. Namo Webeditor. 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.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. Ogni elemento rimane modificabile e la generazione o rigenerazione del codice HTML è immediata (vedi Adobe GoLive 6. Ciascuno segue un approccio diverso e genera tabelle più o meno efficienti. 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. Namo si distingue per il fatto di realizzare un tracciato provvisorio della pagina. Vedia. Ne consegue che devono essere invisibili. A sua volta include una delle altre tabelle nidificate che contiene le voci di navigazione globale (home.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.aspetti delle tabelle in quanto spensabile per garantire che la elementi di contenuto. Hot Metal Pro. A differenza di una tabella di contenuto. di navigazione e alla barra orizBenché possa sembrare zontale che contiene il logo. complessa. La riga quattro conterno della quale sono state in.

per realizzare gli effetti più comuni. una volta che il disegno della pagina è completo.3a lezione 4 Namo WebEditor 5.questar. alla pubblicazione e manutenzione rapida di un sito statico. Fino a quel momento. utile per la produzione di siti statici. ma non è pronto per il passaggio diretto a Dreamweaver o GoLive e non si fida del codice generato in automatico da FrontPage. stili.Integra le componenti necessarie per produrre gli elementi grafici del sito . Il supporto all'HTML dinamico è abbastanza buono. Include tutte le funzioni necessarie al Webmaster per coprire anche la componente di design. 2000. alla semplicità d'interfaccia e alla precisione del suo ambiente di sviluppo visuale.  Pro . Offre strumenti rapidi per intervenire su testo. 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. Pregevole in questo senso la raccolta di clip art e di siti preconfigurati abbinata al programma. eccetera. la vista Modifica risulta comoda per aggiungere.Include una gestione integrata del sito e delle sue risorse . set di colori. Il programma evidenzia i tag e i relativi attributi differenziandoli dal testo e numera le righe Caratteristiche Sito produttore: www.com Sito distributore: www. upgrade 99. come quello che abbiamo scelto per il nostro corso: HTML-Kit. 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.90 euro. È possibile inserire tag in automatico cliccando sulle relative icone oppure selezionando le rispettive voci di menu. questo software ha già conquistato una discreta popolarità nel mondo dei Webdesigner grazie al costo ridotto. Consideriamola una vista di complemento all'editing visuale. modificare e aggiornare qualsiasi elemento della pagina. XP un livello intermedio interessante per chi è stanco di lavorare con un semplice editor HTML di tipo testuale.it Costo licenza: 199. ma in compenso è utilizzabile in pochi minuti e può soddisfare la gran parte delle situazioni. Non offre tuttavia strumenti mirati a chi debba  Namo WebEditor è uno dei più popolari editor visuali in circolazione.namo. 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 programma è concepito per l'impiego immediato anche senza lettura del manuale. 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. icone e menu.Scarso supporto per i linguaggi di scripting . versione "Education" 99. ma per lo meno il WebEditor evidenzia eventuali tag incompleti. A questo scopo è perciò necessario affiancare altri programmi specializzati come HomeSite oppure uno dei tanti editor gratuiti. Sono invece veloci ed efficaci invece i suoi strumenti di controllo e ripulitura del codice già scritto. Il suo ambiente grafico è ottimo per la generazione rapida di prototipi di pagina e di sito.Interfaccia semplice ed efficace . I fogli di stile sono supportati.Poco efficiente per la produzione di siti dinamici scrivere script da zero. 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à. 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. Questa funzione di design interattivo non offre la potenza che si trova in Dreamweaver e GoLive.90 euro Requisiti: Windows 98. 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.Ottima palestra formativa . La generazione del codice avviene solo su comando. da configurare mediante wizard. Il corredo di funzionalità di Namo WebEditor offre N 34/88 Identikit La vista HTML mostra il codice originale della pagina e consente di modificarlo in diretta come qualsiasi altro editor testuale. 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. SE. Offre un buon compromesso di funzioni per chi voglia gestire tutte le componenti del sito. Qualsiasi operazione eseguita in modalità grafica si trasforma in una modifica sequenza del codice HTML che può essere riesaminato entrando in vista HTML. ma non per lo sviluppo di siti dinamici. osservando immediatamente i risultati.Manca un editor specifico per i CSS . qualsiasi elemento può essere modificato. È 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. Buone anche le funzioni di controllo del sito nel suo complesso: il Gestore Risorse tiene traccia dei vari elementi disponibili: pulsanti.Genera in automatico un HTML corretto  Contro . Namo WebEditor fornisce una serie di script già pronti. dalle pagine agli elementi grafici e alle animazioni. per siti statici professionali onostante la sua matrice coreana. sebbene manchi un editor dedicato alla loro gestione. In tale vista. ME. mentre il Gestore Siti aiuta a tener traccia dei file che compongono un determinato sito e della struttura di navigazione corrisponden- . Non troviamo invece le funzioni di completamento e correzione immediata del tag come negli editor professionali. Oltre che in fase di progettazione. immagini e tabelle. appaiono evidenziati con un colore diverso tutti tag e i relativi attributi. Offre una buona miscela di funzioni orientate soprattutto alla progettazione.89 euro. 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 vista di layout consente la produzione istantanea di prototipi . NT 4.

. 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 .3a lezione te. &. la conversione globale dei nomi di file in lettere tutte minuscole.939 domini. il nuovo identificativo è destinato ad aprire nuovi orizzonti sulle attività commerciali.com. culturali e sociali del Vecchio continente. pezzo per pezzo.269.eu non sarà l’ICANN ma l’Unione europea.info e . l'indirizzo di una pagina Web su Internet). una cifra che in Europa è inferiore solo a quella dell’Olanda 790.net e . All’ICANN spetta il compito di decidere quali siano i nuovi  . %. persona fisica o giuridica. altri domini arriveranno. In Italia i domini possono essere acquistati da chiunque.304 del Regno Unito (3.biz. ma solo il trasferimento di “oggetti” digitali. Non a caso se su Yahoo si cerca l’elenco delle aziende che vendono i vari .585) e della Germania che guida la classifica dei paesi dell’Unione europea con 5. pur mantenendone l'integrità visiva mediante l'impiego di una tabella. Nel caso di PC Open. Fra gli enti interessati c’è anche un consorzio italiano formato dalle authority italiana. E che il business sia importante lo testimoniano gli operatori che hanno iniziato già a raccogliere le preregistrazioni in rete. . sarà la terza comunità al mondo per numero d’individui". che in questo 35/88 e aziende.com.info e .name a qualificare ulteriormente la presenza in Rete.666. La vendita di domini non comporta il trasferimento di beni fisici. . Si tratta di una parola (che può essere anche l’unione di più parole) accompagnata da uno dei suffissi che oggi è possibile registrare. infatti. 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. l’Italia ha risposto bene all’offerta di domini che nel corso del tempo si è andata ampliando. è possibile anche registrare domini di due lettere.org). A questa regola però ci sono alcune eccezioni. ma del resto si tratta di un software coreano. Il consiglio sarà eletto da un comitato elettivo e da tre organizzazioni che rappresentano i gruppi di proprietari di URL (Universal Resource Locator. Curiosa la disponibilità di una modalità di progettazione "i-mode" per lo sviluppo di pagine visualizzabili sui telefonini cellulari multimediali disponibili in Giappone. a patto che faccia parte dell’Unione europea. . 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 “.org. Il vertice è costituito dall’ICANN (Internet Corporation for Assigned Names and Numbers). 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. .  (versione integrale dell’articolo sul CD) il corso è sul CD n.com.biz. il che spiega tutto. 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 L’iter per registrare un dominio uno dei business più profittevoli della Rete che ha tenuto botta nonostante la crisi della new economy. Si tratta di un ente non profit le cui scelte sono ratificate dal ministero del Commercio statunitense il cui board of director. Dopo i classici . "Creato a garanzia della proprietà industriale e della personalità delle realtà aziendali.eu per esempio per permettere di identificare sempre meglio l’attività che si vuole svolgere in rete o la provenienza geografica di persone e aziende. la verifica e correzione guidata dei collegamenti interrotti.net. la pubblicazione in remoto mediante protocollo FTP.eu che servirà a identificare le imprese del Vecchio Continente. Una decisione che secondo molti allontana il vertice di Internet dai bisogni dei navigatori. Vietati apostrofi e accenti. Anzi.it si trova un elenco che conta quasi una cinquantina di nomi. Peccato che la Commissione europea abbia spiegato che le preregistrazioni potranno partire solo quando il futuro registro europeo sarà operativo.it.com o . simboli della punteggiatura e altri caratteri particolari come ad esempio @.org e l’italinon seguirà il normale iter dei gTLD (. Tutto questo è testimoniato dalla crescita del mercato che oggi in Italia conta 742.net e .635. Per la prima volta nella storia di Internet a decidere chi dovrà gestire il registro del . personali o pubbliche che ne faranno richiesta – spiega Bruno Piarulli di Register. per esempio. Il motivo si spiega facilmente. E soprattutto queste ultime non possono ormai fare a meno di avere una presenza in rete. Nella confezione del prodotto sono incluse anche tre utility: Namo Capture per catturare le immagini a video. belga e svedese alle quali in caso di vittoria potrebbero aggiungersi le authority slovena e ceca oltre a l’Isoc Europe.eu. Da qui è possibile eseguire alcune operazioni che si estendono all'intero sito come la ricerca e sostituzione di testo. il controllo del codice. una volta allargata. alla quale rimarrà la paternità del . Sparisce così la norma che prevedeva che cinque membri fossero eletti dagli utenti della Rete. Nonostante il ritardo nell’utilizzo di Internet. 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. Il dominio è insieme all’indirizzo IP il modo che ci permette di essere individuati su Internet. sarà formato da 18 membri. co .it sono arrivati altri domini come . contribuendo alla diffusione di Internet e dell’ecommerce in quella che. .eu” Appuntamento per l’estate 2003.name. Il programma in questo caso genera in automatico anche la tabella HTML che conterrà le diverse parti dell'immagine. il . Per i gTLD (generic Top Level Domain) quali . 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. . Ma vediamo di approfondire tutti i segreti del mondo dei domini Internet. l’organismo che sovrintende all’assegnazione dei domini. Il dominio da registrare in rete deve infatti essere composto da una sola parola o da più parole spezzate anche da trattini.it –.eu. Dovrebbe essere questo il momento del debutto per il dominio . secondo le nuove regole recentemente approvate. parliamo di pcopen.

e per questo si è pensato di introdurre la possibilità di legare a un indirizzo IP un nome a dominio. 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. Questo dà vita a numeri come sto modo possono attivare senza problemi i sottodomini.it/RA/index. Una volta effettuata la registrazione la Registration authority provvederà a rendere tecnicamente visibile in Rete l’utente registrato. bisogna interrogare il database della Registration Authority. 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. 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’è l’italiana Register. .95 a 35 euro per un . Nonostante le proteste. ed eventualmente chi l’ha acquistato.it. Lo spazio gratuito spesso concesso con l’acquisto di un .it e governo. 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.nic. . L’assegnazione da parte della Registration authority non è in tempo reale e segue il principio del first come first served. Italia.org e .it oppure a 14. . Gov. La Naming Authority si occupa invece di stabilire regole e procedure attraverso le quali sono gestiti i domini. In questo viaggio i dati vengono riconosciuti e interpretati dai vari host che capiscono se sono destinati a loro o se devono trasmetterli a un’altra macchina.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 nell’adozione di nuovi domini che hanno causato anche la nascita di società alternative delle quali parleremo più avanti. Il numero viene diviso in una sequenza di quattro cifre che sono poi trasformate in base dieci.it e RepubblicaItaliana. Quanto costa? L’offerta in rete è molto varia.com. l’acquisto del dominio vale per un anno. Per farlo bisogna andare sul sito www.it) in indirizzi numerici IP. ICANN rimane il massimo organo di Internet al quale è delegata anche la scelta dei registry dei gTLD.it. Alla scadenza di solito (questo dipende dai servizi offerti dalla società che vi ha venduto il dominio) l’utente viene avvisato e può così procedere al rinnovo o all’abbandono.it. Quante volte vi siete scontrati con un indirizzo e- 192. Questi host dialogano trasferendosi pacchetti di dati che passano attraverso vari server Internet fino ad arrivare al destinatario.com. Attenzione però a non farvi abbagliare dal prezzo. 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. Se le ambizioni. le società che si occupano di gestire i database dei vari . Nel caso invece l’acquisto del dominio sia collegato all’apertura di un sito è necessario possedere anche lo spazio Web che spesso porta con sé anche un servizio di hosting. dalla politica commerciale e anche dai servizi offerti in abbinamento con la vendita del dominio. Ovviamente ricordarsi ogni volta la sequenza di numeri sarebbe troppo macchinoso. Il protocollo TCP/IP permette di effettuare queste operazioni trasferendo i dati a pacchetti.it bisogna possedere una Partita IVA (per le aziende) o un codice fiscale (i privati) e avere la residenza in uno dei Paesi dell’Unione europea.com. Esistono infatti nomi riservati. Il livello successivo è costituito dai registrar o maintainer ai quali i registry appaltano di solito vendita dei domini. Non tutti i nomi a dominio possono essere registrati.it oltre che essere maggiorenne deve firmare e inviare via fax (al numero 050/542.org non deve compilare la lettera di assunzione di responsabilità. Repubblica-Italiana. Molto più accessibile è la qualifica di maintainer. 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. si passa da 9.pcopen. In Italia si preferisce utilizzare il termine maintainer. A meno di offerte particolari o altri accordi. 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. Il costo principale di chi vende il dominio è dato infatti dalla gestione dei nomi.153. Come si registra un dominio Chi vuole acquistare un dominio . La Registration Authority (www.169. ha il compito di assegnare e registrare tutti i nomi a dominio che utilizzano il suffisso . 56124 Pisa) una lettera di assunzione di responsabilità. Per ottenere un dominio sono necessari circa tre-quattro giorni. I pacchetti sono gruppi di dati che riportano sempre l’indirizzo del mittente e quello del destinatario.com. Di solito questi server sono di proprietà della società che ha venduto il dominio e ne ha effettuato la registrazione. che ha sede presso l’Istituto per le applicazioni telematiche del CNR di Pisa.net non è prevista invece nessuna limitazione anche per i privati. Per i domini 36/88 . 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 dall’utilizzo di nomi che potrebbero corrispondere a marchi che lanceranno in futuro. In pratica la società che ha venduto il dominio ospita sui propri server le pagine Web del sito e la posta elettronica. Per controllare se un dominio è già occupato.420) o per posta raccomandata ( Registration authority italiana. via Giuseppe Moruzzi 1. il quale vende gli altri suffissi. i nomi corrispondenti all’identificazione dell’Italia e i nomi dei comuni italiani.it sono riservati al sito dell’esecutivo così come it. I DNS servono per convertire i nomi dei nodi (come www. E in certi momenti un servizio consumatori che funziona e dà seguito immediatamente alle vostre richieste può essere molto utile. le sigle a due lettere delle province a tre lettere delle regioni.org o . per il privato o l’azienda.it. e questa è la tipica forma di un indirizzo IP. La lettera può essere di solito stampata da Internet nel sito del maintainer.info. Chi invece deve acquistare un dominio . Dipende dai livelli di rivendita. Le aziende europee possono registrare a loro nome un numero illimitato di domini .it. Requisiti per poter registrare un dominio Per registrare i domini .net. In sostanza se due persone o aziende inviano la richiesta di acquisto del medesimo dominio viene premiata la richiesta arrivata per prima a Pisa.it).it sono assegnabili solo agli organi istituzionali dello Stato. L’indirizzo è codificato a 32 bit e consiste in un alternarsi di 0 e 1 (codifica binaria).24. Per esempio non sono assegnabili i nomi di regioni e province.it).95 per un . 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. mail dal quale non arriva mai una risposta? Il servizio di hosting Spesso alla vendita dei domini è abbinata quella dell’hosting. Il prezzo varia a seconda del suffisso che si intende utilizzare.nic. Domain Name Server. 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. In questo caso le richieste di registrazione devono essere inviate all’Authority e non si accede direttamente ai database.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. La “traduzione” da dominio a indirizzo IP è affidata al DNS. . Istituto per le applicazioni telematiche del CNR. mentre i privati possono registrare a loro nome un solo dominio .it.

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
l’affidabilità del sistema e i margini di autonomia che possiede
l’utente 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 dell’hosting. Tenendo presente
che l’aspetto principale è quello della vostra autonomia.
L’utente 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 l’esistenza di un eccellente
servizio ai consumatori che
aiuti i navigatori in difficoltà sia
un altro elemento importante
nella scelta dell’hosting. Per
quanto riguarda la scelta di una
piattaforma Linux o Windows è
una questione che può interessare soprattutto chi ha in programma l’allestimento 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, l’occupazione abusiva di domini. In
pratica, il furbo di turno, decide di acquistare un dominio
che guarda caso è uguale al
nome o al marchio di un’azienda. 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 l’equiparazione 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 l’autorizzazione a operare dalla Naming Authority. Il procedimento avviato dagli enti con-

A

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/ è l’indirizzo presso il quale si trovano i link agli enti conduttori per
i
domini
.it,
mentre
www.icann.org/udrp/approved-providers.htm è l’altro 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 
A scuola con PC Open

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

N

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

IL CALENDARIO DELLE LEZIONI
Lezione 1:

• Esercizi su come creare una pagina
vergine e su come progettare un sito

Competenze e strumenti
(disponibile integralmente
sul CD)

Lezione 3:
il corso è
sul CD
n. 68

• Che cosa fa un Webmaster
• Gli strumenti di lavoro
• Le figure professionali che
affiancano il Webmaster
• Le risorse on line
• Tecniche di progettazione del sito
• Organizzazione delle informazioni
• Costruzione della mappa – gerarchia,
ipertesto, struttura lineare
• Strumenti di navigazione
• Sistemi di navigazione
• Sistemi di labeling

Lezione 2:

Modelli di pagina e tabelle
(disponibile integralmente sul CD)
• La tabella come elemento strutturale
• Progettare layout fluidi e statici
• Costruire template con le tabelle
di layout
• NamoWeb Editor5: per siti statici
professionali
• Dimensionare tabelle e celle fluide,
dimensionare tabelle con celle miste,
allineamento spontaneo delle tabelle
consecutive
• Template con struttura complessa
• Template con tabelle nidificate
• Esercizi

Siti statici e linguaggio HTML
(disponibile integralmente
sul CD)
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
• Adobe GoLive 6.0
• Spiegazione dei tag HTML per una pagina
vergine

38/88

• Cosa si può fare con i fogli stile
• Quattro tipi di CSS
• I colori del Web
• Gestire le immagini
• Esercizi
Contenuti aggiuntivi sul CD
• 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:
Design e multimedialità 

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:
Interazione sul server

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 &egrave; 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

Gestire gli spazi nel testo
Tutti i browser hanno una
caratteristica in comune: generare
una presentazione del contenuto
che sia adatta al tipo di computer
su cui stanno funzionando,
interpretando a proprio modo le
informazioni della pagina ed
eliminando il superfluo o ciò che
credono tale. In effetti il Web è
nato in un contesto accademico
dove crediamo che gli autori
fossero più concentrati
sull'informazione che volevano
trasferire che non sulla sua forma
e c'era l'esigenza di garantire che
un testo composto su un tipo di
computer rimanesse
comprensibile anche quando
trasferito altrove. Mancando di
qualsiasi funzioni tipografica nella
versione 1.0 e 2.0 di HTML,
l'unico modo disponibile per
impaginare le informazioni
consisteva nell'allineare i vari
elementi all'interno della colonna
di testo usando spazi multipli,
spazi che possono essere usati
come rientro per le righe di un
paragrafo oppure come
distanziatori tra le voci di un
indice e i numeri di pagina
all'altro estremo della riga.

40/88

Il problema è che tali spazi
possono cambiare dimensione
quando mostrati su computer
diversi con font differenti e tutti gli
allineamenti costruiti in origine
dall'autore finiscono per
scombinarsi creando confusione
anziché aiutare la comprensione
del contenuto, inoltre molti
"scrittori" non professionali
inseriscono distrattamente due o
tre spazi tra le parole mentre le
digitano, presentando un
documento che ha un aspetto
trasandato.
Al fine di prevenire tali
inconvenienti e filtrare gli errori,
tutti browser eliminano
automaticamente qualsiasi spazio
aggiuntivo e richiedono all'autore
di specificare un particolare tipo
di entità nel caso voglia avere una
serie di spazi consecutivi,
rendendolo in tal modo
consapevole che si tratta di una
soluzione particolare di cui si
assume piena responsabilità.
Tale entità prende il nome di
spazio unificatore (non breaking
space) e si scrive &nbsp;
all'interno della pagina HTML
(ripetendolo per ogni singolo

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

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. Alcuni lo usano anche da solo per inserire spazi bianchi listati di programma.01 per modificare l'aspetto e il significato di un blocco di testo.2. 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. Il tag <font>. destro oppure al centro della pagina. sia opportuna una netta distinzione rispetto alla parte principale del testo. È 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). per uno scopo stilistico che in origine non era previsto. inserendolo nella coppia di tag <pre> e </pre>. Il marcatore storico usato per questo genere di funzione è <pre> che definisce un testo "preformattato". Il suo effetto viene unicamente delimitato dalla posizione dei tag di apertura e  </blockquote></blockquote>. font.0 (la versione di HTML che consente l'impiego delle funzioni avanzate di XML). dove non è consigliabile creare celle completamente vuote anche se servono al fine di creare spazi bianchi. size per definirne le dimensioni e color per specificarne il colore. L'attributo "storico" del tag <p> deprecato da HTML 4. Esistono diversi altri markup fisici e logici che producono testo monospaziato. colore. È 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. il consiglio è di riempire il paragrafo con almeno uno spazio bianco non eliminabile. deprecato da HTML 4. 41/88 all'interno della pagina. ad esempio. 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. Qui vediamo il marcatore <pre> all'opera. Il problema di questo approccio è che richiede l'impiego di un marcatore strutturale. vale a dire che potete inserire diversi <blockquote> uno dentro l'altro al fine di produrre rientri sempre più profondi. Vediamo innanzi tutto la prima soluzione. right. per alli- Il marcatore <pre> riconosce e riproduce anche eventuali grassetti e corsivi presenti nel testo. È stato deprecato dalle specifiche HTML 4.0 mentre funziona ancora in Netscape 7. Quando un motore di ricerca passa in esame le pagine dove <blockquote> è stato utilizzato unicamente per produrre un rientro. semmai. Perciò alla pari delle tabelle. Nella tabella "Marcatori per formattare il testo" trovate una sintesi di tutti i tag compatibili con HTML 4. brevi elenchi o altri brani di testo brevi dove gli allineamenti siano più importanti dell'omogeneità visiva e dove. Lo stesso effetto può essere prodotto più efficacemente e con maggiore accuratezza usando i fogli di stile in cascata. 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. cioè cosa si può fare utilizzando i tag e gli attributi che ereditiamo dall'HTML 3.01. justify (quest'ultimo supportato solo da vecchie versioni di browser). segnaliamo comunque <blockquote> che consente di produrre blocchi di testo evidenziati all'interno del documento principale mediante un rientro su entrambi i lati. ma i browser di futura generazione potrebbero filtrare i paragrafi vuoti eliminando gli spazi così introdotti. tipicamente usando il font courier a spaziatura fissa e inserendo una riga vuota prima e dopo il brano compreso tra i due tag. ritorni a capo nel testo e lunghezza delle righe.4a lezione parleremo di XML). Tra i marcatori riportati in tabella.2 il tag di chiusura </p> è facoltativo. il colore e la dimensione del carattere. spazi inclusi. Ma cosa succede quando decidiamo d'intervenire su interi blocchi di testo modificandone. Nel caso non volessimo inserire una riga vuota al termine del paragrafo. inoltre non funziona in maniera omogenea in tutti i browser. producendo una singola riga ininterrotta e illeggibile (grassetto e corsivo nella pagina Web devono naturalmente essere aggiunti con marcatori ad hoc). Tra l'altro.0). center. (non breaking space di cui parliamo più dettagliatamente in un riquadro a parte "Gestire gli spazi nel testo"). 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. a frasi e paragrafi inte- nidificazione di se stesso. Otteniamo nuovo il formato originale.01 perché si tratta di un markup fisico (stilistico) e non logico (strutturale). che in HTML viene generato con l'entità &nbsp. 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". codificherà come citazione qualcosa che non lo è affatto. witdh. ma diventa obbligatorio in XHMTL 1. Nell'HTML 3. Proviamo ora a copiare lo stesso brano. compresi spazi multipli. 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 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. 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. ma semplicemente andare a capo oppure volessimo inserire diverse righe vuote consecutive. dimensione. che determina il numero massimo di caratteri. <blockquote> è l'unico marcatore HTML a consentire la neare il testo al bordo sinistro. Ha il pregio di mantenere qualsiasi indicazione di formattazione contenuta nel testo originale.01 è align che regge i parametri: left. visualizzato con un carattere courier a spaziatura fissa invece del Times a spaziatura proporzionale scelto di default dal browser . nato per evidenziare delle citazioni. 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. è <font> che regge diversi attributi di cui i principali sono: face per indicare il tipo di carattere. Il deprecato tag font Il marcatore fisico più importante per la "tipografia" sul Web. Dispone di un singolo attributo facoltativo.

Ciascuna voce della lista viene poi identificata mediante la coppia di tag <li></li> (list item). come vedremo. ma richiede una formattazione particolare. 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. mentre varia invece la dimensione. il nome di uno dei sedici colori codificati in HTML oppure il codice esadecimale della tinta scelta. +1 corrisponde a 4. Il valore di default per il browser corrisponde naturalmente a Visualizza > Carattere > Medio. Il primo stabilisce una dimensione fissa dove il default è 3 e corrisponde alla dimensione base assegnata dal browser al testo (circa 10 pixel). Si dice quindi che gli attributi si applicano in cascata con i livelli superiori che influenzano tutto ciò che contengono. se invece scegliesse Visualizza > Carattere > Molto piccolo tutta la scala di valori verrebbe ridotta di due livelli. come sempre. dalla singola parola all'intero documento. 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. 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. I tag nidificati all'interno vanno chiusi.  . È possibile nidificare diversi tag <font> ereditando di livello in livello le caratteristiche dei livelli superiori. In entrambi i casi si tratta di valori dinamici. Conserva grassetti e corsivi. Si va da 1 a 7 oppure da –7 a +7. cioè visualizzabili senza alterazioni in qualsiasi tipo di browser sia su Windows sia su Macintosh (per un riferimento vedi http://www.01 notiamo una caratteristica che costituisce la base per il funzionamento dei fogli di stile in cascata. l'intero documento è contenuto all'interno di un tag <font> che specifica il tipo Verdana. vale a dire sensibili all'impostazione del browser per visualizzare il testo. come pure alle tabelle che contengano testo. come nel caso delle liste. L'attributo face consente d'indicare diversi tipi di font. I primi due attributi si mantengono costanti per l'intero documento poiché non modificati dai tag <font> successivi. 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. Nel caso di liste nu- merate è possibile determinare il tipo di numerazione in uso (araba. Nell'esempio che riportiamo in figura. che di solito viene prelevata da una palette di 216 colori cosiddetti sicuri. ma <h#> e <blockquote> possono anche vivere separatamente. il colore rosso e una dimensione pari a quattro (+1). perciò –1 corrisponde a 2. Tutte le impostazioni stilistiche previste dal tag <font> si applicano alle liste. 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. da scegliere in sequenza e in alternativa al principale qualora questo non fosse disponibile sul browser. prima di chiudere il tag più esterno (qui evidenziato in viola) testo non fluisce a colonne. Notate anche che il tag <font> può abbracciare una quantità indefinita di testo. romana. Nelle liste non numerate invece è possibile evidenziare ogni singola riga con un pallino (default). 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. I due tipi di valori hanno significati diversi. come qualsiasi altro tag che preveda l'uso del colore.4a lezione  chiusura: <font> e </font>. 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. Il secondo stabilisce invece il livello d'ingrandimento o riduzione rispetto al valore di default (3 appunto). Tutti i tag fisici sono deprecati da HTML 4. indicata nel tag che è più vicino alla porzione di testo a cui si applica. 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. Color infine accetta. come vedremo più avanti. size invece indica dimensioni assolute o relative.webmonkey/ reference/color_codes/ e il riquadro "Colori sicuri"). lettere) e la lettera o numero da cui far partire l'elenco. eccetera. L'unica eccezione in questo senso. un quadrato o un cerchio.

soprattutto in siti di tipo dinamico. sfruttando al tempo stesso le funzioni evolute dei fogli di stile. 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. 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.  .0 risolve anche una stortura concettuale introdotta nel Web con il rilascio della versione 3. facilmente accessibile anche da chi non conosce linguaggi di programmazione come JavaScript. 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. hanno trovato la loro diffusione naturale con HTML 4. In effetti è persino possibile combinare nella stessa pagina CSS e marcatori fisici. e di beneficiare delle evidenti potenzialità dei CSS. 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. nato per controllare la struttura e non la presentazione di una pagina. Nascono concettualmente nel mondo dell'editoria dove. modificare le caratteristiche originali dei tag HTML. per semplificare il lavoro. bensì consentono di posizionare con precisione gli elementi sulla pagina. per assecondare i desideri dei Esempio di un foglio di stile: ecco il formato tipico di un foglio di stile. Sebbene esistano fin al 1996. 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. Inoltre. Separare la forma dalla struttura Il sogno di qualsiasi progettista di siti è la separazione degli attributi tipografici e stilistici dalle componenti strutturali della pagina. per non parlare della loro usabilità. sostituendosi alle tabelle come metodo per definire il layout. fornendo una gamma di opzioni tipografiche molto ampia.01 Cascading Style Sheets (fogli di stile in cascata) costituiscono lo strumento più importante per gestire gli attributi tipografici di un sito moderno. Raggiungeremo il doppio obiettivo di essere pienamente conformi alle specifiche di HTML 4. che ne recepisce appieno le caratteristiche. la propria navigabilità e la propria estetica sulla scorta delle informazioni raccolte dai navigatori durante l'uso del sito. tanto vale abbandonare l'impiego dei tag fisici. al fine di avere la piena compatibilità con tutti i tipi di browser in circolazione. come invece accadeva in passato. 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. che depreca l'uso di tag stilistici. la pagina avrà un aspetto più gradevole quando visualizzata da un browser di generazione 5 o 6. 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. diventa possibile realizzare soluzioni tipografiche che siano compatibili a trecentosessanta gradi. ha consentito anche a chi non è creativo di produrre risultati presentabili e gradevoli. come ad esempio <font>. La nascita dei fogli di stile e dell'HTML 4. alleggerendo le singole pagine e facilitando eventuali modifiche e aggiornamenti. pagina per pagina. 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à.2 di HTML che ha rinnegato la natura originale del linguaggio. Tale separazione è importante per raggiungere un adeguato livello di efficienza nella gestione del sito. In tal caso.01. e introducono anche una certa dose d'interattività nella pagina. è necessario chiamare in causa il Webmaster per ogni singola modifica estetica.x. Nel Web costituiscono un complemento di HTML e si sposano con i tag di quest'ultimo in modo abbastanza semplice e intuitivo. 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. creando così enormi problemi di compatibilità e di manutenibilità dei siti. raggruppare tutte le informazioni stilistiche di un sito all'interno di un documento che venga caricato una sola volta per quel particolare sito. È un semplice file di testo o porzione di pagina HTML. senza doversi far carico di produrre versioni diverse della stessa pagina a seconda del browser I 43/88 utilizzato dal navigatore. in particolare <font> e abbracciare in toto i CSS nella nostra progettazione tipografica.0 e Netscape 4.0 e il loro pieno sviluppo con HTML 4. Tuttavia i Cascading Style Sheets non si limitano agli attributi tipografici. Infatti. con poco sforzo. modifica che deve essere replicata a mano.01. diventa addirittura necessario chiamare in causa un programmatore oppure un Web developer. 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. ma sarà comunque utilizzabile su un browser di generazione 4. fintantoché gli elementi stilistici sono mescolati con il codice HTML. definire un livello e la sua posizione nella pagina (vedremo più avanti di che si tratta).4a lezione 2 CSS e HTML 4. Le tre funzioni primarie di un foglio di stile sono: impostare gli attributi tipografici del testo. 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. Se poi si trattava di un sito dinamico. Avendo così eliminato anche i vari tag particolari che accompagnavano le diverse famiglie di browser.

Si producono talvolta anche effetti imprevedibili e incostanti. che funge anche da editor testuale per pagine HTML. si cambiano anche le caratteristiche delle varie lettere che lo compongono per adattarsi al diverso effetto visivo prodotto dalle nuove dimensioni. Il prezzo da pagare per l'adozione dei CSS è l'aggiunta di un nuovo linguaggio alla propria cassetta degli attrezzi e al proprio sito. normale e grassetto). vengano maggiorati del 10% rispetto agli altri caratteri del testo in cui sono contenuti: una finezza facile da rea- . i fogli di stile in cascata offrono moltissime possibilità. In alternativa i CSS offrono altri due tipi di unità di misura: assolute e relative. attributi come il corsivo e il maiuscoletto. ma possiamo anche imporre una dimensione fissa in pixel o punti tipografici (quest'ultima preferibile se vogliamo poi anche stampare le pagine). ma possiamo anche stabilire con precisione l'altezza di ogni lettera. Si parla di famiglia poiché si compone di tanti insiemi di caratteri con dimensioni diverse. 8 punti corrispondono a 10 pixel. font-family. possiamo anche modificarne l'aspetto quando vi passi sopra il cursore e una volta che sia stato visitato. la spaziatura. Di conseguenza costituisce un investimento aggiuntivo. Lo svantaggio è di complicare la vita a chi abbia difficoltà di lettura e di rendere imprevedibile l'effetto in stampa. Tanto per cominciare. R La natura tipografica degli stili Il primo ambito d'intervento dei fogli di stile è nell'impostazione degli attributi tipografici del testo. Le unità assolute definiscono un valore rigoroso. anziché ripetere in continuazione il tag <font> per ogni elemento. il peso delle stesse (sottile. non dotati di specifiche utilità per la gestione dei CSS. large. Possiamo anche maggiorare le dimensioni di una particolare porzione di testo (il grassetto "maggiorato" è del 10% più grande del testo normale a cui è abbinato). una misura adatta per le didascalie. bloccando la visualizzazione del testo a una dimensione precisa sullo schermo. Nel caso si tratti di testo usato per collegamenti ipertestuali. Tale altezza può essere espressa in pixel.0. sarà sufficiente stabilire una volta sola per l'intero sito l'aspetto del testo. Anche la gestione delle tabelle viene potenziata e semplificata enormemente. il colore e la dimensione relativa (size) in rapporto al default del browser. L'unico programma che contenga una funzione diagnostica specifica per i CSS è Top Style 3. eventuali bordi. Impostando il grassetto in modo che sia 1. 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. di riga e di cella. mediante gli attributi relativi small.0 e Netscape 7 viste dal browser. 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 barrato e molto altro ancora. descrive la famiglia di font scelte per quel particolare brano di testo. Si prestano alla creazione di effetti speciali. 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>. i fogli di stile possono essere conosciuti un po' alla volta. pollici. specie nella gestione di contenuti multimediali. 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. difficili da diagnosticare e risolvere anche per i limiti di molti editor HTML oggi in circolazione. possiamo infine raggiungere dimensioni assolutamente inarrivabili con il tag <font> e aggiungere bordi. Le unità relative lasciano invece libero l'uten- te di ridimensionare il proprio testo. in pratica la lettera più larga dell'intera font rispetto alla quale si misurano tutte le altre. non importa quale font e quale dimensione. il colore e le 44/88 dimensioni del carattere.1 em avremo un grassetto più corposo perché leggermente più grande della font normale. ma non supportano ancora appieno i CSS di livello 2 che aggiungono una pletora di nuove funzioni. medium. Tipograficamente. Nella pratica 9 punti corrispondono a 12 pixel (la misura più leggibile per un testo lungo sia a video sia in stampa). centimetri. dei titoli e dei link. ciascuna delle quali prende il nome di font. 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. anche se quest'ultima funzione non è supportata da Opera 5. effetti particolari come il sottolineato.4a lezione 3 Cosa si può fare con i CSS ispetto ai markup fisici di HTML e in particolare al tag <font>. A differenza di quest'ultimo. eccetera. mantenendone tuttavia le proporzioni rispetto al resto della pagina. 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. Inoltre.1 em} perché tutti i caratteri bold dell'intero sito. tanto che uno studio di tutte le loro funzioni richiederebbe un impegno paragonabile a quello speso per imparare HTML. l'interlinea. il quale può determinare unicamente il tipo di font. Non solo possiamo scegliere la font. usando diverse unità di misura. quando s'ingrandisce un carattere o lo si rimpicciolisce. però. potendo definire attributi globali a livello di tabella. 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. senza tuttavia rimpiazzare un vero e proprio ambiente visuale. Con i fogli di stile possiamo invece replicare esattamente il comportamento delle misure relative di font. per avere un'estensione automatica delle specifiche a tutte le pagine. e via di questo passo. Per comprendere i vari termini usati nella definizione di questi attributi bisogna conoscere un po' di tipografia. pica e punti (un pica corrisponde a 12 punti tipografici). ogni volta che si scopra qualcosa di nuovo. la proprietà più comune. esplorandone le funzioni a mano a mano che se ne presenti l'occasione e aggiornando il sito gradualmente. ma facilmente riconoscibile anche dalla stampante: millimetri. Basta indicare b {fontsize: 1. con la necessità d'imparare complesse regole astratte che governano ereditarietà ed effetto a cascata. alla pari dei pixel. come avveniva nel tag <font>.

Quattro tipi di CSS Esistono quattro modi diversi per innestare un foglio di stile all'interno di una pagina HTML. ma che mancano invece nelle font di tipo "bastone" che sono lisce e senza ghrigori e risultano più facili da leggere a schermo). sulla destra e separata dal selettore mediante due punti. che prende il nome di foglio di stile esterno. è possibile poi ro sito e beneficiare della masabbinare bordi.href (hypertext reference) qui ziale incompatibilità con i è indicato per la home page e browser più vecchi e anche. sansserif. sfondi colorati sima flessibilità di modifica dei addirittura immagini di sfon. Il tag da utilizzare in do. il foglio viene incorporato nell'intestazione della pagina mediante il tag <style>. però proviene da un singolo documento centralizzato. In che modo si può inserire un foglio di stile all'interno della pagina? 9. 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. Ad esempio. (<head>) un link che indica il tipo. La regola indica inoltre che il titolo dovrà avere una dimensione di 16 pixel (il valore è preciso. ad esempio.4a lezione per alcuni casi. h1 { font-family: Verdana.parametri. racchiudendola entro di uno speciale tag concepito allo scopo: <style>. Se volessimo realizzare lo stesso effetto non sul paragrafo. Come funziona il meccanismo dell'ereditarietà? 8. cambia al variare della posi- Test: leggi le domande e verifica le tue risposte ? Riepilogo dei concetti della Lezione 4 1. il valore di bertà ha un prezzo: la poten. Il selettore può corrispondere a uno degli elementi nativi di HTML. Il selettore h1. In questo caso. è 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.01 e XHMTL 1. 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. Il primo. font-size: 18px">testo da modificare </span>. con un controllo molto pre. font-size: 18px"> che dice al paragrafo corrente di visualizzare il testo in Times a 18 pixel. Che cosa sono i CSS e a che cosa servono? 6. 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.type="text/css">.css" Purtroppo tutta questa li. Le regole di costruzione dei CSS Ogni regola dei CSS si compone di due parti: il selettore e la dichiarazione. La dichiarazione ospita invece tutti i possibili attributi stilistici previsti per quel particolare oggetto. posizionato a sinistra. proccio è possibile definire un A qualsiasi elemento HTML. il foglio di stile vale solo per quella pagina particolare e dovremo aprire la pagina ogni volta che bisognerà modificarlo. color: #003399 } indica che i titoli delle nostre pagine saranno visualizzati con il font Verdana. Helvetica. 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. Qui notiamo che il nostro foglio ipotetico contiene un elemento definito. la dimensione e il colore nero del testo al documento che da usare nelle tabelle contenute nella pagina. come il Times Roman e che servono per facilitare la lettura su carta. Che cos'è la Websafe palette? 11. Che differenza c'è tra un marcatore o tag fisico e un tag logico? 3. Se il browser non supporta le funzioni dei CSS che cosa succede? 10. rosso. Come si può allineare il testo all'interno di una pagina? Si possono usare spazi bianchi multipli? 4. Notate che la regola si apre e si chiude con una . impossibile a definirsi con il tag <font>) nonché un colore blu. oppure in alternativa con Arial.questo caso è <link> con l'indiciso sulla forma e la posizione cazione del tipo di relazione degli stessi. table. Che differenza c'è tra HTML 4. al termine della zona compresa dalla coppia di tag <head> </head>. Quali sono i marcatori più importanti per il testo e dove si usano rispettivamente? 2. Il terzo modo prende il nome di foglio di stile importato e costituisce una via di mezzo tra i due definiti prima. indicherebbe che lo stile si applica a tutti i titoli di primo livello.serire il foglio usato nelle pagispetto ad altri elementi conti. 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. 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. singolo foglio di stile per l'intetesto compreso. 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: 16px. determinare con precisione la La dicitura completa per inposizione degli elementi ri. identico per diverse pagine. 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. Cosa si può fare con i CSS? 7. 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. 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. indica le varie proprietà e i valori per tali proprietà. Mediante tale apleggibilità del testo. 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. Il selettore. Arial.ne del nostro CD è la seguente: gui e rispetto al canovaccio <link rel="stylesheet" complessivo della pagina. Seguono poi contiene il foglio quattro classi generiche (dida. La dichiarazione. bensì su una porzione più piccola di testo useremmo <span style="font-family: Times. È anche possibile infine natura (type="text/css"). href="/zzz/stili. in tal caso parleremo di selettore di tipo. con le versioni più recenti.0? 5. Il tag <link> va inserito nell'intestazione di ciascuna pagina. È un sistema usato di rado anche perché mal supportato da alcuni browser. definisce le parti del documento a cui applicare lo stile.

In tutti i casi. 9. combinati sullo schermo. 6. sfruttare al massimo gli elementi di colore prodotti in modo nativo dal browser. (versione integrale dell’articolo sul CD) l’articolo è sul CD n. 16. ma anche altamente consigliato. producono tutti i colori visibili. l'uso d'immagini anche per rappresentare titoli e brani di testo. Il metodo basato sui valori esadecimali è invece il più comune perché utilizzabile direttamente dall'interno di un tag HTML e compatibile con qualsiasi browser. Esiste anche una seconda categoria di selettori basati sui tag nativi HTML. Un marcatore o tag fisico indica il modo in cui una porzione di testo deve essere visualizzata sullo schermo. Creare attributi tipografici per il testo molto più ricchi e precisi rispetto a quanto vedi l'indirizzo http://www. 3. il che porta a pagine pesanti e molto scomode da aggiornare. webreference. 7. differenziare vari tipi di testo.0 in avanti e non sono supportati da nessuno standard. quello dei nomi. 11. h4. JPEG per le fotografie e PNG http://www.h5. mettere in risalto i collegamenti ipertestuali. 2. "biscuit" (biscotto) o “forestgreen” (verde foresta). Senza i CSS.com/ catalog/wdnut/excerpt/color_names.h3. soprattutto nella gestione del testo. color: #003399">. 10. ma che includono anche i 16 colori di base. Gli attributi passano di padre in figlio con il figlio che ha la priorità nel variare quel che gli viene dal padre. integrando il foglio di stile direttamente nella pagina. offre anche un buon livello di controllo sui risultati.01 è la più recente specifica per la produzione di siti Web. invece.webreference. posizionare gli elementi sulla pagina con estrema precisione.Esistono tre formati usabili direttamente dal browser: GIF per grafici e disegni. Il marcatore <pre> mantiene l’allineamento di un testo come nel documento originale. due per ciascuno dei tre colori: rosso. I nomi aggiuntivi di questa palette funzionano unicamente con Internet Explorer dalla versione 4. Tale metodo. 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. il tag <h1> dell'esempio verrà interpretato normalmente. Ci permette di aggiungere informazioni visuali alla pagina. Esistono quattro modi possibili: creando all'interno della pagina un collegamento a un file che contiene le indicazioni di stile per l'intero sito.0 prevede una sintassi più rigorosa per la migrazione verso XML. HTML 4. XHTML 1. Per conservare gli spazi bianchi bisogna utilizzare l'entità “spazio unificatore” (&nbsp. bgcolor (per gli sfondi) e bordercolor (per i bordi). 4. 39 1. di cui solo 8 appartengono alla Websafe palette che vedremo più avanti. specie nei siti di vecchia concezione.4a lezione parentesi graffa così da essere distinta dalle altre e che ogni proprietà viene separata da un punto e virgola. con nomi molto esotici come "darkslategray" (grigio lavagna scuro). oppure essere incorporato nelle singole pagine. i selettori contestuali: servono per governare la visualizzazione del testo contenuto in un determinato tag al verificarsi di condizioni particolari. Se non le supporta affatto non succede niente. 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. inoltre. i risultati sono abbastanza poveri. 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. Oggi. a partire da <h1> per arrivare ad <h6>. 5.html#HEAD-2 oppure ! possibile con HTML. Raggruppano tutte le informazioni stilistiche di un sito all'interno di un documento centrale. consigliata. 68 . Come vedete è abbastanza semplice e si sposa perfettamente con la sintassi originale propria di HTML. è poco usato poiché prevede un numero limitato di colori. Per i browser che non riconoscono i fogli di stile. Esiste un ulteriore rischio nell'uso dei nomi per i colori. 8. I CSS aggiungono come terza possibilità. i colori vanno espressi in due modi possibili: indicandoli per nome oppure mediante una notazione esadecimale. un marcatore logico ne definisce invece la funzione e lascia al browser la scelta di come visualizzarla. possono altresì esserci numerosi selettori per una singola proprietà. Basta indicare i valori RGB che vogliamo riprodurre per ottenere qualsiasi genere di tinta. Il primo metodo. Se invece le supporta solo parzialmente può produrre risultati inaspettati in qualche raro caso. abbellire il documento e le tabelle con sfondi e con bordi che ne aumentino l'effetto estetico e ne facilitino la lettura. usa nomi che sono mnemonici solo in inglese. Immaginatevi di correggere un refuso o modificare un testo contenuto in un’immagine: dovreste aprire un programma ad hoc (Photoshop. Si tratta di <p> per la definizione dei paragrafi e <h#> per la definizione dei titoli. diventa non solo possibile.h6 { color: #003399 } ci dice che tutti i titoli e titolini del nostro sito saranno blu.) oppure creare un rientro su ambo i lati con <blockquote>. Così come ci si possono essere molte proprietà per un singolo selettore. e capita spesso di trovare. l'uso di una un notazione decimale o percentuale che indica direttamente i livelli di rosso.Un insieme di 216 colori che possono essere visualizzati senza varianti un Macintosh oppure un PC Windows. inserire elementi dinamici e multimediali nella pagina. Il risultato è una sequenza di sei cifre esadecimali come ad esempio FF0033 (rosso vivo). I Cascading Style Sheets costituiscono lo strumento più importante per gestire gli attributi tipografici di un sito moderno. con la precisione tipografica consentita dai CSS. Microsoft ha definito una tavolozza estesa che contiene 140 colori. Infatti la regola h1. Il secondo produce pagine più leggere e più semplici da gestire e. verde e blu da utilizzare nella composizione del colore finale. anziché semplicemente intervenire direttamente sulla pagina HTML. Esistono due modi fondamentali per inserirlo: creare un'immagine esterna alla pagina oppure sfruttare le funzioni intrinseche di HTML.  4 I colori del Web l colore costituisce un elemento importante nelle pagine Web. 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). mediante l'impiego dei fogli di stile.h2.html). inserendo le informazioni di stile direttamente nel tag HTML che si vuole modificare.com/ html/reference/color/propcolor. Questi colori primari. ma che sono poco comprensibili per un italiano (per un riferimento sui 16 colori predefiniti Le risposte alle domande di pag.html). ignorando l'attributo style. Flash o qualsiasi altro strumento sia stato usato per generare il testo-immagine) e trasformare l'imma- I 46/88 gine. importando all'interno di questa un foglio di stile residente in un file esterno.com/html/reference/color/named. Se volessimo invece modificare uno specifico tag all'inter- no di una pagina la sintassi diventerebbe: <h1 style=font-size: 16px.oreilly. verde e blu.

Il tag <img> inserisce l'immagine nella cella della tabella specificando mediante l'attributo src. perciò va usato con attenzione. I primi due sono compatibili con tutte le versioni di browser in circolazione. lo SVG (Scalable Vector Graphics). perciò lo vedremo affiorare gradualmente in futuro. Sono le uniche direttamente riconoscibili dai browser e hanno un formato fisso e difficilmente modificabile. mediante l'attributo align come allinearla rispetto al testo che segue direttamente la chiusura del tag <img> Allineare il testo all'immagine. Richiedono una notevole "intelligenza" di calcolo. 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. sostituzione ed eliminazione di interi elementi senza lasciare segno. JPEG e PNG. come ad esempio grafici. 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. salvato in uno dei tre formati direttamente riconoscibili dai browser: GIF. 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. Il fomato GIF (Graphics Interchange Format) è adatto per comprimere immagini che usino tinte unite e un numero limitato di colori (256). 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>). Per tale motivo bisogna conoscere i formati di file utilizzabili e sapere scegliere quello corretto in funzione del contenuto. su cui potremo continuare a intervenire con le nostre variazioni e correzioni e uno da pubblicare. rimpicciolimento. Le immagini vettoriali hanno invece la caratteristica di definire ciascun oggetto mediante coordinate geometriche e perciò ne consentono la modifica a piacere: ingrandimento. Esiste anche un formato vettoriale definito come standard nel 1999 dal World Wide Web Consortium (http://www. È anche molto difficile ingrandire l'immagine senza perdere qualità. come ad esempio il testo e le forme geometriche chiave (linea. tra cui la stessa Microsoft che lo ha scelto per Office 11. visto che l'ingrandimento viene realizzato mediante l'aggiunta di punti simulati matematicamente mediante una duplicazione 47/88 approssimata di quelli già esistenti. come Flash di Macromedia oppure Acrobat di Adobe. nel ridimensionamento dell'immagine oppure nel ritaglio di un particolare: tutte operazioni da realizzare mediante un programma di ritocco come Photoshop. Gimp e altri. mentre il terzo è stato supportato in modo imperfetto fino alla generazione 5. A differenza del testo. alle immagini fotografiche.4a lezione 5 Gestire le immagini l secondo tipo di contenuto tipico di una pagina Web sono le immagini. I 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. Image Ready. Fireworks. . magari presi da immagini diverse e sulla modifica del colore di quelli esistenti. Consente inoltre di creare semplici animazioni. Le variazioni possibili di un'immagine bitmap consistono nella modifica dei colori dei singoli pixel. È stato adottato da numerosi produttori di software. tutti i principali programmi di modifica delle immagini bitmap consentono di produrre un file di lavoro con alcuni contenuti vettoriali. riscrittura del testo. Si propone come alternativa evoluta al GIF. Nella gestione delle immagini. rettangolo) che viene quindi esportato in formato puramente bitmap al termine dell'elaborazione. 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. anche se di gran lunga preferibile agli altri due. ma può an. Qualsiasi operazione è di fatto un ritocco basato su collage di elementi. Nella pratica. È molto efficace nella compressione d'immagini con sfumature e toni a variazione continua. e vengono utilizzati solo per porzioni particolari di un sito non consultabili in assenza del plug-in. Sotto vediamo una parte della pagina che è stata utilizzata per realizzare la figura a fianco. non si trovano nella pagina HMTL. cioè del tipo di immagine che si vuole riprodurre. videate. 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. il percorso di destinazione e. Il formato JPEG (Joint Photographic Experts Group) s'indirizza. 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. concepito per la definizione vettoriale d'immagini bidimensionali e basato su XML. disegni schematici. w3c. In tale contesto. come indicato dal nome. Prevede diversi livelli di compressione con una perdita progressiva di dati e di qualità.x. In questo modo avremo due file distinti: uno di lavoro realizzato nel formato vettoriale tipico del programma. Sono anche particolarmente adatte per produrre animazioni.org). cerchio. 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. Il PNG (Portable Network Graphics) è nato dopo l'avvento dei principali browser e ha tratto beneficio dalle prime esperienze realizzate dai progettisti del Web.

Il metodo è semplicissimo: dovrete collegarvi al sito Internet www. a scapito della velocità di visualizzazione della pagina.68 In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis! Avete trovato interessante il nostro corso e volete prepararvi a mettere alla prova le competenze acquisite? Per farlo avrete bisogno di uno spazio vostro sul Web. il più importante registrar in Italia: nei prossimi mesi avrete a disposizione gratuitamente per un mese l’uso di uno spazio di hosting dedicato. L'uso dell'attributo alt costituisce un requisito per rendere il sito accessibile secondo le specifiche WAI (Web Accessibilità Iniziative http://www. Con top si allinea il margine superiore dell'immagine al margine superiore della prima riga di testo corrente. Nella lezione dedicata al Web design vedremo meglio come sfruttare ciascuno di essi. 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 riferimento che punti alla posizione del file che la contiene e che ne indichi le principali caratteristiche di visualizzazione. Potete però trovare una copia dimostrativa integrale di FrontPage 2002 sul CD GUIDA n. L'attributo align prevede cinque valori: il più comune. Può essere utile solo quando siamo sicuri che le versioni multiple della stessa immagine siano viste nella stessa sessione di navigazione. da dove le registrazioni verranno scontate in automatico del 40%. il browser può comporre la pagina immediatamente senza aspettare che l'immagine sia stata caricata per intero. il beneficio di caricare un solo file invece che diversi compensa i rallentamenti dovuti alla rielaborazione. Un esempio pratico del suo uso sarebbe <img src="/zzz/pcopenlogo. vuoi perché il navigatore ne ha disattivato la visualizzazione sul proprio browser. È rarissimo tro- vare siti che usino ancora immagini bordate perché il bordo è decisamente antiestetico e ormai inutile. com'era nelle nostre iniziali intenzioni. allinea l'immagine lungo il margine sinistro della finestra. 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. usato per indicare che all'immagine è abbinato un collegamento ipertestuale. magari perché sono nella stessa pagina. Poiché si tratta di un attributo che modifica l'impaginazione e non fornisce invece informazioni strutturali.gif" width="168" height="55" bor- der="0"> dove si dice che l'immagine pcopenlogo. 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. in quanto è in arrivo la nuova versione. Le registrazioni saranno comprensive di tutto quanto è indicato all’indirizzo http://we.html. Trovate un esempio HTML delle varie modalità nel file "Allineamento immagine" sul CD Guida. Di solito. contenuta in Office 11. Un altro attributo molto importante è align usato per allineare l'immagine rispetto agli elementi che la circondano. una tecnica particolarmente utile nei siti dinamici. è stato deprecato da HTML 4. Con right si ottiene naturalmente l'effetto opposto. 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. Un altro attributo importante.it. sapendo lo spazio da riservare.it . 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. lo sconto più alto oggi disponibile sul mercato). JPEG per le fotografie. poiché il browser userà automaticamente le dimensioni dell'immagine contenuta nel file. In più. Infine bottom allinea la base della prima riga del testo corrente alla base dell'immagine.org/WAI/) e sono ormai diventate obbligatorie in gran parte dei siti dell'amministrazione pubblica. Ecco quindi la nostra iniziativa. oltre ad una serie di altri servizi supplementari. lì dove vogliamo che l'immagine compaia.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.it /domains/allincluded. inserire il codice seguente: x6Wa3P nel box all’interno della pagina e a questo punto verrete inviati alla home page del sito di Register. che nasce in collaborazione con Register. tuttavia sono utili per velocizzare la visualizzazione della pagina. Il parametro middle allinea la base della prima riga di testo al centro dell'immagine. Per il servizio di supporto inviare le e-mail all’indirizzo support@register. Per il momento è sufficiente ricordare questa regola: GIF o PNG per grafici. Non è sempre una strategia vincente poiché costringe il browser a compiere un doppio lavoro: scaricare un file più grande del necessario e ridimensionarlo.gif si trova nella cartelletta "zzz" e che va visualizzata con una larghezza di 168 pixel e un'altezza di 55 pixel.w3. A tale scopo è sufficiente inserire nel codice HTML della pagina. dell'immagine rispetto agli elementi sui lati che c'interessano viene realizzata con maggiore precisione usando celle vuote nella tabella di layout.it/pcopen. vuoi perché non è in grado di vederla. Altezza e larghezza non sono indispensabili. Ciò permette di svincolare HTML e grafica di conservare tutte le immagini in una directory centralizzata.01 che consiglia di sostituirlo con una funzione equivalente dei CSS. Offre anch'esso la possibilità di creare semplici animazioni. 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).  FrontPage 2002 non è stato provato.register. Tuttavia i progettisti di siti si sono talmente abituati a utilizzarlo che non sparirà tanto presto dalla circolazione. 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. lasciando il testo fluire sulla destra.register. left. dove potervi esercitare nello sviluppo di siti campione su server reali. 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. L'attributo border serve a visualizzare o meno un bordo blu. senza bordo. tabella o altro elemento in cui si trova. In tal caso. Un'alternativa è longdesc che consente d'inserire un link a un altro documento che descriva il contenuto dell'immagine. Infatti. 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. immagini con tinte unite o animazioni. dal momento che per poter usare lo spazio di hosting è necessario disporre di un dominio.

al tempo stesso. come per qualsiasi altro tipo di pubblicazione su carta o altro supporto.01 • Cosa si può fare con i fogli stile • Quattro tipi di CSS • I colori del Web • Gestire le immagini • Esercizi • Ereditarietà e innesco a cascata • Proprietà di trasferimento dei parametri • Regole di ereditarietà • Selettori di classe • Websafe palette • Link ipertestuali • Tabelle d’immagini • Mappe immagine • Audio e video Le prossime puntate Lezione 6: Siti interattivi Lezione 7: Interazione sul server Lezione 8: Promuovere il sito . ma deve immancabilmente comparire nella stessa proporzione armonica degli elementi che contiene. 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. Tuttavia. assegnando dimensioni proporzionate e tracciando un percorso di lettura che guidi l'occhio del navigatore attraverso la pagina nella sequenza che noi desideriamo. Una pagina troppo IL CALENDARIO DELLE LEZIONI Lezione 1: Competenze e strumenti (disponibile integralmente sul CD) Lezione 2: Siti statici e linguaggio HTML il corso è sul CD n. consiste nel collocare gli elementi su una griglia ordinata.0 • Spiegazione dei tag HTML per una pagina vergine • Esercizi su come creare una pagina vergine e su come progettare un sito Lezione 3: Modelli di pagina e tabelle (disponibile integralmente sul CD) • La tabella come elemento strutturale • Progettare layout fluidi e statici • Costruire template con le tabelle di layout • NamoWeb Editor5: per siti statici 49/88 professionali • Dimensionare tabelle e celle fluide. vale a dire un professionista esperto nelle arti grafiche che ha dimestichezza con gli strumenti e le tecniche necessarie. Criteri di base La progettazione di una pagina Web. 69 (disponibile integralmente sul CD) • Progettare un sito statico • Progettare la pagina • Pagine HTML e marcatori • Strutturare i contenuti della pagina • Adobe GoLive 6. può essere bianco oppure avere il colore dello sfondo. allineamento spontaneo delle tabelle consecutive • Template con struttura complessa • Template con tabelle nidificate • Esercizi  Lezione 5: Design e multimedialità • Elementi di design per il Web • La ruota colore • Grafica e formati di immagini per Internet Lezione 4: HTML 4. Abbiamo già affrontato gli aspetti progettuali per stabilire le finalità del sito e il tipo di pubblico che lo visiterà.5a lezione  A scuola con PC Open Progetto Web Master di Roberto Mazzoni 1 Elementi di design per il Web a creazione stilistica di un sito è solitamente appannaggio di un Web designer. da sinistra a destra e dall'alto in basso. La vera arte del design consiste in realtà nel dosare gli elementi e gli spazi bianchi. 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). Lo spazio è un elemento essenziale e comunque preponderante nella pagina. Di conseguenza. siamo pronti a disegnare la pagina vera e propria. funzionale. dimensionare tabelle con celle miste.01 e CSS (disponibile integralmente sul CD) • Stile e struttura: usare i tag HTML nativi • Il deprecato tag font • I marcatori per formattare il testo • Gestire gli spazi nel testo • CSS e HTML 4. Una volta compiuto questo primo passo. il Webmaster può trovarsi nella necessità di fare tutto da solo oppure di realizzare nel concreto il progetto impostato da altri. deve conoscere alcuni dei criteri da seguire per realizzare una pubblicazione elettronica che sia di buon livello estetico L e. Rispetto alla carta.

vale a dire che si sposino bene insieme. È anche importante che i colori presenti sulla pagina siano tra loro compatibili. tenui. posizione e dimensione. a quel punto arriveremo a un distillato di stile efficace. Inoltre la scelta della posizione serve anche a bilanciare il "peso" di un elemento così da non rendere la pagina sbilanciata. Dev'essere soprattutto leggibile e bisogna distinguere visivamente il testo corrente dai titoli. ma ci saranno alcuni elementi che non cambiano. Parlando di colori. L'allineamento è un criterio fondamentale dell'impaginazione tipografica e si ripropone anche sul Web. centrato rispetto al testo che invece è allineato a sinistra. le barre di navigazione. Gli sfondi colorati vanno utilizzati con parsimonia. come gli sfondi e le cornici. Una delle tecniche seguite nel design editoriale è quella di aggiungere tutto ciò che riteniamo sia necessario e. una barra di navigazione globale. che sconcertano il navigatore impedendogli di capire dove sia capitato e dove possa andare da quel punto. Mantenendo invariati questi elementi.5a lezione La home page di un sito progettato con ordine. Dosare il colore Coerenza. tuttavia è facile trovare siti che omettano la sottolineatura e che adottino colori diversi dal blu originale. eccetera. La coerenza si riferisce alla costanza con cui gli elementi di riferimento si ripetono di pagina in pagina conservando aspetto. come ad esempio il logo. La ripetizione è simile alla coerenza. presente in tutto il sito e via dicendo. Questi ultimi sono storicamente blu e sottolineati. alcuni animati. 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. migliore sarà il risultato finale.com ossia un sito dedicato a promuovere o bocciare le varie soluzioni di design che si trovano sul Web. specie se decorativi. Usate tinte poco intense per le grandi aree. 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). Il sito avrà sicuramente diversi modelli di pagina (template). una didascalia di solito si trova vicino all'immagine a cui si riferisce. La regola d'oro del buon designer è che meno elementi ci sono. così da non sopraffare l'attenzione del navigatore. La posizione degli elementi identifica la sequenza con cui vogliamo che il navigatore li veda. solo per evidenziare aree particolari della pagina e mantenendosi comunque su tinte pastello. 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. gli elementi di navigazione si trovano sui bordi laterali oppure in alto e in basso. Il testo. Ad esempio. 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. L'importante è che i link abbiano caratteristiche costanti nell'intero sito e che siano riconoscibili a colpo d'occhio per quel che sono. Questo è il famoso www. solitamente preponderante. i link ipertestuali. usano generose porzioni di bianco benché mostrino in home page una quantità impressionante di link. È anche possibile sfruttare variazioni di allineamento rispetto alla norma per mettere in evidenza elementi particolari. 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. un piccolo motivo grafico che contrassegna ripetitivamente un certo tipo di contenuto. ma esistono anche strumenti che aiutano a scegliere le combinazioni adatte. ma consiste nel riproporre alcune informazioni che vogliamo far ricordare al navigatore. È un garbuglio di colori e di elementi. lo sfondo. posizione e ripetizione Queste sono le quattro parole chiave da tenere a mente quando si progetta la grafica di un sito. dovrebbe essere scuro su sfondo chiaro o viceversa. Persino i portali più importanti. Ad esempio se avessimo le immagini tutte da una parte e il testo dall'altra non percepiremmo un effetto armonico. si trasmetterà un'impressione di ordine e si faciliterà l'orientamento del navigatore che potrà concentrarsi sui contenuti. In alcuni casi fornisce informazioni anche sul tipo di contenuto.webpagesthatsuck. il che sarebbe  . Notate la struttura regolare. e richiamare poca attenzione. e via di seguito. allineamento. La pagina sembrerà più chiara. noterete. Il loro abbinamento è un'arte con regole precise di cui parliamo più avanti nell’articolo. siano esse un brano di testo che spiega discretamente la natura del sito. dovrete anche decidere se uniformarvi alla Websafe palette (vedi la scorsa lezione). dalle didascalie e dai link ipertestuali. una volta soddisfatti. elegante e leggibile. Il testo e le immagini devono mantenere un allineamento regolare tra loro e rispetto alla griglia di layout. Graficamente divertente. togliere tutto quel che riusciamo senza alterare la funzionalità del nostro design.

L'utility è disponibile al seguente indirizzo: http://www. Per un'analisi completa delle armonie cromatiche rimandiamo al testo Il colore nel Web di Molly E. e mostrarli ciclicamente al posto dell'immagine di partenza. 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. PDA. Ancora più visibili dei colori sono le fotografie e gli elementi grafici. Se invece volete realizzare un effetto meno contrastato potete scegliere colori analoghi che si trovino immediatamente a fianco del colore di riferimento scelto.  Questa è un riproduzione della ruota colore per il Web. ma bisogna ricordarsi di aggiungere sempre un testo che spieghi la funzione di ciascuna. ma per il momento la scelta per le animazioni sul Web si concentra su GIF. men- L’ 51/88 tre il colore complementare del rosso è il ciano (azzurro). La combinazione dei due produce un forte impatto visuale. pur mantenendo l'armonia dell'insieme. i cosiddetti complementari separati L'utility SLUGS. La ruota serve per scegliere accostamenti armonici. La scelta del colore di riferimento. ma che in prospettiva diventerà parte integrante dei browser. non disponibili a tutti i navigatori benché gratuiti.5a lezione  consigliabile per lo meno negli elementi di navigazione. Combinando i tre colori primari in diverse percentuali si ottengono tutti gli altri colori. utilizza un colore primario diverso: il verde al posto del giallo. ossia definite per mezzo di formule matematiche. Holzschlag. eccetera) e difficili da aggiornare. balzano all'occhio più di qualsiasi altra cosa e contribuiscono a differenziare il Web dalla carta stampata. Il colore complementare del blu ad esempio è il giallo.com. vediamo che il giallo è stato sostituito dal verde come colore primario.com/asp/ hkp. un programma che produce animazioni grafiche di natura vettoriale. poi. Nel Web usiamo una ruota colore differente basata sul modello RGB che. arancione) oppure freddo usando i colori dell'acqua e dell'aria (blu e verde). per il blu sono il blu chiaro e il viola. che compare al centro. vi guida nella selezione dei colori armonici. icona. Ciascuna di questi richiede tuttavia speciali plug-in oppure veri e propri applicativi. Il GIF animato è facile da realizzare e compatibile con qualsiasi browser.asp?f=cmslugs nel caso di Flash è spesso integrato nelle versioni più moderne dei principali browser. Ogni colore primario ha un colore complementare che si trova nella posizione immediatamente opposta sulla ruota. Rispetto alla ruota colore tradizionale. infine il colore complementare del verde è il violetto. ma ne complica la gestione. Qui gli esperti di usabilità sono concordi: mai superare i due elementi per pagina. gli analoghi (near). alla pari di quella tradizionale. giallo e blu) e li pone in relazione ai loro complementi e omologhi.chamisplace. quel che conta è ricordare che i colori vanno abbinati in modo armonico seguendo regole ben precise. anche se a noi potrebbe risultare del tutto evidente. 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.  . SVG sarà probabilmente uno dei formati di riferimento del futuro. e creando bordi smussati. 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. eccetera. e la relativa evoluzione PNG. La ruota colore del Web. Ciò permette di ottenere risultati molto più raffinati rispetto al GIF con file molto più leggeri. gli split complementari e la triade (altri due colori che sono equidistanti sulla ruota rispetto a quello di riferimento). e su Flash. specie se tridimensionali. Nel caso del giallo i colori analoghi sono l'arancione e il verde chiaro. è importante per stabilire la natura del sito. Presenta solo l'inconveniente di appesantire il file che lo contiene. Nelle arti grafiche. pulsante o barra di navigazione. Immagini in movimento per dare vita alla pagina Il prossimo elemento a salire nella nostra graduatoria di visibilità sono le immagini in movimento. L'uso delle icone può essere invece esteticamente efficace. come abbiamo visto. Avrete un effetto caldo usando i colori del fuoco (rosso. edito da Apogeo. poiché non sempre il navigatore capisce il significato dell'icona semplicemente guardandola. 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.cnet. per vedere il colore complementare (inverse). mantenendo inalterati gli altri due: rosso e blu. definisce una serie di relazioni specifiche tra i diversi colori al fine di ottenere precisi effetti di armonia e di contrasto. mentre rimangono invariati gli altri due: blu e rosso. esiste un oggetto chiamato ruota colore (colorwheel) che identifica i tre colori primari (rosso. Il secondo elemento di animazione molto diffuso è Macromedia Flash. da utilizzare in abbinamento all'editor HTML-Kit che abbiamo presentato all'inizio di questo corso. Le fotografie aggiungono anche informazioni di contenuto. 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". 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. tutti dello stesso formato. L'uso di grafica per le barre di navigazione ne aumenta la visibilità. 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). Il contrasto e gli abbinamenti vanno studiati basandosi sui rapporti esistenti in natura. Esistono soluzioni di animazione ancora più complesse che prevedono l'inserimento di filmati o di sequenze prodotte con altri software. L'effetto tridimensionale è facilmente realizzato aggiungendo un'ombra alla figura. Basta selezionare il colore di riferimento. ma è bene ricordare che ogni immagine aggiunta aumenta il tempo di scaricamento della pagina. Gli elementi grafici 3D sono invece spesso una parte integrante del sistema di navigazione del sito. Esistono diverse altre combinazioni per le quali vi rimandiamo all'articolo Color Harmony pubblicato sul sito http://builder.

Già era difficile garantire una ragionevole uniformità tra CRT di marca e tipo diverso. Ciò significa che. 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. i programmi di fotoritocco se la cavano benissimo nel togliere informazioni per rimpicciolire. Infatti. con la diffusione progressiva dei monitor LCD e dei notebook. ma che producono un effetto finale posticcio. ne del risultato. se aveste deciso di usare il comunissimo formato JPEG. Si presta particolarmente per la codifica di disegni e grafici. Gode del supporto di tutti i browser in circolazione. tra le diverse famiglie di computer e anche semplicemente nella calibrazione dei due monitor produrranno variazioni anche molto vistose. 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. comunque esistono. Il primo passo consiste nel conoscere lo strumento che dovrà visualizzare la nostra immagine. Una simile operazione prende il nome di "ottimizzazione" e costituisce un'arte di per sé stessa. 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. viene compressa molto meglio della prima. Viceversa. a parità di grandezza visiva. Le differenze tra i browser. così da apparire accettabili sullo schermo di un PC. Quest'ultima codifica le variazioni di colore registrate su ciascuna riga orizzontale. Inoltre la compressione offerta da GIF è di tipo lossless vale a dire che non comporta la perdita di dati. Va comunque notato che i programmi più moderni consentono di eseguire una compressione con perdita anche con il formato GIF al fine di  . il file visualizzato sullo schermo sarà di quattro volte più piccolo rispetto a quello inviato alla stampante. con le righe orizzontali. ora con gli LCD le differenze tra modelli diventano macroscopiche. Pertanto. pur avendo identiche dimensioni e numero di colori 52/88 chiare del dovuto. come invece accade nel caso del JPEG. della qualità e del numero di colori presenti al suo interno. bisogna evitare accostamenti di colori troppo vicini tra loro. Il difetto di questo formato è di perdere informazioni ogni volta che si salva l'immagine. lasciando che poi l'immagine si adatti automaticamente ai vari display. anche se non si eliminano punti o non la si modifica in alcun modo. ma di solito si tiene comunque valido il valore di 72. vale a dire il personal computer. Attenzione anche alle differenze tra Linux e Windows che. con scarso contrasto. Esiste una prima differenza fondamentale tra le diverse famiglie: il Macintosh tende a mostrare le immagini più chiare rispetto alle macchine Windows. mentre la gran parte delle immagini predisposte per la stampa su carta ha una risoluzione di 300 punti per pollice. Nella scorsa lezione abbiamo visto come inserire e allineare un'immagine all'interno di una pagina HTML. 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. l'elaborazione e il salvataggio continui della stessa immagine ne ridurranno progressivamente la qualità. nel creare immagini da zero. 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. Infatti. 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. Mantenere una copia dell'originale serve anche per poter realizzare diverse varianti della stessa immagine partendo sempre dalla situazione migliore. L'eclettico GIF La risoluzione corretta Lo schermo di un computer visualizza tipicamente 72 punti per pollice. Essa combina la scelta del formato di memorizzazione più adatto al tipo d'immagine e la definizione della dimensione. Dunque la scelta e la corretta gestione del formato costituisce un passo fondamentale nella preparazione di elementi grafici per il Web. la grafica costituisce il contenuto più comune per un un sito Web. per quanto meno evidenti.3 Grafica per il Web opo il testo. ma una volta che le hanno eliminate queste non possono essere ricostruite se non mediante formule matematiche che sintetizzano i punti mancanti. È bene salvare la copia di dimensioni ridotte separatamente perché non sarà più possibile tornare alla risoluzione originale compiendo il percorso inverso. 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. ora vediamo come costruirne una al fine di ottenere il miglior risultato possibile. Una variante sul tema è rappresentata dai monitor di grandissime dimensioni che visualizzano 96 punti per pollice. dunque vediamo che la seconda immagine. Perciò se lavorate su un Macintosh dovreste cercare di generare immagini che sembrino un po' più D Queste due immagini sono composte da colori pieni e perciò si adattano particolarmente alla compressione in formato GIF. 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. Inoltre.

poi.adaptive palette) oppure provenire dalla tavolozza di sistema utilizzata sul particolare computer che dovrà visualizzare l'immagine. Un esempio classico per vedere la differenza consiste nel comprimere un'immagine a strisce verticali e confrontarla con la stessa immagine a strisce orizzontali. Nella finestra a fianco abbiamo ridotto i colori a 16 e la dimensione è scesa a 3. ma che perde la possibilità di utilizzare le sfumature di arancione e di blu per realizzare l'antialiasing come vedremo. Il logo è ancora riconoscibile benché il magenta e il rosso non siano più fedeli e la scritta abbia cambiato colore.103 Kbyte. su sfondo uniforme: la seconda.5a lezione  ridurne le dimensioni oltre quel che si riesce a fare agendo sul numero di colori. 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.434 Kbyte. il formato si limita a registrare il valore iniziale e il numero di pixel per cui deve essere ripetuto. 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. meno di metà del file originale. pur contenendo lo stesso numero di pixel e di colori. usata da ImageReady e Photoshop). Qui vediamo anche i brutti risultati sul testo del formato di compressione JPEG.105 Kbyte. Nella prima finestra abbiamo una versione con palette selettiva a 32 colori (ce ne sono 17 in totale nell'immagine) che pesa 2. 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. Nella seconda finestra in alto abbiamo la stessa immagine ridotta però a 2 colori (il minimo) che pesa 1. Nelle altre due finestre abbiamo utilizzato il formato JPEG con qualità bassa (30) e bassissima. di "ottimizzarla" intervenendo su due parametri fondamentali: il numero di colori nella palette e la presenza o meno del dithering. ingrandita per osservare meglio i contorni del testo.178 Kbyte. avrà una dimensione mol- to inferiore perché le variazioni su ciascuna riga saranno pochissime (vedi le figure di esempio). comprimendo l'immagine senza perdere l'effetto aliasing in modo apprezzabile. Ciò significa che immagini con ampi spazi di tinte unite vengono compressi con grandissima efficienza perché quando il colore non cambia. Le dimensioni sono rispettivamente 6. La quarta versione con soli 4 colori è diventata naturalmente irriconoscibile . 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. 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. Infine abbiamo una quinta possibilità che consiste nel creare una palette che dà priorità ai colori che sono più facilmente percepibili dall'occhio umano. ma notiamo una leggera alterazione del petalo Magenta in basso a destra. Adobe Imageready la chiama invece Selettiva).52 Kbyte. Qui siamo scesi a 8 colori con una dimensione di 2. consiste nel costruire una tavolozza adattata che contenga anche colori Websafe. Il formato GIF comprime l'immagine esaminando in orizzontale il contenuto di ciascuna riga e codificando qualsiasi variazione di colore. Volendo è possibile scendere a 8 bit. in basso a sinistra.386 KB. Questi possono essere diversi ogni volta e costituire un campionamento di quel che l'immagine contiene (tavolozza adattata . Una quarta soluzione. abbastanza comune nei programmi di grafica moderni. Passiamo alla terza finestra. Il limite importante del formato GIF sta nel fatto che può memorizzare al massimo 256 colori per ogni immagine. 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. la dimensione dell'immagine è di 5. perciò entrambe superiori al formato GIF e con una perdita di qualità vistosa Qui vediamo la stessa immagine precedente.06 Kbyte e 4. indipendentemente dalla frequenza con cui vengono usati nell'immagine (palette Percettiva. L'efficienza diminuisce al crescere degli elementi di colore diverso che tagliano l'immagine in verticale e precipita in presenza di sfumature di colore. Qui vediamo una scritta di testo che si adatta particolarmente bene alla codifica GIF.

si può menta perciò il numero di co. La tavolozza esatattenuare i bordi netti dei ca.tavolozza di 256 colori. diventerà trasparente e lascerà intravedere il colore di sfondo impostato via HTML per l'elemento HTML che contiene l'immagine (tabella o pagina). Può trattarsi di un colore qualsiasi: una volta selezionato. 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.di partenza.vamente presenti nell'immagitialiasing. 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. In pratica il soggetto dell'immagine si mescola con la pagina. s'inserisce. 64. La riduzione masing viene realizzato automati. nel caso volessimo cambiare lo sfondo della pagina. è necessario scegliere come colore di trasparenza lo stesso che attribuiremo metà dell'oriallo sfondo della nostra pagina Web. arrivando a dimensioni che sono anche meno della Per creare un bottone con sfondo trasparente. Un parente satto numero di colori effettiprossimo del dithering è l'an. 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. 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.che abbiamo già pochi colori neriamo l'immagine.gramma di generare una paletgliorano soprattutto le even. 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.scorciatoia e chiedere al progendo informazioni che mi. ma in modo poco visibile.apprezzabili solo su immagini tivabile nel momento in cui ge. Il dithering è codifica GIF e produce effetti direttamente attivabile e disat.ne. lori.semplicemente le posizioni mensioni. Esistono due metodi per realizzare tale soluzione. alterandone l'aspetto.nuale forzata dei colori. Un'operazione facilissima: basta indica  . La prima consiste nell'attribuire la trasparenza a uno dei colori contenuti nella palette dell'immagine. ma incrementa comunque eccetera. Assegniamo al rettangolo che lo circonda un colore identico a quello che sarà lo sfondo della pagina.ta consente infatti di eliminare ratteri tipografici di grandi di. della quale possono esistere contemporaneamente quattro varianti. cioè contenente l'etuali sfumature. riducendone l'effet. in questo caso il blu.camente se esistono colori a sufficienza. che consiste nell'u. Prendiamo l'esempio di un bottone che vogliamo inserire nella nostra home page. perciò sarete matematicamente sicuri del risultato.non occupate all'interno della to scalettatura. l'antialia.ne. Per far questo bisogna conoscere bene i colori HTML e la Websafe palette in modo da non avere differenze visibili. saremmo anche costretti a modificare ogni singolo bottone. La differenza tra i due non sarà visibile sul nostro computer e l'immagine si fonderà perfettamente con il resto della pagina.quindi scendere a 128. permette di scalare la dimensione del file in modo controllato. Di default si parte con una senti nell'immagine. invece. Nell'esempio in figura vediamo che Fireworks MX ha queste scelte. Le due strade non sono sare sfumature di colore per equivalenti. 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. 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. GIF trasparente e animato Due varianti preziose del formato GIF ci permettono di creare effetti grafici ancora più interessanti. Tuttavia. Non au. oppure prendere la la dimensione del file aggiun. Questo genere di tecnica è utile quando un'immagine deve fondersi con la pagina senza mostrare il classico bordo rettangolare. Potete anche bloccare particolari colori che non debbano essere eliminati dalla scalatura. Il primo consiste semplicemente nel creare uno sfondo per l'immagine che sia identico a quello della pagina.te "esatta". 32.

Nella compressione non si perdono informazioni e perciò è possibile elaborare e salvare ripetutamente lo stesso file senza scadere in qualità. nel secondo caso. Nella prima si nota un bordo biancastro e alcuni segni spuri che disturbano l'immagine. 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. che sono invece assenti dal secondo re il colore prescelto per la trasparenza e il gioco è fatto. 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. molto migliorato qualitativamente poiché realizzato a vari livelli. Un'immagine interlacciata compare sul video un po' per volta. 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. un'immagine JPEG sarà sempre più lenta da visualizzare di un'immagine GIF di pari dimensioni. la sequenza d'immagini apparirà come un singolo elemento e verrà inserita nella pagina HTML come qualsiasi altra immagine. Nel caso in cui lo sfondo fosse bianco e lo rendessimo trasparente per poi montare l'immagine che ne risulta su una pagina blu. 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. come Fireworks. offre l'effetto di trasparenza. Il suo difetto sta nel supporto ancora parziale offerto dai vari browser. JPEG per le fotografie Questa foto è riprodotta in quattro formati diversi. 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. Sembra un controsenso. codifica 16 milioni di colori e non consente l'animazione. Risulta invece pessimo per le immagini con contorni netti e colori pieni. soprattutto alla trasparenza variabile. da uno sfondo blu identico a quello previsto per la pagina. proseguendo poi con la costruzione della pagina mentre l'immagine termina di caricarsi e diventa perfettamente visibile. senza che tuttavia tale perdita risulti evidente all'occhio. usato di rado perché appesantisce il file e di fatto aggrava il problema che vorrebbe risolvere. PNG tuttofare Il formato Portable Network Graphics nasce per rimpiazzare GIF e per sostituirsi a JPEG in alcune circostanze. 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. L'ultima variante del GIF consiste nel formato interlacciato. specie quando si vuole l'effetto trasparenza per un'immagine fotografica. 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. Offre il massimo rendimento in tutte le situazioni in cui esistano sfumature di colore e passaggi tonali morbidi.5a lezione Qui vediamo la stessa immagine a cui è stato attribuito uno sfondo trasparente partendo. Permette anche di definire l'intervallo di tempo tra un'immagine e la successiva. La tecnica sveltisce la navigazione di pagine con immagini di grandi dimensioni.  . dallo sfondo bianco originale e. 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. anche se sfocata. regno incontrastato del formato GIF. Il primo è l'orginale salvato in formato TIFF. 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). la saldatura sarebbe perfetta. Per tale motivo. Il formato consente di creare un ciclo ripetitivo che prosegue senza interruzione oppure termina dopo un certo numero di ripetizioni. A differenza del formato GIF. nel primo caso. 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. Per le fotografie il JPEG non è secondo a nessuno e garantisce efficienze inarrivabili dagli altri due formati: GIF e PNG. per poi perfezionarsi non appena il browser ne completa l'elaborazione. In termini pratici. ma in realtà deriva dalla necessità pratica di creare una transizione uniforme tra i bordi arrotondati dell'immagine e lo sfondo circostante. Alla pari di GIF. usato nel mondo dell'editoria perché comprime senza perdere informazioni. Partendo invece da uno sfondo blu che venga poi reso trasparente. A differenza del GIF. 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. Viene utilizzato come formato interno da alcuni programmi di elaborazione grafica. È possibile creare un GIF animato anche con sfondo trasparente. In quest'ultimo caso l'immagine compare immediatamente nella pagina. 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. salvo quando si esagera con la compressione. Potendo arrivare a 48 bit di colore e 16 bit di scala di grigio è possibile utilizzarlo anche in sostituzione del JPEG.

Questi ultimi prendono il nome di collegamenti ipertestuali e consentono di saltare da una posizione all'altra nella stessa pagina. la sintassi sarà la seguente: <a name="pippo">brano di testo o immagine</a>. In ogni caso. anziché alla prima riga. In entrambi i casi. All'interno di un sito. In alternativa è anche possibile aprire una nuova finestra e assegnarle un nome di fantasia: target="pippo". La più comune prende il nome di “ancora sorgente” perché identifica il punto di partenza del collegamento e ne fornisce la descrizione della destinazione. 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. Tale punto può coincidere con un qualsiasi elemento HTML (paragrafo. come vedremo più avanti. Il secondo invece invierà qualsiasi altra nuova pagina nella stessa finestra. ma torna utile anche quando vogliamo inserire un link esterno e non vogliamo che il navigatore abbandoni il nostro sito. La loro caratteristica essenziale consiste nell'identificare un punto del documento come destinazione di un collegamento origine. Da notare che esiste tuttavia una differenza sostanziale tra "_blank" e "pippo". Notate che abbiamo usato il simbolo di cancelletto prima di "pippo" per indi.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. Esistono due modi per inserire un link ipertestuale in una pagina Web: nella forma di testo e nella forma di immagine. sono racchiusi tra i tag <a> e </a>. Nel caso di link applicati a un'immagine la sintassi rimane la stessa salvo aggiungere il marcatore <img>. cioè il punto da cliccare. La sintassi da usare nel caso di un elemento HTML è la seguente <h1 id="pippo">brano di testo </a>. 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. In questo caso la nuova pagina verrà aperta in una nuova finestra denominata "pippo". sostituendo il contenuto esistente. In tal caso basterà impostare target="_blank" per far aprire al browser una nuova finestra in aggiunta a quella da cui siamo partiti.htm che si trova nella cartelletta Lezione_5 subito sotto di noi. 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. denominato “ancora” il quale a sua volta esiste in due varianti. Vediamo un esempio sempre tratto dal nostro corso: <a href="Lezione_5/Lezione_5. I Ancore sorgente Il testo o l'immagine che delimitano il "punto caldo" (hot spot) del collegamento sorgente. si sfrutta lo stesso marcatore. ma il più importante è target che specifica dove inviare la nuova pagina che stiamo per aprire. Nel caso invece di un brano di testo o di un'immagine. La seconda variante è invece l'ancora di destinazione utile per marcare il punto di arrivo di un particolare link all'interno della pagina. 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). da una pagina a un'altra dello stesso sito e da un sito all'altro. È il classico link che troviamo nella maggior parte delle pagine Web e sul quale clicchiamo per saltare a un'altra pagina.htm">quinta lezione</a> vediamo che la frase che comparirà sulla pagina è "quinta lezione" e quando ci cliccheremo sopra. È infatti preferibile comporre documenti brevi che puntino ad altri documenti altrettanto brevi che non creare pagine interminabili che necessitino di riferimenti interni. Basta cliccare sul link e si viene immediatamente proiettati verso la destinazione richiesta.gif" width="100" height="100" border="0"></a> ci dice che cliccando su immagine nella pagina corrente saremo trasportati nella pagina Lezione_5. con un brano di testo (anche semplicemente uno spazio bianco) oppure con un'immagine. titolo). 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). la gran parte dei link saranno relativi. 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. 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). Supponiamo di voler creare un link in cima al documento che faccia scorrere il testo nella finestra fino a raggiungere l'ancora di destinazione.htm"><img src="Lezione_5/immagine. È un attributo indispensabile nei frame. Notate che la coppia di tag <a> e </a> racchiude completamente il marcatore <img> con tutte le informazioni relative all'immagine. Il primo determinerà ogni volta l'apertura di una nuova finestra che si aggiungerà a quelle già presenti. Esistono vari altri attributi. Si sfrutta l'attributo id tipico delle versioni più recenti di HTML per identificare l'elemento a cui vogliamo puntare. La sintassi sarebbe <a href="#pippo">testo da cliccare</a>. queste ancore possono tornare utili in alcune situazioni. 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. Ancore di destinazione Le ancore di destinazione sono usate abbastanza di rado.

vediamo che contiene una tabella che salda tra loro testo. e creare i cosiddetti rollover. Prendiamo ad esempio il sito italiano www. Nella parte alta di navigazione. Oggi esistono numerosi programmi con strumenti dedicati alla frammentazione automatica delle 5 Tabelle d’immagini bbiamo già visto che le tabelle svolgono un ruolo essenziale per costruire il layout di una pagina Web. Se scomponiamo la sua home page. Realizzare il tutto in grafica vorrebbe dire In questa pagina presa dal Web (www.film. Notiamo le celle e le singole immagini che vi sono contenute. Mediante la frammentazione. vale a dire cambiamento d'immagine al passaggio del mouse.film. sarà possibile inviare un messaggio direttamente a quel destinatario.html si aprirà nella finestra del browser esattamente nel punto contrassegnato dall'ancora "pippo". Il documento. Potremo anche animare alcune porzioni dell'immagine. La sintassi è la seguente: <a href="mailto:pippo@pippo. l'immagine sembra completamente ricomposta e la tabella sottostante sarà invisibile. 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ò. Nel caso di un link contenuto in un documento esterno la sintassi sarebbe: <a href="documento. 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.it che parla di novità cinematografiche.it) vediamo cerchiate in rosso e in verde tutte le immagini che sono state unite mediante la tabella invisibile che regge l'intera pagina. L'o- A perazione richiede una certa dimestichezza con i programmi di grafica e prevede la suddivisione di un'immagine in tanti riquadri di dimensione variabile. diventerà possibile abbinarle un collegamento ipertestuale così da creare un sistema di navigazione grafico (vedi l'esempio). 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.html#pippo">testo da cliccare</a>. Tuttavia se porteremo il cursore sulle diverse porzioni vedremo che contengono link ipertestuali attivi . cliccandovi sopra. Si tratta di una funzione molto usata per facilitare il contatto con il gestore del sito o con altre persone. Il primo caso è il più comune e lo troviamo nella gran parte dei siti.5a lezione  care che si tratta del nome di un'ancora di destinazione. possiamo stabilirne le posizioni e gli allineamenti. Poiché ogni singola porzione dell'immagine sarà contenuta in una cella indipendente e sarà un'immagine autonoma. Inserendo brani di testo e immagini entro le celle di una tabella invisibile.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. 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. che saranno uniti mediante una tabella così da ricomporre visivamente l'immagine originale senza lasciar trasparire la tabella sottostante.  appesantire la pagina e complicare qualsiasi successiva modifica del testo. Supponiamo infatti di avere una figura che contenga ampi spazi a tinta unita con magari porzioni di testo al loro interno. creando un GIF animato per quel particolare frammento. pulsanti navigazione e testatine grafiche (vedi la figura). invece. A ciascuna possiamo assegnare un link ipertestuale così da creare un elemento grafico di navigazione Una volta visualizzata nel browser. La frammentazione (slicing) di un’immmagine comporta notevoli benefici anche nel regolare il peso della pagina. fotografie. il riquadro nero. possiamo rimpiazzare con un semplice sfondo HTML tutte le por- zioni dell'immagine che hanno una tinta unita e che magari contengono testo.com".

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. Calcolare le coordinate a mano sarebbe un'impresa non da poco. Oltre a essere molto più complicate da realizzare delle mappe lato client. 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. un link ipertestuale in modo tale da trasformare l'immagine in un elemento di navigazione. trascina con sé tutte le imprevedibilità delle tabelle e non si presta a layout complessi. Le mappe immagine possono essere di due tipi: il primo. In pratica tracciamo sull'immagine una mappa invisibile. magari di forma astratta. ma fortunatamente tutti i principali editor HTML visuali prevedono strumenti che semplificano moltissimo questa operazione. Esiste un'alternativa che consiste nell'assegnare all'immagine che dovrà fungere da elemento di navigazione una serie di coordinate che identificano aree cliccabili.   Ottimizziamo l'immagine già elaborata prima. 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. restituendo l'indirizzo di link corretto. calcolati partendo dall'angolo superiore sinistro dell'immagine.01. 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. lasciando al server medesimo il compito d'interpretare l'azione dell'utente sulla mappa. 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- A 58/88 pa immagine (image map) nella pagina. cerchio e poligono . Il secondo metodo. attribuiremo un link ipertestuale. ImageReady e Fireworks MX. 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.  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. Durante la fase di esportazione. poi. Ciò consente al browser di fornire informazioni sui link associati a ciascuna zona e costituisce il metodo di mappatura raccomandato dalle specifiche HTML 4. Con questo semplice accorgimento. A ciascuna di tali aree. rettangolare o poligonale. L'unione dei vari blocchi in modo da riprodurre visivamente l'immagine originale sulla pagina Web richiede l'impiego di una tabella di layout. A ciascuna di queste associamo. 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). poi. in particolare Photoshop. Il sistema è tuttavia complesso. che è anche il più comune. già dall'interno del programma di grafica. indicando le coordinate in pixel dei vertici delle varie forme. Le zone possono avere tre forme: circolare. la dimensione complessiva della pagina è passata da 66 a 54 Kbyte. l'effetto rollover e generare automaticamente la tabella HTML finale. 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.5a lezione immagini. usato in origine. prendeva il nome di mappe immagine lato server e depositava le coordinate sul server che ospitava il sito. Riconosciamo le tre forme consentite: rettangolo. È sufficiente posizionare le guide di taglio per identificare le varie porzioni e in alcuni casi è anche possibile assegnare.

allineamento spontaneo delle tabelle consecutive • Template con struttura complessa • Template con tabelle nidificate • Esercizi Lezione 4: HTML 4. liste puntate e nume- IL CALENDARIO DELLE LEZIONI Lezione 1: Competenze e strumenti (disponibile integralmente sul CD) Lezione 2: Siti statici e linguaggio HTML il corso è sul CD n. comprensibile al personal computer. dimensionare tabelle con celle miste. L’HTML è un linguaggio di definizione della pagina che permette di impostare la posizione di testo ed immagini in una pagina Web. Come avrete avuto modo di apprendere nelle lezioni precedenti del nostro corso. 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.01 • Cosa si può fare con i fogli stile • Quattro tipi di CSS • I colori del Web • Gestire le immagini • Esercizi • Ereditarietà e innesco a cascata • Proprietà di trasferimento dei parametri • Regole di ereditarietà • Selettori di classe • Websafe palette Lezione 5: Design e multimedialità (disponibile integralmente sul CD) • Elementi di design per il Web • La ruota colore • Grafica e formati di immagini per Internet • Link ipertestuali • Tabelle d’immagini • 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: Interazione sul server Lezione 8: Promuovere il sito . La terza categoria di linguaggi di programmazione è composta dai linguaggi interpretati: in questo caso.01 e CSS (disponibile integralmente sul CD) • Stile e struttura: usare i tag HTML nativi • Il deprecato tag font • I marcatori per formattare il testo • Gestire gli spazi nel testo • CSS e HTML 4. 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). mediante l’utilizzo I dei cosiddetti compilatori. I linguaggi interpretati pos- sono quindi essere considerati come una sorta di “estensione” dell’HTML. senza alcun tipo di codifica: sta al browser Internet interpretarlo ed eseguire le istruzioni elencate. erroneamente definito come tale). 70 (disponibile integralmente sul CD) • Progettare un sito statico • Progettare la pagina • Pagine HTML e marcatori • Strutturare i contenuti della pagina • Adobe GoLive 6. citiamo Java: nato per affiancare l’HTML. di posizionare tabelle. il codice sorgente viene proposto in chiaro.0 • Spiegazione dei tag HTML per una pagina vergine • Esercizi su come creare una pagina vergine e su come progettare un sito Lezione 3: Modelli di pagina e tabelle (disponibile integralmente sul CD) • La tabella come elemento strutturale • Progettare layout fluidi e statici • Costruire template con le tabelle di layout • NamoWeb Editor5: per siti statici 59/88 professionali • Dimensionare tabelle e celle fluide.6a lezione  A scuola con PC Open Progetto Web Master di Michele Nasi 1 I linguaggi di programmazione linguaggi di programmazione si dividono essenzialmente in tre grandi gruppi: linguaggi compilati. l’HTML non è un linguaggio di programmazione vero e proprio (nonostante sia spesso. in maniera colloquiale. permette lo sviluppo e l’utilizzo di applicazioni indipendenti dalla piattaforma. Ciò comporta che un programma “trasformato” in codice macchina può funzionare solo ed esclusivamente in un particolare ambiente hardware-software. Nel caso dei linguaggi compilati. Tra i linguaggi semi-compilati. I sorgenti vengono “tradotti” in codice macchina. frame. semi-compilati ed interpretati.

la seconda proprietà sul nome della seconda città. In questo modo. elevati tempi di elaborazione. Per far luce sull’argomento è sufficiente pensare un programma come un insieme di oggetti (oggetti software) che cooperano tra loro. il secondo per richiedere il calcolo della distanza tra le due città specificate. sa accendersi. prima di poter essere eseguito. script troppo complessi. una tecnica di programmazione che permette di semplificare notevolmente alcuni concetti che riguardano lo sviluppo di programmi. quindi. ossia visibile da parte di chiunque. colore. invece. è il telecomando che invia al televisore un messaggio comunicandogli quale azione deve essere intrapresa. desideri di consultare il codice HTML della pagina Web che sta visitando. oltre a stabilire le proprietà caratteristiche (ampiezza. il browser Internet (per esempio Internet Explorer) ad interpretarlo e ad eseguire le istruzioni specificate. il reale significato. l’HTML non ha in sé né strutture in grado di interagire con l’utente né strutture decisionali. tuttavia il suo utilizzo potrebbe non risultare indicato per lo svolgimento delle operazioni più complesse: procedure all’apparenza assai semplici. Qualora si indichi anche la versione di JavaScript. il server esegue le azioni previste dal programmatore e comunica al computer client (e quindi al suo browser Internet) il responso. Pochi ne conoscono. non realizzare in JavaScript. In pratica. Il codice di uno script JavaScript deve essere quindi scaricato completamente da parte del browser installato sul personal computer client. semplicemente ser- vendosi della funzione Visualizza l’HTML del browser. Tutti i bug e le “falle” di sicurezza di JavaScript sono stati scoperti e risolti sin dall’uscita delle prime versioni. Il codice JavaScript. ossia i messaggi che possono essere inviati e l’effetto di ogni singolo messaggio (semantica). lo script verrà interpretato ed eseguito solo dai browser che la supportano. però. Ciascun oggetto software è poi caratterizzato da alcuni metodi: essi descrivono le azioni che l’oggetto deve compiere non appena riceve un messaggio specifico. allineamento) di ciascun elemento. ad ogni richiesta di connessione da parte di un personal computer (client). Nella pratica. È bene. . potrebbero infatti implicare lo sviluppo di script piuttosto complicati. 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. JavaScript può essere considerato come il complemento di HTML. è completamente statico. per esempio. Il codice JavaScript. inoltre. Analogamente. Semplificando molto. Le proprietà dell’oggetto saranno essenzialmente due: la prima permetterà di avere informazioni sul nome della prima città inserita. 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. quindi. JavaScript dispensa il server dall’effettuare una mole di lavoro aggiuntiva (il server non deve processare il codice JavaScript) ma costringe ogni client ad un’opera di interpretazione ed esecuzione degli script. 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. all’interno della tag <SCRIPT> è sempre bene specificare con quale linguaggio è stato realizzato lo script. Ne aggiungiamo un altro: <SCRIPT> e </SCRIPT> consentono di delimitare il codice JavaScript e quello proprio di altri linguaggi di scripting. L’HTML. da parte dei client. JavaScript è semplice perché si basa su un numero ristretto di oggetti di programmazione. Ogni azione è però richiesta esplicitamente da parte dell’utente. insomma. il codice contenuto all’interno delle tag che seguono verrà in. al programmatore la conoscenza sul funzionamento “interno” dell’oggetto 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.6a lezione rate e così via. Ad esempio. Con questa lezione del nostro corso. JavaScript è sicuro e affida- L’identikit di JavaScript • JavaScript è un linguaggio di scripting • Un linguaggio di scripting è un linguaggio di programmazione “ridotto all’osso” • Uno script JavaScript si compone di una serie di istruzioni eseguibili dal personal computer client • Il codice JavaScript è inseribile all’interno di una qualsiasi pagina HTML • JavaScript è un linguaggio aperto che può essere liberamente utilizzato da chiunque senza la necessità di acquistare una licenza d’uso • 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à. Fatta eccezione per i form. I valori di ogni proprietà sono memorizzati in appositi contenitori (porzioni della memoria) denominati variabili. ossia sul personal computer che sta visitando un determinato sito Internet. servendosi di un altro oggetto (il telecomando). Pensate ad un televisore: si tratta di uno strumento che. Non è richiesta. I linguaggi di programmazione più moderni fanno uso degli oggetti software per rendere la scrittura dei programmi più semplice e intuitiva. Object Oriented Programming).  2 La programmazione orientata agli oggetti i sente sempre più spesso parlare di programmazione orientata agli oggetti (in inglese OOP. come vedremo più avanti. sa sintonizzarsi su canali specifici. È un linguaggio interpretato ed è un linguaggio di scripting. Il televisore poi è in grado di conoscere il suo stato attuale ossia le proprie proprietà (il S 60/88 televisore è acceso o spento? Su quale canale è sintonizzato?). infatti. non viene interpretato ed eseguito sul server ma viene inviato – così com’è – al client: penserà. Tra le caratteristiche principali abbiamo già messo in luce come il codice sia in chiaro. che richiedano. Si tratta di un aspetto importante che deve essere tenuto a mente: altri linguaggi di programmazione vengono detti “lato server” perché. La programmazione orientata agli oggetti è. sa spegnersi. quindi. Possiamo supporre che tale oggetto software preveda l’invio di due messaggi: il primo per richiedere l’acquisizione dei nomi delle città da parte dell’utilizzatore del programma. viene eseguito sul client. Ogni oggetto è in grado di eseguire azioni particolari che vengono effettuate solo quando richiesto da un altro oggetto software. vanno utilizzati i tag seguenti: <SCRIPT Language=“Javascript”><!-//--></SCRIPT> Com’è facile notare. ci proponiamo di aggiungere un altro importante tassello alle nostre conoscenze: presenteremo JavaScript e DHTML.

La sintassi da usare è la seguente: <SCRIPT SRC=“nomedelfilejavascript. è contenuto nell’oggetto document (la pagina Web). Qualora. per esempio. Create una nuova pagina HTML. ne interpreteranno il codice semplicemente come commenti HTML (che non de- vono essere stampati sulla pagina Web). Ogni tabella. in tale pagina. come colore di sfondo.js” è il file contenente il codice JavaScript e che deve essere richiamato. Come regola generale. facente parte del form miologin. In alternativa. non in grado di riconoscere JavaScript. presente R 61/88 nella vostra pagina Web è un oggetto. anziché eseguirlo. Alcuni browser. Se si vuole inserire lo script nella pagina HTML. il quale. vi suggeriamo di racchiudere sempre il codice JavaScript tra le tag <!-. visualizzata all’interno del browser Internet. può decidere se inserire gli script direttamente nella pagina HTML oppure se utilizzare file esterni.  3 Oggetti e priorità icollegandoci con quanto introdotto poco fa circa la programmazione orientata agli oggetti. il tag <META REFRESH> ordina al browser.2”><!-//--></SCRIPT> Omettendo l’indicazione della versione. oppure tra le tag <BODY> e </BODY> (il corpo vero e proprio della pagina HTML). una versione del sito visualizzabile con i browser più vetusti. l’esecuzione degli script fosse disattivata o si usassero browser che non supportano JavaScript. Una pagina Web. hanno difficoltà nel gestire il segno > di fine commento: è bene perciò anteporre una doppia barra // (commento JavaScript) prima del tag -->. È importante ricordare che gli script vengono eseguiti in maniera sequenziale. Delimitando. egualmente. è considerabile come un oggetto. Utilizzando l’istruzione JavaScript document. Il contenuto di un ipotetico campo denominato username.0 e versioni successive: <SCRIPT Language=“Javascript1. Notare che la proprietà value si riferisce all’oggetto username (campo testo) che è parte dell’oggetto miologin (form). In JavaScript ogni istruzione ha termine con il salto di riga (il ritorno a capo) oppure con il punto e virgola (. servendovi di uno degli editor presentati nelle precedenti lezioni del corso (potete servirvi semplicemente del Blocco Note di Windows o di un editor testuale).0 o Netscape 4.e -->. il significato di oggetti e proprietà. poi.username. può essere recuperato utilizzando la proprietà value: document. passiamo ad illustrare. in questo caso.e --> che.6a lezione  terpretato solo da Internet Ex- plorer 4. 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. In particolare. Il codice JavaScript può essere inserito direttamente all’interno di una pagina Web oppure in un file esterno. //--></SCRIPT> </body> </html> In questo script potete facilmente notare tutto quanto è stato sinora introdotto. Questo perché alcuni browser (quelli più vecchi) qualora non riconoscano il codice JavaScript. qualsiasi sia la loro versione. pulsante. quindi. Le righe evidenziate in rosso sono istruzioni. soprattutto le versioni più datate di Netscape. si potrà semplicemente far riferimento al file esterno che lo contiene. alert(’Questo è il tuo primo script’). Il buon programmatore avrà cura di inserire. soprattutto quelli di ultima generazione. Consigliamo di usare sempre il punto e virgola: vi consentirà di identificare più istruzioni che stanno sulla stessa riga. Spesso si usa quindi il costrutto che segue: <NOSCRIPT> <META HTTP-EQUIV REFRESH CONTENT=“0. form.miologin. a seconda della loro posizione all’interno del codice HTML della pagina Web.e --> (per impedire ai browser più datati la visualizzazione dello script sulla pagina Web) e della doppia barra finale (//). di definire JavaScript come linguaggio di scripting. gli script tra le tag <!-. potrebbero. il codice presente nella pagina Web non verrebbe eseguito. link. nella pratica. 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. Le informazioni per la visualizzazione del colore dello sfondo della pagina HTML sono. invece. uno dopo l’altro. i browser più vecchi. I vantaggi che derivano dall’uso di file esterni sono enormi: se si prevede di utilizzare lo stesso codice JavaScript in più pagine HTML. ad esempio.html”> </NOSCRIPT> In pratica. Spesso si ricorre.js) e richiamarlo da ciascuna pagina servendosi della tag SCRIPT SRC. a sua volta. indicano i commenti. senza doverlo riscrivere ogni volta.html”. immagine. Tale file dovrà poi essere opportunamente richiamato dal corpo della pagina HTML. Ogni oggetto dispone di un certo numero di proprietà che lo caratterizzano in modo univoco. il codice JavaScript sia stato inserito all’interno della tag <BODY> (corpo della pagina HTML). I browser Internet e gli script Abbiamo già evidenziato come tutti i browser.bgcolor=“red” alla vostra pagina Web sarà assegnato. quindi copiate al suo interno quanto segue: <html> <head> </head> <body> <SCRIPT Language=“Javascript”><!-document. È stato fatto uso delle tag <!-. gli script inseriti nell’intestazione tra le tag <HEAD> e </HEAD> vengono eseguiti per primi. Metodi I metodi descrivono le azioni che l’oggetto deve compiere . il rosso.write(“Benvenuto nel mondo di JavaScript!”).js”></ SCRIPT> dove il file “nomedelfilejavascript. si deve tenere presente che questo può essere collocato all’interno delle tag <HEAD> e </HEAD> (ovvero nell’intestazione della pagina Web).). Eseguire uno script esterno Chi sviluppa una pagina Web che fa uso di JavaScript. con grossi vantaggi in termini di tempo. Supponiamo. è possibile utilizzare il tag <script type= “text/javascript”> che consente. memorizzate nella proprietà bgcolor dell’oggetto document. visualizzarlo sulla pagina Web (cosa che va assolutamente evitata). di passare immediatamente alla visualizzazione della pagina HTML “nomedellapagina.va- lue. URL=nomedellapagina. all’uso della tag <NOSCRIPT></NOSCRIPT> che permette di specificare il comportamento che il browser deve tenere qualora non fosse possibile interpretare lo script. È possibile notare come. in HTML. qualora questo non sia in grado di riconoscere adeguatamente lo script. 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). il codice verrà processato da tutti i browser. siano in grado di processare i JavaScript.

operano sull’oggetto Window e consentono di aprire e chiudere nuove finestre • Metodi di documento . Nel nostro esempio. Si noti come l’evento JavaScript è stato inserito direttamente nella tag HTML <IMG> <HTML> <HEAD> <SCRIPT LANGUAGE=“JavaScript”> .  che consente la visualizzazione di un’immagine all’interno di una pagina Web.fissare un nome identificativo da attribuirle (ad esempio Miafinestra). l’evento Onmouseover viene attivato non appena il visitatore della nostra pagina Web sposti il puntatore del mouse sull’immagine raffigurante il logo di PC Open (pcopen.6a lezione non appena riceve un messaggio specifico. inoltre. ci si può subito rendere conto di come gli eventi JavaScript siano utilizzati all’interno del codice HTML. posizionamento. per questo motivo.permettono di operare su data e ora • Metodi di testo . quando l’utente clicca su un pulsante. L’esempio ci permette di provare sul campo l’utilizzo degli eventi: a tal proposito. la funzione denominata mia_funzione.write (“Benvenuto nel mondo di JavaScript!”) ci ha permesso di scrivere la frase indicata sulla nostra pagina Web.intervengono sulla cronologia dei siti Web visitati • Metodi di data . Così come una porta può essere aperta o chiusa. un evento può richiamare una ed una sola istruzione (nell’esempio precedente. il secondo evento ha luogo quando l’utente “fa clic” con il tasto sinistro del mouse. //--></SCRIPT> <center> <img src=“pcopen. un metodo dell’oggetto document: abbiamo già avuto modo di fare la sua prima superficiale conoscenza con lo script dell’Esempio 1: l’istruzione document. per spostare il cursore sulle caselle di testo dei forum • Metodi relativi alla cronologia . Sarà quindi possibile aprire la nuova finestra servendosi della seguente istru- zione: Miafinestra = window.open() permette. e così via). Nel caso in cui un evento debba eseguire una serie di istruzioni.ed in quali condizioni (per esempio all’apertura di una pagina Web. i metodi sono le azioni che l’oggetto è in grado di compiere. di effettuare test di compatibilità delle proprie pagine Web sulle varie versioni dei browser Internet.per selezionare gli oggetti che compongono un form (ad esempio un modulo di richiesta di informazioni).in primo luogo . gli eventi non vengono definiti all’interno della tag <SCRIPT> ma vengono generalmente inseriti (a parte qualche caso) nel codice HTML della pagina Web. è rimasto fedele al passato. di contro. sia l’evento Onmouseover che l’evento Onclick. A differenza di quanto visto sinora.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. alla pressione del tasto sinistro del mouse.le principali funzioni matematiche • Metodi “messagebox” . un certo risultato. La lista dei principali gruppi di metodi messi a disposizione in JavaScript • Metodi di finestra . Questi. tali righe di codice vengono racchiuse in un’unica funzione. L’evento farà poi riferimento alla funzione definita in precedenza. generalmente definita nell’intestazione della pagina Web o nel corpo della pagina HTML. Un esempio concreto contribuirà a comprendere meglio il concetto: 4 Eventi e funzioni li eventi consentono di specificare quando . viene visualizzato il messaggio “Stai per raggiungere il sito di PC Open” prima di indirizzare il browser verso l’URL indicato nella tag anchor). L’istruzione document. Analogamente. Ad esempio Onclick=“mia_funzione()” invocherà.open() Il metodo window. l’evento Onclick è inserito in una tag anchor <A HREF… ed attivato non appena l’utente clicca sul link (nel nostro esempio. invece.gif). Provate a creare una pagina Web utilizzando il codice che segue: G <HTML> <HEAD></HEAD> <BODY> <SCRIPT Language=“Javascript”> <!-alert(’Benvenuto!’).</a><br> </BODY> </HTML> In questo caso. In questo caso è necessario ricorrere all’uso 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. e così via) . il primo script ad essere eseguito è quello inserito immediatamente dopo l’apertura della tag <BODY>: l’istruzione alert (’Benvenuto!’) mostrerà al visitatore un messaggio iniziale di benvenuto. potevano essere abbinati ad un numero molto limitato di tag HTML.un determinato script debba essere eseguito. In pratica. gli oggetti sono in grado di compiere molte azioni..it” 62/88 onclick=“alert(’Stai per raggiungere il sito di PC Open’)”>Vai al sito Web di PC Open.per modificare le proprietà caratteristiche del testo • Metodi matematici . invocano la visualizzazione di un messaggio d’avviso mediante l’uso dell’istruzione alert). Le nuove versioni di Internet Explorer hanno esteso la possibilità d’uso degli eventi di JavaScript anche a numerose altre tag HTML mentre Netscape. dopo l’esecuzione delle istruzioni previste.pcopen. Come abbiamo avuto modo di apprendere. quando si muove il mouse su un determinato oggetto. di aprire un nuovo documento (pagina Web). per esempio. Accade però molto spesso che le operazioni che debbono essere eseguite al verificarsi di un certo evento siano diverse.. Write() è. è necessario .per generare finestre di dialogo Se si vuole aprire una nuova finestra da JavaScript. assolutamente non rappresentabili mediante un’unica istruzione. una lampadina accesa o spenta.open permette l’utilizzo di tre parametri opzionali che possono essere inseriti all’interno delle parentesi tonde: • Un URL contenente la pa- gina HTML che deve essere visualizzata all’interno della nuova finestra • Un titolo per la finestra • Una serie di informazioni legate al “look” grafico della finestra (dimensioni.permettono di generare “al volo” nuovi documenti (pagine HTML) • Metodi per i form . Onmouseover e Onclick sono due eventi: il primo viene attivato non appena l’utente porta il puntatore del mouse sull’oggetto cui la tag HTML fa riferimento. Inizialmente JavaScript metteva a disposizione del programmatore solo pochi eventi. Suggeriamo.

write stampa sulla pagina Web il valore 35. C.JavaScript Esempio 4</title> </head> <body> <SCRIPT Language=“Javascript”> <!-utente=prompt(“Inserisci il tuo nome”. La stringa di testo inserita verrà successivamente utilizzata per visualizzare un messaggio di benvenuto. crea in memoria una variabile denominata luogonascita e le attribuisce il valore “null”. una volta memorizzato il valore stringa nella variabile utente. In molti linguaggi di programmazione (per esempio Java. valori booleani. utente=prompt(“Inserisci il tuo nome”. tale variabile potrà essere successivamente usata per visualizzare il mes- document. di inserire il suo nome. Sulle variabili è poi possibile eseguire tutta una serie di operazioni.ilsoftware.  go. inizializzerà una variabile utente. essendo primo_valore e secondo_valore due variabili numeriche.Inizio del codice Javascript function msgbox (testo) { alert (testo) } // . L’istruzione var luogonascita. sarà sufficiente eseguire un’operazione di assegnazione.write(utente).  . Il simbolo di uguaglianza indica che stiamo effettuando un assegnamento (stiamo associando alla variabile indicata alla sinistra dell’uguale il valore specificato alla sua destra). il sito Web del gruppo editoriale Agepe rivolto ai professionisti dell\’IT e del Web’)”>01Net</a><br> <a href=“http://www.“Inserisci qui il tuo nome”). un valore numerico) avremmo ottenuto una somma: primo_valore=25. Nell’esempio precedente avremmo potuto usare un’unica istruzione document.write(“Benvenuto ”+utente).write(primo_valore+secondo_valore). //--> </SCRIPT> </body> </html> Facendo riferimento a questo esempio. document. Ad esempio.digifocus. Le variabili possono assumere anche lo speciale valore “null”: quest’ultimo si incontra spesso nella programmazione e non rappresenta un valore specifico. l’istruzione luogonascita=“Milano” provvede automaticamente ad inizializzare una variabile (luogonascita) come stringa e a porvi.it</a><br> </p> </BODY> </HTML> In questo esempio.write impiegando il codice che segue: 5 Variabili e stringhe n qualsiasi linguaggio di programmazione.--> </SCRIPT> </HEAD> <BODY> <p align=“center”> <a href=“http://www.’)”>Digifocus</a>< br> <a href=“http://www.it” onclick=“msgbox(’State per visitare 01Net.it” onclick=“msgbox(’State per visitare il sito Web di PC Open’)”>PC Open</a><br> <a href=“http://www. In questo caso l’istruzione document.01net. ’)”>IlSoftware.“Inserisci qui il tuo nome”). appunto.it: il sito italiano interamente dedicato al mondo del software. analizzate le seguenti due istruzioni: luogonascita=“Milano” luogonascita=Milano Si tratta di due istruzioni completamente differenti. stringhe (qualsiasi valore letterale). secondo_valore=10. saggio di benvenuto. Tale funzione viene richiamata da parte dell’evento onclick. il valore Milano.it ” onclick=“msgbox(’State per visitare IlSoftware. Poiché il metodo prompt() restituisce il testo che l’utente immette nella finestra di dialo- <html> <head> <title>Corso OpenMaster Lezione 6 . per esempio. In JavaScript la dichiarazione delle variabili non è strettamente necessaria. quindi vi memorizzerà il valore specificato a destra dell’operatore di assegnazione (in questo caso proprio il valore stringa restituito dal metodo prompt()). Le variabili possono anche essere inizializzate esplicitamente con la dichiarazione var. Il segno di addizione effettua. essere unite assieme. Qualora si fosse utilizzato il “+” tra variabili numeriche (contenenti. La prima istruzione document. al suo interno.pcopen.6a lezione <!-. la seconda inserisce nella pagina il contenuto della variabile utente. le variabili possono essere considerate come delle scatole all’interno delle quali è possibile immagazzinare dei dati. I 63/88 Va ricordato che le stringhe (espressioni letterali) vanno sempre racchiuse tra doppio apice. abbiamo definito una funzione msgbox contenente un’unica istruzione.write stampa sulla pagina Web il testo Benvenuto. un concatenamento tra la stringa Benvenuto e la variabile stringa utente. 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.Fine del codice JavaScript . document. riceve in ingresso il testo che deve essere mostrato nella finestra d’allerta. inserito in ogni tag <A>. inoltre. cioè.it” onclick=“msgbox(’State per visitare Digifocus: tutte le informazioni per i professionisti dell\’ immagine. Nel primo caso il valore stringa Milano viene memorizzato nella variabile luogonascita.write(“Benvenuto ”). Ogni variabile può memorizzare dati di un certo tipo: numeri. Una delle più importanti è il concatenamento: due o più variabili possono. cioè. nel secondo caso viene memorizzato in luogonascita il valore della variabile chiamata Milano. Facciamo alcuni esempi Utilizziamo il metodo prompt() per richiedere all’utente che visita la nostra pagina Web. 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 un’area specifica (ad esempio un’immagine od un collegamento) onMouseOver Il puntatore del mouse è stato spostato su un’area specifica (ad esempio un’immagine od un collegamento) La funzione msgbox. A tal proposito. document.

se esse ospitano lo stesso contenuto). cioè. I valori possibili che vengono restituiti dopo il confronto sono 4. 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. ad esempio. per esempio. L’espressione (x<10 && y>1) restituisce il valore true perché sono vere entrambe le condizioni indicate (è vero. che x sia minore di 10 ed è altrettanto vero che y sia maggiore di 1). operatori aritmetici 2. Nella colonna “equivale a” potete verificare come si sarebbe potuta scrivere. false (falso) oppure true (vero). un confronto x==y restituirebbe false (non è vero che il contenuto della variabile x è uguale al contenuto della variabile y).6a lezione 6 Gli operatori in Javascript Gli operatori si dividono in: 3. Gli operatori logici sono essenziali per effettuare confronti più complessi tra valori e/o variabili. 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. 1. in precedenza. Nel primo esempio si suppone che la variabile x contenga il valore 6. L’operatore “+=” . il “+”. Operatori su stringhe Per quanto riguarda gli operatori su stringhe. y il valore 3 (siano state effettuate le relative operazioni di assegnamento). un esempio.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. per ognuno di essi. un’operazione di assegnamento può essere scritta in forma compatta (cioè abbinata ad un operatore aritmetico). utilizzato per concatenare assieme due o più stringhe. somma i valori delle due variabili indicate e memorizza il risultato all’interno della variabile di sinistra. ad esempio. 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. Se avessimo inizializzato in precedenza due variabili x e y. Sono ampiamente utilizzati nelle strutture decisionali (if…then…else). Lo script seguente. di verificare se un valore è uguale ad un altro (nel caso delle variabili. Di seguito elenchiamo i principali operatori che JavaScript mette a disposizione del programmatore citando. la variabile testo3 contiene la stringa “Benvenuti al corso di PC Open”. abbiamo già avuto modo di presentare. operatori logici 5. ogni singola operazione senza ricorrere alla forma compatta. si può aggiungere uno spazio in calce alla stringa testo1 In questo modo. la seconda uguale a 8 (x=8). operatori su stringhe Segnaliamo anche gli operatori sui bit (utilizzati di solito solo per generare colori). . 5. Gli operatori relazioni sono tutti binari. in alternativa. La prima consiste nell’inserire una stringa “spazio” nell’ultima istruzione: testo1=“Benvenuti al corso” testo2=“di PC Open” testo3=testo1+“ ”+testo2 oppure in testa alla stringa testo2: testo1=“Benvenuti al corso ” testo2=“di PC Open” testo3=testo1+“ ”+testo2 In alternativa. operatori relazionali 4. operatori di assegnamento 3. ponendo la prima uguale a 5 (x=5). Il doppio uguale (==) permette. come seconda soluzione. Operatori relazionali 1.

write(contenuto).write(contenuto) . memorizziamo in due variabili distinte l’altezza e la larghezza che deve avere la finestra da creare quindi calcoliamo le coordinate della finestra (in pixel) affinché questa risulti centrata.23.inseriscono nella pagina Web della nuova finestra. la larghezza della nostra finestra e la sua altezza.html oppure online all’indirizzo seguente: http://www. In particolare. Per quanto riguarda le informazioni relative a data ed ora impieghiamo il codice che segue: now = new Date(). Per far questo. Per prima cosa. inoltre. In ogni caso.ilsoftware.asp?f=05_riassuntivo 65/88 .status=0.left=”+sinistra). deve mostrare la data attuale.writeln(data_ora).6a lezione Mettiamoci alla prova 1 Cimentiamoci ora con un esercizio riassuntivo un po’ più complesso. Le successive istruzioni . Definiamo ora il contenuto della nuova finestra. L’esempio è consultabile su CD utilizzando il file 05_riassuntivo. ricorriamo all’utilizzo di una variabile messaggio. Potete provare ad effettuare qualche verifica modificando la risoluzione dello schermo di Windows (Pannello di controllo | Schermo). alto il valore 150. “toolbar=0. Sottraendo a tali valori. dobbiamo quindi inserire una serie di istruzioni che consentano di recuperare data ed ora attuali (nel formato utilizzato sul personal computer client). inserire un link HTML il cui testo può essere liberamente deciso a priori.menubar=0. Passiamo ora allo sviluppo della funzione che dovrà aprire la nuova finestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>.17).top=”+alto+“.it/libreria/js/jstest. Le istruzioni successive permettono di creare la nuova finestra: newwindow=window.open(“”. All’interno della funzione JavaScript. è necessario controllare il valore delle proprietà width (larghezza) e height (altezza) dell’oggetto screen (schermo). permette di “trasformare” la data nel formato utilizzato sul personal computer locale (per esempio.width-larghezza)/2. Poiché la funzione deve ricevere in ingresso un valore stringa. applicato alla variabile now. Nella variabile contenuto abbiamo deciso di memorizzare tutto il codice HTML che costituirà la nuova finestra.height=”+altezza+“. newwindow. La nuova finestra. deve risultare perfettamente centrata. è possibile notare come il nome da attribuire al link <A> sia generato recuperando il valore assunto dalla variabile messaggio. La data/ora viene recuperata con il metodo Date() quindi memorizzata all’interno della variabile now.writeln(data_ora) e document.document. dividendo per due otterremo le coordinate in pixel che permetteranno di centrare la finestra: sinistra=(screen. data_ora = now.height-larghezza)/2. 1. newwindow. il contenuto della variabile data_ora e il codice HTML presente in contenuto. rispettivamente. qualunque risoluzione si stia utilizzando. Il metodo toLocaleString(). creata allo scopo. L’oggetto “nuova finestra” è chiamato newwindow. mercoledì 12 febbraio 2003 12. alla risoluzione 800x600 pixel la variabile sinistra assumerà il valore 250. comunque. Successivamente. visualizzare un testo.document.“miafinestra”. la finestra risulterà perfettamente centrata. Osservate le concatenazioni tra stringhe che abbiamo utilizzato.resizable=0. La terza opzione permette di specificare tutte le caratteristiche della finestra. 2 2. Supponiamo di voler creare una pagina Web dalla quale si possa richiamare una nuova finestra. che definiscano il contenuto della nuova finestra e le proprietà della stessa (posizione e dimensioni). 3 3. nella variabile alto il valore 234. qualsiasi risoluzione si stia impiegando.document. inserite nella vostra pagina Web il codice HTML che consenta la visualizzazione di un form costituito da un’unica casella di testo e da un pulsante. Se la nostra finestra deve essere alta e larga 300 pixel. alla risoluzione 1024x768 pixel in sinistra verrà memorizzato il valore 362.toLocaleString(). Tale finestra deve possedere attributi specifici: deve misurare 300 pixel in altezza e 300 in larghezza. alto=(screen.width=”+la rghezza+“.scrollbars=0.

l’istruzione if…then imponendo..random()) quindi utilizziamo il metodo floor per approssimare. Il metodo Random().un intero compreso tra 0 e 9.it</a>”) } else { document.else</p> <p>Prima delle ore 12 lo script visualizza il messaggio “Buongiorno!”.. <html> <body> <script type=“text/javascript”> var r=Math.pcopen.. come condizione... 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). di avere .. usiamo quindi il metodo GetHours(). applicato all’oggetto Math. Il valore assunto dalla variabile r viene quindi confrontato. L’istruzione break consente allo script di uscire dal ciclo di switch: se fosse mancante. anche un’istruzione default: essa viene eseguita solo nel caso in cui il ciclo switch non trovi alcuna corrispondenza tra il valore assunto dall’espressione e le va- . O <html> <body> <script type=“text/javascript”> var d = new Date() var time = d. Memorizziamo il numero prodotto in una variabile: nel nostro esempio l’abbiamo denominata r. espressione può assumere solamente i valori true (vero) oppure false (falso): è quindi “booleana”.else..write(“<a href=’http://www.write(“<b>Buongiorn o!</b>”) } 66/88 else { document.6a lezione gni giorno noi ci troviamo a compiere delle scelte: “se facciamo una cosa allora le conseguenze sono. conviene ricorrere all’utilizzo dell’istruzione Switch. quindi. dapprima.345125 oppure 5. Proviamo ora a scrivere uno script che ci consenta di presentare. (Sul CD ROM l’esempio 06_if_then.digifocus.it</a>”) } </script> </body> </html> Qualora si debbano effettuare numerosi test su un’unica espressione.it’> Visita www. In pratica se il numero generato è maggiore di 0. verrà eseguita istruzione1 altrimenti istruzione2 (l’istruzione che segue l’else).Else che può essere efficacemente tradotta in questi termini: Se. possono essere eseguiti. applicato alla variabile data d. Come nel caso precedente. con una serie di possibilità.in modo del tutto casuale . La forma più semplice con cui si può presentare l’istruzione condizionale è la seguente: if (espressione) istruzione1 [else istruzione2]. dopo le 12 “Buonasera!”. anche qui possiamo ricorrere all’utilizzo del metodo Math. viene proposto il link di PC Open.</p> </body></html> Nel costrutto if.Allora.5.random(). per 10 il contenuto della variabile r (generato da Math. dall’istruzione switch (r) con una serie di possibilità (indicate con i vari case).it’>Vi sita www. consente di generare un numero casuale compreso tra 0 ed 1 (decimali compresi): ciò significa che l’istruzione Math. Supponiamo di voler accogliere l’utente che visita il nostro sito Web con una frase spiritosa..random() if (r>0... così. r>0.it) o Digifocus (www. o il sito ufficiale di PC Open (www. L’equivalente in JavaScript è l’istruzione condizionale If.write(“<b>Buonasera !</b>”) } </script> <p>Questo esempio mostra l’utilizzo del costrutto if. per memorizzare l’ora corrente.tra dieci diverse possibilità.write(“<a href=’http://www.pcopen. l’esclamazione Buongiorno!.random() genera numeri casuali del tipo 4. Analizziamo un possibile utilizzo dell’istruzione condizionale Switch con un esempio pratico. JavaScript continuerebbe a confrontare il valore. Il valore assunto dall’espressione viene infatti confrontato. opzionalmente.” è il nostro ragionamento.digifocus.. in questo caso. scelta ..it).digifocus. Anziché uno solo. altrimenti quello di Digifocus. Recuperiamo data e ora attuali servendoci del metodo Date(). all’intero più vicino. il numero ottenuto.5.pcopen. qualora l’ora attuale sia precedente a mezzogiorno.come contenuto della variabile r . in se- quenza. Qualora tale espressione assuma il valore true. altrimenti Buonasera!. inseriamo come condizione l’espressione time < 12. Saremo certi. Utilizziamo.html mostra l’utilizzo del costrutto if…else).getHours() if (time < 12) { document. all’utente che visita il nostro sito Web.5) { document.. È possibile inserire. verrà stampata. numerosi confronti.899271236 e così via. In questo modo. sulla pagina HTML. Per ottenere un numero intero da 0 a 9 (le frasi da proporre sono dieci) utilizziamo un semplice trucco: moltiplichiamo.

sono while e do… while. nei casi in cui si vuole che l’iterazione venga eseguita almeno una volta.org e così via). un form che richieda all’utente di digitare il suo indirizzo e-mail verificandone. i <= 6. dopo il do verranno eseguite finché la condizione risulterà verificata. . una casella di testo. Proviamo ad inserire. ricorrendo al parametro type. con type=“button” un pulsante… Type=“submit” è importantissimo: consente di inserire un pulsante “speciale” che provvede ad inviare il contenuto del form all’indirizzo specificato nel parametro action. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. . quanto introdotto nel campo di testo verrà considerato come un indirizzo e-mail valido. Va ricordato che sia nelle espressioni if…then che in switch. invece. il tipo di elemento che si vuole utilizzare.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.write(“</h” + i + “>”) } </script> In pratica. è necessario far uso nella propria pagina Web . condizione. il valore numerico contenuto nella variabile i sarà incrementato di una unità (i++). quanto indicato tra parentesi. ossia nell’intestazione della vostra pagina Web: <script type=“text/javascript”> for (i = 1.it. nella nostra pagina HTML. alla presenza del simbolo @.write che s’incaricano di scrivere. Si tratta di un errore molto comune che spesso provoca comportamenti inattesi (JavaScript si limita ad ignorare l’espressione). Ad esempio. ad ogni iterazione. Tale istruzione è detta appunto “ciclo” perché esegue iterativamente una serie di azioni finché non viene raggiunto un limite prestabilito. da parte dell’utente. verificare la presenza di un suffisso . Strutture iterattive Una delle più famose strutture iterative.write(“<h” + i + “>Questo è il titolo numero ” + i) document. successivamente. è il ciclo for. Per motivi di semplicità. assai utili nella programmazione JavaScript. per gestire contenuti ed aree specifiche del sito e così via. tra parentesi graffe. di volta in volta. incremento permette di indicare quale incremento o decremento deve subire la variabile contatore ad ogni iterazione. Ad esempio. inserendo il parametro name (nel nostro caso. l’operatore di uguaglianza che va utilizzano è == (come già visto in precedenza) e non = (l’operatore di assegnamento). vengono eseguite le due istruzioni document. Utilizzando l’operatore +. consentono di stabilire gli elementi facenti parte del modulo HTML. Il ciclo for utilizza la seguente sintassi: for (inizializzazione. quindi. Lo script ha permesso così di generare il codice HTML equivalente al seguente: <h1>Questo è il titolo numero 1</h1> <h2>Questo è il titolo numero 2</h2> <h3>Questo è il titolo numero 3</h3> <h4>Questo è il titolo numero 4</h4> <h5>Questo è il titolo numero 5</h5> <h6>Questo è il titolo numero 6</h6> Altre strutture iterative.com. supponiamo di voler sviluppare un semplice script che faccio uso dei marcatori <h#> per la visualizzazione di titoli e sottotitoli di varie dimensioni. Ad ogni ciclo. si stabilirà che il ciclo for dovrà essere ripetuto finché la variabile i assumerà un valore inferiore a 10. Il ciclo do…while va impiegato.delle apposite tag I 67/88 <FORM> e </FORM>. abbiamo scelto il nome form_email).tra i tag <HEAD> e </HEAD> (intestazione). nel modulo HTML. . a questo punto.w3.net. per inviare i propri messaggi in un forum. Per approfondire l’utilizzo dei form HTML e scoprire tutte le possibilità che questi offrono. del pulsante Invia. abbiamo spiegato come al marcatore <h#> possano essere associato fino a sei livelli consecutivi. alla stesura dello script che consentirà la validazione dell’indirizzo e-mail inserito da parte dell’utente. con type=“radio” un “option box”. la validità. per interagire con l’utente. a collocare . È ovvio che nella “vita reale” si dovranno sviluppare dei controlli aggiuntivi sulla validità dell’indirizzo e-mail (ad esempio. il contenuto della variabile contatore subisce una variazione.al solito . Per ogni tag <INPUT> è necessario indicare. su un sempre maggior numero di siti. quello del webmaster del sito Internet).  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. si inserirà. da parte del programmatore. ed indicato in una condizione. Nella quarta lezione del no- stro corso.6a lezione  rie istruzioni case (nel nostro esempio default non è necessario). L’espressione inizializzazione permette di specificare il valore cui deve essere inizializzata la variabile contatore (ad esempio: i=0). seguito da <h2></h2> e così via). Il parametro action consente di stabilire la pagina ove il browser Internet deve essere reindirizzato dopo la pressione. org/TR/REC-html40/ interact/forms. Per provare subito l’utilizzo di for. sulla pagina Web. Per interagire con un modulo HTML mediante codice JavaScript. il codice JavaScript seguente: <script type=“text/javascript”> function controlla() { . Inserite il seguente script tra le tag <HEAD> e </HEAD>. Inoltre. Iniziamo con l’inserire 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. vi consigliamo di fare riferimento all’indirizzo www. Se l’utente inserirà una stringa di testo contenente la chiocciolina. le possibilità di utilizzo dei form si sono enormemente ampliate: vengono utilizzati. dalla variabile contatore i. ad ogni iterazione. specificando type=“text”. limiteremo il controllo circa la validità dell’indirizzo di posta elettronica specificato. I moduli compilati venivano infatti poi automaticamente inviati ad un indirizzo e-mail (ad esempio. L’istruzione while va utilizzata nella forma while (condizione) espressione: l’espressione verrà eseguita finché la condizione specificata risulterà vera. Provvediamo. impostando i<10 come condizione e i++ come incremento. Ciò significa che ogni volta che l’istruzione for esegue il ciclo. condizione consente di impostare la condizione che deve verificarsi affinché venga eseguito il ciclo (iterazione). l’iterazione è regolata da una variabile contatore. che debbono essere sempre comprese tra <FORM> e </FORM>. Ad esempio. Oggi.html (in lingua inglese). La sintassi dell’istruzione è infatti la seguente: do {istruzioni} while (condizione) Le istruzioni specificate. incremento) istruzioni. il valore contenuto nella variabile contatore i (inizialmente impostato a 1) viene incrementato di un intero (i++). comune a molti altri linguaggi di programmazione. si effettua una concatenazione tra le stringhe racchiuse tra virgolette ed il valore assunto. l’esecuzione del ciclo for viene ripetuta. così da determinare una struttura gerarchica di titoli e sottotitoli (<h1></h1>. Finché tale valore è minore o uguale a 6. Le tag <INPUT>. Passiamo. con type=“checkbox” una casel- la che può essere spuntata o meno. form online vengono proposti per effettuare ricerche all’interno degli articoli contenuti in un sito. i++) { document.

Una volta invocata tale funzione.*” frameborder=“1”> <frame name=“frame_sup” src=“frame_superiore.html (disponibile nel CD ROM di PC Open) presenta.value.html (specificata col parametro action) se la funzione restituisce il valore false (come abbiamo visto. il codice HTML che segue: <html> <frameset rows=“30%. l’intera pagina. lo spazio restante (al suo interno verrà collocato il contenuto del file frame_inferiore. Analogamente. come è possibile aggiornare due frame diversi con un solo clic del mouse. senza dipendere dalle altre.html.html nel CD ROM. La validazione dei dati (ossia il controllo della loro corret- tezza) sul lato client (ossia direttamente sul personal computer dell’utente che visita il nostro sito Web). A questo punto utilizziamo l’istruzione condizionale if…else per controllare il valore assunto dalla variabile at: se il valore è 1 (non è stata trovata alcuna occorrenza di “@”) viene mostrato il messaggio d’errore “Indirizzo e-mail non valido” inoltre. I frame sono infatti strutture ampiamente utilizzate in numerosi siti Web perché permettono di suddividere la finestra del browser Internet in più sottoaree.email. JavaScript memorizza nella variabile x il contenuto del form form_email. permetterà di annullare l’invio del contenuto del form alla pagina form_ok. l’area più in basso. Creiamo un nuovo file HTML attribuendogli il no- me frame. In questo modo è possibile pensare di tenere fissa una porzione del documento evitando che il browser debba ricaricare. Il codice HTML e lo script JavaScript sono contenuti all’interno del file form_email. L’istruzione successiva recupera. occuperà il 30% dello spazio a disposizione sull’asse verticale ed ospiterà il file frame_superiore. non avendo assegnato alcun nome al form (servendoci del parametro name). quindi applica il metodo indexOf. al suo interno. l’invocazione della funzione controlla(): aggiungiamo. l’utilizzo del metodo focus() per selezionare un campo specifico facente parte di un qualsiasi modulo HTML presente nella pagina Web.</FORM>). il metodo restituisce il valore -1. il valore restituito viene memorizzato nella variabile at. la funzione controlla() assumerà il valore false (return false).mioform.indexOf(“PC Open”) document.form_email at=x. quella superiore.6a lezione x=document. Qualora avessimo attribuito al modulo HTML il nome “mioform” (<FORM name= “mioform”>. consente di selezionare (impostare il “focus”) sull’elemento denominato campo1.html”> <frame name=“frame_inf” src=“frame_inferiore. campo1. Vediamo. in JavaScript risulta un’ottima soluzione per la validazione dei dati direttamente sul personal computer dell’utente che visita il nostro sito. L’esempio form_focus. Ciascuna di esse può gestire i suoi contenuti in modo del tutto autonomo. L’istruzione document. supponiamo di assegnare ad una variabile x la stringa “La mia rivista preferita è PC Open”: x=“La mia rivista preferita è PC Open” pos=x. creiamo un normale file HTML.  9 Interazione tra JavaScript e frame avaScript risulta molto utile anche quando si debba gestire una struttura a frame. evitando così di “caricare” il server del sito questo caso. L’argomento dell’evento onSubmit è return controlla(). In primo luogo. nella tag <FORM> un riferimento all’evento onSubmit (ciò significa che non appena l’utente agirà sul pulsante Invia (Submit). ad ogni refresh.campo1. indexOf permette di ricercare il simbolo “@”.. JavaScript rappresenta. invece.email.”) return false } } </script> Cosa abbiamo scritto? In primo luogo abbiamo denominato controlla() la funzione che effettua la validazione dell’indirizzo e-mail. la seconda. lo script cercherà la prima occorrenza della stringa PC Open all’interno della frase La mia rivista preferita è PC Open. il valore del campo denominato email (x. tale valore viene assunto solo nel caso in cui @ non sia presente. In questo caso infatti.html). ad esempio. Il return che precede la chiamata della funzione controlla(). Tale metodo restituisce la posizione della prima occorrenza della stringa specificata all’interno di un’altra stringa. Se invece la funzione controlla() restituisce un valore diverso.html).forms[0]. Mentre nel file frame_superiore. Tale file non avrà bisogno dell’aggiunta 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. Per fare un esempio concreto.indexOf(“@”) if (at == -1) { alert(“Indirizzo e-mail non valido. il valore 27 (la stringa PC Open è stata trovata in corrispondenza del ventisettesimo carattere). avremmo potuto utilizzare l’istruzione document. Ora inseriamo.indexOf(“La gazzetta”) In questo caso.value). La variabile pos assumerà. possiamo interfacciarci ricorrendo all’array forms[0].html abbiamo inserito semplicemente il codice HTML . l’invio dei dati del form verrà consentito.focus() (com’è possibile verificare visionando il file form_focus_2. la migliore soluzione per la realizzazione di questo tipo di controlli. 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. Incolliamo. prima. nel nostro esempio.html”> </frameset> </html> La pagina Web sarà suddivisa in due sezioni: la prima.write(pos) Invocando il metodo indexOf(“PC Open”). nel codi- ce HTML che consente la visualizzazione del form.html. permetterà di evitare di sovraccaricare il server Web che ospita il sito di un lavoro aggiuntivo. ossia qualora l’indirizzo e-mail non sia valido).. all’interno della stringa specificata dall’utente nel campo e-mail. il metodo indexOf restituirà il valore -1 (non è stata trovata alcuna occorrenza de La gazzetta).campo1.forms [0]. contenuto nel primo modulo HTML (forms [0]) posizionato nella pagina Web (document).focus() in luogo di document. JavaScript offre tutta una se- J 68/88 rie di strumenti che permettono di interfacciarsi con i frame HTML e quindi di facilitarne la gestione. quindi. verrà eseguita la funzione JavaScript appena illustrata).focus(). Se la stringa indicata tra parentesi tonde non viene trovata. quindi. Provate a sostituire la seconda istruzione con la seguente: pos=x.

com.html contiene una funzione JavaScript che abbiamo denominato modifica_frame. 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. introducendo effetti speciali. HTML. per esempio. questo linguaggio ri- corre infatti all’utilizzo di tre componenti tecnici: i linguaggi di script come JavaScript (ma anche il VBScript di Microsoft). di riferirvi in un modo univoco a funzioni e variabili. suggerimenti. function modifica_frame() {parent. Nel nostro caso.. La funzione JavaScript per la modifica del contenuto dei frame viene invocata mediante l’evento Onclick. Per esempio. Altri esempi pratici possono essere reperiti all’indirizzo www. visualizzerà nella barra di stato. e &. Accertatevi. un’icona raffigurante un piccolo triangolo a fondo giallo.  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”. spesso difficili da individuare. mentre in frame_inf il codice HTML di frame_inferiore_2. associato al pulsante Modifica contenuto frame. In tutti questi casi (e comunque in presenza di un qualunque altro tipo di errore). .it/javascript/tuto rial/.href=“f rame_superiore_2. ricordatevi di chiuderla. animazioni e la gestione di ogni singola immagine. JavaScript ignora gli spazi presenti all’interno di una istruzione. Tutti i browser Internet incorporano un debugger ossia uno strumento in grado di rilevare gli errori commessi in fase di programmazione. le risposte alle domande più frequenti (FAQ). Esempio: document. vi consigliamo di visitare la pagina seguente: www. frame_inferiore . Cascading Style Sheets) . Per approfondire.6a lezione Per documentarvi ulteriormente sull’utilizzo dei frame HTML. Per JavaScript una funzione denominata MiaFunzione è differente da un’altra chiamata miafunzione. l’istruzione di assegnamento citta=“Milano” (senza spazi) equivale a citta = “Milano” (con gli spazi). 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.. Ad esempio. graffa o quadra) venga aperta in uno script deve essere successivamente chiusa. Anche i più esperti incapperanno certamente in sviste comuni come la mancata chiusura di una parentesi. All’indirizzo www. guidano gli aspiranti webmaster alla scoperta di JavaScript. • Non dimenticate di chiudere le parentesi. • JavaScript è un linguaggio “case sensitive”. Il punto debole di DHTML è. Notare che nel frame di nome frame_sup viene inserito il contenuto del file frame_superiore_2.frame_sup. • Se all’interno di una stringa desiderate utilizzare simboli speciali come “ ’ .org/TR/REC-html40/pre sent/frames. se avete aperto una parentesi graffa per delimitare le istruzioni che compongono una certa funzione. DHTML si avvale di un insieme di tecnologie. Linee guida per la programmazione Sopra: la funzione JavaScript per la modifica del contenuto dei frame. w3.html.già illustrati nella quarta lezione del nostro corso .html” } Le due istruzioni JavaScript stabiliscono quali file HTML devono essere caricati in ciascun frame. 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. In informatica. Sotto: La funzione debugger che ci segnala gli errori commessi in fase di programmazione per la visualizzazione del logo della rivista. per evitare di incorrere in fastidiosi errori. all’interno della pagina HTML). guide online.location. Internet Explorer. Quando programmate con JavaScript. Facendovi doppio clic si otterranno le informazioni dettagliate circa l’errore riscontrato. com’è possibile verificare in figura.location. delle virgolette. è bene ricordarsi di seguire alcune semplici linee guida. in basso a sinistra. D 69/88 Con DHTML è possibile modificare ogni elemento che compone le nostre pagine Web. sito Web realizzato e curato da un team italiano. il vostro script non funzionerà. quindi. ci siamo dimenticati di chiudere una parentesi tonda (il debugger ci segnala riga e carattere ove è stato individuato l’errore.frame_inf. la dimenticanza di un punto e virgola. • Gli spazi vengono ignorati. esempi pratici.html (in inglese).html. Per raggiungere lo scopo di attribuire maggiore dinamicità alle pagine Web.href=“fra me_inferiore_2. i fogli di stile (CSS. Qualsiasi parentesi (tonda.ed infine.jsdir.html.html” parent. trovate una valanga di informazioni sulla programmazione JavaScript: tutorial passo-passo. anteponete ad essi la barra rovesciata.write (“L\’uno e l\’altro”). ovviamente.

quindi. Il DHTML si basa sulla struttura DOM (Document Object Model): si tratta di un modello che considera qualsiasi documento (pagina Web) come un oggetto. Come già anticipato in precedenza. L’uso dei fogli di stile consentirà.…). Si è poi fatto uso delle funzioni apri_tendina e chiudi_tendina. caratteristici dei fogli di stile (e già incontrati a pag. fontweight:bold } A {color:black. textdecoration:none. Utilizzando <DIV> e <SPAN> avrete la possibilità. va inserito sempre nell’intestazione della pagina e consente di stabilire. in primo luogo. Qualora non si riuscisse a rendere cross-browser la propria pagina DHTML.gif. è suggerito l’utilizzo dei tag <DIV> e <SPAN>. font-size: 10pt. A ciascun blocco <DIV> è stato assegnato un nome identificativo. è bene indicare i requisiti minimi per una corretta visualizzazione del sito. contenuta nell’oggetto document (la pagina Web). Per modificare un elemento presente nella vostra pagina Web. cioè.…) senza ricorrere all’impiego di tabelle nidificate. inserita nel codice della pagina Web mediante l’apposito tag <IMG>.6a lezione Il codice JavaScript va inserito nell’intestazione della pagina e permette di stabilire quale browser Internet si sta utilizzando però.images[3] Il codice indica che stiamo facendo riferimento alla terza immagine della “collezione” images. per modificare le proprietà dell’immagine.all[layerid] nel caso di Internet Explorer. È quindi necessario assicurarsi di produrre pagine DHTML che siano perfettamente compatibili con tutti i browser Internet (che siano. a seconda della posizione del puntatore del mouse.layers[layerid] nel caso di Netscape. quindi.Verdana. ogni elemento costitutivo della pagina Web ed offre i metodi per accedervi. sull’impostazione dei margini e così via. textdecoration:none. riquadri di testo. 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. paragrafi.Arial } </STYLE> Il codice JavaScript evidenziato nell’immagine a lato. quali debbano essere le caratteristiche dei collegamenti ipertestuali (tag <A>. Il DOM agisce.è accessibile da DHTML servendosi proprio della struttura DOM e di un linguaggio di scripting come JavaScript. le tendine dei vari menu dinamici. 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>). di intervenire sulla scelta dei caratteri (stile. abbiamo inserito una serie di livelli <DIV>.gif” id=“logopcopen”> In questo caso abbiamo assegnato all’immagine pcopen. da interfaccia tra il documento HTML ed il linguaggio di scripting: esso interpreta. è possibile utilizzare anche il modello strutturale. che una pagina dinamica DHTML sia visualizzata correttamente con Internet Explorer ma non con Netscape (o viceversa). destinata agli utilizzatori di Internet Explorer. anchor) . si rischierebbe di perdere numerosi visitatori infastiditi dall’impossibilità di visualizzare correttamente il vostro sito. dovranno esserne immediatamente visualizzate le relative voci. quindi.gif”> <BR><BR> </CENTER> </BODY> </HTML> Definiamo. all’occorrenza. poi. Sia Netscape che Microsoft hanno da sempre cercato di imporre la loro visione: talvolta può accadere. cross-browser): qualora non si provvedesse ad effettuare gli opportuni controlli. quale browser Internet si sta utilizzando. opportunamente invocate dagli eventi Onmouseover e Onmouseout per visualizzare o nascondere. dimensioni.Un menu a tendina con DHTML</TITLE> </HEAD> <BODY BGCOLOR=“white”> <CENTER><IMG SRC=“logo_PCOPEN. 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. è sufficiente attribuirgli un nome. in seguito. 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. Ad esempio: <img src=“pcopen. 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. A tal proposito. DHTML consente di spostare gli elementi costitutivi di una pagina Web senza la necessità di dover ricaricare la stessa. anchor) presenti nella pagina Web: <STYLE> A:Hover {color:red. Nel corpo della pagina HTML (<BODY></BODY>). servendoci di un foglio di stile. tra le tag <HEAD> e </HEAD> (intestazione della pagina HTML). In alternativa. Prima di tutto creiamo il codice base della nostra pagina HTML: <HTML> <HEAD> <TITLE>PC Open . sulla formattazione dei collegamenti ipertestuali. per esempio. 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.  . document. di spostare “al volo” qualsiasi blocco che costituisca la vostra pagina (colonne. infatti. servendovi di DHTML. Lo script permette di individuare la versione del browser in uso ed usare document. si può pensare di creare due differenti versioni del sito Internet: una. si potrà usare il codice seguente: document. il nome logopcopen: tale identificativo ci servirà. 38 nella quarta lezione del nostro corso) in quanto sono pienamente supportati sia da Internet Explorer che da Netscape. l’altra agli utenti di Netscape. la compatibilità tra browser. font-family: Tahoma. Se l’immagine da modificare è la terza che compare nella nostra pagina Web.

 IL CALENDARIO DELLE LEZIONI Lezione 4: Lezione 6: Competenze e strumenti HTML 4. Pensiamo ad esempio a un sito che offra consigli di viaggio e che includa previsioni del tempo costantemente aggiornate. a cui questo corso è dedicato. cioè invariabile. 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. che si è creato un vero e proprio sito dinamico. 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.01 • Cosa si può fare con i fogli stile • Quattro tipi di CSS • I colori del Web • Gestire le immagini • Esercizi • Ereditarietà e innesco a cascata • Proprietà di trasferimento dei parametri • Regole di ereditarietà • Selettori di classe • Websafe palette (disponibile integralmente sul CD) • I linguaggi di programmazione • La programmazione orientata agli oggetti • Oggetti e priorità • Eventi e funzioni • Variabili e stringhe • Gli operatori in JavaScript • Istruzioni condizionali • Interazione tra JavaScript e form HTML • Interazione tra JavaScript e frame • DHTML Lezione 1: Lezione 2: Siti statici e linguaggio HTML il corso è sul CD n. utilizzando informazioni fresche. le informazioni in costante aggiornamento richiedono che al- L meno una sua porzione sia dinamica. Benché la struttura della pagina che contiene tali previsioni possa essere statica. ossia venga generata nel momento in cui il navigatore la richiede. 71 (disponibile integralmente sul CD) Lezione 3: Modelli di pagina e tabelle (disponibile integralmente sul CD) • La tabella come elemento strutturale • Progettare layout fluidi e statici • Costruire template con le tabelle di layout • NamoWeb Editor5: per siti statici professionali • Dimensionare tabelle e celle fluide. il che imporrà un certo carico elaborativo sul server. allineamento spontaneo delle tabelle consecutive • Template con struttura complessa • Template con tabelle nidificate • Esercizi 71/88 Lezione 5: Design e multimedialità (disponibile integralmente sul CD) • Elementi di design per il Web • La ruota colore • Grafica e formati di immagini per Internet • Link ipertestuali • Tabelle d’immagini • Mappe immagine • Audio e video  Lezione 7: Interazione sul server • Il server Web • I form: la porta per l’utilizzo degli script CGI • Installare e configurare un server Web • Configurazione del sito Web predefinito in Windows XP Professional • Installare e configurare Apache sotto Windows L’ultima puntata Lezione 8: Promuovere il sito . della firma del libro degli ospiti (guest book) oppure della ricerca di pagine all'interno del sito oppure sul Web. tema che sarà l'argomento di un prossimo corso. Ciò non significa. richiede talvolta l'inserimento di componenti dinamici o comunque di componenti esterni alla pagina che avete costruito staticamente. Si tratta di operazioni che non possono essere eseguite mediante le funzioni di programmazione di JavaScript. dimensionare tabelle con celle miste. Avremo quindi pagine costruite solo in parte. viste nella scorsa lezione e orientate a creare pagine che diventano interattive quando arrivano sul computer del navigatore. ma consentirà di avere contenuti sempre freschi oppure adatti al contesto. Tali pagine verranno ge- nerate unendo la parte statica e la parte variabile ogni volta che un nuovo navigatore le richiederà. la cui definizione prevede che le pagine vengano generate dinamicamente nella loro interezza a partire da informazioni registrate in un database.01 e CSS Siti interattivi (disponibile integralmente sul CD) (disponibile integralmente sul CD) • Stile e struttura: usare i tag HTML nativi • Il deprecato tag font • I marcatori per formattare il testo • Gestire gli spazi nel testo • CSS e HTML 4. all'interno delle quali il server aggiungerà informazioni provenienti da altre fonti oppure che sono il risultato di un'elaborazione interna.7a lezione  A scuola con PC Open Progetto Web Master di Michele Nasi 1 Il server Web a produzione di un sito statico. attingendo a risorse esterne. tuttavia.

È una tecnica che si dimostra efficace quando gran parte della pagina è di tipo statico e l'elemento variabile costituisce una frazione del contenuto. che vengono comunque tutti elaborati prima di essere inviati. Il server Web non deve far altro che scorrere la pagina prima di spedirla. più impegnativo. contenuto nella tag <FORM> di ciascun file HTML. Perciò comprendiamo che l'interazione lato client dipende fortemente dal tipo di browser utilizzato e ne deve tenere conto. ma il server può essere configurato per accettare qualsiasi altro suffisso (tale discorso naturalmente non si applica ai file generati con ASP o PHP.info/cgi-bin: abbiamo infatti provveduto a memorizzarli nella cartella cgi-bin del server Web dedicato al nostro progetto “OpenMaster”. vengono supportati da numerosi server. Non è richiesta nessuna elaborazione dei contenuti perciò l'operazione non appesantisce il server. dovrà aver cura di modificare l’attributo action. 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. se si è interessati ad utilizzare.PL a loro assegnata) sono richiamati dalle pagine HTML facendo riferimento al sito www. 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. le immagini e gli elementi variabili da calcolare o da prelevare dall'esterno e inserire al momento della spedizione.html. In caso contrario. non dipendono dal tipo di browser impiegato. Come si presenta un SSI Alla pari di ciò che accade in JavaScript. e perciò alcuni provider possono impedirne l'uso. si parla di XSSI. Il tipo di include consentito cambia a seconda del server impiegato. I Server Side Include o gli XSSI offrono numerosi vantaggi: sono facili da imparare. 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. 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. ossia Extended Server Side Includes. Nel caso di una pagina statica. Microsoft prevede una soluzione analoga nel suo linguaggio ASP (Active Server Pages). 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. che abbiamo visto nella scorsa lezione con JavaScript e Dynamic HTML. Nel caso di una pagina composita (in parte statica e in parte dinamica) avremo il file HTML che contiene gli elementi fissi. avremo il file HTML che la compone. diciamo che la prima inizia nel momento in cui la pagina arriva al browser del navigatore e continua da quel momento in poi. mentre l'interazione lato server è invece completamente svincolata dal browser. 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. cioè viene preceduto dai simboli <!-e seguito dai simboli -->>. i comandi non compaiono nel browser perciò all'esterno non si sa da dove provengono le nostre informazioni. 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. Ad esempio. caricate nella vostra cartella cgi-bin il file guest. Affinché vengano riconosciuti e il server ne esegua l'esplorazione (parsing) per identificare cosa inserire e dove. . La Common Gateway Interface Il secondo passo. Diventa perciò indispensabile contattare il proprio amministratore di sistema prima di pianificarne l'impiego. Per un'analisi dei vari co- mandi e della relativa sintassi rimandiamo alla documentazione dei diversi tipi di server. con l’indirizzo completo della cartella cgi-bin presente sul proprio server seguito dal CGI che si desidera richiamare. Molto semplice e molto pratico. Il primo è un file in formato HTML. 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. Gli script CGI che si invocano dovranno ovviamente essere caricati sul proprio spazio Web nella cartella cgi-bin. Giusto per chiarire le differenze tra l'interazione lato client. Chi intendesse utilizzare gli script presentati in questa lezione sui propri server. che vedremo brevemente più avanti. Nel caso di Apache. inoltre l'attivazione degli SSI può comportare problemi di sicurezza. Spesso si usa il suffisso SHTML. consumano poca potenza di elaborazione. animazioni. Il comando in sostanza funge da segnaposto e cede il proprio spazio all'elemento da innestare (include). In tal modo. È 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.7a lezione Che cos’è un server Web Per capire come attivare questo genere d'interazione dobbiamo anche capire che cosa è un server Web. consentono d'inserire informazioni aggiornate in pagine che altrimenti sarebbero completamente statiche. un comando SSI viene inserito nella pagina HTML sotto forma di commento. non gravi. eccetera). che descriviamo in questa lezione. Tutti gli script CGI-Perl (facilmente riconoscibili per l’estensione . sul proprio server Web. il secondo è lo script CGI-Perl vero e proprio (da memorizzare sul proprio server nella cartella cgi-bin). e l'interazione lato server.openmaster. compresa la gestione di eventuali include lato server). il più diffuso tra i server Web in ambito Linux e disponibile gratuitamente anche per Windows. le immagini collegate ed eventuali oggetti creati con programmi esterni (suoni. qualora il server non riconoscesse il comando e questo rimanesse all'interno della pagina che viene spedita al navigatore. infine la loro funzionalità è fortemente influenzata dalla configurazione del server. il guestbook. notare la presenza di eventuali istruzioni di inclusione e allegare la parte indicata. ma deve invece risultare compatibile con le funzioni e i servizi previsti dal server che intendiamo utilizzare.cgi quindi modificate l’attributo action contenuto nella tag <FORM> del file guest. i file che contengono SSI vanno contrassegnati con un suffisso particolare. il browser ne ometterebbe la visualizzazione considerandolo alla stregua di un normale commento.

facilita il trasporto (porting) degli script sviluppati su piattaforme diverse (ad esempio da Windows a Linux e viceversa). dall'interprete del linguaggio in cui sono state scritte e convertite in comandi eseguibili dal server. Per la stesura del codice Perl o per la visualizzazione di script. come si capisce anche dal nome. ma richiedono trattamento. solitamente per motivi di sicurezza. L’identificazione della cartella cgi-bin e delle modalità per l’accesso alla stessa costituiscono le prime operazioni da compiere: proprio (e solo) da questa cartella. In questo caso non si tratta semplicemente d'inserire contenuti esterni. sempre con lo scopo di testare i nostri script CGI prima di caricarli sul server Web. tali informazioni non possono essere visualizzate direttamente. CGI è l’acronimo 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. Un esempio tipico nell'impiego di quest'ultimo è nella compilazione di form (moduli online) che raccolgono dati dall'utente e gli restituiscono risposte. una volta eseguito (in questo caso all’atto dell’ingresso nel sito Web di un nuovo visitatore). 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. legge l’ultimo valore assunto dal contatore (e memorizzato sul disco fisso del server Web). Tale file. Gli script CGI sono facili da comporre e hanno dimensioni ridotte. C++. Si tratta di un contenuto dinamico che incrementa automaticamente a ogni nuova visita. raccolta dei parametri per una ricerca. come nel caso dei motori di ricerca che offrono la possibilità di eseguire ricerche anche nel nostro sito. il contatore costituisce un classico esempio di file generato mediante uno script CGI eseguito direttamente sul server. permette di separare rapidamente i caratteri in campi ed in dati che possono poi essere utilizzati dallo script CGI-Perl in vari modi. 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. è un file che contiene una serie di righe di codice che vengono interpretate. 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.textpad. Non tutti gli amministratori consentono l’utilizzo di CGI. il più utilizzato. indicandogli la pagina desiderata. Più avanti. all’interno dello spazio Web messo a disposizione dal provider Internet. Bisogna memorizzarli in una cartella all’interno della quale il server possa localizzarli. potranno essere eseguiti i vostri script CGI. vedremo come configurare Apache e Microsoft IIS (i server Web più utilizzati in tutto il mondo) per eseguirli in locale. così come per JavaScript.7a lezione  che elaborino contenuti in base alle selezioni e alle richieste del navigatore. In particolare. diventa possibile creare pagine HTML basandosi su dati residenti sul server. il nostro computer (client) contatta Schema di funzionamento dell’applicazione 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. compilazione di questionari. verificate che lo spazio Web a vostra disposizione vi permetta di eseguire anche script CGI: accedete via FTP (potete utilizzare. Uno script. Qualunque ne sia la fonte. Tali contenuti possono provenire da fonti esterne. com) oppure HTML-Kit già presentato nelle precedenti lezioni del nostro corso. il server esegue localmente l'elaborazione necessaria. dal navigatore che risponde a quesiti posti su pagine precedenti oppure da altri programmi presenti nel sito. eseguito mediante uno dei tanti linguaggi di programmazione che possono funzionare sul vostro server Web oppure su un altro server che lavori in parallelo. Bene. 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. Inoltre è relativamente facile da imparare. lo ricordiamo. Nella descrizione di un sito statico. Ogni vol- ta che dovete elaborare file di testo (il che include naturalmente anche numeri. 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. Molti di voi avranno visto siti con il classico contatore degli accessi. è quindi sempre bene chiedere al proprio provider se abiliti le funzioni CGI e se offra la compatibilità con i linguaggi che intendiamo utilizzare. una per una. TextPad (www. Perl e AppleScript per citare i più diffusi. Perl. ma disponibili direttamente all'utente. acquisto di prodotti. In pratica. È completamente gratuito e supera qualsiasi altro linguaggio nelle sue funzioni di elaborazioni dei testi. Tornando al CGI. può andar bene il Blocco Note di Windows. 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 dell’operatore utilizzato (quindi non è necessario perdere tempo e sprecare risorse per la conversione di un numero in stringa o viceversa). a tale scopo. il programma SmartFTP. abbiamo visto che ogni volta che digitiamo un URL qualsiasi nella barra degli indirizzi del browser Internet. come nel caso degli SSI. C. Perl è insuperabile. Una volta realizzato lo script Perl sul proprio personal computer. I form servono agli impieghi più disparati: registrazione dei nuovi utenti. lo incrementa di uno quindi “spedisce” al client l’output (in questo caso il valore del contatore sotto forma di testo o d'immagine gif). In questo modo lo script potrà essere richiamato e mandato in esecuzione. Ci sentiamo tuttavia di caldeggiare l’adozione di un editor testuale più evoluto: ad esempio. 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. I programmi possono essere scritti in uno qualsiasi dei linguaggi compatibili con CGI: VisualBasic. 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. ossia l'inserimento di un include oppure l'elaborazione di contenuti mediante CGI e trasmette al browser del navigatore solo il risultato. intesi come informazione). aggiornati di frequente. infatti. Se avete acquistato un servizio di hosting per il vostro sito Internet presso un qualsiasi provider Internet. ma di costruirli sulla base di quel che il navigatore chiede o fa. tcl. Per programmare uno script CGI. votazioni su sondaggi. gratuito e "testuale" Abbiamo già evidenziato come i CGI possano essere scritti in vari linguaggi: abbiamo scelto per voi Perl. suggeriamo l’utilizzo di un normale editor di testo. 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. e via dicendo.  . si dovrà quindi provvedere a caricarlo (via FTP) nella cartella cgi-bin. Se possibile. il linguaggio Perl (Practical Extraction and Report Language) è il più usato nell’ambito della programmazione CGI perché nasce con una predisposizione per la gestione delle informazioni.

direttamente sul personal computer client. le possibilità di utilizzo dei form si sono enormemente ampliate: vengono utilizzati. 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 l’interprete Perl print "Content-type: text/html\n\n". quello del webmaster del sito Internet).openmaster. pulsanti di invio (con il parametro type impostato a submit) e di reset (annullamento) dei dati (con type impostato a reset). pulsanti e così via.info/cgi-bin/guest. sulla pagina Internet.meglio TextPad. l’attributo action indica invece che. La restante struttura del form deve essere composta seguendo le specifiche HTML che consentono l’inserimento di caselle di testo. rispettivamente.openma ster. Nella lezione precedente abbiamo visto com’è possibile interagire con un form HTML.org/TR/REC-html40/ interact/forms. 1st Page 2000 o software similari. Oggi. L’attributo “method” indica che i dati inseriti nel form devono essere trasmessi con la modalità “post”. vengano correttamente eseguiti. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. Per programmare in Perl non serve nulla di particolare: è sufficiente un normale editor testuale come il Blocco Note di Windows oppure . option box (se il parametro type è impostato a radio). #Questa linea consente di stabilire che tipo di contenuto deve essere visualizzato print "Ecco la mia prima applicazione CGI!". checkbox. la trasmissione al server Web delle informazioni inserite e la pulizia del contenuto del form. Per approfondire l’utilizzo dei form HTML e scoprire tutte le possibilità che questi offrono. I pulsanti “Submit” e “Reset” permettono.openma ster. Le tag <INPUT>. I moduli compilati venivano infatti poi automaticamente inviati ad un indirizzo e-mail (ad esempio. In definitiva. se il parametro type è impostato a checkbox). dopo la pressione del pulsante di invio dei dati deve essere raggiunto ed invocato lo script CGI specificato (nell’esempio http://www. in questo caso. option box. verrà mostrato il messaggio “Ecco la mia prima applicazione CGI”… congratulazioni! Avrete eseguito il vostro primo script CGI. sulla pa- 1 gina HTML. tramite JavaScript. Nella figura 1 potete notare tutti gli elementi caratteristici di un classico form.pl e caricatelo nella cartella cgi-bin del vostro server.pl consente di verificare che gli script Perl siano correttamente supportati. vi consigliamo di fare riferimento all’indirizzo Internet www.w3. 5. È 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. “Action” indica lo script CGI che deve essere avviato dopo la pressione del pulsante “Submit” (Invia). www. caselle di tipo checkbox (che possono essere o meno spuntate. in modo da risultare più veloci da eseguire (seppur decisamente più “ingombranti” degli script). La tag iniziale <FORM> contiene anche due importanti parametri (method e action). specificate all’interno del corpo del form. ricordiamo che qualsiasi form HTML deve essere racchiuso entro le apposite tag <FORM> e </FORM>. ovviamente.pl (sostituite. per interagire con l’utente. 3. il file test. il seguente URL: http://www.disponibile anche nella più recente versione grafica denominata “GVim” -. nel caso di Perl dal software residente sul server). Fondamenti di programmazione in Perl Perl è il linguaggio più popolare per la stesura di script Perl. La differenza è abissale: mentre nella scorsa lezione ci siamo occupati dell’aspetto client. Se. I N form HTML sono i migliori candidati per l’acquisizione di informazioni da parte dell’utente che visita il sito Web: sono quindi gli strumenti più adatti per interagire con i visitatori.info con l’indirizzo del vostro server Web). oltre al nome attribuito al form (indicato col parametro name): il loro significato sarà presto chiaro. Chi lavora su Linux può orientarsi sull’utilizzo di Emacs o di Vi (riconosce molti linguaggi ed è in grado di colorare opportunamente comandi. memorizzati nella cartella cgi-bin del vostro server Web. #Questa linea imposta il testo che dovrà essere visualizzato sulla pagina Web 1. Questa volta aggiungiamo un altro tassello: ci proponiamo di illustrare come gli script CGI possano interagire con i form. Se si intende salvare in una  . La prima applicazione CGI Per verificare che gli script Perl. Si tratta di appositi “contenitori” (porzioni della memoria) all’interno dei quali è possibile memorizzare ogni tipo di dato. Così come nel caso di JavaScript.7a lezione 2 I form: la porta per l’utilizzo degli script CGI ella scorsa lezione abbiamo già illustrato. brevemente. ogni riga viene interpretata (nel caso di JavaScript dal browser Internet. In primo luogo. 4. La parte più importante del form risulta essere comunque proprio la tag <FORM>: l’attributo method segnala al browser Internet che i dati inseriti dall’utente all’interno del form debbono essere trasmessi al server con la modalità post o get. consentono di porre. qui spostiamo l’attenzione sull’ambiente server ricorrendo proprio all’utilizzo di CGI-Perl. La tag <TEXTAREA> consente l’inserimento di un testo lungo (la casella per l’inserimento del testo occupa. Le variabili e i tipi Già dalla precedente lezione sapete cosa sono le variabili. parliamo di script e non di programmi. 5 righe e 50 colonne).html (in lingua inglese). campi per l’inserimento del testo (se il parametro type è impostato a text). funzioni e parole chiave) . su un sempre maggior numero di siti.cgi). Le tag <INPUT type=”text”> permettono di inserire altrettanti campi per l’inserimento di testo. I programmi sono invece preventivamente compilati. 2. Provate quindi ad inserire nella barra degli indirizzi del browser Internet. 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. In Perl è necessario anteporre al nome della variabile un’indicazione che permette di stabilire il tipo di dato che verrà in essa memorizzato. info/cgi-bin/test. 74/88 Memorizzate il file con il nome di test.

un tipo denominato hash (o array associativo): questo permette di abbinare. 3). Proprio per questo motivo è il metodo più utilizzato. si può stampare sulla pagina Web anche del codice HTML. Tramite l’istruzione print. 2). caporedattore.pl crei una pagina Web direttamente dallo script CGI. Le variabili d’ambiente 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. numeri. <TEXTAREA> l’attributo name. quindi. viene utilizzato il metodo GET. caposervizio e impiegati) ed una costante di tipo stringa opportunamente delimitata (com’è obbligatorio) tra apici.html) offre la possibilità di verificare l’uso delle variabili d’ambiente. come lo script Perl creahtml. Il metodo GET è quindi scarsamente utilizzato quando si vogliono acquisire dei dati da un normale form HTML.$caposervizio. Ma come vengono passati i dati allo script CGI che deve riceverli eD elaborarli? L’attributo action. le informazioni indicate dopo il simbolo ? (punto interrogativo): <a href=”http://www. 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. L’operazione è del tutto analoga a quanto già visto nella scorsa lezione con il JavaScript: è sufficiente aggiungere. Anteponendo il carattere @ (at o chiocciolina) al nome della variabile. L’istruzione “print” e il codice HTML Nel primo esempio di script CGI abbiamo utilizzato un’unica istruzione Perl: si tratta di print. è possibile inizializzarla come variabile di tipo array (chiamati anche matrici). Analogamente a document.open master. Il primo consente di inviare allo script CGI. Verificate.info/cgi-bin/libro. per esempio. per ciascun campo. $caporedattore.7a lezione  variabile un tipo di dato scala- re cioè un numero. Un esempio di hash è il seguente: %libro = (“Titolo:”. $codice. Oltre agli scalari. consente di “stampare”. Tale interazione si concretizza con l’uso di script CGI “collegati” a normali form HTML.$autore) Con l’esperienza ci si accorgerà che gli hash possono rappresentare un ottimo strumento: essi infatti consentono di correlare. esistono in Perl altri tipi di variabili. un insieme di scalari. Un esempio di array è il seguente: @redazione = ($direttore.”Codice:”. Le variabili hash devono essere precedute dal simbolo % (percento). in un’unica variabile. I possibili valori assegnabili all’attributo method sono POST e GET. Uno degli accorgimenti più importanti per ricevere dati. per il passaggio dei dati.pl. sulla barra degli indirizzi non vengono visualizzate informazioni sui dati che vengono trasmessi al CGI. permette di specificare lo script CGI che dovrà ac2 quisire le informazioni inserite nel form HTML mentre l’attributo method consente di stabilire la modalità di passaggio dei dati. Osservate il formato da utilizzare per l’invio dei dati: dopo il punto interrogativo deve seguire il nome del dato.pl?au tore=rossi&tipo=informatica&a nno=2002”>Trova i libri di infor matica scritti dal Sig. Ad esempio. l’array “Redazione” è formato da cinque elementi ordinati: quattro stringhe (direttore. un identificativo adatto (fig. È bene però precisare che i form non rappresentano l’unico modo per trasmettere dati ad uno script CGI: è infatti possibile inviarli anche tramite un normale link HTML del tipo <A HREF>. all’interno dei marcatori <INPUT>. se si vuole visualizzare qualco- 75/88 sa su una pagina Web. Ad esempio il link seguente. permette di inviare allo script libro. <SELECT>. Qualora si debbano inviare più dati è necessario separarli con l’utilizzo del simbolo & (fig. di porre inizialmente l’istruzione print "Content-type: text/html\n\n". memorizzato sul server Web. in un’unica variabile immediatamente accessibile. Provate ad analizzare il codice HTML del file guest. Esiste. il simbolo del dollaro ($). costanti). una stringa (un testo) o una costante. sulla pagina Web. Lo script libro. una quantità illimitata di dati.” Gruppo Editoriale Agepe”. In questo modo si comunicherà al browser Internet che dovrà aspettarsi l’arrivo di una pagina in formato HTML. è indispensabile anteporre.html: ciascun campo che costituisce il form per l’inserimento dei dati del “libro degli ospiti” è identificato con un attributo name. 3 Passaggio dei dati a script CGI: metodi POST e GET Abbiamo già evidenziato come gli script CGI consentano di interagire con l’utente che visita il nostro sito. $nome è una variabile di tipo scalare che potrà essere utilizzata per memorizzare una stringa di testo. Rossi nel l’anno 2002</a> In questo caso.$impiegati) Com’è possibile notare. Un array può contenere da zero elementi sino a quanti sono consentiti dal quantitativo di memoria in uso. da inserire nella tag <FORM>. una stringa di testo. Lo script CGI acquisirà i dati inseriti dall’utente in ciascun campo del form proprio riferendosi agli attributi name: scegliete. inoltre. il simbolo di uguaglianza quindi il valore. file libro. Gli array sono dei gruppi di scalari: ciò significa che all’interno di una variabile di tipo array è possibile memorizzare un insieme di valori (stringhe di testo.”Autore:”. Quando si utilizza il metodo POST.$titolo_libro. poi.. consiste nel contrassegnare ogni campo che costituisce il form con un nome identificativo. un nome ed il relativo valore. al nome della variabile. Notate che l’argomento della variabile $ENV deve essere racchiuso tra parentesi graffe .pl che viene invocato dal link HTML (ved. Bisogna sempre ricordare.write di JavaScript.

html.org ed al newsgroup italiano it.html. guestbook. method stabilisce la modalità di invio degli stessi. HTTP_USER_ AGENT di recuperare le informazioni sul browser e sul sistema operativo utilizzati dall’utente. Lo script CGI. gli script contenenti le operazioni da effettuare vengono trasmessi in chiaro . Chi possiede una rete locale può pensare alla realizzazione di servizi di gestione della propria attività basati su Intranet. Il CGI variabili_ambiente. da variabili d’ambiente.www.a mero scopo didattico . è bene allestisca a casa propria o nel proprio ufficio .cgi).7a lezione ed apici. il server riceve i dati sotto forma di coppie nome-valore. potrete utilizzarlo per testare le vostre pagine Web facenti uso di tecniche di programmazione che implicano l’interazione con il server. www. invece. Abbiamo comunque già visto come. Il parsing dei dati permette di scomporre le informazioni ricevute nella forma che lo script CGI si aspetta.it: è possibile reperire qui un’ampia raccolta di link verso siti Web che offrono materiale in modo del tutto gratuito. Nel nostro esempio. potranno raffinare le stesse conoscenze con l’obiettivo di allestire un vero e proprio server Web personale.pl permette di ottenere la lista completa dei valori assunti da tutte le variabili d’ambiente al momento della sua esecuzione.openmaster.pl effettua proprio il parsing dei dati ricevuti dal form HTML contenuto in sondaggio. 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 dell’ufficio.pl"> Nome:<br><input type="text" name="txt_nome" size="30"><br> Et&agrave. Quando un utente invia i dati inseriti nel form cliccando sull’apposito pulsante submit.com. Tali informazioni. Chi sviluppa siti Web dinamici. da link. venga restituito loro un risultato: talvolta può trattarsi di una cosa semplice – come l’invio di un messaggio -. altre volte si devono gestire funzionalità più complesse come l’inoltro di un ordine di acquisto. al suo interno. i dati del form vengano trasmessi al server. può fare riferimento ai siti Web www.comp.cgi (consultabile anche via Web all’indirizzo http://groups. deve necessariamente scomporle in pezzetti più piccoli: il processo prende il nome di parsing. Una volta che il sistema ri- sulterà adeguatamente configurato. L’obiettivo di questa lezione non è quello di improvvisare sistemisti i nostri lettori ma vuole rappresentare un punto di partenza per tutti coloro che desiderano approfondire le tematiche relative alla programmazione lato server. dopo LISTATO 1 <form name="form_sondaggio" method="post" action="http://www.pl assumeranno una forma simile alla seguente: txt_nome=Mario+ Rossi&Eta=30&risp1=buono. I più volenterosi ed i più in- teressati all’argomento. per poter essere utilizzabili. HTTP_REFERER di ottenere l’indirizzo della pagina Web che ha richiamato l’esecuzione dello script CGI. Abbiamo già visto come i dati possano provenire da fonti diverse: da normali form HTML. Proviamo ora a cimentarci con l’utilizzo del metodo POST.comp. inserendo dei dati in un form. in un unico blocco continuo. Esempi e risorse per approfondire Chi volesse approfondire l’argomento programmazione CGIPerl. Esistono altre variabili d’ambiente: CONTENT_ LENGTH consente di stabilire la lunghezza dei dati trasmessi col metodo POST. o quando clicca su un link (come quello che invocava lo script libro. così come abbiamo avuto modo di apprendere nella scorsa lezione.al browser Internet. dapprima. carrelli della spesa. I visitatori del vostro sito Web si aspettano che. Immaginiamo di aver creato una pagina Web (ved. l’attributo action consente di indicare lo script CGI cui devono essere passati i dati inseriti nel form.uno o più server Web in modo tale da verificare il perfetto funzionamento delle pagine realizzate prima ancora di porle online.www.pl).un personal computer di casa o dell’ufficio a server Web: potrete effettuare qui le vostre prime prove di configurazione.:<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 l’utente avrà cliccato sul pulsante Invia.html) contenente. quando un utente clicca sul pulsante di invio. Com’è possibile sviluppare uno script CGI che acquisisca le informazioni trasmessegli dal form con l’utilizzo del metodo POST? Non ci dilungheremo qui in una trattazione dettagliata del problema perché meriterebbe un’analisi piuttosto approfondita. il risultato dell’operazione viene quindi trasmesso al browser (client) dell’utente che sta visitando il sito Web. piccoli motori di ricerca. il seguente codice per la visualizzazione di un form (listato 1): Al solito. estremamente vasto e sfaccettato. infatti.google. Chi invece fosse interessato all’utilizzo di script CGI che consentano la visualizzazione di contatori grafici e testuali per il proprio sito Web.perl.“così come sono” . il file sondaggio.com/ groups?hl=it&lr=&ie=UTF-8& group=it. però. può fare riferimento al sito http://cgipoint. mailing list e così via. devono essere “confezionate” in un formato correttamente leggibile da parte del vostro script CGI. per poter far uso di tali informazioni.perl.info/cgi-bin/sondaggio. di “convertire” .  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. lo script CGI che deve elaborare le informazioni inserite nel form ha bisogno di quei dati. interpretati ed ese- A 76/88 guiti su ciascun computer client. i dati trasmessi allo script sondaggio. prima ancora di caricarle sullo spazio Web messovi a disposizione dal vostro provider Internet. Nel caso di JavaScript. Comprendere come operano Apache o IIS consentirà. In ogni caso. Il blocco racchiuso tra i commenti #inizio_parsing e #fine_parsing nello script sondaggio. Il lettore avrà quindi già compreso come la conoscenza del funzionamento del server  .

Gli aspetti che vanno considerati prima della “messa in opera” di un server Web sono la facilità d’installazione e di configurazione. netcraft. Linguaggi come ASP e PHP hanno aperto scenari fantastici.NET. Ciascun sito “virtuale” sarà però raggiungibile nella forma http://123. Gli sviluppatori di pagine Web hanno sentito infatti. la puntualità con cui vengono rilasciati aggiornamenti. raggiungibili dall’esterno nella forma http://www. Il processo è del tutto trasparente agli occhi dell’utente.7a lezione  Web apra enormi possibilità. di gestire la contabilità dell’azienda semplicemente da un’interfaccia Web). sebbene siano molto simili per ciò che concerne l’interfaccia grafica di amministrazione. che necessiterebbero una trattazione ampia ed articolata. 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. Nacquero.45. Sostanzialmente. impensabili all’epoca in cui tutto il Web era immobile. le sue caratteristiche peculiari. quindi. eventuali patch e nuove versioni. In pratica. condizionato dalla staticità dell’HTML: si pensi. immaginate di poter memorizzare tutte le informazioni che dovranno essere inserite nel vostro sito Web (ad esempio. restituendo all’utente solo le informazioni cui egli era effettivamente interessato. lo script in grado di recuperare le informazioni e di generare la pagina Web. nel mese di marzo 2003. Dopo CGI hanno preso ampiamente piede ASP.89/nome_sito ove 123.it o www. al loro interno. si dovrà imparare ad applicare patch e severe policy di sicurezza.89 è l’indirizzo IP associato in quel momento alla macchina dotata di Windows 2000 Professional e IIS. sia la versione Server di Windows 2000/2003. Le differenze tra le due versioni. Tale versione di IIS è infatti assolutamente inadatta se si vuole allestire un server professionale. Va sottolineato che la realizzazione di progetti complessi implicherà la necessità di misurarsi immediatamente con problematiche assai importanti come quella della sicurezza. L’indagine che Netcraft effettua mensilmente (www. le performance garantite ed il consumo di risorse macchina. il supporto di più piattaforme hardwaresoftware. 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. in formato Microsoft Access). prima ancora di “pubblicarli” on line (sul server Web messo a disposizione dal proprio provider Internet). molto superiore rispetto a Windows 2000 Server in termini di affidabilità e di prestazioni. 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).com/survey/. In Windows XP Professional. il supporto di transazioni sicure. il supporto tecnico. I tempi in cui il Web era concepito come un insieme di pagine statiche collegate da semplici collegamenti ipertestuali (link) sono ormai remoti. Grazie all’utilizzo di script “server-side” il server Web sarà in grado di attingere dal database solo le informazioni alle quali il visitatore è interessato. i server Web più utilizzati in tutto il mondo.net craft. Se non si vuole vedere il proprio server Web violato dall’esterno. da subito. di creare veri e propri siti Internet. dalla medesima macchina.67. Una volta verificata la corretta visualizzazione di tutte le pagine Internet su una tranquilla workstation locale dotata di Windows XP Professional e IIS. l’esigenza di svincolar- 77/88 si dalla staticità dell’HTML. ColdFusion e JSP mentre sta cominciando a fare capolino il nuovo Microsoft . 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. preparata “al volo” direttamente sul server Web. le sue dimensioni. PHP. Secondo le statistiche disponibili all’indirizzo www. si desideri rendere accessibili numerosi siti Internet nella forma www.nomedelsito. La versione di IIS di Windows XP Professional non permette infatti. 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. a mero titolo esemplificativo.ilmiosito. nome_sito è il nome della directory virtuale contenente le pagine Web da visualizzare.com. Queste tematiche. la possibilità di accedere a determinati dati. l’installazione di IIS deve essere avviata manualmen- . Windows 2003 Server. Server Web professionali Al giorno d’oggi 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. non è pensabile adottare questa soluzione nel caso in cui. In questo modo è possibile acquisire dall’utente la lista delle informazioni alle quali egli è interessato. ricercarle sul server quindi proporgliele sotto forma di una normale pagina HTML. 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. 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. attraverso la Rete. di acquisire ordini dai clienti.45. Nel caso di un catalogo memorizzato all’interno di un database (per esempio.5% dei server totali a livello mondiale mentre Microsoft IIS sul 27%. le possibilità di personalizzazione.com ma semplicemente di creare una serie di directory virtuali: in ciascuna di esse si potranno memorizzare le pagine costituenti un unico sito. CGI è proprio una delle prime tecnologie che vennero offerte agli sviluppatori per rendere maggiormente dinamici i propri progetti sul Web. è atteso per i primi di maggio). 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.ilsuosito.67. che è oggi possibile generare automaticamente pagine HTML riversando. il contenuto di un database. sono piuttosto marcate.0). se più fortunati. inserirvi all’interno i dati richiesti e proporre il tutto all’utente. descrizione ed altri dati caratterizzanti) in unico database.com) suggerisce quali siano. le differenze in Windows XP Pro e 2000/2003 Server Sia la versione Professional di Windows XP (così come Windows 2000 Professional). da parte di hacker e malintenzionati. la disponibilità di versioni gratuite. si dovrà esclusivamente realizzare IIS. Apache risultava in uso sul 62. il catalogo dei vostri prodotti con nome. Le differenze tra l’IIS incluso nelle versioni Server e quello che viene fornito con le versioni Professional sono notevoli (a tal proposito.1 in luogo di 5. comporre una normale pagina HTML. una volta soddisfatti del proprio lavoro. al momento. mettono a disposizione Internet Information Services (IIS). la disponibilità del codice sorgente. saranno oggetto di servizi futuri. i primi linguaggi server-side: l’intento era quello di garantire una maggiore interattività delle pagine Internet. 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. in test presso diverse aziende già da un paio di anni. fate riferimento al box di approfondimento qui sopra). 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.

maggiore sarà l’impatto globale degli stessi interventi. consigliamo di riavviare il sistema operativo (fig. è bene attivare l’utilizzo dei file di log in modo da rilevare anche eventuali tentativi di intrusione. cliccate sulla scheda Nome computer. funzionalità FTP e SMTP. Servizio Web. di un’unica porta: la 443. Dopo l’installazione di IIS. In caso contrario. 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. Suggeriamo.  6 . si accederà alla finestra di configurazione del server IIS. Il pulsante Cambia… permette di modificare a proprio piacimento il nome della macchina (fig. Il server Web (IIS) dovrebbe rispondere alla vostra richiesta mostrandovi la pagina di default. Poiché l’utilizzo della versione di IIS inclusa in Windows XP Professional è consigliato pressoché esclusivamente all’interno di una rete locale Intranet. La prima parte della finestra contiene le informazioni necessarie per l’identificazione del sito. 6).168. selezionate la voce Internet Information Service (IIS) quindi cliccate sul pulsante Dettagli. 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. Qualora siate interessati ad allestire solo un server Web. cliccando su Installazione applicazioni quindi su Installazione componenti di Windows. inoltre. i riferimenti ai file della guida di Internet Information Services. Il campo Timeout connessione permette di stabilire il tempo massimo (in secondi) durante il quale un utente inattivo . è possibile disattivare la casella Consenti registrazione attività in modo da evitare l’occupazione di spazio su disco. Dalla lista dei componenti installabili.7a lezione 4 te accedendo al Pannello di controllo di Windows. Supponiamo che all’interno della rete locale gli sia stato assegnato l’IP 192. Da questa finestra è possibile gestire siti Web. se si prevede che la macchina sulla quale è installato IIS debba essere raggiungibile anche dalla Rete Internet. compresi nome e indirizzo.che non “naviga” cioè al- l’interno del sito . Se poi il computer è collegato ad Internet dovrebbe essere possibile raggiungerlo dall’esterno indicando l’IP assegnato dal provider al momento della connessione. Fate clic con il tasto destro A 78/88 del mouse sulla voce Sito predefinito quindi scegliete Proprietà.4: provate a digitare http:// 192. In alternativa. Una delle limitazioni che Windows XP Professional impone consiste nel fatto di mettere a disposizione l’utilizzo. la seconda per l’accesso SSL.168. Cliccando su OK vi verrà richiesto di inserire il CD ROM di installazione di Windows XP.  4 Configurazione del sito Web predefinito in Windows XP Professional ccedendo al Pannello di controllo di Windows XP Professional e facendo doppio clic sull’icona Strumenti di amministrazione quindi su Internet Information Services. Vi sono poi due voci relative alle porte da utilizzare: la prima. potete provare a raggiungere la macchina IIS facendo riferimento al suo indirizzo IP. essenzialmente.4 da un qualsiasi 5 personal computer della LAN per accedere alla pagina predefinita proposta da IIS. 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. L’altra grossa limitazione della versione di IIS contenuta in Windows XP Professional. per le connessioni SSL. per gli accessi anonimi dal server. È opportuno considerare le varie opzioni per la configurazione di un sito Web da un punto di vista gerarchico: maggiore è il livello gerarchico dell’elemento sul quale si stanno apportando delle modifiche. Snap-in Inter- net Information Services. Per far ciò eseguite Internet Explorer (o il browser installato) e digitate. Al termine della fase di setup. http://localhost (localhost è detto anche indirizzo di loopback ed identifica il vostro stesso computer). accedete al Pannello di controllo. viene automaticamente creato un sito Web predefinito contenente. avviate il browser Internet quindi digitate. 5).0. Per controllare che IIS sia installato e funzionante. consiste nel fatto che il numero di connessioni che possono essere effettuate è limitato a 10. Se il computer è connesso in rete locale. 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. nella barra degli indirizzi. http:// seguito dal nome del computer sul quale è in esecuzione IIS (per esempio: http://michelesrv). come URL.può restare collegato al server IIS. provate ad accedere alla visualizzazione della pagina HTML di default di IIS da un client qualsiasi. suggeriamo di ridurre il valore impostato nel campo Timeout connessione in modo da agevolare l’ingresso di utenti in attesa e di accelerare le prestazioni del sistema. che procederà in modo automatico. fate doppio clic sull’icona Sistema.0. 4). Questa restrizione rende Windows XP Professional assolutamente inadatto per la gestione di un normale sito Web che preveda un numero di accessi contemporanei superiore. Per verificare il nome assegnato al computer sul quale avete provveduto ad installare IIS. potete limitarvi a spuntare le caselle File comuni. Se si prevede di utilizzare IIS solo all’interno della propria Intranet.

fate riferimento al box dedicato ad Outpost Firewall) fig. nella traybar in basso a destra. per motivi di sicurezza. suggeriamo l’utilizzo del software Microsoft Baseline Security Analyzer (MBSA). altri la mappatura degli URL e l’elaborazione delle intestazioni richieste. 8-9). in luogo di localhost. cliccate sulla scheda Dettagli quindi fate riferimento al valore Indirizzo IP del client). è possibile simulare. è possibile passare alla creazione di una directory virtuale. cancellate anche le cartelle \inetpub\wwwroot (o \ftproot o \smtproot). sinora illustrate. nella barra degli indirizzi del browser Internet. Primi accorgimenti e creazione di una directory virtuale Microsoft stessa. fate doppio clic sull’icona raffigurante due piccoli computer. al posto di localhost. Questa modifica vi permetterà di evitare un messaggio d’errore che informa sull’inesistenza della cartella specificata (fig. Per far questo eliminate. Esplorazione directory se selezionato. se selezionato. Per visualizzare il contenuto di queste ultime bisognerà conoscerne l'alias associato. Le scelte possibili sono tre: Directory situata in questo computer. un utente della nostra LAN dovrà digitare. Directory condivisa situata in un altro computer e Reindirizzamento a un URL. permette l'accesso al codice sorgente degli script. Printers) e tutti i contenuti predefiniti (cancellate le cartelle inetsrv\iisadmin e inetsrv\iisadmpwd – entrambe contenute nella cartella \winnt\system32 -. 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. Dopo aver effettuato le regolazioni iniziali. La sezione sottostante della finestra permette di impostare le tipologie di accesso consentite. pagine Web statiche e dinamiche così come appariranno successivamente dopo averle caricate sul server. . inetpub\adminscripts. Per accedere alla stessa directory virtuale.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. A questo punto fate clic con il tasto destro del mouse su Sito web predefinito. dalla finestra di amministrazione di IIS. script oppure script ed eseguibili. Per evitare l’accesso 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. una directory virtuale o un file (fig. Destinando una directory virtuale a ciascun sito su cui si sta lavorando. visua7 8 79/88 lizza in formato ipertestuale il contenuto di una cartella non virtuale. creata sul nostro computer. richiede di specificare un alias per la directory virtuale che si sta crean10 do. 11. dovremo digitare. IISSamples. È possibile visualizzare. http://paperino/pcopen. chiunque vorrà accedere al contenuto della directory virtuale. 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. quindi. inetpub\scripts. Nella versione di IIS inclusa in Windows XP Professional è immediato pensare di creare una directory virtuale per ogni sito Web che si sta sviluppando. nella barra degli indirizzi http://localhost/pcopen. Indicizza questa risorsa se il servizio di indicizzazione è attivo. L’utilizzo 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 sull’ottimizzazione del sito. il server Web risponderà con un messaggio di errore (accesso negato). Per creare una nuova directory virtuale. aggiunge la risorsa a quelle da indicizzare. cliccate sulla scheda Home director y. inetpub\iissamples. IISAdmin. Registra visite aggiunge la risorsa a quelle da monitorare per mezzo dei file di log. Scrittura permette l'accesso alla risorsa in lettura/scrittura. l’indirizzo IP associato in quel momento alla macchina (per stabilire l’indirizzo IP associato al proprio computer all’atto della connessione Internet.7). WebPub. %systemroot%\help\iishelp\iis e %systemroot%\web\printers. MSADC. 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. sul proprio computer. tutte le directory virtuali create dopo l’installazione di Internet Information Services (cancellate le directory virtuali Scripts. La scheda Documenti consente di impostare le pagine che devono essere automaticamente proposte all’utente qualora egli non specifichi il nome di un file memorizzato sul server. Vi sono diversi tipi di filtri: alcuni soddisfano esigenze relative alla sicurezza. Lettura consente l'accesso alla risorsa in sola lettura. 10). Se l'opzione non è abilitata e l'utente specifica all'interno dell'URL un percorso ad una risorsa inesistente. La finestra immediatamente successiva a quella di presentazione. Ad esempio. è sufficiente fare clic con il tasto destro del mouse su Sito web predefinito quindi seguire la procedura passo-passo che viene presentata. IISHelp. Il menU a tendina Autorizzazioni di esecuzione permette di indicare il livello di esecuzione autorizzato sulla risorsa: solo file HTML. e se sono impostati i premessi di lettura e/o scrittura. l’indirizzo IP associato alla nostra macchina oppure il nome della stessa: ad esempio. La scheda può assumere diverse forme a seconda che si sia selezionata una directory. il comportamento del server Web che lo ospiterà. L’alias è l’identificativo che dovrà digitare. Accesso origine script. già presentato nei numeri 78 (a pagina 61) e 79 (a pagina 69) di PC Open. quindi eliminate wwwroot dalla casella Percorso locale (dovrebbe restare solo c:\inetpub). 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. supponiamo di inserire pcopen come alias: ciò significa che se dal browser Internet si 9 vuole accedere alla directory virtuale di PC Open.

una nuova 12 80/88 voce. Ad esempio. per ragioni di sicurezza. viene visualizzato un messaggio d’errore che segnala all’utente l’impossibilità di accedere alla directory. Attivando la casella Autenticazione di base vengono richiesti il nome e la password dell’utente. L’opzione Autenticazione integrata di Windows sfrutta invece un metodo completamente diverso per l’identificazione dell’utente: in questo caso il sistema operativo effettua uno scambio di dati crittografati con il browser dell’utente grazie ad un metodo di certificazione digi- tale installato sul personal computer client insieme con il browser Internet. qualsiasi forma di accesso anonimo. IIS passa alla ricerca di default. Gli utenti anonimi non dovranno inserire alcun nome utente identificativo né alcuna password per accedere ad una directory virtuale sul vostro computer. Cliccando con il tasto destro del mouse sulla directory virtuale pcopen appena creata quindi scegliendo Proprietà. nella barra degli indirizzi del browser. IIS ricerca iisstart. L’unico 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. La lista dei documenti predefiniti è liberamente personalizzabile (fig.  . Gli altri tre livelli di accesso richiedono l’identificazione dell’utente prima di consentire l’accesso alla directory. 13). Le due opzioni successive sono utilizzabili in Windows 2000 Professional solo se la macchina è colle. Il nostro consiglio è quello di effettuare una prova copiando i file d’esempio che trovate nel CD ROM allegato a questo numero di PC Open in una cartella sul vostro disco fisso. se questo non viene trovato. Diversamente dalla versione server di IIS.7a lezione 11 13 Dopo l’impostazione dell’alias. Il primo riguarda la gestione della sicurezza.asp non è presente nella cartella. digitando nel browser l’URL http://localhost/pcopen.htm. Se anche il file default. 12). in grado di analizzare il contenuto di ogni pacchetto inviato e ricevuto. Suggeriamo di attivare solo le caselle Lettura ed Esecuzione script. in Windows XP Professional non è possibile controllare l’accesso in base all’indirizzo IP. Il secondo aspetto da evidenziare riguarda la priorità con la quale vengono visualizzati i documenti contenuti in una directory virtuale. avrete accesso alla finestra delle proprietà. Facendo clic sul pulsante Modifica. La scheda Protezione directory permette di stabilire le modalità con le quali un utente può accedere alla directory virtuale. l’URL http://localhost/pcopen.asp. Come ultimo passo. specificate qui la stessa directory (servendovi del pulsante Sfoglia…) (fig. 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). sul vostro computer locale sarebbe bene inibire. Cliccando sul pulsante Avanti quindi su Fine. l’utente verrà registrato nel sistema per mezzo di un account “ad hoc” (generalmente denominato IUSR_nomecomputer. a questo livello. è possibile indicare quali file devono essere mostrati se l’utente non richiede la visualizzazione di uno specifico file.14 gata ad un server di dominio. Nella scheda Documenti. verrà infatti visualizzata automaticamente la pagina default. se decidete di porre tali file in una cartella denominata C:\PCOpen_esempi. Nel nostro esempio. è necessario indicare la cartella che deve essere puntata ossia la directory su disco che contiene (o all’interno della quale si intende memorizzare) i file che costituiscono il sito Web. è bene sottolineare. verrà dapprima cercato il file default. Nonostante l’accesso sia “anonimo”. 14). si concluderà la procedura guidata. se anche tale file risulta irreperibile. L’intercettazione può avvenire tramite un software (o un hardware) denominato sniffer. Se su un server Web di solito si deve consentire l’accesso ad un sito senza digitare alcun nome utente e password. ove nomecomputer è il nome associato al computer sul quale è in esecuzione IIS). corrispondente all’alias da voi scelto per la directory virtuale. vedrete comparire all’interno del ramo Sito web predefinito.htm. Sono due gli aspetti che. è necessario specificare le autorizzazioni che si desiderano impostare per la directory virtuale in corso di creazione. Come risultato.asp. molto simile a quella già vista in precedenza per il Sito Web predefinito (fig. Digitando.

tool di supporto e così via. è la 2. effettuabili agendo sul file httpd. Per rendere la configurazione di Apache più semplice ed intuitiva – evitando.msi. A 15 81/88 Per avviare l’installazione di Apache. La versione Windows è disponibile sul CD guida allegato per concessione di Active State che detiene il copyright su Active Perl e Perlscript. Si tratta di un prodotto solido. 15).msi (prelevabile gratuitamente all’indirizzo http://na goya. per prima cosa si dovrà accettare il contratto di licenza d’uso (da leggere attentamente) quindi scegliere la cartella all’interno della quale si desidera installare il pacchetto software (fig.gz quindi seguite scrupolosamente i comandi che trovate elencati nella documentazione di Apache circa l’installazione del Web server in ambiente Linux. Apache differisce da IIS per il fatto di essere completamente gratuito e di mettere a disposizione tutte le funzionalità di un server Web avanzato. Il server Web Apache.0/install.805-MSWin32-x86.0. strumenti di configurazione. L’Apache Group è poi solito pubblicare tempestivamente. ActivePerl è semplicissimo da installare e configurare in en- trambi i mondi: servendosene si potrà provare tutti gli script CGI Perl sul proprio personal computer. Tra l’altro Apache può essere impiegato su una qualunque versione di Windows (Windows 9x compreso). nella forma http://localhost/nomesottodirectory/nomefile.com/. è sufficiente collegarsi con il sito www. Così come in Linux.7a lezione 5 Installare e configurare Apache sotto Windows pache è il server Web attualmente più utilizzato al mondo. a segnalare che il Web server è già in esecuzione (fig 16).conf contenuto nella cartella \Apache\conf. accedete alla cartella ove avete scaricato il file d’installazione in formato . ActivePerl su Windows ActivePerl è un software gratuito che contiene la più recente versione di Perl per ambiente Windows. all’interno della traybar (ossia l’area situata in basso a destra. Ad installazione conclusa provate ad avviare Internet Explorer o il browser in uso e digitate http://localhost. Apache è un software estremamente aperto (sono addirittura reperibili sul sito www. Se il server Web vi risponderà con la finestra visualizzata in figura avrete installato correttamente Apache.0/mod/ quickreference.html.tar. Portatevi alla riga di comando Linux. più di recente. Lasciate attiva l’opzione for All users. Dopo la schermata iniziale. accanto all’orologio di Windows). L’installazione di ActivePerl per Windows è avviabile facendo doppio clic sul file ActivePerl5. on Port 80. ne offre anche una versione per Linux così da non modificare il proprio lavoro nel caso lo si traghettasse nell'altro ambiente.org/docs-2. fate doppio clic sul file apache_2.html.conf – sono nati dei tool basati su interfaccia grafica. nato per funzionare come processo “stand alone” ossia senza richiedere l’appoggio di altre applicazioni o di altri componenti software. Il produttore. I file componenti il sito Web (HTML.apache.conf. nato in ambiente Linux. apache. incluso Mac OSX e. A titolo d’esempio citiamo ApacheConf (a pagamento) prelevabile all’indirizzo http:// www.44. con lo scopo di saggiarne le principali funzionalità. Se l’utente non specifica alcun file ma si limita a digitare un URL del tipo http://localhost/nomesottodirectory.0. Nella finestra successiva selezionate Typical quale modalità di installazione quindi inserite la cartella ove desiderate che Apache venga collocato.44: sul sito dedicato a questo server Web (http://httpd. va oltre gli obiettivi di questa lezione.html.org/ docs-2. che viene quindi tradotto in linguaggio macchina al momento dell'esecuzione.0. ActivePerl si compone di di- Apache sotto Linux Alcune distribuzioni Linux contengono già il server Web Apache e ne offrono l’installazione. è disponibile per tutte le piattaforme Unix.0. . è stato portato anche in Windows. proprio in questo sito Web. Ricorrendo all’utilizzo di Risorse del computer (o Gestione risorse).org e scaricare il file d’installazione per Linux (httpd-2. All’interno della stessa cartella. dovrebbe comparire l’icona di Apache. dal browser Internet.tar. alla configurazione ed all’aggiornamento dello stesso. il primo file che verrà automaticamente richiamato sarà index. apache. L’ultima versione di Apache disponibile al momento della stesura di questo servizio.html per ottenere una lista completa delle regolazioni (direttive) applicabili. 17). Suggeriamo di fare riferimento alla pagina http://httpd. Trattandosi di un linguaggio interpretato.gz). Se state installando Apache per la prima volta.apache. così. ActiveState.44-win32-x86no_ssl. aggiunte varie. as a service (fig.msi). di dover intervenire direttamente sul file di testo httpd. noto come “Apache Group”.org/) è possibile reperire le informazioni relative all’installazione. le patch risolutive per eventuali bug di sicurezza scoperti con il passare del tempo. Al termine della procedura. Dopo l’accettazione dei termini della licenza d’uso (che consigliamo di leggere con attenzione) e delle note generali sull’installazione (Read This First) sarà necessario inserire alcune informazioni riguardo al server Web che si sta configurando. digitate localhost nel campo Server Name ed inserite la vostra e-mail nel campo Administrator’s email address.apache.…) andranno posti nella sottodirectory denominata htdocs.apa che.0. Se si desidera comunque utilizzare l’ultima versione disponibile.44win32-x86-no_ssl. è necessario disporre di un interprete ad hoc per ciascuna delle piattaforme su cui lo s'intende utilizzare.8.org/mirror/httpd/ binaries/win32/apache_2. consultabile in qualunque momento all’indirizzo seguente: http://httpd. PHP. potete creare sottodirectory in modo che il loro contenuto possa essere richiamato. portatevi all’interno della cartella ove avete installato Apache quindi fate doppio clic sulla directory denominata Conf.org i sorgenti veri e propri) che offre anche la possibilità ad altre aziende di crearsi un business mediante lo sviluppo di plug-in. Cliccando sul pulsante Install verrà avviata la fase di setup che si concluderà in pochi istanti. anche in Windows il file che consente la 16 configurazione dell’intero server Web è httpd. L’analisi delle varie opzioni di configurazione di Apache. performante e supercollaudato: è il frutto (completamente gratuito) del lavoro di un team di volontari.apache-gui.

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.pl che trovate nel CD allegato a PC Open nella cartella cgi-bin. dovrebbe venire correttamente visualizzata la frase Ecco la mia prima applicazione CGI! (fig. per motivi di sicurezza. Programmi. Supponiamo che abbiate copiato.pl (Perl) nella cartella cgi-bin.exe (supponendo di aver installato ActivePerl nella cartella c:\Perl). Adesso. Per provare gli script Perl contenuti nel nostro CD.pl che trovate nel CD ROM di PC Open nella cartella cgi-bin della directory virtuale pcopen. la cartella Home directory.pl: il browser Internet visualizzerà semplicemente il codice Perl che compone lo script CGI ma questo non verrà eseguito. cliccate su Start.pl nel browser Internet. da qualunque tory virtuale e da qualsiasi 18 82/88 cartella). è quindi sufficiente copiare i file con estensione . cliccate sul pulsante Configurazione: la procedura di installazione di ActivePerl dovrebbe aver inserito. aprite con un normale editor di testo tutti i file con estensione . le potenzialità e la configurazione di ActivePerl. disponibile in formato HTML.dll. nella barra degli indirizzi.pl (sostituendo a nomefile. nstallarlo. lo script CGI test. suggeriamo di consultare l’ottima guida. nel caso di Apache. l’URL http://localhost/cgibin/test. creata in precedenza in IIS. Ad installazione di Apache conclusa è sufficiente provvedere al setup di ActivePerl. l’inzione di ActivePerl abilita ro server Web all’esecudei CGI (da qualsiasi sito configurato. selezionate la voce Servizio WWW quindi cliccate sul pulsante Modifica (fig. la cartella cgi-bin viene automaticamente all’interno della directory di installazione del server Web. ActiveState ActivePerl quindi su Documentation. 20). cliccate con il tasto destro del mouse sul nome del server e scegliete la voce Proprietà.pl che avete posizionato nella cartella cgi-bin e modificate la prima riga da #!/usr/local/bin/perl a #!c:/Perl/ bin/Perl. In questo modo gli script Perl saranno eseguibili nell’intero server Web. Qualora vi venisse 19 restituito un Internal server error. Una volta terminato il setup di ActivePerl.pl il nome del vostro script Perl): ActivePerl vi segnalerà eventuali errori di sintassi facendovi risparmiare molto tempo. restringere l’esecuzione degli script CGI solo alle cartelle in cui ciò risulti effettivamente necessario. quindi digitare perl –c nomefile. nella cartella cgi-bin. ed installata insieme con il programma vero e proprio. ActivePerl offre anche la possibilità di controllare la sintassi di uno script Perl da voi sviluppato. 18). Avviando ora Internet Explorer e digitando nuovamente http://localhost/pcopen/cgibin/test. accedete quindi alla finestra Gestione Servizio Internet Microsoft dal Pannello di controllo. seguendo le linee guida appena illustrate.pl. Per accedervi. direttamente sul vostro computer. lo script test. le voci Perl %s %s e PerlIS. in fase di setup ci ve assicurare di attivare le le Create IIS script mapping erl e Create IIS script mapfor Perl ISAPI. quindi copiare gli script con estensione . portarsi nella cartella dove avete memorizzato il vostro file Perl. Per chi volesse approfondire ulteriormente le modalità di utilizzo.pl verrà correttamente eseguito visualizzando la frase Ecco il mio primo script CGI! (fig. 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. nella barra degli indirizzi http://localhost/pcopen/cgibin/test.17 elementi. Avviate Internet Explorer e digitate. ActivePerl offrirà il supporto per l’esecuzione degli script Perl anche se decidete di montare il server Web Apache in versione Windows. È sufficiente accedere al prompt di MS DOS. Aprite Internet Explorer e digitate. Provate a copiare lo script test. nell’elenco contenuto nella scheda Mapping applicazioni. 19).pl. Selezionate. digitando http://localhost/cgibin/test. Di solito.  20 . Memorizzate. nella cartella cgi-bin tutti i file Perl da voi creati (o quelli d’esempio che trovate nel CD di PC Open). a questo punto.pl. Tenete presente che. quindi.

Indipendemente dal risultato raggiunto. Come è possibile raggiungere un obiettivo tanto importante? La risposta naturalmente. a questo punto. La promozione di un sito si divide in due parti ben distinte: il raggiungimento degli utenti e la loro fidelizzazione. ancora meglio. ci occuperemo della sua promozione. Con il termine promozione. la creazione di un sito ha un solo grande obiettivo: quello di essere visto da altri. è nostro intento raccogliere tutte quelle attività per far conoscere un Web site al popolo di Internet. la troverete nelle prossime pagine. dovranno ricordarsi di tornarci a visitarlo. È in quest'ottica che si ragiona nel momento in cui si inizia a parlare di “promozione di un sito Internet”. il lettore diventato ormai WebMaster è ovviamente il pescatore.01 • Cosa si può fare con i fogli stile • Quattro tipi di CSS • I colori del Web • Gestire le immagini 83/88 • Esercizi • Ereditarietà e innesco a cascata • Proprietà di trasferimento dei parametri • Regole di ereditarietà • Selettori di classe • Websafe palette • Istruzioni condizionali • Interazione tra JavaScript e form HTML • Interazione tra JavaScript e frame • DHTML Lezione 7: Interazione sul server Lezione 5: Design e multimedialità (disponibile integralmente sul CD) • Elementi di design per il Web • La ruota colore • Grafica e formati di immagini per Internet • Link ipertestuali • Tabelle d’immagini • Mappe immagine • Audio e video Lezione 6: Siti interattivi (disponibile integralmente sul CD) • I linguaggi di programmazione • La programmazione orientata agli oggetti • Oggetti e priorità • Eventi e funzioni • Variabili e stringhe • Gli operatori in JavaScript (disponibile integralmente sul CD) • Il server Web • I form: la porta per l’utilizzo degli script CGI • Installare e configurare un server Web • Configurazione del sito Web predefinito in Windows XP Professional • 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 . i navigatori sono i pesci e il nostro sito Web è la rete da pesca.  IL CALENDARIO DELLE LEZIONI Lezione 1: Competenze e strumenti (disponibile integralmente sul CD) Lezione 2: Siti statici e linguaggio HTML il corso è sul CD guida (disponibile integralmente sul CD) Lezione 3: Modelli di pagina e tabelle (disponibile integralmente sul CD) Lezione 4: HTML 4. dopo aver analizzato le tecniche e i segreti per la creazione di un sito Internet. Tutto l'impegno e il tempo finora dedicato alla realizzazione del sito Web ha avuto un unico grande scopo: mostrare E al popolo della Rete di quanto siamo stati capaci. dovranno essere così efficaci che gli utenti che raccoglieremo dovranno rimanere all'interno del sito e. dobbiamo essere altrettanto capaci di far sì che nessuno poi scappi dalla rete. Ricominceremo dopo l’estate con un nuovo appuntamento dedicato a chi è interessato ad acquisire competenze da Web designer In questa ultima puntata. Se siamo abbastanza capaci di lanciare la nostra rete da pesca tanto lontano da raccogliere molti pesci.01 e CSS (disponibile integralmente sul CD) • Stile e struttura: usare i tag HTML nativi • Il deprecato tag font • I marcatori per formattare il testo • Gestire gli spazi nel testo • CSS e HTML 4. Fuor di metafora. tutte le attività rivolte alla promozione del nostro sito Web. Cosa significa tutto ciò? Possiamo spiegare meglio il concetto con una similitudine: Internet è un mare. dalle conoscenze accumulate e dall'esperienza maturata.8a lezione  A scuola con PC Open Progetto Web Master di Roberto e Alessandro Abbate Promuovere il proprio sito Web siamo così arrivati all’ultima puntata del nostro corso per diventare WebMaster.

che si compone di tutti quei file che i loro spider rintracciano.msn. 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.google. 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. mentre per quanto riguarda il peso.it. Come per tutti gli strumenti. o in tutto il World Wide Web.Cercate sempre l'interazione con i vostri utenti. la dura realtà: nessuno (a parte noi e la nostra ristretta cerchia di amici) lo visita.  . la cosa non potrà che farvi piacere. Ricordiamoci che i visitatori hanno sempre un ottimo motivo per non navigare il nostro sito Web: dovremo essere noi che. ci sarà certamente qualcun altro che condivide il nostro pensiero e avrà quindi interesse a visitare il sito da noi creato. questi motori non cercano in tutta Internet.iol.it). in versione italiana su http:// www. non fanno uso di software come gli spider. 2 . documenti di altra natura (ad esempio i PDF di Acrobat). È impossibile spiegare quando un sito Web è interessante.  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. 3 . essenziale obiettivo. com. A 84/88 È da lì quindi che inizieremo il nostro viaggio alla scoperta dei migliori trucchi per far conoscere il nostro sito Web. o riempire la pagina di immagini animate. Il nostro primo obiettivo sarà quello di rientrare tra i percorsi dei bot. All'estero.it e Arianna. MSN http://www. contenuti e argomenti che a nostro modo di vedere possono attirare l'attenzione. Assolutamente da evitare sfondi animati o colori poco contrastanti (come arancione su nero. infatti lo diventa quando ci sono utenti che lo ritengono tale. fate in modo che la pagina con tutti gli elementi (immagini. di tutte le pratiche e tecniche che si possono applicare. il tempo massimo è di 10 secondi. convegni e incontri per spiegare quali sono le tecniche per fidelizzare l'utente: ovvero per far sì che torni su un sito Web.Dovrete tenere presenti due parole importantissime in Internet: leggerezza e semplicità. Per il resto. possiamo iniziare con le prime.altavista. È grazie al loro aiuto che potrete migliorare il vostro sito. una volta messo on line. Nel vastissimo mondo di Internet infatti. il più famoso e conosciuto è Google (http://www. è quello di pubblicare con una certa continuità. da utenti.google. 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. o giallo su rosso).8a lezione 1 Tecniche di promozione: cosa fare e cosa evitare ono state sprecate pagine. semplicemente eseguono una ricerca all'interno del loro database. Il miglior sistema per raggiungere questo primo. Motori di ricerca Un motore di ricerca è appunto un sito che scandaglia e scheda il Web con l'utilizzo di software automatici. WAV). I link è bene lasciarli sottolineati o se proprio volete cambiarli. O meglio. 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. Ad essere corretti. parole. gli offriremo il pretesto per accedere al sito da noi creato. per chi conosce l'inglese. Web marketing. reperibile su http://arianna. fate in modo che siano sempre ben distinti dal resto del testo normale. I principali motori di ricerca italiani sono il Trovatore. Si tratta delle azioni che assolutamente devono essere evitate per promuovere con successo un sito Web. Cosa evitare Per esclusione. raggiungibile all'indirizzo http://www. Questo tutto automaticamente.iltrovato re.Al punto precedente abbiamo parlato anche di semplicità: con ciò vogliamo dire che è meglio evitare sfondi troppo colorati.Innanzitutto il sito deve avere dei contenuti interessanti. o meglio. esistono dei siti Internet che spesso vengono accumunati ai motori di ricerca ma che in realtà non lo sono e per questo. con discrezione e perseveranza. ma anche file di ogni tipo: immagini. abbiamo raccolto le pratiche da non seguire all'interno del box sulla netiquette più in là nel’articolo. piccole attività di marketing. S Cosa fare A nostro modo di vedere però. Come rimediare? Come iniziare a promuoverlo? La risposta è semplicissima: noi. 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.com.altavi sta. è facile incappare in errori a dir poco evitabili: troppa “foga” nella promozione. le prime cose da evitare corrispondono a tutto ciò che si contrappone con quanto abbiamo scritto precedentemente. Dovremo quindi stuzzicare la loro curiosità e nello stesso tempo guadagnarci il loro rispetto.it) ma ne sistono altri come Altavista (http:// www. Con informazioni non intendiamo solo pagine Web. Per l'attesa. La migliore soluzione è quella di usare sfondi chiari e testo scuro. Tante ore investite nella creazione di un sito Web e poi. per usarli al meglio è necessario conoscerli in maniera approfondita. È 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). video e così via. 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. dove andiamo? Dove iniziano le nostre navigazioni? La risposta può essere una ed una soltanto: i motori di ricerca. Essere leggeri significa creare immagini e documenti che possano essere navigati velocemente dal vostro visitatore. Questo perché i software di cui si avvalgono i motori di ricerca. tracce audio (MP3. eventuali suoni e così via) non superi i 70 KB. Quando si inizia infatti. ne esistono alcune che meritano di essere sottolineate: 1 . quando cerchiamo qualcosa. Non tutti però fanno uso degli spider. disponibile in Italia su http://www. Se poi capitasse di intrecciare nuove conoscenze. 4. Ma da dove si comincia? Se lo chiedono tutti. scandagliano il Web proprio come fanno i ragni all'interno delle ragnatele. Prima parola magica: spider. spider significa ragno.

È altrettanto ovvio quindi. quello più usato è Google. le capacità oppure avesse in gestione diversi siti Web da inserire e ottimizzare nei motori di ricerca.indirizzo-deltuo-sito. La regola di base è: più link da siti esterni portano verso le nostre pagine. se la nostra Home page ha un PR di 5. per la propria directory (http://directory. Ad esempio. DogPile (http:// www. compilare gli altri campi che potrebbero esserci stati richiesti: come titolo della pagina. I metamotori infatti sono motori di ricerca che restituiscono i risultati delle ricerche interrogando altri motori. descrizione. 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.tuttogratis. Una volta raggiunto un motore di ricerca.it). è possibile scaricare e installare la Google Toolbar (http://toolbar. un posizionamento ben studiato su Google può portare ad avere il 50% dell'utenza referente portata da questo motore di ricerca. i siti di punta possono essere seguiti in maniera manuale. Ad esempio esiste TuttoGratis (http://www. Google il più utilizzato dal popolo della Rete È ovvio che il motore di ricerca più usato sia quello capace di portare più utenti. nati all'inizio solo per inserire il proprio sito nei motori di ricerca. Metamotori Trattiamo questo argomento solo per completezza delle informazioni.it). automatizzano il tutto e sostituiscono completamente il lavoro manuale del WebMaster. sarebbe bene che i nostri siti partner ci richiamassero con un codice simile: <a href=”http://www. Alcuni esempi sono Metacrawler (http://www. una banda che si aggiunge al browser Microsoft Internet Explorer e che riporta appunto il Page Rank.org. Un altro esempio di directory di successo è 100Links (http:// www. ciò che dovremo fare è trovare un link del tipo Aggiungi URL o in inglese Add URL. È infatti possibile. i software creati ad hoc per il posizionamento. è possibile che il nostro Page Rank salga. nata per raccogliere i siti recensiti all'interno della sua mailing list che suggerisce 25 siti a settimana (da qui il nome.8a lezione  com. è meglio avere dei risultati minori ma poter avere in ogni momento il polso dell'intera situazione sotto mano: al massimo. le assegna un voto: questo voto è dato da una lunga equazione matematica i cui termini sono ovviamente coperti da segreto e nessuno. se ci linka una pagina con PR 7. dmoz. si tratta solo di seguirle tutte.dmoz. le strade da percorrere sono tante. 100 links al mese) è ora la directory su cui si appoggia l'intero network di Dada con il sito SuperEva (http://www. 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. pensate semplicemente con quali termini volete che i navigatori di Internet possano trovare il vostro sito. 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. in italiano su http:// www. 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. è necessario instaurare degli scambi link tra noi e altri siti.org/World/Italiano). Directory Le directory sono servizi che raccolgono e catalogano i siti in base al loro contenuto.web crawler.google. da solo. ne conosce gli estremi. In Italia e nel mondo. fate riferimento a Pc Open di Marzo a pagina 25 o alla relativa lezione sul CD. Un software con una segnalazione “selvaggia” del nostro sito. Con numeri simili. sarà necessario specificare l'indirizzo del nostro sito e poi. Ne esistono di diversi. Questi programmi. Google stesso. la cui localizzazione italiana è reperibile all'indirizzo http://www. intendiamo tutti quei visitatori che cliccando su altri link arrivano al nostro sito. spesso si assottigliano con accordi di marketing tra le società che gestiscono i motori di ricerca e le directory. che il motore di ricerca da tenere in maggiore considerazione sia proprio quello più utilizzato. oltre al classico inserimento automatico su più motori.yahoo.com). In Italia. Ad esempio Virgilio e Yahoo! sfruttano anche il database di Google per offrire i mi- 85/88 gliori risultati.it) e Dmoz (o Open Directory Project: http://www.supereva. 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.it) che raccoglie solo siti che offrono servizi gratuiti. non potrebbe ottenere lo stesso risultato: avremo risparmiato tempo ma certo non potremmo godere degli stessi risultati.virgilio. Per chi non avesse comunque il tempo. Ne esistono altri che tratteremo nel capitolo “Ottimizzazione del proprio sito”. gratuiti o a pagamento. ognuno con le proprie caratteristiche . è ovvio che il nostro ranking sarebbe troppo basso e che sarebbe ora di studiare qualche piccolo trucco per migliorare la propria posizione. In questo campo. Questo comunque non è l'unico parametro che Google valuta per visualizzare i risultati di una ricerca. Google “dà il voto” alle pagine Web Quando lo spider di Google (che prende il nome di GoogleBot) scheda una pagina Web.freeonline. Per aumentare quindi il voto che Google assegna al nostro sito. Un'altro valore che farà aumentare il nostro Page Rank (PR) è il voto dato da Google alla pagina che ci linka.it) ma anche all'estero ce ne sono molte. Si ottengono vantaggi reali nell'utilizzo di questi software? È inutile negare che la strategia migliore sia quella di effettuare la segnalazione a mano. Sul totale degli utenti arrivati dai motori di ricerca.com). Meglio se il nome del collegamento ipertestuale conterrà delle parole chiave: ad esempio se il nostro sito tratta di modellismo statico. un 80% sul totale. una voce in capitolo molto “pesante” nel calcolo del voto sono i link verso una determinata pagina Web. Da qui poi. Google è capace di segnare.msn. tra cui lo storico Yahoo! (http://www. rilevare il proprio ranking.it).dogpile. Con il termine referente. quale sia il motore di ricerca da studiare per apparire in testa alle sue ricerche.100links. stesso compito svolto da FreeOnLine (http://www. le directory specializzate sono tantissime: esistono siti che catalogano solo pagine in una determinata lingua oppure che trattano un solo argomento. keywords (ovvero le parole chiave) e via dicendo. Per conoscere quale sia il Page Rank di un sito. e applica- re quindi le migliori strategie per risultare in testa ai risultati. yahoo. maggiore sarà il nostro Page Rank. Balza subito in mente quindi. il più conosciuto sito di questo tipo è Virgilio (http:// www. Se non sapete che parole chiave usare. Software per l'inserimento dei siti Internet nei motori di ricerca Esistono software studiati appositamente per gestire i motori di ricerca.it). sono ora delle vere e proprie suite per capire quanto stia funzionando il lavoro di segnalazione del proprio sito.com” title=”Modellismo statico”>Modellismo statico</a> Per maggiori informazioni sui collegamenti ipertestuali.google. meta crawler.com e in italiano su http://www. 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. Detto in parole semplici. Anche nei siti con maggiore traffico. a parte gli ideatori e gli sviluppatori di Google. Insomma.com) e WebCrawler (http://www.com).com) fa uso di Dmoz e gli accordi strategici ovviamente non si fermano qui. Queste differenze. evitate però parole troppo generiche: rischiereste di trovarvi assieme a qualche migliaio di siti che sicuramente non agevoleranno l'utente nel cliccare sul vostro. A ciò che è dato sapere agli esperti del settore.

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. Slider. per ottenere i migliori risultati nelle ricerche. 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. dovrà contenere un link per tornare alla Home page e un menu per raggiungere le altre sezioni . Virgilio e Yahoo Directory).000 copie scaricate. • Registra quanti URL vuoi senza costi addizionali.it Costo: 69 euro. Overture.000 pagine di link.8a lezione interessanti. dovremo richiamare quelle sezioni che per noi sono più importanti. 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). Ogni pagina poi. Lingua: inglese Active WebTraffic 5. La versione trial è disponibile nel nostro CD Guida. Lycos. Web Position Gold 2 www. • Aggiungi il tuo link a più di 500. • più di 280 motori Italiani. • Imposta automaticamente le Web Position Gold 2 è uno dei più apprezzati software per l'indicizzaziosul CD ne. • Inserisce il sito nei principali motori di ricerca nazionali e internazionali e in altre migliaia risorse di ricerca. regole di segnalazione del sito (ad esempio su Google non effettuerà giornalmente la richiesta di inserimento. ma è bene che ogni pagina contenga un richiamo per tornare alla home page e un menu che riporti almeno verso le sezioni princi- O 86/88 pali. 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.com/activewebtraffic Prezzo: 119 dollari. I bot dei motori di ricerca infatti.myrasoft. offre una versione trial. • Report dettagliati sui risultati ottenuti.webposition. non abusatene. Si può quindi tranquillamente definire il prodotto più diffuso attualmente sul mercato. SuperEva. quando si trovano di fronte alla creazione di siti Internet. Quasi tutti questi tool inoltre.trellian. Active WebTraffic ha ricevuto numerosi premi come il software di promozione Web più potente su Internet. • Registrazione Prioritaria a Pagamento in 48 ore su Altavista. il produttore. • Creazione di pagine ottimizzate per il posizionamento. per non rischiare la cancellazione dell'URL per motivi di spamming). seguono delle re.htm Prezzo: 149 dollari. • Ottimizza la tua pagina Web per migliorare il posizionamento. anche perché potreste ottenere l'effetto contrario. 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. Inktomi. Tra le caratteristiche principali segnaliamo: • Registra la tua pagina ad oltre 1000 motori di ricerca in pochi minuti. • Analisi delle pagine Web in funzione del posizionamento. whatUseek e molti altri siti. Lingua: italiana Pacchetto software professionale. I trucchi degli esperti Gli sviluppatori Web più esperti. AddWeb Web Site Promoter 6. • Analisi dettagliata del posizionamento. STRUTTURA DEL SITO Nell'immagine abbiamo abbozzato una possibile struttura del sito: dalla Home page è possibile raggiungere le principali sezioni.com/it/submitwolfit Prezzo: 165 dollari. Tiscali. MSN. LookSmart. • Analizza come si classificano le vostre pagine nei motori di ricerca. Il produttore di Web Position Gold 2 offre agli utenti anche una versione trial.0 www.  3 Ottimizzazione del proprio sito vvero come far sì che il nostro sito sia strutturato in maniera tale da piacere ai motori di ricerca. 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. che ha raggiunto 1. Un solo consiglio. ma di facile utilizzo. La prima regola è molto semplice: fare in modo che tutte le pagine che dovranno figurare nei risultati di una ricerca.0 www.addweb.500. • Monitorizza di continuo la posizione acquisita nei motori di ricerca. SubmitWolf IT v5. • Aumenta la Link Popularity con Linktrader. siano linkate tra loro. mezzi di informazione e liste di Web site. con l'enfasi sui motori italiani. Lingua: inglese Uno dei più completi software di promozione Web disponibile sul mercato. progettato specificamente per la promozione di siti Web. Ciò non significa che le pagine devono contenere un link verso tutti gli altri documenti. • Monitorizza in maniera dettagliata l'accesso alle pagine Web con SiteStatsLive. directories. • Download delle pagine sul proprio server. Myrasoft. MSN. Dalla Home page poi.000 motori di ricerca. Le principali caratteristiche del programma sono: • Registrazione in più di 94 motori di ricerca internazionali (compresi gli italiani Iol. (disponibile per l’installazione all’interno del CD guida allegato alla rivista).com/product. • Creati specificamente per i siti Web italiani. • Registrazione sui motori di ricerca. Ha anche una versione gratuita con forti limitazioni rispetto alla release ufficiale.0 http://www. È possibile prelevare e provare AddWeb in versioni successivamente registrabili per valutarne le potenti funzionalità. HotBot. essere cancellati dai database per uso illecito nelle segnalazioni. certo della qualità del suo sistema di promozione.

freeonline. passando per gli aerei civili e i paesaggi. statico. uno. Esistono poi dei servizi che mettono a disposizione dei sistemi per aumentare gli accessi di un sito: questi sono gli scambi banner. cosicché i motori di ricerca siano in grado di capire che quel determinato termine ha una rilevanza maggiore. formula. Questi sono dei marcatori che raccolgono la descrizione del sito e le parole chiavi. sarebbe bene enfatizzarla. che assegna un titolo alla pagina e conseguentemente alla finestra del browser. <b>moto da corsa</b>. in un sito di modellismo. Per chi li avesse dimenticati.. Q 87/88 gli utenti che visitano un determinato sito. Ad esempio. Dove realmente non si vuole aumentare il peso di una parola ma la si vuole comunque rendere più importante per i motori di ricerca. ovvero grassetto) o <em> (emphatized. moto. ovvero enfatizzato) alle parole più importanti. vengono presi in considerazione con particolare importanza. aerei civili ecc. Il marcatore <title> Esistono poi altre regole di primaria importanza. perché spesso raccolgono in poche parole l'intera pagina. e non quindi alle parole presenti nei meta tags appena analizzati. passando per gli aerei civili e i paesaggi. corse. quando i due siti hanno un numero di utenti pressocché simile. <b>aerei civili</b> ecc. è che ogni qual volta venisse applicato un tag per la formattazione. è quella di inserire in ogni pagina del proprio sito i meta tags description e keywords. all'interno del quale potrai trovare foto di ogni tipo sulle mie creazioni: formula 1. In questo modo. Ad esempio. <strong>moto da corsa</strong>.8a lezione  gole che saranno loro utili nel momento in cui dovranno segnalare il sito ai vari motori di ricerca. auto. quando ci troviamo di fronte a una parola chiave per il nostro sito. Nei casi in cui ce ne fosse bisogno. Tornando all'esempio del modellismo statico. ma non intacchi l'importanza datagli per i motori di ricerca. il te- sto viene appunto formattato seguendo le istruzioni assegnate. uno. come appunto modellismo. L'unico problema. moto.risorse. I termini segnalati all'interno di questo tag infatti. I tags per la formattazione Sono i cosidetti inline elements. L'unica raccomandazione. <strong>aerei civili</strong> ecc. facciamo i furbi ma facciamolo bene. moto. moto da corsa. ma che noi riteniamo di primaria importanza. senza cancellare fisicamente il marcatore. Questi marcatori. Ad esempio. Insomma. aerei. è stato spiegato che è importante avere dei link verso le proprie pagine. Molti di questi assumono una particolare importanza rispetto al resto del testo. automaticamente schederà anche l'altro. aerei. è possibile applicare un piccolo trucco. Un buon metodo per iniziare è quello di instaurare uno scambio link con piccoli siti che trattano lo stesso argomento. foto. è bene inserirli sempre e comunque in tutte le pagine del nostro sito. fotografie”> <style type=”text/css”> <!-strong { font-weight: normal. all'interno del quale potrai trovare <b>foto</b> di ogni tipo sulle mie <b>creazioni</b>: <b>formula 1</b>. statico. È per questo che è indispensabile inserirli e usarli al meglio. In questo modo. sarebbe utile applicare il tag <b> (bold.it . può fare riferimento a PC Open di Febbraio e alle lezioni del CD. 1. foto. seppur ormai ignorati da molti motori di ricerca. </body> </html> Il risultato è pubblicato nell'immagine in basso. quando lo spider dei motori di ricerca passerà da uno dei due siti.net/gratis http://www. il che non fa altro che aumentare i vantaggi. corsa. } --> </style> </head> <body> Questo è il sito di <b>modellismo</b> di <b>Mario Rossi</b>. Ce ne sono davvero di tutti i gusti e Internet. è una fonte inesauribile di informazioni. All'interno di questo marcatore è bene definire poche parole. entrambi potranno aumentare gli accessi. scambi link e così via. paesaggi. 1. I motori di ricerca danno particolare importanza ai termini presenti in questi marcatori. 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. Maggiori informazioni su questi sistemi di promozione sono reperibili agli indirizzi: http://www.”> <meta name=”keywords” content=”modellismo. e così via. all'interno del quale potrai trovare <strong>foto</strong> di ogni tipo sulle mie <strong>creazioni</strong>: <strong>formula 1</strong>. Cosa non importante poi. corsa.  Dall'immagine è possibile vedere che il foglio di stile associato alla pagina ha annullato la formattazione del tag <strong>.. è bene non superare i 500 caratteri nel campo description e keywords. un testo simile: Questo è il sito di <b>modellismo</b> di <b>Mario Rossi</b>. Verrebbe stampato a video come segue: Questo è il sito di modellismo di Mario Rossi. è 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. 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. potremmo anche modificarli in base al contenuto del documento. analizzati su questo stesso corso nel numero di Febbraio. paesaggio. paesaggio. nel <title> e in generale agli elementi che non visualizzano nulla nel documento.tuttogratis. 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. Attenzione ad applicare queste formattazioni solo al testo che verrà stampato nella pagina. auto. 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. formula. auto. fotografie”> Per personalizzare questi marcatori. possiamo racchiuderla tra i tag <strong> e </strong> e poi applicarci un foglio di stile che annulli la formattazione. Ad esempio il tag <title>. <title>Modellismo statico: le foto delle creazioni di Mario Rossi<title> Gli headings I meta tags Una buona abitudine. Onde evitare il continuo accumularsi di testo in grassetto.”> <meta name=”keywords” content=”modellismo. in questo senso. potranno visitare un altro sito in tema: il vantaggio è ovvio.it http://www. paesaggi. corse.

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. 334 pagine.register. 346 pagine. in molti si sono concentrati su questo argomento. Apogeo.it. attenzione a distinguere la pubblicità dai contenuti del sito e ancora più importante.motoridiricerca. le risorse disponibili sono davvero tante. In più. dove potervi esercitare nello sviluppo di siti campione su server reali.it/pcopen.43 euro Saldatura tra management e marketing nella conduzione di un sito Web aziendale. 21. si trovano poco più di 150 pagine con le principali tecniche per la promozione di un sito Internet e perché no. Un po’ di netiquette All'interno dell'articolo. possiamo riportare qualche sito specializzato sui motori di ricerca. dal momento che per poter usare lo spazio di hosting è necessario disporre di un dominio. Quando invece andremo ad attivare i servizi di scambio banner. evitate tutti quei servizi che vi aprono nuove finestre del browser in maniera automatica. I visitatori vi ringrazieranno. 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é. 159 pagine.90 euro Uno dei più famosi esperti italiani di promozione di siti attraverso i motori di ricerca. oltre ad una serie di altri servizi supplementari. Apogeo. lo sconto più alto oggi disponibile sul mercato). inserire il codice seguente: 2c7A4s nel box all’interno della pagina e a questo punto verrete inviati alla home page del sito di Register. quando abbiamo presentato le pratiche di promozione da fare e da non fare. Una storia della comunicazione su Internet abbinata a dati oggettivi e suggerimenti per creare un mix intelligente Hops. che nasce in collaborazione con Register. lo storico MotoriDiRicerca (http://www. 21. Su Internet invece. i servizi che permettono di guadagnare qualche euro facendo pubblicità. Quindi attenzione allo spam. Apogeo. 13.69 euro Come puntare ai profitti nella creazione di un sito.register. Iniziamo con un libro dal titolo Guadagnare con Internet edito da Jackson Libri e scritto da Luigi Manzo.html. 399 pagine. Il metodo è semplicissimo: dovrete collegarvi al sito Internet www. oltre ai link già segnalati. Il testo è una guida alle attività essenziali di Web marketing.net.submission. Per il servizio di supporto inviare le e-mail all’indirizzo support@register. All'interno del testo. spiega le strategie e le regole fondamentali per muoversi in questo ambito.69 euro La promozione di un sito Web è un argomento caro a molti siti e come avevamo anticipato. Le registrazioni saranno comprensive di tutto quanto è indicato all’indirizzo http://we. 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.motoricerca.it . 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. Grazie a ciò. Una volta che abbiamo aperto il nostro sito Internet.it /domains/allincluded. non inondare le pagine di pubblicità: massimo due banner a pagina (uno sopra e uno in fondo) e possibilmente. abbiamo accennato agli errori in cui può incappare chi inizia a far pubblicità al proprio sito Web. responsabile del sito Internet Manuali. come l'ottimo Submission (http://www. Ecco quindi la nostra iniziativa. scambi link e così via. il più importante registrar in Italia: nei prossimi mesi avrete a disposizione gratuitamente per un mese l’uso di uno spazio di hosting dedicato. da dove le registrazioni verranno scontate in automatico del 40%. visto da un’ottica americana. nessuno ci vieta di scrivere un bel messaggio di posta elettronica per avvisare i nostri amici più cari del lavoro appena svolto. 19.it) e il giovane MotoRicerca (http://www.8a lezione 5 Per chi vuole approfondire: i libri consigliati Risorse sull'argomento Un libro per chi vuole investire nella pubblicità e pensa che Internet possa ancora produrre risultati.it). Una buona lettura per affacciarsi a questo mondo. L’autore propone un approccio molto sistematico alla valutazione di efficienza del proprio sito e alla sua gestione. depurate dai fallimenti e orientate su casi che hanno raggiunto profittabilità.info).