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

Un árbol de contenidos es un gráfico o esquema diseñado para definir la estructura de un determinado producto multimedia. En él se especifican las secciones principales del proyecto y qué camino(s) sigue la navegación desde la pantalla de inicio hasta cualquiera de las pantallas que lo forman. Es especialmente útil para proyectos grandes o complejos que contienen muchas partes o temas y no debe confundirse jamás con el diseño de la interfaz.

En la foto anterior cada rectángulo se considera un nodo. El nodo de “Inicio” es la primera pantalla mostrada una vez que acaba la “animación inicial” o “intro” (la cual no debe considerarse nodo). Se aprecia la estructura jerárquica donde “inicio” es el padre de los demás nodos: significa que para acceder a “productos” habrá que pulsar sobre el enlace correspondiente situado en la pantalla de “Inicio”, y de igual forma para acceder a “Aplicaciones” hay que pulsar antes en “Productos”.

“Productos” se dice que es un nodo hijo de “Inicio” y a su vez “Aplicaciones” es un nodo hijo de “Productos”. “Inicio” es un nodo padre de “Productos” y “Productos” es un nodo padre de “Aplicaciones”. “Empresa”, “Productos” y “Contacto” son entre sí, nodos hermanos.

El árbol de contenidos de la foto nº 30 puede también especificarse de manera textual, usando la tabulación. El resultado sería:

Nota

Se puede diseñar cualquier árbol de contenido usando un simple procesador de texto. Mediante tabulaciones, es decir, posiciones fijas hacia las que se mueve el cursor cuando se pulsa el tabulador, se establece el orden jerárquico de dicho árbol.

Si en este ejemplo, hacemos que desde “Empresa” se pueda navegar a los apartados de “Quienes somos”, “Nuestra historia” y “Delegaciones”, y desde “Delegaciones” a los apartados o pantallas de “Andalucía”, “Cataluña” y “Madrid”, el árbol de contenidos queda como se muestra en la siguiente imagen.

Árbol de contenido del ejemplo, generado mediante la aplicación on-line “http://cssmenumaker.com” mediante la cual se ha desarrollado el menú de navegación que sirve para implementar dicho esquema (en el menú se despliega el submenú productos hacia arriba para facilitar su interpretación, pero lo normal siempre es hacerlo hacia abajo o de izquierda a derecha).

La principal utilidad de un árbol de contenidos es que permite diseñar la organización de la información y su acceso, de modo que su implementación, normalmente a través de un menú de navegación y sus respectivos submenús –como se ha visto en la imagen anterior–, sea clara y no tenga errores. El problema más frecuente que se da cuando se diseña un árbol de contenidos, es el desequilibrio entre su amplitud y profundidad.

Definición

Submenú

Un submenú es cualquier menú desplegado a partir de un menú principal o de otro submenú –es decir un menú dentro de otro menú–. Sirve para agrupar de manera ordenada los diferentes accesos a los múltiples contenidos de la aplicación.

Una estructuración jerárquica de contenidos se implementa mediante un menú de navegación compuesto por los enlaces a los temas principales, y los submenús que permiten enlazar al resto de páginas o pantallas.

Amplitud es el número de pantallas de igual jerarquía (nivel o nodos) a las que se puede acceder desde la pantalla de inicio y se valora horizontalmente. Una gran amplitud implica tener muchos enlaces en la pantalla de inicio lo que puede “marear” y confundir al usuario, y estos enlaces, por lo general tendrán también mucha información que ofrecer.

Profundidad es, contrariamente, el concepto vertical que indica el número máximo de pantallas de distinta jerarquía, al que se puede llegar. Cuanta más alta sea la profundidad, mayor será el número de “clicks” que el usuario tendrá que hacer para llegar a un determinado contenido.

Ejemplo de árbol de contenido implementado en un menú superior, donde la amplitud es seis (“Home”, “About us”, “Products”, “FAQ’s”, “Privacy” y “Contact us”) y la profundidad máxima es cinco (despliegue del menú que más elementos tiene: “products”).

Actividades

15. Si una aplicación multimedia tiene una pantalla de inicio desde la que se puede acceder, por estructura de malla completa, a 10 páginas más, ¿cuántos vínculos o enlaces se necesitan para interconectar todas las pantallas?

Dependiendo de la complejidad del proyecto multimedia, hay varias formas alternativas al dibujo con lápiz y papel, de esbozar el árbol de contenido, antes de implementarlo.

Se pueden usar herramientas gráficas incluidas en programas tales como Microsoft Word, Micrososft Powerpoint, Microsoft Visio, ABC Flowchart, Adobe Illustrator, SmartDraw, CMapTools, etc. Algunas herramientas son gratuitas como EDraw. Otras son on-line, como Draw.io, Creately, Mindomo o Gliffy, es decir han de ser usadas con un navegador web y con conexión a internet. La mayoría de estas aplicaciones son muy fáciles de manejar.

Ejemplo de árbol de contenido diseñado con la aplicación CREATELY

Sabía que...

Hoy día están apareciendo muchas herramientas de diseño y creación multimedia on-line. Se usan con un ordenador conectado a internet, accediendo a la página web de dicha herramienta y usándola desde el mismo navegador. En algunos casos hay que registrarse y en otros se pueden usar directamente, incluso de manera gratuita.

Aplicación práctica

Tras aceptar la elaboración de un proyecto editorial multimedia sobre un pequeño país de África, nos reunimos con el cliente que nos encarga la aplicación, el cual nos especifica que los contenidos que se van a incluir son:

Una pantalla principal desde la cual se puede acceder a las áreas de “Un poco de historia”, “Mitos y leyendas”, “Galería”, “Recetas” y “App”. La “Galería” tendrá disponible el acceso a una zona de “Imágenes” y otra de “Vídeos”. De la sección “Un poco de historia” se puede acceder a los temas (conectados entre sí por parejas) de: “Ubicación geográfica” y “Organización económica”, “Viviendas” y “Lenguaje”, “Organización social” y “Arte y artesanías”.

Dibuje el árbol de contenidos que permite acceder a los temas solicitados. ¿Qué tipo de navegación es la que mejor se adapta al proyecto?

SOLUCIÓN

El árbol de contenidos sería el siguiente:

Este árbol puede implementarse mediante un menú fijo que permita una navegación jerárquica, donde del submenú “Un poco de historia” se desprenda una malla de contenidos –puede ser un submenú con seis opciones– y del submenú “Galería” se desprendan las opciones de “Imágenes” y “vídeos”.