Trabajo en una empresa dedicada a la aplicación de últimas tecnologías en negocios de todo tipo. Si, creemos que el software es una herramienta de uso general, como las matemáticas. No es algo que pueda uno decir que sirve para esto u lo otro. La humanidad ha llegado a la luna, explorado océanos, controlado la bolsa, jugado hasta el amanecer, hablado con extraños y conocidos, enviado mensajes y confiado en videos, todo gracias al software.

Pero volvamos a tomar rumbo en este post. Asterysco esta trabajando arduamente en implementar aplicaciones en Windows Azure y en usar Silverlight como plataforma para aplicaciones RIA. Dentro de las herramientas disponibles para trabajar estas tecnologías está Microsoft Expression Blend 3. Una suite de trabajo para diseñadores en Silverlight y para alguien más.

Esta herramienta maneja una parte muy importante del desarrollo de software: el prototipado. Con SketchFlow, una utilidad de Blend3, podemos crear el prototipo de toda la aplicación, sus relaciones, identificar qué objetos del sistema se usan como controles en varias páginas, identificar flujos alternos para los casos de uso y por supuesto, tener un prototipo ajeno al diseño gráfico que muestre cómo funcionará la aplicación. Aunque SketchFlow actualmente esta enfocado a aplicaciones SilverLight o WPF, puede usarse como apoyo para el diseño de aplicaciones en general, como en mi caso, aunque reconocemos que estamos muy emocionados en poder tener nuestra primera aplicación en SL para un ambiente corporativo.

Lo primero que uno debe hacer es reconocer los principales componentes de la interfaz de Blend3 que no es algo a lo que los desarrolladores estemos muy acostumbrados, es negra, con múltiples paneles auto-ocultables que pueden aturdir un poco. Lo principal es identificar el área de trabajo en el centro de la pantalla, el panel de Assets y de States a la izquierda, el panel de Properties a la derecha y en la parte inferior, el panel del SketchFlow Map, éste último, de vital importancia en el trabajo.

Yo me apoyé es los videos tutoriales de Jeremy Osborne que explican paso a paso como configurar el entorno de trabajo y el primer encuentro con SketchFlow, así que no me detendré en eso y explicaré por que me ha gustado y creo que es una herramienta con grandes cualidades.

Inicialmente podemos crear cada una de las páginas de nuestra aplicación, todas las que queramos o pensemos, relacionarlas (saber cuál lleva a cuál), marcarlas con colores para distinguir su utilidad dentro de los casos de uso que se hayan definido o se estén definiendo. Este mapa, ademas de verse muy bien, es muy fácil de explicar. Particularmente nuestro cliente ha quedado satisfecho con este trabajo y sobre todo, ha entendido como hemos estructurado el sitio, un punto no siempre fácil de lograr.

sketchflow map

Mapa de navegación de un sitio

Como se puede apreciar es muy sencillo describir el flujo de cada caso de uso basados en este mapa, identificar algunos controles que se usaran en varios sitios de la aplicación, como el control de login o los menúes de navegación e identificar algunas páginas con colores que indiquen funcionaes o características diferentes. Del mismo modo el cliente puede sugerir algún cambio en la estructura que es tan fácil de hacer como arrastrar y soltar.

Acto seguido uno quisiera dar una primera ojeada a las demás características de SketchFlow. Pero antes haré una breve contextualización. Durante mis años ejecutando proyectos de desarrollo de software he encontrado que es una costumbre poco difundida empezar a dibujar en papel o en donde sea, el prototipo de la aplicación. Pocas empresas adjuntan los bocetos de las pantallas a los casos de uso y con eso lo único que logran es perder nivel de detalle y control sobre todo el proceso de documentación y desarrollo.

La primera vez que me enfrente a ésto usé Balsamiq Mockups, una aplicación que corre sobre AIR y que permite con una facilidad asombrosa crear prototipos de la aplicación. Es realmente rápido y tiene controles prediseñados para hacer mockups para aplicaciones de escritorio, web  e incluso para el iPhone. Su acabado es tipo mano alzada y sin colores lo cual es un punto a favor porque el cliente no se quedará pensando que el tipo ese parece un chino cosechando arroz o que ese color naranja es muy fuerte. Sin embargo Balsamiq Mockups no permite enlazar los prototipos a nivel funcional y en ese punto es muy difícil explicar a un cliente como va a funcionar su aplicación. Intenté otros programas para lograr la funcionalidad pero siempre fueron demasiado complejos, tanto, que ni los menciono.

Con Sketch flow todo esta integrado en un solo sitio: el acabado tipo boceto a mano alzada y la posibilidad de enlazar los controles del boceto a una acción o estado deseados.

states in sketchflow

Estados de la misma página de la aplicación

En este par de imágenes vemos que al dar click en entrar en la primera pantalla, se despliega el control de identificación de usuarios. Blend3 provee un SketchFlow Player que permite ver la aplicación corriendo con los efectos que uno ha definido. En este caso particular el control de identificación aparece con una transición de Transparente a Opaco que desafortunadamente no puedo mostrar en el blog.

El SketchFlow Player permite mostrar la interacción del usuario con la aplicación, poner a los usuarios a prueba para recoger sus comentarios y sugerencias y guardarlos en la misma interfaz para que puedan ser vistos por el diseñador cuando vuelva a abrir el proyecto en Blend3.

En este caso hemos puesto a nuestro cliente a revisar la interacción y encontramos que hacía falta un campo de estado al final del formulario y que era deseable un campo de búsquedas avanzado en la parte superior derecha de esta página. Durante la presentación los dibujamos y pusimos el comentario respectivo. Rápidamente el equipo pudo responder a los deseos del cliente y crear el nuevo prototipo mostrando sus sugerencias.

SketchFlow feedback

Comentarios del cliente sobre la interfaz

sketchFLow implemented feedback

Implementación de los cambios sugeridos

Esta misma herramienta permite el acceso al código de los eventos para programar los accesos a base de datos desde el prototipo. Eso quiere decir que con unos simples pasos que explicaré en otro post podemos pasar del borrador al diseño definitivo, asignar los estilos y tener nuestra aplicación lista para ser pulida, en muy poco tiempo y con un mayor control sobre todo el proceso.

Incluida la curva de aprendizaje, ver los videos, leer un poco y perder el miedo, este trabajo que muestro acá parcialmente y con permiso de mi cliente no tardó más de 6 horas. Los siguientes espero que sean igual de lentos pero implementando cada vez más cosas de Expression.

Update: expression Studio se puede descargar fácilmente para probarlo

About these ads