ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
2
Agraïments
Aquest projecte no hagués estat possible sense la col·laboració constant de
Raimon Lagonigro, Roger Soldevila i Catalina Acelas que amb els seus
coneixements en programació i multimèdia han ajudat a enriquir i créixer
aquest projecte.
Volem donar especialment les gràcies a Arnau Gifreu, tutor del projecte, per
les seves aportacions i treball realitzat a Icaria. Però sobretot per la seva
paciència, implicació i hores invertides en el projecte.
També a totes aquelles persones que han col·laborat o aportat el seu granet
de sorra i ens han animat durant aquests mesos.
Moltes gràcies
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
3
INDEX
Introducció...............................................................................................................6
Descripció projecte...................................................................................................7
PRIMERA PART
Conceptualització
Components grup .....................................................................................................9
Títol .........................................................................................................................9
Idea........................................................................................................................10
Objectius................................................................................................................10
Objectius generals .................................................................................10
Objectius específics ................................................................................11
Públic objectiu........................................................................................................12
Metodologia...........................................................................................................12
Preproducció..........................................................................................12
Producció...............................................................................................13
Postproducció ........................................................................................13
SEGONA PART
Marc teòric.............................................................................................................16
Multimedial.......................................................................................................16
Benchmarking........................................................................................16
Criteris de cerca .....................................................................................16
Taula de pàgines web, curtmetratges i tràilers pre seleccionats ..............17
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
4
Webs seleccionades per a la redefinició del projecte a partir de casos
concrets..................................................................................................19
Audiovisual........................................................................................................21
Videojoc i història ..................................................................................21
Videojocs seleccionats com a referents ...................................................22
La peça audiovisual................................................................................25
Pel·lícules ..............................................................................................26
Altres referents......................................................................................29
TERCERA PART
Requeriments tecnològics.......................................................................................31
Software............................................................................................................32
Navegació i visualització del web........................................................................35
Visualització en tablets i mòbils? ........................................................................36
Web 2.0.............................................................................................................36
QUARTA PART
Arquitectura de la informació .................................................................................41
Arbre de continguts del curtmetratge.................................................................42
Diagrama de fluxe (navegació) ...........................................................................43
Pàgina web............................................................................................44
Curtmetratge.........................................................................................45
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
5
CINQUENA PART
Disseny interfície ....................................................................................................46
Metàfora gràfica ................................................................................................46
Colors corporatius..............................................................................................47
Contingut web ...................................................................................................51
Elements interactius ..........................................................................................52
Descomposició esquemàtica ..............................................................................53
Website
Curtmetratge
Definició continguts ...........................................................................................72
Conclusions .......................................................................................................75
SISENA PART
Referents i recursos ................................................................................................78
Biografia i Webgrafia .........................................................................................78
ANNEXOS
Benchmarking.............................................................................................................81
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
6
Introducció
El principal objectiu des de l’inici del curs 2011-2012 ha estat dedicar tot el nostre temps i
esforços en desenvolupar i crear el projecte final de carrera. D’aquesta manera, hem
treballat d’una forma constant integrant tots aquells coneixements que hem adquirit i
après al llarg de la carrera i de diferents referents, com altres treballs audiovisuals i
multimedials, per tal de crear un projecte amb la màxima professionalitat possible.
Aquest projecte suposa un repte per a tots els membres del grup, ja que volem
desenvolupar idees i aspectes tècnics fins ara desconeguts per a nosaltres. Cal destacar que
tractar una temàtica basada en la hibridació entre un curtmetratge interactiu i un videojoc
ha fet que la nostra cerca o objecte de d’estudi es veiés caracteritzat per una forta
diversitat. Aquesta queda reflectida en el treball final el qual es caracteritza per l’ integració
d’elements interactius i audiovisuals en una atmosfera centrada en el videojoc i el
curtmetratge.
D’altra banda, creiem que el projecte final de carrera ha de ser una oportunitat per a
descobrir tots aquells camps de la comunicació audiovisual que menys hem treballat al llarg
dels quatre anys d’estudis. A més, la nostra intenció és desenvolupar un producte
multimedial i audiovisual que a part de ser atractiu, tingui alguna oportunitat fora del cercle
acadèmic al qual està emmarcat.
Finalment, esperem que amb la simbiosi de l’apartat audiovisual i l’apartat multimedial, en
sorgeixi com a resultat un projecte potent, interessant i al gust de tothom.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
7
Descripció del projecte
El nostre producte audiovisual i multimèdia consisteix en una hibridació. Aquesta estarà
composta per un curtmetratge de ficció amb un plus d’interactivitat, amb estètica i
elements de videojoc. Tot plasmat, adaptat i ampliat també en una website.
La trama es basarà en la història d’una nena que pateix una malaltia hereditària la qual
només pot curar-se amb una vacuna composta d’elements químics no legals. El pare,
membre del cos de Policia Nacional, ha d’aconseguir tots aquests elements per tal de salvar
la seva filla i ho farà mitjançant petites missions que se li encarregaran via trucades
telefòniques o missatges de text.
La peça estarà dividida en 3 tipologies diferents de realització audiovisual, ja que depenent
de l’acció narrada l’estil de realització canvia. Així doncs hi haurà:
- Imatge cinematogràfica: usada en totes les escenes en les quals es narra la
història present. Serà el fil conductor de la història en general.
- Imatge d’estètica videojoc: aquesta serà usada per les tres escenes en les
que l’usuari ha de participar per al desenvolupament de l’acció. Sent les
imatges que més similitud han de tenir amb l’aspecte estètic dels videojocs,
la imatge estarà post-produïda per aconseguir l’efecte desitjat.
- Imatge en blanc i negre: aquest efecte s’usarà en les tres escenes que
representen un flashback. Per tal d’avisar a l’usuari que està veient un fet
passat, es recórrer a un retoc estètic per evitar confusions i poder seguir el fil
narratiu de la història.
La pàgina web serà la plataforma base del nostre projecte, tot usuari que vulgui veure’l i/o
jugar-hi caldrà que visiti la pàgina. En la seva elaboració utilitzarem el llenguatge de l’Html,
Html5, CSS3 i Flash per tal d’inserir tots els elements interactius.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
8
PRIMERA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
9
Conceptualització
• Components del grup i rols
Segons els coneixements de cadascú i en l’àmbit en que ens desenvolupem amb més
facilitat i còmodes hem assignat els rols de la següent manera:
Elsa Bigas Alsina: Producció i desenvolupament de continguts web.
Georgina Cabrera Castells: Direcció i desenvolupament de continguts web.
Marc Aliart Cortés :Direcció d’art i fotografia, muntatge i postproducció.
Albert Villanueva Carreras: Programador web.
Anna Màrmol Rodríguez: Banda sonora i desenvolupament de continguts web.
Tot i aquests rols assignats, tots els components del grup ens hem ajudat en les
diverses tasques que hem dut a terme durant l’elaboració del projecte.
• Títol del projecte
L’elecció del títol del projecte ha estat una de les parts que més mals de cap ens ha portat.
Creiem que el nom és un element clau a l’hora de difondre el producte. D’aquesta manera,
tenir un nom atractiu farà que el públic s’interessi pel treball, a més a més, en aquest ha
d’estar en relació amb el producte però sense desvetllar-ne l’essència.
Després de fer un brainstorming on van sorgir diversos noms, ens vam acabar decantant
per Icaria. Aquest fa referència a la mescla d’ingredients que composarà l’antídot per salvar
la filla del protagonista. L’usuari podrà relacionar el nom del títol amb el seu significat, ja
que es mencionarà al llarg del guió. A més, l’element interactiu o llistat en el qual apareixen
les tres substàncies que Pablo ha d’aconseguir, es caracteritza perquè cada substància
apareix amb la primera lletra en vermell fent que l’usuari visualitzi ràpidament que la
lectura de totes aquestes juntes formen Icaria.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
10
• Idea
Curtmetratge amb estètica de videojoc i de temàtica de ficció. L’argument tracta sobre una
nena que té una malaltia hereditària que només es pot curar amb una vacuna composta
d’elements químics no legals. El pare ha d’aconseguir tots aquests elements per tal de
salvar a la seva filla.
Objectius
• Objectius generals
El principal objectiu és el de poder oferir al públic una nova manera de consumir un
producte audiovisual creat a partir de la hibridació d’un curtmetratge i un videojoc, amb un
plus d’interactivitat, ja que l’usuari haurà de participar activament al desenvolupament de
la història tot seleccionant en determinats moments quin camí els personatges han de
seguir.
Com hem explicat anteriorment, el nostre projecte és una barreja de diferents productes
audiovisuals. Aquest fet ens beneficia, ja que això comporta atraure a diversos públics.
D’una banda oferim un producte que pot agradar a un consumidor habitual de videojocs, ja
que incorporem al curtmetratge elements típics d’aquest gènere, com els gràfics, la
interactivitat en el desenvolupament del joc, els punts de vista... D’altra banda esperem
atraure l’atenció dels consumidors habituals de peces audiovisuals. Tot i tenir una
estructura narrativa diferent a la major part de curtmetratges, les imatges, el diàleg i la
banda sonora són típiques d’aquest gènere.
A més, també volem que el nostre treball el puguin gaudir persones que habitualment no
consumeixen aquests productes, però que a través de les xarxes socials, el boca a boca o
per casualitat arribin a la nostra interfície web.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
11
• Objectius específics
Quant a la peça audiovisual
- Donar a conèixer el curtmetratge a la plataforma web de manera gratuïta
- Coneixement més ampli sobre aquest nou gènere de curtmetratge.
Quant als elements interactius
- Que proporcionin valor afegit a la peça audiovisual, dotant-la així
d’interactivitat.
- Investigar com inserir aquest elements interactius al vídeo de la millor
forma possible per tal de fer-los el màxim d’eficaços i que aportin
informació adient en cada cas.
Quant a la plataforma web i al software utilitzat
- Investigar els nous llenguatges de programació Html5 i les novetats que
incorpora respecte l’ultima versió.
- Usar totes les eines existents per a fer un producte el màxim d’interactiu,
fàcil d’usar i atractiu.
Quant a nosaltres (formació)
- Aplicar a aquest projecte el millor de cadascú de nosaltres i tots els
coneixements adquirits durant els 4 anys cursats a la universitat.
- Aprendre a utilitzar el llenguatge Html, Html5, CSS3 i el Flash.
- Aprendre a desenvolupar aquest nou gènere.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
12
• Definició del públic objectiu
El nostre producte audiovisual està orientat cap a un públic major d’edat, aficionat als
videojocs i /o amb una amplia cultura audiovisual. Creiem que el públic que comprendrà
millor el nostre producte és aquell jugador habitual de videojocs i consumidor potencial de
productes audiovisuals de tots els formats i gèneres.
El producte presentat és, com ja hem explicat, un híbrid entre curtmetratge audiovisual de
ficció i videojoc, ja que es tracta d’una simulació d’una partida de videojoc però amb
imatges reals. A més, cal destacar que la temàtica tractada a la història està carregada de
violència explícita i consum i tràfic de drogues.
Més específicament, podem dir que el públic potencial l’ubiquem en homes i dones d’entre
els 18 i els 35 anys. D’aquesta manera englobem tant a les generacions més recents de
joves, que mitjançant Internet han pogut ser testimonis de nombrosos productes
audiovisuals de qualsevol índole, i alhora són habituals consumidors de videojocs.
D’altra banda, les generacions més grans ja a finals dels anys 70 van començar a tastar les
delícies de la imaginació que proporcionaven els primers videojocs, i alguns en són encara
habituals usuaris. Alhora també es tracta d’un target amb un nivell econòmic mitjà, ja que
tot i que el nostre producte és gratuït, l’usuari només l’entendrà i el gaudirà si té una
regularitat d’adquisicions en l’àmbit del videojoc.
Metodologia
Partint de la idea de realitzar un curtmetratge interactiu i una interfície web per poder-lo
visualitzar i accedir a contingut addicional, hem seguit aquest tres passos per tal de dur a
terme la producció de la manera més acurada.
• Preproducció
Hem seguit els següents passos:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
13
- Documentar-nos sobre l’existència de curtmetratges interactius, sobre la seva
temàtica, estètica, tipus d’interactivitat, plataformes on visionar-los...
- Conceptualització i definició de la idea.
- Definició dels objectius tant generals com específics.
- Elaboració d’un benchmarquing i el marc teòric.
- Elecció de la metàfora i del títol del projecte.
- Redacció del guió i storyboard.
- Definició d’espais, direcció d’art i fotografia i càstings.
- Arquitectura de la informació.
- Disseny de l’estructura i apartats del pàgina web.
- Elecció de logotip, colors i tipografia.
• Producció
- Rodatge
- Aplicacions 2.0 (blog de rodatge, facebook, twitter...)
- Creació del website i els seus continguts textuals.
• Postproducció
- Edició dels continguts amb Premiere.
- Postproducció del curtmetratge amb el software After Effects.
- Aplicació dels elements interactius al vídeo, a partir de Flash.
- Activació de la pàgina web a Internet.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
14
- 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
15
SEGONA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
16
Marc teòric
Multimèdia
• Benchmarking
Criteris de recerca
Per tal de realitzar la cerca, vam establir unes línies d’anàlisi totes elles enfocades a la
temàtica tractada en el nostre projecte. L’objectiu era veure que s’ha creat en relació amb
el tema que nosaltres tractem, veure com s’han plantejat en altres projectes diversos
aspectes que nosaltres no sabíem com resoldre, i descobrir noves maneres d’aplicar
tècniques i recursos.
D’aquesta manera, alhora que anàvem plantejant quins eren els punts més importants per
a ser investigats i portats a terme en el nostre estudi també vam anar acotant els criteris a
seguir en la nostra cerca. Com a resultat, hem establert quest seguit de paràmetres els
quals giren entorn una sèrie de formats concrets com són:
- Webs de videojocs.
- Webs promocionals de llargmetratges o curtmetratges.
- Curtmetratges interactius online.
- Tràilers de videojocs.
- Tràilers de pel·lícules que ens puguin influenciar.
- Altres webs que per un aspecte de disseny ens puguin semblar interessants.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
17
Taula de pàgines web, curtmetratges i tràilers preseleccionats
a) Curtmetratges, bandes sonores i tràilers
Nom del web URL Any
Deliver me to hell www.youtube.com/watch?v=9p1yBlV7Ges 2011
Left for dead www.youtube.com/watch?v=80nZ5b_DKms 2011
El Padrino www.youtube.com/watch?feature=player_embedded&v=GVFCOIlKuIQ#! 2009
DaveChapelle http://www.youtube.com/watch?v=YQLWkXt4p1U 2011
DonyYet www.youtube.com/watch?v=hhKA6yuq85Q&feature=related 2011
Ciudad de la sombra http://ciudaddelasombra.net/category/producciones/ 2011
Just Cause 2 http://www.youtube.com/watch?v=ZJtP24Ij7ZM 2011
Batman: ArkhamAsylum http://www.youtube.com/watch?v=k32ELE9qZJ8 2010
Crank www.youtube.com/watch?v=h9DDIdaA7GA 2011
Themanwhowasn’tthere http://www.youtube.com/watch?v=htxvLcSnOU0 2010
BSO Thefight Club http://www.youtube.com/watch?v=kgNF7_EWEZo 2011
Pwnisher http://www.youtube.com/pwnisher#p/u/3/dZ4FGm9Fwvg 2011
God of war III http://www.youtube.com/watch?v=Hiieqlgbn2c 2011
Call of duty http://www.youtube.com/watch?v=-aLszbWVoBU 2011
Escapeformcity http://www.youtube.com/watch?v=-UmPxUMW4h8&feature=related 2011
Tubeadventures http://tinyurl.com/d6w59yc 2008
Bullysteria http://tinyurl.com/cld2sao 2011
TwistedPictures http://www.youtube.com/watch?v=KEZul_gTmbM 1999
Tipp-ex http://tinyurl.com/ctzhtu7 2011
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
18
b) Pàgines web
Nom del web URL Any
Mindstorming http://www.mindstorming.tv/es/ 2010
Bioshock http://www.2kgames.com/bioshock/ps3/us/launch.html 2008
Grand Theft Auto
IV
http://www.rockstargames.com/IV/ 2011
Nave interactivo http://neave.com/es/ 1999
Thething http://www.thethingthemovie.net / http://www.quieneslacosa.es 2011
Yobadaz http://www.yodabaz.com/ 2010
Cinema
producciones www.cinemaproducciones.es 2011
Megaconsolas www.megaconsolas.com 2011
JMP Studios www.jmpstudios.es 2010
Machinima www.machinima.com 2009
Mark Ecko http://www.marcecko.com 2011
Final Fantasy XIII http://www.youtube.com/watch?v=naUSBEVRLng 2011
World of
Warcraft
Cataclysm
http://www.youtube.com/watch?v=Wq4Y7ztznKc 2011
L.A.Noire http://www.rockstargames.com/lanoire/agegate/ref/?redirect= 2010
Super8 http://www.super8-movie.com/ 2011
Transformers 3 http://www.transformersmovie.com/ 2011
REC 3 http://rec3genesis.com/ 2011
Multiopticas http://www.combina2mo.com 2011
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
19
EA Games http://www.ea.com/battlefield 1982
MPORA www.mpora.com 2011
Electronic Art
Esports www.easports.com 2011
2K Games www.2kgames.com 2011
Battlefield 3 www.battlefield.com/battlefield3 2010
Zune www.zune.net/ 2010
KONAMI www.konami.com 2011
Gears of war www.gearsofwar.com/xbox 2011
Forza Motor
esport www.forzamotorsport.net 2011
Webs seleccionades per a la redefinició del projecte a partir de casos concrets :
Del total de les 50 pàgines web, nosaltres hem seleccionat les 10 que considerem més
representatives. D’aquests deu exemples en podrem extreure certs elements que
incorporarem a la nostra pàgina web. Els mostrem a continuació:
- Ús que es fa de la interactivitat.
- Ambientació basada en el món dels videojocs.
- Joc de plànols i moviments de càmera.
- Utilització d’elements interactius i objectes amb informació addicional.
- So i música.
- Tractament de la llum i dels colors.
- Ús i tractament del logotip.
- Utilització de vídeos introductoris.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
20
- Ús de diferents xarxes socials per establir contacte amb els usuaris.
- Navegació i estructura de les diferents webs escollides.
Finalment, cal assenyalar que les pàgines web triades estan classificades en funció de quin
aspecte ens ha cridat l’atenció i hem considerat rellevants respecte les altres. D’aquesta
manera, exposem d’una forma més entenedora els nostres referents per tal de facilitar la feina
a l’hora de portar a terme aquest estudi i extreure els elements necessaris per a realitzar la
nostra pàgina web.
Pàgines web, curtmetratges i tràilers seleccionats:
1. Per l’estètica i la funcionalitat:
Mindstorming
Bioshock 2
GrandTheft Auto IV
Nave Interactivo
The thing
Yobadaz
2. Pel contingut:
Delivery me to hell
Left for dead
El padrino
Dave Chapelle
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
21
Audiovisual
Com hem mencionat anteriorment, el curtmetratge interactiu Icaria és una hibridació entre
un videojoc i un curtmetratge realitzat amb cinema o vídeo. És per aquest motiu que la
nostra peça té referents tant audiovisuals com del món del videojoc. Els referents que ens
han inspirat a l’hora de crear aquest projecte han estat:
• Els videojocs i la seva història:
Aquest format es tracta d’un programa informàtic, creat expressament per divertir, basat
en la interacció entre una persona i un aparell electrònic on es porta a terme el videojoc.
Aquests recreen entorns virtuals en els quals el jugador pot controlar a un personatge o
qualsevol altre element d’aquest entorn, per aconseguir un o varis objectius a través
d’unes normes determinades.
La història dels videojocs està marcada per els avenços de la tecnologia i la competència
entre les diferents companyies del sector. En aquest apartat exposarem l’aparició de les
primeres companyies i videojocs per tal de tenir una visió general d’aquesta indústria, que
cada cop més suposa una alternativa al cinema i l’oci en general.
El primer videojoc de la història va ser creat per William Nighinbottham el 1958 a través de
la utilització d’un oscil·loscopi de laboratori i era anomenat “Tennis per a dos”. Aquest va
ser comercialitzat per la casa Atari l’any 1972 amb el nom de Pong. L’any 1961 Steve
Russell va crear SpaceWar, el qual es considerat el primer videojoc per ordinador. Aquest
era per a dos persones i cadascuna d’elles portava una nau intentant-se disparar
mútuament.
Ralph Baer es considerat l’inventor dels videojocs tal i com els coneixem avui en dia gràcies
a que va realitzar la primera consola. Baer volia construir un sistema de videojocs
comercials per poder jugar des de casa i va ser l’any 1972 quan va poder comercialitzar
amb èxit la seva primera consola anomenada MagnavoxOdissey.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
22
La companyia Atari va contraatacar l’any 1977 amb la creació d’una consola també
domèstica que únicament donava la possibilitat de jugar al seu videojoc amb major èxit, el
Pong.
Després de tretze anys en els que Atari va tenir el monopoli de la indústria del videojoc va
aparèixer la companyia NES (Nintendo Entretainment System) donant un gir a tot el que
s’havia conegut fins a llavors en aquest món amb la creació de formats més originals i
creaius, on cal destacar l’aparició de Super Mario Bros.
Cap a la dècada dels 90 la indústria dels videojocs va patir un canvi molt important amb
l’aparició de les primeres consoles de “32 bits” . Aquest va suposar l’aparició d’una nova
generació de màquines o plataformes més potents com és el cas de la creació l’any 1994
de la primera consola realitzada per la casa Sony, anomenada Play Station. El 1996
Nintendo va fabricar la primera consola de “64 bits”, Nintendo 64, començant d’aquesta
manera l’era del 3D.
Aquest últim canvi a suposat de vital importància per establir un avanç i un després en el
món dels videojocs. Encara avui en dia continua evolucionant i expandint-se entre tots els
públics, un clar exemple és la consola Wii dissenyada per a tota la família. A més, els seus
treballats i acurats gràfics i dissenys, que cada cop ens posen més en qüestió què és
realitat i ficció, han fet que els videojocs i el 3D es vagin expandit a nous mercats com és el
del cinema.
• Videojocs seleccionats com a referents:
1. Grand Theft Auto IV (GTA):
Es tracta d’un joc d’acció-aventura d’estil “sandbox” que pertany a l’empresa
Rockstar Games. El primer joc d’aquesta saga va ser llençat el 1997. Aquest explica
la vida de diferents criminals, la història dels quals es va relacionant i cada vegada
es veuen implicades més persones.Tots els personatges del GTA IV són antiherois,
igual que Pablo el protagonista del nostre projecte.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
23
D’aquest videojoc hem incorporat al nostre treball l’element interactiu del telèfon
mòbil. Aquest apareix en pantalla automàticament quan el jugador reb una trucada
o un missatge de “el Russo”. El jugador ha de clicar damunt del mòbil per a poder
conèixer la següent missió. En cas que el jugador ometi aquest element al cap de
vint segons es mostrarà el missatge de forma automàtica.
A més, estendrem aquesta idea d’elements interactius a altres objectes com és, per
exemple, una llista interactiva desplegable amb les substàncies que el protagonista
ha d’aconseguir per assolir el seu objectiu.
2. Call of Duty:
Va sortir a la venda l’any 2003 de les mans d’Infinity Ward. És un videojoc de
caràcter bèl·lic basat en la Segona Guerra Mundial. El protagonista, com la majoria
de shooters (jocs en el qual el protagonista és un tirador), fan ús de la vista
subjectiva per posar a l’usuari a la pell del protagonista. Aquest recurs és el que
nosaltres hem incorporat en el nostre projecte.
El punt de vista subjectiu ens és molt útil en els moments en què Pablo ha de
disparar en contra dels seus enemics, ja que ens ajuda aconseguir l’estètica i crear
l’atmosfera de videojoc desitjades. Per tal d’aconseguir aquest efecte, hem fet
servir una steadycam realitzada manualment amb un trípode i una motxilla.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
24
D’altra banda, ens hem inspirat en l’ús que fa aquest videojoc d’un mapa de
localització. Aquest tipus de recurs serveix per poder situar el personatge en la
pantalla i a l’usuari en el joc.
2. Metal Gear Solid:
Joc ideat el 1987 per Hideo Kojima i distribuït per Konami, es tracta d’un joc de rol,
First Person Shooter, on t’has d’infiltrar a diverses entitats. Aquest va tenir tant èxit
que va portar a fer mes versions i distribucions.
D’aquesta mítica saga hem extret un aspecte clau per el desenvolupament de la
història, la discreció. En aquest videojoc, actuar amb màxim de sigil i precaució
permet a l’usuari assolir les missions encomanades. Així doncs, en el nostre
curtmetratge tenir cura de no ser descobert, d’aixecar el mínim de sospites i de
cometre els crims de manera gairebé imperceptible, permetran assolir l’objectiu
principal del joc.
A més, l’elecció correcte en el moment d’interactivitat recau en aquella en què
l’acte criminal es dur a terme de manera discreta. D’aquesta manera, El camí que
porta al jugador al game over, sol ser aquella en la qual el protagonista actua de
manera visible per a la resta de personatges i per tant sol ser descobert.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
25
• La peça audiovisual:
La peça audiovisual ha requerit un tractament especial perquè està formada a partir d’una
hibridació entre videojoc i curtmetratge interactiu. Aquest fet ha afectat a la seva
composició i a prendre una sèrie de decisions determinades a l’hora de realitzar l’
estructura del curtmetratge. Per aquest motiu, els criteris de recerca en el moment
d’escollir els referents adequats han estat de vital importància i s’han realitzat i analitzat
d’una manera molt acurada.
Aquest estudi es pot dividir en 3 parts: videojocs, pel·lícules i altres referents. Així doncs,
aquestes parts recullen tots els videojocs, pel·lícules, curtmetratges o pàgines webs que
pel seu contingut audiovisual ens han semblat interessants o importants de ser tractades
com a objecte d’estudi a l’hora de realitzar i conceptualitzar el nostre projecte.
Per tal de poder desenvolupar i realitzar d’una manera més precisa el nostre anàlisi sobre
els referents, vam realitzar un breu estudi previ sobre els gènere dels videojocs, esmentat
en el apartat anterior. Aquest fet es va donar per la falta de coneixement sobre aquest
gènere i per la importància que aquest té en el nostre curtmetratge i que ens obliga
conèixer alguns punts essencials.
D’aquesta manera, hem establert com a concepte clau dels videojocsla seva missió
d’entretenir i la possibilitat de poder viure experiències que no es poden assolir en la
realitat. Així doncs, hem intentat mantenir aquest objectiu al llarg de tota la realització de
la peça per tal de no perdre l’essència d’aquest gènere tan peculiar.
A continuació, hem exposat una breu explicació dels nostres principals referents
audiovisuals per tal d’exposar i donar a entendre d’una manera més concreta quins són els
punts que hem tingut en compte per poder elaborar el curtmetratge interactiu. A més, cal
destacar que al no tenir com a referència un únic gènere fa més necessària l’explicació
directe de cada referent per poder entendre quins són el seguit d’idees que ens han
motivat i servit d’inspiració.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
26
• Pel·lícules
1. JohnQ:
Gènere: Drama. Pel·lícula dirigida per Nick Cassavetes i produïda per New Line
Productions. El film tracta d’un home nord-americà que davant la malaltia cardíaca
que pateix el seu fill està disposat a fer el que sigui. El nen necessita ser operat
urgentment, però la família no disposa d’una bona assegurança mèdica i no poden
pagar l’operació
Hem pres aquest film com a referent per l’argument , ja que salvant algunes
diferències la situació en què es troben els dos protagonistes es bastant semblant.
Ambdós intenten de salvar la vida dels seus fills i estan disposat a arriscar la seva
pròpia per tal d’aconseguir-ho.
Altres similituds les trobem en el canvi de personalitat que adopta el personatge
davant de casos de vida o mort on passa de ser un personatge completament
normal a fer coses que mai es podria imaginar per tal de salvar a una persona.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
27
2. Rèquiem for a dream:
Gènere: Drama. Dirigida per Darren Aronofsky i produïda per Thousand Words. El film
tracta d’un noi i la seva mare, els quals tenen somnis molt diferents. La mare fa dieta
esperant tenir l’ oportunitat de poder aparèixer algun dia en el seu programa preferit de
televisió. Calvi, el fill, i la seva novia somien en guanyar-se la vida venent droga i utilitzar els
guanys per obrir un negoci propi. Tots dos faran el que faci falta per aconseguir el seu
somni.
D’aquest film prenem com a referent l’argument i alguns recursos tècnics. Així doncs, hem
pres especial atenció en el comportament de les persones immerses en el món de les
drogues, com es tracten entre elles, els llocs que freqüenten, són aspectes que hem tingut
en compte i ens hem fixat per tal d’elaborar el nostre projecte.
En quanta recursos tècnics, hem tingut en compte d’una banda el tipus d’il·luminació. En
general la pel·lícula usa tonalitats fredes. A l’igual que el nostre projecte, volem que els tons
predominants siguin els freds, per tal de transmetre aquest ambient de tensió.
D’altra banda recursos tècnics emprats en la realització d’aquest film també ens van
semblar d’allò més atractius per a incloure en el nostre curtmetratge. Algunes seqüències
en càmera ràpida, o alguns plans en punt de vista subjectius, són elements que volem
incloure en la realització del nostre curt.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
28
• Funny Games:
Remake de la pel·lícula del mateix títol dirigida per Michael Haneke el 1997, un film de
thriller i suspens nord-americana on es mostra com les vacances d’una família es veuen
afectades per dos nois de ment pertorbada.
D’aquest film ens ha interessat per al nostre projecte només un recurs tècnic emprat en
una escena. En un moment determinat del desenvolupament de la història, els dos
personatges protagonistes perden el control de la situació. Per tal d’arreglar la situació, un
dels personatges principals agafa el comandament a distància i prem el botó de rebobinar
endarrere. D’aquesta manera el film es rebobina fins al punt en que ell pot tornar tenir el
control de la situació i fer anar els esdeveniments d’acord als seus interessos.
D’aquest fragment esmentat hem extret i adaptat aquest rebobinat. Així doncs, en cas que
l’usuari hagi escollit el camí que condueix a la mort, es rebobinarà fins al punt on se li han
mostrat les dues opcions a escollir.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
29
• Altres referents
www.takethislollipop.com
Jason Zada és el creador d’aquesta interfície web i del vídeo que conté. Es tracta d’una
crítica a la poca privacitat de Facebook, a la vegada que alerta a la gent del perill que pot
comportar publicar les nostres dades a qualsevol lloc i a l’abast de tothom.
El que ens interessa del producte no és el contingut en sí, sinó l’estètica d’aquest. L’ús d’un
color a les imatges que torna les superfícies com metàl·liques i que recorda a l’estètica dels
videojocs.
D’altra banda, la il·luminació del curt també té certa semblança al tipus d’il·luminació que
nosaltres volem donar al nostre projecte. En els espais interiors hi ha un focus de llum
concret mentre que la resta de l’estança queda en la penombra.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
30
TERCERA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
31
Requeriments tecnològics
Abans d’iniciar-nos en el procés de creació de l’entorn web, es va fer un anàlisi per tal de
conèixer les tècniques i recursos tecnològics que l’actual xarxa ens ofereix. Amb aquest
petit estudi esperàvem trobar la fórmula més adient per confeccionar la nostra pàgina web.
A més, es va tenir en compte els estàndards actuals i futurs que tenen intenció
d’implementar les grans plataformes.
Hi ha dues eines principals per a programar una pàgina web: l’Adobe Flash d’una banda i el
llenguatge Html, o la nova versió Html5 de l’altre. A més, aquests llenguatges tenen un
seguit de complements que es poden afegir per a fer una web més potent, com pot ser el
CSS, el Javascript i les llibreries JQuery per afegir moviment i interactivitat a les pàgines
web.
Després d’analitzar les possibles opcions i valorant el coneixement que els membres del
grup teníem de cadascuna d’aquestes hem optat per programar i dissenyar la web a partir
de l’Html i complementar-lo amb totes aquelles eines que el poguessin fer més potent.
D’altra banda, també es va fer un anàlisi de les possibles opcions que teníem per a
programar el curtmetratge interactiu. Les opcions actuals per a programar-lo eren tres:
Adobe Flash, Popcorn o bé 3wdoc.
Els tres sistemes de programació permeten incloure elements interactius i informació
addicional a vídeos online.
En aquest cas l’elecció va estar marcada per factors externs els quals no hem pogut
controlar. Finalment ens hem decantat per programar a través de Flash, gràcies a l’ajuda de
l’Arnau Gifreu, ja que els nostres coneixements en Flash eren molt limitats.
Adobre Flash presenta certs inconvenients amb els quals de moment haurem de conviure.
D’una banda, crear un projecte amb Adobe Flash pot presentar algun problema al penjar el
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
32
projecte en xarxa, ja que en certs casos el funcionament i agilitat de navegació no és
l’optima,provocant que l’usuari s’hagi d’esperar per a poder consumir el producte.
Aquest fet però, l’intentarem de solucionar a través de còdecs que comprimeixin el pes del
vídeo i permetin una reproducció el màxim d’àgil i continua possible.
D’altra banda, Adobe Flash no es compatible amb totes les companyies, plataformes o
navegadors que usen els tablets i els dispositius mòbils.
Les ganes de treballar amb un llenguatge emergent i potent que ens servís de plataforma
de sortida un cop acabat el curs acadèmic, va ser el que ens va fer decantar per programar
la nostra pàgina web amb Html5 i tots els llenguatges que el complementen.
Software usat
Html:
És el llenguatge de marcat predominant per a l’elaboració de pàgines web. Tot i que la nova
versió de l’Html aporta nous elements, hem decidit definir l’estructura bàsica i general de la
interfície web amb la versió anterior. Complementarem aquesta estructura bàsica amb els
nous elements de l’Html 5 i totes les eines existents per fer més atractiva i potent la nostra
interfície web.
Html 5:
L’Html 5 és la nova versió de l’Html. Segueix les bases de l’Html, però aporta avantatges
respecte la versió anterior, per la qual cosa el fa molt més potent. Estableix una sèrie de
nous elements i atributs que reflecteix els canvis en les pàgines web més modernes. Així
doncs alguns elements proporcionen noves funcionalitats a través d’una interfície
estandarditzada, com són els elements <audio> i <video>.
Aquests dos elements són molt rellevants en una pàgina web com la d’Icària, ja que els
elements que han de tenir més pes dins la interfície web és el curtmetratge i els elements
sonors.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
33
Les etiquetes àudio i vídeo ens ofereixen la possibilitat d’integrar vídeos i àudios de manera
fàcil i còmode, sense necessitat d’instal·lar plugins addicionals, com el Flash Player, al
nostre navegador o ordinador per poder consumir aquell element. D’aquesta manera la
compatibilitat entre navegadors i extensions és total i permet el consum d’aquell producte
multimèdia sense problema.
En el nostre cas hem usat l’etiqueta àudio per integrar sons en els elements que conformen
el menú principal de la web. D’aquesta manera, aconseguim que indiferentment del
navegador que usi l’usuari pugui escoltar aquests sons.
Aquesta compatibilitat s’aconsegueix pujant el so desitjat en dos formats, l’mp3 i el webM.
CSS3:
Per tal que l’Html5 sigui potent, és necessari l’ús d’eines complementàries com el CSS.
Aquest llenguatge té com a funció principal separar el contingut de la forma. Des de la
primera versió de CSS es va assolir aquest objectiu, però tot i així no oferia un control total
als dissenyadors sobre elements de la pàgina. Aquests tenies trucs per aconseguir efectes
tant desitjats com els ombrejats o els contorns rodons.
Amb el CSS3 s’incorporen nous mecanismes que aporten als desenvolupadors web, major
control sobre l’aspecte final de visualització dels continguts sense haver de recórrer a trucs
o hacks que complicaven molt el codi.
Les noves propietats que el CSS3 aporta, entre moltes d’altres són: contorns, fondos, colors,
degradats, text i selectors.
En el nostre projecte n’hem fet servir varis, per exemple:
• Rotate: l’hem usat per simular que les fotografies de l’apartat ‘Qui som? ‘ giren i tenen
una aparença 3D.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
34
• Ombrejats: dels efectes de text que aporta el nou CSS, hem usat l’efecte ‘Text
shadow’. D’aquesta manera aconseguim generar una ombra als títols de l’apartat
‘Extres’.
Per últim, la nova versió de CSS permet de pujar nous estils tipogràfics a una llibreria i que
es guardin de forma indefinida.
JQuery:
Per tal de donar dinamisme a la web hem usat el framework o biblioteca d’efectes JQuery
de Javascript.
JQuery presenta avantatges respecte el llenguatge Javascript, ja que la redacció de codi es
més simple i simplifica la interacció amb l’Html.
Aquest llenguatge ens ha permès animar elements de la pàgina web com el menú principal
a través d’un efecte ‘scroll’ lateral. Aquest moviment es crea a partir de l’efecte
‘mousemove’, el qual quan es mou el mouse, la imatge del menú principal també es mou.
AdobeFlash:
El software Adobe Flash és un potent entorn de creació d’animacions i contingut
interactiu. L’ús d’aquest software ha estat imprescindible per a animar els elements que
s’han integrat al curtmetratge i fer-lo interactiu. Tot i això i com hem esmentat
anteriorment, aquest programari presenta moltes limitacions, ja que no és compatible
amb certs navegadors de tablets i dispositius mòbils.
Streaming de vídeo:
Com hem comentat anteriorment, hi ha un total de 18 vídeos que conformen el nostre
curtmetratge interactiu. Penjar tot aquest volum d’informació a la web i que aquest es
reprodueixi correctament no és una tasca senzilla.
De moment el curtmetratge interactiu no es podrà veure online degut al problema
del pes dels vídeos i es mantindrà en local per poder ser mostrat el dia del tribunal.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
35
Mentrestant els membres del grup treballen per aconseguir pujar aquest curtmetratge
online i poder ser consumit a través de la xarxa.
Prenent el projecte de final de carrera ‘El orgullo se limpia con sangre’ com a referent en
quant a la programació del curtmetratge interactiu i per el tipus de mode de reproducció
que un grup d’alumnes va fer l’any passat, nosaltres en un primer moment hem exportat
els vídeos en format .mp4 en alta definició i se’ls hi ha passat un códec de vídeo H264.
Això no ha estat suficient ja que els vídeos per a la web no han de pesar molt per tal que la
web els suporti i en el nostre cas determinats clips de vídeo tenen molt de pes . Hem optat
per a dividir en diverses parts aquells vídeos que pesaven més, i a més convertir tots els
vídeos que conformen el curtmetratge interactiu a format .mov i passar-los-hi un códec
webM a 900kbps.
D’aquesta manera esperem poder pujar el més ràpid possible tots els vídeos a Internet i
que l’usuari pugui consumir-lo a través de la nostra pàgina web.
Navegació i visualització de la web
En el punt que ens trobem actualment, la pàgina web és compatible amb les últimes
versions dels navegadors més usats, que són: Firefox 4.0, Safari 5.0, Chrome 11, Opera 11 i
IE 9.
Tots aquests navegadors accepten correctament el llenguatge Html5, usat en alguns
elements de la nostra pàgina web.
Visionar la pàgina web ProyectoIcària en versions antigues dels navegadors anteriorment
esmentats, generarà problemes i no es veurà la pàgina correctament.
Remarcar que amb el navegador Opera 11 i IE9 hi ha un problema de visualització amb el
CSS3. Aquests navegadors no permeten veure un dels efectes d’aquest full d’estils.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
36
Visualització tablet i mòbil
Després d’haver fet vàries proves de visualització de la pàgina web Proyectoicària
amb iPad’s, iPhones i diversos dispositius que funcionen amb un sistema operatiu Android,
hem comprovat que el funcionament web no es reconverteix bé.
Obviar a tot el sector de públic potencial que pot voler accedir a la nostra pàgina web a
través d’un d’aquests dispositius seria un error per part nostra, és per això que hem buscat
una solució el màxim d’efectiva mirant de no perdre a l’usuari.
Hem creat una ruta de redireccionament en el cas que un usuari accedeixi a la pàgina web a
través d’un d’aquests dispositius. Aquest redireccionament condueix a l’usuari a una nova
pàgina d’Icària en el qual se li explica que la pàgina web www.proyectoicaria.com no està
llesta per a ser visualitzada a través de dispositius mòbils.
Web 2.0
• La “prehistòrica” web 1.0
No profunditzarem en aquest tipus de web, ja que ha quedat gairebé absolta i que el nostre
projecte, al ser multimèdia, es tracta d’una web 2.0. Tot i això, cal realitzar una petita
pinzellada per situar en context i poder veure de forma significativa l’evolució de la web 1.0
a 2.0.
Les webs 1.0 (1991-2003) construeixen la forma més bàsica que existeix. Es tractava
(parlem en passat perquè com hem dit, ja gairebé no existeixen) de webs que mai
s’actualitzaven, amb un entorn estàtic i sense interacció amb l’usuari, amb continguts rígids
a la navegació (HTML i GIF). El disseny i la producció de continguts anava a càrrec de
persones especialitzades en informàtica, per tant, molt poca gent podia produir aquests
continguts. Es tractava generalment de webs amb fins comercials amb continguts tant
d’alta com de baixa qualitat, administrats per un webmaster.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
37
Anys després, aquest tipus web va anar patint una evolució constant fins arribar al que ara
és anomenada la web 2.0
• Origen del terme 2.0
El terme de web 2.0 sorgeix l’any 2004 quan Tim O’Reilly (fundador i president de O’Reilly
Media) realitzà una conferència que va anomenar “Conferència Web 2.0”. Es va considerar
que s’havia re inventat el que era Internet.
La web 2.0 és la transició entre les aplicacions tradicionals cap a les aplicacions més noves,
les quals necessiten una implicació per part de l’usuari. Aquestes pàgines es caracteritzen
per una àmplia diversitat de continguts administrats pels mateixos usuaris, els softwares i
les aplicacions no requereixen una instal·lació directa al PC per a ser utilitzats.
Tots els dissenys i produccions de la web són realitzats sense la necessitat de tenir grans
coneixements d’informàtica, gairebé qualsevol persona pot dur a terme tots els continguts
de la web. Són webs accessibles i pràctiques amb finalitats diverses, en la majoria de casos
estan creades per a la construcció de comunitats que comparteixen interessos, pràctica i
formació.
La funció principal d’aquestes webs és produir, dissenyar, construir i compartir informació
en diversos suports. En general es tracta de webs amb un feedback entre productors i
consumidors, sent els productors a la mateixa vegada consumidors i viceversa, és a dir, una
arquitectura completament de participació, tota la innovació ve donada per
desenvolupadors independents.
“Web 2.0 es un nombre cómodo para un fenómeno. Se trata de un cambio que va desde la
época en que Internet era un accesorio al PC, hasta el momento en que Internet es una
auténtica plataforma por sí misma.”
Tim O’Reilly
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
38
Diversos exemples de webs que mostren el que seria l’equivalència de la web 1.0 a la web
2.0:
- Enciclopèdia Catalana Online � Wikipèdia
- Ofoto � Flickr
- Site personal � Blog
D’aquesta manera sorgeixen nous termes com l’anomenat codi obert o OPEN SOURCE amb
el que es coneix el software desenvolupat lliurement. Aquest parteix de la premissa que al
compartir el codi, el resultat acostuma a ser d’una qualitat més alta, però no només es
tracta d’una qüestió tècnica, d’altra banda també hi ha una tendència filosòfica i moral: si
no es comparteix el software lliure és tracta d’una acció considerada anti ètica ja que la
prohibició de compartir entre éssers humans va en contra el sentit com
.
Un altre concepte que s’ha desenvolupat amb la creació de la web 2.0 és el d’una xarxa
PEER – TO – PEER (xarxa entre iguals). Es tracta d’una xarxa d’ordinadors on tots o alguns
aspectes funcionen sense clients ni servidors fixes sinó amb una sèrie de nodes que es
comporten com iguals entre sí. Aquestes xarxes permeten un intercanvi de qualsevol tipus
d’informació, com per exemple fitxers d’audio, vídeo o software..., en qualsevol format,
entre els ordinadors interconectats.
• Web 2.0 i projecte Icaria
L’equip del projecte Icaria en un primer moment va tenir molt clar que volia anar més enllà
de crear un simple curtmetratge audiovisual. El món multimèdia és el que més creix
aquests dies, així que vam decidir apostar per un projecte una mica més complicat; inserir i
adaptar el curtmetratge en una web, però no només això sinó que el propi curtmetratge fos
interactiu per a l’usuari. Obviament aquest projecte no seria possible dur-lo a terme sense
una plataforma com la web 2.0 on l’objectiu principal era i és aconseguir una plataforma on
la participació de l’usuari sigui indispensable per tal de desenvolupar el que és tot el
producte audiovisual.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
39
• El futur de la 2.0
Tot i el gran boom que ha tingut i té la web 2.0, no trigarà gaire temps en donar un pas més
i convertir-se en una web 3.0. El triomf de la intel·ligència de les màquines i del món virtual
donaran lloc a webs en 3D, centrades totalment en l’àmbit multimèdia i en ser webs
permanents, és a dir, webs que podrem trobar a tot arreu, no només en els nostres PC,
tablets o mòbils sinó en objectes quotidians com la roba, complements, transports... Tot
aquest procés serà facilitat quan l’usuari tingui una connexió il·limitada a uns preus molt
accessibles.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
40
QUARTA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
41
Arquitectura de la informació
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
42
Arbre de continguts curtmetratge
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
43
Diagrama de fluxe (navegació)
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
44
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
45
CINQUENA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
46
Disseny interfície
Metàfora Gràfica
La metàfora gràfica que fem servir a la interfície de la web va lligada plenament amb el
nostre curtmetratge interactiu. D’aquesta manera, es fa ús d’una estètica i composició que
recorda i manté en tot moment l’essència del curtmetratge.
La web es divideix en un nivell principal i quatre subnivells que contenen tota la informació
necessària del projecte. La Home està composada per elements interactius i una
panoràmica dotada de moviment. Aquesta última permet a l’usuari interactuar per tota la
seva interfície aportant-li una forta sensació d’integració en la web i establint un codi comú
que farà possible els escenaris comunicatius i visuals desitjats.
La Home està formada per una taula de despatx amb una sèrie d’elements interactius que
al passar per damunt el cursor són il·luminats i emeten el so característic de l’objecte. Al
ser clicats ens porten a les diferents parts que conformen la website. Aquests elements els
podrem trobar al llarg del curtmetratge i per tant, tenen una forta relació amb la seva
temàtica. Aquests són:
- Càmera de fotos
- Llibreta
- PDA
- Pistola
De la mateixa manera, hi ha un subnivell, el qual trobem a l’apartat Extres, que assumeix
més importància que els altres perquè segueix la mateixa estructura i estètica que el nivell
principal o Home. Aquest representa un altre escenari important de la peça audiovisual,
com és el laboratori. D’aquesta manera, la panoràmica també farà ús d’un seguit
d’elements interactius que es veuran il·luminats al passar el cursor per damunt La
diferència es troba en dos d’aquests elements que es caracteritzen per contenir un stop
motion a l’hora d’accedir a la informació corresponent.. Aquests subapartats són:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
47
-Apunts científics
-Safata
-Llibreta
-Balança
Pel que fa la identitat audiovisual cromàtica hem volgut conservar els colors utilitzats en el
curtmetratge. D’aquesta manera, el primer nivell destaca per la utilització d’uns colors
saturats i amb un fort contrast entre aquest i els negres. Amb aquest efecte hem volgut
mantenir l’essència de videojoc que tant caracteritza aquest curtmetratge interactiu.
Els tres primers subnivells: Qui som, vídeo i personatges també segueixen la mateixa
cromàtica que el curtmetratge. D’aquesta manera, destaca l’ús de colors freds i una
estètica rovellada i vella que proporciona aquesta ambientació de desgast que caracteritza
a tot el projecte.
D’altra banda, en el subnivell d’extres trobem un fort predomini de blaus i blancs per
donar la sensació de fredor i puresa d’un laboratori. A més, aquest canvi fort de
cromatisme entre escenaris està pensat per situar ràpidament a l’usuari i advertir-li del
canvi de nivell.
Cal destacar l’utilització d’un filtre Grunge en tots els nivells que ens ha permès unificar i
crear una única ambientació per la website. D’altra banda, la utilització en la presentació de
l’equip d’Icaria d’una estètica policíaca li dóna un toc humorístic al projecte.
Colors corporatius
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
48
• Pantone Process Black EC
El negre ha estat escollit per representar una de les meitats tant del logotip senzill com el
compost. En el cas del senzill, les dos últimes síl·labes i en el cas del compost la meitat del
escut dels mossos d’esquadra juntament amb la tipografia.
S’ha escollit el color negre, degut a la voluntat de representar una dualitat cromàtica en
acord a la mateixa dualitat que viu el protagonista del curt a nivell psicològic. El negre fa
referència al costat més fosc de l’ésser humà, quelcom ombrívol que impulsa en el cas del
nostre protagonista a cometre actes impensables temps enrere.
• Pantone 484 EC
Aquest color ha estat utilitzat per representar l’esquitxada de sang que trobem al logotip.
En generals gran part del curt interactiu fa apologia de la necessitat del protagonista a
recórrer a la violència per obtenir un fi, i quina millor manera de representar aquest
concepte que no sigui la sang i tot el que el seu color roig indica.
• Pantone Process White EC
Tal com s’ha explicat en el primer apartat (Pantone Process Black EC) el blanc ajuda a
ressaltar l’oposició cromàtica amb el negre. Tanmateix, un cop més no es tracta d’un color
escollit al atzar, sinó que fa referència al costat més noble d’un mateix, a la claredat, la
llum, la justícia i en resum la vida que el protagonista portava abans d’adonar-se que està a
punt de perdre el seu bé més preuat: la vida de la seva filla.
El logotip
El disseny del logotip ha procurat reflectir l’argument i l’essència del projecte en una
identitat visual. D’aquesta manera, hem traslladat els següents conceptes a la identitat
visual:
• Dualitat entre dos mons totalment oposats: El nostre protagonista és un
policia que s’ha d’introduir de primera mà en el món de la droga i les màfies per tal
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
49
de salvar la seva filla. Per aquest motiu el personatge principal viu una doble vida.
Per una banda trobem el policia exemplar que sempre ha estat del bàndol de la llei
i per altre banda trobem el pare desesperat que matarà i enganyarà per aconseguir
el seu objectiu.
Si extrapolem això al logotip trobarem que Icaria està escrita mitat en blanc i mitat
en negre, simbolitzant aquesta dualitat entre els dos mons i en la mateixa
psicologia del personatge.
• Violència i assassinats: Es trasllada aquest concepte amb la taca de sang. Tal
com explica l’argument del projecte el protagonista és convertirà en un assassí de
policies degut al seu pacte amb Andrej.
• Obscuritat i foscor: S’ha escollit una tipografia bruta i ruda per simbolitzar una
mica la estètica i la essència del curtmetratge interactiu.
• Logotip senzill:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
50
• Logotip Compost:
Per a la creació del logotip s’ha utilitzat la tipografia Loserboy Grunge. Es tracta d’una font
amb caràcter propi, i que denota conceptes molt apropiats pel nostre projecte com ara la
foscor, la fredor, la solitud, la impotència.
En el cas d’aquesta tipografia, s’utilitza sempre a una mesura a partir de 20pt, per dos
motius: En primer lloc, perquè en menor mesura la seva lectura esdevé complicada i
costosa i precisament això no ens convé. En segon lloc, perquè no admet minúscules i per
tant no es podria justificar utilitzar lletra majúscula en textos que no siguin títols o
encapçalaments.
Precisament per aquests motius, aquest tipus de lletra només s’utilitzarà en el logotip i en
determinats títols que apareixeran al curtmetratge com ara el nom de les substàncies que
el protagonista anirà recopilant.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y
Z
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
51
• Logotip compost
En el cas del logotip compost, s’ha seguit utilitzant la mateixa tipografia per al títol del
projecte (ICARIA), però per la resta de text que hi apareix s’ha utilitzat la font 28 dayslater.
En aquest últim cas, s’ha escollit aquesta tipografia perquè així com el cas anterior denota
conceptes relacionats amb l’argument i l’essència del curtmetratge, però alhora dona
diferenciació al text i més presencia al nom del projecte.
Pel que fa a la dimensió, la seva importància és més relativa, ja que només apareixerà en
aquest tipus de logotip. Tanmateix, com en el cas anterior és convenient dotar-la d’un
dimensió de 20pt o superior per facilitar las seva lectura.
A B C D E F G H I J K L M
N O P Q R S T U V W X Y
Z
Contingut web:
Per a la realització dels continguts textuals de la pàgina web s’ha utilitzat la tipografia King
things Typewriter que, com el seu nom indica, simula la tipografia típica d’una màquina
d’escriure.
L’elecció d’aquesta tipografia gira entorn a l’estil general de la website, ja que hem tingut
en compte que tot el contingut es divideixen en diferents fitxes que segueixen l’estructura i
composició d’una fitxa policial. A més, aquesta està dotada de la possibilitat de
transformar-la en negreta i d’ús de minúscules o majúscules. El fet que sigui una tipografia
complexa, ens ha obligat a modificar-la realitzar un espai entre lletres per tal de facilitar i
agilitzar la seva lectura.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
52
ABCDEFGHIJKLMNOPQRSTUWXYZ
Abcdefghijklmnopqrstuwxyz
0123456789
Elements interactius:
Per tal de dotar a la peça audiovisual d’una estètica de videojoc, s’ha emprat un seguit
d’elements interactius típics d’aquest format i identificables ràpidament per qualsevol
usuari familiaritzat amb aquest gènere. Cadascun d’ells se l’ha dotat d’una tipografia
concreta segons la seva funció:
• Cartells informatius:
Per a la realització d’un seguit de cartells informatius que apareixen en el curtmetratge s’ha
utilitzat la tipografia 28 days. Aquesta té una estètica Grunge i rovellada que segueix la línia
que hem portat durant tot el disseny de la pàgina web.
Abcdefghijklmnopqrstuvwxyz
0123456789
• Mòbil i missions:
L’aparició d’aquests elements interactius al llarg de tot el curtmetratge ens ha obligat ha
utilitzar una sèrie de tipografies concretes que permetessin a l’usuari entendre ràpidament
que es tractava d’un dispositiu mòbil i que el que allà apareixia era un missatge.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
53
Per aquest motiu , en la realització dels missatges es va escollir la tipografia Pixel splitter, ja
que es troba dintre de la temàtica LCD o estètica digital. D’aquesta manera, podríem
assenyalar que la seva característica principal és la composició pixelada tan apropiada per
donar aquesta sensació de missatge de text a l’element.
ABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXABCDEEFGHIJKLMNOPQRSTUVWXZZZZ
0123456789012345678901234567890123456789
En el cas del mòbil vam fer ús de la Franklin Gothic Medium, tipografia instal·lada per
defecte a tots els sistemes Mackintosh i Windows garantint la seva llegibilitat en tots els
sistemes operatius i navegadors. Aquesta, a diferència de la Pixel splitter, s’ajustava millor a
la pantalla de l’aparell facilitant la seva lectura per part de l’usuari.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Descomposició esquemàtica:
• Website
En aquest apartat es realitzarà un breu recorregut per totes les parts que
composen la website d’Icaria. D’aquesta manera, presentarem les diferents
elements i funcions que contenen cadascuna d’elles a més de realitzar una
breu explicació sobre alguns recursos tècnics emprats que hem vist de vital
importància citar en aquest apartat.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
54
Home
La home d’Icaria es divideix en quatre parts principals les quals venen representades per
una sèrie d’elements interactius:
- Càmera fotogràfica: Qui som
- PDA: Vídeo
- Pistola: Personatges
- Llibreta: Extres
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
55
Aquests elements es troben dintre d’una imatge panoràmica que simula una de les escenes
del curtmetratge, el despatx de l’inspector Suárez. Aquesta panoràmica es caracteritza per
donar a la possibilitat a l’usuari de desplaçar-se per tota la pantalla i d’aquesta manera
crear una certa interactivitat o relació entre l ‘usuari i la pàgina web.
Els elements mencionats anteriorment tenen la funció de representar el menú gràfic que
composarà i estructurarà tota la interfície web. Inicialment, tota la panoràmica es troba
amb la mateixa tonalitat i dóna la sensació que aquests elements no hagin de realitzat cap
mena de funció, no obstant, quan l’usuari passa el cursor per damunt d’un ells aquest
s’il·lumina i emet el so característic de l’aparell.
D’altra banda, en un cantó de la home apareixen dos botons que ens condueixen a les dos
xarxes socials del projecte, Facebook i Twitter. Tot i que l’usuari es desplaci d’un cantó a
l’altre de la panoràmica aquest icones continuaran visualitzant-se en la pantalla perquè
aquests sempre els tingui disponibles en el moment que vulgui accedir.
D’aquesta manera, podem assenyalar que la home d’Icaria destaca per la seva senzilla i per
ser una pàgina web purament visual. Simplement, utilitza un menú gràfic dins d’una
panoràmica elaborada i dinàmica.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
56
Qui som
Aquest apartat, el qual es trobar dintre de la càmera fotogràfica, explica mitjançant una
sèrie de fitxes tècniques el càrec de cadascun dels membres que formen l’equip d’Icaria
però amb un cert to humorístic.
Aquesta secció continua mantenint l’estètica visual que caracteritza tota la website. Els
subapartats són elements visual, fotografies dels membres del projecte, realitzades amb
transformacions 3D del CSS3 per permetre que aquests personatges es girin en el moment
en el que l’usuari passa el cursor per damunt d’ells. Posteriorment, es desplega la fitxa
mencionada anteriorment on es presenta tota la seva informació.
Els subapartats són:
- Anna
- Georgina
- Marc
- Albert
- Elsa
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
57
En l’estètica d’aquest apartat, s’ha volgut mantenir l’ambientació del curtmetratge i per
aquest motiu l’equip d’Icaria es troba dintre d’una sala que simula una roda de
reconeixement i les fotografies emprades en les fitxes simulen les utilitzades en fitxes
policials.
Vídeo
L’apartat vídeo es troba situat dintre de la PDA i conté el curtmetratge interactiu. Aquest
ha estat situat estratègicament dintre de l’element central de la panoràmica amb l’objectiu
de donar-li importància, ja que conté el nucli cor de la website, el projecte audiovisual.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
58
Aquest es troba composat a partir d’un vídeo incrustat en el qual es pot visualitzar
íntegrament el projecte. Aquest vídeo es troba dividit en vàries parts perquè es tracta d’un
curtmetratge interactiu i per tant, estarà composat per diverses opcions on haurà de triar
l’usuari. A més, el fet d’haver rebut un tractament tan fort a l’hora de postproduir-lo ha
provocat que el pes de cada peça augmenti i això ens ha obligat a dividir el treball en un
nombre més elevat de clips per tal d’assegurar-nos una bona visualització en la website-
Personatges
Aquest espai, el qual s’arriba a través de l’element pistola, ens permet descobrir quin són
els personatges principals que conformen el curtmetratge interactiu d’Icaria. Seguirà una
estructura similar a l’apartat Qui som, ja que a través de clicar un dels personatges que es
troben disposats en grup se’ns desplegarà una fitxa en la qual trobarem la seva biografia i
informació addicional necessària per entendre el curtmetratge.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
59
Els subapartats són:
-Pablo
-Edgar
-Samuel
-Veronica
-Emma
-Andrej
-Dimitri
-Alexander
En aquest cas, els personatges es troben disposats en grup en una escena característica del
curtmetratge, el port de Barcelona. Inicialment, els personatges es troba en escala de grisos
però quan l’usuari situa el cursor sobre algun d’ells aquests es visualitzen automàticament
en color.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
60
Extres
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
61
L’apartat extres és un dels més importants de la pàgina web per la seva complexitat i
composició. Aquest ens condueix a una nova panoràmica que ens ambienta un altre cop en
el curtmetratge, en aquest cas el laboratori.
La seva composició segueix la mateixa línia que la Home, és a dir, una panoràmica que es
caracteritza per donar la possibilitat a l’usuari de desplaçar-se per tota la pantalla i
s’estructura a partir d’un menú gràfic on els elements s’il·luminen en el moment en què
l’usuari passa el cursor per damunt.
Els subapartats o elements interactius són:
- Tràiler
- Memòria del projecte
- Galeria de fotos
Dues de les opcions de la panoràmica s’han realitzat a partir de dos vídeos fets mitjançant
la tècnica de l’stop motion. Aquests són un arxiu gif programats perquè quan l’usuari cliqui
sobre aquests dos elements, es reprodueixi i a continuació l’usuari accedeixi directament al
següent nivell, memòria del projecte o galeria fotogràfica.
A continuació, una breu descripció dels nivells que integren cadascun dels subapartats que
podem trobar a extres:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
62
Tràiler
Aquest nivell conté un breu clip on es realitza un petit tast sobre el curtmetratge interactiu
Icaria. Aquest es tracta d’un vídeo incrustat que es pot visualitzar a la pròpia pàgina web.
Memòria del projecte
Aquest element interactiu integra la memòria del projecte. Hem decidit penjar el treball
multimedial a la nostra website per aquells usuaris que vulguin saber quines eines s’han fet
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
63
servir per a realitzar tan el curtmetratge interactiu com la pàgina web. El treball anirà
incrustat a la web mitjançant un servei en línia anomenat Issuu, que permet la visualització
de material digitalitzat electrònicament.
Galeria fotogràfica
La balança integra una galeria fotogràfica que conté fotografies realitzades al llarg de tot el
procés de creació del projecte Icaria. Aquesta es tracta d’una galeria JQuery on apareixen
totes les fotografies en petit i a sota van realitzant l’efecte de slide
• Curtmetratge:
En aquest apartat es realitzarà un breu resum de les funcions i característiques que
contenen els diferents elements interactius emprats al curtmetratge. Per tal de
realitzar aquest anàlisi, hem dividit les parts segons les escenes que fan ús d’aquests
elements.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
64
Escena 2
Pablo es troba amb el seu amic Ezequiel, ex científic del cos policial, al laboratori per
buscar el llistat de substàncies que necessita per tal de salvar la vida de la seva filla.
En el moment en què el científic es disposa a entregar-li el llistat a Pablo apareix el primer
element interactiu. Aquest es tracta d’una i realitzada amb la tipografia emprada per fer
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
65
els punts informatius. D’aquesta manera, l’usuari intuïtivament sabrà que ha de clicar
aquest element per tal de visualitzar informació extra.
Així doncs, un cop l’usuari hagi clicat amb el cursor aquest element interactiu es desplegarà
un llistat amb els noms de les tres substàncies que Pablo necessita. Hem fet servir aquest
recurs perquè ens ha semblat que d’aquesta manera l’usuari podria llegir amb més claredat
el nom de les tres substàncies, ja que són complicats. A més, gràcies aquest recurs hem
tingut l’oportunitat de jugar amb els colors per poder mostrar d’una manera més directa
que les primeres lletres de cada substància composen el títol del curtmetratge.
Escena 4
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
66
El flashback ens mostra quan Pablo i Edgar entren al pis on Andrej i els seus companys
narcotraficants estan consumint drogues. Aquests detenen al rus el qual es passarà anys a
la presó.
En aquesta escena també hem fet ús de l’element interactiu que simula el punt
d’informació. Aquí ens mostra un llistat on apareixen els noms dels personatges principals
que intervenen en l’escena.
D’aquesta manera, aquest element interactiu ajuda a l’usuari a veure quines persones
intervenen en la trama, ja que al tractar-se d’una escena tant ràpida és possible que aquest
no pugui adonar-se de tots els detalls i és de vital importància que conegui quins
personatges principals hi trobem a l’escena per poder seguir la història.
Escena 6
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
67
L’escena ens mostra quan Pablo rep un missatge d’Andrej al telèfon mòbil per donar-li
instruccions sobre la seva primera missió, matar a l’inspector Suárez.
En aquest cas apareixerà com a element interactiu un telèfon, el qual anirà apareixent cada
cop que Andrej li demani una missió nova al protagonista. Aquest haurà de clicar amb el
cursor a sobre de l’aparell per poder llegir el missatge. Posteriorment, apareixerà un fitxa
on hi haurà escrita la missió tal i com si es tractés d’un missatge.
Aquest element interactiu ens ha servit com a recurs per poder mostrar a l’espectador
quina és la missió a realitzar a cada moment el protagonista. El considerem un element clau
per tal de què el nostre curtmetratge assoleixi l’estètica de videojoc desitjada.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
68
Escena 7
En el moment en el què Pablo es disposa a complir la seva primera missió, matar a
l’inspector Suárez, apareixeran dos botons interactius on l’usuari podrà escollir quina acció
vol realitzar per tal d’arribar al seu objectiu. Al passar el cursor per sobre d’un dels botons
un hover farà il·luminar aquest element donant a entendre a l’usuari la possibilitat
d’escollir-lo.
Aquests dos elements ens ajudaran a fer possible la part interactiva del projecte .Un d’ells
ens permetre continuar visualitzant el curtmetratge metre que l’altre ens conduirà a un
Game Over i amb ell un cop més a l’inici.
Escena 10
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
69
Pablo es troba a l’Estació de França i rep un nou missatge d’Andrej. En aquesta ocasió, el
rus li escriu que la seva propera missió consisteix en matar a dos policies de narcòtics,
Samuel i Verónica.
Com que es tracta d’una missió, aquí també hem fet servir el recurs del telèfon mòbil per
fer arribar de la manera més fàcil possible la missió a l’usuari. Així doncs, quan l’espectador
cliqui sobre l’aparell es desplegarà un missatge nou on apareixerà detalladament la missió
que ha de complir.
Escena 11
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
70
Escena en la que Pablo es troba al port de Barcelona preparat per a complir la seva segona
missió, matar a Samuel i Verónica. Aquests dos policies es troben amagats darrere d’uns
contenidors esperant el moment per detenir a Dimitri i Alexander, companys d’Andrej, els
quals esperant un bon carregament de droga.
Un cop més, trobarem l’element interactiu d’informació per tal de poder explicar alguna
part necessària a l’usuari. Així doncs, aquest servirà per mostrar dos cartells en els quals
apareixerà informació que permetrà a l’usuari conèixer i situar als dos personatges que es
troben a l’escena.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
71
Mitjançant el recurs dels botons, esmentat anteriorment, l’usuari haurà d’escollir amb
quina arma prefereix matar els policies. Un cop més, al passar per damunt el cursor d’un
dels botons aquest s’il·luminarà i segons la opció triada es seguirà visualitzant el
curtmetratge o apareixerà un Game Over que ens portarà de nou al començament.
Escena 14
Pablo es troba el túnel de metro de Diagonal i rep un nou missatge d’Andrej. En aquest cas,
la missió és més complicada perquè li demana que mati a Edgar, el seu company de feina i
millor amic.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
72
L’element interactiu emprat és el mòbil, ja que es tracta d’una missió. L’usuari al clicar amb
el cursor a l’aparell se li desplegarà una fitxa o missatge on apareixerà detalladament la
missió a realitzar.
Un cop complertes totes les missions, Pablo acudeix al despatx d’Andrej per demanar-li les
substàncies que li ha promès i que li permetran salvar la vida de la seva filla. En una primera
instància Andrej es nega a entregar-li al protagonista el que li pertoca.
Com que aquesta es tracta d’una escena interactiva, dos botons seran de nou els elements
que permetran escollir a l’usuari quin camí ha de seguir. Novament, segons l’opció escollida
es continuarà visualitzant el curtmetratge o apareixerà un Game Over que ens portarà de
nou al començament.
Definició continguts:
Tot i que el disseny i l'estructura tenen un paper fonamental per tal d’aconseguir dotar a
Icaria de l’estètica de videojoc desitjada, els continguts assumeixen un paper primordial en
l’elaboració de la web. Aquests els trobem de manera textual i audiovisual, aquests últims
tenen una major importància al tractar-se d’un curtmetratge interactiu.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
73
Text
Pel que fa els continguts textuals són breus i concisos, ja que no es volia saturar a l’usuari
amb informació que ja es sobre entenia o que simplement ja quedava reflectida en la part
audiovisual.
Per aquest motiu el text ha estat emprat bàsicament per una funció purament informativa
que tot i ser addicional és necessària per poder entendre la trama de la història. A més,
aquesta s’ha dividit perfectament en subapartats que ordenen tota aquesta informació i
permeten a l’usuari d’accedir amb facilitat a la informació que l’interessa.
Foto
Per tal de complementar la informació que trobem a la website s’ha fet ús de fotografies,
sobretot pel que fa l’explicació de personatges i de membres de l’equip. D’aquesta manera,
resulta més estètic i agradable per l’usuari l’hora de navegar per la web.
Aquestes fotografies han estat retocades i manipulades segons les necessites de la pantalla
en la qual es troben. Així doncs, s’ha realitzat un acurat i elaborat treball amb photoshop i
atrezzo en el moment de realitzar les fotografies per tal de què aquestes quedin integrades
dintre de la temàtica demanada.
Cal destacar la utilització d’una transformació 3D a l’hora d’escollir quin membre de l’equip
vols conèixer. Aquest dóna cert moviment i vida a la web, ja que es tracta de girar a cada
membre en el moment de passar per damunt amb el cursor , a més de trencar amb la
monotonia de l’estructura.
Finalment a l’apartat “Extres” s’ha inserit una galeria fotogràfica on trobem imatges sobre
els diferents rodatges realitzats per l’elaboració d’Icaria. Aquesta es tracta d’una galeria
JQuery on les fotografies van apareixent realitzant l’efecte slider.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
74
Vídeo
Icària presenta una gran varietat d’estils dintre del propi curtmetratge interactiu. D’aquesta
manera, trobem un seguit de vídeos que tenen l’estètica audiovisual tradicional en un
curtmetratge i d’altra banda uns clips que presenten l’estètica típica dels videojocs.
Per aquest motiu, la seva edició i postproducció no s’ha cenyit únicament a l’ús del Adobe
Premier Cs 5.5, sinó que hem vist la necessitat d’aconseguir l’estètica de videojoc a través
del After Effects i la inserció d’elements interactius través del programa Flash.
Els clips que conformen aquest curtmetratge interactiu han estat inserits a la website
directament pujant-los al servidor fent la interacció necessària en aquest tipus de
curtmetratge a través del Flash. Podríem dir que es tracta d’un curt master a 1920x1080
amb continguts en HD (High Definition) i en un format MP4 perquè és el més ideal per
l’exportació en h.264 .
Aquests clips tenen una durada d’entre 30 segons i 1 minut, i en trobem un total de 23. El
vídeo sencer té una durada de 16 minuts aproximadament però s’ha decidit d’inserir els
clips per separat a la website per tal d’aconseguir una navegació neta i senzilla, de forma
que l’usuari no es trobi cap impediment mentre visualitza el curtmetratge.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
75
Conclusions:
El principal objectiu a l’hora de crear la nostra peça va ser des del primer moment poder
oferir al públic una nova manera de consumir un producte audiovisual creat a partir de la
hibridació d’un curtmetratge i un videojoc, amb un plus d’interactivitat, ja que l’usuari
haurà de participar activament al desenvolupament de la història tot seleccionant en
determinats moments quin camí han de seguir els personatges.
Observant els resultats obtinguts fins aquest moment, ens hem adonat que hem complert
tots els objectius que ens vàrem marcar a l’hora de realitzar la proposta del projecte. D’
aquesta manera, creiem que Icaria compleix tot els requisits per a ser considerat un
producte innovador i molt complert tan a nivell audiovisual com multimèdia.
D’altra banda, cal assenyalar els canvis que el nostre projecte ha anat experimentant al
llarg de la seva elaboració fent que no segueixi de manera fidel i al peu de la lletra la
proposta audiovisual i multimedial realitzada en un primer moment. Especialment, pel que
fa l’estructura i continguts de la web han estat gairebé renovats i canviats al llarg de tota
l’elaboració del producte.
Aquest fet s’ha donat perquè al principi d’establir els paràmetres que havia de seguir i
contenir la nostra pàgina web, no teníem els coneixements que hem anat assumint al llarg
de tot el procés d’elaboració. Tot i això, podem assegurar que els resultats obtinguts fins a
l’actualitat són més dels esperats, ja que finalment hem aconseguit un espai multimedial
més complex i enriquit que el disseny previ a la seva elaboració.
D’altra banda volem destacar que tot i ser un curtmetratge interactiu, Icaria es caracteritza
pel fet que la part audiovisual i multimedial es complementen obligant-nos a treballar i
potenciar per igual ambdues parts per tal d’obtenir els resultats desitjats.
La creació d’una estètica pròpia del videojoc ha estat la part més complicada a l’hora de
produir la peça audiovisual i realitzar la postproducció. Primerament, ha estat difícil
representar un seguit d’escenes en pla subjectiu que semblessin realistes i que recreessin la
sensació de videojoc en l’espectador. D’altra banda, en el moment de realitzar la
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
76
postproducció els nostres coneixements i habilitats amb el software After Effects eren molt
limitats. Degut a això vam acudir a terceres persones que ens han ensenyat i guiat a l’hora
de dur a terme la postproducció. Cal valorar que gràcies a això ara tenim un coneixement
bàsic de com funciona el programa i hem descobert la infinitat de possibilitats que ofereix
per a obtenir un producte audiovisual més potent i atractiu.
Finalment, assenyalar que ha estat un projecte molt complex i complicat en tota la seva
elaboració, però estem contents i orgullosos del resultat obtingut. Cada membre ha posat
de la seva part tots els seus coneixements i opinions pròpies per tal d’arribar a un consens
entre tots els membres del grup i així fer un producte al gust de tothom. Amb moltes ganes
i dedicació hem set capaços d’ocupar-nos de cadascuna de les parts que formen Icaria, i
poder experimentar com es viu el desenvolupament d’un producte audiovisual i multimèdia
d’aquesta magnitud.
Així doncs, podem concloure que Icaria ens ha ensenyat i aportat nous coneixements a
nivell acadèmic, professional i personal.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
77
SISENA PART
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
78
Referents i recursos
Bibliografia
• Vivancos Bermejo, D. : Historia y evolución de la indústria de los videojuegos.
Facultat de Comunicació Blanquerna. Universitat Ramón Llull. Barcelona 2009.
• Contreras, R. : Industria del Videojuego. Universidad Anáhuac. Mèxic 2011.
• Pardo Kuklinski, H. : Geekonomia. Un radar para producir en el postdigitalismo.
Col·lecció Transmedia XXI. Laboratori de Mitjans Interactius / Publicacions i Edicions
de la Universitat de Barcelona. Barcelona 2010.
• Negroponte, N. : El mundo digital. Ediciones B. Barcelona 1995.
• Scolari,C.: Hacer clic. Hacia una sociosemiótica de las interacciones digitales.
Gedisa. Barcelona 2004.
• Gifreu, A.: El domuntal multimèdia interactiu- Una proposta del model d’anàlisi.
[Treball de recerca]. Departament de Comunicació. Universitat Pompeu Fabra.
• Ribas, J.: Caracterització dels interactius multimèdia de difusió cultural. Aproximació
a un tractament específic, els “assaigs interactius” [Treball de recerca], Barcelona:
Universitat Pompeu Fabra. Facultat Comunicació (2000)
• Roush, W.: “Web 2.0’s Startup Fever”. Technology Review, Boston: MIT Press.
Disponible en línia a: http://www.technologyreview.com/web/16688/page2/
Webgrafia
• Xipmulticolor. [ en línia] <http://www.xipmulticolor.com/xip-multicolor-documental-interactiu-i-multimedia-joc-interactiu-neil-harbisson.html> [Consultat: 6 de maig 2012]
• Metamentaldoc multimedia. [en línia] <http://metamentaldoc.com/> [Consultat: 8 de maig 2012]
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
79
• Slideshare. Present Yourself. [en línia]
<http://www.slideshare.net/guest791260/historia-de-los-videojuegos> [Consultat: 5
de juny 2012]
• Retro Informática. El pasado del Futuro. [en línia] <http://www.fib.upc.edu/retro-
informatica/historia/videojocs.html> [ Consultat: 5 de juny 2012]
• W3schools [en línia] <http://www.w3schools.com/html5/html5_video.asp> [Consultat: 5 de juny de 2012]
• Fundibeq[en línia] <http://www.fundibeq.org/opencms/export/sites/default/PWF/downloads/gallery/methodology/tools/diagrama_de_flujo.pdf> [Consultat: 6 de juny de 2012]
• Scribd [en línia] <http://es.scribd.com/doc/550264/Que-es-web-10> [Consultat 11
de juny de2012]
• García Aretio, Lorenzo (2007). ¿Web 2.0 vs web 1.0? [en línia]
<http://ddd.uab.cat/pub/dim/16993748n10a4.pdf> Editorial BENED [Consultat:11
de juny de 2012]
• Maestros del web [en línia] <http://www.maestrosdelweb.com/editorial/web2/>
[Consultat:12 de juny de 2012]
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
80
ANNEXOS
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
81
DELIVER ME TO HELL
(www.youtube.com/watch?v=9p1yBlV7Ges)
1. Deliver me to Hell 2. Curtmetratge interactiu sobre zombies realitzat per LittleSister Films
Produccions 3. Obert 4. 2011 5. Anglès 6. Anglaterra. www.littlesisterfilms.co.nz /
[email protected]: 021 242 2550
Justificació: L’ambientació basada en el món dels videojocs i la interactivitat utilitzada al llarg
de tot el curtmetratge el fan un gran referent audiovisual per el nostre treball.
Descripció del contingut:Deliver me to Hellés un curtmetratge interactiu que entraria dintre
del gènere de ficció i humor. Aquest tracta sobre una ciutat la qual està envaïda per zombis i
un pizzer es l’encarregat de matar-los. Com a última missió ha de salvar la vida a una noia la
qual es troba en perill de ser menjada pels zombis. A través d’una interactivitat estipulada en
l’estructura del curtmetratge l’usuari podrà escollir el camí ha seguir per part del protagonista
per tal de salvar-la.
Punts forts:
1. L’Atmosfera creada durant tota la trama de la història li donen l’aparença d’un
videojoc, com per exemple el color i la tipografia utilitzades en el grafisme.
2. Escenaris utilitzats per a realització del curtmetratge.
3. Utilització de la càmera ràpida per tornar enrere quan l’espectador ha escollit el
camí equivocat en la interactivitat i que l’ha portat a la mort.
Punts febles:
1. Ambientació aconseguida massa còmica fent-li perdre la serietat que nosaltres
volem aconseguir en la nostra història.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
82
2. Tot i que alguns personatges estan molt ben aconseguits no deixen de seguir els
tòpics més habituals del món audiovisual. A més, aquests no presenten un passat
elaborat que ajudin al l’espectador a entendre el personatge.
Elements a tenir en compte en el nostre projecte:
La interactivitat amb què es desenvolupa tota la trama de la història és un element clau per
a la realització del nostre projecte. Per aquest motiu, hem escollit aquest curtmetratge
perquè utilitza el recurs de la càmera ràpida per tornar un altre cop al punt d’inici de la
interactivitat un cop l’espectador s’equivoca en l’elecció provocant la mort del
protagonista. D’aquesta manera, nosaltres hem solucionat el problema de realitzar una
estructura tant complicada quan la història es presenta amb més d’una trama.
Screenshot del curt:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
83
LEFT FOR DEAD
(www.youtube.com/watch?v=80nZ5b_DKms)
1.Left for dead 2. Curtmetratge interactiu dirigit per LaynePavoggi basat en el videojoc Left
4 Dead 3.Obert 4. 2011 5. Anglès 6. Estats Units
Justificació:es tracta d’un projecte semi professional molt semblant al nostre. Tot i que la
trama de la peça s’allunya molt del nostre projecte, ens hem fixat en la interactivitat que
presenta i la manera de narrar el film. Aspectes de la realització com colors i efectes
especials ens el fan escollir com a exemple a tenir en compte.
Descripció del contingut: curt interactiu basat en un videojoc preexistent. Es tracta d’un
videojoc en el qual el món està infectat per zombies i els personatges ha de mirar de no ser
caçats i devorats per aquests. Hi ha quatre personatges protagonistes.
Punts fort:
1. Al tractar-se d’un curt interactiu basat en un videojoc preexistent, el públic
està familiaritzat amb la història narrada així com amb els personatges.
2. La banda sonora escollida dona ambient i ritme a les imatges. Usen música
electrònica que crea un ritme ràpid i neguitós, per la qual cosa fa alertar al
públic que algun problema els rodeja.
3. El logotip de la marca és simple. Inclou la taca de sang que indica que el joc
conté sang i escenes de violència.
4. Amb uns recursos no excessius aconsegueixen fer un producte de qualitat.
Punts febles:
1. Crec que no mostren amb prou claredat la interactivitat que presenta el
curtmetratge en la primera part. Per a un usuari no familiaritzat amb
opcions com aquestes, el fet que cap gràfic informatiu no els avisi que han
d’escollir una opció pot fer-los perdre.
2. El fet que no hi hagi un final definit decepciona a l’espectador. Tres de les
quatre opcions per escollir condueixen a la mort dels protagonistes, però la
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
84
opció que en teoria és la bona no té un final tancat i simplement en
proposen de tornar a jugar.
3. Es trenca el fil de la història entre els possibles vídeos. Un cop s’acaba una
de les opcions dolentes, no hi ha cap estratègia per a tornar a l’inici i
escollir una opció nova.
4. Els anuncis presents entre vídeo i vídeo penjat a Youtube trenquen la
interactivitat.
Elements a tenir en compte per al nostre projecte web:
La banda sonora que acompanya tot el producte audiovisual ajuda a desenvolupar els
esdeveniments. És una banda sonora que en molts casos intensifica tota la part sensitiva de
les imatges.
Els efectes especials no són espectaculars, però acceptables per a un producte que té un
pressupost bastant semblant al nostre.
La interactivitat proposada en el curt interactiu és la mateixa que la que nosaltres oferirem
al nostre producte. Nosaltres però, donarem la possibilitat d’escollir el camí a seguir fins a
tres vegades.
Per tal de no caure en l’error que ells han comès, nosaltres incorporarem gràfics que
ajudaran a comprendre la interactivitat, i una veu en Off narrarà el perquè de la mort.
Screenshot del curt:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
85
MINDSTORMING
(http://www.mindstorming.tv/es/)
1. Mindstorming 2. Mostrar a l’espectador les dues bandes d’una mateixa cosa, en aquest
cas els pensaments de l’home i de la dona en una mateixa situació. Tot mitjançant
l’element interactiu de la fletxa que et permet escollir quina banda vols escoltar. 3. Es
tracta d’una plataforma oberta a tothom. 4.: 2010 5. Castellà i anglès 6.:
[email protected] / Facebook i Twitter.
Justificació: Es tracta d’una web amb un contingut audiovisual que en certa manera és
interactiu. Està bé veure com plantejen la interfície del producte i com treballen aquesta
interactivitat.
Descripció del contingut: Es tracta d’una web on hi apareix el contingut audiovisual al
centre. Al marge dret hi ha un menú on es plantejen tres opcions que fan referència al
contingut del vídeo (la red social, la ruptura i la ex pareja). Al marge esquerre hi ha unes
pestanyes que fan referència al projecte general, és a dir, qui l’ha fet, la idea que vol
transmetre el producte i una proposta per als usuaris. A sota hi apareix un cervell amb una
fletxa, al costat dret el símbol femení i a l’esquerra el masculí, aquesta fletxa es pot moure.
Punts forts:
Els colors i les formes són adequades als continguts. Són colors vius, desenfadats que
s’escauen molt bé amb l’humor que transmet la pàgina, també té un disseny del text molt
bàsic, senzill i juvenil, com els personatges i tot l’ambient recreat. La dimensió de la pantalla
és la correcta per tal de que a sota i càpiga l’element interactiu.
Tots els continguts audiovisuals són interessants.
D’altra banda és molt interessant l’interactivitat que han afegit al vídeo, permetent en
qualsevol moment a l’usuari sentir els pensaments de qui vol i, per tant, incita a veure i
sentir el vídeo diverses vegades per escoltar les dues versions. També està bé que es pugui
compartir a les xarxes socials i que es pugui escoltar en dos idiomes, és una forma més
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
86
d’expandir-se a més llocs. A més a més que et deixin utilitzar les imatges sota llicència de
CreativeCommons i et deixin elaborar el teu Mindstorming és una bona idea per a que
l’usuari també hi participi.
Els vídeos es carreguen de forma bastant ràpida, només cal esperar uns segons. Tots els
enllaços funcionen bé i també hi ha un enllaç a una altra pàgina però no de la mateixa
temàtica.
Punts febles:
L’estructura de navegació és bastant intuïtiva, al principi costa adonar-se de que hi ha les
tres versions d’un mateix vídeo degut a que si canvies de pestanya a l’esquerra les de la
dreta desapareixen, a més al vídeo s’explica que és un mindstorming però no que hi hagi
tres parts. En general l’estructura s’adequa a les necessitats de comunicació.
Els continguts textuals són poc interessants. Hi ha dos apartats que no són necessaris (“la
idea” i “el equipo”), la idea està explicada massa llarga i no és necessari tot un apartat per
aquesta, l’equip ja surt als crèdits finals del vídeo, no interessa llegir tota una pestanya
sobre qui ha fet què.
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
87
EL PADRINO 2
(www.youtube.com/watch?feature=player_embedded&v=GVFCOIlKuIQ#!)
1. El Padrino 2 2. Videojoc de Sandobox basat en la seguna entrega cinematogràfica del
Padrino. 3. Obert 4. 2009 5. Anglès 6. Estats Unitswww.ea.com
Justificació: Tal i com nosaltres volem aconseguir aquest videojoc combina de forma
magistral llum i ombres i tracta de manera acurada el joc d’espais antagònics. Aquest seguit
de fets l’apropa al món mafiós i ajuda als personatges a guanyar personalitat.
Descripció del contingut: Videojoc basat en la segon apart de la famosa pel·lícula de Francis
Ford Coppola , TheGodfather. Aquet representa el món fosc de la màfia italiana a través de la
família Corleone la qual domina tot el crim de la ciutat de Nova York durant els anys 40.
Punts forts:
1. L’ambientació i la temàtica utilitzada en aquest videojoc.
2. L’estètica que combina espais foscos i misteriosos amb espais colorits i
alegres propis del món obscurs de les màfies als Estats Units.
3. El tractament de llums i ombres que se li donen als personatges per tal de
caracteritzar-los.
4. Canvis de música segons la interfície en la qual es troba l’usuari.
Punts febles:
1. Aquest videojoc presenta moltes carències a l’hora de permetre a l’usuari
utilitzar objectes o moure’s pels carrers de Nova York i Miami.
2. Aparició de punts negres que falsifiquen les ambientacions i els recursos
que permeten desenvolupar tota la trama de la història.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
88
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
89
1.Dave Chapelle 2. Simulació d’una partida de videojoc emesa al programa humorística fet
per DaveChapelle 3. Obert 4. 2011 5. Anglès 6. Estats Units
Justificació: simulació d’una breu partida de videojocs que conté elements que nosaltres
també integrarem en el nostre projecte.
Descripció del contingut: un presentador de la televisió nord-americana, emet en el seu
programa humorístic la reproducció d’una mini-partida d’un videojoc.
Punts forts:
1. Realització treballada. Varietat de plans.
2. Integren elements propis d’aquest videojoc, com el mapa de localització del
personatge o els objectes dels quals disposa el protagonista.
3. Els moviments dels personatges no són fluids per ressaltar encara més que es tracta
d’un videojoc.
4. L’ús dels so de l’arma disparada són un pèl exagerats, però molt adients per
remarcar que es tracta d’una simulació humorística d’un videojoc.
5. Usa tècniques pròpies del videojoc com l’elecció de l’arma que el protagonista dur.
Punts febles:
1. Tot i voler representar un videojoc, la imatge no té cap tipus de retoc en la
postproducció ni han usat cap mena de filtre.
Elements a tenir en compte en el nostre projecte :
Com que nosaltres també volem representar una simulació de videojoc, integrarem al
nostre projecte tots els gràfics que el vídeo incorpora. Aquests elements gràfics seran
present al llarg de tot el curt, d’aquesta manera recordarem constantment a l’usuari que
està visualitzant una simulació e videojoc.
Els sons usats també serà un altre dels elements a incorporar. Que els efectes sonors siguin
creïbles i vagin sincronitzats amb el què estem veient, ajuden a comprendre el vídeo.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
90
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
91
7. Menú general sempre visible.Per exemple, nosaltres volem que el jugador vagi
descobrint l’entramat de la historia a través de les pistes que se li aniran oferint al
llarg de la simulació.
Punts febles:
1. La temàtica del joc s’allunya molt de la nostra proposta.
2. Cada vegada que apareix un nou element amb informació obligatòriament l’hem de
consultar.
Elements a tenir en compte per al nostre projecte:
La nostre interfície web també tindrà un vídeo introductori a mode de tràiler, és interessant
per aquelles persones que no el vulguin veure, incloure una pestanya amb la possibilitat de
saltar-se el vídeo i entrar directe al contingut.
El menú sempre visible també és un altre dels elements interessants. El disposen de tal
manera que deixen prou espai a la part superior de la pantalla, com per no haver de treure
el menú.
Els gràfics constants són molt útils per indicar els passos a fer cada moment. A més dels
gràfics indicatius, els elements que aporten informació addicional donen un plus al joc en
general. Tot i la quantitat d’elements que integren al joc, nosaltres no pararem l’acció quan
aparegui un element amb informació extra. D’aquesta manera aconseguirem que el joc
sigui fluid i que si un usuari no vol veure la informació complementària pugui gaudir del joc.
Screenshot de la we
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
92
GRAND THEFT AUTO IV
(http://www.rockstargames.com/IV/)
1. Rockstar Games.2. Fer campanya publicitària sobre el videojoc i a més oferir DLC’s
(Download contents) per aplicar a la mateixa interfície. 3. Oberta a tots els usuaris 4. 2011
5. Anglès.
Justificació:He decidit escollir aquesta web, perquè GrandTheft Auto és un dels principals
referents alhora d’idear continguts per al nostre projecte. Per aquest motiu, m’ha semblat
interessant analitzar la seva web i veure com han traspassat la informació del joc per
presentar-la al usuari mitjançant un website.
Descripció del contingut: Aquest entorn web està constituït per 3 apartats principals:
People& Places, on l’usuari té a possibilitat de veure vídeos descriptius dels personatges i
alhora imatges que contextualitzen al usuari en l’entorn en el que es mouen cada un
d’aquests personatges. Recreation&Entertainment on podem recórrer cada un dels espais
del videojoc dedicats al oci com ara clubs de striptease o discoteques entre d’altres, i
finalment l’apartat de Goods& Services on trobem material interactiu sobre serveis com ara
lloguer de vehicles, màquines expenedores i altres serveis que apareixen al videojoc.
A més a més, tenim diverses opcions al menú inferior que ens permeten obtenir notícies,
tràilers, wallpapers, música i gran varietat de continguts. Un altre aspecte a destacar és que
compta amb un accés directe a la comunitat virtual de Rockstar Games on els jugadors
poden consultar informació sobre tots els jocs desenvolupats per la companyia i alhora és
possible posar-se en contacte a temps real amb altres usuaris gràcies al apartat de
MessageWall.
Punts Forts:
1. Gran potencial estètic.
2. Entorn web totalment fidedigne a la línia del videojoc.
3. L’usuari pot consultar informació que després pot fer servir al joc.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
93
4. Fàcil navegació.
5. Gran varietat de continguts.
6. Agilitat alhora de carregar-se els continguts.
7. L’usuari pot descarregar multitud de continguts que pot aplicar a la vida real com
ara widgets per a mòbil.
Punts Febles:
1. L’entorn està pensat per gent que ja és usuària de GrandTheft Auto 4, no intenta
captar altres usuaris mitjançant ningun reclam.
2. La pàgina oficial del joc està totalment feta en anglès, no s’adapta a les necessitats
del usuari.
3. Poca interacció amb les xarxes socials.
4. Al principi no es pot desactivar el so.
Elements a tenir en compte pel projecte web:
Hem de procurar adaptar la web per a qualsevol tipus d’usuari, com el que ja hagi consumit
el nostre producte com el que encara no ho ha fet. Això ho podem aconseguir afegint
continguts a la web que l’usuari pugui fer servir posteriorment en el videojoc, per exemple,
en el nostre cas, durant el desenvolupament del joc es plantegen decisions que l’usuari ha
d’encertar per passar al següent nivell, així doncs a la web pot haver-hi petites descripcions
dels nivells que donin algunes pistes per tenir èxit en la missió. Respecte als usuaris que són
amateurs alhora de consumir el nostre producte, hem de procurar cridar la seva atenció, i
provocar que realment vulguin provar la nostra simulació.
Per altra banda, connectar la web del producte i per extensió el mateix producte a les
xarxes socials és fonamental per obrir mercat. Amb les xarxes socials obtenim una millor
difusió del producte.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
94
Screenshots de la web:
NEAVE INTERACTIVO
(http://neave.com/es/)
1. NeaveInteractivo 2. Vèncer les barreres tecnològiques i fer el món digital més amigable,
divertit i humà. Es tracta d’una zona digital de jocs on l’artista Paul Neave comparteix els
seus jocs i eines interactives. 3. Obert a tothom. 4. 1999 5. Castellà, anglès i portuguès. 6.
via Twitter o enviant un missatge.
Justificació: Web amb el contingut principal i en moviment al centre. Amb una proporció
similar a la que podem aplicar al nostre producte. El menú de navegació també ens pot
interessar. És totalment interactiva per això cal veure com treballa aquesta interactivitat
amb l’usuari.
Descripció del contingut Es tracta d’una web amb temàtica més aviat artística i de jocs. Hi
podem trobar jocs molt novedosos o jocs molt anics com el tetris. També diverses
aplicacions interactives relacionades amb l’art.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
95
Punts forts
El color de fons és fosc i fa destacar la zona interactiva que va canviant de color, sempre
vius i amb sanefes. Les dues fletxes et marquen el recorregut i van mostrant-te els jocs
possibles. Si entres en un d’aquest ocupa dos terços de la pantalla mentre que el terç
restant queda restant per al menú amb la resta de jocs en finestretes petites. A dal hi ha un
altre menú amb l’opció de tornar a l’inici, compartir-ho al Facebook / Twitter o seguir-lo. La
usabilitat i la navegació són molt intuïtives, fàcils i agradable.
Es tracta de jocs molt coneguts (Tetris, Simón, Serpiente), alguns no, però tots molt senzills,
així inciten a jugar. Tot el contingut és audiovisual excepte una breu explicació de cada joc
que t’apareix abans de jugar.
Tots els links funcionen correctament. Tots els jocs es carreguen molt ràpid i la proporció de
la pantalla per jugar és la més adequada.
Punts febles
Pot mantenir-se sense actualitzar durant un temps, fins que l’artista vagi creant els nous
jocs o noves obres.
Screenshot de la pantalla
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
96
THE THING
(http://www.thethingthemovie.net / http://www.quieneslacosa.es)
1. TheThing. 2.Fer campanya publicitària sobre el producte audiovisual. Actua com a node
d’informació i d’entreteniment. 3.Oberta a tots els usuaris 4. 2011 5. Castellà, Anglès,
Francès i Alemany 6. Facebook i Twitter.
Justificació: Aquest website és d’una pel·lícula que es troba per estrenar. He decidit
prendre com a punt de referència aquesta web per tal de poder veure com es planteja
l’entorn per un producte que encara està per sortir a la llum. Crec que això es adaptable al
nostre projecte.
Descripció del contingut: Es tracta d’un entorn web de gran impacte visual. Està constituït
per un simple menú on trobem les següents pestanyes: Pel·lícula, Fotos, Vídeos i
Descàrregues. Al primer apartat trobem una sinopsi de la pel·lícula. Al segon apartat fotos
en alta resolució. En el tercer trobem el tràiler oficial i finalment al últim apartat podem
descarregar-nos wallpapers i avatars.
Tanmateix, la web ens proporciona una enllaç directe que ens redirecciona cap a una
pàgina on podem descarregar-nos un joc que segueix la línia de la pel·lícula, el jugador a de
casar l’alienígena (Thething). Finalment a la pantalla principal tenim signes d’exclamació
interactius que ens permeten accedir a escenaris on descobrir peces d’informació sobre
l’argument de la pel·lícula.
Punts Forts
1. És una web molt atractiva visualment.
2. Incorpora elements en moviment que donen dinamisme a la web.
3. Està molt ben vinculada amb les xarxes socials, fet molt important per donar a
conèixer el producte.
4. S’incorporen fragments de pel·lícula al canviar d’una opció del menú a l’altre, això
provoca curiositat en l’usuari que visita la web respecte a la pel·lícula.
5. La pàgina web en si es un joc.
6. Té molts elements interactius.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
97
7. La música de la web crea un gran clima de tensió.
Punts Febles
1. Requereix molt temps de càrrega segons el contingut. No obstant, es pot
apreciar el percentatge de càrrega fet que soluciona una mica el problema.
2. A l’apartat de vídeos només hi ha el tràiler i l’usuari ja el veu només entrant
a la web.
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
98
YOBADAZ
(http://www.yodabaz.com/)
Justificació:elecció de la pàgina web per el seu disseny a nivell general.
Descripció del contingut: la web Yobadaz, és el portfolio d’un jove dissenyador online. A la
web podem veure els projectes que aquest noi recentment ha dut a terme, a més
d’informació sobre la seva persona, un mail de contacte, fotografies que ha fet i links
d’interès.
Punt forts:
1. El comptador que indica que s’està carregant la pàgina és dinàmic i diferent als
altres.
2. Ràpida de carregar-se, l’usuari no s’ha d’esperar massa.
3. Està poc carregada d’elements, és visual i clara.
4. Imatge dinàmica de fons de pantalla que omple un espai tant minimalista i auster.
5. La interfície és sensible al mouse i al moure’l, la pàgina també es mou.
6. En el contingut de fotos, la transició de passar del primer nivell al segon es fa a
través d’una taca negra que al final ocupa la totalitat de la pantalla.
7. En la pestanya portfolio, quan es selecciona un element a visualitzar la resta cau i
desapareix. Manera de fer aparèixer i desaparèixer dinàmica.
8. El menú és sensible al ratolí, i quan aquest es posa damunt d’un element els altres
elements es difuminen.
Punts febles:
1. La web no té res a veure amb el nostre projecte , però és interessant per la
manera que té de disposar els elements a la pantalla i la manera com els fa
aparèixer i desaparèixer.
2. La galeria de fotografies es carrega un pèl lenta.
3. No conté cap vídeo, cosa que ens hauria anat molt bé per poder veure de
quina manera els disposava a la interfície.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
99
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
100
CINEMA PRODUCCIONES
(www.cinemaproducciones.es)
Justificació: L’estètica en general de la web ens ha semblat adequada com a referència per ha
realitzar la part multimèdia del nostre projecte. A més, la presentació ordenada i clara dels
vídeos que hi apareixen també és un punt fort d’aquesta productora.
Descripció del contingut: Web realitzada per una petita productora independent espanyola
per tal de promocionar-se. Aquesta web presenta una interfície molt senzilla i esquematitzada
on l’usuari pot percebre des de la primera impressió quins són els treballs que ha realitzat la
productora. Així doncs, aquesta està formada per una pàgina principal on trobem tres
apartats: Portfolio,Nosotros i Contacto. A continuació, apareixen tots els projectes realitzats els
quals et porten directament a un vídeo de Vimeo on es mostra el respectiu treball i les
diferents xarxes socials que té la productora. Cadascun dels apartats anomenats anteriorment
et porten de manera ràpida i senzilla als continguts corresponents.
Punts forts:
1. Disseny de la interfícieamb els colors utilitzats i la distribució dels diferents aparts
que la composen.
2. Els vídeos promocionals de la productora estan presentats d’una manera molt
professional tant per la qualitat que ofereix Vimeo com per la possibilitat de fer
més gran el vídeo sense tenir la necessitat de saltar de pantalla.
3. Apartat Contactoés molt intuïtiu i directa facilitant la comunicació amb l’usuari.
Punts febles:
1. No coneixem quins són els integrants d’aquesta productora, ja que únicament en
l’apartat Nosotros ens fa un petit tast de quines són les diferents especialitats i la
seva feina a trets generals.
2. Pel que fa els seus serveis únicament inclou el nom sense especificar quins criteris i
estils segueixen.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
101
Elements a tenir en comptepelprojecte web:
La manera com aquesta web presenta els seus vídeos resulta molt interessant pel nostre
projecte. El fet de no haver de saltar de pàgina cada cop que és vol visualitzar un vídeo resulta
molt interessant i fa que la web guanyi en senzillesa. D’altra banda, la seva manera de
contactar amb els usuaris és molt senzilla a través de l’apartat Contactos . Tot aquest seguit de
característiques li aporten un aire seriós deixant entre veure que el seu públic objectiu ha de
tenir un perfil professional i audiovisual.
Screenshot de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
102
MEGACONSOLAS
(www.megaconsolas.com)
Justificació: Una bona distribució i una fàcil accessibilitat per part de l’usuari a les diferents
parts que formen la interfície justifica la nostra elecció d’aquesta web per a la realització del
nostre projecte.
Descripció del contingut: Web relacionada amb el món dels videojocs on es mostra
detalladament opinions, noticies i últims esdeveniments relacionats amb aquest món. Aquesta
web presenta un gran nombre d’apartats per tal de facilitar l’elecció del contingut al qual vol
accedir l’usuari. D’aquesta manera, trobem un menú central que es va renovant constantment
i podem trobar les últimes actualitzacions realitzades a la pàgina com noticies i futurs
esdeveniments. D’altra banda, un menú lateral ens mostra diferents apartats on s’ordena de
la millor manera possible la gran quantitat d’informació que disposa la pàgina com seccions,
opinions, webs preferides, blocs i articles.
Punts forts:
1. Renovació constant de la web amb molta informació sobre el món dels videojocs.
2. Bona distribució i fàcil accessibilitat per part dels usuaris als diferents apartats que la
formen.
3. Possibilitat de contactar amb ells a les diferents xarxes socials i de visitar les webs
relacionades.
4. Bona presentació de l’equip que forma part de la redacció.
5. Possibilitat de linkar la pàgina.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
103
Punts febles:
1. Disseny de la interfície és massa senzill i carregat tot i que els diferents elements que
conformen la web es troben ben distribuïts.
2. Mostra dificultats a l’usuari a l’hora de contactar amb ells perquè primer han d’omplir
un formulari de seguretat.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
104
JMP STUDIOS
(www.jmpstudios.es)
Justificació: La manera amb la que es presenten dintre de la web els diferents professionals
que formen part d’aquesta productora és el motiu més precís per a justificar l’elecció
d’aquesta pàgina.
Descripció del contingut:Web on ens mostra els treballs,especialitats i característiques d’una
petita productora independent espanyola. Aquesta presenta una interfície més elaborada
perquè esta composada per diversos apartats i subapartats. Aquesta ens presenta a la
productora JMP Studios a través d’una selecció fotogràfica, un vídeo corporatiu de l’empresa,
una selecció dels projectes realitzats i una explicació escrita de quin és el treball que realitzen.
A més, hi ha ha un apartat on s’incorpora un llibre de presentació realitzat íntegrament amb
flash.
Punts forts:
1. Presentació detallada dels diferents perfils professionals de la productora.
2. Utilització de diferents recursos com imatges i vídeos per presentar els seus projectes.
3. Explicació tan escrita com visual de tots els continguts web.
4. Realització d’un mapa web que mostra l‘esquelet de la web.
Punts febles:
1. Disseny de la web molt senzill i poc professional per estar enfocada al món audiovisual
i multimèdia.
2. No ens interessa cap dels recursos utilitzats pel disseny de la web.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
105
troba la productora i l’ús d’un mapa web que serveix com a índex de la pàgina proporcionar
moltes facilitats a l’usuari.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
106
divideix la web, també realitzats utilitzant els recurs del JQuery, els quals són:
Whoarewe?,Whatch us in Youtube , Whatchthe tràiler now, Visitthe Store now i New iPadApp.
Punts forts:
1. Estètica utilitzada per a realitzar la interfície de la web.
2. La presentació en Jquery de la pàgina principal
3. A l’apartat Find uses troba molt detallada tota la informació que l’usuari pot rebre
sobre les xarxes socials i plataformes que integren la web.
Punts febles:
1. Necessitat d’entrar al portal YouTube per tal de visualitzar un machinima.
2. S’ha de destacar que al ser Youtube els videos no es troben amb la mateixa qualitat i
professionalitat que per exemple si estiguessin a Vimeo.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
107
DONyYET
(www.youtube.com/watch?v=hhKA6yuq85Q&feature=related)
Justificació:L’utilització de filtres de colors dintre de les escenes, el tractament que aquest fa
de la llum i la música amb canvis bruscos de les diferents escenes justifica la decisió d’incloure
aquest curtmetratge com un referent.
Descripció del contingut: Curtmetratge que es troba en el portal de YouTube realitzat per la
productora Ciudad de la Sombra. Aquest ens mostra una festa realitzada per Don i Yet a la
platja junt els seus companys malabaristes. Aquest utilitza la música i veu en off per a explicar
la trama de la història. A més, una sèrie de filtres i el recurs de blanc i negre li aporten
creativitat i personalitat al curtmetratge.
Punts forts:
1. Cromàtica utilitzada en les seves escenes on barreja els colors saturats i la llum natural
amb una sèrie de filtres que subtilment van apareixent a mida que avança la història.
2. Canvis bruscos de música i colors color tal i com nosaltres volem realitzar en el nostre
curtmetratge interactiu.
Punts febles:
1. L’estructura i trama de la història no té cap tipus de relació amb el nostre projecte.
2. Alguns dels personatges que apareixen al llarg de la història són molt plans i no
presenten cap tipus de personalitat ni evolució.
3. Hi ha escenaris que no són els adequats per l’ambientació i atmosfera que vol crear
la trama de la història.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
108
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
109
CIUDAD DE LA SOMBRA
(http://ciudaddelasombra.net/category/producciones/)
Justificació: L’animació en flash de la pàgina d’inici amb tots els treballs de la productora i la
manera amb la qual presenta les diferents produccions és molt adequat i li dóna l’aire seriós i
professional que nosaltres també busquem en el nostre projecte.
Descripció del contingut:: Web realitzada per una petita productora espanyola anomenada
Ciudad de la Sobra. En la pàgina principal podem trobar alguns vídeos de les seves últimes
produccions i els diferents apartats en què es divideix el contingut de la web: Inicio, Trabajos,
produccionespropias,, talleres, #masterDIWO i Sobre nosotros.
Punts forts:
1. Distribució de tots els apartats a través de la interfície de la web és molt adequada.
2. L’animació en flash de l’inici on es mostren els projectes permet a l’usuari fer-se una
primera impressió del col·lectiu.
3. Els colors i la tipografia utilitzada li donen un aire professional i seriós a la web.
4. L’apartat ProduccionesPropias és molt interessant per la manera com presenta i
distribueix totes les projeccions.
Punts febles:
1. No dona a l’usuari gaires alternatives per poder contactar amb la
productora.Únicament apareixen dues xarxes socials on els pots seguir, en lloc figura el
correu electrònic ni un telèfon de contacte.
2. L’apartat de ¿Quiénsomos? És molt limitat, ja que deixa al client sense referències de
qui són els encarregats de realitzar els treballs.
Elements a tenir en compte pel nostre projecte:
D’aquesta web ens interessa especialment com presenta els projectes en la pàgina inicial.
Nosaltres també volem aconseguir que els vídeos es puguin visualitzar sense la necessitats
d’haver de canviar de pàgina o obrir una nova pestanya. Així doncs, aquest a través d’una
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
110
finestra que apareix a sobre de la pàgina permeten visualitzar el vídeo d’una manera còmode i
a més molt professional.
Screenshot de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
111
JUST CAUSE 2
(http://www.youtube.com/watch?v=ZJtP24Ij7ZM)
Justificació: D’aquest videojoc hem recollit la manera amb la qual un color vermell senyala
que el personatge principal és ferit o mort. D’altra banda, els elements que apareixen per
ajudar a l’usuari a moure’s per la interfície justifiquen l’elecció d’aquest.
Descripció del contingut:Just Cause 2 és un videojoc d'acció desenvolupat per l'empresa
sueca AvalancheStudios i publicat per Eidos Interactive i SquareEnix.. L'acció, així com la trama,
es desenvolupa en la fictícia illa paradisíaca de Panau. El protagonista ésRico Rodríguez, l'agent
més qualificat i perillós de l'Agència, que és enviat a Panau per eliminar a un agent dissident
refugiat a l'illa.
Punts forts:
1. Utilització d’objectes per facilitar la jugabilitat a l’usuari com una brúixola que indica
on es troba el protagonista .
2. Cada cop que el protagonista és disparat la pantalla assoleix un color vermellós per
indicar que ha estat ferit.
Punts febles:
1. Falta de música que creï una ambientació més potent en el videojoc i que desperti en
l’usuari una sensacions determinades.
2. La llum utilitzada tampoc és l’adequada, ja que és massa brillant i potent la qual cosa
no és la pròpia dels videojocs d’aquest gènere.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
112
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
113
2. Utilització d’elements dintre de la pantalla per permetre a l’usuari escollir les accions i
moviments que haurà de realitzar el protagonista.
3. Aparició a l’inici de cada pantalla dels objectius que aquest ha de complir.
Punts febles:
1. Visió massa tètrica i fantasmagòrica de la ciutat de Manhatan. Aquest utilitza colors
massa foscos i molt poca llum per tal d’aconseguir crear l’atmosfera pròpia del còmic
que interpreta. Aquesta ambientació no és l’apropiada pel nostre curtmetratge, ja que
volem aconseguir crear uns escenaris que proporcionin a l’espectador una sensació més
realista.
2. Utilització d’un seguit de plànols massa tancat i juga molt poc amb aquests.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
114
MARK ECKO
(http://www.marcecko.com)
Justificació: he escollit aquest entorn web, ja que està dissenyat amb flash. Té una
presentació dels elements damunt de la interfície molt visual i interessant. El fet que el
primer nivell sigui una superfície amb fotografies, i que al moure el ratolí la web es desplaçi
seguint el moviment m’ha fet recordar a com volem presentar nosaltres també el nostre
primer nivell. A més, el disseny és molt elegant.
Descripció del contingut: el contingut de la web està presentat dues vegades, una a través
d’imatges que duen un títol i l’altre a través d’un menú principal que es desplega de la part
superior de la pantalla. Si s’escull navegar a través de les imatges, l’usuari prem damunt la
imatge. A questa la dur a un segon nivell amb el contingut específic. Si s’escull navegar a
través del menú que es desplega de la part superior, al moure el cursos per damunt dels
diferents títols, aquests tenen un hover. Apareix un contorn de color amb una imatge.
Punts forts:
1. Es carrega ràpidament, no fa esperar a l’usuari.
2. La pàgina té un menú molt visual.
3. Si l’usuari no sap navegar a través del menú en imatges té un menú més fàcil per a
usuaris no experimentats.
4. Té un buscador per agilitzar la cerca a través de la web.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
115
Punts febles:
1. La pàgina presentada no té res a veure amb el projecte que nosaltres
desenvoluparem, però estar bé veure quines opcions et permet el flash.
2. No integra ni vídeo ni audio.
3. Molt del contingut presentat està allotjada en una pàgina externa.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
116
Descripció del contingut: tràiler de la pel·lícula Crank. En aquest es pot veure diversos
elements estètics del film que nosaltres volem incorporar a la nostra peça audiovisual, la
qual anirà integrada a la part multimèdia del projecte.
Punts forts:
1. La manera de com treballen la textura i el color de les imatges és interessant. A
l’hora d’anunciar la interactivitat voldríem usar aquesta saturació del color de
les imatges.
2. La banda sonora del film també és molt interessant, ja que ajuda a mantenir la
tensió a la trama.
3. L’ús de la pantalla partida també serà un altre dels recursos tècnics que farem
servir per al nostre curtmetratge.
Punts febles:
1. Nosaltres no disposem de tant pressupost com la pel·lícula esmentada. Els recursos
dels quals disposem són limitats.
2. La nostra experiència en la producció i la realització audiovisual encara està per
madurar. Amb el pressupost i els recursos dels quals disposem, i amb tot l’esforç
del món, intentarem de fer un producte el més atractiu visualment
possible.Elements a tenir en compte pel projecte web:
La temàtica del nostre producte audiovisual ens obliga a fer un muntatge picat, retoc de
colors i jugar amb la llum. De la pel·lícula Crank, integraríem el retoc de color, en alguns
casos a través de la saturació. També muntarem certes part del nostre projecte amb un
ritme marcat i ràpid. Per últim l’ús de la pantalla partida en una escena concreta és un altre
dels recursos tècnics que incorporarem.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
117
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
118
Punts febles:
3. La temàtica s’allunya del nostre projecte
4. Disposen de molts recursos.
5. Molta experiència en el camp audiovisual .
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 :
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
119
THE FIGHT CLUB
(http://www.youtube.com/watch?v=kgNF7_EWEZo)
Justificació:banda sonora que prenem com a referència per a crear la nostra pròpia.
Descripció del contingut: En aquest vídeo podem escoltar un dels temes que formen part
de la banda sonora original del film “Thefight club”.
Punts forts:
1. Música creada expressament per el producte.
2. Crea ambient i ajuda a avançar la història.
Punts febles:
1. No podem comprar els drets intel·lectuals de la música que ens agradi.
2. No tenim prou coneixement musical per a poder-nos crear la banda sonora.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
120
PWNISHER
(http://www.youtube.com/pwnisher#p/u/3/dZ4FGm9Fwvg)
Justificació: es tracta d’un curtmetratge inspirat en un videojoc ja existent.
Descripció del contingut: Es tracta del perfil del canal Youtube de Pwnisher. Pwnisher és el
sobrenom d’un jove creador audiovisual. El seu canal conté varis vídeos els quals són una
simulació de varis videojocs, com CardboardWarfare o Killzone. Tots els vídeos són de gran
qualitat. Alguns d’ells pretenen reproduir fidelment una escena d’un videojoc, mentre que
d’altres són una parodia.
Punts forts:
1. Imatge digital molt treballada.
2. Efectes especials molt aconseguits.
3. Retoc de color aconseguint tons freds, com el gris i el blau.
4. Ambient de videojoc ben recreat.
Punts febles:
1. Pocs gràfics típics del videojoc.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
121
més elements propis del videojoc per ambientar-ho correctament. Nosaltres introduirem
diversos gràfics informatius per ajudar a recrear de forma més realista la simulació d’una
partida de videojoc.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
122
tràilers del joc. Descàrregues, que permeten descarregar al propi ordinador esbossos dels
escenaris, wallpapers i screenshots entre d’altres coses. Fòrum, que introdueix a l’usuari en
una comunitat virtual on pot plantejar dubtes o opinions sobre el joc i la saga. Descobreix
els jocs, que presenta a l’usuari cada una de les parts de la saga en totes les plataformes.
Finalment l’apartat de El poder dels Déus, que vincula el joc amb les xarxes socials com
Facebook, Twitter, Diggi altres.
Punts Forts:
1. Fidedigne a l’estètica del videojoc.
2. Intenta captar més jugadors, no només es centra en els que ja ho són.
3. Contacte amb les xarxes socials.
4. Possibilitat d’adaptar la web al país des d’on es consulta.
5. Es permet desactivar el so de la web.
Punts Febles:
1. La càrrega de la pàgina és lenta.
2. Masses apartats redireccionen a una pàgina externa.
3. Alguns continguts són un pèl pobres, i falta informació. Ex: A vídeos només hi ha 3
vídeos.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
123
Finalment cal tenir en compte que la música en una web pot ser de gran ajuda, però també
pot perjudicar molt. En aquest sentit el fet d’incorporar so a la web és una bona idea, ja que
dona dinamisme a l’entorn i alhora permet crear un clima dins la web, però ha de donar
sempre la possibilitat de ser desactivat, perquè sinó l’usuari es pot veure estressat i
tancarla web.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
124
Descripció del contingut:La web de Final Fantasy està estructurada en dos menús, al menú
superior podem trobar pestanyes interactives que ens donen informació sobre aspectes
comercials no només del joc sinó de la companyia SquareEnix. Així doncs podem trobar una
pestanya que ens permet comprar el producte, un altre que ens permet registrar-nos per
tal de rebre informació sobre qualsevol joc de la companyia i finalment una nota de premsa
que ens proporciona informació general sobre la posada en escena del joc dins del mercat.
En aquest menús superior trobem també accés a les xarxes socials.
En menú inferior trobem, 6 pestanyes: joc, personatges, eidolones, estils de joc, mitjans i
descàrregues. És a dir, tot el menú està dedicat a aspectes del joc i al seu argument. A més,
dins de cada pestanya trobem gran varietat d’informació relativa a la pestanya que haguem
clicat, de manera que dona tota la informació possible.
Punts Forts:
1. Web molt ben organitzada.
2. De fàcil navegació.
3. Gran potencial estètic.
4. Completa a nivell d’informació.
5. Orientada a la seva difusió per la xarxa.
6. Pensada tant per fans del joc com per possibles jugadors.
7. Pensada per internautes de qualsevol indret del món (multillenguatge).
8. Compagina molt bé imatge i text.
Punts Febles:
1. Masses scrolls verticals.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
125
amb peus de plom pel que fa al text. Primerament hem de saber organitzar i compaginar
molt bé el que són imatges, vídeos i textos, i per tant sempre prioritzar els dos primers per
davant de la lletra escrita. En el cas del text col·locar scrolls es complicat ja que en certa
manera dificulta la seva navegació i fa feixucs els continguts de la web.
Screenshots de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
126
CALL OF DUTY
(http://www.youtube.com/watch?v=-aLszbWVoBU)
Justificació: La perspectiva en primera persona dels shooters és un dels elements més
famosos i característics d’aquest gènere de videojoc. Aquest element ha estat tingut en
compte per al nostre producte i incorporat per al seu desenvolupament, fet que m’ha fet
decidir-me per la web d’un dels shooters més populars de la indústria dels videojocs: Call of
Duty.
Descripció del contingut: Quan l’usuari entra a la pàgina de Call of Duty, pot escollir entre
tots el jocs de la saga i entrar en aquest. Si ens fixem en un en concret, Call Of Duty Black
Ops, veiem que la pàgina està estructurada amb un menú superior que permet una gran
varietat de possibilitats. Podem trobar media, notícies sobre el joc, l’apartat de DLC que ens
dona una petita explicació sobre diferents packs d’expansió, la pestanya de Teatre que
proporciona al jugador un contingut personalitzat oferint vídeos de les missions de l’usuari
així com screenshots pròpies, l’apartat missions que permet als usuaris registrats a la
comunitat de Call of Duty puntuar missions en les seves modalitats de joc, l’apartat de
fòrum que dona la possibilitat als jugadors de plantejar dubtes sobre el joc per obtenir
respostes d’altres usuaris i finalment la pestanya de suport que planteja les FAQ així com
l’estat del servei online del joc.
Punts Forts
1. No s’estanca en un joc de la saga, l’usuari pot navegar per qualsevol.
2. La navegació és molt senzilla i intuïtiva.
3. Web molt ben organitzada.
4. Pensada per satisfer als que ja són usuaris i atreure els que encara no ho son.
5. Servei personalitzat (Theatre) i gràcies al accés mitjançant registre.
6. Informació completa sobre tots els aspectes que planteja la web.
7. Web molt atraient degut al seu impacte visual.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
127
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
128
WORLD OF WARCRAFT CATACLYSM
(http://www.youtube.com/watch?v=Wq4Y7ztznKc)
Justificació:World of Warcraft és un dels jocs online més famosos de la història amb milions
de seguidors arreu del món. El fet de analitzar la seva web i tenir present com la enfoquen
ens pot ajudar molt a donar els passos correctes per donar llum a un website amb cara i
ulls.
Descripció del contingut: La web consta d’un menú principal i un de secundari amb els
mateixos nodes informatius. Aquest menú està constituït per 5 pestanyes: Home, Features,
Media, FAQ i Forums. A la primera pestanya podem trobar la sinopsi del joc juntament
altres continguts com poden ser screenshots que mostren l’entorn gràfic creat i finalment
algunes novetats i actualitzacions de d’aquesta última entrega del joc. En els següent node
informatiu (Features), podem veure característiques pròpies d’aquesta última entrega de
WOW. A l’apartat de media podem accedir a gran varietat d’informació audiovisual com ara
el tràiler del joc, galeries de fotos de screenshots i artwork i finalment diversos wallpapers
exclusius del joc. Seguidament a FAQ (FrequentAskedQuestions) podem consultar
informació sobre preguntes bastant comunes que es fan els nouvinguts sobre el joc en si i el
seu funcionament. En última instància ens trobem al el fòrum, un apartat molt complet que
no només poda en contacte als jugadors de WOW arreu del món, sinó que proporciona als
usuaris gran quantitat d’informació als usuaris sobre aspectes del joc, últimes notícies sobre
la saga WOW i la seva desenvolupadora (Blizzard), així com un apartat de servei tècnic i
novament de continguts audiovisuals.
Punts Forts:
1. Es tracta d’una web molt completa que no deixa ningun aspecte al aire. Qualsevol
informació que busqui l’usuari la podrà trobar a la web.
2. Per tot aquell que hagi jugat el joc, l’estètica sencera de la pàgina recrea el mateix
joc, fet que ajuda a crear el clima de WOW fora del joc en si.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
129
3. Els continguts s’actualitzen bastant sovint fet que dona continuïtat a la web.
4. Constantment l’usuari rep visualment la invitació per afegir-se a la comunitat del
joc.
5. Trobem elements en moviment dins la web que li atorguen dinamisme.
6. La composició es excel·lent.
Punts Febles:
1. Alguns continguts es troben repetits en diverses seccions. Redundància.
2. El menú inferior dona accés a un apartat excessivament simple.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
130
L.A. NOIRE
(http://www.rockstargames.com/lanoire/agegate/ref/?redirect=)
Justificació: L.A. Noire és un joc bastant semblant en quant a temàtica al nostre projecte. A
més, després de l’experiència web amb l’entorn de GrandTheft Auto, volia indagar una mica
més en webs de jocs de la factoria Rockstar Games.
Descripció del contingut: A diferència de la Web de GrandTheft Auto, L.A. Noire té una
estructura web més convencional. Consta del típics apartats de informació, versions
disponibles per diferents plataformes, adquisició del joc, personatges, fòrum, descàrregues,
vídeos i notícies. Tanmateix incorpora algun node informatiu poc comú com és el cas de
DLC (Downloadable Content) que permet adquirir mitjançant descàrrega continguts pel
videojoc.
Punts Forts:
1. El fet de poder descarregar continguts aplicables al videojoc dota de molta utilitat la
web passa de ser passiva a activa.
2. Es completa a nivell informatiu.
3. Molt fàcil de navegar pels continguts.
4. Insta a l’usuari a adquirir el producte.
5. Endinsa al internauta en el món del videojoc.
6. Incorpora crítiques positives del joc, fet que li dona prestigi.
7. En contacte amb les xarxes socials.
8. Pantalla de verificació d’edat. Dona un aspecte més seriós a la web.
Punts Febles:
1. La pàgina d’inici es troba massa carregada de continguts i potser dificultar la lectura
per part de l’usuari.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
131
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
132
podem trobar: Que pasada! Un apartat el contingut del qual es un petit minijoc en el qual
l’usuari explora una taula plena d’objectes pels quals pots navegar i anar a parar a altres
continguts com per exemple aplicacions per a Iphone de la pel·lícula, notícies, etc.
L’apartat de sala d’edició permet al usuari fer un petit muntatge amb escenes de la
pel·lícula i posteriorment reproduir-les dins de la mateixa web. Finalment trobem la sala de
producció que permet al usuari veure imatges inèdites de la pel·lícula, però requereix un
registre mitjançant la xarxa social Facebook.
Punts Forts:
1. Dona una gran interactivitat amb l’usuari.
2. Molt lligat a les xarxes socials.
3. La web capta a l’usuari per consumir el producte.
4. Molt completa a nivell informatiu.
Punts Febles:
1. Conté continguts que pesen massa per la web i l’usuari s’ha d’esperar a que es
carreguin.
2. La pàgina principal s’ha de refrescar constantment perquè funcioni.
3. Hi ha continguts que apareixen malament dins la web com per exemple a la galeria
de fotografies.
4. A l’apartat de vídeo només hi ha el tràiler que apareix al obrir la pàgina.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
133
Per altra banda, hem de tenir en compte que els continguts de la web han d’estar en
correctes condicions per a la seva visualització dins la xarxa, ja que per exemple en aquesta
web algunes fotografies fora de camp i això desprestigia molt l’entorn en si, que en línies
generals està molt treballat.
Per últim, cal adaptar els continguts a la xarxa perquè aquests siguin de fàcil càrrega i
l’usuari no s’hagi d’esperar per visualitzar la informació, ja que la falta d’agilitat de la web li
pot fer perdre visites.
Screenshots de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
134
TRANSFORMERS 3
(http://www.transformersmovie.com/)
Justificació: Un altre exemple de web d’una altre superproducció, que m’ha servir per
contrastar les dades obtingudes a la web anterior i apreciar maneres diferents d’enfocar un
projecte web d’un producte similar.
Descripció del contingut: A nivell estructural, és una pàgina web bastant senzilla, ja que
només consta d’un menú i dins d’aquest hi ha poques pestanyes: About, Video, Gallery i
Downloads. A l’apartat d’about simplement podem trobar informació relativa a la pel·lícula,
a Vídeo podem trobar precisament continguts de vídeo del tràiler i els spots per televisió, a
l’apartat gallery podem trobar fotografies de la pel·lícula i a Downloadpodem descarregar-
nos wallpapersi avatars.
Punts Forts:
1. És una web simple i de fàcil navegació.
2. Visualment és molt atractiva ja que incorpora molts elements de la pel·lícula.
Punts Febles:
1. Continguts excessivament simples.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
135
REC 3
(http://rec3genesis.com/)
Justificació: Es tracta d’un altre exemple similar al anterior un cop més per contrastar
informació i per veure enfocs diferents. La pel·lícula de REC m’ha semblat interessant
perquè es un producte cinematogràfic de gran ressò nacional.
Descripció del contingut: És una web promocional per la propera entrega de la saga
espanyola REC. Degut a aquest motiu la web està estructurada de diferent manera que les
altres webs sobre pel·lícules, tot i que també hi podem trobar alguns continguts comuns
com pot ser el tràiler. Cal destacar, que en aquest entorn, no només es centren en el
producte en si, en aquest cas la pel·lícula, sinó que també donen ressò al procés de
producció del film fet que es porta a terme mitjançant un blog de rodatge on els usuaris
poden anar seguint l’evolució del procés de producció de la pel·lícula. A més a més, també
donen informació sobre el director en qüestió , Paco Plaza, mitjançant un enllaç al seu
videoblog.
Punts Forts:
1. L’usuari està en tot moment informat sobre el procés de producció del film.
2. No només es centra en el producte sinó en tot el que l’envolta.
3. La web manté vincles amb altres productes relacionats, en aquest cas podem trobar
enllaços a les pàgines web de les anteriors entregues.
4. Web molt informativa, no deixa aspectes al aire.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
136
5. A nivell compositiu està molt ben organitzada, els punts d’interès són clars i
evidents.
Punts Febles:
1. Els enllaços externs a pàgines web d’alguns patrocinadors trenca el clima de la web.
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:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
137
MULTIOPTICAS
(http://www.combina2mo.com/)
1.Multiopticas2.Creació d’un anunci interactiu per tal de promocionar l’oferta d’ulleres en
que se’n poden combinar dues.3. Obert a tothom sense haver de registrar-se ni ser
client.4.20115.Castellà6.Central Multiopticas, Av, de los Reyes s/n 28770 ColmenarViejo
Tel: 918357000
Justificació: Aquesta empresa té una home interactiva i en moviment. Utilitzen un gràfic en
panoràmic que permet a l’usuari desplaçar-se a dreta i esquerra a més a més d’anar
escollint productes.
Descripció del contingut: És una web d’una òptica. El propòsit és vendre ulleres de la forma
més original possible. El fons de la web és un anunci que es pot anar reproduint, ocupa
tota la pantalla. Mentre es reprodueix podem veure diferents tipus d’ulleres, marques...
també està relacionat amb les xarxes socials.
Punts forts:
1. Els colors són elegants i càlids, igual que el producte que pretenen vendre.
2. Les imatges de les ulleres es desplacen de manera suau a través d’un menú d’un
color més clar que al passar per obre augmenta de tamany.
3. La barra de sota està ben dissenyada per als continguts i la temàtica però tampoc
s’acaba d’entendre la seva funció.
4. Crida l’atenció que puguis interactuar en un anunci de publicitat qualsevol, com pot
ser de l’empresa Multiòpticas. E
5. stà bé la forma en que es carrega el vídeo segons la teva tria; el logotip de la marca
es va omplint de baix a dal, sense trigar excessivament massa.
6. .Abans de començar a veure l’anunci pots anar directament a la galeria d’ulleres,
que et torni a explicar com funciona, veure les condicions legals o compartir-ho a
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
138
les xarxes socials (Facebook i Twitter), tot això en una barra molt discreta a sota la
pantalla.
7. Tots els links funcionen bé i la pàgina no triga en carregar-se.
Punts febles:
1. El funcionament de l’interactivitat està explicat al principi en tres breus passos però
tot i així un cop poses play l’anunci comença i l’usuari no sap ben bé com
interactuar, no sap ni es veuen clares les conseqüències d’aquesta interactivitat.
2. La usabilitat i navegació no són gaire intuïtius i per tant, l’objectiu de comunicació
plantejat no s’acaba de complir, és necessari llegir l’anunci escrit per entendre que
pretén dir-te el vídeo.
3. El vídeo té el tamany de tota la pantalla, potser massa si has d’anar mirant com
interactuar al mateix temps que veus el vídeo.
Screenshots de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
139
ESCAPE FROM CITY
(http://www.youtube.com/watch?v=-UmPxUMW4h8&feature=related)
1. Nom de l’organització: PurchaseBrothers, Valve Corporation2. Objectiu institucional:
Mostrar a l’espectador un curtmetratge amb estètica de videojoc.3. Accessibilitat del
producte web: Obert a tothom.4. Any de creació: Penjat en aquesta plataforma l’any
20115. Idiomes: Anglès.6. Dades de contacte: Valve Corporation / usuari que ha penjat el
vídeo: powerslayer58
Descripció del contingut Es tracta d’un vídeo, un curtmetratge però que aconsegueix ser
molt fidel a l’estètica dels videojocs, té grans efectes especials i fins i tot tracta la mateixa
temàtica bèl·lica dels jocs. Recrea totalment les armes, vestuaris, espais... a la perfecció.
Justificació:Per al nostre projecte aquesta estètica de videojoc que s’aconsegueix en un
vídeo ens interessa molt, és important que tinguem en compte tots els aspectes que es
tenen en compte per assolir aquesta estètica. Tot i així té masses efectes especials i en
alguns cops és poc realista.
Punts forts:
1. Els colors són saturats com en un vídeojoc, l’ambientació és molt encertada pel
tipus d’història de ciència ficció, per això també hi apareixen molts efectes
especials que ajuden a ambientar i fer encara més realista la sensació d’estar dins
un joc.
2. Té una usabilitat i una navegació molt intuïtiva per tal de veure les tres parts del
curtmetratge.
3. Només hi ha contingut audiovisual. No en té cap d’interactiu per a l’usuari, només
es pot visionar però és molt interessant el tipus d’hibridació entre curtmetratge
amb estètica de videojoc i còmic.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
140
4. El vídeo no triga en carregar-se i es pot visionar en pantalla estàndard de la pàgina
o en pantalla completa, a més fins i tot disposem del producte en qualitat HD. El so
i els efectes especials estan molt treballats.
Punts febles:
1. Al no tenir una pàgina pròpia, la plataforma de Youtube potser no és la més
encertada..
2. No hi ha links.
Screenshot de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
141
EA GAMES
(http://www.ea.com/battlefield)
1. EA Games (Electronic Arts)2. Posar a disposició dels aficionats als videojocs un portal on
es puguin informar sobre tots els videojocs, noves notícies de l’àmbit, dels jocs en diverses
plataformes, comprar i fins i tot jugar a alguns videojocs de forma gratuïta.3. Una gran part
del contingut de la pàgina és obert a tothom però si vols jugar cal que et registris.4. 19825.
28 6. Via Facebook, Twitter, Youtube i foros. Electronic Arts Software, S.L amb seu a
Redwood City (California)
Descripció del contingut:Pàgina web on hi ha a disposició dels amants del videojoc totes les
novetats i notícies que han de saber. La pàgina també permet jugar a certs jocs de manera
gratuïta.
Justificació:És una pàgina amb molts continguts però alhora molt endreçada. També ens
serveix per veure tipus de plans utilitzats en els jocs.
Punts forts:
1. Es tracta d’una pàgina molt endreçada, tot destaca per igual. Hi ha un menú i un
submenú amb cada pestanya desplegable. El color de fons és blanc així no es
confon cap requadre ni en destaca més un que l’altre. Al passar per sobre de cada
quadre es desplega per sobre mateix el nom del logotip del joc al qual pertanyen
les imatges. L’usabilitat i la navegació són intuïtius.
2. EA ha demostrat ser un líder creatiu i, actualment, la companyia continua innovant
i millorant el joc interactiu. Gracies a la combinació de medis tecnològics com
l’animació digital, el vídeo, les imatges fotogràfiques, la captura de moviment, plans
3D i tecnologia de renderització de les siluetes, gràfics digitals i so en estèreo. EA
aplica la tecnologia i la creativitat per desenvolupar l’entreteniment per al públic
general a través del medi interactiu. Un element en concret que m’ha cridat
l’atenció és el poder desplaçar-te d’una notícia a una altra a partir de dues tecles (J i
K) a munt i avall.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
142
3. Tots els links funcionen bé i els vídeos no triguen a carregar-se. S’actualitza segons
les novetats i les noves notícies.
Punts febles
1. No crec que sigui una web amb punts febles.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
143
Punts forts:
2. La idea és bona i funciona bé.
3. A més han inserit un petit disseny de videojoc a la part de sota que indica elements
del personatge principal (vides, armes...) propi d’un videojoc una mica antic però
que aporta un detall important a la intenció i idea que volen transmetre.
4. Tot i ser una mica rudimentari la navegació i l’usabilitat s’adapten a les necessitats
de comunicació.
Punts febles:
1. Els colors i la qualitat de vídeo no són el més adequat, es tracta d’un vídeo molt
casolà.
2. Tot i així els continguts audiovisuals són de molt baixa qualitat, la qual cosa fa que
perdin interès per si mateixos.
3.
4. El so i el muntatge estan poc treballats
Screenshot de la web:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
144
CULTURA GENERAL
(http://www.youtube.com/watch?annotation_id=annotation_667033&src_vid=kLmY_lq
nfdU&feature=iv&v=JZlS67W7QRA#t=4m21s)
1. Bullysteria 2. Posar a disposició dels usuaris un vídeo interactiu basat en un text de
cultura. 3. Obert a tothom 4. 2011 5. Castellà 6. [email protected] / Facebook i
Twitter.
Justificació: Utilitza la interactivitat de l’usuari durant tot el video. Són petites
interactivitats però estan força treballades tot i ser un video molt casolà.
Descripció del contingut: Es tracta de preguntes sobre cultura general, algunes no
importants però sí gracioses, és un contingut original i té interès per si mateix degut a que
són preguntes molt comunes o curioses que inciten a l’usuari a respondre-les. El rol del
personatge presentador aporta molt dinamisme al contingut.
Punts forts:
1. Aquest també és un vídeo “casolà” però amb molta interactivitat. L’estructura
s’adequa a les necessitats de comunicació i la usabilitat i la navegació són molt
intuïtius.
2. els links funcionen bé i les icones de Facebook, Twitter i de contacte estan molt ben
inserides a la superfície, de manera original i clara, juntament amb una breu
explicació del vídeo. Les preguntes es carreguen de forma molt ràpida
Punts febles:
1. El disseny és molt senzill. El vídeo és una bona idea però caldria estar més elaborat
en quant al disseny gràfic de les respostes que l’usuari pot escollir. Els colors són
foscos per la imatge i blanc i negre per al text.
2. El vídeo és de baixa qualitat.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
145
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
146
innovador. Si no s’hagués gravat aquesta pel·lícula possiblement no s’haurien inspirat a
l’hora de filmar Paranormal Activity o Rec.
Punts forts:
1. El que ens interessa, el film, té un disseny innovador. Es tracta d’una pel·lícula de
baix pressupost gravada en 16 mm i handycam. Ens dona la sensació més que mai
d’estar veien una història completament real, a més a més molts cops els plans són
subjectius, igual que els d’un videojoc i en nighshoot en les escenes que són de nit.
La llum és realista i els colors pàl·lids, compleixen l’objectiu que volen comunicar.
Punts febles:
2. La interficie és altre cop la plataforma de Youtube.
3. La gravació no és de gran qualitat però el procediment de la filmació aporta un
realisme absolut emulant les imperfeccions i el caos del rodatge d’un autèntic
documental de gran impacte.
Screenshot de la pel·licula:
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
147
ANUNCI TIPPEX DE L’OS
(http://www.youtube.com/profile?annotation_id=annotation_225527&user=tippexperie
nce&src_vid=h-WwAp_g5k4&feature=iv#t=2s)
1.Tipp-Ex 2.Campanya online del producte Tipp-Ex 3. Obert a tothom. 4. 2010 5. Anglès 6.
usuari que penja el vídeo: Tippexperience
Justificació: Utilització de la interactivitat en un anunci publicitari. Diverses opcions de
vídeo.
Descripció de continguts:El contingut audiovisual varia segons el contingut textual que
l’usuari decideixi escriure. A dalt apareix la frase “un cazador..... a un oso” en l’espai buit
l’usuari ha d’escriure el que li sembli. Segons el que escrigui es carrega un video o un altre
segons l’acció que ha de dur a terme el caçador.
Punts forts:
1. Tots els vídeos es carreguen de forma ràpida a més a més d’haver moltíssimes
opcions de visionatge. Aquest fet provoca que l’usuari vagi provant totes les
opcions que se li passin pel cap per tal d’esperar el canvi de comportament dels
personatges.
2. Els colors són vius i de qualitat. La forma és l’adequada al contingut i la usabilitat i la
interactivitat són molt intuïtives degut a que al primer vídeo t’explica el
funcionament mostrant-ho al mateix temps.
3. Tots els vídeos són ràpids de carregar.
Punts febles:
1. Els vídeos són de bona qualitat però no d’excessiva elaboració.
2. La plataforma és YouTube. Cal pensar però que no és un anunci que es pugui
emetre per televisió.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
148
Screenshot de la pantalla:
THE NATIONAL COLLECTION OF AERIAL PHOTOGRAPHY(http://aerial.rcahms.gov.uk/)
1. Royal Commission on theAncientandHistorical Monuments of Scotland 2. Proporcionar 5
milions de fotos aèries inèdites de la II Guerra Mundial, classificat per països i regions. 3.
Obert. 4. 2005 5. Anglès 6. John Sinclair House 16 Bernard Terrace, Edinburgh EH8 9NX,
United Kingdom. Tel: +44 (0) 131 662 1456
Descripció del contingut: En general tot el contingut són fotografies aèries en blanc i negre.
Aquestes tenen un iteres particular al ser fotografies inèdites d’un fet històric tant
important. Només utilitzen text per donar l’opció a l’usuari d’escollir el país i regió que vol
visionar acompanyat de la infografía d’un mapa del territori. Això aporta molta rapidesa
visual i facilita a l’usuari el funcionament de l’aplicació. Cada fotografia és acompanyada
d’una descripció de la fitxa tècnica de la imatge (dia, any, lloc, frame...)
Punts forts:
1. Els colors de la pàgina són freds, blaus i blancs. Totes les fotografies en blanc i
negre, en conjunt transmeten la serietat del gran conflicte. Trobem el menú a la
part esquerra i de dal a baix de la pàgina, ordenat per apartats. Al centre de la
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
149
pàgina i ocupant la major part hi ha les fotografies. És una pàgina amb no més de 3
nivells i una fàcil navegació i usabilitat.
2. Les imatges carreguen de forma ràpida, al ser velles no són de gran qualitat però
estan en molt bon estat de conservació. Es poden veure a tamany mitjà - gran i
anar-les passant d’una en una. Si ets usuari registrat et permet veure les imatges a
més resolució i poder augmentar-les de tamany.
Punts febles:
1. Limitació de continguts si no hi estàs registrat.
2. Pocs idiomes.
3. Costa d’entendre el menú, és a dir, el que és cada apartat.
Screenshot de la web
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
150
ELECTRONIC ARTS ESPORTS
(www.easports.com)
1.Electronic Arts Esports. 2. Web d’empresa dedicada a la producció específica de videojocs
esportius, en que l’usuari pot conèixer les novetats més rellevants i els diferents esports
dels quals pot trobar videojocs. 3. Obert. 4. Anglès.
Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la
nostra web.
Punts forts:
1. A través d’efectes javascript l’usuari pot conèixer els productes més destacats
sense haver de moure el ratolí per la pantalla.
2. La home no te “scrolling” i limita els continguts a la mida de la pantalla ordenant
el contingut per temàtiques en el menú principal, la qual cosa el fa força intuïtiu.
Punts febles:
1. És limita molt la informació de la home destacant molt les imatges dels
productes més destacats però amb poques opcions per navegar per la web.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
151
MPORA
(www.mpora.com)
1.MPORA pureactionsports. 2. Web dedicada a reproduccions audiovisuals relacionades
amb els diferents esports extrems i en que l’usuari pot registrar-se i penjar els seus propis
vídeos. 3. Obert. 4. Anglès, Francès i Alemany.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
152
2. El doble menú principal facilita molt la informació a l’usuari tant pel que fa a
les diferents temàtiques que tracta la web, en aquest cas els diferents esports,
com pel que fa els diversos apartats de cada esport.
Punts febles:
1. 1.Massa contingut irrellevant a la home o contingut que almenys no és el més
important del web i que s’hauria d’incloure en un segon nivell de profunditat.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
153
ELECTRONIC ARTS
(www.Ea.com/es)
1.Electronic Arts. 2. Web d’empresa dedicada a la producció de tot tipus de videojocs i on
es dona a conèixer les novetats i tota la gama de videojocs de la companyia. 3. Obert. 4.
Multi llenguatge.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
154
2K GAMES
(www.2kgames.com)
1.2K Games. 2 Web d’empresa dedicada a la producció de videojocs que permet a l’usuari
conèixer les novetats i l’àmplia llista de videojocs que ofereixen. 3. Obert. 4. Anglès.
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
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
155
accedir a les xarxes socials de l’empresa a través de grans icones situats a
la part inferior de la pantalla.
Punts febles:
1. Web desenvolupada amb Flash i que suposa una càrrega de contingut major
per a l’usuari, i fins i tot impedeix ser reproduida en el cas dels usuaris de
dispositius mòbils iOS. 2.
BATTLEFIELD
(www.battlefield.com/battlefield3)
1.Batltlefield 3. 2. Web de un dels videojocs bèl·lics més famosos que permet conèixer a
l’usuari el contingut de la última edició del videojoc i també donar a conèixer les diferents
comunitats del joc. 3. Obert. 4. Multi llenguatge.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
156
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
157
ZUNE
(www.zune.net/)
1.Zune. 2. Web dedicada al lloguer de continguts audiovisuals via streaming com poden ser
tant pel·lícules com clips musicals i en que l’usuari pot aconseguir-los fàcilment pagant un
preu raonable durant un cert període de temps. 3. Obert. 4. Multi llenguatge.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
158
KONAMI
(www.konami.com)
1.Konami Digital Entertainment. 2. Web de la companyia productora de videojocs japonesa
que dona a conèixer els últims llançaments dels videojocs més destacables de la
companyia. 3. Obert. 4. Anglès.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
159
Punts febles:
1. La part superior i inferior de la home no encaixen gaire ja que en la part
superior apareix el menú 3D i en la part inferior la web es torna radicalment
senzilla amb entrades més pròpies d’un blog que d’una web de videojocs. 2. El
menú fet amb flash fa que es necessiti d’una versió web adaptada per a
dispositius mòbils ja que sinó la gran quantitat d’usuaris iOS no hi poden
accedir.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
160
GEARS OF WAR
(www.gearsofwar.com/xbox)
1.Gears of war 3. 2. Web oficial de la darrera edició de la saga Gears of War en que se’ns
dóna a conèixer les diferents parts del joc a través de continguts audiovisuals i també ens
mostra com aconseguir-lo.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
161
CALL OF DUTY
(www.callofduty.com/mw3)
1.Call of duty Modern warfare 3. 2.Web oficial de la pròxima edició de la saga Call of duty
en que ens podem informar sobre les futures característiques i l’ambientació en que es
centrarà aquesta nova entrega. 3. Obert. 4. Multi llenguatge.
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.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
162
Punts febles:
1. L’amplada de la home es pensada només per a pantalles panoràmiques de
manera que en pantalles de tamany 4:3 la informació pot quedar
sobreposada i ser més complicada d’entendre per l’usuari.
FORZA MOTORSPORT
(www.forzamotorsport.net)
1.Forza Motoresport. 2. Web del videojoc de curses de cotxes ForzaMotorsport de la
plataforma Xbox i que ens mostra les novetats de la 4ª edició del joc i la manera com
aconseguir-lo. 3. Obert. 4. Anglès.
Justificació: organització de la interfície gràfica que podem prendre com a exemple per a la
nostra web.
ICARIA
Projecte Final de Carrera
Marc Aliart – Elsa Bigas – Georgina Cabrera – Anna Màrmol – Albert Villanueva
163
Punts forts:
1. Les lletres del menú desplegable estan molt ben aconseguides i juguen amb
la tipologia del videojoc del qual es tracta.
2. L’apartat de notícies està ben resumit amb les 3 notícies més destacades i el
titular de la noticia sense haver d’ocupar gens d’espai a la web.
Punts febles:
1. El menú principal queda molt acaparat pel menú desplegable i es poc vistós i a
la vegada amb opcions molt generals i poc concretes sobre el contingut.
2. Els enllaços a les xarxes socials són massa petits i queden amagats pel
contingut textual de la part inferior.