Universidad Gerardo Barrios

Lic. Carla Milagro López

Asignatura: Ing. De Software 2

Tarea: Patrones de Diseño Web

Responsable: Gabriela Stephany Hernández Hernández

Patrones de Diseño Web.

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

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.

El grado de usabilidad de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo. Se

mide a partir de pruebas empíricas y relativas.

Empírica: porque no se basa en opiniones o sensaciones, sino en pruebas de usabilidad realizadas en

laboratorio u observadas mediante trabajo de campo.

Relativa: porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo

menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el

producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas

similares.

El concepto de usabilidad se refiere a una aplicación (informática) de (software) o un aparato (hardware),

aunque también puede aplicarse a cualquier sistema hecho con algún objetivo particular.

El modelo conceptual de la usabilidad, proveniente del diseño centrado en el usuario, no está completo sin la idea

utilidad. En inglés, utilidad + usabilidad es lo que se conoce como usefulness.

Jakob Nielsen definió la usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces

Web.

En interacción persona-ordenador, la usabilidad se refiere a la claridad y la elegancia con que se diseña la

interacción con un programa de ordenador o un sitio web. El término también se usa a menudo en el contexto de

productos como la electrónica de consumo o en áreas de comunicación, y en objetos que transmiten conocimiento

(por ejemplo, un libro de recetas o un documento de ayuda en línea). También puede referirse al diseño eficiente de

objetos mecánicos como, por ejemplo, un manubrio o un martillo.

Reglas de usabilidad web

Existen 5 principales reglas que adaptadas a una web, se les puede considerar como un web "usable".

Rápido: Las páginas deben cargarse en una media de 4 segundos. Los usuarios lo más que esperarán en

ver el contenido de una página web es de una media de 10 segundos. - La mayoría de los usuarios disponen

de módem para su acceso a Internet, por lo que nuestras páginas deben de ser lo menos pesadas posibles

con el fin de que los usuarios no esperen mucho tiempo, porque de lo contrario cancelarán la visita.

Simple: Mantenga una navegación constante. No fuerce a los visitantes a aprender diversos caminos o

esquemas para la navegación en diversas partes de su site. - No abuse de la utilización de la animación,

esto puede abrumar y cansar la vista.

Investigable: Los motores de búsqueda buscan el texto real. No prestan ninguna atención a los gráficos y al

código de programación (como el Javascript). Evite estas situaciones si desea que su web esté bien

posicionada en los buscadores.

Para la mayoría: Los Sitios Web necesitan ser compatibles con todos los navegadores y ordenadores para

su fácil usabilidad. - Utilice HTML simple y llano siempre que sea posible, es el código más compatible con

todos los navegadores.

Manténgalo actualizado: La manera más rápida para que una web pierda credibilidad es contener la

información anticuada.

Beneficios de la usabilidad

Entre los principales beneficios se encuentran:

Reducción de los costes de aprendizaje y esfuerzos.

Disminución de los costes de asistencia y ayuda al usuario.

Disminución en la tasa de errores cometidos por el usuario y del trabajo.

Optimización de los costes de diseño, rediseño y mantenimiento.

Aumento de la tasa de conversión de visitantes a clientes de un sitio web.

Aumento de la satisfacción y comodidad del usuario.

Mejora la imagen y el prestigio.

Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la satisfacción y la

productividad.

Todos estos beneficios implican una reducción y optimización general de los costes de producción, así como un

aumento en la productividad. La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas

de tiempo.

Jakob Nielsen, considerado el padre de la Usabilidad, la definió como el atributo de calidad que mide lo fáciles de

usar que son las interfaces web. Es decir un sitio web usable es aquél en el que los usuarios pueden interactuar de

la forma más fácil, cómoda, segura e inteligentemente posible.

No sólo la tecnología y el aspecto gráfico son factores determinantes para hacer un sitio web llamativo. Es

importante que cumpla con las siguientes características:

Entendible

Novedoso

Comprensible

Inteligente

Atractivo

Es decir la finalidad, en este caso de un sitio web, es lograr que el usuario encuentre lo que busca en el menor

tiempo posible.

La Usabilidad de un sitio web está determinada por sus contenidos, entre más cercanos estén al usuario, mejor es la

navegación por el mismo y más acertada será la experiencia al enfrentarse a la pantalla.

Lógicamente es imposible crear un sitio web ciento por ciento perfecto y en óptimas condiciones, pues no se puede

agradar al mismo tiempo a millones de usuarios, sin embargo, los diseñadores y creadores deben tratar de mostrar

todos los elementos de una manera clara y concisa, minimizando el número de clics y de scroll.

En ocasiones los cibernautas se enfrentan a sitios Web de altísima calidad y contenido, pero que presentan

dificultades en su contenido. Por ejemplo, que los menús son de difícil ubicación, o que la herramienta de búsqueda

no aparece en un lugar visible.

Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios

sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del

tiempo y esfuerzo que ellos consideran adecuado para esa tarea".

La usabilidad por lo tanto se dirige a conseguir el objetivo de satisfacer más a los usuarios, con un sitio web más

eficaz y eficiente.

Los principales conceptos en torno a la usabilidad web son los siguientes:

Visibilidad: Es importante que el usuario pueda reconocer los diferentes elementos de manera sencilla, sin

mayor esfuerzo.

Consistencia: Una información debe ser reiterada de diferentes formas pero debe ser siempre la misma.

Tiene que haber una definición en torno a los patrones de la página web y la experiencia del usuario para

no crear confusión.

Compatibilidad: El sitio web debe adecuarse a la forma de pensar del usuario promedio, del cliente

potencial y el público meta. En estética y funcionalidad, los procesos deben adaptarse a las expectativas

de los visitantes.

Eficiencia: Debes reducir el trabajo del usuario en todos los niveles, facilitar el camino para que pueda

encontrar la información que desea o que pueda retroceder en caso de hallar un resultado indeseado. Hay

que predecir los posibles pasos a seguir del visitante y prevenir los errores.

Un buen consejo es siempre tener en cuenta quiénes serán los usuarios habituales de la página web y así enfocar el

diseño en ese camino, tomando en cuenta su experiencia y nivel de conocimiento.

Errores de usabilidad web

Sin importar la cantidad de visitas que puede tener un sitio web o las ganancias que obtenga por determinado

servicio o producto, es fácil detectar algunos problemas para el uso del usuario promedio.

Algunas de estas fallas de usabilidad web son las siguientes:

o 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

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

o Links invisibles: La navegación es una parte muy importante, por lo que no encontrar los enlaces

necesarios para movilizarse a través de la página web puede traer muchas dificultades.

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

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

Otros aspectos de la usabilidad

A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la

usabilidad:

Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el

sistema o producto. Está relacionada con la previsibilidad, sintetización, familiaridad, la generalización de

los conocimientos previos y la consistencia.

Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más

naturales a su formación específica. Tiene que ver con la eficacia y eficiencia de la herramienta.

Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar

información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea,

similitud con tareas anteriores y la optimización entre el usuario y el sistema.

Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con

la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.

Diseño web líquido o fluido.

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

la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (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 de retrato y móviles en posición paisaje) porque las imágenes se

miniaturizan y los textos se vuelven ilegibles. Si para evitar estos problemas se fija un ancho mínimo aparecen las

barras de scroll de desplazamiento

horizontal.

Como muestra la imagen, para obviar

estos problemas los diseñadores crean

versiones de layouts según la pantalla

donde se vaya a visualizar la web:

pantalla de televisión, ordenador de

escritorio, Tablet, móvil.

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

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

alta resolución de pantalla (por ejemplo un iMac)

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

Layout para tablets con un ancho mínimo de 720 px en posición vertical (portrait) y un máximo de 985 px

para tablets en posición horizontal (landscape)

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

"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, ( @media ).

En el pasado el diseño de la interfaz se basaba en resoluciones aproximadas de 960 pixeles, y esto funcionaba

porque un 99% de los usuarios podían adaptarse y leer fácilmente esta resolución, independientemente de la

máquina, el navegador, o el sistema operativo que estaban utilizando. Los tiempos cambiaron y cada vez son más los usuarios que utilizan dispositivos móviles para navegar. Ante esto las empresas empezaron a diseñar dos

aplicativos, para diferentes tipos de dispositivos, una versión full y una versión más liviana para dispositivos móviles que intentaban cubrir todo el contenido de la versión original. Está técnica tiene ciertas desventajas porque exige

un mayor esfuerzo, la sensación de no tener todo en la versión móvil y la creciente diversidad de modelos con una igual cantidad de tamaños.

Se tiene que tener en cuenta que la venta de "Smartphone", está despegando y superará muy pronto a la venta

de PC (tanto de escritorio como portátiles). Actualmente basados en las estadísticas de 20 personas que visitan tu

sitio web, por lo menos 1 de ellos lo hace por medio de un dispositivo con pantalla de menos de 3 pulgadas. Esto a

disparado el diseño amigable-móvil en el que se crean diseños que se ajustan a cada tamaño de pantalla.

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.

La técnica de diseño líquido:

1. 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:

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

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

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

4. Utilizar CSS Query @media : La característica de "Consulta de medios" en CSS 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 las mayoría de navegadores móviles.

1. #wrapper { 2. width: 80%; 3. margin: auto; 4. max-width: 1200px; 5. min-width: 800px; 6. } 7. 8. @media screen and (max-width: 800px) { 9. #wrapper { 10. width: 90%; 11. min-width: 0; 12. } 13. }

En general cuando hablamos de las diferentes técnicas que se pueden emplear hay algunas propiedades CSS que

suelen resultar útiles y que son: max-widht, min-width, max-height y min-height.

Propiedad max-width: Esta propiedad permite definir la anchura máxima de un elemento, indicada en una unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a

que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos online

(aunque sí a elementos online tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas. Si se usa un porcentaje, se refiere al ancho del elemento contenedor. En el diseño fluido, nos

puede servir para evitar que en las pantallas muy grandes la página web se expanda demasiado lateralmente. De este modo podemos permitir que se vea más grande, pero con un límite

máximo. Ejemplo: #columna Lateral {width: 25%; max-widht: 420px; } #espacio Central {width: 75%; max-

widht: 1680px;}.

propiedad min-width: Esta propiedad permite definir la anchura mínima de un elemento, indicada en una

unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a

que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos inline

(aunque sí a elementos online tipo imagen u objetos incrustados), filas de tablas o grupos de filas de

tablas.

Si se usa un porcentaje, se refiere al ancho del elemento contenedor.

En el diseño fluido, nos puede servir para evitar que en las pantallas muy pequeñas la página web se miniaturize. De

este modo podemos permitir que se vea más pequeña, pero con un límite mínimo. Ejemplo: #columna Lateral {widht:

25%; max-widht: 420px; min-widht: 180px; } #espacio Central {width: 75%; max-widht: 1680px; min-width: 720px; }.

propiedad max-height: Esta propiedad es análoga a max-widht, pero menos usada ya que como hemos

indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento

excepto elementos online (aunque sí a elementos online tipo imagen u objetos incrustados), columnas de

tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height

del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.

propiedad min-height:Esta propiedad es análoga a min-widht, pero menos usada ya que como hemos

indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento

excepto elementos online (aunque sí a elementos online tipo imagen u objetos incrustados), columnas de

tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height

del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.

Como diseñador web uno de los mayores desafíos es que todo website que realice debe adaptarse a diferentes

dispositivos y tamaños de pantalla para mostrar el contenido. Pero diseñar un mismo sitio más de 3 veces para que

se adapte a cada tamaño de dispositivo es extremadamente cansado y consumen mucho tiempo, para hacer este

trabajo fácil, me di cuenta de que lo más lógico sería usar un diseño de “Grid Fluida” para el “layout” de mi website,

muy parecido a las “grids” usadas en JQuery Mobile estas celdas me permiten, estas reaccionan a los cambios en el

tamaño de la pantalla con el uso de porcentajes o “width”.

Todo sitio web debe estar en la capacidad de adaptar su contenido al tamaño del dispositivo que esta acensado a los

contenidos, facilitando la lectura y la navegación, todo diseñador web debe apuntar a este formato, y desde luego

aprender a trabajar con las herramientas actuales para crear proyectos y dar soluciones, crear el sitio web es solo

el primer paso ya que luego debe valerse de otras herramientas para hacerlo dinámico y interactivo, es realmente

mucho los conceptos que se manejan y solo la práctica da una visión solida de lo que estamos creando y de lo que

aún falta por diseñar e implementar.

En el diseño web existen fundamentalmente 4 tipos de diseños:

es, con diferencia, el más utilizado de la Internet, y es aquel que permanece El diseño web fijo:

inalterable sea cual sea el dispositivo donde se visualiza el sitio web. Es indiferente al tamaño de la pantalla

y a la anchura del navegador web que la visualiza. Sean cuales sean las características del dispositivo,

pantalla o navegador, siempre se visualiza el mismo tamaño preestablecido por el diseñador web en

píxeles.

es aquel que tiende a ocupar todo el ancho de la pantalla, El diseño web fluido o diseño web líquido:

sea cual sea el tamaño de esta. Es un tipo de diseño menos utilizado que el anterior, ya que requiere de

mucho más trabajo por parte del diseñador web y a 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 fijo.

es un tipo de diseño muy parecido al fluido, sólo que en este caso el contenido El diseño web elástico:

también crece junto al ancho del diseño para rellenar la pantalla. Es, con diferencia, un tipo de diseño

prácticamente residual y muy poco usable. Volvemos a lo mismo que en el caso del diseño fluido, el diseño

elástico puede resultar más o menos agradable en tamaños de pantalla más o menos pequeños, pero

cuando se utilizan pantallas muy grandes el contenido se vuelve exageradamente irracional, por lo que

salvo contadas excepciones, no tiene ningún tipo de razón de ser. En este caso el diseñador web utiliza em

para fijar los anchos de su diseño web y del resto del contenido que alberga. Es un tipo de diseño del que

debemos alejarnos lo más posible.

: que es un tipo de diseño que se transforma en función Por último tenemos el diseño web sensible

del tipo de dispositivo o del ancho del navegador web que lo visualiza. De esta forma se muestra un diseño

web en dispositivos smartphones, otro diferente en dispositivos tipo tabletas, y otro distinto en

ordenadores. De esta forma el diseñador web se asegura de que el contenido que visualizan los usuarios

se ajusta a las necesidades de su dispositivo y, aunque la información mostrada es exactamente igual, sea

cual sea el dispositivo que la visualiza, el diseño varía sensiblemente para optimizar al máximo el acceso a

la misma. En este caso el diseñador web emplea diferentes hojas de estilo que cargará mediante el uso de

JavaScript en función de las necesidades que se establezcan, principalmente ancho del navegador web y

tipo de dispositivo. Este es el diseño que más en auge está teniendo gracias al uso masivo de dispositivos

smartphones y tabletas en el uso diario de la Internet. El único problema que plantea este tipo de diseño,

además de su complejidad, peso y tráfico generado, es el de la accesibilidad para dispositivos que tienen

inhabilitado o que no disponen de tecnología JavaScript, aunque por suerte son una inmensa mayoría en la

fauna de Internet.

Diseño web hibrido.

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.

Hasta ahora teníamos dos opciones para construir un sitio web disponible en dispositivos móviles. O recortábamos

el diseño (responsive design, RWD) o el contenido (adaptive content). Difícilmente se ha optado por aplicar las dos

opciones al mismo tiempo.

El RWD, la escuela más extendida, utiliza funciones de los estilos CSS para redibujar el contenido de una página web

en función de la anchura detectada de la pantalla. Los menús se convierten en una lista de opciones desplegables,

titulares y cuerpo de texto se amoldan al ancho disponible y el resto de las secciones cuelgan al final de la página.

Es la solución que utilizan generalmente los blogs, que tienen escasa complejidad en la arquitectura de su

información y se adaptan bien a la capacidad de una pantalla de dispositivo móvil.

La maquetación de una página web utilizando hojas de estilo en cascada (css) puede hacerse mediante diseños

híbridos, es decir, combinando las diferentes opciones de maquetación con css:

Diseños de ancho fijo (utilizan píxeles).

Diseños de ancho variable, llamados diseños «líquidos» o «fluidos» (utilizan porcentajes).

Diseños elásticos (utilizan «em»).

Los diseños híbridos combinan las tres opciones anteriores y representan la mejor opción para que nuestros

diseños sean compatibles tanto con cualquier resolución (tamaño) de pantalla como con cualquier tamaño de letra.

Al utilizar «em» y «porcentajes», ambas unidades relativas, para las medidas de fuentes y cajas, cuando

aumentamos o disminuimos el tamaño de fuente en el navegador, o el tamaño de pantalla se redimensiona

automáticamente el tamaño de todos los elementos de la página y se respeta nuestro diseño original.

Por tanto, este diseño es el ideal si pretendemos que nuestra «web» se visualice correctamente en todo tipo de

plataformas y/o dispositivos (teléfonos móviles, celulares, ordenadores portátiles, ordenadores de sobremesa,

tabletas, etc.).

Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se expresará en porcentajes (%) para que se

adapte al tamaño de la ventana del navegador y la otra se expresará en «em» para que se adapte al tamaño del

texto.

Los 3 tipos de aplicaciones móviles: ventajas e inconvenientes

En anteriores posts hemos hablado sobre las ventajas de tener una aplicación para tu empresa, y hemos dado

información sobre cuánto cuesta crear una App. Para completar esta guía, definimos en profundidad qué tipos de

aplicaciones móviles hay y te damos algunos consejos para que selecciones la que mejor le vaya a tu empresa o

startup.

1. App nativas

Ventajas:

Acceso completo al dispositivo

Mejor experiencia del usuario

Visibilidad en APP Store

Envió de notificaciones o “avisos” a los usuarios

La actualización de la App es constante

Inconvenientes:

Diferentes habilidades / idiomas/herramientas para cada plataforma de

destino

Tienden a ser más caras de desarrollar

El código del cliente no es reutilizable entre las diferentes plataformas

Una aplicación nativa es la que se desarrolla de forma específica para un determinado sistema operativo,

llamado Software Development Kit o SDK. Cada una de las plataformas, Adroid, iOS o Windows Phone, tienen un

sistema diferente, por lo que si quieres que tu App esté disponible en todas las plataformas se deberán de crear

varias apps con el lenguaje del sistema operativo seleccionado.

Por ejemplo:

Las App para iOS se desarrollan con lenguaje Objective-C

Las App para Android se desarrollan con lenguaje Java

Las App en Windows Phone se desarrollan en .Net

Cuando hablamos de desarrollo móvil casi siempre nos estamos refiriendo a aplicaciones nativas. La principal

ventaja con respecto a los otros dos tipos, es la posibilidad de acceder a todas las características del hardware del

móvil: cámara, GPS, agenda, dispositivos de almacenamiento y otras muchas. Esto hace que la experiencia del

usuario sea mucho más positiva que con otro tipo de App.

Además las aplicaciones nativas no necesitan conexión a internet para que funcionen.

La descarga e instalación de estas apps se realiza siempre a través de las tiendas de aplicaciones (App store de los

fabricantes). Esto facilita el proceso de marketing y promoción que explicaremos en próximos posts y que es vital

para dar visibilidad a una App.

Está claro que si el coste no es un obstáculo en tu empresa, o tienes la certeza de que tu App será rentable, la mejor

opción será siempre el desarrollo de una aplicación nativa para cada plataforma (iOS, Android y Windows Phone). Si

tu presupuesto es limitado, las aplicaciones web tienen también grandes ventajas para tu negocio.

2. Web App

Ventajas:

El mismo código base reutilizable en múltiples plataformas

Proceso de desarrollo más sencillo y económico

No necesita ninguna aprobación externa para publicarse (a diferencia a las nativas para estar

visibles en App Store)

El usuario siempre dispone de la última versión

Puede reutilizarse sitios “responsive” ya diseñados

Inconvenientes:

Requiere de conexión a internet

Acceso muy limitado a los elementos y características del hardware del dispositivo

La experiencia del usuario (navegación, interacción…) y el tiempo de respuesta es menor que una App

nativa

Requiere de mayor esfuerzo en promoción y visibilidad

Una aplicación web o web App es la desarrollada con lenguajes muy conocidos por los programadores, como es

el HTML, Javascript y CSS. La principal ventaja con respecto a la nativa es la posibilidad de programar independiente

del sistema operativo en el que se usará la aplicación. De esta forma se pueden ejecutar en diferentes dispositivos

sin tener que crear varias aplicaciones.

Las aplicaciones web se ejecutan dentro del propio navegador web del dispositivo a través de una URL. Por ejemplo

en Safari, si se trata de la plataforma iOS. El contenido se adapta a la pantalla adquiriendo un aspecto de navegación

APP.

¿Puede considerarse esto una APP? En realidad la gran diferencia con una aplicación nativa (además de los

inconvenientes que se muestran en la tabla) es que no necesita instalación por lo que no pueden estar visibles en

App store y la promoción y comercialización debe realizarse de forma independiente. De todas formas se puede

crear un acceso directo que sería como “instalar” la aplicación en el dispositivo.

Las apps web móviles son siempre una buena opción si nuestro objetivo es adaptar la web a formato móvil.

3. Web App nativa

Ventajas: Es posible distribuirla en las tiendas de iOS y Android

Instalación nativa pero construida con JavaScript, HTML y CSS

El mismo código base para múltiple plataforma

Acceso a parte del hardware del dispositivo

Inconvenientes: Experiencia del usuario más propia de la aplicación web de la App nativa

Diseño visual no siempre relacionado con el sistema operativo en la que se le muestre

Una aplicación híbrida es una combinación de las dos anteriores, se podría decir que recoge lo mejor de cada una de

ellas. Las apps híbridas se desarrollan con lenguajes propios de las webabpp, es decir, HTML, Javascript y CSS por lo

que permite su uso en diferentes plataformas, pero también dan la posibilidad de acceder a gran parte de las

características del hardware del dispositivo. La principal ventaja es que a pesar de estar desarrollada con HTML,

Java o CSS, es posible agrupar los códigos y distribuirla en App store.

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.

En este artículo pretendo ponerlo de manifiesto a partir de una serie de informaciones que seguramente nos

servirán a todos.

Muchos de los datos que voy a dar serán de sobra conocidos por los lectores, quizás alguno de ellos resulte más

revelador, pero en realidad hoy pocas personas desconocen que la web móvil está tomando mayor fuerza cada mes

que pasa. Quizás aun menos de los lectores carezcan en la actualidad de algún tipo de dispositivo móvil, con el que

poder acceder a Internet, ya sea smartphone o tablet, con lo cual todavía les resultará más patente la necesidad de

hacer un contenido web que se vea correctamente en todos los aparatos que puedan llegar a consumirlo.

En el momento de escribir estas líneas DesarrolloWeb.com no tiene un diseño optimizado para móvies, pero lo

tendrá en breve! No obstante, eso no quiere decir que yo como director del proyecto piense que no se debe diseñar

para móviles, muy al contrario. Al hacer este estudio de diseño web para dispositivos, que vamos a ir publicando en

diversos artículos, me he terminado de convencer de esta necesidad y tengo un compromiso conmigo mismo de

cambiar la situación. Espero que a vosotros también os convenza de ello.

El desarrollo tecnológico y el hardware dominador de cada década

A lo largo de las pasadas décadas diversos sistemas

han tomado fuerza puntual, para dejar paso luego a

distintos tipos de máquinas más avanzadas y por

tanto con mayores capacidades de procesamiento o

mayores posibilidades de penetrar en el mercado de

consumo.

En la siguiente gráfica se puede ver

retrospectivamente la historia de los equipos

informáticos para la computación a lo largo de su

relativamente corto periplo entre nosotros. Podremos comprobar como cada década más o

menos existe un dominador del mercado.

Importancia de la optimización de sitios web para móviles

Hay otra infografía que también nos ofrece unas gráficas interesantes, sobre todo para quienes nos dedicamos a

hacer webs, para ver hasta qué punto trae fuerza este crecimiento de usuarios de Internet en movilidad. Se llama

Crecimiento de la importancia de la optimización web para móvil y de ella he extraído otras imágenes

sobre las que deseo llamar la atención.

La fuente de esta información es Morgan Stanley y en el estudio nos muestran que en realidad la etapa

dominada por los dispositivos ya pasó. De hecho, aún no sabemos qué tipo de hardware va a dominar la

presente década o si simplemente los dispositivos van a continuar creciendo sin definirse otro formato de

máquina para la computación.

Importancia de la optimización de sitios web para móviles

Hay otra infografía que también nos ofrece unas gráficas interesantes, sobre todo para quienes nos dedicamos a

hacer webs, para ver hasta qué punto trae fuerza este crecimiento de usuarios de Internet en movilidad. Se llama

Crecimiento de la importancia de la optimización web para móvil y de ella he extraído otras imágenes sobre las que

deseo llamar la atención.

Esta primera gráfica no nos dice demasiado. Efectivamente, el crecimiento supera un 1000% en un año y medio,

aunque no deja de ser un todavía pequeño porcentaje (7%) del tráfico en general. Claro que la gráfica termina en

octubre de 2011 y continuando esa tendencia, durante 2012 cambiará bastante. Sin embargo, cabe dar una mayor

atención a los siguientes datos que nos aporta el estudio.

La imagen habla por si misma, pero por concretar alguna cosa, vemos que del top 500 de Alexa, solo

aproximadamente el 22% de los sitios tienen un sitio optimizado para dispositivos móviles. Si nos limitamos a los

comercios online, menos del 5% tienen un sistema de compras construido pensando en la Internet Móvil. Esos datos

contrastan con los siguientes de la infografía, en los que vemos hasta qué punto una versión para móviles provoca

un mayor grado de satisfacción del usuario, así como una tasa de retorno más elevada. El 85% de los usuarios se

sentiría más comprometido con un comercio online optimizado para móviles y el 51% sería más favorable a hacer

negocios con un sitio que tuviera versión para dispositivos en movilidad.

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 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 aun

más estas capacidades en la web.

Patrones creacionales.

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

Beneficios, Desventajas y Variantes

Se debe usar 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.

Consecuencias:

Aísla las clases concretas. Facilita el intercambio de familias de productos.

Promueve la consistencia entre productos.

Desventaja:

Es difícil dar cabida a nuevos tipos de productos.

Objetivos de los patrones

Los patrones de diseño 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.

Dentro de los patrones creacionales encontramos a:

Abstract Factory

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

Patrones de comportamiento.

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.

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 estructuraas de CallBack, especificando qué órdenes queremos que se ejecuten efrente a

qué situaciones.

- Independizar los enventos 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 ejecucion de la operacion.

ConcreteCommand: Define la relación entre el objeto Receiver y una acción, además de implemetar el

método básico Execute() al invocar las operaciones correspondientes en Receiver.

Client: Crea un objeto ConcreteCommand 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:

Esquema del patrón Command

Iterator

El patrón de diseño de comportamiento Iterator es uno de los mayores exponentes de los patrones de

comportamient. Presenta la interfaz que declara los métodos necesarios para acceder, de forma secuencial, a los

objetos de una colección.

El iterator cubre la necesidad de acceder a los elementos de un contenedor de objetos sin tener que trabajar con su

estructura interna. Además, es posible que se necesite más de una forma de recorrer la estructura siendo para ello

necesario crear modificaciones en la clase. Mediante el uso del patrón, se añaden métodos que permiten recorrerla

sin referenciar su representación, por lo que la responsabilidad del recorrido se traslada a un objeto iterador. La gran desventaja de que usar este objeto iterador, más o menos encapsulado, es que muchas veces e necista conocer la estructura del contenedor para elegir del tipo de iterador más adecuado. Esto se soluciona abstrayendo

los tipos de los distintos iteradores y dotando a las estructuras de un método que cree un iterador concreto.

Las entidades participantes en el esquema general de este patrón de diseño software de comportamiento son:

Iterator: Interfaz que se usará para recorrer el contenedor y acceder a los objetos o elementos que

albergue, de tal modo que no sea necesario conocer los detalles de la estructura, siendo capaces de

manejarla de todos modos.

ConcreteIterator: Clase que implementa la interfaz propuesta por el Iterator. Mantendrá la posición actual en el recorrido de la estructura almacenándola en el aggregate, sabiendo así cual será el siguiente

objeto en el recorrido.

Aggregate: Es la interfaz que se usará para la fabricación de iteradores.

ConcreteAggregate: Implementa la estructura de datos y el método de fabricación de iteradores que

crea un iterador específico para su estructura.

Por lo tanto, es fundamental que se implemente el control de la iteración y definir el recorrido, bien sea como un iterador externo o como uno interno que presente una actuación concreta sobre la estructura aplicándola, de forma

transparente, a todos los elementos.

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

Esquema del patrón Iterator

Observer

El patrón de comportamiento Observer define una interacción entre objetos, de manera que cuando uno de ellos

cambia su estado, el Observer se encarga de notificar este cambio a los demás.

Por tanto, la razón de ser de este patrón es desacoplar las clases de los objetos, aumentando la modularidad del lenguaje y evitando bucles de actualización.

La idea básica del patrón es que el objeto de datos (o sujeto) contenga atributos mediante los cuales cualquier objeto observador (o vista) se pueda suscribir a él pasándole una referencia a sí mismo. De este modo, el sujeto

mantiene así una lista de las referencias a sus observadores.

Dadas estas propiedades, el patrón Observer suele emplearse en el desarrollo de frameworks de interfaces gráficas orientados a objetos, enlazando 'listeners' a los objetos que pueden disparar eventos.

Las clasese participantes en el esquema general de este patrón de comportamiento son:

Subject: Es el que conoce a sus observadores, proporcionando una Interfaz para que se suscriban los

objetos de tipo Observer.

Observer: Define la interfaz para actualizar los objetos a los que se deben notificar los cambios en el objeto Subject.

ConcreteSubject: Guarda el estado de interés para los objetos ConcreteObserver y envia una notificación a sus observadores cuando cambia su estado.

ConcreteObserver: Mantiene una referencia a un objeto ConcreteSubject, guardando el estado que

debería permanecer sincronizado con el objeto observado, además de implementar la interfaz Observer para mantener su estado consistente con el objeto observado.

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

Esquema del patrón Observer

.

Strategy

Este es un patrón de diseño software de comportamiento que determina la forma de implementar el intercambio de

mensajes entre diferentes objetos que realizan diferentes tareas, pero que comparten elementos comunes. El patrón de comportamiento Strategy permite gestionar un conjunto de operaciones de entre los cuales el cliente

puede elegir el que le convenda más en cada situación, e intercambiarlo, de forma dinámica, cuando lo necesite.

Para llevar a cabo esta funcionalidad, este patrón de comportamiento trabaja con los algoritmos que implementan

las diferentes estrategias de forma que los encapsula en una jerarquía, consiguiendo que el cliente trabaje contra

un objeto intermediario o 'Context'. En este punto, el cliente puede elegir el algoritmo que prefiera de entre los implementados en las estrategias del sistema, o dejar al contexto la tarea de elejir al más apropiado para cada

situación concreta.

Por lo tanto, cualquier sistema que presente un servicio o función determinada, que pueda o deba ser realizada de

varias maneras dependiendo del contexto, será indicado gestionarlo con el patrón Strategy.

Las clasese participantes en el esquema general de este patrón de comportamiento son:

Context: Actor que necesita de las operaciones concretas de las diferentes estrategias, referenciando a

estas últimas. Puede definir una interfaz intermedia que facilite el acceso a sus datos propios por parte de

la estrategia necesaria, en caso de necesitar el intercambio de información entre el Context y diche

estrategia.

Strategy: Es la interfaz común para todos los algoritmos implementados en las diferentes estrategias.

Será lo que use el Context para invocar a la estrategia concreta que necesite.

ConcreteStrategy: Clases donde se implementan los algoritmos necesarios, usando para ello la interfaz

Strategy.

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

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.

Composite

El patrón Composite sirve para construir objetos que estén formados por tros objetos más simples, pero siempre similares entre sí, gracias a la composición recursiva. Por lo tanto, al tner todos estos objetos una misma interfaz,

el Composite simplifica el tratamiento de los mismos.

El patrón composite es ampliamente usado en el tratamiento de interfaces de usuario en las que se necesita, por

ejemplo, representar un conjunto de elementos de una interfaz gráfica. Algunos de estos elementos serán simples,

mientras que otros serán más complejos y estarán formados por varios elementos simples. Por tanto, el

comportamiento y/o la información que proporciona un elemento complejo está determinada por los elementos que lo componen.

Generalizando, nos encontraríamos frente a una situación en la que neceistaríamos representar jerarquías de

objetos de tipo parte y compuestos en la que se quiere usar la misma interfaz en las partes y en los compuestos. El patrón Composite, lo que nos ofrece es crear una interfaz o clase abstracta que actúe comosuperclase de las

clases concretas que representan las partes y los compuestos. Las clases que representan los compuestos pueden ser tratadas como partes, porque soportan la interfaz.

De este modo, encontramos que los componentes del patrón serían los siguientes:

Client: Manipula objetos atravez de la interfaz proporcionada por Component.

Component: Declara la interfaz para los objetos de la composicion, es la interfaz de acceso y manipulacion de los componentes hijo e implementa algunos comportamientos por defecto.

Composite: Define el comportamiento de los componentes compuestos, almacena a los hijos e implementa las operaciones de manejo de los componentes.

Leaf: Definen comportamientos para objetos primitivos del compuesto.

Según esto, este sería el diagrama de clases general del patrón:

Esquema del patrón Composite

Decorator

El patrón de diseño estructural Decorator facilita la tarea de añadir dinámicamente funcionalidades a un Objeto. De este modo, elimina de necesidad de crear clases que fuesen heredando de la primera, incorporando no sólo la nueva

funcionalidad, sino también otras nuevas y asociarlas a ella.

A veces se desea adicionar responsabilidades a un objeto pero no a toda la clase. Las responsabilidades se pueden

adicionar por medio de los mecanismos de Herencia, pero este mecanismo no es flexible porque la responsabilidad

es adicionada estáticamente. La solución flexible es la de rodear el objeto con otro objeto que es el que adiciona la nueva responsabilidad. Este nuevo objeto es el Decorator.

Este ejemplo de patrones estructurales de diseño software es útil cuando:

- Queremos añadir o expander las funcionalidades de objetos de forma dinámica y transparente.

- Necesitamos que ciertas responsabilidades de un objeto puedan ser retiradas de forma sencilla en un futuro.

- No es posible o no compensa realizar esta expansión de funcionalidades mediante herencia. - Existe la necesidad de expandir dinámicamente la funcionalidad de un objeto y/o eliminar la funcionalidad

extendida.

Visto esto, señalar que los participantes de este patrón serían los siguientes:

Component: Define la interface de los objetos a los que se le puede adicionar responsabilidades

dinamicamente. ConcreteComponent: Define el objeto al que se le puede adicionar una responsabilidad.

Decorator: Mantiene una refeencia al objeto Component y define una interface de acuerdo con la interface

de Component.

ConcreteDecorator: Es el encargado de sumar la responsabilidad al componente. Puede haber varipos

ConcreteDecorator.

Por lo tanto, este sería el diagrama de clases general del patrón:

Esquema del patrón Decorator

Proxy

Esta patrón estructural tiene como propósito proporcionar un intermediario para controlar el acceso a un objeto. Por ello tiene distintas aplicaciones:

- Proxy Remoto: Denominado así cuando representa a un objeto remoto. - Proxy Virtual: Usado para crear objetos bajo demanda.

- Proxy de Referencia "inteligente": Cuando sirve como sustituto de un puntero que realiza operaciones adicionales cuando accede al objeto.

- Proxy de Protección: Denominado así cuando se usa para controlar el acceso al objeto original.

La finalidad principal del patrón de diseño estructural Proxy, sería proporciona un representante o sustituto de otro

objeto para controlar el acceso a éste. Esto lo hace según la motivación deMotivación: retrasar el coste de crear e inicializar un objeto hasta que sea realmente necesario. Por lo tanto, es usado cuando se necesita una referencia a

un objeto más flexible o sofisticado que un puntero. Por ejemplo, si que queremos construir una aplicación que usa

muchos objetos visuales, lo ideal es que dichos objetos sólo se instanciaran cuando se vayan a utilizar, de tal forma

que se ahorre carga en memoria y tiempo.

Con esto, las clases participantes en el patrón, serían las siguientes:

Proxy: Mantiene una referencia al objeto real, mientras que proporciona una interfz idéntica a la del objeto

real (Real Subject) y controla el acceso a este objeto, siendo responsable de crearlo y borrarlo.

Subject: Define una interfaz común para el proxy y el objeto real.

RealSubject: Clase del objeto real que el proxy representa.

Según esto, este sería el diagrama de clases general del patrón:

Esquema del patrón Proxy

.