Arquitectura de Aplicaciones Web - Capa de Presentación

Introducción

La capa de presentación esta formada por un conjunto de componentes que implementan la interfaz de nuestra aplicación, mostrando información y manejando las interacciones del usuario.

La base de la interfaz de usuario de una aplicación Web es el lenguaje de marcado de hipertextos (HTML o Hypertext Markup Language). Este lenguaje, derivado del XML, permite mostrar texto, imágenes, vídeos y otras formas de interacción con el usuario desde un programa denominado navegador Web (Web browser). El navegador Web se encarga de interpretar este lenguaje descargado desde el servidor Web y mostrarlo en la pantalla del ordenador de una forma coherente, funcional y atractiva para los usuarios.

Componentes de la capa de presentación

Los componentes que forman la capa de presentación se pueden clasificar en dos grandes grupos:

Componentes de presentación: Componentes de la interfaz que permiten a los usuarios interactuar con la aplicación Web. Renderizan (dibujan) y formatean la información que se quiere presentar así como capturan y validan las entradas de datos. Ejemplos clásicos son los botones, las etiquetas, los hipervínculos, los cuadros de texto, las tablas, etc. La mayoría de estos componentes vienen incluidos dentro del propio lenguaje HTML y otros se implementan en lenguajes de scripting para el navegador como Javascript.
Componentes de proceso. Los componentes de proceso sincronizan y orquestan interacciones de usuario complejas. Estos componentes por lo general se implantan utilizando un Framework de JavaScript como Sencha o jQuery y pueden contener patrones de interacción embebidos (como el vista controlador) que simplifiquen el desarrollo y mantenimiento de interacciones complicadas por parte del usuario.

Factores a considerar al desarrollar la capa de presentación

Determinar como se van a presentar los datos. Seleccione el formato de su capa de presentación y decida como presentar los datos en su interfaz de usuario (en una columna, en dos columnas, con banners, con galerías de imágenes, etc.)
Elija una estrategia de validación de datos. Apóyese en las facilidades que ofrecen tanto el HTML como JavaScript para proteger su aplicación Web de entradas de datos no deseadas
Determine su estrategia de lógica de negocio. Teniendo claro que es lógica de negocio o proceso de datos y que es presentación de datos, podemos desacoplar (separar) las capas
Establezca una estrategia de comunicación con otras capas. Si su aplicación tiene una arquitectura multicapas, elija como la capa de presentación se va a comunicar con la capa de negocios o con la capa de datos. Un patrón o modelo vista controlador puede simplificar este diseño.

Consideraciones de diseño de la capa de presentación

Utilice patrones relevantes en el diseño de la capa de presentación. Los patrones de diseño simplifican la implementación y mantenimiento de la capa de presentación y aportan la robustez de soluciones probadas y de éxito en la industria
Diseñe siempre separando entre componentes de presentación y componentes de proceso. Cree componentes para renderizar y mostrar los datos y cree componentes para orquestar y sincronizar las interacciones complejas del usuario
Considere las buenas prácticas en el diseño de interfaces de usuario (Human Interface guidelines). Aplique y ajuste estas prácticas generales a como se realizan en su organización e incluso en su propio país. No es lo mismo una página en chino mandarían que una página en alemán o en árabe. La información se lee de forma diferente, propia del lenguaje en que la estamos presentando. Un alemán leerá como todos los occidentales de izquierda a derecha, mientras que un árabe lo hará al revés. Considere los logotipos, eslóganes y colores corporativos propios de su organización, así como los colores adecuados para el texto y los controles en dependencia de la frecuencia de uso y destino de la aplicación Web a crear. No son los mismos colores ni imágenes los de una página Web para un casino o venta de juegos de PlayStation que los de Wikipedia, por ejemplo, donde quizás tenemos que pasar horas consultando información.
Apóyese en encuestas, cuestionarios y entrevistas para conocer el tipo de presentación que el usuario de negocio demanda y ajuste el diseño lo más posible a sus requerimientos, necesidades y gustos

Problemas comunes en el diseño de la capa de presentación

A continuación se enumeran un conjunto de problemas comunes que se presentan a la hora de diseñar la capa de presentación de una aplicación Web y que deben ser revisados por los arquitectos y los desarrolladores.

Categoría	Problemas comunes
Cache	Guardar en cache datos que no se van a reutilizar Guardar datos sensibles sin encriptar Selección incorrecta del almacenamiento para caché Selección de un mecanismo de caché incorrecto cuando la aplicación está desplegada en una granja de servidores Web Asumir que un dato está en caché cuando realmente no lo está
Composición de la interfaz Web	No considerar el uso de patrones de diseño y frameworks que soporten vistas y páginas dinámicas en tiempo de ejecución Uso de componentes que tengan dependencias de servicios o clases auxiliares Fallo al no tratar correctamente los eventos entre componentes (patrón de publicación/suscripción) Fallo al no desacoplar correctamente los módulos que conforman la aplicación
Tratamiento de excepciones/errores	Fallo al no tratar excepciones no manejadas Fallo al eliminar recursos o el estado de la aplicación después de una excepción Mostrar información sensible al usuario como parte de un mensaje de error Uso de excepciones personalizadas cuando no son necesarias Captura de excepciones que no vamos a tratar
Entrada de datos	Fallo al no diseñar una entrada de datos intuitiva Fallo al implementar una entrada de datos muy compleja en una misma página Fallo al diseñar para accesibilidad Fallo al diseñar para diferentes pantallas y resoluciones (pueden no mostrarse controles) Fallo al diseñar para diferentes tipos de pantallas y dispositivos (pantallas táctiles, lápiz o ratón)
Disposición de componentes en la página	Utilizar una disposición de elementos inapropiada para una página Web Fallo al utilizar componentes y tecnologías Implementar una interfaz inapropiada para un flujo de trabajo (workflow) Fallo al soportar localización Fallo al soportar globalización
Navegación	Navegación inconsistente Lógica duplicada a la hora de tratar eventos de navegación Fallo al manejar estado en un asistente (wizard)
Tratamiento de peticiones de usuario	Bloquear la interfaz de usuario durante largos períodos de tiempo Mezclar lógica de proceso con lógica de presentación Selección de un patrón incorrecto a la hora de tratar las peticiones de usuario
Experiencia de usuario	Mostrar mensajes al usuario que no le ayudan con el problema que tiene Falta de respuesta o feedback al usuario cuando ejecuta una acción Interfaces de usuario muy complejas Falta de personalización de la interfaz de usuario Diseño de una interfaz ineficiente
Componentes de presentación	Crear componentes a mediad que no son necesarios Fallo al mantener el estado en un patrón vista controlador Selección inadecuada de componentes de la capa de presentación
Componentes de proceso	Implementar componentes de proceso innecesarios Implementación de patrones de diseño incorrectos Mezclar lógica de presentación con lógica de proceso de la interfaz de usuario
Validación	Error al validar las entradas de datos Hay que validar en el servidor y en la capa de presentación, no solo en esta última Fallo en el tratamiento de errores de validación No identificar las reglas de negocio apropiadas para las validaciones Fallo al no guardar en un log los errores de validación