INSTITUTO TECNOLGICO DE SALINA CRUZ

UNIDAD:
1
TEMAS:

1.3 OBJETIVOS DE DISEO

1.4 PIRMIDE DE DISEO
INTEGRANTES:
CRUZ ROJAS ARIANA PATRICIA
JARQUN MARTNEZ NOEM
JIMNEZ OSORIO VCTOR HUGO
ING. EN TECNOLOGAS DE LA INFORMACIN Y
DE LAS COMUNICACIONES
VIII-E

MODELO DE DISEO PARA

APLICACIONES WEB

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.3 OBJETIVOS DE
DISEO

Simplicidad

Apariencia
Visual

Compatibilidad

Identidad

Objetivos
de
Diseo
Robustez

Navegabilidad

Consistencia

1.4 PIRMIDE DEL DISEO WEB

Diseo
de la
Interfaz
Diseo
Esttico
Diseo de
Contenido
Diseo de Navegacin

Diseo de Arquitectura
Diseo de Componentes

DISEO DE COMPONENTES
Determinar que tan homogneo es un software, adaptabilidad de
cdigo. Determinar si esta ensamblado con cdigo nativo,
funcionamiento bajo Framework, etc.
Diseo de interfaces entre el software y otros productores / consumidores
de informacin (no humanos).
Examinar la combinacin de tecnologas, la posibilidad de conjuntar
software bajo mdulos y el paso de parmetros.
Las webapps modernas dan funciones de procesamiento cada vez
ms complejas que:
1)

Realizan un procesamiento localizado para generar contenido y

capacidad de navegacin en forma dinmica.

2)

Proporcionan capacidad de cmputo 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 disearse y
construirse componentes de programas con forma idntica a los
componentes del software tradicional.

PATRONES DE DISEO HIPERMEDIA.

Son patrones de diseo en la ingeniera web que abarcan.

Patrones de diseo Genrico.
Patrones de diseo Hipermedia.
Otras categoras de patrones:
Patrones arquitectnicos: Esto patrones auxilian en el diseo del
contenido y la arquitectura.
Patrones de construccin de componentes: Estos patrones
recomienda mtodos para combinar componentes.
Patrones de navegacin: Estos mas ayudan al diseo.
Patrones de presentacin: estos patrones auxilian en la
presentacin de contenidos.
Patrones de interaccin comportamiento / usuario: estos patrones
auxilian en el diseo de la interaccin usuario maquina.

Los mtodos de diseo se aplican a los componentes de las webapps con

poca, o ninguna, modificacin. El ambiente de implementacin, los
lenguajes de programacin, los patrones de diseo, estructuras y software,
tal vez varen un poco, pero el enfoque general del diseo es el mismo.

DISEO DE ARQUITECTURA
El diseo arquitectnico esta enlazado con las metas establecidas
para la Web en cuanto a:

El contenido que representan

Los usuarios que la visitaran

La filosofa de navegacin que se establezca.

El diseador 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

presentacin y navegacin.

Forma en que la aplicacin se estructura para gestionar la

interaccin del usuario.

En la mayora de los casos, el diseo arquitectnico se lleva a

cabo en paralelo con el de la interfaz, el esttico y el del
contenido.
Como la arquitectura de la webapp tal vez est muy influida por
la navegacin, las decisiones que se tomen durante esta accin
del diseo influirn en el trabajo realizado durante el diseo de
aqulla.

ARQUITECTURA
DEL
CONTENIDO

ARQUITECTURA
DE LAS
WEBAPPS

DISEO DE NAVEGACIN
Una vez establecida la arquitectura de la web 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 web.

Acceso al contenido y las funciones de la Web.

Identificar la semntica de navegacin para diferentes

usuarios

Definir la mecnica (sintaxis) que logra la navegacin.

Barras

de navegacin

Columnas

de navegacin

Pestaas
Mapas

de sitio

DISEO DEL CONTENIDO

El diseo del contenido se enfoca en dos asuntos de diseo
diferente, cada uno lo abordan individuos con conjunto de
habilidades. Adems el diseo de contenidos se ocupa de
representar la informacin dentro de un objeto.
As:

Se enfoca en dos asuntos de diseo diferentes:

Para los objetos de contenido, mecanismos para

establecer relaciones unos con otros (ingeniero Web).

Representacin de informacin dentro de un objeto de

contenido especfico (la dirigen los publicistas y
diseadores grficos)

DISEO ESTTICO
El diseo esttico, tambin llamado diseo grfico considera
aspectos de la presentacin y percepcin 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 imgenes, hojas de estilo, scripts,

y todo lo necesario para la creacin de una interface
agradable y funcional.

DISEO DE INTERFAZ

CARACTERSTICAS

Funcional

Libre de
errores

Eficiente

Consistente

Intuitiva

Fcil de
navegar

Fcil de
aprender

Debe ofrecer al usuario final una experiencia satisfactoria y gratificante

Los conceptos, principios y mtodos de diseo de la interfaz brindan las
herramientas 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 la

funcionalidad que proporciona.

2.

Guiar al usuario a travs de una serie de interacciones con la

WebApp.

3.

Organizar las opciones de navegacin y el contenido disponible

para el usuario

Fcil de
usar

anticipacin

Enfoque

Comunicacin

PRINCIPIOS Y
DIRECTRICES
DEL DISEO
DE LA
INTERFAZ

Flexibilidad

eficiencia

consistencia

Autonoma
controlada

Gracias

por su Atencin