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ó!).

Windows Phone 7: Primeros pasos

Ya es más que conocida la importancia que tienen día a día los llamados mobiles inteligentes. Actualmente en el mercado compiten IPhone, Android y mas recientemente Windows Phone 7 (WP7). Para los que desarrollamos en .NET tenemos algunas alternativas en lo que se refiere al desarrollo de aplicaciones mobiles, por ejemplo, para desarrollar en Android podemos utilizar MonoDroid gracias a su extensión para Visual Studio 2010 (thanks @ihuro por el instalador). Pero en este post vamos a concentrarnos en WP7.

Es importante resaltar que Windows Phone 7 rompe con la forma en que anteriormente se venían desarrollando las aplicaciones Windows Mobile, muestra de ello es la compatibilidad que trae para trabajar con tecnologías modernas como ser Silverligth y XNA.

Para comenzar a trabajar con Windows Phone 7 vamos a descargar Windows Phone 7 Developer Tools Package. Este conjunto de herramientas ya se encuentran en su versión final e incluye todo lo necesario para poder desarrollar aplicaciones mobiles completas (es bueno decir que todo lo incluido en el packcage es gratis). Las herramientas incluidas en el instalador son: Visual Studio 2010 Express for Windows Phone, Expression Blend 4 for Windows Phone, Silverligth for Windows Phone, XNA Game Studio for Windows Phone, Windows Phone Emulator Phone Registration Tool.

Al ejecutar el instalador se nos va a preguntar si queremos comenzar la instalación directamente o si solamente queremos instalar algunas de las características antes mencionadas. Aclaro que la duración de la instalación dependerá básicamente de la conexión a Internet que tengamos, ya que deberemos descargar aproximadamente unos 400 Mb.

Instalando WP7 Tools

Instalando WP7 Tools

Finalizada la instalación nos aparecerá un botón para comenzar a utilizar las herramientas. En mi caso ya tenía previamente instalado Visual Studio 2010 por lo que me abrirá dicha versión (de lo contrario se abrirá la versión de Express for Windows Mobile) .

Bien, ahora vamos a ver que al crear un nuevo proyecto tendremos disponible tanto proyectos Silverligth como XNA para desarrollar aplicaciones WP7. Para constatar esto vamos a crear un proyecto del tipo Silverligth for Windows Phone: dentro de Visual Studio 2010 hacemos click en el menú  “File\New\Project…” y luego en la pestaña “Silverlitgh for Windows Phone” elegiremos el tipo de aplicación “Windows Phone Application“.

Creando nuestro primer proyecto WP7

Creando nuestro primer proyecto WP7

Creamos el proyecto y veremos en el IDE algunas cosas que nos van a resultar familiares para aquellos que programamos aplicaciones web en Silverligth o aplicaciones de escritorio con WPF, por ejemplo los archivos XAML App.xaml y MainPage.xaml.

Entorno de desarrollo

Entorno de desarrollo

No es la idea de este post analizar en profundidad como esta compuesta la aplicación, sino simplemente mostrar el proceso de instalación y la creación de un proyecto de prueba. Para finalizar ejecutamos la aplicación y veremos que se nos habre el emulador del mobil con nuestra app:

Corriendo nuestra aplicación en el emulador

Corriendo nuestra aplicación en el emulador

Listo, ahora ya tenemos preparado el entorno de desarrollo y podemos comenzar a trabajar en nuestras aplicaciones WP7.

Para tener información actualizada sobre WP7 pueden visitar http://developer.windowsphone.com.