> Manuales > Manual de Aplicaciones Metro con HTML/JavaScript

Este es el primer artículo de una serie dedicada a las nuevas Aplicaciones Metro de Windows 8. En él analizaremos algunas de sus novedades más importantes, como son la arquitectura sobre la que se sustenta su desarrollo y los lenguajes y...

Este es el primer artículo de una serie dedicada a las nuevas Aplicaciones Metro de Windows 8. En él analizaremos algunas de sus novedades más importantes, como son la arquitectura sobre la que se sustenta su desarrollo y los lenguajes y estándares.

En Septiembre de 2011 Microsoft enseño al mundo, por primera vez, la última versión de su popular sistema operativo: Windows 8. Esta primera versión, conocida como Windows Developer Preview, nos permitió a los desarrolladores dar un primer vistazo al que está ha llamado a ser el sistema operativo más revolucionario de cuantos ha lanzado la compañía desde los tiempos de Windows 95.

Más allá de sus cambios estéticos, su fuerte orientación táctil o la promesa de lanzar versiones compatibles con procesadores ARM por primera vez, hubo una novedad que sobresalió por encima de todas para cualquiera que se haya ganado la vida alguna vez haciendo páginas web: en Windows 8 se podrán crear aplicaciones utilizando los lenguajes de la web, es decir, HTML, CSS, JavaScript, etc.

Este es el primero de una serie de artículos que analizarán paso a paso qué es una aplicación Metro, qué características tiene, cómo podemos programarla y cómo podemos ponerla a disposición de los usuarios mediante la nueva Windows Store que vendrá integrada por defecto en Windows 8.

Arquitectura en Windows 8

Antes de entrar en mayores detalles sobre una de estas aplicaciones y cómo podemos programarlas, empecemos por un vistazo general de la nueva arquitectura de Windows 8 y cómo encajan las Metro Apps en ella.

Durante el Build la imagen en la Figura 1 se convirtió en la más popular en todas las sesiones. Esta imagen describe los distintos módulos que presenta la arquitectura de Windows 8. La primera división la tenemos entre “Metro style Apps” y “Desktop Apps”.

Las Desktop Apps o Aplicaciones de Escritorio hacen referencia a las aplicaciones que han existido desde siempre en Windows. Como podemos ver se ofrece la posibilidad de programarlas con lenguajes como C#, VB, C o C++ contra APIs como .NET, Silverlight o el viejo Win32. También existe un espacio para crear aplicaciones web que corran dentro de Internet Explorer.

Pero la revolución no está en estas aplicaciones, que simplemente siguen la línea marcada por anteriores versiones del sistema operativo. El cambio está en las “Metro style Apps” o simplemente Aplicaciones Metro. El término Metro hace referencia a que todas ellas deberán seguir el nuevo estándar de diseño de Microsoft conocido como Metro y que ha sido exitosamente aplicado a productos como Windows Phone, el interfaz de Xbox o cientos de sitios de Microsoft.

Estas nuevas Aplicaciones Metro, como nos muestra el gráfico, podrán diseñar su interfaz gráfica con XAML o HTML/CSS, e implementar su funcionalidad con C/C++, C#/VB o JavaScript. No importa el lenguaje que se utilice, puesto que todos ellos serán un wrapper en torno a una única API que ofrezca todos los servicios del sistema operativo. Esta API se ha dado en llamar WinRT y ofrecerá avanzadas capacidades de comunicación y datos, gráficos, multimedia, dispositivos, impresión, etc.

Basadas en estándares

La programación de las nuevas Aplicaciones Metro con HTML/CSS/Javascript no van a tomar simplemente estos lenguajes, van a basarse en los estándares y buenas prácticas que ya forman parte intrínseca de la Web, o bien están en fase de desarrollo en el W3C con vistas a una próxima incorporación.

Esta decisión no sólo facilita la reutilización de los conocimientos de los desarrolladores web, sino que también abre la puerta a poder utilizar esquemas híbridos de desarrollo, con aplicaciones que empiezan en un entorno exclusivamente web con un conjunto de funcionalidades reducido y que, una vez probadas, facilitan la descarga de una aplicación Metro nativa en Windows 8 con una oferta de servicios para el usuario mucho más potente.

Este escenario ya ha sido previsto por Microsoft. En la versión Metro de Internet Explorer 10 existirá un botón específicamente diseñado para que, una vez que el navegador ha detectado que hay una aplicación en Windows Store asociada a la página web, permitir al usuario descargársela con un solo click.

En las nuevas Aplicaciones Metro podremos utilizar una implementación de HTML5 incluso mayor que la que ya ofrece Internet Explorer 9. No faltarán elementos bien conocidos por todos como las etiquetas

No faltará tampoco un amplísimo soporte a módulos CSS3, especialmente potente en el apartado de nuevos layouts que permitirán que, con una sola hoja de estilos CSS, podamos adaptar las aplicaciones a dispositivos con tamaños tan distintos como los que puede presentar una tableta o un ordenador de sobremesa. Gracias a CSS3 las Aplicaciones Metro podrán ser 100% adaptables.

Tampoco faltarán otras tecnologías como SVG o múltiples API de JavaScript: XMLHttpRequest, JSON, FileAPI, IndexedDB, WebSockets, WebWorkers, etc.

Para terminar, es importante destacar un aspecto de estas nuevas aplicaciones: aun cuando sus lenguajes tienen su origen en la Web, estas aplicaciones no tendrán una de las características fundamentales de este medio como es la navegación. Es decir, en las Aplicaciones Metro, como en una aplicación de escritorio clásica, no existirá la idea de avance o retroceso como en un navegador. Las aplicaciones podrán presentar distintas pantallas para diferentes vistas que su funcionalidad requiera, pero la transición entre ellas será fruto de la interacción del usuario con dicha aplicación y no consecuencia de pulsar en un enlace de hipertexto.

Conclusiones

Con Windows 8 Microsoft pretende poner en marcha una revolución que puede modificar el panorama del desarrollo de aplicaciones para siempre. Ofrecer a los desarrolladores web la posibilidad de crear aplicaciones nativas para Windows 8 con las mismas herramientas, lenguajes, estándares y buenas prácticas a las que están acostumbrados es abrir la puerta a un montón de talento. Esta puerta permitirá trascender los límites de la Web y facilitará la creación de una gran cantidad de aplicaciones atractivas que pueden marcar la diferencia entre el éxito y el fracaso en Windows 8.

A cambio Microsoft ofrece un sistema operativo potente, una tienda de aplicaciones más ventajosa que las existentes y un mercado potencial que, sólo en licencias Windows 7, supera los 500 millones de instalaciones. No hay ahí fuera ningún mercado que se acerque si quiera a esas cifras.

Estamos, sin duda, ante una gran oportunidad para los desarrolladores web y a lo largo de esta serie iremos explicando cómo sacarle partido.

Bibliografía

Curso sobre HTML5 (español)

Vídeo explicando cómo conectar sitios web y aplicaciones Metro (inglés):

Keynote en la apertura de Build 2011 (inglés)

Javier Holguera

Desarrollador senior con tecnología .NET en Payvision.

Manual