ICT4LT MODULO 3.3 LA CREAZIONE DI UN SITO WEB

Indice

Obiettivi

Autore del modulo

1. Come funziona un sito web?

2. HTML

3. Imparare HTML

4. Editore HTML (strumenti autore per il Web)

5. Progetto del sito e della pagina

6. Mettere on-line il proprio sito web

7. Risorse per autori web

8. Studi di casi

Bibliografia e riferimenti

Il modulo è il proseguimento logico del Modulo 1.5 (Introduzione a Internet) e del Modulo 2.3 (Sfruttamento delle risorse della Rete on-line e off-line), che si occupavano del Web principalmente come risorsa e di come poteva essere sfruttato nella classe di lingue. Questo modulo mira a introdurre l'utente al processo di creare pagine web. Include sezioni che analizzano in dettaglio come funzionano i siti web, il linguaggio HTML, gli strumenti autore per il Web e il progetto di un sito. La Sezione 8 comprende vari studi di caso relativi a siti web progettati da insegnanti di lingue.

Si raccomanda che chi si accosta per la prima volta alla creazione per il Web cominci dando un'occhiata a Davies G. (1999), The Internet: write your own Web pages: http://www.camsoftpartners.co.uk/webcreat.htm

Fred Riley, Università di Hull, Regno Unito.

1. Come funziona un sito web?

1.1 Il modello cliente-server

1.1.1 Che cosa? Non si entra nel sistema?

1.2 Software per il server web

In sintesi, un sito web non è altro che una raccolta di documenti, o pagine web, memorizzate su un server, con un punto principale di ingresso (la pagina iniziale) e un indirizzo (URL). I documenti sono scritti in un linguaggio speciale per marcatura chiamato HTML (Hypertext Markup Language), la cui caratteristica più importante è la possibilità di creare collegamenti ipertestuali ad altre pagine web.

Per creare un proprio sito web, bisogna:

• progettare la struttura del sito

• scrivere i documenti in HTML

• trovare un computer connesso alla Rete dove si possano mettere i documenti on-line

• caricare i documenti nel computer.

Ecco tutto. Come sempre, però, i problemi vengono fuori quando meno te lo aspetti. Verranno spiegati più avanti.

1.1. Il modello cliente-server

World Wide Web è basato su un modello cliente-server. Il server è una macchina o un programma in rete che possiede delle risorse (pagine web, dati, software) che passerà ad una macchina o programma cliente su richiesta. Nel caso del Web, i browser sono i clienti che chiedono file dai server della Rete. Quando si clicca su un link in una pagina web o si inserisce un URL nel browser, quest'ultimo manda un messaggio al server chiedendogli di procurare il file il cui indirizzo viene dato nell'URL. Il server manderà quindi una copia del file da mostrare al browser oppure, se non riesce a passare il file - forse perché non esiste o l'accesso è limitato - manda un messaggio di errore.

Per esempio, se si clicca sull'URL http://www.hull.ac.uk/cti/langsite.htm , il browser manda una richiesta al server web installato nel computer (o ospite) all'indirizzo www.hull.ac.uk, chiedendogli di mandare al browser una copia del documento HTML langsite.htm che si trova nella cartella /cti. Quando riceve la richiesta, il server web cerca il file, controlla che esistano i permessi per consentire l'accessibilità al pubblico, quindi manda una copia di langsite.htm al browser, che interpreta il file come file HTML, legge le marcature di HTML nel documento e lo visualizza completamente formattato nella finestra del browser.

E' importante capire che il Web opera sul modello cliente-server, dato l'uso smodato di espressioni quali "entrare in un sito web" che sono fatte circolare nei media quando si parla di Internet. Quando si accede a un sito web, il browser non "entra", ma chiede soltanto una copia di un file o di più file. Una volta che il/i file sono stati inviati, la transazione cliente-server è terminata - conclusa.

Invece, se usate telnet o ftp (si veda il Glossario) per connettervi a un server di Internet, dovete entrare con un nome utente e una password, e viene mantenuta una connessione cliente-server fintantoché non vi scollegate voi o venite scollegati.

Per fungere da server web, un computer ospite deve avere installato un server web, cioè del software che consente al computer in cui è installato (ospite) di servire i file dei siti web ai browser. E' questo software e non il computer ospite che riceve ed elabora le richieste del browser. Ci sono molti pacchetti di server web sul mercato, ma di gran lunga il più comune è Apache (http://www.apache.org), che gira sotto Windows e Unix/Linux e che è software a sorgente aperta e quindi gratuito al pubblico. Si può trovare l'elenco degli altri server da ServerWatch: http://serverwatch.internet.com/webservers.html.

A meno che non vi troviate nell'improbabile situazione di dover impostare un server web da zero, non sarete nella condizione di richiedere e installare software per un server web. Per voi lo fa l'amministratore locale di sistema (sysadmin) o il Fornitore di Servizi Internet (ISP).Tuttavia, vi potreste trovare nella condizione di usare la guida per il server (configurazione del server, istruzioni), in special modo se volete installare caratteristiche particolari quali il riconoscimento dell'utente nel vostro sito web, e quindi può essere importante sapere quale software per il server è in uso e dove si possa reperire documentazione su di esso.

2.1 Cos'è HTML?

2.2 Che cosa sono i tag di HTML?

2.2.1 Come funzionano i tag di HTML?

2.2.2 Formattazione

2.2.3 Attributi

2.2.4 Ancore

2.2.5 Tag standard e tag proprietario

Per creare un sito web, bisogna prima creare delle pagine web in HTML, o HyperText Markup Language. L'HTML non é, come spesso a torto si crede, un linguaggio di programmazione, ma piuttosto un linguaggio per la formattazione del testo. I documenti in HTML sono semplici file di testo (ASCII) con tag di HTML posti all'interno del testo, e questi tag danno istruzioni al browser su come presentare il testo che racchiudono. Per esempio, questo semplice frammento in HTML:

Usando HTML potete produrre testo in grassetto <b>d</b>, <i>in corsivo</i>, e <u> sottolineato </u>; inoltre, potete creare hyperlinks ad altre pagine web, per esempio il sito web <a href="http://www.hull.ac.uk/cti/eurocall.htm"> di EUROCALL</a>.

Appare così quando viene reso da un browser:

Usando HTML potete produrre, testo in grassetto, in corsivo o sottolineato; inoltre, potete creare hyperlinks ad altre pagine web, per esempio al sito web di EUROCALL.

Si potrebbe dire che, effettivamente, HTML è WWW. L'essenza del Web è la connessione ipertestuale, il modo in cui un documento può contenere link verso altri documenti, su un server web locale o remoto, e questa è la caratteristica centrale di HTML; di qui il termine HyperText, parte dell'acrostico HTML.

Suggerimento: Potete visionare il codice HTML di qualsiasi documento visualizzato dal vostro browser scegliendo l'opzione View/Source dal menu del browser. Se sono visualizzati più riquadri, potete far apparire l'origine del documento visualizzato nel riquadro cliccando con il tasto destro del mouse sul riquadro e scegliendo l'opzione View/Source dal menu pop up. Vedere come altri autori hanno redatto le loro pagine web è un aiuto preziosissimo quando si impara a usare HTML.

HTML ha avuto diverse versioni da quando è stato creato nei primi anni 90 (mentre stiamo scrivendo il modulo - maggio 2000 - la versione ufficiale più recente è HTML 4), ed ora include centinaia di tag, molti dei quali hanno degli attributi (o sub-tag, se si vuole). Il tag è un codice racchiuso tra i caratteri < e >, che determina la formattazione del testo successivo finché (di solito) non si trova un tag di chiusura. I tag, normalmente, anche se non sempre, sono a coppie - tag di apertura e tag di chiusura - e il testo racchiuso all'interno di ogni coppia viene formattato di conseguenza. Per esempio,

<b> This is bold text </b> and this is plain

farà apparire il testo

This is bold text and this is plain.

Il tag di apertura <b> ordina "metti in grassetto tutto il testo dopo di me finché non trovi il tag di chiusura", così se non viene scritto il tag di chiusura, errore comune tra gli autori principianti che usano HTML, tutto il testo dopo <b> sarà in grassetto. Il caso dei tag di HTML è irrilevante.

I tag di HTML sono istruzioni al browser su come visualizzare il testo racchiuso tra di essi. Quando un browser legge un documento in HTML, lo analizza per trovare i tag e poi visualizza il testo secondo le loro istruzioni. Ricordate che l'interpretazione dei tags dipende dal browser. Per esempio, il testo racchiuso tra i tag Header 1 (<H1> </H1>) può essere visualizzato in qualsiasi font e dimensioni decise dai creatori del browser. In pratica, i due browser principali allo stato attuale - Netscape Navigator e Internet Explorer - interpretano in modo simile molti tag, ma ci sono differenze rilevanti nel modo in cui ne visualizzano alcuni, per esempio le tabelle, il che molte volte porta gli autori web a strapparsi i capelli per la frustrazione.

Si può applicare un vasta gamma di formattazioni del testo con HTML, sebbene per nulla così vasta come in un'applicazione del word-processor. E' importante ricordare che la formattazione in HTML è molto meno versatile di quella che si trova nelle applicazioni dei word-processor - molti autori restano delusi quando trovano che le pagine fantasiose che hanno realizzato in Word o PageMaker non si trasferiscono in HTML. Si deve ricordare che HTML è stato inventato dagli scienziati del CERN, che erano più preoccupati del contenuto che della presentazione. La situazione ha avuto parziale rimedio con l'introduzione dei Cascading Style Sheets (CSS) nella versione HTML 4 - si veda http://www.w3.org/TR/html4/present/styles.html.

Gli elementi comuni di formattazione usati comprendono:

• Grassetto, corsivo, sottolineato e tracciatura di linee

• Le dimensioni e l'aspetto dei font (sebbene gli autori debbano fare attenzione a usare font che potrebbero non essere presenti nel computer utente)

• Stili dei titoli

• Rientri del margine (blockquote)

• Elenchi puntati e numerati

• Allineamento a sinistra, centrato e a destra

• Tabelle

Si possono anche usare immagini (nei formati GIF o, più comunemente JPEG) nei documenti in HTML, incluse le mappe di immagini, che sono immagini "sensibili" che contengono links caldi, e si può dividere l'area cliente del browser (l'area nella finestra del browser in cui viene visualizzato il documento) in finestre indipendenti o riquadri, ognuno dei quali visualizza un documento diverso in HTML.

Per un elenco completo di elementi HTML, si veda:

Riferimento HTML 4.01 al sito W3C: http://www.w3.org/TR/html4

Riferimento per l'Authoringnel Web: http://www.htmlhelp.com/reference

Guida al Progetto NCD HTML: http://www.ncdesign.org/html/index.htm

Molti tag di HTML hanno degli attributi che ne regolano l'interpretazione: per esempio, nel frammento in HTML: <img src="../images/home01.gif" alt="English homepage" width="40" height="40" border="0">, il tag è img, che visualizza un file di immagine, e i suoi attributi sono src, alt, width, height, border, che regolano dove si deve trovare l'immagine, come deve essere visualizzata e quale testo popup deve apparire quando il mouse passa sopra l'immagine. Questo HTML è tratto dal bottone Home all'inizio della barra di navigazione (degli strumenti web) a sinistra.

Se HTML fosse semplicemente un linguaggio per formattare paragrafi e caratteri, non sarebbe di alcuna utilità da un punto di vista di collegamento in rete. La caratteristica centrale di HTML è la capacità di creare collegamenti ipertestuali ad altri documenti usando i tag ancore <A> e </A>, che definiscono che il testo o l'immagine racchiusa diventi un hyperlink ad un'altra pagina. Per esempio,

This link points to the <a href="http://www.livjm.ac.uk/language/welcome.html">World Languages Pages</a> at <a href="http://cwis.livjm.ac.uk/">Liverpool John Moores University</a>

È reso come

This link points to the World Languages Pages at Liverpool John Moores University.

La coppia di marcatura <a> </a> definisce una sezione di testo che apparirà come hyperlink (di solito sottolineato) nel browser, e l'attributo HREF definisce l'URL a cui è diretto il link.

Sia Netscape che Microsoft hanno creato tag di HTML ed estensioni a tag esistenti, al di fuori dello standard ufficiale HTML che spesso funziona soltanto con un browser particolare e/o con una particolare versione di browser. Per esempio, il tag <MARQUEE> </MARQUEE>, che visualizza il testo in una sbarra che scorre da sinistra a destra (e viceversa), è specifica di Explorer e non ha effetto in Netscape. Può essere una seccatura per l'autore web perché, se la usa, per caso o di proposito, può scoprire che una pagina che risulta bella in, diciamo, Explorer 4, è totalmente confusa o non si carica neppure, in Netscape 3 L'autore web principiante (e, a parere di chi sta scrivendo questo modulo, tutti gli autori web) dovrebbe attenersi ai tag standard di HTML, definiti dal Worldwide Web Consortium (di solito conosciuto come W3C: http://www.w3.org).

3.1 Perché preoccuparsi tanto?

3.2 I tutorial di HTML

3.3 Suggerimenti per imparare HTML

Con il proliferare di WYSIWYG (What You See Is What You Get - ciò che vedi è ciò che ottieni) o parlando con maggiore precisione di Visual, gli strumenti per l'authoring in Web sul mercato, che sostengono di consentire all'utente di creare pagine e siti web senza che veda mai neppure una singolo tag di HTML, molte persone si chiedono perché dovrebbero preoccuparsi tanto per imparare HTML. Se si può creare una pagina web con la semplicità con cui si crea un normale documento con un word-processor, allora sicuramente soltanto i masochisti o i potenziali nerds hanno bisogno di imparare HTML? Ecco alcune semplici risposte alla domanda:

HTML è facile da imparare. Ricordate, HTML non è un linguaggio di programmazione, ma semplicemente un linguaggio per la marcatura di ipertesti, e i tag fondamentali di HTML, e i principi su cui si reggono, sono facili da capire.

Tutti gli autori web talvolta devono editare manualmente HTML. Non importa quanto buono sia lo strumento che state usando per rendere il linguaggio HTML, nessuno è perfetto e di tanto in tanto dovrete "sporcarvi le mani" e editare manualmente HTML per ottenere l'effetto desiderato.

Si scopre cosa succede "sotto sotto". Di regola, è utile sapere come funziona qualsiasi cosa, anche se poi non ci si mette sempre a smanettare.

Si impara cos'è un documento in HTML. Sebbene una pagina di HTML "allo stato puro" appaia complessa e rovina-occhi, non è altro che un documento semplice di testo (ASCII) che, se push came to shove, potreste scriverlo con un semplice editore di testo come Notepad o TeachText.

Si imparate che HTML, e WWW, sono standard internazionali. Questa è forse la ragione più importante. Alcuni strumenti autore per il web, come Front Page della Microsoft, cercano di proposito di intrappolarvi all'interno del loro sistema proprietario, in modo così efficace che molti autori principianti arrivano a pensare che ciò che stanno creando sono documenti in formato proprietario (come i documenti in Word o WordPerfect), che possono venire editati soltanto con lo strumento autore, e non capiscono che sono documenti in HTML normali. Non c'è bisogno di nessuno strumento speciale per scrivere pagine web - gli strumenti autore per il web sono semplicemente dei dispositivi che fanno risparmiare fatica e rendono più semplice il processo di authoring.

Anche se non avete intenzione di usare mai il codice HTML, tuttavia una comprensione di base dei tag di HTML e dei principi di marcatura vi sarà di grandissimo aiuto quando userete un editor Visuale.

Ci sono davvero moltissimi tutorial di HTML disponibili in Rete o sotto forma di libri, certamente più di quanti possano trovare posto in questo modulo. (Cercate "HTML tutorials" in Yahoo! (http://www.yahoo.co.uk) e vedrete a cosa ci riferiamo).

Inoltre, quasi tutti gli editori HTML sono dotati di propri tutorial e riferimenti per i tag .Il problema non è trovare materiale per l'apprendimento di HTML, è trovare del buon materiale. I siti selezionati che seguono contengono dei buoni tutorial amichevoli per l'utente principiante, e non sono pubblicizzati con annunci a tutta pagina né il loro contenuto è pensato per l'e-commerce:

Ci sono anche davvero centinaia di libri sull'argomento, destinati a lettori diversi e quindi scritti con stili diversi. Data l'amplissima selezione di testi disponibili, non possiamo in tutta franchezza raccomandarvi un libro particolare, sebbene se prestiamo orecchio all'aneddotica dei colleghi, vale la pena di dare un'occhiata a HTML for Dummies di Deborah e Eric Ray, pubblicato da Idg Books Worldwide (ISBN 0764503324, sito web: http://www.lanw.com/html4dum/html4dum.htm). Con tutti i tutorial disponibili on-line, alcuni dei quali possono essere scaricati e stampati per una lettura in modalità off-line, non c'è davvero bisogno di acquistare un libro, a meno che non sia il modo per voi più confortevole per imparare.

Non cercare di memorizzare tutti i tag di HTML e i loro attributi. E' un'impresa impossibile, perché ci sono più tag e attributi dei semi di un melograno. Invece, bisogna acquisire dimestichezza con quello che i diversi tag possono fare, e tenere sempre una guida HTML dettagliata sul desktop (fisico o virtuale), in modo che sia possibile, facilmente e velocemente, cercare il tag o l'attributo di cui si ha bisogno. La tabella che segue contiene tre guide che ho trovato utili:

Usare un editore HTML basato su codice mentre si sta imparando. Quando si stanno imparando i fondamenti di HTML, è essenziale che si possa vedere lo stesso HTML, e quindi si dovrebbe usare uno strumento che consenta di farlo, piuttosto che uno strumento WYSIWYG che "protegge" da HTML. Gli editori gratuiti Arachnophilia e 1^st Page vanno benissimo per questo scopo, o se davvero si vuole partire dai fondamenti, si può usare un semplice editore di testo come Notepad (Windows) o TeachText (Macintosh).

Imparare dagli esempi. Se si trova una pagina web che piace, il consiglio è di copiarla sul disco o usare il browser per vedere l'origine HTML, analizzare HTML per vedere come l'autore ha ottenuto l'effetto che piace. E' perfettamente legale e non sono necessarie autorizzazioni: HTML non è coperto dai diritti d'autore né è proprietà di alcuno. Se si copiano i contenuti ideati da qualcuno, ci può essere violazione dei diritti d'autore, ma copiare come sono formattati e presentati i contenuti non costituisce violazione, ed è un metodo di apprendimento di HTML usato da quando WWW ha cominciato ad esistere. Per usare il gergo attuale, lo si intenda come un modo per fare buona pratica.

Andare a vedere l'origine HTML. Con Netscape Navigator lo si può fare scegliendo View/Document Source, e con Microsoft Internet Explorer scegliendo View/Source dalla barra del menù. Se si guarda un sito usando i riquadri, in cui diversi documenti in HTML sono scaricati in "sotto-finestre" della finestra principale del browser, allora scegliendo l'opzione view/source dalla barra del menù, si avrà solo il documento nel riquadro in HTML. Per vedere l'origine di un documento caricato nel riquadro, si deve cliccare con il tasto di destra del mouse in qualsiasi punto del documento e scegliere View Frame Source (Netscape) o View Source (Explorer) dal menù popup che si apre.

4.1 Basati su codice

4.2 Visuali

4.2.1 La scelta del proprio/i strumento/i

Questa sezione si occupa di quelli che a poco a poco vengono conosciuti come strumenti autore per il Web, ma a cui si fa comunemente riferimento ancora come editori HTML. Fondamentalmente sono degli aiuti per lo sviluppo di pagine e siti web, e variano molto in termini di sofisticazione e costi, sebbene alcuni, fortunatamente per i principianti, siano gratuiti. Si deve sottolineare che non c'è bisogno di un editore HTML per scrivere pagine web o sviluppare siti web. Sono strumenti che fanno risparmiare fatica e che velocizzano, spesso notevolmente, lo sviluppo di pagine e siti, ma non sono un prerequisito.

Gli editori HTML possono essere concettualmente suddivisi in due categorie: quelli basati su codice e quelli Visuali (WYSIWYG - ciò che vedi è ciò che ottieni).

Gli strumenti basati su codice consentono all'autore di editare direttamente il codice HTML delle pagine web, cosicché si vede HTML allo stato puro mentre si sta scrivendo e editando documenti. Naturalmente, si può farlo con un semplice editore di testo come Notepad, ma gli strumenti basati su codice includono molte caratteristiche che aiutano l'autore, tra cui:

Codificazione per colore dei tag. Il documento risulta così molto più semplice da leggere che se tutto il testo fosse reso soltanto in nero su bianco, e gli errori si individuano con maggiore facilità. Per esempio, se non è stato chiuso un tag - cioè si è dimenticato di inserire </A> per chiudere un tag ancora - lo si vedrà chiaramente, perché tutto il testo dopo il tag <A> di apertura sarà nello stesso colore.

Inserimento automatico di tag. Premendo un bottone, o usando un "mago", l'autore può inserire serie di tag piuttosto complessi senza dover noiosamente inserirli manualmente. Per esempio, per creare una tabella con HomeSite, si devono specificare le proprietà della tabella (righe, colonne, colore di sfondo, spaziatura tra le celle ecc.) in un dialogo e HomeSite inserisce nel documento la miriade di tag richiesti.

Anteprima di pagina. Premendo un bottone, si può vedere come la pagina apparirà nel browser, sia usando il browser interno dell'editore sia aprendo la pagina corrente con un browser esterno come Netscape.

Sostegno per i "caratteri speciali". HTML ha un'intera serie di codici per assicurare che i "caratteri speciali", inclusi i segni diacritici, siano resi accuratamente da tutti i browser, indipendentemente dalla configurazione linguistica del browser (per esempio, il codice HTML per à è &agrave;), chiaramente importante quando si scrive in lingue che non siano l'inglese.

Consultazione dei tag. Gli editori sono provvisti di guide dettagliate per i tag, essenziali per l'autore web che si basa sul codice.

Nella tabella sono indicati 4 editori gratuiti basati su codice; tra questi chi scrive conosce Arachnophilia e 1^st Page. Inoltre un editore commerciale molto conosciuto e molto usato è HomeSite di Allaire; una versione sperimentale può essere scaricata dal sito di Allaire (http://www.allaire.com) e ora come ora costa meno di $100.

Gli strumenti autore visuali per il Web, o WYSIWYG, consentono di creare pagine e siti web senza codificazioni in HTML. Si inserisce il contenuto nella pagina come lo si fa con un word-processor, e l'editore converte il contenuto in HTML dietro le quinte.

Gli editori visuali sono chiaramente molto attraenti per l'autore principiante, soprattutto se vuole o deve sviluppare un sito web velocemente senza avere il tempo di orientarsi tra i meandri di HTML. Possono essere molto utili anche per l'autore esperto, in particolare quando si accinge a progettare e a disporre graficamente la pagina. E' molto più semplice disegnare una tabella, per esempio, con Dreamweaver e dimensionarla a piacimento trascinando la tabella e i bordi delle celle con il mouse di quanto non lo sia inserire tags per tabelle nel documento con Arachnophilia, regolare la tabella inserendo valori numerici diversi negli attributi del tag per la tabella e premere il bottone Anteprima per vedere l'effetto delle modifiche nel browser esterno. Gli editori visuali spesso propongono progetti di pagine e siti "già pronti", che possono venire adattati a seconda dell'uso e sono molto utili se si ha fretta. L'inserimento di link, immagini, elenchi, tabelle, riquadri e altre caratteristiche delle pagine web è molto facile con gli editori visuali e naturalmente la pagina si presenta senza l'ingombro del codice HTML, faticoso per gli occhi, che distrae dal contenuto, che è ciò a cui è interessato un visitatore del sito.

Gran parte degli editori visuali consentono, se si vuole, di editare direttamente HTML, sebbene si debba dire che alcuni sono più amichevoli di altri su questo punto. L'HTML che gli editori creano varia anche per qualità. Dreamweaver è famoso perché genera HTML "pulito", in conformità con gli standard W3C e senza tag estranei, mentre Front Page crea HTML "sporco", pieno di tag proprietario ed estranei, con il risultato di rendere il documento difficile da editare con un altro pacchetto e di aumentarne le dimensioni, o il "peso", come talvolta si sa.

Il punto forte degli editori visuali è la facilità d'uso. L'autore è protetto dal codice HTML, cosicché in teoria, e a quanto asserito dalla pubblicità, non ha mai bisogno di vedere un tag HTML (in pratica, ogni autore ha bisogno di editare direttamente in HTML una volta o l'altra, indipendentemente dall'efficienza dello strumento visuale). L'autore è così libero di concentrarsi sul contenuto e sul progetto della pagina e del sito e può così, si spera, allestire un sito web più velocemente di un autore che usa uno strumento basato su codice. Questo processo è agevolato da una caratteristica standard molto utile di tutti gli editori visuali, vale a dire il caricamento diretto dei file del sito web sull'accredito web on-line.

Questa facilità d'uso, però, ha dei costi. Gli editori visuali sono molto più costosi degli editori basati su codice (ora come ora Dreamweaver viene venduto a circa £ 200 senza IVA) e molto più esigenti in termini di risorse del computer (Front Page ha bisogno di un minimo di 32Mb di RAM per girare, e non è un'eccezione).

Per quanto ne sappia l'autore del modulo, non vi sono editori visuali gratuiti, sebbene sia possibile ottenere versioni di prova dei pacchetti più famosi sia scaricandole dal sito della casa di produzione (di solito piuttosto pesante) o su CD-ROM, contattando il dipartimento vendite della casa di produzione. I CD-ROM che sono allegati alle riviste di informatica spesso contengono versioni di prova e quindi vale la pena dare un'occhiata alle edicole. Alcuni dei più famosi editori commerciali sono:

Come con tutte le altre applicazioni software, o anche con strumenti fisici, si deve scegliere lo strumento/i adatto sia per sé che per il lavoro che si ha tra le mani. Non si può dire che una applicazione sia sicuramente il migliore pacchetto autore web, in quanto si tratta chiaramente di un giudizio soggettivo. Si può provare a essere oggettivi elencando le caratteristiche di uno strumento, ma solo perché lo strumento fa tutto quello che esiste sotto il sole tranne dar da mangiare al gatto non vuol dire che sia lo strumento più adatto o anche un buon strumento per il lavoro - per fare un esempio estremo, non si ha bisogno di un pacchetto Desk Top Publishing sofisticato per scrivere la lista della spesa. Quando si pensa agli strumenti autore web si capisce che alla fin fine fanno tutti lo stesso lavoro - creano siti web e pagine in HTML - così si dovrebbe scegliere lo strumento con cui ci si sente più a proprio agio.

Non è per dire che non ci siano giudizi concordi tra gli autori web rispetto a quali pacchetti sono migliori di altri. Nella lista di discussione WDVL ( http://www.wdvl.com/WDVL/Forum), un forum per autori web, si parla spesso bene di Dreamweaver della Macromedia, mentre è raro leggere lodi all'indirizzo di Front Page della Microsoft. In ultima analisi, tuttavia, la selezione dello strumento rimane una scelta individuale. Si può anche scoprire, come è successo a molti autori web, che la cosa migliore è la combinazione di più strumenti. Per esempio, si possono usare le potenzialità visuali di Front Page per "disegnare" riquadri e tabelle, regolandone le dimensioni e proprietà finché non diventano come si vogliono, poi si può aggiungere il contenuto al documento con un editore basato su codice.

Mentre il numero di editori HTML continua a proliferare con l'espansione esplosiva di WWW, l'esigenza di recensioni e valutazioni degli strumenti diventa sempre più pressante. Fortunatamente, molte recensioni comparative vengono pubblicate in Rete, e anche se tutte le recensioni sono soggettive, tuttavia costituiscono un utile punto di partenza per un autore web principiante che vuole scegliere il pacchetto più adatto. Buoni punti da cui iniziare per trovare recensioni in Rete sono:

Le recensioni comparative vengono regolarmente pubblicate nelle riviste informatiche più comuni, così è sempre utile dare un'occhiata alle edicole.

5.1 Manuale di stile Yale

5.2 Pagina Iniziale

5.3 Aiuti per la navigazione

5.4 Risorse condivise

Un sito web ben progettato è qualcosa di più di una semplice raccolta di pagine web collegate - è una struttura coerente nella quale si può facilmente navigare e dove l'utente può trovare qualsiasi segmento di contenuto con il minimo sforzo. I siti web, i loro autori, i loro scopi, il loro contenuto e gli utenti target sono così vari che non ci sono regole fisse per la progettazione di un sito, né sagome da seguire per avere la garanzia di realizzare un buon sito.

La sola e unica regola che bisogna rispettare è che si deve progettare il sito prima di scrivere una singola pagina web. Si dovrebbe avere un'immagine chiara, su carta o su schermo, di come deve essere organizzato il sito prima di inserire il contenuto. Non è per dire che il progetto deve essere rigido e immutabile - al contrario, la struttura di un sito web cambierà nel tempo quando verrà aggiunto o rimosso contenuto - ma cominciare a lavorare su un sito senza un'idea chiara di come sarà organizzato è una ricetta per creare un sito che si meriterebbe di essere incluso nell'ignobile sito "Le pagine web che fanno fiasco":

Ci sono, tuttavia, diverse linee guida pratiche e chiare per gli autori web, che vengono elencate dettagliatamente nella "Bibbia" dell'autore web, il Manuale di stile Yale, che contiene istruzioni pratiche e utili su come progettare sito, interfaccia e pagina, ed è il riferimento che tutti gli autori web dovrebbero consultare prima di progettare il proprio sito. Il Manuale è disponibile all'indirizzo: http://info.med.yale.edu/caim/manual/contents.html (il corrispondente nel Regno Unito http://mirrored.ukoln.ac.uk/web-authoring/caim/caim) in formato HTML, e può essere anche scaricato come PDF Adobe Acrobat per la lettura e la stampa in modalità off-line. Si raccomanda caldamente di inserire un segnalibro e/o scaricare il Manuale per averlo a portata di mano mentre si impara come creare il proprio sito web.

Poiché il Manuale Yale è così esauriente e viene usato massicciamente, non raddoppieremo gli sforzi analizzando nel dettaglio in questo modulo le linee guida, ma piuttosto ci concentreremo su alcune linee guida specifiche che è bene ricordare durante il processo di progettazione.

Tutti i siti devono avere una pagina iniziale, cioè il punto principale di ingresso nel sito, idealmente con un URL facile da ricordare come www.mydomain.org (sebbene, in pratica, sia difficile da ottenere). Non deve essere l'unico punto di ingresso nel sito; in realtà, dato il modo in cui i motori di ricerca indicizzano i siti, è piuttosto probabile che gli utenti finiranno per entrare nel sito da un punto che non è la pagina iniziale, ma dovrebbe comunque essere il punto principale di ingresso, l'URL che si deve dare in risposta alla domanda "Dove trovo il tuo sito?". Dovrebbe essere il punto di riferimento del sito, e l'utente deve poter andare alla pagina iniziale da qualsiasi punto del sito con un unico click.

La pagina iniziale deve essere semplice e breve, idealmente così breve che non vi sia bisogno di scorrerla. E' soltanto un punto di ingresso nel sito, e non ha davvero bisogno di molto contenuto. Talvolta, la pagina iniziale è composta soltanto dal logo della società, su cui si clicca per entrare nel sito vero e proprio, sebbene sia un po' troppo minimalista per tutti i gusti. Più spesso, la pagina iniziale consiste nel logo, una breve descrizione - due o tre righe - del sito e link ai punti di accesso alle sezioni importanti del sito. Se si progetta un sito in forma gerarchica, si può pensare alla pagina iniziale come al vertice della gerarchia, contenente link alle pagine di secondo livello. Oppure si potrebbe pensare alla pagina iniziale come ad un "menù di apertura", sebbene questa terminologia sia ormai fuori moda. La pagina iniziale del sito della Open University (http://www.open.ac.uk) è un buon esempio di un punto molto conciso di ingresso nel sito.

Per convenzione, la pagina iniziale è chiamata index.htm o index.html. Sebbene la si possa chiamare come si vuole, molti server web cercano automaticamente un file indice in una cartella, cosicché non è necessario specificare il nome del file nell'URL. Per esempio, l'URL completo della pagina iniziale di ICT4LT è http://www.ict4lt.org/index.html ma il software per il server web (il famosissimo Apache, http://www.apache.org) cercherà un file index.htm o index.html in un sito se nell'URL non viene specificato alcun nome di file. Così, piuttosto che dover indicare index.html nell'URL, possiamo usare semplicemente http://www.ict4lt.org, che significa un URL molto più immediato, facile da ricordare e da digitare.

Un sito nel quale non si può navigare è assolutamente inutile. Un pericolo comune per qualsiasi sistema ipertestuale come il Web, insito nella natura non sequenziale dei sistemi, è quello di "perdersi nell'iperspazio". Dopo pochissimi click ci si trova nella struttura profonda del sistema, a visionare un documento non collegato a quello che si era visionato non appena entrati nel sistema, e se non si hanno punti di riferimento fissi con cui orientarsi ci si può perdere del tutto, e nel caso del Web si può capitare in un sito totalmente non collegato senza saperlo.

Per tutti i siti di più di una pagina, quindi, è essenziale prevedere per l'utente un qualche tipo di aiuto alla navigazione, che consiste, fondamentalmente, in link ai punti di riferimento importanti del sito: almeno alla pagina iniziale, e di solito ai punti di ingresso nelle sezioni del sito. Aiuti alla navigazione più sofisticati possono includere la mappa del sito (che può essere soltanto un file di testo con margine rientrato con i titoli dei documenti, per esempio http://www.hull.ac.uk/cti/langsite/map.htm, oppure un diagramma grafico completo), l'indice e un motore di ricerca nel sito. Comunemente, questi aiuti alla navigazione prendono la forma di "barre di navigazione" poste su uno dei lati della finestra del browser, ma più semplicemente si possono collocare link di riferimento all'inizio o alla fine di ogni documento per aggirare l'esigenza di creare tabelle o riquadri.

Se molte delle pagine web contengono le stesse risorse, come il logo dell'organizzazione o immagini usate comunemente (per esempio, palline blu per i puntini), è consigliabile metterle in un'unica cartella per evitare la duplicazione e rendere così più facile la gestione del sito. E' molto comune creare un cartella di immagini solo per le immagini che devono essere usate nelle pagine del sito e costruire link alle immagini di quella cartella da una qualsiasi altra pagina del sito usando link relativi, come per esempio: <IMG SRC="images/logo.gif">.

Ciò significa che non esistono copie della stessa immagine sparse nel sito, il che non solo fa risparmiare spazio su disco, ma significa che, se l'immagine necessita di modifiche, se ne edita un'unica copia.

6.1 Ottenere un accredito web

6.1.1 Script CGI

6.2 Caricare il sito

6.3 Testare il sito

6.3.1 Validazione di HTML

6.3.2 Sensibilità al contesto

Il sito è stato creato su disco, ma per presentarlo al vasto mondo di WWW deve essere reso disponibile in modalità on-line. Per farlo, bisogna ottenere un accredito web in un computer (ospite) collegato a Internet, su cui gira un server web e poi caricare il sito sull'accredito.

A seconda delle circostanze, ci sono vari modi per ottenere spazio per file su un server web:

Al lavoro. Il datore di lavoro può avere un server web su cui si può far ospitare il sito. E' semplice se lavorate all'università, nel qual caso dovete contattare lo staff tecnico per avere le necessarie informazioni.

Fornitore di Servizi Internet (ISP). Quasi tutti gli ISP ormai danno agli abbonati un accredito web. Per esempio, Netscape On-Line (http://www.netscapeon-line.co.uk) offre agli abbonati 20Mb di spazio su disco.

Fornitori di accredito web gratuito. Esistono centinaia di fornitori di spazio web gratuito (per esempio, Geocities, http://geocities.yahoo.com/home, Tripod http://www.tripod.lycos.com) in Rete che offrono accrediti web gratuitamente. In cambio, si devono sopportare annunci pubblicitari a tutta pagina e/o finestre pubblicitarie nel sito. Un sito molto buono dove si può trovare un fornitore adatto tra la vasta gamma in offerta è l'esplorabile FreeWebspace.net (http://www.freewebspace.net).

DIY (Fai da te): gestire il proprio server. Se si ha un collegamento Internet, sia tramite ISP che tramite il datore di lavoro, allora si può trasformare il computer in un server web. Sebbene il software per server web sia disponibile gratuitamente, e qualche volta sia anche dotato di strumenti autore per il Web (per esempio, Microsoft Front Page viene offerto insieme al Server Web personale della Microsoft), può essere un po' difficile da installare e configurare anche per coloro che sanno cosa stanno facendo; quindi, il percorso Fai da Te non è raccomandabile per coloro che si accostano per la prima volta a un server web, a meno che non siano preparati a passare parecchio tempo a leggere la documentazione. Si deve anche tenere a mente che qualsiasi computer collegato alla Rete corre il rischio di essere penetrato, e quindi se si hanno dati sensibili sul disco fisso, forse è preferibile non usare il computer come server.

Se si vogliono aggiungere caratteristiche interattive al sito, come forme o motori di ricerca, allora probabilmente si devono usare script CGI dalla parte del server- cioè programmi sul server web che elaborano i dati di forma. Se le cose stanno così, bisogna controllare con il fornitore del proprio accredito web di avere una cartella CGI (comunemente definita cgi-bin) a disposizione.

A meno che non sia stato scelto il percorso Fai da Te per ospitare il sito, bisogna ora caricarlo sull'accredito web. Lo si fa usando FTP (Protocollo di Trasferimento File). In un passato non troppo lontano si sarebbero dovuti digitare comandi astrusi, ma oggi si può facilmente entrare in possesso di software FTP che gira in un ambiente a finestre. Molti pacchetti autore per il Web ora incorporano una funzione FTP, così si possono caricare automaticamente i file soltanto premendo un bottone, senza dover usare un'applicazione FTP specifica(talvolta conosciuta come Cliente FTP). E' molto utile quando si vogliono semplicemente caricare file modificati dopo l'ultima revisione del sito.

Se siete abbonati a un ISP, è probabile che abbia procedure amichevoli per caricare il sito. Si deve controllare la documentazione dell'ISP per i dettagli.

Se si deve usare un Cliente FTP per caricare, il Cliente di gran lunga migliore per Windows è WS_FTP LE (http://www.csra.net/junodj/ws_ftp32.htm), che è gratuito per gli utenti non commerciali. Per Macintosh, uno dei clienti più comuni è Fetch (http://www.dartmouth.edu/pages/softdev/fetch.html), che è anch'esso gratuito per gli utenti non commerciali. Tutti e due possono essere scaricati da qualsiasi archivio di software in Internet, come Tucows (http://www.tucows.com) o Simtel (http://www.simtel.net). (I corrispondenti di questi archivi nel Regno Unito sono conservati all'UK Mirror Service della Lancaster University (http://www.mirror.ac.uk), che è un server molto più veloce per gli utenti del Regno Unito).

Un'introduzione al FTP, pratica e amichevole, si trova da HelpWeb: http://www.imaginarylandscape.com/helpweb

E' importante testare il sito sia su disco che in modalità on-line. In particolare, bisogna controllare che:

I link principali nei documenti funzionino

Non si abbiano icone di "immagine rotta", che indicano che non si trova un file di immagine

L'aspetto del documento sia come lo si vuole

Il sito funzioni con tutti i browser (a meno che non sia mirato ad un tipo di browser specifico).

Quasi tutti gli editori HTML ormai hanno un "browser interno", cosicché si può passare da "visione in HTML" a "visione WYSIWYG" e viceversa, che è agevole da usare quando si scrivono delle pagine. Per assicurarsi che le pagine appaiano come le si vuole, tuttavia, bisogna aprirle con browser esterni come Netscape Navigator e Internet Explorere o anche con browser di solo testo come Lynx (http://lynx.browser.org) - è utile, se si vuole che il sito sia accessibile a utenti ipovedenti. Ma la "prova del 9" è testare il sito "live", perché si vede se funziona davvero soltanto caricandolo e mettendolo on-line. Anche autori web esperti ogni tanto scoprono che, per esempio, link che funzionano quando aprono il sito dal disco danno Errore "Not Found" quando girano sul server web. Quindi, anche se il sito funziona perfettamente su disco, si deve caricarlo e testarlo prima di annunciarne l'esistenza per evitare imbarazzi.

Strumenti utili per testare i siti sono i Validatori HTML. Sono programmi su siti web che controllano HTML contro vari standard, per esempio la conformità con gli standard HTML ufficiali, la visionabilità con browser particolari o l'accessibilità per ipovedenti. Alcuni editori HTML incorporano validatori, ma si sta più tranquilli se si controllano le pagine usando validatori on-line, come questi:

Una causa comune di errore quando un sito viene messo on-line è la sensibilità al contesto dei sistemi Unix, dove risiedono quasi tutti i server web. Unix è un sistema operativo, come Windows o Mac OS, ma a differenza di questi è sensibileal contesto. In un sistema Unix, i nomi di file myfile.htm, MYFILE.htm, Myfile.htm, myfile.HTM ecc. sono trattati come file distinti, mentre in Windows sono tutti equivalenti e rappresentano lo stesso file. E' quindi importante mantenere le lettere (maiuscole o minuscole) dei nomi di file e delle cartelle quando si caricano file del sito in un sistema Unix, e assicurarsi che le lettere dei nomi di file usati in un link e negli attributi dei tag siano come quelle del file su disco. Di regola, è una buona idea decidere sin dall'inizio di usare soltanto lettere minuscole per i nomi di file e cartelle.

Infine, in questa sezione del Modulo 3.3, ci accomiateremo da voi con tre risorse utili e esaurienti. Dette anche "one-stop shops" (negozi dove si trova di tutto), che ogni autore web dovrebbe segnarsi, perché coprono tutte le questioni relative alla progettazione, sviluppo e gestione dei siti web, e sono piene di informazioni utili, risorse e tutorial.

Molti insegnanti sono riusciti a venire a patti con gli strumenti autore per il Web. I siti che seguono sono esempi di lavori prodotti da insegnanti della secondaria del Regno Unito:

Anglia Multimedia Ltd & BT plc: Per una lista completa delle scuole del Regno Unito che hanno realizzato i propri siti si veda:
http://www.angliacampus.com/schools

Dudley MFL Resource Centre: Seguire il link a Curriculum Context Training for MFL per idee e risorse scaricabili su come usare un word-processor, DTP software, PowerPoint, Excel, Access, Pinpoint, e Publisher nella classe di lingue straniere. Ci sono anche liste di utili URL. Prodotto dal Dudley Modern Languages Advisory Team: http://www.edu.dudley.gov.uk/mfl

Graveney School, London: Il sito riguarda l'assistenza all'aggiornamento del personale. Date un'occhiata a:
http://schoolsite.edex.net.uk/28/lang/web1.htm

Habergham High School, Burnley: Sito creato e gestito da Stephen Glover, che ne chiama una parte il suo "Sito davvero utile per l'insegnamento del francese". C'è molta roba buona:
http://www.btinternet.com/~s.glover/S.Glover/languagesite/Default.htm

The Howard School, Rainham: Il sito "Bonjour" della scuola, creato e gestito da Stéphane Derône, è ricco di materiali utili per studenti di francese:
http://www.bonjour.org.uk

Llanddulas Primary School, Wales: Una scuola con un sito affascinante, che comprende link a progetti europei:
http://www.conwy11.u-net.com

St Peter’s School, York: Buon esempio di progetto web per le lingue straniere di una scuola secondaria, creato da Clive Hodson.
http://www.rmplc.co.uk/eduweb/sites/stpmlang/index.html

NGfL: Un altro studio di casi si trova al sito della National Grid for Learning:
http://vtc.ngfl.gov.uk/resource/cits/mfl/case/4.html

Davies G.D. (1999) The Internet: write your own Web pages: http://www.camsoftpartners.co.uk/webcreat.htm

Si veda anche la Sezione 7.

Potete inviare il feedback per posta elettronica al coordinatore del progetto ICT4LT, Hamid Momtahan, Thames Valley University, oppure potete completare il modulo on-line per il feedback cliccando su questo link:

Ultimo aggiornamento 24 maggio 2000. Link check by Graham Davies, 18 April 2005.

© ICT4LT Project 2000. I materiali contenuti in questo sito sono soggetti al copyright. Possono essere scaricati, stampati e usati a fini non commerciali in ambiente di insegnamento o formazione. Se i materiali vengono riprodotti in qualsiasi forma interamente o in parte la fonte e gli autori devono essere citati.