Nuevos medios de interaccin aplicados al

desarrollo de productos multimedia.

Ms all del clic

Enero 2013

Objetivo
Presentar nuevas formas de interaccin
aplicadas a los productos mul4media.
Mostrar las Fases del Desarrollo de un proyecto
mul4media interac4vo y los Resultados de
Aprendizaje de los mdulos del ciclo.
Presentar las tecnologas aplicadas a cada Fase
del Desarrollo de un proyecto mul4media
interac4vo.

Clic / Touch

Multitouch / Gesture

Clic / Touch / Multitouch

Te veo
Un primer paso hacia la integracin de las personas
con los desarrollos mul4media es que la interaccin
con estas aplicaciones y con los videojuegos se
pueda hacer sin tener que tocarlas Csicamente.
Estamos hablando de deteccin de movimiento.
La webcam es realmente el mando de nuestra
aplicacin ya que es quien detecta lo que hacemos
y se lo transmite a la aplicacin.

Expositores interactivos

Rural Games

La innovacin a tu alcance
La innovacin no es slo concebir nuevas formas de
interactuar, tambin es innovacin cambiar la forma
en que usamos las que ya tenemos y conocemos.
Muchos de los espacios mul4media que incorporan
grandes desarrollos y grandes infraestructuras
4enen lugar en una ubicacin Csica concreta y las
personas que los visitan se llevan de ellos recuerdos
y sensaciones.

Cdigos QR. Informacin Ubicua

Cada vez ms fcil

Fases de un Proy. Mult. Interactivo

El cmo y el cundo

Primero los objetivos

El diseo de un proyecto mul4media interac4vo
es un proceso secuencial que se desarrolla
pensando ms en las personas que lo van a
u4lizar, que en el producto propiamente dicho.

Ahora unas consideraciones generales

La concepcin de un proyecto mul4media, se deben
tener presentes criterios:
Consistencia
Visibilidad
Previsibilidad
Aprendizaje
Feedback

Un proyecto multimedia
se debe disear un interface organizado y estructurado donde
los elementos 5ene siempre el mismo signicado y aparecen en
las mismas posiciones, haciendo que el proceso de aprendizaje
de los usuarios para poder interactuar con la aplicacin sea lo
menor posible, y adems la aplicacin debe informar a los
usuarios sobre todas las acciones que estn teniendo lugar para
que no haya dudas sobre la interacciones hombre-mquina y el
estado de ejecucin de las mismas.

Proceso de Diseo Proy. Mult. Interactivo

Fase I: Maqueta
Esta fase va ms all de un esquema a mano
alzada en el que se le explica verbalmente al
cliente el funcionamiento de los elementos y se
le dicen frases como
aqu van los logo.pos , este botn, te
pregunta si quieres salir de la aplicacin ,
aqu tenemos un men que se despliega .

Fase I: Maqueta Wireframing

Existen muchas aplicaciones que permiten
disear un boceto en formato digital,
wireframing, y darle vida, pudiendo hacer que
los objetos tengan comportamientos y
respondan a eventos de la misma forma en la
que lo harn el proyecto nal.

Fase I: Optimizacin con Wireframing

Mejorar de la comunicacin entre las
empresas desarrolladoras y los clientes,
hacindola ms uida y clara, permi4endo ver
resultados desde la primera reunin.
Mejorar la comunicacin entre los dis4ntos
perles profesionales involucrados en la
creacin del producto dentro de una empresa
mul4media sea ms gil y efec4va.

Fase I: Plantilla Wireframing (ai, eps)

Fase I: Soluciones Wireframing

Fase I: Maqueta

Fase II: Optimizacin de Recursos

Fase II: No todo vale

No tenemos formatos ni soportes nicos y la
mxima en el acceso a la informacin est en su
disponibilidad tanto a nivel de horarios, de
ubicacin para el acceso y del disposi4vo
u4lizado para ello.
Estamos hablando de informacin y aplicaciones
ubicuas y debemos tener claro lo que esto
implica. Debemos ajustarnos a las
especicaciones del proyecto.

Fase II: Contenidos

Fase III: Como anillo al dedo

En un proyecto mul4media interac4vo,
mul4disciplinar por naturaleza, todo debe
encajar como anillo al dedo, es de vital
importancia disponer de una pol4ca de ges4n,
centralizacin y control sobre la informacin.
Se debe garan4zar la disponibilidad, la
integridad y la condencialidad de los elementos
necesarios para cada fase del proyecto.

Fase III: Repositorio

Fase IV: La varita mgica

Una aplicacin mul4media es un coleccin de
objetos que 4ene propiedades especcas y que
responden a la interaccin con ellos a travs de
la respuesta a eventos .
Las especicaciones denen las propiedades y
los eventos que se deben asignar a cada objeto,
siendo funcin del disposi4vo en el que se van a
u4lizar.

Fase IV: Programacin

Fase V: Cerrando el ciclo

Todo lo que nos rodea 4ene un ciclo de vida que
culmina en un producto o en un servicio.
Un equipo dene un estrategia y se prepara
durante toda la semana para el par4do del domingo.
Todos saben lo que 4ene que hacer y como trabajar
en equipo.
Un cocinero sabe el plato va a preparar y busca los
ingredientes ms adecuados, los procesa y todos
juntos crean nuevas experiencias para el paladar.

Fase V: Proyecto

Listos para interactuar

Innovaciones en el desarrollo de
aplicaciones Web.
Movilidad y portabilidad

Diciembre 2012

Informacin Ubicua
Acceso 24 x 7
Acceso 24 x 7 x Ubicacin
Acceso 24 x 7 x Ubicacin x Disposi@vo
Los usuarios queremos acceder a la
informacin cuando queramos, donde
queramos y con el disposi@vo que queramos.

Informacin Ubicua

Qu consumo hacemos de
contenidos web?

e, m, t, u . *-learning
Empezamos hablando de e-learning o formacin
virtual, y evolucionamos hacia el t-learning y
ahora al m-learning para dar respuesta tanto a
los dis4ntos perles personales y profesionales,
como a las necesidades que los par4cipantes en
los procesos forma4vos puedan tener en cada
momento, no solo en cues4ones horarias sino
en la forma en que acceden a los contenidos

Serious Game
Los Serious Game son una nueva forma de
aprender, ms interac4va y dinmica que
consiste en la creacin de entornos de
entretenimiento aplicados al sector educa4vo.
Aprender haciendo -> Aprender jugando

Simulador de entrevistas

Soluciones para Serious Game

Cdigos QR. Requisitos

Telfono mvil
Cmara integrada
SoTware lector de Cdigos QR
Acceso Internet (Opcional)

Cdigos QR. Acceso a la informacin

Cdigos QR. Acceso a la informacin (II)

Cdigos QR. Acceso a la informacin (III)

Cdigos QR. Creando contenidos (I)

ZXING
hp://code.google.com/p/zxing/

Cdigos QR. Creando contenidos (II)

ZXING
hp://code.google.com/p/zxing/

Cdigos QR. Creando contenidos (III)

ZXING
hp://code.google.com/p/zxing/

Cdigos QR. Turismo

Cdigos QR. Marketing Viral

Cdigos QR. Decoracin QR

Geoposicionamiento
Localizacin exacta
de recursos
informa4vos y
mul4media

Geoposicionamiento. Ejemplo (I)

Geoposicionamiento. Ejemplo (II)

Geoposicionamiento y
Realidad Aumentada. Musestica

Realidad Aumentada
La Realidad Aumentada o Augmented Reality
consiste en un conjunto de disposi4vos que
aaden informacin virtual a la informacin
Csica ya existente. Es una tecnologa innovadora
relacionada con la Realidad Virtual de la que se
diferencia en que la Realidad Aumentada no
sus4tuye a la realidad Csica, sino que los
elementos virtuales se integran en el mundo
real; se sobreimprimen.

RA. Video Comercial

RA. Aplicacin Comercial

RA. Herramientas

Quin manda en la Red?

Adobe Flash
MicrosoT Silverlight
HTML5+CCS3

Adobe Flash Platform

Microsoft Silverlight

HTML5
Desde 2009, el nuevo rumbo para el desarrollo
de pginas y contenidos web.
Mxima difusin gracias a Apple y sus
disposi@vos mviles.
Se plantea que sea el sus@tuto de Adobe
Flash como estandar de la web.
Adobe pone en el mercado Adobe Edge

HTML5. Novedades
Campo de voz: x-webkit-speech
GPS
Mul4touch
Drag and Drop
Audio y Video Tags
Web fonts
Local Storage

HTML5. Geoposicionamiento

HTML5. Geoposicionamiento (Cdigo)

HTML5. x-webkit-speech

> versin 11

HTML5+CSS3

HTML5. Adobe Edge

HTML5. Adobe Edge

Multidispositivo - Multiespecificaciones

www.thecrazytable.com
Caso prctico. Especificaciones:
WEB QUE PERMITA INTERACTIVIDAD
QUE SE AJUSTE AL TAMAO DE LAS PANTALLAS
QUE SE AJUSTE A LA ORIENTACIN DE LOS DISPOSITIVOS
QUE SE VEA EN TODOS LOS DISPOSITIVOS MVILES
QUE SOLO CARGUE LO NECESARIO
QUE CARGUE RPIDO

Usuarios de escritorio: Desktop

Usuarios mviles = 320x480

Usuarios mviles = 640x960

Usuarios mviles = 768x1024

Usuarios mviles = 600x1024

Usuarios mviles = Otros

www.thecrazytable.com

MEDIA QUERIES

Dreamweaver. Webs MultiScreen

Movilidad y Portabilidad
La clave del xito es dimensionar el
proyecto correctamente y
ajustarse a las especificaciones
establecidas en la fase de diseo.

Desarrollo de aplicaciones de
entretenimiento.
Juegos y multimedia

Diciembre 2012

No hay excusa para no crear

Son muchos y variados los entornos de desarrollo de
videojuegos, pero todos 4enen en comn el hecho de
que permiten desarrollar productos para dis4ntos 4pos
de videoconsolas, para ordenadores de sobremesa y
muchos de ellos tambin para disposi4vos mviles.
Para aquellos que quieren desarrollar juegos de forma
ocasional existen libreras para ges4onar este 4po de
elementos y para ges4onar los mandos de las
videoconsolas y aprovechar sus prestaciones.

Entornos de trabajo

Juegos con AS3

Crazy Table Pantalla acceso

Crazy Table Pantalla men

Crazy Table Pantalla colorear

ESPECIFICACIONES
A quin va des4nado este juego?
Cmo se juega? Se guarda informacin de cada juego?
Dnde va a estar disponible? Plataforma, Disposi4vo,
Cmo se va a comercializar? Precio, Publicidad,

Especificaciones

Adobe Flash Professional

Configuracin de especificaciones (I)

Desktop

Aplicaciones AIR

Configuracin de especificaciones (II)

iOS

Android

Bocetos - Men

Bocetos Pintura 1

Bocetos Pintura 2

Bocetos Pintura 3

Bocetos Volver a pintar

Fase de adecuacin de medios

Genera y adapta mdulos de informacin
mul4media integrando fuentes de imagen ja
(ilustracin y fotograCa), imagen en movimiento
(vdeo y animacin), sonido y texto,
relacionando la modalidad narra4va de los
proyectos mul4media con el ajuste de las
caracters4cas tcnicas y formales de las fuentes
y mdulos de informacin.

Formato grfico
Vectorial para Desktop
Capacidad de escalado.
Raster para Mobile
Op4mizacin de recursos del disposi4vo

Galera grfica

Galera de componentes

Diseando para cada dispositivo

Fase de creacin y gestin repositorio

Cataloga las fuentes y mdulos de informacin
mul4media analizando protocolos normalizados
de archivo e intercambio de fuentes y aplicando
herramientas de administracin de medios
digitales.

Repositorio de contenidos

Fase de programacin de interactividad

Genera los elementos interac4vos de un
proyecto mul4media, integrando fuentes de
animacin, imagen, sonido y texto analizando
los diferentes mtodos de introducir el cdigo
para el correcto funcionamiento de los
productos y empleando herramientas de autor.

Programacin para 1 figura

Fase de creacin del proyecto/producto

Genera y sincroniza la secuencia de mdulos de
informacin en cada pantalla, pgina, nivel y
diaposi4va del proyecto mul4media, valorando
las diferentes modalidades narra4vas y ritmos
especicados en el guin.

Programacin para n figuras

Especificaciones AIR

Especificaciones Android (I)

Especificaciones Android (II)

Especificaciones iOS (I)

Especificaciones iOS (II)

Iconos para publicacin

Iconos para Android

Especificaciones Android Market

Pantalla promocional Android

Iconos para Apple

Apple Store
hdp://developer.apple.com

Gestin Apps en Apple Store

Pantallas registro App en Apple Store

Listos para interactuar

GRACIAS

seran.alvarez@zenitsolu4ons.com