Date post: | 08-Apr-2016 |
Category: |
Documents |
Upload: | iris-amaya-luna |
View: | 240 times |
Download: | 0 times |
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
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