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.