Planificacin y Realizacin de

Proyectos Interactivos
Dr. Sebastin Maas

Aproximacin a los Medios Interactivos desde el punto de vista del

profesional audiovisual y estudio del recorrido que ha de seguirse
desde la ideacin a la comercializacin de sus productos culturales.
Sera interesante vincular especficamente los conocimientos de
esta materia con los de Edicin Multiplataforma, Guin
Especializado y de Diseo Grfico y de Videojuegos.

Programa
1. Introduccin a la Planificacin y Realizacin de Proyectos
Interactivos.
2. Organizacin y Gestin de los Recursos (tcnicos y
humanos; temporales y presupuestarios).
3. Tcnicas y Procesos de Realizacin Interactiva. El Guin
Interactivo. Esquemas de Navegacin. Diseo del Interfaz.
Elaboracin de Contenidos. Integracin Multimedia.
4. Formatos, Plataformas y Modalidades Audiovisuales
Interactivas.
5. Acabado y Comercializacin de Productos Interactivos.

Bibliografa Bsica
Anderson, Stephen P. (2011): Diseo que seduce . Cmo desarrollar webs y aplicaciones
atractivas al usuario. Anaya Multimedia. ISBN: 978-8441530614.
England, E. y Finney, A. (1999): Managing Multimedia. Addison-Wesley. ISBN: 078-5342360585.
(http://www.atsf.co.uk/manmult/).
England, E. y Finney, A. (2007): Managing Interactive Media: Project Management for Web and
Digital Media. 4th edition. Addison-Wesley. ISBN: 978-0321436931. (http://www.atsf.co.uk/mim/
index.html).
Garrand, T. (2007): Escribir para Multimedia y la Web. ESCIVI. ISBN: 978-8493576974.
Kristof, R. y Satran, A. (1998): Diseo Interactivo. Anaya Multimedia. ISBN: 978-8441504219.
Nunes, Jason y Pratt, Andy (2013): Diseo Interactivo. Teora y aplicacin del DCU. OcanoAmbar. ISBN: 978-8475568324. (http://www.andypratt.net).
Orihuela, Jos Luis y Santos, Mara Luisa (2000): Introduccin al Diseo Digital. Concepcin y
Desarrollo de Proyectos de Comunicacin Interactiva. Anaya Multimedia. ISBN: 978-8441509702.
(http://www.unav.es/digilab/guia/index.htm).
Salmond, Michael y Ambrose, Gavin (2014): Los fundamentos del Diseo Interactivo. Una
introduccin a las artes visuales aplicadas. Blume (Naturart). ISBN: 978-8415317883.

!
EPUB
Libro Blanco de Apps Mviles (2011) (http://www.innopro.es/wp-content/uploads/libroblanco.pdf).
Libro Blanco de la Televisin Interactiva (2009) (http://iabspain.net/descargas/descarga.php?
id=129).
Libro Blanco de las Web Mviles (http://datos.portaldelcomerciante.com/MiAfic/userfiles/30/
Biblioteca/4172469972a021925972webmovil.pdf).

Bibliografa Complementaria
ARONOWITZ, S., MARTINSONS, B. Y MENSER, M.:
Tecnociencia y Cibercultura. Paids.
BARRETT, EDWARD Y REDMOND, MARIE: Medios
Contextuales en la prctica cultural. Paids.
BETTETINI, G. Y COLOMBO, F.: Las Nuevas
Tecnologas de la Comunicacin. Paids.
BOU BOUZ, GUILLEM: El guin multimedia. Anaya.
CRAWFORD, CHRIS: On Interactive Storytelling.
DARLEY, ANDREW: Cultura Visual Digital. Paids.
DELICADO, J.: Sistemas Multimedia. Sntesis.
GAWLINSKI, MARK: Produccin de televisin
interactiva. ESCIVI.
IUPPA, NICHOLAS V.: Designing Interactive Digital
Media. Focal Press.
KERCKHOVE, DERRICK DE: Inteligencias en
Conexin. Gedisa.
KNAPP, ALBERTO: La Experiencia del Usuario. Anaya.
KRUG, STEVE: No Me Hagas Pensar. Prentice-Hall.
LAUREL, BRENDA: Computer as Theatre. AddisonWesley.
LAUREL, BRENDA: The art of human-computer
interface design. Addison-Wesley.

MALDONADO, TOMS: Crtica de la razn informtica.

Paids.
MANDEL, THEO: The elements of user interface
design. Wiley.
MANOVICH, LEV: El lenguaje de los nuevos medios de
comunicacin. Paids.
MORENO, ISIDRO: Musas y Nuevas Tecnologas.
Paids.
MURRAY, JANET H.: Hamlet en la Holocubierta.
Paids.
NIELSEN, JACOB: Usabilidad. Prentice-Hall.
PISCITELLI, ALEJANDRO: Ciberculturas. Paids.
PISCITELLI, ALEJANDRO: Post/Televisin. Paids.
REVISTA DE OCCIDENTE: N 206, La Revolucin
Digital.
RHEINGOLD, H.: Realidad Virtual. Gedisa.
RYAN, MARIE-LAURE: La narracin como realidad
virtual. Paids.
SCOLARI, CARLOS: Hacer Clic. Gedisa.
SCOLARI, CARLOS: Hipermediaciones. Gedisa.
SHNEIDERMAN, B. y PLAISANT, C.: Diseo de
Interfaces de usuario. Pearson.
VARIOS: Usabilidad. Anaya.

https://www.cac.cat/web/recerca/quaderns/hemeroteca/

Otras referencias

http://www2.deloitte.com/es/es/industries/technology-media-andtelecommunications.html?icid=top_technology-media-and-telecommunications

http://www2.deloitte.com/content/dam/Deloitte/es/Documents/tecnologiamedia-telecomunicaciones/Deloitte_ES_TMT_Consumo-movil-espana-2014def.pdf

http://www2.deloitte.com/content/dam/Deloitte/es/Documents/tecnologiamedia-telecomunicaciones/Deloitte_ES_TMT_Prediccioes-2015.pdf

http://www2.deloitte.com/content/dam/Deloitte/es/Documents/acerca-dedeloitte/Deloitte_ES_TMT_Media-Survey-2014.pdf

http://www.fundaciontelefonica.com/2015/09/22/aplicaciones-y-videojuegosutilizar-aula/

http://www.fundaciontelefonica.com/arte_cultura/publicaciones-listado/paginaitem-publicaciones/?itempubli=323

http://www.fundaciontelefonica.com/arte_cultura/publicaciones-listado/paginaitem-publicaciones/itempubli/11/

Evaluacin
Desarrollo prctico de un Proyecto Interactivo Audiovisual para alguna de las plataformas actuales (mvil,
ordenador, web, consola...). Estudio, anlisis, documentacin y exposicin terica de las ltimas tendencias
comunicativas y culturales recogidas en fuentes actualizadas bibliogrficas y electrnicas.

!
!

El estudiante deber comprender la terminologa general y especfica, las tcnicas de produccin y diseo y
el contexto de desarrollo en el mbito profesional del Diseo de Productos Interactivos. Deber ser capaz de
desarrollar un proyecto real viable y un prototipo operativo (segn ciertas directrices preestablecidas) de un
producto interactivo, original y creativo, para informar, formar y/o entretener. Asimismo, ha de desarrollar la
habilidad para la organizacin y temporalizacin de las tareas en el management de un producto interactivo.

!
!

El estudiante debe realizar 2 pruebas obligatorias (para todas las convocatorias, ordinarias y extraordinarias):
1 trabajo prctico (en grupo de 6 personas, cuando sea posible), entregado en PDF (Memoria breve con un
mximo de 5 pginas, sin contabilizar los Diagramas de Flujo ni los Wireframes/Layouts) y en PPS (prototipo
operativo bsico) mediante subida en el Campus Virtual (aportacin del 50%); y 1 examen terico, realizado
mediante el Campus Virtual (aportacin del 50%). Hay que aprobarlos por separado para calcular la Nota
Media de la asignatura, ya que en caso contrario se considerar suspensa por completo.
Para el alumnado con el reconocimiento de estudiante a tiempo parcial y con el reconocimiento de deportista
universitario de alto nivel el procedimiento es idntico que para el resto de los estudiantes, sin excepcin.

Informacin general, entregas

de cualquier tipo de Trabajo y
realizacin del Examen Final
mediante la plataforma del
Campus Virtual de la UMA

Tutoras
Presenciales (despacho 57):
martes de 10:30 a 12:30
mircoles de 11:30 a 12:30
viernes de 10:30 a 11:30
!

Virtuales (en el Campus):

lunes de 11:30 a 13:30

Proyecto Interactivo
(parte prctica)

1. PDF Proyecto (5 pp.)

Ttulo y Autores (fecha)

Resumen y Mapa

Introduccin / justificacin / fundamentacin / destinatarios

Antecedentes / DAFO / mercado / competencia / contexto

Mtodo / estrategia / objetivos / recursos

Desarrollo

Conclusiones

Prospectiva

Referencias

[Apndices / anexos]

!
2. Prototipo Funcional (operativo) en PPS

Descripcin general
(Breve descripcin del proyecto)

!
Desarrollo estructural
(Descripcin detallada de la estructura del proyecto)

!
Desarrollo grfico
(Especificar con qu tipo de desarrollo grfico contar el proyecto: 2D, 3D, estilos, etc.)

!
Desarrollo de audio
(Descripcin del desarrollo de audio con que contar el proyecto, por ejemplo: msica original,
efectos sonoros, referencias, etc.)

!
Tecnologas a utilizar
(Especificar sobre qu plataforma se desarrollar, que tecnologas se utilizarn, lenguajes de
programacin, versiones, etc.)

!
Tiempos de desarrollo
(expresado en das hbiles)

!
Alcance de los derechos
(indicar si hay restriccin temporal o territorial)

!
Observaciones

Ejemplo

Las Mariposas (lepidptero u otros?)

Butterfly

Entomologa

Mariposario

Imgenes

Hbitos y comportamientos

Significado del smbolo (Psi) y su relacin con la mariposa

Metamorfosis ...

Tema 1
Introduccin a la disciplina

http://www.exabyteinformatica.com/manuales-y-apuntes-freeware/

Planificacin:

!
Crear el Plan de trabajo.
Elaboracin anticipada de un plan de accin.
Definicin de Propsitos e Intenciones.
Preparacin de un proyecto.
___________________________________
Realizacin:

!
Efectuar, llevar a cabo algo o ejecutar una
accin.
Construccin.
Fabricacin.
Ejecucin.
Produccin.
Desarrollo y puesta en prctica.
___________________________________
Proyecto:

!
Primer esquema o plan de cualquier trabajo
que se hace a veces como prueba antes de
darle la forma definitiva.
Visin de Futuro.
Representacin.
___________________________________

Interactivos (productos).

Breve historia de la interactividad

1958 - arte por computadora

analgica, John Whitney

Ivan E. Sutherland con

Sketchpad (1963) -> Interactive
CG en Tiempo Real. Primer GUI
(WIMP 1980)

1960 - Time Sharing (tiempo

compartido) frente a Batch (lotes)

Se habla de HCI -> Modelo

conversacional o dialgico

Theodore H. Nelson con

Hipertexto e Hipermedia
(Xanadu, 1960) y el Docuverso

1965 - Michael Noll pelcula 3D

tcnica de proyeccin
estereogrfica.

1968 - 3D en la Compaa Evans

& Sutherland

1960 - William Fetter (en Boeing)

"Computer Graphics"

1972 - Atari (Nolan Bushnell)

1978 - "Interactive Video" por el

Architecture Machine Group
(Media Lab) Multimedia. Nicholas
Negroponte

Apple HyperCard (1987)

1962 - primer juego de

ordenador, Spacewars!, Steve
Russell (MIT)

1963 - Ratn deDouglas

Engelbart

Vdeo Interactivo

El primer video interactivo de la historia considerado como tal

fue la pelcula Kinoautomat, del director checo Radz iera.
Este trabajo de 1966-67 se present en la Expo 67 de
Montreal, dentro del pabelln de la entonces Checoslovaquia.
La accin se iba desarrollando hasta que la pantalla se divida
en dos, se planteaban dos posibles continuaciones y un
presentador peda al pblico que votase por la opcin que
prefera. (https://youtu.be/x1TLcz3UFg8).!
!
http://www.editando.cl/2015/08/4-ejemplos-de-video-interactivo-auge-evolucion.html/!

El Aspen (Interactive) Movie Map fue un revolucionario

sistema hipermedia desarrollado en el MIT por un equipo de
trabajo con Andrew Lippman en 1978 con la financiacin de la
ARPA. (https://www.youtube.com/watch?v=Hf6LkqgXPMU).

Accin - Reaccin - Interaccin.

Pasivos - Reactivos - Interactivos.
!

Interactividad del usuario explorativa o selectiva vs. una

interactividad configurativa.
!

Generativo - Emergente.
!
liver Prez Latorre (2012): EL LENGUAJE VIDEOLDICO. Anlisis de la significacin del videojuego (Laertes, Barcelona).

!
!

Dicotomas:
Expresin y Contenido.
Lenguaje/Medio y Producto/Discurso.
Sistema y Proceso.

Demarcacin / Delimitacin
INTERACCIN
!
!
!
!
!
!
!
!

HMI

HCI
ID

Interaccin vs. Interactividad

Accin que se ejerce recprocamente
entre dos o ms objetos, agentes,
fuerzas, funciones, etc.

Cualidad de interactivo.

Interactivo:

Interactivo:

Que procede por interaccin.

Accin:

Dicho de un programa que permite una

interaccin, a modo de dilogo, entre el
ordenador y el usuario.

Resultado de hacer.

Actividad:

Efecto que causa un agente sobre algo.

!

Conjunto de operaciones o tareas

propias de una persona o entidad.

Nivel Mnimo: Elemento.

Nivel Mnimo: Sistema.

INTERACTION

INTERACTIVITY

??????????????????

Interaccin vs. Interactividad

Accin recproca.

Bidireccionalidad.

Intencionalidad Respuesta.

Muy Alto Nivel: P - P (HHI)

Inteligencia. Complejidad.

Simulacin / Imitacin.

Participacin Activa.

GPS

Aplicacin Mapas

Telfono (A/D)

Aplicacin Telfono

TV

TV+(Telfono o Internet)

Vdeo

Vdeo + Ordenador

...

...

Ciberntica Interactividad
Digital Interactividad
Multimedia Interactividad
CMC = Interactividad

The term interactivity is overused and underunderstood.

I choose to define it in terms of a conversation: a cyclic
process in which two actors alternately listen, think, and
speak. The quality of the interaction depends on the
quality of each of the subtasks (listening, thinking, and
speaking).
Crawford, C. (2003)

Producto Interactivo
Vnculos epistemolgicos
Industrias Culturales
Medios de Comunicacin
Fundamentos Tecnolgicos
Principios Narrativos
Leyes Constructivas
Fruicin
Experiencia (UX)

Producto Interactivo
Relaciones disciplinares (trans-, pluri-, multi-, nter-)

Ingeniera Electrnica e Informtica (Funcionalidad):

Tecnologa de Ordenadores y de Consumo

Infografa (Computer Graphics)
Interaccin Hombre-Mquina (HCI) y Ergonoma Cognitiva (~1960)

=> (Telecomunicaciones e Imagen y Sonido)

Diseo Grfico (Conjuncin de Forma Esttica y

Funcin Objetual) y Bellas Artes
!

Teatro y Msica
!

Medios de Comunicacin (Mensajes y Contenidos)

!

Tecnologa Educativa (Eficacia Didctica y

Organizacin)

Soporte Bsico de la Interactividad

Ordenador / Computadora / Procesador

(Realiza) Ejecuta Secuencias de rdenes (comandos o

instrucciones):

Imperativas
Condicionales
Operaciones
Bucles
Rutinas
Unidad de Control (CPU)
!

Eje IT (TIC)

Evolucin (info-)grfica
Dibujo con Juego de Caracteres (MDA: Monochrome Display
Adapter) [1981].
CGA (Color Graphics Adapter) [1981]: resolucin de 320200
pxeles y 4 colores totales.
EGA (Enhanced Graphics Adapter) [1984]: 640350 y 16 colores
totales.
VGA (Video Graphics Array) [1988]: 640 480 y paleta de 256
colores.
!
!

SVGA (Super Video Graphics Array) [1989]: 800 600 y 4 bits de

color y de 1024 768 pixels y 8 bits de color en la siguiente
generacin.
XGA (Extended Graphics Array) [1990]: 640x480 con una
profundidad de color de 16 bits por pixel (65.536 colores).

Fuente: Wikipedia

Espectculo Entretenimiento - Informacin

TECNOLOGA

Informacin
Clculo

Radio
Televisin
Vdeo

Electrnica

Fotografa

Imprenta

Cine

Ordenador
CD

Red

Medios de
Comunicacin
Electrnicos

Productividad
Gestin

Informtica

Medios de
Comunicacin
Impresos

EDL
DB

Interfaz H-M

INFOGRAFA
F/X

GUI

HT

CAD

Internet

DTP

MULTIMEDIA
(INTERACTIVA)
Realidad
Virtual

Videojuegos

DVD

Vdeo
Interactivo

Para Kristof y Satran (1998, 7):

Por definicin, lo que la gente hace en los ordenadores
siempre ha sido interactivo. Los ordenadores y el
software son herramientas y su propsito es ayudar a
las personas a interaccionar interactuar con palabras,
nmeros e imgenes. Hoy la diferencia radica en el
hecho de que los ordenadores se utilicen para
actividades que nunca antes se consideraron
interactivas, como la lectura, la observacin o,
sencillamente, la diversin. Esto significa que el
pblico, no el diseador, controla en este momento la
secuencia, la velocidad y, los ms importante, lo que
mirar y lo que ignorar.

Para Salmond y Ambrose (2014, 6):

Los principios clave del diseo interactivo (...) se hallan cada
vez ms presentes en todos y cada uno de los aspectos de
nuestras vidas (...). Los medios interactivos digitales tambin
son medios sociales (...) y es tambin una conversacin
bidireccional.
La propia naturaleza del hardware y software interactivos
consiste siempre en cambiar, actualizarse y mejorar.
El diseo, en esencia, se basa en la comunicacin, con
independencia del del medio o medios empleados. El diseo
interactivo busca cada vez ms crear una experiencia mediante
vnculos narrativos y afectivos (...) permiten una comunicacin
bidireccional y crean conexiones (...).

Para Salmond y Ambrose (2014, 10-14):

El diseo interactivo (tambin conocido como "diseo de medios
interactivos" o "diseo de medios digitales") abarca un amplio
espectro de medios, entre los que se incluyen videojuegos, DVD
educativos, sitios web, dispositivos mviles, interfaces de televisin y
tctiles.
Ampla y enriquece los medios tradicionales; permite al pblico
compartir y comentar el contenido, as como involucrarse e
interactuar con l, a diferencia de los medios estticos (o pasivos),
que no exigen una interaccin directa o una respuesta de su pblico.
Gracias a las tecnologas interactivas, gente de todo el mundo puede
crear, intercambiar y compartir contenidos, ya sean textos, vdeos,
msica o imgenes. Este tipo de contenido se denomina "contenido
generado por el usuario" (CGU).

Para Pratt&Nunes (2013: 6):

Hoy en da es ms importante que nunca que (...) seamos
capaces de disear para experiencias en las que interviene una
pantalla. El ordenador fue slo el principio; ahora las pantallas
estn por todas partes: televisores, mviles, tabletas, e-books,
coches, cajeros automticos, cajas de supermercado,
electrodomsticos, etc. El etctera es infinito.
En esencia, DCU (Diseo Centrado en el Usuario) significa
disear para las personas. Significa poner al ser humano, en su
faceta de usuario, en el centro del proceso creativo.
Pero hay que tener en cuenta que cada proyecto de diseo es
distinto y que son muchos los condicionantes que entran en
juego: estrategias, presupuestos, calendarios, etc.

(Segn Pratt&Nunes, 2013: 9)

https://es.m.wikipedia.org/wiki/Diseo_interactivo

Para Lev Manovich (2011) (en Pratt&Nunes, 2013: 10):

La novela defini la cultura del siglo XIX, el cine la
del siglo XX, y la interfaz definir la del siglo XXI.

Vivimos en una sociedad donde la informacin nos

desborda cada vez ms. Las personas (...) se mueven
entre un alud de datos y ruidos.

Los dispositivos electrnicos nos proporcionan

informacin que nos orienta, nos entretiene y nos
ayuda a tomar decisiones.

Informacin organizada, fcilmente accesible,

contextual e intuitiva.

(Pratt&Nunes, 2013: 16)

Para Dana Chisnell (en Pratt&Nunes, 2013: 18):

Los usuarios redisean continuamente y en tiempo
real las interfaces de los productos que utilizan. Se
convierten en codiseadores porque es imposible
que los diseadores prevean todas las formas de
uso posibles.

La base de todo diseo de interaccin es comprender

lo que el usuario quiere hacer en un momento dado
(Kristof y Satran, 1998: 41).

A travs del... interfaz

Ejemplos de Gametizazin
Magnum Pleasur Hunt
Magnum 2
Marketing de guerrilla
http://www.scifiinterfaces.com

Con el... usuario

Wearables

IoT

Bill Joy imagin la comunicacin D2D (del ingls: Device to Device, dispositivo a dispositivo), como parte de su
estructura de las "Seis Webs" (en 1999 en el Foro Econmico Mundial de Davos); pero no fue hasta la llegada
de Kevin Ashton que la industria le ech un segundo vistazo a la utilidad del internet de las cosas.

Bill Joys six Webs are:

!
1. The Near Web: This is the Internet that you see when you lean over a screen - like
a laptop.
2. The Here Web. This is the Internet that is always with you because you accesses it
through a device you always carry - like a cell phone.
3. The Far Web. This is the Internet you see when you sit back from a big screen - like
a television or a kiosk.
4. The Weird Web. This is the Internet you access through your voice and which you
listen to - say when you are in your car, or when you talk to an intelligent system on
your phone, or when you ask your camera a question. Joy concedes that this Web
does not yet fully exist.
5. B2B. This is an Internet which does not possess a consumer interface, where
business machines talk to other business machines. It is chatter of corporations
amongst themselves when they do not care about their human drones.
6. D2D*. This is the Internet of sensors deployed in meshes networks, adjusting urban
systems for maximum efficiency. This Web also does not yet exist. Joy says that it will
embed machine intelligence in ordinary, daily life.
*Ver M2M (machine to machine, 'mquina a mquina')
http://www.technologyreview.com/view/404694/etc-bill-joys-six-webs/

Hacia las Smart Cities y

el internet de las personas
(internet of me - IoM)
h t t p : / / w w w. s o c i n f o . e s / c o n t e n i d o / s e m i n a r i o s / 1 4 0 4 s m a r t c i t i e s 6 / 0 1 TelefonicaSMART_CITIES-2011.pdf

http://www.cmo.com/articles/2014/12/23/looking_back_and_ahe.html

http://www.wired.com/insights/2014/11/the-internet-of-me/

http://www.creatingsmartcities.es/blog/smartcity-fabrica-ciudad-inteligente/

http://www.creatingsmartcities.es/blog/el-internet-de-las-personas-desde-el-internet-de-las-cosas/

http://www.sumate.eu/2015/07/internet-cosas-internet-personas/#

http://www.cio.com/article/2383123/mobile/5-things-you-need-to-know-about-geofencing.html

Pantallas
Multimedia
Multiplataforma

a
i
d
e

M
l
a
i
c

Cross-media
Transmedia

o
S

Polimedia
Rich-media
Ver Diseo Sensible (Adaptativo o Responsivo o RWD)

Hasta alcanzar la...

experiencia total

Tema 2
Organizacin y Gestin de los Recursos

(Pratt&Nunes, 2013: 25)

(Pratt&Nunes, 2013: 25)

PM (Project Management)
-Direccin de ProyectosElaine England & Andy Finney:
"Managing Multimedia. Project Management for
Interactive Media". Second Edition.
Cambridge: Addison-Wesley, (1996) - (2007).

Multimedia is the seamless integration of text, sound, images of

all kinds and control software within a single digital information
environment. Tony Feldman (en England&Finney, 1999: 1).

Definicin aplicada (en esa etapa) a las producciones de

medios interactivos.

La diferencia est en el diseo (...) La capacidad de ver

posibilidades ms all del propsito original de un software o
hardware es una parte esencial del diseo interactivo. Es la
curiosidad lo que insta a la innovacin y al cambio, lo que crea
experiencias o productos todava ms atractivos y divertidos
(Salmond y Ambrose, 2014: 31). Ej.: Kinect o Wiimote.

Clases de Proyectos
Proyectos on-line (recursos remotos)
Intranet/Internet/Extranet
Mvil

Hbrido Web/CD
!

Proyectos off-line (autocontenido)

Presentacin multimedia
Educacin (formacin) y Edutainment
Kioscos/Puntos de Informacin y Venta (POI/POS)
Entretenimiento
Referencia
Publicidad
Publicacin
Proyectos internacionales

(Ver England&Finney, 1999: 1-2, 33-74)

(England&Finney, 1999: 6)

Presentacin o Propuesta
(Salmond y Ambrose, 2014: 72-73)

SDP (Solicitud De Propuesta) de un nuevo cliente.

Por invitacin, de clientes previos.

Spec (trabajo previo especulativo).

(England&Finney, 1999: 9)

Ecuacin Bsica de Proyectos Complejos:

cualquier cambio en un factor se refleja en los dems

Coste Tiempo - Calidad

Divisin y secuenciacin temporal de tareas y recursos:
diagrama de Gantt
anlisis de redes (anlisis de ruta crtica): enlaces lgicos

La definicin de calidad en los medios interactivos es difcil

de alcanzar, al combinarse medios y criterios diversos.

(England&Finney, 1999: 10-18)

(England&Finney, 1999: 371)

Mercado
Domstico y de Consumo masivo: productos dirigidos a su uso en
el hogar o en lugares pblicos educativos y de entretenimiento,
Videojuegos, Espectculos Multimedia,.
Industrial: se encuentran orientados al uso como herramienta
industrial Sistemas de Control, Sistemas de Supervisin,
Sistemas de Ensayo y Simulacin, Sistemas de Diseo Industrial,
Sistemas de Formacin
Institucional: orientados al consumo institucional pblico o privado
Puntos de Informacin, Multimedia Institucionales, Campaas de
Imagen, Museos y Archivos
Artstico: mercado en auge para las obras electrnicas o de Arte
Electrnico.
Profesional o empresarial: orientados a sectores profesionales
especficos como apoyo a sus tareas principales abogados,
mdicos, educadores,
Comercial: orientados a las operaciones comerciales de venta y
publicidad Puntos de Venta, Gestin Comercial, Multimedia
Promocional,

Otras aproximaciones
Preproduccin
Concebir la idea (brainstorming)
Plan de trabajo del proceso de desarrollo (brief de diseo)
Determinar la forma final (look&feel)
Configurar el equipo de produccin (perfiles profesionales)
Fechas y presupuesto
Diseo y produccin (moodboard/panel de inspiracin y
guiones ilustrados)
Boceto y prototipo viable (prueba de concepto)
Diseo de la arquitectura del interfaz
Adquirir y producir los contenidos
Creacin de los elementos del interfaz
Preparar los contenidos
Montar los elementos en una produccin coherente
Test y ajustes
Duplicado y distribucin del producto final

Proceso iterativo

https://produccionesmultimedia.wordpress.com/fases-en-el-desarrollo-multimedia-interactivo/

PROCESO DE DECISIN
(y RENUNCIAS)
Definicin del mercado y
ecosistema de usuarios.
Objetivos operativos (viabilidad
y lmites).
Presupuesto y tipo de
financiacin.
Calendario y temporalizacin de
las tareas.
Nmero de tareas necesarias.
Clase de plataformas de
desarrollo y de usuario.
Gnero y modalidad de
Realizacin.
Recursos disponibles.
Estructuras del sistema.

Estilo grfico.
Estilo narrativo/descriptivo.
Estilo de interaccin y modos de
acceso.
Seleccin de los contenidos.
Organizacin y dosificacin del
flujo de contenidos.
Eleccin de las herramientas
software de desarrollo.
Eleccin del equipo humano de
trabajo.
Modos de edicin de medios.
Planificacin de la calidad y
evaluacin.

Pirmide de prioridades de objetivos:

alta/media/baja <=> 20%/30%/50%

Modelos
(Susan Weinschenk)

Modelos mentales: "las representaciones que nos

construimos mentalmente de los objetos con los que
interactuamos". Para predecir cmo funcionar.

Modelos conceptuales: "los modelos reales que

percibimos a travs del diseo y la interfaz de los
productos". Se adapta para asegurar un mayor grado
de satisfaccin y evitar la frustracin.

Repeticin, claridad y preparacin del usuario.

(Pratt y Nunes, 2013: 23)

(Kristof y Satran, 1998: 10)

Diseo de la Informacin

Es el proceso de definicin. Significa clarificar sus objetivos de comunicacin y

organizar sus ideas y contenidos en un diseo que cumpla dichos objetivos.

Tareas crticas:
Definir los objetivos para el producto.
Definir lo que quiere hacer el pblico (estudio de mercado: expectativas y
necesidades).
Decidir cmo llegar el producto a su pblico (entorno y condiciones de uso).
Elegir una herramienta de autoedicin (desarrollo).
Crear una lista de contenido.
Crear un plan del proyecto.
Organizar el contenido.
Producir un diagrama de flujo del contenido.

Diseo de la Interaccin

Es el proceso de conversin del diagrama de flujo en un

guin (rutas y controles). Hay que transformar la
informacin en una experiencia.

Tareas crticas:
Crear un sistema de gua para orientar a los usuarios.
Disear la navegacin y las rutas de acceso.
Definir lo que sucede en cada pantalla.
Disear controles para la interaccin.
Crear un guin.

Diseo de la Presentacin

Es el estilo y la composicin de los elementos en pantalla (interfaz), su lenguaje visual.

Tareas crticas:
Definir el tema y el estilo visuales.
Disear un sistema de diseos de pantalla.
Crear los elementos estructurales de cada pantalla (fondo, ventanas, etc.).
Crear los elementos de control (botones, etc.).
Integrar los elementos de los medios (imgenes, etc.).
Crear prototipos de pantallas.

Reglas:
Hgalo simple.
Hgalo consistente.
Sepa cundo romper las reglas.

La arquitectura de informacin comprende: la

identificacin y estudio de necesidades de los usuarios, as
como el estudio del mercado, organizacin de los
contenidos, guin, etctera.

El diseo de comunicacin visual, sonora y dinmica

comprende: el diseo de la interfaz, la creacin iconogrfica,
la edicin de imgenes, la creacin musical, los
movimientos, los eventos de botn, etctera.

La programacin comprende: la digitalizacin de

contenidos, la programacin de la interfaz, edicin de
medias, etctera.

Tema 3
Tcnicas y Procesos de Realizacin Interactiva

mbitos de aplicacin
La presentacin de informacin de forma
mltiple, diversa y bien organizada aporta
numerosas ventajas que pueden ser
aprovechadas en diversos mbitos:
!
MUNDO EMPRESARIAL
INDUSTRIA
EDUCACIN
MBITO DOMSTICO
LUGARES PBLICOS

Aplicaciones
Informes
Electrnicos
Asesoras
Electrnicas
Videoconferencias
Simulaciones
Juegos
Bsquedas de
Conocimientos
Interacciones
Sociales
Intercambios
Culturales

Diseo de un juego
(involucre, eduque o
entretenga)
Diseo de interfaz
(dispositivos
mviles, Red o
productos)
Computacin fsica
(sensores, motores,
escultura interactiva
o animatrnica)
Diseo de aplicacin
(Salmond&Ambrose, 2014: 23)

Clasificacin
Sistemas Multimedia Interactivos (SMI o SIM) (Categora
Genrica)
Sistemas de Videojuegos (o Ldicos)
Sistemas de Realidad Virtual (Simulacin Inmersiva,
Realidad Artificial, o RV). Realidad Aumentada (AR).
Sistemas de Entornos Simulados (Escenografa Virtual)
Sistemas de Hipermedia (WWW)
Entornos Operativos de Sistema (Microsoft Windows,
MacOS)
Sistemas de Comunicacin Mediados por Ordenador
(CMC)

http://www.criteriondg.info/wordpress/patrones-de-diseno-web-ronda-rapida-sobre-ux/

El soporte habitual para este tipo de medios es de tipo electrnico y,

a menudo, un sistema informtico se encarga de generar la
presentacin de esa informacin en la forma y secuencia correcta.
!
!

Aspectos relacionados con los Proyectos Interactivos:

!
Percepcin
Representacin
Presentacin
Almacenamiento
Transmisin

Economa de la atencin

(Hogar)

(Rincn de lectura)

(Dondequiera)

(Banco de trabajo)

Bocetos
Diagramas de Flujo
(Flowcharts)
!
!

HERRAMIENTAS
Plantillas, Patrones
(Templates)
Grado de Fidelidad: alto o bajo

Maqueta (Retcula)
Esquema de Distribucin
(Disposicin o Layout)
Mapas esquemticos o
Esquemas de Pgina o
Planos de Pantalla
(Wireframes)
!
!

Hojas Detalladas (DDD)

Listados
Prototipos Rpidos
(Mockups)

Algoritmos y Diagramas
Algoritmo -> Secuencia lgica ordenada de pasos para la resolucin
de cualquier problema.
!

Diagrama -> Representacin Grfica

De Bloques: Componentes del Sistema y Relaciones

De Flujo: Direccin (Vector) de los Procesos u
Operaciones de un Sistema

Una Retcula (Grid) es una base armnica sobre la que podemos trabajar y
donde aplicar los elementos. Es una estructura invisible. Es un instrumento de
composicin.

La nocin de Layout (estructura de pgina) suele utilizarse para referirse al esquema

de distribucin de los elementos dentro un diseo. A sus estructuras lgicas.

CSS

Un Wireframe es una gua visual que representa el esqueleto o estructura visual. Su

objetivo es definir el contenido y la posicin de los diversos bloques de tu web. Esto
incluye elementos de la interfaz y sistemas o mens de navegacin, bloques de
contenido, etc y cmo funcionan en conjunto.

http://webdesignledger.com/18-great-examples-of-sketched-ui-wireframes-and-mockups

http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups-sketches/

Documento de Diseo Detallado

Debe incluir (Salmond&Ambrose, 2014: 26-27):

1. ndice de materias e introduccin (propsito y alcance, estructura, pblico,
condiciones y definiciones).
2. Visin general del diseo (enfoque, objetivos y limitaciones, principios bsicos
de elaboracin).
3. Especificaciones de diseo (colores, gamas, imgenes, esttica, sensibilidad
general).
4. Mapa del proyecto (prototipos iniciales, esbozos, personas y situaciones).
5. Arquitectura del proyecto (aspectos tcnicos, requisitos de programacin,
hardware y software, modo de lanzamiento).
6. Plan de ejecucin (condiciones de gestin, marcos temporales, clculo de
costes y presupuestos).
7. Normas (limitaciones particulares del cliente).
8. Pruebas y usabilidad (sistema mtrico y medidas).
9. Premisas y limitaciones del estudio (del pblico objetivo).

Establecer los perfiles de los Usuarios Tipo o

representantes, con informacin demogrfica y
psicogrfica (ver https://www.surveymonkey.com para
encuestas en lnea).

Determinar el escenario y la narracin. Tcnica (de

extraccin) del caso de uso y casos fallidos: expresan
intencin, necesidades y expectativas. Son breves
descripciones de cmo utilizar el producto y resultan
tiles para definir los detalles del diseo.

(Pratt y Nunes, 2013: 53-69)

Interactividad: imitacin de la interaccin por parte de un sistema

mecnico electrnico
(Bettetini y Colombo, 1993)
!
Capas o componentes del Interfaz => Fsico y Lgico.

Interactividad
Podemos fomentar la MOTIVACIN y el INTERS del receptor de la
informacin empleando elementos de impacto como sonidos, vdeos, etc.
La organizacin de la informacin puede mejorarse incorporando elementos de
navegacin por el documento (enlaces o hipervnculos).
Qu posibles interacciones podemos tener con un sistema multimedia?:
Actuaciones sobre la secuencia del sistema.
Actuaciones sobre la velocidad del sistema.
Plantear preguntas, pruebas o alternativas al sistema que modifiquen su
transcurso.

Permite al usuario un cierto grado de interaccin. La interaccin implica

personalizacin de la presentacin de informacin. Dicha personalizacin puede ser
de distinta naturaleza:
Seleccin del momento de comienzo.
Especificacin de la secuencia.
Control sobre la velocidad (hasta aqu, un peridico lo cumple).
Modificacin de la forma de presentacin (posicin, colores, tamao de
letra...).
Entradas por parte del usuario para anotar, modificar o enriquecer la
informacin.
Entradas del usuario que son procesadas y generan respuestas especficas.

FACTORES DE INTERACTIVIDAD

Nathan Shedroff (1994)

http://nathan.com/information-interaction-design-a-unified-field-theory-of-design/

Sensacin de Control de la Interaccin

(de la exhibicin a la inmersin)
1. Velocidad
5. Transaccin
2. Secuencia
6. Objetos
3. Medios
7. Simulacin
4. Variables
Cuanto ms control interactivo le proporcione a sus usuarios, ms
complejo ser desarrollar el producto. Aunque depende, en gran
medida, del contenido. Los objetivos bsicos del diseo seran:
claridad, sencillez y facilidad de uso.
(Kristof y Satran, 1998: 43)

Escala de Nebraska
(vdeo interactivo)

Dimensiones Universales
ESPACIO

TIEMPO

REAL
REPRESENTADO
PERCIBIDO
________________________________
FSICO + EMOCIONAL

3D+T

Entorno-Mundo

Campo de Experiencias
(Escenario)
SIM
(Dinmico)

!
!
!

USUARIO
(Activo)

Momento de
Confrontacin

Arsenal de
Recursos

Competencias

!
!
!
!
!
!
!
!
!

Rasgos del Discurso Interactivo

Electrnico.

Sinergia materialidad-inmaterialidad.
Convertibilidad. Cdigo constitutivo de naturaleza
homognea.
Doble textualidad simultnea. Programas de ordenador
e Interfaz de usuario.
Referencialidad mltiple.
Solapamiento de microdiscursos.
Instantaneidad. Tiempo Real.
Organizacin Modular. Formulacin combinatoria.
Adaptabilidad. Carcter Interactivo. Personalizacin.
Dinamicidad. Animados, evolutivos y progresivos.
Recursin.
Reticularidad y No linealidad. Multisecuenciales.

Rasgos del sistema

Mltiples Medios Integrados.
nica Presentacin o Mensaje.
Participacin del Ordenador (Control).
Codificacin Electrnica Digital.
nico Soporte de Almacenamiento.
Dilogo Interactivo (Interactividad).
No Linealidad (Aleatoriedad).
Conectividad.

Elementos generales de un Sistema Interactivo

Ordenadores: PC, Macintosh, Procesadores Especiales
Dispositivos de Entrada: teclado, ratn, trackball,
joystick, tableta grfica, touchpad, escner, micrfono
(voz), pantalla tctil, sensores (presencia), cmaras
(gestos), mandos, etc
Dispositivos de Salida: pantalla / monitor (3D),
impresora, tarjeta de sonido, efectores (vibracin), etc
Dispositivos de Almacenamiento
Dispositivos de Conexin / Comunicacin

Sistemas Operativos
Windows Mobile
/ Phone
Microsoft Windows

iOS

Apple MacOS

Google Android

Linux
!
!

!
!
!

PS4: Orbis OS (FreeBSD

9)

XBox One: Exclusive OS,

Host OS y W8

!
Mquinas X86-64

Symbian
RIM BlackBerry
Palm / WebOS

https://blog.uchceu.es/informatica/ranking-de-sistemas-operativos-mas-usados-para-2015/

Digitalizacin, Distorsin, Compresin

La informacin en formato binario no es interpretable por el ser
humano, por lo que antes de la presentacin debe ser transformada de
nuevo a formato analgico, con lo que se produce un cierto grado de
distorsin (prdida de calidad de la seal).
La distorsin ser menor cuanto mayores sean los recursos
empleados en la etapa de digitalizacin (nmero de muestras por
segundo en el muestreo, nmero de bits empleados en la codificacin,
etc.), aunque esto originar ficheros mayores.
No es necesario que la seal reconstruida sea idntica a la original,
sino que un observador no sea capaz de percibir la diferencia entre
ambas (esta es la idea bsica utilizada, por ejemplo, en la codificacin
de msica en formato MP3).
Muchos de los formatos de compresin de los diferentes medios
(grficos, sonido, etc.) se aprovechan de las imperfecciones del odo,
vista, etc. de los humanos que sern incapaces de apreciar la prdida
de calidad de la seal obtenida.

A pesar del inconveniente de la distorsin que presenta la

digitalizacin, existen muchas ventajas:
!

El almacenamiento de todo tipo de informacin puede hacerse

en un mismo dispositivo.
Toda la informacin puede transmitirse a travs de un mismo
tipo de red digital, teniendo en cuenta que los medios continuos
tienen una importante dependencia del tiempo.
Los medios almacenados en formato digital pueden ser
procesados de mltiples maneras, y esta es quiz la ventaja
fundamental de la digitalizacin.

Software de Creacin
Existen paquetes de software pensados especialmente para que el
diseador desarrolle un producto de forma ms rpida y efectiva.
La construccin de un documento o aplicacin INTERACTIVA conlleva
siempre una actividad de programacin ms o menos explcita (Java,
AS, ).
La metodologas mas empleadas en el desarrollo de sistemas
multimedia son las siguientes:
POR GUION (SCRIPTING LANGUAGE)
POR ICONOS Y FLUJO DE CONTROL (ICONIC/FLOW CONTROL)
BASADO EN TARJETAS Y GUIONES
ESTILO PARTITURA CON GUIONES
ORIENTADO A OBJETOS
POR CODIGOS DE MARCADO

Algunas Fuentes de Inspiracin

Novelas y Cuentos
Noticias
Ancdotas
Experiencias Personales y Sueos
Situaciones Inesperadas o Cmicas
Leyendas Urbanas
Ciencia Ficcin
Msica

Orientacin Interactiva
Usuario (No Espectador)
Experiencia
(Inter) Accin
Control No Lineal
!

Marcas de Localizacin (Migas de Pan)

Sistemas de Ayuda
Sensacin de Libertad (Grados)

Participacin del Usuario

Primera Persona (protagonista)

Partcipe diegtico (co-protagonista)
Titiritero (actor de marionetas, conductor)
Narrador-Narratario (extra-diegtico)
Demiurgo (entidad impulsora del universo, artesano)

Esquemas Narrativos
Laberinto
Puzzle o Mosaico
Plataforma o Niveles
Aventura o Descubrimiento
!

Entornos Abiertos o Cerrados

Asociacin Libre o Guiada
Multilineales

Plantilla de Control de Calidad MPRO-4 de lvarez, Bou,

Sagarra y Valera, 1996 (BOU, 1997).

Bloque 1: Generalidades.
-Aplicacin (proyecto y calidad general de las escenas).
-Principio de libertad (navegacin y esquema de etapas-grafos).
-Principio de vitalidad (dinamismo, tiempo real-inercia, animacin).
-Principio de necesidad (existencia, utilidad, expectativas): comodidad
de uso (ergonoma) y seguridad (accesibilidad).
-Principio de atencin:cognitiva (relevancia, organizacin) y afectiva
(impacto y refuerzo; narracin).
-Principio de retroalimentacin (autocorreccin, recoleccin de
informacin).
-Principio de mltiple entrada (cognitivo, afectivo, biogrfico).
-Principio multicanal (texto, imagen, sonido; sincronia).
-Principio de interactividad (refuerzo, participacin, cooperacin,
diario de respuestas).
-Principio de uniformidad (unicidad, consistencia): tcnica y estilo.

Bloque 2: Discurso.
-Ritmo.

Bloque 3: Diseo de Pantallas.

-Profundidad (relieve, perspectiva).

-Principio de coherencia.

-Distribucin (zonas sensibles; principios

del tema, de simplicidad, de
instantaneidad, de asimetra, de barrido,
de ergonoma/usabilidad uniformidad,
sorpresa, repeticin, encadenamiento).

-Principio de sorpresa.

-Contraste (fuerza visual).

-Economa de tiempo (y de
espera).

-Encuadres (angulacin, tipo de plano).

-Economa de espacio.

-Economa conceptual (y de
lenguaje).

Bloque 4: Acabado.

-Principio de elipsis.

-Ambientacin por personajes

(presentador), por accin iniciada, por
paisaje y por complicidad ideolgica;
trayectorias imposibles y plano cruzado.

-Texto.
-Hipertexto.

-Iconos animados.

-Ambientacin.

-Calibracin (puntuacin, obtencin de

crditos y nivel de dificultad).
-Estados intermedios de desarrollo.
-Ergonoma.

Elementos del Contenido

y del Interfaz

(Anderson, Stephen P.; 2011: 12)

(Estilo Maslow)

Interfaz de usuario
Un producto interactivo debe comunicar y
funcionar (operacin y utilidad).
!

Una interfaz tiene que proporcionar acceso a la

informacin y la orientacin clara que necesitan
los usuarios. Adems, debera tener una buena
apariencia (Kristof y Satran, 1998: 11).
!

Simplicidad y Consistencia. Cundo romper

las reglas?

Interfaz de usuario
Parte del sistema informtico y su software que la gente
puede ver, or, tocar, hablar a, etc.
Componentes
Entrada: cmo una persona comunica sus
necesidades al sistema (teclado, ratn, pantalla tctil,
voz)
Salida: cmo un sistema informtico muestra sus
resultados al usuario (pantalla, voz, sonido)
olfato, tacto?

Mezcla de mecanismos bien diseados de entrada y salida

para satisfacer las necesidades, capacidades y
limitaciones de los usuarios de la forma ms efectiva.
No debe ser el centro de atencin, sino permitir hacer las
tareas cmodamente.

Qu es la Usabilidad?
Tcnicas que ayudan a los seres humanos a realizar tareas en
entornos grficos de ordenador.
La usabilidad ayuda a que esta tarea se realice de una forma sencilla
analizando el comportamiento humano y los pasos necesarios para
ejecutar la tarea de una forma eficaz.

Findability
("recuperabilidad",
"encontrabilidad"...)
Necesidades

Usabilidad
Aspectos de diseo, produccin y post-produccin
http://www.usability.gov
Medida de calidad de una experiencia de usuario cuando interacta
con un sistema
Qu es fcil de usar?
Poco esfuerzo
Obvio
Simple
Sencillo
Atraer la atencin de los usuarios
Resumen de contenidos en envoltorio
Carga rpida de pgina
Acceso rpido al contenido relevante
Reaccin emocional del usuario
Tcnicas de interpretacin segn sentido estimulado
Efectos de latencias

Cules son las 8 reglas

de Oro sobre la
usabilidad?

http://
www.desarrolloweb.com/
manuales/5/

!
!
1. En internet el usuario es el
que manda.
Esto quiere decir que sin
usuarios tu pagina muere, asi
que mas te vale que los cuides y
les des lo que te piden, de lo
contrario te quedaras solo.

!
2. En internet la calidad se
basa en la rapidez y la
fiabilidad.
En internet cuenta que tu
pagina sea mas rpida que
bonita, fiable que moderna,
sencilla que compleja, directa.

3. Seguridad.
Si en el mundo real a veces nos
cuesta fiarnos del banco de la
esquina, imaginate como se siente
la gente en internet cuando llega a
tu site. Procura que todo funcione
como un reloj para que la gente
pueda fiarse de tu site.

!
4. La confianza es algo que
cuesta mucho ganar y se pierde
con un mal enlace.
Esto quiere decir que tal y como
esta la competencia en internet, no
puedes perder ni un solo visitante
por tener un enlace mal hecho. Es
mejor salir con algo sencillo e irlo
complicando poco a poco, que salir
con todo y ver "que es lo que
pasa". Versiones 1.0 son buenas
mientras lo que este puesto este
bien asentado y genere confianza.
Poco a poco y con el feedback de
los usuarios, podrs ir complicando
la pagina. Pero asegura antes de
arriesgar.

5. Si quieres hacer una pagina

decente, simplifica, reduce,
optimiza.
La gente no se va a aprender tu
site por mucho que insistas, as que
por lo menos hazlo sencillo, reutiliza
todos los elementos que puedas,
para que de este modo los usuarios
se sientan cmodos y no se pierdan
cada vez que necesiten encontrar
algo en tu site.

!
6. Pon las conclusiones al
principio.
El usuario se sentir mas cmodo
si ve las metas al principio. De esta
forma no tendr que buscar lo que
necesita y perder menos tiempo en
completar su tarea. Si completa su
tarea en menos tiempo se sentir
cmodo y quizs se dedique a
explorar tu site o quizs se lo
recomiende a un amigo.

7. No hagas perder el tiempo a la

gente con cosas que no
necesitan.
Cuidado con cruzar promociones,
si lo haces por lo menos hazlo con
cuidado. Procura que la seleccin de
productos a cruzar sea consecuente
y no lo quieras "vender todo" en
todas las paginas. Segn avance el
usuario en su navegacin procura
dejarle mas espacio libre. Puede
ocurrir que cuando este punto de
comprar algo vea una oferta que le
distraiga y pierdas esa venta.

!
8. Buenos contenidos.
Escribir bien para internet es todo
un arte. Pero siguiendo las reglas
bsicas de (1) poner las
conclusiones al principio y (2)
escribir como un 25% de lo que
pondras en un papel, se puede
llegar muy lejos. Leer en pantalla
cuesta mucho, por lo que, en el caso
de textos para internet, reduce y
simplifica todo lo que puedas.

Fidelidad en lnea
(Salmond y Ambrose, 2014: 56-57)

Simplicidad

Imprevisibilidad (rompa las expectativas)

Concrecin (explcita y directa)

Credibilidad

Emociones

Historias

La usabilidad tiene cinco atributos definidos [Shneiderman, 1998 ]:

1.Facilidad de aprendizaje.
Cunto le toma al usuario tpico de una comunidad aprender la manera en como se usan los comandos relevantes
a un conjunto de tareas?
2.Velocidad de desempeo.
Cunto le toma a un usuario completar un grupo de tareas especficas (benchmark tasks)?
Tasas de error por parte de los usuarios.
Cuntos y qu errores hace la gente al ejecutar un grupo de tareas especficas?
1.Retencin sobre el tiempo.
Qu tan bien recuerdan los usuarios la manera en como funciona el sistema despus de una hora, un da o una
semana?
2.Satisfaccin subjetiva.
Qu tanto le gustaron a los usuarios los distintos atributos del sistema?

!
[Cato, 2001] sugiere adems los siguientes atributos:
1.Control.
Los usuarios deben de sentir que tienen el control por sobre la aplicacin, y no al revs.
2.Habilidades.
Los usuarios deben de sentir que el sistema apoya, complementa y realza sus habilidades y experiencia - el sistema
tiene respeto por el usuario.
Privacidad.
El sistema ayuda a los usuarios a proteger su informacin o la de sus clientes.

Las ocho reglas de oro del diseo

interactivo de Ben Schneiderman
1. Ser coherente
2. Permitir el uso de accesos directos a los usuarios frecuentes
3. Disear el feedback de informacin
4. Disear una navegacin o un dilogo con un fin
5. Permitir el manejo simple de los errores
6. Disear una opcin para deshacer las acciones
7. Pensar en la individualidad
8. Reducir las sobrecargas
(Salmond y Ambrose, 2014: 94-95)

http://www.jjg.net/ia/visvocab/spanish.html
http://www.nosolousabilidad.com/index.htm
http://www.webestilo.com/guia/
http://www.sidar.org/recur/desdi/traduc/es/visitable/
Herramientas.htm
http://www.dcc.uchile.cl/~rbaeza/inf/usabilidad.html
http://www.useit.com/papers/heuristic/heuristic_list.html
http://www.usability.gov/
!
!

Iniciativa por la Accesibilidad Web (WAI) de la W3C.

Diseo accesible e inclusivo (ver LO 34/2002 y RD 1494/2007).

Principios de diseo

Principio del "nmero mgico siete, ms o menos dos" (George A.

Miller, 1956) o conjuntos de datos para la MCP.

Regla de los tres clics a cualquier contenido.

Regla de los dos segundos de espera mxima.

La pirmide invertida (efecto cascada o fragmentacin)

Sndrome del patito (o de interiorizacin de lo conocido)

El efecto Zeigarnik (o de suspense) de tareas incompletas

El efecto de autorreferencia (o de los comentarios)

Regla de los impares (o del inters)

(Salmond y Ambrose, 2014: 96-101)

Diez principios del buen diseo (Dieter Rams)

1. Es innovador

7. Es duradero

2. Es til

8. Cuida los detalles

3. Es esttico

9. Est comprometido
con el medio
ambiente

4. Es comprensible
5. Es discreto

10.Conlleva el menor
diseo posible

6. Es honesto
(Salmond y Ambrose, 2014: 97)

Partes del diseo UX

(Salmond y Ambrose, 2014: 58-60)

Distincin (ambiente concreto)

Habilitacin (contexto de uso cotidiano)

Pertinencia (mentalidad del consumidor)

Espacio (lugar o localizacin)

!

Cada experiencia es nica.

Utilizacin

Una interfaz es intuitiva solo si se comporta de la manera que la

gente espera, y solo puede hacerlo si el disenador pudo
anticipar las presunciones que se tendran sobre el
comportamiento del producto.
No aumente su carga haciendo que "aprendan" a utilizar su
producto.
No les haga hacer cosas que podra hacer el producto por s
mismo (poner un vdeo, sonidos), a menos que ellos necesiten
controlarlas.
No les haga perder el tiempo con funciones elaboradas o maneras
multiples de hacer las cosas.
(Kristof y Satran, 1998: 54-55)

Quite obstculos.

Minimice el esfuerzo.

Proporcione informacin.

Sea explcito.

Sea flexible.

Sea compasivo.

(Kristof y Satran, 1998: 56-57)

Funcionalidad

Definir los controles interactivos.

Resolver problemas de organizacin.

Asegurar la consistencia.

Controlar las dependencias.

Controlar las funciones del medio y las personalizadas.

(Kristof y Satran, 1998: 59)

Elementos de Diseo
Nodos y Enlaces [Navegar es seguir cadenas de Vnculos] (Estructura no
lineal)
Contenido y Controles
Propsitos: estructurales, informativos y funcionales
Disposicin, posibilidad de Acceso Aleatorio y Exploracin (sentido de
direccin)
!

Mapas de Navegacin (Browser-Navegador-Lector)

Lineal y Bsqueda
ndices (alfabtico / temtico)
Esquemas (contenido / programa)
Grficos (analgicos / metafricos)
!

Integracin de Medios Dinmicos / Implementacin

Script (Programa Informtico)

Elegir un estilo para un proyecto interactivo comienza

al establecer lo que los usuarios del estilo veran
consistente con las ideas representadas por el
contenido (Kristof y Satran, 1998: 86).

Estilo de
Imagen
agresivo/suave;
sobrio/florido;
artstico/
funcional

Presentacin
Informtica/
manual;
colores;
formas

Tipografa
estilo de fuente;
utilizacin del
tipo de letra
como arte

Estilo grfico

Muchos elementos funcionan juntos para

crear el estilo de una interfaz. Cuando
estn bien coordinados, se unen en un
sistema de partes cuyos estilos
individuales definen el total.

Texto
terso;
dramtico;
educativo

Sonido
estilo musical;
narracin;
efectos de
sonido

Vdeo
direccin
artstica;
valores de
produccin;
actuacin

Estilo de medios

Accin
ritmo de la
accin;
Ritmo del
cambio

Efectos
Animacin de
pantalla;
transiciones

Interaccin
nivel de
integracin/
compromiso del
usuario

Estilo de autor

Estilo de interfaz
(Kristof y Satran, 1998: 87)

Los elementos del cuadro de la pagina anterior (la musica

y el arte, la escritura y la tipografa) representan solo la
parte visual u observable del estilo de la interfaz. Pero el
significado y la identidad subyacentes emanan del mismo
contenido y no son observables, sino conceptuales. Puede
pensar en este aspecto conceptual del estilo como el
tema o la personalidad que mejor representa el material.

Como el objetivo es la unidad estilstica, no la uniformidad, el papel

del diseador es crear un entorno armonioso en el que puedan
coexistir elementos dispares.
!

Familias de pantallas: sistema de elementos visuales y

estructurales relacionados, que producen sentido de continuidad y
consistencia.
(Kristof y Satran, 1998: 88 y 91)

Elementos del interfaz

Fondos (influye y rellena). Papel pasivo.

Ventanas y paneles (delimitan y anclan). Regiones

diferenciadas para medios o que aportan color y
profundidad a la estructura.

Botones y controles (partes tangibles). Facilidad de

acceso y reconocimiento. Agrupamientos por funcin.

Iconos. Reconocimiento instantneo, internacional,

dimensionable y sencillo.

Imgenes, texto, vdeo, sonido y animacin.

MEDIOS DIGITALES
Espaciales
Escrito.
Grfico.
Fotogrfico.

Temporales
Sonoro.
Verbal.

Externos/Autnomos
Sistemas de Registro.
Soportes.

Internos/De Sistema
Analticos.
Sintticos.
Hbridos.

Espaciotemporales
Animado.
Videogrfico.
Cinematogrfico.

-Manual
-Registro/Captura
-Sinttico

Medios
Los medios continuos (la animacin, el vdeo y el sonido)
requieren un cierto ritmo de presentacin, y dependen del
tiempo de manera importante.
El tiempo es parte de la semntica de los medios continuos.
En los sistemas multimedia distribuidos, las redes de conexin deben
garantizar la satisfaccin de estos requisitos temporales.
Han aparecido protocolos de comunicacin especficos para intentar
cumplir estos requisitos temporales en la transmisin a travs de redes
de comunicacin no orientadas a conexin.

Los medios discretos (texto, grficos e imgenes) no tienen

esa dependencia temporal. Sin embargo, en algunos casos (la
sincronizacin entre un texto y una imagen esttica) la
diferencia puede no ser tan clara.

(Kristof y Satran, 1998: 73)

Balance: Calidad / Rendimiento

Digitalice con la resolucin ms alta posible y redzcala ms tarde.

Reduzca la resolucin del contenido al final, despus de haber terminado

todas las otras operaciones de tratamiento.

Anote todo proceso utilizado, para poder reproducirlo posteriormente.

Guarde una copia original de alta resolucion de cada archivo de medios que
utilice.

Cuando haya procesado y amoldado el contenido hasta la perfeccion, llevelo

a otro ordenador y preparese para una sorpresa desagradable. Las
variaciones de color y brillo de un monitor a otro pueden ser dramaticas y el
funcionamiento del vdeo, del sonido y la animacion en otro ordenador puede
ser completamente diferente en un ordenador nuevo. La mejor estrategia es
hacer pruebas en diferentes plataformas de reproduccin, para evitar las
sutilezas en el diseno que sean difciles de reproducir, y para disenar los
medios para los ordenadores con el denominador comun mas bajo en el que
se pueda utilizar el producto.

(Kristof y Satran, 1998: 85)

Texto

Todos los elementos de una interfaz juegan un papel en el diseo. Pero

mientras unos son puramente esteticos y no tienen ninguna funcion en el
contenido, el texto siempre es contenido. Incluso cuando se utilizan las
palabras decorativamente, como parte del fondo o de una imagen, importa su
significado.

Para lograr la mayor flexibilidad y el mayor control de los formatos, el espacio

y los efectos especiales, se puede crear el texto de manera separada
utilizando herramientas especializadas.

Para que el texto tenga la misma apariencia con la que se diseno, el

ordenador del usuario debe tener las fuentes correctas (...). Pero el texto
puede tener exactamente la misma apariencia con la que se diseno si se
hace un mapa de bits, es decir, si se convierte en una imagen que conserva
su formato de manera permanente.

Campos de desplazamiento, legibilidad (tamao mnimo de fuente: 12) y

suavizado.
(Kristof y Satran, 1998: 112-115)

Sonido

Algunos diseadores creen que el sonido cuenta por mas de la mitad de

la experiencia de utilizar un producto interactivo. Sea o no verdad, lo
cierto es que un sonido malo puede arruinar la experiencia entera.

No obstante, cuando la musica, los efectos de sonido y la narracion (voz)

se integran en la interfaz pueden tener un papel significativo tanto en el
diseno como en el contenido.

Para integrar con exito el sonido en la interfaz se necesita prestar una

atencion especial a la mezcla y la coordinacion. Los niveles de volumen
de la musica, la narracion y los efectos especiales tienen que estar muy
bien equilibrados en todo momento para crear el enfasis y el ambiente
deseados.

Familias de segmentos musicales con diversidad y, tambien, continuidad.

(Kristof y Satran, 1998: 118-119)

Formatos de archivos de audio

Histricamente, cada modelo de ordenador o
programa defini su propio formato de fichero
para almacenar la informacin de sonido. Algunos
de estos formatos han perdurado y se han
convertido en los ms usados actualmente.
!

Podemos distinguir dos estilos de formato:

Contienen una cabecera que indica los parmetros
empleados en la codificacin (frecuencia de
muestreo, nmero de bits, stereo/mono, etc) (ej:
au, aif, wav,..)
De tipo raw o crudo que no contienen ms
informacin que los propios datos (ej: snd)

Formatos de archivo de audio

WAV (WaveForm)
MIDI (Musical Instrument Digital Interface)
AIFF (Audio Interchange File Format)
SND (Sound)
MOD (Amiga)
!

MP3 (Nivel 3 de MPEG)

OGG VORBIS

Formato MP3
MP3 significa MPEG 1 Layer 3, tercer nivel de compresin del
MPEG 1.
El proceso de codificacin utilizado en MP3 es denominado
codificacin perceptual y se basa en las pequeas
imperfecciones del odo humano. Eliminando aquellos datos
que no sern percibidos por el oyente , podemos reducir la
cantidad de datos a almacenar.
La fundamentacin matemtica es muy compleja y es un
proceso lento.
Aplicando las tcnicas del MP3, se consigue reducir el tamao
que ocupa una pieza musical en un factor entre 10 y 12 a 1.
Segn el clculo anterior, reducimos el espacio necesario para
almacenar 1 minuto de msica estreo de calidad CD de 10MB
a 1MB.
Almacenamiento MP3 en CD-ROM, ms de 11 horas! con
calidad casi de CD.

Imgenes

L a s i n t e r f a c e s c o n t i e n e n d o s t i p o s d e i m a g e n e s : l a s
i
m
a

genes aisladas, como una fotografa de un ejecutivo sobre un bloque de texto

en
un
informe
anual,
y
las
i
m
a

genes de componentes, que son parte de una escena, como un mapa con
edificios y personas, compuesta para crear un montaje de informacion.

Una interfaz puede incluir imagenes de cualquier tipo: fotografas digitalizadas

con el escaner, dibujos animados, objetos tridimensionales creados por el
ordenador, etcetera. No hay tipos de imagenes correctos o erroneos en la
utilizacion. Lo importante es la manera en que la imagen se convierte en parte
de la interfaz.

Integracin mediante sombras, recortes y bordes suaves o irregulares.

(Kristof y Satran, 1998: 110-111)

Paleta VGA
PROFUNDIDAD DE COLOR:

!
1 bit por pixel: 21 = 2 colores,
tambin llamado monocromo.
2 bits por pixel: 22 = 4 colores, o
CGA.
4 bits por pixel: 24 = 16 colores, o
EGA.
8 bits por pixel: 28 = 256 colores, o
VGA.

!
Color Real: 224 = 256x256x256 =
16.777.216
La profundidad de color o bits por pixel (bpp) se refiere a la
cantidad de bits de informacin necesarios para representar el
color de un pixel en una imagen digital o en un framebuffer.

!
Color indexado o adaptado
Para las profundidades de color inferiores o iguales a 8, los
valores de los pixeles hacen referencia a tonos RGB
indexados en una tabla, llamada habitualmente caja creadora
de colorizacin o paleta. Ver colour look-up table (CLUT).

Tarjetas Grficas

El principal problema que nos encontramos al trabajar con

imgenes digitales en un entorno distribuido es el excesivo
tamao que ocupan (sobre todo cuando se trabaja a travs
de lneas de conexin lentas).
Para solucionar este problema tenemos los algoritmos de
compresin, que permiten reducir de forma considerable el
espacio ocupado por las imgenes con una prdida nula o
inapreciable de la calidad en muchos casos.
Algunos algoritmos de compresin se basan en la bsqueda
de patrones o repeticiones de informacin del color en
diferentes lugares de la imagen.
Existen otros algoritmos que utilizan tcnicas basadas en la
eliminacin de la informacin de color inapreciable por la
retina humana.

Compresin
El principal problema de los grficos en formato de mapa de bits es la
necesidad de disponer de espacio para su almacenamiento, que pueden
llegar a alcanzar valores muy grandes.

!
Debido a esto, utilizamos tcnicas de compresin para reducir de forma
apreciable la cantidad de memoria necesaria para su almacenamiento.

!
Si nos referimos al ejemplo particular de grficos individuales, la
digitalizacin de una fotografa de unos 35mm en color a una resolucin
de 2000x2000 genera un fichero de 10Mbytes.

!
Con los archivos de imgenes podemos obtener unos porcentajes altos
de compresin sin prdidas significativas de calidad visual de la imagen,
debido a que contienen un alto grado de redundancia.

Compresin (II)
Tipos de redundancia:
Espacial: Debida a la correlacin entre pixels vecinos.
Espectral: Debida a la correlacin entre las componentes de color.
Psicovisual: Debida a las propiedades de la visin humana que es menos
sensible a ciertas frecuencias espaciales.

!
A mayor grado de redundancia en un fichero, mayor ser el grado de compresin
que se puede alcanzar.

!
Podemos clasificar los mtodos de compresin en:
Sin prdidas (Lossless o noiseless), que buscan minimizar el tamao sin
perder informacin en la imagen.
Con prdidas (Lossy), que buscan minimizar el tamao dado un factor de
fidelidad con la imagen original.

!
En la mayora de los casos, una pequea prdida de informacin debe permitirse para
alcanzar altos porcentajes de compresin.

Naturaleza de los grficos por ordenador

Podemos distinguir dos tipos de grficos en funcin de cmo se
almacenan los datos de la imagen:
!

-VECTORIALES
!

-MAPA DE BITS
!

Ambos tipos representan dos filosofas diferentes de

representacin de una imagen o grfico en un fichero.

Grficos vectoriales
Las imgenes en formato VECTORIAL se componen de OBJETOS.

!
Todos los objetos se construyen a partir de primitivas (instrucciones bsicas
de dibujo, como por ejemplo lneas, rectngulos y elipses).

!
Los objetos se agrupan para formar otros ms complejos <-> JERARQUIA
DE OBJETOS.

!
Los grficos vectoriales pueden dividirse en dos tipos:

!
REPRESENTAN DIBUJOS EN DOS DIMENSIONES.

!
REPRESENTAN MODELOS EN TRES DIMENSIONES QUE MUESTRAN
OBJETOS O ESCENAS SINTTICAS.

Grficos vectoriales (II)

Las principales propiedades de los grficos vectoriales son:

!
La imagen se compone de distintos segmentos o formas, llamados objetos
de diseo (a veces se les llama line art).

!
Los objetos clsicos son: lneas, rectngulos, arcos y curvas (las curvas de
Bezier son las ms tpicas), formas abiertas y formas cerradas, texto.

!
Cada objeto tiene caractersticas propias (atributos): anchura de lnea, color,
patrn, relleno, etc.

!
Si varios objetos se superponen, existe una relacin de profundidad que
hace que no se vean partes ocultas de los objetos que se encuentran
detrs. En algunos sistemas de diseo se puede graduar el nivel de
transparencia de los objetos que se encuentran delante.

!
Por este funcionamiento a veces se llama a los programas de diseo que
trabajan con este tipo de grficos ORIENTADOS A OBJETOS.

Grficos vectoriales (III)

La potencia de los grficos vectoriales es su escalabilidad:
Posiciones relativas de vrtices y funciones de uniones.
Cambios de tamao.
!

Los requerimientos de memoria son muy bajos.

!

El trabajo de edicin y modificacin de un dibujo orientado a

entidades es muy sencillo, no as, un dibujo artstico
orientado a color o sombras.
!

Estas caractersticas lo hacen perfecto para la rotulacin, los

logotipos publicitarios y todo trabajo que deba imprimirse a
gran tamao.

Mapas de bits
Los bitmaps (raster graphics) son imgenes compuestas de
puntos discretos conocidos como pixels (picture elements),
donde cada uno de ellos puede tomar cualquier valor dentro
de un rango.
!

La resolucin de un bitmap viene dada por sus dimensiones,

en pixels, en horizontal y en vertical. As un bitmap de 640x480
visualizado sobre un monitor VGA se ver mejor que uno de
320x200 sobre el mismo monitor y peor que uno de 1024x768.
!

A mayor nmero de pixels por unidad de rea, mayor ser la

resolucin y menos imperfecciones se observarn en la
imagen.
!

La profundidad de color de un bitmap viene determinada por la

cantidad total de memoria reservada para cada pixel.

Mapas de bits (II)

Las principales caractersticas de los grficos de mapas de
bits son:
!

Son un patrn de puntos de color (pixels en pantalla)

suficientemente pequeos.
No hace falta inteligencia para crearlos partiendo del mundo
real o de un grfico dado.
Es muy difcil convertirlo a diseo (vectorizador), mientras que
un diseo puede convertirse automticamente a bitmap.
El proceso de extraccin de informacin de un bitmap suele ser
complejo (OCR, vectorizadores, reconocimiento de la imagen,
etc.).
No tiene sentido hablar de bitmap en 3D.
El escalado de bitmaps es complicado y pierde calidad, sobre
todo cuando se quiere aumentar el dibujo.

Mapas de bits (III)

Este tipo de grficos se utiliza para trabajar con fotografas, debido a
que para representar estas imgenes se necesita:
Gran cantidad de color.
Texturas y tramas de color.
Manera en que los objetos reflejan la luz, etc.
!

Algunos de los programas ms utilizados para trabajar con este tipo

de imgenes de mapas de bits son: Adobe Photoshop, Corel
Photopaint, etc.
!

Afortunadamente ya hay sistemas que permiten la unin de estos

dos formatos (vectorial y mapa de bits):
Capas, unas con bitmaps y otras con grficos vectoriales.
Inclusin del bitmap como un objeto ms dentro de un programa de
diseo.

Formatos de Archivo Grfico

BMP (Bitmap de Microsoft)
GIF (Compuserve)
JPEG (Joint Photographic Expert Group)
PCX (Paintbrush)
TIFF (Tagged Image File Format)
TGA (Truevision Targa)
PCD (Photo CD Kodak)
PNG (Portable Network Graphics)
PICT (Mac Apple)
!

EPS (Encapsulated Post-Script)

Animacin

Existen muchas maneras de animar una interfaz. Si se lo permite

su presupuesto, se pueden incluir animacion digital de pantalla
completa y dibujos animados de fotograma a fotograma. En una
escala mas modesta, la animacion de la pantalla puede significar
exclusivamente darles vida y movimiento a los elementos que ya
tiene.

Elementos que cambian, que se mueven, que aparecen/

desaparecen y transiciones (totales o parciales) de pantalla. La
mayora del tiempo, las transiciones funcionan mejor cuando son
sutiles y discretas.

Establecer una secuencia u orden, crear nfasis (atencin) y

crear un puente visual (trnsito).
(Kristof y Satran, 1998: 120-121)

ANIMACIN POR ORDENADOR= GENERACIN, ALMACENAMIENTO y

PRESENTACIN DE IMGENES QUE EN SUCESIN RPIDA
PRODUCEN SENSACIN DE MOVIMIENTO.

!
Una secuencia de imgenes est caracterizada por su resolucin, nmero de
colores y el nmero de imgenes que se muestra por unidad de tiempo
(frame rate), de forma que la impresin obtenida sea la de que existe
movimiento.
Sensacin de movimiento continuo: fr 25 imgenes por segundo.
El trmino animacin viene del griego anemos=viento, aliento y del latn
animus=dar vida, por eso se asocia habitualmente con el de movimiento.
Persistencia de visin
Semejanza entre fotogramas.
Fluidez de movimiento.

Imagen y objetos 3D
Sistemas de Coordenadas (x,y,z):

Universales
Locales
Proyeccin Didrica (ortogonal)
Modelado:

Primitivas (2D y 3D) y CSG (Boolean)

Esculpidas (Spline y NURBS)
Extrusin, Revolucin, Secciones (path)
Mallas 3D

Transformaciones Grficas
Funcionales:
Traslacin
Rotacin
Homotecia (proporcional - ratio)
Reflexin (especular)
Deformacin (no proporcional)
Interpolacin

Relacionales:
Fusin (Unin)
Diferencia
Interseccin

Vdeo

El vdeo tiene un poder increble para darle vida a la

pantalla del ordenador. Una imagen estatica no tiene
comparacion con otra que habla y se mueve. Pero se
borra la novedad casi inmediatamente si el vdeo no
presenta un mensaje o una experiencia cautivadores.

El tamano/longitud del vdeo es una decision de diseno,

pero tambien tecnica: cuanto mas grande sea el vdeo,
mas espacio ocupara en el disco y mas potencia de
procesamiento necesitara para funcionar sin problemas.

Forma de la ventana, diseo de fondo y controles

personalizados de estilo coherente.
(Kristof y Satran, 1998: 116-117)

Estndares para compresin de vdeo

MJPEG como representante de los denominados mtodos de
compresin intraframe.
!

H.261 (desarrollado para videoconferencia que admite tanto el

mtodo intraframe como interframe).
!

MPEG que estn encaminados a mtodos interframe.

MPEG-1 y MPEG-2 (utilizado en DVD y TDT)

MPEG4
DivX
Xvid
!

Formatos QuickTime, Video for Windows y otros como

ejemplos de sistemas propietarios.

Comparacin de formatos

Tema 4 y 5
Formatos, Plataformas y Modalidades Audiovisuales Interactivas
Acabado y Comercializacin de Productos Interactivos
(En Manuales de Referencia)
(Material tratado en Grupos Reducidos)

Dispositivos
Ordenadores
Mainframe
Workstation
Sobremesa
AIO
Porttil
Netpc Nettop Notebook
PC Ultra Mvil (UMPC)

Netbook
Pad / Tab
!

Consolas
Wii
Xbox 360
PlayStation 3
!

Nintendo DS
PSP
!

Mviles
Smartphones
!

HTPC (Home Theater

Personal Computer) u
Ordenador de Saln

TV Inteligente /
Internet/
Interactiva
(Widgets)
TDT - MHP
(Multimedia
Home Platform)

http://www.theappdate.es/i-informe-estado-apps-espana/

Plataformas Soft
DVD / BR

Adobe CS Encore
!

SWF (Flash)

Adobe CS Flash

HTML 5

PPS (PowerPoint)

Microsoft Office
PowerPoint

Java
Javascript

Youtube: Anotaciones de
Vdeo

Opciones Multiplataforma

Vdeo Interactivo (proyeccin interactiva)

Instalaciones Multimedia (experiencias de inmersin)

Realidad Aumentada (RA) (con o sin localizadores)

Grficos Animados (motion graphics)

Vdeos Virales

Anuncios Takeover (cinticas integradas)

Medios Sociales

Juegos (publicitarios y fidelidad en lnea o stickiness)

(Salmond y Ambrose, 2014)

Por definicin de Andy Crestodina, un content hubs

es un conjunto de contenidos (normalmente pginas
web), organizado en torno a un tema especfico (por
lo general una pgina central). Se puede extrapolar a
todo tipo de contenidos, desde libros electrnicos a
videos e infografas o artculos.
http://www.flat101.es/blog/marketing/content-hubs/

Hub de Contenidos (Centro de Actividades o espacios para el

encuentro, el intercambio y la inspiracin). Ej.: Microsoft Office
Delve.

Retrato medio del usuario de

aplicaciones en Espaa

El usuario medio de aplicaciones en Espaa es hombre, tiene entre 25 y 40

aos, urbano, de clase media-media y media-alta. Usa sus aplicaciones
favoritas ms de una vez al da y tiene instaladas una media de 20
aplicaciones en su smartphone.

Los heavy users de aplicaciones prefieren iOS: Los usuarios de iOS

descargan ms aplicaciones que los usuarios de Android.

El usuario senior opta por los tablets: Los mayores de 45 aos prefieren usar
las aplicaciones en estos dispositivos en detrimento de los smartphones.

Los adolescentes en Espaa eligen BlackBerry: El nmero de usuarios de

aplicaciones de entre 12 y 18 aos se ha incrementado notablemente en
este ltimo ao para este dispositivo.
(Fuente: The App Date)

http://ignaciosantiago.com/blog/informe-del-estado-de-las-apps-en-espana/

Desarrollo de las aplicaciones en

Espaa

En Espaa han sido desarrolladas ms de 20.000 aplicaciones.

El 70% de las aplicaciones desarrolladas en Espaa han sido para iOS.

Slo el 30% de esas aplicaciones han sido creadas por empresas de

desarrollo de apps. El 70% restante han sido creadas por desarrolladores
independientes.

Las empresas de desarrollo de apps en Espaa dedican el 90% de sus

recursos a la creacin de apps para terceros; slo un 10% de sus recursos es
para la creacin de producto propio.

El desarrollador independiente, sin embargo, invierte sobre todo en producto

propio.

Se estimaba un crecimiento para el sector de cara al 2012 de ms de un

120%.

Modos de Comercializacin
Capitalizacin

Esfuerzo y Dedicacin
Aportaciones Econmicas

Financiacin Externa
Subvencin Gubernamental
Micropagos
Monetizacin
Gametizacin