Читать книгу Integración de la funcionalidad en productos multimedia. ARGN0110 - Juan Luis Perles García - Страница 14

Cuando un usuario abre una aplicación multimedia, tendrá un número determinado de páginas o pantallas estructuradas de algún modo y accesibles desde la pantalla de inicio. La forma de acceder a estas pantallas se denomina navegación y es uno de los puntos principales que determinan el grado de interactividad de la aplicación.

Recuerde

Se considera página o pantalla, a la unidad informativa integrada en un interfaz interactivo donde se exponen unos determinados contenidos como imágenes, textos, controles de navegación, reproductores, etc.

Existen distintas formas de estructurar la aplicación en función de la navegación; estas se describen a continuación.

Lineal

Se accede a las pantallas a partir de una inicial, secuencialmente, una detrás de otra y permitiendo en muchos casos, volver a la pantalla anterior. Esta estructura obliga al usuario a seguir un camino predefinido y por tanto recibir la información en el orden adecuado. Está indicada para aplicaciones multimedia de tipo pedagógico, como cursos de idiomas, mecanografía, etc.

Lineal ampliada

Permite realizar una navegación lineal, pero con la posibilidad de visitar pantallas anteriores, saltar pantallas, acceder a pantallas alternativas, y lo que es más importante, volver en cualquier momento a la pantalla inicial.

Jerárquica o en árbol

Se basa en el concepto de estructura de árbol, donde el acceso a las distintas pantallas se realiza desde una pantalla inicial, también llamada pantalla “raíz”, a través de la cual los caminos van bifurcándose. Esto ofrece como ventaja dar al usuario la libertad de acceder ordenadamente a un contenido muy amplio.

Tiene como principal desventaja que en función del contenido, cuanto más profundo sea, el usuario tendrá que pulsar más veces en los enlaces para acceder a una determinada pantalla.

Existe la posibilidad de ampliar el número de enlaces en la página de inicio, con lo cual el usuario tendrá que hacer menos “clicks” para llegar a una determinada pantalla, aunque en su detrimento este sistema tiende a recargar la pantalla de inicio. Esta idea se denomina árboles anchos.

Malla y malla completa

La estructura de tipo malla permite múltiples accesos entre las distintas pantallas, siendo una combinación entre la estructura jerárquica y la lineal. Si la aplicación permite una navegación donde cada página está vinculada con todas las demás, se dice que usa una estructura de tipo malla completa. El número de vínculos totales, resultará de multiplicar el total de páginas, por el total de páginas menos una.

Hipertextual

Tiene como principal característica el uso de enlaces de texto (hipertexto) para acceder a los distintos contenidos. Un ejemplo son las enciclopedias on-line con un amplio número de enlaces. El usuario puede navegar siguiendo distintos caminos, como se ha explicado en los tipos anteriores.

Nota

En las enciclopedias on-line el hipertexto permite reunir un amplio conocimiento, estructurándolo y relacionándolo en grupos temáticos diferentes, mediante enlaces que dan al usuario la posibilidad de navegar libremente, en función de las relaciones que se establezcan.

Por tanto, siguen unas estructuras de navegación mucho más complejas que las que hemos visto, y en todo caso se aproximan a usar estructuras de tipo malla completa.

Cuando se utiliza el texto como sistema de navegación es necesario definir las etiquetas con el fin de estructurar el recorrido por los distintos temas de la aplicación, tal y como ha sido especificado por el cliente y que esta cumpla con los objetivos de accesibilidad y usabilidad.

Nota

Las etiquetas son entendidas en este ámbito como el texto que tiene atribuida la función de poder dirigir al usuario a un determinado contenido una vez que se pincha en él.

Por otro lado se habla de “etiquetas” en el contexto de la programación web, para referirse al “lenguaje de marcado” o de “etiquetas” que es aquel que permite diseñar documentos con un contenido formateado y visualizado de una determinada manera mediante etiquetas.

El lenguaje de etiquetas más conocido hoy día es el HTML (“HyperText Markup Language”, Lenguaje de marcado de hipertexto), base del World Wide Web.

Cada etiqueta tendrá un nombre, un texto o la palabra o frase en sí, un estilo y el vínculo que es la pantalla de la aplicación a la que se accede al pulsar en ella.

Las etiquetas se clasifican en:

1 Etiquetas principales: son las que definen el acceso a las pantallas o temas más importantes de la aplicación. Es buena práctica que estos elementos estén etiquetados a través de hipertexto, aparte de los sistemas tradicionales como los menús de navegación.

2 Etiquetas alternativas: son las que permiten de manera alternativa a los enlaces principales, acceder a un determinado contenido, como por ejemplo las etiquetas “Anterior”, “Siguiente”, “Volver”, “Leer más”, etc.

3 Etiquetas hipertextuales: es el hipertexto propiamente dicho, que permite acceder a cualquier contenido de la aplicación mediante vínculos. Por regla general suelen tener el estilo de texto azul que se subraya automáticamente cuando el usuario pasa el puntero del ratón sobre ella.

4 Etiquetas de cabeceras o títulos: tienen el formato de título, por lo que además de cumplir la función semántica, permiten mostrar el contenido completo de aquellas pantallas que aparecen resumidas. Es similar a la función de la etiqueta “Leer más”.

5 Etiquetas funcionales: son aquellas etiquetas que tienen asignada una determinada función, distinta de las comentadas anteriormente. Por ejemplo, en una pantalla donde aparece un formulario, una etiqueta que sirva para enviar el formulario.

6 Etiquetas del sistema de índice de ayuda: son las etiquetas que presentan la ruta desde la página o pantalla inicial hasta la que nos encontramos. Normalmente aparecen en la parte superior de la pantalla, o en un lugar visible. Son muy comunes en las páginas web, ya que además permiten la navegación a pantallas o contenidos anteriores.Ejemplo de etiquetas del sistema de índice de ayuda

7 Etiquetas embebidas: una etiqueta embebida es aquella cuyo enlace direcciona a un contenido existente en la misma pantalla, página o nodo, de forma que se produce una relación entre contenidos relacionados semántica o contextualmente.

Definición

Nodo

Elemento que posee entidad propia, dentro de un conjunto interconectado de iguales o similares y que puede ser accedido a través de un elemento superior (padre), inferior (hijo) o del mismo nivel (hermano). Los nodos permiten estructurar un árbol de contenido, y al menos debe existir un nodo inicial llamado también nodo raíz.

Actividades

13. ¿En qué se diferencian las etiquetas de títulos de las etiquetas principales?

14. ¿Puede definirse un sistema de navegación jerárquico mediante hipertexto? ¿Es recomendable?

Hay un concepto reciente, denominado hipermedia, que se define como la unión de sistemas hipertextuales con contenidos multimedia. Una página web actual que incluya contenidos multimedia cumple con esta idea, aunque no todas las páginas web son de tipo hipermedia.

El hipertexto requiere unos conocimientos adicionales por parte de los usuarios, pues la información que se muestra aparte de su sentido didáctico o informativo, tiene como funcionalidad añadida que permite la navegación.

Por tanto, cuando se diseña un producto editorial multimedia que use el concepto de hipertexto (hipermedia) es necesario planificar el sistema de navegación de manera que el usuario no se desoriente en un espacio súper conectado.

El hipertexto, en sus distintas variantes, es una buena forma de ofrecer una alternativa, accesible y usable, a la navegación tradicional construida a partir de botones, menús, etc., aunque normalmente una aplicación implementa su estructura de navegación mediante botones o menús de navegación y la estructura de hipertexto se construye adicionalmente.

Independientemente del diseño de dichos botones o menús, estos deben presentar tres estados que identifican las acciones interactivas permitidas.

Así un botón o elemento de menú puede estar activado –puede usarse-, desactivado –no puede usarse– y encendido –se ha colocado el puntero del ratón en él y transmite al usuario la idea de que está activado–.

Ejemplo de cuatro botones de navegación donde los tres primeros están activos, y el cuarto está desactivado. El segundo botón y tercer botón están encendidos pues el puntero del ratón se sitúa en ellos.

Nota

Algunos autores usan los términos habilitado o deshabilitado cuando un botón o elemento de menú está activado o desactivado respectivamente.

Cuando se diseña la interfaz, en lo que se refiere a los elementos de navegación, es necesario que la función de cada botón esté perfectamente indicada, que no sea ambigua y que sea comprendida por el usuario fácilmente, retroalimentando el uso y conocimiento de la misma.

Aplicación práctica

Se nos encarga diseñar una sencilla interface para la visualización de contenidos multimedia que básicamente, es un curso sobre el programa Microsoft Excel, a través de texto, video-tutoriales e imágenes y optamos por diseñar una pantalla en la que la navegación será hipertextual.

Teniendo en cuenta que se usará un menú de navegación principal en la parte izquierda, basado en texto, etiquetas del sistema de índice de ayuda, etiquetas alternativas, hipertextuales y de cabeceras o títulos, realice un boceto del interface usando el procesador de texto. Ofrecer una solución que permita la navegación de tipo “malla completa”.

SOLUCIÓN (Posible solución)

Con la interface que se muestra en la siguiente imagen, puede accederse a todos los contenidos de la aplicación, por tanto posibilita la navegación de tipo “malla completa”.

Solución del ejercicio donde se muestra la interfaz que cumple con los requisitos pedidos (Realizada en Microsoft Word).