NI PRACTICA Villarreal Quintana Jaume

Pràc

tica

guió

inte

ract

iu m

ultim

èdia

Narrattiva interactiva

Narrativa Interactiva Pràctica

- 2 - Jaume Villarreal Quintana - Grau en Multimèdia

1. Presentació......................................................................

2. Disseny de la interactivitat................................................

3. Disseny de la nevagació...................................................

4. Disseny lògic.....................................................................

5. Recursos............................................................................

3

5

7

11

16 índe

xgu

ió in

tera

ctiu

mul

timèd

ia



pres

enta

ció

3 só

n M

ULTI

TUD



Us presentem el portal web de l’obra de teatre “3 són multitud“, basada en el guió

realitzat per a la PAC2 de la matèria “Narrativa Interactiva“ impartida per la UOC

dins del Grau en Multimèdia.

L’obra condensa en una estona intensa la història d’en Max i el seu amor impossible

per la Sara, que des de sempre ha dut una doble vida amb l’Àlex. Tots tres seran els

puntals d’una història carregada de passió.

Però la vida es pot viure des de moltes òptiques, un fet singular que passa al nos-

tre voltant té tantes interpretacions com mirades l’observen. Per això l’aposta del

director i la companyia ha estat crear un format que interactués directament amb el

públic.

Per aquest motiu han treballat la història sobre dos guions diferents: un guió que

desenvolupa la història com un drama i un guió que explica la mateixa història des

de la comèdia. El públic, des del seu singular punt de vista, serà qui decideixi quin

serà el tractament de la història: un drama o una comèdia.

Entre les diverses plataformes de difusió hi trobem el website de l’obra. Aquest lloc

web es convertirà en un espai de presentació de tots els estrats de l’obra (el di-

rector, els actors, la història,...), en un espai multimèdia on poder interactuar amb

la companyia i també en un espai d’informació i serveis (consulta de cartellera,

venda d’entrades,...).

Pensada d’entrada per al gran públic, aquesta pàgina web serà de gran interès per

aquelles persones que es considerin amants del teatre i dels seus nous formats, així

com de les moltes possibilitats que ofereixen les aplicacions interactives multimèdia.

presentació



diss

eny

de la

inte

ract

ivita

tqu

ina

rela

ció

s’es

tabl

eix

entr

e l’u

suar

i i l’

aplic

aici

ó?



La intenció primera del nostra projecte és oferir un suport multimèdia al desenvolu-

pament de l’obra. El plantejament del director i la companyia parteix d’una presmis-

sa: fer partícep a l’espectador del desenvolupament de la funció. Per això ofereixen

dos plantejaments diferents, dramàtic i de comèdia, i tres possibles finals per a

l’obra. L’espectador serà qui decideixi quin és el to i el final de cada funció a través

de portal. Per això cal cuidar molt la relació entre l’usuari i l’aplicació a tots nivells.

El nostre projecte ha de ser capaç d’oferir en primer terme una manifesta unitat comunicativa. Això permetrà a l’usuari accedir a la informació mitjançant l’harmo-

nització de diversos elements a través de diferents codis dins la interfície. Es tindrà

en compte:

• que el contingut tingui una integració harmònica.

• que presenti una organització lògica dels continguts.

Una de les principals finalitats del nostre projecte serà la gestió de la informació.

Es vetllarà perquè els continguts siguin de qualitat, tant a nivell informatiu com a

nivell d’accessibilitat d’intefície. Es tindrà en compte:• l’organització dels continguts, com a elements estructurals.

• el grau d’accessibilitat que presenten els continguts.

Es cuidaran les diferents combinacions que afectin al text, la imatge i el so en els

seus diferents formats. Es treballarà per equilibrar:

• l’ús que es fa del text escrit.

• la presència d’arxius de so per reforçar la unitat informativa.

• la presència d’arxius de vídeo que complementin la informació.

• l’ús que es fa del material fotogràfic.

Es tindrà en compte la seva consistència, és a dir, la impressió que cada pàgina o

part del contingut pertany a la mateixa web gràcies a la integració lògica i ordenada

de la navegació, la paleta cromàtica, les formes, les icones i la tipografia. Es cuidarà:

• el nivell de sofisticació de la interfície.

• el comportament racional i previsible de la web.

• la consistència del portal en la seva globalitat.

Nosaltres cerquem un producte que equilibri informació i interactivitat. Per això

s’intentarà cuidar:

• les possibilitats d’interacció entre l’usuari i continguts.

• la possibilitat de construcció de diferents itineraris d’informació.

disseny dela interactivitat



diss

eny

de la

nav

egac

ióco

m e

s re

laci

onen

l’us

uari

i l’a

plic

ació



disseny dela navegació

La intenció primera del nostra projecte és oferir un suport multimèdia al desenvolu-

pament de l’obra. El plantejament del director i la companyia parteix d’una presmis-

sa: fer partícep a l’espectador del desenvolupament de la funció. Per això ofereixen

dos plantejaments diferents, dramàtic i de comèdia, i tres possibles finals per a

l’obra. L’espectador serà qui decideixi quin és el to i el final de cada funció a través

del seu vot.El nostre projecte es basa en un model d’organització mixt, establert a partir del disseny de navegació dels nostres menús.

MODEL RETICULAR

El menú superior recull totes les entrades de contingut amb què pot interactuar l’usuari. Aquestes entrades resten sempre disposició de l’usuari perquè aquest pugui accedir allà on vulgui independentment del bloc d’informació/interac-ció on es trobi.

Sempre s’ha intentat evitar el que nosaltres hem anomenat “la Síndrome IKEA“: obligar a l’usuari a passar per allà on el dissenaydor vol que passi.

MODEL INDEXAT

Cada entrada de menú conté un bloc d’informació/interac-ció. Un cop accedit a aquest bloc l’usuari pot optar per accedir a qualsevol altre espai del projecte.

NAVEGACIÓ EXTERNA

El menú inferior permet a l’usuari accedir a altres recur-sos relacionats amb el projecte que resideixen fora del mateix, xarxes socials principalment.

DIAGRAMES DE FLUX

Podeu trobar els diagrames de flux en els següents enllaços:

• DIAGRAMA_00

• DIAGRAMA_01

• DIAGRAMA_02DIAGRAMA_00




DIAGRAMA_01

DIAGRAMES DE FLUX


• DIAGRAMA_00

• DIAGRAMA_01

• DIAGRAMA_02




DIAGRAMA_02

DIAGRAMES DE FLUX


• DIAGRAMA_00

• DIAGRAMA_01

• DIAGRAMA_02



diss

eny

lògi

cde

scrip

ció

de la

web

clic

a c

lic



introducció #1DESCRIPCIÓS’obre el teló d’un teatre i apareixen dues màscares de teatre. A sobre s’hi emmarquen les cares d’en Max, la Sara

i l’Àlex. A sota de cada marc hi ha els botons de reproducció de vídeo. A la part inferior de la interfície hi apareixen

dos botons amb text: “La vida és un drama“ i “La vida és una comèdia“. CONTINGUTCada personatge explica alguns detalls sobre com va viure les situacions que es desenvolupen a l’obra, els seus

sentiments, els seus records. Aquests arguments poden ajudar a l’usuari a triar entre les dues opcions.MULTIMÈDIAVídeo per a cada personatge.INTERACTIVITATL’usuari pot interactuar sobre dos elements:

• els vídeos, que pot reproduir, pausar, aturar i tornar a visionar.

• els botons que donen accés a la interfície principal.

A partir d’aquí l’usuari podrà optar per accedir a una interfície en què l’obra es tracta com un drama o bé com una

comèdia. Ambdues interfícies (dramàtica i còmica) tenen la mateixa estructura i continguts, canvien els colors de

fons, la tipografia i les imatges. Les posicions de les barres de navegació i el logotip de l’obra sempre es mantenen.

interfície principal #2DESCRIPCIÓLa interfície principal presenta la barra de navegació a la part superior i la barra de navegació externa a la part

inferior dreta. El logotip de l’obra apareix a la part superior esquerra. A sota del logo sempre hi seràn visibles els

botons [INICI] i [CANVIA]. Aquests elements es mantenen sempre inalterables en totes les configuracions.

• Int. Dramàtica: composició de fons sòlid negre més màscares de teatre en perfil blanc i semidegradat a

l’esquerra (a partir d’ara “composició D”), foto central dels tres personatges en escala de grisos. A sota de la

imatge hi apareix el text “LA VIDA ÉS UN DRAMA“.

• Int. Comèdia: fons sòlid blanc més màscares de teatre en perfil negre i semidegradat a l’esquerra (a partir

d’ara “composició C”), foto central dels tres personatges en color. Sota la imatge hi apareix el text “LA VIDA

ÉS UNA COMÈDIA“.CONTINGUTLa interfície principal presenta una barra de navegació a la part superior i una barra de xarxes socials a la part

inferior esquerra.INTERACTIVITATL’usuari pot interactuar sobre dos elements:

• els botons de la barra de navegació: [l’obra] [la companyia] [galeria] [el teu final] [30’’] [agenda] [entrades].• els botons de la barra de navegació externa: [Facebook] [Twitter] [Blog] [YouTube].

l’obra #3DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, foto lateral en blanc i negre d’una escena al costat de la sinopsi emmarcada.

• Int. Comèdia: composició D, foto lateral en color d’una escena al costat de la sinopsi emmarcada.



CONTINGUTSinopsi de l’obra.INTERACTIVITATL’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.

la companyia #4DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, tira fotogràfica de “fotomaton“ amb la foto del director i els tres actors situada a

la part esquerra. Fotografia en B/N a la part central d’un noment dels assajos.

• Int. Comèdia: composició D, tira fotogràfica de “fotomaton“ amb la foto del director i els tres actors situada a la

part esquerra. Fotografia en B/N a la part central d’un noment dels assajos.CONTINGUTBreu biografia, fotografia i currículum de cada membre de la companyia.INTERACTIVITATL’usuari pot fer clic sobre les fotos per obrir una finestra amb la informació de cada membre de la companyia.

L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.

galeria #5DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, matriu de 3x3 amb fotos miniatures en B/N (thumbnails).

• Int. Comèdia: composició D, matriu de 3x3 amb fotos miniatures en color (thumbnails) .CONTINGUTNou galeries d’imatges amb fotografies de diferents moments de la funció i de diverses escenes dels actors entre

bambalines.MULTIMÈDIAGaleries d’imatges i visor de fotografies.INTERACTIVITATL’usuari pot fer clic sobre cadascuna de les miniatures per accedir a una galeria d’imatges. Un cop fet el clic s’obre

a la part central un visor de fotografies que permet avançar, retrocedir, ampliar i tancar el visor.


el teu final #6DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició D, fotografia dels tres personatges. Cada foto presenta a sota una frase curta del

personatge. Sota la composició de les fotografies hi ha una aplicació amb tres opcions per votar en línia.

• Int. Comèdia: composició C, fotografia dels tres personatges. Cada foto presenta a sota una frase curta del

personatge. Sota la composició de les fotografies hi ha una aplicació amb tres opcions per votar en línia.CONTINGUTAplicació interactiva de selecció d’opcions.

Fotografies i cites dels personatges. La bateria de cites es carrega aleatòriament en la caixa dinàmica que hi ha

sota cada foto i varien en funció del tipus d’interfície escollida (interfície dramàtica o interfície de comèdia).



INTERACTIVITATLa companyia ofereix la possibilitat d’escollir el final de l’obra que es veurà en la següent funció. Es pot escollir

entre el final a partir d’una decisió d’en Max, de la Sara o de l’Àlex, però en cap cas s’explica quina és la decisió

que prenen els personatges per no adelantar esdeveniments.


Aspectes a tenir en compte:

• per poder escollir el final cal assistir a la funció, per això només es pot votar si s’ha fet la compra de l’entrada

on-line.

• l’aplicació interactiva inclou una caixa de validació on s’hi ha d’escriure el codi inclòs en l’entrada virtual.

• l’aplicació interactiva conté un botó que redirigeix a la pàgina de compra d’entrades.

30 segons #7DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, matriu de 5x5 amb miniatures de vídeos (thumbnails). Formulari d’enviament.

• Int. Comèdia: composició D, matriu de 5x5 amb miniatures de vídeos (thumbnails). Formulari d’enviament.CONTINGUTLa interfície presenta una graella composada per vídeos enviats pels mateixos usuaris i espectadors. Els vídeos

han de durar 30 segons i volen recollir sensacions, pensaments, intencions, qualsevol reflexió sorgida de la fun-

ció.

Sota la composició de miniatures de vídeo hi ha un formulari d’enviament on els usuaris poden introduir l’adreça

del seu vídeo per enviar-los als administradors del website.MULTIMÈDIAVídeos gravats pels usuaris i seguidors i pujats a la Xarxa.INTERACTIVITATL’usuari pot gravar un vídeo i pujar-lo al seu servidor, enviant la URL a través del formulari que hi ha a peu de pà-

gina. Els adminsitradors validaran l’enllaç, el contingut i la durada i aquest quedarà penjat a la pàgina. D’aquesta

manera els espectadors també poden interactuar amb la companyia i la resta d’usuaris/espectadors retornant de

manera pública el seu feedback.


agenda #8DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, mapa de Catalunya. Agenda en format calendari.

• Int. Comèdia: composició D, mapa de Catalunya. Agenda en format calendari.CONTINGUTLa pàgina presenta al ccentre de la composicó un mapa de Catalunya en format d’infografia dinàmica. Passant el

ratolí per sobre dels marcadors de localitat que apareixen al mapa s’obren finestres emergents que presenten la

informació concreta sobre el lloc, els horaris i altres dades d’interès de cada funció.

A la part dreta hi ha una agenda en format calendari on s’hi poden veure acolorides les dates de les següents

funcions.



MULTIMÈDIAInfografia dinàmica i calendari.INTERACTIVITATL’usuari pot accedir a la informació de dues maneres diferents:

• picant sobre les dates acolorides a l’agenda/calendari situada a la part dreta de la composició. Cada cop que

es pica sobre una de les dates acolorides apareixen a la part inferior de l’agenda les dades de l’esdeveniment.

• interactuant directament amb la infografia dinàmica del mapa. El ratolí detecta les zones actives del mapa i fa

visibles de les caixes emergents amb la informació corresponent.


entrades #9DESCRIPCIÓApareix la configuració bàsica establerta (logo i barres de navegació).

• Int. Dramàtica: composició C, formulari de compra d’entrades on-line al centre de la mateixa.

• Int. Comèdia: composició D, formulari de compra d’entrades on-line al centre de la mateixa.CONTINGUTLa pàgina presenta una aplicació en línia que permet realitzar la compra d’entrades mitjançant un assistent. A sota

de l’assistent de compra virtual hi ha un botó que conté la pregunta: “vols escollir el final?“. Aquest botó redirigeix

a l’usuari a la pàgina [EL TEU FINAL].INTERACTIVITATL’usuari interactua amb l’assistent de compra per adquirir el producte desitjat.


xarxes socials #10DESCRIPCIÓApareixen dins de la barra inferior esquerra, tant a la interfície dramàtica com a la de comèdia. Responen al model

de navegació externa.CONTINGUTAquests enllaços no ofereixen contingut propi dins del projecte, per aquest motiu queden agrupats en aquest espai.

Cadascun dels enllaços de menú redirigeixen respectivament a continguts presents Facebook, Twitter, Wordpress

i Youtube.INTERACTIVITATL’usuari pot accedir a qualsevol dels continguts propis de la companyia i externs al projecte.



recu

rsos

• Salaverría R. Aproximación al concepto de multimedia desde los planos comu-

nicativo e instrumental [article en línia] WEB [data de consulta: 15 de maig de

2012] < http://www.ucm.es/info/perioI/Period_I/EMP/Numer_07/7-5-Inve/7-5-13.

htm >

• Material docent - UOC

Documents

NI PRACTICA Villarreal Quintana Jaume