La progettazione di un sito web

Analisi dei requisiti I motori di ricerca restituiscono migliaia di link Gli utenti navigano alla ricerca di informazioni, acquisti, giocare, leggere news. Gli utenti vengono trasportati da un sito all’altro attraverso link I siti web devono essere costantemente aggiornati. Creare e gestire un sito web è un processo in continua evoluzione e non una attività che va fatta una sola volta

Analisi del nostro progetto Porsi delle domande: Quale è il Target di utenza Cosa comunicare Come….. …Organizzare il contenuto ….Pubblicarlo …Verificare completezza ….Aggiornarlo ….Pubblicizzarlo Quale Come Cosa

Procedimento «a cascata» Il modello a cascata non si presta bene alla progettazione dei website a causa della necessità di continui aggiornamenti anche radicali

Procedimento «a spirale» Questo modello è quanto di più vicino al ciclo di vita di un sito web

Procedimento «a spirale» Ogni soluzione è un prototipo, nel senso che non è mai definitiva e riceve continui aggiornamenti.

Fase 1 analisi dei requisiti fattibilità

Analisi e fattibilità Insieme al cliente si analizza il problema e le esigenze del cliente per capire quel che egli vuole. Tra le cose da definire abbiamo: Tipo di sito Target d’utenza Messaggio da comunicare

Tipo di sito Siti commerciali : sono siti dove si implementa e- commerce, è importante la vetrina dei prodotti con listini e merce, la sicurezza dei pagamenti. Siti generalisti: (Virgilio, MSN) sono portali da cui gli utenti partono e devono fornire servizi di base (meteo, news veloci, mail, forum) di solito prevedono una gestione tempestiva delle news e l’aggiornamento è fondamentale. Siti specialistici: sono concentrati su alcuni aspetti (luoghi geografici, aree tematiche…) e si rivolgono ad un pubblico più selezionato (ricette, auto d’epoca, giochi medievali, arti antiche….). Per questi siti la cosa che è più importante è il contenuto anche se la gestione di questi contenuti è poco agevole.

Altri vincoli Siti per organizzazioni, aziende, industrie: la soddisfazione soggettiva non conta, il sito deve essere leggero, deve essere facile l’apprendimento di come funziona il sito. Siti per casa, office, divertimento: rivolti al grande pubblico, devono avere facile apprendimento, devono dare soddisfazione soggettiva perché l’utente che si allontana è spesso perso per sempre. Importante è l’assistenza online perché tali utenti sono inesperti, la semplicità e immediatezza, i costi di aggiornamento bassi. Siti per ultra specialisti: è rivolto ad utenti esperti in una specifica materia, hanno frequenza di accesso bassa, si focalizza sui contenuti e non sulle funzionalità del sito.

Altri vincoli Siti statici: le pagine contengono codice html, non sono personalizzate per utenti diversi, possono essere costruti con WEB EDITOR tipo Dreamweaver o NVU,vengono caricati sui server di hosting con programmi FTP. Siti dinamici: l’utente può disporre di pagine ad egli adattate, di funzionalità interattive (registrazione, login, acquisti, forum, chat). Le pagine vengono create dinamicamente da un software (CMS) caricato sul server remoto con il supporto di una base di dati e di un motore per database. Le tecnologie usate sono php, jsp, asp.

Individuare il target di utenza Principianti Navigatori Esperti Utenti internazionali.

Definizione del messaggio

Il progetto

Unità 2 - Lezione 3

Il Visual design (progettazione grafica) Progetto dell’interfaccia grafica verso l’utente. Più importante che per i media tradizionali perché il web richiede interattività. Bisogna rendere facilmente visibili: Informazioni, Link, Paragrafi Tabelle Mappe Conviene rappresentare graficamente i concetti (uso di schemi e disegni).

Il Visual design (progettazione grafica) Non eccedere per non rallentare il transfer-rate. Conviene usare le metafore : Libro = informazioni aggiuntive; Porta= exit Busta= invio informazioni. Usare metafore note e non cambiarle in punti diversi del sito (coerenza / uniformità). Colori: nel descriverli usare la tavolozza dei colori standard valida per i browser.

Da cosa è composta la pagina web Tre aree: Header: contiene i link a tutte le sezioni del sito. Body: contiene le informazioni principali e va formattato in modo eguale per tutte le pagine. Bisogna cioè definire un layout. Footer: contiene informazioni quali: ultima revisione, copyright, pulsanti di navigazione, informazioni generali del sito. Intestazione Corpo della pagina Fondo della pagina

Tre aree: Header: Body: Footer:

Unità 2 - Lezione 4

Sviluppo del sito web Significa progettare le Funzioni interattive la Base di dati. Bisogna fare un primo prototipo a contenuti ridotti.

Bussines object Graphic objects (GO) oggetti grafici/interfaccia: sono i componenti dell’interfaccia: pulsanti, controlli, finestre, bottoni, menù) che permettono di operare sui BO Bussiness Objects (BO) oggetti entità: componenti tramite cui il sistema «funziona» spesso collegati al database. GO  BO1 , BO2 … BO7 Per ogni oggetto entità possono essere previsti più oggetti interfaccia .

Bussines object Per ogni oggetto entità possono essere previsti più oggetti interfaccia . Per esempio possiamo prevedere oggetti interfaccia per: Visualizza, cancella, inserisci elemento nel database Lista elementi nel database Trova elemento nel database Possono riferirsi tutte sullo stesso BO cioè sulla stessa funzionalità del database.

Oggetti interfaccia Il diagramma dei casi d’uso ci aiuta a capire tutti gli oggetti da inserire sull'interfaccia. n.b.: la relazione <<include>> indica che un caso d’uso esiste solo in quanto attivato dal caso d’uso originario. La relazione <<extend>> fornisce una forma di estensione del comportamento di un caso base (login fallito) attivando un altro caso d’uso (registrazione) in certe ipotesi (la registrazione potrebbe attivarsi solo se lo user non è nel database).

Oggetti interfaccia In questo caso devo prevedere 3 oggetti interfaccia per gestire i tre casi d’uso Login Login fallito Registrazione .

Oggetti grafici Ogni oggetto grafico dello stesso tipo (menù, finestre, controlli, bottoni) si distingue dall’altro per: Layout o aspetto BO collegati Eventi collegati

Oggetti grafici Eventi da gestire a livello dell’interfaccia: Operazione ammessa (un messaggio di avviso) Operazione di collegamento (genera altro evento) Operazione di attivazione (attiva la funzione altri oggetti grafici)

Definire la mappa di navigazione Mappa dei percorsi di navigazione A partire dagli scenari disegnati in UML bisogna poi definire la mappa di navigazione. La mappa descrive i percorsi di navigazione tra gli oggetti dell’interfaccia GO ma anche tra gli oggetti entità BO