Producción y diseño multimedia

8/14/2019 Produccin y diseo multimedia

1/49

LOGO

Tecnologas Multimedia Publicidad y RRPP

Profesor: Manuel Grtrudix


2/49

Mapa de contenidos

Diseo aplicado aldesarrollo deproductos de

comunicacin en Red

Claves de diseomultimedia

Diseo centradoen experiencia de

usuario

Reglas esencialesde usabilidad

Normas yrecomendaciones

de accesibilidad

Estndares yespecificaciones

bsicas

Principios de

composicin ydiseo visual

Consideracionesgenerales

Reglas y modelos

Diseo deInterfaces

Tipografa web

Tcnicas de

guionizacinmultimedia

Tcnicas deguionizacinespecficas

Modelos yherramientas


3/49

Claves dediseomultimedia


4/49

Primeras reflexiones

Dnde est el 1,25?


5/49

Diseo centrado en Experiencia de Usuario (EU)


6/49

Diseo centrado en Experiencia de Usuario (EU)


7/49

Lo maravilloso de la tecnologa es que la gente acaba

utilizndola para algo completamente distinto de su destinooriginal. Es este valor de lo inesperado lo que subyace a lacreatividad en la sociedad. (Manuel Castells, 2002: 249)

Una nueva ola en la forma de experimentar los productos, en este casoel software, que va ms all de la informtica. Estamos entrando en unmundo que cada vez est ms cerca de Minority report en cuanto a laexperiencia del usuario. (Forest Key, 2006)

Diseo centrado en EU

La Experiencia de Usuario es la sensacin, sentimiento,respuesta emocional, valoracin y satisfaccin del usuariorespecto a un producto, resultado del fenmeno deinteraccin con el producto y la interaccin con suproveedor. (Hassan y Martn)


8/49

Factores de la experiencia de usuario

Morville (2004)


9/49

Utilidad?


10/49

Utilidad

www.barrabes.com

www.diazdesantos.es

www.bankofamerica.com
http://www.barrabes.com/http://www.bankofamerica.com/onlinebanking/http://www.bankofamerica.com/onlinebanking/http://www.diazdesantos.es/http://www.barrabes.com/http://www.barrabes.com/


11/49

Utilizable?


12/49

Utilizable

www.seg-social.es

http://www.aeat.es
http://www.aeat.es/http://www.seg-social.es/


13/49

Encontrable?


14/49

Encontrable

www.20minutos.es

www.cope.es

www.guardian.co.uk
http://www.20minutos.es/http://www.cope.es/http://www.guardian.co.uk/http://www.20minutos.es/http://www.cope.es/


15/49

Adecuado

www.weyerhaeuser.com/

www.bowater.com/en/

www.bc.com/
http://www.weyerhaeuser.com/http://www.bowater.com/en/http://www.bc.com/http://www.bc.com/http://www.bowater.com/en/http://www.bc.com/http://www.weyerhaeuser.com/http://www.bowater.com/en/http://www.weyerhaeuser.com/


16/49

Deseable

http://www.audi.es

http://www.ayto-getafe.org


17/49

Accesible

http://www.once.es

http://www.sport.es/
http://www.sport.es/http://www.once.es/acc/cp/eventosHome


18/49

Creble?


19/49

Valioso

www.efe.com

http://web.alerta-antivirus.es

A ibilid d W b bj ti
http://web.alerta-antivirus.es/portada/index.phphttp://www.efe.com/


20/49

Accesibilidad Web como objetivo Razones para construir una web para todos

Marco legal y normativo.

Factores socioeconmicos

Integracin e igualdad.

Dimensin moral

La expectativa del futuro.Dimensin prctica

La mitad de tus visitas a tu sitio provienen de Google, yGoogle slo ve lo que un ciego puede ver. Si tu sitio no esaccesible, tendrs menos visitas. Fin de la historia(Pemberton)

Difi lt d l l b


21/49

Dificultades en el acceso a la webQuines?

Dificultad Estable

Discapacitados Fsicos(Visuales, Auditivos,Motricos).

DiscapacitadosPsquicos.

DificultadTemporal

Dificultad

Tecnolgica

Dificultadderivada de la

Edad


22/49

Accesibilidad Pautas y regulacin

W3C (Consorcio para el desarrollo de estndares y especificacionestcnicas para el crecimiento de Internet)

WAI (Iniciativa para la Accesibilidad Web)

WCAG 1.0 (Guas para el Contenido Accesible en la Web 1.0) Pautas A, AA, AAA

Prioridad 1, 2 Y 3

NuevoWCAG 2.0 (Guas para el Contenido Accesible en laWeb 2.0)

Nueva estructura

Niveles de adecuacin 1, 2 y 3

P d t M lti di A ibl


23/49

Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 1.0

1. Proporcionar alternativas equivalentes para el contenido visual y

auditivo2. No basarse slo en el color.

3. Utilizar hojas de estilo y hacerlo apropiadamente.

4. Identificar el idioma usado.

Crear tablas que se transformen correctamente.5. Asegurar la accesibilidad directa de las interfaces incrustadas.

6. Utilizar las tecnologas y pautas W3C.

7. Proporcionar informacin de contexto y orientacin.

8. Asegurarse de que los documentos sean claros y simples.9. No utilizar ventanas emergentes, o al menos hacerlas accesibles.

P d t M lti di A ibl


24/49

Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 2.0

El contenido debe ser perceptible.

La interfaz y sus elementos deben ser operables.

El contenido y los controles deben ser

comprensibles.

El contenido debe ser suficientemente robustocomo para poder funcionar tanto con latecnologa web actual como con la futura,incluyendo tecnologa asistiva.


25/49

Ayudas Tcnicas Software y HardwareSoftware

Lectores de pantalla

JAWS (Comercial)

ORCA (Libre, Open Source)

Gnopernicus (Libre, Open Source)

Magnificadores de pantalla Sistemas de reconocimiento de voz

Teclados virtuales, emuladores de ratn, sistemas de barrido.

Hardware

Lnea Braille, Horno Fusser.

Bucle magntico.

Ratones, teclados, dispositivos para manejo del teclado,pulsadores,etc
http://www.freedomscientific.com/downloads/JAWS/JAWS-downloads.asphttp://www.gnome.org/projects/orcahttp://www.baum.ro/gnopernicus.htmlhttp://www.baum.ro/gnopernicus.htmlhttp://www.baum.ro/gnopernicus.htmlhttp://www.gnome.org/projects/orcahttp://www.freedomscientific.com/downloads/JAWS/JAWS-downloads.asp


26/49

Estndares y especificaciones bsicas

Qu son los estndares web?

Conjunto de tecnologas y protocolos establecidos por elconsorcio W3C que definen, en relacin al contenidobasado en Web

Cmo se debe crear

Cmo se debe interpretar

Con la finalidad de que puedan estar siempre disponiblesy accesibles para todos los usuarios de la Red


27/49

Estndares y especificaciones bsicas

Por qu hay que disear con estndares?

Se trabaja ms rpido (aunque inicialmente lleve ms tiempoaprenderlos)

El mantenimiento es ms fcil, sencillo y rpido.

Es menos costoso

Centralizan el diseo (en pocos ficheros, fcilmente administrables)

Facilita el despliegue en cualquier SO, navegador, dispositivo(antiguo, actual o futuro) y salida (pantalla, impresin)

Ficheros ms optimizados (descarga y presentacin ms rpida)

Mayor accesibilidad y mejor experiencia de usuario

Facilitan el posicionamiento en los buscadores (marcado semntico) En consecuencia, maximiza la audiencia potencial


28/49

Principios decomposicin ydiseo visual


29/49

La comunicacin multimedia

VISUAL Fija

Movimiento

AUDITIVA Voz

Msica Efectos

INTERACTIVA

Operaciones Itinerarios

TEXTUAL Texto grfico Texto escrito


30/49

Cmo producimos comunicacin visual?

LenguajeAlfabeto Sintaxis ComunicacinComunicacin visual

Creacin de significado con el concurso de

Tcnicas visuales de composicin
http://www.eveo.com/http://ares.cnice.mec.es/infantil


31/49

Qu son las tcnicas visuales de composicin?

Son un conjunto de estrategiasy tcnicas que nos permitenconstruir el mensaje visual ypredecir cul ser lareinterpretacin

estadsticamente posible delmensaje visual por parte delreceptor.

Supone la interaccin de paresopuestos e inseparables:

Contenido Forma

Creador Audiencia(Autolector)

Dodo Arslan.it
http://www.arslan.it/http://www.arslan.it/


32/49

Cules son esas tcnicas?

El mensaje visual se construyea travs de la definicin devarios factores que funcionanconjuntamente:

Textura Forma

Estructura

Mdulo

Movimiento

Color

Frank Gebhard - www.cpeach.de
http://www.cpeach.de/http://www.cpeach.de/http://www.cpeach.de/


33/49

Uso del color en el diseo web


34/49

Herramientas online para color web

Herramienta en lnea de Adobe: http://kuler.adobe.com/
http://kuler.adobe.com/


35/49

Modelos de diseo web

Di d I f


36/49

Diseo de Interfaces

Qu es una Interfaz? La Teora de los procesos de

interaccin persona-ordenador define la interfazde un sistema interactivo

como un dispositivotecnolgico que permiteuna interaccin amigablecon dicho sistema a travsde modelos de

representacin de distintotipo (textual, visual, sonoro,etc.)

Interfaz principal de la web Same

Interfaz principal de la web VeraT

i l d i f


37/49

Tipologa de interfaces

PARC User Interface (PUI)

Touchscreen user interface (TUI)

Interfaces 3D

Zooming user interface (ZUI)

Interfaces multimodales

Experiencia ms completa y real

Experiencia menos completa y real

d li i


38/49

GUIProceso de realizacin Procesos que intervienen en el desarrollo de una aplicacin

compuesta de diferentes interfaces de usuario:

1. Conceptualizacin: desarrollo de un prototipo de interfaz de usuario.

2. Creacin de una lnea de diseo: nmero reducido de pantallas (2 a 3) en lasque se definen los elementos grficos que caracterizarn a la aplicacin.

3. Diseo de todas y cada una de las pantallas (interfaces) que componen la

aplicacin.4. Programacin de efectos visuales (si los hubiera: gifs animados, Flash, etc.)

5. Programacin cliente: desarrollo de las interfaces previamente diseadas.

6. Programacin servidor: programacin de la/s interaccin/es prevista/s enla interfaz.

i f b l b i


39/49

Tipografa Web Reglas bsicas Bsicas

Legibilidad por encima de todo Usar fuentes sans-serif para mostrar en pantalla

Usar medidas en ems e integradas en CSS (nuncapxeles)

Alto contraste letra-fondo

Preferentemente, usar colores seguros para la web

Fuentes seguras: Arial, Verdana y Georgia.

No utilizar cursivas tiles

Los textos enlazados en azul y subrayados


40/49

Tcnicas de

guionizacinmultimedia

El guin en los procesos de creacin multimedia


41/49

El guin en los procesos de creacin multimediaFunciones

Recoge los resultados de las tareas de documentacin

Concreta la arquitectura de la informacin: Organizacin de la informacin y los contenidos

Recuperacin de la informacin

Estructura de la informacin e interaccin

Define la utilizacin de elementos multimedia

Define los elementos narrativos: Personajes

Accin

Espacio

Tiempo

Presenta la estructura narrativa

Sirve de orientacin a las tareas de produccin

Desarrolla la informacin, los contenidos, el relato.

Elaboracin de un guin multimedia


42/49

Elaboracin de un guin multimedia Fases de elaboracin

1. Documentacin previa > Ideacin

2. Seleccin de elementos multimedia

Ilustracin, animacin, fotografa, vdeo, msica,efectos sonoros, locuciones, textos escritos)

y su tratamiento.

3. Diseo de la arquitectura de la informacin:

Seleccin de contenidos

Definicin de la Interfaz (funciones y elementos) (*)

Definicin de la navegacin Estructura de contenidos:(*) Diagrama de arquitectura (*)

Elaboracin de un guin multimedia
http://ficheros_base/fichero07_multimedia/ej_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_aventura.pdfhttp://ficheros_base/fichero07_multimedia/ej_aventura.pdf


43/49

Elaboracin de un guin multimedia Fases de elaboracin

4. Descripcin de existentes: escenarios,

personajes y elementos grficos de la interfaz.

5. Descripcin de la accin y la interaccin: (*) (*)

Estructura: bloques / secuencias / escenas / planos Variables: tareas de fondo; eventos interaccin

(si...entonces)

Contenidos: accin y dilogos -locuciones-.

T i d i lti di
http://ficheros_base/fichero07_multimedia/ej_esquema_navegacion.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_hipermedia.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_hipermedia.pdfhttp://ficheros_base/fichero07_multimedia/ej_esquema_navegacion.pdf


44/49

Tcnicas de guin multimedia

Storyboarding

T i d i lti di


45/49

Tcnicas de guin multimedia

Wireframing

M d l d i lti di


46/49

Modelos de guin multimedia

Estructura de navegacin, prototipado

A li i l d i l ifi i


47/49

Aplicaciones para el proceso de guin-planificacin

Tipologa de aplicaciones

AplicacionesProduccinmultimedia

Creacin(Guin)

Planificacinde la

Produccin

Previsiny seguimiento

produccin

Integrales

EspecializadasFlujo de

trabajo

Creacin deStory Board

Referencias


48/49

Referencias

Claves de diseo

Stanford Web Credibility Research (http://www.webcredibility.org) Internet System Consortium (http://www.isc.org/index.pl?/ops/ds/hosts.php)

WebbyAwards (http://www.webbyawards.com)

Conceptos sobre usabilidad (http://ingenieriasimple.com/usabilidad/)

Usabilidad

Useit.com (Jakob Nielsen) Usarte.org

No solo usabilidad

Accesibilidad

W3C, FUNDACIN ONCE, SIDAR, FIAPAS , CEAPAT, CESYA, RPD (Real

Patronato para la Discapacidad)

Herramientas

BrowserShot, TypeTester, Kuler

LOGO
http://www.webcredibility.org/http://www.isc.org/index.pl?/ops/ds/hosts.phphttp://www.webbyawards.com/http://ingenieriasimple.com/usabilidad/http://www.useit.com/http://www.nosolousabilidad.com/http://browsershots.org/http://www.typetester.org/http://kuler.adobe.com/http://kuler.adobe.com/http://www.typetester.org/http://browsershots.org/http://www.nosolousabilidad.com/http://www.useit.com/http://ingenieriasimple.com/usabilidad/http://www.webbyawards.com/http://www.isc.org/index.pl?/ops/ds/hosts.phphttp://www.webcredibility.org/


49/49

LOGO

Tecnologas Multimedia Publicidad y RRPP

Producción y diseño multimedia

Documents

Transcript of Producción y diseño multimedia