Universidad Gerardo barrios

Licenciada:

Karla Milagro López Vásquez

Materia:

Ingeniería de software ii

Tema:

“patrones de diseño web”

Alumno:

Edwin Omar Chávez Zepeda

Código:

usts059714

04 Patrones de Diseño Web. “Los patrones de diseño son el esqueleto de las soluciones a problemas comunes en el desarrollo de software”. En otras palabras, brindan una solución ya probada y documentada a problemas de desarrollo de software que están sujetos a contextos similares. Debemos tener presente los siguientes elementos de un patrón: su nombre, el problema (cuando aplicar un patrón), la solución (descripción abstracta del problema) y las consecuencias (costos y beneficios).

4.1 Principios de Usabilidad Web. El diseño de sitios web deben seguir los siguientes principios: 1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario. 2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito. 3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total). 4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo. 5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas. 6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas 7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción. 8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea. 9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. 10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. 12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. 13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. 14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc. Otros principios para el diseño de sitios web son: a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos. b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario. c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos. d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web. e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe dónde comenzar a leer, existe sobrecarga de información. f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio. g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

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

El principal problema de un diseño líquido es el mantenimiento de diferentes

versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un

site de ecommerce con más de 5.600 referencias vivas en permanente

actualización (alta y baja de productos, versiones de color, tamaño, etc.) es

realmente un suplicio.

DISEÑO LÍQUIDO FRENTE A RESPONSIVE DESIGN

Con el auge del acceso a internet a través de Tablets, Smartphone, SmartTVs,

etc. ha surgido el problema de que las páginas web deben mostrarse en pantallas

de muy diferente tamaño. Conseguir que la misma página web se vea bien en

dispositivos muy distintos es algo que no es sencillo de resolver.

Una primera aproximación o intento de resolver este problema es el denominado

diseño líquido o fluido. Se dice que una página web tiene diseño líquido cuando

la anchura de sus elementos está definida utilizando porcentajes. Supongamos

que tenemos una cabecera cuyo ancho fijamos en el 100 %, una columna lateral

cuyo ancho fijamos en el 25 % y una parte principal de contenidos cuyo ancho

fijamos en el 75%. El resultado será que al visualizarse en distintos dispositivos

la anchura de los elementos será un porcentaje de la anchura disponible.

4.3 Diseño web hibrido.

Normalmente, las aplicaciones híbridas integran el contenido de un sitio web existente en una aplicación para el empaquetamiento e implementación nativos. Es especialmente útil para asegurarse rápidamente un espacio en cualquier tienda de aplicaciones y tener presencia allí, quizás mientras trabaja en una aplicación completamente nativa para esa plataforma. El rendimiento es notoriamente más lento que con aplicaciones nativas y web, ya que las aplicaciones híbridas se construyen por lo general encapsulando el HTML existente en un contenedor. Por ejemplo, en Windows Phone, es un control WebBrowser. En cualquier momento que haya una capa adicional, también hay la posibilidad de problemas de rendimiento.

Sin embargo, la compensación es la implementación acelerada en una plataforma nativa. La creación de aplicaciones híbridas requiere la utilización de cualquiera de las herramientas siguientes:

Apache Cordova/PhoneGap Plantilla de proyecto HTML5 de Visual Studio Windows Phone Telerik AppBuilder (anteriormente Icenium) Xamarin Studio Debido a su naturaleza, las aplicaciones híbridas encapsulan el contenido web utilizando el control WebBrowser (siguiendo con el ejemplo de Windows Phone), que es un elemento XAML:

<phone:WebBrowser x:Name="Browser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Loaded="Browser_Loaded" NavigationFailed="Browser_NavigationFailed" /> Esto es todo lo que necesita para empezar a crear una aplicación híbrida. En otras plataformas, los conceptos son los mismos, aunque los controles pueden ser diferentes. Tenga cuidado al crear aplicaciones híbridas, ya que pueden no tener el acceso o los privilegios para realizar acciones que una aplicación nativa tendría. Esto es debido al posible script clandestino de la web para ejecutar en el cliente. Este es el motivo por el que las aplicaciones HTML tienen muchas de las mismas restricciones.

Cuando cree aplicaciones híbridas, puede utilizar Telerik AppBuilder o Apache Cordova en lugar de proyectos Visual Studio. Estas herramientas de terceros ayudan a llenar vacíos entre el aspecto web híbrido y el aspecto nativo de su aplicación.

4.4 Diseño web para móviles.

Actualmente cuando el número de usuarios que navegan por internet a través de su Smartphone ha crecido considerablemente respecto hace unos pocos años, es muy posible que un cliente te pida adaptar su web para las pantallas móviles.

Esas capas de contenido e imágenes que diseñaste para tu última web y que desde el navegador de tu ordenador se ve a las mil maravillas, se descuadran o carecen de sentido en una pantalla de 320 pixeles.

Para poder validar y visualizar el diseño de tu web adaptado para distintas resoluciones de pantalla existen herramientas como screenfly. Introduciendo la URL de tu página podrás comprobar cómo se ve tu web en multitud de dispositivos, distintas marcas de Smartphone y tablets. Junto con el siempre imprescindibleFirebug podrás editar los estilos y comprobar en vivo cómo va quedando el diseño de la versión móvil de tu sitio web.

4.5 Patrones creacionales.

Los patrones de diseño creacionales se centran en resolver problemas acerca de cómo crear instancias de las clases de nuestra aplicación. A continuación nos centraremos en cada uno de ellos. Los patrones de diseño creacionales son aquellos que abstraen el proceso de instalación. Ellos ayudan a hacer un sistema independiente de cómo sus objetos son creados, compuestos, y representados. Un patron creacional de clase usa herencia para variar la clase que es instanciada, mientras un patron creacional de objeto delegara la instanciación a otro objeto. Los patrones se vuelven importantes en sistemas que pasan a depender más de la composición de objetos que de la herencia de clases. Como eso sucede, el énfasis cambia de modificar difícilmente un conjunto fijo de comportamientos hacia definir un conjunto pequeño de comportamientos fundamentales que pueden ser compuestos dentro de cualquier número de los más complejos.

4.6 Patrones de comportamiento.

Cadena de responsabilidad (Chain of responsibility): La base es permitir que más

de un objeto tenga la posibilidad de atender una petición.

Orden (Command): Encapsula una petición como un objeto dando la posibilidad

de “deshacer” la petición.

Intérprete (Interpreter): Intérprete de lenguaje para una gramática simple y sencilla. Iterador (Iterator): Define una interfaz que declara los métodos necesarios para acceder secuencialmente a una colección de objetos sin exponer su estructura interna. Mediador (Mediator): Coordina las relaciones entre sus asociados. Permite la interacción de varios objetos, sin generar acoples fuertes en esas relaciones. Recuerdo (Memento): Almacena el estado de un objeto y lo restaura posteriormente. Observador (Observer): Notificaciones de cambios de estado de un objeto. Estado (Server): Se utiliza cuando el comportamiento de un objeto cambia dependiendo del estado del mismo. Estrategia (Strategy): Utilizado para manejar la selección de un algoritmo. Método plantilla (Template Method): Algoritmo con varios pasos suministrados por una clase derivada. Visitante (Visitor): Operaciones aplicadas a elementos de una estructura de objetos heterogénea.

4.7 Patrones estructurales.

Adaptador (Adapter): Convierte una interfaz en otra. Puente (Bridge): Desacopla una abstracción de su implementación permitiendo modificarlas independientemente. Objeto Compuesto (Composite): Utilizado para construir objetos complejos a partir de otros más simples, utilizando para ello la composición recursiva y una estructura de árbol. Envoltorio (Decorator): Permite añadir dinámicamente funcionalidad a una clase existente, evitando heredar sucesivas clases para incorporar la nueva funcionalidad. Fachada (Facade): Permite simplificar la interfaz para un subsistema. Peso Ligero (Flyweight): Elimina la redundancia o la reduce cuando tenemos gran cantidad de objetos con información idéntica. Apoderado (Proxy): Un objeto se aproxima a otro.