ESTUDIO Y DISEÑO DE UNA HERRAMIENTA DE ELABORACIÓN

DE GUIONES MULTIMEDIA PARA EL DESARROLLO DE

APLICACIONES INTERACTIVAS

EDER NAVARRO MARTÍNEZ

PEDRO PARADA PARDO

UNIVERSIDAD TECNOLÓGICA DE BOLÍVAR

FACULTAD DE INGENIERÍA
PROGRAMA DE INGENIERÍA DE SISTEMAS
CARTAGENA DE INDIAS D.T. Y C.
2007
ESTUDIO Y DISEÑO DE UNA HERRAMIENTA DE ELABORACIÓN
DE GUIONES MULTIMEDIA PARA EL DESARROLLO DE
APLICACIONES INTERACTIVAS

EDER NAVARRO MARTÍNEZ

PEDRO PARADA PARDO

MONOGRAFÍA PRESENTADA COMO REQUISITO PARA OPTAR AL

TITULO DE:

INGENIERO DE SISTEMAS

DIRECTOR
MOISÉS QUINTANA ÁLVAREZ

UNIVERSIDAD TECNOLÓGICA DE BOLÍVAR

FACULTAD DE INGENIERÍA
PROGRAMA DE INGENIERÍA DE SISTEMAS
CARTAGENA DE INDIAS D.T Y C.
2007

2
 Nota de aceptación

Firma del presidente del jurado

Firma del jurado

Firma del jurado

Cartagena, Agosto de 2007

3
ARTICULO 107 DEL REGLAMENTO ACADÉMICO DE LA UNIVERSIDAD
TECNOLÓGICA DE BOLÍVAR:

La universidad se reserva el derecho de propiedad intelectual de todos los trabajos

de grado aprobados, los cuales no pueden ser explotados comercialmente sin
autorización.

4
Cartagena de Indias D.T. y C Agosto de 2007

Señores:

COMITÉ DE REVISIÓN DE MONOGRAFÍA

UNIVERSIDAD TECNOLÓGICA DE BOLÍVAR

La Ciudad

Apreciados señores:

Por medio de la presente nos permitimos informarles que la monografía titulada

“ESTUDIO Y DISEÑO DE UNA HERRAMIENTA DE ELABORACIÓN DE
GUIONES MULTIMEDIA PARA EL DESARROLLO de APLICACIONES
INTERACTIVAS” ha sido desarrollada de acuerdo a los objetivos establecidos.

Como autores del proyecto consideramos que el trabajo es satisfactorio y amerita

ser presentado para su evaluación.

Atentamente,

EDER NAVARRO MARTINEZ PEDRO JOHAN PARADA PARDO

Código: 01-05-024 Código: 98-05-301

5
Cartagena de Indias D.T. y C Agosto de 2007

Señores:

COMITÉ DE REVISIÓN DE MONOGRAFÍA

UNIVERSIDAD TECNOLÓGICA DE BOLÍVAR

La Ciudad

Apreciados señores:

Por medio de la presente me permito informarles que la monografía titulada

“ESTUDIO Y DISEÑO DE UNA HERRAMIENTA DE ELABORACIÓN DE
GUIONES MULTIMEDIA PARA EL DESARROLLO de APLICACIONES
INTERACTIVAS” ha sido desarrollada de acuerdo a los objetivos establecidos.

Como director considero que el trabajo es satisfactorio y amerita ser presentado

para su evaluación.

Atentamente,

MOISÉS QUINTANA ÁLVAREZ

Licenciado en Educación Matemática,
Magíster en Informática Aplicada,
Certificado como Programador Tecnología Java.

6
 AUTORIZACIÓN

Cartagena de Indias D.T. y C Agosto de 2007

Yo Eder Navarro Martínez, identificado con la cedula de ciudadanía numero

15.206.781 de Maicao (La Guajira) autorizo a la Universidad Tecnológica de
Bolívar para hacer uso de mi trabajo de grado y publicarlo en el catalogo online de
la biblioteca.

EDER NAVARRO MARTINEZ

C.C. 15.206.781 de Maicao

7
 AUTORIZACIÓN

Cartagena de Indias D.T. y C Agosto de 2007

Yo Pedro Johan Parada Pardo, identificado con la cedula de ciudadanía numero

73.208.167 de la ciudad de Cartagena (Bolívar) autorizo a la Universidad
Tecnológica de Bolívar para hacer uso de mi trabajo de grado y publicarlo en el
catalogo online de la biblioteca.

PEDRO JOHAN PARADO PARDO

C.C. 73.208.167 de Cartagena

8
“Dedico éste logro, a una persona que en vida me apoyo y
estuvo conmigo en todo momento; y ahora desde el cielo,
se encuentra orgulloso de mí, y feliz de estar
cumpliendo este gran sueño conmigo”.
A la memoria de mi gran amigo y hermano
Gustavo Adolfo Rodríguez Ensuncho

Eder Navarro Martinez

9
Quiero dedicarle este logro a mi querido y admirado papá,
gracias por guiarme y protegerme.
A ti te debo lo que soy!
A ti, insuperable, preciosa, bella y amorosa mamá,
por darme tu cariño, paciencia, apoyo, consejos
y, por sobretodo, valor para seguir adelante.
Que nunca me vayas a faltar!

Pedro Parada Pardo

10
 AGRADECIMIENTOS

Agradezco a Dios Padre, por acompañarme, inspirarme, guardarme y ayudarme

largo de este camino.

A mis padres, Bercelio y Silenia, quienes con su ejemplo, paciencia e infinito

amor, me han hecho la persona humana, integra y profesional que soy hoy en
día.

A mis hermanos Eblin, Edien, Erick y Genesis, quienes con su ternura fueron mi
fuente de superación.

A mi esposa, Dayana Morón, quien me ha acompañado en todo momento, por tu

amor, tu paciencia, tu compañía incondicional y tus consejos siempre oportunos.
Te amo.

A mi hija, Isabella Sofia, quien es el centro de mi inspiración para cumplir cada

una de mis metas.

A mi tía Delcy y su esposo Mauricio; a mi abuela María, quienes dedicaron parte

de su tiempo para atenderme; para llenarme de entusiasmo y motivación en
momentos difíciles.

A mis amigos Gustavo, Darío, Lucho, Sergio, Michael, Leonel, Pedro, Heyder,
Emma, Alfredo, Leyston; por entender el verdadero sentido de la amistad, por
estar conmigo en esos momentos de alegría y de dificultad.

A los profesores y amigos, Giovanny Vásquez y Moisés Quintana, quienes con

su sabiduría y dedicación, pudieron guiarme hacia este triunfo y la culminación de
esta etapa de mi vida.

A mis compañeros de estudios y demás profesores del programa de Ingeniería de

Sistemas, quienes siempre de manera desinteresada me ayudaron y
acompañaron durante este largo proceso.

Eder Navarro Martínez

11
 AGRADECIMIENTOS

Agradezco al Señor el haberme conservado con salud y vida para poder lograr
esta meta.

A mis padres Pedro y Elsa por su infinito amor; por su admirable abnegación y
sabiduría. A mi padre que nunca dudó de mí, por su paciencia, comprensión, e
inigualable ayuda en los momentos más difíciles. A mi madre, por su inmenso
cariño, y apoyo en todo momento.

A Eder por su apoyo y comprensión, en personas como tú uno conoce la

verdadera nobleza.

Agradezco también profundamente a mis profesores Moisés Quintana y

Giovanny Vásquez, que han sido grandes personas, y que no han dudado en
apoyarme cuando realmente lo he necesitado, no saben cuánto se los he
agradecido.

A Gonzalo Garzón por su infinita paciencia y disposición de ayuda.

A mi novia Silvia por su inagotable apoyo, por creer en mí y ser una motivación
más en mi vida.

A cada uno de mis compañeros de estudio, por estar ahí en las buenas y malas,
por todos y cada uno de los grandes momentos que he vivido con ellos y que
nunca voy a olvidar.

A todos y cada uno de mis maestros, que me ayudaran a aprender que el estudio
y la enseñanza merecen la pena y me dieran su talante para ejercerla.

Pedro Parada Pardo

12
 CONTENIDO

 
INTRODUCCIÓN ............................................................................................................. 24 
CAPITULO 1: LA TECNOLOGÍA MULTIMEDIA .................................................................. 25 
1.1. ANTECEDENTES HISTORICOS DE LA MULTIMEDIA........................................................... 26 
1.2. QUE ES MULTIMEDIA. .................................................................................................... 28 
1.3. OBJETOS MULTIMEDIA................................................................................................... 29 
1.3.1. OBJETOS VISUALES. .......................................................................................................................29  
1.3.1.1. Gráficos de mapas de bits......................................................................................................29  
1.3.1.2. Gráficos vectoriales................................................................................................................30  
1.3.1.3. Elementos de video................................................................................................................30  
1.3.1.4. Elementos de animación........................................................................................................31  
1.3.2. OBJETOS DE SONIDO. ....................................................................................................................31  
1.3.3. OBJETOS DE ORGANIZACIÓN.........................................................................................................32  
1.4. CARACTERISTICAS COMUNICATIVAS DE LOS SISTEMAS MULTIMEDIA............................. 32 
1.5. CAMPOS DE APLICACIÓN. .............................................................................................. 33 
1.5.1. SISTEMAS DE INFORMACIÓN Y DOCUMENTACION.......................................................................33 
1.5.2. SISTEMAS DE EDUCACION Y FORMACIÓN DE PERSONAL..............................................................33 
1.5.3. SISTEMAS DE ENTRETENIMIENTO. ................................................................................................34  
1.5.4. SISTEMAS DE PUBLICIDAD. ............................................................................................................35  

CAPITULO 2: INTRODUCCIÓN AL DISEÑO INTERÁCTIVO.  ............................................... 36 

2.1. INTRODUCCION A LA INTERACTIVIDAD. ......................................................................... 37 
2.2. ESQUEMA CONCEPTUAL DEL DISEÑO INTERACTIVO. ...................................................... 38 
2.3. COMPONENTES CONCEPTUALES PARA EL DISEÑO DE APLICACIONES INTERACTIVAS...... 40 
2.3.1. EL DISCURSO. .................................................................................................................................40 
2.3.2. LA DRAMATIZACIÓN. .....................................................................................................................40  
2.3.3. COHERENCIA ARGUMENTAL..........................................................................................................40  
2.3.4. COMPOSICION DE IMÁGENES Y DISEÑO DE ESTRUCTURAS INTERACTIVAS..................................41 
2.3.4.1. Escenas interactivas. ..............................................................................................................41  
2.3.4.2. Zonas sensibles. .....................................................................................................................42  
2.3.4.3. Técnicas para la unión de texto e imagen..............................................................................44 
2.3.4.3.1. Complementariedad. .....................................................................................................44  
2.3.4.3.2. Relevo.............................................................................................................................44  
2.3.4.3.3. Anclaje............................................................................................................................44  
2.4.  PRINCIPIOS DE DISEÑO INTERACTIVO............................................................................ 45 
2.4.1.  PRINCIPIOS DE INTERACCIÓN Y ERGONOMÍA. .............................................................................45 
2.4.1.1. Principio de interactividad y de libertad................................................................................45 
2.4.1.2. Principio de redundancia de refuerzo....................................................................................45 
2.4.1.3. Principio de vitalidad. ............................................................................................................45  
2.4.1.4. Principio de necesidad. ..........................................................................................................46  

13
 2.4.2. OTROS PRINCIPIOS DE DISEÑO. .....................................................................................................46  
2.4.2.1. Anticipación. ..........................................................................................................................46  
2.4.2.2. Daltonismo.............................................................................................................................47  
2.4.2.3. Consistencia. ..........................................................................................................................47  
2.4.2.4. Reducción de latencia. ...........................................................................................................48  
2.5.  EQUIPO PRODUCTOR DE APLICACIONES INTERACTIVAS. ............................................... 48 
2.5.1. EQUIPO DE GUIÓN.........................................................................................................................48  
2.5.2. EQUIPO DE DOCUMENTACIÓN......................................................................................................49  
2.5.3. EQUIPO DE FORMATO DE DATOS..................................................................................................49  
2.5.4. EQUIPO DE MONTAJE DE LA APLICACIÓN. ....................................................................................49 
2.6. GUIÓN PARA LA CONSTRUCCIÓN DE APLICACIONES INTERACTIVAS. .............................. 49 
2.6.1. CONCEPTO DE GUION MULTIMEDIA. ............................................................................................50  
2.6.2. FASES PARA LA ELABORACIÓN DE GUIONES MULTIMEDIA...........................................................50 
2.6.2.1. Definición de los objetivos.....................................................................................................51  
2.6.2.2. Elaboración del Pre‐Guión. ....................................................................................................52  
2.6.2.3. Desarrollo del esquema de escenas (storyboard   interactivo). ............................................53 
2.6.2.4. Construcción del grafo de navegación...................................................................................54 
2.6.2.5. Diseño del guión interactivo. .................................................................................................56  

CAPITULO 3: DISEÑO DE UN PROTOTIPO PARA ELABORACIÓN DE GUIONES 
INTERACTIVOS.  ............................................................................................................. 58 
3.1. SISTEMA PROPUESTO..................................................................................................... 59 
3.2. REQUERIMIENTOS.......................................................................................................... 59 
3.2.1. REQUERIMIENTOS FUNCIONALES..................................................................................................59  
3.2.2. REQUERIMIENTOS NO FUNCIONALES. ..........................................................................................60  
3.3. MODELO DEL SISTEMA. .................................................................................................. 60 
3.3.1. RESUMEN.......................................................................................................................................60 
3.3.2. CASOS DE USO. ..............................................................................................................................61 
3.3.2.1. Caso de Uso: Crear Pantalla. ..................................................................................................61  
3.3.2.2. Caso de Uso: Agregar Objetos. ..............................................................................................62  
3.3.2.3. Caso de Uso: Establecer Enlaces. ...........................................................................................63 
3.3.2.4. Caso de Uso: Ver grafo de escenas. .......................................................................................63 
3.3.2.5. Caso de Uso: Vista previa de pantalla....................................................................................64 
3.3.3. DIAGRAMAS DE SECUENCIA. .........................................................................................................65  
3.3.3.1. Crear una nueva pantalla. ......................................................................................................65  
3.3.3.2. Agregar Objeto Multimedia. ..................................................................................................66  
3.3.3.3. Establecer Enlaces..................................................................................................................67  
3.3.3.4. Ver Grafo de escenas. ............................................................................................................68  
3.3.3.5. Vista Previa de Pantalla..........................................................................................................69  
3.3.4. DIAGRAMA DE CLASES...................................................................................................................70  
3.3.4.1. La clase Grafo.........................................................................................................................71  
3.3.4.2. La clase Vértice. .....................................................................................................................72  
3.3.4.3. La clase Arista.........................................................................................................................73  
3.3.4.4. La clase PantallaMultimedia. .................................................................................................74  
3.3.4.5. La clase ObjetoMultimedia. ...................................................................................................75  
3.3.4.6. La clase Imagen......................................................................................................................76  
3.3.4.7. La clase PanelImagen. ............................................................................................................77  
3.3.4.8. La clase AudioVideo. ..............................................................................................................78  

14
 3.3.4.9. La clase PanelAudioVideo. .....................................................................................................79  
3.3.4.10. La clase Boton. .....................................................................................................................80  
3.3.4.11. La clase Texto.......................................................................................................................81  
3.3.5. DIAGRAMA DE PAQUETES. ............................................................................................................82 

CONCLUSIÓN ................................................................................................................. 83 

RECOMENDACIONES...................................................................................................... 84 
BIBLIOGRAFÍA................................................................................................................ 85 

15
 LISTA DE FIGURAS

Figura 1. Ilustración Sistema Memex. ................................................................................. 27 

Figura 2. Esquema explicativo de interactividad. ................................................................ 37 
Figura 3. Esquema de diseño interactivo. ............................................................................ 38 
Figura 4. Zonas de una escena interactiva. .......................................................................... 41 
Figura 5. Definición de zona sensible. ................................................................................. 42 
Figura 6. Un mundo orientado simple. Interacción de escenas............................................ 55 
Figura 7. Diagrama de secuencia crear nueva Pantalla........................................................ 65 
Figura 8. Diagrama de secuencia agregar nuevo objeto. ..................................................... 66 
Figura 9. Diagrama de secuencia Establecer enlaces........................................................... 67 
Figura 10. Diagrama de secuencia Ver Grafo de Escenas. .................................................. 68 
Figura 11. Diagrama de secuencia Vista previa de pantalla. ............................................... 69 
Figura 12. Diagrama de Clases. ........................................................................................... 70 
Figura 13. Diagrama de Paquetes. ....................................................................................... 82 

16
 LISTA DE TABLAS

Tabla 1. Descripción de una escena o pantalla multimedia. ................................................ 54 

Tabla 2. Caso de uso Crear Pantalla..................................................................................... 61 
Tabla 3. Caso de uso Agregar Objetos Multimedia a la Pantalla......................................... 62 
Tabla 4. Caso de Uso Establecer Enlaces entre Pantallas.................................................... 63 
Tabla 5. Caso de Uso Ver Grafo de Escenas. ...................................................................... 63 
Tabla 6. Caso de Uso Vista previa de Pantalla. ................................................................... 64 

17
 GLOSARIO

abstracto, ta. (Del lat. abstractus). adj. Que significa alguna cualidad con
exclusión del sujeto. || 2. Dicho del arte o de un artista: Que no pretende
representar seres o cosas concretos y atiende solo a elementos de forma, color,
estructura, proporción, etc.

alfanumérico, ca. adj. Inform. Que está formado por letras, números y otros
caracteres. Teclado alfanumérico.

animación. (Del lat. animatĭo, -ōnis). f. Acción y efecto de animar o animarse. || 2.

Viveza, expresión en las acciones, palabras o movimientos. || 3. Cinem. En las
películas de dibujos animados, procedimiento de diseñar los movimientos de los
personajes o de los objetos y elementos.

aplicación. (Del lat. applicatĭo, -ōnis). f. Inform. Programa preparado para una
utilización específica, como el pago de nóminas, formación de un banco de
términos léxicos, etc.

applet. Componente de una aplicación que corre en el contexto de otro programa,

por ejemplo un navegador web.

aristas. Las uniones entre nodos o vértices de un grafo.

atributo. (Del lat. attribūtum). m. Cada una de las cualidades o propiedades de un

ser.

audiovisual. adj. Que se refiere conjuntamente al oído y a la vista, o los emplea a

la vez. Se dice especialmente de métodos didácticos que se valen de grabaciones
acústicas acompañadas de imágenes ópticas.

avi. Acrónimo de Audio Video Interleave (intercalado de audio y video). Se trata de

un formato de archivo que actúa como contenedor de flujos de datos de audio y
vídeo.

bmp. Es el formato propio del programa Microsoft Paint, que viene con el sistema
operativo Windows. Puede guardar imágenes de 24 bits (millones de colores), 8
bits (256 colores) y menos. Puede darse a estos archivos una compresión sin
pérdida de calidad: la compresión RLE (Run Length Encoding). El uso más común
de este formato es generar imágenes de poco peso para crear fondos para el
escritorio de Windows.

18
CD-ROM. (Sigla del ingl. Compact Disc Read-Only Memory). m. Inform. Disco
compacto de gran capacidad que puede almacenar información, en distintos
formatos, para ser procesada por un ordenador.

chip. (Del ingl. chip). m. Inform. Pequeño circuito integrado que realiza numerosas
funciones en ordenadores y dispositivos electrónicos.

componente. Los componente de Software son todo aquel recurso desarrollado

para un fin concreto y que puede formar solo o junto con otro/s, un entorno
funcional requerido por cualquier proceso predefinido. Son independientes entre
ellos, y tienen su propia estructura e implementación. Si fueran propensos a la
degradación debieran diseñarse con métodos internos propios de refresco y
actualización.

daltonismo. (De J. Dalton, 1776-1844, físico y químico inglés que padecía esta
enfermedad). m. Defecto de la vista, que consiste en no percibir determinados
colores o en confundir algunos de los que se perciben.

dispositivo. El término dispositivo se utiliza como sinónimo de aparato. En

Informática, se utiliza para referirse a los componentes del ordenador.

e-learning. De Electronic Learning - Anglicismo,Neologismo. Aprendizaje asistido

por tecnologías de la información.

emular. (Del lat. aemulāre). tr. Imitar las acciones de otro procurando igualarlas e
incluso excederlas.

enlace. En informática, enlace puede referirse a: el hiperenlace (hyperlink), una

referencia en un documento de hipertexto a otro documento o recurso; el enlace
duro, una referencia a los datos físicos sobre un sistema de archivos; el enlace
simbólico, un acceso a un directorio o fichero que no es real sino es una referencia
a otro.

ergonomía. (obra, trabajo, y -nomía). f. Estudio de datos biológicos y tecnológicos

aplicados a problemas de mutua adaptación entre el hombre y la máquina.

escalable. adj. Que puede ser escalado.

feedback. Retroalimentación.

fichero. Conjunto de información que se almacena en una computadora y puede

ser identificado por su ruta completa.

fragmentar. (De fragmento). tr. Reducir a fragmentos.

19
gif. (Compuserve GIF o Graphics Interchange Format) es un formato gráfico
utilizado ampliamente en la World Wide Web, tanto para imágenes como para
animaciones.

grafo. Conjunto de objetos llamados vértices o nodos unidos por enlaces llamados
aristas.

guión. (De guía). m. Escrito en que breve y ordenadamente se han apuntado

algunas ideas o cosas con objeto de que sirva de guía para determinado fin. || 2.
Texto en que se expone, con los detalles necesarios para su realización, el
contenido de un filme o de un programa de radio o televisión.

guionista. com. Persona que elabora el guion.

hipermedia. Término con que se designa al conjunto de métodos o

procedimientos para escribir, diseñar, o componer contenidos que tengan texto,
video, audio, mapas u otros medios, y que además tenga la posibilidad de
interactuar con los usuarios.

hipertexto. m. Inform. Texto que contiene elementos a partir de los cuales se

puede acceder a otra información.

hipervínculo. Elemento de un documento electrónico que hace referencia a otro

recurso, por ejemplo, otro documento o un punto específico del mismo o de otro
documento.

inteligencia artificial. Ciencia que intenta la creación de programas para

máquinas que imiten el comportamiento y la comprensión humana.

interactivo, va. adj. Que procede por interacción. || 2. Inform. Dicho de un

programa: Que permite una interacción, a modo de diálogo, entre el ordenador y el
usuario.

intranet. Red de ordenadores de una red de área local (LAN) privada empresarial
o educativa.

java. Una tecnología desarrollada por Sun Microsystems para aplicaciones

software independiente de la plataforma.

jpeg. (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir

imágenes con 24 bits de profundidad o en escala de grises. JPEG es también el
formato de fichero que utiliza este algoritmo para comprimir imágenes.

20
latencia. En redes informáticas de datos se denomina latencia a la suma de
retardos temporales dentro de una red. Un retardo es producido por la demora en
la propagación y transmisión de paquetes dentro de la red.

midi. Son las siglas de Musical Instrument Digital Interface (Interfaz Digital de
Instrumentos Musicales). Se trata de un protocolo industrial estándar que permite
a las computadoras, sintetizadores, secuenciadores, controladores y otros
dispositivos musicales electrónicos comunicarse y compartir información para la
generación de sonidos.

mp3. Formato de audio digital comprimido con pérdida desarrollado por el Moving
Picture Experts Group (MPEG) para formar parte de la versión 1 (y posteriormente
ampliado en la versión 2) del formato de vídeo MPEG. Su nombre es el acrónimo
de MPEG-1 Audio Layer 3.

mpeg-2. Normas para audio y vídeo para difusión de calidad de televisión.

Utilizado para servicios de TV por satélite como DirecTV (Cadena estadounidense
de televisión vía satélite de difusión directa), señales de televisión digital por cable
y (con ligeras modificaciones) para los discos de vídeo DVD.

multihilo. Un hilo de ejecución, en sistemas operativos, es una característica que

permite a una aplicación realizar varias tareas simultáneamente. Los distintos hilos
de ejecución comparten una serie de recursos tales como el espacio de memoria,
los archivos abiertos, situación de autenticación, etc. Esta técnica permite
simplificar el diseño de una aplicación que debe llevar a cabo distintas funciones
simultáneamente.

multiplicidad. (Del lat. multiplicĭtas, -ātis). f. Cualidad de múltiple. || 2. Multitud,

abundancia excesiva de algunos hechos, especies o individuos.

nodo. Espacio real o abstracto en el que confluyen parte de las conexiones de

otros espacios reales o abstractos que comparten sus mismas características y
que a su vez también son nodos. Todos estos nodos se interrelacionan entre sí de
una manera no jerárquica y conforman lo que en términos sociológicos o
matemáticos se llama red.

online. En general, se dice que algo está en línea, on-line u online si está
conectado a una red o sistema mayor (que es, implícitamente, la línea).

periférico, ca. adj. Perteneciente o relativo a la periferia. || 2. m. Inform. Aparato

auxiliar e independiente conectado a la unidad central de una computadora.

píxel. (Del ingl. pixel, y este acrón. de pix, pl. coloq. de picture, retrato, imagen, y
element, elemento). m. Inform. Superficie homogénea más pequeña de las que
componen una imagen, que se define por su brillo y color.

21
plataforma. En informática y tecnología, plataforma se refiere al sistema operativo
o a sistemas complejos que a su vez sirven para crear programas, como las
plataformas de desarrollo.

polisémico, ca. adj. Ling. Que manifiesta polisemia. || 2. Ling. Perteneciente o

relativo a la polisemia.

resolución. Describe cuánto detalle puede observarse en una imagen.

simulación. Es la experimentación con un modelo de una hipótesis o un conjunto

de hipótesis de trabajo.

sistema. (lat. systema) es un conjunto de elementos interrerelacionados e

interactuantes entre sí.

storyboards. Ilustraciones mostradas en secuencia con el objetivo de servir de

guía para entender una historia, previsualizar una animación o seguir la estructura
de una película antes de realizarse o filmarse.

tiff. (Tagged Image File Format) es un formato de fichero para imágenes.

uml. Lenguaje Unificado de Modelado (UML, por sus siglas en inglés, Unified
Modeling Language) es el lenguaje de modelado de sistemas de software más
conocido y utilizado en la actualidad.

verismo. (Del lat. verus). m. Realismo llevado al extremo en las obras de arte.

vértice. En Teoría de grafos, un vértice es uno de los elementos de un grafo.

wav. Apócope de WAVEform audio format, es un formato de audio digital

normalmente sin compresión de datos desarrollado y propiedad de Microsoft y de
IBM que se utiliza para almacenar sonidos en el PC, admite archivos mono y
estéreo a diversas resoluciones y velocidades de muestreo, su extensión es .wav.

web. (Del ingl. web, red, malla). f. Inform. Red informática.

website. Un sitio web (en inglés: website) es un conjunto de páginas web,

típicamente comunes a un dominio de Internet o subdominio en la World Wide
Web en Internet.

wma. Windows Media Audio es un formato de compresión de audio con pérdida

propiedad de Microsoft, aunque recientemente se ha desarrollado de compresión
sin pérdida.

22
 RESUMEN

La presente monografía tiene como objetivo, el estudio de los guiones interactivos,

como una metodología para el desarrollo aplicaciones multimedia. Inicialmente, se
introduce a las tecnologías multimedia, a partir de sus antecedentes históricos,
conceptos generales y sistemas multimediales de nuestra actualidad. Hace
énfasis al diseño interactivo, a las metodologías, estrategias, principios,
herramientas y pautas; para iniciar en el campo del desarrollo de multimedia.
Profundiza en la construcción de estructuras para la elaboración de guiones
interactivos que contribuyan al diseño de “obras multimedia” de calidad.
Finalmente, se presenta el diseño de un prototipo basado en la temática de este
escrito.

23
 INTRODUCCIÓN

La multimedia se ha convertido en algo muy común en la actualidad. Se encuentra

inmersa en aquellas cosas que normalmente nos rodean y hacen parte de
nuestras vidas: computadores, teléfonos personales, sistemas de alarmas,
sistemas de localización geográfica, bibliotecas virtuales, sistemas bancarios,
electrodomésticos para el hogar, etc., por tal razón, la multimedia no debe estar
muy alejada de los desarrolladores de software.

Es por ello, que el contenido del presente documento, tratará de explicar una
metodología para la construcción de software multimedia de calidad, a partir de la
elaboración de guiones y de algunos principios del diseño interactivo.

En primera instancia, podrás viajar a través del tiempo, observando los

antecedentes históricos de los sistemas multimedia. Conocerás específicamente,
aquellos elementos que hacen parte de una aplicación multimedia, en conjunto
con los conceptos generales que harán sumergirte en el mundo del diseño de
obras multimedia.

Se introduce al diseño interactivo, presentando algunas reglas y principios para

que el proyecto multimedia a construir sea lo mas atractivo posible al usuario final,
y además, cumpla con todo los estándares de calidad. Es posible hacer software
multimedia a partir de la utilización y elaboración de guiones multimedia o guiones
interactivos. Estos guiones pueden compararse con los guiones cinematográficos.
En el mundo del cine, el éxito de una buena película depende de que tan bien esté
escrito su guión. Si igualamos una aplicación multimedia con una película,
entonces debe existir un guión para construirla y que nos garantice el “triunfo”, y
nos permita llegar al punto deseado.

El guión multimedia o guión interactivo; es concebido como un mecanismo que

nos ayuda a plasmar en un documento, las ideas, escenas, elementos y
transiciones; que hacen parte del sistema multimedia que se quiere construir. En
el guión multimedia, yace la calidad del producto final. Esta dirigida a diseñadores
gráficos, diseñadores web, desarrolladores de aplicaciones interactivas y
desarrolladores de software e-learning. En la presente monografía profundizarás
en la construcción del guión el cual hará cumplir todos tus objetivos de desarrollo
de obras multimedia.

24
 CAPITULO 1

LA TECNOLOGÍA MULTIMEDIA

25
1.1. ANTECEDENTES HISTÓRICOS DE LA MULTIMEDIA.

A partir de la historia computacional, se puede analizar de cierto modo, la

evolución de los sistemas de información, en especial, aquellos de entornos
multimedia. Al inicio de la era de la informática, los datos solo eran suministrados
por una simple impresora. Luego, aparecieron las pantallas de visualización; las
cuales, presentaban datos de forma mucho más rápida que una impresora. En
ambos entornos se dificultaba el manejo de los datos, ya que estaban codificados
solo en caracteres alfanuméricos, lo que hacía tedioso el análisis de los mismos.
Es entonces, que por exigencias empresariales y una serie investigaciones,
surgen programas para el tratamiento de imágenes, y pantallas con mayor
resolución, que permitieron nuevas formas de ver la información, logrando así una
relación hombre-maquina mucho mas natural.

El concepto de multimedia surge en 1945 cuando Vannevar Bush propuso que las
computadoras deberían usarse como soporte del trabajo intelectual de los
humanos. Bush diseño una maquina llamada MEMEX, la cual describió de la
siguiente manera: "Considere un dispositivo para el uso individual, parecido a una
biblioteca y un archivador mecanizado... donde el individuo pueda almacenar sus
libros, registros y comunicaciones y que por ser mecanizado, puede ser
consultado con rapidez y flexibilidad." 1 Esta descripción es una definición
aproximada de los sistemas multimedia actuales (Figura 1).

A partir de los años 50s, se empezaron a fabricar chips y tarjetas electrónicas,

para mejorar el procesamiento de la información, dando como resultado la
integración del sonido y video en la “antigua” computadora. Con el mejoramiento
de los discos de almacenamiento (duro, flexible, óptico), en conjunto con el
desarrollo de accesorios y periféricos para el manejo de textos, imágenes,
sonidos, gráficos y videos; forman lo que hoy conocemos como la tecnología de
las PCs (Computadoras personales). 2

1
- HERNÁNDEZ MORA, Artemio J. “Multimedia.” [En línea]. Texinfo 1 ed.
[México]: Monografías.com, Sept. 2001 [citado: 03 de abril de 2006]. Disponible en Internet:
http://www.monografias.com/trabajos7/mult/mult.shtml.
2
- CORRALES DIAZ, Carlos. “La Tecnología Multimedia: Una nueva tecnología de comunicación e
información. Características, concepciones y aplicaciones.” [En línea]. Texinfo 1 ed. [Guadalajara, México]:
ITESO, Enero 1994 [citado: 10 de Marzo de 2006]. Disponible en Internet:
http://iteso.mx/~carlosc/pagina/documentos/multidef.htm.

26
 Figura 1. Ilustración Sistema Memex.

En 1984, la compañía Apple Computer lanzó la Macintosh, la primera

computadora con amplias capacidades de reproducción de sonidos equivalentes a
los de un buen radio AM. Esta característica, unida a que su sistema operativo y
programas se desarrollaron, en la forma que ahora se conocen como ambiente
Windows, propicios para el diseño gráfico y la edición, hicieron de la Macintosh la
primera posibilidad de lo que se conoce como Multimedia. 3

La evolución multimedia viene acompañada de dos grandes características. La

primera de ellas es la comunicación; pues aquí, es donde se le da operabilidad al
concepto de multimedia. La segunda es la interactividad; la cual da forma, sentido
y vida a un sistema multimedia, es decir; ésta, siempre busca y proporciona la
naturalidad en la relación hombre-maquina. El ambiente interactivo inicia con el
desarrollo de las nuevas tecnologías de la comunicación y la información, y crece
potencialmente en el ámbito de los videojuegos. En 1987 se comenzó con juegos
de video en dos dimensiones operados por monedas y software para
entrenamiento y capacitación de personal militar. Ya para 1992, se integran audio
(música, sonido estéreo y voz), video, gráficas, animación y texto al mismo tiempo;
y se desarrollaron otro tipo de aplicabilidades multimedia. La principal idea
“multimedia” desarrollada en los video juegos es: “que se pueda navegar y buscar
la información que se desea sobre un tema, sin tener que recorrer todo el
programa, que se pueda interactuar con la computadora y que la información no
sea lineal sino asociativa”. 4 Este es el concepto de interacción, y fue acogido por
los diferentes sistemas de operabilidad multimedia.

3
- Ibíd.
4
- Ibíd.

27
Para 1993 el concepto multimedia obliga a revisar tanto los sistemas y plataformas
de cómputo, como los ambientes de trabajo, en relación al software de multimedia
y a sus aplicaciones. Se buscaba compatibilidad de tecnologías, pero también, el
desarrollo de estándares en las aplicaciones multimedia desarrolladas; para poder
ser utilizadas en plataformas de distintas tecnologías.

Los antiguos sistemas multimedia permitían asociar y explorar cualquier tipo de

imagen digitalizada dentro de un programa de cómputo, de modo que el usuario
navegara o recorriera el programa conforme a sus intereses, regresara a la parte
original o se adentrara en la exploración de otra parte del programa, sin necesidad
de recorrerlo todo. Éste proceso en las aplicaciones de nuestra actualidad sigue
funcionando igual; pero de una forma mejorada.

Podemos ver ahora en nuestra actualidad, que tan importante fueron los aportes
que hicieron los sistemas multimedia, a través de su historia; en los cambios
tecnológicos que se dieron a nivel computacional (incluyendo hardware y software)
y a nivel de comunicaciones, para obtener las avanzadas aplicaciones multimedia
de hoy: video conferencias, bibliotecas virtuales, tutores inteligentes, comunicación
de audio y datos, tecnología de telefonía móvil, intranets, charlas virtuales,
televisión vía web; entre otras no mencionadas.

1.2. QUE ES MULTIMEDIA.

Multimedia es la integración de diversos medios (visuales y auditivos) para la

elaboración y envío de mensajes por diversos canales, potencializando la
efectividad de la comunicación; entendiendo como mensaje, cualquier tipo de
información. La multimedia es efectiva, ya que usa diferentes medios para llegar a
lo cognición del hombre, a través de sus sentidos.

Las aplicaciones multimedia incluyen asociaciones o enlaces predefinidas

conocidas como hipervínculos, que permiten a los usuarios moverse por la
información de una forma intuitiva; estos enlaces se dan normalmente entre
diferentes vistas de una aplicación, a través de algún objeto multimedia. 5 Además
en multimedia podemos encontrar otro tipo de enlaces especiales, como los
hipertextos. Éste es un método de presentación de la información que permite
hacer una lectura no lineal de la misma, trata de emular el modo en que el cerebro

5
- "Multimedia." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.

28
humano almacena y recupera la información, por medio de asociación de ideas, y
no en el orden en el que los sucesos ocurrieron. Consiste en organizar la
información en torno a una serie de palabras clave, que permiten que, al llegar a
ellas, el documento pueda avanzar hacia otra parte del mismo o presentar
información que se encuentra en otro documento. 6 En cualquier página web
actual se puede localizar estos dos conceptos. La combinación de hipervínculos e
hipertexto forman lo que se conoce como hipermedia. 7

1.3. OBJETOS MULTIMEDIA.

Entiéndase como objetos multimedia, a los diferentes medios de comunicación

(textos, imágenes, sonido, gráficos, video, entre otros.) que existen para poder
transmitir un mensaje o información. Estos objetos se pueden agrupar y clasificar
en tres grandes grupos: objetos visuales, objetos de sonido y objetos de
organización.

1.3.1. OBJETOS VISUALES.

Uno de los elementos fundamentales de los sistemas multimedia son las

imágenes. Una imagen es un objeto visual, es una figura representativa con
semejanza o apariencia de algo, que se percibe por medio de la visión.
Dependiendo de la calidad de la imagen, se aumenta o disminuye la dificultad para
presentarla en la pantalla del ordenador. Entre los objetos visuales se destacan las
fotografías, dibujos, animaciones, gráficos y videos; los cuales, pueden ser
clasificados en varios formatos dependiendo de su naturaleza. 8

1.3.1.1. Gráficos de mapas de bits.

Las imágenes de mapa de bits (bitmaps o imágenes raster) están formadas por
una rejilla de celdas, a cada una de las cuales, denominada píxel (Picture
Element, Elemento de Imagen), se le asigna un valor de color y luminancia
propios, de tal forma que su agrupación crea la ilusión de una imagen de tono

6
- "Hipertexto." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.
7
- AMORÓS POVEDA, Lucía. “El guión en la elaboración de hipermedia para la enseñanza a distancia.”
[Documento de texto]. 1 ed. [España]: Becaria F.U.P porel MECD, S.F [citado: 17 de Mayo de 2006]. Correo
electrónico: [email protected]. p.3.
8
- "Multimedia: Elementos Visuales." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.

29
continuo. 9 Las imágenes se manipulan y representan como un conjunto de puntos
y, a diferencia de los gráficos vectoriales, no son escalables; cada punto tiene un
lugar preciso, definido por una fila y una columna. Aunque puede variar su
tamaño, la ampliación o reducción supone una pérdida notable de calidad del
gráfico. Entre los más comunes de este tipo tenemos: el Graphical Interchange
Format (GIF), el Joint Photographic Experts Group (JPEG), el Tagged Image File
Format (TIFF) y el Windows Bitmap (BMP). 10

1.3.1.2. Gráficos vectoriales.

Los gráficos vectoriales, también conocidos como gráficos orientados a objetos,

son el segundo gran grupo de imágenes digitales. Son más simples que los
gráficos de mapas de bits, ya que en ellos las imágenes se almacenan y
representan por medio de trazos geométricos controlados por cálculos y fórmulas
matemáticas, tomando algunos puntos de la imagen como referencia para
construir el resto. Las imágenes en los gráficos vectoriales no se construyen píxel
a píxel, sino que se forman a partir de vectores, objetos formados por una serie de
puntos y líneas rectas o curvas definidas matemáticamente. 11 Como los puntos
que los componen no están restringidos a una fila y columna particulares, los
gráficos vectoriales pueden reproducir las imágenes más fácilmente, y suelen
proporcionar una imagen mejor en la mayoría de las pantallas e impresoras. Entre
los formatos de éstos, figuran el Encapsulated Postscript (EPS), el Windows
Metafile Format (WMF), el Hewlett-Packard Graphics Language (HPGL) y el
formato Macintosh para ficheros gráficos, conocido como PICT. 12

1.3.1.3. Elementos de video.

Un video es un sistema de reproducción secuencial de imágenes, acompañadas o

no de sonido; para su tratamiento (obtener, formatear y editar), es necesaria la
utilización de componentes y programas informáticos especiales. Los archivos de
vídeo pueden llegar a ser muy grandes, por lo que suelen reducirse de tamaño
mediante la compresión, una técnica que identifica grupos de información
9
- MORENO, Luciano. “Gráficos de mapa de bits.” [En línea]. 1 ed. [S.C]: S.E., S.F. [citado: 21-09-2006].
Disponible en Internet: http://www.htmlweb.net/diseno/graficos_digitales/graficos_2.html.
10
- “Gráficos de mapa de bits." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.
11
- MORENO, Luciano. “Gráficos Vectoriales” [En línea]. Texinfo 1 ed. [S.C]: S.E., S.F. [citado: 21- 09-
2006]. Disponible en Internet: http://www.htmlweb.net/diseno/graficos_digitales/graficos_8.html.
12
- “Gráficos Vectoriales." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.

30
recurrente (por ejemplo, 100 puntos negros consecutivos), y los sustituye por una
única información para ahorrar espacio en los sistemas de almacenamiento de la
computadora. Algunos formatos habituales de compresión de vídeo son el Audio
Video Interleave (AVI), el Quicktime y el Motion Picture Experts Group (MPEG o
MPEG2). Estos formatos pueden comprimir los ficheros de vídeo hasta un 95%,
pero introducen diversos grados de borrosidad en las imágenes. 13

1.3.1.4. Elementos de animación.

La animación es una simulación de movimiento producida mediante imágenes que

se crearon una por una; al proyectarse sucesivamente estas imágenes
(denominadas cuadros) se produce una ilusión de movimiento, pero el movimiento
representado no existió en la realidad. Se basa en la ilusión de movimiento
(llamada persistencia de la visión). 14 Las animaciones son especialmente útiles
para simular situaciones de la vida real; puede realzar elementos gráficos y de
vídeo añadiendo efectos especiales como la metamorfosis, el paso gradual de una
imagen a otra sin solución de continuidad. 15 Entre estos elementos las más
comunes son las animaciones flash y las applets de java.

1.3.2. OBJETOS DE SONIDO.

El sonido al igual que las imágenes, cumplen un papel muy importante en la

presentación de una aplicación multimedia. Éste también debe ser formateado
para poder ser reproducido por el computador. Los formatos mas frecuentes son
los de forma de onda (WAV), los cuales almacenan los sonidos propiamente
dichos, como hacen los CD musicales o las cintas de audio. Los ficheros WAV
pueden ser muy grandes y requerir compresión. Los formatos MIDI (Musical
Instrument Digital Interface) no almacenan sonidos, sino instrucciones que
permiten a unos dispositivos llamados sintetizadores reproducir los sonidos o la
música. Los ficheros MIDI son mucho más pequeños que los ficheros WAV, pero
su calidad de la reproducción del sonido es bastante menor. 16

13
- "Multimedia: Elementos Visuales." Microsoft® Encarta® 2006 [DVD]. Op. Cit.
14
- Wikipedia®. “La animación” [En línea]. [citado: 21-09-2006]. Enciclopedia en línea Wikipedia®.
Disponible en Internet: http://es.wikipedia.org/wiki/Animación. Ultima actualización 20-sep-2006.
15
- "Multimedia: Elementos Visuales." Microsoft® Encarta® 2006 [DVD]. Op. Cit.
16
- "Multimedia: Elementos de Sonido." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.

31
Recientemente se han incorporado formatos de audio con una gran capacidad de
compresión, lo que ha permitido incluir elementos de sonido importantes, tanto en
los productos multimedia que se comercializan en soporte de CD-ROM como en
los que se alojan en la Web. En concreto, el formato MPEG Audio Layer 3 (MP3),
desarrollado en Alemania por el Instituto Fraunhofer, o el Windows Media Audio
(WMA), de Microsoft; sus algoritmos actúan eliminando las frecuencias de sonido
que no son perceptibles para el oído humano, lo que permite reducir el tamaño del
archivo de audio a menos de su décima parte, sin apenas pérdida de fidelidad. 17

1.3.3. OBJETOS DE ORGANIZACIÓN.

Cuando se habla de organización de un sistema multimedia; se refiere a aquellos

elementos, que de una u otra manera, permiten visualizar de forma idónea la
información. Estos objetos tienen algún tipo de hipervínculo, y enseñan al usuario
a interaccionar con la computadora de forma lógica e intuitiva, facilitando así, la
comprensión del mensaje que se quiere transmitir. Los elementos de organización
conectan de manera creativa los diferentes elementos de una aplicación
multimedia, y son activados por medio del clic del ratón, Entre estos elementos
encontramos los menús desplegables, los botones, las ventanas que contienen
una lista de instrucciones u otros elementos multimedia para que el usuario elija,
las barras de desplazamiento para poder movernos a lo largo de un documento,
entre otros. 18

1.4. CARACTERISTICAS COMUNICATIVAS DE LOS SISTEMAS

MULTIMEDIA.

Los sistemas multimedia tienen un gran poder comunicativo, debido a la

integración de varios medios de comunicación. Teniendo en cuenta esta relación
(multimedia-comunicación), se caracterizan por:

• La unión de sustancias expresivas, pero también de soportes o “medios”

que implican una determinada mediación técnica en el resultado final. 19

17
- Ibíd.
18
- "Multimedia: Elementos de Organización." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation,
2005.
19
- ANZULOVICH, Guillermo. “Comunicación Multimedial: Características comunicativas de los
multimedia” [Documento PDF]. Texinfo 1 ed. [S.C]: S.E., S.F. [citado: 22-03-2006]. Disponible en Internet:
http://tecno.unsl.edu.ar/multimedia/2.pdf. Correo electrónico: [email protected].

32
 • Tiene una determinada organización de la información; no lineal, flexible y
configurable (en diversos grados) por los usuarios del programa. 20

La organización lleva a contener un alto grado de interactividad en la aplicación.

Por tanto la interactividad no es una característica que de forma absoluta a los
multimedia; simplemente, es la forma en que los autores organizan la información
y los lectores “navegan” por la misma. 21

1.5. CAMPOS DE APLICACIÓN.

Los campos de aplicación mas comunes de los sistemas multimedia que se

pueden encontrar, son los siguientes:

• Sistemas de información y documentación.

• Educación y formación de personal.
• Entretenimiento.
• Publicidad.

1.5.1. SISTEMAS DE INFORMACIÓN Y DOCUMENTACION.

Los multimedia pueden contener gran cantidad de información. Su fácil y rápido

acceso los convierte en el medio adecuado para los contenidos de tipo informativo
y documental. Algunos ejemplos de estos sistemas multimedia son los terminales
de información utilizados en museos y exposiciones, los puntos de información
para turistas en los aeropuertos, planos-guía interactivos de lugares, las
enciclopedias multimedia, etc. 22

1.5.2. SISTEMAS DE EDUCACION Y FORMACIÓN DE PERSONAL.

20
- Ibíd.
21
- Ibíd.
22
- ANZULOVICH. “Comunicación Multimedial: El uso social de los multimedia.” [Documento PDF].
Texinfo 1 ed. [S.C]: S.E., S.F. [citado: 22-03-2006]. Disponible en Internet:
http://tecno.unsl.edu.ar/multimedia/1.pdf.

33
Gracias a la interactividad, el receptor o el lector de una aplicación multimedia, se
ve obligado a participar si quiere avanzar, a prestar atención y responder a los
requerimientos del programa. En este sentido, la multimedia es un recurso para la
auto educación; su base pedagógica consiste en permitir que el usuario organice y
establezca las interrelaciones con la información, con el fin de aumentar o
modificar su conocimiento previo. 23

Los programas multimedia interactivos permiten la simulación de situaciones

reales, por tanto, estos pueden ser utilizados para capacitar a cualquier tipo de
personas en una labor específica. Por ejemplo, los programas de simulación que
utiliza el gobierno para capacitar a sus pilotos. 24

1.5.3. SISTEMAS DE ENTRETENIMIENTO.

En la rama de las aplicaciones multimedia para el entretenimiento, hablemos del

que ha superado toda expectativa en lo que a imagen y medios audiovisuales se
refiere. Los videojuegos tienen un uso social específico y actualmente constituyen
un mercado mucho más grande que el de la industria del cine. 25

Encontramos en la actualidad una serie de juegos que van desde un solo jugador
en 2D, hasta otros en donde un mundo 3D y multijugadores, hace que se viva una
experiencia fantástica, muy cercana a la realidad; ya que estos juegos utilizan la
potencialidad de las imágenes y el sonido, en conjunto con un alto nivel de
interactividad.

Además de los videojuegos, se puede encontrar en el mercado otro tipo de

entretenimiento multimedia, como por ejemplo: Los reproductores mp3 y mp4,
software de mensajería instantánea e intercambio de ficheros como MSN
Messenger, las paginas de web Chat con video y audio incluidos, la tecnología de
los nuevos equipos celulares, entre muchos mas no mencionados en el presente
texto.

23
- ANZULOVICH. “Comunicación Multimedial: Usos didácticos de los multimedia.” [Documento PDF].
Texinfo 1 ed. [S.C]: S.E., S.F. [citado: 22-03-2006]. Disponible en Internet:
http://tecno.unsl.edu.ar/multimedia/9.pdf.
24
- ANZULOVICH. “Comunicación Multimedial: El uso social de los multimedia.”. Op. Cit. p.4.
25
- Ibíd.

34
1.5.4. SISTEMAS DE PUBLICIDAD.

En nuestra actualidad los sistemas multimedia que más se utilizan para publicidad,
son los websites. Con los grandes avances en las animaciones y con el uso de la
Internet, las grandes, medianas y las pequeñas empresas utilizan este medio para
promocionar sus productos y así conseguir de una forma rápida a sus clientes. 26

Un ejemplo de estos sistemas son los websites de entidades bancarias, que

además pueden ofrecer su portafolio y prestación de servicios online; para que sus
clientes puedan realizar sus transacciones sin tener que trasladarse físicamente a
una sucursal del banco.

Las aplicaciones multimedia son y serán la tecnología del presente y futuro.

Seguramente tendrán muchos mas campos de aplicación que las mencionadas en
este documento. El objetivo de este capitulo es introducir al lector en el mundo
multimedia, desde sus inicios, conceptos, aplicaciones, para luego llegar a la parte
de diseño.

26
- ANZULOVICH. “Comunicación Multimedial: El uso social de los multimedia.”. Op. Cit. p.5.

35
 CAPITULO 2

INTRODUCCIÓN AL DISEÑO INTERACTIVO

36
2.1. INTRODUCCIÓN A LA INTERACTIVIDAD.

Figura 2. Esquema explicativo de interactividad.

En muchas ocasiones se escucha hablar de interactividad o de diseño interactivo,

y no es indiferente, puesto que es la estructura que maneja la tecnología
multimedia de hoy día. En el presente capitulo se introducirá a este concepto y al
diseño multimedia.

“La interactividad es la capacidad del receptor para controlar un mensaje no-lineal

hasta el grado establecido por el emisor, dentro de los límites del medio de
comunicación asincrónico”. 27

Este concepto tomado de un artículo de la revista Grupo Editorial Sin Papel en

Internet, se aproxima de forma considerable, para no decir preciso, al significado
de interactividad. Según la figura anterior, la interactividad podría definirse como
un modelo de comunicación, en donde un sujeto emisor envía un mensaje por
distintos medios a un receptor y viceversa, pero es el emisor quien establece los
limites de transmisión del mensaje. El receptor navega en la información sin tener

27
- G. BEDOYA, Alejandro. “¿Qué es interactividad?” [En línea]. Grupo Editorial Sin Papel. México D.F.
Septiembre 1.997 [citado: 23-Mar-06]. Disponible en Internet: http://www.sinpapel.com/art0001.shtml .

37
un orden específico, o sea, elije que parte del mensaje quiere ver, como lo quiere
ver, y en que momento hacerlo.

Pero, ¿Qué tiene que ver la comunicación con la interactividad? Pues bien, esta
relación existe ya que la interactividad se da dentro de los mismos medios de
comunicación y viceversa. Las técnicas de comunicación son utilizadas para
escribir interactivamente y poder llegar a la cognición del usuario receptor. Con la
fusión comunicación-interactividad, se llega a una aplicación interesante y exitosa,
logrando tocar los sentimientos, conocimientos y persuasión del receptor.

2.2. ESQUEMA CONCEPTUAL DEL DISEÑO INTERACTIVO.

Figura 3. Esquema de diseño interactivo.

La figura 3, ilustra las bases conceptuales necesarias para el desarrollo de un

buen material multimedia. Bou en su edición del 2003, afirma que el diseño
interactivo descansa sobre dos disciplinas: una es la narración audiovisual, es
decir, la narración clásica en imágenes (cine, cómic, publicidad, etc.); la otra es la
ergonomía o ciencia del estudio acerca de cómo las maquinas se adaptan al ser
humano. 28

28
- BOU BAUZÁ, Guillem. “El guión multimedia”. Ed. 2. Madrid (España): Anaya Multimedia, 2003. p.31.

38
En la narración audiovisual se encuentran los siguientes núcleos conceptuales: La
argumentación como la parte de la retórica que enseña a expresar nuestras ideas
de forma persuasiva; la narración, como un arte para contar una historia o
referirnos a un hecho, y lograr la atención y comprensión del lector; la creatividad,
como la facultad de inventar o crear algo interesante y atractivo. La composición
de imágenes, es la parte de diseño grafico (edición, creación y estructuración de
imágenes); y por ultimo, el Storyboarding lineal, es una técnica usada
principalmente en cinematografía, para plasmar de forma escrita e ilustrativa las
secuencias de una historia. 29

La parte de ergonomía, resalta los siguientes conceptos: El Storyboarding

interactivo, consiste en nuevas técnicas y reglas de sucesión de escenas para la
construcción y organización de esquemas visuales de libre circulación; el diseño
multimedia, que agrupa las nuevas tendencias de diseño, normatividad, y software
para el desarrollo de aplicaciones multimediales; y el análisis y evaluación, para
verificar el buen funcionamiento del aplicativo. 30

Finalmente, se ha ligado la temática de conjugación de texto e imagen tanto a la

Narración Audiovisual como a la ergonomía; para la combinación de texto escrito
con imágenes en ambos contextos. 31

Se puede concluir que para poder realizar un buen diseño de una aplicación
multimedia, es indispensable que el desarrollador o grupo diseñador, posea las
siguientes características:

1. Debe ser argumentativo.

2. Saber narrar una historia.
3. Ser creativo.
4. Saber procesar y manipular imágenes.
5. Conocer como plasmar una historia de forma visual y escrita.
6. Conocer nuevas técnicas para el desarrollo entornos interactivos.
7. Manejar software, modas, y normas para la elaboración de multimedia.
8. Elaborar mecanismos para la verificación de la aplicación.
9. Conocer técnicas para la combinación de textos con imágenes.

29
- Ibíd. p.31 y p.32.
30
- Ibíd.
31
- Ibíd.

39
Ahora se tratará de explicar algunos de los conceptos mencionados anteriormente
considerados como básicos para el diseño de multimedia. Para profundizar en
algunos otros temas, se recomienda leer la obra “El guión multimedia 2003” de
Guillem Bou.

2.3. COMPONENTES CONCEPTUALES PARA EL DISEÑO DE

APLICACIONES INTERACTIVAS.

Los siguientes conceptos, son muy importantes a la hora de desarrollar una

aplicación multimedia. Se les ha llamado componentes conceptuales, porque se
hacen necesarios para garantizar el éxito del producto interactivo a diseñar:

2.3.1. EL DISCURSO.

El discurso incluye la forma en que aparecen y se suceden todas las imágenes,

textos, sonidos y demás elementos en los que se apoya el mensaje. Si
entendemos un multimedia como una serie de estímulos dirigidos a una audiencia,
la forma en que el guionista organiza dichos estímulos es el discurso. 32

2.3.2. LA DRAMATIZACIÓN.

La dramatización consiste en introducir conflictos y sentimientos en una narración.

Sin ella se pierde el interés en el espectador. El audiovisual puede tener buenas
imágenes, un sonido espectacular, estar bien estructurado, pero carecer de
convicción. No se trata, por tanto, simplemente de transmitir información o mostrar
imágenes, debemos construir una narración. Un buen guionista debe ser un buen
narrador. (Una novela es excelente no sólo porque cuenta una historia interesante,
sino porque lo narra de forma que nos cautiva). 33

2.3.3. COHERENCIA ARGUMENTAL.

Se construye a partir de un esquema de sucesos lógico, que detalla cómo se

desarrolla la acción de cada personaje y sus reacciones. En caso contrario, la
narración resulta poco creíble o inverosímil y provoca la hilaridad o la confusión en

32
- Ibíd. p.105. y p.106.
33
- Ibíd.

40
el receptor. El verismo y la credibilidad no deben confundirse con realismo. De lo
que se trata es que el receptor acepte el punto de partida, entrando, así, en el
juego. 34

2.3.4. COMPOSICIÓN DE IMÁGENES Y DISEÑO DE ESTRUCTURAS

INTERACTIVAS.

2.3.4.1. Escenas interactivas.

La unidad básica de trabajo en las aplicaciones o sistemas multimedia es lo que

se conoce como escena interactiva, pantalla interactiva o pagina interactiva; es
una pantalla a la vista del usuario que consta de un conjunto de objetos
multimedia. Una escena interactiva se encuentra constituida por los siguientes
componentes (Figura 4): Lote de tareas de entrada; aquí se producen todas
aquellas acciones del ordenador que se activan antes de que el usuario interactúe
con la aplicación, por ejemplo: la ilustración de un fondo de pantalla, la música
inicial que se interrumpe cuando el usuario hace clic por primera vez, un texto de
“bienvenidos” desplazándose por la pantalla. Todas estas acciones se producen
antes de que el usuario realice ninguna acción y pueden ser más o menos
prolongadas. 35

Figura 4. Zonas de una escena interactiva.

34
- Ibíd. p. 107. – p.109.
35
- BOU BAUZÁ. “Introducción al diseño interactivo de elementos dinámicos” [Documento]. Madrid
(España): S.E. [citado 20-Mayo-2006]. Disponible en Internet:
http://tecno.unsl.edu.ar/Introducción%20al%20diseño%20interactivo%20de%20elementos%20dinámicos.doc

41
El lote de tareas de salida, es un caso muy parecido al anterior, la diferencia es
que las acciones se realizan al abandonar la escena. El lote de tareas de fondo;
son todas aquellas acciones que se ejecutan en el ordenador mientras el usuario
no interviene. Este es uno de los más importantes, ya que es donde radica la
conceptualización de “elementos vivos” en las aplicaciones multimedia, es decir,
en ellas siempre debe suceder algo aunque el usuario no este interactuando.
Finalmente se encuentra especificaciones interactivas; las cuales se definen como
la colocación de unas zonas sensibles a la interacción sobre un fondo. 36

La importancia de esta forma de organizar las escenas (tres lotes de tareas y una
zona interactiva) radica en que es muy útil tanto para la concepción (guión) de los
audiovisuales, como para la producción. Es decir, la utilización de este esquema
ayuda a sentar las bases para un lenguaje común y analítico a la hora de producir
una aplicación entre varias personas. 37

2.3.4.2. Zonas sensibles.

Figura 5. Definición de zona sensible.

La región de una imagen cualquiera, que tiene algún tipo de sensibilidad a los
movimientos del ratón, es lo que conoce como zona sensible. Una zona sensible
es una porción de imagen que produce alguna acción a través de la interacción
con el usuario 38 . Algunas reglas fundamentales para su diseño son:

36
- Ibíd.
37
- Ibíd. p.2.
38
- BOU BAUZÁ. “El guión multimedia”. Ed. 2. Op. Cit. p.213.

42
 a. Normalmente no hace falta que se pierdan esfuerzos de producción
haciendo que las zonas sensibles se adapten exactamente a las figuras
de fondo. Por ejemplo, si en un lugar de la pantalla está dibujada la
figura de un coche, tranquilamente se puede definir una zona cuadrada
que englobe parte o la totalidad del vehículo y que, al pasar sobre ella,
aparezca el texto "coche". Es en la mente del usuario donde se forma la
asociación etiqueta-imagen, y esta asociación se produce fácilmente,
sólo por el hecho de que la imagen esté relativamente próxima a la
etiqueta. 39

b. En general, las zonas sensibles se diseñan en sentido vertical, ya que el

usuario suele recorrer la pantalla horizontalmente. De este modo nos
aseguramos que tropezará con la zona sensible (ver figura 2.4.) al
mover el ratón sobre la pantalla. En definitiva, lo que hace una zona
detectable depende normalmente más de su altura que de su anchura. 40

c. Las zonas sensibles de comportamiento regular contribuyen a la

uniformidad de la aplicación y a que el usuario se familiarice con ella. Se
reservan preferentemente para aplicaciones destinadas a usuarios
noveles. 41

d. Las zonas sensibles de comportamiento condicionado o de respuesta y

desconexión aumentan la interactividad de la aplicación, la sorpresa y la
frescura del discurso narrativo. Se reservan, sin embargo, para usuarios
acostumbrados a utilizar las aplicaciones multimedia. 42

Los lenguajes de diseño de aplicaciones multimedia permiten que elementos

estándar también sean sensibles (botones, iconos, imágenes animadas, etc.). A
efectos de guión nos solemos referir a ellos como zonas sensibles sin distinción;

39
- BOU BAUZÁ. “Introducción al diseño interactivo de elementos dinámicos”. Op. Cit. p.2.
40
- Ibíd.
41
- Ibíd.
42
- Ibíd.

43
en la fase de diseño gráfico, sin embargo, el diseñador entra en detalle sobre la
composición de la página y sobre cada tipo de elemento.

2.3.4.3. Técnicas para la unión de texto e imagen.

Existen algunas técnicas básicas, para que un texto e imagen puedan unirse para
formar un mensaje. Éstas son consideradas en el desarrollo de las aplicaciones
multimedia y aun más, en el diseño de páginas Web.

Se habla de tres funciones básicas del texto respecto a la imagen:

2.3.4.3.1. Complementariedad.

Esta técnica se basa en la unión de texto e imagen para formar un mensaje,

construyendo una unidad perceptiva. 43 Por ejemplo, las fotografías que
acompañan a un titular de un periódico. La imagen juega un papel importante de
un “flash” momentáneo que ilustra la noticia.

2.3.4.3.2. Relevo.

Esta técnica consiste en centrar el peso comunicativo en una imagen, después en

un texto, y así sucesivamente; es decir, cuando el mensaje se transmite mediante
el relevo de los estímulos visuales y textuales. 44 Un ejemplo de este caso, pueden
ser los gráficos que contiene un libro que ayudan a una mejor lectura y
comprensión del mismo.

2.3.4.3.3. Anclaje.

La técnica de anclaje nace de la idea de que la imagen es por naturaleza,

polisémica. El texto que acompaña a la imagen, promueve que adoptemos un
significado concreto dentro de los posibles, por lo que se dice que anclara la
imagen. 45 Un ejemplo de este caso, son los anuncios de revista de pagina entera.
En ésta nos fijamos en primar lugar en una imagen que nos llama la atención, que
puede ser provocativa y puede significar muchas cosas. Entonces leemos el texto
y entendemos el significado del anuncio.

43
- BOU BAUZÁ. “El guión multimedia”. Ed. 2. Op. Cit. p.225.
44
- Ibíd. p.226.
45
- Ibíd.

44
2.4. PRINCIPIOS DE DISEÑO INTERACTIVO.

Los siguientes son algunos de los principios fundamentales para el diseño de

aplicaciones multimedia:

2.4.1. PRINCIPIOS DE INTERACCIÓN Y ERGONOMÍA.

2.4.1.1. Principio de interactividad y de libertad.

La aplicación multimedia debe ser entendida como la manera de reforzar una

información. Por lo tanto ésta debe proveer las posibilidades de participación
activa por parte del usuario. La interactividad como se mencionó anteriormente, se
basa en la relación que debe tener el usuario y la maquina; es un esfuerzo de
diseño para planificar una navegación entre pantallas en la que el usuario sienta
que realmente controla y maneja la aplicación. Su debilidad radica en el momento
de organización de los contenidos, debido a la gran cantidad de hipervínculos que
se pueden presentar en una aplicación. 46

El principio de libertad, nos hace pensar que la información debe ser descubierta
poco a poco por el usuario. Se debe dar la libertad al usuario de explorar el
contenido de la aplicación de forma intuitiva.

2.4.1.2. Principio de redundancia de refuerzo.

También conocido como principio de economía; se basa en la premisa de que el

cerebro humano es un ente activo, receptivo, ágil y extremadamente rápido en el
procesamiento de la información; por ello, ésta debe suministrarse de forma
precisa para que active todo el mecanismo cerebral de reconstrucción e
interpretación humana. Otra forma de aplicar este principio, es suministrar una
gran cantidad de información simultánea a un ritmo acelerado, de manera que la
densidad sea elevada. La idea fundamental es mantener el cerebro del usuario
receptor ocupado, pues así, estará entretenido; evitando el aburrimiento y el
abandono de la aplicación. 47

2.4.1.3. Principio de vitalidad.

46
- Ibíd. p.286 – p.288.
47
- Ibíd. p.289.

45
La vitalidad de una pantalla o escena interactiva, radica esencialmente en lo que
se ha mencionado como Lote de tareas de fondo (Figura 4). Como se dijo
anteriormente, en la pantalla debe darse algún tipo de movimiento, aunque el
usuario no actúe con ella; de esta forma, se da la apariencia de aplicación viva,
mejorando la calidad del producto. 48

En la actualidad, se cuentan con dos recursos de animación para vitalizar

pantallas:

• Animaciones cíclicas: Son animaciones que se diseñan generalmente a

partir de una secuencia de imágenes transicionando entre una y otra, en
intervalos de tiempo. Pueden ser diseñados por el mismo guionista. 49

• Animaciones no cíclicas: Son elementos gráficos basados en la definición

de criterios de conducta, sujeta a unas reglas; utilizando la programación
orientada a objetos y técnicas de inteligencia artificial. No son fines de este
documento profundizar en este tema, pero lo que se quiere aclarar es que,
la novedad radica en que los objetos pueden modificar su conducta. 50

2.4.1.4. Principio de necesidad.

Este principio juega un papel muy importante de criterio, para la elaboración de

una aplicación multimedia; la finalidad debe ser, resolver un problema cuya
solución es percibida inmediatamente y además requiere de una aplicación
multimedia. Es decir, el producto debe tener un objetivo claro y ser multimedia; sin
estas dos condiciones, carece de significatividad y puede llegar a ser ignorada. 51

2.4.2. OTROS PRINCIPIOS DE DISEÑO.

2.4.2.1. Anticipación.

48
- Ibíd. p.291.
49
- Ibíd. p.292.
50
- Ibíd. p.293.
51
- BOU BAUZÁ. “Reglas fundamentales del diseño de guiones” [Documento]. Barcelona (España):
Universidad Autónoma de Barcelona. 1997. [citado 20-Septiembre-2006] disponible en Internet:
http://tecno.unsl.edu.ar/multimedia/Reglas%20fundamentales%20del%20diseño%20de%20guiones.doc. p.2.

46
Todas las aplicaciones multimedia deben anticiparse a las necesidades y deseos
del usuario. El sistema debe facilitar al usuario todas las herramientas necesarias
para realizar su trabajo. 52

2.4.2.2. Daltonismo.

El daltonismo es un defecto de la vista que consiste en no percibir determinados

colores o en confundir algunos de los que se perciben. 53 Si se utiliza el color para
transmitir algún tipo de información se deben utilizar otros elementos
complementarios para las personas que sufren de esta enfermedad. Como por
ejemplo: utilizar distintos tonos de grises, gráficos complementarios o etiquetas de
texto.

2.4.2.3. Consistencia.

La consistencia, en todo sistema informático, trata de mantener los principios de

duración, estabilidad y solidez de la aplicación. En la siguiente lista se muestra los
elementos de la interfaz ordenados por su necesidad de consistencia:

1. Interpretación del comportamiento del usuario; por ejemplo: los atajos de

teclado deben funcionar siempre igual.
2. Estructuras invisibles; por ejemplo: el botón izquierdo de Word tiene
diferentes propiedades y comportamientos, una vez es descubierto.
3. Estructuras visibles pequeñas. Ejemplo: iconos, flechas de desplazamiento,
etc.
4. El aspecto general de una aplicación o servicio (presentación, elementos de
diseño).
5. Consistencia interna.
6. Consistencia con la plataforma. 54

Hay que evitar la uniformidad. Los elementos que se comportan distintos hay que
hacerlos que parezcan distintos.

52
- TOGNAZZINI, Bruce. “First Principles of Interaction Design” [Online]. S.C.: Nielsen Norman Group.
[citado 24-Abril-2006]. Disponible en Internet: http://www.asktog.com/basics/firstPrinciples.html.
53
- "Daltonismo." Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.
54
- Ibíd.

47
En definitiva, La consistencia más importante es aquella que espera el usuario. La
única manera de comprobar las expectativas del usuario es hacer pruebas con
ellos.

2.4.2.4. Reducción de latencia.

Cuando sea posible hay que reducir la latencia y dejarla en un segundo plano,
usando la técnica del multihilo. 55

Algunas técnicas para reducir la latencia son:

1. Comunicar el clic de los botones mediante un feedback visual en los

primeros 50 milisegundos.
2. Mostrar un reloj animado para cualquier acción que dure entre 0.5 y 2
segundos, para que el usuario sepa que el sistema sigue trabajando.
3. Mostrar un mensaje comunicando la duración estimada para cualquier
proceso que pueda durar más de 2 segundos.
4. Comunicar el tamaño y el progreso con una barra de estado.
5. Mostrar mensajes de textos agradables y procura mantener entretenido al
usuario mientras espera a que el ordenador termine.
6. Indicar con sonidos y controles visuales cuando el usuario puede volver al
trabajo con el sistema.
7. Identificar los múltiples clips en un mismo objeto.
8. Eliminar de la aplicación cualquier cosa que no esté ayudando.

2.5. EQUIPO PRODUCTOR DE APLICACIONES INTERACTIVAS.

2.5.1. EQUIPO DE GUIÓN.

Redacta el guión según los convenios establecidos, de forma que sea inteligible
para los demás equipos. Establece cómo será la escena. Este equipo entrega a
los demás el guión perfectamente detallado, adjuntándole documentos con
comentarios sobre las características de personajes, paisajes, etc. Este equipo
concibe la aplicación y la hace inteligible, por lo tanto susceptible de ser
producida. 56

55
- Ibíd.
56
- BOU BAUZÁ. “Reglas fundamentales del diseño de guiones”. Op. Cit.

48
2.5.2. EQUIPO DE DOCUMENTACIÓN.

Es el encargado de conseguir las fotos, las imágenes, los sonidos, y cualquier

elemento externo que se vaya a incluir en la aplicación. También el encargado de
vigilar los derechos intelectuales de la documentación utilizada, de forma tal que
su uso no atente contra los derechos intelectuales de cualquier persona o
entidad. 57

2.5.3. EQUIPO DE FORMATO DE DATOS.

Es el puente entre la documentación y el montaje de la aplicación. De acuerdo con

el equipo del montaje, se encarga de establecer los formatos y especificaciones
que se utilizarán en la aplicación. Realiza una labor de homogeneización de datos
según los patrones establecidos en la producción. 58

2.5.4. EQUIPO DE MONTAJE DE LA APLICACIÓN.

Es el que conjuga los elementos y monta la aplicación definitiva. Es su trabajo

hacer que “todo se mueva y esté enlazado”, pero no lo es el buscar ninguno de
estos elementos que se van a incluir en la aplicación. 59

2.6. GUIÓN PARA LA CONSTRUCCIÓN DE APLICACIONES

INTERACTIVAS.

Una aplicación multimedia, además de ser un producto tecnológico de alta

ingeniería, es una obra de comunicación en la que se integran elementos
estéticos, funcionales y estructurales; capaces de actuar sobre las emociones
humanas de forma intensa, potenciadas por las posibilidades interactivas y de
multiplicidad de canales de comunicación que posee.

Antes de empezar a desarrollar un guión para la producción de una aplicación

multimedia, es indispensable que se haya comprendido las técnicas y principios
anteriormente vistas; y deben tenerse en cuenta, al momento de la elaboración del

57
- Ibíd.
58
- Ibíd.
59
- Ibíd.

49
guión. De ahora en adelante se hará referencia a la terminología de Guión
Multimedia ó Guión Interactivo como guión para la construcción de aplicaciones
interactivas.

2.6.1. CONCEPTO DE GUIÓN MULTIMEDIA.

El Guión Multimedia conocido también como Guión Interactivo, es la

especificación detallada y total de una aplicación multimedia. 60 Puede ser
entendido como un documento, formato, modelo o plantilla característica y
especifica, útil para el desarrollo de un producto multimedia; en él se estructuran,
relacionan y armonizan los diferentes elementos (sonido, imagen, texto,
animaciones, etc.) que intervienen en el desarrollo de una aplicación. 61

Bajo esta definición ha de considerarse que el guión interactivo abarca desde los
aspectos estructurales y funcionales, hasta los formales y estéticos, con un nivel
de detalle que en principio permite desarrollar la ejecución de un proyecto de
producción sin ambigüedades. 62

La función primordial del guión interactivo, es objetivizar el proyecto de la obra

multimedia de tal forma que pueda independizarse el proceso de ejecución del
proceso, del de concepción y diseño; además, es imprescindible, para lograr una
comunicación clara entre quienes trabajan en la producción de la obra (equipos de
producción).

2.6.2. FASES PARA LA ELABORACIÓN DE GUIONES MULTIMEDIA.

Para la elaboración del guión interactivo o multimedia, debe seguirse los

siguientes pasos o fases 63 :

1. Definición del objetivo de la obra multimedia.

2. Elaboración del Pre-Guión.
3. Desarrollo de un esquema de escenas.

60
- BARRERA YANES, Rafael. “Del objetivo al guión interactivo de las obras multimedios” [Documento
PDF]. S.C. (Cuba): CEDISAC, Ministerio de Ciencia, Tecnología y Medio Ambiente. p.2.
61
- AMORÓS POVEDA. Op. Cit.
62
- BARRERA YANES. Op. Cit. p.3.
63
- Ibíd. p.3- p.4.

50
 4. Construcción de un grafo de navegación.
5. Diseño del guión interactivo.

2.6.2.1. Definición de los objetivos.

Establecer los objetivos de lo que va a ser una aplicación multimedia, implica la

comprensión de muchos aspectos que en su formulación pueden estar explícitos o
no. Tales aspectos 64 , tienen que ver con:

• Sujeto: Destinatario a quien va dirigido.

• Objeto: Mensaje a comunicar al destinatario.
• Proceso: Comunicación del mensaje al destinatario.
• Medio: Soporte físico por el cual se realiza la comunicación.
• Tipo de Obra: La clasificación del producto final que se le va a mostrar al
destinatario: Educativos, Enciclopédicos, Informativos, Promociónales,
Libros vivos (living books) y Juegos.

Elaborar una aplicación multimedia para conseguir unos fines determinados

requiere antes de toda una detección detallada de las necesidades de los
destinatarios y una selección rigurosa de los materiales que se quieren presentar,
así como, un análisis claro de los recursos y de las herramientas necesarias para
conseguir los objetivos previstos. Algunos ejemplos de preguntas, que nos ayudan
a la identificación de los objetivos de la obra multimedia pueden ser las
siguientes 65 :

• ¿Qué esperamos que haga con nuestra aplicación el destinatario a quien va

dirigida?

• ¿Qué pretendemos conseguir?

• ¿A quién va destinado?

• ¿Qué informaciones y qué habilidades se manejarán?

• ¿En qué contexto se usará?

64
- Ibíd. p.4.
65
- WALTERS, Dennis y ROSENBAUM, Stephanie. “Creación de guiones para aplicaciones interactivas”.
Michigan (Estados Unidos): Tec-Ed. p. 402.

51
 • ¿Cómo usarán y explotarán el material los destinatarios?

• ¿Cuáles serán las estrategias de enseñanza y aprendizaje?

• ¿Qué tipo de esfuerzo cognitivo se requiere?

También, deben establecerse los requerimientos mínimos, que requiere el

software para su correcto funcionamiento; los aspectos técnicos y logísticos, los
aspectos financieros y el tiempo aproximado de su realización. 66

2.6.2.2. Elaboración del Pre-Guión.

Habiendo comprendido el objetivo de la aplicación y, ya precisada la viabilidad de

la misma, se procede a la elaboración del pre-guión. Este proceso consiste en
crear una breve sinopsis o descripción general y esquemática de cómo estará
constituido el producto multimedia.

Antes de iniciar esta fase, lo primero que debe hacerse, es establecer la diferencia
entre informaciones de tipo conceptual (ideas, teorías, conceptos, conocimientos
básicos o avanzados) e informaciones de tipo operativo (secuencias de
actividades que permiten llevar a cabo una tarea). En cuanto al contenido, será
oportuno presentar bloques de texto de tipo conceptual breves o fragmentar un
texto muy largo utilizando todos los recursos disponibles para captar el interés de
los usuarios (imágenes, animaciones, audio, video), pero sin exceder en su uso.
Las actividades interactivas deberán presentarse de manera agradable, sencilla y
clara siguiendo posiblemente siempre el mismo esquema, una presentación
grafica intuitiva y la misma secuencia (comprensión, actividades léxicas,
gramática, etc.) para evitar desbordar o confundir al usuario. 67

El Pre-Guión debe incluir: un índice detallado de temas, unidades didácticas y

unidades de aprendizaje, así como todas las informaciones relativas a los pre-
requisitos y a las habilidades y destrezas necesarias, los objetivos que nos hemos
fijado, las actividades interactivas que se quieran realizar y con qué herramientas,
las instrucciones operativas, los métodos y formas de la evaluación, el feed-back,
el tipo de interacción, los canales de comunicación, las posibles actividades de
66
- Ibíd.
67
- Ibíd.

52
refuerzo, etc. En cuanto a la amplitud de los contenidos, en esta primera fase es
aconsejable no dejarse llevar por el entusiasmo y no pretender abarcar
demasiado. Será mejor centrarse en unos objetivos que estén a nuestro alcance.
El desbordamiento cognitivo afecta a los diseñadores de multimedia y no solo a
los potenciales usuarios. 68

2.6.2.3. Desarrollo del esquema de escenas (storyboard interactivo).

Una aplicación multimedia, se encuentra integrada por una serie de unidades

elementales conocidas como escenas ó pantallas multimedia. Es en el desarrollo
del esquema de escenas donde se define el éxito del producto final, lo que implica
que debe estar muy bien diseñada. 69 Un esquema de escenas, no es más que el
storyboard de la obra interactiva. El storyboard de una obra interactiva, consiste en
detallar o ilustrar, cada una de las escenas (pantallas) principales, describiendo las
estructuras de navegación o transición entre ellas. 70 Cada escena debe tener
descrito los siguientes elementos:

• Fondo
• Títulos
• Marcos/ventanas
• Objetos animados
• Zonas sensibles
• Botones
• Iconos

Ahora para ilustrar un poco la descripción detallada de un escenario, se

recomienda observar la tabla 1. En este ejemplo se definen el nombre o índice de
la pantalla, los objetos de imagen, de sonido, de texto y de acción. En éste último,
es donde se expresan las transiciones que hay entre una y otra pantalla, a través
del accionamiento de un objeto multimedia. Se recomienda incluir los elementos
anteriormente mencionados para garantizar la robustez y calidad del producto
final.

68
- Ibíd.
69
- BARRERA YANES. Op. Cit. p.5.
70
- BOU BAUZÁ. “El Guión Multimedia”. Op. Cit. p.127-129, p.253-254.

53
Para terminar, se quiere aclarar que; el esquema de escenas se utiliza para
imaginarse la aplicación como un todo y así poder hacer los análisis respectivos
para el desarrollo del mismo, ofrece una visión global de la “historia” interactiva.

Pantalla

Nombre de los ficheros de imagen, acompañado de una breve descripción.

Por ejemplo:
Imagen
foto.jpg (imagen fija) - Niños jugando con una pelota.
video.avi (imagen en movimiento) - Personas en un parque público.

Nombre de los ficheros de sonido, acompañado de una breve descripción.

Sonido Por ejemplo:
aves.wav - ruido de pájaros en el bosque.

Nombre de los ficheros de texto junto con la trascripción de su contenido.

Por ejemplo:
Texto
mirlo.txt - "Es el nombre común de una gran variedad de aves que tienen casi
todo su plumaje de color negro."

Indicar qué resultados realizan las zonas interactivas y a partir de qué acción
del usuario.
Por ejemplo:
Acción Botón01 - clic - ampliar foto.jpg
Botón02 - doble clic - avanza a la pantalla nº 2.
Botón03 - rol (el ratón pasa por encima sin pulsar clic) - información ampliada
sobre mirlo en texto.
Tabla 1. Descripción de una escena o pantalla multimedia.

2.6.2.4. Construcción del grafo de navegación.

El grafo de navegación es la representación grafica, precisa y detallada de los

enlaces entre las escenas o pantallas de la aplicación multimedia. A diferencia del
esquema de escenas, aquí se expresan los enlaces específicos de cada pantalla
(Figura 6).

54
 Figura 6. Un mundo orientado simple. Interacción de escenas.

El grafo está constituido por nodos o vértices (escenas) y por aristas

unidireccionales o bidireccionales. 71 Un ejemplo del grafo de navegación puede ser
la construcción de un mundo orientado simple, el cual consta de cinco escenarios
interactivos, tal y como se muestra en la figura 6. Puede notarse que si salimos de
el escenario 1 por el norte, llegamos al escenario 2 y viceversa; y sucede lo mismo
para el resto de las escenas. 72

Las aplicaciones para la red (pagina Web), son sistemas completamente abiertos,
se puede saber en donde comienzas, pero no en donde puedes terminar, esto
puede dificultar un poco el diseño del grafo de navegación, y puede obtenerse un
resultado incomprensible. En cambio, para aplicaciones multimedia cerrados
(como las aplicaciones de CD por ejemplo), tienen una estructura interactiva
orientada, muchas veces conocida como mundos orientados. Ambas aplicaciones
podrían compartir estructuras similares, pero lo diferencia radica en las
limitaciones de la aplicación y de los medios. 73

Cuando se trabaja sobre una obra multimedia grande, con gran cantidad de
escenas y enlaces, muchas veces se divide el grafo de navegación general, en
grafos parciales para reflejar la navegación general de ciertas partes principales

71
- BARRERA YANES. Op. Cit. p.6.
72
- BOU BAUZÁ. “El Guión Multimedia”. Op. Cit. p.274.
73
- Ibíd.

55
de la obra, o cuando se haga necesario precisar la navegación de un grupo de
escenas.

2.6.2.5. Diseño del guión interactivo.

El guión interactivo, no es más que el diseño de un esquema de escenas riguroso

(especificaciones máximas de detalles). El desarrollo de éste guión, requiere
además de los conocimientos técnicos, tener dotes de comunicador. Lo que
realmente busca la aplicación es contener al máximo la atención del usuario a
quien va dirigido, a través de una comunicación efectiva.

El guión interactivo da la forma definitiva a la aplicación multimedia. Es el último

paso antes de la programación y la producción. Éste, da forma a los sucesos
resumidos en el esquema de escenas y grafo de navegación, sobre los que
proporciona una descripción detallada de todo lo que ocurre en ellos. 74

Contiene todos los textos que aparecen en la pantalla, define las respuestas o
entradas correctas del usuario y describe las actividades del programa (secuencia
de animación, búsqueda en ficheros, claves sonoras y visuales, etc.). El usuario
interaccionará con el programa por medio de los mensajes y demás información
visualizada en la pantalla y los dispositivos de entrada indicados en el guión.

Debe desarrollarse un esquema de escenas, que contenga implícitamente un

grafo de navegación, y donde se definan de forma muy específica y detallada, los
siguientes elementos:

• Fondo
• Objetos estáticos (títulos, imágenes, zonas)
• Objetos dinámicos (mascotas, viñetas, animados)
• Objetos interactivos (iconos, botones, listas)
• Audio (música ambiental, efectos, etc.)
• Interacción: acciones (teclado y ratón) y reacción
• Tiempo de duración de la escena o de las acciones

En el caso de los objetos, deben especificarse las dimensiones, localización, y

características propias como el color, comportamiento, tipografía, entre otros.
Debe especificarse nombres y direcciones físicas de los archivos, los formatos en

74
- WALTERS y ROSENBAUM. Op. Cit. p.417.

56
que se encuentra soportada la información y, todos aquellos objetos y recursos
que hacen parte de la obra; con el fin de facilitar una eficiente ejecución de la
misma.

Respetando las limitaciones impuestas por la programación, hay que escribir el

guión interactivo de modo que el usuario pueda 75 :

• Leer y entender las instrucciones inmediatamente.

• Entender, dónde, cuándo y cómo tiene que responder.

• Introducir respuestas breves.

• Recibir una retroalimentación inmediata en forma de mensaje, efecto

sonoro o alguna otra cosa.

• Seguir la secuencia de sucesos e interacciones sin perderse.

• Pasar rápidamente a un suceso siguiente.

• No tener que hacer alguna cosa (como leer la pantalla) durante demasiado
tiempo seguido.

• Parar (hacer un alto y volver) o interrumpir la interacción en cualquier

momento.

75
- Ibíd.

57
 CAPITULO 3

DISEÑO DE UN PROTOTIPO PARA

ELABORACIÓN DE GUIONES INTERACTIVOS.

58
3.1. SISTEMA PROPUESTO.

A continuación se presenta un diseño elemental de un sistema, que permite la

elaboración de guiones interactivos; y que a partir de estos, pueda facilitar la
construcción de futuros sistemas multimedia, teniendo en cuenta, que un guión
interactivo es un esquema o estructura, el cual facilita el desarrollo y la
comprensión de una aplicación multimedia.

El sistema presentado es el diseño de un prototipo el cual contiene de forma

aplicativa todos y cada uno de los conceptos básicos de guiones interactivos. Está
basado fundamentalmente en la estructuración por esquemas y grafos de
navegación.

Se tratará de explicar su funcionamiento a través de diagramas UML y algunos

ejemplos de clases hechas en lenguaje JAVA; haciendo énfasis únicamente en
aquellos elementos que se creen son los más importantes para futuras
investigaciones acerca del tema que esta monografía trata.

3.2. REQUERIMIENTOS.

En el capitulo anterior se mencionó que para la elaboración del guión se debe

tener en cuenta dos elementos fundamentales: El esquema de escenas y el Grafo
de navegación. La finalidad de este proyecto es llegar al diseño del Grafo de
navegación, a partir, de un conjunto de escenas de forma sistemática.

Se ha considerado que el sistema debe realizar las siguientes operaciones:

3.2.1. REQUERIMIENTOS FUNCIONALES.

• Permitir agregar una o varias pantallas o escenas, de un nuevo proyecto

multimedia.

• Permitir la agregación de elementos multimedia tales como: audio, video,

texto e imagen, así como algunos objetos de interacción como menús
desplegables, botones, combos, etc.; en cada una de las escenas de la
aplicación.

59
 • Permitir la organización de los diferentes objetos dentro de una pantalla, es
decir, el cambio de la posición en pantalla de uno a más objetos multimedia
agregados.

• Permitir establecer enlaces entre nodos, por medio de acciones

determinadas por objetos multimedia; estos enlaces son los que construyen
el grafo de navegación.

• Que a partir de un nodo (escena), se pueda llegar a un nodo siguiente, por

medio de algún tipo de acción (hacer clic en un botón, al pasar cierto tiempo
establecido en una pantalla, al terminar un video, etc.).

• Ver la estructura de una pantalla.

• Ver el Grafo general de las pantallas y enlaces creadas.

3.2.2. REQUERIMIENTOS NO FUNCIONALES.

• El componente debe ser de fácil implementación.

• El sistema debe soportar diferentes formatos respecto a video, imágenes y

sonido.

3.3. MODELO DEL SISTEMA.

3.3.1. RESUMEN.

Para comprender la estructura y la funcionalidad del presente sistema, es

necesario entender la lógica del mismo. Primero, el sistema consiste en un Grafo
de navegación, en donde los nodos o vértices son las pantallas; y los enlaces o
transiciones entre ellas son las aristas. Cada uno de los nodos es una Pantalla

60
Multimedia a la cual, se le pueden agregar uno o más Objetos Multimedia como
Imágenes, Botones, Textos, Audio y Video.

3.3.2. CASOS DE USO.

Se considera que los siguientes son los casos de uso del sistema propuesto
conforme a las conclusiones, resultados y conceptos de la presente investigación.

3.3.2.1. Caso de Uso: Crear Pantalla.

Caso de uso No. 1

Nombre del Caso de uso Crear Pantalla
Descripción Genera una instancia de PantallaMultimedia.
Actor Principal Guionista Multimedia.
Precondición El actor ha escogido la opción de agregar pantalla.
Flujo de Eventos 1. El sistema pide al actor una breve descripción, y
especifica las características de la pantalla.
2. El actor suministra los datos.
3. El actor presiona el botón aceptar.
4. El sistema verifica los datos ingresados.
5. El sistema automáticamente genera un id a la pantalla
y lo presenta al actor.
6. El actor presiona el botón aceptar.
7. El sistema muestra un mensaje informando que la
pantalla se ha creado exitosamente.
Condición de Salida El actor puede presionar el botón finalizar en cualquier
momento.
Flujo Alternativo 4.1. Si la información es incompleta, el sistema informa el
error y regresa al paso 2.
Post condición. Se crea una nueva instancia de PantallaMultimedia.
El sistema agrega la pantalla creada como un vértice del
grafo general.
Tabla 2. Caso de uso Crear Pantalla.

61
3.3.2.2. Caso de Uso: Agregar Objetos.

Caso de uso No. 2

Nombre del Caso de uso Agregar objetos Multimedia a la Pantalla
Genera una instancia de Objeto Multimedia y lo agrega a
Descripción
PantallaMultimedia.
Actor Principal Guionista Multimedia.
El actor ha escogido la opción de agregar un objeto en la
Precondición
pantalla.
1. El sistema muestra un listado de los diferentes objetos
multimedia que soporta.
2. El actor escoge un objeto del listado.
3. El sistema verifica si el objeto seleccionado necesita de
una dirección física para reproducirse.
4. El sistema pide la dirección física del archivo
Flujo de Eventos multimedia.
5. El guionista entra la dirección física del objeto.
6. El actor presiona el botón aceptar.
7. El sistema verifica la dirección física ingresada por el
actor y compatibilidad de formato del objeto.
8. El sistema muestra un mensaje informando que el
objeto se ha agregado en pantalla.
El actor puede presionar el botón finalizar en cualquier
Condición de Salida
momento.
3.1. Si el objeto ingresado no requiere dirección física, el
sistema va directamente al paso 8.
7.1. Si la dirección física está errada, el sistema va al paso
Flujo Alternativo
4.
7.2. Si el formato del objeto ingresado es incompatible, el
sistema va al paso 4.
El sistema crea una instancia de ObjetoMultimedia.
Post condición.
El sistema agrega el objeto creado en una pantalla.
Tabla 3. Caso de uso Agregar Objetos Multimedia a la Pantalla.

62
3.3.2.3. Caso de Uso: Establecer Enlaces.

Caso de uso No. 3

Nombre del Caso de uso Establecer enlaces entre pantallas

Descripción Crea una arista entre dos PantallasMultimedia.
Actor Principal Guionista Multimedia.
Precondición El actor escogió la opción establecer enlaces.
1. El sistema muestra cada una de las pantallas creadas
con anterioridad.
2. El actor escoge una primera pantalla.
3. El sistema presenta nuevamente el listado con las
Flujo de Eventos pantallas.
4. El actor escoge una segunda pantalla y presiona el
botón aceptar.
5. El sistema muestra un mensaje informando que se ha
establecido el enlace.
El actor puede presionar el botón finalizar en cualquier
Condición de Salida
momento.
El sistema guarda en el objeto seleccionado una referencia
de la segunda pantalla.
Post condición.
El sistema crea una instancia de Arista y lo agrega al
Grafo.
Tabla 4. Caso de Uso Establecer Enlaces entre Pantallas.

3.3.2.4. Caso de Uso: Ver grafo de escenas.

Caso de uso No. 4

Nombre del Caso de uso Ver Grafo de escenas.

Permite ver de forma grafica las pantallas creadas al igual
Descripción
que los enlaces.
Actor Principal Guionista Multimedia.
Precondición El actor escogió la opción de ver Grafo de Escenas.
1. El sistema dibuja una imagen representativa de las
Flujo de Eventos
pantallas y los enlaces entre ellas.
Condición de Salida. El actor puede finalizar el proceso en cualquier momento.
Post condición. El sistema muestra una vista previa del Grafo.
Tabla 5. Caso de Uso Ver Grafo de Escenas.

63
3.3.2.5. Caso de Uso: Vista previa de pantalla.

Caso de Uso No. 5

Nombre del Caso de uso Vista previa de Pantalla.

Permite visualizar las características de una pantalla
Descripción
específica.
Actor Principal Guionista Multimedia.
Precondición El actor escogió la opción de Vista Previa de Pantalla.
1. El sistema pide al actor el ID de la pantalla a mostrar.
2. El actor ingresa el ID de pantalla.
3. El sistema verifica si la pantalla con el ID indicado por
Flujo de Eventos
el actor existe.
4. El sistema muestra un formulario con las
características detalladas de la pantalla.
Condición de Salida El actor puede finalizar el proceso en cualquier momento.
3.1. Si el ID ingresado es erróneo, el sistema va
Flujo Alternativo
directamente al paso 2.
Post condición. El sistema muestra una vista previa de la pantalla.
Tabla 6. Caso de Uso Vista previa de Pantalla.

64
3.3.3. DIAGRAMAS DE SECUENCIA.

3.3.3.1. Crear una nueva pantalla.

Figura 7. Diagrama de secuencia crear nueva Pantalla.

65
3.3.3.2. Agregar Objeto Multimedia.

Figura 8. Diagrama de secuencia agregar nuevo objeto.

66
3.3.3.3. Establecer Enlaces.

Figura 9. Diagrama de secuencia Establecer enlaces.

67
3.3.3.4. Ver Grafo de escenas.

Figura 10. Diagrama de secuencia Ver Grafo de Escenas.

68
3.3.3.5. Vista Previa de Pantalla.

Figura 11. Diagrama de secuencia Vista previa de pantalla.

69
3.3.4. DIAGRAMA DE CLASES.

Se considera, que en el sistema propuesto a continuación, intervienen las

siguientes entidades:

Figura 12. Diagrama de Clases.

70
3.3.4.1. La clase Grafo.

Esta clase permite crear una estructura de Grafo a partir de un conjunto de clases
Vértice y Arista.

public class Grafo

Atributos
prívate Vector <Vertice> Vertices
Es un vector en donde se almacenan objetos de tipo
Vértice.
prívate Vector <Arista> Aristas
Es un vector en donde se almacenan objetos de tipo
Arista.

Constructor
Grafo()
Crea un nuevo Grafo vacío.

Métodos
void agregarVertice(Vertice v)
Permite agregar un vértice al Vector de vértices.
void agregarArista(Arista a)
Permite agregar una Arista al Vector de aristas.
int NumeroVertices()
Devuelve el numero de vértices que tiene el grafo.
int NumeroAristas()
Devuelve el numero de aristas que tiene el grafo.
Vertice PrimerVertice()
Devuelve el primer vértice del Grafo.
Vertice UltimoVertice()
Devuelve el ultimo vértice del Grafo.

71
3.3.4.2. La clase Vértice.

Clase abstracta que permite ser utilizada para la construcción del Grafo.

public class Vertice

Atributos
prívate Object Objeto
Permite asignar cualquier tipo de objeto como
vértice.
prívate String Etiqueta
Es un texto que sirve para etiquetar el vértice.

Constructor
Vertice()
Crea un nuevo vértice vacío.
Vertice(Object obj)
Crea un nuevo vértice a partir de un objeto Object.
Vertice(String etiqueta)
Crea un nuevo vértice vacio y etiquetado.
Vertice(Object obj, String etiqueta)
Crea un nuevo vértice a partir de un objeto Object etiquetado.

Métodos
void setObjeto(Object obj)
Permite cambiar el objeto de este vértice.
Object getObjeto()
Devuelve el objeto de este vértice.
Void setEtiqueta(String etiqueta)
Permite cambiar el nombre de la etiqueta de este vértice.
String getEtiqueta()
Devuelve el nombre de la etiqueta de este vértice.

72
3.3.4.3. La clase Arista.

Esta clase permite establecer un enlace entre dos objetos de tipo Vertice.

public class Arista

Atributos
prívate Vertice Left
Primer vertice del enlace.
prívate Vertice Right
Segundo vértice del enlace.

Constructor
Arista(Vértice left, Vértice right)
Crea una nueva arista entre los vértices left y right.

Métodos
void setArista(Vértice left, Vértice right)
Permite cambiar los vértices de la arista.
Object getObjeto()
Devuelve el objeto de este vértice.
Void setArista(String etiqueta)
Permite cambiar el nombre de la etiqueta de este vértice.
Vertice getVerticeLeft()
Devuelve el primer vértice del enlace.
Vertice getVerticeRight()
Devuelve el segundo vértice del enlace.

73
3.3.4.4. La clase PantallaMultimedia.

La clase pantalla multimedia podemos entenderla como un vértice del grafo.

Extiende de la clase JFrame, por lo tanto tiene las características de su clase
padre.

public class PantallaMultimedia

extends JFrame

Atributos
prívate int IdPantalla
Contiene el id de la Pantalla.
prívate Vector <ObjetoMultimedia> ObjetosDePantalla
Contiene los objetos multimedia que se han
agregado en la Pantalla.

Constructor
PantallaMultimedia(int IdPantalla)
Crea una nueva asignando una Id de Pantalla.

Métodos
void agregarObjeto(ObjetoMultimedia obj)
Permite agregar objetos multimedia a la pantalla.
ObjectMultimedia PrimerObjeto()
Devuelve el primer objeto multimedia de la pantalla.
ObjectMultimedia siguienteObjeto()
Devuelve el siguiente objeto multimedia de la pantalla.
ObjectMultimedia ultimoObjeto()
Devuelve el ultimo objeto multimedia de la pantalla.
int VerID()
Devuelve el id de esta Pantalla.

74
3.3.4.5. La clase ObjetoMultimedia.

Clase abstracta usada para agregar objetos con distintas funcionalidades pero con
características semejantes en una pantalla multimedia.

public abstract class ObjetoMultimedia

Atributos
prívate String Descripcion
Contiene una breve descripción de lo que hace el
objeto.
prívate int IdSiguientePantalla
Contiene el id de la pantalla que se activa después
de la ejecución del objeto multimedia.

Constructor
ObjetoMultimedia(String descripcion)
Crea un nuevo objeto multimedia a partir de su descripción.

Métodos
abstract void execute()
Permite ejecutar la acción de un objeto multimedia.
abstract JPanel getPanel()
Devuelve el panel que contiene a este objeto.
void setDescripcion(String descripcion)
Permite cambiar la descripción de este objeto.
String getDescripcion()
Devuelve la descripción de este objeto.
void estableceIdSiguientePantalla(int id)
Permite guardar el id de la siguiente pantalla a la que se llega al
activar este objeto multimedia.
int IdSiguientePantalla()
Devuelve el id de la siguiente pantalla a la que se llega al
activar este objeto multimedia.

75
3.3.4.6. La clase Imagen.

Clase que hereda de ObjetoMultimedia para el manejo de imágenes en diferentes

formatos.

public class Imagen

extends ObjetoMultimedia

Atributos
prívate String file
Guarda la dirección del archivo de imagen.
prívate PanelImagen imagen
Contiene el Panel con la imagen especificada en el
file.

Constructor
Imagen(String descripción, String file)
Crea una nueva imagen a partir de una descripción y dirección de archivo.

Métodos
void execute()
Permite mostrar la imagen en un panel.
JPanel getPanel()
Devuelve el panel que contiene a este objeto.
void setFile(String file)
Permite cambiar la dirección del archivo de imagen.
String getFile()
Retorna la dirección del archivo de imagen.
void setSize(int width, int height)
Permite cambiar el tamaño del panel de la imagen.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel de la imagen.

76
3.3.4.7. La clase PanelImagen.

Clase privada utilizada por la clase Imagen. Utiliza un Panel que contiene la
imagen.

private class PanelImagen

extends JPanel

Atributos
prívate ImageIcon IconImagen
Utilizada para dibujar la imagen en el panel.

Constructor
PanelImagen(String file)
Crea un nuevo panel para la imagen dibujada por el IconImagen.

Métodos
void paintComponent(Graphics g)
Permite dibujar en el panel la imagen almacenada en el
IconImagen.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel de la imagen.
void setSize(int width, int height)
Permite cambiar el tamaño del panel de la imagen.

77
3.3.4.8. La clase AudioVideo.

Clase heredera de ObjetoMultimedia para el manejo de audio y video en diferentes

formatos.

public class AudioVideo

extends ObjetoMultimedia

Atributos
prívate String file
Guarda la dirección del archivo de imagen.
prívate PanelAudioVideo panelReproduccion
Contiene el Panel con el objeto de tipo audio o
video.

Constructor
AudioVideo(String descripción, String file)
Crea un nuevo AudioVideo a partir de una descripción y dirección de archivo.

Métodos
void execute()
Permite darle ejecución a este objeto.
JPanel getPanel()
Devuelve el panel que contiene a este objeto.
void setFile(String file)
Permite cambiar la dirección del archivo de audio o video.
String getFile()
Retorna la dirección del archivo de audio o video.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel del audio y/o
video.
void setSize(int width, int height)
Permite cambiar el tamaño del panel del audio y/o video.

78
3.3.4.9. La clase PanelAudioVideo.

Clase privada utilizada por la clase AudioVideo. Utiliza un Panel que contiene un
reproductor de audio y/o video. Soporta diferentes formatos de audio y video.
Utiliza de la librería JMF la clase Player para la reproducción de los objetos de
audio y video, y utiliza dos objetos de tipo Component uno para obtener del player
la parte visual y el otro para obtener el control del video.

private class PanelAudioVideo

extends JPanel

Atributos
prívate URL file
Contiene la dirección del archivo a reproducir.
prívate Player player
Contiene el audio o video a reproducir.
prívate Component visualComponent
Contiene la parte visual de un video a reproducir.
prívate Component controlComponent
Contiene el componente de control para el audio o
video a reproducir.

Constructor
PanelAudioVideo(String file)
Crea un nuevo panel para el audio o video.

Métodos
void start()
Inicializa la reproducción del archivo de audio o video.
void stop()
Detiene la reproducción del archivo de audio o video.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel del audio y/o
video.
void setSize(int width, int height)
Permite cambiar el tamaño del panel del audio y/o video.

79
3.3.4.10. La clase Boton.

Es un tipo de boton que heredera de ObjetoMultimedia, para poder ser utilizada

como un objeto de la pantalla multimedia.

public class Boton

extends ObjetoMultimedia

Atributos
prívate JPanel panelBoton
Contiene el Panel con el botón.
prívate JButton boton
Contiene el Panel con el botón.

Constructor
Boton(String descripción, String etiquetaBoton)
Crea un nuevo Boton a partir de una descripción y nombre del mismo.

Métodos
void execute()
Permite darle ejecución a este objeto.
JPanel getPanel()
Devuelve el panel que contiene a este objeto.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel del botón.
void setSize(int width, int height)
Permite cambiar el tamaño del panel del botón.

80
3.3.4.11. La clase Texto.

Es una clase que heredera de ObjetoMultimedia, permite crear un tipo de texto

para ser agregado a la PantallaMultimedia.

public class Texto

extends ObjetoMultimedia

Atributos
prívate JPanel panelTexto
Contiene el Panel con el texto.
prívate JTextArea texto
Contiene el texto.

Constructor
Boton(String descripción, String texto)
Crea un nuevo Texto a partir de una descripción y el texto.

Métodos
void execute()
Permite darle ejecución a este objeto.
JPanel getPanel()
Devuelve el panel que contiene a este objeto.
void setBounds(int x, int y, int width, int height)
Permite cambiar el tamaño y posición del panel del texto.
void setSize(int width, int height)
Permite cambiar el tamaño del panel del texto.

81
3.3.5. DIAGRAMA DE PAQUETES.
El siguiente diagrama muestra la agrupación por paquetes de las clases del
sistema propuesto:

Figura 13. Diagrama de Paquetes.

82
 CONCLUSIÓN

Las aplicaciones multimedia, son sistemas complejos para la interpretación debido

al gran contenido de interactividad que posee; por lo tanto, es necesaria la
utilización de una metodología que permita su fácil comprensión y desarrollo.

Según lo visto en el documento, para el desarrollo de aplicaciones se debe seguir

los siguientes pasos:

1. Comprender los objetivos de la aplicación, y establecer y definir los niveles

de interactividad.

2. Desarrollar un primer “boceto” de la obra con los contenidos que están a

nuestro alcance para luego profundizar.

3. Organizar un grupo de desarrollo de la aplicación.

4. Entender los requerimientos y dividir la aplicación en secciones; por

ejemplo: la parte de animaciones es para los diseñadores gráficos.

5. Describir todas y cada una de las escenas que harán parte de la aplicación
incluyendo imagines, animaciones, botones, y transiciones.

6. Construir el grafo de navegación el cual muestra una visión general de lo

que será la aplicación a desarrollar.

7. Por último, realizar un análisis detallado de lo que ya se tiene; realizar una

descripción profunda de cada escena teniendo en cuenta que la aplicación
va dirigida a un público específico y es necesario saber lo que él quiere ver.

83
 RECOMENDACIONES

Primero, es importante para los desarrolladores de software, conocer e

implementar esta metodología de desarrollo en sus aplicaciones multimedia o
interactivas, porque facilitaría la comprensión tanto de la aplicación y su relación
directa con el usuario final, además, conocer algunas técnicas para el desarrollo
de software en un entorno completamente interactivo.

En la fase de diseño del sistema propuesto, solo se incluyeron las clases

consideradas como importantes para la comprensión de los conceptos tratados en
la presente monografía y para pre-visualizar un software que permita escribir
guiones para el desarrollo de futuras aplicaciones multimedia. Por lo tanto, es
necesario para la construcción total de la aplicación, la construcción de otras
clases que construyan el entorno visual de la aplicación e implementen las aquí
mencionadas.

Para una mayor comprensión de los temas aquí tratados, se debe tener
conocimientos previos en temas como teoría de grafos, conceptos básicos de
diseño interactivo, desarrollo en ambientes web, comunicación y transmisión de la
información, programación en java, uso de la librería JMF de java.

84
 BIBLIOGRAFÍA

AMORÓS POVEDA, Lucía. “El guión en la elaboración de hipermedia para la

enseñanza a distancia.” [Documento de texto]. 1 ed. [España]: Becaria F.U.P por
el MECD, S.F <[email protected]>.

ANZULOVICH, Guillermo. “Comunicación Multimedial: Características

comunicativas de los multimedia” [Documento PDF].
<http://tecno.unsl.edu.ar/multimedia/2.pdf>. 2004.

ANZULOVICH. “Comunicación Multimedial: El uso social de los multimedia.”

[Documento PDF]. <http://tecno.unsl.edu.ar/multimedia/1.pdf>. 2004.

ANZULOVICH. “Comunicación Multimedial: Usos didácticos de los multimedia.”

[Documento PDF]. <http://tecno.unsl.edu.ar/multimedia/9.pdf>. 2004.

BARRERA YANES, Rafael. “Del objetivo al guión interactivo de las obras

multimedios” [Documento PDF]. (Cuba): CEDISAC, Ministerio de Ciencia,
Tecnología y Medio Ambiente.

BOU BAUZÁ, Guillem. “El guión multimedia”. Ed. 2. Madrid (España): Anaya
Multimedia, 2003.

BOU BAUZÁ. “Introducción al diseño interactivo de elementos dinámicos”. Madrid

(España). 2002.

BOU BAUZÁ. “Reglas fundamentales del diseño de guiones”. Barcelona (España):

Universidad Autónoma de Barcelona. 1997.

CORRALES DIAZ, Carlos. “La Tecnología Multimedia: Una nueva tecnología de

comunicación e información. Características, concepciones y aplicaciones.” [En
línea]. Texinfo 1 ed. [Guadalajara, México]: ITESO, Enero 1994.
<http://iteso.mx/~carlosc/pagina/documentos/multidef.htm>.

G. BEDOYA, Alejandro. “¿Qué es interactividad?” [En línea]. Grupo Editorial Sin

Papel. México D.F. Septiembre 1.997. <http://www.sinpapel.com/art0001.shtml >.

85
HERNÁNDEZ MORA, Artemio J. “Multimedia.” [En línea]. 1 Ed.
[México]. Sept. 2001. <http://www.monografias.com/trabajos7/mult/mult.shtml>.

MORENO, Luciano. “Gráficos de mapa de bits.” [En línea].

<http://www.htmlweb.net/diseno/graficos_digitales/graficos_2.html>.

"Multimedia" Microsoft® Encarta® 2006 [DVD]. Microsoft Corporation, 2005.

TOGNAZZINI, Bruce. “First Principles of Interaction Design” [Online]. Nielsen

Norman Group. <http://www.asktog.com/basics/firstPrinciples.html>.

WALTERS, Dennis y ROSENBAUM, Stephanie. “Creación de guiones para

aplicaciones interactivas”. Michigan (Estados Unidos): Tec-Ed.

86