Progettare un sito

Lezione 1

Progettare il sito

PREMESSA

In questo corso parlo di me stesso, delle ore, giornate, settimane, mesi, anni, che impiego per fare siti web, e non so se augurare a ciascuno di voi di fare altrettanto, perché forse, da un certo punto di vista, non lo augurerei al mio peggiore nemico. D’altra parte, se lo faccio, vuol dire che ho una passione esagerata, forse irrazionale, che mi spinge. Del resto sono convinto che le scelte più importanti della vita, come quella della moglie o del lavoro, abbiano in sé qualcosa di irrazionale, imprevisto e, forse, ineluttabile.

SCOPI PER IMPARARE AD USARE FRONTPAGE

1)  Conoscere il linguaggio di programmazione html, per essere più coscienti delle caratteristiche delle pagine web che si visitano ogni giorno su internet, o le caratteristiche dei giovani di oggi (esempio: i propri alunni) che sono così affascinati e compenetrati con questo linguaggio

2)  fare una presentazione multimediale in html, in modo da poterla visionare su ogni tipo di computer. Infatti tutti i computer hanno un browser, mentre non tutti hanno un programma come power point

3)  cercare uno sbocco alternativo all’insegnamento, nella prospettiva, non così remota, di una perdita del posto di lavoro

4)  esprimere attraverso questo strumento idee e progetti, che non sempre si è in grado di esprimere sulla carta o oralmente

PREMESSA

Finalmente in questo corso posso parlare di quello che più mi affascina del computer: la possibilità di creare. Tutti noi abbiamo una propensione innata alla creatività. LHTML ha dato la possibilità a me e a milioni di altre persone di esprimere questa creatività, che rimane talvolta latente e inespressa, ha fatto sì che linformatica non fosse più una materia per matematici o tecnici, poiché ciò che viene richiesto nel del web non è saper usare gli strumenti, cioè possedere la tecnica, ma avere qualcosa da dire (la tecnica diventa solo uno strumento e non il fine)

PUBBLICAZIONE DEI PROPRI ELABORATI

Scrivere su internet ha il grosso vantaggio che non si ha bisogno di un editore: su Internet possiamo scrivere e pubblicare tutti, senza strettoie e senza ostacoli.

Riguardo ai soldi: il bello è che non devi sborsarne per pubblicare (ad esempio uno spazio gratuito, offerto da tin, fiscali, xoom, digiland, ecc), il brutto è che rischi di sprecare” tantissimo tempo ed energie, senza che questo tuo lavoro” (e di lavoro si tratta) sia riconosciuto da nessuno, a livello economico.

La pagina web è come una canzone

Mi ha sempre colpito una affermazione di Francesco Guccini. A chi gli chiede se le sue canzoni” possono essere definite poesie, egli risponde sempre che sono canzoni”, cioè qualcosa che è diverso dalla poesia, perché non si può scindere il testo dalla musica. Così le pagine web sono testi, ma non solo. In esse l’aspetto grafico è connaturato con la natura del mezzo, e non può essere sottaciuto.

PROGETTARE E’ NECESSARIO

Attenzione: io stesso non ho seguito i criteri che adesso vi sto dicendo per realizzare le mie pagine web. Se adesso potessi rifare le centinaia di pagine che ho fatto sul web, le rifarei in un modo diverso, sia dal punto di vista della grafica, sia da quello dei contenuti. Vale la pena, quindi, per chi incomincia, di programmare bene il lavoro.

Spesso basta un foglio di carta e una penna per progettare la nostra pagina web, il modello da seguire e da mantenere costante per tutte le pagine (infatti un elemento che valorizza le nostre pagine è l’uniformità)

Carta e penna
Può sembrare paradossale, ma all’inizio è necessario munirsi di carta e penna. Il primo impulso sarebbe quello di progettare il nostro sito aprendo un programma, cliccando su un menu o un pulsante. Invece il sito deve essere anzitutto nella nostra testa, e poi, usando appunto carta e penna , può diventare una realtà, fatta di titoli, sottotitoli o tag-line, bottoni, pèulsanti, mappe, ecc

Gif

Le immagini in formato GIF, cioè Graphics Interchange Format sono immagini bitmap, cioè usano punti colorati chiamati pixel, componendole attraverso un mosaico. La memorizzazione avviene attraverso una sorta di database basato su pixel e colori. Le gif dispongono di soli 256 colori (8 bit di colore) e utilizzano un processo pere la compressione delle immagini che le converte in una serie di linee orizzontali a colore e tono continuo sono limitate

Jpg

E’ il formato proposto dal comitato Joint Photographic Experts Group, sono immagini a 24 bit (milioni di colori) ed è stato creato per le immagini che contengono ampie zone di colore a tono continuo. La compressione JPEG è la soluzione ideale per le immagini forografiche, così da ottimizzare i tempi di caricamento delle pagine durante i collegamenti

Grafica vettoriale

Le immagini vettoriali sono create attraverso una combinazione di linee, curve e formule matematiche (es : cabri). La colorazione avviene attraverso il riempimento colorato di linee o aree chiuse, per cui l’immagine risulta più definita e netta ed estremamente leggera in termini di memoria (vedi per esempio le immagini swf cioè generate con flash di macromedia

Alt text

E’ il breve testo che appare quando si passa il mouse su un’immagine e che prende il posto dell’immagine se questa non viene scaricata. Deve essere breve – 40 caratteri al massimo -, informativo e depurato dalle informazioni sulle dimensioni
dell’immagine. Utilissimo per tutte le immagini che trasmettono delle informazioni, potete farne a meno per gli elementi decorativi.
Nel codice HTML l’alt text appare così:

<img
src=”appunti.gif” border=”0″ WIDTH=”87″ HEIGHT=”18″ alt=”appunti“>

Gestione delle cartelle sul vostro computer in locale

Vale la pena di ricordare che, per una serie di motivi , è sempre bene creare molte cartelle e sottocartelle, altrimenti vi troverete, come il sottoscritto, ad avere cartelle strapiene, in cui sitrova di tutto e di più, in modo disordinato e occasionale. Nella cartella roincipale sarebbe meglio lasciare solo il file index, poi fare cartelle come immagini”, foto”, bordi”, gif”, ecc per le risorse grafiche e tante cartelle quante sono le ramificazioni del vostro sito. In ognuna di esse, poi, potrebbe esserci una pagina index.htm. Tenete presente che questo fa sì che si accorcino gli url dei singoli sottositi. Ad esempio per accedere al sito del nostro corso basta digitare www.atuttascuola.it/sito invece di www.atuttascuola.it/sito/index.htm perché il redirectè automatico!

Bordi condivisi
Frontpage ci dà la possibilità di inserire dei bordi comuni a tutte le pagine di un sito web (a condizione di aver creato prima un sito web in locale sul nostro computer). Concettualmente si tratta di qualcosa che è molto simile ad un frame, in quanto la nostra pagina web viene divisa in parti lateralki che restano immutate e parti centraòli che cambiano, ma dal punto di vista pratico c’è una grossa differenza: stavolta i bordi non corrispondono al ALTRI FILE, ma si trovano in ogni file, e quindi ogni volta che passiamo da una pagina all’altra i bordi si caricano di nuovo,insieme con il resto della pagina

Forum

Per poter configurare un forum è necessario avere l’autorizzazione alla scrittura su un database nello spazio hosting che vi è stato offerto. Questo, pertanto, non è possibile con gli spazi gratuiti. La mia esperienza è questa: ho comprato un dominio su aruba, come hanno fatto più di 100.000 webmaster in Italia, a causa del costo basso e dello SPAZIO ILLIMITATO a mia disposizione. Ebbene, è possibile configurare un forum sul proprio sito domiciliato su aruba, in un modo molto semplice. Il forum snitz” può essere inserito nella sua versione inglese (è leggero e rapido, ma povero” di risorse) o nella versione italiana (più lenta a caricarsi, ma ricca di opzioni)

Successo di un forum

Vorrei parlare qui in negativo di me stesso: ho inserito un forum nel mio sito atuttascuola.it, ma, potete andarlo a vedere, anzitutto è troppo lento, poi non ci sono messaggi. Mi illudevo che avere” uno strumento fosse sufficiente per vedere sbocciare discussioni su discussioni. In realtà all’inizio il navigatore viene solo per leggere” su un forum, e poi, solo quando capisce di trovarsi in un luogo interessante, incomincia a parlare in prima persona.

Mailing-list

Ogni webmaster che si rispetti deve avere una sua lista di indirizzi di utenti, cui spedire notizie sulle novità del sito. Direi anche ogni insegnate. La posta elettronica è oggi il mezzo più veloce ed economico per comunicare. Non solo con una singola persona, ma anche con tante persone in una volta sola. Basta un clic e il nostro messaggio parte in tante direzioni per il mondo e arriva a destinazione in pochi minuti. La mia esperienza è questa: è da un po di anni che ho creato mailing-list di alunni. I messaggi non possono sostituire quanto viene detto in classe, ma possono integrare” la spiegazione, ad esempio con l’indicazione di pagine web per l’approfondimento di alcuni argomenti, oppure per ribadire avvisi e compiti importanti, per creare rapporti anche in periodi di malattia ed assenza dal lavoro. Il semplice fatto di ricevere una e-mail dal prof. costituisce per gli studenti qualcosa di nuovo e stimolante.

Comprare un dominio (di secondo livello)

Linvestimento è minimo: io pago 25 euro all’anno per il mio www.atuttascuola.it Effettivamente, per un dominio .it occorre passare dalla Registration Authority italiana, occorre spedire una raccomandata, non si può possedere più di un dominio .it (ma infiniti .org .com .net, ecc). Naturalmente concentrate anche nel nome del dominio l’obiettivo del sito: tagliate tutti gli articoli, optate per il semplice nome se si tratta di un’azienda o di una rivista, non scegliete il vostro se siete un illustre sconosciuto.

Frame non ancorato

Con Frontpage è possibile inserire un frame non ancorato.

I frame non ancorati sono simili a pagine con frame, con la differenza che il frame non ancorato e il relativo contenuto sono incorporati in una pagina Web esistente. In un frame non ancorato è possibile includere qualsiasi elemento inseribile in una normale pagina. Inoltre, i frame non ancorati possono essere personalizzati come qualsiasi altro frame.

Uno dei vantaggi dell’utilizzo dei frame non ancorati è rappresentato dal fatto che non è necessario creare una pagina con frame distinta per incorporarvi il contenuto.

Raccolta di foto

Spesso ci capita di possedere una serie di foto relative ad un evento. Frontpage ci può aiutare a realizzare in modo semplice e veloce una raccolta di foto. Il programma crea automaticamente un’anteprima molto piccola (e leggera da caricare) di ogni nostra foto, cliccando sulla quale sarà poi possibile accedere alla foto in dimensioni originali. Attenzione: possiamo decidere di inserire la nostra raccolta di foto all’interno di una pagina web già esistente, oppure possiamo creare appositamente una pagina web

CSS

CSS: Acronimo di Cascading Style Sheet. Un foglio di stile CSS è un documento che contiene informazioni sullo stile, a cui si può fare riferimento da più pagine Web. Gli stili definiscono l’aspetto e la formattazione del contenuto delle pagine Web e consentono agli autori più controllo sulla visualizzazione del contenuto nei browser. I fogli di stile possono essere esterni o interni

BORDI

Se si imposta un collegamento ipertestuale predefinito per un oggetto grafico, verrà aggiunto automaticamente un bordo attorno ad esso per indicare ai visitatori del sito che è possibile fare clic sull’oggetto grafico, ma è sempre possibile, se vogliamo, rimuovere questo bordo. E’ possibile, però, applicare un bordo a qualsiasi elemento di una pagina web, ad esempio una parola o un paragrafo.

SFONDI

Si possono scegliere come sfondi dei colori o delle immagini. Comunque è sempre preferibile inserire degli sfondi chiari. Nel caso dell’inserimento di un’immagine come sfondo, quest’immagine deve essere il più possibile “leggera”, per evitare rallentamenti nel caricamento di una pagina. L’immagine viene automaticamente ripetuta a partire dalla parte in alto a sinistra della finestra attiva del browser, fino ad occuparla tutta

ANIMAZIONI

Un limite dell’originario linguaggio html era la staticità dello strumento, che non permetteva di realizzare animazioni, come invece era possibile nei programmi che realizzano presentazioni multimediali. Era evidente che, in un mondo in cui è necessario catturare l’attenzione del visitatore, come quello del web, si trovassero soluzioni per ovviare a questa staticità. I ragazzi, ma non solo loro, sono colpiti da un ipertesto non semplicemente se ci sono delle immagini, ma se ci sono anche animazioni

DHTML

Uno strumento per inserire in modo sobrio animazioni per il web è l’HTML dinamico (DHTML). Tramite gli script in DHTML, è possibile applicare effetti di animazione praticamente a qualsiasi elemento della pagina, ovvero testo, paragrafi, immagini, pulsanti, testo scorrevole e così via , quindi associare l’effetto a un “evento di attivazione”, ad esempio il clic del mouse, il passaggio del mouse oppure il caricamento di una pagina.

TRANSIZIONI TRA PAGINE

E’possibile creare effetti speciali da visualizzare quando un visitatore entra o esce dal sito o da una determinata pagina. Applicando effetti di transizione in modo omogeneo e ponderato, è possibile creare presentazioni tipo proiezioni di diapositive con sofisticate transizioni tra le pagine.

STRISCIONI PUBBLICITARI

Uno striscione pubblicitario è una sorta di locandina che ruota su se stessa in una pagina Web. In realtà si tratta di una sequenza a tempo di immagini con un effetto di transizione dall’una all’altra.

Gli autori in genere utilizzano gli striscioni pubblicitari per inserire pubblicità nelle pagine. E’ possibile creare un collegamento ipertestuale dallo striscione pubblicitario al sito Web della società, del prodotto o del servizio pubblicizzato. In alternativa, se si utilizza lo striscione per pubblicizzare una sezione del proprio sito Web, è possibile riferire il collegamento a una delle pagine del sito stesso

PULSANTI ATTIVATI AL PASSAGGIO DEL MOUSE

Creare un pulsante di questo tipo è un pratico sistema per aggiungere effetti animati al sito Web senza dover creare script. Analogamente a un pulsante standard, un pulsante attivato al passaggio del mouse contiene un collegamento ipertestuale a un’altra pagina o a un altro file. Tuttavia, quando un visitatore del sito posiziona il puntatore del mouse o fa clic su un pulsante di questo tipo, il colore apparirà più sfumato, verrà visualizzata un’immagine personalizzata o verrà eseguito un effetto sonoro. E’ inoltre possibile selezionare un’immagine da utilizzare come effetto di un pulsante attivato al passaggio del mouse. Tale immagine verrà visualizzata quando un visitatore posiziona il puntatore del mouse sul pulsante.

TESTO SCORREVOLE

Un testo scorrevole è un messaggio di testo a scorrimento che è possibile personalizzare per ottenere gli effetti desiderati.

Feedback

Potete anche aver fatto un sito bellissimo, con immagini, transizioni e animazioni, ma se manca un ritorno” (in inglese feedback”) la possibilità di interagire e cogliere gli umori dei visitatori del sito il vostro non si potrà chiamare propriamente sito web”

Interattività

L’interattività è l’essenza di Internet. Pubblicare un sito non significa mettere in rete i vostri scritti, ma trovare un nuovo terreno di comunicazione, di confronto e di intesa con chi ha i vostri stessi interessi. Quindi sfruttate a fondo tutte le possibilità di comunicazione che Internet vi offre: forum, e-mail, moduli, questionari, invio di newsletter specializzate, comunicazioni periodiche di aggiornamento del sito o in occasione dell’uscita di nuovi prodotti. Ma non limitatevi a ricevere; rispondete, e velocemente.

Forum

Per poter configurare un forum è necessario avere l’autorizzazione alla scrittura su un database nello spazio hosting che vi è stato offerto. Questo, generalmente, non è possibile con gli spazi gratuiti. La mia esperienza è questa: ho comprato un dominio su aruba, come hanno fatto più di 100.000 webmaster in Italia, a causa del costo basso e dello SPAZIO ILLIMITATO a mia disposizione. Ho poi configurato un forum sul mio sito domiciliato su aruba, in un modo molto semplice. Ho infatti caricato sul mio web prima la versione inglese del forum snitz” (leggero e rapido, ma povero” di risorse) e poi la versione italiana (più lenta a caricarsi, ma ricca di opzioni)

Mailing-list

Ogni webmaster che si rispetti deve avere una sua lista di indirizzi di utenti, cui spedire notizie sulle novità del sito. Direi anche ogni insegnante. La posta elettronica è oggi il mezzo più veloce ed economico per comunicare. Non solo con una singola persona, ma anche con tante persone in una volta sola. Basta un clic e il nostro messaggio parte in tante direzioni per il mondo e arriva a destinazione in pochi minuti. La mia esperienza è questa: è da un po di anni che ho creato mailing-list di alunni. I messaggi non possono sostituire quanto viene detto in classe, ma possono integrare” la spiegazione, ad esempio con l’indicazione di pagine web per l’approfondimento di alcuni argomenti, oppure per ribadire avvisi e compiti importanti, per creare rapporti anche in periodi di malattia ed assenza dal lavoro. Il semplice fatto di ricevere una e-mail dal prof. costituisce per gli studenti qualcosa di nuovo e stimolante.

Spazi gratuiti

Spesso non lo sappiamo, ma abbiamo già a disposizione uno spazio gratuito sul web, che magari non abbiamo mai utilizzato. Questo servizio è offerto dal fornitore del collegamento ad internet (es. tin, tiscali, ecc) oppure è disponibile presso una community, collegata ad un motore di ricerca (es. digiland per gli utenti di libero-infostrada, xoom per gli utenti di Virgilio, tripod per gli utenti lycos, geocities per gli utenti yahoo). Basta seguire le procedure di attivazione e i tutorial on-line per pubblicare il vostro sito.

Spazi a pagamento (dominio di secondo livello)

Arriva un momento in cui conviene fare un salto di qualità e pubblicare il nostro sito su un nostro dominio, perché abbiamo bisogno di maggiore spazio sul web, oppure perché l’url del nostro sito è troppo lungo, o, infine, perché abbiamo bisogno di servizi interattivi (forum, database, ecc) che non possono essere offerti da un hosting gratuito.

Pubblicare tramite frontpage

Anche qui, spesso, possono dare una mano le istruzioni on-line della società che vi ha offerto lo spazio. Si tratta, comunque, di andare nel menu file -> pubblica web, poi occorre digitare l’indirizzo web del vostro sito (ad esempio http://www.atuttascuola.it ) e via via i dati indicati dal vostro fornitore di servizi hosting.

Pubblicare tramite ftp

Questa procedura è sempre valida e ci mette in comunicazione diretta con il server web. Basta scaricare il programma ws_ftp Limited Edition (non la versione Pro, che è shareware), installarlo sul nostro computer, ed inserire nei campi i seguenti dati: un nome profilo (un nome che deve servire a voi per ritrovare il collegamento giusto in mezzo agli altri), l’indirizzo ftp (es. ftp.atuttascuola.it), lusername e la password indicatavi dalla società che vi fornisce lo spazio web

Siti web di carattere didattico

Non c’è una ricetta per creare un sito web di carattere didattico. Fare un sito è come fare un tema, cioè è qualcosa di creativo. Se vogliamo davvero avventurarci in questo campo, ci conviene anzitutto vedere quello che hanno combinato gli altri, navigare concretamente nei siti di carattere didattico, perché niente ci potrebbe far capire meglio come, anche noi, possiamo realizzare un sito web con queste caratteristiche.

indice