Webmaster - PC Open DVD

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à.
1a lezione
2 Gli strumenti di lavoro
Come scegliere lo strumento di lavoro adeguato
Produttività
Esperienza
Editor testuali,
visuali e ambienti
grafici integrati:
cosa sono, come
funzionano e come
scegliere la
soluzione più
adatta a voi
Ambienti
grafici
integrati
Editor
HTML
testuali
er svolgere il proprio compito, il Webmaster ricorre
a strumenti che semplificano la scrittura e la correzione delle pagine Web e degli
script associati, spesso con
un’interfaccia grafica che consente di creare intere sezioni
della pagina senza scrivere
nemmeno una riga di HTML.
Il vero Webmaster professionista, tuttavia, deve essere in
grado di scrivere completamente a mano un intero sito, se
necessario, perché gli capiterà
sovente di dover correggere
anche gli errori e i contenuti
inutili introdotti proprio dai
programmi di generazione automatica che dovrebbero aiutarlo. Gli strumenti di lavoro in
questo campo si dividono in
quattro categorie.
colare portale che li ospita, imponendo quasi sempre la visualizzazione dei banner pubblicitari di quest’ultimo.
Editor on line gratuiti
Editor orientati al testo
Sono strumenti da usare nella produzione di siti personali,
molto semplici, 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. Non sono stati inseriti
in questa rassegna perché di
fatto limitano moltissimo il formato e la struttura del sito e lo
vincolano al dominio del parti-
Leggeri e precisi, costituiscono un elemento irrinunciabile nella cassetta degli attrezzi
di un bravo Webmaster. Vi si ricorre per piccole correzioni al
volo oppure per la scrittura
d’intere pagine, a seconda dei
casi. Semplificano la scrittura
di codice HTML, CSS, DHTML,
JavaScript e così via, controllando in automatico la sintassi
dei comandi, evidenziando graficamente (a colori) i comandi
Editor visuali
commerciali
P
Editor visuali
semplificati
Capacità di spesa
Gli editor HTML testuali sono una necessità imprescindibile sia per chi comincia, così da poter disporre di
una palestra in cui imparare, sia per chi è già esperto, per non perdere controllo sulle pagine. Offrono
tuttavia una produttività bassa, a meno di essere virtuosi della tastiera.
Gli editor visuali (FrontPage, Web Editor e così via) sono una naturale evoluzione per chi vuole guadagnare
velocità, soprattutto nella stesura iniziale del sito.
Gli ambienti grafici integrati (Macromedia Dreamweaver, Adobe GoLive) offrono alta produttività e controllo
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). Di solito prevedono finestre guidate per l’inserimento dei più comuni tag
HTML (marcatori di formattazione), di script già pronti e di
moduli (form), frame (finestre
multiple nella pagina) e tabelle.
Tra le funzioni tipiche abbiamo
anche l’anteprima all’interno
di uno o più browser, per verificare l’aspetto finale della pagina, il controllo dei link interni
ed esterni, la riduzione automatica delle ridondanze e il trasferimento verso server remo-
Gli editor presentati in questo numero
Programma
1st Page 2000
Arachnophilia 5.0
HTML-kit
Macromedia Dreamweaver MX
Stone's Web Writer 3.5.2
Top Dawg 2.6
WebPag-Wiz 1
Xoology Coda 2.4
5/88
Tipo
editor HTML testuale
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. Sono spesso gratuiti, ma ne
esistono anche versioni commerciali di costo relativamente
ridotto. Sono utilissimi per farsi le ossa e per correggere rapidamente pagine già esistenti.
Servono anche per ispezionare
le pagine prodotte con pacchetti più complessi al fine di
controllarne la correttezza.
Il fatto di dover scrivere tutto a mano, o quasi, ne riduce
l’utilità. La produttività scende
e aumenta le possibilità di errore, di conseguenza il Webmaster finisce per affiancarli o sostituirli con editor grafici che
automatizzano gran parte della
generazione delle pagine e di
interi siti e che permettono di
“impaginare” i contenuti lavorando col mouse e osservando
immediatamente i risultati, anziché digitare centinaia di righe
sulla tastiera e fare continue
anteprime all’interno del browser. Alcuni Webmaster veterani
comunque si limitano a usare i
semplici editor di testo, facendone un punto di orgoglio, anche perché “scottati” dalle pri- 1a lezione
Gli strumenti di lavoro presentati nei prossimi numeri
Programma
Adobe GoLive 6.0
CoffeeCup HTML Editor 9.6
HomePage +
Hot Metal Pro 6.0
Microsoft FrontPage 2002
Namo Web Editor 5
TopStyle Pro 3
Tipo
ambiente grafico integrato
editor 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, costringendo a lunghi lavori di
pulizia a mano, che finivano
per richiedere più tempo di
quanto ce ne sarebbe voluto
per scrivere la pagina da zero,
riga per riga.
Tra i completamente gratuiti, abbiamo selezionato: Aracnophilia, Firstpage 2000,
HTML Kit, Stone’s Web Writer,
Top Dawg, Xoology Coda; tra i
prodotti a pagamento o shareware abbiamo invece selezionato CoffeCup HTML Editor, Home Site, Hot Metal Pro,
TopStyle Pro 3.0.
Editor visuali semplificati
Offrono funzioni di “impaginazione” interattiva: il programma genera automaticamente il codice necessario per
produrre la sezione di pagina
dopo che l’abbiamo disegnata
sullo schermo pemettendoci,
poi, di modificarla a mano in
una finestra separata che mostra le righe di codice HTML,
JavaScript, ASP e così via.
È possibile inserire il testo e
le immagini di contenuto direttamente nella pagina visualizzata in anteprima, senza correre il rischio di alterare i marcatori in cui sono contenute e osservando immediatamente il risultato. Questi programmi
spesso integrano anche funzioni per la ricerca automatica de-
gli errori e di trasferimento a un
server remoto. Sono indispensabili come base minima di lavoro per garantire una buona
produttività e per semplificare
la gestione degli script e delle
pagine complesse, oltre che di
interi siti. Ne esistono diverse
edizioni gratuite, ma non ce la
sentiamo di consigliarle perché, a differenza degli editor di
solo testo, questi programmi
possono effettivamente rovinare una pagina già ben costruita
in partenza e costringervi a lunghe operazioni di correzione
manuale.
L’unico prodotto gratuito di
caratura professionale che si
può segnalare in questa categoria è Microsoft Web Matrix,
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.
In alternativa, conviene
orientarsi verso una soluzione
commerciale garantita da una
software house che già operi in
questo mondo da tempo e che
offra anche continui aggiornamenti per tenersi al passo con
gli standard. I due campioni di
questa categoria sono Namo
Web Editor e Microsoft FrontPage 2002.
Quest’ultimo, rispetto alle
versioni precedenti, ha raggiunto una vera caratura professionale, pur mantenendo la
proverbiale facilità d’uso.
Segnaliamo in chiusura di
questa categoria Easy Web Editor, un programma in italiano
che consente di creare pagine
Web semplicemente disegnandole al video, senza scrivere
nemmeno una riga di HTML
(www.visualvision.it). Molto indicato per chi vuole produrre
un sito personale senza dover
studiare, non è consigliato invece ai Webmaster, visto che il
sito viene costruito in formato
proprietario e, solo alla fine,
esportato in formato HTML,
perciò non è possibile esercitare un controllo dettagliato su
quel che succede.
Ambienti visuali integrati
Al terzo livello della scala
troviamo gli unici due prodotti
che hanno conquistato, negli
ultimi anni di grande crescita
del Web, la statura di riferimento per i Web Master professionisti:
Macromedia
Dreamweaver e Adobe GoLive. Oltre a riunire tutte le funzioni di impaginazione grafica
delle pagine di gestione integrali dei siti, con tutti gli automatismi per il controllo e la validazione degli stessi, questi
due prodotti hanno anche sviluppato collegamenti diretti
con altre applicazioni dello
stesso produttore al fine di costruire veri e propri ambienti di
sviluppo integrati dove Webmaster, Web developer e Web
designer possano condividere
tutti la stessa famiglia di prodotti beneficiando di un facile
scambio dei vari sottoprodotti
che vanno a comporre il sito.
Ancora più interessante per
il Webmaster, questi prodotti
gli consentono d’intervenire
con rapidità ed efficacia su
qualsiasi componente del sito
Web, utilizzando un solo strumento che conoscono bene,
anziché dover ricorrere a ogni
genere di utility e di mini-pro-
grammi complementari.
Macromedia MX, la versione più recente del prodotto,
costituisce oggi la fusione di
ben quattro programmi diversi
e permette di spaziare dalla
produzione di siti statici alla
programmazione avanzata, integrandosi con Fireworks MX
e Flash MX per le componenti
creative, e con Cold Fusion MX
per la componente programmatica sul server.
Adobe GoLive 6.0 dialoga invece con PhotoShop 7.0 e ImageReady (per l’ottimizzazione
delle immagini per il Web), con
InDesign per l’integrazione tra
editoria sul Web ed editoria
cartacea, con Premiere per la
gestione del video.
Benché saranno ben pochi i
Webmaster che si troveranno a
utilizzare tutti questi strumenti
e saranno ancora meno quelli
che li utilizzeranno per partire,
è importante capire che tanto
Dreamweaver quanto GoLive
costituiscono punti di arrivo
irrinunciabili per lo sviluppo e
la manutenzione di siti come
professione. Dreamweaver è il
più diffuso e il più “tecnico”.
S’indirizza al Webmaster e al
Web designer che abbiano anche vocazioni di programmatore. GoLive è invece un prodotto
di natura più “editoriale”, destinato a chi debba gestire gli
stessi contenuti sul Web e sulla
carta e abbia uno spiccato
background creativo.
Entrambi costano cari, ma si
ripagano ampiamente nell’uso
intensivo. Mettete in conto un
sensibile sforzo di apprendimento per entrambi, visto che
sono ormai diventati giganteschi e ricchissimi di funzioni.
A loro beneficio, indichiamo
che funzionano su piattaforme
diverse (Windows, Mac) e integrano spesso anche ottimi
strumenti tutorial per imparare
cammin facendo.
In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!
Avete trovato interessante il nostro
corso e volete prepararvi a mettere
alla prova le competenze acquisite?
Per farlo avrete bisogno di uno spazio
vostro sul Web, dove potervi
esercitare nello sviluppo di siti
campione su server reali.
Ecco quindi la nostra iniziativa, che
nasce in collaborazione con
Register.it, il più importante registrar
in Italia: nei prossimi mesi avrete a
disposizione gratuitamente per un
6/88
mese l’uso di uno spazio di hosting
dedicato, oltre ad una serie di altri
servizi supplementari. In più, dal
momento che per poter usare lo
spazio di hosting è necessario
disporre di un dominio, i lettori di PC
Open in esclusiva potranno
acquistare da subito il proprio
dominio presso Register ad un
prezzo scontatissimo (40% in meno,
lo sconto più alto oggi disponibile
sul mercato). Il metodo è
semplicissimo: dovrete collegarvi al
sito http://we.register.it/pcopen
oppure al sito www.register.it/pcopen,
inserire il codice segreto x6Wa3P nel
box all’interno della pagina e verrete
inviati alla home page del sito di
Register, da dove le registrazioni
verranno scontate in automatico del
40%. Le registrazioni saranno
comprensive di tutto quanto è indicato
all’indirizzo http://we.register.it
/domains/allincluded.html.
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. Il libro vi parla di
interfaccia, struttura e comportamento
delle pagine. Altamento informativo, un
classico.
Apogeo, 235 pagine, 35 euro.
INDISPENSABIL
Indirizzato ai designer della
transizione dalla carta a Web. Spiega
concetti base utili a tutti, ma in
particolar modo a chi è già esperto nel
governare un strumento passivo come
la pagina stampata e deve entrare nel
mondo dinamico delle pagine HTML.
Hops, 442 pagine, 35,12 euro.
Tutorial per Webmaster alle prime
armi oppure con modesta esperiernza.
Offre un sunto di molti aspetti
operativi utili nella produzione di un
sito, spiegati con illustrazioni ed
esempi. Facile da leggere, anche in
pillole. Manca il perché delle cose.
Jackson Libri, 616 pagine, 44 euro.
E
Riferimento indiscusso sulla sintassi e
la tecnica della versione più recente
del linguaggio HTML. Un libro che il
Webmaster professionista deve
possedere e conoscere, anche se non
tutte le informazioni sono essenziali e
alcuni strumenti sono datati.
Apogeo, 837 pagine, 45,45 euro.
INDISPENSABIL
Introduzione elementare alla
produzione di pagine HTML. Fornisce i
rudimenti del linguaggio per chi vuole
produrre un sito personale oppure
prototipale. Un po’ datato invece per
un impiego professionale: mancano i
riferimenti ai fogli di stile. Jackson
Libri, 334 pagine, 25, 31 euro.
Guida complementare al “Web Design
Arte e Scienza” di Veen. Costituisce un
buon manuale pratico per la
produzione dei più comuni elementi
che costituiscono un sito, con anche
po’ di teoria. Accessibile a tutti,
consigliato ai neofiti.
Apogeo, 290 pagine, 20,14 euro.
INDISPENSABIL
Standard e tecniche concentrati in
poche pagine con cenni sintetici che vi
portano dalla navigazione, all’usabilità,
all’accessibilità, passando per nozioni
sulla percezione dei colori e sull’uso
del linguaggio XML. Utile riepilogo per
chi sa già come fare. Tecniche Nuove,
212 pagine, 18,80 euro.
7/88
Usabilità nel redesign. Ecco la
seconda opera di Jackob Nielsen, al di
sotto delle aspettative, ma utile per chi
sta affrontando il redesign di un sito
complesso e vuole trarre spunto
dall’opera altrui. Il libro è più un elenco
di cose da non fare che da fare.
Apogeo, 310 pagine, 45 euro.
Guida alla riprogettazione di un sito
con indicazioni pratiche e numerose
illustrazioni. Perfetto per il consulente
che si propone di migliorare il lavoro
altrui o perfezionare il proprio
approccio progettuale, dalla definizione
della struttura al lancio.
Apogeo, 245 pagine, 36 euro.
E
Design e usabilità all’italiana. Più
concreto dei manuali di usabilità e più
ampio nei temi rispetto a un semplice
testo di design. Offre l’eperienza
completa di una progettista
professionale italiana che mette in
prospettiva le cose davvero importanti.
Hops, 236 pagine, 18,60 euro.
E
Master di usabilità. Non si può parlare
di usabilità dei siti Web senza aver
letto questo classico, che alcuni
amano e molti odiano per il totale
“integralismo” dimostrato dall’autore,
universalmente riconosciuto come
l’iniziatore di questa disciplina.
Apogeo, 418 pagine, 40,28 euro.
Quaderno di progetto in grande
formato, già pronto per accogliere le
note che costruirete durante il vostro
lavoro con un ipotetico cliente e che vi
porterà, attraverso le fasi principali, a
un progetto completo. Utile traccia per
i consulenti del Web.
Hops, 70 pagine, 25,31 euro.
1a lezione
Dalla progettazione al lancio: come nasce un sito
rima di mettere mano alle
pagine e alla scrittura di
marcatori HTML, è necessario definire la struttura del sito e la funzione dei diversi elementi che saranno nella pagina.
Questa fase precede anche la
stesura delle bozze grafiche che
traducono in colore e immagini
ciò che si è già ideato schematicamente sulla carta.
P
La progettazione
Esistono tanti modi per progettare un sito quanti sono i
progettisti, 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, costruzione di una mappa del concettuale sito (disegno schematico),
assemblaggio e sistematizzazione dei contenuti, definizione di
un sistema di navigazione, definizione della struttura di pagine
e interfaccia, assemblaggio del
tutto in una sequenza che “racconti” il sito (storyboard), prototipo di sito navigabile che mostri dal vivo lo storyboard, progetto grafico e multimediale,
progetto dinamico che definisca il tipo d’interazione che il sito avrà con l’utente e che stabilisca quali elementi di programmazione sarà necessario aggiungere, incluso l’eventuale
collegamento a un database
che contenga i dati da visualizzare nelle pagine dinamiche.
La realizzazione
Terminate queste fasi progettuali, si passa alla produzione
vera e propria, realizzando i
template, vale a dire la pagina
campione, senza contenuti, da
cui è possibile produrre molte
altre pagine ciascuna con contenuti propri. Il template è una
sorta di “modello” o “stampo”
da cui ricavare molte pagine
singole che avranno uniformità
visiva tra loro.
Una parte determinante nella
fase di produzione prima del
lancio è la formattazione dei
contenuti, vale a dire la raccolta
di tutte le informazioni che dovranno essere presenti sul sito
al momento dell’avvio e il loro
montaggio all’interno di pagine
HTML statiche oppure il loro inserimento e catalogazione all’interno di un server. Spesso si
sottovaluta l’impegno richiesto
da questa attività, di per sé semplice, 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. I contenuti arriveranno infatti dalle fonti e nelle forme più disparate: molto di questo lavoro, alla fine peserà sul
Webmaster, sul Web editor e sul
Web designer oppure sull’operatore grafico.
Il test
La fase successiva è naturalmente quella di test. È raro che
ci sia abbastanza tempo per
condurla come si deve, ma è comunque necessaria per mettere
alla prova il sistema di navigazione e il sito in generale. Quando si riesce a coinvolgere nel test utenti estranei alle fasi di progettazione, si riesce a mettere in
evidenza i classici errori che finirebbero per mandare in tilt il
sistema se commessi da un navigatore reale.
Il lancio
Consiste di solito in 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, di solito
accompagnata da una qualche
attività di pubblicità.
Il mantenimento
Segue, infine, la fase di mantenimento dove si correggono
gli errori della fase di lancio e si
attivano le procedure per consentire ai gestori del sito di aggiornarlo gradualmente e per
mantenerlo stabile al crescere
del numero dei navigatori. Questa è la fase più delicata e pesa
fortemente sulle spalle del Webmaster a cui viene richiesta
grande esperienza nel riconoscere e prevenire eventuali problemi. Qualsiasi intervento deve essere efficace e rapido, poiché è raro poter fermare il sito
per lunghi periodi una volta che
lo si è avviato. È necessaria una
profonda conoscenza della piattaforma su cui il sito è basato
poiché il comportamento dei
server cambia drasticamente al
variare del carico di lavoro. Elementi chiave in tal senso sono il
tipo di server impiegato e il database scelto per l’eventuale attività dinamica.
Fa parte dell’attività di mantenimento anche l’adozione di misure di
prosegue
sicurezza.
(versione integrale
dell’articolo sul CD)
sul CD
n. 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, alberazione sito
Posizione stabile per gli elementi di navigazione in rapporto al contenuto
Storyboard (descrizione, pagina per pagina, del contenuto statico e dinamico)
Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo,
ma consigliato)
Intercaccia grafica che perfeziona la presentazione e navigazione del sito
Definizione elementi di programma, collegamento eventuale
a database, scelta di Publishing System
Template HTML, elementi di programma lato server e client,
formattazione contenuti
Sito esaminato da utenti "veri"
Sito attivo e pubblicizzato grazie alle attività di marketing
Sito che cresce nei contenuti e nel traffico
Progetto grafico e multimediale
Progetto dinamico
Produzione
Test
Lancio
Mantenimento
8/88
Le risorse
on line
La formazione di un
Webmaster non finisce mai.
Le tecnologie continuano a
evolvere e ci sono
innumerevoli problemi da
risolvere nel lavoro di tutti i
giorni. Ecco alcune risorse
che consigliamo a tutti,
indipendentemente dal loro
livello di competenza. Vi
serviranno per approfondire
durante il corso e oltre:
http://hotwired.lycos.com/
webmonkey/ (uno dei due
siti americani più famosi per
i Webmaster e i Web
developer. Ricco di tutorial,
consigli, moduli già pronti).
http://builder.com.com/
(l’altro sito americano di
riferimento per i Webmaster
e i Web developer, orientato
a i più esperti).
http://www.html.it/ (il sito
italiano “storico” per chi
sviluppa siti e vuole
imparare a fare le cose da
solo. Adesso fornisce anche
corsi a pagamento).
http://www.antiloco.com/
(in italiano, una sorta di
directory di risorse
soprattutto per i Web
developer, ma utile anche ai
Webmaster).
http://www.fare-web.it/
(un riferimento in italiano
ricco di spunti tecnici, ma
anche di attualità)
http://www.fucinaweb.com/
home/ (in italiano, realizzato
da un giovane sviluppatore
che fornisce non solo
consigli di sviluppo, ma
anche indicazioni su temi più
generali come l’interfaccia e
l’usabilità).
http://www.manuali.net/
(sito dedicato agli autodidatti
e alla formazione a distanza
su diversi temi, tra cui anche
lo sviluppo Web).
http://www.scriptando.it/
(sito ricco di consigli e di
tutorial realizzato per
passione da un giovanissimo
Webmaster autodidatta).
http://www.webmasterpoint.
org/home.asp (un sito
italiano di consigli e tutorial
per le cose più semplici).
1a lezione
4 Macromedia Dreamweaver MX,
la nave scuola del Web design
onsiderato nettamente il
più diffuso tra gli strumenti professionali per lo
sviluppo di siti, Dreamweaver
ha da sempre offerto un efficiente ambiente di editing visuale delle pagine capace di
generare automaticamente codice senza alterare quello già
prodotto a mano dallo sviluppatore. Non si tratta di una
prerogativa da poco ed è probabilmente la chiave del suo
successo originale.
Oggi il prodotto si presenta
molto arricchito, di fatto riunisce al proprio interno quattro
applicazioni che prima erano
indipendenti e costituisce la
prima completa integrazione
nei prodotti Macromedia delle
tecnologie acquisite da Allaire,
società americana creatrice di
altri due prodotti celebri nel
mondo dei Webmaster: Home
Site (editor non visuale di elevata caratura) e ColdFusion
Studio (ambiente di programmazione per creare siti con pagine dinamiche).
L’obiettivo fondamentale di
Dreamweaver MX è di fornire
un ambiente capace di soddisfare contemporaneamente le
esigenze professionali di tre figure: Web designer, per la
creazione grafica del sito,
Webmaster per la costruzione
delle pagine vere e proprie e
Web developer per programmare la logica applicativa che
permetta all’utente d’interrogare un database attraverso le
pagine del sito.
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, diventando, se possibile, un esperto
veramente completo.
Per la precisione, nel nuovo
Dreamweaver MX convergono
il precedente Dreamweaver 4,
con tutte le relative funzioni di
editing visuale, di controllo
centralizzato del sito, di amministrazione delle varie risorse e d’integrazione con le
altre applicazioni grafiche di
Macromedia (Flash e Fireworks); Home Site con le relative funzioni di editing manuale del codice HTML,
XHTML o di qualsiasi altro linguaggio di scripting; UltraDEV
per la programmazione con i
linguaggi di scripting più comuni (ASP, ASP.NET, JSP, PHP)
e ColdFusion studio per progettare applicazioni che usino
il server ColdFusion come interfaccia semplificata nella
produzione di pagine dinamiche create mediante l’interrogazione di un database.
Quest’ultimo in realtà non è
integrato propriamente in
Dreamweaver MX, bensì all’interno di HomeSite+, evoluzione moderna di HomeSite 5, fornito nello stesso CD di
Dreamweaver MX e utilizzabile come strumento di lavoro
rapido per chi è abituato a
operare con il codice di ColdFusion e non ha particolare interesse alla struttura grafica
2
delle pagine. In sostanza, tramite Dreamweaver MX e HomeSite+ aprite le porte a qualsiasi tipo di sviluppo presente
e futuro, con la possibilità di
allargare le vostre conoscenze
sfruttando un ambiente con
interfaccia uniforme e con tutorial di buon livello, integrati.
Come si presenta
Il destinatario principale di
un prodotto come Dreamweaver MX rimane il creatore di siti, Webmaster o Web developer, che ha bisogno di uno
strumento veloce con accesso
immediato al codice e al tempo capace di semplificare le
operazioni mediante automatismi che propaghino qualsiasi
variante all’intero sito. Il programma si basa su tre elementi d’interfaccia: la finestra di lavoro vera e propria, divisa in
due viste, i menu e i pannelli
degli strumenti, e la finestra di
controllo dell’intero sito. Partiamo dalle prime: le due viste
di lavoro principali sono: Codice e Struttura.
Le si può visualizzare alternatamene oppure contemporaneamente così da vedere all’istante come le variazioni
dell’una si propagano nell’altra.
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, indi-
la demo
sul CD
n. 65
cando anche la struttura dei
vari elementi e le reciproche
relazioni.
Ne permette la manipolazione diretta, tramite mouse e
comandi da tastiera. È possibile “disegnare” o costruire visivamente elementi nella vista
Struttura e osservare al tempo
stesso il codice generato automaticamente nella vista Codice, o viceversa. Alternandosi
tra le due, si acquista una conoscenza molto più profonda
del linguaggio HTML e delle
sue particolarità, e si arriva
anche a produrre sempre più
velocemente risultati di qualità.
Molte delle risorse offerte
dal programma sono proprio
mirate a garantire la qualità
del codice finale e notiamo
una potenzialità didattica notevole: qualsiasi elemento
HTML può essere inserito da
pulsante o da menù, le rispettive caratteristiche sono quindi ispezionabili nella vista Codice, che mostra il tag con tutti i rispettivi attributi, oltre
che all’interno di una finestra
di “proprietà” che è costantemente visibile e mediante la
quale s’interviene sulle proprietà senza toccare il codice
originale. Inoltre le funzioni di
convalida segnalano la presenza di eventuali errori nella
pagina o nel sito e ci portano
direttamente al punto interessato, così da correggerlo e imparare dai nostri errori. Il programma integra anche una nu-
3
Figura 1: La vista Codice di Dreamweaver mostra i marcatori HTML (o di qualsiasi altro linguaggio di scripting) e i relativi parametri ben distinti dal resto del testo mediante colori
chiaramente identificabili. Il programma aggiunge anche rientri differenziati per le varie righe al fine di riprodurre visivamente le varie nidificazioni. Nella barra in alto troviamo icone
suddivise in diversi pannelli per inserire direttamente ciascuno dei marcatori principali. Le icone sono suddivise per tema e ogni tema è raggruppato all’interno di una barra a cui
corrisponde un’etichetta di tabulazione. In aggiunta, tutti gli elementi possono essere inseriti direttamente da menu. Figura 2: La vista Struttura mostra una specie di anteprima
attiva della pagina su cui è possibile intervenire direttamente, mediante mouse e comandi da bottone/menu, modificando gli elementi in modo visivo. I bordi grigi mostrano la
struttura delle tabelle che mantengono ogni elemento in posizione. Figura 3: Prerogativa unica di Dreamweaver è la disponibilità di due viste affiancate e di vedere i cambiamenti
eseguiti nell’una riproporsi immediatamente nell’altra
9/88
1a lezione
trita serie di esercitazioni in
italiano che coprono HTML,
fogli di stile, pagine dinamiche e altro ancora, con esempi
da eseguire di prima mano.
Tanti approcci diversi
per imparare il codice
alla perfezione
Rispetto alle versioni precedenti, Dreamweaver MX consente di spostare e agganciare
(dock) i diversi pannelli di comando all’interno della finestra
a video oppure su un secondo
video, nel caso sia disponibile
sul nostro computer. In tal modo, la pletora di finestre di controllo che accompagnano il
nuovo programma può essere
configurata a piacere, attivando e disattivando selettivamente quel che occorre.
Nel caso si lavori nella vista
Codice, la finestra che contiene
il codice vero e proprio prevede tre modalità distinte d’inserimento manuale dei tag. 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.
Ce ne sono a decine, suddivise per argomento. Se non ci
ricordiamo quale sia il tag idoneo, la seconda modalità consiste nel cliccare su un’icona di
selezione generale che apre un
elenco di selezione dei tag, presi dal database integrato nel
programma. Tale database
contiene la sintassi corretta
per tutti i marcatori standardizzati dei principali linguaggi:
HTML, JavaScript, CSS (Cascading Style Sheets – fogli di stile
in cascata), ASP (Active Server
Pages) e ASP.NET, PHP, JSP (Java Server Page), WML (Wireless Markup Language, per i telefonini) e ColdFusion.
La terza modalità consiste
nel digitare direttamente il
marcatore nella pagina lasciando che Dreamweaver completi
per noi la digitazione non appena ha indovinato di che tag
si tratta. Ciò riduce il lavoro di
battitura e gli errori dovuti a
sviste.
Per il completamento automatico, il programma attinge
sempre dal proprio database
interno che può essere espanso a piacere con l’inserimento
di tag personalizzati.
Una volta digitato il marcatore, le informazioni corrispondenti compariranno all’interno
di due finestre d’ispezione.
10/88
Una, la finestra Proprietà
sempre aperta sulla parte bassa dello schermo, indica i parametri del marcatore e ci permette di modificarli o inserirne
di nuovi usando le sue caselle,
senza dover scrivere nemmeno una riga. Sempre dalla finestra delle Proprietà possiamo
anche definire link ad altre pagine interne al sito oppure a siti esterni, confidando nel fatto
che la sintassi sia sempre corretta.
Qualsiasi variazione è comunque visibile immediatamente nella finestra Codice così da capire meglio quel che
stiamo facendo.
Una seconda finestra d’ispezione, più complessa, denominata appunto “Finestra di ispezione tag” elenca tutti i possibili attributi di quel particolare
marcatore, permettendoci di
modificarli usando menù a tendina e altri supporti grafici.
Perciò, combinando icone,
menù e le due finestre d’ispezione, possiamo generare
un’intera pagina senza nemmeno scrivere una parola direttamente, fino a quando ci
sentiremo abbastanza esperti
per inserire i comandi in prima
persona, fruendo però del controllo e della funzione di completamento immediato fornita
da Dreamweaver.
Dulcis in fundo, il programma incorpora una serie di moduli già pronti per gli usi principali (snippet) da poter integrare nella nostra pagina e da
cui imparare, oltre che ben otto libri interi, forniti da editori
di tutto rispetto come O’Reilly
e Wrox, che descrivono minuziosamente i tag dei principali
linguaggi: HTML, CSS, ASP, JSP,
JavaScript, ColdFusion.
Gli strumenti visuali
per la produttività
Il secondo metodo di lavoro
offerto dal programma è imperniato sulla vista Struttura.
Qui la pagina viene disegnata
come apparirà all’interno del
browser però, a differenza di
una semplice anteprima, tutti
gli elementi sono direttamente
modificabili e si può digitare
testo, inserire immagini, liste,
tabelle, moduli usando le stesse icone e gli stessi menù già
usati nella vista Codice, con la
differenza che qui gli elementi
si posizionano direttamente
nel punto della pagina in cui
vogliamo e il programma ci
mostra visivamente come inte-
ragiscono con gli altri. Insomma, una sorta di videoimpaginazione Web
È cresciuta anche l’integrazione con gli altri strumenti
della famiglia Macromedia, 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”.
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.
Controllo totale del sito
Fin qui abbiamo incontrato
funzioni che sono comuni anche ad altri editor HTML, anche se non altrettanto sviluppate.
La gestione del sito è invece
una prerogativa classica dei
programmi di fascia alta e
Dreamweaver MX realizza, tramite l’abbinata di due finestre
dedicate, un ambiente completo dal quale non solo esplorare
la struttura del sito, i percorsi
di navigazione e le risorse impiegate, ma anche modificare
parametri globali (propagando le variazioni su tutte le pagine) e manipolare singoli oggetti come immagini, sfondi,
oggetti multimediali, collegamenti, librerie di codice, eccetera. Tramite questo complesso pannello di controllo potete
tenere sempre sott’occhio l’intero sito e quindi eseguire automaticamente gli aggiornamenti necessari sul server così
da mandare in produzione le
varianti collaudate prima localmente.
È possibile anche utilizzare
il pannello Sito per coordinare
il lavoro di più persone, bloccando pagine che voi state modificando affinché altri non le
possano modificare nel frattempo. Per funzionare al meglio, la funzione di coordinamento di gruppo richiede l’acquisto di uno strumento ad
hoc di Macromedia da installare sul server (Sitespring), ma è possibile realizzare sistemi di controllo
elementari anche
utilizzando il pacil corso
chetto di base. prosegue
(versione integrale
dell’articolo sul CD)
sul CD 65
Identikit
Dreamweaver MX è il più diffuso tra i
Web editor professionali.
Costituisce l’evoluzione del precedente
Dreamweaver 4 e raccoglie al proprio
interno anche le funzioni di UltraDev,
HomeSite e ColdFusion Studio. Nasce
per rendere efficiente il lavoro
congiunto di diverse figure
professionali: il Webmaster, il Web
designer e il Web developer, offrendo a
ciascuna una serie di strumenti
completi. È un prodotto complesso che
richiede un certo impegno per poterlo
conoscere e sfruttare a fondo, di
contro offre una quantità notevole di
strumenti per rendere più rapida la
gestione di un intero sito e più precisa
la produzione di pagine statiche e
dinamiche (con elementi di programma
al loro interno). Costituisce anche
un’eccellente base formativa, con
numerose informazioni tutoriali,
strumenti di verifica e costruzione
automatica del codice. Unica nel suo
genere la possibilità di avere due viste
contemporanee della stessa pagina:
una con il codice e una con la struttura
grafica della stessa. È possibile agire
su una qualsiasi delle due,
osservando immediatamente i
cambiamenti riportati nell’altra.
Punti a favore:
- Incorpora le funzioni di quattro
programmi prima separati
- Ottima palestra formativa
- Offre una vista contemporanea sul
codice generato e sulla disposizione
degli elementi sulla pagina
- Consente di unire efficacemente il
lavoro di creatività e di produzione
tecnica
- È disponibile su diversi sistemi
operativi, compreso Macintosh
- Supporta la gran parte dei linguaggi
di programmazione
- Offre ricchi strumenti per la gestione
di un intero sito
- È compatibile con gli standard più recenti
- Si espande gratuitamente attraverso
moduli opzionali
Punti a sfavore:
- Complesso da imparare
- Richiede un computer abbastanza
potente
- Manca un pieno supporto per il
linguaggio Perl
- Il codice generato con gli strumenti
grafici richiede occasionalmente
verifica manuale
Scheda tecnica
Sito produttore: www.macromedia.com
Costo licenza: 589,50 euro, 146,20
per l’upgrade da una versione
precedente.
Macromedia Studio MX, che include
anche Flash MX, Fireworks MX e
FreeHand 10 costa 1150,80 euro,
574,80 per la versione upgrade.
Requisiti: Windows 98SE, ME, NT4,
2000, XP - Power Macintosh 9.2
oppure OS X 10.1.
2a lezione
A scuola con PC Open
Progetto
Web Master
di Roberto Mazzoni
1 Progettare un sito statico
a prima forma di sito che
qualsiasi Webmaster si trova a realizzare è composta
da pagine HTML di contenuto
permanente, organizzate in
una serie di cartelle e legate da
una struttura di link che definisce la cosiddetta alberatura del
sito e ne consente una navigazione ordinata.
Ogni volta che si vuole aggiungere qualcosa, bisogna
creare una pagina ad hoc; mentre per modificare i contenuti
già presenti, diventa necessario agire sulle pagine già pubblicate per mezzo di un Editor
HTML di tipo testuale o grafico,
a seconda delle nostre abitudi-
L
ni e della nostra capacità di
spesa. In buona sostanza, un sito statico contiene solo le pagine che abbiamo individualmente realizzato per la pubblicazione e il navigatore non può
chiedere di vedere informazioni visualizzate in modo diverso
da quello noi abbiamo definito
in tali pagine. In un sito centrato su database, ossia dinamico,
è invece possibile avere una
pagina campione (template) all'interno della quale riversare
al momento le informazioni più
diverse a seconda di quel che
l'utente chiede.
Ciascuna pagina di un sito
statico contiene invece infor-
mazioni e tag HTML mescolati
tra loro, perciò non è possibile
demandare le attività di pubblicazione e di aggiornamento
a persone non tecnicamente
qualificate, poiché, nel cambiare il testo o le immagini, potrebbero inavvertitamente alterare anche i marcatori in cui
questi sono racchiusi, scombinando la pagina.
Esistono tecniche per limitare tali rischi, in ogni caso il sito statico costituisce un impegno importante di manutenzione per il Webmaster, che aumenta al crescere del sito e
che non sempre è possibile farsi remunerare. Per tale motivo,
la tendenza di tutti i progettisti
è di usare le strutture statiche
solo per i siti più semplici, dove gli aggiornamenti siano poco frequenti e di modesta entità, per poi passare, non appena possibile, a strutture dinamiche, centrate su database.
In ogni caso, qualsiasi sito
nasce statico, nella sua forma
di prototipo originale, e si evolve in dinamico con l'aggiunta
della connessione al database
e con la sostituzione di alcuni
tag HTML con tag scritti in uno
dei vari linguaggi di scripting,
perciò il know how su come
realizzare un sito statico interessa tutti ed è anche impor-
IL CALENDARIO DELLE LEZIONI
Lezione 1:
Sistemi di navigazione: impostare la
navigazione del sito in modo che sia
comprensibile, inequivocabile ed efficace.
Competenze e strumenti
(disponibile integralmente
sul CD)
il corso è
• Che cosa fa un Webmaster
sul CD
• Gli strumenti di lavoro
n. 66
• Le figure professionali che
affiancano il Webmaster
• Le risorse on line
• Tecniche di progettazione del sito
Aggiunte inedite alla prima lezione
disponibili solo sul CD di questo
numero:
Organizzazione delle informazioni: una
descrizione dei vari schemi per strutturare
le informazioni di un sito: schemi esatti,
ambigui e misti.
Costruzione della mappa – gerarchia,
ipertesto, struttura lineare: i tre possibili
approcci per l'architettura del sito e le
relative varianti.
Strumenti di navigazione: elementi che i
browser offrono per la navigazione di un
sito e come sfruttarli nella progettazione.
11/88
Sistemi di labeling: come scegliere
correttamente le "etichette" che
identificano i vari elementi di navigazione.
Lezione 2:
• Spiegazione dei tag HTML per una
pagina vergine
• Esercizi su come creare una pagina
vergine e su come progettare un sito
Le prossime puntate:
Siti statici e linguaggio HTML
Progettare un sito statico: definizione
della struttura, domini reali e virtuali,
collegamenti assoluti e relativi.
Progettare la pagina: modelli di pagina,
la caduta della “piega”, tecniche di
impaginazione, usabilità e accesso.
Pagine HTML e marcatori: sintassi del
linguaggio, formattazione, tag.
Strutturare i contenuti della pagina:
tabelle, frame e form.
Adobe GoLive 6.0: le caratteristiche
dell’ambiente di sviluppo integrato.
contenuti aggiuntivi sul CD
• Versioni integrali e complete degli
articoli pubblicati sulla rivista
Lezione 3:
Modelli di pagine e tabelle
Lezione 4:
HTML 4.01 e CSS
Lezione 5:
Design e multimedialità
Lezione 6:
Siti interattivi
Lezione 7:
Interazione sul server
Lezione 8:
Promuovere il sito
2a lezione
tante sapere come predisporlo
fin dall'inizio alla sua evoluzione dinamica. Un codice HTML
scritto in maniera scorretta
può costringervi a riscrivere
per intero tutte le pagine al momento del passaggio alla modalità dinamica. In questo articolo e nei seguenti cercheremo
quindi di esaminare l'approccio corretto fin dal principio.
Definire la struttura
Il primo passo consiste nel
definire una struttura ordinata
per catalogare le informazioni
da pubblicare (vedi Organizzazione delle informazioni
nella lezione 1). Dopo di che si
traccia una mappa del sito, che
imposti l'organizzazione delle
informazioni in generale (vedi
Costruzione della mappa nella
lezione 1) e si arriva infine ai
percorsi di navigazione (vedi
Sistemi di navigazione nella
lezione 1). Da queste tre attività ricaveremo il sistema di directory che conterrà i vari file.
Nella pratica, infatti, un sito
statico consiste semplicemente di una serie di file distribuiti
in varie directory.
Un sito molto semplice potrebbe avere tutti gli elementi
in una sola cartella, ma se prevediamo un minimo di espansione, sarà opportuno avere
cartelle separate con più livelli
in cascata per tenere ordine
nei contenuti. In effetti, seguendo la mappa tracciata prima, dovremmo avere anche i
nomi e la posizione delle directory, così da replicare fisicamente sul disco, almeno a grandi linee, i percorsi di navigazione previsti per il sito.
La scelta dei nomi delle cartelle e dei file è importante perché ci deve aiutare a ricordare
che cosa ciascuno contiene
senza doverlo aprire tutte le
volte. Scegliete quindi nomi
mnemonici ed esplicativi che
ricalchino le etichette che avete adottato per il vostro sistema di navigazione (vedi sempre Tecniche di progettazione
nella lezione 1).
Il nome delle directory e dei
file costituisce anche un ausilio
al navigatore che li vedrà comparire nella finestra del suo
browser subito dopo il nome
del dominio a cui il sito è abbinato. Una regola importante
nella scelta dei nomi di file e directory è evitare caratteri speciali che possano essere incompatibili con il sistema operativo del server.
Poiché quest'ultimo può variare, ci conviene adottare un
approccio che renda i nostri file compatibili con Windows,
Windows NT/2000 e con
Unix/Linux. È facile, basta mantenere i nomi brevi ed evitare
l'uso di spazi bianchi (sostituiteli con un tratto di sottolineatura o con un trattino).
Evitiamo anche l'uso di qualsiasi vocale accentata (sia
maiuscola sia minuscola) e dei
seguenti caratteri speciali: < , ;
: > " ' * / \ & ! % ? = # () [] + il
punto fermo è ammesso, ma
può provocare confusione in
Windows perciò usatelo solo
come separatore tra il nome e
il suffisso obbligatorio e non
aggiungete mai più di un suffisso in cascata. Conviene evitare
anche l'uso del segno del dollaro ($) e di qualsiasi caratte- “Ho trovato lavoro
grazie a PC Open”
Ci incontriamo allo Smau: è
sempre una sensazione strana
vedere finalmente qualcuno con
cui si è intrecciata una relazione
via Internet. Nei mesi cerchi di
immaginarlo e poi eccolo lì
davanti a te, in carne e ossa.
Ed ecco Beatrice Demont, la
BeaBea della community di Pc
Open, ventinove anni, solida e
determinata, una ragazza che
alla tastiera del pianoforte ha
preferito quella del computer.
Infatti spiega:“Nasco come
maestra di pianoforte,
diplomata al Conservatorio di
Genova, la mia città. Ma dopo
un po’ di tempo (e di tentativi),
mi rendo conto che in ambito
musicale non ci sarebbero state
speranze, quindi decido di
iscrivermi all’università, alla
Facoltà di Lingue”. Prosegue gli
studi con successo fino al
giorno fatidico in cui si incaglia
in un computer. “Mi hanno
chiesto di fare una ricerca su
Internet: immediata la mia
risposta - cos’è?-. Mi piazzano
davanti a un PC nel laboratorio
di facoltà e mi dicono come si
accende. Fine. Intorno a me
matricole chattano, scambiano
e-mail con tutto il mondo,
scorazzano sulla Rete: invidia,
quindi ferocia...decido che devo
imparare”. Parte dal computer,
lo acquista, prende una “sola”:
“un chiodo, il commerciante mi
aveva fregato. E ora che ci
faccio?”. Un suo amico le
consiglia di acquistare PC
Open.“Da quel
momento ho
iniziato a
studiare sulla rivista.
Contemporaneamente
preparavo l’esame di
informatica con il professor
Parodi, che richiedeva come
esercitazione la costruzione di
un sito Web. Partivo da zero, ma
con costanza, prima imparando
a utilizzare bene Office poi
programmi come Arachnophilia,
e Front Page, nel giro di sei
mesi ho preparato l’esame,
creato il sito e preso 30 con
tanto di stretta di mano del
professore e offerta di lavoro in
facoltà appena se ne sarebbe
verificata l’opportunità”. Che si
è concretizzata proprio in questo
mese: attualmente Beatrice fa
una sostituzione come
assistente e-learning al Centro
Linguistico Multimediale di
Interfacoltà (Climi) e al Centro di
Teledidattica dell’Università di
Genova. Il suo sogno? Rimanere
in facoltà e aprire un centro
studi ricerche volto allo scambio
di informazioni letterarie e
critiche tra Italia e Francia.
Fondamentali per questo, le sue
competenze informatiche e
ovviamente linguistiche. E, come
ci si poteva aspettare da lei, non
ha certo perso tempo: visto che
Genova nel 2004 sarà Città
della Cultura, ha già inviato il
progetto alla Provincia. BeaBea,
noi di PC Open facciamo il tifo
Daniela Dirceo
per te!
GLOSSARIO
MARCATORE (markup) è una
porzione d'informazione che si
aggiunge in testa e in coda a un
blocco di testo per determinarne i
confini, definirne la natura ed
eventualmente l'azione da compiere
su di esso. Il marcatore non fa parte
del contenuto della pagina, bensì
aggiunge semplicemente informazioni
relative a tale contenuto e viene
rimosso dal browser prima della
visualizzazione finale della pagina
sullo schermo del navigatore.
Alcuni marcatori vengono direttamente
rimossi da server prima ancora di
spedire la pagina al browser, nel caso
in cui il marcatore indichi un'azione
che deve essere compiuta sul server.
I marcatori più conosciuti sono quelli
del linguaggio HTML, ma esistono
12/88
molti altri linguaggi basati su
marcatori, in particolare i vari
linguaggi di scripting da usare per
inserire azioni nella pagina Web.
TAG (etichetta) l'indicazione d'inizio
e di fine che si usa per delimitare
l'efficacia di un marcatore, spesso
usata come sinonimo di quest'ultimo.
Qualsiasi tag inizia con i simboli "<"
oppure "</" e termina con i simboli
">" oppure "/>". Molti tag HTML
sono binari, vale a dire operano a
coppie e richiedono un tag di apertura
e un tag di chiusura per completare la
marcatura. Solo il tag di apertura può
contenere attributi e valori.
ATTRIBUTO (attribute)
è una delle caratteristiche che
indicano in che modo applicare il tag
al contenuto e che viene indicata nel
tag di apertura di una qualsiasi
coppia di tag che consenta attributi.
Ad esempio <h1> è il tag che
identifica un titolo e si chiude con il
corrispondente tag </h1>. Possiamo
modificare il tag di apertura
aggiungendo un attributo che
determina l'allineamento del titolo:
align. Uno dei valori da esso
consentiti è right. Perciò <h1
align="right">Titolo allineato a
destra</h1> produrrà un titolo
allineato a destra. Notate che il valore
di un attributo deve essere sempre
compreso tra virgolette. Questa
regola non è imposta dai browser
moderni, ma diventa essenziale per
una futura conversione verso XML.
ELEMENTO (element)
corrisponde, in HTML, alla
combinazione del tag di apertura,
degli eventuali attributi, del tag di
chiusura e del testo racchiuso tra i
tag. Perciò la scritta:
<h1 align="right">Titolo allineato
a destra</h1> nel suo insieme
costituisce un elemento.
IDENTIFICATORE (identifier)
è il nome del tag, vale a dire la parola
inglese o lettera che compare
all'interno dei simboli < >.
Nell'esempio sopra l'identificatore è
h1.
CONTENUTO (content) qualsiasi
cosa presente nella documento che
non costituisca un marcatore.
2a lezione
re particolare, mantenendosi
in sostanza all'interno delle lettere primarie dell'alfabeto, i numeri, il trattino e la sottolineatura.
Le virgolette doppie (") sono
pericolose anche quando usate
all'interno del testo perché
vengono normalmente utilizzate da HTML e dai linguaggi di
scripting per passare i parametri di un comando. Sostituitele
sempre con il codice equivalente previsto da HTML
(") e fate altrettanto con i
caratteri speciali e le vocali accentate.
Nella definizione dei nomi di
file, prestate anche attenzione
all'impiego delle maiuscole e
delle minuscole, irrilevanti per
Windows, ma riconosciute da
Unix/Linux. Anche la lunghezza
dei nomi è importante. Il DOS è
limitato a 8 caratteri di nome e
3 caratteri di suffisso, il Macintosh si ferma a 31 caratteri,
Windows dalla versione 95 in
avanti consente di usare 255
caratteri e lo stesso vale per
Unix. Alcuni consigliano di
mantenersi entro i vincoli del
DOS, al fine di essere compatibili con tutti, ma ciò finisce per
rendere il nome illeggibile. Probabilmente l'approccio migliore è di mantenersi al di sotto
dei 31 caratteri e usare ovunque possibile caratteri minuscoli per i nomi dei file e delle
directory, in tal modo il sito potrà spostarsi su macchine Windows, Macintosh o Linux senza
problemi.
È anche importante rispettare i suffissi che seguono i nomi
dei file e che permettono al
browser di riconoscerne la natura e di trattarli di conseguenza. I più comuni sono .HTM o
.HTML per le pagine in generale. I due sono intercambiabili in
Windows, e su gran parte dei
server Unix e Linux di recente
concezione, a meno che siano
stati configurati altrimenti. Macintosh usa in modo nativo il
suffisso .HTML per il lavoro in
locale perciò consigliamo di
usare sempre quest'ultimo,
quando possibile. Per le immagini i suffissi riconosciti dai
browser sono .JPEG e .JPG per
le fotografie, Graphics Interchange Format (.GIF) per la grafica a 256 colori e Portable
Network Graphic (.PNG) per
grafica e foto, anche se quest'ultimo è tuttora poco diffuso.
Il nome della home page,
cioè della prima pagina del sito,
è determinante perché va riconosciuto automaticamente dal
particolare sistema operativo
La struttura gerarchica
di un sito
Qui vediamo la mappa abbozzata di una porzione di sito, a partire dalla home page
(index.html) per scendere verso le pagine singole che compongono una lezione del
corso. La mappa è stata realizzata mediante lo strumento di disegno siti di Adobe
GoLive 6.0 che consente di tracciare i contenuti del sito con tutte le relazioni prima
ancora di aver creato una singola pagina. Una volta che la mappa è definita, il
programma genera tutte le pagine e le directory necessarie a rappresentarla.
13/88
presente sul server e
inviato al navigatore
quando costui digita
l'indirizzo del sito
senza indicare una
pagina in particolare.
Il nome di questo file
"indice" è index.htm
o index.html per i server Unix e Linux, e
diventa default.htm o
default.asp, nel caso
di Internet Information Server di Microsoft, con la possibilità di riconoscere
anche index.htm e index.asp (.ASP è il suffisso delle pagine dinamiche realizzate
con Active Server Pages). Può assumere
anche altri nomi come main.htm, welcome.htm e home.htm a
seconda del server
Ecco come si traduce sul disco la struttura a
impiegato.
directory per realizzare un sito che contenga gli articoli
L'amministratore di questo corso per Webmaster. Notate che,
di sistema può confi- trattandosi di un sito statico, abbiamo raggruppato gli
gurare il server in articoli in base all'argomento e li abbiamo inseriti in
modo da riconoscere una directory di nome esplicativo. Anche i nomi dei file
tutti questi tipi, ma è sono di tipo esplicativo. Non abbiamo seguito la
convenzione di scrivere tutto in minuscolo per renderli
sempre bene verifi- più facili da capire nell'immagine. Qui la vista
care e regolarsi di strutturate delle cartelle è tratta dalla finestra di
conseguenza. Le al- Esplorazione sito di Dreamweaver MX
tre pagine possono
avere un nome a piacere, an- tre, copiando l'intera cartella
che se c'è chi consiglia di crea- siamo sicuri di aver trasferito
re dei file index.html anche per tutto ciò che serve. Come vele home page di secondo e ter- dremo più avanti, un beneficio
zo livello. Infatti in server cerca ulteriore di raggruppare nella
automaticamente tale file ogni stessa cartella tutti gli elemenvolta che digitiamo un indiriz- ti necessari è la semplificaziozo che finisca con il nome di ne dei link.
Le immagini che invece sono
una directory senza specificare
nient'altro, ad esempio www.di- comuni all'intero sito (loghi,
gifocus.it/prodotti/fotocamere, icone, pulsanti) si trovano di
e nel caso non lo trovi visualiz- solito in una cartella unica, imza in alcuni casi una propria pa- mediatamente sotto la root del
gina indice composta di un sito e accessibile da tutte le alelenco dei file e delle cartelle tre pagine. In tal modo saremo
comprese in quella particolare sicuri di avere una singola copia di ciascun elemento grafico
directory.
e di poterla modificare a piaceCollocare i file grafici
re sapendo che la variazione
e multimediali
sarà immediatamente disponiPer comodità, le immagini bile in tutto il sito.
abbinate a una particolare paTuttavia, se pensate di congina HTML vengono spesso vertire il vostro sito da statico
collocate nella stessa directory a dinamico, diventa opportuno
che ospita la pagina creando collocare in una directory uniun sistema di cartellette diviso ficata anche tutte le immagini
per argomenti oppure per pe- di contenuto, indipendenteriodi temporali, a seconda del mente da dove si trovi la pagitipo di contenuti del sito. In tal na a cui si riferiscono. Ciò commodo, tutti i contenuti relativi plicherà i link all'interno delle
a un determinato argomento pagine, ma ci metterà nella
sono raccolti in una singola condizione di usare il database
cartella e quando dovessimo in modo efficiente. Infatti, i siti
aggiungere o variare qualcosa dinamici collocano nel databasapremmo dove cercare. Inol- se solo gli elementi di testo e il
2a lezione
Collegamento assoluto - URL
http:// www.digifocus.it/ testlabs/ testlabs.html
protocollo
nome a dominio
che punta al sito
percorso delle
nome della pagina che
directory a partire vogliamo raggiungere
dalla homepage
Un collegamento assoluto corrisponde all'indirizzo univoco di una pagina, ossia URL (Uniform Resource Locator). La prima parte
dello URL contiene solitamente il dominio abbinato al sito su cui la pagina è residente, seguono immediatamente dopo le eventuali
directory da attraversare prima di arrivare alla pagina, prendendo a riferimento di partenza la directory radice (root) del sito entro cui
si trova la home page
nome delle immagini relative,
sapendo che sono tutte collocate nella stessa directory.
Se metteste nel database
ogni file grafico per intero finireste per appesantire il sistema
e rallentare il sito, se invece doveste codificare nel database,
oltre al nome dell'immagine,
anche la relativa posizione, finireste per complicarvi la vita
e vincolare il database a una
particolare struttura di directory. Nei siti dinamici, tra l'altro, gran parte delle directory
scompare poiché esistono pochissime pagine precostituite,
solitamente di servizio, perciò
il grande "calderone" comune
per le immagini è obbligato.
Tornando ai siti statici, è
consigliabile in ogni caso utilizzare due directory separate
per le immagini di servizio del
sito (loghi, elementi grafici della pagina, bottoni) e per le immagini di contenuto. In questo
modo chi lavora al mantenimento del sito (Webmaster)
potrà operare senza toccare le
immagini di contenuto e il content editor o content manager
potrà aggiungere immagini fotografiche e disegni senza cancellare inavvertitamente elementi grafici essenziali per la
costruzione dell'intero sito.
Inoltre entrambi potranno
trovare le proprie immagini al
volo, senza rovistare in mezzo
ad altri file di cui non conoscono il contenuto. I file multimediali, ossia audio e video, vengono spesso inseriti nella stessa directory che contiene le
immagini, tuttavia vale la pena
di prevedere un cartelletta a
parte, se non altro per ordine.
in modo gerarchico, lineare o
completamente libero (ipertestuale) come descritto nei vari
sistemi di organizzazione delle
informazioni (vedi Tecniche di
progettazione nella lezione 1).
Il sito stesso poi è accessibile
sul Web per mezzo di un indirizzo universale, detto Uniform
Resource Locator (URL), che
identifica il particolare server
che lo sta ospitando. Nella pratica, lo URL digitato dal navigatore non riflette quasi mai l'indirizzo del server in quanto tale, perché quest'ultimo è spesso complicato da ricordare oltre che fuorviante. Infatti il server può avere i nomi più astrusi (assegnati solitamente dal
provider per proprio uso interno) e il sito medesimo può trovarsi in qualche subdirectory
dal nome ancora più astruso, il
che produce alla fine un indirizzo lunghissimo e difficile da
digitare.
La prassi abituale consiste
perciò nell'acquisire un nome a
dominio che in qualche modo
comunichi l'identità del sito e
che sia anche facile da ricordare e digitare. Il domino è solitamente composto da tre elementi separati da un punto. Il
più importante dei tre elementi di chiama Top Level Domain
e si trova all'estrema destra del
nome a dominio e indica il tipo
di categoria a cui il dominio
stesso appartiene: COM per
commerciale, ORG per le organizzazioni senza fini di lucro, IT
per i domini concessi a persone e società residenti nel territorio italiano. Questa prima
parte del dominio è assegnata
alla gestione di organizzazioni
internazionali che ne definiscono le regole di assegnazione. La seconda spostandosi
verso sinistra contiene il nome
scelto da chi registra il dominio, ad esempio pcopen. La terza parte, sempre spostandosi
verso sinistra, prende il nome
di sottodominio. Spesso non
viene usata e la si riempie con
la dicitura www per indicare
che si tratta di un server che
contiene pagine Web, tuttavia
potrebbe essere utilizzata per
creare infinite variazioni del
dominio che puntino, ciascuna,
a siti separati. Ad esempio, laboratorio.pcopen.it potrebbe
rimandare a un sito specifico
per il nostro laboratorio prove.
Chiude l'elenco l'indicazione
del tipo di protocollo utilizzato
per il trasferimento delle informazioni, cioè l'Hypertext Transfer Protocol, (HTTP), nel caso
delle pagine Web.
Poiché un nome a dominio è
riservato a un solo detentore
su scala mondiale, diventa un
ottimo sostituito per l'indirizzo
del server, al quale viene abbinato in modo invisibile così che
il navigatore digiti il dominio
conosciuto e questo venga tradotto nel percorso per arrivare
al server corretto. Nel caso in
cui il server sia di vostra proprietà, probabilmente il dominio sarà residente sul server
medesimo, tuttavia ciò si verifica di rado e si parla quindi di
dominio virtuale. Vale a dire, il
vostro nome a dominio è conservato su una macchina diversa dal server che ospita il sito,
vale a dire su un computer sempre accessibile via Internet che
rimanda verso il server reale
non appena lo si interroga.
Tale computer solitamente
appartiene alla società a cui
avete affidato la conservazione
del vostro dominio, tecnicamente definita maintainer.
Spesso si tratta di chi vi ha
venduto il dominio in primo
luogo, talvolta è invece l'ISP
che ospita il vostro sito su uno
dei suoi server. La scelta del
maintainer è importante poi- Risoluzione di un indirizzo assoluto - URL
NAVIGATORE
root
URL
directory
di servizio
www.digifocus.it
server del
provider
server che ospita il
dominio (maintainer)
Sito
# 15
home.html
testlabs
testlabs.html
Domini reali e virtuali
La navigazione di un sito avviene per mezzo di collegamenti ipertestuali che indicano
il percorso per passare da una
pagina all'altra. L'interso sito è
unito da questi link, strutturati
14/88
pagina
richiesta
Quando digitiamo un dominio, la richiesta viene inviata a una rete di computer che gestisce una mappa di navigazione globale del
Web, nella quale è indicato l'indirizzo fisico della macchina su cui tale dominio è residente. Spesso quest'ultima è un sistema del
maintainer, cioè l'organizzazione che si limita a ospitare il dominio e tenerlo vivo, senza farlo corrispondere, come da regola, alla
directory radice (root) del vostro sito. Si parla quindi di dominio virtuale che rimanda verso la macchina reale che ospita il sito (ad
esempio il sito # 15) e che fa proseguire alla pagina richiesta dal navigatore
2a lezione
Collegamento relativo diretto
home page
articoli
testo.html
grafica.jpg
link diretto =
“grafica.jpg”
Il collegamento relativo diretto può essere utilizzato quando l'elemento a cui si punta
dalla pagina si trova nella stessa cartella (directory) che ospita la pagina medesima.
È semplice da realizzare e funziona sempre a condizione di mantenere pagina di
partenza e oggetto di destinazione nella stessa cartella, dovunque questa si trovi
all'interno del sito
Collegamento relativo indiretto
(consigliato)
home page
articoli
testi
immagini
grafica.jpg
testo.html
“.. / immagini / grafica.jpg”
link indiretto =
sale di
un
livello
scende
alla
directory
“immagini”
Il collegamento relativo indiretto mette in relazione la posizione della pagina e della
relativa cartella di origine e dell'oggetto di destinazione con la relativa cartella,
tracciando l'intero percorso che bisogna seguire per passare dall'una all'altra.
Cessa di funzionare non appena si sposta uno dei due elementi (origine o
destinazione) all'interno del sito
ché da lui transiteranno tutti
coloro che digitano il vostro
dominio prima di raggiungere il
vostro server e perciò si possono verificare rallentamenti
oppure completa inaccessibilità del sito, anche se questo è
magari perfettamente funzionante.
Affidare il nome a dominio a
chi ve l'ha venduto è la soluzione più rapida e meno costosa, e qualora costui sia anche il
vostro provider, potrete richiedere garanzie sull'efficienza
tecnica del collegamento tra i
due server.
Peraltro tale approccio aumenta i vincoli verso quel particolare provider poiché, nel
15/88
momento in cui voleste cambiare dovreste anche spostare
la posizione del nome a dominio, con inevitabili ritardi di
propagazione degli aggiornamenti sulla Rete e temporanea
invisibilità del vostro sito.
Quando lo digitiamo, il dominio virtuale ci dirotta verso
la macchina server e all'interno
della particolare directory che
il provider ha riservato al nostro sito (lo stesso server infatti contiene quasi sempre diversi siti in directory diverse).
Ciò significa che la home page
del nostro sito non si trova nella root (directory principale)
del server Web che la ospita,
bensì in una cartella due o tre
livelli più sotto. Il navigatore
non vedrà tali livelli accessori,
ma comincerà la navigazione
direttamente dal punto in cui il
si trova la home page del sito e,
sulla finestra del suo browser,
vedrà il nome a dominio seguito dalla serie di directory e sottodirectory che da lì scendono
per portarci alla pagina vera
che abbiamo chiesto. Ad esempio, lo URL http://www.digifocus.it/testlabs/testlabs.html ci
dice che stiamo andando alla
pagina testlabs.html nella directory "testlabs" del sito
www.digifocus.it, indipendentemente da dove tale sito sia
collocato nel server del provider.
Collegamenti assoluti
e relativi
Questo genere d'indirizzo
prende il nome di collegamento assoluto poiché contiene
tutte le informazioni necessarie per arrivare alla pagina senza conoscere il punto di partenza. È il tipo di link che utilizzerete per mandare alla pagina
da un sito esterno oppure dall'interno del testo di una newsletter che spedite ai vostri navigatori abituali per informarli
delle novità. Funziona in qualsiasi circostanza perché è autosufficiente, ma non viene mai
usato per i collegamenti interni
del sito perché ogni volta che
si digita un indirizzo assoluto,
il browser esce dal sito, cerca il
dominio, individua il server fisico corrispondente, ritorna su
quest'ultimo, completa l'indirizzo e ritorna nel sito, con vistosi rallentamenti alla navigazione e congestione del server
che gestisce le richieste del nome a dominio.
Di conseguenza, per i passaggi interni al sito, si usano
collegamenti relativi che indicano le sole informazioni indispensabili per raggiungere il file a partire dalla posizione in
cui ci si trova. Ne esistono di
tre tipi. Chiameremo il primo, il
più semplice, link diretto perché si riferisce alla cartella in
cui già ci troviamo. Prendiamo
l'esempio di un'immagine "grafica.jpg" che si trovi nella stessa directory "articoli" della pagina "testo.html" in cui dobbiamo inserire il link: l'indirizzo relativo diretto contenuto nella
pagina "testo.html" sarà semplicemente = "grafica.jpg".
Nel momento in cui legge
questo indirizzo, il browser sa
che deve cercare il file "grafica.jpg" nella stessa cartella della pagina "testo.html". Supponiamo adesso di avere una directory "testi" e una directory
"immagini" di pari livello entrambe contenute nella directory "articoli" e che la nostra
pagina "testo.html" si trovi appunto in "testi" mentre il file
grafica.jpg sia nella cartella
"immagini".
Dobbiamo usare un link indiretto e dire al browser di
uscire dalla directory "testi" in
cui si trova la pagina
"testo.html", salire di un livello
(mediante il segno convenzionale dei due punti consecutivi
..) , cercare la directory "immagini", ridiscendere all'interno
di questa alla ricerca del file
"grafica.jpg". L'indirizzo relativo diventerà in tal caso = "../immagini/grafica.jpg" e funzionerà solo fintantoché la pagina
di partenza resterà nella posizione attuale all'interno della
cartella "testi". Nel caso in cui
dovessimo spostare la pagina
"testo.html" oppure la cartella
"testi" a un livello inferiore o
superiore, il link smetterebbe
di funzionare.
Per ovviare a tale inconveniente si usa un'altra forma di
link relativo che alcuni definiscono, erroneamente, assoluto, ma che invece noi chiameremo link completo. Si tratta di
un link che non è relativo alla
cartella di partenza, bensì alla
root dell'intero sito. In tal modo il link continua a funzionare
anche nel caso in cui la pagina
"testo.html" fosse spostata in
un altro punto del sito, sempre
a condizione naturalmente che
non si sposti anche la directory
"immagini" a cui il link punta.
La posizione della root è indicata per convenzione da una
barra inclinata (/) perciò il nuovo indirizzo relativo completo
sarebbe = "/articoli/immagini/grafica.jpg".
Attenzione, però, questo approccio presenta un problema
diverso, ossia il browser spesso interpreta come directory
radice l'effettiva root del server, la quale coincide con la
root del sito solo nel raro caso
in cui il server non ospiti
nient'altro, ma che, solitamente, ci spedisce da qualche altra
parte nel caso in cui il nostro
sito sia incapsulato in una directory secondaria del server
ospite come avviene nel caso
di un provider esterno. Infatti il
2a lezione
mascheramento della struttura
di directory del server ospite
avviene solo quando usiamo
l'indirizzo assoluto, completo
di nome a dominio. La prassi
migliore è pertanto quella di
usare link relativi indiretti, facendo attenzione a spostare le
pagine il meno possibile una
volta che il sito è stato svilup-
Collegamento relativo completo
home page
articoli
immagini
testi
scende di
1 livello
grafica.jpg
testo.html
“/ ar ticoli / immagini/grafica.jpg”
link completo =
porta
alla
radice
del sito
scende
di 2
livelli
Il collegamento relativo completo parte dalla radice (root) del sito, vale a dire dalla
directory in cui si trova la home page, per scendere verso la posizione dell'oggetto di
destinazione indicato nel link. Il collegamento è svincolato dalla posizione della pagina
di origine che lo contiene e perciò quest'ultima può essere spostata liberamente nel sito
pato. La gestione di queste problematiche diventa in ogni caso molto semplice nel momento in cui s'impiegano ambienti
di sviluppo integrati come
Dreamweaver MX o Adobe GoLive 6.0 che contengono funzioni per la gestione integrale
del sito.
In tal caso, se spostiamo un
file oppure una cartella da una
posizione all'altra, usando le
apposite finestre di controllo,
verranno aggiornati automaticamente tutti i link che vi fanno
riferimento negli altri documenti, a condizione naturalmente di averli impostato utilizzando le funzioni interne dell'editor e non direttamente a
mano. Ci penserà il programma, infatti, a costruire i link relativi indiretti nel modo più idoneo, togliendoci dall'impiccio,
e a ricostruirli ogni volta che
spostiamo qualcosa.
Copie locali e aggiornamenti
Un sito statico nasce sul
computer di chi lo sviluppa e
viene trasferito a intervalli periodici sul server di pubblicazione, copiando magari solo i
file che sono stati modificati
dopo il precedente aggiornamento.
Per fare in modo che tutto
funzioni a dovere è importante
usare link relativi sulla propria
macchina in modo corretto, ed
è anche importante tenere la
struttura del disco locale identica a quella del server remoto,
altrimenti i link finiranno per
interrompersi. Per il trasferimento delle pagine finite si usa
il protocollo FTP (File Transfer
Protocol) tramite utility specifiche, oppure mediante le funzioni integrate in gran parte
degli Editor HTML commerciali e gratuiti.
I più ricchi tra questi, offrono anche un pannelli di controllo dell'intero sito che consentono di esaminare in dettaglio ciascun elemento, eseguire
simulazioni e verifiche in locale prima dela pubblicazione finale.
2 Progettare la pagina
na volta definita la mappa
del sito e la relativa struttura di directory siamo
pronti a realizzare le prime pagine campione che ci serviranno come modello per l'intero
sito, il template o modello, così
chiamato perché serve da
"stampo" per la costruzione di
tutte le pagine successive. Nel
concreto, il template contiene
l'intero codice HTML necessario per l'ossatura di una pagina
vuota. Avrà quindi gli elementi
di navigazione e gli spazi in cui
inserire successivamente i contenuti (testo e immagini) con
anche le eventuali informazioni
stilistiche (font, colore, sfondo, eccetera). Ogni volta che
sarà necessario produrre una
nuova pagina, basterà copiare
il template, inserire il contenuto e aggiungere eventuali link.
L'operazione può essere eseguita a mano oppure demandata in automatico agli editor che
dispongono della gestione automatizzata dei template. In quest'ultimo caso, ogni volta che aggiorneremo il template, saranno
aggiornati anche gli elementi fissi (navigazione, pie' di pagina,
eccetera) contenuti nelle pagine
U
16/88
prodotte nel frattempo a partire
da tale template.
Lavorare con i template senza un editor che li gestisca in
automatico aggiunge tempo al
ciclo di produzione, ma il template offre il duplice vantaggio
di garantire uniformità a tutte
le pagine del sito e di consentire un più semplice passaggio a
un'architettura dinamica. Quest'ultima infatti si basa unicamente su template ai quali sono stati aggiunti marcatori realizzati in un linguaggio di scripting che prelevano il contenuto
da un database, invece che richiedere l'inserimento manuale da parte del Webmaster o
del content editor. Da notare
che il sito dinamico non avrà
altre pagine al di fuori dei template, infatti qualsiasi pagina
di contenuto verrà prodotta
automaticamente al momento
della richiesta da parte del navigatore, travasando nel template le informazioni prese dal
database, e cesserà di esistere
subito dopo. Per tale motivo,
abituarsi a lavorare per template costituisce un'ottima palestra per affacciarsi al mondo
del Web dinamico.
Il template parte da un disegno generale, spesso realizzato
da un creativo, il Web designer,
tuttavia spetta al Webmaster
oppure all'Editor tecnico trasformare il disegno in una codifica HTML che possa riprodurre nella finestra del browser ciò che il grafico ha concepito in origine.
La traduzione non è mai perfetta, sia perché gli strumenti
stilistici offerti dall'HTML sono
più rozzi di quelli disponibili in
un programma di disegno o di
videoimpaginazione orientato
alla stampa su carta, sia perché
non esiste alcun modo per controllare esattamente l'aspetto
che la pagina avrà quando visualizzata dal browser del navigatore.
A differenza della pagina di
una rivista, che giace completamente sotto il controllo dell'impaginatore, la pagina Web,
per sua stessa natura, nasce
per essere visualizzata sui tipi
più disparati di computer, equipaggiati con i browser più diversi e con ogni genere di sistema operativo. Inoltre molti
browser offrono al navigatore
la possibilità di personalizzare
PC Open 27 Dicembre 2002
ciò che vede, modificando la
risoluzione dello schermo, il
numero di colori visualizzati, la
dimensione della finestra, la
grandezza dei caratteri e altro
ancora.
Perciò il progettista deve costruire una pagina che mantenga una propria coerenza anche
se sottoposta a vistose alterazioni nel momento in cui viene
ricevuta. Inoltre, dovrà anche
tenere conto di elementi di usabilità e di navigabilità del sito,
che consentano a chiunque arrivi nella pagina direttamente
dall'esterno di capire dove si
trovi, di che cosa la pagina tratta e dove può andare da quel
punto.
Prima ancora di scrivere una
riga in HTML è necessario dividere la nostra pagina in aree regolari e possibilmente costanti
in cui collocare gli elementi di
navigazione, il contenuto vero
e proprio e qualsiasi altro elemento che sia necessario (ad
esempio banner pubblicitari, e
così via).
Modelli di pagina
La creatività non ha limiti e
ci sono diversi approcci possi- 2a lezione
bili. Sul Web si sono consolida-
ti due approcci ricorrenti per la
strutturazione delle pagine
(per un approfondimento del
tema rimandiamo a "Web design arte e scienza" edito da Apogeo). Il primo modello prende il
nome di schema tre-quattro pannelli e moduli e prevede nella
parte alta una zona orizzontale
che contiene il logo del sito,
eventuali banner e l'indicazione di dove ci si trova in quel
momento all'interno del sito
medesimo. Il secondo pannello, costituito da una verticale a
sinistra, contiene di solito la
barra di navigazione e infine il
terzo pannello, centrale, ospita
il contenuto. Nella pratica la
zona di contenuto non viene
sfruttata appieno per un limite
intrinseco di tutti i browser, e
cioè l'impossibilità di stampare
ciò che si trova all'estrema destra dello schermo (noi abbiamo misurato empiricamente
tale limite a 659 pixel dal bordo
sinistro della pagina Web).
Nelle realizzazioni pratiche
troviamo perciò modelli a quattro pannelli, con una colonna
all'estrema destra della pagina
usata per contenuti minori. I
pubblicitari la definiscono, in
gergo, area extramercial, perché ospita banner e bottoni secondari, in aggiunta a quelli
primari in testa alla pagina. Solitamente la si utilizza anche
per elementi di servizio, come
la finestra di login, la navigazione locale (link che collegano
tra loro varie parti di uno stesso articolo), i bottoni realizzati
dal marketing per iniziative
promozionali oppure dal content manager per evidenziare
altri contenuti del sito.
Dove cade la piega
Un altro concetto importante nel progettare una pagina e,
in particolare la home page, è
la caduta della piega o fold, all'inglese. Si tratta del limite inferiore della porzione visibile
della pagina prima di eseguire
lo scrolling. La parte alta della
home page costituisce la porzione più pregiata del sito,
quella che tutti vedranno e che
perciò tenderà ad affollarsi di
elementi di navigazione, di richiami editoriali e di eventuali
contenuti pubblicitari.
Infatti, solo una parte dei navigatori esegue lo scrolling verticale della home page per vedere il contenuto sottostante,
dopo la piega (below the fold).
Il termine è preso a prestito dal
mondo dei quotidiani la cui prima pagina è visibile solo per
metà quando è piegata sul banco dell'edicolante, dunque la
parte superiore, sopra la piega,
contiene sempre gli elementi di
richiamo più forti.
A dire il vero, i dettami originali del Web design insegnavano a realizzare home page abbastanza semplici da poter essere visualizzate per intero
senza il bisogno di scrolling e
ovunque sia possibile questa
rimane la soluzione da preferirsi, specie per i siti più semplici, tuttavia col crescere dei
siti e con il fatto che almeno
metà dei navigatori non tenta
nemmeno di navigare il sito,
Test: leggi le domande e verifica le tue risposte
Riepilogo dei concetti studiati nelle prime due lezioni
?
1. Quali sono le competenze di un Webmaster?
2. Che cos'è un editor HTML di tipo testuale?
3. Che cos'è un editor visuale?
4. Che cos'è un ambiente di sviluppo integrato?
5. Quali sono i due possibili schemi per organizzare le informazioni?
6. Quante possibili strutture esistono per la mappa di un sito?
7. Quali sono gli strumenti di navigazione offerti dal browser?
8. Quali sono le dieci regole per un buon sistema di navigazione?
9. Che differenza c'è tra un sito statico e uno dinamico?
10. Che regola seguire nella strutturazione delle directory?
11. Che differenza c'è tra un collegamento assoluto e uno relativo?
12. Che cos'è un template?
13. Che cos'è la piega?
14. Cos'è HTML?
15. Cos'è un marcatore (markup) in cosa si differenzia da un tag?
16. Quali sono i più comuni sistemi per "impaginare" un documento Web?
(le risposte le trovi a pagina 31)
17/88
1
Modello a tre-quattro pannelli. È il modello più diffuso nel Web e prevede la
realizzazione di un modulo o pannello orizzontale superiore (modulo 1) che contiene il
logo del sito e alcuni elementi di navigazione globale, un pannello verticale all'estrema
sinistra (modulo 2) che contiene la navigazione vera e propria, un pannello centrale
(modulo 3) che ospita i contenuti e un pannello verticale all'estrema destra (modulo 4)
che contiene rimandi locali oppure bottoni promozionali e che sfrutta l'area non
stampabile della pagina
ma si ferma alla home page, il
numero di elementi da enfatizzare in quest'ultima cresce rapidamente, perciò è inevitabile
avere home page con uno oppure anche due scrolling e pagine interne che arrivano fino
al limite massimo di cinque
scrolling.
Per compensare in parte il
problema della piega e rendere
il più visibile possibile i contenuti interni del sito, alcuni portali hanno inventato un altro
modello di pagina, denominato
in gergo LSD dall'inglese Logo,
Search box and Directory. In
pratica fa quel che dice: apre la
pagina con il logo e con le informazioni che permettono al navigatore di orientarsi sulla sua
posizione attuale e di navigare
nelle sezioni principali, prosegue subito sotto con la finestra
di ricerca, messa molto in risalto perché costituisce uno
degli elementi di navigazione
primari per un portale e finisce
con la Directory, ossia la classica visualizzazione tabellare
degli argomenti che troviamo
in Yahoo, Virgilio, Libero e tanti altri. Quest'ultima è l'elemento centrale del modello poiché
consente di creare una struttura di navigazione molto ricca,
in aggiunta alla barra standard,
che offre immediata visibilità
di quel che c'è sotto la home
page.
Il modello LSD soddisfa anche le raccomandazioni di usabilità di Jakob Nielsen, secon-
do il quale la home page dovrebbe contenere l'80% d'informazioni di navigazione e solo il
20% di contenuto effettivo, proporzione che si ribalta nelle pagine interne dove il contenuto
regna sovrano e gli elementi di
navigazione sono meno evidenti (vedi il testo Web usability edito da Apogeo).
Sempre secondo le indicazioni di Nielsen, e non solo, il
navigatore medio si ferma per
8 secondi su una qualsiasi pagina prima di decidere se approfondire oppure andare altrove, dunque la home page
deve offrire a colpo d'occhio
ogni possibile strumento per
capire cosa ci sia all'interno
del sito.
È invece pessima e deprecata la prassi del tunnel, vale a dire la presentazione ai nuovi navigatori di una sequenza di pagine promozionali da attraversare obbligatoriamente prima
di arrivare alla home page vera
e propria. Altrettanto deprecata, benché meno dannosa, la famigerata splash page, una pagina d'introduzione animata che
cerca di spiegare lo scopo del
sito e che prevede, solitamente, un pulsante skip intro per
procedere direttamente alla
home page del sito. Entrambe
le soluzioni risultano appaganti per il progettista grafico e
magari per il marketing, ma sono inutili per il navigatore che
esce dal tunnel appena possibile e non si ferma quasi mai 2a lezione
per osservare l'animazione del-
la splash page, bensì salta direttamente su altri siti.
Il metodo più pratico per
realizzare un sito di medie dimensioni è quello di seguire il
modello a tre/quattro pannelli
per tutte le pagine, compresa la
home page, oppure di adottare
il modello LSD per la home page e per le pagine di navigazione primarie (le home page di
secondo e terzo livello, nel caso in cui il sito sia molto ampio
e profondo), mantenendo i
quattro pannelli per tutte le altre.
Impostare gli spazi
del "canovaccio"
Definita la struttura della pagina, bisogna "prendere le mi-
sure" prima di cominciare a
scrivere il codice HTML vero e
proprio. In gergo ci chiama canvas, ossia canovaccio, l'area
per costruire una pagina Web
che stia nello spazio disponibile all'interno della finestra del
browser. Tale spazio varia in
funzione del browser, del sistema operativo e della quantità
di pannelli e strumenti accessori che il navigatore mantiene
visualizzati.
I due parametri importanti
da conoscere sono larghezza e
altezza del canovaccio, misurati in pixel. La larghezza corrisponde al numero di pixel disponibili in orizzontale quando
la finestra del browser è aperta
completamente sullo schermo
(posizione massimo ingrandi-
2
Modello LSD. Deriva il suo nome dalle iniziali delle parole inglesi Logo Search
Directory. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte dei
portali per la realizzazione della loro home page. La pagina viene divisa in tre fasce
orizzontali, consecutive. La prima contiene il logo del sito e gli eventuali elementi di
navigazione globale del sito. La seconda, di solito piccola, contiene la finestra per
impostare una ricerca per mezzo del motore di ricerca interno al sito/portale. La terza
(directory) ed elenca le principali categorie e sottocategorie d'informazioni o servizi
offerti. Di solito, a fianco della directory troviamo anche colonne verticali che
contengono informazioni, ulteriori elementi di navigazione e bottoni promozionali
18/88
mento), tolta l'eventuale barra
di scorrimento verticale. L’altezza è invece il numero di
pixel disponibili nella finestra
prima della "piega".
Per capire quanto sia effettivamente grande il canovaccio,
dobbiamo assegnare dimensioni in pixel ai vari elementi. Si
comincia dal considerare la risoluzione del video utilizzata
dal navigatore. Se immaginiamo che la media dei navigatori
oggi disponga di monitor con
almeno 800 x 600 pixel di risoluzione, scopriamo che l'area
massima effettivamente utile
per lo sviluppo è di 780 x 433
pixel, calcolati empiricamente
su una finestra di Internet Explorer all'interno di Windows
XP con le principali barre di comando attive. Per una valutazione più dettagliata vi rimandiamo a un articolo sul Web: Sizing Up the Browsers accessibile
all'indirizzo
Internet:
http://hotwired.lycos.
com/webmonkey/99/41/index3a_page2.html?tw=design.
In generale vediamo che la dimensione considerata mediamente sicura per produrre una
pagina visualizzabile sia di 584
x 599 pixel per schermi da 640
x 480 pixel, 744 x 410 pixel su
schermi da 800 x 600 (i più diffusi) e 968 x 578 pixel su schermi da 1024 x 768.
L'elemento più vincolate è
naturalmente la larghezza, poiché in lunghezza è sempre possibile eccedere, ricorrendo allo
scorrimento verticale della pagina (scrolling), mentre lo
scrolling orizzontale, benché
usato da alcuni siti, va sicuramente evitato. Vediamo che i
diversi siti standardizzano diverse misure di larghezza:
Yahoo Italia, ad esempio, ha
pagine larghe 735 pixel, Virgilio
e Libero (IOL) arrivano a 760
pixel.
Una volta decisa la larghezza
complessiva della pagina, che
sarà anche la larghezza del primo pannello, cioè quello contenente il logo, dobbiamo stabilire le dimensioni delle colonne o pannelli che seguono,
uno parallelo all'altro. Una volta impostate tutte queste indicazioni, siamo pronti a costruire la pagina vera e propria.
Tecniche d'impaginazione
Il Web non prevede strumenti per l'impaginazione grafica di elementi sulla pagina.
Nato in origine per visualizzare
semplici testi chilometrici, con
occasionali immagini annegate
nei testi medesimi, l'HTML non
fornisce marcatori per disporre gli oggetti nella posizione
che vogliamo e con le proporzioni desiderate. La soluzione
elaborata dai progettisti è stata
di ricorrere alle tabelle, nate in
origine come strumento per la
visualizzazione tabulare di dati
e trasformatesi nel principale
mezzo d'impaginazione del
Web. Ogni elemento viene inserito all'intero della cella di
una tabella invisibile e combinando celle e righe contigue si
arriva alla costruzione completa della pagina. Il codice che ne
risulta è abbastanza complesso e richiede una certa esperienza, ma funziona nella gran
parte dei browser.
L'alternativa più rozza e impiegata solo nei primissimi
tempi del Web, quando le tabelle ancora non esistevano,
consisteva nel creare una grande immagine che contenesse
informazioni cliccabili che poi
rimandavano a pagine interne
di testo. Tecnicamente questo
genere di immagini prende il
nome di imagemap oppure
mappe di immagini e vengono
ancora utilizzate in alcuni contesti particolari, ma comportano lentezza nel caricamento
(date le dimensioni del file grafico) e complicazione nell'aggiornamento dei contenuti.
In alternativa, nel tempo, si
sono sviluppati altri tre strumenti d'impaginazione. Il più
semplice e grossolano prende
il nome di frame e consente di
suddividere la finestra a video
in tante finestre più piccole,
ciascuna contenenti una pagina indipendente. Suddividendo i contenuti nelle diverse pagine e regolando le dimensioni
dei frame, possiamo produrre
un'impaginazione approssimativa, ma funzionale. Vedremo
più avanti quali sono i vantaggi
e gli svantaggi dei frame.
Un altro strumento, sicuramente indicato per il futuro,
ma ancora poco supportato
dai vari browser, sono i fogli di
stile (CSS), mediante i quali è
possibile posizionare gli elementi sulla pagina indicandone
le coordinate. I fogli di stile fanno anche parte del cosiddetto
DHMTL (Dynamic HTML) che
consente di aggiungere animazioni e interazione nella pagina
senza l'impiego di oggetti grafici. Una variante rispetto ai CSS
2a lezione
3
Le risposte alle domande di pag. 29
Prendiamo un tipico portale Internet e misuriamo empiricamente lo spazio
effettivamente disponibile per la visualizzazione della pagina all'interno del nostro
browser (in questo caso Internet Explorer con le principali barre di comando attivate) su
uno schermo della risoluzione complessiva di 800 x 600 pixel. Scopriamo di avere 780
x 433 pixel. Nella pratica, il limite consigliato è di 744 x 410 pixel
sono i livelli (layer) di Netscape che tuttavia stanno cadendo in disuso con il ridimensionarsi della diffusione di tale
browser.
Chiude l'elenco l'impaginazione grafica realizzata mediante strumenti particolari come Flash. In tal caso usciamo
completamente dal dominio
dell'HTML e generiamo pagine
che possono essere visualizzate solo mediante l'impiego di
speciali plug-in (moduli aggiuntivi) nel browser del navigatore. Il plug-in di Flash viene
ormai fornito già in partenza
con Internet Explorer di Microsoft ed è abbastanza diffuso
nella Rete, tuttavia si consiglia
di avere sempre una versione
alternativa delle pagine (solo
testo) per consentire l'accesso
anche a chi Flash non c'è l'ha
oppure non lo può utilizzare
perché magari non vedente e
costretto a far riferimento a un
browser che "legga" i contenuti attingendo direttamente dalla codifica HTML.
Usabilità e accesso
I siti moderni, soprattutto
quelli realizzati per la Pub- 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. Troviamo che la pagina che ha una larghezza di 735 pixel sta
comodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato per
compatibilità con tutti i browser nelle condizioni di default (senza barre di navigazione
opzionali) è di 968 x 578 pixel
19/88
1. Progettare la struttura di un sito
partendo dai contenuti che si
vogliono pubblicare e dal percorso di
navigazione che meglio si adatta alla
situazione, produrre una struttura di
pagina HTML che sia leggera,
compatibile con i diversi browser e
vicina alle specifiche grafiche
previste per il sito, conoscenza
perfetta dei linguaggi usati per
costruire le pagine (HTML,
Javascript, Perl CGI, DHMTL, CSS).
2. Sono programmi per l'inserimento
manuale facilitato di codice HTML.
Permettono di inserire i marcatori
usando icone oppure voci di menu e
controllano la sintassi dei marcatori
che abbiamo inserito direttamente.
3. Un programma che nasconde il
codice HTML lasciandoci lavorare
direttamente sulla struttura visiva
della pagina finale, usando
strumenti di generazione automatica
dei tag simili a quelli offerti dagli
editor testuali.
4. Un programma che unisce tutte le
caratteristiche più avanzate di un
editor testuale e di un editor visuale,
aggiungendo funzioni per la gestione
complessiva del sito e per il
controllo di tutti i link.
5. Esatto e ambiguo. Il primo
suddivide le informazioni in
categorie reciprocamente esclusive,
ossia le voci che compaiono in una
categoria non compaiono in
nessun'altra. Un esempio tipico è
un’organizzazione alfabetica, come
nel caso di un dizionario, oppure
cronologica, come nel caso di un
archivio di articoli di giornale,
oppure geografica: i locali di una
città. Il sistema ambiguo si basa
sull'esperienza di navigazione del
navigatore tipo e cerca di guidarlo
quando non sa esattamente cosa
cercare.
6. Tre: gerarchia, ipertesto e lineare.
La prima è quasi sempre presente
complementata dalla seconda
quando bisogna creare collegamenti
diretti tra zone lontane nello stesso
sito o verso siti esterni.
La struttura lineare è adatta per i
corsi on line.
7. Finestra per digitale gli URL
(indirizzi), i preferiti, i tasti Avanti e
Indietro, il tasto home e la
visualizzazione dei link già visitati
con colore diverso.
8. Essere facile da capire, rimanere
costante, fornire un feedback,
apparire contestuale, offrire
alternative, richiedere un’economia
di tempo e di azione, fornire
messaggi visivi chiari, utilizzare
etichette chiare e comprensibili,
essere idonea per gli scopi del sito,
favorire gli obiettivi e i
comportamenti dell’utente.
9. Un sito statico contiene solo le
pagine che abbiamo individualmente
!
realizzato per la
pubblicazione e il
navigatore non può
chiedere di vedere informazioni
visualizzate in modo diverso da
quello noi abbiamo definito in tali
pagine. In un sito centrato su
database, ossia dinamico, è invece
possibile avere una pagina
campione (template) all'interno della
quale riversare al momento le
informazioni più diverse a seconda
di quel che l'utente chiede.
10. Riflettere più fedelmente
possibile il disegno gerarchico
pensato per il sito, usando nomi
mnemonici, mantenendo al
massimo quattro livelli di profondità,
usando solo caratteri minuscoli per
documenti e cartelle, creando una
cartella centralizzata per le immagini
nel caso si voglia poi passare a un
sito dinamico.
11. Un collegamento assoluto indica
l' URL per intero e richiede al
browser di uscire dal sito in cui si
trova per raggiungere la pagina
indicata, anche se questa
appartiene al medesimo sito. Un
collegamento relativo indica invece
la posizione della pagina di
destinazione in rapporto alla pagina
di partenza oppure alla radice
(directory della home page) del sito.
12. È una pagina campione che ci
servirà come modello per molte
altre pagine di contenuto del sito.
13. La linea ideale che separa la
parte visibile della pagina da quella
che può essere vista solo attraverso
lo scorrimento verticale (scrolling)
dei contenuti.
14. L’HyperText Markup Language
nasce nel 1989 nel laboratorio
europeo per la fisica delle particelle
(CERN) come strumento per
consentire la creazione e
distribuzione di documenti
ipertestuali, cioè documenti di testo
liberamente interconnessi tra loro. Il
suo unico obiettivo consiste nella
creazione di pagine di documenti
visualizzabili via rete sulle macchine
più disparate, per mezzo
dell’intermediazione di uno speciale
programma, denominato browser
(“sfogliatore”, alla lettera) che
riconosce i comandi HTML e
visualizza di conseguenza il testo
che essi racchiudono.
15. Il marcatore è una porzione
d'informazione che si aggiunge in
testa e in coda a un blocco di testo
per determinarne i confini, definirne
la natura ed eventualmente l'azione
da compiere su di esso. Il tag
(etichetta) indica l'inizio e la fine
dell'area di efficacia di un
marcatore. Qualsiasi tag inizia con i
simboli "<" oppure "</" e termina
con i simboli ">" oppure "/>".
16. Le tabelle e i frame.
2a lezione
blica Amministrazione richie-
dono, anche in Italia, l'osservanza di alcune regole che modificano il modo d'impostare i
contenuti sulla pagina e i sistemi d'impaginazione possibili.
Si tratta di regole di usabilità,
per riprodurre un ambiente
che sia familiare al navigatore
e che gli consenta di fruire dei
servizi del sito immediatamente senza dovere imparare a
usarlo, e regole di accessibilità
che consentano di capire i con-
tenuti anche a chi, per vali motivi, non può utilizzare un
browser convenzionale.
L'usabilità si centra in buona sostanza sulla ripetizione
di modelli che si sono dimostrati vincenti sul Web e limita
l'originalità del sito. Il classico
esempio di usabilità è l'automobile: quando salite al posto
di guida, il volante e i pedali
dell'acceleratore, della frizione e del freno sono sempre
nella stessa posizione, qualun-
que modello scegliate. I pochi
modelli che sono "originali" alla fine vengono usati poco.
L'accessibilità di traduce invece nel fornire alternative testuali a qualsiasi cosa che non
sia decifrabile se non guardandola su un monitor: tipicamente immagini e tabelle.
Inserendo una nota di commento per ciascuna immagine
e un sunto per ogni tabella, entrambi previsti dai rispettivi
tag HTML, chi "legge" la pagina
attraverso un sistema di sintesi vocale anziché guardarla a
video, può capire di cosa si sta
parlando. Ciò impone maggiore lavoro su chi produce contenuti, ma allarga il pubblico
potenziale non solo ai portatori di handicap, ma anche a chi
consulta un sito via telefono
(attraverso sintetizzatore vocale) oppure dal browser vocale montato sull’autoradio
(uno scenario poi non tanto futuribile).
3 Pagine HTML e marcatori
HyperText Markup Language nasce nel 1989 nel
laboratorio europeo per
la fisica delle particelle (CERN)
come strumento per la creazione e la distribuzione di documenti ipertestuali, cioè documenti di testo liberamente
interconnessi tra loro.
Il suo unico obiettivo consiste nella creazione di pagine di
documenti visualizzabili via rete sulle macchine più disparate, per mezzo dell’intermediazione di uno speciale programma, denominato browser (alla
lettera “sfogliatore” o "visualizzatore") che riconosce i
marcatori HTML e li elabora,
estraendo il testo che essi racchiudono e visualizzandolo in
funzione del tipo di marcatore
usato. Costituisce un’edizione
ridotta di un linguaggio precedente, molto complesso e già
ben conosciuto nel mondo
scientifico e informatico: lo
Standard Generalized Markup
Language, del quale mantiene
solo le funzioni essenziali per
la produzione di documenti di
lavoro, adattate al concetto d’ipertesto.
L’HTML codifica ogni elemento della pagina mediante
un sistema di marcatori, tag all’inglese, che si pongono all’inizio e in chiusura della porzione di testo che si vuole contrassegnare. La gran parte dei
tag ha un significato strutturale, vale a dire spiega la natura
di quella particolare porzione
di testo: titolo, sottotitolo, paragrafo, tabella, immagine, collegamento (link) e non dice in
che modo visualizzarla. 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.
I primi siti Web si presentavano perciò molto scarni nell’aspetto: semplici elenchi di testo
nero su sfondo grigio, con i link
di colore blu e sottolineati, e
con titoli molto vistosi. Non appena il Web è uscito dal contesto universitario per trasformarsi, nella metà degli anni Novanta, in uno strumento commerciale, si è presentata la necessità di fornire un minimo di
estetica e sono nati alcuni marcatori stilistici che modificano
direttamente la visualizzazione
del testo viene visualizzato e
che hanno trovato la loro massima applicazione nell’HTML
3.2, ai tempi di Netscape 4x e Internet Explorer 4x.
Tali marcatori stilistici,
tutt’ora in uso, sono stati deprecati dal World Wide Web
Consortium (www.w3c.org),
detentore e promulgatore delle specifiche HTML, al momento del rilascio della versione
più recente del linguaggio, la
4.01, ormai supportata, almeno parzialmente, da tutti i nuovi browser.
L'attuale orientamento è infatti quello di riportare l’HTML
a funzioni unicamente strutturali, lasciando ai fogli di stile in
cascata (Cascading Style
Sheets) il compito di aggiungere stile al testo.
Questi ultimi, tuttavia, non
trovano ancora piena implementazione in alcuni browser
e perciò molti progettisti ancora abbinano fogli di stile e marcatori HTML stilistici secondo
tecniche che vedremo e che
prendono il nome di transitio-
nal (soluzioni transitorie).
La sintassi del linguaggio
HTML è semplicissima e si basa su parole inglesi comuni.
Non occorrono particolari programmi per scrivere una pagina HTML, basta infatti un qualsiasi editor di testo. L’impiego
tuttavia di editor dedicati sveltisce il lavoro e riduce gli errori.
Ogni marcatore è contenuto
tra il simbolo di minore < e
maggiore > senza spazi e si
presenta solitamente in coppia, con un marcatore di apertura e uno di chiusura preceduto dalla barra inclinata. Grazie a questo approccio elementare, è facile delimitare la
porzione di testo a cui il tag si
applica.
Ad esempio <strong>testo in
grassetto</strong> indica che la
frase contenuta tra i due marcatori va visualizzata con forza
(strong) il che significa in grassetto, nell'interpretazione abituale del browser Web (può invece assumere forme diverse
in browser di natura diversa,
come quelli usati sui telefonini
abilitati alla navigazione di siti
Internet).
Nel caso in cui non ci sia alcun testo tra i due tag, il browser ignorerà il tag e non visualizzerà nulla all'interno della
pagina. L'unica eccezione sono
i tag che non prevedono un
marcatore di chiusura e che
perciò producono un effetto in
ogni caso. Un esempio è il tag
di ritorno a capo <br> che formalmente dovrebbe essere
scritto <br/> al fine d'indicare
che si tratta di un tag particolare.
Esistono, poi, tag che hanno
un tag di chiusura facoltativo e
che perciò producono un effetto anche se manca il testo corrispondente. Un esempio classico in questo senso è il tag di
paragrafo <p> che produce un
ritorno a capo con inserimento
di una riga bianca anche se il
paragrafo fosse vuoto. XHTML,
il nuovo linguaggio di unisce
HTML e XML, rende obbligato-
Struttura minima della pagina
Qui vediamo la sequenza di marcatori indispensabili per costruire una pagina Web.
Head contiene l'intestazione del documento, invisibile nella finestra del browser con la
sola eccezione del titolo. L'intestazione serve per allegare alla pagina informazioni utili
per i motori di ricerca e per altri scopi. Il documento vero e proprio, visibile al
navigatore, è contenuto tra i tag <body> e </body>
2a lezione
ria la chiusura di tutte le coppie di tag, anche quelle facoltative, perciò tanto vale abituarsi fin d'ora a chiudere regolarmente tutti i tag che possono essere chiusi, come viene
già fatto dagli editor che generano codice in automatico.
I tag HMTL possono essere
scritti con lettere maiuscole o
minuscole indifferentemente,
tuttavia la pagina risulterà più
ordinata se cercherete di seguire una regola. Alcuni Webmaster preferiscono scrivere
sempre i tag tutti maiuscoli per
distinguerli più facilmente dal
resto del testo (effetto ottenibile anche con la colorazione
diversa offerta da molti editor
moderni). Altri preferiscono
scriverli tutti minuscoli così
da essere già compatibili con
XHTML, che distingue tra
maiuscole e minuscole.
È possibile nidificare diversi
tag al fine di creare un effetto
cumulato, in tal caso bisogna
sempre chiudere per primo
l'ultimo tag aperto (come avviene nelle parentesi in matematica) e fare molta attenzione
a non sovrapporre tag diversi.
Ad esempio: <b><i>testo corsi-
21/88
vo grassetto </i></b> è corretto
perché i tag sono nidificati,
mentre <b><i>testo corsivo
grassetto </b></i> è sbagliato
perché i tag s'incrociano.
Un'altra particolarità importante è che HTML riconosce
un singolo spazio, perciò se
utilizzate diversi spazi vuoti in
sequenza per separare tra loro
le parole o per far rientrare
una riga rispetto al margine sinistro, il browser visualizzerà
sempre e comunque uno spazio solo, a meno che lo abbiate
istruito di mantenere esattamente il formato originale, con
il tag <pre> (preformatted text)
usato solitamente per visualizzare listati di programma o altri testi tecnici. HTML ignora
anche i ritorni a capo e di fatto
rientri e ritorni a capo servono
unicamente per tenere ordine
nella pagina e beneficio di chi
scrive il codice, ma aggiungono caratteri e peso alla stessa.
Se vogliamo mandare a capo
una riga sulla pagina dobbiamo usare un tag specifico come <br> oppure <p> (che aggiunge anche una riga bianca).
Tutti i ritorni a capo e i rientri
prodotti nella pagina HTML
originale ("source" in gergo)
con un editor di testi oppure
un editor HTML servono unicamente a tenere ordine visivo
tra le righe quando le si scrive,
ma aggiunge peso inutile alla
pagina finale. Per tale motivo,
una volta completato il lavoro,
diversi editor HTML consentono di eseguire un'ottimizzazione rimuovendo tutti gli spazi e
i ritorni a capo superflui. In tal
modo, la pagina sarà più leggera e veloce da trasferire, ma
sarà anche più difficilmente
decifrabile da parte di terzi. In
generale i ritorni a capo forzati nel codice (l'insieme di istruzioni HTML che compongono
la pagina) vanno usati con molta prudenza, in particolare
vanno evitati in mezzo ai tag,
cioè si sconsiglia fortemente di
andare a capo lasciando metà
degli attributi associati marcatore su una riga e metà sulla
successiva. Molto rischiosa
l'interruzione di tag che contengono link ipertestuali ed
elementi di tabella. Alcuni
browser generano problemi di
allineamento tra le celle di una
tabella per il solo fatto che
queste erano state separate da
un ritorno a capo. Perciò,
quando notate un comportamento strano negli allineamenti, provate a rimuovere i ritorni
a capo in mezzo a quella porzione di codice.
Anche nel caso del testo, il
consiglio è di andare a capo solo quando si vogliono effettivamente separare i paragrafi.
A questo riguardo è bene prestare attenzione alle funzioni
di "a capo" automatico fornite
da alcuni editor.
Sono necessarie per leggere
chiaramente righe di codice
molto lunghe senza dover continuamente scorrere la pagina
in orizzontale, ma si dimostrano deleterie quando realizzate
per mezzo di un a capo forzato
che rimane nella pagina in permanenza. Accertatevi che il
programma esegua il "soft
wrap", cioè il ritorno a capo dinamico delle righe
ripiegandole a capo solo a video,
senza l'aggiunta di
ritorni a capo fisici
nel documento. prosegue
(versione integrale
dell’articolo sul CD)
sul CD
n. 66
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. Ricco di esempi, si dimostrerà
rivelatorio per molti.
Hops, 192 pagine, 33,05 euro.
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.
Hops, 264 pagine, 8,26 euro.
INDISPENSABIL
Corso interattivo sulle basi del
linguaggio HTML e di CSS (fogli di
stile). Semplice nel linguaggio e
limitato agli attibuti fondamentali dei
due linguaggi, ottimo per chi comincia
grazie anche alle lezioni contenute su
CD.
MCGraw-Hill, 236 pagine, 30,00 euro.
22/88
Ottimo riferimento professionale.
Fornisce una preziosa base per la
transizione da HTML 4 a XHTML, sia in
termini generali, sia nel dettaglio del
singolo tag. Una lettura indispensabile
per il Webmaster che voglia costruire
siti duraturi nel tempo.
McGraw-Hill, 499 pagine, 33,50 euro.
E
E
Padroneggiare lo sviluppo avanzato di
un sito che sia conforme ai nuovi
standard XHMTL. Non è una
“reference”, bensì un manuale
operativo, ricco di esempi visivi e con
informazioni di qualità.
Jackson Libri, 682 pagine, 40,80
euro.
INDISPENSABIL
Approccio inedito all’usabilità
condotto da uno specialista italiano
che riporta i concetti generali di questa
nuova disciplina alle peculiarità del
nostro Paese.
Lettura interessante per allargare il
proprio punto di vista.
Apogeo, 170 pagine, 16,53 euro.
Guida intermedia per imparare lo
sviluppo manuale di pagine HTML e
l’uso appropriato dei tag più
importanti. Strutturato con una grafica
facilmente leggibile, il libro è
assimilabile anche da un principiante,
pur non essendo elementare.
McGraw-Hill, 338 pagine, 18,50 euro.
Riferimento autorevole sui temi della
navigabilità di un sito e delle regole
che sottendono qualsiasi sistema di
navigazione. Da conoscere prima di
affrontare la progettazione di un nuovo
sito o prima di eseguire il restyling di
uno esistente.
Hops, 334 pagine, 25,31 euro.
INDISPENSABIL
Bibbia dello sviluppatore per imparare
l’uso di JavaScript all’interno di pagine
dinamiche. Richiede alcune basi di
programmazione, perciò non è alla
portata del neofita. Strumento
indispensabile per un Webmaster
professionista.
Apogeo, 823 pagine, 50,61 euro.
Panoramica delle tecniche per la
produzione di qualsiasi componente di
sito; dalle pagine HTML, ai contenuti
multimediali; audio e video. Utili le
sezioni sui CSS (fogli di stile) e
JavaScript. Prontuario generale per chi
non ha tempo di leggere altro.
Apogeo, 392 pagine, 25,31 euro.
Nonostante il titolo questo è un
volume ricco d’informazioni utili e
consigli che possono servire anche al
professionista. Affronta in dettaglio
quel che un Webmaster dovrebbe
sapere per rapportarsi con fornitori
esterni.
Apogeo, 404 pagine, 18,59 euro.
Unico manuale oggi disponibile in
italiano sulla nuova versione di GoLive
(integrata nel CD di questo numero).
Copre tutte le funzioni di uso comune
del programma, con svariati esempi e
consigli validi per Mac e per Windows.
Jackson Libri, 299 pagine, 36,00
euro.
E
E
2a lezione
5 Strutturare i contenuti nella pagina:
tabelle, frame e form
a costruzione di una pagina
HTML equivale alla battitura di un testo con una telescrivente. Il browser costruisce la pagina leggendo in sequenza ciascuna riga, carattere per carattere. Combinando i
comandi e i contenuti che trova lungo il percorso, arriva alla
fine a produrre l’impianto desiderato.
Ogni cosa che si trova nella
pagina è di fatto un carattere di
testo che esprime un comando, indica la posizione di
un’immagine e le relative dimensioni, descrive un link
esterno, indica un testo da visualizzare, stabilisce la posizione dei diversi elementi.
Si dice tecnicamente che
ogni elemento è inline, vale a
dire si trova inserito in una riga sequenziale e non può essere letto prima che siano stati
letti gli altri caratteri che lo
precedono.
Poiché nasce per visualizzare testo che fluisce in continuo, HTML non prevede alcuna funzione per “impaginare”
gli elementi, ossia per collocarli in una determinata posizione nella pagina, all’interno
L
1
di riquadri o colonne che abbiano proporzioni ben definite
rispetto al resto.
Se ci affidiamo agli strumenti base del linguaggio, l’unica
forma di pagina possibile sarebbe un testo chilometrico,
occasionalmente interrotto da
un’immagine o da un link verso
altri documenti.
Talvolta questo può anche
essere sufficiente, come nei
primi siti universitari e amatoriali che si sono visti sul Web.
In tal caso non dovete far altro
che iniziare a inserire il testo e
le immagini in sequenza nella
zona compresa tra il tag
<body> e il suo gemello
</body> che, come abbiamo
detto, delimitano l’inizio e la fine del documento vero e proprio.
Nella maggior parte dei casi,
però, si vuole un’impaginazione più raffinata, che divida la
pagina in aree ben distinte, ciascuna con elementi propri, come ad esempio la struttura a
quattro pannelli che abbiamo
visto nei modelli d’impostazione della pagina. In tal caso, prima ancora di cominciare a inserire il contenuto, ci serve
una struttura capace di contenerlo. Le scelte possibili sono
tre: tabella, frame e form. In
realtà esiste anche la possibilità di collocare gli elementi
mediante le funzioni di posizionamento dei fogli di stile in
cascata, CSS, ma queste ultime
non sono supportate da tutti i
browser e ne parleremo, più
avanti, quando affronteremo il
tema dei fogli di stile.
Il più diffuso e versatile dei
tre sistemi sono le tabelle, perché compatibili con tutti i
browser e prive di controindicazioni in materia di usabilità e
di estetica. Se le configuriamo
senza bordo, le tabelle diventano una specie di griglia invisibile che tiene al loro posto i
vari elementi della pagina, immagini e testo. Gli unici svantaggi delle tabelle sono il non
garantire l’assoluta stabilità
delle dimensioni e delle proporzioni tra i componenti e la
difficoltà d’implementazione.
Particolarità dei frame
I frame sono invece più facili da realizzare e offrono un
controllo molto più rigoroso
degli spazi. Tuttavia presenta-
2
no importanti svantaggi di usabilità e di estetica. Dividono la
finestra in diversi riquadri, ciascuno contenente una pagina
Web indipendente, perciò diventa impossibile far funzionare i tasti di navigazione in avanti e all’indietro del browser. Infatti, con tre o quattro pagine
contemporaneamente presenti
a video, non è chiaro quale sia
la pagina in cui ci troviamo
esattamente e in quale dei diversi riquadri debba essere caricata quella a cui si vuole ritornare. Inoltre, anche nel definire le istruzioni di navigazione
nel sito, dobbiamo sempre indicare in quale pannello inserire la pagina a cui il link è indirizzato, il che complica un poco i collegamenti ipertestuali.
In materia di stampa si può
stampare un solo riquadro per
volta e il browser non sa quale
sia quello giusto a meno che
glielo indichiamo noi usando
una complessa sequenza con il
tasto destro del mouse, ben
poco amichevole per il navigatore comune. Infine la dimensione rigorosamente bloccata
dei riquadri può anche diventare un problema quando la
pagina esce dai contorni del video e diventa necessario eseguire lo scrolling verticale. In
tal caso compariranno una
banda di scorrimento verticale
e orizzontale (a seconda della
direzione in cui il contento deborda rispetto al progetto originale) che sfigurano la pagina
e ne complicano l’uso.
Form per la registrazione
Fig. 1 Esempio di un'impaginazione tabellare. L'immagine che segue si riferisce a una pagina Web costruita usando una complessa
griglia di tabelle nidificate che tengono al proprio posto i vari elementi.
Fig. 2 Tabella evidenziata. Qui vediamo evidenziato in modo grossolano alcune delle tabelle che compongono la pagina. Notate che
esiste una tabella principale esterna che ne contiene altre che a loro volta ne contengono altre in uno schema di scatole cinesi
23/88
I form o moduli servono a
formattare un particolare genere di pagina, quelle utilizzate
per raccogliere informazioni
dal navigatore. Hanno il tipico
formato di un formulario da
compilare, con una serie di caselle accompagnate dalle relative etichette esplicative, più
eventuali menu a tendina da
cui scegliere voci già reimpostate oppure caselle da barrare per operare scelte immediate. Sono compatibili con ogni
genere di browser possono essere a loro volta incapsulati all’interno di tabelle o frame, ma
non è indispensabile.
2a lezione
6 Adobe GoLive 6.0 maestro di tabelle
on la nuova versione del
suo celebre ambiente di
sviluppo integrato, Adobe
consolida una soluzione che è
particolarmente mirata all’integrazione tra editoria su carta
stampata ed editoria sul Web,
aggiungendo anche funzioni
per la produzione di contenuti
multimediali e mobili, cioè da
visualizzare su telefonino e
PDA in alternativa al computer.
Il quadro competitivo rispetto a
Dreamweaver, l’antagonista di
sempre, è migliorato drasticamente sia con l’aggiunta di una
doppia vista che abbina in contemporanea codice e struttura
grafica, sia con l’aggiunta di
funzioni per il coordinamento
del lavoro di gruppo che sono
invece assenti dalla piattaforma Macromedia.
Migliorata drasticamente anche l’integrazione con gli altri
prodotti Adobe che vanno a
comporre la Creative Suite, infatti GoLive 6.0 oggi può importare livelli di Photoshop, illustrazioni vettoriali di Illustrator e animazioni di LiveMotion
2.0. Mantenuta infine l’integrazione con InDesign, il pacchetto
di videompaginazione per l’editoria tradizionale che consente
un efficace passaggio dei contenuti dalla carta al Web e viceversa.
Al momento esistono due
suite che si contendono il mercato dei creativi che cercano un
ambiente editoriale completamente integrato: Adobe Creative Suite, più orientata al mondo
dei creativi tradizionali che
hanno bisogno di un efficiente
sbocco sul Web, e Macromedia
Studio MX che si rivolge invece
a un ambiente puramente Web
e che coordina la generazione
di siti statici e dinamici, con
particolare enfasi sui linguaggi
di scripting e sullo sviluppo di
applicazioni.
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. Il
Errata: segnaliamo un'imprecisione
nella prova di Dreamweaver MX
pubblicata lo scorso numero: il prezzo
del prodotto Macromedia è 574,80
euro, e 286,80 euro per l'upgrade
24/88
Identikit
Caratteristiche
Produttore e sito: Adobe - www.adobe.com
Requisiti: Windows 98SE, ME, 2000 con Service Pack 2, XP, per la
funzione Web Workgroup Server è richiesto Windows 2000 o XP
Costo licenza: 589,50 euro, 146,20 per l’upgrade da una versione
precedente. Adobe Creative Suite Premium, che include anche Photoshop
7.0, Illustrator 10, InDesign 2.0, Premiere 6.5 e Acrobat Distiller 5.0
Prezzo: 2158,80 euro IVA compresa
programma identifica quattro
categorie di elementi e fornisce
strumenti ad hoc per ciascuna.
Le categorie sono la pagina nel
suo complesso, il codice sorgente (HTML o di altro tipo), il
sito e le funzioni avanzate, come ad esempio i fogli di stile.
La prima categoria di oggetti
è la più comune e contiene la
pagina con tutti i relativi componenti: tabelle, moduli, testo e
immagini. La sua lavorazione è
imperniata su una finestra di
Layout che ne mostra una versione grafica modificabile.
Lavorando con il mouse e i
menu, è possibile inserire, cancellare, spostare e ridimensionare qualsiasi elemento, osservando il risultato immediato a
video. Le tecniche di lavoro sono due: inserire gli oggetti attingendo dalla palette dedicata,
oppure costruire una griglia visiva su cui poi collocare dei segnaposto per gli oggetti.
La griglia, che assomiglia alla
“gabbia“ d’impaginazione di
una pagina su carta, si trasforma poi automaticamente in tabella, collocando tutti gli elementi al posto giusto. Questa
particolare modalità progettuale, molto vicina al sistema di lavoro di un progettista grafico,
non è presente in nessun altro
editor HTML e viene fornita dal
concorrente principale, Dreamweaver MX, solo grazie all’impiego di un prodotto complementare esterno, Fireworks MX.
Il secondo elemento di lavoro che ci accompagna ovunque
è la finestra Inspector che mostra i parametri di qualsiasi oggetto selezionato permettendoci di modificarli senza intervenire manualmente sul codice.
Si notano anche alcune finezze nella finestra Layout: il titolo della pagina è immediatamente accessibile nella cornice
superiore della finestra di
Layout e può essere modificato
direttamente (come avviene anche in Dreamweaver), ma qui
possiamo anche estendere il
bordo superiore e accedere a
tutti gli altri elementi dell’intestazione (head), senza dover
scorrere il listato HTML come
invece accade in altri editor.
In basso alla finestra, come
in Dreamwaver, abbiamo l’indicazione della larghezza in pixel
della pagina su cui stiamo lavorando.
Rispetto alla versione precedente, ora è anche possibile
aprire una finestra di esplorazione del codice immediatamente sotto alla finestra di
Layout così da vedere in che
Adobe GoLive 6.0 si colloca
come il secondo ambiente di
sviluppo integrato per l'impiego
professionale sul Web. Rispetto al
suo concorrente diretto,
Dreamweaver MX, offre funzioni più
evolute di gestione delle tabelle,
d'integrazione la carta stampata e
di gestione di gruppi di lavoro.
L'aggiunta di una vista del codice in
parallelo alla vista grafica
strutturale colma una lacuna che lo
vedeva in svantaggio rispetto alle
versioni precedenti di Dreamweaver
e consente di avere due viste
contemporanee della stessa
pagina: una con il codice e una con
la struttura grafica della stessa. È
possibile agire su una qualsiasi
delle due, osservando subito i
cambiamenti riportati nell’altra.
Idoneo per chi viene dal mondo
della grafica tradizionale e vuole
creare siti oppure travasare lavoro
editoriale sul Web senza traumi.
Forti anche le funzioni di gestione di
contenuti multimediali, grazie
all'integrazione con LiveMotion. È
un prodotto complesso con
un'interfaccia singolare e richiede
un certo impegno per poterne
sfruttare a fondo le caratteristiche.
Ottime le funzioni di gestione
integrata del sito. Dreamweaver, in
confronto, appare più orientato allo
sviluppatore di siti che centra gran
parte della propria attività sulla
produzione di codice e
sull'integrazione con database.
Pro
- Eccezionale gestione delle tabelle
- Ottima palestra formativa.
- Vista contemporanea sul codice
generato e sulla disposizione degli
elementi sulla pagina.
- Unisce efficacemente il lavoro di
creatività e di produzione tecnica.
- È disponibile su diversi sistemi
operativi, compreso Macintosh.
- Viste inedite sulla gerarchia del
sito e sulla struttura della pagina.
- Offre ricchi strumenti per la
gestione di un intero sito.
- È compatibile con gli standard più
recenti
Contro
- Complesso da imparare.
- Richiede un computer abbastanza
potente.
- Il codice generato con gli strumenti
grafici richiede occasionalmente
verifica manuale.
- Finestra di codifica diretta più
debole rispetto ad altri editor
2a lezione
modo le variazioni apportate
graficamente si traducono in
istruzioni HTML e, viceversa,
per vedere come una modifica
manuale dei tag si ripercuota
sulla finestra di Layout che funziona come una sorta di anteprima immediata e modificabile.
Questa visualizzazione doppia e contemporanea emula
una prerogativa che finora è
stata unica di Dreamweaver.
La differenza tra i due è che
Adobe GoLive non visualizza
nella finestra Layout l’effetto
prodotto dagli eventuali fogli di
stile, ma dispone in compenso
di una finestra di Anteprima interna al programma che visualizza immediatamente la pagina nella sua struttura finale, invece di dover aprire una finestra esterna allo scopo come
accade in Dreamweaver.
Un altro modo unico di GoLive per visualizzare il codice sorgente a fianco della finestra
Layout consiste nella palette del
Codice Sorgente. Una finestrella
ridimensionabile che si apre sopra la vista Layout e mostra la
porzione di codice che corrisponde all'area selezionata. Il
terzo modo possibile consiste
nell'apertura di una speciale finestra denominata Visual Tag
Editor che mostra la codifica del
particolare tag su sui è posizionato il cursore e consente di
modificarlo agendo direttamente su quella particolare porzione di codice sorgente.
Operare direttamente
sul codice
Esiste anche, naturalmente,
la finestra per l’editing testuale
a tutto schermo. Si chiama finestra Origine e prevede la colorazione dinamica degli ele-
1
menti di programma distintamente dai tag HTML e dal testo. Qui, a differenza di altri
programmi abbiamo la possibilità di scegliere al volo, mediante icone, che cosa colorare: i marcatori distinti dai relativi attributi e distinti dal testo,
gli elementi nel loro insieme
(cioè tag, più attributi più testo
contenuto all’interno del tag), i
soli collegamenti, il codice eseguibile su server. In questo modo è possibile eseguire analisi
selettive delle diverse componenti della pagina e intervenire
di conseguenza.
Alla pari di altri ambienti,
troviamo la possibilità di visualizzare i numeri di riga e di
attivare un a capo automatico
(soft wrap) delle righe in modo
da non dover eseguire lo scrolling orizzontale e al tempo
stesso non modificare il codice
con l’aggiunta di a capo permanenti.
L’inserimento di qualsiasi
elemento HTML è affidato alla
stessa palette di oggetti che
abbiamo visto nella finestra
Layout e anche qui possiamo
usare il selettore di colori per
qualsiasi elemento colorabile
della pagina. La finestra Inspector perde invece di utilità.
Rispetto a Dreamweaver
sentiamo la mancanza di una finestra grafica d'impostazione
dei parametri di ciascun tag,
sensibile alla posizione del cursore, e il completamento automatico dei tag in fase di digitazione diretta.
Superlativa invece la gestione delle tabelle, quasi del tutto
automatizzata, con completamento automatico degli elementi mancanti e con importazione diretta di qualsiasi gene-
2
re d'informazioni tabellari, versate automaticamente in una
tabella con il numero giusto di
righe e di celle.
Nella manipolazione delle tabelle GoLive non è secondo a
nessuno.
Funzioni speciali
del programma
Unico nel suo genere, GoLive
fornisce altre due viste particolari dedicate esplicitamente
all’analisi dei frame (riquadri) e
della struttura del documento
(in particolare le tabelle).
In pratica, compare un editor strutturale che mostra le relazioni gerarchiche tra i vari
elementi della pagina oppure
tra i riquadri di un frame, consentendo di modificare direttamente gli attributi di ciascuno
e di correggere eventuali errori, spesso difficili da notare nella vista Origine, dove le molteplici righe di codice oscurano il
disegno strutturale che sta dietro alla pagina. Le modifiche
apportate nell’editor di struttura di tabelle o frame si mostrano, poi, direttamente nelle
altre finestre.
La progettazione del sito
Questo è un dei punti di forza di GoLive che, alla pari di
Dreamweaver, consente di tenere sotto controllo tutti gli
elementi del sito, creare template modello per tutte le pagine, ispezionare graficamente
link e gerarchie e modificare
qualsiasi elemento nel sito con
un doppio clic. Una prerogativa
unica di GoLive è tuttavia quella di disegnare il sito da zero,
su uno schema grafico che visualizza tutti i possibili elementi. Lo schema può essere
stampato ed esportato per sottoporlo all'approvazione del
committente oppure semplicemente per tenere una documentazione delle varie fasi.
Una volta che lo schema è
completo, il programma genera automaticamente tutte le pagine e gli oggetti corrispondenti, tenendo traccia dei link previsti che saranno aggiunti a mano a mano che inseriamo contenuti nelle pagine così create.
Un esempio in questo senso è
fornito dall'esercizio presente
sul CD Guida.
Il lavoro di gruppo
Un'altra area di netta differenziazione
rispetto
a
Dreamweaver è la gestione
coordinata del lavoro di gruppo. Utilizzando una tecnologia
residente su server, GoLive tiene traccia di chi sta lavorando
sul documento in un certo
istante e di tutte le versioni realizzate. In tal modo, si evitano
variazioni conflittuali e si può
procedere allo sviluppo parallelo dello stesso sito da parte di
un team di professionisti.
La funzione, denominata
Workgroup Server, è totalmente gratuita e integrata nel programma base. La tecnologia
corrispondente di Macromedia
prendeva il nome di Sitespring
ed è stata abbandonata prima
del rilascio di Dreamweaver MX
senza fornire nel frattempo alternative percorribili, perciò GoLive è
l'unico ambiente di
sviluppo sul mercato che consenta
una gestione efficaprosegue
ce di un team. sul CD
(versione integrale
n. 66
dell’articolo sul CD)
3
Fig. 1 Anche Adobe GoLive 6.0, alla pari di Dreamweaver, consente di visualizzare contemporaneamente la vista Layout (struttura) e la vista Origine (codice) modificando
liberamente gli elementi nell'una o nell'altra e osservando le variazioni riportate immediatamente in entrambe. Un ottimo sistema per imparare l'uso di HTML e per manipolare
con efficacia documenti complessi. Fig. 2 La finestra Origine mostra il codice HTML originale e consente di lavorare come in un qualsiasi altro editor HTML testuale di fascia
medio-alta. Questa vista rimane comunque meno potente della corrispondente vista Codice di Dreamweaver MX. Fig. 3 La vista struttura mostra un'analisi strutturale del
documento in termini di gerarchie tra i vari marcatori. Preziosa per l'analisi delle tabelle e delle altre forme complesse di HTML, non trova paragoni in nessun altro programma per
la creazione di pagine Web
25/88
3a lezione
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, un tema
che non viene mai affrontato
per primo nei testi e nei corsi su questo linguaggio, in ragione della sua complessità,
ma che a nostro avviso è necessario invece conoscere da
subito al fine di progettare
pagine funzionali. Oltre alla
loro funzione primaria, che
consiste nel rappresentare
informazioni tabulari, le tabelle costituiscono il più diffuso sistema di "impaginazio-
C
ne" per le pagina Web.
Funzionano come una griglia invisibile, che suddivide
lo spazio della pagina in contenitori ben definiti in cui riversare testo e immagini.
Il professionista perciò inizia il proprio lavoro su una
pagina vergine proprio dalla
progettazione della tabella e
prosegue, poi, con il riversamento dei contenuti e l'aggiunta degli elementi stilistici.
Come qualsiasi altro elemento HTML, anche le tabelle operano nella logica della
"telescrivente", ossia vengono lette dal browser un carattere alla volta, dall'inizio
dalla fine della riga, per poi
cominciare con la riga successiva.
Non esiste modo di sapere
come una tabella sia esattamente composta fino a che il
browser non è arrivato in fondo alla lettura dei vari tag
che la compongono.
Basta un tag sbagliato oppure mancante, per scombinare l'intera pagina e renderla incomprensibile al suo
stesso progettista.
Inoltre, come qualsiasi altro elemento HTML, le tabelle cambiano il proprio funzionamento a seconda della
versione di browser utilizzato e del modo in cui il codice
originale è stato scritto.
Codifiche teoricamente
equivalenti e sintatticamente
corrette possono produrre risultati visibilmente diversi.
È proprio in questo ambito
che i cosiddetti editor HTML
visuali mostrano le maggiori
differenze producendo in automatico codice HTML che
talvolta va rivisto riga per ri-
IL CALENDARIO DELLE LEZIONI
Lezione 1:
• Adobe GoLive 6.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. 67
• Le figure professionali che
affiancano il Webmaster
• Le risorse on line
• Tecniche di progettazione del sito
Aggiunte inedite alla prima lezione
disponibili solo sul CD
di questo numero:
• Organizzazione delle informazioni
• Costruzione della mappa – gerarchia,
ipertesto, struttura lineare
• Strumenti di navigazione
• Sistemi di navigazione
• Sistemi di labeling
Lezione 2:
Siti statici e linguaggio HTML
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
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,
allineamento spontaneo delle tabelle
consecutive
• Template con struttura complessa:
come creare tabelle complesse
• Template con tabelle nidificate: tabelle
nidificate in cascata, complesse
e consecutive
• Esercizi: esplorare i tag delle tabelle,
creare una tabella semplice con
HTML-Kit
Lezione 3:
Modelli di pagina e tabelle
• La tabella come elemento strutturale:
comporre gli elementi della pagina
utilizzando una tabella di riferimento
invisibile
• Progettare layout fluidi e statici:
scegliere il migliore per le proprie
esigenze
• Costruire template con le tabelle
di layout: produrre modelli riutilizzabili
• NamoWeb Editor 5: per siti statici
professionali
Le prossime puntate:
Lezione 4 - febbraio 2003:
HTML 4.01 e CSS
Lezione 5 - marzo 2003:
Design e multimedialità
Lezione 6 - aprile 2003:
Siti interattivi
Lezione 7 - maggio 2003:
Contenuti aggiuntivi sul CD
Interazione sul server
• Dimensionare tabelle e celle fluide,
Lezione 8 - giugno 2003:
Promuovere il sito
3a lezione
ga dal progettista per eliminare gli "errori" introdotti dal
programma.
La corretta gestione delle
tabelle è quindi una vera e
propria arte e costituisce uno
dei pilastri essenziali su cui si
regge il lavoro di chi costruisce siti. A differenza delle tabelle costruite da un foglio
elettronico o da un wordprocessor, che hanno righe e colonne ben identificate e regolabili singolarmente, le tabelle HTML sono semplicemente sequenze di righe e di celle all’interno di tali righe.
Non esiste alcun marcatore per definire le colonne in
quanto tali e il concetto stesso di colonna viene simulato
grazie all'intervento del
browser che, combinando diverse celle appartenenti a righe consecutive, crea l'impressione di un'unità verticale.
La tabella in quanto tale
viene costruita dal browser
combinando i vari tag che definiscono una serie di righe
sequenziali che contengono
una serie di celle le quali,
combinandosi con quelle di
pari posizione nella riga precedente e nella riga successiva, danno l’impressione di
formare colonne verticali,
che in realtà non esistono.
Il browser intraprende alcune azioni autonome per aggiustare e modificare l'aspetto originale delle celle in modo da creare un risultato ritenuto migliore, ma che potrebbe anche essere diverso
dall'intendimento originale
del progettista.
Alcune regole da tenere
sempre a mente
Qualsiasi dimensione specificata per la tabella e per le
celle dal progettista viene intesa dal browser come dimensione minima e puramente indicativa. Nel caso in cui abbiamo indicato unicamente la larghezza della tabella, come
consigliato da alcuni, questa
sarà ripartita tra le diverse celle, in parti più o meno uguali e
sarà quindi modificata dal
contenuto inserito (immagine
o testo).
La larghezza di una riga
coincide sempre con la larghezza della tabella o con la
somma delle larghezze specificate per le celle che la compongono. Non esiste modo per
27/88
definire la larghezza della riga
in quanto tale.
Nel caso in cui tale somma
superasse la larghezza specificata in origine per la tabella,
quest'ultima si allargherà per
adattarsi (qualsiasi cosa definito a livello di cella ha sempre la precedenza su tutto il
resto). La più grande delle
celle di una colonna determina la larghezza di tutte le altre
di quella colonna, anche se
avessimo esplicitamente indicato larghezze inferiori per
le altre celle di quella colonna.
Nella pratica è sufficiente
indicare la larghezza di una
sola cella della colonna affinché tutte le altre si adattino di
conseguenza.
Se inseriamo nella cella
un'immagine che ne supera le
dimensioni, la cella si allargherà automaticamente in modo da contenere l'immagine inserita e farà allargare tutte le
celle che corrispondono alla
stessa colonna.
L'allargamento
porterà
pressione sulle celle circostanti riducendone le dimensioni originali, se tuttavia anche queste contenessero
un'immagine, incomprimibile
per definizione, l'intera tabella
deborderebbe oltre i limiti
consentiti.
Le immagini hanno una fortissima influenza sul comportamento delle tabelle tanto
che per lungo tempo i progettisti Web le hanno usate come
strumento di costruzione della pagina, ben sapendo che
un'immagine non può essere
né allungata né compressa e
che perciò la cella in cui essa è
contenuta rimarrà stabile
qualsiasi cosa succeda al resto della tabella.
Il trucco delle immagini
spaziatrici
Il trucco classico consiste
nel prendere un'immagine di
colore invisibile larga un pixel
e quindi dimensionarla (altezza e larghezza) all'interno della cella di cui vogliamo bloccare le dimensioni.
Di solito viene inserita nell'ultima riga della tabella, che
per il resto rimane vuota, così
da condizionare tutte le altre
celle presenti nella stessa colonna.
Lo stesso trucco può essere
ripetuto su più celle fino a
bloccare l'intera tabella.
Un futuro ingegnere
col Pinguino
nel cuore
Ventisei anni, romano, Marco
Leli appare un giorno nella
nostra community per fornire il
suo commento al nostro corso
per diventare Webmaster.
Lettore “affezionato” di PC
Open (ci segue dal 1999),
partecipa alla vita della
community da spettatore per un
po’, finchè decide di gettarsi
nella mischia...e noi lo
acciuffiamo subito: “che ne dici
di fare quattro chiacchiere con
noi per raccontarci la tua
esperienza?”. All’inizio una
certa ritrosia, poi la tentazione
di apparire “sulla rivista di
informatica preferita” ha la
meglio.
Marco è iscritto alla facoltà di
Ingegneria Informatica
dell’università capitolina La
Sapienza ma gli studi vivono
una fase di stallo “L’università
stava andando un po’ per le
lunghe, quindi ho iniziato a
pensare cosa sarebbe stato
meglio fare e a guardarmi un
po’ in giro; è capitata
l’occasione e ho deciso di
frequentare un corso promosso
dalla Regione e dalla Comunità
europea per Progettista di
applicazioni multimediali”. Qui
Marco prende dimestichezza e
approfondisce gli argomenti
che si ritrovano anche nel
programma del nostro corso:
HTML, Javascript, Dreamweaver
e Flash, fondamenti di
programmazione e ASP. Il corso
termina con uno stage di cento
ore presso una giovane azienda
che sviluppa siti Internet.
“All’inizio mi sono occupato
principalmente dello sviluppo in
HTML, ma poi dall’azienda mi
veniva richiesta la conoscenza
di PHP/Mysql. Grazie al loro
aiuto (e pazienza) e un po’ di
applicazione, ho iniziato a
impratichirmi con questo
ambiente di sviluppo”. E anche
se Marco consiglia di non
affezionarsi mai a nessuna
tecnologia e di usare, volta per
volta, quella più utile alle
esigenze, si capisce da quello
che dice che il suo cuore batte
per il Pinguino. “Linux è
indubbiamente un sistema
difficile da usare, non è
intuitivo come l’ambiente
Windows, crea più problemi
quando si devono utilizzare
periferiche, i driver non sono
sempre facili da trovare, ma
indubbiamente la filosofia che
sta dietro il sistema ha un
grande fascino e poi c’è il
vantaggio che è gratuito”.
E secondo Marco, su cosa vale
la pena di investire?
“Approfondire la tecnologia
Flash, che mi sembra abbia
grosse potenzialità: è
abbastanza portabile, gira sia
sotto Windows sia sotto Linux e
ha un buon supporto per la
programmazione: credo che
potrebbe essere piuttosto
richiesta dal mercato”.
Sogni nel cassetto, programmi
per il futuro? “Non ho
particolari progetti” risponde
Marco “Spero di avere
l’opportunità di approfondire il
settore di cui mi sto occupando
adesso: seguire lo sviluppo
delle tecnologie per il
commercio elettronico, magari
riprendere l’università e intanto
prendermi la laurea di primo
Daniela Dirceo
livello”.
HTML costruisce le tabelle secondo una sequenza lineare, come se fosse una
telescrivente: una cella dopo l'altra sino a completare la riga e quindi ritorna all'inizio
della riga successiva e riprende la costruzione fino a terminare la tabella. Solo alla fine
dell'ultima cella dell'ultima riga il browser sa esattamente come sia composta la tabella
3a lezione
Questo genere di artificio
(definito shim inglese cioè zeppa oppure immagine spaziatrice in italiano) è tutt'ora in uso,
ma presenta l'inconveniente
d'inserire elementi estranei
nella tabella e di perdere l'efficacia qualora il navigatore
avesse disattivato la visualizzazione delle immagini sul
proprio browser.
L'uso delle immagini spaziatrici è considerato peccato
grave dai puristi, ma è sicuramente utile in alcune circostanze.
La flessibilità delle tabelle,
se conosciuta e governata,
può trasformarsi in un pregio
progettuale portando a quello
che viene definito progetto
"fluido" o "liquido", vale a dire
una struttura della pagina capace di adattarsi alla risoluzione del monitor su cui è visualizzata.
La regola generale è comunque di mantenere più
semplici possibili le tabelle
strutturali, usandole solo dove necessario ed evitando, se
possibile, di nidificarne, ossia
di innestare una tabella den-
tro l'altra. Una pagina composta di tabelle molto complesse e incapsulate l'una nell'altra finisce per essere pesante
e per richiedere tempo prima
di poter essere elaborata e visualizzata dal browser, senza
contare le possibilità di errore, che si moltiplicano al crescere del numero di tag utiliz
zati.
Come creare una tabella
Abbiamo costruito una tabella composta da due righe di tre celle
ciascuna assegnando alla tabella nel suo complesso una larghezza
interna di 400 pixel (incluso il bordo).
Fase 1: la tabella è completamente vuota e lo spazio viene ripartito
equamente tra le tre celle che diventano ciascuna di 130 pixel.
La loro somma ci dà 390 pixel, gli altri 10 pixel che mancano per
arrivare a 400 sono utilizzati per il bordo della tabella, largo 1 pixel di
default e calcolato su entrambi i lati, e per la spaziatura tra le celle,
larga 2 pixel di default, e riportata quattro volte per spaziare 3 celle,
per un totale di 8 pixel.
Regola: in mancanza di contenuto e d'indicazioni per le singole
celle, il browser cerca di ripartire equamente lo spazio assegnato
alla tabella nelle varie colonne.
Fase 2: inseriamo il testo e notiamo come questo influenza la
distribuzione naturale degli spazi. La seconda cella della prima riga si
allarga per adattarsi a una scritta che è più lunga delle altre due e
determina anche l'allargamento automatico della cella seguente che
appartiene alla stessa colonna. Adesso la ripartizione degli spazi,
attuata automaticamente dal browser è di 120, 150 e 120 pixel. La
seconda colonna si è allargata a spese delle altre due. La tabella
mantiene le sue dimensioni originali.
Regola: il testo inserito nelle celle ne influenza la dimensione
originale a meno di aver indicato una larghezza fissa per la singola
cella, in aggiunta alle indicazioni di larghezza della tabella.
Lo spazio viene ripartito in modo diverso tra le celle in funzione
del contenuto e si applica in modo uniforme a tutte le celle di
quella colonna, mantenendo invariata la larghezza complessiva
della tabella.
Fase 3: forziamo la dimensione della prima cella della prima riga
indicando, a livello di cella singola, una larghezza di 200 pixel (a cui si
aggiungono i 4 pixel del bordo destro e sinistro all'esterno).
La cella e la relativa colonna si allargano indipendentemente dal
contenuto e costringono le altre due celle a restringersi. Queste però si
restringono diversamente in funzione del testo contenuto. La
situazione finale è la seguente: 204, 104 e 82 pixel.
Regola: l'impostazione di larghezza definita a livello di singola
cella ha la priorità sulle impostazioni di larghezza della tabella e
sul testo eventualmente contenuto. Basta impostare la larghezza
di una sola cella per modificare l'intera colonna a cui appartiene.
Fase 4: aggiungiamo un'immagine larga 179 pixel e alta 56 pixel nella
terza cella della seconda riga. Le altre due colonne si restringono, ma
in modo diverso. La prima colonna, per la quale avevamo specificato
una larghezza obbligata di 200 pixel si riduce a 146 pixel, mentre la
28/88
seconda colonna, che in origine era la più larga avendo anche il testo
più lungo, ma per la quale non abbiamo indicato nessuna larghezza
minima, si restringe al punto di mandare il testo a capo e determinare
in tal modo una maggiore altezza per tutta la prima riga. La tabella
mantiene comunque le sue dimensioni originali e la ripartizione degli
spazi adesso è: 146, 61 e 183 pixel (179 dell'immagine più i quattro
di contorno).
Regola: un’immagine grafica ha sempre priorità rispetto al testo e
rispetto a qualsiasi impostazione di larghezza definita per le
singole celle o per la tabella nel suo complesso. La presenza di
un'immagine determina in modo immutabile la dimensione della
cella, della riga e della colonna a cui questa appartiene.
Fase 5: aggiungiamo la stessa immagine anche nella seconda cella
della seconda riga il che determina l'espansione della seconda
colonna per intero alle dimensioni dell'immagine e il restringimento
della prima colonna ai minimi termini, però insufficienti a mantenere le
dimensioni originali della tabella che deborda oltre il limite imposto di
400 pixel portandoci alla una situazione: 43, 183 e 183 pixel.
Regola: la somma delle larghezze imposte alle singole celle può
superare la larghezza massima definita per la tabella nel qual
caso la tabella si allargherà per adattarsi alle nuove misure.
La presenza di elementi grafici in una cella ne blocca le
dimensioni impedendone la compressione.
3a lezione
2 Progettare layout fluidi o statici
na volta creata la nostra
pagina vergine siamo pronti a costruire la struttura di
layout in cui inserire successivamente i contenuti.
Abbiamo scelto le tabelle come strumento d'impaginazione
perché garantiscono maggiore
compatibilità con i diversi tipi
di browser e anche il miglior effetto estetico. A questo punto si
presentano alcune alternative.
La prima è decidere se incapsulare l'intera pagina in una grande tabella che poi ne conterrà
altre, oppure se ridurre al minimo la quantità di tabelle presenti nella pagina facendo affidamento sullo spontaneo allineamento delle stesse tra loro e
sulla possibilità di affiancarle e
sovrapporle a paragrafi e immagini che fluiscano liberamente nella pagina.
Il primo approccio è anche il
più diffuso perché consente un
miglior controllo degli elementi
e si presta particolarmente alla
produzione di template (pagine
modello) per un sito dinamico.
Infatti, i template di un sito dinamico sono privi dei contenuti che altrimenti sarebbero necessari per tenere al loro posto
le tabelle in una pagina a struttura libera, perciò è difficile vedere durante la progettazione
quale sarà il risultato finale e nel
momento di generare la pagina
in automatico prelevando i contenuti dal database, si otterranno risultati variabili al cambiare
dei contenuti forniti.
Il secondo approccio, che
consiste nel lasciare la pagina libera da una struttura generale e
incapsularne solo alcune parti,
è preferito dai puristi perché
consente di mantenere le pagine più leggere e più semplici.
Inoltre, alcuni browser delle
precedenti generazioni avevano la brutta abitudine di aspettare il caricamento e l'elaborazione dell'intera tabella globale
prima di visualizzare la pagina.
Sezionando la pagina in tabelle
autonome, la generazione è più
rapida sia perché le prime parti
della pagina appaiono subito
mentre il browser sta ancora lavorando all'elaborazione delle
successive sia perché la semplicità delle tabelle richiede poco impegno elaborativo al
browser prima della visualizzazione. Poiché il primo approc-
U
29/88
cio è comunque sempre più diffuso grazie al diffondersi dei siti dinamici, i principali browser
moderni dispongono di una funzione che riduce il ritardo di visualizzazione e che si chiama
"rendering progressivo".
Il programma comincia a visualizzare i primi elementi della
tabella prima di averla caricata
per intero. In tal modo, i primi
elementi di una pagina lunga e
complessa appariranno immediatamente, così da riempire la
finestra video che il navigatore
sta osservando e dando l’idea
che la pagina sia disponibile per
intero. In realtà, il browser sta
ancora lavorando dietro le quinte per completare l'elaborazione della tabella e comporre la
porzione inferiore della pagina
così che sia pronta quando decideremo di eseguire lo scrolling. Di contro può succedere
che la pagina compaia inizialmente con un determinato assetto che si modifica dopo alcuni secondi quando il browser ha
terminato la lettura della tabella nel suo complesso. L'unico
accorgimento da adottare nel
progettare una pagina inserita
in una tabella globale sfruttando il rendering progressivo è di
creare i primi elementi in modo
che non siano indipendenti dal
resto della tabella. Tipicamente
lo si fa creando una prima tabella orizzontale larga nidificata
nella tabella primaria e larga
quanto l’intera pagina che contenga la barra del logo e i primi
elementi di navigazione del sito.
Dopo di che si prosegue a
scendere con una serie di tabelle che si compongano da sinistra a destra e dall’alto verso il
basso. Qualunque sia la soluzione adottata, vale comunque
il criterio di ridurre le tabelle al
minimo e, in particolare, di ridurre la nidificazione progressiva delle tabelle (inserimento di
una tabella in un'altra) perché
una pagina troppo complessa
richiede al browser molto tempo per essere elaborata e può
produrre errori inaspettati.
Fluido, statico o misto
La seconda scelta importante è decidere se la struttura della nostra tabella avrà dimensioni fisse oppure variabili. HTML
consente infatti di specificare la
larghezza della tabella e delle
Tabella statica e dinamica: le tabelle a larghezza fissa, indicata in pixel, mantengono
il proprio assetto qualsiasi sia la dimensione della finestra del browser. Perciò, nel
caso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie, una parte
della tabella diventerebbe invisibile. Viceversa le tabelle a dimensione variabile,
espressa in percentuale, modificano la propria ampiezza in funzione della dimensione
della finestra e hanno perciò un aspetto meno prevedibile
relative celle (colonne) in pixel
oppure in percentuale. Se indichiamo un valore in pixel la tabella resterà di quella dimensione qualunque sia l'ampiezza
della finestra disponibile per il
browser sul computer dell'utente. Nel caso invece di valori
percentuali, la tabella si allargherà o si stringerà (compatibilmente con i contenuti) al variare della dimensione della finestra di navigazione. È anche
possibile adottare una soluzione mista dove solo alcune colonne abbiano una dimensione
Test: leggi le domande e verifica le tue risposte
Riepilogo dei concetti della Lezione 3
?
1. Perché le tabelle sono diventate lo strumento principale per
definire il layout delle pagine Web?
2. In che modo una tabella viene letta e costruita dal browser?
3. Che differenza esiste tra le tabelle HTML e quelle convenzionali?
4. Quali sono i tag principali di una tabella?
5. Che rapporti di priorità esistono tra le indicazioni fornite a livello
di tabella e a livello di singola cella?
6. Che cos'è il layout fluido o liquido?
7. Che cos'è una tabella nidificata?
8. Quali sono le principali regole da osservare nella progettazione di
una tabella di layout?
9. Che cosa differenzia una tabella di contenuto da una tabella di
layout?
10. Che cos'è in rendering progressivo?
(risposte a pagina 34)
3a lezione
Tabella semplice. Una tabella si apre e si chiude con la coppia di tag <table></table>.
Ogni riga è identificata da una coppia di tag <tr></tr> (che in inglese corrisponde
all'abbreviazione di table row) e al loro interno troviamo varie celle, disposte in
sequenza, e ciascuna delimitata dalla coppia di tag <td></td> (che in inglese significa
table data). Affinché la tabella sia valida e visualizzabile deve contenere almeno una
riga che contenga almeno una cella. Le celle vuote non vengono visualizzate da alcuni
browser perciò ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbe
almeno contenere uno spazio fisso - non breaking space, ossia il simbolo &nbps.
fissa, ad esempio quelle conte-
nenti i link di navigazione, mentre le altre abbiano una dimensione variabile, ad esempio
quelle che contengono il testo.
Tag fondamentali
di una tabella
Qualunque sia l'impostazione progettuale, una tabella si
apre e si chiude sempre con i
tag <table> e </table> 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>. Prendendo a prestito una
metafora dal libro "HTML 4 Tutto & Oltre", costruire una tabella è come erigere un muro. Si
crea la base con <table> quindi
si stende il primo strato di cemento con <tr> si posano diversi mattoncini in sequenza con
<td> e </td> dopo di che si passa al nuovo strato di cemento
con </tr> e <tr>. Il numero di righe può variare liberamente,
ma il numero di celle deve essere costante riga per riga altrimenti sarà impossibile costruire le colonne. La larghezza delle
celle non deve essere necessariamente uguale, invece, sebbene sarebbe meglio che lo fosse.
Se non fosse possibile mantenere lo stesso numero di celle
per ogni riga. è consentito usare
speciali comandi per estendere
una cella su più colonne in orizzontale o su più righe in verti-
30/88
cale, ma si tratta di soluzione
usata di rado per le tabelle di
layout e sconsigliata anche per
le tabelle di dati, visto che si
presta a interpretazioni diverse
da parte dei browser.
Se per errore il numero di
celle presente in una riga non
corrispondesse alle altre, la tabella sarà scombinata e la visualizzazione risultante sarà
confusa. Ne consegue che è difficile realizzare tabelle molto
complesse senza perderne il
controllo. I principali errori di
codifica di una pagina HTML risiedono proprio nella costruzione delle tabelle. In particolare, una tabella non chiusa propriamente con il tag finale </table> può scombinare la pagina
al punto da renderla irriconoscibile. Possono nascere problemi anche dalla mancata
chiusura dei tag interni di riga o
di cella. Fortunatamente i browser moderni dispongono di
strumenti particolari per compensare la complessa gestione
delle tabelle. Internet Explorer,
ad esempio, completa automaticamente una riga non chiusa
quando incontra il marcatore
d’inizio della successiva (<tr>) e
riesce anche a risolvere alcuni
dei casi di tabella non chiusa.
Più rigidi sono invece Netscape
Navigator e Opera; per tale motivo si consiglia sempre di eseguire un’anteprima della pagina
con uno di questi programmi
prima di rilasciarla.
Pagine ad assetto variabile: vediamo un esempio reale di pagina costruita
integralmente con un layout fluido. La videata 1 è larga 1.005 pixel (mintor da 1024 x
768 pixel), la 2 è larga 735 pixel e la 3 è larga 502 pixel. Qualunque siano le
dimensioni della finestra del browser, tutti gli elementi rimangono visibili. La colonna di
navigazione a sinistra ha dimensione fissa, mentre la colonna di testo e la barra
orizzontale contenente il logo e la navigazione globale sono flessibili. L'unico elemento
orizzontale che non si adatta è il banner, che naturalmente ha dimensione fissa e
scompare parzialmente quando la finestra viene ridotta alla posizione 3
Le risposte alle domande di pag. 33
1. Consentono di controllare gli
spazi nella pagina senza
alterarne l'aspetto estetico.
Sono compatibili con
qualsiasi tipo di browser e
offrono la massima
flessibilità di configurazione,
a fronte di una certa
complessità di realizzazione.
2. In modo sequenziale,
carattere per carattere,
dall'inizio alla fine della riga
per poi ricominciare
dall'inizio della riga
successiva. Solo al termine
della lettura dell'intera
tabella il browser sa
effettivamente com'è fatta e
come debba essere
riprodotta.
3. Le tabelle HTML non hanno
colonne definibili in quanto
tali. Ciascuna colonna viene
costruita combinando in
verticale le celle di ciascuna
riga.
4. Sono tre: <table> per aprire
e chiudere la tabella <tr>
(table row) per aprire e
chiudere ciascuna riga e
<td> (table data) per aprire e
chiudere ciascuna cella.
5. Le indicazioni fornite a livello
di cella hanno sempre la
priorità su quanto definito a
livello globale di tabella.
6. Un layout basato su tabelle o
elementi di tabelle che
!
hanno una
larghezza definita
in termini percentuali
rispetto all'ampiezza
complessiva della finestra
del browser. Un layout fisso
o statico usa invece tabelle
con larghezza in pixel.
7. Una tabella costruita
all'interno della cella di
un'altra tabella.
8. Evitare una complessità
eccessiva e, particolare,
l'impiego eccessivo di tabelle
nidificate. Ricordarsi che la
larghezza di una riga coincide
sempre con la larghezza
della tabella o con la somma
delle larghezze specificate
per le celle che la
compongono e che qualsiasi
oggetto inserito in una cella
può influenzarne le
dimensioni, alterando
l'assetto complessivo della
tabella.
9. La tabella di contenuto ha
bordi visibili e talvolta anche
uno sfondo. Contiene una
serie di attributi stilistici che
servono alla corretta
gestione del testo e che non
sono necessari in una
tabella di layout.
10.La visualizzazione graduale
dei primi elementi di una
tabella prima che sia stata
letta per intero dal browser.
3a lezione
3 Costruire template con le tabelle di layout
efinire la struttura della
pagina mediante l'impiego
di tabelle è una delle operazioni più complesse con cui il
Webmaster e il Web designer si
devono misurare. D'altro canto
è essenziale nella costruzione
di un sito e una volta prodotto il
modello, alias template, sarà
possibile costruire numerose
pagine strutturalmente identiche tra loro, ma capaci di ospitare contenuti diversi. A tal fine
sarà importante concepire una
struttura che sia capace di
adattarsi al variare dei contenuti e sia riutilizzabile il più
possibile. Mantenere al minimo
il numero di template è un requisito necessario per avere un
sito gestibile e per facilitarne la
successiva evoluzione a sito dinamico.
Il primo passo consiste nel
decidere se incapsulare il tutto
in una singola tabella oppure
creare diverse tabelle separate
che si allineano spontaneamente. A favore della prima soluzione gioca il completo controllo della struttura e delle sue dimensioni, a favore della seconda una maggiore leggerezza della pagina e semplicità delle tabelle che porta, alla fine, a una
maggiore velocità di visualizzazione nel browser (per una descrizione di come allineare le
tabelle rimandiamo all'articolo
Tabelle consecutive sul CD).
La seconda decisione è tra
una struttura fissa, immutabile
al variare della dimensione del
browser oppure fluida, capace
quindi di espandersi e di contrarsi all'unisono con la finestra del navigatore. Nella pratica, è raro trovare pagine fluide
in tutti i loro componenti, perciò anche nel caso di un design
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, dovrete decidere quali
elementi mantenere stabili al
loro interno.
Pagine fisse e variabili
Il comportamento statico oppure fluido della tabella e delle
sue celle dipende dall'impostazione di un singolo attributo:
width che può assumere valori
in pixel, perciò assoluti, oppure
valori in percentuale (da 1 a
100). Assegnando una larghezza percentuale all'intera tabella,
ad esempio con il tag <table
width="75%">, otterremo un oggetto con una dimensione complessiva pari al settantacinque
per cento della finestra del
browser, qualunque siano le dimensioni di quest'ultima. Tale
ampiezza sarà, poi, distribuita
in modo uguale tra tutte le celle/colonne, salvo modificare le
dimensioni di una particolare
colonna rispetto alle altre a seguito dell'inserimento di testo o
immagini, come visto nell'articolo precedente. Se volete controllare le dimensioni percentuali di una colonna rispetto alle altre, potete assegnarle un
valore specifico.
Di solito s'imposta la dimensione della prima o dell'ultima
cella, usando sempre l'attributo
width all'interno, in questo caso, del tag <td>. Ad esempio <td
witdh="30%"> imposta le dimensioni della cella e della relativa colonna in modo che sia
il trenta per cento del totale
della tabella, nel nostro esempio sarebbe il 30% del 75%. Lo
spazio restante sarà distribuito
in modo equo tra le altre colonne. Il vantaggio di assegnare
una dimensione percentuale
esplicita a una delle colonne è
duplice: creare proporzioni diverse nelle dimensioni di ciascuna rispetto a quanto determinato automaticamente dal
browser e garantirne la stabilità
anche quando inseriamo testo
o altri elementi di contenuto.
Infatti, una tabella che abbia
una larghezza impostata per almeno una delle sue colonne,
manterrà il suo assetto anche
nel momento in cui inseriamo
testo nelle varie colonne. Qualora il testo fosse troppo lungo
per essere contenuto nella cella, il browser lo manderebbe
automaticamente a capo allungando in verticale la cella e tut-
PC Open 35
Prendiamo la struttura tipica di una delle pagine del corso sul CD e analizziamo le
tabelle che la compongono. Notiamo una grande tabella generale che contiene l'intera
pagina all'interno della quale si sviluppano nove tabelle nidificate suddivise in cinque
aree logiche distinte
ta la riga a cui essa appartiene.
Diversa è invece la situazione
nel caso in cui venga inserita
un'immagine in una cella con
dimensionamento percentuale.
Infatti l'immagine, essendo incomprimibile, obbligherà la cella a mantenere una larghezza almeno pari alla propria o superiore (trovate un dettaglio
esemplificativo di questi passaggi nell'articolo Dimensionare tabelle e celle sul CD).
Soluzioni miste
Cosa succede se nella nostra
tabella fluida volessimo bloccare una colonna? Dovremmo impostarne le dimensioni in pixel
e lasciare libere le altre oppure
impostarle in percentuale. Anche in questo caso sarà sufficiente impostare la larghezza di
una sola delle celle che compongono la colonna a dimensione fissa. Ad esempio il tag
<td width="120"> inserito nella
cella della prima o dell'ultima
riga, imposterà la larghezza dell'intera colonna a 120 pixel e fisserà anche la dimensione complessiva della tabella. Ricordiamo un concetto importante del
dimensionamento fisso: la misura espressa in pixel indica la
larghezza massima della colonna. Perciò il browser non la
espanderà anche quando la finestra si allarga, ma non è vero
il contrario.
Come già visto nell'assegnazione delle priorità dimensionali in una tabella fissa (vedi
l'articolo Stabilità delle dimensioni), è sempre possibile
restringere la larghezza di una
cella/colonna a dimensione fis-
sa quando imposto dal comprimersi della finestra o dall'espandersi del contenuto nelle
colonne circostanti. L'unico
modo per garantire che una colonna rimanga davvero bloccata sia in espansione sia in compressione (una caratteristica
necessaria ad esempio per una
barra di navigazione) consiste
nell'inserire un'immagine di larghezza esattamente identica alla larghezza della colonna. Di
solito l'immagine trova posto in
una cella in fondo alla colonna,
collocata all'interno di una riga
altrimenti vuota così da non essere visibile al navigatore. Allo
scopo si usa di solito di un'immagine trasparente lunga e larga un pixel, il cosiddetto spaziatore o immagine spaziatrice
(shim).
E fin qui sembrerebbe tutto
chiaro: per produrre un sito
con pagine fluide basta bloccare le colonne che contengono
elementi di navigazione e lasciare libere quelle che invece
ospitano il contenuto (testo e
immagini). In tal modo il contenuto utilizzerà tutto lo spazio
disponibile nella finestra del
browser e, al contempo, il navigatore non sarà sorpreso da
elementi di navigazione che
continuano a cambiare aspetto
(per un dettaglio su come costruire pagine di questo tipo
vedi l'articolo Dimensionare
tabelle con celle miste sul CD).
Purtroppo, però, le tabelle
ad assetto misto (fluido e statico) presentano alcune stranezze con cui bisogna fare i conti.
Innanzi tutto i browser più vecchi non rispettano la dimensio- 3a lezione
Ecco la stessa pagina da cui abbiamo rimosso tutto il contenuto di testo. Le cinque
zone diventano più evidenti. Sono interamente comprese in una tabella globale che ne
ospita 9 nidificate. La zona 1 contiene il logo (che occupa la prima tabella nidificata al
primo livello) e la navigazione globale del CD (che occupa la seconda tabella nidificata
al secondo livello). La zona 2 contiene la navigazione gerarchica e utilizza due tabelle
nidificate una nell'altra. La zona 3 ospita i contenuti con due tabelle nidificate
consecutive. La zona 4 contiene la navigazione locale della lezione e usa altre due
tabelle nidificate consecutive. La zona 5 contiene il riferimento ai credits e usa una
tabella larga quanto l'intera pagina
ne massima imposta per le co-
lonne a larghezza fissa inserite
in una tabella fluida e quando la
finestra viene allargata finisce
per espandersi anche la colonna che dovrebbe restare bloccata. Persino l'immagine spaziatrice non ci aiuta in questo
caso perché essa garantisce
che la colonna non si restringa
al di sotto della propria dimensione, ma non può impedirle di
allargarsi.
Il problema è stato ormai risolto dalle versioni recenti di
browser, ma se pensate che i
vostri utenti usino browser di
due o tre anni fa, bisogna ricorrere a un altro trucco: impostare la larghezza di una delle colonne variabili al 100% in modo
che la somma delle percentuali
superi 100. Il browser darà sempre a tale colonna la massima
larghezza possibile "tenendo a
bada" tutte le altre. Questo
stratagemma può servire anche a definire una pagina che
abbia solo colonne a larghezza
fissa eccetto una, quella dedicata al testo, e che quest'ultima
si estenda a garantire alla colonna variabile sempre la massima ampiezza possibile. Avrete notato che insistiamo sull'assegnare la larghezza sempre a
una sola cella della colonna, i
motivi sono tre: è inutile specificarlo per le altre celle visto
che queste si adattano automaticamente facendoci risparmiare codice e mantenendo la pagina più leggera; nelle tabelle
complesse è facile perdere il filo e assegnare dimensioni diverse a celle della stessa colonna; in caso di modifica delle dimensioni della tabella, è me-
32/88
glio dover lavorare su una sola
riga che doverne cambiare tante.
Finora abbiamo parlato solo
di larghezza di tabelle e celle,
ma i tag <table> e <td> consentono di specificarne anche l'altezza minima che anche in questo caso può essere espressa in
pixel oppure in percentuale rispetto all'altezza della finestra
del browser. È un attributo usato di rado poiché la norma è lasciare che la tabella si allunghi
e si accorci da sola in funzione
del contenuto inserito, tuttavia
è importante sapere che a differenza della larghezza, dove si
indica un valore massimo, qui
viene sempre indicato un valore minimo, al di sotto del quale
il browser non può scendere,
ma che può essere incrementato se il contenuto nelle celle
contigue lo richieda. Indicando
una lunghezza e una larghezza
pari al 100%, la tabella occuperà sempre il massimo dello
spazio disponibile nella finestra. Non esiste un'altezza di riga perché in realtà quest'ultima
eredita l'altezza della cella più
alta al suo interno. Anche in
questo caso, se dovete indicare
un valore, fatelo su una cella
soltanto, la prima o l'ultima della riga.
Template con struttura
complessa
Nella definizione del layout
di una pagina è raro trovarsi
con le strutture molto regolari
consentite dalle tabelle semplici con un numero uniforme di
celle per ciascuna riga. Anche
ricorrendo a tabelle multiple
consecutive, non si riesce a ri-
produrre l'effetto desiderato e
bisogna creare forme più complesse mediante l'estensione di
celle su più righe e colonne oppure mediante l'innesto di una
tabella nell'altra. L'estensione
di una cella su più righe o colonne è un'operazione poco intuitiva e delicata perché i browser la interpretano a modo loro.
I puristi consigliano di evitarla,
ma esistono diverse situazioni
in cui non è possibile farne a
meno, perciò tanto vale padroneggiarla. L'operazione si basa
sull'impiego di due attributi del
tag <td>, ossia colspan per indicare su quante colonne si debba estendere la cella in orizzontale e rowspan per indicare
su quante righe debba estendersi in verticale (vedi sul CD
l'articolo dettagliato Creare tabelle complesse).
È più facile capire il funzionamento di questi due attributi
se li consideriamo capaci di
unire due celle adiacenti per
formarne una sola. In effetti
questa è esattamente l'operazione compiuta da alcuni editor
visuali nel momento in cui
chiediamo di estendere una cella in orizzontale o verticale. Se
invece lavoriamo a mano, dobbiamo occuparci di cancellare
personalmente la cella contingua nel cui spazio vogliamo
estendere la cella espansa. In
pratica quando aggiungiamo
colspan o rowspan entro una
cella esistente, questa si allargherà ad occupare lo spazio
della cella adiacente facendo
scorrere tutte le celle della riga
o della colonna di una posizione, scombinando la struttura
della tabella. Togliendo la cella
di cui abbiamo preso il posto, la
tabella si rimette a posto.
Oltre a consentire maggiore
flessibilità estetica nella riproduzione degli spazi, le celle
espanse svolgono anche una
funzione di controllo sulla porzione di tabella a cui appartengono. Ad esempio, una cella
espansa in orizzontale riunisce
diverse colonne in modo che
queste definiscano le proprie
ampiezze in relazione al raggruppamento prima ancora
che in relazione alla tabella nel
suo insieme. Le celle estese diventano quindi anche uno strumento d'impaginazione, ma
purtroppo risultano persino
più incostanti nel comportamento rispetto alle celle singole. Un criterio generale che può
aiutare a orientarsi è di consi-
derarle come un livello intermedio tra la tabella e la singola
cella. HTML è costruito secondo una logica di concatenazione gerarchica degli attributi tale per cui gli attributi dell'entità
maggiore si trasferiscono alle
entità minori salvo che queste
dispongano di attributi propri
che hanno priorità rispetto a
quelli ereditati dal livello superiore.
Come abbiamo visto, una larghezza impostata a livello di tabella si divide equamente tra le
varie celle a meno che queste
non abbiamo indicazioni dimensionali proprie e queste ultime vengano superate da eventuali assestamenti dimensionali determinati dall'inserimento
di contenuto nella cella stessa.
È la logica dell'assegnare priorità agli attributi in cascata. Una
logica che vedremo utilizzata
anche dai Cascading Style Sheet
(fogli di stile in cascata). Le celle espanse, quindi, hanno attributi tra loro pari, perciò una
cella espansa può influenzarne
un'altra e avere la meglio sugli
attributi dimensionali della tabella nel suo complesso. Sono
anche capaci d'influenzare il
comportamento dimensionale
delle righe e colonne che racchiudono a condizione che
queste non contengano indicazioni dimensionali proprie. Per
avere un'idea pratica di come si
comportano, rimandiamo all'articolo Creare tabelle complesse sul CD).
Nidificare le tabelle
Purtroppo anche l'impiego
di celle espanse non è sufficiente a coprire tutte le esigenze di layout di una pagina, perciò esiste un ulteriore livello di
complessità a cui ricorrere, che
consiste nell'inserire una tabella nell'altra. Di solito è sconsigliato spingersi oltre ai tre o
quattro livelli di nidificazione
per non mandare in crisi il
browser che trova sempre difficile interpretare tabelle nidificate. Alcuni consigliano di evitarle del tutto, il che è praticamente impossibile se non nelle
pagine più elementari. Il consiglio è di ridurle al minimo e di
nidificare tabelle semplici, possibilmente con dimensioni fisse
(in pixel). Nidificare significa
inserire un'intera tabella all'interno della cella di una tabella
esistente, seguendo le stesse
regole di costruzione usate per
le tabelle normali. Un listato
3a lezione
Per comodità qui abbiamo attivato la visualizzazione dei bordi della tabella di layout
globale. Riconosciamo visivamente la distribuzione delle righe e delle celle che la
compongono
con tabelle nidificate diventa
molto complesso e difficile da
decifrare se non a occhi molto
esperti.
Cerchiamo di capire le regole
fondamentali. Le informazioni
fornite fin qui valgono sia per le
tabelle di layout sia per le tabelle di contenuto, ma quando
si entra nel dominio delle tabelle nidificate ci troviamo unicamente nel dominio del layout,
perciò introduciamo per prima
cosa alcuni accorgimenti che
sono tipici di questo ambiente.
A differenza di una tabella di
contenuto, le tabelle di layout
sono invisibili poiché non contribuiscono all'informazione
della pagina, ma servono unicamente per fissare le posizioni
dei vari elementi. Ne consegue
che devono essere invisibili, il
che richiede l'impostazione
uniforme di tre attributi: border="0" per nascondere i bordi
(li si può tenere visibili come
aiuto nella fase di progettazione, per poi rimuoverli alla fine),
cellpadding="0" per azzerare la
spaziatura interna alla cella e
cellspacing="0" per azzerare la
spaziatura tra le celle. Di default il browser assegna un bordo di un pixel e una spaziatura
interna ed esterna di 2 pixel
per lato a ciascuna cella, perciò
è importante ricordarsi di disattivare questi tre elementi
prima di cominciare a costruire
la tabella di layout.
Si comincia sempre col definire le dimensioni della tabella
generale che conterrà l'intera
pagina oppure una porzione di
questa e poi la si suddivide in
colonne. La seconda fase consiste nel dimensionare le tabelle nidificate e le colonne di queste ultime, una per una. Spesso
dovrete ricorrere alle immagini
spaziatrici trasparenti per garantire la stabilità degli elementi della pagina, ma si possono
usare allo scopo anche elementi grafici visibili, che possibil-
33/88
mente facciano già parte del
progetto grafico della pagina.
La generazione di tabelle nidificate è semplificata enormemente dall'impiego di editor visuali che consentono di disegnare la pagina col mouse su un
foglio bianco e quindi generano
in automatico tutte le tabelle
necessarie. Rientrano in questa categoria Dreamweaver
MX e Fireworks MX, GoLive
6.0, FrontPage 2002, Namo Webeditor, Hot Metal Pro.
Ciascuno segue un approccio diverso e genera tabelle più
o meno efficienti. Namo si distingue per il fatto di realizzare
un tracciato provvisorio della
pagina, modificabile in tutti i
suoi elementi, ma nel quale è
già possibile inserire contenuti
per avere un'idea dell'aspetto finale della pagina prima di produrre il codice HTML vero e
proprio. Anche Fireworks si
comporta in modo analogo,
con l'aggiunta di conservare
sempre l'originale modificabile
del progetto e quindi di poter
ripetere la generazione dell'HTML quante volte si vuole,
per poi darlo in pasto a
Dreamweaver MX. Quest'ultimo dispone di una funzione
propria di generazione grafica
del layout che produce il codice immediatamente, ma permette comunque di modificare
visualmente gli elementi già generati (per una prova completa
vedi Macromedia Dreamweaver MX, la nave scuola del
Web design sul CD).
Discorso analogo per GoLive
6.0 che trasforma la generazione della pagina Web in una vera
e propria operazione di disegno: c'è una tela bianca con
una griglia di riferimento su cui
collocare qualsiasi tipo di oggetto. Ogni elemento rimane
modificabile e la generazione o
rigenerazione del codice HTML
è immediata (vedi Adobe GoLive 6.0 maestro di tabelle sul
pagina mantenga la
propria larghezza e
struttura. A sua volta
include una delle altre
tabelle nidificate che
contiene le voci di navigazione globale (home, indice, corsi, eccetera). La seconda area
è composta da due tabelle, una nell'altra che
si appoggiano spontaneamente sotto la tabella del logo e che
ospitano la navigazione del CD. La terza
area è composta da
due tabelle indipendenti, collocate una
sotto l'altra, che contengono il testo e le
Ecco la stessa pagina visualizzata secondo la
immagini della pagina
struttura del codice HTML della tabella principale.
Notiamo che si compone di cinque righe, tre delle
oltre che un elemento
quali contengono a loro volta una o più tabelle
di navigazione locale
nidificate. Proviamo ad aprire la prima riga e
(Precedente – Prossiscopriamo che contiene una sola cella in cui trova
mo). La quarta area
posto la prima tabella, quella che contiene il logo.
contiene altre due taQuest'ultima a sua volta si compone di tre righe
nella seconda della quale troviamo un'altra tabella
belle che elencano tutnidificata, che contiene la navigazione globale
ti i link di una particolare lezione. La quinta
CD). FrontPage 2002 genera im- area contiene semplicemente
mediatamente il codice e offre una riga di chiusura.
Tutte e cinque le aree vengopossibilità di modifica sugli elementi essenziali (ne parleremo no tenute al loro posto e collonella prossima lezione). In cate reciprocamente dalla tamancanza di strumenti visuali, bella principale che vediamo
la costruzione del layout passa schematizzata in un grafico geper un lungo processo di codi- nerato con GoLive. L'area 1 ocfica dei vari elementi, partendo cupa l'unica cella che compone
da dimensioni tracciate in anti- la prima riga della tabella. La
cipo su un foglio di carta o an- seconda riga contiene una tacor meglio su una stampa del bella invisibile che serve da
spaziatore tra il logo e il resto
progetto grafico della pagina.
della pagina e che a sua volta
Un esempio di tabelle
ospita tre celle con immagini
nidificate
spaziatrici invisibili che ne
A titolo di esempio riportia- bloccano le dimensioni impomo la struttura di tabelle nidifi- stando la larghezza delle tre cocate usata per le pagine interne lonne successive che ospitano
del nostro corso su CD. Vedia- le aree 2, 3 e 4 composte da almo una tabella generale, che trettante celle contigue nella
avvolge tutta la pagina, all'in- terza riga. La riga quattro conterno della quale sono state in- tiene semplicemente la linea
serite otto tabelle nidificate: blu di chiusura e la riga cinque
una espressamente dedicata al corrisponde all'area 5 nel notesto e ai contenuti informativi, stro schema, quella che contiele altre riservate agli elementi ne il link alla pagina dei credits.
di navigazione e alla barra orizBenché possa sembrare
zontale che contiene il logo.
complessa, questa è una pagina
Il modello di pagina è quello abbastanza comune in un sito e
classico a quattro pannelli de- sicuramente è meno articolata
scritto nella seconda lezione di una home page. Per vedere
(vedi l'articolo Impostare gli come è stata costruita rimanspazi del canovaccio sul CD). diamo agli articoli nel CD: TaOsservando la pagina senza belle nidificate in cascata, Tacontenuti notiamo che le otto belle nidificate complesse e
tabelle nidificate si dividono in Tabelle nidificate consecutive.
cinque aree principali. La prima Rimandiamo invece alla prossiè la tabella che contiene la bar- ma lezione per esaminare gli
ra orizzontale del logo, indi- aspetti delle tabelle in quanto
spensabile per garantire che la elementi di contenuto.
3a lezione
4 Namo WebEditor 5, per siti statici professionali
onostante la sua matrice
coreana, questo software
ha già conquistato una discreta popolarità nel mondo
dei Webdesigner grazie al costo ridotto, alla semplicità d'interfaccia e alla precisione del
suo ambiente di sviluppo visuale. È una soluzione valida
per chi voglia evolvere da un
editor basato sul testo verso
un approccio visuale capace di
offrire le principali funzioni
professionali a cui è già abituato. Offre un buon compromesso di funzioni per chi voglia gestire tutte le componenti del sito, dalle pagine agli elementi
grafici e alle animazioni. Il programma offre strumenti per la
generazione di tutti gli elementi grafici di supporto a beneficio dei Webmaster che non siano dotati del tocco artistico.
Pregevole in questo senso la
raccolta di clip art e di siti preconfigurati abbinata al programma.
Il programma è concepito
per l'impiego immediato anche
senza lettura del manuale. Le
opzioni sono state ridotte all'essenziale e i parametri di lavoro sono impostati per default ai valori che si reputano
idonei per la maggior parte dei
siti. Il suo ambiente grafico è
ottimo per la generazione rapida di prototipi di pagina e di sito. Il progettista trova infatti
un'interfaccia completamente
grafica per "disegnare" gli spazi della pagina (layout) e quindi generare in automatico il codice della tabella che per tradurre tale layout in HTML. La
generazione del codice avviene
solo su comando, una volta
che il disegno della pagina è
completo. Fino a quel momento, qualsiasi elemento può essere modificato, spostato e ridimensionato ed è possibile inserire i contenuti finali negli
spazi (testo e immagini) per
osservare quale sia il risultato
finale prima di partire con la
codifica HTML automatica che
appare pulita e senza sorprese.
Questa funzione di design interattivo non offre la potenza che
si trova in Dreamweaver e GoLive, ma in compenso è utilizzabile in pochi minuti e può
soddisfare la gran parte delle
situazioni. Il corredo di funzionalità di Namo WebEditor offre
N
34/88
Identikit
La vista HTML mostra il codice originale della pagina e consente di modificarlo
in diretta come qualsiasi altro editor testuale. Il programma evidenzia i tag e i
relativi attributi differenziandoli dal testo e numera le righe
Caratteristiche
Sito produttore: www.namo.com
Sito distributore: www.questar.it
Costo licenza: 199,89 euro, upgrade 99,90 euro, versione "Education"
99,90 euro
Requisiti: Windows 98, SE, ME, NT 4, 2000, XP
un livello intermedio interessante per chi è stanco di lavorare con un semplice editor
HTML di tipo testuale, ma non
è pronto per il passaggio diretto a Dreamweaver o GoLive e
non si fida del codice generato
in automatico da FrontPage.
Tre modalità di lavoro
Il programma offre due ambienti di lavoro primari: la finestra HTML che mostra il codice
nella sua versione integrale e la
vista Modifica che mostra una
sorta di anteprima grafica della
pagina su cui è possibile intervenire direttamente usando
mouse, icone e menu. Alla vista
Modifica è possibile aggiungere la modalità Layout per disegnare a mano libera i contorni
degli spazi che vogliamo creare
nella pagina per poi lasciare al
programma la generazione automatica delle tabelle che li
conterranno.
Oltre che in fase di progettazione, la vista Modifica risulta
comoda per aggiungere, modificare e aggiornare qualsiasi
elemento della pagina. Offre
strumenti rapidi per intervenire su testo, immagini e tabelle,
osservando immediatamente i
risultati. Qualsiasi operazione
eseguita in modalità grafica si
trasforma in una modifica sequenza del codice HTML che
può essere riesaminato entrando in vista HTML.
In tale vista, appaiono evidenziati con un colore diverso
tutti tag e i relativi attributi,
inoltre il programma numera
automaticamente le righe e le
manda a capo con un soft wrap
(senza aggiungere un ritorno a
capo forzato) per facilitarne la
lettura. È possibile inserire tag
in automatico cliccando sulle
relative icone oppure selezionando le rispettive voci di menu. Non troviamo invece le funzioni di completamento e correzione immediata del tag come negli editor professionali,
ma per lo meno il WebEditor
evidenzia eventuali tag incompleti. Consideriamola una vista
di complemento all'editing visuale, utile per la produzione di
siti statici, ma non per lo sviluppo di siti dinamici, dove la
codifica manuale è preponderante e dove servono anche
strumenti per sveltire la scrittura nei vari linguaggi di scripting e dove la digitazione manuale deve raggiungere un elevato livello di precisione e velocità.
Namo WebEditor fornisce
una serie di script già pronti,
da configurare mediante wizard, per realizzare gli effetti
più comuni. Non offre tuttavia
strumenti mirati a chi debba
Namo WebEditor è uno dei più
popolari editor visuali in
circolazione. Offre una buona
miscela di funzioni orientate
soprattutto alla progettazione,
alla pubblicazione e
manutenzione rapida di un sito
statico. Include tutte le funzioni
necessarie al Webmaster per
coprire anche la componente di
design. Indicato per progetti di
media complessità e per chi vuole
evolvere da un semplice editor a
base testo verso un ambiente
visuale economico e facile da
imparare.
Pro
- Interfaccia semplice ed efficace
- Ottima palestra formativa
- La vista di layout consente la
produzione istantanea di
prototipi
- Integra le componenti
necessarie per produrre gli
elementi grafici del sito
- Include una gestione integrata
del sito e delle sue risorse
- Genera in automatico un HTML
corretto
Contro
- Manca un editor specifico per i
CSS
- Scarso supporto per i linguaggi
di scripting
- Poco efficiente per la produzione
di siti dinamici
scrivere script da zero. A questo scopo è perciò necessario
affiancare altri programmi specializzati come HomeSite oppure uno dei tanti editor gratuiti, come quello che abbiamo
scelto per il nostro corso:
HTML-Kit. Sono invece veloci
ed efficaci invece i suoi strumenti di controllo e ripulitura
del codice già scritto. I fogli di
stile sono supportati, sebbene
manchi un editor dedicato alla
loro gestione. Il supporto all'HTML dinamico è abbastanza
buono. Buone anche le funzioni di controllo del sito nel suo
complesso: il Gestore Risorse
tiene traccia dei vari elementi
disponibili: pulsanti, set di colori, stili, eccetera, mentre il
Gestore Siti aiuta a tener traccia
dei file che compongono un determinato sito e della struttura
di navigazione corrisponden-
3a lezione
te. Da qui è possibile eseguire
alcune operazioni che si estendono all'intero sito come la ricerca e sostituzione di testo, il
controllo del codice, la verifica
e correzione guidata dei collegamenti interrotti, la conversione globale dei nomi di file in
lettere tutte minuscole, la pubblicazione in remoto mediante
protocollo FTP. Nella confezione del prodotto sono incluse
anche tre utility: Namo Capture per catturare le immagini a
video, Namo GIF Animator per
creare GIF animate e Namo Slicer per suddividere immagini
troppo grandi in modo che siano visualizzate progressivamente all'interno di una pagina,
pezzo per pezzo, pur mantenendone l'integrità visiva mediante l'impiego di una tabella.
Il programma in questo caso
genera in automatico anche la
tabella HTML che conterrà le
diverse parti dell'immagine.
Curiosa la disponibilità di
una modalità di progettazione
"i-mode" per lo sviluppo di pagine visualizzabili sui telefonini
cellulari multimediali disponibili in Giappone,
ma del resto si tratta di un software
coreano, il che
spiega tutto.
(versione integrale
dell’articolo sul CD)
il corso è
sul CD
n. 67
La vista Modifica è la più importante di Namo WebEditor e contiene tutte le funzioni
per la creazione e modifica visuale degli elementi nella pagina
5 L’iter per registrare un dominio
uno dei business più profittevoli della Rete che ha
tenuto botta nonostante la
crisi della new economy. Non a
caso se su Yahoo si cerca l’elenco delle aziende che vendono i vari .com o .it si trova un
elenco che conta quasi una cinquantina di nomi. Il motivo si
spiega facilmente. La vendita
di domini non comporta il trasferimento di beni fisici, ma solo il trasferimento di “oggetti”
digitali. Poi si porta dietro la
vendita di altri servizi e infine il
mercato continua a tirare perché la vendita dei suffissi si rivolge indistintamente a privati
È
In arrivo il “.eu”
Appuntamento per l’estate 2003.
Dovrebbe essere questo il
momento del debutto per il dominio
.eu che servirà a identificare le
imprese del Vecchio Continente. Il
25 ottobre è scaduto il termine per
la presentazione delle
manifestazioni d'interesse alla
Commissione europea da parte
degli organi interessati a diventare
gestori dei domini .eu. Fra gli enti
interessati c’è anche un consorzio
italiano formato dalle authority
italiana, belga e svedese alle quali
in caso di vittoria potrebbero
aggiungersi le authority slovena e
ceca oltre a l’Isoc Europe. Per la
prima volta nella storia di Internet a
decidere chi dovrà gestire il registro
del .eu non sarà l’ICANN ma
l’Unione europea, alla quale rimarrà
la paternità del .eu, che in questo
35/88
e aziende. E soprattutto queste
ultime non possono ormai fare
a meno di avere una presenza
in rete. Tutto questo è testimoniato dalla crescita del mercato
che oggi in Italia conta 742.939
domini, una cifra che in Europa
è inferiore solo a quella dell’Olanda 790.304 del Regno Unito
(3.635.585) e della Germania
che guida la classifica dei paesi
dell’Unione europea con
5.666.269. Nonostante il ritardo
nell’utilizzo di Internet, l’Italia
ha risposto bene all’offerta di
domini che nel corso del tempo
si è andata ampliando. Dopo i
classici .com, .net e .org e l’italinon seguirà il normale iter dei gTLD
(.com, .net, .org). "Creato a
garanzia della proprietà industriale
e della personalità delle realtà
aziendali, personali o pubbliche che
ne faranno richiesta – spiega Bruno
Piarulli di Register.it –, il nuovo
identificativo è destinato ad aprire
nuovi orizzonti sulle attività
commerciali, culturali e sociali del
Vecchio continente, contribuendo
alla diffusione di Internet e dell’ecommerce in quella che, una volta
allargata, sarà la terza comunità al
mondo per numero d’individui". E
che il business sia importante lo
testimoniano gli operatori che
hanno iniziato già a raccogliere le
preregistrazioni in rete. Peccato che
la Commissione europea abbia
spiegato che le preregistrazioni
potranno partire solo quando il
futuro registro europeo sarà
operativo.
co .it sono arrivati altri domini
come .biz, .info e .name a qualificare ulteriormente la presenza in Rete. Il fatto che non abbiano avuto lo straordinario
successo dei domini generici
che hanno caratterizzato la prima fase di vita di Internet non
significa che il mercato si stia
sgonfiando. Anzi, altri domini
arriveranno, il .eu per esempio
per permettere di identificare
sempre meglio l’attività che si
vuole svolgere in rete o la provenienza geografica di persone
e aziende. Ma vediamo di approfondire tutti i segreti del
mondo dei domini Internet.
Il dominio è insieme all’indirizzo IP il modo che ci permette
di essere individuati su Internet. Si tratta di una parola (che
può essere anche l’unione di
più parole) accompagnata da
uno dei suffissi che oggi è possibile registrare. Nel caso di PC
Open, per esempio, parliamo di
pcopen.it. Il dominio da registrare in rete deve infatti essere
composto da una sola parola o
da più parole spezzate anche
da trattini. Vietati apostrofi e
accenti, simboli della punteggiatura e altri caratteri particolari come ad esempio @, &, %.
In generale il dominio deve avere una lunghezza minima di tre
caratteri e massima di 63
(estensioni escluse) e non può
cominciare o finire con un trattino. A questa regola però ci sono alcune eccezioni. Per i gTLD
(generic Top Level Domain)
quali .com, .net e .org, .biz, .info
e .name, infatti, è possibile anche registrare domini di due
lettere.
In Italia i domini possono essere acquistati da chiunque,
persona fisica o giuridica, a patto che faccia parte dell’Unione
europea.
La struttura mondiale
della Rete
Prima di affrontare la procedura di registrazione e gli enti
italiani che governano Internet
è il caso di disegnare la struttura mondiale della rete. Il vertice
è costituito dall’ICANN (Internet Corporation for Assigned
Names and Numbers), l’organismo che sovrintende all’assegnazione dei domini. Si tratta di
un ente non profit le cui scelte
sono ratificate dal ministero del
Commercio statunitense il cui
board of director, secondo le
nuove regole recentemente approvate, sarà formato da 18
membri. Il consiglio sarà eletto
da un comitato elettivo e da tre
organizzazioni che rappresentano i gruppi di proprietari di
URL (Universal Resource Locator, l'indirizzo di una pagina
Web su Internet). Sparisce così
la norma che prevedeva che
cinque membri fossero eletti
dagli utenti della Rete. Una decisione che secondo molti allontana il vertice di Internet dai
bisogni dei navigatori.
All’ICANN spetta il compito
di decidere quali siano i nuovi 3a lezione
domini da adottare e chi dovrà
gestirli. Un compito non facile
soggetto a numerose pressioni
(il business fa gola a molti) e
che fino a oggi ha comportato
tempi molto lenti nell’adozione
di nuovi domini che hanno causato anche la nascita di società
alternative delle quali parleremo più avanti.
Nonostante le proteste,
ICANN rimane il massimo organo di Internet al quale è delegata anche la scelta dei registry
dei gTLD, le società che si occupano di gestire i database dei
vari .com, .org o .info. La scelta
dei registry che si occupano
dei ccTLD (Country Code Top
Level Domain) è invece fatta in
modo autonomo dalle locali comunità Internet dei vari Paesi
con il parere favorevole del governo. Il livello successivo è costituito dai registrar o maintainer ai quali i registry appaltano
di solito vendita dei domini. Di
solito si utilizza il termine registrar quando questi soggetti
possono vendere i gTLD e hanno la possibilità di scrivere direttamente nel database di chi
gestisce questi domini. Si tratta
di un privilegio riservato a pochi visto che le società che possono vantare questa qualifica
sono 110 nel mondo fra le quali
c’è l’italiana Register.it. Molto
più accessibile è la qualifica di
maintainer, il quale vende gli altri suffissi. In questo caso le richieste di registrazione devono
essere inviate all’Authority e
non si accede direttamente ai
database. In Italia si preferisce
utilizzare il termine maintainer.
La Registration Authority
(www.nic.it), che ha sede presso l’Istituto per le applicazioni
telematiche del CNR di Pisa, ha
il compito di assegnare e registrare tutti i nomi a dominio
che utilizzano il suffisso .it. La
Naming Authority si occupa invece di stabilire regole e procedure attraverso le quali sono
gestiti i domini.
Requisiti per poter
registrare un dominio
Per registrare i domini .it bisogna possedere una Partita
IVA (per le aziende) o un codice
fiscale (i privati) e avere la residenza in uno dei Paesi dell’Unione europea. Le aziende europee possono registrare a loro
nome un numero illimitato di
domini .it, mentre i privati possono registrare a loro nome un
solo dominio .it. Per i domini
36/88
.com, .org e .net non è prevista
invece nessuna limitazione anche per i privati.
A meno di offerte particolari
o altri accordi, l’acquisto del
dominio vale per un anno. 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.
Come si registra un dominio
Chi vuole acquistare un dominio .it oltre che essere maggiorenne deve firmare e inviare
via fax (al numero 050/542.420)
o per posta raccomandata ( Registration authority italiana,
Istituto per le applicazioni telematiche del CNR, via Giuseppe
Moruzzi 1, 56124 Pisa) una lettera di assunzione di responsabilità. La lettera può essere di
solito stampata da Internet nel
sito del maintainer. L’assegnazione da parte della Registration authority non è in tempo
reale e segue il principio del first come first served. In sostanza
se due persone o aziende inviano la richiesta di acquisto del
medesimo dominio viene premiata la richiesta arrivata per
prima a Pisa. Per controllare se
un dominio è già occupato, ed
eventualmente chi l’ha acquistato, bisogna interrogare il database della Registration
Authority. Per farlo bisogna andare sul sito www.nic.it/RA/index.html oppure passare per i
siti delle società che vendono i
domini che di solito offrono anche la possibilità di interrogare
direttamente il database della
Ra (come Register.it). Per ottenere un dominio sono necessari circa tre-quattro giorni. Una
volta effettuata la registrazione
la Registration authority provvederà a rendere tecnicamente
visibile in Rete l’utente registrato. In pratica la Ra compie
un atto amministrativo registrando il nuovo dominio e uno
di tipo tecnico registrando il
fatto che il dominio risiede in
almeno due DNS, Domain Name
Server. I DNS servono per convertire i nomi dei nodi (come
www.pcopen.it) in indirizzi numerici IP. Di solito questi server
sono di proprietà della società
che ha venduto il dominio e ne
ha effettuato la registrazione,
ma nel caso di grandi organizzazioni (ad esempio Fiat o Microsoft) i server sono di proprietà delle società che in que-
Il trasferimento “a pacchetti”
Internet è formata da un numero
imprecisato di computer host
collegati tra loro. Questi host
dialogano trasferendosi pacchetti
di dati che passano attraverso vari
server Internet fino ad arrivare al
destinatario. In questo viaggio i
dati vengono riconosciuti e
interpretati dai vari host che
capiscono se sono destinati a loro
o se devono trasmetterli a un’altra
macchina. Il protocollo TCP/IP
permette di effettuare queste
operazioni trasferendo i dati a
pacchetti. I pacchetti sono gruppi
di dati che riportano sempre
l’indirizzo del mittente e quello del
destinatario. L’indirizzo è codificato
a 32 bit e consiste in un alternarsi
di 0 e 1 (codifica binaria). Il numero
viene diviso in una sequenza di
quattro cifre che sono poi
trasformate in base dieci. Questo
dà vita a numeri come
sto modo possono attivare senza problemi i sottodomini.
Chi invece deve acquistare
un dominio .com, .net, .org non
deve compilare la lettera di assunzione di responsabilità.
Quando si acquista un dominio
non si entra in possesso per
sempre del nome (il mercato
avrebbe vita breve) ma in sostanza si acquisisce il diritto di
utilizzare quel nome per uno o
più anni. Il prezzo varia a seconda del suffisso che si intende utilizzare.
Quanto costa?
L’offerta in rete è molto varia; si passa da 9,95 a 35 euro
per un .it oppure a 14,95 per un
.com. Dipende dai livelli di rivendita, dalla politica commerciale e anche dai servizi offerti
in abbinamento con la vendita
del dominio.
Attenzione però a non farvi
abbagliare dal prezzo. Il costo
principale di chi vende il dominio è dato infatti dalla gestione
dei nomi. In pratica quello che
si paga non è il dominio in sé
ma i servizi (per esempio il
cambio di DNS o altro) richiesti
a queste società che foniscono
anche una sorta di assicurazione che tutto funzionerà per il
meglio.
E in certi momenti un servizio consumatori che funziona e
dà seguito immediatamente alle vostre richieste può essere
molto utile. Quante volte vi siete scontrati con un indirizzo e-
192.153.169.24, e questa è la
tipica forma di un indirizzo IP.
Ovviamente ricordarsi ogni volta la
sequenza di numeri sarebbe troppo
macchinoso, e per questo si è
pensato di introdurre la possibilità
di legare a un indirizzo IP un nome
a dominio. La “traduzione” da
dominio a indirizzo IP è affidata al
DNS. Non tutti i nomi a dominio
possono essere registrati. Esistono
infatti nomi riservati. Per esempio
non sono assegnabili i nomi di
regioni e province, le sigle a due
lettere delle province a tre lettere
delle regioni, i nomi corrispondenti
all’identificazione dell’Italia e i
nomi dei comuni italiani. Gov.it e
governo.it sono riservati al sito
dell’esecutivo così come it.it,
Italia.it, Repubblica-Italiana.it e
RepubblicaItaliana.it sono
assegnabili solo agli organi
istituzionali dello Stato.
mail dal quale non arriva mai
una risposta?
Il servizio di hosting
Spesso alla vendita dei domini è abbinata quella dell’hosting. 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.
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. In pratica la società che ha venduto il
dominio ospita sui propri server le pagine Web del sito e la
posta elettronica.
Anche in questo caso le offerte presenti in Rete sono molto differenti e prima di scegliere
è il caso di leggere attentamente le voci del contratto con i relativi servizi e soprattutto avere ben chiaro in mente cosa si
vuole fare con il proprio sito. Se
le ambizioni, per il privato o l’azienda, si traducono semplicemente nel primo passo su Internet con un sito dedicato alla
famiglia o una vetrina delle attività aziendali non è il caso di
spendere molti soldi.
Lo spazio gratuito spesso
concesso con l’acquisto di un
3a lezione
dominio può essere sufficiente.
Pochi MB bastano per foto e testi, poi quando le idee saranno
più chiare e i progetti su Internet più definiti, si potranno
chiedere spazi più ampi.
È inutile farsi abbagliare da
offerte mirabolanti con spazi
infiniti che non saranno mai utilizzati. Meglio concentrarsi su
elementi più importanti come
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 è 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  
all'interno della pagina HTML
(ripetendolo per ogni singolo
spazio). Lo spazio unificatore
svolge tre funzioni: impedisce la
separazione di due parole in fine
di riga per effetto del ritorno a
capo automatico eseguito dal
browser, blocca una cella di
tabella oppure un paragrafo
mostrando al browser che non
sono vuoti e perciò non possono
essere eliminati in automatico,
inserire spazi consecutivi multipli
all'interno del testo per creare
rientri e spaziature impossibili con
gli spazi convenzionali.
È chiaro che anche lo spazio
unificatore non risolve il problema
delle diverse dimensioni che
possono essere attribuite ai
caratteri, e perciò agli spazi, al
variare del tipo di computer.
Per tale motivo HTML prevede una
serie di altri marcatori che
indicano al browser di utilizzare un
carattere monospaziato alias
testo a spaziatura fissa.
Si tratta di un termine preso a
prestito dal mondo della tipografia
e indica un particolare font dove
tutti i caratteri,
indipendentemente dalla loro
forma e dal fatto che siano
maiuscoli o minuscoli occupano
tutti lo stesso spazio,
corrispondente di solito a quello
necessario per il carattere più
largo dell'alfabeto usato (la M
maiuscola). Lo stesso spazio
viene naturalmente occupato
anche dai singoli segni
d'interpunzione e dagli spazi
eventualmente presenti perciò gli
allineamenti verticali tra righe
diverse vengono garantiti
perfettamente indipendentemente
dal contenuto di ciascuna di esse.
Il prezzo che si paga è di avere un
testo goffo e sgradevole a vedersi
e perciò anche difficile da
leggere. In effetti, la scelta di
attribuire una spaziatura diversa
ai vari caratteri tipografici serve
proprio a facilitarne la lettura, su
carta e a video, e a fornire una
certa armonia estetica.
Se osservate una pagina di
giornale noterete che la i
minuscola occupa meno spazio in
orizzontale rispetto alla j e
rispetto alla M o T maiuscole.
Questo genere d'impostazione
prende il nome di spaziatura
proporzionale. I caratteri
monospaziati vengono di solito
utilizzati solo per rappresentare
4a lezione
parleremo di XML). Nella tabella "Marcatori per formattare il testo" trovate una sintesi
di tutti i tag compatibili con
HTML 4.01 per modificare l'aspetto e il significato di un
blocco di testo.
Ma cosa succede quando
decidiamo d'intervenire su interi blocchi di testo modificandone, ad esempio, font, colore, dimensione, allineamento e posizionamento rispetto
ad altri elementi?
Dobbiamo decidere se seguire la vecchia strada dei tag
stilistici oppure abbracciare la
nuova dei fogli di stile.
Vediamo innanzi tutto la prima soluzione, cioè cosa si può
fare utilizzando i tag e gli attributi che ereditiamo dall'HTML
3.2. Il primo tra questi è <p>
che definisce il paragrafo e
che impone al browser per la
sua sola presenza d'inserire
una riga vuota prima e dopo il
paragrafo stesso.
Alcuni lo usano anche da
solo per inserire spazi bianchi
listati di programma, brevi elenchi
o altri brani di testo brevi dove gli
allineamenti siano più importanti
dell'omogeneità visiva e dove,
semmai, sia opportuna una netta
distinzione rispetto alla parte
principale del testo.
Il marcatore storico usato per
questo genere di funzione è <pre>
che definisce un testo
"preformattato", tipicamente
usando il font courier a spaziatura
fissa e inserendo una riga vuota
prima e dopo il brano compreso
tra i due tag. È stato deprecato
dalle specifiche HTML 4.01
perché si tratta di un markup
fisico (stilistico) e non logico
(strutturale), inoltre non funziona
in maniera omogenea in tutti i
browser. Ha il pregio di mantenere
qualsiasi indicazione di
formattazione contenuta nel testo
originale, compresi spazi multipli,
ritorni a capo nel testo e
lunghezza delle righe. Dispone di
un singolo attributo facoltativo,
witdh, che determina il numero
massimo di caratteri, spazi
inclusi, che possono comparire su
una riga e forza il ritorno a capo al
superamento di tale valore
(l'attributo width non è supportato
da Internet Explorer 6.0 mentre
funziona ancora in Netscape 7.0).
41/88
all'interno della pagina, ma i
browser di futura generazione
potrebbero filtrare i paragrafi
vuoti eliminando gli spazi così
introdotti.
Perciò alla pari delle tabelle,
dove non è consigliabile creare celle completamente vuote
anche se servono al fine di
creare spazi bianchi, il consiglio è di riempire il paragrafo
con almeno uno spazio bianco
non eliminabile, che in HTML
viene generato con l'entità
  (non breaking space di
cui parliamo più dettagliatamente in un riquadro a parte
"Gestire gli spazi nel testo").
Nell'HTML 3.2 il tag di chiusura </p> è facoltativo, ma diventa obbligatorio in XHMTL
1.0 (la versione di HTML che
consente l'impiego delle funzioni avanzate di XML). L'attributo "storico" del tag <p> deprecato da HTML 4.01 è align
che regge i parametri: left, center, right, justify (quest'ultimo
supportato solo da vecchie
versioni di browser), per alli-
Il marcatore <pre> riconosce e
riproduce anche eventuali
grassetti e corsivi presenti nel
testo. È sicuramente il più
flessibile tra i marcatori per la
generazione di testo
monospaziato ed è molto utile
quando si devono riconvertire per
il Web documenti che sono già
stati impaginati con un
wordprocessor e non vale la pena
rimaneggiarli daccapo. È l'unico
che conservi integralmente il
contenuto originale e non è
possibile riprodurne la totalità
delle funzioni nemmeno con i fogli
di stile (che non conservano gli
spazi multipli e i ritorni a capo).
Esistono diversi altri markup fisici
e logici che producono testo
monospaziato, elencati per
comodità nella tabella "Marcatori
per formattare il testo" e di cui
riportiamo le caratteristiche
dettagliate sul CD all'interno del
documento "Prontuario dei tag di
testo". Tra i marcatori riportati in
tabella, segnaliamo comunque
<blockquote> che consente di
produrre blocchi di testo
evidenziati all'interno del
documento principale mediante
un rientro su entrambi i lati. Tra
l'altro, <blockquote> è l'unico
marcatore HTML a consentire la
neare il testo al bordo sinistro,
destro oppure al centro della
pagina.
Nel caso non volessimo inserire una riga vuota al termine del paragrafo, ma semplicemente andare a capo oppure volessimo inserire diverse
righe vuote consecutive, utilizzeremmo il tag <br> (break)
che fa continuare il paragrafo
e ne mantiene le impostazioni
anche dopo il ritorno a capo e
non richiede tag di chiusura.
Il deprecato tag font
Il marcatore fisico più importante per la "tipografia" sul
Web, è <font> che regge diversi attributi di cui i principali
sono: face per indicare il tipo
di carattere, size per definirne
le dimensioni e color per specificarne il colore.
Il tag non tiene conto della
struttura del documento perciò potete attribuire un font a
una singola lettera, a una singola parola o porzione della
stessa, a frasi e paragrafi inte-
nidificazione di se stesso, vale a
dire che potete inserire diversi
<blockquote> uno dentro l'altro al
fine di produrre rientri sempre più
profondi, usando una sintassi del
tipo <blockquote>Primo rientro
<blockquote>Secondo rientro
I vari effetti che possiamo creare
mediante l'allineamento del testo a livello
di paragrafo e l'applicazione del tag
<font> per modificare il tipo, il colore e la
dimensione del carattere. Il tag <font>,
deprecato da HTML 4.01, prevede sette
dimensioni assolute diverse per i
caratteri più un'impostazione relativa che
va da – 7 a + 7 e ingrandisce o
diminuisce il carattere pre-impostato nel
browser
ri oppure a tutta la pagina.
Il suo effetto viene unicamente delimitato dalla posizione dei tag di apertura e </blockquote></blockquote>. Il
problema di questo approccio è
che richiede l'impiego di un
marcatore strutturale, nato per
evidenziare delle citazioni, per uno
scopo stilistico che in origine non
era previsto. Quando un motore di
ricerca passa in
esame le pagine
dove
<blockquote> è
stato utilizzato
unicamente per
produrre un
rientro,
codificherà come
citazione qualcosa
che non lo è
affatto. Lo stesso
effetto può essere
prodotto più
efficacemente e
con maggiore
accuratezza
usando i fogli di
stile in cascata.
Qui vediamo il marcatore <pre> all'opera. Nel primo riquadro in alto compare il testo
originale scritto con Word dove mettiamo in evidenza gli spazi e i ritorni a capo
generati con il wordprocessor. Subito sotto notiamo come lo stesso brano di testo si
trasformi quando copiato direttamente in una pagina HTML: gli spazi multipli e i ritorni
a capo scompaiono, producendo una singola riga ininterrotta e illeggibile (grassetto e
corsivo nella pagina Web devono naturalmente essere aggiunti con marcatori ad hoc).
Proviamo ora a copiare lo stesso brano, inserendolo nella coppia di tag <pre> e
</pre>. Otteniamo nuovo il formato originale, visualizzato con un carattere courier a
spaziatura fissa invece del Times a spaziatura proporzionale scelto di default dal
browser
4a lezione
chiusura: <font> e </font>. L'unica eccezione in questo senso, come vedremo, sono le tabelle che richiedono di indicare il tag <font> per ogni singola
cella anche nel caso in cui i parametri restino invariati per
l'intera tabella.
L'attributo face consente
d'indicare diversi tipi di font,
da scegliere in sequenza e in
alternativa al principale qualora questo non fosse disponibile sul browser, size invece
indica dimensioni assolute o
relative.
Si va da 1 a 7 oppure da –7 a
+7. I due tipi di valori hanno significati diversi. Il primo stabilisce una dimensione fissa
dove il default è 3 e corrisponde alla dimensione base assegnata dal browser al testo (circa 10 pixel).
Il secondo stabilisce invece
il livello d'ingrandimento o riduzione rispetto al valore di
default (3 appunto), perciò –1
corrisponde a 2, +1 corrisponde a 4, eccetera.
In entrambi i casi si tratta di
valori dinamici, vale a dire
sensibili all'impostazione del
browser per visualizzare il testo.
Se per esempio l'utente dovesse scegliere da Internet Explorer il parametro Visualizza
> Carattere > Grande tutta la
scala di valori verrebbe alzata
di un livello, se invece scegliesse Visualizza > Carattere >
Molto piccolo tutta la scala di
valori verrebbe ridotta di due
livelli. Il valore di default per il
browser corrisponde naturalmente a Visualizza > Carattere
> Medio.
Perciò impostando la dimensione del carattere usando <font size> lasciamo libero
l'utente d'ingrandire e rimpicciolire il testo a piacere a seconda delle sue necessità di
visione. Color infine accetta,
come qualsiasi altro tag che
preveda l'uso del colore, il nome di uno dei sedici colori codificati in HTML oppure il codice esadecimale della tinta
scelta, che di solito viene prelevata da una palette di 216 colori cosiddetti sicuri, cioè visualizzabili senza alterazioni
in qualsiasi tipo di browser sia
su Windows sia su Macintosh
(per un riferimento vedi
http://www.webmonkey/ reference/color_codes/ e il riquadro "Colori sicuri").
Nell'impiego del tag <font>
42/88
Marcatori per formattare il testo
Tag fisici
Tag logici
Effetto visibile
Significato
<b>
<i>
<u>
<s>
<pre>
<strong>
<em>
<ins>
<del>
evidenziato
evidenziato
inserimento temporaneo
cancellazione visibile
testo preformattato
<tt>
<kbd>
<samp>
<code>
grassetto
corsivo
sottolineato
barrato
monospaziato con riporto di tutti gli
spazi e ritorni a capo presenti nel
documento originale e con riga vuota
sopra e sotto. Conserva grassetti
e corsivi.
monospaziato
monospaziato
monospaziato
lampeggiante (Netscape)
corsivo e ritorno a capo
corsivo
rientro con riga vuota sopra e sotto
aumento dimensioni corpo
riduzione dimensioni corpo
testo a pedice
testo ad apice
nessuno
nessuno
nessuno
corsivo
aumento dimensioni e spaziatura
<blink>
<address>
<cite>
<blockquote>
<big>
<small>
<sub>
<sup>
<abbr>
<dfn>
<q>
<var>
<h1>-<h6>
testo non formattabile
testo campione
codice programma
evidenziato
indirizzo
citazione
citazione a blocco
testo grande
testo piccolo
pedice
apice
abbreviazione
definizione termine
citazione in paragrafo
nome di variabile
titolo e titolini
Tutti questi marcatori possono essere inseriti all'interno di un paragrafo, ma <h#> e <blockquote> possono anche
vivere separatamente. Tutti i tag fisici sono deprecati da HTML 4.01
notiamo una caratteristica che
costituisce la base per il funzionamento dei fogli di stile in
cascata, come vedremo più
avanti.
È possibile nidificare diversi
tag <font> ereditando di livello
in livello le caratteristiche dei
livelli superiori. Nell'esempio
che riportiamo in figura, l'intero documento è contenuto all'interno di un tag <font> che
specifica il tipo Verdana, il colore rosso e una dimensione
pari a quattro (+1).
I primi due attributi si mantengono costanti per l'intero
documento poiché non modificati dai tag <font> successivi,
mentre varia invece la dimensione, indicata nel tag che è
più vicino alla porzione di testo a cui si applica.
Si dice quindi che gli attributi si applicano in cascata
con i livelli superiori che influenzano tutto ciò che contengono, ma che possono essere modificati dai livelli inferiori che hanno una priorità
crescente a mano a mano che
si è fisicamente più vicini al
brano di testo da modificare.
Altri tag logici per il testo
Esistono situazioni in cui il
Il codice usato per creare
la figura precedente
mostra che gli attributi font
possono essere nidificati e
che quelli più interno
ereditano i parametri del
più esterno (in questo
caso colore e tipo) ma
possono impostarne di
propri (come in questo
caso la dimensione) che
ha priorità rispetto al tag
più esterno.
Notate anche che il tag
<font> può abbracciare
una quantità indefinita di
testo, dalla singola parola
all'intero documento.
I tag nidificati all'interno
vanno chiusi, come
sempre, prima di chiudere
il tag più esterno
(qui evidenziato in viola)
testo non fluisce a colonne,
ma richiede una formattazione
particolare, come nel caso delle liste. HTML prevede una serie di marcatori specifici per
queste esigenze: <ol> (ordered
list) e <ul> (unordered list) delimitano una lista le cui voci
sono rispettivamente numerate e non numerate.
Ciascuna voce della lista
viene poi identificata mediante la coppia di tag <li></li> (list item). Nel caso di liste nu-
merate è possibile determinare il tipo di numerazione in
uso (araba, romana, lettere) e
la lettera o numero da cui far
partire l'elenco.
Nelle liste non numerate invece è possibile evidenziare
ogni singola riga con un pallino (default), un quadrato o un
cerchio. Tutte le impostazioni
stilistiche previste dal tag
<font> si applicano alle liste,
come pure alle tabelle che
contengano testo.
4a lezione
2 CSS e HTML 4.01
Cascading Style Sheets (fogli
di stile in cascata) costituiscono lo strumento più importante per gestire gli attributi tipografici di un sito moderno. Sebbene esistano fin al
1996, hanno trovato la loro diffusione naturale con HTML 4.0
e il loro pieno sviluppo con
HTML 4.01, che ne recepisce
appieno le caratteristiche.
Offrono numerosi vantaggi:
controllare l'aspetto del testo e
degli altri elementi della pagina
con una precisione molto superiore a quella possibile mediante i tag fisici di HTML, raggruppare tutte le informazioni
stilistiche di un sito all'interno
di un documento che venga caricato una sola volta per quel
particolare sito, alleggerendo
le singole pagine e facilitando
eventuali modifiche e aggiornamenti. Basta cambiare una
delle voci contenute nel foglio
di stile affinché la variante si
propaghi immediatamente su
tutte le pagine del sito che contengono quel particolare elemento.
Purtroppo i browser fino alla
generazione 4 non erano compatibili con le funzioni dei CSS
e perciò si è dovuto aspettare
la diffusione capillare della generazione 5 per cominciare a
vedere siti che ne facessero un
impiego concreco.
La compatibilità è cresciuta
ulteriormente con l'arrivo dei
browser della generazione 6 e
poiché possiamo ormai considerare tramontata la stagione
dei vari Internet Explorer 4.0 e
Netscape 4.x, tanto vale abbandonare l'impiego dei tag fisici,
in particolare <font> e abbracciare in toto i CSS nella nostra
progettazione tipografica.
Raggiungeremo il doppio
obiettivo di essere pienamente
conformi alle specifiche di
HTML 4.01, che depreca l'uso
di tag stilistici, e di beneficiare
delle evidenti potenzialità dei
CSS.
Avendo così eliminato anche
i vari tag particolari che accompagnavano le diverse famiglie di browser, diventa possibile realizzare soluzioni tipografiche che siano compatibili
a trecentosessanta gradi, senza
doversi far carico di produrre
versioni diverse della stessa
pagina a seconda del browser
I
43/88
utilizzato dal navigatore, come
invece accadeva in passato.
Separare
la forma dalla struttura
Il sogno di qualsiasi progettista di siti è la separazione degli attributi tipografici e stilistici dalle componenti strutturali
della pagina, soprattutto in siti
di tipo dinamico.
Tale separazione è importante per raggiungere un adeguato livello di efficienza nella
gestione del sito. Infatti, fintantoché gli elementi stilistici sono mescolati con il codice
HTML, è necessario chiamare
in causa il Webmaster per ogni
singola modifica estetica, modifica che deve essere replicata
a mano, pagina per pagina.
Se poi si trattava di un sito
dinamico, diventa addirittura
necessario chiamare in causa
un programmatore oppure un
Web developer, perché il colore di sfondo e le font del testo
sono indissolubilmente legate
ai tag del linguaggio di scripting che fa funzionare la pagina
in abbinamento al database.
Ogni modifica nell'aspetto
della pagina diventa perciò costosa e impegnativa, tanto da
scoraggiare la revisione stilistica di molti siti che non riescono perciò a migliorare la propria usabilità, la propria navigabilità e la propria estetica
sulla scorta delle informazioni
raccolte dai navigatori durante
l'uso del sito.
I CSS sono il primo strumento che ha consentito di separare i due mondi e di lasciare una
notevole libertà d'intervento ai
creativi senza interferire con il
lavoro di programmazione e di
gestione del codice HTML eseguito dai tecnici.
Inoltre, fornendo una gamma di opzioni tipografiche molto ampia, ha consentito anche
a chi non è creativo di produrre risultati presentabili e gradevoli, con poco sforzo.
La nascita dei fogli di stile e
dell'HTML 4.0 risolve anche
una stortura concettuale introdotta nel Web con il rilascio
della versione 3.2 di HTML che
ha rinnegato la natura originale
del linguaggio, nato per controllare la struttura e non la
presentazione di una pagina,
per assecondare i desideri dei
Esempio di un foglio di stile: ecco il formato tipico di un foglio di stile. È un semplice
file di testo o porzione di pagina HTML, dove ogni regola è composta da un selettore (in
rosso) e da una dichiarazione (tra parentesi graffe) che riunisce una serie di proprietà e
di valori corrispondenti che spiegano in che modo il selettore (un elemento HTML) deve
essere visualizzato e perciò modificato rispetto alle proprie caratteristiche originali
vari produttori di browser,
creando così enormi problemi
di compatibilità e di manutenibilità dei siti, per non parlare
della loro usabilità.
Tuttavia i Cascading Style
Sheets non si limitano agli attributi tipografici, bensì consentono di posizionare con precisione gli elementi sulla pagina,
sostituendosi alle tabelle come
metodo per definire il layout, e
introducono anche una certa
dose d'interattività nella pagina, facilmente accessibile anche da chi non conosce linguaggi di programmazione come JavaScript.
Relazione
tra CSS e HTML
I fogli di stile definiscono un
insieme di regole per indicare il
tipo di formattazione da applicare ai contenuti di una pagina
stampata o visualizzata elettronicamente. Nascono concettualmente nel mondo dell'editoria dove, per semplificare il
lavoro, gli attributi tipografici
di un libro vengono definiti prima d'iniziarne la stesura e vengono mantenuti separati dal testo vero e proprio così da poter essere applicati in modo
uniforme a più testi della stessa collana e poter essere modi-
ficati rapidamente senza dover
ripassare a mano ogni singola
pagina del volume.
Nel Web costituiscono un
complemento di HTML e si
sposano con i tag di quest'ultimo in modo abbastanza semplice e intuitivo. Per aggiungerli alla pagina basta digitare
codice aggiuntivo che non interferisce con il codice HTML
originale il quale viene comunque riconosciuto senza problemi dai browser di vecchia
generazione. In effetti è persino possibile combinare nella
stessa pagina CSS e marcatori
fisici, come ad esempio <font>,
al fine di avere la piena compatibilità con tutti i tipi di
browser in circolazione, sfruttando al tempo stesso le funzioni evolute dei fogli di stile.
In tal caso, la pagina avrà un
aspetto più gradevole quando
visualizzata da un browser di
generazione 5 o 6, ma sarà comunque utilizzabile su un
browser di generazione 4.
Le tre funzioni primarie di
un foglio di stile sono: impostare gli attributi tipografici del
testo, definire un livello e la sua
posizione nella pagina (vedremo più avanti di che si tratta),
modificare le caratteristiche
originali dei tag HTML.
4a lezione
3 Cosa si può fare con i CSS
ispetto ai markup fisici di
HTML e in particolare al
tag <font>, i fogli di stile in
cascata offrono moltissime
possibilità, tanto che uno studio di tutte le loro funzioni richiederebbe un impegno paragonabile a quello speso per imparare HTML. A differenza di
quest'ultimo, però, i fogli di stile possono essere conosciuti
un po' alla volta, esplorandone
le funzioni a mano a mano che
se ne presenti l'occasione e aggiornando il sito gradualmente,
ogni volta che si scopra qualcosa di nuovo.
C'è anche un altro motivo
per procedere con calma: la
gran parte dei browser in circolazione sono pienamente
compatibili con le specifiche
dei CSS di livello 1, ma non
supportano ancora appieno i
CSS di livello 2 che aggiungono
una pletora di nuove funzioni,
specie nella gestione di contenuti multimediali. Di conseguenza conviene partire studiando le funzioni di livello 1
(che costituiscono l'argomento
centrale di questa lezione) per
poi estendersi al livello 2 in un
secondo momento.
Il prezzo da pagare per l'adozione dei CSS è l'aggiunta di
un nuovo linguaggio alla propria cassetta degli attrezzi e al
proprio sito, con la necessità
d'imparare complesse regole
astratte che governano ereditarietà ed effetto a cascata. Si
producono talvolta anche effetti imprevedibili e incostanti,
difficili da diagnosticare e risolvere anche per i limiti di
molti editor HTML oggi in circolazione, non dotati di specifiche utilità per la gestione dei
CSS. L'unico programma che
contenga una funzione diagnostica specifica per i CSS è Top
Style 3.0, che funge anche da
editor testuale per pagine
HTML, senza tuttavia rimpiazzare un vero e proprio ambiente visuale. Di conseguenza costituisce un investimento aggiuntivo.
R
La natura tipografica
degli stili
Il primo ambito d'intervento
dei fogli di stile è nell'impostazione degli attributi tipografici
del testo. Non solo possiamo
scegliere la font, il colore e le
44/88
dimensioni del carattere, come
avveniva nel tag <font>, ma
possiamo anche stabilire con
precisione l'altezza di ogni lettera, usando diverse unità di
misura, il peso delle stesse
(sottile, normale e grassetto),
la spaziatura, l'interlinea, eventuali bordi, attributi come il
corsivo e il maiuscoletto, effetti particolari come il sottolineato, il barrato e molto altro
ancora.
Nel caso si tratti di testo usato per collegamenti ipertestuali, possiamo anche modificarne
l'aspetto quando vi passi sopra
il cursore e una volta che sia
stato visitato. Inoltre, anziché
ripetere in continuazione il tag
<font> per ogni elemento, sarà
sufficiente stabilire una volta
sola per l'intero sito l'aspetto
del testo, dei titoli e dei link, per
avere un'estensione automatica delle specifiche a tutte le pagine. Anche la gestione delle
tabelle viene potenziata e semplificata enormemente, potendo definire attributi globali a livello di tabella, di riga e di cella.
Per comprendere i vari termini usati nella definizione di
questi attributi bisogna conoscere un po' di tipografia. Tanto per cominciare, la proprietà
più comune, font-family, descrive la famiglia di font scelte
per quel particolare brano di
testo. Si parla di famiglia poiché si compone di tanti insiemi
di caratteri con dimensioni diverse, ciascuna delle quali
prende il nome di font. Tipograficamente, quando s'ingrandisce un carattere o lo si rimpicciolisce, si cambiano anche
le caratteristiche delle varie
lettere che lo compongono per
adattarsi al diverso effetto visivo prodotto dalle nuove dimensioni.
La scelta di una singola font
all'interno della famiglia avviene quindi mediante la proprietà
font-size che identifica l'altezza
delle lettere maiuscole per il
particolare insieme che abbiamo scelto. Tale altezza può essere espressa in pixel, bloccando la visualizzazione del testo a
una dimensione precisa sullo
schermo. Si ottiene così il pieno
controllo della visualizzazione
del sito e s'impedisce all'utente
di modificarla agendo sulle funzioni di dimensionamento pre-
Confronto tra CSS e <font>: qui vediamo la grande varietà di unità di misura e di effetti
che si possono produrre con i fogli di stile rispetto alle ristrette prerogative del tag
<font>, il quale può determinare unicamente il tipo di font, il colore e la dimensione
relativa (size) in rapporto al default del browser.
Con i fogli di stile possiamo invece replicare esattamente il comportamento delle
misure relative di font, mediante gli attributi relativi small, medium, large, eccetera; ma
possiamo anche imporre una dimensione fissa in pixel o punti tipografici (quest'ultima
preferibile se vogliamo poi anche stampare le pagine). Possiamo anche maggiorare le
dimensioni di una particolare porzione di testo (il grassetto "maggiorato" è del 10% più
grande del testo normale a cui è abbinato), possiamo infine raggiungere dimensioni
assolutamente inarrivabili con il tag <font> e aggiungere bordi, variamente colorati e
strutturati, sfondi a tinta unita oppure composti da immagini e possiamo anche
restringere o allargare lo spazio tra le lettere e le parole, anche se quest'ultima
funzione non è supportata da Opera 5.0 e Netscape 7
viste dal browser. Lo svantaggio è di complicare la vita a chi
abbia difficoltà di lettura e di
rendere imprevedibile l'effetto
in stampa. In alternativa i CSS
offrono altri due tipi di unità di
misura: assolute e relative. Le
unità assolute definiscono un
valore rigoroso, alla pari dei
pixel, ma facilmente riconoscibile anche dalla stampante: millimetri, centimetri, pollici, pica
e punti (un pica corrisponde a
12 punti tipografici).
Queste ultime due sono entrambe unità di misura tipografica e sono da preferirsi alle misure in pixel se volete anche
stampare le pagine Web su carta senza sorprese. Nella pratica
9 punti corrispondono a 12
pixel (la misura più leggibile
per un testo lungo sia a video
sia in stampa), 8 punti corrispondono a 10 pixel, una misura adatta per le didascalie, e via
di questo passo. Le unità relative lasciano invece libero l'uten-
te di ridimensionare il proprio
testo, mantenendone tuttavia
le proporzioni rispetto al resto
della pagina. Si prestano alla
creazione di effetti speciali.
Ad esempio possiamo decidere di impostare il testo grassetto in modo che sia leggermente più grosso del testo normale utilizzando l'unità di misura em che in tipografia indica
le dimensioni della M maiuscola di un determinato font, in
pratica la lettera più larga dell'intera font rispetto alla quale
si misurano tutte le altre. Impostando il grassetto in modo
che sia 1.1 em avremo un grassetto più corposo perché leggermente più grande della font
normale. Basta indicare b {fontsize: 1.1 em} perché tutti i caratteri bold dell'intero sito, non
importa quale font e quale dimensione, vengano maggiorati
del 10% rispetto agli altri caratteri del testo in cui sono contenuti: una finezza facile da rea-
4a lezione
per alcuni casi,
con le versioni più
recenti.
Quattro tipi di CSS
Esistono quattro
modi diversi per
innestare un foglio di stile all'interno di una pagina HTML.
Il primo, che
prende il nome di
foglio di stile
esterno, è il più
diffuso e consiste
nell'aggiungere
Incorporare un foglio di stile nella pagina: usando invece il
nell'intestazione
marcatore <style> è possibile definire un foglio di stile che
della
pagina
vale solo per quella pagina particolare. Qui notiamo che il
nostro foglio ipotetico contiene un elemento definito, table, (<head>) un link
che indica il tipo, la dimensione e il colore nero del testo
al documento che
da usare nelle tabelle contenute nella pagina. Seguono poi
contiene il foglio
quattro classi generiche (dida, rosso, bianco e blu)
di stile (un semcorrispondenti ad altrettante varianti del testo da usare
plice documento
mediante il marcatore <span></span> direttamente
all'interno del testo della tabella. Ne vediamo un esempio
di testo) affinché
nella Websafe palette integrata nel CD
quest'ultimo venga caricato assieme alla prima palizzare che può migliorare la gina del sito. Mediante tale apleggibilità del testo.
proccio è possibile definire un
A qualsiasi elemento HTML, singolo foglio di stile per l'intetesto compreso, è possibile poi ro sito e beneficiare della masabbinare bordi, sfondi colorati sima flessibilità di modifica dei
addirittura immagini di sfon- parametri. Il tag da utilizzare in
do, con un controllo molto pre- questo caso è <link> con l'indiciso sulla forma e la posizione cazione del tipo di relazione
degli stessi.
tra i due documenti (attributo
Ad esempio possiamo realiz- rel) la posizione del foglio di
zare un testo bordato solo su stile (attributo href) e la sua
tre lati. È anche possibile infine natura (type="text/css").
determinare con precisione la
La dicitura completa per inposizione degli elementi ri- serire il foglio usato nelle pagispetto ad altri elementi conti- ne del nostro CD è la seguente:
gui e rispetto al canovaccio <link
rel="stylesheet"
complessivo della pagina.
href="/zzz/stili.css"
Purtroppo tutta questa li- type="text/css">, il valore di
bertà ha un prezzo: la poten- href (hypertext reference) qui
ziale incompatibilità con i è indicato per la home page e
browser più vecchi e anche, cambia al variare della posi-
Test: leggi le domande e verifica le tue risposte
?
Riepilogo dei concetti della Lezione 4
1. Quali sono i marcatori più importanti per il testo e
dove si usano rispettivamente?
2. Che differenza c'è tra un marcatore o tag fisico e un tag logico?
3. Come si può allineare il testo all'interno di una pagina? Si
possono usare spazi bianchi multipli?
4. Che differenza c'è tra HTML 4.01 e XHMTL 1.0?
5. Che cosa sono i CSS e a che cosa servono?
6. Cosa si può fare con i CSS?
7. Come funziona il meccanismo dell'ereditarietà?
8. In che modo si può inserire un foglio di stile all'interno della
pagina?
9. Se il browser non supporta le funzioni dei CSS che cosa
succede?
10. Che cos'è la Websafe palette?
11. Che tipo d'immagine può entrare nella pagina di un sito?
(le risposte le trovi a pagina 40)
45/88
Inserire un foglio di stile esterno: nella gran parte dei siti che usano CSS il foglio di
stile è centralizzato. Lo si collega a ogni singola pagina mediante il tag <link> seguito
da un serie di attribiti obbligatori tra cui il riferimento ipertestuale (href) alla posizione
dello stile nel sito
zione delle varie pagine nella
struttura di directory del sito.
Il tag <link> va inserito nell'intestazione di ciascuna pagina,
al termine della zona compresa dalla coppia di tag <head>
</head>.
Il secondo modo per inserire un CSS nella pagina prende
il nome di foglio di stile incorporato e consiste nel digitare
la descrizione del CSS per intero all'interno dell'intestazione
della pagina, racchiudendola
entro di uno speciale tag concepito allo scopo: <style>. In
questo caso, il foglio di stile vale solo per quella pagina particolare e dovremo aprire la pagina ogni volta che bisognerà
modificarlo, tuttavia avremo
comunque il vantaggio di trovare tutte le informazioni stilistiche racchiuse in un solo
punto del documento anziché
sparpagliate in mezzo ai tag
del contenuto.
Il terzo modo prende il nome di foglio di stile importato e
costituisce una via di mezzo
tra i due definiti prima, il foglio
viene incorporato nell'intestazione della pagina mediante il
tag <style>, però proviene da
un singolo documento centralizzato, identico per diverse
pagine. È un sistema usato di
rado anche perché mal supportato da alcuni browser.
Il quarto tipo di CSS prende
il nome di foglio di stile in linea
(inline) e viene inserito direttamente all'interno di un particolare elemento della pagina,
come ad esempio nel tag di
paragrafo <p> oppure nel tag
divisionale <div> oppure nel
tag di tabella <table> utilizzando l'attributo style seguito dalla definizione delle proprietà
che vogliamo attribuire a quel
particolare elemento rispetto
alle specifiche generali del foglio di stile esterno oppure incorporato. Da notare che mediante l'uso del tag <div> oppure <span> è possibile applicare un foglio di stile a una
porzione liberamente definita
del documento (da una sola
lettera a un'intero blocco di
paragrafi). Un esempio sareb-
be: <p style="font-family: Times;
font-size: 18px"> che dice al paragrafo corrente di visualizzare il testo in Times a 18 pixel.
Se volessimo realizzare lo stesso effetto non sul paragrafo,
bensì su una porzione più piccola di testo useremmo <span
style="font-family: Times; font-size: 18px">testo da modificare
</span>.
Le regole
di costruzione dei CSS
Ogni regola dei CSS si compone di due parti: il selettore e
la dichiarazione. Il selettore,
posizionato a sinistra, definisce le parti del documento a
cui applicare lo stile. La dichiarazione, sulla destra e separata dal selettore mediante
due punti, indica le varie proprietà e i valori per tali proprietà. Il selettore può corrispondere a uno degli elementi
nativi di HTML, in tal caso parleremo di selettore di tipo. Il
selettore h1, ad esempio, indicherebbe che lo stile si applica
a tutti i titoli di primo livello.
La dichiarazione ospita invece
tutti i possibili attributi stilistici previsti per quel particolare
oggetto.
Ad esempio, h1 { font-family:
Verdana, Arial, Helvetica, sansserif; font-size: 16px; color:
#003399 } indica che i titoli delle nostre pagine saranno visualizzati con il font Verdana,
oppure in alternativa con Arial,
Helvetica o con un qualsiasi
font di tipo san serif (senza
grazie – le grazie sono gli arrotondamenti che si notano alle
estremità delle lettere di alcune font aggraziate, come il Times Roman e che servono per
facilitare la lettura su carta,
ma che mancano invece nelle
font di tipo "bastone" che sono
lisce e senza ghrigori e risultano più facili da leggere a schermo).
La regola indica inoltre che
il titolo dovrà avere una dimensione di 16 pixel (il valore
è preciso, impossibile a definirsi con il tag <font>) nonché
un colore blu. Notate che la regola si apre e si chiude con una
4a lezione
parentesi graffa così da essere
distinta dalle altre e che ogni
proprietà viene separata da un
punto e virgola.
Possiamo proseguire nella
nostra lista e definire tante regole quanti sono i tag che pensiamo di utilizzare nelle pagine
del nostro sito e alla fine otterremo un file di testo che può
vivere indipendentemente all'interno del sito medesimo,
oppure essere incorporato nelle singole pagine.
Così come ci si possono essere molte proprietà per un
singolo selettore, possono altresì esserci numerosi selettori per una singola proprietà. Infatti la regola h1,h2,h3,
h4,h5,h6 { color: #003399 } ci dice che tutti i titoli e titolini del
nostro sito saranno blu.
Se volessimo invece modificare uno specifico tag all'inter-
no di una pagina la sintassi diventerebbe: <h1 style=font-size:
16px; color: #003399">. Come
vedete è abbastanza semplice
e si sposa perfettamente con la
sintassi originale propria di
HTML.
Per i browser che non riconoscono i fogli di stile, il tag
<h1> dell'esempio verrà interpretato normalmente, ignorando l'attributo style.
Esiste anche una seconda
categoria di selettori basati sui
tag nativi HTML, i selettori
contestuali: servono per governare la visualizzazione del
testo contenuto in un determinato tag al verificarsi di condizioni particolari. Ad esempio
la regola li b {color: red} ci dice
che ogni volta che in una lista
comparirà un testo in grassetto dovrà essere di colore rosso.
4 I colori del Web
l colore costituisce un elemento importante nelle pagine Web. Ci permette di aggiungere informazioni visuali
alla pagina, differenziare vari tipi di testo, mettere in risalto i
collegamenti ipertestuali, abbellire il documento e le tabelle con sfondi e con bordi che
ne aumentino l'effetto estetico
e ne facilitino la lettura. Esistono due modi fondamentali per
inserirlo: creare un'immagine
esterna alla pagina oppure
sfruttare le funzioni intrinseche di HTML. Il secondo produce pagine più leggere e più
semplici da gestire e, mediante
l'impiego dei fogli di stile, offre
anche un buon livello di controllo sui risultati. Senza i CSS,
invece, i risultati sono abbastanza poveri, soprattutto nella gestione del testo, e capita
spesso di trovare, specie nei siti di vecchia concezione, l'uso
d'immagini anche per rappresentare titoli e brani di testo, il
che porta a pagine pesanti e
molto scomode da aggiornare.
Immaginatevi di correggere un
refuso o modificare un testo
contenuto in un’immagine: dovreste aprire un programma ad
hoc (Photoshop, Flash o qualsiasi altro strumento sia stato
usato per generare il testo-immagine) e trasformare l'imma-
I
46/88
gine, anziché semplicemente
intervenire direttamente sulla
pagina HTML. Oggi, con la precisione tipografica consentita
dai CSS, diventa non solo possibile, ma anche altamente consigliato, sfruttare al massimo
gli elementi di colore prodotti
in modo nativo dal browser.
Sono diversi i tag HTML che
consentono d'impostare il colore per i propri elementi mediante l'uso di attributi come
color (per il corpo dell'elemento), bgcolor (per gli sfondi) e
bordercolor (per i bordi). In tutti i casi, i colori vanno espressi
in due modi possibili: indicandoli per nome oppure mediante una notazione esadecimale. I
CSS aggiungono come terza
possibilità, consigliata, l'uso di
una un notazione decimale o
percentuale che indica direttamente i livelli di rosso, verde e
blu da utilizzare nella composizione del colore finale.
Il primo metodo, quello dei
nomi, è poco usato poiché prevede un numero limitato di colori, 16, di cui solo 8 appartengono alla Websafe palette che
vedremo più avanti. Tale metodo, inoltre, usa nomi che sono
mnemonici solo in inglese, ma
che sono poco comprensibili
per un italiano (per un riferimento sui 16 colori predefiniti
Le risposte alle domande di pag. 39
1. Si tratta di <p> per la
definizione dei paragrafi e
<h#> per la definizione dei
titoli, a partire da <h1> per
arrivare ad <h6>.
2. Un marcatore o tag fisico
indica il modo in cui una
porzione di testo deve
essere visualizzata sullo
schermo, un marcatore
logico ne definisce invece la
funzione e lascia al browser
la scelta di come
visualizzarla.
3. Il marcatore <pre> mantiene
l’allineamento di un testo
come nel documento
originale. Per conservare gli
spazi bianchi bisogna
utilizzare l'entità “spazio
unificatore” ( ) oppure
creare un rientro su ambo i
lati con <blockquote>.
4. HTML 4.01 è la più recente
specifica per la produzione di
siti Web. XHTML 1.0 prevede
una sintassi più rigorosa per
la migrazione verso XML.
5. I Cascading Style Sheets
costituiscono lo strumento
più importante per gestire gli
attributi tipografici di un sito
moderno. Raggruppano tutte
le informazioni stilistiche di
un sito all'interno di un
documento centrale.
6. Creare attributi tipografici per
il testo molto più ricchi e
precisi rispetto a quanto
vedi l'indirizzo http://www. webreference.com/html/reference/color/named.html).
Esiste un ulteriore rischio
nell'uso dei nomi per i colori.
Microsoft ha definito una tavolozza estesa che contiene 140
colori, con nomi molto esotici
come "darkslategray" (grigio
lavagna scuro), "biscuit" (biscotto) o “forestgreen” (verde
foresta), ma che includono anche i 16 colori di base. I nomi
aggiuntivi di questa palette funzionano unicamente con Internet Explorer dalla versione 4.0
in avanti e non sono supportati da nessuno standard, perciò
abituarsi a usare i nomi per i
colori porta facilmente a produrre pagine incompatibili (per
un elenco dei nomi particolari
definiti da Microsoft vedi
http://www.webreference.com/
html/reference/color/propcolor.html#HEAD-2
oppure
!
possibile con
HTML,
posizionare gli elementi sulla
pagina con estrema
precisione, inserire elementi
dinamici e multimediali nella
pagina.
7. Gli attributi passano di padre
in figlio con il figlio che ha la
priorità nel variare quel che
gli viene dal padre.
8. Esistono quattro modi
possibili: creando all'interno
della pagina un collegamento
a un file che contiene le
indicazioni di stile per l'intero
sito, integrando il foglio di
stile direttamente nella
pagina, importando
all'interno di questa un foglio
di stile residente in un file
esterno, inserendo le
informazioni di stile
direttamente nel tag HTML
che si vuole modificare.
9. Se non le supporta affatto
non succede niente. Se
invece le supporta solo
parzialmente può produrre
risultati inaspettati in
qualche raro caso.
10.Un insieme di 216 colori che
possono essere visualizzati
senza varianti un Macintosh
oppure un PC Windows.
11.Esistono tre formati usabili
direttamente dal browser:
GIF per grafici e disegni,
JPEG per le fotografie e PNG
http://www.oreilly.com/ catalog/wdnut/excerpt/color_names.html).
Il metodo basato sui valori
esadecimali è invece il più comune perché utilizzabile direttamente dall'interno di un tag
HTML e compatibile con qualsiasi browser.
Basta indicare i valori RGB
che vogliamo riprodurre per
ottenere qualsiasi genere di tinta. Il risultato è una sequenza
di sei cifre esadecimali come
ad esempio FF0033 (rosso vivo), due per ciascuno dei tre
colori: rosso, verde e blu. Questi colori primari,
combinati sullo
schermo, producono tutti i colori visibili.
(versione integrale
dell’articolo sul CD)
l’articolo
è sul CD
n. 68
4a lezione
5 Gestire le immagini
l secondo tipo di contenuto tipico di una pagina Web sono
le immagini. A differenza del
testo, non si trovano nella pagina HMTL, ma vengono caricate
in quest'ultima per mezzo di
uno speciale marcatore che ne
indica la posizione all'interno
del sito in relazione al documento oltre che le caratteristiche di visualizzazione e l'allineamento rispetto al testo. Nella gestione delle immagini, esistono quindi due fasi: la prima
consiste nel preparare il file che
le contiene e la seconda nel collegarlo alla pagina nella posizione in cui vogliamo che appaia quando spedito al browser
del navigatore. Per tale motivo
bisogna conoscere i formati di
file utilizzabili e sapere scegliere quello corretto in funzione
del contenuto, cioè del tipo di
immagine che si vuole riprodurre.
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. Sono le uniche
direttamente riconoscibili dai
browser e hanno un formato fisso e difficilmente modificabile.
Le variazioni possibili di un'immagine bitmap consistono nella
modifica dei colori dei singoli
pixel, nel ridimensionamento
dell'immagine oppure nel ritaglio di un particolare: tutte operazioni da realizzare mediante
un programma di ritocco come
Photoshop, Image Ready, Fireworks, Gimp e altri. Qualsiasi
operazione è di fatto un ritocco
basato su collage di elementi,
magari presi da immagini diverse e sulla modifica del colore di
quelli esistenti. Non è possibile
cambiare in maniera interattiva
le dimensioni o l'orientamento
degli oggetti contenuti in un'immagine bit map e nemmeno alterare il contenuto di un eventuale testo presente. È anche
molto difficile ingrandire l'immagine senza perdere qualità,
visto che l'ingrandimento viene
realizzato mediante l'aggiunta di
punti simulati matematicamente mediante una duplicazione
47/88
approssimata di quelli già esistenti.
Le immagini vettoriali hanno
invece la caratteristica di definire ciascun oggetto mediante
coordinate geometriche e perciò ne consentono la modifica a
piacere: ingrandimento, rimpicciolimento, sostituzione ed eliminazione di interi elementi
senza lasciare segno, riscrittura
del testo. Sono anche particolarmente adatte per produrre
animazioni. Richiedono una notevole "intelligenza" di calcolo,
non disponibile sui normali
browser e perciò possono essere riprodotte unicamente mediante speciali aggiunte (plugin) che di solito sono concepite
per gestire solo un formato particolare, come Flash di Macromedia oppure Acrobat di Adobe, e vengono utilizzati solo per
porzioni particolari di un sito
non consultabili in assenza del
plug-in. Esiste anche un formato
vettoriale definito come standard nel 1999 dal World Wide
Web Consortium (http://www.
w3c.org), lo SVG (Scalable Vector Graphics), concepito per la
definizione vettoriale d'immagini bidimensionali e basato su
XML. È stato adottato da numerosi produttori di software, tra
cui la stessa Microsoft che lo ha
scelto per Office 11, perciò lo vedremo affiorare gradualmente
in futuro.
Nella pratica, tutti i principali programmi di modifica delle
immagini bitmap consentono di
produrre un file di lavoro con alcuni contenuti vettoriali, come
ad esempio il testo e le forme
geometriche chiave (linea, cerchio, rettangolo) che viene quindi esportato in formato puramente bitmap al termine dell'elaborazione. In questo modo
avremo due file distinti: uno di
lavoro realizzato nel formato
vettoriale tipico del programma, su cui potremo continuare a
intervenire con le nostre variazioni e correzioni e uno da pubblicare, salvato in uno dei tre
formati direttamente riconoscibili dai browser: GIF, JPEG e
PNG.
I tre moschettieri
della grafica Web
Oggi non esiste modo per
pubblicare un'immagine sul
Web che non passi attraverso
Esempio di codice
HTML per inserire
un'immagine.
Sotto vediamo una
parte della pagina che
è stata utilizzata per
realizzare la figura a
fianco. Le immagini
sono state inserite in
una tabella che
contiene uno stile in
linea sia per la tabella
in quanto tale (vedi la
parte in blu nel tag
<table>) sia per la
didascalia (vedi la
parte in blu nel tag
<caption>).
Il tag <img> inserisce
l'immagine nella cella
della tabella
specificando mediante
l'attributo src, il
percorso di
destinazione e,
mediante l'attributo
align come allinearla
rispetto al testo che
segue direttamente la
chiusura del tag
<img>
Allineare il testo
all'immagine.
Il punto d'inserimento
dell'immagine nella pagina
viene indicato mediante il
marcatore <img> al quale
si associa anche l'attributo
di allineamento rispetto al
testo già esistente
l'adozione dei tre formati standard: GIF, JPEG e PNG. I primi
due sono compatibili con tutte
le versioni di browser in circolazione, mentre il terzo è stato
supportato in modo imperfetto
fino alla generazione 5.x, perciò
va usato con attenzione, anche
se di gran lunga preferibile agli
altri due.
Il fomato GIF (Graphics Interchange Format) è adatto per
comprimere immagini che usino
tinte unite e un numero limitato
di colori (256), come ad esempio grafici, disegni schematici,
videate. In tale contesto, offre
un ottimo livello di compressione senza perdita di dati (lossless) e una buona qualità di riproduzione che può anche adattarsi ai colori nativi prodotti da
HTML così da creare immagini
che si fondono senza soluzione
di continuità con lo sfondo
HTML della pagina o della tabella che le contiene. Consente
inoltre di creare semplici animazioni.
Il formato JPEG (Joint Photographic Experts Group) s'indirizza, come indicato dal nome,
alle immagini fotografiche. Prevede diversi livelli di compressione con una perdita progressiva di dati e di qualità. È molto
efficace nella compressione
d'immagini con sfumature e toni
a variazione continua.
Il PNG (Portable Network
Graphics) è nato dopo l'avvento
dei principali browser e ha tratto beneficio dalle prime esperienze realizzate dai progettisti
del Web. Si propone come alternativa evoluta al GIF, ma può an- 4a lezione
che gestire fotografie visto che
permette di riprodurre 16 milioni di colori mediante una compressione senza perdita più efficiente rispetto a quella del formato GIF. Offre anch'esso la possibilità di creare semplici animazioni.
Per il momento è sufficiente
ricordare questa regola: GIF o
PNG per grafici, immagini con
tinte unite o animazioni; JPEG
per le fotografie. Nella lezione
dedicata al Web design vedremo
meglio come sfruttare ciascuno
di essi.
Inserire l'immagine
nella pagina HTML
Abbiamo detto che ogni immagine costituisce un oggetto
esterno alla pagina Web e che
viene abbinata a quest'ultima
nel momento in cui il server la
spedisce al browser del navigatore. A tale scopo è sufficiente
inserire nel codice HTML della
pagina, lì dove vogliamo che
l'immagine compaia, un riferimento che punti alla posizione
del file che la contiene e che ne
indichi le principali caratteristiche di visualizzazione. Ciò permette di svincolare HTML e grafica di conservare tutte le immagini in una directory centralizzata, una tecnica particolarmente utile nei siti dinamici.
Il marcatore HTML che inserisce l'immagine nella pagina è
<img> (image) che deve essere
necessariamente abbinato all'attributo src (source – fonte)
per indicare la posizione del file
grafico. Un esempio pratico del
suo uso sarebbe <img
src="/zzz/pcopenlogo.gif"
width="168" height="55" bor-
der="0"> dove si dice che l'immagine pcopenlogo.gif si trova
nella cartelletta "zzz" e che va visualizzata con una larghezza di
168 pixel e un'altezza di 55 pixel,
senza bordo. Altezza e larghezza
non sono indispensabili, poiché
il browser userà automaticamente le dimensioni dell'immagine contenuta nel file, tuttavia
sono utili per velocizzare la visualizzazione della pagina. Infatti, sapendo lo spazio da riservare, il browser può comporre
la pagina immediatamente senza aspettare che l'immagine sia
stata caricata per intero. I due
parametri servono anche per visualizzare l'immagine a dimensioni diverse (solitamente più
piccole) rispetto all'originale.
Questo può essere utile nel caso
in cui la stessa immagine compaia in più pagine con risoluzioni diverse e non si voglia produrne più versioni. Non è sempre una strategia vincente poiché costringe il browser a compiere un doppio lavoro: scaricare un file più grande del necessario e ridimensionarlo, a scapito della velocità di visualizzazione della pagina. Può essere
utile solo quando siamo sicuri
che le versioni multiple della
stessa immagine siano viste nella stessa sessione di navigazione, magari perché sono nella
stessa pagina. In tal caso, il beneficio di caricare un solo file invece che diversi compensa i rallentamenti dovuti alla rielaborazione.
L'attributo border serve a visualizzare o meno un bordo blu,
usato per indicare che all'immagine è abbinato un collegamento ipertestuale. È rarissimo tro-
vare siti che usino ancora immagini bordate perché il bordo
è decisamente antiestetico e ormai inutile, visto che i navigatori suppongono quasi sempre
che tutte le immagini siano cliccabili e possono averne conferma semplicemente portandovi
sopra il cursore del mouse.
Un altro attributo molto importante è align usato per allineare l'immagine rispetto agli
elementi che la circondano. Poiché si tratta di un attributo che
modifica l'impaginazione e non
fornisce invece informazioni
strutturali, è stato deprecato da
HTML 4.01 che consiglia di sostituirlo con una funzione equivalente dei CSS. Tuttavia i progettisti di siti si sono talmente
abituati a utilizzarlo che non
sparirà tanto presto dalla circolazione. L'attributo align prevede cinque valori: il più comune,
left, allinea l'immagine lungo il
margine sinistro della finestra,
tabella o altro elemento in cui si
trova, lasciando il testo fluire
sulla destra. Con right si ottiene
naturalmente l'effetto opposto.
Con top si allinea il margine superiore dell'immagine al margine
superiore della prima riga di testo corrente. Il parametro middle allinea la base della prima riga
di testo al centro dell'immagine.
Infine bottom allinea la base della prima riga del testo corrente
alla base dell'immagine. Trovate
un esempio HTML delle varie
modalità nel file "Allineamento
immagine" sul CD Guida.
Un altro attributo importante, ma spesso trascurato è alt
(alternate) che serve a contenere una breve descrizione dell'immagine da usare nel caso in
cui l'immagine stessa non fosse
visibile, vuoi perché il navigatore ne ha disattivato la visualizzazione sul proprio browser,
vuoi perché non è in grado di vederla. La seconda ipotesi si riferisce sia a navigatori non-vedenti sia a chi utilizza browser
vocali che "leggono" il contenuto della pagina al telefono oppure su altro dispositivo di navigazione uditivo (come i navigatori
per automobile). L'uso dell'attributo alt costituisce un requisito per rendere il sito accessibile secondo le specifiche WAI
(Web Accessibilità Iniziative http://www.w3.org/WAI/) e sono
ormai diventate obbligatorie in
gran parte dei siti dell'amministrazione pubblica. Un'alternativa è longdesc che consente d'inserire un link a un altro documento che descriva il contenuto
dell'immagine.
Chiudono l'elenco degli attributi per le immagini convenzionali hspace e vspace che indicano in pixel rispettivamente lo
spazio orizzontale e verticale da
riservare attorno all'immagine.
Vengono usati di rado perché si
applicano uniformemente sui
quattro lati dell'immagine compromettendo anche gli allineamenti rispetto al testo e alla tabella di layout. Di solito, dell'immagine rispetto agli elementi sui
lati che c'interessano viene realizzata con maggiore precisione
usando celle vuote nella tabella
di layout.
FrontPage 2002 non è stato provato,
com'era nelle nostre iniziali intenzioni,
in quanto è in arrivo la nuova versione,
contenuta in Office 11. Potete però
trovare una copia dimostrativa integrale di
FrontPage 2002 sul CD GUIDA n.68
In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!
Avete trovato interessante il nostro corso e volete prepararvi a mettere alla prova le competenze acquisite? Per farlo
avrete bisogno di uno spazio vostro sul Web, dove potervi esercitare nello sviluppo di siti campione su server reali.
Ecco quindi la nostra iniziativa, che nasce in
collaborazione con Register.it, il più
importante registrar in Italia: nei prossimi
mesi avrete a disposizione gratuitamente per
un mese l’uso di uno spazio di hosting
dedicato, oltre ad una serie di altri servizi
supplementari.
In più, dal momento che per poter usare lo
spazio di hosting è necessario disporre di un
dominio,
i lettori di PC Open in esclusiva potranno
48/88
acquistare da subito
il proprio dominio presso
Register ad un prezzo
scontatissimo (40% in meno,
lo sconto più alto oggi disponibile sul
mercato).
Il metodo è semplicissimo:
dovrete collegarvi al sito Internet
www.register.it/pcopen,
inserire il codice seguente: x6Wa3P
nel box all’interno della pagina e a questo
punto verrete inviati alla home page del sito
di Register, da dove le registrazioni verranno
scontate in automatico del 40%.
Le registrazioni saranno comprensive di tutto
quanto è indicato all’indirizzo
http://we.register.it
/domains/allincluded.html.
Per il servizio di supporto inviare le e-mail
all’indirizzo [email protected]
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,
vale a dire un professionista
esperto nelle arti grafiche che
ha dimestichezza con gli strumenti e le tecniche necessarie.
Tuttavia, il Webmaster può trovarsi nella necessità di fare tutto da solo oppure di realizzare
nel concreto il progetto impostato da altri. Di conseguenza,
deve conoscere alcuni dei criteri da seguire per realizzare
una pubblicazione elettronica
che sia di buon livello estetico
L
e, al tempo stesso, funzionale.
Abbiamo già affrontato gli
aspetti progettuali per stabilire
le finalità del sito e il tipo di
pubblico che lo visiterà. Conoscere il navigatore che pensiamo di attrarre è indispensabile
per determinare la ricchezza
dell'interfaccia da fornire (vedi
Tecniche di progettazione del
sito nella prima lezione e Progettare la pagina nella seconda lezione). Una volta compiuto questo primo passo, siamo
pronti a disegnare la pagina vera e propria.
Criteri di base
La progettazione di una pagina Web, come per qualsiasi
altro tipo di pubblicazione su
carta o altro supporto, consiste nel collocare gli elementi su
una griglia ordinata, assegnando dimensioni proporzionate e
tracciando un percorso di lettura che guidi l'occhio del navigatore attraverso la pagina
nella sequenza che noi desideriamo, da sinistra a destra e
dall'alto in basso. Rispetto alla
carta, le pagine Web hanno la
caratteristica peculiare di es-
sere lette saltando da un punto
all'altro perciò è necessario
prevedere diversi punti di attenzione e mettere ben in evidenza gli elementi chiave. La
vera arte del design consiste in
realtà nel dosare gli elementi e
gli spazi bianchi. Lo spazio è un
elemento essenziale e comunque preponderante nella pagina; può essere bianco oppure
avere il colore dello sfondo, ma
deve immancabilmente comparire nella stessa proporzione
armonica degli elementi che
contiene. Una pagina troppo
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. 69
(disponibile integralmente
sul CD)
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
• Adobe GoLive 6.0
• Spiegazione dei tag HTML per una pagina
vergine
• Esercizi su come creare una pagina
vergine e su come progettare un sito
Lezione 3:
Modelli di pagina e tabelle
(disponibile integralmente sul CD)
• La tabella come elemento strutturale
• Progettare layout fluidi e statici
• Costruire template con le tabelle
di layout
• NamoWeb Editor5: per siti statici
49/88
professionali
• Dimensionare tabelle e celle fluide,
dimensionare tabelle con celle miste,
allineamento spontaneo delle tabelle
consecutive
• Template con struttura complessa
• Template con tabelle nidificate
• Esercizi
Lezione 5:
Design e multimedialità
• Elementi di design per il Web
• La ruota colore
• Grafica e formati di immagini per Internet
Lezione 4:
HTML 4.01 e CSS
(disponibile integralmente sul CD)
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font
• I marcatori per formattare il testo
• Gestire gli spazi nel testo
• CSS e HTML 4.01
• Cosa si può fare con i fogli stile
• Quattro tipi di CSS
• I colori del Web
• Gestire le immagini
• Esercizi
• 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
5a lezione
La home page di un sito progettato con ordine. Questo è il famoso
www.webpagesthatsuck.com ossia un sito dedicato a promuovere o bocciare le varie
soluzioni di design che si trovano sul Web. Notate la struttura regolare, dove il testo la
fa da padrone e dove compare ampio spazio bianco che dà risalto ai contenuti
facilitandone anche la lettura
affollata sembra disordinata e
risulta anche difficile da leggere.
Persino i portali più importanti, noterete, usano generose
porzioni di bianco benché mostrino in home page una quantità impressionante di link. Gli
sfondi colorati vanno utilizzati
con parsimonia, solo per evidenziare aree particolari della
pagina e mantenendosi comunque su tinte pastello, tenui. La leggibilità del testo viene prima di ogni cosa e uno
sfondo di colore intenso finisce
Questa è invece una delle pagine recentemente bocciate da WebPagesThatSuck. È un
garbuglio di colori e di elementi, alcuni animati, che sconcertano il navigatore
impedendogli di capire dove sia capitato e dove possa andare da quel punto.
Graficamente divertente, ma decisamente bocciata in termini di utilità per il Web
50/88
per fare a pugni anche con la
grafica e con le immagini presenti nella pagina. La regola
d'oro del buon designer è che
meno elementi ci sono, specie
se decorativi, migliore sarà il risultato finale. La pagina sembrerà più chiara, elegante e leggibile. Una delle tecniche seguite nel design editoriale è
quella di aggiungere tutto ciò
che riteniamo sia necessario e,
una volta soddisfatti, togliere
tutto quel che riusciamo senza
alterare la funzionalità del nostro design, a quel punto arriveremo a un distillato di stile
efficace.
Il testo, solitamente preponderante, dovrebbe essere scuro su sfondo chiaro o viceversa, e richiamare poca attenzione. Dev'essere soprattutto leggibile e bisogna distinguere visivamente il testo corrente dai
titoli, dalle didascalie e dai link
ipertestuali. Questi ultimi sono
storicamente blu e sottolineati,
tuttavia è facile trovare siti che
omettano la sottolineatura e
che adottino colori diversi dal
blu originale. L'importante è
che i link abbiano caratteristiche costanti nell'intero sito e
che siano riconoscibili a colpo
d'occhio per quel che sono.
centrato rispetto al testo che
invece è allineato a sinistra.
La posizione degli elementi
identifica la sequenza con cui
vogliamo che il navigatore li
veda. In alcuni casi fornisce
informazioni anche sul tipo di
contenuto. Ad esempio, una didascalia di solito si trova vicino
all'immagine a cui si riferisce,
gli elementi di navigazione si
trovano sui bordi laterali oppure in alto e in basso, e via di
seguito. Inoltre la scelta della
posizione serve anche a bilanciare il "peso" di un elemento
così da non rendere la pagina
sbilanciata. Ad esempio se
avessimo le immagini tutte da
una parte e il testo dall'altra
non percepiremmo un effetto
armonico.
La ripetizione è simile alla
coerenza, ma consiste nel riproporre alcune informazioni
che vogliamo far ricordare al
navigatore, siano esse un brano di testo che spiega discretamente la natura del sito, un
piccolo motivo grafico che
contrassegna ripetitivamente
un certo tipo di contenuto, una
barra di navigazione globale,
presente in tutto il sito e via dicendo.
Dosare il colore
Coerenza, allineamento,
posizione e ripetizione
Queste sono le quattro parole chiave da tenere a mente
quando si progetta la grafica di
un sito. La coerenza si riferisce
alla costanza con cui gli elementi di riferimento si ripetono
di pagina in pagina conservando aspetto, posizione e dimensione. Il sito avrà sicuramente
diversi modelli di pagina (template), ma ci saranno alcuni
elementi che non cambiano,
come ad esempio il logo, le barre di navigazione, i link ipertestuali, lo sfondo, eccetera.
Mantenendo invariati questi
elementi, si trasmetterà un'impressione di ordine e si faciliterà l'orientamento del navigatore che potrà concentrarsi sui
contenuti. L'allineamento è un
criterio fondamentale dell'impaginazione tipografica e si ripropone anche sul Web. Il testo
e le immagini devono mantenere un allineamento regolare tra
loro e rispetto alla griglia di
layout. È anche possibile sfruttare variazioni di allineamento
rispetto alla norma per mettere
in evidenza elementi particolari, come ad esempio un titolo
Il colore è notoriamente l'elemento più visibile all'interno
di una pagina e perciò gli elementi colorati dovrebbero essere usati con attenzione, così
da non sopraffare l'attenzione
del navigatore. Usate tinte poco intense per le grandi aree,
come gli sfondi e le cornici. È
anche importante che i colori
presenti sulla pagina siano tra
loro compatibili, vale a dire che
si sposino bene insieme. Il loro
abbinamento è un'arte con regole precise di cui parliamo più
avanti nell’articolo, ma esistono anche strumenti che aiutano a scegliere le combinazioni
adatte, vedi ad esempio l'utility
gratuita SLUGS da integrare nel
programma gratuito HTML-Kit
di cui abbiamo parlato in questo corso, che seleziona per
voi i colori complementari rispetto alla base che avete identificato e li rapporta anche in
termini di saturazione e gradienti d'intensità (passaggio da
un colore all'altro con le principali tinte intermedie).
Parlando di colori, dovrete
anche decidere se uniformarvi
alla Websafe palette (vedi la
scorsa lezione), il che sarebbe 5a lezione
consigliabile per lo meno negli
elementi di navigazione.
Ancora più visibili dei colori
sono le fotografie e gli elementi grafici, specie se tridimensionali. Le fotografie aggiungono anche informazioni di contenuto, ma è bene ricordare
che ogni immagine aggiunta aumenta il tempo di scaricamento della pagina. Il rallentamento diventa particolarmente vistoso con immagini di grandi
dimensioni e le pagine che contengono un gran numero d'immagini diventano inaccessibili
a chi usi browser non convenzionali (come telefonino, PDA,
eccetera) e difficili da aggiornare.
Gli elementi grafici 3D sono
invece spesso una parte integrante del sistema di navigazione del sito. L'effetto tridimensionale è facilmente realizzato aggiungendo un'ombra alla figura, icona, pulsante o barra di navigazione, e creando
bordi smussati. L'uso di grafica
per le barre di navigazione ne
aumenta la visibilità, ma ne
complica la gestione.
L'uso delle icone può essere
invece esteticamente efficace,
ma bisogna ricordarsi di aggiungere sempre un testo che
spieghi la funzione di ciascuna,
poiché non sempre il navigatore capisce il significato dell'icona semplicemente guardandola, anche se a noi potrebbe risultare del tutto evidente.
Immagini in movimento
per dare vita alla pagina
Il prossimo elemento a salire
nella nostra graduatoria di visibilità sono le immagini in movimento, balzano all'occhio più
di qualsiasi altra cosa e contribuiscono a differenziare il Web
dalla carta stampata. Qui gli
esperti di usabilità sono concordi: mai superare i due elementi per pagina. Nella realtà si
finisce per averne diversi anche perché i banner e i bottoni
pubblicitari sono spesso ani-
mati e si sommano agli elementi dinamici già presenti nel
sito.
Il sistema più semplice e diffuso per creare animazioni consiste nello sfruttare una funzione del formato GIF che permette di combinare tra loro diversi
"fotogrammi", tutti dello stesso
formato, e mostrarli ciclicamente al posto dell'immagine
di partenza. Il GIF animato è facile da realizzare e compatibile
con qualsiasi browser. Presenta solo l'inconveniente di appesantire il file che lo contiene. Il
secondo elemento di animazione molto diffuso è Macromedia
Flash, un programma che produce animazioni grafiche di natura vettoriale, ossia definite
per mezzo di formule matematiche.
Ciò permette di ottenere risultati molto più raffinati rispetto al GIF con file molto più
leggeri, ma impone l'impiego
di uno speciale software da abbinare al browser (plug-in) che
2 La ruota colore del Web
armonia dei colori costituisce un elemento centrale per qualsiasi progetto grafico. Il contrasto e gli abbinamenti vanno studiati basandosi sui rapporti esistenti
in natura. Nelle arti grafiche,
esiste un oggetto chiamato ruota colore (colorwheel) che
identifica i tre colori primari
(rosso, giallo e blu) e li pone in
relazione ai loro complementi e
omologhi. Nel Web usiamo una
ruota colore differente basata
sul modello RGB che, come abbiamo visto, utilizza un colore
primario diverso: il verde al posto del giallo, mantenendo inalterati gli altri due: rosso e blu.
La ruota colore del Web, alla
pari di quella tradizionale, definisce una serie di relazioni specifiche tra i diversi colori al fine
di ottenere precisi effetti di armonia e di contrasto. Ogni colore primario ha un colore
complementare che si trova
nella posizione immediatamente opposta sulla ruota. La combinazione dei due produce un
forte impatto visuale, pur mantenendo l'armonia dell'insieme.
Il colore complementare del
blu ad esempio è il giallo, men-
L’
51/88
tre il colore complementare del
rosso è il ciano (azzurro), infine il colore complementare del
verde è il violetto.
Se invece volete realizzare
un effetto meno contrastato
potete scegliere colori analoghi che si trovino immediatamente a fianco del colore di riferimento scelto. Nel caso del
giallo i colori analoghi sono l'arancione e il verde chiaro, per
il blu sono il blu chiaro e il viola, eccetera.
Esistono diverse altre combinazioni per le quali vi rimandiamo all'articolo Color Harmony pubblicato sul sito
http://builder.cnet.com, quel
che conta è ricordare che i colori vanno abbinati in modo armonico seguendo regole ben
precise. La scelta del colore di
riferimento, poi, è importante
per stabilire la natura del sito.
Avrete un effetto caldo usando
i colori del fuoco (rosso, arancione) oppure freddo usando i
colori dell'acqua e dell'aria (blu
e verde). Per un'analisi completa delle armonie cromatiche
rimandiamo al testo Il colore
nel Web di Molly E. Holzschlag,
edito da Apogeo.
Questa è un riproduzione della ruota
colore per il Web. Rispetto alla ruota
colore tradizionale, vediamo che il
giallo è stato sostituito dal verde
come colore primario, mentre
rimangono invariati gli altri due: blu e
rosso. Combinando i tre colori primari
in diverse percentuali si ottengono
tutti gli altri colori. La ruota serve per
scegliere accostamenti armonici.
Nell'esempio vediamo che il rosso
sta bene con l'azzurro che è il colore
complementare oppure con l'arancio
e il violetto che sono analoghi.
Si possono anche combinare il rosso
e i due colori che sono di fianco
all'azzurro (blu chiaro e il la banda
più scura del verde), i cosiddetti
complementari separati
L'utility SLUGS, da utilizzare in
abbinamento all'editor HTML-Kit che
abbiamo presentato all'inizio di
questo corso, vi guida nella selezione
dei colori armonici.
Basta selezionare il colore di
riferimento, che compare al centro,
per vedere il colore complementare
(inverse), gli analoghi (near), gli split
complementari e la triade
(altri due colori che sono equidistanti
sulla ruota rispetto a quello di
riferimento).
L'utility è disponibile al seguente
indirizzo:
http://www.chamisplace.com/asp/
hkp.asp?f=cmslugs
nel caso di Flash è spesso integrato nelle versioni più moderne dei principali browser. Esistono soluzioni di animazione
ancora più complesse che prevedono l'inserimento di filmati
o di sequenze prodotte con altri software.
Ciascuna di questi richiede
tuttavia speciali plug-in oppure
veri e propri applicativi, non disponibili a tutti i navigatori
benché gratuiti.
L'ultima novità in materia di
grafica vettoriale per il Web è il
formato SVG (Scalable Vector
Graphics) che costituisce uno
standard nato con il nuovo linguaggio XML e che richiede anch'esso l'impiego di plug-in gratuiti, ma che in prospettiva diventerà parte integrante dei
browser. SVG sarà probabilmente uno dei formati di riferimento del futuro, ma per il momento la scelta per le animazioni sul Web si concentra su
GIF, e la relativa evoluzione
PNG, e su Flash.
3 Grafica per il Web
opo il testo, la grafica costituisce il contenuto più
comune per un un sito
Web. Nella scorsa lezione abbiamo visto come inserire e allineare un'immagine all'interno di una pagina HTML, ora vediamo come costruirne una al
fine di ottenere il miglior risultato possibile. La prima cosa
da capire è che l'immagine che
voi vedete sul vostro schermo
non sarà mai esattamente
quella che il navigatore guarderà sul proprio computer. Le
differenze tra i browser, tra le
diverse famiglie di computer e
anche semplicemente nella calibrazione dei due monitor
produrranno variazioni anche
molto vistose. Di conseguenza
non c'è scopo nel puntare alla
miglior qualità possibile e conviene semmai cercare di ridurre al massimo il peso dell'immagine pur conservandone i
contenuti. Una simile operazione prende il nome di "ottimizzazione" e costituisce
un'arte di per sé stessa. Essa
combina la scelta del formato
di memorizzazione più adatto
al tipo d'immagine e la definizione della dimensione, della
qualità e del numero di colori
presenti al suo interno.
Il primo passo consiste nel
conoscere lo strumento che
dovrà visualizzare la nostra
immagine, vale a dire il personal computer. Esiste una prima
differenza fondamentale tra le
diverse famiglie: il Macintosh
tende a mostrare le immagini
più chiare rispetto alle macchine Windows. Perciò se lavorate su un Macintosh dovreste cercare di generare immagini che sembrino un po' più
D
Queste due immagini sono composte da
colori pieni e perciò si adattano
particolarmente alla compressione in
formato GIF. Quest'ultima codifica le
variazioni di colore registrate su ciascuna
riga orizzontale, dunque vediamo che la
seconda immagine, con le righe
orizzontali, viene compressa molto
meglio della prima, pur avendo identiche
dimensioni e numero di colori
52/88
chiare del dovuto, così da apparire accettabili sullo schermo di un PC. Viceversa, cercate di produrre immagini che
sembrino un po' più scure del
dovuto sullo schermo del PC
per fare in modo che non appaiano slavate quando visualizzate su un Mac. Attenzione
anche alle differenze tra Linux
e Windows che, per quanto
meno evidenti, comunque esistono.
Inoltre, con la diffusione
progressiva dei monitor LCD e
dei notebook, in aggiunta ai
comuni tubi a raggi catodici,
dovete mettere anche in conto
sostanziali difformità nella resa dei colori a seconda del tipo
di display usato dal navigatore. Già era difficile garantire
una ragionevole uniformità tra
CRT di marca e tipo diverso;
ora con gli LCD le differenze
tra modelli diventano macroscopiche. Pertanto, nel creare
immagini da zero, bisogna evitare accostamenti di colori
troppo vicini tra loro, con
scarso contrasto, perché potrebbero sparire completamente sul monitor di qualcun
altro rendendo l'immagine del
tutto indistinguibile e bisogna
anche prepararsi a condurre
test periodici su macchine diverse.
ne del risultato. È bene salvare
la copia di dimensioni ridotte
separatamente perché non
sarà più possibile tornare alla
risoluzione originale compiendo il percorso inverso. Infatti, i
programmi di fotoritocco se la
cavano benissimo nel togliere
informazioni per rimpicciolire,
ma una volta che le hanno eliminate queste non possono essere ricostruite se non mediante formule matematiche
che sintetizzano i punti mancanti, ma che producono un effetto finale posticcio. Mantenere una copia dell'originale
serve anche per poter realizzare diverse varianti della stessa immagine partendo sempre
dalla situazione migliore. Infatti, se aveste deciso di usare il
comunissimo formato JPEG,
l'elaborazione e il salvataggio
continui della stessa immagine
ne ridurranno progressivamente la qualità. Il difetto di
questo formato è di perdere
informazioni ogni volta che si
salva l'immagine, anche se non
si eliminano punti o non la si
modifica in alcun modo. Dunque la scelta e la corretta gestione del formato costituisce
un passo fondamentale nella
preparazione di elementi grafici per il Web.
L'eclettico GIF
La risoluzione corretta
Lo schermo di un computer
visualizza tipicamente 72 punti per pollice, mentre la gran
parte delle immagini predisposte per la stampa su carta ha
una risoluzione di 300 punti
per pollice. Ciò significa che, a
parità di grandezza visiva, il file visualizzato sullo schermo
sarà di quattro volte più piccolo rispetto a quello inviato alla
stampante. Una variante sul tema è rappresentata dai monitor di grandissime dimensioni
che visualizzano 96 punti per
pollice, ma di solito si tiene comunque valido il valore di 72,
lasciando che poi l'immagine si
adatti automaticamente ai vari
display.
La conversione da 300 a 72
punti viene solitamente eseguita mediante un programma
di fotoritocco che riduce il numero complessivo di pixel eseguendo in alcuni casi anche la
compressione e l'ottimizzazio-
Il Graphic Interchange Format è il più comune tra i formati per il Web. Si presta particolarmente per la codifica di
disegni e grafici, ma può essere utilizzato anche per la memorizzazione di fotografie nel
caso in cui volessimo usare
due sue peculiarità: l'animazione e l'effetto trasparenza.
Gode del supporto di tutti i
browser in circolazione, offre
una compressione molto efficace e permette anche di creare immagini con caricamento
progressivo (interfacciate) per
sveltire la visualizzazione della
pagina senza rinunciare alla
qualità finale. Inoltre la compressione offerta da GIF è di tipo lossless vale a dire che non
comporta la perdita di dati, come invece accade nel caso del
JPEG. Va comunque notato che
i programmi più moderni consentono di eseguire una compressione con perdita anche
con il formato GIF al fine di 5a lezione
ridurne le dimensioni oltre
quel che si riesce a fare agendo
sul numero di colori.
Il formato GIF comprime
l'immagine esaminando in orizzontale il contenuto di ciascuna riga e codificando qualsiasi
variazione di colore. Ciò significa che immagini con ampi
spazi di tinte unite vengono
compressi con grandissima efficienza perché quando il colore non cambia, il formato si limita a registrare il valore iniziale e il numero di pixel per
cui deve essere ripetuto. L'efficienza diminuisce al crescere
degli elementi di colore diverso che tagliano l'immagine in
verticale e precipita in presenza di sfumature di colore. Un
esempio classico per vedere
la differenza consiste nel comprimere un'immagine a strisce
verticali e confrontarla con la
stessa immagine a strisce orizzontali, su sfondo uniforme: la
seconda, pur contenendo lo
stesso numero di pixel e di colori, avrà una dimensione mol-
to inferiore perché le variazioni su ciascuna riga saranno pochissime (vedi le figure di
esempio).
Il limite importante del formato GIF sta nel fatto che può
memorizzare al massimo 256
colori per ogni immagine. Questi possono essere diversi ogni
volta e costituire un campionamento di quel che l'immagine contiene (tavolozza adattata - adaptive palette) oppure
provenire dalla tavolozza di sistema utilizzata sul particolare
computer che dovrà visualizzare l'immagine. Una terza soluzione consiste nello scegliere colori presi dalla Websafe
palette (di cui abbiamo parlato
nella scorsa lezione) che elenca i 216 colori visualizzabili
senza distorsioni sia su Macintosh sia su PC.
Una quarta soluzione, abbastanza comune nei programmi
di grafica moderni, consiste
nel costruire una tavolozza
adattata che contenga anche
colori Websafe. Il programma
esamina tutti i colori della ta-
volozza e ogni volta che ne trova uno vicino a un corrispondente colore Websafe lo sostituisce con quest'ultimo (Macromedia Fireworks MX chiama questa particolare tecnica
Websnap, Adobe Imageready
la chiama invece Selettiva). Infine abbiamo una quinta possibilità che consiste nel creare
una palette che dà priorità ai
colori che sono più facilmente
percepibili dall'occhio umano,
indipendentemente dalla frequenza con cui vengono usati
nell'immagine (palette Percettiva, usata da ImageReady e
Photoshop).
I programmi di grafica compatibili con il formato GIF solitamente propongono in automatico una palette che conservi la miglior fedeltà possibile
dell'immagine e ci permettono, poi, di "ottimizzarla" intervenendo su due parametri fondamentali: il numero di colori
nella palette e la presenza o
meno del dithering. Quest'ultimo è un sistema per simulare
le gradazioni utilizzando la
Tutti i moderni programmi di elaborazione delle immagini (qui vediamo ImageReady di
Adobe) offrono la possibilità di aprire finestre multiple in cui confrontare l'immagine
originale con le versioni ottimizzate. Qui vediamo una scritta di testo che si adatta
particolarmente bene alla codifica GIF. Nella prima finestra abbiamo una versione con
palette selettiva a 32 colori (ce ne sono 17 in totale nell'immagine) che pesa 2,52
Kbyte. Nella seconda finestra in alto abbiamo la stessa immagine ridotta però a 2
colori (il minimo) che pesa 1,386 KB, ma che perde la possibilità di utilizzare le
sfumature di arancione e di blu per realizzare l'antialiasing come vedremo. Nelle altre
due finestre abbiamo utilizzato il formato JPEG con qualità bassa (30) e bassissima. Le
dimensioni sono rispettivamente 6.06 Kbyte e 4,105 Kbyte, perciò entrambe superiori
al formato GIF e con una perdita di qualità vistosa
Qui vediamo la stessa immagine precedente, ingrandita per osservare meglio i
contorni del testo. Notiamo che la versione GIF a 2 colori mostra calettature visibili
poiché vengono a mancare gli altri colori intermedi che in questa immagine servono per
realizzare l'antialiasing. Volendo è possibile scendere a 8 bit, comprimendo l'immagine
senza perdere l'effetto aliasing in modo apprezzabile. Qui vediamo anche i brutti
risultati sul testo del formato di compressione JPEG, del tutto inadatto a elaborare
immagini con colori pieni
53/88
Un esempio di ottimizzazione d'immagine GIF realizzata mediante la riduzione dei
colori. Nella finestra in altro a sinistra vediamo un logo che richiede 32 colori per
essere rappresentato fedelmente, la dimensione dell'immagine è di 5,103 Kbyte. Nella
finestra a fianco abbiamo ridotto i colori a 16 e la dimensione è scesa a 3,178 Kbyte,
ma notiamo una leggera alterazione del petalo Magenta in basso a destra. Passiamo
alla terza finestra, in basso a sinistra. Qui siamo scesi a 8 colori con una dimensione
di 2,434 Kbyte, meno di metà del file originale. Il logo è ancora riconoscibile benché il
magenta e il rosso non siano più fedeli e la scritta abbia cambiato colore. La quarta
versione con soli 4 colori è diventata naturalmente irriconoscibile
camente se
esistono colori a sufficienza.
Il numero dei
colori è l'elemento che più
di qualsiasi altro influenza
la dimensione
L'immagine che contiene il bottone di questo esempio ha uno
finale
di
sfondo blu identico allo sfondo della pagina HTML in cui
un'immagine.
s'inserisce. In tal modo i due si fondono e il bottone si fonde
perfettamente con la pagina
Partendo da
una qualsiasi
delle numerose palette disponibili per
il formato GIF,
possiamo ridurre selettivamente il numero di colori
così da aumentare
la
Cambiando lo sfondo della pagina diventa evidente lo sfondo
compressione
dell'immagine
dell'immagicombinazione di colori già pre- ne. Di default si parte con una
senti nell'immagine. Non au- tavolozza di 256 colori, si può
menta perciò il numero di co- quindi scendere a 128, 64, 32,
lori, ma incrementa comunque eccetera, oppure prendere la
la dimensione del file aggiun- scorciatoia e chiedere al progendo informazioni che mi- gramma di generare una paletgliorano soprattutto le even- te "esatta", cioè contenente l'etuali sfumature. Un parente satto numero di colori effettiprossimo del dithering è l'an- vamente presenti nell'immagitialiasing, che consiste nell'u- ne. Le due strade non sono
sare sfumature di colore per equivalenti. La tavolozza esatattenuare i bordi netti dei ca- ta consente infatti di eliminare
ratteri tipografici di grandi di- semplicemente le posizioni
mensioni, riducendone l'effet- non occupate all'interno della
to scalettatura. Il dithering è codifica GIF e produce effetti
direttamente attivabile e disat- apprezzabili solo su immagini
tivabile nel momento in cui ge- che abbiamo già pochi colori
neriamo l'immagine, l'antialia- di partenza. La riduzione masing viene realizzato automati- nuale forzata dei colori, invece, permette
di scalare la
dimensione
del file in modo controllato, alterandone l'aspetto,
ma in modo
poco visibile.
Potete anche
bloccare particolari colori
che non debbano essere
eliminati dalla
scalatura, arrivando a dimensioni che
sono anche
meno della
Per creare un bottone con sfondo trasparente, è necessario
scegliere come colore di trasparenza lo stesso che attribuiremo
metà dell'oriallo sfondo della nostra pagina Web, in questo caso il blu. In tal
ginale di parmodo il programma di grafica costruirà le sfumature di blu
tenza.
Per
necessarie per favorire la saldatura morbida tra l'immagine e lo
semplificare
sfondo. Nell'esempio in figura vediamo che Fireworks MX ha
queste scelte,
identificato con gli scacchi grigio-bianchi la zona trasparente e
ha generato un contorno bluastro tutt'intorno al pulsante
tutti i pro-
54/88
grammi di ottimizzazione per
Web aprono due o quattro finestre che permettono di confrontare visivamente l'originale di partenza con la versione
ottimizzata, della quale possono esistere contemporaneamente quattro varianti.
GIF trasparente e animato
Due varianti preziose del
formato GIF ci permettono di
creare effetti grafici ancora più
interessanti. La prima consiste nell'attribuire la trasparenza a uno dei colori contenuti
nella palette dell'immagine.
Può trattarsi di un colore qualsiasi: una volta selezionato, diventerà trasparente e lascerà
intravedere il colore di sfondo
impostato via HTML per l'elemento HTML che contiene
l'immagine (tabella o pagina).
Questo genere di tecnica è
utile quando un'immagine deve fondersi con la pagina senza
mostrare il classico bordo rettangolare. In pratica il soggetto
dell'immagine si mescola con
la pagina. Esistono due metodi
per realizzare tale soluzione. Il
primo consiste semplicemente
nel creare uno sfondo per l'immagine che sia identico a quello della pagina. Per far questo
bisogna conoscere bene i colori HTML e la Websafe palette in
modo da non avere differenze
visibili. Prendiamo l'esempio
di un bottone che vogliamo inserire nella nostra home page.
Assegniamo al rettangolo che
lo circonda un colore identico
a quello che sarà lo sfondo della pagina. La differenza tra i
due non sarà visibile sul nostro computer e l'immagine si
fonderà perfettamente con il
resto della pagina. Di solito i
programmi di elaborazione
delle immagini per il Web consentono di definire i colori mediante gli stessi codici esadecimali che useremo per lo sfondo della pagina HTML, perciò
sarete matematicamente sicuri
del risultato.
Tuttavia, nel caso volessimo cambiare lo sfondo della
pagina, saremmo anche costretti a modificare ogni singolo bottone. Per ovviare a tale
problema e per consentire anche l'uso di sfondi colorati in
modo vario (mediante l'impiego d'immagini di background)
si assegna allo sfondo che contorna il nostro pulsante un colore trasparente. Un'operazione facilissima: basta indica 5a lezione
Qui vediamo la stessa immagine a cui è stato attribuito uno
sfondo trasparente partendo, nel primo caso, dallo sfondo
bianco originale e, nel secondo caso, da uno sfondo blu identico
a quello previsto per la pagina. Nella prima si nota un bordo
biancastro e alcuni segni spuri che disturbano l'immagine, che
sono invece assenti dal secondo
re il colore prescelto per la trasparenza e il gioco è fatto.
L'unico accorgimento da
eseguire in questa operazione
consiste nello scegliere come
colore di sfondo dell'immagine
a cui assegnare la trasparenza
il medesimo colore che pensiamo di realizzare per lo sfondo della nostra pagina. Sembra
un controsenso, ma in realtà
deriva dalla necessità pratica
di creare una transizione
uniforme tra i bordi arrotondati dell'immagine e lo sfondo
circostante. In questi punti di
transizione il programma di
elaborazione dell'immagine
crea sfumature che tendono
verso il colore circostante così
da ottenere l'effetto di antialiasing (rimozione delle scalettature e frastagliature dai bordi).
Nel caso in cui lo sfondo fosse
bianco e lo rendessimo trasparente per poi montare l'immagine che ne risulta su una pagina blu, vedremmo un contorno
Un'immagine con bordo trasparente con bordi irregolari può
essere montata su una pagina che contenga un'immagine di
background creando un effetto di sovrapposizione perfetto
biancastro e irregolare attorno
alla sagoma della figura. Partendo invece da uno sfondo
blu che venga poi reso trasparente, la saldatura sarebbe
perfetta.
L'animazione è la seconda
grande prerogativa del formato GIF e consente di riunire
due o più fotogrammi della
stessa dimensione all'interno
di un singolo file in modo da visualizzarli ciclicamente. Il formato consente di creare un ciclo ripetitivo che prosegue
senza interruzione oppure termina dopo un certo numero di
ripetizioni. Permette anche di
definire l'intervallo di tempo
tra un'immagine e la successiva. In termini pratici, la sequenza d'immagini apparirà
come un singolo elemento e
verrà inserita nella pagina
HTML come qualsiasi altra immagine. È possibile creare un
GIF animato anche con sfondo
trasparente.
L'ultima variante del GIF
consiste nel formato interlacciato, usato di rado perché appesantisce il file e di fatto aggrava il problema che vorrebbe risolvere. Un'immagine interlacciata compare sul video
un po' per volta. La tecnica è
stata sviluppata per consentire al browser di visualizzare
una versione a bassa risoluzione dell'immagine non appena sia disponibile 1/8 del suo
contenuto, proseguendo poi
con la costruzione della pagina
mentre l'immagine termina di
caricarsi e diventa perfettamente visibile. La tecnica sveltisce la navigazione di pagine
con immagini di grandi dimensioni, tuttavia è altamente
sconsigliata per eventuali elementi di navigazione grafici visto che l'utente sarebbe costretto ad aspettare prima di
riuscire a capire di che cosa si
tratti.
JPEG per le fotografie
Questa foto è riprodotta in quattro formati diversi. Il primo è l'orginale salvato in
formato TIFF, usato nel mondo dell'editoria perché comprime senza perdere
informazioni. Gli altri tre mostrano quanto si perda in qualità con GIF o PNG cercando di
comprimere un'immagine allo stesso livello ottenibile con JPEG
55/88
Il formato standard per la registrazione di immagini fotografiche è il Joint Photographic
Experts Group. Offre il massimo
rendimento in tutte le situazioni in cui esistano sfumature
di colore e passaggi tonali morbidi. Codifica fino a 16 milioni
di colori e realizza una compressione di qualità regolabile
che comporta in ogni caso la
perdita parziale delle informazioni originali, senza che tuttavia tale perdita risulti evidente
all'occhio, salvo quando si esagera con la compressione.
A differenza del formato GIF,
il JPEG richiede anche l'operazione di decompressione
quando viene visualizzato dal
browser il che aggiunge un ritardo di visualizzazione che
non dipende dal tempo di trasferimento dell'immagine. Per
tale motivo, un'immagine JPEG
sarà sempre più lenta da visualizzare di un'immagine GIF
di pari dimensioni.
La versione più recente del
formato JPEG consente di regolare il livello di compressione con variazioni di un centesimo e di creare immagini che
si visualizzano progressivamente. In quest'ultimo caso
l'immagine compare immediatamente nella pagina, anche se
sfocata, per poi perfezionarsi
non appena il browser ne completa l'elaborazione. Per le fotografie il JPEG non è secondo
a nessuno e garantisce efficienze inarrivabili dagli altri
due formati: GIF e PNG. Risulta
invece pessimo per le immagini con contorni netti e colori
pieni, regno incontrastato del
formato GIF.
PNG tuttofare
Il formato Portable Network
Graphics nasce per rimpiazzare GIF e per sostituirsi a JPEG
in alcune circostanze. Alla pari
di GIF, offre l'effetto di trasparenza, molto migliorato qualitativamente poiché realizzato
a vari livelli, e la generazione
d'immagini interlacciate la cui
visualizzazione comincia dopo
che è stato caricato 1/64 del file e non 1/8 come nel caso del
GIF.
A differenza del GIF, codifica
16 milioni di colori e non consente l'animazione. Viene utilizzato come formato interno
da alcuni programmi di elaborazione grafica, come Fireworks, poiché memorizza
anche i vari stadi intermedi di
manipolazione così da modificare il testo e altri elementi
geometrici vettoriali inseriti
nella pagina anche dopo che
l'immagine è stata salvata. Potendo arrivare a 48 bit di colore e 16 bit di scala di grigio è
possibile utilizzarlo anche in
sostituzione del JPEG, specie
quando si vuole l'effetto trasparenza per un'immagine fotografica. Nella compressione
non si perdono informazioni e
perciò è possibile elaborare e
salvare ripetutamente lo stesso file senza scadere in qualità.
Il suo difetto sta nel supporto ancora parziale offerto dai
vari browser, soprattutto alla
trasparenza variabile.
5a lezione
4 Link ipertestuali
l Web esiste grazie al concetto di ipertesto mediante il
quale diversi documenti possono essere consultati in ordine libero sfruttando collegamenti reciproci.
Questi ultimi prendono il nome di collegamenti ipertestuali e consentono di saltare da
una posizione all'altra nella
stessa pagina, da una pagina a
un'altra dello stesso sito e da
un sito all'altro. Basta cliccare
sul link e si viene immediatamente proiettati verso la destinazione richiesta.
Esistono due modi per inserire un link ipertestuale in una
pagina Web: nella forma di testo e nella forma di immagine.
In entrambi i casi, si sfrutta lo
stesso marcatore, denominato
“ancora” il quale a sua volta
esiste in due varianti.
La più comune prende il nome di “ancora sorgente” perché identifica il punto di partenza del collegamento e ne
fornisce la descrizione della
destinazione. È il classico link
che troviamo nella maggior
parte delle pagine Web e sul
quale clicchiamo per saltare a
un'altra pagina. La seconda variante è invece l'ancora di destinazione utile per marcare il
punto di arrivo di un particolare link all'interno della pagina.
La si usa solitamente per
creare link a porzioni interne
dello stesso documento oppure per fare in modo che la pagina richiamata da un link esterno si apra in corrispondenza di
un particolare paragrafo, anziché alla prima riga.
I
Ancore sorgente
Il testo o l'immagine che delimitano il "punto caldo" (hot
spot) del collegamento sorgente, cioè il punto da cliccare, sono racchiusi tra i tag <a> e </a>.
La destinazione del link è invece indicata mediante l'attributo
href (hypertext reference) che
può contenere un collegamento relativo (pertinente al sito in
cui già ci troviamo) oppure assoluto (diretto a un sito esterno). All'interno di un sito, la
gran parte dei link saranno relativi, vale a dire che indicheranno la posizione del documento di destinazione in relazione alla directory principale
del sito (collegamento relativo
56/88
completo) oppure in relazione
al documento di partenza (collegamento relativo indiretto o
diretto – vedi l'articolo Collegamenti assoluti e relativi nella seconda lezione).
Prendiamo ad esempio il collegamento che dalla home page del nostro corso porta alla
prima pagina della quinta lezione: <a href="Lezione_5/Lezione_5.htm">quinta lezione</a> vediamo che la frase
che comparirà sulla pagina è
"quinta lezione" e quando ci
cliccheremo sopra, si aprirà la
pagina "Lezione_5.htm" che si
trova nella cartelletta "Lezione_5" collocata un livello sotto
alla cartelletta in cui ci troviamo al momento. Esistono vari
altri attributi, ma il più importante è target che specifica dove inviare la nuova pagina che
stiamo per aprire. È un attributo indispensabile nei frame, come vedremo più avanti, ma torna utile anche quando vogliamo inserire un link esterno e
non vogliamo che il navigatore
abbandoni il nostro sito.
In tal caso basterà impostare
target="_blank" per far aprire al
browser una nuova finestra in
aggiunta a quella da cui siamo
partiti. In alternativa è anche
possibile aprire una nuova finestra e assegnarle un nome di
fantasia: target="pippo".
In questo caso la nuova pagina verrà aperta in una nuova
finestra denominata "pippo".
Da notare che esiste tuttavia
una differenza sostanziale tra
"_blank" e "pippo". Il primo determinerà ogni volta l'apertura
di una nuova finestra che si aggiungerà a quelle già presenti.
Il secondo invece invierà qualsiasi altra nuova pagina nella
stessa finestra, sostituendo il
contenuto esistente.
Nel caso di link applicati a
un'immagine la sintassi rimane
la stessa salvo aggiungere il
marcatore <img>. Vediamo un
esempio sempre tratto dal nostro corso: <a href="Lezione_5/Lezione_5.htm"><img
src="Lezione_5/immagine.gif"
width="100" height="100" border="0"></a> ci dice che cliccando su immagine nella pagina corrente saremo trasportati
nella pagina Lezione_5.htm che
si trova nella cartelletta Lezione_5 subito sotto di noi.
Notate che la coppia di tag
<a> e </a> racchiude completamente il marcatore <img>
con tutte le informazioni relative all'immagine.
Tra gli attributi previsti da
quest'ultimo notiamo border
che serve a bordare l'immagine
con una cornice blu per indicare che vi è associato un link
ipertestuale (prerogativa solitamente non usata per motivi
estetici).
Ancore di destinazione
Le ancore di destinazione
sono usate abbastanza di rado.
È infatti preferibile comporre
documenti brevi che puntino
ad altri documenti altrettanto
brevi che non creare pagine interminabili che necessitino di
riferimenti interni. In ogni caso,
queste ancore possono tornare
utili in alcune situazioni. La loro caratteristica essenziale
consiste nell'identificare un
punto del documento come destinazione di un collegamento
origine. Tale punto può coincidere con un qualsiasi elemento
HTML (paragrafo, titolo), con
un brano di testo (anche semplicemente uno spazio bianco)
oppure con un'immagine.
La sintassi da usare nel caso
di un elemento HTML è la seguente <h1 id="pippo">brano di
testo </a>. Si sfrutta l'attributo
id tipico delle versioni più recenti di HTML per identificare
l'elemento a cui vogliamo puntare. Nel caso invece di un brano di testo o di un'immagine, la
sintassi sarà la seguente: <a name="pippo">brano di testo o immagine</a>. In entrambi i casi
il link sarà invisibile nella finestra del browser e non sarà
cliccabile proprio perché si
tratta di una destinazione e
non di un'origine. Avrete notato che nei due esempi abbiamo
inserito un nome di fantasia
(pippo) che ci servirà per puntare all'ancora di destinazione
dall'interno di un'ancora di origine. Supponiamo di voler
creare un link in cima al documento che faccia scorrere il testo nella finestra fino a raggiungere l'ancora di destinazione. La sintassi sarebbe <a
href="#pippo">testo da cliccare</a>. Notate che abbiamo
usato il simbolo di cancelletto
prima di "pippo" per indi- 5a lezione
care che si tratta del nome
di un'ancora di destinazione.
Nel caso di un link contenuto in
un documento esterno la sintassi sarebbe: <a href="documento.html#pippo">testo da
cliccare</a>.
Il documento.html si aprirà
nella finestra del browser esattamente nel punto contrassegnato dall'ancora "pippo".
La terza variante di link ipertestuale ci consente d'identificare esplicitamente che le parole che seguono corrispondono a un indirizzo di posta elet-
tronica e che perciò, cliccandovi sopra, sarà possibile inviare un messaggio direttamente a quel destinatario.
Si tratta di una funzione molto usata per facilitare il contatto con il gestore del sito o con
altre persone.
La sintassi è la seguente: <a
href="mailto:[email protected]"
>pippo</a> quando il navigatore cliccherà su "pippo" gli si
aprirà automaticamente il programma di posta e nella casella
del destinatario comparirà l'indirizzo "[email protected]". appesantire la pagina e complicare qualsiasi successiva modifica del testo. Mediante la
frammentazione, invece, possiamo rimpiazzare con un semplice sfondo HTML tutte le por-
zioni dell'immagine che hanno
una tinta unita e che magari
contengono testo. Oggi esistono numerosi programmi con
strumenti dedicati alla frammentazione automatica delle
5 Tabelle d’immagini
bbiamo già visto che le tabelle svolgono un ruolo
essenziale per costruire il
layout di una pagina Web. Inserendo brani di testo e immagini
entro le celle di una tabella invisibile, possiamo stabilirne le
posizioni e gli allineamenti.
Un impiego particolare di
questa funzione consiste nell'usare la tabella come elemento di unione per più immagini
oppure per gli elementi frazionati di una singola immagine
più grande.
Il primo caso è il più comune
e lo troviamo nella gran parte
dei siti. Prendiamo ad esempio
il sito italiano www.film.it che
parla di novità cinematografiche. Se scomponiamo la sua
home page, vediamo che contiene una tabella che salda tra
loro testo, fotografie, pulsanti
navigazione e testatine grafiche (vedi la figura).
Il secondo caso adotta invece una tecnica di frammentazione dell'immagine sviluppata
dai progettisti Web per sveltire
il caricamento di un'immagine
di grandi dimensioni e per usare la stessa immagine come
strumento di navigazione. L'o-
A
perazione richiede una certa
dimestichezza con i programmi di grafica e prevede la suddivisione di un'immagine in
tanti riquadri di dimensione variabile, che saranno uniti mediante una tabella così da ricomporre visivamente l'immagine originale senza lasciar trasparire la tabella sottostante.
Poiché ogni singola porzione
dell'immagine sarà contenuta
in una cella indipendente e
sarà un'immagine autonoma,
diventerà possibile abbinarle
un collegamento ipertestuale
così da creare un sistema di navigazione grafico (vedi l'esempio). Potremo anche animare
alcune porzioni dell'immagine,
creando un GIF animato per
quel particolare frammento, e
creare i cosiddetti rollover, vale a dire cambiamento d'immagine al passaggio del mouse. La
frammentazione (slicing) di
un’immmagine comporta notevoli benefici anche nel regolare
il peso della pagina. Supponiamo infatti di avere una figura
che contenga ampi spazi a tinta unita con magari porzioni di
testo al loro interno. Realizzare
il tutto in grafica vorrebbe dire
In questa pagina presa dal Web (www.film.it) vediamo cerchiate in rosso e in verde
tutte le immagini che sono state unite mediante la tabella invisibile che regge l'intera
pagina. Nella parte alta di navigazione, il riquadro nero, le immagini si mescolano con
lo sfondo della cella sembrando un tutt'uno
57/88
Qui vediamo Fireworks
MX usato per
suddividere una foto in
porzioni che andranno a
riempire altrettante
celle di una tabella che
viene generata
automaticamente dal
programma
Ecco la tabella
visualizzata all'interno
di Dreamweaver MX.
Notiamo le celle e le
singole immagini che vi
sono contenute. A
ciascuna possiamo
assegnare un link
ipertestuale così da
creare un elemento
grafico di navigazione
Una volta visualizzata
nel browser, l'immagine
sembra completamente
ricomposta e la tabella
sottostante sarà
invisibile. Tuttavia se
porteremo il cursore
sulle diverse porzioni
vedremo che
contengono link
ipertestuali attivi
5a lezione
immagini, in particolare Photoshop, ImageReady e Fireworks
MX. È sufficiente posizionare le
guide di taglio per identificare
le varie porzioni e in alcuni casi è anche possibile assegnare,
già dall'interno del programma
di grafica, l'effetto rollover e generare automaticamente la tabella HTML finale.
Ottimizziamo l'immagine già elaborata prima, definendo altre due porzioni di taglio (slicing) che trasformiamo in aree HTML visto
che hanno uno sfondo bianco tinta unita che può essere facilmente riprodotto mediante i colori di sfondo della tabella. Durante la
fase di esportazione, Fireworks MX genera automaticamente la tabella finale
Nella tabella finale vediamo che sono
presenti due celle vuote con sfondo
bianco che sostituiscono due porzioni
dell'immagine contenute nella versione
precedente.
Con questo semplice accorgimento,
la dimensione complessiva della pagina è
passata da 66 a 54 Kbyte. Disponendo
d'immagini con porzioni più ampie di
colore uniforme è chiaramente possibile
recuperare più spazio
6 Mappe immagine
bbiamo visto che un'immagine può essere frazionata in blocchi così da far
corrispondere a ciascun blocco un link ipertestuale e creare
un sistema di navigazione grafico. L'unione dei vari blocchi
in modo da riprodurre visivamente l'immagine originale sulla pagina Web richiede l'impiego di una tabella di layout. Il sistema è tuttavia complesso,
trascina con sé tutte le imprevedibilità delle tabelle e non si
presta a layout complessi, magari di forma astratta.
Esiste un'alternativa che
consiste nell'assegnare all'immagine che dovrà fungere da
elemento di navigazione una
serie di coordinate che identificano aree cliccabili.
A ciascuna di tali aree, poi,
attribuiremo un link ipertestuale. In pratica tracciamo sull'immagine una mappa invisibile, indicando le coordinate in
pixel dei vertici delle varie forme, calcolati partendo dall'angolo superiore sinistro dell'immagine.
Calcolare le coordinate a mano sarebbe un'impresa non da
poco, ma fortunatamente tutti i
principali editor HTML visuali
prevedono strumenti che semplificano moltissimo questa
operazione. Basta tracciare sulla figura i contorni delle varie
zone e il programma calcolerà
tutte le coordinate relative producendo anche il codice HMTL
necessario per inserire la map-
A
58/88
pa immagine (image map) nella
pagina. Le zone possono avere
tre forme: circolare, rettangolare o poligonale.
Le mappe immagine possono essere di due tipi: il primo,
che è anche il più comune,
prende il nome di mappa immagine lato client (client side
imagemap) e memorizza tutte
le informazioni relative alla
mappa all'interno della pagina
HTML che contiene l'immagine. Ciò consente al browser di
fornire informazioni sui link associati a ciascuna zona e costituisce il metodo di mappatura
raccomandato dalle specifiche
HTML 4.01.
Il secondo metodo, usato in
origine, prendeva il nome di
mappe immagine lato server e
depositava le coordinate sul
server che ospitava il sito, lasciando al server medesimo il
compito d'interpretare l'azione
dell'utente sulla mappa, restituendo l'indirizzo di link corretto. Oltre a essere molto più
complicate da realizzare delle
mappe lato client, le server side imagemap presentavano
anche lo svantaggio di funzionare in modo diverso a seconda del server impiegato e di richiedere continue connessioni al server.
Per aggiungere una mappa a
un'immagine esistente si usa il
parametro usemap="nome_
mappa" all'interno del tag
<img> che identifica l'immagine
stessa. Il valore nome_mappa
punta a una mappa identificata
dal
tag
<map
name=
"nome_mappa"> che contiene
tutte le coordinate delle zone
cliccabili (hot spot).
A ciascuna di queste associamo, poi, un link ipertestuale
in modo tale da trasformare
l'immagine in un elemento di
navigazione.
Ecco il codice HTML
per generare la
mappa immagine
vista prima
Qui vediamo un'immagine a cui sono state abbinate tre zone
cliccabili mediante la creazione di una mappa. Riconosciamo
le tre forme consentite: rettangolo, cerchio e poligono
6a lezione
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, semi-compilati ed interpretati.
Nel caso dei linguaggi compilati, il codice sorgente (ossia il
file testuale contenente le istruzioni che devono essere eseguite da parte del personal
computer) viene “impacchettato” sotto forma di un file eseguibile. I sorgenti vengono “tradotti” in codice macchina,
comprensibile al personal
computer, mediante l’utilizzo
I
dei cosiddetti compilatori. Ciò
comporta che un programma
“trasformato” in codice macchina può funzionare solo ed
esclusivamente in un particolare ambiente hardware-software.
Tra i linguaggi semi-compilati, citiamo Java: nato per affiancare l’HTML, permette lo sviluppo e l’utilizzo di applicazioni indipendenti dalla piattaforma. Ciò significa che Java è indipendente dalla specifica piattaforma hardware-software: il
programma Java viene compi-
lato in Java Bytecode quindi interpretato ed eseguito dalla
speciale Java Virtual Machine
(ne esistono versioni per tutte
le piattaforme hardware-software in circolazione).
La terza categoria di linguaggi di programmazione è
composta dai linguaggi interpretati: in questo caso, il codice
sorgente viene proposto in
chiaro, senza alcun tipo di codifica: sta al browser Internet
interpretarlo ed eseguire le
istruzioni elencate.
I linguaggi interpretati pos-
sono quindi essere considerati
come una sorta di “estensione”
dell’HTML. Come avrete avuto
modo di apprendere nelle lezioni precedenti del nostro corso, l’HTML non è un linguaggio
di programmazione vero e proprio (nonostante sia spesso, in
maniera colloquiale, erroneamente definito come tale).
L’HTML è un linguaggio di definizione della pagina che permette di impostare la posizione
di testo ed immagini in una pagina Web, di posizionare tabelle, frame, liste puntate e nume-
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. 70
(disponibile integralmente
sul CD)
• Progettare un sito statico
• Progettare la pagina
• Pagine HTML e marcatori
• Strutturare i contenuti della pagina
• Adobe GoLive 6.0
• Spiegazione dei tag HTML per una pagina
vergine
• Esercizi su come creare una pagina
vergine e su come progettare un sito
Lezione 3:
Modelli di pagina e tabelle
(disponibile integralmente sul CD)
• La tabella come elemento strutturale
• Progettare layout fluidi e statici
• Costruire template con le tabelle
di layout
• NamoWeb Editor5: per siti statici
59/88
professionali
• Dimensionare tabelle e celle fluide,
dimensionare tabelle con celle miste,
allineamento spontaneo delle tabelle
consecutive
• Template con struttura complessa
• Template con tabelle nidificate
• Esercizi
Lezione 4:
HTML 4.01 e CSS
(disponibile integralmente sul CD)
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font
• I marcatori per formattare il testo
• Gestire gli spazi nel testo
• CSS e HTML 4.01
• Cosa si può fare con i fogli stile
• Quattro tipi di CSS
• I colori del Web
• Gestire le immagini
• Esercizi
• 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
6a lezione
rate e così via, oltre a stabilire
le proprietà caratteristiche
(ampiezza, colore, allineamento) di ciascun elemento.
Fatta eccezione per i form,
l’HTML non ha in sé né strutture in grado di interagire con l’utente né strutture decisionali.
L’HTML, insomma, è completamente statico.
Con questa lezione del nostro corso, ci proponiamo di
aggiungere un altro importante
tassello alle nostre conoscenze: presenteremo JavaScript e
DHTML.
JavaScript può essere considerato come il complemento di
HTML. È un linguaggio interpretato ed è un linguaggio di
scripting. JavaScript è semplice perché si basa su un numero
ristretto di oggetti di programmazione, tuttavia il suo utilizzo
potrebbe non risultare indicato
per lo svolgimento delle operazioni più complesse: procedure
all’apparenza assai semplici,
potrebbero infatti implicare lo
sviluppo di script piuttosto
complicati.
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à.
Tutti i bug e le “falle” di sicurezza di JavaScript sono stati
scoperti e risolti sin dall’uscita
delle prime versioni.
Tra le caratteristiche principali abbiamo già messo in luce
come il codice sia in chiaro,
ossia visibile da parte di
chiunque, semplicemente ser-
vendosi della funzione Visualizza l’HTML del browser, desideri di consultare il codice
HTML della pagina Web che
sta visitando.
Il codice JavaScript, inoltre,
viene eseguito sul client, ossia
sul personal computer che sta
visitando un determinato sito
Internet. Si tratta di un aspetto
importante che deve essere tenuto a mente: altri linguaggi di
programmazione vengono detti “lato server” perché, ad ogni
richiesta di connessione da
parte di un personal computer
(client), il server esegue le azioni previste dal programmatore
e comunica al computer client
(e quindi al suo browser Internet) il responso.
Il codice JavaScript, invece,
non viene interpretato ed eseguito sul server ma viene inviato – così com’è – al client: penserà, quindi, il browser Internet
(per esempio Internet Explorer) ad interpretarlo e ad eseguire le istruzioni specificate.
Il codice di uno script JavaScript deve essere quindi scaricato completamente da parte
del browser installato sul personal computer client, prima di
poter essere eseguito.
In questo modo, JavaScript
dispensa il server 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.
È bene, quindi, non realizzare in JavaScript, script troppo
complessi, che richiedano, da
parte dei client, elevati tempi
di elaborazione.
2 La programmazione orientata agli oggetti
i sente sempre più spesso
parlare di programmazione orientata agli oggetti
(in inglese OOP, Object Oriented Programming). Pochi ne conoscono, però, il reale significato. Per far luce sull’argomento è sufficiente pensare un programma come un insieme di
oggetti (oggetti software) che
cooperano tra loro.
Ogni oggetto è in grado di
eseguire azioni particolari che
vengono effettuate solo quando richiesto da un altro oggetto
software. Pensate ad un televisore: si tratta di uno strumento
che, per esempio, sa accendersi, sa sintonizzarsi su canali
specifici, sa spegnersi. Ogni
azione è però richiesta esplicitamente da parte dell’utente,
servendosi di un altro oggetto
(il telecomando).
In pratica, è il telecomando
che invia al televisore un messaggio comunicandogli quale
azione deve essere intrapresa.
Il televisore poi è in grado di
conoscere il suo stato attuale
ossia le proprie proprietà (il
S
60/88
televisore è acceso o spento?
Su quale canale è sintonizzato?). Analogamente, anche gli
oggetti software dialogano tra
loro per mezzo di messaggi ed
ogni oggetto è caratterizzato
da un insieme di proprietà che
ne descrivono lo stato.
I linguaggi di programmazione più moderni fanno uso degli
oggetti software per rendere la
scrittura dei programmi più
semplice e intuitiva. Non è richiesta, infatti, al programmatore la conoscenza sul funzionamento “interno” 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, ossia i messaggi
che possono essere inviati e
l’effetto di ogni singolo messaggio (semantica).
Semplificando molto, provate a pensare ad un ipotetico oggetto software chiamato “calcola distanze”: tale oggetto è in
grado di acquisire il nome di
due città e di calcolare la distanza tra di esse. Possiamo
supporre che tale oggetto
software preveda l’invio di due
messaggi: il primo per richiedere l’acquisizione dei nomi
delle città da parte dell’utilizzatore del programma, il secondo per richiedere il calcolo
della distanza tra le due città
specificate. Le proprietà dell’oggetto saranno essenzialmente due: la prima permetterà di avere informazioni sul
nome della prima città inserita;
la seconda proprietà sul nome
della seconda città. I valori di
ogni proprietà sono memorizzati in appositi contenitori
(porzioni della memoria) denominati variabili. Ciascun oggetto software è poi caratterizzato da alcuni metodi: essi descrivono le azioni che l’oggetto
deve compiere non appena riceve un messaggio specifico.
La programmazione orientata agli oggetti è, quindi, una
tecnica di programmazione
che permette di semplificare
notevolmente alcuni concetti
che riguardano lo sviluppo di
programmi, come vedremo più
avanti.
Come inserire uno script
in una pagina Web
Nelle precedenti puntate del
nostro corso abbiamo avuto
modo di familiarizzare con numerosi tag (o marcatori)
HTML. Ne aggiungiamo un altro: <SCRIPT> e </SCRIPT> consentono di delimitare il codice
JavaScript e quello proprio di
altri linguaggi di scripting.
Nella pratica, vanno utilizzati i tag seguenti:
<SCRIPT
Language=“Javascript”><!-//--></SCRIPT>
Com’è facile notare, all’interno della tag <SCRIPT> è sempre
bene specificare con quale linguaggio è stato realizzato lo
script. Qualora si indichi anche
la versione di JavaScript, lo
script verrà interpretato ed
eseguito solo dai browser che
la supportano. Ad esempio, il
codice contenuto all’interno
delle tag che seguono verrà in- 6a lezione
terpretato solo da Internet Ex-
plorer 4.0 o Netscape 4.0 e versioni successive:
<SCRIPT
Language=“Javascript1.2”><!-//--></SCRIPT>
Omettendo l’indicazione della versione, il codice verrà processato da tutti i browser.
In alternativa, è possibile utilizzare il tag <script type=
“text/javascript”> che consente, egualmente, di definire JavaScript come linguaggio di
scripting.
Il codice JavaScript può essere inserito direttamente all’interno di una pagina Web oppure in un file esterno. Tale file
dovrà poi essere opportunamente richiamato dal corpo
della pagina HTML.
Se si vuole inserire lo script
nella pagina HTML, si deve tenere presente che questo può
essere collocato all’interno delle tag <HEAD> e </HEAD> (ovvero nell’intestazione della pagina Web), oppure tra le tag
<BODY> e </BODY> (il corpo
vero e proprio della pagina
HTML). È importante ricordare
che gli script vengono eseguiti
in maniera sequenziale, uno
dopo l’altro, a seconda della loro posizione all’interno del codice HTML della pagina Web. In
particolare, gli script inseriti
nell’intestazione tra le tag
<HEAD> e </HEAD> vengono
eseguiti per primi.
I browser Internet
e gli script
Abbiamo già evidenziato come tutti i browser, soprattutto
quelli di ultima generazione,
siano in grado di processare i
JavaScript, qualsiasi sia la loro
versione. Ma cosa succede se
la pagina Web facente uso di JavaScript viene visualizzata con
un browser obsoleto? Di solito
o il codice non viene eseguito o
si presentano problemi. Qualora, poi, l’esecuzione degli
script fosse disattivata o si
usassero browser che non supportano JavaScript, il codice
presente nella pagina Web non
verrebbe eseguito. Spesso si ricorre, quindi, all’uso della tag
<NOSCRIPT></NOSCRIPT> che
permette di specificare il comportamento che il browser deve tenere qualora non fosse
possibile interpretare lo script.
Spesso si usa quindi il costrutto che segue:
<NOSCRIPT>
<META HTTP-EQUIV REFRESH
CONTENT=“0;
URL=nomedellapagina.html”>
</NOSCRIPT>
In pratica, il tag <META REFRESH> ordina al browser, qualora questo non sia in grado di
riconoscere adeguatamente lo
script, di passare immediatamente alla visualizzazione della pagina HTML “nomedellapagina.html”. Il buon programmatore avrà cura di inserire, in tale pagina, una versione del sito
visualizzabile con i browser più
vetusti.
Come regola generale, vi
suggeriamo di racchiudere
sempre il codice JavaScript tra
le tag <!-- e --> che, in HTML, indicano i commenti.
Questo perché alcuni browser (quelli più vecchi) qualora
non riconoscano il codice JavaScript, potrebbero, anziché
eseguirlo, visualizzarlo sulla
pagina Web (cosa che va assolutamente evitata). Delimitando, invece, gli script tra le tag
<!-- e -->, i browser più vecchi,
non in grado di riconoscere JavaScript, ne interpreteranno il
codice semplicemente come
commenti HTML (che non de-
vono essere stampati sulla pagina Web).
Alcuni browser, soprattutto
le versioni più datate di Netscape, hanno difficoltà nel gestire il segno > di fine commento: è bene perciò anteporre una
doppia barra // (commento JavaScript) prima del tag -->.
Create una nuova pagina
HTML, servendovi di uno degli
editor presentati nelle precedenti lezioni del corso (potete
servirvi semplicemente del
Blocco Note di Windows o di un
editor testuale), quindi copiate
al suo interno quanto segue:
<html>
<head>
</head>
<body>
<SCRIPT
Language=“Javascript”><!-document.write(“Benvenuto nel
mondo di JavaScript!”);
alert(’Questo è il tuo primo
script’);
//--></SCRIPT>
</body>
</html>
In questo script potete facilmente notare tutto quanto è
stato sinora introdotto.
È possibile notare come, in
questo caso, il codice JavaScript sia stato inserito all’interno della tag <BODY> (corpo
della pagina HTML). È stato fatto uso delle tag <!-- e --> (per impedire ai browser più datati la
visualizzazione dello script sulla pagina Web) e della doppia
barra finale (//).
Le righe evidenziate in rosso
sono istruzioni.
In JavaScript ogni istruzione
ha termine con il salto di riga
(il ritorno a capo) oppure con il
punto e virgola (;).
Consigliamo di usare sempre
il punto e virgola: vi consentirà
di identificare più istruzioni che
stanno sulla stessa riga.
Eseguire uno script esterno
Chi sviluppa una pagina Web
che fa uso di JavaScript, può
decidere se inserire gli script
direttamente nella pagina
HTML oppure se utilizzare file
esterni.
La sintassi da usare è la seguente:
<SCRIPT
SRC=“nomedelfilejavascript.js”></
SCRIPT>
dove il file “nomedelfilejavascript.js” è il file contenente il
codice JavaScript e che deve
essere richiamato.
I vantaggi che derivano dall’uso di file esterni sono enormi: se si prevede di utilizzare lo
stesso codice JavaScript in più
pagine HTML, si potrà semplicemente far riferimento al file
esterno che lo contiene, senza
doverlo riscrivere ogni volta.
Supponiamo, ad esempio, che
dieci pagine HTML del sito Web
che state realizzando debbano
impiegare lo stesso codice JavaScript: basterà memorizzare
lo script in un unico file di testo (ad esempio ilmioscript.js)
e richiamarlo da ciascuna pagina servendosi della tag
SCRIPT SRC.
Ricorrendo a file esterni si
attribuisce al sito che si sta
realizzando una struttura modulare che porterà ad indubbi
vantaggi in termini di spazio
occupato (le pagine Web saranno più snelle e compatte) e
faciliterà eventuali modifiche
del codice JavaScript (si dovrà
intervenire solo sul file esterno e non sulla struttura di ciascuna pagina HTML), con
grossi vantaggi in termini di
tempo.
3 Oggetti e priorità
icollegandoci con quanto
introdotto poco fa circa la
programmazione orientata agli oggetti, passiamo ad illustrare, nella pratica, il significato di oggetti e proprietà.
Una pagina Web, visualizzata
all’interno del browser Internet, è considerabile come un
oggetto. Ogni tabella, pulsante,
immagine, form, link, presente
R
61/88
nella vostra pagina Web è un
oggetto. Ogni oggetto dispone
di un certo numero di proprietà che lo caratterizzano in
modo univoco.
Le informazioni per la visualizzazione del colore dello sfondo della pagina HTML sono,
per esempio, memorizzate nella proprietà bgcolor dell’oggetto document.
Utilizzando l’istruzione JavaScript document.bgcolor=“red”
alla vostra pagina Web sarà assegnato, come colore di sfondo, il rosso.
Il contenuto di un ipotetico
campo denominato username,
facente parte del form miologin, può essere recuperato utilizzando la proprietà value: document.miologin.username.va-
lue. Notare che la proprietà value si riferisce all’oggetto username (campo testo) che è parte dell’oggetto miologin (form),
il quale, a sua volta, è contenuto nell’oggetto document (la pagina Web).
Metodi
I metodi descrivono le azioni
che l’oggetto deve compiere
6a lezione
non appena riceve un messaggio specifico. In pratica, i metodi sono le azioni che l’oggetto è in grado di compiere.
Così come una porta può essere aperta o chiusa, una lampadina accesa o spenta, gli oggetti sono in grado di compiere
molte azioni.
Write() è, per esempio, un
metodo dell’oggetto document: abbiamo già avuto modo
di fare la sua prima superficiale conoscenza con lo script dell’Esempio 1: l’istruzione document.write (“Benvenuto nel
mondo di JavaScript!”) ci ha
permesso di scrivere la frase
indicata sulla nostra pagina
Web.
L’istruzione document.open()
permette, invece, di aprire un
nuovo documento (pagina
Web).
La lista dei principali gruppi di metodi
messi a disposizione in JavaScript
• Metodi di finestra - operano sull’oggetto Window e consentono di aprire e chiudere nuove finestre
• Metodi di documento - permettono di generare “al volo” nuovi documenti (pagine HTML)
• Metodi per i form - per selezionare gli oggetti che compongono un form (ad esempio un modulo di
richiesta di informazioni), per spostare il cursore sulle caselle di testo dei forum
• Metodi relativi alla cronologia - intervengono sulla cronologia dei siti Web visitati
• Metodi di data - permettono di operare su data e ora
• Metodi di testo - per modificare le proprietà caratteristiche del testo
• Metodi matematici - le principali funzioni matematiche
• Metodi “messagebox” - per generare finestre di dialogo
Se si vuole aprire una nuova
finestra da JavaScript, è necessario - in primo luogo - fissare
un nome identificativo da attribuirle (ad esempio Miafinestra). Sarà quindi possibile
aprire la nuova finestra servendosi della seguente istru-
zione:
Miafinestra = window.open()
Il metodo window.open permette 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, posizionamento, e così via). che consente la visualizzazione di un’immagine all’interno
di una pagina Web. Analogamente, l’evento Onclick è inserito in una tag anchor <A
HREF… ed attivato non appena l’utente clicca sul link (nel
nostro esempio, viene visualizzato il messaggio “Stai per
raggiungere il sito di PC Open”
prima di indirizzare il browser
verso l’URL indicato nella tag
anchor).
Inizialmente JavaScript
metteva a disposizione del
programmatore solo pochi
eventi. Questi, inoltre, potevano essere abbinati ad un numero molto limitato di tag
HTML. Le nuove versioni di Internet Explorer hanno esteso
la possibilità d’uso degli eventi di JavaScript anche a numerose altre tag HTML mentre
Netscape, di contro, è rimasto
fedele al passato. Suggeriamo,
per questo motivo, di effettuare test di compatibilità delle proprie pagine Web sulle
varie versioni dei browser Internet.
Come abbiamo avuto modo
di apprendere, un evento può
richiamare una ed una sola
istruzione (nell’esempio precedente, sia l’evento Onmouseover che l’evento Onclick,
invocano la visualizzazione di
un messaggio d’avviso mediante l’uso dell’istruzione
alert). Accade però molto
spesso che le operazioni che
debbono essere eseguite al
verificarsi di un certo evento
siano diverse, assolutamente
non rappresentabili mediante
un’unica istruzione.
In questo caso è necessario
ricorrere all’uso delle funzioni
(handler o gestori di eventi):
si tratta di porzioni ben definite di codice che possono ricevere in ingresso dei dati da
elaborare e restituiscono in
uscita, dopo l’esecuzione delle istruzioni previste, un certo
risultato.
Nel caso in cui un evento
debba eseguire una serie di
istruzioni, tali righe di codice
vengono racchiuse in un’unica funzione, generalmente definita nell’intestazione della
pagina Web o nel corpo della
pagina HTML. L’evento farà
poi riferimento alla funzione
definita in precedenza. Ad
esempio Onclick=“mia_funzione()” invocherà, alla pressione del tasto sinistro del mouse, la funzione denominata
mia_funzione.
Un esempio concreto contribuirà a comprendere meglio il concetto:
4 Eventi e funzioni
li eventi consentono di
specificare quando - ed
in quali condizioni (per
esempio all’apertura di una
pagina Web, quando l’utente
clicca su un pulsante, quando
si muove il mouse su un determinato oggetto, e così via)
- un determinato script debba
essere eseguito.
A differenza di quanto visto
sinora, gli eventi non vengono
definiti all’interno della tag
<SCRIPT> ma vengono generalmente inseriti (a parte
qualche caso) nel codice
HTML della pagina Web.
Provate a creare una pagina
Web utilizzando il codice che
segue:
G
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT
Language=“Javascript”>
<!-alert(’Benvenuto!’);
//--></SCRIPT>
<center>
<img src=“pcopen.gif”
onmouseover=“alert(’Hai
spostato il puntatore del
mouse
sull\’immagine’)”></img>
</center>
<a href=“javascript:alert(’Hai
cliccato’)”>Clicca qui</a><br>
<a
href=“http://www.pcopen.it”
62/88
onclick=“alert(’Stai per
raggiungere il sito di PC
Open’)”>Vai al sito Web di PC
Open...</a><br>
</BODY>
</HTML>
In questo caso, il primo
script ad essere eseguito è
quello inserito immediatamente dopo l’apertura della
tag <BODY>: l’istruzione alert
(’Benvenuto!’) mostrerà al visitatore un messaggio iniziale
di benvenuto. L’esempio ci
permette di provare sul campo l’utilizzo degli eventi: a tal
proposito, ci si può subito
rendere conto di come gli
eventi JavaScript siano utilizzati all’interno del codice
HTML.
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; il secondo evento
ha luogo quando l’utente “fa
clic” con il tasto sinistro del
mouse. Nel nostro esempio,
l’evento Onmouseover viene
attivato non appena il visitatore della nostra pagina Web
sposti il puntatore del mouse
sull’immagine raffigurante il
logo di PC Open (pcopen.gif).
Si noti come l’evento JavaScript è stato inserito direttamente nella tag HTML <IMG>
<HTML>
<HEAD>
<SCRIPT
LANGUAGE=“JavaScript”>
6a lezione
<!-- Inizio del codice Javascript
function msgbox (testo) {
alert (testo) }
// - Fine del codice JavaScript
- -->
</SCRIPT>
</HEAD>
<BODY>
<p align=“center”>
<a
href=“http://www.pcopen.it”
onclick=“msgbox(’State per
visitare il sito Web di PC
Open’)”>PC Open</a><br>
<a href=“http://www.01net.it”
onclick=“msgbox(’State per
visitare 01Net, il sito Web del
gruppo editoriale Agepe rivolto
ai professionisti dell\’IT e del
Web’)”>01Net</a><br>
<a
href=“http://www.digifocus.it”
onclick=“msgbox(’State per
visitare Digifocus: tutte le
informazioni per i
professionisti dell\’
immagine.’)”>Digifocus</a><
br>
<a
href=“http://www.ilsoftware.it
” onclick=“msgbox(’State per
visitare IlSoftware.it: il sito
italiano interamente dedicato
al mondo del software.
’)”>IlSoftware.it</a><br>
</p>
</BODY>
</HTML>
In questo esempio, abbiamo definito una funzione msgbox contenente un’unica istruzione.
Tale funzione viene richiamata da parte dell’evento onclick, inserito in ogni tag <A>.
Eventi importanti
onClick
Consente il rilevamento di un clic del mouse
onDblClick
Consente il rilevamento di un doppio clic del mouse
onKeyDown
Permette il rilevamento della pressione di un tasto
onLoad
Evento attivato in fase di caricamento
della pagina Web
onMouseOut
Il puntatore del mouse si sta allontanando
da 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, inoltre,
riceve in ingresso il testo che
deve essere mostrato nella finestra d’allerta.
go, sarà sufficiente eseguire
un’operazione di assegnazione.
utente=prompt(“Inserisci il
tuo nome”,“Inserisci qui il tuo
nome”);
inizializzerà una variabile
utente, quindi vi memorizzerà
il valore specificato a destra
dell’operatore di assegnazione
(in questo caso proprio il valore stringa restituito dal metodo prompt()).
saggio di benvenuto.
La prima istruzione document.write stampa sulla pagina
Web il testo Benvenuto; la seconda inserisce nella pagina il
contenuto della variabile utente.
Sulle variabili è poi possibile eseguire tutta una serie di
operazioni.
Una delle più importanti è il
concatenamento: due o più variabili possono, cioè, essere
unite assieme.
Nell’esempio precedente
avremmo potuto usare un’unica istruzione document.write
impiegando il codice che segue:
5 Variabili e stringhe
n qualsiasi linguaggio di programmazione, le variabili
possono essere considerate
come delle scatole all’interno
delle quali è possibile immagazzinare dei dati.
Ogni variabile può memorizzare dati di un certo tipo:
numeri, stringhe (qualsiasi valore letterale), valori booleani.
Le variabili possono assumere
anche lo speciale valore “null”:
quest’ultimo si incontra spesso nella programmazione e
non rappresenta un valore
specifico.
In molti linguaggi di programmazione (per esempio Java, C, C++) le variabili devono
essere dichiarate prima di poter essere utilizzate: è quindi
indispensabile inizializzarle
specificando il loro nome e il
tipo di dati che esse andranno
a contenere.
In JavaScript la dichiarazione delle variabili non è strettamente necessaria.
Ad esempio, l’istruzione luogonascita=“Milano” provvede
automaticamente ad inizializzare una variabile (luogonascita) come stringa e a porvi,
al suo interno, il valore Milano.
Il simbolo di uguaglianza indica che stiamo effettuando un
assegnamento (stiamo associando alla variabile indicata
alla sinistra dell’uguale il valore specificato alla sua destra).
I
63/88
Va ricordato che le stringhe
(espressioni letterali) vanno
sempre racchiuse tra doppio
apice.
A tal proposito, analizzate le
seguenti due istruzioni:
luogonascita=“Milano”
luogonascita=Milano
Si tratta di due istruzioni
completamente differenti. Nel
primo caso il valore stringa
Milano viene memorizzato nella variabile luogonascita; nel
secondo caso viene memorizzato in luogonascita il valore
della variabile chiamata Milano.
Le variabili possono anche
essere inizializzate esplicitamente con la dichiarazione
var.
L’istruzione var luogonascita, per esempio, crea in memoria una variabile denominata luogonascita e le attribuisce il valore “null”.
Facciamo alcuni
esempi
Utilizziamo il metodo
prompt() per richiedere all’utente che visita la nostra pagina Web, di inserire il suo nome. La stringa di testo inserita
verrà successivamente utilizzata per visualizzare un messaggio di benvenuto.
Poiché il metodo prompt()
restituisce il testo che l’utente
immette nella finestra di dialo-
<html>
<head>
<title>Corso OpenMaster Lezione 6 - JavaScript Esempio 4</title>
</head>
<body>
<SCRIPT
Language=“Javascript”>
<!-utente=prompt(“Inserisci il tuo
nome”,“Inserisci qui il tuo
nome”);
document.write(“Benvenuto ”);
document.write(utente);
//-->
</SCRIPT>
</body>
</html>
Facendo riferimento a questo esempio, una volta memorizzato il valore stringa nella
variabile utente, tale variabile
potrà essere successivamente
usata per visualizzare il mes-
document.write(“Benvenuto
”+utente);
Il segno di addizione effettua, appunto, un concatenamento tra la stringa Benvenuto
e la variabile stringa utente.
Qualora si fosse utilizzato il
“+” tra variabili numeriche
(contenenti, cioè, un valore
numerico) avremmo ottenuto
una somma:
primo_valore=25;
secondo_valore=10;
document.write(primo_valore+secondo_valore);
In questo caso l’istruzione
document.write stampa sulla
pagina Web il valore 35, essendo primo_valore e secondo_valore due variabili numeriche. 6a lezione
6 Gli operatori in Javascript
Gli operatori si dividono in:
3. Operatori relazionali
1. operatori aritmetici
2. operatori di assegnamento
3. operatori relazionali
4. operatori logici
5. operatori su stringhe
Segnaliamo anche gli operatori sui bit (utilizzati di solito solo
per generare colori). Di seguito elenchiamo i principali operatori che JavaScript mette a disposizione del programmatore citando, per ognuno di essi, un esempio.
1. Operatori aritmetici
Operatore
+
Descrizione
Addizione
–
Sottrazione
*
Moltiplicazione
/
Divisione
%
Modulo (resto
di una divisione)
++
Incremento
(operatore unario)
Decremento
(operatore unario)
––
Esempio
x=2
x+2
x=2
5-x
x=4
x*5
15/5
5/2
5%2
10%8
10%2
x=5
x++
x=5
x––
Risultato
4
3
20
3
2.5
1
2
0
x=6
x=4
Operatore
Descrizione
Esempio
==
è uguale a
5==8 restituisce “false”
!=
non è uguale a
5!=8 restituisce “true”
>
è maggiore di
5>8 restituisce “false”
<
è minore di
5<8 restituisce “true”
>=
è maggiore o uguale a
5>=8 restituisce “false”
<=
è minore o uguale a
5<=8 restituisce “true”
Gli operatori relazioni si basano
sul concetto di “vero” e “falso”:
consentono di mettere in
relazione un valore (o una
variabile) rispetto ad un altro.
Il doppio uguale (==) permette,
ad esempio, di verificare se un
valore è uguale ad un altro (nel
caso delle variabili, se esse
ospitano lo stesso contenuto).
I valori possibili che vengono
restituiti dopo il confronto sono
4. Operatori logici
Operatore
&&
Descrizione
and
Esempio
x=6
y=3
(x < 10 && y > 1) restituisce “true”
||
or
x=6
y=3
(x==5 || y==5) restituisce “false”
!
not
x=6
y=3
x != y restituisce “true”
2. Operatori di assegnamento
Operatore
Esempio
=
+=
-=
*=
/=
%=
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
Equivale a
(stessa semantica)
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
Com’è facile notare, un’operazione di assegnamento può essere
scritta in forma compatta (cioè abbinata ad un operatore
aritmetico).
L’operatore “+=” , per esempio, somma i valori delle due variabili
indicate e memorizza il risultato all’interno della variabile di sinistra.
Nella colonna “equivale a” potete verificare come si sarebbe potuta
scrivere, in alternativa, ogni singola operazione senza ricorrere alla
forma compatta.
false (falso) oppure true (vero).
Se avessimo inizializzato in
precedenza due variabili x e y,
ponendo la prima uguale a 5
(x=5), la seconda uguale a 8
(x=8), un confronto x==y
restituirebbe false (non è vero
che il contenuto della variabile x
è uguale al contenuto della
variabile y).
Gli operatori relazioni sono tutti
binari.
Gli operatori logici sono essenziali per effettuare confronti più
complessi tra valori e/o variabili. Sono ampiamente utilizzati nelle
strutture decisionali (if…then…else).
Nel primo esempio si suppone che la variabile x contenga il valore 6,
y il valore 3 (siano state effettuate le relative operazioni di
assegnamento).
L’espressione (x<10 && y>1) restituisce il valore true perché sono
vere entrambe le condizioni indicate (è vero, cioè, che x sia minore
di 10 ed è altrettanto vero che y sia maggiore di 1).
5. Operatori su stringhe
Per quanto riguarda gli operatori
su stringhe, abbiamo già avuto
modo di presentare, in
precedenza, il “+”, utilizzato per
concatenare assieme due o più
stringhe.
Lo script seguente, ad esempio,
assegna alla variabile testo3 la
stringa “Benvenuti al corso di PC
64/88
Open”:
testo1=“Benvenuti al corso”
testo2=“di PC Open”
testo3=testo1+testo2
Per aggiungere uno spazio tra le
due variabili stringa le soluzioni
possibili sono due.
La prima consiste 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, come seconda
soluzione, si può aggiungere uno
spazio in calce alla stringa testo1
In questo modo, la variabile
testo3 contiene la stringa
“Benvenuti al corso di PC Open”.
6a lezione
Mettiamoci alla prova
1
Cimentiamoci ora con un esercizio riassuntivo un po’ più complesso.
Supponiamo di voler creare una pagina Web dalla quale si possa
richiamare una nuova finestra. Tale finestra deve possedere attributi
specifici: deve misurare 300 pixel in altezza e 300 in larghezza, deve
mostrare la data attuale, visualizzare un testo, inserire un link HTML
il cui testo può essere liberamente deciso a priori.
La nuova finestra, inoltre, deve risultare perfettamente centrata,
qualsiasi risoluzione si stia impiegando.
1. Per prima cosa, inserite nella vostra pagina Web il codice HTML
che consenta la visualizzazione di un form costituito da un’unica casella
di testo e da un pulsante.
2
2. Passiamo ora allo sviluppo della funzione che dovrà aprire la nuova
finestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>.
Poiché la funzione deve ricevere in ingresso un valore stringa, ricorriamo
all’utilizzo di una variabile messaggio.
All’interno della funzione JavaScript, dobbiamo quindi inserire una serie
di istruzioni che consentano di recuperare data ed ora attuali (nel formato
utilizzato sul personal computer client), che definiscano il contenuto
della nuova finestra e le proprietà della stessa (posizione e dimensioni).
Per quanto riguarda le informazioni relative a data ed ora impieghiamo
il codice che segue:
now = new Date();
data_ora = now.toLocaleString();
La data/ora viene recuperata con il metodo Date() quindi memorizzata
all’interno della variabile now, creata allo scopo. Il metodo
toLocaleString(), applicato alla variabile now, permette di “trasformare”
la data nel formato utilizzato sul personal computer locale (per esempio,
mercoledì 12 febbraio 2003 12.23.17).
Definiamo ora il contenuto della nuova finestra. Nella variabile contenuto
abbiamo deciso di memorizzare tutto il codice HTML che costituirà
la nuova finestra. Osservate le concatenazioni tra stringhe che abbiamo
utilizzato. In particolare, è possibile notare come il nome da attribuire
al link <A> sia generato recuperando il valore assunto dalla variabile
messaggio. Successivamente, memorizziamo in due variabili distinte
l’altezza e la larghezza che deve avere la finestra da creare quindi
calcoliamo le coordinate della finestra (in pixel) affinché questa risulti
centrata, qualunque risoluzione si stia utilizzando.
3
3. Per far questo, è necessario controllare il valore delle proprietà width
(larghezza) e height (altezza) dell’oggetto screen (schermo). Sottraendo
a tali valori, rispettivamente, la larghezza della nostra finestra e la sua
altezza, dividendo per due otterremo le coordinate in pixel che
permetteranno di centrare la finestra:
sinistra=(screen.width-larghezza)/2;
alto=(screen.height-larghezza)/2;
Se la nostra finestra deve essere alta e larga 300 pixel, alla risoluzione
800x600 pixel la variabile sinistra assumerà il valore 250, alto il valore
150; alla risoluzione 1024x768 pixel in sinistra verrà memorizzato
il valore 362, nella variabile alto il valore 234.
In ogni caso, comunque, la finestra risulterà perfettamente centrata.
Potete provare ad effettuare qualche verifica modificando la risoluzione
dello schermo di Windows (Pannello di controllo | Schermo).
Le istruzioni successive permettono di creare la nuova finestra:
newwindow=window.open(“”,“miafinestra”,
“toolbar=0,status=0,menubar=0,scrollbars=0,resizable=0,width=”+la
rghezza+“,height=”+altezza+“,top=”+alto+“,left=”+sinistra);
newwindow.document.writeln(data_ora);
newwindow.document.write(contenuto);
L’oggetto “nuova finestra” è chiamato newwindow. La terza opzione
permette di specificare tutte le caratteristiche della finestra.
Le successive istruzioni - document.writeln(data_ora) e
document.write(contenuto) - inseriscono nella pagina Web della nuova
finestra, il contenuto della variabile data_ora e il codice HTML presente
in contenuto.
L’esempio è consultabile su CD utilizzando il file 05_riassuntivo.html
oppure online all’indirizzo seguente:
http://www.ilsoftware.it/libreria/js/jstest.asp?f=05_riassuntivo
65/88
6a lezione
gni giorno noi ci troviamo
a compiere delle scelte:
“se facciamo una cosa allora le conseguenze sono....” è
il nostro ragionamento. L’equivalente in JavaScript è l’istruzione condizionale If...Else che
può essere efficacemente tradotta in questi termini: Se...Allora.
La forma più semplice con
cui si può presentare l’istruzione condizionale è la seguente:
if (espressione) istruzione1
[else istruzione2]...
espressione può assumere
solamente i valori true (vero)
oppure false (falso): è quindi
“booleana”. Qualora tale
espressione assuma il valore
true, verrà eseguita istruzione1
altrimenti istruzione2 (l’istruzione che segue l’else). (Sul CD
ROM l’esempio 06_if_then.html
mostra l’utilizzo del costrutto
if…else).
Recuperiamo data e ora attuali servendoci del metodo
Date(); usiamo quindi il metodo GetHours(), applicato alla
variabile data d, per memorizzare l’ora corrente.
O
<html>
<body>
<script type=“text/javascript”>
var d = new Date()
var time = d.getHours()
if (time < 12)
{
document.write(“<b>Buongiorn
o!</b>”)
}
66/88
else
{
document.write(“<b>Buonasera
!</b>”)
}
</script>
<p>Questo esempio mostra
l’utilizzo del costrutto
if...else</p>
<p>Prima delle ore 12 lo script
visualizza il messaggio
“Buongiorno!”,
dopo le 12 “Buonasera!”.</p>
</body></html>
Nel costrutto if...else, inseriamo come condizione l’espressione time < 12.
In questo modo, qualora l’ora attuale sia precedente a
mezzogiorno, verrà stampata,
sulla pagina HTML, l’esclamazione Buongiorno!, altrimenti
Buonasera!.
Proviamo ora a scrivere uno
script che ci consenta di presentare, all’utente che visita il
nostro sito Web, o il sito ufficiale di PC Open (www.pcopen.it) o Digifocus (www.digifocus.it).
La scelta dovrà essere operata in modo del tutto casuale
(il link di PC Open o quello di
Digifocus avranno il 50% di
possibilità di venire mostrati).
Il metodo Random(), applicato all’oggetto Math, consente
di generare un numero casuale
compreso tra 0 ed 1 (decimali
compresi): ciò significa che l’istruzione Math.random() genera numeri casuali del tipo
4,345125 oppure 5,899271236 e
così via. Memorizziamo il numero prodotto in una variabile:
nel nostro esempio l’abbiamo
denominata r.
Utilizziamo, quindi, l’istruzione if…then imponendo, come condizione, r>0.5. In pratica
se il numero generato è maggiore di 0.5, viene proposto il
link di PC Open; altrimenti
quello di Digifocus.
<html>
<body>
<script type=“text/javascript”>
var r=Math.random()
if (r>0.5)
{
document.write(“<a
href=’http://www.pcopen.it’>Vi
sita www.pcopen.it</a>”)
}
else
{
document.write(“<a
href=’http://www.digifocus.it’>
Visita www.digifocus.it</a>”)
}
</script>
</body>
</html>
Qualora si debbano effettuare numerosi test su un’unica
espressione, conviene ricorrere all’utilizzo dell’istruzione
Switch.
Il valore assunto dall’espressione viene infatti confrontato,
in questo caso, con una serie di
possibilità. Anziché uno solo,
possono essere eseguiti, in se-
quenza, numerosi confronti.
Analizziamo un possibile utilizzo dell’istruzione condizionale Switch con un esempio
pratico.
Supponiamo di voler accogliere l’utente che visita il nostro sito Web con una frase spiritosa, scelta - in modo del tutto casuale - tra dieci diverse
possibilità. Come nel caso precedente, anche qui possiamo
ricorrere all’utilizzo del metodo Math.random().
Per ottenere un numero intero da 0 a 9 (le frasi da proporre sono dieci) utilizziamo
un semplice trucco: moltiplichiamo, dapprima, per 10 il
contenuto della variabile r (generato da Math.random())
quindi utilizziamo il metodo
floor per approssimare, all’intero più vicino, il numero ottenuto. Saremo certi, così, di
avere - come contenuto della
variabile r - un intero compreso
tra 0 e 9. Il valore assunto dalla
variabile r viene quindi confrontato, dall’istruzione switch
(r) con una serie di possibilità
(indicate con i vari case).
L’istruzione break consente
allo script di uscire dal ciclo di
switch: se fosse mancante, JavaScript continuerebbe a confrontare il valore. È possibile inserire, opzionalmente, 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-
6a lezione
rie istruzioni case (nel nostro
esempio default non è necessario). Va ricordato che sia nelle espressioni if…then che in
switch, l’operatore di uguaglianza che va utilizzano è ==
(come già visto in precedenza)
e non = (l’operatore di assegnamento). Si tratta di un errore molto comune che spesso
provoca comportamenti inattesi (JavaScript si limita ad
ignorare l’espressione).
Strutture iterattive
Una delle più famose strutture iterative, comune a molti
altri linguaggi di programmazione, è il ciclo for.
Tale istruzione è detta appunto “ciclo” perché esegue
iterativamente una serie di
azioni finché non viene raggiunto un limite prestabilito,
da parte del programmatore,
ed indicato in una condizione.
Il ciclo for utilizza la seguente sintassi:
for (inizializzazione; condizione; incremento) istruzioni;
l’iterazione è regolata da una
variabile contatore.
Ciò significa che ogni volta
che l’istruzione for esegue il ciclo, il contenuto della variabile
contatore subisce una variazione.
L’espressione inizializzazione permette di specificare il valore cui deve essere inizializzata la variabile contatore (ad
esempio: i=0); condizione consente di impostare la condizione che deve verificarsi affinché venga eseguito il ciclo (iterazione); incremento permette
di indicare quale incremento o
decremento deve subire la variabile contatore ad ogni iterazione. Ad esempio, impostando i<10 come condizione e i++
come incremento, si stabilirà
che il ciclo for dovrà essere ripetuto finché la variabile i assumerà un valore inferiore a 10.
Inoltre, ad ogni iterazione, il
valore numerico contenuto nella variabile i sarà incrementato
di una unità (i++).
Per provare subito l’utilizzo
di for, supponiamo di voler sviluppare un semplice script che
faccio uso dei marcatori <h#>
per la visualizzazione di titoli e
sottotitoli di varie dimensioni.
Nella quarta lezione del no-
stro corso, abbiamo spiegato
come al marcatore <h#> possano essere associato fino a sei
livelli consecutivi, così da determinare una struttura gerarchica di titoli e sottotitoli
(<h1></h1>,
seguito
da
<h2></h2> e così via).
Inserite il seguente script tra
le tag <HEAD> e </HEAD>, ossia nell’intestazione della vostra pagina Web:
<script type=“text/javascript”>
for (i = 1; i <= 6; i++)
{ document.write(“<h” + i +
“>Questo è il titolo numero ” + i)
document.write(“</h” + i + “>”) }
</script>
In pratica, ad ogni iterazione, il valore contenuto nella variabile contatore i (inizialmente impostato a 1) viene incrementato di un intero (i++). Finché tale valore è minore o
uguale a 6, l’esecuzione del ciclo for viene ripetuta.
Ad ogni ciclo, vengono eseguite le due istruzioni document.write che s’incaricano di
scrivere, sulla pagina Web,
quanto indicato tra parentesi.
Utilizzando l’operatore +, si effettua una concatenazione tra
le stringhe racchiuse tra virgolette ed il valore assunto, di
volta in volta, dalla variabile
contatore i.
Lo script ha permesso così
di generare il codice HTML
equivalente al seguente:
<h1>Questo è il titolo numero 1</h1>
<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, assai utili nella programmazione
JavaScript, sono while e do…
while.
L’istruzione while va utilizzata nella forma while (condizione) espressione: l’espressione verrà eseguita finché la
condizione specificata risulterà vera. Il ciclo do…while va
impiegato, invece, nei casi in
cui si vuole che l’iterazione
venga eseguita almeno una volta. La sintassi dell’istruzione è
infatti la seguente: do {istruzioni} while (condizione)
Le istruzioni specificate, tra
parentesi graffe, dopo il do verranno eseguite finché la condizione risulterà verificata.
8 Interazione tra JavaScript e form HTML
moduli HTML (form) sono
una sorta di questionari compilabili on line da parte dei visitatori di un sito Web. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. I moduli
compilati venivano infatti poi
automaticamente inviati ad un
indirizzo e-mail (ad esempio,
quello del webmaster del sito
Internet). Oggi, le possibilità di
utilizzo dei form si sono enormemente ampliate: vengono
utilizzati, su un sempre maggior numero di siti, per interagire con l’utente. Ad esempio,
form online vengono proposti
per effettuare ricerche all’interno degli articoli contenuti
in un sito, per inviare i propri
messaggi in un forum, per gestire contenuti ed aree specifiche del sito e così via.
Per interagire con un modulo HTML mediante codice JavaScript, è necessario far uso nella propria pagina Web - delle apposite tag
I
67/88
<FORM> e </FORM>.
Proviamo ad inserire, nella
nostra pagina HTML, un form
che richieda all’utente di digitare il suo indirizzo e-mail verificandone, successivamente, la
validità.
Per motivi di semplicità, limiteremo il controllo circa la
validità dell’indirizzo di posta
elettronica specificato, alla presenza del simbolo @.
Se l’utente inserirà una stringa di testo contenente la chiocciolina, quanto introdotto nel
campo di testo verrà considerato come un indirizzo e-mail
valido. È ovvio che nella “vita
reale” si dovranno sviluppare
dei controlli aggiuntivi sulla validità dell’indirizzo e-mail (ad
esempio, verificare la presenza
di un suffisso .it, .com, .net, .org
e così via).
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.html”>
Inserisci il tuo indirizzo e-mail:
<input type=“text” name=“email”>
<input type=“submit”
value=“Invia”>
</form>
</body></html>
Assicuriamoci di assegnare
al form HTML un nome specifico, inserendo il parametro name (nel nostro caso, abbiamo
scelto il nome form_email).
Il parametro action consente
di stabilire la pagina ove il
browser Internet deve essere
reindirizzato dopo la pressione, da parte dell’utente, del
pulsante Invia.
Le tag <INPUT>, che debbono essere sempre comprese tra
<FORM> e </FORM>, consentono di stabilire gli elementi facenti parte del modulo HTML.
Per ogni tag <INPUT> è necessario indicare, ricorrendo al parametro type, il tipo di elemento che si vuole utilizzare.
Ad esempio, specificando type=“text”, si inserirà, nel modulo HTML, una casella di testo;
con type=“checkbox” una casel-
la che può essere spuntata o
meno; con type=“radio” un “option box”; con type=“button” un
pulsante…
Type=“submit” è importantissimo: consente di inserire un
pulsante “speciale” che provvede ad inviare il contenuto
del form all’indirizzo specificato nel parametro action.
Per approfondire l’utilizzo
dei form HTML e scoprire tutte
le possibilità che questi offrono, vi consigliamo di fare riferimento all’indirizzo www.w3.
org/TR/REC-html40/
interact/forms.html (in lingua
inglese).
Passiamo, a questo punto,
alla stesura dello script che
consentirà la validazione dell’indirizzo e-mail inserito da
parte dell’utente.
Provvediamo, quindi, a collocare - al solito - tra i tag
<HEAD> e </HEAD> (intestazione), il codice JavaScript seguente:
<script type=“text/javascript”>
function controlla()
{
6a lezione
x=document.form_email
at=x.email.value.indexOf(“@”)
if (at == -1)
{
alert(“Indirizzo e-mail non
valido.”)
return false
}
}
</script>
Cosa abbiamo scritto? In primo luogo abbiamo denominato
controlla() la funzione che effettua la validazione dell’indirizzo e-mail. Una volta invocata
tale funzione, JavaScript memorizza nella variabile x il contenuto del form form_email.
L’istruzione successiva recupera, prima, il valore del
campo denominato email
(x.email.value), quindi applica
il metodo indexOf.
Tale metodo restituisce la
posizione della prima occorrenza della stringa specificata
all’interno di un’altra stringa.
Se la stringa indicata tra parentesi tonde non viene trovata, il
metodo restituisce il valore -1.
Per fare un esempio concreto, supponiamo di assegnare
ad una variabile x la stringa
“La mia rivista preferita è PC
Open”:
x=“La mia rivista preferita è PC
Open”
pos=x.indexOf(“PC Open”)
document.write(pos)
Invocando il metodo indexOf(“PC Open”), lo script
cercherà la prima occorrenza
della stringa PC Open all’interno della frase La mia rivista
preferita è PC Open.
La variabile pos assumerà, in
JavaScript risulta un’ottima soluzione per la validazione dei dati direttamente sul personal
computer dell’utente che visita il nostro sito, evitando così di “caricare” il server del sito
questo caso, il valore 27 (la
stringa PC Open è stata trovata
in corrispondenza del ventisettesimo carattere). Provate a sostituire la seconda istruzione
con la seguente:
pos=x.indexOf(“La gazzetta”)
In questo caso, il metodo indexOf restituirà il valore -1
(non è stata trovata alcuna occorrenza de La gazzetta).
Analogamente, nel nostro
esempio, indexOf permette di
ricercare il simbolo “@”, all’interno della stringa specificata
dall’utente nel campo e-mail; il
valore restituito viene memorizzato nella variabile at. 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, la funzione controlla() assumerà il valore false (return
false). Ora inseriamo, nel codi-
ce HTML che consente la visualizzazione del form, l’invocazione della funzione controlla(): aggiungiamo, nella tag
<FORM> un riferimento all’evento onSubmit (ciò significa
che non appena l’utente agirà
sul pulsante Invia (Submit),
verrà eseguita la funzione JavaScript appena illustrata).
L’argomento dell’evento onSubmit è return controlla(). Il return che precede la chiamata
della funzione controlla(), permetterà di annullare l’invio del
contenuto del form alla pagina
form_ok.html (specificata col
parametro action) se la funzione restituisce il valore false (come abbiamo visto, tale valore
viene assunto solo nel caso in
cui @ non sia presente, ossia
qualora l’indirizzo e-mail non
sia valido).
Se invece la funzione controlla() restituisce un valore diverso, l’invio dei dati del form
verrà consentito.
La validazione dei dati (ossia
il controllo della loro corret-
tezza) sul lato client (ossia direttamente sul personal computer dell’utente che visita il
nostro sito Web), permetterà di
evitare di sovraccaricare il server Web che ospita il sito di un
lavoro aggiuntivo. JavaScript
rappresenta, quindi, la migliore
soluzione per la realizzazione
di questo tipo di controlli.
Il codice HTML e lo script JavaScript sono contenuti all’interno del file form_email.html
nel CD ROM.
L’esempio form_focus.html
(disponibile nel CD ROM di PC
Open) presenta, invece, l’utilizzo del metodo focus() per selezionare un campo specifico facente parte di un qualsiasi modulo HTML presente nella pagina Web.
L’istruzione document.forms
[0].campo1.focus(), consente
di selezionare (impostare il
“focus”) sull’elemento denominato campo1, contenuto nel
primo modulo HTML (forms
[0]) posizionato nella pagina
Web (document). In questo caso infatti, non avendo assegnato alcun nome al form (servendoci del parametro name), possiamo interfacciarci ricorrendo all’array forms[0].
Qualora avessimo attribuito
al modulo HTML il nome
“mioform” (<FORM name=
“mioform”>...</FORM>),
avremmo potuto utilizzare l’istruzione document.mioform.
campo1.focus() in luogo di document.forms[0].campo1.focus() (com’è possibile verificare visionando il file form_focus_2.html).
9 Interazione tra JavaScript e frame
avaScript risulta molto utile
anche quando si debba gestire una struttura a frame.
I frame sono infatti strutture
ampiamente utilizzate in numerosi siti Web perché permettono di suddividere la finestra del browser Internet in più
sottoaree. Ciascuna di esse
può gestire i suoi contenuti in
modo del tutto autonomo, senza dipendere dalle altre. In questo modo è possibile pensare
di tenere fissa una porzione del
documento evitando che il
browser debba ricaricare, ad
ogni refresh, l’intera pagina.
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.
Vediamo, ad esempio, come
è possibile aggiornare due frame diversi con un solo clic del
mouse.
In primo luogo, creiamo un
normale file HTML. Tale file
non avrà bisogno 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. Creiamo un nuovo
file HTML attribuendogli il no-
me frame.html. Incolliamo,
quindi, al suo interno, il codice
HTML che segue:
<html>
<frameset rows=“30%,*”
frameborder=“1”>
<frame name=“frame_sup”
src=“frame_superiore.html”>
<frame name=“frame_inf”
src=“frame_inferiore.html”>
</frameset>
</html>
La pagina Web sarà suddivisa in due sezioni: la prima,
quella superiore, occuperà il
30% dello spazio a disposizione
sull’asse verticale ed ospiterà il
file frame_superiore.html; la seconda, l’area più in basso, lo
spazio restante (al suo interno
verrà collocato il contenuto del
file frame_inferiore.html).
I nomi assegnati ai file che
ospitano il contenuto dei frame
non sono importanti mentre lo
sono i parametri name indicati
in ciascun tag <frame>: si tratta
infatti di apposite “etichette”
che debbono essere ricordate
se si vuole interagire correttamente con i frame da JavaScript. Mentre nel file frame_superiore.html abbiamo inserito
semplicemente il codice HTML
6a lezione
Per documentarvi ulteriormente sull’utilizzo dei frame
HTML, vi consigliamo di visitare la pagina seguente: www.
w3.org/TR/REC-html40/pre
sent/frames.html (in inglese).
Linee guida
per la programmazione
Sopra: la funzione JavaScript per la modifica del contenuto dei frame. Sotto: La
funzione debugger che ci segnala gli errori commessi in fase di programmazione
per la visualizzazione del logo
della rivista, frame_inferiore
.html contiene una funzione JavaScript che abbiamo denominato modifica_frame.
function modifica_frame()
{parent.frame_sup.location.href=“f
rame_superiore_2.html”
parent.frame_inf.location.href=“fra
me_inferiore_2.html” }
Le due istruzioni JavaScript
stabiliscono quali file HTML
devono essere caricati in ciascun frame. Notare che nel frame di nome frame_sup viene inserito il contenuto del file frame_superiore_2.html, mentre in
frame_inf il codice HTML di frame_inferiore_2.html.
La funzione JavaScript per la
modifica del contenuto dei frame viene invocata mediante l’evento Onclick, associato al pulsante Modifica contenuto frame.
Quando programmate con
JavaScript, per evitare di incorrere in fastidiosi errori,
spesso difficili da individuare,
è bene ricordarsi di seguire alcune semplici linee guida.
• JavaScript è un linguaggio
“case sensitive”. In informatica,
quando un linguaggio o un sistema operativo viene definito
“case sensitive” significa che
questo fa differenza tra comandi e istruzioni scritti in
maiuscolo od in lettere minuscole.
Per JavaScript una funzione
denominata MiaFunzione è differente da un’altra chiamata
miafunzione. Accertatevi, quindi, di riferirvi in un modo univoco a funzioni e variabili.
• Gli spazi vengono ignorati.
JavaScript ignora gli spazi presenti all’interno di una istruzione. Ad esempio, l’istruzione
di assegnamento citta=“Milano” (senza spazi) equivale a citta = “Milano” (con gli spazi).
• Non dimenticate di chiudere le parentesi.
Qualsiasi parentesi (tonda,
graffa o quadra) venga aperta
in uno script deve essere successivamente chiusa. Per
esempio, se avete aperto una
parentesi graffa per delimitare
le istruzioni che compongono
una certa funzione, ricordatevi
di chiuderla.
• Se all’interno di una stringa
desiderate utilizzare simboli
speciali come “ ’ ; e &, anteponete ad essi la barra rovesciata. Esempio: document.write
(“L\’uno e l\’altro”).
E se si commettono errori?
Errare è umano e durante lo
sviluppo in JavaScript o in qualunque altro linguaggio di programmazione di errori è naturale commetterne molti.
Anche i più esperti incapperanno certamente in sviste comuni come la mancata chiusura di una parentesi, delle virgolette, la dimenticanza di un
punto e virgola.
In tutti questi casi (e comunque in presenza di un qualunque altro tipo di errore), il vostro script non funzionerà.
Tutti i browser Internet incorporano un debugger ossia
uno strumento in grado di rilevare gli errori commessi in fase
di programmazione.
Internet Explorer, per esempio, visualizzerà nella barra di
stato, in basso a sinistra, un’icona raffigurante un piccolo
triangolo a fondo giallo.
Facendovi doppio clic si otterranno le informazioni dettagliate circa l’errore riscontrato.
Nel nostro caso, com’è possibile verificare in figura, ci siamo dimenticati di chiudere
una parentesi tonda (il debugger ci segnala riga e carattere
ove è stato individuato l’errore, all’interno della pagina
HTML).
Per approfondire...
All’indirizzo www.jsdir.com,
sito Web realizzato e curato da
un team italiano, trovate una
valanga di informazioni sulla
programmazione JavaScript:
tutorial passo-passo, guide online, suggerimenti, esempi pratici, le risposte alle domande
più frequenti (FAQ), guidano
gli aspiranti webmaster alla
scoperta di JavaScript.
Altri esempi pratici possono
essere reperiti all’indirizzo
www.html.it/javascript/tuto
rial/.
10 DHTML: sempre più dinamici
HTML è un linguaggio che
permette di attribuire
maggiore dinamicità alle
pagine Web: la “D” iniziale sta
per Dynamic HTML a sottolineare che DHTML non è solo
un linguaggio puramente descrittivo (così come HTML) ma
la visione di un Web maggiormente “interattivo”.
D
69/88
Con DHTML è possibile modificare ogni elemento che
compone le nostre pagine
Web, introducendo effetti speciali, animazioni e la gestione
di ogni singola immagine.
Durante la vostra “navigazione” in Rete vi sarete certamente imbattuti in menu animati (spesso menù a cascata
che si aprono non appena si
sposta il puntatore del mouse
sopra di essi): spesso è proprio DHTML che ne consente
la visualizzazione.
DHTML si avvale di un insieme di tecnologie. Per raggiungere lo scopo di attribuire
maggiore dinamicità alle pagine Web, questo linguaggio ri-
corre infatti all’utilizzo di tre
componenti tecnici: i linguaggi
di script come JavaScript (ma
anche il VBScript di Microsoft), i fogli di stile (CSS, Cascading Style Sheets) - già illustrati nella quarta lezione del
nostro corso - ed infine, ovviamente, HTML.
Il punto debole di DHTML è,
6a lezione
Il codice JavaScript va inserito nell’intestazione della pagina e permette di stabilire
quale browser Internet si sta utilizzando
però, la compatibilità tra browser. Sia Netscape che Microsoft
hanno da sempre cercato di
imporre la loro visione: talvolta può accadere, quindi, che
una pagina dinamica DHTML
sia visualizzata correttamente
con Internet Explorer ma non
con Netscape (o viceversa).
È quindi necessario assicurarsi di produrre pagine
DHTML che siano perfettamente compatibili con tutti i
browser Internet (che siano,
cioè, cross-browser): qualora
non si provvedesse ad effettuare gli opportuni controlli, si
rischierebbe di perdere numerosi visitatori infastiditi dall’impossibilità di visualizzare
correttamente il vostro sito.
Qualora non si riuscisse a rendere cross-browser la propria
pagina DHTML, si può pensare
di creare due differenti versioni del sito Internet: una, per
esempio, destinata agli utilizzatori di Internet Explorer, l’altra agli utenti di Netscape.
Va tenuto comunque presente che il DHTML è supportato solo a partire dalla versione 4 di Internet Explorer e Netscape: se prevedete di servirvi
di DHTML nelle vostre pagine
Web, è bene indicare i requisiti minimi per una corretta visualizzazione del sito.
Il DHTML si basa sulla struttura DOM (Document Object
Model): si tratta di un modello
che considera qualsiasi documento (pagina Web) come un
oggetto. Ciò significa che ogni
documento viene suddiviso in
elementi più semplici sui quali
è possibile operare secondo le
70/88
specifiche della programmazione orientata agli oggetti.
Qualunque oggetto che fa
parte di una pagina Web definito con le classiche tag HTML
- per esempio una qualsiasi immagine <IMG> o un link <A>
(àncora di collegamento, anchor) - è accessibile da DHTML
servendosi proprio della struttura DOM e di un linguaggio di
scripting come JavaScript.
Il DOM agisce, quindi, da interfaccia tra il documento
HTML ed il linguaggio di scripting: esso interpreta, infatti,
ogni elemento costitutivo della
pagina Web ed offre i metodi
per accedervi.
Per modificare un elemento
presente nella vostra pagina
Web, è sufficiente attribuirgli
un nome. Ad esempio:
<img src=“pcopen.gif” id=“logopcopen”>
In questo caso abbiamo assegnato all’immagine pcopen.gif, inserita nel codice della pagina Web mediante l’apposito tag <IMG>, il nome logopcopen: tale identificativo ci
servirà, in seguito, per modificare le proprietà dell’immagine. In alternativa, è possibile
utilizzare anche il modello
strutturale. Se l’immagine da
modificare è la terza che compare nella nostra pagina Web,
si potrà usare il codice seguente:
document.images[3]
Il codice indica che stiamo
facendo riferimento alla terza
immagine della “collezione”
images, contenuta nell’oggetto document (la pagina Web).
DHTML consente di spostare gli elementi costitutivi di
una pagina Web senza la necessità di dover ricaricare la
stessa. A tal proposito, è suggerito l’utilizzo dei tag <DIV> e
<SPAN>, caratteristici dei fogli
di stile (e già incontrati a pag.
38 nella quarta lezione del nostro corso) in quanto sono pienamente supportati sia da Internet Explorer che da Netscape. Utilizzando <DIV> e <SPAN>
avrete la possibilità, servendovi di DHTML, di spostare “al
volo” qualsiasi blocco che costituisca la vostra pagina (colonne, paragrafi, riquadri di testo,…) senza ricorrere all’impiego di tabelle nidificate.
DHTML permetterà di agire
sulle dimensioni e sulla posizione di ciascun blocco <DIV>
e <SPAN> offrendovi un metodo più semplice e veloce per
creare il layout delle vostre pagine Web. L’uso dei fogli di stile consentirà, poi, di intervenire sulla scelta dei caratteri (stile, dimensioni,…), sulla formattazione dei collegamenti
ipertestuali, sull’impostazione
dei margini e così via.
Un esempio: creare un menu
a tendina con DHTML
Cimentiamoci subito su di
un esempio pratico: proviamo
a creare un menu “a tendina”
per la nostra pagina Web: non
Un esempio pratico: creare un menù a tendina per il nostro sito utilizzando DHTML
appena il puntatore del mouse
verrà posizionato su una voce
del menu, dovranno esserne
immediatamente visualizzate
le relative voci. Prima di tutto
creiamo il codice base della
nostra pagina HTML:
<HTML>
<HEAD>
<TITLE>PC Open - Un menu a
tendina con DHTML</TITLE>
</HEAD>
<BODY BGCOLOR=“white”>
<CENTER><IMG
SRC=“logo_PCOPEN.gif”>
<BR><BR>
</CENTER>
</BODY>
</HTML>
Definiamo, quindi, tra le tag
<HEAD> e </HEAD> (intestazione della pagina HTML), servendoci di un foglio di stile,
quali debbano essere le caratteristiche dei collegamenti
ipertestuali (tag <A>, anchor)
presenti nella pagina Web:
<STYLE>
A:Hover {color:red; textdecoration:none; fontweight:bold }
A {color:black; textdecoration:none; font-size:
10pt; font-family:
Tahoma,Verdana,Arial }
</STYLE>
Il codice JavaScript evidenziato nell’immagine a lato, va
inserito sempre nell’intestazione della pagina e consente
di stabilire, in primo luogo,
quale browser Internet si sta
utilizzando.
Come già anticipato in precedenza, Internet Explorer e
Netscape utilizzano diverse
sintassi per interagire con i
layer ossia i livelli definiti con
DHTML (i blocchi delimitati
con <DIV> e <SPAN>). Lo script
permette di individuare la versione del browser in uso ed
usare document.layers[layerid]
nel caso di Netscape, document.all[layerid] nel caso di
Internet Explorer.
Nel corpo della pagina
HTML (<BODY></BODY>), abbiamo inserito una serie di livelli <DIV>. A ciascun blocco
<DIV> è stato assegnato un nome identificativo. Si è poi fatto
uso delle funzioni apri_tendina
e chiudi_tendina, opportunamente invocate dagli eventi
Onmouseover e Onmouseout
per visualizzare o nascondere,
all’occorrenza, le tendine dei
vari menu dinamici, a seconda
della posizione del puntatore
del mouse.
7a lezione
A scuola con PC Open
Progetto
Web Master
di Michele Nasi
1 Il server Web
a produzione di un sito statico, a cui questo corso è dedicato, richiede talvolta l'inserimento di componenti dinamici o comunque di componenti esterni alla pagina che avete
costruito staticamente. Pensiamo ad esempio a un sito che offra consigli di viaggio e che includa previsioni del tempo costantemente aggiornate, attingendo a risorse esterne. Benché
la struttura della pagina che
contiene tali previsioni possa
essere statica, cioè invariabile,
le informazioni in costante aggiornamento richiedono che al-
L
meno una sua porzione sia dinamica, ossia venga generata
nel momento in cui il navigatore
la richiede, utilizzando informazioni fresche. Situazioni analoghe si verificano anche quando
il sito chiede una certa interazione ai propri navigatori come
nel caso della compilazione di
inchieste o di votazioni, della
firma del libro degli ospiti (guest book) oppure della ricerca di
pagine all'interno del sito oppure sul Web. Si tratta di operazioni che non possono essere eseguite mediante le funzioni di
programmazione di JavaScript,
viste nella scorsa lezione e
orientate a creare pagine che diventano interattive quando arrivano sul computer del navigatore. Qui la decisione di cosa inserire o visualizzare nella pagina deve essere fatta prima che
la pagina stessa sia spedita sul
Web e perciò l'interazione deve
svolgersi necessariamente sul
server. Avremo quindi pagine
costruite solo in parte, all'interno delle quali il server aggiungerà informazioni provenienti
da altre fonti oppure che sono il
risultato di un'elaborazione interna. Tali pagine verranno ge-
nerate unendo la parte statica e
la parte variabile ogni volta che
un nuovo navigatore le richiederà, il che imporrà un certo carico elaborativo sul server, ma
consentirà di avere contenuti
sempre freschi oppure adatti al
contesto. Ciò non significa, tuttavia, che si è creato un vero e
proprio sito dinamico, la cui definizione prevede che le pagine
vengano generate dinamicamente nella loro interezza a partire da informazioni registrate in
un database, tema che sarà
l'argomento di un prossimo corso.
IL CALENDARIO DELLE LEZIONI
Lezione 4:
Lezione 6:
Competenze e strumenti
HTML 4.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.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. 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,
dimensionare tabelle con celle miste,
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
7a lezione
Che cos’è un server Web
Per capire come attivare questo genere d'interazione dobbiamo anche capire che cosa è
un server Web. Si tratta di un
computer dotato di uno speciale software capace di ricevere
richieste via protocollo HTTP
(Hypertext Markup Protocol) e rispondere mediante l'invio della
pagina che corrisponde all'indirizzo indicato dal navigatore
per mezzo del suo browser.
Il server raccoglie tutti gli elementi necessari alla composizione della pagina e li manda al
browser remoto il quale costruisce la pagina vera e propria
sul video. Nel caso di una pagina statica, avremo il file HTML
che la compone, le immagini
collegate ed eventuali oggetti
creati con programmi esterni
(suoni, animazioni, eccetera).
Nel caso di una pagina composita (in parte statica e in parte
dinamica) avremo il file HTML
che contiene gli elementi fissi, le
immagini e gli elementi variabili da calcolare o da prelevare
dall'esterno e inserire al momento della spedizione.
Giusto per chiarire le differenze tra l'interazione lato
client, che abbiamo visto nella
scorsa lezione con JavaScript e
Dynamic HTML, e l'interazione
lato server, che descriviamo in
questa lezione, diciamo che la
prima inizia nel momento in cui
la pagina arriva al browser del
navigatore e continua da quel
momento in poi, la seconda si
verifica sul server nell'istante in
cui la pagina viene richiesta e si
esaurisce non appena gli elementi che la compongono sono
partiti in direzione del navigatore. Perciò comprendiamo che
l'interazione lato client dipende
fortemente dal tipo di browser
utilizzato e ne deve tenere conto, mentre l'interazione lato server è invece completamente
svincolata dal browser, ma deve
invece risultare compatibile
con le funzioni e i servizi previsti dal server che intendiamo
utilizzare.
I Server Side Include
Il metodo più semplice per
inserire elementi variabili all'interno di una pagina consiste nel
collocare nella giusta riga del listato HTML un "segnaposto"
che indichi il nome e la posizione del file esterno che va inserito in quel punto. È una tecnica
che consente di ripetere in più
pagine parti comuni che posso-
72/88
no quindi essere modificate
agendo su un singolo documento (come ad esempio elementi
di navigazione) oppure per innestare nella nostra pagina parti di una pagina esterna o il risultato dell'elaborazione di un
programma interno. Il server
Web non deve far altro che scorrere la pagina prima di spedirla,
notare la presenza di eventuali
istruzioni di inclusione e allegare la parte indicata. Non è richiesta nessuna elaborazione
dei contenuti perciò l'operazione non appesantisce il server.
È una tecnica che si dimostra
efficace quando gran parte della pagina è di tipo statico e l'elemento variabile costituisce una
frazione del contenuto. Il tipo di
include consentito cambia a seconda del server impiegato. Nel
caso di Apache, il più diffuso tra
i server Web in ambito Linux e
disponibile gratuitamente anche per Windows, si parla di XSSI, ossia Extended Server Side Includes. Si tratta di una serie di
comandi che consentono d'inserire nella pagina corrente un
file esterno con la possibilità
anche di scegliere soluzioni diverse al verificarsi di situazioni
diverse. Microsoft prevede una
soluzione analoga nel suo linguaggio ASP (Active Server Pages), che vedremo brevemente
più avanti.
I Server Side Include o gli XSSI
offrono numerosi vantaggi: sono facili da imparare, vengono
supportati da numerosi server,
consentono d'inserire informazioni aggiornate in pagine che
altrimenti sarebbero completamente statiche, non dipendono
dal tipo di browser impiegato, i
comandi non compaiono nel
browser perciò all'esterno non
si sa da dove provengono le nostre informazioni, consumano
poca potenza di elaborazione.
Ci sono naturalmente anche
svantaggi: il server deve comunque farsi carico di un minimo di attività elaborativa e perciò risponde alle richieste con
un leggero ritardo rispetto alla
spedizione di pagine completamente statiche; inoltre l'attivazione degli SSI può comportare
problemi di sicurezza, non gravi, e perciò alcuni provider possono impedirne l'uso, infine la
loro funzionalità è fortemente
influenzata dalla configurazione del server. Diventa perciò indispensabile contattare il proprio amministratore di sistema
prima di pianificarne l'impiego.
Come si presenta un SSI
Alla pari di ciò che accade in
JavaScript, un comando SSI viene inserito nella pagina HTML
sotto forma di commento, cioè
viene preceduto dai simboli <!-e seguito dai simboli -->>.
In tal modo, qualora il server
non riconoscesse il comando e
questo rimanesse all'interno
della pagina che viene spedita
al navigatore, il browser ne
ometterebbe la visualizzazione
considerandolo alla stregua di
un normale commento. In caso
contrario, il riconoscimento del
comando comporta l'eliminazione dello stesso dal listato
della pagina che viene inviata al
navigatore e la sua sostituzione
con l'elemento da inserire. Il comando in sostanza funge da segnaposto e cede il proprio spazio all'elemento da innestare
(include). Molto semplice e molto pratico.
Per un'analisi dei vari co-
mandi e della relativa sintassi rimandiamo alla documentazione dei diversi tipi di server. Affinché vengano riconosciuti e il
server ne esegua l'esplorazione
(parsing) per identificare cosa
inserire e dove, i file che contengono SSI vanno contrassegnati con un suffisso particolare. Spesso si usa il suffisso
SHTML, ma il server può essere
configurato per accettare qualsiasi altro suffisso (tale discorso
naturalmente non si applica ai
file generati con ASP o PHP, che
vengono comunque tutti elaborati prima di essere inviati, compresa la gestione di eventuali include lato server).
La Common Gateway
Interface
Il secondo passo, più impegnativo, nella produzione di pagine con contenuto dinamico
consiste nell'affiancare al server Web uno o più programmi Due file per ogni esempio
Nel CD ROM di PC Open trovate (a meno che non sia specificato
diversamente) due file per ciascuno script di esempio. Il primo è un
file in formato HTML, il secondo è lo script CGI-Perl vero e proprio
(da memorizzare sul proprio server nella cartella cgi-bin).
Tutti gli script CGI-Perl (facilmente riconoscibili per l’estensione .PL
a loro assegnata) sono richiamati dalle pagine HTML facendo
riferimento al sito www.openmaster.info/cgi-bin: abbiamo infatti
provveduto a memorizzarli nella cartella cgi-bin del server Web
dedicato al nostro progetto “OpenMaster”.
Chi intendesse utilizzare gli script presentati in questa lezione sui
propri server, dovrà aver cura di modificare l’attributo action,
contenuto nella tag <FORM> di ciascun file HTML, con l’indirizzo
completo della cartella cgi-bin presente sul proprio server seguito
dal CGI che si desidera richiamare.
Gli script CGI che si invocano dovranno ovviamente essere caricati
sul proprio spazio Web nella cartella cgi-bin.
Ad esempio, se si è interessati ad utilizzare, sul proprio server
Web, il guestbook, caricate nella vostra cartella cgi-bin il file
guest.cgi quindi modificate l’attributo action contenuto nella tag
<FORM> del file guest.html.
7a lezione
che elaborino contenuti in base
alle selezioni e alle richieste del
navigatore. In questo caso non
si tratta semplicemente d'inserire contenuti esterni, aggiornati di frequente, come nel caso
degli SSI, ma di costruirli sulla
base di quel che il navigatore
chiede o fa. Tali contenuti possono provenire da fonti esterne,
dal navigatore che risponde a
quesiti posti su pagine precedenti oppure da altri programmi presenti nel sito. Qualunque
ne sia la fonte, tali informazioni
non possono essere visualizzate direttamente, ma richiedono
trattamento, eseguito mediante
uno dei tanti linguaggi di programmazione che possono funzionare sul vostro server Web
oppure su un altro server che
lavori in parallelo.
L'approccio CGI comporta un
carico di lavoro maggiore rispetto ai semplici SSI perciò
può essere necessario allestire
una macchina di appoggio oppure sfruttare le risorse di un sito remoto, come nel caso dei
motori di ricerca che offrono la
possibilità di eseguire ricerche
anche nel nostro sito.
CGI è 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.
I programmi possono essere
scritti in uno qualsiasi dei linguaggi compatibili con CGI: VisualBasic, C, C++, tcl, Perl e AppleScript per citare i più diffusi.
In particolare, il linguaggio
Perl (Practical Extraction and
Report Language) è il più usato
nell’ambito della programmazione CGI perché nasce con una
predisposizione per la gestione
delle informazioni, come si capisce anche dal nome. Ogni vol-
ta che dovete elaborare file di
testo (il che include naturalmente anche numeri, intesi come informazione), Perl è insuperabile. Inoltre è relativamente
facile da imparare.
Tornando al CGI, vediamo
che funge da interfaccia tra il
"mondo" legato al server Web e
quello che ruota intorno al PC
client che si collega al sito.
Il browser in uso sul computer client non deve conoscere i
vari linguaggi di programmazione: deve solamente interpretare
le informazioni CGI restituite dal
server cui è collegato.
In pratica, diventa possibile
creare pagine HTML basandosi
su dati residenti sul server, ma
disponibili direttamente all'utente. Ciò naturalmente pone
problemi di sicurezza superiori
rispetto a quelli legati all'uso
degli SSI e perciò solo alcuni
provider sono disponibili a consentire l'uso di CGI sui propri
server. Un esempio tipico nell'impiego di quest'ultimo è nella
compilazione di form (moduli
online) che raccolgono dati dall'utente e gli restituiscono risposte. I form servono agli impieghi più disparati: registrazione dei nuovi utenti, compilazione di questionari, votazioni su
sondaggi, acquisto di prodotti,
raccolta dei parametri per una
ricerca, e via dicendo. Spesso si
usa CGI anche per allestire guestbook (libro degli ospiti) dove i
visitatori possano inserire il loro nome e un breve commento
sul sito oppure per costruire un
modulo per la ricerca rapida di
informazioni.
Nella descrizione di un sito
statico, abbiamo visto che ogni
volta che digitiamo un URL
qualsiasi nella barra degli indirizzi del browser Internet, il nostro computer (client) contatta
Schema di funzionamento 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, indicandogli la pagina
desiderata. Il server Web cerca
il file corrispondente e lo trasmette al browser Internet che
lo interpreta e lo mostra a video. Nel caso di pagine dinamiche, il server esegue localmente
l'elaborazione necessaria, ossia
l'inserimento di un include oppure l'elaborazione di contenuti mediante CGI e trasmette al
browser del navigatore solo il risultato.
Molti di voi avranno visto siti con il classico contatore degli
accessi. Si tratta di un contenuto dinamico che incrementa automaticamente a ogni nuova visita. Bene, il contatore costituisce un classico esempio di file
generato mediante uno script
CGI eseguito direttamente sul
server. Uno script, lo ricordiamo, è un file che contiene una
serie di righe di codice che vengono interpretate, una per una,
dall'interprete del linguaggio in
cui sono state scritte e convertite in comandi eseguibili dal
server. Tale file, una volta eseguito (in questo caso all’atto
dell’ingresso nel sito Web di un
nuovo visitatore), legge l’ultimo
valore assunto dal contatore (e
memorizzato sul disco fisso del
server Web), lo incrementa di
uno quindi “spedisce” al client
l’output (in questo caso il valore del contatore sotto forma di
testo o d'immagine gif).
Gli script CGI sono facili da
comporre e hanno dimensioni
ridotte. Bisogna memorizzarli
in una cartella all’interno della
quale il server possa localizzarli. Se avete acquistato un servizio di hosting per il vostro sito
Internet presso un qualsiasi
provider Internet, verificate che
lo spazio Web a vostra disposizione vi permetta di eseguire
anche script CGI: accedete via
FTP (potete utilizzare, a tale
scopo, il programma SmartFTP,
presentato nel numero di marzo
2003 di PC Open a pagina 148) al
server sul quale avete acquistato il vostro spazio Web e cercate una cartella denominata cgibin. 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, infatti, potranno essere eseguiti i vostri script
CGI. Non tutti gli amministratori consentono l’utilizzo di CGI,
solitamente per motivi di sicurezza. Se possibile, è quindi
sempre bene chiedere al proprio provider se abiliti le funzioni CGI e se offra la compatibilità con i linguaggi che intendiamo utilizzare.
Più avanti, sempre con lo
scopo di testare i nostri script
CGI prima di caricarli sul server
Web, vedremo come configurare Apache e Microsoft IIS (i server Web più utilizzati in tutto il
mondo) per eseguirli in locale. Il
collaudo in locale offrirà numerosi vantaggi evitando la necessità di tenere sempre attiva la
connessione Internet e d'impegnarsi in continui upload tramite protocollo FTP.
Perl, gratuito e "testuale"
Abbiamo già evidenziato come i CGI possano essere scritti
in vari linguaggi: abbiamo scelto per voi Perl, il più utilizzato.
È completamente gratuito e supera qualsiasi altro linguaggio
nelle sue funzioni di elaborazioni dei testi. Sono molte le caratteristiche che rendono il Perl un
linguaggio assai interessante e
“piacevole” da utilizzare: distingue automaticamente tra
stringhe di testo e numeri a seconda dell’operatore utilizzato
(quindi non è necessario perdere tempo e sprecare risorse per
la conversione di un numero in
stringa o viceversa); permette
di separare rapidamente i caratteri in campi ed in dati che
possono poi essere utilizzati
dallo script CGI-Perl in vari modi; facilita il trasporto (porting)
degli script sviluppati su piattaforme diverse (ad esempio da
Windows a Linux e viceversa).
Per la stesura del codice Perl
o per la visualizzazione di
script, suggeriamo l’utilizzo di
un normale editor di testo. Per
programmare uno script CGI,
così come per JavaScript, può
andar bene il Blocco Note di
Windows.
Ci sentiamo tuttavia di caldeggiare l’adozione di un editor
testuale più evoluto: ad esempio, TextPad (www.textpad.
com) oppure HTML-Kit già presentato nelle precedenti lezioni
del nostro corso. Una volta realizzato lo script Perl sul proprio
personal computer, si dovrà
quindi provvedere a caricarlo
(via FTP) nella cartella cgi-bin,
all’interno dello spazio Web
messo a disposizione dal provider Internet.
In questo modo lo script potrà essere richiamato e mandato in esecuzione.
7a lezione
2 I form: la porta per l’utilizzo degli script CGI
ella scorsa lezione abbiamo già illustrato, brevemente, cosa sono e a che
cosa servono i moduli HTML (o
form): essi sono una sorta di
questionari compilabili on line
da parte dei visitatori di un sito
Web. Inizialmente il loro utilizzo era limitato: si adottavano
esclusivamente per raccogliere
informazioni sulle opinioni e
sulle preferenze degli utenti.
I moduli compilati venivano
infatti poi automaticamente inviati ad un indirizzo e-mail (ad
esempio, quello del webmaster
del sito Internet). Oggi, le possibilità di utilizzo dei form si sono enormemente ampliate:
vengono utilizzati, su un sempre maggior numero di siti, per
interagire con l’utente.
Nella lezione precedente abbiamo visto com’è possibile interagire con un form HTML, direttamente sul personal computer client, tramite JavaScript.
Questa volta aggiungiamo un
altro tassello: ci proponiamo
di illustrare come gli script CGI
possano interagire con i form.
La differenza è abissale: mentre
nella scorsa lezione ci siamo
occupati dell’aspetto client, qui
spostiamo l’attenzione sull’ambiente server ricorrendo proprio all’utilizzo di CGI-Perl. 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.
Nella figura 1 potete notare
tutti gli elementi caratteristici
di un classico form.
In primo luogo, ricordiamo
che qualsiasi form HTML deve
essere racchiuso entro le apposite tag <FORM> e </FORM>.
La tag iniziale <FORM> contiene anche due importanti parametri (method e action), oltre al
nome attribuito al form (indicato col parametro name): il loro significato sarà presto chiaro. La restante struttura del
form deve essere composta seguendo le specifiche HTML che
consentono l’inserimento di
caselle di testo, checkbox, option box, pulsanti e così via.
Per approfondire l’utilizzo
dei form HTML e scoprire tutte
le possibilità che questi offrono, vi consigliamo di fare riferimento all’indirizzo Internet
www.w3.org/TR/REC-html40/
interact/forms.html (in lingua
inglese).
Le tag <INPUT>, specificate
all’interno del corpo del form,
consentono di porre, sulla pa-
1
gina HTML, campi per l’inserimento del testo (se il parametro type è impostato a text), caselle di tipo checkbox (che
possono essere o meno spuntate; se il parametro type è impostato a checkbox), option box
(se il parametro type è impostato a radio), pulsanti di invio
(con il parametro type impostato a submit) e di reset (annullamento) dei dati (con type
impostato a reset).
La parte più importante del
form risulta essere comunque
proprio la tag <FORM>: 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; l’attributo action indica invece che, dopo la pressione del
pulsante di invio dei dati deve
essere raggiunto ed invocato lo
script CGI specificato (nell’esempio http://www.openma
ster.info/cgi-bin/guest.cgi).
La prima applicazione CGI
Per verificare che gli script
Perl, memorizzati nella cartella
cgi-bin del vostro server Web,
vengano correttamente eseguiti, provate a creare con un
qualsiasi editor di testo (va bene anche il Blocco Note di Windows) un file contenente quanto segue:
#!/usr/local/bin/perl
#Questa riga indica dove è
localizzato l’interprete Perl
print "Content-type:
text/html\n\n";
#Questa linea consente di
stabilire che tipo di
contenuto deve essere visualizzato
print "Ecco la mia prima
applicazione CGI!";
#Questa linea imposta il
testo che dovrà essere visualizzato sulla pagina Web
1. L’attributo “method” indica che i dati inseriti nel form devono essere trasmessi con
la modalità “post”.
2. “Action” indica lo script CGI che deve essere avviato dopo la pressione del pulsante
“Submit” (Invia).
3. Le tag <INPUT type=”text”> permettono di inserire altrettanti campi per
l’inserimento di testo.
4. La tag <TEXTAREA> consente l’inserimento di un testo lungo (la casella per
l’inserimento del testo occupa, in questo caso, 5 righe e 50 colonne).
5. I pulsanti “Submit” e “Reset” permettono, rispettivamente, la trasmissione al server
Web delle informazioni inserite e la pulizia del contenuto del form.
74/88
Memorizzate il file con il nome di test.pl e caricatelo nella
cartella cgi-bin del vostro server. Provate quindi ad inserire
nella barra degli indirizzi del
browser Internet, il seguente
URL: http://www.openmaster.
info/cgi-bin/test.pl (sostituite,
ovviamente, www.openma
ster.info con l’indirizzo del vostro server Web).
Se, sulla pagina Internet,
verrà mostrato il messaggio
“Ecco la mia prima applicazione CGI”… congratulazioni!
Avrete eseguito il vostro primo
script CGI.
In definitiva, il file test.pl consente di verificare che gli script
Perl siano correttamente supportati.
Fondamenti di
programmazione in Perl
Perl è il linguaggio più popolare per la stesura di script Perl.
Così come nel caso di JavaScript, parliamo di script e non
di programmi. È bene infatti
sottolineare la differenza che
esiste tra i due termini: gli
script sono righe di codice che
indicano le azioni che devono
essere compiute da parte del
computer sul quale sono eseguiti; ogni riga viene interpretata (nel caso di JavaScript dal
browser Internet, nel caso di
Perl dal software residente sul
server). I programmi sono invece preventivamente compilati, in modo da risultare più
veloci da eseguire (seppur decisamente più “ingombranti”
degli script).
Per programmare in Perl
non serve nulla di particolare:
è sufficiente un normale editor
testuale come il Blocco Note di
Windows oppure - meglio TextPad, 1st Page 2000 o
software similari. Chi lavora su
Linux può orientarsi sull’utilizzo di Emacs o di Vi (riconosce
molti linguaggi ed è in grado di
colorare opportunamente comandi, funzioni e parole chiave) - disponibile anche nella
più recente versione grafica denominata “GVim” -.
Le variabili e i tipi
Già dalla precedente lezione
sapete cosa sono le variabili.
Si tratta di appositi “contenitori” (porzioni della memoria)
all’interno dei quali è possibile
memorizzare ogni tipo di dato.
In Perl è necessario anteporre
al nome della variabile un’indicazione che permette di stabilire il tipo di dato che verrà in
essa memorizzato.
Se si intende salvare in una 7a lezione
variabile un tipo di dato scala-
re cioè un numero, una stringa
(un testo) o una costante, è indispensabile anteporre, al nome della variabile, il simbolo
del dollaro ($). Ad esempio,
$nome è una variabile di tipo
scalare che potrà essere utilizzata per memorizzare una
stringa di testo.
Oltre agli scalari, esistono in
Perl altri tipi di variabili.
Anteponendo il carattere @
(at o chiocciolina) al nome della variabile, è possibile inizializzarla come variabile di tipo
array (chiamati anche matrici).
Gli array sono dei gruppi di
scalari: ciò significa che all’interno di una variabile di tipo array è possibile memorizzare un
insieme di valori (stringhe di
testo, numeri, costanti). Un array può contenere da zero elementi sino a quanti sono consentiti dal quantitativo di memoria in uso.
Un esempio di array è il seguente:
@redazione = ($direttore,
$caporedattore,$caposervizio,”
Gruppo Editoriale Agepe”,$impiegati)
Com’è possibile notare, l’array “Redazione” è formato da
cinque elementi ordinati: quattro stringhe (direttore, caporedattore, caposervizio e impiegati) ed una costante di tipo
stringa opportunamente delimitata (com’è obbligatorio) tra
apici.
Esiste, poi, un tipo denominato hash (o array associativo):
questo permette di abbinare,
in un’unica variabile, un insieme di scalari. Le variabili hash
devono essere precedute dal
simbolo % (percento). Un
esempio di hash è il seguente:
%libro =
(“Titolo:”,$titolo_libro,”Codice:”,
$codice,”Autore:”,$autore)
Con l’esperienza ci si accorgerà che gli hash possono rappresentare un ottimo strumento: essi infatti consentono di
correlare, in un’unica variabile
immediatamente accessibile,
un nome ed il relativo valore.
L’istruzione “print”
e il codice HTML
Nel primo esempio di script
CGI abbiamo utilizzato un’unica istruzione Perl: si tratta di
print. Analogamente a document.write di JavaScript, consente di “stampare”, sulla pagina Web, una stringa di testo.
Bisogna sempre ricordare,
se si vuole visualizzare qualco-
75/88
sa su una pagina Web, di porre
inizialmente l’istruzione print
"Content-type: text/html\n\n";.
In questo modo si comunicherà al browser Internet che
dovrà aspettarsi l’arrivo di una
pagina in formato HTML.
Tramite l’istruzione print, si
può stampare sulla pagina Web
anche del codice HTML. Verificate, per esempio, come lo
script Perl creahtml.pl crei una
pagina Web direttamente dallo
script CGI.
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. Tale interazione si concretizza con l’uso di
script CGI “collegati” a normali
form HTML. Uno degli accorgimenti più importanti per ricevere dati, consiste nel contrassegnare ogni campo che costituisce il form con un nome
identificativo. L’operazione è
del tutto analoga a quanto già
visto nella scorsa lezione con il
JavaScript: è sufficiente aggiungere, all’interno dei marcatori <INPUT>, <SELECT>, <TEXTAREA> l’attributo name.
Provate ad analizzare il codice HTML del file guest.html: ciascun campo che costituisce il
form per l’inserimento dei dati
del “libro degli ospiti” è identificato con un attributo name.
Lo script CGI acquisirà i dati
inseriti dall’utente in ciascun
campo del form proprio riferendosi agli attributi name:
scegliete, quindi, per ciascun
campo, un identificativo adatto
(fig. 2).
Ma come vengono passati i
dati allo script CGI che deve riceverli eD elaborarli? L’attributo action, da inserire nella tag
<FORM>, 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.
I possibili valori assegnabili
all’attributo method sono POST
e GET. Il primo consente di inviare allo script CGI, memorizzato sul server Web, una quantità illimitata di dati.
Proprio per questo motivo è
il metodo più utilizzato. Quando si utilizza il metodo POST,
inoltre, sulla barra degli indirizzi non vengono visualizzate
informazioni sui dati che vengono trasmessi al CGI.
Il metodo GET è quindi scarsamente utilizzato quando si
vogliono acquisire dei dati da
un normale form HTML.
È bene però precisare che i
form non rappresentano l’unico modo per trasmettere dati
ad uno script CGI: è infatti possibile inviarli anche tramite un
normale link HTML del tipo <A
HREF>. Ad esempio il link seguente, permette di inviare allo
script libro.pl, le informazioni
indicate dopo il simbolo ?
(punto interrogativo):
<a href=”http://www.open
master.info/cgi-bin/libro.pl?au
tore=rossi&tipo=informatica&a
nno=2002”>Trova i libri di infor
matica scritti dal Sig. Rossi nel
l’anno 2002</a>
In questo caso, per il passaggio dei dati, viene utilizzato
il metodo GET.
Osservate il formato da utilizzare per l’invio dei dati: dopo
il punto interrogativo deve seguire il nome del dato, il simbolo di uguaglianza quindi il
valore. Qualora si debbano inviare più dati è necessario separarli con l’utilizzo del simbolo & (fig. 3).
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.
La variabile ambiente REQUEST_METHOD consente di
stabilire con quale metodo sono stati passati i dati allo script
CGI mentre QUERY_STRING
permette di visualizzare il valore ricevuto tramite il metodo
GET.
Lo script libro.pl che viene
invocato dal link HTML (ved. file libro.html) offre la possibilità
di verificare l’uso delle variabili d’ambiente.
Notate che l’argomento della
variabile $ENV deve essere
racchiuso tra parentesi graffe
7a lezione
ed apici. Esistono altre variabili d’ambiente: CONTENT_
LENGTH consente di stabilire la
lunghezza dei dati trasmessi
col metodo POST; HTTP_USER_
AGENT di recuperare le informazioni sul browser e sul sistema operativo utilizzati dall’utente; HTTP_REFERER di ottenere l’indirizzo della pagina
Web che ha richiamato l’esecuzione dello script CGI.
Il CGI variabili_ambiente.pl
permette di ottenere la lista
completa dei valori assunti da
tutte le variabili d’ambiente al
momento della sua esecuzione.
Proviamo ora a cimentarci
con l’utilizzo del metodo POST.
Immaginiamo di aver creato
una pagina Web (ved. il file sondaggio.html) contenente, al suo
interno, il seguente codice per
la visualizzazione di un form
(listato 1):
Al solito, l’attributo action
consente di indicare lo script
CGI cui devono essere passati i
dati inseriti nel form; method
stabilisce la modalità di invio
degli stessi.
Com’è possibile sviluppare
uno script CGI che acquisisca
le informazioni trasmessegli
dal form con l’utilizzo del metodo POST?
Non ci dilungheremo qui in
una trattazione dettagliata del
problema perché meriterebbe
un’analisi piuttosto approfondita. Abbiamo comunque già
visto come, quando un utente
clicca sul pulsante di invio, i
dati del form vengano trasmessi al server.
Tali informazioni, però, per
poter essere utilizzabili, devono essere “confezionate” in un
formato correttamente leggibile da parte del vostro script
CGI.
I visitatori del vostro sito
Web si aspettano che, inserendo dei dati in un form, venga restituito loro un risultato: talvolta può trattarsi di una cosa
semplice – come l’invio di un
messaggio -, altre volte si devono gestire funzionalità più
complesse come l’inoltro di un
ordine di acquisto.
In ogni caso, lo script CGI
che deve elaborare le informazioni inserite nel form ha bisogno di quei dati. Abbiamo già
visto come i dati possano provenire da fonti diverse: da normali form HTML, da link, da variabili d’ambiente.
Quando un utente invia i dati inseriti nel form cliccando
sull’apposito pulsante submit,
o quando clicca su un link (come quello che invocava lo
script libro.pl), il server riceve i
dati sotto forma di coppie nome-valore, in un unico blocco
continuo.
Lo script CGI, per poter far
uso di tali informazioni, deve
necessariamente scomporle in
pezzetti più piccoli: il processo
prende il nome di parsing.
Nel nostro esempio, dopo
LISTATO 1
<form name="form_sondaggio" method="post" action="http://www.openmaster.info/cgi-bin/sondaggio.pl">
Nome:<br><input type="text" name="txt_nome" size="30"><br>
Età:<br><input type="text" name="txt_eta" size="3"><br>
<br>Giudizio attribuito al nostro sito:<br>
<input name="risp1" type="radio" value="eccellente">Eccellente<br>
<input name="risp1" type="radio" value="buono">Buono<br>
<input name="risp1" type="radio" value="sufficiente">Sufficiente<br>
<input name="risp1" type="radio" value="insufficiente">Insufficiente<br>
<input name="risp1" type="radio" value="mediocre">Mediocre<br>
Messaggio:<br><textarea name="txt_messaggio" rows="5" cols="50"></textarea><br>
<input type="submit" value="Invia">
<input type="reset" value="Annulla">
</form>
che l’utente avrà cliccato sul
pulsante Invia, i dati trasmessi
allo script sondaggio.pl assumeranno una forma simile alla seguente: txt_nome=Mario+ Rossi&Eta=30&risp1=buono.
Il parsing dei dati permette
di scomporre le informazioni
ricevute nella forma che lo
script CGI si aspetta.
Il blocco racchiuso tra i commenti #inizio_parsing e #fine_parsing nello script sondaggio.pl effettua proprio il parsing dei dati ricevuti dal form
HTML contenuto in sondaggio.html.
Esempi e risorse
per approfondire
Chi volesse approfondire l’argomento programmazione CGIPerl, estremamente vasto e sfaccettato, può fare riferimento ai
siti
Web
www.perl.com,
www.perl.org ed al newsgroup
italiano it.comp.www.cgi (consultabile anche via Web all’indirizzo http://groups.google.com/
groups?hl=it&lr=&ie=UTF-8&
group=it.comp.www.cgi).
Chi invece fosse interessato
all’utilizzo di script CGI che consentano la visualizzazione di
contatori grafici e testuali per il
proprio sito Web, guestbook,
piccoli motori di ricerca, carrelli della spesa, mailing list e così
via, può fare riferimento al sito
http://cgipoint.html.it: è possibile reperire qui un’ampia raccolta di link verso siti Web che
offrono materiale in modo del
tutto gratuito.
3 Installare e configurare un server Web
bbiamo già anticipato come Apache e Microsoft IIS
siano i server Web più utilizzati nel mondo e come i CGI
rappresentino un primo esempio di script server-side: essi
vengono eseguiti direttamente
sul server; il risultato dell’operazione viene quindi trasmesso al browser (client) dell’utente che sta visitando il sito
Web. Nel caso di JavaScript, invece, così come abbiamo avuto modo di apprendere nella
scorsa lezione, gli script contenenti le operazioni da effettuare vengono trasmessi in chiaro
- “così come sono” - al browser
Internet, interpretati ed ese-
A
76/88
guiti su ciascun computer
client.
L’obiettivo di questa lezione
non è quello di improvvisare
sistemisti i nostri lettori ma
vuole rappresentare un punto
di partenza per tutti coloro
che desiderano approfondire
le tematiche relative alla programmazione lato server.
Comprendere come operano Apache o IIS consentirà,
dapprima, di “convertire” - a
mero scopo didattico - un personal computer di casa o dell’ufficio a server Web: potrete
effettuare qui le vostre prime
prove di configurazione.
Una volta che il sistema ri-
sulterà adeguatamente configurato, potrete utilizzarlo per
testare le vostre pagine Web facenti uso di tecniche di programmazione che implicano
l’interazione con il server, prima ancora di caricarle sullo
spazio Web messovi a disposizione dal vostro provider Internet.
Chi sviluppa siti Web dinamici, infatti, è bene allestisca a casa propria o nel proprio ufficio - uno o più server Web in
modo tale da verificare il perfetto funzionamento delle pagine realizzate prima ancora
di porle online.
I più volenterosi ed i più in-
teressati all’argomento, potranno raffinare le stesse conoscenze con l’obiettivo di allestire un vero e proprio server Web personale. Chi dispone di connessioni Internet a
larga banda (ADSL o fibra ottica) può provare a rendere uno
o più siti Web accessibili al
mondo intero direttamente da
uno dei propri computer di casa o dell’ufficio. Chi possiede
una rete locale può pensare alla realizzazione di servizi di
gestione della propria attività
basati su Intranet.
Il lettore avrà quindi già
compreso come la conoscenza
del funzionamento del server 7a lezione
Web apra enormi possibilità.
Va sottolineato che la realizzazione di progetti complessi implicherà la necessità di misurarsi immediatamente con problematiche assai importanti
come quella della sicurezza.
Se non si vuole vedere il proprio server Web violato dall’esterno, attraverso la Rete, da
parte di hacker e malintenzionati, si dovrà imparare ad applicare patch e severe policy di
sicurezza. Queste tematiche,
che necessiterebbero una trattazione ampia ed articolata, saranno oggetto di servizi futuri.
Server Web professionali
Al giorno 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.
L’indagine che Netcraft effettua mensilmente (www.net
craft.com) suggerisce quali
siano, al momento, i server
Web più utilizzati in tutto il
mondo. Secondo le statistiche
disponibili all’indirizzo www.
netcraft.com/survey/, nel mese di marzo 2003, Apache risultava in uso sul 62,5% dei
server totali a livello mondiale
mentre Microsoft IIS sul 27%.
Gli aspetti che vanno considerati prima della “messa in
opera” di un server Web sono
la facilità d’installazione e di
configurazione, le possibilità
di personalizzazione, le sue
caratteristiche peculiari, le
sue dimensioni, le performance garantite ed il consumo di
risorse macchina, il supporto
di transazioni sicure, la disponibilità del codice sorgente, la
puntualità con cui vengono rilasciati aggiornamenti, eventuali patch e nuove versioni, il
supporto tecnico, il supporto
di più piattaforme hardwaresoftware, la disponibilità di
versioni gratuite. I server Web
disponibili oggi non consentono solo di restituire pagine statiche ai personal computer
che si collegano con un certo
sito ma supportano tutti i più
recenti linguaggi di scripting.
I tempi in cui il Web era concepito come un insieme di pagine statiche collegate da semplici collegamenti ipertestuali
(link) sono ormai remoti.
Gli sviluppatori di pagine
Web hanno sentito infatti, da
subito, l’esigenza di svincolar-
77/88
si dalla staticità dell’HTML.
Nacquero, quindi, i primi linguaggi server-side: l’intento era
quello di garantire una maggiore interattività delle pagine
Internet, restituendo all’utente
solo le informazioni cui egli
era effettivamente interessato.
CGI è proprio una delle prime tecnologie che vennero offerte agli sviluppatori per rendere maggiormente dinamici i
propri progetti sul Web.
Dopo CGI hanno preso ampiamente piede ASP, PHP,
ColdFusion e JSP mentre sta
cominciando a fare capolino il
nuovo Microsoft .NET.
Il denominatore comune dei
linguaggi di scripting “server-side” consiste nel fatto che il codice viene eseguito e interpretato direttamente sul server
che ospita il sito Internet (una
situazione inversa rispetto a
quanto accade nel caso di JavaScript).
In questo modo è possibile
acquisire dall’utente la lista
delle informazioni alle quali
egli è interessato, ricercarle
sul server quindi proporgliele
sotto forma di una normale
pagina HTML, preparata “al volo” direttamente sul server
Web. Il processo è del tutto
trasparente agli occhi dell’utente.
Linguaggi come ASP e PHP
hanno aperto scenari fantastici, impensabili all’epoca in cui
tutto il Web era immobile, condizionato dalla staticità dell’HTML: si pensi, a mero titolo
esemplificativo, che è oggi
possibile generare automaticamente pagine HTML riversando, al loro interno, il contenuto di un database. In pratica, immaginate di poter memorizzare tutte le informazioni che dovranno essere inserite nel vostro sito Web (ad
esempio, il catalogo dei vostri
prodotti con nome, descrizione ed altri dati caratterizzanti)
in unico database. Grazie all’utilizzo di script “server-side”
il server Web sarà in grado di
attingere dal database solo le
informazioni alle quali il visitatore è interessato, comporre
una normale pagina HTML, inserirvi all’interno i dati richiesti e proporre il tutto all’utente. Nel caso di un catalogo memorizzato all’interno di un database (per esempio, in formato Microsoft Access), si dovrà esclusivamente realizzare
IIS, le differenze in Windows XP
Pro e 2000/2003 Server
Sia la versione Professional di Windows XP (così come Windows
2000 Professional), sia la versione Server di Windows
2000/2003, mettono a disposizione Internet Information
Services (IIS).
Le differenze tra le due versioni, sebbene siano molto simili per
ciò che concerne l’interfaccia grafica di amministrazione, sono
piuttosto marcate. La versione di IIS inclusa in Windows XP
Professional è assai limitata: il webmaster o il programmatore può
farne uso con il solo scopo di testing delle pagine Internet
sviluppate.
Una volta verificata la corretta visualizzazione di tutte le pagine
Internet su una tranquilla workstation locale dotata di Windows XP
Professional e IIS, una volta soddisfatti del proprio lavoro, si potrà
procedere alla “pubblicazione” del sito sul server della società o
del provider Internet sul quale sarà in esecuzione Windows 2000
Server e IIS oppure, se più fortunati, Windows 2003 Server, molto
superiore rispetto a Windows 2000 Server in termini di affidabilità
e di prestazioni.
La versione di IIS di Windows XP Professional non permette infatti,
di creare veri e propri siti Internet, raggiungibili dall’esterno nella
forma http://www.nomedelsito.com ma semplicemente di creare
una serie di directory virtuali: in ciascuna di esse si potranno
memorizzare le pagine costituenti un unico sito.
Ciascun sito “virtuale” sarà però raggiungibile nella forma
http://123.45.67.89/nome_sito ove 123.45.67.89 è l’indirizzo IP
associato in quel momento alla macchina dotata di Windows
2000 Professional e IIS; nome_sito è il nome della directory
virtuale contenente le pagine Web da visualizzare.
Sebbene questo tipo di struttura possa essere adeguata per
piccole realtà aziendali che utilizzano reti locali per offrire ai propri
dipendenti servizi Intranet (ad esempio, la possibilità di accedere
a determinati dati, di acquisire ordini dai clienti, di gestire la
contabilità dell’azienda semplicemente da un’interfaccia Web),
non è pensabile adottare questa soluzione nel caso in cui, dalla
medesima macchina, si desideri rendere accessibili numerosi siti
Internet nella forma www.ilmiosito.it o www.ilsuosito.com.
lo script in grado di recuperare
le informazioni e di generare la
pagina Web.
In questo modo si eviterà di
sprecare tempo e risorse nello
sviluppo di una pagina HTML
statica per ciascun prodotto
che si vuole mettere in Rete.
Eventuali modifiche (grafiche
e non) dovranno essere inoltre
applicate solo allo script server-side e non ad ogni singola
pagina HTML! Presenteremo
linguaggi come ASP e PHP nel
prossimo futuro.
Installare e configurare IIS
Internet Information Services
(IIS) è il server Web che Microsoft mette a disposizione
nelle versioni Professional e
Server di Windows 2000 ed in
Windows XP Professional (di
Windows 2003 Server, in test
presso diverse aziende già da
un paio di anni, è atteso per i
primi di maggio). Le differenze
tra l’IIS incluso nelle versioni
Server e quello che viene fornito con le versioni Professional sono notevoli (a tal proposito, fate riferimento al box di
approfondimento qui sopra).
Sostanzialmente, la versione di IIS inclusa in Windows
XP Professional può essere
utilizzata con il solo scopo di
sviluppare e testare a fondo i
siti Web che si stanno realizzando, prima ancora di “pubblicarli” on line (sul server
Web messo a disposizione dal
proprio provider Internet). Tale versione di IIS è infatti assolutamente inadatta se si vuole
allestire un server professionale.
La versione di IIS inclusa in
Windows XP Professional è la
stessa che viene fornita insieme con Windows 2000 Professional (cambia solo il numero
della versione: IIS 5.1 in luogo
di 5.0). In Windows XP Professional, l’installazione di IIS deve essere avviata manualmen-
7a lezione
4
te accedendo al Pannello di
controllo di Windows, cliccando su Installazione applicazioni quindi su Installazione componenti di Windows.
Dalla lista dei componenti
installabili, selezionate la voce
Internet Information Service
(IIS) quindi cliccate sul pulsante Dettagli. Qualora siate
interessati ad allestire solo un
server Web, potete limitarvi a
spuntare le caselle File comuni, Servizio Web, Snap-in Inter-
net Information Services.
Cliccando su OK vi verrà richiesto di inserire il CD ROM
di installazione di Windows
XP.
Al termine della fase di setup, che procederà in modo
automatico, consigliamo di
riavviare il sistema operativo
(fig. 4). Per controllare che IIS
sia installato e funzionante, avviate il browser Internet quindi digitate, nella barra degli
indirizzi, http://localhost (localhost è detto anche indirizzo
di loopback ed identifica il vostro stesso computer).
Il server Web (IIS) dovrebbe
rispondere alla vostra richiesta mostrandovi la pagina di
default.
Se il computer è connesso
in rete locale, provate ad accedere alla visualizzazione
della pagina HTML di default
di IIS da un client qualsiasi.
Per far ciò eseguite Internet
Explorer (o il browser installato) e digitate, come URL,
http:// seguito dal nome del
computer sul quale è in esecuzione IIS (per esempio:
http://michelesrv).
Per verificare il nome assegnato al computer sul quale
avete provveduto ad installare
IIS, accedete al Pannello di controllo, fate doppio clic sull’icona Sistema, cliccate sulla
scheda Nome computer.
Il pulsante Cambia… permette di modificare a proprio
piacimento il nome della macchina (fig. 5). In alternativa,
potete provare a raggiungere
la macchina IIS facendo riferimento al suo indirizzo IP.
Supponiamo che all’interno
della rete locale gli sia stato
assegnato l’IP 192.168.0.4: provate a digitare http://
192.168.0.4 da un qualsiasi
5
personal computer della LAN
per accedere alla pagina predefinita proposta da IIS.
Se poi il computer è collegato ad Internet dovrebbe essere possibile raggiungerlo
dall’esterno indicando l’IP assegnato dal provider al momento della connessione. 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, si
accederà alla finestra di configurazione del server IIS. Da
questa finestra è possibile gestire siti Web, funzionalità FTP
e SMTP.
Dopo l’installazione di IIS,
viene automaticamente creato
un sito Web predefinito contenente, essenzialmente, i riferimenti ai file della guida di Internet Information Services.
È opportuno considerare le
varie opzioni per la configurazione di un sito Web da un punto di vista gerarchico: maggiore è il livello gerarchico dell’elemento sul quale si stanno apportando delle modifiche,
maggiore sarà l’impatto globale degli stessi interventi.
Molte schede per la configurazione compaiono a più livelli gerarchici: ciò significa che
effettuando una modifica al livello più alto verrà influenzato
un maggior numero di oggetti
componenti il sito.
Fate clic con il tasto destro
A
78/88
del mouse sulla voce Sito predefinito quindi scegliete Proprietà. La prima parte della finestra contiene le informazioni necessarie per l’identificazione del sito, compresi nome
e indirizzo. Vi sono poi due voci relative alle porte da utilizzare: la prima, per gli accessi
anonimi dal server, la seconda
per l’accesso SSL. Una delle limitazioni che Windows XP Professional impone consiste nel
fatto di mettere a disposizione
l’utilizzo, per le connessioni
SSL, di un’unica porta: la 443.
L’altra grossa limitazione
della versione di IIS contenuta
in Windows XP Professional,
consiste nel fatto che il numero di connessioni che possono
essere effettuate è limitato a
10. Questa restrizione rende
Windows XP Professional assolutamente inadatto per la gestione di un normale sito Web
che preveda un numero di accessi contemporanei superiore.
Il campo Timeout connessione permette di stabilire il tempo massimo (in secondi) durante il quale un utente inattivo - che non “naviga” cioè al-
l’interno del sito - può restare
collegato al server IIS.
Poiché l’utilizzo della versione di IIS inclusa in Windows
XP Professional è consigliato
pressoché esclusivamente all’interno di una rete locale Intranet, 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.
Suggeriamo, inoltre, di attivare la casella Abilita keep-alive HTTP: è possibile così migliorare le prestazioni del server permettendo ad ogni client
di mantenere attiva la connessione con IIS anziché crearne
una nuova ad ogni richiesta di
accesso.
La sezione Consenti registrazione attività permette di configurare le impostazioni relative alla creazione dei file di log
ossia dei file testuali che registrano tutti i tentativi di accesso al server IIS. Se si prevede
di utilizzare IIS solo all’interno
della propria Intranet, è possibile disattivare la casella Consenti registrazione attività in
modo da evitare l’occupazione
di spazio su disco. In caso contrario, se si prevede che la
macchina sulla quale è installato IIS debba essere raggiungibile anche dalla Rete Internet, è bene attivare l’utilizzo
dei file di log in modo da rilevare anche eventuali tentativi
di intrusione. Il formato più diffuso per la creazione dei file di
log è il W3C Extended Log File
Format che costituisce lo standard per la maggior parte dei
server Web ed è supportato
anche dagli sviluppatori di
strumenti di analisi e gestione
(fig. 6).
6
7a lezione
A questo livello non ci sembra opportuno dilungarci sui
filtri ISAPI: basti sapere che essi consentono di eseguire controlli in background sul sito
Web. Vi sono diversi tipi di filtri: alcuni soddisfano esigenze
relative alla sicurezza, altri la
mappatura degli URL e l’elaborazione delle intestazioni richieste.
La scheda Home Directory
permette invece di specificare
dove debbono essere reperiti i
file che compongono il sito
Web che si sta configurando in
IIS. Le scelte possibili sono tre:
Directory situata in questo computer, Directory condivisa situata in un altro computer e
Reindirizzamento a un URL.
La scheda può assumere diverse forme a seconda che si
sia selezionata una directory,
una directory virtuale o un file
(fig.7). La sezione sottostante
della finestra permette di impostare le tipologie di accesso
consentite.
Accesso origine script, se selezionato, e se sono impostati i
premessi di lettura e/o scrittura, permette l'accesso al codice sorgente degli script; Lettura
consente l'accesso alla risorsa
in sola lettura; Scrittura permette l'accesso alla risorsa in
lettura/scrittura; Esplorazione
directory se selezionato, visua7
8
79/88
lizza in formato ipertestuale il
contenuto di una cartella non
virtuale. Per visualizzare il
contenuto di queste ultime bisognerà conoscerne l'alias associato. Se l'opzione non è abilitata e l'utente specifica all'interno dell'URL un percorso ad
una risorsa inesistente, il server Web risponderà con un
messaggio di errore (accesso
negato); Registra visite aggiunge la risorsa a quelle da monitorare per mezzo dei file di log;
Indicizza questa risorsa se il
servizio di indicizzazione è attivo, aggiunge la risorsa a quelle da indicizzare.
Il menU a tendina Autorizzazioni di esecuzione permette di
indicare il livello di esecuzione
autorizzato sulla risorsa: solo
file HTML, script oppure script
ed eseguibili.
La scheda Documenti consente di impostare le pagine
che devono essere automaticamente proposte all’utente
qualora egli non specifichi il
nome di un file memorizzato
sul server.
Primi accorgimenti
e creazione di una
directory virtuale
Microsoft stessa, per motivi
di sicurezza, consiglia di eliminare i riferimenti ai file della
guida ed agli esempi installati
automaticamente insieme con
IIS (per ottenere la lista completa delle patch da installare e
delle politiche di sicurezza che
è consigliabile applicare, suggeriamo l’utilizzo del software
Microsoft Baseline Security
Analyzer (MBSA), già presentato nei numeri 78 (a pagina
61) e 79 (a pagina 69) di PC
Open.
Per far questo eliminate, dalla finestra di amministrazione
di IIS, tutte le directory virtuali create dopo l’installazione di
Internet Information Services
(cancellate le directory virtuali Scripts, IISAdmin, IISSamples,
MSADC, IISHelp, WebPub, Printers) e tutti i contenuti predefiniti (cancellate le cartelle inetsrv\iisadmin e inetsrv\iisadmpwd – entrambe contenute nella cartella \winnt\system32 -; cancellate anche le
cartelle \inetpub\wwwroot (o
\ftproot o \smtproot), inetpub\scripts, inetpub\iissamples, inetpub\adminscripts,
%systemroot%\help\iishelp\iis
e %systemroot%\web\printers.
A questo punto fate clic con
il tasto destro del mouse su Sito web predefinito, cliccate sulla scheda Home director y,
quindi eliminate wwwroot dalla
casella Percorso locale (dovrebbe restare solo c:\inetpub). Questa modifica vi permetterà di evitare un messaggio d’errore che informa sull’inesistenza della cartella specificata (fig. 8-9).
Dopo aver effettuato le regolazioni iniziali, sinora illustrate, è possibile passare alla
creazione di una directory virtuale. Nella versione di IIS inclusa in Windows XP Professional è immediato pensare di
creare una directory virtuale
per ogni sito Web che si sta sviluppando.
Destinando una directory
virtuale a ciascun sito su cui si
sta lavorando, è possibile simulare, sul proprio computer,
il comportamento del server
Web che lo ospiterà. È possibile visualizzare, quindi, pagine
Web statiche e dinamiche così
come appariranno successivamente dopo averle caricate sul
server. 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. La particolarità delle directory virtuali consiste nel fatto di fungere
da “puntatore” verso una cartella residente su un disco fisso locale o su un altro personal
computer in rete (fig. 10).
Per creare una nuova directory virtuale, è sufficiente fare
clic con il tasto destro del
mouse su Sito web predefinito
quindi seguire la procedura
passo-passo che viene presentata.
La finestra immediatamente
successiva a quella di presentazione, richiede di specificare
un alias per la directory virtuale che si sta crean10
do.
L’alias è l’identificativo che dovrà digitare, nella barra degli indirizzi del browser Internet, chiunque vorrà
accedere al contenuto
della directory virtuale. Ad esempio, supponiamo di inserire
pcopen come alias: ciò
significa che se dal
browser Internet si
9
vuole accedere alla directory
virtuale di PC Open, creata sul
nostro computer, dovremo digitare, nella barra degli indirizzi http://localhost/pcopen.
Per accedere alla stessa directory virtuale, un utente della nostra LAN dovrà digitare, in
luogo di localhost, l’indirizzo IP
associato alla nostra macchina
oppure il nome della stessa: ad
esempio, http://paperino/pcopen.
Tenete presente che è possibile accedere alle directory
virtuali configurate su un personal computer dotato di Windows XP Professional e IIS anche dalla Rete Internet specificando, al posto di localhost,
l’indirizzo IP associato in quel
momento alla macchina (per
stabilire l’indirizzo IP associato al proprio computer all’atto
della connessione Internet, fate doppio clic sull’icona raffigurante due piccoli computer,
nella traybar in basso a destra,
cliccate sulla scheda Dettagli
quindi fate riferimento al valore Indirizzo IP del client).
Per evitare 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,
fate riferimento al box dedicato ad Outpost Firewall) fig. 11.
7a lezione
11
13
Dopo l’impostazione dell’alias, è 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. Il nostro consiglio è
quello di effettuare una prova
copiando i file d’esempio che
trovate nel CD ROM allegato a
questo numero di PC Open in
una cartella sul vostro disco
fisso. Ad esempio, se decidete
di porre tali file in una cartella
denominata C:\PCOpen_esempi, specificate qui la stessa directory (servendovi del pulsante Sfoglia…) (fig. 12).
Come ultimo passo, è necessario specificare le autorizzazioni che si desiderano impostare per la directory virtuale
in corso di creazione. Suggeriamo di attivare solo le caselle Lettura ed Esecuzione script.
Cliccando sul pulsante Avanti
quindi su Fine, si concluderà la
procedura guidata.
Come risultato, vedrete
comparire all’interno del ramo
Sito web predefinito, una nuova
12
80/88
voce, corrispondente all’alias
da voi scelto per la directory
virtuale.
Cliccando con il tasto destro del mouse sulla directory
virtuale pcopen appena creata
quindi scegliendo Proprietà,
avrete accesso alla finestra
delle proprietà, molto simile a
quella già vista in precedenza
per il Sito Web predefinito
(fig. 13).
Sono due gli aspetti che, a
questo livello, è bene sottolineare. Il primo riguarda la gestione della sicurezza. La scheda Protezione directory permette di stabilire le modalità
con le quali un utente può accedere alla directory virtuale.
Diversamente dalla versione server di IIS, in Windows XP
Professional non è possibile
controllare l’accesso in base
all’indirizzo IP.
Facendo clic sul pulsante
Modifica, viene visualizzata la
finestra Metodi di autenticazione: selezionando la casella Accesso anonimo è possibile fare
in modo che chiunque possa
accedere alla directory (pur
consentendo di mantenere il controllo sulle sottodirectory e sui
singoli file).
Nonostante l’accesso
sia “anonimo”, l’utente
verrà registrato nel sistema per mezzo di un
account “ad hoc” (generalmente denominato IUSR_nomecomputer, ove nomecomputer è il nome associato
al computer sul quale
è in esecuzione IIS).
Gli utenti anonimi non
dovranno inserire alcun nome
utente identificativo né alcuna
password per accedere ad una
directory virtuale sul vostro
computer. Se su un server Web
di solito si deve consentire
l’accesso ad un sito senza digitare alcun nome utente e password, sul vostro computer locale sarebbe bene inibire, per
ragioni di sicurezza, qualsiasi
forma di accesso anonimo.
Gli altri tre livelli di accesso
richiedono l’identificazione
dell’utente prima di consentire
l’accesso alla directory.
Attivando la casella Autenticazione di base vengono richiesti il nome e la password
dell’utente. 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.
L’intercettazione può avvenire tramite un software (o un
hardware) denominato sniffer,
in grado di analizzare il contenuto di ogni pacchetto inviato
e ricevuto.
Le due opzioni successive
sono utilizzabili in Windows
2000 Professional solo
se la macchina è colle- 14
gata ad un server di
dominio.
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.
Il secondo aspetto da evidenziare riguarda la priorità
con la quale vengono visualizzati i documenti contenuti in
una directory virtuale.
Nella scheda Documenti, è
possibile indicare quali file devono essere mostrati se l’utente non richiede la visualizzazione di uno specifico file.
Digitando, nella barra degli
indirizzi del browser, l’URL
http://localhost/pcopen, verrà
dapprima cercato il file default.htm, se questo non viene
trovato, IIS passa alla ricerca di
default.asp. Se anche il file default.asp non è presente nella
cartella, IIS ricerca iisstart.asp;
se anche tale file risulta irreperibile, viene visualizzato un
messaggio d’errore che segnala all’utente l’impossibilità di
accedere alla directory. La lista
dei documenti predefiniti è liberamente personalizzabile
(fig. 14). Nel nostro esempio,
digitando nel browser l’URL
http://localhost/pcopen, verrà
infatti visualizzata automaticamente la pagina default.htm. 7a lezione
5 Installare e configurare Apache sotto Windows
pache è il server Web attualmente più utilizzato al
mondo, nato per funzionare come processo “stand alone”
ossia senza richiedere l’appoggio di altre applicazioni o di altri
componenti software.
Si tratta di un prodotto solido, performante e supercollaudato: è il frutto (completamente
gratuito) del lavoro di un team
di volontari, noto come “Apache Group”.
Apache è un software estremamente aperto (sono addirittura reperibili sul sito www.apa
che.org i sorgenti veri e propri)
che offre anche la possibilità ad
altre aziende di crearsi un business mediante lo sviluppo di
plug-in, aggiunte varie, strumenti di configurazione, tool di
supporto e così via.
Il server Web Apache, nato in
ambiente Linux, è disponibile
per tutte le piattaforme Unix, incluso Mac OSX e, più di recente,
è stato portato anche in Windows.
Apache differisce da IIS per il
fatto di essere completamente
gratuito e di mettere a disposizione tutte le funzionalità di un
server Web avanzato. Tra l’altro
Apache può essere impiegato
su una qualunque versione di
Windows (Windows 9x compreso).
L’ultima versione di Apache
disponibile al momento della
stesura di questo servizio, è la
2.0.44: sul sito dedicato a questo server Web (http://httpd.
apache.org/) è possibile reperire le informazioni relative all’installazione, alla configurazione
ed all’aggiornamento dello stesso. L’Apache Group è poi solito
pubblicare tempestivamente,
proprio in questo sito Web, le
patch risolutive per eventuali
bug di sicurezza scoperti con il
passare del tempo.
A
15
81/88
Per avviare l’installazione di
Apache, fate doppio clic sul file
apache_2.0.44-win32-x86no_ssl.msi (prelevabile gratuitamente all’indirizzo http://na
goya.apache.org/mirror/httpd/
binaries/win32/apache_2.0.44win32-x86-no_ssl.msi).
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. Se state installando Apache per la prima volta, con lo
scopo di saggiarne le principali
funzionalità, digitate localhost
nel campo Server Name ed inserite la vostra e-mail nel campo
Administrator’s email address.
Lasciate attiva l’opzione for All
users, on Port 80, as a service
(fig. 15).
Nella finestra successiva selezionate Typical quale modalità di installazione quindi inserite la cartella ove desiderate
che Apache venga collocato.
Cliccando sul pulsante Install
verrà avviata la fase di setup
che si concluderà in pochi
istanti. Al termine della procedura, all’interno della traybar
(ossia l’area situata in basso a
destra, accanto all’orologio di
Windows), dovrebbe comparire
l’icona di Apache, a segnalare
che il Web server è già in esecuzione (fig 16).
Ad installazione conclusa
provate ad avviare Internet Explorer o il browser in uso e digitate http://localhost. Se il server
Web vi risponderà con la finestra visualizzata in figura avrete
installato correttamente Apache. I file componenti il sito
Web (HTML, PHP,…) andranno
posti nella sottodirectory denominata htdocs. All’interno della
stessa cartella, potete creare
sottodirectory in modo che il loro contenuto possa essere richiamato, dal browser Internet,
nella forma http://localhost/nomesottodirectory/nomefile.html.
Se l’utente non specifica alcun
file ma si limita a digitare un
URL del tipo http://localhost/nomesottodirectory, il primo file
che verrà automaticamente richiamato sarà index.html.
Così come in Linux, anche in
Windows il file che consente la
16
configurazione dell’intero server Web è httpd.conf contenuto
nella cartella \Apache\conf.
Ricorrendo all’utilizzo di Risorse del computer (o Gestione
risorse), portatevi all’interno
della cartella ove avete installato Apache quindi fate doppio
clic sulla directory denominata
Conf.
L’analisi delle varie opzioni di
configurazione di Apache, effettuabili agendo sul file httpd.conf,
va oltre gli obiettivi di questa lezione. Suggeriamo di fare riferimento alla pagina http://httpd.
apache.org/docs-2.0/mod/
quickreference.html per ottenere una lista completa delle regolazioni (direttive) applicabili.
Per rendere la configurazione di
Apache più semplice ed intuitiva – evitando, così, di dover intervenire direttamente sul file di
testo httpd.conf – sono nati dei
tool basati su interfaccia grafica. A titolo d’esempio citiamo
ApacheConf (a pagamento) prelevabile all’indirizzo http://
www.apache-gui.com/.
ActivePerl su Windows
ActivePerl è un software gratuito che contiene la più recente versione di Perl per ambiente
Windows. Il produttore, ActiveState, ne offre anche una versione per Linux così da non modificare il proprio lavoro nel caso lo si traghettasse nell'altro
ambiente. Trattandosi di un linguaggio interpretato, che viene
quindi tradotto in linguaggio
macchina al momento dell'esecuzione, è necessario disporre
di un interprete ad hoc per ciascuna delle piattaforme su cui
lo s'intende utilizzare.
ActivePerl è semplicissimo
da installare e configurare in en-
trambi i mondi: servendosene
si potrà provare tutti gli script
CGI Perl sul proprio personal
computer.
La versione Windows è disponibile sul CD guida allegato
per concessione di Active State
che detiene il copyright su Active Perl e Perlscript.
L’installazione di ActivePerl
per Windows è avviabile facendo doppio clic sul file ActivePerl5.8.0.805-MSWin32-x86.msi. Dopo la schermata iniziale, per prima cosa si dovrà accettare il
contratto di licenza d’uso (da
leggere attentamente) quindi
scegliere la cartella all’interno
della quale si desidera installare
il pacchetto software (fig. 17).
ActivePerl si compone di di-
Apache sotto Linux
Alcune distribuzioni Linux
contengono già il server Web
Apache e ne offrono
l’installazione. Se si desidera
comunque utilizzare l’ultima
versione disponibile, è
sufficiente collegarsi con il sito
www.apache.org e scaricare il
file d’installazione per Linux
(httpd-2.0.44.tar.gz).
Portatevi alla riga di comando
Linux, accedete alla cartella
ove avete scaricato il file
d’installazione in formato
.tar.gz quindi seguite
scrupolosamente i comandi
che trovate elencati nella
documentazione di Apache
circa l’installazione del Web
server in ambiente Linux,
consultabile in qualunque
momento all’indirizzo
seguente:
http://httpd.apache.org/
docs-2.0/install.html.
17
elementi. Quello che ci insa in questo momento è il
n ISAPI per il server Web:
tta di un componente che
erfaccia con IIS e che condi elaborare script CGI.
nstallarlo, in fase di setup ci
ve assicurare di attivare le
le Create IIS script mapping
erl e Create IIS script mapfor Perl ISAPI. Di solito, l’inzione di ActivePerl abilita
ro server Web all’esecudei CGI (da qualsiasi sito
configurato, da qualunque
tory virtuale e da qualsiasi
18
82/88
cartella). Nel caso in cui si dovesse configurare un server
Web reale – non un computer
destinato esclusivamente al test in locale dei propri script – sarebbe bene, per motivi di sicurezza, restringere l’esecuzione
degli script CGI solo alle cartelle in cui ciò risulti effettivamente necessario. Una volta terminato il setup di ActivePerl, accedete quindi alla finestra Gestione Servizio Internet Microsoft dal
Pannello di controllo, cliccate
con il tasto destro del mouse
sul nome del server e scegliete
la voce Proprietà, selezionate la
voce Servizio WWW quindi cliccate sul pulsante Modifica (fig.
18).
Provate a copiare lo script test.pl che trovate nel CD ROM di
PC Open nella cartella cgi-bin
della directory virtuale pcopen,
creata in precedenza in IIS. Aprite Internet Explorer e digitate,
nella barra degli indirizzi
http://localhost/pcopen/cgibin/test.pl: il browser Internet
visualizzerà semplicemente il
codice Perl che compone lo
script CGI ma questo non verrà
eseguito.
Selezionate, a questo punto,
la cartella Home directory, cliccate sul pulsante Configurazione: la procedura di installazione
di ActivePerl dovrebbe aver inserito, nell’elenco contenuto
nella scheda Mapping applicazioni, le voci Perl %s %s e PerlIS.dll. In questo modo gli script
Perl saranno eseguibili nell’intero server Web.
Avviando ora Internet Explorer e digitando nuovamente
http://localhost/pcopen/cgibin/test.pl, lo script CGI test.pl
verrà correttamente eseguito
visualizzando la frase Ecco il
mio primo script CGI! (fig. 19).
Per provare gli script Perl
contenuti nel nostro CD, direttamente sul vostro computer, è
quindi sufficiente copiare i file
con estensione .pl (Perl) nella
cartella cgi-bin.
ActivePerl offre anche la possibilità di controllare la sintassi
di uno script Perl da voi sviluppato. È sufficiente accedere al
prompt di MS DOS, portarsi nella cartella dove avete memorizzato il vostro file Perl, quindi digitare perl –c nomefile.pl (sostituendo a nomefile.pl il nome del
vostro script Perl): ActivePerl vi
segnalerà eventuali errori di sintassi facendovi risparmiare
molto tempo. ActivePerl offrirà
il supporto per l’esecuzione degli script Perl anche se decidete
di montare il server Web Apache in versione Windows. Ad installazione di Apache conclusa
è sufficiente provvedere al setup di ActivePerl, seguendo le linee guida appena illustrate,
quindi copiare gli script con
estensione .pl che trovate nel
CD allegato a PC Open nella cartella cgi-bin. Tenete presente
che, nel caso di Apache, la cartella cgi-bin viene automaticamente all’interno della directory di installazione del server
Web. Memorizzate, quindi, nella
cartella cgi-bin tutti i file Perl da
voi creati (o quelli d’esempio
che trovate nel CD di PC Open).
Supponiamo che abbiate copiato, nella cartella cgi-bin, lo script
test.pl. Avviate Internet Explorer
e digitate, nella barra degli indirizzi, l’URL http://localhost/cgibin/test.pl. Qualora vi venisse
19
restituito un Internal server error, aprite con un normale editor di testo tutti i file con estensione .pl che avete posizionato
nella cartella cgi-bin e modificate la prima riga da #!/usr/local/bin/perl
a
#!c:/Perl/
bin/Perl.exe (supponendo di
aver installato ActivePerl nella
cartella c:\Perl). Adesso, digitando http://localhost/cgibin/test.pl nel browser Internet,
dovrebbe venire correttamente
visualizzata la frase Ecco la mia
prima
applicazione
CGI!
(fig. 20). Per chi volesse approfondire ulteriormente le modalità di utilizzo, le potenzialità
e la configurazione di ActivePerl, suggeriamo di consultare
l’ottima guida, disponibile in
formato HTML, ed installata insieme con il programma vero e
proprio. Per accedervi, cliccate
su Start, Programmi, ActiveState
ActivePerl quindi su Documentation.
20
8a lezione
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. Ricominceremo dopo l’estate con un nuovo appuntamento dedicato a chi è interessato ad acquisire competenze
da Web designer
In questa ultima puntata, dopo aver analizzato le tecniche e
i segreti per la creazione di un
sito Internet, ci occuperemo
della sua promozione.
Tutto l'impegno e il tempo finora dedicato alla realizzazione del sito Web ha avuto un
unico grande scopo: mostrare
E
al popolo della Rete di quanto
siamo stati capaci.
Indipendemente dal risultato raggiunto, dalle conoscenze
accumulate e dall'esperienza
maturata, la creazione di un sito ha un solo grande obiettivo:
quello di essere visto da altri.
È in quest'ottica che si ragiona nel momento in cui si
inizia a parlare di “promozione
di un sito Internet”.
Con il termine promozione,
è nostro intento raccogliere
tutte quelle attività per far conoscere un Web site al popolo
di Internet.
La promozione di un sito si
divide in due parti ben distinte: il raggiungimento degli
utenti e la loro fidelizzazione.
Cosa significa tutto ciò? Possiamo spiegare meglio il concetto con una similitudine: Internet è un mare, i navigatori
sono i pesci e il nostro sito
Web è la rete da pesca, a questo punto, il lettore diventato
ormai WebMaster è ovviamente il pescatore.
Se siamo abbastanza capaci
di lanciare la nostra rete da pesca tanto lontano da raccogliere molti pesci, dobbiamo
essere altrettanto capaci di far
sì che nessuno poi scappi dalla rete.
Fuor di metafora, tutte le attività rivolte alla promozione
del nostro sito Web, dovranno
essere così efficaci che gli
utenti che raccoglieremo dovranno rimanere all'interno
del sito e, ancora meglio, dovranno ricordarsi di tornarci a
visitarlo.
Come è possibile raggiungere un obiettivo tanto importante? La risposta naturalmente, la troverete nelle prossime
pagine.
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.01 e CSS
(disponibile integralmente sul CD)
• Stile e struttura: usare i tag HTML nativi
• Il deprecato tag font
• I marcatori per formattare il testo
• Gestire gli spazi nel testo
• CSS e HTML 4.01
• Cosa si può fare con i fogli stile
• Quattro tipi di CSS
• I colori del Web
• Gestire le immagini
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
8a lezione
1 Tecniche di promozione: cosa fare e cosa evitare
ono state sprecate pagine, parole, convegni e incontri per spiegare quali
sono le tecniche per fidelizzare
l'utente: ovvero per far sì che
torni su un sito Web.
S
Cosa fare
A nostro modo di vedere
però, di tutte le pratiche e tecniche che si possono applicare,
ne esistono alcune che meritano di essere sottolineate:
1 - Innanzitutto il sito deve avere dei contenuti interessanti. È impossibile spiegare
quando un sito Web è interessante, infatti lo diventa
quando ci sono utenti che lo
ritengono tale.
Il miglior sistema per raggiungere questo primo, essenziale obiettivo, è quello
di pubblicare con una certa
continuità, contenuti e argomenti che a nostro modo di
vedere possono attirare l'attenzione. Nel vastissimo
mondo di Internet infatti, ci
sarà certamente qualcun altro che condivide il nostro
pensiero e avrà quindi interesse a visitare il sito da noi
creato.
2 - Cercate sempre l'interazione con i vostri utenti. È essenziale che i visitatori del
vostro sito possano interagire con il WebMaster del sito: innanzitutto potranno
farvi avere le loro opinioni
ed il loro parere (il cosiddetto feedback). Questo
sarà per voi oro colato:
niente è più importante delle sensazioni dei vostri visitatori: saranno loro infatti a
indirizzarvi verso le scelte
migliori e a farvi notare gli
errori da voi commessi. È
grazie al loro aiuto che potrete migliorare il vostro sito. Se poi capitasse di intrecciare nuove conoscenze, la cosa non potrà che
farvi piacere.
3 - Dovrete tenere presenti due
parole importantissime in
Internet: leggerezza e semplicità. Essere leggeri significa creare immagini e documenti che possano essere
navigati velocemente dal
vostro visitatore. Ci sono
moltissime persone infatti
che possiedono ancora un
collegamento a 56 Kpbs via
modem e non saranno certo
entusiasti di aspettare trop-
po tempo per visitare una
pagina Web. Per l'attesa, il
tempo massimo è di 10 secondi, mentre per quanto riguarda il peso, fate in modo
che la pagina con tutti gli
elementi (immagini, eventuali suoni e così via) non
superi i 70 KB.
4- Al punto precedente abbiamo parlato anche di semplicità: con ciò vogliamo dire
che è meglio evitare sfondi
troppo colorati, o riempire
la pagina di immagini animate. Il vostro visitatore dovrà poter leggere le vostre
pagine senza fare fatica: non
deve quindi affaticare la vista con contrasti di colore
poco chiari o elementi che
ne distraggano la lettura.
La migliore soluzione è quella di usare sfondi chiari e testo scuro. I link è bene lasciarli sottolineati o se proprio volete cambiarli, fate in
modo che siano sempre ben
distinti dal resto del testo
normale. Assolutamente da
evitare sfondi animati o colori poco contrastanti (come arancione su nero, o giallo su rosso).
Il buon senso vi guiderà ver-
so le scelte più adatte: leggete con attenzione le vostre pagine Web e con una
certa dose di autocritica.
Cosa evitare
Per esclusione, le prime cose da evitare corrispondono a
tutto ciò che si contrappone
con quanto abbiamo scritto
precedentemente.
Per il resto, abbiamo raccolto le pratiche da non seguire all'interno del box sulla netiquette più in là nel’articolo.
Si tratta delle azioni che assolutamente devono essere evitate per promuovere con successo un sito Web. Quando si
inizia infatti, è facile incappare
in errori a dir poco evitabili:
troppa “foga” nella promozione.
Ricordiamoci che i visitatori hanno sempre un ottimo
motivo per non navigare il nostro sito Web: dovremo essere
noi che, con discrezione e perseveranza, gli offriremo il pretesto per accedere al sito da
noi creato.
Dovremo quindi stuzzicare
la loro curiosità e nello stesso
tempo guadagnarci il loro rispetto.
2 I motori di ricerca: vietato mancare
desso che sappiamo quali
sono le pratiche consigliate per promuovere un sito
Web e quali quelle da evitare,
possiamo iniziare con le prime, piccole attività di marketing, o meglio, Web marketing.
Ma da dove si comincia?
Se lo chiedono tutti. Tante
ore investite nella creazione di
un sito Web e poi, una volta
messo on line, la dura realtà:
nessuno (a parte noi e la nostra
ristretta cerchia di amici) lo visita. Come rimediare? Come
iniziare a promuoverlo?
La risposta è semplicissima:
noi, da utenti, quando cerchiamo qualcosa, dove andiamo?
Dove iniziano le nostre navigazioni?
La risposta può essere una
ed una soltanto: i motori di ricerca.
A
84/88
È da lì quindi che inizieremo
il nostro viaggio alla scoperta
dei migliori trucchi per far conoscere il nostro sito Web.
Come per tutti gli strumenti,
per usarli al meglio è necessario conoscerli in maniera approfondita. Innanzitutto cos'è
un motore di ricerca e come
funziona? Quali sono i più diffusi e utili?
Un motore di ricerca è un
servizio che consente di cercare informazioni all'interno di
Internet. Con informazioni non
intendiamo solo pagine Web,
ma anche file di ogni tipo: immagini, documenti di altra natura (ad esempio i PDF di Acrobat), tracce audio (MP3, WAV),
video e così via.
Ad essere corretti, questi
motori non cercano in tutta Internet, o in tutto il World Wide
Web, semplicemente eseguono
una ricerca all'interno del loro
database, che si compone di
tutti quei file che i loro spider
rintracciano. Prima parola magica: spider, per chi conosce
l'inglese, spider significa ragno.
Questo perché i software di cui
si avvalgono i motori di ricerca,
scandagliano il Web proprio
come fanno i ragni all'interno
delle ragnatele.
Ogni motore di ricerca ha
uno o più spider (chiamati anche bot) che periodicamente
navigano il Web e schedulano i
contenuti all'interno dei loro
database. Questo tutto automaticamente.
Il nostro primo obiettivo
sarà quello di rientrare tra i
percorsi dei bot.
Non tutti però fanno uso degli spider. O meglio, esistono
dei siti Internet che spesso
vengono accumunati ai motori
di ricerca ma che in realtà non
lo sono e per questo, non fanno
uso di software come gli spider.
Motori di ricerca
Un motore di ricerca è appunto un sito che scandaglia e
scheda il Web con l'utilizzo di
software automatici. I principali motori di ricerca italiani sono
il Trovatore, raggiungibile all'indirizzo http://www.iltrovato
re.it e Arianna, reperibile su
http://arianna.iol.it. All'estero, il
più famoso e conosciuto è Google (http://www.google. com, in
versione italiana su http://
www.google.it) ma ne sistono
altri come Altavista (http://
www.altavista.com, disponibile
in Italia su http://www.altavi
sta.it), MSN http://www.msn. 8a lezione
com, in italiano su http://
www.msn.it).
Directory
Le directory sono servizi
che raccolgono e catalogano i
siti in base al loro contenuto. In
Italia, il più conosciuto sito di
questo tipo è Virgilio (http://
www.virgilio.it) ma anche all'estero ce ne sono molte, tra cui
lo storico Yahoo! (http://www.
yahoo.com e in italiano su
http://www.yahoo.it) e Dmoz
(o Open Directory Project:
http://www.dmoz.org, la cui localizzazione italiana è reperibile all'indirizzo http://www.
dmoz.org/World/Italiano). Un
altro esempio di directory di
successo è 100Links (http://
www.100links.it), nata per raccogliere i siti recensiti all'interno della sua mailing list che
suggerisce 25 siti a settimana
(da qui il nome, 100 links al mese) è ora la directory su cui si
appoggia l'intero network di
Dada con il sito SuperEva
(http://www.supereva.it).
In questo campo, le directory specializzate sono tantissime: esistono siti che catalogano solo pagine in una determinata lingua oppure che trattano un solo argomento. Ad
esempio esiste TuttoGratis
(http://www.tuttogratis.it) che
raccoglie solo siti che offrono
servizi gratuiti, stesso compito
svolto
da
FreeOnLine
(http://www.freeonline.it). Insomma, le strade da percorrere
sono tante, si tratta solo di seguirle tutte.
Metamotori
Trattiamo questo argomento
solo per completezza delle
informazioni. I metamotori infatti sono motori di ricerca che
restituiscono i risultati delle ricerche interrogando altri motori. Si può quindi fare ben poco per apparire in questi: sarà
infatti sufficiente comparire tra
i principali motori di ricerca
per essere inseriti anche in
questi. Alcuni esempi sono Metacrawler (http://www. meta
crawler.com), DogPile (http://
www.dogpile.com) e WebCrawler
(http://www.web
crawler.com).
Queste differenze, spesso si
assottigliano con accordi di
marketing tra le società che gestiscono i motori di ricerca e le
directory. Ad esempio Virgilio e
Yahoo! sfruttano anche il database di Google per offrire i mi-
85/88
gliori risultati. Google stesso,
per la propria directory
(http://directory.google.com)
fa uso di Dmoz e gli accordi
strategici ovviamente non si
fermano qui.
Una volta raggiunto un motore di ricerca, ciò che dovremo fare è trovare un link del tipo Aggiungi URL o in inglese
Add URL. Da qui poi, sarà necessario specificare l'indirizzo
del nostro sito e poi, compilare
gli altri campi che potrebbero
esserci stati richiesti: come titolo della pagina, descrizione,
keywords (ovvero le parole
chiave) e via dicendo. Se non
sapete che parole chiave usare,
pensate semplicemente con
quali termini volete che i navigatori di Internet possano trovare il vostro sito; evitate però
parole troppo generiche: rischiereste di trovarvi assieme
a qualche migliaio di siti che
sicuramente non agevoleranno
l'utente nel cliccare sul vostro.
Google il più utilizzato
dal popolo della Rete
È ovvio che il motore di ricerca più usato sia quello capace di portare più utenti. È altrettanto ovvio quindi, che il
motore di ricerca da tenere in
maggiore considerazione sia
proprio quello più utilizzato. In
Italia e nel mondo, quello più
usato è Google. Anche nei siti
con maggiore traffico, un posizionamento ben studiato su
Google può portare ad avere il
50% dell'utenza referente portata da questo motore di ricerca. Con il termine referente, intendiamo tutti quei visitatori
che cliccando su altri link arrivano al nostro sito.
Sul totale degli utenti arrivati dai motori di ricerca, Google
è capace di segnare, da solo, un
80% sul totale.
Balza subito in mente quindi, quale sia il motore di ricerca
da studiare per apparire in testa alle sue ricerche.
Google “dà il voto” alle
pagine Web
Quando lo spider di Google
(che prende il nome di GoogleBot) scheda una pagina Web, le
assegna un voto: questo voto è
dato da una lunga equazione
matematica i cui termini sono
ovviamente coperti da segreto
e nessuno, a parte gli ideatori e
gli sviluppatori di Google, ne
conosce gli estremi.
A ciò che è dato sapere agli
esperti del settore, una voce in
capitolo molto “pesante” nel
calcolo del voto sono i link verso una determinata pagina
Web. La regola di base è: più
link da siti esterni portano verso le nostre pagine, maggiore
sarà il nostro Page Rank.
Un'altro valore che farà aumentare il nostro Page Rank
(PR) è il voto dato da Google alla pagina che ci linka. Detto in
parole semplici, se la nostra
Home page ha un PR di 5, se ci
linka una pagina con PR 7, è
possibile che il nostro Page
Rank salga.
Per aumentare quindi il voto
che Google assegna al nostro
sito, è necessario instaurare
degli scambi link tra noi e altri
siti. Meglio se il nome del collegamento ipertestuale conterrà
delle parole chiave: ad esempio se il nostro sito tratta di
modellismo statico, sarebbe
bene che i nostri siti partner ci
richiamassero con un codice
simile:
<a href=”http://www.indirizzo-deltuo-sito.com” title=”Modellismo
statico”>Modellismo statico</a>
Per maggiori informazioni
sui collegamenti ipertestuali,
fate riferimento a Pc Open di
Marzo a pagina 25 o alla relativa lezione sul CD.
Per conoscere quale sia il
Page Rank di un sito, è possibile scaricare e installare la Google Toolbar (http://toolbar.google.com), una banda che si aggiunge al browser Microsoft Internet Explorer e che riporta
appunto il Page Rank.
Questo comunque non è l'unico parametro che Google valuta per visualizzare i risultati
di una ricerca. Ne esistono altri
che tratteremo nel capitolo
“Ottimizzazione del proprio sito”.
Software per l'inserimento
dei siti Internet nei motori
di ricerca
Esistono software studiati
appositamente per gestire i
motori di ricerca. Questi programmi, nati all'inizio solo per
inserire il proprio sito nei motori di ricerca, sono ora delle
vere e proprie suite per capire
quanto stia funzionando il lavoro di segnalazione del proprio sito. È infatti possibile, oltre al classico inserimento automatico su più motori, rilevare il proprio ranking, e applica-
re quindi le migliori strategie
per risultare in testa ai risultati. Ma cosa è questo ranking?
È un termine inglese che indica la posizione con cui il nostro sito appare nei risultati di
una ricerca in base ad una determinata parola chiave.
Ad esempio, se il nostro sito
tratta di modellismo (magari
statico) e se digitando su Google i termini modellismo statico
il nostro sito apparisse in
180esima posizione, è ovvio
che il nostro ranking sarebbe
troppo basso e che sarebbe
ora di studiare qualche piccolo
trucco per migliorare la propria posizione.
Si ottengono vantaggi reali
nell'utilizzo di questi software?
È inutile negare che la strategia migliore sia quella di effettuare la segnalazione a mano. Questo perché potremo via
via ottimizzare le tecniche che
impareremo nel prosieguo dell'articolo in base al motore di
ricerca che ci troviamo di fronte. Un software con una segnalazione “selvaggia” del nostro
sito, non potrebbe ottenere lo
stesso risultato: avremo risparmiato tempo ma certo non
potremmo godere degli stessi
risultati.
Questi software infatti, vengono usati da quei WebMaster
che devono gestire decine di siti e devono quindi curarne la
loro posizione nei motori di ricerca. Con numeri simili, è meglio avere dei risultati minori
ma poter avere in ogni momento il polso dell'intera situazione
sotto mano: al massimo, i siti di
punta possono essere seguiti
in maniera manuale.
I software più diffusi
sul mercato
L'inserimento manuale del
proprio sito nelle directory e
motori di ricerca è obiettivamente la soluzione migliore per
ottenere i risultati più soddisfacenti.
Per chi non avesse comunque il tempo, le capacità oppure avesse in gestione diversi siti Web da inserire e ottimizzare
nei motori di ricerca, i software
creati ad hoc per il posizionamento, automatizzano il tutto e
sostituiscono completamente
il lavoro manuale del WebMaster.
Ne esistono di diversi, gratuiti o a pagamento, ognuno
con le proprie caratteristiche
8a lezione
interessanti. Quasi tutti questi
tool inoltre, forniscono strumenti avanzati quali ad esempio la verifica del posizionamento del sito tra centinaia di
motori di ricerca ed il miglioramento delle pagine (ad esempio Meta Tags e frasi chiave),
per ottenere i migliori risultati
nelle ricerche.
Un solo consiglio, non abusatene, anche perché potreste
ottenere l'effetto contrario, essere cancellati dai database
per uso illecito nelle segnalazioni.
AddWeb Web Site Promoter 6.0
http://www.addweb.it
Costo: 69 euro. Lingua: inglese
Uno dei più completi software di promozione Web disponibile sul mercato.
È possibile prelevare e provare AddWeb in versioni successivamente registrabili per
valutarne le potenti funzionalità. La versione trial è disponibile nel nostro CD Guida.
Ecco le funzionalità di maggior interesse di AddWeb Web
Site Promoter:
• Analizza le pagine per ottenere il migliore posizionamento
• Costruisce pagine Web ottimizzate per determinate parole
o frasi chiave.
• Inserisce il sito nei principali
motori di ricerca nazionali e
internazionali e in altre migliaia
risorse di ricerca.
• Monitorizza di continuo la
posizione acquisita nei motori
di ricerca.
• Monitorizza in maniera dettagliata l'accesso alle pagine
Web con SiteStatsLive.
• Aumenta la Link Popularity
con Linktrader.
SubmitWolf IT v5.0
www.trellian.com/it/submitwolfit
Prezzo: 165 dollari. Lingua: italiana
Pacchetto
software professionale, ma
di facile utilizzo, progettato
specificamente per la promozione di siti
Web. Ha anche una versione
gratuita con forti limitazioni rispetto alla release ufficiale, che
ha raggiunto 1.500.000 copie
scaricate. Si può quindi tranquillamente definire il prodotto
più diffuso attualmente sul
mercato.
Tra le caratteristiche principali segnaliamo:
• Registra la tua pagina ad oltre
1000 motori di ricerca in pochi
minuti.
• più di 280 motori Italiani.
• Aggiungi il tuo link a più di
500.000 pagine di link.
• Registra quanti URL vuoi senza costi addizionali.
• Registrazione Prioritaria a Pagamento in 48 ore su Altavista,
HotBot, Inktomi, LookSmart,
MSN, Overture, Slider, whatUseek e molti altri siti.
• Analizza come si classificano
le vostre pagine nei motori di
ricerca.
• Ottimizza la tua pagina Web
per migliorare il posizionamento.
• Creati specificamente per i
siti Web italiani, con l'enfasi sui
motori italiani.
regole di segnalazione del sito
(ad esempio su Google non effettuerà giornalmente la richiesta di inserimento, per non rischiare la cancellazione dell'URL per motivi di spamming).
Web Position Gold 2
www.webposition.com/product.htm
Prezzo: 149 dollari; Lingua: inglese
Active WebTraffic 5.0
www.myrasoft.com/activewebtraffic
Prezzo: 119 dollari. Lingua: inglese
Active WebTraffic è una
nuova generazione
di
software per
la promozione
di siti Web in
grado di sottoporre automaticamente il vostro sito a
300.000 motori di ricerca, directories, mezzi di informazione e liste di Web site. Myrasoft,
il produttore, certo della qualità del suo sistema di promozione, offre una versione trial.
Active WebTraffic ha ricevuto numerosi premi come il
software di promozione Web
più potente su Internet.
In breve le peculiarità del
programma:
• Facile da imparare ed utilizzare
• Possibilità di aggiungere i vostri motori di ricerca preferiti
al datababase dei presenti
• Ricerca automatica dei motori di ricerca.
• Report dettagliati sui risultati ottenuti.
• Imposta automaticamente le
Web Position
Gold 2 è uno dei più
apprezzati software
per l'indicizzaziosul CD
ne, l'ottimizzazione
delle pagine Web
Guida di
ed il controllo del
PC Open
posizionamento
dei siti sui motori di ricerca rispetto alle parole chiave selezionate. Il produttore di Web
Position Gold 2 offre agli utenti
anche una versione trial, (disponibile per l’installazione all’interno del CD guida allegato
alla rivista).
Le principali caratteristiche
del programma sono:
• Registrazione in più di 94 motori di ricerca internazionali
(compresi gli italiani Iol, Lycos,
MSN, SuperEva, Tiscali, Virgilio
e Yahoo Directory).
• Analisi delle pagine Web in
funzione del posizionamento.
• Creazione di pagine ottimizzate per il posizionamento.
• Download delle pagine sul
proprio server.
• Registrazione sui motori di ricerca.
• Analisi dettagliata del posizionamento.
3 Ottimizzazione del proprio sito
vvero come far sì che il
nostro sito sia strutturato
in maniera tale da piacere
ai motori di ricerca.
La prima regola è molto semplice: fare in modo che tutte le
pagine che dovranno figurare
nei risultati di una ricerca, siano linkate tra loro. Ciò non significa che le pagine devono
contenere un link verso tutti gli
altri documenti, ma è bene che
ogni pagina contenga un richiamo per tornare alla home
page e un menu che riporti almeno verso le sezioni princi-
O
86/88
pali. Dalla Home page poi, dovremo richiamare quelle sezioni che per noi sono più importanti. I bot dei motori di ricerca
infatti, sono in grado di passare
da un link ad un altro in maniera automatica ed è quindi essenziale che riescano a rintracciare e quindi schedare tutte le
pagine del nostro sito.
I trucchi degli esperti
Gli sviluppatori Web più
esperti, quando si trovano di
fronte alla creazione di siti Internet, seguono delle re- STRUTTURA
DEL SITO
Nell'immagine
abbiamo
abbozzato una
possibile
struttura del
sito: dalla
Home page è
possibile
raggiungere le
principali
sezioni. Ogni
pagina poi,
dovrà
contenere un
link per tornare
alla Home page
e un menu per
raggiungere le
altre sezioni
8a lezione
gole che saranno loro utili nel
momento in cui dovranno segnalare il sito ai vari motori di
ricerca.
<title>Modellismo statico: le foto
delle creazioni di Mario
Rossi<title>
Gli headings
I meta tags
Una buona abitudine, è quella di inserire in ogni pagina del
proprio sito i meta tags description e keywords. Questi
sono dei marcatori che raccolgono la descrizione del sito e le
parole chiavi. Tornando all'esempio del modellismo statico,
questi due marcatori andrebbero definiti come segue:
<meta name=”description”
content=”Le fotografie delle mie
realizzazioni di modellismo statico:
dalle moto da corsa alle auto di
Formula 1, passando per gli aerei
civili e i paesaggi.”>
<meta name=”keywords”
content=”modellismo, statico,
aerei, moto, corsa, corse, auto,
formula, uno, 1, paesaggio,
paesaggi, foto, fotografie”>
Per personalizzare questi
marcatori, è bene non superare
i 500 caratteri nel campo description e keywords.
Questi marcatori, seppur ormai ignorati da molti motori di
ricerca, è bene inserirli sempre
e comunque in tutte le pagine
del nostro sito. Nei casi in cui
ce ne fosse bisogno, potremmo
anche modificarli in base al
contenuto del documento.
Il marcatore <title>
Esistono poi altre regole di
primaria importanza. Ad esempio il tag <title>, che assegna un
titolo alla pagina e conseguentemente alla finestra del browser. All'interno di questo marcatore è bene definire poche
parole, ma che noi riteniamo di
primaria importanza. I termini
segnalati all'interno di questo
tag infatti, vengono presi in
considerazione con particolare
importanza. Ecco come:
Gli headings sono quei tag
<h#> dove # rappresenta una cifra da 1 a 6 e servono per gestire i titoli dei vari paragrafi. Per
chi li avesse dimenticati, può
fare riferimento a PC Open di
Febbraio e alle lezioni del CD.
I motori di ricerca danno
particolare importanza ai termini presenti in questi marcatori, perché spesso raccolgono
in poche parole l'intera pagina.
È per questo che è indispensabile inserirli e usarli al meglio.
I tags per la formattazione
Sono i cosidetti inline elements, analizzati su questo
stesso corso nel numero di
Febbraio. Molti di questi assumono una particolare importanza rispetto al resto del testo. Ad esempio, quando ci troviamo di fronte a una parola
chiave per il nostro sito, sarebbe bene enfatizzarla, cosicché i
motori di ricerca siano in grado
di capire che quel determinato
termine ha una rilevanza maggiore.
Ad esempio, in un sito di modellismo, sarebbe utile applicare il tag <b> (bold, ovvero
grassetto) o <em> (emphatized,
ovvero enfatizzato) alle parole
più importanti, come appunto
modellismo, statico, auto, moto, e così via. Attenzione ad applicare queste formattazioni
solo al testo che verrà stampato nella pagina, e non quindi alle parole presenti nei meta tags
appena analizzati, nel <title> e
in generale agli elementi che
non visualizzano nulla nel documento.
L'unico problema, è che ogni
qual volta venisse applicato un
tag per la formattazione, il te-
sto viene appunto formattato
seguendo le istruzioni assegnate.
Ad esempio, un testo simile:
Questo è il sito di
<b>modellismo</b> di <b>Mario
Rossi</b>, all'interno del quale
potrai trovare <b>foto</b> di ogni
tipo sulle mie <b>creazioni</b>:
<b>formula 1</b>, <b>moto da
corsa</b>, <b>aerei civili</b>
ecc.
Verrebbe stampato a video
come segue:
Questo è il sito di modellismo di Mario Rossi, all'interno
del quale potrai trovare foto di
ogni tipo sulle mie creazioni:
formula 1, moto da corsa, aerei civili ecc.
Onde evitare il continuo accumularsi di testo in grassetto,
è possibile applicare un piccolo trucco. Dove realmente non
si vuole aumentare il peso di
una parola ma la si vuole comunque rendere più importante per i motori di ricerca, possiamo racchiuderla tra i tag
<strong> e </strong> e poi applicarci un foglio di stile che annulli la formattazione, ma non
intacchi l'importanza datagli
per i motori di ricerca. Ecco un
esempio molto semplice:
<html>
<head>
<title>Modellismo statico: le foto
delle creazioni di Mario
Rossi</title>
<meta name=”description”
content=”Le fotografie delle mie
realizzazioni di modellismo statico:
dalle moto da corsa alle auto di
Formula 1, passando per gli aerei
civili e i paesaggi.”>
<meta name=”keywords”
content=”modellismo, statico,
aerei, moto, corsa, corse, auto,
formula, uno, 1, paesaggio,
paesaggi, foto, fotografie”>
<style type=”text/css”>
<!-strong {
font-weight: normal;
}
-->
</style>
</head>
<body>
Questo è il sito di
<b>modellismo</b> di <b>Mario
Rossi</b>, all'interno del quale
potrai trovare
<strong>foto</strong> di ogni tipo
sulle mie
<strong>creazioni</strong>:
<strong>formula 1</strong>,
<strong>moto da corsa</strong>,
<strong>aerei civili</strong> ecc.
</body>
</html>
Il risultato è pubblicato nell'immagine in basso. L'unica
raccomandazione, è quella di
non abusare del trucco: i motori di ricerca più avanzati potrebbero rilevare la continua
apertura e chiusura del tag
<strong> e rilevare questo espediente come un trucco per falsare i suoi risultati. Insomma,
facciamo i furbi ma facciamolo
bene.
Dall'immagine è possibile vedere che il foglio di stile associato alla pagina ha
annullato la formattazione del tag <strong>, senza cancellare fisicamente il marcatore.
In questo modo, i motori di ricerca interpreteranno quelle parole come dei termini con
maggiore rilevanza rispetto al resto del testo
4 Cross promotion: ovvero pubblicità gratuita
uando abbiamo parlato
del Page Rank di Google, è
stato spiegato che è importante avere dei link verso le
proprie pagine. Un buon metodo per iniziare è quello di instaurare uno scambio link con
piccoli siti che trattano lo stesso argomento. In questo modo,
Q
87/88
gli utenti che visitano un determinato sito, potranno visitare
un altro sito in tema: il vantaggio è ovvio... quando i due siti
hanno un numero di utenti pressocché simile, entrambi potranno aumentare gli accessi.
Cosa non importante poi,
quando lo spider dei motori di
ricerca passerà da uno dei due
siti, automaticamente schederà anche l'altro, il che non fa
altro che aumentare i vantaggi.
Esistono poi dei servizi che
mettono a disposizione dei sistemi per aumentare gli accessi
di un sito: questi sono gli scambi banner, scambi link e così via.
Ce ne sono davvero di tutti i gusti e Internet, in questo senso, è
una fonte inesauribile di informazioni. Maggiori informazioni
su questi sistemi di promozione
sono reperibili agli indirizzi:
http://www.risorse.net/gratis
http://www.tuttogratis.it
http://www.freeonline.it
8a lezione
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. Una storia
della comunicazione su Internet
abbinata a dati oggettivi e
suggerimenti per creare un mix
intelligente
Hops, 399 pagine, 19,90 euro
Uno dei più famosi esperti italiani di
promozione di siti attraverso i motori
di ricerca, spiega le strategie e le
regole fondamentali per muoversi in
questo ambito. Una buona lettura
per affacciarsi a questo mondo.
Apogeo, 159 pagine, 13,43 euro
Saldatura tra management e
marketing nella conduzione di un sito
Web aziendale. L’autore propone un
approccio molto sistematico alla
valutazione di efficienza del proprio
sito e alla sua gestione.
Apogeo, 346 pagine, 21,69 euro
Come puntare ai profitti nella
creazione di un sito, visto da un’ottica
americana. Il testo è una guida alle
attività essenziali di Web marketing,
depurate dai fallimenti e orientate su
casi che hanno raggiunto profittabilità.
Apogeo, 334 pagine, 21,69 euro
La promozione di un sito Web è un argomento caro a molti siti e come
avevamo anticipato, in molti si sono concentrati su questo
argomento. Grazie a ciò, le risorse disponibili sono davvero tante.
Iniziamo con un libro dal titolo Guadagnare con Internet
edito da Jackson Libri e scritto da Luigi Manzo, responsabile del sito
Internet Manuali.net. All'interno del testo, si trovano poco più di 150
pagine con le principali tecniche per la promozione di un sito Internet
e perché no, i servizi che permettono di guadagnare qualche euro
facendo pubblicità.
Su Internet invece, oltre ai link già segnalati, possiamo riportare
qualche sito specializzato sui motori di ricerca, come l'ottimo
Submission (http://www.submission.it),
lo storico MotoriDiRicerca (http://www.motoridiricerca.it)
e il giovane MotoRicerca (http://www.motoricerca.info).
Un po’ di netiquette
All'interno dell'articolo, quando abbiamo presentato le pratiche di
promozione da fare e da non fare, abbiamo accennato agli errori in
cui può incappare chi inizia a far pubblicità al proprio sito Web.
Innanzitutto è fondamentale guadagnarsi il rispetto degli utenti: è
importante quindi evitare accuratamente quelle pratiche che i
navigatori ravvisano come una mancanza di rispetto nei loro confronti.
Quindi attenzione allo spam.
Una volta che abbiamo aperto il nostro sito Internet, nessuno ci vieta
di scrivere un bel messaggio di posta elettronica per avvisare i nostri
amici più cari del lavoro appena svolto.
Attenzione però a segnalare la nascita del sito solo ed
esclusivamente ai nostri amici e non a tutte quelle persone che
abbiamo in rubrica o con le quali magari abbiamo appena scambiato
due chiacchiere e delle quali abbiamo il loro indirizzo di posta senza
neanche ricordarci il perché.
Quando invece andremo ad attivare i servizi di scambio banner,
scambi link e così via, attenzione a distinguere la pubblicità dai
contenuti del sito e ancora più importante, non inondare le pagine di
pubblicità: massimo due banner a pagina (uno sopra e uno in fondo)
e possibilmente, evitate tutti quei servizi che vi aprono nuove
finestre del browser in maniera automatica. I visitatori vi
ringrazieranno.
In esclusiva per i lettori: dominio scontatissimo e uno spazio di hosting gratis!
Avete trovato interessante il nostro corso e volete prepararvi a mettere alla prova le competenze acquisite? Per farlo
avrete bisogno di uno spazio vostro sul Web, dove potervi esercitare nello sviluppo di siti campione su server reali.
Ecco quindi la nostra iniziativa, che nasce
in collaborazione con Register.it, il più
importante registrar in Italia: nei prossimi
mesi avrete a disposizione gratuitamente
per un mese l’uso di uno spazio di hosting
dedicato, oltre ad una serie di altri servizi
supplementari.
In più, dal momento che per poter usare
lo spazio di hosting è necessario disporre
di un dominio, i lettori di PC Open in
esclusiva potranno acquistare da subito
88/88
il proprio dominio presso
Register ad un prezzo
scontatissimo (40% in meno,
lo sconto più alto oggi disponibile
sul mercato).
Il metodo è semplicissimo:
dovrete collegarvi al sito Internet
www.register.it/pcopen,
inserire il codice seguente: 2c7A4s
nel box all’interno della pagina
e a questo punto verrete inviati alla home
page del sito di Register, da dove le
registrazioni verranno scontate in automatico
del 40%.
Le registrazioni saranno comprensive di tutto
quanto è indicato all’indirizzo
http://we.register.it
/domains/allincluded.html.
Per il servizio di supporto inviare le e-mail
all’indirizzo [email protected]