Diseño para

aplicaciones web
Unidad 5
 Introducción

 Cada vez es más necesario adaptar un software o sistemas

online a la lógica de negocios o clientes específicos.
 Por este motivo, no sólo es necesario que las empresa
disponga de una web para gestionar todas las actividades
que requiere un negocio.
 Gracias a experiencias de distintas paginas web se pueden
ofrecer soluciones adaptadas a las necesidades de los
clientes utilizando las tecnologías mas acordes y la estética
perfecta que el diseño de esta sea el mas adecuado.
 Introducción

 ¿Qué es el diseño y desarrollo de aplicaciones web?

 El diseño de aplicaciones web consiste en implementar sus

necesidades, objetivos o ideas en Internet utilizando las
tecnologías más idóneas según su proyecto.
 Introducción
 Las aplicaciones web ofrecen servicios a los usuarios de
Internet que acceden utilizando un navegador web como
Explorer, Firefox o Safari entre otros, dirigiéndose a una
dirección de Internet donde obtendrán los servicios que
buscan.
 Introducción

 Algunas de las tecnologías que se utilizan para el

diseño de aplicaciones son:
 Microsoft .NET,
 HTML y XHTML,
 CSS
 Flash
 PHP
 Flash entre otras.
5.1 TEMAS DE DISEÑO PARA
INGENIERÍA WEB
La ingeniería Web es multidisciplinar y reúne diversos aspectos de
diferentes áreas, como:
• Arquitectura de la información
• Ingeniería de hipermedia/hipertexto
• Ingeniería de requisitos
• Diseño de interfaz de usuario
• Usabilidad
• Diseño gráfico y de presentación
• Diseño y análisis de sistemas
• Ingeniería de software
• Ingeniería de datos, indexado y recuperación de información
• Testeo
• Modelado y simulación
• Despliegue de aplicaciones
• Operación de sistemas
• Gestión de proyectos.
Diseño de calidad de una WebApp

 Al momento de hablar de calidad en una Webapp,

existe la gran necesidad de metodologías efectivas
para la obtención de esta. Actualmente, hay dos
vertientes de metodologías de desarrollo para la Web:

1. La comunidad de Ingeniería de Software

2. La comunidad de Hipermedia.

 Estas metodologías carecen sin embargo de métricas

que puedan ser aplicadas a los modelos intermedios (Ej.
Modelo de Objetos, Modelo Navegacional) utilizados en
el proceso de desarrollo orientado a la Web.
 Otras características de diseño de calidad Web son:
 Seguridad
 Disponibilidad
 Escalabilidad
 Tiempo en el mercado

Metas de diseño
 Una de las metas de diseño de una WebApp es abarcar lo
siguiente:
 Simplicidad
 Consistencia
 Identidad
 Robustez
 Navegabilidad
 Apariencia visual
 Compatibilidad
5.2 PIRÁMIDE DEL DISEÑO DE
INGENIERÍA WEB
 La pirámide central representa el sitio web.

 Todo web tiene una finalidad concreta, un vértice que debe estar muy bien definido
desde la planificación del proyecto.

 En la base de todo sitio web existen dos vértices, la función (desarrollo) y la forma
(diseño). Una balanza al 50% donde debe existir un equilibrio perfecto entre el aspecto y
la funcionalidad. La función sin la forma resulta aburrida y es necesario inspirar al
usuario. Por el contrario si un sitio web resulta atractivo pero su funcionalidad es
limitada, el usuario acabará por irse frustrado.

 La base propiamente dicha de cualquier web es el contenido(información que alberga).

Haciendo una metáfora diría que:

“El contenido es el rey y este debe estar bien protegido por sus tropas (diseño / desarrollo).”

Aquí juega un papel crucial la arquitectura de la información.

 La usabilidad debe ir implícita en la base de la pirámide (diseño, contenido y desarrollo).

 Y todo este mundo triangular se encuentra inmerso en una enorme esfera formado por
millones de usuarios. Son las personas quien usan los sitios web, no los navegadores,
ni los buscadores. Así pues se debe pensar en ellos desde la base hasta la cúspide a la
hora de afrontar cualquier proyecto web. Solamente los usuarios decidirán si se alcanza
la finalidad marcada en el punto inicial.
 El diseño IWeb conduce a un modelo que contiene la
mezcla adecuada de estética, contenido y
tecnología, la cual varía dependiendo de la
naturaleza de la WebApp y, como consecuencia, las
actividades de diseño también varían.
 5.3 DISEÑO DE LA INTERFAZ
DE LA WEBAPP
 Describe la estructura y organización de la interfaz de usuario. Incluye
una representación de la plantilla de pantalla, una definición de los
modos de interacción y una descripción de los mecanismos de
navegación.

Toda interfaz de usuario 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.

 Uno de los principales retos de la interfaz de las webApps, es
trabajar con la naturaleza indeterminada del punto en el que
entra el usuario.

 Los objetivos de la interfaz de la webApp son:

 Establecer una ventana congruente con el contenido y las funciones que

brinda
 Guiar al usuario a través de una serie de interacciones con la webapp
 Organizar las opciones de navegación y contenido disponibles para el
usuario
 5.4 Diseño estético

 También llamado diseño gráfico, describe la apariencia y

sentimiento de la WebApp.

 Incluye esquemas de color, plantilla geométrica, tamaño

de texto, fuente y ubicación, uso de gráficos y decisiones
estéticas relacionadas.

 Es un esfuerzo artístico que complementa los aspectos

técnicos de la ingeniería web. El diseño grafico considera
cada aspecto de la presentación y percepción de una
WebApp.

 El proceso de diseño grafico 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 audiovisuales complementarios y todos los demás
elementos estéticos de una aplicación.
 Sin el diseño gráfico probablemente la aplicación web sea funcional pero no
atractiva, para llegar a cabo ésta tarea, es necesario revisar las jerarquías de
usuario definidas que ayude a decidir el diseño estético según lo que
esperan los usuarios hacia los que está dirigido.

 Es preciso, revisar aspectos de distribución, puesto que siempre se tiene un

espacio limitado, características de navegación, contenido de información y
funciones dirigidas al usuario. Cuando se diseña la estética no hay reglas
absolutas, sin embargo, resulta útil considerar lineamientos generales de la
distribución general como:
 No tema al espacio en blanco
 Hacer énfasis en el contenido
 Organizar elementos con una distribución que vaya desde arriba a
izquierda, hacia abajo a la derecha.
 Agrupar la navegación, el contenido y función en forma geográfica
dentro de la página.
 No aumentar la superficie para que el usuario utilice la barra de
desplazamiento.
 Considerar la resolución y tamaño de la ventana del navegador.
 Considerar el uso de pantallas tipo para que mantener las pantallas
homogéneas.
5.5 Diseño del contenido

 Define la plantilla, la estructura y el bosquejo de todo

el contenido que se presenta como parte de la
WebApp. Además el diseño de contenidos se ocupa
de representar la información dentro de un objeto.
 El diseño de contenido lo llevan a cabo un equipo
multidisciplinario.

 Primero, se desarrolla la representación del diseño para los

objetos de 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.

 Un siguiente trabajo, lo llevan a cabo escritores,

diseñadores gráficos y otros generadores de contenido de
la webApp.
5.6 Diseño arquitectonico
 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. Debe identificarse la arquitectura de contenido y la
arquitectura de la webApp.

 La arquitectura de contenido se centra en la estructura de los

objetos de contenido para la presentación y navegación, su
importancia radica en denotar estructuras que produzcan una
mejor organización, etiquetado, navegación y búsqueda de
objetos de contenido.

 La arquitectura de la webApp hace referencia a la forma en

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. Hace
referencia a una infraestructura que permite que un
sistema cumpla con sus objetivos.
 5.7. Diseño de navegación
 Con los elementos anteriores definidos es necesario definirse
las rutas de navegación que permitan a los usuarios
acceder al contenido y a las funciones de la webapp. Esto
se logra con:

 Identificando la semántica de navegación, que utiliza la

jerarquía de usuarios y casos de uso relacionados para cada
categoría de usuario. Considerando que cada actor puede
utilizar la webapp de forma diferente con lo que se obtienen las
unidades semánticas de navegación.

 Identificando la sintaxis de navegación que corresponde a

la mecánica de implementación para cada USN. Para lo que
se tiene diferentes opciones como: vínculos individuales, barras
de navegación horizontal, columna de navegación vertical,
pestañas, mapas de sitio, etc. Además debe establecerse las
convenciones y ayudas apropiadas para navegar.
 5.8. Métricas de diseño para
webapps
 Proporciona a los Ingenieros Web un indicador de calidad en
tiempo real.
 Un conjunto de medidas y métricas para webapps proporciona
respuestas cuantitativas a las siguientes preguntas:
 ¿ La interfaz de usuario promueve usabilidad ?
 ¿ La estética de la webapps es apropiada para el dominio de
la aplicación y agrada al usuario ?
 ¿ El contenido se diseño de tal forma que imparte mas información con
menos esfuerzos?
 ¿La navegación es eficientes y directa ?
 ¿ La arquitectura de la webapps se diseño para alojar las metas y
objetivos especiales de los usuarios de la webapps, la estructura de
contenido y funcionalidad , y el flujo de navegación requerido para
usar el sistema de manera efectiva ?
 ¿Los componentes se diseñaron de manera que se reduce la
complejidad procedimental y se mejora la exactitud, la confiabilidad y
el desempeño?
 A continuación se presenta una muestra respectiva de métricas de
diseño para webapps ,es importante observar que muchas de
ellas todavía no se validad , por lo que deben usarse juiciosamente.
MÉTRICAS DE INTERFAZ.
 Para webapps pueden considerarse las siguientes medidas :
 Corrección de plantilla .
 Complejidad de plantilla .
 Tiempo de reconocimiento
 Esfuerzo de escritura
 Carga de memoria , entre otras mas.

MÉTRICAS ESTÉTICAS
 El diseño estético se apoya en el juicio cuantitativo y no es sensible
a medición ni a métricas. Se propone un conjunto de medidas que
pueden ser útiles para valorar el impacto de diseño estético.
EJEMPLO:
 Conteo de palabra
 Conteo de vinculo
 Tamaño de pagina
 Conteo de color
 Conteo de fuente , entre otras .
MÉTRICAS DE CONTENIDO
 Se enfocan en la complejidad de contenido y en los grupos de
objetos que se organiza en paginas.
Ejemplo .

 Espera de pagina
 Complejidad de pagina
 complejidad de gráfico, etc.

MÉTRICAS DE NAVEGACIÓN
 Abordan la complejidad del flujo de navegación, en realidad
son útiles para aplicaciones web que no incluyan vínculos y
paginas de manera dinámica.
Ejemplo:

 Complejidad de vinculación de pagina.

 Conectividad.
 Densidad de conectividad