Progettazione di un sito web

1
Progettazione di un sito web

• Roberto Pirrone
• Corso di Fondamenti di Informatica
• COM1-COM5 e S.E.C.I.
• a.a. 2004/2005

2
Progetto di un sito web

• La progettazione di un sito web è unattività
  molto complessa perché può essere senza dubbio
  annoverata tra le progettazioni software.
• Essa, a differenza della progettazione di altre
  tipologie di software, comporta la sinergia tra
  professionalità eterogenee
• Esperti di comunicazione
• Esperti di marketing
• Esperti di grafica
• Esperti informatici

3
Progetto di un sito web

• Storicamente i primi siti web erano delle
  realizzazioni puramente informatiche e soffrivano
  della mancanza delle altre professionalità
• Non cera una modellazione dellaudience del sito
• Non cera strategia comunicativa (siti vetrina,
  basta essere su internet per raggiungere una
  moltitudine di utenti )
• La grafica era spartana e tecnologicamente
  scadente
• In molti casi, quindi, un sito web non viene
  progettato dal nulla, ma deve, piuttosto, essere
  ridisegnato rispetto ad una versione precedente.

4
Progetto di un sito web

• Un moderno sito web ha una strutura complessa
  nella quale si possono individuare una parte di
  front-end ed una di back-end.
• Front-end struttura del sito, layout delle
  pagine, codice HTML, script leggeri
  (client-side per elaborazioni secondarie),
  grafica ed elaborazione multimediale.
• Back-end procedure informatiche (normalmente
  server-side) quali autenticazioni, transazioni,
  ricerche su dati, carrello elettronico, etc.

5
Progetto di un sito web

• La descrizione precedente fa emergere,
  essenzialmente, tre aree di progettazione di un
  sito web
• Progetto concettuale e logico
• Progetto grafico
• Progetto informatico di front-end e di back-end
• Tali attività di progetto non sono da vedersi in
  maniera sequenziale, bensì sono intrecciate luna
  allaltra.

6
Progetto concettuale e logico

• Le attività principali di questa attività sono
• Reperimento del materiale testuale e pittorico
• Organizzazione logica del contenuto in unità
  informative auto-consistenti (nodi)
• Eventuale espansione dei nodi complessi in
  agglomerati di nodi più semplici
• Creazione della struttura logica di navigazione
• Creazione della struttura logica e del layout
  (non grafico) delle singole pagine

7
Progetto del layout grafico

• Il progetto grafico di un sito web si articola
  nella scelta dei seguenti elementi che, nel loro
  insieme, costituiscono uno stile
• Palette dei colori di sfondo del testo e dei link
• Font dei caratteri
• Tipologia delle icone
• Layout e colori dei pulsanti
• Gestione delle immagini

8
Progetto informatico

• Questa parte della progettazione riguarda lo
  sviluppo delle applicazioni coinvolte nel
  front-end e nel back-end del sito.
• Essa presuppone, comunque, una fase di
  individuazione precisa delle interazioni (task)
  che andranno svolte attraverso tali applicazioni
  e, quindi, dei percorsi che devono essere
  seguiti, tra una pagina e laltra, per completare
  un certo task.
• Esiste dunque un legame forte con la parte di
  progetto logico del sito che deve, in questo
  caso, servire da specifica iniziale per il
  progetto informatico.

9
Core Process

• Il Core Process è attualmente una delle
  metodologie più seguite per il progetto o per la
  riprogettazione di un sito web.
• Esso è frutto di unelaborazione collettiva di
  alcuni tra i più importanti designer americani ed
  è presentato come un workflow in cinque fasi,
  direttamente orientato al compito della
  riprogettazione.
• Kelly Goto, Emily Cotler, Web ReDesign, Apogeo,
  2002, http//www.web-redesign.com
• Jeffrey Veen, Web Design Arte e Scienza,
  Apogeo 2001, http//veen.com/artsci/
• Jeffery Zeldman, Progettare il web del Futuro
  New Riders 2003, http//www.zeldman.com

10
Core Process

• Definire il progetto
• Esplorazione (audit, identificazione utenza e
  requisiti di programmazione, analisi competitors)
• Pianificazione (di budget, tempistica, modelli di
  lavoro collaborativo, testing e documentazione)
• Chiarificazione (definizione degli obiettivi)
• Sviluppare la struttura del sito
• Contenuti (organizzazione generale,
  strutturazione e tecniche di distribuzione)
• Sito (mappa, definizione convenzioni)
• Pagina (struttura, navigazione, convenzioni sui
  nomi, task interattivi)
• Visual design e testing
• Creazione (prima analisi concettuale del design
  visuale e proposte di layout)
• Convalida (realizzazione del prototipo e
  convalida)
• Applicazione (template grafici, guida di stile)

11
Core Process

• Produzione e controllo qualità
• Revisione (definizione delle linee guida e della
  specifiche di realizzazione, architettura dei
  file e delle cartelle)
• Costruzione (grafica, HTML, scripting, back-end)
• Testing (definizione dei criteri del CQ,
  debugging, verifica)
• Lancio e manutenzione
• Consegna (guida di stile per aggiornamento, doc.
  progetto, addestramento team manutenzione)
• Lancio (campagna pubblicitaria, registrazione sui
  motori di ricerca, upload)
• Manutenzione (piano di manutenzione, misurazione
  risultati, verifica di sicurezza).

12
Fase 1 Definire il progetto Esplorazione

• Raccolta informazioni
• Andranno utilizzati dei questionari per conoscere
  le aspettative del cliente sul sito, le sue
  competenze tecnologiche, la sua capacità di
  mantenere il sito dopo il rilascio. In questa
  fase si raccoglieranno informazioni, attraverso
  qualsiasi fonte aziendale, che possano essere
  utili allo scopo.
• Comprensione audience
• Anche in questo caso si possono mettere a punto
  dei questionari per identificare laudience del
  sito, la sua competenza tecnologica e le risorse
  a sua disposizione (velocità di connessione,
  browser, etc.)

13
Fase 1 Definire il progetto Esplorazione

• Identificazione requisiti di programmazione e
  back-end
• Questionario per verificare la necessità di
  interazioni particolari (motori di ricerca,
  procedure di registrazione, accesso a database,
  etc.
• Analisi competitiva
• Visita dei siti di soggetti analoghi al cliente
  al fine di evidenziare ciò che in essi funziona o
  meno.

14
Fase 1 Definire il progetto Chiarificazione

• Individuazione degli obiettivi strategici
• Riunione mirata a definire i punti chiave su cui
  basare la (ri)progettazione del sito.
• Briefing creativo
• Analogo al precedente, in cui si mettono in
  evidenza gli obiettivi del design visuale e
  comunicativo. Lindividuazione dellaudience è la
  chiave di volta per la determinazione di questo
  tipo di strategie.

15
Fase 1 Definire il progetto Pianificazione

• Definizione del budget
• Bisognerà stimare le risorse necessarie ed il
  loro costo per unità di tempo in modo da allocare
  i tempi necessari a seconda del budget
  complessivo del cliente. Si può ricorrere ad un
  diagramma di Gantt ed a tabelle di calcolo dei
  costi orari/giornalieri.
• Tempistica e scheduling
• Messa a punto di documenti per tener traccia
  delle attività svolte e dei relativi costi.
  Costruzione di calendari, panoramici e di
  dettaglio, per stabilire le scadenze. Il
  calendario panoramico è condiviso con il cliente
  per verificare gli stati di avanzamento.

16
Fase 1 Esempio di diagramma di Gantt
17
Fase 1 Definire il progetto Pianificazione

• Selezione del team di progetto
• Andranno attribuite le varie responsabilità ai
  componenti del gruppo di progetto, tenendo conto
  che più funzioni possono essere svolte dalla
  stessa persona, magari in tempi diversi.
• Aree e strumenti di collaborazione
• Lo sviluppo di un sito web è, in genere, un
  lavoro collaborativo. Bisognerà stabilire delle
  aree comuni in cui inserire i documenti in fase
  di sviluppo. Si consigliano due aree una di
  progetto riservata al team ed una pubblica
  visibile al cliente. È importante stabilire
  secondo quali formati avvengono le comunicazioni
  (flussi di dati) tra i vari gruppi.

18
Fase 1 Definire il progetto Pianificazione

• Strategie di user testing
• In genere esistono diverse possibilità
  compilazione di questionari, focus group con un
  campione rappresentativo dellaudience ovvero
  test di usabilità. Il focus group consente di
  ricavare a priori delle buone indicazioni sulla
  realizzazione. Il test di usabilità ci dice cosa
  funziona e cosa no gli utenti devono svolgere
  dei task di interazione senza avere le
  istruzioni. Se riescono al di sotto di un certo
  numero di errori, allora tutto funziona.
• Documentazione di progetto
• Il formato di tutta la documentazione e le
  convenzioni utilizzate saranno stabiliti a priori.

19
Fase2 Struttura del sito Contenuti

• Organizzazione
• Prima fase di identificazione dei contenuti del
  sito e della loro organizzazione sul piano
  concettuale. Questa operazione va svolta nella
  prospettiva dellutente e, in genere, è meglio
  affidarla ad una risorsa dello staff del cliente.
• Analisi dellesistente
• Ispezione dei contenuti delleventuale vecchio
  sito per filtrare quelli che possono essere utili
  alla nuova struttura del sito. In caso di un
  nuovo sito questa è la fase di reperimento e
  digitalizzazione dei contenuti.

20
Fase2 Struttura del sito Contenuti

• Schematizzazione gerarchica
• Costituzione di un elenco ordinato e strutturato
  in sezioni e sotto-sezioni dei contenuti. Non
  servono direttamente tutti i materiali, ma una
  loro esauriente descrizione.
• Pianificazione del content delivery
• Realizzazione di un workflow per la gestione
  delle modalità di distribuzione dei contenuti di
  tutti i tipi testi, immagini, grafica, materiale
  multimediale, etc. con unassegnazione precisa
  dei compiti. In questa fase si è guidati dalla
  schematizzazione gerarchica e vanno anche
  annotati i contenuti extra, ad es. i messaggi di
  errore su un task interattivo oppure i contenuti
  dei tag ltTITLEgt e ltMETAgt.

21
Fase2 Struttura del sito Sito

• Mappatura
• Definizione di una mappa che illustri la
  navigazione del sito solo da un punto di vista
  logico (senza pensare ai collegamenti di servizio
  quali barre di navigazione). Utilizza la
  gerarchizzazione dei contenuti.
• Analisi dellesistente
• Confronto della mappa progettata con quella del
  sito attuale al fine di verificare che la nuova
  struttura di navigazione soddisfi le specifiche
  espresse nella fase 1.
• Convenzioni
• Verrà individuato uno schema di convenzioni sui
  nomi dei file in modo che tutti i componenti del
  gruppo di progetto lo seguano.

22
Fase2 Esempio di mappa
23
Fase2 Struttura del sito Pagina

• Gabbia concettuale (wireframe)
• Si effettueranno delle schematizzazioni di layout
  di tipo non grafico, in cui si potranno anche
  abbozzare alcune funzionalità da inserire nella
  pagina.
• Navigazione
• Individuazione delle strutture di navigazione
  (barre, pulsanti, menu, link) più adatti agli
  scopi del sito. Lutente deve sempre avere un
  senso di familiarità con tutte le sezioni del
  sito stesso. Esistono diversi modelli
  navigazionali.

24
Fase 2 Esempio di wireframe
25
Modello navigazionale motori di ricerca
26
Modello navigazionale a categorie/canali
27
Modello navigazionale lineare
28
Modello navigazionale ad opzioni
29
Fase2 Struttura del sito Pagina

• Nomenclatura e titoli
• Titoli, etichette, nomi dovranno essere mantenuti
  coerenti, anche dal punto di vista linguistico,
  su tutto il sito. Luso di icone tientra in
  questo tipo di coerenza. Una volta scelta una
  famiglia di icone per indicare delle azioni o dei
  dati, la si dovrà mantenere.
• Task e percorsi interattivi
• Se sono presenti dei task interattivi, è buona
  norma disegnare i wireframe di tutte le pagine
  coinvolte e disporli in sequenza o affiancati in
  modo da suggerire graficamente e con esattezza il
  percorso da seguire durante il task.

30
Fase3 Visual design e Testing Creazione

• Revisione degli obiettivi del briefing
• Semplice riepilogo degli obiettivi comunicativi
  del progetto per avere le specifiche del design
  visuale.
• Brainstorming concettuale
• Preparazione di bozze di layout grafici orientati
  a comunicare gli obiettivi del sito. In questa
  fase si deve tener conto sia delleffettiva
  realizzabilità tecnologica di una soluzione, sia
  delle differenze di visualizzazione su diverse
  piattaforme, sia della semplicità duso da parte
  dellutente (Smart Design).

31
Smart design

• Verifica continua della fattibilità tecnologica
• Uso di una palette di colori web-safe 216 colori
  sui 256 di base (gli altri sono del sistema).
• Fare prove estensive di confronto tra Mac e PC e
  Netscape ed Internet Explorer sia per i colori
  sia per i font di caratteri.
• Mac e PC hanno gamme cromatiche differenti
• Il PC tende a mostrare font più grandi ? usare
  size2
• Determinare con attenzione la risoluzione per una
  visibilità su qualunque monitor 800X600 ?
  760x420.
• Per alte dimensioni si può ricorrere a pagine
  ridimensionabili automaticamente.

32
Fase3 Visual design e Testing Creazione

• Proposta di layout e verifica del feedback
• Le diverse soluzioni verranno presentate
  allutente in forma di prototipi sempre più
  raffinati. Il cliente dovrà concordare e
  certificare la soluzione finale.

33
Fase3 Visual design e Testing Convalida

• Realizzazione del protosito
• Viene realizzato un primo prototipo HTML che
  consente di visualizzare efficacemente i percorsi
  di navigazione ed interazione. Questo sarà la
  base della realizzazione finale.
• Testing funzionale
• Le esigenze particolari di interazione attraverso
  script, frame, pop-up, etc. vanno testate
  estensivamente con vari browser e su differenti
  architetture (Mac e PC).

34
Fase3 Visual design e Testing Applicazione

• Creazione dei template grafici
• Le pagine master del sito, quelle da cui le altre
  mutuano il loro design visuale, devono essere
  completate interamente ad eccezione dei
  contenuti. Questi template saranno utilizzati
  dagli sviluppatori per completare il lavoro.
• Realizzazione di una guida di stile per il design
• Alla fine del design visuale andrà steso un
  documento contenente la codifica di tutti gli
  standard grafici adottati font, colori, titoli,
  etc. In questo modo sarà possibile integrare
  altri contenuti nel sito senza alterarne
  lapparenza visuale.

35
Guida di stile

• Dimensioni della pagina
• Specifica della risoluzione video utilizzata e se
  le pagine sono fisse o ridimensionabili.
• Intestazioni
• Didascalie e commenti per le barre di
  navigazione stile attivo/inattivo, stile dei
  caratteri o delle immagini.
• Colori
• Specifica dei colori per sfondi, testi, link nei
  vari stati, voci di navigazione, pulsanti, etc.
• Testo HTML
• Descrizione del colore, font, dimensioni, stile
  dei link,etc.

36
Guida di stile

• Attributi grafici del testo
• Definizione degli stili del testo, nel caso esso
  sia stato prodotto in forma grafica.
• Trattamento di immagini/foto
• Specificare uso di filtri, ritocchi dei vertici e
  posizionamento allinterno del testo HTML.
• Rifiniture
• Specificare eventuali trattamenti speciali per
  pulsanti, linee, frecce o altri simboli

37
Fase 4 Produzione e CQ Revisione

• Linee guida e specifiche
• Revisione e/o produzione di documenti di
  specifica su tutti gli aspetti implementativi del
  progetto in modo da verificare che si stiano
  ancora seguendo le specifiche originali.
• Stato e condizioni di avanzamento
• Verifica di coerenza delle ore di lavoro e delle
  attività svolte con il budget previsto. Ciò serve
  a capire se si devono aggiungere risorse, se
  qualche compito è stato sottostimato ovvero
  incrementare il budget per venire incontro a
  nuove richieste del cliente.
• Architettura di file e cartelle
• Determinazione di una serie di convenzioni di
  nomenclatura e di struttura per i file e le
  cartelle del sito al fine di garantirne la
  scalabilità.

38
Fase 4 Produzione e CQ Costruzione

• Ottimizzazione della grafica
• Implementazione del design grafico attraverso
  luso di HTML e di file nei formati grafici di
  internet (GIF o JPEG). Un obiettivo di questa
  fase è quello di mantenere contenute le
  dimensioni dei file grafici. Per esempio le
  immagini più grosse vengono sezionate in tasselli
  per agevolare il download.
• Template e pagine master in HTML
• Costruzione di master con tutti gli elementi
  HTML ripetitivi che ricorrono nelle varie pagine
  del sito. Fanno eccezione le interazioni ed i
  contenuti.

39
Fase 4 Produzione e CQ Costruzione

• Realizzazione degli script leggeri
• A questo punto le pagine vanno integrate con
  tutte quelle forme di interazione o animazione
  semplice pop-up, rollover, menu. Di solito si
  ricorre al DHTML o a Javascript.
• Riempimento delle pagine
• Vengono inseriti i contenuti che dovranno già
  essere stati tutti predisposti in formato
  digitale.
• Sviluppo del back-end
• Come ultima fase dello sviluppo si integrano le
  applicazioni di back-end che saranno state
  sviluppate a parte da esperti informatici. Gli
  sviluppatori HTML sapranno dove integrarli perché
  ciò è stato affrontato nella fase 2, a livello di
  singola pagina.

40
Fase 4 Produzione e CQ Testing

• Pianificazione del CQ
• Specifica del livello di test del sito delle
  risorse e del tempo da allocare, in base al piano
  di budget iniziale.
• Monitoraggio della qualità
• Fase di esecuzione del test vero e proprio in cui
  si andranno a verificare tutte le parti del sito
  in ogni loro funzionalità. Si può avere un
  alpha-test interno o un beta-test effettuato
  da un gruppo esterno. Il test può andare da un
  livello informale ad uno formale in cui si
  effettuano anche prove di prestazione basate sul
  carico di utenza e si seguono diversi percorsi di
  interazione su piattaforme differenziate.

41
Fase 4 Produzione e CQ Testing

• Priorità ed esecuzione del debugging
• Si dovrà mantenere traccia di tutti i bug
  rilevati e, in dipendenza dal tempo mancante al
  lancio, si stilerà un ordine di priorità
  nellapportare i correttivi.
• Verifica finale
• Fase di controllo definitivo di tutto linsieme
  di progetto e realizzazione prima del lancio.

42
Fase 5 Lancio e manutenzione Consegna

• Guida di stile per produzione/aggiornamento
• La guida di stile predisposta nella fase 3 deve
  essere integrata con tutto ciò che riguarda lo
  stile e le convenzioni sui nomi adottate per il
  codice HTML prodotto, gli script, i fogli di
  stile e così via.
• Documentazione di progetto
• Si dovrà organizzare tutto il materiale relativo
  alla produzione in forma distribuibile al cliente
  ed al gruppo di manutenzione.
• Archiviazione
• Si dovrà procedere ad una archiviazione
  sistematica di tutto il materiale elettronico e
  cartaceo prodotto sia in fase di progetti sia
  durante limplementazione.

43
Fase 5 Lancio e manutenzione Consegna

• Meeting retrospettivo
• Si consiglia una riunione di chiusura del
  progetto per evidenziare i punti dai quali si è
  imparato qualcosa che sarà utile in lavori
  successivi.
• Training per il team di manutenzione
• Le guide prodotte precedentemente e la
  documentazione di progetto saranno utili per una
  fase di addestramento del gruppo di manutenzione
  sulluso del sito.

44
Fase 5 Lancio e manutenzione Lancio

• Pianificazione dei comunicati
• È unoperazione di marketing in cui si
  stabiliscono le modalità di comunicazione
  allaudience che il nuovo sito sta per andare in
  linea e di richiesta di feedback da parte
  dellutenza stessa.
• Registrazione presso i motori di ricerca
• Si tratta di predisporre accuratamente i tag
  ltMETAgt del sito con le informazioni necessarie
  per una corretta indicizzazione da parte dei
  motori di ricerca.
• Upload
• Da effettuare nelle ore di minimo traffico.
  Predisporre una home page provvisoria da mettere
  in linea durante il caricamento.

45
Indicizzazione dei tag ltTITLEgt e ltMETAgt

• ltTITLEgt
• Per la home page un titolo conciso, ma
  sufficientemente descrittivo del soggetto di cui
  il sito tratta.
• ltMETA NAMEkeyword CONTENTgt
• Parole chiave indicanti i principali servizi e/o
  prodotti offerti
• Parole chiave indicanti il settore industriale o
  dei servizi
• Inserire eventuali termini gergali o specifici
• ltMETA NAMEdescription CONTENTgt
• Breve descrizione (20 30 parole) del soggetto
  di cui il sito tratta
• Nomi del management
• Collocazione geografica
• Contenuti rilevanti del sito per agevolare
  ricerche per chiavi differenti
• Frasi chiave per cercare di coprire tutte le
  possibilità di ricerca
• Inserire i ltMETAgt anche in pagine interne che si
  vuole indicizzare direttamente

46
Fase 5 Lancio e manutenzione Manutenzione

• Team di manutenzione
• Il gruppo di progetto e sviluppo dovrebbe
  individuare i componenti del gruppo di
  manutenzione.
• Piano di manutenzione
• La manutenzione e/o aggiornamento del sito
  (soprattutto per i contenuti) va pianificata
  secondo scadenze ben precise.
• Misurazione dei risultati
• Auditing dellutenza ed analisi delle visite per
  verificare il raggiungimento degli obiettivi di
  progetto.
• Verifica della sicurezza
• Predisporre le attività di controllo per
  monitorare la sicurezza del sito.