CONCEPlOS
CLAVj bullbullbullbullbullbullbullbullbullbull de-w_ _samp6
~lVC bullbullbullbullbullbullbull 589
bullbullbullbullbullbullbullbullbullbullbull caIdad bullbull _ bull 569
bullbullbull toI bullbullbullbull debullbullbullbullbullbullbullbullbullbullbullbull bull 593
bullbullbullbullbullbullbullbullbullbull 1oacutealcl1 bull585
oisoiode CIIIIloaldo bullbull 584
oisoiode la i1torfat bull 5 73ciseiode-gadoacuten 590
oisoio estiacutetko 582
MDtlOO bullbullbullbullbullbull 595
IDIacutetricus bullbullbull 598
Ph-s bullbullbullbullbull 594
MODELADO DE DISENtildeO-PARAPUCACJONES WEB f
En su autorizado libro acerca del disefio Web Jakob Nielsen [NIEOO)afinnaEn esencia existen dos enfoques baacutesiCos del diseio el ideal artlstico deexpresarse uno mismo y el idealde ingenieria de resolver un problema pa-
ra un cliente Durante la primera deacutecada del desarrollo Web la idea artiacutesticafueel enfoque que eligieron muchos desarrolladores El disefioocurri6 en una fonnaad hoc y-usualmente era dirigido confonne se generaba el HTML El disentildeo middotevo-lucionoacute de una visioacuten artistica que en siacute misma evolucion6 Confonne ocurri6 laconstruccioacuten de la WebApp
Incluso en la actualidad los defensores radicales del desarrollo de softwareaacutegil (capitulo 4) utilizan las aplicacionesWeb como cartel de nintildeos para disentildeolimitado Argumentan que la inmediatez y la volatilidad de las WebApps atemiddotnuacutean el disentildeo fonnal que el disentildeo evoluciona confonne se construye (codifi-ca) una aplicaci6n y que se debe gastar relativamente poco tiempo en la crea-ci6n de un modelo de disentildeo detallado Este argumento tiene meacuterito pero soacutelopara WebApps relativamente simples Cuando el contenido y la funci6n son com-plejos cuando el tamantildeo de la WebApp abarca cientos de objetos de contenidofunciones y clases de anaacutelisis cuando el eacutexito de la WebApp tendraacute un impactodirecto sobre el eacutexito del negocio el disentildeo no puede ni debe ser tomado a la li-gera
Esta realidad conduce al segundo enfoque de Nielsen el ideal de ingenieriacuteade resolver un problema para un cliente La ingenieriacutea Web adopta esta filoso-fia y un enfoque maacutes riguroso del disentildeo WebApp pennite a los desarrolladoreslograrlo
Cuando se aplica el disentildeo dentro del contexto de la ingeriil1ria web se deben con-siderar cuestiones tanto geneacutericas como especiacuteficas Desde un punto de vista geneacute-rico el disentildeo resulta en un modelo que guia la construcciacuteoacutep de la WebApp El modelode ~isentildeo Sin importar su forma debe contener suficiente info~macioacuten para reflejarcoacutemo habraacuten de traducirse los requisitos de los particiacutepanlfs (definidos en un mode-lo de anaacuteliSIS) en contenido y coacutedigo ejecutable Pero el disentildeo tambieacuten debe ser es-pecifico Debe abordar atributos clave de una WebApp en una forma que permita alingeniero Web construir y ponerla a prueba de manera efectiva
1911 Disentildeo y calidad de una WebApp
En capitulas anteriores se sentildealoacute que el disentildeo es la actividad de ingenieria que con-duce a un producto de gran calidad Esto conduce a una pregunta recurrente que sepresenta en toda las disciacuteplinas de ingenieria iquestqueacute es calidad En esta seccioacuten se exa-minaraacute la respuesta en el contexto de la ingenieria Web
Toda persona que haya navegado en la Web o usado una Intranet corporativa tiemiddotne una opinioacuten acerca de lo que hace una buena WebApp Los puntos de vista in-dividuales varian enormemente Algunos usuarios disfrutan los graacuteficos que bailanotros quieren texto simple Algunos solicitan infonnacioacuten copiosa otros desean unapresentacioacuten abreviada A algunos les gustan las herramientas analiticas sofisticada~ olos accesos a las bases de datos a otros les gustan las cosas simples De hecho la per-cepClon del usuario de lo que es bueno (y la resultante aceptacioacuten o rechazo de laWebApp como consecuencia) puede ser maacutes importante que cualquier discusioacuten tec-nica de la calidad de la WebApp
-Aacuterbol derequisitos decalidad [OIS99]
Calidadde lo
aplicacioacuten Web
iquestPero coacutemo se aprecia la calidad de la WebApp iquestQueacute atributos debe exhibir pa-ra loorar ser buena a los ojos de los usuarios finales y al mismo tiempo mostrar lascara~teristicas teacutecnicas de calidad que permitiraacuten a un ingeniero Web corregir adap-
tar mejorar y apoyar la aplicacioacuten a largo plazoEn realidad todas las caracteriacutesticas generales de la calidad de software tratadas
en los capitulos 9 15 Y 26 se apliacutecan a la WebApps Sin embargo las maacutes relevan-tes de dichas caracteristicas -facilidad de uso funcionalidad confiablhdad eficIen-cia y facilidad de mantenimiento-- proporcionan una base uacutetil para valorar la calidad
de los sistemas basados en Web
Si los productos se disentildean poro encajar mejor en los tendencias naturales del comportamiento humano entonal5~lagenle estaraacute mlIacuteSso1islerna mlIacutel completo y seraacute maacutes produdivomiddot bull
Sson Weiasdleak
Olsina y sus colegas [OLS99J han preparado un aacuterbol de requisitos de calidadque identifica un conjunto de atributos teacutecnicos -facilidad de uso funclonalldadconfiabilidad eficiencia y facilidad de mantenimiento-- que conducen a WebApps deoran calidad La figura 191 resume su trabajo Los criterios anotados en la figuraon de particular intereacutes para los ingenieros Web que deben disentildear constrUir y
mantener las WebApps a largo plazoOffutt (oFF021 extiende los cinco principales atributos de calidad anotados en la
figura 191 al agregar los atributos siguientes
Comprensibilidad global del sitio
~
Caracteriacutesticas de retroalimentacioacuten en liacutenea y ayudaFacilidad de uso Caracteriacutesticas de lo interfaz y esteacutetica
Caracteriacutesticos especiales
Capacidades de buacutesqueda y recuperacioacuten________ Caracteriacutesticos de navegacioacuten y visualizacioacuten
Funcionalidad ---===========-Caracteriacutesticos de la aplicacioacuten relacionados con el dominio
Correcto procesamiento de viacutenculos-------- Recuperacioacuten de errores
~ Validacioacuten y recuperacioacuten de entrado de usuario
~
Desempentildeo en tiem~~ de res~u~staEficiencia ~-- Rapidez de generaclon de pagina--======---Rapidez de generacioacuten de graacuteficos
~
Foacutecil de corregir_ Adaptabilidad
Facilidad de _E======_ Extensibilidadmantenimiento
Estos atributos de calidad son muy similares a los que se presentan en los capiacutetulos 9 15 Y 26 Por
lo tanto se deduce que las caracteristicas de calidad son universales para todo el software
iquestCuaacuteles sonlos principa-
les atributos decolidad poro losWebApps
Seguridad Las webApps se han convertido en una parte integral de las bases dedatos cruciales del gobierno y las empresas Las aplicaciones de comercio electroacuteni-co extraen y luego almacenan informacioacuten confidencial de los clientes Por eacutestas ymuchas otras razones la seguridad de las WebApps es primordial en muchas situa-ciones La medida clave de la seguridad es la habilidad de la WebApp y su ambientede servidor de rechazar el acceso no autorizado e impedir un franco ataque maleacutevo-lo Un anaacutelisis detallado de la seguridad WebApp estaacute maacutes allaacute del alcance de estelibro El lector interesado debe consultar [MCCO1J [NOR02j o [KAL03j
Disponibilidad Incluso la mejor WebApp no satisfaraacute las necesidades de losusuarios si no estaacute disponible En un sentido teacutecnico la disponibilidad es la medidadel porcentaje del tiempo que una WebApps estaacute disponible para usarla El usuariofinal comuacuten espera que las WebApps esteacuten disponibles las 24 horas de todos los diasdel antildeo Algo menos es considerado inaceptable Pero a tiempo no es el uacutenico in-dicador de disponibilidad Offutt [OFF02 sugiere que usar caracteristicas disponi-bles soacutelo en un navegador o una plataforma hace que la WebApp no esteacute diacutesponi-ble para quienes tengan una configuracioacuten de navegador y plataforma diferente Elusuario invariablemente se iraacute a otra parte
Escalabilidad iquestLa WebApp y su ambiente de servidor pueden escalarse para ma-nejar 100 1000 10000 o 100000 usuarios iquestLa WebApp y los sistemas con los cua-les estaacute conectada manejan variaciones significativas en el volumen o la capacidadde respuesta caeraacute catastroacutefica mente (o cesaraacute por completo) No es suficienteconstruir una WebApp exitosa Es igualmente importante construir una WebApp quepueda acomodar el peso del eacutexito (significativamente maacutes usuarios finales) y volver-se todaviacutea maacutes exitosa
Tiempo en el mercado Aunque en sentiacutedo teacutecnico el tiempo en el mercado noes un verdadero atributo de calidad es una medida de calidad desde un punto de vis-ta de los negocios La primera WebApp en el mercado usualmente captura un nuacuteme-ro desproporcionado de usuarios finales
Cientos de miles de paacuteginas Web estaacuten disponibles para quienes busquen informa-cioacuten en la World Wide Web Incluso las buacutesquedas Web mejor dirigidas resultan enuna avalancha de contenido Con tantas fuentes de informacioacuten de las cuales elegiriquestcoacutemo valora el usuario la calidad (por ejemplo veracidad precisioacuten integridadoportunidad) del contenido que se presenta dentro de una WebApp TiIlman [TILOO)sugiere un conjunto de criterios uacutetil para valorar la calidad del contenido
bull iquestEl aacutembito y la profundidad del contenido se pueden determinar con facilidadpara asegurar que satisfacen las necesidades del usuario
Desde luego esta expectativa es irreal Las grandes WebApps deben planificar el periodo de inac-
tividad para reparaciones y aaualizaciones
bull
~
Lista de verificacioacuten de la calidad del disentildeo de la WebApp Lasiguiente lista de verificacioacuten adaptada de bull iquestLastablas estaacuten organizadas y dimensionados en uno
la informacioacuten presentada en webreference forma que las hace camprensibles y que se desplieguenccm proporciono un conjunto de preguntas que ayudaraacuten eficientemente
tonto a los ingenieros Web como o los usuarios finales a bull iquestEl HTML esteacute optimizado poro eliminor ineficienciasvalorar la calidad global de una WebApp
bull iquestEl disentildeo global de la poacutegina facilita la lectura y la na-vegocioacuten
bull iquestTodos los punteros iexclviacutenculos) proporcionon viacutenculos coninformacioacuten interesante poro los usuarios
bull iquestEs probable que la mayaria de las vinculas persistanen la web2
bull iquestEl contenido lo funcioacuten o las opciones de navegacioacutenpueden ajustarse a las preferencias del usuario
bull iquestEl contenida a la funcianalidad se pueden personalizaral ancho de banda en el cual se comunico el usuario
bull iquestlos groacuteficas y los otros medios que no son textuales sehan usada de manera aprapiada2 iquestEl tamantildeo de las ar-chivos graacuteficos estaacute optimizado poro que se desplie-guen con eficiencia
iquestQueacute sedeberiacutea
ansiacutederar cuan-la se valore elantenido de ea-idad
bull iquestLa WebApp estoacute instrumentoda can utilidades de ges-tioacuten del sitio que incluyan herramientas poro rastrear suusa prueba de vinculas buacutesqueda lacal y seguridad2
bull iquestLos antecedentes y la jerarquia de los autores del contenido se pueden iden-tificar faacutecilmente
bull iquestEsposible determinar la precisioacuten del contenido la uacuteltima actualizacioacuten y loque fue actualizado
bull iquestEl contenido y su ubicacioacuten son estables (es decir permaneceraacuten en la URLde referencia)
Ademaacutes de estas preguntas relacionadas con el contenido se pueden antildeadir las si-guientes
bull iquestEl contenido es creible
bull iquestEl contenido es uacutenico Esto es iquestla WebApp proporciona alguacuten beneficio uacuteni-co a quienes la usen
bull iquestEl contenido es valioso para la comunidad de usuarios a que se dirige
bull iquestEl contenido estaacute bien organizado iquestEstaacute en un indice iquestEsfaacutecilmente acce-sible
La lista de verificacioacuten anotada en esta seccioacuten soacutelo representa una pequentildea mues-tra de los asuntos que deben abordarse conforme evolucione el disentildeo de una WebAppUna meta importante de la ingenieria Web es desarrollar sistemas en los que se pro-porcionen respuestas afirmativas a todas las preguntas relacionadas con la calidad
1912 Metas de disentildeo
En su columna regular acerca del disentildeo Web Jean Kaiser [KAluuml2] sugiere las si-guientes metas de disentildeo que son aplicables virtualmente a toda WebApp sin im-portar el dominio tamantildeo o complejidad de la aplicacioacuten
Simplicidad Aunque pueda parecer pasada de moda la expresioacuten todo con mo-deracioacuten se aplica a las webApps Existe una tendencia entre algunos disentildeadoresa proporcionar al usuario final demasiado contenido exhaustivo efectos visualesextremos animacioacuten entrometida enormes paacuteginas Web la lista es larga Es mejorluchar por la moderacioacuten y la simplicidad
Consistencia Esta meta de disentildeo se aplica virtualmente a cada elemento delmodelo de disentildeo El contenido se debe construir de manera consistente (por ejem-plo el formato del texto y los estilos de fuente deben ser los mismos a lo largo de to-dos los documentos de texto el arte graacutefico debe tener una apariencia consistenteesquema de color y estilo) El disentildeo graacutefico (esteacutetica) debe presentar una aparien-cia consistente en todas las partes de la WebApp El disentildeo arquitectoacutenico debe es-tablecer plantillas que conduzcan a una estructura hipermedia consistente El disentildeode interfaz debe definir modos consistentes de interaccioacuten navegacioacuten y desplieguede contenido Los mecanismos de navegacioacuten deben usarse de manera consistentea traveacutes de todos los elementos de la webApp Identidad La esteacutetica la interfaz y el disentildeo de navegacioacuten de una WebApp de-ben ser consistentes con el dominio de la aplicacioacuten para la cual se va a construirUn sitio Web para un grupo hip-hop indudablemente tendraacute una apariencia y un sen-tido diferente al de una WebApp disentildeada para una comp~ntildeia de servicios financie-ros La arquitectura de webApp seraacute completamente diferente las interfases seconstruiraacuten para acomodar diferentes categorias de usuarios la navegacioacuten estaraacuteorganizada para lograr diferentes objetivos Un ingeniero Web (y otros contribuyen-tes de disentildeo) deberaacute trabajar para establecer una identidad para la WebApp por me-dio del disentildeo
Robustez Con base en la identidad establecida usualmente una WebApp haceuna promesa implicita al usuario El usuario espera contenido y funciones robus-tas que sean relevantes para sus necesidades Si dichos elementos estaacuten perdidos oson insuficientes es probable que la WebApp fracase
Navegabilidad Ya se ha sentildealado que la navegacioacuten debe ser simple y consisten-te Tambieacuten debe estar disentildeada de modo que sea intuitiva y predecible Esto es elusuario debe entender coacutemo moverse por la WebApp sin tener que buscar vinculaso instrucciones de navegacioacuten
Apariencia visual De todas las categorias de software las aplicaciones Web sonincuestionablemente las maacutes visuales las maacutes dinaacutemicas y sin duda las maacutes esteacuteti-cas Es indudable que la belleza (apariencia visual) estaacute en el ojo del observador peromuchas caracteristicas de disentildeo (por ejemplo la apariencia y sentidJ del conteni-
G~~D-------------do la plantilla de la interfaz la coordinacioacuten del color el equilibrio del texto los graacute-ficos y otros medios audiovisuales los mecanismos de navegacioacuten) si contribuyen al
aspecto visualcompatibilidad Una webApp se utilizaraacute en una diversidad de ambientes (porejemplo diferentes equipos tipos de conexioacuten a Internet sistemas operativos nave-gadores) y se debe disentildear para que sea compatible con cada uno
Para algunos el disentildea Web se enfoca en la apariencia y sentido visuales para otros el disentildeo Web trata de la es-lruduracioacuten de infannacioacuten y la navegacioacuten a Iraveacutes del espacia del documenta Otros indU5ll pueden ronsidefar que-el disentildea Web trata acerca de la leltnologia empleada para construir aplicaciones Web interarnvas En reolidtJd el dise-ntildeo induye todas estos factores y acoso moacutes Thomas PoweI
Disentildeo de componentes
tecngiacuteo - bull bull -~_-------bull _ bull- ~~- -- bull
192 PIRAacuteMIDE DEL DISENtildeO IWEB
lo IWeb oborco seisdiferentes rtpos dedisentildeo Codo unoconlTibuyeo lo calidadglobal de lo WebApp
iquestQueacute es disentildeo en el contexto de la ingenieria Web Esta pregunta simple es maacutes di-ficil de responder de lo que uno puede creer El disentildeo conduce a un modelo quecontiene la mezcla adecuada de esteacutetica contenido y tecnologiacutea La mezcla variaraacutedepenlliendo de la naturaleza de la WebApp y como consecuencia las actividades
de disentildeo tambieacuten variaraacutenLa figura 192 muestra una piraacutemide de disentildeo para la ingenieria Web Cada nivel
de la piraacutemide representa una de las siguientes actividades de disentildeo
bull Disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacutende los modos de interaccioacuten y una descripcioacuten de los mecanismos de navega-
cioacutenbull Disentildeo esteacutetico tambieacuten llamado disentildeo graacutefico describe la apariencia y
sentimiento de la WebApp Incluye esquemas de color plantilla geomeacutetricatamantildeo de texto fuente y ubicacioacuten uso de graacuteficos y decisiones esteacuteticas re-
lacionadasbull Disentildeo de contenido define la plantilla la estructura y el bosquejo de todo el
contenido que se presenta como parte de la WebApp Establece las relaciones
entre los objetos de contenidobull Disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos de
contenido y para todas las funciones de la WebApp
bull Disentildeo arquitectoacutenico identifica la estructura hipermedia global para la
WebAppbull Disentildeo de componentes desarrolla la loacutegica de procesamiento detallado que
se requiere para implementar componentes funcionales
En las secciones que siguen se consideran con mayor detalle cada una de estas
actividades de disentildeo
12 3 DISENtildeO DELA INTERrAZ DE LA WEBApp3
Toda interfaz del usuario -ya sea disentildeada para una webApp una aplicacioacuten desoftware tradICional un producto de consumo o un dispositivo industrial- debe pre-sentar las srgUlentes caracteristicas faacutecil de usar faacutecil de aprender faacutecil de navegar
rntUltlva conSIstente eficiente libre de errores y funcional Debe ofrecer al usuariofinalun~ experiencia satisfactoria y gratificante Los conceptos principios y meacutetodosde dIseno de la rnterfaz brindan al ingeniero Web las herramientas requeridas paralograr esta lista de atributos
En el capitulo 12 se observoacute que el disentildeo de la interfaz comienza no con unaconsideracioacuten de la tecnologiacutea sino maacutes bien con un cuidadoso examen del usuariofinal Durante el modelado de anaacutelisis para la ingenieria Web (Capitulo 18) se desa-rrolla una jerarqUla de usuario Cada categoriacutea de usuario puede tener necesidadessutllm~nte dIferentes tal vez quiera interactuar con la WebApp en diferentes formasy qUlza requiera funcionalidad y contenido uacutenicos Esta informacioacuten se deriva duran-te el anaacutelisis de requisitos pero se revisa como el primer paso en el disentildeo de la in-terfaz
-~Un silto es ~mente uti~rzabIe pero carece de un esrtlo de disentildeo elegmrte y adecuada fra~ ClIrt~er
Dix [DIX99] argumenta que un ingeniero Web debe disentildear una interfaz de modoque responda tres preguntas primarias para el usuario final
3 La mayoria de si no es que todas las directrices presentadas en el capitulo 12 se aplican igualmen-te al dIsentildeo de mterfases WebApp Si todaviacutea no lee el capitulo 12 haacutegalo en este momento
Si es probable que losUSlJanos puedan en-tror o su WebApp envarios ubicaciones ynrveles en lo iexclerarquiade conTenido aseguacute-rese de disentildear cadopaacutegina con carocterismiddothcos de navegacioacutenque conduzcan 01USlJano o los ohaspunfos de inTereacutes
Uno bueno interfolWebApp es comprensble e indulgente yofrece 01usuario unosensacioacuten de conlTol
iquestDoacutende esloy La interfaz debe 1) ofrecer una indicacioacuten de que se ha tenido ac-ceso a la WebApp y 2) informar al usuario de su ubicacioacuten en la jerarquiacutea de conte-nido
iquestQueacute puedo hacer ahora La interfaz siempre debe ayudar al usuario a entendersus opciones actuales queacute funciones estaacuten disponibles queacute vinculos estaacuten vivosqueacute contenido es relevante
iquestDoacutende he estado a doacutende voy La interfaz debe facilitar la navegacioacuten En conse-cuencia debe proporcionar un mapa (implementado en una forma faacutecil de entender)de doacutende ha estado el usuario y queacute rutas puede tomar para moverse a cualquierparte dentro de la WebApp
La interfaz de una WebApp efectiva debe proporciacuteonar respuestas a cada una de es-tas preguntas conforme el usuario final navega a traveacutes del contenido y la funciona-Iidad
1931 Principios y directrices del disentildeo de la intertaz
Bruce Tognozzi [TOGO1) define un conjunto de caracteristicas fundamentales quedeben presentar todas las interfaces y al hacerlo establece una filosofia que debeseguir todo disentildeador de interfaz de WebApp
Las interfaces efectivasson visualmente aparentese indulgentese implantan en sususuariosunasensaci6ndecontrolLosusuanosvenraacutepidamentela envergaduradesusop-cionescomprendenc6mo lograr susmetasy hacensu trabajo
Lasinterfacesefectivasno preocupanal usuariocon los trabajosinternosdel sistemaEl trabajOseguardademaneracuidadosay continuacon la opci6n total de que el usua-rio deshagacualquieractividaden cualquiertiempo
LasaplicaCionesy serviciosefectivosreailzanun maacuteximode trabajomientrasdeman-dan un miacutenimo de informaci6n a los usuanos
Con la finalidad de disentildear interfaces que muestren dichas caracteristicas Tog-nozzi [TOGOJ J identifica un conjunto de principios de disentildeo primordiales5
Anticipacioacuten una WebApp se debe disentildear de modo que anricipe el siguiente movi-miento del usuario Por ejemplo considere una WebApp de soporte al cliente desa-rrollada para un fabricante de impresoras para computadora Un usuano ha solicitadoun objeto de contenido que presenta informacioacuten acerca de un controlador de im-presora para un sistema operativo lanzado recientemente El disentildeador de laWebApp debe anticipar que el usuario pueda solicitar una descarga del controlador
4 Todas las personas han marcado alguna pagma ae un sitio Web soacutelo para volver a visitarla mas tar-
de y no lenel que dar indicaCIones del SitIO Web o del contexto de la pagina (asiacute como para evitar
moverse hdcla otra ublCaClon dentro del SItIOILos pnnclplOs ongmales de Tognozzl se han aaaptado y extendido con el fm de aprovecharlos en
este libro Vease iexclTOGOI] para mayores detalles acerca de estos pnnclplos
lo interfol de unoWebApp debe estor dsentildeodo poro ajustarse01conjunto de princpios anotados aquiacute
y debe proporcionar facilidades de navegacioacuten que permitan hacerlo s J In so lCllarJealusuano una busque da de esta capacidad
Comuniexclmiddotcacioacuten la interfaz debe comunicar el estado de cualquier actiVIdad que- hayainiciado el usuario La comunicacioacuten puede ser obvia (por ejemplo un mensaje detexto) o sutil (por ejemplo una hoja de papel que se mueva a traveacutes de una impre-sora para indicar que Jaimpresioacuten estaacute en camino) La interfaz tambieacuten debe comu-nicar el estado del usuario (por ejemplo la identificacioacuten del usuario) y la ubicaclondentro de la jerarquia de contenido de la WebApp
Consistencia el uso de los controles de navegacioacuten menuacutes iacuteconos y esteacutetica (porejemplo color forma plantilla) deben ser consistentes a traveacutes de toda la WebApp Porejemplo si el texto subrayado de azul implica un vinculo de navegacioacuten el conteni-do nunca debe incorporar texto subrayado en azul que no implique un vinculo To-da caracteriacutestica de la interfaz debe responder en una forma que sea consistente conlas expectativas del usuario
Autonomiacutea controlada la interfaz debe facilitarle al usuano el movimiento a traveacutes detoda la WebApp pero 10 debe hacer en una forma que refuerce las convenciones de na-vegacioacuten establecidas para la aplicacioacuten Por ejemplo la navegacioacuten hacia porcionesseguras de la WebApp se deben controlar con la identificacioacuten del usuario y su con-trasentildea y no debe existir mecanismo de navegacioacuten que permita al usuario dar lavuelta a dichos controles i
EjiClenclG el disentildeo de la WebApp y su interfaz deben opumizar la ejiciencia laboraldel usuario no la eJiciencia del ingeniero Web que la disentildea y 1 construye o el ambien-te cliente-servidor que la ejecuta Tognozzi [TOGOJ J seiiala esto cuando escribe Es-ta simple verdad es por lo que es importante para todos los i~volucrados en un pro-yecto de software el apreciar la importancia de hacer propia la meta de productivi-dad del usuario y entender la diferencia vital entre construir un sistema eficiente yfortalecer a un usuario eficiente
Flexibilidad la inter(az debe ser lo su(icientementeJlexible como para permiur que al-gunos usuarios ralicen tareas directamente y otros exploren la WebApp en una lormaun tanto aleatoria En todo caso debe permitirle al usuario entender doacutende esta ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar la~rutas de navegacioacuten mal elegidas
Enfoque la interfaz de la WebApp (Y el contenido que presenta) debe enrocarse enlals) tarealS) Importantels) para el usuario En toda hipermedia existe una -tendenciapara dirigir al usuario hacia contenido mal relacionado iquestPor queacute j Porque es muyfaacutecil hacerlo El problema es que el usuario raacutepidamente se puede perder en muchascapas de informacioacuten de apoyo y perder el sitio del contenido original que quena enprimer lugar
6 Tognozzl fTOGOl1 sentildeala que la unlca forma de garantIzar que las expectatIvas del usun) se com-
prendan adecuadamente es medIante una amplia prueba por parte del usuario (capiacute bull10201
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
-Aacuterbol derequisitos decalidad [OIS99]
Calidadde lo
aplicacioacuten Web
iquestPero coacutemo se aprecia la calidad de la WebApp iquestQueacute atributos debe exhibir pa-ra loorar ser buena a los ojos de los usuarios finales y al mismo tiempo mostrar lascara~teristicas teacutecnicas de calidad que permitiraacuten a un ingeniero Web corregir adap-
tar mejorar y apoyar la aplicacioacuten a largo plazoEn realidad todas las caracteriacutesticas generales de la calidad de software tratadas
en los capitulos 9 15 Y 26 se apliacutecan a la WebApps Sin embargo las maacutes relevan-tes de dichas caracteristicas -facilidad de uso funcionalidad confiablhdad eficIen-cia y facilidad de mantenimiento-- proporcionan una base uacutetil para valorar la calidad
de los sistemas basados en Web
Si los productos se disentildean poro encajar mejor en los tendencias naturales del comportamiento humano entonal5~lagenle estaraacute mlIacuteSso1islerna mlIacutel completo y seraacute maacutes produdivomiddot bull
Sson Weiasdleak
Olsina y sus colegas [OLS99J han preparado un aacuterbol de requisitos de calidadque identifica un conjunto de atributos teacutecnicos -facilidad de uso funclonalldadconfiabilidad eficiencia y facilidad de mantenimiento-- que conducen a WebApps deoran calidad La figura 191 resume su trabajo Los criterios anotados en la figuraon de particular intereacutes para los ingenieros Web que deben disentildear constrUir y
mantener las WebApps a largo plazoOffutt (oFF021 extiende los cinco principales atributos de calidad anotados en la
figura 191 al agregar los atributos siguientes
Comprensibilidad global del sitio
~
Caracteriacutesticas de retroalimentacioacuten en liacutenea y ayudaFacilidad de uso Caracteriacutesticas de lo interfaz y esteacutetica
Caracteriacutesticos especiales
Capacidades de buacutesqueda y recuperacioacuten________ Caracteriacutesticos de navegacioacuten y visualizacioacuten
Funcionalidad ---===========-Caracteriacutesticos de la aplicacioacuten relacionados con el dominio
Correcto procesamiento de viacutenculos-------- Recuperacioacuten de errores
~ Validacioacuten y recuperacioacuten de entrado de usuario
~
Desempentildeo en tiem~~ de res~u~staEficiencia ~-- Rapidez de generaclon de pagina--======---Rapidez de generacioacuten de graacuteficos
~
Foacutecil de corregir_ Adaptabilidad
Facilidad de _E======_ Extensibilidadmantenimiento
Estos atributos de calidad son muy similares a los que se presentan en los capiacutetulos 9 15 Y 26 Por
lo tanto se deduce que las caracteristicas de calidad son universales para todo el software
iquestCuaacuteles sonlos principa-
les atributos decolidad poro losWebApps
Seguridad Las webApps se han convertido en una parte integral de las bases dedatos cruciales del gobierno y las empresas Las aplicaciones de comercio electroacuteni-co extraen y luego almacenan informacioacuten confidencial de los clientes Por eacutestas ymuchas otras razones la seguridad de las WebApps es primordial en muchas situa-ciones La medida clave de la seguridad es la habilidad de la WebApp y su ambientede servidor de rechazar el acceso no autorizado e impedir un franco ataque maleacutevo-lo Un anaacutelisis detallado de la seguridad WebApp estaacute maacutes allaacute del alcance de estelibro El lector interesado debe consultar [MCCO1J [NOR02j o [KAL03j
Disponibilidad Incluso la mejor WebApp no satisfaraacute las necesidades de losusuarios si no estaacute disponible En un sentido teacutecnico la disponibilidad es la medidadel porcentaje del tiempo que una WebApps estaacute disponible para usarla El usuariofinal comuacuten espera que las WebApps esteacuten disponibles las 24 horas de todos los diasdel antildeo Algo menos es considerado inaceptable Pero a tiempo no es el uacutenico in-dicador de disponibilidad Offutt [OFF02 sugiere que usar caracteristicas disponi-bles soacutelo en un navegador o una plataforma hace que la WebApp no esteacute diacutesponi-ble para quienes tengan una configuracioacuten de navegador y plataforma diferente Elusuario invariablemente se iraacute a otra parte
Escalabilidad iquestLa WebApp y su ambiente de servidor pueden escalarse para ma-nejar 100 1000 10000 o 100000 usuarios iquestLa WebApp y los sistemas con los cua-les estaacute conectada manejan variaciones significativas en el volumen o la capacidadde respuesta caeraacute catastroacutefica mente (o cesaraacute por completo) No es suficienteconstruir una WebApp exitosa Es igualmente importante construir una WebApp quepueda acomodar el peso del eacutexito (significativamente maacutes usuarios finales) y volver-se todaviacutea maacutes exitosa
Tiempo en el mercado Aunque en sentiacutedo teacutecnico el tiempo en el mercado noes un verdadero atributo de calidad es una medida de calidad desde un punto de vis-ta de los negocios La primera WebApp en el mercado usualmente captura un nuacuteme-ro desproporcionado de usuarios finales
Cientos de miles de paacuteginas Web estaacuten disponibles para quienes busquen informa-cioacuten en la World Wide Web Incluso las buacutesquedas Web mejor dirigidas resultan enuna avalancha de contenido Con tantas fuentes de informacioacuten de las cuales elegiriquestcoacutemo valora el usuario la calidad (por ejemplo veracidad precisioacuten integridadoportunidad) del contenido que se presenta dentro de una WebApp TiIlman [TILOO)sugiere un conjunto de criterios uacutetil para valorar la calidad del contenido
bull iquestEl aacutembito y la profundidad del contenido se pueden determinar con facilidadpara asegurar que satisfacen las necesidades del usuario
Desde luego esta expectativa es irreal Las grandes WebApps deben planificar el periodo de inac-
tividad para reparaciones y aaualizaciones
bull
~
Lista de verificacioacuten de la calidad del disentildeo de la WebApp Lasiguiente lista de verificacioacuten adaptada de bull iquestLastablas estaacuten organizadas y dimensionados en uno
la informacioacuten presentada en webreference forma que las hace camprensibles y que se desplieguenccm proporciono un conjunto de preguntas que ayudaraacuten eficientemente
tonto a los ingenieros Web como o los usuarios finales a bull iquestEl HTML esteacute optimizado poro eliminor ineficienciasvalorar la calidad global de una WebApp
bull iquestEl disentildeo global de la poacutegina facilita la lectura y la na-vegocioacuten
bull iquestTodos los punteros iexclviacutenculos) proporcionon viacutenculos coninformacioacuten interesante poro los usuarios
bull iquestEs probable que la mayaria de las vinculas persistanen la web2
bull iquestEl contenido lo funcioacuten o las opciones de navegacioacutenpueden ajustarse a las preferencias del usuario
bull iquestEl contenida a la funcianalidad se pueden personalizaral ancho de banda en el cual se comunico el usuario
bull iquestlos groacuteficas y los otros medios que no son textuales sehan usada de manera aprapiada2 iquestEl tamantildeo de las ar-chivos graacuteficos estaacute optimizado poro que se desplie-guen con eficiencia
iquestQueacute sedeberiacutea
ansiacutederar cuan-la se valore elantenido de ea-idad
bull iquestLa WebApp estoacute instrumentoda can utilidades de ges-tioacuten del sitio que incluyan herramientas poro rastrear suusa prueba de vinculas buacutesqueda lacal y seguridad2
bull iquestLos antecedentes y la jerarquia de los autores del contenido se pueden iden-tificar faacutecilmente
bull iquestEsposible determinar la precisioacuten del contenido la uacuteltima actualizacioacuten y loque fue actualizado
bull iquestEl contenido y su ubicacioacuten son estables (es decir permaneceraacuten en la URLde referencia)
Ademaacutes de estas preguntas relacionadas con el contenido se pueden antildeadir las si-guientes
bull iquestEl contenido es creible
bull iquestEl contenido es uacutenico Esto es iquestla WebApp proporciona alguacuten beneficio uacuteni-co a quienes la usen
bull iquestEl contenido es valioso para la comunidad de usuarios a que se dirige
bull iquestEl contenido estaacute bien organizado iquestEstaacute en un indice iquestEsfaacutecilmente acce-sible
La lista de verificacioacuten anotada en esta seccioacuten soacutelo representa una pequentildea mues-tra de los asuntos que deben abordarse conforme evolucione el disentildeo de una WebAppUna meta importante de la ingenieria Web es desarrollar sistemas en los que se pro-porcionen respuestas afirmativas a todas las preguntas relacionadas con la calidad
1912 Metas de disentildeo
En su columna regular acerca del disentildeo Web Jean Kaiser [KAluuml2] sugiere las si-guientes metas de disentildeo que son aplicables virtualmente a toda WebApp sin im-portar el dominio tamantildeo o complejidad de la aplicacioacuten
Simplicidad Aunque pueda parecer pasada de moda la expresioacuten todo con mo-deracioacuten se aplica a las webApps Existe una tendencia entre algunos disentildeadoresa proporcionar al usuario final demasiado contenido exhaustivo efectos visualesextremos animacioacuten entrometida enormes paacuteginas Web la lista es larga Es mejorluchar por la moderacioacuten y la simplicidad
Consistencia Esta meta de disentildeo se aplica virtualmente a cada elemento delmodelo de disentildeo El contenido se debe construir de manera consistente (por ejem-plo el formato del texto y los estilos de fuente deben ser los mismos a lo largo de to-dos los documentos de texto el arte graacutefico debe tener una apariencia consistenteesquema de color y estilo) El disentildeo graacutefico (esteacutetica) debe presentar una aparien-cia consistente en todas las partes de la WebApp El disentildeo arquitectoacutenico debe es-tablecer plantillas que conduzcan a una estructura hipermedia consistente El disentildeode interfaz debe definir modos consistentes de interaccioacuten navegacioacuten y desplieguede contenido Los mecanismos de navegacioacuten deben usarse de manera consistentea traveacutes de todos los elementos de la webApp Identidad La esteacutetica la interfaz y el disentildeo de navegacioacuten de una WebApp de-ben ser consistentes con el dominio de la aplicacioacuten para la cual se va a construirUn sitio Web para un grupo hip-hop indudablemente tendraacute una apariencia y un sen-tido diferente al de una WebApp disentildeada para una comp~ntildeia de servicios financie-ros La arquitectura de webApp seraacute completamente diferente las interfases seconstruiraacuten para acomodar diferentes categorias de usuarios la navegacioacuten estaraacuteorganizada para lograr diferentes objetivos Un ingeniero Web (y otros contribuyen-tes de disentildeo) deberaacute trabajar para establecer una identidad para la WebApp por me-dio del disentildeo
Robustez Con base en la identidad establecida usualmente una WebApp haceuna promesa implicita al usuario El usuario espera contenido y funciones robus-tas que sean relevantes para sus necesidades Si dichos elementos estaacuten perdidos oson insuficientes es probable que la WebApp fracase
Navegabilidad Ya se ha sentildealado que la navegacioacuten debe ser simple y consisten-te Tambieacuten debe estar disentildeada de modo que sea intuitiva y predecible Esto es elusuario debe entender coacutemo moverse por la WebApp sin tener que buscar vinculaso instrucciones de navegacioacuten
Apariencia visual De todas las categorias de software las aplicaciones Web sonincuestionablemente las maacutes visuales las maacutes dinaacutemicas y sin duda las maacutes esteacuteti-cas Es indudable que la belleza (apariencia visual) estaacute en el ojo del observador peromuchas caracteristicas de disentildeo (por ejemplo la apariencia y sentidJ del conteni-
G~~D-------------do la plantilla de la interfaz la coordinacioacuten del color el equilibrio del texto los graacute-ficos y otros medios audiovisuales los mecanismos de navegacioacuten) si contribuyen al
aspecto visualcompatibilidad Una webApp se utilizaraacute en una diversidad de ambientes (porejemplo diferentes equipos tipos de conexioacuten a Internet sistemas operativos nave-gadores) y se debe disentildear para que sea compatible con cada uno
Para algunos el disentildea Web se enfoca en la apariencia y sentido visuales para otros el disentildeo Web trata de la es-lruduracioacuten de infannacioacuten y la navegacioacuten a Iraveacutes del espacia del documenta Otros indU5ll pueden ronsidefar que-el disentildea Web trata acerca de la leltnologia empleada para construir aplicaciones Web interarnvas En reolidtJd el dise-ntildeo induye todas estos factores y acoso moacutes Thomas PoweI
Disentildeo de componentes
tecngiacuteo - bull bull -~_-------bull _ bull- ~~- -- bull
192 PIRAacuteMIDE DEL DISENtildeO IWEB
lo IWeb oborco seisdiferentes rtpos dedisentildeo Codo unoconlTibuyeo lo calidadglobal de lo WebApp
iquestQueacute es disentildeo en el contexto de la ingenieria Web Esta pregunta simple es maacutes di-ficil de responder de lo que uno puede creer El disentildeo conduce a un modelo quecontiene la mezcla adecuada de esteacutetica contenido y tecnologiacutea La mezcla variaraacutedepenlliendo de la naturaleza de la WebApp y como consecuencia las actividades
de disentildeo tambieacuten variaraacutenLa figura 192 muestra una piraacutemide de disentildeo para la ingenieria Web Cada nivel
de la piraacutemide representa una de las siguientes actividades de disentildeo
bull Disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacutende los modos de interaccioacuten y una descripcioacuten de los mecanismos de navega-
cioacutenbull Disentildeo esteacutetico tambieacuten llamado disentildeo graacutefico describe la apariencia y
sentimiento de la WebApp Incluye esquemas de color plantilla geomeacutetricatamantildeo de texto fuente y ubicacioacuten uso de graacuteficos y decisiones esteacuteticas re-
lacionadasbull Disentildeo de contenido define la plantilla la estructura y el bosquejo de todo el
contenido que se presenta como parte de la WebApp Establece las relaciones
entre los objetos de contenidobull Disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos de
contenido y para todas las funciones de la WebApp
bull Disentildeo arquitectoacutenico identifica la estructura hipermedia global para la
WebAppbull Disentildeo de componentes desarrolla la loacutegica de procesamiento detallado que
se requiere para implementar componentes funcionales
En las secciones que siguen se consideran con mayor detalle cada una de estas
actividades de disentildeo
12 3 DISENtildeO DELA INTERrAZ DE LA WEBApp3
Toda interfaz del usuario -ya sea disentildeada para una webApp una aplicacioacuten desoftware tradICional un producto de consumo o un dispositivo industrial- debe pre-sentar las srgUlentes caracteristicas faacutecil de usar faacutecil de aprender faacutecil de navegar
rntUltlva conSIstente eficiente libre de errores y funcional Debe ofrecer al usuariofinalun~ experiencia satisfactoria y gratificante Los conceptos principios y meacutetodosde dIseno de la rnterfaz brindan al ingeniero Web las herramientas requeridas paralograr esta lista de atributos
En el capitulo 12 se observoacute que el disentildeo de la interfaz comienza no con unaconsideracioacuten de la tecnologiacutea sino maacutes bien con un cuidadoso examen del usuariofinal Durante el modelado de anaacutelisis para la ingenieria Web (Capitulo 18) se desa-rrolla una jerarqUla de usuario Cada categoriacutea de usuario puede tener necesidadessutllm~nte dIferentes tal vez quiera interactuar con la WebApp en diferentes formasy qUlza requiera funcionalidad y contenido uacutenicos Esta informacioacuten se deriva duran-te el anaacutelisis de requisitos pero se revisa como el primer paso en el disentildeo de la in-terfaz
-~Un silto es ~mente uti~rzabIe pero carece de un esrtlo de disentildeo elegmrte y adecuada fra~ ClIrt~er
Dix [DIX99] argumenta que un ingeniero Web debe disentildear una interfaz de modoque responda tres preguntas primarias para el usuario final
3 La mayoria de si no es que todas las directrices presentadas en el capitulo 12 se aplican igualmen-te al dIsentildeo de mterfases WebApp Si todaviacutea no lee el capitulo 12 haacutegalo en este momento
Si es probable que losUSlJanos puedan en-tror o su WebApp envarios ubicaciones ynrveles en lo iexclerarquiade conTenido aseguacute-rese de disentildear cadopaacutegina con carocterismiddothcos de navegacioacutenque conduzcan 01USlJano o los ohaspunfos de inTereacutes
Uno bueno interfolWebApp es comprensble e indulgente yofrece 01usuario unosensacioacuten de conlTol
iquestDoacutende esloy La interfaz debe 1) ofrecer una indicacioacuten de que se ha tenido ac-ceso a la WebApp y 2) informar al usuario de su ubicacioacuten en la jerarquiacutea de conte-nido
iquestQueacute puedo hacer ahora La interfaz siempre debe ayudar al usuario a entendersus opciones actuales queacute funciones estaacuten disponibles queacute vinculos estaacuten vivosqueacute contenido es relevante
iquestDoacutende he estado a doacutende voy La interfaz debe facilitar la navegacioacuten En conse-cuencia debe proporcionar un mapa (implementado en una forma faacutecil de entender)de doacutende ha estado el usuario y queacute rutas puede tomar para moverse a cualquierparte dentro de la WebApp
La interfaz de una WebApp efectiva debe proporciacuteonar respuestas a cada una de es-tas preguntas conforme el usuario final navega a traveacutes del contenido y la funciona-Iidad
1931 Principios y directrices del disentildeo de la intertaz
Bruce Tognozzi [TOGO1) define un conjunto de caracteristicas fundamentales quedeben presentar todas las interfaces y al hacerlo establece una filosofia que debeseguir todo disentildeador de interfaz de WebApp
Las interfaces efectivasson visualmente aparentese indulgentese implantan en sususuariosunasensaci6ndecontrolLosusuanosvenraacutepidamentela envergaduradesusop-cionescomprendenc6mo lograr susmetasy hacensu trabajo
Lasinterfacesefectivasno preocupanal usuariocon los trabajosinternosdel sistemaEl trabajOseguardademaneracuidadosay continuacon la opci6n total de que el usua-rio deshagacualquieractividaden cualquiertiempo
LasaplicaCionesy serviciosefectivosreailzanun maacuteximode trabajomientrasdeman-dan un miacutenimo de informaci6n a los usuanos
Con la finalidad de disentildear interfaces que muestren dichas caracteristicas Tog-nozzi [TOGOJ J identifica un conjunto de principios de disentildeo primordiales5
Anticipacioacuten una WebApp se debe disentildear de modo que anricipe el siguiente movi-miento del usuario Por ejemplo considere una WebApp de soporte al cliente desa-rrollada para un fabricante de impresoras para computadora Un usuano ha solicitadoun objeto de contenido que presenta informacioacuten acerca de un controlador de im-presora para un sistema operativo lanzado recientemente El disentildeador de laWebApp debe anticipar que el usuario pueda solicitar una descarga del controlador
4 Todas las personas han marcado alguna pagma ae un sitio Web soacutelo para volver a visitarla mas tar-
de y no lenel que dar indicaCIones del SitIO Web o del contexto de la pagina (asiacute como para evitar
moverse hdcla otra ublCaClon dentro del SItIOILos pnnclplOs ongmales de Tognozzl se han aaaptado y extendido con el fm de aprovecharlos en
este libro Vease iexclTOGOI] para mayores detalles acerca de estos pnnclplos
lo interfol de unoWebApp debe estor dsentildeodo poro ajustarse01conjunto de princpios anotados aquiacute
y debe proporcionar facilidades de navegacioacuten que permitan hacerlo s J In so lCllarJealusuano una busque da de esta capacidad
Comuniexclmiddotcacioacuten la interfaz debe comunicar el estado de cualquier actiVIdad que- hayainiciado el usuario La comunicacioacuten puede ser obvia (por ejemplo un mensaje detexto) o sutil (por ejemplo una hoja de papel que se mueva a traveacutes de una impre-sora para indicar que Jaimpresioacuten estaacute en camino) La interfaz tambieacuten debe comu-nicar el estado del usuario (por ejemplo la identificacioacuten del usuario) y la ubicaclondentro de la jerarquia de contenido de la WebApp
Consistencia el uso de los controles de navegacioacuten menuacutes iacuteconos y esteacutetica (porejemplo color forma plantilla) deben ser consistentes a traveacutes de toda la WebApp Porejemplo si el texto subrayado de azul implica un vinculo de navegacioacuten el conteni-do nunca debe incorporar texto subrayado en azul que no implique un vinculo To-da caracteriacutestica de la interfaz debe responder en una forma que sea consistente conlas expectativas del usuario
Autonomiacutea controlada la interfaz debe facilitarle al usuano el movimiento a traveacutes detoda la WebApp pero 10 debe hacer en una forma que refuerce las convenciones de na-vegacioacuten establecidas para la aplicacioacuten Por ejemplo la navegacioacuten hacia porcionesseguras de la WebApp se deben controlar con la identificacioacuten del usuario y su con-trasentildea y no debe existir mecanismo de navegacioacuten que permita al usuario dar lavuelta a dichos controles i
EjiClenclG el disentildeo de la WebApp y su interfaz deben opumizar la ejiciencia laboraldel usuario no la eJiciencia del ingeniero Web que la disentildea y 1 construye o el ambien-te cliente-servidor que la ejecuta Tognozzi [TOGOJ J seiiala esto cuando escribe Es-ta simple verdad es por lo que es importante para todos los i~volucrados en un pro-yecto de software el apreciar la importancia de hacer propia la meta de productivi-dad del usuario y entender la diferencia vital entre construir un sistema eficiente yfortalecer a un usuario eficiente
Flexibilidad la inter(az debe ser lo su(icientementeJlexible como para permiur que al-gunos usuarios ralicen tareas directamente y otros exploren la WebApp en una lormaun tanto aleatoria En todo caso debe permitirle al usuario entender doacutende esta ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar la~rutas de navegacioacuten mal elegidas
Enfoque la interfaz de la WebApp (Y el contenido que presenta) debe enrocarse enlals) tarealS) Importantels) para el usuario En toda hipermedia existe una -tendenciapara dirigir al usuario hacia contenido mal relacionado iquestPor queacute j Porque es muyfaacutecil hacerlo El problema es que el usuario raacutepidamente se puede perder en muchascapas de informacioacuten de apoyo y perder el sitio del contenido original que quena enprimer lugar
6 Tognozzl fTOGOl1 sentildeala que la unlca forma de garantIzar que las expectatIvas del usun) se com-
prendan adecuadamente es medIante una amplia prueba por parte del usuario (capiacute bull10201
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
bull
~
Lista de verificacioacuten de la calidad del disentildeo de la WebApp Lasiguiente lista de verificacioacuten adaptada de bull iquestLastablas estaacuten organizadas y dimensionados en uno
la informacioacuten presentada en webreference forma que las hace camprensibles y que se desplieguenccm proporciono un conjunto de preguntas que ayudaraacuten eficientemente
tonto a los ingenieros Web como o los usuarios finales a bull iquestEl HTML esteacute optimizado poro eliminor ineficienciasvalorar la calidad global de una WebApp
bull iquestEl disentildeo global de la poacutegina facilita la lectura y la na-vegocioacuten
bull iquestTodos los punteros iexclviacutenculos) proporcionon viacutenculos coninformacioacuten interesante poro los usuarios
bull iquestEs probable que la mayaria de las vinculas persistanen la web2
bull iquestEl contenido lo funcioacuten o las opciones de navegacioacutenpueden ajustarse a las preferencias del usuario
bull iquestEl contenida a la funcianalidad se pueden personalizaral ancho de banda en el cual se comunico el usuario
bull iquestlos groacuteficas y los otros medios que no son textuales sehan usada de manera aprapiada2 iquestEl tamantildeo de las ar-chivos graacuteficos estaacute optimizado poro que se desplie-guen con eficiencia
iquestQueacute sedeberiacutea
ansiacutederar cuan-la se valore elantenido de ea-idad
bull iquestLa WebApp estoacute instrumentoda can utilidades de ges-tioacuten del sitio que incluyan herramientas poro rastrear suusa prueba de vinculas buacutesqueda lacal y seguridad2
bull iquestLos antecedentes y la jerarquia de los autores del contenido se pueden iden-tificar faacutecilmente
bull iquestEsposible determinar la precisioacuten del contenido la uacuteltima actualizacioacuten y loque fue actualizado
bull iquestEl contenido y su ubicacioacuten son estables (es decir permaneceraacuten en la URLde referencia)
Ademaacutes de estas preguntas relacionadas con el contenido se pueden antildeadir las si-guientes
bull iquestEl contenido es creible
bull iquestEl contenido es uacutenico Esto es iquestla WebApp proporciona alguacuten beneficio uacuteni-co a quienes la usen
bull iquestEl contenido es valioso para la comunidad de usuarios a que se dirige
bull iquestEl contenido estaacute bien organizado iquestEstaacute en un indice iquestEsfaacutecilmente acce-sible
La lista de verificacioacuten anotada en esta seccioacuten soacutelo representa una pequentildea mues-tra de los asuntos que deben abordarse conforme evolucione el disentildeo de una WebAppUna meta importante de la ingenieria Web es desarrollar sistemas en los que se pro-porcionen respuestas afirmativas a todas las preguntas relacionadas con la calidad
1912 Metas de disentildeo
En su columna regular acerca del disentildeo Web Jean Kaiser [KAluuml2] sugiere las si-guientes metas de disentildeo que son aplicables virtualmente a toda WebApp sin im-portar el dominio tamantildeo o complejidad de la aplicacioacuten
Simplicidad Aunque pueda parecer pasada de moda la expresioacuten todo con mo-deracioacuten se aplica a las webApps Existe una tendencia entre algunos disentildeadoresa proporcionar al usuario final demasiado contenido exhaustivo efectos visualesextremos animacioacuten entrometida enormes paacuteginas Web la lista es larga Es mejorluchar por la moderacioacuten y la simplicidad
Consistencia Esta meta de disentildeo se aplica virtualmente a cada elemento delmodelo de disentildeo El contenido se debe construir de manera consistente (por ejem-plo el formato del texto y los estilos de fuente deben ser los mismos a lo largo de to-dos los documentos de texto el arte graacutefico debe tener una apariencia consistenteesquema de color y estilo) El disentildeo graacutefico (esteacutetica) debe presentar una aparien-cia consistente en todas las partes de la WebApp El disentildeo arquitectoacutenico debe es-tablecer plantillas que conduzcan a una estructura hipermedia consistente El disentildeode interfaz debe definir modos consistentes de interaccioacuten navegacioacuten y desplieguede contenido Los mecanismos de navegacioacuten deben usarse de manera consistentea traveacutes de todos los elementos de la webApp Identidad La esteacutetica la interfaz y el disentildeo de navegacioacuten de una WebApp de-ben ser consistentes con el dominio de la aplicacioacuten para la cual se va a construirUn sitio Web para un grupo hip-hop indudablemente tendraacute una apariencia y un sen-tido diferente al de una WebApp disentildeada para una comp~ntildeia de servicios financie-ros La arquitectura de webApp seraacute completamente diferente las interfases seconstruiraacuten para acomodar diferentes categorias de usuarios la navegacioacuten estaraacuteorganizada para lograr diferentes objetivos Un ingeniero Web (y otros contribuyen-tes de disentildeo) deberaacute trabajar para establecer una identidad para la WebApp por me-dio del disentildeo
Robustez Con base en la identidad establecida usualmente una WebApp haceuna promesa implicita al usuario El usuario espera contenido y funciones robus-tas que sean relevantes para sus necesidades Si dichos elementos estaacuten perdidos oson insuficientes es probable que la WebApp fracase
Navegabilidad Ya se ha sentildealado que la navegacioacuten debe ser simple y consisten-te Tambieacuten debe estar disentildeada de modo que sea intuitiva y predecible Esto es elusuario debe entender coacutemo moverse por la WebApp sin tener que buscar vinculaso instrucciones de navegacioacuten
Apariencia visual De todas las categorias de software las aplicaciones Web sonincuestionablemente las maacutes visuales las maacutes dinaacutemicas y sin duda las maacutes esteacuteti-cas Es indudable que la belleza (apariencia visual) estaacute en el ojo del observador peromuchas caracteristicas de disentildeo (por ejemplo la apariencia y sentidJ del conteni-
G~~D-------------do la plantilla de la interfaz la coordinacioacuten del color el equilibrio del texto los graacute-ficos y otros medios audiovisuales los mecanismos de navegacioacuten) si contribuyen al
aspecto visualcompatibilidad Una webApp se utilizaraacute en una diversidad de ambientes (porejemplo diferentes equipos tipos de conexioacuten a Internet sistemas operativos nave-gadores) y se debe disentildear para que sea compatible con cada uno
Para algunos el disentildea Web se enfoca en la apariencia y sentido visuales para otros el disentildeo Web trata de la es-lruduracioacuten de infannacioacuten y la navegacioacuten a Iraveacutes del espacia del documenta Otros indU5ll pueden ronsidefar que-el disentildea Web trata acerca de la leltnologia empleada para construir aplicaciones Web interarnvas En reolidtJd el dise-ntildeo induye todas estos factores y acoso moacutes Thomas PoweI
Disentildeo de componentes
tecngiacuteo - bull bull -~_-------bull _ bull- ~~- -- bull
192 PIRAacuteMIDE DEL DISENtildeO IWEB
lo IWeb oborco seisdiferentes rtpos dedisentildeo Codo unoconlTibuyeo lo calidadglobal de lo WebApp
iquestQueacute es disentildeo en el contexto de la ingenieria Web Esta pregunta simple es maacutes di-ficil de responder de lo que uno puede creer El disentildeo conduce a un modelo quecontiene la mezcla adecuada de esteacutetica contenido y tecnologiacutea La mezcla variaraacutedepenlliendo de la naturaleza de la WebApp y como consecuencia las actividades
de disentildeo tambieacuten variaraacutenLa figura 192 muestra una piraacutemide de disentildeo para la ingenieria Web Cada nivel
de la piraacutemide representa una de las siguientes actividades de disentildeo
bull Disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacutende los modos de interaccioacuten y una descripcioacuten de los mecanismos de navega-
cioacutenbull Disentildeo esteacutetico tambieacuten llamado disentildeo graacutefico describe la apariencia y
sentimiento de la WebApp Incluye esquemas de color plantilla geomeacutetricatamantildeo de texto fuente y ubicacioacuten uso de graacuteficos y decisiones esteacuteticas re-
lacionadasbull Disentildeo de contenido define la plantilla la estructura y el bosquejo de todo el
contenido que se presenta como parte de la WebApp Establece las relaciones
entre los objetos de contenidobull Disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos de
contenido y para todas las funciones de la WebApp
bull Disentildeo arquitectoacutenico identifica la estructura hipermedia global para la
WebAppbull Disentildeo de componentes desarrolla la loacutegica de procesamiento detallado que
se requiere para implementar componentes funcionales
En las secciones que siguen se consideran con mayor detalle cada una de estas
actividades de disentildeo
12 3 DISENtildeO DELA INTERrAZ DE LA WEBApp3
Toda interfaz del usuario -ya sea disentildeada para una webApp una aplicacioacuten desoftware tradICional un producto de consumo o un dispositivo industrial- debe pre-sentar las srgUlentes caracteristicas faacutecil de usar faacutecil de aprender faacutecil de navegar
rntUltlva conSIstente eficiente libre de errores y funcional Debe ofrecer al usuariofinalun~ experiencia satisfactoria y gratificante Los conceptos principios y meacutetodosde dIseno de la rnterfaz brindan al ingeniero Web las herramientas requeridas paralograr esta lista de atributos
En el capitulo 12 se observoacute que el disentildeo de la interfaz comienza no con unaconsideracioacuten de la tecnologiacutea sino maacutes bien con un cuidadoso examen del usuariofinal Durante el modelado de anaacutelisis para la ingenieria Web (Capitulo 18) se desa-rrolla una jerarqUla de usuario Cada categoriacutea de usuario puede tener necesidadessutllm~nte dIferentes tal vez quiera interactuar con la WebApp en diferentes formasy qUlza requiera funcionalidad y contenido uacutenicos Esta informacioacuten se deriva duran-te el anaacutelisis de requisitos pero se revisa como el primer paso en el disentildeo de la in-terfaz
-~Un silto es ~mente uti~rzabIe pero carece de un esrtlo de disentildeo elegmrte y adecuada fra~ ClIrt~er
Dix [DIX99] argumenta que un ingeniero Web debe disentildear una interfaz de modoque responda tres preguntas primarias para el usuario final
3 La mayoria de si no es que todas las directrices presentadas en el capitulo 12 se aplican igualmen-te al dIsentildeo de mterfases WebApp Si todaviacutea no lee el capitulo 12 haacutegalo en este momento
Si es probable que losUSlJanos puedan en-tror o su WebApp envarios ubicaciones ynrveles en lo iexclerarquiade conTenido aseguacute-rese de disentildear cadopaacutegina con carocterismiddothcos de navegacioacutenque conduzcan 01USlJano o los ohaspunfos de inTereacutes
Uno bueno interfolWebApp es comprensble e indulgente yofrece 01usuario unosensacioacuten de conlTol
iquestDoacutende esloy La interfaz debe 1) ofrecer una indicacioacuten de que se ha tenido ac-ceso a la WebApp y 2) informar al usuario de su ubicacioacuten en la jerarquiacutea de conte-nido
iquestQueacute puedo hacer ahora La interfaz siempre debe ayudar al usuario a entendersus opciones actuales queacute funciones estaacuten disponibles queacute vinculos estaacuten vivosqueacute contenido es relevante
iquestDoacutende he estado a doacutende voy La interfaz debe facilitar la navegacioacuten En conse-cuencia debe proporcionar un mapa (implementado en una forma faacutecil de entender)de doacutende ha estado el usuario y queacute rutas puede tomar para moverse a cualquierparte dentro de la WebApp
La interfaz de una WebApp efectiva debe proporciacuteonar respuestas a cada una de es-tas preguntas conforme el usuario final navega a traveacutes del contenido y la funciona-Iidad
1931 Principios y directrices del disentildeo de la intertaz
Bruce Tognozzi [TOGO1) define un conjunto de caracteristicas fundamentales quedeben presentar todas las interfaces y al hacerlo establece una filosofia que debeseguir todo disentildeador de interfaz de WebApp
Las interfaces efectivasson visualmente aparentese indulgentese implantan en sususuariosunasensaci6ndecontrolLosusuanosvenraacutepidamentela envergaduradesusop-cionescomprendenc6mo lograr susmetasy hacensu trabajo
Lasinterfacesefectivasno preocupanal usuariocon los trabajosinternosdel sistemaEl trabajOseguardademaneracuidadosay continuacon la opci6n total de que el usua-rio deshagacualquieractividaden cualquiertiempo
LasaplicaCionesy serviciosefectivosreailzanun maacuteximode trabajomientrasdeman-dan un miacutenimo de informaci6n a los usuanos
Con la finalidad de disentildear interfaces que muestren dichas caracteristicas Tog-nozzi [TOGOJ J identifica un conjunto de principios de disentildeo primordiales5
Anticipacioacuten una WebApp se debe disentildear de modo que anricipe el siguiente movi-miento del usuario Por ejemplo considere una WebApp de soporte al cliente desa-rrollada para un fabricante de impresoras para computadora Un usuano ha solicitadoun objeto de contenido que presenta informacioacuten acerca de un controlador de im-presora para un sistema operativo lanzado recientemente El disentildeador de laWebApp debe anticipar que el usuario pueda solicitar una descarga del controlador
4 Todas las personas han marcado alguna pagma ae un sitio Web soacutelo para volver a visitarla mas tar-
de y no lenel que dar indicaCIones del SitIO Web o del contexto de la pagina (asiacute como para evitar
moverse hdcla otra ublCaClon dentro del SItIOILos pnnclplOs ongmales de Tognozzl se han aaaptado y extendido con el fm de aprovecharlos en
este libro Vease iexclTOGOI] para mayores detalles acerca de estos pnnclplos
lo interfol de unoWebApp debe estor dsentildeodo poro ajustarse01conjunto de princpios anotados aquiacute
y debe proporcionar facilidades de navegacioacuten que permitan hacerlo s J In so lCllarJealusuano una busque da de esta capacidad
Comuniexclmiddotcacioacuten la interfaz debe comunicar el estado de cualquier actiVIdad que- hayainiciado el usuario La comunicacioacuten puede ser obvia (por ejemplo un mensaje detexto) o sutil (por ejemplo una hoja de papel que se mueva a traveacutes de una impre-sora para indicar que Jaimpresioacuten estaacute en camino) La interfaz tambieacuten debe comu-nicar el estado del usuario (por ejemplo la identificacioacuten del usuario) y la ubicaclondentro de la jerarquia de contenido de la WebApp
Consistencia el uso de los controles de navegacioacuten menuacutes iacuteconos y esteacutetica (porejemplo color forma plantilla) deben ser consistentes a traveacutes de toda la WebApp Porejemplo si el texto subrayado de azul implica un vinculo de navegacioacuten el conteni-do nunca debe incorporar texto subrayado en azul que no implique un vinculo To-da caracteriacutestica de la interfaz debe responder en una forma que sea consistente conlas expectativas del usuario
Autonomiacutea controlada la interfaz debe facilitarle al usuano el movimiento a traveacutes detoda la WebApp pero 10 debe hacer en una forma que refuerce las convenciones de na-vegacioacuten establecidas para la aplicacioacuten Por ejemplo la navegacioacuten hacia porcionesseguras de la WebApp se deben controlar con la identificacioacuten del usuario y su con-trasentildea y no debe existir mecanismo de navegacioacuten que permita al usuario dar lavuelta a dichos controles i
EjiClenclG el disentildeo de la WebApp y su interfaz deben opumizar la ejiciencia laboraldel usuario no la eJiciencia del ingeniero Web que la disentildea y 1 construye o el ambien-te cliente-servidor que la ejecuta Tognozzi [TOGOJ J seiiala esto cuando escribe Es-ta simple verdad es por lo que es importante para todos los i~volucrados en un pro-yecto de software el apreciar la importancia de hacer propia la meta de productivi-dad del usuario y entender la diferencia vital entre construir un sistema eficiente yfortalecer a un usuario eficiente
Flexibilidad la inter(az debe ser lo su(icientementeJlexible como para permiur que al-gunos usuarios ralicen tareas directamente y otros exploren la WebApp en una lormaun tanto aleatoria En todo caso debe permitirle al usuario entender doacutende esta ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar la~rutas de navegacioacuten mal elegidas
Enfoque la interfaz de la WebApp (Y el contenido que presenta) debe enrocarse enlals) tarealS) Importantels) para el usuario En toda hipermedia existe una -tendenciapara dirigir al usuario hacia contenido mal relacionado iquestPor queacute j Porque es muyfaacutecil hacerlo El problema es que el usuario raacutepidamente se puede perder en muchascapas de informacioacuten de apoyo y perder el sitio del contenido original que quena enprimer lugar
6 Tognozzl fTOGOl1 sentildeala que la unlca forma de garantIzar que las expectatIvas del usun) se com-
prendan adecuadamente es medIante una amplia prueba por parte del usuario (capiacute bull10201
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
G~~D-------------do la plantilla de la interfaz la coordinacioacuten del color el equilibrio del texto los graacute-ficos y otros medios audiovisuales los mecanismos de navegacioacuten) si contribuyen al
aspecto visualcompatibilidad Una webApp se utilizaraacute en una diversidad de ambientes (porejemplo diferentes equipos tipos de conexioacuten a Internet sistemas operativos nave-gadores) y se debe disentildear para que sea compatible con cada uno
Para algunos el disentildea Web se enfoca en la apariencia y sentido visuales para otros el disentildeo Web trata de la es-lruduracioacuten de infannacioacuten y la navegacioacuten a Iraveacutes del espacia del documenta Otros indU5ll pueden ronsidefar que-el disentildea Web trata acerca de la leltnologia empleada para construir aplicaciones Web interarnvas En reolidtJd el dise-ntildeo induye todas estos factores y acoso moacutes Thomas PoweI
Disentildeo de componentes
tecngiacuteo - bull bull -~_-------bull _ bull- ~~- -- bull
192 PIRAacuteMIDE DEL DISENtildeO IWEB
lo IWeb oborco seisdiferentes rtpos dedisentildeo Codo unoconlTibuyeo lo calidadglobal de lo WebApp
iquestQueacute es disentildeo en el contexto de la ingenieria Web Esta pregunta simple es maacutes di-ficil de responder de lo que uno puede creer El disentildeo conduce a un modelo quecontiene la mezcla adecuada de esteacutetica contenido y tecnologiacutea La mezcla variaraacutedepenlliendo de la naturaleza de la WebApp y como consecuencia las actividades
de disentildeo tambieacuten variaraacutenLa figura 192 muestra una piraacutemide de disentildeo para la ingenieria Web Cada nivel
de la piraacutemide representa una de las siguientes actividades de disentildeo
bull Disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacutende los modos de interaccioacuten y una descripcioacuten de los mecanismos de navega-
cioacutenbull Disentildeo esteacutetico tambieacuten llamado disentildeo graacutefico describe la apariencia y
sentimiento de la WebApp Incluye esquemas de color plantilla geomeacutetricatamantildeo de texto fuente y ubicacioacuten uso de graacuteficos y decisiones esteacuteticas re-
lacionadasbull Disentildeo de contenido define la plantilla la estructura y el bosquejo de todo el
contenido que se presenta como parte de la WebApp Establece las relaciones
entre los objetos de contenidobull Disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos de
contenido y para todas las funciones de la WebApp
bull Disentildeo arquitectoacutenico identifica la estructura hipermedia global para la
WebAppbull Disentildeo de componentes desarrolla la loacutegica de procesamiento detallado que
se requiere para implementar componentes funcionales
En las secciones que siguen se consideran con mayor detalle cada una de estas
actividades de disentildeo
12 3 DISENtildeO DELA INTERrAZ DE LA WEBApp3
Toda interfaz del usuario -ya sea disentildeada para una webApp una aplicacioacuten desoftware tradICional un producto de consumo o un dispositivo industrial- debe pre-sentar las srgUlentes caracteristicas faacutecil de usar faacutecil de aprender faacutecil de navegar
rntUltlva conSIstente eficiente libre de errores y funcional Debe ofrecer al usuariofinalun~ experiencia satisfactoria y gratificante Los conceptos principios y meacutetodosde dIseno de la rnterfaz brindan al ingeniero Web las herramientas requeridas paralograr esta lista de atributos
En el capitulo 12 se observoacute que el disentildeo de la interfaz comienza no con unaconsideracioacuten de la tecnologiacutea sino maacutes bien con un cuidadoso examen del usuariofinal Durante el modelado de anaacutelisis para la ingenieria Web (Capitulo 18) se desa-rrolla una jerarqUla de usuario Cada categoriacutea de usuario puede tener necesidadessutllm~nte dIferentes tal vez quiera interactuar con la WebApp en diferentes formasy qUlza requiera funcionalidad y contenido uacutenicos Esta informacioacuten se deriva duran-te el anaacutelisis de requisitos pero se revisa como el primer paso en el disentildeo de la in-terfaz
-~Un silto es ~mente uti~rzabIe pero carece de un esrtlo de disentildeo elegmrte y adecuada fra~ ClIrt~er
Dix [DIX99] argumenta que un ingeniero Web debe disentildear una interfaz de modoque responda tres preguntas primarias para el usuario final
3 La mayoria de si no es que todas las directrices presentadas en el capitulo 12 se aplican igualmen-te al dIsentildeo de mterfases WebApp Si todaviacutea no lee el capitulo 12 haacutegalo en este momento
Si es probable que losUSlJanos puedan en-tror o su WebApp envarios ubicaciones ynrveles en lo iexclerarquiade conTenido aseguacute-rese de disentildear cadopaacutegina con carocterismiddothcos de navegacioacutenque conduzcan 01USlJano o los ohaspunfos de inTereacutes
Uno bueno interfolWebApp es comprensble e indulgente yofrece 01usuario unosensacioacuten de conlTol
iquestDoacutende esloy La interfaz debe 1) ofrecer una indicacioacuten de que se ha tenido ac-ceso a la WebApp y 2) informar al usuario de su ubicacioacuten en la jerarquiacutea de conte-nido
iquestQueacute puedo hacer ahora La interfaz siempre debe ayudar al usuario a entendersus opciones actuales queacute funciones estaacuten disponibles queacute vinculos estaacuten vivosqueacute contenido es relevante
iquestDoacutende he estado a doacutende voy La interfaz debe facilitar la navegacioacuten En conse-cuencia debe proporcionar un mapa (implementado en una forma faacutecil de entender)de doacutende ha estado el usuario y queacute rutas puede tomar para moverse a cualquierparte dentro de la WebApp
La interfaz de una WebApp efectiva debe proporciacuteonar respuestas a cada una de es-tas preguntas conforme el usuario final navega a traveacutes del contenido y la funciona-Iidad
1931 Principios y directrices del disentildeo de la intertaz
Bruce Tognozzi [TOGO1) define un conjunto de caracteristicas fundamentales quedeben presentar todas las interfaces y al hacerlo establece una filosofia que debeseguir todo disentildeador de interfaz de WebApp
Las interfaces efectivasson visualmente aparentese indulgentese implantan en sususuariosunasensaci6ndecontrolLosusuanosvenraacutepidamentela envergaduradesusop-cionescomprendenc6mo lograr susmetasy hacensu trabajo
Lasinterfacesefectivasno preocupanal usuariocon los trabajosinternosdel sistemaEl trabajOseguardademaneracuidadosay continuacon la opci6n total de que el usua-rio deshagacualquieractividaden cualquiertiempo
LasaplicaCionesy serviciosefectivosreailzanun maacuteximode trabajomientrasdeman-dan un miacutenimo de informaci6n a los usuanos
Con la finalidad de disentildear interfaces que muestren dichas caracteristicas Tog-nozzi [TOGOJ J identifica un conjunto de principios de disentildeo primordiales5
Anticipacioacuten una WebApp se debe disentildear de modo que anricipe el siguiente movi-miento del usuario Por ejemplo considere una WebApp de soporte al cliente desa-rrollada para un fabricante de impresoras para computadora Un usuano ha solicitadoun objeto de contenido que presenta informacioacuten acerca de un controlador de im-presora para un sistema operativo lanzado recientemente El disentildeador de laWebApp debe anticipar que el usuario pueda solicitar una descarga del controlador
4 Todas las personas han marcado alguna pagma ae un sitio Web soacutelo para volver a visitarla mas tar-
de y no lenel que dar indicaCIones del SitIO Web o del contexto de la pagina (asiacute como para evitar
moverse hdcla otra ublCaClon dentro del SItIOILos pnnclplOs ongmales de Tognozzl se han aaaptado y extendido con el fm de aprovecharlos en
este libro Vease iexclTOGOI] para mayores detalles acerca de estos pnnclplos
lo interfol de unoWebApp debe estor dsentildeodo poro ajustarse01conjunto de princpios anotados aquiacute
y debe proporcionar facilidades de navegacioacuten que permitan hacerlo s J In so lCllarJealusuano una busque da de esta capacidad
Comuniexclmiddotcacioacuten la interfaz debe comunicar el estado de cualquier actiVIdad que- hayainiciado el usuario La comunicacioacuten puede ser obvia (por ejemplo un mensaje detexto) o sutil (por ejemplo una hoja de papel que se mueva a traveacutes de una impre-sora para indicar que Jaimpresioacuten estaacute en camino) La interfaz tambieacuten debe comu-nicar el estado del usuario (por ejemplo la identificacioacuten del usuario) y la ubicaclondentro de la jerarquia de contenido de la WebApp
Consistencia el uso de los controles de navegacioacuten menuacutes iacuteconos y esteacutetica (porejemplo color forma plantilla) deben ser consistentes a traveacutes de toda la WebApp Porejemplo si el texto subrayado de azul implica un vinculo de navegacioacuten el conteni-do nunca debe incorporar texto subrayado en azul que no implique un vinculo To-da caracteriacutestica de la interfaz debe responder en una forma que sea consistente conlas expectativas del usuario
Autonomiacutea controlada la interfaz debe facilitarle al usuano el movimiento a traveacutes detoda la WebApp pero 10 debe hacer en una forma que refuerce las convenciones de na-vegacioacuten establecidas para la aplicacioacuten Por ejemplo la navegacioacuten hacia porcionesseguras de la WebApp se deben controlar con la identificacioacuten del usuario y su con-trasentildea y no debe existir mecanismo de navegacioacuten que permita al usuario dar lavuelta a dichos controles i
EjiClenclG el disentildeo de la WebApp y su interfaz deben opumizar la ejiciencia laboraldel usuario no la eJiciencia del ingeniero Web que la disentildea y 1 construye o el ambien-te cliente-servidor que la ejecuta Tognozzi [TOGOJ J seiiala esto cuando escribe Es-ta simple verdad es por lo que es importante para todos los i~volucrados en un pro-yecto de software el apreciar la importancia de hacer propia la meta de productivi-dad del usuario y entender la diferencia vital entre construir un sistema eficiente yfortalecer a un usuario eficiente
Flexibilidad la inter(az debe ser lo su(icientementeJlexible como para permiur que al-gunos usuarios ralicen tareas directamente y otros exploren la WebApp en una lormaun tanto aleatoria En todo caso debe permitirle al usuario entender doacutende esta ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar la~rutas de navegacioacuten mal elegidas
Enfoque la interfaz de la WebApp (Y el contenido que presenta) debe enrocarse enlals) tarealS) Importantels) para el usuario En toda hipermedia existe una -tendenciapara dirigir al usuario hacia contenido mal relacionado iquestPor queacute j Porque es muyfaacutecil hacerlo El problema es que el usuario raacutepidamente se puede perder en muchascapas de informacioacuten de apoyo y perder el sitio del contenido original que quena enprimer lugar
6 Tognozzl fTOGOl1 sentildeala que la unlca forma de garantIzar que las expectatIvas del usun) se com-
prendan adecuadamente es medIante una amplia prueba por parte del usuario (capiacute bull10201
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Si es probable que losUSlJanos puedan en-tror o su WebApp envarios ubicaciones ynrveles en lo iexclerarquiade conTenido aseguacute-rese de disentildear cadopaacutegina con carocterismiddothcos de navegacioacutenque conduzcan 01USlJano o los ohaspunfos de inTereacutes
Uno bueno interfolWebApp es comprensble e indulgente yofrece 01usuario unosensacioacuten de conlTol
iquestDoacutende esloy La interfaz debe 1) ofrecer una indicacioacuten de que se ha tenido ac-ceso a la WebApp y 2) informar al usuario de su ubicacioacuten en la jerarquiacutea de conte-nido
iquestQueacute puedo hacer ahora La interfaz siempre debe ayudar al usuario a entendersus opciones actuales queacute funciones estaacuten disponibles queacute vinculos estaacuten vivosqueacute contenido es relevante
iquestDoacutende he estado a doacutende voy La interfaz debe facilitar la navegacioacuten En conse-cuencia debe proporcionar un mapa (implementado en una forma faacutecil de entender)de doacutende ha estado el usuario y queacute rutas puede tomar para moverse a cualquierparte dentro de la WebApp
La interfaz de una WebApp efectiva debe proporciacuteonar respuestas a cada una de es-tas preguntas conforme el usuario final navega a traveacutes del contenido y la funciona-Iidad
1931 Principios y directrices del disentildeo de la intertaz
Bruce Tognozzi [TOGO1) define un conjunto de caracteristicas fundamentales quedeben presentar todas las interfaces y al hacerlo establece una filosofia que debeseguir todo disentildeador de interfaz de WebApp
Las interfaces efectivasson visualmente aparentese indulgentese implantan en sususuariosunasensaci6ndecontrolLosusuanosvenraacutepidamentela envergaduradesusop-cionescomprendenc6mo lograr susmetasy hacensu trabajo
Lasinterfacesefectivasno preocupanal usuariocon los trabajosinternosdel sistemaEl trabajOseguardademaneracuidadosay continuacon la opci6n total de que el usua-rio deshagacualquieractividaden cualquiertiempo
LasaplicaCionesy serviciosefectivosreailzanun maacuteximode trabajomientrasdeman-dan un miacutenimo de informaci6n a los usuanos
Con la finalidad de disentildear interfaces que muestren dichas caracteristicas Tog-nozzi [TOGOJ J identifica un conjunto de principios de disentildeo primordiales5
Anticipacioacuten una WebApp se debe disentildear de modo que anricipe el siguiente movi-miento del usuario Por ejemplo considere una WebApp de soporte al cliente desa-rrollada para un fabricante de impresoras para computadora Un usuano ha solicitadoun objeto de contenido que presenta informacioacuten acerca de un controlador de im-presora para un sistema operativo lanzado recientemente El disentildeador de laWebApp debe anticipar que el usuario pueda solicitar una descarga del controlador
4 Todas las personas han marcado alguna pagma ae un sitio Web soacutelo para volver a visitarla mas tar-
de y no lenel que dar indicaCIones del SitIO Web o del contexto de la pagina (asiacute como para evitar
moverse hdcla otra ublCaClon dentro del SItIOILos pnnclplOs ongmales de Tognozzl se han aaaptado y extendido con el fm de aprovecharlos en
este libro Vease iexclTOGOI] para mayores detalles acerca de estos pnnclplos
lo interfol de unoWebApp debe estor dsentildeodo poro ajustarse01conjunto de princpios anotados aquiacute
y debe proporcionar facilidades de navegacioacuten que permitan hacerlo s J In so lCllarJealusuano una busque da de esta capacidad
Comuniexclmiddotcacioacuten la interfaz debe comunicar el estado de cualquier actiVIdad que- hayainiciado el usuario La comunicacioacuten puede ser obvia (por ejemplo un mensaje detexto) o sutil (por ejemplo una hoja de papel que se mueva a traveacutes de una impre-sora para indicar que Jaimpresioacuten estaacute en camino) La interfaz tambieacuten debe comu-nicar el estado del usuario (por ejemplo la identificacioacuten del usuario) y la ubicaclondentro de la jerarquia de contenido de la WebApp
Consistencia el uso de los controles de navegacioacuten menuacutes iacuteconos y esteacutetica (porejemplo color forma plantilla) deben ser consistentes a traveacutes de toda la WebApp Porejemplo si el texto subrayado de azul implica un vinculo de navegacioacuten el conteni-do nunca debe incorporar texto subrayado en azul que no implique un vinculo To-da caracteriacutestica de la interfaz debe responder en una forma que sea consistente conlas expectativas del usuario
Autonomiacutea controlada la interfaz debe facilitarle al usuano el movimiento a traveacutes detoda la WebApp pero 10 debe hacer en una forma que refuerce las convenciones de na-vegacioacuten establecidas para la aplicacioacuten Por ejemplo la navegacioacuten hacia porcionesseguras de la WebApp se deben controlar con la identificacioacuten del usuario y su con-trasentildea y no debe existir mecanismo de navegacioacuten que permita al usuario dar lavuelta a dichos controles i
EjiClenclG el disentildeo de la WebApp y su interfaz deben opumizar la ejiciencia laboraldel usuario no la eJiciencia del ingeniero Web que la disentildea y 1 construye o el ambien-te cliente-servidor que la ejecuta Tognozzi [TOGOJ J seiiala esto cuando escribe Es-ta simple verdad es por lo que es importante para todos los i~volucrados en un pro-yecto de software el apreciar la importancia de hacer propia la meta de productivi-dad del usuario y entender la diferencia vital entre construir un sistema eficiente yfortalecer a un usuario eficiente
Flexibilidad la inter(az debe ser lo su(icientementeJlexible como para permiur que al-gunos usuarios ralicen tareas directamente y otros exploren la WebApp en una lormaun tanto aleatoria En todo caso debe permitirle al usuario entender doacutende esta ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar la~rutas de navegacioacuten mal elegidas
Enfoque la interfaz de la WebApp (Y el contenido que presenta) debe enrocarse enlals) tarealS) Importantels) para el usuario En toda hipermedia existe una -tendenciapara dirigir al usuario hacia contenido mal relacionado iquestPor queacute j Porque es muyfaacutecil hacerlo El problema es que el usuario raacutepidamente se puede perder en muchascapas de informacioacuten de apoyo y perder el sitio del contenido original que quena enprimer lugar
6 Tognozzl fTOGOl1 sentildeala que la unlca forma de garantIzar que las expectatIvas del usun) se com-
prendan adecuadamente es medIante una amplia prueba por parte del usuario (capiacute bull10201
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
dOOIOacute
Uoo biJsQuedc en 1Web desrubrinl multhoslilrelltlsdispooiblespor ejemjlkl pequelinteOacutellles y doses JlMlA~ en jav bullbullbullbullbull lOlII
COM OCOM ylibrerlos ripo enmsdRMiaosoft(011
Ley de F(1 EI tiempo para adquirir un objetivo es una funCioacuten de la distanCia a la que
se halla y de su tamantildeo [TOGO11Con base en un estudio realizado en la decada de1950 [FIT541 la ley de Fitt es un meacutetodo efectivo de modelar rapldos mOVimientosdirigidos donde un apeacutendice (como una mano) parte del reposo en una poslclon deinicio especifica y se mueve hacia el reposo dentro de unaarea estableCida como ob-jetivo [ZHA02] Si una tarea del usuario define una secuenCiade selecciones o entradasestandarizadas (con muchas opciones diferentes dentro de la secuencia) la pnmeraseleccioacuten (por ejemplo seleccioacuten de ratoacuten) debe estar fisicamente cerca de la siguien-te seleccioacuten Por ejemplo considere la interfaz de la paacutegina de inicio de una WebAppen un sitio de comercio electroacutenico que vende aparatos electrodomeacutesticos
Cada opcioacuten del usuario implica un conjunto de elecciones o acciones de segUi-miento del usuario Por ejemplo una opcioacuten comprar UJlproducto reqUiere que elusuario ingrese una categoriacutea de producto seguida por el nombre de eacuteste La cate-goria del producto (por ejemplo equipo de audio televisores repro~uctores de DVD)
aparece como un menuacute desplegable tan pronto como se selecCiona comprar un pro-ducto En consecuencia la siguiente eleccioacuten es inmediatamente obvia (esta cerca)y el tiempo para adquirir es despreciable Si por otra parte la eleccioacuten aparece enun menuacute ubicado en el otro lado de la pantalla el tiempo para que el usuano lo ad-
quie~a (y ruego realice la eleccioacuten) seraacute demasiadoObjetos de interfaz humana Se ha desarrollado una gran libreriacutea de objetos de in ter-
faz hUn1ana re utilizables para WebApps Uacuteselas Es posible adquirir de vanas librenasde objetos cualquier objeto de interfaz que pueda ser ViStOescuchado tocado o de
alguacuten otro modo percibido [TOGOI1 por un usuario final
Reduccioacuten de latencia Maacutes que obligar al usuario a esperar eI)in de alguna opera-
cioacuten interna (por ejemplo descargar una imagen graacute)iea compleja) la WebApp debe usar
la multitarea en una forma que permita al usuario proceder con el trabajo como s la
operacioacuten hubiese sido completada Ademaacutes de reducir la latencia las demoras debenreconocerse de modo que el usuario comprenda lo que esta ocumendo Esto mclu-ye 1) proporcionar retroalimentacioacuten de audiacuteo (por ejemplo un clic o campanada)cuando una seleccioacuten no genera una accioacuten inmediata de la WebApp 2) desplegarun reloj animado o barra de progreso para indicar que el procesamiento esta en mar-cha 3) ofrecer alguacuten entretenimiento (por ejemplo una antmaClon o presentaClon de
texto) mientras ocurra un procesamiento largo
S mejorvioje es el que tiene el menor nuacutemero de pasos Acorte lo distoncio entre el usuorioy su mefamiddot-~o
Facilidad de aprendizaje La inteifaz de una WebApp se debe disentildear para minimizar
el tiempo de aprendizaje y una vez aprendido reducir el reaprendlzaJe requend~ cuan-
do se vuelve a visitar la WebApp En general la interfaz debe acentuar un diseno sim-ple e intuitivo que organice el contenido y la funcionalidad en categonas obvias pa-
ra el usuario
~ON5EJO
La metaacuteforas san unoidea excelente parquereReion lo experienciadel mundo real Soacutelose debe aseguror quelo meroforo que se el~0 es bien conocidoentre los usuoriosfinales
Metaacuteforas una inteifaz que ucilice una metaacutefora de mteraccioacuten es maacutes faacutecil de apren-
der y de usar en tanto la meeaacutefora sea apropiada para la aplicacioacuten y el usuario Una
metaacutefora debe llamar imaacutegenes y conceptos de la experiencia del usuario pero nonecesita ser una reproduccioacuten exacta de una experiencia del mundo real Por ejemploun sitio de comercio electroacutenico que implementa el pago de cuentas automatizado pa-ra una institucioacuten financiera usa una metaacutefora de lista de verificacioacuten (no de manerasorprendente) para asistiacuter al usuario en la especiacuteficacioacuten y la calendarizacioacuten de lospagos de cuentas Sin embargo cuando un usuario escribe un cheque no necesitaingresar el nombre completo del pagador sino que puede elegiacuter de una lista de paga-dores o hacer que el sistema seleccione con base en las primeras letras escritas Lametaacutefora permanece intacta pero el usuario obtiene asistencia de la WebApp
Mantener la integridad del producto de trabajo Un producto de trabajo (por ejemplo
una forma completada por el usuario una lisea especificada por el usuario) debe guardar-
se de manera automaacutecica de modo que no se perderaacute si ocurriese un error Todo mundoha experimentado la frustracioacuten asociada con el hecho de completar un gran formu-lario WebApp soacutelo para que el contenido se pierda debido a un error (que comete elusuario la WebApp o la transmisioacuten de cliente a servidor) Para evitar esto la WebAppse debe disentildear para autoguardar todos los datos especificados por el usuario
Legibilidad toda la informacioacuten presentada a traveacutes de la inteifaz debe ser legible pa-
ra joacutevenes y viejos El disentildeador de la interfaz debe enfatizar los estilos de letra legi-ble tamantildeos de fuente y opciones de fondo de color que mejoren el contraste
Estado de rastro Cuando sea adecuado el estado de la interaccioacuten del usuario debe
rastrearse y almacenarse de modo que un usuario pueda salir y regresar maacutes tarde allu-
gar de donde salioacute En general las cookies se pueden disentildear para almacenar infor-macioacuten de estado Sin embargo las cookies son una tecnologiacutea controvertida y otrassoluciones de disentildeo pueden ser maacutes aceptables para algunos usuarios
Navegacioacuten visible una inteifaz de WebApp bien disentildeada proporciona la ilusioacuten de
que los usuarios estaacuten en el mismo lugar y que se les lleva el trabajo hasta sus lugares
[TOGO11Cuando se usa este enfoque la navegacioacuten no es preocupacioacuten del usuarioEn lugar de eso el usuariacuteo recupera objetos de contenido y selecciona funciones quese despliegan y ejecutan por medio de la interfaz
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Nielsen y Wagner [NIE96] sugieren unas cuantas directrices pragmaacuteticas en el di-sentildeo de interfases (basados en su redisentildeo de una gran WebApp) que proporcionanun buen complemento a los principios sugeridos paacuterrafos atraacutes en esta seccioacuten
bull La rapidez de lectura en un monitor de computadora es aproximadamente 25por ciento maacutes lenta respecto de la lectura en impresos En consecuenCia nofuerce al usuario a leer voluminosas cantidades de texto en partICular cuandose explica la operacioacuten de la WebApp o se ofrece ayuda en la navegacioacuten
bull Evite los signos de en construccioacuten crean expectativas y provocan un vinculoinnecesario que es seguro para la decepcioacuten
bull Los usuarios prefieren no desplazarse La informacioacuten importante debe estardentro de las dimensiones de una ventana tipica de navegador
bull Los menuacutes de navegacioacuten y los encabezados deben estar disentildeados de mane-ra consistente y deben estar disponibles en todas las paacuteginas que esten dlspo-
iquestQueacutemelanismos
de iexclnlerallIacuteoacutenesloacuten disponiblespora los disentildeodoresde WebApps
nibles para el usuario El disentildeo no debe descansar en las funciones del nave-gador para asistir en la navegacioacuten
La esteacutetica nunca debe sustituir la funcionalidad Por ejemplo un simple bo-toacuten puede ser una mejor opcioacuten de navegacioacuten que una imagen o un iconoesteacuteticamente placenteros pero vagos cuya intencioacuten no es clara
bull Las opciones de navegacioacuten deben ser obvias incluso para el usuario casualEl usuario no debe tener que buscar en la pantalla para determinar coacutemo vin-cularse con otro contenido o servicio
Una interfaz bien disentildeada mejora la percepcioacuten del usuario del contenido o servi-cios que proporciona el sitio No necesariamente tiene que ser ostentosa sino quesiempre debe estar bien estructurada y ergonoacutemicamente saludable
Lo gente tiene muy JlOlIIpodendo Ion los sitiosWWW pobremente disentildeados ~JakobIfI8lsen y -ne Wbullbull middot
Los objetivos de la interfaz de una WebApp son)) establecer una ventana consisten-te con el contenido y la funcionalidad que proporciona 2) guiar al usuario a traveacutesde una serie de interacciones con la WebApp y 3) organizar las opciones de nave-gacioacuten y el contenido disponible para el usuario Lograr una interfaz consistente re-quiere que el disentildeador use primero el disentildeo esteacutetico (seccoacuten 194) con el fin de es-tablecer una apariencia coherente para la interfaz Esto abarca muchas caracteris-ticas pero debe subrayar la plantilla y la forma de los me()Qnismos de navegacioacutenPara guiar la interaccioacuten del usuario el disentildeador de la interfaz puede emplear unametaacutefora apropiada que permita al usuario adquirir una comprensioacuten intuitiva de lainterfaz Las opciones de navegacioacuten las implementa el disentildeador seleccionando deentre varios mecanismos de interaccion
bull Menuacutes de navegaCioacuten menus clave (organizados vertical u horizontalmente)que mencionan contenido o funcionalidad clave Dichos menuacutes se pueden im-plementar de modo que el usuario pueda elegir de una jerarquia de subtemasque se despliegan cuando se selecciona la opcioacuten de menuacute primario
bull leonos graacuteficos botoacuten interruptores e imaacutegenes graacuteficas similares que permi-ten al usuario seleccionar alguna propiedad o especificar una decisioacuten
bull Imaacutegenes graacuteficas alguna representacioacuten graacutefica que el usuario pueda selec-cionar y que implemente un viacutenculo hacia un objeto de contenido o funciona-lidad de la WebApp
En este contexto una melra es unil re~resentaclOn (extraiacuteda de la expenenc12 del mundo real del
usuariO) que puede modelarse dentro del contexto de la mterfaz Un ejemplo sjmplp pJede ser unInterruptor deshzable con que se controla el volumen auditivo de un archivo mp
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Correlacioacutende los objetlmiddotvos del usuamiddotrio en las acmiddotciones de lalnlerlaz
Esimportante anotar que uno o maacutes de dichos mecanismos de control debe propor-
cionarse en cada nivel de la jerarquia de contenido
1933 Flujo de trabajo en el disentildeo de la interfaz
Aunque un anaacutelisis detallado del disentildeo de la interfaz para WebApps es mejor dejar-lo a libros de texto que se dedican a la materia (por ejemplo [GAL02] [RASOO]o[NIEOOJ)vale la pena echar un vistazo a las tareas de disentildeo clave En el capitulo 12se sentildealoacute que el disentildeo de la interfaz del usuario comienza con la identificacioacuten deeacuteste la tarea y los requisitos ambientales Una vez que se han identificado las tareasdel usuario se crean y analizan sus escenarios (casos de uso) para definir un con-junto de ubjetos y acciones de interfaz Este trabajo se representa como parte delmodelo de anaacutelisis de la webApp tratado en el capitulo 18
Las siguientes tareas representan un flujo de trabajo rudimentario para el disentildeo
de la interfaz WebApp
l Revisar la informacioacuten contenida en el modelo de anaacutelisis y refmarla
conforme se requiera
2 Desarrollar un bosquejo aproximado de la plantilla de la interfaz de lawebApp Como parte de la actividad de modelado del anaacutelisis se pudo haberdesarrollado un prototipo de la interfaz (que incluya la plantilla) Si ya existela plantilla debe revisarse y refinarse conforme se requiera Si no se ha desa-rrollado la plantilla de la interfaz el equipo de ingenieria Web debe trabajarcon los participantes para desarrollarla en este momento En la figura 193semuestra una primera versioacuten de un bosquejo de plantilla
Borro de menuacutede funciones principales
Obie~vo 1Objetivo 2Objetivo 3Objetivo 4-Objetivo 5
Menuacute denavegacioacuten
3 Correlacionar los objetivos del usuario con acciones especificas de lainterfaz Para la gran mayoria de las WebApps el usuario tendraacute un conjuntorelativamente primario de objetivos primarios (usualmente entre cuatro y sie-te) Eacutestosdeben correlacionarse con acciones especiacuteficas de la interfaz comose muestra en la figura 193
4 Defmir un conjunto de tareas de usuario que esteacuten asociadas con ca-da accioacuten Cadaaccioacuten de la interfaz (por ejemplo comprar un producto)estaacute asociada con un conjunto de tareas de usuario Dichas tareas se identifi-caron durante el modelado de anaacutelisis Durante el disentildeo deben correlacio-narse interacciones especificas que abarquen asuntos de navegacioacuten objetosde contenido y funciones WebApp
5 Elaborar bosquejos con imaacutegenes de la pantalla para cada accioacuten dela interfaz Conforme se considera cada accioacuten se debe crear una secuenciade imaacutegenesen bosquejo (imaacutegenesde pantallas) para esbozar coacutemo respondela interfaz a la interaccioacuten del usuario Se deben identificar los objetos de con-tenido (incluso si todavia no se disentildean ni desarrollan) se debe mostrar lafuncionalidad de la WebApp y se deben indicar los viacutenculos de navegacioacuten
6 Refmar la plantilla de la interfaz y los bosquejos con el uso de entra-das desde el disentildeo esteacutetico La plantilla aproximada y los bosquejos loscompletan los ingenieros Web pero la apariencia y la percepcioacuten esteacutetica paraun gran sitio comercial con frecuencia los desarrolla un artista en lugar deprofesionales teacutecnicos
7 Identificar los objetos de la interfaz del usuario que se requieran paraimplementarla Esta tarea puede requerir una buacutesqueda en una Iibreria deobjetos existente para encontrar aquellos objetos reutilizables (clases)apro-piados para la interfaz de la WebApp Ademaacutes en este momento se especifi-can cualesquiera clases de personalizacioacuten
8 Desarrollar una representacioacuten de procedimiento de la interaccioacutendel usuario con la interfaz Esta labor opcional usa diagramas de secuen-cia UML o diagramas de actividad (estudiados en el capitulo 18)para esbozarel flujo de actividades (y decisiones) que ocurren conforme el usuario interac-tuacutea con la WebApp
9 Desarrollar una representacioacuten del comportamiento de la interfaz Es-ta tarea opcional utiliza diagramas de estado UML (estudiados en el capitulo18)para representar las transiciones de estado y los eventos que las causanSe definen los mecanismos de control (es decir los objetos y acciones dispo-nibles con que el usuario altera el estado de una WebApp)
10 Describir la plantilla de la interfaz para cada estado Con el uso de lainformacioacuten de disentildeo desarrollada en las tareas 2 y 5 se asocia una plantillaespeciacutefica o imagen de pantalla con cada estado de la WebApp descrito en latarea 9
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
11 Refinar y revisar el modelo de disentildeo de la interfaz La revisioacuten de la in-terfaz se debe enfocar en la facilidad de uso (capitulo 12)
Es importante notar que el conjunto de tareas finales que haya elegido un equipo deingenieria Web se debe adaptar a los requisitos especiales de la aplicacioacuten que se vaa construir
NollXloiriexclefreroWeblo iriexclefrero de softwote1iooe1lientrJ0I1is1icolesIeacuteroJ) Si seesJuacute enestuaJl1lpkJcoofTuacuteteselJ1 ctefcxJcx graacuteficoexpetinemrxlo iexclXiexclIO eltrofxiexclp de aacuteseiioesteacutetico
El disentildeo esteacutetico tambieacuten llamado disentildeo graacutejico es un esfuerzo artiacutestiacuteco que com-plementa los aspectos teacutecnicos de la ingenieria Web Sin eacutel una webApp puede serfuncional pero sin atractivo Con eacutel una WebApp lleva a sus usuarios a un mundoque los incluye en un aacutembito tanto emocional como intelectual
Pero iquestqueacute es esteacutetica Existe un viejo dicho la belleza existe en los ojos de quienla ve Esto es particularmente apropiado cuando se considera el disentildeo esteacutetico pa-ra las WebApps Para realizar un disentildeo esteacutetico efectivo de nuevo se regresa a lajerarquiacutea de usuarios desarrollada como parte del modelo de anaacuteliacutesis (capiacutetulo J 8) Yse pregunta quieacutenes son los usuarios de la WebApp y queacute apariencia desean
Encontramos que lo gente raacutepidamente evaluacuteo un sitio soacutelo por su disentildeo visuaLDirectrices Slanford para la credibilidad en la Web
1941 Cuestiones de la plantilla
Toda paacutegina Web tiene una cantiacutedad limitada de bien inmueble que puede usarsepara dar soporte a la esteacutetica no funcional caracteriacutesticas de navegacioacuten contenidode informacioacuten y funciacuteonalidad dirigida al usuario El desarrollo de este bien in-mueble se planea durante el disentildeo esteacutetico
Al iacutegual que las cuestiones esteacuteticas no existen reglas absolutas cuando se dise-ntildea una plantilla de pantalla Sin embarl0 vale la pena consiacutederar algunos linea-mientos generales de plantilla
No temerle al espacio vacio No es aconsejable rellenar cada centimetro cuadradode una paacutegina Web con informacioacuten El amontonamiento resultante diacuteficulta que elusuario identifique la informacioacuten o caracteriacutesticas necesarias y crea un caos visualdesagradable
Resaltar el contenido Despueacutes de todo eacutesta es la razoacuten por la cual el usuario es-taacute aquiacute Nielsen [NIEOOjsugiere que la tiacutepica paacutegina Web debe ser 80 por ciento con-tenido con el resto del biacuteen Inmueble dedicado a navegacioacuten y otras caracteriacutesticas
Orgamzar los elementos de planulla de arriba a la izqUierda hacia abajo a la derecha
La gran mayoria de los usuarios exploraraacuten una paacutegina web en gran parte de la mIS-ma forma en que exploran las pagmas de un libro de arriba a la izquierda hacia aba-
jo a la derechaS Si los elementos de plantilla tienen prioridades especificas los ele-mentos de mayor prioridad deben colocarse en la porciacuteoacuten superior izquierda de lapaacutegina bien inmueble
Agrupar navegacioacuten contenido y funcioacuten geograacutejicamente dentro de la paacutegina Loshumanos buscan patrones viacutertualmente en todas las cosas Si no existen patronesdiscemibles dentro de una paacutegina Web es probable que aumente la frustracioacuten delusuario (debido a la buacutesqueda innecesariacutea de la informacioacuten requerida)
No extender el bien inmueble con la barra de desplazamiento Aunque con frecuen-cia el desplazamiento es necesario la mayoria de los estudiacuteos indican que los usua-rios preferirian no desplazarse Es mejor reducir el contenido de la paacutegina o presen-tar el contenido necesario en varias paacuteginas
Considerar la resolucioacuten y el tamantildeo de la ventana de navegador cuando disentildee planti-
llas En vez de definir tamantildeos fijos dentro de una plantilla el disentildeo debe especificartodos los artiacuteculos de la plantilla como un porcentaje del espacio disponible [NIEOO]
1942 Cuestiones de disentildeo graacutefico
El disentildeo gr~(ico considera cada aspecto de la presentacioacuten y percepcioacuten de unaWebApp El proceso de disentildeo graacutefico comienza con la plantilla (seccioacuten 1941) Yprocede hacia la consideracioacuten de esquemas de color globales tipos de fuentes ta-mantildeos y estilos el uso de medios audiovisuales complementcirios (por ejemplo au-dio video animacioacuten) y todos los demaacutes elementos esteacuteticos de una aplicacioacuten Ellector interesado puede obtener Sugerencias y directrices de disentildeo en muchos sitiosweb que se dedican al tema (por ejemplo wwwgraphic-designcom wwwgrantas-ticdesiacutegnscom wwwwpdfdcom) o de una o maacutes fuentesimpresas (por ejemploiexclBAGO] ICLOOlj o IHEI02])
~
Sitios Web bien disentildeadosEn ocasiones lo mejor forma de comprender el
~ buen disentildeo de los WebApps es observar unoscuantas ejemplos En su articula The Tap Twenty Web De-sign Tips (Los mejores 20 sugerencias poro el disentildeoWebl Marcelle Toor (hltpwwwgraphic-designcamWebfeaturetipshtmll sugiere las siguientes sitias Webcama ejemplos de buen disentildea graacutefica
wwwprimocom firma de disentildeo encabezada por PrimoAngeli
WWwwarkhookcom este sitio sirve como aparador parael trabaja de ilustradares y disentildeadares
wwwpbsorgriverofsong serie de televisioacuten poro lo radioy la televisioacuten puacuteblicos acerco de lo muacutesicaestadounidense
wwwRKDINCcam firma de disentildeo con un portafolios enliacuteneo y buenos sugerencias de disentildeo
wwwcommortscomcareerindexhtml revista Communi-cotion Arts una publicacioacuten perioacutedico poro disentildeadomiddotres groacuteficos Una bueno fuente poro otros sitios biendisentildeados
wwwbtdnyccam firma de disentildeo encabezada por BethToudreau
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
) 19 5 DISENtildeO pn CONIENIQg
El disentildeo del contenido se enfoca en dos asuntos de disentildeo diferentes cada uno loabordan individuos con distintos conjuntos de habilidades El disentildeo del contenidodesarrolla una representacioacuten de disentildeo para los objetos de contenido y representalos mecanismos que se requieren para que establezcan sus relaciones uno con otroEsta actividad de disentildeo la dirigen los ingenieros Web
Ademaacutes el disentildeo de contenido se ocupa de la representacioacuten de la informacioacutendentro de un objeto de contenido especifico actividad de disentildeo que dirigen los pu-blicistas los disentildeadores graacuteficos y otros que generan el contenido de una WebApp
Representacioacutendel cllsentildeo delos objetos decontenJdo
los buenos disentildeodores pueden crear normalidad a partir del coos pueden comunicar los idees con daridod por me-dio de lo organizacioacuten y el manejo de los palabras y los dibujos
Jefery V_
1951 Objetos de contenidoLa relacioacuten entre objetos de contenido definida como parte del modelo de anaacutelisiswebApp (por ejemplo figura 183) y los objetos de disentildeo que representan conteni-do es anaacuteloga a la relacioacuten entre las c1aacutesesde anaacutelisis y los componentes de disentildeodescritos en el capitulo I l En el contexto de la ingenieria Web un objeto de conteni-
do estaacute alineado de manera maacutes cercana con un objeto de dato para software con-
ComponltnredeProduClO
poeNumeroporlflNombrltponeTipo ~ El parte dedeKflpcloacutenprecio
creorNvevoAtliculoOde~plegorDeKflpcoacutenlldesplegar EspecTecnlcO
Descripci6nd-Componenlre
t1 1 I I
I SenKlr I C6moro IIPonel de Control tcoroctSoftwcr~ bullI 11 11 11 1
0 O
middot1 011O
11OeKripci6noMoReting Fotografia E bullbullbullbullbullbull Vdeo DeKripdoacutenTknico
Ilaquogtiolt1oX1O dimensfoacuten horizontol dimensioacuten Itorizond dimenaioacuten horizonfiCH c1dO
estilo hraquon bullbull dimenUoacutenmcat dimensioacuten meal dimensioacuten vercal estilofuenM
lomo -e6fi1o blaquode - bullbullbullbull 10 boltde ~borde iltgtmoIIo -
oopociodo ~-~oudto espociotnto liMO
tramcJio tdo vIOIomoM Mldo imogen
cololt fondo bull cololt fondo
flONSIJOlos usuorios tienden otolerar el desplozo-miento vertical maacutesfaacutecilmente que eldesplozomienro hon-zonrol Evite losforrnom de paacuteginaoncho
vencional Un objeto de contenido tiene atributos que incluyen informacioacuten especi-fica de contenido (normalmente definida durante el modelado de anaacutelisis WebApp)y atributos especificas de implementacioacuten que se especifican como parte del disentildeo
Como ejemplo consideacuterese la clase de anaacutelisis que se desarrolloacute para el sistemade comercio electroacutenico HogarSeguro llamado ComponentedeProducto que se de-sarrolloacute en el capitulo 18y se representa como aparece en la figura 194 En el capi-tulo 18 se mencionoacute un atributo descripdoacuten que aqui se representa como una clasede disentildeo llamada DescripcioacutendeComponente compuesta de cinco objetos decontenido DescripcioacutenDeMarketing Fotografiacutea DescripdoacutenTeacutecnica Esque-ma y Video que se muestran como objetos sombreados en la figura La informacioacutenque contiene el objeto de contenido se registra como atributos Por ejemplo Foto-grafiacutea (una imagen jpg) tiene los atributosdimensioacuten horizontal dimensioacutenvertical y estilo de borde
Mediante una asociacioacuten UML y un agregado se pueden representar relacionesentre los objetos de contenido Por ejemplo la asociacioacuten UML que se muestra en lafigura 194 indica que se emplea una DescripcioacutendeComponente para cada ins-tancia de la clase ComponentedeProducto DescripcioacutendeComponente estaacuteintegrado por los cinco objetos de contenido mostrados Sin embargo la multiplici-dad de notacioacuten que se muestra indica que Esquema y video son opcionales (es po-sible que se presenten cero ocurrencias) se requieren una DescripcioacutenDeMarke-ting y DescripcioacutenTeacutecnica y se aplican una o maacutes instancias de Fotografia
1952 Cuestiones del disentildeo de contenido
Una vez modelados todos los objetos de contenido la informacioacuten que cada objetoentregaraacute debe crearse y luego formatearse para satisfacer mejor las necesidades delcliente La creacioacuten del contenido es el trabajo de los especialistas que disentildean el ob-jeto de contenido al proporcionar un esbozo de la informacioacuten que se entregaraacute yuna indicacioacuten de los tipos de los objetos de contenido geneacutericos (por ejemplo tex-to descriptivo imaacutegenes graacuteficas fotografias) mediante los cuales se entregaraacute la in-formacioacuten Tambieacuten se puede aplicar el disentildeo esteacutetico (seccioacuten 194)para represen-tar la apariencia y percepcioacuten adecuados para el contenido
Conforme se disentildean los objetos de contenido se despedazan [POWOOjparaformar paacuteginas de la WebApp El nuacutemero de objetos de contenido que se incorporanen una sola paacutegina es en funcioacuten de las necesidades del usuario de las restriccionesimpuestas por la rapidez de descarga de las conexiones de Internet y debido a lasrestricciones que impone la cantidad de desplazamiento que el usuario toleraraacute
El disentildeo arquitectoacutenico estaacute enlazado con las metas establecidas para la WebApp elcontenido que se presentaraacute los usuarios que la visitaraacuten y la filosofiacutea de navega-
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
cioacuten que se establezca El disentildeador arquitectoacutenico debe identificar la arquitecturade contenido y la arquitectura de la WebApp La arquiteclUra de contenidoo se cen-tra en la forma en la que los objetos de contenido (u objetos compuestos como laspaacuteginas Web) se estructura n para su presentacioacuten y navegacioacuten La arquitectura deWebApp aborda la forma en la que la aplicacioacuten se estructura para gestionar la inte-raccioacuten del usuario manejar las tareas de procesamiento internas efectuar la nave-gacioacuten y presentar el contenido
~~[lJa 8SllIJdUrUarquiledoacuteniaJ de un sitio bien disentildeado no siempre es aparente para el usuario bull ni lo debe ser gt )j n-sbullbullbullbulliexclEn la mayoriacutea de los casos el disentildeo arquitectoacutenico se dirige en paralelo con el
disentildeo de la interfaz el esteacutetico y el de contenido Puesto que la arquitectura Web-App puede tener una fuerte influencia sobre la navegacioacuten las decisiones tomadasdurante esta actividad de disentildeo influiraacuten en el trabajo dirigido durante el disentildeo denavegacioacuten
El disentildeo de la arquitectura de contenido se centra en la definicioacuten de la estructura hi-permedia global de la WebApp El disentildeo se puede elegir de cuatro diferentes estruc-turas de contenido [POWOC]
Las estructuras lineales (figura J 95) se encuentran cuando es comuacuten una secuen-cia predecible de interacciones (con alguna variacioacuten o desviacioacuten) Un ejemplo claacute-sico puede ser una presentacioacuten tutorial en la que las paacuteginas de informacioacuten juntocon graacuteficos relacionados videos cortos o audio se presentan soacutelo despueacutes de quese ha presentado informacioacuten de prerrequisilos La secuencia de la presentacioacuten decontenido estaacute predefinida y por lo general es lineal Otro ejemplo puede ser unasecuencia de entradas para comprar un producto en la cual se debe detallar infor-macioacuten especiacutefica en un orden especifico En tales casos son apropiadas las estruc-turas mostradas en la figura 195 Conforme el contenido y el procesamiento se vuel-ven maacutes complejos el flujo meramente lineal mostrado a la izquierda de la figura dapaso a estructuras lineales maacutes complejas en las que se puede llamar contenido al-ternativo u ocurre una desviacioacuten para adquirir contenido complementario (estruc-tura mostrada a la derecha de la figura 195)
Las estructuras en reticula (figura J 96) son una opcioacuten arquitectoacutenica aplicablecuando el contenido de la WebApp estaacute organizado categoacutericamente en dos (o maacutes)dimensiones Por ejemplo consideacuterese una situacioacuten en la cual un sitio de comercioelectroacutenico vende palos de golf La dimenSioacuten horizontal de la retiacutecula representa eltipo de palo que se vende (por ejemplo madera hierro wedges putters) La dimen-
10 El terrmno arqUItectura de mformaCloacuten tamben se utiliza para sugerir estructuras que conducen a
una mejor organizacIoacuten etIquetado navegaClon y busqueda de objetos de contenido
lineal conflujo
opcional
lineolcon
derivaciones
sioacuten vertical representa las ofertas de varios fabricantes de palos de golf En conse-cuencia un usuario puede navegar la reticula horizontalmente para encontrar la co-lumna putters y luego verticalmente para examinar las ofertas de aquellos fabricantesque venden putlers Esta arquitectura de WebApp soacutelo es uacutetil cuando se encuentracontenido altamente regular iexclPOWOO]
Las estructuras jeraacuterquicas (figura 197)son indudablemente las arquitecturas WebAppmaacutes comunes A diferencia de las Jerarquias de software factorizadas -que se estu-diaron en el capitulo J 0- que alinean el flujo de control soacutelo a lo largo de las ramsverticales de la jerarquia una estructura jeraacuterquica WebApp se puede disentildear en unaforma que permita (via ramificaciones de hipertexto) el flujo de control horizontal-mente a traveacutes de las ramas verticales de la estructura Por lo tanto el contenidopresentado en la rama de la extrema izqUierda de la jerarquiacutea puede ~ner VInculas
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Estructurajeraacuterquica
de hipertexto que conduzcan a contenido que existe en la rama de en medio o a ladereclla de la estructura Sin embargo se debe sentildealar que aunque tales ramifica-ciones permiten la navegacioacuten rapida a traveacutes del contenido de la WebApp puedenconducir aconfusioacuten en la parte del usuario
Una estltlCtura en red o Web pura (figura 198) es similar en muchos sentidos ala arquitectura que evoluciona para los sistemas orientados a objetos Los compo-nentes arquitectoacutenicos (en este caso paginas Web) estan disentildeados de modo quepueden pasar el control (via vinculas de hipertexto) virtualmente a cualquier otrocomponente en el sistema Este enfoque permite una considerable flexibilidad en lanavegacioacuten pero al mismo tiempo puede ser confusa para el usuario
Las estructuras arquitectoacutenicas comentadas en los parrafos precedentes se pue-de combinar para formar estructuras compuestas La arquitectura global de una Web-App puede ser jerarquica pero parte de la estructura puede mostrar caracteriacutesticaslineales mientras que otra parte puede estar en red La meta para el disentildeador ar-quitectoacutenico es emparejar la estructura WebApp con el contenido que se presentaray el procesamiento que se lIevaraa cabo
La arquitectura MVedesacopla la interrozdel usuario de lofuncionalidad NebAppy del contenido deinformacioacuten
1962 Arquitectura de WebApp
La arquitectura de WebApp describe una infraestructura que permite a un sistema oaplicacioacuten basados en Web lograr sus objetivos de negocios )acyntho y sus colegas[JAC021describen las caracteriacutesticas basicas de esta infraestructura en la forma si-guiente
Lasaplicacionesdebenconstruirseconel usodecapasen lasquese tomenen cuenta lasdiferentespreocupacionesenparticularlosdatosde la aplicacioacutensedebensepararde loscontenidosde la paacutegina (nadasde navegacioacuten)y dichoscontenidosa su vezdebenes-tar claramenteseparadosde la aparienciay la percepcioacutende ta interfaz (paacuteginas)
Los autores sugieren una arquitectura de disentildeo en tres capas que desacople lainterfaz de la navegacioacuten y del comportamiento de la aplicacioacuten y argumentan quemantener la separacioacuten de la interfaz aplicacioacuten y navegacioacuten simplifica la imple-mentacioacuten y mejora la reutilizacioacuten
La arquitectura de modelo-vista-controlador (MVC) IKRA881 es uno de varios mo-delos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario dela funcionalidad y el contenido de informacioacuten de la WebApp El modelo (a veces lla-mado objeto modelo) contiene todo el contenido especifico de la aplicacioacuten y la loacute-gica de procesamiento e incluye todos los objetos de contenido el acceso a fuentesde datosinformacioacuten externas y toda la funcionalidad de procesamiento que son es-pecificos de la aplicacioacuten La vista contiene todas las funciones especificas de la in-terfaz y habilita la presentacioacuten del contenido y la loacutegica de procesamiento e inclu-ye todos los objetos de contenido acceso a fuentes de datosinformacioacuten externasy a toda la funcionalidad de procesamiento requerida por el usuario final El contro-lador gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellosEn una webApp la vista la actualiza el controlador con datos provenientes del mo-delo con base en la entrada del usuario [WMT02] En la figura 199 se muestra unarepresentacioacuten esquemaacutetica de la arquitectura MVC
En referencia a la figura las solicitudes o datos del usuario se manejan medianteel controlador Eacuteste tambieacuten selecciona el objeto vista que es aplicable con base enla solicitud del usuario Una vez que se determina el tipo de solicitud se transmiteuna solicitud de comportamiento al modelo que implementa la funcionalidad o re-cupera el contenido requerido para acomodar la solicitud El objeto modelo puedetener acceso a datos almacenados en una base de datos corporativa como parte de
I1 SedebedestacarqueMVC esenrealidadunpatroacutendedisentildeoarquitectoacutenicodesarrolladoporelam-bIenteSmalltatk(veasehttpJwwwcetus-linksorgoo_smalltalkhtml)y sepuedeusarparacual-quier aplicacioacuten interactiva
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
_ La arquitectura MVC (adaptada de [JAC02])
ContlCiladorGestiona los solicitudbullbullbulldel usvoroSeleccionocomportamientode modeloSelecciono respuesto visto
Seleccioacuten de visto
II
I
III
I
I
II
comportamiento I
(cambio de estado) IIII
ModeloEncapsula IuncionolidodEncopsulo obiexcleIos de contenidoIncorporo Iodos los eslo~osde WebApp I
I
I
I
II
IIIII
I
I
Servioor bull___________________________ J
ViPrepora datos del modeloActualizo solicitudesdel modeloPresento visto seleccionadapor el controlador
un almaceacuten de datos local o como una coleccioacuten de archivos independientes Losdatos que desarrolla el modelo debe formatearlos y organizarlos el objeto vista ade-cuado y luego transmitirlo del servidor de la aplicacioacuten de vuelta al navegador basa-do en el cliente para que se despliegue en la maacutequina de eacuteste
En muchos casos la arquitectura de ebApp se define dentro del contexto delambiente de desarrollo en el que la aplicacioacuten habraacute de implementarse (por ejemploASPnet JWAA o )2EE) El lector interesado debe ver rFOW031para una exposicioacutenulterior acerca de los ambientes de desarrollo modernos y de su papel en el disentildeode las arquitecturas de aplicaciones Web
Una vez establecida la arquitectura de WebApp y la identificacioacuten de los componen-tes (paacuteginas guiones applets y otras funCiones de procesamiento) el disentildeador de-be definir las rutas de navegacioacuten que habiliten para los usuarios el acceso al conte-nido y las funciones de la WebApp Para lograr esto el disentildeador debe 1) identificarla semaacutentica de navegacioacuten para diferentes usuarios del sitio y 2) definir la mecaacuteni-ca (sintaXIS)que logra la navegacioacuten
Soacutelo espero Grelel hasta que lo luna se eleve entonces veremos los trozos de pon que he desparramado ellos nosmostroraacuten de nuevo el comino o coso - -
TOIIICIdo de HcmseI Y Grete
Uno USNdescribe losrequisitos deIovegocioacuten poro codocoso de uso Enesenltio lo USNmuestro coacutemo un actorse mueve entre loso~etos de contenido olos funoones de loWebApp
1971 semaacutentica de navegacioacutenAl igual que muchas actividades de ingenieria Web el disentildeo de navegaCioacuten comien-za con una consideracioacuten de la jerarquia de usuario y los casos de uso relacionados(capitulo 18) desarrollados para cada categoriacutea de usuario (actor) Cada actor puedeusar la WebApp de manera un poco diferente y por tanto tener diferentes requisitosde navegacioacuten Ademaacutes los casos de uso desarrollados para cada actor definiraacuten unconjunto de clases que abarcan uno o maacutes objetos de contenido o funciones de laWebApp Conforme cada usuario interactuacutea con la WebApp encuentra una serie deunidades semaacutenticas de navegacioacuten (USN) un conjunto de estructuras de informa-cioacuten y navegacioacuten relacionadas que colaboran en el cumplimiento de un subconjun-to de requisitos de usuario relacionados ICAC02]
Gnaho y Larcher IGNA99Jdescriben la USN en la forma siguiente
La estructura de una USN estaacute compuesta de un conjunto de subestructuras de navega-cioacuten que se lIamaraacutenfonnas de navegacioacuten (FdN) Una FdN representa la mejor forma oruta de navegacioacuten para los usuarios con ciertos perfiles para lograr su meta o submetadeseada En consecuencia el concepto de FdN estaacute asociado con el concepto de Perfil deUsuario
La estructura de una FdN estaacute Integrada con un conjunto de nadas de navegacion (NN)relevantes conectados por vinculas de navegacioacuten que en ocasiones incluyen otras FdN
Esto significa que las FdN pueden en si mismas ser agregadas dara formar una FdN denivel superior o pueden anidarse en cualquier profundidad
Para ilustrar el desarrollo de una FdN consideacuterese el caso de usd seleccionar camponentes HogarSeguro descrito en la seccioacuten 1812 y que se reproduce acontinuacioacuten
Entonces la webApp recomendaraacute componentes de producto (por ejemplo paneles decontrol sensores caacutemaras) y otras caracteristicas (por eJemplo funcionaJidad basada enpe implementada en software) para cada ~ y la entrada exterior Si el usuanosolicita opciones la webApp las proporcionaraacute si existen El usuario obtendraacute iJ1fQrmQcion descriptiva) de precIos para cada componente de producto La webApp creara ymostraraacute una factura de materiales conforme se seleccionen vanos componentes Elusuario tambieacuten podraacute nombrar la factura de materiales y guardarla para referenCia futura (veacutease caso de uso guardar configuracioacuten)
Los artiacuteculos subrayados en la descripcioacuten del caso de uso representan clases y oh-jetos de contenido que seraacuten incorporados en una o maacutes FdN que permitiraacuten a unnuevo cliente realizar el escenario descrito en el caso de uso seleccionar componen-tes HogarSeguro
La figura 1910 bosqueja un anaacutelisis semaacutentica parcial de la navegacioacuten que irl-plica el caso de uso seleccionar componentes HogarSeguro Con la aplicacioacuten de aterrninologia introducida anteriormente la figura tambieacuten representa una FdN paala WebApp HogarSegurolnccom Se muestran importantes problemas en las clasesde dominio Junto con objetos de contenido seleccionados (en este caJ el paquete
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
laquovinculo de navegacioacutenraquoregresar a Habitacioacuten laquoviacutenculo de navegacioacutenraquo
comprar ComponentedeProduclo
laquoviacutenculo de navegacioacutenraquocomprar ComponentedeProducto
de objeto~ de contenido llamado DescripcioacutenComp un atributo de la clase Com-pOllentedeProducto) Dichos articulas son nodos de navegacioacuten Cada una de lasflechas representa un vinculo de navegacioacuten y estaacute etiquetado con la accioacuten queinicia el uso que causa que el vinculo ocurra
El diiexclentildeador de la WebApp crea una unidad semaacutentica de navegacioacuten (USN) paracada c~so de uso asociado con cada papel de usuario [GNA991middot Por ejemplo uncliente nuevo (figura 181) puede tener tres diferentes casos de uso y todos resul-tan en acceso a diferente informacioacuten y funciones de la WebApp Para cada meta se
crea una USNDurante las etapas iniciales del disentildeo de navegacioacuten se valora la arquitectura de
contenido de [a WebApp para determinar una o maacutes FdN para cada caso de uso Co-mo se anotoacute anteriormente una FdN identifica los nodos de navegacioacuten (por ejem-plo contenido) y los vinculas que permiten la navegacioacuten entre ellos Entonces las
FdN se organizan en USN
g problema de la navegolioacuten en el sitio Web es conceptuol teacutemico espacial filosoacutefico y 1ogiacutes1iw las soludones tienden a pedir combinaciones de arte ciencia y psicologia orgonizadonaJ improvisadasy _
1972 Sintaxis de navegacioacutenConforme el disentildeo se lleva a cabo se define la mecaacutenica de navegacioacuten Entre mu-
chas posibles opciones estaacuten
bull Viacutenculo de navegacioacuten individual vinculos basados en texto iconos botones e
interruptores y metaacuteforas graacuteficas
~ONSEJO
En la mayaria de lassituaciones eliacuteiexclansemecanismos denavegacioacuten horizontalo vertical pero noambos
~ONSEJO
Elmapa de sino debeser accesible desdecada poacutegino Elmapaen si mismo debeestar organizado demodo que la estruc-tura de informacioacutende la WebApp seafaacutecilmente aparente
bull Barra de navegacioacuten horizontaI- lista de [as principales categorias de conte-nido o funcionales en una barra que contiene vinculos adecuados En generalse mencionan entre cuatro y siete categorias
bull Columna de navegacioacuten vertical 1) lista de las principales categorias de conte-nido o funcionales o 2) lista de virtualmente todos los principales objetos decontenido dentro de [a WebApp Si se elige la segunda opcioacuten tales columnasde navegacioacuten se pueden expandir para presentar objetos de contenido co-mo parte de una jerarquia
bull Pestantildeas una metaacutefora que no es maacutes que una variacioacuten de la barra o colum-na de navegacioacuten que representa las categorias de contenido o funcionalescomo marcas que se seleccionan cuando se requiere un vinculo
bull Mapas de sitio proporcionan una tabla de contenido incluyente para la nave-gacioacuten hacia todos [os objetos de contenido y funcionalidad contenidos en [aWebApp
Ademaacutes de elegir los mecanismos de navegacioacuten el disentildeador tambieacuten debe esta-blecer convenciones y auxiliares de navegacioacuten adecuados Por ejemplo iconos yvinculos graacuteficos que deben parecer oprimibles mediante el biselado de los bordespara que la imagen tenga una apariencia tridimensional Debe disentildear retroalimen-tacioacuten visual o de audio para ofrecer al usuario un indicador de que ha elegido unaopcioacuten de navegacioacuten En la navegacioacuten basada en texto debe usarse color para in-dicar los vinculos de navegacioacuten y proporcionar un indicador de los vinculas ya reco-rridos Eacutestas son soacutelo algunas de las docenas de convenciones de diseno que hacen lanavegacioacuten amigable al usuario
Las modernas aplicaciones Web entregan funciones de procesamiento cada vez maacuteselaboradas que 1) realizan procesamiento localizado para generar capacidad decontenido y navegacioacuten en una forma dinaacutemica 2) ofrecen capacidades de compu-tacioacuten o procesamiento de datos que son adecuadas para el dominio de negocios dela WebApp 3) proporcionan cuestionamientos y acceso sofisticados a bases de da-tos 4) establecen interfases de datos con sistemas corporativos externos Para lograrestas (y muchas otras) capacidades el ingeniero Web debe disentildear y construir com-ponentes de programa que sean ideacutenticos en forma a los componentes de softwarepara el software convencional
En el capitulo 11 se considera con cierto detalle el disentildeo al nivel de componen-tes Los meacutetodos de disentildeo estudiados en el capitulo I1 se aplican a los componentesWebApp con poca si acaso modificacioacuten El ambiente de implementacioacuten los len-guajes de programacioacuten y los patrones de reutiacutelizacioacuten marcos de trabajo y softwa-re pueden variar un poco pero el enfoque de disentildeo global permanece igual
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Los patrones de disentildeo aplicados en la ingenieriacutea Web abarcan dos grandes clases1) patrones de disentildeo geneacuterico que son aplicables a todos los tipos de software (porejemplo (BUS96] y IGAM95]) Y 2) patrones de disentildeo hipermedia que son especificosde las WebApp En el capiacutetulo 9 se trataron los patrones de disentildeo geneacuterico A tra-veacutes de Internet se puede tener acceso a variacuteos cataacutelogos y almacenes de patrones dehipermedia13
JllIIIOacuteIl es una regio de tres portes que expresa uno relacioacuten enlre cierto amtexto un JlfaOlema y uno soIudoacutenmiddot ~ middotmiddotTomiddot - CJsrIstoplMrAIeuncIIr
Como se apuntoacute antes en este libro los patrones de disentildeo son un enfoque geneacuteri-co para resolver alguacuten pequentildeo problema de disentildeo que se puede adaptar a una va-riedad mucho maacutes amplia de problemas especificos En el contexto de los sistemasbasados en Web German y Cowan [GEROO]sugieren las siguientes categoriacuteas de pa-trones
Patrones arquitectoacutenicos Estos patrones auxilian en el disentildeo del contenido y laarquitectura de la WebApp Las secciones J 96 J Y 1962 presentan patrones arqui-tectoacutenicos para el contenido y la arquitectura de la WebApp Ademaacutes estaacuten disponi-bles muchos patrones arquitectoacutenicos relacionados (por ejemplo Java Blueprints enjavasuncombluepriacutents) para los ingenieros Web que deben disentildear webApps enuna diversidad de dominios de negocios
Patrones de construccioacuten de componentes Estos patrones recomiendan meacuteto-dos para combinar componentes WebApp (por ejemplo objetos de contenido fun-ciones) en componentes compuestos Cuando se requiere la funcionalidad de proce-samiento de datos en una WebApp son aplicables los patrones de disentildeo arquitec-toacutenico y al nivel de componente que proponen [BUS96L IGAM95] y otros
Patrones de navegacioacuten Estos patrones auxilian en el disentildeo de USN viacutenculos denavegacioacuten y el flujo global de navegacioacuten de la WebApp
Patrones de presentacioacuten Estos patrones auxilian en la presentacioacuten del conte-nido como se presenta al usuario via la interfaz correspondiente Los patrones en es-ta categoria abordan como organizar las funciones de control de la interfaz del usua-rio para una mejor facilidad de uso coacutemo mostrar la relacioacuten entre una accioacuten de lainterfaz y los objetos de contenido que afecta coacutemo establecer jerarquias de conte-nido efectivas y muchas otras
Patrones de interaccioacuten comportamientousuario Estos patrones auxiacutelian enel disentildeo de la interaccioacuten usuario-maacutequina Los patrones en esta categoria abordan
~
coacutemo la interfaz informa al usuariacuteo de las consecuencias de una accioacuten especifica coacute-mo un usuario expande el contenido con base en el contexto de uso y sus deseoscoacutemo describir mejor el destino que implica un vinculo coacutemo informar al usuarioacerca del estado de una interaccioacuten en marcha y otros
Las fuentes de informacioacuten acerca de los patrones de disentildeo hipermedia se hanexpandido en forma sustancial en antildeos recientes Los lectores interesados debenconsultar [GAR97] [PER99]Y [GEROO]
Almacenes de patrones de disentildeo hipermedia
El sitio Web IAWiki (hltpiawikinetWebsitemiddot Mejora de los sistemas de infonnacioacuten WebPottems) es un espacio de discusioacuten coniunto con patrones de navegacioacuten
poro informocioacuten de los orquitectos y que contiene muchas hltpwww8orgw8middotpapers5bmiddothypertextmiddotmedioimpromiddotrecursos uacutetiles Entre ellos estaacuten viacutenculos a varios catoacutelogos vingimprovinghtmly oImocenes de potrones hipermedio uacutetiles Esteacuten represen Un patroacuten de lenguaje HTML20todas cientos de potrones de disentildeo hnp wwwcnamorphcomdocsponernsdefculthtml
Terreno comuacutenhltp wwwmitedu-itidwellinteroetion_ponernshtrnlPatrones para sitios Web personaleshltpwwwrdropcom-holflCrectionsWritingsWebponernsindexhtrnl iacutendice de lenguajes patroacuterihltpwwwcsbrownedu-rmslnformationStructuresIndexing Overview htrnl
Almaceacuten de patrones de disentildeo hipermediahltpwwwdesignponernluunisichInteractionPattems de Tom Ericksonhltp wwwpliantorgpersonolTom_EricksonlnterocmiddottionPanernshtrnlPatrones de disentildeo Web de Martijn vanWeliehltpwwwweliecomponerns
r~ 1
r 1910 MfTOPO m DISENtildeO WPERMEDIA ORIENTApO A OBJETOS (MDHOQ)
Durante las pasadas deacutecadas se propusieron varios meacutetodos de disentildeo para aplica-ciones Web A la fecha ninguacuten meacutetodo es el dominante En esta seccioacuten se presen-ta un breve panorama de uno de los meacutetodos de disentildeo WebApp maacutes ampliamenteanalizados MDHOO14
El meacutetodo de disentildeo hipemledia ortellado a objetos (MDHOO) lo propusieron ongi-nalmente Daniel Schwabe y sus colegas (SCH95SCH98] El MDHOO estaacute compuestode cuatro diferentes actividades de disentildeo disentildeo conceptual disentildeo de navegaCJol1disentildeo abstracto de la interfaz e implementacioacuten En la figura 19I I se muestra unresumen de estas actividades de disentildeo y en las secciones que siguen se discutenbrevemente
19101 Disentildeo conceptual por el MDHOO
El disentildeo conceptual mediante el MDHOO crea una representacioacuten de los subsistmiddot-mas clases y relaciones que definen el dominio de aplicacioacuten para la WebApp ~e
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
1
~ ~[i9 (J)
Disentildeo abstractoDisentildeo conceptual Disentildeo de navegacioacuten de lo interfoz Implementocioacuten
Nadas vinculos Obiexcletos abstractosestructuras de a interlaz WebApp
Productos de trabaja Clases subsistemos de acceso contextos respuestas o eventos ejecutoblerelaciones atributos de navegacioacuten externos
transformaciones transformacionesde navegacioacuten
Clasificacioacuten Coacute-reloci6n entre Recursocomposicioacuten Correlacioacuten entreobjetos de proporcionadoMecanismos de disentildeo agregacioacuten o~etos conceptuales
generalizacioacuten navegacioacuten por ambientey e navegaclon y perceptibles objetivaespecializacioacuten
Modelada de las
Mbdelado de la Toma en cuente objetas perceptibles ExactitudPreocupaciones de dislntildeo semoacutentica del el perfil del usuario implementacioacuten de las
desempentildeodominio y la tarea Resalta los metoacuteforas elegidas
de la 1clicacioacuterI Descripcioacuten de lade aplicacioacuten aspectos cOgnitivos interlaz para los integri ad
objetos de navegacioacuten
puede usar5 UML para crear diagramas de clase adecuados agregados y represen-
taciones de clase compuestas diagramas de colaboracioacuten y otra informacioacuten que
describe el dominio de la aplicacioacuten (veacutease la Parte 2 de este libro para maacutes detalles)
Como un ejemplo simple de disentildeo conceptual del MDHOO consideacuterese de nue-
vo la aplicacioacuten de comercio electroacutenico de HogarSegurolnccom En la figura 1912
se muestra un esquema conceptual parcial para HogarSegurolnccom Los diagra-
mas de clase agregados e informacioacuten relacionada desarrollados como parte del
anaacutelisis de la WebApp se reutilizan durante el disentildeo conceptual para representar re-
laciones entre clases
19102 Disentildeo de navegacioacuten mediante el MDHOO
El disentildeo de navegacioacuten identifica un conjunto de objetos que se derivan de las cla-
ses definidas en el disentildeo conceptual Se define una serie de clases de navegacioacuten
o nodos para encapsular dichos objetos Se puede usar UML para crear casos de
uso adecuados graacuteficos de estado y diagramas de secuencia todos ellos auxilian al
disentildeador a comprender mejor los requisitos de navegacioacuten Ademaacutes es posible
aplicar los patrones de disentildeo para el disentildeo de navegacioacuten conforme el disentildeo se
desarrolle El MDHOO utiliza un conjunto predefinido de clases de navegacioacuten no-
15 El MDHOO no prescribe una notacioacuten especifica sin embargo el uso de UML es comuacuten cuando se
aplica este meacutetodo
_ Esquema conceptual parcial para HogarSeguroInccom
ComponenledeProdUdo
porteNuacutemeroporteNombreponeTipodescripcioacutenpredo
creorNuevoArtiacuteculollo~pcioacuten(JobtenetEspec Teacutecnicc
FocturoDeMoterioles
ildentificodorUsloFdMNumeroAttiacuteculosprecioTolo1
hobitodOacuteflNombredimensionesexteriOfVenlanosexleriorfuerfos
Pedido
pedidoNuacutemerodiampnnfofocturltJOelloteriolesembotquelnfocobronzolnfo
contidodporteNuacutemeroporteNombreporleTipoprecio
ogregoroUSlo Iborrordeuumlsto( J
obtenerSiguienteEnlrodoUsto( I
dos vinculos anclas y estructuras de acceso (SCH98] Las estructuras de acceso son
maacutes elaboradas e incluyen mecanismos como un in dice de la WebApp un mapa desitio o un paseo guiado
Una vez definidas las clases de navegacioacuten el MDHOO estructura el espacio de
navegacioacuten mediante el agrupamiento de los objetos de navegacioacuten en conjuntos
llamados contextos (SCH98) Schwabe describe un contexto en los teacuterminos siguien-tes
Cada definicioacuten de contexto incluye ademas de los elementos que estan incluidos en eacutella especificacioacuten de su estructura de navegacioacuten interna un punto de entrada restriccio-nes de acceso en teacuterminos de clases de usuario y operaciones y una estructura de acce-so asociada
Se desarrolla una plantilla de contexto (analoga a las tarjetas CRC estudiadas en el ca-pitulo 8) y se emplea para rastrear los requisitos de navegacioacuten de cada categoria de usua-rio a traveacutes de varios contextos definidos en el MDHOO Al hacer esto surgen rutasespecificas de navegacioacuten (que se llamaron FdN en la seccioacuten 1971)
19103 Disentildeo abstracto de la interfaz e implementacioacuten
La actividad de disentildeo abstracto de la interJaz especifica los objetos de la interfaz que
el usuario ve conforme interactuacutea con la WebApp Un modelo formal de objetos de
la interfaz llamado visioacuten abstracta de datos (VAD) se utiliza para representar la re-
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
lacioacuten entre objetos de la interfaz y objetos de navegacioacuten y las caracteristicas decomportamiento de los objetos de la interfaz
El modelo VAD define una plantilla estaacutetica [SCH98] que representa la metaacuteforade la interfaz e incluye una representacioacuten de los objetos de navegacioacuten dentro dela interfaz y la especificacioacuten de los objetos de la interfaz (por ejemplo menuacutes bo-tones iconos) que auxilian en la navegacioacuten y la interaccioacuten Ademaacutes el modeloVAD contiene un componente relacionado con el comportamiento (similar al diagra-ma de estado UML) que indica coacutemo los eventos externos disparan la navegacioacuten yqueacute transformaciones de la interfaz ocurren cuando el usuario interactuacutea con la apli-cacioacuten [SCHOJ] Una exposicioacuten detallada del VAD el lector interesado puede hallar-la en [SCH98] y ISCHO1]
La actividad implementacioacuten del MDHOO representa una interaccioacuten de disentildeoque es especifica al ambiente en el que operaraacute la WebApp Las clases la navega-cioacuten y la interfaz son caracterizadas en una forma que puede construirse para el am-biente clienteservidor sistemas operativos software de soporte lenguajes de pro-gramacioacuten y otras caracteristicas del entorno relevantes respecto del problema
Las meacutetricas de disentildeo se deben caracterizar en una forma que proporcione a los in-genieros Web un Indicador de calidad en tiempo real En esencia un conjunto uacutetil demedidas y meacutetricas ofrece respuestas cuantitativas a las siguientes preguntas
bull iquestLa interfaz del usuario promueve la facilidad de uso
bull iquestLaesteacutetica de la WebApp es apropiada para el dominio de la aplicacioacuten yconfortable para el usuario
bull iquestEl contenido estaacute disentildeado en una forma que proporciona la mayor informa-cioacuten con el menor esfuerzo
bull iquestLa navegacioacuten es eficiente y directa
bull iquestLa arquitectura de la WebApp se ha disentildeado para acomodar las metas y ob-jetivos especiales de los usuarios de la webApp la estructura de contenido yfuncionalidad y el flujo de navegacioacuten requerido para usar el sistema de ma-nera efectiva
bull iquestLos componentes estaacuten disentildeados en una forma que reduce la complejidadde procedimientos y aumenta la exactitud la confiabilidad y el desempentildeo
En la actualidad cada una de estas preguntas se puede abordar de manera cualita-tiva0 pero todavia no existe un conjunto validado de meacutetricas que ofrezcan res-puestas cuantitativas
16 Vease el capItulo 16 (seCCIoacuten 164) Y la secClon J 9 11 para una exposicJon cualitatIva de la calidad
de una WebApp
Las meacutetricas para el disentildeo de WebApps estaacuten en desarrollo y pocas se han vali-dado ampliamente El lector interesado deberiacutea consultar [IVOOI] y [MENOI] parauna muestra de las meacutetricas propuestas para el disentildeo de WebApps
~ Meacutetricas teacutecnicas para WebApps
~ Objetivo Apoyar o los ingenieros Web en eldesarrollo de melTicos WebApp significativos
que ofrezcan uno visioacuten acerco de lo calidad globol deuno aplicacioacuten
Mecaacutenica Las herramientas mecaacutenicas variacutean
Herramientas representativas 17
Netmechonic Toas desarrollado por Netmechonic (wwwnetmechaniccomL es uno coleccioacuten de herramientas
que ayudo n o mejoror el desempentildeo de un sitio Webse enfoca sobre los temas especiacuteficos de lo implemento-doacuten
NST Web Metric Tetbed desarrollado por The NotionolInstitute of Stondords ond Technology (zingncslnistgov Web Toels) aborca lo siguiente coleccioacuten de herramientas uacutetiles que estoacuten disponibles poro descargar-los
Web Static Anayzer Tool (WebSAT) verifico el HTMl delo paacutegina web conlTa los lineomientos de facilidad deuso tiacutepicos
Web Category Anayi Tool (WebCAT) permite 01 ingemiddotniero de facilidad de uso construir y dirigir un anoacutelisisde categoria Web
Web Variable Instrumenter Program (WebVP) instrumen-to un sitio Web poro capturar un registro de interacmiddotdoacuten de usuario
Framework lor Logging Usabiliry Doto (FLUO)implemento un formateodor y analizador gramatical de archivosporo representar los registros de interaccioacuten de usuo-rio
VisVIP Tool produce una visualizacioacuten tridimensionol delas rutas de navegacioacuten del usuario o traveacutes de un sitio
Web TreeDec agrego auxiliares de navegacioacuten e las paacuteginas
de un sitio Web
----RESYMEN
La calidad de una WebApp -derJnida en teacuterminos de facilidad de uso funcionalidadconfiabilidad efiCiencia facilidad de mantenimiento seguridad escalabilidad y tiem-po en el mercado- se introduce durante el disentildeo Para lograr dichos atributos decalidad un buen disentildeo WebApp debe posser simplicidad consistencia identidad ro-bustez navegabilidad y aparienCia visual
El disentildeo de la interfaz describe la estructura y organizacioacuten de la interfaz delusuario Incluye una representacioacuten de la plantilla de pantalla una definicioacuten de losmodos de interaccioacuten y una descripcioacuten de los mecanismos de navegacion
El disentildeo esteacutetico tambien llamado disentildeo graacutefico describe la apariencia y lapercepcioacuten de la WebApp e Incluye esquemas de color plantilla geomeacutetrica tama-ntildeo de texto fuente y ubicaCioacuten el uso de graacuteficos y decisiones esteacuteticas relaciona-das Un conjunto de lineamientos de disentildeo graacutefico proporciona la base para un en-foque de disentildeo
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
El disentildeo de contenido define la plantilla la estructura y el subrayado de todo elcontenido que se presenta como parte de la WebApp ademaacutes establece las relacio-nes entre objetos de contenido El disentildeo de contenido comienza con la representa-cioacuten ae los objetos de contenido sus asociaciones y relaciones Un conjunto de con-sideraciones elementales establece las bases para el disentildeo de navegacioacuten
El disentildeo de arquitectura identifica la estructura hipermedia global para la Web-App y abarca tanto la arquitectura de contenido como la de WebApp Los estilos ar-quitectoacutenicos para el contenido incluyen estructuras lineal en reticula jeraacuterquica yen red La arquitectura de la WebApp describe una infraestructura que permite a unsistema o aplicacioacuten basado en Web lograr sus objetivos de negocios
El disentildeo de navegacioacuten representa el flujo de navegacioacuten entre los objetos decontenido y para todas las fUllciones de la WebApp La navegacioacuten se define al des-cribir un conjunto de unidades semaacutenticas de navegacioacuten Cada unidad estaacute com-puesta de formas de navegacioacuten y de vinculas y nadas de navegacioacuten Los mecanis-mos de sintaxis de navegacioacuten se aplican para afectar la navegacioacuten descrita comoparte de la semaacutentica
El disentildeo de componentes desarrolla la loacutegica de procesamiento detallada que serequiere para implementar los componentes funcionales de la WebApp Las teacutecnicasde disentildeo descritas en el capitulo I l se aplican a la ingenieria de componentes Web-App iexcl
Los patrones para el disentildeo de WebApps abarcan patrones de disentildeo geneacutericoque se aplican a todos los tipos de software y patrones hipermedia especialmente re-levantes para las WebApp Se han propuesto patrones de disentildeo arquitectoacutenico denavegacioacuten de componentes de presentacioacuten y de comportamientousuario
El meacutetodo de disentildeo hipermedia orientado a objetos (MDHOO) es uno de variosmeacutetodos propuestos para el disentildeo WebApp El MDHOO sugiere un proceso de dise-ntildeo que incluye disentildeo conceptual disentildeo de navegacioacuten disentildeo abstracto de la in-terfaz e implementacioacuten
Las meacutetricas de disentildeo para ingenieriacutea Web estaacuten en desarrollo y todavia tienenque validarse por completo Sin embargo se han propuesto varias medidas y meacutetri-cas para abordar cada una de las actividades de diacutesentildeo reanalizadas en este capitulo
IFIT54J Filts P The Informalion CapaClty of the Human Molor System in Controlling the Am-plilude 01 Movemenl en iexcloumal oExpenmental Psychology vol 47 1954 pp 381-391
IFOW031 Fowler M et al Pattems o Encerpnse Applicalion Archlleeture AddisonmiddotWesley 2003[GAL021 Galitz w The Essenlial CUide lo User Interface Deslgn Wiacuteley 2002[GAM95j Gamma E el al Design Patterns Addiacuteson-Wesley 1995[GAR97J Garndo A G Rossi y D Schwabe Pattems Systems for Hypermedia 1997 se puede
descargar de wwwinfpuc-nobr-schwabepapersPloP97pdfIGEROOjGerman Dy D Cowan Toward a Unified Calalog of Hypermediacutea Design Patterns
Prac 33rd Hawau Int Con on Syslem Sciences IEEE vol 6 Mauiacute Hawaii junio de 2000 sepuede descargar de www turingmachiacuteneorgl -dmgresearchpapersdmg_hicss2000pdf
[GNA99] Gnaho C y F Larcher A User-Centered Methodology for Complex and CustomizableWeb Engineering Proc ISIICSE Workshop on Web Engmeenng ACM Los Aacutengeles mayo de1999
IHEI02] Heinicke E Layout Fasl Solulions lor Hands-On Design Rockport Publishers 2002[IVOO1] IVOry M R Sinha y ~l Hearst Empiriacutecally Validaled Web Page Desiacutegn Metrics ACM
SIGCHI 01 Seattle WA abril de 2001 disponible en htlpllwwwrashmisinhacomarticleslWebTangoCHIO Ihtml
UAC02j Jacynlho D D Schwabe y G Rossiacute An Architecture for Structuring Complex Web Ap-pliacutecations 2002 disponible en httpwww2002orgCDROMalternate478
lKAI021 Kaiser J Elemenls 01EITectiveWeb Design About Ine 2002 disponible en httpwebdesignaboutcomlibraryweeklyaa091998hlm
IKAL031 Kalman S Weh Secun)l Field CUide Cisco Press 2003[KOC991 Koch N A Comparatiacuteve Sludy of Melhods for Hypermedia Development Technical
Report 9905 Ludwig-Maximilians Universilat Munich Alemania 1999 se puede descargarde httpwwwdslCupves-west200 1IlwwoslO 1lfilescontributiacuteonsNoraKochhyp_devpdf
[KKA88j Krasner G y S Pope A Cookbook for Using the Model-Viacuteew Conlroller User Interfa-ce Paradigm in Smalllalk-80 iexcloumal ofObiexclect-Orienced Programming vol 1 nuacutem 3 agos-to-septiembre de 1988 pp26-49
ILOW981 Lowe D y W Hall (eds) Hypenel and he Web-An Engmeering Approach John Wileyamp Sons 1998
IMCCO1] McClure S J Scambray y G Kurtz Hackmg Exposed McGraw-HiacuteIlOsborne 2001[MENOI j Mendes E N Mosley y S Counsell Eslimating Design and Authoriacuteng Efforl en IEEE
MullimedlO enero-marzo de 2001 pp 50-57[MILOOI Miller EThe Websiacutele Quality Challenge Software Research Ine 2000 httpwww
softcomevalidTechnologywhtepaperswebsitequalitychallengehtmlINIE96j Nlelsen Jy A Wagner User Interface Design for the WWW ProcCHImiddot96 Con On Hu-
man FaclOrs in Compuling Syslems ACM Press 1996 pp 330-331[NIEOO] Nielsen J Designing Web Usability New Riders Publishing 2000INOR02j Northcutt S y j Novak Network Intrusion Deleclion New Riders Publishing 2002[Off 021 Offutl ) Quality Attnbutes of Web Software Applications en IEEE Sojware marzo-
abnl de 2002 pp 25-32IQLS98j Olsina L Building a Web-Based Information System Applying the Hypermedia Flexi-
ble Process Modeling Strategy Proc ISllnt Workshop on Hypermedia Development 1998[0L599j Olslna L el al SpeClfying Qualily Characteristiacutecs and Altributes for Web Siles Proc
IsIICSE Workshop on Web Engineering ACM Los Aacutengeles mayo de 1999[PER99j Perzel K y D Kane Usability Pattems for Applications on the World Wide Web 1999
se puede descargar de httpjerrycsuiucedu -plopplop99proceedingsKaneperzelkanepdf -
[POWOOIPowelJ T Web Design MCGraw-HilJOsborne 2000[KASOO]Raskin j The Humane Interface Addison-Wesley 2000[RH098l Rho y y T Gedeon Surface Slruclures in Browsing the Web Proc Australasian Com-
puter Human Interaclion COnJerenceIEEE diciembre de 1998[SCH95] Schwabe D y G Rossi The Object-Oriented Hypermedia Design Model en G4CM vol
38 num 8 agosto de 1995 PP45-46
[AME96j Amento B et al Fits Law CS 5724 Models and Theories o Human-Compuler Inte-raclions Virginia Tech 1996 disponible en httpeLcsvtedu-cs5724gl
[BAGOI] Baggerman L y S Bowman Web Design That Works Rockport Publishers 2001[BUS96j Buschmann F et al Pattem-Orienled Sojlvvare ArchileclUre Wiley 1996ICAC02] Cachero C et al Conceptual Navigation Analysis a Device and Platform Independent
Navigation Specificalion Proc 2nd Int Workshop on Web-Oriented Techngy junio de2002 se puede descargar de wwwdsicupves-westiwwost02paperscacheropdf
[CLOO11Cloninger C Fresh Stylesfor Web Designers New Riders Publishing 2001[DIX99J Dix A Desiacutegn of User Interfaces for the Web Proc OfUser Interfaces lODala ~Iems Con-
ference septiembre de 1999 se puede descargar de httpwwwcomplancsacukcomputingusersl dixatopicswebarch
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
iexclSCH98] Schwabe D y G Rossi Developing Hypermedia Applications Using OOHDM ProcWorkshop on Hypermedja Developmenl Process Methods and Models Hypercext 98 1998 sepuede descargar de httpciteseern)neccomschwabe98deveJopinghtmi
rSCHOJ] Schwabe D G Rossi y S Barbosa Systematic Hypermedia Application Design usingOOHDM 2001 disponible en httpwww-diinfpuc-riobr-schwabeHT96WWWsection Jhtmi
[TILOO]Tillman H N Evaluating Quality On the Net Babson College 30 de mayo de 2000 dis-ponible en httpwwwhopetillmancomfindquaihtml2
iexclTOGO1] Tognozzi B First PrincipJes askTOG 2001 disponible en httpwwwasktogcombasicsfirstPrinciples html
[WMT02] Web Mapping Testbed Tutorial 2002 disponible en httpwwwwebmappingorgvcgdocumentsvcgTutoriall
IZHA02] Zhao H Fitts Law Modeling Movement Time in HCI Theories in Computer Humanlnleraction University of Maryland octubre de 2002 disponible en httpwwwcsumdeduc1assfal12002 cmsc838stichifitts htm J
191 iquestPor queacute el ideal artistico es una filosofia de disentildeo insuficiente cuando se construyenlas webApps modernas iquestExiste un caso en el que el ideal artistico sea la filosofia que debe se-guirse
192 En este capitulo se analizoacute una amplia variedad de atributos de calidad para las Web-Apps Elijanse las tres que se considere como las maacutes importantes y elaboacuterese un argumentoque explique por queacute cada uno debe resaltarse en el trabajo de disentildeo de Ingeniena Web
193 Agreacuteguense al menos cinco preguntas adicionales a la Lista de verificacioacuten de la calidaddel disentildeo de la WebApp presentada en una barra lateral en la seccion 1911
194 Revisar los principIOS de disentildeo de la interfaz de Tognozzi tratados en la seccioacuten 1931Considerar cada principio para una WebApp operativa con la cual se esteacute familiarizado Califi-car la webApp (uacutesense calificaciones A 5 C D o F) en relacioacuten con el grado en el cual ha lo-grado el principio Explicar la razoacuten para cada calificacioacuten
195 Disentildear una interfaz prototipo para la webApp de HogarSegurOlnccom Inteacutentese ser in-novador pero al mismo tiempo se debe asegurar que la interfaz se ajusta a los pnncipios parael buen disentildeo de la interfaz
196 iquestSehan encontrado mecanismos de control de la interfaz que sean diferentes a los ano-tados en la Seccioacuten 1932 Si es asi describanse brevemente
197 El lector es el disentildeador webApp para una compantildeia de ensentildeanza a farga distancia Suintencioacuten es implementar un motor de aprendizaje basado en Internet que le permitiraacute entre-gar contenido del curso a los estudiantes El motor de aprendizaje ofrece la infraestructura baacute-sica para entregar contenido de aprendizaje de cualquier materia (disentildeadores de contenidoprepararaacuten el contenido adecuado) Desarroacutellese un disentildeo de interfaz prototipo para el motorde aprendizaJe
198 iquestCuaacutel es el sitio Web esteacuteticamente maacutes agradable que el lector haya ha viSitado y por queacute
199 Considerar el obJeto de contenido pedido generado una vez que un usuario de Hogar-SeguroJnccom ha completado la seleccioacuten de todos los componentes y estaacute listo para finalizarsu compra Desarrollar una descripcioacuten UML de pedido iexclunto con todas las representaciones dedisentildeo apropiadas
1910 ltCuaacutel es la diferenCia entre arquitectura de contenido y arquitectura de webApp
J 911 Reconsldeacuterese el motor de aprendizaJe descrito en el problema 197 selecclonese unaarquitectura de conteJ1ldo que seria apropiada para la WebApp Ccomentese por queacute se hiZO di-cha eleCCioacuten
1912 Con UML desarroacutellense tres o cuatro representaciones de disentildeo para objetos de con-tenido que podrian encontrarse conforme se disentildea el motor de aprendizaje descrito en el pro-blema 197
1913 Hacer un poco de investigacioacuten adicional acerca de la arquitectura MVC y decidir si se-ria una arquitectura WebApp apropiada para el motor de aprendizaje mencionado en el pro-blema 197
1914 iquestCuaacutel es Ja diferencia entre sintaxis de navegacioacuten y semaacutentica de navegacioacuten
1915 Definir dos o tres USN para la webApp de HogarSegurolnccom Describir cada una concierto detalle
1916 Hacer alguna investigacioacuten y presentar a su clase dos o tres patrones de disentildeo hiper-media completos
Aunque se han escrito cientos de libros acerca del disentildeo Web muy pocos abordan algunosmeacutetodos teacutecnicos significativos para realizar el trabajo de disentildeo Cuando mucho se presentanvarios Iineamlentos uacutetiles para el disentildeo de la WebApp ejemplos valiosos de paacuteginas Web y semuestra programacioacuten java y se analizan los detalles teacutecnicos importantes para implementarwebApps modernas Entre los muchos que se ofrecen en esta categoriacutea vale la pena conSide-rar la discusioacuten enCiclopeacutedica de Powell [POWOOiexclAdemaacutes los libros de Galitz [GAL02J Helnlc-ke IHEI02J Schmitt IDesiexclgning CSS Web Pages New Riders Publishing 2002) Donnelly IDesig-ning Easy-to-use Websaes Addison-wesley 2001) y Nielsen INIEOOJproporcionan una guia uacutetil
La viSioacuten agil del disentildeo (y otros toacutepicos) para webApps la presentan Wallace y sus colegas(Extreme ProgrammingJor Web Proiexclecrs Addison-Wesley 2003) Con~len (Buildmg WebApplica-lJons wah UML segunda edicioacuten Addison-Wesley 2002) y Rosenberg y Scott (Applymg Use-Ca-se Dnven Obiexclect Modeling with UML Addison-Wesley 2001 I presentan ejemplos detallados deWebApps modeladas con la aplicaeioacuten de UML
Van Duyne v sus colegas (The Design ojSiiexcles Paltems Principies and Processes Addison-Wes-ley 2002) escribieron un libro excelente que cubre los aspectos mas importantes del proceso dedisentildeo en la ingeniena Web Se cubren en detalle los modelos de iexclhoceso de disentildeo y los patro-nes de disentildeo Wodtke 1IomlOtion Archirecture New Riders Publishing 2003) Rosenfeld y Mor-ville (n(nrmallon ATChl1ectureorthe World Wide Web OReilly amp Associates 2002) y Reiss (Prac-lcal In(omlOlJOn ArcJiexclirecturc Addison-Wesley 2000) abordan la arquitectura de contenido yotros tOpICOS
Las teacutecnicas de disentildeo tambieacuten se menCionan en libros eSCrItos acerca de ambientes de de-sarrollo especiacuteficos Los lectores interesados deben examina libros acerca de iexcl2EE iexclava ASPNETCSS XML Per y una diverSidad de aplicaciones de creacioacuten de WebApps IDreamweaver Home-Page Frontpage GoUve MacroMedia Flash etc) para comentarios de disentildeo uacutetiles
En Internet estaacute disponible una gran variedad de fuentes de informacioacuten acerca de disentildeopara ingenieria Web Una 1Istaactualizada de referencias en la World Wide Web se encuentra enel sitio Web de SEPAhttpwwwmhhecompressman
Top Related