PATRONES DE DISEÑO WEB

1. UNIDAD 04 PATRONES DE DISEÑO WEB.
4.1 PRINCIPIOS DE USABILIDAD WEB.
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

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

3. ::. 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.
4.2 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, ( @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.
Se tiene que tener en cuenta que la venta de "smartphones", está despegando y
superará muy pronto a la venta de PC (tanto de escritorio como portátiles).
Actualmente basados en las estadísticas de 20 personas que visitan tu sitio web,
por lo menos 1 de ellos lo hace por medio de un dispositivo con pantalla de menos

4. de 3 pulgadas. Esto ha disparado el diseño amigable-móvil en el que se crean
diseños que se ajustan a cada tamaño de pantalla.
En respuesta a esto se tiene el Diseño Liquido o Fluido, no tienen un ancho fijo, y
permiten que cada navegador lo adapte a su tamaño. Usando está técnica
puedes eliminar la necesidad de crear diseños especiales por cada dispositivo.
Permite con un simple código mostrar el contenido en un ilimitado número de
medios.
La técnica de diseño líquido:
1El 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. Ejemplo:
view plainprint?
1. #contenedor {
2. width: 80%;
3. margin: auto;
4. max-width: 1200px;
5. }
Este es un pequeño ejemplo de diseño con un ancho fluido, es una buena técnica
adicionar el max-width, que limitará el máximo ancho permitido, en caso de
encontrar pantallas de una resolución demasiado grande.
2Las imágenes: Un tema a tener en cuenta cuando se pasa de ancho fijo a diseñó
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:
view plainprint?
1. img {
2. max-width: 100%;
3. }
Presenta inconvenientes en Internet Explorer, solución: Imágenes Fluidas en
internet Explorer (texto en inglés)
3. 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

5. 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 funcionalidad:
<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.
4Utilizar CSS Query @media: La característica de "Consulta de medios"
enCSS 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.
view plainprint?
1. #wrapper {
2. width: 80%;
3. margin: auto;
4. max-width: 1200px;
5. min-width: 800px;
6. }
7.
8. @media screen and (max-width: 800px) {
9. #wrapper {
10. width: 90%;
11. min-width: 0;
12. }
13. }

6. 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.
4.4 DISEÑO WEB PARA MÓVILES.
El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés,
Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es
adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para
visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de
dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,...
Además, aún dentro de cada tipo, cada dispositivo tiene sus características
concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de
memoria,... Esta tecnología pretende que con un solo diseño web, tengamos una
visualización adecuada en cualquier dispositivo.
El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a
partir de una serie de artículos en A List Apart,1 una publicación en línea

7. especializada en diseño y desarrollo web, idea que luego extendería en su libro
Responsive Web Design.
Origen
Tanto la idea como el propósito del diseño web adaptable fueron previamente
discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendación
"Mobile Web Best Practices" bajo el subtítulo "One Web".2
Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que
está hecha en el contexto de "One Web", y que por lo tanto engloba no solo la
experiencia de navegación en dispositivos móviles sino también en dispositivos de
mayor resolución de pantalla como dispositivos de sobremesa.3
El concepto de "One Web" hace referencia a la idea de construir una Web para
todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on
Everything).4
Hoy en día, la variedad de dispositivos existentes en el mercado ha provocado que
la información disponible no sea accesible desde todos los dispositivos, o bien es
accesible pero la experiencia de navegación es muy pobre.
Ventajas
El uso de dispositivos móviles está creciendo a un ritmo increíble, dispositivos
como tablets y smartphones han incrementado sus ventas en los últimos años y la
navegación en Internet mediante estos dispositivos es cada vez más común. Ese
es el motivo por el que el diseño web adaptable se ha vuelto tan popular, pues es
una técnica que proporciona una solución web que puede manejar la visualización
web tanto de escritorio como de dispositivos.
Con una sola versión en HTML y CSS se cubren todas las resoluciones de
pantalla, es decir, el sitio web creado estará optimizado para todo tipo de
dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de
usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo
cuando se acceden desde dispositivos móviles.

8. De esta forma se reducen los costos de creación y mantenimiento cuando el
diseño de las pantallas es similar entre dispositivos de distintos tamaños.
También se supone que evita tener que desarrollar aplicaciones ad-hoc para
versiones móviles, o no, por ejemplo, una aplicación específica para iPhone, otra
para móviles Android, etc.,5 aunque hoy en día las webs para móviles todavía no
pueden realizar las mismas funciones que las aplicaciones nativas.
Desde el punto de vista de la optimización de motores de búsqueda, sólo
aparecería una URL en los resultados de búsqueda, con lo cual se ahorran
redirecciones y los fallos que se derivan de éstas. También se evitarían errores al
acceder al sitio web en concreto desde los llamados "social links", es decir, desde
enlaces que los usuarios comparten en medios sociales tales como Facebook,
Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió
(desde qué dispositivo se copió) y desde qué dispositivo se accede.6
Funcionamiento del Diseño Web Adaptable
El Responsive Web Design se hace posible gracias a la introducción de las Media
Queries en las propiedades de los Estilos CSS en su versión número 3. Las media
quieres son una serie de órdenes que se incluyen en la hoja de estilos que indica
al documento HTML cómo debe comportarse en diferentes resoluciones de
pantalla.
Para entenderlo mejor, los diseños de las Páginas Web, al igual que los periódicos
y las revistas, están basados en columnas, entonces con la filosofía del Diseño
Adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para
una Tablet (800x600 px) necesitaría sólo 4, y en el caso de un smartphone cuyo
ancho suele ser entre 320 px y 480 px las columnas usadas serían 3

9. 4.5 PATRONES CREACIONALES.
Patrones creacionales: Resuelven problemas relacionados con la creación de
instancias de objetos. Por ejemplo, el patrón Singleton se encarga de que sólo
pueda existir una instancia de la clase a la que es aplicado.
El patrón de diseño singleton (instancia única) está diseñado para restringir la
creación de objetos pertenecientes a una clase o el valor de un tipo a un único
objeto.
4.6 PATRONES DE COMPORTAMIENTO.
Patrones de comportamiento: Permiten resolver problemas relacionados con el
comportamiento de la aplicación, normalmente en tiempo de ejecución. Por
ejemplo, el patrón Strategy proporciona diferentes métodos (o algoritmos) para
resolver un mismo problema, pudiendo decidir en tiempo de ejecución cuál de
ellos utilizar.
4.7 PATRONES ESTRUCTURALES.
Patrones estructurales: Se centran en problemas relacionados con la forma de
estructurar las clases. Por ejemplo, el patrón Composite permite trabajar con listas
de objetos (u objetos compuestos) como si de un solo objeto se tratase.