Universidad Gerardo Barrios Centro Regional De Usulután

Facultad De Ciencia Y Tecnología

Asignatura:

Ingeniería De Software II

Docente:

Lic. Carla López

Tema:

Patrones De Diseño Web

Alumna:

Iris Yesenia Amaya Luna

Código:

Usts064414

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.

Los principales conceptos de la usabilidad web:

1-Visibilidad: Es importante que el usuario pueda reconocer los diferentes

elementos de manera sencilla, sin mayor esfuerzo.

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

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

1.- No poner atención a los estándares

Los estándares han sido creados para que la gente los siga. Si bien es cierto que la

creatividad muchas veces significa salirse de lo establecido, también es cierto que si

queremos hacer un sitio fácilmente usable tenemos que considerar que la mayoría de las

personas lo entiendan fácilmente. La mejor manera de hacer esto: seguir estándares.

Algunos ejemplos de estándares que es muy conveniente seguir dentro de nuestros

desarrollos:

La mirada de las personas va de izquierda a derecha, de arriba hacia abajo. Pon tu logo e

información importante siguiendo esa orientación.

Las ligas debe verse "clickeables". Las palabras subrayadas y de otro color señalan a las

personas la presencia de una liga que se puede seguir.

La iconografía debe ser totalmente ilustrativa o si no mejor no la utilices. Si se va a

eliminar un elemento, una "X" o un bote de basura pueden ser convenientes, más no el

dibujo de una escopeta (aunque puede ser gracioso el uso de ese tipo de iconos en tu

desarrollo, la gente no lo entenderá bien)

El menú de tu sitio debe ser bien distinguible del otro contenido. Botones o ligas de menú

del mismo tamaño y escondido en una columna lateral no serán fáciles de distinguir.

2.- Formas de registro muy largas

Si vas a requerir que las personas se registren en tu sitio para poder acceder, solicita la

menor cantidad de información posible. A menos que las personas tengan forzosamente

que registrarse en tu sitio (por ejemplo por un requerimiento gubernamental o de

trabajo), no lo harán si el formato de registro es tan largo que les da flojera. Hay que

recordar que uno de los aspectos más importantes de la usabilidad es desarrollar para que

la gente piense y trabaje menos. Si pretendes hacerlos trabajar mucho, estás perdido.

3.- No tener un mecanismo de búsqueda eficiente (o no tener ningún mecanismo de

búsqueda)

Entre más extenso sea tu sitio y/o la información contenida en él, más crucial será ofrecer

a tus usuarios mecanismos de búsqueda eficientes para encontrar la información que

desean. Es extremadamente frustrante buscar cierta información en un sitio web y toparse

con uno de los siguientes problemas:

El sitio web no cuenta con un buscador

El sitio web cuenta con un buscador que no encuentra nada

El sitio web cuenta con un buscador que encuentra demasiados resultados (pero ninguno

parece estar relacionado realmente con lo que estamos buscando)

Hay que evitar esto a toda costa. Recuerda el éxito de Google, con unas pocas frases clave

podemos obtener resultados por lo general completos y precisos. A menos que tengas un

sitio realmente masivo tu algoritmo de búsqueda no tiene que ser ni cercanamente tan

complejo como el de Google, pero si es necesario poner atención al funcionamiento de

nuestro buscador para mejorar la experiencia de nuestros usuarios.

4.- Navegación difícil

No tienes un índice. No tienes un menú claro. Se requieren más de 3 – 4 clicks para llegar a

cierto contenido en tu sitio. Tu información no está correctamente agrupada. No posees

ligas internas entre tu información relacionada. Si cualquiera de estas afirmaciones es

cierta, tu sistema de navegación es deficiente. Es importante arreglar esto ya que es la base

de la usabilidad de cualquier desarrollo web y si no le ponemos atención, los usuarios se

irán. Así de simple.

5.- Títulos de las páginas

¿En dónde estoy? Esta es la pregunta que va a surgir si los títulos de tus páginas no están

bien definidos. Un error muy común en los grandes sitios es que todos sus títulos

comienzan por una larga cadena de texto que empieza por la empresa, luego el subsitio,

luego la categoría y hasta el último el tema de la página que estamos viendo (y eso si es

que incluyen el tema). Si los títulos de está página estuvieran escritos así, el título de este

artículo sería algo como "Hospedaje web Sitio Oficial – hospedaje-web.com – Usabilidad –

Errores comunes…..". Esto es generalmente un error. Es conveniente comenzar nuestros

títulos con la información más relevante: dónde estoy, de qué trata esta página, etc. Esto

cumplirá también otras funciones: nos ayudará con el posicionamiento de nuestro

contenido en buscadores y le ayudará al usuario a identificar el contenido de las ventanas

cuando las tenga minimizadas.

6.- Inconsistencias

Otra de las claves más elementales de la usabilidad en el desarrollo web es la consistencia.

Debemos asegurarnos de dos cosas:

Todos nuestros botones, funciones e información persistentes (que se mantienen a lo

largo de nuestro sitio) funcionan igual en todas partes.

Que nuestras secciones persistentes sean en realidad persistentes, es decir, que se

mantengan visibles en el mismo lugar en todas las pantallas, salvo casos excepcionales

donde el sentido común indique lo contrario.

Es importante que nuestros desarrollos sean predecibles. De esta forma los usuarios los

comprenderán y hasta memorizarán, lo que les facilitará su uso.

7.- No brindar un mecanismo de contacto y retroalimentación

Es terrible para los usuarios no brindarles un mecanismo claro de contacto. Poner una

forma de contacto no debe sustituir preferentemente a ofrecer unas cuantas direcciones

de e-mail de contacto ya que hay pocas cosas más frustrantes que llenar un formulario de

contacto en una página web y nunca recibir una respuesta. Por esto, debemos brindar

mecanismos efectivos para que los mensajes que nos envíen a través de nuestro sitio web

los lea un ser humano y hay que hacer lo posible por responderles a todos y cada uno de

ellos.

8.- No brindar la posibilidad de navegar con la tecla "Tab"

Es muy útil para los sitios y aplicaciones que se utilizan frecuentemente y aún más para los

que tienen muchos formatos de llenado, la navegación a través de la tecla "Tab". Para

determinar un correcto orden de navegación entre los elementos activos (campos, ligas,

botones) debemos emplear la etiqueta "tabindex" de HTML que nos permite determinar el

orden en que se irán recorriendo los elementos al navegarlos por medio de la tecla Tab. Si

no hacemos esto le quitamos la posibilidad a los usuarios más frecuentes de nuestro

desarrollo de agilizar su trabajo y su navegación.

9.- Áreas activas muy pequeñas (botones y ligas)

Otro grave error de usabilidad que se comete muy frecuentemente es poner áreas activas

(botones y ligas) demasiado pequeñas. Esto genera constantemente clicks erróneos a ligas

contiguas o incluso si las ligas son verdaderamente muy pequeñas, la imposibilidad de

navegar correctamente el sitio o aplicación. Hay que probar la facilidad con la que se le

puede dar click a todas nuestras áreas activas para mejorar tanto el tamaño de las mismas

como el espaciamiento que existe entre ellas.

10.- No mantener los campos de un formato cuando hay un error en el llenado

Este tal vez es de los errores de usabilidad más molestos y comunes que existen en los

desarrollos web de la actualidad y consiste en que cuando alguien está llenando un

formato y tiene un error, el sistema le arroja el error pero vuelve a desplegar los campos

del formato vacíos, es decir, no almacenó la información que introdujimos antes del error.

Esto es de lo más frustrante que puede haber al usar un sitio web y más aún si es un

formato muy largo o que se tiene que llenar con mucha frecuencia. Un error de esta

naturaleza puede provocar que un usuario simplemente deje de utilizar nuestro

desarrollo.

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 (scroll). El diseño se expande al ancho disponible de la

pantalla porque el tamaño de los distintos elementos (div) 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 posicion 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 site de ecommerce 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

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 responsivo 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 responsivo nos proporciona una visualización controlada de

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

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.

Diseños de ancho fijo

Diseños líquidos o fluidos

Diseños elásticos

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 diseños elásticos y diseños líquido

o fluidos 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.).

El diseño web móvil se refiere a optimizar una página web para su utilización desde un

dispositivo móvil como smartphones o tablets. El crecimiento exponencial de éstos los

hacen un objetivo prioritario en el desarrollo de páginas web entender las fortalezas y

debilidades de los dispositivos móviles es clave para el éxito del diseño web móvil.

Actualmente existen dos metodologías para el desarrollo web móvil, una basada en la

creación de una versión específica para móvil y otra que adapta gráficamente la actual web

al entorno del visitante (responsive design o diseño web adaptativo). Le ayudamos a

tomar la decisión correcta para su proyecto y desarrollar su web para mejorar la

experiencia de usuario en cualquier ámbito de navegación, manteniendo la consistencia de

contenidos.

Algunos datos de interés que nos pueden motivar para aprender a diseñar webs

para dispositivos móviles.

1.- Características del uso de la Internet Móvil

El uso de Internet en dispositivos móviles es diferente del uso que se realiza en

ordenadores personales.

2.- Usabilidad en la web móvil

Reglas de usabilidad y consejos fundamentales para mejorar la experiencia de usuario en

las webs optimizadas para dispositivos móviles.

3.- Usabilidad para formularios en la web móvil

Consejos importantes para diseñar formularios más usables en sitios web optimizados

para dispositivos móviles.

4.- Documentos HTML optimizados para móviles

Cuáles son las etiquetas HTML que se utilizan en páginas web que están optimizadas para

dispositivos móviles.

5.- Etiqueta meta Viewport

El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite

configurar cómo debe interpretar una página el navegador web para móviles.

Los patrones de diseño creacionales se centran en resolver problemas acerca de cómo

crear instancias de las clases de nuestra aplicación. A continuación nos

centraremos en cada uno de ellos.

Fábrica Abstracta resuelve el problema de crear familias de objetos. Veamos un ejemplo

típico de este patrón:

Imaginemos que estamos trabajando con Interfaces Gráficas de Usuario (GUI). Pensemos

que, en nuestro programa, tenemos las clases Ventana y Boton. Pongamos, por ejemplo,

que tenemos 2 interfaces diferentes: una con colores claros y otra con colores oscuros.

Esto nos llevaría a tener 4 clases:

VentanaClara

VentanaOscura

BotonClaro

BotonOscuro

Cuando el usuario decida trabajar con colores claros, se deben crear instancias

de VentanaClara y BotonClaro. Sin embargo, si el usuario decide utilizar la interfaz de colores oscuros, deberíamos crear instancias de VentanaOscura y BotonOscuro. La

forma más básica de hacerlo sería de esta manera:

Código :

// A la hora de seleccionar la interfaz

var GUI:String = "clara"; // u "oscura";

// A la hora de crear un botón

if(GUI == "clara"){

new BotonClaro();

}else if(GUI == "oscura"){

new BotonOscuro();

}

// A la hora de crear una ventana

if(GUI == "clara"){

new VentanaClara();

}else if(GUI == "oscura"){

new VentanaOscura();

}

Esto implicaría realizar una comprobación de la interfaz seleccionada cada vez que se

quiera crear una Ventana o un Boton.

La mejor opción en este caso sería utilizar el patrón Abstract Factory.

En este patrón se crean ciertas clases adicionales llamadas fábricas. Estas clases son las

encargadas de crear los diferentes tipos de ventanas y botones. Veamos un ejemplo de su

estructura:

Identifiquemos cada clase del diagrama con las clases de nuestro ejemplo:

Cliente: Parte del programa que utilizará las fábricas y productos. Podría ser el

archivo .fla principal, por ejemplo.

IProductoA: Interfaz que define un ejemplo de producto. Se correspondería con la

clase Ventana de nuestro ejemplo.

ProductoA1 y ProductoA2: Los diferentes tipos de ese producto. Se corresponderían con

las clases Ventana Clara y Ventana Oscura.

IProductoB: Interfaz que define otro ejemplo de producto. Se correspondería con la

clase Boton de nuestro ejemplo.

ProductoB1 y ProductoB2: Los diferentes tipos de ese producto. Se corresponderían con

la clases BotonClaro y BotonOscuro.

IFabrica: Interfaz que define las funciones de creación de productos. En nuestro ejemplo

podría llamarse InterfazGrafica y definiría las

funcionescrearVentana():Ventana y crearBoton():Boton.

Fabrica1 y Fabrica2: Clases encargadas de crear los productos. En nuestro ejemplo,

serían InterfazClara (que crearía instancias de VentanaClara yBotonClaro)

e InterfazOscura (que crearía instancias de VentanaOscura y BotonOscuro).

Cabe señalar que podría haber más tipos de productos (Ventana, Boton, Icono, etc.) y

más familias de estos (InterfazClara, InterfazOscura, InterfazAzul,InterfazRoja, etc.).

Una vez utilizado el patrón, el código anterior quedaría así:

Código :

// A la hora de seleccionar la interfaz

var GUI:InterfazGrafica = new InterfazClara(); // o new InterfazOscura();

// A la hora de crear un botón

GUI.crearBoton();

// A la hora de crear una ventana

GUI.crearVentana();

Según el tipo de InterfazGrafica instanciada, se crearán ventanas/botones de un tipo u

otro dinámicamente, sin necesidad de comprobar a mano qué interfaz gráfica se está

utilizando.

El patrón Builder o Constructor se utiliza cuando queremos crear un producto que tiene

diferentes partes. El siguiente ejemplo, basado en este otro, lo ilustra mejor:

Imaginemos la cocina de una pizzería donde se hacen pizzas. Las pizzas constan de varias

partes (masa, salsa y relleno), y podríamos tener 2 cocineros, cada uno especialista en un

tipo de pizza. Esto nos llevaría a tener 5 clases:

Cocina

Pizza

Cocinero

CocineroHawai

CocineroPicante

En una situación como esta el patrón Builder nos puede ayudar. Veamos un ejemplo de su

estructura:

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.

Adapta una interfaz para que pueda ser utilizada por una clase que de otro modo

no podría utilizarla.

Motivación

Necesitamos reutilizar clases ajenas para nuestro sistema, pero aunque la

funcionalidad de estas clases es la que deseamos, la interfaz no es compatible. Si no

podemos o no queremos modificar las clases a reutilizar, necesitamos hacerlas

compatibles con nuestro sistema.

Aplicabilidad

Se quiere utilizar una clase que llame a un método a través de una interface, pero

quieres utilizarlo con una clase que no implementa ese interface. Modificar esa

clase que implementa el interface no es una opción por un par de razones:

1. No tienes el código fuente de la clase.

2. La clase es una clase de propósito general, y es inapropiado para ella

implementar un interface par un propósito específico.

Se quiere determinar dinámicamente que métodos de otros objetos llama un

objeto.

Se quiere realizarlo sin que el objeto llamado tenga conocimientos de la otra clase

de objetos.

Estructura