Modelo de Diseño para Aplicaciones Web - Equipo 2 - Unidad I - Tema 1.3-1.4

21
INSTITUTO TECNOLÓGICO DE SALINA CRUZ UNIDAD: 1 TEMAS: 1.3 OBJETIVOS DE DISEÑO 1.4 PIRÁMIDE DE DISEÑO I NTEGRANTES : C RUZ ROJAS A RIANA P ATRICIA J ARQUÍN M ARTÍNEZ N OEMÍ J IMÉNEZ O SORIO V ÍCTOR H UGO I NG . E N T ECNOLOGÍAS DE LA I NFORMACIÓN Y DE LAS C OMUNICACIONES VIII - E

description

Modelo de Diseño para Aplicaciones Web - Equipo 2 - Unidad I - Tema 1.3-1.4

Transcript of Modelo de Diseño para Aplicaciones Web - Equipo 2 - Unidad I - Tema 1.3-1.4

INSTITUTO TECNOLÓGICO DE SALINA CRUZ

UNIDAD:

1

TEMAS:

1.3 OBJETIVOS DE DISEÑO

1.4 PIRÁMIDE DE DISEÑO

INTEGRANTES:

CRUZ ROJAS ARIANA PATRICIA

JARQUÍN MARTÍNEZ NOEMÍ

JIMÉNEZ OSORIO VÍCTOR HUGO

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y

DE LAS COMUNICACIONES

VIII-E

MODELO DE DISEÑO PARA

APLICACIONES WEB

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

Objetivos de

Diseño

Simplicidad

Identidad

Robustez

ConsistenciaNavegabilidad

Compatibilidad

Apariencia Visual

1.3 OBJETIVOS DE

DISEÑO

1.4 PIRÁMIDE DEL DISEÑO WEBDiseño de la

Interfaz

Diseño Estético

Diseño de Contenido

Diseño de Navegación

Diseño de Arquitectura

Diseño de Componentes

DISEÑO DE COMPONENTES

Determinar que tan homogéneo es un software, adaptabilidad de

código. Determinar si esta ensamblado con código nativo,

funcionamiento bajo Framework, etc.

Diseño de interfaces entre el software y otros productores / consumidores

de información (no humanos).

Examinar la combinación de tecnologías, la posibilidad de conjuntar

software bajo módulos y el paso de parámetros.

Las webapps modernas dan funciones de procesamiento cada vez

más complejas que:

1) Realizan un procesamiento localizado para generar contenido y

capacidad de navegación en forma dinámica.

2) Proporcionan capacidad de cómputo o de procesamiento de

datos que resultan apropiados para el dominio del negocio de la

webapp.

3) Dan consulta y acceso complejos a bases de datos.

4) Establecen interfaces de datos con sistemas corporativos externos.

Para lograr estas capacidades (y muchas otras) deben diseñarse y

construirse componentes de programas con forma idéntica a los

componentes del software tradicional.

PATRONES DE DISEÑO HIPERMEDIA.

Son patrones de diseño en la ingeniera web que abarcan.

Patrones de diseño Genérico.

Patrones de diseño Hipermedia.

Otras categorías de patrones:

Patrones arquitectónicos: Esto patrones auxilian en el diseño del

contenido y la arquitectura.

Patrones de construcción de componentes: Estos patrones

recomienda métodos para combinar componentes.

Patrones de navegación: Estos mas ayudan al diseño.

Patrones de presentación: estos patrones auxilian en la

presentación de contenidos.

Patrones de interacción comportamiento / usuario: estos patrones

auxilian en el diseño de la interacción usuario maquina.

Los métodos de diseño se aplican a los componentes de las webapps con

poca, o ninguna, modificación. El ambiente de implementación, los

lenguajes de programación, los patrones de diseño, estructuras y software,

tal vez varíen un poco, pero el enfoque general del diseño es el mismo.

DISEÑO DE ARQUITECTURA

El diseño arquitectónico esta enlazado con las metas establecidas

para la Web en cuanto a:

El contenido que representan

Los usuarios que la visitaran

La filosofía de navegación que se establezca.

El diseñador de arquitectura debe identificar la arquitectura de

contenido y la arquitectura de la Web.

Forma en que los objetos de contenido se estructuran para su

presentación y navegación.

Forma en que la aplicación se estructura para gestionar la

interacción del usuario.

En la mayoría de los casos, el diseño arquitectónico se lleva a

cabo en paralelo con el de la interfaz, el estético y el del

contenido.

Como la arquitectura de la webapp tal vez esté muy influida por

la navegación, las decisiones que se tomen durante esta accióndel diseño influirán en el trabajo realizado durante el diseño de

aquélla.

ARQUITECTURA DEL

CONTENIDO

ARQUITECTURA DE LAS

WEBAPPS

DISEÑO DE NAVEGACIÓN

Una vez establecida la arquitectura de la web y la

identificación de los componentes, el diseñador debe definir

las rutas de navegación que habiliten para los usuarios el

acceso al contenido y las funciones de la web.

Acceso al contenido y las funciones de la Web.

Identificar la semántica de navegación para diferentesusuarios

Definir la mecánica (sintaxis) que logra la navegación.

Barras de navegación

Columnas de navegación

Pestañas

Mapas de sitio

DISEÑO DEL CONTENIDO

El diseño del contenido se enfoca en dos asuntos de diseño

diferente, cada uno lo abordan individuos con conjunto de

habilidades. Además el diseño de contenidos se ocupa de

representar la información dentro de un objeto.

Así:

Se enfoca en dos asuntos de diseño diferentes:

Para los objetos de contenido, mecanismos para

establecer relaciones unos con otros (ingeniero Web).

Representación de información dentro de un objeto de

contenido específico (la dirigen los publicistas y

diseñadores gráficos)

DISEÑO ESTÉTICO

El diseño estético, también llamado diseño gráfico considera

aspectos de la presentación y percepción de Web.

Sin él una WebApp puede ser funcional pero no atractiva.

Lleva a los usuarios a un mundo que incluye un ámbito tanto

emocional como intelectual.

En una webapp se contemplan imágenes, hojas de estilo, scripts,

y todo lo necesario para la creación de una interface

agradable y funcional.

DISEÑO DE INTERFAZ

Debe ofrecer al usuario final una experiencia satisfactoria y gratificanteLos conceptos, principios y métodos de diseño de la interfaz brindan lasherramientas requeridas para lograr esta lista de atributos.

Los objetivos de la interfaz de una WebApp son:

1. Establecer una ventana consistente con el contenido y lafuncionalidad que proporciona.

2. Guiar al usuario a través de una serie de interacciones con laWebApp.

3. Organizar las opciones de navegación y el contenido disponiblepara el usuario

Fácil de usar

Fácil de aprender

Fácil de navegar

IntuitivaConsistenteEficienteLibre de errores

Funcional

CARACTERÍSTICAS

PRINCIPIOS Y

DIRECTRICES

DEL DISEÑO

DE LA

INTERFAZ

anticipación

Comunicación

consistencia

Autonomía controlada

eficiencia

Flexibilidad

Enfoque

Gracias por su Atención