1.
PATRONES DE DISEÑO
Los patronesde diseño sonlabase para la búsquedade solucionesaproblemascomunesenel
desarrollode software yotrosámbitosreferentesal diseñode interacciónointerfaces.
Un patrón de diseñoresultaserunasoluciónaun problemade diseño.Paraque unasoluciónsea
consideradaunpatróndebe poseerciertascaracterísticas.Una de ellasesque debe haber
comprobadosu efectividad resolviendoproblemassimilaresenocasiones anteriores.Otraesque
debe serreutilizable,loque significaque esaplicable adiferentesproblemasde diseñoen
distintascircunstancias.
Un patrón de diseñopuede considerarse comoundocumentoque defineunaestructurade clases
que aborda unasituaciónparticular.Lospatronesde diseñose dividenentresgruposprincipales:
 Principiosde UsabilidadWeb:
El contenidode Internettiene suspropiascaracterísticasconrespectoaotros mediosyapuesta
por textosmásresumidosyatractivos.El diseñodebe contarconuna navegaciónsimpleyclara,
unostextosprecisosyunaestructura “amigable”paralamayoría de losusuarios.
Los principalesconceptosentornoala usabilidadweb sonlossiguientes:
::. Visibilidad:Esimportante que el usuariopuedareconocerlosdiferenteselementosde manera
sencilla,sinmayoresfuerzo.
::. Consistencia:Unainformacióndebeserreiteradade diferentesformasperodebesersiempre
la misma.Tiene que haberunadefiniciónentornoalospatronesde la páginaweby laexperiencia
del usuariopara nocrear confusión.
::. Compatibilidad:El sitiowebdebe adecuarsealaforma de pensardel usuariopromedio,del
cliente potencial yel públicometa.Enestéticayfuncionalidad,losprocesosdebenadaptarse alas
expectativasde losvisitantes.
::. Eficiencia:Debesreducirel trabajodel usuarioentodos losniveles,facilitarel caminoparaque
puedaencontrarla informaciónque deseaoque puedaretrocederencasode hallarun resultado
indeseado.Hayque predecirlosposiblespasosaseguirdel visitanteyprevenirloserrores.

2.
Un buen consejoessiempre tenerencuentaquiénesseránlosusuarioshabitualesde lapágina
weby así enfocarel diseñoenese camino,tomandoencuentasuexperienciaynivel de
conocimiento.
Errores de usabilidadweb
Sinimportarla cantidadde visitasque puede tenerunsitiowebolasgananciasque obtengapor
determinadoserviciooproducto,esfácil detectaralgunosproblemasparael usodel usuario
promedio.
Algunasde estasfallasde usabilidadwebsonlassiguientes:
::. Loginocultos:Es suficientemente complicadolograrinteresaraun usuariopara que se registre
enuna páginaweb,por loque no tenerunacceso visibleparausuarioycontraseña
::. Pop-ups:Prácticamente todoslosnavegadorestienenbloqueadoresde pop-ups,porloque las
ventanasemergenteshanpasadoaser una molestiaynosonla mejormanerade presentar
contenido.
::. Linksinvisibles:Lanavegaciónesunaimportante,porloque noencontrarlos enlaces
necesariosparamovilizarseatravésde la páginawebpuede traerproblemasimportantes.
::. Sobrecargavisual:Muchasveces,másesmenos.El “ruido” visual esunode losproblemas
comunesque losdiseñadoresprovocanodebenresolverde acuerdoconlanecesidaddel cliente.
::. Menúdesplegable:Ocultaropcionesenunmenúdesplegable ahorraespacioperocomplicala
navegaciónde losusuarios,yaque requiere unesfuerzoparafijarlaposicióndel cursory
seleccionaresaopción.
 DiseñoWebLíquidoo Fluido.
"Diseñolíquidoo fluido"(Responsive WebDesign) eslatécnicaparacrear plantillasque
automáticamente se ajustanal tamañode lapantallaenlas que estánsiendo navegadas,
utilizandoladefiniciónde reglasde mediosde destinodefinidasdentrode las
nuevas características del CSS3.

3.
El anchode laplantilla:Lomás importante esconseguirunanchoflexible, esel factor
que entorpece muchosde losdiseñoscuandose venenlaspantallasmáspequeñas. Crear
contenedoresque se extiendanose recojanenlasdiferentesresoluciones. Nohayun
truco, soloescambiarla forma de crear lascolumnas de tu hoja de estilo.
Las imágenes:Un temaa tenerencuentacuando se pasa de ancho fijoa diseño
fluido, sonlas imágenesenel HTML (loselementos<img>). Unarchivode imagen,ensu
mayor parte es un archivode tamaño fijoque nose redimensiona,estopuededarerrores
enla presentación del diseñocon imágenes de grantamañoque se desbordanporla
ventanadel navegador,lasoluciónesmuysimple,solodebemosadicionarlassiguientes
líneasenla hojade estilo.
Eliminarel zoomen losdispositivos móviles:Losdispositivoscelularesotablasutilizan
una funciónde "zoom"para mostrarsitioswebmuygrandes,enescalaensuspequeñas
pantallas,estoesbuenoenlamayoría de casos,pero para nuestratécnicano es
funcional. Adicionandounmetatag "viewport"enel headerdel documentoeliminamos
esta:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-
scale=1.0"/>
Solodebemosdeshabilitarestaopcióncuandoestemossegurosque nuestrodiseñose
ajustay permite unanavegaciónadecuada,de otromodosolovamosa lograr dificultarle
lascosas.

4.
UtilizarCSSQuery @media: La característica de "Consultade medios"enCSS permite
aplicarcambiosde diseñosbasadosenel tamañode visualizaciónycapacidaddel
dispositivoenel que se estámostrandoel contenido. Tiene respaldoen lamayoría de
navegadoresmóviles.
 DiseñoWebHíbrido:
La maquetaciónde unapáginawebutilizandohojas de estiloencascada(css) puede hacerse
mediante diseñoshíbridos,esdecir,combinandolasdiferentesopcionesde maquetaciónconcss:
- Diseños de anchofijo(utilizanpíxeles).
- Diseñosde anchovariable,llamadosdiseños«líquidos» o«fluidos» (utilizan porcentajes).
- Diseños elásticos (utilizan«em»).
Los diseñoshíbridoscombinanlastresopcionesanterioresyrepresentanlamejoropciónparaque
nuestrosdiseñosseancompatiblestantoconcualquierresolución(tamaño) de pantallacomocon
cualquiertamañode letra.Al utilizar«em» y«porcentajes»,ambasunidadesrelativas,paralas
medidasde fuentesycajas,cuandoaumentamosodisminuimosel tamañode fuenteenel
navegador,oel tamaño de pantallase redimensionaautomáticamente el tamañode todoslos
elementosde lapáginayse respetanuestrodiseñooriginal.
Por tanto,este diseñoesel ideal si pretendemosque nuestra«web» se visualice correctamente en
todotipode plataformasy/odispositivos(teléfonosmóviles,celulares,ordenadoresportátiles,
ordenadoresde sobremesa,tabletas,etc.).
Por ejemplo,enundiseñohíbridocondoscolumnas,unade ellasse expresaráenporcentajes(%)
para que se adapte al tamaño de la ventanadel navegadorylaotra se expresaráen«em» para
que se adapte al tamaño del texto.
 Patronescreacionales.
Correspondenapatronesde diseñosoftwareque solucionanproblemasde creaciónde instancias.
Nosayudana encapsularyabstraerdicha creación:
 ObjectPool (nopertenece alospatronesespecificadosporGoF):se obtienenobjetosnuevos
a travésde laclonación.Utilizadocuandoel costode crear una clase esmayor que el de

5.
clonarla.Especialmente conobjetosmuycomplejos.Se especificauntipode objetoacrear y
se utilizaunainterfazdel prototipoparacrearun nuevoobjetoporclonación.El procesode
clonaciónse iniciainstanciandountipode objetode laclase que queremosclonar.
 AbstractFactory (fábricaabstracta):permite trabajarcon objetosde distintasfamiliasde
maneraque las familiasnose mezclenentre síyhaciendotransparente el tipode familia
concreta que se esté usando.El problemaasolucionarporeste patrónes el de crear
diferentesfamiliasde objetos,comoporejemplolacreaciónde interfacesgráficasde distintos
tipos(ventana, menú,botón,etc.).
 Builder(constructorvirtual):abstrae el procesode creaciónde unobjetocomplejo,
centralizandodichoprocesoenunúnicopunto.
 Factory Method (métodode fabricación):centralizaenunaclase constructoralacreaciónde
objetosde unsubtipode untipodeterminado,ocultandoal usuariolacasuística,esdecir,la
diversidadde casosparticularesque se puedenprever,paraelegirel subtipoque crear.Parte
del principiode que lassubclasesdeterminanlaclase aimplementar.
 Patronesde comportamiento.
Se definencomopatronesde diseñosoftware que ofrecensolucionesrespectoalainteraccióny
responsabilidadesentreclasesyobjetos,asícomolosalgoritmosque encapsulan:
 Chainof Responsibility (Cadenade responsabilidad):Permite establecerlalíneaque deben
llevarlosmensajesparaque losobjetosrealicenlatareaindicada.
 Command (Orden):Encapsulaunaoperaciónenunobjeto,permitiendoejecutardicha
operaciónsinnecesidadde conocerel contenidode lamisma.
 Interpreter(Intérprete):Dadounlenguaje,defineunagramáticapara dicholenguaje,así
como lasherramientasnecesariasparainterpretarlo.
 Iterator(Iterador):Permite realizarrecorridossobre objetoscompuestosindependientemente
de la implementaciónde estos.
 Mediator(Mediador):Defineunobjetoque coordinelacomunicaciónentre objetosde
distintasclases,peroque funcionancomounconjunto.
 Memento(Recuerdo):Permitevolveraestadosanterioresdel sistema.

6.
 Observer(Observador):Defineunadependenciade uno-a-muchosentre objetos,de forma
que cuandoun objetocambie de estadose notifiqueyactualicenautomáticamentetodoslos
objetosque dependende él.
 State (Estado):Permite que unobjetomodifique sucomportamientocadavezque cambie su
estadointerno.
 Strategy (Estrategia):Permitedisponerde variosmétodospararesolverunproblemayelegir
cuál utilizarentiempode ejecución.
 Template Method (Métodoplantilla):Define enunaoperaciónel esqueletode unalgoritmo,
delegandoenlassubclasesalgunosde suspasos,estopermite que lassubclasesredefinan
ciertospasosde un algoritmosincambiarsu estructura.
 Visitor(Visitante):Permitedefinirnuevasoperacionessobre unajerarquíade clasessin
modificarlasclasessobre lasque opera.
 Patronesestructurales.
Son lospatronesde diseñosoftware que solucionanproblemasde composición(agregación)de
clasesy objetos:
 Adaptero Wrapper(AdaptadoroEnvoltorio):Adaptaunainterfazparaque puedaser
utilizadaporunaclase que de otromodo nopodría utilizarla.
 Bridge (Puente):Desacoplaunaabstracciónde su implementación.
 Composite (Objetocompuesto):Permitetratarobjetoscompuestoscomosi de unosimple se
tratase.
 Decorator (Decorador):Añade funcionalidadaunaclase dinámicamente.
 Facade (Fachada):Provee de unainterfazunificadasimpleparaaccedera una interfazogrupo
de interfacesde unsubsistema.
 Flyweight(Pesoligero):Reduce laredundanciacuandograncantidadde objetosposeen
idénticainformación.
 Proxy:Mantiene unrepresentante de unobjeto.
 Módulo:Agrupavarioselementosrelacionados,comoclases,singletons,ymétodos,utilizados
globalmente,enunaentidadúnica.