SISTEMAS Y APLICACIONES WEB (WebApps)
"La Web: tanto contenido, tan poco tiempo."
Los sistemas y aplicaciones basados en Web (WebApps) ofrecen un complejo arreglo de contenido y funcionalidad a muchos usuarios finales.
A medida que aumenta la importancia de las WebApps ha comenzado a evolucionar un enfoque IWeb disciplinado, adaptado de los principios, conceptos, procesos y métodos de la ingeniería del software.
Las WebApps son diferentes de otras categorías de software; son eminentemente de red, las gobiernan los datos y están en continua evolución. La inmediatez que dirige su desarrollo, la necesidad apremiante de seguridad en su operación y la demanda de estética, así como la entrega de contenido funcional, son factores diferenciales adicionales. Al igual que otros tipos de software, las WebApps pueden valorarse mediante una diversidad de criterios de calidad que incluyen: Facilidad de uso, funcionalidad, confiabilidad, eficiencia, capacidad de mantenimiento, seguridad, disponibilidad, escalabilidad y tiempo en el mercado.
La IWeb se describe en tres estratos: Proceso, métodos y herramientas/tecnología. El proceso genérico del marco de trabajo (comunicación, planeación, modelado, construcción y despliegue) es aplicable a la IWeb. Estas actividades se refinan en un conjunto de tareas IWeb que se adaptan a las necesidades de cada proyecto.
Formulación de Sistemas basados en Web: La formulación, una actividad de comunicación con el cliente, define el problema que resolverá una WebApp. Se identifican las necesidades del negocio, las metas y objetivos del proyecto, las categorías de usuario final, las funciones y características principales, y el grado de interoperabilidad con otras aplicaciones. Mientras más información detallada y técnica se adquiera, la formulación se convierte en análisis de requisitos. El contenido controla inherentemente las WebApps, por lo tanto, una función del equipo IWeb se debe enfocar en la generación o recopilación del contenido, el cual abarca un amplio abanico de objetos de datos. Los desarrolladores/proveedores de contenido pueden provenir de diversos ámbitos (no de software).
Un ingeniero de sistemas Web se involucra en un amplio rango de actividades durante el desarrollo de una WebApp, que incluyen la obtención de requisitos, el modelado de análisis, el diseño arquitectónico, de navegación y de interfase, la implementación de la WebApp y las pruebas. También debe tener una sólida comprensión de las tecnologías de componentes, de las arquitecturas Cliente/Servidor, de HTML/XML y de tecnologías de bases de datos, y un conocimiento práctico de los conceptos multimedia, de las plataformas hardware/software, de la seguridad de redes y de aspectos de apoyo a sitios Web.
Modelado de Análisis para aplicaciones Web: El análisis de una potencial aplicación Web se enfoca en tres preguntas importantes: 1) ¿Qué información o contenido se presentará o manipulará? 2) ¿Qué funciones realizará el usuario final? 3) ¿Qué comportamientos exhibirá la WebApp conforme presente contenido y realice funciones?. Las respuestas se representan como parte de un modelo de análisis que abarca una diversidad de diagramas UML.
Cuatro actividades de análisis contribuyen a la creación de un modelo de análisis completo: El análisis de contenido identifica todo el espectro de contenido que proporcionará la WebApp, describe los objetos correspondientes que serán incorporados; el análisis de interacción describe la forma en la que el usuario intractúa con la WebApp. Este modelo se construye con casos de uso, diagramas de secuencia y diagramas de estado para describir la "conversación" entre el usuario y la WebApp. Además, se construye un prototipo de la interfaz que auxilie en el desarrollo de la plantilla y los requisitos de navegación; el análisis de funciones define las operaciones de clase que emplean el diagrama de actividad UML y que se aplicarán al contenido de la WebApp. También describe otras funciones de procesamiento independientes del contenido, pero necesarias para el usuario final; y el análisis de la configuración describe el ambiente de la infraestructura en la que reside la WebApp, tanto en el lado del servidor como en el del cliente del sistema. El análisis de relación-navegación identifica las relaciones entre el contenido y los elementos funcionales, definidos en el modelo de análisis, y establece requisitos para definir vínculos de navegación apropiados a través del sistema.
"La navegación no sólo es la acción de saltar de página a página, sino la idea de moverse a través de un espacio de información."
Modelado de Diseño para aplicaciones Web: La calidad de una WebApp se introduce durante el diseño. Para lograr los atributos de calidad, un buen diseño WebApp debe poseer simplicidad, consistencia, identidad, robustez, navegabilidad, apariencia visual y compatibilidad. El diseño de la interfaz describe la estructura y organización de la interfaz del 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.
El diseño estético, también llamado diseño gráfico, describe la "apariencia y la percepción" de la WebApp e incluye esquemas de color, plantilla geométrica, tamaño de texto, fuente y ubicación, el uso de gráficos y decisiones estéticas relacionadas. Un conjunto de lineamientos de diseño gráfico proporciona la base para un enfoque de diseño.
El diseño de contenido comienza con la representación de los objetos de contenido, sus asociaciones y relaciones. El diseño de arquitectura identifica la estructura hipermedia global para la WebApp y abarca tanto la arquitectura de contenido como la de WebApp. Varios autores sugieren una arquitectura de diseño en tres capas que desacople la interfaz de la navegación y del comportamiento de la aplicación, y argumentan que mantener la separación de la interfaz, aplicación y navegación simplifica la implementación y mejora la reutilización. El patrón de diseño arquitectónico modelo-vista-controlador (MVC) es uno de varios modelos de infraestructura WebApp sugeridos para desacoplar la interfaz del usuario de la funcionalidad y el contenido de información de la WebApp.
El diseño de navegación
representa el flujo de navegación entre los objetos de contenido y para
todas las funciones de la WebApp. Conforme el diseño se lleva a cabo se
define la sintaxis de navegación.
Entre muchas posibles opciones están:
> Vínculo de navegación individual: Vínculos basados en texto,
íconos,
botones e interruptores, y metáforas gráficas.
> Barra de navegación horizontal: Lista de las principales
categorías de contenido o funcionales en una barra que contiene vínculos
adecuados.
> Columna de navegación vertical: 1) Lista de las principales
categorías de contenido o funcionales, o 2) lista de virtualmente todos
los principales objetos de contenido dentro de la WebApp.
> Pestañas: Una metáfora que no es más que una variación de la
barra o columna de navegación, que representa las categorías de contenido
o
funcionales como marcas que se seleccionan cuando se requiere un vínculo.
> Mapas de sitio: Proporcionan una tabla de contenido incluyente
para la navegación hacia todos los objetos de contenido y funcionalidad de
la
WebApp.
El diseño de componentes desarrolla la lógica de procesamiento detallada que se requiere para implementar los componentes funcionales de la WebApp.
El método de diseño hipermedia orientado a objetos (MDHOO) es uno de varios métodos propuestos para el diseño WebApp. El MDHOO sugiere un proceso de diseño que incluye diseño conceptual, diseño de navegación, diseño abstracto de la interfaz e implementación.
Categorías de Aplicaciones Web
- Informativa
- Personalizable
- Descarga
- Interactiva
- Entrada del usuario
- Orientada a transacciones
- Orientada a servicios
- Portal
- Acceso a una BD
- Almacén de datos.
"El problema de la navegación en el sitio Web es conceptual, técnico, espacial, filosófico y logístico. Consecuentemente, las soluciones tienden a pedir combinaciones de arte, ciencia y psicología organizacional improvisadas y complejas." (Tim Horgan).
http://www.skype.com
http://www.sqlsoftware.com.co
Sitios Web bien diseñados
En ocasiones, la mejor forma de comprender el buen diseño de las WebApps
es observar unos cuantos ejemplos. En su artículo "The Top Twenty
Web Design Tips", Marcelle Toor (http://www.graphic-design.com/Web/feature/tips.html)
sugiere algunos sitios Web como ejemplos de buen diseño gráfico:
http://www.primo.com
http://www.workbook.com
http://www.RKDINC.com
http://www.commarts.com/career/index.html
Ejercicios:
-
Elaborar una lista de "riesgos" que serían probables durante el desarrollo de una nueva aplicación de comercio electrónico que se diseña para vender teléfonos celulares y servicios directamente a través de la Web.
-
¿Qué actividades debe realizar un "Web master"?
-
Desarrolle uno o más casos de uso que describan un comportamiento de usuario específico para una WebApp.
-
Diseñar una interfaz prototipo para la WebApp del sistema de CINEMARK.
-
Usted es el diseñador WebApp para el Sistema de Aprendizaje Virtual de la Universidad de Ibagué - SAVI. Su intención es implementar un "motor de aprendizaje" basado en Internet que le permitirá entregar contenido del curso a los estudiantes. El motor de aprendizaje ofrece la infraestructura básica para entregar contenido de aprendizaje de cualquier materia (diseñadores de contenido prepararán el contenido adecuado). Desarrolle un diseño de interfaz prototipo para el motor de aprendizaje.
-
¿Cuál es el sitio Web estéticamente más agradable que usted ha visitado? ¿por qué?
-
Explique la arquitectura de diseño MVC.
-
¿Cuál es la diferencia entre sintaxis de navegación y semántica de navegación?
-
Explicar el patrón de diseño hipermedia orientado a objetos (MDHOO).
-
Investigar cómo probar Aplicaciones Web.
