Progettazione Di Un Sito Web

7/25/2019 Progettazione Di Un Sito Web

1/46

Dipartimento di Ingegneria

Informatica (DINFO)

Universit degli

Studi di Palermo LaboratorioCSAI

Progettazione di un sito web

Roberto Pirrone

Corso di Fondamenti di Informatica

COM1-COM5 e S.E.C.I.

a.a. 2004/2005


2/46

DINFO Universit di Palermo

Progetto di un sito web

La progettazione di un sito web unattivit molto

complessa perch pu essere senza dubbioannoverata tra le progettazioni software.

Essa, a differenza della progettazione di altretipologie di software, comporta la sinergia traprofessionalit eterogenee:

Esperti di comunicazione

Esperti di marketing

Esperti di grafica

Esperti informatici


3/46



Storicamente i primi siti web erano delle

realizzazioni puramente informatiche e soffrivanodella mancanza delle altre professionalit:

Non cera una modellazione dellaudience del sito

Non cera strategia comunicativa (siti vetrina, basta esseresu internet per raggiungere una moltitudine di utenti )

La grafica era spartana e tecnologicamente scadente

In molti casi, quindi, un sito web non vieneprogettato dal nulla, ma deve, piuttosto, essere

ridisegnato rispetto ad una versione precedente.


4/46



Un moderno sito web ha una strutura

complessa nella quale si possono individuareuna parte di front-end ed una di back-end.

Front-end: struttura del sito, layout delle pagine, codiceHTML, script leggeri (client-side per elaborazionisecondarie), grafica ed elaborazione multimediale.

Back-end: procedure informatiche (normalmente server-side) quali autenticazioni, transazioni, ricerche su dati,carrello elettronico, etc.


5/46



La descrizione precedente fa emergere,

essenzialmente, tre aree di progettazione di unsito 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/46DINFO Universit di Palermo

Progetto concettuale e logico

Le attivit principali di questa attivit sono:

Reperimento del materiale testuale e pittorico

Organizzazione logica del contenuto in unit informativeauto-consistenti (nodi)

Eventuale espansione dei nodi complessi in agglomerati dinodi pi semplici

Creazione della struttura logica di navigazione

Creazione della struttura logica e del layout (non grafico)delle singole pagine



Progetto del layout grafico

Il progetto grafico di un sito web si articola nellascelta 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



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 individuazioneprecisa delle interazioni (task) che andranno svolteattraverso tali applicazioni e, quindi, dei percorsi chedevono essere seguiti, tra una pagina e laltra, percompletare un certo task.

Esiste dunque un legame forte con la parte di progettologico del sito che deve, in questo caso, servire da

specifica iniziale per il progetto informatico.



Core Process

Il Core Process attualmente una delle metodologie pi

seguite per il progetto o per la riprogettazione di un sitoweb.

Esso frutto di unelaborazione collettiva di alcuni tra i piimportanti 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
http://www.web-redesign.com/http://veen.com/artsci/http://www.zeldman.com/http://www.zeldman.com/http://veen.com/artsci/http://www.web-redesign.com/



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 didistribuzione)

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 dilayout)

Convalida (realizzazione del prototipo e convalida)

Applicazione (template grafici, guida di stile)



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 diricerca, upload)

Manutenzione (piano di manutenzione, misurazione risultati,

verifica di sicurezza).



Fase 1: Definire il progetto: Esplorazione

Raccolta informazioni

Andranno utilizzati dei questionari perconoscere le aspettative del cliente sulsito, le sue competenze tecnologiche, lasua capacit di mantenere il sito dopoil rilascio. In questa fase siraccoglieranno informazioni,

attraverso qualsiasi fonte aziendale,che possano essere utili allo scopo.

Comprensione audience

Anche in questo caso si possonomettere a punto dei questionari peridentificare laudience del sito, la suacompetenza tecnologica e le risorse asua disposizione (velocit diconnessione, browser, etc.)


13/46


Fase 1: Definire il progetto: Esplorazione

Identificazione requisiti diprogrammazione e back-end

Questionario per verificare la necessitdi interazioni particolari (motori diricerca, procedure di registrazione,accesso a database, etc.

Analisi competitiva

Visita dei siti di soggetti analoghi alcliente al fine di evidenziare ci che inessi funziona o meno.


14/46


Fase 1: Definire il progetto: Chiarificazione

Individuazione degli obiettivi strategici

Riunione mirata a definire i puntichiave su cui basare la

(ri)progettazione del sito.

Briefing creativo

Analogo al precedente, in cui si

mettono in evidenza gli obiettivi deldesign visuale e comunicativo.Lindividuazione dellaudience lachiave di volta per la determinazione diquesto tipo di strategie.


15/46


Fase 1: Definire il progetto: Pianificazione

Definizione del budget

Bisogner stimare le risorse necessarieed il loro costo per unit di tempo in

modo da allocare i tempi necessari aseconda del budget complessivo delcliente. Si pu ricorrere ad undiagramma di Gantt ed a tabelle di

calcolo dei costi orari/giornalieri.

Tempistica e scheduling

Messa a punto di documenti per tenertraccia delle attivit svolte e dei relativicosti. Costruzione di calendari,panoramici e di dettaglio, per stabilirele scadenze. Il calendario panoramico condiviso con il cliente per verificaregli stati di avanzamento.


16/46


Fase 1: Esempio di diagramma di Gantt


17/46



Selezione del team di progetto

Andranno attribuite le varieresponsabilit ai componenti del

gruppo di progetto, tenendo conto chepi funzioni possono essere svolte dallastessa persona, magari in tempi diversi.

Aree e strumenti di collaborazione

Lo sviluppo di un sito web , in genere,un lavoro collaborativo. Bisognerstabilire delle aree comuni in cuiinserire i documenti in fase di sviluppo.

Si consigliano due aree: una diprogetto riservata al team ed unapubblica visibile al cliente. importante stabilire secondo quali

formati avvengono le comunicazioni(flussi di dati) tra i vari gruppi.


18/46



Strategie di user testing

In genere esistono diverse possibilit:compilazione di questionari, focus

group con un campione rappresentativodellaudience ovvero test di usabilit. Ilfocus group consente di ricavare apriori delle buone indicazioni sulla

realizzazione. Il test di usabilit ci dicecosa funziona e cosa no: gli utentidevono svolgere dei task di interazionesenza avere le istruzioni. Se riescono aldi sotto di un certo numero di errori,allora tutto funziona.

Documentazione di progetto

Il formato di tutta la documentazione e

le convenzioni utilizzate sarannostabiliti a priori.


19/46


Fase2: Struttura del sito: Contenuti

Organizzazione

Prima fase di identificazione dei contenuti delsito e della loro organizzazione sul piano

concettuale. Questa operazione va svolta nellaprospettiva dellutente e, in genere, meglioaffidarla ad una risorsa dello staff del cliente.

Analisi dellesistente

Ispezione dei contenuti delleventuale vecchiosito per filtrare quelli che possono essere utilialla nuova struttura del sito. In caso di un

nuovo sito questa la fase di reperimento edigitalizzazione dei contenuti.


20/46


Fase2: Struttura del sito: Contenuti

Schematizzazione gerarchica

Costituzione di un elenco ordinato e strutturatoin sezioni e sotto-sezioni dei contenuti. Non

servono direttamente tutti i materiali, ma unaloro esauriente descrizione.

Pianificazione del content delivery

Realizzazione di un workflow per la gestionedelle modalit di distribuzione dei contenuti ditutti i tipi: testi, immagini, grafica, materialemultimediale, etc. con unassegnazione precisa

dei compiti. In questa fase si guidati dallaschematizzazione gerarchica e vanno ancheannotati i contenuti extra, ad es. i messaggi dierrore su un task interattivo oppure i contenuti

dei tag e .


21/46


Fase2: Struttura del sito: Sito

Mappatura

Definizione di una mappa che illustri lanavigazione del sito solo da un punto di vista

logico (senza pensare ai collegamenti diservizio quali barre di navigazione). Utilizza lagerarchizzazione dei contenuti.

Analisi dellesistente

Confronto della mappa progettata con quelladel sito attuale al fine di verificare che la nuovastruttura 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 componentidel gruppo di progetto lo seguano.


22/46


Fase2: Esempio di mappa


23/46


Fase2: Struttura del sito: Pagina

Gabbia concettuale (wireframe)

Si effettueranno delle schematizzazioni di layoutdi tipo non grafico, in cui si potranno anche

abbozzare alcune funzionalit da inserire nellapagina.

Navigazione

Individuazione delle strutture di navigazione(barre, pulsanti, menu, link) pi adatti agliscopi del sito. Lutente deve sempre avere unsenso di familiarit con tutte le sezioni del sito

stesso. Esistono diversi modelli navigazionali.


24/46


Fase 2: Esempio di wireframe


25/46


Modello navigazionale motori di ricerca


26/46


Modello navigazionale a categorie/canali


27/46


Modello navigazionale lineare


28/46


Modello navigazionale ad opzioni


29/46


Fase2: Struttura del sito: Pagina

Nomenclatura e titoli

Titoli, etichette, nomi dovranno esseremantenuti coerenti, anche dal punto di vista

linguistico, su tutto il sito. Luso di icone tientrain questo tipo di coerenza. Una volta scelta una

famiglia di icone per indicare delle azioni o deidati, la si dovr mantenere.

Task e percorsi interattivi

Se sono presenti dei task interattivi, buonanorma disegnare i wireframe di tutte le pagine

coinvolte e disporli in sequenza o affiancati inmodo da suggerire graficamente e con esattezzail percorso da seguire durante il task.


30/46


Fase3: Visual design e Testing: Creazione

Revisione degli obiettivi del

briefing

Semplice riepilogo degli obiettivicomunicativi del progetto per avere lespecifiche del design visuale.

Brainstorming concettuale

Preparazione di bozze di layout graficiorientati a comunicare gli obiettivi delsito. In questa fase si deve tener conto sia

delleffettiva realizzabilit tecnologica diuna soluzione, sia delle differenze divisualizzazione su diverse piattaforme,sia della semplicit duso da parte

dellutente (Smart Design).


31/46


Smart design

Verifica continua della fattibilit tecnologica

Uso di una palette di colori web-safe: 216 colori sui 256 dibase (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 size=2

Determinare con attenzione la risoluzione per una visibilitsu qualunque monitor: 800X600 760x420.

Per alte dimensioni si pu ricorrere a pagineridimensionabili automaticamente.


32/46


Fase3: Visual design e Testing: Creazione

Proposta di layout e verifica del

feedback

Le diverse soluzioni verranno presentateallutente in forma di prototipi sempre

pi raffinati. Il cliente dovr concordaree certificare la soluzione finale.


33/46


Fase3: Visual design e Testing: Convalida

Realizzazione del protosito

Viene realizzato un primo prototipo

HTML che consente di visualizzareefficacemente i percorsi di navigazioneed interazione. Questo sar la base dellarealizzazione finale.

Testing funzionale

Le esigenze particolari di interazioneattraverso script, frame, pop-up, etc.

vanno testate estensivamente con varibrowser e su differenti architetture (Mace PC).


34/46


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 adeccezione dei contenuti. Questi templatesaranno utilizzati dagli sviluppatori percompletare il lavoro.

Realizzazione di una guida di stileper il design

Alla fine del design visuale andr steso

un documento contenente la codifica ditutti gli standard grafici adottati: font,colori, titoli, etc. In questo modo sar

possibile integrare altri contenuti nel sitosenza alterarne lapparenza visuale.


35/46


Guida di stile

Dimensioni della pagina

Specifica della risoluzione video utilizzata e se le pagine sonofisse o ridimensionabili.

Intestazioni

Didascalie e commenti per le barre di navigazione: stileattivo/inattivo, stile dei caratteri o delle immagini.

Colori

Specifica dei colori per sfondi, testi, link nei vari stati, voci dinavigazione, pulsanti, etc.

Testo HTML

Descrizione del colore, font, dimensioni, stile dei link,etc.


36/46


Guida di stile

Attributi grafici del testo

Definizione degli stili del testo, nel caso esso sia statoprodotto in forma grafica.

Trattamento di immagini/foto

Specificare uso di filtri, ritocchi dei vertici e posizionamentoallinterno del testo HTML.

Rifiniture

Specificare eventuali trattamenti speciali per pulsanti, linee,frecce o altri simboli


37/46


Fase 4: Produzione e CQ: Revisione

Linee guida e specifiche

Revisione e/o produzione di documenti dispecifica su tutti gli aspetti implementativi del

progetto in modo da verificare che si stianoancora 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 servea capire se si devono aggiungere risorse, sequalche compito stato sottostimato ovveroincrementare il budget per venire incontro a

nuove richieste del cliente.

Architettura di file e cartelle

Determinazione di una serie di convenzioni dinomenclatura e di struttura per i file e le

cartelle del sito al fine di garantirne lascalabilit.


38/46


Fase 4: Produzione e CQ: Costruzione

Ottimizzazione della grafica

Implementazione del design grafico attraversoluso di HTML e di file nei formati grafici di

internet (GIF o JPEG). Un obiettivo di questafase quello di mantenere contenute ledimensioni dei file grafici. Per esempio leimmagini pi grosse vengono sezionate in

tasselli per agevolare il download.

Template e pagine master in HTML

Costruzione di master con tutti gli elementiHTML ripetitivi che ricorrono nelle variepagine del sito. Fanno eccezione le interazionied i contenuti.


39/46


Fase 4: Produzione e CQ: Costruzione

Realizzazione degli script leggeri

A questo punto le pagine vanno integrate contutte quelle forme di interazione o animazione

semplice: pop-up, rollover, menu. Di solito siricorre al DHTML o a Javascript.

Riempimento delle pagine

Vengono inseriti i contenuti che dovranno giessere stati tutti predisposti in formato digitale.

Sviluppo del back-end

Come ultima fase dello sviluppo si integrano leapplicazioni di back-end che saranno statesviluppate a parte da esperti informatici. Glisviluppatori HTML sapranno dove integrarli

perch ci stato affrontato nella fase 2, alivello di singola pagina.


40/46


Fase 4: Produzione e CQ: Testing

Pianificazione del CQ

Specifica del livello di test del sito delle risorsee 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 delsito in ogni loro funzionalit. Si pu avere unalpha-test interno o un beta-testeffettuato da un gruppo esterno. Il test pu

andare da un livello informale ad uno formalein cui si effettuano anche prove di prestazionebasate sul carico di utenza e si seguono diversi

percorsi di interazione su piattaforme

differenziate.


41/46


Fase 4: Produzione e CQ: Testing

Priorit ed esecuzione del debugging

Si dovr mantenere traccia di tutti i bugrilevati e, in dipendenza dal tempo mancante al

lancio, si stiler un ordine di prioritnellapportare i correttivi.

Verifica finale

Fase di controllo definitivo di tutto linsieme diprogetto e realizzazione prima del lancio.


42/46


Fase 5: Lancio e manutenzione: Consegna

Guida di stile perproduzione/aggiornamento

La guida di stile predisposta nella fase 3 deveessere integrata con tutto ci che riguarda lostile e le convenzioni sui nomi adottate per ilcodice HTML prodotto, gli script, i fogli distile e cos via.

Documentazione di progetto

Si dovr organizzare tutto il materiale relativoalla produzione in forma distribuibile al cliente

ed al gruppo di manutenzione.

Archiviazione

Si dovr procedere ad una archiviazionesistematica di tutto il materiale elettronico e

cartaceo prodotto sia in fase di progetti siadurante limplementazione.


43/46


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 lavorisuccessivi.

Training per il team di manutenzione

Le guide prodotte precedentemente e ladocumentazione di progetto saranno utili peruna fase di addestramento del gruppo di

manutenzione sulluso del sito.


44/46


Fase 5: Lancio e manutenzione: Lancio

Pianificazione dei comunicati

unoperazione di marketing in cui sistabiliscono le modalit di comunicazioneallaudience che il nuovo sito sta per andare inlinea e di richiesta di feedback da partedellutenza stessa.

Registrazione presso i motori diricerca

Si tratta di predisporre accuratamente i tag del sito con le informazioni

necessarie per una corretta indicizzazione daparte dei motori di ricerca.

Upload

Da effettuare nelle ore di minimo traffico.

Predisporre una home page provvisoria damettere in linea durante il caricamento.


45/46


Indicizzazione dei tag e

Per la home page un titolo conciso, ma sufficientemente descrittivo delsoggetto di cui il sito tratta.

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

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 anche in pagine interne che si vuole

indicizzare direttamente


46/46

Fase 5: Lancio e manutenzione: Manutenzione

Team di manutenzione

Il gruppo di progetto e sviluppo dovrebbeindividuare i componenti del gruppo dimanutenzione.

Piano di manutenzione

La manutenzione e/o aggiornamento del sito

(soprattutto per i contenuti) va pianificatasecondo scadenze ben precise.

Misurazione dei risultati

Auditing dellutenza ed analisi delle visite per

verificare il raggiungimento degli obiettivi diprogetto.

Verifica della sicurezza

Predisporre le attivit di controllo permonitorare la sicurezza del sito.

Progettazione Di Un Sito Web

Documents

Transcript of Progettazione Di Un Sito Web