MEMÒRIA COMUNICACIÓ MULTIMÈDIA 1. INTRODUCCIÓ I CONTEXTUALITZACIÓ 1.1.- Introducció Som un grup d’estudiants de 4rt curs de l’ERAM (Escola de Realització Audiovisual i Multimèdia). El nostre projecte consisteix en produir un curtmetratge de thriller i drama, anomenat “Un buen hombre”. La sinopsi de l’audiovisual és la següent: David aconsegueix uns documents molt importants dels laboratoris farmacèutics on treballa. Sobre seu recau el dilema moral d’incriminar l’empresa fent sortir els documents a la llum, o bé retornar-los a la companyia, per poder salvar la seva família. La seva decisió repercutirà directament a la seva vida i a la gent que l’envolta. L’equip està format pels següents membres: Oriol Amargant, Aina Balsells, Marc Falgàs, Martí Palazón, Mireia Teixidor, Sara Vicente i Anna Villar. Tots junts formem RECODE FILMS.
1.2.- Idea La part multimèdia del projecte consisteix en realitzar una pàgina web amb els continguts del curtmetratge.
1.3.- Descripció El nostre projecte consisteix en generar un producte audiovisual, alhora però, també complementar-lo amb una petita part multimèdia, en aquest cas la web. La nostra pàgina web serà dinàmica, innovadora, contindrà l’efecte Parallax amb el qual l’usuari gaudirà d’una navegació en la que es sentirà còmode . Els continguts d’aquesta estaran distribuïts en funció d’un menú dividit en cinc categories: sinopsis, vídeo, galeria d’imatges, equip tècnic i blog. L’estètica del lloc web estarà marcada per la temàtica de l’audiovisual, transmeten ambientació de thriller i alhora que mostri drama. La pàgina web serà una de les plataformes a través de la qual es podrà veure el nostre curtmetratge. Per a la seva realització utilitzarem llenguatges com HTML5, CSS3 i JQuery.
1.4.- Objectius Objectius generals: L’objectiu principal és crear un curtmetratge professional i amb caràcter. A partir del lloc web volem que el nostre audiovisual es pugui difondre el màxim possible i que l’usuari pugui trobar més informació relacionat amb aquest. Al mateix temps volem que l’usuari gaudeixi en la nostra web i pugui passar-ho bé navegant per la nostre web. Aquest objectiu el pretenem aconseguir mitjançant l’efecte Parallax. Objectius específics: Ø Pel que fa l’audiovisual: - Expandir el curtmetratge al màxim nombre de persones possibles. - Obtenir un resultat professional. - Destacar dins del gènere treballat. Ø Pel que fa la part multimèdia: -
Utilitzar la plataforma web com a eina de difusió. Oferir continguts extres a l’usuari. Patrocinar empreses o negocis que hagin col·laborat en realització.
Ø Pel que fa la nostra formació: -
Millorar el nostres coneixements audiovisuals: càmera, il·luminació, so, muntatge, etc. Millorar el nostres coneixements multimèdia: HTML5, CSS3 i JQuery. Potenciar el treball en equip.
1.5.- Metodologia Alhora de confeccionar el projecte audiovisual i multimèdia s’han de seguir una sèrie de passos: Ø Preproducció: - Crear/adaptar un guió literari. - Buscar un equip tècnic i repartir els diferents rols. - Cerca de referents: audiovisuals, multimèdia i gràfics. - Cerca de localitzacions.
- Cerca de finançament (generar un Verkami). - Petició de permisos necessaris o requerits. - Realització de càsting i assajos. - Cerca de material tècnic i atrezzo. - Confecció del guió tècnic. - Creació d’un pla de treball. - Generar els primers continguts gràfics (logos, promoció i web). - Proves de càmera i àudio. Ø Producció: -
Rodatge. Generar continguts web.
Ø Postproducció: -
Edició i muntatge del material gravat. Publicació de la pàgina web. Presentació del curtmetratge. Promoció i difusió de l’audiovisual. Distribució del obsequis del Verkami.
1.6. Definició del públic objectiu El públic del nostre audiovisual està orientat cap a un públic major a 12 anys. Sobretot aquells que tenen interès cap a l’audiovisual (curtmetratges o pel·lícules). També va encarat cap aquelles persones que ja coneguin el nostre curtmetratge i que vulguin saber més d’aquest (connexió a la pàgina web de l’audiovisual).
2.- ESTAT DE DESENVOLUPAMENT 2.1.- Estudi competència (Benchmarking) 2.1.1.- Criteris de cerca Hem buscat un seguit de referents web tenint en compte l’estètica de les webs relacionades amb el món audiovisual. Concretament alhora de fer l’anàlisi de referents hem tingut en compte que les webs seleccionades tinguessin relació amb el gènere i temàtica del nostre guió literari.
2.1.2.- Referents de pàgines web seleccionades NOM PEL·LICULA
LINK
PRODUCTORA
Cosmopolis (Fig. 1 Annex)
http://cosmopolisthefilm.com/en
Alphama Films
Crash (Fig. 2 Annex
http://www.crashfilm.com/
Lions Gate Entertainment
2005
Lions Gate
2009
http://www.hangoverpart3.com/
Warner Bros Entretainment
2013
http://killingthemsoftlymovie.com/
The Weinstein Company
2012
http://www.lifeofpimovie.com/
Twentieth Century Fox Film Corporation
2003
Universal Studios
2012
Film Web
2011
Warner Bros Entretainment
2013
Warner Bros Entretainment
2009
Open Road
2013
Europa Corporation
2008
Sony Pictures Digital Productions
2011
Daybreakers (Fig. 3 Annex) Hangover Part III (Fig. 4 Annex) Killing them softly (Fig. 5 Annex) La vida de Pi (Fig. 6 Annex) Les Misérables (Fig. 7 Annex) Mechanic (Fig. 8 Annex) Prisoners (Fig. 9 Annex) Sherlock Holmes (Fig. 10 Annex) Side Effects (Fig. 11 Annex) Taken (Fig. 12 Annex) The girl with the dragon tatto (Fig. 13 Annex)
http://www.daybreakersmovie.com/site/
http://lesmiserables-movie.co.uk/ http://www.themechanicmovie.com/site/#/e n/home/ http://prisonersmovie.warnerbros.com/ http://sherlock-holmesmovie.warnerbros.com/dvd/index.html#/ab out/ http://www.sideeffectsmayvary.com/ http://www.taken-lefilm.com/ http://www.dragontattoo.com/site/
Warner Bros Entretainment
ANY 2012
The Hobbit (Fig. 14 Annex)
http://www.thehobbit.com/index.html
Warm bodies (Fig. 15 Annex) White House Down (Fig. 16 Annex)
http://warmbodiesmovie.com/
Summit Entertainment LLC
2013
http://www.whitehousedown.com/site/
Sony Pictures Digital Productions
2013
2012
3.- ARQUITECTURA DE LA INFORMACIÓ 3.1.- Arbre de navegació
HOME
SINÒPSI
VIDEO
HISTORIA
TRAILER
CURTMETRATGE
EXTRES
MAKING OFF
Llegenda: 1er NIVELL 2on NIVELL 3er NIVELL
GALERIA
EQUIP
FOTOGRAFIES
ARTÍSTIC
FOTOGRAFIES I DESCRIPCIÓ TÈCNIC
FOTOGRAFIES I DESCRIPCIÓ
BLOG
ÚLTIMS POSTS
COMENTARIS
3.2.- Diagrama de flux *Adjunt a l’annex.
3.3.- Mapa web HOME
SINÒPSI
HISTORIA
TRAILER VIDEO
CURTMETRATGE EXTRES
GALERIA
MAKING OFF
FOTOGRAFIES
ARTÍSTIC
FOTOGRAFIES I DESCRIPCIÓ
TÈCNIC
FOTOGRAFIES I DESCRIPCIÓ
EQUIP
ÚLTIMS POSTS BLOG COMENTARIS
3.4.- Wireframes
PÀGINA INICI MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video TÍTOL DEL CURTMETRATGE “UN BUEN HOMBRE” IMATGE TRAJE NEGRE
Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres Botó-enllaç Pàgina blog
XARXES SOCIALS Botó-enllaç Facebook
Botó-enllaç Twitter
VERKAMI Botó-enllaç Verkami
LOGO RECODE FILMS
PÀGINA SINOPSI TÍTOL SINOPSI
MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video
TEXT DESCRIPCIÓ SINOPSI
Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres Botó-enllaç Pàgina blog
FRASES CANVIANTS RELACIONADES AMB EL CURTMETRATGE
BOTÓ DESCARGA GUIÓ LITERARI
PÀGINA VIDEO TÍTOL SINOPSI
MENÚ Botó-enllaç Pàgina inici
VIDEO TRAILER CURTMETRATGE (enllaç Vimeo)
Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres
VIDEO CURTMETRATGE (enllaç Vimeo)
Botó-enllaç Pàgina blog
MAKING OFF CURTMETRATGE (enllaç Vimeo)
PÀGINA GALERIA TÍTOL GALERIA
MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres
GALERIA D’IMATGES RELACIONADES AMB EL CURTMETRATGE
Botó-enllaç Pàgina blog
PÀGINA EQUIP TÍTOL EQUIP
MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi
FOTOS ACTORS
INFORMACIÓ EQUIP ARTÍSTIC (ACTORS)
Botó-enllaç Pàgina video Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres Botó-enllaç Pàgina blog
FOTOS EQUIP RECODE FILMS I ALTRES COL·LABORADORS
INFORMACIÓ EQUIP TÈCNIC
PÀGINA EXTRES TÍTOL EXTRES
MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres
ENLLAÇOS, VIDEOS I DOCUMENTACIÓ DE CASOS REALS DE FARMACÈUTIQUES FRAUDULENTES
Botó-enllaç Pàgina blog
CRÈDITS CRÈDITS
MENÚ Botó-enllaç Pàgina inici Botó-enllaç Pàgina sinopsi Botó-enllaç Pàgina video Botó-enllaç Pàgina galeria Botó-enllaç Pàgina equip Botó-enllaç Pàgina extres Botó-enllaç Pàgina blog
CRÈDITS I AGRAÏMENTS
FOOTER
INFORMACIÓ CONTACTE RECODE FILMS
3.5.- Screenshots Pantalla inici:
Pantalla sinopsi:
Pantalla vĂdeo:
Pantalla galeria:
Pantalla equip:
Pantalla extres:
Pantalla crèdits:
Footer:
ANNEX Referents de pàgines web seleccionades Cosmopolis Ø http://cosmopolisthefilm.com/en Ø Productora i any: Alphama Films, 2012 *Observacions: ens agrada el fet de que sigui una pàgina web fixa, és a dir, que les mides no canvien.
Fig. 1: Web Cosmopolis
Crash Ø http://www.crashfilm.com/ Ø Productora i any: Lions Gate Entertainment, 2005 *Observacions: efecte de selecció del menú amb punts de llum i reflexa interior de la tipografia. Frases d’opacitat dinàmica en la capçalera.
Fig. 2: Web Crash
Daybreakers Ø http://www.daybreakersmovie.com/site/ Ø Productora i any: Lions Gate, 2009 *Observacions: línia del menú i la textura del fons.
Fig. 3: Web Cosmopolis
Hangover Part III Ø http://www.hangoverpart3.com/ Ø Productora i any: Warner Bros Entretainment, 2013 *Observacions: fotografia fixa que ocupa tota la pantalla i no canvia.
Fig. 4: Web Hangover III
Killing them softly Ø http://killingthemsoftlymovie.com/ Ø Productora i any: The Weinstein Company, 2012 *Observacions: efecte Parallax vertical que també afecta al video. Frases que apareixen horitzontalment i marxen.
Fig. 5: Web Killing Them Softly La vida de Pi Ø http://www.lifeofpimovie.com/ Ø Productora i any: Twentieth Century Fox Film Corporation, 2003 *Observacions: l’efecte que selecciona i deselecciona la categoria en el menú superior.
Fig. 6: Web La Vida de Pi
Les Misérables Ø http://lesmiserables-movie.co.uk/ Ø Productora i any: Universal Studios, 2012 *Observacions: ens va agradar molt els colors i tons que té la imatge ja que també creiem que poden encaixar en el perfil del nostre curt.
Fig. 7: Web Les Misérables
Mechanic Ø http://www.themechanicmovie.com/site/#/en/home/ Ø Productora i any: Film Web, 2011 *Observacions: estil, color i to que té la barra menú. Creiem que segueix molt l’estètica i temàtica de la pel·lícula i és molt interactiva perquè fins i tot i té com una espècie de joc.
Fig. 8: Web Mechanic
Prisoners Ø http://prisonersmovie.warnerbros.com/ Ø Productora i any: Warner Bros Entretainment, 2013 *Observacions: color i tonalitat de la pàgina web, barrejat amb l’estil minimalista i grunge.
Fig. 9: Web Prisoners
Sherlock Holmes Ø http://sherlock-holmes-movie.warnerbros.com/dvd/index.html#/about/ Ø Productora i any: Warner Bros Entretainment, 2009 *Observacions: barra de menú interactiva, tot i que poc pràctica, per tant fa que baixi la usabilitat de la pàgina web. També ens agrada l’estètica grunge que té.
Fig. 10: Web Sherlock Holmes
Side Effects Ø http://www.sideeffectsmayvary.com/ Ø Productora i any: *Observacions: en la situació del cursor sobre una fotografia es desenvolupa un vídeo.
Fig. 11: Web Side Effects
Taken Ø http://www.taken-lefilm.com/ Ø Productora i any: Europa Corporation, 2008 *Observacions: ens va agradar molt la tonalitat i el color i la manera de la que s’introdueix la pàgina web (un vídeo).
Fig. 12: Web Taken
The girl with the dragon tatto Ø http://www.dragontattoo.com/site/ Ø Productora i any: Sony Pictures Digital Productions, 2011 *Observacions: menú animat i interactiu amb forma d’arbre.També ens va cridar l’atenció la disposició de la galeria.
Fig. 13: Web The girl with the dragon tattoo
The Hobbit Ø http://www.thehobbit.com/index.html Ø Productora i any: Warner Bros Entretainment, 2012 *Observacions: efecte d’arrossegar pantalles horitzontalment (slide).
Fig. 14: Web The Hobbit
Warm bodies Ø http://warmbodiesmovie.com/ Ø Productora i any: Summit Entertainment LLC, 2013 *Observacions: efecte parallax amb el cos del noi fix sense moure’s i estilamb un toc minimalista.
Fig. 15: Web Warm Bodies
White House Down Ø http://www.whitehousedown.com/site/ Ø Productora i any: Sony Pictures Digital Productions, 2013 *Observacions: foto que impacte i agrada, i menú amb baixa opacitat que es mostra més al passar per sobre aquest.
Fig. 16: Web White House Down
Personalitzar la nostra pàgina web El fet de fer la pàgina web des de zero és perquè creiem que així serà molt més personal en quan al nostre equip de treball, i ens dona més llibertat a l’hora de jugar amb els estils. La nostre pàgina web tindrà un estil “grunge” però al mateix temps una mica minimalista i simple. Aquí hi ha una selecció de les opcions que ens han agradat més per a utilitzar-ho com a fons:
Al final ens hem decantat per l’última opció però li hem decidit afegir un marc negre per tal de que, més tard, es pugui adaptar sense cap problema a qualsevol pantalla.
*Marc negre afegit.
Fons final:
Aspectes tècnics També hem començat a buscar informació sobre diversos aspectes tècnics que volem aplica a la web. Un d’ells és l’efecte Parallax. Hem trobat diferents referents webs amb exemples del Parallax que ens han agradat: -
http://themify.me/demo/themes/parallax/ http://themespectrum.com/parallax-demo/ http://wagerfield.github.io/parallax/ http://themeforest.net/item/positivus-multipurpose-ajax-blogportfoliotheme/full_screen_preview/5338553 http://johnpolacek.github.io/superscrollorama/ http://webdesign.tutsplus.com/tutorials/complete-websites/create-aparallax-scrolling-website-using-stellar-js/ http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-websiteinterface-with-jquery-and-css/
Hem estat buscant informació de com dur-ho a terme, però com que hem vist que hi ha moltes maneres de realitzar aquest efecte, encara estem mirant quina és la que ens seria més viable per a la nostra pàgina web.