El documento describe los diferentes enfoques y consideraciones para el diseño de aplicaciones web (webapps). Explica que el diseño establece la interfaz de usuario y la estructura arquitectónica de la webapp. También define el contenido y funcionalidad, y planifica la navegación. El diseño busca crear una webapp de calidad mediante atributos como la simplicidad, navegabilidad, atractivo visual, seguridad, disponibilidad y escalabilidad.

1. 14.Diseño de WebApps
Ramiro Estigarribia Canese
Link a la presentación

2. Enfoques del Diseño de WebApps.
Existen 2 enfoques de diseño:
➔ El ideal artístico de expresarse a sí mismo.
➔ El ideal de la ingeniería de resolver un problema.
En la primera década de desarrollo de la web (1995-2005),
muchos elegían el ideal artístico.
Después evolucionó a partir de la visión artística que surgió de
la construcción de webapps.

3. ¿Qué es el Diseño de WebApps?
➔ Establece la vista y sensación de la webapp, creando la
distribución estética de la interfaz de usuario.
➔ Define la estructura arquitectónica de la webapp.
➔ Desarrolla el contenido y la funcionalidad que residen en la
arquitectura y planeando la navegación que ocurre dentro de
la webapp.

4. ¿Por qué es importante?
➔ Porque 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.
➔ En el diseño se establece la calidad de la webapp.

5. Calidad del Diseño de WebApps
➔ El diseño es la actividad que genera un producto de calidad.
¿Cómo es la calidad en una WebAPP?
➔ Toda persona que utiliza internet, se ha formado una
opinión sobre lo que es una “buena” webapp.
Los puntos de vista individuales varían mucho:
➔ A muchos usuarios les gustan las animaciones y otros
prefieren texto simple.

6. ¿Cómo se percibe la calidad en una WebApp?
➔ Cinco atributos principales:

7. Atributos Adicionales de Calidad: Seguridad
➔ Las webapps se han integrado con bases de datos críticas.
➔ Las aplicaciones de comercio electrónico almacenan
información delicada para el cliente.
➔ La medida clave de la seguridad de una webapp y de su
ambiente de servidor es su capacidad para rechazar los
accesos no autorizados y detener un ataque proveniente del
exterior.

8. Atributos Adicionales de Calidad: Disponibilidad
➔ Inclusive la mejor WebApp será un fracaso si no se está
disponible todo el tiempo.
➔ La disponibilidad es la medida del tiempo que una webapp
puede utilizarse. El usuario final espera que las webapps se
hallen disponibles las 24 horas de los 365 días del año.
➔ Además es importante mantener la mayor compatibilidad
con navegadores y plataformas.

9. Atributos Adicionales de Calidad: Escalabilidad
➔ Una webapp puede crecer para recibir a muchos usuarios.
➔ La webapp y los sistemas deben ser capaces de manejar
una variación del volumen o su rendimiento se desplomará.
➔ No basta construir una webapp exitosa:
También es importante que pueda asimilar la carga del éxito
(muchos más usuarios).

10. Metas del Diseño de WebApps: Simplicidad
➔ La estética y la navegación deben ser consistentes con el
dominio de la aplicación que se va a crear.
➔ La web de un músico sin duda tendrá un aspecto distinto
que una webapp de un banco.
➔ Usted (y quienes contribuyan al diseño) debe trabajar para
establecer la identidad de la webapp por medio del diseño.

11. Metas del Diseño de WebApps: Navegabilidad
➔ Debe estar diseñada de forma que sea intuitiva y predecible.
Es decir, el usuario debe comprender cómo moverse sin
tener que buscar instrucciones para la navegación.
➔ Nada es más frustrante que intentar encontrar el vínculo
apropiado entre muchas opciones.
➔ También es importante colocar los vínculos y funcionesen
una ubicación predecible en cada página web.

12. Metas del Diseño de WebApps: Atractivo Visual
➔ De todas las categorías de software, las aplicaciones web
son indiscutiblemente las más visuales, dinámicas y
estéticas.
➔ El atractivo visual radica sin lugar a dudas en los ojos del
espectador, pero muchas características (distribución de la
interfaz, coordinación del color, balance del texto, imágenes
y otros medios) aumentan el atractivo visual.

13. Diseño de la Interfaz.
➔ Uno de los retos 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 inicio).
➔ El diseño debe dar características de navegación en la
interfaz que acompañen a todos los objetos sin importar
el modo en el que el usuario ingrese.

14. Recomendaciones de Navegación
1. Menús de navegación: contienen palabras clave que listan
contenido o funciones clave.
2. Iconos gráficos: botones, interruptores y otras imágenes que
permiten al usuario realizar acciones.
3. Imágenes: representación gráfica que el usuario selecciona
para establecer un vínculo hacia un objeto de contenido o
función de la webapp.

15. Diseño de la Estética
➔ El 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 será funcional pero no atractiva.
➔ Para llevar a cabo con eficacia, hay que volver a la jerarquía del
usuario desarrollada como parte del modelo de requerimientos
(véase el capítulo 5) y preguntar:
¿Quiénes son los usuarios y qué vista desean tener?

16. Diseño de Contenido.
➔ Define la distribución de todo el contenido que se presenta
como parte de la webapp, y establece las relaciones entre los
objetos del contenido.
➔ El diseño del contenido comienza con la representación de sus
objetos, así como las asociaciones y relaciones entre ellos.

17. Diseño Arquitectónico
➔ Identifica la estructura general de la webapp, e incluye la
arquitectura a nivel de red.
➔ La arquitectura describe una infraestructura que permite
que la aplicación cumpla con sus objetivos de negocios.

18. Resumen y Conclusiones
➔ Para lograr calidad, un buen diseño debe tener:
consistencia, robustez, navegabilidad y atractivo visual.
➔ El diseño describe el aspecto de la webapp, e incluye
esquemas de color, tamaño del texto, empleo de
imágenes y otras decisiones relacionadas con la estética.
Cuestionario