Expression Lab

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 :)

Conclusiones

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!