MSDN Blogs
  • WarNov Developer Evangelist

    Diseñando Experiencias con Expression Blend

    • 2 Comments

    En estos últimos días, me he encontrado dictando varias conferencias en las que Expression Suite de Microsoft ha sido el protagonista. La recepción en general ha sido buena luego de mostrar las características de la herramienta. Sobretodo la integración entre los mundos del diseño y del desarrollo que ofrece Blend.

    BlendBanner

    Sin embargo en nuestro entorno, los diseñadores que la mayoría del tiempo han trabajado con herramientas Adobe no encuentran un punto clave para comenzar a aprender a manejar la Suite y adquirir los conocimientos necesarios para aprender a manejar la herramienta.

    Así que de las principales consultas que recibo es: Y cómo les enseño a mis diseñadores a manejar la herramienta?

    Una de las opciones más directas que siempre doy, es que accedan a los servicios (consultorías) de los entusiastas de Microsoft o cursos oficiales por ejemplo de CPLS.

    Pero hoy el mensaje va más allá gracias a dos excelentes recursos que tenemos mediante los cuales, los diseñadores con experiencia previa en herramientas Adobe, pueden acceder a unos cursos muy completos en los cuales aprenden fácilmente a dominar nuestra suite de Expression. El primer curso se enfoca en Windows y WPF y el segundo en Web y Silverlight.

    El primero de ellos es orientado a programación Windows con WPF:

    Designing Windows Experiences with Expression Blend (WPF)

    Entrenamiento

    Se trata del curso Designing Windows Experiences with Expression Blend. Un curso que provee el conocimiento experimental requerido para diseñar experiencias de usuario usando Expression Blend; herramienta con la cual podemos acceder a todo el poder de Windows Presentation Foundation.

    Es un curso enfocado a diseñadores gráficos especializados en Interfaces de Usuario que tengan una experiencia previa con Flash o Director. Además no se requieren conocimientos previos por ejemplo de desarrollo o del manejo de Visual Studio.

    Introducción

    El curso comienza enseñando la herramienta Expression Design con la que podemos general gráficos vectoriales de calidad profesional. Todo con procedimientos enteramente experimentales con los que llegan a construir una interfaz de un Video Player.

    Luego se enseñan otras herramientas de diseño que trabajan en conjunto con la Suite de Expression y que sirven para generar resultados más impactantes. En general son “Tips and Tricks” para preparar contenido 3D, gráficas, Video y contenido de audio para WPF, usando herramientas populares de diseño.

    Posteriormente nos enseñan cómo crear la interfaz del Video Player de una manera más avanzada usando Blend, para familiarizarnos con la herramienta.

    Colaboración

    Acto seguido nos ofrecen un proyecto pre-hecho que tiene toda la programación hecha, pero un diseño muy básico. Un capítulo de ejemplo que nos muestra la colaboración con el desarrollador. Los diseñadores toman este proyecto pobremente diseñado y lo convierten en un producto mucho  más atractivo.

    También hay otro escenario de colaboración en el que otro diseñador crea algunos recursos y assets previamente al diseño que se ejecuta. De esta manera el diseñador aprende a emplear assets generados en otra herramienta (por ejemplo Fireworks) y crea un ejemplo de una tienda de retail.

    Extras

    image

    Como si fuera poco también se ofrece un micro curso de UX para hacer énfasis a los diseñadores en los principios teóricos del manejo de la experiencia de usuario. Y muchos otros laboratorios para poder dominar la suite!

    El otro curso es:

    .toolbox (Silverlight)

    Es un curso online y más interactivo para aprender, crear y compartir experiencias con Silverlight y Expression Studio. Está creado completamente en Silverlight y ofrece una excelente experiencia de usuario genial para diseñadores y desarrolladores que quieran aprender más de la parte de diseño de aplicaciones Silverlight. Allí los participantes crean avatares para enriquecer su experiencia 2.0.

    image

    Tiene integración con Facebook y Twitter  y salones de clases. Básicamente se ofrecen dos tracks:

    • Escenarios de Diseño
    • Principios de Diseño

    Cada track ofrece How To Videos, Working Labs y características especiales que se desbloquean al mejor estilo de un videojuego en el que se van teniendo progresos a medida que nuestra reputación crece desde Rookie, hasta ser todo un All Star.

    image

    También tenemos ejemplos de aplicaciones de la vida real creadas por agencias expertas para Microsoft. Son aplicaciones avanzadas, cuyo código está completamente disponible para nuestro aprendizaje.

     

    Get Started!, Today!

    Otros Recursos:

    Silverlight 4 Training http://tinyurl.com/yebx3z7
    Curso en Videos de Silverlight http://tinyurl.com/yf32xl2


  • WarNov Developer Evangelist

    Silverlight Tour – Bogotá, Colombia (27Abr – 29Abr 2010)

    • 0 Comments

    Con permiso de mi buen amigo Rodrigo Díaz  me permito referenciar un post acerca de su visita a Colombia no solo para ser speaker de nuestro gran evento presencial para desarrolladores del 26 de Abril, sino para dictar también el curso de Silverlight 4 que hace parte del internacional Silverlight Tour:

    El Curso de Silverlight: Silverlight Tour Workshop en Español regresa a la capital colombiana el próximo día 27 de Abril.  Se llevará a cabo del 27 al 29 de Abril 2010 con un horario de 08:00 a 19:00 horas los tres días.  Les recuerdo que el material y todo el curso está completamente en Español :) .

    Asimismo, tengo el gusto de informarles que como una promoción especial en conjunto con Microsoft Colombia, esta fecha en Bogotá cuenta con 50% de descuento directo sobre el precio normal en Colombia.  Además, será el primero en utilizar el material actualizado a Silverlight 4 RC anunciado y liberado oficialmente la semana pasada en el marco del evento MIX 2010 en Las Vegas.

    Si desean comprender a profundidad la platataforma de desarrollo de Silverlight, conocer el uso de Expression Blend 4 (Beta), y prepararse para la construcción de aplicativos para Windows Phone 7 esta es su mejor opción.



  • WarNov Developer Evangelist

    MIX10 Keynote Día 1: Windows Phone 7 Series

    • 0 Comments
    Welcome to mix

    Este gran poster nos espero en el gigantesco Mandalay Bay en Las Vegas. Ciudad en la que cada año se congregan cientos y cientos de diseñadores y desarrolladores de todo el mundo para apreciar los últimos avances tecnológicos para mejorar la experiencia de usuario (UI) en los desarrollos de software.

    El keynote del primer día, estuvo nada menos que genial! Dirigido por el Vicepresidente Corporativo Scott Guthrie:

    WarNov y Scott Guthrie

    Con sus colaboradores mas cercanos, nos mostró a los asistentes un overview de la cantidad de tecnologías emergentes disponibles y en el día de hoy se hizo un alto enfoque en todo lo relacionado a Windows Phone 7 Series.

     

     

    Un Teléfono Amigable

    IMG_7907

    Y quien mejor para hablarnos de Windows Phone 7 que el señor Joe Belfiore. VP de Windows Phone 7!

    Para comenzar, se mostro como WP7 nace del concepto de usabilidad que se tiene con el Zune. El reproductor de multimedia de Microsoft, que desafortunadamente no es muy conocido en Colombia, y que realmente ofrece al usuario una experiencia bastante agradable.

    Es así, como ya no tenemos el Windows en “miniatura” que solíamos encontrar hasta Windows Mobile 6.5; y donde era muy complicado hasta el mero hecho de abrir el menú inicio. (Tocaba tener puntería)

    Hoy en día con WP7 el acceso a todos los comandos es bastante sencillo gracias a los Tiles que permiten con el dedo desplazarnos entre los aplicativos. (Adiós perdedizo Stylus!!!)

    Es un teléfono realmente amigable y fácil de usar. Enfocado claramente al manejo de redes sociales y reproducción multimedia.

    Un teléfono que se programa con Visual Studio .Net.

    IMG_7908 IMG_7909

    En este apartado, el señor Guthrie nos mostro como en cosa de 5 minutos escribía el “segundo cliente oficial” de Twitter para WP7. Solo escogiendo el tipo de proyecto para WP7 en Visual Studio 2010 ya tuvo un lienzo listo para trabajar y arrastrar un par de botones y luego usar la clase de WebClient para comunicarse con Twitter.

    Cómo obtenemos este tipo de proyecto en nuestro Visual Studio?

    Windows Phone 7 Series es un sorprendente sistema operativo para teléfonos móviles dada su innovadora interfaz de usuario y funcionalidad, así como la grandiosa plataforma de desarrollo sobre la cual nosotros como desarrolladores podemos construir rápidamente juegos y aplicaciones. Se vendrá toda una avalancha de dispositivos corriendo Windows Phone 7 Series (WP7). Y esto junto con la plataforma de desarrollo y el "Marketplace" hará que la demanda de WP7 de los consumidores sea muy alta, así que nosotros como desarrolladores podremos adoptar rápidamente la plataforma de WP7 para capitalizar este crecimiento.

    Para lograrlo, en el MIX10 se anunció la liberación del Windows Phone 7 Training Kit for Developers que incluye todas las librerías para programarlo de una manera similar a como programamos aplicaciones Silverlight, un emulador del teléfono y muchas otras herramientas! Este kit de capacitación les permitirá entrar en el nuevo mundo de WP7 por que le proporciona una explicación paso a paso de las herramientas a utilizar y algunos conceptos clave para la programación en esta plataforma! La información completa la encuentran aquí: http://developer.windowsphone.com/

    Un teléfono que tiene de todo!

    Ya muchas empresas han emprendido el viaje hacia el mundo de la nueva plataforma WP7. Por ejemplo Netflix el gran proveedor de alquiler y streaming de películas. Se creó esta aplicación que corre en WP7 y que nos permite entre otras cosas buscar títulos, ver los títulos recomendados, solicitar las películas a domicilio, y por si fuera poco, verlas en streaming directamente en nuestro teléfono gracias a las poderosas capacidades de reproducción de video de WP7 usando Silverlight 4 y OpenData operado desde Windows Azure

    IMG_7915

    Además se nos mostraron grandiosos juegos creados usando XNA! De manera que el mismo código de programación solo con unas pequeñas modificaciones fue usado para crear las versiones para PC y XBOX! One XNA!!!

    IMG_7904

    IMG_7946 IMG_7945

    Otra aplicación genial que vimos fue un reproductor de Comics:

    IMG_7918 IMG_7920 IMG_7922

    Vemos como nos permite ver toda nuestra colección de Comics, y para cada uno de ellos, leerlo como si fuera una revista normal o hacer acercamientos para ver mejor el arte del dibujo. Como si fuera poco, también se integra con Web 2.0, ya que permite comentar apartes de los Comics y publicar dichos comentarios en las redes sociales!

    Y hablando de redes sociales, me pareció de lujo la aplicación Foursquare que integra nativamente en el WP7 la información de todos nuestros contactos en todas las redes sociales en un solo aplicativo sencillo, fácil de usar y muy llamativo:

    IMG_7924 IMG_7927

    Permite ubicar a nuestros contactos (que tengan GPS) usando Bing Maps. Además permite la creación de eventos y los asistentes entonces tienen una guía basada en mapas para llegar al sitio de encuentro! Todo en WP7 gracias a SL, y programado con VS2010 y Blend 4. Osom!!!

    Otros aplicativos que vi bastante interesantes:

    • Shazam: Para poner al teléfono a oír una canción mientras descifra qué temas es y demás, usando bases de datos musicales online. De hecho, si hay una versión libre dela canción, nos permite descargarla o comprarla.
    • MLS: Un aplicativo que aprovecha tecnología de Message Push, que permite enviar información a aplicaciones WP7 aún cuando estas no estén corriendo actualmente en el teléfono. En este caso, información de los partidos de futbol era enviada al aplicativo y cuando el usuario abría dicha aplicación, encontraba ya toda la información actualizada.
    • Marionette: Trae ciertos “muñecos” personalizables a los que se les puede poner rostros de contactos y manipular como marionetas gracias al brillante manejo del Acelerómetro.
    • Loic Le Meur, gestor de seesmic nos enseñó la última versión de su cliente de twitter creado totalmente en WPF que ahora como novedad, permite a las empresas y personas, crear sus propios News Feed personalizados!! Pero para completar, nos mostró su brillante versión para WP7. Sencillamente genial…

    Para finalizar, nos sorprendieron con un aplicativo en WP7 que controlaba un robot cañón de camisetas real con el cual dispararon varias camisetas hacia la audiencia que luchó por ellas. Todo el manejo se hacía no solo con los botones del teléfono y el TouchScreen sino también con el acelerómetro:

    IMG_7936 IMG_7939 IMG_7976

    Todo esto fue desarrollado usando herramientas que afortunadamente tenemos disponibles desde AHORA!!!

     IMG_7950

    Las versiones Beta de Blend se pueden bajar de:
     http://expression.microsoft.com/en-us/cc507094.aspx

    Fue un gran KeyNote que nos dejó muy motivados para el resto de temas a tratar en el MIX. Hoy segundo día hemos visto que aún cuando fue tan impactante se quedó corto con todo el mundo de temas que se liberan en este año. Sigan conectados para más noticias y reviews!!



  • WarNov Developer Evangelist

    Lanzamiento de WebSiteSpark en Colombia

    • 0 Comments

    Aquí desde el MIX10 en Las Vegas, me complace informarles a todos los emprendedores, que en Microsoft Colombia tenemos muchas herramientas que nos permiten iniciar nuestros negocios y lo mejor de todo, GRATIS!!!

    Así es, GRATIS!

    Por esto me permito invitar a todos los que se consideren emprendedores en la industria del desarrollo de software para la Web, a que asistan a nuestro gran lanzamiento en el Salto del Ángel!!!

    A continuación los detalles de la invitación (hagan click en la imagen para registrarse)

    Click para Registrarse

    Los espero!!! smile_party



  • WarNov Developer Evangelist

    Transparencia en DIVs HTML (Div Opacity)

    • 2 Comments

    Cada mes acostumbro a cambiar el header de mi Blog usando una fotografía tomada por mí.

    Para este mes quise poner una foto del Palacio de Justicia ubicado en la Plaza de Bolívar en Bogotá.

    En esta foto fue difícil ubicar el título de mi blog, dado los colores de fondo. Así que la alternativa fue ponerle un color de fondo sólido al título.

    Sin embargo, un color sólido arruina la fotografía de fondo, pues no la deja ver para nada. Allí fue donde me nació la duda de cómo hacer un div transparente, para así poder modificar el estilo del blog.

    Investigando un poco, encontré que esto se hace distinto para distintas versiones de navegador. En especial, para Firefox se usa:

    opacity:0.6;

    Luego vi que esto no funcionaba en IE, pues me seguían apareciendo los fondos sólidos.  así que investigando un poco, encontré que esto se hace distinto para IE:

    filter:alpha(opacity=60);

    De esta manera, un estilo escrito así:

    #title {
    opacity:0.6;
    filter:alpha(opacity=60);
    }

    Produce este resultado independientemente del navegador:

    image



Page 1 of 1 (5 items)