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.
Objetivos de los patrones Los patrones de diseño pretenden:
Proporcionar catálogos de elementos reusables en el diseño de sistemas software.
Evitar la reiteración en la búsqueda de soluciones a problemas ya conocidos y solucionados anteriormente.
Formalizar un vocabulario común entre diseñadores.
Estandarizar el modo en que se realiza el diseño.
Facilitar el aprendizaje de las nuevas generaciones de diseñadores condensando conocimiento ya existente.
Asimismo, no pretenden:
Imponer ciertas alternativas de diseño frente a otras.
Eliminar la creatividad inherente al proceso de diseño.
No es obligatorio utilizar los patrones, solo es aconsejable en el caso de tener el mismo problema o similar que soluciona el patrón, siempre teniendo en cuenta que en un caso particular puede no ser aplicable. "Abusar o forzar el uso de los patrones puede ser un error".
La usabilidad web se centra en la necesidad del usuario de tener accesibilidad web, ubicación y navegación dentro de una página web. Que todo sea claro y estructurado para no complicar al visitante y tener el riesgo de perderlo en pocos segundos.
El diseñador web es un personaje clave en la creación del sitio web, ya que no debe actuar no con la estética o el gusto subjetivo como prioridades, sino más bien pensar en el usuario.
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 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.
Liquido 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, ( @media)
. En el pasado el diseño de la interfaz se basaba en resoluciones aproximadas de 960 pixeles, y esto funcionaba porque un 99% de los usuarios podían adaptarse y leer fácilmente esta resolución, independientemente de la máquina, el navegador, o el sistema operativo que estaban utilizando. Los tiempos cambiaron y cada vez son más los usuarios que utilizan dispositivos móviles para navegar. Ante esto las empresas empezaron a diseñar dos aplicativos, para diferentes tipos de dispositivos, una versión full y una versión más liviana para dispositivos móviles que intentaban cubrir todo el contenido de la versión original. Está técnica tiene ciertas desventajas porque exige un mayor esfuerzo, la sensación de no tener todo en la versión móvil y la creciente diversidad de modelos con una igual cantidad de tamaños.
Diseño Hibrido 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.
Diseño Web para móviles Cuando empiezas en el mundo del diseño web, tarde o temprano te encontrarás con la necesidad de adaptar tus páginas web a los dispositivos móviles. Actualmente cuando el número de usuarios que navegan por internet a través de su smartphone ha crecido considerablemente respecto hace unos pocos años, es muy posible que un cliente te pida adaptar su web para las pantallas móviles. Esas capas de contenido e imágenes que diseñaste para tu última web y que desde el navegador de tu ordenador se ve a las mil maravillas, se descuadran o carecen de sentido en una pantalla de 320 pixeles.
Media Queries Las medias quieres incluidas en CSS3, te permiten filtrar estilos según rangos de resolución de pantalla en pixeles, pudiendo utilizar una media query para los estilos específicos de tu web en la versión móvil.
Utilizar medidas de tamaño relativas Cuando colocas una imagen o cualquier otro elemento puede ser tentador usar una medida en pixeles. Estas visualizando la web en tu navegador de escritorio y defines un imagen con una anchura de 700px, se ve perfectamente, pero puedes no ser consciente de que con ese ancho la imagen se descuadra en la versión adaptada para móviles de tu web, debido al menor ancho de pantalla. Siempre que te sea posible, utiliza una medida relativa, en vez de la propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la imagen utilizará para desplegarse el 50% del espacio disponible dentro de la capa en que se encuentre, reduciéndose o adaptándose el tamaño de la imagen automáticamente según el tamaño de la pantalla en la que se visualice. Es una de las técnicas a seguir dentro de lo que se conoce como responsive design. Otra medida útil para definir el ancho y el alto es em, pues es proporcional al tamaño de la fuente tipográfica que ve el usuario.
Patrones Creacionales En este caso, nos vamos a concentrar en los patrones creacionales, estos patrones buscan en cierta forma "despreocupar" al sistema de cómo sus objetos son creados o compuestos. Los patrones que iremos viendo y desarrollando las próximas semanas son: o
o o
o o
Abstract Factory, permite trabajar con objetos de diferentes familias de manera que no se mezclen entre sí. De esa manera se consigue la el tipo de familia que se esté utilizando sea transparente. Builder, abstrae el proceso de creación de los objetos complejos, centralizándolo en punto. Factory Method, centraliza en una clase constructora la creación de objetos de un tipo determinado. Ocultando al invocarte la necesidad de indicar un tipo u otro. Prototype, crea un objeto a partir de la clonación de un objeto ya existente. Singleton, garantiza que solo exista una instancia de un objeto y que la forma de acceder a dicha instancia sea general.
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.