UNIVERSIDAD GERARDO BARRIOS

USULUTAN

ASIGNATURA:

INGENIERÍA DE SOFTWARE II

DOCENTE:

LICDA. CARLA MILAGRO LÓPEZ VÁSQUEZ

CICLO III

TEMA:

PATRONES DE DISEÑO WEB

INTEGRANTES:

HUGO ALEXANDER MARTINEZ GAITAN USTS021214

Unidad 04 Patrones de Diseño Web.

4.1 Principios de usabilidad web.

¿Qué es un Patrón de Diseño?

“Los patrones de diseño son el esqueleto de las soluciones a problemas comunes en el

desarrollo de software.”

Es decir, 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 bene

Existen varios patrones de diseño popularmente conocidos, los cuales se clasifican de

la siguiente manera:

Patrones Creacionales: Inicialización y configuración de objetos.

Patrones Estructurales: Separan la interfaz de la implementación. Se ocupan de cómo

las clases y objetos se agrupan, para formar estructuras más grandes.

Patrones de Comportamiento: Más que describir objetos o clases, describen la

comunicación entre ellos.

Veamos un poco en qué consisten los distintos tipos de patrones, cuáles son sus fines

y qué beneficios nos aportan.

Principios de usabilidad

Al cliente interesa dejarle las cosas de la forma más sencilla

Cuantos menos pasos tenga que dar un usuario para acceder a lo que busca es mejor.

Principios de usabilidad e imágenes

Una imagen vale más que mil palabras, con lo que tenemos que apoyarnos en ellas

para explicar cualquier mensje.

La perfecta sintonía de los textos, en mensaje de voz y las imágenes hacen que

cualquier aplicación sea más usada,

Principios de usabilidad y los colores, Los colores han de adaptarse a cada mensaje y

contexto.

Índice de principios de usabilidad

SN Principio de usabilidad Relevancia Obligado

1. Rapidez Media Si

2. Diseño Media SI

3. Claridad Alta Si

4. Facilidad Alta SI

4.2 Diseño web líquido o fluido.

Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando

analizamos las métricas de nuestros clientes del sector de la hostelería nos

encontramos (mayo 2012) que aproximadamente el 40% de las visitas a sus webs se

realizan a través de teléfonos móviles. En clientes más tradicionales observamos

(octubre 2012) incrementos mensuales del 19% en el acceso a su web con dispositivos

móviles.

En España el 56% de los teléfonos móviles son smartphones (somos el segundo país

del mundo con un porcentaje tan alto). En 2015 seremos uno de los primeros países

del mundo en donde habrá más accesos a internet desde dispositivos móviles

(smartphones y tablets) que desde ordenadores de escritorio. Adaptar nuestras webs a

las pantallas de los dispositivos móviles resulta ya más que necesario.

Diseño líquido o fluido (liquid or fluid layout). 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 (tablets en posición portrait y móviles en posición landscape) 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 posicion 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 responsive. Se basa en la retícula (normalmente de 960 px de ancho) que se

divide en un número igual de columnas ya sean pares o impares. Estas columnas

pueden ser también elásticas (un porcentaje del ancho total) que hacen un ajuste aún

más fino al dispositivo. La hoja de estilos CSS3 define por medio de media queries en

qué pantalla se visualizará la página en función de una serie de parámetros como:

Ancho y alto de la ventana del navegador (width, high)

Orientación del dispositivo (puede ser portrait o landscape, es decir vertical u

horizontal)

Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo 16:9)

Grid (número de columnas que muestra)

Resolución del dispositivo (densidad de píxeles que muestra la pantalla)

Color (número de colores que representa la pantalla)

Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index, scan) que

ayudan a definir con mayor exactitud el dispositivo

En función del ancho de la pantalla del

dispositivo los bloques div se ordenan y

jerarquizan, de tal manera que los

elementos que estamos viendo en la

imagen superior se verían en un

dispositivo móvil en una columna

ordenada en la que todos los elementos

tendrían el mismo ancho.

Las ventajas del diseño responsive son:

Con una misma web (un sólo HTML y CSS) se cubren todas las resoluciones de

pantalla Se reducen los costes de creación y mantenimiento de una web, se acorta el

desarrollo Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros

layouts (mobile.dominio.com)

Todos los usuarios disfrutan del mismo contenido (suele ser frustrante obtener

versiones light de las webs)

De esta manera el diseño responsive nos proporciona una visualización controlada de

la página, muy similar a la que nos ofrece el diseño de ancho fijo.

4.3 Diseño web hibrido.

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.

La clave en todos los diseños de Híbrida es siempre la atención al detalle para

proporcionar resultados de diseño gráfico de máxima calidad.

He aquí algunos ejemplos representativos de diseño gráfico de la agencia Híbrida, en

su faceta de agencia de diseño gráfico y publicitario: desde la creación de catálogos de

productos o de exposiciones artísticas internacionales hasta la definición de la

identidad corporativa de empresas.

CD Fundación Joan Miró: presentación de las obras de la exposición Espacios

Fronterizos a través de un CD-ROM interactivo.

Catálogo de muebles de cocina: diseño del catálogo de productos de Artificio, muebles

de cocina de gama alta.

Catálogo de Picasso: diseño de un catálogo de la exposición del Museo Picasso de

Málaga Dibujando con Picasso.

Catálogo de El Instituto Cervantes: creación de un catálogo para el Instituto Cervantes

de Roma acerca de una exposición internacional de arte.

Seri grafiado de CD: impresión y diseño de portadas y carátulas de Compact Disc y

DVD.

Diseño de Identidad Corporativa: diseño de todos los componentes de la imagen

corporativa para iniciar la identidad de medianas y pequeñas empresas.

Diseño en 3D: creación de objetos y escenario virtuales en 3-D.

4.4 Diseño web para móviles.

Cuando se empieza en el mundo del diseño web,

tarde o temprano se encuentran con la necesidad

de adaptar páginas web a los dispositivos 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 pida

adaptar su web para las pantallas móviles.

Esas capas de contenido e imágenes que se

diseñaron en una última web y que desde el

navegador del ordenador se ve a las mil maravillas,

se descuadran o carecen de sentido en una pantalla

de 320 pixeles.

Toca darle un repaso a tus hojas de estilo, a continuación algunos consejos y trucos

útiles para subsanar esos posibles problemas y adaptar el diseño de tu web:

Media Queries

Las media queries incluidas en CSS3, permiten filtrar estilos según rangos de

resolución de pantalla en pixeles, pudiendo utilizar una media query para los estilos

específicos de tu web en la versión móvil.

Por ejemplo, dentro de un archivo.css podrías tener:

@media screen and (max-width:490px) {

/*Estilos CSS que adaptan el diseño de tu web a dispositivos con pantallas de un

máximo De 490 pixeles de ancho */

}

De esta forma, estos estilos serian aplicados exclusivamente a los dispositivos

móviles sin la necesidad de cargar una hoja de estilo adicional.

También podría utilizarse una media query para cargar un archivo css solo para

determinadas resoluciones, basta con añadir entre las etiquetas <head></head>:

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 300px)

and (max-device-width: 480px)" href="movil.css" />

En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo que se conecta

a la web tiene una resolución a lo ancho de entre 300 y 480 pixeles.

Utilizar medidas de tamaño relativas

Cuando colocas una imagen o cualquier otro elemento puede ser tentador usar una

medida en pixeles. Estas visualizando la web en tu navegador de escritorio y defines un

imagen con una anchura de 700px, se ve perfectamente, pero puedes no ser

consciente de que con ese ancho la imagen se descuadra en la versión adaptada para

móviles de tu web, debido al menor ancho de pantalla.

Siempre que te sea posible, utiliza una medida relativa, en vez de la propiedad width:

700px, utiliza porcentajes. Si utilizas width: 50%, la imagen utilizará para desplegarse el

50% del espacio disponible dentro de la capa en que se encuentre, reduciéndose o

adaptándose el tamaño de la imagen automáticamente según el tamaño de la pantalla

en la que se visualice. Es una de las técnicas a seguir dentro de lo que se conoce

como responsive design.

Otra medida útil para definir el ancho y el alto es em, pues es proporcional al tamaño

de la fuente tipográfica que ve el usuario.

Herramientas para visualizar tu web en distintos dispositivos

Para poder validar y visualizar el diseño de la 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 smartphones y tablets. Junto con

el siempre imprescindible Firebug 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.

Llevo un tiempo utilizando screenfly y el resultado ha

sido satisfactorio, pero existen otras alternativas

interesantes como responsinator.

Crear una web especial para móviles y tablets

Programar una web con versión específica para móviles y/o tablets es una nueva

estrategia de marketing que beneficia a las empresas, atrayendo tráfico adicional de

usuarios móviles. Es por esto que los negocios online han comenzado a fijar sus

objetivos en el comercio móvil o M-commerce como otra opción rentable. Sin embargo

tanto las webs corporativas, como catálogos y tiendas on line, deben centrarse en las

preferencias particulares de los usuarios móviles y el tamaño reducido que supone este

tipo de pantallas. Hay diversos factores importantes a considerar a la hora de diseñar y

desarrollar una web para M-commerce (comercio móvil):

- Los usuarios móviles generalmente tienen prisa o poco tiempo y aprovechan breves

espacios de tiempo para navegar por el móvil, por tanto el proceso de compra y

navegación lo hemos estudiado para que sea realmente sencillo y breve, de tal forma

que puede comprar rápidamente o contactar con ustedes.

- Se debe mostrar un diseño y metodología similar al sitio general, sin olvidar las

dimensiones reducidas de los dispositivos móviles, podrán tener los mismos contenidos

pero con una grata experiencia de navegación y compra.

- El cliente no tiene desventajas al usar la

versión móvil, si un producto o servicio se

encuentra en la versión general también se

encontrará en la versión móvil, es más la

versión móvil, para añadir satisfacción, se

les puede ofrecer otras ventajas como

información exclusiva, imágenes de

calidad, etc.

- Que sea compatible con diferentes tamaños de pantalla y formatos, lo que se conoce

como Responsive Web Design, donde el diseño de la web se adapta dinámicamente

segun el tamaño de pantalla o bien la orientación de la misma (verticual/horizontal).

Diseño Web Adaptativo en inglés, Responsive Web Design (RWD)

Este diseño es un ejemplo de las mejores prácticas en cuanto a diseño de web móviles.

En vez de crear una web distinta para un tamaño de pantalla específico, un Diseño

Web Adaptativo, ofrece una única web que se adapta interactivamente ajustando sus

capas para acomodarse a cualquier tamaño de pantalla. Esto permite que el proceso

de actualización y mantenimiento de la página sea más eficiente en cuanto a costes y

resulta una experiencia para sus visitantes más atractiva.

De forma adicional, permite añadir elementos que solo verán los visitantes móviles, o

desactivar ciertos componentes que no necesitan ver.

Para web móviles con un propósito más específico, también es posible proveer al

usuario de una web móvil completamente diferenciada e incluso una App (aplicación)

móvil para IPhone, IPad, Android, etc. si tiene un número significativo de clientes en

dispositivos móviles.

¿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?

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.

¿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 tenemos 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?

Cada 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.5 Patrones Creacionales.

Patrones Creacionales

Fábrica Abstracta ( Abstract Factory )

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

Método de Fabricación ( Factory Method )

Parte del principio de que las subclases determinan la clase a implementar.

public class ConcreteCreator extends Creator

{

protected Product FactoryMethod()

{

return new ConcreteProduct();

}

}

public interface Product{}

public class ConcreteProduct implements Product{}

public class Client

{

public static void main(String args[])

{

Creator UnCreator;

UnCreator = new ConcreteCreator();

UnCreator.AnOperations();

}

}

Prototipado ( Prototype )

Se basa en la clonación de ejemplares copiándolos de un prototipo.

Singleton

Restringe la instanciación de una clase o valor de un tipo a un solo objeto.

public sealed class Singleton

{

private static volatile Singleton instance;

private static object syncRoot = new Object();

private Singleton()

{

System.Windows.Forms.MessageBox.Show("Nuevo Singleton");

}

public static Singleton GetInstance

{

get

{

if (instance == null)

{

lock(syncRoot)

{

if (instance == null)

instance = new Singleton();

}

}

return instance;

}

}

}

MVC ( Model View Controler )

Este patrón plantea la separación del problema en tres capas: la capa model, que

representa la realidad; la capa controler , 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.

4.6 Patrones de comportamiento.

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.

Public Class Articulo

Delegate Sub DelegadoCambiaPrecio(ByVal unPrecio As Object)

Public Event CambiaPrecio As DelegadoCambiaPrecio

Dim _cambiaPrecio As Object

Public WriteOnly Property Precio()

Set(ByVal value As Object)

_cambiaPrecio = value

RaiseEvent CambiaPrecio(_cambiaPrecio)

End Set

End Property

End Class

Public Class ArticuloObservador

Public Sub Notify(ByVal unObjecto As Object)

Console.WriteLine("El nuevo precio es:" & unObjecto)

End Sub

End Class

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.

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.