Aplicaciones modernas

Creación de una aplicación para la Tienda de Windows con HTML5 y JavaScript

Rachel Appel

Descargar el ejemplo de código

El sueño de Bill Gates de que haya un computador en cada escritorio y en cada hogar no solo se hizo realidad, sino que la llegada de dispositivos como la tableta Surface ha llevado su sueño mucho más allá. Además de la Surface, ha habido una explosión de nuevos dispositivos ­orientados al cliente, en cada factor de forma posible. En otras palabras, los equipos están en todos lados.

Tenga en cuenta que en esos equipos hay más de mil millones de instalaciones de Windows existentes a lo largo del mundo, con 300 millones de licencias de Windows 7 vendidas durante los dos últimos años. Combine la base de instalación actualizable y actual de Windows con el mercado de rápido crecimiento que son los dispositivos de Windows 8 (como la Surface) y ya tiene la fórmula para el éxito de monetización. Este es un Windows renovado, la oportunidad sin precedentes para que pueda ganar dinero al publicar aplicaciones en la Tienda Windows.

La plataforma, el lenguaje y el conjunto de herramientas para crear aplicaciones para la Tienda Windows

Para crear una aplicación de Tienda Windows, necesita Windows 8, Visual Studio 2012 y cualquier SDK conforme a las necesidades de su aplicación, como el SDK de Windows Live o el SDK de Bing Maps. Esta instalación y configuración mínima del sistema hace que el desarrollo de aplicaciones en Windows 8 sea algo sencillo, desde la instalación a la implementación.

Una vez que haya instalado el software necesario, es hora de elegir un lenguaje. Si su experiencia en el desarrollo reside en la pila de Microsoft, como un desarrollador de Microsoft .NET Framework que escribe aplicaciones de Windows Forms, Windows Presentation Foundation (WPF) o de Silverlight con C# o Visual Basic, entonces crear aplicaciones de la Tienda Windows con XAML, C# o Visual Basic es la ruta de menor resistencia. Los desarrolladores de C++ también pueden usarlo como lenguaje compilado con XAML como su complemento GUI.

Si es un desarrollador web, incluido ASP.NET, puede aplicar su conocimiento existente sobre el estándar abierto HTML5, JavaScript y CSS3 directo al desarrollo de aplicaciones de la Tienda Windows. Los desarrolladores web pueden seguir usando varias bibliotecas JavaScript de terceros conocidas, como jQuery o Knockout. Para este artículo, usaré JavaScript como el lenguaje a elección.

Sin importar donde resida su experiencia en el desarrollo, al desarrollar aplicaciones nativas de Windows 8, la barrera de entrada es baja. Esto se debe a que Windows en tiempo de ejecución (WinRT) es una plataforma que contiene API que se ubican encima de los servicios principales de Windows, como se puede ver en la Figura 1.

Figura 1 Arquitectura de las aplicaciones de la Tienda Windows

Las API de WinRT le dan acceso a todo lo que Windows 8 tiene para ofrecerle, incluidas las API para hardware como cámaras web, ubicación geográfica, sensores de luz y acelerómetros. Por supuesto, los aspectos básicos de la plataforma como la administración de memoria, autenticación, globalización y procesamiento asincrónico (así como características de las aplicaciones de la Tienda Windows como búsqueda, capacidad de compartir y comunicaciones) también están fácilmente disponibles. Incluso hay API para manipular el audio y vídeo; sin embargo, si está escribiendo aplicaciones de JavaScript, los elementos HTML5 <audio> y <vídeo> funcionan a la perfección. Puede explorar todas las API en la página "Referencia de API para aplicaciones de la Tienda Windows" en bit.ly/ZCwcJE.

Principios de una aplicación de la Tienda Windows

Las aplicaciones de la Tienda Windows se ejecutan como experiencias completamente envolventes y en pantalla completa que proporcionan contenido simplificado al usuario, sin que la aplicación o sus comandos le estorben. Las aplicaciones de la Tienda Windows ofrecen una visualización de datos limpia y sencilla, lo que hace que la atención del usuario se enfoque en el contenido.

Dichas aplicaciones hacen cosas que las aplicaciones tradicionales de Windows o las aplicaciones web no podían hacer antes, como compartir, buscar y comunicarse con otros de una manera fácil y unificada, mediante elementos de Windows en tiempo de ejecución llamados contratos y que funcionan como enlaces entre las aplicaciones.

Una gran experiencia de usuario es una faceta clave en el desarrollo de aplicaciones para la Tienda Windows, desde la presentación y el diseño a la navegación y rendimiento de la aplicación. Los usuarios esperan encontrar coherencia entre las aplicaciones y entre estas y el sistema operativo. Lo más importante para las aplicaciones de la Tienda Windows es la experiencia de usuario y usar principios de diseño (como usar una fuente coherente, la silueta de la interfaz de usuario de Windows y un sistema de cuadrículas escalable), esto mejora el nivel de comodidad del usuario en el momento de usar su aplicación. Esta coherencia se transfiere tanto por las aplicaciones como por el mismo Windows 8.

Es importante asegurar que la entrada táctil y del mouse funcionen de manera confiable y coherente, ya que los hoy en día, los usuarios tienen más formas de interactuar con sus dispositivos informáticos en forma de mouse, plumas, toques, cámaras y sensores.

Debido a que los dispositivos que funcionan con baterías y con procesadores como ARM se están volviendo una parte importante del paisaje informático, Windows 8 debe administrar la memoria completa y por aplicaciones de manera estricta, para permitir una experiencia veloz y fluida, incluso cuando los recursos sean bajos. Las aplicaciones de Windows 8 disfrutan un ciclo de vida de proceso sencillo, para asegurar la mejor experiencia.

Mientras muchas aplicaciones podrían funcionar tan bien como aplicación de Tienda Windows, no todas son un buen candidato. Por ejemplo, mientras que Visual Studio adopta varios principios modernos de diseño de interfaz de usuario, su propósito es permitir que el usuario pueda ejecutar comandos (en otras palabras, programar). Ese no es un buen ajuste para una aplicación de Tienda Windows.

Plantillas de proyecto de aplicación de Visual Studio 2012 para Tienda Windows

Visual Studio 2012 presentó un conjunto de nuevas plantillas para el desarrollo de aplicaciones para la Tienda Windows en C#, Visual Basic, C++ y JavaScript. Independientemente del lenguaje, están disponibles los siguientes estilos de plantillas:

• En blanco: una plantilla básica con el mínimo de archivos necesarios para crear una aplicación de Tienda Windows.
• Cuadrícula: una plantilla que muestra una cuadrícula que usa la silueta de interfaz de usuario de Windows 8, junto con un código de plantilla para varias características, las que incluyen soporte técnico para la navegación y para la vista acoplada (lo veremos con más detalle más adelante). 
• Dividida: una plantilla que muestra una lista de elementos y detalles de los mismos en una vista de dos columnas, lo que hace que sea fácil para el usuario cambiar rápidamente entre elementos.
• Fija: una plantilla en blanco que usa un objeto ViewBox en la página default.html. Un ViewBox es un objeto WinRT que se usa en juegos.
• Navegación: una plantilla con una estructura de proyecto en blanco, además de navegación y un conjunto de activos básicos de aplicación (es decir, home.html, home.js y home.css) bajo el directorio /home.

Ya que la plantilla Cuadrícula contiene un código que ofrece muchas características de Windows 8, como soporte técnico para la vista acoplada, escalado de pantalla y navegación, es la manera perfecta de comenzar a escribir aplicaciones para la Tienda Windows.

Luego de crear una nueva plantilla de proyecto Cuadrícula para JavaScript, examinar su estructura revela un proyecto repleto de tipos de archivo web estándar, como .html, .css y .js files, organizados en carpetas bajo la raíz del proyecto. Puede depurar y ejecutar una aplicación de Tienda Windows al presionar F5 o al seleccionar Iniciar depuración en el menú Depurar.

En las plantillas de aplicaciones de la Tienda Windows, default.html es la página inicial para una aplicación de Tienda Windows y tiene como complemento a un archivo de script, /js/default.js, que contiene un código de administración básico para el ciclo de vida del proceso. Tal como con cualquier otro archivo HTML, default.html tiene el código que esperaba, incluidas las referencias de script y un nuevo marcado semántico HTML5, que define la estructura de la página. El siguiente fragmento de código se encuentra en la etiqueta default.html <body> y usa controles WinJS para la navegación y para cargar la página groupedItems.html:

<div id="contenthost"
  data-win-control="Application.PageControlNavigator"
  data-win-options=
  "{home: '/pages/groupedItems/groupedItems.html'}"></div>

Los atributos data-* son la manera que usa HTML5 para aplicar un código o comportamiento personalizado a un elemento HTML. En el desarrollo de aplicaciones de Tienda Windows, los atributos data-win-* suelen hacer referencia a los controles de JavaScript. Los controles de JavaScript de Windows son elementos WinRT integrados que se aplican a los elementos HTML para mejorar o modificar su comportamiento o estilo. Los atributos data-win-* son frecuentes en las aplicaciones JavaScript de la Tienda Windows, especialmente en el momento de un enlace de datos.

Acceso a datos en las aplicaciones de Tienda Windows

Como parte de la plantilla Cuadrícula, un archivo llamado data.js, dentro de la carpeta /js, contiene un código que crea un conjunto de datos de matrices, como también funciones para agrupar y manipular los datos. El archivo data.js también contiene datos de ejemplo que debe reemplazar con los propios. En este artículo, usaré datos para una aplicación de cuenta regresiva que muestra el número de días que faltan para un evento como vacaciones o días libres.

En el archivo data.js puede encontrar el único comentario // TODO, cerca del inicio del archivo. Reemplace el código que está bajo el comentario con uno propio para que se vea similar al fragmento de código, que hace una llamada XMLHttpRequest para recuperar datos JSON, además crea el conjunto de datos e incluso propiedades dinámicas como los campos daysToGo y message:

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

Al comienzo de data.js hay una línea de código que crea la instancia de un objeto WinJS.Binding.List, sabiamente denominado lista, y el código anterior empuja a los elementos individuales a esta Lista.

El objeto Lista permite el enlace entre los datos JSON o matrices JavaScripts y los elementos HTML. Una vez que la variable de la lista se complete con datos, use expresiones de enlace en el marcado HTML para enlazar a los miembros de la Lista con los elementos HTML.

Cuando lee datos JSON con un llamado a JSON.parse, los nombres en los pares nombre/valor coinciden con las propiedades de los objetos JavaScript en el tiempo de ejecución. Los siguientes datos JSON muestran cómo se asigna la estructura JSON a los miembros de la variable de los elementos en el fragmento de código anterior. Los campos clave, título, eventDate, imagen, color y grupo se asignan a las propiedades de objeto del elemento:

[{"key":"1","group":{"key":"group1","title":"Important Dates"},
"title":"Rachel's Birthday","eventDate":"01/13/2013",
"image":"/images/birthday.png","color":"#6666FF"},
{"key":"2","group":{"key":"group1","title":"Important Dates"},
"title":"Ada Lovelace Day","eventDate":"10/16/2013",
"image":"/images/ada.jpg","color":"#fff"},
{"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
"eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"},
{"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
{"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
"eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"},
{"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

Ahora que ya ha cargado los datos, necesita asegurarse de que el objeto Lista esté enlazado a los elementos HTML adecuados. Las modificaciones a la página /pages/groupedItems/groupedItems.html que se ven en la Figura 2 muestran el enlace de datos en acción.

Figura 2 Enlace de datos del objeto Lista a elementos HTML mediante controles WinJS

<!-- These templates are used to display each
  item in the ListView declared below. -->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
  <button class="group-header win-type-x-large win-type-interactive"
    data-win-bind="groupKey: key"
    onclick="Application.navigator.pageControl.navigateToGroup(
      event.srcElement.groupKey)"
      role="link" tabindex="-1" type="button">
    <span class="group-title win-type-ellipsis"
      data-win-bind="textContent: title"></span>
    <span class="group-chevron"></span>
  </button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
  <div id="myitem" class="item"
    data-win-bind="style.background: color">
    <img class="item-image" src="#"
      data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
    <h2 class="item-title" data-win-bind="innerText: message"></h2>
      <h6 class="item-subtitle"
        data-win-bind="textContent: eventDate"></h6>
    </div>
  </div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">How long until...</span>
    </h1>
  </header>
    <section aria-label="Main content" role="main">
      <div id="listView" class="groupeditemslist"
        aria-label="List of groups"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{  selectionMode: 'multi',
        tapBehavior:'toggleSelect' }"></div>
    </section>
</div>

Cada elemento HTML en la Figura 2 que contenga un atributo data-win-bind tiene una expresión de enlace de datos que coincide con el nombre de propiedad de la variable del elemento del fragmento de código anterior, por lo que todo lo que tiene que hacer es asegurarse de que las expresiones de enlace de datos coincidan con los nombres de los campos. No olvide asegurarse de modificar también las expresiones de enlaces de datos en las páginas groupedDetail.html e itemDetails.html, para que cuando un usuario navegue a ellas se muestren los datos correctos.

Ejecutar el proyecto en el simulador de Windows da paso a resultados similares a los que se aprecian en la Figura 3. (Puede aprender más sobre el simulador en bit.ly/M1nWOY).

Figura 3 Reemplazar los datos de ejemplo para crear una aplicación básica

Como puede ver, puede simplemente reemplazar el código de la plantilla de Visual Studio para obtener un acceso rápido a los datos. Pero por lo general los proyectos son bastante grandes o complicados, lo que dificulta la mantención. Si este es el caso, use el patrón Model-View-ViewModel (MVVM) para hacer que la mantención sea más fácil. Este patrón está muy documentado en Internet.

Ahora que su aplicación ya funciona, es el momento de aprovechar las increíbles características de Windows 8 que pueden hacer que su aplicación sobresalga del resto.

Personalización de marca de su aplicación de Tienda Windows

Teniendo en cuenta que el punto focal de Windows 8 es la página de Inicio, tiene sentido comenzar la personalización de marca ahí. La página de Inicio se completa con mosaicos vivos, que no son solo un montón de iconos cuadrados. En vez de eso, son la mejor manera de destacar y atraer a los usuarios a su aplicación. Los mosaicos vivos se llaman "vivos" por una razón y es porque en ellos puede mostrar información e imágenes de manera dinámica, lo que hace que su aplicación sea mucho más llamativa.

Las aplicaciones de la Tienda Windows necesitan tres imágenes de mosaico separadas, con las siguientes dimensiones de píxeles:

• Logotipo: 150 x 150 (mosaico estándar)
• Logotipo amplio: 150 x 310 (mosaico amplio)
• Logotipo pequeño: 30 x 30 (esto se ve solo en las listas de aplicaciones en la tienda)

Las imágenes pueden estar en cualquier formato de imagen conocido. Funcionan mejor las que tienen fondos transparentes. Abrir el archivo package.appxmanifest de la raíz del proyecto hace que se revele la paleta de configuración, donde puede seleccionar las imágenes del mosaico y establecer los colores de fondo. La Figura 4 muestra un mosaico estándar y uno amplio.

Figura 4 Mosaicos estándar y amplios para la aplicación de cuenta regresiva

Cuando configure los mosaicos también tendrá una buena oportunidad para configurar la pantalla de presentación, solo tiene que seleccionar una imagen y un color de fondo, no es necesario usar un código. Aunque los mosaicos y las pantallas de presentación son factores importantes al personalizar su marca de aplicación, puede hacer mucho más para personalizarla y pulirla. Puede leer sobre eso en bit.ly/M4HYmL.

Características de Windows 8 que no pueden faltar en su aplicación

Mientras su aplicación funcione hasta ahora, hay muchas características nuevas y API en el ecosistema de aplicaciones de Windows 8 que puede aprovechar para lograr que su aplicación se destaque entre las demás. Analizaré brevemente cada una de ellas.

AppBar una característica esencial para cada aplicación es AppBar, que es un control WinJS y se encuentra en default.html. Por lo general, AppBar no se ve, pero cuando los usuarios hacen clic con el botón secundario o se deslizan desde la parte superior o inferior de la pantalla, AppBar se muestra como una barra a lo largo de la parte inferior de la pantalla. Figura 5 muestra el marcado para una AppBar que contenga tres botones, así como sus escuchas de eventos correspondientes.

Figura 5 Una AppBar con botones para agregar, eliminar y exportar datos

// AppBar markup in default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'addItem', label:'Add',
    icon:'add', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'exportData', label:'Save',
    icon:'save', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'deleteItem', label:'Delete',
    icon:'delete', section:'selection'}" type="button"></button>
</div>
// Script in groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

Los comandos generales de AppBar deben estar a su derecha y los comandos contextuales deben ir a su izquierda. Cree el estilo de AppBar con CSS, ya que es solo un <div>.

Vista acoplada las aplicaciones de la Tienda Windows se pueden ejecutar en pantalla completa o en un modo llamado vista acoplada, que ocurre cuando el usuario "fija" la aplicación a la izquierda o a la derecha de la pantalla. Como ahora la aplicación tiene menos espacio de pantalla, su aplicación debería mostrar solo los datos necesarios.

Ya que el soporte técnico de la vista acoplada está integrado a la plantilla Cuadrícula, necesita comprobar que los datos se muestren bien cuando la vista esté acoplada y que muestre información pertinente y legible. La AppBar también funciona mientras la aplicación esté acoplada, así que es posible que eso también necesite algunos ajustes de estilo.

Zoom semántico esta nueva característica que permite una acción táctil de Windows 8 es una forma de agregar grandes cantidades de datos en una sola vista que es fácil de entender. Los usuarios invocan el zoom semántico de las siguientes maneras:

• Tacto: Gesto de reducir
• Mouse: Ctrl + la rueda del mouse
• Teclado: Ctrl - y Ctrl +

El zoom semántico es más para visualizar datos en forma descriptiva para ayudar con la navegación en vez de solamente exponer una vista aumentada de la misma. Si hay muchos datos, es mejor que el usuario tenga una vista de pájaro en vez de que tenga que desplazarse por una sobrecarga de información. Considere la mejor forma de presentar los datos para que sea descriptiva.

Buscar y compartir buscar y compartir datos entre aplicaciones son los aspectos básicos de las aplicaciones modernas. Ahora los usuarios pueden buscar a través de varias aplicaciones a la vez y luego compartir los datos que encuentren. O su aplicación se puede registrar a sí misma como un recurso compartido y aceptar los datos que comparten los usuarios de otras aplicaciones de la Tienda Windows. La comunicación entre aplicaciones nunca había sido tan sencilla y constante.

Controles de selector estos son controles típicos de Windows que se han actualizado para una interfaz de usuario moderna, como el Selector de archivos para abrir o el Selector para guardar archivos, o que han impreso cuadros de diálogo de configuración que han sido fundamentales para las aplicaciones de Windows durante muchas versiones.

Medios como las aplicaciones de la Tienda Windows creadas con JavaScript son completamente compatibles con HTML5, los elementos <audio> y <vídeo> funcionan de la misma manera que funcionan en las páginas web. 

Notificaciones del sistema las notificaciones del sistema son una forma de entregarle un mensaje momentáneo al usuario, sin importar si la aplicación está en uso o no. Las formas más populares de las notificaciones del sistema son ventanas emergentes con una alerta de correo electrónico y mensajes de texto en los teléfonos. Los mensajes de aviso contienen solo texto e imágenes y pueden servir como otra forma de atraer usuarios a su aplicación. Puede publicar las mismas notificaciones en la pantalla de bloqueo de Windows 8, para tener un vistazo rápido de cualquier mensaje pendiente.

Generation App

Para recapitular, Windows 8 es un Windows rediseñado y ostenta uno de los cambios más importantes en el sistema operativo desde Windows 95, en un mercado sin precedentes. Las plantillas de proyecto de Visual Studio integradas le permiten comenzar a publicar aplicaciones que le permitan hacer dinero más fácil y rápido que nunca, en el mercado para creadores de aplicaciones más grande que existe.

No hay suficiente espacio aquí para analizar todas las increíbles características que podría usar en su aplicación para Tienda Windows, así que le recomiendo encarecidamente que revise el programa Generation App (bit.ly/W8GenAppDev). Lo guía a través del proceso de generación de una aplicación para la Tienda Windows (o para Windows Phone) en 30 días, además de consultas y asistencia técnica y de diseño de manera gratuita, junto con consejos y recursos exclusivos.

Rachel Appel es evangelizadora de desarrollo en Microsoft en la ciudad de Nueva York. Puede ubicarla en su sitio web en rachelappel.com o por correo electrónico en rachel.appel@microsoft.com. También puede seguir sus últimas actualizaciones en Twitter en twitter.com/rachelappel.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Ian LeGrow