aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Tecniche di progettazione del sito

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

Esistono tanti modi per progettare un sito quanti sono i progettisti, e i libri in materia di solito riportano sei fasi primarie:

  •  Fase 1: Raccolta delle informazioni
  •  Fase 2: Definizione della stategia
  •  Fase 3: Realizzazione di un prototipo
  •  Fase 4: Implementazione
  •  Fase 5: Lancio
  •  Fase 6: Mantenimento e crescita

L’esperienza degli ultimi anni ha comunque dimostrato che la sequenza è più complessa e che queste fasi ne contengono al loro interno altre che non possono essere trascurate.

Abbiamo quindi definito quattordici fasi reali: raccolta d'informazioni sugli scopi del sito ed eventuale analisi della concorrenza, organizzazione delle informazioni (assemblaggio e sistematizzazione dei contenuti), costruzione di una mappa concettuale del sito (disegno schematico), definizione di un sistema di navigazione, definizione della struttura di pagine e interfaccia, assemblaggio del tutto in una sequenza che “racconti” il sito (storyboard), prototipo di sito navigabile che mostri dal vivo lo storyboard, progetto grafico e multimediale, progetto dinamico che definisca il tipo d’interazione che il sito avrà con l’utente e che stabilisca quali elementi di programmazione sarà necessario aggiungere, incluso l’eventuale collegamento a un database che contenga i dati da visualizzare nelle pagine dinamiche.

Fasi di progettazione Risultato finale
1.Raccolta d'informazioni sugli scopi del sito Concept del sito (sintesi delle varie idee in una singola intenzione)
2. Analisi dell’eventuale concorrenza Misura delle funzioni/servizi minimi che il sito deve offrire
3.Organizzazione delle informazioni Catalogazione e priorità delle informazioni
4. Costruzione della mappa Struttura concettuale del sito
5.Definire un sistema di navigazione Percorsi chiari per arrivare all'informazione, alberazione sito
6. Strutturazione della pagina e dell'interfaccia Posizione stabile per gli elementi di navigazione in rapporto al contenuto
7.Assemblaggio sistematico delle pagine del sito Storyboard (descrizione, pagina per pagina, del contenuto statico e dinamico)
8.Prototipo solo testo Un sito embrionale navigabile che mostri lo storyboard in azione (facoltativo, ma consigliato)
9.Progetto grafico e multimediale Intercaccia grafica che perfeziona la presentazione e navigazione del sito
10. Progetto dinamico Definizione elementi di programma, collegamento eventuale a database, scelta di Publishing System
11. Produzione Template HTML, elementi di programma lato server e client, formattazione contenuti
12. Test Sito esaminato da utenti "veri"
13.Lancio Sito attivo e conoscito grazie alle attività di marketing
14.Mantenimento Sito che cresce nei contenuti e nel traffico

Nel caso in cui la gran parte del sito sia dinamica, questo è il punto in cui scegliere un sistema di publishing (Content Management System), vale a dire un’applicazione che consenta l’inserimento dei contenuti in un database da cui il sito attingerà per produrre automaticamente le varie pagine. Il sistema di publishing permette di caricare e catalogare i vari tipi di contenuto (testo e multimediale) stabilendone anche la validità temporale e la destinazione (dove debbano comparire all’interno del sito). Terminate queste fasi progettuali, si passa alla produzione vera e propria, producendo i template, vale a dire pagina campione, senza contenuti, da cui è possibile produrre molte altre pagine ciascuna con contenuti propri.

Il template è una sorta di “modello” o “stampo” da cui ricavare molte pagine singole che avranno uniformità visiva tra loro. Esiste un template per ogni tipo o “classe” di pagina, vale a dire per ogni variazione nella disposizione e grandezza degli elementi di navigazione e di contenuto.
L’uso di template è consigliato nella produzione di siti statici, poiché consente di mantenere uniformità nell’intero sito, ma diventa indispensabile quando si utilizzano pagine dinamiche il cui contenuto viene prelevato dal database nel momento stesso in cui il navigatore ne faccia richiesta e quindi inserito nel template di riferimento.

L’unione di questi due elementi produce la pagina da inviare a quel particolare navigatore e che cessa di esistere nel momento stesso in cui gli è stata inviata. Qualsiasi altro navigatore ritorni sul sito per chiedere le stesse informazioni, determinerà il ripetersi dell’operazione con la generazione automatica di una nuova pagina.
Di conseguenza, sul sito dinamico, gli unici elementi memorizzati in permanenza saranno proprio i template che, tra l’altro, contengono anche gran parte del codice di programmazione che definisce quali informazioni prendere dal database e come pubblicarle. Tali informazioni sono scritte all’interno del template utilizzando un linguaggio di scripting, ad esempio JavaScript, ASP e ASP.NET, PHP, Cold Fusion e altro ancora.

Nel caso della produzione di un sito dinamico, esiste anche una parte di lavoro progettuale da eseguire sul server, che consiste solitamente nella strutturazione del database che conterrà le informazioni e nella scrittura di automatismi che il server dovrà eseguire quando richiesti dall’interno di una particolare pagina.

Una parte determinante nella fase di produzione prima del lancio è la formattazione dei contenuti, vale a dire la raccolta di tutte le informazioni che dovranno essere presenti sul sito al momento dell’avvio e il loro montaggio all’interno di pagine HTML statiche oppure il loro inserimento e catalogazione all’interno di un server. Spesso si sottovaluta l’impegno richiesto da questa attività, di per sé semplice, ma gravosissima in ragione della grande quantità di elementi che vanno elaborati e dall’impossibilità di averli tutti in un formato omogeneo fin dalla partenza. I contenuti arriveranno infatti dalle fonti più disparate e nelle forme più disparate: anche scritti su carta, da digitare ex novo oppure da disegnare. Molto di questo lavoro, alla fine peserà sul Webmaster, sul Web editor e sul Web designer oppure sull’operatore grafico.

La fase successiva è naturalmente quella di test. È raro che ci sia abbastanza tempo per condurla come si deve, ma è comunque necessaria per mettere alla prova il sistema di navigazione (questo è solitamente il punto in cui il nostro esperto di usabilità entro in gioco) e il sito in generale. Quando si riesce a coinvolgere nel test utenti estranei alle fasi di progettazione, si riesce a mettere in evidenza i classici errori che finirebbero per mandare il tilt il sistema se commessi da un navigatore reale.

Errori che i progettisti non riuscirebbero a riprodurre nemmeno se ci provassero per una settimana. Il test dal vivo permette quindi d’individuare i problemi più seri prima di presentarsi allo scoperto e costituisce un momento critico per il Webmaster poiché gli indica le potenziali aree d’instabilità e gli permette d’intervenire prima che sia troppo tardi.

Il lancio consiste di solito in un’attività frenetica per correggere all’ultimo minuto i difetti riscontrati durante la fase di test e per caricare tutti i contenuti finali prima della partenza ufficiale, di solito accompagnata da una qualche attività di pubblicità.

Segue, infine, la fase di mantenimento dove si correggono al volo gli errori mostrati durante il lancio e si attivano gli strumenti e le procedure per consentire ai gestori del sito di aggiornarlo gradualmente e per mantenere stabile il sito medesimo al crescere del numero dei navigatori. Questa è la fase più delicata di tutte e pesa fortemente sulle spalle del Webmaster a cui viene richiesta grande esperienza nel riconoscere e prevenire eventuali problemi.

Qualsiasi intervento deve essere efficace e rapido, poiché è raro poter fermare il sito per lunghi periodi una volta che lo si è avviato e soprattutto se incontra successo insperato. È necessaria una profonda conoscenza della piattaforma su cui il sito è basato poiché il comportamento dei server cambia drasticamente al variare del carico di lavoro. Elementi chiave in tal senso sono il tipo di server impiegato e il database scelto per l’eventuale attività dinamica. Fa parte dell’attività di mantenimento anche l’adozione di misure di sicurezza che impediscano l’abbattimento o lo sfruttamento del sito da parte di hacker, anche se tale responsabilità non necessariamente pesa sulle spalle del Webmaster.

Tutti i documenti relativi a questo articolo:
Introduzione
Fase 1: raccolta d'informazioni sugli scopi del sito
Fase 2: analisi della concorrenza
Fase 3: organizzazione delle informazioni
Fase 4: costruzione della mappa - gerarchia
Fase 4b: mappa - ipertesto
Fase 4c: mappa - struttura lineare
Fase 5: strumenti di navigazione - URL e cronologia
Fase 5b: strumenti di navigazione - preferiti
Fase 5c: strumenti di navigazione - tasti dedicati e altro
Fase 5d: regole di navigazione
Fase 5e: sistemi di navigazione
Fase 5f: elementi di navigazione
Fase 5g: sistemi di labeling

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
1. Che cosa fa un Webmaster
2. Gli strumenti di lavoro
  1. Editor orientati al testo
  2. Editor visuali semplificati
  3. Ambienti di sviluppo integrati
3. Le altre figure con cui opera
4. Le risorse online
5. Tecniche di progettazione
del sito
  1. Raccolta d'informazioni sul sito
  2. Analisi della concorrenza
  3. Organizzazione delle informazioni
  4. Costruzione della mappa - gerarchia
  4b. Mappa- ipertesto
  4c. Mappa - struttura lineare
  5. Strumenti di navigazione - URL e cronologia
  5b. Strumenti di navigazione
- preferiti
  5c. Strumenti di navigazione
- tasti dedicati e altro
  5d. Regole di navigazione
  5e. Sistemi di navigazione
  5f. Elementi di navigazione
  5g. Sistemi di labeling
6. Definizioni dei termini comuni
7. Esercizi
  1. Riepilogo dei concetti della lezione
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits