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!

Creo que la mayoría que lea este post recordará un programa que pasaban en Discovery Channel y se llamaba “Beyond 2000” (o Más Allá del 2000). Trataba sobre avances tecnológicos e inventos fuera de lo común, era transmitido aproximadamente hace 9 o 12 años y era un hitazo para todos los amantes de la tecnología, a pesar de que las cosas que se presentaban parecían demasiado irreales o inalcanzables.

Entre tantas cosas, el conductor presentó en una ocasión un documental sobre una casa inteligente: Para entrar era necesario utilizar un lector de huellas digitales, la barra de la cocina era de un material extraño que permitía que la ama de casa seleccionara diferentes opciones de comida y las recetas de las mismas, el refrigerador avisaba cuando se estaba terminando la despensa y para no hacerla más larga, la casa contaba con una mesa-pantalla futurista que mostraba fotografías, videos, efectos visuales, etc. y donde todos los miembros de la familia, mascotas incluidas, se juntaban para interactuar y jugar a ser una familia similar a la de los Supersónicos. De película.

Si hiciéramos un recuento, quizás el 30% de los inventos que se presentaron ahí se hicieron realidad o llegaron a comercializarse. Por ejemplo, hasta la fecha no he podido ver el carrazo de la foto anterior… caso contrario a otros que pasaron la prueba y aunque en otro momento parecía imposible, ahora están en nuestros escritorios, casas, bolsillos, etc.

Tal es el caso del tema de este post: las interfaces táctiles (como las de la mesa-pantalla ahora conocida como Surface), o mejor dicho, de las NUI (Natural User Interfaces o Interfaces Naturales de Usuario).

¿Qué es la NUI?

Tal como mencioné antes, la(s) NUI son interfaces naturales… pero claro, esto no nos dice nada. En sí, las interfaces naturales son aquellas en las que interactuamos con un sistema, aplicación, etc. sin utilizar dispositivos de entrada como sería un mouse, teclado, lápiz óptico, etc. y en lugar de éstos utilizamos nuestras manos por ejemplo y donde generalmente se rompe el paradigma de las metáforas visuales – muy comúnmente utilizadas en las GUI y que no se asemejan a los objetos o acciones del mundo real (cómo no preguntarse por qué un icono con un porta papeles y una pequeña nota significa pegar? );  y por lo tanto las interacciones son más reales, tanto como  para el usuario frecuente de una computadora como para aquellos que no tienen idea de cómo manejar el mouse, abrir un programa etc. Eso sí, es importante mencionar que a pesar de que las interacciones parecen ser más reales siguen estando dentro de un medio digital y no algo tangible y por lo tanto habrá muchas cosas que sigan empleando metáforas con tal de lograr una variedad de cosas.

Los ejemplos de NUI son bastantes: Podría ser tu Ipod, Tablet PC, handheld, los cajeros automáticos, aplicaciones para presentaciones interactivas, pantallas no touch para realizar operaciones médicas o por qué no? Surface, que a pesar de que no haber una en el súper chino de tu cuadra, cada vez se vuelve algo más conocido y usado y se crean más aplicaciones (generalmente relacionadas con entretenimiento y servicios), por lo que no dudo que en los próximos 3-5 años tengamos Surface o dispositivos similares muy cerca de nosotros , en formas más prácticas y portátiles, haciéndonos la vida más practica o al menos liberándonos del mouse :)

Multitouch en Windows 7

Por cierto, muchas personas me han preguntado últimamente acerca de los cambios en la interfaz de Windows 7 – Por qué los botones son más grandes? por qué las ventanas se auto ajustan cuando las llevamos a los bordes y muchas más y bueno, parte de esto tiene que ver con que Windows ahora es Multitouch! O sea que sí tienes con qué ($) y ganas, puedes comprarte un dispositivo touch screen y empezar a experimentar con los nuevos botones de la taskbar, aplicaciones creadas en Windows Presentation Foundation y más. Por cierto, al final de este post incluyo un video buenísimo acerca de cómo el equipo encargado de Windows 7 trabajó en la Interfaz gráfica y demás cosas para mejorar la usabilidad y  otros temas. Imperdible.

Creo que es bueno mencionar que a pesar de la gran tecnología y avances que hay en el tema, el pensar en NUI para aplicaciones LOB (Line of Business) es algo remoto todavía,  ya que una cosa es mover la mano y empujar una foto por la pantalla y otra realizar operaciones y transacciones que implican procesos más complejos, lo que no quiere decir que no debamos poner atención a este tema como diseñadores/desarrolladores pues no todas las cosas que se hacen son LOB y mientras más pronto aprendamos y nos metamos en el tema, mejor será:)

Para cerrar, me gustaría saber qué opinas: ¿Qué futuro les ves a las NUI? ¿Crees que con el tiempo queden atrás las GUI? Espero tus comentarios!

Gracias!

Daniel Priego

Recursos interesantes sobre Interfaces Naturales de Usuario:

Designing the Windows 7 Desktop Experience – http://videos.visitmix.com/MIX09/C26F
Interaction Techniques Using the Wii Remote – http://videos.visitmix.com/MIX09/C13F

Touch and Gesture Computing, What you haven’t heard: http://videos.visitmix.com/MIX09/C15F
ReacTable

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!

ColourLovers.com, una comunidad muy buena cuyo propósito es que compartamos nuestra pasión sobre el color, paletas y patrones, ha agregado una opción de download para las herramientas de Microsoft Expression.

Microsoft Expression es una familia de herramientas para diseñadores y desarrolladores profesionales que les permite crear experiencias ricas con Windows Presentation Foundation (WPF) para aplicaciones de Windows y con Silverlight para crear experiencias interactivas ricas basadas en web que corren en cualquier plataforma.Ahora, ColourLovers te permite bajar los siguientes formatos de paleta de colores:

· Expression Design Swatch

· WPF Resource Dictionary

· Silverlight XAML Resources

A continuación describiré los pasos a seguir para poder empezar a utilizar las paletas de ColourLovers en tus proyectos WPF y Silverlight.

Usando las paletas de ColourLovers en Expression Design

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. Lee la Parte II de este tutorial para aprender más acerca de los formatos disponibles. En este caso selecciona el botón “Design” para bajar la paleta compatible con Expression Design.

4. Cuando aparezca la ventaja de diálogo para la descarga, elige Guardar el archivo y dirígete al folder Swatches dentro del directorio donde tienes instalado Expression Design, que comúnmente es: c:\Program Files\Microsoft Expression\Design 2\en\Swatches\ y guarda el archivo. Nota: Es posible que la ruta a tu folder de Swatches sea algo diferente pero seguramente lo encontrarás.

5. La paleta de colores de ColourLovers es un XML que es interpretado por Expression Design.

6. Para agregar esta nueva paleta a Expression Design, sigue estos pasos. Es importante mencionar que en Expression Design las paletas son llamadas “ Color Swatches”.

7. Abre Expression Design y expande el panel Color Swatches. Selecciona Import Color Swatch Library.

8. Abre el folder Swatches y selecciona la paleta que acabas de bajar en ColourLovers y presiona Open/Abrir. Con esto, la nueva paleta de colores estará disponible dentro de Expression Design.

9. Para empezar a usar los colores que son parte de tu paleta, crea un nuevo objeto en Expression Design, podría ser un círculo, selecciónalo, expande el panel Color Swatch y selecciona alguno de los colores que se encuentran dentro de la paleta que acabas de crear para que sea aplicado a tu objeto.

10. Visita Microsoft.com/video para acceder a más videos relacionados a Expression Design.

Usando paletas de ColourLovers.com en proyectos WPF dentro de Expression Blend

Estos son los pasos a seguir para usar una paleta de ColourLovers en un projecto WPF dentro de Expression Blend (leer la siguiente parte para proyectos en Silverlight):

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. Lee la Parte II de este tutorial para aprender más acerca de los formatos disponibles. En este caso selecciona el botón “WPF” para descargar la paleta de colores como un WPF Resource Dictionary, que viene en un archivo con extensión .xaml.

4. Cuando aparezca la ventaja de diálogo para la descarga, elige la opción de Guardar como y decide en dónde quieres almacenar el archivo (puede ser en cualquier carpeta).

5. Abre Expression Blend y crea un proyecto WPF nuevo.

6. En el panel Project, haz click con el botón derecho del mouse sobre “Project” y selecciona “Add Existing ítem”. Esto careará una copia del archivo en este folder de proyecto WPF. También podrías seleccionar la opción “Link to Existing ítem”, la cual simplemente vincularía tu projecto con ese archivo, el cual podría estar en cualquier folder sin tener que realizar una copia del mismo.

7. Habiendo seguido cualquiera de los dos pasos anteriores, selecciona el archivo .xaml, que contiene una librería de recursos (la paleta de colores) y presiona Open.8. La paleta de color está ahora disponible en Expression Blend. Para utilizarla dirígete al panel Resources y expande la librería de recursos / paleta de colores que acabas de agregar; ahí se te mostrarán los diferentes colores disponibles dentro de la paleta que bajaste de ColourLovers.com.

9. Para utilizar uno de los colores, selecciona alguna forma en tu documento– un círculo por ejemplo – y arrastra el recurso (color), que quieres aplicarle y suéltalo cuando el cursor se encuentre sobre la figura. Expression Blend te pedirá que selecciones la propiedad de ese objeto a la cual quieras vincular. En este caso seleccionamos “Fill” para que rellene el objeto con el color que arrastramos hacia el objeto, aunque podríamos haber seleccionado Stroke o alguna otra propiedad del mismo.

10. Toma en cuenta de que siempre puedes agregar nuevos colores a tu paleta o modificar los ya existents. Usar Librerías de Recursos (Resources Dictionary), les permite a ti y a tu equipo compartir una librería simple de colores para asegurar que todos estén usando las mismas especificaciones en uno o varios proyectos.

Utilizando las paletas de ColourLovers en proyectos Silverlight dentro de Expression Blend

Estos son los pasos a seguir para incorporar una paleta de ColourLovers en un proyecto Silverlight dentro de Expression Blend :

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. En este caso selecciona el botón “XAML” para descargar un archivo de texto, que incluye una colección de recursos de brushes (colores). Este archivo tendrá una extensión .txt.

4. Cuando aparezca la ventaja de diálogo para la descarga, selecciona la opción de Guardar como y elige en dónde quieres almacenar el archivo (puede ser en cualquier carpeta).

5. Abre Expression Blend y crea un proyecto nuevo de Silverlight (al momento de escribir este artículo seleccionarías Silverlight 2, pero selecciona la última versión disponible de Silverlight cuando leas esto).

6. Fuera de Expression Blend, abre el archivo de texto que bajaste de ColourLovers. El archivo se abriría normalmente en Notepad o cualquier otro editor de texto.

7. Copia el texto, que viene el archivo y contiene la información de los colores y abre Expression Blend. En el panel Project, haz click con el botón derecho del mouse sobre App.xaml y selecciona “Open” (al haber seleccionado App.xaml en vez de otros archivos como podría ser Page.xaml, los colores estarán disponibles en toda la aplicación y no solamente una parte de la misma). Haz click en la pestaña XAML que se encuentra a un costado de tu documento para cambiar a la vista de código.

8. Ubica el tag “Application.Resources” y pega el texto que copiaste del archivo bajado de ColourLovers.com dentro de esa tag.

<Application.Resources>

<!– Resources scoped at the Application level should be defined here.–>

<Paste your color palette text here>

</Application.Resources>

El resultado sera algo parecido a esto:

<Application.Resources>

<SolidColorBrush x:Key=”Brush1″ Color=”#FF281930″ />

<SolidColorBrush x:Key=”Brush2″ Color=”#FF312F3D” />

<SolidColorBrush x:Key=”Brush3″ Color=”#FF195E55″ />

<SolidColorBrush x:Key=”Brush4″ Color=”#FFF7B00A” />

<SolidColorBrush x:Key=”Brush5″ Color=”#FFF37D2C” />

</Application.Resources>

9. Los colores que descargaste de Colourlovers ahora están listos para ser utilizados en tu proyecto Silverlight. Expande el Archivo App.xaml y verás que aparecerán los colores disponibles.

10. Selecciona uno de los colores/recursos y arrástralo sobre algún objeto – en este caso un círculo. Cuando liberas el color sobre el objeto, Expression Blend te pedirá seleccionar una propiedad del círculo a la cual quieras aplicarle el color. Por ejemplo, si seleccionas Fill, llenarás el objeto con el color que has elegido. Si seleccionas Stroke, harás que el borde del círculo tome el color que elegiste, etc.

11. Por supuesto, siempre puedes agregar o modificar los colores que se encuentran dentro de Resources. Eso sí, ten en cuenta que si cambias un color que está siendo utilizado por algún objeto, el color del objeto cambiará también.

A bajar colores!
Gracias

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.