TECNOLÓGICO NACIONAL DE MÉXICO

Instituto Tecnológico de Salina Cruz

“2015, Año del Generalísimo José María Morelos y Pavón”

Carretera a San Antonio Monterrey Km. 1.7, C. P. 70701, Salina Cruz, Oaxaca. Tels. 01 (971) 71 6 28 37 y 01 (971) 71 6 32 42,

e-mail: contacto@itsalinacruz.edu.mx. www.itsalinacruz.edu.mx

INSTITUTO TECNOLÓGICO DE SALINA CRUZ

UNIDAD I:

MODELO DE DISEÑO DE APLICACIONES WEB

TRABAJO:

Reporte

TEMA:

OBJETIVOS DE DISEÑO

PIRÁMIDE DE DISEÑO

MATERIA:

MODELO DE DISEÑO DE APLICACIONES WEB

FACILITADOR:

MTI. MEDEL DÍAZ EDGAR

PRESENTAN:

CRUZ ROJAS ARIANA PATRICIA

JARQUÍN MARTÍNEZ NOEMÍ

JIMÉNEZ OSORIO VÍCTOR HUGO

CARRRERA:

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

SEMESTRE: VIII GRUPO: E

SALINA CRUZ, OAXACA A 19 DE FEBRERO DEL 2015.

ÍNDICE PÁGINA

Introducción..............................................................................................................2

1.1 Objetivos de Diseño..........................................................................................3

1.2 Pirámide de Diseño...........................................................................................5

1.2.1 Diseño de componentes.................................................................................6

1.2.2 Diseño de arquitectura...................................................................................7

1.2.2.1 Arquitectura del contenido...........................................................................7

1.2.2.2 Arquitectura de las webapps.......................................................................8

1.2.3 Diseño de navegación....................................................................................9

1.2.3.1 Semántica de la navegación.....................................................................10

1.2.3.2 Sintaxis de navegación.............................................................................10

1.2.4 Diseño del contenido....................................................................................12

1.2.4.1 Objetos de contenido................................................................................12

1.2.5 Diseño estético.............................................................................................13

1.2.5.1 Aspectos de la distribución........................................................................13

1.2.5.2 Aspectos del diseño gráfico.......................................................................14

1.2.6 Diseño de la interfaz.....................................................................................14

1.2.6.1 Aspectos del diseño gráfico.......................................................................15

Conclusión..............................................................................................................16

Fuentes Bibliográficas............................................................................................17

1

INTRODUCCIÓN

El diseño de webapps incluye actividades técnicas y no técnicas que incluyen lo

siguiente: establecer la vista y sensación de la aplicación web, creando la

distribución estética de la interfaz de usuario, definiendo la estructura

arquitectónica general, desarrollando el contenido y la funcionalidad que residen

en la arquitectura y planeando la navegación que ocurre dentro de la webapp.

En la creación del modelo del diseño de una webapp, intervienen ingenieros web,

diseñadores gráficos, desarrolladores de contenido y varios participantes más. El

diseño permite crear un modelo que se evalúe respecto de su calidad para

mejorarlo antes de la generación de contenido y código, de la realización de las

pruebas y del involucramiento de un gran número de usuarios.

2

1.1 OBJETIVOS DE DISEÑO

Simplicidad: Aunque parezca algo pasado de moda, el aforismo “todo con

moderación” es aplicable a las aplicación webs. Existe una tendencia entre ciertos

diseñadores a dar al usuario final “demasiado”: contenido exhaustivo, extremos

visuales, animaciones intrusas, páginas web enormes… y la lista sigue.

Es mejor moderación y simplicidad. El contenido debe ser informativo pero sucinto

y debe utilizar un modo de entrega (texto, imágenes, video o audio) que resulte

apropiado para la información que se envíe. La navegación debe ser directa y sus

mecanismos, obvios para la intuición del usuario final.

La estética debe ser agradable pero no abrumadora (demasiados colores tienden

a distraer al usuario en vez de mejorar la interacción). La arquitectura debe lograr

los objetivos de la aplicación web de la manera más sencilla posible. Las

funciones deben ser fáciles de utilizar y más fáciles de entender.

Consistencia. Esta meta del diseño se aplica virtualmente a todo elemento del

modelo del diseño. El contenido debe construirse de modo congruente (formato y

tipografía del texto deben ser los mismos en todos los documentos de texto; las

imágenes deben tener coherencia en su aspecto, color y estilo).

El diseño gráfico (estética) debe presentar una vista consistente en todas las

partes de la aplicación web. El diseño arquitectónico debe establecer plantillas que

generen una estructura de hipermedios constante. El diseño de la interfaz debe

definir modos consistentes de interacción, navegación y despliegue del contenido.

Los mecanismos de navegación deben usarse de manera consistente en todos los

elementos de la aplicación web. Hay que recordar que para un visitante, un sitio

web es un lugar físico. Si sus páginas no tienen un diseño consistente, son fuente

de confusión.

Identidad. El diseño de la estética, la interfaz y la navegación de una aplicación

web deben ser consistentes con el dominio de la aplicación para la que se va a

elaborar. Un sitio web para un grupo de hip-hop sin duda tendrá un aspecto y

sensación distintos que una aplicación web diseñada para una compañía de

servicios financieros.

3

La arquitectura de la aplicación web será diferente por completo, las interfaces se

construirán para que reciban a distintas categorías de usuarios, la navegación se

organizará para que cumpla objetivos diferentes. Usted (y quienes contribuyan al

diseño) debe trabajar para establecer la identidad de la aplicación web por medio

del diseño.

Robustez. Con base en la identidad que se haya establecido, es frecuente que

una aplicación web haga una “promesa” implícita al usuario. Éste espera

contenido y funciones robustas que sean relevantes para sus necesidades. Si no

existen o son insuficientes, es probable que la aplicación web fracase.

Navegabilidad. Ya se dijo que la navegación debe ser sencilla y consistente.

También debe estar diseñada en forma tal que sea intuitiva y predecible. Es decir,

el usuario debe comprender cómo moverse por la aplicación web sin tener que

buscar vínculos o instrucciones para la navegación.

Por ejemplo, si un campo de iconos gráficos o de imágenes contiene algunos que

serán usados como mecanismos de navegación, deben identificarse visualmente.

Nada es más frustrante que intentar encontrar el vínculo vivo apropiado entre

muchas imágenes.

También es importante colocar los vínculos hacia el contenido y las funciones de

la aplicación web en una ubicación predecible en cada página web. Si se requiere

desplazar la página (lo que sucede con frecuencia), los vínculos situados en las

partes superior e inferior de la página hacen que las tareas de navegación del

usuario sean más fáciles.

Atractivo visual. De todas las categorías de software, las aplicaciones web son

indiscutiblemente las más visuales, dinámicas y estéticas. La belleza (atractivo

visual) radica sin lugar a dudas en los ojos del espectador, pero muchas

características del diseño (aspecto y sensación del contenido, distribución de la

interfaz, coordinación del color, balance del texto, imágenes y otros medios)

aumentan el atractivo visual.

Compatibilidad. Una aplicación web se usará en varios ambientes (distinto

hardware, tipos de conexión, sistemas operativos, navegadores, etcétera) y debe

diseñarse para que sea compatible con cada uno.

4

1.2 PIRÁMIDE DE DISEÑO

La creación de un diseño eficaz requerirá por lo general de un conjunto

diversificado de aptitudes. En ocasiones, para proyectos pequeños, un

desarrollador único necesitará tener varias habilidades.

Para los proyectos grandes, es aconsejable o factible confiar en la experiencia de

especialistas: ingenieros web, diseñadores gráficos, desarrolladores de contenido,

programadores, especialistas de bases de datos, arquitectos de la información,

ingenieros de redes, expertos en seguridad y probadores.

La mezcla apropiada de habilidades de diseño variará en función de la naturaleza

de la webapp. La figura 1.1 ilustra la pirámide del diseño de las webapps. Cada

nivel representa una acción del diseño que se describe en las siguientes

secciones.

Figura 1.1 Pirámide del Diseño

5

1.2.1 DISEÑO DE COMPONENTES

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.

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.

MÉTODO DE DISEÑO DE HIPERMEDIOS ORIENTADO A OBJETOS (MDHOO)

En la última década, se han propuesto varios métodos de diseño para aplicaciones

web. Hasta hoy, ninguno de ellos es el dominante. Se presenta un panorama

breve de uno de los métodos de diseño de webapps más estudiado.

Daniel Schwabe propuso por primera vez el Método de Diseño de Hipermedios

Orientado a Objetos (MDHOO), que está compuesto de cuatro distintas

actividades de diseño: diseño conceptual, diseño de navegación, diseño abstracto

de la interfaz e implementación.

Diseño conceptual del MDHOO.

El diseño conceptual del MDHOO genera una representación de los subsistemas,

clases y relaciones que definen el dominio de aplicación para la webapp.

6

Se puede utilizar UML para crear diagramas de clase apropiados, agregaciones y

representaciones compuestas de clase, diagramas de colaboración y otra clase de

información que describa el dominio de la aplicación.

1.2.2 DISEÑO DE ARQUITECTURA

El diseño arquitectónico está ligado con las metas establecidas para una webapp,

con el contenido que se va a presentar, con los usuarios que la visitarán y con la

filosofía de navegación adoptada. Como diseñador de la arquitectura, el lector

debe identificar la arquitectura del contenido y la de la webapp.

La arquitectura del contenido se centra en la manera en la que los objetos de

contenido (o compuestos, como páginas web) se estructuran para la presentación

y la navegación. La arquitectura de la webapp se aboca a la forma en la que la

aplicación queda estructurada para administrar la interacción con el usuario,

manejar tareas de procesamiento interno, navegar con eficacia y presentar el

contenido.

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ón del diseño influirán en el trabajo realizado durante el diseño de

aquélla.

1.2.2.1 ARQUITECTURA DEL CONTENIDO.

El diseño del contenido se centra en la definición de la estructura general de los

hipermedios de la webapp. Aunque en ocasiones se crean arquitecturas

personalizadas, siempre se tiene la opción de elegir entre cuatro distintas

estructuras de contenido.

Las estructuras lineales (véase la figura 1.2) se encuentran cuando es común una

secuencia predecible de interacciones (con cierta variación o diferencia). Un

ejemplo clásico es la presentación de tutoriales en los que se despliegan páginas

7

de información junto con imágenes relacionadas, videos cortos o audio, sólo

después de haber mostrado cierta información de prerrequisitos.

La secuencia de la presentación del contenido es predefinida y por lo general es

lineal. Otro ejemplo sería una secuencia de entrada para ordenar un producto en

la que debe proporcionarse información específica en un orden determinado.

A medida que el contenido y el procesamiento se hacen más complejos, el flujo

exclusivamente lineal que se aprecia a la izquierda de la figura da origen a

estructuras lineales más complejas en las que puede invocarse contenido

alternativo o en las que sucede una desviación para adquirir contenido

complementario (estructura que aparece en el lado derecho de la figura 1.2).

Figura 1.2 Estructuras Lineales

1.2.2.2 ARQUITECTURA DE LAS WEBAPPS.

La arquitectura de una webapp describe una infraestructura que permite que un

sistema o aplicación basados en web alcance sus objetivos empresariales.

Jacyntho describe las características básicas de esta infraestructura del modo

siguiente:

8

Las aplicaciones deben construirse con el empleo de capas en las que se tomen

en cuenta distintas preocupaciones; en particular, deben separarse los datos de la

aplicación de los contenidos de ésta (nodos de navegación), y éstos, a su vez,

deben separarse con toda claridad del aspecto y la sensación de la interfaz

(páginas).

Los autores sugieren una arquitectura del diseño en tres capas que desacopla la

interfaz de la navegación y del comportamiento de la aplicación. Plantean que

mantener separadas la interfaz, la aplicación y la navegación, simplifica la

implementación y mejora la reutilización.

La arquitectura de controlador de la vista del modelo (CVM) es uno de varios

modelos sugeridos para la infraestructura de webapps que desacoplan la interfaz

de usuario de sus funciones y contenido informativo.

El modelo (a veces denominado “objeto de modelo”) contiene todo el contenido y

la lógica de procesamiento específicos de la aplicación, incluso todos los objetos

de contenido, acceso a fuentes de datos o información externos y todas las

funciones de procesamiento que son específicas de la aplicación.

La vista contiene todas las funciones específicas de la interfaz y permite la

presentación de contenido y lógica de procesamiento, incluidos todos los objetos

de contenido, el acceso a fuentes de datos o información del exterior y todas las

funciones de procesamiento que requiere el usuario final.

El controlador administra el acceso al modelo y la vista, y coordina el flujo de datos

entre ellos. En una webapp, “la vista es actualizada por el controlador con datos

del modelo, basándose en las entradas que da el usuario”.

1.2.3 DISEÑO DE NAVEGACIÓN

Una vez que la arquitectura de la webapp ha sido establecida y se han identificado

sus componentes (páginas, textos, subprogramas y otras funciones de

procesamiento), deben definirse las rutas de navegación que permitan a los

usuarios acceder al contenido y a las funciones de la webapp.

Para lograr esto, debe hacerse lo siguiente:

9

1) identificar la semántica de navegación para los distintos usuarios del sitio y

2) definir la mecánica (sintaxis) para efectuar la navegación.

1.2.3.1 SEMÁNTICA DE LA NAVEGACIÓN.

Como muchas acciones del diseño de webapps, el diseño de la navegación

comienza con la consideración de la jerarquía del usuario y los casos de uso

relacionados, desarrollados para cada categoría de usuario (actor). Cada actor

puede usar la webapp en forma algo diferente, por lo que tendrán distintos

requerimientos de navegación.

Además, los casos de uso desarrollados por cada actor definirán un conjunto de

clases que incluirán uno o más objetos de contenido o funciones de la webapp. A

medida que cada usuario interactúe con la webapp, encuentra una serie de

unidades semánticas de navegación (USN): “conjunto de estructuras de

información y navegación relacionadas que colaboran para el cumplimiento de un

subconjunto de requerimientos del usuario relacionados”.

Una USN está compuesta por un conjunto de elementos de navegación llamados

formas de navegar (FdN). Una FdN representa la mejor ruta de navegación a fin

de lograr una meta para un tipo de usuario específico. Cada FdN está organizada

como un conjunto de nodos de navegación (NN) conectados por vínculos.

En ciertos casos, un vínculo navegable es otra USN. Entonces, la estructura de

navegación general de una webapp está organizada como jerarquía de USN.

Durante las etapas iniciales del diseño de la navegación, se evalúa la arquitectura

del contenido de la webapp a fin de determinar una o más FdN para cada caso de

uso.

Como ya se dijo, una FdN identifica los nodos de navegación (por ejemplo,

contenido) y después los vínculos que permiten navegar entre ellos. Entonces, las

FdN están organizadas en USN.

10

1.2.3.2 SINTAXIS DE NAVEGACIÓN.

Al avanzar en el diseño, la tarea siguiente es definir la mecánica de la navegación.

Se dispone de varias opciones para desarrollar un enfoque de implementación

para cada USN:

Vínculo de navegación individual: incluye vínculos basados en texto, iconos,

botones e interruptores, así como metáforas gráficas. Deben elegirse vínculos

que sean apropiados para el contenido y consistentes con la heurística que

conduzca al diseño de una interfaz de alta calidad.

Barra de navegación horizontal: enlista las categorías principales de contenido

o de funciones en una barra que contiene vínculos apropiados. En general, se

enlistan de cuatro a siete categorías.

Columna de navegación vertical: enlista las principales categorías de contenido

o funciones o enlista virtualmente todos los principales objetos de contenido que

hay dentro de la webapp.

Si se elige la segunda opción, las columnas de navegación pueden “expandirse”

para que presenten objetos de contenido como parte de una jerarquía (seleccionar

una entrada en la columna original ocasiona una expansión que enlista una

segunda capa de objetos de contenido relacionados).

Pestañas: metáfora que no es más que una variación de la barra o columna de

navegación y representa categorías de contenido o funciones como pestañas

que se seleccionan cuando se requiere un vínculo.

Mapas del sitio: dan una tabla de contenido que incluye todo el contenido a fin

de navegar hacia todos los objetos y funciones contenidas dentro de la webapp.

Además de elegir la mecánica de navegación, también deben establecerse las

convenciones y ayudas apropiadas para navegar.

Por ejemplo, los iconos y vínculos gráficos deben invitar a hacer “clic” en ellos,

desvaneciendo las aristas a fin de darles una apariencia tridimensional. Debe

diseñarse retroalimentación auditiva o visual con objeto de dar al usuario una

indicación de que se ha escogido cierta opción de navegación.

Para la navegación basada en texto debe utilizarse color que indique los vínculos

de navegación y que señale aquéllos ya recorridos. Éstas son unas cuantas

11

convenciones entre las decenas que hay para el diseño y que hacen que la

navegación sea amigable para el usuario.

1.2.4 DISEÑO DEL CONTENIDO

El diseño del contenido se centra en dos tareas diferentes del diseño, cada una de

las cuales es dirigida por individuos que poseen habilidades distintas. En primer

lugar, se desarrolla una representación del diseño para los objetos del contenido y

los mecanismos requeridos para establecer una relación entre ellos.

Además, se crea la información dentro de un objeto de contenido específico. El

trabajo posterior es llevado a cabo por escritores, diseñadores gráficos y otros

actores que generan el contenido que se usará en la webapp.

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. Se enfoca en dos

asuntos de diseño diferentes:

Para los objetos de contenido, mecanismos para establecer relaciones unos con

otros (ingeniero Web) y en la representación de información dentro de un objeto

de contenido específico (la dirigen los publicistas y diseñadores gráficos).

1.2.4.1 OBJETOS DE CONTENIDO.

La relación entre los objetos de contenido definidos como parte del modelo de

requerimientos para la webapp y los objetos de diseño que representan el

contenido es análoga a la relación que existe entre las clases de análisis y los

componentes del diseño.

En el contexto del diseño de la webapp, un objeto de contenido se parece más a

un objeto de datos del software tradicional. Un objeto de contenido tiene atributos

que incluyen información de contenido específico (normalmente definido durante el

modelado de los requerimientos de la webapp) y atributos de implementación

específica que se establecen como parte del diseño.

12

1.2.5 DISEÑO ESTÉTICO

El diseño estético, también llamado diseño gráfico, es una actividad artística que

complementa los aspectos técnicos del diseño de las webapps. Sin estética, una

webapp tal vez sea funcional pero no atractiva. Con estética, una webapp lleva a

sus usuarios a un mundo que los sitúa en un nivel tanto visceral como intelectual.

1.2.5.1 ASPECTOS DE LA DISTRIBUCIÓN.

Toda página web tiene una cantidad limitada de “superficie” que se utiliza para dar

apoyo a la estética no funcional, características de navegación, contenido de

información y funciones dirigidas al usuario. El desarrollo de dicha superficie se

planea durante el diseño estético.

Igual que todos los temas de la estética, cuando se diseña la distribución de la

pantalla no hay reglas absolutas. Sin embargo, es útil considerar varios

lineamientos de la distribución general. No temer al espacio en blanco. No es

aconsejable ocupar con información cada centímetro cuadrado de una página

web.

La mezcla resultante hará difícil que el usuario identifique la información o las

características que necesita y creará un caos visual que no será agradable a los

ojos. Hacer énfasis en el contenido. Después de todo, ésta es la razón de que el

usuario esté ahí.

Organizar los elementos con una distribución que vaya desde arriba a la izquierda

hacia abajo a la derecha. La gran mayoría de usuarios de una página web la

recorrerán en forma muy parecida a como lo hacen con las hojas de un libro:

desde arriba a la izquierda hacia abajo a la derecha.

Si los elementos de la distribución tienen prioridades específicas, aquellos que

sean prioritarios deben colocarse en la parte superior izquierda de la superficie de

13

la página. Agrupar la navegación, el contenido y la función en forma geográfica

dentro de la página.

Los humanos buscamos patrones virtualmente en todas las cosas. Si en una

página web no hay patrones discernibles, es probable que la frustración del

usuario aumente (debido a la búsqueda innecesaria de la información requerida).

No aumente la superficie con la barra de desplazamiento.

Aunque es frecuente que se necesite el desplazamiento, la mayor parte de

estudios indican que los usuarios preferirían no hacerlo. Es mejor reducir el

contenido de la página o presentar en varias páginas el que sea necesario.

Cuando se diseñe la distribución hay que considerar la resolución y tamaño de la

ventana del navegador.

1.2.5.2 ASPECTOS DEL DISEÑO GRÁFICO.

El diseño gráfico toma en cuenta cada aspecto de la vista y sensación de la

webapp. El proceso de diseño gráfico comienza con la distribución y avanza hacia

la consideración de los esquemas de color globales; tipos, tamaños y estilos del

texto; uso de medios complementarios (audio, video y animación) y todos los

demás elementos estéticos de una aplicación.

1.2.6 DISEÑO DE LA INTERFAZ

Cuando el usuario interactúa con un sistema basado en computadora, se aplica un

conjunto de principios fundamentales y lineamientos generales de diseño. Aunque

las webapps plantean algunas dificultades especiales en el diseño de la interfaz de

usuario, los principios y lineamientos básicos son aplicables.

Uno de los retos del diseño de la interfaz de las webapps es la naturaleza

indeterminada del punto en el que entra el usuario. Es decir, éste puede ingresar

por una ubicación “inicial” de la webapp (la página de arranque, por ejemplo) o por

algún vínculo en cierto nivel inferior de la arquitectura de aquélla.

En algunos casos, la webapp se diseña de modo que redirija al usuario a una

ubicación inicial, pero si esto es algo indeseable, entonces el diseño debe dar

14

características de navegación en la interfaz que acompañen a todos los objetos de

contenido y de las cuales se disponga sin importar el modo en el que el usuario

ingrese al sistema.

Los objetivos de la interfaz de una webapp son los siguientes:

1) Establecer una ventana congruente en el contenido y las funciones que brinda,

2) Guiar al usuario a través de una serie de interacciones con la webapp.

3) Organizar las opciones de navegación y contenido disponibles para el usuario.

Para lograr una interfaz consistente, primero debe usarse un diseño estético. Esto

incluye muchas características, pero debe ponerse énfasis en la distribución y la

forma de los mecanismos de navegación. Para guiar la interacción del usuario,

debe establecerse una metáfora apropiada que permita al usuario tener una

comprensión intuitiva de la interfaz.

A fin de implementar las opciones de navegación, puede seleccionarse alguno de

los siguientes mecanismos:

Menús de navegación: contienen palabras clave (organizadas en forma vertical

u horizontal) que enlistan contenido o funciones clave. Estos menús se

implementan de modo que el usuario pueda elegir entre una jerarquía de

subtemas que se despliegan al seleccionar la opción principal en el menú.

Iconos gráficos: botones, interruptores y otras imágenes similares que permiten

que el usuario seleccione alguna propiedad o que especifique una decisión.

Imágenes: cierta representación gráfica que el usuario selecciona para

establecer un vínculo hacia un objeto de contenido o función de la webapp.

1.2.6.1 ASPECTOS DEL DISEÑO GRÁFICO.

El diseño gráfico toma en cuenta cada aspecto de la vista y sensación de la

webapp. El proceso de diseño gráfico comienza con la distribución y avanza hacia

la consideración de los esquemas de color globales; tipos, tamaños y estilos del

texto; uso de medios complementarios (audio, video y animación) y todos los

demás elementos estéticos de una aplicación.

15

CONCLUSIÓN

El diseño es el lugar donde se establece la calidad de la webapp. El diseño de una

webapp incluye seis etapas principales que son orientadas por la información

obtenida durante la modelación de los requerimientos.

El diseño del contenido utiliza el contenido del modelo (desarrollado durante el

análisis) como la base para establecer el diseño de los objetos del contenido. El

diseño estético (también llamado diseño gráfico) establece la vista y sensación

que el usuario final percibe. El diseño arquitectónico se centra en la estructura

general de hipermedios de todos los objetos y funciones del contenido.

El diseño de la interfaz establece la distribución y mecanismos de distribución que

definen a la interfaz de usuario. El diseño de la navegación define la forma en la

que el usuario final navega a través de la estructura de hipermedios. Y el diseño

de los componentes representa la estructura interna detallada de los elementos

funcionales de la webapp.

16

FUENTES BIBLIOGRÁFICAS

Capítulo 13: diseño de webapps. (s.f) Internet. En línea. Página web consultada el

17 de Febrero del 2015. Del sitio web:

http://www.e-softdesign.com/wp-content/uploads/2014/07/INGENIERIA-DE-

SOFTWARE-Capitulo13.pdf

Modelado de Diseño para Aplicaciones. (s.f) Internet. En línea. Página web

consultada el 17 de Febrero del 2015. Del sitio web:

http://elchrboy.blogspot.mx/2010/03/modelado-de-diseno-para-aplicaciones.html

2.1 Diseño de sitios web. (s.f) Internet. En línea. Página web consultada el 17 de

Febrero del 2015. Del sitio web: http://148.204.208.183/taw%20apuntes

%20web/Unidad%20II/2.1%20Dise%C3%B1o%20de%20sitios%20WEB.pdf

Modelado de análisis para aplicaciones web.(s.f) Internet. En línea. Página web

consultada el 17 de Febrero del 2015. Del sitio web:

http://es.slideshare.net/karinaarevalo22/modelado-de-anlisis-para-aplicaciones-

webkarina?next_slideshow=1

17