Guía para el desarrollo de aplicaciones WEB, basada en MoProSoft. - Proceso sugerido para el desarrollo de sistemas WEB -

Secciones:

1.- Introducción
2.- Estructura
3.- Características de los sistemas WEB
4.- Dificultades en los desarrollos de sistemas WEB
5.- Involucrados en el desarrollo de un sistema WEB
6.- Proceso sugerido para el desarrollo de sistemas WEB
7.- Técnicas útiles en el desarrollo WEB
T1 Análisis de requerimientos enfocado a objetivos
T2 Prototipos Grises
T3 Prototipos operativos
T
4 Técnicas para modelación
T5 Uso de patrones
T6 Técnicas para el diseño de arquitecturas
T7 Técnicas de Diseño gráfico
T8 Técnicas para el diseño de navegación
T9 Técnicas para presentar la información
T10 Técnicas para probar las aplicaciones WEB

8.- Productos
Referencias bibliográficas
Referencias a aplicaciones
Sitios de interés



7.- Técnicas útiles en el desarrollo WEB

Si bien el proceso general permanece prácticamente inalterado en cuanto a sus etapas requerimientos, diseño, construcción y pruebas. En el área de técnicas y/o metodologías específicas para alguna de las etapas encontramos varias propuestas.




T1 Análisis de requerimientos enfocado a objetivos

El desarrollo WEB involucra información, navegabilidad, estética y personas de diversas disciplinas además de la funcionalidad fundamental en todo sistema de software. En [7] se propone el levantamiento de requerimientos enfocado a objetivos. Consiste en términos generales en listar a los diversos involucrados y sus objetivos. Posteriormente descomponer dichos objetivos en sub-objetivos que si son complementarios se marcan con –y- (AND) y si son alternativos se marcan con – ó - (OR). Después se marcan las relaciones entre los diversos arboles y/o ramas con líneas punteadas. Los objetivos contradictorios se marcan con una línea cruzada con una X. “Las raíces de los árboles son los objetivos mientras que las hojas son los requerimientos” [7, pag:6]. Las hojas o requerimientos se pueden catalogar después como:

Content (labeled with C); -Contenido-

Structure of Content (SC); -Estructura del contenido-

Access Paths to Content (A); -Ruta a contenido-

Navigation (N); -Navegación-

Presentation (P); -Presentación-

User Operation (U); -Operación del usuario-

System Operation (O); -Operación del sistema-

Interaction (I). -Interacción-

El árbol resultante del ejemplo utilizado en [7] se muestra en la figura 2-4.

Los requerimientos resultantes se pueden listar y priorizar para resolver los que sea posible de acuerdo al alcance del proyecto. Los conflictos se resuelven haciendo propuestas y discutiendo con los involucrados.

Este procedimiento es inicialmente poco específico. Esto es una ventaja, en los desarrollos WEB, pues no obliga a hacer decisiones de diseño cuando aun no se tienen todos los elementos necesarios. Por su propia definición y proceso el levantamiento de requerimientos enfocado a objetivos también obliga a considerar a todos los involucrados en el sistema. En sistemas WEB estos suelen ser más que únicamente el cliente y los usuarios. Adicionalmente una vez terminado el análisis de los objetivos proporciona datos tanto de los requerimientos funcionales como de la información e inclusive varios requerimientos no funcionales. Es importante tener en cuenta que esta técnica permite resolver de mejor manera las dificultades que causan usuarios con objetivos difusos o muy generales. Millones de cibernautas acceden a sitios sin más objetivo que ver que encuentran. En los sistemas tradicionales este tipo de usuario es muy improbable pero en los sistemas WEB es más bien la norma.




T2 Prototipos Grises

La comunicación no es solo una de las principales funciones de un sistema WEB, es también uno de los principales problemas durante el su desarrollo. En [6] Eric Holter describe la metodología de trabajo usada en su empresa Newfangled WEB Factory. Bajo la premisa de evitar la ilusión de comunicación se plantea un esquema de trabajo cuyo eje conductor es la elaboración de prototipos denominados grises.

Los prototipos grises son páginas con ligas funcionales y contenidos pero que se enfocan únicamente en la información que cada página o sección debe contener. El calificativo gris, color que la mayoría de las personas no encuentra atractivo, es intencional y se da por la ausencia de todo diseño gráfico. Estos prototipos permiten que clientes y desarrolladores se enfoquen en los contenidos sin distractores. El trabajo y los avances se hacen tangibles y evaluables inmediatamente en los prototipos y evitan ambigüedad y la ilusión de comunicación que pueden dar los términos y descripciones abstractas utilizados cuando no se hacen prototipos. Son también instrumentos fáciles de hacer y que sirven de base para el producto final.




T3 Prototipos operativos

Los e-prototipos o prototipos operativos son un nuevo paradigma que aborda dos de los principales problemas de los desarrollos WEB, el contacto con el cliente y el cambio constante. Son descritos en [5] y básicamente consisten en elaborar prototipos funcionales que se pongan en operación para que los usuarios reales puedan probarlos y dar sus opiniones. En el software tradicional también se llegan a usar algunas versiones beta que son distribuidas a usuarios selectos, con este fin. Pero la naturaleza técnica de estos sistemas hace difícil la implementación de este esquema como principal estrategia de desarrollo. En la WEB por el contrario es fácil y natural; se puede trabajar directamente con los que serán los usuarios reales y los cambios se pueden implementar fácil y constantemente. La bidireccionalidad propia del medio también hace extremadamente sencilla la retroalimentación. Los prototipos generalmente pueden ser reaprovechados parcial o totalmente. Los usuarios no sugieren o expresan necesidades supuestas sino reales, fruto de su propia experiencia con el producto.

El desarrollo por e-prototipos se basa en un paradigma de evolución constante del software en ciclos cortos. Esto se ajusta a las demandas del mercado WEB de cambio constante. Además establece comunicación directa con los usuarios, que generalmente no se pueden consultar en otros modelos de desarrollo WEB. Los prototipos operativos son ya ampliamente utilizados por diversas compañías de gran éxito en Internet. Los que podemos identificar son aquellos sistemas con la leyenda BETA como en su momento fueron por ejemplo G-Mail o Yahoo-Groups. Pero puede haber muchos otros sistemas que omitan este calificativo y sin embargo operen bajo el esquema de recopilación de requerimientos directos de los usuarios finales por medio de correos, foros, etc.




T4 Técnicas para modelación

Aun no existe un estándar para modelar los sistemas WEB. Existen muchas propuestas como son OOWS[2], WebML, UWE, entre otros. Estos lenguajes no son idénticos pero en general todos siguen la misma estrategia y paradigmas. Toman como base UML y lo extienden para poder modelar también los contenidos y la navegación. En los ejemplos del apéndice se puede encontrar un sistema modelado con OOWS.




T5 Uso de patrones

En la sección de arquitecturas de [1] se puede ver que en los sistemas WEB se pueden usar la mayoría de los patrones del diseño de software tradicionales. Sin embargo explorar la propia Internet y los sitios [19] y [20] veremos el uso de patrones no se limita a éstos. Los usuarios de sistemas WEB están poco dispuestos a leer indicaciones y manuales. Por esto los sitios deben ser intuitivos y fáciles de usar para sus usuarios objetivo. Los patrones son una gran herramienta para lograr la simplicidad y familiaridad de los usuarios con el sistema. El uso de elementos comunes en muchos sitios facilita a los usuarios el uso de los mismos. Así podemos encontrar patrones casi universales en los sitios WEB como son la barra de navegación, las tablas o los contenidos indexados. Hay también patrones para sistemas o componentes con funciones específicas, por ejemplo los buscadores básicamente constan de un campo de texto y un botón para iniciar la búsqueda; en el caso de los sistemas que venden productos utilizan alguna variante de los “carritos de compras”. Otro caso son patrones para mostrar cierto tipo de información como las ligas o secciones tituladas “Inicio”, “Acerca de” o “Contacto”. Otros patrones se encargan de la presentación de la información así podemos encontrar contenidos indexados, tablas, pestañas, paginación, mosaicos de imágenes, etc. La taxonomía y clasificación de los diversos patrones WEB aun no está unificada sin embargo esto no impide su uso. La observación de los sitios WEB similares resulta crítica en este sentido. El uso de patrones para el diseño de la interfaz y la estructura de la información es indispensable para generar sistemas sencillos para el usuario.




T6 Técnicas para el diseño de arquitecturas

En la sección de arquitecturas de [3] se describen muchas posibles arquitecturas de los sistemas WEB en su mayoría son tomadas de la arquitectura de los sistemas de software tradicional. Las más comunes son la arquitectura de dos o más capas y la de modelo, vista, controlador. La primera se plantea generalmente con una capa de interfaz con la que interactúa el usuario, una o varias capas de procesamiento de información una última capa persistente donde se almacenan los datos. Los datos y comandos en este modelo son propagados capa por capa y cada capa puede interactuar directamente sólo con las capas superior y/o inferior. La segunda nos presenta un modulo de interfaz, uno de procesamiento de datos o control y uno de almacenamiento persistente. En este caso los tres módulos pueden interactuar indistintamente con los otros dos. Estas arquitecturas se utilizan porque tienden a aislar y facilitar el manejo de la información que como se menciono en las características C1 Comunicación, C2 Interacción es preponderante en los sistemas WEB.

Aun cuando los paradigmas y estructura básica de estas arquitecturas no varían es importante tener en cuenta la influencia de la información en los sistemas WEB y las tendencias y técnicas que se están generando para su manejo. En la actualidad los estándares WEB se enfocan en separar la información de su presentación y de la funcionalidad del sistema. A su vez la propia información se puede distinguir entre los datos y descriptores de los datos. Por ejemplo si guardáramos esta guía como parte de un sistema WEB la información de esta sección tendría la cadena “T6 Técnicas para el diseño de arquitecturas” y está sería clasificada como un título. Así dependiendo del tipo de programación se podrían manejar datos tipo título como objetos, atributos o variables dando el mismo trato y aplicando la misma funcionalidad a todos los títulos cualesquiera que sean. Esta separación esta en sincronía con la programación y también facilita el manejo de la información en las interfaces que puede tener el sistema WEB tanto con usuarios humanos como con otros sistemas. Así en la capa o modulo de interfaz se pueden poner colores y tipos de letra a todos los datos de una cierta categoría o reacomodar en diverso orden y con diversas etiquetas un mismo grupo de datos para que puedan leerlos diversos sistemas clientes.



T7 Técnicas de Diseño gráfico

Como se explica en C3 Estética y diseño grafico preponderantes son muy importantes y tienen un rol fundamental en retener a los navegantes en los primeros instantes en que visitan un sistema WEB sin embargo resultan inservibles si el sistema no resulta útil a usuario. El diseño gráfico debe entonces procurar una presentación clara de la información en forma estética. En [18] se proporciona mucha información sobre los diversos criterios, técnicas, estrategias y errores a evitar en el diseño de interfaces. En sistemas WEB el mejor lenguaje para manejar estos aspectos son las hojas de estilos CSS que, con un poco de práctica, permiten el manejo y manipulación de los siguientes elementos:

Tipografía (tipo, tamaño, color y decorado de las letras): En este caso se recomienda utilizar tipografía más grande y clara, que en medios impresos pues leer en la pantalla es incomodo. El tamaño y la decoración se deben utilizar para destacar la información más importante.

Agrupación: La información y elementos visuales deben agruparse para facilitar su entendimiento al lector. Las categorías pueden ser por función, tipo de dato, formato de presentación, etc. Los diferentes grupos pueden hacerse evidentes por proximidad de sus elementos e incluso el uso de elementos agrupadores como márgenes, líneas, recuadros e imágenes. También se puede usar el color o tipografía.

Orden: El orden de lectura de arriba abajo y de izquierda a derecha o el que venga al caso según la lengua de los usuarios objetivo. Debe considerarse al momento de ubicar los contenidos dentro de la pantalla pues determina en buena medida en que zona de la misma pondrá su atención en primera instancia el lector.

Imagen y color: El uso de colores e imágenes es una de las formas más sencillas de hacer visualmente atractivo un sistema WEB. El poder de estas herramientas es tal que muchas veces se cae en el abuso. El primer punto es evitar que la combinación de colores dificulte la lectura el color de las letras debe tener un alto contraste con el color que se use de fondo. Si se usan imágenes como fondo es muy recomendable utilizarlas como sello de agua con los colores muy atenuados.Las imágenes deben usarse como elementos que sean a la vez informativos y decorativos. Iconos, delimitadores de conjuntos de elementos, botones, títulos o encabezados. Son excelentes opciones para utilizar imágenes que aporten tanto al fácil entendimiento del sistema como a la estética del mismo. La selección cuidadosa del color las combinaciones de colores son un tema delicado no solo pueden hacer fácil o difícil la lectura alteran drásticamente la percepción de los usuarios. Una de las mejores herramientas para hacer dicha selección es el círculo de color. El círculo de color es un acomodo de los colores en una circunferencia que utilizando simples separaciones de diversos grados como 180 o 120 permite encontrar los colores que combinan con aquel que seleccionamos. En la propia Internet se pueden encontrar gran variedad de versiones de esta herramienta y lograr fácilmente buenas combinaciones de colores.

Es importante además tener constancia y congruencia en todo el sistema. Mantener procesos, criterios de clasificación y formas de presentación similares para el mismo tipo funciones, datos y/o elementos a lo largo de todo el sistema evita que los usuarios deban aprender e interpretar en cada pantalla.



T8 Técnicas para el diseño de navegación

Un factor único de los sistemas WEB es la navegación la información y su presentación no pueden ser usados ni apreciados si no se encuentran. El acceso a la información debe también diseñarse. En [2] y [3] se señalan diversas guías para diseñar la navegación de un sistema WEB. Hay muchos factores que varían con cada proyecto. Por ejemplo elegir entre un menú sencillo o una estructura de árbol o si se debe incluir o no un buscador dentro del propio sistema, etc. Sin embargo hay lineamientos generales que es recomendable seguir en la mayoría de los casos.

  1. Siempre informar al usuario donde se encuentra: La versatilidad de ir de una sitio WEB a otro y de una sección a otra con un solo clic. Puede causar rápidamente desorientación en el usuario. Ya sea por ligas poco claras o distracciones ajenas al sistema el usuario puede perder noción de lo que está viendo. Por eso casi 100% de los sitios utiliza un encabezado presente en todas sus pantallas que indica de que sitio se trata. Además es recomendable indicar exactamente en qué pantalla del sistema está el usuario mostrando un titulo en cada una. En sistemas medianos y grandes también se debe poner la ruta o clasificación de la pantalla dentro del sistema.

  2. Tres clics de distancia: Los contenidos deben ser accesibles. La regla de los tres clics sugiere hacer una estructura del sitio muy horizontal en donde no se necesiten más de tres ligas o pasos para llegar a cualquier contenido. Si se deben dar más pasos dificultan que se encuentren los contenidos en primera instancia y que los usuarios logren recordar cómo encontrarlos en visitas posteriores.

  3. Ligas externos: Un sistema no está aislado, se deben generar ligas desde y hacia otros sitios relacionados. Esto facilitara que los usuarios encuentren la información y que se aprovechen desentenderte de tareas e información útil para los objetivos del sistema pero que están más allá de su alcance. Al apoyarse en otros sistemas los contenidos y funciones pueden mantenerse simples y actualizados facilitando entre otras cosas cumplir con la regla de los tres clics.



T9 Técnicas para presentar la información

Como se constata en [21] la información en Internet puede ser video, imagen, audio o texto pero en todos los casos estos elementos deben adaptarse al medio. La C7 Tecnología diversa, los C8 Usuarios simultáneos y diversos y limitaciones como la velocidad de transmisión o el tamaño de las pantallas, influyen sobre la efectividad de estas formas de comunicación. En todos los casos se debe buscar un equilibrio de dos factores contrapuestos presentar información clara y completa pero a la vez breve y concisa.

En el marco del C6 Cambio continuo que impone Internet la información es el aspecto que más cambia de todos. La generación de información clara y completa pero a la vez breve y concisa es muy costosa y tardada por lo tanto es muy importante distribuir esta tarea entre diversos miembros de la organización cliente e involucrar a los propios usuarios de sistema, lo más posible, en las tareas de generación y actualización de la información.

En el caso de los textos deben ser breves, generalmente es recomendable elaborar resúmenes de la información que manejan diariamente los clientes o usuarios en otros medios. En los casos en que los objetivos del sistema incluyan justamente el acceso a grandes volúmenes de información lo más recomendable es presentarla en formatos descargables para su consulta fuera de línea y/o diseñados para ser impresos. Los datos en texto ofrecen una gran variedad de patrones de presentación como son la tabulación, el paginado, el indexado, el listado, etc.

En el caso de las imágenes se deben adaptar la resolución y el formato para que se vean bien en pantalla pero ocupen el menor espacio posible.

El audio y el video deben también codificarse en formatos de alta compresión y a baja resolución para que puedan ser vistos y/o escuchados aun en enlaces que presenten baja velocidad. En el caso de video es recomendable generar video donde el fondo cambie poco y/o cambie lentamente.



T10 Técnicas para probar las aplicaciones WEB

En la sección de pruebas en [3] se puede apreciar que las pruebas de las aplicaciones WEB son similares a las de aplicaciones tradicionales pero presentan dos diferencias fundamentales. Primero debido a la C7 Tecnología diversa son necesarias muchas pruebas para probar la misma funcionalidad en diversas plataformas. Segundo, gracias a la facilidad con que se puede actualizar el sistema y a que se cuenta con C8 Usuarios simultáneos y diversos estos se pueden involucrar más fácilmente en las pruebas de la aplicación, como se sugiere en [5]. Dentro del espectro de pruebas que puede desarrollar un equipo pequeño se recomienda lo siguiente: