Patrones de diseño web

TEMA: Patrones de Diseño Web

MATERIA: Ingeniería de Software ll

DOCENTE: Lic. Carla Milagro López

ALUMNO: Manuel Astul Laínez Hernández

USTS023514.

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.

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

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.

Links invisibles: La navegación es una importante, por lo que no encontrar los enlaces necesarios para movilizarse a través de la página web puede traer problemas importantes.

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.

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.

La técnica de diseño líquido 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.

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

Diseño Híbrido Con CSS

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.

Diseño web para móviles Imágenes, texto, colores, links y navegabilidad, son algunos de los elementos que hay que combinar correctamente para conseguir una web móvil óptima. En Go Móvil hemos querido realizar nuestro propio decálogo sobre cómo diseñar una web móvil teniendo en cuenta las características de los navegadores utilizados por los distintos Smartphone.

1. Ten en cuenta la resolución de pantalla. Aquí tienes algunas de las más utilizadas:  320×240: BlackBerry (Curve 8530 y PearlFlip), Android (Motorola Charm, Sony Ericsson Xperia X10 Mini y otros) y Symbian OS (Nokia E63 y otros)  320×480: Apple OS (iPhone y iPod) y Android (HTC Dream, HTC Hero, Droid Pro, i7500 Galaxy, Samsung Moment y otros)  480×360: BlackBerry (Torch, Storm y Bold)  360×640: Symbian OS (Nokia N8, Nokia C6-01 y otros)  480×800: Android (Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S y otros), Maemo – Linux (Nokia 900 y otros), Windows Mobile 6 (Sharp S01SH) y Windows 7 Phone (Venue Pro, Samsung Omnia 7, HTC 7 Pro y otros)  768×1024: iPad  640×960: iPhone 4  1280×800: Android (Motorola Xoom y Samsung Galaxy Tab 10.1), Windows OS (Asus Eee Pad EP121) y Apple OS (Axiotron Modbook) 2. Facilita la usabilidad de la web con una navegación vertical y scrolling de una sola dirección, accediendo a las distintas páginas nombradas con títulos cortos y descriptivos.

3. La simplicidad es tu mejor aliado en el diseño por lo que es aconsejable evitar tablas y frames que puedan complicar la navegabilidad.

4. Cuantas menos imágenes utilices la descarga será más rápida. Nosotros te aconsejamos mantener tus imágenes en unos 72 dpi, 640px en 960 de altura.

Asimismo, el tamaño de los textos y la duración y resolución de los vídeos han de seguir la misma norma para mantener una carga óptima.

5. Utiliza colores con contraste. Teniendo en cuenta que algunos dispositivos móviles funcionan con pantallas de bajo contraste y que el uso del móvil puede realizarse en cualquier lugar sin considerar si la luz existente es la adecuada para leer, tenemos que preocuparnos especialmente por esta propiedad del color con la finalidad de mantener una correcta visualización distinguiendo entre contenido y fondo desde cualquier móvil y lugar.

6. No uses ventanas emergentes o pop-ups pues los navegadores móviles no los soportan.

Tampoco utilices el refresque de página automático, deja que el usuario lo haga el mismo.

7. Es aconsejable utilizar una tipografía grande para su correcta lectura con un ancho de renglón no superior a los 80 caracteres y usando un tamaño de 14 puntos y negrita para los titulares. También es importante que los enlaces estén lo suficientemente separados del resto del texto para ser seleccionados con el dedo.

8. Ten en cuenta las limitaciones de la navegabilidad en el móvil como por ejemplo que algunos terminales no aceptan cookies y JavaScript.

9. Es recomendable que el peso total de cada página, incluyendo archivos adjuntos como la CSS, no supere los 20kb.

10. Utilizar porcentajes en vez de tamaños absolutos para la estructura de la web, intentando que la página se adapte al 100% a la pantalla del dispositivo, permitirá una mayor adaptabilidad de la misma.

Patrones creacionales Corresponden a patrones de diseño software que solucionan problemas de creación de instancias. Nos ayudan a encapsular y abstraer dicha creación: Patrón de Diseño (no pertenece a los patrones especificados por GoF): se obtienen objetos nuevos a través de la clonación. Utilizado cuando el costo de crear una clase es mayor que el de clonarla. Especialmente con objetos muy complejos. Se especifica un tipo de objeto a crear y se utiliza una interfaz del prototipo para crear un nuevo objeto por clonación. El proceso de clonación se inicia instanciando un tipo de objeto de la clase que queremos clonar.

Abstract Factory (fábrica abstracta): permite trabajar con objetos de distintas familias de manera que las familias no se mezclen entre sí y haciendo transparente el tipo de familia concreta que se esté usando. El problema a solucionar por este patrón es el de crear diferentes familias de objetos, como por ejemplo la creación de interfaces gráficas de distintos tipos (ventana, menú, botón, etc.).

Builder (constructor virtual): abstrae el proceso de creación de un objeto complejo, centralizando dicho proceso en un único punto.

Factory Method (método de fabricación): centraliza en una clase constructora la creación de objetos de un subtipo de un tipo determinado, ocultando al usuario la casuística, es decir, la diversidad de casos particulares que se pueden prever, para elegir el subtipo que crear. Parte del principio de que las subclases determinan la clase a implementar.

Prototype (prototipo): crea nuevos objetos clonándolos de una instancia ya existente.

Singleton (instancia única): garantiza la existencia de una única instancia para una clase y la creación de un mecanismo de acceso global a dicha instancia. Restringe la instanciación de una clase o valor de un tipo a un solo objeto.

Model View Controller (MVC) En español: Modelo Vista Controlador. Es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones. Este patrón plantea la separación del problema en tres capas: la capa model, que representa la realidad; la capa controller , que conoce los métodos y atributos del modelo, recibe y realiza lo que el usuario quiere hacer; y la capa vista, que muestra un aspecto del modelo y es utilizada por la capa anterior para interaccionar con el usuario.

PATRONES DE COMPORTAMIENTO ORIGEN DE LOS PATRONES DE COMPORTAMIENTO CONSTRUCTIVOS Y DESTRUCTIVOS Cuando ciertas reacciones de la persona, se hacen muy frecuentes en determinados ambientes o situaciones, constituyen lo que llamamos un patrón de comportamiento. Un patrón de comportamiento es una forma constante que tiene una persona, de pensar, sentir, reaccionar físicamente y actuar en determinada situación. Nuestros patrones de comportamiento tienen el siguiente origen: 1. Los copiamos o aprendemos de las personas que han compartido la vida con nosotros: padres, abuelos, tíos, maestros y de cualquier personaje importante con el cual hayamos tenido un contacto significativo a través de la TV, cine, videos, iglesia, paseos, retiros espirituales, etc. Sean estos personajes seres humanos, animales o dibujos animados.

2. Provienen de nuestras propias reacciones: esto quiere decir, que guardamos dentro de nosotros las reacciones que tenemos frente a otros o aún ante animales, dibujos animados, películas y frente a la naturaleza (un río, una montaña, la lluvia, truenos, relámpagos, tormentas, huracanes, etc.). También grabamos y guardamos nuestras reacciones cuando satisfacemos o no las necesidades y deseos. Nuestras diversas reacciones frente al hambre, sed, contacto, compañía, afecto, seguridad, protección, etc.

Todo queda guardado para ser utilizado en cualquier momento. Lo anterior significa que: 1. Todo lo que vemos y oímos lo captamos a nuestra propia manera y lo guardamos en nosotros, para ser utilizado algún día, para bien o para mal 2. Todas las reacciones (ideas, pensamientos, imágenes, emociones, sentimientos, y sensaciones físicas), que suceden o se dan en nuestro ser, quedan guardadas en los registros o “archivos” que Dios ha creado en el organismo de cada ser humano. Algún día utilizaremos estas “grabaciones” y quedarán expuestas ante nosotros y muchas veces ante otros. Un patrón de comportamiento puede ser constructivo o destructivo, y tiene los siguientes cuatro (4) componentes: 1. PENSAMIENTOS, CREENCIAS E IDEAS. 2. EMOCIONES Y SENTIMIENTOS E IMÁGENES. 3. CONDUCTAS. 4. REACCIONES DEL CUERPO

PATRONES CONSTRUCTIVOS 1. REALISTA O RACIONAL-OBJETIVO Conductas apropiadas a la situación, sentimientos de paz y seguridad, actitud firme, palabras claras, con un tono de voz y volumen apropiado.

Sus afirmaciones y juicios se basan en hechos comprobados.

Mira las cosas como realmente son.

2. CRÍTICO POSITIVO. Se esfuerza porque haya y se respeten límites y reglas razonables. Es firme y consistente en sus juicios, que se basan en hechos comprobados. Es protector y justo cuando aplica disciplina. No maltrata, ni humilla.

3. ADAPTADO SANO. Cumple las reglas y normas aunque le cause malestar. Hace lo que haya que hacer, aunque no le guste, lo hace de buen ánimo y manera correcta, como si fuera para Dios. Se deja proteger. Es responsable y cumplidor de sus deberes. Cuida todo lo que es suyo y participa en el cuidado de los otros y del ambiente.

4. NUTRITIVO POSITIVO. Está pendiente y ayuda en la satisfacción de las necesidades de las otras personas y también de sus propias necesidades. Apoya, estimula y alienta a los demás y se da a sí mismo aliento, estímulo y reconocimiento. Identifica sus recursos y los utiliza con talento y sabiduría.

5. NATURAL Y ESPONTÁNEO. Tiene conciencia de lo que está sintiendo y lo expresa sanamente. Siente y expresa las emociones y sentimientos agradables (amor, y alegría) y las que son desagradables como rabia, miedo y tristeza. Está familiarizado con su cuerpo y con sus necesidades. Disfruta sin arriesgarse, ni dañar a otros.

PATRONES DESTRUCTIVOS 1. CRÍTICO NEGATIVO. Para los críticos negativos, los otros están mal y sólo ellos están bien. Acostumbran hacer juicios o críticas de valor sobre los otros. Resaltan constantemente las fallas y faltas de los demás. Se inventan cualquier razón para no dar reconocimiento positivo a los demás.

2. SOBREPROTECTOR. Atiende exageradamente las necesidades de los demás y desatiende las propias. No pregunta, ni oye para conocer las necesidades de los otros, las asume. Funciona como un adivino o una especie de dios, que cree saber lo que los demás necesitan y se jacta de eso.

3. REBELDE. Se opone a las autoridades, a las reglas, normas y regulaciones. No se deja proteger, porque no acepta consejos, ni sugerencias. Mantiene la actitud de ser sabio de su propia opinión. Sus conductas predominantes son la agresividad, la violencia y el aislamiento. Su emoción preferida es la ira.

4 SERVIL O FÁCIL DE DOMINAR Actúa según lo que cree que son las expectativas de los demás, para complacerles y ganarse así el afecto, aceptación y respeto de ellos. Es asustadizo, inseguro, débil y depresivo. Mantiene creencias y actitudes de pesimismo y derrota. Es constantemente negativo. No utiliza los recursos que Dios le ha dado para su protección y desarrollo 5. VENGATIVO O RENCOROSO. Le cuesta perdonar porque recuerda constantemente lo que una vez alguien le dijo, le hizo o dejó de hacerle o de decirle. Cultiva la venganza hacia los otros y la lleva a cabo a cualquier costo y de cualquier manera. Predomina en estas personas el resentimiento, la rabia, el rencor y la actitud vengativa.

ILUSTRACIÓN DE CÓMO SE ORIGINAN LOS PATRONES DE COMPORTAMIENTO Un patrón constructivo puede originarse así: Un día veo, oigo y siento que nuestro padre me levanta afectuosamente y me siento muy bien Guardo este recuerdo para siempre. Las expresiones amorosas de nuestros padres las guardamos en nuestro ser y un día podremos repetirla con nuestros hijos o con otros, a quienes queramos transmitirle un sentimiento de afecto. Un patrón destructivo puede originarse así: Vengo corriendo donde está papá y le digo que he tenido un sueño muy feo, le pido que venga conmigo un rato a mi cuarto; me empuja de su lado y me responde con violencia.

ESTRUCTURALES Adapter Intención Adapta una interfaz para que pueda ser utilizada por una clase que de otro modo no podría utilizarla.

Motivación Necesitamos reutilizar clases ajenas para nuestro sistema, pero aunque la funcionalidad de estas clases es la que deseamos, la interfaz no es compatible. Si no podemos o no queremos modificar las clases a reutilizar, necesitamos hacerlas compatibles con nuestro sistema.

Aplicabilidad Se quiere utilizar una clase que llame a un método a través de una interface, pero quieres utilizarlo con una clase que no implementa ese interface. Modificar esa clase que implementa el interface no es una opción por un par de razones: 1. No tienes el código fuente de la clase.

2. La clase es una clase de propósito general, y es inapropiado para ella implementar un interface par un propósito específico.

Se quiere determinar dinámicamente que métodos de otros objetos llama un objeto.

Se quiere realizarlo sin que el objeto llamado tenga conocimientos de la otra clase de objetos.

Estructura

Participantes Target: Define la interfaz especifica del dominio en el que se quiere hacer uso de la clase que se adapta.

Cliente: Utiliza objetos que implementan la interfaz definida por el target.

Adaptee: Presenta su interfaz original, que es la que se tiene que adaptar.

Adapter: Adapta la interfaz del objeto adaptado a la definida por el target.

Colaboraciones Esta sección está compuesta por máximo seis palabras o frases que describan los tópicos, áreas o temas más importantes del trabajo. Deben estar ordenadas alfabéticamente. La selección de palabras clave apropiadas permitirá la inclusión del artículo en índices internacionales así como la ubicación rápida del artículo por parte de un lector interesado.

Consecuencias El cliente y las clases Adaptee permanecen independientes unas de las otras.

El patrón Adapter introduce una in dirección adicional en un programa. Como cualquier otra in dirección, contribuye a la dificultad implicada en la compresión del programa.

Se puede utilizar una clase Adapter para determinar cuáles de los métodos de un objeto llama otro objeto.

Adaptadores de clase y el objeto tienen diferentes ventajas y desventajas. A class adapter Una clase adaptador Adaptee se adapta al objetivo de la comisión a una clase concreta adaptador. Como consecuencia de ello, una clase adaptador no funciona cuando se quiere adaptar una clase y todas sus subclases.

Adaptador permite anular algunas de Adaptee el comportamiento, ya que el adaptador es una subclase de Adaptee.

Sólo introduce un objeto, y no puntero indirección adicional es necesaria para llegar a la adaptee.

Un objeto adaptador permite a un único adaptador de trabajar con muchas Adaptees-es decir, la Adaptee sí mismo y todas sus subclases (si procede). El adaptador también puede agregar funcionalidad a todos los Adaptees a la vez.

Adaptador se refieren a la subclase más que la propia Adaptee Implementación La implementación de una clase Adapter es más bien sencilla. Sin embargo, una cuestión que deberías considerar cuando implementes el patrón Adapter es como los objetos adapter conocen que instancia de la clase Adaptee llamar. Hay dos métodos: 1. Pasar una referencia a los objetos cliente como parámetro a los constructores de los objetos adapter o a uno de sus métodos. Esto permite al objeto adapter ser utilizado con cualquier instancia o posiblemente muchas instancias de la clase Adaptee.

Hacer la clase Adapter una clase interna de la clase Adaptee. Esto simplifica la asociación entre el objeto adapter y el objeto adaptee haciéndolo automático.

También hace la asociación inflexible.

Código ejemplo public interface ListModel { int getSize(); Object getElementAt(int index); } public interface TableModel { public int getRowCount(); // obtener número de filas public int getColumnCount(); // obtener número de columnas public Object getValueAt(int fil, int col); // retorna valor del elemento fila fil y columna col public String getColumnName(int col); // retorna nombre de la columna col } Usos conocidos El API de Java no incluye ningún objeto adapter público que esté listo para utilizar. Incluye clases tales como java.awt.event.WindowAdapter que pretenden ser heredadas más que utilizarse directamente. La idea es que hay algunos interfaces escuchadores de eventos, tales como WindowListener, que declaran varios métodos. En muchos casos no todos los métodos necesitan ser implementados. El interface WindowListener declara ocho métodos que son llamados para proporcionar notificación sobre los ocho tipos diferentes de eventos de la ventana. A menudo uno o dos de estos tipos de eventos son de interés.

Los métodos que corresponden a los eventos que no son de interés normalmente están dando implementaciones de no hacer nada. La clase WindowAdapter implementa el interface WindowListener e implementa los ocho métodos con implementaciones de no hacer nada. Una clase Adapter que hereda la clase WindowAdapter necesita implementar solamente los métodos que corresponden a los eventos que son de interés. Hereda las implementaciones de no hacer nada para el resto.