chapter 19 - modelado de diseño para aplicaciones web -

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

~





















































































dOOIOacute



















ra el usuario

~ON5EJO











































































~














Jefery V_







t1 1 I I


0 O

middot1 011O
























lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN



































































bull

~





















































































dOOIOacute



















ra el usuario

~ON5EJO











































































~














Jefery V_







t1 1 I I


0 O

middot1 011O
























lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN



























































































































dOOIOacute



















ra el usuario

~ON5EJO











































































~














Jefery V_







t1 1 I I


0 O

middot1 011O
























lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN






























































































































~














Jefery V_







t1 1 I I


0 O

middot1 011O
























lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN








































































Jefery V_







t1 1 I I


0 O

middot1 011O
























lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN











































































lineal conflujo

opcional

lineolcon

derivaciones


















II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN


















































































II

I

III

I

I

II

comportamiento I



I

I

I

II

IIIII

I

I

Servioor bull___________________________ J






























~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN
















































































~ONSEJO


~ONSEJO

















~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN











































































~








r~ 1






1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN



































































1

~ ~[i9 (J)







Modelada de las

























ComponenledeProdUdo



FocturoDeMoterioles



Pedido




























de una WebApp
















de un sitio Web

----RESYMEN















































































de una WebApp
















de un sitio Web

----RESYMEN



































































chapter 19 - modelado de diseño para aplicaciones web -

Documents