Treball multimedial Icaria by Albert Villanueva Carreras

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 3

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

PRIMERA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Actualitzacions de les plataformes 2.0

Modificació de la redacció del projecte final.

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

SEGONA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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

Left for dead

www.youtube.com/watch?v=80nZ5b_DKms

El Padrino

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

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

2009

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

b) Pàgines web

Nom del web

URL

Any

Mindstorming

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

2010

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

2008

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

Bioshock Grand Theft Auto

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Ú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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

TERCERA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 32

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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. 34

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 38

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

QUARTA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Arquitectura de la informació

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Arbre de continguts curtmetratge

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Diagrama de fluxe (navegació)

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

CINQUENA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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: 46

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

-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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 48

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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.

ABCDEFGHIJKLM N OPQRSTUVWXY 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 52

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

ABCDEEFGHIJKLMNOPQRSTUVWXZ ABCDEEFGHIJKLMNOPQRSTUVWXZ 0123456789 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Extres

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 62

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

SISENA PART

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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-multicolordocumental-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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

•

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

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

ANNEXOS

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 /

katie@littlesisterfilms.co.nzTelf: 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Screenshot del curt:

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.: ideas@mindstorming.tv / 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 85

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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è. Elements a tenir en compte en el nostre projecte: 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Elements a tenir en compte en el nostre projecte: 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Screenshot del curt:

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 96

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte pel projecte 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à. Screenshots de la web:

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Elements a tenir en compte per al nostre projecte: 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 Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Pel que fa els seus serveis únicament inclou el nom sense especificar quins criteris i estils segueixen. 100

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Screenshot de la web:

101

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

102

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte en el nostre projecte: 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.

Screenshot de la web:

103

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte en el nostre projecte: 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 104

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshot de la web:

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

105

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte en el nostre projecte: 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.

Screenshot de la web:

106

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

107

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Elements a tenir en compte en el nostre projecte: 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.

Screenshot de la web:

108

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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

l’usuari

gaires

alternatives

per

poder

contactar

amb

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 109

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Screenshot de la web:

110

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte en el nostre projecte: 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. 111

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Screenshot de la web:

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. 112

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte en el nostre projecte: 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.

Screenshot de la web:

113

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

114

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte pel projecte web: 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.

Screenshot de la web:

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.

115

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

116

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Screenshot del curt:

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.

117

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Punts febles: 3. La temàtica s’allunya del nostre projecte 4. Disposen de molts recursos. 5. Molta experiència en el camp audiovisual .

Elements a tenir en compte per al nostre projecte: 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 :

118

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte per al nostre projecte: 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.

119

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Elements a tenir en compte per al nostre projecte: 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 120

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshot del curt:

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 121

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Elements a tenir en compte pel projecte web: 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. 122

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Screenshots de la 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.

123

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte pel projecte web: 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 124

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Screenshots de la web:

125

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

126

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Punts Febles 1. Els continguts no es relacionen amb les xarxes socials.

Elements a tenir en compte pel projecte web: 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.

Screenshots de la web:

127

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 128

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte pel projecte web: 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. Screenshots de la web:

129

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

130

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Elements a tenir en compte pel projecte web: És un perfecte exemple de eficiència web. Es tracta d’una web model per prendre-la com a referent. Screenshots de la web:

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 131

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

Elements a tenir en compte pel projecte web: 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. 132

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshots de la web:

133

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 descarregarnos 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. Elements a tenir en compte pel projecte web: 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. Screenshots de la web:

134

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. 135

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Elements a tenir en compte pel projecte 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. Screenshots de la web:

136

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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

137

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshots de la web:

138

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

139

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshot de la web:

140

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

141

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshot de la web

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.

142

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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 Screenshot de la web:

143

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. contacto@bullysteria.com / 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.

144

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Screenshot de la web:

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

145

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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:

146

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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ó.

147

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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

148

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Screenshot de la web

149

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

150

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la nostra web.

Punts forts: 1. La home permet ràpidament saber com pujar continguts audiovisuals als nous usuaris a través de dos icones.

151

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

152

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

153

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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

154

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

155

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

156

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

157

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

158

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

159

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

160

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la 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.

161

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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. Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la nostra web.

162

ICARIA Projecte Final de Carrera Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva

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.

163