Appunti del Laboratorio di Tecniche Multimediali
< parte prima >
corso di Laurea in Biologia Facoltà di Scienze M. F. N.
Università degli Studi di Torino a.a. 2003/2004
docente del corso: Cristina Baroglio Testo di riferimento:
Hypermedia and the Web, an engeneering approach, di David Lowe e Wendy Hall, 1999, pubblicato da John Wiley and Sons.
Introduzione
multi-media iper-media
interactive-media
In questo corso parleremo di iper- e multi-medialità, studieremo una metodologia di sviluppo di strumenti interattivi che ricadono in queste categorie e applicheremo le nozioni apprese allo sviluppo di siti web, essendo il web una piattaforma privilegiata per la fruizione di iper- e multi- media.
Il significato dei termini elencati all'inizio di questa introduzione è piuttosto intuitivo, in tutti e tre i casi si descrive uno strumento di comunicazione che differisce dal classico scritto, in modi differenti. Nel caso degli iper-media, la struttura del documento non è lineare ed utenti diversi possono scegliere percorsi di lettura diversi. Si osservi che un iper-media non deve per forza di cose essere in formato elettronico; un esempio è dato dai manuali tecnici: il percorso di lettura di un manuale dipende dal problema che occorre risolvere. Nel caso dei multi-media lo strumento di comunicazione non è limitato al testo ed immagini, suoni, animazioni giocano un ruolo importante.
Infine gli interactive-media possono essere intesi come iper- o multi-media nei
quali assume una posizione centrale l'interazione con l'utente, che spesso assume forme più o meno fantasiose, nelle quali gli oggetti grafici prendono il posto delle parole. Si osservi, tuttavia, che nella parlata comune i tre termini sono spesso utilizzati in modo equivalente, quasi fossero sinonimi, per indicare strumenti di comunicazione fruibili attraverso il web o via CD-rom.
Riassumendo - parleremo di media, cioè di un mezzo e in particolare un mezzo di comunicazione, che ha le seguenti caratteristiche: è interattivo, non ha una struttura lineare, può sfruttare mezzi non testuali per fornire informazione.
Una questione di metodo
Nel corso degli ultimi cinque anni, con la diminuzione dei prezzi dell'hardware e con la diffusione di internet, si è assistito ad un vero e proprio boom dell'area multi-mediale, con conseguente nascita di corsi di ogni tipo ed inventarsi di professionisti aventi le formazioni più disparate (architetti, informatici, letterati, ingegneri, grafici, studenti) ma privi di conoscenza in merito alla metodologia di sviluppo da seguire nella realizzazione.
Per produrre un oggetto iper-/multi-mediale occorrono innanzi tuttometodo, ecapacità di progetto, in secondo luogo conoscenza degli strumenti tecnici che consentono la realizzazione finale. Di norma un prodotto multi-mediale è costruitonon da una singola persona ma da un team di sviluppo formato da professionisti aventi competenze differenti, che si completano a vicenda.
Queste persone devono saper interagire seguendo una linea progettuale precisa.
Ogni metodo fa riferimento ad un modello: ilmodello astratto dell'oggetto in costruzione, che ne cattura la struttura e le componenti. La definizione di queste ultime richiede una sequenza precisa di passi. L'attività di creazione non è però un'attività lineare e durante lo sviluppo di un prodotto iper- mediale è spesso necessario tornare indietro e rivedere le soluzioni prese in fasi precedenti. Chiameremo questo processo nel suo insieme: ingegneria dell'ipermedia. Per ingegneria dell'ipermedia intenderemo quindi quell'insieme di tecniche e di procedimenti che gestiscono tutti gli aspetti del ciclo di vita di un prodotto ipermediale, dal suo concepimento alla sua consegna.
Osservazione: il processo di sviluppo non è identico per ogni prodotto ipermediale, in quanto in parte dipende dalle caratteristiche che vorremmo che il nostro prodotto avesse e dalla piattaforma che ospiterà il prodotto (CD o web, per esempio), però ad un livello di astrazione alto si possono individuare dei passi che si ripetono invariati (es. Analisi funzionale, analisi dell'informazione, analisi di fattibilità, progetto, valutazione, test, ...). Nel caso di ipermedia di cui fruire via web, è importante tener conto della natura distribuita del web (larghezza di banda, analisi degli strumenti tramite cui gli utenti fruiscono dell'informazione), realizzazione di ipermedia multipiattaforma e multibrowser (non si ha il controllo degli utenti: ogni utente
è libero di utilizzare il browser preferito e il sistema operativo preferito, l'ipermedia deve funzionare in una buona varietà di casi) analisi del problema del mantenimento del sito (quanto di frequente devono essere aggiornate le informazioni? Chi aggiornerà le informazioni e il sito?), multi- utenza (i siti sono visti contemporaneamente da molte persone, gli utenti hanno background culturali differenti).
Ipermedia: alcune considerazioni iniziali
La forma più comune per descrivere pensieri, situazioni o altre informazioni ad un'altra persona consiste nel trasformare ciò che intendiamo in parole, eventualmente scritte. Parlare (e scrivere) sono processi nei quali i pensieri vengono linearizzati, ovvero trasformati in una sequenza di senso compiuto, che per essere compresa deve essere tipicamente seguita dalla prima all'ultima parola. Tuttavia il contenuto della nostra mente non è lineare ma associativo (un concetto attiva una serie di altri concetti e così via, collegati da una sorta di rete semantica in continua evoluzione), quindi i processi di scrittura e lettura possono essere visti come codifiche e decodifiche: il primo processo porta alla linearizzazione di quello che nella nostra mente è un pensiero, il secondo interiorizza il significato inteso, integrandolo nella rete di significati contenuta nella nostra mente.
Il processo di scrittura implica quindi la capacità di trasformare in forma lineare un insieme di informazioni che per loro natura sono organizzate in una struttura più complessa. In questo passaggio una parte delle informazioni potrebbe andare persa, inoltre la capacità di sequenzializzare pensieri e discorsi finalizzata a comunicare un certo significato varia da individuo ad individuo.
Anche il passaggio inverso è funzione dell'individuo che espleta la funzionalità di lettura. Non necessariamente la rete di collegamenti che si forma nella mente del lettore è quella intesa dallo scrittore. Da queste osservazioni possiamo derivare considerazioni:
1. la forma lineare per la rappresentazione delle informazioni non sempre è una forma di rappresentazione sufficientemente espressiva dei concetti, che intendiamo comunicare
2. se passiamo ad una forma di rappresentazione non lineare dobbiamo aspettarci che il lettore la esplori secondo un proprio criterio di navigazione
Conclusione1: Un ipermedia è uno strumento di comunicazione avente struttura non (necessariamente) lineare.
Possiamo immaginare un ipermedia come un grafo, costituito da nodi e da archi. I nodi possono avere varia natura (testo, immagini, suoni, elementi interattivi), gli archi -o link- definiscono la struttura e consentono ad un utente di accedere alle diverse informazioni. L'informazione è distribuita fra nodi ed archi. Concettualmente i link possono essere di tipo differente (per esempio mono o bi-direzionali) oppure implicare relazioni di tipo differente. Un esempio di relazione è quella di specializzazione, che indica che il contenuto
del nodo linkato è un'informazione che fornisce un dettaglio più fine relativo al contenuto del nodo attuale. Ad esempio:
Il disegno precedente rappresenta un iper-media costituito da nodi e archi di tipo differente: i diversi colori dei nodi rappresentano visivamente la differente natura dei medesimi, in maniera analoga le diverse rappresentazioni grafiche degli archi codificano relazioni di vario tipo fra i nodi. Nota: colori e forme dell'esempio sono inventati e non corrispondono ad alcuno standard.
Il tipo di applicazioni che considereremo è tuttavia particolarmente semplice in quanto in un sito web i link sono tutti dello stesso tipo: monodirezionali ed equivalenti dal punto di vista funzionale.
Percorsi di navigazione
La figura precedente riporta in forma schematica un generico ipermedia: i cerchi rappresentano i nodi (intesi come unità di informazione) e gli archi i collegamenti (che supponiamo bidirezionali). Supponiamo (con riferimento alla figura successiva) che un utente cominci a leggere l'informazione in esso contenuta a partire dal nodo A. Terminata la lettura di A potrà proseguire con B (non consideriamo per semplicità i salti all'indietro, ovvero a pagine già visitate); terminato B potrà alternativamente proseguire con C oppure D indifferentemente. Da C potrebbe passare a D oppure a E mentre da D potrebbe passare ad E (nel disegno è stato calcato in viola uno dei tre possibili percorsi menzionati).
Questo esempio illustra il fatto che per ogni ipermedia possono essere definiti molti percorsi di lettura anche detti percorsi di navigazione. Un percorso di lettura può contenere salti all'interno della stessa pagina perché in generale vi è differenza fra un nodo e quella che sarà una pagina web: una pagina web può essere il risultato della composizione di più nodi.
Pagine statiche e dinamiche
Il discorso fatto sopra ci consente di distinguiere un elemento concettuale, il nodo , dalla sua presentazione all'utente, che può richiedere fasi intermedie di elaborazione; è sempre più frequente, fra l'altro, il caso in cui le pagine web sono costruite all'atto della consultazione, estraendo e componendo materiale conservato in un data base (banca dati):
Possiamo immaginare che NODO1 (ad es. Un'immagine) e NODO2 (una descrizione testuale) siano stati estratti da una banca dati e composti da un programma (indicato dalla freccia rossa), che ha prodotto come risultato una pagina web, poi inviata al browser `richiedente'. Le pagine costruite in questo modo sono comunemente dette pagine dinamiche, in contrapposizione a quelle di contenuto fisso dette pagine statiche. Per esempio tutte le pagine prodotte come risultato dell'interrogazione di un motore di ricerca (google, altavista, lycos, yahoo, virgilio, ...) sono pagine dinamiche.
Considerazioni finali:
1. parte della struttura dell'ipermedia dipende dalla struttura naturale dell'informazione, parte dallo scopo per cui intendiamo esplicitarla, parte dagli utente ai quali ci si rivolge, parte alle caratteristiche tecniche del supporto utilizzato, parte da scelte artistiche
2. su di uno stesso ipermedia possiamo leggere/imporre diverse strutture (ad esempio si consideri un libro, strutturato in una sequenza di capitoli ma contenente un indice e un indice analitico)
3. lo scopo primario è consentire a un utente di ottenere l'informazione cercata nella maniera più semplice e veloce possibile
4. non solo: in generale gli ipermedia consentono il controllo dell'informazione, inteso come utilizzo nell'ottenimento di un risultato (si pensi alle banche dati accessibili on-line: non possediamo l'informazione che consultiamo ma controlliamo un accesso finalizzato alla costruzione di un risultato)
Informazione
Nelle pagine precedenti è stato utilizzato in modo intuitivo il termine informazione. Cerchiamo di capire che differenza c'è fra i termini informazione e dato ed infine conoscenza. È importante chiarire il loro significato perché alla base della costruzione di ipermedia. Cominciamo con un esempio:
La figura precedente alla maggior parte di noi è inintellegibile. Quello che vediamo è un insieme di tratti disegnati. A livello digitale l'immagine corrisponde ad un file nel quale è contenuta la codifica di quali pixel devono essere riprodotti in nero e quali in bianco. L'immagine per noi non ha alcun significato. È un artefatto che non possiamo classificare altrimenti: undato. Se però vi dico che quell'immagine è una parola scritta in giapponese ecco che al dato riuscite ad associare un significato: si tratta di uno scritto composto utilizzando un sistema di scrittura diverso dal nostro. Il dato porta in sè un'informazione, forse poco precisa, però sufficiente nel contesto del discorso corrente. Un'informazione è un dato interpretato e l'interpretazione è un processo sempre dipendente dal contesto. Perché questa informazione si trasformi in conoscenza manca ancora qualcosa, quel qualcosa che vi consente di integrare l'informazione in una base di conoscenze per un successivo utilizzo. Questo qualcosa non è facilmente definibile e ancora una volta dipende dal contesto, però di norma corrisponde ad un'informazione di carattere strutturale. Per esempio potrei dirvi che la scritta è composta da due ideogrammi hiragana, il primo si legge ki e il secondo ta, quindi la scritta è la parola kita, che significa nord.
In altri termini possiamo vedere il dato come un input, l'informazione come un'interpretazione dell'input e la conoscenza come un corpo di informazioni
integrate ed utilizzabili nell'esecuzione di compiti.
Quando si sviluppa un ipermedia è fondamentale ricordare il contesto in cui verrà utilizzato. Soprattutto è importante riuscire ad esprimere l'informazione in un modo che sia facilmente riconoscibile e comprensibile per gli utilizzatori. Una delle difficoltà principali consiste proprio nel riuscire ad immedesimarsi nell'utente finale costruendo un prodotto che non richieda grossi sforzi per imparare ad utilizzarlo ma al contrario che sia direttamente assimilabile in quanto `parla' lo stesso linguaggio dell'utente.
Rappresentazione dei dati
Abbiamo visto che i dati sono il punto di partenza nella costruzione di un'applicazione ipermediale in quanto la loro manipolazione consente di comunicare informazioni, quindi per gestire l'informazione è necessario saper gestire i dati. Questo problema è enorme e nel contesto del nostro corso lo affronteremo solo a un livello introduttivo, per esempio senza affrontare alcuna problematica relativa alla programmazione.
Torniamo a guardare la figura precedente, contenente la scritta kita in giapponese e poniamoci la seguente domanda : come posso rappresentare quest'immagine in modo tale che un browser possa visualizzarla? Perché il problema è che fra noi progettisti dell'applicativo ipermediale e gli utenti finali vi è di mezzo uno strato software attraverso il quale i dati vengono composti e proposti. Quindi i dati devono avere una rappresentazione che sia machine-processable, cioè tale da poter essere manipolata da un software. Tale manipolazione deve essere efficiente, in termini di tempo e di risorse necessarie all'elaborazione. Ricordiamo che a basso livello, all'interno di un computer i dati sono rappresentati come numeri binari. Molte codifiche riportano i dati ad una rappresentazione numerica.
Pensando bene a questo problema, la prima scoperta che faremo è che i dati non sono tutti uguali. Un'immagine è diversa da una scritta, che a sua volta è diversa da un suono o da un video. Le scritte sono composte da un numero limitato di simboli, le lettere, facenti capo ad un alfabeto finito. Le immagini hanno una struttura bidimensionale e sono caratterizzati da aree di colore, portando al limite questa idea possiamo vedere un'immagine come un insieme di punti colorati vicini l'uno all'altro. Suoni e video (che non studiamo) sono assimilabili a funzioni del tempo. È chiaro che elementi dalle caratteristiche tanto varie non possono essere rappresentati in modo efficiente utilizzando uno stesso formato. Quindi esistono diversi formati per i dati.
Un alfabeto è facilmente codificabile, basta far corrispondere ad ogni lettera la sua codifica (tipicamente un numero) tramite una tabella di associazione. Per esempio, uno standard mondiale è il codice ASCII (letto
`aschi', la sigla sta per "American Standard Code for Information Interchange"). Per esempio il carattere "@" è rappresentato dal codice ASCII
"64", "Y" dall'"89", "+" dal "43", ecc. La tabella completa può essere trovata all'indirizzo web: http://www.asciitable.it/ascii.asp. Il codice ASCII non è
l'unico, con l'evolversi dell'informatica e delle sue applicazioni sono stati definiti altri codici utilizzati talvolta in contesti più specifici.
Un'immagine non può essere codificata tramite semplici tabelle associative. Il motivo è che l'insieme delle possibili immagini ha cardinalità infinita. Nella parte del corso dedicata all'elaborazione di immagini vedremo che esistono diversi formati (bmp, gif, jpeg, png, tiff, ecc.) più o meno efficienti a seconda delle caratteristiche dell'immagine codificata. Per il momento immaginiamo un'immagine come costituita da una matrice di punti luminosi (o pixel) colorati diversamente. Poiché i colori, come vedremo nel dettaglio più avanti, sono codificati da numeri, possiamo rappresentare una matrice di pixel,e quindi un'immagine, come una matrice di numeri.
In generale una pagina web può contenere dati di tipo differente.
Riprendiamo quindi l'esempio della pagina costituita da due nodi e supponiamo ora che uno (quello azzurro) contenga informazione testuale, l'altro un'immagine. Non fa differenza che la pagina sia statica o dinamica ma per semplicità supponiamo che sia statica. Supponiamo anche che l'utente voglia leggere la pagina con un browser. Consegue dal discorso fatto fin'ora che affinché egli possa usufruire dell'informazione in questione è necessario che il browser `sappia' interpretare correttamente i dati di tipo testuale e il formato grafico dell'immagine e quindi riproduca le lettere giuste e le forme giuste sul monitor:
Attenzione che non tutti i formati sono interpretabili da qualsiasi browser! Per esempio mentre li formati jpeg, gif o png possono essere considerati universali, tiff e bmp (e molti altri) non lo sono. Inoltre è vero che la codifica dei caratteri è standard, però non tutti i browser sono abilitati a `rendere' correttamente qualsiasi alfabeto (latino, greco, giapponese, indi, coreano, cirillico, ...). Inoltre i differenti font (formati grafici dei caratteri) non sono
`universali'; di conseguenza l'uso di formati rari, anche se più gradevoli e d'effetto, rischia di essere visto solo da una minoranza degli utenti. Nel caso di animazioni, video e suoni è ancora più difficile trovare un formato che sia visibile/fruibile da tutti.
Strutturare l'informazione
Delineato brevemente il problema della raprresentazione dei dati, passiamo al cuore del corso che state seguendo, consistente nell'imparare a presentare in formaipermediale del materiale informativo. La produzione del nostro applicativo ipermediale deve essere vista come un'astrazione successiva di livelli di rappresentazione. Il compito che ci prefiggiamo ora è dare una struttura all'informazione che l'applicativo deve comunicare o comunque rendere accessibile, manipolabile.
Perché? Perché senza struttura è impossibile eseguire tutte quelle operazioni che interessano all'utente come il reperimento di informazioni, l'eventuale protezione di parte dell'informazione da occhi non autorizzati, la possibilità di fornire punti di vista differenti e così via.
Astrarre vuol dire sollevarsi, rappresentare l'oggetto del discorso in modo via via più generale ma qual'è il punto di partenza di questo processo? Il punto di partenza è costituito da blocchi atomici di informazione, atomici nel senso che nel contesto applicativo non avrebbe senso dividerli ulteriormente.
Faremo corrispondere tali blocchi atomici ai già citatinodi. Per esempio in un manuale per l'uso di Mozilla, alcuni nodi atomici potrebbero essere:
spiegazione dell'uso del bottone , l'uso del bottone e quello del bottone con il simbolo x.
Il passo successivo consiste nell'eseguire due operazioni diverse: (1) comporre se necessario tali nodi costruendone di maggiori (nodi composti: ad esempio una pagina intitolata `bottoni di navigazione' che comprende l'uso dei bottoni , e x), (2) collegare i nodi risultanti tramite link. Il modo in cui debbono essere composti i nodi e la dimensione dei medesimi dipende dall'applicazione.
Le strutture derivanti dall'introduzione dei link possono essere classificate in
diversi modi; le categorie solitamente usate sono le seguenti: strutturalineare, struttura ad albero ogerarchica, struttura a rete, struttura a matrice. Queste differenti strutture si prestano bene ad utilizzi diversi. Per esempio un manuale on-line ha tipicamente una struttura ad albero, un tour guidato in un museo virtuale ha struttura lineare. Una rete è particolarmente adeguata a cogliere collegamenti associativi fra argomenti collegati, l'utilizzo di matrici invece è più raro e si ha per esempio nel caso delle mappe cliccabili.
Anatomia di un'applicativo web
Prima di addentrarci nello studio di specifici strumenti e tecniche per lo sviluppo di ipermedia fruibili via web (un sito web), eseguiamo l'anatomia di un simile strumento.
Un sito web è costituito da un insieme di pagine statiche e/o un insieme di pagine dinamiche collegate da link. Il sito risiede su di una macchina (un computer) in grado di fungere da server. Una macchina è server se è in grado di rispondere alle richieste effettuate da applicativi, eventualmente installati su altri computer, connessi al server attraverso ad una rete. Queste ultime saranno dette client. Nel particolare contesto applicativo oggetto del nostro discorso, quello della pubblicazione di siti web, un server ha installato ed in esecuzione uno speciale applicativo dettoweb server (alcuni esempi di web server sono Apache e Tomcat). La richiesta è effettuata secondo uno standard che vedremo poco più avanti, la risposta è sempre una pagina web. Anche sulla macchina client devono essere installati applicativi appositi, detti browser (ad esempio netscape, mozilla, opera, explorer, konqueror, ...). Compito dei browser è interrogare i web server e visualizzare le pagine da questi inviate (eseguirne il `rendering'), consentendo all'utente la navigazione del sito (cioè la scelta di un percorso di lettura del medesimo).
Ogni pagina web è identificata da un'URL (Uniform Resource Locator), un'identificativo costruito rispettando regole ben precise, che consente anche l'invocazione di programmi residenti sul server (per esempio l'uso di un motore di ricerca). Analizziamo un esempio di URL:
http://www.di.unito.it/~baroglio/labbio_0304/index.html
La prima parola `http' è la dichiarazione del protocollo di comunicazione da usare fra browser e server; in parole povere, il protocollo definisce il formato dei messaggi scambiati fra i due applicativi. Il protocollo http è utilizzato per accedere ai siti web, http sta per HyperText Trasfer Protocol. Non è l'unico.
Per esempio esistono anche il protocollo https, anche detto http-sicuro ed ftp (file transfer protocol). Tramite il primo la comunicazione risulta cifrata e quindi protetta da occhi indiscreti ed è consentita solo ad utenti noti, registrati presso il sito, mentre il secondo è utilizzato per fare il download di file. Chi decide il protocollo? Chi realizza il sito.
Dopo il simbolo convenuto `://' compare l'identificativo di una macchina. Il termine `www' è un nome convenzionale, normalmente un alias di un server che fra le sue varie mansioni funge anche da web server.
Quel che segue separato da punti è il nome di unarete: la sottorete `di' della rete `unito', che è sottorete di `it'. Tutta insieme questa stringa può essere vista come l'indirizzo del server con cui vogliamo comunicare, un po' come dire il signor Rossi che abita in via Verdi della città di PincoPalla nello stato di Utopia. Identificare il server non è però sufficiente. Occorre arrivare fino alla pagina (statica o dinamica) che ci interessa. Ebbene dopo lo slash (simbolo
`/') è riportato il cammino che consente di raggiungere il file corrispondente alla pagina statica in questione o al programma invocando il quale è possibile generare la pagina dinamica che vogliamo leggere. L'esempio riportato sopra (~baroglio/labbio_0304/index.html) è relativo a una pagina statica contenuta nel file `index.html', contenuto a sua volta nella directory
`labbio_0304' dell'area riservata all'utente `baroglio'.
Il seguente è invece un esempio di URL relativa ad un programma al quale sono stati passati degli argomenti:
http://www.google.it/search?hl=it&q=Tal+Dei+Tali
La prima parte dell'URL è del tutto analoga al caso precedente, invece l'ultima parte (quella dopo lo slash) segue una sintassi più complicata: la stringa di caratteri comprende il nome del programma (search) e, dopo il punto interrogativo, un insieme di specifiche ovvero i parametri de programma, costituiti ciascuno dal nome di una variabile, il simbolo uguale ed un valore di interesse. Il simbolo `&' serve per concatenare una sequenza di tali specifiche. Il simbolo `+' invece sostituisce sintatticamente gli spazi.
Quindi viene richiamata l'esecuzione del programma `search' in cui il parametro `hl' vale `it' e il parametro `q' (la query o interrogazione al data base) è la stringa di caratteri `Tal Dei Tali'.
I programmi citati possono essere scritti in vari linguaggi di programmazione (Java, C, PHP o altro), ed eventualmente si appoggiano ad una banca dati.
Le pagine statiche sono invece scritte nel linguaggio HTML, che studieremo. Il programma che produce le pagine dinamiche è eseguito dalla macchina server. Si osservi che in generale uno stesso server gestisce più siti e molti programmi finalizzati alla generazione di pagine web. La programmazione e la gestione di siti sono argomenti che esulano dagli scopi di questo corso,
che utilizza i siti web come esempio di ipermedia e si focalizza sugli aspetti progettuali. Per quel che riguarda la realizzazione ci limiteremo a pagine statiche in HTML, con qualche eventuale elemento di animazione.
Caratteristiche degli ipermedia
Navigabilità: gli ipermedia devono fornire un meccanismo di navigazione, attraverso link testuali ma anche attraverso immagini o altre forme di comunicazione. Si osservi che spesso uno stesso ipermedia fornisce più di un meccanismo di navigazione.
Organizzazione concettuale: al di là della struttura dell'ipermedia definita dai link, esiste e deve essere ben definita una struttura concettuale, che determina l'organizzazione del materiale e porta alla struttura definita dai link.
Mappe e panoramiche: fornire all'utente informazione relativa alla struttura globali dell'informazione presentata nel sito, per aiutarlo ad orientarsi.
Percorsi: fornire all'utente informazione sul percorso di navigazione che ha seguito e su quali parti dell'ipermedia ha già visitato.
Indicizzazione e ricerca: quando il materiale è molto, può essere ncessario fornire meccanismi efficienti di ricerca; un tipico esempio è quello degli ipermedia che fungono da interfaccia verso le banche dati.
Gestione dei documenti: sebbene solitamente invisibili all'utente, gli ipermedia che fungono da interfaccia a repository di materiale in continua evoluzione, forniscono spesso strumenti per la gestione dei documenti inseriti nel repository, a vantaggio degli autori del materiale stesso e dei manutentori dell'ipermedia.
Contestualizzazione dell'informazione: estensione del concetto di mappa e panoramica: consite nel definire il contesto di un'informazione fornita per facilitarne la comprensione.
Sicurezza: non tutte le informazioni possono essere sempre accessibili a tutti. In certi casi occorre proteggere parte dell'informazione dall'accesso di persone non autorizzate.
Metafora di presentazione: è importante definire una metafora per la presentazione del materiale: è impossibile utilizzare un ipermedia in modo proficuo se non si riesce ad intuire l'effetto di un'azione o il valore di un dato fornito nel contesto di presentazione.
Personalizzabilità: utenti diversi lavorano in modi diversi. È importante riuscire a consentire a più di una categoria di utenti di lavorare con il nostro ipermedia. Fornire più di uno strumento di navigazione o informazioni a diverso livello di dettaglio sono alcune tecniche utilizzabili a questo scopo.
Uso efficace ed efficiente delle risorse: server e client devono essere utilizzati in modo efficiente, senza sprechi di risorse di calcolo né del tempo dell'utente.
Validità dei link: tutti i link devono effettivamente collegare una pagina ad altra informazione (portare a nodi/pagine che esistono effettivamente).
Per nessun motivo i link devono risultare non validi.
Validità del contenuto: in maniera analoga, il contenuto informativo di un
nodo deve essere completo (relativamente al livello di dettaglio deciso per quel tipo di nodo in fase di progettazione), la pagina non deve risultare vuota o contenente informazione parziale o a una grana più grezza o più fine delle altre pagine dell'ipermedia ad essa analoghe. Per esempio tutte le descrizioni di tutte le voci di un elenco devono essere più o meno lunghe uguali e dello stesso tipo.
Funzionalità dell'interfaccia: l'interfaccia deve essere immediata da capire, semplice e funzionale.
Quando si costruisce un ipermedia occorre inoltre fare una serie di valutazioni relative all'applicativo come software e quindi:
Costo di manutenzione: costrire un software normalmente comporta un certo investimento ma mantenerlo costa molto di più. Cosa significa mantenere un software? Le piattaforme si evolvono, quindi non è detto che un applicativo sviluppato nel momento storico X sia ancora utilizzabile qualche anno dopo. Inoltre alcuni sistemi sono utilizzati per accedere a banche dati o altre raccolte di materiale che nel tempo crescono e si modificano. Chi gestisce tale materiale? Questa è una domanda a cui è necessario dare risposta. Formare del personale ad hoc ha un costo da tenere in considerazione.
Riusabilità: nell'ottica di far evolvere un applicativo nel tempo occorre che sia ben strutturato e ben documentato, che sia modulare, che sia facile identificare le componenti da modificare, abbattendo tempi e costi di adattamento. Stessa considerazione vale per il materiale informativo gestito.
Affidabilità e robustezza: quando si utilizza un sito web, normalmente non si ha la sensazione di essere uno dei 100 o 1000 utenti collegati contemporaneamente a quel sito; quando si pensa alla realizzazione di un sito web occorre invece porsi il problema e per ogni possibile soluzione alternativa capire quanti utenti possono accedervi contemporaneamente mantenendo i tempi di risposta accettabili.
Test e verifica: prima di pubblicare un sito web o, in generale, un ipermedia è necessario verificare la sua correttezza tramite dei test approfonditi, che controllino l'effetto di ogni possibile azione dell'utente (soprattutto se stupida o non logica) accertando che il sistema non crolli.
Portabilità: su quante diverse piattaforma posso eseguire il mio applicativo? Con i siti web inoltre: tramite quanti browser differenti posso visitare il sito realizzato?
Vincoli legali: occorre accertarsi che il materiale pubblicato non violi vincoli legali (per esempio di copyright), che nella realizzazione siano stati usati strumenti di cui si ha licenza, ecc
Trade-off: occorre giungere ad un compromesso fra le ambizioni realizzaztive e le risorse (monetarie, di esperienza, di strumentazione) a disposizione; considerate però che spesso la scarsità di risorse aguzza l'ingegno portando alla creazione di soluzioni innovative.
Un approccio ingegneristico
Ingegneria dell'Ipermedia: si intende con questo termine l'utilizzo di un approccio disciplinato, quantificabile e sistematico al progetto, allo sviluppo e al mantenimento di un ipermedia.
Ciclo di Vita di un applicativo: il lasso di tempo che inizia con l'ideazione, continua con il progetto, lo sviluppo e la messa in funzione dell'applicativo e termina con la sua dismissione.
Analisi del dominio: studio delle caratteristiche del dominio del discorso relativamente al quale si desidera costruire un ipermedia, degli utenti a cui è rivolto, delle funzionalità che deve fornire. Conduce alla definizione di un process model e di un product model.
Process model: descrizione dei passi di sviluppo di un progetto e del loro collegamento in un processo realizzativo. Non descrive nel dettaglio le singole attività di sviluppo e non è la struttura del prodotto finale. Nessun modello è adeguato per lo sviluppo di qualsiasi applicativo ma esistono sempre ambiti in cui un modello è il più appropriato; in generale non esiste un modello migliore di un altro in senso assoluto.
Product model: paradigma (o schema) a cui fa capo un applicativo.
Possiamo intenderlo come un tipo di applicativo, che ne definisce in modo sommario la struttura e le funzionalità. Definire e rifarsi a degli schemi astratti è buona cosa perché consente di riutilizzare esperienze acquisite in precedenza in contesti applicativi diversi. È la struttura del prodotto, non del processo che porta alla sua realizzazione.
Process model + Product model = approccio (linee guida) alla costruzione di un applicativo
Esempio di un possibile Process Model (a livello astratto):
Specifica: fase in cui si descrivono verbalmente gli scopi dell'ipermedia da costruire.
Progetto: fase in cui si definisce la struttura (magari con riferimento a qualche product model) dell'ipermedia da costruire. Questa fase può portare alla revisione delle specifiche definite in quella precedente.
Produzione del materiale: reperimento e/o produzione del materiale informativo da inserire nel sito. Questa fase può richiedere la revisione del progetto.
Authoring: produzione del sito vera e propria. Questa fase può richiedere una revisione del progetto e anche un ulteriore attività di produzione del materiale informativo.
Test: verifica dell'ipermedia, può richiedere che vengano effettuati degli aggiustamenti.
Pubblicazione: l'ipermedia è reso accessibile al pubblico.
Manutenzione: attiva durante tutto il periodo di utilizzo dell'ipermedia:
eventuali errori non emersi in fase di test ma rilevati dagli utenti vengono corretti, il materiale informativo è aggiornato, il software è adattato a nuove release dei linguaggi e a nuove piattaforme.
Dismissione: l'applicativo non è più utilizzato.
Ciascuna di queste fasi può essere dettagliata ulteriormente in passi. In generale, come capita ad alto livello, i diversi passi non sono temporalmente disgiunti ma prevedono delle sovrapposizioni. Inoltre durante una fase è possibile che emergano motivazioni che portano a rivedere il risultato di fasi precedenti. È importante che ogni transizione sia ben documentata per saper ricostruire in ogni momento i motivi delle varie scelte operate.
Due parole sui product model:
In questo corso non avremo la possibilità di vedere una gran varietà di product model perché considereremo sempre ipermedia accessibili via web, realizzati in HTML e non prodotti o fruibili in altra maniera. Tuttavia esistono molti modi diversi per generare ipermedia. Per esempio utilizzando linguaggi di programmazione, oppure costruendo un insieme di immagini linkate l'una all'altra, talvolta in modo gerarchico, talvolta definendo un flusso di controllo del passaggio da una schermata all'altra. Ogni strumento è particolarmente adeguato a realizzare un certo tipo di prodotto, con una certa struttura, un certo modello. Un videogioco ha una struttura diversa da un manuale in linea, che a sua volta ha una struttura diversa da quella di un sistema di supporto alla didattica o di un portale giornalistico. Nel caso dei siti web, il product model è costituito essenzialmente intorno all'informazione e vi si separano due livelli: quello del contenuto e quello della presentazione (come il contenuto viene mostrato all'utente). Il contenuto ha una propria struttura e la presentazione ha una propria struttura, collegate ma non necessariamente coincidenti.
Analisi del dominio
L'analisi del dominio è la primissima fase dello sviluppo di qualsiasi applicativo. Con questo termine si intende molto di più che capire la struttura degli argomenti di cui l'ipermedia tratterà. Non esiste un unico modo per svolgere questo delicato e fondamentale compito: la strategia utilizzata dipende anche dalla sensibilità e dall'esperienza di chi la effettua. Tuttavia, si possono distinguere tre diversi aspetti, parzialmente sovrapposti:
1. analisi del problema
2. analisi del contesto di progetto 3. analisi del contesto di sviluppo
La prima fase comporta innanzi tutto capire quali devono essere i contenuti dell'ipermedia, studiando l'ambiente in cui l'ipermedia si inserirà: esistono altri strumenti già utilizzati con cui il nostro dovrà armonizzarsi? Esiste un vocabolario di riferimento da utilizzare? Esiste una banca dati da cui trarre materiale? Chi saranno gli utenti? A cosa deve esattamente servire il nostro
ipermedia? Questi alcuni esempi di domande che occorre porsi in questa fase. Più precisamente in fase di analisi occorre definire i seguenti aspetti:
capire i tipi di informazione in uso presso il committente
definire le sorgenti di informazione (basi di dati, riviste, libri, schedari, file di dati, archivi, esseri umani)
capire se l'informazione è già strutturata (per esempio è organizzata in una tassonomia) oppure se va analizzata per comprenderne la struttura (e in questo caso farlo): il risultato è una mappa concettuale in cui sono evidenziati i concetti chiave del dominio e le loro relazioni
mettere in luce gli aspetti legali relativi all'uso dell'informazione in oggetto
definire le categorie di utenti a cui ci si rivolgerà, le loro manisioni e il tipo di operazioni che devono poter eseguire. Per ciascuna categoria catturare alcune caratteristiche rilevanti (es. Il grado di istruzione, l'età media, tutti aspetti che possono influenzare la forma comunicativa scelta)
se l'ipermedia sostituisce una soluzione precedente, studiare la medesima
capire se esistono vincoli di sorta
La seconda fase richiede invece capire il contesto in cui si opera per costruire l'ipermedia, in particolar modo il contesto tecnologico. Fra cui:
capire se il sistema da sviluppare si deve integrare con sistemi preesistenti
capire quale tecnologia sia più adeguata per le tipologie di utenti individuate
capire se vi sono vincoli non legati all'ipermedia da sviluppare in sè ma dipendenti da una situazione contingente del cliente, per esempio sue collaborazioni con terzi con il conseguente desiderio di utilizzare uno strumento offerto da questi ultimi
ogni soluzione richiede l'utilizzo di risorse. La soluzione sviluppata deve essere adeguata alle disponibilità del cliente, sia in termini economici che tecnologici
Infine occorre essere consapevoli del contesto di sviluppo. In pratica occorre capire quanto tempo si ha a disposizione, quante persone, quale hardware, essere consapevoli dell'esperienza delle persone che parteciperanno al progetto e allo sviluppo, quale tipo di documentazione è necessario produrre.
Strumenti per il progetto
Facciamo un passo avanti e dopo aver introdotto gli aspetti principali relativi al progetto di un ipermedia, mettendo per lo più in luce la necessità di porsi un gran numero di domande a cui trovare una risposta, scendiamo di dettaglio e vediamo da vicino alcune attività specifiche relative alla realizzazione di un ipermedia. In particolar modo verrà mostrato l'uso di flow- chart e storyboard.
Flow-chart: descrivono in modo schematico il flusso di controllo di un applicativo (nel nostro caso di un ipermedia). Nel nostro caso contengono tutti i possibili percorsi di interazione fra l'utente e lo strumento rappresentati in veste grafica con scatolotti etichettati (ciascuno rappresenta una pagina
web), connessi da archi orientati (rappresentano i link). Sono generalmente prodotti da un professionista deputato a progettare l'interazione con lo strumento, che si basa fra le altre cose su di una `mappa concettuale' derivata dalla fase di analisi. Al contrario di quanto capita con flow-chart che descrivono i normali programmi, non esiste un formato grafico standard universalmente riconosciuto per realizzare flow-chart che schematizzano siti web.
Storyboard: contiene il progetto grafico dell'interfaccia di un applicativo (ipermedia nel nostro caso), quindi cosa comparirà dove e con quale aspetto. Non illustra nessun aspetto di flusso (catturato invece dai flow-chart) ma consente di scegliere il layout delle pagine, i font, la dimensione delle immagini e così via. Il progetto grafico dipende in parte dalla metafora di comunicazione scelta, in parte dal tipo di utenti a cui è rivolto l'ipermedia, in parte dall'argomento.
Per quel che riguarda i flow-chart useremo la seguente convenzione:
1. le pagine saranno rappresentate da rettangoli contenenti un titolo che identifica la pagina;
2. ogni pagina può contenere link, identificati da un nome e rappresentati graficamente tramite un rettangolo con gli angoli arrotondati;
3. i collegamenti fra le pagine sono rappresentati da archi che hanno come punto di partenza un link e come punto di terminazione il rettangolo corrispondente alla pagina linkata.
Per esempio:
I cinque rettangoli nella figura rappresentano le cinque pagine del sito (fingiamo che si tratti delle pagine personali di un pittore che ha lavorato fra il 1970 e il 1980). Le frecce sono i link: partono da quella che sarà l'ancora nella pagina di partenza e la connettono a una pagina informativa. Come si può osservare questa rappresentazione grafica non dice come sono fatte le pagine, cosa contengono di preciso, come appariranno ai lettori. L'unica cosa che viene catturata è la struttura ipertestuale del sito. Attenzione che le pagine compaiono tutte una volta sola. Per cui se volessimo rendere
accessibile la galleria delle opere anche dalla pagina contenente la biografia, aggiungeremmo solo un link dalla pagina intitolata Curriculum Vitae alla pagina Opere. Non duplicheremmo la struttura. Non confondiamo quindi la struttura colta da un flow-chart con i percorsi di lettura descritti in precedenza: i percorsi di lettura sono tutte le possibili sequenze di pagine che gli utenti possono leggere seguendo i link di un flow-chart.
Gli elementi grafici (e concettuali) di cui può essere costituito un flow-chart e descritti sopra sono sufficienti a rappresentare siti del tipo che impareremo a realizzare in questo corso. Il linguaggio grafico dovrebbe però essere arricchito qualora si volessero rappresentare siti contenenti programmi, consentendo per esempio di distinguere le pagine dinamiche da quelle statiche. In certi casi, inoltre, per esempio per i prodotti multimediali che non sono siti web, è utile individuare i punti di ingresso e di uscita: cioè la (le) pagina (pagine) che dà (danno) accesso al materiale ipermediale e quelle che corrispondono alla fine di percorsi di lettura prestabiliti.
Consideriamo ora gli storyboard. Uno storyboard contiene informazioni di carattere grafico, all'inizio di struttura (o layout) come ad esempio:
Come si può notare il disegno non contiene informazioni di navigazione (dove sono i link?) né si sa di cosa la pagina parlerà. Questa struttura viene via via raffinata, definendo le proporzioni delle diverse componenti (quanto è larga e alta la barra del titolo, se deve contenere un titolo testuale o un banner, quanto è ampia la sezione verticale sulla sinistra, quanto sono grandi le immagini, ecc.), definendo le scelte stilistiche (tipo di font, colori e loro significato, sfondi, veste grafica di titoli, sottotitoli, link, testo normale, ...) e
producendo un insieme di prototipi fra i quali effettuare una scelta. Le possibilità sono moltissime e le scelte sono guidate da informazioni raccolte in fase di analisi (a quale pubblico è rivolto il sito? Quale sensazione deve comunicare?). Per esempio, già solo per un eventuale indice dei contenuti possiamo alternativamente optare per le seguenti soluzioni:
Procedendo in ordine: indice sul lato sinistro della pagina, a pié o in cima alla pagina, centrale con disposizione a cerchio. Ricordate che la simmetria suggerisce pari importanza mentre le sequenze tendono ad essere interpretate come graduatorie: ciò che è più importante viene per primo.
Usare una barra orizzontale lascia invece più spazio e più rilevanza all'argomento.
Una seconda versione già più dettagliata dello storyboard visto prima potrebbe essere:
Esempio
In questa sezione vediamo un semplice esempio di realizzazione di un piccolo sito, il già citato sito che contiene le opere di un pittore, il signor Marino de Marinis, esperto in paesaggi marittimi. Supponiamo che il committente sia egli stesso, supponiamo di averlo intervistato e di avere anche raccolto del materiale apparso su alcune riviste specializzate e su alcuni quotidiani.
Passo 1: Analisi
Progetto: costruzione sito de Marinis
Scopo del progetto: realizzare un sito che pubblicizzi l'opera dell'artista
Tipo di informazione a disposizione: materiale non digitale, in parte immagini (quadri, fotografie) in parte testuale (articoli e altri documenti) in parte sonoro (intervista registrata)
Sorgenti di informazione:
1. materiale originale (messo a disposizione dall'autore) fotografie di quadri
illustrazioni di libri di favole
possibilità di fotografare opere dell'artista bozzetti e prove
diario dell'artista
fotografie dell'artista e della sua famiglia nostra intervista all'artista
2. altro materiale documentale intervista 1974, rivista Arte Oggi
intervista giornale locale, giugno 1981 volantini di esposizioni
articolo pubblicato su Arte Domani, settembre 1984 Strutturazione dell'informazione: l'informazione non risulta strutturata
Categorie di utenti: amanti dell'arte e possibilmente anche insegnanti (d'arte) e studenti delle scuole medie inferiori (illustrazioni favole)
Soluzioni precedenti: no
Vincoli imposti dall'autore: stile sobrio
Hardware: il sito verrà ospitato da un provider commerciale, investigare costi di soluzioni alternative da proporre al committente
Non ci sono altri vincoli relativi all'integrazione con altri software Passo 2: identificare i concetti e le loro relazioni
motivazione: il materiale non è strutturato, occorre costruire ex novo una rappresentazione concettuale del materiale. Cominciamo con l'identificare le keyword principali
Vita dell'artista: comprende biografia
scuola famiglia
evoluzione
Opere: si dividono in tre categorie:
bozzetti dipinti illustrazioni
Materiale documentale: anche qui si possono distinguere più categorie articoli
volantini
Ciò che è riportato sopra è una tassonomia in cui i diversi concetti sono raggruppati per categorie (tre categorie, il sito è semplice). Ci sono relazioni fra le diverse voci? Per esempio nella categoria `vita' è compresa la voce
`evoluzione': probabilmente vi sono delle connessioni fra questa voce e le opere prodotte dall'artista (per esempio potrebbe esserci stato un periodo in cui ha compiuto per lo più lavori di illustrazione e poi è passato alla pittura). In questo caso occorre esplorare queste relazioni. Per esempio potremmo ottenere:
Vita dell'artista:
...evoluzione:
illustratore (collegato a illustrazioni) pittore (collegato a dipinti)
.All'interno di Opere potremmo inoltre mettere in luce che sono a disposizione bozzetti di illustrazioni e bozzetti di dipinti, per esempio in questo modo:
Opere:
dipinti illustrazioni
bozzetti (collegato sia a dipinti che a illustrazioni)
Lo stile con cui si organizza la struttura può essere testuale (come sopra) oppure ancora una volta grafico. Noi ci limiteremo a scrivere descrizioni testuali. Lo stile con cui vengono scritte deve essere schematico ma non esiste uno standard vero e proprio. Proseguiamo velocemente definendo le diverse categorie di utenti e le operazioni che si vuole possano compiere:
visitatore generico: si suppone che sia un amante dell'arte, interessato maggiormente alle opere e all'evoluzione dell'artista. Deve poter esplorare queste informazioni ed eventualmente contattare l'autore ai fini dell'acquisto di un'opera
insegnante: si suppone insegnante d'arte di scuola media inferiore, in particolare deve poter trovare informazioni che collegano l'artista al periodo storico in cui vive e informazioni riguardo la possibilità di organizzare visite guidate presso lo studio del medesimo
studente: si suppone di scuola media inferiore, deve poter trovare informazioni (spiegate in termini semplici) riguardo la corrente artistica in cui si inserisce il nostro e le caratteristiche che ne identificano l'opera
giornalista: deve poter ottenere informazioni riguardanti l'artista e le sue opere e informazioni di contatto per eventuali interviste
Questa lista di desideri ci permette subito di capire che il materiale a disposizione non è sufficiente, in quanto non abbiamo nulla che ci descriva il contesto artistico in cui l'artista ha operato. È quindi necessario recuperare tale materiale.
Supponendo di essere riusciti a trovare quanto ci necessita, possiamo cominciare a progettare un flow-chart, che potrebbe risultare come segue:
Ogni pagina va commentata, spiegando che cosa conterrà (il solo titolo non è in'informazione sufficiente alle successive fasi di realizzazione). Vediamo solo alcuni esempi:
Home Page: copertina con punto di partenza di due percorsi: uno per le scuole e uno per gli altri visitatori
Introduzione (per le scuole): scritta in termini semplici, l'autore si presenta e invita le scolaresche a visitare il suo studio per vedere dal vivo come nasce un quadro/illustrazione. Comincia un percorso che mostra le varie fasi di realizzazione di un'illustrazione
Introduzione (per altri visitatori): presentazione dell'autore (tratta da rivista?
Controllare copyright). Tre link che conducono a pagine comunque interconnesse, per lasciare massima libertà nell'esplorazione.
Vediamo anche un possibile storyboard per la home page:
In questo caso l'impostazione è stata fatta utilizzando un programma di grafica e non a mano. Si può osservare che sono state identificate tre aree principali: una striscia superiore contenente il titolo, per il quale viene suggerito un font che ricordi una calligrafia umana, una striscia ampia e centrale contenente un'immagine da definire (una fotografia dell'autore? Di un'opera? Dell'autore all'opera? Un'elaborazione grafica?). Infine la parte bassa contiene i link ai due percorsi principali.
Un'alternativa potrebbe essere:
Lo stile definito è completamente diverso, come la scelta dei colori e del layout: più `artistico' e più soft. La scelta dipenderà dall'omogeneità dello stile con lo stile del pittore che ha commissionato il sito, dal gusto del committente, dalla possibilità di mantenere lo stile omogeneo nel resto del sito e da considerazioni relative alla dimensione dei file di immagini da utilizzare.
