UNIVERSIDAD GERRARDO BARRIOS

FACULTAD DE CIENCIA Y TECNOLOGIA

CATEDRA:

INGENIERIA DE SOFTWARE II

CATEDRATICO:

LICDA. CARLA MILAGRO LOPEZ VASQUEZ

TRABAJO DE INVESTIGACION

PATRONES DE DISEÑO WEB Y OTROS

RESPONSABLE:

DANILO ISAAC CAMPOS GARAY USTS056313

FECHA DE ENTREGA: 04-03-2015

4.0: PATRONES DE DISEÑO WEB

¿QUÉ ES UN PATRÓN DE DISEÑO WEB?:

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

Existen varios patrones de diseño popularmente conocidos, los cuales se

clasifican como:

Patrones Creacionales: Inicialización y configuración de objetos. 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.

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.

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.

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

la comunicación entre ellos. 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.

Los patrones de diseño Web Son la base para la búsqueda de soluciones a

problemas comunes en el desarrollo de software y otros ámbitos referentes al

diseño de interacción o interfaces.

Un patrón de diseño resulta ser una solución a un problema de diseño. Para que

una solución sea considerada un patrón debe poseer ciertas características. Una

de ellas es que debe haber comprobado su efectividad resolviendo problemas

similares en ocasiones anteriores. Otra es que debe ser reutilizable, lo que

significa que es aplicable a diferentes problemas de diseño en distintas

circunstancias.

Los patrones de diseño Web pretenden:

Proporcionar catálogos de elementos reusables en el diseño de sistemas

software. Evitar la reiteración en la búsqueda de soluciones a problemas ya

conocidos y solucionados anteriormente.

Formalizar un vocabulario común entre diseñadores.

Estandarizar el modo en que se realiza el diseño.

Facilitar el aprendizaje de las nuevas generaciones de diseñadores

condensando conocimiento ya existente.

Así mismo, no pretenden:

Imponer ciertas alternativas de diseño frente a otras.

Eliminar la creatividad inherente al proceso de diseño.

No es obligatorio utilizar los patrones, solo es aconsejable en el caso de tener el

mismo problema o similar que soluciona el patrón, siempre teniendo en cuenta

que en un caso particular puede no ser aplicable. "Abusar o forzar el uso de los

patrones puede ser un error".

Categorías de los Patrones Web.

Patrones de arquitectura: Aquellos que expresan un esquema organizativo

estructural fundamental para sistemas de software.

Patrones de diseño: Aquellos que expresan esquemas para definir estructuras

de diseño (o sus relaciones) con las que construir sistemas de software.

Dialectos: Patrones de bajo nivel específicos para un lenguaje de programación

o entorno concreto.

Además, también es importante reseñar el concepto de "anti Patrón", que con

forma semejante a la de un patrón, intenta prevenir contra errores comunes de

diseño en el software. La idea de los anti patrones es dar a conocer los

problemas que acarrean ciertos diseños muy frecuentes, para intentar evitar que

diferentes sistemas acaben una y otra vez en el mismo callejón sin salida por

haber cometido los mismos errores.

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.

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.

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.

Los patrones de diseño son una herramienta muy útil. Los patrones de diseño

son soluciones para problemas típicos y recurrentes que nos podemos encontrar

a la hora de desarrollar una aplicación.

Aunque nuestra aplicación sea única, tendrá partes comunes con otras

aplicaciones: acceso a datos, creación de objetos, operaciones entre sistemas

etc. En lugar de reinventar la rueda, podemos solucionar problemas utilizando

algún patrón, ya que son soluciones probadas y documentadas por multitud de

programadores.

¿Por qué usar patrones de diseño?

Los patrones de diseño nos ayudan a cumplir muchos principios o reglas de

diseño. Programación SOLID, control de cohesión y acoplamiento o reutilización

de código son algunos de los beneficios que podemos conseguir al utilizar

patrones.

En principio, se puede pensar que un patrón es como una manera especialmente

inteligente e intuitiva de resolver una clase de problema en particular. Parece

que un equipo de personas ha estudiado todos los ángulos de un problema y

han dado con la solución más general y flexible para ese tipo de problema. Este

problema podría ser uno que usted ha visto y resuelto antes, pero su solución

probablemente no tenía la clase de completitud que verá plasmada en un patrón.

Es más, el patrón existe independientemente de cualquier implementación

particular y puede implementarse de numerosas maneras.

Aunque se llaman "patrones de diseño", en realidad no están ligados al ámbito

del diseño. Un patrón parece apartarse de la manera tradicional de pensar sobre

el análisis, diseño e implementación. En cambio, un patrón abarca una idea

completa dentro de un programa, y por lo tanto puede también abarcar las fases

de análisis y diseño de alto nivel. Sin embargo, dado que un patrón a menudo

tiene una implementación directa en código, podría no mostrarse hasta el diseño

de bajo nivel o la implementación (y usted no se daría cuenta de que necesita

ese patrón hasta que llegase a esas fases).

El concepto básico de un patrón puede verse también como el concepto básico

del diseño de programas en general:

Añadir capas de abstracción. Cuando se abstrae algo, se están aislando detalles

concretos, y una de las razones de mayor peso para hacerlo es separar las cosas

que cambian de las cosas que no.

Otra forma de verlo es que una vez que encuentra una parte de su programa que

es susceptible de cambiar, querrá prevenir que esos cambios propaguen efectos

colaterales por su código. Si lo consigue, su código no sólo será más fácil de leer

y comprender, también será más fácil de mantener, lo que a la larga, siempre

redunda en menores costes.

La parte más difícil de desarrollar un diseño elegante y mantenible a menudo es

descubrir lo que llamamos el "vector de cambio". (Aquí "vector" se refiere al

mayor gradiente tal y como se entiende en ciencias, no como la clase

contenedora.) Esto implica encontrar la cosa más importante que cambia en su

sistema o, dicho de otra forma, descubrir dónde están sus mayores costes. Una

vez que descubra el vector de cambios, tendrá el punto focal alrededor del cual

estructurar su diseño.

Por lo tanto, el objetivo de los patrones de diseño es encapsular el cambio. Si lo

enfoca de esta forma, ya habrá visto algunos patrones de diseño en este libro.

Por ejemplo, la herencia podría verse como un patrón de diseño (aunque uno

implementado por el compilador). Expresa diferencias de comportamiento (eso

es lo que cambia) en objetos que tienen todos la misma interfaz (esto es lo que

no cambia). La composición también podría considerarse un patrón, ya que

puede cambiar dinámica o estáticamente los objetos que implementan su clase,

y por lo tanto, la forma en la que funciona la clase. Normalmente, sin embargo,

las características que los lenguajes de programación soportan directamente no

se han clasificado como patrones de diseño.

También ha visto ya otro patrón que aparece en el GoF: el “iterador”. Esta es la

herramienta fundamental usada en el diseño del STL. El iterador esconde la

implementación concreta del contenedor a medida que se avanza y se

seleccionan los elementos uno a uno. Los iteradores le ayudan a escribir código

genérico que realiza una operación en todos los elementos de un rango sin tener

en cuenta el contenedor que contiene el rango. Por lo tanto, cualquier contenedor

que pueda producir iteradores puede utilizar su código genérico.

El Patrón de diseño web es un aspecto del diseño visual por el que se determina

la disposición general de los elementos del sitio web en el área de visualización

determinado por el navegador.

Ancho fijo

Se trata de una técnica de diseño web por la que el contenido se ajusta a un

ancho determinado y crece únicamente de manera vertical. Es lo más habitual,

y por tanto, considerado un estándar bien soportado incluso por dispositivos de

pantalla pequeña (móviles, tabletas, etc), cuyos navegadores detectan este

patrón y permiten ampliar por áreas la página presentada.

El ancho más utilizado es el que se adapta a tamaños de pantalla de 1024 puntos

de ancho, y la columna que forma el contenido suele presentarse centrada, y en

menor medida con alineación a la izquierda. Los patrones de diseño web son

soluciones esenciales a problemas típicos a los que diseñadores de interacción

y creativos deben enfrentarse a la hora de construir un proyecto web.

Diferencia entre Patrones de Diseño y las guías de usabilidad

Una de las diferencias es referente a su enfoque o perspectiva. Mientras que las

directrices de usabilidad describen reglas a seguir, los patrones además

especifican el resultado deseado (Spool; 2003). Es decir, una directriz de

usabilidad representa una regla que si se cumple el diseño “estará bien”, y si no

“estará mal”, mientras que un patrón especifica qué hacer para conseguir un

objetivo concreto en un contexto determinado. Como indica Henninger (2001) los

patrones de interacción están destinados a la solución de problemas concretos,

frente al enfoque más generalista de las directrices. El enfoque de los patrones

es más constructivo, en vez de especificar reglas del tipo “qué se debe hacer” o

“qué no se debe hacer”, describen “qué se debe hacer para conseguir

determinado objetivo” (Welie, Veer, Eliëns; 2000).

Otra diferencia es en cuanto a la representación de la información. Si bien mucha

de la información de los patrones es replicada de la existente en guías y

directrices de usabilidad, en los patrones además se describe el contexto en el

que el patrón es aplicable, y ejemplos concretos de aplicación (Henninger; 2000),

(Henninger, Oltman; 2002). Es decir, especifican cuándo, cómo y por qué la

solución puede aplicarse (Welie, Veer y Eliëns; 2000).

Griffiths y Pemberton (2000) Señalan otra serie de diferencias en forma de

ventajas frente a las directrices, como es el carácter cooperativo de su

elaboración y evolución.

Evolución histórica de los patrones de diseño.

En 1979, el arquitecto Chistopher Alexander escribe el libro “The Tímeles Way

of Building” sobre el uso de patrones en la construcción de edificios, lo que

contribuyó a que años más tarde se escribiese otro libro “A Pattern Language”

que fue el primer intento por formalizar los conocimientos arquitectónicos. Más

tarde, en 1987, Ward Cunningham y Kent Beck orientaron esos patrones hacia

la la informática en su libro “Using Pattern Language for OO Programs” donde

desarrollaban cinco patrones orientados a la interacción hombre máquina. A

principios de los 90’s es cuando con el libro “Design Patterns” escrito por el GoF

(Gang of Four) donde los patrones de diseño alcanzan su auge. Este libro

recogía 23 patrones de diseño aplicados a la programación informática. Es a

partir de principios de los 90 cuando los patrones alcanzan su auge, utilizándose

para aportar soluciones a los proyectos informáticos, con la publicación del libro

Design Patterns escrito el GoF (Gang of Four, nombre que reciben comúnmente

los autores de este libro). En este caso el patrón se presenta como la solución a

un problema que ocurre infinidad de veces en el entorno. Este libro recogía 23

patrones de diseño aplicados a la programación informática.

4.1: Principios de Usabilidad Web.

La usabilidad Web son técnicas que ayudan a los seres humanos a realizar

tareas en entornos gráficos de ordenador, en nuestro caso, páginas web.

Técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos

de ordenador. 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.

“Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite

alcanzar objetivos específicos a usuarios específicos en un contexto de uso

específico”

El diseño de sitios web debe seguir los siguientes principios:

1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios

sienten que controlan un sitio web si conocen su situación en un entorno

abarcable y no infinito.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los

usuarios con problemas de distinción de colores (aprox. un 15% del total)

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de

los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del

usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con

mayor número de pasos son más rápidas de realizar para una persona que otras

tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas.

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón está

en función de la distancia y el tamaño del objetivo. A menor distancia y mayor

tamaño más facilidad para usar un mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera

del usuario, permitiendo la realización de otras tareas mientras se completa la

previa e informando al usuario del tiempo pendiente para la finalización de la

tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje

y deben poder ser utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un

uso inadecuado de estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que

los usuarios nunca pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño

de fuente debe ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando

información sobre su comportamiento previo se ha de permitir al usuario realizar

operaciones frecuentes de manera más rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han

de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

15. Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo

esfuerzo y unos resultados máximos.

16. Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario

comete un error el sistema ha de solucionar el problema, o en su defecto sugerir

varias soluciones posibles, pero no emitir respuestas que meramente informen

del error culpando al usuario.

17. En ningún caso un sitio web puede venirse abajo o producir un resultado

inesperado. Por ejemplo no deben existir enlaces rotos.

18. Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio

web es un término peligroso, cuanto mayor sea el número de acciones que un

usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando

el número de acciones al público objetivo se facilita el uso de un sitio web.

19. Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario

visita un sitio web y no sabe dónde comenzar a leer, existe sobrecarga de

información.

20. Un sitio web debe ser consistente en todos los pasos del proceso. Aunque

pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la

consistencia entre los diseños facilita al usuario el uso de un sitio.

21. Un sitio web debe proveer de un feedback a los usuarios, de manera que

éstos siempre conozcan y comprendan lo que sucede en todos los pasos del

proceso.

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.

Errores de usabilidad web.

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.

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario

cuando interactúa con un producto o sistema. Esto se mide a través del estudio

de la relación que se produce entre las herramientas (entendidas en un Sitio Web

el conjunto integrado por el sistema de navegación, las funcionalidades y los

contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el

uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el

cumplimiento de las tareas que se pueden llevar a cabo a través de ellas. Otra

definición es la que entrega el académico Yusef Hassan (Universidad de

Granada) al indicar que "la usabilidad es la disciplina que estudia la forma de

diseñar Sitios Web para que los usuarios puedan interactuar con ellos de la forma

más fácil, cómoda e intuitiva posible" y agregar que "la mejor forma de crear un

Sitio Web usable es realizando un diseño centrado en el usuario, diseñando para

y por el usuario, en contraposición a lo que podrá ser un diseño centrado en la

tecnología o uno centrado en la creatividad u originalidad".

La Usabilidad se refiere al grado en que un producto puede ser usado por

usuarios específicos para conseguir metas específicas con efectividad, eficiencia

y satisfacción dado un contexto específico de uso. Es importante indicar que la

Usabilidad es una disciplina que nace en Estados Unidos y florece gracias al

desarrollo computacional, consolidándose como una práctica habitual con la

aparición de los Sitios Web en la década de los 90s.

Características Principales de la Usabilidad Web.

Dadas las definiciones anteriores es claro que abordar la Usabilidad implica

también revisar una serie de aspectos relacionados con el uso y la manera en

que las personas se relacionan con los sistemas que se les ofrecen. Por lo

mismo, se ha hecho necesario hacer una serie de comprobaciones de estos

aspectos, mediante la revisión completa de la forma en que el espacio digital

apoya a los usuarios en cumplir sus tareas en la mejor forma posible. Dicha

revisión debe ser hecha a través de diferentes factores, entre los que se cuentan

los siguientes:

Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha

visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.

Facilidad y Eficiencia de uso: determina la rapidez con que se pueden

desarrollar las tareas, una vez que se ha aprendido a usar el sistema.

Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las

características y forma de uso de un sistema para volver a utilizarlo a futuro.

Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los

usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar

el sistema.

Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando

han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus

pantallas

Adicionalmente, es útil entender el contexto en el que se desenvuelve esta forma

de trabajo utilizando para ello la perspectiva que ofrece Peter Morville, autor ya

reseñado en la sección Encontrabilidad de esta Guía, cuando él sitúa la

Usabilidad en función de otras variables que permiten medir la calidad de un Sitio

Web desde diferentes perspectivas. En ese sentido, señala que un Sitio Web

puede ser mejorado desde diferentes acercamientos, quedando la Usabilidad

como uno más de ellos, permitiendo la aparición de otros con similar importancia

que deben ser tenidos en cuenta al momento de hacer el rediseño de un Sitio

Web.

A estos acercamientos simultáneos al de la Usabilidad el autor los

denomina las Facetas de la Experiencia del Usuario, y corresponden a los

siguientes:

Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y

aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la

utilidad.

Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto

fundamental, necesario pero no suficiente, por lo que se debe complementar con

las demás facetas.

Deseable: si bien los sitios deben ser eficientes, en particular con el uso de

medios ms complejos (imágenes, sonidos, animaciones), esto se debe equilibrar

con los demás valores del diseño emocional.

Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios

puedan encontrar lo que necesitan.

Accesible: los sitios Web deben ser accesibles a las personas con

discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno

ya es un requisito normativo.

Creíble: la credibilidad es uno de los factores más importantes de tener en

cuenta y por ello se deben revisar los elementos de diseño que afectan la

confianza que nos tienen los usuarios.

Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros

sitios ofrezcan valor para nuestros usuarios.

Existen tres errores frecuentes a la hora de empezar un proyecto web:

1. Ofrecer un contenido de calidad pero no preocuparse de posicionarlo

correctamente. Normalmente ocurre por desconocimiento de las normas

del SEO.

2. Volcarse en hacer un buen SEO dejando de lado la calidad del contenido.

3. Tener un contenido de calidad, hacer un buen SEO pero olvidarse de la

usabilidad de la web.

Algunos Ejemplos de Usabilidad Web.

4.2 Diseño web líquido o Fluido

Se llama así pues al igual que sucede con los fluidos, el contenido ocupa toda el

área visual disponible según el tamaño de pantalla y las dimensiones de la

ventana del navegador.

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. Este tipo de diseño es recomendado para sitios web con un marcado

carácter práctico, esto es, herramientas accesibles a través de web.

Diseño líquido o fluido (Responsive Web Design) Es la técnica para crear

plantillas que automáticamente se ajustan al tamaño de la pantalla en las que

están siendo navegadas, utilizando la definición de reglas de medios de

destino definidas dentro de las nuevas características del CSS3.

La técnica de diseño lquido o fluido, plantillas ajustables según dispositivo.

El diseño líquido tiene un impacto visual más limitado dado que por definición

las proporciones de los elementos que lo componen son variables, abriendo

necesariamente espacios vacíos entre ellos.

En respuesta a esto se tiene el Diseño Liquido o Fluido, no tienen un ancho fijo,

y permiten que cada navegador lo adapte a su tamaño. Usando está técnica

puedes eliminar la necesidad de crear diseños especiales por cada

dispositivo. Permite con un simple código mostrar el contenido en un ilimitado

número de medios.

Las técnicas de diseño líquido:

El ancho de la plantilla: Lo más importante es conseguir un ancho flexible, es el

factor que entorpece muchos de los diseños cuando se ven en las pantallas más

pequeñas. Crear contenedores que se extiendan o se recojan en las diferentes

resoluciones. No hay un truco, solo es cambiar la forma de crear las columnas

de tu hoja de estilo. Ejemplo:

view plainprint?

#contenedor {

width: 80%;

margin: auto;

max-width: 1200px;

}

Este es un pequeño ejemplo de diseño con un ancho fluido, es una buena técnica

adicionar el max-width, que limitará el máximo ancho permitido, en caso de

encontrar pantallas de una resolución demasiado grande.

Las imágenes: Un tema a tener en cuenta cuando se pasa de ancho fijo a

diseño fluido, son las imágenes en el HTML (los elementos <img>). Un

archivo de imagen, en su mayor parte es un archivo de tamaño fijo que no

se redimensiona, esto puede dar errores en la presentación del diseño

con imágenes de gran tamaño que se desbordan por la ventana del

navegador, la solución es muy simple, solo debemos adicionar las

siguientes líneas en la hoja de estilo:

view plainprint?

img {

max-width: 100%;

}

Eliminar el zoom en los dispositivos móviles: Los dispositivos celulares o

tablas utilizan una función de "zoom" para mostrar sitios web muy grandes, en

escala en sus pequeñas pantallas, esto es bueno en la mayoría de casos, pero

para nuestra técnica no es funcional. Adicionando un meta tag "viewport" en el

header del documento eliminamos esta funcionalidad:

<meta name="viewport" content="width=device-width, minimum-scale=1.0,

maximum-scale=1.0" />

Solo debemos deshabilitar esta opción cuando estemos seguros que nuestro

diseño se ajusta y permite una navegación adecuada, de otro modo solo vamos

a lograr dificultarle las cosas.

Utilizar CSS Query @media: La característica de "Consulta de medios"

enCSS permite aplicar cambios de diseños basados en el tamaño de

visualización y capacidad del dispositivo en el que se está mostrando el

contenido. Tiene respaldo en la mayoría de navegadores móviles.

view plainprint?

#wrapper {

width: 80%;

margin: auto;

max-width: 1200px;

min-width: 800px;

}

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

#wrapper {

width: 90%;

min-width: 0;

}

}

Diseño líquido: Son diseños creados para no tener un ancho fijo, permiten que

el navegador lo adapte a su tamaño. Se diseñan usando porcentajes (%), por lo

que los elementos que seleccionemos podrán tener un tamaño proporcionado al

tamaño del navegador. Fueron creados para aprovechar al máximo los nuevos

monitores (panorámicos).

El diseño web fluido o diseño web líquido: Es aquel que tiende a ocupar todo

el ancho de la pantalla, sea cual sea el tamaño de esta. Es un tipo de diseño

menos utilizado que Diseño web fijo, ya que requiere de mucho más trabajo por

parte del diseñador web y ya que si no se realiza correctamente su resultado

puede resultar bastante atractivo para tamaños de pantalla “normales” y

pequeñas, pero cuando se emplean pantallas de muchas pulgadas su estética

resulta, cuanto menos, horrible, a no ser que se utilicen técnicas como el uso de

max-width para limitar el máximo ancho aceptado por nuestro diseño. En este

caso el diseñador web utiliza porcentajes en lugar de píxeles para establecer los

anchos de sus diseños, aunque también se pueden emplear píxeles y medidas

máximas y mínimas con min-width y max-width. Por suerte es un tipo diseño que

cada vez va tomando más terreno y va sustituyendo al diseño web fijo.

4.3 Patrón de diseño web híbrido

Ejemplos de Diseño Web hibridos con CSS.

En este ejemplo de maquetación hemos utilizado una combinación de varios

métodos de diseño css, lo que se denomina diseño híbrido La combinación de

diferentes tipos de unidades, tanto absolutas como relativas, proporciona una

gran flexibilidad a nuestros diseños que podrán adaptarse a cualquier

modificación, tanto de la configuración de la pantalla, como del tamaño de letra.

El diseño híbrido 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.).

En este ejemplo hemos utilizado un contenedor de 75 em de ancho (equivalente

a 1200 px) que alberga varios elementos como: cabecera, barra de menú,

anuncios, cuerpo con dos cajas, pie, etc. En el cuerpo hemos situado dos cajas:

izquierda y derecha.

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.

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.

4.4 Diseño web para móviles.

A la hora de diseñar un sitio web cada día debemos tener más en cuenta que

esté optimizado también para móviles.

Consejos de usabilidad para la web móvil

A continuación voy a listar hasta 10 consejos que nos pueden ayudar a construir

sitios web más usables en dispositivos móviles. Algunos son más prácticos que

otros, algunos también más obvios que otros.

1. Ten en cuenta la diversidad de pantallas.

Como primer punto, lo más fundamental en torno de los dispositivos móviles, las

sensibles diferencias de tamaños de pantallas y de resolución. Ten en cuenta

que estás diseñando para pantallas por lo general pequeñas, pero además que

existen distintos tipos de definiciones. Si en ordenadores de escritorio ya

debíamos tener en cuenta este detalle, al desarrollar para móviles todavía cobra

mayor importancia.

2. El foco no es tu sitio.

Lo dicho anteriormente, quizás los usuarios están accediendo a tu sitio mientras

llevan a cabo otras tareas, así que no vas a pretender que el visitante tenga los

5 sentidos dedicados a tu web. Analiza qué es lo que quieres mostrar, sintetiza,

llama la atención sobre los puntos que consideres más importantes y descarta

aquellos que no merezcan la pena. En la medida de lo posible, reduce la cantidad

de contenido que estás distribuyendo en tu página para móviles.

3. El layout debe estar pensado para móviles.

En la web de escritorio utilizamos rejillas que tienen 12 o 16 columnas, sin

embargo, en la web para móviles quizás con una columna tienes más que

suficiente. En cualquier caso, ten en cuenta que funcionan mejor los layouts

fluidos, que se adaptan a la anchura de cada tipo de pantalla. Si vas a utilizar

varias columnas, considera 2 o 3 a lo sumo. Sin embargo, también es cierto que

algunos dispositivos como los tablets pueden soportar perfectamente layouts

más complejos, por lo que no existe una regla fija. Lo mejor sería tener varios

layouts y utilizar uno u otro dependiendo de las dimensiones de la pantalla. Más

adelante veremos cómo hacer eso.

4. La navegación en la parte de arriba no suele funcionar.

En la web para escritorio es habitual tener un navegador en la parte de arriba

de la página, con un listado de las secciones principales de un sitio web. Pero

debemos tener en cuenta que en dispositivos de movilidad, con pantallas

pequeñas, ese listado de links puede ocupar todo el espacio disponible, lo que

obligaría al usuario a hacer scroll para ver el contenido de la página. Algo que no

es deseable. En la portada del sitio web puede ser una buena idea mantener la

navegación en la parte de arriba del documento, pero en el resto de páginas

queda mejor si la situamos abajo.

5. Uso responsable de las imágenes.

Esa imagen que en las pantallas de los ordenadores queda tan bien,

posiblemente tenga un tamaño excesivo para visualizarse en una pantalla

pequeña de un teléfono. Posiblemente la definición de la foto sea superior a la

de la pantalla de tu dispositivo, con lo que estás desperdiciando espacio y ancho

de banda para su transferencia. Usa imágenes con tamaños adaptados a

móviles y elimina determinados usos de imágenes que aportan poco o nada a la

utilidad de tu documento, como imágenes de fondo, que pueden molestar la

lectura más que otra cosa.

6. Se trabaja con los dedos y no con el ratón.

Este punto es de vital importancia, puesto que la pantalla táctil utiliza el dedo

como señalador y tiene muchas diferencias con respecto al puntero del ratón de

nuestro ordenador personal. Ten en cuenta detalles como que el espacio para

hacer un tap (tap es como se le llama al clic realizado con el dedo sobre una

pantalla táctil) es mayor que el que señalaríamos con el puntero del ratón (se

supone que un dedo en la pantalla ocupa entre 40 y 80 píxeles de ancho). Dicho

de otro modo, no se puede comparar la precisión de un clic con el ratón y con el

dedo, que puede cambiar mucho de una persona a otra y también la forma de

posicionarlo en la pantalla. En general tu sitio web funcionará mejor cuando

pongas botones o enlaces con tamaño mayor. Así mismo, sería recomendable

dejar un mayor espacio en blanco entre los botones o enlaces de tu sitio web.

7. Entrada de texto en teclados virtuales.

En el ordenador personal utilizamos un teclado para introducir texto, sin

embargo, en dispositivos móviles se suele usar un teclado virtual que a menudo

resulta mucho más incómodo. Este detalle y varios otros que tienen que ver con

la entrada de datos en general lo veremos en el siguiente artículo sobre

usabilidad en formularios optimizados para móviles.

8. No se dispone de plugins.

Flash es el ejemplo más claro de plugin que no disponemos en todos los

dispositivos y que por tanto no deberíamos usar en páginas que queremos que

se vean bien en móviles. Pero hay otros, como los Applets de Java, Shockwave,

etc. Sin olvidar que no todos tienen compatibilidad con ciertas capacidades de

scripting. Sugerir la actualización del navegador, o la instalación de otro cliente

web, no es la solución en muchos de los casos, pues no siempre el usuario tiene

oportunidad de actualizar su sistema operativo o instalar otro software para la

navegación web.

9. Los tipos de eventos cambian.

El clic en pantallas táctiles se llama Tap. Realmente es un nuevo modo de llamar

a la misma cosa, pero existen otros eventos que sí tienen cambios importantes,

o que no están disponibles en las pantallas táctiles. Por ejemplo, el hover no

existe al trabajar con los dedos. Además, hay otra serie de eventos que sólo

existen en móviles como deslizamiento de los dedos, zoom, girar la pantalla etc.

10. Existen diversas utilidades específicas que se pueden aprovechar.

Los dispositivos móviles a menudo integran algunas habilidades que no se

disponen en los ordenadores de escritorio, como localización geográfica,

cámaras, grabación, orientación, etc. En la mayoría de los casos estos

mecanismos sólo se disponen en aplicaciones nativas, pero gracias a HTML 5,

algunos ya están disponibles en sitios web. En el futuro la tendencia es integrar

aún más estas capacidades en la web.

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.

11. consejos para web móvil.

Ten en cuenta la resolución de pantalla. Aquí tienes algunas de las más

utilizadas:

320×240: Blackberry (Curve 8530 y PearlFlip), Android (Motorola Charm, Sony

Ericsson Xperia X10 Mini y otros) y Symbian OS (Nokia E63 y otros)

320×480: Apple OS (iPhone y iPod) y Android (HTC Dream, HTC Hero, Droid

Pro, i7500 Galaxy, Samsung Moment y otros)

480×360: Blackberry (Torch, Storm y Bold)

360×640: Symbian OS (Nokia N8, Nokia C6-01 y otros)

480×800: Android (Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S y otros),

Maemo – Linux (Nokia 900 y otros), Windows Mobile 6 (Sharp S01SH) y

Windows 7 Phone (Venue Pro, Samsung Omnia 7, HTC 7 Pro y otros)

768×1024: iPad

640×960: iPhone 4

1280×800: Android (Motorola Xoom y Samsung Galaxy Tab 10.1) , Windows OS

(Asus Eee Pad EP121) y Apple OS (Axiotron Modbook)

Facilita la usabilidad de la web con una navegación vertical y scrolling de una

sola dirección, accediendo a las distintas páginas nombradas con títulos cortos

y descriptivos. La simplicidad es tu mejor aliado en el diseño por lo que es

aconsejable evitar tablas y frames que puedan complicar la navegabilidad.

Cuantas menos imágenes utilices la descarga será más rápida. Nosotros te

aconsejamos mantener tus imágenes en unos 72 dpi, 640px en 960 de altura.

Asimismo, el tamaño de los textos y la duración y resolución de los vídeos han

de seguir la misma norma para mantener una carga óptima.

Utiliza colores con contraste. Teniendo en cuenta que algunos dispositivos

móviles funcionan con pantallas de bajo contraste y que el uso del móvil puede

realizarse en cualquier lugar sin considerar si la luz existente es la adecuada

para leer, tenemos que preocuparnos especialmente por esta propiedad del color

con la finalidad de mantener una correcta visualización distinguiendo entre

contenido y fondo desde cualquier móvil y lugar.

No uses ventanas emergentes o pop-ups pues los navegadores móviles no los

soportan. Tampoco utilices el refresque de página automático, deja que el

usuario lo haga el mismo.

Es aconsejable utilizar una tipografía grande para su correcta lectura con un

ancho de renglón no superior a los 80 caracteres y usando un tamaño de 14

puntos y negrita para los titulares. También es importante que los enlaces estén

lo suficientemente separados del resto del texto para ser seleccionados con el

dedo. Ten en cuenta las limitaciones de la navegabilidad en el móvil como por

ejemplo que algunos terminales no aceptan cookies y JavaScripts.

Es recomendable que el peso total de cada página, incluyendo archivos adjuntos

como la CSS, no supere los 20kb. Utilizar porcentajes en vez de tamaños

absolutos para la estructura de la web, intentando que la página se adapte al

100% a la pantalla del dispositivo, permitirá una mayor adaptabilidad de la

misma.

Ventajas:

Web pensada y dedicada para móviles. En general, carga y navegación más

rápida

Uso del “contexto”. Según dónde esté el usuario o cómo acceda puedo

personalizar el desarrollo para conseguir una acción

Puedes adaptar más fácilmente el contenido de tus secciones a un usuario que

leerá mucho menos texto que cuando está con el PC, o que no será capaz de

rellenar un formulario largo.

Desventajas:

Doble de trabajo. Has de mantener un desarrollo paralelo a tu site

Más carga de SEO móvil. Has de implementar las etiquetas switchboard para

evitar la penalización de tu site por duplicación, configurar los ficheros robots.txt

y sitemap.xml etc

Estos desarrollos al final acaban en ser versiones minis de la web de escritorio,

llevando al usuario a frustrarse y a elegir ver la versión original de la web.

4.5 Patrones Creacionales.

Los patrones creacionales que abstraen el proceso de instanciación. Procurar

independizar el Sistema de cómo sus objetos son creados, compuestos y

representados. Encapsulan conocimientos sobre clases concretas usadas por el

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

Este tipo de patrones soportan la tarea más común que tiene la programación

orientada a objetos: La creación de las instancias de objetos en un sistema.

Los patrones creacionales, Son familias de modelos en interfaz en las cuales se

van obteniendo a través de su creación objetos los cuales deben relacionarse

entre sí en el momento de que se va analizando la situación y se va escogiendo

la mejor decisión para poder tener control de estos mismos.

Dentro de los patrones creacionales conoceremos:

ABSTRACT FACTORY:BUILDER

SINGLENTON

FACTORY METHOD

PROTOTYPE

Cada uno de estos patrones tienen una función específica, cada uno se utiliza

para un fin, y cada uno maneja un pool de ventajas y desventajas, los cuales

muchas veces nos lleva a dudar de cuál sería la mejor decisión al momento de

desarrollar una arquitectura de diseño, en donde para obtener excelentes

resultados, se debe tener las siguientes recomendaciones:

El modelo el cual se trabaje, debe permitir hacer el rehúso del diseño para

próximas ocasiones o dentro del software cuando se requiera hacer una

modificación del mismo

El modelo debe permitir solucionar en sí el conflicto al desarrollo del

diseño.

Corresponden a patrones de diseño de software que solucionan

problemas de creación de instancias. Nos ayudan a encapsular y abstraer

dicha creación.

El patrón creacional de diseño Prototype, en entradas anteriores podemos

apreciar diferentes patrones, como Factory, ObjectPool, etc. puedes ver

por supuesto la entrada introductoria al tema aquí, y puedes ver el listado

de teoría donde hay una sección de patrones aquí.

El patrón prototype tiene como idea fundamental, la de crear objetos

basándose en clonar objetos previamente creados, debe incluir en su

abstracción la función clonadora, para que luego en cada caso particular

se establezca las especificaciones de la clonación (esto es la funcion

__clone).

Este patrón es de utilidad cuando se quiere separar la lógica de la

creación de objetos de su futura implementación creando así una

instancia inicial pasando por todo el proceso de la creación, para luego

simplemente copiar esa instancia y manejarla sin pensar en cómo fue

construida y no tener que pasar por dicho proceso de nuevo.

La instancia prototipo solo debe ser utilizada para ser clonada, y no debe ser

utilizada con otro propósito, por evidentes razones.

Los patrones de diseño creacionales son aquellos que abstraen el proceso de

instanciación. Ellos ayudan a hacer un sistema independiente de cómo sus

objetos son creados, compuestos, y representados. Un patrón creacional de

clase usa herencia para variar la clase que es instanciada, mientras un patrón

creacional de objeto delegará la instanciación a otro objeto.

Los patrones creacionales se vuelven importantes en sistemas que pasan a

depender más de la composición de objetos que de la herencia de clases. Como

eso sucede, el énfasis cambia de modificar difícilmente un conjunto fijo de

comportamientos hacia definir un conjunto pequeño de comportamientos

fundamentales que pueden ser compuestos dentro de cualquier número de los

más complejos. Creando así objetos con un comportamiento particular que

requiere más que simplemente instanciar una clase. Los patrones creacionales

son patrones que abstraen el proceso de instanciación. Procuran independizar

el sistema de cómo sus objetos son creados, compuestos y representados.

Encapsulan conocimientos sobre clases concretas usadas por el sistema.

Los patrones de diseño de сreасión proporcionan ayuda а la hora de crear

objetos desde el punto de vista de proporcionar un apoyo en la toma de

decisiones, incluso cuando esta toma de decisiones sea de forma dinámiса.

Dentro de los patrones creacionales encontramos a:

Abstract Factory

El patrón Abstraсt Faсtory o Fábrica Abstracta resuelve el problema de crear

familias de objetos. Permite trabajar con objetos de diferentes familias de manera

que no se mezclen entre sí. El patrón Abstraсt Faсtory, por tanto, se recomienda

cuando se determina la inclusión de nuevas familias de productos en un futuro,

pero resultaría contraproducente si que necesita añadir nuevos productos o

modificar los existentes, ya que tendría repercusión en todas las familias

creadas.

Aborda el problema de la creación de familias de objetos, ofrece una interfaz

para la creación de familias de productos relacionados o dependientes sin

especificar las clases concretas a las que pertenecen. Este patrón se conoce

también como Kit o toolkit.

Se usa cuando:

Un sistema debe ser independiente de cómo se crean, componen y representan

sus productos.

Un sistema debe ser configurado con una familia de productos entre varias.

Una familia de objetos producto relacionados está diseñada para ser usada

conjuntamente y es necesario hacer cumplir esa restricción.

Se quiere proporcionar una biblioteca de clases de productos y sólo se quiere

revelar sus interfaces, no sus implementaciones.

Este patrón está recomendado para situaciones en las que tenemos una familia

de productos concretos y prevemos la inclusión de distintas familias de productos

en un futuro.

Algunas consecuencias del uso de Abstract Factory son:

Aísla las clases concretas.

Facilita el intercambio de familias de productos.

Promueve la consistencia entre productos.

Una desventaja es que es difícil dar cabida a nuevos tipos de productos.

Motivación

Un caso relativamente común de uso de este patrón se da en la creación de

familias de interfaces gráficos en las cuales los elementos (productos) de la

interfaz se mantienen constantes (por ejemplo labels, botones, cajas de texto,…)

pero el dibujado de dichos elementos puede delegarse en distintas familias de

forma que, en función de la fábrica seleccionada obtenemos unos botones u

otros.

Estructura:

4.6 Patrones de Comportamiento.

Los patrones de diseño de comportamiento son una herramienta muy útil de la

ingeniería de software. Un significativo aporte es el que brindan los denominados

“patrones de comportamiento” (clasificación Gof), ya que facilitan el manejo de

comportamientos complejos. Uno de los requerimientos para la implementación

exitosa de un patrón es que posea una especificación clara El concepto de

Perfiles UML ha sido empleado en la especificación de patrones de diseño de

tipo estructural (según clasificación Gof). El presente trabajo propone un camino

para la especificación de patrones de comportamiento haciendo uso de esta

metodología.

Patrón de Comportamiento Facade.

Provee una interface unificada a un conjunto de interfaces en un subsistema.

Este patrón define una interface a alto nivel que hace al sistema, más fácil de

utilizar. [GOF95] Dividir un sistema intensivo en subsistema ayuda a disminuir la

complejidad. Uno de los principales objetivos de los patrones del diseño es

disminuir la comunicación y la dependencia entre los subsistemas. El Patrón

Facade provee una simple interface para mayor facilidad a los demás

subsistemas. Por ejemplo: Para un módulo de eLearning en la Facultad de

Ingeniería Industrial, un estudiante desea saber si un curso virtual está habilitado.

Para realizar esto, el Sistema debe validar a través de otros subsistemas (que

constituyen en sí mismos otros módulos) la identidad y el ciclo del usuario

(subsistemas de Usuarios), que el alumno no adeude libros (subsistema de

Biblioteca), y obtener la lista de documentos disponibles para el alumno y para

un determinado curso. A través del patrón Facade se puede definir una sola

interface para invocar a todos los sistemas involucrados con una simple línea de

código.

Patrón de Comportamiento Observer.

Define una dependencia uno a muchos entre los objetos, de tal forma que

cuando uno de los objetos cambia de estado, todas sus dependencias son

actualizadas y notificadas automáticamente [GOF95]. Este patrón de diseño en

el ámbito de comportamiento, es una herramienta muy útil para la comunicación

de cambio de estado entre los objetos y los componentes.

Patrones de comportamiento.

Cadena de responsabilidad: permite que un conjunto de clases intenten

manejar un requerimiento.

Interpreter: define una gramática de un lenguaje y usa esa gramática para

interpretar sentencias del lenguaje.

Iterator: permite recorrer una estructura de datos sin conocer detalles de cómo

están implementados los datos

Observer: algunos objetos reflejan un cambio a raíz del cambio de otro, por lo

tanto se le debe comunicar el cambio de este último.

Strategy: cantidad de algoritmos relacionados encerrados en un contexto a

través del cual se selecciona uno de los algoritmos.

Los patrones de diseño software de comportamiento son aquellos que están

relacionados con algoritmos y con la asignación de responsabilidades a los

objetos. Describen no solamente patrones de objetos o de clases, sino que

también engloban patrones de comunicación entre ellos. Al igual que los otros

tipos de patrones, se pueden clasificar en función de que trabajen con clases

(Template Method, Interpreter) u objetos (Chain of Responsability, Command,

Iterator, Mediator, Memento, Observer, State, Strategy, Visitor).

La variación de la encapsulación es la base de muchos patrones de

comportamiento. Cuando un aspecto de un programa cambia frecuentemente,

estos patrones trabajan con un objeto que encapsula dicho aspecto, teniendo

que definir por tanto, una clase abstracta que describe la encapsulación del

objeto. A continuación, definiremos algunos de los patrones de diseño software

comportamiento más habitual.

Command

El patrón de diseño software de comportamiento Command permite realizar una

operación sobre un objeto sin conocer realmente las instrucciones de esta

operación ni el receptor real de la misma. Esto se consigue encapsulando la

petición como si fuera un objeto, con lo que además se facilita la parametrización

de los métodos.

Las principales aplicaciones del patrón de comportamiento Command

serían:

- Facilitar la parametrización de las acciones a realizar.

- Implementar estructuras de CallBack, especificando qué órdenes queremos

que se ejecuten enfrente a qué situaciones.

- Independizar los eventos de "petición" y "ejecución".

- Dar un soporte factible a la operación "deshacer".

- Desarrollar sistemas utilizando órdenes de alto nivel que se construyen con

primitivas.

Los principales agentes de este patrón son:

Command: Declara la interface para la ejecución de la operación.

Concrete Command: Define la relación entre el objeto Receiver y una acción,

además de implementar el método básico Execute al invocar las operaciones

correspondientes en Receiver.

Client: Crea un objeto Concrete Command y lo relaciona con su Receiver.

Invoker: Envía las solicitudes al objeto Command.

Receiver: Es la clase que gestiona la ejecución de las operaciones asociadas a

la solicitud. Cualquier clase puede ser receptora.

Este sería el diagrama de clases general del patrón de comportamiento

Command:

4.7 Patrones Estructurales.

Los patrones de diseño estructurales están enfocados en la gestión de la forma

en la que las clases y los objetos se combinan para dar lugar a estructuras más

complejas. Al igual que en las otros tipos de patrones, podemos hablar de

patrones estructurales asociados a clases (Adapter) y asociados a objetos

(Bridge, Composite, Decorator, Facade, Flyweight, Proxy). Los primeros utilizan

la herencia mientras que los segundos se basan en la composición. Los patrones

estructurales asociados a objetos describen formas de componer los objetos

para conseguir nuevas funcionalidades. La flexibilidad de la composición de

estos objetos surge de la posibilidad de cambiar dicha composición en tiempo de

ejecución, lo que es imposible con la composición estática tradicional de clases.

Adapter

El patrón Adapter convierte la interfaz de una clase en la que otra necesita,

permitiendo que clases con interfaces incompatibles trabajen juntas.

Por lo tanto, el uso de este patrón estructural está indicado cuando se quiere

usar una clase ya implementada y su interfaz no es similar con la necesitada o

cuando se desea crear una clase reusable que coopere con clases no

relacionadas o que tengan interfaces compatibles.

Sin embargo, hay que hacer distinción entre si queremos adaptar un objeto o

una clase o interfaz completa. Un adaptador de clase adapta la clase Adaptee a

la interfaz de la clase Target, trabajando con una clase adaptada concreta. Por

ello, una clase adaptadora no funcionará cuando se desee adaptar, además de

la clase objetivo, todas sus subclases. Sin embargo, un adaptador de objetos

permite que un único Adapter trabaje con muchos Adaptees. De este modo, el

Adapter también puede agregar funcionalidad a todos los Adaptees de una sola

vez.

Los participantes de este patrón serían los siguientes:

Client: Es el principal agente en la formación de objetos para la interfaz Target.

Target: Interfaz del dominio específico que usa el Client.

Adaptee: Es la interfaz ya existente que necesita adaptarse.

Adapter: Es quien adapta la interfaz del Adaptee a la interfaz Target.

Este sería el diagrama de clases general del patrón:

Los patrones estructurales (structural patterns) podrían llamarse patrones de

relaciones, o algo parecido, porque su principal función es facilitar y mejorar las

relaciones entre objetos. Una solución elegante es utilizar inteligentemente

patrones estructurales. Pero cuidado, puede ser arma de dos filos. Podemos

caer en la tentación de meter patrones en todos lados, incluso cuando no es

necesario. Nuestro código puede comenzar a crecer y crecer sin hacer aún nada,

bajo la premisa de que todo lo queremos hacer con patrones. 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.

Los dos ámbitos de los patrones Estructurales son:

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.

Clases de Patrones estructurales:

Patrón adaptador: “adapta” una interfaz para una clase en otra que espera un

cliente.

Patrón agregado: es una versión del patrón compuesto con métodos para

agregar hijos.

Patrón de puente: desacopla una abstracción de su implementación, de modo

que las dos puedan variar en forma independiente.

Patrón compuesto: estructura de árbol de objetos en los que cada uno tiene la

misma interfaz.

Patrón contenedor: crea objetos con el único propósito de que sostengan a

otros y los administren.

Patrón de proximidad: clase que funciona como interfaz respecto de otra cosa.

Tubos y filtros: cadena de procesos en los que la salida de cada uno es la

entrada del siguiente.