PATRONES DE DISEÑO

Los patrones de diseño son la base para la búsqueda de soluciones a problemas comunes en el

desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces.

Un patrón de diseño resulta ser una solución a un problema de diseño. Para que una solución sea

considerada un patrón debe poseer ciertas características. Una de ellas es que debe haber

comprobado su efectividad resolviendo problemas similares en ocasiones anteriores. Otra es que

debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en

distintas circunstancias.

Un patrón de diseño puede considerarse como un documento que define una estructura de clases

que aborda una situación particular. Los patrones de diseño se dividen en tres grupos principales:

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.

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

::. Pop-ups: Prácticamente todos los navegadores tienen bloqueadores de pop-ups, por lo que las

ventanas emergentes han pasado a ser una molestia y no son la mejor manera de presentar

contenido.

::. Links invisibles: La navegación es una 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.

"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 definidas dentro de las

nuevas características del CSS3.

El ancho de la plantilla: Lo más importante es conseguir un ancho flexible, es el factor

que entorpece muchos de los diseños cuando se ven en las pantallas más pequeñas. Crear

contenedores que se extiendan o se recojan en las diferentes resoluciones. No hay un

truco, solo es cambiar la forma de crear las columnas de tu hoja de estilo.

Las imágenes: Un tema a tener en cuenta cuando se pasa de ancho fijo a diseño

fluido, son las imágenes en el HTML (los elementos <img>). Un archivo de imagen, en su

mayor parte es un archivo de tamaño fijo que no se redimensiona, esto puede dar errores

en la presentación del diseño con imágenes de gran tamaño que se desbordan por la

ventana del navegador, la solución es muy simple, solo debemos adicionar las siguientes

líneas en la hoja de estilo.

Eliminar el zoom en los dispositivos móviles: Los dispositivos celulares o tablas utilizan

una función de "zoom" para mostrar sitios web muy grandes, en escala en sus pequeñas

pantallas, esto es bueno en la mayoría de casos, pero para nuestra técnica no es

funcional. Adicionando un meta tag "viewport" en el header del documento eliminamos

esta:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-

scale=1.0"/>

Solo debemos deshabilitar esta opción cuando estemos seguros que nuestro diseño se

ajusta y permite una navegación adecuada, de otro modo solo vamos a lograr dificultarle

las cosas.

Utilizar CSS Query @media: La característica de "Consulta de medios" en CSS permite

aplicar cambios de diseños basados en el tamaño de visualización y capacidad del

dispositivo en el que se está mostrando el contenido. Tiene respaldo en la mayoría de

navegadores móviles.

Diseño Web Híbrido:

La maquetación de una página web utilizando hojas de estilo en cascada (css) puede hacerse

mediante diseños híbridos, es decir, combinando las diferentes opciones de maquetación con css:

- Diseños de ancho fijo (utilizan píxeles).

- Diseños de ancho variable, llamados diseños «líquidos» o «fluidos» (utilizan porcentajes).

- Diseños elásticos (utilizan «em»).

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 «em» y «porcentajes», 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.).

Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se expresará en porcentajes (%)

para que se adapte al tamaño de la ventana del navegador y la otra se expresará en «em» para

que se adapte al tamaño del texto.

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 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.

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.

Bridge (Puente): Desacopla una abstracción de su implementación.

Composite (Objeto compuesto): Permite tratar objetos compuestos como si de uno simple se

tratase.

Decorator (Decorador): Añade funcionalidad a una clase dinámicamente.

Facade (Fachada): Provee de una interfaz unificada simple para acceder a una interfaz o grupo

de interfaces de un subsistema.

Flyweight (Peso ligero): Reduce la redundancia cuando gran cantidad de objetos poseen

idéntica información.

Proxy: Mantiene un representante de un objeto.

Módulo: Agrupa varios elementos relacionados, como clases, singletons, y métodos, utilizados

globalmente, en una entidad única.