| |
Año 4 - Boletín Nro 72 - miércoles 15 de dic de 2004 |
Diagramas de sitios Web (II - final)
Planificando un espacio de información
POR JASON WITHROW - Tomado de http://www.boxesandarrows.com/
TRADUCIDO POR: Carlos Martínez Pérez de PROYECTOWEB.org
Planificando la estructura visualmente
Los diagramas de árbol se usan para representar la estructura visualmente. La opción del diagrama de árbol horizontal o vertical (ver Figuras 2 y 3) usualmente viene dado por la consideración del ancho y la profundidad del sitio Web, así como la preferencia del autor para trabajar con la orientación de la página para el diagrama impreso.
Si se crea un diagrama de árbol horizontal, los niveles del sitio avanzan de izquierda a derecha, con el nivel 1 a la izquierda y sucesivamente los niveles mas bajos a la derecha. Los diagramas de árbol verticales avanzan de arriba hacia abajo, con el nivel 1 en la parte superior de la página y los niveles sucesivos más abajo.
Figura 2: Diagrama de árbol horizontal
Figura 3: Diagrama de árbol vertical
Como una cuestión de necesidad, el diagrama del sitio es dividido a menudo a través de múltiples páginas impresas (Ver Figuras 4 y 5). La primera página del diagrama contiene el nivel 1 (página de inicio), el nivel 2 (las páginas de navegación global y no global) y la leyenda. Las siguientes páginas del diagrama enfocan cada sección del nivel 2 que tienen sub-páginas, detallando esas áreas del sitio. Si una sección dada del nivel 2 se va muy profundo (al nivel 6 o 7) se requiere más de una página del diagrama. Generalmente esta división del diagrama se puede evitar con sitios pequeños (todos los contenidos pueden ser mostrados en una página) o si Ud. tiene acceso a una impresora capaz de imprimir hojas de papel contínuo.
Figura 4: Dividiendo un diagrama del sitio para facilitar la impresión: página 1
Figura 5: Dividiendo un diagrama del sitio para facilitar la impresión: página 2
Enlaces y relaciones entre páginas
Las líneas sólidas conectadas entre los rectángulos indican enlaces estándares moviéndose de una página padre a una hija. En la práctica, estos enlaces ocurren usualmente en una barra de navegación o de un enlace en el texto de una página. En los enlaces estándares no se usan las flechas para indicar la dirección; el flujo visual de los niveles más altos a los más bajos en el árbol del diagrama sugieren la dirección visual de los enlaces. Las formas en las cuales las líneas conectan y divergen revelan información importante, concerniente a como la navegación funciona en el sitio Web (ver figuras 6 y 7).
Figura 6: Todas las páginas del nivel 2 que se enlazan entre sí
Figura 7: La navegación entre las páginas del nivel 2 requiere retornar a la página de inicio
Secuencias lineales
Para las secuencias lineales de las páginas, las flechas se usan a menudo para representar el flujo a través del proceso. En los casos donde la direccionalidad es más rígida (tales como un proceso de compra) las flechas apuntarán en una dirección entre las páginas (ver figura 8). Las situaciones donde la linealidad es una opción, pero no un requerimiento (tales como artículos de múltiples páginas con ambos enlaces "Anterior" y "Siguiente" y enlaces a todas las secciones del artículo en cada página), puede ser representada con una flecha de doble sentido entre las páginas, así como una línea sólida a todas las páginas a las cuales se conecta. La secuencia de las páginas lineales se muestran generalmente de izquierda a derecha, porque las páginas están al mismo nivel en la estructura del sitio. Para resolver el tema de la enumeración (el cual surge debido a que todas las páginas están al mismo nivel) es provechoso utilizar números de páginas compartidos y adicionar letras (a,b,c) al final de ese número para los pasos sucesivos de las páginas.
Figura 8: Secuencias lineales de páginas
Enlaces cruzados
Los enlaces cruzados son de una manera completamente distinta. Esas relaciones son representadas por líneas discuntínuas, que generalmente finalizan en un rectángulo, conteniendo los números de las páginas con los enlaces cruzados (ver figura 9).
La definición más pura de los enlaces cruzados es, un enlace a una página en un área diferente del sitio (por ejemplo, un enlace de 1.3.2 a 1.5.3), aunque en la práctica los enlaces dentro de la misma sección (ejemplo, un enlace de 1.3.2 a 1.3.4.3) son llamados enlaces cruzados, especialmente si el enlace atraviesa varios niveles. Los enlaces rápidos en la página de inicio pudieran llamarse enlaces cruzados. En los casos donde los enlaces cruzados son a páginas dentro de la misma página del diagrama, se puede agregar una flecha a la línea discontínua, para mostrar la dirección.
Enlaces externos
Los enlaces externos son representados por un ícono rotulado, cercano a la página que contiene el enlace (ver Figura 9). Colocar el ícono fuera del rectángulo es intencional, hecho para enfatizar que el enlace es externo. Los enlaces entrantes se muestran de manera similar, usando un ícono similar situado cerca de la página afectada; mostrar tales enlaces es relativamente una práctica inusual.
Las páginas que se acomodan a un grupo dado (tales como navegación global o una barra de navegación local) pueden tener la relación mostrada por una caja con un rótulo descriptivo (ver figura 9).
Figura 9: Enlaces cruzados, enlaces externos y agrupamientos
Mostrando tipos de contenido no Web
Los sitios Web contienen una amplia variedad de tipos de contenidos que no se acomodan dentro de la categoría de "páginas web", incluyendo documentos Word, archivos PDF, diapositivas de Power Point, hojas de Excel, ejecutables, otros formatos de archivo e incluso imágenes. En este enfoque la diferencia más importante entre las páginas Web y otros tipos de contenido, es que los otros tipos de contenido no reciben números de página. La razón fundamental es que esos documentos no son parte de la estructura de navegación del sitio, así que los números no son necesarios. Después de todo, ¿con qué frecuencia Ud. carga un documento Word desde la página de inicio para navegar dentro del sitio? Si es apropiado, se puede utilizar un identificador diferente (algo más que el número de la página) para localizar estos tipos de contenido; tal como un identificador que pudiera corresponder a una entrada en un inventario de contenido.
Lo que el diagrama del sitio revela acerca de otros tipos de contenido es cuáles páginas apuntan a ellos. Por ejemplo, un ícono que representa archivos PDF es adicionado a la leyenda y se coloca dentro del rectángulo para todas las páginas que apunten al menos a un PDF. Su lugar dentro del rectángulo reafirma que este documento está disponible para esa página Web (ver figura 10). Como se mencionó anteriormente, los detalles adicionales acerca del PDF pueden ser dados en un inventario de contenido o quizás en una nota al pie de página. La decisión de minimizar información acerca del archivo (tal como, el nombre, el número de PDFs enlazados desde esa página y cualquier otro dato relevante) dentro del diagrama es para reducir el desorden visual. Este balance entre la cualidad de ser descriptivo y el desorden ocurre con bastante frecuencia.
Representando la funcionalidad
Ampliamente representados, la funcionalidad son los "scripts" y los aspectos interactivos del sitio Web. Formularios, enlaces a e-mail, enlaces dentro de las páginas, los "scripts" y los lenguajes del lado del servidor, todos éstos constituyen la funcionalidad del sitio. La visualización de esta funcionalidad está ubicada en el tope de la información estructural (ver figura 10). Tal como los tipos de contenido no Web, los diversos tipos de funcionalidad tienen asignados íconos en la leyenda y estos íconos se colocan dentro de los rectángulos, para las páginas que contienen la funcionalidad. La única excepción es para las páginas que involucran procesamiento al lado del servidor; esas páginas usan un rectángulo redondeado que también está definido en la leyenda.
Figura 10: Mostrando los tipos de contenido y la funcionalidad
Adicionando los meta-datos
Si una cosa es cierta acerca de los diagramas de sitos, es que están contínuamente cambiando junto con el sitio que representan. Los números de las versiones son muy útiles para seguir esos cambios (accidentalmente darle a los desarrolladores un diagrama del sitio desactualizado produce todo un caos), así como las fechas de cuando el documento fue creado y su última actualización. La URL y el nombre del sitio son también incluídas y la información de la autoría es importante, pude surgir otra cuestión. Rotulando las páginas del diagrama e incluyendo el número de la sección (ejemplo, 1.3) ahorra tiempo en los diagramas de múltiples páginas cuando se trata de localizar una página web específica dentro de la estructura.
Los diagramas en la práctica
Cuando se usan estos términos para realizar los diagramas, es importante mantener la mente abierta y ser creativos. La meta es producir un diagrama que describa con exactitud tanto lo que ha sido creado, como lo que falta, y hacerlo de una manera que se entienda fácilmente por los diferentes grupos de personas implicadas.
Dada la diversidad de estructuras y funcionalidades en los sitios, es probable que en algún punto surja una única situación, que va más allá de las instrucciones dadas en este artículo. Esto ocurre con más frecuencia cuando estamos realizando el diagrama de un sitio extenso, en el comienzo del rediseño; las estructuras extensas invariablemente tienen trayectorias irregulares que vienen de multiples autores y/o la adición de contenidos en el transcurso del tiempo. En estas situaciones polémicas es mejor iterar e innovar, en el transcurso del camino quizás se cree una nueva forma de representar la estructura o la interactividad.
Original en inglés: Site Diagrams: Mapping an Information Space
Ejemplos: Anderson Windows | KMCreative, Page 1 | KMCreative, Page 2
KMCreative, Page 3 | KMCreative, Page 4
Otros Materiales sobre el tema (en inglés):
- Automating Diagrams with Visio
- Three Visio Tips: Special Deliverables #4
- Writing Smart Annotations |
ProyectoWeb - Diagramas de sitios Web (II - final)
|
|
Suscribirse al Boletín
