UNIDAD 04: PATRONES DE DISEÑO WEB.

ASIGNATURA:

Ingeniería de software II

DOCENTE:

Licda.Carla Milagro López Vásquez

RESPONSABLE:

Rodolfo Alberto Palma Ramos

CARRERA:

Técnico en Ingeniería en Sistemas y Redes Informáticas

Unidad 04 Patrones de Diseño Web.

¿Qué son los patrones de diseño?

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?

Como ya vimos en el artículo sobre principios de diseño, si queremos desarrollar

aplicaciones robustas y fáciles de mantener, debemos cumplir ciertas "reglas". Lo

pongo entre comillas porque aunque estas reglas de diseño son recomendables

(muy recomendables), no son obligatorias. Siempre podemos decidir no aplicarlas.

Aunque si no lo hacemos, hay que ser conscientes de la razón de no aplicarlas y

de sus consecuencias.

Los patrones de diseño nos ayudan a cumplir muchos de estos 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.

¿Cuántos patrones de diseño existen? ¿Tengo qué conocerlos

todos?

Patrones de diseño hay muchos. Muchísimos. Y siguen apareciendo patrones

nuevos cada poco tiempo. El desarrollo de aplicaciones es una disciplina en

constante cambio. Por tanto los problemas a los que nos enfrentamos los

desarrolladores también cambian. Así que las herramientas utilizadas, también se

van actualizando y mejorando.

Es imposible conocer todos los patrones de diseño. Lo más útil es tener

un catálogo de patrones que podamos consultar. A la hora de desarrollar una

aplicación, podremos consultar nuestro catálogo buscando patrones que nos

ayuden a solucionar problemas de diseño concretos.

Algunos ejemplos de catálogos podemos encontrarlos en OODesign, en la

Wikipedia, o el ya famoso libro Design Patterns: Elements of Reusable Object-

Oriented Software, cuyos autores son conocidos como La banda de los cuatro.

¿Qué tipos de patrones existen?

Existen diversas maneras de agrupar los patrones de diseño. Quizá la más

extendida es agruparlos según su propósito. En este caso tendríamos las

siguientes categorías:

Patrones creacionales: utilizados para instanciar objetos, y así separar la

implementación del cliente de la de los objetos que se utilizan. Con ellos

intentamos separar la lógica de creación de objetos y encapsularla.

Patrones de comportamiento: se utilizan a la hora de definir como las clases y

objetos interaccionan entre ellos.

Patrones estructurales: utilizados para crear clases u objetos que incluidos dentro

de estructuras más complejas.

¿Puedo desarrollar nuevos patrones?

Como ya he dicho antes, cada poco tiempo aparecen nuevos patrones o

revisiones de los ya existentes. Es algo lógico si tenemos en cuenta que nuestra

forma de programar está evolucionando continuamente. Nuevos frameworks,

nuevas plataformas, nuevos tipos de acceso a datos etc.

Por tanto, es factible que cualquiera pueda "descubrir" un nuevo patrón.

Lógicamente el supuesto patrón deberá ser puesto a prueba por la comunidad de

desarrolladores. Para ello deberá demostrar que es nuevo, que es correcto y que

es útil para solucionar problemas comunes de desarrollo. Un patrón no será tal si

solo sirve para solucionar un problema específico de nuestra aplicación.

4.1 Principios de usabilidad web.

Principios básicos de la usabilidad web

Hablamos de usabilidad web -concepto clave para diseñadores- al referirnos a

facilidad de acceso, ubicación y navegación

Cómo diseñar una página web es uno de los aspectos más importantes de un sitio

web y las técnicas para que pueda ser entendible y sencillo de explorar por parte

del usuario resultan determinantes.

La usabilidad web se centra en la necesidad del usuario de tener accesibilidad

web, ubicación y navegación dentro de una página web. Que todo sea claro y

estructurado para no complicar al visitante y tener el riesgo de perderlo en pocos

segundos.

El diseñador web es un personaje clave en la creación del sitio web, ya que no

debe actuar no con la estética o el gusto subjetivo como prioridades, sino más

bien pensar en el usuario.

Principios de usabilidad web

El contenido de Internet tiene sus propias características con respecto a otros

medios y apuesta por textos más resumidos y atractivos. El diseño debe contar

con una navegación simple y clara, unos textos precisos y una estructura

“amigable” para la mayoría de los usuarios.

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

Visibilidad: Es importante que el usuario pueda reconocer los diferentes

elementos de manera sencilla, sin mayor esfuerzo.

Consistencia: Una información debe ser reiterada de diferentes formas pero

debe ser siempre la misma. Tiene que haber una definición en torno a los

patrones de la página web y la experiencia del usuario para no crear

confusión.

Compatibilidad: El sitio web debe adecuarse a la forma de pensar del

usuario promedio, del cliente potencial y el público meta. En estética y

funcionalidad, los procesos deben adaptarse a las expectativas de los

visitantes.

Eficiencia: Debes reducir el trabajo del usuario en todos los niveles, facilitar

el camino para que pueda encontrar la información que desea o que pueda

retroceder en caso de hallar un resultado indeseado. Hay que predecir los

posibles pasos a seguir del visitante y prevenir los errores.

Un buen 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.

4.2 Diseño web líquido o fluido.

El diseño web fluido o diseño web líquido, fluid web design o liquid web design, 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 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.

4.3 Diseño web hibrido.

DISEÑO HÍBRIDO

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.

4.4 Diseño web para móviles

Web móvil

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 aún 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.

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.

4.5 Patrones creacionales.

Patrones Creacionales

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.

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.

4.6 Patrones de comportamiento.

Patrones de Diseño Software de Comportamiento

Introducción

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

comportamientos más habituales.

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 frente 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 ejecucion de la operacion.

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

4.7 Patrones estructurales.

Patrones de Diseño Software Estructurales

Introducción

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