Windows 8 – Creando nuestra primer aplicación Metro

Como ya sabran, hace unos meses se realizo el evento Build Windows en el cual se presentaron las versiones Preview de algunos productos de Microsoft, entre las cuales se encuentran Windows 8, Visual Studio 11 Express, Expression Blend 5, IE10… además de muchas otras novedades.

Build Windows

Build Windows

De Windows 8 una de las cosas que mas me llamo la atención respecto de su versión anterior Windows 7  fue la interfaz de usuario denominada Metro, la cual tiene cierta similitud a la de Windows Phone y esta orientada principalmente a los dispositivos “touch“.

Interfaz Metro de Windows 8

Interfaz Metro de Windows 8

Como podemos observar en la imagen de arriba, los accesos a las aplicaciones están organizadas en una especia de cuadricula, y cada una de ellla esta representada por algo similar a los “Live Tiles” de  Windows Phone 7  (son los “rectángulos” que ademas de hacer la función de “icono” de una app, pueden contener tener cierta funcionalidad extra, como por ejemplo mostrar información o notificaciones de forma dinámica sin necesidad de acceder a la misma). Esta de mas decir que los cambios respecto al tradicional escritorio (que veremos mas adelante no desapareció) son significativos.

La idea de este post es mostrarles los pasos que deben seguir para crear una app Metro utilizando Visual Studio 2011 Express y finalmente poder correrla en Windows 8.

Lo primero que vamos hacer es descargar e instalar Windows 8 Developer Preview desde aquí. Les recomiendo que descarguen la ISO Windows 8 Developer Preview with developer tools English, 64-bit (x64) que viene con el kit de desarrollo integrado. Respecto de la instalación, solo decirles que es similar a la de Windows 7.

Una vez que terminemos de instalar el SO e iniciemos sesión (podemos utilizar nuestra cuenta de Windows Live), lo siguiente que vamos a hacer será ejecutar Visual Studio 11 Express for WDP (el acceso lo podrán encontrar a la derecha de la pantalla de inicio).

Iniciando Visual Studio 2011 Express

Iniciando Visual Studio 2011 Express

Como verán, el clásico escritorio no desapareció (aunque tiene algunos cambios) y VS2011 sigue manteniendo el aspecto de VS2010, pero con varias mejoras, algunas de ellas las iremos nombrando a lo largo del post.

Continuemos, es el turno de crear una nueva aplicación Windows Metro Style con Javascript  – …sí, leyeron bien, una app de “escritorio” con Javascript – . En el menú seleccionamos “File/New/Project…” y dentro de los templates disponibles vamos a seleccionar “Javascript/Split Navigation” (dicho template esta pensado para crear aplicaciones del estilo lector de feeds muy simples y que podemos organizar en categorías):

Seleccionando el template del proyecto

Seleccionando el template del proyecto

Tal como comentaba antes, desde ahora vamos a poder crear aplicaciones de escritorio utilizando HTML5 , CSS y Javascript, una excelente noticia para quienes desarrollamos aplicaciones web! 🙂 (no obstante, tenemos la posibilidad de crear aplicaciones en C# o VB utilizando XAML para definir la interfaz).

Si inspeccionamos un poco el proyecto, vamos a ver elementos mas que conocidos: una carpeta con archivos CSS en donde tendremos nuestras hojas de estilos, documentos HTML 5 en donde construiremos la interfaz de nuestras apps y los script de Javascript que tendrán toda la lógica de las mismas.

Estructura del proyecto

Estructura del proyecto

Dentro de la carpeta winjs están las librerías Javascript que la gente de Microsoft ha creado especialmente para este tipo de aplicaciones. Esta nuevas libs nos proveen de un conjunto de archivos (CSS y JS) que nos permitirá construir y personalizar aplicaciones Metro de una manera sencilla.

Un ejemplo bien simple del uso de esta librería es la siguiente instrucción que nos permite iniciar la app:

WinJS.Application.start();

También podemos definir el comportamiento de eventos, como en el siguiente ejemplo:

WinJS.Application.onmainwindowactivated = function (e) {
    ...
}

Luego de crear la app lo que hice fue meter un poco de mano en el código y modificar la lógica existente para que podamos leer las entradas del blog (inicialmente solo utiliza datos estáticos que genera por código). No voy a entrar en detalles acerca del código en este caso, pero he utilizado entre otras cosas algunas funciones de la nueva librería WinJS, como por ejemplo la función WinJS.xhr que me permitió hacer un XMLHttpRequest (xhr) a los feeds del blog.

Otro punto a favor (aunque no una novedad), es la integración con Expression Blen 5 Developer Preview, el cual utilice para modificar algunos aspectos de diseño – sigo teniendo bien en el fondo espíritu de diseñador – :

Modificando la interfaz con Expression Blend

Modificando la interfaz con Expression Blend

Algunas de las mejoras de VS2011 que fui encontrando mientras “trabajaba” en la aplicación, fueron el Intellisense para Javascript, el editor de CSS (a continuación un ejemplo del selector de colores) y un buscador bastante mas práctico que el anterior:

Nuevas características de W8

Nuevas características de W8

Finalmente llego el momento de ejecutar nuestra app, así que le presionamos F5, esperamos a que compile y que no haya errores 😀 y a disfrutar de nuestro lector del blog Metro!

Mi primera aplicación Metro corriendo en Windows 8

Mi primera aplicación Metro corriendo en Windows 8

Si bien en este ejemplo no lo he utilizado, podríamos perfectamente trabajar con librerías como jQuery, así que seguimos sumando puntos a favor los desarrolladores web! 🙂

Este ha sido un breve resumen de lo que podemos hacer en Metro, espero que les haya sido de utilidad y que les sirva como base para empezar a trabajar con todo lo nuevo que se viene! (….mejor dicho, que llegó!).

CodeCamp2011.Resume();

CodeCamp 2011

CodeCamp 2011

El pasado 15 de octubre tuve la suerte de poder asistir junto a @joseolivera123 a la quinta edición de CodeCamp2011 organizado por la gente de Microsoft y el MUG que se realizó en la UAI (Universidad Abierta Interamericana) – Buenos Aires.

Para aquellos que no conocen, CodeCamp es un evento que reune a Estudiantes, Profesionales y Empresas del área de Informática, realizado por diferentes miembros y empresas de la comunidad, y Universidades desde el año 2007. Este año hubo unas 51 sesiones que abarcaban diferentes temáticas como Cloud, Web, Mobile, desarrollo de video juegos entre otros (cabe aclarar que la mayoría de las sesiones eran abordadas por tecnologías de Microsoft como ser Azure, SqlServer, ASP.NET MVC, Windows Phone, XBOX 360, XNA, Silverlight y otras como ser HTML5, NodeJs, Mono, etc).

Lamentablemente solo pudimos asistir a cuatro de estas sesiones, por lo que tratamos de inclinarnos por diferentes temáticas.

La primer sesión a la que asistimos fue Escalabilidad para sitios de alta demanda en Cloud Computing y los oradores fueron David Balogh y Leonardo Rosales. Esta sesión fue mas bien teórica y se trataron temas como virtualización, escalabilidad, balanceo de cargas, cache, media y base de datos en la nube. A medida que avanzaba la charla fuimos armando nuestra propia nube aplicando dichos conceptos. También nos comentaros sobre las arquitecturas de cloud utilizada en sitios con alta demanda, como por ejemplo Facebook.

La segunda sesión a la que asistimos fue Node.js + HTML5 + Windows Azure = juegos multiplayer realtime para millones y los oradores fueron Angel J Lopez, Marcelo Rodriguez y Matias Woloski. A medida que avanzaba la sesion fueron desarrollando un juego online multiplayer mientras explicaban y aplicaban tecnologías tales como HTML 5 y Javascript para el desarrollo del lado del cliente,  Node.js (servidor Javascript por demás interesante) para trabajar en los aspectos de comunicación  y sobre el final se subió a la nube utilizando Windows Azure.

La tercer sesión fue De 0 a 100 con Windows Phone 7 y los oradores fueron Federico LoisDiego Iglesias. En esta sesión se fue trabajando en una sencilla aplicación de Windows Phone 7 mientras se iban comentando los distintos aspectos a tener en cuenta en el desarrollo de la misma. Como bonus, se utilizo NoSql como motor de base de datos, aunque lamentablemente no se pudo ver en profundidad el tema.

Finalmente, la última sesión fue Mono: .NET en todas partes dictada por Martin Salias y Carlos Paez. La sesión comenzó con una introducción sobre la evolución de Mono y luego fueron realizando ejemplos de desarrollos de aplicaciones web, desktop y móviles en Linux, Mac OS, Windows,  iOS (iPhone) y Android. También nos mostraron algo por demas interesante de Mono, que son extensiones de .NET como por ejemplo la posibilidad de utilizar el compilador de C# como una librería, o en una consola interactiva y que por el momento no existen en el framework de MS.

Finalmente, en el auditorio de la universidad, hubo una presentación (mas bien comercial) realizada por varias personas de Microsoft, en la cual fueron presentando las nuevas tendencias de la marca, como ser Azure, WebMatrix, la alianza entre Nokia y MS con Windows Phone entre otros.

Recomiendo a todos aquellos que puedan, no se pierdan la próxima edición de este evento!