UNIVERSIDAD CAPITAN GENERAL

GERARDO BARRIOS

FACULTAD DE CIENCIA Y TECNOLOGIA

ASIGNATURA

Ingeniería de software 2

CICLO III

DOCENTE

Carla milagros López

TRABAJO

Patrones de Diseño Web

ALUMNO:

Amalia Jassmin Quinteros Alemán usts030714

Principios básicos de la usabilidad web

Hablamos de usabilidad web -concepto clave para diseñadores- al referirnos a facilidad de acceso, ubicación y navegación

Cómo diseñar una página web es uno de los aspectos más importantes de un sitio web y las técnicas para que pueda ser entendible y sencillo de explorar por parte del usuario resultan determinantes. 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 consejos 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.

Diferencias entre diseño líquido y

diseño responsive

Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando

analizamos las métricas de nuestros clientes del sector de la hostelería nos

encuentramos (mayo 2012) que aproximadamente el 40% de las visitas a sus

webs se realizan a través de teléfonos móviles. En clientes más tradicionales

observamos (octubre 2012) incrementos mensuales del 19% en el acceso a su

web con dispositivos móviles.

En España el 56% de los teléfonos móviles son smartphones (somos el

segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno de

los primeros países del mundo en donde habrá más accesos a internet desde

dispositivos móviles (smartphones y tablets) que desde ordenadores de

escritorio. Adaptar nuestras webs a las pantallas de los dispositivos móviles

resulta ya más que necesario.

Diseño líquido o fluido (liquid or fluid layout). 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 (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-

índex, 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 líquido-elástico: una buena opción olvidada

De todas las opciones que tenemos a la hora de diseñar una web, la menos utilizada con diferencia es la que da título al post y sin embargo, es una de las opciones más accesibles por su adaptabilidad a diferentes resoluciones de pantalla.

Las causas de que este tipo de diseños se vean poco son varias:

Desconocimiento. Si no se ve a menudo no existe y por lo tanto los desarrolladores no lo tienen

en cuenta como una opción a elegir.

Falta de soporte por versiones antiguas de Internet Explorer.

La técnica no es en absoluto nueva, pero cuando surgió sólo podía funcionar correctamente en

algunos navegadores.

Dificultad. En este tipo de diseños es necesario usar porcentajes como unidad de medida, que

no suelen ser tan exactos como los píxeles.

Hoy en día, con Internet Explorer 8 superando en porcentaje de uso las versiones anteriores de este navegador, es el momento de empezar a usar este tipo de diseño con la seguridad de que será beneficioso para la mayoría de usuarios y por lo menos, no perjudicial para los que todavía usan versiones antiguas de Internet Explorer.

Explico a continuación los tipos de diseño o layout más utilizados y las ventajas e inconvenientes de cada uno.

Diseño fijo

Son aquellos en los que las medidas de los distintos bloques de la página

se definen en píxeles. Son los más fáciles de llevar a cabo y los que obtienen

unos resultados más fieles a los diseños.

Las Pautas para la Accesibilidad Web del W3C recomiendan utilizar unidades

de medida relativas como los porcentajes o las emes, ya que algunos

navegadores como Internet Explorer 6 y versiones antiguas de Firefox o

Google Chrome, no pueden escalar los elementos de la página (hacer

zoom) cuando se utilizan píxeles. Por otra parte, cuando los tamaños de

fuente se definen en píxeles, en Internet Explorer 6 no se puede aumentar o

disminuir el tamaño de fuente a voluntad, lo que supone una dificultad para

personas con problemas de visión.

A estos inconvenientes hay que sumar que un diseño fijo cuya anchura supere

la resolución de pantalla del usuario, no se verá completo en la ventana del

navegador y aparecerán barras de scroll horizontales.

Hoy en día se usan mayoritariamente resoluciones de 1024 píxeles o mayores,

por lo que el típico dilema de diseñar para 800 x 600 o mayor casi ha pasado a

la historia, sin embargo, nunca podemos tener la certeza de que el usuario

tenga la ventana maximizada o paneles que limiten la anchura de página.

Navegador con paneles Diseño elástico

Los diseños elásticos son aquellos en los que las medidas de los bloques se definen en emes, de manera que al aumentar el tamaño de fuente, aumenta también la anchura de estos bloques, es decir, aumentar el tamaño de fuente provoca un efecto zoom sobre toda la página.

Las emes son una unidad relativa, y por lo tanto este tipo de diseños cumple la pauta anteriormente mencionada de no utilizar unidades absolutas, sin embargo en la práctica se comportan exactamente igual que los diseños fijos y tampoco están libres de problemas, aunque son una de las técnicas recomendadas para cumplir con las Pautas para la Accesibilidad Web.

La principal ventaja que tienen frente a los diseños fijos es que sí permiten aumentar el tamaño de texto y hacer zoom de todos los elementos de la página en

navegadores antiguos. Los navegadores modernos pueden hacer zoom de página en cualquier tipo de diseño.

Diseño líquido En los diseños líquidos la anchura de bloques se define en porcentajes, de manera que se adaptan a la resolución de pantalla del usuario ocupando por completo la anchura de la ventana del navegador. Como ejemplo tenemos la Wikipedia.

Los diseños líquidos funcionan bien en pantallas pequeñas, sin embargo en pantallas grandes dan lugar a líneas de texto muy largas que dificultan su lectura. La cantidad máxima recomendada de caracteres por línea es de 80. A mayor longitud, resulta difícil leer en pantalla sin perderse entre líneas.

Diseño híbrido líquido-elástico

Estos diseños tienen las ventajas de los elásticos (anchos de línea óptima y escalable en navegadores antiguos) y los líquidos (adaptables a resoluciones pequeñas).

La anchura de los bloques de contenido se define en emes y se añade la propiedad Max-width de CSS que permite especificar la anchura máxima que podrá tener un bloque.

El resultado es un diseño aparentemente fijo, que se adapta a resoluciones menores y mayores sin que aparezcan barras horizontales de desplazamiento en el navegador.

Como ejemplo tenemos nuestro sitio web.

Diseño aparentemente fijo a una resolución de 1280 x 1024

Tamaño de texto aumentado en una ventana de 1024 píxeles de ancho. La anchura de los bloques se adapta a

la ventana del navegador sin que aparezcan barras de scroll horizontal.

Diseño web para móviles,

consejos útiles

Cuando empiezas en el mundo del diseño web, tarde o temprano te encontrarás con la necesidad de adaptar tus páginas web a los dispositivos móviles. Actualmente cuando el número de usuarios que navegan por internet a través de su Smartphone ha crecido considerablemente respecto hace unos pocos años, es muy posible que un cliente te pida adaptar su web para las pantallas móviles.

Esas capas de contenido e imágenes que diseñaste para tu última web y que desde el navegador de tu ordenador se ve a las mil maravillas, se descuadran o carecen de sentido en una pantalla de 320 pixeles. Toca darle un repaso a tus hojas de estilo, a continuación algunos consejos y trucos útiles para subsanar esos posibles problemas y adaptar el diseño de tu web, manos a la obra:

Media Queries

Las media queries incluidas en CSS3, te permiten filtrar estilos según rangos de resolución de pantalla en pixeles, pudiendo utilizar una media query para los estilos específicos de tu web en la versión móvil. Por ejemplo, dentro de un archivo.css podrías tener:

@media screen and (max-width:490px) {

/*Estilos CSS que adaptan el diseño de tu web a dispositivos con pantallas de

un máximo

de 490 pixeles de ancho */

}

De esta forma, estos estilos serian aplicados exclusivamente a los dispositivos móviles sin la necesidad de cargar una hoja de estilo adicional.

También podría utilizarse una media query para cargar un archivo css solo para determinadas resoluciones, basta con añadir entre las etiquetas <head></head>:

<link rel="stylesheet" type="text/css" media="only screen and (min-device-

width: 300px)

and (max-device-width: 480px)" href="movil.css" />

En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo que se conecta a la web tiene una resolución a lo ancho de entre 300 y 480

Utilizar medidas de tamaño relativas

Cuando colocas una imagen o cualquier otro elemento puede ser tentador usar una medida en pixeles. Estas visualizando la web en tu navegador de escritorio y defines un imagen con una anchura de 700px, se ve perfectamente, pero puedes no ser consciente de que con ese ancho la imagen se descuadra en la versión adaptada para móviles de tu web, debido al menor ancho de pantalla.

Siempre que te sea posible, utiliza una medida relativa, en vez de la propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la imagen utilizará para desplegarse el 50% del espacio disponible dentro de la capa en que se encuentre, reduciéndose o adaptándose el tamaño de la imagen automáticamente según el tamaño de la pantalla en la que se visualice. Es una de las técnicas a seguir dentro de lo que se conoce como responsive design. Otra medida útil para definir el ancho y el alto es em, pues es proporcional al tamaño de la fuente tipográfica que ve el usuario.

Herramientas para visualizar tu web en distintos dispositivos

Para poder validar y visualizar el diseño de tu

web adaptado para distintas resoluciones de pantalla existen herramientas como screenfly. Introduciendo la URL de tu página podrás comprobar cómo se ve tu web en multitud de dispositivos, distintas marcas de smartphones y tablets. Junto con el siempre imprescindibleFirebug podrás editar los estilos y comprobar en vivo cómo va quedando el diseño de la versión móvil de tu sitio web. Llevo un tiempo utilizando screenfly y el resultado ha sido satisfactorio, pero existen otras alternativas interesantes como responsinator

¿Qué es un Patrón de Diseño?

Esta fue la primera pregunta que me hice cuando comencé a investigar sobre este tema. Al

principio no tenía mucha idea de por dónde comenzar, por lo que mi primera reacción fue

realizar una búsqueda en Internet y obtener de esta manera alguna base sobre la cual

apoyarme. La definición que más me gustó fue la siguiente:

“Los patrones de diseño son el esqueleto de las soluciones a problemas comunes en el

desarrollo de software.”

En otras palabras, brindan una solución ya probada y documentada a problemas de desarrollo

de software que están sujetos a contextos similares. Debemos tener presente los siguientes

elementos de un patrón: su nombre, el problema (cuando aplicar un patrón), la solución

(descripción abstracta del problema) y las consecuencias (costos y beneficios).

Grande fue mi sorpresa al averiguar que existen varios patrones de diseño popularmente

conocidos, los cuales se clasifican como se muestra a continuación:

Patrones Creacionales: Inicialización y configuración de objetos.

Patrones Estructurales: Separan la interfaz de la implementación. Se ocupan de cómo las

clases y objetos se agrupan, para formar estructuras más grandes.

Patrones de Comportamiento: Más que describir objetos o clases, describen la

comunicación entre ellos.

Veamos un poco en qué consisten los distintos tipos de patrones, cuáles son sus fines y qué

beneficios nos aportan.

Patrones Creacionales

Fábrica Abstracta ( Abstract Factory ) El problema a solucionar por este patrón es el de crear diferentes familias de objetos, como por

ejemplo la creación de interfaces gráficas de distintos tipos (ventana, menú, botón, etc.).

Método de Fabricación ( Factory Method ) Parte del principio de que las subclases determinan la clase a implementar.

Public class ConcreteCreator extends Creator

{

Protected Product Factory Method

()

{

Return new Concrete Product();

}

}

Public interface Product{}

public class ConcreteProduct implements Product{}

public class Client

{

public static void main(String args[])

{

Creator UnCreator;

UnCreator = new ConcreteCreator();

UnCreator.AnOperations();

}

}

Prototipado ( Prototype)

Se basa en la clonación de ejemplares copiándolos de un prototipo.

Singleton

Restringe la instanciación de una clase o valor de un tipo a un solo objeto.

Public sealed class Singleton

{

private static volatile Singleton instance;

private static object syncRoot = new Object();

private Singleton()

{

System.Windows.Forms.MessageBox.Show ("Nuevo

Singleton");

}

public static Singleton GetInstance

{

get

{

If (instance == null)

{

lock(syncRoot)

{

If (instance == null)

instance = new Singleton();

}

}

return instance;

}

}

}

MVC (Model View Controler)

Este patrón plantea la separación del problema en tres capas: la capa model, que representa la

realidad; la capa controler , que conoce los métodos y atributos del modelo, recibe y realiza lo

que el usuario quiere hacer; y la capa vista, que muestra un aspecto del modelo y es utilizada

por la capa anterior para interaccionar con el usuario

Patrones Estructurales Adaptador (Adapter): Convierte una interfaz en otra.

Puente (Bridge): Desacopla una abstracción de su implementación permitiendo

modificarlas independientemente.

Objeto Compuesto (Composite): Utilizado para construir objetos complejos a partir de

otros más simples, utilizando para ello la composición recursiva y una estructura de

árbol.

Envoltorio (Decorator): Permite añadir dinámicamente funcionalidad a una clase

existente, evitando heredar sucesivas clases para incorporar la nueva funcionalidad.

Fachada (Facade): Permite simplificar la interfaz para un subsistema.

Peso Ligero (Flyweight): Elimina la redundancia o la reduce cuando tenemos gran

cantidad de objetos con información idéntica.

Apoderado (Proxy): Un objeto se aproxima a otro

Patrones de Comportamiento Cadena de responsabilidad (Chain of responsibility): La base es permitir que más de un

objeto tenga la posibilidad de atender una petición.

Orden (Command): Encapsula una petición como un objeto dando la posibilidad de

“deshacer” la petición.

Intérprete (Interpreter): Intérprete de lenguaje para una gramática simple y sencilla.

Iterador (Iterator): Define una interfaz que declara los métodos necesarios para acceder

secuencialmente a una colección de objetos sin exponer su estructura interna.

Mediador (Mediator): Coordina las relaciones entre sus asociados. Permite la interacción

de varios objetos, sin generar acoples fuertes en esas relaciones.

Recuerdo (Memento): Almacena el estado de un objeto y lo restaura posteriormente.

Observador (Observer): Notificaciones de cambios de estado de un objeto.

Public Class Articulo

Delégate Sub DelegadoCambiaPrecio(By Val un Precio As Object)

Public Evento Cambia Precio As DelegadoCambiaPrecio

Dim _cambia Precio As Object

Public WriteOnly Property Precio()

Set(ByVal value As Object)

_cambia Precio = value

RaiseEvent Cambia Precio(_cambia Precio)

End Set

End Property

End Class

Public Class ArticuloObservador

Public Sub Notify(ByVal unObjecto As Object)

Console.WriteLine("El nuevo precio es:" & unObjecto)

End Sub

End Class

Estado (Server): Se utiliza cuando el comportamiento de un objeto cambia dependiendo

del estado del mismo.

Estrategia (Strategy): Utilizado para manejar la selección de un algoritmo.

Método plantilla (Template Method): Algoritmo con varios pasos suministrados por una

clase derivada.

Visitante (Visitor): Operaciones aplicadas a elementos de una estructura de objetos

Microsoft su concepción de patrón es de diseño

Figura 1: Marco de Patrones según Microsoft.

En el diagrama de la Figura 1, Microsoft sostiene que las columnas de la tabla son enfoques o puntos de vista de la solución, mientras que las filas representan los niveles de abstracción. Un ejemplo muy conocido en el ambiente de desarrollo Web es el patrón de diseño de capas el cual plantea la separación de una aplicación en una capa de presentación, una de negocio y una de datos. En un futuro artículo abordaremos un interesante concepto o paradigma, el de los ANTI- Patrones, acerca del cual tomé conocimiento durante mi investigación sobre Patrones de Diseño.

¿Qué Patrones de

Comportamiento tienen los

Usuarios en Tu Sitio Web?

Lee y comparte...

No es casualidad que las webs que hacen cambios constantemente (y

razonados) les vayan bien las cosas. También es cierto, que muchas vces una

sola persona opinando sobre lo que hay que cambiar y lo que no, no basta.

La mayoría de las veces es mejor (si es posible) tener varias voces aunque

sean discordantes para arreglar o mejorar un sitio web. Lo que si está claro, es

que tienes herramientas tecnológicas que te ayudan en tu toma de decisiones.

Una de ellas es Google Analytics, como bien sabes si eres lectora de este blog.

Una de las razones de los cambios en un sitio web, el que sea, es saber cómo

se comportan sus usuarios. Es decir, como son sus patrones de

comportamiento.

Tienes múltiples herramientas, cómo los heat maps o mapas de calor. Sin

embargo, las herramientas de heat maps no vienen con Analytics de serie. Y

algunas de estas herramientas de detección de patrones de comportamiento,

no son precisamiente baratas. Y tiene su sentido.

Sin embargo, dentro de Analytics, hay una herramienta parecida que

es Analítica de Página.

Analítica de página es una herramienta que te permite saber donde hacen clic

tus usuarios, sus patrones de comportamiento. Y lo más importante, donde no.

Esta herramienta se encuentra en Comportamiento / Analítica de Página, tal y

como tienes en la imagen siguiente.

Es muy interesante ya que te permite, modificar después muchas cosas en tu

sitio web.

Cuando haces clic en esta opción, verás que se te abre un gran panel. En el

panel te aperece en la parte superior un cuadro gris, que te indica, que para

Google Chrome tienes una extensión que puedes emplear.

Ya sabes. Vete a la sección de aplicaciones de Chrome y descárgate la

extensión. Comprenderás cosas muy interesantes.

Como decía cuando entras en esta sección, Google Analytics, se queda

pensando un rato y de repente de sale un mensaje.

Al principio te agobia un poco, porque esperas que los resultados salgan dentro

de tu cuenta de Google Analytics. Pero no es así. Te sale este cartel que hay a

continuación:

Haz clic en este cartelito y se te abrirá una pestaña nueva en el navegador.

Esta pestañita es bastante guay. Es guay porque te permite ver el

comportamiento de tus usuarios. Te permite ver sus clics. Lo puedes ver en

colores y lo puedes ver en % de clics.

Esto se pone interesante porque sabes cuáles son las zonas calientes de tu

sitio web.

Los patrones de comportamiento de tus usuarios

En la primera imagen que tienes a continuación, tienes una idea de donde

hacen clic tus usuarios, cómo se comportan.

Fíjate en que la parte superior tienes otras métricas como, Número de

páginas vistas, Número de páginas vistas únicas, Periodo de tiempo en la

página, Tiempo medio de carga, Porcentaje de rebote y Porcentaje de

salidas.

Además tienes un montón de numeritos en función de la opción que hayas

seleccionado.

Si tienes seleccionado cuadros de ayuda como en la imagen anterior, verás

dónde hacen más clic tus usuarios. Esto te dará una idea (númerica) de que

puedes cambiar y que no en tu sitio web.

Es decir, tendrás la posibilidad de saber donde no hacen clic tus usuarios y a lo

mejor es irrelevante para ellos. O donde hacen más clic y es relevante, para

ellos.

Si te agobian los números, también tienes la posibilidad de colores, como en la

imagen que tienes a continuación.

Las cosas empienzan a cambiar. Ahora ya tienes información en colores.

El rojo es donde hay más tráfico ( o más clics) y debes para atención a ese sitio

y el azul es irrelevante.

El que sea irrelevante no quiere decir que no les importe, quieres decir que

quizás has de mejorar algo o quizás no. La decisión es tuya. Además puedes

tener zonas que realmente tanto da que hagan clic como que no. Pero otras sí.

Y es ahí donde el patrón de comportamiento sí que importa. Será una de las

razones para que también sepas porqué huyen de tu tienda online, por ejemplo

Con esta herramienta de analítica de página, ya tienes más datos con los que

poder jugar. Pero tampoco puedes hacer cambios a lo loco. Hazlos con

sentido.

La discusión con tus compañeros de viaje sobre que cambiar de la web para

mejorarla, se puede ir arreglando en base por ejemplo a esto que te acabo de

explicar. También es cierto, que lo que a tí te puede parecer lógico en una web,

a otros no.

Por tanto, te recomiendo que si puedes tener una voz de opinión, mejor que

ninguna. Siempre hay un punto de vista diferente que puedes cambiar.

Patrones de Diseño en aplicaciones Web

con Java J2EE

Como analistas y programadores vamos desarrollando a diario nuestras habilidades para resolver problemas usuales que se presentan en el desarrollo del software. Por cada problema que se nos presenta pensamos distintas formas de resolverlo, incluyendo soluciones exitosas que ya hemos usado anteriormente en problemas similares. Es así que a mayor experiencia que tengamos, nuestro abanico de posibilidades para resolver un problema crece, pero al final siempre habrá una sola solución que mejor se adapte a nuestra aplicación. Si documentamos esta solución, podemos reutilizarla y compartir esa información que hemos aprendido para resolver de la mejor manera un problema específico.

Los patrones del diseño tratan los problemas del diseño que se repiten y que se presentan en situaciones particulares del diseño, con el fin de proponer soluciones a ellas. Por lo tanto, los patrones de diseño son soluciones exitosas a problemas comunes. Existen muchas formas de implementar patrones de diseño. Los detalles de las implementaciones son llamadas estrategias.

En este artículo, veremos algunos patrones de diseño para las aplicaciones basadas en J2EE.

Breve historia de los patrones de diseño

Un patrón de diseño es una abstracción de una solución en un nivel alto. Los patrones solucionan problemas que existen en muchos niveles de abstracción. Hay patrones que abarcan las distintas etapas del desarrollo; desde el análisis hasta el diseño y desde la arquitectura hasta la implementación.

Muchos diseñadores y arquitectos de software han definido el término de patrón de diseño de varias formas que corresponden al ámbito a la cual se aplican los patrones. Luego, se dividió los patrones en diferentes categorías de acuerdo a su uso.

Los diseñadores de software extendieron la idea de patrones de diseño al proceso de desarrollo de software. Debido a las características que proporcionaron los lenguajes orientados a objetos (como herencia, abstracción y encapsulamiento) les permitieron relacionar entidades de los lenguajes de programación a entidades del mundo real fácilmente, los diseñadores empezaron a aplicar esas características para crear soluciones comunes y reutilizables para problemas frecuentes que exhibían patrones similares.

Fue por los años 1994, que apareció el libro "Design Patterns: Elements of Reusable Object Oriented Sofware" escrito por los ahora famosos Gang of Four (GoF, que en español es la pandilla de los cuatro) formada por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides. Ellos recopilaron y documentaron 23 patrones de diseño aplicados usualmente por expertos diseñadores de software orientado a objetos. Desde luego que ellos no son los

inventores ni los únicos involucrados, pero ese fue luego de la publicación de ese libro que empezó a difundirse con más fuerza la idea de patrones de diseño.

El grupo de GoF clasificaron los patrones en 3 grandes categorías basadas en su PROPÓSITO: creacionales, estructurales y de comportamiento.

Creacionales: Patrones creacionales tratan con las formas de crear instancias de objetos. El objetivo de estos patrones es de abstraer el proceso de instanciación y ocultar los detalles de cómo los objetos son creados o inicializados.

Estructurales: Los patrones estructurales describen como las clases y objetos pueden ser combinados para formar grandes estructuras y proporcionar nuevas funcionalidades. Estos objetos adicionados pueden ser incluso objetos simples u objetos compuestos.

Comportamiento: Los patrones de comportamiento nos ayudan a definir la comunicación e iteración entre los objetos de un sistema. El propósito de este patrón es reducir el acoplamiento entre los objetos.

En el segundo nivel, ellos clasificaron los patrones en 2 ámbitos: Clases y objetos. Es así que, tenemos 6 tipos de patrones:

Creacionales

Creacional de la Clase Los patrones creacionales de Clases usan la herencia como un mecanismo para lograr la instanciación de la Clase. Por ejemplo el método Factoría.

Creacional del objeto Los patrones creacionales de objetos son más escalables y dinámicos comparados de los patrones creacionales de Clases. Por ejemplo la Factoría abstracta y el patrón Singleton.

Estructurales

Estructural de la Clase Los patrones estructurales de Clases usan la herencia para proporcionar interfaces más útiles combinando la funcionalidad de múltiples Clases. Por ejemplo el patrón Adaptador (Clase).

Estructural de Objetos Los patrones estructurales de objetos crean objetos complejos agregando objetos individuales para construir grandes estructuras. La composición de l patrón estructural del objeto puede ser cambiado en

tiempo de ejecución, el cual nos da flexibilidad adicional sobre los patrones estructurales de Clases. Por ejemplo el Adaptador (Objeto), Facade, Bridge, Composite.

Comportamiento

Comportamiento de Clase Los patrones de comportamiento de Clases usan la herencia para distribuir el comportamiento entre Clases. Por ejemplo Interpreter.

Comportamiento de Objeto Los patrones de comportamiento de objetos nos permite analizar los patrones de comunicación entre objetos interconectados, como objetos incluidos en un objeto complejo. Ejemplo Iterator, Observer, Visitor.

Patrones J2EE

Con la aparición del J2EE, todo un nuevo catálogo de patrones de diseño apareció. Desde que J2EE es una arquitectura por si misma que involucra otras arquitecturas, incluyendo servlets, JavaServer Pages, Enterprise JavaBeans, y más, merece su propio conjunto de patrones específicos para diferentes aplicaciones empresariales.

De acuerdo al libro "J2EE PATTERNS Best Practices and Design Strategies", existen 5 capas en la arquitectura J2EE:

Cliente Presentación Negocios Integración Recurso

El libro explica 15 patrones J2EE que están divididos en 3 de las capas: presentación, negocios e integración.

Catálogo de patrones J2EE

Capa de Presentación

Decorating Filter / Intercepting Filter

Un objeto que está entre el cliente y los componentes Web. Este procesa las peticiones y las respuestas.

Front Controller/ Front Component

Un objeto que acepta todos los requerimientos de un cliente y los direcciona a manejadores apropiados. El patrón Front Controller podría dividir la funcionalidad en 2 diferentes objetos: el Front Controller y el Dispatcher. En ese caso, El Front Controller acepta todos los requerimientos de un cliente y realiza la autenticación, y el Dispatcher direcciona los requerimientos a manejadores apropiada.

View Helper

Un objeto helper que encapsula la lógica de acceso a datos en beneficio de los componentes de la presentación. Por ejemplo, los JavaBeans pueden ser usados como patrón View Helper para las páginas JSP.

Composite view

Un objeto vista que está compuesto de otros objetos vista. Por ejemplo, una página JSP que incluye otras páginas JSP y HTML usando la directiva include o el action include es un patrón Composite View.

Service To Worker

Es como el patrón de diseño MVC con el Controlador actuando como Front Controller pero con una cosa importante: aquí el Dispatcher (el cual es parte del Front Controller) usa View Helpers a gran escala y ayuda en el manejo de la vista.

Dispatcher View

Es como el patrón de diseño MVC con el controlador actuando como Front Controller pero con un asunto importante: aquí el Dispatcher (el cual es parte del Front Controller) no usa View Helpers y realiza muy poco trabajo en el manejo de la vista. El manejo de la vista es manejado por los mismos componentes de la Vista.

Capa de Negocios

Business Delegate

Un objeto que reside en la capa de presentación y en beneficio de los otros componentes de la capa de presentación llama a métodos remotos en los objetos de la capa de negocios.

Value Object/ Data Transfer Object/ Replicate Object

Un objeto serializable para la transferencia de datos sobre la red.

Session Façade/ Session Entity Façade/ Distributed Façade

El uso de un bean de sesion como una fachada (facade) para encapsular la complejidad de las interacciones entre los objetos de negocio y participantes en un flujo de trabajo. El Session Façade maneja los objetos de negocio y proporciona un servicio de acceso uniforme a los clientes.

Aggregate Entity

Un bean entidad que es construido o es agregado a otros beans de entidad.

Value Object Asamblea

Un objeto que reside en la capa de negocios y crea Value Objets cuando es requerido.

Value List Handler/ Page-by-Page Iterator/ Paged List

Es un objeto que maneja la ejecución de consultas SQL, caché y procesamiento del resultado. Usualmente implementado como beans de sesión.

Service Locator

Consiste en utilizar un objeto Service Locutor para abstraer toda la utilización JNDI y para ocultar las complejidades de la creación del contexto inicial, de búsqueda de objetos home EJB y recreación de objetos EJB. Varios clientes pueden reutilizar el objeto Service Locutor para reducir la complejidad del código, proporcionando un punto de control.

Capa de Integración

Data Access Object Service Activator

Consiste en utilizar un objeto de acceso a datos para abstraer y encapsular todos los accesos a la fuente de datos. El DAO maneja la conexión con la fuente de datos para obtener y almacenar datos.

Service Activator

Se utiliza para recibir peticiones y mensajes asíncronos de los clientes. Cuando se recibe un mensaje, el Service Activator localiza e invoca a los métodos de los componentes de negocio necesarios para cumplir la petición de forma asíncrona.

Comentado [W1]: