Kitabı oku: «Integración de la funcionalidad en productos multimedia. ARGN0110», sayfa 4

4. Elementos de interactividad de las diferentes pantallas

La aplicación multimedia o también llamada hipermedia, debe ofrecer al usuario cierto grado de interactividad que en función del diseño de la interfaz determine:

1 De qué manera se accede a un determinado contenido y cuál es la secuencia de acceso a dichos contenidos. Posibilidad de que haya pantallas que se generen dinámicamente.

2 Cuáles son los elementos que posibilitan la navegación –menú de navegación, botones, hipertexto, etc.–.

3 Cómo y cuándo se reproducen los contenidos multimedia: secuencias de vídeo, audio, etc.

4 De qué manera el usuario introduce información en la aplicación a través de los controles de formulario. Qué se hace con esta información y cómo se procesa.

5 Entradas o acciones concretas del usuario que desencadenan una acción específica en el programa multimedia o también en el sistema informático, incluidas la apertura y cierre de la aplicación.

6 Acceso al sistema de ayuda y control de errores de la aplicación.

Nota

Hipermedia

Una definición alternativa de este concepto es la siguiente:

“Organización de información textual, visual, gráfica y sonora a través de vínculos que crean asociaciones entre información relacionada dentro del sistema.” [Caridad y Moscoso, 1991, p.48]

4.1. Generación dinámica de pantallas

El uso tradicional de una aplicación multimedia implica recorrer los nodos o pantallas que forman parte de la misma, en el orden que determine la aplicación o elija libremente el usuario. Normalmente, en función del contenido, un determinado tema se divide en pantallas y los sistemas de navegación sirven para recorrerlas.

Nota

La pantalla es pues una medida, en el sentido de que agrupa la información que el interfaz diseñado es capaz de mostrar, con una determinada resolución, la resolución de la “pantalla física” del sistema informático.

Esta idea se usa menos en los productos multimedia on-line donde el contenido lo proporciona el navegador web y si no se puede visualizar de manera completa en una pantalla, se ofrece la barra de desplazamiento para acceder a la información que se muestre más abajo.

El auge y el continuo desarrollo de las tecnologías de publicación de contenidos (multimedia) en internet, han permitido de manera muy efectiva la generación dinámica de pantallas. La idea que se esconde bajo este concepto es que una interfaz se diseña de manera genérica, como si de una plantilla se tratara, para todos los usuarios por igual. Dependiendo luego de las acciones de estos y de la información que soliciten, el servidor les enviará ese mismo diseño, pero con distintos datos.

Simplificada en cuatro pasos, el proceso comienza con la solicitud de acceso mediante un navegador web a una aplicación multimedia on-line, alojada en un determinado servidor. El servidor devuelve al usuario dicha página, y el proceso se repite, con la diferencia que, dependiendo de las acciones del usuario, de cómo esté programada la aplicación y de la base de datos que tenga, el servidor devolverá distintos resultados o páginas, independientes para cada usuario.

Una pantalla generada dinámicamente va a mostrar una interfaz con elementos que son fijos y otros variables. Estos últimos serán habitualmente datos, ofrecidos automáticamente por el servidor, en función de las acciones y solicitudes de los usuarios. Generalmente estos sistemas son más fáciles de mantener, pues una vez definida la interfaz, lo que cambian son los datos.

Recuerde

Se entiende dato, en el amplio sentido multimedia, como cualquier tipo de información en formato de texto, imágenes, sonidos, vídeos, animaciones 3D, etc.

Para crear un producto editorial multimedia que genere páginas dinámicamente hay que considerar los dos tipos de tecnologías más conocidas; estas se describen a continuación.

HTML Dinámico o DHTML

Es el sistema de diseño de páginas dinámicas interactivas, en las que se usan los lenguajes HTML, CSS y JavaScript, principalmente, y es este último lenguaje el que ofrece una funcionalidad y apariencia añadidas, a los objetos que presenta la página, una vez que esta se ha cargado completamente en el navegador del cliente.

Definición

HTML

Es un lenguaje de programación muy simple y genérico que se usa para crear documentos o páginas web que contengan textos, imágenes, sonidos, vídeos, etc. Un documento creado mediante este lenguaje, contiene una serie de etiquetas o “tags” que describen los elementos que forman la página, sus propiedades principales, formato, posición, etc.

CSS

Son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada – y es un lenguaje que describe cómo se presentan los elementos de un documento web y cómo deben interpretarse, mediante la definición de estilos. Estos pueden ser aplicados a más de un documento al mismo tiempo, lo que permite a los programadores controlar la apariencia visual e interactiva de los documentos y optimizar el código fuente de los mismos.

Javascript

Es un lenguaje de programación libre usado para dotar de mayor interactividad a las páginas web. Suele interactuar con el código HTML dentro del cual se incrusta.

Estas páginas o pantallas serán iguales para todos los usuarios, y lo que cambia es la forma en la que estos interactúan con la interfaz de las mismas. Esta combinación es idónea para hacer menús desplegables, imágenes interactivas, animación de objetos, textos de ayuda que aparecen al colocar el puntero sobre ciertas palabras, etc., aunque no es la forma de generar pantallas de manera dinámica, en el sentido más estricto de la idea.

Pantallas generadas dinámicamente

Estas pantallas son el resultado de la interpretación por parte de un servidor, de un conjunto de páginas escritas en lenguaje HTML, otros lenguajes como ASP, ASP.NET, PHP, JSP, Perl, etc., y un sistema de bases de datos.

Sabía que...

ASP, ASP.NET, PHP, JSP, Perl, etc., son lenguajes de programación web del lado del servidor, lo que significa que se usan para diseñar páginas web que normalmente son interpretadas junto a un sistema de base de datos y enviadas dinámicamente a los usuarios que las soliciten.

El servidor devuelve al usuario a través de una red telemática, como puede ser internet, el resultado de la ejecución de dichas páginas, habiendo previamente interpretado también las acciones solicitadas por el usuario (una búsqueda de vídeos de un determinado tema, por ejemplo).

El servidor envía por tanto las pantallas de manera dinámica, donde no cambia la interfaz ni los elementos principales de la misma y si cambian los datos que muestra la interfaz.

Las dos principales tecnologías pueden combinarse entre sí, de manera que a la generación dinámica de pantallas por el servidor, se añade que estas incluyan “scripts” que permitan el uso dinámico e interactivo de la misma por parte de los usuarios.

4.2. Seguimiento de usuarios

El diseño de productos editoriales multimedia debe tener en cuenta al usuario como elemento principal en el proceso de iteración con la aplicación, pues las acciones de este determinan el flujo de información, las pantallas que se muestran, los vídeos que se reproducen, etc. El seguimiento de usuarios se hace desde dos niveles principalmente, y con dos objetivos claramente definidos.

Nivel físico de acceso a la aplicación

Tiene como objetivo establecer un nivel de seguridad, respecto al uso del producto editorial multimedia.

Determina qué usuarios acceden y por tanto pueden usar la aplicación, lo cual generalmente se implementa con un sistema de nombres de usuarios y contraseñas.

Al tratarse del acceso físico, depende principalmente del tipo de producto multimedia en relación al formato de almacenamiento:

1 Productos editoriales multimedia off-line. En estos productos no se suele controlar el acceso de los usuarios. El formato de publicación dificulta el establecimiento del nivel de seguridad, al menos que la aplicación multimedia vaya a ser utilizada en un ordenador destinado a ello, en cuyo caso sí pueden establecerse los controles usuales, como el acceso al equipo mediante nombre de usuario y contraseña.

2 Productos editoriales multimedia on-line. Estos productos son ofrecidos en formato on-line, es decir, son alojados en un servidor y accedidos a ellos a través de una red telemática como puede ser la intranet de una empresa o internet. En este último caso, cualquier persona con un ordenador y conexión a internet, puede usar la aplicación, por lo que se recomienda usar un determinado nivel de acceso, bien a la obra en su conjunto, o bien a determinadas partes.

Definición

Off-Line

Son aquellas aplicaciones que se almacenan en medios físicos tales como CD-ROM, DVD, Blue-Ray, HD-DVD, Memorias USB, etc. A diferencia de las aplicaciones on-line, que usan la red como canal de comunicación bidireccional y que por tanto pueden implementar mayores medidas de seguridad y control de usuarios, las aplicaciones off-line están más limitadas en este sentido, por el propio formato de almacenamiento.

La implementación de medidas de acceso y control en una aplicación on-line suele ser más sencilla y efectiva, pues los servidores incluyen elevados niveles de seguridad, al igual que el software usado en el desarrollo. Además es posible programar funciones de auditoría que permiten registrar las acciones de los usuarios y guardarlas en la base de datos, con el fin de mejorar la seguridad, prestaciones de la aplicación, optimizar el uso de la misma, realizar estadísticas, etc.

Definición

Auditoría

Entendida como el conjunto de procesos que permiten analizar el uso de la aplicación por parte de los usuarios, con el fin de evaluar el óptimo cumplimiento de los objetivos funcionales, didácticos y de calidad, definidos en la etapa de diseño de la misma.

Seguimiento de las acciones

Tiene como objetivo el control y registro de la actividad del usuario sobre la aplicación.

Es conveniente almacenar los sucesos o acciones que provocadas por el usuario, llevan a un mal uso de la aplicación, o a no obtener los resultados deseados. Por otro lado es muy importante, sobre todo en proyectos multimedia de un marcado carácter didáctico, saber guiar al usuario por un determinado camino de forma que el aprendizaje siga una metodología.

Es posible programar funciones de control estadístico para saber por ejemplo las veces que un usuario accede a un determinado tema, el tiempo que está con el mismo o el orden que sigue respecto a las siguientes pantallas. En la elaboración de productos editoriales multimedia mediante lenguajes de marcado o guiones, es posible implementar auditorías, las cuales pueden registrar prácticamente cualquier acción por parte del usuario. Se puede controlar el itinerario seguido por este, la personalización del sistema o incluso la incorporación de elementos adicionales.

Se deben tener en cuenta todas las posibilidades respecto a los movimientos y acciones que el usuario realiza sobre los elementos de la interfaz, evitando su desorientación, la pérdida de tiempo innecesaria en el manejo de la aplicación o realice acciones erróneas que deriven en un mal uso del sistema informático. Para ello, han de seguirse unas pautas:

1 La simbología, significado de los colores, tipografía y estilo visual coherente de la aplicación, ayudan al usuario a identificar las áreas principales en las que se divide la aplicación.

2 Deben establecerse claramente cuáles son las zonas u objetos activos de la aplicación, y su funcionalidad. Así, por ejemplo, es conveniente programar un botón de acción de manera que se ilumine cuando el usuario coloca el puntero de ratón sobre él, y aparezca un texto de ayuda o “tooltip” que indique la acción a realizar cuando se pulse.

3 Presentar un mapa de navegación completo donde se pueda acceder de manera fácil y directa a todo el contenido de la obra, marcando claramente los elementos principales de navegación, que han de ser fijos (menú superior por ejemplo).

4 La iconografía debe ser entendida perfectamente, teniendo en cuenta que no todas las personas que usen la aplicación van a tener la misma experiencia y las mismas similitudes culturales y cognitivas.

5 Evitar recorridos que llevan al usuario a un callejón sin salida o que obligue al usuario a visitar más pantallas de lo debido para llegar a un determinado contenido, haciendo posible que éste además no tenga la obligación de volver por las mismas pantallas visitadas.

6 Marcar los elementos visitados con un estilo visual distinto, lo cual es relativamente sencillo de programar en las aplicaciones on-line.

7 La aplicación debe ser probada o testeada por personas que no la conozcan, ni la hayan usado previamente. Posteriormente pueden realizarse a estas personas preguntas sobre su experiencia con la aplicación, con el fin de recabar una información útil, datos cualificativos y cuantificativos sobre la usabilidad y accesibilidad de la misma.

Definición

Tooltip

Es un pequeño recuadro, normalmente de color amarillo, con un texto de ayuda en su interior. Aparece cuando el usuario coloca el cursor sobre algún objeto de la interfaz. Para que esta ayuda se muestre, dicho objeto debe tener la propiedad “tooltip” programada, con el texto además de la ayuda. Tienen la ventaja de ofrecer una pequeña ayuda sin que el usuario la demande.

4.3. Control

Se ha explicado en este primer capítulo que el usuario accede a las pantallas de un producto editorial multimedia, controlando de manera interactiva la interfaz de la misma, la cual, entre otras funciones, ofrece un sistema de navegación acorde con el contenido de la aplicación.

Los elementos de interactividad más importantes que sirven para controlar, en este sentido, el uso de la aplicación multimedia se dividen en dos grandes grupos:

1 Elementos de control internos de la aplicación:Sistema de navegación: menú de navegación, botones de navegación, hipertexto, hipervínculos, etc.Estado y uso de los botones: normal, activado y desactivado y sus acciones asociadas.Reproducción de las secuencias animadas, vídeos, etc.: reproducir, parar, volver al inicio, adelantar, atrasar, reproducir siguiente secuencia, etc. La mayoría de reproductores incluyen estos controles.Reproducción de las secuencias de audio: ofrecer los controles para reproducir, parar, volver al inicio, adelantar, atrasar, reproducir siguiente secuencia, etc. El reproductor de audio debe mostrar dichos controles.Propiedades de la reproducción de medios: ofrecer los controles para modificar el volumen, balance, ecualización, etc., desde controles de la interfaz de la aplicación.Temporización: ajuste del tiempo de determinados elementos, en los que a modo de presentación se van desarrollando secuencias de carácter demostrativo o didáctico, donde es muy importante fijar correctamente el tiempo o velocidad de ejecución. De igual forma si estas secuencias incluyen sonidos, deben ser usados con cuidado, al volumen apropiado y sin que otros sonidos que participen en el programa –como sonidos asociados a los botones– interfieran incorrectamente. Hay que ser estricto con la coordinación del audio y el vídeo en una escena animada.Música de fondo: es recomendable ofrecer en la interfaz un control para regular su volumen, incluso para silenciarlo. Aun así el equipo de desarrollo del producto debe cuidar que respecto a los volúmenes y calidades sonoras, haya una uniformidad.Formularios: en el uso de formularios ofrecer un conjunto apropiado de controles, y programar correctamente su funcionalidad. Se aconseja incluir rutinas de detección previa de errores –por ejemplo, si el usuario escribe un texto cualquiera en un campo de tipo fecha, debe invalidarse antes de que la información sea enviada–.Búsquedas: ofrecer controles de búsquedas, principalmente en las aplicaciones multimedia on-line.Otros elementos: barras de desplazamiento, controles de impresión, etc.

2 Elementos de control externos de la aplicación:Propiedades de audio: volumen, balance, bajos y agudos, efectos de audio, etc.Propiedades del sistema de visualización: brillo, contraste, resolución, frecuencia, etc.Control de otros dispositivos: webcam, radio, etc.

Tablas de control

Son cuadros que permiten especificar cómo se comporta la aplicación multimedia a lo largo de los distintos temas o pantallas. En estos cuadros se definen cuestiones como por ejemplo, el orden de aparición de los elementos que componen una pantalla, el destino de los vínculos de una página, o el tiempo que dura una determinada narración.

Nota

Hay multitud de productos editoriales multimedia donde es imprescindible usar medios narrativos, ofrecidos a través de animaciones con audio o vídeos. Estas aplicaciones permiten así mostrar tutoriales, cursos, demostraciones, simulaciones, ejemplos de resolución de problemas, juegos, historias, cuentos, etc.

Esta herramienta permite al equipo de trabajo encargado de elaborar el esquema o guión, hacer la descripción de las pantallas que forman la aplicación, una vez establecida la idea principal y la navegación por el árbol de contenidos. Los datos más importantes que deben especificarse sobre cada pantalla son:

1 Nombre, número o código de la pantalla.

2 Orígenes o entradas: de qué pantalla o pantallas se llega a esta.

3 Destinos o salidas: desde esta pantalla, a qué pantallas se puede acceder.

4 Fondo: si la pantalla tiene un diseño de fondo, el color del mismo, si es una imagen o si usa algún tipo de efecto o animación, por ejemplo.

5 Textos que aparecen en la pantalla y descripción de los estilos usados.

6 Elementos de navegación: menús, botones, hipertexto, etc.

7 Botones de acción: botones que permiten ejecutar un determinado comando, como salir de la aplicación, desactivar el sonido, imprimir una determinada pantalla, etc.

8 Zonas sensibles de la pantalla y su comportamiento, es decir, aquellas que tienen definida una determinada interactividad con el usuario.

9 Elementos multimedia: secuencias de audio o vídeo, así como los controles que se usan para su reproducción, propiedades, etc.

10 Ventanas de ayuda y control: su contenido, formato y eventos que producen su aparición.

11 Otros datos: si la pantalla se presenta durante un tiempo determinado, incluye controles de formulario, búsquedas u otros elementos, etc.

Aplicación práctica

El departamento de diseño de nuestra empresa nos envía el boceto de la página de inicio de una sencilla aplicación web a la que pueden acceder los alumnos de una clase para consultar material didáctico, ejercicios, noticias, juegos, etc.

Realice la tabla de control de la misma, identificando las principales cuestiones interactivas y funcionales. ¿Puede esta idea implementarse mediante generación dinámica de pantallas?

Muestra de la pantalla sobre la que se realiza esta actividad.

SOLUCIÓN

La tabla de control de la pantalla anterior es la siguiente:

Num	Elemento	Descripción
1	Nombre pantalla	“Inicio”
2	Orígenes	La pantalla de “Inicio” al ser la primera no tiene ningún origen.
3	Destinos	“Sabías qué”, “Noticias”, “Efemérides”, “Contenido”, “Mediateca”, “Ejercicios”, “Juegos”, “Resultados”, “Buscador”,
4	Fondo	Color crema, con efecto de cuadrícula. No se programan animaciones.
5	Textos	Fuente Comic Sans MS tamaño 12, color negro. Estilo negrita para los títulos y azul subrayado para los enlaces.
6	Navegación	Una zona superior donde están los enlaces hacia las pantallas de “Sabías qué”, “Noticias”, “Efemérides” y el “Buscador”. Una zona lateral izquierda donde están los enlaces de “Contenido”, “Mediateca”, “Ejercicios”, “Juegos” y “Resultados”.
7	Botones acción	Cuatro botones en la zona inferior: “Ver los usuarios de la página”, “Anular o activar el sonido”, “Zona de descargas” y “Ayuda”. Los botones se iluminan al pasar el ratón por encima de ellos.
8	Zonas sensibles	Todos los botones y elementos de navegación especificados, serán zonas sensibles. También los enlaces de “Leer más”. El logotipo puede tener la propiedad de navegar a la pantalla de inicio al pulsar en él.
9	Multimedia	El enlace “Mediateca” permite visualizar fotos y vídeos en la zona de contenido de la interfaz.
10	Ayuda	Hay un botón de ayuda habilitado en la zona inferior

Si, puede implementarse perfectamente en un sistema de generación dinámica de pantallas, teniendo en cuenta que están claramente definidos los datos que cambian, como pueden ser las “Noticias”, “Ejercicios”, “Mediateca”, “Juegos” y “Resultados”, por ejemplo, y que estos pueden estar contenidos en una base de datos y ser mostrados en función de las acciones de los usuarios de la página.