Desarrollo de aplicaciones web

Tipos de estructuras

Estructura de la información lineal

La estructura lineal es la más simple de todas, esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.
Este es un ejemplo de la estructura lineal

http://www.terra.es/personal6/morenocerro2/diseno/estructura/creacion_3.html

Estructura de la información jerárquica

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de  bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.

Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.

Este es un ejemplo de la estructura de arbol o jerarquica.

http://www.corgol.com/requisitosparalaweb/estructura.html

Lineal con jerarquía

Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.

Estructura de la información red

La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, la páginas pueden apuntarse unas a otras sin ningún orden aparente.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.
Este es un ejemplo de la estructura de red

http://es.wikipedia.org/wiki/Wikipedia:Portada

Patrones de diseño web.

Que son los patrones de diseño web

Un Patrón de Diseño (design pattern) es una solución repetible a un problema  recurrente en el diseño de software. reflejan todo el rediseño y remodificación que los desarrolladores han ido haciendo a medida que intentaban conseguir mayor reutilización y flexibilidad en su software.

Los patrones documentan y explican problemas de diseño, y luego discuten una buena solución a dicho problema. Con el tiempo, los patrones comienzan a incorporarse al conocimiento y experiencia colectiva de la industria del software.

Los patrones de diseño proveen una forma efectiva para compartir experiencia con la comunidad de programadores de software orientado a objetos.

Componentes

1. Nombre del patrón. Permite describir en pocas palabras un problema de diseño junto con sus soluciones y consecuencias.
2. Problema (o fuerzas no balanceadas). Indica cuándo aplicar el  patrón.Muestra la verdadera esencia del problema.entre ellos:

• - Requerimientos a cumplir por la solución.
• - Restricciones a considerar.
• - Propiedades deseables que la solución debe tener

   3. Solución. No describe una solución o implementación en concreto, sino que       un patrón es más bien como una plantilla que puede aplicarse en diversas  situaciones diferentes. El patrón brinda una descripción abstracta de un problema de diseño y cómo lo resuelve una determinada disposición de objetos.

  4. Consecuencias. Resultados en términos de ventajas e inconvenientes.

Tipos

Según el nivel de abstracción los patrones de diseño pueden clasificarse de la siguiente forma:

-Patrones arquitectónicos. Centrados en la arquitectura del sistema.

Definen una estructura fundamental sobre la organización del sistema. Proveen un conjunto predefinido de subsistemas, cuáles son sus responsabilidades y como se interrelacionan.

-Patrones de diseño. Esquemas para refinar los subsistemas o componentes de un sistema de software, o sus relaciones. Describen una estructura recurrente y común de componentes comunicantes que resuelven un problema de diseño dentro de un contexto.

Ejemplo: el patrón singleton asegura que exista sólo una instancia de una  determinada clase.

-Patrones de codificación o modismos (idioms). Patrones que ayudan a  implementar aspectos particulares del diseño en un lenguaje de programación específico. Ejemplo: en Java implementar una interface en una clase anónima.

Diagrama de Gutenberg en diseño web

Este es quizás el patrón de diseño más utilizado en la historia, ya que la estructura que propone se puede ver representada tanto en escritos, carteles, publicidad e inclusive en la televisión. Es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.

Para este patrón de diseño las zonas que presentan menor atención son la esquina superior derecha e inferior izquierda, y en caso de querer atraer atención a esas partes es necesario incluir un elemento llamativo que enfatice de alguna manera la zona. Es por esto que el contenido relevante debe seguir la diagonal que va de la esquina superior izquierda a la inferior derecha.

Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal.

Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.

Hay que tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos:

-Nuestra área de exposición estará dividida en cuatro partes.

-Cada cuadrante representa una zona óptica.

-La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.

-La siguiente en la estructura es la zona de barbecho fuerte, que se encuentra ubicada en el extremo superior derecho.

-En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de barbecho débil.

-Finalmente en la parte inferior derecha se encuentra la zona terminal.

Patrón Z en diseño web

Este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha.

Este patrón puede ser considerado como una contraparte al diagrama de Gutenberg, ya que propone un desplace diagonal inverso, y toma en cuenta las dos zonas que el diagrama considera poco relevantes.

El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención, pero no por esto queremos dar a entender que sólo debe ser limitado a esta clase de diseños. Este tipo de layout puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio, presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción.

Existen otros patrones:

- patrón zig zag: consiste en un conjunto de patrones Z que se van uniendo a lo largo de la página desplegada para continuar con el mismo seguimiento visual del contenido. 

-patrón del triángulo rectángulo: consiste en utilizar el patrón Z dando un movimiento de clausura distinto, en vez de mandar la atención a la zona inferior derecha, regresamos a la zona superior izquierda. De esta forma se forma un triángulo, dentro del cual debe de ir la información más relevante.

Patrón F en diseño web

El patrón F es una técnica que en lugar de tratar de forzar el flujo visual del espectador, cede a los comportamientos naturales de la mayoría de los usuarios. este es un patrón diseñado especialmente para sitios que muestran mucho texto, pero que a la vez tienen imágenes de acompañamiento, por lo que es ideal para blogs y sitios de noticias.

El comportamiento definido por este patrón es el siguiente:

• El usuario ingresa al sitio y centra su vista en la esquina superior izquierda de la página.

• Después escanea la parte superior del sitio, donde generalmente se encuentra la barra de navegación, la búsqueda, entre otros elementos.

• Prosigue con una lectura hacia abajo, donde percibe el contenido en filas y en caso de existir una barra lateral se analiza su contenido.

• Al final los usuarios repiten el patrón con el resto del contenido del sitio.

Si lo que sugiere este patrón es cierto, entonces la información más importante de nuestro sitio debe de ir colocada en la parte superior de este, ya que es ahí donde seguramente será leída.

Fuentes bibliográficas:

PDF-PATRONES DE DISEÑO (Gustavo Damián Campo)

PDF-MANUAL BASICO DEL DISEÑADOR WEB (SWS.NET)