24

Capitulo 19 Modelado De DiseñO

Embed Size (px)

DESCRIPTION

Diseño Web

Citation preview

Page 1: Capitulo 19 Modelado De DiseñO
Page 2: Capitulo 19 Modelado De DiseñO

“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 ”

Jakob Nielsen

Page 3: Capitulo 19 Modelado De DiseñO

Temas de diseño para Ingeniería Web

¿Cómo se aprecia la calidad de la WebApp? ¿Qué atributos debe exhibir para lograr ser buena a los ojos de

los usuarios y al mismo tiempo mostrar las características técnicas de calidad que permitirán a un ingeniero Web corregir, adaptar, mejorar y apoyar la aplicación a largo plazo?

Diseño y calidad de una WebApp

Page 4: Capitulo 19 Modelado De DiseñO

Diseño y calidad de una WebApp

• Seguridad• Disponibilidad• Escalabilidad• Tiempo en el Mercado

Page 5: Capitulo 19 Modelado De DiseñO

Metas de Diseño

• Simplicidad• Consistencia• Identidad• Robustez• Navegabilidad• Apariencia visual• Compatibilidad

Page 6: Capitulo 19 Modelado De DiseñO

Pirámide del Diseño Web

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

Page 7: Capitulo 19 Modelado De DiseñO

Diseño de la interfaz de la WebApp

• En la ingeniería software se denomina aplicación web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador.

• Existen aplicaciones como los webmails, wikis, weblogs, tiendas en línea y la propia Wikipedia que son ejemplos bien conocidos de aplicaciones web.

Page 8: Capitulo 19 Modelado De DiseñO

• Toda interfaz del usuario diseñada para una WebApp, debe presentar las siguientes características:- fácil de usar- fácil de aprender- fácil de navegar- intuitiva- consistente- eficiente- libre de errores- funcional

• Debe ofrecer al usuario final una experiencia satisfactoria y gratificante.

Page 9: Capitulo 19 Modelado De DiseñO

Consideraciones Técnicas• Una ventaja es que las aplicaciones web

funcionan de manera igual, independientemente de la versión de sistema operativo instalado en el cliente.

Page 10: Capitulo 19 Modelado De DiseñO

Lenguajes de Programación• Existen numerosos lenguajes de programación

empleados para el desarrollo de aplicaciones web, entre los que destacan:- PHP- ASP/ASP.NET- Java, con sus tecnologías java servelets y

JSP- HTML- XML

Page 11: Capitulo 19 Modelado De DiseñO

Ejemplos de Aplicaciones Web• Gmail por Google. Correo electrónico.

Page 12: Capitulo 19 Modelado De DiseñO

Vinculo de Navegación Individual.- Vinculos basados en

texto, iconos, botones e interruptores, y metáforas graficas.

Barra de Navegación horizontal.- Lista de las principales

categorias de contenidos o funcionales (4-7)

Columna de Navegación vertical.

1.- categorias de contenido o funcionales

2.- lista virtual de los principales objetos de contenido de la

WebApp, como parte de una jerarquía

Pestañas.- Es una variación de la barra o columna de

navegación , representa categorias de contenido o funcionales

como marcas que selecionan cuando se requiere un vinculo.

SINTAXIS DE NAVEGACIÓN.

Page 13: Capitulo 19 Modelado De DiseñO

Mapas de Sitio.- Tabla de contenido para la navegación hacia todos

los objetos de contenido y funcionalidad en la WebApp.

Se debe establecer convenciones y auxiliares de navegación como:

iconos, y vínculos gráficos (oprimibles )para que la imagen tenga una

apariencia tridimensional

Retroalimentación visual o de audio

En la navegación basada en texto utiliza color que indicaran los

vinculos de navegación y vínculos ya recorridos.

Page 14: Capitulo 19 Modelado De DiseñO

EJEMPLOS DE MODELO DE NAVEGACIÓN

Page 15: Capitulo 19 Modelado De DiseñO

DISEÑO AL NIVEL DE COMPONENTES

1. Realizan procesamiento localizado para generar capacidad de

contenido y navegación de forma dinámica

2. Ofrecen capacidades de computación o procesamiento de datos

dominio de negocios de la WebApp

3. Proporciona cuestionamientos y acceso sofisticado a BD

4. Establecen interfaces de datos con sistemas corporativos externos

El Ing. Web deberá diseñar y construir componentes de programa que

identicos los componentes de software a implementar

Page 16: Capitulo 19 Modelado De DiseñO

y PATRONES DE DISEÑO HIPERMEDIA

1) Patrones de diseño genérico.- Todo tipo de software

2) Patrones de diseño hipermedia.- Especificos de la WebApp

Casa patrón es una regla de tres partes que expresa una relación entre

cierto contexto,

un problema y una solución

Categoría de Patrones

Patrones Arquitectónico. Diseño del contenido y la arquitectura

WebApp

Patrones de construcción de componentes. Métodos para combinar

componentes

Patrones de navegación. Vínculos de navegación y flujo de

navegación de la WebApp

Patrones de presentación. Presentación del contenido, presentación

al usuario

Patrones de interacción comportamiento/usuario. Interacción

usuario maquina

Page 17: Capitulo 19 Modelado De DiseñO

MÉTODO DE DISEÑO HIPERMEDIA ORIENTADO A

OBJETOS(MDHOO)

Esta compuesto de cuatro actividades de diseño:

Diseño Conceptual

Diseño de Navegación

Diseño Abstracto de la Interfaz

Implementación

Page 18: Capitulo 19 Modelado De DiseñO

DISEÑO CONCEPTUAL

Crea una representación de los subsistemas, clases y relaciones que

definen el dominio de aplicación para la WebApp

Aquí se mencionan los requerimientos de la aplicación en estructura y

en presentación.

Relaciones y colaboraciones entre los objetos.

Constituido por: Clases, relaciones, y subsistemas

UML.- Crear diagramas de clase, agregados y representaciones de

clase compuestas, diagrama de colaboración.

Las clases son usadas para derivar nodos y las relaciones para

construir los enlaces.

Page 19: Capitulo 19 Modelado De DiseñO

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).

Page 20: Capitulo 19 Modelado De DiseñO

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

Page 21: Capitulo 19 Modelado De DiseñO

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.

Page 22: Capitulo 19 Modelado De DiseñO

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

Page 23: Capitulo 19 Modelado De DiseñO
Page 24: Capitulo 19 Modelado De DiseñO