1a lezione

A scuola con PC Open

Progetto
Obiettivo: diventare esperto nella creazione e cura di siti Web di alto livello qualitativo. Benefici: avere le competenze per produrre una presenza su Internet da protagonisti per s e per altri, unabilit da sfruttare sia per aiutare gli amici sia per conquistare nuove prospettive di lavoro
Approfondimenti sui migliori editor HTML freeware nella sezione OPEN Action a p.156 Sul CD GUIDA le versioni complete degli articoli. In pi sul CD i programmi (gratuiti e demo) che abbiamo citato.

Web Master
browser e vicina alle specifiche grafiche previste per il sito, conoscenza perfetta dei linguaggi usati per costruire le pagine (HTML, JavaScript, Perl CGI, DHMTL, CSS). Il Webmaster deve anche sapere come promuovere il sito sui principali motori di ricerca cos da attrarre traffico; come procurarsi e mantenere un nome a dominio; come integrare eventuali banner allinterno del sito, da utilizzare sia come fonte di guadagno (pubblicit) sia come promozione incrociata tra siti. Una volta che il sito onl ine, gran parte del suo lavoro sar centrato sulla pubblicazione di nuovi contenuti, che gli arriveranno nei formati pi diversi. Per questo motivo il Webmaster opera in modo tale che il sito sia strutturato in modo efficiente cos che laggiunta di pagine risulti unoperazione semplice e veloce. I problemi maggiori in questo senso si presentano con i siti statici, dove ciascuna pagina deve essere generata a mano e dove bisogna aggiornare continuamente gli elementi di navigazione per includere i nuovi contenuti. Loperazione diventa invece pi semplice nel caso dei cosid-

di Roberto Mazzoni

iventare Webmaster come assumere il comando di una nave oppure la conduzione di un treno. La destinazione e lo scopo del viaggio vengono quasi sempre scelti da qualcun altro, ma una volta partiti, spetta al Webmaster arrivare in porto secondo le scadenze previste e con il progetto completato. Nelle realt pi piccole, il Webmaster di solito anche responsabile direttamente di produrre il sito in tutte le sue componenti e di interagire con la societ di servizi che ospita il server e fornisce la connettivit agli utenti, nel caso di progetti ospitati allesterno, oppure di parlare con i responsabili dei sistemi informativi aziendali (magari un altro consulente nel caso di piccole aziende) per siti che sono ospitati allinterno.

Che cosa fa
Le competenze centrali di un Webmaster sono: progettare la struttura di un sito partendo dai contenuti che si vogliono pubblicare e dal percorso di navigazione che meglio si adatta alla situazione, produrre una struttura di pagina HTML che sia leggera, compatibile con i diversi

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

IL CALENDARIO DELLE LEZIONI

1 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

1/88

1a lezione
Lultima trincea
Il Webmaster rappresenta lultimo passaggio di controllo prima che il sito vada in linea ed in pole position ogni volta che si presenta un problema. Di conseguenza deve essere in grado dindividuare, correggere o far correggere rapidamente qualsiasi errore compiuto durante le precedenti fasi di produzione da programmatori, grafici e sistemisti, le persone, cio, che gestiscono fisicamente la macchina su cui risiede il sito. Per tale motivo deve disporre di una certa familiarit con i principali formati grafici del Web e con i linguaggi di programmazione usati nello sviluppo di siti dinamici. anche opportuno che abbia conoscenze elementari di sicurezza per poter evitare attacchi dallesterno che potrebbero compromettere limmagine del sito. importante infine che coltivi ottimi rapporti con altri Webmaster, per potersi avvalere dellassistenza di colleghi su problemi comuni e deve avere una buona sintonia con il provider che gestisce fisicamente il sito, oppure dove sapere mettere le mani sul server in prima persona. un Web developer). Quasi mai, invece, ci si aspetta che il Webmaster realizzi la grafica, a meno che si tratti un sito di servizio dove le informazioni compaiano quasi sempre in formato testo. Esiste naturalmente anche leccezione di Webmaster con particolare sensibilit grafica, capaci di svolgere pienamente anche le funzioni di Web designer, nel qual caso le possibilit di successo saranno ancora maggiori poich avranno pieno controllo delle varie fasi di realizzazione anche senza doverle eseguire necessariamente in prima persona. Nella pratica, i problemi principali a cui il Webmaster dovr prestare attenzione gli verranno proprio dalla grafica e da una programmazione imperfetta. Lintervento di un Web developer incompetente pu produrre intoppi nel funzionamento del sito difficili da individuare e risolvere. Invece un Web designer incompetente pu produrre pagine troppo complesse perch siano visualizzate correttamente in tutti i principali browser, grafica troppo pesante che rallenta i visitatori del sito, interfacce incomprensibili che conducono a una navigazione confusa, uso di plug-in poco comuni che creano problemi di compatibilit. Perci il Webmaster dovr essere pronto a intervenire non solo sulla struttura della pagina, ma anche sulla navigazione e sugli elementi grafici per rimediare al volo qualsiasi intoppo.

Dalla nostra community, una storia di successo

il nostro lettore Giuseppe Lachello ha creato il sito Mio Piemonte, che si sta rivelando unottima vetrina di presentazione

Saper fare un po di tutto

Ora che lepoca della New Economy finita e che ci sono sempre meno soldi per sviluppare e mantenere siti, spesso si chiede al Webmaster di realizzare in proprio anche la parte di programmazione necessaria alla produzione di un sito dinamico (normalmente affidata a GLOSSARIO
CONTENT MANAGER il responsabile dei contenuti pubblicati sul sito (testo e grafica) e da lui vengono le indicazioni operative per il Webmaster e il Web designer. In mancanza di questa figura, il ruolo viene spesso svolto dal Webmaster medesimo. LINGUAGGI DI DEFINIZIONE DELLA PAGINA questi linguaggi indicano al browser come visualizzare il contenuto di una pagina Web. I pi importanti e utilizzati sono lHTML (HyperText Markup Language), il DHTML (Dynamic HTML) e i CSS (Cascading Style Sheets fogli di stile in cascata).

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

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

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

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

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

2/88

1a lezione

1 I professionisti che affiancano il Webmaster

Web designer, coder, operatore grafico, Web developer, Content manager e Content editor: ecco le funzioni che svolgono le altre figure professionali

sistono almeno sei interlocutori con cui il Webmaster ha relazioni continue e dei quali, talvolta pu trovarsi ad assumere anche i compiti. Come abbiamo accennato, la produzione di un sito Web facilita il mescolamento dei ruoli sia per ragioni di economia, vale a dire non esistono mai soldi a sufficienza per ingaggiare tutte le persone che sarebbero necessarie, sia per motivi di urgenza: lincaricato di una determinata funzione potrebbe essere assente nel momento in cui sia necessario il suo intervento e perci chi presente deve poterne fare le veci, almeno in parte. La prima figura in ordine di tempo con cui il Webmaster entra in contatto il Web designer. Solitamente un esperto di arti grafiche capace di tradurre gli input del committente in una struttura grafica di pagina e di sito che abbia un bellaspetto, sia comprensibile dal navigatore, serva agli scopi del sito e sia realizzabile con gli strumenti tecnologici a disposizione (soprattutto osservando i limiti imposti dallHTML e dal modo in cui i vari browser lo interpretano). La seconda figura con cui il Webmaster entra in contatto subito dopo il cosiddetto coder vale a dire colui che stila il codice HTML o di programma che compone le pagine, partendo dalla bozza grafica preparata dal Web designer. Nel caso in cui abbia competenze centrate su HTML, il coder prende il nome comune di Web editor, nel caso invece sia competente nei linguaggi di scripting lato server (come Perl, ASP eccetera) prende il nome comune di programmatore (le diciture formali si trasformano, poi, a seconda delle circostanze, ma la sostanza non cambia). Costui costruisce fisicamente le pagine seguendo le indicazioni di qualcun altro, ma non ha la responsabilit finale di pubblicarle sul sito. Loperatore grafico affianca il coder nella costruzione del sito. Egli in grado di gestire i va-

ri elementi grafici che compongono la pagina seguendo i dettami del progetto grafico e i vincoli della tecnologia Solitamente, loperatore grafico lavora con programmi di fotoritocco per creare immagini e bottoni, e per ottimizzare immagini fornite da altri. Nelle situazioni di budget ridotto, il Web designer svolge anche funzioni di operatore grafico, vale a dire implementa e continua nel tempo il progetto grafico che lui stesso ha ideato, mentre il Webmaster assume su di s il ruolo di coder. raro che un Webmaster operi anche da Web designer e viceversa. I due mestieri hanno matrici ben distinte. Il primo ha origini artistiche o grafiche, mentre il secondo prevalentemente tecniche. La figura successiva con cui i due entrano in contatto quasi immediatamente il Web developer, esperto nella progetta-

zione applicativa di un sito dinamico, vale a dire un sito che presenti le proprie informazioni attingendole da un database. Il Web developer acquisisce il lavoro di progettazione grafica e di codifica delle pagine HTML gi predisposto da qualcun altro, e vi aggiunge gli elementi applicativi necessari allinterazione col server. La sua esperienza centrata in prevalenza sui linguaggi di scripting e di interrogazione di database, ma di solito il suo corredo di conoscenze comprende anche alcuni linguaggi di programmazione. Nei progetti in economia, il Web developer finisce anche per svolgere le funzioni di coder e programmatore, realizzando in prima persona lintera pagina e lintero sito. Nellevoluzione delle proprie competenze, il Webmaster tende a sua volta a diventare Web

developer, assumendo sempre pi dimestichezza con la produzione di pagine dinamiche e degli elementi di programmazione. La quinta figura di contatto diretto per il Webmaster e per gli altri attori coinvolti (soprattutto il Web designer e il Web developer) prende il nome di Content Manager e ha la responsabilit di regolare i contenuti del sito al fine di generare traffico, come nel caso di un portale o di un sito dinformazione, incoraggiare lacquisto, come nel caso di un sito di commercio elettronico, trasferire nozioni, come nel caso di un sito di formazione a distanza. Nel caso di siti di grandi dimensioni viene assistito da Content editor che si occupano dellaggiornamento di particolari segmenti del sito. Il Content Manager ha solitamente unestrazione giornalisti-

I componenti di un sito
WEB MASTER WEB EDITOR ARCHITETTO INFORMATIVO

Struttura Testo
CONTENT MANAGER CONTENT EDITOR PUBLISHING SYSTEM

Abbiamo preso a prestito ed espanso un grafico presente nel libro Web Design Arte e Scienza di Jeffrey Veen per spiegare i contributi che le principali figure professionali descritte in questo corso portano nella realizzazione di un sito. Il Webmaster estende spesso il proprio ruolo alle altre due aree periferiche. Ma di rado tocca larea centrale, a meno che sia sguarnita

Regole di pubblicazione
Co Co tam tam WE WE ent en BD to o ESPPROG B DEV EVE ERT RAM ELO LOP O U MA PER SAB TOR ER ILIT E mp mp Cod Co d or or ice ice

i agin a mmgrafic I e e zion enta s Pre

ER O IGN FIC DESRE GRANG WEB ATO KETI R R OPE MA

3/88

1a lezione

ca oppure editoriale, e solitamente non dispone di competenze tecniche, ma deve avere una discreta sensibilit estetica e una conoscenza dei vincoli tecnologici del mezzo cos da trovare, assieme al Web designer, il giusto modo per presentare le informazioni. Ha contatti con il Webmaster o il coder per qualsiasi aggiornamento o variazione strutturale della pagina che diventi necessaria in corso dopera al fine di dare giusto risalto alle informazioni nuove o pi importanti. Dialoga occasionalmente anche con il Web developer, soprattutto nella fase iniziale del progetto, per mettere a punto gli automatismi necessari per lagevole pubblicazione e aggiornamento dei contenuti, solitamente realizzati tramite una specifica applicazione che prende il nome di Content Management System o, pi comunemente, sistema di publishing.

Nuove prospettive per il Webmaster come Content Publisher

Qui vale la pena di aprire una piccola parentesi. Nei siti di medio-grandi dimensioni, la scelta del Content Management System viene per prima e influenza tutte le altre attivit in cascata, visto che il sistema richieder limpiego di precisi linguaggi di programmazione e porr vincoli importanti nella struttura grafica della pagina e nella codifica HTML. La scelta del sistema di publishing non viene quasi mai eseguita dal Content Manager, ma spesso stata demandata a personale tecnico che opera sulla base dei requisiti funzionali espressi dal Content Manager e sui vincoli imposti dal budget e dalla piattaforma su

cui opera il server. Purtroppo la scelta risulta spesso sbagliata e si traduce in costi e vincoli inaspettati per tutte le parti in causa. Talvolta pu arrivare fino al punto di bloccare lo sviluppo del sito. Sono moltissime le realt della New Economy che hanno fallito proprio perch non hanno adottato un sistema di publishing fin dal principio, ne hanno scelto uno sbagliato oppure se lo sono fatto costruire su misura partendo da specifiche troppo generiche. Il motivo dellerrore stato nella mancanza, da parte del ruolo tecnico, di capire quali fossero le reali funzioni del prodotto. In conseguenza di ci venivano valutati principalmente gli aspetti di costo, compatibilit, prestazioni, facilit di programmazione e via dicendo, senza fare i conti poi con chi avrebbe dovuto caricare le informazioni e mantenere il sito, vale a dire il Webmaster e il Content Manager. Il risultato si espresso quasi sempre in procedure macchinose nel caricamento delle informazioni, nellimposizione di vincoli sul tipo dinformazioni effettivamente pubblicabili e nella rigidit della struttura del sito (difficile aggiungere, togliere o accorpare sezioni e canali). Da ci, lesigenza di apportare modifiche costose dellultimo minuto che diminuivano la stabilit complessiva del sito in virt dei continui cambiamenti incontrollati. In alcuni casi si cercato di aggirare il problema sviluppando sistemi di publishing che si basavano sul flusso di lavorazione di un giornale su carta. Di solito, il risultato stato migliore rispetto ai sistemi creati dal nulla, ma le notevoli diffe-

renze nei metodi di lavorazione delleditoria su carta e delleditoria Web hanno compromesso lutilit anche di questi ultimi. Senza considerare, poi, che un sistema di publishing professionale, capace di gestire siti complessi per una grande industria, costa diverse centinaia di migliaia di euro. Per questi motivi, di recente ha cominciato a svilupparsi una figura professionale ibrida che unisce alcune competenze di un Content Manager e quelle di un Webmaster o Web developer cos da poter scegliere o ancor meglio progettare ex-novo un sistema di publishing che sia compatibile con i costi stimati e che sia abbastanza flessibile da soddisfare le esigenze future del committente. Questa figura non ha ancora un nome ufficiale, ma noi labbiamo identificata come Web Publisher perch ricalca in qualche modo le funzioni di un publisher editoriale che sceglie la carta, il tipo di stampa e il tipo di processo da utilizzare per la produzione di un giornale, lasciando alla redazione il compito di generare i contenuti. Lultimo punto di contatto operativo il sistemista, vale a dire il tecnico esperto nella gestione del server su cui il sito opera. Spesso dislocato presso il provider che ospita il sito e ha la responsabilit di garantirne il funzionamento continuo, agendo principalmente sulla macchina, ma anche richiedendo variazioni al sito medesimo nel caso in cui si presentassero incompatibilit dovute al lavoro del Webmaster o del Web developer.

Altre figure di contatto

Esistono altre figure con cui il Webmaster pu avere rapporti

occasionali. La prima il responsabile di Web marketing, che solitamente il promotore nonch il finanziatore del sito, perci ne stabilisce gli obiettivi e ne approva la realizzazione. Le sue preoccupazioni principali sono la capacit di attrarre visitatori e di trasferire correttamente le informazioni che la sua azienda gli ha chiesto di comunicare. Solitamente chiede al Webmaster di fornirgli statistiche attendibili sul traffico, di promuovere il sito sui principali motori di ricerca e di allestire sistemi efficaci per pubblicare banner e informazioni promozionali. Si aggiungono poi tre figure che sono tipiche della fase progettuale e che possono confluire nellattivit del Webmaster. Il Project Manager coordina lattivit di tutte le figure coinvolte nel progetto e garantisce il rispetto delle tempistiche concordate. Larchitetto informativo trova la giusta distribuzione delle informazioni e delle relative etichette. Il suo compito sostanzialmente di facilitare il reperimento delle informazioni contenute in un sito, ottimizzando i percorsi per arrivarci e rendendole accessibili in vari modi contemporaneamente. Un sito con una buona architettura impedisce al navigatore di perdersi. Lesperto di usabilit infine misura o anticipa le reazioni dei navigatori al sito, ed elimina eventuali ostacoli o possibilit di equivoco. Spesso la sua funzione cumulata con quella di architetto, viste le ampie sovrapposizioni possibili tra i due mestieri. Un Webmaster esperto trova spesso loccasione per evolvere le proprie competenze per occuparsi anche di architettura e di usabilit.

4/88

1a lezione

2 Gli strumenti di lavoro

Editor testuali, visuali e ambienti grafici integrati: cosa sono, come funzionano e come scegliere la soluzione pi adatta a voi

Come scegliere lo strumento di lavoro adeguato

Esperienza Produttivit Ambienti grafici integrati Editor HTML testuali Editor visuali commerciali

er svolgere il proprio compito, il Webmaster ricorre a strumenti che semplificano la scrittura e la correzione delle pagine Web e degli script associati, spesso con uninterfaccia grafica che consente di creare intere sezioni della pagina senza scrivere nemmeno una riga di HTML. Il vero Webmaster professionista, tuttavia, deve essere in grado di scrivere completamente a mano un intero sito, se necessario, perch gli capiter sovente di dover correggere anche gli errori e i contenuti inutili introdotti proprio dai programmi di generazione automatica che dovrebbero aiutarlo. Gli strumenti di lavoro in questo campo si dividono in quattro categorie.

Editor visuali semplificati Capacit di spesa

Gli editor HTML testuali sono una necessit imprescindibile sia per chi comincia, cos da poter disporre di una palestra in cui imparare, sia per chi gi esperto, per non perdere controllo sulle pagine. Offrono tuttavia una produttivit bassa, a meno di essere virtuosi della tastiera. Gli editor visuali (FrontPage, Web Editor e cos via) sono una naturale evoluzione per chi vuole guadagnare velocit, soprattutto nella stesura iniziale del sito. Gli ambienti grafici integrati (Macromedia Dreamweaver, Adobe GoLive) offrono alta produttivit e controllo sullintero sito a chi ha gi esperienza e una discreta capacit di spesa colare portale che li ospita, imponendo quasi sempre la visualizzazione dei banner pubblicitari di questultimo. e i tag (marcatori) HTML rispetto al testo che costituisce il contenuto informativo della pagina (rappresentato solitamente in nero). Di solito prevedono finestre guidate per linserimento dei pi comuni tag HTML (marcatori di formattazione), di script gi pronti e di moduli (form), frame (finestre multiple nella pagina) e tabelle. Tra le funzioni tipiche abbiamo anche lanteprima allinterno di uno o pi browser, per verificare laspetto finale della pagina, il controllo dei link interni ed esterni, la riduzione automatica delle ridondanze e il trasferimento verso server remoti. Sono spesso gratuiti, ma ne esistono anche versioni commerciali di costo relativamente ridotto. Sono utilissimi per farsi le ossa e per correggere rapidamente pagine gi esistenti. Servono anche per ispezionare le pagine prodotte con pacchetti pi complessi al fine di controllarne la correttezza. Il fatto di dover scrivere tutto a mano, o quasi, ne riduce lutilit. La produttivit scende e aumenta le possibilit di errore, di conseguenza il Webmaster finisce per affiancarli o sostituirli con editor grafici che automatizzano gran parte della generazione delle pagine e di interi siti e che permettono di impaginare i contenuti lavorando col mouse e osservando immediatamente i risultati, anzich digitare centinaia di righe sulla tastiera e fare continue anteprime allinterno del browser. Alcuni Webmaster veterani comunque si limitano a usare i semplici editor di testo, facendone un punto di orgoglio, anche perch scottati dalle pri-

Editor on line gratuiti

Sono strumenti da usare nella produzione di siti personali, molto semplici, allinterno di portali che offrono spazio gratuito limitato e che prevedono uninterfaccia propria per la generazione facilitata delle pagine partendo da moduli gi impostati. Non sono stati inseriti in questa rassegna perch di fatto limitano moltissimo il formato e la struttura del sito e lo vincolano al dominio del parti-

Editor orientati al testo

Leggeri e precisi, costituiscono un elemento irrinunciabile nella cassetta degli attrezzi di un bravo Webmaster. Vi si ricorre per piccole correzioni al volo oppure per la scrittura dintere pagine, a seconda dei casi. Semplificano la scrittura di codice HTML, CSS, DHTML, JavaScript e cos via, controllando in automatico la sintassi dei comandi, evidenziando graficamente (a colori) i comandi

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 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

5/88

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 gli errori e di trasferimento a un server remoto. Sono indispensabili come base minima di lavoro per garantire una buona produttivit e per semplificare la gestione degli script e delle pagine complesse, oltre che di interi siti. Ne esistono diverse edizioni gratuite, ma non ce la sentiamo di consigliarle perch, a differenza degli editor di solo testo, questi programmi possono effettivamente rovinare una pagina gi ben costruita in partenza e costringervi a lunghe operazioni di correzione manuale. Lunico prodotto gratuito di caratura professionale che si pu segnalare in questa categoria Microsoft Web Matrix, che sindirizza in particolare a chi prevede di lavorare su siti dinamici dove sia necessario affiancare allHTML anche funzioni di programmazione e linguaggi di scripting. In alternativa, conviene orientarsi verso una soluzione commerciale garantita da una software house che gi operi in questo mondo da tempo e che offra anche continui aggiornamenti per tenersi al passo con gli standard. I due campioni di questa categoria sono Namo Web Editor e Microsoft FrontPage 2002. Questultimo, rispetto alle versioni precedenti, ha raggiunto una vera caratura professionale, pur mantenendo la proverbiale facilit duso. Segnaliamo in chiusura di questa categoria Easy Web Editor, un programma in italiano che consente di creare pagine Web semplicemente disegnandole al video, senza scrivere nemmeno una riga di HTML (www.visualvision.it). Molto indicato per chi vuole produrre un sito personale senza dover studiare, non consigliato invece ai Webmaster, visto che il sito viene costruito in formato proprietario e, solo alla fine, esportato in formato HTML, perci non possibile esercitare un controllo dettagliato su quel che succede. grammi complementari. Macromedia MX, la versione pi recente del prodotto, costituisce oggi la fusione di ben quattro programmi diversi e permette di spaziare dalla produzione di siti statici alla programmazione avanzata, integrandosi con Fireworks MX e Flash MX per le componenti creative, e con Cold Fusion MX per la componente programmatica sul server. Adobe GoLive 6.0 dialoga invece con PhotoShop 7.0 e ImageReady (per lottimizzazione delle immagini per il Web), con InDesign per lintegrazione tra editoria sul Web ed editoria cartacea, con Premiere per la gestione del video. Bench saranno ben pochi i Webmaster che si troveranno a utilizzare tutti questi strumenti e saranno ancora meno quelli che li utilizzeranno per partire, importante capire che tanto Dreamweaver quanto GoLive costituiscono punti di arrivo irrinunciabili per lo sviluppo e la manutenzione di siti come professione. Dreamweaver il pi diffuso e il pi tecnico. Sindirizza al Webmaster e al Web designer che abbiano anche vocazioni di programmatore. GoLive invece un prodotto di natura pi editoriale, destinato a chi debba gestire gli stessi contenuti sul Web e sulla carta e abbia uno spiccato background creativo. Entrambi costano cari, ma si ripagano ampiamente nelluso intensivo. Mettete in conto un sensibile sforzo di apprendimento per entrambi, visto che sono ormai diventati giganteschi e ricchissimi di funzioni. A loro beneficio, indichiamo che funzionano su piattaforme diverse (Windows, Mac) e integrano spesso anche ottimi strumenti tutorial per imparare cammin facendo.

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

Ambienti visuali integrati

Al terzo livello della scala troviamo gli unici due prodotti che hanno conquistato, negli ultimi anni di grande crescita del Web, la statura di riferimento per i Web Master professionisti: Macromedia Dreamweaver e Adobe GoLive. Oltre a riunire tutte le funzioni di impaginazione grafica delle pagine di gestione integrali dei siti, con tutti gli automatismi per il controllo e la validazione degli stessi, questi due prodotti hanno anche sviluppato collegamenti diretti con altre applicazioni dello stesso produttore al fine di costruire veri e propri ambienti di sviluppo integrati dove Webmaster, Web developer e Web designer possano condividere tutti la stessa famiglia di prodotti beneficiando di un facile scambio dei vari sottoprodotti che vanno a comporre il sito. Ancora pi interessante per il Webmaster, questi prodotti gli consentono dintervenire con rapidit ed efficacia su qualsiasi componente del sito Web, utilizzando un solo strumento che conoscono bene, anzich dover ricorrere a ogni genere di utility e di mini-pro-

Editor visuali semplificati

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

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 luso di uno spazio di hosting dedicato, oltre ad una serie di altri servizi supplementari. In pi, dal momento che per poter usare lo spazio di hosting necessario disporre di un dominio, i lettori di PC Open in esclusiva potranno acquistare da subito il proprio dominio presso Register ad un prezzo scontatissimo (40% in meno, lo sconto pi alto oggi disponibile sul mercato). Il metodo semplicissimo: dovrete collegarvi al sito http://we.register.it/pcopen oppure al sito www.register.it/pcopen, inserire il codice segreto x6Wa3P nel box allinterno della pagina e verrete inviati alla home page del sito di Register, da dove le registrazioni verranno scontate in automatico del 40%. Le registrazioni saranno comprensive di tutto quanto indicato allindirizzo http://we.register.it /domains/allincluded.html.

6/88

1a lezione

3 Per chi vuole approfondire: i libri consigliati

INDISPENSABIL E

La bibbia del Web designer propone lesperienza e i consigli di uno tra i progettisti che hanno fatto la storia del Web: Jeffrey Veen. Il libro vi parla di interfaccia, struttura e comportamento delle pagine. Altamento informativo, un classico. Apogeo, 235 pagine, 35 euro.
INDISPENSABIL E

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.

Usabilit nel redesign. Ecco la seconda opera di Jackob Nielsen, al di sotto delle aspettative, ma utile per chi sta affrontando il redesign di un sito complesso e vuole trarre spunto dallopera altrui. Il libro pi un elenco di cose da non fare che da fare. Apogeo, 310 pagine, 45 euro.
INDISPENSABIL 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.

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 E

Design e usabilit allitaliana. Pi concreto dei manuali di usabilit e pi ampio nei temi rispetto a un semplice testo di design. Offre leperienza completa di una progettista professionale italiana che mette in prospettiva le cose davvero importanti. Hops, 236 pagine, 18,60 euro.

Standard e tecniche concentrati in poche pagine con cenni sintetici che vi portano dalla navigazione, allusabilit, allaccessibilit, passando per nozioni sulla percezione dei colori e sulluso del linguaggio XML. Utile riepilogo per chi sa gi come fare. Tecniche Nuove, 212 pagine, 18,80 euro.

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.

Master di usabilit. Non si pu parlare di usabilit dei siti Web senza aver letto questo classico, che alcuni amano e molti odiano per il totale integralismo dimostrato dallautore, universalmente riconosciuto come liniziatore di questa disciplina. 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.

7/88

1a lezione

Dalla progettazione al lancio: come nasce un sito

rima di mettere mano alle pagine e alla scrittura di marcatori HTML, necessario definire la struttura del sito e la funzione dei diversi elementi che saranno nella pagina. Questa fase precede anche la stesura delle bozze grafiche che traducono in colore e immagini ci che si gi ideato schematicamente sulla carta.

La progettazione
Esistono tanti modi per progettare un sito quanti sono i progettisti, ma lesperienza degli ultimi anni dimostra che la sequenza ricorrente e forse ottimale segue queste fasi: raccolta delle informazioni sugli scopi del sito ed eventuale analisi della concorrenza, costruzione di una mappa del concettuale sito (disegno schematico), assemblaggio e sistematizzazione dei contenuti, definizione di un sistema di navigazione, definizione della struttura di pagine e interfaccia, assemblaggio del tutto in una sequenza che racconti il sito (storyboard), prototipo di sito navigabile che mostri dal vivo lo storyboard, progetto grafico e multimediale, progetto dinamico che definisca il tipo dinterazione che il sito avr con lutente e che stabilisca quali elementi di programmazione sar necessario aggiungere, incluso leventuale collegamento a un database che contenga i dati da visualizzare nelle pagine dinamiche.

template, vale a dire la pagina campione, senza contenuti, da cui possibile produrre molte altre pagine ciascuna con contenuti propri. Il template una sorta di modello o stampo da cui ricavare molte pagine singole che avranno uniformit visiva tra loro. Una parte determinante nella fase di produzione prima del lancio la formattazione dei contenuti, vale a dire la raccolta di tutte le informazioni che dovranno essere presenti sul sito al momento dellavvio e il loro montaggio allinterno di pagine HTML statiche oppure il loro inserimento e catalogazione allinterno di un server. Spesso si sottovaluta limpegno richiesto da questa attivit, di per s semplice, ma gravosissima in ragione della grande quantit di elementi che vanno elaborati e dallimpossibilit di averli tutti in un formato omogeneo fin dalla partenza. I contenuti arriveranno infatti dalle fonti e nelle forme pi disparate: molto di questo lavoro, alla fine peser sul Webmaster, sul Web editor e sul Web designer oppure sulloperatore grafico.

sistema se commessi da un navigatore reale.

Il lancio
Consiste di solito in unattivit frenetica per correggere allultimo minuto i difetti riscontrati durante la fase di test e per caricare i contenuti finali prima della partenza ufficiale, di solito accompagnata da una qualche attivit di pubblicit.

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

Il mantenimento
Segue, infine, la fase di mantenimento dove si correggono gli errori della fase di lancio e si attivano le procedure per consentire ai gestori del sito di aggiornarlo gradualmente e per mantenerlo stabile al crescere del numero dei navigatori. Questa la fase pi delicata e pesa fortemente sulle spalle del Webmaster a cui viene richiesta grande esperienza nel riconoscere e prevenire eventuali problemi. Qualsiasi intervento deve essere efficace e rapido, poich raro poter fermare il sito per lunghi periodi una volta che lo si avviato. necessaria una profonda conoscenza della piattaforma su cui il sito basato poich il comportamento dei server cambia drasticamente al variare del carico di lavoro. Elementi chiave in tal senso sono il tipo di server impiegato e il database scelto per leventuale attivit dinamica. Fa parte dellattivit di mantenimento anche ladozione di misure di prosegue sicurezza.
(versione integrale dellarticolo sul CD)

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

La realizzazione
Terminate queste fasi progettuali, si passa alla produzione vera e propria, realizzando i

sul CD n. 65

Fasi di progettazione
Raccolta delle informazioni sugli scopi del sito Analisi delleventuale concorrenza Costruzione della mappa Assemblaggio e sistematizzazione contenuti Definire un sistema di navigazione Strutturazione della pagina e dell'interfaccia Assemblaggio sistematico delle pagine del sito Prototipo solo testo Progetto grafico e multimediale Progetto dinamico Produzione Test Lancio Mantenimento

Risultato finale
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

8/88

1a lezione

4 Macromedia Dreamweaver MX, la nave scuola del Web design

la demo sul CD n. 65
cando anche la struttura dei vari elementi e le reciproche relazioni. Ne permette la manipolazione diretta, tramite mouse e comandi da tastiera. possibile disegnare o costruire visivamente elementi nella vista Struttura e osservare al tempo stesso il codice generato automaticamente nella vista Codice, o viceversa. Alternandosi tra le due, si acquista una conoscenza molto pi profonda del linguaggio HTML e delle sue particolarit, e si arriva anche a produrre sempre pi velocemente risultati di qualit. Molte delle risorse offerte dal programma sono proprio mirate a garantire la qualit del codice finale e notiamo una potenzialit didattica notevole: qualsiasi elemento HTML pu essere inserito da pulsante o da men, le rispettive caratteristiche sono quindi ispezionabili nella vista Codice, che mostra il tag con tutti i rispettivi attributi, oltre che allinterno di una finestra di propriet che costantemente visibile e mediante la quale sinterviene sulle propriet senza toccare il codice originale. Inoltre le funzioni di convalida segnalano la presenza di eventuali errori nella pagina o nel sito e ci portano direttamente al punto interessato, cos da correggerlo e imparare dai nostri errori. Il programma integra anche una nu-

onsiderato nettamente il pi diffuso tra gli strumenti professionali per lo sviluppo di siti, Dreamweaver ha da sempre offerto un efficiente ambiente di editing visuale delle pagine capace di generare automaticamente codice senza alterare quello gi prodotto a mano dallo sviluppatore. Non si tratta di una prerogativa da poco ed probabilmente la chiave del suo successo originale. Oggi il prodotto si presenta molto arricchito, di fatto riunisce al proprio interno quattro applicazioni che prima erano indipendenti e costituisce la prima completa integrazione nei prodotti Macromedia delle tecnologie acquisite da Allaire, societ americana creatrice di altri due prodotti celebri nel mondo dei Webmaster: Home Site (editor non visuale di elevata caratura) e ColdFusion Studio (ambiente di programmazione per creare siti con pagine dinamiche). Lobiettivo fondamentale di Dreamweaver MX di fornire un ambiente capace di soddisfare contemporaneamente le esigenze professionali di tre figure: Web designer, per la creazione grafica del sito, Webmaster per la costruzione delle pagine vere e proprie e Web developer per programmare la logica applicativa che permetta allutente dinterrogare un database attraverso le pagine del sito.

Si tratta perci del terreno perfetto per chi gi si sente preparato in uno di questi tre campi e vorrebbe ampliare le proprie competenze, diventando, se possibile, un esperto veramente completo. Per la precisione, nel nuovo Dreamweaver MX convergono il precedente Dreamweaver 4, con tutte le relative funzioni di editing visuale, di controllo centralizzato del sito, di amministrazione delle varie risorse e dintegrazione con le altre applicazioni grafiche di Macromedia (Flash e Fireworks); Home Site con le relative funzioni di editing manuale del codice HTML, XHTML o di qualsiasi altro linguaggio di scripting; UltraDEV per la programmazione con i linguaggi di scripting pi comuni (ASP, ASP.NET, JSP, PHP) e ColdFusion studio per progettare applicazioni che usino il server ColdFusion come interfaccia semplificata nella produzione di pagine dinamiche create mediante linterrogazione di un database. Questultimo in realt non integrato propriamente in Dreamweaver MX, bens allinterno di HomeSite+, evoluzione moderna di HomeSite 5, fornito nello stesso CD di Dreamweaver MX e utilizzabile come strumento di lavoro rapido per chi abituato a operare con il codice di ColdFusion e non ha particolare interesse alla struttura grafica

delle pagine. In sostanza, tramite Dreamweaver MX e HomeSite+ aprite le porte a qualsiasi tipo di sviluppo presente e futuro, con la possibilit di allargare le vostre conoscenze sfruttando un ambiente con interfaccia uniforme e con tutorial di buon livello, integrati.

Come si presenta
Il destinatario principale di un prodotto come Dreamweaver MX rimane il creatore di siti, Webmaster o Web developer, che ha bisogno di uno strumento veloce con accesso immediato al codice e al tempo capace di semplificare le operazioni mediante automatismi che propaghino qualsiasi variante allintero sito. Il programma si basa su tre elementi dinterfaccia: la finestra di lavoro vera e propria, divisa in due viste, i menu e i pannelli degli strumenti, e la finestra di controllo dellintero sito. Partiamo dalle prime: le due viste di lavoro principali sono: Codice e Struttura. Le si pu visualizzare alternatamene oppure contemporaneamente cos da vedere allistante come le variazioni delluna si propagano nellaltra. La vista Codice elenca tutti i marcatori e ne consente lediting diretto come in qualsiasi altro editor non visuale, la seconda invece mostra il risultato che tali marcatori produrranno sulla pagina finita, indi-

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

9/88

1a lezione
trita serie di esercitazioni in italiano che coprono HTML, fogli di stile, pagine dinamiche e altro ancora, con esempi da eseguire di prima mano. Una, la finestra Propriet sempre aperta sulla parte bassa dello schermo, indica i parametri del marcatore e ci permette di modificarli o inserirne di nuovi usando le sue caselle, senza dover scrivere nemmeno una riga. Sempre dalla finestra delle Propriet possiamo anche definire link ad altre pagine interne al sito oppure a siti esterni, confidando nel fatto che la sintassi sia sempre corretta. Qualsiasi variazione comunque visibile immediatamente nella finestra Codice cos da capire meglio quel che stiamo facendo. Una seconda finestra dispezione, pi complessa, denominata appunto Finestra di ispezione tag elenca tutti i possibili attributi di quel particolare marcatore, permettendoci di modificarli usando men a tendina e altri supporti grafici. Perci, combinando icone, men e le due finestre dispezione, possiamo generare unintera pagina senza nemmeno scrivere una parola direttamente, fino a quando ci sentiremo abbastanza esperti per inserire i comandi in prima persona, fruendo per del controllo e della funzione di completamento immediato fornita da Dreamweaver. Dulcis in fundo, il programma incorpora una serie di moduli gi pronti per gli usi principali (snippet) da poter integrare nella nostra pagina e da cui imparare, oltre che ben otto libri interi, forniti da editori di tutto rispetto come OReilly e Wrox, che descrivono minuziosamente i tag dei principali linguaggi: HTML, CSS, ASP, JSP, JavaScript, ColdFusion. ragiscono con gli altri. Insomma, una sorta di videoimpaginazione Web cresciuta anche lintegrazione con gli altri strumenti della famiglia Macromedia, sia in termini di similitudine dinterfaccia sia in termini di rapidit nel modificare elementi grafici e Flash mediante la tecnica di andata e ritorno. Qualsiasi oggetto modificabile con Fireworks MX o Flash MX pu essere aperto direttamente dallinterno di Dreamweaver lasciando che sia questultimo a passarlo temporaneamente in consegna alla nuova applicazione per poi riprenderselo a opera terminata.

Identikit
Dreamweaver MX il pi diffuso tra i Web editor professionali. Costituisce levoluzione del precedente Dreamweaver 4 e raccoglie al proprio interno anche le funzioni di UltraDev, HomeSite e ColdFusion Studio. Nasce per rendere efficiente il lavoro congiunto di diverse figure professionali: il Webmaster, il Web designer e il Web developer, offrendo a ciascuna una serie di strumenti completi. un prodotto complesso che richiede un certo impegno per poterlo conoscere e sfruttare a fondo, di contro offre una quantit notevole di strumenti per rendere pi rapida la gestione di un intero sito e pi precisa la produzione di pagine statiche e dinamiche (con elementi di programma al loro interno). Costituisce anche uneccellente base formativa, con numerose informazioni tutoriali, strumenti di verifica e costruzione automatica del codice. Unica nel suo genere la possibilit di avere due viste contemporanee della stessa pagina: una con il codice e una con la struttura grafica della stessa. possibile agire su una qualsiasi delle due, osservando immediatamente i cambiamenti riportati nellaltra. Punti a favore: - Incorpora le funzioni di quattro programmi prima separati - Ottima palestra formativa - Offre una vista contemporanea sul codice generato e sulla disposizione degli elementi sulla pagina - Consente di unire efficacemente il lavoro di creativit e di produzione tecnica - disponibile su diversi sistemi operativi, compreso Macintosh - Supporta la gran parte dei linguaggi di programmazione - Offre ricchi strumenti per la gestione di un intero sito - compatibile con gli standard pi recenti - Si espande gratuitamente attraverso moduli opzionali Punti a sfavore: - Complesso da imparare - Richiede un computer abbastanza potente - Manca un pieno supporto per il linguaggio Perl - Il codice generato con gli strumenti grafici richiede occasionalmente verifica manuale Scheda tecnica Sito produttore: www.macromedia.com Costo licenza: 589,50 euro, 146,20 per lupgrade da una versione precedente. Macromedia Studio MX, che include anche Flash MX, Fireworks MX e FreeHand 10 costa 1150,80 euro, 574,80 per la versione upgrade. Requisiti: Windows 98SE, ME, NT4, 2000, XP - Power Macintosh 9.2 oppure OS X 10.1.

Tanti approcci diversi per imparare il codice alla perfezione

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

Controllo totale del sito

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

Gli strumenti visuali per la produttivit

Il secondo metodo di lavoro offerto dal programma imperniato sulla vista Struttura. Qui la pagina viene disegnata come apparir allinterno del browser per, a differenza di una semplice anteprima, tutti gli elementi sono direttamente modificabili e si pu digitare testo, inserire immagini, liste, tabelle, moduli usando le stesse icone e gli stessi men gi usati nella vista Codice, con la differenza che qui gli elementi si posizionano direttamente nel punto della pagina in cui vogliamo e il programma ci mostra visivamente come inte-

sul CD 65

10/88

2a lezione
A scuola con PC Open

Progetto
L
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-

Web Master
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,

di Roberto Mazzoni

1 Progettare un sito statico

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 inforla 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:
Competenze e strumenti
(disponibile integralmente sul CD) 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 Sistemi di navigazione: impostare la navigazione del sito in modo che sia comprensibile, inequivocabile ed efficace.
Spiegazione dei tag HTML per una pagina vergine Esercizi su come creare una pagina vergine e su come progettare un sito

il corso

Sistemi di labeling: come scegliere correttamente le "etichette" che identificano i vari elementi di navigazione.

Lezione 2:
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 dellambiente di sviluppo integrato.
contenuti aggiuntivi sul CD Versioni integrali e complete degli articoli pubblicati sulla rivista

Le prossime puntate:
Lezione 3:
Modelli di pagine e tabelle

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.

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

11/88

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. La scelta dei nomi delle cartelle e dei file importante perch ci deve aiutare a ricordare che cosa ciascuno contiene senza doverlo aprire tutte le volte. Scegliete quindi nomi mnemonici ed esplicativi che ricalchino le etichette che avete adottato per il vostro sistema di navigazione (vedi sempre Tecniche di progettazione nella lezione 1). Il nome delle directory e dei file costituisce anche un ausilio al navigatore che li vedr comparire nella finestra del suo browser subito dopo il nome del dominio a cui il sito abbinato. Una regola importante nella scelta dei nomi di file e directory evitare caratteri speciali che possano essere incompatibili con il sistema operativo del server. Poich quest'ultimo pu variare, ci conviene adottare un approccio che renda i nostri file compatibili con Windows, Windows NT/2000 e con Unix/Linux. facile, basta mantenere i nomi brevi ed evitare l'uso di spazi bianchi (sostituiteli con un tratto di sottolineatura o con un trattino). Evitiamo anche l'uso di qualsiasi vocale accentata (sia maiuscola sia minuscola) e dei seguenti caratteri speciali: < , ; : > " ' * / \ & ! % ? = # () [] + il punto fermo ammesso, ma pu provocare confusione in Windows perci usatelo solo come separatore tra il nome e il suffisso obbligatorio e non aggiungete mai pi di un suffisso in cascata. Conviene evitare anche l'uso del segno del dollaro ($) e di qualsiasi caratte-

Ho trovato lavoro grazie a PC Open

Ci incontriamo allo Smau: sempre una sensazione strana vedere finalmente qualcuno con cui si intrecciata una relazione via Internet. Nei mesi cerchi di immaginarlo e poi eccolo l davanti a te, in carne e ossa. Ed ecco Beatrice Demont, la BeaBea della community di Pc Open, ventinove anni, solida e determinata, una ragazza che alla tastiera del pianoforte ha preferito quella del computer. Infatti spiega:Nasco come maestra di pianoforte, diplomata al Conservatorio di Genova, la mia citt. Ma dopo un po di tempo (e di tentativi), mi rendo conto che in ambito musicale non ci sarebbero state speranze, quindi decido di iscrivermi alluniversit, alla Facolt di Lingue. Prosegue gli studi con successo fino al giorno fatidico in cui si incaglia in un computer. Mi hanno chiesto di fare una ricerca su Internet: immediata la mia risposta - cos?-. Mi piazzano davanti a un PC nel laboratorio di facolt e mi dicono come si accende. Fine. Intorno a me matricole chattano, scambiano e-mail con tutto il mondo, scorazzano sulla Rete: invidia, quindi ferocia...decido che devo imparare. Parte dal computer, lo acquista, prende una sola: un chiodo, il commerciante mi aveva fregato. E ora che ci faccio?. Un suo amico le consiglia di acquistare PC Open.Da quel momento ho iniziato a studiare sulla rivista. Contemporaneamente preparavo lesame di informatica con il professor Parodi, che richiedeva come esercitazione la costruzione di un sito Web. Partivo da zero, ma con costanza, prima imparando a utilizzare bene Office poi programmi come Arachnophilia, e Front Page, nel giro di sei mesi ho preparato lesame, creato il sito e preso 30 con tanto di stretta di mano del professore e offerta di lavoro in facolt appena se ne sarebbe verificata lopportunit. Che si concretizzata proprio in questo mese: attualmente Beatrice fa una sostituzione come assistente e-learning al Centro Linguistico Multimediale di Interfacolt (Climi) e al Centro di Teledidattica dellUniversit di Genova. Il suo sogno? Rimanere in facolt e aprire un centro studi ricerche volto allo scambio di informazioni letterarie e critiche tra Italia e Francia. Fondamentali per questo, le sue competenze informatiche e ovviamente linguistiche. E, come ci si poteva aspettare da lei, non ha certo perso tempo: visto che Genova nel 2004 sar Citt della Cultura, ha gi inviato il progetto alla Provincia. BeaBea, noi di PC Open facciamo il tifo Daniela Dirceo per te!

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. 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

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.

12/88

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 (&quot;) 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 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

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

2a lezione
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-

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

Risoluzione di un indirizzo assoluto - URL

NAVIGATORE
URL www.digifocus.it server del provider server che ospita il dominio (maintainer) root directory di servizio

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

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

14/88

2a lezione
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. 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

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

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

Collegamento relativo indiretto

(consigliato)
home page
articoli

testi

immagini

testo.html link indiretto = sale di un livello

grafica.jpg .. / immagini / grafica.jpg 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

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

15/88

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 sviluppato. 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. 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.

Collegamento relativo completo

home page
articoli

testi
scende di 1 livello testo.html link completo = porta alla radice del sito

immagini

grafica.jpg / ar ticoli / immagini/grafica.jpg 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

Copie locali e aggiornamenti

Un sito statico nasce sul computer di chi lo sviluppa e

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

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

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-

16/88

PC Open 27 Dicembre 2002

2a lezione
bili. Sul Web si sono consolidati 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,

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

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)

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

17/88

2a lezione
per osservare l'animazione della 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. 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 ingrandimento), tolta l'eventuale barra di scorrimento verticale. Laltezza invece il numero di pixel disponibili nella finestra prima della "piega". Per capire quanto sia effettivamente grande il canovaccio, dobbiamo assegnare dimensioni in pixel ai vari elementi. Si comincia dal considerare la risoluzione del video utilizzata dal navigatore. Se immaginiamo che la media dei navigatori oggi disponga di monitor con almeno 800 x 600 pixel di risoluzione, scopriamo che l'area massima effettivamente utile per lo sviluppo di 780 x 433 pixel, calcolati empiricamente su una finestra di Internet Explorer all'interno di Windows XP con le principali barre di comando attive. Per una valutazione pi dettagliata vi rimandiamo a un articolo sul Web: Sizing Up the Browsers accessibile all'indirizzo Internet: http://hotwired.lycos. com/webmonkey/99/41/index3a_page2.html?tw=design. In generale vediamo che la dimensione considerata mediamente sicura per produrre una pagina visualizzabile sia di 584 x 599 pixel per schermi da 640 x 480 pixel, 744 x 410 pixel su schermi da 800 x 600 (i pi diffusi) e 968 x 578 pixel su schermi da 1024 x 768. L'elemento pi vincolate naturalmente la larghezza, poich in lunghezza sempre possibile eccedere, ricorrendo allo scorrimento verticale della pagina (scrolling), mentre lo scrolling orizzontale, bench usato da alcuni siti, va sicuramente evitato. Vediamo che i diversi siti standardizzano diverse misure di larghezza: Yahoo Italia, ad esempio, ha pagine larghe 735 pixel, Virgilio e Libero (IOL) arrivano a 760 pixel. Una volta decisa la larghezza complessiva della pagina, che sar anche la larghezza del primo pannello, cio quello contenente il logo, dobbiamo stabilire le dimensioni delle colonne o pannelli che seguono, uno parallelo all'altro. Una volta impostate tutte queste indicazioni, siamo pronti a costruire la pagina vera e propria. 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

Impostare gli spazi del "canovaccio"

Definita la struttura della pagina, bisogna "prendere le mi-

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

Tecniche d'impaginazione
Il Web non prevede strumenti per l'impaginazione grafica di elementi sulla pagina. Nato in origine per visualizzare

18/88

2a lezione
3

Le risposte alle domande di pag. 29

1. Progettare la struttura di un sito partendo dai contenuti che si vogliono pubblicare e dal percorso di navigazione che meglio si adatta alla situazione, produrre una struttura di pagina HTML che sia leggera, compatibile con i diversi browser e vicina alle specifiche grafiche previste per il sito, conoscenza perfetta dei linguaggi usati per costruire le pagine (HTML, Javascript, Perl CGI, DHMTL, CSS). 2. Sono programmi per l'inserimento manuale facilitato di codice HTML. Permettono di inserire i marcatori usando icone oppure voci di menu e controllano la sintassi dei marcatori che abbiamo inserito direttamente. 3. Un programma che nasconde il codice HTML lasciandoci lavorare direttamente sulla struttura visiva della pagina finale, usando strumenti di generazione automatica dei tag simili a quelli offerti dagli editor testuali. 4. Un programma che unisce tutte le caratteristiche pi avanzate di un editor testuale e di un editor visuale, aggiungendo funzioni per la gestione complessiva del sito e per il controllo di tutti i link. 5. Esatto e ambiguo. Il primo suddivide le informazioni in categorie reciprocamente esclusive, ossia le voci che compaiono in una categoria non compaiono in nessun'altra. Un esempio tipico unorganizzazione alfabetica, come nel caso di un dizionario, oppure cronologica, come nel caso di un archivio di articoli di giornale, oppure geografica: i locali di una citt. Il sistema ambiguo si basa sull'esperienza di navigazione del navigatore tipo e cerca di guidarlo quando non sa esattamente cosa cercare. 6. Tre: gerarchia, ipertesto e lineare. La prima quasi sempre presente complementata dalla seconda quando bisogna creare collegamenti diretti tra zone lontane nello stesso sito o verso siti esterni. La struttura lineare adatta per i corsi on line. 7. Finestra per digitale gli URL (indirizzi), i preferiti, i tasti Avanti e Indietro, il tasto home e la visualizzazione dei link gi visitati con colore diverso. 8. Essere facile da capire, rimanere costante, fornire un feedback, apparire contestuale, offrire alternative, richiedere uneconomia di tempo e di azione, fornire messaggi visivi chiari, utilizzare etichette chiare e comprensibili, essere idonea per gli scopi del sito, favorire gli obiettivi e i comportamenti dellutente. 9. Un sito statico contiene solo le pagine che abbiamo individualmente

Prendiamo un tipico portale Internet e misuriamo empiricamente lo spazio effettivamente disponibile per la visualizzazione della pagina all'interno del nostro browser (in questo caso Internet Explorer con le principali barre di comando attivate) su uno schermo della risoluzione complessiva di 800 x 600 pixel. Scopriamo di avere 780 x 433 pixel. Nella pratica, il limite consigliato di 744 x 410 pixel

sono i livelli (layer) di Netscape che tuttavia stanno cadendo in disuso con il ridimensionarsi della diffusione di tale browser. Chiude l'elenco l'impaginazione grafica realizzata mediante strumenti particolari come Flash. In tal caso usciamo completamente dal dominio dell'HTML e generiamo pagine che possono essere visualizzate solo mediante l'impiego di speciali plug-in (moduli aggiuntivi) nel browser del navigatore. Il plug-in di Flash viene ormai fornito gi in partenza

con Internet Explorer di Microsoft ed abbastanza diffuso nella Rete, tuttavia si consiglia di avere sempre una versione alternativa delle pagine (solo testo) per consentire l'accesso anche a chi Flash non c' l'ha oppure non lo pu utilizzare perch magari non vedente e costretto a far riferimento a un browser che "legga" i contenuti attingendo direttamente dalla codifica HTML.

Usabilit e accesso
I siti moderni, soprattutto quelli realizzati per la Pub-

Visualizziamo la stessa pagina del portale su uno schermo con risoluzione di 1024 x 768 pixel e misuriamo lo spazio empiricamente disponibile con tutti gli "optional" del browser attivi. Troviamo che la pagina che ha una larghezza di 735 pixel sta comodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato per compatibilit con tutti i browser nelle condizioni di default (senza barre di navigazione opzionali) di 968 x 578 pixel

realizzato per la pubblicazione e il navigatore non pu chiedere di vedere informazioni visualizzate in modo diverso da quello noi abbiamo definito in tali pagine. In un sito centrato su database, ossia dinamico, invece possibile avere una pagina campione (template) all'interno della quale riversare al momento le informazioni pi diverse a seconda di quel che l'utente chiede. 10. Riflettere pi fedelmente possibile il disegno gerarchico pensato per il sito, usando nomi mnemonici, mantenendo al massimo quattro livelli di profondit, usando solo caratteri minuscoli per documenti e cartelle, creando una cartella centralizzata per le immagini nel caso si voglia poi passare a un sito dinamico. 11. Un collegamento assoluto indica l' URL per intero e richiede al browser di uscire dal sito in cui si trova per raggiungere la pagina indicata, anche se questa appartiene al medesimo sito. Un collegamento relativo indica invece la posizione della pagina di destinazione in rapporto alla pagina di partenza oppure alla radice (directory della home page) del sito. 12. una pagina campione che ci servir come modello per molte altre pagine di contenuto del sito. 13. La linea ideale che separa la parte visibile della pagina da quella che pu essere vista solo attraverso lo scorrimento verticale (scrolling) dei contenuti. 14. LHyperText Markup Language nasce nel 1989 nel laboratorio europeo per la fisica delle particelle (CERN) come strumento per consentire la creazione e distribuzione di documenti ipertestuali, cio documenti di testo liberamente interconnessi tra loro. Il suo unico obiettivo consiste nella creazione di pagine di documenti visualizzabili via rete sulle macchine pi disparate, per mezzo dellintermediazione di uno speciale programma, denominato browser (sfogliatore, alla lettera) che riconosce i comandi HTML e visualizza di conseguenza il testo che essi racchiudono. 15. Il marcatore una porzione d'informazione che si aggiunge in testa e in coda a un blocco di testo per determinarne i confini, definirne la natura ed eventualmente l'azione da compiere su di esso. Il tag (etichetta) indica l'inizio e la fine dell'area di efficacia di un marcatore. Qualsiasi tag inizia con i simboli "<" oppure "</" e termina con i simboli ">" oppure "/>". 16. Le tabelle e i frame.

19/88

2a lezione
blica Amministrazione richiedono, 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 contenuti 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, qualunque modello scegliate. I pochi modelli che sono "originali" alla fine vengono usati poco. L'accessibilit di traduce invece nel fornire alternative testuali a qualsiasi cosa che non sia decifrabile se non guardandola su un monitor: tipicamente immagini e tabelle. Inserendo una nota di commento per ciascuna immagine e un sunto per ogni tabella, entrambi previsti dai rispettivi tag HTML, chi "legge" la pagina attraverso un sistema di sintesi vocale anzich guardarla a video, pu capire di cosa si sta parlando. Ci impone maggiore lavoro su chi produce contenuti, ma allarga il pubblico potenziale non solo ai portatori di handicap, ma anche a chi consulta un sito via telefono (attraverso sintetizzatore vocale) oppure dal browser vocale montato sullautoradio (uno scenario poi non tanto futuribile).

3 Pagine HTML e marcatori

HyperText Markup Language nasce nel 1989 nel laboratorio europeo per la fisica delle particelle (CERN) come strumento per la creazione e la distribuzione di documenti ipertestuali, cio documenti di testo liberamente interconnessi tra loro. Il suo unico obiettivo consiste nella creazione di pagine di documenti visualizzabili via rete sulle macchine pi disparate, per mezzo dellintermediazione di uno speciale programma, denominato browser (alla lettera sfogliatore o "visualizzatore") che riconosce i marcatori HTML e li elabora, estraendo il testo che essi racchiudono e visualizzandolo in funzione del tipo di marcatore usato. Costituisce unedizione ridotta di un linguaggio precedente, molto complesso e gi ben conosciuto nel mondo scientifico e informatico: lo Standard Generalized Markup Language, del quale mantiene solo le funzioni essenziali per la produzione di documenti di lavoro, adattate al concetto dipertesto. LHTML codifica ogni elemento della pagina mediante un sistema di marcatori, tag allinglese, che si pongono allinizio e in chiusura della porzione di testo che si vuole contrassegnare. La gran parte dei tag ha un significato strutturale, vale a dire spiega la natura di quella particolare porzione di testo: titolo, sottotitolo, paragrafo, tabella, immagine, collegamento (link) e non dice in che modo visualizzarla. Lintenzione originale era di lasciare al browser la scelta di

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

nal (soluzioni transitorie). La sintassi del linguaggio HTML semplicissima e si basa su parole inglesi comuni. Non occorrono particolari programmi per scrivere una pagina HTML, basta infatti un qualsiasi editor di testo. Limpiego tuttavia di editor dedicati sveltisce il lavoro e riduce gli errori. Ogni marcatore contenuto tra il simbolo di minore < e maggiore > senza spazi e si presenta solitamente in coppia, con un marcatore di apertura e uno di chiusura preceduto dalla barra inclinata. Grazie a questo approccio elementare, facile delimitare la porzione di testo a cui il tag si applica. Ad esempio <strong>testo in grassetto</strong> indica che la frase contenuta tra i due marcatori va visualizzata con forza (strong) il che significa in grassetto, nell'interpretazione abituale del browser Web (pu invece assumere forme diverse

in browser di natura diversa, come quelli usati sui telefonini abilitati alla navigazione di siti Internet). Nel caso in cui non ci sia alcun testo tra i due tag, il browser ignorer il tag e non visualizzer nulla all'interno della pagina. L'unica eccezione sono i tag che non prevedono un marcatore di chiusura e che perci producono un effetto in ogni caso. Un esempio il tag di ritorno a capo <br> che formalmente dovrebbe essere scritto <br/> al fine d'indicare che si tratta di un tag particolare. Esistono, poi, tag che hanno un tag di chiusura facoltativo e che perci producono un effetto anche se manca il testo corrispondente. Un esempio classico in questo senso il tag di paragrafo <p> che produce un ritorno a capo con inserimento di una riga bianca anche se il paragrafo fosse vuoto. XHTML, il nuovo linguaggio di unisce HTML e XML, rende obbligato-

Struttura minima della pagina

Qui vediamo la sequenza di marcatori indispensabili per costruire una pagina Web. Head contiene l'intestazione del documento, invisibile nella finestra del browser con la sola eccezione del titolo. L'intestazione serve per allegare alla pagina informazioni utili per i motori di ricerca e per altri scopi. Il documento vero e proprio, visibile al navigatore, contenuto tra i tag <body> e </body>

20/88

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 corsivo 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 dellarticolo sul CD)

sul CD n. 66

21/88

2a lezione

4 Per chi vuole approfondire: i libri consigliati

INDISPENSABIL E 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.

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

Guida intermedia per imparare lo sviluppo manuale di pagine HTML e luso appropriato dei tag pi importanti. Strutturato con una grafica facilmente leggibile, il libro assimilabile anche da un principiante, pur non essendo elementare. McGraw-Hill, 338 pagine, 18,50 euro.
E INDISPENSABIL

Ottimo riferimento professionale. Fornisce una preziosa base per la transizione da HTML 4 a XHTML, sia in termini generali, sia nel dettaglio del singolo tag. Una lettura indispensabile per il Webmaster che voglia costruire siti duraturi nel tempo. McGraw-Hill, 499 pagine, 33,50 euro.
E

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.

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 E

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

Approccio inedito allusabilit condotto da uno specialista italiano che riporta i concetti generali di questa nuova disciplina alle peculiarit del nostro Paese. Lettura interessante per allargare il proprio punto di vista. Apogeo, 170 pagine, 16,53 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.

Nonostante il titolo questo un volume ricco dinformazioni utili e consigli che possono servire anche al professionista. Affronta in dettaglio quel che un Webmaster dovrebbe sapere per rapportarsi con fornitori esterni. 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.

22/88

2a lezione

5 Strutturare i contenuti nella pagina: tabelle, frame e form

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

di riquadri o colonne che abbiano proporzioni ben definite rispetto al resto. Se ci affidiamo agli strumenti base del linguaggio, lunica forma di pagina possibile sarebbe un testo chilometrico, occasionalmente interrotto da unimmagine o da un link verso altri documenti. Talvolta questo pu anche essere sufficiente, come nei primi siti universitari e amatoriali che si sono visti sul Web. In tal caso non dovete far altro che iniziare a inserire il testo e le immagini in sequenza nella zona compresa tra il tag <body> e il suo gemello </body> che, come abbiamo detto, delimitano linizio e la fine del documento vero e proprio. Nella maggior parte dei casi, per, si vuole unimpaginazione pi raffinata, che divida la pagina in aree ben distinte, ciascuna con elementi propri, come ad esempio la struttura a quattro pannelli che abbiamo visto nei modelli dimpostazione della pagina. In tal caso, prima ancora di cominciare a inserire il contenuto, ci serve

una struttura capace di contenerlo. Le scelte possibili sono tre: tabella, frame e form. In realt esiste anche la possibilit di collocare gli elementi mediante le funzioni di posizionamento dei fogli di stile in cascata, CSS, ma queste ultime non sono supportate da tutti i browser e ne parleremo, pi avanti, quando affronteremo il tema dei fogli di stile. Il pi diffuso e versatile dei tre sistemi sono le tabelle, perch compatibili con tutti i browser e prive di controindicazioni in materia di usabilit e di estetica. Se le configuriamo senza bordo, le tabelle diventano una specie di griglia invisibile che tiene al loro posto i vari elementi della pagina, immagini e testo. Gli unici svantaggi delle tabelle sono il non garantire lassoluta stabilit delle dimensioni e delle proporzioni tra i componenti e la difficolt dimplementazione.

Particolarit dei frame

I frame sono invece pi facili da realizzare e offrono un controllo molto pi rigoroso degli spazi. Tuttavia presenta-

no importanti svantaggi di usabilit e di estetica. Dividono la finestra in diversi riquadri, ciascuno contenente una pagina Web indipendente, perci diventa impossibile far funzionare i tasti di navigazione in avanti e allindietro del browser. Infatti, con tre o quattro pagine contemporaneamente presenti a video, non chiaro quale sia la pagina in cui ci troviamo esattamente e in quale dei diversi riquadri debba essere caricata quella a cui si vuole ritornare. Inoltre, anche nel definire le istruzioni di navigazione nel sito, dobbiamo sempre indicare in quale pannello inserire la pagina a cui il link indirizzato, il che complica un poco i collegamenti ipertestuali. In materia di stampa si pu stampare un solo riquadro per volta e il browser non sa quale sia quello giusto a meno che glielo indichiamo noi usando una complessa sequenza con il tasto destro del mouse, ben poco amichevole per il navigatore comune. Infine la dimensione rigorosamente bloccata dei riquadri pu anche diventare un problema quando la pagina esce dai contorni del video e diventa necessario eseguire lo scrolling verticale. In tal caso compariranno una banda di scorrimento verticale e orizzontale (a seconda della direzione in cui il contento deborda rispetto al progetto originale) che sfigurano la pagina e ne complicano luso.

Form per la registrazione

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

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

2a lezione

6 Adobe GoLive 6.0 maestro di tabelle

on la nuova versione del suo celebre ambiente di sviluppo integrato, Adobe consolida una soluzione che particolarmente mirata allintegrazione tra editoria su carta stampata ed editoria sul Web, aggiungendo anche funzioni per la produzione di contenuti multimediali e mobili, cio da visualizzare su telefonino e PDA in alternativa al computer. Il quadro competitivo rispetto a Dreamweaver, lantagonista di sempre, migliorato drasticamente sia con laggiunta di una doppia vista che abbina in contemporanea codice e struttura grafica, sia con laggiunta di funzioni per il coordinamento del lavoro di gruppo che sono invece assenti dalla piattaforma Macromedia. Migliorata drasticamente anche lintegrazione con gli altri prodotti Adobe che vanno a comporre la Creative Suite, infatti GoLive 6.0 oggi pu importare livelli di Photoshop, illustrazioni vettoriali di Illustrator e animazioni di LiveMotion 2.0. Mantenuta infine lintegrazione con InDesign, il pacchetto di videompaginazione per leditoria tradizionale che consente un efficace passaggio dei contenuti dalla carta al Web e viceversa. Al momento esistono due suite che si contendono il mercato dei creativi che cercano un ambiente editoriale completamente integrato: Adobe Creative Suite, pi orientata al mondo dei creativi tradizionali che hanno bisogno di un efficiente sbocco sul Web, e Macromedia Studio MX che si rivolge invece a un ambiente puramente Web e che coordina la generazione di siti statici e dinamici, con particolare enfasi sui linguaggi di scripting e sullo sviluppo di applicazioni.

Identikit
Adobe GoLive 6.0 si colloca come il secondo ambiente di sviluppo integrato per l'impiego professionale sul Web. Rispetto al suo concorrente diretto, Dreamweaver MX, offre funzioni pi evolute di gestione delle tabelle, d'integrazione la carta stampata e di gestione di gruppi di lavoro. L'aggiunta di una vista del codice in parallelo alla vista grafica strutturale colma una lacuna che lo vedeva in svantaggio rispetto alle versioni precedenti di Dreamweaver e consente di avere due viste contemporanee della stessa pagina: una con il codice e una con la struttura grafica della stessa. possibile agire su una qualsiasi delle due, osservando subito i cambiamenti riportati nellaltra. Idoneo per chi viene dal mondo della grafica tradizionale e vuole creare siti oppure travasare lavoro editoriale sul Web senza traumi. Forti anche le funzioni di gestione di contenuti multimediali, grazie all'integrazione con LiveMotion. un prodotto complesso con un'interfaccia singolare e richiede un certo impegno per poterne sfruttare a fondo le caratteristiche. Ottime le funzioni di gestione integrata del sito. Dreamweaver, in confronto, appare pi orientato allo sviluppatore di siti che centra gran parte della propria attivit sulla produzione di codice e sull'integrazione con database. Pro - Eccezionale gestione delle tabelle - Ottima palestra formativa. - Vista contemporanea sul codice generato e sulla disposizione degli elementi sulla pagina. - Unisce efficacemente il lavoro di creativit e di produzione tecnica. - disponibile su diversi sistemi operativi, compreso Macintosh. - Viste inedite sulla gerarchia del sito e sulla struttura della pagina. - Offre ricchi strumenti per la gestione di un intero sito. - compatibile con gli standard pi recenti Contro - Complesso da imparare. - Richiede un computer abbastanza potente. - Il codice generato con gli strumenti grafici richiede occasionalmente verifica manuale. - Finestra di codifica diretta pi debole rispetto ad altri editor

Caratteristiche Produttore e sito: Adobe - www.adobe.com Requisiti: Windows 98SE, ME, 2000 con Service Pack 2, XP, per la funzione Web Workgroup Server richiesto Windows 2000 o XP Costo licenza: 589,50 euro, 146,20 per lupgrade da una versione precedente. Adobe Creative Suite Premium, che include anche Photoshop 7.0, Illustrator 10, InDesign 2.0, Premiere 6.5 e Acrobat Distiller 5.0 Prezzo: 2158,80 euro IVA compresa

Particolarit dell'interfaccia
GoLive si differenzia da qualsiasi editor visuale per il fatto di offrire una grande variet di viste per lavorare sul documento oppure sullintero sito. Il
Errata: segnaliamo un'imprecisione nella prova di Dreamweaver MX pubblicata lo scorso numero: il prezzo del prodotto Macromedia 574,80 euro, e 286,80 euro per l'upgrade

programma identifica quattro categorie di elementi e fornisce strumenti ad hoc per ciascuna. Le categorie sono la pagina nel suo complesso, il codice sorgente (HTML o di altro tipo), il sito e le funzioni avanzate, come ad esempio i fogli di stile. La prima categoria di oggetti la pi comune e contiene la pagina con tutti i relativi componenti: tabelle, moduli, testo e immagini. La sua lavorazione imperniata su una finestra di Layout che ne mostra una versione grafica modificabile. Lavorando con il mouse e i menu, possibile inserire, cancellare, spostare e ridimensionare qualsiasi elemento, osservando il risultato immediato a video. Le tecniche di lavoro sono due: inserire gli oggetti attingendo dalla palette dedicata, oppure costruire una griglia visiva su cui poi collocare dei segnaposto per gli oggetti. La griglia, che assomiglia alla gabbia dimpaginazione di una pagina su carta, si trasforma poi automaticamente in tabella, collocando tutti gli elementi al posto giusto. Questa particolare modalit progettuale, molto vicina al sistema di lavoro di un progettista grafico, non presente in nessun altro

editor HTML e viene fornita dal concorrente principale, Dreamweaver MX, solo grazie allimpiego di un prodotto complementare esterno, Fireworks MX. Il secondo elemento di lavoro che ci accompagna ovunque la finestra Inspector che mostra i parametri di qualsiasi oggetto selezionato permettendoci di modificarli senza intervenire manualmente sul codice. Si notano anche alcune finezze nella finestra Layout: il titolo della pagina immediatamente accessibile nella cornice superiore della finestra di Layout e pu essere modificato direttamente (come avviene anche in Dreamweaver), ma qui possiamo anche estendere il bordo superiore e accedere a tutti gli altri elementi dellintestazione (head), senza dover scorrere il listato HTML come invece accade in altri editor. In basso alla finestra, come in Dreamwaver, abbiamo lindicazione della larghezza in pixel della pagina su cui stiamo lavorando. Rispetto alla versione precedente, ora anche possibile aprire una finestra di esplorazione del codice immediatamente sotto alla finestra di Layout cos da vedere in che

24/88

2a lezione
modo le variazioni apportate graficamente si traducono in istruzioni HTML e, viceversa, per vedere come una modifica manuale dei tag si ripercuota sulla finestra di Layout che funziona come una sorta di anteprima immediata e modificabile. Questa visualizzazione doppia e contemporanea emula una prerogativa che finora stata unica di Dreamweaver. La differenza tra i due che Adobe GoLive non visualizza nella finestra Layout leffetto prodotto dagli eventuali fogli di stile, ma dispone in compenso di una finestra di Anteprima interna al programma che visualizza immediatamente la pagina nella sua struttura finale, invece di dover aprire una finestra esterna allo scopo come accade in Dreamweaver. Un altro modo unico di GoLive per visualizzare il codice sorgente a fianco della finestra Layout consiste nella palette del Codice Sorgente. Una finestrella ridimensionabile che si apre sopra la vista Layout e mostra la porzione di codice che corrisponde all'area selezionata. Il terzo modo possibile consiste nell'apertura di una speciale finestra denominata Visual Tag Editor che mostra la codifica del particolare tag su sui posizionato il cursore e consente di modificarlo agendo direttamente su quella particolare porzione di codice sorgente. menti di programma distintamente dai tag HTML e dal testo. Qui, a differenza di altri programmi abbiamo la possibilit di scegliere al volo, mediante icone, che cosa colorare: i marcatori distinti dai relativi attributi e distinti dal testo, gli elementi nel loro insieme (cio tag, pi attributi pi testo contenuto allinterno del tag), i soli collegamenti, il codice eseguibile su server. In questo modo possibile eseguire analisi selettive delle diverse componenti della pagina e intervenire di conseguenza. Alla pari di altri ambienti, troviamo la possibilit di visualizzare i numeri di riga e di attivare un a capo automatico (soft wrap) delle righe in modo da non dover eseguire lo scrolling orizzontale e al tempo stesso non modificare il codice con laggiunta di a capo permanenti. Linserimento di qualsiasi elemento HTML affidato alla stessa palette di oggetti che abbiamo visto nella finestra Layout e anche qui possiamo usare il selettore di colori per qualsiasi elemento colorabile della pagina. La finestra Inspector perde invece di utilit. Rispetto a Dreamweaver sentiamo la mancanza di una finestra grafica d'impostazione dei parametri di ciascun tag, sensibile alla posizione del cursore, e il completamento automatico dei tag in fase di digitazione diretta. Superlativa invece la gestione delle tabelle, quasi del tutto automatizzata, con completamento automatico degli elementi mancanti e con importazione diretta di qualsiasi genere 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. 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.

Funzioni speciali del programma

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

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 dellarticolo sul CD)

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

Operare direttamente sul codice

Esiste anche, naturalmente, la finestra per lediting testuale a tutto schermo. Si chiama finestra Origine e prevede la colorazione dinamica degli ele-

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
C
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-

Web Master
"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.

di Roberto Mazzoni

1 La tabella come elemento strutturale

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 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:
Competenze e strumenti
(disponibile integralmente sul CD) 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 Adobe GoLive 6.0

Contenuti aggiuntivi sul CD il corso

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

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 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 2:
Siti statici e linguaggio HTML
Progettare un sito statico Progettare la pagina Pagine HTML e marcatori Strutturare i contenuti della pagina

Lezione 7 - maggio 2003:

Interazione sul server

Contenuti aggiuntivi sul CD

Dimensionare tabelle e celle fluide,

Lezione 8 - giugno 2003:

Promuovere il sito

26/88

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

Un futuro ingegnere col Pinguino nel cuore

Ventisei anni, romano, Marco Leli appare un giorno nella nostra community per fornire il suo commento al nostro corso per diventare Webmaster. Lettore affezionato di PC Open (ci segue dal 1999), partecipa alla vita della community da spettatore per un po, finch decide di gettarsi nella mischia...e noi lo acciuffiamo subito: che ne dici di fare quattro chiacchiere con noi per raccontarci la tua esperienza?. Allinizio una certa ritrosia, poi la tentazione di apparire sulla rivista di informatica preferita ha la meglio. Marco iscritto alla facolt di Ingegneria Informatica delluniversit capitolina La Sapienza ma gli studi vivono una fase di stallo Luniversit stava andando un po per le lunghe, quindi ho iniziato a pensare cosa sarebbe stato meglio fare e a guardarmi un po in giro; capitata loccasione e ho deciso di frequentare un corso promosso dalla Regione e dalla Comunit europea per Progettista di applicazioni multimediali. Qui Marco prende dimestichezza e approfondisce gli argomenti che si ritrovano anche nel programma del nostro corso: HTML, Javascript, Dreamweaver e Flash, fondamenti di programmazione e ASP. Il corso termina con uno stage di cento ore presso una giovane azienda che sviluppa siti Internet. Allinizio mi sono occupato principalmente dello sviluppo in HTML, ma poi dallazienda mi veniva richiesta la conoscenza di PHP/Mysql. Grazie al loro aiuto (e pazienza) e un po di applicazione, ho iniziato a impratichirmi con questo ambiente di sviluppo. E anche se Marco consiglia di non affezionarsi mai a nessuna tecnologia e di usare, volta per volta, quella pi utile alle esigenze, si capisce da quello che dice che il suo cuore batte per il Pinguino. Linux indubbiamente un sistema difficile da usare, non intuitivo come lambiente Windows, crea pi problemi quando si devono utilizzare periferiche, i driver non sono sempre facili da trovare, ma indubbiamente la filosofia che sta dietro il sistema ha un grande fascino e poi c il vantaggio che gratuito. E secondo Marco, su cosa vale la pena di investire? Approfondire la tecnologia Flash, che mi sembra abbia grosse potenzialit: abbastanza portabile, gira sia sotto Windows sia sotto Linux e ha un buon supporto per la programmazione: credo che potrebbe essere piuttosto richiesta dal mercato. Sogni nel cassetto, programmi per il futuro? Non ho particolari progetti risponde Marco Spero di avere lopportunit di approfondire il settore di cui mi sto occupando adesso: seguire lo sviluppo delle tecnologie per il commercio elettronico, magari riprendere luniversit e intanto prendermi la laurea di primo Daniela Dirceo livello.

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

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.

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

27/88

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 dentro 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 utilizzati.

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 seconda colonna, che in origine era la pi larga avendo anche il testo pi lungo, ma per la quale non abbiamo indicato nessuna larghezza minima, si restringe al punto di mandare il testo a capo e determinare in tal modo una maggiore altezza per tutta la prima riga. La tabella mantiene comunque le sue dimensioni originali e la ripartizione degli spazi adesso : 146, 61 e 183 pixel (179 dell'immagine pi i quattro di contorno). Regola: unimmagine grafica ha sempre priorit rispetto al testo e rispetto a qualsiasi impostazione di larghezza definita per le singole celle o per la tabella nel suo complesso. La presenza di un'immagine determina in modo immutabile la dimensione della cella, della riga e della colonna a cui questa appartiene. Fase 5: aggiungiamo la stessa immagine anche nella seconda cella della seconda riga il che determina l'espansione della seconda colonna per intero alle dimensioni dell'immagine e il restringimento della prima colonna ai minimi termini, per insufficienti a mantenere le dimensioni originali della tabella che deborda oltre il limite imposto di 400 pixel portandoci alla una situazione: 43, 183 e 183 pixel. Regola: la somma delle larghezze imposte alle singole celle pu superare la larghezza massima definita per la tabella nel qual caso la tabella si allargher per adattarsi alle nuove misure. La presenza di elementi grafici in una cella ne blocca le dimensioni impedendone la compressione.

28/88

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-

cio comunque sempre pi diffuso grazie al diffondersi dei siti dinamici, i principali browser moderni dispongono di una funzione che riduce il ritardo di visualizzazione e che si chiama "rendering progressivo". Il programma comincia a visualizzare i primi elementi della tabella prima di averla caricata per intero. In tal modo, i primi elementi di una pagina lunga e complessa appariranno immediatamente, cos da riempire la finestra video che il navigatore sta osservando e dando lidea che la pagina sia disponibile per intero. In realt, il browser sta ancora lavorando dietro le quinte per completare l'elaborazione della tabella e comporre la porzione inferiore della pagina cos che sia pronta quando decideremo di eseguire lo scrolling. Di contro pu succedere che la pagina compaia inizialmente con un determinato assetto che si modifica dopo alcuni secondi quando il browser ha terminato la lettura della tabella nel suo complesso. L'unico accorgimento da adottare nel progettare una pagina inserita in una tabella globale sfruttando il rendering progressivo di creare i primi elementi in modo che non siano indipendenti dal resto della tabella. Tipicamente lo si fa creando una prima tabella orizzontale larga nidificata nella tabella primaria e larga quanto lintera pagina che contenga la barra del logo e i primi elementi di navigazione del sito. Dopo di che si prosegue a scendere con una serie di tabelle che si compongano da sinistra a destra e dallalto verso il basso. Qualunque sia la soluzione adottata, vale comunque il criterio di ridurre le tabelle al minimo e, in particolare, di ridurre la nidificazione progressiva delle tabelle (inserimento di una tabella in un'altra) perch una pagina troppo complessa richiede al browser molto tempo per essere elaborata e pu produrre errori inaspettati.

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

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

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)

29/88

3a lezione

Tabella semplice. Una tabella si apre e si chiude con la coppia di tag <table></table>. Ogni riga identificata da una coppia di tag <tr></tr> (che in inglese corrisponde all'abbreviazione di table row) e al loro interno troviamo varie celle, disposte in sequenza, e ciascuna delimitata dalla coppia di tag <td></td> (che in inglese significa table data). Affinch la tabella sia valida e visualizzabile deve contenere almeno una riga che contenga almeno una cella. Le celle vuote non vengono visualizzate da alcuni browser perci ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbe almeno contenere uno spazio fisso - non breaking space, ossia il simbolo &nbps.

Pagine ad assetto variabile: vediamo un esempio reale di pagina costruita integralmente con un layout fluido. La videata 1 larga 1.005 pixel (mintor da 1024 x 768 pixel), la 2 larga 735 pixel e la 3 larga 502 pixel. Qualunque siano le dimensioni della finestra del browser, tutti gli elementi rimangono visibili. La colonna di navigazione a sinistra ha dimensione fissa, mentre la colonna di testo e la barra orizzontale contenente il logo e la navigazione globale sono flessibili. L'unico elemento orizzontale che non si adatta il banner, che naturalmente ha dimensione fissa e scompare parzialmente quando la finestra viene ridotta alla posizione 3

fissa, ad esempio quelle contenenti i link di navigazione, mentre le altre abbiano una dimensione variabile, ad esempio quelle che contengono il testo.

Tag fondamentali di una tabella

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

cale, ma si tratta di soluzione usata di rado per le tabelle di layout e sconsigliata anche per le tabelle di dati, visto che si presta a interpretazioni diverse da parte dei browser. Se per errore il numero di celle presente in una riga non corrispondesse alle altre, la tabella sar scombinata e la visualizzazione risultante sar confusa. Ne consegue che difficile realizzare tabelle molto complesse senza perderne il controllo. I principali errori di codifica di una pagina HTML risiedono proprio nella costruzione delle tabelle. In particolare, una tabella non chiusa propriamente con il tag finale </table> pu scombinare la pagina al punto da renderla irriconoscibile. Possono nascere problemi anche dalla mancata chiusura dei tag interni di riga o di cella. Fortunatamente i browser moderni dispongono di strumenti particolari per compensare la complessa gestione delle tabelle. Internet Explorer, ad esempio, completa automaticamente una riga non chiusa quando incontra il marcatore dinizio della successiva (<tr>) e riesce anche a risolvere alcuni dei casi di tabella non chiusa. Pi rigidi sono invece Netscape Navigator e Opera; per tale motivo si consiglia sempre di eseguire unanteprima della pagina con uno di questi programmi prima di rilasciarla.

Le risposte alle domande di pag. 33

1. Consentono di controllare gli spazi nella pagina senza alterarne l'aspetto estetico. Sono compatibili con qualsiasi tipo di browser e offrono la massima flessibilit di configurazione, a fronte di una certa complessit di realizzazione. 2. In modo sequenziale, carattere per carattere, dall'inizio alla fine della riga per poi ricominciare dall'inizio della riga successiva. Solo al termine della lettura dell'intera tabella il browser sa effettivamente com' fatta e come debba essere riprodotta. 3. Le tabelle HTML non hanno colonne definibili in quanto tali. Ciascuna colonna viene costruita combinando in verticale le celle di ciascuna riga. 4. Sono tre: <table> per aprire e chiudere la tabella <tr> (table row) per aprire e chiudere ciascuna riga e <td> (table data) per aprire e chiudere ciascuna cella. 5. Le indicazioni fornite a livello di cella hanno sempre la priorit su quanto definito a livello globale di tabella. 6. Un layout basato su tabelle o elementi di tabelle che

hanno una larghezza definita in termini percentuali rispetto all'ampiezza complessiva della finestra del browser. Un layout fisso o statico usa invece tabelle con larghezza in pixel. 7. Una tabella costruita all'interno della cella di un'altra tabella. 8. Evitare una complessit eccessiva e, particolare, l'impiego eccessivo di tabelle nidificate. Ricordarsi che la larghezza di una riga coincide sempre con la larghezza della tabella o con la somma delle larghezze specificate per le celle che la compongono e che qualsiasi oggetto inserito in una cella pu influenzarne le dimensioni, alterando l'assetto complessivo della tabella. 9. La tabella di contenuto ha bordi visibili e talvolta anche uno sfondo. Contiene una serie di attributi stilistici che servono alla corretta gestione del testo e che non sono necessari in una tabella di layout. 10.La visualizzazione graduale dei primi elementi di una tabella prima che sia stata letta per intero dal browser.

30/88

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

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-

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-

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

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-

31/88

PC Open 35

3a lezione
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 considerarle 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).

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 colonne 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-

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.

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

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-

32/88

3a lezione
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.

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-

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

33/88

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

Identikit
Namo WebEditor uno dei pi popolari editor visuali in circolazione. Offre una buona miscela di funzioni orientate soprattutto alla progettazione, alla pubblicazione e manutenzione rapida di un sito statico. Include tutte le funzioni necessarie al Webmaster per coprire anche la componente di design. Indicato per progetti di media complessit e per chi vuole evolvere da un semplice editor a base testo verso un ambiente visuale economico e facile da imparare. Pro - Interfaccia semplice ed efficace - Ottima palestra formativa - La vista di layout consente la produzione istantanea di prototipi - Integra le componenti necessarie per produrre gli elementi grafici del sito - Include una gestione integrata del sito e delle sue risorse - Genera in automatico un HTML corretto Contro - Manca un editor specifico per i CSS - Scarso supporto per i linguaggi di scripting - Poco efficiente per la produzione di siti dinamici scrivere script da zero. A 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-

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

34/88

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 dellarticolo 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 Liter per registrare un dominio

uno dei business pi profittevoli della Rete che ha tenuto botta nonostante la crisi della new economy. Non a caso se su Yahoo si cerca lelenco delle aziende che vendono i vari .com o .it si trova un elenco che conta quasi una cinquantina di nomi. Il motivo si spiega facilmente. La vendita di domini non comporta il trasferimento di beni fisici, ma solo il trasferimento di oggetti digitali. Poi si porta dietro la vendita di altri servizi e infine il mercato continua a tirare perch la vendita dei suffissi si rivolge indistintamente a privati

e aziende. E soprattutto queste ultime non possono ormai fare a meno di avere una presenza in rete. Tutto questo testimoniato dalla crescita del mercato che oggi in Italia conta 742.939 domini, una cifra che in Europa inferiore solo a quella dellOlanda 790.304 del Regno Unito (3.635.585) e della Germania che guida la classifica dei paesi dellUnione europea con 5.666.269. Nonostante il ritardo nellutilizzo di Internet, lItalia ha risposto bene allofferta di domini che nel corso del tempo si andata ampliando. Dopo i classici .com, .net e .org e litalinon seguir il normale iter dei gTLD (.com, .net, .org). "Creato a garanzia della propriet industriale e della personalit delle realt aziendali, personali o pubbliche che ne faranno richiesta spiega Bruno Piarulli di Register.it , il nuovo identificativo destinato ad aprire nuovi orizzonti sulle attivit commerciali, culturali e sociali del Vecchio continente, contribuendo alla diffusione di Internet e dellecommerce in quella che, una volta allargata, sar la terza comunit al mondo per numero dindividui". E che il business sia importante lo testimoniano gli operatori che hanno iniziato gi a raccogliere le preregistrazioni in rete. Peccato che la Commissione europea abbia spiegato che le preregistrazioni potranno partire solo quando il futuro registro europeo sar operativo.

In arrivo il .eu
Appuntamento per lestate 2003. Dovrebbe essere questo il momento del debutto per il dominio .eu che servir a identificare le imprese del Vecchio Continente. Il 25 ottobre scaduto il termine per la presentazione delle manifestazioni d'interesse alla Commissione europea da parte degli organi interessati a diventare gestori dei domini .eu. Fra gli enti interessati c anche un consorzio italiano formato dalle authority italiana, belga e svedese alle quali in caso di vittoria potrebbero aggiungersi le authority slovena e ceca oltre a lIsoc Europe. Per la prima volta nella storia di Internet a decidere chi dovr gestire il registro del .eu non sar lICANN ma lUnione europea, alla quale rimarr la paternit del .eu, che in questo

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

quali .com, .net e .org, .biz, .info e .name, infatti, possibile anche registrare domini di due lettere. In Italia i domini possono essere acquistati da chiunque, persona fisica o giuridica, a patto che faccia parte dellUnione europea.

La struttura mondiale della Rete

Prima di affrontare la procedura di registrazione e gli enti italiani che governano Internet il caso di disegnare la struttura mondiale della rete. Il vertice costituito dallICANN (Internet Corporation for Assigned Names and Numbers), lorganismo che sovrintende allassegnazione dei domini. Si tratta di un ente non profit le cui scelte sono ratificate dal ministero del Commercio statunitense il cui board of director, secondo le nuove regole recentemente approvate, sar formato da 18 membri. Il consiglio sar eletto da un comitato elettivo e da tre organizzazioni che rappresentano i gruppi di proprietari di URL (Universal Resource Locator, l'indirizzo di una pagina Web su Internet). Sparisce cos la norma che prevedeva che cinque membri fossero eletti dagli utenti della Rete. Una decisione che secondo molti allontana il vertice di Internet dai bisogni dei navigatori. AllICANN spetta il compito di decidere quali siano i nuovi

35/88

3a lezione
domini da adottare e chi dovr gestirli. Un compito non facile soggetto a numerose pressioni (il business fa gola a molti) e che fino a oggi ha comportato tempi molto lenti nelladozione di nuovi domini che hanno causato anche la nascita di societ alternative delle quali parleremo pi avanti. Nonostante le proteste, ICANN rimane il massimo organo di Internet al quale delegata anche la scelta dei registry dei gTLD, le societ che si occupano di gestire i database dei vari .com, .org o .info. La scelta dei registry che si occupano dei ccTLD (Country Code Top Level Domain) invece fatta in modo autonomo dalle locali comunit Internet dei vari Paesi con il parere favorevole del governo. Il livello successivo costituito dai registrar o maintainer ai quali i registry appaltano di solito vendita dei domini. Di solito si utilizza il termine registrar quando questi soggetti possono vendere i gTLD e hanno la possibilit di scrivere direttamente nel database di chi gestisce questi domini. Si tratta di un privilegio riservato a pochi visto che le societ che possono vantare questa qualifica sono 110 nel mondo fra le quali c litaliana Register.it. Molto pi accessibile la qualifica di maintainer, il quale vende gli altri suffissi. In questo caso le richieste di registrazione devono essere inviate allAuthority e non si accede direttamente ai database. In Italia si preferisce utilizzare il termine maintainer. La Registration Authority (www.nic.it), che ha sede presso lIstituto per le applicazioni telematiche del CNR di Pisa, ha il compito di assegnare e registrare tutti i nomi a dominio che utilizzano il suffisso .it. La Naming Authority si occupa invece di stabilire regole e procedure attraverso le quali sono gestiti i domini. .com, .org e .net non prevista invece nessuna limitazione anche per i privati. A meno di offerte particolari o altri accordi, lacquisto del dominio vale per un anno. Alla scadenza di solito (questo dipende dai servizi offerti dalla societ che vi ha venduto il dominio) lutente viene avvisato e pu cos procedere al rinnovo o allabbandono.

Il trasferimento a pacchetti
Internet formata da un numero imprecisato di computer host collegati tra loro. Questi host dialogano trasferendosi pacchetti di dati che passano attraverso vari server Internet fino ad arrivare al destinatario. In questo viaggio i dati vengono riconosciuti e interpretati dai vari host che capiscono se sono destinati a loro o se devono trasmetterli a unaltra macchina. Il protocollo TCP/IP permette di effettuare queste operazioni trasferendo i dati a pacchetti. I pacchetti sono gruppi di dati che riportano sempre lindirizzo del mittente e quello del destinatario. Lindirizzo codificato a 32 bit e consiste in un alternarsi di 0 e 1 (codifica binaria). Il numero viene diviso in una sequenza di quattro cifre che sono poi trasformate in base dieci. Questo d vita a numeri come 192.153.169.24, e questa la tipica forma di un indirizzo IP. Ovviamente ricordarsi ogni volta la sequenza di numeri sarebbe troppo macchinoso, e per questo si pensato di introdurre la possibilit di legare a un indirizzo IP un nome a dominio. La traduzione da dominio a indirizzo IP affidata al DNS. Non tutti i nomi a dominio possono essere registrati. Esistono infatti nomi riservati. Per esempio non sono assegnabili i nomi di regioni e province, le sigle a due lettere delle province a tre lettere delle regioni, i nomi corrispondenti allidentificazione dellItalia e i nomi dei comuni italiani. Gov.it e governo.it sono riservati al sito dellesecutivo cos come it.it, Italia.it, Repubblica-Italiana.it e RepubblicaItaliana.it sono assegnabili solo agli organi istituzionali dello Stato.

Come si registra un dominio

Chi vuole acquistare un dominio .it oltre che essere maggiorenne deve firmare e inviare via fax (al numero 050/542.420) o per posta raccomandata ( Registration authority italiana, Istituto per le applicazioni telematiche del CNR, via Giuseppe Moruzzi 1, 56124 Pisa) una lettera di assunzione di responsabilit. La lettera pu essere di solito stampata da Internet nel sito del maintainer. Lassegnazione da parte della Registration authority non in tempo reale e segue il principio del first come first served. In sostanza se due persone o aziende inviano la richiesta di acquisto del medesimo dominio viene premiata la richiesta arrivata per prima a Pisa. Per controllare se un dominio gi occupato, ed eventualmente chi lha acquistato, bisogna interrogare il database della Registration Authority. Per farlo bisogna andare sul sito www.nic.it/RA/index.html oppure passare per i siti delle societ che vendono i domini che di solito offrono anche la possibilit di interrogare direttamente il database della Ra (come Register.it). Per ottenere un dominio sono necessari circa tre-quattro giorni. Una volta effettuata la registrazione la Registration authority provveder a rendere tecnicamente visibile in Rete lutente registrato. In pratica la Ra compie un atto amministrativo registrando il nuovo dominio e uno di tipo tecnico registrando il fatto che il dominio risiede in almeno due DNS, Domain Name Server. I DNS servono per convertire i nomi dei nodi (come www.pcopen.it) in indirizzi numerici IP. Di solito questi server sono di propriet della societ che ha venduto il dominio e ne ha effettuato la registrazione, ma nel caso di grandi organizzazioni (ad esempio Fiat o Microsoft) i server sono di propriet delle societ che in que-

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.

mail dal quale non arriva mai una risposta?

Il servizio di hosting
Spesso alla vendita dei domini abbinata quella dellhosting. Questo perch acquistare un dominio senza lo spazio Web non avrebbe grande senso a meno che non sia un acquisto di tipo difensivo fatto da societ che in questo modo vogliono cautelarsi dallutilizzo di nomi che potrebbero corrispondere a marchi che lanceranno in futuro. Nel caso invece lacquisto del dominio sia collegato allapertura di un sito necessario possedere anche lo spazio Web che spesso porta con s anche un servizio di hosting. In pratica la societ che ha venduto il dominio ospita sui propri server le pagine Web del sito e la posta elettronica. Anche in questo caso le offerte presenti in Rete sono molto differenti e prima di scegliere il caso di leggere attentamente le voci del contratto con i relativi servizi e soprattutto avere ben chiaro in mente cosa si vuole fare con il proprio sito. Se le ambizioni, per il privato o lazienda, si traducono semplicemente nel primo passo su Internet con un sito dedicato alla famiglia o una vetrina delle attivit aziendali non il caso di spendere molti soldi. Lo spazio gratuito spesso concesso con lacquisto di un

Quanto costa?
Lofferta in rete molto varia; si passa da 9,95 a 35 euro per un .it oppure a 14,95 per un .com. Dipende dai livelli di rivendita, dalla politica commerciale e anche dai servizi offerti in abbinamento con la vendita del dominio. Attenzione per a non farvi abbagliare dal prezzo. Il costo principale di chi vende il dominio dato infatti dalla gestione dei nomi. In pratica quello che si paga non il dominio in s ma i servizi (per esempio il cambio di DNS o altro) richiesti a queste societ che foniscono anche una sorta di assicurazione che tutto funzioner per il meglio. E in certi momenti un servizio consumatori che funziona e d seguito immediatamente alle vostre richieste pu essere molto utile. Quante volte vi siete scontrati con un indirizzo e-

Requisiti per poter registrare un dominio

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

36/88

3a lezione
dominio pu essere sufficiente. Pochi MB bastano per foto e testi, poi quando le idee saranno pi chiare e i progetti su Internet pi definiti, si potranno chiedere spazi pi ampi. inutile farsi abbagliare da offerte mirabolanti con spazi infiniti che non saranno mai utilizzati. Meglio concentrarsi su elementi pi importanti come laffidabilit del sistema e i margini di autonomia che possiede lutente per effettuare le operazioni di configurazione del suo sito. Quanti sono i server a disposizione? Qual il livello di sicurezza della connettivit? Sono queste alcune domande da porsi (anche in relazione al tipo di progetto che avete intenzione di realizzare sul Web) quando si affronta la scelta dellhosting. Tenendo presente che laspetto principale quello della vostra autonomia. Lutente deve infatti avere la possibilit di muoversi a proprio agio nel suo sito senza dover avere la necessit di chiedere via e-mail modifiche o altro. Questo per non esclude che lesistenza di un eccellente servizio ai consumatori che aiuti i navigatori in difficolt sia un altro elemento importante nella scelta dellhosting. Per quanto riguarda la scelta di una piattaforma Linux o Windows una questione che pu interessare soprattutto chi ha in programma lallestimento di siti complessi che prevedono relazioni con i database. In caso contrario la piattaforma ha poca importanza.
Luigi Ferro

Quando ti rubano il sito

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

duttori ha natura amministrativa e non esclude quindi la possibilit di ricorrere alla magistratura ordinaria. A vantaggio di questa soluzione, per, c la velocit della procedura. Secondo le regole stabilite dalla Naming Authority possibile ricorrere sotto tre condizioni: 1) quando il nome a dominio utilizzato da un terzo sia identico o tale da indurre a confusione rispetto ad un marchio su cui egli vanta diritti o sia identico al proprio nome e cognome; 2) se l'attuale assegnatario non abbia alcun diritto o titolo in relazione al nome a dominio contestato; 3) il nome a dominio sia stato registrato e venga utilizzato in mala fede. Chi ricorre potr ottenere la rassegnazione del nome a dominio in caso di presenza contemporanea della prima e terza condizione e il presunto cybersquatter non provi di avere diritto o titolo in relazione al dominio contestato. Per quanto riguarda il secondo punto per poter continuare a utilizzare il dominio il resistente (colui che ha acquistato il nome a dominio oggetto della contesa) deve dimostrare di: a) aver utilizzato o di essersi oggettivamente preparato ad usare, in buona fede, il nome a dominio o un nome ad esso corrispondente per offer-

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

37/88

4a lezione
A scuola con PC Open

Progetto
N
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

Web Master
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-

di Roberto Mazzoni

1 Stile e struttura: usare i tag HTML nativi

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 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:
Competenze e strumenti
(disponibile integralmente sul CD) 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 Esercizi su come creare una pagina vergine e su come progettare un sito

Lezione 3:
il corso sul CD n. 68 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

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 2:
Siti statici e linguaggio HTML
(disponibile integralmente sul CD) Progettare un sito statico Progettare la pagina Pagine HTML e marcatori Strutturare i contenuti della pagina Adobe GoLive 6.0 Spiegazione dei tag HTML per una pagina vergine

Lezione 4:
HTML 4.01 e CSS
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 6:
Siti interattivi

Lezione 7:
Interazione sul server

Lezione 8:
Promuovere il sito

38/88

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. 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 altri 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.

Tag e attributi deprecati

L'esigenza di fornire elementi per il controllo della visualizzazione a video del testo ha portato all'inserimento nel GLOSSARIO CSS (Cascading Style Sheets): fogli di stile in cascata, un sistema concepito nel 1996 per assegnare attributi stilistici agli elementi di una pagina Web in modo distinto e complementare rispetto al linguaggio HTML. Consentono di definire numerosi attributi tipografici per ciascun elemento presente nella pagina, oltre che indicarne la posizione e il comportamento al verificarsi di alcune circostanze (passaggio del mouse sopra la parola o frase, eccetera). Consentono di centralizzare in un solo documento tutti i parametri stilistici di un sito cos che, con una sola modifica, sia possibile variare tutte le pagine del sito. Alleggeriscono le pagine medesime poich le informazioni stilistiche per un certo sito vengono caricate una volta sola. Garantiscono compatibilit tra i diversi browser, dispensando il Webmaster dall'usare tag particolari per ciascuno. Possono anche funzionare in abbinamento a documenti XML per fornire le informazioni di presentazione. La versione corrente la 2.0, ma il W3C sta gi lavorando alla 3.0 DOM (Document Object Module): un modello mediante il quale possibile manipolare gli oggetti che sono contenuti in una pagina. Per oggetti s'intende gli elementi (la combinazione del

Markup fisici e logici

Cominciamo con l'esamina-

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.

39/88

4a lezione
re la differenza tra tag fisici (stilistici) e logici (strutturali) usando un esempio classico: 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 parole 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

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)

Il listato HTML che produce l'effetto visualizzato nella figura precedente. Notate che ciascun titolo dispone di un proprio tag e che il testo integralmente racchiuso in un tag di paragrafo che lo identifica. Notate che la "" viene trasformata in una delle entit previste da HTML per la codifica dei caratteri particolari, in questo caso &egrave; notate che l'entit comincia sempre con & e termina con il punto e virgola

pu quindi essere utilizzato all'interno di programmi di lettura automatica delle pagine Web (vedremo meglio questo genere di applicazioni quando

Gestire gli spazi nel testo

Tutti i browser hanno una caratteristica in comune: generare una presentazione del contenuto che sia adatta al tipo di computer su cui stanno funzionando, interpretando a proprio modo le informazioni della pagina ed eliminando il superfluo o ci che credono tale. In effetti il Web nato in un contesto accademico dove crediamo che gli autori fossero pi concentrati sull'informazione che volevano trasferire che non sulla sua forma e c'era l'esigenza di garantire che un testo composto su un tipo di computer rimanesse comprensibile anche quando trasferito altrove. Mancando di qualsiasi funzioni tipografica nella versione 1.0 e 2.0 di HTML, l'unico modo disponibile per impaginare le informazioni consisteva nell'allineare i vari elementi all'interno della colonna di testo usando spazi multipli, spazi che possono essere usati come rientro per le righe di un paragrafo oppure come distanziatori tra le voci di un indice e i numeri di pagina all'altro estremo della riga. Il problema che tali spazi possono cambiare dimensione quando mostrati su computer diversi con font differenti e tutti gli allineamenti costruiti in origine dall'autore finiscono per scombinarsi creando confusione anzich aiutare la comprensione del contenuto, inoltre molti "scrittori" non professionali inseriscono distrattamente due o tre spazi tra le parole mentre le digitano, presentando un documento che ha un aspetto trasandato. Al fine di prevenire tali inconvenienti e filtrare gli errori, tutti browser eliminano automaticamente qualsiasi spazio aggiuntivo e richiedono all'autore di specificare un particolare tipo di entit nel caso voglia avere una serie di spazi consecutivi, rendendolo in tal modo consapevole che si tratta di una soluzione particolare di cui si assume piena responsabilit. Tale entit prende il nome di spazio unificatore (non breaking space) e si scrive &nbsp; all'interno della pagina HTML (ripetendolo per ogni singolo spazio). Lo spazio unificatore svolge tre funzioni: impedisce la separazione di due parole in fine di riga per effetto del ritorno a capo automatico eseguito dal browser, blocca una cella di tabella oppure un paragrafo mostrando al browser che non sono vuoti e perci non possono essere eliminati in automatico, inserire spazi consecutivi multipli all'interno del testo per creare rientri e spaziature impossibili con gli spazi convenzionali. chiaro che anche lo spazio unificatore non risolve il problema delle diverse dimensioni che possono essere attribuite ai caratteri, e perci agli spazi, al variare del tipo di computer. Per tale motivo HTML prevede una serie di altri marcatori che indicano al browser di utilizzare un carattere monospaziato alias testo a spaziatura fissa. Si tratta di un termine preso a prestito dal mondo della tipografia e indica un particolare font dove tutti i caratteri, indipendentemente dalla loro forma e dal fatto che siano maiuscoli o minuscoli occupano tutti lo stesso spazio, corrispondente di solito a quello necessario per il carattere pi largo dell'alfabeto usato (la M maiuscola). Lo stesso spazio viene naturalmente occupato anche dai singoli segni d'interpunzione e dagli spazi eventualmente presenti perci gli allineamenti verticali tra righe diverse vengono garantiti perfettamente indipendentemente dal contenuto di ciascuna di esse. Il prezzo che si paga di avere un testo goffo e sgradevole a vedersi e perci anche difficile da leggere. In effetti, la scelta di attribuire una spaziatura diversa ai vari caratteri tipografici serve proprio a facilitarne la lettura, su carta e a video, e a fornire una certa armonia estetica. Se osservate una pagina di giornale noterete che la i minuscola occupa meno spazio in orizzontale rispetto alla j e rispetto alla M o T maiuscole. Questo genere d'impostazione prende il nome di spaziatura proporzionale. I caratteri monospaziati vengono di solito utilizzati solo per rappresentare

40/88

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

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 &nbsp; (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-

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-

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

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).

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

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

</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

41/88

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>

Marcatori per formattare il testo

Tag fisici <b> <i> <u> <s> <pre> Tag logici <strong> <em> <ins> <del> Effetto visibile 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 Significato evidenziato evidenziato inserimento temporaneo cancellazione visibile testo preformattato

<tt> <blink>

<kbd> <samp> <code> <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.

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)

Altri tag logici per il testo

Esistono situazioni in cui il

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.

42/88

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

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.

43/88

4a lezione

3 Cosa si pu fare con i CSS

ispetto ai markup fisici di HTML e in particolare al tag <font>, i fogli di stile in cascata offrono moltissime possibilit, tanto che uno studio di tutte le loro funzioni richiederebbe un impegno paragonabile a quello speso per imparare HTML. A differenza di quest'ultimo, per, i fogli di stile possono essere conosciuti un po' alla volta, esplorandone le funzioni a mano a mano che se ne presenti l'occasione e aggiornando il sito gradualmente, ogni volta che si scopra qualcosa di nuovo. C' anche un altro motivo per procedere con calma: la gran parte dei browser in circolazione sono pienamente compatibili con le specifiche dei CSS di livello 1, ma non supportano ancora appieno i CSS di livello 2 che aggiungono una pletora di nuove funzioni, specie nella gestione di contenuti multimediali. Di conseguenza conviene partire studiando le funzioni di livello 1 (che costituiscono l'argomento centrale di questa lezione) per poi estendersi al livello 2 in un secondo momento. Il prezzo da pagare per l'adozione dei CSS l'aggiunta di un nuovo linguaggio alla propria cassetta degli attrezzi e al proprio sito, con la necessit d'imparare complesse regole astratte che governano ereditariet ed effetto a cascata. Si producono talvolta anche effetti imprevedibili e incostanti, difficili da diagnosticare e risolvere anche per i limiti di molti editor HTML oggi in circolazione, non dotati di specifiche utilit per la gestione dei CSS. L'unico programma che contenga una funzione diagnostica specifica per i CSS Top Style 3.0, che funge anche da editor testuale per pagine HTML, senza tuttavia rimpiazzare un vero e proprio ambiente visuale. Di conseguenza costituisce un investimento aggiuntivo.

La natura tipografica degli stili

Il primo ambito d'intervento dei fogli di stile nell'impostazione degli attributi tipografici del testo. Non solo possiamo scegliere la font, il colore e le

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-

44/88

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-

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

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)

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

45/88

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'interno 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.

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 lallineamento di un testo come nel documento originale. Per conservare gli spazi bianchi bisogna utilizzare l'entit spazio unificatore (&nbsp;) 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

4 I colori del Web

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

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

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 dellarticolo sul CD)

larticolo sul CD n. 68

46/88

4a lezione

5 Gestire le immagini

l secondo tipo di contenuto tipico di una pagina Web sono le immagini. A differenza del testo, non si trovano nella pagina HMTL, ma vengono caricate in quest'ultima per mezzo di uno speciale marcatore che ne indica la posizione all'interno del sito in relazione al documento oltre che le caratteristiche di visualizzazione e l'allineamento rispetto al testo. Nella gestione delle immagini, esistono quindi due fasi: la prima consiste nel preparare il file che le contiene e la seconda nel collegarlo alla pagina nella posizione in cui vogliamo che appaia quando spedito al browser del navigatore. Per tale motivo bisogna conoscere i formati di file utilizzabili e sapere scegliere quello corretto in funzione del contenuto, cio del tipo di immagine che si vuole riprodurre.

Grafica bitmap e vettoriale

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

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.

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

I tre moschettieri della grafica Web

Oggi non esiste modo per pubblicare un'immagine sul Web che non passi attraverso

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-

47/88

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. 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 trovare 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

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-

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 luso di uno spazio di hosting dedicato, oltre ad una serie di altri servizi supplementari. In pi, dal momento che per poter usare lo spazio di hosting necessario disporre di un dominio, i lettori di PC Open in esclusiva potranno acquistare da subito il proprio dominio presso Register ad un prezzo scontatissimo (40% in meno, lo sconto pi alto oggi disponibile sul mercato). Il metodo semplicissimo: dovrete collegarvi al sito Internet www.register.it/pcopen, inserire il codice seguente: x6Wa3P nel box allinterno della pagina e a questo punto verrete inviati alla home page del sito di Register, da dove le registrazioni verranno scontate in automatico del 40%. Le registrazioni saranno comprensive di tutto quanto indicato allindirizzo http://we.register.it /domains/allincluded.html. Per il servizio di supporto inviare le e-mail allindirizzo support@register.it

48/88

5a lezione
A scuola con PC Open

Progetto
L
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

Web Master
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-

di Roberto Mazzoni

1 Elementi di design per il Web

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. 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
(disponibile integralmente sul CD)

il corso sul CD n. 69

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 dimmagini Mappe immagine Audio e video

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

Le prossime puntate
Lezione 6:
Siti interattivi

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

Lezione 7:
Interazione sul server

Lezione 8:
Promuovere il sito

49/88

5a lezione
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.

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

Dosare il colore Coerenza, allineamento, posizione e ripetizione

Queste sono le quattro parole chiave da tenere a mente quando si progetta la grafica di un sito. La coerenza si riferisce alla costanza con cui gli elementi di riferimento si ripetono di pagina in pagina conservando aspetto, posizione e dimensione. Il sito avr sicuramente diversi modelli di pagina (template), ma ci saranno alcuni elementi che non cambiano, come ad esempio il logo, le barre di navigazione, i link ipertestuali, lo sfondo, eccetera. Mantenendo invariati questi elementi, si trasmetter un'impressione di ordine e si faciliter l'orientamento del navigatore che potr concentrarsi sui contenuti. L'allineamento un criterio fondamentale dell'impaginazione tipografica e si ripropone anche sul Web. Il testo e le immagini devono mantenere un allineamento regolare tra loro e rispetto alla griglia di layout. anche possibile sfruttare variazioni di allineamento rispetto alla norma per mettere in evidenza elementi particolari, come ad esempio un titolo Il colore notoriamente l'elemento pi visibile all'interno di una pagina e perci gli elementi colorati dovrebbero essere usati con attenzione, cos da non sopraffare l'attenzione del navigatore. Usate tinte poco intense per le grandi aree, come gli sfondi e le cornici. anche importante che i colori presenti sulla pagina siano tra loro compatibili, vale a dire che si sposino bene insieme. Il loro abbinamento un'arte con regole precise di cui parliamo pi avanti nellarticolo, ma esistono anche strumenti che aiutano a scegliere le combinazioni adatte, vedi ad esempio l'utility gratuita SLUGS da integrare nel programma gratuito HTML-Kit di cui abbiamo parlato in questo corso, che seleziona per voi i colori complementari rispetto alla base che avete identificato e li rapporta anche in termini di saturazione e gradienti d'intensit (passaggio da un colore all'altro con le principali tinte intermedie). Parlando di colori, dovrete anche decidere se uniformarvi alla Websafe palette (vedi la scorsa lezione), il che sarebbe

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

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. 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 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.

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-

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-

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

51/88

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

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'ottimizzazioIl 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

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

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 molto 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 tavolozza 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

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

53/88

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-

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

54/88

5a lezione
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.

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

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

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

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.

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.

JPEG per le fotografie

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

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

5a lezione

4 Link ipertestuali

l Web esiste grazie al concetto di ipertesto mediante il quale diversi documenti possono essere consultati in ordine libero sfruttando collegamenti reciproci. Questi ultimi prendono il nome di collegamenti ipertestuali e consentono di saltare da una posizione all'altra nella stessa pagina, da una pagina a un'altra dello stesso sito e da un sito all'altro. Basta cliccare sul link e si viene immediatamente proiettati verso la destinazione richiesta. Esistono due modi per inserire un link ipertestuale in una pagina Web: nella forma di testo e nella forma di immagine. In entrambi i casi, si sfrutta lo stesso marcatore, denominato ancora il quale a sua volta esiste in due varianti. La pi comune prende il nome di ancora sorgente perch identifica il punto di partenza del collegamento e ne fornisce la descrizione della destinazione. il classico link che troviamo nella maggior parte delle pagine Web e sul quale clicchiamo per saltare a un'altra pagina. La seconda variante invece l'ancora di destinazione utile per marcare il punto di arrivo di un particolare link all'interno della pagina. La si usa solitamente per creare link a porzioni interne dello stesso documento oppure per fare in modo che la pagina richiamata da un link esterno si apra in corrispondenza di un particolare paragrafo, anzich alla prima riga.

Ancore sorgente
Il testo o l'immagine che delimitano il "punto caldo" (hot spot) del collegamento sorgente, cio il punto da cliccare, sono racchiusi tra i tag <a> e </a>. La destinazione del link invece indicata mediante l'attributo href (hypertext reference) che pu contenere un collegamento relativo (pertinente al sito in cui gi ci troviamo) oppure assoluto (diretto a un sito esterno). All'interno di un sito, la gran parte dei link saranno relativi, vale a dire che indicheranno la posizione del documento di destinazione in relazione alla directory principale del sito (collegamento relativo

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-

56/88

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 elettronica e che perci, cliccandovi sopra, sar possibile inviare un messaggio direttamente a quel destinatario. Si tratta di una funzione molto usata per facilitare il contatto con il gestore del sito o con altre persone. La sintassi la seguente: <a href="mailto:pippo@pippo.com" >pippo</a> quando il navigatore cliccher su "pippo" gli si aprir automaticamente il programma di posta e nella casella del destinatario comparir l'indirizzo "pippo@pippo.com".

5 Tabelle dimmagini

bbiamo gi visto che le tabelle svolgono un ruolo essenziale per costruire il layout di una pagina Web. Inserendo brani di testo e immagini entro le celle di una tabella invisibile, possiamo stabilirne le posizioni e gli allineamenti. Un impiego particolare di questa funzione consiste nell'usare la tabella come elemento di unione per pi immagini oppure per gli elementi frazionati di una singola immagine pi grande. Il primo caso il pi comune e lo troviamo nella gran parte dei siti. Prendiamo ad esempio il sito italiano www.film.it che parla di novit cinematografiche. Se scomponiamo la sua home page, vediamo che contiene una tabella che salda tra loro testo, fotografie, pulsanti navigazione e testatine grafiche (vedi la figura). Il secondo caso adotta invece una tecnica di frammentazione dell'immagine sviluppata dai progettisti Web per sveltire il caricamento di un'immagine di grandi dimensioni e per usare la stessa immagine come strumento di navigazione. L'o-

perazione richiede una certa dimestichezza con i programmi di grafica e prevede la suddivisione di un'immagine in tanti riquadri di dimensione variabile, che saranno uniti mediante una tabella cos da ricomporre visivamente l'immagine originale senza lasciar trasparire la tabella sottostante. Poich ogni singola porzione dell'immagine sar contenuta in una cella indipendente e sar un'immagine autonoma, diventer possibile abbinarle un collegamento ipertestuale cos da creare un sistema di navigazione grafico (vedi l'esempio). Potremo anche animare alcune porzioni dell'immagine, creando un GIF animato per quel particolare frammento, e creare i cosiddetti rollover, vale a dire cambiamento d'immagine al passaggio del mouse. La frammentazione (slicing) di unimmmagine comporta notevoli benefici anche nel regolare il peso della pagina. Supponiamo infatti di avere una figura che contenga ampi spazi a tinta unita con magari porzioni di testo al loro interno. Realizzare il tutto in grafica vorrebbe dire

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

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

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

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

57/88

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.
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

Ottimizziamo l'immagine gi elaborata prima, definendo altre due porzioni di taglio (slicing) che trasformiamo in aree HTML visto che hanno uno sfondo bianco tinta unita che pu essere facilmente riprodotto mediante i colori di sfondo della tabella. Durante la fase di esportazione, Fireworks MX genera automaticamente la tabella finale

6 Mappe immagine

bbiamo visto che un'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-

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

58/88

6a lezione
A scuola con PC Open

Progetto
I
linguaggi di programmazione si dividono essenzialmente in tre grandi gruppi: linguaggi compilati, semi-compilati ed interpretati. Nel caso dei linguaggi compilati, il codice sorgente (ossia il file testuale contenente le istruzioni che devono essere eseguite da parte del personal computer) viene impacchettato sotto forma di un file eseguibile. I sorgenti vengono tradotti in codice macchina, comprensibile al personal computer, mediante lutilizzo

Web Master
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-

di Michele Nasi

1 I linguaggi di programmazione
dei cosiddetti compilatori. Ci comporta che un programma trasformato in codice macchina pu funzionare solo ed esclusivamente in un particolare ambiente hardware-software. Tra i linguaggi semi-compilati, citiamo Java: nato per affiancare lHTML, permette lo sviluppo e lutilizzo di applicazioni indipendenti dalla piattaforma. Ci significa che Java indipendente dalla specifica piattaforma hardware-software: il programma Java viene compisono quindi essere considerati come una sorta di estensione dellHTML. Come avrete avuto modo di apprendere nelle lezioni precedenti del nostro corso, lHTML non un linguaggio di programmazione vero e proprio (nonostante sia spesso, in maniera colloquiale, erroneamente definito come tale). LHTML un linguaggio di definizione della pagina che permette di impostare la posizione di testo ed immagini in una pagina Web, di posizionare tabelle, frame, liste puntate e nume-

IL CALENDARIO DELLE LEZIONI

Lezione 1:
Competenze e strumenti
(disponibile integralmente sul CD)

Lezione 2:
Siti statici e linguaggio HTML
(disponibile integralmente sul CD)

il corso sul CD n. 70

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
(disponibile integralmente sul CD) Elementi di design per il Web La ruota colore Grafica e formati di immagini per Internet Link ipertestuali Tabelle dimmagini Mappe immagine Audio e video

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

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 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

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

Le prossime puntate
Lezione 7:
Interazione sul server

Lezione 8:
Promuovere il sito

59/88

6a lezione
rate e cos via, oltre a stabilire le propriet caratteristiche (ampiezza, colore, allineamento) di ciascun elemento. Fatta eccezione per i form, lHTML non ha in s n strutture in grado di interagire con lutente n strutture decisionali. LHTML, insomma, completamente statico. Con questa lezione del nostro corso, ci proponiamo di aggiungere un altro importante tassello alle nostre conoscenze: presenteremo JavaScript e DHTML. JavaScript pu essere considerato come il complemento di HTML. un linguaggio interpretato ed un linguaggio di scripting. JavaScript semplice perch si basa su un numero ristretto di oggetti di programmazione, tuttavia il suo utilizzo potrebbe non risultare indicato per lo svolgimento delle operazioni pi complesse: procedure allapparenza assai semplici, potrebbero infatti implicare lo sviluppo di script piuttosto complicati. JavaScript sicuro e affida(client), il server esegue le azioni previste dal programmatore e comunica al computer client (e quindi al suo browser Internet) il responso. Il codice JavaScript, invece, non viene interpretato ed eseguito sul server ma viene inviato cos com al client: penser, quindi, il browser Internet (per esempio Internet Explorer) ad interpretarlo e ad eseguire le istruzioni specificate. Il codice di uno script JavaScript deve essere quindi scaricato completamente da parte del browser installato sul personal computer client, prima di poter essere eseguito. In questo modo, JavaScript dispensa il server dalleffettuare una mole di lavoro aggiuntiva (il server non deve processare il codice JavaScript) ma costringe ogni client ad unopera di interpretazione ed esecuzione degli script. bene, quindi, non realizzare in JavaScript, script troppo complessi, che richiedano, da parte dei client, elevati tempi di elaborazione.

Lidentikit di JavaScript
JavaScript un linguaggio di scripting Un linguaggio di scripting un linguaggio di programmazione ridotto allosso Uno script JavaScript si compone di una serie di istruzioni eseguibili dal personal computer client Il codice JavaScript inseribile allinterno di una qualsiasi pagina HTML JavaScript un linguaggio aperto che pu essere liberamente utilizzato da chiunque senza la necessit di acquistare una licenza duso JavaScript supportato da tutti i browser Internet bile: proprio per la sua peculiarit di essere un linguaggio piuttosto limitato per numero e complessit delle strutture che mette a disposizione non si conoscono problemi di sicurezza e di affidabilit. Tutti i bug e le falle di sicurezza di JavaScript sono stati scoperti e risolti sin dalluscita delle prime versioni. Tra le caratteristiche principali abbiamo gi messo in luce come il codice sia in chiaro, ossia visibile da parte di chiunque, semplicemente servendosi della funzione Visualizza lHTML del browser, desideri di consultare il codice HTML della pagina Web che sta visitando. Il codice JavaScript, inoltre, viene eseguito sul client, ossia sul personal computer che sta visitando un determinato sito Internet. Si tratta di un aspetto importante che deve essere tenuto a mente: altri linguaggi di programmazione vengono detti lato server perch, ad ogni richiesta di connessione da parte di un personal computer

2 La programmazione orientata agli oggetti

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

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

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

che riguardano lo sviluppo di programmi, come vedremo pi avanti.

Come inserire uno script in una pagina Web

Nelle precedenti puntate del nostro corso abbiamo avuto modo di familiarizzare con numerosi tag (o marcatori) HTML. Ne aggiungiamo un altro: <SCRIPT> e </SCRIPT> consentono di delimitare il codice JavaScript e quello proprio di altri linguaggi di scripting. Nella pratica, vanno utilizzati i tag seguenti: <SCRIPT Language=Javascript><!-//--></SCRIPT> Com facile notare, allinterno della tag <SCRIPT> sempre bene specificare con quale linguaggio stato realizzato lo script. Qualora si indichi anche la versione di JavaScript, lo script verr interpretato ed eseguito solo dai browser che la supportano. Ad esempio, il codice contenuto allinterno delle tag che seguono verr in-

60/88

6a lezione
terpretato solo da Internet Explorer 4.0 o Netscape 4.0 e versioni successive: <SCRIPT Language=Javascript1.2><!-//--></SCRIPT> Omettendo lindicazione della versione, il codice verr processato da tutti i browser. In alternativa, possibile utilizzare il tag <script type= text/javascript> che consente, egualmente, di definire JavaScript come linguaggio di scripting. Il codice JavaScript pu essere inserito direttamente allinterno di una pagina Web oppure in un file esterno. Tale file dovr poi essere opportunamente richiamato dal corpo della pagina HTML. Se si vuole inserire lo script nella pagina HTML, si deve tenere presente che questo pu essere collocato allinterno delle tag <HEAD> e </HEAD> (ovvero nellintestazione della pagina Web), oppure tra le tag <BODY> e </BODY> (il corpo vero e proprio della pagina HTML). importante ricordare che gli script vengono eseguiti in maniera sequenziale, uno dopo laltro, a seconda della loro posizione allinterno del codice HTML della pagina Web. In particolare, gli script inseriti nellintestazione tra le tag <HEAD> e </HEAD> vengono eseguiti per primi. un browser obsoleto? Di solito o il codice non viene eseguito o si presentano problemi. Qualora, poi, lesecuzione degli script fosse disattivata o si usassero browser che non supportano JavaScript, il codice presente nella pagina Web non verrebbe eseguito. Spesso si ricorre, quindi, alluso della tag <NOSCRIPT></NOSCRIPT> che permette di specificare il comportamento che il browser deve tenere qualora non fosse possibile interpretare lo script. Spesso si usa quindi il costrutto che segue: <NOSCRIPT> <META HTTP-EQUIV REFRESH CONTENT=0; URL=nomedellapagina.html> </NOSCRIPT> In pratica, il tag <META REFRESH> ordina al browser, qualora questo non sia in grado di riconoscere adeguatamente lo script, di passare immediatamente alla visualizzazione della pagina HTML nomedellapagina.html. Il buon programmatore avr cura di inserire, in tale pagina, una versione del sito visualizzabile con i browser pi vetusti. Come regola generale, vi suggeriamo di racchiudere sempre il codice JavaScript tra le tag <!-- 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 devono essere stampati sulla pagina Web). Alcuni browser, soprattutto le versioni pi datate di Netscape, hanno difficolt nel gestire il segno > di fine commento: bene perci anteporre una doppia barra // (commento JavaScript) prima del tag -->. Create una nuova pagina HTML, servendovi di uno degli editor presentati nelle precedenti lezioni del corso (potete servirvi semplicemente del Blocco Note di Windows o di un editor testuale), quindi copiate al suo interno quanto segue: <html> <head> </head> <body> <SCRIPT Language=Javascript><!-document.write(Benvenuto nel mondo di JavaScript!); alert(Questo il tuo primo script); //--></SCRIPT> </body> </html> In questo script potete facilmente notare tutto quanto stato sinora introdotto. possibile notare come, in questo caso, il codice JavaScript sia stato inserito allinterno della tag <BODY> (corpo della pagina HTML). stato fatto uso delle tag <!-- 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 dalluso di file esterni sono enormi: se si prevede di utilizzare lo stesso codice JavaScript in pi pagine HTML, si potr semplicemente far riferimento al file esterno che lo contiene, senza doverlo riscrivere ogni volta. Supponiamo, ad esempio, che dieci pagine HTML del sito Web che state realizzando debbano impiegare lo stesso codice JavaScript: baster memorizzare lo script in un unico file di testo (ad esempio ilmioscript.js) e richiamarlo da ciascuna pagina servendosi della tag SCRIPT SRC. Ricorrendo a file esterni si attribuisce al sito che si sta realizzando una struttura modulare che porter ad indubbi vantaggi in termini di spazio occupato (le pagine Web saranno pi snelle e compatte) e faciliter eventuali modifiche del codice JavaScript (si dovr intervenire solo sul file esterno e non sulla struttura di ciascuna pagina HTML), con grossi vantaggi in termini di tempo.

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

3 Oggetti e priorit

icollegandoci con quanto introdotto poco fa circa la programmazione orientata agli oggetti, passiamo ad illustrare, nella pratica, il significato di oggetti e propriet. Una pagina Web, visualizzata allinterno del browser Internet, considerabile come un oggetto. Ogni tabella, pulsante, immagine, form, link, presente

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

Utilizzando listruzione JavaScript document.bgcolor=red alla vostra pagina Web sar assegnato, come colore di sfondo, il rosso. Il contenuto di un ipotetico campo denominato username, facente parte del form miologin, pu essere recuperato utilizzando la propriet value: document.miologin.username.va-

lue. Notare che la propriet value si riferisce alloggetto username (campo testo) che parte delloggetto miologin (form), il quale, a sua volta, contenuto nelloggetto document (la pagina Web).

Metodi
I metodi descrivono le azioni che loggetto deve compiere

61/88

6a lezione
non appena riceve un messaggio specifico. In pratica, i metodi sono le azioni che loggetto in grado di compiere. Cos come una porta pu essere aperta o chiusa, una lampadina accesa o spenta, gli oggetti sono in grado di compiere molte azioni. Write() , per esempio, un metodo delloggetto document: abbiamo gi avuto modo di fare la sua prima superficiale conoscenza con lo script dellEsempio 1: listruzione document.write (Benvenuto nel mondo di JavaScript!) ci ha permesso di scrivere la frase indicata sulla nostra pagina Web. Listruzione document.open() permette, invece, di aprire un nuovo documento (pagina Web).

La lista dei principali gruppi di metodi messi a disposizione in JavaScript

Metodi di finestra - operano sulloggetto Window e consentono di aprire e chiudere nuove finestre Metodi di documento - permettono di generare al volo nuovi documenti (pagine HTML) Metodi per i form - per selezionare gli oggetti che compongono un form (ad esempio un modulo di richiesta di informazioni), per spostare il cursore sulle caselle di testo dei forum Metodi relativi alla cronologia - intervengono sulla cronologia dei siti Web visitati Metodi di data - permettono di operare su data e ora Metodi di testo - per modificare le propriet caratteristiche del testo Metodi matematici - le principali funzioni matematiche Metodi messagebox - per generare finestre di dialogo Se si vuole aprire una nuova finestra da JavaScript, necessario - in primo luogo - fissare un nome identificativo da attribuirle (ad esempio Miafinestra). Sar quindi possibile aprire la nuova finestra servendosi della seguente istruzione: Miafinestra = window.open() Il metodo window.open permette lutilizzo di tre parametri opzionali che possono essere inseriti allinterno delle parentesi tonde: Un URL contenente la pagina HTML che deve essere visualizzata allinterno della nuova finestra Un titolo per la finestra Una serie di informazioni legate al look grafico della finestra (dimensioni, posizionamento, e cos via).

4 Eventi e funzioni

li eventi consentono di specificare quando - ed in quali condizioni (per esempio allapertura di una pagina Web, quando lutente clicca su un pulsante, quando si muove il mouse su un determinato oggetto, e cos via) - un determinato script debba essere eseguito. A differenza di quanto visto sinora, gli eventi non vengono definiti allinterno della tag <SCRIPT> ma vengono generalmente inseriti (a parte qualche caso) nel codice HTML della pagina Web. Provate a creare una pagina Web utilizzando il codice che segue: <HTML> <HEAD></HEAD> <BODY> <SCRIPT Language=Javascript> <!-alert(Benvenuto!); //--></SCRIPT> <center> <img src=pcopen.gif onmouseover=alert(Hai spostato il puntatore del mouse sull\immagine)></img> </center> <a href=javascript:alert(Hai cliccato)>Clicca qui</a><br> <a href=http://www.pcopen.it

onclick=alert(Stai per raggiungere il sito di PC Open)>Vai al sito Web di PC Open...</a><br> </BODY> </HTML> In questo caso, il primo script ad essere eseguito quello inserito immediatamente dopo lapertura della tag <BODY>: listruzione alert (Benvenuto!) mostrer al visitatore un messaggio iniziale di benvenuto. Lesempio ci permette di provare sul campo lutilizzo degli eventi: a tal proposito, ci si pu subito rendere conto di come gli eventi JavaScript siano utilizzati allinterno del codice HTML. Onmouseover e Onclick sono due eventi: il primo viene attivato non appena lutente porta il puntatore del mouse sulloggetto cui la tag HTML fa riferimento; il secondo evento ha luogo quando lutente fa clic con il tasto sinistro del mouse. Nel nostro esempio, levento Onmouseover viene attivato non appena il visitatore della nostra pagina Web sposti il puntatore del mouse sullimmagine raffigurante il logo di PC Open (pcopen.gif). Si noti come levento JavaScript stato inserito direttamente nella tag HTML <IMG>

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

alert). Accade per molto spesso che le operazioni che debbono essere eseguite al verificarsi di un certo evento siano diverse, assolutamente non rappresentabili mediante ununica istruzione. In questo caso necessario ricorrere alluso delle funzioni (handler o gestori di eventi): si tratta di porzioni ben definite di codice che possono ricevere in ingresso dei dati da elaborare e restituiscono in uscita, dopo lesecuzione delle istruzioni previste, un certo risultato. Nel caso in cui un evento debba eseguire una serie di istruzioni, tali righe di codice vengono racchiuse in ununica funzione, generalmente definita nellintestazione della pagina Web o nel corpo della pagina HTML. Levento far poi riferimento alla funzione definita in precedenza. Ad esempio Onclick=mia_funzione() invocher, alla pressione del tasto sinistro del mouse, la funzione denominata mia_funzione. Un esempio concreto contribuir a comprendere meglio il concetto: <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript>

62/88

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>

Eventi importanti
onClick onDblClick onKeyDown onLoad onMouseOut Consente il rilevamento di un clic del mouse Consente il rilevamento di un doppio clic del mouse Permette il rilevamento della pressione di un tasto Evento attivato in fase di caricamento della pagina Web Il puntatore del mouse si sta allontanando da unarea specifica (ad esempio unimmagine od un collegamento) Il puntatore del mouse stato spostato su unarea specifica (ad esempio unimmagine od un collegamento)

In questo esempio, abbiamo definito una funzione msgbox contenente ununica istruzione. Tale funzione viene richiamata da parte dellevento onclick, inserito in ogni tag <A>.

onMouseOver

La funzione msgbox, inoltre, riceve in ingresso il testo che

deve essere mostrato nella finestra dallerta.

5 Variabili e stringhe

n qualsiasi linguaggio di programmazione, le variabili possono essere considerate come delle scatole allinterno delle quali possibile immagazzinare dei dati. Ogni variabile pu memorizzare dati di un certo tipo: numeri, stringhe (qualsiasi valore letterale), valori booleani. Le variabili possono assumere anche lo speciale valore null: questultimo si incontra spesso nella programmazione e non rappresenta un valore specifico. In molti linguaggi di programmazione (per esempio Java, C, C++) le variabili devono essere dichiarate prima di poter essere utilizzate: quindi indispensabile inizializzarle specificando il loro nome e il tipo di dati che esse andranno a contenere. In JavaScript la dichiarazione delle variabili non strettamente necessaria. Ad esempio, listruzione luogonascita=Milano provvede automaticamente ad inizializzare una variabile (luogonascita) come stringa e a porvi, al suo interno, il valore Milano. Il simbolo di uguaglianza indica che stiamo effettuando un assegnamento (stiamo associando alla variabile indicata alla sinistra delluguale il valore specificato alla sua destra).

Va ricordato che le stringhe (espressioni letterali) vanno sempre racchiuse tra doppio apice. A tal proposito, analizzate le seguenti due istruzioni: luogonascita=Milano luogonascita=Milano Si tratta di due istruzioni completamente differenti. Nel primo caso il valore stringa Milano viene memorizzato nella variabile luogonascita; nel secondo caso viene memorizzato in luogonascita il valore della variabile chiamata Milano. Le variabili possono anche essere inizializzate esplicitamente con la dichiarazione var. Listruzione var luogonascita, per esempio, crea in memoria una variabile denominata luogonascita e le attribuisce il valore null.

go, sar sufficiente eseguire unoperazione di assegnazione. utente=prompt(Inserisci il tuo nome,Inserisci qui il tuo nome); inizializzer una variabile utente, quindi vi memorizzer il valore specificato a destra delloperatore di assegnazione (in questo caso proprio il valore stringa restituito dal metodo prompt()). <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-

saggio di benvenuto. La prima istruzione document.write stampa sulla pagina Web il testo Benvenuto; la seconda inserisce nella pagina il contenuto della variabile utente. Sulle variabili poi possibile eseguire tutta una serie di operazioni. Una delle pi importanti il concatenamento: due o pi variabili possono, cio, essere unite assieme. Nellesempio precedente avremmo potuto usare ununica istruzione document.write impiegando il codice che segue: document.write(Benvenuto +utente); Il segno di addizione effettua, appunto, un concatenamento tra la stringa Benvenuto e la variabile stringa utente. Qualora si fosse utilizzato il + tra variabili numeriche (contenenti, cio, un valore numerico) avremmo ottenuto una somma: primo_valore=25; secondo_valore=10; document.write(primo_valore+secondo_valore); In questo caso listruzione document.write stampa sulla pagina Web il valore 35, essendo primo_valore e secondo_valore due variabili numeriche.

Facciamo alcuni esempi

Utilizziamo il metodo prompt() per richiedere allutente che visita la nostra pagina Web, di inserire il suo nome. La stringa di testo inserita verr successivamente utilizzata per visualizzare un messaggio di benvenuto. Poich il metodo prompt() restituisce il testo che lutente immette nella finestra di dialo-

63/88

6a lezione

6 Gli operatori in Javascript

Gli operatori si dividono in:

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.

3. Operatori relazionali
Operatore == != > < >= <= 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 Descrizione uguale a non uguale a maggiore di minore di maggiore o uguale a minore o uguale a Esempio 5==8 restituisce false 5!=8 restituisce true 5>8 restituisce false 5<8 restituisce true 5>=8 restituisce false 5<=8 restituisce true

1. Operatori aritmetici
Operatore + * / % Descrizione Addizione Sottrazione Moltiplicazione Divisione Modulo (resto di una divisione) Incremento (operatore unario) Decremento (operatore unario)

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

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.

++

4. Operatori logici
Operatore && Descrizione and Esempio x=6 y=3 (x < 10 && y > 1) restituisce true x=6 y=3 (x==5 || y==5) restituisce false 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 || or

not

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

Gli operatori logici sono essenziali per effettuare confronti pi complessi tra valori e/o variabili. Sono ampiamente utilizzati nelle strutture decisionali (ifthenelse). Nel primo esempio si suppone che la variabile x contenga il valore 6, y il valore 3 (siano state effettuate le relative operazioni di assegnamento). Lespressione (x<10 && y>1) restituisce il valore true perch sono vere entrambe le condizioni indicate ( vero, cio, che x sia minore di 10 ed altrettanto vero che y sia maggiore di 1).

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

64/88

6a lezione

Mettiamoci alla prova

1

Cimentiamoci ora con un esercizio riassuntivo un po pi complesso. Supponiamo di voler creare una pagina Web dalla quale si possa richiamare una nuova finestra. Tale finestra deve possedere attributi specifici: deve misurare 300 pixel in altezza e 300 in larghezza, deve mostrare la data attuale, visualizzare un testo, inserire un link HTML il cui testo pu essere liberamente deciso a priori. La nuova finestra, inoltre, deve risultare perfettamente centrata, qualsiasi risoluzione si stia impiegando. 1. Per prima cosa, inserite nella vostra pagina Web il codice HTML che consenta la visualizzazione di un form costituito da ununica casella di testo e da un pulsante. 2. Passiamo ora allo sviluppo della funzione che dovr aprire la nuova finestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>. Poich la funzione deve ricevere in ingresso un valore stringa, ricorriamo allutilizzo di una variabile messaggio. Allinterno della funzione JavaScript, dobbiamo quindi inserire una serie di istruzioni che consentano di recuperare data ed ora attuali (nel formato utilizzato sul personal computer client), che definiscano il contenuto della nuova finestra e le propriet della stessa (posizione e dimensioni). Per quanto riguarda le informazioni relative a data ed ora impieghiamo il codice che segue:

now = new Date(); data_ora = now.toLocaleString();

La data/ora viene recuperata con il metodo Date() quindi memorizzata allinterno della variabile now, creata allo scopo. Il metodo toLocaleString(), applicato alla variabile now, permette di trasformare la data nel formato utilizzato sul personal computer locale (per esempio, mercoled 12 febbraio 2003 12.23.17). Definiamo ora il contenuto della nuova finestra. Nella variabile contenuto abbiamo deciso di memorizzare tutto il codice HTML che costituir la nuova finestra. Osservate le concatenazioni tra stringhe che abbiamo utilizzato. In particolare, possibile notare come il nome da attribuire al link <A> sia generato recuperando il valore assunto dalla variabile messaggio. Successivamente, memorizziamo in due variabili distinte laltezza e la larghezza che deve avere la finestra da creare quindi calcoliamo le coordinate della finestra (in pixel) affinch questa risulti centrata, qualunque risoluzione si stia utilizzando. 3. Per far questo, necessario controllare il valore delle propriet width (larghezza) e height (altezza) delloggetto screen (schermo). Sottraendo a tali valori, rispettivamente, la larghezza della nostra finestra e la sua altezza, dividendo per due otterremo le coordinate in pixel che permetteranno di centrare la finestra: sinistra=(screen.width-larghezza)/2; alto=(screen.height-larghezza)/2; Se la nostra finestra deve essere alta e larga 300 pixel, alla risoluzione 800x600 pixel la variabile sinistra assumer il valore 250, alto il valore 150; alla risoluzione 1024x768 pixel in sinistra verr memorizzato il valore 362, nella variabile alto il valore 234. In ogni caso, comunque, la finestra risulter perfettamente centrata. Potete provare ad effettuare qualche verifica modificando la risoluzione dello schermo di Windows (Pannello di controllo | Schermo). Le istruzioni successive permettono di creare la nuova finestra:

newwindow=window.open(,miafinestra, toolbar=0,status=0,menubar=0,scrollbars=0,resizable=0,width=+la rghezza+,height=+altezza+,top=+alto+,left=+sinistra); newwindow.document.writeln(data_ora); newwindow.document.write(contenuto);

Loggetto nuova finestra chiamato newwindow. La terza opzione permette di specificare tutte le caratteristiche della finestra. Le successive istruzioni - document.writeln(data_ora) e document.write(contenuto) - inseriscono nella pagina Web della nuova finestra, il contenuto della variabile data_ora e il codice HTML presente in contenuto. Lesempio consultabile su CD utilizzando il file 05_riassuntivo.html oppure online allindirizzo seguente: http://www.ilsoftware.it/libreria/js/jstest.asp?f=05_riassuntivo

65/88

6a lezione

gni giorno noi ci troviamo a compiere delle scelte: se facciamo una cosa allora le conseguenze sono.... il nostro ragionamento. Lequivalente in JavaScript listruzione condizionale If...Else che pu essere efficacemente tradotta in questi termini: Se...Allora. La forma pi semplice con cui si pu presentare listruzione condizionale la seguente: if (espressione) istruzione1 [else istruzione2]... espressione pu assumere solamente i valori true (vero) oppure false (falso): quindi booleana. Qualora tale espressione assuma il valore true, verr eseguita istruzione1 altrimenti istruzione2 (listruzione che segue lelse). (Sul CD ROM lesempio 06_if_then.html mostra lutilizzo del costrutto ifelse). Recuperiamo data e ora attuali servendoci del metodo Date(); usiamo quindi il metodo GetHours(), applicato alla variabile data d, per memorizzare lora corrente. <html> <body> <script type=text/javascript> var d = new Date() var time = d.getHours() if (time < 12) { document.write(<b>Buongiorn o!</b>) }

else { document.write(<b>Buonasera !</b>) } </script> <p>Questo esempio mostra lutilizzo del costrutto if...else</p> <p>Prima delle ore 12 lo script visualizza il messaggio Buongiorno!, dopo le 12 Buonasera!.</p> </body></html> Nel costrutto if...else, inseriamo come condizione lespressione time < 12. In questo modo, qualora lora attuale sia precedente a mezzogiorno, verr stampata, sulla pagina HTML, lesclamazione Buongiorno!, altrimenti Buonasera!. Proviamo ora a scrivere uno script che ci consenta di presentare, allutente che visita il nostro sito Web, o il sito ufficiale di PC Open (www.pcopen.it) o Digifocus (www.digifocus.it). La scelta dovr essere operata in modo del tutto casuale (il link di PC Open o quello di Digifocus avranno il 50% di possibilit di venire mostrati). Il metodo Random(), applicato alloggetto Math, consente di generare un numero casuale compreso tra 0 ed 1 (decimali compresi): ci significa che listruzione Math.random() genera numeri casuali del tipo

4,345125 oppure 5,899271236 e cos via. Memorizziamo il numero prodotto in una variabile: nel nostro esempio labbiamo denominata r. Utilizziamo, quindi, listruzione ifthen imponendo, come condizione, r>0.5. In pratica se il numero generato maggiore di 0.5, viene proposto il link di PC Open; altrimenti quello di Digifocus. <html> <body> <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 ununica espressione, conviene ricorrere allutilizzo dellistruzione Switch. Il valore assunto dallespressione viene infatti confrontato, in questo caso, con una serie di possibilit. Anzich uno solo, possono essere eseguiti, in se-

quenza, numerosi confronti. Analizziamo un possibile utilizzo dellistruzione condizionale Switch con un esempio pratico. Supponiamo di voler accogliere lutente che visita il nostro sito Web con una frase spiritosa, scelta - in modo del tutto casuale - tra dieci diverse possibilit. Come nel caso precedente, anche qui possiamo ricorrere allutilizzo del metodo Math.random(). Per ottenere un numero intero da 0 a 9 (le frasi da proporre sono dieci) utilizziamo un semplice trucco: moltiplichiamo, dapprima, per 10 il contenuto della variabile r (generato da Math.random()) quindi utilizziamo il metodo floor per approssimare, allintero pi vicino, il numero ottenuto. Saremo certi, cos, di avere - come contenuto della variabile r - un intero compreso tra 0 e 9. Il valore assunto dalla variabile r viene quindi confrontato, dallistruzione switch (r) con una serie di possibilit (indicate con i vari case). Listruzione break consente allo script di uscire dal ciclo di switch: se fosse mancante, JavaScript continuerebbe a confrontare il valore. possibile inserire, opzionalmente, anche unistruzione default: essa viene eseguita solo nel caso in cui il ciclo switch non trovi alcuna corrispondenza tra il valore assunto dallespressione e le va-

66/88

6a lezione
rie istruzioni case (nel nostro esempio default non necessario). Va ricordato che sia nelle espressioni ifthen che in switch, loperatore di uguaglianza che va utilizzano == (come gi visto in precedenza) e non = (loperatore di assegnamento). Si tratta di un errore molto comune che spesso provoca comportamenti inattesi (JavaScript si limita ad ignorare lespressione). che listruzione for esegue il ciclo, il contenuto della variabile contatore subisce una variazione. Lespressione inizializzazione permette di specificare il valore cui deve essere inizializzata la variabile contatore (ad esempio: i=0); condizione consente di impostare la condizione che deve verificarsi affinch venga eseguito il ciclo (iterazione); incremento permette di indicare quale incremento o decremento deve subire la variabile contatore ad ogni iterazione. Ad esempio, impostando i<10 come condizione e i++ come incremento, si stabilir che il ciclo for dovr essere ripetuto finch la variabile i assumer un valore inferiore a 10. Inoltre, ad ogni iterazione, il valore numerico contenuto nella variabile i sar incrementato di una unit (i++). Per provare subito lutilizzo di for, supponiamo di voler sviluppare un semplice script che faccio uso dei marcatori <h#> per la visualizzazione di titoli e sottotitoli di varie dimensioni. Nella quarta lezione del nostro corso, abbiamo spiegato come al marcatore <h#> possano essere associato fino a sei livelli consecutivi, cos da determinare una struttura gerarchica di titoli e sottotitoli (<h1></h1>, seguito da <h2></h2> e cos via). Inserite il seguente script tra le tag <HEAD> e </HEAD>, ossia nellintestazione della vostra pagina Web: <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, lesecuzione del ciclo for viene ripetuta. Ad ogni ciclo, vengono eseguite le due istruzioni document.write che sincaricano di scrivere, sulla pagina Web, quanto indicato tra parentesi. Utilizzando loperatore +, si effettua una concatenazione tra le stringhe racchiuse tra virgolette ed il valore assunto, di volta in volta, dalla variabile contatore i. Lo script ha permesso cos di generare il codice HTML equivalente al seguente:
<h1>Questo il titolo numero 1</h1> <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>

Strutture iterattive
Una delle pi famose strutture iterative, comune a molti altri linguaggi di programmazione, il ciclo for. Tale istruzione detta appunto ciclo perch esegue iterativamente una serie di azioni finch non viene raggiunto un limite prestabilito, da parte del programmatore, ed indicato in una condizione. Il ciclo for utilizza la seguente sintassi: for (inizializzazione; condizione; incremento) istruzioni; literazione regolata da una variabile contatore. Ci significa che ogni volta

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

8 Interazione tra JavaScript e form HTML

moduli HTML (form) sono una sorta di questionari compilabili on line da parte dei visitatori di un sito Web. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. I moduli compilati venivano infatti poi automaticamente inviati ad un indirizzo e-mail (ad esempio, quello del webmaster del sito Internet). Oggi, le possibilit di utilizzo dei form si sono enormemente ampliate: vengono utilizzati, su un sempre maggior numero di siti, per interagire con lutente. Ad esempio, form online vengono proposti per effettuare ricerche allinterno degli articoli contenuti in un sito, per inviare i propri messaggi in un forum, per gestire contenuti ed aree specifiche del sito e cos via. Per interagire con un modulo HTML mediante codice JavaScript, necessario far uso nella propria pagina Web - delle apposite tag

<FORM> e </FORM>. Proviamo ad inserire, nella nostra pagina HTML, un form che richieda allutente di digitare il suo indirizzo e-mail verificandone, successivamente, la validit. Per motivi di semplicit, limiteremo il controllo circa la validit dellindirizzo di posta elettronica specificato, alla presenza del simbolo @. Se lutente inserir una stringa di testo contenente la chiocciolina, quanto introdotto nel campo di testo verr considerato come un indirizzo e-mail valido. ovvio che nella vita reale si dovranno sviluppare dei controlli aggiuntivi sulla validit dellindirizzo e-mail (ad esempio, verificare la presenza di un suffisso .it, .com, .net, .org e cos via). Iniziamo con linserire il codice HTML per la visualizzazione di una casella di testo e di un pulsante Invia: <html><head></head> <body> <form name=form_email

action=form_ok.html> Inserisci il tuo indirizzo e-mail: <input type=text name=email> <input type=submit value=Invia> </form> </body></html> Assicuriamoci di assegnare al form HTML un nome specifico, inserendo il parametro name (nel nostro caso, abbiamo scelto il nome form_email). Il parametro action consente di stabilire la pagina ove il browser Internet deve essere reindirizzato dopo la pressione, da parte dellutente, del pulsante Invia. Le tag <INPUT>, che debbono essere sempre comprese tra <FORM> e </FORM>, consentono di stabilire gli elementi facenti parte del modulo HTML. Per ogni tag <INPUT> necessario indicare, ricorrendo al parametro type, il tipo di elemento che si vuole utilizzare. Ad esempio, specificando type=text, si inserir, nel modulo HTML, una casella di testo; con type=checkbox una casel-

la che pu essere spuntata o meno; con type=radio un option box; con type=button un pulsante Type=submit importantissimo: consente di inserire un pulsante speciale che provvede ad inviare il contenuto del form allindirizzo specificato nel parametro action. Per approfondire lutilizzo dei form HTML e scoprire tutte le possibilit che questi offrono, vi consigliamo di fare riferimento allindirizzo www.w3. org/TR/REC-html40/ interact/forms.html (in lingua inglese). Passiamo, a questo punto, alla stesura dello script che consentir la validazione dellindirizzo e-mail inserito da parte dellutente. Provvediamo, quindi, a collocare - al solito - tra i tag <HEAD> e </HEAD> (intestazione), il codice JavaScript seguente: <script type=text/javascript> function controlla() {

67/88

6a lezione
x=document.form_email at=x.email.value.indexOf(@) if (at == -1) { alert(Indirizzo e-mail non valido.) return false } } </script> Cosa abbiamo scritto? In primo luogo abbiamo denominato controlla() la funzione che effettua la validazione dellindirizzo e-mail. Una volta invocata tale funzione, JavaScript memorizza nella variabile x il contenuto del form form_email. Listruzione successiva recupera, prima, il valore del campo denominato email (x.email.value), quindi applica il metodo indexOf. Tale metodo restituisce la posizione della prima occorrenza della stringa specificata allinterno di unaltra stringa. Se la stringa indicata tra parentesi tonde non viene trovata, il metodo restituisce il valore -1. Per fare un esempio concreto, supponiamo di assegnare ad una variabile x la stringa La mia rivista preferita PC Open: x=La mia rivista preferita PC Open pos=x.indexOf(PC Open) document.write(pos) Invocando il metodo indexOf(PC Open), lo script cercher la prima occorrenza della stringa PC Open allinterno della frase La mia rivista preferita PC Open. La variabile pos assumer, in tezza) sul lato client (ossia direttamente sul personal computer dellutente che visita il nostro sito Web), permetter di evitare di sovraccaricare il server Web che ospita il sito di un lavoro aggiuntivo. JavaScript rappresenta, quindi, la migliore soluzione per la realizzazione di questo tipo di controlli. Il codice HTML e lo script JavaScript sono contenuti allinterno del file form_email.html nel CD ROM. Lesempio form_focus.html (disponibile nel CD ROM di PC Open) presenta, invece, lutilizzo del metodo focus() per selezionare un campo specifico facente parte di un qualsiasi modulo HTML presente nella pagina Web. Listruzione document.forms [0].campo1.focus(), consente di selezionare (impostare il focus) sullelemento denominato campo1, contenuto nel primo modulo HTML (forms [0]) posizionato nella pagina Web (document). In questo caso infatti, non avendo assegnato alcun nome al form (servendoci del parametro name), possiamo interfacciarci ricorrendo allarray forms[0]. Qualora avessimo attribuito al modulo HTML il nome mioform (<FORM name= mioform>...</FORM>), avremmo potuto utilizzare listruzione document.mioform. campo1.focus() in luogo di document.forms[0].campo1.focus() (com possibile verificare visionando il file form_focus_2.html).

JavaScript risulta unottima soluzione per la validazione dei dati direttamente sul personal computer dellutente che visita il nostro sito, evitando cos di caricare il server del sito

questo caso, il valore 27 (la stringa PC Open stata trovata in corrispondenza del ventisettesimo carattere). Provate a sostituire la seconda istruzione con la seguente: pos=x.indexOf(La gazzetta) In questo caso, il metodo indexOf restituir il valore -1 (non stata trovata alcuna occorrenza de La gazzetta). Analogamente, nel nostro esempio, indexOf permette di ricercare il simbolo @, allinterno della stringa specificata dallutente nel campo e-mail; il valore restituito viene memorizzato nella variabile at. A questo punto utilizziamo listruzione condizionale ifelse per controllare il valore assunto dalla variabile at: se il valore 1 (non stata trovata alcuna occorrenza di @) viene mostrato il messaggio derrore Indirizzo e-mail non valido inoltre, la funzione controlla() assumer il valore false (return false). Ora inseriamo, nel codi-

ce HTML che consente la visualizzazione del form, linvocazione della funzione controlla(): aggiungiamo, nella tag <FORM> un riferimento allevento onSubmit (ci significa che non appena lutente agir sul pulsante Invia (Submit), verr eseguita la funzione JavaScript appena illustrata). Largomento dellevento onSubmit return controlla(). Il return che precede la chiamata della funzione controlla(), permetter di annullare linvio del contenuto del form alla pagina form_ok.html (specificata col parametro action) se la funzione restituisce il valore false (come abbiamo visto, tale valore viene assunto solo nel caso in cui @ non sia presente, ossia qualora lindirizzo e-mail non sia valido). Se invece la funzione controlla() restituisce un valore diverso, linvio dei dati del form verr consentito. La validazione dei dati (ossia il controllo della loro corret-

9 Interazione tra JavaScript e frame

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

rie di strumenti che permettono di interfacciarsi con i frame HTML e quindi di facilitarne la gestione. Vediamo, ad esempio, come possibile aggiornare due frame diversi con un solo clic del mouse. In primo luogo, creiamo un normale file HTML. Tale file non avr bisogno dellaggiunta di alcun codice JavaScript: al suo interno porremo solo alcuni conosciuti tag HTML che consentiranno di attribuire alla nostra pagina Web una struttura a frame. Creiamo un nuovo file HTML attribuendogli il no-

me frame.html. Incolliamo, quindi, al suo interno, il codice HTML che segue: <html> <frameset rows=30%,* frameborder=1> <frame name=frame_sup src=frame_superiore.html> <frame name=frame_inf src=frame_inferiore.html> </frameset> </html> La pagina Web sar suddivisa in due sezioni: la prima, quella superiore, occuper il 30% dello spazio a disposizione

sullasse verticale ed ospiter il file frame_superiore.html; la seconda, larea pi in basso, lo spazio restante (al suo interno verr collocato il contenuto del file frame_inferiore.html). I nomi assegnati ai file che ospitano il contenuto dei frame non sono importanti mentre lo sono i parametri name indicati in ciascun tag <frame>: si tratta infatti di apposite etichette che debbono essere ricordate se si vuole interagire correttamente con i frame da JavaScript. Mentre nel file frame_superiore.html abbiamo inserito semplicemente il codice HTML

68/88

6a lezione
Per documentarvi ulteriormente sullutilizzo dei frame HTML, vi consigliamo di visitare la pagina seguente: www. w3.org/TR/REC-html40/pre sent/frames.html (in inglese). E se si commettono errori? Errare umano e durante lo sviluppo in JavaScript o in qualunque altro linguaggio di programmazione di errori naturale commetterne molti. Anche i pi esperti incapperanno certamente in sviste comuni come la mancata chiusura di una parentesi, delle virgolette, la dimenticanza di un punto e virgola. In tutti questi casi (e comunque in presenza di un qualunque altro tipo di errore), il vostro script non funzioner. Tutti i browser Internet incorporano un debugger ossia uno strumento in grado di rilevare gli errori commessi in fase di programmazione. Internet Explorer, per esempio, visualizzer nella barra di stato, in basso a sinistra, unicona raffigurante un piccolo triangolo a fondo giallo. Facendovi doppio clic si otterranno le informazioni dettagliate circa lerrore riscontrato. Nel nostro caso, com possibile verificare in figura, ci siamo dimenticati di chiudere una parentesi tonda (il debugger ci segnala riga e carattere ove stato individuato lerrore, allinterno della pagina HTML).

Linee guida per la programmazione

Quando programmate con JavaScript, per evitare di incorrere in fastidiosi errori, spesso difficili da individuare, bene ricordarsi di seguire alcune semplici linee guida. JavaScript un linguaggio case sensitive. In informatica, quando un linguaggio o un sistema operativo viene definito case sensitive significa che questo fa differenza tra comandi e istruzioni scritti in maiuscolo od in lettere minuscole. Per JavaScript una funzione denominata MiaFunzione differente da unaltra chiamata miafunzione. Accertatevi, quindi, di riferirvi in un modo univoco a funzioni e variabili. Gli spazi vengono ignorati. JavaScript ignora gli spazi presenti allinterno di una istruzione. Ad esempio, listruzione di assegnamento citta=Milano (senza spazi) equivale a citta = Milano (con gli spazi). Non dimenticate di chiudere le parentesi. Qualsiasi parentesi (tonda, graffa o quadra) venga aperta in uno script deve essere successivamente chiusa. Per esempio, se avete aperto una parentesi graffa per delimitare le istruzioni che compongono una certa funzione, ricordatevi di chiuderla. Se allinterno di una stringa desiderate utilizzare simboli speciali come ; e &, anteponete ad essi la barra rovesciata. Esempio: document.write (L\uno e l\altro).

Per approfondire...
Allindirizzo www.jsdir.com, sito Web realizzato e curato da un team italiano, trovate una valanga di informazioni sulla programmazione JavaScript: tutorial passo-passo, guide online, suggerimenti, esempi pratici, le risposte alle domande pi frequenti (FAQ), guidano gli aspiranti webmaster alla scoperta di JavaScript. Altri esempi pratici possono essere reperiti allindirizzo www.html.it/javascript/tuto rial/.

Sopra: la funzione JavaScript per la modifica del contenuto dei frame. Sotto: La funzione debugger che ci segnala gli errori commessi in fase di programmazione

per la visualizzazione del logo della rivista, frame_inferiore .html contiene una funzione JavaScript che abbiamo denominato modifica_frame. function modifica_frame() {parent.frame_sup.location.href=f rame_superiore_2.html parent.frame_inf.location.href=fra me_inferiore_2.html } Le due istruzioni JavaScript stabiliscono quali file HTML

devono essere caricati in ciascun frame. Notare che nel frame di nome frame_sup viene inserito il contenuto del file frame_superiore_2.html, mentre in frame_inf il codice HTML di frame_inferiore_2.html. La funzione JavaScript per la modifica del contenuto dei frame viene invocata mediante levento Onclick, associato al pulsante Modifica contenuto frame.

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.

Con DHTML possibile modificare ogni elemento che compone le nostre pagine Web, introducendo effetti speciali, animazioni e la gestione di ogni singola immagine. Durante la vostra navigazione in Rete vi sarete certamente imbattuti in menu animati (spesso men a cascata

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

corre infatti allutilizzo di tre componenti tecnici: i linguaggi di script come JavaScript (ma anche il VBScript di Microsoft), i fogli di stile (CSS, Cascading Style Sheets) - gi illustrati nella quarta lezione del nostro corso - ed infine, ovviamente, HTML. Il punto debole di DHTML ,

69/88

6a lezione
servir, in seguito, per modificare le propriet dellimmagine. In alternativa, possibile utilizzare anche il modello strutturale. Se limmagine da modificare la terza che compare nella nostra pagina Web, si potr usare il codice seguente: document.images[3] Il codice indica che stiamo facendo riferimento alla terza immagine della collezione images, contenuta nelloggetto document (la pagina Web). DHTML consente di spostare gli elementi costitutivi di una pagina Web senza la necessit di dover ricaricare la stessa. A tal proposito, suggerito lutilizzo dei tag <DIV> e <SPAN>, caratteristici dei fogli di stile (e gi incontrati a pag. 38 nella quarta lezione del nostro corso) in quanto sono pienamente supportati sia da Internet Explorer che da Netscape. Utilizzando <DIV> e <SPAN> avrete la possibilit, servendovi di DHTML, di spostare al volo qualsiasi blocco che costituisca la vostra pagina (colonne, paragrafi, riquadri di testo,) senza ricorrere allimpiego di tabelle nidificate. DHTML permetter di agire sulle dimensioni e sulla posizione di ciascun blocco <DIV> e <SPAN> offrendovi un metodo pi semplice e veloce per creare il layout delle vostre pagine Web. Luso dei fogli di stile consentir, poi, di intervenire sulla scelta dei caratteri (stile, dimensioni,), sulla formattazione dei collegamenti ipertestuali, sullimpostazione dei margini e cos via. appena il puntatore del mouse verr posizionato su una voce del menu, dovranno esserne immediatamente visualizzate le relative voci. Prima di tutto creiamo il codice base della nostra pagina HTML: <HTML> <HEAD> <TITLE>PC Open - Un menu a tendina con DHTML</TITLE> </HEAD> <BODY BGCOLOR=white> <CENTER><IMG SRC=logo_PCOPEN.gif> <BR><BR> </CENTER> </BODY> </HTML> Definiamo, quindi, tra le tag <HEAD> e </HEAD> (intestazione della pagina HTML), servendoci di un foglio di stile, quali debbano essere le caratteristiche dei collegamenti ipertestuali (tag <A>, anchor) presenti nella pagina Web: <STYLE> A:Hover {color:red; textdecoration:none; fontweight:bold } A {color:black; textdecoration:none; font-size: 10pt; font-family: Tahoma,Verdana,Arial } </STYLE> Il codice JavaScript evidenziato nellimmagine a lato, va inserito sempre nellintestazione della pagina e consente di stabilire, in primo luogo, quale browser Internet si sta utilizzando. Come gi anticipato in precedenza, Internet Explorer e Netscape utilizzano diverse sintassi per interagire con i layer ossia i livelli definiti con DHTML (i blocchi delimitati con <DIV> e <SPAN>). Lo script permette di individuare la versione del browser in uso ed usare document.layers[layerid] nel caso di Netscape, document.all[layerid] nel caso di Internet Explorer. Nel corpo della pagina HTML (<BODY></BODY>), abbiamo inserito una serie di livelli <DIV>. A ciascun blocco <DIV> stato assegnato un nome identificativo. Si poi fatto uso delle funzioni apri_tendina e chiudi_tendina, opportunamente invocate dagli eventi Onmouseover e Onmouseout per visualizzare o nascondere, alloccorrenza, le tendine dei vari menu dinamici, a seconda della posizione del puntatore del mouse.

Il codice JavaScript va inserito nellintestazione della pagina e permette di stabilire quale browser Internet si sta utilizzando

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

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

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

70/88

7a lezione
A scuola con PC Open

Progetto
1 Il server Web

Web Master
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-

di Michele Nasi

a produzione di un sito statico, a cui questo corso dedicato, richiede talvolta l'inserimento di componenti dinamici o comunque di componenti esterni alla pagina che avete costruito staticamente. Pensiamo ad esempio a un sito che offra consigli di viaggio e che includa previsioni del tempo costantemente aggiornate, attingendo a risorse esterne. Bench la struttura della pagina che contiene tali previsioni possa essere statica, cio invariabile, le informazioni in costante aggiornamento richiedono che al-

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

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 1:
Competenze e strumenti
(disponibile integralmente sul CD)

Lezione 4:
HTML 4.01 e CSS il corso sul CD n. 71
(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 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 Istruzioni condizionali Interazione tra JavaScript e form HTML Interazione tra JavaScript e frame DHTML

Lezione 2:
Siti statici e linguaggio HTML
(disponibile integralmente sul CD)

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

Lezione 7:
Interazione sul server
Il server Web I form: la porta per lutilizzo degli script CGI Installare e configurare un server Web Configurazione del sito Web predefinito in Windows XP Professional Installare e configurare Apache sotto Windows

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 dimmagini Mappe immagine Audio e video

Lultima puntata
Lezione 8:
Promuovere il sito

71/88

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

Come si presenta un SSI

Alla pari di ci che accade in JavaScript, un comando SSI viene inserito nella pagina HTML sotto forma di commento, cio viene preceduto dai simboli <!-e seguito dai simboli -->>. In tal modo, qualora il server non riconoscesse il comando e questo rimanesse all'interno della pagina che viene spedita al navigatore, il browser ne ometterebbe la visualizzazione considerandolo alla stregua di un normale commento. In caso contrario, il riconoscimento del comando comporta l'eliminazione dello stesso dal listato della pagina che viene inviata al navigatore e la sua sostituzione con l'elemento da inserire. Il comando in sostanza funge da segnaposto e cede il proprio spazio all'elemento da innestare (include). Molto semplice e molto pratico. Per un'analisi dei vari co-

mandi e della relativa sintassi rimandiamo alla documentazione dei diversi tipi di server. Affinch vengano riconosciuti e il server ne esegua l'esplorazione (parsing) per identificare cosa inserire e dove, i file che contengono SSI vanno contrassegnati con un suffisso particolare. Spesso si usa il suffisso SHTML, ma il server pu essere configurato per accettare qualsiasi altro suffisso (tale discorso naturalmente non si applica ai file generati con ASP o PHP, che vengono comunque tutti elaborati prima di essere inviati, compresa la gestione di eventuali include lato server).

La Common Gateway Interface

Il secondo passo, pi impegnativo, nella produzione di pagine con contenuto dinamico consiste nell'affiancare al server Web uno o pi programmi

Due file per ogni esempio

Nel CD ROM di PC Open trovate (a meno che non sia specificato diversamente) due file per ciascuno script di esempio. Il primo un file in formato HTML, il secondo lo script CGI-Perl vero e proprio (da memorizzare sul proprio server nella cartella cgi-bin). Tutti gli script CGI-Perl (facilmente riconoscibili per lestensione .PL a loro assegnata) sono richiamati dalle pagine HTML facendo riferimento al sito www.openmaster.info/cgi-bin: abbiamo infatti provveduto a memorizzarli nella cartella cgi-bin del server Web dedicato al nostro progetto OpenMaster. Chi intendesse utilizzare gli script presentati in questa lezione sui propri server, dovr aver cura di modificare lattributo action, contenuto nella tag <FORM> di ciascun file HTML, con lindirizzo completo della cartella cgi-bin presente sul proprio server seguito dal CGI che si desidera richiamare. Gli script CGI che si invocano dovranno ovviamente essere caricati sul proprio spazio Web nella cartella cgi-bin. Ad esempio, se si interessati ad utilizzare, sul proprio server Web, il guestbook, caricate nella vostra cartella cgi-bin il file guest.cgi quindi modificate lattributo action contenuto nella tag <FORM> del file guest.html.

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

7a lezione
che elaborino contenuti in base alle selezioni e alle richieste del navigatore. In questo caso non si tratta semplicemente d'inserire contenuti esterni, aggiornati di frequente, come nel caso degli SSI, ma di costruirli sulla base di quel che il navigatore chiede o fa. Tali contenuti possono provenire da fonti esterne, dal navigatore che risponde a quesiti posti su pagine precedenti oppure da altri programmi presenti nel sito. Qualunque ne sia la fonte, tali informazioni non possono essere visualizzate direttamente, ma richiedono trattamento, eseguito mediante uno dei tanti linguaggi di programmazione che possono funzionare sul vostro server Web oppure su un altro server che lavori in parallelo. L'approccio CGI comporta un carico di lavoro maggiore rispetto ai semplici SSI perci pu essere necessario allestire una macchina di appoggio oppure sfruttare le risorse di un sito remoto, come nel caso dei motori di ricerca che offrono la possibilit di eseguire ricerche anche nel nostro sito. CGI lacronimo di Common Gateway Interface: si tratta di un metodo che consente di mettere in comunicazione diversi programmi presenti sullo stesso server o su server differenti. I programmi possono essere scritti in uno qualsiasi dei linguaggi compatibili con CGI: VisualBasic, C, C++, tcl, Perl e AppleScript per citare i pi diffusi. In particolare, il linguaggio Perl (Practical Extraction and Report Language) il pi usato nellambito della programmazione CGI perch nasce con una predisposizione per la gestione delle informazioni, come si capisce anche dal nome. Ogni volta 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 il server Web sul quale "risiede" il sito, indicandogli la pagina desiderata. Il server Web cerca il file corrispondente e lo trasmette al browser Internet che lo interpreta e lo mostra a video. Nel caso di pagine dinamiche, il server esegue localmente l'elaborazione necessaria, ossia l'inserimento di un include oppure l'elaborazione di contenuti mediante CGI e trasmette al browser del navigatore solo il risultato. Molti di voi avranno visto siti con il classico contatore degli accessi. Si tratta di un contenuto dinamico che incrementa automaticamente a ogni nuova visita. Bene, il contatore costituisce un classico esempio di file generato mediante uno script CGI eseguito direttamente sul server. Uno script, lo ricordiamo, un file che contiene una serie di righe di codice che vengono interpretate, una per una, dall'interprete del linguaggio in cui sono state scritte e convertite in comandi eseguibili dal server. Tale file, una volta eseguito (in questo caso allatto dellingresso nel sito Web di un nuovo visitatore), legge lultimo valore assunto dal contatore (e memorizzato sul disco fisso del server Web), lo incrementa di uno quindi spedisce al client loutput (in questo caso il valore del contatore sotto forma di testo o d'immagine gif). Gli script CGI sono facili da comporre e hanno dimensioni ridotte. Bisogna memorizzarli in una cartella allinterno della quale il server possa localizzarli. Se avete acquistato un servizio di hosting per il vostro sito Internet presso un qualsiasi provider Internet, verificate che lo spazio Web a vostra disposizione vi permetta di eseguire anche script CGI: accedete via FTP (potete utilizzare, a tale scopo, il programma SmartFTP, presentato nel numero di marzo 2003 di PC Open a pagina 148) al server sul quale avete acquistato il vostro spazio Web e cercate una cartella denominata cgibin. Lidentificazione della cartella cgi-bin e delle modalit per laccesso alla stessa costituiscono le prime operazioni da compiere: proprio (e solo) da questa cartella, infatti, potranno essere eseguiti i vostri script CGI. Non tutti gli amministratori consentono lutilizzo di CGI, solitamente per motivi di sicurezza. Se possibile, quindi sempre bene chiedere al proprio provider se abiliti le funzioni CGI e se offra la compatibilit con i linguaggi che intendiamo utilizzare. Pi avanti, sempre con lo scopo di testare i nostri script CGI prima di caricarli sul server Web, vedremo come configurare Apache e Microsoft IIS (i server Web pi utilizzati in tutto il mondo) per eseguirli in locale. Il collaudo in locale offrir numerosi vantaggi evitando la necessit di tenere sempre attiva la connessione Internet e d'impegnarsi in continui upload tramite protocollo FTP.

Perl, gratuito e "testuale"

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

Schema di funzionamento dellapplicazione CGI

Form compilato da navigatore e inviato al server Informazioni contenute nel form passate ad applicazione tramite CGI

Form Web

Browser SERVER
Risposta inviata al navigatore

Applicazione con interfaccia CGI

Risposta dell'applicazionevia CGI

73/88

7a lezione

2 I form: la porta per lutilizzo degli script CGI

ella scorsa lezione abbiamo gi illustrato, brevemente, cosa sono e a che cosa servono i moduli HTML (o form): essi sono una sorta di questionari compilabili on line da parte dei visitatori di un sito Web. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. I moduli compilati venivano infatti poi automaticamente inviati ad un indirizzo e-mail (ad esempio, quello del webmaster del sito Internet). Oggi, le possibilit di utilizzo dei form si sono enormemente ampliate: vengono utilizzati, su un sempre maggior numero di siti, per interagire con lutente. Nella lezione precedente abbiamo visto com possibile interagire con un form HTML, direttamente sul personal computer client, tramite JavaScript. Questa volta aggiungiamo un altro tassello: ci proponiamo di illustrare come gli script CGI possano interagire con i form. La differenza abissale: mentre nella scorsa lezione ci siamo occupati dellaspetto client, qui spostiamo lattenzione sullambiente server ricorrendo proprio allutilizzo di CGI-Perl. I 1

form HTML sono i migliori candidati per lacquisizione di informazioni da parte dellutente che visita il sito Web: sono quindi gli strumenti pi adatti per interagire con i visitatori. Nella figura 1 potete notare tutti gli elementi caratteristici di un classico form. In primo luogo, ricordiamo che qualsiasi form HTML deve essere racchiuso entro le apposite tag <FORM> e </FORM>. La tag iniziale <FORM> contiene anche due importanti parametri (method e action), oltre al nome attribuito al form (indicato col parametro name): il loro significato sar presto chiaro. La restante struttura del form deve essere composta seguendo le specifiche HTML che consentono linserimento di caselle di testo, checkbox, option box, pulsanti e cos via. Per approfondire lutilizzo dei form HTML e scoprire tutte le possibilit che questi offrono, vi consigliamo di fare riferimento allindirizzo Internet www.w3.org/TR/REC-html40/ interact/forms.html (in lingua inglese). Le tag <INPUT>, specificate allinterno del corpo del form, consentono di porre, sulla pa-

gina HTML, campi per linserimento del testo (se il parametro type impostato a text), caselle di tipo checkbox (che possono essere o meno spuntate; se il parametro type impostato a checkbox), option box (se il parametro type impostato a radio), pulsanti di invio (con il parametro type impostato a submit) e di reset (annullamento) dei dati (con type impostato a reset). La parte pi importante del form risulta essere comunque proprio la tag <FORM>: lattributo method segnala al browser Internet che i dati inseriti dallutente allinterno del form debbono essere trasmessi al server con la modalit post o get; lattributo action indica invece che, dopo la pressione del pulsante di invio dei dati deve essere raggiunto ed invocato lo script CGI specificato (nellesempio http://www.openma ster.info/cgi-bin/guest.cgi).

info/cgi-bin/test.pl (sostituite, ovviamente, www.openma ster.info con lindirizzo del vostro server Web). Se, sulla pagina Internet, verr mostrato il messaggio Ecco la mia prima applicazione CGI congratulazioni! Avrete eseguito il vostro primo script CGI. In definitiva, il file test.pl consente di verificare che gli script Perl siano correttamente supportati.

Fondamenti di programmazione in Perl

Perl il linguaggio pi popolare per la stesura di script Perl. Cos come nel caso di JavaScript, parliamo di script e non di programmi. bene infatti sottolineare la differenza che esiste tra i due termini: gli script sono righe di codice che indicano le azioni che devono essere compiute da parte del computer sul quale sono eseguiti; ogni riga viene interpretata (nel caso di JavaScript dal browser Internet, nel caso di Perl dal software residente sul server). I programmi sono invece preventivamente compilati, in modo da risultare pi veloci da eseguire (seppur decisamente pi ingombranti degli script). Per programmare in Perl non serve nulla di particolare: sufficiente un normale editor testuale come il Blocco Note di Windows oppure - meglio TextPad, 1st Page 2000 o software similari. Chi lavora su Linux pu orientarsi sullutilizzo di Emacs o di Vi (riconosce molti linguaggi ed in grado di colorare opportunamente comandi, funzioni e parole chiave) - disponibile anche nella pi recente versione grafica denominata GVim -.

La prima applicazione CGI

Per verificare che gli script Perl, memorizzati nella cartella cgi-bin del vostro server Web, vengano correttamente eseguiti, provate a creare con un qualsiasi editor di testo (va bene anche il Blocco Note di Windows) un file contenente quanto segue:

#!/usr/local/bin/perl #Questa riga indica dove localizzato linterprete Perl print "Content-type: text/html\n\n"; #Questa linea consente di stabilire che tipo di contenuto deve essere visualizzato print "Ecco la mia prima applicazione CGI!"; #Questa linea imposta il testo che dovr essere visualizzato sulla pagina Web
1. Lattributo method indica che i dati inseriti nel form devono essere trasmessi con la modalit post. 2. Action indica lo script CGI che deve essere avviato dopo la pressione del pulsante Submit (Invia). 3. Le tag <INPUT type=text> permettono di inserire altrettanti campi per linserimento di testo. 4. La tag <TEXTAREA> consente linserimento di un testo lungo (la casella per linserimento del testo occupa, in questo caso, 5 righe e 50 colonne). 5. I pulsanti Submit e Reset permettono, rispettivamente, la trasmissione al server Web delle informazioni inserite e la pulizia del contenuto del form.

Le variabili e i tipi
Gi dalla precedente lezione sapete cosa sono le variabili. Si tratta di appositi contenitori (porzioni della memoria) allinterno dei quali possibile memorizzare ogni tipo di dato. In Perl necessario anteporre al nome della variabile unindicazione che permette di stabilire il tipo di dato che verr in essa memorizzato. Se si intende salvare in una

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.

74/88

7a lezione
variabile un tipo di dato scalare cio un numero, una stringa (un testo) o una costante, indispensabile anteporre, al nome della variabile, il simbolo del dollaro ($). Ad esempio, $nome una variabile di tipo scalare che potr essere utilizzata per memorizzare una stringa di testo. Oltre agli scalari, esistono in Perl altri tipi di variabili. Anteponendo il carattere @ (at o chiocciolina) al nome della variabile, possibile inizializzarla come variabile di tipo array (chiamati anche matrici). Gli array sono dei gruppi di scalari: ci significa che allinterno di una variabile di tipo array possibile memorizzare un insieme di valori (stringhe di testo, numeri, costanti). Un array pu contenere da zero elementi sino a quanti sono consentiti dal quantitativo di memoria in uso. Un esempio di array il seguente: @redazione = ($direttore, $caporedattore,$caposervizio, Gruppo Editoriale Agepe,$impiegati) Com possibile notare, larray Redazione formato da cinque elementi ordinati: quattro stringhe (direttore, caporedattore, caposervizio e impiegati) ed una costante di tipo stringa opportunamente delimitata (com obbligatorio) tra apici. Esiste, poi, un tipo denominato hash (o array associativo): questo permette di abbinare, in ununica variabile, un insieme di scalari. Le variabili hash devono essere precedute dal simbolo % (percento). Un esempio di hash il seguente: %libro = (Titolo:,$titolo_libro,Codice:, $codice,Autore:,$autore) Con lesperienza ci si accorger che gli hash possono rappresentare un ottimo strumento: essi infatti consentono di correlare, in ununica variabile immediatamente accessibile, un nome ed il relativo valore. sa su una pagina Web, di porre inizialmente listruzione print "Content-type: text/html\n\n";. In questo modo si comunicher al browser Internet che dovr aspettarsi larrivo di una pagina in formato HTML. Tramite listruzione print, si pu stampare sulla pagina Web anche del codice HTML. Verificate, per esempio, come lo script Perl creahtml.pl crei una pagina Web direttamente dallo script CGI. 3

Passaggio dei dati a script CGI: metodi POST e GET

Abbiamo gi evidenziato come gli script CGI consentano di interagire con lutente che visita il nostro sito. Tale interazione si concretizza con luso di script CGI collegati a normali form HTML. Uno degli accorgimenti pi importanti per ricevere dati, consiste nel contrassegnare ogni campo che costituisce il form con un nome identificativo. Loperazione del tutto analoga a quanto gi visto nella scorsa lezione con il JavaScript: sufficiente aggiungere, allinterno dei marcatori <INPUT>, <SELECT>, <TEXTAREA> lattributo name. Provate ad analizzare il codice HTML del file guest.html: ciascun campo che costituisce il form per linserimento dei dati del libro degli ospiti identificato con un attributo name. Lo script CGI acquisir i dati inseriti dallutente in ciascun campo del form proprio riferendosi agli attributi name: scegliete, quindi, per ciascun campo, un identificativo adatto (fig. 2). Ma come vengono passati i dati allo script CGI che deve riceverli eD elaborarli? Lattributo action, da inserire nella tag <FORM>, permette di specificare lo script CGI che dovr ac2

quisire le informazioni inserite nel form HTML mentre lattributo method consente di stabilire la modalit di passaggio dei dati. I possibili valori assegnabili allattributo method sono POST e GET. Il primo consente di inviare allo script CGI, memorizzato sul server Web, una quantit illimitata di dati. Proprio per questo motivo il metodo pi utilizzato. Quando si utilizza il metodo POST, inoltre, sulla barra degli indirizzi non vengono visualizzate informazioni sui dati che vengono trasmessi al CGI. Il metodo GET quindi scarsamente utilizzato quando si vogliono acquisire dei dati da un normale form HTML. bene per precisare che i form non rappresentano lunico modo per trasmettere dati ad uno script CGI: infatti possibile inviarli anche tramite un normale link HTML del tipo <A

Listruzione print e il codice HTML

Nel primo esempio di script CGI abbiamo utilizzato ununica istruzione Perl: si tratta di print. Analogamente a document.write di JavaScript, consente di stampare, sulla pagina Web, una stringa di testo. Bisogna sempre ricordare, se si vuole visualizzare qualco-

HREF>. Ad esempio il link seguente, permette di inviare allo script libro.pl, le informazioni indicate dopo il simbolo ? (punto interrogativo): <a href=http://www.open master.info/cgi-bin/libro.pl?au tore=rossi&tipo=informatica&a nno=2002>Trova i libri di infor matica scritti dal Sig. Rossi nel lanno 2002</a> In questo caso, per il passaggio dei dati, viene utilizzato il metodo GET. Osservate il formato da utilizzare per linvio dei dati: dopo il punto interrogativo deve seguire il nome del dato, il simbolo di uguaglianza quindi il valore. Qualora si debbano inviare pi dati necessario separarli con lutilizzo del simbolo & (fig. 3). Le variabili dambiente contengono il gruppo di dati che viene inviato allo script CGI residente sul server Web e sono memorizzate in una variabile di tipo hash denominata %ENV. La variabile ambiente REQUEST_METHOD consente di stabilire con quale metodo sono stati passati i dati allo script CGI mentre QUERY_STRING permette di visualizzare il valore ricevuto tramite il metodo GET. Lo script libro.pl che viene invocato dal link HTML (ved. file libro.html) offre la possibilit di verificare luso delle variabili dambiente. Notate che largomento della variabile $ENV deve essere racchiuso tra parentesi graffe

75/88

7a lezione
ed apici. Esistono altre variabili dambiente: CONTENT_ LENGTH consente di stabilire la lunghezza dei dati trasmessi col metodo POST; HTTP_USER_ AGENT di recuperare le informazioni sul browser e sul sistema operativo utilizzati dallutente; HTTP_REFERER di ottenere lindirizzo della pagina Web che ha richiamato lesecuzione dello script CGI. Il CGI variabili_ambiente.pl permette di ottenere la lista completa dei valori assunti da tutte le variabili dambiente al momento della sua esecuzione. Proviamo ora a cimentarci con lutilizzo del metodo POST. Immaginiamo di aver creato una pagina Web (ved. il file sondaggio.html) contenente, al suo interno, il seguente codice per la visualizzazione di un form (listato 1): Al solito, lattributo action consente di indicare lo script CGI cui devono essere passati i dati inseriti nel form; method stabilisce la modalit di invio degli stessi. Com possibile sviluppare uno script CGI che acquisisca le informazioni trasmessegli dal form con lutilizzo del metodo POST? Non ci dilungheremo qui in una trattazione dettagliata del problema perch meriterebbe unanalisi piuttosto approfondita. Abbiamo comunque gi visto come, quando un utente clicca sul pulsante di invio, i dati del form vengano trasmessi al server. Tali informazioni, per, per poter essere utilizzabili, devono essere confezionate in un formato correttamente leggibile da parte del vostro script CGI. I visitatori del vostro sito Web si aspettano che, inserendo dei dati in un form, venga restituito loro un risultato: talvolta pu trattarsi di una cosa semplice come linvio di un messaggio -, altre volte si devono gestire funzionalit pi complesse come linoltro di un ordine di acquisto. In ogni caso, lo script CGI che deve elaborare le informazioni inserite nel form ha bisogno di quei dati. Abbiamo gi visto come i dati possano provenire da fonti diverse: da normali form HTML, da link, da variabili dambiente. Quando un utente invia i dati inseriti nel form cliccando sullapposito pulsante submit, o quando clicca su un link (come quello che invocava lo script libro.pl), il server riceve i dati sotto forma di coppie nome-valore, in un unico blocco continuo. Lo script CGI, per poter far uso di tali informazioni, deve necessariamente scomporle in pezzetti pi piccoli: il processo prende il nome di parsing. Nel nostro esempio, dopo che lutente avr cliccato sul pulsante Invia, i dati trasmessi allo script sondaggio.pl assumeranno una forma simile alla seguente: txt_nome=Mario+ Rossi&Eta=30&risp1=buono. Il parsing dei dati permette di scomporre le informazioni ricevute nella forma che lo script CGI si aspetta. Il blocco racchiuso tra i commenti #inizio_parsing e #fine_parsing nello script sondaggio.pl effettua proprio il parsing dei dati ricevuti dal form HTML contenuto in sondaggio.html.

Esempi e risorse per approfondire

Chi volesse approfondire largomento programmazione CGIPerl, estremamente vasto e sfaccettato, pu fare riferimento ai siti Web www.perl.com, www.perl.org ed al newsgroup italiano it.comp.www.cgi (consultabile anche via Web allindirizzo http://groups.google.com/ groups?hl=it&lr=&ie=UTF-8& group=it.comp.www.cgi). Chi invece fosse interessato allutilizzo di script CGI che consentano la visualizzazione di contatori grafici e testuali per il proprio sito Web, guestbook, piccoli motori di ricerca, carrelli della spesa, mailing list e cos via, pu fare riferimento al sito http://cgipoint.html.it: possibile reperire qui unampia raccolta di link verso siti Web che offrono materiale in modo del tutto gratuito.

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&agrave;:<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>

3 Installare e configurare un server Web

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

guiti su ciascun computer client. Lobiettivo di questa lezione non quello di improvvisare sistemisti i nostri lettori ma vuole rappresentare un punto di partenza per tutti coloro che desiderano approfondire le tematiche relative alla programmazione lato server. Comprendere come operano Apache o IIS consentir, dapprima, di convertire - a mero scopo didattico - un personal computer di casa o dellufficio a server Web: potrete effettuare qui le vostre prime prove di configurazione. Una volta che il sistema ri-

sulter adeguatamente configurato, potrete utilizzarlo per testare le vostre pagine Web facenti uso di tecniche di programmazione che implicano linterazione con il server, prima ancora di caricarle sullo spazio Web messovi a disposizione dal vostro provider Internet. Chi sviluppa siti Web dinamici, infatti, bene allestisca a casa propria o nel proprio ufficio - uno o pi server Web in modo tale da verificare il perfetto funzionamento delle pagine realizzate prima ancora di porle online. I pi volenterosi ed i pi in-

teressati allargomento, potranno raffinare le stesse conoscenze con lobiettivo di allestire un vero e proprio server Web personale. Chi dispone di connessioni Internet a larga banda (ADSL o fibra ottica) pu provare a rendere uno o pi siti Web accessibili al mondo intero direttamente da uno dei propri computer di casa o dellufficio. Chi possiede una rete locale pu pensare alla realizzazione di servizi di gestione della propria attivit basati su Intranet. Il lettore avr quindi gi compreso come la conoscenza del funzionamento del server

76/88

7a lezione
Web apra enormi possibilit. Va sottolineato che la realizzazione di progetti complessi implicher la necessit di misurarsi immediatamente con problematiche assai importanti come quella della sicurezza. Se non si vuole vedere il proprio server Web violato dallesterno, attraverso la Rete, da parte di hacker e malintenzionati, si dovr imparare ad applicare patch e severe policy di sicurezza. Queste tematiche, che necessiterebbero una trattazione ampia ed articolata, saranno oggetto di servizi futuri. si dalla staticit dellHTML. Nacquero, quindi, i primi linguaggi server-side: lintento era quello di garantire una maggiore interattivit delle pagine Internet, restituendo allutente solo le informazioni cui egli era effettivamente interessato. CGI proprio una delle prime tecnologie che vennero offerte agli sviluppatori per rendere maggiormente dinamici i propri progetti sul Web. Dopo CGI hanno preso ampiamente piede ASP, PHP, ColdFusion e JSP mentre sta cominciando a fare capolino il nuovo Microsoft .NET. Il denominatore comune dei linguaggi di scripting server-side consiste nel fatto che il codice viene eseguito e interpretato direttamente sul server che ospita il sito Internet (una situazione inversa rispetto a quanto accade nel caso di JavaScript). In questo modo possibile acquisire dallutente la lista delle informazioni alle quali egli interessato, ricercarle sul server quindi proporgliele sotto forma di una normale pagina HTML, preparata al volo direttamente sul server Web. Il processo del tutto trasparente agli occhi dellutente. Linguaggi come ASP e PHP hanno aperto scenari fantastici, impensabili allepoca in cui tutto il Web era immobile, condizionato dalla staticit dellHTML: si pensi, a mero titolo esemplificativo, che oggi possibile generare automaticamente pagine HTML riversando, al loro interno, il contenuto di un database. In pratica, immaginate di poter memorizzare tutte le informazioni che dovranno essere inserite nel vostro sito Web (ad esempio, il catalogo dei vostri prodotti con nome, descrizione ed altri dati caratterizzanti) in unico database. Grazie allutilizzo di script server-side il server Web sar in grado di attingere dal database solo le informazioni alle quali il visitatore interessato, comporre una normale pagina HTML, inserirvi allinterno i dati richiesti e proporre il tutto allutente. Nel caso di un catalogo memorizzato allinterno di un database (per esempio, in formato Microsoft Access), si dovr esclusivamente realizzare

IIS, le differenze in Windows XP Pro e 2000/2003 Server

Sia la versione Professional di Windows XP (cos come Windows 2000 Professional), sia la versione Server di Windows 2000/2003, mettono a disposizione Internet Information Services (IIS). Le differenze tra le due versioni, sebbene siano molto simili per ci che concerne linterfaccia grafica di amministrazione, sono piuttosto marcate. La versione di IIS inclusa in Windows XP Professional assai limitata: il webmaster o il programmatore pu farne uso con il solo scopo di testing delle pagine Internet sviluppate. Una volta verificata la corretta visualizzazione di tutte le pagine Internet su una tranquilla workstation locale dotata di Windows XP Professional e IIS, una volta soddisfatti del proprio lavoro, si potr procedere alla pubblicazione del sito sul server della societ o del provider Internet sul quale sar in esecuzione Windows 2000 Server e IIS oppure, se pi fortunati, Windows 2003 Server, molto superiore rispetto a Windows 2000 Server in termini di affidabilit e di prestazioni. La versione di IIS di Windows XP Professional non permette infatti, di creare veri e propri siti Internet, raggiungibili dallesterno nella forma http://www.nomedelsito.com ma semplicemente di creare una serie di directory virtuali: in ciascuna di esse si potranno memorizzare le pagine costituenti un unico sito. Ciascun sito virtuale sar per raggiungibile nella forma http://123.45.67.89/nome_sito ove 123.45.67.89 lindirizzo IP associato in quel momento alla macchina dotata di Windows 2000 Professional e IIS; nome_sito il nome della directory virtuale contenente le pagine Web da visualizzare. Sebbene questo tipo di struttura possa essere adeguata per piccole realt aziendali che utilizzano reti locali per offrire ai propri dipendenti servizi Intranet (ad esempio, la possibilit di accedere a determinati dati, di acquisire ordini dai clienti, di gestire la contabilit dellazienda semplicemente da uninterfaccia Web), non pensabile adottare questa soluzione nel caso in cui, dalla medesima macchina, si desideri rendere accessibili numerosi siti Internet nella forma www.ilmiosito.it o www.ilsuosito.com. lo script in grado di recuperare le informazioni e di generare la pagina Web. In questo modo si eviter di sprecare tempo e risorse nello sviluppo di una pagina HTML statica per ciascun prodotto che si vuole mettere in Rete. Eventuali modifiche (grafiche e non) dovranno essere inoltre applicate solo allo script server-side e non ad ogni singola pagina HTML! Presenteremo linguaggi come ASP e PHP nel prossimo futuro. Server e quello che viene fornito con le versioni Professional sono notevoli (a tal proposito, fate riferimento al box di approfondimento qui sopra). Sostanzialmente, la versione di IIS inclusa in Windows XP Professional pu essere utilizzata con il solo scopo di sviluppare e testare a fondo i siti Web che si stanno realizzando, prima ancora di pubblicarli on line (sul server Web messo a disposizione dal proprio provider Internet). Tale versione di IIS infatti assolutamente inadatta se si vuole allestire un server professionale. La versione di IIS inclusa in Windows XP Professional la stessa che viene fornita insieme con Windows 2000 Professional (cambia solo il numero della versione: IIS 5.1 in luogo di 5.0). In Windows XP Professional, linstallazione di IIS deve essere avviata manualmen-

Server Web professionali

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

Installare e configurare IIS

Internet Information Services (IIS) il server Web che Microsoft mette a disposizione nelle versioni Professional e Server di Windows 2000 ed in Windows XP Professional (di Windows 2003 Server, in test presso diverse aziende gi da un paio di anni, atteso per i primi di maggio). Le differenze tra lIIS incluso nelle versioni

77/88

7a lezione
4 net Information Services. Cliccando su OK vi verr richiesto di inserire il CD ROM di installazione di Windows XP. Al termine della fase di setup, che proceder in modo automatico, consigliamo di riavviare il sistema operativo (fig. 4). Per controllare che IIS sia installato e funzionante, avviate il browser Internet quindi digitate, nella barra degli indirizzi, http://localhost (localhost detto anche indirizzo di loopback ed identifica il vostro stesso computer). Il server Web (IIS) dovrebbe rispondere alla vostra richiesta mostrandovi la pagina di default. Se il computer connesso in rete locale, provate ad accedere alla visualizzazione della pagina HTML di default di IIS da un client qualsiasi. Per far ci eseguite Internet Explorer (o il browser installato) e digitate, come URL, http:// seguito dal nome del computer sul quale in esecuzione IIS (per esempio: http://michelesrv). Per verificare il nome assegnato al computer sul quale avete provveduto ad installare IIS, accedete al Pannello di controllo, fate doppio clic sullicona Sistema, cliccate sulla scheda Nome computer. Il pulsante Cambia permette di modificare a proprio piacimento il nome della macchina (fig. 5). In alternativa, potete provare a raggiungere la macchina IIS facendo riferimento al suo indirizzo IP. Supponiamo che allinterno della rete locale gli sia stato assegnato lIP 192.168.0.4: provate a digitare http:// 192.168.0.4 da un qualsiasi 5

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-

personal computer della LAN per accedere alla pagina predefinita proposta da IIS. Se poi il computer collegato ad Internet dovrebbe essere possibile raggiungerlo dallesterno indicando lIP assegnato dal provider al momento della connessione.

4 Configurazione del sito Web predefinito in Windows XP Professional

ccedendo al Pannello di controllo di Windows XP Professional e facendo doppio clic sullicona Strumenti di amministrazione quindi su Internet Information Services, si acceder alla finestra di configurazione del server IIS. Da questa finestra possibile gestire siti Web, funzionalit FTP e SMTP. Dopo linstallazione di IIS, viene automaticamente creato un sito Web predefinito contenente, essenzialmente, i riferimenti ai file della guida di Internet Information Services. opportuno considerare le varie opzioni per la configurazione di un sito Web da un punto di vista gerarchico: maggiore il livello gerarchico dellelemento sul quale si stanno apportando delle modifiche, maggiore sar limpatto globale degli stessi interventi. Molte schede per la configurazione compaiono a pi livelli gerarchici: ci significa che effettuando una modifica al livello pi alto verr influenzato un maggior numero di oggetti componenti il sito. Fate clic con il tasto destro

del mouse sulla voce Sito predefinito quindi scegliete Propriet. La prima parte della finestra contiene le informazioni necessarie per lidentificazione del sito, compresi nome e indirizzo. Vi sono poi due voci relative alle porte da utilizzare: la prima, per gli accessi anonimi dal server, la seconda per laccesso SSL. Una delle limitazioni che Windows XP Professional impone consiste nel fatto di mettere a disposizione lutilizzo, per le connessioni SSL, di ununica porta: la 443. Laltra grossa limitazione della versione di IIS contenuta in Windows XP Professional, consiste nel fatto che il numero di connessioni che possono essere effettuate limitato a 10. Questa restrizione rende Windows XP Professional assolutamente inadatto per la gestione di un normale sito Web che preveda un numero di accessi contemporanei superiore. Il campo Timeout connessione permette di stabilire il tempo massimo (in secondi) durante il quale un utente inattivo - che non naviga cio al-

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

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

78/88

7a lezione
A questo livello non ci sembra opportuno dilungarci sui filtri ISAPI: basti sapere che essi consentono di eseguire controlli in background sul sito Web. Vi sono diversi tipi di filtri: alcuni soddisfano esigenze relative alla sicurezza, altri la mappatura degli URL e lelaborazione delle intestazioni richieste. La scheda Home Directory permette invece di specificare dove debbono essere reperiti i file che compongono il sito Web che si sta configurando in IIS. Le scelte possibili sono tre: Directory situata in questo computer, Directory condivisa situata in un altro computer e Reindirizzamento a un URL. La scheda pu assumere diverse forme a seconda che si sia selezionata una directory, una directory virtuale o un file (fig.7). La sezione sottostante della finestra permette di impostare le tipologie di accesso consentite. Accesso origine script, se selezionato, e se sono impostati i premessi di lettura e/o scrittura, permette l'accesso al codice sorgente degli script; Lettura consente l'accesso alla risorsa in sola lettura; Scrittura permette l'accesso alla risorsa in lettura/scrittura; Esplorazione directory se selezionato, visua7 lizza in formato ipertestuale il contenuto di una cartella non virtuale. Per visualizzare il contenuto di queste ultime bisogner conoscerne l'alias associato. Se l'opzione non abilitata e l'utente specifica all'interno dell'URL un percorso ad una risorsa inesistente, il server Web risponder con un messaggio di errore (accesso negato); Registra visite aggiunge la risorsa a quelle da monitorare per mezzo dei file di log; Indicizza questa risorsa se il servizio di indicizzazione attivo, aggiunge la risorsa a quelle da indicizzare. Il menU a tendina Autorizzazioni di esecuzione permette di indicare il livello di esecuzione autorizzato sulla risorsa: solo file HTML, script oppure script ed eseguibili. La scheda Documenti consente di impostare le pagine che devono essere automaticamente proposte allutente qualora egli non specifichi il nome di un file memorizzato sul server. il tasto destro del mouse su Sito web predefinito, cliccate sulla scheda Home director y, quindi eliminate wwwroot dalla casella Percorso locale (dovrebbe restare solo c:\inetpub). Questa modifica vi permetter di evitare un messaggio derrore che informa sullinesistenza della cartella specificata (fig. 8-9). Dopo aver effettuato le regolazioni iniziali, sinora illustrate, possibile passare alla creazione di una directory virtuale. Nella versione di IIS inclusa in Windows XP Professional immediato pensare di creare una directory virtuale per ogni sito Web che si sta sviluppando. Destinando una directory virtuale a ciascun sito su cui si sta lavorando, possibile simulare, sul proprio computer, il comportamento del server Web che lo ospiter. possibile visualizzare, quindi, pagine Web statiche e dinamiche cos come appariranno successivamente dopo averle caricate sul server. Lutilizzo delle directory virtuali permette di risolvere eventuali problemi prima ancora di pubblicare i file sul server Web del provider Internet consentendo di concentrarsi esclusivamente sulla programmazione e sullottimizzazione del sito. La particolarit delle directory virtuali consiste nel fatto di fungere da puntatore verso una cartella residente su un disco fisso locale o su un altro personal computer in rete (fig. 10). Per creare una nuova directory virtuale, sufficiente fare clic con il tasto destro del mouse su Sito web predefinito quindi seguire la procedura passo-passo che viene presentata. La finestra immediatamente successiva a quella di presentazione, richiede di specificare un alias per la directory virtuale che si sta crean10 do. Lalias lidentificativo che dovr digitare, nella barra degli indirizzi del browser Internet, chiunque vorr accedere al contenuto della directory virtuale. Ad esempio, supponiamo di inserire pcopen come alias: ci significa che se dal browser Internet si 9

Primi accorgimenti e creazione di una directory virtuale

Microsoft stessa, per motivi di sicurezza, consiglia di eliminare i riferimenti ai file della guida ed agli esempi installati automaticamente insieme con IIS (per ottenere la lista completa delle patch da installare e delle politiche di sicurezza che consigliabile applicare, suggeriamo lutilizzo del software Microsoft Baseline Security Analyzer (MBSA), gi presentato nei numeri 78 (a pagina 61) e 79 (a pagina 69) di PC Open. Per far questo eliminate, dalla finestra di amministrazione di IIS, tutte le directory virtuali create dopo linstallazione di Internet Information Services (cancellate le directory virtuali Scripts, IISAdmin, IISSamples, MSADC, IISHelp, WebPub, Printers) e tutti i contenuti predefiniti (cancellate le cartelle inetsrv\iisadmin e inetsrv\iisadmpwd entrambe contenute nella cartella \winnt\system32 -; cancellate anche le cartelle \inetpub\wwwroot (o \ftproot o \smtproot), inetpub\scripts, inetpub\iissamples, inetpub\adminscripts, %systemroot%\help\iishelp\iis e %systemroot%\web\printers. A questo punto fate clic con

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

79/88

7a lezione
11 13

Dopo limpostazione dellalias, necessario indicare la cartella che deve essere puntata ossia la directory su disco che contiene (o allinterno della quale si intende memorizzare) i file che costituiscono il sito Web. Il nostro consiglio quello di effettuare una prova copiando i file desempio che trovate nel CD ROM allegato a questo numero di PC Open in una cartella sul vostro disco fisso. Ad esempio, se decidete di porre tali file in una cartella denominata C:\PCOpen_esempi, specificate qui la stessa directory (servendovi del pulsante Sfoglia) (fig. 12). Come ultimo passo, necessario specificare le autorizzazioni che si desiderano impostare per la directory virtuale in corso di creazione. Suggeriamo di attivare solo le caselle Lettura ed Esecuzione script. Cliccando sul pulsante Avanti quindi su Fine, si concluder la procedura guidata. Come risultato, vedrete comparire allinterno del ramo Sito web predefinito, una nuova 12

voce, corrispondente allalias da voi scelto per la directory virtuale. Cliccando con il tasto destro del mouse sulla directory virtuale pcopen appena creata quindi scegliendo Propriet, avrete accesso alla finestra delle propriet, molto simile a quella gi vista in precedenza per il Sito Web predefinito (fig. 13). Sono due gli aspetti che, a questo livello, bene sottolineare. Il primo riguarda la gestione della sicurezza. La scheda Protezione directory permette di stabilire le modalit con le quali un utente pu accedere alla directory virtuale. Diversamente dalla versione server di IIS, in Windows XP Professional non possibile controllare laccesso in base allindirizzo IP. Facendo clic sul pulsante Modifica, viene visualizzata la finestra Metodi di autenticazione: selezionando la casella Accesso anonimo possibile fare in modo che chiunque possa accedere alla directory (pur consentendo di mantenere il controllo sulle sottodirectory e sui singoli file). Nonostante laccesso sia anonimo, lutente verr registrato nel sistema per mezzo di un account ad hoc (generalmente denominato IUSR_nomecomputer, ove nomecomputer il nome associato al computer sul quale in esecuzione IIS). Gli utenti anonimi non

dovranno inserire alcun nome utente identificativo n alcuna password per accedere ad una directory virtuale sul vostro computer. Se su un server Web di solito si deve consentire laccesso ad un sito senza digitare alcun nome utente e password, sul vostro computer locale sarebbe bene inibire, per ragioni di sicurezza, qualsiasi forma di accesso anonimo. Gli altri tre livelli di accesso richiedono lidentificazione dellutente prima di consentire laccesso alla directory. Attivando la casella Autenticazione di base vengono richiesti il nome e la password dellutente. Lunico problema che tali informazioni vengono trasmesse in chiaro e possono essere quindi intercettate consentendo ad utenti malintenzionati di accedere al sistema in modo non autorizzato. Lintercettazione pu avvenire tramite un software (o un hardware) denominato sniffer, in grado di analizzare il contenuto di ogni pacchetto inviato e ricevuto. Le due opzioni successive sono utilizzabili in Windows 2000 Professional solo se la macchina colle- 14 gata ad un server di dominio. Lopzione Autenticazione integrata di Windows sfrutta invece un metodo completamente diverso per lidentificazione dellutente: in questo caso il sistema operativo effettua uno scambio di dati crittografati con il browser dellutente grazie ad un metodo di certificazione digi-

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

80/88

7a lezione

5 Installare e configurare Apache sotto Windows

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

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

16

configurazione dellintero server Web httpd.conf contenuto nella cartella \Apache\conf. Ricorrendo allutilizzo di Risorse del computer (o Gestione risorse), portatevi allinterno della cartella ove avete installato Apache quindi fate doppio clic sulla directory denominata Conf. Lanalisi delle varie opzioni di configurazione di Apache, effettuabili agendo sul file httpd.conf, va oltre gli obiettivi di questa lezione. Suggeriamo di fare riferimento alla pagina http://httpd. apache.org/docs-2.0/mod/ quickreference.html per ottenere una lista completa delle regolazioni (direttive) applicabili. Per rendere la configurazione di Apache pi semplice ed intuitiva evitando, cos, di dover intervenire direttamente sul file di testo httpd.conf sono nati dei tool basati su interfaccia grafica. A titolo desempio citiamo ApacheConf (a pagamento) prelevabile allindirizzo http:// www.apache-gui.com/.

trambi i mondi: servendosene si potr provare tutti gli script CGI Perl sul proprio personal computer. La versione Windows disponibile sul CD guida allegato per concessione di Active State che detiene il copyright su Active Perl e Perlscript. Linstallazione di ActivePerl per Windows avviabile facendo doppio clic sul file ActivePerl5.8.0.805-MSWin32-x86.msi. Dopo la schermata iniziale, per prima cosa si dovr accettare il contratto di licenza duso (da leggere attentamente) quindi scegliere la cartella allinterno della quale si desidera installare il pacchetto software (fig. 17). ActivePerl si compone di di-

Apache sotto Linux

Alcune distribuzioni Linux contengono gi il server Web Apache e ne offrono linstallazione. Se si desidera comunque utilizzare lultima versione disponibile, sufficiente collegarsi con il sito www.apache.org e scaricare il file dinstallazione per Linux (httpd-2.0.44.tar.gz). Portatevi alla riga di comando Linux, accedete alla cartella ove avete scaricato il file dinstallazione in formato .tar.gz quindi seguite scrupolosamente i comandi che trovate elencati nella documentazione di Apache circa linstallazione del Web server in ambiente Linux, consultabile in qualunque momento allindirizzo seguente: http://httpd.apache.org/ docs-2.0/install.html.

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-

81/88

17

elementi. Quello che ci insa in questo momento il n ISAPI per il server Web: tta di un componente che erfaccia con IIS e che condi elaborare script CGI. nstallarlo, in fase di setup ci ve assicurare di attivare le le Create IIS script mapping erl e Create IIS script mapfor Perl ISAPI. Di solito, linzione di ActivePerl abilita ro server Web allesecudei CGI (da qualsiasi sito configurato, da qualunque tory virtuale e da qualsiasi 18

cartella). Nel caso in cui si dovesse configurare un server Web reale non un computer destinato esclusivamente al test in locale dei propri script sarebbe bene, per motivi di sicurezza, restringere lesecuzione degli script CGI solo alle cartelle in cui ci risulti effettivamente necessario. Una volta terminato il setup di ActivePerl, accedete quindi alla finestra Gestione Servizio Internet Microsoft dal Pannello di controllo, cliccate con il tasto destro del mouse sul nome del server e scegliete la voce Propriet, selezionate la voce Servizio WWW quindi cliccate sul pulsante Modifica (fig. 18). Provate a copiare lo script test.pl che trovate nel CD ROM di PC Open nella cartella cgi-bin della directory virtuale pcopen, creata in precedenza in IIS. Aprite Internet Explorer e digitate, nella barra degli indirizzi http://localhost/pcopen/cgibin/test.pl: il browser Internet visualizzer semplicemente il codice Perl che compone lo script CGI ma questo non verr eseguito. Selezionate, a questo punto, la cartella Home directory, cliccate sul pulsante Configurazione: la procedura di installazione di ActivePerl dovrebbe aver inserito, nellelenco contenuto nella scheda Mapping applicazioni, le voci Perl %s %s e PerlIS.dll. In questo modo gli script Perl saranno eseguibili nellintero server Web. Avviando ora Internet Explorer e digitando nuovamente http://localhost/pcopen/cgibin/test.pl, lo script CGI test.pl

verr correttamente eseguito visualizzando la frase Ecco il mio primo script CGI! (fig. 19). Per provare gli script Perl contenuti nel nostro CD, direttamente sul vostro computer, quindi sufficiente copiare i file con estensione .pl (Perl) nella cartella cgi-bin. ActivePerl offre anche la possibilit di controllare la sintassi di uno script Perl da voi sviluppato. sufficiente accedere al prompt di MS DOS, portarsi nella cartella dove avete memorizzato il vostro file Perl, quindi digitare perl c nomefile.pl (sostituendo a nomefile.pl il nome del vostro script Perl): ActivePerl vi segnaler eventuali errori di sintassi facendovi risparmiare molto tempo. ActivePerl offrir il supporto per lesecuzione degli script Perl anche se decidete di montare il server Web Apache in versione Windows. Ad installazione di Apache conclusa sufficiente provvedere al setup di ActivePerl, seguendo le linee guida appena illustrate, quindi copiare gli script con estensione .pl che trovate nel CD allegato a PC Open nella cartella cgi-bin. Tenete presente che, nel caso di Apache, la cartella cgi-bin viene automaticamente allinterno della directory di installazione del server Web. Memorizzate, quindi, nella cartella cgi-bin tutti i file Perl da voi creati (o quelli desempio che trovate nel CD di PC Open). Supponiamo che abbiate copiato, nella cartella cgi-bin, lo script test.pl. Avviate Internet Explorer e digitate, nella barra degli indirizzi, lURL http://localhost/cgibin/test.pl. Qualora vi venisse

19

restituito un Internal server error, aprite con un normale editor di testo tutti i file con estensione .pl che avete posizionato nella cartella cgi-bin e modificate la prima riga da #!/usr/local/bin/perl a #!c:/Perl/ bin/Perl.exe (supponendo di aver installato ActivePerl nella cartella c:\Perl). Adesso, digitando http://localhost/cgibin/test.pl nel browser Internet, dovrebbe venire correttamente visualizzata la frase Ecco la mia prima applicazione CGI! (fig. 20). Per chi volesse approfondire ulteriormente le modalit di utilizzo, le potenzialit e la configurazione di ActivePerl, suggeriamo di consultare lottima guida, disponibile in formato HTML, ed installata insieme con il programma vero e proprio. Per accedervi, cliccate su Start, Programmi, ActiveState ActivePerl quindi su Documentation. 20

82/88

8a lezione
A scuola con PC Open

Progetto
E
siamo cos arrivati allultima puntata del nostro corso per diventare WebMaster. Ricominceremo dopo lestate con un nuovo appuntamento dedicato a chi interessato ad acquisire competenze da Web designer In questa ultima puntata, dopo aver analizzato le tecniche e i segreti per la creazione di un sito Internet, ci occuperemo della sua promozione. Tutto l'impegno e il tempo finora dedicato alla realizzazione del sito Web ha avuto un unico grande scopo: mostrare

Web Master
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

di Roberto e Alessandro Abbate

Promuovere il proprio sito Web

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. 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
(disponibile integralmente sul CD)

il corso sul CD guida

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
(disponibile integralmente sul CD) Il server Web I form: la porta per lutilizzo degli script CGI Installare e configurare un server Web Configurazione del sito Web predefinito in Windows XP Professional Installare e configurare Apache sotto Windows

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 dimmagini Mappe immagine Audio e video

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

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

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

83/88

8a lezione

1 Tecniche di promozione: cosa fare e cosa evitare

ono state sprecate pagine, parole, convegni e incontri per spiegare quali sono le tecniche per fidelizzare l'utente: ovvero per far s che torni su un sito Web.

Cosa fare
A nostro modo di vedere per, di tutte le pratiche e tecniche che si possono applicare, ne esistono alcune che meritano di essere sottolineate: 1 - Innanzitutto il sito deve avere dei contenuti interessanti. impossibile spiegare quando un sito Web interessante, infatti lo diventa quando ci sono utenti che lo ritengono tale. Il miglior sistema per raggiungere questo primo, essenziale obiettivo, quello di pubblicare con una certa continuit, contenuti e argomenti che a nostro modo di vedere possono attirare l'attenzione. Nel vastissimo mondo di Internet infatti, ci sar certamente qualcun altro che condivide il nostro pensiero e avr quindi interesse a visitare il sito da noi creato.

2 - Cercate sempre l'interazione con i vostri utenti. essenziale che i visitatori del vostro sito possano interagire con il WebMaster del sito: innanzitutto potranno farvi avere le loro opinioni ed il loro parere (il cosiddetto feedback). Questo sar per voi oro colato: niente pi importante delle sensazioni dei vostri visitatori: saranno loro infatti a indirizzarvi verso le scelte migliori e a farvi notare gli errori da voi commessi. grazie al loro aiuto che potrete migliorare il vostro sito. Se poi capitasse di intrecciare nuove conoscenze, la cosa non potr che farvi piacere. 3 - Dovrete tenere presenti due parole importantissime in Internet: leggerezza e semplicit. Essere leggeri significa creare immagini e documenti che possano essere navigati velocemente dal vostro visitatore. Ci sono moltissime persone infatti che possiedono ancora un collegamento a 56 Kpbs via modem e non saranno certo entusiasti di aspettare trop-

po tempo per visitare una pagina Web. Per l'attesa, il tempo massimo di 10 secondi, mentre per quanto riguarda il peso, fate in modo che la pagina con tutti gli elementi (immagini, eventuali suoni e cos via) non superi i 70 KB. 4- Al punto precedente abbiamo parlato anche di semplicit: con ci vogliamo dire che meglio evitare sfondi troppo colorati, o riempire la pagina di immagini animate. Il vostro visitatore dovr poter leggere le vostre pagine senza fare fatica: non deve quindi affaticare la vista con contrasti di colore poco chiari o elementi che ne distraggano la lettura. La migliore soluzione quella di usare sfondi chiari e testo scuro. I link bene lasciarli sottolineati o se proprio volete cambiarli, fate in modo che siano sempre ben distinti dal resto del testo normale. Assolutamente da evitare sfondi animati o colori poco contrastanti (come arancione su nero, o giallo su rosso). Il buon senso vi guider ver-

so le scelte pi adatte: leggete con attenzione le vostre pagine Web e con una certa dose di autocritica.

Cosa evitare
Per esclusione, le prime cose da evitare corrispondono a tutto ci che si contrappone con quanto abbiamo scritto precedentemente. Per il resto, abbiamo raccolto le pratiche da non seguire all'interno del box sulla netiquette pi in l nelarticolo. Si tratta delle azioni che assolutamente devono essere evitate per promuovere con successo un sito Web. Quando si inizia infatti, facile incappare in errori a dir poco evitabili: troppa foga nella promozione. Ricordiamoci che i visitatori hanno sempre un ottimo motivo per non navigare il nostro sito Web: dovremo essere noi che, con discrezione e perseveranza, gli offriremo il pretesto per accedere al sito da noi creato. Dovremo quindi stuzzicare la loro curiosit e nello stesso tempo guadagnarci il loro rispetto.

2 I motori di ricerca: vietato mancare

desso che sappiamo quali sono le pratiche consigliate per promuovere un sito Web e quali quelle da evitare, possiamo iniziare con le prime, piccole attivit di marketing, o meglio, Web marketing. Ma da dove si comincia? Se lo chiedono tutti. Tante ore investite nella creazione di un sito Web e poi, una volta messo on line, la dura realt: nessuno (a parte noi e la nostra ristretta cerchia di amici) lo visita. Come rimediare? Come iniziare a promuoverlo? La risposta semplicissima: noi, da utenti, quando cerchiamo qualcosa, dove andiamo? Dove iniziano le nostre navigazioni? La risposta pu essere una ed una soltanto: i motori di ricerca.

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.

84/88

8a lezione
com, in italiano su http:// www.msn.it). 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. 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. 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.

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.

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.

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.

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-

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

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-

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

85/88

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

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

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-

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.

STRUTTURA DEL SITO

I trucchi degli esperti

Gli sviluppatori Web pi esperti, quando si trovano di fronte alla creazione di siti Internet, seguono delle re-

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

86/88

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> 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.

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. 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-

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:

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,

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

87/88

8a lezione

5 Per chi vuole approfondire: i libri consigliati

Risorse sull'argomento
La promozione di un sito Web un argomento caro a molti siti e come avevamo anticipato, in molti si sono concentrati su questo argomento. Grazie a ci, le risorse disponibili sono davvero tante. Iniziamo con un libro dal titolo Guadagnare con Internet edito da Jackson Libri e scritto da Luigi Manzo, responsabile del sito Internet Manuali.net. All'interno del testo, si trovano poco pi di 150 pagine con le principali tecniche per la promozione di un sito Internet e perch no, i servizi che permettono di guadagnare qualche euro facendo pubblicit. Su Internet invece, oltre ai link gi segnalati, possiamo riportare qualche sito specializzato sui motori di ricerca, come l'ottimo Submission (http://www.submission.it), lo storico MotoriDiRicerca (http://www.motoridiricerca.it) e il giovane MotoRicerca (http://www.motoricerca.info).

Un 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

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.

Saldatura tra management e marketing nella conduzione di un sito Web aziendale. Lautore propone un approccio molto sistematico alla valutazione di efficienza del proprio sito e alla sua gestione. Apogeo, 346 pagine, 21,69 euro

Come puntare ai profitti nella creazione di un sito, visto da unottica americana. Il testo una guida alle attivit essenziali di Web marketing, depurate dai fallimenti e orientate su casi che hanno raggiunto profittabilit. Apogeo, 334 pagine, 21,69 euro

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 luso di uno spazio di hosting dedicato, oltre ad una serie di altri servizi supplementari. In pi, dal momento che per poter usare lo spazio di hosting necessario disporre di un dominio, i lettori di PC Open in esclusiva potranno acquistare da subito il proprio dominio presso Register ad un prezzo scontatissimo (40% in meno, lo sconto pi alto oggi disponibile sul mercato). Il metodo semplicissimo: dovrete collegarvi al sito Internet www.register.it/pcopen, inserire il codice seguente: 2c7A4s nel box allinterno della pagina e a questo punto verrete inviati alla home page del sito di Register, da dove le registrazioni verranno scontate in automatico del 40%. Le registrazioni saranno comprensive di tutto quanto indicato allindirizzo http://we.register.it /domains/allincluded.html. Per il servizio di supporto inviare le e-mail allindirizzo support@register.it

88/88