¿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 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.
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 estos sencillos 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
Paso 1
Estando en la pantalla de Bienvenida de Blend observarás 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 solución.
Una vez seleccionada la opción Nuevo Proyecto, se nos presentan dos tipos de
proyectos: Silverlight y Windows Presentation Foundation (WPF), dentro de las cuales
están también 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 están remarcadas en la siguientes imágenes y en este caso
en específico son las que nos permitirán trabajar en la creación 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 común entre varias partes de una aplicación.
Dentro del panel Activos se encuentra la
categoría 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
estética más de “lápiz 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 cómo sería la interacción con una aplicación,
por ejemplo.
Paso 2
Ya familiarizados con la interfaz de Blend , 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 “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 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á un 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 que se encuentra en
la barra inferior del panel SketchFlow Map, o bien, posándonos sobre el rectángulo de
la ventana Inicio, seleccionando y arrastrando el botón “Crear e insertar una pantalla de
componentes”. La diferencia entre los dos métodos 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 opción genera un Componente vinculado a la
pantalla Inicio (que también se puede vincular a otras pantallas y/o desvincular de la
pantalla original).
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 Projectos de nuestra aplicación (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 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 pantalla_1_1_Name en el panel
Objetos y escala de tiempo y en el Panel de Propiedades desplegamos las opciones
de Diseño 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 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
Navegación
Seleccionamos uno de los botones
Y nos dirigimos a la barra de propiedades en donde cambiaremos el nombre del botó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 “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 “navegación” 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 Estilos de Boceto disponibles en el Panel
Activos, tales como Rectangle-Sketch, Button-Sketch, TitleLeft-sketch, ScrollBar-
sketch, 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 demás ventanas así que el diseño se los dejo a su criterio pueden utilizar
imágenes y los estilos ya mencionados)
Cuando ahijamos terminado nuestras ventanas procederemos a crear los vínculos entre los
botones y las ventanas.
Paso 7
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 Desplazar a > {el nombre de la pantalla}.
Asegúrate 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. Deberás mandar un documento con las pantallas de los pasos de como
fuiste creando tu prototipo
Top Related