Tema: Patrones de Diseño Web Facultad: Ciencias Y Tecnologías. Especialidad: Ingeniería en Sistemas y

Redes Informáticas.

Licenciada: Karla Milagro López.

Asignatura: Ingeniería de software II.

Integrantes: Janio Humberto Cisneros Granados.

Códigos: USIS067712

2015

UNIVERSIDAD GERARDO BARRIOS

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 LÍQUIDO O FLUIDO

Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensión

horizontal de la pantalla de forma automática y sin necesidad de una barra de

desplazamiento horizontal. El diseño se expande al ancho disponible de la pantalla

porque el tamaño de los distintos elementos es un porcentaje del total disponible

(100%) de la pantalla.

El problema surge en pantallas muy grandes como por ejemplo una TV Full HD de

1.920 x 1080 px porque el diseño se desajusta y aparecen grandes espacios en

blanco. Pero también sufren problemas las pantallas con resoluciones inferiores a

1.024 px de ancho (tablets en posición portrait y móviles en posición landscape)

porque las imágenes se miniaturizan y los textos se vuelven ilegibles. Si para

evitar estos problemas se fija un ancho mínimo aparecen las barras de scroll de

desplazamiento horizontal.

Como muestra la imagen, para obviar estos problemas los diseñadores crean

versiones de layouts según la pantalla donde se vaya a visualizar la web: pantalla

de televisión, ordenador de escritorio, tablet, móvil.

Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta

1.980 px

Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para

ordenadores de escritorio con una alta resolución de pantalla (por ejemplo

un iMac)

Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para

ordenadores de escritorio normales

Layout para tablets con un ancho mínimo de 720 px en posición vertical

(portrait) y un máximo de 985 px para tablets en posición horizontal

(landscape)

El principal problema de un diseño líquido es el mantenimiento de diferentes

versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un sitio

de comercial con más de 5.600 referencias vivas en permanente actualización

(alta y baja de productos, versiones de color, tamaño, etc.) es realmente un

suplicio.

Diseño responsive.

Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un

número igual de columnas ya sean pares o impares. Estas columnas pueden ser

también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino

al dispositivo. La hoja de estilos CSS3 define por medio de media queries en qué

pantalla se visualizará la página en función de una serie de parámetros como:

Ancho y alto de la ventana del navegador (width, high)

Orientación del dispositivo (puede ser portrait o landscape, es decir

vertical u horizontal)

Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo

16:9)

Grid (número de columnas que muestra)

Resolución del dispositivo (densidad de píxeles que muestra la pantalla)

Color (número de colores que representa la pantalla)

Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index,

scan) que ayudan a definir con mayor exactitud el dispositivo

En función del ancho de la pantalla del dispositivo los bloques div se ordenan y

jerarquizan, de tal manera que los elementos que estamos viendo en la imagen

superior se verían en un dispositivo móvil en una columna ordenada en la que

todos los elementos tendrían el mismo ancho.

Las ventajas del diseño responsive son:

Con una misma web (un sólo HTML y CSS) se cubren todas las

resoluciones de pantalla

Se reducen los costes de creación y mantenimiento de una web, se acorta

el desarrollo

Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros

layouts (mobile.dominio.com)

Todos los usuarios disfrutan del mismo contenido (suele ser frustrante

obtener versiones light de las webs)

De esta manera el diseño responsive nos proporciona una visualización controlada

de la página, muy similar a la que nos ofrece el diseño de ancho fijo.

DISEÑO HÍBRIDO CON CSS

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

En el caso de realizar un sitio web para ser accedido desde dispositivos móviles o

de pantalla pequeña, además de considerar el patrón de diseño se debe atender a

otros aspectos, como a la disposición de contenidos, la cantidad de éstos, criterios

de accesibilidad (menús, rutas de navegación...), el peso de imágenes y archivos,

etc.

El diseño web líquido generalmente se adaptará mejor a pantallas de tamaño

reducido, si bien en cualquier caso se debe considerar un tamaño mínimo.

TIPOS DE PATRONES

Patrones Creacionales:

Tratan sobre cómo crear instancias de objetos y sobre cómo

hacer los programas más flexibles y generales abstrayendo el

proceso de creación de instancias.

Patrones de Comportamiento:

Son patrones que tratan de formar más específica con aspectos

relacionados con la comunicación entre objetos.

Patrones Estructurales:

Describen cómo las clases y los objetos pueden ser combinados

para formar estructuras mayores.

PATRONES CREACIONALES INMUTABLE

Descripción:

- El patrón singleton se ocupa de diseñar clases que solo permitían la

existencia, el patrón inmutable se encarga de diseñar clases que permiten

crear cualquier número de instancias pero no permite la posterior

modificación de estas instancias.

Elementos que lo Componen:

- El esquema de este patrón consiste en una clase que incorpora atributos

privados, métodos de lectura y métodos que simulan alternar el estado del

objeto pero que en realidad devuelven una nueva instancia de dicho objeto.

Ventajas:

- La principal ventaja del patrón inmutable es que nos asegura

que, una vez que hemos obtenido una referencia a un objeto,

éste no cambiará debido a efectos laterales de las

modificaciones de otros elementos sobre dicho objeto.

- Sin embargo, si cada vez que se hace un cambio a un objeto

este en realidad realiza esos cambios sobre un clon, dejando al

objeto original intacto, se habrá evitado los indeseados efectos

laterales.

Inconvenientes:

- La modificación de su estado penaliza el rendimiento de la aplicación ya

que en realidad implica la creación de un nuevo objeto.

- Esta penalización solo será significativa cuando sean necesarias muchas

modificaciones de los objetos inmutables o cuando la creación de un nuevo

objeto inmutable sea un proceso costoso.

- La solución a este problema consiste en la definición de clases mutables

asociadas a clases inmutables y que puedan utilizarse para realizar las

operaciones que resultan costosas en las clases inmutables.

- La clase mutable es idéntica a la inmutable salvo en tres aspectos:

1- Las operaciones de modificación de los estados no crean nuevas

instancias sino que, efectivamente, varían el estado de la clase.

2- Se incluye un nuevo constructor que permita crear instancias de la clase

mutable a partir de instancias de la clase inmutable.

3- Se incluye un método que permite crear una instancia de la clase

inmutable a partir de una instancia de clase mutable.

PATRONES COMPORTAMIENTO ESTADO (STATE).

Descripción:

- El patrón estado es un patrón de comportamiento que permite a un objeto

modificar su conducta al cambiar su estado interno.

Elementos que lo componen:

- Contexto:

Mantiene una instancia de un estado concreto y puede incluir los criterios

para la transición entre estados, aunque generalmente es más flexible que

sean los propios estados los que definan sus transiciones.

- Estado:

Clase abstracta que encapsula el comportamiento de los estados de

contexto.

- Estados concretos:

Cada subclase implementa el comportamiento asociado con un estado del

contexto.

PATRONES ESTRUCTURALE ADAPTADOR (ADAPTER).

Descripción:

- Los interfaces se utilizan para desacoplar las clases cliente de las clases

que ofrecían ciertos servicios.

- De esta forma se hace independiente la clase cliente de la clase servidora,

sin embargo se fuerza que la clase servidora implementara un determinado

interfaz.

- Para convertir el interfaz de una clase en otro interfaz que es el esperado

por el cliente que usa dicha clase se utiliza el patrón adaptador.

Elementos que lo componen:

- Objetivo (Target): Interfaz que utiliza el cliente

- Cliente (Client): Colabora con los objetos usando la interfaz objetivo.

- Adaptado (Adaptee): Define una interfaz existente que necesita ser

adaptada.

- Adaptador (Adapter): Adapta la interfaz del adaptado a la interfaz objetivo.