Diseño para aplicaciones web. Jessica Marisol Rico Ruvalcaba Erika del Carmen Peláez Dueñas Heber Carlos Loera Sánchez LETIC – 7°

 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

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. ¿Qué es el diseño y desarrollo de aplicaciones web?

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

Tipos de Diseño de Web : Diseño estético Diseño del contenido Diseño arquitectónico Diseño de navegación

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.

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 web app. * Organizar las opciones de navegación y contenido disponibles para el usuario.

* 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. Diseño estético:

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.

Diseño arquitectónico: * 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.

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 *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.

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?

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