Corso_webmaster

1a lezione

Obiettivo: diventareesperto nella creazione ecura di siti Web di altolivello qualitativo.Benefici: avere lecompetenze per produrreuna presenza su Internetda protagonisti per sé eper altri, un’abilità dasfruttare sia per aiutare gliamici sia per conquistarenuove prospettive di lavoro

Diventare Webmaster è co-me assumere il comandodi una nave oppure la con-

duzione di un treno. La desti-nazione e lo scopo del viaggiovengono quasi sempre sceltida qualcun altro, ma una voltapartiti, spetta al Webmaster ar-rivare in porto secondo le sca-denze previste e con il progettocompletato.

Nelle realtà più piccole, ilWebmaster di solito è anche re-sponsabile direttamente di pro-durre il sito in tutte le sue com-ponenti e di interagire con lasocietà di servizi che ospita ilserver e fornisce la connettivitàagli utenti, nel caso di progettiospitati all’esterno, oppure diparlare con i responsabili dei si-stemi informativi aziendali (ma-gari un altro consulente nel ca-so di piccole aziende) per sitiche sono ospitati all’interno.

Che cosa faLe competenze centrali di un

Webmaster sono: progettare lastruttura di un sito partendo daicontenuti che si vogliono pub-blicare e dal percorso di naviga-zione che meglio si adatta alla si-tuazione, produrre una struttu-ra di pagina HTML che sia leg-gera, compatibile con i diversi

browser e vicina alle specifichegrafiche previste per il sito, co-noscenza perfetta dei linguaggiusati per costruire le pagine(HTML, JavaScript, Perl CGI,DHMTL, CSS). Il Webmaster de-ve anche sapere come promuo-vere il sito sui principali motoridi ricerca così da attrarre traffi-co; come procurarsi e mantene-re un nome a dominio; come in-tegrare eventuali banner all’in-terno del sito, da utilizzare siacome fonte di guadagno (pub-blicità) sia come promozione in-crociata tra siti. Una volta che ilsito è onl ine, gran parte del suolavoro sarà centrato sulla pub-blicazione di nuovi contenuti,che gli arriveranno nei formatipiù diversi. Per questo motivo ilWebmaster opera in modo taleche il sito sia strutturato in mo-do efficiente così che l’aggiuntadi pagine risulti un’operazionesemplice e veloce.

I problemi maggiori in que-sto senso si presentano con i si-ti statici, dove ciascuna paginadeve essere generata a mano edove bisogna aggiornare conti-nuamente gli elementi di navi-gazione per includere i nuovicontenuti.

L’operazione diventa invecepiù semplice nel caso dei cosid-

detti siti dinamici,dove il contenutodelle pagine vienealimentato auto-maticamente da undatabase e bastainserire e cataloga-re correttamente leinformazioni all’interno del da-tabase per ottenere un sito ordi-nato e funzionale.

I siti dinamici si prestano an-che a un ulteriore livello di au-tomazione: mediante partico-lari programmi, detti contentmanager, che fanno da inter-faccia semplificata nei confron-ti del database e della strutturadel sito, i nuovi contenuti pos-sono essere caricati diretta-mente dall’utente, senza l’in-tervento continuo del Webma-ster. Si tratta tuttavia di sistemicomplessi e, spesso, costosiche richiedono un notevole im-pegno di programmazione.

Spetterà quindi al Webmasterdecidere se e quando usarli,spesso curando in prima perso-na le operazioni di sviluppo ne-cessarie a realizzarli. Nellarealtà, la quasi totalità dei siti so-no ibridi, con porzioni statiche eporzioni dinamiche a secondadella natura delle informazioni edella vita stimata del sito.

1° LEZIONE novembre 2002Competenze e strumenti- descrizione del ruolo diWebmaster e dei possibili percorsiprofessionali

- rudimenti per la progettazione diun sito e descrizione delle altrefigure coinvolte

- panoramica degli strumenti dilavoro gratuiti e professionali(vengono indicati per primi perchécostituiscono la componentepratica che poi accompagnerà ilcorso per tutto il tempo)

- riferimenti (libri – siti) per iniziarelo studio del linguaggio HTML sucui sperimentare mediante glistrumenti indicati

2° LEZIONE– dicembre 2002Siti statici e linguaggio HTML- concetti fondamentali dellaproduzione di un sito statico

- i trucchi del mestiere - la sintassi diHTML - pagine - tabelle - frame - form

- logica di visualizzazione dellapagina e collocazione deglielementi

- dove cercare lo spazio perpubblicarlo: hosting e domini

- esempi usando gli editor diriferimento

- i termini e gli standard

3° LEZIONE – gennaio 2003Modelli di pagine e tabelle- i protocolli di comunicazione- concetti fondamentali di:

Fogli di stile in cascataDHTMLJavaScript

- trucchi comuni per rendere il sitoattrattivo con poco sforzo

- differenze tra i tipi di browser- Risorse esterne su cui approfondire

- esempi usando gli editor di riferimento

4° LEZIONE – febbraio 2003HTML 4.01 e CSS5° LEZIONE – marzo 2003 Design e multimedialità6° LEZIONE – aprile 2003Siti interattivi7° LEZIONE – maggio 2003 Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Roberto Mazzoni

�

il corso èsul CDn. 65

� A scuola con PC Open

ProgettoWebMaster

Approfondimenti suimigliori editor HTMLfreeware nella sezioneOPEN Action a p.156

Sul CD GUIDA le versionicomplete degli articoli.

In più sul CD i programmi(gratuiti e demo) cheabbiamo citato.

1/88

1a lezione

L’ultima trinceaIl Webmaster rappresenta

l’ultimo passaggio di controlloprima che il sito vada in lineaed è in “pole position” ogni vol-ta che si presenta un problema.Di conseguenza deve essere ingrado d’individuare, corregge-re o far correggere rapidamen-te qualsiasi errore compiutodurante le precedenti fasi diproduzione da programmato-ri, grafici e sistemisti, le perso-ne, cioè, che gestiscono fisica-mente la macchina su cui risie-de il sito.

Per tale motivo deve dispor-re di una certa familiarità con iprincipali formati grafici delWeb e con i linguaggi di pro-grammazione usati nello svi-luppo di siti dinamici.

È anche opportuno che ab-bia conoscenze elementari disicurezza per poter evitare at-tacchi dall’esterno che potreb-bero compromettere l’immagi-ne del sito.

È importante infine che col-tivi ottimi rapporti con altriWebmaster, per potersi avvale-re dell’assistenza di colleghi suproblemi comuni e deve avereuna buona sintonia con il pro-vider che gestisce fisicamenteil sito, oppure dove sapere met-tere le mani sul server in primapersona.

Saper fare un po’ di tuttoOra che l’epoca della New

Economy è finita e che ci sonosempre meno soldi per svilup-pare e mantenere siti, spesso sichiede al Webmaster di realiz-zare in proprio anche la partedi programmazione necessariaalla produzione di un sito dina-mico (normalmente affidata a

un Web developer). Quasi mai,invece, ci si aspetta che il Web-master realizzi la grafica, a me-no che si tratti un sito di servi-zio dove le informazioni com-paiano quasi sempre in forma-to testo.

Esiste naturalmente anchel’eccezione di Webmaster conparticolare sensibilità grafica,capaci di svolgere pienamenteanche le funzioni di Web desi-gner, nel qual caso le possibi-lità di successo saranno anco-ra maggiori poiché avrannopieno controllo delle varie fasidi realizzazione anche senzadoverle eseguire necessaria-mente in prima persona.

Nella pratica, i problemiprincipali a cui il Webmasterdovrà prestare attenzione gliverranno proprio dalla graficae da una programmazione im-perfetta.

L’intervento di un Web deve-loper incompetente può pro-durre intoppi nel funzionamen-to del sito difficili da individua-re e risolvere.

Invece un Web designer in-competente può produrre pa-gine troppo complesse perchésiano visualizzate corretta-mente in tutti i principali brow-ser, grafica troppo pesante cherallenta i visitatori del sito, in-terfacce incomprensibili checonducono a una navigazioneconfusa, uso di “plug-in” pococomuni che creano problemidi compatibilità.

Perciò il Webmaster dovràessere pronto a intervenirenon solo sulla struttura dellapagina, ma anche sulla naviga-zione e sugli elementi graficiper rimediare al volo qualsiasiintoppo. �

CONTENT MANAGER è il responsabile dei contenutipubblicati sul sito (testo e grafica) eda lui vengono le indicazioni operativeper il Webmaster e il Web designer. In mancanza di questa figura, il ruoloviene spesso svolto dal Webmastermedesimo.

LINGUAGGI DI DEFINIZIONE DELLA PAGINA questi linguaggi indicano al browsercome visualizzare il contenuto di unapagina Web.I più importanti e utilizzati sonol’HTML (HyperText Markup Language),il DHTML (Dynamic HTML) e i CSS(Cascading Style Sheets – fogli distile in cascata).

LINGUAGGI DI SCRIPTING eseguono operazioni programmateall’interno del browser o del serverWeb nel momento in cui vengonorichieste le pagine. I più comuni sonoJavaScript (che funziona sia sul clientsia sul server) e CGI (CommonGateway Interface) che vieneprogrammata attraverso lo specialelinguaggio Perl (Practical extractionand reporting language) nato perl’elaborazione di testi oppuremediante Java, C o Visual Basic.Nei siti più moderni troviamo ancheASP (Active Server Pages) diMicrosoft programmabile in VBScript(il più usato), Javascript e Perlscript -PHP open source e molto diffuso nelmondo Linux - CFML (Coldfusion

Markup Language) di Macromedia.Gli ultimi quattro operano unicamentesul server.

WEB DESIGNERprogetta e sviluppa l’aspetto graficoed estetico di un sito, fornendo tuttigli strumenti visivi per la navigazionee la corretta visualizzazione eorganizzazione dei contenutiall’interno delle pagine. Passa ilproprio lavoro al Webmaster per lacreazione del sito vero e proprio.

WEB DEVELOPERrealizza tutta la componente“applicativa” dei siti che fanno pernosu un database. Progetta il databasee scrive i programmi che ne

permettono l’interrogazioneattraverso pagine interattive,anch’esse generate in automatico.Passa il proprio lavoro al Webmasterche lo completa se necessario e lo“mette in linea”.

WEBMASTERè il responsabile globale di un sito, lesue competenze abbracciano laprogettazione iniziale, la realizzazionee la gestione, con particolareattenzione all’aggiornamento deicontenuti. Deve sapere fare un po’ ditutto e mostra i suoi punti di forzaparticolari nella conoscenza deglistrumenti e dei linguaggi per produrrepagine capaci di essere vistevelocemente su qualsiasi browser.

GLOSSARIO

È stato il primo a rispondereGiuseppe Lachello, 55 anni,piemontese doc, quando ilmese scorso abbiamo chiestose tra i membri dellacommunity di PC Open ci fossequalcuno disposto a raccontarela propria esperienza sul Web.E nel caso di Giuseppe, ilprimato non è il solo: è lettoredi PC Open dal lontano n°3 eabbonato dal n°10. Bene,Giuseppe che attualmente è inpensione, era il responsabile dihardware e software per unasocietà del gruppo Fiat,dedicata alla gestionecontabilità. “I primi approccicon il Web risalgono al ‘98,quando la società per cuilavoravo mi chiese di creare unsito interno all’ufficio chepotesse funzionare da centro dismistamento di report aziendalicon la casa madre”. Le basi diprogrammazione (programmavain Visual Basic) servono aGiuseppe come struttura su cuiinserire le nuove competenze.“All’inizio non avevo ben chiarele nozioni, per cui ho iniziato astudiare libri sui linguaggi diprogrammazione (HTML,JavaScript) e a navigare in Rete

osservando i siti, cercando divisualizzare la sorgente per poitentare di ricostruirli. Nel giro diquattro mesi ho imparato lamaggior parte di ciò che miserviva per mettermi all’opera,quindi è partito il sito, che èstato molto apprezzato, tantoche subito dopo sono statocontattato dalla casa madre perfornire una consulenza nellacostruzione del sito aziendale”.In seguito Giuseppe ha affinatole sue competenzefrequentando un corso on linedi manuali.net, trovandolocompleto e molto utile. Prima diandare in pensione, Giuseppeha messo in Rete un suo sito,si chiama Mio Piemonte, comesiamo e come eravamo, eraccoglie molte informazioni,documenti e immagini sullaregione (it.geocities.com/mepiemont).“È iniziato per passione, comehobby, ma si sta rivelandoun’ottima vetrina dipresentazione” ci rivelaGiuseppe, tanto che già alcunepiccole aziende della zona lohanno contattato per fornireconsulenza per la costruzionedei loro siti.

Dalla nostracommunity, una storiadi successo

il nostro lettore Giuseppe Lachelloha creato il sito Mio Piemonte, che

si sta rivelando un’ottima vetrina di presentazione

2/88

1a lezione

Esistono almeno sei interlo-cutori con cui il Webmasterha relazioni continue e dei

quali, talvolta può trovarsi adassumere anche i compiti. Co-me abbiamo accennato, la pro-duzione di un sito Web facilita ilmescolamento dei ruoli sia perragioni di economia, vale a direnon esistono mai soldi a suffi-cienza per ingaggiare tutte lepersone che sarebbero neces-sarie, sia per motivi di urgenza:l’incaricato di una determinatafunzione potrebbe essere as-sente nel momento in cui sia ne-cessario il suo intervento e per-ciò chi è presente deve poternefare le veci, almeno in parte.

La prima figura in ordine ditempo con cui il Webmaster en-tra in contatto è il Web desi-gner. Solitamente un esperto diarti grafiche capace di tradurregli input del committente in unastruttura grafica di pagina e disito che abbia un bell’aspetto,sia comprensibile dal navigato-re, serva agli scopi del sito e siarealizzabile con gli strumentitecnologici a disposizione (so-prattutto osservando i limiti im-posti dall’HTML e dal modo incui i vari browser lo interpreta-no).

La seconda figura con cui ilWebmaster entra in contatto su-bito dopo è il cosiddetto codervale a dire colui che stila il co-dice HTML o di programma checompone le pagine, partendodalla bozza grafica preparatadal Web designer.

Nel caso in cui abbia compe-tenze centrate su HTML, il co-der prende il nome comune diWeb editor, nel caso invece siacompetente nei linguaggi discripting lato server (comePerl, ASP eccetera) prende ilnome comune di programma-tore (le diciture formali si tra-sformano, poi, a seconda dellecircostanze, ma la sostanza noncambia). Costui costruisce fisi-camente le pagine seguendo leindicazioni di qualcun altro, manon ha la responsabilità finaledi pubblicarle sul sito.

L’operatore grafico affiancail coder nella costruzione del si-to. Egli è in grado di gestire i va-

ri elementi grafici che compon-gono la pagina seguendo i det-tami del progetto grafico e i vin-coli della tecnologia

Solitamente, l’operatore gra-fico lavora con programmi di fo-toritocco per creare immagini ebottoni, e per ottimizzare im-magini fornite da altri.

Nelle situazioni di budget ri-dotto, il Web designer svolgeanche funzioni di operatore gra-fico, vale a dire implementa econtinua nel tempo il progettografico che lui stesso ha ideato,mentre il Webmaster assume sudi sé il ruolo di coder. È raro cheun Webmaster operi anche daWeb designer e viceversa. I duemestieri hanno matrici ben di-stinte. Il primo ha origini artisti-che o grafiche, mentre il secon-do prevalentemente tecniche.

La figura successiva con cui idue entrano in contatto quasiimmediatamente è il Web deve-loper, esperto nella progetta-

zione applicativa di un sito di-namico, vale a dire un sito chepresenti le proprie informazioniattingendole da un database. IlWeb developer acquisisce il la-voro di progettazione grafica edi codifica delle pagine HTMLgià predisposto da qualcun al-tro, e vi aggiunge gli elementiapplicativi necessari all’intera-zione col server.

La sua esperienza è centratain prevalenza sui linguaggi discripting e di interrogazione didatabase, ma di solito il suocorredo di conoscenze com-prende anche alcuni linguaggidi programmazione.

Nei progetti in economia, ilWeb developer finisce ancheper svolgere le funzioni di codere programmatore, realizzandoin prima persona l’intera paginae l’intero sito.

Nell’evoluzione delle propriecompetenze, il Webmaster ten-de a sua volta a diventare Web

developer, assumendo semprepiù dimestichezza con la pro-duzione di pagine dinamiche edegli elementi di programma-zione.

La quinta figura di contattodiretto per il Webmaster e pergli altri attori coinvolti (soprat-tutto il Web designer e il Webdeveloper) prende il nome diContent Manager e ha la re-sponsabilità di regolare i conte-nuti del sito al fine di generaretraffico, come nel caso di unportale o di un sito d’informa-zione, incoraggiare l’acquisto,come nel caso di un sito di com-mercio elettronico, trasferirenozioni, come nel caso di un si-to di formazione a distanza. Nelcaso di siti di grandi dimensioniviene assistito da Content edi-tor che si occupano dell’aggior-namento di particolari segmen-ti del sito.

Il Content Manager ha solita-mente un’estrazione giornalisti-

1 I professionisti che affiancano il Webmaster

WEB MASTERWEB EDITOR

ARCHITETTO INFORMATIVO

Struttura

Testo

CodiceComportamentoWEBDEVELOPER

PROGRAMMATORE

ESPERTO USABILITÅ

CodiceComportamentoWEB DEVELOPER

PROGRAMMATORE

ESPERTO USABILITÅ

Immagini

e grafica

Presentazione

WEB DESIGNER

OPERATORE GRAFICO

MARKETING

Regole di pubblicazione

CONTENT MANAGERCONTENT EDITOR

PUBLISHING SYSTEM

I componenti di un sito

Abbiamo preso a prestito edespanso un grafico presentenel libro “Web Design Arte eScienza” di Jeffrey Veen perspiegare i contributi che leprincipali figure professionalidescritte in questo corsoportano nella realizzazione diun sito.Il Webmaster estendespesso il proprio ruolo allealtre due aree periferiche.Ma di rado tocca l’areacentrale, a meno che siasguarnita

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

3/88

ca oppure editoriale, e solita-mente non dispone di compe-tenze tecniche, ma deve avereuna discreta sensibilità esteticae una conoscenza dei vincolitecnologici del mezzo così datrovare, assieme al Web desi-gner, il giusto modo per presen-tare le informazioni.

Ha contatti con il Webmastero il coder per qualsiasi aggior-namento o variazione struttura-le della pagina che diventi ne-cessaria in corso d’opera al finedi dare giusto risalto alle infor-mazioni nuove o più importanti.Dialoga occasionalmente anchecon il Web developer, soprat-tutto nella fase iniziale del pro-getto, per mettere a punto gliautomatismi necessari per l’a-gevole pubblicazione e aggior-namento dei contenuti, solita-mente realizzati tramite unaspecifica applicazione che pren-de il nome di Content Manage-ment System o, più comune-mente, sistema di publishing.

Nuove prospettiveper il Webmastercome Content Publisher

Qui vale la pena di aprire unapiccola parentesi. Nei siti di me-dio-grandi dimensioni, la sceltadel Content Management Systemviene per prima e influenza tut-te le altre attività in cascata, vi-sto che il sistema richiederàl’impiego di precisi linguaggi diprogrammazione e porrà vinco-li importanti nella struttura gra-fica della pagina e nella codificaHTML. La scelta del sistema dipublishing non viene quasi maieseguita dal Content Manager,ma spesso è stata demandata apersonale tecnico che operasulla base dei requisiti funzio-nali espressi dal Content Mana-ger e sui vincoli imposti dalbudget e dalla piattaforma su

cui opera il server. Purtroppo lascelta risulta spesso sbagliata esi traduce in costi e vincoli ina-spettati per tutte le parti in cau-sa. Talvolta può arrivare fino alpunto di bloccare lo sviluppodel sito.

Sono moltissime le realtà del-la New Economy che hanno fal-lito proprio perché non hannoadottato un sistema di publi-shing fin dal principio, ne hannoscelto uno sbagliato oppure selo sono fatto costruire su misu-ra partendo da specifiche trop-po generiche. Il motivo dell’er-rore è stato nella mancanza, daparte del ruolo tecnico, di capi-re quali fossero le reali funzionidel prodotto.

In conseguenza di ciò veniva-no valutati principalmente gliaspetti di costo, compatibilità,prestazioni, facilità di program-mazione e via dicendo, senza fa-re i conti poi con chi avrebbedovuto caricare le informazionie mantenere il sito, vale a dire ilWebmaster e il Content Mana-ger. Il risultato si è espressoquasi sempre in proceduremacchinose nel caricamentodelle informazioni, nell’imposi-zione di vincoli sul tipo d’infor-mazioni effettivamente pubbli-cabili e nella rigidità della strut-tura del sito (difficile aggiunge-re, togliere o accorpare sezionie canali). Da ciò, l’esigenza diapportare modifiche costosedell’ultimo minuto che diminui-vano la stabilità complessivadel sito in virtù dei continuicambiamenti incontrollati.

In alcuni casi si è cercato diaggirare il problema sviluppan-do sistemi di publishing che sibasavano sul flusso di lavora-zione di un giornale su carta.

Di solito, il risultato è statomigliore rispetto ai sistemi crea-ti dal nulla, ma le notevoli diffe-

renze nei metodi di lavorazionedell’editoria su carta e dell’edi-toria Web hanno compromessol’utilità anche di questi ultimi.Senza considerare, poi, che unsistema di publishing professio-nale, capace di gestire siti com-plessi per una grande industria,costa diverse centinaia di mi-gliaia di euro.

Per questi motivi, di recenteha cominciato a svilupparsi unafigura professionale ibrida cheunisce alcune competenze diun Content Manager e quelle diun Webmaster o Web developercosì da poter scegliere o ancormeglio progettare ex-novo unsistema di publishing che siacompatibile con i costi stimati eche sia abbastanza flessibile dasoddisfare le esigenze future delcommittente.

Questa figura non ha ancoraun nome ufficiale, ma noi l’ab-biamo identificata come WebPublisher perché ricalca inqualche modo le funzioni di unpublisher editoriale che scegliela carta, il tipo di stampa e il ti-po di processo da utilizzare perla produzione di un giornale, la-sciando alla redazione il compi-to di generare i contenuti. L’ulti-mo punto di contatto operativoè il sistemista, vale a dire il tec-nico esperto nella gestione delserver su cui il sito opera. Spes-so è dislocato presso il providerche ospita il sito e ha la respon-sabilità di garantirne il funzio-namento continuo, agendoprincipalmente sulla macchina,ma anche richiedendo variazio-ni al sito medesimo nel caso incui si presentassero incompati-bilità dovute al lavoro del Web-master o del Web developer.

Altre figure di contattoEsistono altre figure con cui il

Webmaster può avere rapporti

occasionali. La prima è il re-sponsabile di Web marketing,che solitamente è il promotorenonché il finanziatore del sito,perciò ne stabilisce gli obiettivie ne approva la realizzazione.Le sue preoccupazioni princi-pali sono la capacità di attrarrevisitatori e di trasferire corret-tamente le informazioni che lasua azienda gli ha chiesto di co-municare.

Solitamente chiede al Web-master di fornirgli statistiche at-tendibili sul traffico, di promuo-vere il sito sui principali motoridi ricerca e di allestire sistemiefficaci per pubblicare banner einformazioni promozionali. Siaggiungono poi tre figure chesono tipiche della fase proget-tuale e che possono confluirenell’attività del Webmaster. IlProject Manager coordina l’at-tività di tutte le figure coinvoltenel progetto e garantisce il ri-spetto delle tempistiche con-cordate. L’architetto informati-vo trova la giusta distribuzionedelle informazioni e delle relati-ve etichette. Il suo compito è so-stanzialmente di facilitare il re-perimento delle informazionicontenute in un sito, ottimiz-zando i percorsi per arrivarci erendendole accessibili in varimodi contemporaneamente. Unsito con una buona architetturaimpedisce al navigatore di per-dersi. L’esperto di usabilità in-fine misura o anticipa le reazio-ni dei navigatori al sito, ed eli-mina eventuali ostacoli o possi-bilità di equivoco. Spesso la suafunzione è cumulata con quelladi architetto, viste le ampie so-vrapposizioni possibili tra i duemestieri. Un Webmaster esper-to trova spesso l’occasione perevolvere le proprie competenzeper occuparsi anche di archi-tettura e di usabilità. �

1a lezione

4/88

1a lezione

Per svolgere il proprio com-pito, il Webmaster ricorrea strumenti che semplifi-

cano la scrittura e la correzio-ne delle pagine Web e degliscript associati, spesso conun’interfaccia grafica che con-sente di creare intere sezionidella pagina senza scriverenemmeno una riga di HTML.

Il vero Webmaster professio-nista, tuttavia, deve essere ingrado di scrivere completa-mente a mano un intero sito, senecessario, perché gli capiteràsovente di dover correggereanche gli errori e i contenutiinutili introdotti proprio daiprogrammi di generazione au-tomatica che dovrebbero aiu-tarlo. Gli strumenti di lavoro inquesto campo si dividono inquattro categorie.

Editor on line gratuiti Sono strumenti da usare nel-

la produzione di siti personali,molto semplici, all’interno diportali che offrono spazio gra-tuito limitato e che prevedonoun’interfaccia propria per la ge-nerazione facilitata delle pagi-ne partendo da moduli già im-postati. Non sono stati inseritiin questa rassegna perché difatto limitano moltissimo il for-mato e la struttura del sito e lovincolano al dominio del parti-

colare portale che li ospita, im-ponendo quasi sempre la vi-sualizzazione dei banner pub-blicitari di quest’ultimo.

Editor orientati al testo Leggeri e precisi, costitui-

scono un elemento irrinuncia-bile nella cassetta degli attrezzidi un bravo Webmaster. Vi si ri-corre per piccole correzioni alvolo oppure per la scritturad’intere pagine, a seconda deicasi. Semplificano la scritturadi codice HTML, CSS, DHTML,JavaScript e così via, control-lando in automatico la sintassidei comandi, evidenziando gra-ficamente (a colori) i comandi

e i tag (marcatori) HTML ri-spetto al testo che costituisceil contenuto informativo dellapagina (rappresentato solita-mente in nero). Di solito preve-dono finestre guidate per l’in-serimento dei più comuni tagHTML (marcatori di formatta-zione), di script già pronti e dimoduli (form), frame (finestremultiple nella pagina) e tabelle.Tra le funzioni tipiche abbiamoanche l’anteprima all’internodi uno o più browser, per veri-ficare l’aspetto finale della pa-gina, il controllo dei link internied esterni, la riduzione auto-matica delle ridondanze e il tra-sferimento verso server remo-

ti. Sono spesso gratuiti, ma neesistono anche versioni com-merciali di costo relativamenteridotto. Sono utilissimi per far-si le ossa e per correggere ra-pidamente pagine già esistenti.Servono anche per ispezionarele pagine prodotte con pac-chetti più complessi al fine dicontrollarne la correttezza.

Il fatto di dover scrivere tut-to a mano, o quasi, ne riducel’utilità. La produttività scendee aumenta le possibilità di er-rore, di conseguenza il Webma-ster finisce per affiancarli o so-stituirli con editor grafici cheautomatizzano gran parte dellagenerazione delle pagine e diinteri siti e che permettono di“impaginare” i contenuti lavo-rando col mouse e osservandoimmediatamente i risultati, an-ziché digitare centinaia di righesulla tastiera e fare continueanteprime all’interno del brow-ser. Alcuni Webmaster veteranicomunque si limitano a usare isemplici editor di testo, facen-done un punto di orgoglio, an-che perché “scottati” dalle pri-

2 Gli strumenti di lavoro

Gli editor presentati in questo numero

Programma Tipo Distribuzione Reperibiità Lingua1st Page 2000 editor HTML testuale freeware nel CD ingleseArachnophilia 5.0 editor HTML testuale freeware nel CD ingleseHTML-kit editor HTML testuale freeware sul Web inglese consigliatoMacromedia Dreamweaver MX ambiente grafico integrato demo nel CD italiano consigliatoStone's Web Writer 3.5.2 editor HTML testuale freeware nel CD ingleseTop Dawg 2.6 editor HTML testuale freeware nel CD ingleseWebPag-Wiz 1 editor visuale freeware nel CD ingleseXoology Coda 2.4 editor visuale freeware nel CD inglese

Capacità di spesa

Espe

rienz

a Produttività

Editor visualisemplificati

Ambientigrafici

integrati

EditorHTML

testuali

Editor visualicommerciali

Come scegliere lo strumento di lavoro adeguato

Gli editor HTML testuali sono una necessità imprescindibile sia per chi comincia, così da poter disporre diuna palestra in cui imparare, sia per chi è già esperto, per non perdere controllo sulle pagine. Offronotuttavia 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 guadagnarevelocità, soprattutto nella stesura iniziale del sito.Gli ambienti grafici integrati (Macromedia Dreamweaver, Adobe GoLive) offrono alta produttività e controllosull’intero sito a chi ha già esperienza e una discreta capacità di spesa

�

Editor testuali,visuali e ambientigrafici integrati:cosa sono, comefunzionano e comescegliere lasoluzione piùadatta a voi

5/88

1a lezione

me edizioni degli editor graficiche avevano la pessima abitu-dine di inserire codice ridon-dante o addirittura errato, co-stringendo a lunghi lavori dipulizia a mano, che finivanoper richiedere più tempo diquanto ce ne sarebbe volutoper scrivere la pagina da zero,riga per riga.

Tra i completamente gratui-ti, abbiamo selezionato: Arac-nophilia, Firstpage 2000,HTML Kit, Stone’s Web Writer,Top Dawg, Xoology Coda; tra iprodotti a pagamento o sha-reware abbiamo invece sele-zionato CoffeCup HTML Edi-tor, Home Site, Hot Metal Pro,TopStyle Pro 3.0.

Editor visuali semplificati Offrono funzioni di “impagi-

nazione” interattiva: il pro-gramma genera automatica-mente il codice necessario perprodurre la sezione di paginadopo che l’abbiamo disegnatasullo schermo pemettendoci,poi, di modificarla a mano inuna finestra separata che mo-stra le righe di codice HTML,JavaScript, ASP e così via.

È possibile inserire il testo ele immagini di contenuto diret-tamente nella pagina visualiz-zata in anteprima, senza corre-re il rischio di alterare i marca-tori in cui sono contenute e os-servando immediatamente il ri-sultato. Questi programmispesso integrano anche funzio-ni per la ricerca automatica de-

gli errori e di trasferimento a unserver remoto. Sono indispen-sabili come base minima di la-voro per garantire una buonaproduttività e per semplificarela gestione degli script e dellepagine complesse, oltre che diinteri siti. Ne esistono diverseedizioni gratuite, ma non ce lasentiamo di consigliarle per-ché, a differenza degli editor disolo testo, questi programmipossono effettivamente rovina-re una pagina già ben costruitain partenza e costringervi a lun-ghe operazioni di correzionemanuale.

L’unico prodotto gratuito dicaratura professionale che sipuò segnalare in questa cate-goria è Microsoft Web Matrix,che s’indirizza in particolare achi prevede di lavorare su sitidinamici dove sia necessarioaffiancare all’HTML anche fun-zioni di programmazione e lin-guaggi di scripting.

In alternativa, convieneorientarsi verso una soluzionecommerciale garantita da unasoftware house che già operi inquesto mondo da tempo e cheoffra anche continui aggiorna-menti per tenersi al passo congli standard. I due campioni diquesta categoria sono NamoWeb Editor e Microsoft Front-Page 2002.

Quest’ultimo, rispetto alleversioni precedenti, ha rag-giunto una vera caratura pro-fessionale, pur mantenendo laproverbiale facilità d’uso.

Segnaliamo in chiusura diquesta categoria Easy Web Edi-tor, un programma in italianoche consente di creare pagineWeb semplicemente disegnan-dole al video, senza scriverenemmeno una riga di HTML(www.visualvision.it). Molto in-dicato per chi vuole produrreun sito personale senza doverstudiare, non è consigliato in-vece ai Webmaster, visto che ilsito viene costruito in formatoproprietario e, solo alla fine,esportato in formato HTML,perciò non è possibile esercita-re un controllo dettagliato suquel che succede.

Ambienti visuali integratiAl terzo livello della scala

troviamo gli unici due prodottiche hanno conquistato, negliultimi anni di grande crescitadel Web, la statura di riferi-mento per i Web Master pro-fessionisti: MacromediaDreamweaver e Adobe GoLi-ve. Oltre a riunire tutte le fun-zioni di impaginazione graficadelle pagine di gestione inte-grali dei siti, con tutti gli auto-matismi per il controllo e la va-lidazione degli stessi, questidue prodotti hanno anche svi-luppato collegamenti diretticon altre applicazioni dellostesso produttore al fine di co-struire veri e propri ambienti disviluppo integrati dove Web-master, Web developer e Webdesigner possano condivideretutti la stessa famiglia di pro-dotti beneficiando di un facilescambio dei vari sottoprodottiche vanno a comporre il sito.

Ancora più interessante peril Webmaster, questi prodottigli consentono d’intervenirecon rapidità ed efficacia suqualsiasi componente del sitoWeb, utilizzando un solo stru-mento che conoscono bene,anziché dover ricorrere a ognigenere di utility e di mini-pro-

grammi complementari.Macromedia MX, la versio-

ne più recente del prodotto,costituisce oggi la fusione diben quattro programmi diversie permette di spaziare dallaproduzione di siti statici allaprogrammazione avanzata, in-tegrandosi con Fireworks MXe Flash MX per le componenticreative, e con Cold Fusion MXper la componente program-matica sul server.

Adobe GoLive 6.0 dialoga in-vece con PhotoShop 7.0 e Ima-geReady (per l’ottimizzazionedelle immagini per il Web), conInDesign per l’integrazione traeditoria sul Web ed editoriacartacea, con Premiere per lagestione del video.

Benché saranno ben pochi iWebmaster che si troveranno autilizzare tutti questi strumentie saranno ancora meno quelliche li utilizzeranno per partire,è importante capire che tantoDreamweaver quanto GoLivecostituiscono punti di arrivoirrinunciabili per lo sviluppo ela manutenzione di siti comeprofessione. Dreamweaver è ilpiù diffuso e il più “tecnico”.S’indirizza al Webmaster e alWeb designer che abbiano an-che vocazioni di programmato-re. GoLive è invece un prodottodi natura più “editoriale”, de-stinato a chi debba gestire glistessi contenuti sul Web e sullacarta e abbia uno spiccatobackground creativo.

Entrambi costano cari, ma siripagano ampiamente nell’usointensivo. Mettete in conto unsensibile sforzo di apprendi-mento per entrambi, visto chesono ormai diventati gigante-schi e ricchissimi di funzioni.

A loro beneficio, indichiamoche funzionano su piattaformediverse (Windows, Mac) e inte-grano spesso anche ottimistrumenti tutorial per impararecammin facendo. �

Gli strumenti di lavoro presentati nei prossimi numeri

Programma TipoAdobe GoLive 6.0 ambiente grafico integratoCoffeeCup HTML Editor 9.6 editor HTML testualeHomePage + editor HTML testualeHot Metal Pro 6.0 editor HTML testualeMicrosoft FrontPage 2002 editor visualeNamo Web Editor 5 editor visualeTopStyle Pro 3 editor HTML testuale

�

Avete trovato interessante il nostrocorso e volete prepararvi a metterealla prova le competenze acquisite?Per farlo avrete bisogno di uno spaziovostro sul Web, dove poterviesercitare nello sviluppo di siticampione su server reali. Ecco quindi la nostra iniziativa, chenasce in collaborazione conRegister.it, il più importante registrarin Italia: nei prossimi mesi avrete adisposizione gratuitamente per un

mese l’uso di uno spazio di hostingdedicato, oltre ad una serie di altriservizi supplementari. In più, dalmomento che per poter usare lospazio di hosting è necessariodisporre di un dominio, i lettori di PCOpen in esclusiva potrannoacquistare da subito il propriodominio presso Register ad unprezzo scontatissimo (40% in meno,lo sconto più alto oggi disponibilesul mercato). Il metodo è

semplicissimo: dovrete collegarvi alsito http://we.register.it/pcopenoppure al sito www.register.it/pcopen,inserire il codice segreto x6Wa3P nelbox all’interno della pagina e verreteinviati alla home page del sito diRegister, da dove le registrazioniverranno scontate in automatico del40%. Le registrazioni sarannocomprensive di tutto quanto è indicatoall’indirizzo http://we.register.it/domains/allincluded.html.

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

6/88

1a lezione

3 Per chi vuole approfondire: i libri consigliati

La “bibbia del Web designer” proponel’esperienza e i consigli di uno tra iprogettisti che hanno fatto la storia delWeb: Jeffrey Veen. Il libro vi parla diinterfaccia, struttura e comportamentodelle pagine. Altamento informativo, unclassico.Apogeo, 235 pagine, 35 euro.

Indirizzato ai designer dellatransizione dalla carta a Web. Spiegaconcetti base utili a tutti, ma inparticolar modo a chi è già esperto nelgovernare un strumento passivo comela pagina stampata e deve entrare nelmondo dinamico delle pagine HTML.Hops, 442 pagine, 35,12 euro.

Tutorial per Webmaster alle primearmi oppure con modesta esperiernza.Offre un sunto di molti aspettioperativi utili nella produzione di unsito, spiegati con illustrazioni edesempi. Facile da leggere, anche inpillole. Manca il perché delle cose.Jackson Libri, 616 pagine, 44 euro.

Usabilità nel redesign. Ecco laseconda opera di Jackob Nielsen, al disotto delle aspettative, ma utile per chista affrontando il redesign di un sitocomplesso e vuole trarre spuntodall’opera altrui. Il libro è più un elencodi cose da non fare che da fare.Apogeo, 310 pagine, 45 euro.

Riferimento indiscusso sulla sintassi ela tecnica della versione più recentedel linguaggio HTML. Un libro che ilWebmaster professionista devepossedere e conoscere, anche se nontutte le informazioni sono essenziali ealcuni strumenti sono datati.Apogeo, 837 pagine, 45,45 euro.

Introduzione elementare allaproduzione di pagine HTML. Fornisce irudimenti del linguaggio per chi vuoleprodurre un sito personale oppureprototipale. Un po’ datato invece perun impiego professionale: mancano iriferimenti ai fogli di stile. JacksonLibri, 334 pagine, 25, 31 euro.

Guida complementare al “Web DesignArte e Scienza” di Veen. Costituisce unbuon manuale pratico per laproduzione dei più comuni elementiche costituiscono un sito, con anchepo’ di teoria. Accessibile a tutti,consigliato ai neofiti. Apogeo, 290 pagine, 20,14 euro.

Design e usabilità all’italiana. Piùconcreto dei manuali di usabilità e piùampio nei temi rispetto a un semplicetesto di design. Offre l’eperienzacompleta di una progettistaprofessionale italiana che mette inprospettiva le cose davvero importanti.Hops, 236 pagine, 18,60 euro.

Standard e tecniche concentrati inpoche pagine con cenni sintetici che viportano dalla navigazione, all’usabilità,all’accessibilità, passando per nozionisulla percezione dei colori e sull’usodel linguaggio XML. Utile riepilogo perchi sa già come fare. Tecniche Nuove,212 pagine, 18,80 euro.

Guida alla riprogettazione di un sitocon indicazioni pratiche e numeroseillustrazioni. Perfetto per il consulenteche si propone di migliorare il lavoroaltrui o perfezionare il proprioapproccio progettuale, dalla definizionedella struttura al lancio.Apogeo, 245 pagine, 36 euro.

Master di usabilità. Non si può parlaredi usabilità dei siti Web senza averletto questo classico, che alcuniamano e molti odiano per il totale“integralismo” dimostrato dall’autore,universalmente riconosciuto comel’iniziatore di questa disciplina.Apogeo, 418 pagine, 40,28 euro.

Quaderno di progetto in grandeformato, già pronto per accogliere lenote che costruirete durante il vostrolavoro con un ipotetico cliente e che viporterà, attraverso le fasi principali, aun progetto completo. Utile traccia peri consulenti del Web.Hops, 70 pagine, 25,31 euro.

INDISPENSABILE

INDISPENSABILEINDISPENSABILE

INDISPENSABILE

7/88

1a lezione

Le risorseon line

La formazione di unWebmaster non finisce mai.Le tecnologie continuano aevolvere e ci sonoinnumerevoli problemi darisolvere nel lavoro di tutti igiorni. Ecco alcune risorseche consigliamo a tutti,indipendentemente dal lorolivello di competenza. Viserviranno per approfondiredurante il corso e oltre:

http://hotwired.lycos.com/webmonkey/ (uno dei duesiti americani più famosi peri Webmaster e i Webdeveloper. Ricco di tutorial,consigli, moduli già pronti).http://builder.com.com/(l’altro sito americano diriferimento per i Webmastere i Web developer, orientatoa i più esperti).http://www.html.it/ (il sitoitaliano “storico” per chisviluppa siti e vuoleimparare a fare le cose dasolo. Adesso fornisce anchecorsi a pagamento). http://www.antiloco.com/(in italiano, una sorta didirectory di risorsesoprattutto per i Webdeveloper, ma utile anche aiWebmaster).http://www.fare-web.it/(un riferimento in italianoricco di spunti tecnici, maanche di attualità)http://www.fucinaweb.com/home/ (in italiano, realizzatoda un giovane sviluppatoreche fornisce non soloconsigli di sviluppo, maanche indicazioni su temi piùgenerali come l’interfaccia el’usabilità).http://www.manuali.net/ (sito dedicato agli autodidattie alla formazione a distanzasu diversi temi, tra cui anchelo sviluppo Web).http://www.scriptando.it/(sito ricco di consigli e ditutorial realizzato perpassione da un giovanissimoWebmaster autodidatta).http://www.webmasterpoint.org/home.asp (un sitoitaliano di consigli e tutorialper le cose più semplici).

Dalla progettazione al lancio: come nasce un sito

Prima di mettere mano allepagine e alla scrittura dimarcatori HTML, è neces-

sario definire la struttura del si-to e la funzione dei diversi ele-menti che saranno nella pagina.

Questa fase precede anche lastesura delle bozze grafiche chetraducono in colore e immaginiciò che si è già ideato schemati-camente sulla carta.

La progettazioneEsistono tanti modi per pro-

gettare un sito quanti sono iprogettisti, ma l’esperienza de-gli ultimi anni dimostra che lasequenza ricorrente e forse ot-timale segue queste fasi: rac-colta delle informazioni sugliscopi del sito ed eventuale ana-lisi della concorrenza, costru-zione di una mappa del concet-tuale sito (disegno schematico),assemblaggio e sistematizzazio-ne dei contenuti, definizione diun sistema di navigazione, defi-nizione della struttura di paginee interfaccia, assemblaggio deltutto in una sequenza che “rac-conti” il sito (storyboard), pro-totipo di sito navigabile che mo-stri dal vivo lo storyboard, pro-getto grafico e multimediale,progetto dinamico che defini-sca il tipo d’interazione che il si-to avrà con l’utente e che stabi-lisca quali elementi di program-mazione sarà necessario ag-giungere, incluso l’eventualecollegamento a un databaseche contenga i dati da visualiz-zare nelle pagine dinamiche.

La realizzazioneTerminate queste fasi proget-

tuali, si passa alla produzionevera e propria, realizzando i

template, vale a dire la paginacampione, senza contenuti, dacui è possibile produrre moltealtre pagine ciascuna con con-tenuti propri. Il template è unasorta di “modello” o “stampo”da cui ricavare molte paginesingole che avranno uniformitàvisiva tra loro.

Una parte determinante nellafase di produzione prima dellancio è la formattazione deicontenuti, vale a dire la raccoltadi tutte le informazioni che do-vranno essere presenti sul sitoal momento dell’avvio e il loromontaggio all’interno di pagineHTML statiche oppure il loro in-serimento e catalogazione al-l’interno di un server. Spesso sisottovaluta l’impegno richiestoda questa attività, di per sé sem-plice, ma gravosissima in ragio-ne della grande quantità di ele-menti che vanno elaborati e dal-l’impossibilità di averli tutti inun formato omogeneo fin dallapartenza. I contenuti arriveran-no infatti dalle fonti e nelle for-me più disparate: molto di que-sto lavoro, alla fine peserà sulWebmaster, sul Web editor e sulWeb designer oppure sull’ope-ratore grafico.

Il testLa fase successiva è natural-

mente quella di test. È raro checi sia abbastanza tempo percondurla come si deve, ma è co-munque necessaria per metterealla prova il sistema di naviga-zione e il sito in generale. Quan-do si riesce a coinvolgere nel te-st utenti estranei alle fasi di pro-gettazione, si riesce a mettere inevidenza i classici errori che fi-nirebbero per mandare in tilt il

sistema se commessi da un na-vigatore reale.

Il lancioConsiste di solito in un’atti-

vità frenetica per correggere al-l’ultimo minuto i difetti riscon-trati durante la fase di test e percaricare i contenuti finali primadella partenza ufficiale, di solitoaccompagnata da una qualcheattività di pubblicità.

Il mantenimentoSegue, infine, la fase di man-

tenimento dove si correggonogli errori della fase di lancio e siattivano le procedure per con-sentire ai gestori del sito di ag-giornarlo gradualmente e permantenerlo stabile al cresceredel numero dei navigatori. Que-sta è la fase più delicata e pesafortemente sulle spalle del Web-master a cui viene richiestagrande esperienza nel ricono-scere e prevenire eventuali pro-blemi. Qualsiasi intervento de-ve essere efficace e rapido, poi-ché è raro poter fermare il sitoper lunghi periodi una volta chelo si è avviato. È necessaria unaprofonda conoscenza della piat-taforma su cui il sito è basatopoiché il comportamento deiserver cambia drasticamente alvariare del carico di lavoro. Ele-menti chiave in tal senso sono iltipo di server impiegato e il da-tabase scelto per l’eventuale at-tività dinamica.

Fa parte dell’at-tività di manteni-mento anche l’ado-zione di misure disicurezza. �

(versione integraledell’articolo sul CD)

Fasi di progettazione Risultato finaleRaccolta delle informazioni sugli scopi del sito Concept del sito (sintesi delle varie idee in una singola intenzione)Analisi dell’eventuale concorrenza Misura delle funzioni/servizi minimi che il sito deve offrire Costruzione della mappa Struttura concettuale del sitoAssemblaggio e sistematizzazione contenuti Catalogazione e priorità delle informazioniDefinire un sistema di navigazione Percorsi chiari per arrivare all'informazione, alberazione sitoStrutturazione della pagina e dell'interfaccia Posizione stabile per gli elementi di navigazione in rapporto al contenutoAssemblaggio sistematico delle pagine del sito Storyboard (descrizione, pagina per pagina, del contenuto statico e dinamico)Prototipo solo testo Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo,

ma consigliato)Progetto grafico e multimediale Intercaccia grafica che perfeziona la presentazione e navigazione del sitoProgetto dinamico Definizione elementi di programma, collegamento eventuale

a database, scelta di Publishing SystemProduzione Template HTML, elementi di programma lato server e client,

formattazione contenutiTest Sito esaminato da utenti "veri"Lancio Sito attivo e pubblicizzato grazie alle attività di marketingMantenimento Sito che cresce nei contenuti e nel traffico

proseguesul CDn. 65

8/88

1a lezione

4 Macromedia Dreamweaver MX,la nave scuola del Web design

Considerato nettamente ilpiù diffuso tra gli stru-menti professionali per lo

sviluppo di siti, Dreamweaverha da sempre offerto un effi-ciente ambiente di editing vi-suale delle pagine capace digenerare automaticamente co-dice senza alterare quello giàprodotto a mano dallo svilup-patore. Non si tratta di unaprerogativa da poco ed è pro-babilmente la chiave del suosuccesso originale.

Oggi il prodotto si presentamolto arricchito, di fatto riuni-sce al proprio interno quattroapplicazioni che prima eranoindipendenti e costituisce laprima completa integrazionenei prodotti Macromedia delletecnologie acquisite da Allaire,società americana creatrice dialtri due prodotti celebri nelmondo dei Webmaster: HomeSite (editor non visuale di ele-vata caratura) e ColdFusionStudio (ambiente di program-mazione per creare siti con pa-gine dinamiche).

L’obiettivo fondamentale diDreamweaver MX è di fornireun ambiente capace di soddi-sfare contemporaneamente leesigenze professionali di tre fi-gure: Web designer, per lacreazione grafica del sito,Webmaster per la costruzionedelle pagine vere e proprie eWeb developer per program-mare la logica applicativa chepermetta all’utente d’interro-gare un database attraverso lepagine del sito.

Si tratta perciò del terrenoperfetto per chi già si sentepreparato in uno di questi trecampi e vorrebbe ampliare leproprie competenze, diven-tando, se possibile, un espertoveramente completo.

Per la precisione, nel nuovoDreamweaver MX convergonoil precedente Dreamweaver 4,con tutte le relative funzioni diediting visuale, di controllocentralizzato del sito, di am-ministrazione delle varie ri-sorse e d’integrazione con lealtre applicazioni grafiche diMacromedia (Flash e Fi-reworks); Home Site con le re-lative funzioni di editing ma-nuale del codice HTML,XHTML o di qualsiasi altro lin-guaggio di scripting; UltraDEVper la programmazione con ilinguaggi di scripting più co-muni (ASP, ASP.NET, JSP, PHP)e ColdFusion studio per pro-gettare applicazioni che usinoil server ColdFusion come in-terfaccia semplificata nellaproduzione di pagine dinami-che create mediante l’interro-gazione di un database.

Quest’ultimo in realtà non èintegrato propriamente inDreamweaver MX, bensì all’in-terno di HomeSite+, evoluzio-ne moderna di HomeSite 5, for-nito nello stesso CD diDreamweaver MX e utilizzabi-le come strumento di lavororapido per chi è abituato aoperare con il codice di Cold-Fusion e non ha particolare in-teresse alla struttura grafica

delle pagine. In sostanza, tra-mite Dreamweaver MX e Ho-meSite+ aprite le porte a qual-siasi tipo di sviluppo presentee futuro, con la possibilità diallargare le vostre conoscenzesfruttando un ambiente coninterfaccia uniforme e con tu-torial di buon livello, integrati.

Come si presentaIl destinatario principale di

un prodotto come Dreamwea-ver MX rimane il creatore di si-ti, Webmaster o Web develo-per, che ha bisogno di unostrumento veloce con accessoimmediato al codice e al tem-po capace di semplificare leoperazioni mediante automa-tismi che propaghino qualsiasivariante all’intero sito. Il pro-gramma si basa su tre elemen-ti d’interfaccia: la finestra di la-voro vera e propria, divisa indue viste, i menu e i pannellidegli strumenti, e la finestra dicontrollo dell’intero sito. Par-tiamo dalle prime: le due vistedi lavoro principali sono: Co-dice e Struttura.

Le si può visualizzare alter-natamene oppure contempo-raneamente così da vedere al-l’istante come le variazionidell’una si propagano nell’al-tra.

La vista Codice elenca tutti imarcatori e ne consente l’edi-ting diretto come in qualsiasialtro editor non visuale, la se-conda invece mostra il risulta-to che tali marcatori produr-ranno sulla pagina finita, indi-

cando anche la struttura deivari elementi e le reciprocherelazioni.

Ne permette la manipola-zione diretta, tramite mouse ecomandi da tastiera. È possi-bile “disegnare” o costruire vi-sivamente elementi nella vistaStruttura e osservare al tempostesso il codice generato auto-maticamente nella vista Codi-ce, o viceversa. Alternandositra le due, si acquista una co-noscenza molto più profondadel linguaggio HTML e dellesue particolarità, e si arrivaanche a produrre sempre piùvelocemente risultati di qua-lità.

Molte delle risorse offertedal programma sono propriomirate a garantire la qualitàdel codice finale e notiamouna potenzialità didattica no-tevole: qualsiasi elementoHTML può essere inserito dapulsante o da menù, le rispet-tive caratteristiche sono quin-di ispezionabili nella vista Co-dice, che mostra il tag con tut-ti i rispettivi attributi, oltreche all’interno di una finestradi “proprietà” che è costante-mente visibile e mediante laquale s’interviene sulle pro-prietà senza toccare il codiceoriginale. Inoltre le funzioni diconvalida segnalano la pre-senza di eventuali errori nellapagina o nel sito e ci portanodirettamente al punto interes-sato, così da correggerlo e im-parare dai nostri errori. Il pro-gramma integra anche una nu-

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

1 2 3

la demosul CDn. 65

9/88

trita serie di esercitazioni initaliano che coprono HTML,fogli di stile, pagine dinami-che e altro ancora, con esempida eseguire di prima mano.

Tanti approcci diversi per imparare il codice alla perfezione

Rispetto alle versioni prece-denti, Dreamweaver MX con-sente di spostare e agganciare(dock) i diversi pannelli di co-mando all’interno della finestraa video oppure su un secondovideo, nel caso sia disponibilesul nostro computer. In tal mo-do, la pletora di finestre di con-trollo che accompagnano ilnuovo programma può essereconfigurata a piacere, attivan-do e disattivando selettiva-mente quel che occorre.

Nel caso si lavori nella vistaCodice, la finestra che contieneil codice vero e proprio preve-de tre modalità distinte d’inse-rimento manuale dei tag. La pri-ma di tali modalità è anche lapiù semplice e consiste nel se-lezionare dalla barra di coman-do superiore l’icona corrispon-dente al marcatore che voglia-mo inserire.

Ce ne sono a decine, suddi-vise per argomento. Se non ciricordiamo quale sia il tag ido-neo, la seconda modalità con-siste nel cliccare su un’icona diselezione generale che apre unelenco di selezione dei tag, pre-si dal database integrato nelprogramma. Tale databasecontiene la sintassi correttaper tutti i marcatori standar-dizzati dei principali linguaggi:HTML, JavaScript, CSS (Casca-ding Style Sheets – fogli di stilein cascata), ASP (Active ServerPages) e ASP.NET, PHP, JSP (Ja-va Server Page), WML (Wire-less Markup Language, per i te-lefonini) e ColdFusion.

La terza modalità consistenel digitare direttamente ilmarcatore nella pagina lascian-do che Dreamweaver completiper noi la digitazione non ap-pena ha indovinato di che tagsi tratta. Ciò riduce il lavoro dibattitura e gli errori dovuti asviste.

Per il completamento auto-matico, il programma attingesempre dal proprio databaseinterno che può essere espan-so a piacere con l’inserimentodi tag personalizzati.

Una volta digitato il marca-tore, le informazioni corrispon-denti compariranno all’internodi due finestre d’ispezione.

Una, la finestra Proprietàsempre aperta sulla parte bas-sa dello schermo, indica i pa-rametri del marcatore e ci per-mette di modificarli o inserirnedi nuovi usando le sue caselle,senza dover scrivere nemme-no una riga. Sempre dalla fine-stra delle Proprietà possiamoanche definire link ad altre pa-gine interne al sito oppure a si-ti esterni, confidando nel fattoche la sintassi sia sempre cor-retta.

Qualsiasi variazione è co-munque visibile immediata-mente nella finestra Codice co-sì da capire meglio quel chestiamo facendo.

Una seconda finestra d’ispe-zione, più complessa, denomi-nata appunto “Finestra di ispe-zione tag” elenca tutti i possi-bili attributi di quel particolaremarcatore, permettendoci dimodificarli usando menù a ten-dina e altri supporti grafici.

Perciò, combinando icone,menù e le due finestre d’ispe-zione, possiamo generareun’intera pagina senza nem-meno scrivere una parola di-rettamente, fino a quando cisentiremo abbastanza espertiper inserire i comandi in primapersona, fruendo però del con-trollo e della funzione di com-pletamento immediato fornitada Dreamweaver.

Dulcis in fundo, il program-ma incorpora una serie di mo-duli già pronti per gli usi prin-cipali (snippet) da poter inte-grare nella nostra pagina e dacui imparare, oltre che ben ot-to libri interi, forniti da editoridi tutto rispetto come O’Reillye Wrox, che descrivono minu-ziosamente i tag dei principalilinguaggi: HTML, CSS, ASP, JSP,JavaScript, ColdFusion.

Gli strumenti visuali per la produttività

Il secondo metodo di lavoroofferto dal programma è im-perniato sulla vista Struttura.Qui la pagina viene disegnatacome apparirà all’interno delbrowser però, a differenza diuna semplice anteprima, tuttigli elementi sono direttamentemodificabili e si può digitaretesto, inserire immagini, liste,tabelle, moduli usando le stes-se icone e gli stessi menù giàusati nella vista Codice, con ladifferenza che qui gli elementisi posizionano direttamentenel punto della pagina in cuivogliamo e il programma cimostra visivamente come inte-

ragiscono con gli altri. Insom-ma, una sorta di videoimpagi-nazione Web

È cresciuta anche l’integra-zione con gli altri strumentidella famiglia Macromedia, siain termini di similitudine d’in-terfaccia sia in termini di rapi-dità nel modificare elementigrafici e Flash mediante la tec-nica di “andata e ritorno”.Qualsiasi oggetto modificabilecon Fireworks MX o Flash MXpuò essere aperto direttamen-te dall’interno di Dreamwea-ver lasciando che sia quest’ul-timo a passarlo temporanea-mente in consegna alla nuovaapplicazione per poi ripren-derselo a opera terminata.

Controllo totale del sitoFin qui abbiamo incontrato

funzioni che sono comuni an-che ad altri editor HTML, an-che se non altrettanto svilup-pate.

La gestione del sito è inveceuna prerogativa classica deiprogrammi di fascia alta eDreamweaver MX realizza, tra-mite l’abbinata di due finestrededicate, un ambiente comple-to dal quale non solo esplorarela struttura del sito, i percorsidi navigazione e le risorse im-piegate, ma anche modificareparametri globali (propagan-do le variazioni su tutte le pa-gine) e manipolare singoli og-getti come immagini, sfondi,oggetti multimediali, collega-menti, librerie di codice, ecce-tera. Tramite questo comples-so pannello di controllo potetetenere sempre sott’occhio l’in-tero sito e quindi eseguire au-tomaticamente gli aggiorna-menti necessari sul server cosìda mandare in produzione levarianti collaudate prima lo-calmente.

È possibile anche utilizzareil pannello Sito per coordinareil lavoro di più persone, bloc-cando pagine che voi state mo-dificando affinché altri non lepossano modificare nel frat-tempo. Per funzionare al me-glio, la funzione di coordina-mento di gruppo richiede l’ac-quisto di uno strumento adhoc di Macromedia da installa-re sul server (Site-spring), ma è possi-bile realizzare si-stemi di controlloelementari ancheutilizzando il pac-chetto di base. �

(versione integraledell’articolo sul CD)

IdentikitDreamweaver MX è il più diffuso tra iWeb editor professionali. Costituisce l’evoluzione del precedenteDreamweaver 4 e raccoglie al propriointerno anche le funzioni di UltraDev,HomeSite e ColdFusion Studio. Nasceper rendere efficiente il lavorocongiunto di diverse figureprofessionali: il Webmaster, il Webdesigner e il Web developer, offrendo aciascuna una serie di strumenticompleti. È un prodotto complesso cherichiede un certo impegno per poterloconoscere e sfruttare a fondo, dicontro offre una quantità notevole distrumenti per rendere più rapida lagestione di un intero sito e più precisala produzione di pagine statiche edinamiche (con elementi di programmaal loro interno). Costituisce ancheun’eccellente base formativa, connumerose informazioni tutoriali,strumenti di verifica e costruzioneautomatica del codice. Unica nel suogenere la possibilità di avere due vistecontemporanee della stessa pagina:una con il codice e una con la strutturagrafica della stessa. È possibile agiresu una qualsiasi delle due,osservando immediatamente icambiamenti riportati nell’altra.

� Punti a favore:- Incorpora le funzioni di quattroprogrammi prima separati

- Ottima palestra formativa- Offre una vista contemporanea sulcodice generato e sulla disposizionedegli elementi sulla pagina

- Consente di unire efficacemente illavoro di creatività e di produzionetecnica

- È disponibile su diversi sistemioperativi, compreso Macintosh

- Supporta la gran parte dei linguaggidi programmazione

- Offre ricchi strumenti per la gestionedi un intero sito

- È compatibile con gli standard più recenti- Si espande gratuitamente attraversomoduli opzionali

� Punti a sfavore:- Complesso da imparare - Richiede un computer abbastanzapotente

- Manca un pieno supporto per illinguaggio Perl

- Il codice generato con gli strumentigrafici richiede occasionalmenteverifica manuale

Scheda tecnicaSito produttore: www.macromedia.comCosto licenza: 589,50 euro, 146,20per l’upgrade da una versioneprecedente. Macromedia Studio MX, che includeanche Flash MX, Fireworks MX eFreeHand 10 costa 1150,80 euro,574,80 per la versione upgrade.Requisiti: Windows 98SE, ME, NT4,2000, XP - Power Macintosh 9.2oppure OS X 10.1.

il corsoproseguesul CD 65

1a lezione

10/88

2a lezione

La prima forma di sito chequalsiasi Webmaster si tro-va a realizzare è composta

da pagine HTML di contenutopermanente, organizzate inuna serie di cartelle e legate dauna struttura di link che defini-sce la cosiddetta alberatura delsito e ne consente una naviga-zione ordinata.

Ogni volta che si vuole ag-giungere qualcosa, bisognacreare una pagina ad hoc; men-tre per modificare i contenutigià presenti, diventa necessa-rio agire sulle pagine già pub-blicate per mezzo di un EditorHTML di tipo testuale o grafico,a seconda delle nostre abitudi-

ni e della nostra capacità dispesa. In buona sostanza, un si-to statico contiene solo le pagi-ne che abbiamo individual-mente realizzato per la pubbli-cazione e il navigatore non puòchiedere di vedere informazio-ni visualizzate in modo diversoda quello noi abbiamo definitoin tali pagine. In un sito centra-to su database, ossia dinamico,è invece possibile avere unapagina campione (template) al-l'interno della quale riversareal momento le informazioni piùdiverse a seconda di quel chel'utente chiede.

Ciascuna pagina di un sitostatico contiene invece infor-

mazioni e tag HTML mescolatitra loro, perciò non è possibiledemandare le attività di pub-blicazione e di aggiornamentoa persone non tecnicamentequalificate, poiché, nel cambia-re il testo o le immagini, po-trebbero inavvertitamente al-terare anche i marcatori in cuiquesti sono racchiusi, scombi-nando la pagina.

Esistono tecniche per limita-re tali rischi, in ogni caso il si-to statico costituisce un impe-gno importante di manutenzio-ne per il Webmaster, che au-menta al crescere del sito eche non sempre è possibile far-si remunerare. Per tale motivo,

la tendenza di tutti i progettistiè di usare le strutture statichesolo per i siti più semplici, do-ve gli aggiornamenti siano po-co frequenti e di modesta en-tità, per poi passare, non appe-na possibile, a strutture dina-miche, centrate su database.

In ogni caso, qualsiasi sitonasce statico, nella sua formadi prototipo originale, e si evol-ve in dinamico con l'aggiuntadella connessione al databasee con la sostituzione di alcunitag HTML con tag scritti in unodei vari linguaggi di scripting,perciò il know how su comerealizzare un sito statico inte-ressa tutti ed è anche impor-

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

Aggiunte inedite alla prima lezionedisponibili solo sul CD di questonumero:

Organizzazione delle informazioni: unadescrizione dei vari schemi per strutturarele informazioni di un sito: schemi esatti,ambigui e misti.

Costruzione della mappa – gerarchia,ipertesto, struttura lineare: i tre possibiliapprocci per l'architettura del sito e lerelative varianti.

Strumenti di navigazione: elementi che ibrowser offrono per la navigazione di unsito e come sfruttarli nella progettazione.

Sistemi di navigazione: impostare lanavigazione del sito in modo che siacomprensibile, inequivocabile ed efficace.

Sistemi di labeling: come sceglierecorrettamente le "etichette" cheidentificano i vari elementi di navigazione.

Lezione 2:Siti statici e linguaggio HTML

Progettare un sito statico: definizionedella struttura, domini reali e virtuali,collegamenti assoluti e relativi.Progettare la pagina: modelli di pagina,la caduta della “piega”, tecniche diimpaginazione, usabilità e accesso. Pagine HTML e marcatori: sintassi dellinguaggio, formattazione, tag.Strutturare i contenuti della pagina:tabelle, frame e form.Adobe GoLive 6.0: le caratteristichedell’ambiente di sviluppo integrato.

contenuti aggiuntivi sul CD• Versioni integrali e complete degli

articoli pubblicati sulla rivista

• Spiegazione dei tag HTML per unapagina vergine

• Esercizi su come creare una paginavergine e su come progettare un sito

Le prossime puntate:

Lezione 3:Modelli di pagine e tabelle

Lezione 4:HTML 4.01 e CSS

Lezione 5:Design e multimedialità

Lezione 6:Siti interattivi

Lezione 7:Interazione sul server

Lezione 8:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Roberto Mazzoni

�

il corso èsul CDn. 66

� A scuola con PC Open

ProgettoWebMaster1 Progettare un sito statico

11/88

2a lezione

tante sapere come predisporlofin dall'inizio alla sua evoluzio-ne dinamica. Un codice HTMLscritto in maniera scorrettapuò costringervi a riscrivereper intero tutte le pagine al mo-mento del passaggio alla mo-dalità dinamica. In questo arti-colo e nei seguenti cercheremoquindi di esaminare l'approc-cio corretto fin dal principio.

Definire la strutturaIl primo passo consiste nel

definire una struttura ordinataper catalogare le informazionida pubblicare (vedi Organiz-zazione delle informazioninella lezione 1). Dopo di che sitraccia una mappa del sito, cheimposti l'organizzazione delleinformazioni in generale (vediCostruzione della mappa nellalezione 1) e si arriva infine aipercorsi di navigazione (vediSistemi di navigazione nellalezione 1). Da queste tre atti-vità ricaveremo il sistema di di-rectory che conterrà i vari file.Nella pratica, infatti, un sitostatico consiste semplicemen-te di una serie di file distribuitiin varie directory.

Un sito molto semplice po-trebbe avere tutti gli elementiin una sola cartella, ma se pre-vediamo un minimo di espan-sione, sarà opportuno averecartelle separate con più livelliin cascata per tenere ordinenei contenuti. In effetti, se-guendo la mappa tracciata pri-ma, dovremmo avere anche inomi e la posizione delle direc-tory, così da replicare fisica-mente sul disco, almeno a gran-di linee, i percorsi di navigazio-ne previsti per il sito.

La scelta dei nomi delle car-telle e dei file è importante per-ché ci deve aiutare a ricordareche cosa ciascuno contienesenza doverlo aprire tutte levolte. Scegliete quindi nomimnemonici ed esplicativi chericalchino le etichette che ave-te adottato per il vostro siste-ma di navigazione (vedi sem-pre Tecniche di progettazionenella lezione 1).

Il nome delle directory e deifile costituisce anche un ausilioal navigatore che li vedrà com-parire nella finestra del suobrowser subito dopo il nomedel dominio a cui il sito è abbi-nato. Una regola importantenella scelta dei nomi di file e di-rectory è evitare caratteri spe-ciali che possano essere in-compatibili con il sistema ope-rativo del server.

Poiché quest'ultimo può va-riare, ci conviene adottare unapproccio che renda i nostri fi-le compatibili con Windows,Windows NT/2000 e conUnix/Linux. È facile, basta man-tenere i nomi brevi ed evitarel'uso di spazi bianchi (sostitui-teli con un tratto di sottolinea-tura o con un trattino).

Evitiamo anche l'uso di qual-siasi vocale accentata (siamaiuscola sia minuscola) e deiseguenti caratteri speciali: < , ;: > " ' * / \ & ! % ? = # () [] + ilpunto fermo è ammesso, mapuò provocare confusione inWindows perciò usatelo solocome separatore tra il nome eil suffisso obbligatorio e nonaggiungete mai più di un suffis-so in cascata. Conviene evitareanche l'uso del segno del dolla-ro ($) e di qualsiasi caratte-

MARCATORE (markup) è unaporzione d'informazione che siaggiunge in testa e in coda a unblocco di testo per determinarne iconfini, definirne la natura edeventualmente l'azione da compieresu di esso. Il marcatore non fa partedel contenuto della pagina, bensìaggiunge semplicemente informazionirelative a tale contenuto e vienerimosso dal browser prima dellavisualizzazione finale della paginasullo schermo del navigatore. Alcuni marcatori vengono direttamenterimossi da server prima ancora dispedire la pagina al browser, nel casoin cui il marcatore indichi un'azioneche deve essere compiuta sul server.I marcatori più conosciuti sono quellidel linguaggio HTML, ma esistono

molti altri linguaggi basati sumarcatori, in particolare i varilinguaggi di scripting da usare perinserire azioni nella pagina Web.

TAG (etichetta) l'indicazione d'inizioe di fine che si usa per delimitarel'efficacia di un marcatore, spessousata come sinonimo di quest'ultimo.Qualsiasi tag inizia con i simboli "<"oppure "</" e termina con i simboli">" oppure "/>". Molti tag HTMLsono binari, vale a dire operano acoppie e richiedono un tag di aperturae un tag di chiusura per completare lamarcatura. Solo il tag di apertura puòcontenere attributi e valori.

ATTRIBUTO (attribute)è una delle caratteristiche che

indicano in che modo applicare il tagal contenuto e che viene indicata neltag di apertura di una qualsiasicoppia di tag che consenta attributi.Ad esempio <h1> è il tag cheidentifica un titolo e si chiude con ilcorrispondente tag </h1>. Possiamomodificare il tag di aperturaaggiungendo un attributo chedetermina l'allineamento del titolo:align. Uno dei valori da essoconsentiti è right. Perciò <h1align="right">Titolo allineato adestra</h1> produrrà un titoloallineato a destra. Notate che il valoredi un attributo deve essere semprecompreso tra virgolette. Questaregola non è imposta dai browsermoderni, ma diventa essenziale peruna futura conversione verso XML.

ELEMENTO (element)corrisponde, in HTML, allacombinazione del tag di apertura,degli eventuali attributi, del tag dichiusura e del testo racchiuso tra itag. Perciò la scritta: <h1 align="right">Titolo allineato a destra</h1> nel suo insiemecostituisce un elemento.

IDENTIFICATORE (identifier)è il nome del tag, vale a dire la parolainglese o lettera che compareall'interno dei simboli < >.Nell'esempio sopra l'identificatore èh1.

CONTENUTO (content) qualsiasicosa presente nella documento chenon costituisca un marcatore.

GLOSSARIO

Ci incontriamo allo Smau: èsempre una sensazione stranavedere finalmente qualcuno concui si è intrecciata una relazionevia Internet. Nei mesi cerchi diimmaginarlo e poi eccolo lìdavanti a te, in carne e ossa.Ed ecco Beatrice Demont, laBeaBea della community di PcOpen, ventinove anni, solida edeterminata, una ragazza chealla tastiera del pianoforte hapreferito quella del computer.Infatti spiega:“Nasco comemaestra di pianoforte,diplomata al Conservatorio diGenova, la mia città. Ma dopoun po’ di tempo (e di tentativi),mi rendo conto che in ambitomusicale non ci sarebbero statesperanze, quindi decido diiscrivermi all’università, allaFacoltà di Lingue”. Prosegue glistudi con successo fino algiorno fatidico in cui si incagliain un computer. “Mi hannochiesto di fare una ricerca suInternet: immediata la miarisposta - cos’è?-. Mi piazzanodavanti a un PC nel laboratoriodi facoltà e mi dicono come siaccende. Fine. Intorno a mematricole chattano, scambianoe-mail con tutto il mondo,scorazzano sulla Rete: invidia,quindi ferocia...decido che devoimparare”. Parte dal computer,lo acquista, prende una “sola”:“un chiodo, il commerciante miaveva fregato. E ora che cifaccio?”. Un suo amico leconsiglia di acquistare PC

Open.“Da quelmomento hoiniziato astudiare sulla rivista.Contemporaneamentepreparavo l’esame diinformatica con il professorParodi, che richiedeva comeesercitazione la costruzione diun sito Web. Partivo da zero, macon costanza, prima imparandoa utilizzare bene Office poiprogrammi come Arachnophilia,e Front Page, nel giro di seimesi ho preparato l’esame,creato il sito e preso 30 contanto di stretta di mano delprofessore e offerta di lavoro infacoltà appena se ne sarebbeverificata l’opportunità”. Che siè concretizzata proprio in questomese: attualmente Beatrice fauna sostituzione comeassistente e-learning al CentroLinguistico Multimediale diInterfacoltà (Climi) e al Centro diTeledidattica dell’Università diGenova. Il suo sogno? Rimanerein facoltà e aprire un centrostudi ricerche volto allo scambiodi informazioni letterarie ecritiche tra Italia e Francia.Fondamentali per questo, le suecompetenze informatiche eovviamente linguistiche. E, comeci si poteva aspettare da lei, nonha certo perso tempo: visto cheGenova nel 2004 sarà Cittàdella Cultura, ha già inviato ilprogetto alla Provincia. BeaBea,noi di PC Open facciamo il tifoper te! Daniela Dirceo

“Ho trovato lavorograzie a PC Open”

�

12/88

2a lezione

re particolare, mantenendosiin sostanza all'interno delle let-tere primarie dell'alfabeto, i nu-meri, il trattino e la sottolinea-tura.

Le virgolette doppie (") sonopericolose anche quando usateall'interno del testo perchévengono normalmente utilizza-te da HTML e dai linguaggi discripting per passare i parame-tri di un comando. Sostituitelesempre con il codice equiva-lente previsto da HTML(&quot;) e fate altrettanto con icaratteri speciali e le vocali ac-centate.

Nella definizione dei nomi difile, prestate anche attenzioneall'impiego delle maiuscole edelle minuscole, irrilevanti perWindows, ma riconosciute daUnix/Linux. Anche la lunghezzadei nomi è importante. Il DOS èlimitato a 8 caratteri di nome e3 caratteri di suffisso, il Macin-tosh si ferma a 31 caratteri,Windows dalla versione 95 inavanti consente di usare 255caratteri e lo stesso vale perUnix. Alcuni consigliano dimantenersi entro i vincoli delDOS, al fine di essere compati-bili con tutti, ma ciò finisce perrendere il nome illeggibile. Pro-babilmente l'approccio miglio-re è di mantenersi al di sotto

dei 31 caratteri e usare ovun-que possibile caratteri minu-scoli per i nomi dei file e delledirectory, in tal modo il sito po-trà spostarsi su macchine Win-dows, Macintosh o Linux senzaproblemi.

È anche importante rispetta-re i suffissi che seguono i nomidei file e che permettono albrowser di riconoscerne la na-tura e di trattarli di conseguen-za. I più comuni sono .HTM o.HTML per le pagine in genera-le. I due sono intercambiabili inWindows, e su gran parte deiserver Unix e Linux di recenteconcezione, a meno che sianostati configurati altrimenti. Ma-cintosh usa in modo nativo ilsuffisso .HTML per il lavoro inlocale perciò consigliamo diusare sempre quest'ultimo,quando possibile. Per le imma-gini i suffissi riconosciti daibrowser sono .JPEG e .JPG perle fotografie, Graphics Inter-change Format (.GIF) per la gra-fica a 256 colori e PortableNetwork Graphic (.PNG) pergrafica e foto, anche se que-st'ultimo è tuttora poco diffuso.

Il nome della home page,cioè della prima pagina del sito,è determinante perché va rico-nosciuto automaticamente dalparticolare sistema operativo

presente sul server einviato al navigatorequando costui digital'indirizzo del sitosenza indicare unapagina in particolare.Il nome di questo file"indice" è index.htmo index.html per i ser-ver Unix e Linux, ediventa default.htm odefault.asp, nel casodi Internet Informa-tion Server di Micro-soft, con la possibi-lità di riconoscereanche index.htm e in-dex.asp (.ASP è il suf-fisso delle pagine di-namiche realizzatecon Active Server Pa-ges). Può assumereanche altri nomi co-me main.htm, welco-me.htm e home.htm aseconda del serverimpiegato.

L'amministratoredi sistema può confi-gurare il server inmodo da riconosceretutti questi tipi, ma èsempre bene verifi-care e regolarsi diconseguenza. Le al-tre pagine possonoavere un nome a piacere, an-che se c'è chi consiglia di crea-re dei file index.html anche perle home page di secondo e ter-zo livello. Infatti in server cercaautomaticamente tale file ognivolta che digitiamo un indiriz-zo che finisca con il nome diuna directory senza specificarenient'altro, ad esempio www.di-gifocus.it/prodotti/fotocamere,e nel caso non lo trovi visualiz-za in alcuni casi una propria pa-gina indice composta di unelenco dei file e delle cartellecomprese in quella particolaredirectory.

Collocare i file grafici e multimediali

Per comodità, le immaginiabbinate a una particolare pa-gina HTML vengono spessocollocate nella stessa directoryche ospita la pagina creandoun sistema di cartellette divisoper argomenti oppure per pe-riodi temporali, a seconda deltipo di contenuti del sito. In talmodo, tutti i contenuti relativia un determinato argomentosono raccolti in una singolacartella e quando dovessimoaggiungere o variare qualcosasapremmo dove cercare. Inol-

tre, copiando l'intera cartellasiamo sicuri di aver trasferitotutto ciò che serve. Come ve-dremo più avanti, un beneficioulteriore di raggruppare nellastessa cartella tutti gli elemen-ti necessari è la semplificazio-ne dei link.

Le immagini che invece sonocomuni all'intero sito (loghi,icone, pulsanti) si trovano disolito in una cartella unica, im-mediatamente sotto la root delsito e accessibile da tutte le al-tre pagine. In tal modo saremosicuri di avere una singola co-pia di ciascun elemento graficoe di poterla modificare a piace-re sapendo che la variazionesarà immediatamente disponi-bile in tutto il sito.

Tuttavia, se pensate di con-vertire il vostro sito da staticoa dinamico, diventa opportunocollocare in una directory uni-ficata anche tutte le immaginidi contenuto, indipendente-mente da dove si trovi la pagi-na a cui si riferiscono. Ciò com-plicherà i link all'interno dellepagine, ma ci metterà nellacondizione di usare il databasein modo efficiente. Infatti, i sitidinamici collocano nel databa-se solo gli elementi di testo e il

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 delcorso. La mappa è stata realizzata mediante lo strumento di disegno siti di AdobeGoLive 6.0 che consente di tracciare i contenuti del sito con tutte le relazioni primaancora di aver creato una singola pagina. Una volta che la mappa è definita, ilprogramma genera tutte le pagine e le directory necessarie a rappresentarla.

La struttura gerarchicadi un sito

�

Ecco come si traduce sul disco la struttura adirectory per realizzare un sito che contenga gli articolidi questo corso per Webmaster. Notate che,trattandosi di un sito statico, abbiamo raggruppato gliarticoli in base all'argomento e li abbiamo inseriti inuna directory di nome esplicativo. Anche i nomi dei filesono di tipo esplicativo. Non abbiamo seguito laconvenzione di scrivere tutto in minuscolo per renderlipiù facili da capire nell'immagine. Qui la vistastrutturate delle cartelle è tratta dalla finestra diEsplorazione sito di Dreamweaver MX

13/88

nome delle immagini relative,sapendo che sono tutte collo-cate nella stessa directory.

Se metteste nel databaseogni file grafico per intero fini-reste per appesantire il sistemae rallentare il sito, se invece do-veste codificare nel database,oltre al nome dell'immagine,anche la relativa posizione, fi-nireste per complicarvi la vitae vincolare il database a unaparticolare struttura di direc-tory. Nei siti dinamici, tra l'al-tro, gran parte delle directoryscompare poiché esistono po-chissime pagine precostituite,solitamente di servizio, perciòil grande "calderone" comuneper le immagini è obbligato.

Tornando ai siti statici, èconsigliabile in ogni caso uti-lizzare due directory separateper le immagini di servizio delsito (loghi, elementi grafici del-la pagina, bottoni) e per le im-magini di contenuto. In questomodo chi lavora al manteni-mento del sito (Webmaster)potrà operare senza toccare leimmagini di contenuto e il con-tent editor o content managerpotrà aggiungere immagini fo-tografiche e disegni senza can-cellare inavvertitamente ele-menti grafici essenziali per lacostruzione dell'intero sito.

Inoltre entrambi potrannotrovare le proprie immagini alvolo, senza rovistare in mezzoad altri file di cui non conosco-no il contenuto. I file multime-diali, ossia audio e video, ven-gono spesso inseriti nella stes-sa directory che contiene leimmagini, tuttavia vale la penadi prevedere un cartelletta aparte, se non altro per ordine.

Domini reali e virtualiLa navigazione di un sito av-

viene per mezzo di collega-menti ipertestuali che indicanoil percorso per passare da unapagina all'altra. L'interso sito èunito da questi link, strutturati

in modo gerarchico, lineare ocompletamente libero (iperte-stuale) come descritto nei varisistemi di organizzazione delleinformazioni (vedi Tecniche diprogettazione nella lezione 1).Il sito stesso poi è accessibilesul Web per mezzo di un indi-rizzo universale, detto UniformResource Locator (URL), cheidentifica il particolare serverche lo sta ospitando. Nella pra-tica, lo URL digitato dal naviga-tore non riflette quasi mai l'in-dirizzo del server in quanto ta-le, perché quest'ultimo è spes-so complicato da ricordare ol-tre che fuorviante. Infatti il ser-ver può avere i nomi più astru-si (assegnati solitamente dalprovider per proprio uso inter-no) e il sito medesimo può tro-varsi in qualche subdirectorydal nome ancora più astruso, ilche produce alla fine un indi-rizzo lunghissimo e difficile dadigitare.

La prassi abituale consisteperciò nell'acquisire un nome adominio che in qualche modocomunichi l'identità del sito e

che sia anche facile da ricorda-re e digitare. Il domino è solita-mente composto da tre ele-menti separati da un punto. Ilpiù importante dei tre elemen-ti di chiama Top Level Domaine si trova all'estrema destra delnome a dominio e indica il tipodi categoria a cui il dominiostesso appartiene: COM percommerciale, ORG per le orga-nizzazioni senza fini di lucro, ITper i domini concessi a perso-ne e società residenti nel terri-torio italiano. Questa primaparte del dominio è assegnataalla gestione di organizzazioniinternazionali che ne defini-scono le regole di assegnazio-ne. La seconda spostandosiverso sinistra contiene il nomescelto da chi registra il domi-nio, ad esempio pcopen. La ter-za parte, sempre spostandosiverso sinistra, prende il nomedi sottodominio. Spesso nonviene usata e la si riempie conla dicitura www per indicareche si tratta di un server checontiene pagine Web, tuttaviapotrebbe essere utilizzata per

creare infinite variazioni deldominio che puntino, ciascuna,a siti separati. Ad esempio, la-boratorio.pcopen.it potrebberimandare a un sito specificoper il nostro laboratorio prove.Chiude l'elenco l'indicazionedel tipo di protocollo utilizzatoper il trasferimento delle infor-mazioni, cioè l'Hypertext Tran-sfer Protocol, (HTTP), nel casodelle pagine Web.

Poiché un nome a dominio èriservato a un solo detentoresu scala mondiale, diventa unottimo sostituito per l'indirizzodel server, al quale viene abbi-nato in modo invisibile così cheil navigatore digiti il dominioconosciuto e questo venga tra-dotto nel percorso per arrivareal server corretto. Nel caso incui il server sia di vostra pro-prietà, probabilmente il domi-nio sarà residente sul servermedesimo, tuttavia ciò si verifi-ca di rado e si parla quindi didominio virtuale. Vale a dire, ilvostro nome a dominio è con-servato su una macchina diver-sa dal server che ospita il sito,vale a dire su un computer sem-pre accessibile via Internet cherimanda verso il server realenon appena lo si interroga.

Tale computer solitamenteappartiene alla società a cuiavete affidato la conservazionedel vostro dominio, tecnica-mente definita maintainer.Spesso si tratta di chi vi havenduto il dominio in primoluogo, talvolta è invece l'ISPche ospita il vostro sito su unodei suoi server. La scelta delmaintainer è importante poi-

2a lezione

Collegamento assoluto - URL

http:// www.digifocus.it/ testlabs/ testlabs.htmlprotocollo nome a dominio

che punta al sitopercorso delledirectory a partiredalla homepage

nome della pagina chevogliamo raggiungere

�

Risoluzione di un indirizzo assoluto - URLNAVIGATORE

URL

www.digifocus.it

server che ospita ildominio (maintainer)

server delprovider

root

Sito# 15

testlabs

home.html

paginarichiesta

testlabs.html

directorydi servizio

Un collegamento assoluto corrisponde all'indirizzo univoco di una pagina, ossia URL (Uniform Resource Locator). La prima partedello URL contiene solitamente il dominio abbinato al sito su cui la pagina è residente, seguono immediatamente dopo le eventualidirectory da attraversare prima di arrivare alla pagina, prendendo a riferimento di partenza la directory radice (root) del sito entro cuisi trova la home page

Quando digitiamo un dominio, la richiesta viene inviata a una rete di computer che gestisce una mappa di navigazione globale delWeb, nella quale è indicato l'indirizzo fisico della macchina su cui tale dominio è residente. Spesso quest'ultima è un sistema delmaintainer, cioè l'organizzazione che si limita a ospitare il dominio e tenerlo vivo, senza farlo corrispondere, come da regola, alladirectory radice (root) del vostro sito. Si parla quindi di dominio virtuale che rimanda verso la macchina reale che ospita il sito (adesempio il sito # 15) e che fa proseguire alla pagina richiesta dal navigatore

14/88

2a lezione

ché da lui transiteranno tutticoloro che digitano il vostrodominio prima di raggiungere ilvostro server e perciò si pos-sono verificare rallentamentioppure completa inaccessibi-lità del sito, anche se questo èmagari perfettamente funzio-nante.

Affidare il nome a dominio achi ve l'ha venduto è la solu-zione più rapida e meno costo-sa, e qualora costui sia anche ilvostro provider, potrete richie-dere garanzie sull'efficienzatecnica del collegamento tra idue server.

Peraltro tale approccio au-menta i vincoli verso quel par-ticolare provider poiché, nel

momento in cui voleste cam-biare dovreste anche spostarela posizione del nome a domi-nio, con inevitabili ritardi dipropagazione degli aggiorna-menti sulla Rete e temporaneainvisibilità del vostro sito.

Quando lo digitiamo, il do-minio virtuale ci dirotta versola macchina server e all'internodella particolare directory cheil provider ha riservato al no-stro sito (lo stesso server in-fatti contiene quasi sempre di-versi siti in directory diverse).Ciò significa che la home pagedel nostro sito non si trova nel-la root (directory principale)del server Web che la ospita,bensì in una cartella due o tre

livelli più sotto. Il navigatorenon vedrà tali livelli accessori,ma comincerà la navigazionedirettamente dal punto in cui ilsi trova la home page del sito e,sulla finestra del suo browser,vedrà il nome a dominio segui-to dalla serie di directory e sot-todirectory che da lì scendonoper portarci alla pagina verache abbiamo chiesto. Ad esem-pio, lo URL http://www.digifo-cus.it/testlabs/testlabs.html cidice che stiamo andando allapagina testlabs.html nella di-rectory "testlabs" del sitowww.digifocus.it, indipenden-temente da dove tale sito siacollocato nel server del provi-der.

Collegamenti assoluti e relativi

Questo genere d'indirizzoprende il nome di collegamen-to assoluto poiché contienetutte le informazioni necessa-rie per arrivare alla pagina sen-za conoscere il punto di par-tenza. È il tipo di link che utiliz-zerete per mandare alla paginada un sito esterno oppure dal-l'interno del testo di una new-sletter che spedite ai vostri na-vigatori abituali per informarlidelle novità. Funziona in qual-siasi circostanza perché è au-tosufficiente, ma non viene maiusato per i collegamenti internidel sito perché ogni volta chesi digita un indirizzo assoluto,il browser esce dal sito, cerca ildominio, individua il server fi-sico corrispondente, ritorna suquest'ultimo, completa l'indi-rizzo e ritorna nel sito, con vi-stosi rallentamenti alla naviga-zione e congestione del serverche gestisce le richieste del no-me a dominio.

Di conseguenza, per i pas-saggi interni al sito, si usanocollegamenti relativi che indi-cano le sole informazioni indi-spensabili per raggiungere il fi-le a partire dalla posizione incui ci si trova. Ne esistono ditre tipi. Chiameremo il primo, ilpiù semplice, link diretto per-ché si riferisce alla cartella incui già ci troviamo. Prendiamol'esempio di un'immagine "gra-fica.jpg" che si trovi nella stes-sa directory "articoli" della pa-gina "testo.html" in cui dobbia-mo inserire il link: l'indirizzo re-lativo diretto contenuto nellapagina "testo.html" sarà sem-plicemente = "grafica.jpg".

Nel momento in cui leggequesto indirizzo, il browser sa

che deve cercare il file "grafi-ca.jpg" nella stessa cartella del-la pagina "testo.html". Suppo-niamo adesso di avere una di-rectory "testi" e una directory"immagini" di pari livello en-trambe contenute nella direc-tory "articoli" e che la nostrapagina "testo.html" si trovi ap-punto in "testi" mentre il filegrafica.jpg sia nella cartella"immagini".

Dobbiamo usare un link in-diretto e dire al browser diuscire dalla directory "testi" incui si trova la pagina"testo.html", salire di un livello(mediante il segno convenzio-nale dei due punti consecutivi..) , cercare la directory "imma-gini", ridiscendere all'internodi questa alla ricerca del file"grafica.jpg". L'indirizzo relati-vo diventerà in tal caso = "../im-magini/grafica.jpg" e funzio-nerà solo fintantoché la paginadi partenza resterà nella posi-zione attuale all'interno dellacartella "testi". Nel caso in cuidovessimo spostare la pagina"testo.html" oppure la cartella"testi" a un livello inferiore osuperiore, il link smetterebbedi funzionare.

Per ovviare a tale inconve-niente si usa un'altra forma dilink relativo che alcuni defini-scono, erroneamente, assolu-to, ma che invece noi chiame-remo link completo. Si tratta diun link che non è relativo allacartella di partenza, bensì allaroot dell'intero sito. In tal mo-do il link continua a funzionareanche nel caso in cui la pagina"testo.html" fosse spostata inun altro punto del sito, semprea condizione naturalmente chenon si sposti anche la directory"immagini" a cui il link punta.La posizione della root è indi-cata per convenzione da unabarra inclinata (/) perciò il nuo-vo indirizzo relativo completosarebbe = "/articoli/immagi-ni/grafica.jpg".

Attenzione, però, questo ap-proccio presenta un problemadiverso, ossia il browser spes-so interpreta come directoryradice l'effettiva root del ser-ver, la quale coincide con laroot del sito solo nel raro casoin cui il server non ospitinient'altro, ma che, solitamen-te, ci spedisce da qualche altraparte nel caso in cui il nostrosito sia incapsulato in una di-rectory secondaria del serverospite come avviene nel casodi un provider esterno. Infatti il

Collegamento relativo diretto

testo.html

articoli

home page

grafica.jpg

link diretto = “grafica.jpg”

Collegamento relativo indiretto(consigliato)

testo.html

articoli

home page

grafica.jpg

link indiretto =“.. / immagini / grafica.jpg”

testi immagini

sale diunlivello

scendealladirectory“immagini”

Il collegamento relativo diretto può essere utilizzato quando l'elemento a cui si puntadalla pagina si trova nella stessa cartella (directory) che ospita la pagina medesima. È semplice da realizzare e funziona sempre a condizione di mantenere pagina dipartenza e oggetto di destinazione nella stessa cartella, dovunque questa si troviall'interno del sito

Il collegamento relativo indiretto mette in relazione la posizione della pagina e dellarelativa 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 odestinazione) all'interno del sito

�

15/88

mascheramento della strutturadi directory del server ospiteavviene solo quando usiamol'indirizzo assoluto, completodi nome a dominio. La prassi

migliore è pertanto quella diusare link relativi indiretti, fa-cendo attenzione a spostare lepagine il meno possibile unavolta che il sito è stato svilup-

pato. La gestione di queste pro-blematiche diventa in ogni ca-so molto semplice nel momen-to in cui s'impiegano ambientidi sviluppo integrati comeDreamweaver MX o Adobe Go-Live 6.0 che contengono fun-zioni per la gestione integraledel sito.

In tal caso, se spostiamo unfile oppure una cartella da unaposizione all'altra, usando leapposite finestre di controllo,verranno aggiornati automati-camente tutti i link che vi fannoriferimento negli altri docu-menti, a condizione natural-mente di averli impostato uti-lizzando le funzioni interne del-l'editor e non direttamente amano. Ci penserà il program-ma, infatti, a costruire i link re-lativi indiretti nel modo più ido-neo, togliendoci dall'impiccio,e a ricostruirli ogni volta chespostiamo qualcosa.

Copie locali e aggiornamentiUn sito statico nasce sul

computer di chi lo sviluppa e

viene trasferito a intervalli pe-riodici sul server di pubblica-zione, copiando magari solo ifile che sono stati modificatidopo il precedente aggiorna-mento.

Per fare in modo che tuttofunzioni a dovere è importanteusare link relativi sulla propriamacchina in modo corretto, edè anche importante tenere lastruttura del disco locale iden-tica a quella del server remoto,altrimenti i link finiranno perinterrompersi. Per il trasferi-mento delle pagine finite si usail protocollo FTP (File TransferProtocol) tramite utility speci-fiche, oppure mediante le fun-zioni integrate in gran partedegli Editor HTML commercia-li e gratuiti.

I più ricchi tra questi, offro-no anche un pannelli di con-trollo dell'intero sito che con-sentono di esaminare in detta-glio ciascun elemento, eseguiresimulazioni e verifiche in loca-le prima dela pubblicazione fi-nale. �

PC Open Dicembre 200227

2a lezione

Collegamento relativo completo

testo.html

articoli

home page

grafica.jpg

link completo =“/ ar ticoli / immagini/grafica.jpg”

testi immagini

portaallaradicedel sito

scendedi 2livelli

scende di1 livello

Il collegamento relativo completo parte dalla radice (root) del sito, vale a dire dalladirectory in cui si trova la home page, per scendere verso la posizione dell'oggetto didestinazione indicato nel link. Il collegamento è svincolato dalla posizione della pagina di origine che lo contiene e perciò quest'ultima può essere spostata liberamente nel sito

2 Progettare la pagina

Una volta definita la mappadel sito e la relativa strut-tura di directory siamo

pronti a realizzare le prime pa-gine campione che ci serviran-no come modello per l'interosito, il template o modello, cosìchiamato perché serve da"stampo" per la costruzione ditutte le pagine successive. Nelconcreto, il template contienel'intero codice HTML necessa-rio per l'ossatura di una paginavuota. Avrà quindi gli elementidi navigazione e gli spazi in cuiinserire successivamente i con-tenuti (testo e immagini) conanche le eventuali informazionistilistiche (font, colore, sfon-do, eccetera). Ogni volta chesarà necessario produrre unanuova pagina, basterà copiareil template, inserire il contenu-to e aggiungere eventuali link.

L'operazione può essere ese-guita a mano oppure demanda-ta in automatico agli editor chedispongono della gestione auto-matizzata dei template. In que-st'ultimo caso, ogni volta che ag-giorneremo il template, sarannoaggiornati anche gli elementi fis-si (navigazione, pie' di pagina,eccetera) contenuti nelle pagine

prodotte nel frattempo a partireda tale template.

Lavorare con i template sen-za un editor che li gestisca inautomatico aggiunge tempo alciclo di produzione, ma il tem-plate offre il duplice vantaggiodi garantire uniformità a tuttele pagine del sito e di consenti-re un più semplice passaggio aun'architettura dinamica. Que-st'ultima infatti si basa unica-mente su template ai quali so-no stati aggiunti marcatori rea-lizzati in un linguaggio di scrip-ting che prelevano il contenutoda un database, invece che ri-chiedere l'inserimento manua-le da parte del Webmaster odel content editor. Da notareche il sito dinamico non avràaltre pagine al di fuori dei tem-plate, infatti qualsiasi paginadi contenuto verrà prodottaautomaticamente al momentodella richiesta da parte del na-vigatore, travasando nel tem-plate le informazioni prese daldatabase, e cesserà di esisteresubito dopo. Per tale motivo,abituarsi a lavorare per tem-plate costituisce un'ottima pa-lestra per affacciarsi al mondodel Web dinamico.

Il template parte da un dise-gno generale, spesso realizzatoda un creativo, il Web designer,tuttavia spetta al Webmasteroppure all'Editor tecnico tra-sformare il disegno in una co-difica HTML che possa ripro-durre nella finestra del brow-ser ciò che il grafico ha conce-pito in origine.

La traduzione non è mai per-fetta, sia perché gli strumentistilistici offerti dall'HTML sonopiù rozzi di quelli disponibili inun programma di disegno o divideoimpaginazione orientatoalla stampa su carta, sia perchénon esiste alcun modo per con-trollare esattamente l'aspettoche la pagina avrà quando vi-sualizzata dal browser del na-vigatore.

A differenza della pagina diuna rivista, che giace comple-tamente sotto il controllo del-l'impaginatore, la pagina Web,per sua stessa natura, nasceper essere visualizzata sui tipipiù disparati di computer, equi-paggiati con i browser più di-versi e con ogni genere di si-stema operativo. Inoltre moltibrowser offrono al navigatorela possibilità di personalizzare

ciò che vede, modificando larisoluzione dello schermo, ilnumero di colori visualizzati, ladimensione della finestra, lagrandezza dei caratteri e altroancora.

Perciò il progettista deve co-struire una pagina che manten-ga una propria coerenza anchese sottoposta a vistose altera-zioni nel momento in cui vienericevuta. Inoltre, dovrà anchetenere conto di elementi di usa-bilità e di navigabilità del sito,che consentano a chiunque ar-rivi nella pagina direttamentedall'esterno di capire dove sitrovi, di che cosa la pagina trat-ta e dove può andare da quelpunto.

Prima ancora di scrivere unariga in HTML è necessario divi-dere la nostra pagina in aree re-golari e possibilmente costantiin cui collocare gli elementi dinavigazione, il contenuto veroe proprio e qualsiasi altro ele-mento che sia necessario (adesempio banner pubblicitari, ecosì via).

Modelli di paginaLa creatività non ha limiti e

ci sono diversi approcci possi- �

16/88

2a lezione

bili. Sul Web si sono consolida-ti due approcci ricorrenti per lastrutturazione delle pagine(per un approfondimento deltema rimandiamo a "Web desi-gn arte e scienza" edito da Apo-geo). Il primo modello prende ilnome di schema tre-quattro pan-nelli e moduli e prevede nellaparte alta una zona orizzontaleche contiene il logo del sito,eventuali banner e l'indicazio-ne di dove ci si trova in quelmomento all'interno del sitomedesimo. Il secondo pannel-lo, costituito da una verticale asinistra, contiene di solito labarra di navigazione e infine ilterzo pannello, centrale, ospitail contenuto. Nella pratica lazona di contenuto non vienesfruttata appieno per un limiteintrinseco di tutti i browser, ecioè l'impossibilità di stampareciò che si trova all'estrema de-stra dello schermo (noi abbia-mo misurato empiricamentetale limite a 659 pixel dal bordosinistro della pagina Web).

Nelle realizzazioni pratichetroviamo perciò modelli a quat-tro pannelli, con una colonnaall'estrema destra della paginausata per contenuti minori. Ipubblicitari la definiscono, ingergo, area extramercial, per-ché ospita banner e bottoni se-condari, in aggiunta a quelliprimari in testa alla pagina. So-litamente la si utilizza ancheper elementi di servizio, comela finestra di login, la naviga-zione locale (link che colleganotra loro varie parti di uno stes-so articolo), i bottoni realizzatidal marketing per iniziative

promozionali oppure dal con-tent manager per evidenziarealtri contenuti del sito.

Dove cade la piegaUn altro concetto importan-

te nel progettare una pagina e,in particolare la home page, èla caduta della piega o fold, al-l'inglese. Si tratta del limite in-feriore della porzione visibiledella pagina prima di eseguirelo scrolling. La parte alta dellahome page costituisce la por-zione più pregiata del sito,quella che tutti vedranno e cheperciò tenderà ad affollarsi dielementi di navigazione, di ri-chiami editoriali e di eventualicontenuti pubblicitari.

Infatti, solo una parte dei na-vigatori esegue lo scrolling ver-ticale della home page per ve-dere il contenuto sottostante,dopo la piega (below the fold).Il termine è preso a prestito dalmondo dei quotidiani la cui pri-ma pagina è visibile solo permetà quando è piegata sul ban-co dell'edicolante, dunque laparte superiore, sopra la piega,contiene sempre gli elementi dirichiamo più forti.

A dire il vero, i dettami origi-nali del Web design insegnava-no a realizzare home page ab-bastanza semplici da poter es-sere visualizzate per interosenza il bisogno di scrolling eovunque sia possibile questarimane la soluzione da prefe-rirsi, specie per i siti più sem-plici, tuttavia col crescere deisiti e con il fatto che almenometà dei navigatori non tentanemmeno di navigare il sito,

ma si ferma alla home page, ilnumero di elementi da enfatiz-zare in quest'ultima cresce ra-pidamente, perciò è inevitabileavere home page con uno op-pure anche due scrolling e pa-gine interne che arrivano finoal limite massimo di cinquescrolling.

Per compensare in parte ilproblema della piega e rendereil più visibile possibile i conte-nuti interni del sito, alcuni por-tali hanno inventato un altromodello di pagina, denominatoin gergo LSD dall'inglese Logo,Search box and Directory. Inpratica fa quel che dice: apre lapagina con il logo e con le infor-mazioni che permettono al na-vigatore di orientarsi sulla suaposizione attuale e di navigarenelle sezioni principali, prose-gue subito sotto con la finestradi ricerca, messa molto in ri-salto perché costituisce unodegli elementi di navigazioneprimari per un portale e finiscecon la Directory, ossia la clas-sica visualizzazione tabellaredegli argomenti che troviamoin Yahoo, Virgilio, Libero e tan-ti altri. Quest'ultima è l'elemen-to centrale del modello poichéconsente di creare una struttu-ra di navigazione molto ricca,in aggiunta alla barra standard,che offre immediata visibilitàdi quel che c'è sotto la homepage.

Il modello LSD soddisfa an-che le raccomandazioni di usa-bilità di Jakob Nielsen, secon-

do il quale la home page do-vrebbe contenere l'80% d'infor-mazioni di navigazione e solo il20% di contenuto effettivo, pro-porzione che si ribalta nelle pa-gine interne dove il contenutoregna sovrano e gli elementi dinavigazione sono meno evi-denti (vedi il testo Web usabi-lity edito da Apogeo).

Sempre secondo le indica-zioni di Nielsen, e non solo, ilnavigatore medio si ferma per8 secondi su una qualsiasi pa-gina prima di decidere se ap-profondire oppure andare al-trove, dunque la home pagedeve offrire a colpo d'occhioogni possibile strumento percapire cosa ci sia all'internodel sito.

È invece pessima e depreca-ta la prassi del tunnel, vale a di-re la presentazione ai nuovi na-vigatori di una sequenza di pa-gine promozionali da attraver-sare obbligatoriamente primadi arrivare alla home page verae propria. Altrettanto depreca-ta, benché meno dannosa, la fa-migerata splash page, una pagi-na d'introduzione animata checerca di spiegare lo scopo delsito e che prevede, solitamen-te, un pulsante skip intro perprocedere direttamente allahome page del sito. Entrambele soluzioni risultano appagan-ti per il progettista grafico emagari per il marketing, ma so-no inutili per il navigatore cheesce dal tunnel appena possi-bile e non si ferma quasi mai

Modello a tre-quattro pannelli. È il modello più diffuso nel Web e prevede larealizzazione di un modulo o pannello orizzontale superiore (modulo 1) che contiene illogo del sito e alcuni elementi di navigazione globale, un pannello verticale all'estremasinistra (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 nonstampabile della pagina

1�

�

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)

?Test: leggi le domande e verifica le tue risposte

17/88

2a lezione

per osservare l'animazione del-la splash page, bensì salta di-rettamente su altri siti.

Il metodo più pratico perrealizzare un sito di medie di-mensioni è quello di seguire ilmodello a tre/quattro pannelliper tutte le pagine, compresa lahome page, oppure di adottareil modello LSD per la home pa-ge e per le pagine di navigazio-ne primarie (le home page disecondo e terzo livello, nel ca-so in cui il sito sia molto ampioe profondo), mantenendo iquattro pannelli per tutte le al-tre.

Impostare gli spazi del "canovaccio"

Definita la struttura della pa-gina, bisogna "prendere le mi-

sure" prima di cominciare ascrivere il codice HTML vero eproprio. In gergo ci chiama can-vas, ossia canovaccio, l'areaper costruire una pagina Webche stia nello spazio disponibi-le all'interno della finestra delbrowser. Tale spazio varia infunzione del browser, del siste-ma operativo e della quantitàdi pannelli e strumenti acces-sori che il navigatore mantienevisualizzati.

I due parametri importantida conoscere sono larghezza ealtezza del canovaccio, misu-rati in pixel. La larghezza corri-sponde al numero di pixel di-sponibili in orizzontale quandola finestra del browser è apertacompletamente sullo schermo(posizione massimo ingrandi-

mento), tolta l'eventuale barradi scorrimento verticale. L’al-tezza è invece il numero dipixel disponibili nella finestraprima della "piega".

Per capire quanto sia effetti-vamente grande il canovaccio,dobbiamo assegnare dimensio-ni in pixel ai vari elementi. Sicomincia dal considerare la ri-soluzione del video utilizzatadal navigatore. Se immaginia-mo che la media dei navigatorioggi disponga di monitor conalmeno 800 x 600 pixel di riso-luzione, scopriamo che l'areamassima effettivamente utileper lo sviluppo è di 780 x 433pixel, calcolati empiricamentesu una finestra di Internet Ex-plorer all'interno di WindowsXP con le principali barre di co-mando attive. Per una valuta-zione più dettagliata vi riman-diamo a un articolo sul Web: Si-zing Up the Browsers accessibi-le all'indirizzo Internet:h t t p : / / h o t w i r e d . l y c o s .com/webmonkey/99/41/in-dex3a_page2.html?tw=design.In generale vediamo che la di-mensione considerata media-mente sicura per produrre unapagina visualizzabile sia di 584x 599 pixel per schermi da 640x 480 pixel, 744 x 410 pixel suschermi da 800 x 600 (i più dif-fusi) e 968 x 578 pixel su scher-mi da 1024 x 768.

L'elemento più vincolate ènaturalmente la larghezza, poi-ché in lunghezza è sempre pos-sibile eccedere, ricorrendo alloscorrimento verticale della pa-gina (scrolling), mentre loscrolling orizzontale, benchéusato da alcuni siti, va sicura-mente evitato. Vediamo che idiversi siti standardizzano di-verse misure di larghezza:Yahoo Italia, ad esempio, hapagine larghe 735 pixel, Virgilioe Libero (IOL) arrivano a 760pixel.

Una volta decisa la larghezzacomplessiva della pagina, chesarà anche la larghezza del pri-mo pannello, cioè quello con-tenente il logo, dobbiamo sta-bilire le dimensioni delle co-lonne o pannelli che seguono,uno parallelo all'altro. Una vol-ta impostate tutte queste indi-cazioni, siamo pronti a costrui-re la pagina vera e propria.

Tecniche d'impaginazioneIl Web non prevede stru-

menti per l'impaginazione gra-fica di elementi sulla pagina.Nato in origine per visualizzare

semplici testi chilometrici, conoccasionali immagini annegatenei testi medesimi, l'HTML nonfornisce marcatori per dispor-re gli oggetti nella posizioneche vogliamo e con le propor-zioni desiderate. La soluzioneelaborata dai progettisti è statadi ricorrere alle tabelle, nate inorigine come strumento per lavisualizzazione tabulare di datie trasformatesi nel principalemezzo d'impaginazione delWeb. Ogni elemento viene in-serito all'intero della cella diuna tabella invisibile e combi-nando celle e righe contigue siarriva alla costruzione comple-ta della pagina. Il codice che nerisulta è abbastanza comples-so e richiede una certa espe-rienza, ma funziona nella granparte dei browser.

L'alternativa più rozza e im-piegata solo nei primissimitempi del Web, quando le ta-belle ancora non esistevano,consisteva nel creare una gran-de immagine che contenesseinformazioni cliccabili che poirimandavano a pagine internedi testo. Tecnicamente questogenere di immagini prende ilnome di imagemap oppuremappe di immagini e vengonoancora utilizzate in alcuni con-testi particolari, ma comporta-no lentezza nel caricamento(date le dimensioni del file gra-fico) e complicazione nell'ag-giornamento dei contenuti.

In alternativa, nel tempo, sisono sviluppati altri tre stru-menti d'impaginazione. Il piùsemplice e grossolano prendeil nome di frame e consente disuddividere la finestra a videoin tante finestre più piccole,ciascuna contenenti una pagi-na indipendente. Suddividen-do i contenuti nelle diverse pa-gine e regolando le dimensionidei frame, possiamo produrreun'impaginazione approssima-tiva, ma funzionale. Vedremopiù avanti quali sono i vantaggie gli svantaggi dei frame.

Un altro strumento, sicura-mente indicato per il futuro,ma ancora poco supportatodai vari browser, sono i fogli distile (CSS), mediante i quali èpossibile posizionare gli ele-menti sulla pagina indicandonele coordinate. I fogli di stile fan-no anche parte del cosiddettoDHMTL (Dynamic HTML) checonsente di aggiungere anima-zioni e interazione nella paginasenza l'impiego di oggetti grafi-ci. Una variante rispetto ai CSS

Modello LSD. Deriva il suo nome dalle iniziali delle parole inglesi Logo SearchDirectory. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte deiportali per la realizzazione della loro home page. La pagina viene divisa in tre fasceorizzontali, consecutive. La prima contiene il logo del sito e gli eventuali elementi dinavigazione globale del sito. La seconda, di solito piccola, contiene la finestra perimpostare 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 serviziofferti. Di solito, a fianco della directory troviamo anche colonne verticali checontengono informazioni, ulteriori elementi di navigazione e bottoni promozionali

2

�

18/88

2a lezione

sono i livelli (layer) di Netsca-pe che tuttavia stanno caden-do in disuso con il ridimensio-narsi della diffusione di talebrowser.

Chiude l'elenco l'impagina-zione grafica realizzata me-diante strumenti particolari co-me Flash. In tal caso usciamocompletamente dal dominiodell'HTML e generiamo pagineche possono essere visualizza-te solo mediante l'impiego dispeciali plug-in (moduli ag-giuntivi) nel browser del navi-gatore. Il plug-in di Flash vieneormai fornito già in partenza

con Internet Explorer di Micro-soft ed è abbastanza diffusonella Rete, tuttavia si consigliadi avere sempre una versionealternativa delle pagine (solotesto) per consentire l'accessoanche a chi Flash non c'è l'haoppure non lo può utilizzareperché magari non vedente ecostretto a far riferimento a unbrowser che "legga" i contenu-ti attingendo direttamente dal-la codifica HTML.

Usabilità e accessoI siti moderni, soprattutto

quelli realizzati per la Pub-

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

3

Visualizziamo la stessa pagina del portale su uno schermo con risoluzione di 1024 x768 pixel e misuriamo lo spazio empiricamente disponibile con tutti gli "optional" delbrowser attivi. Troviamo che la pagina che ha una larghezza di 735 pixel stacomodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato percompatibilità con tutti i browser nelle condizioni di default (senza barre di navigazioneopzionali) è di 968 x 578 pixel

4

Le risposte alle domande di pag. 291. Progettare la struttura di un sitopartendo dai contenuti che sivogliono pubblicare e dal percorso dinavigazione che meglio si adatta allasituazione, produrre una struttura dipagina HTML che sia leggera,compatibile con i diversi browser evicina alle specifiche grafichepreviste per il sito, conoscenzaperfetta dei linguaggi usati percostruire le pagine (HTML,Javascript, Perl CGI, DHMTL, CSS). 2. Sono programmi per l'inserimentomanuale facilitato di codice HTML.Permettono di inserire i marcatoriusando icone oppure voci di menu econtrollano la sintassi dei marcatoriche abbiamo inserito direttamente.3. Un programma che nasconde ilcodice HTML lasciandoci lavoraredirettamente sulla struttura visivadella pagina finale, usandostrumenti di generazione automaticadei tag simili a quelli offerti daglieditor testuali.4. Un programma che unisce tutte lecaratteristiche più avanzate di uneditor testuale e di un editor visuale,aggiungendo funzioni per la gestionecomplessiva del sito e per ilcontrollo di tutti i link.5. Esatto e ambiguo. Il primosuddivide le informazioni incategorie reciprocamente esclusive,ossia le voci che compaiono in unacategoria non compaiono innessun'altra. Un esempio tipico èun’organizzazione alfabetica, comenel caso di un dizionario, oppurecronologica, come nel caso di unarchivio di articoli di giornale,oppure geografica: i locali di unacittà. Il sistema ambiguo si basasull'esperienza di navigazione delnavigatore tipo e cerca di guidarloquando non sa esattamente cosacercare.6. Tre: gerarchia, ipertesto e lineare.La prima è quasi sempre presentecomplementata dalla secondaquando bisogna creare collegamentidiretti tra zone lontane nello stessosito o verso siti esterni. La struttura lineare è adatta per icorsi on line.7. Finestra per digitale gli URL(indirizzi), i preferiti, i tasti Avanti eIndietro, il tasto home e lavisualizzazione dei link già visitaticon colore diverso.8. Essere facile da capire, rimanerecostante, fornire un feedback,apparire contestuale, offrirealternative, richiedere un’economiadi tempo e di azione, forniremessaggi visivi chiari, utilizzareetichette chiare e comprensibili,essere idonea per gli scopi del sito,favorire gli obiettivi e icomportamenti dell’utente.9. Un sito statico contiene solo lepagine che abbiamo individualmente

realizzato per lapubblicazione e ilnavigatore non puòchiedere di vedere informazionivisualizzate in modo diverso daquello noi abbiamo definito in talipagine. In un sito centrato sudatabase, ossia dinamico, è invecepossibile avere una paginacampione (template) all'interno dellaquale riversare al momento leinformazioni più diverse a secondadi quel che l'utente chiede.10. Riflettere più fedelmentepossibile il disegno gerarchicopensato per il sito, usando nomimnemonici, mantenendo almassimo quattro livelli di profondità,usando solo caratteri minuscoli perdocumenti e cartelle, creando unacartella centralizzata per le immagininel caso si voglia poi passare a unsito dinamico.11. Un collegamento assoluto indical' URL per intero e richiede albrowser di uscire dal sito in cui sitrova per raggiungere la paginaindicata, anche se questaappartiene al medesimo sito. Uncollegamento relativo indica invecela posizione della pagina didestinazione in rapporto alla paginadi partenza oppure alla radice(directory della home page) del sito.12. È una pagina campione che ciservirà come modello per moltealtre pagine di contenuto del sito.13. La linea ideale che separa laparte visibile della pagina da quellache può essere vista solo attraversolo scorrimento verticale (scrolling)dei contenuti.14. L’HyperText Markup Languagenasce nel 1989 nel laboratorioeuropeo per la fisica delle particelle(CERN) come strumento perconsentire la creazione edistribuzione di documentiipertestuali, cioè documenti di testoliberamente interconnessi tra loro. Ilsuo unico obiettivo consiste nellacreazione di pagine di documentivisualizzabili via rete sulle macchinepiù disparate, per mezzodell’intermediazione di uno specialeprogramma, denominato browser(“sfogliatore”, alla lettera) chericonosce i comandi HTML evisualizza di conseguenza il testoche essi racchiudono.15. Il marcatore è una porzioned'informazione che si aggiunge intesta e in coda a un blocco di testoper determinarne i confini, definirnela natura ed eventualmente l'azioneda compiere su di esso. Il tag(etichetta) indica l'inizio e la finedell'area di efficacia di unmarcatore. Qualsiasi tag inizia con isimboli "<" oppure "</" e terminacon i simboli ">" oppure "/>".16. Le tabelle e i frame.

!

�

19/88

2a lezione

blica Amministrazione richie-dono, anche in Italia, l'osser-vanza di alcune regole che mo-dificano il modo d'impostare icontenuti sulla pagina e i siste-mi d'impaginazione possibili.Si tratta di regole di usabilità,per riprodurre un ambienteche sia familiare al navigatoree che gli consenta di fruire deiservizi del sito immediatamen-te senza dovere imparare ausarlo, e regole di accessibilitàche consentano di capire i con-

tenuti anche a chi, per vali mo-tivi, non può utilizzare unbrowser convenzionale.

L'usabilità si centra in buo-na sostanza sulla ripetizionedi modelli che si sono dimo-strati vincenti sul Web e limital'originalità del sito. Il classicoesempio di usabilità è l'auto-mobile: quando salite al postodi guida, il volante e i pedalidell'acceleratore, della frizio-ne e del freno sono semprenella stessa posizione, qualun-

que modello scegliate. I pochimodelli che sono "originali" al-la fine vengono usati poco.

L'accessibilità di traduce in-vece nel fornire alternative te-stuali a qualsiasi cosa che nonsia decifrabile se non guardan-dola su un monitor: tipicamen-te immagini e tabelle.

Inserendo una nota di com-mento per ciascuna immaginee un sunto per ogni tabella, en-trambi previsti dai rispettivitag HTML, chi "legge" la pagina

attraverso un sistema di sinte-si vocale anziché guardarla avideo, può capire di cosa si staparlando. Ciò impone maggio-re lavoro su chi produce con-tenuti, ma allarga il pubblicopotenziale non solo ai portato-ri di handicap, ma anche a chiconsulta un sito via telefono(attraverso sintetizzatore vo-cale) oppure dal browser vo-cale montato sull’autoradio(uno scenario poi non tanto fu-turibile). �

3 Pagine HTML e marcatori

�

L’HyperText Markup Lan-guage nasce nel 1989 nellaboratorio europeo per

la fisica delle particelle (CERN)come strumento per la crea-zione e la distribuzione di do-cumenti ipertestuali, cioè do-cumenti di testo liberamenteinterconnessi tra loro.

Il suo unico obiettivo consi-ste nella creazione di pagine didocumenti visualizzabili via re-te sulle macchine più dispara-te, per mezzo dell’intermedia-zione di uno speciale program-ma, denominato browser (allalettera “sfogliatore” o "visua-lizzatore") che riconosce imarcatori HTML e li elabora,estraendo il testo che essi rac-chiudono e visualizzandolo infunzione del tipo di marcatoreusato. Costituisce un’edizioneridotta di un linguaggio prece-dente, molto complesso e giàben conosciuto nel mondoscientifico e informatico: loStandard Generalized MarkupLanguage, del quale mantienesolo le funzioni essenziali perla produzione di documenti dilavoro, adattate al concetto d’i-pertesto.

L’HTML codifica ogni ele-mento della pagina medianteun sistema di marcatori, tag al-l’inglese, che si pongono all’i-nizio e in chiusura della por-zione di testo che si vuole con-trassegnare. La gran parte deitag ha un significato struttura-le, vale a dire spiega la naturadi quella particolare porzionedi testo: titolo, sottotitolo, pa-ragrafo, tabella, immagine, col-legamento (link) e non dice inche modo visualizzarla. L’in-tenzione originale era di la-sciare al browser la scelta di

come comportarsi in funzionedelle potenzialità della mac-china su cui era installato.

I primi siti Web si presenta-vano perciò molto scarni nell’a-spetto: semplici elenchi di testonero su sfondo grigio, con i linkdi colore blu e sottolineati, econ titoli molto vistosi. Non ap-pena il Web è uscito dal conte-sto universitario per trasfor-marsi, nella metà degli anni No-vanta, in uno strumento com-merciale, si è presentata la ne-cessità di fornire un minimo diestetica e sono nati alcuni mar-catori stilistici che modificanodirettamente la visualizzazionedel testo viene visualizzato eche hanno trovato la loro mas-sima applicazione nell’HTML3.2, ai tempi di Netscape 4x e In-ternet Explorer 4x.

Tali marcatori stilistici,tutt’ora in uso, sono stati de-precati dal World Wide WebConsortium (www.w3c.org),detentore e promulgatore del-le specifiche HTML, al momen-to del rilascio della versionepiù recente del linguaggio, la4.01, ormai supportata, alme-no parzialmente, da tutti i nuo-vi browser.

L'attuale orientamento è in-fatti quello di riportare l’HTMLa funzioni unicamente struttu-rali, lasciando ai fogli di stile incascata (Cascading StyleSheets) il compito di aggiunge-re stile al testo.

Questi ultimi, tuttavia, nontrovano ancora piena imple-mentazione in alcuni browsere perciò molti progettisti anco-ra abbinano fogli di stile e mar-catori HTML stilistici secondotecniche che vedremo e cheprendono il nome di transitio-

nal (soluzioni transitorie). La sintassi del linguaggio

HTML è semplicissima e si ba-sa su parole inglesi comuni.Non occorrono particolari pro-grammi per scrivere una pagi-na HTML, basta infatti un qual-siasi editor di testo. L’impiegotuttavia di editor dedicati svel-tisce il lavoro e riduce gli erro-ri.

Ogni marcatore è contenutotra il simbolo di minore < emaggiore > senza spazi e sipresenta solitamente in cop-pia, con un marcatore di aper-tura e uno di chiusura prece-duto dalla barra inclinata. Gra-zie a questo approccio ele-mentare, è facile delimitare laporzione di testo a cui il tag siapplica.

Ad esempio <strong>testo ingrassetto</strong> indica che lafrase contenuta tra i due mar-catori va visualizzata con forza(strong) il che significa in gras-setto, nell'interpretazione abi-tuale del browser Web (può in-vece assumere forme diverse

in browser di natura diversa,come quelli usati sui telefoniniabilitati alla navigazione di sitiInternet).

Nel caso in cui non ci sia al-cun testo tra i due tag, il brow-ser ignorerà il tag e non visua-lizzerà nulla all'interno dellapagina. L'unica eccezione sonoi tag che non prevedono unmarcatore di chiusura e cheperciò producono un effetto inogni caso. Un esempio è il tagdi ritorno a capo <br> che for-malmente dovrebbe esserescritto <br/> al fine d'indicareche si tratta di un tag partico-lare.

Esistono, poi, tag che hannoun tag di chiusura facoltativo eche perciò producono un effet-to anche se manca il testo cor-rispondente. Un esempio clas-sico in questo senso è il tag diparagrafo <p> che produce unritorno a capo con inserimentodi una riga bianca anche se ilparagrafo fosse vuoto. XHTML,il nuovo linguaggio di unisceHTML 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 lasola eccezione del titolo. L'intestazione serve per allegare alla pagina informazioni utiliper i motori di ricerca e per altri scopi. Il documento vero e proprio, visibile alnavigatore, è contenuto tra i tag <body> e </body>

20/88

ria la chiusura di tutte le cop-pie di tag, anche quelle facol-tative, perciò tanto vale abi-tuarsi fin d'ora a chiudere re-golarmente tutti i tag che pos-sono essere chiusi, come vienegià fatto dagli editor che gene-rano codice in automatico.

I tag HMTL possono esserescritti con lettere maiuscole ominuscole indifferentemente,tuttavia la pagina risulterà piùordinata se cercherete di se-guire una regola. Alcuni Web-master preferiscono scriveresempre i tag tutti maiuscoli perdistinguerli più facilmente dalresto del testo (effetto otteni-bile anche con la colorazionediversa offerta da molti editormoderni). Altri preferisconoscriverli tutti minuscoli cosìda essere già compatibili conXHTML, che distingue tramaiuscole e minuscole.

È possibile nidificare diversitag al fine di creare un effettocumulato, in tal caso bisognasempre chiudere per primol'ultimo tag aperto (come av-viene nelle parentesi in mate-matica) e fare molta attenzionea non sovrapporre tag diversi.Ad esempio: <b><i>testo corsi-

vo grassetto </i></b> è correttoperché i tag sono nidificati,mentre <b><i>testo corsivograssetto </b></i> è sbagliatoperché i tag s'incrociano.

Un'altra particolarità impor-tante è che HTML riconosceun singolo spazio, perciò seutilizzate diversi spazi vuoti insequenza per separare tra lorole parole o per far rientrareuna riga rispetto al margine si-nistro, il browser visualizzeràsempre e comunque uno spa-zio solo, a meno che lo abbiateistruito di mantenere esatta-mente il formato originale, conil tag <pre> (preformatted text)usato solitamente per visualiz-zare listati di programma o al-tri testi tecnici. HTML ignoraanche i ritorni a capo e di fattorientri e ritorni a capo servonounicamente per tenere ordinenella pagina e beneficio di chiscrive il codice, ma aggiungo-no caratteri e peso alla stessa.Se vogliamo mandare a capouna riga sulla pagina dobbia-mo usare un tag specifico co-me <br> oppure <p> (che ag-giunge anche una riga bianca).Tutti i ritorni a capo e i rientriprodotti nella pagina HTML

originale ("source" in gergo)con un editor di testi oppureun editor HTML servono uni-camente a tenere ordine visivotra le righe quando le si scrive,ma aggiunge peso inutile allapagina finale. Per tale motivo,una volta completato il lavoro,diversi editor HTML consento-no di eseguire un'ottimizzazio-ne rimuovendo tutti gli spazi ei ritorni a capo superflui. In talmodo, la pagina sarà più legge-ra e veloce da trasferire, masarà anche più difficilmentedecifrabile da parte di terzi. Ingenerale i ritorni a capo forza-ti nel codice (l'insieme di istru-zioni HTML che compongonola pagina) vanno usati con mol-ta prudenza, in particolarevanno evitati in mezzo ai tag,cioè si sconsiglia fortemente diandare a capo lasciando metàdegli attributi associati marca-tore su una riga e metà sullasuccessiva. Molto rischiosal'interruzione di tag che con-tengono link ipertestuali edelementi di tabella. Alcunibrowser generano problemi diallineamento tra le celle di unatabella per il solo fatto chequeste erano state separate da

un ritorno a capo. Perciò,quando notate un comporta-mento strano negli allineamen-ti, provate a rimuovere i ritornia capo in mezzo a quella por-zione di codice.

Anche nel caso del testo, ilconsiglio è di andare a capo so-lo quando si vogliono effetti-vamente separare i paragrafi.A questo riguardo è bene pre-stare attenzione alle funzionidi "a capo" automatico forniteda alcuni editor.

Sono necessarie per leggerechiaramente righe di codicemolto lunghe senza dover con-tinuamente scorrere la paginain orizzontale, ma si dimostra-no deleterie quando realizzateper mezzo di un a capo forzatoche rimane nella pagina in per-manenza. Accertatevi che ilprogramma esegua il "softwrap", cioè il ritorno a capo di-namico delle righeripiegandole a ca-po solo a video,senza l'aggiunta diritorni a capo fisicinel documento. �

(versione integrale dell’articolo sul CD)

proseguesul CDn. 66

2a lezione

21/88

2a lezione

4 Per chi vuole approfondire: i libri consigliati

Usabilità e progetto grafico si fondonoin questo libro di gradevole lettura, checodifica i principi concreti da osservarenella progettazione di una pagina edegli elementi di navigazione di unsito. Ricco di esempi, si dimostreràrivelatorio per molti.Hops, 192 pagine, 33,05 euro.

Manualetto tascabile per tenere aportata di mano i comandi HTML e perimparare i rudimenti del linguaggioquel tanto che basta per aggiornarepagine già fatte da qualcun altro,oppure per produrre pagine moltosemplici.Hops, 264 pagine, 8,26 euro.

Guida intermedia per imparare losviluppo manuale di pagine HTML el’uso appropriato dei tag piùimportanti. Strutturato con una graficafacilmente leggibile, il libro èassimilabile anche da un principiante,pur non essendo elementare. McGraw-Hill, 338 pagine, 18,50 euro.

Ottimo riferimento professionale.Fornisce una preziosa base per latransizione da HTML 4 a XHTML, sia intermini generali, sia nel dettaglio delsingolo tag. Una lettura indispensabileper il Webmaster che voglia costruiresiti duraturi nel tempo.McGraw-Hill, 499 pagine, 33,50 euro.

Corso interattivo sulle basi dellinguaggio HTML e di CSS (fogli distile). Semplice nel linguaggio elimitato agli attibuti fondamentali deidue linguaggi, ottimo per chi cominciagrazie anche alle lezioni contenute suCD.MCGraw-Hill, 236 pagine, 30,00 euro.

Padroneggiare lo sviluppo avanzato diun sito che sia conforme ai nuovistandard XHMTL. Non è una“reference”, bensì un manualeoperativo, ricco di esempi visivi e coninformazioni di qualità. Jackson Libri, 682 pagine, 40,80euro.

Bibbia dello sviluppatore per impararel’uso di JavaScript all’interno di paginedinamiche. Richiede alcune basi diprogrammazione, perciò non è allaportata del neofita. Strumentoindispensabile per un Webmasterprofessionista. Apogeo, 823 pagine, 50,61 euro.

Panoramica delle tecniche per laproduzione di qualsiasi componente disito; dalle pagine HTML, ai contenutimultimediali; audio e video. Utili lesezioni sui CSS (fogli di stile) eJavaScript. Prontuario generale per chinon ha tempo di leggere altro.Apogeo, 392 pagine, 25,31 euro.

Approccio inedito all’usabilitàcondotto da uno specialista italianoche riporta i concetti generali di questanuova disciplina alle peculiarità delnostro Paese. Lettura interessante per allargare ilproprio punto di vista.Apogeo, 170 pagine, 16,53 euro.

Riferimento autorevole sui temi dellanavigabilità di un sito e delle regoleche sottendono qualsiasi sistema dinavigazione. Da conoscere prima diaffrontare la progettazione di un nuovosito o prima di eseguire il restyling diuno esistente.Hops, 334 pagine, 25,31 euro.

Nonostante il titolo questo è unvolume ricco d’informazioni utili econsigli che possono servire anche alprofessionista. Affronta in dettaglioquel che un Webmaster dovrebbesapere per rapportarsi con fornitoriesterni. Apogeo, 404 pagine, 18,59 euro.

Unico manuale oggi disponibile initaliano sulla nuova versione di GoLive(integrata nel CD di questo numero).Copre tutte le funzioni di uso comunedel programma, con svariati esempi econsigli validi per Mac e per Windows.Jackson Libri, 299 pagine, 36,00euro.

INDISPENSABILE

INDISPENSABILE

INDISPENSABILE

INDISPENSABILE

INDISPENSABILE

22/88

2a lezione

La costruzione di una paginaHTML equivale alla battitu-ra di un testo con una tele-

scrivente. Il browser costrui-sce la pagina leggendo in se-quenza ciascuna riga, caratte-re per carattere. Combinando icomandi e i contenuti che tro-va lungo il percorso, arriva allafine a produrre l’impianto de-siderato.

Ogni cosa che si trova nellapagina è di fatto un carattere ditesto che esprime un coman-do, indica la posizione diun’immagine e le relative di-mensioni, descrive un linkesterno, indica un testo da vi-sualizzare, stabilisce la posi-zione dei diversi elementi.

Si dice tecnicamente cheogni elemento è inline, vale adire si trova inserito in una ri-ga sequenziale e non può esse-re letto prima che siano statiletti gli altri caratteri che loprecedono.

Poiché nasce per visualizza-re testo che fluisce in conti-nuo, HTML non prevede alcu-na funzione per “impaginare”gli elementi, ossia per collo-carli in una determinata posi-zione nella pagina, all’interno

di riquadri o colonne che ab-biano proporzioni ben definiterispetto al resto.

Se ci affidiamo agli strumen-ti base del linguaggio, l’unicaforma di pagina possibile sa-rebbe un testo chilometrico,occasionalmente interrotto daun’immagine o da un link versoaltri documenti.

Talvolta questo può ancheessere sufficiente, come neiprimi siti universitari e amato-riali che si sono visti sul Web.In tal caso non dovete far altroche iniziare a inserire il testo ele immagini in sequenza nellazona compresa tra il tag<body> e il suo gemello</body> che, come abbiamodetto, delimitano l’inizio e la fi-ne del documento vero e pro-prio.

Nella maggior parte dei casi,però, si vuole un’impaginazio-ne più raffinata, che divida lapagina in aree ben distinte, cia-scuna con elementi propri, co-me ad esempio la struttura aquattro pannelli che abbiamovisto nei modelli d’impostazio-ne della pagina. In tal caso, pri-ma ancora di cominciare a in-serire il contenuto, ci serve

una struttura capace di conte-nerlo. Le scelte possibili sonotre: tabella, frame e form. Inrealtà esiste anche la possibi-lità di collocare gli elementimediante le funzioni di posi-zionamento dei fogli di stile incascata, CSS, ma queste ultimenon sono supportate da tutti ibrowser e ne parleremo, piùavanti, quando affronteremo iltema dei fogli di stile.

Il più diffuso e versatile deitre sistemi sono le tabelle, per-ché compatibili con tutti ibrowser e prive di controindi-cazioni in materia di usabilità edi estetica. Se le configuriamosenza bordo, le tabelle diven-tano una specie di griglia invi-sibile che tiene al loro posto ivari elementi della pagina, im-magini e testo. Gli unici svan-taggi delle tabelle sono il nongarantire l’assoluta stabilitàdelle dimensioni e delle pro-porzioni tra i componenti e ladifficoltà d’implementazione.

Particolarità dei frameI frame sono invece più faci-

li da realizzare e offrono uncontrollo molto più rigorosodegli spazi. Tuttavia presenta-

no importanti svantaggi di usa-bilità e di estetica. Dividono lafinestra in diversi riquadri, cia-scuno contenente una paginaWeb indipendente, perciò di-venta impossibile far funziona-re i tasti di navigazione in avan-ti e all’indietro del browser. In-fatti, con tre o quattro paginecontemporaneamente presentia video, non è chiaro quale siala pagina in cui ci troviamoesattamente e in quale dei di-versi riquadri debba essere ca-ricata quella a cui si vuole ri-tornare. Inoltre, anche nel defi-nire le istruzioni di navigazionenel sito, dobbiamo sempre in-dicare in quale pannello inseri-re la pagina a cui il link è indi-rizzato, il che complica un po-co i collegamenti ipertestuali.

In materia di stampa si puòstampare un solo riquadro pervolta e il browser non sa qualesia quello giusto a meno cheglielo indichiamo noi usandouna complessa sequenza con iltasto destro del mouse, benpoco amichevole per il naviga-tore comune. Infine la dimen-sione rigorosamente bloccatadei riquadri può anche diven-tare un problema quando lapagina esce dai contorni del vi-deo e diventa necessario ese-guire lo scrolling verticale. Intal caso compariranno unabanda di scorrimento verticalee orizzontale (a seconda delladirezione in cui il contento de-borda rispetto al progetto ori-ginale) che sfigurano la paginae ne complicano l’uso.

Form per la registrazioneI form o moduli servono a

formattare un particolare ge-nere di pagina, quelle utilizzateper raccogliere informazionidal navigatore. Hanno il tipicoformato di un formulario dacompilare, con una serie di ca-selle accompagnate dalle rela-tive etichette esplicative, piùeventuali menu a tendina dacui scegliere voci già reimpo-state oppure caselle da barra-re per operare scelte immedia-te. Sono compatibili con ognigenere di browser possono es-sere a loro volta incapsulati al-l’interno di tabelle o frame, manon è indispensabile. �

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

Fig. 1 Esempio di un'impaginazione tabellare. L'immagine che segue si riferisce a una pagina Web costruita usando una complessagriglia 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 cheesiste una tabella principale esterna che ne contiene altre che a loro volta ne contengono altre in uno schema di scatole cinesi

1 2

23/88

Con la nuova versione delsuo celebre ambiente disviluppo integrato, Adobe

consolida una soluzione che èparticolarmente mirata all’inte-grazione tra editoria su cartastampata ed editoria sul Web,aggiungendo anche funzioniper la produzione di contenutimultimediali e mobili, cioè davisualizzare su telefonino ePDA in alternativa al computer.Il quadro competitivo rispetto aDreamweaver, l’antagonista disempre, è migliorato drastica-mente sia con l’aggiunta di unadoppia vista che abbina in con-temporanea codice e strutturagrafica, sia con l’aggiunta difunzioni per il coordinamentodel lavoro di gruppo che sonoinvece assenti dalla piattafor-ma Macromedia.

Migliorata drasticamente an-che l’integrazione con gli altriprodotti Adobe che vanno acomporre la Creative Suite, in-fatti GoLive 6.0 oggi può impor-tare livelli di Photoshop, illu-strazioni vettoriali di Illustra-tor e animazioni di LiveMotion2.0. Mantenuta infine l’integra-zione con InDesign, il pacchettodi videompaginazione per l’edi-toria tradizionale che consenteun efficace passaggio dei con-tenuti dalla carta al Web e vice-versa.

Al momento esistono duesuite che si contendono il mer-cato dei creativi che cercano unambiente editoriale completa-mente integrato: Adobe Creati-ve Suite, più orientata al mondodei creativi tradizionali chehanno bisogno di un efficientesbocco sul Web, e MacromediaStudio MX che si rivolge invecea un ambiente puramente Webe che coordina la generazionedi siti statici e dinamici, conparticolare enfasi sui linguaggidi scripting e sullo sviluppo diapplicazioni.

Particolarità dell'interfacciaGoLive si differenzia da qual-

siasi editor visuale per il fattodi offrire una grande varietà diviste per lavorare sul docu-mento oppure sull’intero sito. Il

programma identifica quattrocategorie di elementi e forniscestrumenti ad hoc per ciascuna.Le categorie sono la pagina nelsuo complesso, il codice sor-gente (HTML o di altro tipo), ilsito e le funzioni avanzate, co-me ad esempio i fogli di stile.

La prima categoria di oggettiè la più comune e contiene lapagina con tutti i relativi com-ponenti: tabelle, moduli, testo eimmagini. La sua lavorazione èimperniata su una finestra diLayout che ne mostra una ver-sione grafica modificabile.

Lavorando con il mouse e imenu, è possibile inserire, can-cellare, spostare e ridimensio-nare qualsiasi elemento, osser-vando il risultato immediato avideo. Le tecniche di lavoro so-no due: inserire gli oggetti at-tingendo dalla palette dedicata,oppure costruire una griglia vi-siva su cui poi collocare dei se-gnaposto per gli oggetti.

La griglia, che assomiglia alla“gabbia“ d’impaginazione diuna pagina su carta, si trasfor-ma poi automaticamente in ta-bella, collocando tutti gli ele-menti al posto giusto. Questaparticolare modalità progettua-le, molto vicina al sistema di la-voro di un progettista grafico,non è presente in nessun altro

editor HTML e viene fornita dalconcorrente principale, Dream-weaver MX, solo grazie all’im-piego di un prodotto comple-mentare esterno, Fireworks MX.

Il secondo elemento di lavo-ro che ci accompagna ovunqueè la finestra Inspector che mo-stra i parametri di qualsiasi og-getto selezionato permettendo-ci di modificarli senza interve-nire manualmente sul codice.

Si notano anche alcune fi-nezze nella finestra Layout: il ti-tolo della pagina è immediata-mente accessibile nella cornicesuperiore della finestra diLayout e può essere modificatodirettamente (come avviene an-che in Dreamweaver), ma quipossiamo anche estendere ilbordo superiore e accedere atutti gli altri elementi dell’inte-stazione (head), senza doverscorrere il listato HTML comeinvece accade in altri editor.

In basso alla finestra, comein Dreamwaver, abbiamo l’indi-cazione della larghezza in pixeldella pagina su cui stiamo lavo-rando.

Rispetto alla versione prece-dente, ora è anche possibileaprire una finestra di esplora-zione del codice immediata-mente sotto alla finestra diLayout così da vedere in che

Identikit� Adobe GoLive 6.0 si collocacome il secondo ambiente disviluppo integrato per l'impiegoprofessionale sul Web. Rispetto alsuo concorrente diretto,Dreamweaver MX, offre funzioni piùevolute di gestione delle tabelle,d'integrazione la carta stampata edi gestione di gruppi di lavoro.L'aggiunta di una vista del codice inparallelo alla vista graficastrutturale colma una lacuna che lovedeva in svantaggio rispetto alleversioni precedenti di Dreamweavere consente di avere due vistecontemporanee della stessapagina: una con il codice e una conla struttura grafica della stessa. Èpossibile agire su una qualsiasidelle due, osservando subito icambiamenti riportati nell’altra.Idoneo per chi viene dal mondodella grafica tradizionale e vuolecreare siti oppure travasare lavoroeditoriale sul Web senza traumi.Forti anche le funzioni di gestione dicontenuti multimediali, grazieall'integrazione con LiveMotion. Èun prodotto complesso conun'interfaccia singolare e richiedeun certo impegno per poternesfruttare a fondo le caratteristiche.Ottime le funzioni di gestioneintegrata del sito. Dreamweaver, inconfronto, appare più orientato allosviluppatore di siti che centra granparte della propria attività sullaproduzione di codice esull'integrazione con database. � Pro- Eccezionale gestione delle tabelle- Ottima palestra formativa.- Vista contemporanea sul codicegenerato e sulla disposizione deglielementi sulla pagina.

- Unisce efficacemente il lavoro dicreatività e di produzione tecnica.

- È disponibile su diversi sistemioperativi, compreso Macintosh.

- Viste inedite sulla gerarchia delsito e sulla struttura della pagina.

- Offre ricchi strumenti per lagestione di un intero sito.

- È compatibile con gli standard piùrecenti

� Contro- Complesso da imparare.- Richiede un computer abbastanzapotente.

- Il codice generato con gli strumentigrafici richiede occasionalmenteverifica manuale.

- Finestra di codifica diretta piùdebole rispetto ad altri editor

Produttore e sito: Adobe - www.adobe.comRequisiti: Windows 98SE, ME, 2000 con Service Pack 2, XP, per lafunzione Web Workgroup Server è richiesto Windows 2000 o XPCosto licenza: 589,50 euro, 146,20 per l’upgrade da una versioneprecedente. Adobe Creative Suite Premium, che include anche Photoshop7.0, Illustrator 10, InDesign 2.0, Premiere 6.5 e Acrobat Distiller 5.0Prezzo: 2158,80 euro IVA compresa

Caratteristiche

6 Adobe GoLive 6.0 maestro di tabelle

Errata: segnaliamo un'imprecisionenella prova di Dreamweaver MXpubblicata lo scorso numero: il prezzodel prodotto Macromedia è 574,80euro, e 286,80 euro per l'upgrade

2a lezione

24/88

modo le variazioni apportategraficamente si traducono inistruzioni HTML e, viceversa,per vedere come una modificamanuale dei tag si ripercuotasulla finestra di Layout che fun-ziona come una sorta di ante-prima immediata e modificabile.

Questa visualizzazione dop-pia e contemporanea emulauna prerogativa che finora èstata unica di Dreamweaver.

La differenza tra i due è cheAdobe GoLive non visualizzanella finestra Layout l’effettoprodotto dagli eventuali fogli distile, ma dispone in compensodi una finestra di Anteprima in-terna al programma che visua-lizza immediatamente la pagi-na nella sua struttura finale, in-vece di dover aprire una fine-stra esterna allo scopo comeaccade in Dreamweaver.

Un altro modo unico di GoLi-ve per visualizzare il codice sor-gente a fianco della finestraLayout consiste nella palette delCodice Sorgente. Una finestrellaridimensionabile che si apre so-pra la vista Layout e mostra laporzione di codice che corri-sponde all'area selezionata. Ilterzo modo possibile consistenell'apertura di una speciale fi-nestra denominata Visual TagEditor che mostra la codifica delparticolare tag su sui è posizio-nato il cursore e consente dimodificarlo agendo direttamen-te su quella particolare porzio-ne di codice sorgente.

Operare direttamente sul codice

Esiste anche, naturalmente,la finestra per l’editing testualea tutto schermo. Si chiama fi-nestra Origine e prevede la co-lorazione dinamica degli ele-

menti di programma distinta-mente dai tag HTML e dal te-sto. Qui, a differenza di altriprogrammi abbiamo la possibi-lità di scegliere al volo, me-diante icone, che cosa colora-re: i marcatori distinti dai rela-tivi attributi e distinti dal testo,gli elementi nel loro insieme(cioè tag, più attributi più testocontenuto all’interno del tag), isoli collegamenti, il codice ese-guibile su server. In questo mo-do è possibile eseguire analisiselettive delle diverse compo-nenti della pagina e interveniredi conseguenza.

Alla pari di altri ambienti,troviamo la possibilità di vi-sualizzare i numeri di riga e diattivare un a capo automatico(soft wrap) delle righe in mododa non dover eseguire lo scrol-ling orizzontale e al tempostesso non modificare il codicecon l’aggiunta di a capo per-manenti.

L’inserimento di qualsiasielemento HTML è affidato allastessa palette di oggetti cheabbiamo visto nella finestraLayout e anche qui possiamousare il selettore di colori perqualsiasi elemento colorabiledella pagina. La finestra Inspec-tor perde invece di utilità.

Rispetto a Dreamweaversentiamo la mancanza di una fi-nestra grafica d'impostazionedei parametri di ciascun tag,sensibile alla posizione del cur-sore, e il completamento auto-matico dei tag in fase di digita-zione diretta.

Superlativa invece la gestio-ne delle tabelle, quasi del tuttoautomatizzata, con completa-mento automatico degli ele-menti mancanti e con importa-zione diretta di qualsiasi gene-

re d'informazioni tabellari, ver-sate automaticamente in unatabella con il numero giusto dirighe e di celle.

Nella manipolazione delle ta-belle GoLive non è secondo anessuno.

Funzioni speciali del programma

Unico nel suo genere, GoLivefornisce altre due viste parti-colari dedicate esplicitamenteall’analisi dei frame (riquadri) edella struttura del documento(in particolare le tabelle).

In pratica, compare un edi-tor strutturale che mostra le re-lazioni gerarchiche tra i varielementi della pagina oppuretra i riquadri di un frame, con-sentendo di modificare diretta-mente gli attributi di ciascunoe di correggere eventuali erro-ri, spesso difficili da notare nel-la vista Origine, dove le molte-plici righe di codice oscurano ildisegno strutturale che sta die-tro alla pagina. Le modificheapportate nell’editor di strut-tura di tabelle o frame si mo-strano, poi, direttamente nellealtre finestre.

La progettazione del sitoQuesto è un dei punti di for-

za di GoLive che, alla pari diDreamweaver, consente di te-nere sotto controllo tutti glielementi del sito, creare tem-plate modello per tutte le pagi-ne, ispezionare graficamentelink e gerarchie e modificarequalsiasi elemento nel sito conun doppio clic. Una prerogativaunica di GoLive è tuttavia quel-la di disegnare il sito da zero,su uno schema grafico che vi-sualizza tutti i possibili ele-menti. Lo schema può essere

stampato ed esportato per sot-toporlo all'approvazione delcommittente oppure semplice-mente per tenere una docu-mentazione delle varie fasi.

Una volta che lo schema ècompleto, il programma gene-ra automaticamente tutte le pa-gine e gli oggetti corrisponden-ti, tenendo traccia dei link pre-visti che saranno aggiunti a ma-no a mano che inseriamo con-tenuti nelle pagine così create.Un esempio in questo senso èfornito dall'esercizio presentesul CD Guida.

Il lavoro di gruppoUn'altra area di netta diffe-

renziazione rispetto aDreamweaver è la gestionecoordinata del lavoro di grup-po. Utilizzando una tecnologiaresidente su server, GoLive tie-ne traccia di chi sta lavorandosul documento in un certoistante e di tutte le versioni rea-lizzate. In tal modo, si evitanovariazioni conflittuali e si puòprocedere allo sviluppo paral-lelo dello stesso sito da parte diun team di professionisti.

La funzione, denominataWorkgroup Server, è totalmen-te gratuita e integrata nel pro-gramma base. La tecnologiacorrispondente di Macromediaprendeva il nome di Sitespringed è stata abbandonata primadel rilascio di Dreamweaver MXsenza fornire nel frattempo al-ternative percorri-bili, perciò GoLive èl'unico ambiente disviluppo sul merca-to che consentauna gestione effica-ce di un team. �

(versione integrale dell’articolo sul CD)

Fig. 1 Anche Adobe GoLive 6.0, alla pari di Dreamweaver, consente di visualizzare contemporaneamente la vista Layout (struttura) e la vista Origine (codice) modificandoliberamente 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 manipolarecon 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 fasciamedio-alta. Questa vista rimane comunque meno potente della corrispondente vista Codice di Dreamweaver MX. Fig. 3 La vista struttura mostra un'analisi strutturale deldocumento 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 perla creazione di pagine Web

1 2 3

proseguesul CDn. 66

2a lezione

25/88

3a lezione

Cominciamo la nostraesplorazione in detta-glio del linguaggio

HTML dalle tabelle, un temache non viene mai affrontatoper primo nei testi e nei cor-si su questo linguaggio, in ra-gione della sua complessità,ma che a nostro avviso è ne-cessario invece conoscere dasubito al fine di progettarepagine funzionali. Oltre allaloro funzione primaria, checonsiste nel rappresentareinformazioni tabulari, le ta-belle costituiscono il più dif-fuso sistema di "impaginazio-

ne" per le pagina Web.Funzionano come una gri-

glia invisibile, che suddividelo spazio della pagina in con-tenitori ben definiti in cui ri-versare testo e immagini.

Il professionista perciò ini-zia il proprio lavoro su unapagina vergine proprio dallaprogettazione della tabella eprosegue, poi, con il riversa-mento dei contenuti e l'ag-giunta degli elementi stilisti-ci.

Come qualsiasi altro ele-mento HTML, anche le tabel-le operano nella logica della

"telescrivente", ossia vengo-no lette dal browser un ca-rattere alla volta, dall'iniziodalla fine della riga, per poicominciare con la riga suc-cessiva.

Non esiste modo di saperecome una tabella sia esatta-mente composta fino a che ilbrowser non è arrivato in fon-do alla lettura dei vari tagche la compongono.

Basta un tag sbagliato op-pure mancante, per scombi-nare l'intera pagina e render-la incomprensibile al suostesso progettista.

Inoltre, come qualsiasi al-tro elemento HTML, le tabel-le cambiano il proprio fun-zionamento a seconda dellaversione di browser utilizza-to e del modo in cui il codiceoriginale è stato scritto.

Codifiche teoricamenteequivalenti e sintatticamentecorrette possono produrre ri-sultati visibilmente diversi.

È proprio in questo ambitoche i cosiddetti editor HTMLvisuali mostrano le maggioridifferenze producendo in au-tomatico codice HTML chetalvolta va rivisto riga per ri-

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

Aggiunte inedite alla prima lezionedisponibili solo sul CD di questo numero:

• Organizzazione delle informazioni• Costruzione della mappa – gerarchia,

ipertesto, struttura lineare• Strumenti di navigazione• Sistemi di navigazione• Sistemi di labeling

Lezione 2:Siti statici e linguaggio HTML

• Progettare un sito statico • Progettare la pagina• Pagine HTML e marcatori • Strutturare i contenuti della pagina

• Adobe GoLive 6.0

Contenuti aggiuntivi sul CD

• Versioni integrali e complete degli articolipubblicati sulla rivista

• Spiegazione dei tag HTML per una paginavergine

• Esercizi su come creare una paginavergine e su come progettare un sito

Lezione 3:Modelli di pagina e tabelle

• La tabella come elemento strutturale:comporre gli elementi della paginautilizzando una tabella di riferimentoinvisibile

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

Contenuti aggiuntivi sul CD

• Dimensionare tabelle e celle fluide,

dimensionare tabelle con celle miste,allineamento spontaneo delle tabelleconsecutive

• Template con struttura complessa: come creare tabelle complesse

• Template con tabelle nidificate: tabellenidificate in cascata, complessee consecutive

• Esercizi: esplorare i tag delle tabelle,creare una tabella semplice con HTML-Kit

Le prossime puntate:

Lezione 4 - febbraio 2003:HTML 4.01 e CSS

Lezione 5 - marzo 2003:Design e multimedialità

Lezione 6 - aprile 2003:Siti interattivi

Lezione 7 - maggio 2003:Interazione sul server

Lezione 8 - giugno 2003:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Roberto Mazzoni

�

il corso èsul CDn. 67

� A scuola con PC Open

ProgettoWebMaster1 La tabella come elemento strutturale

26/88

3a lezione

ga dal progettista per elimi-nare gli "errori" introdotti dalprogramma.

La corretta gestione delletabelle è quindi una vera epropria arte e costituisce unodei pilastri essenziali su cui siregge il lavoro di chi costrui-sce siti. A differenza delle ta-belle costruite da un foglioelettronico o da un wordpro-cessor, che hanno righe e co-lonne ben identificate e rego-labili singolarmente, le tabel-le HTML sono semplicemen-te sequenze di righe e di cel-le all’interno di tali righe.

Non esiste alcun marcato-re per definire le colonne inquanto tali e il concetto stes-so di colonna viene simulatograzie all'intervento delbrowser che, combinando di-verse celle appartenenti a ri-ghe consecutive, crea l'im-pressione di un'unità vertica-le.

La tabella in quanto taleviene costruita dal browsercombinando i vari tag che de-finiscono una serie di righesequenziali che contengonouna serie di celle le quali,combinandosi con quelle dipari posizione nella riga pre-cedente e nella riga successi-va, danno l’impressione diformare colonne verticali,che in realtà non esistono.

Il browser intraprende al-cune azioni autonome per ag-giustare e modificare l'aspet-to originale delle celle in mo-do da creare un risultato rite-nuto migliore, ma che po-trebbe anche essere diversodall'intendimento originaledel progettista.

Alcune regole da teneresempre a mente

Qualsiasi dimensione speci-ficata per la tabella e per lecelle dal progettista viene in-tesa dal browser come dimen-sione minima e puramente in-dicativa. Nel caso in cui abbia-mo indicato unicamente la lar-ghezza della tabella, comeconsigliato da alcuni, questasarà ripartita tra le diverse cel-le, in parti più o meno uguali esarà quindi modificata dalcontenuto inserito (immagineo testo).

La larghezza di una rigacoincide sempre con la lar-ghezza della tabella o con lasomma delle larghezze specifi-cate per le celle che la com-pongono. Non esiste modo per

definire la larghezza della rigain quanto tale.

Nel caso in cui tale sommasuperasse la larghezza speci-ficata in origine per la tabella,quest'ultima si allargherà peradattarsi (qualsiasi cosa defi-nito a livello di cella ha sem-pre la precedenza su tutto ilresto). La più grande dellecelle di una colonna determi-na la larghezza di tutte le altredi quella colonna, anche seavessimo esplicitamente in-dicato larghezze inferiori perle altre celle di quella colon-na.

Nella pratica è sufficienteindicare la larghezza di unasola cella della colonna affin-ché tutte le altre si adattino diconseguenza.

Se inseriamo nella cellaun'immagine che ne supera ledimensioni, la cella si allar-gherà automaticamente in mo-do da contenere l'immagine in-serita e farà allargare tutte lecelle che corrispondono allastessa colonna.

L'allargamento porteràpressione sulle celle circo-stanti riducendone le dimen-sioni originali, se tuttavia an-che queste contenesseroun'immagine, incomprimibileper definizione, l'intera tabelladeborderebbe oltre i limiticonsentiti.

Le immagini hanno una for-tissima influenza sul compor-tamento delle tabelle tantoche per lungo tempo i proget-tisti Web le hanno usate comestrumento di costruzione del-la pagina, ben sapendo cheun'immagine non può esserené allungata né compressa eche perciò la cella in cui essa ècontenuta rimarrà stabilequalsiasi cosa succeda al re-sto della tabella.

Il trucco delle immaginispaziatrici

Il trucco classico consistenel prendere un'immagine dicolore invisibile larga un pixele quindi dimensionarla (altez-za e larghezza) all'interno del-la cella di cui vogliamo bloc-care le dimensioni.

Di solito viene inserita nel-l'ultima riga della tabella, cheper il resto rimane vuota, cosìda condizionare tutte le altrecelle presenti nella stessa co-lonna.

Lo stesso trucco può essereripetuto su più celle fino abloccare l'intera tabella.

Ventisei anni, romano, MarcoLeli appare un giorno nellanostra community per fornire ilsuo commento al nostro corsoper diventare Webmaster. Lettore “affezionato” di PCOpen (ci segue dal 1999),partecipa alla vita dellacommunity da spettatore per unpo’, finchè decide di gettarsinella mischia...e noi loacciuffiamo subito: “che ne dicidi fare quattro chiacchiere connoi per raccontarci la tuaesperienza?”. All’inizio unacerta ritrosia, poi la tentazionedi apparire “sulla rivista diinformatica preferita” ha lameglio.Marco è iscritto alla facoltà diIngegneria Informaticadell’università capitolina LaSapienza ma gli studi vivonouna fase di stallo “L’universitàstava andando un po’ per lelunghe, quindi ho iniziato apensare cosa sarebbe statomeglio fare e a guardarmi unpo’ in giro; è capitatal’occasione e ho deciso difrequentare un corso promossodalla Regione e dalla Comunitàeuropea per Progettista diapplicazioni multimediali”. QuiMarco prende dimestichezza eapprofondisce gli argomentiche si ritrovano anche nelprogramma del nostro corso:HTML, Javascript, Dreamweavere Flash, fondamenti diprogrammazione e ASP. Il corsotermina con uno stage di centoore presso una giovane aziendache sviluppa siti Internet.“All’inizio mi sono occupatoprincipalmente dello sviluppo inHTML, ma poi dall’azienda mi

veniva richiesta la conoscenzadi PHP/Mysql. Grazie al loroaiuto (e pazienza) e un po’ diapplicazione, ho iniziato aimpratichirmi con questoambiente di sviluppo”. E anchese Marco consiglia di nonaffezionarsi mai a nessunatecnologia e di usare, volta pervolta, quella più utile alleesigenze, si capisce da quelloche dice che il suo cuore batteper il Pinguino. “Linux èindubbiamente un sistemadifficile da usare, non èintuitivo come l’ambienteWindows, crea più problemiquando si devono utilizzareperiferiche, i driver non sonosempre facili da trovare, maindubbiamente la filosofia chesta dietro il sistema ha ungrande fascino e poi c’è ilvantaggio che è gratuito”.E secondo Marco, su cosa valela pena di investire?“Approfondire la tecnologiaFlash, che mi sembra abbiagrosse potenzialità: èabbastanza portabile, gira siasotto Windows sia sotto Linux eha un buon supporto per laprogrammazione: credo chepotrebbe essere piuttostorichiesta dal mercato”.Sogni nel cassetto, programmiper il futuro? “Non hoparticolari progetti” rispondeMarco “Spero di averel’opportunità di approfondire ilsettore di cui mi sto occupandoadesso: seguire lo sviluppodelle tecnologie per ilcommercio elettronico, magaririprendere l’università e intantoprendermi la laurea di primolivello”. Daniela Dirceo

Un futuro ingegnerecol Pinguino nel cuore

�

HTML costruisce le tabelle secondo una sequenza lineare, come se fosse unatelescrivente: una cella dopo l'altra sino a completare la riga e quindi ritorna all'iniziodella riga successiva e riprende la costruzione fino a terminare la tabella. Solo alla finedell'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è zep-pa oppure immagine spaziatri-ce in italiano) è tutt'ora in uso,ma presenta l'inconveniented'inserire elementi estraneinella tabella e di perdere l'effi-cacia qualora il navigatoreavesse disattivato la visualiz-zazione delle immagini sulproprio browser.

L'uso delle immagini spazia-trici è considerato peccatograve dai puristi, ma è sicura-mente utile in alcune circo-stanze.

La flessibilità delle tabelle,se conosciuta e governata,può trasformarsi in un pregioprogettuale portando a quelloche viene definito progetto"fluido" o "liquido", vale a dire

una struttura della pagina ca-pace di adattarsi alla risolu-zione del monitor su cui è vi-sualizzata.

La regola generale è co-munque di mantenere piùsemplici possibili le tabellestrutturali, usandole solo do-ve necessario ed evitando, sepossibile, di nidificarne, ossiadi innestare una tabella den-

tro l'altra. Una pagina compo-sta di tabelle molto comples-se e incapsulate l'una nell'al-tra finisce per essere pesantee per richiedere tempo primadi poter essere elaborata e vi-sualizzata dal browser, senzacontare le possibilità di erro-re, che si moltiplicano al cre-scere del numero di tag utiliz-zati. �

�

Come creare una tabellaAbbiamo costruito una tabella composta da due righe di tre celleciascuna assegnando alla tabella nel suo complesso una larghezzainterna di 400 pixel (incluso il bordo).

Fase 1: la tabella è completamente vuota e lo spazio viene ripartitoequamente tra le tre celle che diventano ciascuna di 130 pixel.La loro somma ci dà 390 pixel, gli altri 10 pixel che mancano perarrivare a 400 sono utilizzati per il bordo della tabella, largo 1 pixel didefault 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 singolecelle, il browser cerca di ripartire equamente lo spazio assegnatoalla tabella nelle varie colonne.

Fase 2: inseriamo il testo e notiamo come questo influenza ladistribuzione naturale degli spazi. La seconda cella della prima riga siallarga per adattarsi a una scritta che è più lunga delle altre due edetermina anche l'allargamento automatico della cella seguente cheappartiene alla stessa colonna. Adesso la ripartizione degli spazi,attuata automaticamente dal browser è di 120, 150 e 120 pixel. Laseconda colonna si è allargata a spese delle altre due. La tabellamantiene le sue dimensioni originali.

Regola: il testo inserito nelle celle ne influenza la dimensioneoriginale a meno di aver indicato una larghezza fissa per la singolacella, in aggiunta alle indicazioni di larghezza della tabella.Lo spazio viene ripartito in modo diverso tra le celle in funzionedel contenuto e si applica in modo uniforme a tutte le celle diquella colonna, mantenendo invariata la larghezza complessivadella tabella.

Fase 3: forziamo la dimensione della prima cella della prima rigaindicando, a livello di cella singola, una larghezza di 200 pixel (a cui siaggiungono i 4 pixel del bordo destro e sinistro all'esterno).La cella e la relativa colonna si allargano indipendentemente dalcontenuto e costringono le altre due celle a restringersi. Queste però sirestringono diversamente in funzione del testo contenuto. Lasituazione finale è la seguente: 204, 104 e 82 pixel.

Regola: l'impostazione di larghezza definita a livello di singolacella ha la priorità sulle impostazioni di larghezza della tabella esul testo eventualmente contenuto. Basta impostare la larghezzadi una sola cella per modificare l'intera colonna a cui appartiene.

Fase 4: aggiungiamo un'immagine larga 179 pixel e alta 56 pixel nellaterza cella della seconda riga. Le altre due colonne si restringono, main modo diverso. La prima colonna, per la quale avevamo specificatouna larghezza obbligata di 200 pixel si riduce a 146 pixel, mentre la

seconda colonna, che in origine era la più larga avendo anche il testopiù lungo, ma per la quale non abbiamo indicato nessuna larghezzaminima, si restringe al punto di mandare il testo a capo e determinarein tal modo una maggiore altezza per tutta la prima riga. La tabellamantiene comunque le sue dimensioni originali e la ripartizione deglispazi adesso è: 146, 61 e 183 pixel (179 dell'immagine più i quattrodi contorno).

Regola: un’immagine grafica ha sempre priorità rispetto al testo erispetto a qualsiasi impostazione di larghezza definita per lesingole celle o per la tabella nel suo complesso. La presenza diun'immagine determina in modo immutabile la dimensione dellacella, della riga e della colonna a cui questa appartiene.

Fase 5: aggiungiamo la stessa immagine anche nella seconda celladella seconda riga il che determina l'espansione della secondacolonna per intero alle dimensioni dell'immagine e il restringimentodella prima colonna ai minimi termini, però insufficienti a mantenere ledimensioni originali della tabella che deborda oltre il limite imposto di400 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 qualcaso la tabella si allargherà per adattarsi alle nuove misure. La presenza di elementi grafici in una cella ne blocca ledimensioni impedendone la compressione.

28/88

3a lezione

Una volta creata la nostrapagina vergine siamo pron-ti a costruire la struttura di

layout in cui inserire successi-vamente i contenuti.

Abbiamo scelto le tabelle co-me strumento d'impaginazioneperché garantiscono maggiorecompatibilità con i diversi tipidi browser e anche il miglior ef-fetto estetico. A questo punto sipresentano alcune alternative.La prima è decidere se incapsu-lare l'intera pagina in una gran-de tabella che poi ne conterràaltre, oppure se ridurre al mini-mo la quantità di tabelle pre-senti nella pagina facendo affi-damento sullo spontaneo alli-neamento delle stesse tra loro esulla possibilità di affiancarle esovrapporle a paragrafi e im-magini che fluiscano liberamen-te nella pagina.

Il primo approccio è anche ilpiù diffuso perché consente unmiglior controllo degli elementie si presta particolarmente allaproduzione di template (paginemodello) per un sito dinamico.Infatti, i template di un sito di-namico sono privi dei contenu-ti che altrimenti sarebbero ne-cessari per tenere al loro postole tabelle in una pagina a strut-tura libera, perciò è difficile ve-dere durante la progettazionequale sarà il risultato finale e nelmomento di generare la paginain automatico prelevando i con-tenuti dal database, si otterran-no risultati variabili al cambiaredei contenuti forniti.

Il secondo approccio, checonsiste nel lasciare la pagina li-bera da una struttura generale eincapsularne solo alcune parti,è preferito dai puristi perchéconsente di mantenere le pagi-ne più leggere e più semplici.Inoltre, alcuni browser delleprecedenti generazioni aveva-no la brutta abitudine di aspet-tare il caricamento e l'elabora-zione dell'intera tabella globaleprima di visualizzare la pagina.Sezionando la pagina in tabelleautonome, la generazione è piùrapida sia perché le prime partidella pagina appaiono subitomentre il browser sta ancora la-vorando all'elaborazione dellesuccessive sia perché la sem-plicità delle tabelle richiede po-co impegno elaborativo albrowser prima della visualizza-zione. Poiché il primo approc-

cio è comunque sempre più dif-fuso grazie al diffondersi dei si-ti dinamici, i principali browsermoderni dispongono di una fun-zione che riduce il ritardo di vi-sualizzazione e che si chiama"rendering progressivo".

Il programma comincia a vi-sualizzare i primi elementi dellatabella prima di averla caricataper intero. In tal modo, i primielementi di una pagina lunga ecomplessa appariranno imme-diatamente, così da riempire lafinestra video che il navigatoresta osservando e dando l’ideache la pagina sia disponibile perintero. In realtà, il browser staancora lavorando dietro le quin-te per completare l'elaborazio-ne della tabella e comporre laporzione inferiore della paginacosì che sia pronta quando de-cideremo di eseguire lo scrol-ling. Di contro può succedereche la pagina compaia inizial-mente con un determinato as-setto che si modifica dopo alcu-ni secondi quando il browser haterminato la lettura della tabel-la nel suo complesso. L'unicoaccorgimento da adottare nelprogettare una pagina inseritain una tabella globale sfruttan-do il rendering progressivo è dicreare i primi elementi in modoche non siano indipendenti dalresto della tabella. Tipicamentelo si fa creando una prima ta-bella orizzontale larga nidificatanella tabella primaria e largaquanto l’intera pagina che con-tenga la barra del logo e i primielementi di navigazione del sito.

Dopo di che si prosegue ascendere con una serie di tabel-le che si compongano da sini-stra a destra e dall’alto verso ilbasso. Qualunque sia la solu-zione adottata, vale comunqueil criterio di ridurre le tabelle alminimo e, in particolare, di ri-durre la nidificazione progressi-va delle tabelle (inserimento diuna tabella in un'altra) perchéuna pagina troppo complessarichiede al browser molto tem-po per essere elaborata e puòprodurre errori inaspettati.

Fluido, statico o mistoLa seconda scelta importan-

te è decidere se la struttura del-la nostra tabella avrà dimensio-ni fisse oppure variabili. HTMLconsente infatti di specificare lalarghezza della tabella e delle

relative celle (colonne) in pixeloppure in percentuale. Se indi-chiamo un valore in pixel la ta-bella resterà di quella dimen-sione qualunque sia l'ampiezzadella finestra disponibile per ilbrowser sul computer dell'u-tente. Nel caso invece di valori

percentuali, la tabella si allar-gherà o si stringerà (compati-bilmente con i contenuti) al va-riare della dimensione della fi-nestra di navigazione. È anchepossibile adottare una soluzio-ne mista dove solo alcune co-lonne abbiano una dimensione

2 Progettare layout fluidi o statici

Tabella statica e dinamica: le tabelle a larghezza fissa, indicata in pixel, mantengonoil proprio assetto qualsiasi sia la dimensione della finestra del browser. Perciò, nelcaso in cui quest'ultima si riducesse al di sotto delle dimensioni necessarie, una partedella tabella diventerebbe invisibile. Viceversa le tabelle a dimensione variabile,espressa in percentuale, modificano la propria ampiezza in funzione della dimensionedella finestra e hanno perciò un aspetto meno prevedibile

Riepilogo dei concetti della Lezione 3

1. Perché le tabelle sono diventate lo strumento principale perdefinire 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)

?Test: leggi le domande e verifica le tue risposte

29/88

3a lezione

fissa, ad esempio quelle conte-nenti i link di navigazione, men-tre le altre abbiano una dimen-sione variabile, ad esempioquelle che contengono il testo.

Tag fondamentali di una tabella

Qualunque sia l'impostazio-ne progettuale, una tabella siapre e si chiude sempre con itag <table> e </table> all’internodi quali troviamo una serie di ri-ghe delimitate dai tag <tr> e</tr> che a loro volta contengo-no un certo numero di cellecontrassegnate dai tag <td> e</td>. Prendendo a prestito unametafora dal libro "HTML 4 Tut-to & Oltre", costruire una tabel-la è come erigere un muro. Sicrea la base con <table> quindisi stende il primo strato di ce-mento con <tr> si posano diver-si mattoncini in sequenza con<td> e </td> dopo di che si pas-sa al nuovo strato di cementocon </tr> e <tr>. Il numero di ri-ghe può variare liberamente,ma il numero di celle deve esse-re costante riga per riga altri-menti sarà impossibile costrui-re le colonne. La larghezza dellecelle non deve essere necessa-riamente uguale, invece, sebbe-ne sarebbe meglio che lo fosse.Se non fosse possibile mante-nere lo stesso numero di celleper ogni riga. è consentito usarespeciali comandi per estendereuna cella su più colonne in oriz-zontale o su più righe in verti-

cale, ma si tratta di soluzioneusata di rado per le tabelle dilayout e sconsigliata anche perle tabelle di dati, visto che sipresta a interpretazioni diverseda parte dei browser.

Se per errore il numero dicelle presente in una riga noncorrispondesse alle altre, la ta-bella sarà scombinata e la vi-sualizzazione risultante saràconfusa. Ne consegue che è dif-ficile realizzare tabelle moltocomplesse senza perderne ilcontrollo. I principali errori dicodifica di una pagina HTML ri-siedono proprio nella costru-zione delle tabelle. In particola-re, una tabella non chiusa pro-priamente con il tag finale </ta-ble> può scombinare la paginaal punto da renderla irricono-scibile. Possono nascere pro-blemi anche dalla mancatachiusura dei tag interni di riga odi cella. Fortunatamente i brow-ser moderni dispongono distrumenti particolari per com-pensare la complessa gestionedelle tabelle. Internet Explorer,ad esempio, completa automa-ticamente una riga non chiusaquando incontra il marcatored’inizio della successiva (<tr>) eriesce anche a risolvere alcunidei casi di tabella non chiusa.Più rigidi sono invece NetscapeNavigator e Opera; per tale mo-tivo si consiglia sempre di ese-guire un’anteprima della paginacon uno di questi programmiprima di rilasciarla. �

� Le risposte alle domande di pag. 33

1. Consentono di controllare glispazi nella pagina senzaalterarne l'aspetto estetico.Sono compatibili conqualsiasi tipo di browser eoffrono la massimaflessibilità di configurazione,a fronte di una certacomplessità di realizzazione.

2. In modo sequenziale,carattere per carattere,dall'inizio alla fine della rigaper poi ricominciaredall'inizio della rigasuccessiva. Solo al terminedella lettura dell'interatabella il browser saeffettivamente com'è fatta ecome debba essereriprodotta.

3. Le tabelle HTML non hannocolonne definibili in quantotali. Ciascuna colonna vienecostruita combinando inverticale le celle di ciascunariga.

4. Sono tre: <table> per apriree chiudere la tabella <tr>(table row) per aprire echiudere ciascuna riga e<td> (table data) per aprire echiudere ciascuna cella.

5. Le indicazioni fornite a livellodi cella hanno sempre lapriorità su quanto definito alivello globale di tabella.

6. Un layout basato su tabelle oelementi di tabelle che

hanno unalarghezza definitain termini percentualirispetto all'ampiezzacomplessiva della finestradel browser. Un layout fissoo statico usa invece tabellecon larghezza in pixel.

7. Una tabella costruitaall'interno della cella diun'altra tabella.

8. Evitare una complessitàeccessiva e, particolare,l'impiego eccessivo di tabellenidificate. Ricordarsi che lalarghezza di una riga coincidesempre con la larghezzadella tabella o con la sommadelle larghezze specificateper le celle che lacompongono e che qualsiasioggetto inserito in una cellapuò influenzarne ledimensioni, alterandol'assetto complessivo dellatabella.

9. La tabella di contenuto habordi visibili e talvolta ancheuno sfondo. Contiene unaserie di attributi stilistici cheservono alla correttagestione del testo e che nonsono necessari in unatabella di layout.

10.La visualizzazione gradualedei primi elementi di unatabella prima che sia stataletta per intero dal browser.

!

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

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 corrispondeall'abbreviazione di table row) e al loro interno troviamo varie celle, disposte insequenza, e ciascuna delimitata dalla coppia di tag <td></td> (che in inglese significatable data). Affinché la tabella sia valida e visualizzabile deve contenere almeno unariga che contenga almeno una cella. Le celle vuote non vengono visualizzate da alcunibrowser perciò ciascuna cella lasciata vuota per motivi estetici (spaziatura) dovrebbealmeno contenere uno spazio fisso - non breaking space, ossia il simbolo &nbps.

30/88

3a lezione

PC Open 35

3 Costruire template con le tabelle di layout

Definire la struttura dellapagina mediante l'impiegodi tabelle è una delle ope-

razioni più complesse con cui ilWebmaster e il Web designer sidevono misurare. D'altro cantoè essenziale nella costruzionedi un sito e una volta prodotto ilmodello, alias template, saràpossibile costruire numerosepagine strutturalmente identi-che tra loro, ma capaci di ospi-tare contenuti diversi. A tal finesarà importante concepire unastruttura che sia capace diadattarsi al variare dei conte-nuti e sia riutilizzabile il piùpossibile. Mantenere al minimoil numero di template è un re-quisito necessario per avere unsito gestibile e per facilitarne lasuccessiva evoluzione a sito di-namico.

Il primo passo consiste neldecidere se incapsulare il tuttoin una singola tabella oppurecreare diverse tabelle separateche si allineano spontaneamen-te. A favore della prima solu-zione gioca il completo control-lo della struttura e delle sue di-mensioni, a favore della secon-da una maggiore leggerezza del-la pagina e semplicità delle ta-belle che porta, alla fine, a unamaggiore velocità di visualizza-zione nel browser (per una de-scrizione di come allineare letabelle rimandiamo all'articoloTabelle consecutive sul CD).

La seconda decisione è trauna struttura fissa, immutabileal variare della dimensione delbrowser oppure fluida, capacequindi di espandersi e di con-trarsi all'unisono con la fine-stra del navigatore. Nella prati-ca, è raro trovare pagine fluidein tutti i loro componenti, per-ciò anche nel caso di un design

fluido, dovrete decidere qualielementi mantenere stabili alloro interno.

Pagine fisse e variabiliIl comportamento statico op-

pure fluido della tabella e dellesue celle dipende dall'imposta-zione di un singolo attributo:width che può assumere valoriin pixel, perciò assoluti, oppurevalori in percentuale (da 1 a100). Assegnando una larghez-za percentuale all'intera tabella,ad esempio con il tag <tablewidth="75%">, otterremo un og-getto con una dimensione com-plessiva pari al settantacinqueper cento della finestra delbrowser, qualunque siano le di-mensioni di quest'ultima. Taleampiezza sarà, poi, distribuitain modo uguale tra tutte le cel-le/colonne, salvo modificare ledimensioni di una particolarecolonna rispetto alle altre a se-guito dell'inserimento di testo oimmagini, come visto nell'arti-colo precedente. Se volete con-trollare le dimensioni percen-tuali di una colonna rispetto al-le altre, potete assegnarle unvalore specifico.

Di solito s'imposta la dimen-sione della prima o dell'ultimacella, usando sempre l'attributowidth all'interno, in questo ca-so, del tag <td>. Ad esempio <tdwitdh="30%"> imposta le di-mensioni della cella e della re-lativa colonna in modo che siail trenta per cento del totaledella tabella, nel nostro esem-pio sarebbe il 30% del 75%. Lospazio restante sarà distribuitoin modo equo tra le altre colon-ne. Il vantaggio di assegnareuna dimensione percentualeesplicita a una delle colonne èduplice: creare proporzioni di-verse nelle dimensioni di cia-scuna rispetto a quanto deter-minato automaticamente dalbrowser e garantirne la stabilitàanche quando inseriamo testoo altri elementi di contenuto.

Infatti, una tabella che abbiauna larghezza impostata per al-meno una delle sue colonne,manterrà il suo assetto anchenel momento in cui inseriamotesto nelle varie colonne. Qua-lora il testo fosse troppo lungoper essere contenuto nella cel-la, il browser lo manderebbeautomaticamente a capo allun-gando in verticale la cella e tut-

ta la riga a cui essa appartiene.Diversa è invece la situazionenel caso in cui venga inseritaun'immagine in una cella condimensionamento percentuale.Infatti l'immagine, essendo in-comprimibile, obbligherà la cel-la a mantenere una larghezza al-meno pari alla propria o supe-riore (trovate un dettaglioesemplificativo di questi pas-saggi nell'articolo Dimensiona-re tabelle e celle sul CD).

Soluzioni misteCosa succede se nella nostra

tabella fluida volessimo blocca-re una colonna? Dovremmo im-postarne le dimensioni in pixele lasciare libere le altre oppureimpostarle in percentuale. An-che in questo caso sarà suffi-ciente impostare la larghezza diuna sola delle celle che com-pongono la colonna a dimen-sione fissa. Ad esempio il tag<td width="120"> inserito nellacella della prima o dell'ultimariga, imposterà la larghezza del-l'intera colonna a 120 pixel e fis-serà anche la dimensione com-plessiva della tabella. Ricordia-mo un concetto importante deldimensionamento fisso: la mi-sura espressa in pixel indica lalarghezza massima della colon-na. Perciò il browser non laespanderà anche quando la fi-nestra si allarga, ma non è veroil contrario.

Come già visto nell'assegna-zione delle priorità dimensio-nali in una tabella fissa (vedil'articolo Stabilità delle di-mensioni), è sempre possibilerestringere la larghezza di unacella/colonna a dimensione fis-

sa quando imposto dal compri-mersi della finestra o dall'e-spandersi del contenuto nellecolonne circostanti. L'unicomodo per garantire che una co-lonna rimanga davvero blocca-ta sia in espansione sia in com-pressione (una caratteristicanecessaria ad esempio per unabarra di navigazione) consistenell'inserire un'immagine di lar-ghezza esattamente identica al-la larghezza della colonna. Disolito l'immagine trova posto inuna cella in fondo alla colonna,collocata all'interno di una rigaaltrimenti vuota così da non es-sere visibile al navigatore. Alloscopo si usa di solito di un'im-magine trasparente lunga e lar-ga un pixel, il cosiddetto spa-ziatore o immagine spaziatrice(shim).

E fin qui sembrerebbe tuttochiaro: per produrre un sitocon pagine fluide basta blocca-re le colonne che contengonoelementi di navigazione e la-sciare libere quelle che inveceospitano il contenuto (testo eimmagini). In tal modo il conte-nuto utilizzerà tutto lo spaziodisponibile nella finestra delbrowser e, al contempo, il navi-gatore non sarà sorpreso daelementi di navigazione checontinuano a cambiare aspetto(per un dettaglio su come co-struire pagine di questo tipovedi l'articolo Dimensionaretabelle con celle miste sul CD).

Purtroppo, però, le tabellead assetto misto (fluido e stati-co) presentano alcune stranez-ze con cui bisogna fare i conti.Innanzi tutto i browser più vec-chi non rispettano la dimensio- �

Le tabelle HTML prevedono due attributiper estendere una cella in orizzontale e inverticale creando così strutturecomplesse che permettono unadistribuzione degli spazi non regolare

Prendiamo la struttura tipica di una delle pagine del corso sul CD e analizziamo letabelle che la compongono. Notiamo una grande tabella generale che contiene l'interapagina all'interno della quale si sviluppano nove tabelle nidificate suddivise in cinquearee logiche distinte

31/88

3a lezione

ne massima imposta per le co-lonne a larghezza fissa inseritein una tabella fluida e quando lafinestra viene allargata finisceper espandersi anche la colon-na che dovrebbe restare bloc-cata. Persino l'immagine spa-ziatrice non ci aiuta in questocaso perché essa garantisceche la colonna non si restringaal di sotto della propria dimen-sione, ma non può impedirle diallargarsi.

Il problema è stato ormai ri-solto dalle versioni recenti dibrowser, ma se pensate che ivostri utenti usino browser didue o tre anni fa, bisogna ricor-rere a un altro trucco: imposta-re la larghezza di una delle co-lonne variabili al 100% in modoche la somma delle percentualisuperi 100. Il browser darà sem-pre a tale colonna la massimalarghezza possibile "tenendo abada" tutte le altre. Questostratagemma può servire an-che a definire una pagina cheabbia solo colonne a larghezzafissa eccetto una, quella dedi-cata al testo, e che quest'ultimasi estenda a garantire alla co-lonna variabile sempre la mas-sima ampiezza possibile. Avre-te notato che insistiamo sull'as-segnare la larghezza sempre auna sola cella della colonna, imotivi sono tre: è inutile speci-ficarlo per le altre celle vistoche queste si adattano automa-ticamente facendoci risparmia-re codice e mantenendo la pa-gina più leggera; nelle tabellecomplesse è facile perdere il fi-lo e assegnare dimensioni di-verse a celle della stessa colon-na; in caso di modifica delle di-mensioni della tabella, è me-

glio dover lavorare su una solariga che doverne cambiare tan-te.

Finora abbiamo parlato solodi larghezza di tabelle e celle,ma i tag <table> e <td> consen-tono di specificarne anche l'al-tezza minima che anche in que-sto caso può essere espressa inpixel oppure in percentuale ri-spetto all'altezza della finestradel browser. È un attributo usa-to di rado poiché la norma è la-sciare che la tabella si allunghie si accorci da sola in funzionedel contenuto inserito, tuttaviaè importante sapere che a dif-ferenza della larghezza, dove siindica un valore massimo, quiviene sempre indicato un valo-re minimo, al di sotto del qualeil browser non può scendere,ma che può essere incrementa-to se il contenuto nelle cellecontigue lo richieda. Indicandouna lunghezza e una larghezzapari al 100%, la tabella occu-perà sempre il massimo dellospazio disponibile nella fine-stra. Non esiste un'altezza di ri-ga perché in realtà quest'ultimaeredita l'altezza della cella piùalta al suo interno. Anche inquesto caso, se dovete indicareun valore, fatelo su una cellasoltanto, la prima o l'ultima del-la riga.

Template con strutturacomplessa

Nella definizione del layoutdi una pagina è raro trovarsicon le strutture molto regolariconsentite dalle tabelle sempli-ci con un numero uniforme dicelle per ciascuna riga. Anchericorrendo a tabelle multipleconsecutive, non si riesce a ri-

produrre l'effetto desiderato ebisogna creare forme più com-plesse mediante l'estensione dicelle su più righe e colonne op-pure mediante l'innesto di unatabella nell'altra. L'estensionedi una cella su più righe o co-lonne è un'operazione poco in-tuitiva e delicata perché i brow-ser la interpretano a modo loro.I puristi consigliano di evitarla,ma esistono diverse situazioniin cui non è possibile farne ameno, perciò tanto vale padro-neggiarla. L'operazione si basasull'impiego di due attributi deltag <td>, ossia colspan per indi-care su quante colonne si deb-ba estendere la cella in oriz-zontale e rowspan per indicaresu quante righe debba esten-dersi in verticale (vedi sul CDl'articolo dettagliato Creare ta-belle complesse).

È più facile capire il funzio-namento di questi due attributise li consideriamo capaci diunire due celle adiacenti performarne una sola. In effettiquesta è esattamente l'opera-zione compiuta da alcuni editorvisuali nel momento in cuichiediamo di estendere una cel-la in orizzontale o verticale. Seinvece lavoriamo a mano, dob-biamo occuparci di cancellarepersonalmente la cella contin-gua nel cui spazio vogliamoestendere la cella espansa. Inpratica quando aggiungiamocolspan o rowspan entro unacella esistente, questa si allar-gherà ad occupare lo spaziodella cella adiacente facendoscorrere tutte le celle della rigao della colonna di una posizio-ne, scombinando la strutturadella tabella. Togliendo la celladi cui abbiamo preso il posto, latabella si rimette a posto.

Oltre a consentire maggioreflessibilità estetica nella ripro-duzione degli spazi, le celleespanse svolgono anche unafunzione di controllo sulla por-zione di tabella a cui apparten-gono. Ad esempio, una cellaespansa in orizzontale riuniscediverse colonne in modo chequeste definiscano le proprieampiezze in relazione al rag-gruppamento prima ancorache in relazione alla tabella nelsuo insieme. Le celle estese di-ventano quindi anche uno stru-mento d'impaginazione, mapurtroppo risultano persinopiù incostanti nel comporta-mento rispetto alle celle singo-le. Un criterio generale che puòaiutare a orientarsi è di consi-

derarle come un livello inter-medio tra la tabella e la singolacella. HTML è costruito secon-do una logica di concatenazio-ne gerarchica degli attributi ta-le per cui gli attributi dell'entitàmaggiore si trasferiscono alleentità minori salvo che questedispongano di attributi propriche hanno priorità rispetto aquelli ereditati dal livello supe-riore.

Come abbiamo visto, una lar-ghezza impostata a livello di ta-bella si divide equamente tra levarie celle a meno che questenon abbiamo indicazioni di-mensionali proprie e queste ul-time vengano superate da even-tuali assestamenti dimensiona-li determinati dall'inserimentodi contenuto nella cella stessa.È la logica dell'assegnare prio-rità agli attributi in cascata. Unalogica che vedremo utilizzataanche dai Cascading Style Sheet(fogli di stile in cascata). Le cel-le espanse, quindi, hanno attri-buti tra loro pari, perciò unacella espansa può influenzarneun'altra e avere la meglio sugliattributi dimensionali della ta-bella nel suo complesso. Sonoanche capaci d'influenzare ilcomportamento dimensionaledelle righe e colonne che rac-chiudono a condizione chequeste non contengano indica-zioni dimensionali proprie. Peravere un'idea pratica di come sicomportano, rimandiamo al-l'articolo Creare tabelle com-plesse sul CD).

Nidificare le tabellePurtroppo anche l'impiego

di celle espanse non è suffi-ciente a coprire tutte le esigen-ze di layout di una pagina, per-ciò esiste un ulteriore livello dicomplessità a cui ricorrere, checonsiste nell'inserire una tabel-la nell'altra. Di solito è sconsi-gliato spingersi oltre ai tre oquattro livelli di nidificazioneper non mandare in crisi ilbrowser che trova sempre diffi-cile interpretare tabelle nidifi-cate. Alcuni consigliano di evi-tarle del tutto, il che è pratica-mente impossibile se non nellepagine più elementari. Il consi-glio è di ridurle al minimo e dinidificare tabelle semplici, pos-sibilmente con dimensioni fisse(in pixel). Nidificare significainserire un'intera tabella all'in-terno della cella di una tabellaesistente, seguendo le stesseregole di costruzione usate perle tabelle normali. Un listato

�

Ecco la stessa pagina da cui abbiamo rimosso tutto il contenuto di testo. Le cinquezone diventano più evidenti. Sono interamente comprese in una tabella globale che neospita 9 nidificate. La zona 1 contiene il logo (che occupa la prima tabella nidificata alprimo livello) e la navigazione globale del CD (che occupa la seconda tabella nidificataal secondo livello). La zona 2 contiene la navigazione gerarchica e utilizza due tabellenidificate una nell'altra. La zona 3 ospita i contenuti con due tabelle nidificateconsecutive. La zona 4 contiene la navigazione locale della lezione e usa altre duetabelle nidificate consecutive. La zona 5 contiene il riferimento ai credits e usa unatabella larga quanto l'intera pagina

32/88

3a lezione

con tabelle nidificate diventamolto complesso e difficile dadecifrare se non a occhi moltoesperti.

Cerchiamo di capire le regolefondamentali. Le informazionifornite fin qui valgono sia per letabelle di layout sia per le ta-belle di contenuto, ma quandosi entra nel dominio delle tabel-le nidificate ci troviamo unica-mente nel dominio del layout,perciò introduciamo per primacosa alcuni accorgimenti chesono tipici di questo ambiente.A differenza di una tabella dicontenuto, le tabelle di layoutsono invisibili poiché non con-tribuiscono all'informazionedella pagina, ma servono uni-camente per fissare le posizionidei vari elementi. Ne consegueche devono essere invisibili, ilche richiede l'impostazioneuniforme di tre attributi: bor-der="0" per nascondere i bordi(li si può tenere visibili comeaiuto nella fase di progettazio-ne, per poi rimuoverli alla fine),cellpadding="0" per azzerare laspaziatura interna alla cella ecellspacing="0" per azzerare laspaziatura tra le celle. Di de-fault il browser assegna un bor-do di un pixel e una spaziaturainterna ed esterna di 2 pixelper lato a ciascuna cella, perciòè importante ricordarsi di di-sattivare questi tre elementiprima di cominciare a costruirela tabella di layout.

Si comincia sempre col defi-nire le dimensioni della tabellagenerale che conterrà l'interapagina oppure una porzione diquesta e poi la si suddivide incolonne. La seconda fase con-siste nel dimensionare le tabel-le nidificate e le colonne di que-ste ultime, una per una. Spessodovrete ricorrere alle immaginispaziatrici trasparenti per ga-rantire la stabilità degli elemen-ti della pagina, ma si possonousare allo scopo anche elemen-ti grafici visibili, che possibil-

mente facciano già parte delprogetto grafico della pagina.La generazione di tabelle nidifi-cate è semplificata enorme-mente dall'impiego di editor vi-suali che consentono di dise-gnare la pagina col mouse su unfoglio bianco e quindi generanoin automatico tutte le tabellenecessarie. Rientrano in que-sta categoria DreamweaverMX e Fireworks MX, GoLive6.0, FrontPage 2002, Namo We-beditor, Hot Metal Pro.

Ciascuno segue un approc-cio diverso e genera tabelle piùo meno efficienti. Namo si di-stingue per il fatto di realizzareun tracciato provvisorio dellapagina, modificabile in tutti isuoi elementi, ma nel quale ègià possibile inserire contenutiper avere un'idea dell'aspetto fi-nale della pagina prima di pro-durre il codice HTML vero eproprio. Anche Fireworks sicomporta in modo analogo,con l'aggiunta di conservaresempre l'originale modificabiledel progetto e quindi di poterripetere la generazione del-l'HTML quante volte si vuole,per poi darlo in pasto aDreamweaver MX. Quest'ulti-mo dispone di una funzionepropria di generazione graficadel layout che produce il codi-ce immediatamente, ma per-mette comunque di modificarevisualmente gli elementi già ge-nerati (per una prova completavedi Macromedia Dreamwea-ver MX, la nave scuola delWeb design sul CD).

Discorso analogo per GoLive6.0 che trasforma la generazio-ne della pagina Web in una verae propria operazione di dise-gno: c'è una tela bianca conuna griglia di riferimento su cuicollocare qualsiasi tipo di og-getto. Ogni elemento rimanemodificabile e la generazione origenerazione del codice HTMLè immediata (vedi Adobe GoLi-ve 6.0 maestro di tabelle sul

CD). FrontPage 2002 genera im-mediatamente il codice e offrepossibilità di modifica sugli ele-menti essenziali (ne parleremonella prossima lezione). Inmancanza di strumenti visuali,la costruzione del layout passaper un lungo processo di codi-fica dei vari elementi, partendoda dimensioni tracciate in anti-cipo su un foglio di carta o an-cor meglio su una stampa delprogetto grafico della pagina.

Un esempio di tabellenidificate

A titolo di esempio riportia-mo la struttura di tabelle nidifi-cate usata per le pagine internedel nostro corso su CD. Vedia-mo una tabella generale, cheavvolge tutta la pagina, all'in-terno della quale sono state in-serite otto tabelle nidificate:una espressamente dedicata altesto e ai contenuti informativi,le altre riservate agli elementidi navigazione e alla barra oriz-zontale che contiene il logo.

Il modello di pagina è quelloclassico a quattro pannelli de-scritto nella seconda lezione(vedi l'articolo Impostare glispazi del canovaccio sul CD).Osservando la pagina senzacontenuti notiamo che le ottotabelle nidificate si dividono incinque aree principali. La primaè la tabella che contiene la bar-ra orizzontale del logo, indi-spensabile per garantire che la

pagina mantenga lapropria larghezza estruttura. A sua voltainclude una delle altretabelle nidificate checontiene le voci di na-vigazione globale (ho-me, indice, corsi, ecce-tera). La seconda areaè composta da due ta-belle, una nell'altra chesi appoggiano sponta-neamente sotto la ta-bella del logo e cheospitano la navigazio-ne del CD. La terzaarea è composta dadue tabelle indipen-denti, collocate unasotto l'altra, che con-tengono il testo e leimmagini della paginaoltre che un elementodi navigazione locale(Precedente – Prossi-mo). La quarta areacontiene altre due ta-belle che elencano tut-ti i link di una partico-lare lezione. La quinta

area contiene semplicementeuna riga di chiusura.

Tutte e cinque le aree vengo-no tenute al loro posto e collo-cate reciprocamente dalla ta-bella principale che vediamoschematizzata in un grafico ge-nerato con GoLive. L'area 1 oc-cupa l'unica cella che componela prima riga della tabella. Laseconda riga contiene una ta-bella invisibile che serve daspaziatore tra il logo e il restodella pagina e che a sua voltaospita tre celle con immaginispaziatrici invisibili che nebloccano le dimensioni impo-stando la larghezza delle tre co-lonne successive che ospitanole aree 2, 3 e 4 composte da al-trettante celle contigue nellaterza riga. La riga quattro con-tiene semplicemente la lineablu di chiusura e la riga cinquecorrisponde all'area 5 nel no-stro schema, quella che contie-ne il link alla pagina dei credits.

Benché possa sembrarecomplessa, questa è una paginaabbastanza comune in un sito esicuramente è meno articolatadi una home page. Per vederecome è stata costruita riman-diamo agli articoli nel CD: Ta-belle nidificate in cascata, Ta-belle nidificate complesse eTabelle nidificate consecutive.Rimandiamo invece alla prossi-ma lezione per esaminare gliaspetti delle tabelle in quantoelementi di contenuto. �

Ecco la stessa pagina visualizzata secondo lastruttura del codice HTML della tabella principale.Notiamo che si compone di cinque righe, tre dellequali contengono a loro volta una o più tabellenidificate. Proviamo ad aprire la prima riga escopriamo che contiene una sola cella in cui trovaposto la prima tabella, quella che contiene il logo.Quest'ultima a sua volta si compone di tre righenella seconda della quale troviamo un'altra tabellanidificata, che contiene la navigazione globale

Per comodità qui abbiamo attivato la visualizzazione dei bordi della tabella di layoutglobale. Riconosciamo visivamente la distribuzione delle righe e delle celle che lacompongono

33/88

3a lezione

Nonostante la sua matricecoreana, questo softwareha già conquistato una di-

screta popolarità nel mondodei Webdesigner grazie al co-sto ridotto, alla semplicità d'in-terfaccia e alla precisione delsuo ambiente di sviluppo vi-suale. È una soluzione validaper chi voglia evolvere da uneditor basato sul testo versoun approccio visuale capace dioffrire le principali funzioniprofessionali a cui è già abitua-to. Offre un buon compromes-so di funzioni per chi voglia ge-stire tutte le componenti del si-to, dalle pagine agli elementigrafici e alle animazioni. Il pro-gramma offre strumenti per lagenerazione di tutti gli elemen-ti grafici di supporto a benefi-cio dei Webmaster che non sia-no dotati del tocco artistico.Pregevole in questo senso laraccolta di clip art e di siti pre-configurati abbinata al pro-gramma.

Il programma è concepitoper l'impiego immediato anchesenza lettura del manuale. Leopzioni sono state ridotte al-l'essenziale e i parametri di la-voro sono impostati per de-fault ai valori che si reputanoidonei per la maggior parte deisiti. Il suo ambiente grafico èottimo per la generazione rapi-da di prototipi di pagina e di si-to. Il progettista trova infattiun'interfaccia completamentegrafica per "disegnare" gli spa-zi della pagina (layout) e quin-di generare in automatico il co-dice della tabella che per tra-durre tale layout in HTML. Lagenerazione del codice avvienesolo su comando, una voltache il disegno della pagina ècompleto. Fino a quel momen-to, qualsiasi elemento può es-sere modificato, spostato e ri-dimensionato ed è possibile in-serire i contenuti finali neglispazi (testo e immagini) perosservare quale sia il risultatofinale prima di partire con lacodifica HTML automatica cheappare pulita e senza sorprese.Questa funzione di design inte-rattivo non offre la potenza chesi trova in Dreamweaver e Go-Live, ma in compenso è utiliz-zabile in pochi minuti e puòsoddisfare la gran parte dellesituazioni. Il corredo di funzio-nalità di Namo WebEditor offre

un livello intermedio interes-sante per chi è stanco di lavo-rare con un semplice editorHTML di tipo testuale, ma nonè pronto per il passaggio diret-to a Dreamweaver o GoLive enon si fida del codice generatoin automatico da FrontPage.

Tre modalità di lavoroIl programma offre due am-

bienti di lavoro primari: la fine-stra HTML che mostra il codicenella sua versione integrale e lavista Modifica che mostra unasorta di anteprima grafica dellapagina su cui è possibile inter-venire direttamente usandomouse, icone e menu. Alla vistaModifica è possibile aggiunge-re la modalità Layout per dise-gnare a mano libera i contornidegli spazi che vogliamo crearenella pagina per poi lasciare alprogramma la generazione au-tomatica delle tabelle che liconterranno.

Oltre che in fase di progetta-zione, la vista Modifica risultacomoda per aggiungere, modi-ficare e aggiornare qualsiasielemento della pagina. Offrestrumenti rapidi per interveni-re su testo, immagini e tabelle,osservando immediatamente irisultati. Qualsiasi operazioneeseguita in modalità grafica sitrasforma in una modifica se-quenza del codice HTML che

può essere riesaminato entran-do in vista HTML.

In tale vista, appaiono evi-denziati con un colore diversotutti tag e i relativi attributi,inoltre il programma numeraautomaticamente le righe e lemanda a capo con un soft wrap(senza aggiungere un ritorno acapo forzato) per facilitarne lalettura. È possibile inserire tagin automatico cliccando sullerelative icone oppure selezio-nando le rispettive voci di me-nu. Non troviamo invece le fun-zioni di completamento e cor-rezione immediata del tag co-me negli editor professionali,ma per lo meno il WebEditorevidenzia eventuali tag incom-pleti. Consideriamola una vistadi complemento all'editing vi-suale, utile per la produzione disiti statici, ma non per lo svi-luppo di siti dinamici, dove lacodifica manuale è preponde-rante e dove servono anchestrumenti per sveltire la scrit-tura nei vari linguaggi di scrip-ting e dove la digitazione ma-nuale deve raggiungere un ele-vato livello di precisione e ve-locità.

Namo WebEditor fornisceuna serie di script già pronti,da configurare mediante wi-zard, per realizzare gli effettipiù comuni. Non offre tuttaviastrumenti mirati a chi debba

Identikit� Namo WebEditor è uno dei piùpopolari editor visuali incircolazione. Offre una buonamiscela di funzioni orientatesoprattutto alla progettazione,alla pubblicazione emanutenzione rapida di un sitostatico. Include tutte le funzioninecessarie al Webmaster percoprire anche la componente didesign. Indicato per progetti dimedia complessità e per chi vuoleevolvere da un semplice editor abase testo verso un ambientevisuale economico e facile daimparare.

� Pro- Interfaccia semplice ed efficace- Ottima palestra formativa- La vista di layout consente laproduzione istantanea diprototipi

- Integra le componentinecessarie per produrre glielementi grafici del sito

- Include una gestione integratadel sito e delle sue risorse

- Genera in automatico un HTMLcorretto

� Contro- Manca un editor specifico per iCSS

- Scarso supporto per i linguaggidi scripting

- Poco efficiente per la produzionedi siti dinamici

Sito produttore: www.namo.comSito distributore: www.questar.itCosto licenza: 199,89 euro, upgrade 99,90 euro, versione "Education"99,90 euroRequisiti: Windows 98, SE, ME, NT 4, 2000, XP

Caratteristiche

4 Namo WebEditor 5, per siti statici professionali

scrivere script da zero. A que-sto scopo è perciò necessarioaffiancare altri programmi spe-cializzati come HomeSite op-pure uno dei tanti editor gra-tuiti, come quello che abbiamoscelto per il nostro corso:HTML-Kit. Sono invece velocied efficaci invece i suoi stru-menti di controllo e ripulituradel codice già scritto. I fogli distile sono supportati, sebbenemanchi un editor dedicato allaloro gestione. Il supporto al-l'HTML dinamico è abbastanzabuono. Buone anche le funzio-ni di controllo del sito nel suocomplesso: il Gestore Risorsetiene traccia dei vari elementidisponibili: pulsanti, set di co-lori, stili, eccetera, mentre ilGestore Siti aiuta a tener tracciadei file che compongono un de-terminato sito e della strutturadi navigazione corrisponden-

La vista HTML mostra il codice originale della pagina e consente di modificarloin diretta come qualsiasi altro editor testuale. Il programma evidenzia i tag e irelativi attributi differenziandoli dal testo e numera le righe

34/88

3a lezione

Èuno dei business più pro-fittevoli della Rete che hatenuto botta nonostante la

crisi della new economy. Non acaso se su Yahoo si cerca l’e-lenco delle aziende che vendo-no i vari .com o .it si trova unelenco che conta quasi una cin-quantina di nomi. Il motivo sispiega facilmente. La venditadi domini non comporta il tra-sferimento di beni fisici, ma so-lo il trasferimento di “oggetti”digitali. Poi si porta dietro lavendita di altri servizi e infine ilmercato continua a tirare per-ché la vendita dei suffissi si ri-volge indistintamente a privati

e aziende. E soprattutto questeultime non possono ormai farea meno di avere una presenzain rete. Tutto questo è testimo-niato dalla crescita del mercatoche oggi in Italia conta 742.939domini, una cifra che in Europaè inferiore solo a quella dell’O-landa 790.304 del Regno Unito(3.635.585) e della Germaniache guida la classifica dei paesidell’Unione europea con5.666.269. Nonostante il ritardonell’utilizzo di Internet, l’Italiaha risposto bene all’offerta didomini che nel corso del temposi è andata ampliando. Dopo iclassici .com, .net e .org e l’itali-

co .it sono arrivati altri dominicome .biz, .info e .name a quali-ficare ulteriormente la presen-za in Rete. Il fatto che non ab-biano avuto lo straordinariosuccesso dei domini genericiche hanno caratterizzato la pri-ma fase di vita di Internet nonsignifica che il mercato si stiasgonfiando. Anzi, altri dominiarriveranno, il .eu per esempioper permettere di identificaresempre meglio l’attività che sivuole svolgere in rete o la pro-venienza geografica di personee aziende. Ma vediamo di ap-profondire tutti i segreti delmondo dei domini Internet.

Il dominio è insieme all’indi-rizzo IP il modo che ci permettedi essere individuati su Inter-net. Si tratta di una parola (chepuò essere anche l’unione dipiù parole) accompagnata dauno dei suffissi che oggi è pos-sibile registrare. Nel caso di PCOpen, per esempio, parliamo dipcopen.it. Il dominio da regi-strare in rete deve infatti esserecomposto da una sola parola oda più parole spezzate ancheda trattini. Vietati apostrofi eaccenti, simboli della punteg-giatura e altri caratteri partico-lari come ad esempio @, &, %.In generale il dominio deve ave-re una lunghezza minima di trecaratteri e massima di 63(estensioni escluse) e non puòcominciare o finire con un trat-tino. A questa regola però ci so-no alcune eccezioni. Per i gTLD(generic Top Level Domain)

quali .com, .net e .org, .biz, .infoe .name, infatti, è possibile an-che registrare domini di duelettere.

In Italia i domini possono es-sere acquistati da chiunque,persona fisica o giuridica, a pat-to che faccia parte dell’Unioneeuropea.

La struttura mondiale della Rete

Prima di affrontare la proce-dura di registrazione e gli entiitaliani che governano Internetè il caso di disegnare la struttu-ra mondiale della rete. Il verticeè costituito dall’ICANN (Inter-net Corporation for AssignedNames and Numbers), l’organi-smo che sovrintende all’asse-gnazione dei domini. Si tratta diun ente non profit le cui sceltesono ratificate dal ministero delCommercio statunitense il cuiboard of director, secondo lenuove regole recentemente ap-provate, sarà formato da 18membri. Il consiglio sarà elettoda un comitato elettivo e da treorganizzazioni che rappresen-tano i gruppi di proprietari diURL (Universal Resource Loca-tor, l'indirizzo di una paginaWeb su Internet). Sparisce cosìla norma che prevedeva checinque membri fossero elettidagli utenti della Rete. Una de-cisione che secondo molti al-lontana il vertice di Internet daibisogni dei navigatori.

All’ICANN spetta il compitodi decidere quali siano i nuovi �

5 L’iter per registrare un dominio

te. Da qui è possibile eseguirealcune operazioni che si esten-dono all'intero sito come la ri-cerca e sostituzione di testo, ilcontrollo del codice, la verificae correzione guidata dei colle-gamenti interrotti, la conver-sione globale dei nomi di file inlettere tutte minuscole, la pub-blicazione in remoto medianteprotocollo FTP. Nella confezio-ne del prodotto sono incluseanche tre utility: Namo Captu-re per catturare le immagini avideo, Namo GIF Animator percreare GIF animate e Namo Sli-cer per suddividere immaginitroppo grandi in modo che sia-no visualizzate progressiva-mente all'interno di una pagina,

pezzo per pezzo, pur mante-nendone l'integrità visiva me-diante l'impiego di una tabella.Il programma in questo casogenera in automatico anche latabella HTML che conterrà lediverse parti dell'immagine.

Curiosa la disponibilità diuna modalità di progettazione"i-mode" per lo sviluppo di pa-gine visualizzabili sui telefoninicellulari multimediali disponi-bili in Giappone,ma del resto si trat-ta di un softwarecoreano, il chespiega tutto. �

(versione integrale dell’articolo sul CD) La vista Modifica è la più importante di Namo WebEditor e contiene tutte le funzioni

per la creazione e modifica visuale degli elementi nella pagina

In arrivo il “.eu”Appuntamento per l’estate 2003.Dovrebbe essere questo ilmomento del debutto per il dominio.eu che servirà a identificare leimprese del Vecchio Continente. Il25 ottobre è scaduto il termine perla presentazione dellemanifestazioni d'interesse allaCommissione europea da partedegli organi interessati a diventaregestori dei domini .eu. Fra gli entiinteressati c’è anche un consorzioitaliano formato dalle authorityitaliana, belga e svedese alle qualiin caso di vittoria potrebberoaggiungersi le authority slovena ececa oltre a l’Isoc Europe. Per laprima volta nella storia di Internet adecidere chi dovrà gestire il registrodel .eu non sarà l’ICANN mal’Unione europea, alla quale rimarràla paternità del .eu, che in questo

non seguirà il normale iter dei gTLD(.com, .net, .org). "Creato agaranzia della proprietà industrialee della personalità delle realtàaziendali, personali o pubbliche chene faranno richiesta – spiega BrunoPiarulli di Register.it –, il nuovoidentificativo è destinato ad aprirenuovi orizzonti sulle attivitàcommerciali, culturali e sociali delVecchio continente, contribuendoalla diffusione di Internet e dell’e-commerce in quella che, una voltaallargata, sarà la terza comunità almondo per numero d’individui". Eche il business sia importante lotestimoniano gli operatori chehanno iniziato già a raccogliere lepreregistrazioni in rete. Peccato chela Commissione europea abbiaspiegato che le preregistrazionipotranno partire solo quando ilfuturo registro europeo saràoperativo.

il corso èsul CDn. 67

35/88

3a lezione

� domini da adottare e chi dovràgestirli. Un compito non facilesoggetto a numerose pressioni(il business fa gola a molti) eche fino a oggi ha comportatotempi molto lenti nell’adozionedi nuovi domini che hanno cau-sato anche la nascita di societàalternative delle quali parlere-mo più avanti.

Nonostante le proteste,ICANN rimane il massimo orga-no di Internet al quale è delega-ta anche la scelta dei registrydei gTLD, le società che si oc-cupano di gestire i database deivari .com, .org o .info. La sceltadei registry che si occupanodei ccTLD (Country Code TopLevel Domain) è invece fatta inmodo autonomo dalle locali co-munità Internet dei vari Paesicon il parere favorevole del go-verno. Il livello successivo è co-stituito dai registrar o maintai-ner ai quali i registry appaltanodi solito vendita dei domini. Disolito si utilizza il termine regi-strar quando questi soggettipossono vendere i gTLD e han-no la possibilità di scrivere di-rettamente nel database di chigestisce questi domini. Si trattadi un privilegio riservato a po-chi visto che le società che pos-sono vantare questa qualificasono 110 nel mondo fra le qualic’è l’italiana Register.it. Moltopiù accessibile è la qualifica dimaintainer, il quale vende gli al-tri suffissi. In questo caso le ri-chieste di registrazione devonoessere inviate all’Authority enon si accede direttamente aidatabase. In Italia si preferisceutilizzare il termine maintainer.

La Registration Authority(www.nic.it), che ha sede pres-so l’Istituto per le applicazionitelematiche del CNR di Pisa, hail compito di assegnare e regi-strare tutti i nomi a dominioche utilizzano il suffisso .it. LaNaming Authority si occupa in-vece di stabilire regole e proce-dure attraverso le quali sonogestiti i domini.

Requisiti per poter registrare un dominio

Per registrare i domini .it bi-sogna possedere una PartitaIVA (per le aziende) o un codicefiscale (i privati) e avere la resi-denza in uno dei Paesi dell’U-nione europea. Le aziende eu-ropee possono registrare a loronome un numero illimitato didomini .it, mentre i privati pos-sono registrare a loro nome unsolo dominio .it. Per i domini

.com, .org e .net non è previstainvece nessuna limitazione an-che per i privati.

A meno di offerte particolario altri accordi, l’acquisto deldominio vale per un anno. Allascadenza di solito (questo di-pende dai servizi offerti dallasocietà che vi ha venduto il do-minio) l’utente viene avvisato epuò così procedere al rinnovo oall’abbandono.

Come si registra un dominioChi vuole acquistare un do-

minio .it oltre che essere mag-giorenne deve firmare e inviarevia fax (al numero 050/542.420)o per posta raccomandata ( Re-gistration authority italiana,Istituto per le applicazioni tele-matiche del CNR, via GiuseppeMoruzzi 1, 56124 Pisa) una let-tera di assunzione di responsa-bilità. La lettera può essere disolito stampata da Internet nelsito del maintainer. L’assegna-zione da parte della Registra-tion authority non è in temporeale e segue il principio del fir-st come first served. In sostanzase due persone o aziende invia-no la richiesta di acquisto delmedesimo dominio viene pre-miata la richiesta arrivata perprima a Pisa. Per controllare seun dominio è già occupato, edeventualmente chi l’ha acqui-stato, bisogna interrogare il da-tabase della RegistrationAuthority. Per farlo bisogna an-dare sul sito www.nic.it/RA/in-dex.html oppure passare per isiti delle società che vendono idomini che di solito offrono an-che la possibilità di interrogaredirettamente il database dellaRa (come Register.it). Per otte-nere un dominio sono necessa-ri circa tre-quattro giorni. Unavolta effettuata la registrazionela Registration authority prov-vederà a rendere tecnicamentevisibile in Rete l’utente regi-strato. In pratica la Ra compieun atto amministrativo regi-strando il nuovo dominio e unodi tipo tecnico registrando ilfatto che il dominio risiede inalmeno due DNS, Domain NameServer. I DNS servono per con-vertire i nomi dei nodi (comewww.pcopen.it) in indirizzi nu-merici IP. Di solito questi serversono di proprietà della societàche ha venduto il dominio e neha effettuato la registrazione,ma nel caso di grandi organiz-zazioni (ad esempio Fiat o Mi-crosoft) i server sono di pro-prietà delle società che in que-

sto modo possono attivare sen-za problemi i sottodomini.

Chi invece deve acquistareun dominio .com, .net, .org nondeve compilare la lettera di as-sunzione di responsabilità.Quando si acquista un dominionon si entra in possesso persempre del nome (il mercatoavrebbe vita breve) ma in so-stanza si acquisisce il diritto diutilizzare quel nome per uno opiù anni. Il prezzo varia a se-conda del suffisso che si inten-de utilizzare.

Quanto costa?L’offerta in rete è molto va-

ria; si passa da 9,95 a 35 europer un .it oppure a 14,95 per un.com. Dipende dai livelli di ri-vendita, dalla politica commer-ciale e anche dai servizi offertiin abbinamento con la venditadel dominio.

Attenzione però a non farviabbagliare dal prezzo. Il costoprincipale di chi vende il domi-nio è dato infatti dalla gestionedei nomi. In pratica quello chesi paga non è il dominio in séma i servizi (per esempio ilcambio di DNS o altro) richiestia queste società che fonisconoanche una sorta di assicurazio-ne che tutto funzionerà per ilmeglio.

E in certi momenti un servi-zio consumatori che funziona edà seguito immediatamente al-le vostre richieste può esseremolto utile. Quante volte vi sie-te scontrati con un indirizzo e-

mail dal quale non arriva maiuna risposta?

Il servizio di hostingSpesso alla vendita dei do-

mini è abbinata quella dell’ho-sting. Questo perché acquista-re un dominio senza lo spazioWeb non avrebbe grande sensoa meno che non sia un acquistodi tipo difensivo fatto da so-cietà che in questo modo vo-gliono cautelarsi dall’utilizzo dinomi che potrebbero corri-spondere a marchi che lance-ranno in futuro.

Nel caso invece l’acquistodel dominio sia collegato all’a-pertura di un sito è necessariopossedere anche lo spazio Webche spesso porta con sé ancheun servizio di hosting. In prati-ca la società che ha venduto ildominio ospita sui propri ser-ver le pagine Web del sito e laposta elettronica.

Anche in questo caso le of-ferte presenti in Rete sono mol-to differenti e prima di scegliereè il caso di leggere attentamen-te le voci del contratto con i re-lativi servizi e soprattutto ave-re ben chiaro in mente cosa sivuole fare con il proprio sito. Sele ambizioni, per il privato o l’a-zienda, si traducono semplice-mente nel primo passo su In-ternet con un sito dedicato allafamiglia o una vetrina delle atti-vità aziendali non è il caso dispendere molti soldi.

Lo spazio gratuito spessoconcesso con l’acquisto di un

Internet è formata da un numeroimprecisato di computer hostcollegati tra loro. Questi hostdialogano trasferendosi pacchettidi dati che passano attraverso variserver Internet fino ad arrivare aldestinatario. In questo viaggio idati vengono riconosciuti einterpretati dai vari host checapiscono se sono destinati a loroo se devono trasmetterli a un’altramacchina. Il protocollo TCP/IPpermette di effettuare questeoperazioni trasferendo i dati apacchetti. I pacchetti sono gruppidi dati che riportano semprel’indirizzo del mittente e quello deldestinatario. L’indirizzo è codificatoa 32 bit e consiste in un alternarsidi 0 e 1 (codifica binaria). Il numeroviene diviso in una sequenza diquattro cifre che sono poitrasformate in base dieci. Questodà vita a numeri come

192.153.169.24, e questa è latipica forma di un indirizzo IP.Ovviamente ricordarsi ogni volta lasequenza di numeri sarebbe troppomacchinoso, e per questo si èpensato di introdurre la possibilitàdi legare a un indirizzo IP un nomea dominio. La “traduzione” dadominio a indirizzo IP è affidata alDNS. Non tutti i nomi a dominiopossono essere registrati. Esistonoinfatti nomi riservati. Per esempionon sono assegnabili i nomi diregioni e province, le sigle a duelettere delle province a tre letteredelle regioni, i nomi corrispondentiall’identificazione dell’Italia e inomi dei comuni italiani. Gov.it egoverno.it sono riservati al sitodell’esecutivo così come it.it,Italia.it, Repubblica-Italiana.it eRepubblicaItaliana.it sonoassegnabili solo agli organiistituzionali dello Stato.

Il trasferimento “a pacchetti”

36/88

3a lezione

dominio può essere sufficiente.Pochi MB bastano per foto e te-sti, poi quando le idee sarannopiù chiare e i progetti su Inter-net più definiti, si potrannochiedere spazi più ampi.

È inutile farsi abbagliare daofferte mirabolanti con spaziinfiniti che non saranno mai uti-lizzati. Meglio concentrarsi suelementi più importanti comel’affidabilità del sistema e i mar-gini di autonomia che possiedel’utente per effettuare le opera-zioni di configurazione del suosito. Quanti sono i server a di-sposizione? Qual è il livello disicurezza della connettività?Sono queste alcune domandeda porsi (anche in relazione altipo di progetto che avete in-tenzione di realizzare sul Web)quando si affronta la scelta del-l’hosting. Tenendo presenteche l’aspetto principale è quel-lo della vostra autonomia.

L’utente deve infatti avere lapossibilità di muoversi a pro-prio agio nel suo sito senza do-ver avere la necessità di chie-dere via e-mail modifiche o al-tro. Questo però non escludeche l’esistenza di un eccellenteservizio ai consumatori cheaiuti i navigatori in difficoltà siaun altro elemento importantenella scelta dell’hosting. Perquanto riguarda la scelta di unapiattaforma Linux o Windows èuna questione che può interes-sare soprattutto chi ha in pro-gramma l’allestimento di siticomplessi che prevedono rela-zioni con i database. In casocontrario la piattaforma ha po-ca importanza. �

Luigi Ferro

Anni fa gli squatter occu-pavano le case. Poi è arri-vata Internet e qualcuno

ha pensato fosse il caso di oc-cupare anche il Web. Nascecosì il cybersquatting, l’occu-pazione abusiva di domini. Inpratica, il furbo di turno, deci-de di acquistare un dominioche guarda caso è uguale alnome o al marchio di un’a-zienda. Di solito lo fa solo perpoi rivenderlo a caro prezzoma può anche utilizzarlo persfruttare la notorietà del mar-chio.

Così un mcdonald.it può di-ventare per esempio un sitoper parlare male degli ham-burger o cocacola.it per direquanto fanno male le bibitegassate. Peccato però che,passata l’equiparazione delnome a dominio con il brand,questa pratica non sia legale.Internet non è il selvaggio We-st dove vige la legge del piùforte o semplicemente di chiarriva prima, ma un luogo vir-tuale con regole assolutamen-te reali. Per questo motivo si èproceduto a varare normeprecise per dare ai domini i le-gittimi proprietari. Le proce-dure di rassegnazione dei no-mi a dominio sono denomina-te MAP (Mandatory Admini-strative Proceeding) e sonoattivate da Enti conduttoriche hanno ricevuto l’autoriz-zazione a operare dalla Na-ming Authority. Il procedi-mento avviato dagli enti con-

duttori ha natura amministra-tiva e non esclude quindi lapossibilità di ricorrere allamagistratura ordinaria. A van-taggio di questa soluzione,però, c’è la velocità della pro-cedura. Secondo le regole sta-bilite dalla Naming Authorityè possibile ricorrere sotto trecondizioni:

1) quando il nome a domi-nio utilizzato da un terzo siaidentico o tale da indurre aconfusione rispetto ad un mar-chio su cui egli vanta diritti osia identico al proprio nome ecognome;

2) se l'attuale assegnatarionon abbia alcun diritto o titoloin relazione al nome a dominiocontestato;

3) il nome a dominio sia sta-to registrato e venga utilizzatoin mala fede.

Chi ricorre potrà ottenere larassegnazione del nome a do-minio in caso di presenza con-temporanea della prima e ter-za condizione e il presunto cy-bersquatter non provi di averediritto o titolo in relazione aldominio contestato. Per quan-to riguarda il secondo puntoper poter continuare a utilizza-re il dominio il resistente (coluiche ha acquistato il nome a do-minio oggetto della contesa)deve dimostrare di:

a) aver utilizzato o di esser-si oggettivamente preparatoad usare, in buona fede, il no-me a dominio o un nome adesso corrispondente per offer-

ta al pubblico di beni e servizi,prima di aver avuto notiziadella contestazione;

b) essere stato conosciuto,personalmente, come associa-zione o ente commerciale con ilnome corrispondente al nome adominio registrato, pur nonavendo registrato il relativo mar-chio;

c) aver effettuato un legitti-mo uso commerciale o noncommerciale, del nome a do-minio, senza l'intento di sviarela clientela del ricorrente o diviolarne il marchio registrato.

In base a queste regole lo sti-lista Giorgio Armani non ha po-tuto prendere possesso del no-me a dominio armani.it, già re-gistrato dal timbrificio Armani,mentre la Warner Village Cine-ma ha ottenuto Warnervillage.it.

www.nic.it/NA/maps/ è l’in-dirizzo presso il quale si trova-no i link agli enti conduttori peri domini .it, mentrewww.icann.org/udrp/appro-ved-providers.htm è l’altro in-dirizzo per i domini .com, .net,org.

I costi della procedura, a ca-rico del ricorrente, variano aseconda di quanti saggi fannoparte del collegio e possonoandare per esempio da 800 eu-ro (un dominio con un saggio)fino a 2.240 (un dominio contre saggi). La decisione devepervenire entro sessanta gior-ni dalla data di presentazionedel reclamo. �

L.F.

Quando ti “rubano” il sito

37/88

4a lezione

Nelle lezioni precedentiabbiamo visto come pro-gettare e realizzare un si-

to statico e come strutturarepagine modello da utilizzarecome elemento standard perconferigli una certa omoge-neità di layout e di navigazio-ne.

Adesso è arrivato il momen-to di versare il contenuto, co-minciando dal testo che costi-tuisce di gran lunga l'elementopiù comune di un sito e di con-seguenza prevede anche la piùgrande varietà di tag, ciascuno

con funzioni specifiche. La gestione del testo solleva

una questione che avevamogià anticipato all'inizio del cor-so, vale a dire la differenza tramarcatori strutturali e marca-tori stilistici.

HTML, infatti, nasce in ori-gine come linguaggio struttu-rale. I suoi tag servono a indi-care il ruolo che un determi-nato componente svolge all'in-terno della pagina e non il mo-do in cui questo debba essererappresentato.

Spetta al browser decidere

in che modo visualizzarlo, ba-sandosi sulle caratteristichedel computer e sulle eventualipreferenze indicate dall'uten-te. Tuttavia, l'impiego dei solitag strutturali codificati nelleprime due versioni di HTMLproduceva pagine estetica-mente orribili, del tutto ina-datte alle esigenze della nuovaforma di editoria che si stavasviluppando sul Web.

Prendiamo l'esempio dellamarcatore <h#> che identificaun titolo (heading) e al quale sipossono associare fino a sei li-

velli consecutivi così da deter-minare una struttura gerarchi-ca di titoli e sotto-titoli:<h1></h1> seguito da <h2></h2> eccetera.

Benché offra un sistemapratico per strutturare docu-menti di tipo scientifico, pro-duce una visualizzazione deltutto sproporzionata rispettoal testo normale, identificatodal tag <p>, decisamente brut-ta a vedersi.

Inoltre né <h#> né <p> con-sentono di variare il tipo difont utilizzato nella pagina e il

Lezione 1:Competenze e strumenti(disponibile integralmentesul 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

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

• Progettare un sito statico • Progettare la pagina• Pagine HTML e marcatori • Strutturare i contenuti della pagina• Adobe GoLive 6.0• Spiegazione dei tag HTML per una pagina

vergine

• Esercizi su come creare una paginavergine e su come progettare un sito

Lezione 3:Modelli di pagina e tabelle(disponibile integralmente sul CD)

• La tabella come elemento strutturale• Progettare layout fluidi e statici• Costruire template con le tabelle

di layout • NamoWeb Editor5: per siti statici

professionali• Dimensionare tabelle e celle fluide,

dimensionare tabelle con celle miste,allineamento spontaneo delle tabelleconsecutive

• Template con struttura complessa• Template con tabelle nidificate• Esercizi

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

• 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 6:Siti interattivi

Lezione 7:Interazione sul server

Lezione 8:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Roberto Mazzoni

�

il corso èsul CDn. 68

� A scuola con PC Open

ProgettoWebMaster1 Stile e struttura: usare i tag HTML nativi

38/88

4a lezione

relativo colore, e ben sappia-mo che testi uniformementeneri e tutti con carattereTimesRoman non facilitano il rico-noscimento e la lettura "tipo-grafica" di una pagina edito-riale. Anzi, Times Roman è na-to per funzionare bene sullacarta, mentre rende male sulloschermo.

Esistono invece font conce-piti espressamente per il Webche sono ormai riconosciutida tutti i browser e che facili-tano la lettura a video, unesempio in tal senso il Verda-na, evoluzione telematica del-lo storico Helvetica.

Tag e attributi deprecatiL'esigenza di fornire ele-

menti per il controllo della vi-sualizzazione a video del testoha portato all'inserimento nel

linguaggio HTML di marcatorie attributi con funzioni unica-mente stilistiche, come adesempio la coppia di tag<font></font> che determina iltipo, la dimensione e il coloredella font attribuita al brano ditesto che racchiude.

È proprio grazie a questi tag"irregolari" che sono potuti na-scere i primi siti editoriali e igrandi portali, ma il loro im-piego indiscriminato ha porta-to a pagine complesse da ge-stire, alterando la "purezza"originale di HTML.

Con la versione 4 di questolinguaggio il W3C (World WideWeb Consortium – www.w3c.org) ha cercato di riporta-re ordine mantenendo compa-tibilità con i precedenti tag sti-listici, ma offrendo un'alterna-tiva attraverso l'impiego di

uno strumento aggiuntivo: i fo-gli di stile in cascata (Casca-ding Style Sheets).

Purtroppo, come ben sap-piamo, i produttori di browsernon sempre dedicano la mas-sima priorità all'adeguamentonei confronti degli standard eperciò a tutt'oggi il supportoper i fogli di stile non è com-pleto.

Tuttavia è già possibile rim-piazzare il tag <font> quasiovunque e la specifica 4.01 ciaiuta a trovare la giusta transi-zione per arrivare a tale risul-tato, identificando attributi etag deprecati e indicando co-me e dove sostituirli.

Naturalmente non è obbli-gatorio sposare i fogli di stile eci sono ancora molti siti in cir-colazione che impiegano libe-ramente il tag <font> e molti al-

tri artifici deprecati. Funziona-no e continueranno a funzio-nare anche in futuro, ma limi-tano moltissimo l'evoluzioneverso lo standard XML (eXten-sible Markup Language) cheimpone il massimo rigore nellaseparazione tra informazionidi struttura e informazioni sti-listiche.

Di fatto, scoprirete che l'im-piego dei fogli di stile offre so-luzioni più eleganti e più gesti-bili rispetto ai corrispettivi tagstilistici del vecchio HTML 3.2,ma bisogna conoscerne le sfu-mature e sapere come farliconvivere al fine di garantire lamassima compatibilità con ivari tipi di browser in circola-zione.

Markup fisici e logiciCominciamo con l'esamina- �

CSS (Cascading Style Sheets):fogli di stile in cascata, unsistema concepito nel 1996 perassegnare attributi stilistici aglielementi di una pagina Web inmodo distinto e complementarerispetto al linguaggio HTML.Consentono di definire numerosiattributi tipografici per ciascunelemento presente nella pagina,oltre che indicarne la posizione eil comportamento al verificarsi dialcune circostanze (passaggiodel mouse sopra la parola ofrase, eccetera).Consentono di centralizzare in unsolo documento tutti i parametristilistici di un sito così che, conuna sola modifica, sia possibilevariare tutte le pagine del sito.Alleggeriscono le paginemedesime poiché le informazionistilistiche per un certo sitovengono caricate una volta sola.Garantiscono compatibilità tra idiversi browser, dispensando ilWebmaster dall'usare tagparticolari per ciascuno.Possono anche funzionare inabbinamento a documenti XMLper fornire le informazioni dipresentazione.La versione corrente è la 2.0,ma il W3C sta già lavorando alla3.0

DOM (Document Object Module): un modello mediante il quale èpossibile manipolare gli oggettiche sono contenuti in unapagina. Per oggetti s'intende glielementi (la combinazione del

tag di apertura, degli eventualiattributi, del tag di chiusura e deltesto racchiuso tra i tag), icollegamenti ipertestuali e altroancora. Diventa quindi possibilecancellare, aggiungere emodificare un elemento,cambiarne il contenuto oppureaggiungere, cancellare emodificare un attributo.Ad esempio è possibile chiederevia programma l'elenco di tutti glielementi predenti nel documentoche sono identificati dal tag<h1>.

HTML 4.01 (HyperText MarkupLanguage): lo versione correntedel linguaggio di marcatori (markup) per la costruzione di pagineWeb. Definita per la prima voltanel dicembre 1999 comeevoluzione della precedenteversione 4.0 (dicembre 1997)stabilizza quest'ultima in terminidi tag e d'integrazione con i foglidi stile, aggiungendo il supportoper il modello DOM (DocumentObject Model) per la creazione emanipolazione di documentiHTML via programma.

SGML (Standard GeneralizedMarkup Language): è unmetalinguaggio, vale a dire unlinguaggio per definirne altri,standardizzato nel 1986dall'International StandardOrganization (ISO). All'epocaesistevano diversi linguaggi dimarkup, ma nessuno di essi eraportabile, vale a dire che erano

nati per un particolare tipo dicomputer e un particolare tipo diambiente software. Con SGML siè creata una base teorica per ladefinizione di altri linguaggi (tracui HTML e XML) che sonopienamente portabili.

XHTML 1.0 (ExtensibleHyperText Markup Language): lostandard che definisce la"riscrittura" di HTML secondo glistandard di XML. XHTML 1.0 èconcepito per facilitare latransizione graduale da HTML4.01 verso il nuovo mondo XMLche è assai più rigoroso intermini di sintassi e fortementeorientato all'uso delle pagineWeb come combinazioni dioggetti da manipolare viaprogramma. La specifica XHTML1.0 è stata pubblicata nelgennaio del 2000 e aggiornatanell'agosto del 2002 percorreggere errori segnalati neiprimi due anni d'impiego.Costituisce il primo passo per lamigrazione verso siti di nuovagenerazione

XHTML 1.1: questa versione èmolto più rigorosa rispettoXHTML 1.0 e non concede alcuncompromesso di compabilitàverso i tag deprecati che ancoratroviamo in HTML 4.0.Raggruppa in moduli i varielementi previsti dal linguaggioXHTML così da facilitarnel'impiego all'interno didocumenti che usano altri

insiemi di tag (come ad esempioMathML che usa XML perdefinire tag specifici per idocumenti matematici).

XHTML 2.0: nuovo standard invia di definizione, la cui versionepiù recente risale al dicembre2002. È incompatibile con leprecedenti versioni XHTML 1.0 e1.1 Il W3C sta lavorando allaversione 2.0, aggiornata adicembre 2002.

XML (Extensible MarkupLanguage): un linguaggio dimarcatori che vi permette disviluppare i vostri marcatoripersonalizzati da utilizzareall'interno di applicazioniparticolari. In pratica unlinguaggio per lo sviluppo dilinguaggi. Non si occupa affattodi definire la presentazione avideo dei vari elementi, ma neclassifica solo la natura.Non costituisce una derivazionedi HTML, sebbene mantengadiversi elementi di somiglianza,rappresenta inveceun'evoluzione diretta dell'SGMLda cui HTML è un semplicederivato.

XSL (Extensible StylesheetLanguage): linguaggio per ladefinizione di fogli di stile daabbinare a documenti XML.Viene utilizzato ancora pocoperché molto complesso eorientato ai programmatori piùche ai creativi.

GLOSSARIO

39/88

Tutti i browser hanno unacaratteristica in comune: generareuna presentazione del contenutoche sia adatta al tipo di computersu cui stanno funzionando,interpretando a proprio modo leinformazioni della pagina edeliminando il superfluo o ciò checredono tale. In effetti il Web ènato in un contesto accademicodove crediamo che gli autorifossero più concentratisull'informazione che volevanotrasferire che non sulla sua formae c'era l'esigenza di garantire cheun testo composto su un tipo dicomputer rimanessecomprensibile anche quandotrasferito altrove. Mancando diqualsiasi funzioni tipografica nellaversione 1.0 e 2.0 di HTML,l'unico modo disponibile perimpaginare le informazioniconsisteva nell'allineare i varielementi all'interno della colonnadi testo usando spazi multipli,spazi che possono essere usaticome rientro per le righe di unparagrafo oppure comedistanziatori tra le voci di unindice e i numeri di paginaall'altro estremo della riga.

Il problema è che tali spazipossono cambiare dimensionequando mostrati su computerdiversi con font differenti e tutti gliallineamenti costruiti in originedall'autore finiscono perscombinarsi creando confusioneanziché aiutare la comprensionedel contenuto, inoltre molti"scrittori" non professionaliinseriscono distrattamente due otre spazi tra le parole mentre ledigitano, presentando undocumento che ha un aspettotrasandato.Al fine di prevenire taliinconvenienti e filtrare gli errori,tutti browser eliminanoautomaticamente qualsiasi spazioaggiuntivo e richiedono all'autoredi specificare un particolare tipodi entità nel caso voglia avere unaserie di spazi consecutivi,rendendolo in tal modoconsapevole che si tratta di unasoluzione particolare di cui siassume piena responsabilità.Tale entità prende il nome dispazio unificatore (non breakingspace) e si scrive &nbsp;all'interno della pagina HTML(ripetendolo per ogni singolo

spazio). Lo spazio unificatoresvolge tre funzioni: impedisce laseparazione di due parole in finedi riga per effetto del ritorno acapo automatico eseguito dalbrowser, blocca una cella ditabella oppure un paragrafomostrando al browser che nonsono vuoti e perciò non possonoessere eliminati in automatico,inserire spazi consecutivi multipliall'interno del testo per crearerientri e spaziature impossibili congli spazi convenzionali.È chiaro che anche lo spaziounificatore non risolve il problemadelle diverse dimensioni chepossono essere attribuite aicaratteri, e perciò agli spazi, alvariare del tipo di computer.Per tale motivo HTML prevede unaserie di altri marcatori cheindicano al browser di utilizzare uncarattere monospaziato aliastesto a spaziatura fissa.Si tratta di un termine preso aprestito dal mondo della tipografiae indica un particolare font dovetutti i caratteri,indipendentemente dalla loroforma e dal fatto che sianomaiuscoli o minuscoli occupano

tutti lo stesso spazio,corrispondente di solito a quellonecessario per il carattere piùlargo dell'alfabeto usato (la Mmaiuscola). Lo stesso spazioviene naturalmente occupatoanche dai singoli segnid'interpunzione e dagli spazieventualmente presenti perciò gliallineamenti verticali tra righediverse vengono garantitiperfettamente indipendentementedal contenuto di ciascuna di esse. Il prezzo che si paga è di avere untesto goffo e sgradevole a vedersie perciò anche difficile daleggere. In effetti, la scelta diattribuire una spaziatura diversaai vari caratteri tipografici serveproprio a facilitarne la lettura, sucarta e a video, e a fornire unacerta armonia estetica.Se osservate una pagina digiornale noterete che la iminuscola occupa meno spazio inorizzontale rispetto alla j erispetto alla M o T maiuscole.Questo genere d'impostazioneprende il nome di spaziaturaproporzionale. I caratterimonospaziati vengono di solitoutilizzati solo per rappresentare

4a lezione

re la differenza tra tag fisici(stilistici) e logici (strutturali)usando un esempio classico:

l'evidenziazione di una parolao di una frase rispetto al restodel paragrafo. È possibile rea-lizzarla mediante due tag fisi-ci: <b></b> per il grassetto(bold) e <i></i> per il corsivo(italic) oppure mediante duecorrispettivi tag logici:<strong></strong> ed<em></em> (emphasize).

Nel primo caso diciamo albrowser di visualizzare obbli-gatoriamente un testo in gras-setto e un testo corsivo (diffi-cilmente leggibile a video), nelsecondo caso gli diciamo sem-plicemente di rafforzarne la vi-sualizzazione oppure di enfa-tizzarlo, lasciandolo libero discegliere il modo più idoneoper farlo.

Nella pratica, <b> e <strong>produrranno entrambi un te-sto in grassetto e <i> ed <em>produrranno entrambi un te-sto in corsivo, ma <strong> ed<em> sono consigliati dallostandard HTML 4.01 puristiperché indicano al browseruna caratteristica del testo,vale a dire che si tratta di pa-

role da mostrare con più forzaoppure da enfatizzare, anzichéspecificare come farlo.

In effetti questi ultimi dueattributi potrebbero ancheprodurre un testo sottolineatosu un monitor che non sia ingrado di generare grassetto esottolineato, come nel casodel display di molti telefonini.Esistono altri esempi di que-sto tipo come nel caso del sot-tolineato e del barrato che siottengono rispettivamentecon i due tag fisici <u> e <s>,ma che possono essere ripro-dotti anche con due nuovi tagspecifici di HTML 4.01: <ins> e<del>. Il primo indica concet-tualmente l'inserimentod'informazioni che potrebberoessere temporanee e che de-vono essere verificate oppureche potrebbero cambiare infuturo, il secondo indica inve-ce la cancellazione visiva delbrano d'informazione che rac-chiude. Vediamo perciò chel'impiego di tag logici aggiungesignificato al semplice effettografico e che tale significato

può quindi essere utilizzato al-l'interno di programmi di let-tura automatica delle pagineWeb (vedremo meglio questogenere di applicazioni quando

�

Gestire gli spazi nel testo

In questa figura notiamo come gliattributi tipografici di base assegnati daHTML a un testo formattato unicamentecon tag strutturali siano inadeguati. Iltitolo di primo livello appare gigantescorispetto al testo e con una spaziaturaeccessiva sia sopra che sotto. Gli altridue livelli di titolo mostrano lo stessoproblema, benché ridimensionato.Notiamo invece l'effetto identico ottenutocon i tag stilistici <b> e <i> rispetto aicorrispettivi tag strutturali <strong> ed<em> (consigliati)

Il listato HTML che produce l'effettovisualizzato nella figura precedente.Notate che ciascun titolo dispone di unproprio tag e che il testo è integralmenteracchiuso in un tag di paragrafo che loidentifica. Notate che la "è" vienetrasformata in una delle entità previsteda HTML per la codifica dei caratteriparticolari, in questo caso &egrave; -notate che l'entità comincia sempre con& e termina con il punto e virgola

40/88

parleremo di XML). Nella ta-bella "Marcatori per formatta-re il testo" trovate una sintesidi tutti i tag compatibili conHTML 4.01 per modificare l'a-spetto e il significato di unblocco di testo.

Ma cosa succede quandodecidiamo d'intervenire su in-teri blocchi di testo modifi-candone, ad esempio, font, co-lore, dimensione, allineamen-to e posizionamento rispettoad altri elementi?

Dobbiamo decidere se se-guire la vecchia strada dei tagstilistici oppure abbracciare lanuova dei fogli di stile.

Vediamo innanzi tutto la pri-ma soluzione, cioè cosa si puòfare utilizzando i tag e gli attri-buti che ereditiamo dall'HTML3.2. Il primo tra questi è <p>che definisce il paragrafo eche impone al browser per lasua sola presenza d'inserireuna riga vuota prima e dopo ilparagrafo stesso.

Alcuni lo usano anche dasolo per inserire spazi bianchi

all'interno della pagina, ma ibrowser di futura generazionepotrebbero filtrare i paragrafivuoti eliminando gli spazi cosìintrodotti.

Perciò alla pari delle tabelle,dove non è consigliabile crea-re celle completamente vuoteanche se servono al fine dicreare spazi bianchi, il consi-glio è di riempire il paragrafocon almeno uno spazio bianconon eliminabile, che in HTMLviene generato con l'entità&nbsp; (non breaking space dicui parliamo più dettagliata-mente in un riquadro a parte"Gestire gli spazi nel testo").Nell'HTML 3.2 il tag di chiusu-ra </p> è facoltativo, ma di-venta obbligatorio in XHMTL1.0 (la versione di HTML checonsente l'impiego delle fun-zioni avanzate di XML). L'attri-buto "storico" del tag <p> de-precato da HTML 4.01 è alignche regge i parametri: left, cen-ter, right, justify (quest'ultimosupportato solo da vecchieversioni di browser), per alli-

neare il testo al bordo sinistro,destro oppure al centro dellapagina.

Nel caso non volessimo in-serire una riga vuota al termi-ne del paragrafo, ma sempli-cemente andare a capo oppu-re volessimo inserire diverserighe vuote consecutive, uti-lizzeremmo il tag <br> (break)che fa continuare il paragrafoe ne mantiene le impostazionianche dopo il ritorno a capo enon richiede tag di chiusura.

Il deprecato tag fontIl marcatore fisico più im-

portante per la "tipografia" sulWeb, è <font> che regge diver-si attributi di cui i principalisono: face per indicare il tipodi carattere, size per definirnele dimensioni e color per spe-cificarne il colore.

Il tag non tiene conto dellastruttura del documento per-ciò potete attribuire un font auna singola lettera, a una sin-gola parola o porzione dellastessa, a frasi e paragrafi inte-

ri oppure a tutta la pagina.Il suo effetto viene unica-

mente delimitato dalla posi-zione dei tag di apertura e

4a lezione

listati di programma, brevi elenchio altri brani di testo brevi dove gliallineamenti siano più importantidell'omogeneità visiva e dove,semmai, sia opportuna una nettadistinzione rispetto alla parteprincipale del testo.Il marcatore storico usato perquesto genere di funzione è <pre>che definisce un testo"preformattato", tipicamenteusando il font courier a spaziaturafissa e inserendo una riga vuotaprima e dopo il brano compresotra i due tag. È stato deprecatodalle specifiche HTML 4.01perché si tratta di un markupfisico (stilistico) e non logico(strutturale), inoltre non funzionain maniera omogenea in tutti ibrowser. Ha il pregio di mantenerequalsiasi indicazione diformattazione contenuta nel testooriginale, compresi spazi multipli,ritorni a capo nel testo elunghezza delle righe. Dispone diun singolo attributo facoltativo,witdh, che determina il numeromassimo di caratteri, spaziinclusi, che possono comparire suuna riga e forza il ritorno a capo alsuperamento di tale valore(l'attributo width non è supportatoda Internet Explorer 6.0 mentrefunziona ancora in Netscape 7.0).

Il marcatore <pre> riconosce eriproduce anche eventualigrassetti e corsivi presenti neltesto. È sicuramente il piùflessibile tra i marcatori per lagenerazione di testomonospaziato ed è molto utilequando si devono riconvertire peril Web documenti che sono giàstati impaginati con unwordprocessor e non vale la penarimaneggiarli daccapo. È l'unicoche conservi integralmente ilcontenuto originale e non èpossibile riprodurne la totalitàdelle funzioni nemmeno con i foglidi stile (che non conservano glispazi multipli e i ritorni a capo).Esistono diversi altri markup fisicie logici che producono testomonospaziato, elencati percomodità nella tabella "Marcatoriper formattare il testo" e di cuiriportiamo le caratteristichedettagliate sul CD all'interno deldocumento "Prontuario dei tag ditesto". Tra i marcatori riportati intabella, segnaliamo comunque<blockquote> che consente diprodurre blocchi di testoevidenziati all'interno deldocumento principale medianteun rientro su entrambi i lati. Tral'altro, <blockquote> è l'unicomarcatore HTML a consentire la

nidificazione di se stesso, vale adire che potete inserire diversi<blockquote> uno dentro l'altro alfine di produrre rientri sempre piùprofondi, usando una sintassi deltipo <blockquote>Primo rientro<blockquote>Secondo rientro

</blockquote></blockquote>. Ilproblema di questo approccio èche richiede l'impiego di unmarcatore strutturale, nato perevidenziare delle citazioni, per unoscopo stilistico che in origine nonera previsto. Quando un motore di

ricerca passa inesame le paginedove<blockquote> èstato utilizzatounicamente perprodurre unrientro,codificherà comecitazione qualcosache non lo èaffatto. Lo stessoeffetto può essereprodotto piùefficacemente econ maggioreaccuratezzausando i fogli distile in cascata.

Qui vediamo il marcatore <pre> all'opera. Nel primo riquadro in alto compare il testooriginale scritto con Word dove mettiamo in evidenza gli spazi e i ritorni a capogenerati con il wordprocessor. Subito sotto notiamo come lo stesso brano di testo sitrasformi quando copiato direttamente in una pagina HTML: gli spazi multipli e i ritornia capo scompaiono, producendo una singola riga ininterrotta e illeggibile (grassetto ecorsivo 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 aspaziatura fissa invece del Times a spaziatura proporzionale scelto di default dalbrowser

I vari effetti che possiamo crearemediante l'allineamento del testo a livellodi paragrafo e l'applicazione del tag<font> per modificare il tipo, il colore e ladimensione del carattere. Il tag <font>,deprecato da HTML 4.01, prevede settedimensioni assolute diverse per icaratteri più un'impostazione relativa cheva da – 7 a + 7 e ingrandisce odiminuisce il carattere pre-impostato nelbrowser

�

41/88

4a lezione

� chiusura: <font> e </font>. L'u-nica eccezione in questo sen-so, come vedremo, sono le ta-belle che richiedono di indica-re il tag <font> per ogni singolacella anche nel caso in cui i pa-rametri restino invariati perl'intera tabella.

L'attributo face consented'indicare diversi tipi di font,da scegliere in sequenza e inalternativa al principale qua-lora questo non fosse disponi-bile sul browser, size inveceindica dimensioni assolute orelative.

Si va da 1 a 7 oppure da –7 a+7. I due tipi di valori hanno si-gnificati diversi. Il primo sta-bilisce una dimensione fissadove il default è 3 e corrispon-de alla dimensione base asse-gnata dal browser al testo (cir-ca 10 pixel).

Il secondo stabilisce inveceil livello d'ingrandimento o ri-duzione rispetto al valore didefault (3 appunto), perciò –1corrisponde a 2, +1 corrispon-de a 4, eccetera.

In entrambi i casi si tratta divalori dinamici, vale a diresensibili all'impostazione delbrowser per visualizzare il te-sto.

Se per esempio l'utente do-vesse scegliere da Internet Ex-plorer il parametro Visualizza> Carattere > Grande tutta lascala di valori verrebbe alzatadi un livello, se invece sce-gliesse Visualizza > Carattere >Molto piccolo tutta la scala divalori verrebbe ridotta di duelivelli. Il valore di default per ilbrowser corrisponde natural-mente a Visualizza > Carattere> Medio.

Perciò impostando la di-mensione del carattere usan-do <font size> lasciamo liberol'utente d'ingrandire e rimpic-ciolire il testo a piacere a se-conda delle sue necessità divisione. Color infine accetta,come qualsiasi altro tag chepreveda l'uso del colore, il no-me di uno dei sedici colori co-dificati in HTML oppure il co-dice esadecimale della tintascelta, che di solito viene pre-levata da una palette di 216 co-lori cosiddetti sicuri, cioè vi-sualizzabili senza alterazioniin qualsiasi tipo di browser siasu Windows sia su Macintosh(per un riferimento vedihttp://www.webmonkey/ refe-rence/color_codes/ e il riqua-dro "Colori sicuri").

Nell'impiego del tag <font>

Il codice usato per crearela figura precedente

mostra che gli attributi fontpossono essere nidificati e

che quelli più internoereditano i parametri del

più esterno (in questocaso colore e tipo) mapossono impostarne dipropri (come in questo

caso la dimensione) cheha priorità rispetto al tag

più esterno. Notate anche che il tag<font> può abbracciare

una quantità indefinita ditesto, dalla singola parola

all'intero documento. I tag nidificati all'interno

vanno chiusi, comesempre, prima di chiudere

il tag più esterno (qui evidenziato in viola)

Marcatori per formattare il testoTag fisici Tag logici Effetto visibile Significato

<b> <strong> grassetto evidenziato<i> <em> corsivo evidenziato<u> <ins> sottolineato inserimento temporaneo<s> <del> barrato cancellazione visibile<pre> monospaziato con riporto di tutti gli testo preformattato

spazi e ritorni a capo presenti nel documento originale e con riga vuota sopra e sotto. Conserva grassetti e corsivi.

<tt> <kbd> monospaziato testo non formattabile<samp> monospaziato testo campione <code> monospaziato codice programma

<blink> lampeggiante (Netscape) evidenziato<address> corsivo e ritorno a capo indirizzo<cite> corsivo citazione<blockquote> rientro con riga vuota sopra e sotto citazione a blocco<big> aumento dimensioni corpo testo grande<small> riduzione dimensioni corpo testo piccolo<sub> testo a pedice pedice<sup> testo ad apice apice<abbr> nessuno abbreviazione<dfn> nessuno definizione termine<q> nessuno citazione in paragrafo<var> corsivo nome di variabile<h1>-<h6> aumento dimensioni e spaziatura titolo e titolini

Tutti questi marcatori possono essere inseriti all'interno di un paragrafo, ma <h#> e <blockquote> possono anchevivere separatamente. Tutti i tag fisici sono deprecati da HTML 4.01

notiamo una caratteristica checostituisce la base per il fun-zionamento dei fogli di stile incascata, come vedremo piùavanti.

È possibile nidificare diversitag <font> ereditando di livelloin livello le caratteristiche deilivelli superiori. Nell'esempioche riportiamo in figura, l'inte-ro documento è contenuto al-l'interno di un tag <font> chespecifica il tipo Verdana, il co-lore rosso e una dimensionepari a quattro (+1).

I primi due attributi si man-tengono costanti per l'interodocumento poiché non modi-ficati dai tag <font> successivi,mentre varia invece la dimen-sione, indicata nel tag che èpiù vicino alla porzione di te-sto a cui si applica.

Si dice quindi che gli attri-buti si applicano in cascatacon i livelli superiori che in-fluenzano tutto ciò che con-tengono, ma che possono es-sere modificati dai livelli infe-riori che hanno una prioritàcrescente a mano a mano chesi è fisicamente più vicini albrano di testo da modificare.

Altri tag logici per il testoEsistono situazioni in cui il

testo non fluisce a colonne,ma richiede una formattazioneparticolare, come nel caso del-le liste. HTML prevede una se-rie di marcatori specifici perqueste esigenze: <ol> (orderedlist) e <ul> (unordered list) de-limitano una lista le cui vocisono rispettivamente numera-te e non numerate.

Ciascuna voce della listaviene poi identificata median-te la coppia di tag <li></li> (li-st item). Nel caso di liste nu-

merate è possibile determina-re il tipo di numerazione inuso (araba, romana, lettere) ela lettera o numero da cui farpartire l'elenco.

Nelle liste non numerate in-vece è possibile evidenziareogni singola riga con un palli-no (default), un quadrato o uncerchio. Tutte le impostazionistilistiche previste dal tag<font> si applicano alle liste,come pure alle tabelle checontengano testo. �

42/88

4a lezione

I Cascading Style Sheets (foglidi stile in cascata) costitui-scono lo strumento più im-

portante per gestire gli attribu-ti tipografici di un sito moder-no. Sebbene esistano fin al1996, hanno trovato la loro dif-fusione naturale con HTML 4.0e il loro pieno sviluppo conHTML 4.01, che ne recepisceappieno le caratteristiche.

Offrono numerosi vantaggi:controllare l'aspetto del testo edegli altri elementi della paginacon una precisione molto su-periore a quella possibile me-diante i tag fisici di HTML, rag-gruppare tutte le informazionistilistiche di un sito all'internodi un documento che venga ca-ricato una sola volta per quelparticolare sito, alleggerendole singole pagine e facilitandoeventuali modifiche e aggior-namenti. Basta cambiare unadelle voci contenute nel fogliodi stile affinché la variante sipropaghi immediatamente sututte le pagine del sito che con-tengono quel particolare ele-mento.

Purtroppo i browser fino allagenerazione 4 non erano com-patibili con le funzioni dei CSSe perciò si è dovuto aspettarela diffusione capillare della ge-nerazione 5 per cominciare avedere siti che ne facessero unimpiego concreco.

La compatibilità è cresciutaulteriormente con l'arrivo deibrowser della generazione 6 epoiché possiamo ormai consi-derare tramontata la stagionedei vari Internet Explorer 4.0 eNetscape 4.x, tanto vale abban-donare l'impiego dei tag fisici,in particolare <font> e abbrac-ciare in toto i CSS nella nostraprogettazione tipografica.

Raggiungeremo il doppioobiettivo di essere pienamenteconformi alle specifiche diHTML 4.01, che depreca l'usodi tag stilistici, e di beneficiaredelle evidenti potenzialità deiCSS.

Avendo così eliminato anchei vari tag particolari che ac-compagnavano le diverse fami-glie di browser, diventa possi-bile realizzare soluzioni tipo-grafiche che siano compatibilia trecentosessanta gradi, senzadoversi far carico di produrreversioni diverse della stessapagina a seconda del browser

utilizzato dal navigatore, comeinvece accadeva in passato.

Separare la forma dalla struttura

Il sogno di qualsiasi proget-tista di siti è la separazione de-gli attributi tipografici e stilisti-ci dalle componenti strutturalidella pagina, soprattutto in sitidi tipo dinamico.

Tale separazione è impor-tante per raggiungere un ade-guato livello di efficienza nellagestione del sito. Infatti, fintan-toché gli elementi stilistici so-no mescolati con il codiceHTML, è necessario chiamarein causa il Webmaster per ognisingola modifica estetica, mo-difica che deve essere replicataa mano, pagina per pagina.

Se poi si trattava di un sitodinamico, diventa addiritturanecessario chiamare in causaun programmatore oppure unWeb developer, perché il colo-re di sfondo e le font del testosono indissolubilmente legateai tag del linguaggio di scrip-ting che fa funzionare la paginain abbinamento al database.

Ogni modifica nell'aspettodella pagina diventa perciò co-stosa e impegnativa, tanto dascoraggiare la revisione stilisti-ca di molti siti che non riesco-no perciò a migliorare la pro-pria usabilità, la propria navi-gabilità e la propria esteticasulla scorta delle informazioniraccolte dai navigatori durantel'uso del sito.

I CSS sono il primo strumen-to che ha consentito di separa-re i due mondi e di lasciare unanotevole libertà d'intervento aicreativi senza interferire con illavoro di programmazione e digestione del codice HTML ese-guito dai tecnici.

Inoltre, fornendo una gam-ma di opzioni tipografiche mol-to ampia, ha consentito anchea chi non è creativo di produr-re risultati presentabili e gra-devoli, con poco sforzo.

La nascita dei fogli di stile edell'HTML 4.0 risolve ancheuna stortura concettuale intro-dotta nel Web con il rilasciodella versione 3.2 di HTML cheha rinnegato la natura originaledel linguaggio, nato per con-trollare la struttura e non lapresentazione di una pagina,per assecondare i desideri dei

vari produttori di browser,creando così enormi problemidi compatibilità e di manuteni-bilità dei siti, per non parlaredella loro usabilità.

Tuttavia i Cascading StyleSheets non si limitano agli attri-buti tipografici, bensì consen-tono di posizionare con preci-sione gli elementi sulla pagina,sostituendosi alle tabelle comemetodo per definire il layout, eintroducono anche una certadose d'interattività nella pagi-na, facilmente accessibile an-che da chi non conosce lin-guaggi di programmazione co-me JavaScript.

Relazionetra CSS e HTML

I fogli di stile definiscono uninsieme di regole per indicare iltipo di formattazione da appli-care ai contenuti di una paginastampata o visualizzata elet-tronicamente. Nascono con-cettualmente nel mondo dell'e-ditoria dove, per semplificare illavoro, gli attributi tipograficidi un libro vengono definiti pri-ma d'iniziarne la stesura e ven-gono mantenuti separati dal te-sto vero e proprio così da po-ter essere applicati in modouniforme a più testi della stes-sa collana e poter essere modi-

ficati rapidamente senza doverripassare a mano ogni singolapagina del volume.

Nel Web costituiscono uncomplemento di HTML e sisposano con i tag di quest'ulti-mo in modo abbastanza sem-plice e intuitivo. Per aggiun-gerli alla pagina basta digitarecodice aggiuntivo che non in-terferisce con il codice HTMLoriginale il quale viene comun-que riconosciuto senza pro-blemi dai browser di vecchiagenerazione. In effetti è persi-no possibile combinare nellastessa pagina CSS e marcatorifisici, come ad esempio <font>,al fine di avere la piena com-patibilità con tutti i tipi dibrowser in circolazione, sfrut-tando al tempo stesso le fun-zioni evolute dei fogli di stile.In tal caso, la pagina avrà unaspetto più gradevole quandovisualizzata da un browser digenerazione 5 o 6, ma sarà co-munque utilizzabile su unbrowser di generazione 4.

Le tre funzioni primarie diun foglio di stile sono: impo-stare gli attributi tipografici deltesto, definire un livello e la suaposizione nella pagina (vedre-mo più avanti di che si tratta),modificare le caratteristicheoriginali dei tag HTML. �

2 CSS e HTML 4.01

Esempio di un foglio di stile: ecco il formato tipico di un foglio di stile. È un semplicefile di testo o porzione di pagina HTML, dove ogni regola è composta da un selettore (inrosso) e da una dichiarazione (tra parentesi graffe) che riunisce una serie di proprietà edi valori corrispondenti che spiegano in che modo il selettore (un elemento HTML) deveessere visualizzato e perciò modificato rispetto alle proprie caratteristiche originali

43/88

4a lezione

Rispetto ai markup fisici diHTML e in particolare altag <font>, i fogli di stile in

cascata offrono moltissimepossibilità, tanto che uno stu-dio di tutte le loro funzioni ri-chiederebbe un impegno para-gonabile a quello speso per im-parare HTML. A differenza diquest'ultimo, però, i fogli di sti-le possono essere conosciutiun po' alla volta, esplorandonele funzioni a mano a mano chese ne presenti l'occasione e ag-giornando il sito gradualmente,ogni volta che si scopra qual-cosa di nuovo.

C'è anche un altro motivoper procedere con calma: lagran parte dei browser in cir-colazione sono pienamentecompatibili con le specifichedei CSS di livello 1, ma nonsupportano ancora appieno iCSS di livello 2 che aggiungonouna pletora di nuove funzioni,specie nella gestione di conte-nuti multimediali. Di conse-guenza conviene partire stu-diando le funzioni di livello 1(che costituiscono l'argomentocentrale di questa lezione) perpoi estendersi al livello 2 in unsecondo momento.

Il prezzo da pagare per l'a-dozione dei CSS è l'aggiunta diun nuovo linguaggio alla pro-pria cassetta degli attrezzi e alproprio sito, con la necessitàd'imparare complesse regoleastratte che governano eredi-tarietà ed effetto a cascata. Siproducono talvolta anche ef-fetti imprevedibili e incostanti,difficili da diagnosticare e ri-solvere anche per i limiti dimolti editor HTML oggi in cir-colazione, non dotati di speci-fiche utilità per la gestione deiCSS. L'unico programma checontenga una funzione diagno-stica specifica per i CSS è TopStyle 3.0, che funge anche daeditor testuale per pagineHTML, senza tuttavia rimpiaz-zare un vero e proprio ambien-te visuale. Di conseguenza co-stituisce un investimento ag-giuntivo.

La natura tipografica degli stili

Il primo ambito d'interventodei fogli di stile è nell'imposta-zione degli attributi tipograficidel testo. Non solo possiamoscegliere la font, il colore e le

dimensioni del carattere, comeavveniva nel tag <font>, mapossiamo anche stabilire conprecisione l'altezza di ogni let-tera, usando diverse unità dimisura, il peso delle stesse(sottile, normale e grassetto),la spaziatura, l'interlinea, even-tuali bordi, attributi come ilcorsivo e il maiuscoletto, effet-ti particolari come il sottoli-neato, il barrato e molto altroancora.

Nel caso si tratti di testo usa-to per collegamenti ipertestua-li, possiamo anche modificarnel'aspetto quando vi passi soprail cursore e una volta che siastato visitato. Inoltre, anzichéripetere in continuazione il tag<font> per ogni elemento, saràsufficiente stabilire una voltasola per l'intero sito l'aspettodel testo, dei titoli e dei link, peravere un'estensione automati-ca delle specifiche a tutte le pa-gine. Anche la gestione delletabelle viene potenziata e sem-plificata enormemente, poten-do definire attributi globali a li-vello di tabella, di riga e di cella.

Per comprendere i vari ter-mini usati nella definizione diquesti attributi bisogna cono-scere un po' di tipografia. Tan-to per cominciare, la proprietàpiù comune, font-family, de-scrive la famiglia di font scelteper quel particolare brano ditesto. Si parla di famiglia poi-ché si compone di tanti insiemidi caratteri con dimensioni di-verse, ciascuna delle qualiprende il nome di font. Tipo-graficamente, quando s'ingran-disce un carattere o lo si rim-picciolisce, si cambiano anchele caratteristiche delle varielettere che lo compongono peradattarsi al diverso effetto visi-vo prodotto dalle nuove di-mensioni.

La scelta di una singola fontall'interno della famiglia avvie-ne quindi mediante la proprietàfont-size che identifica l'altezzadelle lettere maiuscole per ilparticolare insieme che abbia-mo scelto. Tale altezza può es-sere espressa in pixel, bloccan-do la visualizzazione del testo auna dimensione precisa sulloschermo. Si ottiene così il pienocontrollo della visualizzazionedel sito e s'impedisce all'utentedi modificarla agendo sulle fun-zioni di dimensionamento pre-

viste dal browser. Lo svantag-gio è di complicare la vita a chiabbia difficoltà di lettura e direndere imprevedibile l'effettoin stampa. In alternativa i CSSoffrono altri due tipi di unità dimisura: assolute e relative. Leunità assolute definiscono unvalore rigoroso, alla pari deipixel, ma facilmente riconosci-bile anche dalla stampante: mil-limetri, centimetri, pollici, picae punti (un pica corrisponde a12 punti tipografici).

Queste ultime due sono en-trambe unità di misura tipogra-fica e sono da preferirsi alle mi-sure in pixel se volete anchestampare le pagine Web su car-ta senza sorprese. Nella pratica9 punti corrispondono a 12pixel (la misura più leggibileper un testo lungo sia a videosia in stampa), 8 punti corri-spondono a 10 pixel, una misu-ra adatta per le didascalie, e viadi questo passo. Le unità relati-ve lasciano invece libero l'uten-

te di ridimensionare il propriotesto, mantenendone tuttaviale proporzioni rispetto al restodella pagina. Si prestano allacreazione di effetti speciali.

Ad esempio possiamo deci-dere di impostare il testo gras-setto in modo che sia legger-mente più grosso del testo nor-male utilizzando l'unità di mi-sura em che in tipografia indicale dimensioni della M maiusco-la di un determinato font, inpratica la lettera più larga del-l'intera font rispetto alla qualesi misurano tutte le altre. Im-postando il grassetto in modoche sia 1.1 em avremo un gras-setto più corposo perché leg-germente più grande della fontnormale. Basta indicare b {font-size: 1.1 em} perché tutti i ca-ratteri bold dell'intero sito, nonimporta quale font e quale di-mensione, vengano maggioratidel 10% rispetto agli altri carat-teri del testo in cui sono conte-nuti: una finezza facile da rea-

3 Cosa si può fare con i CSS

Confronto tra CSS e <font>: qui vediamo la grande varietà di unità di misura e di effettiche 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 dimensionerelativa (size) in rapporto al default del browser.Con i fogli di stile possiamo invece replicare esattamente il comportamento dellemisure relative di font, mediante gli attributi relativi small, medium, large, eccetera; mapossiamo anche imporre una dimensione fissa in pixel o punti tipografici (quest'ultimapreferibile se vogliamo poi anche stampare le pagine). Possiamo anche maggiorare ledimensioni di una particolare porzione di testo (il grassetto "maggiorato" è del 10% piùgrande del testo normale a cui è abbinato), possiamo infine raggiungere dimensioniassolutamente inarrivabili con il tag <font> e aggiungere bordi, variamente colorati estrutturati, sfondi a tinta unita oppure composti da immagini e possiamo ancherestringere o allargare lo spazio tra le lettere e le parole, anche se quest'ultimafunzione non è supportata da Opera 5.0 e Netscape 7

44/88

4a lezione

lizzare che può migliorare laleggibilità del testo.

A qualsiasi elemento HTML,testo compreso, è possibile poiabbinare bordi, sfondi coloratiaddirittura immagini di sfon-do, con un controllo molto pre-ciso sulla forma e la posizionedegli stessi.

Ad esempio possiamo realiz-zare un testo bordato solo sutre lati. È anche possibile infinedeterminare con precisione laposizione degli elementi ri-spetto ad altri elementi conti-gui e rispetto al canovacciocomplessivo della pagina.

Purtroppo tutta questa li-bertà ha un prezzo: la poten-ziale incompatibilità con ibrowser più vecchi e anche,

per alcuni casi,con le versioni piùrecenti.

Quattro tipi di CSSEsistono quattromodi diversi perinnestare un fo-glio di stile all'in-terno di una pagi-na HTML. Il primo, cheprende il nome difoglio di stileesterno, è il piùdiffuso e consistenell 'aggiungerenell'intestazionedella pagina(<head>) un linkal documento checontiene il fogliodi stile (un sem-plice documentodi testo) affinchéquest'ultimo ven-ga caricato assie-me alla prima pa-

gina del sito. Mediante tale ap-proccio è possibile definire unsingolo foglio di stile per l'inte-ro sito e beneficiare della mas-sima flessibilità di modifica deiparametri. Il tag da utilizzare inquesto caso è <link> con l'indi-cazione del tipo di relazionetra i due documenti (attributorel) la posizione del foglio distile (attributo href) e la suanatura (type="text/css").

La dicitura completa per in-serire il foglio usato nelle pagi-ne del nostro CD è la seguente:<link rel="stylesheet"h r e f = " / z z z / s t i l i . c s s "type="text/css">, il valore dihref (hypertext reference) quiè indicato per la home page ecambia al variare della posi-

zione delle varie pagine nellastruttura di directory del sito.Il tag <link> va inserito nell'in-testazione di ciascuna pagina,al termine della zona compre-sa dalla coppia di tag <head></head>.

Il secondo modo per inseri-re un CSS nella pagina prendeil nome di foglio di stile incor-porato e consiste nel digitarela descrizione del CSS per inte-ro all'interno dell'intestazionedella pagina, racchiudendolaentro di uno speciale tag con-cepito allo scopo: <style>. Inquesto caso, il foglio di stile va-le solo per quella pagina parti-colare e dovremo aprire la pa-gina ogni volta che bisogneràmodificarlo, tuttavia avremocomunque il vantaggio di tro-vare tutte le informazioni stili-stiche racchiuse in un solopunto del documento anzichésparpagliate in mezzo ai tagdel contenuto.

Il terzo modo prende il no-me di foglio di stile importato ecostituisce una via di mezzotra i due definiti prima, il foglioviene incorporato nell'intesta-zione della pagina mediante iltag <style>, però proviene daun singolo documento centra-lizzato, identico per diversepagine. È un sistema usato dirado anche perché mal sup-portato da alcuni browser.

Il quarto tipo di CSS prendeil nome di foglio di stile in linea(inline) e viene inserito diret-tamente all'interno di un parti-colare elemento della pagina,come ad esempio nel tag diparagrafo <p> oppure nel tagdivisionale <div> oppure neltag di tabella <table> utilizzan-do l'attributo style seguito dal-la definizione delle proprietàche vogliamo attribuire a quelparticolare elemento rispettoalle specifiche generali del fo-glio di stile esterno oppure in-corporato. Da notare che me-diante l'uso del tag <div> op-pure <span> è possibile appli-care un foglio di stile a unaporzione liberamente definitadel documento (da una solalettera a un'intero blocco diparagrafi). Un esempio sareb-

be: <p style="font-family: Times;font-size: 18px"> che dice al pa-ragrafo corrente di visualizza-re il testo in Times a 18 pixel.Se volessimo realizzare lo stes-so effetto non sul paragrafo,bensì su una porzione più pic-cola di testo useremmo <spanstyle="font-family: Times; font-si-ze: 18px">testo da modificare</span>.

Le regole di costruzione dei CSS

Ogni regola dei CSS si com-pone di due parti: il selettore ela dichiarazione. Il selettore,posizionato a sinistra, defini-sce le parti del documento acui applicare lo stile. La di-chiarazione, sulla destra e se-parata dal selettore mediantedue punti, indica le varie pro-prietà e i valori per tali pro-prietà. Il selettore può corri-spondere a uno degli elementinativi di HTML, in tal caso par-leremo di selettore di tipo. Ilselettore h1, ad esempio, indi-cherebbe che lo stile si applicaa tutti i titoli di primo livello.La dichiarazione ospita invecetutti i possibili attributi stilisti-ci previsti per quel particolareoggetto.

Ad esempio, h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color:#003399 } indica che i titoli del-le nostre pagine saranno vi-sualizzati con il font Verdana,oppure in alternativa con Arial,Helvetica o con un qualsiasifont di tipo san serif (senzagrazie – le grazie sono gli arro-tondamenti che si notano alleestremità delle lettere di alcu-ne font aggraziate, come il Ti-mes Roman e che servono perfacilitare la lettura su carta,ma che mancano invece nellefont di tipo "bastone" che sonolisce e senza ghrigori e risulta-no più facili da leggere a scher-mo).

La regola indica inoltre cheil titolo dovrà avere una di-mensione di 16 pixel (il valoreè preciso, impossibile a defi-nirsi con il tag <font>) nonchéun colore blu. Notate che la re-gola si apre e si chiude con una

Inserire un foglio di stile esterno: nella gran parte dei siti che usano CSS il foglio distile è centralizzato. Lo si collega a ogni singola pagina mediante il tag <link> seguitoda un serie di attribiti obbligatori tra cui il riferimento ipertestuale (href) alla posizionedello stile nel sito

Incorporare un foglio di stile nella pagina: usando invece ilmarcatore <style> è possibile definire un foglio di stile chevale solo per quella pagina particolare. Qui notiamo che ilnostro foglio ipotetico contiene un elemento definito, table,che indica il tipo, la dimensione e il colore nero del testoda usare nelle tabelle contenute nella pagina. Seguono poiquattro classi generiche (dida, rosso, bianco e blu)corrispondenti ad altrettante varianti del testo da usaremediante il marcatore <span></span> direttamenteall'interno del testo della tabella. Ne vediamo un esempionella Websafe palette integrata nel CD

Riepilogo dei concetti della Lezione 41. 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)

?Test: leggi le domande e verifica le tue risposte

45/88

4a lezione

parentesi graffa così da esseredistinta dalle altre e che ogniproprietà viene separata da unpunto e virgola.

Possiamo proseguire nellanostra lista e definire tante re-gole quanti sono i tag che pen-siamo di utilizzare nelle paginedel nostro sito e alla fine otter-remo un file di testo che puòvivere indipendentemente al-l'interno del sito medesimo,oppure essere incorporato nel-le singole pagine.

Così come ci si possono es-sere molte proprietà per unsingolo selettore, possono al-tresì esserci numerosi seletto-ri per una singola proprietà. In-fatti la regola h1,h2,h3,h4,h5,h6 { color: #003399 } ci di-ce che tutti i titoli e titolini delnostro sito saranno blu.

Se volessimo invece modifi-care uno specifico tag all'inter-

no di una pagina la sintassi di-venterebbe: <h1 style=font-size:16px; color: #003399">. Comevedete è abbastanza semplicee si sposa perfettamente con lasintassi originale propria diHTML.

Per i browser che non rico-noscono i fogli di stile, il tag<h1> dell'esempio verrà inter-pretato normalmente, ignoran-do l'attributo style.

Esiste anche una secondacategoria di selettori basati suitag nativi HTML, i selettoricontestuali: servono per go-vernare la visualizzazione deltesto contenuto in un determi-nato tag al verificarsi di condi-zioni particolari. Ad esempiola regola li b {color: red} ci diceche ogni volta che in una listacomparirà un testo in grasset-to dovrà essere di colore ros-so. �

4 I colori del WebIl colore costituisce un ele-

mento importante nelle pagi-ne Web. Ci permette di ag-

giungere informazioni visualialla pagina, differenziare vari ti-pi di testo, mettere in risalto icollegamenti ipertestuali, ab-bellire il documento e le tabel-le con sfondi e con bordi chene aumentino l'effetto esteticoe ne facilitino la lettura. Esisto-no due modi fondamentali perinserirlo: creare un'immagineesterna alla pagina oppuresfruttare le funzioni intrinse-che di HTML. Il secondo pro-duce pagine più leggere e piùsemplici da gestire e, mediantel'impiego dei fogli di stile, offreanche un buon livello di con-trollo sui risultati. Senza i CSS,invece, i risultati sono abba-stanza poveri, soprattutto nel-la gestione del testo, e capitaspesso di trovare, specie nei si-ti di vecchia concezione, l'usod'immagini anche per rappre-sentare titoli e brani di testo, ilche porta a pagine pesanti emolto scomode da aggiornare.Immaginatevi di correggere unrefuso o modificare un testocontenuto in un’immagine: do-vreste aprire un programma adhoc (Photoshop, Flash o qual-siasi altro strumento sia statousato per generare il testo-im-magine) e trasformare l'imma-

gine, anziché semplicementeintervenire direttamente sullapagina HTML. Oggi, con la pre-cisione tipografica consentitadai CSS, diventa non solo pos-sibile, ma anche altamente con-sigliato, sfruttare al massimogli elementi di colore prodottiin modo nativo dal browser.

Sono diversi i tag HTML checonsentono d'impostare il co-lore per i propri elementi me-diante l'uso di attributi comecolor (per il corpo dell'elemen-to), bgcolor (per gli sfondi) ebordercolor (per i bordi). In tut-ti i casi, i colori vanno espressiin due modi possibili: indican-doli per nome oppure median-te una notazione esadecimale. ICSS aggiungono come terzapossibilità, consigliata, l'uso diuna un notazione decimale opercentuale che indica diretta-mente i livelli di rosso, verde eblu da utilizzare nella composi-zione del colore finale.

Il primo metodo, quello deinomi, è poco usato poiché pre-vede un numero limitato di co-lori, 16, di cui solo 8 apparten-gono alla Websafe palette chevedremo più avanti. Tale meto-do, inoltre, usa nomi che sonomnemonici solo in inglese, mache sono poco comprensibiliper un italiano (per un riferi-mento sui 16 colori predefiniti

vedi l'indirizzo http://www. we-breference.com/html/referen-ce/color/named.html).

Esiste un ulteriore rischionell'uso dei nomi per i colori.Microsoft ha definito una tavo-lozza estesa che contiene 140colori, con nomi molto esoticicome "darkslategray" (grigiolavagna scuro), "biscuit" (bi-scotto) o “forestgreen” (verdeforesta), ma che includono an-che i 16 colori di base. I nomiaggiuntivi di questa palette fun-zionano unicamente con Inter-net Explorer dalla versione 4.0in avanti e non sono supporta-ti da nessuno standard, perciòabituarsi a usare i nomi per icolori porta facilmente a pro-durre pagine incompatibili (perun elenco dei nomi particolaridefiniti da Microsoft vedihttp://www.webreference.com/html/reference/color/propco-lor.html#HEAD-2 oppure

http://www.oreilly.com/ cata-log/wdnut/excerpt/color_na-mes.html).

Il metodo basato sui valoriesadecimali è invece il più co-mune perché utilizzabile diret-tamente dall'interno di un tagHTML e compatibile con qual-siasi browser.

Basta indicare i valori RGBche vogliamo riprodurre perottenere qualsiasi genere di tin-ta. Il risultato è una sequenzadi sei cifre esadecimali comead esempio FF0033 (rosso vi-vo), due per ciascuno dei trecolori: rosso, verde e blu. Que-sti colori primari,combinati sulloschermo, produco-no tutti i colori vi-sibili.

(versione integrale dell’articolo sul CD)

l’articoloè sul CDn. 68

Le risposte alle domande di pag. 39

1. Si tratta di <p> per ladefinizione dei paragrafi e<h#> per la definizione deititoli, a partire da <h1> perarrivare ad <h6>.

2. Un marcatore o tag fisicoindica il modo in cui unaporzione di testo deveessere visualizzata sulloschermo, un marcatorelogico ne definisce invece lafunzione e lascia al browserla scelta di comevisualizzarla.

3. Il marcatore <pre> mantienel’allineamento di un testocome nel documentooriginale. Per conservare glispazi bianchi bisognautilizzare l'entità “spaziounificatore” (&nbsp;) oppurecreare un rientro su ambo ilati con <blockquote>.

4. HTML 4.01 è la più recentespecifica per la produzione disiti Web. XHTML 1.0 prevedeuna sintassi più rigorosa perla migrazione verso XML.

5. I Cascading Style Sheetscostituiscono lo strumentopiù importante per gestire gliattributi tipografici di un sitomoderno. Raggruppano tuttele informazioni stilistiche diun sito all'interno di undocumento centrale.

6. Creare attributi tipografici peril testo molto più ricchi eprecisi rispetto a quanto

possibile conHTML,posizionare gli elementi sullapagina con estremaprecisione, inserire elementidinamici e multimediali nellapagina.

7. Gli attributi passano di padrein figlio con il figlio che ha lapriorità nel variare quel chegli viene dal padre.

8. Esistono quattro modipossibili: creando all'internodella pagina un collegamentoa un file che contiene leindicazioni di stile per l'interosito, integrando il foglio distile direttamente nellapagina, importandoall'interno di questa un fogliodi stile residente in un fileesterno, inserendo leinformazioni di stiledirettamente nel tag HTMLche si vuole modificare.

9. Se non le supporta affattonon succede niente. Seinvece le supporta soloparzialmente può produrrerisultati inaspettati inqualche raro caso.

10.Un insieme di 216 colori chepossono essere visualizzatisenza varianti un Macintoshoppure un PC Windows.

11.Esistono tre formati usabilidirettamente dal browser:GIF per grafici e disegni,JPEG per le fotografie e PNG

!

46/88

4a lezione

�

Il secondo tipo di contenuto ti-pico di una pagina Web sonole immagini. A differenza del

testo, non si trovano nella pagi-na HMTL, ma vengono caricatein quest'ultima per mezzo diuno speciale marcatore che neindica la posizione all'internodel sito in relazione al docu-mento oltre che le caratteristi-che di visualizzazione e l'alli-neamento rispetto al testo. Nel-la gestione delle immagini, esi-stono quindi due fasi: la primaconsiste nel preparare il file chele contiene e la seconda nel col-legarlo alla pagina nella posi-zione in cui vogliamo che ap-paia quando spedito al browserdel navigatore. Per tale motivobisogna conoscere i formati difile utilizzabili e sapere sceglie-re quello corretto in funzionedel contenuto, cioè del tipo diimmagine che si vuole ripro-durre.

Grafica bitmap e vettorialeLe immagini prodotte a com-

puter si dividono in due grandifamiglie: le immagini bit map so-no composte da una mappa dibit che definisce il colore di cia-scun punto della mappa rettan-golare di pixel (picture ele-ments) che saranno visualizzatisullo schermo. Sono le unichedirettamente riconoscibili daibrowser e hanno un formato fis-so e difficilmente modificabile.Le variazioni possibili di un'im-magine bitmap consistono nellamodifica dei colori dei singolipixel, nel ridimensionamentodell'immagine oppure nel rita-glio di un particolare: tutte ope-razioni da realizzare medianteun programma di ritocco comePhotoshop, Image Ready, Fi-reworks, Gimp e altri. Qualsiasioperazione è di fatto un ritoccobasato su collage di elementi,magari presi da immagini diver-se e sulla modifica del colore diquelli esistenti. Non è possibilecambiare in maniera interattivale dimensioni o l'orientamentodegli oggetti contenuti in un'im-magine bit map e nemmeno al-terare il contenuto di un even-tuale testo presente. È anchemolto difficile ingrandire l'im-magine senza perdere qualità,visto che l'ingrandimento vienerealizzato mediante l'aggiunta dipunti simulati matematicamen-te mediante una duplicazione

approssimata di quelli già esi-stenti.

Le immagini vettoriali hannoinvece la caratteristica di defini-re ciascun oggetto mediantecoordinate geometriche e per-ciò ne consentono la modifica apiacere: ingrandimento, rimpic-ciolimento, sostituzione ed eli-minazione di interi elementisenza lasciare segno, riscritturadel testo. Sono anche partico-larmente adatte per produrreanimazioni. Richiedono una no-tevole "intelligenza" di calcolo,non disponibile sui normalibrowser e perciò possono esse-re riprodotte unicamente me-diante speciali aggiunte (plug-in) che di solito sono concepiteper gestire solo un formato par-ticolare, come Flash di Macro-media oppure Acrobat di Ado-be, e vengono utilizzati solo perporzioni particolari di un sitonon consultabili in assenza delplug-in. Esiste anche un formatovettoriale definito come stan-dard nel 1999 dal World WideWeb Consortium (http://www.w3c.org), lo SVG (Scalable Vec-tor Graphics), concepito per ladefinizione vettoriale d'immagi-ni bidimensionali e basato suXML. È stato adottato da nume-rosi produttori di software, tracui la stessa Microsoft che lo hascelto per Office 11, perciò lo ve-dremo affiorare gradualmentein futuro.

Nella pratica, tutti i principa-li programmi di modifica delleimmagini bitmap consentono diprodurre un file di lavoro con al-cuni contenuti vettoriali, comead esempio il testo e le formegeometriche chiave (linea, cer-chio, rettangolo) che viene quin-di esportato in formato pura-mente bitmap al termine dell'e-laborazione. In questo modoavremo due file distinti: uno dilavoro realizzato nel formatovettoriale tipico del program-ma, su cui potremo continuare aintervenire con le nostre varia-zioni e correzioni e uno da pub-blicare, salvato in uno dei treformati direttamente riconosci-bili dai browser: GIF, JPEG ePNG.

I tre moschettieri della grafica Web

Oggi non esiste modo perpubblicare un'immagine sulWeb che non passi attraverso

l'adozione dei tre formati stan-dard: GIF, JPEG e PNG. I primidue sono compatibili con tuttele versioni di browser in circola-zione, mentre il terzo è statosupportato in modo imperfettofino alla generazione 5.x, perciòva usato con attenzione, anchese di gran lunga preferibile aglialtri due.

Il fomato GIF (Graphics In-terchange Format) è adatto percomprimere immagini che usinotinte unite e un numero limitatodi colori (256), come ad esem-pio grafici, disegni schematici,videate. In tale contesto, offreun ottimo livello di compressio-ne senza perdita di dati (los-sless) e una buona qualità di ri-produzione che può anche adat-tarsi ai colori nativi prodotti daHTML così da creare immagini

che si fondono senza soluzionedi continuità con lo sfondoHTML della pagina o della tabel-la che le contiene. Consenteinoltre di creare semplici ani-mazioni.

Il formato JPEG (Joint Pho-tographic Experts Group) s'in-dirizza, come indicato dal nome,alle immagini fotografiche. Pre-vede diversi livelli di compres-sione con una perdita progres-siva di dati e di qualità. È moltoefficace nella compressioned'immagini con sfumature e tonia variazione continua.

Il PNG (Portable NetworkGraphics) è nato dopo l'avventodei principali browser e ha trat-to beneficio dalle prime espe-rienze realizzate dai progettistidel Web. Si propone come alter-nativa evoluta al GIF, ma può an-

5 Gestire le immaginiEsempio di codiceHTML per inserireun'immagine.Sotto vediamo unaparte della pagina cheè stata utilizzata perrealizzare la figura afianco. Le immaginisono state inserite inuna tabella checontiene uno stile inlinea sia per la tabellain quanto tale (vedi laparte in blu nel tag<table>) sia per ladidascalia (vedi laparte in blu nel tag<caption>).Il tag <img> inseriscel'immagine nella celladella tabellaspecificando mediantel'attributo src, ilpercorso didestinazione e,mediante l'attributoalign come allinearlarispetto al testo chesegue direttamente lachiusura del tag<img>

Allineare il testoall'immagine.Il punto d'inserimentodell'immagine nella paginaviene indicato mediante ilmarcatore <img> al qualesi associa anche l'attributodi allineamento rispetto altesto già esistente

47/88

4a lezione

� che gestire fotografie visto chepermette di riprodurre 16 milio-ni di colori mediante una com-pressione senza perdita più effi-ciente rispetto a quella del for-mato GIF. Offre anch'esso la pos-sibilità di creare semplici ani-mazioni.

Per il momento è sufficientericordare questa regola: GIF oPNG per grafici, immagini continte unite o animazioni; JPEGper le fotografie. Nella lezionededicata al Web design vedremomeglio come sfruttare ciascunodi essi.

Inserire l'immagine nella pagina HTML

Abbiamo detto che ogni im-magine costituisce un oggettoesterno alla pagina Web e cheviene abbinata a quest'ultimanel momento in cui il server laspedisce al browser del naviga-tore. A tale scopo è sufficienteinserire nel codice HTML dellapagina, lì dove vogliamo chel'immagine compaia, un riferi-mento che punti alla posizionedel file che la contiene e che neindichi le principali caratteristi-che di visualizzazione. Ciò per-mette di svincolare HTML e gra-fica di conservare tutte le im-magini in una directory centra-lizzata, una tecnica particolar-mente utile nei siti dinamici.

Il marcatore HTML che inse-risce l'immagine nella pagina è<img> (image) che deve esserenecessariamente abbinato al-l'attributo src (source – fonte)per indicare la posizione del filegrafico. Un esempio pratico delsuo uso sarebbe <imgsrc="/zzz/pcopenlogo.gi f"width="168" height="55" bor-

der="0"> dove si dice che l'im-magine pcopenlogo.gif si trovanella cartelletta "zzz" e che va vi-sualizzata con una larghezza di168 pixel e un'altezza di 55 pixel,senza bordo. Altezza e larghezzanon sono indispensabili, poichéil browser userà automatica-mente le dimensioni dell'imma-gine contenuta nel file, tuttaviasono utili per velocizzare la vi-sualizzazione della pagina. In-fatti, sapendo lo spazio da riser-vare, il browser può comporrela pagina immediatamente sen-za aspettare che l'immagine siastata caricata per intero. I dueparametri servono anche per vi-sualizzare l'immagine a dimen-sioni diverse (solitamente piùpiccole) rispetto all'originale.Questo può essere utile nel casoin cui la stessa immagine com-paia in più pagine con risoluzio-ni diverse e non si voglia pro-durne più versioni. Non è sem-pre una strategia vincente poi-ché costringe il browser a com-piere un doppio lavoro: scarica-re un file più grande del neces-sario e ridimensionarlo, a scapi-to della velocità di visualizza-zione della pagina. Può essereutile solo quando siamo sicuriche le versioni multiple dellastessa immagine siano viste nel-la stessa sessione di navigazio-ne, magari perché sono nellastessa pagina. In tal caso, il be-neficio di caricare un solo file in-vece che diversi compensa i ral-lentamenti dovuti alla rielabora-zione.

L'attributo border serve a vi-sualizzare o meno un bordo blu,usato per indicare che all'imma-gine è abbinato un collegamen-to ipertestuale. È rarissimo tro-

vare siti che usino ancora im-magini bordate perché il bordoè decisamente antiestetico e or-mai inutile, visto che i navigato-ri suppongono quasi sempreche tutte le immagini siano clic-cabili e possono averne confer-ma semplicemente portandovisopra il cursore del mouse.

Un altro attributo molto im-portante è align usato per alli-neare l'immagine rispetto aglielementi che la circondano. Poi-ché si tratta di un attributo chemodifica l'impaginazione e nonfornisce invece informazionistrutturali, è stato deprecato daHTML 4.01 che consiglia di so-stituirlo con una funzione equi-valente dei CSS. Tuttavia i pro-gettisti di siti si sono talmenteabituati a utilizzarlo che nonsparirà tanto presto dalla circo-lazione. L'attributo align preve-de cinque valori: il più comune,left, allinea l'immagine lungo ilmargine sinistro della finestra,tabella o altro elemento in cui sitrova, lasciando il testo fluiresulla destra. Con right si ottienenaturalmente l'effetto opposto.Con top si allinea il margine su-periore dell'immagine al marginesuperiore della prima riga di te-sto corrente. Il parametro midd-le allinea la base della prima rigadi testo al centro dell'immagine.Infine bottom allinea la base del-la prima riga del testo correntealla base dell'immagine. Trovateun esempio HTML delle variemodalità nel file "Allineamentoimmagine" sul CD Guida.

Un altro attributo importan-te, ma spesso trascurato è alt(alternate) che serve a contene-re una breve descrizione del-l'immagine da usare nel caso in

cui l'immagine stessa non fossevisibile, vuoi perché il navigato-re ne ha disattivato la visualiz-zazione sul proprio browser,vuoi perché non è in grado di ve-derla. La seconda ipotesi si rife-risce sia a navigatori non-ve-denti sia a chi utilizza browservocali che "leggono" il contenu-to della pagina al telefono oppu-re su altro dispositivo di naviga-zione uditivo (come i navigatoriper automobile). L'uso dell'at-tributo alt costituisce un requi-sito per rendere il sito accessi-bile secondo le specifiche WAI(Web Accessibilità Iniziative -http://www.w3.org/WAI/) e sonoormai diventate obbligatorie ingran parte dei siti dell'ammini-strazione pubblica. Un'alternati-va è longdesc che consente d'in-serire un link a un altro docu-mento che descriva il contenutodell'immagine.

Chiudono l'elenco degli attri-buti per le immagini convenzio-nali hspace e vspace che indica-no in pixel rispettivamente lospazio orizzontale e verticale dariservare attorno all'immagine.Vengono usati di rado perché siapplicano uniformemente suiquattro lati dell'immagine com-promettendo anche gli allinea-menti rispetto al testo e alla ta-bella di layout. Di solito, dell'im-magine rispetto agli elementi suilati che c'interessano viene rea-lizzata con maggiore precisioneusando celle vuote nella tabelladi layout. �

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 farloavrete 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 incollaborazione con Register.it, il piùimportante registrar in Italia: nei prossimimesi avrete a disposizione gratuitamente perun mese l’uso di uno spazio di hostingdedicato, oltre ad una serie di altri servizisupplementari.In più, dal momento che per poter usare lospazio di hosting è necessario disporre di undominio,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 sulmercato).Il metodo è semplicissimo: dovrete collegarvi al sito Internetwww.register.it/pcopen,inserire il codice seguente: x6Wa3Pnel box all’interno della pagina e a questo

punto verrete inviati alla home page del sitodi Register, da dove le registrazioni verrannoscontate in automatico del 40%.

Le registrazioni saranno comprensive di tuttoquanto è indicato all’indirizzohttp://we.register.it/domains/allincluded.html.

Per il servizio di supporto inviare le e-mailall’indirizzo [email protected]

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

48/88

5a lezione

La creazione stilistica di unsito è solitamente appan-naggio di un Web designer,

vale a dire un professionistaesperto nelle arti grafiche cheha dimestichezza con gli stru-menti e le tecniche necessarie.Tuttavia, il Webmaster può tro-varsi nella necessità di fare tut-to da solo oppure di realizzarenel concreto il progetto impo-stato da altri. Di conseguenza,deve conoscere alcuni dei cri-teri da seguire per realizzareuna pubblicazione elettronicache sia di buon livello estetico

e, al tempo stesso, funzionale.Abbiamo già affrontato gli

aspetti progettuali per stabilirele finalità del sito e il tipo dipubblico che lo visiterà. Cono-scere il navigatore che pensia-mo di attrarre è indispensabileper determinare la ricchezzadell'interfaccia da fornire (vediTecniche di progettazione delsito nella prima lezione e Pro-gettare la pagina nella secon-da lezione). Una volta compiu-to questo primo passo, siamopronti a disegnare la pagina ve-ra e propria.

Criteri di baseLa progettazione di una pa-

gina Web, come per qualsiasialtro tipo di pubblicazione sucarta o altro supporto, consi-ste nel collocare gli elementi suuna griglia ordinata, assegnan-do dimensioni proporzionate etracciando un percorso di let-tura che guidi l'occhio del na-vigatore attraverso la paginanella sequenza che noi deside-riamo, da sinistra a destra edall'alto in basso. Rispetto allacarta, le pagine Web hanno lacaratteristica peculiare di es-

sere lette saltando da un puntoall'altro perciò è necessarioprevedere diversi punti di at-tenzione e mettere ben in evi-denza gli elementi chiave. Lavera arte del design consiste inrealtà nel dosare gli elementi egli spazi bianchi. Lo spazio è unelemento essenziale e comun-que preponderante nella pagi-na; può essere bianco oppureavere il colore dello sfondo, madeve immancabilmente com-parire nella stessa proporzionearmonica degli elementi checontiene. Una pagina troppo

Lezione 1:Competenze e strumenti(disponibile integralmentesul CD)

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

• Progettare un sito statico • Progettare la pagina• Pagine HTML e marcatori • Strutturare i contenuti della pagina• Adobe GoLive 6.0• Spiegazione dei tag HTML per una pagina

vergine• Esercizi su come creare una pagina

vergine e su come progettare un sito

Lezione 3:Modelli di pagina e tabelle(disponibile integralmente sul CD)

• La tabella come elemento strutturale• Progettare layout fluidi e statici• Costruire template con le tabelle

di layout • NamoWeb Editor5: per siti statici

professionali• Dimensionare tabelle e celle fluide,

dimensionare tabelle con celle miste,allineamento spontaneo delle tabelleconsecutive

• Template con struttura complessa• Template con tabelle nidificate• Esercizi

Lezione 4:HTML 4.01 e CSS(disponibile integralmente sul CD)

• Stile e struttura: usare i tag HTML nativi• Il deprecato tag font• I marcatori per formattare il testo• Gestire gli spazi nel testo• CSS e HTML 4.01 • Cosa si può fare con i fogli stile• Quattro tipi di CSS• I colori del Web• Gestire le immagini• Esercizi• Ereditarietà e innesco a cascata• Proprietà di trasferimento

dei parametri• Regole di ereditarietà• Selettori di classe• Websafe palette

Lezione 5:Design e multimedialità

• Elementi di design per il Web

• La ruota colore

• Grafica e formati di immagini per Internet

• Link ipertestuali

• Tabelle d’immagini

• Mappe immagine

• Audio e video

Le prossime puntateLezione 6:Siti interattivi

Lezione 7:Interazione sul server

Lezione 8:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Roberto Mazzoni

�

il corso èsul CDn. 69

� A scuola con PC Open

ProgettoWebMaster1 Elementi di design per il Web

49/88

5a lezione

affollata sembra disordinata erisulta anche difficile da legge-re.

Persino i portali più impor-tanti, noterete, usano generoseporzioni di bianco benché mo-strino in home page una quan-tità impressionante di link. Gli

sfondi colorati vanno utilizzaticon parsimonia, solo per evi-denziare aree particolari dellapagina e mantenendosi co-munque su tinte pastello, te-nui. La leggibilità del testo vie-ne prima di ogni cosa e unosfondo di colore intenso finisce

per fare a pugni anche con lagrafica e con le immagini pre-senti nella pagina. La regolad'oro del buon designer è chemeno elementi ci sono, speciese decorativi, migliore sarà il ri-sultato finale. La pagina sem-brerà più chiara, elegante e leg-gibile. Una delle tecniche se-guite nel design editoriale èquella di aggiungere tutto ciòche riteniamo sia necessario e,una volta soddisfatti, toglieretutto quel che riusciamo senzaalterare la funzionalità del no-stro design, a quel punto arri-veremo a un distillato di stileefficace.

Il testo, solitamente prepon-derante, dovrebbe essere scu-ro su sfondo chiaro o vicever-sa, e richiamare poca attenzio-ne. Dev'essere soprattutto leg-gibile e bisogna distinguere vi-sivamente il testo corrente daititoli, dalle didascalie e dai linkipertestuali. Questi ultimi sonostoricamente blu e sottolineati,tuttavia è facile trovare siti cheomettano la sottolineatura eche adottino colori diversi dalblu originale. L'importante èche i link abbiano caratteristi-che costanti nell'intero sito eche siano riconoscibili a colpod'occhio per quel che sono.

Coerenza, allineamento,posizione e ripetizione

Queste sono le quattro paro-le chiave da tenere a mentequando si progetta la grafica diun sito. La coerenza si riferiscealla costanza con cui gli ele-menti di riferimento si ripetonodi pagina in pagina conservan-do aspetto, posizione e dimen-sione. Il sito avrà sicuramentediversi modelli di pagina (tem-plate), ma ci saranno alcunielementi che non cambiano,come ad esempio il logo, le bar-re di navigazione, i link iperte-stuali, lo sfondo, eccetera.Mantenendo invariati questielementi, si trasmetterà un'im-pressione di ordine e si facili-terà l'orientamento del naviga-tore che potrà concentrarsi suicontenuti. L'allineamento è uncriterio fondamentale dell'im-paginazione tipografica e si ri-propone anche sul Web. Il testoe le immagini devono mantene-re un allineamento regolare traloro e rispetto alla griglia dilayout. È anche possibile sfrut-tare variazioni di allineamentorispetto alla norma per metterein evidenza elementi particola-ri, come ad esempio un titolo

centrato rispetto al testo cheinvece è allineato a sinistra.

La posizione degli elementiidentifica la sequenza con cuivogliamo che il navigatore liveda. In alcuni casi fornisceinformazioni anche sul tipo dicontenuto. Ad esempio, una di-dascalia di solito si trova vicinoall'immagine a cui si riferisce,gli elementi di navigazione sitrovano sui bordi laterali op-pure in alto e in basso, e via diseguito. Inoltre la scelta dellaposizione serve anche a bilan-ciare il "peso" di un elementocosì da non rendere la paginasbilanciata. Ad esempio seavessimo le immagini tutte dauna parte e il testo dall'altranon percepiremmo un effettoarmonico.

La ripetizione è simile allacoerenza, ma consiste nel ri-proporre alcune informazioniche vogliamo far ricordare alnavigatore, siano esse un bra-no di testo che spiega discreta-mente la natura del sito, unpiccolo motivo grafico checontrassegna ripetitivamenteun certo tipo di contenuto, unabarra di navigazione globale,presente in tutto il sito e via di-cendo.

Dosare il coloreIl colore è notoriamente l'e-

lemento più visibile all'internodi una pagina e perciò gli ele-menti colorati dovrebbero es-sere usati con attenzione, cosìda non sopraffare l'attenzionedel navigatore. Usate tinte po-co intense per le grandi aree,come gli sfondi e le cornici. Èanche importante che i coloripresenti sulla pagina siano traloro compatibili, vale a dire chesi sposino bene insieme. Il loroabbinamento è un'arte con re-gole precise di cui parliamo piùavanti nell’articolo, ma esisto-no anche strumenti che aiuta-no a scegliere le combinazioniadatte, vedi ad esempio l'utilitygratuita SLUGS da integrare nelprogramma gratuito HTML-Kitdi cui abbiamo parlato in que-sto corso, che seleziona pervoi i colori complementari ri-spetto alla base che avete iden-tificato e li rapporta anche intermini di saturazione e gra-dienti d'intensità (passaggio daun colore all'altro con le princi-pali tinte intermedie).

Parlando di colori, dovreteanche decidere se uniformarvialla Websafe palette (vedi lascorsa lezione), il che sarebbe �

La home page di un sito progettato con ordine. Questo è il famosowww.webpagesthatsuck.com ossia un sito dedicato a promuovere o bocciare le variesoluzioni di design che si trovano sul Web. Notate la struttura regolare, dove il testo lafa da padrone e dove compare ampio spazio bianco che dà risalto ai contenutifacilitandone anche la lettura

Questa è invece una delle pagine recentemente bocciate da WebPagesThatSuck. È ungarbuglio di colori e di elementi, alcuni animati, che sconcertano il navigatoreimpedendogli 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 neglielementi di navigazione.

Ancora più visibili dei colorisono le fotografie e gli elemen-ti grafici, specie se tridimen-sionali. Le fotografie aggiungo-no anche informazioni di con-tenuto, ma è bene ricordareche ogni immagine aggiunta au-menta il tempo di scaricamen-to della pagina. Il rallentamen-to diventa particolarmente vi-stoso con immagini di grandidimensioni e le pagine che con-tengono un gran numero d'im-magini diventano inaccessibilia chi usi browser non conven-zionali (come telefonino, PDA,eccetera) e difficili da aggior-nare.

Gli elementi grafici 3D sonoinvece spesso una parte inte-grante del sistema di naviga-zione del sito. L'effetto tridi-mensionale è facilmente realiz-zato aggiungendo un'ombra al-la figura, icona, pulsante o bar-ra di navigazione, e creandobordi smussati. L'uso di grafica

per le barre di navigazione neaumenta la visibilità, ma necomplica la gestione.

L'uso delle icone può essereinvece esteticamente efficace,ma bisogna ricordarsi di ag-giungere sempre un testo chespieghi la funzione di ciascuna,poiché non sempre il navigato-re capisce il significato dell'ico-na semplicemente guardando-la, anche se a noi potrebbe ri-sultare del tutto evidente.

Immagini in movimento per dare vita alla pagina

Il prossimo elemento a salirenella nostra graduatoria di vi-sibilità sono le immagini in mo-vimento, balzano all'occhio piùdi qualsiasi altra cosa e contri-buiscono a differenziare il Webdalla carta stampata. Qui gliesperti di usabilità sono con-cordi: mai superare i due ele-menti per pagina. Nella realtà sifinisce per averne diversi an-che perché i banner e i bottonipubblicitari sono spesso ani-

mati e si sommano agli ele-menti dinamici già presenti nelsito.

Il sistema più semplice e dif-fuso per creare animazioni con-siste nello sfruttare una funzio-ne del formato GIF che permet-te di combinare tra loro diversi"fotogrammi", tutti dello stessoformato, e mostrarli ciclica-mente al posto dell'immaginedi partenza. Il GIF animato è fa-cile da realizzare e compatibilecon qualsiasi browser. Presen-ta solo l'inconveniente di appe-santire il file che lo contiene. Ilsecondo elemento di animazio-ne molto diffuso è MacromediaFlash, un programma che pro-duce animazioni grafiche di na-tura vettoriale, ossia definiteper mezzo di formule matema-tiche.

Ciò permette di ottenere ri-sultati molto più raffinati ri-spetto al GIF con file molto piùleggeri, ma impone l'impiegodi uno speciale software da ab-binare al browser (plug-in) che

nel caso di Flash è spesso inte-grato nelle versioni più moder-ne dei principali browser. Esi-stono soluzioni di animazioneancora più complesse che pre-vedono l'inserimento di filmatio di sequenze prodotte con al-tri software.

Ciascuna di questi richiedetuttavia speciali plug-in oppureveri e propri applicativi, non di-sponibili a tutti i navigatoribenché gratuiti.

L'ultima novità in materia digrafica vettoriale per il Web è ilformato SVG (Scalable VectorGraphics) che costituisce unostandard nato con il nuovo lin-guaggio XML e che richiede an-ch'esso l'impiego di plug-in gra-tuiti, ma che in prospettiva di-venterà parte integrante deibrowser. SVG sarà probabil-mente uno dei formati di riferi-mento del futuro, ma per il mo-mento la scelta per le anima-zioni sul Web si concentra suGIF, e la relativa evoluzionePNG, e su Flash. �

�

L’armonia dei colori costi-tuisce un elemento cen-trale per qualsiasi proget-

to grafico. Il contrasto e gli ab-binamenti vanno studiati ba-sandosi sui rapporti esistentiin natura. Nelle arti grafiche,esiste un oggetto chiamato ruo-ta colore (colorwheel) cheidentifica i tre colori primari(rosso, giallo e blu) e li pone inrelazione ai loro complementi eomologhi. Nel Web usiamo unaruota colore differente basatasul modello RGB che, come ab-biamo visto, utilizza un coloreprimario diverso: il verde al po-sto del giallo, mantenendo inal-terati gli altri due: rosso e blu.

La ruota colore del Web, allapari di quella tradizionale, defi-nisce una serie di relazioni spe-cifiche tra i diversi colori al finedi ottenere precisi effetti di ar-monia e di contrasto. Ogni co-lore primario ha un colorecomplementare che si trovanella posizione immediatamen-te opposta sulla ruota. La com-binazione dei due produce unforte impatto visuale, pur man-tenendo l'armonia dell'insieme.Il colore complementare delblu ad esempio è il giallo, men-

tre il colore complementare delrosso è il ciano (azzurro), infi-ne il colore complementare delverde è il violetto.

Se invece volete realizzareun effetto meno contrastatopotete scegliere colori analo-ghi che si trovino immediata-mente a fianco del colore di ri-ferimento scelto. Nel caso delgiallo i colori analoghi sono l'a-rancione e il verde chiaro, peril blu sono il blu chiaro e il vio-la, eccetera.

Esistono diverse altre com-binazioni per le quali vi riman-diamo all'articolo Color Har-mony pubblicato sul sitohttp://builder.cnet.com, quelche conta è ricordare che i co-lori vanno abbinati in modo ar-monico seguendo regole benprecise. La scelta del colore diriferimento, poi, è importanteper stabilire la natura del sito.Avrete un effetto caldo usandoi colori del fuoco (rosso, aran-cione) oppure freddo usando icolori dell'acqua e dell'aria (blue verde). Per un'analisi com-pleta delle armonie cromaticherimandiamo al testo Il colorenel Web di Molly E. Holzschlag,edito da Apogeo. �

2 La ruota colore del WebQuesta è un riproduzione della ruotacolore per il Web. Rispetto alla ruotacolore tradizionale, vediamo che ilgiallo è stato sostituito dal verdecome colore primario, mentrerimangono invariati gli altri due: blu erosso. Combinando i tre colori primariin diverse percentuali si ottengonotutti gli altri colori. La ruota serve perscegliere accostamenti armonici.Nell'esempio vediamo che il rossosta bene con l'azzurro che è il colorecomplementare oppure con l'arancioe il violetto che sono analoghi. Si possono anche combinare il rossoe i due colori che sono di fiancoall'azzurro (blu chiaro e il la bandapiù scura del verde), i cosiddetticomplementari separati

L'utility SLUGS, da utilizzare inabbinamento all'editor HTML-Kit cheabbiamo presentato all'inizio diquesto corso, vi guida nella selezionedei colori armonici. Basta selezionare il colore diriferimento, che compare al centro,per vedere il colore complementare(inverse), gli analoghi (near), gli splitcomplementari e la triade (altri due colori che sono equidistantisulla ruota rispetto a quello diriferimento).L'utility è disponibile al seguenteindirizzo:http://www.chamisplace.com/asp/hkp.asp?f=cmslugs

51/88

Dopo il testo, la grafica co-stituisce il contenuto piùcomune per un un sito

Web. Nella scorsa lezione ab-biamo visto come inserire e al-lineare un'immagine all'inter-no di una pagina HTML, ora ve-diamo come costruirne una alfine di ottenere il miglior risul-tato possibile. La prima cosada capire è che l'immagine chevoi vedete sul vostro schermonon sarà mai esattamentequella che il navigatore guar-derà sul proprio computer. Ledifferenze tra i browser, tra lediverse famiglie di computer eanche semplicemente nella ca-librazione dei due monitorprodurranno variazioni anchemolto vistose. Di conseguenzanon c'è scopo nel puntare allamiglior qualità possibile e con-viene semmai cercare di ridur-re al massimo il peso dell'im-magine pur conservandone icontenuti. Una simile opera-zione prende il nome di "otti-mizzazione" e costituisceun'arte di per sé stessa. Essacombina la scelta del formatodi memorizzazione più adattoal tipo d'immagine e la defini-zione della dimensione, dellaqualità e del numero di coloripresenti al suo interno.

Il primo passo consiste nelconoscere lo strumento chedovrà visualizzare la nostraimmagine, vale a dire il perso-nal computer. Esiste una primadifferenza fondamentale tra lediverse famiglie: il Macintoshtende a mostrare le immaginipiù chiare rispetto alle mac-chine Windows. Perciò se la-vorate su un Macintosh dovre-ste cercare di generare imma-gini che sembrino un po' più

chiare del dovuto, così da ap-parire accettabili sullo scher-mo di un PC. Viceversa, cerca-te di produrre immagini chesembrino un po' più scure deldovuto sullo schermo del PCper fare in modo che non ap-paiano slavate quando visua-lizzate su un Mac. Attenzioneanche alle differenze tra Linuxe Windows che, per quantomeno evidenti, comunque esi-stono.

Inoltre, con la diffusioneprogressiva dei monitor LCD edei notebook, in aggiunta aicomuni tubi a raggi catodici,dovete mettere anche in contosostanziali difformità nella re-sa dei colori a seconda del tipodi display usato dal navigato-re. Già era difficile garantireuna ragionevole uniformità traCRT di marca e tipo diverso;ora con gli LCD le differenzetra modelli diventano macro-scopiche. Pertanto, nel creareimmagini da zero, bisogna evi-tare accostamenti di coloritroppo vicini tra loro, conscarso contrasto, perché po-trebbero sparire completa-mente sul monitor di qualcunaltro rendendo l'immagine deltutto indistinguibile e bisognaanche prepararsi a condurretest periodici su macchine di-verse.

La risoluzione correttaLo schermo di un computer

visualizza tipicamente 72 pun-ti per pollice, mentre la granparte delle immagini predispo-ste per la stampa su carta hauna risoluzione di 300 puntiper pollice. Ciò significa che, aparità di grandezza visiva, il fi-le visualizzato sullo schermosarà di quattro volte più picco-lo rispetto a quello inviato allastampante. Una variante sul te-ma è rappresentata dai moni-tor di grandissime dimensioniche visualizzano 96 punti perpollice, ma di solito si tiene co-munque valido il valore di 72,lasciando che poi l'immagine siadatti automaticamente ai varidisplay.

La conversione da 300 a 72punti viene solitamente ese-guita mediante un programmadi fotoritocco che riduce il nu-mero complessivo di pixel ese-guendo in alcuni casi anche lacompressione e l'ottimizzazio-

ne del risultato. È bene salvarela copia di dimensioni ridotteseparatamente perché nonsarà più possibile tornare allarisoluzione originale compien-do il percorso inverso. Infatti, iprogrammi di fotoritocco se lacavano benissimo nel togliereinformazioni per rimpicciolire,ma una volta che le hanno eli-minate queste non possono es-sere ricostruite se non me-diante formule matematicheche sintetizzano i punti man-canti, ma che producono un ef-fetto finale posticcio. Mante-nere una copia dell'originaleserve anche per poter realiz-zare diverse varianti della stes-sa immagine partendo sempredalla situazione migliore. Infat-ti, se aveste deciso di usare ilcomunissimo formato JPEG,l'elaborazione e il salvataggiocontinui della stessa immaginene ridurranno progressiva-mente la qualità. Il difetto diquesto formato è di perdereinformazioni ogni volta che sisalva l'immagine, anche se nonsi eliminano punti o non la simodifica in alcun modo. Dun-que la scelta e la corretta ge-stione del formato costituisceun passo fondamentale nellapreparazione di elementi grafi-ci per il Web.

L'eclettico GIFIl Graphic Interchange For-

mat è il più comune tra i for-mati per il Web. Si presta parti-colarmente per la codifica didisegni e grafici, ma può esse-re utilizzato anche per la me-morizzazione di fotografie nelcaso in cui volessimo usaredue sue peculiarità: l'anima-zione e l'effetto trasparenza.Gode del supporto di tutti ibrowser in circolazione, offreuna compressione molto effi-cace e permette anche di crea-re immagini con caricamentoprogressivo (interfacciate) persveltire la visualizzazione dellapagina senza rinunciare allaqualità finale. Inoltre la com-pressione offerta da GIF è di ti-po lossless vale a dire che noncomporta la perdita di dati, co-me invece accade nel caso delJPEG. Va comunque notato chei programmi più moderni con-sentono di eseguire una com-pressione con perdita anchecon il formato GIF al fine di �

3 Grafica per il Web

Queste due immagini sono composte dacolori pieni e perciò si adattanoparticolarmente alla compressione informato GIF. Quest'ultima codifica levariazioni di colore registrate su ciascunariga orizzontale, dunque vediamo che laseconda immagine, con le righeorizzontali, viene compressa moltomeglio della prima, pur avendo identichedimensioni e numero di colori

52/88

5a lezione

� ridurne le dimensioni oltrequel che si riesce a fare agendosul numero di colori.

Il formato GIF comprimel'immagine esaminando in oriz-zontale il contenuto di ciascu-na riga e codificando qualsiasivariazione di colore. Ciò signi-fica che immagini con ampispazi di tinte unite vengonocompressi con grandissima ef-ficienza perché quando il colo-re non cambia, il formato si li-mita a registrare il valore ini-ziale e il numero di pixel per

cui deve essere ripetuto. L'effi-cienza diminuisce al cresceredegli elementi di colore diver-so che tagliano l'immagine inverticale e precipita in presen-za di sfumature di colore. Unesempio classico per vederela differenza consiste nel com-primere un'immagine a strisceverticali e confrontarla con lastessa immagine a strisce oriz-zontali, su sfondo uniforme: laseconda, pur contenendo lostesso numero di pixel e di co-lori, avrà una dimensione mol-

to inferiore perché le variazio-ni su ciascuna riga saranno po-chissime (vedi le figure diesempio).

Il limite importante del for-mato GIF sta nel fatto che puòmemorizzare al massimo 256colori per ogni immagine. Que-sti possono essere diversi ognivolta e costituire un campio-namento di quel che l'immagi-ne contiene (tavolozza adatta-ta - adaptive palette) oppureprovenire dalla tavolozza di si-stema utilizzata sul particolarecomputer che dovrà visualiz-zare l'immagine. Una terza so-luzione consiste nello sceglie-re colori presi dalla Websafepalette (di cui abbiamo parlatonella scorsa lezione) che elen-ca i 216 colori visualizzabilisenza distorsioni sia su Macin-tosh sia su PC.

Una quarta soluzione, abba-stanza comune nei programmidi grafica moderni, consistenel costruire una tavolozzaadattata che contenga anchecolori Websafe. Il programmaesamina tutti i colori della ta-

volozza e ogni volta che ne tro-va uno vicino a un corrispon-dente colore Websafe lo sosti-tuisce con quest'ultimo (Ma-cromedia Fireworks MX chia-ma questa particolare tecnicaWebsnap, Adobe Imagereadyla chiama invece Selettiva). In-fine abbiamo una quinta possi-bilità che consiste nel creareuna palette che dà priorità aicolori che sono più facilmentepercepibili dall'occhio umano,indipendentemente dalla fre-quenza con cui vengono usatinell'immagine (palette Percet-tiva, usata da ImageReady ePhotoshop).

I programmi di grafica com-patibili con il formato GIF soli-tamente propongono in auto-matico una palette che conser-vi la miglior fedeltà possibiledell'immagine e ci permetto-no, poi, di "ottimizzarla" inter-venendo su due parametri fon-damentali: il numero di colorinella palette e la presenza omeno del dithering. Quest'ulti-mo è un sistema per simularele gradazioni utilizzando la

Tutti i moderni programmi di elaborazione delle immagini (qui vediamo ImageReady diAdobe) offrono la possibilità di aprire finestre multiple in cui confrontare l'immagineoriginale con le versioni ottimizzate. Qui vediamo una scritta di testo che si adattaparticolarmente bene alla codifica GIF. Nella prima finestra abbiamo una versione conpalette selettiva a 32 colori (ce ne sono 17 in totale nell'immagine) che pesa 2,52Kbyte. Nella seconda finestra in alto abbiamo la stessa immagine ridotta però a 2colori (il minimo) che pesa 1,386 KB, ma che perde la possibilità di utilizzare lesfumature di arancione e di blu per realizzare l'antialiasing come vedremo. Nelle altredue finestre abbiamo utilizzato il formato JPEG con qualità bassa (30) e bassissima. Ledimensioni sono rispettivamente 6.06 Kbyte e 4,105 Kbyte, perciò entrambe superiorial formato GIF e con una perdita di qualità vistosa

Qui vediamo la stessa immagine precedente, ingrandita per osservare meglio icontorni del testo. Notiamo che la versione GIF a 2 colori mostra calettature visibilipoiché vengono a mancare gli altri colori intermedi che in questa immagine servono perrealizzare l'antialiasing. Volendo è possibile scendere a 8 bit, comprimendo l'immaginesenza perdere l'effetto aliasing in modo apprezzabile. Qui vediamo anche i bruttirisultati sul testo del formato di compressione JPEG, del tutto inadatto a elaborareimmagini con colori pieni

Un esempio di ottimizzazione d'immagine GIF realizzata mediante la riduzione deicolori. Nella finestra in altro a sinistra vediamo un logo che richiede 32 colori peressere rappresentato fedelmente, la dimensione dell'immagine è di 5,103 Kbyte. Nellafinestra 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. Passiamoalla terza finestra, in basso a sinistra. Qui siamo scesi a 8 colori con una dimensionedi 2,434 Kbyte, meno di metà del file originale. Il logo è ancora riconoscibile benché ilmagenta e il rosso non siano più fedeli e la scritta abbia cambiato colore. La quartaversione con soli 4 colori è diventata naturalmente irriconoscibile

53/88

combinazione di colori già pre-senti nell'immagine. Non au-menta perciò il numero di co-lori, ma incrementa comunquela dimensione del file aggiun-gendo informazioni che mi-gliorano soprattutto le even-tuali sfumature. Un parenteprossimo del dithering è l'an-tialiasing, che consiste nell'u-sare sfumature di colore perattenuare i bordi netti dei ca-ratteri tipografici di grandi di-mensioni, riducendone l'effet-to scalettatura. Il dithering èdirettamente attivabile e disat-tivabile nel momento in cui ge-neriamo l'immagine, l'antialia-sing viene realizzato automati-

camente seesistono colo-ri a sufficien-za.Il numero deicolori è l'ele-mento che piùdi qualsiasi al-tro influenzala dimensionefinale diun'immagine.Partendo dauna qualsiasidelle numero-se palette di-sponibili peril formato GIF,possiamo ri-durre seletti-vamente il nu-mero di coloricosì da au-mentare lacompressionedell'immagi-

ne. Di default si parte con unatavolozza di 256 colori, si puòquindi scendere a 128, 64, 32,eccetera, oppure prendere lascorciatoia e chiedere al pro-gramma di generare una palet-te "esatta", cioè contenente l'e-satto numero di colori effetti-vamente presenti nell'immagi-ne. Le due strade non sonoequivalenti. La tavolozza esat-ta consente infatti di eliminaresemplicemente le posizioninon occupate all'interno dellacodifica GIF e produce effettiapprezzabili solo su immaginiche abbiamo già pochi coloridi partenza. La riduzione ma-nuale forzata dei colori, inve-

ce, permettedi scalare ladimensionedel file in mo-do controlla-to, alterando-ne l'aspetto,ma in modopoco visibile.Potete anchebloccare par-ticolari coloriche non deb-bano essereeliminati dallascalatura, ar-rivando a di-mensioni chesono anchemeno dellametà dell'ori-ginale di par-tenza. Persemplificarequeste scelte,tutti i pro-

grammi di ottimizzazione perWeb aprono due o quattro fi-nestre che permettono di con-frontare visivamente l'origina-le di partenza con la versioneottimizzata, della quale posso-no esistere contemporanea-mente quattro varianti.

GIF trasparente e animatoDue varianti preziose del

formato GIF ci permettono dicreare effetti grafici ancora piùinteressanti. La prima consi-ste nell'attribuire la trasparen-za a uno dei colori contenutinella palette dell'immagine.Può trattarsi di un colore qual-siasi: una volta selezionato, di-venterà trasparente e lasceràintravedere il colore di sfondoimpostato via HTML per l'ele-mento HTML che contienel'immagine (tabella o pagina).

Questo genere di tecnica èutile quando un'immagine de-ve fondersi con la pagina senzamostrare il classico bordo ret-tangolare. In pratica il soggettodell'immagine si mescola conla pagina. Esistono due metodiper realizzare tale soluzione. Ilprimo consiste semplicementenel creare uno sfondo per l'im-magine che sia identico a quel-lo della pagina. Per far questobisogna conoscere bene i colo-ri HTML e la Websafe palette inmodo da non avere differenzevisibili. Prendiamo l'esempiodi un bottone che vogliamo in-serire nella nostra home page.Assegniamo al rettangolo chelo circonda un colore identicoa quello che sarà lo sfondo del-la pagina. La differenza tra idue non sarà visibile sul no-stro computer e l'immagine sifonderà perfettamente con ilresto della pagina. Di solito iprogrammi di elaborazionedelle immagini per il Web con-sentono di definire i colori me-diante gli stessi codici esade-cimali che useremo per lo sfon-do della pagina HTML, perciòsarete matematicamente sicuridel risultato.

Tuttavia, nel caso volessi-mo cambiare lo sfondo dellapagina, saremmo anche co-stretti a modificare ogni singo-lo bottone. Per ovviare a taleproblema e per consentire an-che l'uso di sfondi colorati inmodo vario (mediante l'impie-go d'immagini di background)si assegna allo sfondo che con-torna il nostro pulsante un co-lore trasparente. Un'operazio-ne facilissima: basta indica

L'immagine che contiene il bottone di questo esempio ha unosfondo blu identico allo sfondo della pagina HTML in cuis'inserisce. In tal modo i due si fondono e il bottone si fondeperfettamente con la pagina

Cambiando lo sfondo della pagina diventa evidente lo sfondodell'immagine

Per creare un bottone con sfondo trasparente, è necessarioscegliere come colore di trasparenza lo stesso che attribuiremoallo sfondo della nostra pagina Web, in questo caso il blu. In talmodo il programma di grafica costruirà le sfumature di blunecessarie per favorire la saldatura morbida tra l'immagine e losfondo. Nell'esempio in figura vediamo che Fireworks MX haidentificato con gli scacchi grigio-bianchi la zona trasparente eha generato un contorno bluastro tutt'intorno al pulsante �

54/88

5a lezione

re il colore prescelto per la tra-sparenza e il gioco è fatto.

L'unico accorgimento daeseguire in questa operazioneconsiste nello scegliere comecolore di sfondo dell'immaginea cui assegnare la trasparenzail medesimo colore che pen-siamo di realizzare per lo sfon-do della nostra pagina. Sembraun controsenso, ma in realtàderiva dalla necessità praticadi creare una transizioneuniforme tra i bordi arrotonda-ti dell'immagine e lo sfondocircostante. In questi punti ditransizione il programma dielaborazione dell'immaginecrea sfumature che tendonoverso il colore circostante cosìda ottenere l'effetto di antialia-sing (rimozione delle scaletta-ture e frastagliature dai bordi).Nel caso in cui lo sfondo fossebianco e lo rendessimo traspa-rente per poi montare l'imma-gine che ne risulta su una pagi-na blu, vedremmo un contorno

biancastro e irregolare attornoalla sagoma della figura. Par-tendo invece da uno sfondoblu che venga poi reso traspa-rente, la saldatura sarebbeperfetta.

L'animazione è la secondagrande prerogativa del forma-to GIF e consente di riuniredue o più fotogrammi dellastessa dimensione all'internodi un singolo file in modo da vi-sualizzarli ciclicamente. Il for-mato consente di creare un ci-clo ripetitivo che proseguesenza interruzione oppure ter-mina dopo un certo numero diripetizioni. Permette anche didefinire l'intervallo di tempotra un'immagine e la successi-va. In termini pratici, la se-quenza d'immagini appariràcome un singolo elemento everrà inserita nella paginaHTML come qualsiasi altra im-magine. È possibile creare unGIF animato anche con sfondotrasparente.

L'ultima variante del GIFconsiste nel formato interlac-ciato, usato di rado perché ap-pesantisce il file e di fatto ag-grava il problema che vorreb-be risolvere. Un'immagine in-terlacciata compare sul videoun po' per volta. La tecnica èstata sviluppata per consenti-re al browser di visualizzareuna versione a bassa risolu-zione dell'immagine non appe-na sia disponibile 1/8 del suocontenuto, proseguendo poicon la costruzione della paginamentre l'immagine termina dicaricarsi e diventa perfetta-mente visibile. La tecnica svel-tisce la navigazione di paginecon immagini di grandi dimen-sioni, tuttavia è altamentesconsigliata per eventuali ele-menti di navigazione grafici vi-sto che l'utente sarebbe co-stretto ad aspettare prima diriuscire a capire di che cosa sitratti.

JPEG per le fotografieIl formato standard per la re-

gistrazione di immagini foto-grafiche è il Joint PhotographicExperts Group. Offre il massimorendimento in tutte le situa-zioni in cui esistano sfumaturedi colore e passaggi tonali mor-bidi. Codifica fino a 16 milionidi colori e realizza una com-pressione di qualità regolabileche comporta in ogni caso laperdita parziale delle informa-zioni originali, senza che tutta-via tale perdita risulti evidenteall'occhio, salvo quando si esa-gera con la compressione.

A differenza del formato GIF,il JPEG richiede anche l'opera-zione di decompressionequando viene visualizzato dal

browser il che aggiunge un ri-tardo di visualizzazione chenon dipende dal tempo di tra-sferimento dell'immagine. Pertale motivo, un'immagine JPEGsarà sempre più lenta da vi-sualizzare di un'immagine GIFdi pari dimensioni.

La versione più recente delformato JPEG consente di re-golare il livello di compressio-ne con variazioni di un cente-simo e di creare immagini chesi visualizzano progressiva-mente. In quest'ultimo casol'immagine compare immedia-tamente nella pagina, anche sesfocata, per poi perfezionarsinon appena il browser ne com-pleta l'elaborazione. Per le fo-tografie il JPEG non è secondoa nessuno e garantisce effi-cienze inarrivabili dagli altridue formati: GIF e PNG. Risultainvece pessimo per le immagi-ni con contorni netti e coloripieni, regno incontrastato delformato GIF.

PNG tuttofareIl formato Portable Network

Graphics nasce per rimpiazza-re GIF e per sostituirsi a JPEGin alcune circostanze. Alla paridi GIF, offre l'effetto di traspa-renza, molto migliorato quali-tativamente poiché realizzatoa vari livelli, e la generazioned'immagini interlacciate la cuivisualizzazione comincia dopoche è stato caricato 1/64 del fi-le e non 1/8 come nel caso delGIF.

A differenza del GIF, codifica16 milioni di colori e non con-sente l'animazione. Viene uti-lizzato come formato internoda alcuni programmi di elabo-razione grafica, come Fi-reworks, poiché memorizzaanche i vari stadi intermedi dimanipolazione così da modifi-care il testo e altri elementigeometrici vettoriali inseritinella pagina anche dopo chel'immagine è stata salvata. Po-tendo arrivare a 48 bit di colo-re e 16 bit di scala di grigio èpossibile utilizzarlo anche insostituzione del JPEG, speciequando si vuole l'effetto tra-sparenza per un'immagine fo-tografica. Nella compressionenon si perdono informazioni eperciò è possibile elaborare esalvare ripetutamente lo stes-so file senza scadere in qualità.

Il suo difetto sta nel suppor-to ancora parziale offerto daivari browser, soprattutto allatrasparenza variabile. �

Qui vediamo la stessa immagine a cui è stato attribuito unosfondo trasparente partendo, nel primo caso, dallo sfondobianco originale e, nel secondo caso, da uno sfondo blu identicoa quello previsto per la pagina. Nella prima si nota un bordobiancastro e alcuni segni spuri che disturbano l'immagine, chesono invece assenti dal secondo

Un'immagine con bordo trasparente con bordi irregolari puòessere montata su una pagina che contenga un'immagine dibackground creando un effetto di sovrapposizione perfetto

Questa foto è riprodotta in quattro formati diversi. Il primo è l'orginale salvato informato TIFF, usato nel mondo dell'editoria perché comprime senza perdereinformazioni. Gli altri tre mostrano quanto si perda in qualità con GIF o PNG cercando dicomprimere un'immagine allo stesso livello ottenibile con JPEG

55/88

5a lezione

Il Web esiste grazie al concet-to di ipertesto mediante ilquale diversi documenti pos-

sono essere consultati in ordi-ne libero sfruttando collega-menti reciproci.

Questi ultimi prendono il no-me di collegamenti ipertestua-li e consentono di saltare dauna posizione all'altra nellastessa pagina, da una pagina aun'altra dello stesso sito e daun sito all'altro. Basta cliccaresul link e si viene immediata-mente proiettati verso la desti-nazione richiesta.

Esistono due modi per inse-rire un link ipertestuale in unapagina Web: nella forma di te-sto e nella forma di immagine.In entrambi i casi, si sfrutta lostesso marcatore, denominato“ancora” il quale a sua voltaesiste in due varianti.

La più comune prende il no-me di “ancora sorgente” per-ché identifica il punto di par-tenza del collegamento e nefornisce la descrizione delladestinazione. È il classico linkche troviamo nella maggiorparte delle pagine Web e sulquale clicchiamo per saltare aun'altra pagina. La seconda va-riante è invece l'ancora di de-stinazione utile per marcare ilpunto di arrivo di un particola-re link all'interno della pagina.

La si usa solitamente percreare link a porzioni internedello stesso documento oppu-re per fare in modo che la pagi-na richiamata da un link ester-no si apra in corrispondenza diun particolare paragrafo, anzi-ché alla prima riga.

Ancore sorgenteIl testo o l'immagine che de-

limitano il "punto caldo" (hotspot) del collegamento sorgen-te, cioè il punto da cliccare, so-no racchiusi tra i tag <a> e </a>.La destinazione del link è inve-ce indicata mediante l'attributohref (hypertext reference) chepuò contenere un collegamen-to relativo (pertinente al sito incui già ci troviamo) oppure as-soluto (diretto a un sito ester-no). All'interno di un sito, lagran parte dei link saranno re-lativi, vale a dire che indiche-ranno la posizione del docu-mento di destinazione in rela-zione alla directory principaledel sito (collegamento relativo

completo) oppure in relazioneal documento di partenza (col-legamento relativo indiretto odiretto – vedi l'articolo Colle-gamenti assoluti e relativi nel-la seconda lezione).

Prendiamo ad esempio il col-legamento che dalla home pa-ge del nostro corso porta allaprima pagina della quinta le-zione: <a href="Lezione_5/Le-zione_5.htm">quinta lezio-ne</a> vediamo che la fraseche comparirà sulla pagina è"quinta lezione" e quando cicliccheremo sopra, si aprirà lapagina "Lezione_5.htm" che sitrova nella cartelletta "Lezio-ne_5" collocata un livello sottoalla cartelletta in cui ci trovia-mo al momento. Esistono varialtri attributi, ma il più impor-tante è target che specifica do-ve inviare la nuova pagina chestiamo per aprire. È un attribu-to indispensabile nei frame, co-me vedremo più avanti, ma tor-na utile anche quando voglia-mo inserire un link esterno enon vogliamo che il navigatoreabbandoni il nostro sito.

In tal caso basterà impostaretarget="_blank" per far aprire albrowser una nuova finestra inaggiunta a quella da cui siamopartiti. In alternativa è anchepossibile aprire una nuova fi-nestra e assegnarle un nome difantasia: target="pippo".

In questo caso la nuova pa-gina verrà aperta in una nuovafinestra denominata "pippo".Da notare che esiste tuttaviauna differenza sostanziale tra"_blank" e "pippo". Il primo de-terminerà ogni volta l'aperturadi una nuova finestra che si ag-giungerà a quelle già presenti.Il secondo invece invierà qual-siasi altra nuova pagina nellastessa finestra, sostituendo ilcontenuto esistente.

Nel caso di link applicati aun'immagine la sintassi rimanela stessa salvo aggiungere ilmarcatore <img>. Vediamo unesempio sempre tratto dal no-stro corso: <a href="Lezio-ne_5/Lezione_5.htm"><imgsrc="Lezione_5/immagine.gif"width="100" height="100" bor-der="0"></a> ci dice che clic-cando su immagine nella pagi-na corrente saremo trasportatinella pagina Lezione_5.htm chesi trova nella cartelletta Lezio-ne_5 subito sotto di noi.

Notate che la coppia di tag<a> e </a> racchiude comple-tamente il marcatore <img>con tutte le informazioni relati-ve all'immagine.

Tra gli attributi previsti daquest'ultimo notiamo borderche serve a bordare l'immaginecon una cornice blu per indica-re che vi è associato un linkipertestuale (prerogativa soli-tamente non usata per motiviestetici).

Ancore di destinazioneLe ancore di destinazione

sono usate abbastanza di rado.È infatti preferibile comporredocumenti brevi che puntinoad altri documenti altrettantobrevi che non creare pagine in-terminabili che necessitino diriferimenti interni. In ogni caso,queste ancore possono tornareutili in alcune situazioni. La lo-ro caratteristica essenzialeconsiste nell'identificare unpunto del documento come de-stinazione di un collegamentoorigine. Tale punto può coinci-dere con un qualsiasi elementoHTML (paragrafo, titolo), conun brano di testo (anche sem-plicemente uno spazio bianco)oppure con un'immagine.

La sintassi da usare nel casodi un elemento HTML è la se-guente <h1 id="pippo">brano ditesto </a>. Si sfrutta l'attributoid tipico delle versioni più re-centi di HTML per identificarel'elemento a cui vogliamo pun-tare. Nel caso invece di un bra-no di testo o di un'immagine, lasintassi sarà la seguente: <a na-me="pippo">brano di testo o im-magine</a>. In entrambi i casiil link sarà invisibile nella fine-stra del browser e non saràcliccabile proprio perché sitratta di una destinazione enon di un'origine. Avrete nota-to che nei due esempi abbiamoinserito un nome di fantasia(pippo) che ci servirà per pun-tare all'ancora di destinazionedall'interno di un'ancora di ori-gine. Supponiamo di volercreare un link in cima al docu-mento che faccia scorrere il te-sto nella finestra fino a rag-giungere l'ancora di destinazio-ne. La sintassi sarebbe <ahref="#pippo">testo da clicca-re</a>. Notate che abbiamousato il simbolo di cancellettoprima di "pippo" per indi-

4 Link ipertestuali

�

56/88

5a lezione

Abbiamo già visto che le ta-belle svolgono un ruoloessenziale per costruire il

layout di una pagina Web. Inse-rendo brani di testo e immaginientro le celle di una tabella in-visibile, possiamo stabilirne leposizioni e gli allineamenti.

Un impiego particolare diquesta funzione consiste nel-l'usare la tabella come elemen-to di unione per più immaginioppure per gli elementi frazio-nati di una singola immaginepiù grande.

Il primo caso è il più comunee lo troviamo nella gran partedei siti. Prendiamo ad esempioil sito italiano www.film.it cheparla di novità cinematografi-che. Se scomponiamo la suahome page, vediamo che con-tiene una tabella che salda traloro testo, fotografie, pulsantinavigazione e testatine grafi-che (vedi la figura).

Il secondo caso adotta inve-ce una tecnica di frammenta-zione dell'immagine sviluppatadai progettisti Web per sveltireil caricamento di un'immaginedi grandi dimensioni e per usa-re la stessa immagine comestrumento di navigazione. L'o-

perazione richiede una certadimestichezza con i program-mi di grafica e prevede la sud-divisione di un'immagine intanti riquadri di dimensione va-riabile, che saranno uniti me-diante una tabella così da ri-comporre visivamente l'imma-gine originale senza lasciar tra-sparire la tabella sottostante.

Poiché ogni singola porzionedell'immagine sarà contenutain una cella indipendente esarà un'immagine autonoma,diventerà possibile abbinarleun collegamento ipertestualecosì da creare un sistema di na-vigazione grafico (vedi l'esem-pio). Potremo anche animarealcune porzioni dell'immagine,creando un GIF animato perquel particolare frammento, ecreare i cosiddetti rollover, va-le a dire cambiamento d'imma-gine al passaggio del mouse. Laframmentazione (slicing) diun’immmagine comporta note-voli benefici anche nel regolareil peso della pagina. Supponia-mo infatti di avere una figurache contenga ampi spazi a tin-ta unita con magari porzioni ditesto al loro interno. Realizzareil tutto in grafica vorrebbe dire

appesantire la pagina e compli-care qualsiasi successiva mo-difica del testo. Mediante laframmentazione, invece, pos-siamo rimpiazzare con un sem-plice sfondo HTML tutte le por-

5 Tabelle d’immagini

care che si tratta del nomedi un'ancora di destinazione.Nel caso di un link contenuto inun documento esterno la sin-tassi sarebbe: <a href="docu-mento.html#pippo">testo dacliccare</a>.

Il documento.html si aprirà

nella finestra del browser esat-tamente nel punto contrasse-gnato dall'ancora "pippo".

La terza variante di link iper-testuale ci consente d'identifi-care esplicitamente che le pa-role che seguono corrispondo-no a un indirizzo di posta elet-

tronica e che perciò, cliccan-dovi sopra, sarà possibile in-viare un messaggio diretta-mente a quel destinatario.

Si tratta di una funzione mol-to usata per facilitare il contat-to con il gestore del sito o conaltre persone.

La sintassi è la seguente: <ahref="mailto:[email protected]">pippo</a> quando il navigato-re cliccherà su "pippo" gli siaprirà automaticamente il pro-gramma di posta e nella caselladel destinatario comparirà l'in-dirizzo "[email protected]". �

In questa pagina presa dal Web (www.film.it) vediamo cerchiate in rosso e in verdetutte le immagini che sono state unite mediante la tabella invisibile che regge l'interapagina. Nella parte alta di navigazione, il riquadro nero, le immagini si mescolano conlo sfondo della cella sembrando un tutt'uno

Qui vediamo FireworksMX usato persuddividere una foto inporzioni che andranno ariempire altrettantecelle di una tabella cheviene generataautomaticamente dalprogramma

Ecco la tabellavisualizzata all'internodi Dreamweaver MX.Notiamo le celle e lesingole immagini che visono contenute. Aciascuna possiamoassegnare un linkipertestuale così dacreare un elementografico di navigazione

Una volta visualizzatanel browser, l'immaginesembra completamentericomposta e la tabellasottostante saràinvisibile. Tuttavia seporteremo il cursoresulle diverse porzionivedremo checontengono linkipertestuali attivi

zioni dell'immagine che hannouna tinta unita e che magaricontengono testo. Oggi esisto-no numerosi programmi construmenti dedicati alla fram-mentazione automatica delle

�

57/88

5a lezione

Abbiamo visto che un'im-magine può essere frazio-nata in blocchi così da far

corrispondere a ciascun bloc-co un link ipertestuale e creareun sistema di navigazione gra-fico. L'unione dei vari blocchiin modo da riprodurre visiva-mente l'immagine originale sul-la pagina Web richiede l'impie-go di una tabella di layout. Il si-stema è tuttavia complesso,trascina con sé tutte le impre-vedibilità delle tabelle e non sipresta a layout complessi, ma-gari di forma astratta.

Esiste un'alternativa checonsiste nell'assegnare all'im-magine che dovrà fungere daelemento di navigazione unaserie di coordinate che identi-ficano aree cliccabili.

A ciascuna di tali aree, poi,attribuiremo un link iperte-stuale. In pratica tracciamo sul-l'immagine una mappa invisibi-le, indicando le coordinate inpixel dei vertici delle varie for-me, calcolati partendo dall'an-golo superiore sinistro dell'im-magine.

Calcolare le coordinate a ma-no sarebbe un'impresa non dapoco, ma fortunatamente tutti iprincipali editor HTML visualiprevedono strumenti che sem-plificano moltissimo questaoperazione. Basta tracciare sul-la figura i contorni delle variezone e il programma calcoleràtutte le coordinate relative pro-ducendo anche il codice HMTLnecessario per inserire la map-

pa immagine (image map) nellapagina. Le zone possono averetre forme: circolare, rettango-lare o poligonale.

Le mappe immagine posso-no essere di due tipi: il primo,che è anche il più comune,prende il nome di mappa im-magine lato client (client sideimagemap) e memorizza tuttele informazioni relative allamappa all'interno della paginaHTML che contiene l'immagi-ne. Ciò consente al browser difornire informazioni sui link as-sociati a ciascuna zona e costi-tuisce il metodo di mappaturaraccomandato dalle specificheHTML 4.01.

Il secondo metodo, usato inorigine, prendeva il nome dimappe immagine lato server edepositava le coordinate sulserver che ospitava il sito, la-sciando al server medesimo ilcompito d'interpretare l'azionedell'utente sulla mappa, resti-tuendo l'indirizzo di link cor-retto. Oltre a essere molto piùcomplicate da realizzare dellemappe lato client, le server si-de imagemap presentavanoanche lo svantaggio di funzio-nare in modo diverso a secon-da del server impiegato e di ri-chiedere continue connessio-ni al server.

Per aggiungere una mappa aun'immagine esistente si usa ilparametro usemap="nome_mappa" all'interno del tag<img> che identifica l'immaginestessa. Il valore nome_mappa

punta a una mappa identificatadal tag <map name="nome_mappa"> che contienetutte le coordinate delle zonecliccabili (hot spot).

A ciascuna di queste asso-ciamo, poi, un link ipertestualein modo tale da trasformarel'immagine in un elemento dinavigazione. �

6 Mappe immagine

Ecco il codice HTMLper generare lamappa immaginevista prima

Qui vediamo un'immagine a cui sono state abbinate tre zonecliccabili mediante la creazione di una mappa. Riconosciamole tre forme consentite: rettangolo, cerchio e poligono

immagini, in particolare Photo-shop, ImageReady e FireworksMX. È sufficiente posizionare leguide di taglio per identificarele varie porzioni e in alcuni ca-si è anche possibile assegnare,già dall'interno del programmadi grafica, l'effetto rollover e ge-nerare automaticamente la ta-bella HTML finale. �

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

� Nella tabella finale vediamo che sonopresenti due celle vuote con sfondobianco che sostituiscono due porzionidell'immagine contenute nella versioneprecedente.Con questo semplice accorgimento, la dimensione complessiva della pagina èpassata da 66 a 54 Kbyte. Disponendod'immagini con porzioni più ampie dicolore uniforme è chiaramente possibilerecuperare più spazio

58/88

6a lezione

Ilinguaggi di programmazionesi dividono essenzialmente intre grandi gruppi: linguaggi

compilati, semi-compilati ed in-terpretati.

Nel caso dei linguaggi compi-lati, il codice sorgente (ossia ilfile testuale contenente le istru-zioni che devono essere ese-guite da parte del personalcomputer) viene “impacchet-tato” sotto forma di un file ese-guibile. I sorgenti vengono “tra-dotti” in codice macchina,comprensibile al personalcomputer, mediante l’utilizzo

dei cosiddetti compilatori. Ciòcomporta che un programma“trasformato” in codice mac-china può funzionare solo edesclusivamente in un partico-lare ambiente hardware-soft-ware.

Tra i linguaggi semi-compila-ti, citiamo Java: nato per affian-care l’HTML, permette lo svi-luppo e l’utilizzo di applicazio-ni indipendenti dalla piattafor-ma. Ciò significa che Java è in-dipendente dalla specifica piat-taforma hardware-software: ilprogramma Java viene compi-

lato in Java Bytecode quindi in-terpretato ed eseguito dallaspeciale Java Virtual Machine(ne esistono versioni per tuttele piattaforme hardware-soft-ware in circolazione).

La terza categoria di lin-guaggi di programmazione ècomposta dai linguaggi inter-pretati: in questo caso, il codicesorgente viene proposto inchiaro, senza alcun tipo di co-difica: sta al browser Internetinterpretarlo ed eseguire leistruzioni elencate.

I linguaggi interpretati pos-

sono quindi essere consideraticome una sorta di “estensione”dell’HTML. Come avrete avutomodo di apprendere nelle le-zioni precedenti del nostro cor-so, l’HTML non è un linguaggiodi programmazione vero e pro-prio (nonostante sia spesso, inmaniera colloquiale, erronea-mente definito come tale).L’HTML è un linguaggio di defi-nizione della pagina che per-mette di impostare la posizionedi testo ed immagini in una pa-gina Web, di posizionare tabel-le, frame, liste puntate e nume-

Lezione 1:Competenze e strumenti(disponibile integralmentesul CD)

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

• Progettare un sito statico • Progettare la pagina• Pagine HTML e marcatori • Strutturare i contenuti della pagina• Adobe GoLive 6.0• Spiegazione dei tag HTML per una pagina

vergine• Esercizi su come creare una pagina

vergine e su come progettare un sito

Lezione 3:Modelli di pagina e tabelle(disponibile integralmente sul CD)

• La tabella come elemento strutturale• Progettare layout fluidi e statici• Costruire template con le tabelle

di layout • NamoWeb Editor5: per siti statici

professionali• Dimensionare tabelle e celle fluide,

dimensionare tabelle con celle miste,allineamento spontaneo delle tabelleconsecutive

• Template con struttura complessa• Template con tabelle nidificate• Esercizi

Lezione 4:HTML 4.01 e CSS(disponibile integralmente sul CD)

• Stile e struttura: usare i tag HTML nativi• Il deprecato tag font• I marcatori per formattare il testo• Gestire gli spazi nel testo• CSS e HTML 4.01 • Cosa si può fare con i fogli stile• Quattro tipi di CSS• I colori del Web• Gestire le immagini• Esercizi• Ereditarietà e innesco a cascata• Proprietà di trasferimento

dei parametri• Regole di ereditarietà• Selettori di classe• Websafe palette

Lezione 5:Design e multimedialità(disponibile integralmente sul CD)• Elementi di design per il Web• La ruota colore• Grafica e formati di immagini per Internet• Link ipertestuali• Tabelle d’immagini• Mappe immagine• Audio e video

Lezione 6:Siti interattivi• I linguaggi di programmazione• La programmazione orientata agli oggetti• Oggetti e prioprietà• Eventi e funzioni• Variabili e stringhe• Gli operatori in JavaScript• Istruzioni condizionali• Interazione tra JavaScript e form HTML• Interazione tra JavaScript e frame• DHTML

Le prossime puntateLezione 7:Interazione sul server

Lezione 8:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Michele Nasi

�

il corso è sul CD

n. 70

� A scuola con PC Open

ProgettoWebMaster1 I linguaggi di programmazione

59/88

6a lezione

rate e così via, oltre a stabilirele proprietà caratteristiche(ampiezza, colore, allineamen-to) di ciascun elemento.

Fatta eccezione per i form,l’HTML non ha in sé né struttu-re in grado di interagire con l’u-tente né strutture decisionali.L’HTML, insomma, è completa-mente statico.

Con questa lezione del no-stro corso, ci proponiamo diaggiungere un altro importantetassello alle nostre conoscen-ze: presenteremo JavaScript eDHTML.

JavaScript può essere consi-derato come il complemento diHTML. È un linguaggio inter-pretato ed è un linguaggio discripting. JavaScript è sempli-ce perché si basa su un numeroristretto di oggetti di program-mazione, tuttavia il suo utilizzopotrebbe non risultare indicatoper lo svolgimento delle opera-zioni più complesse: procedureall’apparenza assai semplici,potrebbero infatti implicare losviluppo di script piuttostocomplicati.

JavaScript è sicuro e affida-

bile: proprio per la sua peculia-rità di essere un linguaggiopiuttosto limitato – per numeroe complessità delle struttureche mette a disposizione – nonsi conoscono problemi di sicu-rezza e di affidabilità.

Tutti i bug e le “falle” di sicu-rezza di JavaScript sono statiscoperti e risolti sin dall’uscitadelle prime versioni.

Tra le caratteristiche princi-pali abbiamo già messo in lucecome il codice sia in chiaro,ossia visibile da parte dichiunque, semplicemente ser-

vendosi della funzione Visua-lizza l’HTML del browser, desi-deri di consultare il codiceHTML della pagina Web chesta visitando.

Il codice JavaScript, inoltre,viene eseguito sul client, ossiasul personal computer che stavisitando un determinato sitoInternet. Si tratta di un aspettoimportante che deve essere te-nuto a mente: altri linguaggi diprogrammazione vengono det-ti “lato server” perché, ad ognirichiesta di connessione daparte di un personal computer

(client), il server esegue le azio-ni previste dal programmatoree comunica al computer client(e quindi al suo browser Inter-net) il responso.

Il codice JavaScript, invece,non viene interpretato ed ese-guito sul server ma viene invia-to – così com’è – al client: pen-serà, quindi, il browser Internet(per esempio Internet Explo-rer) ad interpretarlo e ad ese-guire le istruzioni specificate.

Il codice di uno script Java-Script deve essere quindi sca-ricato completamente da partedel browser installato sul per-sonal computer client, prima dipoter essere eseguito.

In questo modo, JavaScriptdispensa il server dall’effettua-re una mole di lavoro aggiunti-va (il server non deve proces-sare il codice JavaScript) macostringe ogni client ad un’o-pera di interpretazione ed ese-cuzione degli script.

È bene, quindi, non realizza-re in JavaScript, script troppocomplessi, che richiedano, daparte dei client, elevati tempidi elaborazione. �

L’identikit di JavaScript• JavaScript è un linguaggio di scripting• Un linguaggio di scripting è un linguaggio di programmazione

“ridotto all’osso”• Uno script JavaScript si compone di una serie di istruzioni

eseguibili dal personal computer client• Il codice JavaScript è inseribile all’interno di una qualsiasi pagina

HTML• JavaScript è un linguaggio aperto che può essere liberamente

utilizzato da chiunque senza la necessità di acquistare unalicenza d’uso

• JavaScript è supportato da tutti i browser Internet

Si sente sempre più spessoparlare di programmazio-ne orientata agli oggetti

(in inglese OOP, Object Orien-ted Programming). Pochi ne co-noscono, però, il reale signifi-cato. Per far luce sull’argomen-to è sufficiente pensare un pro-gramma come un insieme dioggetti (oggetti software) checooperano tra loro.

Ogni oggetto è in grado dieseguire azioni particolari chevengono effettuate solo quan-do richiesto da un altro oggettosoftware. Pensate ad un televi-sore: si tratta di uno strumentoche, per esempio, sa accender-si, sa sintonizzarsi su canalispecifici, sa spegnersi. Ogniazione è però richiesta esplici-tamente da parte dell’utente,servendosi di un altro oggetto(il telecomando).

In pratica, è il telecomandoche invia al televisore un mes-saggio comunicandogli qualeazione deve essere intrapresa.Il televisore poi è in grado diconoscere il suo stato attualeossia le proprie proprietà (il

televisore è acceso o spento?Su quale canale è sintonizza-to?). Analogamente, anche glioggetti software dialogano traloro per mezzo di messaggi edogni oggetto è caratterizzatoda un insieme di proprietà chene descrivono lo stato.

I linguaggi di programmazio-ne più moderni fanno uso deglioggetti software per rendere lascrittura dei programmi piùsemplice e intuitiva. Non è ri-chiesta, infatti, al programma-tore la conoscenza sul funzio-namento “interno” dell’oggettosoftware (chi utilizza il televi-sore non deve sapere come so-no strutturati i circuiti elettro-nici che gli permettono di fun-zionare): gli è sufficiente ap-prendere le modalità per collo-quiare con lui, ossia i messaggiche possono essere inviati el’effetto di ogni singolo mes-saggio (semantica).

Semplificando molto, prova-te a pensare ad un ipotetico og-getto software chiamato “cal-cola distanze”: tale oggetto è ingrado di acquisire il nome di

due città e di calcolare la di-stanza tra di esse. Possiamosupporre che tale oggettosoftware preveda l’invio di duemessaggi: il primo per richie-dere l’acquisizione dei nomidelle città da parte dell’utiliz-zatore del programma, il se-condo per richiedere il calcolodella distanza tra le due cittàspecificate. Le proprietà del-l’oggetto saranno essenzial-mente due: la prima permet-terà di avere informazioni sulnome della prima città inserita;la seconda proprietà sul nomedella seconda città. I valori diogni proprietà sono memoriz-zati in appositi contenitori(porzioni della memoria) de-nominati variabili. Ciascun og-getto software è poi caratteriz-zato da alcuni metodi: essi de-scrivono le azioni che l’oggettodeve compiere non appena ri-ceve un messaggio specifico.

La programmazione orienta-ta agli oggetti è, quindi, unatecnica di programmazioneche permette di semplificarenotevolmente alcuni concetti

che riguardano lo sviluppo diprogrammi, come vedremo piùavanti.

Come inserire uno script in una pagina Web

Nelle precedenti puntate delnostro corso abbiamo avutomodo di familiarizzare con nu-merosi tag (o marcatori)HTML. Ne aggiungiamo un al-tro: <SCRIPT> e </SCRIPT> con-sentono di delimitare il codiceJavaScript e quello proprio dialtri linguaggi di scripting.

Nella pratica, vanno utilizza-ti i tag seguenti:<SCRIPTLanguage=“Javascript”><!--//--></SCRIPT>

Com’è facile notare, all’inter-no della tag <SCRIPT> è semprebene specificare con quale lin-guaggio è stato realizzato loscript. Qualora si indichi anchela versione di JavaScript, loscript verrà interpretato edeseguito solo dai browser chela supportano. Ad esempio, ilcodice contenuto all’internodelle tag che seguono verrà in-

2 La programmazione orientata agli oggetti

�

60/88

6a lezione

terpretato solo da Internet Ex-plorer 4.0 o Netscape 4.0 e ver-sioni successive: <SCRIPTLanguage=“Javascript1.2”><!--//--></SCRIPT>

Omettendo l’indicazione del-la versione, il codice verrà pro-cessato da tutti i browser.

In alternativa, è possibile uti-lizzare il tag <script type=“text/javascript”> che consen-te, egualmente, di definire Ja-vaScript come linguaggio discripting.

Il codice JavaScript può es-sere inserito direttamente al-l’interno di una pagina Web op-pure in un file esterno. Tale filedovrà poi essere opportuna-mente richiamato dal corpodella pagina HTML.

Se si vuole inserire lo scriptnella pagina HTML, si deve te-nere presente che questo puòessere collocato all’interno del-le tag <HEAD> e </HEAD> (ov-vero nell’intestazione della pa-gina Web), oppure tra le tag<BODY> e </BODY> (il corpovero e proprio della paginaHTML). È importante ricordareche gli script vengono eseguitiin maniera sequenziale, unodopo l’altro, a seconda della lo-ro posizione all’interno del co-dice HTML della pagina Web. Inparticolare, gli script inseritinell’intestazione tra le tag<HEAD> e </HEAD> vengonoeseguiti per primi.

I browser Internet e gli script

Abbiamo già evidenziato co-me tutti i browser, soprattuttoquelli di ultima generazione,siano in grado di processare iJavaScript, qualsiasi sia la loroversione. Ma cosa succede sela pagina Web facente uso di Ja-vaScript viene visualizzata con

un browser obsoleto? Di solitoo il codice non viene eseguito osi presentano problemi. Qualo-ra, poi, l’esecuzione degliscript fosse disattivata o siusassero browser che non sup-portano JavaScript, il codicepresente nella pagina Web nonverrebbe eseguito. Spesso si ri-corre, quindi, all’uso della tag<NOSCRIPT></NOSCRIPT> chepermette di specificare il com-portamento che il browser de-ve tenere qualora non fossepossibile interpretare lo script.

Spesso si usa quindi il co-strutto che segue:<NOSCRIPT><META HTTP-EQUIV REFRESHCONTENT=“0;URL=nomedellapagina.html”></NOSCRIPT>

In pratica, il tag <META RE-FRESH> ordina al browser, qua-lora questo non sia in grado diriconoscere adeguatamente loscript, di passare immediata-mente alla visualizzazione del-la pagina HTML “nomedellapa-gina.html”. Il buon programma-tore avrà cura di inserire, in ta-le pagina, una versione del sitovisualizzabile con i browser piùvetusti.

Come regola generale, visuggeriamo di racchiuderesempre il codice JavaScript trale tag <!-- e --> che, in HTML, in-dicano i commenti.

Questo perché alcuni brow-ser (quelli più vecchi) qualoranon riconoscano il codice Ja-vaScript, potrebbero, anzichéeseguirlo, visualizzarlo sullapagina Web (cosa che va asso-lutamente evitata). Delimitan-do, invece, gli script tra le tag<!-- e -->, i browser più vecchi,non in grado di riconoscere Ja-vaScript, ne interpreteranno ilcodice semplicemente comecommenti HTML (che non de-

vono essere stampati sulla pa-gina Web).

Alcuni browser, soprattuttole versioni più datate di Net-scape, hanno difficoltà nel ge-stire il segno > di fine commen-to: è bene perciò anteporre unadoppia barra // (commento Ja-vaScript) prima del tag -->.

Create una nuova paginaHTML, servendovi di uno deglieditor presentati nelle prece-denti lezioni del corso (poteteservirvi semplicemente delBlocco Note di Windows o di uneditor testuale), quindi copiateal suo interno quanto segue:

<html><head></head><body><SCRIPTLanguage=“Javascript”><!--document.write(“Benvenuto nelmondo di JavaScript!”);alert(’Questo è il tuo primoscript’);//--></SCRIPT></body></html>

In questo script potete facil-mente notare tutto quanto èstato sinora introdotto.

È possibile notare come, inquesto caso, il codice Java-Script sia stato inserito all’in-terno della tag <BODY> (corpodella pagina HTML). È stato fat-to uso delle tag <!-- e --> (per im-pedire ai browser più datati lavisualizzazione dello script sul-la pagina Web) e della doppiabarra finale (//).

Le righe evidenziate in rossosono istruzioni.

In JavaScript ogni istruzioneha termine con il salto di riga(il ritorno a capo) oppure con ilpunto e virgola (;).

Consigliamo di usare sempre

il punto e virgola: vi consentiràdi identificare più istruzioni chestanno sulla stessa riga.

Eseguire uno script esternoChi sviluppa una pagina Web

che fa uso di JavaScript, puòdecidere se inserire gli scriptdirettamente nella paginaHTML oppure se utilizzare fileesterni.

La sintassi da usare è la se-guente:<SCRIPTSRC=“nomedelfilejavascript.js”></SCRIPT>

dove il file “nomedelfilejava-script.js” è il file contenente ilcodice JavaScript e che deveessere richiamato.

I vantaggi che derivano dal-l’uso di file esterni sono enor-mi: se si prevede di utilizzare lostesso codice JavaScript in piùpagine HTML, si potrà sempli-cemente far riferimento al fileesterno che lo contiene, senzadoverlo riscrivere ogni volta.Supponiamo, ad esempio, chedieci pagine HTML del sito Webche state realizzando debbanoimpiegare lo stesso codice Ja-vaScript: basterà memorizzarelo script in un unico file di te-sto (ad esempio ilmioscript.js)e richiamarlo da ciascuna pa-gina servendosi della tagSCRIPT SRC.

Ricorrendo a file esterni siattribuisce al sito che si starealizzando una struttura mo-dulare che porterà ad indubbivantaggi in termini di spaziooccupato (le pagine Web sa-ranno più snelle e compatte) efaciliterà eventuali modifichedel codice JavaScript (si dovràintervenire solo sul file ester-no e non sulla struttura di cia-scuna pagina HTML), congrossi vantaggi in termini ditempo. �

3 Oggetti e priorità

Ricollegandoci con quantointrodotto poco fa circa laprogrammazione orienta-

ta agli oggetti, passiamo ad il-lustrare, nella pratica, il signifi-cato di oggetti e proprietà.

Una pagina Web, visualizzataall’interno del browser Inter-net, è considerabile come unoggetto. Ogni tabella, pulsante,immagine, form, link, presente

nella vostra pagina Web è unoggetto. Ogni oggetto disponedi un certo numero di pro-prietà che lo caratterizzano inmodo univoco.

Le informazioni per la visua-lizzazione del colore dello sfon-do della pagina HTML sono,per esempio, memorizzate nel-la proprietà bgcolor dell’ogget-to document.

Utilizzando l’istruzione Java-Script document.bgcolor=“red”alla vostra pagina Web sarà as-segnato, come colore di sfon-do, il rosso.

Il contenuto di un ipoteticocampo denominato username,facente parte del form miolo-gin, può essere recuperato uti-lizzando la proprietà value: do-cument.miologin.username.va-

lue. Notare che la proprietà va-lue si riferisce all’oggetto user-name (campo testo) che è par-te dell’oggetto miologin (form),il quale, a sua volta, è contenu-to nell’oggetto document (la pa-gina Web).

MetodiI metodi descrivono le azioni

che l’oggetto deve compiere

�

61/88

non appena riceve un messag-gio specifico. In pratica, i me-todi sono le azioni che l’ogget-to è in grado di compiere.

Così come una porta può es-sere aperta o chiusa, una lam-padina accesa o spenta, gli og-getti sono in grado di compieremolte azioni.

Write() è, per esempio, unmetodo dell’oggetto docu-ment: abbiamo già avuto mododi fare la sua prima superficia-le conoscenza con lo script del-l’Esempio 1: l’istruzione docu-ment.write (“Benvenuto nelmondo di JavaScript!”) ci hapermesso di scrivere la fraseindicata sulla nostra paginaWeb.

L’istruzione document.open()permette, invece, di aprire unnuovo documento (paginaWeb).

Se si vuole aprire una nuovafinestra da JavaScript, è neces-sario - in primo luogo - fissareun nome identificativo da attri-buirle (ad esempio Miafine-stra). Sarà quindi possibileaprire la nuova finestra ser-vendosi della seguente istru-

zione:Miafinestra = window.open()Il metodo window.open per-

mette l’utilizzo di tre parametriopzionali che possono essereinseriti all’interno delle paren-tesi tonde:

• Un URL contenente la pa-

gina HTML che deve esse-re visualizzata all’internodella nuova finestra

• Un titolo per la finestra• Una serie di informazioni

legate al “look” grafico dellafinestra (dimensioni, posi-zionamento, e così via). �

4 Eventi e funzioni

Gli eventi consentono dispecificare quando - edin quali condizioni (per

esempio all’apertura di unapagina Web, quando l’utenteclicca su un pulsante, quandosi muove il mouse su un de-terminato oggetto, e così via)- un determinato script debbaessere eseguito.

A differenza di quanto vistosinora, gli eventi non vengonodefiniti all’interno della tag<SCRIPT> ma vengono gene-ralmente inseriti (a partequalche caso) nel codiceHTML della pagina Web.

Provate a creare una paginaWeb utilizzando il codice chesegue:

<HTML><HEAD></HEAD><BODY><SCRIPTLanguage=“Javascript”><!--alert(’Benvenuto!’);//--></SCRIPT><center><img src=“pcopen.gif”onmouseover=“alert(’Haispostato il puntatore delmousesull\’immagine’)”></img></center><a href=“javascript:alert(’Haicliccato’)”>Clicca qui</a><br><ahref=“http://www.pcopen.it”

onclick=“alert(’Stai perraggiungere il sito di PCOpen’)”>Vai al sito Web di PCOpen...</a><br></BODY></HTML>

In questo caso, il primoscript ad essere eseguito èquello inserito immediata-mente dopo l’apertura dellatag <BODY>: l’istruzione alert(’Benvenuto!’) mostrerà al vi-sitatore un messaggio inizialedi benvenuto. L’esempio cipermette di provare sul cam-po l’utilizzo degli eventi: a talproposito, ci si può subitorendere conto di come glieventi JavaScript siano utiliz-zati all’interno del codiceHTML.

Onmouseover e Onclick so-no due eventi: il primo vieneattivato non appena l’utenteporta il puntatore del mousesull’oggetto cui la tag HTML fariferimento; il secondo eventoha luogo quando l’utente “faclic” con il tasto sinistro delmouse. Nel nostro esempio,l’evento Onmouseover vieneattivato non appena il visita-tore della nostra pagina Websposti il puntatore del mousesull’immagine raffigurante illogo di PC Open (pcopen.gif).Si noti come l’evento Java-Script è stato inserito diretta-mente nella tag HTML <IMG>

che consente la visualizzazio-ne di un’immagine all’internodi una pagina Web. Analoga-mente, l’evento Onclick è in-serito in una tag anchor <AHREF… ed attivato non appe-na l’utente clicca sul link (nelnostro esempio, viene visua-lizzato il messaggio “Stai perraggiungere il sito di PC Open”prima di indirizzare il browserverso l’URL indicato nella taganchor).

Inizialmente JavaScriptmetteva a disposizione delprogrammatore solo pochieventi. Questi, inoltre, pote-vano essere abbinati ad un nu-mero molto limitato di tagHTML. Le nuove versioni di In-ternet Explorer hanno estesola possibilità d’uso degli even-ti di JavaScript anche a nume-rose altre tag HTML mentreNetscape, di contro, è rimastofedele al passato. Suggeriamo,per questo motivo, di effet-tuare test di compatibilità del-le proprie pagine Web sullevarie versioni dei browser In-ternet.

Come abbiamo avuto mododi apprendere, un evento puòrichiamare una ed una solaistruzione (nell’esempio pre-cedente, sia l’evento Onmou-seover che l’evento Onclick,invocano la visualizzazione diun messaggio d’avviso me-diante l’uso dell’istruzione

alert). Accade però moltospesso che le operazioni chedebbono essere eseguite alverificarsi di un certo eventosiano diverse, assolutamentenon rappresentabili medianteun’unica istruzione.

In questo caso è necessarioricorrere all’uso delle funzioni(handler o gestori di eventi):si tratta di porzioni ben defi-nite di codice che possono ri-cevere in ingresso dei dati daelaborare e restituiscono inuscita, dopo l’esecuzione del-le istruzioni previste, un certorisultato.

Nel caso in cui un eventodebba eseguire una serie diistruzioni, tali righe di codicevengono racchiuse in un’uni-ca funzione, generalmente de-finita nell’intestazione dellapagina Web o nel corpo dellapagina HTML. L’evento faràpoi riferimento alla funzionedefinita in precedenza. Adesempio Onclick=“mia_funzio-ne()” invocherà, alla pressio-ne del tasto sinistro del mou-se, la funzione denominatamia_funzione.

Un esempio concreto con-tribuirà a comprendere me-glio il concetto:

<HTML><HEAD><SCRIPTLANGUAGE=“JavaScript”>

La lista dei principali gruppi di metodi messi a disposizione in JavaScript• Metodi di finestra - operano sull’oggetto Window e consentono di aprire e chiudere nuove finestre• Metodi di documento - permettono di generare “al volo” nuovi documenti (pagine HTML)• Metodi per i form - per selezionare gli oggetti che compongono un form (ad esempio un modulo di

richiesta di informazioni), per spostare il cursore sulle caselle di testo dei forum• Metodi relativi alla cronologia - intervengono sulla cronologia dei siti Web visitati• Metodi di data - permettono di operare su data e ora• Metodi di testo - per modificare le proprietà caratteristiche del testo• Metodi matematici - le principali funzioni matematiche• Metodi “messagebox” - per generare finestre di dialogo

6a lezione

62/88

6a lezione

<!-- Inizio del codice Javascriptfunction msgbox (testo) {alert (testo) }// - Fine del codice JavaScript- --></SCRIPT></HEAD><BODY><p align=“center”><ahref=“http://www.pcopen.it”onclick=“msgbox(’State pervisitare il sito Web di PCOpen’)”>PC Open</a><br><a href=“http://www.01net.it”onclick=“msgbox(’State pervisitare 01Net, il sito Web delgruppo editoriale Agepe rivoltoai professionisti dell\’IT e delWeb’)”>01Net</a><br><ahref=“http://www.digifocus.it”onclick=“msgbox(’State pervisitare Digifocus: tutte le

informazioni per iprofessionisti dell\’immagine.’)”>Digifocus</a><br><ahref=“http://www.ilsoftware.it” onclick=“msgbox(’State pervisitare IlSoftware.it: il sitoitaliano interamente dedicatoal mondo del software.’)”>IlSoftware.it</a><br></p></BODY></HTML>

In questo esempio, abbia-mo definito una funzione msg-box contenente un’unica istru-zione.

Tale funzione viene richia-mata da parte dell’evento on-click, inserito in ogni tag <A>.

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

deve essere mostrato nella fi-nestra d’allerta. �

In qualsiasi linguaggio di pro-grammazione, le variabilipossono essere considerate

come delle scatole all’internodelle quali è possibile imma-gazzinare dei dati.

Ogni variabile può memo-rizzare dati di un certo tipo:numeri, stringhe (qualsiasi va-lore letterale), valori booleani.Le variabili possono assumereanche lo speciale valore “null”:quest’ultimo si incontra spes-so nella programmazione enon rappresenta un valorespecifico.

In molti linguaggi di pro-grammazione (per esempio Ja-va, C, C++) le variabili devonoessere dichiarate prima di po-ter essere utilizzate: è quindiindispensabile inizializzarlespecificando il loro nome e iltipo di dati che esse andrannoa contenere.

In JavaScript la dichiarazio-ne delle variabili non è stretta-mente necessaria.

Ad esempio, l’istruzione luo-gonascita=“Milano” provvedeautomaticamente ad inizializ-zare una variabile (luogona-scita) come stringa e a porvi,al suo interno, il valore Milano.Il simbolo di uguaglianza indi-ca che stiamo effettuando unassegnamento (stiamo asso-ciando alla variabile indicataalla sinistra dell’uguale il valo-re specificato alla sua destra).

Va ricordato che le stringhe(espressioni letterali) vannosempre racchiuse tra doppioapice.

A tal proposito, analizzate leseguenti due istruzioni:

luogonascita=“Milano”luogonascita=MilanoSi tratta di due istruzioni

completamente differenti. Nelprimo caso il valore stringaMilano viene memorizzato nel-la variabile luogonascita; nelsecondo caso viene memoriz-zato in luogonascita il valoredella variabile chiamata Mila-no.

Le variabili possono ancheessere inizializzate esplicita-mente con la dichiarazionevar.

L’istruzione var luogonasci-ta, per esempio, crea in me-moria una variabile denomi-nata luogonascita e le attribui-sce il valore “null”.

Facciamo alcuniesempi

Uti l izz iamo i l metodoprompt() per richiedere all’u-tente che visita la nostra pagi-na Web, di inserire il suo no-me. La stringa di testo inseritaverrà successivamente utiliz-zata per visualizzare un mes-saggio di benvenuto.

Poiché il metodo prompt()restituisce il testo che l’utenteimmette nella finestra di dialo-

go, sarà sufficiente eseguireun’operazione di assegnazio-ne.

utente=prompt(“Inserisci iltuo nome”,“Inserisci qui il tuonome”);

inizializzerà una variabileutente, quindi vi memorizzeràil valore specificato a destradell’operatore di assegnazione(in questo caso proprio il va-lore stringa restituito dal me-todo prompt()).

<html><head><title>Corso OpenMaster -Lezione 6 - JavaScript -Esempio 4</title></head><body><SCRIPTLanguage=“Javascript”><!--utente=prompt(“Inserisci il tuonome”,“Inserisci qui il tuonome”);document.write(“Benvenuto ”);document.write(utente);//--></SCRIPT></body></html>

Facendo riferimento a que-sto esempio, una volta memo-rizzato il valore stringa nellavariabile utente, tale variabilepotrà essere successivamenteusata per visualizzare il mes-

saggio di benvenuto.La prima istruzione docu-

ment.write stampa sulla paginaWeb il testo Benvenuto; la se-conda inserisce nella pagina ilcontenuto della variabile uten-te.

Sulle variabili è poi possibi-le eseguire tutta una serie dioperazioni.

Una delle più importanti è ilconcatenamento: due o più va-riabili possono, cioè, essereunite assieme.

Nell’esempio precedenteavremmo potuto usare un’uni-ca istruzione document.writeimpiegando il codice che se-gue:

document.write(“Benvenuto”+utente);

Il segno di addizione effet-tua, appunto, un concatena-mento tra la stringa Benvenutoe la variabile stringa utente.Qualora si fosse utilizzato il“+” tra variabili numeriche(contenenti, cioè, un valorenumerico) avremmo ottenutouna somma:

primo_valore=25;secondo_valore=10;document.write(primo_valo-

re+secondo_valore);In questo caso l’istruzione

document.write stampa sullapagina Web il valore 35, essen-do primo_valore e secondo_va-lore due variabili numeriche. �

onClick Consente il rilevamento di un clic del mouse

onDblClick Consente il rilevamento di un doppio clic del mouse

onKeyDown Permette il rilevamento della pressione di un tasto

onLoad Evento attivato in fase di caricamento della pagina Web

onMouseOut Il puntatore del mouse si sta allontanando da un’area specifica (ad esempio un’immagine od un collegamento)

onMouseOver Il puntatore del mouse è stato spostato su un’areaspecifica (ad esempio un’immagine od uncollegamento)

Eventi importanti

5 Variabili e stringhe

63/88

Gli operatori si dividono in:1. operatori aritmetici2. operatori di assegnamento3. operatori relazionali4. operatori logici5. operatori su stringhe

Segnaliamo anche gli operatori sui bit (utilizzati di solito soloper generare colori). Di seguito elenchiamo i principali operato-ri che JavaScript mette a disposizione del programmatore citan-do, per ognuno di essi, un esempio.

6 Gli operatori in Javascript

1. Operatori aritmeticiOperatore Descrizione Esempio Risultato+ Addizione x=2 4

x+2– Sottrazione x=2 3

5-x* Moltiplicazione x=4 20

x*5/ Divisione 15/5 3

5/2 2.5% Modulo (resto 5%2 1

di una divisione) 10%8 210%2 0

++ Incremento x=5 x=6(operatore unario) x++

–– Decremento x=5 x=4(operatore unario) x––

2. Operatori di assegnamentoOperatore Esempio Equivale a

(stessa semantica)= x=y x=y+= x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y%= x%=y x=x%y

Com’è facile notare, un’operazione di assegnamento può esserescritta in forma compatta (cioè abbinata ad un operatore aritmetico).L’operatore “+=” , per esempio, somma i valori delle due variabiliindicate e memorizza il risultato all’interno della variabile di sinistra.Nella colonna “equivale a” potete verificare come si sarebbe potutascrivere, in alternativa, ogni singola operazione senza ricorrere allaforma compatta.

3. Operatori relazionali

Operatore Descrizione Esempio

== è uguale a 5==8 restituisce “false”

!= non è uguale a 5!=8 restituisce “true”

> è maggiore di 5>8 restituisce “false”

< è minore di 5<8 restituisce “true”

>= è maggiore o uguale a 5>=8 restituisce “false”

<= è minore o uguale a 5<=8 restituisce “true”

Gli operatori relazioni si basanosul concetto di “vero” e “falso”:consentono di mettere inrelazione un valore (o unavariabile) rispetto ad un altro.Il doppio uguale (==) permette,ad esempio, di verificare se unvalore è uguale ad un altro (nelcaso delle variabili, se esseospitano lo stesso contenuto). I valori possibili che vengonorestituiti dopo il confronto sono

false (falso) oppure true (vero). Se avessimo inizializzato inprecedenza due variabili x e y,ponendo la prima uguale a 5(x=5), la seconda uguale a 8(x=8), un confronto x==yrestituirebbe false (non è veroche il contenuto della variabile x è uguale al contenuto dellavariabile y).Gli operatori relazioni sono tuttibinari.

4. Operatori logiciOperatore Descrizione Esempio&& and x=6

y=3(x < 10 && y > 1) restituisce “true”

|| or x=6y=3(x==5 || y==5) restituisce “false”

! not x=6y=3x != y restituisce “true”

Gli operatori logici sono essenziali per effettuare confronti piùcomplessi tra valori e/o variabili. Sono ampiamente utilizzati nellestrutture decisionali (if…then…else). Nel primo esempio si suppone che la variabile x contenga il valore 6,y il valore 3 (siano state effettuate le relative operazioni diassegnamento).L’espressione (x<10 && y>1) restituisce il valore true perché sonovere entrambe le condizioni indicate (è vero, cioè, che x sia minore di 10 ed è altrettanto vero che y sia maggiore di 1).

5. Operatori su stringhePer quanto riguarda gli operatorisu stringhe, abbiamo già avutomodo di presentare, inprecedenza, il “+”, utilizzato perconcatenare assieme due o piùstringhe.Lo script seguente, ad esempio,assegna alla variabile testo3 lastringa “Benvenuti al corso di PC

Open”:testo1=“Benvenuti al corso”testo2=“di PC Open”testo3=testo1+testo2

Per aggiungere uno spazio tra ledue variabili stringa le soluzionipossibili sono due.La prima consiste nell’inserire

una stringa “spazio” nell’ultimaistruzione:testo1=“Benvenuti al corso”testo2=“di PC Open”testo3=testo1+“ ”+testo2

In alternativa, come secondasoluzione, si può aggiungere unospazio in calce alla stringa testo1

oppure in testa alla stringatesto2:testo1=“Benvenuti al corso ”testo2=“di PC Open”testo3=testo1+“ ”+testo2

In questo modo, la variabiletesto3 contiene la stringa“Benvenuti al corso di PC Open”.

6a lezione

64/88

6a lezione

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

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

2. Passiamo ora allo sviluppo della funzione che dovrà aprire la nuovafinestra: definiamo la nuova funzione tra i tag <SCRIPT> e </SCRIPT>.Poiché la funzione deve ricevere in ingresso un valore stringa, ricorriamoall’utilizzo di una variabile messaggio.All’interno della funzione JavaScript, dobbiamo quindi inserire una serie di istruzioni che consentano di recuperare data ed ora attuali (nel formatoutilizzato 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 memorizzataall’interno della variabile now, creata allo scopo. Il metodotoLocaleString(), 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 contenutoabbiamo deciso di memorizzare tutto il codice HTML che costituirà la nuova finestra. Osservate le concatenazioni tra stringhe che abbiamoutilizzato. In particolare, è possibile notare come il nome da attribuire al link <A> sia generato recuperando il valore assunto dalla variabilemessaggio. Successivamente, memorizziamo in due variabili distintel’altezza e la larghezza che deve avere la finestra da creare quindicalcoliamo le coordinate della finestra (in pixel) affinché questa risulticentrata, qualunque risoluzione si stia utilizzando.

3. Per far questo, è necessario controllare il valore delle proprietà width(larghezza) e height (altezza) dell’oggetto screen (schermo). Sottraendo a tali valori, rispettivamente, la larghezza della nostra finestra e la suaaltezza, dividendo per due otterremo le coordinate in pixel chepermetteranno 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 risoluzione800x600 pixel la variabile sinistra assumerà il valore 250, alto il valore150; 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 risoluzionedello 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=”+larghezza+“,height=”+altezza+“,top=”+alto+“,left=”+sinistra);newwindow.document.writeln(data_ora);newwindow.document.write(contenuto);L’oggetto “nuova finestra” è chiamato newwindow. La terza opzionepermette di specificare tutte le caratteristiche della finestra.Le successive istruzioni - document.writeln(data_ora) edocument.write(contenuto) - inseriscono nella pagina Web della nuovafinestra, il contenuto della variabile data_ora e il codice HTML presente in contenuto.L’esempio è consultabile su CD utilizzando il file 05_riassuntivo.htmloppure online all’indirizzo seguente:http://www.ilsoftware.it/libreria/js/jstest.asp?f=05_riassuntivo

1

2

3

65/88

6a lezione

Ogni giorno noi ci troviamoa compiere delle scelte:“se facciamo una cosa al-

lora le conseguenze sono....” èil nostro ragionamento. L’equi-valente in JavaScript è l’istru-zione condizionale If...Else chepuò essere efficacemente tra-dotta in questi termini: Se...Al-lora.

La forma più semplice concui si può presentare l’istruzio-ne condizionale è la seguente:

if (espressione) istruzione1[else istruzione2]...espressione può assumere

solamente i valori true (vero)oppure false (falso): è quindi“booleana”. Qualora taleespressione assuma il valoretrue, verrà eseguita istruzione1altrimenti istruzione2 (l’istru-zione che segue l’else). (Sul CDROM l’esempio 06_if_then.htmlmostra l’utilizzo del costruttoif…else).

Recuperiamo data e ora at-tuali servendoci del metodoDate(); usiamo quindi il meto-do GetHours(), applicato allavariabile data d, per memoriz-zare l’ora corrente.

<html><body><script type=“text/javascript”>var d = new Date()var time = d.getHours()if (time < 12){document.write(“<b>Buongiorno!</b>”)}

else{document.write(“<b>Buonasera!</b>”)}</script><p>Questo esempio mostral’utilizzo del costruttoif...else</p><p>Prima delle ore 12 lo scriptvisualizza il messaggio“Buongiorno!”,dopo le 12 “Buonasera!”.</p></body></html>

Nel costrutto if...else, inse-riamo come condizione l’e-spressione time < 12.

In questo modo, qualora l’o-ra attuale sia precedente amezzogiorno, verrà stampata,sulla pagina HTML, l’esclama-zione Buongiorno!, altrimentiBuonasera!.

Proviamo ora a scrivere unoscript che ci consenta di pre-sentare, all’utente che visita ilnostro sito Web, o il sito uffi-ciale di PC Open (www.pco-pen.it) o Digifocus (www.di-gifocus.it).

La scelta dovrà essere ope-rata in modo del tutto casuale(il link di PC Open o quello diDigifocus avranno il 50% dipossibilità di venire mostrati).

Il metodo Random(), appli-cato all’oggetto Math, consentedi generare un numero casualecompreso tra 0 ed 1 (decimalicompresi): ciò significa che l’i-struzione Math.random() gene-ra numeri casuali del tipo

4,345125 oppure 5,899271236 ecosì via. Memorizziamo il nu-mero prodotto in una variabile:nel nostro esempio l’abbiamodenominata r.

Utilizziamo, quindi, l’istru-zione if…then imponendo, co-me condizione, r>0.5. In praticase il numero generato è mag-giore di 0.5, viene proposto illink di PC Open; altrimentiquello di Digifocus.

<html><body><script type=“text/javascript”>var r=Math.random()if (r>0.5){document.write(“<ahref=’http://www.pcopen.it’>Visita www.pcopen.it</a>”)}else{document.write(“<ahref=’http://www.digifocus.it’>Visita www.digifocus.it</a>”)}</script></body></html>

Qualora si debbano effettua-re numerosi test su un’unicaespressione, conviene ricorre-re all’utilizzo dell’istruzioneSwitch.

Il valore assunto dall’espres-sione viene infatti confrontato,in questo caso, con una serie dipossibilità. Anziché uno solo,possono essere eseguiti, in se-

quenza, numerosi confronti.Analizziamo un possibile uti-lizzo dell’istruzione condizio-nale Switch con un esempiopratico.

Supponiamo di voler acco-gliere l’utente che visita il no-stro sito Web con una frase spi-ritosa, scelta - in modo del tut-to casuale - tra dieci diversepossibilità. Come nel caso pre-cedente, anche qui possiamoricorrere all’utilizzo del meto-do Math.random().

Per ottenere un numero in-tero da 0 a 9 (le frasi da pro-porre sono dieci) utilizziamoun semplice trucco: moltipli-chiamo, dapprima, per 10 ilcontenuto della variabile r (ge-nerato da Math.random())quindi utilizziamo il metodofloor per approssimare, all’in-tero più vicino, il numero otte-nuto. Saremo certi, così, diavere - come contenuto dellavariabile r - un intero compresotra 0 e 9. Il valore assunto dallavariabile r viene quindi con-frontato, dall’istruzione switch(r) con una serie di possibilità(indicate con i vari case).

L’istruzione break consenteallo script di uscire dal ciclo diswitch: se fosse mancante, Ja-vaScript continuerebbe a con-frontare il valore. È possibile in-serire, opzionalmente, ancheun’istruzione default: essa vie-ne eseguita solo nel caso in cuiil ciclo switch non trovi alcunacorrispondenza tra il valore as-sunto dall’espressione e le va-

66/88

6a lezione

rie istruzioni case (nel nostroesempio default non è neces-sario). Va ricordato che sia nel-le espressioni if…then che inswitch, l’operatore di ugua-glianza che va utilizzano è ==(come già visto in precedenza)e non = (l’operatore di asse-gnamento). Si tratta di un erro-re molto comune che spessoprovoca comportamenti inat-tesi (JavaScript si limita adignorare l’espressione).

Strutture iterattiveUna delle più famose strut-

ture iterative, comune a moltialtri linguaggi di programma-zione, è il ciclo for.

Tale istruzione è detta ap-punto “ciclo” perché esegueiterativamente una serie diazioni finché non viene rag-giunto un limite prestabilito,da parte del programmatore,ed indicato in una condizione.

Il ciclo for utilizza la seguen-te sintassi:

for (inizializzazione; condi-zione; incremento) istruzioni;l’iterazione è regolata da unavariabile contatore.

Ciò significa che ogni volta

che l’istruzione for esegue il ci-clo, il contenuto della variabilecontatore subisce una varia-zione.

L’espressione inizializzazio-ne permette di specificare il va-lore cui deve essere inizializza-ta la variabile contatore (adesempio: i=0); condizione con-sente di impostare la condizio-ne che deve verificarsi affin-ché venga eseguito il ciclo (ite-razione); incremento permettedi indicare quale incremento odecremento deve subire la va-riabile contatore ad ogni itera-zione. Ad esempio, impostan-do i<10 come condizione e i++come incremento, si stabiliràche il ciclo for dovrà essere ri-petuto finché la variabile i as-sumerà un valore inferiore a 10.Inoltre, ad ogni iterazione, ilvalore numerico contenuto nel-la variabile i sarà incrementatodi una unità (i++).

Per provare subito l’utilizzodi for, supponiamo di voler svi-luppare un semplice script chefaccio uso dei marcatori <h#>per la visualizzazione di titoli esottotitoli di varie dimensioni.

Nella quarta lezione del no-

stro corso, abbiamo spiegatocome al marcatore <h#> possa-no essere associato fino a seilivelli consecutivi, così da de-terminare una struttura gerar-chica di titoli e sottotitoli(<h1></h1>, seguito da<h2></h2> e così via).

Inserite il seguente script trale tag <HEAD> e </HEAD>, os-sia nell’intestazione della vo-stra pagina Web:<script type=“text/javascript”>for (i = 1; i <= 6; i++){ document.write(“<h” + i +“>Questo è il titolo numero ” + i)document.write(“</h” + i + “>”) }</script>

In pratica, ad ogni iterazio-ne, il valore contenuto nella va-riabile contatore i (inizialmen-te impostato a 1) viene incre-mentato di un intero (i++). Fin-ché tale valore è minore ouguale a 6, l’esecuzione del ci-clo for viene ripetuta.

Ad ogni ciclo, vengono ese-guite le due istruzioni docu-ment.write che s’incaricano discrivere, sulla pagina Web,quanto indicato tra parentesi.Utilizzando l’operatore +, si ef-fettua una concatenazione tra

le stringhe racchiuse tra virgo-lette ed il valore assunto, divolta in volta, dalla variabilecontatore i.

Lo script ha permesso cosìdi generare il codice HTMLequivalente al seguente:<h1>Questo è il titolo numero 1</h1><h2>Questo è il titolo numero 2</h2><h3>Questo è il titolo numero 3</h3><h4>Questo è il titolo numero 4</h4><h5>Questo è il titolo numero 5</h5><h6>Questo è il titolo numero 6</h6>

Altre strutture iterative, as-sai utili nella programmazioneJavaScript, sono while e do…while.

L’istruzione while va utiliz-zata nella forma while (condi-zione) espressione: l’espres-sione verrà eseguita finché lacondizione specificata risul-terà vera. Il ciclo do…while vaimpiegato, invece, nei casi incui si vuole che l’iterazionevenga eseguita almeno una vol-ta. La sintassi dell’istruzione èinfatti la seguente: do {istruzio-ni} while (condizione)

Le istruzioni specificate, traparentesi graffe, dopo il do ver-ranno eseguite finché la condi-zione risulterà verificata. �

Imoduli HTML (form) sonouna sorta di questionari com-pilabili on line da parte dei vi-

sitatori di un sito Web. Inizial-mente il loro utilizzo era limita-to: si adottavano esclusiva-mente per raccogliere informa-zioni sulle opinioni e sulle pre-ferenze degli utenti. I modulicompilati venivano infatti poiautomaticamente inviati ad unindirizzo e-mail (ad esempio,quello del webmaster del sitoInternet). Oggi, le possibilità diutilizzo dei form si sono enor-memente ampliate: vengonoutilizzati, su un sempre mag-gior numero di siti, per intera-gire con l’utente. Ad esempio,form online vengono propostiper effettuare ricerche all’in-terno degli articoli contenutiin un sito, per inviare i proprimessaggi in un forum, per ge-stire contenuti ed aree specifi-che del sito e così via.

Per interagire con un modu-lo HTML mediante codice Ja-vaScript, è necessario far uso -nella propria pagina Web - del-le apposite tag

<FORM> e </FORM>.Proviamo ad inserire, nella

nostra pagina HTML, un formche richieda all’utente di digi-tare il suo indirizzo e-mail veri-ficandone, successivamente, lavalidità.

Per motivi di semplicità, li-miteremo il controllo circa lavalidità dell’indirizzo di postaelettronica specificato, alla pre-senza del simbolo @.

Se l’utente inserirà una strin-ga di testo contenente la chioc-ciolina, quanto introdotto nelcampo di testo verrà conside-rato come un indirizzo e-mailvalido. È ovvio che nella “vitareale” si dovranno svilupparedei controlli aggiuntivi sulla va-lidità dell’indirizzo e-mail (adesempio, verificare la presenzadi un suffisso .it, .com, .net, .orge così via).

Iniziamo con l’inserire il co-dice HTML per la visualizzazio-ne di una casella di testo e diun 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 assegnareal form HTML un nome specifi-co, inserendo il parametro na-me (nel nostro caso, abbiamoscelto il nome form_email).

Il parametro action consentedi stabilire la pagina ove ilbrowser Internet deve esserereindirizzato dopo la pressio-ne, da parte dell’utente, delpulsante Invia.

Le tag <INPUT>, che debbo-no essere sempre comprese tra<FORM> e </FORM>, consento-no di stabilire gli elementi fa-centi parte del modulo HTML.Per ogni tag <INPUT> è neces-sario indicare, ricorrendo al pa-rametro type, il tipo di elemen-to che si vuole utilizzare.

Ad esempio, specificando ty-pe=“text”, si inserirà, nel modu-lo HTML, una casella di testo;con type=“checkbox” una casel-

la che può essere spuntata omeno; con type=“radio” un “op-tion box”; con type=“button” unpulsante…

Type=“submit” è importan-tissimo: consente di inserire unpulsante “speciale” che prov-vede ad inviare il contenutodel form all’indirizzo specifica-to nel parametro action.

Per approfondire l’utilizzodei form HTML e scoprire tuttele possibilità che questi offro-no, vi consigliamo di fare riferi-mento all’indirizzo www.w3.o r g / T R / R E C - h t m l 4 0 /interact/forms.html (in linguainglese).

Passiamo, a questo punto,alla stesura dello script checonsentirà la validazione del-l’indirizzo e-mail inserito daparte dell’utente.

Provvediamo, quindi, a col-locare - al solito - tra i tag<HEAD> e </HEAD> (intesta-zione), il codice JavaScript se-guente:

<script type=“text/javascript”>function controlla(){

8 Interazione tra JavaScript e form HTML

�

67/88

x=document.form_emailat=x.email.value.indexOf(“@”)if (at == -1)

{alert(“Indirizzo e-mail non

valido.”)return false}

}</script>Cosa abbiamo scritto? In pri-

mo luogo abbiamo denominatocontrolla() la funzione che ef-fettua la validazione dell’indi-rizzo e-mail. Una volta invocatatale funzione, JavaScript me-morizza nella variabile x il con-tenuto del form form_email.

L’istruzione successiva recu-pera, prima, il valore del campo denominato email(x.email.value), quindi applicail metodo indexOf.

Tale metodo restituisce laposizione della prima occor-renza della stringa specificataall’interno di un’altra stringa.Se la stringa indicata tra paren-tesi tonde non viene trovata, ilmetodo restituisce il valore -1.

Per fare un esempio concre-to, supponiamo di assegnaread una variabile x la stringa“La mia rivista preferita è PCOpen”:x=“La mia rivista preferita è PCOpen”pos=x.indexOf(“PC Open”)document.write(pos)

Invocando il metodo in-dexOf(“PC Open”), lo scriptcercherà la prima occorrenzadella stringa PC Open all’inter-no della frase La mia rivistapreferita è PC Open.

La variabile pos assumerà, in

questo caso, il valore 27 (lastringa PC Open è stata trovatain corrispondenza del ventiset-tesimo carattere). Provate a so-stituire la seconda istruzionecon la seguente:

pos=x.indexOf(“La gazzet-ta”)

In questo caso, il metodo in-dexOf restituirà il valore -1(non è stata trovata alcuna oc-correnza de La gazzetta).

Analogamente, nel nostroesempio, indexOf permette diricercare il simbolo “@”, all’in-terno della stringa specificatadall’utente nel campo e-mail; ilvalore restituito viene memo-rizzato nella variabile at. A que-sto punto utilizziamo l’istruzio-ne condizionale if…else percontrollare il valore assuntodalla variabile at: se il valore è -1 (non è stata trovata alcunaoccorrenza di “@”) viene mo-strato il messaggio d’errore “In-dirizzo e-mail non valido” inol-tre, la funzione controlla() as-sumerà il valore false (returnfalse). Ora inseriamo, nel codi-

ce HTML che consente la vi-sualizzazione del form, l’invo-cazione della funzione control-la(): aggiungiamo, nella tag<FORM> un riferimento all’e-vento onSubmit (ciò significache non appena l’utente agiràsul pulsante Invia (Submit),verrà eseguita la funzione Ja-vaScript appena illustrata).

L’argomento dell’evento on-Submit è return controlla(). Il re-turn che precede la chiamatadella funzione controlla(), per-metterà di annullare l’invio delcontenuto del form alla paginaform_ok.html (specificata colparametro action) se la funzio-ne restituisce il valore false (co-me abbiamo visto, tale valoreviene assunto solo nel caso incui @ non sia presente, ossiaqualora l’indirizzo e-mail nonsia valido).

Se invece la funzione con-trolla() restituisce un valore di-verso, l’invio dei dati del formverrà consentito.

La validazione dei dati (ossiail controllo della loro corret-

tezza) sul lato client (ossia di-rettamente sul personal com-puter dell’utente che visita ilnostro sito Web), permetterà dievitare di sovraccaricare il ser-ver Web che ospita il sito di unlavoro aggiuntivo. JavaScriptrappresenta, quindi, la miglioresoluzione per la realizzazionedi questo tipo di controlli.

Il codice HTML e lo script Ja-vaScript sono contenuti all’in-terno del file form_email.htmlnel CD ROM.

L’esempio form_focus.html(disponibile nel CD ROM di PCOpen) presenta, invece, l’utiliz-zo del metodo focus() per sele-zionare un campo specifico fa-cente parte di un qualsiasi mo-dulo HTML presente nella pa-gina Web.

L’istruzione document.forms[0].campo1.focus(), consentedi selezionare (impostare il“focus”) sull’elemento denomi-nato campo1, contenuto nelprimo modulo HTML (forms[0]) posizionato nella paginaWeb (document). In questo ca-so infatti, non avendo assegna-to alcun nome al form (serven-doci del parametro name), pos-siamo interfacciarci ricorren-do all’array forms[0].

Qualora avessimo attribuitoal modulo HTML il nome“mioform” (<FORM name=“mio fo r m”> . . . < /FORM > ) ,avremmo potuto utilizzare l’i-struzione document.mioform.campo1.focus() in luogo di do-cument.forms[0].campo1.fo-cus() (com’è possibile verifica-re visionando il file form_fo-cus_2.html). �

9 Interazione tra JavaScript e frame

JavaScript risulta molto utileanche quando si debba ge-stire una struttura a frame.

I frame sono infatti struttureampiamente utilizzate in nu-merosi siti Web perché per-mettono di suddividere la fine-stra del browser Internet in piùsottoaree. Ciascuna di essepuò gestire i suoi contenuti inmodo del tutto autonomo, sen-za dipendere dalle altre. In que-sto modo è possibile pensaredi tenere fissa una porzione deldocumento evitando che ilbrowser debba ricaricare, adogni refresh, l’intera pagina.

JavaScript offre tutta una se-

rie di strumenti che permetto-no di interfacciarsi con i frameHTML e quindi di facilitarne lagestione.

Vediamo, ad esempio, comeè possibile aggiornare due fra-me diversi con un solo clic delmouse.

In primo luogo, creiamo unnormale file HTML. Tale filenon avrà bisogno dell’aggiuntadi alcun codice JavaScript: alsuo interno porremo solo alcu-ni conosciuti tag HTML checonsentiranno di attribuire allanostra pagina Web una struttu-ra a frame. Creiamo un nuovofile HTML attribuendogli il no-

me frame.html. Incolliamo,quindi, al suo interno, il codiceHTML che segue:

<html><frameset rows=“30%,*”frameborder=“1”>

<frame name=“frame_sup”src=“frame_superiore.html”>

<frame name=“frame_inf”src=“frame_inferiore.html”></frameset></html>

La pagina Web sarà suddivi-sa in due sezioni: la prima,quella superiore, occuperà il30% dello spazio a disposizione

sull’asse verticale ed ospiterà ilfile frame_superiore.html; la se-conda, l’area più in basso, lospazio restante (al suo internoverrà collocato il contenuto delfile frame_inferiore.html).

I nomi assegnati ai file cheospitano il contenuto dei framenon sono importanti mentre losono i parametri name indicatiin ciascun tag <frame>: si trattainfatti di apposite “etichette”che debbono essere ricordatese si vuole interagire corretta-mente con i frame da Java-Script. Mentre nel file frame_su-periore.html abbiamo inseritosemplicemente il codice HTML

JavaScript risulta un’ottima soluzione per la validazione dei dati direttamente sul personalcomputer dell’utente che visita il nostro sito, evitando così di “caricare” il server del sito

6a lezione

68/88

6a lezione

per la visualizzazione del logodella rivista, frame_inferiore.html contiene una funzione Ja-vaScript che abbiamo denomi-nato modifica_frame.function modifica_frame(){parent.frame_sup.location.href=“frame_superiore_2.html”parent.frame_inf.location.href=“frame_inferiore_2.html” }

Le due istruzioni JavaScriptstabiliscono quali file HTML

devono essere caricati in cia-scun frame. Notare che nel fra-me di nome frame_sup viene in-serito il contenuto del file fra-me_superiore_2.html, mentre inframe_inf il codice HTML di fra-me_inferiore_2.html.

La funzione JavaScript per lamodifica del contenuto dei fra-me viene invocata mediante l’e-vento Onclick, associato al pul-sante Modifica contenuto frame.

Per documentarvi ulterior-mente sull’utilizzo dei frameHTML, vi consigliamo di visita-re la pagina seguente: www.w3.org/TR/REC-html40/present/frames.html (in inglese).

Linee guida per la programmazione

Quando programmate conJavaScript, per evitare di in-correre in fastidiosi errori,spesso difficili da individuare,è bene ricordarsi di seguire al-cune semplici linee guida.

• JavaScript è un linguaggio“case sensitive”. In informatica,quando un linguaggio o un si-stema operativo viene definito“case sensitive” significa chequesto fa differenza tra co-mandi e istruzioni scritti inmaiuscolo od in lettere minu-scole.

Per JavaScript una funzionedenominata MiaFunzione è dif-ferente da un’altra chiamatamiafunzione. Accertatevi, quin-di, di riferirvi in un modo uni-voco a funzioni e variabili.

• Gli spazi vengono ignorati.JavaScript ignora gli spazi pre-senti all’interno di una istru-zione. Ad esempio, l’istruzionedi assegnamento citta=“Mila-no” (senza spazi) equivale a cit-ta = “Milano” (con gli spazi).

• Non dimenticate di chiu-dere le parentesi.

Qualsiasi parentesi (tonda,graffa o quadra) venga apertain uno script deve essere suc-cessivamente chiusa. Peresempio, se avete aperto unaparentesi graffa per delimitarele istruzioni che compongonouna certa funzione, ricordatevidi chiuderla.

• Se all’interno di una stringadesiderate utilizzare simbolispeciali come “ ’ ; e &, antepo-nete ad essi la barra rovescia-ta. Esempio: document.write(“L\’uno e l\’altro”).

E se si commettono errori?Errare è umano e durante losviluppo in JavaScript o in qua-lunque altro linguaggio di pro-grammazione di errori è natu-rale commetterne molti.

Anche i più esperti incappe-ranno certamente in sviste co-muni come la mancata chiusu-ra di una parentesi, delle virgo-lette, la dimenticanza di unpunto e virgola.

In tutti questi casi (e comun-que in presenza di un qualun-que altro tipo di errore), il vo-stro script non funzionerà.

Tutti i browser Internet in-corporano un debugger ossiauno strumento in grado di rile-vare gli errori commessi in fasedi programmazione.

Internet Explorer, per esem-pio, visualizzerà nella barra distato, in basso a sinistra, un’i-cona raffigurante un piccolotriangolo a fondo giallo.

Facendovi doppio clic si ot-terranno le informazioni detta-gliate circa l’errore riscontrato.

Nel nostro caso, com’è pos-sibile verificare in figura, ci sia-mo dimenticati di chiudereuna parentesi tonda (il debug-ger ci segnala riga e carattereove è stato individuato l’erro-re, all’interno della paginaHTML).

Per approfondire...All’indirizzo www.jsdir.com,

sito Web realizzato e curato daun team italiano, trovate unavalanga di informazioni sullaprogrammazione JavaScript:tutorial passo-passo, guide on-line, suggerimenti, esempi pra-tici, le risposte alle domandepiù frequenti (FAQ), guidanogli aspiranti webmaster allascoperta di JavaScript.

Altri esempi pratici possonoessere reperiti all’indirizzowww.html.it/javascript/tutorial/. �

DHTML è un linguaggio chepermette di attribuiremaggiore dinamicità alle

pagine Web: la “D” iniziale staper Dynamic HTML a sottoli-neare che DHTML non è soloun linguaggio puramente de-scrittivo (così come HTML) mala visione di un Web maggior-mente “interattivo”.

Con DHTML è possibile mo-dificare ogni elemento checompone le nostre pagineWeb, introducendo effetti spe-ciali, animazioni e la gestionedi ogni singola immagine.

Durante la vostra “naviga-zione” in Rete vi sarete certa-mente imbattuti in menu ani-mati (spesso menù a cascata

che si aprono non appena sisposta il puntatore del mousesopra di essi): spesso è pro-prio DHTML che ne consentela visualizzazione.

DHTML si avvale di un insie-me di tecnologie. Per raggiun-gere lo scopo di attribuiremaggiore dinamicità alle pagi-ne Web, questo linguaggio ri-

corre infatti all’utilizzo di trecomponenti tecnici: i linguaggidi script come JavaScript (maanche il VBScript di Micro-soft), i fogli di stile (CSS, Ca-scading Style Sheets) - già illu-strati nella quarta lezione delnostro corso - ed infine, ovvia-mente, HTML.

Il punto debole di DHTML è,

10 DHTML: sempre più dinamici

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

69/88

però, la compatibilità tra brow-ser. Sia Netscape che Microsofthanno da sempre cercato diimporre la loro visione: talvol-ta può accadere, quindi, cheuna pagina dinamica DHTMLsia visualizzata correttamentecon Internet Explorer ma noncon Netscape (o viceversa).

È quindi necessario assicu-rarsi di produrre pagineDHTML che siano perfetta-mente compatibili con tutti ibrowser Internet (che siano,cioè, cross-browser): qualoranon si provvedesse ad effet-tuare gli opportuni controlli, sirischierebbe di perdere nume-rosi visitatori infastiditi dal-l’impossibilità di visualizzarecorrettamente il vostro sito.Qualora non si riuscisse a ren-dere cross-browser la propriapagina DHTML, si può pensaredi creare due differenti versio-ni del sito Internet: una, peresempio, destinata agli utiliz-zatori di Internet Explorer, l’al-tra agli utenti di Netscape.

Va tenuto comunque pre-sente che il DHTML è suppor-tato solo a partire dalla versio-ne 4 di Internet Explorer e Net-scape: se prevedete di servirvidi DHTML nelle vostre pagineWeb, è bene indicare i requisi-ti minimi per una corretta vi-sualizzazione del sito.

Il DHTML si basa sulla strut-tura DOM (Document ObjectModel): si tratta di un modelloche considera qualsiasi docu-mento (pagina Web) come unoggetto. Ciò significa che ognidocumento viene suddiviso inelementi più semplici sui qualiè possibile operare secondo le

specifiche della programma-zione orientata agli oggetti.

Qualunque oggetto che faparte di una pagina Web defi-nito con le classiche tag HTML- per esempio una qualsiasi im-magine <IMG> o un link <A>(àncora di collegamento, an-chor) - è accessibile da DHTMLservendosi proprio della strut-tura DOM e di un linguaggio discripting come JavaScript.

Il DOM agisce, quindi, da in-terfaccia tra il documentoHTML ed il linguaggio di scrip-ting: esso interpreta, infatti,ogni elemento costitutivo dellapagina Web ed offre i metodiper accedervi.

Per modificare un elementopresente nella vostra paginaWeb, è sufficiente attribuirgliun nome. Ad esempio:

<img src=“pcopen.gif” id=“lo-gopcopen”>

In questo caso abbiamo as-segnato all’immagine pco-pen.gif, inserita nel codice del-la pagina Web mediante l’ap-posito tag <IMG>, il nome lo-gopcopen: tale identificativo ci

servirà, in seguito, per modifi-care le proprietà dell’immagi-ne. In alternativa, è possibileutilizzare anche il modellostrutturale. Se l’immagine damodificare è la terza che com-pare nella nostra pagina Web,si potrà usare il codice se-guente:

document.images[3]Il codice indica che stiamo

facendo riferimento alla terzaimmagine della “collezione”images, contenuta nell’ogget-to document (la pagina Web).

DHTML consente di sposta-re gli elementi costitutivi diuna pagina Web senza la ne-cessità di dover ricaricare lastessa. A tal proposito, è sug-gerito l’utilizzo dei tag <DIV> e<SPAN>, caratteristici dei foglidi stile (e già incontrati a pag.38 nella quarta lezione del no-stro corso) in quanto sono pie-namente supportati sia da In-ternet Explorer che da Netsca-pe. Utilizzando <DIV> e <SPAN>avrete la possibilità, servendo-vi di DHTML, di spostare “alvolo” qualsiasi blocco che co-stituisca la vostra pagina (co-lonne, paragrafi, riquadri di te-sto,…) senza ricorrere all’im-piego di tabelle nidificate.

DHTML permetterà di agiresulle dimensioni e sulla posi-zione di ciascun blocco <DIV>e <SPAN> offrendovi un meto-do più semplice e veloce percreare il layout delle vostre pa-gine Web. L’uso dei fogli di sti-le consentirà, poi, di interveni-re sulla scelta dei caratteri (sti-le, dimensioni,…), sulla for-mattazione dei collegamentiipertestuali, sull’impostazionedei margini e così via.

Un esempio: creare un menua tendina con DHTML

Cimentiamoci subito su diun esempio pratico: proviamoa creare un menu “a tendina”per la nostra pagina Web: non

appena il puntatore del mouseverrà posizionato su una vocedel menu, dovranno esserneimmediatamente visualizzatele relative voci. Prima di tuttocreiamo il codice base dellanostra pagina HTML:

<HTML><HEAD><TITLE>PC Open - Un menu atendina con DHTML</TITLE></HEAD><BODY BGCOLOR=“white”><CENTER><IMGSRC=“logo_PCOPEN.gif”><BR><BR></CENTER></BODY></HTML>Definiamo, quindi, tra le tag

<HEAD> e </HEAD> (intesta-zione della pagina HTML), ser-vendoci di un foglio di stile,quali debbano essere le carat-teristiche dei collegamentiipertestuali (tag <A>, anchor)presenti nella pagina Web:

<STYLE>A:Hover {color:red; text-decoration:none; font-weight:bold }A {color:black; text-decoration:none; font-size:10pt; font-family:Tahoma,Verdana,Arial }</STYLE>Il codice JavaScript eviden-

ziato nell’immagine a lato, vainserito sempre nell’intesta-zione della pagina e consentedi stabilire, in primo luogo,quale browser Internet si stautilizzando.

Come già anticipato in pre-cedenza, Internet Explorer eNetscape utilizzano diversesintassi per interagire con ilayer ossia i livelli definiti conDHTML (i blocchi delimitaticon <DIV> e <SPAN>). Lo scriptpermette di individuare la ver-sione del browser in uso edusare document.layers[layerid]nel caso di Netscape, docu-ment.all[layerid] nel caso diInternet Explorer.

Nel corpo della paginaHTML (<BODY></BODY>), ab-biamo inserito una serie di li-velli <DIV>. A ciascun blocco<DIV> è stato assegnato un no-me identificativo. Si è poi fattouso delle funzioni apri_tendinae chiudi_tendina, opportuna-mente invocate dagli eventiOnmouseover e Onmouseoutper visualizzare o nascondere,all’occorrenza, le tendine deivari menu dinamici, a secondadella posizione del puntatoredel mouse. �

Il codice JavaScript va inserito nell’intestazione della pagina e permette di stabilirequale browser Internet si sta utilizzando

Un esempio pratico: creare un menù a tendina per il nostro sito utilizzando DHTML

6a lezione

70/88

7a lezione

La produzione di un sito sta-tico, a cui questo corso è de-dicato, richiede talvolta l'in-

serimento di componenti dina-mici o comunque di componen-ti esterni alla pagina che avetecostruito staticamente. Pensia-mo ad esempio a un sito che of-fra consigli di viaggio e che in-cluda previsioni del tempo co-stantemente aggiornate, attin-gendo a risorse esterne. Benchéla struttura della pagina checontiene tali previsioni possaessere statica, cioè invariabile,le informazioni in costante ag-giornamento richiedono che al-

meno una sua porzione sia di-namica, ossia venga generatanel momento in cui il navigatorela richiede, utilizzando informa-zioni fresche. Situazioni analo-ghe si verificano anche quandoil sito chiede una certa intera-zione ai propri navigatori comenel caso della compilazione diinchieste o di votazioni, dellafirma del libro degli ospiti (gue-st book) oppure della ricerca dipagine all'interno del sito oppu-re sul Web. Si tratta di operazio-ni che non possono essere ese-guite mediante le funzioni diprogrammazione di JavaScript,

viste nella scorsa lezione eorientate a creare pagine che di-ventano interattive quando ar-rivano sul computer del naviga-tore. Qui la decisione di cosa in-serire o visualizzare nella pagi-na deve essere fatta prima chela pagina stessa sia spedita sulWeb e perciò l'interazione devesvolgersi necessariamente sulserver. Avremo quindi paginecostruite solo in parte, all'inter-no delle quali il server aggiun-gerà informazioni provenientida altre fonti oppure che sono ilrisultato di un'elaborazione in-terna. Tali pagine verranno ge-

nerate unendo la parte statica ela parte variabile ogni volta cheun nuovo navigatore le richie-derà, il che imporrà un certo ca-rico elaborativo sul server, maconsentirà di avere contenutisempre freschi oppure adatti alcontesto. Ciò non significa, tut-tavia, che si è creato un vero eproprio sito dinamico, la cui de-finizione prevede che le paginevengano generate dinamica-mente nella loro interezza a par-tire da informazioni registrate inun database, tema che sarà l'argomento di un prossimo cor-so. �

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

Lezione 2:Siti statici e linguaggioHTML(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 tabelleconsecutive

• Template con struttura complessa• Template con tabelle nidificate• Esercizi

Lezione 4:HTML 4.01 e CSS(disponibile integralmente sul CD)• Stile e struttura: usare i tag HTML nativi• Il deprecato tag font• I marcatori per formattare il testo• Gestire gli spazi nel testo• CSS e HTML 4.01 • Cosa si può fare con i fogli stile• Quattro tipi di CSS• I colori del Web• Gestire le immagini• Esercizi• Ereditarietà e innesco a cascata• Proprietà di trasferimento

dei parametri• Regole di ereditarietà• Selettori di classe• Websafe palette

Lezione 5:Design e multimedialità(disponibile integralmente sul CD)• Elementi di design per il Web• La ruota colore• Grafica e formati di immagini per Internet• Link ipertestuali• Tabelle d’immagini• Mappe immagine• Audio e video

Lezione 6:Siti interattivi(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 7:Interazione sul server• Il server Web• I form: la porta per l’utilizzo degli script

CGI• Installare e configurare un server Web• Configurazione del sito Web predefinito

in Windows XP Professional• Installare e configurare Apache sotto

Windows

L’ultima puntataLezione 8:Promuovere il sito

IL CALENDARIO DELLE LEZIONI

di Michele Nasi

�

il corso è sul CD

n. 71

� A scuola con PC Open

ProgettoWebMaster1 Il server Web

71/88

Che cos’è un server WebPer capire come attivare que-

sto genere d'interazione dob-biamo anche capire che cosa èun server Web. Si tratta di uncomputer dotato di uno specia-le software capace di ricevererichieste via protocollo HTTP(Hypertext Markup Protocol) e ri-spondere mediante l'invio dellapagina che corrisponde all'indi-rizzo indicato dal navigatoreper mezzo del suo browser.

Il server raccoglie tutti gli ele-menti necessari alla composi-zione della pagina e li manda albrowser remoto il quale co-struisce la pagina vera e propriasul video. Nel caso di una pagi-na statica, avremo il file HTMLche la compone, le immaginicollegate ed eventuali oggetticreati con programmi esterni(suoni, animazioni, eccetera).Nel caso di una pagina compo-sita (in parte statica e in partedinamica) avremo il file HTMLche contiene gli elementi fissi, leimmagini e gli elementi variabi-li da calcolare o da prelevaredall'esterno e inserire al mo-mento della spedizione.

Giusto per chiarire le diffe-renze tra l'interazione latoclient, che abbiamo visto nellascorsa lezione con JavaScript eDynamic HTML, e l'interazionelato server, che descriviamo inquesta lezione, diciamo che laprima inizia nel momento in cuila pagina arriva al browser delnavigatore e continua da quelmomento in poi, la seconda siverifica sul server nell'istante incui la pagina viene richiesta e siesaurisce non appena gli ele-menti che la compongono sonopartiti in direzione del naviga-tore. Perciò comprendiamo chel'interazione lato client dipendefortemente dal tipo di browserutilizzato e ne deve tenere con-to, mentre l'interazione lato ser-ver è invece completamentesvincolata dal browser, ma deveinvece risultare compatibilecon le funzioni e i servizi previ-sti dal server che intendiamoutilizzare.

I Server Side IncludeIl metodo più semplice per

inserire elementi variabili all'in-terno di una pagina consiste nelcollocare nella giusta riga del li-stato HTML un "segnaposto"che indichi il nome e la posizio-ne del file esterno che va inseri-to in quel punto. È una tecnicache consente di ripetere in piùpagine parti comuni che posso-

no quindi essere modificateagendo su un singolo documen-to (come ad esempio elementidi navigazione) oppure per in-nestare nella nostra pagina par-ti di una pagina esterna o il ri-sultato dell'elaborazione di unprogramma interno. Il serverWeb non deve far altro che scor-rere la pagina prima di spedirla,notare la presenza di eventualiistruzioni di inclusione e allega-re la parte indicata. Non è ri-chiesta nessuna elaborazionedei contenuti perciò l'operazio-ne non appesantisce il server.

È una tecnica che si dimostraefficace quando gran parte del-la pagina è di tipo statico e l'ele-mento variabile costituisce unafrazione del contenuto. Il tipo diinclude consentito cambia a se-conda del server impiegato. Nelcaso di Apache, il più diffuso trai server Web in ambito Linux edisponibile gratuitamente an-che per Windows, si parla di XS-SI, ossia Extended Server Side In-cludes. Si tratta di una serie dicomandi che consentono d'in-serire nella pagina corrente unfile esterno con la possibilitàanche di scegliere soluzioni di-verse al verificarsi di situazionidiverse. Microsoft prevede unasoluzione analoga nel suo lin-guaggio ASP (Active Server Pa-ges), che vedremo brevementepiù avanti.

I Server Side Include o gli XSSIoffrono numerosi vantaggi: so-no facili da imparare, vengonosupportati da numerosi server,consentono d'inserire informa-zioni aggiornate in pagine chealtrimenti sarebbero completa-mente statiche, non dipendonodal tipo di browser impiegato, icomandi non compaiono nelbrowser perciò all'esterno nonsi sa da dove provengono le no-stre informazioni, consumanopoca potenza di elaborazione.Ci sono naturalmente anchesvantaggi: il server deve co-munque farsi carico di un mini-mo di attività elaborativa e per-ciò risponde alle richieste conun leggero ritardo rispetto allaspedizione di pagine completa-mente statiche; inoltre l'attiva-zione degli SSI può comportareproblemi di sicurezza, non gra-vi, e perciò alcuni provider pos-sono impedirne l'uso, infine laloro funzionalità è fortementeinfluenzata dalla configurazio-ne del server. Diventa perciò in-dispensabile contattare il pro-prio amministratore di sistemaprima di pianificarne l'impiego.

Come si presenta un SSIAlla pari di ciò che accade in

JavaScript, un comando SSI vie-ne inserito nella pagina HTMLsotto forma di commento, cioèviene preceduto dai simboli <!--e seguito dai simboli -->>.

In tal modo, qualora il servernon riconoscesse il comando equesto rimanesse all'internodella pagina che viene speditaal navigatore, il browser neometterebbe la visualizzazioneconsiderandolo alla stregua diun normale commento. In casocontrario, il riconoscimento delcomando comporta l'elimina-zione dello stesso dal listatodella pagina che viene inviata alnavigatore e la sua sostituzionecon l'elemento da inserire. Il co-mando in sostanza funge da se-gnaposto e cede il proprio spa-zio all'elemento da innestare(include). Molto semplice e mol-to pratico.

Per un'analisi dei vari co-

mandi e della relativa sintassi ri-mandiamo alla documentazio-ne dei diversi tipi di server. Af-finché vengano riconosciuti e ilserver ne esegua l'esplorazione(parsing) per identificare cosainserire e dove, i file che con-tengono SSI vanno contrasse-gnati con un suffisso particola-re. Spesso si usa il suffissoSHTML, ma il server può essereconfigurato per accettare qual-siasi altro suffisso (tale discorsonaturalmente non si applica aifile generati con ASP o PHP, chevengono comunque tutti elabo-rati prima di essere inviati, com-presa la gestione di eventuali in-clude lato server).

La Common GatewayInterface

Il secondo passo, più impe-gnativo, nella produzione di pa-gine con contenuto dinamicoconsiste nell'affiancare al ser-ver Web uno o più programmi

7a lezione

�

Due file per ogni esempioNel CD ROM di PC Open trovate (a meno che non sia specificatodiversamente) due file per ciascuno script di esempio. Il primo è unfile in formato HTML, il secondo è lo script CGI-Perl vero e proprio(da memorizzare sul proprio server nella cartella cgi-bin).Tutti gli script CGI-Perl (facilmente riconoscibili per l’estensione .PLa loro assegnata) sono richiamati dalle pagine HTML facendoriferimento al sito www.openmaster.info/cgi-bin: abbiamo infattiprovveduto a memorizzarli nella cartella cgi-bin del server Webdedicato al nostro progetto “OpenMaster”.Chi intendesse utilizzare gli script presentati in questa lezione suipropri server, dovrà aver cura di modificare l’attributo action,contenuto nella tag <FORM> di ciascun file HTML, con l’indirizzocompleto della cartella cgi-bin presente sul proprio server seguitodal CGI che si desidera richiamare.Gli script CGI che si invocano dovranno ovviamente essere caricatisul proprio spazio Web nella cartella cgi-bin.Ad esempio, se si è interessati ad utilizzare, sul proprio serverWeb, il guestbook, caricate nella vostra cartella cgi-bin il fileguest.cgi quindi modificate l’attributo action contenuto nella tag<FORM> del file guest.html.

72/88

7a lezione

che elaborino contenuti in basealle selezioni e alle richieste delnavigatore. In questo caso nonsi tratta semplicemente d'inse-rire contenuti esterni, aggiorna-ti di frequente, come nel casodegli SSI, ma di costruirli sullabase di quel che il navigatorechiede o fa. Tali contenuti pos-sono provenire da fonti esterne,dal navigatore che risponde aquesiti posti su pagine prece-denti oppure da altri program-mi presenti nel sito. Qualunquene sia la fonte, tali informazioninon possono essere visualizza-te direttamente, ma richiedonotrattamento, eseguito medianteuno dei tanti linguaggi di pro-grammazione che possono fun-zionare sul vostro server Weboppure su un altro server chelavori in parallelo.

L'approccio CGI comporta uncarico di lavoro maggiore ri-spetto ai semplici SSI perciòpuò essere necessario allestireuna macchina di appoggio op-pure sfruttare le risorse di un si-to remoto, come nel caso deimotori di ricerca che offrono lapossibilità di eseguire ricercheanche nel nostro sito.

CGI è l’acronimo di CommonGateway Interface: si tratta di unmetodo che consente di mette-re in comunicazione diversiprogrammi presenti sullo stes-so server o su server differenti.I programmi possono esserescritti in uno qualsiasi dei lin-guaggi compatibili con CGI: Vi-sualBasic, C, C++, tcl, Perl e Ap-pleScript per citare i più diffusi.

In particolare, il linguaggioPerl (Practical Extraction andReport Language) è il più usatonell’ambito della programma-zione CGI perché nasce con unapredisposizione per la gestionedelle informazioni, come si ca-pisce anche dal nome. Ogni vol-

ta che dovete elaborare file ditesto (il che include natural-mente anche numeri, intesi co-me informazione), Perl è insu-perabile. Inoltre è relativamentefacile da imparare.

Tornando al CGI, vediamoche funge da interfaccia tra il"mondo" legato al server Web equello che ruota intorno al PCclient che si collega al sito.

Il browser in uso sul compu-ter client non deve conoscere ivari linguaggi di programmazio-ne: deve solamente interpretarele informazioni CGI restituite dalserver cui è collegato.

In pratica, diventa possibilecreare pagine HTML basandosisu dati residenti sul server, madisponibili direttamente all'u-tente. Ciò naturalmente poneproblemi di sicurezza superioririspetto a quelli legati all'usodegli SSI e perciò solo alcuniprovider sono disponibili a con-sentire l'uso di CGI sui propriserver. Un esempio tipico nel-l'impiego di quest'ultimo è nellacompilazione di form (modulionline) che raccolgono dati dal-l'utente e gli restituiscono ri-sposte. I form servono agli im-pieghi più disparati: registrazio-ne dei nuovi utenti, compilazio-ne di questionari, votazioni susondaggi, acquisto di prodotti,raccolta dei parametri per unaricerca, e via dicendo. Spesso siusa CGI anche per allestire gue-stbook (libro degli ospiti) dove ivisitatori possano inserire il lo-ro nome e un breve commentosul sito oppure per costruire unmodulo per la ricerca rapida diinformazioni.

Nella descrizione di un sitostatico, abbiamo visto che ognivolta che digitiamo un URLqualsiasi nella barra degli indi-rizzi del browser Internet, il no-stro computer (client) contatta

il server Web sul quale "risiede"il sito, indicandogli la paginadesiderata. Il server Web cercail file corrispondente e lo tra-smette al browser Internet chelo interpreta e lo mostra a vi-deo. Nel caso di pagine dinami-che, il server esegue localmentel'elaborazione necessaria, ossial'inserimento di un include op-pure l'elaborazione di contenu-ti mediante CGI e trasmette albrowser del navigatore solo il ri-sultato.

Molti di voi avranno visto si-ti con il classico contatore degliaccessi. Si tratta di un contenu-to dinamico che incrementa au-tomaticamente a ogni nuova vi-sita. Bene, il contatore costitui-sce un classico esempio di filegenerato mediante uno scriptCGI eseguito direttamente sulserver. Uno script, lo ricordia-mo, è un file che contiene unaserie di righe di codice che ven-gono interpretate, una per una,dall'interprete del linguaggio incui sono state scritte e conver-tite in comandi eseguibili dalserver. Tale file, una volta ese-guito (in questo caso all’attodell’ingresso nel sito Web di unnuovo visitatore), legge l’ultimovalore assunto dal contatore (ememorizzato sul disco fisso delserver Web), lo incrementa diuno quindi “spedisce” al clientl’output (in questo caso il valo-re del contatore sotto forma ditesto o d'immagine gif).

Gli script CGI sono facili dacomporre e hanno dimensioniridotte. Bisogna memorizzarliin una cartella all’interno dellaquale il server possa localizzar-li. Se avete acquistato un servi-zio di hosting per il vostro sitoInternet presso un qualsiasiprovider Internet, verificate chelo spazio Web a vostra disposi-zione vi permetta di eseguireanche script CGI: accedete viaFTP (potete utilizzare, a talescopo, il programma SmartFTP,presentato nel numero di marzo2003 di PC Open a pagina 148) alserver sul quale avete acquista-to il vostro spazio Web e cerca-te una cartella denominata cgi-bin. L’identificazione della car-tella cgi-bin e delle modalità perl’accesso alla stessa costitui-scono le prime operazioni dacompiere: proprio (e solo) daquesta cartella, infatti, potran-no essere eseguiti i vostri scriptCGI. Non tutti gli amministrato-ri consentono l’utilizzo di CGI,solitamente per motivi di sicu-rezza. Se possibile, è quindi

sempre bene chiedere al pro-prio provider se abiliti le fun-zioni CGI e se offra la compati-bilità con i linguaggi che inten-diamo utilizzare.

Più avanti, sempre con loscopo di testare i nostri scriptCGI prima di caricarli sul serverWeb, vedremo come configura-re Apache e Microsoft IIS (i ser-ver Web più utilizzati in tutto ilmondo) per eseguirli in locale. Ilcollaudo in locale offrirà nume-rosi vantaggi evitando la neces-sità di tenere sempre attiva laconnessione Internet e d'impe-gnarsi in continui upload trami-te protocollo FTP.

Perl, gratuito e "testuale" Abbiamo già evidenziato co-

me i CGI possano essere scrittiin vari linguaggi: abbiamo scel-to per voi Perl, il più utilizzato.È completamente gratuito e su-pera qualsiasi altro linguaggionelle sue funzioni di elaborazio-ni dei testi. Sono molte le carat-teristiche che rendono il Perl unlinguaggio assai interessante e“piacevole” da utilizzare: di-stingue automaticamente trastringhe di testo e numeri a se-conda dell’operatore utilizzato(quindi non è necessario perde-re tempo e sprecare risorse perla conversione di un numero instringa o viceversa); permettedi separare rapidamente i ca-ratteri in campi ed in dati chepossono poi essere utilizzatidallo script CGI-Perl in vari mo-di; facilita il trasporto (porting)degli script sviluppati su piat-taforme diverse (ad esempio daWindows a Linux e viceversa).

Per la stesura del codice Perlo per la visualizzazione discript, suggeriamo l’utilizzo diun normale editor di testo. Perprogrammare uno script CGI,così come per JavaScript, puòandar bene il Blocco Note diWindows.

Ci sentiamo tuttavia di cal-deggiare l’adozione di un editortestuale più evoluto: ad esem-pio, TextPad (www.textpad.com) oppure HTML-Kit già pre-sentato nelle precedenti lezionidel nostro corso. Una volta rea-lizzato lo script Perl sul propriopersonal computer, si dovràquindi provvedere a caricarlo(via FTP) nella cartella cgi-bin,all’interno dello spazio Webmesso a disposizione dal provi-der Internet.

In questo modo lo script po-trà essere richiamato e manda-to in esecuzione. �

�

SERVER

Applicazionecon interfaccia

CGIBrowser

Form compilato da navigatoree inviato al server

Informazioni contenute nel formpassate ad applicazione tramite CGI

Risposta inviata al navigatore Risposta dell'applicazionevia CGI

Form Web

Schema di funzionamento dell’applicazione CGI

73/88

7a lezione

Nella scorsa lezione abbia-mo già illustrato, breve-mente, cosa sono e a che

cosa servono i moduli HTML (oform): essi sono una sorta diquestionari compilabili on lineda parte dei visitatori di un sitoWeb. Inizialmente il loro utiliz-zo era limitato: si adottavanoesclusivamente per raccogliereinformazioni sulle opinioni esulle preferenze degli utenti.

I moduli compilati venivanoinfatti poi automaticamente in-viati ad un indirizzo e-mail (adesempio, quello del webmasterdel sito Internet). Oggi, le pos-sibilità di utilizzo dei form si so-no enormemente ampliate:vengono utilizzati, su un sem-pre maggior numero di siti, perinteragire con l’utente.

Nella lezione precedente ab-biamo visto com’è possibile in-teragire con un form HTML, di-rettamente sul personal com-puter client, tramite JavaScript.Questa volta aggiungiamo unaltro tassello: ci proponiamodi illustrare come gli script CGIpossano interagire con i form.La differenza è abissale: mentrenella scorsa lezione ci siamooccupati dell’aspetto client, quispostiamo l’attenzione sull’am-biente server ricorrendo pro-prio all’utilizzo di CGI-Perl. I

form HTML sono i migliori can-didati per l’acquisizione diinformazioni da parte dell’u-tente che visita il sito Web: so-no quindi gli strumenti piùadatti per interagire con i visi-tatori.

Nella figura 1 potete notaretutti gli elementi caratteristicidi un classico form.

In primo luogo, ricordiamoche qualsiasi form HTML deveessere racchiuso entro le ap-posite tag <FORM> e </FORM>.La tag iniziale <FORM> contie-ne anche due importanti para-metri (method e action), oltre alnome attribuito al form (indi-cato col parametro name): il lo-ro significato sarà presto chia-ro. La restante struttura delform deve essere composta se-guendo le specifiche HTML checonsentono l’inserimento dicaselle di testo, checkbox, op-tion box, pulsanti e così via.

Per approfondire l’utilizzodei form HTML e scoprire tuttele possibilità che questi offro-no, vi consigliamo di fare riferi-mento all’indirizzo Internetwww.w3.org/TR/REC-html40/interact/forms.html (in linguainglese).

Le tag <INPUT>, specificateall’interno del corpo del form,consentono di porre, sulla pa-

gina HTML, campi per l’inseri-mento del testo (se il parame-tro type è impostato a text), ca-selle di tipo checkbox (chepossono essere o meno spun-tate; se il parametro type è im-postato a checkbox), option box(se il parametro type è impo-stato a radio), pulsanti di invio(con il parametro type impo-stato a submit) e di reset (an-nullamento) dei dati (con typeimpostato a reset).

La parte più importante delform risulta essere comunqueproprio la tag <FORM>: l’attri-buto method segnala al brow-ser Internet che i dati inseritidall’utente all’interno del formdebbono essere trasmessi alserver con la modalità post oget; l’attributo action indica in-vece che, dopo la pressione delpulsante di invio dei dati deveessere raggiunto ed invocato loscript CGI specificato (nell’e-sempio http://www.openmaster.info/cgi-bin/guest.cgi).

La prima applicazione CGIPer verificare che gli script

Perl, memorizzati nella cartellacgi-bin del vostro server Web,vengano correttamente esegui-ti, provate a creare con unqualsiasi editor di testo (va be-ne anche il Blocco Note di Win-dows) un file contenente quan-to segue:

#!/usr/local/bin/perl#Questa riga indica dove èlocalizzato l’interprete Perl

print "Content-type:text/html\n\n";#Questa linea consente distabilire che tipo dicontenuto deve essere visua-lizzato

print "Ecco la mia prima applicazione CGI!";#Questa linea imposta iltesto che dovrà essere visua-lizzato sulla pagina Web

Memorizzate il file con il no-me di test.pl e caricatelo nellacartella cgi-bin del vostro ser-ver. Provate quindi ad inserirenella barra degli indirizzi delbrowser Internet, il seguenteURL: http://www.openmaster.

info/cgi-bin/test.pl (sostituite,ovviamente, www.openmaster.info con l’indirizzo del vo-stro server Web).

Se, sulla pagina Internet,verrà mostrato il messaggio“Ecco la mia prima applicazio-ne CGI”… congratulazioni!Avrete eseguito il vostro primoscript CGI.

In definitiva, il file test.pl con-sente di verificare che gli scriptPerl siano correttamente sup-portati.

Fondamenti diprogrammazione in Perl

Perl è il linguaggio più popo-lare per la stesura di script Perl.Così come nel caso di Java-Script, parliamo di script e nondi programmi. È bene infattisottolineare la differenza cheesiste tra i due termini: gliscript sono righe di codice cheindicano le azioni che devonoessere compiute da parte delcomputer sul quale sono ese-guiti; ogni riga viene interpre-tata (nel caso di JavaScript dalbrowser Internet, nel caso diPerl dal software residente sulserver). I programmi sono in-vece preventivamente compi-lati, in modo da risultare piùveloci da eseguire (seppur de-cisamente più “ingombranti”degli script).

Per programmare in Perlnon serve nulla di particolare:è sufficiente un normale editortestuale come il Blocco Note diWindows oppure - meglio -TextPad, 1st Page 2000 osoftware similari. Chi lavora suLinux può orientarsi sull’utiliz-zo di Emacs o di Vi (riconoscemolti linguaggi ed è in grado dicolorare opportunamente co-mandi, funzioni e parole chia-ve) - disponibile anche nellapiù recente versione grafica de-nominata “GVim” -.

Le variabili e i tipi Già dalla precedente lezione

sapete cosa sono le variabili.Si tratta di appositi “conteni-

tori” (porzioni della memoria)all’interno dei quali è possibilememorizzare ogni tipo di dato.In Perl è necessario anteporreal nome della variabile un’indi-cazione che permette di stabi-lire il tipo di dato che verrà inessa memorizzato.

Se si intende salvare in una

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

1. L’attributo “method” indica che i dati inseriti nel form devono essere trasmessi conla 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 perl’inserimento di testo.4. La tag <TEXTAREA> consente l’inserimento di un testo lungo (la casella perl’inserimento del testo occupa, in questo caso, 5 righe e 50 colonne).5. I pulsanti “Submit” e “Reset” permettono, rispettivamente, la trasmissione al serverWeb delle informazioni inserite e la pulizia del contenuto del form. �

1

74/88

7a lezione

variabile un tipo di dato scala-re cioè un numero, una stringa(un testo) o una costante, è in-dispensabile anteporre, al no-me della variabile, il simbolodel dollaro ($). Ad esempio,$nome è una variabile di tiposcalare che potrà essere utiliz-zata per memorizzare unastringa di testo.

Oltre agli scalari, esistono inPerl altri tipi di variabili.

Anteponendo il carattere @(at o chiocciolina) al nome del-la variabile, è possibile inizia-lizzarla come variabile di tipoarray (chiamati anche matrici).Gli array sono dei gruppi discalari: ciò significa che all’in-terno di una variabile di tipo ar-ray è possibile memorizzare uninsieme di valori (stringhe ditesto, numeri, costanti). Un ar-ray può contenere da zero ele-menti sino a quanti sono con-sentiti dal quantitativo di me-moria in uso.

Un esempio di array è il se-guente:@redazione = ($direttore,$caporedattore,$caposervizio,”Gruppo Editoriale Agepe”,$impiegati)

Com’è possibile notare, l’ar-ray “Redazione” è formato dacinque elementi ordinati: quat-tro stringhe (direttore, capore-dattore, caposervizio e impie-gati) ed una costante di tipostringa opportunamente deli-mitata (com’è obbligatorio) traapici.

Esiste, poi, un tipo denomi-nato hash (o array associativo):questo permette di abbinare,in un’unica variabile, un insie-me di scalari. Le variabili hashdevono essere precedute dalsimbolo % (percento). Unesempio di hash è il seguente:%libro =(“Titolo:”,$titolo_libro,”Codice:”,$codice,”Autore:”,$autore)

Con l’esperienza ci si accor-gerà che gli hash possono rap-presentare un ottimo strumen-to: essi infatti consentono dicorrelare, in un’unica variabileimmediatamente accessibile,un nome ed il relativo valore.

L’istruzione “print” e il codice HTML

Nel primo esempio di scriptCGI abbiamo utilizzato un’uni-ca istruzione Perl: si tratta diprint. Analogamente a docu-ment.write di JavaScript, con-sente di “stampare”, sulla pagi-na Web, una stringa di testo.

Bisogna sempre ricordare,se si vuole visualizzare qualco-

sa su una pagina Web, di porreinizialmente l’istruzione print"Content-type: text/html\n\n";.In questo modo si comuni-cherà al browser Internet chedovrà aspettarsi l’arrivo di unapagina in formato HTML.

Tramite l’istruzione print, sipuò stampare sulla pagina Webanche del codice HTML. Verifi-cate, per esempio, come loscript Perl creahtml.pl crei unapagina Web direttamente dalloscript CGI.

Passaggio dei dati a scriptCGI: metodi POST e GET

Abbiamo già evidenziato co-me gli script CGI consentano diinteragire con l’utente che visi-ta il nostro sito. Tale interazio-ne si concretizza con l’uso discript CGI “collegati” a normaliform HTML. Uno degli accorgi-menti più importanti per rice-vere dati, consiste nel contras-segnare ogni campo che costi-tuisce il form con un nomeidentificativo. L’operazione èdel tutto analoga a quanto giàvisto nella scorsa lezione con ilJavaScript: è sufficiente ag-giungere, all’interno dei marca-tori <INPUT>, <SELECT>, <TEX-TAREA> l’attributo name.

Provate ad analizzare il codi-ce HTML del file guest.html: cia-scun campo che costituisce ilform per l’inserimento dei datidel “libro degli ospiti” è identi-ficato con un attributo name.

Lo script CGI acquisirà i datiinseriti dall’utente in ciascuncampo del form proprio rife-rendosi agli attributi name:scegliete, quindi, per ciascuncampo, un identificativo adatto(fig. 2).

Ma come vengono passati idati allo script CGI che deve ri-ceverli eD elaborarli? L’attribu-to action, da inserire nella tag<FORM>, permette di specifi-care lo script CGI che dovrà ac-

quisire le informazioni inseritenel form HTML mentre l’attri-buto method consente di stabi-lire la modalità di passaggiodei dati.

I possibili valori assegnabiliall’attributo method sono POSTe GET. Il primo consente di in-viare allo script CGI, memoriz-zato sul server Web, una quan-tità illimitata di dati.

Proprio per questo motivo èil metodo più utilizzato. Quan-do si utilizza il metodo POST,inoltre, sulla barra degli indi-rizzi non vengono visualizzateinformazioni sui dati che ven-gono trasmessi al CGI.

Il metodo GET è quindi scar-samente utilizzato quando sivogliono acquisire dei dati daun normale form HTML.

È bene però precisare che iform non rappresentano l’uni-co modo per trasmettere datiad uno script CGI: è infatti pos-sibile inviarli anche tramite unnormale link HTML del tipo <A

HREF>. Ad esempio il link se-guente, permette di inviare alloscript libro.pl, le informazioniindicate dopo il simbolo ?(punto interrogativo):

<a href=”http://www.openmaster.info/cgi-bin/libro.pl?autore=rossi&tipo=informatica&anno=2002”>Trova i libri di informatica scritti dal Sig. Rossi nell’anno 2002</a>

In questo caso, per il pas-saggio dei dati, viene utilizzatoil metodo GET.

Osservate il formato da uti-lizzare per l’invio dei dati: dopoil punto interrogativo deve se-guire il nome del dato, il sim-bolo di uguaglianza quindi ilvalore. Qualora si debbano in-viare più dati è necessario se-pararli con l’utilizzo del simbo-lo & (fig. 3).

Le variabili d’ambiente con-tengono il gruppo di dati cheviene inviato allo script CGI re-sidente sul server Web e sonomemorizzate in una variabile ditipo hash denominata %ENV.

La variabile ambiente RE-QUEST_METHOD consente distabilire con quale metodo so-no stati passati i dati allo scriptCGI mentre QUERY_STRINGpermette di visualizzare il va-lore ricevuto tramite il metodoGET.

Lo script libro.pl che vieneinvocato dal link HTML (ved. fi-le libro.html) offre la possibilitàdi verificare l’uso delle variabi-li d’ambiente.

Notate che l’argomento dellavariabile $ENV deve essereracchiuso tra parentesi graffe

2

3�

75/88

7a lezione

ed apici. Esistono altre variabi-li d’ambiente: CONTENT_LENGTH consente di stabilire lalunghezza dei dati trasmessicol metodo POST; HTTP_USER_AGENT di recuperare le infor-mazioni sul browser e sul si-stema operativo utilizzati dal-l’utente; HTTP_REFERER di ot-tenere l’indirizzo della paginaWeb che ha richiamato l’esecu-zione dello script CGI.

Il CGI variabili_ambiente.plpermette di ottenere la listacompleta dei valori assunti datutte le variabili d’ambiente almomento della sua esecuzione.

Proviamo ora a cimentarcicon l’utilizzo del metodo POST.Immaginiamo di aver creatouna pagina Web (ved. il file son-daggio.html) contenente, al suointerno, il seguente codice perla visualizzazione di un form(listato 1) :

Al solito, l’attributo actionconsente di indicare lo scriptCGI cui devono essere passati i

dati inseriti nel form; methodstabilisce la modalità di inviodegli stessi.

Com’è possibile sviluppareuno script CGI che acquisiscale informazioni trasmesseglidal form con l’utilizzo del me-todo POST?

Non ci dilungheremo qui inuna trattazione dettagliata delproblema perché meriterebbeun’analisi piuttosto approfon-dita. Abbiamo comunque giàvisto come, quando un utenteclicca sul pulsante di invio, idati del form vengano trasmes-si al server.

Tali informazioni, però, perpoter essere utilizzabili, devo-no essere “confezionate” in unformato correttamente leggibi-le da parte del vostro scriptCGI.

I visitatori del vostro sitoWeb si aspettano che, inseren-do dei dati in un form, venga re-stituito loro un risultato: tal-volta può trattarsi di una cosa

semplice – come l’invio di unmessaggio -, altre volte si de-vono gestire funzionalità piùcomplesse come l’inoltro di unordine di acquisto.

In ogni caso, lo script CGIche deve elaborare le informa-zioni inserite nel form ha biso-gno di quei dati. Abbiamo giàvisto come i dati possano pro-venire da fonti diverse: da nor-mali form HTML, da link, da va-riabili d’ambiente.

Quando un utente invia i da-ti inseriti nel form cliccandosull’apposito pulsante submit,o quando clicca su un link (co-me quello che invocava loscript libro.pl), il server riceve idati sotto forma di coppie no-me-valore, in un unico bloccocontinuo.

Lo script CGI, per poter faruso di tali informazioni, devenecessariamente scomporle inpezzetti più piccoli: il processoprende il nome di parsing.

Nel nostro esempio, dopo

che l’utente avrà cliccato sulpulsante Invia, i dati trasmessiallo script sondaggio.pl assume-ranno una forma simile alla se-guente: txt_nome=Mario+ Ros-si&Eta=30&risp1=buono.

Il parsing dei dati permettedi scomporre le informazioniricevute nella forma che loscript CGI si aspetta.

Il blocco racchiuso tra i com-menti #inizio_parsing e #fi-ne_parsing nello script sondag-gio.pl effettua proprio il par-sing dei dati ricevuti dal formHTML contenuto in sondag-gio.html.

Esempi e risorseper approfondire

Chi volesse approfondire l’ar-gomento programmazione CGI-Perl, estremamente vasto e sfac-cettato, può fare riferimento aisiti Web www.perl.com,www.perl.org ed al newsgroupitaliano it.comp.www.cgi (con-sultabile anche via Web all’indi-rizzo http://groups.google.com/groups?hl=it&lr=&ie=UTF-8&group=it.comp.www.cgi).

Chi invece fosse interessatoall’utilizzo di script CGI che con-sentano la visualizzazione dicontatori grafici e testuali per ilproprio sito Web, guestbook,piccoli motori di ricerca, carrel-li della spesa, mailing list e cosìvia, può fare riferimento al sitohttp://cgipoint.html.it: è possi-bile reperire qui un’ampia rac-colta di link verso siti Web cheoffrono materiale in modo deltutto 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>

Abbiamo già anticipato co-me Apache e Microsoft IISsiano i server Web più uti-

lizzati nel mondo e come i CGIrappresentino un primo esem-pio di script server-side: essivengono eseguiti direttamentesul server; il risultato dell’ope-razione viene quindi trasmes-so al browser (client) dell’u-tente che sta visitando il sitoWeb. Nel caso di JavaScript, in-vece, così come abbiamo avu-to modo di apprendere nellascorsa lezione, gli script conte-nenti le operazioni da effettua-re vengono trasmessi in chiaro- “così come sono” - al browserInternet, interpretati ed ese-

guiti su ciascun computerclient.

L’obiettivo di questa lezionenon è quello di improvvisaresistemisti i nostri lettori mavuole rappresentare un puntodi partenza per tutti coloroche desiderano approfondirele tematiche relative alla pro-grammazione lato server.

Comprendere come opera-no Apache o IIS consentirà,dapprima, di “convertire” - amero scopo didattico - un per-sonal computer di casa o del-l’ufficio a server Web: potreteeffettuare qui le vostre primeprove di configurazione.

Una volta che il sistema ri-

sulterà adeguatamente confi-gurato, potrete utilizzarlo pertestare le vostre pagine Web fa-centi uso di tecniche di pro-grammazione che implicanol’interazione con il server, pri-ma ancora di caricarle sullospazio Web messovi a disposi-zione dal vostro provider In-ternet.

Chi sviluppa siti Web dina-mici, infatti, è bene allestisca -a casa propria o nel proprio uf-ficio - uno o più server Web inmodo tale da verificare il per-fetto funzionamento delle pa-gine realizzate prima ancoradi porle online.

I più volenterosi ed i più in-

teressati all’argomento, po-tranno raffinare le stesse co-noscenze con l’obiettivo di al-lestire un vero e proprio ser-ver Web personale. Chi dispo-ne di connessioni Internet alarga banda (ADSL o fibra otti-ca) può provare a rendere unoo più siti Web accessibili almondo intero direttamente dauno dei propri computer di ca-sa o dell’ufficio. Chi possiedeuna rete locale può pensare al-la realizzazione di servizi digestione della propria attivitàbasati su Intranet.

Il lettore avrà quindi giàcompreso come la conoscenzadel funzionamento del server

3 Installare e configurare un server Web

�

76/88

7a lezione

Web apra enormi possibilità.Va sottolineato che la realizza-zione di progetti complessi im-plicherà la necessità di misu-rarsi immediatamente con pro-blematiche assai importanticome quella della sicurezza.

Se non si vuole vedere il pro-prio server Web violato dall’e-sterno, attraverso la Rete, daparte di hacker e malintenzio-nati, si dovrà imparare ad ap-plicare patch e severe policy disicurezza. Queste tematiche,che necessiterebbero una trat-tazione ampia ed articolata, sa-ranno oggetto di servizi futuri.

Server Web professionaliAl giorno d’oggi sono dispo-

nibili numerosi server Web(gratuiti o meno): alcuni di es-si sono liberamente prelevabi-li da Internet in modo che pos-sano esserne saggiate tutte lecaratteristiche.

L’indagine che Netcraft ef-fettua mensilmente (www.netcraft.com) suggerisce qualisiano, al momento, i serverWeb più utilizzati in tutto ilmondo. Secondo le statistichedisponibili all’indirizzo www.netcraft.com/survey/, nel me-se di marzo 2003, Apache ri-sultava in uso sul 62,5% deiserver totali a livello mondialementre Microsoft IIS sul 27%.

Gli aspetti che vanno consi-derati prima della “messa inopera” di un server Web sonola facilità d’installazione e diconfigurazione, le possibilitàdi personalizzazione, le suecaratteristiche peculiari, lesue dimensioni, le performan-ce garantite ed il consumo dirisorse macchina, il supportodi transazioni sicure, la dispo-nibilità del codice sorgente, lapuntualità con cui vengono ri-lasciati aggiornamenti, even-tuali patch e nuove versioni, ilsupporto tecnico, il supportodi più piattaforme hardware-software, la disponibilità diversioni gratuite. I server Webdisponibili oggi non consento-no solo di restituire pagine sta-tiche ai personal computerche si collegano con un certosito ma supportano tutti i piùrecenti linguaggi di scripting.

I tempi in cui il Web era con-cepito come un insieme di pa-gine statiche collegate da sem-plici collegamenti ipertestuali(link) sono ormai remoti.

Gli sviluppatori di pagineWeb hanno sentito infatti, dasubito, l’esigenza di svincolar-

si dalla staticità dell’HTML.Nacquero, quindi, i primi lin-guaggi server-side: l’intento eraquello di garantire una mag-giore interattività delle pagineInternet, restituendo all’utentesolo le informazioni cui egliera effettivamente interessa-to.

CGI è proprio una delle pri-me tecnologie che vennero of-ferte agli sviluppatori per ren-dere maggiormente dinamici ipropri progetti sul Web.

Dopo CGI hanno preso am-piamente piede ASP, PHP,ColdFusion e JSP mentre stacominciando a fare capolino ilnuovo Microsoft .NET.

Il denominatore comune deilinguaggi di scripting “server-si-de” consiste nel fatto che il co-dice viene eseguito e interpre-tato direttamente sul serverche ospita il sito Internet (unasituazione inversa rispetto aquanto accade nel caso di Ja-vaScript).

In questo modo è possibileacquisire dall’utente la listadelle informazioni alle qualiegli è interessato, ricercarlesul server quindi proporglielesotto forma di una normalepagina HTML, preparata “al vo-lo” direttamente sul serverWeb. Il processo è del tuttotrasparente agli occhi dell’u-tente.

Linguaggi come ASP e PHPhanno aperto scenari fantasti-ci, impensabili all’epoca in cuitutto il Web era immobile, con-dizionato dalla staticità del-l’HTML: si pensi, a mero titoloesemplificativo, che è oggipossibile generare automati-camente pagine HTML river-sando, al loro interno, il con-tenuto di un database. In pra-tica, immaginate di poter me-morizzare tutte le informazio-ni che dovranno essere inseri-te nel vostro sito Web (adesempio, il catalogo dei vostriprodotti con nome, descrizio-ne ed altri dati caratterizzanti)in unico database. Grazie al-l’utilizzo di script “server-side”il server Web sarà in grado diattingere dal database solo leinformazioni alle quali il visi-tatore è interessato, comporreuna normale pagina HTML, in-serirvi all’interno i dati richie-sti e proporre il tutto all’uten-te. Nel caso di un catalogo me-morizzato all’interno di un da-tabase (per esempio, in for-mato Microsoft Access), si do-vrà esclusivamente realizzare

lo script in grado di recuperarele informazioni e di generare lapagina Web.

In questo modo si eviterà disprecare tempo e risorse nellosviluppo di una pagina HTMLstatica per ciascun prodottoche si vuole mettere in Rete.Eventuali modifiche (grafichee non) dovranno essere inoltreapplicate solo allo script ser-ver-side e non ad ogni singolapagina HTML! Presenteremolinguaggi come ASP e PHP nelprossimo futuro.

Installare e configurare IISInternet Information Services

(IIS) è il server Web che Mi-crosoft mette a disposizionenelle versioni Professional eServer di Windows 2000 ed inWindows XP Professional (diWindows 2003 Server, in testpresso diverse aziende già daun paio di anni, è atteso per iprimi di maggio). Le differenzetra l’IIS incluso nelle versioni

Server e quello che viene for-nito con le versioni Professio-nal sono notevoli (a tal propo-sito, fate riferimento al box diapprofondimento qui sopra).

Sostanzialmente, la versio-ne di IIS inclusa in WindowsXP Professional può essereutilizzata con il solo scopo disviluppare e testare a fondo isiti Web che si stanno realiz-zando, prima ancora di “pub-blicarli” on line (sul serverWeb messo a disposizione dalproprio provider Internet). Ta-le versione di IIS è infatti asso-lutamente inadatta se si vuoleallestire un server professio-nale.

La versione di IIS inclusa inWindows XP Professional è lastessa che viene fornita insie-me con Windows 2000 Profes-sional (cambia solo il numerodella versione: IIS 5.1 in luogodi 5.0). In Windows XP Profes-sional, l’installazione di IIS de-ve essere avviata manualmen-

�IIS, le differenze in Windows XPPro e 2000/2003 ServerSia la versione Professional di Windows XP (così come Windows2000 Professional), sia la versione Server di Windows2000/2003, mettono a disposizione Internet InformationServices (IIS).Le differenze tra le due versioni, sebbene siano molto simili perciò che concerne l’interfaccia grafica di amministrazione, sonopiuttosto marcate. La versione di IIS inclusa in Windows XPProfessional è assai limitata: il webmaster o il programmatore puòfarne uso con il solo scopo di testing delle pagine Internetsviluppate.Una volta verificata la corretta visualizzazione di tutte le pagineInternet su una tranquilla workstation locale dotata di Windows XPProfessional e IIS, una volta soddisfatti del proprio lavoro, si potràprocedere alla “pubblicazione” del sito sul server della società odel provider Internet sul quale sarà in esecuzione Windows 2000Server e IIS oppure, se più fortunati, Windows 2003 Server, moltosuperiore rispetto a Windows 2000 Server in termini di affidabilitàe di prestazioni.La versione di IIS di Windows XP Professional non permette infatti,di creare veri e propri siti Internet, raggiungibili dall’esterno nellaforma http://www.nomedelsito.com ma semplicemente di creareuna serie di directory virtuali: in ciascuna di esse si potrannomemorizzare le pagine costituenti un unico sito.Ciascun sito “virtuale” sarà però raggiungibile nella formahttp://123.45.67.89/nome_sito ove 123.45.67.89 è l’indirizzo IPassociato in quel momento alla macchina dotata di Windows2000 Professional e IIS; nome_sito è il nome della directoryvirtuale contenente le pagine Web da visualizzare.Sebbene questo tipo di struttura possa essere adeguata perpiccole realtà aziendali che utilizzano reti locali per offrire ai propridipendenti servizi Intranet (ad esempio, la possibilità di accederea determinati dati, di acquisire ordini dai clienti, di gestire lacontabilità dell’azienda semplicemente da un’interfaccia Web),non è pensabile adottare questa soluzione nel caso in cui, dallamedesima macchina, si desideri rendere accessibili numerosi sitiInternet nella forma www.ilmiosito.it o www.ilsuosito.com.

77/88

7a lezione

�

te accedendo al Pannello dicontrollo di Windows, cliccan-do su Installazione applicazio-ni quindi su Installazione com-ponenti di Windows.

Dalla lista dei componentiinstallabili, selezionate la voceInternet Information Service(IIS) quindi cliccate sul pul-sante Dettagli. Qualora siateinteressati ad allestire solo unserver Web, potete limitarvi aspuntare le caselle File comu-ni, Servizio Web, Snap-in Inter-

net Information Services.Cliccando su OK vi verrà ri-

chiesto di inserire il CD ROMdi installazione di WindowsXP.

Al termine della fase di se-tup, che procederà in modoautomatico, consigliamo diriavviare il sistema operativo(fig. 4). Per controllare che IISsia installato e funzionante, av-viate il browser Internet quin-di digitate, nella barra degliindirizzi, http://localhost (lo-calhost è detto anche indirizzodi loopback ed identifica il vo-stro stesso computer).

Il server Web (IIS) dovrebberispondere alla vostra richie-sta mostrandovi la pagina didefault.

Se il computer è connessoin rete locale, provate ad ac-cedere alla visualizzazionedella pagina HTML di defaultdi IIS da un client qualsiasi.

Per far ciò eseguite InternetExplorer (o il browser installa-to) e digitate, come URL,http:// seguito dal nome delcomputer sul quale è in esecu-zione IIS (per esempio:http://michelesrv).

Per verificare il nome asse-gnato al computer sul qualeavete provveduto ad installareIIS, accedete al Pannello di con-trollo, fate doppio clic sull’ico-na Sistema, cliccate sullascheda Nome computer.

Il pulsante Cambia… per-mette di modificare a propriopiacimento il nome della mac-china (fig. 5). In alternativa,potete provare a raggiungerela macchina IIS facendo riferi-mento al suo indirizzo IP.

Supponiamo che all’internodella rete locale gli sia statoassegnato l’IP 192.168.0.4: pro-vate a digitare http://192.168.0.4 da un qualsiasi

personal computer della LANper accedere alla pagina pre-definita proposta da IIS.

Se poi il computer è colle-gato ad Internet dovrebbe es-sere possibile raggiungerlodall’esterno indicando l’IP as-segnato dal provider al mo-mento della connessione. �

4 5

4 Configurazione del sito Web predefinito in Windows XP Professional

Accedendo al Pannello dicontrollo di Windows XPProfessional e facendo

doppio clic sull’icona Strumen-ti di amministrazione quindi suInternet Information Services, siaccederà alla finestra di confi-gurazione del server IIS. Daquesta finestra è possibile ge-stire siti Web, funzionalità FTPe SMTP.

Dopo l’installazione di IIS,viene automaticamente creatoun sito Web predefinito conte-nente, essenzialmente, i riferi-menti ai file della guida di In-ternet Information Services.

È opportuno considerare levarie opzioni per la configura-zione di un sito Web da un pun-to di vista gerarchico: maggio-re è il livello gerarchico dell’e-lemento sul quale si stanno ap-portando delle modifiche,maggiore sarà l’impatto globa-le degli stessi interventi.

Molte schede per la configu-razione compaiono a più livel-li gerarchici: ciò significa cheeffettuando una modifica al li-vello più alto verrà influenzatoun maggior numero di oggetticomponenti il sito.

Fate clic con il tasto destro

del mouse sulla voce Sito pre-definito quindi scegliete Pro-prietà. La prima parte della fi-nestra contiene le informazio-ni necessarie per l’identifica-zione del sito, compresi nomee indirizzo. Vi sono poi due vo-ci relative alle porte da utiliz-zare: la prima, per gli accessianonimi dal server, la secondaper l’accesso SSL. Una delle li-mitazioni che Windows XP Pro-fessional impone consiste nelfatto di mettere a disposizionel’utilizzo, per le connessioniSSL, di un’unica porta: la 443.

L’altra grossa limitazionedella versione di IIS contenutain Windows XP Professional,consiste nel fatto che il nume-ro di connessioni che possonoessere effettuate è limitato a10. Questa restrizione rendeWindows XP Professional as-solutamente inadatto per la ge-stione di un normale sito Webche preveda un numero di ac-cessi contemporanei superio-re.

Il campo Timeout connessio-ne permette di stabilire il tem-po massimo (in secondi) du-rante il quale un utente inatti-vo - che non “naviga” cioè al-

l’interno del sito - può restarecollegato al server IIS.

Poiché l’utilizzo della ver-sione di IIS inclusa in WindowsXP Professional è consigliatopressoché esclusivamente al-l’interno di una rete locale In-tranet, suggeriamo di ridurre ilvalore impostato nel campo Ti-meout connessione in modo daagevolare l’ingresso di utentiin attesa e di accelerare le pre-stazioni del sistema.

Suggeriamo, inoltre, di atti-vare la casella Abilita keep-ali-ve HTTP: è possibile così mi-gliorare le prestazioni del ser-ver permettendo ad ogni clientdi mantenere attiva la connes-sione con IIS anziché crearneuna nuova ad ogni richiesta diaccesso.

La sezione Consenti registra-zione attività permette di con-figurare le impostazioni relati-ve alla creazione dei file di logossia dei file testuali che regi-strano tutti i tentativi di acces-so al server IIS. Se si prevededi utilizzare IIS solo all’internodella propria Intranet, è possi-bile disattivare la casella Con-senti registrazione attività inmodo da evitare l’occupazione

di spazio su disco. In caso con-trario, se si prevede che lamacchina sulla quale è instal-lato IIS debba essere raggiun-gibile anche dalla Rete Inter-net, è bene attivare l’utilizzodei file di log in modo da rile-vare anche eventuali tentatividi intrusione. Il formato più dif-fuso per la creazione dei file dilog è il W3C Extended Log FileFormat che costituisce lo stan-dard per la maggior parte deiserver Web ed è supportatoanche dagli sviluppatori distrumenti di analisi e gestione(fig. 6).

6

78/88

7a lezione

A questo livello non ci sem-bra opportuno dilungarci suifiltri ISAPI: basti sapere che es-si consentono di eseguire con-trolli in background sul sitoWeb. Vi sono diversi tipi di fil-tri: alcuni soddisfano esigenzerelative alla sicurezza, altri lamappatura degli URL e l’elabo-razione delle intestazioni ri-chieste.

La scheda Home Directorypermette invece di specificaredove debbono essere reperiti ifile che compongono il sitoWeb che si sta configurando inIIS. Le scelte possibili sono tre:Directory situata in questo com-puter, Directory condivisa si-tuata in un altro computer eReindirizzamento a un URL.

La scheda può assumere di-verse forme a seconda che sisia selezionata una directory,una directory virtuale o un file(fig.7). La sezione sottostantedella finestra permette di im-postare le tipologie di accessoconsentite.

Accesso origine script, se se-lezionato, e se sono impostati ipremessi di lettura e/o scrittu-ra, permette l'accesso al codi-ce sorgente degli script; Letturaconsente l'accesso alla risorsain sola lettura; Scrittura per-mette l'accesso alla risorsa inlettura/scrittura; Esplorazionedirectory se selezionato, visua-

lizza in formato ipertestuale ilcontenuto di una cartella nonvirtuale. Per visualizzare ilcontenuto di queste ultime bi-sognerà conoscerne l'alias as-sociato. Se l'opzione non è abi-litata e l'utente specifica all'in-terno dell'URL un percorso aduna risorsa inesistente, il ser-ver Web risponderà con unmessaggio di errore (accessonegato); Registra visite aggiun-ge la risorsa a quelle da moni-torare per mezzo dei file di log;Indicizza questa risorsa se ilservizio di indicizzazione è at-tivo, aggiunge la risorsa a quel-le da indicizzare.

Il menU a tendina Autorizza-zioni di esecuzione permette diindicare il livello di esecuzioneautorizzato sulla risorsa: solofile HTML, script oppure scripted eseguibili.

La scheda Documenti con-sente di impostare le pagineche devono essere automati-camente proposte all’utentequalora egli non specifichi ilnome di un file memorizzatosul server.

Primi accorgimentie creazione di unadirectory virtuale

Microsoft stessa, per motividi sicurezza, consiglia di elimi-nare i riferimenti ai file dellaguida ed agli esempi installatiautomaticamente insieme conIIS (per ottenere la lista com-pleta delle patch da installare edelle politiche di sicurezza cheè consigliabile applicare, sug-geriamo l’utilizzo del softwareMicrosoft Baseline SecurityAnalyzer (MBSA), già presen-tato nei numeri 78 (a pagina61) e 79 (a pagina 69) di PCOpen.

Per far questo eliminate, dal-la finestra di amministrazionedi IIS, tutte le directory virtua-li create dopo l’installazione diInternet Information Services(cancellate le directory virtua-li Scripts, IISAdmin, IISSamples,MSADC, IISHelp, WebPub, Prin-ters) e tutti i contenuti predefi-niti (cancellate le cartelle inet-srv\iisadmin e inetsrv\ii-sadmpwd – entrambe contenu-te nella cartella \winnt\sy-stem32 -; cancellate anche lecartelle \inetpub\wwwroot (o\ftproot o \smtproot), inet-pub\scripts, inetpub\iissam-ples, inetpub\adminscripts,%systemroot%\help\iishelp\iise %systemroot%\web\printers.

A questo punto fate clic con

il tasto destro del mouse su Si-to web predefinito, cliccate sul-la scheda Home directory,quindi eliminate wwwroot dallacasella Percorso locale (do-vrebbe restare solo c:\inet-pub). Questa modifica vi per-metterà di evitare un messag-gio d’errore che informa sull’i-nesistenza della cartella speci-ficata (fig. 8-9).

Dopo aver effettuato le re-golazioni iniziali, sinora illu-strate, è possibile passare allacreazione di una directory vir-tuale. Nella versione di IIS in-clusa in Windows XP Profes-sional è immediato pensare dicreare una directory virtualeper ogni sito Web che si sta svi-luppando.

Destinando una directoryvirtuale a ciascun sito su cui sista lavorando, è possibile si-mulare, sul proprio computer,il comportamento del serverWeb che lo ospiterà. È possibi-le visualizzare, quindi, pagineWeb statiche e dinamiche cosìcome appariranno successiva-mente dopo averle caricate sulserver. L’utilizzo delle direc-tory virtuali permette di risol-vere eventuali problemi primaancora di “pubblicare” i file sulserver Web del provider Inter-net consentendo di concen-trarsi esclusivamente sullaprogrammazione e sull’otti-mizzazione del sito. La parti-colarità delle directory virtua-li consiste nel fatto di fungereda “puntatore” verso una car-tella residente su un disco fis-so locale o su un altro personalcomputer in rete (fig. 10).

Per creare una nuova direc-tory virtuale, è sufficiente fareclic con il tasto destro delmouse su Sito web predefinitoquindi seguire la procedurapasso-passo che viene presen-tata.

La finestra immediatamentesuccessiva a quella di presen-tazione, richiede di specificareun alias per la directory vir-tuale che si sta crean-do.

L’alias è l’identifica-tivo che dovrà digita-re, nella barra degli in-dirizzi del browser In-ternet, chiunque vorràaccedere al contenutodella directory virtua-le. Ad esempio, sup-poniamo di inserirepcopen come alias: ciòsignifica che se dalbrowser Internet si

vuole accedere alla directoryvirtuale di PC Open, creata sulnostro computer, dovremo di-gitare, nella barra degli indiriz-zi http://localhost/pcopen.

Per accedere alla stessa di-rectory virtuale, un utente del-la nostra LAN dovrà digitare, inluogo di localhost, l’indirizzo IPassociato alla nostra macchinaoppure il nome della stessa: adesempio, http://paperino/pco-pen.

Tenete presente che è pos-sibile accedere alle directoryvirtuali configurate su un per-sonal computer dotato di Win-dows XP Professional e IIS an-che dalla Rete Internet specifi-cando, al posto di localhost,l’indirizzo IP associato in quelmomento alla macchina (perstabilire l’indirizzo IP associa-to al proprio computer all’attodella connessione Internet, fa-te doppio clic sull’icona raffi-gurante due piccoli computer,nella traybar in basso a destra,cliccate sulla scheda Dettagliquindi fate riferimento al valo-re Indirizzo IP del client).

Per evitare l’accesso ai siticonfigurati su IIS è necessarioapplicare alcune politiche disicurezza sugli account utenteo configurare un firewall in mo-do tale che respinga i tentatividi accedere al server IIS dallaRete Internet (a tal proposito,fate riferimento al box dedica-to ad Outpost Firewall) fig. 11.

�

7

8

9

10

79/88

7a lezione

Dopo l’impostazione dell’a-lias, è necessario indicare lacartella che deve essere pun-tata ossia la directory su discoche contiene (o all’interno del-la quale si intende memorizza-re) i file che costituiscono il si-to Web. Il nostro consiglio èquello di effettuare una provacopiando i file d’esempio chetrovate nel CD ROM allegato aquesto numero di PC Open inuna cartella sul vostro discofisso. Ad esempio, se decidetedi porre tali file in una cartelladenominata C:\PCOpen_esem-pi, specificate qui la stessa di-rectory (servendovi del pul-sante Sfoglia…) (fig. 12).

Come ultimo passo, è neces-sario specificare le autorizza-zioni che si desiderano impo-stare per la directory virtualein corso di creazione. Sugge-riamo di attivare solo le casel-le Lettura ed Esecuzione script.Cliccando sul pulsante Avantiquindi su Fine, si concluderà laprocedura guidata.

Come risultato, vedretecomparire all’interno del ramoSito web predefinito, una nuova

voce, corrispondente all’aliasda voi scelto per la directoryvirtuale.

Cliccando con il tasto de-stro del mouse sulla directoryvirtuale pcopen appena creataquindi scegliendo Proprietà,avrete accesso alla finestradelle proprietà, molto simile aquella già vista in precedenzaper il Sito Web predefinito(fig. 13).

Sono due gli aspetti che, aquesto livello, è bene sottoli-neare. Il primo riguarda la ge-stione della sicurezza. La sche-da Protezione directory per-mette di stabilire le modalitàcon le quali un utente può ac-cedere alla directory virtuale.

Diversamente dalla versio-ne server di IIS, in Windows XPProfessional non è possibilecontrollare l’accesso in baseall’indirizzo IP.

Facendo clic sul pulsanteModifica, viene visualizzata lafinestra Metodi di autenticazio-ne: selezionando la casella Ac-cesso anonimo è possibile farein modo che chiunque possaaccedere alla directory (pur

consentendo di man-tenere il controllo sul-le sottodirectory e suisingoli file).Nonostante l’accessosia “anonimo”, l’utenteverrà registrato nel si-stema per mezzo di unaccount “ad hoc” (ge-neralmente denomina-to IUSR_nomecompu-ter, ove nomecompu-ter è il nome associatoal computer sul qualeè in esecuzione IIS).Gli utenti anonimi non

dovranno inserire alcun nomeutente identificativo né alcunapassword per accedere ad unadirectory virtuale sul vostrocomputer. Se su un server Webdi solito si deve consentirel’accesso ad un sito senza digi-tare alcun nome utente e pas-sword, sul vostro computer lo-cale sarebbe bene inibire, perragioni di sicurezza, qualsiasiforma di accesso anonimo.

Gli altri tre livelli di accessorichiedono l’identificazionedell’utente prima di consentirel’accesso alla directory.

Attivando la casella Autenti-cazione di base vengono ri-chiesti il nome e la passworddell’utente. L’unico problema èche tali informazioni vengonotrasmesse in chiaro e possonoessere quindi intercettate con-sentendo ad utenti malinten-zionati di accedere al sistemain modo non autorizzato.

L’intercettazione può avve-nire tramite un software (o unhardware) denominato sniffer,in grado di analizzare il conte-nuto di ogni pacchetto inviatoe ricevuto.

Le due opzioni successivesono utilizzabili in Windows2000 Professional solose la macchina è colle-gata ad un server didominio.

L’opzione Autentica-zione integrata di Win-dows sfrutta invece unmetodo completamen-te diverso per l’identi-ficazione dell’utente:in questo caso il siste-ma operativo effettuauno scambio di daticrittografati con ilbrowser dell’utentegrazie ad un metododi certificazione digi-

tale installato sul personalcomputer client insieme con ilbrowser Internet.

Il secondo aspetto da evi-denziare riguarda la prioritàcon la quale vengono visualiz-zati i documenti contenuti inuna directory virtuale.

Nella scheda Documenti, èpossibile indicare quali file de-vono essere mostrati se l’uten-te non richiede la visualizza-zione di uno specifico file.

Digitando, nella barra degliindirizzi del browser, l’URLhttp://localhost/pcopen, verràdapprima cercato il file de-fault.htm, se questo non vienetrovato, IIS passa alla ricerca didefault.asp. Se anche il file de-fault.asp non è presente nellacartella, IIS ricerca iisstart.asp;se anche tale file risulta irrepe-ribile, viene visualizzato unmessaggio d’errore che segna-la all’utente l’impossibilità diaccedere alla directory. La listadei documenti predefiniti è li-beramente personalizzabile(fig. 14). Nel nostro esempio,digitando nel browser l’URLhttp://localhost/pcopen, verràinfatti visualizzata automatica-mente la pagina default.htm. �

11

12

13

14

80/88

7a lezione

Apache è il server Web at-tualmente più utilizzato almondo, nato per funziona-

re come processo “stand alone”ossia senza richiedere l’appog-gio di altre applicazioni o di altricomponenti software.

Si tratta di un prodotto soli-do, performante e supercollau-dato: è il frutto (completamentegratuito) del lavoro di un teamdi volontari, noto come “Apa-che Group”.

Apache è un software estre-mamente aperto (sono addirit-tura reperibili sul sito www.apache.org i sorgenti veri e propri)che offre anche la possibilità adaltre aziende di crearsi un busi-ness mediante lo sviluppo diplug-in, aggiunte varie, stru-menti di configurazione, tool disupporto e così via.

Il server Web Apache, nato inambiente Linux, è disponibileper tutte le piattaforme Unix, in-cluso Mac OSX e, più di recente,è stato portato anche in Win-dows.

Apache differisce da IIS per ilfatto di essere completamentegratuito e di mettere a disposi-zione tutte le funzionalità di unserver Web avanzato. Tra l’altroApache può essere impiegatosu una qualunque versione diWindows (Windows 9x compre-so).

L’ultima versione di Apachedisponibile al momento dellastesura di questo servizio, è la2.0.44: sul sito dedicato a que-sto server Web (http://httpd.apache.org/) è possibile reperi-re le informazioni relative all’in-stallazione, alla configurazioneed all’aggiornamento dello stes-so. L’Apache Group è poi solitopubblicare tempestivamente,proprio in questo sito Web, lepatch risolutive per eventualibug di sicurezza scoperti con ilpassare del tempo.

Per avviare l’installazione diApache, fate doppio clic sul fileapache_2.0 .44 -win32-x86 -no_ssl.msi (prelevabile gratuita-mente all’indirizzo http://nagoya.apache.org/mirror/httpd/binaries/win32/apache_2.0.44-win32-x86-no_ssl.msi).

Dopo l’accettazione dei ter-mini della licenza d’uso (checonsigliamo di leggere con at-tenzione) e delle note generalisull’installazione (Read This Fir-st) sarà necessario inserire al-cune informazioni riguardo alserver Web che si sta configu-rando. Se state installando Apa-che per la prima volta, con loscopo di saggiarne le principalifunzionalità, digitate localhostnel campo Server Name ed inse-rite la vostra e-mail nel campoAdministrator’s email address.Lasciate attiva l’opzione for Allusers, on Port 80, as a service(fig. 15).

Nella finestra successiva se-lezionate Typical quale moda-lità di installazione quindi inse-rite la cartella ove desiderateche Apache venga collocato.

Cliccando sul pulsante Installverrà avviata la fase di setupche si concluderà in pochiistanti. Al termine della proce-dura, all’interno della traybar(ossia l’area situata in basso adestra, accanto all’orologio diWindows), dovrebbe comparirel’icona di Apache, a segnalareche il Web server è già in esecu-zione (fig 16).

Ad installazione conclusaprovate ad avviare Internet Ex-plorer o il browser in uso e digi-tate http://localhost. Se il serverWeb vi risponderà con la fine-stra visualizzata in figura avreteinstallato correttamente Apa-che. I file componenti il sitoWeb (HTML, PHP,…) andrannoposti nella sottodirectory deno-minata htdocs. All’interno dellastessa cartella, potete crearesottodirectory in modo che il lo-ro contenuto possa essere ri-chiamato, dal browser Internet,nella forma http://localhost/no-mesottodirectory/nomefile.html.Se l’utente non specifica alcunfile ma si limita a digitare unURL del tipo http://localhost/no-mesottodirectory, il primo fileche verrà automaticamente ri-chiamato sarà index.html.

Così come in Linux, anche inWindows il file che consente la

configurazione dell’intero ser-ver Web è httpd.conf contenutonella cartella \Apache\conf.

Ricorrendo all’utilizzo di Ri-sorse del computer (o Gestionerisorse), portatevi all’internodella cartella ove avete installa-to Apache quindi fate doppioclic sulla directory denominataConf.

L’analisi delle varie opzioni diconfigurazione di Apache, effet-tuabili agendo sul file httpd.conf,va oltre gli obiettivi di questa le-zione. Suggeriamo di fare riferi-mento alla pagina http://httpd.apache.org/docs-2.0/mod/quickreference.html per ottene-re una lista completa delle re-golazioni (direttive) applicabili.Per rendere la configurazione diApache più semplice ed intuiti-va – evitando, così, di dover in-tervenire direttamente sul file ditesto httpd.conf – sono nati deitool basati su interfaccia grafi-ca. A titolo d’esempio citiamoApacheConf (a pagamento) pre-levabile all’indirizzo http://www.apache-gui.com/.

ActivePerl su WindowsActivePerl è un software gra-

tuito che contiene la più recen-te versione di Perl per ambienteWindows. Il produttore, Active-State, ne offre anche una ver-sione per Linux così da non mo-dificare il proprio lavoro nel ca-so lo si traghettasse nell'altroambiente. Trattandosi di un lin-guaggio interpretato, che vienequindi tradotto in linguaggiomacchina al momento dell'ese-cuzione, è necessario disporredi un interprete ad hoc per cia-scuna delle piattaforme su cuilo s'intende utilizzare.

ActivePerl è semplicissimoda installare e configurare in en-

trambi i mondi: servendosenesi potrà provare tutti gli scriptCGI Perl sul proprio personalcomputer.

La versione Windows è di-sponibile sul CD guida allegatoper concessione di Active Stateche detiene il copyright su Acti-ve Perl e Perlscript.

L’installazione di ActivePerlper Windows è avviabile facen-do doppio clic sul file ActivePerl-5.8.0.805-MSWin32-x86.msi. Do-po la schermata iniziale, per pri-ma cosa si dovrà accettare ilcontratto di licenza d’uso (daleggere attentamente) quindiscegliere la cartella all’internodella quale si desidera installareil pacchetto software (fig. 17).

ActivePerl si compone di di-

15

16

Apache sotto LinuxAlcune distribuzioni Linuxcontengono già il server WebApache e ne offronol’installazione. Se si desideracomunque utilizzare l’ultimaversione disponibile, èsufficiente collegarsi con il sitowww.apache.org e scaricare ilfile d’installazione per Linux(httpd-2.0.44.tar.gz).Portatevi alla riga di comandoLinux, accedete alla cartellaove avete scaricato il filed’installazione in formato.tar.gz quindi seguitescrupolosamente i comandiche trovate elencati nelladocumentazione di Apachecirca l’installazione del Webserver in ambiente Linux,consultabile in qualunquemomento all’indirizzoseguente:http://httpd.apache.org/docs-2.0/install.html.

5 Installare e configurare Apache sotto Windows

81/88

elementi. Quello che ci in-sa in questo momento è iln ISAPI per il server Web:tta di un componente cheerfaccia con IIS e che con-

di elaborare script CGI.nstallarlo, in fase di setup cive assicurare di attivare lele Create IIS script mappingerl e Create IIS script map-for Perl ISAPI. Di solito, l’in-zione di ActivePerl abilitaro server Web all’esecu-dei CGI (da qualsiasi sito

configurato, da qualunquetory virtuale e da qualsiasi

cartella). Nel caso in cui si do-vesse configurare un serverWeb reale – non un computerdestinato esclusivamente al te-st in locale dei propri script – sa-rebbe bene, per motivi di sicu-rezza, restringere l’esecuzionedegli script CGI solo alle cartel-le in cui ciò risulti effettivamen-te necessario. Una volta termi-nato il setup di ActivePerl, acce-dete quindi alla finestra Gestio-ne Servizio Internet Microsoft dalPannello di controllo, cliccatecon il tasto destro del mousesul nome del server e sceglietela voce Proprietà, selezionate lavoce Servizio WWW quindi clic-cate sul pulsante Modifica (fig.18).

Provate a copiare lo script te-st.pl che trovate nel CD ROM diPC Open nella cartella cgi-bindella directory virtuale pcopen,creata in precedenza in IIS. Apri-te Internet Explorer e digitate,nella barra degli indirizzihttp://localhost/pcopen/cgi-bin/test.pl: il browser Internetvisualizzerà semplicemente ilcodice Perl che compone loscript CGI ma questo non verràeseguito.

Selezionate, a questo punto,la cartella Home directory, clic-cate sul pulsante Configurazio-ne: la procedura di installazionedi ActivePerl dovrebbe aver in-serito, nell’elenco contenutonella scheda Mapping applica-zioni, le voci Perl %s %s e Per-lIS.dll. In questo modo gli scriptPerl saranno eseguibili nell’in-tero server Web.

Avviando ora Internet Explo-rer e digitando nuovamentehttp://localhost/pcopen/cgi-bin/test.pl, lo script CGI test.pl

verrà correttamente eseguitovisualizzando la frase Ecco ilmio primo script CGI! (fig. 19).

Per provare gli script Perlcontenuti nel nostro CD, diret-tamente sul vostro computer, èquindi sufficiente copiare i filecon estensione .pl (Perl) nellacartella cgi-bin.

ActivePerl offre anche la pos-sibilità di controllare la sintassidi uno script Perl da voi svilup-pato. È sufficiente accedere alprompt di MS DOS, portarsi nel-la cartella dove avete memoriz-zato il vostro file Perl, quindi di-gitare perl –c nomefile.pl (sosti-tuendo a nomefile.pl il nome delvostro script Perl): ActivePerl visegnalerà eventuali errori di sin-tassi facendovi risparmiaremolto tempo. ActivePerl offriràil supporto per l’esecuzione de-gli script Perl anche se decidetedi montare il server Web Apa-che in versione Windows. Ad in-stallazione di Apache conclusaè sufficiente provvedere al se-tup di ActivePerl, seguendo le li-nee guida appena illustrate,quindi copiare gli script conestensione .pl che trovate nelCD allegato a PC Open nella car-tella cgi-bin. Tenete presenteche, nel caso di Apache, la car-tella cgi-bin viene automatica-mente all’interno della direc-tory di installazione del serverWeb. Memorizzate, quindi, nellacartella cgi-bin tutti i file Perl davoi creati (o quelli d’esempioche trovate nel CD di PC Open).Supponiamo che abbiate copia-to, nella cartella cgi-bin, lo scripttest.pl. Avviate Internet Explorere digitate, nella barra degli indi-rizzi, l’URL http://localhost/cgi-bin/test.pl. Qualora vi venisse

restituito un Internal server er-ror, aprite con un normale edi-tor di testo tutti i file con esten-sione .pl che avete posizionatonella cartella cgi-bin e modifica-te la prima riga da #!/usr/lo-cal/bin/perl a #!c:/Perl/bin/Perl.exe (supponendo diaver installato ActivePerl nellacartella c:\Perl). Adesso, digi-tando http://localhost/cgi-bin/test.pl nel browser Internet,dovrebbe venire correttamentevisualizzata la frase Ecco la miaprima applicazione CGI! (fig. 20). Per chi volesse ap-profondire ulteriormente le mo-dalità di utilizzo, le potenzialitàe la configurazione di Active-Perl, suggeriamo di consultarel’ottima guida, disponibile informato HTML, ed installata in-sieme con il programma vero eproprio. Per accedervi, cliccatesu Start, Programmi, ActiveStateActivePerl quindi su Documen-tation. �

17

18

19

20

82/88

8a lezione

Esiamo così arrivati all’ulti-ma puntata del nostro cor-so per diventare WebMa-

ster. Ricominceremo dopo l’e-state con un nuovo appunta-mento dedicato a chi è interes-sato ad acquisire competenzeda Web designer

In questa ultima puntata, do-po aver analizzato le tecniche ei segreti per la creazione di unsito Internet, ci occuperemodella sua promozione.

Tutto l'impegno e il tempo fi-nora dedicato alla realizzazio-ne del sito Web ha avuto ununico grande scopo: mostrare

al popolo della Rete di quantosiamo stati capaci.

Indipendemente dal risulta-to raggiunto, dalle conoscenzeaccumulate e dall'esperienzamaturata, la creazione di un si-to ha un solo grande obiettivo:quello di essere visto da altri.

È in quest'ottica che si ra-giona nel momento in cui siinizia a parlare di “promozionedi un sito Internet”.

Con il termine promozione,è nostro intento raccoglieretutte quelle attività per far co-noscere un Web site al popolodi Internet.

La promozione di un sito sidivide in due parti ben distin-te: il raggiungimento degliutenti e la loro fidelizzazione.Cosa significa tutto ciò? Pos-siamo spiegare meglio il con-cetto con una similitudine: In-ternet è un mare, i navigatorisono i pesci e il nostro sitoWeb è la rete da pesca, a que-sto punto, il lettore diventatoormai WebMaster è ovviamen-te il pescatore.

Se siamo abbastanza capacidi lanciare la nostra rete da pe-sca tanto lontano da racco-gliere molti pesci, dobbiamo

essere altrettanto capaci di farsì che nessuno poi scappi dal-la rete.

Fuor di metafora, tutte le at-tività rivolte alla promozionedel nostro sito Web, dovrannoessere così efficaci che gliutenti che raccoglieremo do-vranno rimanere all'internodel sito e, ancora meglio, do-vranno ricordarsi di tornarci avisitarlo.

Come è possibile raggiun-gere un obiettivo tanto impor-tante? La risposta naturalmen-te, la troverete nelle prossimepagine. �

IL CALENDARIO DELLE LEZIONI

di Roberto e Alessandro Abbate

�

� A scuola con PC Open

ProgettoWebMasterPromuovere il proprio sito Web

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

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

Lezione 3:Modelli di pagina e tabelle(disponibile integralmente sul CD)

Lezione 4:HTML 4.01 e CSS(disponibile integralmente sul CD)• Stile e struttura: usare i tag HTML nativi• Il deprecato tag font• I marcatori per formattare il testo• Gestire gli spazi nel testo• CSS e HTML 4.01 • Cosa si può fare con i fogli stile• Quattro tipi di CSS• I colori del Web• Gestire le immagini

• Esercizi• Ereditarietà e innesco a cascata• Proprietà di trasferimento

dei parametri• Regole di ereditarietà• Selettori di classe• Websafe palette

Lezione 5:Design e multimedialità(disponibile integralmente sul CD)• Elementi di design per il Web• La ruota colore• Grafica e formati di immagini

per Internet• Link ipertestuali• Tabelle d’immagini• Mappe immagine• Audio e video

Lezione 6:Siti interattivi(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 7:Interazione sul server(disponibile integralmente sul CD)• Il server Web• I form: la porta per l’utilizzo degli script

CGI• Installare e configurare un server Web• Configurazione del sito Web predefinito

in Windows XP Professional• Installare e configurare Apache sotto

Windows

Lezione 8:Promuovere il sito• Tecniche di promozione:

cosa fare e cosa evitare• I motori di ricerca: vietato mancare• Come ottimizzare il proprio sito• Cross promotion: ovvero la pubblicità

gratuita• Per chi vuole approfondire: libri e siti

consigliati

il corso è sul CD

guida

83/88

Sono state sprecate pagi-ne, parole, convegni e in-contri per spiegare quali

sono le tecniche per fidelizzarel'utente: ovvero per far sì chetorni su un sito Web.

Cosa fareA nostro modo di vedere

però, di tutte le pratiche e tec-niche che si possono applicare,ne esistono alcune che merita-no di essere sottolineate:

1 - Innanzitutto il sito deve ave-re dei contenuti interessan-ti. È impossibile spiegarequando un sito Web è inte-ressante, infatti lo diventaquando ci sono utenti che loritengono tale.Il miglior sistema per rag-giungere questo primo, es-senziale obiettivo, è quellodi pubblicare con una certacontinuità, contenuti e argo-menti che a nostro modo divedere possono attirare l'at-tenzione. Nel vastissimomondo di Internet infatti, cisarà certamente qualcun al-tro che condivide il nostropensiero e avrà quindi inte-resse a visitare il sito da noicreato.

2 - Cercate sempre l'interazio-ne con i vostri utenti. È es-senziale che i visitatori delvostro sito possano intera-gire con il WebMaster del si-to: innanzitutto potrannofarvi avere le loro opinionied il loro parere (il cosid-detto feedback). Questosarà per voi oro colato:niente è più importante del-le sensazioni dei vostri visi-tatori: saranno loro infatti aindirizzarvi verso le sceltemigliori e a farvi notare glierrori da voi commessi. Ègrazie al loro aiuto che po-trete migliorare il vostro si-to. Se poi capitasse di in-trecciare nuove conoscen-ze, la cosa non potrà chefarvi piacere.

3 - Dovrete tenere presenti dueparole importantissime inInternet: leggerezza e sem-plicità. Essere leggeri signi-fica creare immagini e docu-menti che possano esserenavigati velocemente dalvostro visitatore. Ci sonomoltissime persone infattiche possiedono ancora uncollegamento a 56 Kpbs viamodem e non saranno certoentusiasti di aspettare trop-

po tempo per visitare unapagina Web. Per l'attesa, iltempo massimo è di 10 se-condi, mentre per quanto ri-guarda il peso, fate in modoche la pagina con tutti glielementi (immagini, even-tuali suoni e così via) nonsuperi i 70 KB.

4 - Al punto precedente abbia-mo parlato anche di sempli-cità: con ciò vogliamo direche è meglio evitare sfonditroppo colorati, o riempirela pagina di immagini ani-mate. Il vostro visitatore do-vrà poter leggere le vostrepagine senza fare fatica: nondeve quindi affaticare la vi-sta con contrasti di colorepoco chiari o elementi chene distraggano la lettura.La migliore soluzione è quel-la di usare sfondi chiari e te-sto scuro. I link è bene la-sciarli sottolineati o se pro-prio volete cambiarli, fate inmodo che siano sempre bendistinti dal resto del testonormale. Assolutamente daevitare sfondi animati o co-lori poco contrastanti (co-me arancione su nero, o gial-lo su rosso).Il buon senso vi guiderà ver-

so le scelte più adatte: leg-gete con attenzione le vo-stre pagine Web e con unacerta dose di autocritica.

Cosa evitarePer esclusione, le prime co-

se da evitare corrispondono atutto ciò che si contrapponecon quanto abbiamo scrittoprecedentemente.

Per il resto, abbiamo rac-colto le pratiche da non segui-re all'interno del box sulla ne-tiquette più in là nel’articolo.Si tratta delle azioni che asso-lutamente devono essere evi-tate per promuovere con suc-cesso un sito Web. Quando siinizia infatti, è facile incapparein errori a dir poco evitabili:troppa “foga” nella promozio-ne.

Ricordiamoci che i visitato-ri hanno sempre un ottimomotivo per non navigare il no-stro sito Web: dovremo esserenoi che, con discrezione e per-severanza, gli offriremo il pre-testo per accedere al sito danoi creato.

Dovremo quindi stuzzicarela loro curiosità e nello stessotempo guadagnarci il loro ri-spetto. �

8a lezione

�

1 Tecniche di promozione: cosa fare e cosa evitare

2 I motori di ricerca: vietato mancare

Adesso che sappiamo qualisono le pratiche consiglia-te per promuovere un sito

Web e quali quelle da evitare,possiamo iniziare con le pri-me, piccole attività di marke-ting, o meglio, Web marketing.Ma da dove si comincia?

Se lo chiedono tutti. Tanteore investite nella creazione diun sito Web e poi, una voltamesso on line, la dura realtà:nessuno (a parte noi e la nostraristretta cerchia di amici) lo vi-sita. Come rimediare? Comeiniziare a promuoverlo?

La risposta è semplicissima:noi, da utenti, quando cerchia-mo qualcosa, dove andiamo?Dove iniziano le nostre naviga-zioni?

La risposta può essere unaed una soltanto: i motori di ri-cerca.

È da lì quindi che inizieremoil nostro viaggio alla scopertadei migliori trucchi per far co-noscere il nostro sito Web.

Come per tutti gli strumenti,per usarli al meglio è necessa-rio conoscerli in maniera ap-profondita. Innanzitutto cos'èun motore di ricerca e comefunziona? Quali sono i più dif-fusi e utili?

Un motore di ricerca è unservizio che consente di cerca-re informazioni all'interno diInternet. Con informazioni nonintendiamo solo pagine Web,ma anche file di ogni tipo: im-magini, documenti di altra na-tura (ad esempio i PDF di Acro-bat), tracce audio (MP3, WAV),video e così via.

Ad essere corretti, questimotori non cercano in tutta In-ternet, o in tutto il World Wide

Web, semplicemente eseguonouna ricerca all'interno del lorodatabase, che si compone ditutti quei file che i loro spiderrintracciano. Prima parola ma-gica: spider, per chi conoscel'inglese, spider significa ragno.Questo perché i software di cuisi avvalgono i motori di ricerca,scandagliano il Web propriocome fanno i ragni all'internodelle ragnatele.

Ogni motore di ricerca hauno o più spider (chiamati an-che bot) che periodicamentenavigano il Web e schedulano icontenuti all'interno dei lorodatabase. Questo tutto auto-maticamente.

Il nostro primo obiettivosarà quello di rientrare tra ipercorsi dei bot.

Non tutti però fanno uso de-gli spider. O meglio, esistono

dei siti Internet che spessovengono accumunati ai motoridi ricerca ma che in realtà nonlo sono e per questo, non fannouso di software come gli spider.

Motori di ricercaUn motore di ricerca è ap-

punto un sito che scandaglia escheda il Web con l'utilizzo disoftware automatici. I principa-li motori di ricerca italiani sonoil Trovatore, raggiungibile al-l'indirizzo http://www.iltrovatore.it e Arianna, reperibile suhttp://arianna.iol.it. All'estero, ilpiù famoso e conosciuto è Goo-gle (http://www.google. com, inversione italiana su http://www.google.it) ma ne sistonoaltri come Altavista (http://www.altavista.com, disponibilein Italia su http://www.altavista.it), MSN http://www.msn.

84/88

8a lezione

com, in italiano su http://www.msn.it).

DirectoryLe directory sono servizi

che raccolgono e catalogano isiti in base al loro contenuto. InItalia, il più conosciuto sito diquesto tipo è Virgilio (http://www.virgilio.it) ma anche all'e-stero ce ne sono molte, tra cuilo storico Yahoo! (http://www.yahoo.com e in italiano suhttp://www.yahoo.it) e Dmoz(o Open Directory Project:http://www.dmoz.org, la cui lo-calizzazione italiana è reperibi-le all'indirizzo http://www.dmoz.org/World/Italiano). Unaltro esempio di directory disuccesso è 100Links (http://www.100links.it), nata per rac-cogliere i siti recensiti all'inter-no della sua mailing list chesuggerisce 25 siti a settimana(da qui il nome, 100 links al me-se) è ora la directory su cui siappoggia l'intero network diDada con il sito SuperEva(http://www.supereva.it).

In questo campo, le direc-tory specializzate sono tantis-sime: esistono siti che catalo-gano solo pagine in una deter-minata lingua oppure che trat-tano un solo argomento. Adesempio esiste TuttoGratis(http://www.tuttogratis.it) cheraccoglie solo siti che offronoservizi gratuiti, stesso compitosvolto da FreeOnLine(http://www.freeonline.it). In-somma, le strade da percorreresono tante, si tratta solo di se-guirle tutte.

MetamotoriTrattiamo questo argomento

solo per completezza delleinformazioni. I metamotori in-fatti sono motori di ricerca cherestituiscono i risultati delle ri-cerche interrogando altri mo-tori. Si può quindi fare ben po-co per apparire in questi: saràinfatti sufficiente comparire trai principali motori di ricercaper essere inseriti anche inquesti. Alcuni esempi sono Me-tacrawler (http://www. metacrawler.com), DogPile (http://www.dogpile.com) e Web-Crawler (http://www.webcrawler.com).

Queste differenze, spesso siassottigliano con accordi dimarketing tra le società che ge-stiscono i motori di ricerca e ledirectory. Ad esempio Virgilio eYahoo! sfruttano anche il data-base di Google per offrire i mi-

gliori risultati. Google stesso,per la propria directory(http://directory.google.com)fa uso di Dmoz e gli accordistrategici ovviamente non sifermano qui.

Una volta raggiunto un mo-tore di ricerca, ciò che dovre-mo fare è trovare un link del ti-po Aggiungi URL o in ingleseAdd URL. Da qui poi, sarà ne-cessario specificare l'indirizzodel nostro sito e poi, compilaregli altri campi che potrebberoesserci stati richiesti: come ti-tolo della pagina, descrizione,keywords (ovvero le parolechiave) e via dicendo. Se nonsapete che parole chiave usare,pensate semplicemente conquali termini volete che i navi-gatori di Internet possano tro-vare il vostro sito; evitate peròparole troppo generiche: ri-schiereste di trovarvi assiemea qualche migliaio di siti chesicuramente non agevolerannol'utente nel cliccare sul vostro.

Google il più utilizzato dal popolo della Rete

È ovvio che il motore di ri-cerca più usato sia quello ca-pace di portare più utenti. È al-trettanto ovvio quindi, che ilmotore di ricerca da tenere inmaggiore considerazione siaproprio quello più utilizzato. InItalia e nel mondo, quello piùusato è Google. Anche nei siticon maggiore traffico, un posi-zionamento ben studiato suGoogle può portare ad avere il50% dell'utenza referente por-tata da questo motore di ricer-ca. Con il termine referente, in-tendiamo tutti quei visitatoriche cliccando su altri link arri-vano al nostro sito.

Sul totale degli utenti arriva-ti dai motori di ricerca, Googleè capace di segnare, da solo, un80% sul totale.

Balza subito in mente quin-di, quale sia il motore di ricercada studiare per apparire in te-sta alle sue ricerche.

Google “dà il voto” allepagine Web

Quando lo spider di Google(che prende il nome di Google-Bot) scheda una pagina Web, leassegna un voto: questo voto èdato da una lunga equazionematematica i cui termini sonoovviamente coperti da segretoe nessuno, a parte gli ideatori egli sviluppatori di Google, neconosce gli estremi.

A ciò che è dato sapere agli

esperti del settore, una voce incapitolo molto “pesante” nelcalcolo del voto sono i link ver-so una determinata paginaWeb. La regola di base è: piùlink da siti esterni portano ver-so le nostre pagine, maggioresarà il nostro Page Rank.

Un'altro valore che farà au-mentare il nostro Page Rank(PR) è il voto dato da Google al-la pagina che ci linka. Detto inparole semplici, se la nostraHome page ha un PR di 5, se cilinka una pagina con PR 7, èpossibile che il nostro PageRank salga.

Per aumentare quindi il votoche Google assegna al nostrosito, è necessario instauraredegli scambi link tra noi e altrisiti. Meglio se il nome del colle-gamento ipertestuale conterràdelle parole chiave: ad esem-pio se il nostro sito tratta dimodellismo statico, sarebbebene che i nostri siti partner cirichiamassero con un codicesimile:

<a href=”http://www.indirizzo-del-tuo-sito.com” title=”Modellismostatico”>Modellismo statico</a>

Per maggiori informazionisui collegamenti ipertestuali,fate riferimento a Pc Open diMarzo a pagina 25 o alla relati-va lezione sul CD.

Per conoscere quale sia ilPage Rank di un sito, è possibi-le scaricare e installare la Goo-gle Toolbar (http://toolbar.goo-gle.com), una banda che si ag-giunge al browser Microsoft In-ternet Explorer e che riportaappunto il Page Rank.

Questo comunque non è l'u-nico parametro che Google va-luta per visualizzare i risultatidi una ricerca. Ne esistono altriche tratteremo nel capitolo“Ottimizzazione del proprio si-to”.

Software per l'inserimentodei siti Internet nei motori di ricerca

Esistono software studiatiappositamente per gestire imotori di ricerca. Questi pro-grammi, nati all'inizio solo perinserire il proprio sito nei mo-tori di ricerca, sono ora dellevere e proprie suite per capirequanto stia funzionando il la-voro di segnalazione del pro-prio sito. È infatti possibile, ol-tre al classico inserimento au-tomatico su più motori, rileva-re il proprio ranking, e applica-

re quindi le migliori strategieper risultare in testa ai risulta-ti. Ma cosa è questo ranking?

È un termine inglese che in-dica la posizione con cui il no-stro sito appare nei risultati diuna ricerca in base ad una de-terminata parola chiave.

Ad esempio, se il nostro sitotratta di modellismo (magaristatico) e se digitando su Goo-gle i termini modellismo staticoil nostro sito apparisse in180esima posizione, è ovvioche il nostro ranking sarebbetroppo basso e che sarebbeora di studiare qualche piccolotrucco per migliorare la pro-pria posizione.

Si ottengono vantaggi realinell'utilizzo di questi software?

È inutile negare che la stra-tegia migliore sia quella di ef-fettuare la segnalazione a ma-no. Questo perché potremo viavia ottimizzare le tecniche cheimpareremo nel prosieguo del-l'articolo in base al motore diricerca che ci troviamo di fron-te. Un software con una segna-lazione “selvaggia” del nostrosito, non potrebbe ottenere lostesso risultato: avremo ri-sparmiato tempo ma certo nonpotremmo godere degli stessirisultati.

Questi software infatti, ven-gono usati da quei WebMasterche devono gestire decine di si-ti e devono quindi curarne laloro posizione nei motori di ri-cerca. Con numeri simili, è me-glio avere dei risultati minorima poter avere in ogni momen-to il polso dell'intera situazionesotto mano: al massimo, i siti dipunta possono essere seguitiin maniera manuale.

I software più diffusi sul mercato

L'inserimento manuale delproprio sito nelle directory emotori di ricerca è obiettiva-mente la soluzione migliore perottenere i risultati più soddi-sfacenti.

Per chi non avesse comun-que il tempo, le capacità oppu-re avesse in gestione diversi si-ti Web da inserire e ottimizzarenei motori di ricerca, i softwarecreati ad hoc per il posiziona-mento, automatizzano il tutto esostituiscono completamenteil lavoro manuale del WebMa-ster.

Ne esistono di diversi, gra-tuiti o a pagamento, ognunocon le proprie caratteristiche

�

85/88

8a lezione

interessanti. Quasi tutti questitool inoltre, forniscono stru-menti avanzati quali ad esem-pio la verifica del posiziona-mento del sito tra centinaia dimotori di ricerca ed il migliora-mento delle pagine (ad esem-pio Meta Tags e frasi chiave),per ottenere i migliori risultatinelle ricerche.

Un solo consiglio, non abu-satene, anche perché potresteottenere l'effetto contrario, es-sere cancellati dai databaseper uso illecito nelle segnala-zioni.

AddWeb Web Site Promoter 6.0http://www.addweb.it Costo: 69 euro. Lingua: inglese

Uno dei più completi softwa-re di promozione Web disponi-bile sul mercato.

È possibile prelevare e pro-vare AddWeb in versioni suc-cessivamente registrabili pervalutarne le potenti funziona-lità. La versione trial è disponi-bile nel nostro CD Guida.

Ecco le funzionalità di mag-gior interesse di AddWeb WebSite Promoter:• Analizza le pagine per ottene-re il migliore posizionamento• Costruisce pagine Web otti-mizzate per determinate parole

o frasi chiave.• Inserisce il sito nei principalimotori di ricerca nazionali einternazionali e in altre migliaiarisorse di ricerca.• Monitorizza di continuo laposizione acquisita nei motoridi ricerca.• Monitorizza in maniera det-tagliata l'accesso alle pagineWeb con SiteStatsLive.• Aumenta la Link Popularitycon Linktrader.

SubmitWolf IT v5.0www.trellian.com/it/submitwolfitPrezzo: 165 dollari. Lingua: italiana

Pacchettosoftware pro-fessionale, madi facile utiliz-zo, progettatospecificamen-te per la pro-mozione di sitiWeb. Ha anche una versionegratuita con forti limitazioni ri-spetto alla release ufficiale, cheha raggiunto 1.500.000 copiescaricate. Si può quindi tran-quillamente definire il prodottopiù diffuso attualmente sulmercato.

Tra le caratteristiche princi-pali segnaliamo:• Registra la tua pagina ad oltre1000 motori di ricerca in pochiminuti.• più di 280 motori Italiani. • Aggiungi il tuo link a più di500.000 pagine di link. • Registra quanti URL vuoi sen-za costi addizionali. • Registrazione Prioritaria a Pa-gamento in 48 ore su Altavista,HotBot, Inktomi, LookSmart,

MSN, Overture, Slider, whatU-seek e molti altri siti. • Analizza come si classificanole vostre pagine nei motori diricerca. • Ottimizza la tua pagina Webper migliorare il posizionamento. • Creati specificamente per isiti Web italiani, con l'enfasi suimotori italiani.

Active WebTraffic 5.0www.myrasoft.com/activewebtrafficPrezzo: 119 dollari. Lingua: inglese

Active Web-Traffic è unanuova genera-zione disoftware perla promozionedi siti Web ingrado di sot-toporre auto-maticamente il vostro sito a300.000 motori di ricerca, di-rectories, mezzi di informazio-ne e liste di Web site. Myrasoft,il produttore, certo della qua-lità del suo sistema di promo-zione, offre una versione trial.

Active WebTraffic ha ricevu-to numerosi premi come ilsoftware di promozione Webpiù potente su Internet.

In breve le peculiarità delprogramma:• Facile da imparare ed utiliz-zare• Possibilità di aggiungere i vo-stri motori di ricerca preferitial datababase dei presenti• Ricerca automatica dei moto-ri di ricerca.• Report dettagliati sui risulta-ti ottenuti.• Imposta automaticamente le

regole di segnalazione del sito(ad esempio su Google non ef-fettuerà giornalmente la richie-sta di inserimento, per non ri-schiare la cancellazione del-l'URL per motivi di spamming).

Web Position Gold 2www.webposition.com/product.htm Prezzo: 149 dollari; Lingua: inglese

Web PositionGold 2 è uno dei piùapprezzati softwareper l'indicizzazio-ne, l'ottimizzazionedelle pagine Webed il controllo delposizionamentodei siti sui motori di ricerca ri-spetto alle parole chiave sele-zionate. Il produttore di WebPosition Gold 2 offre agli utentianche una versione trial, (di-sponibile per l’installazione al-l’interno del CD guida allegatoalla rivista).

Le principali caratteristichedel programma sono:• Registrazione in più di 94 mo-tori di ricerca internazionali(compresi gli italiani Iol, Lycos,MSN, SuperEva, Tiscali, Virgilioe Yahoo Directory).• Analisi delle pagine Web infunzione del posizionamento. • Creazione di pagine ottimizza-te per il posizionamento.• Download delle pagine sulproprio server.• Registrazione sui motori di ri-cerca.• Analisi dettagliata del posizio-namento. �

Ovvero come far sì che ilnostro sito sia strutturatoin maniera tale da piacere

ai motori di ricerca.La prima regola è molto sem-

plice: fare in modo che tutte lepagine che dovranno figurarenei risultati di una ricerca, sia-no linkate tra loro. Ciò non si-gnifica che le pagine devonocontenere un link verso tutti glialtri documenti, ma è bene cheogni pagina contenga un ri-chiamo per tornare alla homepage e un menu che riporti al-meno verso le sezioni princi-

pali. Dalla Home page poi, do-vremo richiamare quelle sezio-ni che per noi sono più impor-tanti. I bot dei motori di ricercainfatti, sono in grado di passareda un link ad un altro in manie-ra automatica ed è quindi es-senziale che riescano a rintrac-ciare e quindi schedare tutte lepagine del nostro sito.

I trucchi degli espertiGli sviluppatori Web più

esperti, quando si trovano difronte alla creazione di siti In-ternet, seguono delle re-

3 Ottimizzazione del proprio sito

�

Nell'immagineabbiamoabbozzato unapossibilestruttura delsito: dallaHome page èpossibileraggiungere leprincipalisezioni. Ognipagina poi,dovràcontenere unlink per tornarealla Home pagee un menu perraggiungere lealtre sezioni

STRUTTURADEL SITO

sul CDGuida di PC Open

86/88

8a lezione

gole che saranno loro utili nelmomento in cui dovranno se-gnalare il sito ai vari motori diricerca.

I meta tagsUna buona abitudine, è quel-

la di inserire in ogni pagina delproprio sito i meta tags de-scription e keywords. Questisono dei marcatori che raccol-gono la descrizione del sito e leparole chiavi. Tornando all'e-sempio del modellismo statico,questi due marcatori andreb-bero definiti come segue:<meta name=”description”content=”Le fotografie delle mierealizzazioni di modellismo statico:dalle moto da corsa alle auto diFormula 1, passando per gli aereicivili e i paesaggi.”><meta name=”keywords”content=”modellismo, statico,aerei, moto, corsa, corse, auto,formula, uno, 1, paesaggio,paesaggi, foto, fotografie”>

Per personalizzare questimarcatori, è bene non superarei 500 caratteri nel campo de-scription e keywords.

Questi marcatori, seppur or-mai ignorati da molti motori diricerca, è bene inserirli sempree comunque in tutte le paginedel nostro sito. Nei casi in cuice ne fosse bisogno, potremmoanche modificarli in base alcontenuto del documento.

Il marcatore <title>Esistono poi altre regole di

primaria importanza. Ad esem-pio il tag <title>, che assegna untitolo alla pagina e conseguen-temente alla finestra del brow-ser. All'interno di questo mar-catore è bene definire pocheparole, ma che noi riteniamo diprimaria importanza. I terminisegnalati all'interno di questotag infatti, vengono presi inconsiderazione con particolareimportanza. Ecco come:

<title>Modellismo statico: le fotodelle creazioni di MarioRossi<title>

Gli headingsGli headings sono quei tag

<h#> dove # rappresenta una ci-fra da 1 a 6 e servono per gesti-re i titoli dei vari paragrafi. Perchi li avesse dimenticati, puòfare riferimento a PC Open diFebbraio e alle lezioni del CD.

I motori di ricerca dannoparticolare importanza ai ter-mini presenti in questi marca-tori, perché spesso raccolgonoin poche parole l'intera pagina.È per questo che è indispensa-bile inserirli e usarli al meglio.

I tags per la formattazioneSono i cosidetti inline ele-

ments, analizzati su questostesso corso nel numero diFebbraio. Molti di questi assu-mono una particolare impor-tanza rispetto al resto del te-sto. Ad esempio, quando ci tro-viamo di fronte a una parolachiave per il nostro sito, sareb-be bene enfatizzarla, cosicché imotori di ricerca siano in gradodi capire che quel determinatotermine ha una rilevanza mag-giore.

Ad esempio, in un sito di mo-dellismo, sarebbe utile appli-care il tag <b> (bold, ovverograssetto) o <em> (emphatized,ovvero enfatizzato) alle parolepiù importanti, come appuntomodellismo, statico, auto, mo-to, e così via. Attenzione ad ap-plicare queste formattazionisolo al testo che verrà stampa-to nella pagina, e non quindi al-le parole presenti nei meta tagsappena analizzati, nel <title> ein generale agli elementi chenon visualizzano nulla nel do-cumento.

L'unico problema, è che ogniqual volta venisse applicato untag per la formattazione, il te-

sto viene appunto formattatoseguendo le istruzioni asse-gnate.

Ad esempio, un testo simile:Questo è il sito di<b>modellismo</b> di <b>MarioRossi</b>, all'interno del qualepotrai trovare <b>foto</b> di ognitipo sulle mie <b>creazioni</b>:<b>formula 1</b>, <b>moto dacorsa</b>, <b>aerei civili</b>ecc.

Verrebbe stampato a videocome segue:

Questo è il sito di modelli-smo di Mario Rossi, all'internodel quale potrai trovare foto diogni tipo sulle mie creazioni:formula 1, moto da corsa, ae-rei civili ecc.

Onde evitare il continuo ac-cumularsi di testo in grassetto,è possibile applicare un picco-lo trucco. Dove realmente nonsi vuole aumentare il peso diuna parola ma la si vuole co-munque rendere più importan-te per i motori di ricerca, pos-siamo racchiuderla tra i tag<strong> e </strong> e poi ap-plicarci un foglio di stile che an-nulli la formattazione, ma nonintacchi l'importanza datagliper i motori di ricerca. Ecco unesempio molto semplice:<html><head><title>Modellismo statico: le fotodelle creazioni di MarioRossi</title><meta name=”description”content=”Le fotografie delle mie

realizzazioni di modellismo statico:dalle moto da corsa alle auto diFormula 1, passando per gli aereicivili 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>MarioRossi</b>, all'interno del qualepotrai trovare<strong>foto</strong> di ogni tiposulle mie<strong>creazioni</strong>:<strong>formula 1</strong>,<strong>moto da corsa</strong>,<strong>aerei civili</strong> ecc.</body></html>

Il risultato è pubblicato nel-l'immagine in basso. L'unicaraccomandazione, è quella dinon abusare del trucco: i mo-tori di ricerca più avanzati po-trebbero rilevare la continuaapertura e chiusura del tag<strong> e rilevare questo espe-diente come un trucco per fal-sare i suoi risultati. Insomma,facciamo i furbi ma facciamolobene. �

�

Dall'immagine è possibile vedere che il foglio di stile associato alla pagina haannullato la formattazione del tag <strong>, senza cancellare fisicamente il marcatore.In questo modo, i motori di ricerca interpreteranno quelle parole come dei termini conmaggiore rilevanza rispetto al resto del testo

Quando abbiamo parlatodel Page Rank di Google, èstato spiegato che è im-

portante avere dei link verso leproprie pagine. Un buon meto-do per iniziare è quello di in-staurare uno scambio link conpiccoli siti che trattano lo stes-so argomento. In questo modo,

gli utenti che visitano un deter-minato sito, potranno visitareun altro sito in tema: il vantag-gio è ovvio... quando i due sitihanno un numero di utenti pres-socché simile, entrambi potran-no aumentare gli accessi.

Cosa non importante poi,quando lo spider dei motori di

ricerca passerà da uno dei duesiti, automaticamente sche-derà anche l'altro, il che non faaltro che aumentare i vantaggi.

Esistono poi dei servizi chemettono a disposizione dei si-stemi per aumentare gli accessidi un sito: questi sono gli scam-bi banner, scambi link e così via.

Ce ne sono davvero di tutti i gu-sti e Internet, in questo senso, èuna fonte inesauribile di infor-mazioni. Maggiori informazionisu questi sistemi di promozionesono reperibili agli indirizzi:http://www.risorse.net/gratishttp://www.tuttogratis.ithttp://www.freeonline.it

4 Cross promotion: ovvero pubblicità gratuita

87/88

8a lezione

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 farloavrete 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 prossimimesi avrete a disposizione gratuitamente per un mese l’uso di uno spazio di hostingdedicato, oltre ad una serie di altri servizisupplementari.In più, dal momento che per poter usare lo spazio di hosting è necessario disporre di un dominio, i lettori di PC Open inesclusiva 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 Internetwww.register.it/pcopen,inserire il codice seguente: 2c7A4snel box all’interno della pagina e a questo punto verrete inviati alla home

page del sito di Register, da dove leregistrazioni verranno scontate in automaticodel 40%.

Le registrazioni saranno comprensive di tuttoquanto è indicato all’indirizzohttp://we.register.it/domains/allincluded.html.

Per il servizio di supporto inviare le e-mailall’indirizzo [email protected]

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

Un po’ di netiquetteAll'interno dell'articolo, quando abbiamo presentato le pratiche dipromozione da fare e da non fare, abbiamo accennato agli errori incui 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 inavigatori ravvisano come una mancanza di rispetto nei loro confronti.Quindi attenzione allo spam.Una volta che abbiamo aperto il nostro sito Internet, nessuno ci vietadi scrivere un bel messaggio di posta elettronica per avvisare i nostriamici più cari del lavoro appena svolto.Attenzione però a segnalare la nascita del sito solo edesclusivamente ai nostri amici e non a tutte quelle persone cheabbiamo in rubrica o con le quali magari abbiamo appena scambiatodue chiacchiere e delle quali abbiamo il loro indirizzo di posta senzaneanche ricordarci il perché. Quando invece andremo ad attivare i servizi di scambio banner,scambi link e così via, attenzione a distinguere la pubblicità daicontenuti del sito e ancora più importante, non inondare le pagine dipubblicità: massimo due banner a pagina (uno sopra e uno in fondo)e possibilmente, evitate tutti quei servizi che vi aprono nuovefinestre del browser in maniera automatica. I visitatori viringrazieranno.

5 Per chi vuole approfondire: i libri consigliati

Un libro per chi vuole investire nellapubblicità e pensa che Internet possaancora produrre risultati. Una storiadella comunicazione su Internetabbinata a dati oggettivi esuggerimenti per creare un mixintelligenteHops, 399 pagine, 19,90 euro

Uno dei più famosi esperti italiani dipromozione di siti attraverso i motoridi ricerca, spiega le strategie e leregole fondamentali per muoversi inquesto ambito. Una buona letturaper affacciarsi a questo mondo. Apogeo, 159 pagine, 13,43 euro

Saldatura tra management emarketing nella conduzione di un sitoWeb aziendale. L’autore propone unapproccio molto sistematico allavalutazione di efficienza del propriosito e alla sua gestione.Apogeo, 346 pagine, 21,69 euro

Come puntare ai profitti nellacreazione di un sito, visto da un’otticaamericana. Il testo è una guida alleattività essenziali di Web marketing,depurate dai fallimenti e orientate sucasi che hanno raggiunto profittabilità. Apogeo, 334 pagine, 21,69 euro

88/88