Expresion Blend

12
¿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.

description

Diseño

Transcript of Expresion Blend

Page 1: Expresion Blend

¿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.

Page 2: Expresion Blend

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.

Page 3: Expresion Blend

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.

Page 4: Expresion Blend

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 “.

Page 5: Expresion Blend

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

Page 6: Expresion Blend

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.

Page 7: Expresion Blend

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.

Page 8: Expresion Blend

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

Page 9: Expresion Blend

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.

Page 10: Expresion Blend

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)

Page 11: Expresion Blend

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

Page 12: Expresion Blend

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