Patrones de diseño web

23
Páginá 1 ¿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

description

 

Transcript of Patrones de diseño web

Page 1: Patrones de diseño web

Pá giná 1

¿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

Page 2: Patrones de diseño web

Pá giná 2

UNIVERSIDAD CAPITAN GENERAL GERARDO BARRIOS

CENTRO REGIONAL DE USULUTAN

FACULTAD DE CIENCIA Y TECNOLOGIA

LICENCIATURA EN COMPUTACION

CATEDRA

Ingenierí á De Softwáre II

DOCENTE

Lic. Cárlá Milágro Lopez

TEMA

Pátrones de Disen o Web.

ACTIVIDAD

Investigár sobre el temá Pátrones de Disen o Web y subtemás

PRESENTADO POR:

Diáná Elizábeth Luná Mártí nez----------------USTS049314

CICLO

I-2015

Page 3: Patrones de diseño web

Pá giná 3

Patrón de diseño

Los pátrones de disen o son lá báse párá lá bu squedá de soluciones á problemás comunes

en el desárrollo de softwáre y otros á mbitos referentes ál disen o de interáccio n o interfáces.

Un pátro n de disen o resultá ser uná solucio n á un problemá de disen o. Párá que uná

solucio n seá considerádá un pátro n debe poseer ciertás cárácterí sticás. Uná de ellás es que

debe háber comprobádo su efectividád resolviendo problemás similáres en ocásiones

ánteriores. Otrá es que debe ser reutilizáble, lo que significá que es áplicáble á diferentes

problemás de disen o en distintás circunstánciás.

¿Por qué usar patrones de diseño?

Como yá vimos en el ártí culo sobre principios de disen o, si queremos desárrollár

áplicáciones robustás y fá ciles de mántener, debemos cumplir ciertás "reglás". Lo pongo

entre comillás porque áunque estás reglás de disen o son recomendábles (muy

recomendábles), no son obligátoriás. Siempre podemos decidir no áplicárlás. Aunque si no

lo hácemos, háy que ser conscientes de lá rázo n de no áplicárlás y de sus consecuenciás.

Los pátrones de disen o nos áyudán á cumplir muchos de estos principios o reglás de disen o.

Prográmácio n SOLID, control de cohesio n y ácoplámiento o reutilizácio n de co digo son

álgunos de los beneficios que podemos conseguir ál utilizár pátrones.

¿Cuántos patrones de diseño existen? ¿Tengo qué conocerlos todos?

Pátrones de disen o háy muchos. Muchí simos. Y siguen ápáreciendo pátrones nuevos cádá

poco tiempo. El desárrollo de áplicáciones es uná discipliná en constánte cámbio. Por tánto

los problemás á los que nos enfrentámos los desárrolládores támbie n cámbián. Así que lás

herrámientás utilizádás, támbie n se ván áctuálizándo y mejorándo.

Es imposible conocer todos los pátrones de disen o. Lo má s u til es tener un cátálogo de

pátrones que podámos consultár. A lá horá de desárrollár uná áplicácio n, podremos

consultár nuestro cátá logo buscándo pátrones que nos áyuden á solucionár problemás de

disen o concretos.

Algunos ejemplos de catálogos podemos encontrarlos en OODesign, en la Wikipedia,

o el ya famoso libro Design Patterns: Elements of Reusáble Object-Oriented Softwáre,

cuyos áutores son conocidos como Lá bándá de los cuátro.

Page 4: Patrones de diseño web

Pá giná 4

Objetivos de los patrones.

Los pátrones de disen o pretenden:

Proporcionár cátá logos de elementos reusábles en el disen o de sistemás softwáre.

Evitár lá reiterácio n en lá bu squedá de soluciones á problemás yá conocidos y

solucionádos ánteriormente.

Formálizár un vocábulário comu n entre disen ádores.

Estándárizár el modo en que se reálizá el disen o.

Fácilitár el áprendizáje de lás nuevás generáciones de disen ádores condensándo

conocimiento yá existente.

Asimismo, no pretenden:

Imponer ciertás álternátivás de disen o frente á otrás.

Eliminár lá creátividád inherente ál proceso de disen o.

No es obligátorio utilizár los pátrones, solo es áconsejáble en el cáso de tener el mismo

problemá o similár que solucioná el pátro n, siempre teniendo en cuentá que en un cáso

párticulár puede no ser áplicáble. "Abusár o forzár el uso de los pátrones puede ser un

error".

¿Qué tipos de patrones existen?

Existen diversás mánerás de ágrupár los pátrones de disen o. Quizá lá má s extendidá es

ágrupárlos segu n su propo sito. En este cáso tendrí ámos lás siguientes cátegorí ás:

Patrones creacionales: utilizádos párá instánciár objetos, y ásí sepárár lá

implementácio n del cliente de lá de los objetos que se utilizán. Con ellos intentámos

sepárár lá lo gicá de creácio n de objetos y encápsulárlá.

Patrones de comportamiento: se utilizán á lá horá de definir como lás cláses y

objetos interáccionán entre ellos.

Patrones estructurales: utilizádos párá creár cláses u objetos que incluidos dentro

de estructurás má s complejás.

Patrones de arquitectura: Aquellos que expresán un esquemá orgánizátivo

estructurál fundámentál párá sistemás de softwáre.

Patrones de diseño: Aquellos que expresán esquemás párá definir estructurás de

disen o (o sus reláciones) con lás que construir sistemás de softwáre.

Page 5: Patrones de diseño web

Pá giná 5

Dialectos: Pátrones de bájo nivel especí ficos párá un lenguáje de prográmácio n o

entorno concreto.

Ademá s, támbie n es importánte resen ár el concepto de "ántipátro n de disen o", que con

formá semejánte á lá de un pátro n, intentá prevenir contrá errores comunes de disen o en

el softwáre. Lá ideá de los ántipátrones es dár á conocer los problemás que ácárreán ciertos

disen os muy frecuentes, párá intentár evitár que diferentes sistemás ácáben uná y otrá vez

en el mismo cállejo n sin sálidá por háber cometido los mismos errores.

¿Puedo desarrollar nuevos patrones?

Como yá he dicho ántes, cádá poco tiempo ápárecen nuevos pátrones o revisiones de los yá

existentes. Es álgo lo gico si tenemos en cuentá que nuestrá formá de prográmár está

evolucionándo continuámente. Nuevos frámeworks, nuevás plátáformás, nuevos tipos de

ácceso á dátos etc.

Por tánto, es fáctible que cuálquierá puedá "descubrir" un nuevo pátro n. Lo gicámente el

supuesto pátro n deberá ser puesto á pruebá por lá comunidád de desárrolládores. Párá ello

deberá demostrár que es nuevo, que es correcto y que es u til párá solucionár problemás

comunes de desárrollo. Un pátro n no será tál si solo sirve párá solucionár un problemá

especí fico de nuestrá áplicácio n.

Page 6: Patrones de diseño web

Pá giná 6

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 uná estructurá “ámigáble” párá lá máyoríá de los usuarios. Los usaros aprecian la calidad y la credibilidad

Page 7: Patrones de diseño web

Pá giná 7

Si una página web provee a sus usuarios contenido de alta calidad, los usuarios se comprometerán con el contenido, avisos y diseño del sitio. Por esta razón es que los sitios no tan bien diseñados pero con contenidos de mucha calidad obtienen muchísimo tráfico con el pasar de los años. Para los usuarios el contenido es más importante que el diseño visual que lo entrega. 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:

Page 8: Patrones de diseño web

Pá giná 8

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 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: Muchás 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.

Page 9: Patrones de diseño web

Pá giná 9

Diseño líquido o fluido

Uná web tiene disen o lí quido o fluido cuándo su támán o se ájustá á lá dimensio n horizontál

de lá pántállá de formá áutomá ticá y sin necesidád de uná bárrá de desplázámiento

horizontál (scroll). El disen o se expánde ál áncho disponible de lá pántállá porque el támán o

de los distintos elementos (div) es un porcentáje del totál disponible (100%) de lá pántállá.

El problemá surge en pántállás muy grándes como por ejemplo uná TV Full HD de 1.920 x

1080 px porque el disen o se desájustá y ápárecen grándes espácios en blánco. Pero támbie n

sufren problemás lás pántállás con resoluciones inferiores á 1.024 px de áncho (táblets en

posicio n portrait y mo viles en posicio n landscape) porque lás imá genes se miniáturizán y

los textos se vuelven ilegibles. Si párá evitár estos problemás se fijá un áncho mí nimo

ápárecen lás bárrás de scroll de desplázámiento horizontál.

Como muestrá lá imágen, párá obviár estos problemás los disen ádores creán versiones de

Page 10: Patrones de diseño web

Pá giná 10

láyouts segu n lá pántállá donde se váyá á visuálizár lá web: pántállá de televisio n,

ordenádor de escritorio, táblet, mo vil.

Láyout con un áncho mí nimo de 1.420 px párá pántállás Full HD TV hástá 1.980 px

Láyout con un áncho mí nimo de 1.236 px y un má ximo de 1.420 px párá ordenádores

de escritorio con uná áltá resolucio n de pántállá (por ejemplo un iMác)

Láyout con un áncho mí nimo de 986 px y un má ximo de 1.235 px párá ordenádores

de escritorio normáles

Láyout párá táblets con un áncho mí nimo de 720 px en posicion verticál (portráit) y

un má ximo de 985 px párá táblets en posicio n horizontál (lándscápe)

El principál problemá de un disen o lí quido es el mántenimiento de diferentes versiones de

CSS. En uná web con 16 pá ginás es má s o menos fá cil. Pero un site de ecommerce con má s

de 5.600 referenciás vivás en permánente áctuálizácio n (áltá y bájá de productos, versiones

de color, támán o, etc) es reálmente un suplicio.

Diseño responsive. Se básá en lá retí culá (normálmente de 960 px de áncho) que se divide

en un nu mero iguál de columnás yá seán páres o impáres. Estás columnás pueden ser

támbie n elá sticás (un porcentáje del áncho totál) que hácen un ájuste áu n má s fino ál

dispositivo. Lá hojá de estilos CSS3 define por medio de media queries en que pántállá se

visuálizárá lá pá giná en funcio n de uná serie de párá metros como:

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

Orientación del dispositivo (puede ser portrait o landscape, es decir verticál u

horizontál)

Aspect-ratio (proporcio n entre el áncho y el álto de lá pántállá por ejemplo 16:9)

Grid (nu mero de columnás que muestrá)

Resolución del dispositivo (densidád de pí xeles que muestrá lá pántállá)

Color (nu mero de colores que representá lá pántállá)

Háy cuátro párá metros más (monochrome, device áspect-rátio, color-index, scán)

que áyudán á definir con máyor exáctitud el dispositivo

Page 11: Patrones de diseño web

Pá giná 11

En funcio n del áncho de lá pántállá del dispositivo los bloques div se ordenán y jerárquizán,

de tál mánerá que los elementos que estámos viendo en lá imágen superior se verí án en un

dispositivo mo vil en uná columná ordenádá en lá que todos los elementos tendrí án el

mismo áncho.

Page 12: Patrones de diseño web

Pá giná 12

Las ventajas del diseño responsive son:

Con uná mismá web (un so lo HTML y CSS) se cubren todás lás resoluciones de

pántállá

Se reducen los costes de creácio n y mántenimiento de uná web, se ácortá el

desárrollo

Optimizácio n SEO, so lo háy uná URL, se áhorrán lás redirecciones á otros láyouts

(mobile.dominio.com)

Todos los usuários disfrután del mismo contenido (suele ser frustránte obtener

versiones light de lás webs)

De está mánerá el disen o responsive nos proporcioná uná visuálizácio n controládá de lá

pá giná, muy similár á lá que nos ofrece el disen o de áncho fijo.

Diferencias entre diseño líquido y diseño responsive

Ejemplo responsive design

Cádá dí á áccedemos má s á internet á tráve s de tele fonos y tábletás. Cuándo ánálizámos lás

me tricás de nuestros clientes del sector de lá hostelerí á nos encuentrámos (máyo 2012)

que áproximádámente el 40% de lás visitás á sus webs se reálizán á tráve s de tele fonos

mo viles. En clientes má s trádicionáles observámos (octubre 2012) incrementos mensuáles

del 19% en el ácceso á su web con dispositivos mo viles.

Page 13: Patrones de diseño web

Pá giná 13

Mashup (aplicación web híbrida)

Uná áplicácio n web hí bridá (máshup), es un sitio web o áplicácio n web que usá contenido

de má s de uná fuente párá creár un nuevo servicio completo.

El contenido usádo en un máshup es tí picámente usádo de terceros á tráve s de uná interfáse

pu blicá o usándo un API. Otros me todos que constituyen el origen de sus dátos incluyen:

sindicádores web (RSS o Atom) y JáváScript.

Así como los weblogs hán revolucionádo lá publicácio n en lí neá, los máshups está n

revolucionándo el desárrollo web, permitiendo que cuálquierá combine, de formá

innovádorá, dátos que existen en eBáy, Amázon.com, Google, Windows Live y Yáhoo!. Lás

grándes fácilidádes brindádás por simples y ligerás API's hán hecho que los máshups seán

relátivámente fá ciles de disen ár. El que se requierá de mí nimos conocimientos te cnicos há

hecho que los máshups seán creádos en su máyorí á de cásos por innovádores, quienes

combinán en formás nuevás y creátivás dátos disponibles pu blicámente. Así como háy

máshups muy u tiles, existen otros que no pásán de so lo ser novedosos o publicitários, con

mí nimá utilidád prá cticá.

Los defensores e impulsores de lás áplicáciones Web 2.0 expresán que los máshups son un

ejemplo de este nuevo movimiento con sus usuários en áctivá párticipácio n e interáccio n.

El concepto

El contenido usádo en máshups es tí picámente obtenido de otrá fuente ví á uná interfáz

pu blicá o API (web services), áunque existe gente en lá comunidád que considerá que los

cásos en que lás interfáces son privádás no deberí án contár como máshups. Otros me todos

de obtener contenido párá máshups incluyen Web Feeds (por ejemplo: RSS o Atom) y

screen scráping.

Muchá gente experimentá con máshups usándo lás API de Amázon, eBáy, Flickr, Google,

Microsoft, Yáhoo o YouTube; lo que há llevádo á lá creácio n de un editor máshup.

La arquitectura de los mashups está siempre compuesta de tres partes:

El proveedor de contenidos: fuente de los dátos. Los dátos está n disponibles ví á uná API y

diferentes protocolos web como RSS, REST y Web Service.

Page 14: Patrones de diseño web

Pá giná 14

El sitio mashup: es lá nuevá áplicácio n web que provee un nuevo servicio utilizándo

diferente informácio n y de lá que no es duen á.

El navegador web cliente: es lá interfáz de usuário del máshup. En uná áplicácio n web, el

contenido puede ser mezcládo por los web browser clientes usándo lenguáje web del ládo

del cliente, por ejemplo, Jáváscript.

Los máshups deben ser diferenciádos de simples embebidos de dátos de otro sitio párá

formár un documento compuesto. Un sitio que permite ál usuário embeber ví deos de

Youtube, por ejemplo, no es un sitio máshup. Como yá se dijo, el sitio mismo debe ácceder

informácio n externá á e l usándo uná API y procesár esos dátos de modo que incrementen

su válor párá el usuário.

Tipos de mashups

Los mashups se presentan actualmente en tres formas: máshups de consumidores,

máshups de dátos y máshups empresáriáles.

El tipo má s conocido es el de máshup de consumidores, que está muy bien ejemplificádo

por muchás áplicáciones que utilizán Google Máps. Los máshups de este tipo combinán

dátos de fuentes váriás, ocultándo este hecho trás uná interfáz grá ficá simple.

Un máshup de negocio es uná combinácio n de todo lo ánterior, enfocándo en ágregácio n de

dátos y presentácio n y ágregándo ádicionálmente uná funcionálidád coláborátivá, háciendo

que el resultádo finál seá uná áplicácio n de negocio ápropiádá.

Máshups dentro de máshups son conocidos como “máshups monstruos”.

Es importánte reconocer que los máshups áyudán o fácilitán lá integrácio n de áplicáciones

orientádás á árquitecturás SOA.

Efectivámente, son muchás lás máshup que se pueden visitár en lá áctuálidád, con multitud

de áplicáciones. Podemos encontrár uná clásificácio n de ellás bástánte ilustrátivá

en webmáshup.com.

Page 15: Patrones de diseño web

Pá giná 15

En el momento de escribir este post, el nivel de uso de las citadas interfaces se

muestra en el siguiente gráfico, claramente dominado por Google Maps y seguido

por Flickr:

Ejemplos

Los máshups pueden ser divididos en cuátros grándes cátegorí ás: "mápás", "ví deo y fotos",

"bu squedá y comprás" y "noticiás".

Page 16: Patrones de diseño web

Pá giná 16

Diseño web para móviles.

A lá horá de disen ár un sitio web cádá dí á debemos tener má s en cuentá que este

optimizádo támbie n párá mo viles.

Pocás personás desconocen que lá web mo vil está tomándo máyor fuerzá cádá mes que

pásá.

Párá álgunás personás cárezcán en lá áctuálidád de álgu n tipo de dispositivo mo vil, con el

que poder ácceder á Internet, yá seá smártphone o táblet, con lo cuál todáví á les resultárá

má s pátente lá necesidád de hácer un contenido web que se veá correctámente en todos los

ápárátos que puedán llegár á consumirlo.

Características del uso de la Internet Móvil

Generálmente está s háciendo otrás cosás

Cuándo estámos trábájándo con un ordenádor de escritorio, yá seá un láptop o desktop,

generálmente estámos totálmente centrádos en lo que está pásándo por lá pántállá. Al

trábájár con el ordenádor personál solemos estár sentádos co modámente en uná sillá y uná

mesá y con todos los sentidos en nuestrá má quiná. Sin embárgo, el uso de Internet en un

dispositivo mo vil no suele ser ásí . Lás personás cuándo usámos los mo viles estámos

háciendo mil cosás diferentes. Los háy que usán Internet en sus dispositivos de movilidád

mientrás comen, mientrás ven lá televisio n o mientrás cáminán por lá cálle.

Con ello, quedá pátente que nuestros sentidos encuentrán estí mulos de lá vidá reál

mientrás se conectán con el mundo online. En muchás ocásiones es hástá má s crí tico párá

ellos lo que está n viendo en lá pántállá de lá TV que los ártí culos que está n simplemente

hojeándo en su mo vil. Es má s importánte el pláto que tienen delánte que lás áctuálizáciones

de Fácebook de sus ámigos, que está n revisándo mientrás come.

Se conectan para ver algo concreto, con menor tiempo para consumirlo

Como segundo detálle cábe destácár tenemos lá objetividád del uso de lá Internet mo vil. Es

decir, lás personás que se conectán á Internet en un dispositivo de movilidád no lo hácen

sencillámente porque quierán pásár el ráto. Bueno, quizá s en muchos cásos ásí seá, pero

Page 17: Patrones de diseño web

Pá giná 17

generálmente deseán obtener álgo concreto. Si fuerá párá hácer lárgás horás de ocio, quizá s

preferirí án conectárse en sus ordenádores, con uná grán pántállá y unás interfáces párá

entrádá de dátos má s co modás, como el tecládo.

El cáso es que, en muchos cásos, nos conectámos á Internet porque queremos sáber lá

direccio n concretá de un lugár ál que nos dirigimos. O bien porque no sábemos llegár á uná

direccio n y queremos ver lá rutá en un mápá. Quizá s simplemente porque queremos el

tele fono de álgu n proveedor o porque queremos "mátár" 10 minutos de esperá,

comunicándo con nuestros ámigos y seguidores, ántes de sentárnos en lá sillá de torturá

del dentistá.

En definitivá, cási siempre que nos conectámos á Internet en el mo vil es porque queremos

hácer álgo concreto, pero lo que es má s importánte, queremos uná respuestá rá pidá, porque

nuestro tiempo párá obtenerlá támbie n es má s reducido. Por ello, ál construir un sitio párá

mo viles no tenemos que pensár que nuestro usuário tiene tiempo de návegár por 10

pá ginás ántes de encontrár áquello que buscá. A ser posible, se lo tenemos que entregár de

uná mánerá rá pidá y objetivá.

Velocidad de conexión y planos de datos limitados

Hoy, áfortunádámente, lá velocidád de conexio n á Internet por telefoní á mo vil es

rázonáblemente buená, no obstánte, lás conexiones de Red de nuestrá oficiná u hogár

continu án siendo sensiblemente mejores. Eso es álgo que debemos tener en cuentá á lá horá

de plánificár un sitio web optimizádo párá mo viles. Unido á lá objetividád que serí á

deseáble en lá respuestá, segu n el punto comentádo ánteriormente, háce que nuestro sitio

párá mo viles se debá disen ár ájustándo ál má ximo lá cántidád de bytes á tránsferir en los

áccesos.

Ademá s, los plános de dátos párá los tele fonos mo viles támbie n tienen álgo que nos debe

motivár á reducir ál má ximo el peso de lás webs enfocádás á este tipo de dispositivos de

ácceso. No es otrá cosá que lá cántidád de tránsferenciá mensuál que tu páquete de dátos

te disponibilizá. Aunque lás operádorás en muchos cásos se empen en en decirnos cosás

como "ofrecemos internet ilimitádá de 500Mb", lá reálidád es que hácen má s gráciá que

otrá cosá.

Sobre ese ásunto de lá Internet Mo vil limitádá háy unás diápositivás que tienen incluso un

pár de momentos de humor negro, con los que uno no sábe si reí r o llorár.

Page 18: Patrones de diseño web

Pá giná 18

Patrones de Diseño Creacionales

Los pátrones de disen o creácionáles se centrán en resolver problemás ácercá de co mo creár

instánciás de lás cláses de nuestrá áplicácio n.

El patrón Abstract Factory o Fábrica Abstracta resuelve el problemá de creár fámiliás de

objetos. Veámos un ejemplo tí pico de este pátro n:

Imáginemos que estámos trábájándo con Interfaces Gráficas de Usuario (GUI). Pensemos

que, en nuestro prográmá, tenemos lás cláses Ventana y Boton. Pongámos, por ejemplo,

que tenemos 2 interfáces diferentes: uná con colores cláros y otrá con colores oscuros. Esto

nos llevárí á á tener 4 cláses:

VentanaClara

VentanaOscura

BotonClaro

BotonOscuro

Cuándo el usuário decidá trábájár con colores cláros, se deben creár instánciás

de VentanaClara y BotonClaro. Sin embárgo, si el usuário decide utilizár lá interfáz de

colores oscuros, deberí ámos creár instánciás de VentanaOscura y BotonOscuro. Lá formá

má s bá sicá de hácerlo serí á de está mánerá:

Page 19: Patrones de diseño web

Pá giná 19

Codigo:

El patrón Prototype o Prototipo resuelve el problemá de duplicár objetos yá creádos con

ánterioridád. Veámos un pequen o ejemplo de este pátro n:

Imáginemos que tenemos un prográmá de dibujo por ordenádor en el cuál podemos creár

cí rculos y cuádrádos. Cuándo se creá un cí rculo, e ste tiene un rádio de 50 pí xeles y es de

color rojo. Sin embárgo, podemos redimensionár el cí rculo y cámbiár su color. Cuándo se

creá un cuádrádo, tiene 50 pí xeles de ládo y es de color ázul.

Imáginemos áhorá que el usuário decide creár un cí rculo y modificá su color y támán o. Acto

seguido, el usuário decide hácer uná copiá de dicho cí rculo. El co digo serí á el siguiente:

Page 20: Patrones de diseño web

Pá giná 20

Codigo:

Uno de los problemás má s inmediátos de hácerlo de está mánerá es que, si se án áden

nuevos átributos á lá cláse Círculo, hábrí á que modificár el co digo en cádá lugár donde se

háyá hecho uná copiá de un Círculo.

El patrón Singleton se utilizá párá no permitir que existán mu ltiples instánciás de uná

cláse, sino solámente uná. Veámos un pequen o ejemplo de este pátro n:

Imáginemos un prográmá que, ál hácer click en un icono de áyudá, cree uná ventáná nuevá

con los documentos de áyudá del prográmá. Normálmente, si el usuário hiciese click en el

boto n nuevámente, se ábrirí á uná nuevá ventáná, y ásí sucesivámente.

Sin embárgo, podrí ámos deseár que, si lá ventáná de áyudá yá há sido ábiertá, no se ábrá de

nuevo. Párá ello recurrirí ámos á un pátro n Singleton, que ásegurárí á lá existenciá de uná

u nicá ventáná de áyudá en todo momento.

Page 21: Patrones de diseño web

Pá giná 21

Patrones de comportamiento

Su finálidád es álmácenár el estádo de un objeto (o del sistemá completo) en un momento

dádo de mánerá que se puedá restáurár en ese punto de mánerá sencillá.

Este patrón puede ser utilizado cuando:

El estádo interno de un objeto debe ser guárdádo y restáurádo en un momento

posterior.

El estádo interno no se puede exponer mediánte interfáces sin exponer lá

implementácio n.

Observer

Define uná dependenciá del tipo uno-á-muchos entre objetos, de mánerá que cuándo uno

de los objetos cámbiá su estádo, notificá este cámbio á todos los dependientes.

Este patrón puede ser utilizado cuando:

Se necesitá consistenciá entre cláses relácionádás, pero con independeciá.

Page 22: Patrones de diseño web

Pá giná 22

Los cámbios de estádo en uno o má s objetos deben dár lugár á comportámiento en

otros objetos

State

Se utilizá cuándo el comportámiento de un objeto cámbiá dependiendo del estádo del

mismo.

Ejemplo: uná álármá puede tener diferentes estádos: desáctivádá, áctivádá, en

configurácio n, etc. En este cáso se puede definir uná interfáz Estádo_Alármá, y luego

definir los diferentes estádos.

Este pátro n puede ser utilizádo cuándo se permite á un objeto álterár su comportámiento

segu n el estádo interno en que se encuentre.

Page 23: Patrones de diseño web

Pá giná 23

Patrones estructurales

Son los patrones de diseño software que solucionan problemas de composición

(agregación) de clases y objetos:

Adapter o Wrapper (Adaptador o Envoltorio): Adáptá uná interfáz párá que

puedá ser utilizádá por uná cláse que de otro modo no podrí á utilizárlá.

Bridge (Puente): Desácoplá uná ábstráccio n de su implementácio n.

Composite (Objeto compuesto): Permite trátár objetos compuestos como si de

uno simple se trátáse.

Decorator (Decorador): An áde funcionálidád á uná cláse diná micámente.

Facade (Fachada): Provee de uná interfáz unificádá simple párá ácceder á uná

interfáz o grupo de interfáces de un subsistemá.

Flyweight (Peso ligero): Reduce lá redundánciá cuándo grán cántidád de objetos

poseen ide nticá informácio n.

Proxy: Mántiene un representánte de un objeto.

Módulo: Agrupá vários elementos relácionádos, como cláses, singletons, y

me todos, utilizádos globálmente, en uná entidád u nicá.