Patrones de diseño web

Principios de usabilidad web:

El contenido de Internet tiene sus propias características con respecto a otros medios y apuesta por textos más resumidos y atractivos. El diseño debe contar con una navegación simple y clara, unos textos precisos y una estructura “amigable” para la mayoría de los usuarios.

Los principales conceptos en torno a la usabilidad web son los siguientes:

::. Visibilidad: Es importante que el usuario pueda reconocer los diferentes elementos de manera sencilla, sin mayor esfuerzo.

::. Consistencia: Una información debe ser reiterada de diferentes formas pero debe ser siempre la misma. Tiene que haber una definición en torno a los patrones de la página web y la experiencia del usuario para no crear confusión.

::. Compatibilidad: El sitio web debe adecuarse a la forma de pensar del usuario promedio, del cliente potencial y el público meta. En estética y funcionalidad, los procesos deben adaptarse a las expectativas de los visitantes.

::. Eficiencia: Debes reducir el trabajo del usuario en todos los niveles, facilitar el camino para que pueda encontrar la información que desea o que pueda retroceder en caso de hallar un resultado indeseado. Hay que predecir los posibles pasos a seguir del visitante y prevenir los errores

Un buen consejo es siempre tener en cuenta quiénes serán los usuarios habituales de la página web y así enfocar el diseño en ese camino, tomando en cuenta su experiencia y nivel de conocimiento.

Representación gráfica de usabilidad web

Errores de usabilidad web

Sin importar la cantidad de visitas que puede tener un sitio web o las ganancias que obtenga por determinado servicio o producto, es fácil detectar algunos problemas para el uso del usuario promedio

Algunas de estas fallas de usabilidad web son las siguientes:

::. Login ocultos: Es suficientemente complicado lograr interesar a un usuario para que se registre en una página web, por lo que no tener un acceso visible para usuario y contraseña

::. Links invisibles: La navegación es una importante importante, por lo que no encontrar los enlaces necesarios para movilizarse a través de la página web puede traer problemas importantes.

::. Sobrecarga visual: Muchas veces, más es menos. El “ruido” visual es uno de los problemas comunes que los diseñadores provocan o deben resolver de acuerdo con la necesidad del cliente.

::. Menú desplegable: Ocultar opciones en un menú desplegable ahorra espacio pero complica la navegación de los usuarios, ya que requiere un esfuerzo para fijar la posición del cursor y seleccionar esa opción.

Diseño web líquido o fluido.

El diseño líquido es el que adapta los contenidos al dispositivo. Como parte positiva,

se puede tener cualquier configuración de pantalla. En el aspecto negativo, quien

tenga una resolución de pantalla muy alta puede tener problemas a la hora de leer los

textos porque adopten un largo excesivo. También es importante el hecho de que los

contenidos adquieran unas proporciones o disposición que desvirtúen la percepción de

la imagen global.

"Diseño líquido o fluido" (Responsive Web Design) es la técnica para crear plantillas

que automáticamente se ajustan al tamaño de la pantalla en las que están

siendo navegadas, utilizando la definición de reglas de medios de destino

4.3 Diseño web hibrido.

Se habla de diseño híbrido cuando en una web se combinan áreas con ancho fijo y

otras con ancho variable. El resultado final es realmente una web de diseño líquido

que conserva las proporciones en determinadas áreas.

Los diseños híbridos combinan las tres opciones anteriores y representan la mejor

opción para que nuestros diseños sean compatibles tanto con cualquier resolución

(tamaño) de pantalla como con cualquier tamaño de letra. Al utilizar diseños elásticos y

diseños líquido o fluidos ambas unidades relativas, para las medidas de fuentes y

cajas, cuando aumentamos o disminuimos el tamaño de fuente en el navegador, o el

tamaño de pantalla se redimensiona automáticamente el tamaño de todos los

elementos de la página y se respeta nuestro diseño original.Por tanto, este diseño es

el ideal si pretendemos que nuestra «web» se visualice correctamente en todo tipo de

plataformas y/o dispositivos (teléfonos móviles, celulares, ordenadores portátiles,

ordenadores de sobremesa, tabletas, etc.).

4.4 Diseño web para móviles.

El diseño web móvil se refiere a optimizar una página web para su utilización desde un

dispositivo móvil como smartphones o tablets. El crecimiento exponencial de éstos los

hace un objetivo prioritario en el desarrollo de páginas web.

Actualmente existen dos metodologías para el desarrollo web móvil, una basada en la

creación de una versión específica para móvil y otra que adapta gráficamente la actual

web al entorno del visitante (responsive design o diseño web adaptativo). Optar por

una u otra depende de las características de cada proyecto, las funcionalidades a

desarrollar, la interacción hombre-máquina y las limitaciones de los dispositivos en el

momento del desarrollo marcarán el camino a seguir.

4.5 Patrones creacionales.

Corresponden a patrones de diseño software que solucionan problemas de creación

de instancias. Nos ayudan a encapsular y abstraer dicha creación:

Object Pool (no pertenece a los patrones especificados por GoF): se obtienen

objetos nuevos a través de la clonación. Utilizado cuando el costo de crear una

clase es mayor que el de clonarla. Especialmente con objetos muy complejos.

Se especifica un tipo de objeto a crear y se utiliza una interfaz del prototipo

para crear un nuevo objeto por clonación. El proceso de clonación se inicia

instanciando un tipo de objeto de la clase que queremos clonar.

Abstract Factory (fábrica abstracta): permite trabajar con objetos de distintas

familias de manera que las familias no se mezclen entre sí y haciendo

transparente el tipo de familia concreta que se esté usando. El problema a

solucionar por este patrón es el de crear diferentes familias de objetos, como

por ejemplo la creación de interfaces gráficas de distintos tipos (ventana, menú,

botón, etc.)

Builder (constructor virtual): abstrae el proceso de creación de un objeto

complejo, centralizando dicho proceso en un único punto.

Factory Method (método de fabricación): centraliza en una clase constructora

la creación de objetos de un subtipo de un tipo determinado, ocultando al

usuario la casuística, es decir, la diversidad de casos particulares que se

pueden prever, para elegir el subtipo que crear. Parte del principio de que las

subclases determinan la clase a implementar.

Patrones estructurales

Son los patrones de diseño software que solucionan problemas de composición

(agregación) de clases y objetos:

Adapter o Wrapper (Adaptador o Envoltorio): Adapta una interfaz para que

pueda ser utilizada por una clase que de otro modo no podría utilizarla.

4.6 Patrones de comportamiento.

Se definen como patrones de diseño software que ofrecen soluciones respecto a la

interacción y responsabilidades entre clases y objetos, así como los algoritmos que

encapsulan:

Chain of Responsibility (Cadena de responsabilidad): Permite establecer la

línea que deben llevar los mensajes para que los objetos realicen la tarea

indicada.

Command (Orden): Encapsula una operación en un objeto, permitiendo

ejecutar dicha operación sin necesidad de conocer el contenido de la misma.

Interpreter (Intérprete): Dado un lenguaje, define una gramática para dicho

lenguaje, así como las herramientas necesarias para interpretarlo.

Iterator (Iterador): Permite realizar recorridos sobre objetos compuestos

independientemente de la implementación de estos.

Mediator (Mediador): Define un objeto que coordine la comunicación entre

objetos de distintas clases, pero que funcionan como un conjunto.

Memento (Recuerdo): Permite volver a estados anteriores del sistema.

Observer (Observador): Define una dependencia de uno-a-muchos entre

objetos, de forma que cuando un objeto cambie de estado se notifique y

actualicen automáticamente todos los objetos que dependen de él.

State (Estado): Permite que un objeto modifique su comportamiento cada vez

que cambie su estado interno.

Strategy (Estrategia): Permite disponer de varios métodos para resolver un

problema y elegir cuál utilizar en tiempo de ejecución.

Template Method (Método plantilla): Define en una operación el esqueleto de

un algoritmo, delegando en las subclases algunos de sus pasos, esto permite

que las subclases redefinan ciertos pasos de un algoritmo sin cambiar su

estructura.

Visitor (Visitante): Permite definir nuevas operaciones sobre una jerarquía de

clases sin modificar las clases sobre las que opera.