Live Tiles para aplicaciones web en Windows 8

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Live-Tiles-para-aplicaciones-web-en-Windows-8.aspx

Windows 8 supone un cambio radical en cuanto a las interfaces de usuario se refiere, dentro del mundo Windows. Se ha eliminado por completo el clásico menú de inicio que nos había acompañado durante mas de 17 años (desde Windows 95) y todo gira ahora en torno a la nueva página de inicio:

Win8PantInicio

Como casi siempre que Microsoft lanza algo nuevo, y especialmente siendo un cambio tan radical como este, las opiniones están polarizadas y no suele haber término medio: o lo adoras o lo odias a muerte. Personalmente he de reconocer que fui de estos últimos cuando probé por primera vez Windows 8 hace alrededor de un año en las primeras versiones preview. No me gustaba nada. Lo cierto es que un año después no sólo he cambiado de opinión, sino que me gusta mucho, especialmente si dispones de una pantalla táctil (no tanto en un PC normal, donde la ventaja no es tan perceptible). Una vez que dominas los cuatro gestos que necesitas conocer y sobre todo cuando ves la gran ventaja que ofrece (incluso en escritorios no táctiles) el poder anclar al lateral aplicaciones “Windows Style” (o como se llamen ahora) o el uso del zoom semántico, le empiezas a coger el gusto. Desde luego ofrece algunas verdaderas ventajas objetivas frente al menú tradicional, al contrario que otros  experimentos como Unity de Ubuntu, que personalmente me repele. Lo único que de verdad echo de menos (y abrí un hilo en soporte para ver si lo traían de vuelta, sin éxito) es la lista de documentos recientes, si bien hay formas de suplirlo aunque sea algo más incómodo que el anterior.

También es cierto que, paradójicamente, los técnicos suelen ser los más conservadores en lo que respecta a cualquier innovación disruptiva en interfaces de usuario. Cuando se abandonó el menú de inicio más tradicional en Windows Vista / Windows Server 2008, cantidad de técnicos de sistemas lo odiaban y ponían el clásico otra vez, cuando (y esta vez no había discusión posible) el nuevo menú era infinitamente mejor y más productivo. En fin…

Sea como fuere, la nueva “Start Screen” está aquí para quedarse, nos guste o no, y hasta los más irreductibles tarde o temprano acabarán por usarla cuando no les quede más remedio que actualizar el sistema operativo, aunque sea dentro de unos años.

Live Tiles

Los “Live tiles” son esas baldosas cuadradas o rectangulares que tenemos en la pantalla de inicio. Su principal ventaja, aparte de ser más fáciles de pulsar con los dedos, es que permiten mostrar información relacionada con su aplicación subyacente sin necesidad de abrir ésta: directamente en el baldosín. Así, por ejemplo, si recibimos un nuevo correo, tenemos una cita en breve o nos mencionan en una red social, podremos verlo directamente en la pantalla de inicio en cada una de estas baldosas, las cuales se irán actualizando y cambiando a medida que haya nueva información que mostrar.

Para que los “Live Tiles” funcionen se necesita implementar la funcionalidad de actualizaciones por parte de los programadores de las aplicaciones. En caso contrario son simplemente equivalentes a los antiguos accesos directos.

En el caso de las aplicaciones y páginas web podemos añadir accesos directos desde el inicio a páginas concretas usando la versión “Windows Style” de Internet Explorer. Una vez en la página sacamos el menú contextual del navegador (deslizando el dedo desde abajo en un tablet o pulsando CTRL+Z en un ordenador normal), y usamos el botón con la chincheta para añadir la página a la pantalla de inicio como un “Tile”:

Win8PinToStart

Por defecto Internet Explorer crea un baldosín con el “favicon” de la página (de tenerlo, sino con un logo de IE), el título de la página actual y para el color de fondo de éste se elige automáticamente un color que se considera que es el predominante en la página (y que realmente no tiene porque serlo). La mayor parte de los sitios no están todavía adaptados, por lo que se suelen generar baldosas anodinas y todas iguales, lo que hace que sea difícil distinguirlas:

Win8TileIguales

En el grupo anterior tienes que fijarte en el texto para poder distinguirlas, lo cual dificulta mucho la acción y si tienes muchas ancladas al inicio te resultará problemático.

Nuestra aplicación o sitio web debería destacar de entre las demás y ofrecer su propio aspecto para estas baldosas, de forma que sea fácil de encontrar. Además, podemos aprovechar una sencilla API para incluso ofrecer información “viva” en la correspondiente baldosa, para que realmente sea una “Live tile”. Veamos como….

Personalización del “Tile”

Para controlar el aspecto que tendrá el “Tile” debemos añadir a nuestra página una serie de etiquetas “meta” en la cabecera, a saber:

  • application-name: es el texto que aparecerá en el baldosín por defecto (aunque el usuario podrá poner lo que desee). Si no lo indicamos se usará el título de la página actual.
  • msapplication-TileColor: es el color que queremos usar para el fondo del “tile”. Se puede expresar del mismo modo que lo expresaríamos para una hoja de estilos CSS, es decir, en formato RGB, usando la función rgb(), dando el nombre del color, etc…
  • msapplication-TileImage: es la ruta a la imagen que se usará para representar a nuestra aplicación. Conviene utilizar una ruta absoluta desde el raíz para que se encuentre siempre la imagen aunque estemos anclando una página hija, que no sea la principal. Esta imagen tiene que medir necesariamente 144×144 pixeles de tamaño y tener formato PNG. Esto es muy importante ya que si no se cumplen estas dos condiciones hará caso omiso de la misma (al recortar la primera prueba me confundí y la hice 143×143 y no me funcionaba: tardé un rato en darme cuenta, así que ojo). Es recomendable que el fondo sea transparente y no del mismo color que elegimos en la etiqueta anterior ya que éste puede variar ligeramente entre ambos según la pantalla, y presentar problemas si el color no es “web-safe”. Si hacemos el fondo transparente (una de las ventajas del formato PNG) nos aseguramos que siempre se verá bien.

Por ejemplo, en este blog (en JASoft.org) el código sería el siguiente:

   1: <meta name="application-name" content="JASoft.org" />

   2: <meta name="msapplication-TileImage" content="/blog/themes/JASoft_Stardust/W8StartMenuTile.png"/>

   3: <meta name="msapplication-TileColor" content="#D70D0C"/>

Con esto y podremos obtener un “Tile” decente (para gustos), pero que al menos va a diferenciarse claramente de los demás:

LiveTile_Icono

 

Lo  que no será todavía es “live”, es decir, quedará bonito en la pantalla de inicio pero tampoco nos ofrecerá mucha más funcionalidad.

Información dinámica en la baldosa

De momento tenemos un “Tile” personalizado, pero no es “Live Tile” ya que no actualiza su información nunca. Si nuestra aplicación ofrece información específica al usuario (por ejemplo, que hay nuevos mensajes), o es una página que actualiza de vez en cuando información útil para el usuario, puede resultar bastante útil mostrar iconos informativos o números en el propio baldosín. Para ello podemos instruir a la pantalla de inicio sobre este hecho e indicarle de dónde puede obtener esta información y cada cuánto debe actualizarla en el “Live tile”, sin necesidad de que el usuario visite la página.

Para ello disponemos de otra cabecera “meta” adicional denominada “msapplication-badge”. En ella se indicará la frecuencia de actualización (frequency) y la URL de consulta de la misma (polling-uri). Por ejemplo:

<meta name="msapplication-badge" value="frequency=360;polling-uri=http://www.jasoft.org/blog/updates.aspx" />

El parámetro “frequency” indicará la frecuencia en minutos que usará el sistema para llamar a la URL informativa y obtener la nueva información. No puede indicarse cualquier valor, sino que solamente están permitidos los siguientes:

  • 30 (media hora)
  • 60 (cada hora)
  • 360 (cada 6 horas)
  • 720 (cada doce horas)
  • 1440 (diariamente)

Si no indicamos valor alguno o si no es uno de la lista anterior el sistema usará el valor por defecto de 1440 minutos, es decir, que lo verificará una vez al día.

Como vemos no nos vale para obtener notificaciones en tiempo real (lo cual requiere otras técnicas pensadas para programas “Windows Style”, usando una red de notificaciones que ahorra batería en dispositivos móviles), pero sí que nos servirá para otro tipo de páginas o aplicaciones.

El parámetro “polling-url” sirve para indicar la dirección a la que se debe llamar para obtener la información de actualización. Esta petición se hace usando el navegador (es como si la hiciera el usuario) por lo que podemos hacer uso, por ejemplo, de las cookies que éste tenga almacenadas para personalizar la información devuelta. Así, por ejemplo, si anotamos en una cookie la fecha de su última visita podemos devolver el número de posts nuevos que hay en un blog desde entonces (OJO: yo no lo he hecho para el mío, jejeje). Si no queremos depender de cookies, podemos identificar al usuario en la propia URL y devolver así la información que le compete a éste.

El formato devuelto debe ser un archivo XML (ojo con las cabeceras si lo generamos dinámicamente a través de una página que no tenga la extensión .xml), y este es su contenido:

<?xml version="1.0" encoding="utf-8" ?>

<badge value="5"/>

Es decir, es un XML con un solo nodo llamado “badge” y que sólo puede contener un valor, especificado en su propiedad “value”. Así de simple y limitado.

Al contrario que con las notificaciones en tiempo real de las Apps, en este caso sólo podemos devolver un número (por ejemplo un contador de novedades) o un estado específico de entre una lista disponible.

Si devolvemos un número éste se omstrará en pequeño en la esquina inferior derecha del “Live Tile” (nótese el pequeño 5 en la figura):

Win8LiveTileNumero

Si el número es superior a 99 se muestra un “99+”.

En lugar de un número podemos utilizar algún valores de texto estándar, que se traducirán en un icono apropiado. Por ejemplo “none” quitará la notificación que hubiera, “activity” mostrará un iconito de unas flechas girando para indicar que se está llevando a cabo un proceso, “alert” un asterisco blanco para denotar que se requiere la atención, etc…

La lista completa es la siguiente:

Win8LiveTilesGlypths

Con esto no tenemos tanta potencia como una aplicación “Windows Style” nativa, pero nos da bastante juego para algunas aplicaciones web.

Actualización por código

Si nuestro “Live Tile” muestra al usuario que tiene 5 mensajes sin leer en nuestra aplicación web, y ello provoca que acceda a ésta pulsando el baldosín, sería interesante ir descartando las notificaciones del “Tile” a medida que lee los mensajes. Para ello IE ofrece una sencilla API JavaScript que nos permite actualizar mediante código el icono o número de notificaciones, sin necesidad de esperar a que el sistema lo refresque en el intervalo especificado.

Por ejemplo, para borrar todas las notificaciones nada más entrar en la página podemos escribir este código:

   1: if (window.external) {

   2:     if (window.external.msIsSiteMode()){

   3:         try {

   4:             window.external.msSiteModeClearBadge();

   5:         }

   6:         catch (err) {}

   7:     }

   8: }

Lo que hacemos es comprobar si existe el objeto external (ya que sólo está disponible en Internet Explorer) y también en el segundo condicional si la página actual está anclada al inicio (mediante la función msIsSiteMode). En caso afirmativo llamamos al método msSiteModeClearBadge que se encarga de limpiar cualquier notificación que hubiera en la página.

También podemos forzar que el sistema refresque las notificaciones actuales en el “Live Tile”, de modo que cuando el usuario abandone la página tenga lo más actualizada posible la baldosa usando el método msSiteModeRefreshBadge de external.

Incluso podemos de manera muy sencilla forzar el refresco de la baldosa periódicamente mientras el usuario está en la página llamando repetidamente a esta función desde un temporizador de JavaScript, así:

   1: if (window.external) {

   2:     if (window.external.msIsSiteMode()){

   3:         try {

   4:             setInterval( window.external.msSiteModeRefreshBadge, 60000);

   5:         }

   6:         catch (err) {}

   7:     }

   8: }

que provocará que se refresque cada minuto (cada 60 segundos).

En resumen

Con unos pocos pasos sencillos podemos dotar a nuestra aplicación web de un toque diferencial importante frente a otras para los usuarios de Windows 8, los cuales podrán distinguirla bien de entre todas las que tengan ancladas al inicio y recibirán además notificaciones simples cuando haya algo que comunicarles.

¡Espero que te resulte útil!

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *