La naturaleza de inmediatez de las aplicaciones basadas en Web unida a la presin de evolucionar continuamente obliga a que un ingeniero establezca un diseo

que resuelva el problema comercial inmediato, mientras que al mismo tiempo obliga a definif una arquitectura de aplicacin que tenga la habilidad de evolucionar rpidamente con el tiempo. El problema, desde luego, es que resolver (rpidamente) el problema inmediato puede dar como resultado compromisos que afectan a la habilidad que tiene la aplicacin de evolucionar con el paso del tiempo. Con objeto de realizar un diseo eficaz basado en Web, el ingeniero deber trabajar reutilizando cuatro elementos tcnicos. Principios y mtodos de diseo. Es importante destacar que los conceptos y principios del diseo estudiados en el Captulo 13 se aplican a todas las WebApps. La modularidad eficaz (exhibida con una cohesin alta y con un acoplamiento bajo), la elaboracin paso a paso, y cualquier otra heurstica de diseo del software conducir a sistemas y aplicaciones basados en Web ms fciles de adaptar, mejorar, probar y utilizar. Configuraciones de diseo. Como se ha destacado anteriormente en este libro, las configuraciones de diseo son un enfoque genrico para resolver pequeos problemas que se pueden adaptar a una variedad ms amplia de problemas especficos. Plantillas. Las plantillas se pueden utilizar para proporcionar un marco de trabajo esquemtico de cualquier configuracin de diseo o documento a utilizar dentro de una WebApp. 5.1 PIRAMIDE DEL DISEO INGENIERIA WEB El diseo conduce a un modelo que contiene la mezcla adecuada de esttica,contenido y tecnologa. La mezcla variar dependiendo de la naturaleza de laWebApp, y, como consecuencia, las actividades de diseo tambin variarn.

4.14 Diseo de la interfaz de la WebApp

5.3 Toda interfaz de usuario debe presentar las siguientes caractersticas: fcil deusar, fcil de aprender, fcil de navegar, intuitiva, consistente, eficiente, libre deerrores y funcional. Debe ofrecer al usuario final una experiencia satisfactoria ygratificante. Los conceptos, principios y mtodos de diseo de la interfaz brindan alingeniero web las herramientas requeridas para lograr esta lista de atributos. (PRESSMAN, 2005) 4.14.1 Principios y directrices del diseo de interfaz Bruce Tognozzi [TOG01] define un conjunto de caractersticas fundamentalesque deben presentar todas las interfaces y, al hacerlo, establece una filosofa quedebe seguir todo diseador de interfaz de WebApp:Las interfaces efectivas son visualmente aparentes e indulgentes, e implantanen sus usuarios una sensacin de control. Las interfaces efectivas no preocupan alusuario con los trabajos internos de la computadora. El trabajo se guarda de maneracuidadosa y continua, con la opcin total de que el usuario deshaga cualquieractividad en cualquier tiempo. Las aplicaciones y servicios efectivos realizan unmximo de trabajo mientras demandan un mnimo de informacin a los usuarios. 4.14.2 Mecanismos de control de la interfaz Los objetivos de la interfaz de una WebApp son 1) establecer una ventanaconsistente con el contenido y la funcionalidad que proporciona, 2) guiar al usuario atravs de una serie de interacciones con la WebApp, y 3) organizar las opciones denavegacin y el contenido disponible para el usuario. Las opciones de navegacinlas implementa el diseador seleccionando de entre varios mecanismos deinteraccin:

Mens de navegacin: mens clave que mencionen contenido o funcionalidad clave. Iconos grficos: botn, interruptores e imgenes grficas similares quepermitan al usuario seleccionar alguna propiedad o especificar una decisin.Imgenes grficas: alguna representacin grfica que el usuario puedaseleccionar y que implemente un vnculo hacia un objeto de contenido ofuncionalidad de la WebApp. 4.14.3 Flujo de trabajo en el diseo de la interfaz Una vez que se han identificado las tareas del usuario, se crean y analizan susescenarios (casos de uso) para definir un conjunto de objetos y acciones de interfaz.Las siguientes tareas representan un flujo de trabajo rudimentario para el diseo dela interfaz WebApp.1. Revisar la informacin contenida en el modelo de anlisis y refinarlaconforme se requiera.2. Desarrollar un bosquejo aproximado de la plantilla de la interfazWebApp.3. Correlacionar los objetivos el usuario con acciones especficas de lainterfaz.4. Definir un conjunto de tareas de usuario que

estn asociadas con cadaaccin.5. Elaborar bosquejos con imgenes de la pantalla para cada accin de lainterfaz.6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradasdesde el diseo esttico. Identificar los objetivos de la interfaz de usuario que se requiera paraimplementarlo.8. Desarrollar una representacin de procedimiento de la interaccin delusuario con la interfaz.9. Desarrollar una representacin del comportamiento de la interfaz.10. Describir la plantilla de la interfaz para cada estado.11. Refinar y revisar el modelo de diseo de la interfaz.

Diseo esttico
Es llamado tambin diseo grafico, es un esfuerzo artstico que complementa los aspectos tcnicos de la ingeniera web. El diseo grafico considera cada aspecto de la presentacin y percepcin de una WebApp. El proceso de diseo grafico comienza con la plantilla y procede hacia la consideracin de esquemas de color globales, tipos de fuentes, tamaos y estilos, el uso de medios audiovisuales complementarios y todos los dems elementos estticos de una aplicacin.

Diseo del contenido

Desarrolla una representacin de diseo para los objetos de contenido y representa los mecanismos que se requieren para que establezcan sus relaciones uno con otro. Adems, el diseo de contenido se ocupa de la representacin de la informacin dentro de un objeto de contenido especfico. Una vez modelados todos los objetos de contenido, la informacin que cada objeto entregar debe crearse y luego formatearse para satisfacer mejor las necesidades del cliente.

Diseo arquitectnico
Est enlazado con las metas establecidas para la WebApp, el contenido que se presentar, los usuarios que la visitarn y la filosofa de navegacin que se establezca. El diseo de la arquitectura de contenido se centra en la definicin de la estructura hipermedia global de la WebApp. El diseo se puede elegir de cuatro diferentes estructuras de contenido. Estructuras lineales. Estructuras en retcula. Estructuras jerrquicas. Estructuras en red o Web pura. La arquitectura de WebApp describe una infraestructura que permite a un sistema o aplicaciones basadas en web lograr sus objetivos de negocios.

Diseo de navegacin

Una vez establecida la arquitectura de WebApp y la identificacin de los componentes, el diseador debe definir las rutas de navegacin que habiliten para los usuarios el acceso al contenido y las funciones de la WebApp. Para lograr esto el diseador debe 1) identificar la semntica de navegacin para diferentes usuarios del sitio y 2) definir la mecnica que logra la navegacin. IT. CD. VALLES RESIDENCIA PROFESIONAL 41

El diseo de navegacin comienza con una consideracin de la jerarqua de usuario y los casos de uso desarrollados para cada categora de usuario (actor). Cada actor puede usar la WebApp de manera un poco diferente y, por tanto tener diferentes requisitos de navegacin. Conforme el diseo se lleva acabo se define la mecnica de navegacin. Entre muchas posibles soluciones estn: Vinculo de navegacin individual. Barra de navegacin horizontal. Columna de navegacin vertical. Pestaas.
Mapas de sitio.

5.8 METRICAS DE DISEO PARA WEBAPPS Proporciona a los ingenieros web un indicador de calidad en tiempo real conjunto de medidas que ofrezcan repuestas a diferentes inquietudes con relacin a interfaces de usuarios ayudan a la facilidad de uso. La esttica utilizada es la apropiada. Conjunto de medidas que ofrezcan repuestas a diferentes inquietudes con relacin a: *interfaces de usuario ayuda a la facilidad de uso *la esttica utilizada es la apropiada * navegacin es suficiente y directa