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

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.

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

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

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

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

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.

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

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.