Unidad 04: Patrones de Diseño Web. - WordPress.com · Los patrones de diseño son soluciones para...
Transcript of Unidad 04: Patrones de Diseño Web. - WordPress.com · Los patrones de diseño son soluciones para...
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.