Progettazione di siti Web Linee guida per lo sviluppo di un progetto

Transcript

1 Indice Progettazione di siti Web Linee guida per lo sviluppo di un progetto 1. Introduzione 2. La progettazione 3. Raccolta e analisi dei requisiti 4. Progettazione concettuale a) Schema di navigazione b) Layout 1. Componenti funzionali 2. Layout della pagina 3. Grafica 4. Contenuto testuale 5. Progettazione logica a) Obiettivi b) Pagine statiche e pagine dinamiche c) La struttura logica della pagina d) Formattazione delle pagine e) Ciclo di vita di un sito 1. Introduzione La progettazione di siti Web è una disciplina che non ha una fondazione forte né si è sufficientemente consolidata: in sostanza, non può essere attualmente definita come una disciplina Le indicazioni qui riportate vogliono quindi limitarsi a fornire delle linee guida nella definizione delle caratteristiche di un sito; lungi dal dover essere considerate vincolanti in senso assoluto, esse costituiscono degli spunti di riflessione Metodicamente, tali linee guida si basano, da un lato, sull impiego di modelli e procedure di progettazione già collaudate in ambiti analoghi, e, dall altro, su osservazioni empiriche e studi statistici Gli aspetti che verranno considerati riguardano la facilità d uso del sito e come utilizzare le tecnologie disponibili a tal scopo. Non sono tuttavia prese in considerazione tutte quelle funzionalità che richiederebbero l uso di linguaggi di programmazione lato client o lato server, limitando piuttosto l analisi ai linguaggi HTML e CSS. Un punto di partenza Da un punto di vista generale, un sito Web può essere considerato come un medium che veicola un messaggio utilizzando particolari strutture di rappresentazione dell informazione ad es. il modello ipertestuale e lo comunica a un destinatario attraverso un canale es. Internet Nella definizione del messaggio è necessario considerare le caratteristiche del medium utilizzato, quelle del canale attraverso cui è veicolato il messaggio, e quelle del destinatario Il grado di conformità a questi fattori determina l efficacia del messaggio, cioè se e quanto il messaggio formulato dal mittente (chi ha messo in linea il sito Web) sia stato effettivamente ricevuto e compreso dal destinatario. 1

2 Le caratteristiche di un sito Web Un sito Web è un sistema ipertestuale articolato in pagine, che veicola contenuti multimediali codificati utilizzando linguaggi e formati standard e a cui si accede attraverso Internet utilizzando un Web browser Questa definizione fornisce già alcune indicazioni di come il messaggio deve essere rappresentato: Il contenuto deve essere strutturato secondo il modello ipertestuale La compresenza di contenuti multimediali richiede che essi siano integrati in modo equilibrato nell economia delle singole pagine Gli oggetti (cioè i file) che codificano i contenuti devono avere caratteristiche compatibili con quelle del canale (ad es., l ampiezza di banda disponibile) La riproduzione del contenuto deve essere indipendente dal Web browser utilizzato (un sito deve essere visualizzato allo stesso modo in ogni Web browser) 2. La progettazione La progettazione di un sito Web ha per obiettivo garantire l efficacia del messaggio che si vuole comunicare, considerando le caratteristiche del mezzo e del destinatario La progettazione si articola in fasi: Raccolta e analisi dei requisiti: individuazione delle caratteristiche del messaggio, dell utente e degli eventuali requisiti tecnici del sito Progettazione concettuale : definizione della struttura del sito e di come il contenuto è articolato al suo interno, avendo come riferimento il modello ipertestuale Progettazione logica : codifica della struttura, del contenuto e della formattazione delle pagine utilizzando gli strumenti formali disponibili Tali fasi definiscono una procedura che normalmente si sviluppa in modo ciclico, ritornando alle fasi precedenti in modo a correggere e/o integrare la definizione del sito 3. Raccolta e analisi dei requisiti In questa fase devono essere definite le caratteristiche del messaggio e del destinatario Per quanto riguarda il messaggio, devono essere individuate le tipologie di contenuti che vogliono essere veicolati Per quanto riguarda il destinatario, devono essere individuate le attese dell utente e le caratteristiche del canale attraverso cui ha accesso al messaggio Caratteristiche del messaggio Le domande fondamentali a cui si deve rispondere sono: A qual scopo si vuole realizzare il sito: il principio generale è che l obiettivo è di mettere a disposizione pubblicamente informazioni (o risorse). Tuttavia è necessario individuare più precisamente quale sia lo scopo effettivo. Ad es., un sito personale avrà caratteristiche necessariamente diverse rispetto a quello di un organizzazione Quali sono le informazioni/risorse che si vogliono veicolare: la tipologia di informazioni/risorse condiziona notevolmente la struttura e il contenuto di un sito. Ad es., un sito che veicola informazioni codificate in formato testuale 2

3 differisce radicalmente da un sito che veicola informazioni codificate in immagini, video, audio, etc. Quali sono le migliori tecnologie da utilizzare per la codifica del messaggio: si tratta sostanzialmente di verificare se il sito richieda pagine statiche o dinamiche. Caratteristiche del destinatario Le domande fondamentali a cui si deve rispondere sono: Quali sono le attese del destinatario: la tipologia di utente a cui ci si rivolge avrà delle particolari preferenze sul contenuto e su come esso viene rappresentato; è necessario inoltre considerare quali sia il suo tipico approccio cognitivo Quali sono le caratteristiche del canale utilizzato dall utente: per quanto riguarda un sito Web, tale problema riguarda principalmente due fattori: l ampiezza di banda disponibile al destinatario e la piattaforma (sistema operativo + browser) utilizzata dal destinatario per accedere al sito. 4. Progettazione concettuale Fasi della progettazione concettuale È strutturata principalmente in due parti: Definizione dello schema di navigazione Definizione del layout Flow chart Il flow chart non è altro che uno schema del sito basato su una delle tipologie di ipertesti La (quasi) totalità dei siti Web adottano attualmente una struttura ipertestuale gerarchica, in cui i nodi sono strutturati ad albero, a partire da una radice, chiamata usualmente home page. Il motivo per cui tale modello si è imposto è che tale struttura permette un facile orientamento dell utente all interno del sito, grazie alla sua articolazione modulare Allo stesso tempo un albero gerarchico fornisce una chiara strutturazione dello spazio informativo, secondo un passaggio dal generale al particolare, familiare all utente Un esempio di schema di navigazione HOME PAGE PAGINA A PAGINA B PAGINA C PAGINA AA PAGINA AB PAGINA CA PAGINA CAA PAGINA CAB 3

4 La profondità massima di un sito All interno di un sito, la distanza di una pagina si misura nel numero di click necessari per raggiungerla partendo dalla home page Quindi tale distanza è determinata dal numero di nodi da attraversare nella flow chart per raggiungere tale pagina a partire dalla radice dell albero. Ad es., la pagina C.A.A avrà una distanza uguale a 3 La regola aurea è evitare che una pagina sia troppo distante, perché la lunghezza del percorso da seguire per raggiungerla potrebbe impedire che essa venga effettivamente vista Secondo gli studi effettuati nell ambito dell interazione uomo-macchina e degli ipertesti, è stato rilevato che la distanza massima è uguale a 4 i.e., ogni pagina del sito deve essere raggiungibile in 4 click Ciò, in sostanza, significa che la profondità del sito cioè il numero di livelli rappresentato nella flow chart non deve essere superiore a 5. Nel nostro esempio, il sito ha profondità 4, cioè è costituito da 4 livelli (0-3) Tipi di collegamento È importante notare che nello schema non sono rappresentati t u t t i i collegamenti ipertestuali presenti nel sito Nel sito infatti possono essere presenti tre tipologie di collegamenti: verticali: descrivono un percorso in profondità (corrispondente nello schema gerarchico al passaggio dal particolare al generale) orizzontali: che connettono i nodi allo stesso livello (i.e., pagine della stessa sezione vd. più avanti) trasversali: che connettono nodi disposti a livelli più alti o più bassi, spesso determinando dei salti rispetto ai collegamenti verticali A questi collegamenti, che si possono definire interni, si aggiungono inoltre quelli esterni, che fanno riferimento a un sito diverso da quello in cui si sta navigando HOME PAGE? PAGINA A PAGINA B PAGINA C PAGINA AA PAGINA AB PAGINA CA PAGINA CAA PAGINA CAB Collegamento verticale Collegamento orizzontale Collegamento trasversale Collegamento esterno 4

5 Schema di navigazione: cosa rappresentare Lo schema rappresenta normalmente solo i collegamenti verticali Il suo scopo è infatti quello di fornire una chiara rappresentazione del percorso principale di navigazione e della struttura del sito I collegamenti orizzontali, trasversali ed esterni sono eventualmente descritti nel layout Nello schema non sono inoltre necessariamente rappresentate tutte le pagine Il suo scopo è fornire una rappresentazione intuitivamente chiara del sito, non una sua riproduzione dettagliata Quando porzioni del sito si ripetono nella loro struttura, esse vengono omesse, e la loro presenza si può indicare utilizzando i puntini di sospensione Layout Un sito Web (così come ogni sistema ipertestuale) ha due componenti principali: o Elementi funzionali alla navigazione o Contenuto Il layout svolge due funzioni: o Descrive quali contenuti sono presenti nelle singole pagine, e quali strumenti di navigazione sono disponibili o Definisce le caratteristiche che determinano l uniformità delle pagine di un sito, e quelle che le distinguono Per la stesura del layout si segue normalmente una procedura che inizia con definire, in modo dettagliato, le caratteristiche e le componenti che ricorrono in tutte le pagine del sito, quali, ad es.: o Componenti funzionali o Distribuzione e dimensione del contenuto e delle componenti funzionali all interno della pagina o Colori, tipi di carattere e forme, ecc. Una volta definite le caratteristiche comuni a tutte le pagine, vengono descritte quelle che le differenziano La struttura gerarchica adottata consente già di individuare sottoinsiemi di pagine con caratteristiche comuni. Infatti, ogni nodo dell albero costituirà il punto di accesso a una sezione del sito che sarà omogenea dal punto di vista contenutistico Dopo aver definito le caratteristiche generali di tutte le pagine, si passerà quindi a definire quelle delle sezioni, quindi delle sottosezioni, etc. Componenti funzionali Si possono individuare tre principali tipologie di elementi funzionali alla navigazione: o Menu: permette di accedere direttamente alle sezioni di un sito o Intestazione: dichiara l identità del sito ed individua la posizione relativa o assoluta della pagina nella struttura del sito (spesso esplicitando il percorso o da seguire all interno del sito) Logo: oltre a costituire il segno distintivo di ogni sito, potrebbe permettere di ritornare, da ogni pagina, alla home page La scelta e le caratteristiche delle componenti funzionali da utilizzare sono strettamente legate alla struttura del sito 5

6 Oltre al menu vengono utilizzate altre componenti che facilitano il reperimento del contenuto cercato dall utente. Un esempio è costituito dalla possibilità di svolgere una ricerca delle pagine basata su parole chiave, oppure dalla possibilità di percorrere a ritroso il percorso effettuato. Componenti funzionali: menu Permette di accedere direttamente alle sezioni di un sito. A seconda del livello della struttura a cui si riferisce, può essere: o generale: è presente in tutte le pagine di un sito, e permette di accedere alle sue principali sezioni o contestuale: è presente solo nelle pagine della stessa sezione, e permette di accedere alle corrispondenti sottosezioni Il menu generale e sempre presente in un sito. Quello contestuale è utilizzato, di norma, solo se la sezione in cui si trova è articolata in modo complesso Componenti funzionali: intestazione L intestazione può avere una struttura più o meno complessa Nella sua forma base, corrisponde sostanzialmente a un titolo. Aggiuntivamente può integrare, in posizione subordinata, l indicazione del percorso da seguire all interno del sito per raggiungere la pagina corrente Una prassi consigliata è quella di scegliere il titolo della sezione, in base al livello di struttura della pagina Quindi, nella home page, riproduce il nome del sito, mentre in ogni sezione ne riproduce il nome, mentre il logo diventa l elemento che identifica l appartenenza delle pagine allo stesso sito Layout della pagina Nella definizione del layout è necessario tenere in considerazione due fattori: o Lo spazio occupato da ogni componente della pagina (contenuto + elementi per la navigazione) o La posizione, assoluta e relativa, di tali componenti. Il principio generale è che al contenuto deve essere assegnato l 80% dello spazio, mentre il resto deve occuparne il 20% La disposizione delle componenti è subordinata alle normali modalità di lettura, e alla posizione di primo o secondo piano determinata dalla funzione che svolgono Layout della pagina: disposizione delle componenti Normalmente la collocazione delle diverse componenti segue questa distribuzione: o Logo: in alto a sinistra o Intestazione: in alto o Menu: a sinistra, oppure subito sotto l intestazione o Contenuto: tutto lo spazio rimasto libero Tale disposizione riproduce il nostro sistema di scrittura e lettura (dall alto verso il basso da sinistra a destra) A rigore tale disposizione dovrebbe variare per utenti abituati a sistemi di scrittura con orientamento diverso (si pensi, ad es., alle lingue araba ed ebraica) In realtà, l organizzazione del layout basato sul sistema di scrittura/lettura occidentale si è ormai imposta a livello mondiale. 6

7 Un esempio di layout HEADER NAV CONTENT ASIDE FOOTER Layout della pagina: disposizione delle componenti Questa situazione costituisce un esempio tipico di come le abitudini culturali consolidate influiscano sulla forma e l utilizzo di nuovi strumenti È tuttavia opportuno tenere presente che, mano a mano che lo strumento viene assimilato, si verifica un parallelo e graduale adeguamento alle sue caratteristiche. Si pensi ad esempio alla differenza esistente tra i primi siti Web e quelli attuali Conseguentemente, è probabile che l attuale tipica configurazione del layout possa variare Un elemento che ha subito questa evoluzione è il menu, che, in certi casi, viene collocato a destra, cioè dallo stesso lato del mouse (e quindi più vicino a esso a meno che si sia mancini), cioè vicino allo strumento che si utilizza per attivare i collegamenti presenti in una pagina Web Layout della pagina: distribuzione in primo e secondo piano Per quanto riguarda la disposizione sul primo piano, il principio è che l utente deve essere in grado di leggere il contenuto, senza essere percettivamente disturbato dalle altre componenti Quindi: Il contenuto deve essere collocato in primo piano Il resto in secondo piano La distribuzione primo/secondo piano viene attuata secondo un uso appropriato della grafica in particolare, attraverso una studiata combinazione di colori e una scalatura della grandezza dei caratteri. La grafica viene utilizzata inoltre per permettere un riconoscimento intuitivo delle varie componenti della pagina e della loro funzione. Questo aspetto è fondamentale per aumentare la fruibilità del sito, e quindi per assicurare l efficacia del messaggio Grafica La grafica svolge un importante funzione tanto per la struttura di un sito che per la fruibilità del suo contenuto L utilizzo appropriato della grafica permette infatti, già a livello percettivo, di 7

8 comunicare l appartenenza di una pagina allo stesso sito, e di indicare di quale sezione essa fa parte facilitare l individuazione delle componenti funzionali, semplificando la navigazione di aumentare la leggibilità del contenuto testuale Caratteristiche del contenuto testuale Il contenuto testuale deve avere caratteristiche qualitative e quantitative conformi al medium impiegato per veicolarlo In un sito Web, come in ogni sistema ipertestuale, bisogna prediligere brevità e chiarezza Leggendo il testo, l utente deve infatti essere in grado di comprendere immediatamente qual è il contenuto della pagina, e, eventualmente, di sapere in quale sezione del sito o in quale pagina può reperire le informazioni che gli/le servono Estensione del contenuto testuale Una norma a cui spesso ci si attiene (quando possibile) nella stesura del contenuto testuale è che esso deve avere un estensione non superiore allo spazio verticale disponibile (cioè non deve superare il margine inferiore della schermata), questo per evitare che l utente debba far scorrere la pagina verso il basso 5. Progettazione logica Obiettivi della progettazione logica In questa fase si deve tradurre la definizione del sito ottenuta attraverso la progettazione concettuale secondo i modelli su cui si basano le tecnologie che verranno utilizzate per implementarlo Il primo obiettivo è individuare, a partire dalle caratteristiche del sito e del suo destinatario, quali tecnologie utilizzare Successivamente, bisogna definire gli schemi logici da impiegare per l implementazione del sito Pagine statiche e pagine dinamiche Il fattore principale per la scelta delle tecnologie da impiegare è se il sito richiede pagine statiche o dinamiche Una pagina dinamica è una pagina il cui contenuto varia in base a un insieme di parametri In concreto, una pagina statica corrisponde a un file HTML il cui contenuto non viene modificato dal Web server, mentre una pagina dinamica è un file HTML che viene opportunamente generato dal Web server in base a certi parametri, e utilizzando normalmente dei linguaggi di programmazione lato server (ad es. PHP, ASP, ecc.) La struttura logica della pagina Il linguaggio HTML definisce la struttura logica della pagina Per ogni componente della pagina devono quindi essere utilizzati gli elementi HTML appropriati Il primo passo consiste nel definire la griglia in cui verranno collocate le componenti della pagina A tal scopo può essere utilizzato l elemento DIV. 8

9 Formattazione delle pagine La formattazione delle pagine deve essere specificata utilizzando i fogli di stile CSS. Per specificare un foglio di stile ottimale è indispensabile sfruttare opportunamente i costrutti disponibili nel linguaggio CSS, considerando in particolare il principio di ereditarietà La stesura del foglio di stile deve procedere con la specifica delle caratteristiche comuni alla maggior parte degli elementi nella pagina Si passerà quindi a definire le caratteristiche specifiche di ogni elemento Ciclo di vita di un sito Il foglio di stile ha alcune caratteristiche che rendono estremamente facili eventuali modifiche nella formattazione Questi fattori sono importanti soprattutto se si tiene in considerazione che un sito, nel suo ciclo di vita, può subire radicali modifiche Molto spesso, infatti, una variazione quantitativa o qualitativa del contenuto veicolato può richiedere modifiche non solo alla formattazione, ma pure alla sua struttura (ciò che abbiamo anche chiamato schema logico) Usando oculatamente il linguaggio CSS, l aggiornamento della formattazione può essere effettuato con un minimo sforzo; non è così, invece, per la struttura: in certi casi si rende necessaria la (quasi) totale riscrittura del codice HTML È quindi importante, in fase di progettazione, considerare il sito in una prospettiva a lungo termine, in modo da poter definire una struttura flessibile che non richieda interventi radicali per essere adeguata alle nuove esigenze. 9