Si has pasado un rato en Expression Lab aprendiendo sobre Blend y SketchFlow, seguramente has llegado a un punto en el que quieres aprender más y llevar el uso de estas herramientas a un nivel superior.

Sabiendo que la destreza y maestría en el uso de una herramienta no llegan solos, en esta ocasión comparto algunos trucos y consejos sobre SketchFlow y Blend 3 que seguramente te ayudarán a domar esta herramienta y a hacer tu trabajo más fácil. ¡Empecemos!

1. Conectando pantallas en SketchFlow Map

El procedimiento normal para crear pantallas en SketchFlow Map es el de hacer drag and drop de el botón “Create a Connected Screen” lo cual genera una ventana unida a la original tal como muestra esta imagen:

Pero qué sucede cuando creamos una pantalla directamente presionando el botón   y nuestra pantalla no está ligada a ninguna otra y queremos conectarla con alguna de ellas?

Muy fácil! Seleccionando la ventana que quieras conectar, haz un drag and drop sobre la otra ventana a la cual quieres conectar la primera y listo! Verás que como por arte de magia aparece una flechita blanca conectando ambas pantallas, donde la dirección del puntero marca la dirección del flujo (si sale de una pantalla ‘x’ hacia otra pantalla ‘y’ o si viene de ‘y’ a ‘x’). Incluyo el ejemplo:

2. Scroll para ventanas de SketchFlow

Si has estado jugando lo suficiente en SketchFlow como para haber llegado a probar tus aplicaciones Silverlight en el browser, te habrás dado cuenta que en caso de que tus pantallas sean más grandes que el espacio disponible en el SketchFlow player no puedes ver la totalidad de tu interfaz / aplicación a menos que utilices el zoom para hacer todo más chico, con lo que todo pierde legibilidad.

En este ejemplo tengo una pantalla con medidas 1024 x 900 tal como puedes ver en la imagen:

debido a que mi monitor no es tan grande, al correr mi aplicación la misma no entra dentro del SketchFlow Player, ocultándome partes de la interfaz:

quedando como tarea el solucionar quie podamos ver todos los contenidos sin tener que hacer un zoom  out.

Tenemos dos opciones:

La primera, ocurrenciade la casa, consiste en utilizar uno de los behaviors incluídos en Blend, MouseDragElementBehavior, para lograr que podamos mover la ventana y así poder observar todos sus contenidos.

Lo que tenemos que hacer es agregar el behavior MouseDragElementBehavior a “LayoutRoot” con tal de que podamos mover este elemento y así observar todos sus contenidos:

Dejaremos las opciones del behavior tal como se ve en el panel Properties de la imagen de arriba y presionaremos F5 para ver nuestra aplicación en el browser:

Como podrás ver, el “Drag” ya se puede realizar, el problema es que al mover hacia la izquierda o derecha nuestra pantalla, termina siendo “enmascarada” y no se despliega correctamente. El motivo es que la misma está dentro del UserControl que tiene medidas definidas (no automáticas). Para solucionar esto regresaremos a Blend y haremos lo siguiente:

presionamos los botones que resalté en la imagen con tal de que las medidas sean Automáticas tanto para la altura como  para el ancho. Una vez hecho esto podemos correr de nuevo nuestra aplicación (F5) y sorpresa:

No es lo mismo que verlo en vivo a una imagen pero bueno, el resultado es claro: ya podemos ver por completo nuestra ventana, moverla de un lado al otro sin que se corte o enmascare y sin tener que hacer el alejamiento con el zoom. Las contras de esto vienen cuando utilizamos botones y se registra el click al seleccionarlos (lo que genera que el behavior “piense” que se le está llamando a él) – algo complicado de explicar y que entenderás mejor poniéndolo en práctica :)

2. La segunda opción viene de una conversación con Kirupa (si eres seguidor de buenos blogs TIENES que saber quién es Kirupa), y consta de utilizar el ScrollViewer con el que podamos hacer scroll hacia arriba, abajo e izquierda y derecha.

Este método no lo he probado a pesar de haber visto algunos ejemplos… si alguien se anima a hacerlo y compartir, será más que bienvenido!

3.- Lorem Ipsum y  Sample Data

Siendo diseñador o desarrollador, en este caso da por igual, seguramente estás familiarizado con el famoso Lorem Ipsum: Más de una vez en un proyecto, sea para web o para escritorio, es necesario simular textos en una tabla, en una lista, control, etc. o también simular datos devueltos por servicios, bases de datos, etc. Si lo has hecho una vez, coincidirás conmigo sobre que es algo engorroso.

Sample Data es una nueva herramienta en Blend: Nos permite generar datos de ejemplo con tal de ser utilizados en controles como listas, tablas y otros elementos de la interfaz.y obviamente para simular información que en la aplicación final vendría desde una base de datos a la cual o no tenemos acceso o todavía no ha sido creada.

Para crear Sample Data hay que ir al panel Data y realizar los siguientes pasos:

Definimos el nombre de la colección de datos:

Importante: Podemos optar por activar los datos de ejemplo para cuando corramos la aplicación o no, debido a que es posible utilizar Sample Data solamente mientras trabajamos en Blend y utilizar datos reales una vez que la aplicación está corriendo.

A continuación podrás ver la colección de datos “NombreColeccionDatos” que contiene ya dos propiedades por defecto: Property1 y Property2

las cuales podemos renombrar y modificar el tipo de datos que representan:

Tal como se ve  en la imagen, podemos seleccionar diferentes tipos de datos como Nombres, Direcciones, Precios, etc. con lo cual no tendremos que generarlos manualmente.

Consejo de Oro: Si los datos que te despliega no son de tu agrado (Aaberg Jesper, Adams Terry, etc), puedes modificar los archivos que contienen los datos de ejemplo. Los puedes encontrar en \Program Files\Microsoft Expression\Blend 3\SampleDataResources\en\

4.- Transiciones entre ventanas de SketchFlow

Tal como habrás visto en alguna demo o lo habrás utilizado en tu trabajo, SketchFlow tiene SketchFlow Animations, que sirven para simular comportamientos de módulos, usuarios, etc. pero no funciona como una herramienta para generar interpolaciones entre ventanas en una aplicación.

Para crear interpolaciones entre ventanas hay un secreto que debes saber y que te será de mucha utilidad si quieres transiciones diferentes a las comunes (por corte).

Teniendo al menos dos ventanas conectadas entre sí en el SketchFlow Map:

Seleccionaremos la línea curveada (con punta de flecha), que une a ambas ventanas y haremos click con el botón derecho del mouse. Ahí se nos presentan las siguientes opciones:

y bueno, creo que el resto es historia… puedes seleccionar la transición que más te guste y listo!

5. Organizando la interfaz de Blend

Al trabajar en una aplicación SketchFlow es común que tengamos muchos paneles abiertos que hacen que nuestro campo de juego sea reducido y no ttengamos tanto espacio para trabajar. El secreto aquí es saber cómo podemos organizar nuestra interfaz según el trabajo que estemos realizando:

En Blend puedes seleccionar entre dos Workspaces predefinidos: Design y Animation en el menú Window > Workspaces, o más fácil, puedes presionar la tecla F6 cada vez que quieras cambiar entre uno y el otro. Si no te gustan éstos puedes

Sí… qué bien! pero ninguno de los 2 me convence! Blend te permite acomodar los paneles de la manera que más te guste de manera muy fácil y guardarlos (así los puedes usar en todos tus proyectos y no solo en uno). Basta con seleccionar las pestañas de cada Panel para moverlo y acomodarlo donde gustes. Aquí va una pequeña demo:

Finalmente no podría quedar fuera la tecla TAB: al presionarla ocultas todos los paneles para despegar un poco la superficie de trabajo; también puedes lograrlo presionando F4. Obviamente al presionar de nuevo cualquiera de las dos teclas los paneles se vuelven a mostrar.

Espero que estos consejos te hayan sido útiles y que te simplifiquen el trabajo en Expression Blend y SketchFlow.Pronto compartiré algunos más.

Y bueno, ya para cerrar… tienes algún consejo o truco que hayas descubierto usando Blend y SketchFlow? Crees que hay algo que falta por aquí?

Espero sus comentarios y sugerencias.
Daniel

A pesar de que nunca fuí un fanático enfermo de los videojuegos (a excepción de Winning Eleven), puedo decir que pasé muy buenos ratos en sitios como Orisinal, Yahoo (el pool!), Poker de 7 manos, y algunos más y aunque constantemente me preguntaba quién y cómo hacían esos juegos nunca me adentré mucho más y seguí siendo "un usuario final"… hasta la semana pasada :)

Cómo hago mi primer juego?

Contrario a lo que puedas pensar, en este tutorial no estaremos haciendo nada relacionado con Código, Matemáticas, Física y demás: nos vamos a concentrar en lo que serán las pantallas de nuestro juego, las interacciones que habrán y uno que otro detallito.

Para poder empezar, es necesario que tengas lo siguiente:

• Papel, lápiz y borrador (sí! hasta al mejor pescador se le va la trucha!)
• Expression Blend 3 + Sketchflow (vienen las dos cosas en una misma descarga)
• y nada más :)

Empecemos!

1. Diseñando la interfaz de nuestro juego

No me cabe duda de que si tuvieras que diseñar la interfaz de un juego de futbol podrías hacerlo y muy bien (cero desconfianza jeje), pero en esta ocasión quiero que nos concentremos en lo importante: Crear nuestro primer juego en Silverlight en unos cuantos minutos y de paso conocer y aprovechar SketchFlow.

Pongámosle galleta al asunto: Como podrás notar en las siguientes imágenes, a parte de no ser brillante dibujando, definí los que serán los elementos de mi interfaz: Una portería, un portero, tres opciones en el menú, un marcador y la invitada especial del partido: la pelota.

2. Preparando la Interfaz de nuestro juego

3. Importando archivos PSD en Blend 3

4.- Creando las pantallas de nuestro juego

No está de más mencionar que cuando presiones OK, te saldrá el siguiente diálogo preguntándote si quieres Crear una nueva carpeta o Sobreescribir la que habías creado anteriormente al importar los elementos de la interfaz en el Paso 3 – ante lo cual deberás elegir Crear nueva carpeta para no eliminar los elementos de la página inicial.

5.- Venga su Reino: Agreguémos interacción con SketchFlow!

Una vez que tenemos nuestras pantallas terminadas vamos a conectar los botones de la pantalla principal con sus respectivas partes. Para hacer esto basta con seleccionar cada uno de los botones, hacer click derecho con el mouse y seleccionar el nombre de la pantalla a la cual queremos conectar el botón:

Una vez que hemos “conectado” los botones con sus respectivas pantallas vamos a entrarle directito a lo que venimos: Crear nuestro primer juego en Silverlight.

6.- Preparándonos para atajar penales

Antes de darle vida a “Goico” te cuento que estaremos usando algo nuevo en Blend 3 llamado Behaviors. En pocas palabras un behavior es un “comportamiento” creado por un programador que lo que hace es definir cómo se comporta un elemento de tu interfaz con respecto a diferentes interacciones. Por ejemplo, podríamos tener un behavior que hiciera que cuando muevas el mouse se mueva un objeto definido de tu interfaz (al cual le agregaríamos el behavior, obviamente…).

Como el caso aquí no es meternos de lleno en la programación…usaremos un Behavior que creo el buen Santiago Leguiza (aquí puedes ver el tutorial de cómo hacer el behavior), y que lo que hace es que uno o varios elementos de nuestra interfaz a los que se lo agreguemos sigan los movimientos que hacemos con el mouse en un espacio definido por un Canvas (en palabras menos técnicas algo parecido a los efectos que tenía GeoCities de poner una estela de estrellitas siguiendo el puntero del mouse mientras lo movíamos… jeje).

Dejándonos de tanto rodeo, lo que vamos a hacer es agregar el behavior que creó Santiago a nuestro proyecto. Por lo tanto iremos al panel Projects y en él ubicaremos la parte de nuestra solución que lleva al final las palabras “SilverlightScreens” haremos click derecho sobre ese título y seleccionaremos la opción “Add existing item” o sea… agreguemos lo que hizo Santiago:

Se nos presentará una ventana donde tendremos que ubicar el archivo y ahí es donde seleccionaremos el o los Behaviors que queramos usar en nuestra aplicación SketchFlow-Silverlight:

En este caso te recomiendo tener el archivo .cs en la carpeta donde se guardan las diferentes pantallas de tu proyecto SketchFlow (la puedes identificar por la terminación “SilverlightScreens” tal como se ve en la ruta en la imagen de arriba).

Hacemos click en Open y para poder empezar utilizar el SketchFlow iremos a Project > Rebuild Project, con lo cual ya tenemos el Behavior disponible en el panel Assets dentro de la categoría “Project”:

Estamos ya casi listos para poder agregarle el Behavior a Goico, pues algo que nos falta es definir el espacio en el cual se moverá el portero ya que la portería no ocupa el ancho total de nuestra pantalla. Para hacer esto iremos a la pantalla Jugar y seleccionaremos al arquero directamente en el documento o bien en el Panel  Objects and Timeline > Final > portero:

A continuación, haremos click derecho sobre el portero o bien sobre la Capa en Objects and Timeline y seleccionaremos Group Into > Canvas:

Teniendo listo nuestro Canvas, lo seleccionaremos en el panel Objects and Timeline e iremos al panel Properties, donde definiremos el tamaño del mismo y el cual acomodaremos sobre la portería pues ésta será el área por la cual se moverá el buen Sergio:

Hecho esto, podemos centrar a Goico en medio de la portería (a menos que queramos que se trague los goles como Migliore) y haremos lo siguiente:

En el Panel Assets iremos a la categoría Project, seleccionaremos el behavior (FollowMouseBehavior), y lo arrastraremos y soltaremos sobre el portero (o bien sobre el objeto “portero” en Objects and Timeline):

Una vez que hagamos esto voilá! el portero ya tiene agregado el Behavior y solamente tenemos que definir dos cosas más para poderlo ver en acción:

En primer lugar, al agregar el behavior y/o tenerlo seleccionado, verás que el panel Properties nos presenta unas opciones distintas a las de siempre:

Ahí es donde definiremos qué queremos que haga el behavior: Si va a seguir al mouse horizontalmente, verticalmente o en ambos ejes – en este caso lo haremos solo horizontal- y en la parte de abajo podemos definir márgenes para delinear el área de movimiento del objeto (en este caso nuestro portero).

Finalmente, lo que tenemos que definir es el punto de registro o “centro” de nuestro portero ya que es en base a este punto que el behavior determinará hacia dónde estamos moviendo el mouse. Suena complejo pero es muy fácil de hacer: Vamos al panel Properties, seleccionamos el apartado Miscellaneous (el último del panel), y en donde dice RenderTransformOrigin escribiremos .5 y .5 en cada una de las cajitas. No me preguntes por qué: tardaría más en explicarlo que el tiempo que te durará la pregunta en la cabeza…

Ahora sí: Tenemos lista la primera parte de nuestro primer juego creado usando Blend 3 con SketchFlow y Silverlight y la puedes ver aqui. Fácil y rápidamente!

Si te animas a avanzar más cosas en el juego, crear nuevos behaviors, animaciones u otras cosas… te puedes bajar los archivos fuente aquí.

Nos vemos pronto!
Daniel Priego

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:

• Expression Studio 3
• Expression Blend 3 + SketchFlow

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:

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



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



3. 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  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 “Create and insert a Component Screen”. 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 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 es hacer click en el signo + ; una vez que lo hayas hecho, verás que aparece una nueva ventana dentro del panel SketchFlow Animation aparte del primer cuadro titulado “Base”.

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.

Saludos!

Este mini-post es para invitarte a visitar seethelight.com un especie de “talkshow” donde el equipo de Microsoft Expression, junto a gente de diferentes agencias e instituciones nos enseñan cómo crear contenidos para Silverlight 3 utilizando la nueva versión de Expression Studio.

Disfruta este “show” mientras conoces las nuevas cosas que se pueden hacer en Silverlight 3 con las buenisisisimas novedades de Expression Blend con SketchFlow, Expression Web y Expression Encoder. Lo disfrutarán!

Bill Buxton, de MS Research, habla sobre la importancia del diseño en la creación de ROE: Return on Experience.

Antes que nada, quiero agradecerle a Daniel por la oportunidad de escribir como invitado!

Como muchos de ustedes saben. hace 3 semanas tuvimos la conferencia más grande organizada por Microsoft para la gente que trabaja en la web: MIX 2009 fue en Las Vegas por cuarto año consecutivo. Básicamente, el evento reúne alrededor de 10,000 diseñadores web, desarrolladores, arquitectos y creativos para hablar sobre las herramientas de Microsoft y de estrategias para la próxima generación de internet.

Hablando sobre Argentina y Uruguay en específico, fue un placer para mí poder encontrar a algunos partners de la región y compartir opiniones con ellos acerca de las presentaciones y keynotes.

Dicho lo dicho, veamos qué estará lanzando Microsoft en unos meses (aunque se hicieron muchos otros anuncios, me enfocaré solamente en lo relacionado a diseño):

Se lanzó el Internet Explorer 8

Web Accelerators en Internet Explorer 8

(más detalles en http://www.microsoft.com/ie8):

Beneficios para desarrolladores,

• El soporte para CSS 2.1 más completo en cualquier browser
• Mejor rendimiento del engine para JS
• Soporte para HTML 5
• Web Slices, Aceleradores y Búsqueda Visual

Beneficios para los usuarios,

• Mejor manejo de las tabs que tengas abiertas en caso de que alguna llegue a fallar y tengas que cerrarla
• Mejoramiento de la caja de búsqueda
• Aceleradores (para bloguear, escuchar musica, ver mapas, etc).
• Mejor seguridad (protección contra sitios falsos, malware, navegación en privado y filtrado, DEP / NX).
• Mejor rendimiento en el procesamiento de sitios web

Silverlight 3 Beta 1

(más detalles en http://silverlight.net)

Perspectiva 3D creada en Silverlight 3

Una evolución al Silverlight 2 que nos trae las siguientes características (resaltadas las más esperadas):

• Aceleración GPU (tanto para Windos como Mac)
• Nuevo Soporte para Codecs h.264, AAC y MPEG-4
• Api para Audio y Video crudos que permite a cualquier persona escribir sus propios codecs y que éstos sean soportados por Silverlight 3
• Logueo mejorado para sistemas de rastreo/análisis de visitas
• Experiencia Fuera del Browser (tanto para Windows como para Mac): Ya se pueden “desprender” y correr las aplicaciones fuera del browser, sea online u offline sin usar el look/ventana del browser.
• Soporte para 3d y efectos Bitmap API/Pixel Shader.
• Deep Zoom aprovecha la aceleración GPU.
• Soporte binario para XML.
• Silverlight 3 es menos pesado que Silverlight 2 ( >40kb).

Expression Web 3 Preview

(más detalles en Microsoft Expression Web SuperPreview for Windows Internet Explorer):

Con Expression SuperPreview te aseguras de que tus sitios se vean igual en todos los navegadores

Esta nueva versión provee soporte para ASP.NET, aplicaciones PHP; SFTP (FTP seguro), validación de CSS y finalmente, SuperPreview – un nuevo componente que permite a los desarrolladores visualizar la página en la que están trabajando renderizada tanto en IE6, IE7, IE8, Safari y Firefox. Esta herramienta utiliza tanto el browser que tenemos instalado en nuestra computadora como también servicios en la nube que pueden renderizar una vista previa de cómo se vería la página que estamos haciendo en un Browser que no tengamos instalado localmente (por ejemplo Internet Explorer 6)! Aquí estamos demostrando claramente nuestra voluntad de soportar el ecosistema completo y no solamente nuestros productos ;)

Preview de Expression Blend 3

Interfaz de Usuario del nuevo Blend 3 (preview disponible)

(más detalles en http://www.microsoft.com/expression/try-it/blendpreview.aspx )

Se presentó una nueva version de Expression Blend, no solo para soportar el diseño de aplicaciones en Silverlight o Windows Presentation Foundation, si no para dar soporte al Flujo de trabajo de Desarrollo de aplicaciones usando SketchFlow, una nueva herramienta que permite al desarrollador prototipar / bocetar sus diseños en Blend usando la misma herramienta que utilizan para desarrollar y diseñar sus aplicaciones. SketckFlow también provee un sistema de Generación de Documentación automático en formato Word 2007.

Creación de Prototipos con SketchFlow en Expression Blend 3

Agregado a esto, Blend 3 incluye lo siguiente:

• Diseño con datos con mejor soporte para sample data.
• Soporte para importar archivos de Adobe Photoshop e Illustrator (por capas y manteniendo editabilidad en textos, degradados e imágenes vectoriales!).
• Behaviors (AJAX)
• Control de Código Fuente con Team Fundation Server
• Intellisense para XAML, C# y VB.

Importando archivos de Photoshop - con capas editables!

Links Relacionados:

• El Futuro de Microsoft Expression Blend @ http://videos.visitmix.com/MIX09/C04F
• Descarga el Preview de Microsoft Expression Blend 3. Nota: esta versión no incluye SketchFlow, el cual será parte de una beta que será lanzada entre Abril y Junio de 2009 @ http://www.microsoft.com/expression/try-it/blendpreview.aspx
• SketchFlow: Del Concepto a la Producción @ http://videos.visitmix.com/MIX09/C01F
• Integrando Microsoft Expression Blend con Adobe CS.

Comentario

En relación a los comentarios recibidos por diseñadores que utilizan Flash, Blend 3 está pensado en una forma más visual en comparación con Blend 2. Comúnmente escucho comentarios de Diseñadores que dicen que diseñar aplicaciones en Flash es mucho más fácil y rápido y que no requiere conocimiento de programación ni de dejar de lado el diseño. Blend 3 te permite utilizar Behaviors, Animaciones, Data binding para sample data y muchas otras cosas más con un solo click del mouse sin tener que “escarbar” el XAML.

Por supuesto Blend fue LA ESTRELLA del show, especialmente la parte de SketchFlow (de la cual prometo hablar más en detalle en mi próximo post). En mi humilde opinión, por primera vez los diseñadores Flash / Interactivos, no tienen más excusas para no instalar y probar Blend. Checa los videos de las sesiones en http://videos.visitmix.com y házme llegar tus comentarios!

Este primer tutorial de ExpressionLab trata sobre cómo personalizar el look de los SimpleStyle Controls al trabajar en proyectos Windows Presentation Foundation (WPF) en Expression Blend.

Como la intención de estos artículos es la de presentar ejemplos de la vida real, Juan Ladetto me pasó una aplicación que estaba desarrollando y que sirve para hacer mirroring de servidores.

La aplicación, en lo que se refiere a funcionalidad, anda perfectamente…. pero le falta lo que por ahí llaman “una manita de gato” o bien, algo de diseño y este tutorial tratará sobre cómo personalizar el “look” de los elementos que la componen.

En este tutorial utilizaré las siguientes herramientas:

· Microsoft Expression Blend 2.0
· Microsoft Expression Design 2.0

Empecemos!

1.- Para empezar quiero presentarles la aplicación sobre la cual estaremos trabajando y las partes de Blend que utilizaremos:

Interfaz original de la aplicación WPF

Como puedes observar, la aplicación no es muy compleja y no tiene demasiadas cosas como para perderse en ella; lo que sí es un hecho es que no es agradable visualmente y que podría verse mil veces mejor. Así que manos a la obra!

2.- Para empezar, vamos a abrir la aplicación existente en Expression Blend, ya que trabajaremos sobre ella misma, manteniendo el código que está “detrás de ella” pero mejorando la capa de presentación visual.

Esta es una gran ventaja de Blend – tanto las aplicaciones de escritorio como las web se trabajan por diferentes capas – programación, presentación y – lo cual nos permite trabajar al mismo tiempo tanto a diseñadores como programadores teniendo excelentes resultados en menor tiempo y generando verdaderas experiencias ricas para el usuario.

La aplicación en Expression Blend

En la siguiente captura puedes observar el diseño que realicé en Expression Design: te dará una mejor idea de cómo terminará viéndose la aplicación sobre la que estamos trabajando y de las capacidades de integración y creación de gráficos que tiene la Suite Expression.

Interfaz para la aplicación en Expression Design

3.- Ya familiarizados con lo que tenemos que hacer, empezaremos con los campos de texto – como puedes ver en el Diseño que creé en Expression Design éstos tienen “más onda” y aparte de eso las esquinas están redondeadas J.

Para personalizar los campos de texto en la aplicación haremos lo siguiente:

3a.- Seleccionar cualquiera de los campos de texto que tenemos en la aplicación y presionar el botón derecho del mouse e ir a la opción Edit Control Parts (Template) y posteriormente seleccionar Edit Template.

4.- Lo que sigue es modificar la apariencia del campo de texto. Como vimos en el ejemplo de Expression Design, la idea es que los bordes sean redondeados y un poco más grandes que los campos comunes. Para esto vamos a seleccionar el campo de texto y trabajaremos con el panel de Properties del lado derecho de la pantalla ( Window > Properties ).

Nota: En este caso estamos editando un Simple Style Control, y por lo tanto editamos el Template directamente – en caso de ser un System Control debemos editar una copia que después elegiremos como recurso de la ventana actual o de toda la aplicación (ya trataré este tema en otro post).

En la siguiente ventana es donde vamos a editar las propiedades del campo de texto. Como referencia, siempre es bueno fijarse en el “breadcrumb” que se localiza en la parte superior derecha de la pantalla y que se encuentra marcado con el número 1 en la siguiente pantalla, ya que así sabremos qué Control es el que estamos editando y además nos presenta la facilidad de hacer click sobre el nombre del control, en el breadcrumb, y tener acceso a las opciones relacionadas con los templates de Control.