ni practica villarreal quintana jaume
DESCRIPTION
Pràctica de Narrativa Interactiva - GUIÓ INTERACTIU. Grau en Multimèdia. UOCTRANSCRIPT
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
Narrativa Interactiva Pràctica
- 3 - Jaume Villarreal Quintana - Grau en Multimèdia
pres
enta
ció
3 só
n M
ULTI
TUD
Narrativa Interactiva Pràctica
- 4 - Jaume Villarreal Quintana - Grau en Multimèdia
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ó
Narrativa Interactiva Pràctica
- 5 - Jaume Villarreal Quintana - Grau en Multimèdia
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
ó?
Narrativa Interactiva Pràctica
- 6 - Jaume Villarreal Quintana - Grau en Multimèdia
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
Narrativa Interactiva Pràctica
- 7 - Jaume Villarreal Quintana - Grau en Multimèdia
diss
eny
de la
nav
egac
ióco
m e
s re
laci
onen
l’us
uari
i l’a
plic
ació
Narrativa Interactiva Pràctica
- 8 - Jaume Villarreal Quintana - Grau en Multimèdia
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
Narrativa Interactiva Pràctica
- 9 - Jaume Villarreal Quintana - Grau en Multimèdia
disseny dela navegació
DIAGRAMA_01
DIAGRAMES DE FLUX
Podeu trobar els diagrames de flux en els següents enllaços:
• DIAGRAMA_00
• DIAGRAMA_01
• DIAGRAMA_02
Narrativa Interactiva Pràctica
- 10 - Jaume Villarreal Quintana - Grau en Multimèdia
disseny dela navegació
DIAGRAMA_02
DIAGRAMES DE FLUX
Podeu trobar els diagrames de flux en els següents enllaços:
• DIAGRAMA_00
• DIAGRAMA_01
• DIAGRAMA_02
Narrativa Interactiva Pràctica
- 11 - Jaume Villarreal Quintana - Grau en Multimèdia
diss
eny
lògi
cde
scrip
ció
de la
web
clic
a c
lic
Narrativa Interactiva Pràctica
- 12 - Jaume Villarreal Quintana - Grau en Multimèdia
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.
Narrativa Interactiva Pràctica
- 13 - Jaume Villarreal Quintana - Grau en Multimèdia
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.
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
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).
Narrativa Interactiva Pràctica
- 14 - Jaume Villarreal Quintana - Grau en Multimè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.
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
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.
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
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.
Narrativa Interactiva Pràctica
- 15 - Jaume Villarreal Quintana - Grau en Multimèdia
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.
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
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.
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
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.
Narrativa Interactiva Pràctica
- 16 - Jaume Villarreal Quintana - Grau en Multimèdia
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