IC Editorial ha puesto el máximo empeño en ofrecer una información completa y precisa. Sin embargo, no asume ninguna responsabilidad derivada de su uso, ni tampoco la violación de patentes ni otros derechos de terceras partes que pudieran ocurrir. Mediante esta publicación se pretende proporcionar unos conocimientos precisos y acreditados sobre el tema tratado. Su venta no supone para IC Editorial ninguna forma de asistencia legal, administrativa ni de ningún otro tipo.

Reservados todos los derechos de publicación en cualquier idioma.

Según el Código Penal vigente ninguna parte de este o cualquier otro libro puede ser reproducida, grabada en alguno de los sistemas de almacenamiento existentes o transmitida por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro, sin autorización previa y por escrito de IC EDITORIAL;

su contenido está protegido por la Ley vigente que establece penas de prisión y/o multas a quienes intencionadamente reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica.

ISBN: 978-84-17224-52-3

Nota de la editorial: IC Editorial pertenece a Innovación y Cualificación S. L.

Presentación del manual

El Certificado de Profesionalidad es el instrumento de acreditación, en el ámbito de la Administración laboral, de las cualificaciones profesionales del Catálogo Nacional de Cualificaciones Profesionales adquiridas a través de procesos formativos o del proceso de reconocimiento de la experiencia laboral y de vías no formales de formación.

El elemento mínimo acreditable es la Unidad de Competencia. La suma de las acreditaciones de las unidades de competencia conforma la acreditación de la competencia general.

Una Unidad de Competencia se define como una agrupación de tareas productivas específica que realiza el profesional. Las diferentes unidades de competencia de un certificado de profesionalidad conforman la Competencia General, definiendo el conjunto de conocimientos y capacidades que permiten el ejercicio de una actividad profesional determinada.

Cada Unidad de Competencia lleva asociado un Módulo Formativo, donde se describe la formación necesaria para adquirir esa Unidad de Competencia, pudiendo dividirse en Unidades Formativas.

El presente manual desarrolla la Unidad Formativa UF1586: Integración de la funcionalidad en productos multimedia,

perteneciente al Módulo Formativo MF0937_3: Implementación y publicación de productos editoriales multimedia,

asociado a la unidad de competencia UC0937_3: Generar y publicar productos editoriales multimedia,

del Certificado de Profesionalidad Desarrollo de productos editoriales multimedia.

Índice

Portada

Título

Copyright

Presentación del manual

Capítulo 1 Elementos de funcionalidad y de interactividad en productos editoriales multimedia

1. Introducción

2. Interpretación de los elementos que conforman los diseños previos

3. Aspectos funcionales definidos en los bocetos

4. Elementos de interactividad de las diferentes pantallas

5. Resumen

Ejercicios de repaso y autoevaluación

Capítulo 2 Desarrollo de la interactividad en productos multimedia mediante herramientas de autor

1. Introducción

2. Utilización de diferentes herramientas de autor existentes

3. Resumen

Ejercicios de repaso y autoevaluación

Capítulo 3 Desarrollo de la interactividad en productos multimedia mediante lenguajes de marcado, de presentación y de guiones

1. Introducción

2. Utilización de diferentes herramientas de marcado, de presentación o de guiones existentes

3. Resumen

Ejercicios de repaso y autoevaluación

Capítulo 4 Uso y manejo de herramientas informáticas para generación de productos editoriales multimedia

1. Introducción

2. Estilos de presentación

3. Transformación de documentos

4. Lenguajes de guiones de interacción

5. Lenguajes de interacción gráfica y de servidor

6. Resumen

Ejercicios de repaso y autoevaluación

Capítulo 5 Montaje del producto editorial multimedia

1. Introducción

2. Montaje del Producto

3. Resumen

Ejercicios de repaso y autoevaluación

Bibliografía

Capítulo 1

Elementos de funcionalidad y de interactividad en productos editoriales multimedia

1. Introducción

La elaboración de productos editoriales multimedia se centra en la posibilidad de integrar diversos elementos como imágenes, textos, sonidos, animaciones, vídeos, etc., en un documento que, junto con la técnica del hipertexto, permite agregar interactividad y convertirlo así en aplicación.

Esta última característica y las acciones interactivas sobre los objetos, hacen que el usuario pueda navegar a través del programa, guiado por este, siguiendo un determinado camino o a su libre elección, de acuerdo con sus intereses o necesidades didácticas, lo que convierte a las aplicaciones multimedia en elementos altamente atrayentes.

El desarrollo que han seguido estas tecnologías en los últimos años ha hecho posible crear contenidos multimedia de gran calidad, y ya no solo limitado a la realización de productos “off-line”, sino que las redes telemáticas –sobre todo Internet– con anchos de bandas cada vez mayores, han permitido diseñar productos multimedia mucho más completos y atractivos para el formato on-line comúnmente denominado página web.

El diseño de la interfaz, su funcionalidad e interactividad con el usuario son las bases de un producto editorial multimedia, en las que están integrados los controles de navegación (botones, opciones de menú, zonas activas de pantalla o hipertexto) y los tipos de procesos que establecen las respuestas del programa a las acciones del usuario sobre los elementos de la interfaz.

2. Interpretación de los elementos que conforman los diseños previos

Cualquier proyecto editorial multimedia parte de un trabajo de diseño previo donde se esboza el aspecto gráfico y funcional de la interfaz y de los principales elementos, definiendo a modo de boceto cómo se organizará y presentará la información en la pantalla.

Definición

Interfaz

Es el conjunto de métodos y elementos que permiten al usuario interactuar con el sistema informático de manera “amigable”, normalmente usando los periféricos de entrada (ratón, teclado, etc.) con los gráficos presentados en los periféricos de salida (pantalla).

Para crear un buen producto editorial multimedia, accesible y usable, es conveniente saber interpretar la funcionalidad de los elementos que se muestran en los diseños previos, ya que de un correcto uso de los mismos derivará el éxito de la aplicación:

1 Funcionalidad de los medios principales de presentación de la información: textos, imágenes, iconos, sonidos, animaciones, vídeos, etc.
2 Funcionalidad de los elementos secundarios o auxiliares: controles de formularios, gráficos estadísticos, reproductores de vídeo, etc.
3 Funcionalidad de los elementos de navegación y control: menús, botones, enlaces, etc.

Definición

Accesibilidad

Se entiende por accesibilidad al nivel de uso de una determinada aplicación por parte de las personas independientemente de sus capacidades físicas o conocimientos técnicos. Busca la integración al ofrecer las mismas oportunidades de acceder a los sistemas de información, para todas las personas.

Usabilidad

Se relaciona con el diseño de aplicaciones que permiten realizar una tarea de manera sencilla y eficaz.

En esta etapa puede ser necesaria la revisión de la distribución de la información en el área de la aplicación, el estilo visual, los colores, los tipos de letras e iconografía, las imágenes de fondo, gestión de errores, pantallas de ayuda, etc., atendiendo a la correcta funcionalidad de los elementos principales utilizados.

2.1. Principales elementos en la presentación de la información

Se distinguen los siguientes: texto, imágenes, iconos, imágenes dinámicas, animaciones, videos, sonido y elementos de interactividad.

Texto

El texto es el elemento más “antiguo” en el desarrollo de productos multimedia y tiene como función principal la exposición clara y concisa de una información, que de modo gráfico sería insuficiente o difícil de plasmar. Podemos reforzar el componente visual del texto mediante modificaciones en su formato o diseño, resaltando la información más relevante y añadiendo claridad al mensaje escrito.

Sabía que...

Los primeros documentos escritos que se conservan se atribuyen a los sumerios son de carácter ideográfico y anteriores al 3000 a.C. Se conoce escritura protoalfabética en torno a los años 1000 o 1300 a.C. Habrá que esperar al 800 a.C. para que los griegos separen las vocales de las consonantes y establezcan las bases del alfabeto que se utiliza hoy.

Las propiedades más importantes del texto son la fuente tipográfica, el tamaño de la fuente, el color, los estilos de negrita, cursiva y subrayado, la alineación de los párrafos, las sangrías, tabulaciones, estilos de numeración y viñetas y por último los efectos que puedan añadirse como degradados o sombras. Casi todos los programas de diseño y elaboración de productos multimedia incluyen estas opciones.

Panel de propiedades de texto

Al elaborar un producto editorial multimedia hay que considerar la opción de incluir texto en varios idiomas, lo que ampliará el público a quien va dirigido y ofrecer la opción del cambio de idioma de manera eficaz, sencilla y accesible.

Imágenes

Las imágenes son unos de los objetos más importantes en una aplicación multimedia, puesto que su función es ilustrar y facilitar la comprensión de la información que se desea transmitir, de una manera rápida y universal. Formadas por una matriz de píxeles o puntos de color, sirven también como elemento principal en la integración del diseño y el estilo visual de la aplicación.

Hay distintos tipos:

1 Imágenes de fondo o wallpapers.
2 Fotografías realistas.
3 Ilustraciones, esquemas, guías y gráficos estadísticos.
4 Imágenes que representan iconos, botones o controles de navegación, y a las que se asocian la interactividad de realizar una determinada acción.
5 Imágenes que sirven para representar elementos auxiliares.

Definición

Wallpaper

Con este término se nombran las imágenes de fondo de escritorio o de fondo de aplicación. Su buen uso dan un toque de profesionalidad a la aplicación multimedia, pues al estar en el fondo, sirven de referencia visual para el estilo de los demás componentes. Hoy día hay muchísimas que pueden ser descargadas libremente en internet.

Es el objeto más cercano a la composición gráfica, por lo que su integración en la aplicación admite infinitas posibilidades, tipos, efectos, funciones interactivas, etc., y es tarea, en la etapa de diseño, buscar el estilo y la armonía que mejor se adaptan al programa.

Actividades

1. Escriba el nombre de al menos tres aplicaciones en las que pueda insertar, editar y modificar texto.

2. Identifique en las siguientes páginas web multimedia, las imágenes que representan botones o controles de navegación:

1 <http://www.websmultimedia.com/>
2 <http://www.sadus.us.es/>
3 <http://www.indisys.es>
4 <http://www.aeg.com.es/>
5 <http://sentido-comun.com/>

Iconos

Los iconos son imágenes que representan conceptos de carácter universal y son ampliamente usados en el diseño web y multimedia actual, así como en cualquier interfaz moderno (sistemas operativos, dispositivos móviles, pequeños electrodomésticos, publicidad, etc.). Su diseño visual simple pero a la vez atractivo, les permite representar la esencia de un determinado concepto o idea, sustituyendo al texto, como elemento complementario de este.

No dependen por tanto del idioma de la aplicación, pues han ido siendo asimilados por la sociedad globalizada (por ejemplo el icono de un triángulo verde que apunta hacia la derecha, se asocia generalmente con la acción de reproducir un vídeo o un sonido, prácticamente en cualquier cultura o país).

Normalmente se les asocia una acción interactiva, por ejemplo el icono de una casa, sirve para volver a la pantalla principal de la aplicación cuando se hace clic sobre él.

Imágenes dinámicas, animaciones, vídeos

Las imágenes estáticas son insuficientes a veces para presentar un determinado contenido –por ejemplo es más efectivo ver un vídeo sobre las instrucciones de uso de un objeto cualquiera, que ver lo mismo en un esquema sobre papel–. Las imágenes en movimiento se dividen principalmente en presentación secuencial de imágenes, animaciones 3D y vídeos.

Definición

Animación 3D

Son aquellos trabajos ficticios que en general pretender representar una realidad virtual, realizados por ordenador, usando técnicas de diseño, modelado de objetos y movimiento tridimensional mediante software infográfico y de edición de vídeo.

Estos elementos transmiten de forma visual y auditiva secuencias que pueden ser reales o ficticias -animación 3D, por ejemplo-. La animación 3D permite mostrar contenidos mediante figuraciones “virtuales” que de manera real serían más difíciles o incluso imposibles de conseguir, por lo que muchas veces son más económicas.

Es necesario a veces usar en el programa, reproductores de vídeo que tienen como objetivo integrar el elemento en la aplicación y hacer más sencillo implementar su funcionalidad.

Sonidos

En las aplicaciones multimedia los sonidos suelen aparecer como música o efectos sonoros de fondo, charlas o locuciones y efectos de sonido –por ejemplo cuando se hace clic sobre un botón– reproducidos a través de un periférico de salida como puede ser un altavoz.

Los sonidos mejoran la comprensión de la información completando el significado de las imágenes, música y efectos sonoros para alcanzar un efecto motivador captando la atención del usuario. Son particularmente importantes en algunos tipos de aplicación (multimedia educativa, aprendizaje de idiomas, música, historia, etc.) y como elemento necesario en los programas accesibles (para personas con discapacidad visual por ejemplo).

En ocasiones es conveniente usar en el programa reproductores de sonido que tienen como objetivo integrar el elemento en la aplicación y hacer más fácil la implementación de su funcionalidad.

Elementos principales de un interfaz multimedia

Actividades

3. ¿Cuáles son las razones de accesibilidad que hacen necesario el uso de sonidos en una aplicación multimedia?

4. Explique al menos dos ventajas de usar imágenes animadas en 3D.

Elementos de interactividad

Son aquellas acciones programadas sobre los objetos integrados en la aplicación multimedia, por lo que a diferencia de los anteriores, estos no son visibles directamente. Permiten ejecutar una tarea cuando el usuario realiza una determinada acción, por ejemplo volver a la pantalla principal del programa, cuando el usuario pulsa sobre el botón de inicio.

Es muy importante saber que la acción se ejecutará cuando se produzca un determinado evento, y no hay que confundir el concepto de evento con el de acción. Si hay un botón en la pantalla principal, que al ser pulsado cierra la aplicación multimedia, la acción es “cerrar el programa”, y el evento es “al pulsar en el botón de salir”. El software para la elaboración de productos multimedia suele ofrecer un amplio conjunto de eventos y acciones programadas, las cuales pueden clasificarse en:

1 Acciones de control general de la aplicación.

2 Acciones de navegación.
3 Acciones de reproducción multimedia.
4 Acciones de movimientos de objetos y cambio de propiedades.
5 Acciones de control sobre los dispositivos y manejo de errores.

Nota

Los eventos de alguna manera, se entienden como la forma en la que las aplicaciones “cazan” las acciones de los usuarios. Algunos ejemplos de eventos son:

1 El usuario pulsa la tecla de “Escape”.
2 El usuario pulsa la tecla “Enter”.
3 El usuario hace click sobre una imagen.
4 El usuario pasa el ratón por encima de un objeto.
5 El usuario se sitúa dentro de un cuadro de texto.

La correcta programación de las acciones y eventos sobre los objetos de la aplicación es lo que permite implementar la interactividad de la misma, sin la cual, la aplicación multimedia sería poco más que proyectar una presentación de diapositivas.

Ejemplo del conjunto de acciones ya programadas que pueden aplicarse al evento “mouseUp”, es decir cuando el usuario pulsa sobre un objeto.

2.2. Otros elementos

Además del texto, las imágenes, los gráficos e iconos, animaciones y/o vídeos y sonidos, destacamos los elementos que se describen a continuación.

Menús de navegación

Tienen como función principal permitir que el usuario acceda a los distintos recursos que ofrece la aplicación multimedia, por lo que son especialmente necesarios en aquellas que tienen un amplio contenido.

Ejemplo de barra de menú

Marcos

Los marcos representan áreas que tienen una funcionalidad determinada o un contenido fijo. Puede usarse el marco para resaltar un texto en su interior. Es muy común también, usar un marco fijo a la izquierda o en la parte superior para establecer un menú. Aunque en el diseño de aplicaciones multimedia on-line (páginas web) ha sido sustituido por nuevos elementos, conviene conocer sus ventajas e inconvenientes.

Barras de desplazamiento

Pueden ser horizontales y/o verticales y tienen la única función de mostrar zonas de la aplicación que en un determinado momento no son accesibles en el área de la pantalla. Hay que intentar evitarlas, adaptando el número de píxeles de alto y de ancho de la aplicación a la resolución de la pantalla donde se vea, pues implica que el usuario gaste tiempo en usarlas. Actualmente son menos necesarias que en el pasado, por el aumento de la resolución en las pantallas de ordenador.

Hipervínculos

Hoy día es muy común encontrar en las aplicaciones multimedia vínculos a programas externos, o servicios de internet tales como el correo electrónico, o páginas web. Estos hipervínculos pueden aparecer en el formato de texto, también denominado hipertexto o imágenes (botones).

Definición

Hipertexto

“Es una tecnología que organiza una base de información en bloques distintos de contenidos, conectados a través de una serie de enlaces cuya activación o selección provoca la recuperación de información.” [Díaz et al, 1996].

Botones (de acción)

Normalmente se representan por iconos con una simbología clara y universal, que determinen la acción que se realiza cuando se pulsa sobre ellos, por ejemplo volver a la pantalla anterior, ir al menú principal del programa, imprimir la pantalla actual, validar una determinada información o incluso salir de la aplicación.

Ejemplo de botones de acción en diseño multimedia, situados en distintos lugares de la interfaz

La función principal del hipertexto, hipervínculos y de los botones es acceder a contenidos de la aplicación que no aparecen en la pantalla actual.

Ejemplo de textos marcados como hipertexto (en color azul) que permiten la navegación interactiva a otros textos.

Actividades

5. Cite al menos a tres personas que han desarrollado el concepto de hipertexto a lo largo de la historia y la labor, tarea o proyecto realizado.

6. Explique la diferencia y a su vez relación entre un menú de navegación y un hipervínculo.

Controles de formulario

Los controles de formulario sirven para recopilar información del usuario que será utilizada más adelante y agregan funcionalidad e interactividad a la aplicación, pues suelen usarse conjuntamente con otros elementos, sistemas de bases de datos, etc.

Ejemplo de controles de formularios

Pueden ser de muchos tipos, más si nos referimos a los controles ActiveX.

Definición

ActiveX

Los controles ActiveX son pequeños programas, denominados en ocasiones complementos, que se usan en determinadas aplicaciones para mejorar la experiencia de uso al permitir tareas programadas, lo que añade funcionalidad a la aplicación.

Los más usados en aplicaciones multimedia son (se muestran los nombres de dichos campos en español e inglés):

1 Casilla de verificación / Checkbox: permiten activar o desactivar una determinada opción. Por ejemplo, si una persona tiene casa o no, si tiene coche o no, o si tiene mascota o no. Estas opciones no dependen entre sí.
2 Botón de opción / Radio button / Option button: permiten activar o desactivar una determinada opción de un grupo de opciones, donde estas son mutuamente excluyentes –dependientes-, es decir si se selecciona una, se deseleccionan las demás. Por ejemplo, puede usarse para que el usuario determine su estado civil (soltero/a, casado/a, divorciado/a, etc.) pues una persona solo puede tener un estado actual.
3 Campo formateado / Cuadro de texto / TextField / TextBox: permiten escribir dentro, el texto que se desee (por ejemplo el nombre del usuario) en una línea o varias. Es quizás el elemento de formulario más usado.
4 Cuadro de lista / Cuadro combinado / List / ComboBox: permiten mostrar una lista desplegable de elementos. El usuario puede seleccionar el que desee, y se podrá realizar una acción en función de dicha selección. Por ejemplo, puede usarse para elegir el idioma de la aplicación.

Imagen que muestra un ejemplo de los controles Textbox, CheckBox, RadioButton y List.

Gráficos estadísticos

Permiten mostrar las estadísticas de un determinado tema o conocimiento de manera clara y atractiva al usuario de la aplicación. Se han desarrollado hoy día muchos programas, componentes y plugins que ofrecen gráficos estadísticos de gran calidad, incluso animados.

Efectos

Aunque no se consideran un elemento, en el sentido exacto de la palabra, si ofrecen mayor vistosidad al diseño final de la aplicación, permitiendo por ejemplo que las pantallas se muestren suavemente, con transiciones especiales, o desvaneciéndose a negro, por ejemplo, al salir de la aplicación.

Plantillas

Permiten realizar diseños fijos de pantallas u otros elementos, con unas características de diseño, funcionalidad e interactividad comunes. Así, el diseñador puede tener una plantilla tipo para las páginas de contenido de la aplicación multimedia y cambiar solo el texto y las ilustraciones que ofrecen, por ejemplo.

Ejemplo de plantilla en el que se observa que se pueden diseñar unos contenidos fijos, como el fondo, área de botones, etc., y unos contenidos variables, como los títulos, áreas de textos, enlaces, etc.

Nota

Las plantillas se crean como una pantalla más, con todos sus elementos y funcionalidad integrados, se eliminan aquellos objetos o características que sean variables y se guardan. Posteriormente se pueden crear nuevas pantallas a partir de las plantillas diseñadas y añadir aquellos elementos nuevos o que cambien permitiendo por tanto ahorrar mucho trabajo.

Reproductores multimedia

Se usan para visualizar y controlar los vídeos, animaciones o sonidos que en la aplicación se muestren. En ocasiones es necesario utilizar algún tipo de reproductor de autor, que simplifica enormemente la programación del control del medio. Es necesario asegurar su compatibilidad con los diferentes formatos, estándares y plataformas.