Después de haber dado un curso sobre Expression Blend y SketchFlow en EDS la semana pasada, me decidí a terminar este post que por una u otra razón venía posponiendo y que creo que tanto a los Desarrolladores como Diseñadores les va a gustar.
Después de haber dado un curso sobre Expression Blend y SketchFlow en EDS la semana pasada, me decidí a terminar este post que por una u otra razón venía posponiendo y que creo que tanto a los Desarrolladores como Diseñadores les va a gustar.
Como habia mencionado en algún post anterior, estoy muy emocionado con las novedades de Expression Blend 3 y particularmente con un nuevo componente en esta herramienta llamado SketchFlow.
¿Qué es SketchFlow?
SketchFlow es un nuevo conjunto de herramientas en Expression Blend 3 que sirve para crear prototipos funcionales de aplicaciones web y de Escritorio fácilmente y sin necesidad de tener conocimientos de programación o diseño.
Con SketchFlow podemos crear pantallas, controles, interfaces e interacciones entre estos elementos fácilmente con un solo click del mouse, haciendo el proceso de prototipado algo muy fácil y lo más parecido a tomar una servilleta y dibujar en ella. Además, nos ayuda a mejorar los tiempos de entrega, recibir comentarios más objetivos por parte de nuestros clientes, detectar problemas al inicio de un proyecto y reducir el número de revisiones sobre un proyecto.
Algunas de las ventajas de usar SketchFlow
- Cuando el proceso de desarrollo está iniciando y se utiliza un prototipo es más fácil identificar errores y corregirlos cuando el costo de hacerlo es mínimo.
- El poder usar las pantallas, controles y elementos creados durante la etapa de prototipado en la aplicación final
- Trabajar con prototipos funcionales permite explorar rápidamente diferentes conceptos para una misma aplicación sin entrar en discusiones muy subjetivas sobre diseño, color, tipografía, etc.
- Facilidad para crear interacción entre pantallas y componentes sin la necesidad de escribir líneas y líneas de código – tan fácil como hacer un click con el mouse!
- La posibilidad de mostrar al cliente el trabajo y los avances realizados en su aplicación y poder obtener sus comentarios directamente en la interfaz y/o las pantallas que conforman la aplicación sin tener que realizar impresiones, capturas de pantalla, etc.
- Posibilidad de utilizar el prototipo para hacer pruebas de usabilidad con usuarios.
¿Cómo funciona SketchFlow?
Antes de pasar a la parte más interesante de este artículo, es necesario que te asegures de que tienes Expression Blend 3 o Expression Studio 3, ya que de otra manera no estarán disponibles las cosas que veremos de aquí en adelante.
Si no tienes Expression Studio 3 o Expression Blend 3 + SketchFlow puedes descargarlos usando los siguientes vínculos:
Una vez descargado e instalado, corre Blend pues empezaremos a trabajar con SketchFlow en Windows Presentation Foundation, simulando una aplicación que tendrá diferentes pantallas y en las cuales usaremos varias de las cosas nuevas en Blend 3.
Creando nuestro primer prototipo en SketchFlow
Como probablemente no te conformas con leer un texto describiendo SketchFlow, aprovecharé la oportunidad para llevarte a través de 10 pasos por la creación de un prototipo para Windows Presentation Foundation: Crearemos una aplicación muy básica pero interesante para mostrar algunas de las principales características de SketchFlow en Expression Blend 3.
Paso 1
Estando en la pantalla de Bienvenida de Blend observarás diferentes opciones, de las cuales debemos elegir “New Project”:
Al elegir New Project se nos presenta otra pantalla, en la cual podemos elegir crear soluciones para Silverlight o Windows Presentation Foundation (WPF) y algo muy nuevo e importante: Crear Prototipos de SketchFlow tanto para Silverlight como para WPF. En este caso seleccionaremos Windows Presentation Foundation, nombraremos nuestra solución.
Una vez seleccionada la opción New Project, se nos presentan dos tipos de proyectos: Silverlight y Windows Presentation Foundation (WPF), dentro de las cuales están también las de “Silverlight 3 SketchFlow Application” y “WPF SketchFlow Application” que no se encontraban en Expression Blend 2 y que ahora nos permiten crear prototipos funcionales. Seleccionaremos WPF SketchFlow Application.
Una vez creado nuestro proyecto, podemos ver que hay algunas diferencias con respecto a la interfaz de Blend 2. Las principales están remarcadas en la siguiente imagen y en este caso en específico son las que nos permitirán trabajar en la creación de nuestro prototipo de ejemplo:
- En primer lugar tenemos el SketchFlow Map. En este nuevo panel podemos crear, duplicar y borrar pantallas, crear componentes, realizar conexiones entre distintas pantallas y compartir elementos en común entre varias partes de una aplicación.
- Dentro del panel Assets se encuentra la categoría Styles, donde la novedad son los “SketchStyles” o algo así como “estilos de boceto” que son controles y elementos 100% funcionales con diferencia en que tienen una estética más de “lápiz sobre papel” que de “computadora del 2009“.
- SketchFlow Animation es un panel en el cual podemos realizar animaciones para nuestros prototipos y que resultan muy útiles para mostrar cómo sería la interacción con una aplicación, por ejemplo.
Paso 2
Ya familiarizados con la interfaz de Blend 3, procederemos a nombrar la que será la pantalla inicial de nuestra aplicación. En el panel SketchFlow Map, puedes hacer click izquierdo sobre la pantalla llamada “Screen 1″ y seleccionar Rename o bien, hacer doble click sobre el nombre y una vez que esté seleccionado escribir el nuevo; nuestra pantalla se llamará “Inicio”.
Teniendo la primera pantalla de nuestra aplicación lista podríamos empezar a colocar los elementos que formarán nuestra interface en ella, pero como en este ejemplo no solo utilizaremos una pantalla si no varias, empezaremos creando un “Component Screen” que contendrá una menú de navegación que estará presente en todas (o casi todas), las pantallas de nuestra aplicación:
Paso 3
Para crear un Component Screen podemos hacer click en el botón 
Una vez que creamos nuestro componente, se crea un nuevo rectángulo, de color verde, en nuestro SketchFlow Map y si nos fijamos con mayor detalle, se crea también un nuevo archivo XAML en el panel Projects de nuestra aplicación (que originalmente se llamaba Screen 1_1.xaml pero que he renombrado a “Navegacion_1.xaml”), ya que a pesar de estar dentro de la misma solución cada componente que vamos creando en el SketchFlow Map es un archivo XAML aparte.
Haciendo doble click en la Navegacion en el panel Project o bien sobre el rectángulo de Navegación en el Mapa, podemos abrir los contenidos del Component Screen que acabamos de crear. Hazlo ahora ya que agregaremos los botones que utilizaremos para navegar por nuestra aplicación.
Paso 4
Teniendo abierta la pantalla de Navegación, primero cambiaremos el tamaño de el componente pues queremos que éste ocupe el ancho de la ventana de nuestra aplicación y que tenga 90 de altura. Para esto seleccionamos Screen_1_1_Name en el panel Objects and Timeline y en el Panel de Propiedades desplegamos las opciones de Layout donde cambiaremos el valor de Width a 640 y el de Height por 90.
Ahora iremos agregando botones que servirán para navegar a través de las distintas pantallas. Para esto tenemos que ir al panel Assets y en él seleccionar Styles dentro del cual encontraremos Simple y SketchStyles. Seleccionaremos la segunda opción y del lado derecho veremos los elementos que tenemos disponibles. Seleccionaremos “Button-Sketch” y crearemos 4 botones en la ventana de Navegación:
Teniendo listo el componente de navegación, empezaremos a crear las que serán las distintas pantallas de nuestra aplicación.
Paso 5
Para crear las pantallas que nos faltan en nuestra aplicación posaremos el puntero sobre el rectángulo del componente que creamos en el Paso 3 (que por defecto está en color verde), seleccionaremos la opción “Create a connected screen” y crearemos 3 nuevas pantallas:
Creadas las tres pantallas nuevas, podemos renombrarlas, moverlas por el mapa como queramos y si queremos diferenciarlas, seleccionamos “Change visual tag” al posarnos sobre la cajita de cada una de ellas y elegimos un color diferente al azul.
IMPORTANTE: El hecho de haber “arrastrado” las 3 nuevas ventanas desde el componente “Navegacion” no quiere decir que estas ventanas ya tengan ese componente dentro; para hacer esto, seleccionaremos el componente Navegacion y sin soltar el mouse, lo arrastraremos hacia la la ventana que queremos que use ese componente, repitiendo este paso hasta que cada una de ellas esté conectada con “Navegacion” por medio de una línea punteada verde, que nos indica que hay un componente conectado a una ventana.
Paso 6
Por ser Inicio la primera ventana que ve el usuario, agregaremos partes de los elementos que luego estarán presentes en su totalidad en las demás pantallas de nuestra aplicación (Reportes, Busqueda y Ayuda), utilizando los SketchStyles disponibles en el Panel Assets, tales como Rectangle-Sketch, Button-Sketch, TitleLeft-sketch, ScrollBar-sketch, TextBlock-sketch y TextBox-sketch:
La imagen anterior nos presenta cómo va quedando nuestra aplicación, específicamente la pantalla Inicio, que si bien le queda un espacio vacío, lo dejaremos por ahora así y pasaremos a la siguiente ventana: Reportes.
Paso 7
Para no complicarnos mucho la vida en cosas no relacionadas directamente a SketchFlow, haremos las pantallas de Reportes y Búsqueda lo menos complicadas posibles, por lo que usaremos casi los mismos elementos que colocamos en Inicio pero con un poco más de detalles:
De forma diferente a lo que hicimos con la pantalla de Inicio, en Reportes vamos a crear una nueva ventana que será la que se mostrará cuando el usuario haga click en el botón Detalles (en este caso solamente haremos un ejemplo pues no tiene mucho caso repetir lo mismo varias veces). Para lograr esto, seleccionaremos el módulo de Reportes en SketchFlow Map y de las opciones que aparecen en él cuando lo seleccionamos, elegiremos y arrastraremos hacia un lado la opción “Create a connected screen”. De esta manera tendremos una página “hija” de reportes que bien puede ser parte de un proceso que se encuentre dentro de Reportes:
Una vez creada esa nueva ventana, la renombraremos por “Detalles” y a diferencia de todas las demás pantallas de nuestra aplicación, “Detalles” no estará conectada con nuestro componente Navegación, por lo que podemos inferir dos cosas: las pantallas no heredan componentes que estén usando a sus “hijas” y segundo, podemos crear y utilizar componentes distintos para los procesos específicos de cada pantalla/sección. Estando en Detalles agregaremos algunos elementos que hagan la información más completa que la ventana anterior e insertaremos un botón de “Regresar”, en el cual crearemos nuestra primera interacción en este tutorial sin escribir NADA de código:
Tal como muestro en la imagen anterior, las interacciones con botones, ventanas y demás elementos las podemos crear fácilmente, sin tener que escribir nada de código. En este caso, como solo se puede acceder a la pantalla Detalles a través de Reportes, bastará con hacer click derecho sobre el botón “Regresar” , ir a Navigate to y seleccionar Back; de esta manera le estamos diciendo a Blend que cuando el usuario haga click en ese botón, muestre la pantalla previa. No está de más mencionar que seguramente te has fijado en que debajo de Back y Forward aparecen los nombres de las distintas pantallas que hemos creado – por lo que desde ahí también podríamos enlazar botones, textos, imágenes, etc. a cualquiera de las demás pantallas.
Paso 8
La siguiente pantalla para trabajar es la de Búsqueda y no nos vamos a complicar mucho aquí: Utilizaremos el mismo formulario que tenemos en Inicio y agregaremos dos botones: el primero de “Búsqueda Avanzada” y el segundo de “Ayuda” que sí! efectivamente llevará al usuario a la pantalla que lleva el mismo nombre:
Seguramente te estarás imaginando que al hacer click en Enviar llevaremos al usuario a una pantalla “hija” de Búsqueda. Pues NO! Sería muy fácil repetir lo que hicimos en el Paso 7, por lo que en este caso vamos a hacer una animación SketchFlow para mostrar cómo se llevaría acabo la búsqueda en nuestra aplicación. OJO! Aquí no hay que espantarse: hacer animaciones en SketchFlow y Blend en general es de lo más fácil y lo mejor es que es divertido ( a muchos nos gusta echar a volar nuestra imaginación y demás). Para empezar vamos a crear un Grid, dentro del cual vamos a crear lo que sería un ejemplo de resultado de búsqueda que posteriormente copiaremos y pegaremos para simular resultados:
Una vez que tenemos listos nuestros resultados simulados, vamos a empezar a trabajar con la animación. Para esto es necesario que tengas activado el Panel SketchFlow Animation, si no lo puedes ver, actívalo yendo al menú Window > Sketchflow Map. Ya estando el Panel visible, observarás que hay un mensaje que dice 
Lo que haremos ahora es que seleccionaremos el cuadro “Base” en SketchFlow Animation y seleccionaremos el Grid en el cual tenemos nuestros resultados de búsqueda; abriremos el Panel Appearance (Window > Properties), y cambiaremos el valor de Opacity a 0% (debe estar en 100% por defecto), con lo que dejaremos de ver nuestra Grid y por lo tanto los resultados de búsqueda.
A continuación selecccionamos el segundo “Estado” de nuestra animación en SketchFlow Animation (la segunda cajita que creamos al hacer click en +), seleccionamos de nuevo el Grid donde tenemos nuestros resultados, cambiamos Opacity a 100% de nuevo y oh la la! Ya tenemos lista nuestra animación – la cual puedes probar haciendo click en el botón “Play” de SketchFlow Animation, siempre y cuando se encuentre seleccionado el cuadro “Base” (ya que ése es el inicio de la animación). Por cierto, cada animación que creemos se puede nombrar, para hacerlo basta con escribir el nombre que deseemos en el siguiente campo:
Ojo que aún nos falta un pasito más para poder tener lista nuestra animación y lo que es más importante, la interacción: Seleccionaremos el botón “Enviar” en el formulario de Búsqueda, haremos click derecho sobre él y veremos que “como por arte de magia” apareció una nueva opción titulada ” Play SketchFlow Animation”, sobre el cual nos posaremos y posteriormente elegiremos “Nombre_nuevo” o el nombre que hayas decidido ponerle a la animación.
Como seguramente no podrás aguantarte las ganas, te invito a presionar F5 o Project > Run Project para correr el proyecto y ver cómo va quedando esto. Utiliza el menú de la izquierda para ver las diferentes pantallas que componen la aplicación; ahí puedes seleccionar Búsqueda y una vez que lo hayas hecho, verás que la animación que creamos aparece primera en la lista de la izquierda diferenciándose por el icono de un “foco”.
Paso 9
Para no hacer las cosas más largas… terminaremos haciendo la página de Ayuda, donde pondremos nada más textos de ejemplo ya que lo que nos interesa por ahora es la interacción y no los contenidos. Seguiremos los mismos pasos que seguimos al hacer las otras pantallas:
Ya que tenemos nuestra pantala de Ayuda, vamos a pasar al último paso, que es muy importante pues es donde vincularemos los botones de nuestro componente “Navegacion” con las pantallas correspondientes, lo que no quiere decir que esto se haga siempre hasta el final… pero bueno, adelante!
Paso 10
Para poder vincular los botones del componente Navegacion con las demás pantallas, vamos a dar doble click sobre el mismo e ir seleccionando los botones uno por uno, haciendo click derecho y seleccionando Navigate to > {el nombre de la pantalla}. Asegúrate de repetir este paso por cada uno de los botones y también de hacerlo dentro de la pantalla Búsqueda, donde está el botón Ayuda, el cual obviamente nos llevará a la pantalla Ayuda mediante el mismo método: Navigate to > Ayuda:
Hecho lo hecho y dicho lo dicho, hemos terminado un prototipo básico en SketchFlow en el cual hemos aplicado diferentes cosas como: creación de pantallas, compontenes, animaciones SkechFlow, navegación entre pantallas y utilización de SketchStyles.
Espero que el tutorial no se te haya hecho muy largo y que te sea útil. Espeor tus comentarios y preguntas.
Fuente: http://expressionlab.net/
No hay comentarios:
Publicar un comentario