Qu es SketchFlow?

SketchFlow es un nuevo conjunto de herramientas en Expression Blend que sirve para crear prototipos funcionales de aplicaciones web y de Escritorio fcilmente y sin necesidad de tener conocimientos de programacin o diseo. Con SketchFlow podemos crear pantallas, controles, interfaces e interacciones entre estos elementos fcilmente con un solo click del mouse, haciendo el proceso de prototipado algo muy fcil y lo ms parecido a tomar una servilleta y dibujar en ella. Adems, nos ayuda a mejorar los tiempos de entrega, recibir comentarios ms objetivos por parte de nuestros clientes, detectar problemas al inicio de un proyecto y reducir el nmero 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 ms fcil identificar errores y corregirlos cuando el costo de hacerlo es mnimo. El poder usar las pantallas, controles y elementos creados durante la etapa de prototipado en la aplicacin final Trabajar con prototipos funcionales permite explorar rpidamente diferentes conceptos para una misma aplicacin sin entrar en discusiones muy subjetivas sobre diseo, color, tipografa, etc. Facilidad para crear interaccin entre pantallas y componentes sin la necesidad de escribir lneas y lneas de cdigo tan fcil como hacer un click con el mouse! La posibilidad de mostrar al cliente el trabajo y los avances realizados en su aplicacin y poder obtener sus comentarios directamente en la interfaz y/o las pantallas que conforman la aplicacin sin tener que realizar impresiones, capturas de pantalla, etc. Posibilidad de utilizar el prototipo para hacer pruebas de usabilidad con usuarios.

Creando nuestro primer prototipo en SketchFlow

Como probablemente no te conformas con leer un texto describiendo SketchFlow, aprovechar la oportunidad para llevarte a travs de estos sencillos pasos por la creacin de un prototipo para Windows Presentation Foundation: Crearemos una aplicacin muy bsica pero interesante para mostrar algunas de las principales caractersticas de SketchFlow en Expression Blend

Paso 1
Estando en la pantalla de Bienvenida de Blend observars diferentes opciones, de las cuales debemos elegir Nuevo Proyecto:

Al elegir Nuevo Proyecto 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 solucin.

Una vez seleccionada la opcin Nuevo Proyecto, se nos presentan dos tipos de proyectos: Silverlight y Windows Presentation Foundation (WPF), dentro de las cuales estn tambin las de Silverlight SketchFlow Application y WPF SketchFlow Application. Seleccionaremos WPF SketchFlow Application.

Una vez creado nuestro proyecto, podemos ver que hay algunas diferencias con respecto a la interfaz de Blend . Las principales estn remarcadas en la siguientes imgenes y en este caso en especfico son las que nos permitirn trabajar en la creacin de nuestro prototipo.

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 comn entre varias partes de una aplicacin.

Dentro del panel Activos se encuentra la categora Estilos, 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 esttica ms de lpiz sobre papel que de computadora .

SketchFlow Animation es un panel en el cual podemos realizar animaciones para nuestros prototipos y que resultan muy tiles para mostrar cmo sera la interaccin con una aplicacin, por ejemplo.

Paso 2
Ya familiarizados con la interfaz de Blend , procederemos a nombrar la que ser la pantalla inicial de nuestra aplicacin. En el panel SketchFlow Map, puedes hacer click izquierdo sobre la pantalla llamada Pantalla 1 y seleccionar Cambiar nombre 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 aplicacin lista podramos empezar a colocar los elementos que formarn nuestra interface en ella, pero como en este ejemplo no solo utilizaremos una pantalla si no varias, empezaremos creando un Component Screen que contendr un men de navegacin que estar presente en todas (o casi todas), las pantallas de nuestra aplicacin:

Paso 3
Para crear un Component Screen podemos hacer click en el botn que se encuentra en la barra inferior del panel SketchFlow Map, o bien, posndonos sobre el rectngulo de la ventana Inicio, seleccionando y arrastrando el botn Crear e insertar una pantalla de componentes. La diferencia entre los dos mtodos es que en el primero crea un Component Screen independiente y no ligada a ninguna pantalla (lo que no significa que no se pueda hacer), y la segunda opcin genera un Componente vinculado a la

pantalla Inicio (que tambin se puede vincular a otras pantallas y/o desvincular de la pantalla original).

Una vez que creamos nuestro componente, se crea un nuevo rectngulo, de color verde, en nuestro SketchFlow Map y si nos fijamos con mayor detalle, se crea tambin un nuevo archivo XAML en el panel Projectos de nuestra aplicacin (que originalmente se llamaba Pantalla 1_1.xaml pero que he renombrado a Navegacion_1.xaml), ya que a pesar de estar dentro de la misma solucin 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 rectngulo de Navegacin 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 aplicacin.

Paso 4
Teniendo abierta la pantalla de Navegacin, primero cambiaremos el tamao de el componente pues queremos que ste ocupe el ancho de la ventana de nuestra aplicacin y que tenga 90 de altura. Para esto seleccionamos pantalla_1_1_Name en el panel Objetos y escala de tiempo y en el Panel de Propiedades desplegamos las opciones de Diseo donde cambiaremos el valor de Width a 640 y el de Height por 90.

Ahora iremos agregando botones que servirn para navegar a travs de las distintas pantallas. Para esto tenemos que ir al panel Activos y seleccionamos Estilos dentro del cual encontraremos Simples y Estilos de Boceto. Seleccionaremos Estilos de boceto y del lado derecho veremos los elementos que tenemos disponibles. Seleccionaremos Button-Sketch y crearemos 4 botones en la ventana de Navegacin

Seleccionamos uno de los botones

Y nos dirigimos a la barra de propiedades en donde cambiaremos el nombre del botn

Teniendo listo el componente de navegacin, empezaremos a crear las que sern las distintas pantallas de nuestra aplicacin.

Paso 5
Para crear las pantallas que nos faltan en nuestra aplicacin posaremos el puntero sobre el rectngulo del componente que creamos en el Paso 3 (que por defecto est en color verde), seleccionaremos la opcin Crear pantalla conectada y crearemos 3 nuevas pantallas

Creadas las tres pantallas nuevas, podemos renombrarlas, moverlas por el mapa como queramos y si queremos diferenciarlas, seleccionamos Cambiar etiqueta visual 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 navegacin por medio de una lnea 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 estarn presentes en su totalidad en las dems pantallas de nuestra aplicacin (Reportes, Busqueda y Ayuda), utilizando los Estilos de Boceto disponibles en el Panel Activos, tales como Rectangle-Sketch, Button-Sketch, TitleLeft-sketch, ScrollBarsketch, TextBlock-sketch y TextBox-sketch(ya que solo es un prototipo no entraremos a fondo en las funcionalidades de estos estilos solo trataremos de dar un formato a nuestras dems ventanas as que el diseo se los dejo a su criterio pueden utilizar imgenes y los estilos ya mencionados)

Cuando ahijamos terminado nuestras ventanas procederemos a crear los vnculos entre los botones y las ventanas.

Paso 7
Para poder vincular los botones del componente Navegacion con las dems pantallas, vamos a dar doble click sobre el mismo e ir seleccionando los botones uno por uno, haciendo click derecho y seleccionando Desplazar a > {el nombre de la pantalla}. Asegrate de repetir este paso por cada uno de los botones

Al final precintamos F5 y observemos como quedo nuestro primer prototipo con SketchFlow.

Ahora si no quedan mas dudas empieza con la Actividad numero 7 Con lo que aprendiste hoy vas a realizar un prototipo por ti mismo las ventanas y estilos que elijas reflejaran tu creatividad y manejo que tienes sobre las herramientas de SketchFlow. Debers mandar un documento con las pantallas de los pasos de como fuiste creando tu prototipo