Seleziona una pagina

Progettare un sito web

Come avviene la progettazione di un sito web?

Mediante il World Wide Web, o più semplicemente Web, le persone possono trovare e fare molte cose: dalla consultazione dell’orario dei treni, alla prenotazione di un albergo, dalla visione di un telegiornale, alle telefonate da PC a PC, dalla messaggistica alla chat in tempo reale, dalla posta elettronica fino agli acquisti on-line, etc.

Nei primi anni ‘90 il Web era composto solo da poche pagine testuali. Col passare del tempo, il testo è stato arricchito anche di contenuti multimediali: grafica più ricca, animazioni, audio e video. Il contenuto, inizialmente sviluppato e implementato da pochi “tecnici”, e memorizzato in rete su poche migliaia di macchine, ha avuto una crescita esponenziale, come è accaduto anche alle tecnologie che supportavano il tutto.

Man mano che nuovi standard venivano sviluppati e le potenzialità aumentavano, è iniziata anche la partecipazione dell’utente che, anche se non in possesso di grosse conoscenze informatiche, ha iniziato ad arricchire il Web con i propri contenuti d’informazione. Per soddisfare le esigenze sempre crescenti degli utenti sono stati sviluppati i Content Management System (CMS), o “Sistema di gestione dei contenuti” per la pubblicazione sul web.

Il progetto di un sito web è un processo costituito dalle seguenti sei fasi:

  1. Definizione del Progetto
  2. Struttura del Sito
  3. Progetto Visuale
  4. Sviluppo del Sito
  5. Testing
  6. Avvio della Piattaforma

Definizione del Progetto

La definizione di un progetto rappresenta il momento più importante del processo di web design perché in essa si definisce in modo preciso la struttura del progetto.

Definire il progetto significa determinare:

  • gli obiettivi del progetto
  • il pubblico a cui è rivolto
  • gli obiettivi dell’azienda
  • la fonte dei contenuti
  • specifiche tecniche iniziali
  • la strategia di comunicazione

Per fare ciò è utile:

  • Scrivere una breve sintesi del progetto (Brief).
  • Sviluppare il Piano del progetto e le scadenze (Timeline), limite temporale massimo. Definire la timeline per le consegne e le attività per ciascuna fase del progetto.
  • Sviluppare un piano di manutenzione del sito che preveda con quali modalità il sito debba essere aggiornato e rivisto regolarmente.

Struttura del sito

Un buon progetto web è basato sugli obiettivi del sito e sull’utenza target (finale), stabiliti nella sintesi del progetto.

I risultati di questa fase sono:

  1. Descrizione dei contenuti del sito
  2. Diagramma (schema) del sito
  3. Diagrammi di descrizione delle pagine
  4. Wireframes (schema dei macroblocchi del sito)

Descrizione dei contenuti del sito:

  • Creare un elenco dei contenuti
  • Pensare al futuro e a come potrebbe crescere il contenuto del sito.
  • Effettuare una categorizzazione, ovvero una classificazione dei contenuti.

Diagramma (schema) del sito.

A partire dallo schema finale dei contenuti, si crea una mappa del sito (diagramma o site diagram). Il site diagram è una rappresentazione visuale dello schema dei contenuti e della struttura del sito.

sitemap

Diagrammi di descrizione delle pagine.

I diagrammi di descrizione di pagina, detti anche PDD (Page Description Diagrams) sono usati come fase precedente alla creazione dei wireframes o come sostituzione dei wireframes e sono utilizzati per associare un livello di priorità a ciascun blocco di contenuto.

In un diagramma di descrizione della pagina, le aree di contenuto della pagina sono descritte testualmente senza alcun riferimento al layout e al design visivo. Le descrizioni dell’area del contenuto sono disposte sulla pagina in ordine di priorità lungo l’asse orizzontale del diagramma: le aree di contenuto descritte nella parte sinistra della pagina hanno una priorità più alta di quelle nella parte destra della pagina.

Nella descrizione della pagina, dunque, il PDD rispetto al wireframe rimuove completamente il layout.

PDP-Page-Descrip-Diagram

Wireframes (schema dei macroblocchi del sito).

Un wireframe è un layout non grafico di una pagina web. È un semplice schema dei blocchi di informazione e funzionalità per ciascuna pagina del sito. I wireframes comprendono i contenitori per tutti gli elementi più importanti della pagina: la navigazione, le immagini, il contenuto, gli elementi funzionali (come la ricerca) e il footer (fondo pagina). Un esempio di wireframe è riportato nella seguente figura:

wireframe

Progetto Visuale

Sulla base della sintesi del progetto, della mappa del sito e dello schema dei macroblocchi (wireframe) è possibile in questa fase sviluppare un progetto visivo che tenga, ovviamente, conto del marchio (brand), dei requisiti tecnici per la risoluzione dello schermo, della compatibilità dei diversi browser, del tempo standard di caricamento web e dell’accessibilità.

Sviluppo del sito

A questo punto è possibile avviare la creazione del sito sulla base delle seguenti tecnologie:

e tenendo conto delle seguenti specifiche Tecniche target:

  • Browser
  • Sistema Operativo: Mac, Windows, altri.
  • Risoluzione del monitor:
  • Velocità di connessione e dimensione di download della pagina:
    • 30K o minori
    • 30 – 80K (pagina tipica)
    • 80 – 100K (grafica pesante)
    • Oltre 100K (non consigliabile, tranne che tutti gli utenti abbiano una banda larga.

Fase di Testing e Controllo qualità

In questa fase il Sito Web è testato e viene effettuato il controllo della qualità valutando i parametri seguenti:

Contenuto. Verificare che sia accurato, comprensibile, esattezza dell’ortografia, della grammatica

Links. Controllo di integrità dei collegamenti (links) e ricerca dei contenuti obsoleti

Funzionalità. Verificare che il sito svolga le funzioni previste nella definizione del progetto originale

Validazione. Effettuare la validazione del markup dei documenti web in HTML, XHTML, SMIL, MathML e dei fogli di stile CSS;