treball multimedial icaria

ICARIA

Projecte Final de Carrera

Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

2

Agraïments

Aquest projecte no hagués estat possible sense la col·laboració constant de

Raimon Lagonigro, Roger Soldevila i Catalina Acelas que amb els seus

coneixements en programació i multimèdia han ajudat a enriquir i créixer

aquest projecte.

Volem donar especialment les gràcies a Arnau Gifreu, tutor del projecte, per

les seves aportacions i treball realitzat a Icaria. Però sobretot per la seva

paciència, implicació i hores invertides en el projecte.

També a totes aquelles persones que han col·laborat o aportat el seu granet

de sorra i ens han animat durant aquests mesos.

Moltes gràcies

ICARIA



3

INDEX

Introducció...............................................................................................................6

Descripció projecte...................................................................................................7

PRIMERA PART

Conceptualització

Components grup .....................................................................................................9

Títol .........................................................................................................................9

Idea........................................................................................................................10

Objectius................................................................................................................10

Objectius generals .................................................................................10

Objectius específics ................................................................................11

Públic objectiu........................................................................................................12

Metodologia...........................................................................................................12

Preproducció..........................................................................................12

Producció...............................................................................................13

Postproducció ........................................................................................13

SEGONA PART

Marc teòric.............................................................................................................16

Multimedial.......................................................................................................16

Benchmarking........................................................................................16

Criteris de cerca .....................................................................................16

Taula de pàgines web, curtmetratges i tràilers pre seleccionats ..............17

ICARIA



4

Webs seleccionades per a la redefinició del projecte a partir de casos

concrets..................................................................................................19

Audiovisual........................................................................................................21

Videojoc i història ..................................................................................21

Videojocs seleccionats com a referents ...................................................22

La peça audiovisual................................................................................25

Pel·lícules ..............................................................................................26

Altres referents......................................................................................29

TERCERA PART

Requeriments tecnològics.......................................................................................31

Software............................................................................................................32

Navegació i visualització del web........................................................................35

Visualització en tablets i mòbils? ........................................................................36

Web 2.0.............................................................................................................36

QUARTA PART

Arquitectura de la informació .................................................................................41

Arbre de continguts del curtmetratge.................................................................42

Diagrama de fluxe (navegació) ...........................................................................43

Pàgina web............................................................................................44

Curtmetratge.........................................................................................45

ICARIA



5

CINQUENA PART

Disseny interfície ....................................................................................................46

Metàfora gràfica ................................................................................................46

Colors corporatius..............................................................................................47

Contingut web ...................................................................................................51

Elements interactius ..........................................................................................52

Descomposició esquemàtica ..............................................................................53

Website

Curtmetratge

Definició continguts ...........................................................................................72

Conclusions .......................................................................................................75

SISENA PART

Referents i recursos ................................................................................................78

Biografia i Webgrafia .........................................................................................78

ANNEXOS

Benchmarking.............................................................................................................81

ICARIA



6

Introducció

El principal objectiu des de l’inici del curs 2011-2012 ha estat dedicar tot el nostre temps i

esforços en desenvolupar i crear el projecte final de carrera. D’aquesta manera, hem

treballat d’una forma constant integrant tots aquells coneixements que hem adquirit i

après al llarg de la carrera i de diferents referents, com altres treballs audiovisuals i

multimedials, per tal de crear un projecte amb la màxima professionalitat possible.

Aquest projecte suposa un repte per a tots els membres del grup, ja que volem

desenvolupar idees i aspectes tècnics fins ara desconeguts per a nosaltres. Cal destacar que

tractar una temàtica basada en la hibridació entre un curtmetratge interactiu i un videojoc

ha fet que la nostra cerca o objecte de d’estudi es veiés caracteritzat per una forta

diversitat. Aquesta queda reflectida en el treball final el qual es caracteritza per l’ integració

d’elements interactius i audiovisuals en una atmosfera centrada en el videojoc i el

curtmetratge.

D’altra banda, creiem que el projecte final de carrera ha de ser una oportunitat per a

descobrir tots aquells camps de la comunicació audiovisual que menys hem treballat al llarg

dels quatre anys d’estudis. A més, la nostra intenció és desenvolupar un producte

multimedial i audiovisual que a part de ser atractiu, tingui alguna oportunitat fora del cercle

acadèmic al qual està emmarcat.

Finalment, esperem que amb la simbiosi de l’apartat audiovisual i l’apartat multimedial, en

sorgeixi com a resultat un projecte potent, interessant i al gust de tothom.

ICARIA



7

Descripció del projecte

El nostre producte audiovisual i multimèdia consisteix en una hibridació. Aquesta estarà

composta per un curtmetratge de ficció amb un plus d’interactivitat, amb estètica i

elements de videojoc. Tot plasmat, adaptat i ampliat també en una website.

La trama es basarà en la història d’una nena que pateix una malaltia hereditària la qual

només pot curar-se amb una vacuna composta d’elements químics no legals. El pare,

membre del cos de Policia Nacional, ha d’aconseguir tots aquests elements per tal de salvar

la seva filla i ho farà mitjançant petites missions que se li encarregaran via trucades

telefòniques o missatges de text.

La peça estarà dividida en 3 tipologies diferents de realització audiovisual, ja que depenent

de l’acció narrada l’estil de realització canvia. Així doncs hi haurà:

- Imatge cinematogràfica: usada en totes les escenes en les quals es narra la

història present. Serà el fil conductor de la història en general.

- Imatge d’estètica videojoc: aquesta serà usada per les tres escenes en les

que l’usuari ha de participar per al desenvolupament de l’acció. Sent les

imatges que més similitud han de tenir amb l’aspecte estètic dels videojocs,

la imatge estarà post-produïda per aconseguir l’efecte desitjat.

- Imatge en blanc i negre: aquest efecte s’usarà en les tres escenes que

representen un flashback. Per tal d’avisar a l’usuari que està veient un fet

passat, es recórrer a un retoc estètic per evitar confusions i poder seguir el fil

narratiu de la història.

La pàgina web serà la plataforma base del nostre projecte, tot usuari que vulgui veure’l i/o

jugar-hi caldrà que visiti la pàgina. En la seva elaboració utilitzarem el llenguatge de l’Html,

Html5, CSS3 i Flash per tal d’inserir tots els elements interactius.

ICARIA



8

PRIMERA PART

ICARIA



9

Conceptualització

• Components del grup i rols

Segons els coneixements de cadascú i en l’àmbit en que ens desenvolupem amb més

facilitat i còmodes hem assignat els rols de la següent manera:

Elsa Bigas Alsina: Producció i desenvolupament de continguts web.

Georgina Cabrera Castells: Direcció i desenvolupament de continguts web.

Marc Aliart Cortés :Direcció d’art i fotografia, muntatge i postproducció.

Albert Villanueva Carreras: Programador web.

Anna Màrmol Rodríguez: Banda sonora i desenvolupament de continguts web.

Tot i aquests rols assignats, tots els components del grup ens hem ajudat en les

diverses tasques que hem dut a terme durant l’elaboració del projecte.

• Títol del projecte

L’elecció del títol del projecte ha estat una de les parts que més mals de cap ens ha portat.

Creiem que el nom és un element clau a l’hora de difondre el producte. D’aquesta manera,

tenir un nom atractiu farà que el públic s’interessi pel treball, a més a més, en aquest ha

d’estar en relació amb el producte però sense desvetllar-ne l’essència.

Després de fer un brainstorming on van sorgir diversos noms, ens vam acabar decantant

per Icaria. Aquest fa referència a la mescla d’ingredients que composarà l’antídot per salvar

la filla del protagonista. L’usuari podrà relacionar el nom del títol amb el seu significat, ja

que es mencionarà al llarg del guió. A més, l’element interactiu o llistat en el qual apareixen

les tres substàncies que Pablo ha d’aconseguir, es caracteritza perquè cada substància

apareix amb la primera lletra en vermell fent que l’usuari visualitzi ràpidament que la

lectura de totes aquestes juntes formen Icaria.

ICARIA



10

• Idea

Curtmetratge amb estètica de videojoc i de temàtica de ficció. L’argument tracta sobre una

nena que té una malaltia hereditària que només es pot curar amb una vacuna composta

d’elements químics no legals. El pare ha d’aconseguir tots aquests elements per tal de

salvar a la seva filla.

Objectius

• Objectius generals

El principal objectiu és el de poder oferir al públic una nova manera de consumir un

producte audiovisual creat a partir de la hibridació d’un curtmetratge i un videojoc, amb un

plus d’interactivitat, ja que l’usuari haurà de participar activament al desenvolupament de

la història tot seleccionant en determinats moments quin camí els personatges han de

seguir.

Com hem explicat anteriorment, el nostre projecte és una barreja de diferents productes

audiovisuals. Aquest fet ens beneficia, ja que això comporta atraure a diversos públics.

D’una banda oferim un producte que pot agradar a un consumidor habitual de videojocs, ja

que incorporem al curtmetratge elements típics d’aquest gènere, com els gràfics, la

interactivitat en el desenvolupament del joc, els punts de vista... D’altra banda esperem

atraure l’atenció dels consumidors habituals de peces audiovisuals. Tot i tenir una

estructura narrativa diferent a la major part de curtmetratges, les imatges, el diàleg i la

banda sonora són típiques d’aquest gènere.

A més, també volem que el nostre treball el puguin gaudir persones que habitualment no

consumeixen aquests productes, però que a través de les xarxes socials, el boca a boca o

per casualitat arribin a la nostra interfície web.

ICARIA



11

• Objectius específics

Quant a la peça audiovisual

- Donar a conèixer el curtmetratge a la plataforma web de manera gratuïta

- Coneixement més ampli sobre aquest nou gènere de curtmetratge.

Quant als elements interactius

- Que proporcionin valor afegit a la peça audiovisual, dotant-la així

d’interactivitat.

- Investigar com inserir aquest elements interactius al vídeo de la millor

forma possible per tal de fer-los el màxim d’eficaços i que aportin

informació adient en cada cas.

Quant a la plataforma web i al software utilitzat

- Investigar els nous llenguatges de programació Html5 i les novetats que

incorpora respecte l’ultima versió.

- Usar totes les eines existents per a fer un producte el màxim d’interactiu,

fàcil d’usar i atractiu.

Quant a nosaltres (formació)

- Aplicar a aquest projecte el millor de cadascú de nosaltres i tots els

coneixements adquirits durant els 4 anys cursats a la universitat.

- Aprendre a utilitzar el llenguatge Html, Html5, CSS3 i el Flash.

- Aprendre a desenvolupar aquest nou gènere.

ICARIA



12

• Definició del públic objectiu

El nostre producte audiovisual està orientat cap a un públic major d’edat, aficionat als

videojocs i /o amb una amplia cultura audiovisual. Creiem que el públic que comprendrà

millor el nostre producte és aquell jugador habitual de videojocs i consumidor potencial de

productes audiovisuals de tots els formats i gèneres.

El producte presentat és, com ja hem explicat, un híbrid entre curtmetratge audiovisual de

ficció i videojoc, ja que es tracta d’una simulació d’una partida de videojoc però amb

imatges reals. A més, cal destacar que la temàtica tractada a la història està carregada de

violència explícita i consum i tràfic de drogues.

Més específicament, podem dir que el públic potencial l’ubiquem en homes i dones d’entre

els 18 i els 35 anys. D’aquesta manera englobem tant a les generacions més recents de

joves, que mitjançant Internet han pogut ser testimonis de nombrosos productes

audiovisuals de qualsevol índole, i alhora són habituals consumidors de videojocs.

D’altra banda, les generacions més grans ja a finals dels anys 70 van començar a tastar les

delícies de la imaginació que proporcionaven els primers videojocs, i alguns en són encara

habituals usuaris. Alhora també es tracta d’un target amb un nivell econòmic mitjà, ja que

tot i que el nostre producte és gratuït, l’usuari només l’entendrà i el gaudirà si té una

regularitat d’adquisicions en l’àmbit del videojoc.

Metodologia

Partint de la idea de realitzar un curtmetratge interactiu i una interfície web per poder-lo

visualitzar i accedir a contingut addicional, hem seguit aquest tres passos per tal de dur a

terme la producció de la manera més acurada.

• Preproducció

Hem seguit els següents passos:

ICARIA



13

- Documentar-nos sobre l’existència de curtmetratges interactius, sobre la seva

temàtica, estètica, tipus d’interactivitat, plataformes on visionar-los...

- Conceptualització i definició de la idea.

- Definició dels objectius tant generals com específics.

- Elaboració d’un benchmarquing i el marc teòric.

- Elecció de la metàfora i del títol del projecte.

- Redacció del guió i storyboard.

- Definició d’espais, direcció d’art i fotografia i càstings.

- Arquitectura de la informació.

- Disseny de l’estructura i apartats del pàgina web.

- Elecció de logotip, colors i tipografia.

• Producció

- Rodatge

- Aplicacions 2.0 (blog de rodatge, facebook, twitter...)

- Creació del website i els seus continguts textuals.

• Postproducció

- Edició dels continguts amb Premiere.

- Postproducció del curtmetratge amb el software After Effects.

- Aplicació dels elements interactius al vídeo, a partir de Flash.

- Activació de la pàgina web a Internet.

ICARIA



14

- Actualitzacions de les plataformes 2.0

- Modificació de la redacció del projecte final.

ICARIA



15

SEGONA PART

ICARIA



16

Marc teòric

Multimèdia

• Benchmarking

Criteris de recerca

Per tal de realitzar la cerca, vam establir unes línies d’anàlisi totes elles enfocades a la

temàtica tractada en el nostre projecte. L’objectiu era veure que s’ha creat en relació amb

el tema que nosaltres tractem, veure com s’han plantejat en altres projectes diversos

aspectes que nosaltres no sabíem com resoldre, i descobrir noves maneres d’aplicar

tècniques i recursos.

D’aquesta manera, alhora que anàvem plantejant quins eren els punts més importants per

a ser investigats i portats a terme en el nostre estudi també vam anar acotant els criteris a

seguir en la nostra cerca. Com a resultat, hem establert quest seguit de paràmetres els

quals giren entorn una sèrie de formats concrets com són:

- Webs de videojocs.

- Webs promocionals de llargmetratges o curtmetratges.

- Curtmetratges interactius online.

- Tràilers de videojocs.

- Tràilers de pel·lícules que ens puguin influenciar.

- Altres webs que per un aspecte de disseny ens puguin semblar interessants.

ICARIA



17

Taula de pàgines web, curtmetratges i tràilers preseleccionats

a) Curtmetratges, bandes sonores i tràilers

Nom del web URL Any

Deliver me to hell www.youtube.com/watch?v=9p1yBlV7Ges 2011

Left for dead www.youtube.com/watch?v=80nZ5b_DKms 2011

El Padrino www.youtube.com/watch?feature=player_embedded&v=GVFCOIlKuIQ#! 2009

DaveChapelle http://www.youtube.com/watch?v=YQLWkXt4p1U 2011

DonyYet www.youtube.com/watch?v=hhKA6yuq85Q&feature=related 2011

Ciudad de la sombra http://ciudaddelasombra.net/category/producciones/ 2011

Just Cause 2 http://www.youtube.com/watch?v=ZJtP24Ij7ZM 2011

Batman: ArkhamAsylum http://www.youtube.com/watch?v=k32ELE9qZJ8 2010

Crank www.youtube.com/watch?v=h9DDIdaA7GA 2011

Themanwhowasn’tthere http://www.youtube.com/watch?v=htxvLcSnOU0 2010

BSO Thefight Club http://www.youtube.com/watch?v=kgNF7_EWEZo 2011

Pwnisher http://www.youtube.com/pwnisher#p/u/3/dZ4FGm9Fwvg 2011

God of war III http://www.youtube.com/watch?v=Hiieqlgbn2c 2011

Call of duty http://www.youtube.com/watch?v=-aLszbWVoBU 2011

Escapeformcity http://www.youtube.com/watch?v=-UmPxUMW4h8&feature=related 2011

Tubeadventures http://tinyurl.com/d6w59yc 2008

Bullysteria http://tinyurl.com/cld2sao 2011

TwistedPictures http://www.youtube.com/watch?v=KEZul_gTmbM 1999

Tipp-ex http://tinyurl.com/ctzhtu7 2011

ICARIA



18

b) Pàgines web

Nom del web URL Any

Mindstorming http://www.mindstorming.tv/es/ 2010

Bioshock http://www.2kgames.com/bioshock/ps3/us/launch.html 2008

Grand Theft Auto

IV

http://www.rockstargames.com/IV/ 2011

Nave interactivo http://neave.com/es/ 1999

Thething http://www.thethingthemovie.net / http://www.quieneslacosa.es 2011

Yobadaz http://www.yodabaz.com/ 2010

Cinema

producciones www.cinemaproducciones.es 2011

Megaconsolas www.megaconsolas.com 2011

JMP Studios www.jmpstudios.es 2010

Machinima www.machinima.com 2009

Mark Ecko http://www.marcecko.com 2011

Final Fantasy XIII http://www.youtube.com/watch?v=naUSBEVRLng 2011

World of

Warcraft

Cataclysm

http://www.youtube.com/watch?v=Wq4Y7ztznKc 2011

L.A.Noire http://www.rockstargames.com/lanoire/agegate/ref/?redirect= 2010

Super8 http://www.super8-movie.com/ 2011

Transformers 3 http://www.transformersmovie.com/ 2011

REC 3 http://rec3genesis.com/ 2011

Multiopticas http://www.combina2mo.com 2011

ICARIA



19

EA Games http://www.ea.com/battlefield 1982

MPORA www.mpora.com 2011

Electronic Art

Esports www.easports.com 2011

2K Games www.2kgames.com 2011

Battlefield 3 www.battlefield.com/battlefield3 2010

Zune www.zune.net/ 2010

KONAMI www.konami.com 2011

Gears of war www.gearsofwar.com/xbox 2011

Forza Motor

esport www.forzamotorsport.net 2011

Webs seleccionades per a la redefinició del projecte a partir de casos concrets :

Del total de les 50 pàgines web, nosaltres hem seleccionat les 10 que considerem més

representatives. D’aquests deu exemples en podrem extreure certs elements que

incorporarem a la nostra pàgina web. Els mostrem a continuació:

- Ús que es fa de la interactivitat.

- Ambientació basada en el món dels videojocs.

- Joc de plànols i moviments de càmera.

- Utilització d’elements interactius i objectes amb informació addicional.

- So i música.

- Tractament de la llum i dels colors.

- Ús i tractament del logotip.

- Utilització de vídeos introductoris.

ICARIA



20

- Ús de diferents xarxes socials per establir contacte amb els usuaris.

- Navegació i estructura de les diferents webs escollides.

Finalment, cal assenyalar que les pàgines web triades estan classificades en funció de quin

aspecte ens ha cridat l’atenció i hem considerat rellevants respecte les altres. D’aquesta

manera, exposem d’una forma més entenedora els nostres referents per tal de facilitar la feina

a l’hora de portar a terme aquest estudi i extreure els elements necessaris per a realitzar la

nostra pàgina web.

Pàgines web, curtmetratges i tràilers seleccionats:

1. Per l’estètica i la funcionalitat:

Mindstorming

Bioshock 2

GrandTheft Auto IV

Nave Interactivo

The thing

Yobadaz

2. Pel contingut:

Delivery me to hell

Left for dead

El padrino

Dave Chapelle

ICARIA



21

Audiovisual

Com hem mencionat anteriorment, el curtmetratge interactiu Icaria és una hibridació entre

un videojoc i un curtmetratge realitzat amb cinema o vídeo. És per aquest motiu que la

nostra peça té referents tant audiovisuals com del món del videojoc. Els referents que ens

han inspirat a l’hora de crear aquest projecte han estat:

• Els videojocs i la seva història:

Aquest format es tracta d’un programa informàtic, creat expressament per divertir, basat

en la interacció entre una persona i un aparell electrònic on es porta a terme el videojoc.

Aquests recreen entorns virtuals en els quals el jugador pot controlar a un personatge o

qualsevol altre element d’aquest entorn, per aconseguir un o varis objectius a través

d’unes normes determinades.

La història dels videojocs està marcada per els avenços de la tecnologia i la competència

entre les diferents companyies del sector. En aquest apartat exposarem l’aparició de les

primeres companyies i videojocs per tal de tenir una visió general d’aquesta indústria, que

cada cop més suposa una alternativa al cinema i l’oci en general.

El primer videojoc de la història va ser creat per William Nighinbottham el 1958 a través de

la utilització d’un oscil·loscopi de laboratori i era anomenat “Tennis per a dos”. Aquest va

ser comercialitzat per la casa Atari l’any 1972 amb el nom de Pong. L’any 1961 Steve

Russell va crear SpaceWar, el qual es considerat el primer videojoc per ordinador. Aquest

era per a dos persones i cadascuna d’elles portava una nau intentant-se disparar

mútuament.

Ralph Baer es considerat l’inventor dels videojocs tal i com els coneixem avui en dia gràcies

a que va realitzar la primera consola. Baer volia construir un sistema de videojocs

comercials per poder jugar des de casa i va ser l’any 1972 quan va poder comercialitzar

amb èxit la seva primera consola anomenada MagnavoxOdissey.

ICARIA



22

La companyia Atari va contraatacar l’any 1977 amb la creació d’una consola també

domèstica que únicament donava la possibilitat de jugar al seu videojoc amb major èxit, el

Pong.

Després de tretze anys en els que Atari va tenir el monopoli de la indústria del videojoc va

aparèixer la companyia NES (Nintendo Entretainment System) donant un gir a tot el que

s’havia conegut fins a llavors en aquest món amb la creació de formats més originals i

creaius, on cal destacar l’aparició de Super Mario Bros.

Cap a la dècada dels 90 la indústria dels videojocs va patir un canvi molt important amb

l’aparició de les primeres consoles de “32 bits” . Aquest va suposar l’aparició d’una nova

generació de màquines o plataformes més potents com és el cas de la creació l’any 1994

de la primera consola realitzada per la casa Sony, anomenada Play Station. El 1996

Nintendo va fabricar la primera consola de “64 bits”, Nintendo 64, començant d’aquesta

manera l’era del 3D.

Aquest últim canvi a suposat de vital importància per establir un avanç i un després en el

món dels videojocs. Encara avui en dia continua evolucionant i expandint-se entre tots els

públics, un clar exemple és la consola Wii dissenyada per a tota la família. A més, els seus

treballats i acurats gràfics i dissenys, que cada cop ens posen més en qüestió què és

realitat i ficció, han fet que els videojocs i el 3D es vagin expandit a nous mercats com és el

del cinema.

• Videojocs seleccionats com a referents:

1. Grand Theft Auto IV (GTA):

Es tracta d’un joc d’acció-aventura d’estil “sandbox” que pertany a l’empresa

Rockstar Games. El primer joc d’aquesta saga va ser llençat el 1997. Aquest explica

la vida de diferents criminals, la història dels quals es va relacionant i cada vegada

es veuen implicades més persones.Tots els personatges del GTA IV són antiherois,

igual que Pablo el protagonista del nostre projecte.

ICARIA



23

D’aquest videojoc hem incorporat al nostre treball l’element interactiu del telèfon

mòbil. Aquest apareix en pantalla automàticament quan el jugador reb una trucada

o un missatge de “el Russo”. El jugador ha de clicar damunt del mòbil per a poder

conèixer la següent missió. En cas que el jugador ometi aquest element al cap de

vint segons es mostrarà el missatge de forma automàtica.

A més, estendrem aquesta idea d’elements interactius a altres objectes com és, per

exemple, una llista interactiva desplegable amb les substàncies que el protagonista

ha d’aconseguir per assolir el seu objectiu.

2. Call of Duty:

Va sortir a la venda l’any 2003 de les mans d’Infinity Ward. És un videojoc de

caràcter bèl·lic basat en la Segona Guerra Mundial. El protagonista, com la majoria

de shooters (jocs en el qual el protagonista és un tirador), fan ús de la vista

subjectiva per posar a l’usuari a la pell del protagonista. Aquest recurs és el que

nosaltres hem incorporat en el nostre projecte.

El punt de vista subjectiu ens és molt útil en els moments en què Pablo ha de

disparar en contra dels seus enemics, ja que ens ajuda aconseguir l’estètica i crear

l’atmosfera de videojoc desitjades. Per tal d’aconseguir aquest efecte, hem fet

servir una steadycam realitzada manualment amb un trípode i una motxilla.

ICARIA



24

D’altra banda, ens hem inspirat en l’ús que fa aquest videojoc d’un mapa de

localització. Aquest tipus de recurs serveix per poder situar el personatge en la

pantalla i a l’usuari en el joc.

2. Metal Gear Solid:

Joc ideat el 1987 per Hideo Kojima i distribuït per Konami, es tracta d’un joc de rol,

First Person Shooter, on t’has d’infiltrar a diverses entitats. Aquest va tenir tant èxit

que va portar a fer mes versions i distribucions.

D’aquesta mítica saga hem extret un aspecte clau per el desenvolupament de la

història, la discreció. En aquest videojoc, actuar amb màxim de sigil i precaució

permet a l’usuari assolir les missions encomanades. Així doncs, en el nostre

curtmetratge tenir cura de no ser descobert, d’aixecar el mínim de sospites i de

cometre els crims de manera gairebé imperceptible, permetran assolir l’objectiu

principal del joc.

A més, l’elecció correcte en el moment d’interactivitat recau en aquella en què

l’acte criminal es dur a terme de manera discreta. D’aquesta manera, El camí que

porta al jugador al game over, sol ser aquella en la qual el protagonista actua de

manera visible per a la resta de personatges i per tant sol ser descobert.

ICARIA



25

• La peça audiovisual:

La peça audiovisual ha requerit un tractament especial perquè està formada a partir d’una

hibridació entre videojoc i curtmetratge interactiu. Aquest fet ha afectat a la seva

composició i a prendre una sèrie de decisions determinades a l’hora de realitzar l’

estructura del curtmetratge. Per aquest motiu, els criteris de recerca en el moment

d’escollir els referents adequats han estat de vital importància i s’han realitzat i analitzat

d’una manera molt acurada.

Aquest estudi es pot dividir en 3 parts: videojocs, pel·lícules i altres referents. Així doncs,

aquestes parts recullen tots els videojocs, pel·lícules, curtmetratges o pàgines webs que

pel seu contingut audiovisual ens han semblat interessants o importants de ser tractades

com a objecte d’estudi a l’hora de realitzar i conceptualitzar el nostre projecte.

Per tal de poder desenvolupar i realitzar d’una manera més precisa el nostre anàlisi sobre

els referents, vam realitzar un breu estudi previ sobre els gènere dels videojocs, esmentat

en el apartat anterior. Aquest fet es va donar per la falta de coneixement sobre aquest

gènere i per la importància que aquest té en el nostre curtmetratge i que ens obliga

conèixer alguns punts essencials.

D’aquesta manera, hem establert com a concepte clau dels videojocsla seva missió

d’entretenir i la possibilitat de poder viure experiències que no es poden assolir en la

realitat. Així doncs, hem intentat mantenir aquest objectiu al llarg de tota la realització de

la peça per tal de no perdre l’essència d’aquest gènere tan peculiar.

A continuació, hem exposat una breu explicació dels nostres principals referents

audiovisuals per tal d’exposar i donar a entendre d’una manera més concreta quins són els

punts que hem tingut en compte per poder elaborar el curtmetratge interactiu. A més, cal

destacar que al no tenir com a referència un únic gènere fa més necessària l’explicació

directe de cada referent per poder entendre quins són el seguit d’idees que ens han

motivat i servit d’inspiració.

ICARIA



26

• Pel·lícules

1. JohnQ:

Gènere: Drama. Pel·lícula dirigida per Nick Cassavetes i produïda per New Line

Productions. El film tracta d’un home nord-americà que davant la malaltia cardíaca

que pateix el seu fill està disposat a fer el que sigui. El nen necessita ser operat

urgentment, però la família no disposa d’una bona assegurança mèdica i no poden

pagar l’operació

Hem pres aquest film com a referent per l’argument , ja que salvant algunes

diferències la situació en què es troben els dos protagonistes es bastant semblant.

Ambdós intenten de salvar la vida dels seus fills i estan disposat a arriscar la seva

pròpia per tal d’aconseguir-ho.

Altres similituds les trobem en el canvi de personalitat que adopta el personatge

davant de casos de vida o mort on passa de ser un personatge completament

normal a fer coses que mai es podria imaginar per tal de salvar a una persona.

ICARIA



27

2. Rèquiem for a dream:

Gènere: Drama. Dirigida per Darren Aronofsky i produïda per Thousand Words. El film

tracta d’un noi i la seva mare, els quals tenen somnis molt diferents. La mare fa dieta

esperant tenir l’ oportunitat de poder aparèixer algun dia en el seu programa preferit de

televisió. Calvi, el fill, i la seva novia somien en guanyar-se la vida venent droga i utilitzar els

guanys per obrir un negoci propi. Tots dos faran el que faci falta per aconseguir el seu

somni.

D’aquest film prenem com a referent l’argument i alguns recursos tècnics. Així doncs, hem

pres especial atenció en el comportament de les persones immerses en el món de les

drogues, com es tracten entre elles, els llocs que freqüenten, són aspectes que hem tingut

en compte i ens hem fixat per tal d’elaborar el nostre projecte.

En quanta recursos tècnics, hem tingut en compte d’una banda el tipus d’il·luminació. En

general la pel·lícula usa tonalitats fredes. A l’igual que el nostre projecte, volem que els tons

predominants siguin els freds, per tal de transmetre aquest ambient de tensió.

D’altra banda recursos tècnics emprats en la realització d’aquest film també ens van

semblar d’allò més atractius per a incloure en el nostre curtmetratge. Algunes seqüències

en càmera ràpida, o alguns plans en punt de vista subjectius, són elements que volem

incloure en la realització del nostre curt.

ICARIA



28

• Funny Games:

Remake de la pel·lícula del mateix títol dirigida per Michael Haneke el 1997, un film de

thriller i suspens nord-americana on es mostra com les vacances d’una família es veuen

afectades per dos nois de ment pertorbada.

D’aquest film ens ha interessat per al nostre projecte només un recurs tècnic emprat en

una escena. En un moment determinat del desenvolupament de la història, els dos

personatges protagonistes perden el control de la situació. Per tal d’arreglar la situació, un

dels personatges principals agafa el comandament a distància i prem el botó de rebobinar

endarrere. D’aquesta manera el film es rebobina fins al punt en que ell pot tornar tenir el

control de la situació i fer anar els esdeveniments d’acord als seus interessos.

D’aquest fragment esmentat hem extret i adaptat aquest rebobinat. Així doncs, en cas que

l’usuari hagi escollit el camí que condueix a la mort, es rebobinarà fins al punt on se li han

mostrat les dues opcions a escollir.

ICARIA



29

• Altres referents

www.takethislollipop.com

Jason Zada és el creador d’aquesta interfície web i del vídeo que conté. Es tracta d’una

crítica a la poca privacitat de Facebook, a la vegada que alerta a la gent del perill que pot

comportar publicar les nostres dades a qualsevol lloc i a l’abast de tothom.

El que ens interessa del producte no és el contingut en sí, sinó l’estètica d’aquest. L’ús d’un

color a les imatges que torna les superfícies com metàl·liques i que recorda a l’estètica dels

videojocs.

D’altra banda, la il·luminació del curt també té certa semblança al tipus d’il·luminació que

nosaltres volem donar al nostre projecte. En els espais interiors hi ha un focus de llum

concret mentre que la resta de l’estança queda en la penombra.

ICARIA



30

TERCERA PART

ICARIA



31

Requeriments tecnològics

Abans d’iniciar-nos en el procés de creació de l’entorn web, es va fer un anàlisi per tal de

conèixer les tècniques i recursos tecnològics que l’actual xarxa ens ofereix. Amb aquest

petit estudi esperàvem trobar la fórmula més adient per confeccionar la nostra pàgina web.

A més, es va tenir en compte els estàndards actuals i futurs que tenen intenció

d’implementar les grans plataformes.

Hi ha dues eines principals per a programar una pàgina web: l’Adobe Flash d’una banda i el

llenguatge Html, o la nova versió Html5 de l’altre. A més, aquests llenguatges tenen un

seguit de complements que es poden afegir per a fer una web més potent, com pot ser el

CSS, el Javascript i les llibreries JQuery per afegir moviment i interactivitat a les pàgines

web.

Després d’analitzar les possibles opcions i valorant el coneixement que els membres del

grup teníem de cadascuna d’aquestes hem optat per programar i dissenyar la web a partir

de l’Html i complementar-lo amb totes aquelles eines que el poguessin fer més potent.

D’altra banda, també es va fer un anàlisi de les possibles opcions que teníem per a

programar el curtmetratge interactiu. Les opcions actuals per a programar-lo eren tres:

Adobe Flash, Popcorn o bé 3wdoc.

Els tres sistemes de programació permeten incloure elements interactius i informació

addicional a vídeos online.

En aquest cas l’elecció va estar marcada per factors externs els quals no hem pogut

controlar. Finalment ens hem decantat per programar a través de Flash, gràcies a l’ajuda de

l’Arnau Gifreu, ja que els nostres coneixements en Flash eren molt limitats.

Adobre Flash presenta certs inconvenients amb els quals de moment haurem de conviure.

D’una banda, crear un projecte amb Adobe Flash pot presentar algun problema al penjar el

ICARIA



32

projecte en xarxa, ja que en certs casos el funcionament i agilitat de navegació no és

l’optima,provocant que l’usuari s’hagi d’esperar per a poder consumir el producte.

Aquest fet però, l’intentarem de solucionar a través de còdecs que comprimeixin el pes del

vídeo i permetin una reproducció el màxim d’àgil i continua possible.

D’altra banda, Adobe Flash no es compatible amb totes les companyies, plataformes o

navegadors que usen els tablets i els dispositius mòbils.

Les ganes de treballar amb un llenguatge emergent i potent que ens servís de plataforma

de sortida un cop acabat el curs acadèmic, va ser el que ens va fer decantar per programar

la nostra pàgina web amb Html5 i tots els llenguatges que el complementen.

Software usat

Html:

És el llenguatge de marcat predominant per a l’elaboració de pàgines web. Tot i que la nova

versió de l’Html aporta nous elements, hem decidit definir l’estructura bàsica i general de la

interfície web amb la versió anterior. Complementarem aquesta estructura bàsica amb els

nous elements de l’Html 5 i totes les eines existents per fer més atractiva i potent la nostra

interfície web.

Html 5:

L’Html 5 és la nova versió de l’Html. Segueix les bases de l’Html, però aporta avantatges

respecte la versió anterior, per la qual cosa el fa molt més potent. Estableix una sèrie de

nous elements i atributs que reflecteix els canvis en les pàgines web més modernes. Així

doncs alguns elements proporcionen noves funcionalitats a través d’una interfície

estandarditzada, com són els elements <audio> i <video>.

Aquests dos elements són molt rellevants en una pàgina web com la d’Icària, ja que els

elements que han de tenir més pes dins la interfície web és el curtmetratge i els elements

sonors.

ICARIA



33

Les etiquetes àudio i vídeo ens ofereixen la possibilitat d’integrar vídeos i àudios de manera

fàcil i còmode, sense necessitat d’instal·lar plugins addicionals, com el Flash Player, al

nostre navegador o ordinador per poder consumir aquell element. D’aquesta manera la

compatibilitat entre navegadors i extensions és total i permet el consum d’aquell producte

multimèdia sense problema.

En el nostre cas hem usat l’etiqueta àudio per integrar sons en els elements que conformen

el menú principal de la web. D’aquesta manera, aconseguim que indiferentment del

navegador que usi l’usuari pugui escoltar aquests sons.

Aquesta compatibilitat s’aconsegueix pujant el so desitjat en dos formats, l’mp3 i el webM.

CSS3:

Per tal que l’Html5 sigui potent, és necessari l’ús d’eines complementàries com el CSS.

Aquest llenguatge té com a funció principal separar el contingut de la forma. Des de la

primera versió de CSS es va assolir aquest objectiu, però tot i així no oferia un control total

als dissenyadors sobre elements de la pàgina. Aquests tenies trucs per aconseguir efectes

tant desitjats com els ombrejats o els contorns rodons.

Amb el CSS3 s’incorporen nous mecanismes que aporten als desenvolupadors web, major

control sobre l’aspecte final de visualització dels continguts sense haver de recórrer a trucs

o hacks que complicaven molt el codi.

Les noves propietats que el CSS3 aporta, entre moltes d’altres són: contorns, fondos, colors,

degradats, text i selectors.

En el nostre projecte n’hem fet servir varis, per exemple:

• Rotate: l’hem usat per simular que les fotografies de l’apartat ‘Qui som? ‘ giren i tenen

una aparença 3D.

ICARIA



34

• Ombrejats: dels efectes de text que aporta el nou CSS, hem usat l’efecte ‘Text

shadow’. D’aquesta manera aconseguim generar una ombra als títols de l’apartat

‘Extres’.

Per últim, la nova versió de CSS permet de pujar nous estils tipogràfics a una llibreria i que

es guardin de forma indefinida.

JQuery:

Per tal de donar dinamisme a la web hem usat el framework o biblioteca d’efectes JQuery

de Javascript.

JQuery presenta avantatges respecte el llenguatge Javascript, ja que la redacció de codi es

més simple i simplifica la interacció amb l’Html.

Aquest llenguatge ens ha permès animar elements de la pàgina web com el menú principal

a través d’un efecte ‘scroll’ lateral. Aquest moviment es crea a partir de l’efecte

‘mousemove’, el qual quan es mou el mouse, la imatge del menú principal també es mou.

AdobeFlash:

El software Adobe Flash és un potent entorn de creació d’animacions i contingut

interactiu. L’ús d’aquest software ha estat imprescindible per a animar els elements que

s’han integrat al curtmetratge i fer-lo interactiu. Tot i això i com hem esmentat

anteriorment, aquest programari presenta moltes limitacions, ja que no és compatible

amb certs navegadors de tablets i dispositius mòbils.

Streaming de vídeo:

Com hem comentat anteriorment, hi ha un total de 18 vídeos que conformen el nostre

curtmetratge interactiu. Penjar tot aquest volum d’informació a la web i que aquest es

reprodueixi correctament no és una tasca senzilla.

De moment el curtmetratge interactiu no es podrà veure online degut al problema

del pes dels vídeos i es mantindrà en local per poder ser mostrat el dia del tribunal.

ICARIA



35

Mentrestant els membres del grup treballen per aconseguir pujar aquest curtmetratge

online i poder ser consumit a través de la xarxa.

Prenent el projecte de final de carrera ‘El orgullo se limpia con sangre’ com a referent en

quant a la programació del curtmetratge interactiu i per el tipus de mode de reproducció

que un grup d’alumnes va fer l’any passat, nosaltres en un primer moment hem exportat

els vídeos en format .mp4 en alta definició i se’ls hi ha passat un códec de vídeo H264.

Això no ha estat suficient ja que els vídeos per a la web no han de pesar molt per tal que la

web els suporti i en el nostre cas determinats clips de vídeo tenen molt de pes . Hem optat

per a dividir en diverses parts aquells vídeos que pesaven més, i a més convertir tots els

vídeos que conformen el curtmetratge interactiu a format .mov i passar-los-hi un códec

webM a 900kbps.

D’aquesta manera esperem poder pujar el més ràpid possible tots els vídeos a Internet i

que l’usuari pugui consumir-lo a través de la nostra pàgina web.

Navegació i visualització de la web

En el punt que ens trobem actualment, la pàgina web és compatible amb les últimes

versions dels navegadors més usats, que són: Firefox 4.0, Safari 5.0, Chrome 11, Opera 11 i

IE 9.

Tots aquests navegadors accepten correctament el llenguatge Html5, usat en alguns

elements de la nostra pàgina web.

Visionar la pàgina web ProyectoIcària en versions antigues dels navegadors anteriorment

esmentats, generarà problemes i no es veurà la pàgina correctament.

Remarcar que amb el navegador Opera 11 i IE9 hi ha un problema de visualització amb el

CSS3. Aquests navegadors no permeten veure un dels efectes d’aquest full d’estils.

ICARIA



36

Visualització tablet i mòbil

Després d’haver fet vàries proves de visualització de la pàgina web Proyectoicària

amb iPad’s, iPhones i diversos dispositius que funcionen amb un sistema operatiu Android,

hem comprovat que el funcionament web no es reconverteix bé.

Obviar a tot el sector de públic potencial que pot voler accedir a la nostra pàgina web a

través d’un d’aquests dispositius seria un error per part nostra, és per això que hem buscat

una solució el màxim d’efectiva mirant de no perdre a l’usuari.

Hem creat una ruta de redireccionament en el cas que un usuari accedeixi a la pàgina web a

través d’un d’aquests dispositius. Aquest redireccionament condueix a l’usuari a una nova

pàgina d’Icària en el qual se li explica que la pàgina web www.proyectoicaria.com no està

llesta per a ser visualitzada a través de dispositius mòbils.

Web 2.0

• La “prehistòrica” web 1.0

No profunditzarem en aquest tipus de web, ja que ha quedat gairebé absolta i que el nostre

projecte, al ser multimèdia, es tracta d’una web 2.0. Tot i això, cal realitzar una petita

pinzellada per situar en context i poder veure de forma significativa l’evolució de la web 1.0

a 2.0.

Les webs 1.0 (1991-2003) construeixen la forma més bàsica que existeix. Es tractava

(parlem en passat perquè com hem dit, ja gairebé no existeixen) de webs que mai

s’actualitzaven, amb un entorn estàtic i sense interacció amb l’usuari, amb continguts rígids

a la navegació (HTML i GIF). El disseny i la producció de continguts anava a càrrec de

persones especialitzades en informàtica, per tant, molt poca gent podia produir aquests

continguts. Es tractava generalment de webs amb fins comercials amb continguts tant

d’alta com de baixa qualitat, administrats per un webmaster.

ICARIA



37

Anys després, aquest tipus web va anar patint una evolució constant fins arribar al que ara

és anomenada la web 2.0

• Origen del terme 2.0

El terme de web 2.0 sorgeix l’any 2004 quan Tim O’Reilly (fundador i president de O’Reilly

Media) realitzà una conferència que va anomenar “Conferència Web 2.0”. Es va considerar

que s’havia re inventat el que era Internet.

La web 2.0 és la transició entre les aplicacions tradicionals cap a les aplicacions més noves,

les quals necessiten una implicació per part de l’usuari. Aquestes pàgines es caracteritzen

per una àmplia diversitat de continguts administrats pels mateixos usuaris, els softwares i

les aplicacions no requereixen una instal·lació directa al PC per a ser utilitzats.

Tots els dissenys i produccions de la web són realitzats sense la necessitat de tenir grans

coneixements d’informàtica, gairebé qualsevol persona pot dur a terme tots els continguts

de la web. Són webs accessibles i pràctiques amb finalitats diverses, en la majoria de casos

estan creades per a la construcció de comunitats que comparteixen interessos, pràctica i

formació.

La funció principal d’aquestes webs és produir, dissenyar, construir i compartir informació

en diversos suports. En general es tracta de webs amb un feedback entre productors i

consumidors, sent els productors a la mateixa vegada consumidors i viceversa, és a dir, una

arquitectura completament de participació, tota la innovació ve donada per

desenvolupadors independents.

“Web 2.0 es un nombre cómodo para un fenómeno. Se trata de un cambio que va desde la

época en que Internet era un accesorio al PC, hasta el momento en que Internet es una

auténtica plataforma por sí misma.”

Tim O’Reilly

ICARIA



38

Diversos exemples de webs que mostren el que seria l’equivalència de la web 1.0 a la web

2.0:

- Enciclopèdia Catalana Online � Wikipèdia

- Ofoto � Flickr

- Site personal � Blog

D’aquesta manera sorgeixen nous termes com l’anomenat codi obert o OPEN SOURCE amb

el que es coneix el software desenvolupat lliurement. Aquest parteix de la premissa que al

compartir el codi, el resultat acostuma a ser d’una qualitat més alta, però no només es

tracta d’una qüestió tècnica, d’altra banda també hi ha una tendència filosòfica i moral: si

no es comparteix el software lliure és tracta d’una acció considerada anti ètica ja que la

prohibició de compartir entre éssers humans va en contra el sentit com

.

Un altre concepte que s’ha desenvolupat amb la creació de la web 2.0 és el d’una xarxa

PEER – TO – PEER (xarxa entre iguals). Es tracta d’una xarxa d’ordinadors on tots o alguns

aspectes funcionen sense clients ni servidors fixes sinó amb una sèrie de nodes que es

comporten com iguals entre sí. Aquestes xarxes permeten un intercanvi de qualsevol tipus

d’informació, com per exemple fitxers d’audio, vídeo o software..., en qualsevol format,

entre els ordinadors interconectats.

• Web 2.0 i projecte Icaria

L’equip del projecte Icaria en un primer moment va tenir molt clar que volia anar més enllà

de crear un simple curtmetratge audiovisual. El món multimèdia és el que més creix

aquests dies, així que vam decidir apostar per un projecte una mica més complicat; inserir i

adaptar el curtmetratge en una web, però no només això sinó que el propi curtmetratge fos

interactiu per a l’usuari. Obviament aquest projecte no seria possible dur-lo a terme sense

una plataforma com la web 2.0 on l’objectiu principal era i és aconseguir una plataforma on

la participació de l’usuari sigui indispensable per tal de desenvolupar el que és tot el

producte audiovisual.

ICARIA



39

• El futur de la 2.0

Tot i el gran boom que ha tingut i té la web 2.0, no trigarà gaire temps en donar un pas més

i convertir-se en una web 3.0. El triomf de la intel·ligència de les màquines i del món virtual

donaran lloc a webs en 3D, centrades totalment en l’àmbit multimèdia i en ser webs

permanents, és a dir, webs que podrem trobar a tot arreu, no només en els nostres PC,

tablets o mòbils sinó en objectes quotidians com la roba, complements, transports... Tot

aquest procés serà facilitat quan l’usuari tingui una connexió il·limitada a uns preus molt

accessibles.

ICARIA



40

QUARTA PART

ICARIA



41

Arquitectura de la informació

ICARIA



42

Arbre de continguts curtmetratge

ICARIA



43

Diagrama de fluxe (navegació)

ICARIA



44

ICARIA



45

CINQUENA PART

ICARIA



46

Disseny interfície

Metàfora Gràfica

La metàfora gràfica que fem servir a la interfície de la web va lligada plenament amb el

nostre curtmetratge interactiu. D’aquesta manera, es fa ús d’una estètica i composició que

recorda i manté en tot moment l’essència del curtmetratge.

La web es divideix en un nivell principal i quatre subnivells que contenen tota la informació

necessària del projecte. La Home està composada per elements interactius i una

panoràmica dotada de moviment. Aquesta última permet a l’usuari interactuar per tota la

seva interfície aportant-li una forta sensació d’integració en la web i establint un codi comú

que farà possible els escenaris comunicatius i visuals desitjats.

La Home està formada per una taula de despatx amb una sèrie d’elements interactius que

al passar per damunt el cursor són il·luminats i emeten el so característic de l’objecte. Al

ser clicats ens porten a les diferents parts que conformen la website. Aquests elements els

podrem trobar al llarg del curtmetratge i per tant, tenen una forta relació amb la seva

temàtica. Aquests són:

- Càmera de fotos

- Llibreta

- PDA

- Pistola

De la mateixa manera, hi ha un subnivell, el qual trobem a l’apartat Extres, que assumeix

més importància que els altres perquè segueix la mateixa estructura i estètica que el nivell

principal o Home. Aquest representa un altre escenari important de la peça audiovisual,

com és el laboratori. D’aquesta manera, la panoràmica també farà ús d’un seguit

d’elements interactius que es veuran il·luminats al passar el cursor per damunt La

diferència es troba en dos d’aquests elements que es caracteritzen per contenir un stop

motion a l’hora d’accedir a la informació corresponent.. Aquests subapartats són:

ICARIA



47

-Apunts científics

-Safata

-Llibreta

-Balança

Pel que fa la identitat audiovisual cromàtica hem volgut conservar els colors utilitzats en el

curtmetratge. D’aquesta manera, el primer nivell destaca per la utilització d’uns colors

saturats i amb un fort contrast entre aquest i els negres. Amb aquest efecte hem volgut

mantenir l’essència de videojoc que tant caracteritza aquest curtmetratge interactiu.

Els tres primers subnivells: Qui som, vídeo i personatges també segueixen la mateixa

cromàtica que el curtmetratge. D’aquesta manera, destaca l’ús de colors freds i una

estètica rovellada i vella que proporciona aquesta ambientació de desgast que caracteritza

a tot el projecte.

D’altra banda, en el subnivell d’extres trobem un fort predomini de blaus i blancs per

donar la sensació de fredor i puresa d’un laboratori. A més, aquest canvi fort de

cromatisme entre escenaris està pensat per situar ràpidament a l’usuari i advertir-li del

canvi de nivell.

Cal destacar l’utilització d’un filtre Grunge en tots els nivells que ens ha permès unificar i

crear una única ambientació per la website. D’altra banda, la utilització en la presentació de

l’equip d’Icaria d’una estètica policíaca li dóna un toc humorístic al projecte.

Colors corporatius

ICARIA



48

• Pantone Process Black EC

El negre ha estat escollit per representar una de les meitats tant del logotip senzill com el

compost. En el cas del senzill, les dos últimes síl·labes i en el cas del compost la meitat del

escut dels mossos d’esquadra juntament amb la tipografia.

S’ha escollit el color negre, degut a la voluntat de representar una dualitat cromàtica en

acord a la mateixa dualitat que viu el protagonista del curt a nivell psicològic. El negre fa

referència al costat més fosc de l’ésser humà, quelcom ombrívol que impulsa en el cas del

nostre protagonista a cometre actes impensables temps enrere.

• Pantone 484 EC

Aquest color ha estat utilitzat per representar l’esquitxada de sang que trobem al logotip.

En generals gran part del curt interactiu fa apologia de la necessitat del protagonista a

recórrer a la violència per obtenir un fi, i quina millor manera de representar aquest

concepte que no sigui la sang i tot el que el seu color roig indica.

• Pantone Process White EC

Tal com s’ha explicat en el primer apartat (Pantone Process Black EC) el blanc ajuda a

ressaltar l’oposició cromàtica amb el negre. Tanmateix, un cop més no es tracta d’un color

escollit al atzar, sinó que fa referència al costat més noble d’un mateix, a la claredat, la

llum, la justícia i en resum la vida que el protagonista portava abans d’adonar-se que està a

punt de perdre el seu bé més preuat: la vida de la seva filla.

El logotip

El disseny del logotip ha procurat reflectir l’argument i l’essència del projecte en una

identitat visual. D’aquesta manera, hem traslladat els següents conceptes a la identitat

visual:

• Dualitat entre dos mons totalment oposats: El nostre protagonista és un

policia que s’ha d’introduir de primera mà en el món de la droga i les màfies per tal

ICARIA



49

de salvar la seva filla. Per aquest motiu el personatge principal viu una doble vida.

Per una banda trobem el policia exemplar que sempre ha estat del bàndol de la llei

i per altre banda trobem el pare desesperat que matarà i enganyarà per aconseguir

el seu objectiu.

Si extrapolem això al logotip trobarem que Icaria està escrita mitat en blanc i mitat

en negre, simbolitzant aquesta dualitat entre els dos mons i en la mateixa

psicologia del personatge.

• Violència i assassinats: Es trasllada aquest concepte amb la taca de sang. Tal

com explica l’argument del projecte el protagonista és convertirà en un assassí de

policies degut al seu pacte amb Andrej.

• Obscuritat i foscor: S’ha escollit una tipografia bruta i ruda per simbolitzar una

mica la estètica i la essència del curtmetratge interactiu.

• Logotip senzill:

ICARIA



50

• Logotip Compost:

Per a la creació del logotip s’ha utilitzat la tipografia Loserboy Grunge. Es tracta d’una font

amb caràcter propi, i que denota conceptes molt apropiats pel nostre projecte com ara la

foscor, la fredor, la solitud, la impotència.

En el cas d’aquesta tipografia, s’utilitza sempre a una mesura a partir de 20pt, per dos

motius: En primer lloc, perquè en menor mesura la seva lectura esdevé complicada i

costosa i precisament això no ens convé. En segon lloc, perquè no admet minúscules i per

tant no es podria justificar utilitzar lletra majúscula en textos que no siguin títols o

encapçalaments.

Precisament per aquests motius, aquest tipus de lletra només s’utilitzarà en el logotip i en

determinats títols que apareixeran al curtmetratge com ara el nom de les substàncies que

el protagonista anirà recopilant.

A B C D E F G H I J K L M

N O P Q R S T U V W X Y

Z

ICARIA



51

• Logotip compost

En el cas del logotip compost, s’ha seguit utilitzant la mateixa tipografia per al títol del

projecte (ICARIA), però per la resta de text que hi apareix s’ha utilitzat la font 28 dayslater.

En aquest últim cas, s’ha escollit aquesta tipografia perquè així com el cas anterior denota

conceptes relacionats amb l’argument i l’essència del curtmetratge, però alhora dona

diferenciació al text i més presencia al nom del projecte.

Pel que fa a la dimensió, la seva importància és més relativa, ja que només apareixerà en

aquest tipus de logotip. Tanmateix, com en el cas anterior és convenient dotar-la d’un

dimensió de 20pt o superior per facilitar las seva lectura.

A B C D E F G H I J K L M

N O P Q R S T U V W X Y

Z

Contingut web:

Per a la realització dels continguts textuals de la pàgina web s’ha utilitzat la tipografia King

things Typewriter que, com el seu nom indica, simula la tipografia típica d’una màquina

d’escriure.

L’elecció d’aquesta tipografia gira entorn a l’estil general de la website, ja que hem tingut

en compte que tot el contingut es divideixen en diferents fitxes que segueixen l’estructura i

composició d’una fitxa policial. A més, aquesta està dotada de la possibilitat de

transformar-la en negreta i d’ús de minúscules o majúscules. El fet que sigui una tipografia

complexa, ens ha obligat a modificar-la realitzar un espai entre lletres per tal de facilitar i

agilitzar la seva lectura.

ICARIA



52

ABCDEFGHIJKLMNOPQRSTUWXYZ

Abcdefghijklmnopqrstuwxyz

0123456789

Elements interactius:

Per tal de dotar a la peça audiovisual d’una estètica de videojoc, s’ha emprat un seguit

d’elements interactius típics d’aquest format i identificables ràpidament per qualsevol

usuari familiaritzat amb aquest gènere. Cadascun d’ells se l’ha dotat d’una tipografia

concreta segons la seva funció:

• Cartells informatius:

Per a la realització d’un seguit de cartells informatius que apareixen en el curtmetratge s’ha

utilitzat la tipografia 28 days. Aquesta té una estètica Grunge i rovellada que segueix la línia

que hem portat durant tot el disseny de la pàgina web.

Abcdefghijklmnopqrstuvwxyz

0123456789

• Mòbil i missions:

L’aparició d’aquests elements interactius al llarg de tot el curtmetratge ens ha obligat ha

utilitzar una sèrie de tipografies concretes que permetessin a l’usuari entendre ràpidament

que es tractava d’un dispositiu mòbil i que el que allà apareixia era un missatge.

ICARIA



53

Per aquest motiu , en la realització dels missatges es va escollir la tipografia Pixel splitter, ja

que es troba dintre de la temàtica LCD o estètica digital. D’aquesta manera, podríem

assenyalar que la seva característica principal és la composició pixelada tan apropiada per

donar aquesta sensació de missatge de text a l’element.

ABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXZZZZ

0123456789012345678901234567890123456789

En el cas del mòbil vam fer ús de la Franklin Gothic Medium, tipografia instal·lada per

defecte a tots els sistemes Mackintosh i Windows garantint la seva llegibilitat en tots els

sistemes operatius i navegadors. Aquesta, a diferència de la Pixel splitter, s’ajustava millor a

la pantalla de l’aparell facilitant la seva lectura per part de l’usuari.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Descomposició esquemàtica:

• Website

En aquest apartat es realitzarà un breu recorregut per totes les parts que

composen la website d’Icaria. D’aquesta manera, presentarem les diferents

elements i funcions que contenen cadascuna d’elles a més de realitzar una

breu explicació sobre alguns recursos tècnics emprats que hem vist de vital

importància citar en aquest apartat.

ICARIA



54

Home

La home d’Icaria es divideix en quatre parts principals les quals venen representades per

una sèrie d’elements interactius:

- Càmera fotogràfica: Qui som

- PDA: Vídeo

- Pistola: Personatges

- Llibreta: Extres

ICARIA



55

Aquests elements es troben dintre d’una imatge panoràmica que simula una de les escenes

del curtmetratge, el despatx de l’inspector Suárez. Aquesta panoràmica es caracteritza per

donar a la possibilitat a l’usuari de desplaçar-se per tota la pantalla i d’aquesta manera

crear una certa interactivitat o relació entre l ‘usuari i la pàgina web.

Els elements mencionats anteriorment tenen la funció de representar el menú gràfic que

composarà i estructurarà tota la interfície web. Inicialment, tota la panoràmica es troba

amb la mateixa tonalitat i dóna la sensació que aquests elements no hagin de realitzat cap

mena de funció, no obstant, quan l’usuari passa el cursor per damunt d’un ells aquest

s’il·lumina i emet el so característic de l’aparell.

D’altra banda, en un cantó de la home apareixen dos botons que ens condueixen a les dos

xarxes socials del projecte, Facebook i Twitter. Tot i que l’usuari es desplaci d’un cantó a

l’altre de la panoràmica aquest icones continuaran visualitzant-se en la pantalla perquè

aquests sempre els tingui disponibles en el moment que vulgui accedir.

D’aquesta manera, podem assenyalar que la home d’Icaria destaca per la seva senzilla i per

ser una pàgina web purament visual. Simplement, utilitza un menú gràfic dins d’una

panoràmica elaborada i dinàmica.

ICARIA



56

Qui som

Aquest apartat, el qual es trobar dintre de la càmera fotogràfica, explica mitjançant una

sèrie de fitxes tècniques el càrec de cadascun dels membres que formen l’equip d’Icaria

però amb un cert to humorístic.

Aquesta secció continua mantenint l’estètica visual que caracteritza tota la website. Els

subapartats són elements visual, fotografies dels membres del projecte, realitzades amb

transformacions 3D del CSS3 per permetre que aquests personatges es girin en el moment

en el que l’usuari passa el cursor per damunt d’ells. Posteriorment, es desplega la fitxa

mencionada anteriorment on es presenta tota la seva informació.

Els subapartats són:

- Anna

- Georgina

- Marc

- Albert

- Elsa

ICARIA



57

En l’estètica d’aquest apartat, s’ha volgut mantenir l’ambientació del curtmetratge i per

aquest motiu l’equip d’Icaria es troba dintre d’una sala que simula una roda de

reconeixement i les fotografies emprades en les fitxes simulen les utilitzades en fitxes

policials.

Vídeo

L’apartat vídeo es troba situat dintre de la PDA i conté el curtmetratge interactiu. Aquest

ha estat situat estratègicament dintre de l’element central de la panoràmica amb l’objectiu

de donar-li importància, ja que conté el nucli cor de la website, el projecte audiovisual.

ICARIA



58

Aquest es troba composat a partir d’un vídeo incrustat en el qual es pot visualitzar

íntegrament el projecte. Aquest vídeo es troba dividit en vàries parts perquè es tracta d’un

curtmetratge interactiu i per tant, estarà composat per diverses opcions on haurà de triar

l’usuari. A més, el fet d’haver rebut un tractament tan fort a l’hora de postproduir-lo ha

provocat que el pes de cada peça augmenti i això ens ha obligat a dividir el treball en un

nombre més elevat de clips per tal d’assegurar-nos una bona visualització en la website-

Personatges

Aquest espai, el qual s’arriba a través de l’element pistola, ens permet descobrir quin són

els personatges principals que conformen el curtmetratge interactiu d’Icaria. Seguirà una

estructura similar a l’apartat Qui som, ja que a través de clicar un dels personatges que es

troben disposats en grup se’ns desplegarà una fitxa en la qual trobarem la seva biografia i

informació addicional necessària per entendre el curtmetratge.

ICARIA



59

Els subapartats són:

-Pablo

-Edgar

-Samuel

-Veronica

-Emma

-Andrej

-Dimitri

-Alexander

En aquest cas, els personatges es troben disposats en grup en una escena característica del

curtmetratge, el port de Barcelona. Inicialment, els personatges es troba en escala de grisos

però quan l’usuari situa el cursor sobre algun d’ells aquests es visualitzen automàticament

en color.

ICARIA



60

Extres

ICARIA



61

L’apartat extres és un dels més importants de la pàgina web per la seva complexitat i

composició. Aquest ens condueix a una nova panoràmica que ens ambienta un altre cop en

el curtmetratge, en aquest cas el laboratori.

La seva composició segueix la mateixa línia que la Home, és a dir, una panoràmica que es

caracteritza per donar la possibilitat a l’usuari de desplaçar-se per tota la pantalla i

s’estructura a partir d’un menú gràfic on els elements s’il·luminen en el moment en què

l’usuari passa el cursor per damunt.

Els subapartats o elements interactius són:

- Tràiler

- Memòria del projecte

- Galeria de fotos

Dues de les opcions de la panoràmica s’han realitzat a partir de dos vídeos fets mitjançant

la tècnica de l’stop motion. Aquests són un arxiu gif programats perquè quan l’usuari cliqui

sobre aquests dos elements, es reprodueixi i a continuació l’usuari accedeixi directament al

següent nivell, memòria del projecte o galeria fotogràfica.

A continuació, una breu descripció dels nivells que integren cadascun dels subapartats que

podem trobar a extres:

ICARIA



62

Tràiler

Aquest nivell conté un breu clip on es realitza un petit tast sobre el curtmetratge interactiu

Icaria. Aquest es tracta d’un vídeo incrustat que es pot visualitzar a la pròpia pàgina web.

Memòria del projecte

Aquest element interactiu integra la memòria del projecte. Hem decidit penjar el treball

multimedial a la nostra website per aquells usuaris que vulguin saber quines eines s’han fet

ICARIA



63

servir per a realitzar tan el curtmetratge interactiu com la pàgina web. El treball anirà

incrustat a la web mitjançant un servei en línia anomenat Issuu, que permet la visualització

de material digitalitzat electrònicament.

Galeria fotogràfica

La balança integra una galeria fotogràfica que conté fotografies realitzades al llarg de tot el

procés de creació del projecte Icaria. Aquesta es tracta d’una galeria JQuery on apareixen

totes les fotografies en petit i a sota van realitzant l’efecte de slide

• Curtmetratge:

En aquest apartat es realitzarà un breu resum de les funcions i característiques que

contenen els diferents elements interactius emprats al curtmetratge. Per tal de

realitzar aquest anàlisi, hem dividit les parts segons les escenes que fan ús d’aquests

elements.

ICARIA



64

Escena 2

Pablo es troba amb el seu amic Ezequiel, ex científic del cos policial, al laboratori per

buscar el llistat de substàncies que necessita per tal de salvar la vida de la seva filla.

En el moment en què el científic es disposa a entregar-li el llistat a Pablo apareix el primer

element interactiu. Aquest es tracta d’una i realitzada amb la tipografia emprada per fer

ICARIA



65

els punts informatius. D’aquesta manera, l’usuari intuïtivament sabrà que ha de clicar

aquest element per tal de visualitzar informació extra.

Així doncs, un cop l’usuari hagi clicat amb el cursor aquest element interactiu es desplegarà

un llistat amb els noms de les tres substàncies que Pablo necessita. Hem fet servir aquest

recurs perquè ens ha semblat que d’aquesta manera l’usuari podria llegir amb més claredat

el nom de les tres substàncies, ja que són complicats. A més, gràcies aquest recurs hem

tingut l’oportunitat de jugar amb els colors per poder mostrar d’una manera més directa

que les primeres lletres de cada substància composen el títol del curtmetratge.

Escena 4

ICARIA



66

El flashback ens mostra quan Pablo i Edgar entren al pis on Andrej i els seus companys

narcotraficants estan consumint drogues. Aquests detenen al rus el qual es passarà anys a

la presó.

En aquesta escena també hem fet ús de l’element interactiu que simula el punt

d’informació. Aquí ens mostra un llistat on apareixen els noms dels personatges principals

que intervenen en l’escena.

D’aquesta manera, aquest element interactiu ajuda a l’usuari a veure quines persones

intervenen en la trama, ja que al tractar-se d’una escena tant ràpida és possible que aquest

no pugui adonar-se de tots els detalls i és de vital importància que conegui quins

personatges principals hi trobem a l’escena per poder seguir la història.

Escena 6

ICARIA



67

L’escena ens mostra quan Pablo rep un missatge d’Andrej al telèfon mòbil per donar-li

instruccions sobre la seva primera missió, matar a l’inspector Suárez.

En aquest cas apareixerà com a element interactiu un telèfon, el qual anirà apareixent cada

cop que Andrej li demani una missió nova al protagonista. Aquest haurà de clicar amb el

cursor a sobre de l’aparell per poder llegir el missatge. Posteriorment, apareixerà un fitxa

on hi haurà escrita la missió tal i com si es tractés d’un missatge.

Aquest element interactiu ens ha servit com a recurs per poder mostrar a l’espectador

quina és la missió a realitzar a cada moment el protagonista. El considerem un element clau

per tal de què el nostre curtmetratge assoleixi l’estètica de videojoc desitjada.

ICARIA



68

Escena 7

En el moment en el què Pablo es disposa a complir la seva primera missió, matar a

l’inspector Suárez, apareixeran dos botons interactius on l’usuari podrà escollir quina acció

vol realitzar per tal d’arribar al seu objectiu. Al passar el cursor per sobre d’un dels botons

un hover farà il·luminar aquest element donant a entendre a l’usuari la possibilitat

d’escollir-lo.

Aquests dos elements ens ajudaran a fer possible la part interactiva del projecte .Un d’ells

ens permetre continuar visualitzant el curtmetratge metre que l’altre ens conduirà a un

Game Over i amb ell un cop més a l’inici.

Escena 10

ICARIA



69

Pablo es troba a l’Estació de França i rep un nou missatge d’Andrej. En aquesta ocasió, el

rus li escriu que la seva propera missió consisteix en matar a dos policies de narcòtics,

Samuel i Verónica.

Com que es tracta d’una missió, aquí també hem fet servir el recurs del telèfon mòbil per

fer arribar de la manera més fàcil possible la missió a l’usuari. Així doncs, quan l’espectador

cliqui sobre l’aparell es desplegarà un missatge nou on apareixerà detalladament la missió

que ha de complir.

Escena 11

ICARIA



70

Escena en la que Pablo es troba al port de Barcelona preparat per a complir la seva segona

missió, matar a Samuel i Verónica. Aquests dos policies es troben amagats darrere d’uns

contenidors esperant el moment per detenir a Dimitri i Alexander, companys d’Andrej, els

quals esperant un bon carregament de droga.

Un cop més, trobarem l’element interactiu d’informació per tal de poder explicar alguna

part necessària a l’usuari. Així doncs, aquest servirà per mostrar dos cartells en els quals

apareixerà informació que permetrà a l’usuari conèixer i situar als dos personatges que es

troben a l’escena.

ICARIA



71

Mitjançant el recurs dels botons, esmentat anteriorment, l’usuari haurà d’escollir amb

quina arma prefereix matar els policies. Un cop més, al passar per damunt el cursor d’un

dels botons aquest s’il·luminarà i segons la opció triada es seguirà visualitzant el

curtmetratge o apareixerà un Game Over que ens portarà de nou al començament.

Escena 14

Pablo es troba el túnel de metro de Diagonal i rep un nou missatge d’Andrej. En aquest cas,

la missió és més complicada perquè li demana que mati a Edgar, el seu company de feina i

millor amic.

ICARIA



72

L’element interactiu emprat és el mòbil, ja que es tracta d’una missió. L’usuari al clicar amb

el cursor a l’aparell se li desplegarà una fitxa o missatge on apareixerà detalladament la

missió a realitzar.

Un cop complertes totes les missions, Pablo acudeix al despatx d’Andrej per demanar-li les

substàncies que li ha promès i que li permetran salvar la vida de la seva filla. En una primera

instància Andrej es nega a entregar-li al protagonista el que li pertoca.

Com que aquesta es tracta d’una escena interactiva, dos botons seran de nou els elements

que permetran escollir a l’usuari quin camí ha de seguir. Novament, segons l’opció escollida

es continuarà visualitzant el curtmetratge o apareixerà un Game Over que ens portarà de

nou al començament.

Definició continguts:

Tot i que el disseny i l'estructura tenen un paper fonamental per tal d’aconseguir dotar a

Icaria de l’estètica de videojoc desitjada, els continguts assumeixen un paper primordial en

l’elaboració de la web. Aquests els trobem de manera textual i audiovisual, aquests últims

tenen una major importància al tractar-se d’un curtmetratge interactiu.

ICARIA



73

Text

Pel que fa els continguts textuals són breus i concisos, ja que no es volia saturar a l’usuari

amb informació que ja es sobre entenia o que simplement ja quedava reflectida en la part

audiovisual.

Per aquest motiu el text ha estat emprat bàsicament per una funció purament informativa

que tot i ser addicional és necessària per poder entendre la trama de la història. A més,

aquesta s’ha dividit perfectament en subapartats que ordenen tota aquesta informació i

permeten a l’usuari d’accedir amb facilitat a la informació que l’interessa.

Foto

Per tal de complementar la informació que trobem a la website s’ha fet ús de fotografies,

sobretot pel que fa l’explicació de personatges i de membres de l’equip. D’aquesta manera,

resulta més estètic i agradable per l’usuari l’hora de navegar per la web.

Aquestes fotografies han estat retocades i manipulades segons les necessites de la pantalla

en la qual es troben. Així doncs, s’ha realitzat un acurat i elaborat treball amb photoshop i

atrezzo en el moment de realitzar les fotografies per tal de què aquestes quedin integrades

dintre de la temàtica demanada.

Cal destacar la utilització d’una transformació 3D a l’hora d’escollir quin membre de l’equip

vols conèixer. Aquest dóna cert moviment i vida a la web, ja que es tracta de girar a cada

membre en el moment de passar per damunt amb el cursor , a més de trencar amb la

monotonia de l’estructura.

Finalment a l’apartat “Extres” s’ha inserit una galeria fotogràfica on trobem imatges sobre

els diferents rodatges realitzats per l’elaboració d’Icaria. Aquesta es tracta d’una galeria

JQuery on les fotografies van apareixent realitzant l’efecte slider.

ICARIA



74

Vídeo

Icària presenta una gran varietat d’estils dintre del propi curtmetratge interactiu. D’aquesta

manera, trobem un seguit de vídeos que tenen l’estètica audiovisual tradicional en un

curtmetratge i d’altra banda uns clips que presenten l’estètica típica dels videojocs.

Per aquest motiu, la seva edició i postproducció no s’ha cenyit únicament a l’ús del Adobe

Premier Cs 5.5, sinó que hem vist la necessitat d’aconseguir l’estètica de videojoc a través

del After Effects i la inserció d’elements interactius través del programa Flash.

Els clips que conformen aquest curtmetratge interactiu han estat inserits a la website

directament pujant-los al servidor fent la interacció necessària en aquest tipus de

curtmetratge a través del Flash. Podríem dir que es tracta d’un curt master a 1920x1080

amb continguts en HD (High Definition) i en un format MP4 perquè és el més ideal per

l’exportació en h.264 .

Aquests clips tenen una durada d’entre 30 segons i 1 minut, i en trobem un total de 23. El

vídeo sencer té una durada de 16 minuts aproximadament però s’ha decidit d’inserir els

clips per separat a la website per tal d’aconseguir una navegació neta i senzilla, de forma

que l’usuari no es trobi cap impediment mentre visualitza el curtmetratge.

ICARIA



75

Conclusions:

El principal objectiu a l’hora de crear la nostra peça va ser des del primer moment poder

oferir al públic una nova manera de consumir un producte audiovisual creat a partir de la

hibridació d’un curtmetratge i un videojoc, amb un plus d’interactivitat, ja que l’usuari

haurà de participar activament al desenvolupament de la història tot seleccionant en

determinats moments quin camí han de seguir els personatges.

Observant els resultats obtinguts fins aquest moment, ens hem adonat que hem complert

tots els objectius que ens vàrem marcar a l’hora de realitzar la proposta del projecte. D’

aquesta manera, creiem que Icaria compleix tot els requisits per a ser considerat un

producte innovador i molt complert tan a nivell audiovisual com multimèdia.

D’altra banda, cal assenyalar els canvis que el nostre projecte ha anat experimentant al

llarg de la seva elaboració fent que no segueixi de manera fidel i al peu de la lletra la

proposta audiovisual i multimedial realitzada en un primer moment. Especialment, pel que

fa l’estructura i continguts de la web han estat gairebé renovats i canviats al llarg de tota

l’elaboració del producte.

Aquest fet s’ha donat perquè al principi d’establir els paràmetres que havia de seguir i

contenir la nostra pàgina web, no teníem els coneixements que hem anat assumint al llarg

de tot el procés d’elaboració. Tot i això, podem assegurar que els resultats obtinguts fins a

l’actualitat són més dels esperats, ja que finalment hem aconseguit un espai multimedial

més complex i enriquit que el disseny previ a la seva elaboració.

D’altra banda volem destacar que tot i ser un curtmetratge interactiu, Icaria es caracteritza

pel fet que la part audiovisual i multimedial es complementen obligant-nos a treballar i

potenciar per igual ambdues parts per tal d’obtenir els resultats desitjats.

La creació d’una estètica pròpia del videojoc ha estat la part més complicada a l’hora de

produir la peça audiovisual i realitzar la postproducció. Primerament, ha estat difícil

representar un seguit d’escenes en pla subjectiu que semblessin realistes i que recreessin la

sensació de videojoc en l’espectador. D’altra banda, en el moment de realitzar la

ICARIA



76

postproducció els nostres coneixements i habilitats amb el software After Effects eren molt

limitats. Degut a això vam acudir a terceres persones que ens han ensenyat i guiat a l’hora

de dur a terme la postproducció. Cal valorar que gràcies a això ara tenim un coneixement

bàsic de com funciona el programa i hem descobert la infinitat de possibilitats que ofereix

per a obtenir un producte audiovisual més potent i atractiu.

Finalment, assenyalar que ha estat un projecte molt complex i complicat en tota la seva

elaboració, però estem contents i orgullosos del resultat obtingut. Cada membre ha posat

de la seva part tots els seus coneixements i opinions pròpies per tal d’arribar a un consens

entre tots els membres del grup i així fer un producte al gust de tothom. Amb moltes ganes

i dedicació hem set capaços d’ocupar-nos de cadascuna de les parts que formen Icaria, i

poder experimentar com es viu el desenvolupament d’un producte audiovisual i multimèdia

d’aquesta magnitud.

Així doncs, podem concloure que Icaria ens ha ensenyat i aportat nous coneixements a

nivell acadèmic, professional i personal.

ICARIA



77

SISENA PART

ICARIA



78

Referents i recursos

Bibliografia

• Vivancos Bermejo, D. : Historia y evolución de la indústria de los videojuegos.

Facultat de Comunicació Blanquerna. Universitat Ramón Llull. Barcelona 2009.

• Contreras, R. : Industria del Videojuego. Universidad Anáhuac. Mèxic 2011.

• Pardo Kuklinski, H. : Geekonomia. Un radar para producir en el postdigitalismo.

Col·lecció Transmedia XXI. Laboratori de Mitjans Interactius / Publicacions i Edicions

de la Universitat de Barcelona. Barcelona 2010.

• Negroponte, N. : El mundo digital. Ediciones B. Barcelona 1995.

• Scolari,C.: Hacer clic. Hacia una sociosemiótica de las interacciones digitales.

Gedisa. Barcelona 2004.

• Gifreu, A.: El domuntal multimèdia interactiu- Una proposta del model d’anàlisi.

[Treball de recerca]. Departament de Comunicació. Universitat Pompeu Fabra.

• Ribas, J.: Caracterització dels interactius multimèdia de difusió cultural. Aproximació

a un tractament específic, els “assaigs interactius” [Treball de recerca], Barcelona:

Universitat Pompeu Fabra. Facultat Comunicació (2000)

• Roush, W.: “Web 2.0’s Startup Fever”. Technology Review, Boston: MIT Press.

Disponible en línia a: http://www.technologyreview.com/web/16688/page2/

Webgrafia

• Xipmulticolor. [ en línia] <http://www.xipmulticolor.com/xip-multicolor-documental-interactiu-i-multimedia-joc-interactiu-neil-harbisson.html> [Consultat: 6 de maig 2012]

• Metamentaldoc multimedia. [en línia] <http://metamentaldoc.com/> [Consultat: 8 de maig 2012]

ICARIA



79

• Slideshare. Present Yourself. [en línia]

<http://www.slideshare.net/guest791260/historia-de-los-videojuegos> [Consultat: 5

de juny 2012]

• Retro Informática. El pasado del Futuro. [en línia] <http://www.fib.upc.edu/retro-

informatica/historia/videojocs.html> [ Consultat: 5 de juny 2012]

• W3schools [en línia] <http://www.w3schools.com/html5/html5_video.asp> [Consultat: 5 de juny de 2012]

• Fundibeq[en línia] <http://www.fundibeq.org/opencms/export/sites/default/PWF/downloads/gallery/methodology/tools/diagrama_de_flujo.pdf> [Consultat: 6 de juny de 2012]

• Scribd [en línia] <http://es.scribd.com/doc/550264/Que-es-web-10> [Consultat 11

de juny de2012]

• García Aretio, Lorenzo (2007). ¿Web 2.0 vs web 1.0? [en línia]

<http://ddd.uab.cat/pub/dim/16993748n10a4.pdf> Editorial BENED [Consultat:11

de juny de 2012]

• Maestros del web [en línia] <http://www.maestrosdelweb.com/editorial/web2/>

[Consultat:12 de juny de 2012]

ICARIA



80

ANNEXOS

ICARIA



81

DELIVER ME TO HELL

(www.youtube.com/watch?v=9p1yBlV7Ges)

1. Deliver me to Hell 2. Curtmetratge interactiu sobre zombies realitzat per LittleSister Films

Produccions 3. Obert 4. 2011 5. Anglès 6. Anglaterra. www.littlesisterfilms.co.nz /

[email protected]: 021 242 2550

Justificació: L’ambientació basada en el món dels videojocs i la interactivitat utilitzada al llarg

de tot el curtmetratge el fan un gran referent audiovisual per el nostre treball.

Descripció del contingut:Deliver me to Hellés un curtmetratge interactiu que entraria dintre

del gènere de ficció i humor. Aquest tracta sobre una ciutat la qual està envaïda per zombis i

un pizzer es l’encarregat de matar-los. Com a última missió ha de salvar la vida a una noia la

qual es troba en perill de ser menjada pels zombis. A través d’una interactivitat estipulada en

l’estructura del curtmetratge l’usuari podrà escollir el camí ha seguir per part del protagonista

per tal de salvar-la.

Punts forts:

1. L’Atmosfera creada durant tota la trama de la història li donen l’aparença d’un

videojoc, com per exemple el color i la tipografia utilitzades en el grafisme.

2. Escenaris utilitzats per a realització del curtmetratge.

3. Utilització de la càmera ràpida per tornar enrere quan l’espectador ha escollit el

camí equivocat en la interactivitat i que l’ha portat a la mort.

Punts febles:

1. Ambientació aconseguida massa còmica fent-li perdre la serietat que nosaltres

volem aconseguir en la nostra història.

ICARIA



82

2. Tot i que alguns personatges estan molt ben aconseguits no deixen de seguir els

tòpics més habituals del món audiovisual. A més, aquests no presenten un passat

elaborat que ajudin al l’espectador a entendre el personatge.

Elements a tenir en compte en el nostre projecte:

La interactivitat amb què es desenvolupa tota la trama de la història és un element clau per

a la realització del nostre projecte. Per aquest motiu, hem escollit aquest curtmetratge

perquè utilitza el recurs de la càmera ràpida per tornar un altre cop al punt d’inici de la

interactivitat un cop l’espectador s’equivoca en l’elecció provocant la mort del

protagonista. D’aquesta manera, nosaltres hem solucionat el problema de realitzar una

estructura tant complicada quan la història es presenta amb més d’una trama.

Screenshot del curt:

ICARIA



83

LEFT FOR DEAD

(www.youtube.com/watch?v=80nZ5b_DKms)

1.Left for dead 2. Curtmetratge interactiu dirigit per LaynePavoggi basat en el videojoc Left

4 Dead 3.Obert 4. 2011 5. Anglès 6. Estats Units

Justificació:es tracta d’un projecte semi professional molt semblant al nostre. Tot i que la

trama de la peça s’allunya molt del nostre projecte, ens hem fixat en la interactivitat que

presenta i la manera de narrar el film. Aspectes de la realització com colors i efectes

especials ens el fan escollir com a exemple a tenir en compte.

Descripció del contingut: curt interactiu basat en un videojoc preexistent. Es tracta d’un

videojoc en el qual el món està infectat per zombies i els personatges ha de mirar de no ser

caçats i devorats per aquests. Hi ha quatre personatges protagonistes.

Punts fort:

1. Al tractar-se d’un curt interactiu basat en un videojoc preexistent, el públic

està familiaritzat amb la història narrada així com amb els personatges.

2. La banda sonora escollida dona ambient i ritme a les imatges. Usen música

electrònica que crea un ritme ràpid i neguitós, per la qual cosa fa alertar al

públic que algun problema els rodeja.

3. El logotip de la marca és simple. Inclou la taca de sang que indica que el joc

conté sang i escenes de violència.

4. Amb uns recursos no excessius aconsegueixen fer un producte de qualitat.

Punts febles:

1. Crec que no mostren amb prou claredat la interactivitat que presenta el

curtmetratge en la primera part. Per a un usuari no familiaritzat amb

opcions com aquestes, el fet que cap gràfic informatiu no els avisi que han

d’escollir una opció pot fer-los perdre.

2. El fet que no hi hagi un final definit decepciona a l’espectador. Tres de les

quatre opcions per escollir condueixen a la mort dels protagonistes, però la

ICARIA



84

opció que en teoria és la bona no té un final tancat i simplement en

proposen de tornar a jugar.

3. Es trenca el fil de la història entre els possibles vídeos. Un cop s’acaba una

de les opcions dolentes, no hi ha cap estratègia per a tornar a l’inici i

escollir una opció nova.

4. Els anuncis presents entre vídeo i vídeo penjat a Youtube trenquen la

interactivitat.

Elements a tenir en compte per al nostre projecte web:

La banda sonora que acompanya tot el producte audiovisual ajuda a desenvolupar els

esdeveniments. És una banda sonora que en molts casos intensifica tota la part sensitiva de

les imatges.

Els efectes especials no són espectaculars, però acceptables per a un producte que té un

pressupost bastant semblant al nostre.

La interactivitat proposada en el curt interactiu és la mateixa que la que nosaltres oferirem

al nostre producte. Nosaltres però, donarem la possibilitat d’escollir el camí a seguir fins a

tres vegades.

Per tal de no caure en l’error que ells han comès, nosaltres incorporarem gràfics que

ajudaran a comprendre la interactivitat, i una veu en Off narrarà el perquè de la mort.


ICARIA



85

MINDSTORMING

(http://www.mindstorming.tv/es/)

1. Mindstorming 2. Mostrar a l’espectador les dues bandes d’una mateixa cosa, en aquest

cas els pensaments de l’home i de la dona en una mateixa situació. Tot mitjançant

l’element interactiu de la fletxa que et permet escollir quina banda vols escoltar. 3. Es

tracta d’una plataforma oberta a tothom. 4.: 2010 5. Castellà i anglès 6.:

[email protected] / Facebook i Twitter.

Justificació: Es tracta d’una web amb un contingut audiovisual que en certa manera és

interactiu. Està bé veure com plantejen la interfície del producte i com treballen aquesta

interactivitat.

Descripció del contingut: Es tracta d’una web on hi apareix el contingut audiovisual al

centre. Al marge dret hi ha un menú on es plantejen tres opcions que fan referència al

contingut del vídeo (la red social, la ruptura i la ex pareja). Al marge esquerre hi ha unes

pestanyes que fan referència al projecte general, és a dir, qui l’ha fet, la idea que vol

transmetre el producte i una proposta per als usuaris. A sota hi apareix un cervell amb una

fletxa, al costat dret el símbol femení i a l’esquerra el masculí, aquesta fletxa es pot moure.

Punts forts:

Els colors i les formes són adequades als continguts. Són colors vius, desenfadats que

s’escauen molt bé amb l’humor que transmet la pàgina, també té un disseny del text molt

bàsic, senzill i juvenil, com els personatges i tot l’ambient recreat. La dimensió de la pantalla

és la correcta per tal de que a sota i càpiga l’element interactiu.

Tots els continguts audiovisuals són interessants.

D’altra banda és molt interessant l’interactivitat que han afegit al vídeo, permetent en

qualsevol moment a l’usuari sentir els pensaments de qui vol i, per tant, incita a veure i

sentir el vídeo diverses vegades per escoltar les dues versions. També està bé que es pugui

compartir a les xarxes socials i que es pugui escoltar en dos idiomes, és una forma més

ICARIA



86

d’expandir-se a més llocs. A més a més que et deixin utilitzar les imatges sota llicència de

CreativeCommons i et deixin elaborar el teu Mindstorming és una bona idea per a que

l’usuari també hi participi.

Els vídeos es carreguen de forma bastant ràpida, només cal esperar uns segons. Tots els

enllaços funcionen bé i també hi ha un enllaç a una altra pàgina però no de la mateixa

temàtica.

Punts febles:

L’estructura de navegació és bastant intuïtiva, al principi costa adonar-se de que hi ha les

tres versions d’un mateix vídeo degut a que si canvies de pestanya a l’esquerra les de la

dreta desapareixen, a més al vídeo s’explica que és un mindstorming però no que hi hagi

tres parts. En general l’estructura s’adequa a les necessitats de comunicació.

Els continguts textuals són poc interessants. Hi ha dos apartats que no són necessaris (“la

idea” i “el equipo”), la idea està explicada massa llarga i no és necessari tot un apartat per

aquesta, l’equip ja surt als crèdits finals del vídeo, no interessa llegir tota una pestanya

sobre qui ha fet què.


La idea de fer interactuar a l’usuari mentre es reprodueix el contingut audiovisual és

bastant innovadora i s’acosta a la nostra idea. Es tracta d’interactivitats diferents però ens

serveix com a referència..

Screenshots de la web

ICARIA



87

EL PADRINO 2

(www.youtube.com/watch?feature=player_embedded&v=GVFCOIlKuIQ#!)

1. El Padrino 2 2. Videojoc de Sandobox basat en la seguna entrega cinematogràfica del

Padrino. 3. Obert 4. 2009 5. Anglès 6. Estats Unitswww.ea.com

Justificació: Tal i com nosaltres volem aconseguir aquest videojoc combina de forma

magistral llum i ombres i tracta de manera acurada el joc d’espais antagònics. Aquest seguit

de fets l’apropa al món mafiós i ajuda als personatges a guanyar personalitat.

Descripció del contingut: Videojoc basat en la segon apart de la famosa pel·lícula de Francis

Ford Coppola , TheGodfather. Aquet representa el món fosc de la màfia italiana a través de la

família Corleone la qual domina tot el crim de la ciutat de Nova York durant els anys 40.

Punts forts:

1. L’ambientació i la temàtica utilitzada en aquest videojoc.

2. L’estètica que combina espais foscos i misteriosos amb espais colorits i

alegres propis del món obscurs de les màfies als Estats Units.

3. El tractament de llums i ombres que se li donen als personatges per tal de

caracteritzar-los.

4. Canvis de música segons la interfície en la qual es troba l’usuari.

Punts febles:

1. Aquest videojoc presenta moltes carències a l’hora de permetre a l’usuari

utilitzar objectes o moure’s pels carrers de Nova York i Miami.

2. Aparició de punts negres que falsifiquen les ambientacions i els recursos

que permeten desenvolupar tota la trama de la història.

ICARIA



88


L’estètica utilitzada en aquest videojoc és la mateixa que nosaltres volem donar a Icària.

Aquest representa d’una manera brillant el món fosc de la màfia a través d’una combinació

entre espasi foscos i misteriosos amb espais alegres i colorits. El tractament que realitza de la

llum on hi ha un impressionat joc entre ombres permet dotar de caràcter i personalitat als

personatges del videojoc tal i com nosaltres volem aconseguir en el projecte.

Screenshot de la web

DAVE CHAPELLE

(http://www.youtube.com/watch?v=YQLWkXt4p1U)

ICARIA



89

1.Dave Chapelle 2. Simulació d’una partida de videojoc emesa al programa humorística fet

per DaveChapelle 3. Obert 4. 2011 5. Anglès 6. Estats Units

Justificació: simulació d’una breu partida de videojocs que conté elements que nosaltres

també integrarem en el nostre projecte.

Descripció del contingut: un presentador de la televisió nord-americana, emet en el seu

programa humorístic la reproducció d’una mini-partida d’un videojoc.

Punts forts:

1. Realització treballada. Varietat de plans.

2. Integren elements propis d’aquest videojoc, com el mapa de localització del

personatge o els objectes dels quals disposa el protagonista.

3. Els moviments dels personatges no són fluids per ressaltar encara més que es tracta

d’un videojoc.

4. L’ús dels so de l’arma disparada són un pèl exagerats, però molt adients per

remarcar que es tracta d’una simulació humorística d’un videojoc.

5. Usa tècniques pròpies del videojoc com l’elecció de l’arma que el protagonista dur.

Punts febles:

1. Tot i voler representar un videojoc, la imatge no té cap tipus de retoc en la

postproducció ni han usat cap mena de filtre.

Elements a tenir en compte en el nostre projecte :

Com que nosaltres també volem representar una simulació de videojoc, integrarem al

nostre projecte tots els gràfics que el vídeo incorpora. Aquests elements gràfics seran

present al llarg de tot el curt, d’aquesta manera recordarem constantment a l’usuari que

està visualitzant una simulació e videojoc.

Els sons usats també serà un altre dels elements a incorporar. Que els efectes sonors siguin

creïbles i vagin sincronitzats amb el què estem veient, ajuden a comprendre el vídeo.

ICARIA



90


BIO

SH

OCK

(http://www.2kgames.com/bioshock/ps3/us/launch.html)

1.Bioshock 2. Joc interactiu creat per a la Playstation i desenvolupat per K2 3. Obert 4. 2008

5.Anglès 6. Boston

Justificació: elecció del joc per certs elements sensibles i per la informació extra que

s’ofereix a l’espectador.

Descripció del contingut: es tracta d’una pàgina web que avança l’estrena d’un joc per a la

Play Station 3. La interfície consta d’un menú inferior format per una imatge. En aquesta

imatge hi ha varis punts sensibles al mouse, cadascun dels quals et dur a un contingut

diferent. Les pestanyes corresponen a: Forum, Info, Press i Media.

Punt forts:

1. La pàgina web es carrega amb rapidesa.

2. Elements sensibles que al clicar amb elmouset’ofereixen informació addicional.

3. Vídeo introductori. Permet a l’usuari saltar-se el vídeo.

4. Gràfics informatius.

5. So ambient constant.

6. Objectes amb informació addicional.

ICARIA



91

7. Menú general sempre visible.Per exemple, nosaltres volem que el jugador vagi

descobrint l’entramat de la historia a través de les pistes que se li aniran oferint al

llarg de la simulació.

Punts febles:

1. La temàtica del joc s’allunya molt de la nostra proposta.

2. Cada vegada que apareix un nou element amb informació obligatòriament l’hem de

consultar.

Elements a tenir en compte per al nostre projecte:

La nostre interfície web també tindrà un vídeo introductori a mode de tràiler, és interessant

per aquelles persones que no el vulguin veure, incloure una pestanya amb la possibilitat de

saltar-se el vídeo i entrar directe al contingut.

El menú sempre visible també és un altre dels elements interessants. El disposen de tal

manera que deixen prou espai a la part superior de la pantalla, com per no haver de treure

el menú.

Els gràfics constants són molt útils per indicar els passos a fer cada moment. A més dels

gràfics indicatius, els elements que aporten informació addicional donen un plus al joc en

general. Tot i la quantitat d’elements que integren al joc, nosaltres no pararem l’acció quan

aparegui un element amb informació extra. D’aquesta manera aconseguirem que el joc

sigui fluid i que si un usuari no vol veure la informació complementària pugui gaudir del joc.

Screenshot de la we

ICARIA



92

GRAND THEFT AUTO IV

(http://www.rockstargames.com/IV/)

1. Rockstar Games.2. Fer campanya publicitària sobre el videojoc i a més oferir DLC’s

(Download contents) per aplicar a la mateixa interfície. 3. Oberta a tots els usuaris 4. 2011

5. Anglès.

Justificació:He decidit escollir aquesta web, perquè GrandTheft Auto és un dels principals

referents alhora d’idear continguts per al nostre projecte. Per aquest motiu, m’ha semblat

interessant analitzar la seva web i veure com han traspassat la informació del joc per

presentar-la al usuari mitjançant un website.

Descripció del contingut: Aquest entorn web està constituït per 3 apartats principals:

People& Places, on l’usuari té a possibilitat de veure vídeos descriptius dels personatges i

alhora imatges que contextualitzen al usuari en l’entorn en el que es mouen cada un

d’aquests personatges. Recreation&Entertainment on podem recórrer cada un dels espais

del videojoc dedicats al oci com ara clubs de striptease o discoteques entre d’altres, i

finalment l’apartat de Goods& Services on trobem material interactiu sobre serveis com ara

lloguer de vehicles, màquines expenedores i altres serveis que apareixen al videojoc.

A més a més, tenim diverses opcions al menú inferior que ens permeten obtenir notícies,

tràilers, wallpapers, música i gran varietat de continguts. Un altre aspecte a destacar és que

compta amb un accés directe a la comunitat virtual de Rockstar Games on els jugadors

poden consultar informació sobre tots els jocs desenvolupats per la companyia i alhora és

possible posar-se en contacte a temps real amb altres usuaris gràcies al apartat de

MessageWall.

Punts Forts:

1. Gran potencial estètic.

2. Entorn web totalment fidedigne a la línia del videojoc.

3. L’usuari pot consultar informació que després pot fer servir al joc.

ICARIA



93

4. Fàcil navegació.

5. Gran varietat de continguts.

6. Agilitat alhora de carregar-se els continguts.

7. L’usuari pot descarregar multitud de continguts que pot aplicar a la vida real com

ara widgets per a mòbil.

Punts Febles:

1. L’entorn està pensat per gent que ja és usuària de GrandTheft Auto 4, no intenta

captar altres usuaris mitjançant ningun reclam.

2. La pàgina oficial del joc està totalment feta en anglès, no s’adapta a les necessitats

del usuari.

3. Poca interacció amb les xarxes socials.

4. Al principi no es pot desactivar el so.

Elements a tenir en compte pel projecte web:

Hem de procurar adaptar la web per a qualsevol tipus d’usuari, com el que ja hagi consumit

el nostre producte com el que encara no ho ha fet. Això ho podem aconseguir afegint

continguts a la web que l’usuari pugui fer servir posteriorment en el videojoc, per exemple,

en el nostre cas, durant el desenvolupament del joc es plantegen decisions que l’usuari ha

d’encertar per passar al següent nivell, així doncs a la web pot haver-hi petites descripcions

dels nivells que donin algunes pistes per tenir èxit en la missió. Respecte als usuaris que són

amateurs alhora de consumir el nostre producte, hem de procurar cridar la seva atenció, i

provocar que realment vulguin provar la nostra simulació.

Per altra banda, connectar la web del producte i per extensió el mateix producte a les

xarxes socials és fonamental per obrir mercat. Amb les xarxes socials obtenim una millor

difusió del producte.

ICARIA



94

Screenshots de la web:

NEAVE INTERACTIVO

(http://neave.com/es/)

1. NeaveInteractivo 2. Vèncer les barreres tecnològiques i fer el món digital més amigable,

divertit i humà. Es tracta d’una zona digital de jocs on l’artista Paul Neave comparteix els

seus jocs i eines interactives. 3. Obert a tothom. 4. 1999 5. Castellà, anglès i portuguès. 6.

via Twitter o enviant un missatge.

Justificació: Web amb el contingut principal i en moviment al centre. Amb una proporció

similar a la que podem aplicar al nostre producte. El menú de navegació també ens pot

interessar. És totalment interactiva per això cal veure com treballa aquesta interactivitat

amb l’usuari.

Descripció del contingut Es tracta d’una web amb temàtica més aviat artística i de jocs. Hi

podem trobar jocs molt novedosos o jocs molt anics com el tetris. També diverses

aplicacions interactives relacionades amb l’art.

ICARIA



95

Punts forts

El color de fons és fosc i fa destacar la zona interactiva que va canviant de color, sempre

vius i amb sanefes. Les dues fletxes et marquen el recorregut i van mostrant-te els jocs

possibles. Si entres en un d’aquest ocupa dos terços de la pantalla mentre que el terç

restant queda restant per al menú amb la resta de jocs en finestretes petites. A dal hi ha un

altre menú amb l’opció de tornar a l’inici, compartir-ho al Facebook / Twitter o seguir-lo. La

usabilitat i la navegació són molt intuïtives, fàcils i agradable.

Es tracta de jocs molt coneguts (Tetris, Simón, Serpiente), alguns no, però tots molt senzills,

així inciten a jugar. Tot el contingut és audiovisual excepte una breu explicació de cada joc

que t’apareix abans de jugar.

Tots els links funcionen correctament. Tots els jocs es carreguen molt ràpid i la proporció de

la pantalla per jugar és la més adequada.

Punts febles

Pot mantenir-se sense actualitzar durant un temps, fins que l’artista vagi creant els nous

jocs o noves obres.

Screenshot de la pantalla

ICARIA



96

THE THING

(http://www.thethingthemovie.net / http://www.quieneslacosa.es)

1. TheThing. 2.Fer campanya publicitària sobre el producte audiovisual. Actua com a node

d’informació i d’entreteniment. 3.Oberta a tots els usuaris 4. 2011 5. Castellà, Anglès,

Francès i Alemany 6. Facebook i Twitter.

Justificació: Aquest website és d’una pel·lícula que es troba per estrenar. He decidit

prendre com a punt de referència aquesta web per tal de poder veure com es planteja

l’entorn per un producte que encara està per sortir a la llum. Crec que això es adaptable al

nostre projecte.

Descripció del contingut: Es tracta d’un entorn web de gran impacte visual. Està constituït

per un simple menú on trobem les següents pestanyes: Pel·lícula, Fotos, Vídeos i

Descàrregues. Al primer apartat trobem una sinopsi de la pel·lícula. Al segon apartat fotos

en alta resolució. En el tercer trobem el tràiler oficial i finalment al últim apartat podem

descarregar-nos wallpapers i avatars.

Tanmateix, la web ens proporciona una enllaç directe que ens redirecciona cap a una

pàgina on podem descarregar-nos un joc que segueix la línia de la pel·lícula, el jugador a de

casar l’alienígena (Thething). Finalment a la pantalla principal tenim signes d’exclamació

interactius que ens permeten accedir a escenaris on descobrir peces d’informació sobre

l’argument de la pel·lícula.

Punts Forts

1. És una web molt atractiva visualment.

2. Incorpora elements en moviment que donen dinamisme a la web.

3. Està molt ben vinculada amb les xarxes socials, fet molt important per donar a

conèixer el producte.

4. S’incorporen fragments de pel·lícula al canviar d’una opció del menú a l’altre, això

provoca curiositat en l’usuari que visita la web respecte a la pel·lícula.

5. La pàgina web en si es un joc.

6. Té molts elements interactius.

ICARIA



97

7. La música de la web crea un gran clima de tensió.

Punts Febles

1. Requereix molt temps de càrrega segons el contingut. No obstant, es pot

apreciar el percentatge de càrrega fet que soluciona una mica el problema.

2. A l’apartat de vídeos només hi ha el tràiler i l’usuari ja el veu només entrant

a la web.


La web no serveix només per un producte ja consolidat, també pot fer-se servir per un que

estigui en projecte. El fet de crear un website senzill i informatiu del nostre producte abans

que surti a la llum, pot ajudar-nos a crear un clima d’intriga i curiositat en l’usuari. Els

continguts no han de ser necessàriament molt complexes, simplement han de realitzar la

funció abans descrita amb un mínim d’informació perquè l’internauta tingui algunes pistes

del producte amb el que es trobarà.


ICARIA



98

YOBADAZ

(http://www.yodabaz.com/)

Justificació:elecció de la pàgina web per el seu disseny a nivell general.

Descripció del contingut: la web Yobadaz, és el portfolio d’un jove dissenyador online. A la

web podem veure els projectes que aquest noi recentment ha dut a terme, a més

d’informació sobre la seva persona, un mail de contacte, fotografies que ha fet i links

d’interès.

Punt forts:

1. El comptador que indica que s’està carregant la pàgina és dinàmic i diferent als

altres.

2. Ràpida de carregar-se, l’usuari no s’ha d’esperar massa.

3. Està poc carregada d’elements, és visual i clara.

4. Imatge dinàmica de fons de pantalla que omple un espai tant minimalista i auster.

5. La interfície és sensible al mouse i al moure’l, la pàgina també es mou.

6. En el contingut de fotos, la transició de passar del primer nivell al segon es fa a

través d’una taca negra que al final ocupa la totalitat de la pantalla.

7. En la pestanya portfolio, quan es selecciona un element a visualitzar la resta cau i

desapareix. Manera de fer aparèixer i desaparèixer dinàmica.

8. El menú és sensible al ratolí, i quan aquest es posa damunt d’un element els altres

elements es difuminen.

Punts febles:

1. La web no té res a veure amb el nostre projecte , però és interessant per la

manera que té de disposar els elements a la pantalla i la manera com els fa

aparèixer i desaparèixer.

2. La galeria de fotografies es carrega un pèl lenta.

3. No conté cap vídeo, cosa que ens hauria anat molt bé per poder veure de

quina manera els disposava a la interfície.

ICARIA



99


Tot i tractar-se d’una web que no té res a veure amb el nostre projecte té elements

interessant que ens poden interessar per la nostra web. El primer element és el tipus de

comptador per anunciar el tant per cent de pàgina carregada. És vistosa diferent i dinàmica.

La transició per entrar a la pàgina de fotos és molt interessant. Nosaltres podem incorporar

aquest estil de transició en el producte audiovisual. En les escenes de flashback, per

representar que es tracta d’un temps passat, aquesta nuvolina sembla que entrem en un

somni.

Screenshot de la web:

ICARIA



100

CINEMA PRODUCCIONES

(www.cinemaproducciones.es)

Justificació: L’estètica en general de la web ens ha semblat adequada com a referència per ha

realitzar la part multimèdia del nostre projecte. A més, la presentació ordenada i clara dels

vídeos que hi apareixen també és un punt fort d’aquesta productora.

Descripció del contingut: Web realitzada per una petita productora independent espanyola

per tal de promocionar-se. Aquesta web presenta una interfície molt senzilla i esquematitzada

on l’usuari pot percebre des de la primera impressió quins són els treballs que ha realitzat la

productora. Així doncs, aquesta està formada per una pàgina principal on trobem tres

apartats: Portfolio,Nosotros i Contacto. A continuació, apareixen tots els projectes realitzats els

quals et porten directament a un vídeo de Vimeo on es mostra el respectiu treball i les

diferents xarxes socials que té la productora. Cadascun dels apartats anomenats anteriorment

et porten de manera ràpida i senzilla als continguts corresponents.

Punts forts:

1. Disseny de la interfícieamb els colors utilitzats i la distribució dels diferents aparts

que la composen.

2. Els vídeos promocionals de la productora estan presentats d’una manera molt

professional tant per la qualitat que ofereix Vimeo com per la possibilitat de fer

més gran el vídeo sense tenir la necessitat de saltar de pantalla.

3. Apartat Contactoés molt intuïtiu i directa facilitant la comunicació amb l’usuari.

Punts febles:

1. No coneixem quins són els integrants d’aquesta productora, ja que únicament en

l’apartat Nosotros ens fa un petit tast de quines són les diferents especialitats i la

seva feina a trets generals.

2. Pel que fa els seus serveis únicament inclou el nom sense especificar quins criteris i

estils segueixen.

ICARIA



101

Elements a tenir en comptepelprojecte web:

La manera com aquesta web presenta els seus vídeos resulta molt interessant pel nostre

projecte. El fet de no haver de saltar de pàgina cada cop que és vol visualitzar un vídeo resulta

molt interessant i fa que la web guanyi en senzillesa. D’altra banda, la seva manera de

contactar amb els usuaris és molt senzilla a través de l’apartat Contactos . Tot aquest seguit de

característiques li aporten un aire seriós deixant entre veure que el seu públic objectiu ha de

tenir un perfil professional i audiovisual.


ICARIA



102

MEGACONSOLAS

(www.megaconsolas.com)

Justificació: Una bona distribució i una fàcil accessibilitat per part de l’usuari a les diferents

parts que formen la interfície justifica la nostra elecció d’aquesta web per a la realització del

nostre projecte.

Descripció del contingut: Web relacionada amb el món dels videojocs on es mostra

detalladament opinions, noticies i últims esdeveniments relacionats amb aquest món. Aquesta

web presenta un gran nombre d’apartats per tal de facilitar l’elecció del contingut al qual vol

accedir l’usuari. D’aquesta manera, trobem un menú central que es va renovant constantment

i podem trobar les últimes actualitzacions realitzades a la pàgina com noticies i futurs

esdeveniments. D’altra banda, un menú lateral ens mostra diferents apartats on s’ordena de

la millor manera possible la gran quantitat d’informació que disposa la pàgina com seccions,

opinions, webs preferides, blocs i articles.

Punts forts:

1. Renovació constant de la web amb molta informació sobre el món dels videojocs.

2. Bona distribució i fàcil accessibilitat per part dels usuaris als diferents apartats que la

formen.

3. Possibilitat de contactar amb ells a les diferents xarxes socials i de visitar les webs

relacionades.

4. Bona presentació de l’equip que forma part de la redacció.

5. Possibilitat de linkar la pàgina.

ICARIA



103

Punts febles:

1. Disseny de la interfície és massa senzill i carregat tot i que els diferents elements que

conformen la web es troben ben distribuïts.

2. Mostra dificultats a l’usuari a l’hora de contactar amb ells perquè primer han d’omplir

un formulari de seguretat.


Tot i que presenta una aparença massa recarregada i un estil que no ens agrada pel nostre

projecte aquesta web té un seguit d’elements interessants per a ser analitzats

detingudament. Aquesta presenta una fàcil accessibilitat per part de l’usuari a la gran

quantitat d’informació de la qual disposa. A més, mostra a tot l’equip que conforma la

redacció amb la possibilitat de visualitzar els seus espais personals i treballs. Aquest últim

punt és molt interessant perquè nosaltres també volem donar la possibilitat de conèixer a

l’usuari d’una manera més personal el nostre perfil professional.


ICARIA



104

JMP STUDIOS

(www.jmpstudios.es)

Justificació: La manera amb la que es presenten dintre de la web els diferents professionals

que formen part d’aquesta productora és el motiu més precís per a justificar l’elecció

d’aquesta pàgina.

Descripció del contingut:Web on ens mostra els treballs,especialitats i característiques d’una

petita productora independent espanyola. Aquesta presenta una interfície més elaborada

perquè esta composada per diversos apartats i subapartats. Aquesta ens presenta a la

productora JMP Studios a través d’una selecció fotogràfica, un vídeo corporatiu de l’empresa,

una selecció dels projectes realitzats i una explicació escrita de quin és el treball que realitzen.

A més, hi ha ha un apartat on s’incorpora un llibre de presentació realitzat íntegrament amb

flash.

Punts forts:

1. Presentació detallada dels diferents perfils professionals de la productora.

2. Utilització de diferents recursos com imatges i vídeos per presentar els seus projectes.

3. Explicació tan escrita com visual de tots els continguts web.

4. Realització d’un mapa web que mostra l‘esquelet de la web.

Punts febles:

1. Disseny de la web molt senzill i poc professional per estar enfocada al món audiovisual

i multimèdia.

2. No ens interessa cap dels recursos utilitzats pel disseny de la web.


Ens interessa la manera com la productora presenta els diferents elements per a donar a

entendre els continguts de la web. Aquests, es basen en l’ús d’imatges, vídeos i un seguit de

textos perfectament distribuïts que permeten a l’usuari visualitzar ràpidament quin és el

contingut de la web. L’utilització d’elements com el mapa de GoogleMaps per mostrar on es

ICARIA



105

troba la productora i l’ús d’un mapa web que serveix com a índex de la pàgina proporcionar

moltes facilitats a l’usuari.


MACHINIMA

(www.machinima.com)

Justificació: La presentació amb JQuerya la pàgina principal, la tipografia i els colors utilitzats a

tota la interfície són els elements que més ens han cridat l’atenció d’aquesta web per tal

d’incloure-la en el nostre projecte multimèdia.

Descripció del contingut: Web especialitzada en el món dels machinimas mostrant diferents

vídeos i noticies relaciones amb aquest món audiovisual. A la pàgina principal trobem una

presentació realitzada amb JQuery la qual ens mostra les noticies més importants relacionades

amb la web. Situat a la part inferior de la pàgina trobem cadascun dels apartats amb què es

ICARIA



106

divideix la web, també realitzats utilitzant els recurs del JQuery, els quals són:

Whoarewe?,Whatch us in Youtube , Whatchthe tràiler now, Visitthe Store now i New iPadApp.

Punts forts:

1. Estètica utilitzada per a realitzar la interfície de la web.

2. La presentació en Jquery de la pàgina principal

3. A l’apartat Find uses troba molt detallada tota la informació que l’usuari pot rebre

sobre les xarxes socials i plataformes que integren la web.

Punts febles:

1. Necessitat d’entrar al portal YouTube per tal de visualitzar un machinima.

2. S’ha de destacar que al ser Youtube els videos no es troben amb la mateixa qualitat i

professionalitat que per exemple si estiguessin a Vimeo.


Aquesta web integra molts dels requisits estètics indispensables per a elaborar el nostre

projecte. La presentació del començament és semblant al tràiler que nosaltres volem incloure

a l’inici, però utilitzant un altre recurs com és l’html5. El disseny, tipografia i colors, que

aquesta web proporcionen l’aire de videojoc i misteri que nosaltres volem aconseguir en el

nostre treball final.


ICARIA



107

DONyYET

(www.youtube.com/watch?v=hhKA6yuq85Q&feature=related)

Justificació:L’utilització de filtres de colors dintre de les escenes, el tractament que aquest fa

de la llum i la música amb canvis bruscos de les diferents escenes justifica la decisió d’incloure

aquest curtmetratge com un referent.

Descripció del contingut: Curtmetratge que es troba en el portal de YouTube realitzat per la

productora Ciudad de la Sombra. Aquest ens mostra una festa realitzada per Don i Yet a la

platja junt els seus companys malabaristes. Aquest utilitza la música i veu en off per a explicar

la trama de la història. A més, una sèrie de filtres i el recurs de blanc i negre li aporten

creativitat i personalitat al curtmetratge.

Punts forts:

1. Cromàtica utilitzada en les seves escenes on barreja els colors saturats i la llum natural

amb una sèrie de filtres que subtilment van apareixent a mida que avança la història.

2. Canvis bruscos de música i colors color tal i com nosaltres volem realitzar en el nostre

curtmetratge interactiu.

Punts febles:

1. L’estructura i trama de la història no té cap tipus de relació amb el nostre projecte.

2. Alguns dels personatges que apareixen al llarg de la història són molt plans i no

presenten cap tipus de personalitat ni evolució.

3. Hi ha escenaris que no són els adequats per l’ambientació i atmosfera que vol crear

la trama de la història.

ICARIA



108


D’aquest curtmetratge ens interessa especialment els recursos utilitzats per a crear aquesta

cromàtica de colors en les diferents escenes. Així doncs, creiem que utilitzant aquest recurs

però amb un altre estil podrem aconseguir la estètica de videojoc que tan desitgem. El recurs

de la música i el canvi a blanc i negre també ens ha sembla interessant per a donar entendre

alguns canvis que es presenten a la història, com per exemple els flashbacks.


ICARIA



109

CIUDAD DE LA SOMBRA

(http://ciudaddelasombra.net/category/producciones/)

Justificació: L’animació en flash de la pàgina d’inici amb tots els treballs de la productora i la

manera amb la qual presenta les diferents produccions és molt adequat i li dóna l’aire seriós i

professional que nosaltres també busquem en el nostre projecte.

Descripció del contingut:: Web realitzada per una petita productora espanyola anomenada

Ciudad de la Sobra. En la pàgina principal podem trobar alguns vídeos de les seves últimes

produccions i els diferents apartats en què es divideix el contingut de la web: Inicio, Trabajos,

produccionespropias,, talleres, #masterDIWO i Sobre nosotros.

Punts forts:

1. Distribució de tots els apartats a través de la interfície de la web és molt adequada.

2. L’animació en flash de l’inici on es mostren els projectes permet a l’usuari fer-se una

primera impressió del col·lectiu.

3. Els colors i la tipografia utilitzada li donen un aire professional i seriós a la web.

4. L’apartat ProduccionesPropias és molt interessant per la manera com presenta i

distribueix totes les projeccions.

Punts febles:

1. No dona a l’usuari gaires alternatives per poder contactar amb la

productora.Únicament apareixen dues xarxes socials on els pots seguir, en lloc figura el

correu electrònic ni un telèfon de contacte.

2. L’apartat de ¿Quiénsomos? És molt limitat, ja que deixa al client sense referències de

qui són els encarregats de realitzar els treballs.

Elements a tenir en compte pel nostre projecte:

D’aquesta web ens interessa especialment com presenta els projectes en la pàgina inicial.

Nosaltres també volem aconseguir que els vídeos es puguin visualitzar sense la necessitats

d’haver de canviar de pàgina o obrir una nova pestanya. Així doncs, aquest a través d’una

ICARIA



110

finestra que apareix a sobre de la pàgina permeten visualitzar el vídeo d’una manera còmode i

a més molt professional.


ICARIA



111

JUST CAUSE 2

(http://www.youtube.com/watch?v=ZJtP24Ij7ZM)

Justificació: D’aquest videojoc hem recollit la manera amb la qual un color vermell senyala

que el personatge principal és ferit o mort. D’altra banda, els elements que apareixen per

ajudar a l’usuari a moure’s per la interfície justifiquen l’elecció d’aquest.

Descripció del contingut:Just Cause 2 és un videojoc d'acció desenvolupat per l'empresa

sueca AvalancheStudios i publicat per Eidos Interactive i SquareEnix.. L'acció, així com la trama,

es desenvolupa en la fictícia illa paradisíaca de Panau. El protagonista ésRico Rodríguez, l'agent

més qualificat i perillós de l'Agència, que és enviat a Panau per eliminar a un agent dissident

refugiat a l'illa.

Punts forts:

1. Utilització d’objectes per facilitar la jugabilitat a l’usuari com una brúixola que indica

on es troba el protagonista .

2. Cada cop que el protagonista és disparat la pantalla assoleix un color vermellós per

indicar que ha estat ferit.

Punts febles:

1. Falta de música que creï una ambientació més potent en el videojoc i que desperti en

l’usuari una sensacions determinades.

2. La llum utilitzada tampoc és l’adequada, ja que és massa brillant i potent la qual cosa

no és la pròpia dels videojocs d’aquest gènere.


D’aquest videojoc ens interessa bàsicament el recurs dels objectes utilitzats en les diferents

pantalles del joc per facilitar a l’usuari la seva jugabilitat. Així doncs, a través d’aquests

element li ajudarem aportar la sensació de videojoc desitjada en el projecte. A més, per

potenciar aquest efecte ens hem fixat amb com s’utilitza els recurs de omplir la pantalla de

sang per simular que el personatge principal ha estat ferit.

ICARIA



112


BATMAN: ARKHAM CITY

(http://www.youtube.com/watch?v=k32ELE9qZJ8)

Justificació:L’utilització de subtítols per tal de realitza els diàlegs dels diferents personatges i

l’aparició d’elements elaborats amb flash per ajudar a l’usuari a moure’s per tota la interfície

són raons de vital importància per incorporar aquest videojoc.

Descripció del contingut: Aquest és un videojoc d’acció i aventura de l’any 2011 desenvolupat

per la companyia RocksteadyStudios. És la continuació del videojoc desenvolupat l’any 2009,

Batman: ArkhamAsylum basat en el superheroi fictici de DC Comics Batman.

Punts forts:

1. Aparició de subtítols en tots els diàlegs del videojoc.

ICARIA



113

2. Utilització d’elements dintre de la pantalla per permetre a l’usuari escollir les accions i

moviments que haurà de realitzar el protagonista.

3. Aparició a l’inici de cada pantalla dels objectius que aquest ha de complir.

Punts febles:

1. Visió massa tètrica i fantasmagòrica de la ciutat de Manhatan. Aquest utilitza colors

massa foscos i molt poca llum per tal d’aconseguir crear l’atmosfera pròpia del còmic

que interpreta. Aquesta ambientació no és l’apropiada pel nostre curtmetratge, ja que

volem aconseguir crear uns escenaris que proporcionin a l’espectador una sensació més

realista.

2. Utilització d’un seguit de plànols massa tancat i juga molt poc amb aquests.


D’aquest videojoc ens interessa sobretot la utilització que realitza de subtítols en la part

inferior de la pantalla. D’aquesta manera, ens ha sembla que mitjançant aquest recurs

aportarem la sensació de videojoc a la nostra obra. L’aparició dels objectius que ha de complir

el protagonista en cada pantalla també serà utilitzat pel nostre projecte. La diferència és que el

nostre protagonista rebrà una trucada on se li explicarà quina és la missió que ha de realitzar.


ICARIA



114

MARK ECKO

(http://www.marcecko.com)

Justificació: he escollit aquest entorn web, ja que està dissenyat amb flash. Té una

presentació dels elements damunt de la interfície molt visual i interessant. El fet que el

primer nivell sigui una superfície amb fotografies, i que al moure el ratolí la web es desplaçi

seguint el moviment m’ha fet recordar a com volem presentar nosaltres també el nostre

primer nivell. A més, el disseny és molt elegant.

Descripció del contingut: el contingut de la web està presentat dues vegades, una a través

d’imatges que duen un títol i l’altre a través d’un menú principal que es desplega de la part

superior de la pantalla. Si s’escull navegar a través de les imatges, l’usuari prem damunt la

imatge. A questa la dur a un segon nivell amb el contingut específic. Si s’escull navegar a

través del menú que es desplega de la part superior, al moure el cursos per damunt dels

diferents títols, aquests tenen un hover. Apareix un contorn de color amb una imatge.

Punts forts:

1. Es carrega ràpidament, no fa esperar a l’usuari.

2. La pàgina té un menú molt visual.

3. Si l’usuari no sap navegar a través del menú en imatges té un menú més fàcil per a

usuaris no experimentats.

4. Té un buscador per agilitzar la cerca a través de la web.

ICARIA



115

Punts febles:

1. La pàgina presentada no té res a veure amb el projecte que nosaltres

desenvoluparem, però estar bé veure quines opcions et permet el flash.

2. No integra ni vídeo ni audio.

3. Molt del contingut presentat està allotjada en una pàgina externa.


Tenint la nostra interfície web, un dels elements a integrar en el nostre projecte és la

pantalla principal. Aquesta consta d’un mosaic d’imatges que es mouen al mateix moment

que l’usuari mou el cursor.


CRANK

(www.youtube.com/watch?v=h9DDIdaA7GA)

Justificació:llargmetratge d’acció. La trama gira entorn a un home que l’han enverinat i per

no morir no li poden baixar les pulsacions. El ritme que la mort d’un dels personatges

demana a la peça audiovisual justifica l’elecció com a referent aquesta pel·lícula. A més,

aspectes de la realització del film són interessants per integrar al nostre projecte.

ICARIA



116

Descripció del contingut: tràiler de la pel·lícula Crank. En aquest es pot veure diversos

elements estètics del film que nosaltres volem incorporar a la nostra peça audiovisual, la

qual anirà integrada a la part multimèdia del projecte.

Punts forts:

1. La manera de com treballen la textura i el color de les imatges és interessant. A

l’hora d’anunciar la interactivitat voldríem usar aquesta saturació del color de

les imatges.

2. La banda sonora del film també és molt interessant, ja que ajuda a mantenir la

tensió a la trama.

3. L’ús de la pantalla partida també serà un altre dels recursos tècnics que farem

servir per al nostre curtmetratge.

Punts febles:

1. Nosaltres no disposem de tant pressupost com la pel·lícula esmentada. Els recursos

dels quals disposem són limitats.

2. La nostra experiència en la producció i la realització audiovisual encara està per

madurar. Amb el pressupost i els recursos dels quals disposem, i amb tot l’esforç

del món, intentarem de fer un producte el més atractiu visualment

possible.Elements a tenir en compte pel projecte web:

La temàtica del nostre producte audiovisual ens obliga a fer un muntatge picat, retoc de

colors i jugar amb la llum. De la pel·lícula Crank, integraríem el retoc de color, en alguns

casos a través de la saturació. També muntarem certes part del nostre projecte amb un

ritme marcat i ràpid. Per últim l’ús de la pantalla partida en una escena concreta és un altre

dels recursos tècnics que incorporarem.

ICARIA



117


THE MAN WHO WANT’S THERE

(http://www.youtube.com/watch?v=htxvLcSnOU0)

Justificació : El tractament de les llums i les ombres com a referent a seguir.

Descripció del contingut: Es tracta del tràiler del llargmetratge Themanwhowasn’tthere.

Aquest film realitzat per els germans Coen està rodat en blanc i negre. Mostra la vida del

barber Ed Crane, un ésser rosegat per l'avorriment. Ed fa xantatge al cap de la seva dona

per aconseguir diners i poder invertir en la tècnica de la neteja en sec. Idea un pla que surt

terriblement malament.

Punts forts:

1. Rodada en blanc i negre.

2. Il·luminació molt marcada. Presència d’ombres.

ICARIA



118

Punts febles:

3. La temàtica s’allunya del nostre projecte

4. Disposen de molts recursos.

5. Molta experiència en el camp audiovisual .


Les parts del nostre curtmetratge que mostraran la vida passada del nostre protagonista, en

Pablo, també seran en blanc i negre. D’aquesta manera es veurà d’una forma més clara que

es tracta de flashbacks. L’ús del to de blanc i negre usat en la pel·lícula està molt ben

treballat i en algunes escenes les llums i les ombres són molt marcades. Aquestes llums i

ombres, ja sigui en les escenes en blanc i negre com en les de color, es poden usar per

mostrar el caràcter del nostre personatge. Un home ple de llum que per conseqüències de

la vida s’ha vist obligat a tenir una part fosca.

Screenshot del curt :

ICARIA



119

THE FIGHT CLUB

(http://www.youtube.com/watch?v=kgNF7_EWEZo)

Justificació:banda sonora que prenem com a referència per a crear la nostra pròpia.

Descripció del contingut: En aquest vídeo podem escoltar un dels temes que formen part

de la banda sonora original del film “Thefight club”.

Punts forts:

1. Música creada expressament per el producte.

2. Crea ambient i ajuda a avançar la història.

Punts febles:

1. No podem comprar els drets intel·lectuals de la música que ens agradi.

2. No tenim prou coneixement musical per a poder-nos crear la banda sonora.


La banda sonora de la pel·lícula esmentada encaixa a la perfecció amb la temàtica tractada i

els temes creats ajuden a recrearl’ambient que volen aconseguir en cada escena i en el

conjunt general del film. Aquests temes acompanyen al personatge i ajuden a fer avançar

l’acció. Nosaltres volem una banda sonora que doni un ritme al curt i ajudi a desenvolupar

de manera fluida els esdeveniments.

Al no poder comprar els drets de propietat intel·lectual de temes musicals que ens

agradaria incorporar el nostre projecte, buscarem col·laboradors que miraran d’ajudar-nos i

crear alguns temes propis per fer servir com a banda sonora. D’altra banda, estem buscant

música lliure de drets de propietat intel·lectual.

ICARIA



120

PWNISHER

(http://www.youtube.com/pwnisher#p/u/3/dZ4FGm9Fwvg)

Justificació: es tracta d’un curtmetratge inspirat en un videojoc ja existent.

Descripció del contingut: Es tracta del perfil del canal Youtube de Pwnisher. Pwnisher és el

sobrenom d’un jove creador audiovisual. El seu canal conté varis vídeos els quals són una

simulació de varis videojocs, com CardboardWarfare o Killzone. Tots els vídeos són de gran

qualitat. Alguns d’ells pretenen reproduir fidelment una escena d’un videojoc, mentre que

d’altres són una parodia.

Punts forts:

1. Imatge digital molt treballada.

2. Efectes especials molt aconseguits.

3. Retoc de color aconseguint tons freds, com el gris i el blau.

4. Ambient de videojoc ben recreat.

Punts febles:

1. Pocs gràfics típics del videojoc.


El curt visualitzat té molta qualitat tant a nivell tècnic com visual. La qualitat de la imatge

excel·lent i la realització està ben treballada. El muntatge aporta un ritme a la acció molt

adient per la temàtica tractada. Nosaltres també jugarem amb el muntatge per tal de crear

un ritme i aconseguir imatges visualment potents.

La direcció de fotografia és molt encertada i la il·luminació ajuda a recrear l’ambient del

curt. Gràcies a la il·luminació, aconsegueix de recrear tonalitats fredes, de colors metàl·lics,

i d’aquesta manera aconseguir un ambient moltsemblant al de un videojoc.

La nostra estètica també ha de recrear en moltes ocasions imatges amb una tonalitat freda,

per això agafem aquest curt com a exemple.

Tot i que integra elements propis del videojoc, tal i com rètols informant de la localització

de l’acció o uns plans fent servir un punt de vista d’un visor, crec que haurien d’introduir

ICARIA



121

més elements propis del videojoc per ambientar-ho correctament. Nosaltres introduirem

diversos gràfics informatius per ajudar a recrear de forma més realista la simulació d’una

partida de videojoc.


GOD OF WAR III

(http://www.youtube.com/watch?v=Hiieqlgbn2c)

Justificació: En menor mesura, però no per això menys importants, God of War també ens

ha servit com a referent per teixir alguns detalls de la nostra simulació del videojoc. Per

aquest motiu tenir en compte la seva web és un aspecte que ens pot beneficiar alhora de

configurar el nostre entorn.

Descripció del contingut: Tot i que ofereix menys possibilitats que la web anterior atorga a

l’usuari la possibilitat al de fer un recorregut complet dins de la saga i del joc. Està

constituït per 7 apartats: Historia, que contextualitza al usuari de en quin punt es troba la

saga tant a nivell argumental com a nivell d’aspectes tècnics. Notícies, que permet al usuari

estar al cas de les últimes novetats de la saga. Vídeos, que ofereix la possibilitat de veure

ICARIA



122

tràilers del joc. Descàrregues, que permeten descarregar al propi ordinador esbossos dels

escenaris, wallpapers i screenshots entre d’altres coses. Fòrum, que introdueix a l’usuari en

una comunitat virtual on pot plantejar dubtes o opinions sobre el joc i la saga. Descobreix

els jocs, que presenta a l’usuari cada una de les parts de la saga en totes les plataformes.

Finalment l’apartat de El poder dels Déus, que vincula el joc amb les xarxes socials com

Facebook, Twitter, Diggi altres.

Punts Forts:

1. Fidedigne a l’estètica del videojoc.

2. Intenta captar més jugadors, no només es centra en els que ja ho són.

3. Contacte amb les xarxes socials.

4. Possibilitat d’adaptar la web al país des d’on es consulta.

5. Es permet desactivar el so de la web.

Punts Febles:

1. La càrrega de la pàgina és lenta.

2. Masses apartats redireccionen a una pàgina externa.

3. Alguns continguts són un pèl pobres, i falta informació. Ex: A vídeos només hi ha 3

vídeos.


Primerament m’agradaria destacar que és molt important mantenir un cercle tancat a la

nostra pàgina en quant als continguts que l’usuari visita, ja que si constantment el portem a

entorns web externs a la nostra pàgina, pot provocar que l’usuari perdi l’atenció en la

nostre website i acabi marxant cap a un altre. Per aquest motiu els enllaços externs han

d’estar molt limitats a continguts on sigui necessàriament estricte incorporar-ne un.

A més a més, es fonamental que tots aquells nodes o apartats interactius que afegim a la

web han de ser complets i satisfactoris per al usuari, aquest no pot sentir que ha perdut el

temps al consultar un node de la nostre web.

ICARIA



123

Finalment cal tenir en compte que la música en una web pot ser de gran ajuda, però també

pot perjudicar molt. En aquest sentit el fet d’incorporar so a la web és una bona idea, ja que

dona dinamisme a l’entorn i alhora permet crear un clima dins la web, però ha de donar

sempre la possibilitat de ser desactivat, perquè sinó l’usuari es pot veure estressat i

tancarla web.


FINAL FANTASY XIII

(http://www.youtube.com/watch?v=naUSBEVRLng)

Justificació: Les escenes de vídeo de la saga de Final Fantasy son un dels seus elements més

característics i més apreciats pels jugadors, i precisament aquest element s’ha tingut en

compte per estructurar el nostre projecte, on també apareixen escenes de vídeo

intercalant-se amb la simulació del videojoc en si. Per aquest motiu l’anàlisi de la web de

l’última entrega de la saga era un element indispensable per idear l’entorn web.

ICARIA



124

Descripció del contingut:La web de Final Fantasy està estructurada en dos menús, al menú

superior podem trobar pestanyes interactives que ens donen informació sobre aspectes

comercials no només del joc sinó de la companyia SquareEnix. Així doncs podem trobar una

pestanya que ens permet comprar el producte, un altre que ens permet registrar-nos per

tal de rebre informació sobre qualsevol joc de la companyia i finalment una nota de premsa

que ens proporciona informació general sobre la posada en escena del joc dins del mercat.

En aquest menús superior trobem també accés a les xarxes socials.

En menú inferior trobem, 6 pestanyes: joc, personatges, eidolones, estils de joc, mitjans i

descàrregues. És a dir, tot el menú està dedicat a aspectes del joc i al seu argument. A més,

dins de cada pestanya trobem gran varietat d’informació relativa a la pestanya que haguem

clicat, de manera que dona tota la informació possible.

Punts Forts:

1. Web molt ben organitzada.

2. De fàcil navegació.

3. Gran potencial estètic.

4. Completa a nivell d’informació.

5. Orientada a la seva difusió per la xarxa.

6. Pensada tant per fans del joc com per possibles jugadors.

7. Pensada per internautes de qualsevol indret del món (multillenguatge).

8. Compagina molt bé imatge i text.

Punts Febles:

1. Masses scrolls verticals.


Hem de considerar que el fet d’incorporar scrolls en un entorn web multimèdia és perillós,

ja que d’entrada l’usuari d’aquests sites espera més veure que llegir i per tant s’ha d’anar

ICARIA



125

amb peus de plom pel que fa al text. Primerament hem de saber organitzar i compaginar

molt bé el que són imatges, vídeos i textos, i per tant sempre prioritzar els dos primers per

davant de la lletra escrita. En el cas del text col·locar scrolls es complicat ja que en certa

manera dificulta la seva navegació i fa feixucs els continguts de la web.


ICARIA



126

CALL OF DUTY

(http://www.youtube.com/watch?v=-aLszbWVoBU)

Justificació: La perspectiva en primera persona dels shooters és un dels elements més

famosos i característics d’aquest gènere de videojoc. Aquest element ha estat tingut en

compte per al nostre producte i incorporat per al seu desenvolupament, fet que m’ha fet

decidir-me per la web d’un dels shooters més populars de la indústria dels videojocs: Call of

Duty.

Descripció del contingut: Quan l’usuari entra a la pàgina de Call of Duty, pot escollir entre

tots el jocs de la saga i entrar en aquest. Si ens fixem en un en concret, Call Of Duty Black

Ops, veiem que la pàgina està estructurada amb un menú superior que permet una gran

varietat de possibilitats. Podem trobar media, notícies sobre el joc, l’apartat de DLC que ens

dona una petita explicació sobre diferents packs d’expansió, la pestanya de Teatre que

proporciona al jugador un contingut personalitzat oferint vídeos de les missions de l’usuari

així com screenshots pròpies, l’apartat missions que permet als usuaris registrats a la

comunitat de Call of Duty puntuar missions en les seves modalitats de joc, l’apartat de

fòrum que dona la possibilitat als jugadors de plantejar dubtes sobre el joc per obtenir

respostes d’altres usuaris i finalment la pestanya de suport que planteja les FAQ així com

l’estat del servei online del joc.

Punts Forts

1. No s’estanca en un joc de la saga, l’usuari pot navegar per qualsevol.

2. La navegació és molt senzilla i intuïtiva.

3. Web molt ben organitzada.

4. Pensada per satisfer als que ja són usuaris i atreure els que encara no ho son.

5. Servei personalitzat (Theatre) i gràcies al accés mitjançant registre.

6. Informació completa sobre tots els aspectes que planteja la web.

7. Web molt atraient degut al seu impacte visual.

ICARIA



127

Punts Febles

1. Els continguts no es relacionen amb les xarxes socials.


L’estètica de la web ha d’estar molt orientada a la del nostre producte interactiu. L’impacte

visual és essencial perquè l’usuari alhora de fer un primer judici crític consideri la nostra

web interessant per explorar-ne els continguts.

Així mateix, fer que la navegació sigui intuïtiva i senzilla facilita molt més la feina al usuari,

el qual gaudeix més del entorn al entendre’l i fusionar-se amb ell.


ICARIA



128

WORLD OF WARCRAFT CATACLYSM

(http://www.youtube.com/watch?v=Wq4Y7ztznKc)

Justificació:World of Warcraft és un dels jocs online més famosos de la història amb milions

de seguidors arreu del món. El fet de analitzar la seva web i tenir present com la enfoquen

ens pot ajudar molt a donar els passos correctes per donar llum a un website amb cara i

ulls.

Descripció del contingut: La web consta d’un menú principal i un de secundari amb els

mateixos nodes informatius. Aquest menú està constituït per 5 pestanyes: Home, Features,

Media, FAQ i Forums. A la primera pestanya podem trobar la sinopsi del joc juntament

altres continguts com poden ser screenshots que mostren l’entorn gràfic creat i finalment

algunes novetats i actualitzacions de d’aquesta última entrega del joc. En els següent node

informatiu (Features), podem veure característiques pròpies d’aquesta última entrega de

WOW. A l’apartat de media podem accedir a gran varietat d’informació audiovisual com ara

el tràiler del joc, galeries de fotos de screenshots i artwork i finalment diversos wallpapers

exclusius del joc. Seguidament a FAQ (FrequentAskedQuestions) podem consultar

informació sobre preguntes bastant comunes que es fan els nouvinguts sobre el joc en si i el

seu funcionament. En última instància ens trobem al el fòrum, un apartat molt complet que

no només poda en contacte als jugadors de WOW arreu del món, sinó que proporciona als

usuaris gran quantitat d’informació als usuaris sobre aspectes del joc, últimes notícies sobre

la saga WOW i la seva desenvolupadora (Blizzard), així com un apartat de servei tècnic i

novament de continguts audiovisuals.

Punts Forts:

1. Es tracta d’una web molt completa que no deixa ningun aspecte al aire. Qualsevol

informació que busqui l’usuari la podrà trobar a la web.

2. Per tot aquell que hagi jugat el joc, l’estètica sencera de la pàgina recrea el mateix

joc, fet que ajuda a crear el clima de WOW fora del joc en si.

ICARIA



129

3. Els continguts s’actualitzen bastant sovint fet que dona continuïtat a la web.

4. Constantment l’usuari rep visualment la invitació per afegir-se a la comunitat del

joc.

5. Trobem elements en moviment dins la web que li atorguen dinamisme.

6. La composició es excel·lent.

Punts Febles:

1. Alguns continguts es troben repetits en diverses seccions. Redundància.

2. El menú inferior dona accés a un apartat excessivament simple.


El fet de repetir continguts és un aspecte que s’ha de tenir molt en compte, ja que pot

provocar avorriment en l’usuari i per extensió que aquest perdi l’interès en la pàgina.

Tanmateix, hem de procurar que tots els continguts segueixin una mateixa línia, no pot ser

que alguns siguin més elaborats que altres, ja que dona la sensació de desídia.

El dinamisme a la web es molt important, el fet de crear una web que no sigui estàtica

satisfà molt més al usuari que si no ho és. A més, dona un aspecte més elaborat.


ICARIA



130

L.A. NOIRE

(http://www.rockstargames.com/lanoire/agegate/ref/?redirect=)

Justificació: L.A. Noire és un joc bastant semblant en quant a temàtica al nostre projecte. A

més, després de l’experiència web amb l’entorn de GrandTheft Auto, volia indagar una mica

més en webs de jocs de la factoria Rockstar Games.

Descripció del contingut: A diferència de la Web de GrandTheft Auto, L.A. Noire té una

estructura web més convencional. Consta del típics apartats de informació, versions

disponibles per diferents plataformes, adquisició del joc, personatges, fòrum, descàrregues,

vídeos i notícies. Tanmateix incorpora algun node informatiu poc comú com és el cas de

DLC (Downloadable Content) que permet adquirir mitjançant descàrrega continguts pel

videojoc.

Punts Forts:

1. El fet de poder descarregar continguts aplicables al videojoc dota de molta utilitat la

web passa de ser passiva a activa.

2. Es completa a nivell informatiu.

3. Molt fàcil de navegar pels continguts.

4. Insta a l’usuari a adquirir el producte.

5. Endinsa al internauta en el món del videojoc.

6. Incorpora crítiques positives del joc, fet que li dona prestigi.

7. En contacte amb les xarxes socials.

8. Pantalla de verificació d’edat. Dona un aspecte més seriós a la web.

Punts Febles:

1. La pàgina d’inici es troba massa carregada de continguts i potser dificultar la lectura

per part de l’usuari.

ICARIA



131


És un perfecte exemple de eficiència web. Es tracta d’una web model per prendre-la com a

referent.


SUPER8

(http://www.super8-movie.com/)

Justificació: Es tracta d’una web d’una recent superproducció de Hollywood. He considerat

important tenir en compte la web d’aquesta pel·lícula com a referent web ja que he llegit

molt bones crítiques sobre aquest site a Yahooasks.

Descripció del contingut: Quan l’usuari accedeix a la web pot trobar que només entrar-hi es

posa en marxa el tràiler de la pel·lícula. L’internauta pot trobar sota la mini pantalla de cine

on es reprodueix el tràiler un menú composat per 6 pestanyes. 3 d’aquestes pestanyes

estan lligades al contingut audiovisual de la pel·lícula, ja que podem trobar la sinopsi,

galeria de fotografies i un apartat de vídeos. Just a sota, podem trobar un altre menú que

en contraposició al anterior ens porta cap a continguts interactius. D’aquesta manera

ICARIA



132

podem trobar: Que pasada! Un apartat el contingut del qual es un petit minijoc en el qual

l’usuari explora una taula plena d’objectes pels quals pots navegar i anar a parar a altres

continguts com per exemple aplicacions per a Iphone de la pel·lícula, notícies, etc.

L’apartat de sala d’edició permet al usuari fer un petit muntatge amb escenes de la

pel·lícula i posteriorment reproduir-les dins de la mateixa web. Finalment trobem la sala de

producció que permet al usuari veure imatges inèdites de la pel·lícula, però requereix un

registre mitjançant la xarxa social Facebook.

Punts Forts:

1. Dona una gran interactivitat amb l’usuari.

2. Molt lligat a les xarxes socials.

3. La web capta a l’usuari per consumir el producte.

4. Molt completa a nivell informatiu.

Punts Febles:

1. Conté continguts que pesen massa per la web i l’usuari s’ha d’esperar a que es

carreguin.

2. La pàgina principal s’ha de refrescar constantment perquè funcioni.

3. Hi ha continguts que apareixen malament dins la web com per exemple a la galeria

de fotografies.

4. A l’apartat de vídeo només hi ha el tràiler que apareix al obrir la pàgina.


Per una banda, s’ha de donar èmfasi al fet de que aquest website incorpora un joc

interactiu que dota de molta atracció la web. El fet de incorporar algun tipus d’element

interactiu on l’usuari participi es molt interessant. Per exemple, seria possible incorporar

una secció on l’usuari pogués proporcionar propostes sobre nivells alternatius. Això faria

molt més partícip al usuari i es veure molt més atret pel contingut de la web. Fer us d’un

petit videojoc dins la web on l’internauta pogués descobrir trossos d’història dels

personatge seria un altre element que ajudaria a donar més ressò a la web.

ICARIA



133

Per altra banda, hem de tenir en compte que els continguts de la web han d’estar en

correctes condicions per a la seva visualització dins la xarxa, ja que per exemple en aquesta

web algunes fotografies fora de camp i això desprestigia molt l’entorn en si, que en línies

generals està molt treballat.

Per últim, cal adaptar els continguts a la xarxa perquè aquests siguin de fàcil càrrega i

l’usuari no s’hagi d’esperar per visualitzar la informació, ja que la falta d’agilitat de la web li

pot fer perdre visites.


ICARIA



134

TRANSFORMERS 3

(http://www.transformersmovie.com/)

Justificació: Un altre exemple de web d’una altre superproducció, que m’ha servir per

contrastar les dades obtingudes a la web anterior i apreciar maneres diferents d’enfocar un

projecte web d’un producte similar.

Descripció del contingut: A nivell estructural, és una pàgina web bastant senzilla, ja que

només consta d’un menú i dins d’aquest hi ha poques pestanyes: About, Video, Gallery i

Downloads. A l’apartat d’about simplement podem trobar informació relativa a la pel·lícula,

a Vídeo podem trobar precisament continguts de vídeo del tràiler i els spots per televisió, a

l’apartat gallery podem trobar fotografies de la pel·lícula i a Downloadpodem descarregar-

nos wallpapersi avatars.

Punts Forts:

1. És una web simple i de fàcil navegació.

2. Visualment és molt atractiva ja que incorpora molts elements de la pel·lícula.

Punts Febles:

1. Continguts excessivament simples.


Cal trobar la justa mesura entre simplicitat i complexitat per tal d’obtenir una web que fàcil

d’entendre i navegar però completa i satisfactòria per l’usuari.


ICARIA



135

REC 3

(http://rec3genesis.com/)

Justificació: Es tracta d’un altre exemple similar al anterior un cop més per contrastar

informació i per veure enfocs diferents. La pel·lícula de REC m’ha semblat interessant

perquè es un producte cinematogràfic de gran ressò nacional.

Descripció del contingut: És una web promocional per la propera entrega de la saga

espanyola REC. Degut a aquest motiu la web està estructurada de diferent manera que les

altres webs sobre pel·lícules, tot i que també hi podem trobar alguns continguts comuns

com pot ser el tràiler. Cal destacar, que en aquest entorn, no només es centren en el

producte en si, en aquest cas la pel·lícula, sinó que també donen ressò al procés de

producció del film fet que es porta a terme mitjançant un blog de rodatge on els usuaris

poden anar seguint l’evolució del procés de producció de la pel·lícula. A més a més, també

donen informació sobre el director en qüestió , Paco Plaza, mitjançant un enllaç al seu

videoblog.

Punts Forts:

1. L’usuari està en tot moment informat sobre el procés de producció del film.

2. No només es centra en el producte sinó en tot el que l’envolta.

3. La web manté vincles amb altres productes relacionats, en aquest cas podem trobar

enllaços a les pàgines web de les anteriors entregues.

4. Web molt informativa, no deixa aspectes al aire.

ICARIA



136

5. A nivell compositiu està molt ben organitzada, els punts d’interès són clars i

evidents.

Punts Febles:

1. Els enllaços externs a pàgines web d’alguns patrocinadors trenca el clima de la web.


El fet d’incorporar un blog de producció es una idea molt bona, ja que manté actualitzat al

usuari de forma bastant innovadora. D’aquesta manera podríem anar penjant vídeos i

altres mètodes informatius sobre el procés de creació del nostre projecte.


ICARIA



137

MULTIOPTICAS

(http://www.combina2mo.com/)

1.Multiopticas2.Creació d’un anunci interactiu per tal de promocionar l’oferta d’ulleres en

que se’n poden combinar dues.3. Obert a tothom sense haver de registrar-se ni ser

client.4.20115.Castellà6.Central Multiopticas, Av, de los Reyes s/n 28770 ColmenarViejo

Tel: 918357000

Justificació: Aquesta empresa té una home interactiva i en moviment. Utilitzen un gràfic en

panoràmic que permet a l’usuari desplaçar-se a dreta i esquerra a més a més d’anar

escollint productes.

Descripció del contingut: És una web d’una òptica. El propòsit és vendre ulleres de la forma

més original possible. El fons de la web és un anunci que es pot anar reproduint, ocupa

tota la pantalla. Mentre es reprodueix podem veure diferents tipus d’ulleres, marques...

també està relacionat amb les xarxes socials.

Punts forts:

1. Els colors són elegants i càlids, igual que el producte que pretenen vendre.

2. Les imatges de les ulleres es desplacen de manera suau a través d’un menú d’un

color més clar que al passar per obre augmenta de tamany.

3. La barra de sota està ben dissenyada per als continguts i la temàtica però tampoc

s’acaba d’entendre la seva funció.

4. Crida l’atenció que puguis interactuar en un anunci de publicitat qualsevol, com pot

ser de l’empresa Multiòpticas. E

5. stà bé la forma en que es carrega el vídeo segons la teva tria; el logotip de la marca

es va omplint de baix a dal, sense trigar excessivament massa.

6. .Abans de començar a veure l’anunci pots anar directament a la galeria d’ulleres,

que et torni a explicar com funciona, veure les condicions legals o compartir-ho a

ICARIA



138

les xarxes socials (Facebook i Twitter), tot això en una barra molt discreta a sota la

pantalla.

7. Tots els links funcionen bé i la pàgina no triga en carregar-se.

Punts febles:

1. El funcionament de l’interactivitat està explicat al principi en tres breus passos però

tot i així un cop poses play l’anunci comença i l’usuari no sap ben bé com

interactuar, no sap ni es veuen clares les conseqüències d’aquesta interactivitat.

2. La usabilitat i navegació no són gaire intuïtius i per tant, l’objectiu de comunicació

plantejat no s’acaba de complir, és necessari llegir l’anunci escrit per entendre que

pretén dir-te el vídeo.

3. El vídeo té el tamany de tota la pantalla, potser massa si has d’anar mirant com

interactuar al mateix temps que veus el vídeo.


ICARIA



139

ESCAPE FROM CITY

(http://www.youtube.com/watch?v=-UmPxUMW4h8&feature=related)

1. Nom de l’organització: PurchaseBrothers, Valve Corporation2. Objectiu institucional:

Mostrar a l’espectador un curtmetratge amb estètica de videojoc.3. Accessibilitat del

producte web: Obert a tothom.4. Any de creació: Penjat en aquesta plataforma l’any

20115. Idiomes: Anglès.6. Dades de contacte: Valve Corporation / usuari que ha penjat el

vídeo: powerslayer58

Descripció del contingut Es tracta d’un vídeo, un curtmetratge però que aconsegueix ser

molt fidel a l’estètica dels videojocs, té grans efectes especials i fins i tot tracta la mateixa

temàtica bèl·lica dels jocs. Recrea totalment les armes, vestuaris, espais... a la perfecció.

Justificació:Per al nostre projecte aquesta estètica de videojoc que s’aconsegueix en un

vídeo ens interessa molt, és important que tinguem en compte tots els aspectes que es

tenen en compte per assolir aquesta estètica. Tot i així té masses efectes especials i en

alguns cops és poc realista.

Punts forts:

1. Els colors són saturats com en un vídeojoc, l’ambientació és molt encertada pel

tipus d’història de ciència ficció, per això també hi apareixen molts efectes

especials que ajuden a ambientar i fer encara més realista la sensació d’estar dins

un joc.

2. Té una usabilitat i una navegació molt intuïtiva per tal de veure les tres parts del

curtmetratge.

3. Només hi ha contingut audiovisual. No en té cap d’interactiu per a l’usuari, només

es pot visionar però és molt interessant el tipus d’hibridació entre curtmetratge

amb estètica de videojoc i còmic.

ICARIA



140

4. El vídeo no triga en carregar-se i es pot visionar en pantalla estàndard de la pàgina

o en pantalla completa, a més fins i tot disposem del producte en qualitat HD. El so

i els efectes especials estan molt treballats.

Punts febles:

1. Al no tenir una pàgina pròpia, la plataforma de Youtube potser no és la més

encertada..

2. No hi ha links.


ICARIA



141

EA GAMES

(http://www.ea.com/battlefield)

1. EA Games (Electronic Arts)2. Posar a disposició dels aficionats als videojocs un portal on

es puguin informar sobre tots els videojocs, noves notícies de l’àmbit, dels jocs en diverses

plataformes, comprar i fins i tot jugar a alguns videojocs de forma gratuïta.3. Una gran part

del contingut de la pàgina és obert a tothom però si vols jugar cal que et registris.4. 19825.

28 6. Via Facebook, Twitter, Youtube i foros. Electronic Arts Software, S.L amb seu a

Redwood City (California)

Descripció del contingut:Pàgina web on hi ha a disposició dels amants del videojoc totes les

novetats i notícies que han de saber. La pàgina també permet jugar a certs jocs de manera

gratuïta.

Justificació:És una pàgina amb molts continguts però alhora molt endreçada. També ens

serveix per veure tipus de plans utilitzats en els jocs.

Punts forts:

1. Es tracta d’una pàgina molt endreçada, tot destaca per igual. Hi ha un menú i un

submenú amb cada pestanya desplegable. El color de fons és blanc així no es

confon cap requadre ni en destaca més un que l’altre. Al passar per sobre de cada

quadre es desplega per sobre mateix el nom del logotip del joc al qual pertanyen

les imatges. L’usabilitat i la navegació són intuïtius.

2. EA ha demostrat ser un líder creatiu i, actualment, la companyia continua innovant

i millorant el joc interactiu. Gracies a la combinació de medis tecnològics com

l’animació digital, el vídeo, les imatges fotogràfiques, la captura de moviment, plans

3D i tecnologia de renderització de les siluetes, gràfics digitals i so en estèreo. EA

aplica la tecnologia i la creativitat per desenvolupar l’entreteniment per al públic

general a través del medi interactiu. Un element en concret que m’ha cridat

l’atenció és el poder desplaçar-te d’una notícia a una altra a partir de dues tecles (J i

K) a munt i avall.

ICARIA



142

3. Tots els links funcionen bé i els vídeos no triguen a carregar-se. S’actualitza segons

les novetats i les noves notícies.

Punts febles

1. No crec que sigui una web amb punts febles.


TUBE ADVENTURES

(http://www.youtube.com/watch?v=HjdMahRsBG4&feature=iv&src_vid=yvjqIvkScYs&an

notation_id=annotation_392716)

1. Cordero TV2. Mostrar als usuaris de Youtube un videojoc “casolà” on l’usuari pot

interactuar.3. Oberta a tothom.4. 20085. Castellà6. Usuari que l’ha penjat: pinofas (tenint

compte al Youtube)

Descripció del contingut:Hi ha diverses parts. A la primera t’explica de què es tracta el que

estàs veient, la història i la missió del videojoc. A les següents ja pots jugar, pots escollir

entre les dues opcions de joc que et dona per a que continuï la història i a sota et va donant

instruccions sobre el que has de fer. Justificació Tot i ser un producte de baixa qualitat i

poca serietat, la idea que mostra encaixa perfectament amb la nostra. Veiem que és

possible desenvolupar aquesta idea molt més, tot just està als seus inicis.

ICARIA



143

Punts forts:

2. La idea és bona i funciona bé.

3. A més han inserit un petit disseny de videojoc a la part de sota que indica elements

del personatge principal (vides, armes...) propi d’un videojoc una mica antic però

que aporta un detall important a la intenció i idea que volen transmetre.

4. Tot i ser una mica rudimentari la navegació i l’usabilitat s’adapten a les necessitats

de comunicació.

Punts febles:

1. Els colors i la qualitat de vídeo no són el més adequat, es tracta d’un vídeo molt

casolà.

2. Tot i així els continguts audiovisuals són de molt baixa qualitat, la qual cosa fa que

perdin interès per si mateixos.

3.

4. El so i el muntatge estan poc treballats


ICARIA



144

CULTURA GENERAL

(http://www.youtube.com/watch?annotation_id=annotation_667033&src_vid=kLmY_lq

nfdU&feature=iv&v=JZlS67W7QRA#t=4m21s)

1. Bullysteria 2. Posar a disposició dels usuaris un vídeo interactiu basat en un text de

cultura. 3. Obert a tothom 4. 2011 5. Castellà 6. [email protected] / Facebook i

Twitter.

Justificació: Utilitza la interactivitat de l’usuari durant tot el video. Són petites

interactivitats però estan força treballades tot i ser un video molt casolà.

Descripció del contingut: Es tracta de preguntes sobre cultura general, algunes no

importants però sí gracioses, és un contingut original i té interès per si mateix degut a que

són preguntes molt comunes o curioses que inciten a l’usuari a respondre-les. El rol del

personatge presentador aporta molt dinamisme al contingut.

Punts forts:

1. Aquest també és un vídeo “casolà” però amb molta interactivitat. L’estructura

s’adequa a les necessitats de comunicació i la usabilitat i la navegació són molt

intuïtius.

2. els links funcionen bé i les icones de Facebook, Twitter i de contacte estan molt ben

inserides a la superfície, de manera original i clara, juntament amb una breu

explicació del vídeo. Les preguntes es carreguen de forma molt ràpida

Punts febles:

1. El disseny és molt senzill. El vídeo és una bona idea però caldria estar més elaborat

en quant al disseny gràfic de les respostes que l’usuari pot escollir. Els colors són

foscos per la imatge i blanc i negre per al text.

2. El vídeo és de baixa qualitat.

ICARIA



145


EL PROYECTO DE LA BRUJA DE BLAIR

( http://www.youtube.com/watch?v=KEZul_gTmbM)

1.TwistedPictures. 2. Proporcionar a l’espectador un film gravat en mode handycam i de

baix pressupost. 3. Obert a tothom. 4. 1999 5. Castellà i anglès 6. Usuari efegache

Justificació:Utilització de plans subjectius en primera persona. Ens interessen aquests tipus

de plans per donar l’estètica de videojoc.

Descripció del contingut:Els continguts textuals que hi ha al principi de la pel·lícula situen a

l’espectador en la història, però són simples línies sense cap mena de disseny. Els

continguts audiovisuals tenen interès per si mateixos al estar gravat en aquest format

ICARIA



146

innovador. Si no s’hagués gravat aquesta pel·lícula possiblement no s’haurien inspirat a

l’hora de filmar Paranormal Activity o Rec.

Punts forts:

1. El que ens interessa, el film, té un disseny innovador. Es tracta d’una pel·lícula de

baix pressupost gravada en 16 mm i handycam. Ens dona la sensació més que mai

d’estar veien una història completament real, a més a més molts cops els plans són

subjectius, igual que els d’un videojoc i en nighshoot en les escenes que són de nit.

La llum és realista i els colors pàl·lids, compleixen l’objectiu que volen comunicar.

Punts febles:

2. La interficie és altre cop la plataforma de Youtube.

3. La gravació no és de gran qualitat però el procediment de la filmació aporta un

realisme absolut emulant les imperfeccions i el caos del rodatge d’un autèntic

documental de gran impacte.

Screenshot de la pel·licula:

ICARIA



147

ANUNCI TIPPEX DE L’OS

(http://www.youtube.com/profile?annotation_id=annotation_225527&user=tippexperie

nce&src_vid=h-WwAp_g5k4&feature=iv#t=2s)

1.Tipp-Ex 2.Campanya online del producte Tipp-Ex 3. Obert a tothom. 4. 2010 5. Anglès 6.

usuari que penja el vídeo: Tippexperience

Justificació: Utilització de la interactivitat en un anunci publicitari. Diverses opcions de

vídeo.

Descripció de continguts:El contingut audiovisual varia segons el contingut textual que

l’usuari decideixi escriure. A dalt apareix la frase “un cazador..... a un oso” en l’espai buit

l’usuari ha d’escriure el que li sembli. Segons el que escrigui es carrega un video o un altre

segons l’acció que ha de dur a terme el caçador.

Punts forts:

1. Tots els vídeos es carreguen de forma ràpida a més a més d’haver moltíssimes

opcions de visionatge. Aquest fet provoca que l’usuari vagi provant totes les

opcions que se li passin pel cap per tal d’esperar el canvi de comportament dels

personatges.

2. Els colors són vius i de qualitat. La forma és l’adequada al contingut i la usabilitat i la

interactivitat són molt intuïtives degut a que al primer vídeo t’explica el

funcionament mostrant-ho al mateix temps.

3. Tots els vídeos són ràpids de carregar.

Punts febles:

1. Els vídeos són de bona qualitat però no d’excessiva elaboració.

2. La plataforma és YouTube. Cal pensar però que no és un anunci que es pugui

emetre per televisió.

ICARIA



148

Screenshot de la pantalla:

THE NATIONAL COLLECTION OF AERIAL PHOTOGRAPHY(http://aerial.rcahms.gov.uk/)

1. Royal Commission on theAncientandHistorical Monuments of Scotland 2. Proporcionar 5

milions de fotos aèries inèdites de la II Guerra Mundial, classificat per països i regions. 3.

Obert. 4. 2005 5. Anglès 6. John Sinclair House 16 Bernard Terrace, Edinburgh EH8 9NX,

United Kingdom. Tel: +44 (0) 131 662 1456

Descripció del contingut: En general tot el contingut són fotografies aèries en blanc i negre.

Aquestes tenen un iteres particular al ser fotografies inèdites d’un fet històric tant

important. Només utilitzen text per donar l’opció a l’usuari d’escollir el país i regió que vol

visionar acompanyat de la infografía d’un mapa del territori. Això aporta molta rapidesa

visual i facilita a l’usuari el funcionament de l’aplicació. Cada fotografia és acompanyada

d’una descripció de la fitxa tècnica de la imatge (dia, any, lloc, frame...)

Punts forts:

1. Els colors de la pàgina són freds, blaus i blancs. Totes les fotografies en blanc i

negre, en conjunt transmeten la serietat del gran conflicte. Trobem el menú a la

part esquerra i de dal a baix de la pàgina, ordenat per apartats. Al centre de la

ICARIA



149

pàgina i ocupant la major part hi ha les fotografies. És una pàgina amb no més de 3

nivells i una fàcil navegació i usabilitat.

2. Les imatges carreguen de forma ràpida, al ser velles no són de gran qualitat però

estan en molt bon estat de conservació. Es poden veure a tamany mitjà - gran i

anar-les passant d’una en una. Si ets usuari registrat et permet veure les imatges a

més resolució i poder augmentar-les de tamany.

Punts febles:

1. Limitació de continguts si no hi estàs registrat.

2. Pocs idiomes.

3. Costa d’entendre el menú, és a dir, el que és cada apartat.


ICARIA



150

ELECTRONIC ARTS ESPORTS

(www.easports.com)

1.Electronic Arts Esports. 2. Web d’empresa dedicada a la producció específica de videojocs

esportius, en que l’usuari pot conèixer les novetats més rellevants i els diferents esports

dels quals pot trobar videojocs. 3. Obert. 4. Anglès.

Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la

nostra web.

Punts forts:

1. A través d’efectes javascript l’usuari pot conèixer els productes més destacats

sense haver de moure el ratolí per la pantalla.

2. La home no te “scrolling” i limita els continguts a la mida de la pantalla ordenant

el contingut per temàtiques en el menú principal, la qual cosa el fa força intuïtiu.

Punts febles:

1. És limita molt la informació de la home destacant molt les imatges dels

productes més destacats però amb poques opcions per navegar per la web.

ICARIA



151

MPORA

(www.mpora.com)

1.MPORA pureactionsports. 2. Web dedicada a reproduccions audiovisuals relacionades

amb els diferents esports extrems i en que l’usuari pot registrar-se i penjar els seus propis

vídeos. 3. Obert. 4. Anglès, Francès i Alemany.


nostra web.

Punts forts:

1. La home permet ràpidament saber com pujar continguts audiovisuals als nous

usuaris a través de dos icones.

ICARIA



152

2. El doble menú principal facilita molt la informació a l’usuari tant pel que fa a

les diferents temàtiques que tracta la web, en aquest cas els diferents esports,

com pel que fa els diversos apartats de cada esport.

Punts febles:

1. 1.Massa contingut irrellevant a la home o contingut que almenys no és el més

important del web i que s’hauria d’incloure en un segon nivell de profunditat.

ICARIA



153

ELECTRONIC ARTS

(www.Ea.com/es)

1.Electronic Arts. 2. Web d’empresa dedicada a la producció de tot tipus de videojocs i on

es dona a conèixer les novetats i tota la gama de videojocs de la companyia. 3. Obert. 4.

Multi llenguatge.


nostra web.

Punts forts:

2. Facilitat per a conèixer els productes més actuals a través de canviar tot

l’aspecte del “background” de la web per donar a conèixer el producte més

rellevant i posteriorment les altres novetats.

3. Menús principals flotants per dreta i esquerra que permeten adaptar-se a les

diferents mides de pantalla que utilitzi l’usuari.

Punts febles:

1. Poc contingut audiovisual en quant a demostracions dels diferents productes,

web molt estàtica i amb la necessitat de ser actualitzada de dalt a baix

contínuament.

ICARIA



154

2K GAMES

(www.2kgames.com)

1.2K Games. 2 Web d’empresa dedicada a la producció de videojocs que permet a l’usuari

conèixer les novetats i l’àmplia llista de videojocs que ofereixen. 3. Obert. 4. Anglès.


nostra web.

Punts forts:

1. Web molt visual a través d’imatges que ocupen pràcticament tot l’espai de

la web i que mostren a l’usuari els darrers videojocs a destacar.

2. Simplicitat a l’hora de donar la informació amb un menú principal de gran t

amany i amb les opcions més bàsiques per navegar. 3. Facilitat per

ICARIA



155

accedir a les xarxes socials de l’empresa a través de grans icones situats a

la part inferior de la pantalla.

Punts febles:

1. Web desenvolupada amb Flash i que suposa una càrrega de contingut major

per a l’usuari, i fins i tot impedeix ser reproduida en el cas dels usuaris de

dispositius mòbils iOS. 2.

BATTLEFIELD

(www.battlefield.com/battlefield3)

1.Batltlefield 3. 2. Web de un dels videojocs bèl·lics més famosos que permet conèixer a

l’usuari el contingut de la última edició del videojoc i també donar a conèixer les diferents

comunitats del joc. 3. Obert. 4. Multi llenguatge.

ICARIA



156


nostra web.

Punts forts:

1. Els colors de fons escenifiquen molt bé el tipus de videojoc del que es tracta.

2. A través de diverses pestanyes l’usuari pot anar veient el contingut més

important per conèixer bé el joc i les diferents parts que té a través de

fotografies i text del joc.

Punts febles:

1. Tractant-se d’un videojoc hauria d’aparèixer directament algun apartat en que

es pogués veure algun vídeo del joc.

2. Pel que fa a l’accés a les xarxes socials els diferents icones es troben separats

per diferents llocs de la home i estaria bé que poguessin estar més junts per

accedir-hi amb més facilitat.

ICARIA



157

ZUNE

(www.zune.net/)

1.Zune. 2. Web dedicada al lloguer de continguts audiovisuals via streaming com poden ser

tant pel·lícules com clips musicals i en que l’usuari pot aconseguir-los fàcilment pagant un

preu raonable durant un cert període de temps. 3. Obert. 4. Multi llenguatge.


nostra web.

Punts forts:

1. Web senzilla i molt intuïtiva pel que fa a l’accés a la informació ja que a

través del menú principal queda clar quins són els diversos productes que

podem obtenir i a través d’imatges també facilment podem veure les

diferents plataformes en les quals es pot disposar d’aquests serveis.

Punts febles:

1. A la home la informació es tant reduïda que es podria aprofitar per fer col·locar

un apartat amb les novetats tant pel que fa a pel·lícules com pel que fa a

cançons per cridar l’atenció de l’usuari.

ICARIA



158

KONAMI

(www.konami.com)

1.Konami Digital Entertainment. 2. Web de la companyia productora de videojocs japonesa

que dona a conèixer els últims llançaments dels videojocs més destacables de la

companyia. 3. Obert. 4. Anglès.


nostra web.

Punts forts:

1. Menú amb efecte 3D de les diverses novetats en quant a jocs concursos i

events a destacar que crida l’atenció de l’usuari i el fa més vistós. 2.

Columna dreta dedicada a la venta directe de productes a través de la

tenda online accessible amb molta facilitat.

ICARIA



159

Punts febles:

1. La part superior i inferior de la home no encaixen gaire ja que en la part

superior apareix el menú 3D i en la part inferior la web es torna radicalment

senzilla amb entrades més pròpies d’un blog que d’una web de videojocs. 2. El

menú fet amb flash fa que es necessiti d’una versió web adaptada per a

dispositius mòbils ja que sinó la gran quantitat d’usuaris iOS no hi poden

accedir.

ICARIA



160

GEARS OF WAR

(www.gearsofwar.com/xbox)

1.Gears of war 3. 2. Web oficial de la darrera edició de la saga Gears of War en que se’ns

dóna a conèixer les diferents parts del joc a través de continguts audiovisuals i també ens

mostra com aconseguir-lo.


nostra web.

Punts forts:

1. Es dona per suposada la identitat de marca del joc i a la web no apareix

gairebé contingut textual explicant què i com és el videojoc. Directament

tenim un fons de pantalla en que ja se’ns mostren els protagonistes del joc i a

la part central un reproductor amb diferents tràilers de varies parts del joc, la

qual cosa la fa una web ràpida i intuïtiva.

2. Tot i que en la part inferior apareixen les diferents xarxes socials a les que ens

podem connectar per tenir més informació sobre el videojoc, es destaca amb

una explicació més definida la xarxa social en la qual es centren més en donar

informació i continguts sobre el joc, en aquest cas Facebook.

Punts febles:

1. Masses espais buits i poc útils per a l’usuari ja que pel contingut que apareix a

la home, aquest podria aparèixer més concentrat i no hi hauria la necessitat de

fer scroll cap a la part inferior per accedir a les xarxes socials del videojoc.

ICARIA



161

CALL OF DUTY

(www.callofduty.com/mw3)

1.Call of duty Modern warfare 3. 2.Web oficial de la pròxima edició de la saga Call of duty

en que ens podem informar sobre les futures característiques i l’ambientació en que es

centrarà aquesta nova entrega. 3. Obert. 4. Multi llenguatge.


nostra web.

Punts forts:

1. Aprofita el fons de pantalla per mostrar la bona qualitat gràfica del joc a

través de la imatge de un dels personatges.

2. El icones de les xarxes socials estan molt bé perquè es troben flotant a la

dreta, la qual cosa fa que s’adaptin sempre a les diferents mides de pantalla

dels usuaris i a la vegada són senzills i fàcils de percebre.

ICARIA



162

Punts febles:

1. L’amplada de la home es pensada només per a pantalles panoràmiques de

manera que en pantalles de tamany 4:3 la informació pot quedar

sobreposada i ser més complicada d’entendre per l’usuari.

FORZA MOTORSPORT

(www.forzamotorsport.net)

1.Forza Motoresport. 2. Web del videojoc de curses de cotxes ForzaMotorsport de la

plataforma Xbox i que ens mostra les novetats de la 4ª edició del joc i la manera com

aconseguir-lo. 3. Obert. 4. Anglès.


nostra web.

ICARIA



163

Punts forts:

1. Les lletres del menú desplegable estan molt ben aconseguides i juguen amb

la tipologia del videojoc del qual es tracta.

2. L’apartat de notícies està ben resumit amb les 3 notícies més destacades i el

titular de la noticia sense haver d’ocupar gens d’espai a la web.

Punts febles:

1. El menú principal queda molt acaparat pel menú desplegable i es poc vistós i a

la vegada amb opcions molt generals i poc concretes sobre el contingut.

2. Els enllaços a les xarxes socials són massa petits i queden amagats pel

contingut textual de la part inferior.

treball multimedial icaria

Documents