UNIVERSIDAD NACIONAL DE SAN AGUSTÍN DE AREQUIPAFACULTAD DE INGENIERÍA DE PRODUCCIÓN Y SERVICIOSSEGUNDA ESPECIALIDAD EN INGENIERÍA INFORMÁTICA

CURSO: DISEÑO DE APLICACIONES WEB

TEMA: “MODELADO DE DISEÑO PARA APLICACIONES WEB”

ING. JOSE HERRERA

INTEGRANTES: YRMA LIDIA DELGADILLO MEDINA

RENZO DE LA GALA GAMARRAVICTOR YUCRA NÚÑEZ

 AREQUIPA – PERÚ

2010

MODELO DE DISEÑO PARA APLICACIONES WEB

Jakob Nielsen, afirma: “En esencia, existen dos enfoques básicos del diseño: el ideal artístico de expresarse uno mismo y el ideal de ingeniería de resolver un problema para un cliente”.

¿QUÉ ES?El diseño de WebApps abarca actividades técnicas y otras que no

son, la visión y el sentido del contenido se desarrollan como parte del diseño gráfico.

¿QUIÉN LO HACE?Los ingenieros Web, diseñadores gráficos, desarrolladores de

contenido y otros participantes colaboran en la creación. ¿POR QUÉ ES IMPORTANTE?El diseño permite a un ingeniero Web crear un modelo que puede

valorarse en calidad y mejorarse antes de que se generen el contenido y el código.

MODELO DE DISEÑO PARA APLICACIONES WEB ¿CUÁLES SON LOS PASOS?El diseño del contenido:El diseño de los objetosEl diseño estéticoEl diseño arquitectónicoEl diseño de la interfazEl diseño de la navegaciónEl diseño de componentes ¿CUÁL ES EL PRODUCTO OBTENIDO?Abarca temas de diseño, estética, arquitectura, interfaz, navegación y

el nivel de componente es el producto de trabajo. ¿CÓMO PUEDO ESTAR SEGURO DE LO QUE HE HECHO

CORRECTAMENTE?Revisar cada elemento del modelo de diseño para descubrir errores,

inconsistencia, u omisiones.

TEMAS DE DISEÑO PARA INGENIERÍA WEB

GENÉRICAS El diseño resulta en un modelo que guía la construcción de la WebApp, debe contener suficiente información para reflejar cómo habrán de traducir se los requisitos de los participantes en contenido y código ejecutable.

ESPECÍFICO: Debe abordar atributos clave de una WebApp.

DISEÑO Y CALIDAD DE UNA WEBAPP

• El diseño es la actividad de ingeniería que conduce a un producto de gran calidad.

• Características:Facilidad de usoFuncionalidadConfiabilidadEficienciaFacilidad de mantenimiento“Los productos se diseñan para encajar mejor en las

tendencias naturales del comportamiento humano, entonces la gente estará más satisfecha, más completa y será más productiva”. Susan Weinschenk.

UN ÁRBOL DE REQUISITOS DE CALIDAD

OFFUTTATRIBUTOS

SEGURIDADLa medida clave de la seguridad es la habilidad de la WebApp y su

ambiente de servidor de rechazar el acceso no autorizado e impedir un franco ataque malévolo.

DISPONIBILIDADLa medida del porcentaje del tiempo que una WebApp está

disponible para usarla.ESCALABILIDADConstruir una WebApp que pueda acomodar el peso del éxito.TIEMPO EN EL MERCADOEs una medida de calidad desde un punto de vista de los mercadosUna meta importante de la ingeniería Web es desarrollar sistemas

en los que se proporcionen respuestas afirmativas a todas las preguntas relacionadas con la calidad.

METAS DE DISEÑO

JEAN KAISER sugiere:SIMPLICIDAD Todo con moderaciónCONSISTENCIAEl contenido se debe construir de manera consistenteIDENTIDADLa estética, la interfaz y el diseño de navegación de una

WebApp deben ser consistentes con el dominio de la aplicación para la cual se va a construir.

ROBUSTEZEl usuario espera contenido y funciones robustas que

sean relevantes para sus necesidades.

METAS DE DISEÑONAVEGABILIDADDebe ser simple y consistente y diseñada de modo

que sea intuitiva y predecible.APARIENCIA VISUALLas aplicaciones web son visuales, dinámicas y

estéticas. La belleza está en el ojo del observador.

COMPATIBILIDADUna Web se utilizará en una diversidad de

ambientes y se debe diseñar para que sea compatible con cada uno.

PIRÁMIDE DEL DISEÑO IWEB

Diseño de componentes

Diseño arquitectónico

Diseño de navegación

Diseño de contenido

Diseño estético

Diseño de la interfaz

DISEÑO DE LA INTERFAZPRINCIPIOS Y DIRECTRICES DEL DISEÑO DE

INTERFAZLas interfaces efectivas son visualmente

aparentes e indulgentes e implanta en sus propios usuarios una sensación de control.

BRUCE TOGNOZZI Identifica:AnticipaciónAl siguiente movimiento del usuarioComunicaciónEn la actividad que haya iniciado el usuarioConsistenciaEl uso de los controles de navegación, menús,

íconos y estética deben ser consistentes en todo la WebApp.

BRUCE TOGNOZZIAutonomía controladaFacilitarle el movimiento al usuario en toda la Web.EficienciaEl diseño y la interfaz deben de optimizar la eficiencia

laboral del usuario, no la eficacia del ingeniero.FlexibilidadPermitir que algunos usuarios realicen tareas

directamente y exploren la web en forma aleatoria.EnfoqueLa interfaz debe enfocarse en las tareas importantes

para el usuario.

LEY DE FITT

El tiempo para adquirir un objetivo es una función de la distancia a la que se halla y de su tamaño.

Modela rápidos movimientos dirigidos, donde un apéndice parte del reposo en una posición de inicio específica y se mueve hacia el reposo dentro de un área establecida como objetivo.

PRINCIPIOS Y DIRECTRICES DEL DISEÑO DE INTERFAZ

Objetos de la interfaz humanaSe ha desarrollado una gran librería de objetos de

interfaz humana reutilizados para WebApp.Reducción de latenciaDebe utilizar la multitarea de forma que el usuario

procede con el trabajo. Además las demoras deben de reconocerse, de modo que el usuario comprenda lo que está ocurriendo.

Facilidad de aprendizajeAcentuar un diseño simple e intuitivo que organice

el contenido y la funcionalidad para el usuario.

PRINCIPIOS Y DIRECTRICES DEL DISEÑO DE INTERFAZMetáforasEs fácil de aprenden y usar en tanto sea apropiada para la

aplicación y el usuario.Mantener la integridad del producto de trabajoDebe guardarse de manera automática de modo que no se perderá

si ocurriese un error. LegibilidadToda información presentada debe ser legible para jóvenes y viejos.Estado de rastroEl estado de interacción del usuario debe rastrearse y almacenarse

para regresar al lugar donde salió.Navegación visibleProporciona la ilusión de que los usuarios están en el mismo lugar y

que se les lleva el trabajo hasta sus lugares.

NIELSEN Y WAGNER SUGIEREN DIRECTRICES:La rapidez de la lectura en un monitor es de

aproximadamente 25% más lenta que la lectura en impresos.

Evite los signos de “en construcción”Los usuarios prefieren no desplazarseLos menús de navegación y encabezados deben

ser consistentes y disponibles en todas las páginas disponibles para el usuario.

La estética nunca debe sustituir la funcionabilidadLas opciones de navegación deben ser obviasUna interfaz bien diseñada mejora la percepción del

usuario del contenido o servicios que proporciona el sitio.

Mecanismos de Control de la Interfaz Los Objetivos de la Interfaz de una WebApp son:1. Establecer una ventana consistente con el contenido y la funcionalidad que

proporciona.2. Guiar al usuario a través de una serie de interacciones con la WebApp, y3. Organizar las opciones de navegación y el contenido disponible para el usuario.

Las opciones de navegación las implementa el diseñador seleccionando de entre varios mecanismos de interacción:

• Menús de navegación• Iconos gráficos• Imágenes gráficas

Flujo de trabajo en el diseño de la interfaz Una vez que se han identificado las tareas del usuario, se crean y analizan sus

escenarios (casos de uso) para definir un conjunto de objetos y acciones de interfaz.

Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño de la interfaz WebApp:

1. Revisar la información contenida en el modelo de análisis y refinarla conforme se requiera.

2. Desarrollar un bosquejo aproximado de la plantilla de la interfaz de la WebApp.3. Correlacionar los objetivos del usuario con acciones especificas de la interfaz.4. Definir un conjunto de tareas de usuario que estén asociadas con cada acción.

5. Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz.

6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseño estético.

7. Identificar los objetos de la interfaz del usuario que se requieran para implementarla.

8. Desarrollar una representación de procedimiento de la interacción del usuario con la interfaz.

9. Desarrollar una representación del comportamiento de la interfaz.10.Describir la plantilla de la interfaz para cada estado.11.Refinar y revisar el modelo de diseño de la interfaz.

Diseño Estético También llamado diseño Grafico, es un esfuerzo artistico que

complementa los aspectos técnicos de la ingenieria web. Sin él, una WebApp puede ser funcional, pero sin atractivo. Con él, una WebApp lleva a sus usuarios a un mundo que los incluye en un ambito tanto emocional como intelectual.

¿Qué es Estetica? – “La belleza existe en los ojos de quien la ve”. Para desarrollar un diseño estético efectivo, se pregunta quienes son los usuarios de la WebApp y qué “apariencia” desean.

Cuestiones de la Plantilla Toda pagina web tiene una cantidad limitada de “bien inmueble” que

puede usarse para dar soporte a :• la estética no funcional,• características de navegación,• contenido de información y,• funcionalidad dirigida al usuario. El “desarrollo” de este bien inmueble se planea durante el diseño estético.

Lineamientos generales de plantilla:• No temerle al espacio vacio.• Resaltar el contenido.• Organizar los elementos de plantilla de arriba a la izquierda hacia abajo a

la derecha.• Agrupar navegación, contenido y función geográficamente dentro de la

pagina.• No extender el bien inmueble con la barra de desplazamiento.• Considerar la resolución y el tamaño de la ventana de navegador cuando

diseñe plantillas.

Cuestiones de Diseño Grafico Considera cada aspecto de la presentación y percepción de una WebApp.

El proceso de diseño gráfico • Comienza con la plantilla y• Procede hacia la consideración de:

• Esquemas de color globales,• tipos de fuentes, • tamaños y estilos, • el uso de medios visuales complementarios y• todos los demás elementos estéticos de una aplicación.

Diseño del Contenido Desarrolla una representación de diseño para los objetos de contenido y

representa los mecanismos que se requieren para que establezcan sus relaciones uno con otro.

Además, se ocupa de la representación de la información dentro de un objeto de contenido especifico:

• Actividad de diseño que dirigen los publicistas,• los diseñadores gráficos y• otros que generan el contenido de una WebApp.

Objetos de Contenido Esta alineado de manera mas cercana con un objeto de dato para software

convencional. Tiene atributos que incluyen información especifica de contenido y atributos

específicos de implementación que se especifican como parte del diseño.

Cuestiones del Diseño de Contenido La creación del contenido es el trabajo de los especialistas que diseñan el

objeto de contenido al proporcionar un esbozo de la información que se entregará y una indicación de los tipos de los objetos de contenido genéricos, mediante los cuales se entregara la información. También se puede aplicar el diseño estético para representar la apariencia y percepción adecuados para el contenido.

Diseño Arquitectónico• Esta enlazado con las metas establecidas para la WebApp, el contenido que se

presentara, los usuarios que se visitaran y la filosofía de navegación que se establezca.

• Aborda la forma en la que la aplicación se estructura para gestionar la interacción del usuario, manejar las tareas de procesamiento internas, efectuar la navegación y presentar el contenido.

• Se dirige en paralelo con el diseño de la interfaz, el estético y el de contenido.

Arquitectura de ContenidoSe centra en la definición de la estructura hipermedia global de la WebApp.El diseño se puede elegir de 4 diferentes estructuras de contenido:

Las estructuras lineales:

Página Principal Página 1 Página 2 Página 3

Página Principal

Página 1

Página 2Página 3

Página 4

Página 5

Lineal

Lineal con alternativas

Página Principal Página 1 Página 2 Página 3

Lineal con opciones

• Las estructuras en retícula.

Camisas

Manga Corta

Manga Larga

Pantalones

Lino

Dril

Chaquetas

Cuero

Lana

• Las estructuras jerárquicas.Jerarquía Estrecha

Jerarquía Ancha

Empleos

Oferta

Hombres

Demanda

Mujeres Ing. de Sistemas Contadores

Página Principal

Servicios NoticiasPortales Banca Viajes

• Las estructuras jerárquicas.Jerarquía Mixta

Página Principal

Servicios Portales Banca

Descargas E-mail Todo en Uno InternacionalNacional

Arquitectura de WebApp Describe una infraestructura que permite a un sistema o aplicación

basados en web lograr sus objetivos de negocios. Descripción de Jacynto y sus colegas [JAC02]: “Las aplicaciones deben construirse con el uso de capas en las que se

tomen en cuenta las diferentes preocupaciones; en particular, los datos de la aplicación se deben separar de los contenidos de la pagina (nodos de navegación), y dichos contenidos, a su vez, deben estar claramente separados de la apariencia y la percepción de la interfaz (paginas)”.

La arquitectura de Modelo-Vista-Controlador (MVC) [KRA88]:• Modelo – Llamado “Objeto Modelo”, contiene todo el contenido especifico

de la aplicación y la lógica de procesamiento, e incluye todos los objetos de contenido, el acceso a fuentes de datos/información externas y toda la funcionalidad de procesamiento que son específicos de la aplicación.

• Vista – Contiene todas las funciones especificas de la interfaz y habilita la presentación del contenido y la lógica de procesamiento, e incluye todos los objetos de contenido, acceso a fuentes de datos/información externas ya toda la funcionalidad de procesamiento requerida por el usuario final.

• Controlador – Gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre ellos. Una WebApp, “la vista la actualiza el controlador con datos provenientes del modelo con base en la entrada del usuario”.

La Arquitectura MVC (Adaptada de [JAC02])

DISEÑO DE NAVEGACIÓN

Identifica un conjunto de objetos que se derivan de las clases definidas

en el diseño conceptual.

Clases de Navegación o nodos .- Para capsular objetos, se puede

usar UML para crear casos de uso, gráficos de estado y diagrama de

secuencia, esto ayudara al diseñador a comprender mejor los requisitos

de navegación

Utiliza un conjunto predefinido de clases de navegación:

Nodos, vínculos anclas, y estructuras de acceso(índice de la WebApp,

mapa de sitio o paseo guiado)

Es construido como una vista sobre un diseño conceptual

El diseño de navegación es expresado en dos esquemas: el

esquema de clases navegacionales .- nodos, enlaces y estructuras de

acceso,(posibles caminos de acceso a los nodos)

esquema de contextos navegacionales.- es un conjunto de nodos,

enlaces, clases de contextos, y otros contextos navegacionales

(contextos anidados).

DISEÑO ABSTRACTO DE LA INTERFAZ

Especifica los objetos de la interfaz que el usuario ve conforme

interactúa con la WebApp

Visión Abstracta de datos(VAD).- Representar la relación entre

objetos de la interfaz y objetos de navegación y las características de

comportamiento de los objetos dela interfaz

Plantilla estática.- Representa la metáfora de la interfaz e incluye

una representación de los objetos de navegación dentro de la interfaz

y la especificación de los objetos de la interfaz(menús, botones,

iconos, ).

Contiene un componente relacionado con el comportamiento que

indica como los eventos externos disparan la navegación y que

transformaciones de la interfaz ocurren cuando el usuario interactúa

con la aplicación

Requerimientos que el cliente pide como presentación externa para

navegar en el sitio

IMPLEMENTACIÓN

Hasta ahora, todos los modelos fueron construidos en forma

independiente de la plataforma de implementación en esta fase se

toma en cuenta el entorno en el cual se va a correr la aplicación.

1. Definir los ítems de información que son parte del dominio del

problema.

2. Identificar cómo son organizados los ítems de acuerdo con el perfil

del usuario y su tarea

3. Decidir qué interfaz debería ver y cómo debería comportarse.

4. Decidir qué información debe ser almacenada.

Representa una interacción de diseño que es especifica al ambiente en

el que opera la WebApp

Las clases, la navegación y la interfaz puede construirse para el

ambiente cliente/servidor.

Métricas de diseño para WebApp

Proporciona a los Ingenieros Web un indicador de calidad en

tiempo real

Conjunto de medidas que ofrezcan respuestas a diferentes

inquietudes con relación a:

Interfaz de usuario ayuda a la facilidad de uso

La estética utilizada es la apropiada.

La navegación es eficiente y directa