Siguiendo el título de este post, en esta ocasión voy a escribir sobre algo que nos sucede a muchos usuarios de Windows (y especialmente a los Diseñadores): Al utilizar el Visor de Imágenes (Photo Viewer) de Windows, las imágenes y el fondo del programa aparecen de color amarillo aunque en otros programas para visualizar imágenes se vean bien.

Había tenido este problema en varias ocasiones y por suerte o cosas del destino lo había podido solucionar siempre – utilizando algún calibrador, drivers o el pica/prueba – pero hasta ahora no sabía el “procedimiento oficial” para poder solucionarlo. A continuación comparto cómo hacerlo:

Cómo corregir el fondo amarillo en el Visor de Windows

1.- Ve al Menú Inicio y escribe “Color Management” en la caja de búsqueda y una vez que esa opción haya aparecido, presiona Enter o haz click con el mouse.

2.- En la ventana “Color Management” tilda la opción “Use my settings for this device“.

3.- En el recuadro “Profiles associated with this device” selecciona el Perfil de color que quieras eliminar y después presiona el botón “Remove”. Si te aparece un mensaje de advertencia al picarle en Remove selecciona Yes para confirmar.

4.- Presiona el botón Close.

5.- Una vez que termines de hacer esto tus imágenes deberían dejar de verse amarillas y aparecer tal como en otros programas. Si no sucede esto, reinicia tu computadora y todo deberá funcionar correctamente. En caso de que no se haya corregido, prueba borrar otro perfil de color desde Color Management (en caso de que tengas varios).

Acá comparto la misma imagen en mi computadora después de haber seguido los pasos anteriores:

Espero que esta guía les sea útil como lo ha sido  para mí y ya de paso les pido disculpas por poner los nombres/verbos en inglés, pero estoy usando Windows en Inglés.

¡Saludos y un gran 2010!
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!

Si eres aficionado a la tecnología, los video juegos y especialmente la interacción con computadoras el contenido de este post te va a encantar, pues trata sobre Project Natal, una nueva tecnología de Microsoft para Xbox que seguramente cambiará la forma en la que piensas sobre los video juegos… y de cómo los juegas.

Fue durante la E3 (Electronic Entertainment Expo) donde Microsoft presentó Project Natal un nuevo sistema de control “manos libres” para la Xbox que es sensible a tus movimientos y que permite jugar, sea solo o en grupo, sin tener que usar ningún tipo de control.

Para ver el video haga click aquí

y… cómo funciona?

Project Natal funciona mediante el uso de un sensor de movimiento, cámaras de video y micrófonos que capturan tus movimientos y los replican en los juegos sean estos de carreras, futbol, aventura o por qué no? en tu centro de entretenimiento.

A diferencia de otras consolas de juego, como la Wii, que permite un grado de interacción mayor que otras como el Playstation, Project Natal deja de lado los controles por completo, dando libertad al usuario de moverse e interactuar solamente con movimientos corporales.

Es un hecho que Project Natal rompe un paradigma muy grande y se presenta como una gran innovación tanto en el mundo del entretenimiento como en el Diseño de Interacción: la posibilidad de diseñar experiencias ricas se vuelve ilimitada y la Experiencia de Usuario y las interacciones humano-computadora reciben la atención que se merecen, siendo mejor pensadas, concebidas y sí…más entretenidas!

y….¿cuándo puedo tirar mis controles?

Antes de hablar de una fecha de lanzamiento, es importante mencionar que Project Natal no está pensado para hacer desaparecer tus controles, por lo que probablemente podrás tener juegos en los cuales lo utlices y otros en los que no.

Sobre fecha de lanzamiento no hay algo definitivo, pero  se rumora que podría  salir a la venta en la segunda mitad del 2010; así que mientras tanto podemos ir imaginando qué haríamos si en un juego de futbol nos tocara marcar a “La Pulga” Messi…se podrá hacer faltas?

Saludos y gracias .)
Daniel

Si asististe al MIX 09 o checaste los videos online, sabrás de qué se trata este post… y si no tuviste la oportunidad, te cuento que durante el MIX 09, en Las Vegas, se presentó un nuevo producto para Diseñadores Web y Maquetadores de XHTML/CSS  parte de la Suite Expression: SuperPreview.

¿Qué onda SuperPreview?

SuperPreview es un nuevo producto creado por Microsoft para Diseñadores Web y Programadores que nos permite verificar que al codear nuestros diseños en XHTML/CSS éstos se vean bien tanto en Internet Explorer (versiones 6, 7 y 8), Firefox y Safari. Buenísimo.

Su interfaz, sencilla de entender, nos permite comparar cómo diferentes browsers presentan las páginas que hemos diseñado o codeado. Por ejemplo sitios optimizados para Internet Explorer 8 no se ven igual en Internet Explorer 6 o bien, sitios para Safari no se despliegan de la misma forma que en Firefox.

Comparación de Alistapart.com usando Firefox e Internet Explorer 8

No está de más contarles que aparte de poder comparar entre diferentes browsers, SuperPreview nos permite abrir imágenes para compararlas con el sitio ya codificado (para todos aquellos “pixel perfectionists”) y asegurarnos así de que el XHTML/CSS está hecho exactamente igual a como se ve el sitio en el diseño. BUENA NOTICIA para los que trabajan con productos de Adobe: Aparte del obvio soporte para bmp, gif y jpg, puedes abrir archivos PNG y PSD. Interoperabilidad… quién?!

Como si fuera papel cebolla, podemos superponer la página e identificar errores, etc.

Los creadores… sabían que no puedo tener instalado IE 6, 7 y 8 al mismo tiempo?

Por supuesto que sí!  Es por eso que cuando utilices SuperPreview no necesitarás tener varias versiones de Internet Explorer (no imposible pero casi..), ni mucho menos Firefox o Safari. SuperPreview la tiene clarísima: Utilizando Cloud Services (o Servicios en la Nube), SuperPreview renderea tus sitios y páginas en servidores especialmente creados para eso y te presenta cómo se veran en otros browsers, en tu escritorio, sin dolores de cabeza ni esperas interminables.

Aparte de usar “papel cebolla” y cargar mis páginas… qué puedo hacer?

SuperPreview no se limita solamente a presentarte un sitio o página en dos paneles; con SuperPreview puedes revisar detalles muy específicos: desde crear Guías de referencia, utilizar reglas, hacer Zoom… hasta revisar el  CSS (márgenes, textos, alineaciones, imágenes, etc), HTML y DOM para asegurarte de que tus sitios se vean adecuadamente en los browsers principales. En una próxima entrega haré una explicación más específica de las funciones del programa y usaré algunos ejemplos de la vida real..

Ya para cerrar me gustaría  preguntarte qué haces para asegurar que tus sitios se vean bien en todos los browsers? Usas varias computadoras con diversas versiones de browsers? Sitios como browsershots? No te preocupas por el tema?  Estoy seguro que tendrás algo que compartir, lo estaré esperando!

Daniel Priego

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

La semana pasada fuí a un desayuno en donde se presentó el Capítulo Buenos Aires de la IxDA, organizado por Santiago Bustelo y al cual asistió un buen número de personas que trabajan en Diseño, Desarollo y asuntos relacionados…

El encuentro me encantó, pues además de conocer a gente que la tiene clarísima en Diseño de Interacción, User Experience y Usabilidad, pudimos hablar de temas que nos interesan a todos (que iremos charlando en las próximas reuniones), e ir conociendo qué es lo que han hecho los demás, qué inquietudes hay entre los que trabajamos en Diseño de Interacción y cómo se va desarrollando la profesión en Argentina y por qué no… en Latinoamérica.

Sin duda este desayuno fue un muy buen inicio para el grupo de IxDA y deja una buena base para las reuniones que se estarán haciendo en corto (que por cierto la próxima está marcada tentativamente para la semana del 23 de Marzo).

Para cerrar, me gustaría citar, no textualmente, lo que dijo Gabriel Celemin (quien trabajó en el equipo de Diseño de Yahoo! por ahí de 1998 y nos contó cosas muy interesantes), acerca de que más que ir a enseñar, todos estamos para aprender de los demás y compartir conocimientos sobre estos temas, pues tarde o temprano esto ayudará a difundir la importancia de la Experiencia de Usuario, la Usabilidad y el Diseño de Interacción.

Dejo esta foto como testimonio de un gran inicio (gracias Juan Lanus!)

IxDA Capítulo Buenos Aires

Infragistics acaba de sacar una herramienta buenísima para desarrolladores, arquitectos y diseñadores: Se llama Quince y es un explorador de Patrones de diseño de Experiencia de Usuario (UX) .

Quince está hecho en Silverlight y nos permite explorar una infinidad de patrones de diseño de experiencias de usuario, los cuales vienen bien explicados y con ejemplos buenísimos.

Un muy buen punto a su favor es la forma en la que los patrones están categorizados: podemos consultar según la actividad a realizar, por tags compartidas entre diferentes patrones y por wireframes. Ya si somos un poco más curiosos, podemos navegar através de todos los patrones que hay en el sitio.

Explorando patrones de diseño según la actividad que realizará el usuario final:

Quince - Patrones de Diseño de Experiencia de Usuario Al seleccionar alguno de los ejemplos, se nos presenta el patrón y la justificación del mismo así como ejemplos de casos reales que vale la pena consultar:Definición del patrón de diseño

Ejemplos reales de Patrones de diseño

Explorar diferentes ejemplos de wireframes para conocer dónde se ubican los patrones comúnmente y cómo son esos patrones:

Para cerrar con broche de oro, Quince permite registrarnos en el sitio para hacer propuestas de patrones de diseño: los envíos que hacemos son votados por los demás usuarios y el criterio de calificación está basado en qué mucho o poco se utilizan los patrones que hemos sugerido. Una muy buena forma de saber si los patrones que usamos son efectivos y confiables. ;)

A disfrutar Quince! Hasta la próxima :)

Quiero agradecerte la visita a este blog, Expression Lab. En él escribiré acerca de Usabilidad, Experiencia de Usuario y sobre las tecnologías que utilizo para crear aplicaciones ricas para escritorio y web.

Acerca de mí
Me llamo Daniel Priego García y soy Diseñador Web. Nací en México hace 26 años y desde hace dos y medio vivo aquí, en Buenos Aires.  Mi pasión número uno es el Diseño; me gusta mucho también la tecnología, viajar, la fotografía, la música y el futbol.

Trabajo en Microsoft Argentina como UXE (User Experience Evangelist) y aparte de escribir este blog, trabajo en la difusión de buenas prácticas en el diseño de interfaces de usuario tanto para software como para aplicaciones interactivas y sitios online, utilizando las herramientas que Microsoft ofrece para tal propósito: Silverlight, Windows Presentation Foundation (WPF) y las herramientas del Expression Suite.

¿Qué es la Usabilidad?
Últimamente escuchamos hablar de usabilidad por todos lados, de la importancia que tiene, los factores que la mejoran, etc. y  me pregunto qué entendemos por usabilidad realmente

La Wikipedia la define así:

 “La usabilidad se refiere a la elegancia y claridad con que se diseña la interacción del usuario con un programa o sitio web”

A partir de esta definición, podemos entender que la Usabilidad no pasa solamente por los colores, efectos o fotos que usemos en nuestras aplicaciones. Esas son cosas secundarias; lo importante es crear experiencias ricas que sean fáciles de usar por los usuarios finales. 

¿Y por qué Experiencia de Usuario?
El objetivo de trabajar con la Experiencia del Usuario es poder ofrecerles a todos ustedes, Designers y Developers, las herramientas, conocimientos y ejemplos necesarios para que puedan conocer y dominar las herramientas que Microsoft ha creado para ustedes. De esta manera podrán crear experiencias ricas visualmente y utilizando lo último en tecnología.

Ya para terminar y no hacerte más largo el rollo, creo que sería buenísimo saber qué piensas sobre Usabilidad y cómo la definirías. Espero tus comentarios!