Agregando múltiples idiomas a una aplicación de Windows Store con Javascript y Angular

**Read this article in English here

El pasado jueves tuve la ocasión de asistir a una mesa redonda organizada por el grupo MSCoders relacionada con la localización de aplicaciones en entornos web.

Tras el evento, uno de los temas que más llamó mi atención fue la localización en la parte Javascript, y como tenía una aplicación ya en la Windows Store que usaba ese lenguaje, me pareció interesante intentar localizarla para poder ofrecerla en otros mercados.

Detectando el idioma del sistema

Para una aplicación Windows 8 el primer paso es detectar el idioma del sistema, y eso lo podemos hacer de la siguiente manera:

var culture = Windows.System.UserProfile.GlobalizationPreferences.languages[0];
var language = culture.substr(0, 2);

En este caso tomaremos la lista de lenguajes preferentes, y de esa lista obtendremos el primer elemento. Para poder cambiar el orden de los elementos y probar los diferentes lenguajes, podemos cambiarlo en el panel de control:

Captura de pantalla 2014-09-15 00.29.43

El resultado se muestra en formato cultura, es decir, español de España se mostraría como es-ES, e inglés de EEUU se mostraría como en-US. Para nuestro ejemplo inicial, solamente necesitamos el idioma, con lo cual hacemos un substring y obtenemos en o es respectivamente.

Agregando angular-translate

Angular-translate es un módulo de angular que nos permite definir de manera las claves y los valores para cada lenguaje, y realizar la traducción en función de la configuración. Para instalarlo, si no contamos con gestores de paquetes como bower, es tan sencillo como descargar el último paquete de github y agregarlo a nuestro proyecto.

Una vez instalado, tendremos que agregarlo a la configuración de nuestra app, en el apartado en el que definimos módulos externos en este caso pascalprecht.translate:

var karmacracyApp = angular.module('karmacracyApp', [
    'ngRoute',
    'karmacracyControllers',
    'pascalprecht.translate'
]);

Finalmente, configuramos los diferentes idiomas usando el código que hemos visto anteriormente para seleccionar un idioma acorde con el sistema operativo:

karmacracyApp.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.translations('en', {
        'LOGIN': 'Log in',
        'LOGIN_USERNAME': 'User name',
        'LOGIN_PASSWORD': 'Password'
    });

    $translateProvider.translations('es', {
        'LOGIN': 'Inicia sesión',
        'LOGIN_USERNAME': 'Nombre de usuario',
        'LOGIN_PASSWORD': 'Contraseña'
    });

    var culture = Windows.System.UserProfile.GlobalizationPreferences.languages[0];
    var language = culture.substr(0, 2);

    $translateProvider.preferredLanguage(language).fallbackLanguage('en');
}]);

Además, en caso de que el sistema tenga un idioma no controlado, estableceremos el inglés por defecto.

Uso

Para acceder a nuestras claves no necesitamos realizar ninguna configuración adicional en nuestros controladores, solamente necesitamos modificar nuestras vistas para que accedan a la información localizada:

<span class="loginMessage">{{ 'LOGIN' | translate }}</span>

En caso de que tengamos el idioma establecido a inglés (o a cualquier idioma no controlado), se mostrará el siguiente resultado:

en

En caso de que el idioma esté establecido a español, el resultado será diferente:

es

Como se ve, es una manera sencilla de poder localizar nuestras aplicaciones en javsacript para Windows Store

Conclusiones y pasos adicionales

Angular-translate proporciona una manera sencilla de localizar textos en nuestras vistas, por otra parte, Windows proporciona, a través de su API, la información que necesitamos para saber en qué idioma mostrar una aplicación.

Un paso adicional sería localizar controles winjs como los botones, que funcionan de manera diferente. Por otra parte se podría sacar un fichero de traducciones fuera de la configuración en formato json, útil si queremos distribuir esos ficheros para su procesamiento.

Enlaces adicionales

Preparando el examen 70-484

El pasado 30 de mayo aprobé el examen 70-484 de desarrollo de aplicaciones para Windows 8 con C#, lo que me acerca un paso más al MCPD en desarrollo de apps para la plataforma, y es a su vez una excusa y un reto para aprender más de la misma.

Al comentarlo por Twitter, algunos desarrolladores me preguntaron qué recursos había usado, y aquí va un pequeño resumen.

Leer más “Preparando el examen 70-484”

Consumiendo APIs REST con Windows 8 [I/II] (Evento 21/03)

El pasado 21 de marzo en la Universidad de Salamanca, estuvimos hablando de diferentes APIs REST.

Durante algo más de una hora vimos cómo a través de APIs Rest podemos consumir y crear contenidos desde nuestras aplicaciones. En este primer artículo de la serie, veremos cómo consumir servicios existentes, primero por consola, y luego a través de un cliente Windows 8.

Leer más “Consumiendo APIs REST con Windows 8 [I/II] (Evento 21/03)”

Viernes 22: Desarrollo para Windows Phone y Windows 8 en la Universidad de Salamanca

El próximo viernes 22 a partir de las 5 PM estaré en la Facultad de Ciencias de la Universidad de Salamanca con los chicos de @DotNetUSAL, hablando de desarrollo para aplicaciones Windows 8 y Windows Phone.

BZXb95zCcAI1UHD

Durante un buen tramo de la tarde estaremos viendo qué ventajas nos da la plataforma Windows Phone y Windows 8, y cómo aprovechar esas ventajas para que nuestras aplicaciones destaquen por encima del resto.

Las herramientas de desarrollo están disponibles en los siguientes enlaces:

Para hacer la charla más dinámica, usaremos VS Anywhere para que todos los asistentes que lo deseen puedan contribuir a la misma, y seguir las demos desde su ordenador. Si quieres aprender de una manera diferente, crea tu cuenta en http://vsanywhere.com y descarga el plugin:

VS Anywhere requiere Visual Studio Professional o superior, que puedes conseguir gratuitamente a través del programa Dreamspark. Si no lo tienes pregunta a los chicos de @DotNetUSAL cómo conseguirlo.

Por otra parte, tienes versiones de prueba de 90 días de cualquiera de las versiones de Visual Studio 2013 en este enlace: http://www.visualstudio.com/downloads/download-visual-studio-vs

Nos vemos en Salamanca!

Estado de conexión para aplicaciones Metro

Uno de los requisitos que necesita cumplir nuestra aplicación Metro para su correcta validación es que sea capaz de comportarse correctamente sin conexión a internet. En este artículo veremos 2 maneras de obtener esta información, o bien de manera activa, solicitando el estado del perfil de conexión, o bien de manera pasiva, suscribiendonos a un evento.

Solicitando el perfil de conexión

El siguiente código fuente hace uso de la clase NetworkInformation para consultar el tipo de perfil que tiene la aplicación. En caso de ser nulo, significa que el sistema no tiene ninguna manera de conectarse a Internet.

var profile = NetworkInformation.GetInternetConnectionProfile();
if (profile == null)
{
  //No tenemos ninguna conexión disponible.
}
else
{
  //Al parecer, tenemos internet, pero tenemos que ver que tipo.
}

Sin embargo, el hecho de tener un perfil de conexión no nulo no garantiza la correcta conexión a la red, ya que podemos tener un perfil válido sin conexión. Esto es lo que comprueba la segunda parte del código mostrado.

  var level = profile.GetNetworkConnectivityLevel();
  if(level == NetworkConnectivity.LocalAccess || level == NetworkConnectivityLevel.None)
  {
     //Tenemos conexión, pero no tenemos acceso a internet.
  }

Deberemos ser capaces de informar correctamente a nuestros usuarios del estado de la conexión de manera no intrusiva, este último parámetro es muy importante.

Recibiendo de manera activa los cambios que ocurran con la conexión

La segunda manera de saber el estado de la red, es que nuestra aplicación informe al usuario si existen cambios en la red (cambio de conectado a desconectado y viceversa). Afortunadamente la clase NetworkInformation proporciona un evento al que podemos suscribirnos y obtener esta información:

En la página principal. nos suscribimos al evento:

public MainPage()
{
  this.InitializeComponent();
  NetworkInformation.NetworkStatusChanged += NetworkInformation_NetworkStatusChanged;
}

Posteriormente, hacemos una llamada al dispatcher para poder actualizar la interfaz de usuario (ya que, de otra manera obtendremos una excepción):

async void NetworkInformation_NetworkStatusChanged(object sender)

  await Dispatcher.RunAsync(CoreDispatcherPriority.Normal,UpdateUI);
}

Finalmente, actualizamos la interfaz de usuario con el mensaje más apropiado:

private void UpdateUI()
{
  //Informar al usuario del cambio de condiciones de la red.
}

Conclusiones

Estos dos ejemplos los podemos combinar para mejorar la experiencia del usuario, y con ella la calificación de nuestra aplicación,

Más información:

Evento: Metro en Valencia

El pasado 3 de Abril me fui a la ETSE (Escola Tècnica Superior d’Enginyeria) de la Universidad de Valencia para hablarles de Metro, de desarrollo de aplicaciones para Windows 8, y de por qué es importante dar difusión al proyecto.

Tuvimos un interesante debate sobre qué tipos de aplicaciones encajan en la filosofía Metro y cómo un juego como Cut the Rope respeta esa filosofía, pese a que no tiene nada que ver con lo que esperamos de una aplicación de estilo metro, es decir, una tipografía clara, unos colores vivos, el número justo y necesario de opciones, entre otras.

Aquí dejo la presentación realizada con los ejemplos de código.

Ejemplos

Gracias a Samuel por la invitación y enhorabuena por la organización.

Hablando de Metro con los chicos del Mad.nug

Ayer pude asistir a la reunión mensual del grupo de usuarios de .net, esta vez como ponente, para hablar sobre 3 puntos: qué es metro, cómo nos afecta y cómo podemos aprovecharlo.

Estuvimos revisando conceptos tan maravillosos como el de baldosas vivas (live tiles) los encantos (charms) o las notificaciones tostada (toast notifications) que confirman lo que ya sabíamos, que nos encanta poner nombres intraducibles a las cosas, para que haya que decirlo en el idioma de turno (no hablemos de la siesta, que daría para otro post).

El evento tuvo un público excepcional, abanderado por el gran @davidsb, evangelista de cualquier cosa que se programe y/o se compile. Vimos las características que hacen únicas las apps Metro, cómo programar un cliente simple de Twitter con ellas (cariñosamente: Tweetstalker) y cómo aprovechar las características especiales que nos proporciona Metro para dar ese toque de distinción a nuestras apps.

Ejemplos

En este enlace podrás descargar el ejemplo completo visto en la charla.

Slides

Además, dejo las transparencias empleadas (disponibles vía slideshare)

Enlaces

Finalmente, algunos enlaces sobre temas que comentamos en la charla.

Me queda pendiente un artículo “Cómo sobrevivir tus primeros 3 días con windows 8 y no morir en el intento” :)

CodeMotion, la torre de babel de los lenguajes de programación

El pasado sábado 24 de marzo, tuve la oportunidad de asistir a CodeMotion, un evento por y para desarrolladores que lleva 5 años triunfando en Italia y que engloba prácticamente todas las plataformas conocidas (.NET, Java, Ruby, Python, Obj-C, Javascript…) y otras tantas que escapan a mi comprensión.

Desde las 9 AM hasta pasadas las 7 PM estuvimos absorbiendo conocimientos más de 1000 asistentes, en charlas que fueron, como en todo evento de gran escala, de todo tipo, muy buenas, buenas, regulares y malas.

Además de ello, contamos con la presencia de patrocinadores la mar de interesantes, entre los que estaban Microsoft, Tuenti, Amazon, Atlassian o Telefónica I+D, entre las más conocidas.

Entre las charlas y los temas que pude ver, estuvo (cómo no) Windows 8 con Javascript, paralelismo con .NET, usabilidad a la hora de crear APIs REST, servicios web usando Groovy, un lenguaje de la máquina virtual de Java muy parecido a lenguajes como Ruby o Python, y el cierre con la charla (awesómica) de David Bonilla, sobre cómo podemos convertir productos en plataformas, y cómo (como plataforma) establecer una relación con nuestros “desarrolladores”.

Ha sido una experiencia muy enriquecedora, ya que de vez en cuando es bueno salir de nuestra zona de confort, y aprender lenguajes nuevos, o nuevas maneras de comunicar ;). Me quedo con el objetivo global del evento: juntarnos a todos, independientemente del lenguaje que hablemos, en una torre de babel del mundo de la informática.

Espero que el el próximo año se repita, y poder asistir una vez más.

MS Blogger Haus: Impresiones

Con el programa Microsoft Blogger Haus terminado, toca recapitular todo lo visto y aprendido durante estos días en el Consumer Electronics Show de Las Vegas.

Introducción

Microsoft EMEA decidió invitar, para esta última edición en la que Microsoft estará presente en el CES, a varios bloggers de diferentes países de europa (Alemania, Austria, España, Italia, Portugal y Rusia) y de EEUU para que pudieran realizar una cobertura del mismo y a su vez tener contacto con personal de Microsoft que pudiese resolver dudas sobre el presente y futuro de la empresa.

Día 1: Presentaciones y Keynote

El programa comenzó al recibir el material que usaríamos para cubrir el evento. Tras las presentaciones iniciales estuvimos durante un rato hablando con miembros de las divisiones de hardware, phone y Windows que nos estuvieron contando algunos trucos sobre los dispositivos que ibamos a usar esos días:

  • Sony VAIO Y Series: Un portátil económico, de gama baja y considerablemente ligero con una pantalla de 11′ y una batería bastante decente, para poder redactar los post con calma.
  • HTC Titan: Un móvil Windows Phone 7.5 (Mango) con acceso a redes 4G (Como lo oyes, en EEUU ya van por la 4…). La posibilidad de tener un móvil con conexión a internet ha sido decisiva, ya que el CES no cuenta con Wifi pública para los asistentes, con lo cual habríamos estado prácticamente incomunicados ahí dentro.
  • Microsoft Arc Touch: La evolución del clásico Arc mouse, ahora cuenta con una superficie táctil y una superficie que se curva, bastante cómoda al uso. Cuando no se usa se puede guardar en un bolsillo fácilmente.

Tras las presentaciones, la keynote inaugural con Steve Ballmer, que resumí en el post anterior y una cena de bienvenida.

Día 2: Charlas temáticas

El segundo día estuvo destinado casi en su totalidad al encuentro con varios profesionales de Microsoft con los que estuvimos revisando diferentes áreas de producto, desde Windows Live hasta Microsoft Hardware, pasando por Xbox y Kinect.

Xbox

En este encuentro se resumieron algunas características comentadas en la Keynote sobre la integración de experiencias en la Xbox como es el caso de ESPN en EEUU, así como del trabajo que se está realizando con partners para poder ofrecer servicios de televisión y otras apps en el resto del mundo.

También se habló de la integración de Windows Phone con la Xbox, que de momento se emplea para control remoto y se comentó que era previsible la llegada de nuevos títulos que aprovecharan las características de integración entre ambas plataformas, así como la posibilidad de continuar el juego desde el dispositivo móvil.

Cut the Rope

El famoso juego de iPhone, iPad y Android se ha mostrado como ejemplo de aplicación desarrollada para Windows 8, y se ha mostrado como una aplicación realizada íntegramente en HTML5 que se puede usar ahora desde cualquier navegador moderno.

En la web de Zeptolab, los creadores del juego han colgado, además, un apartado llamado Behind the scenes en el que cuentan cómo hicieron el desarrollo del juego, llegando a liberar el código del menú de precarga que usan.

Más información en http://cuttherope.ie

Dispositivos actuales

El siguiente paso fue hacer un recorrido por los diferentes modelos de PC que se estaban presentando, en los que había una completa gama desde Ultrabooks, portátiles tradicionales, All-in-one y pantallas táctiles enormes. Las líneas que se presentaron de manera general eran bastante estilizadas, lo que demuestra que los fabricantes se están alejando del modelo de pc cuadrado y tradicional y pasando a usar diseños más personales.

Microsoft Hardware

La otra parte del evento, tras la comida, estuvo marcada por una charla con Ben Reed, de Microsoft Hardware, donde estuvimos hablando del hardware que hace Microsoft: Teclados, ratones, webcams y auriculares, como 4 líneas de negocio fundamentales. Esta división, que en 2012 cumple 30 años, mostró además nuevos modelos del Arc Touch, en conmemoración con el año nuevo chino. Hablamos además de usabilidad, de estudios desarrollados y de cómo influye la ergonomía en los accesorios fabricados.

Fin del programa con Windows 8 como plato estrella

El último día estuvo marcado por dos charlas destacadas: Windows 8 y Microsoft Next, además de un vistazo por la sección de servicios.

Windows 8. Se avecina algo grande

Pese a que no pudimos interactuar con la unidad expuesta, se apreció una suavidad en los movimientos, así como una diferencia de rendimiento considerable respecto a la versión developer preview, teniendo en cuenta que tuvimos dos terminales exactamente iguales ejecutando diferentes versiones del sistema operativo.

Hablamos de la tienda online (Microsoft Store), donde nos comentaron que además de aplicaciones Metro habrá compatibilidad con las aplicaciones tradicionales de Windows, donde los desarrolladores podrán usar la tienda para mostrar software ya existente. Además hablamos de los modelos de comercialización, en los que tendremos aplicaciones de pago, gratuitas y trials, que puedens ser o bien por tiempo, funcionalidad, etc. Esta limitación estará impuesta por el desarrollador y no por Microsoft.

Se nos mostraron además nuevos gestos para la interacción así como la característica Semantic Zoom, que permite agrupar nuestras apps en grupos y tener una vista general de todos ellos.

Finalmente, se nos confirmó que la siguiente versión será la Beta, saldrá a finales de febrero y contendrá mejoras significantes en cuanto a rendimiento, así que no nos decepcionaremos.

Servicios: Hotmail, Skydrive y Skype

En la sección servicios pudimos ver las mejoras en el gestor de e-mail de Windows Live, que mejora la gestión de listas de correo así como la introducción de carpetas para la gestión inteligente del correo.

Por otra parte pudimos hablar con un representante de Skype, que nos habló de la integración con Facebook, nos dio algunas cifras de usuarios (200.000 de usuarios activos cada mes), así como nos comentó que pese a la adquisición de la empresa por Microsoft, el desarrollo multiplataforma seguía siendo una prioridad.

Respecto a Skydrive, pudimos tener una charla un poco más tranquila con Harrison Hoffman, Product Manager de Skydrive, en la que estuvimos hablando de diferencias con Drobox o servicios como Google Docs, y las posibilidades futuras de la plataforma como la integración con Windows 8 o la posible fusión de Mesh con Skydrive para lograr una sincronización mediante una aplicación de escritorio.

Next: Kinect y Surface

El último apartado que tuvo el evento se llamó What’s Next, donde pudimos ver un ejemplo en funcionamiento de Kinect for Windows, un uso diferente por parte de los chicos Microsoft Research llamado Kinect Fusion.

Por otra parte pudimos ver la Surface 2.0, basada en la tecnología PixelSense, que permite detectar los elementos que se encuentran encima de la pantalla sin que sea necesario que estén físicamente sobre ella, ya que aunque no lo parezca la tecnología sigue usando cámaras.

Conclusión y fin del programa

Ha sido una experiencia inolvidable, así como la posibilidad de compartir ideas con el resto de los bloggers y proporcionar feedback sobre la experiencia con los productos directamente a Microsoft.

No puedo más que expresar mi agradecimiento a Microsoft EMEA por hacer posible este viaje, por la atención prestada y por la oportunidad que ha representado esto para mí. Gracias también a aquellos que leen el blog y que han permitido que sea posible esta cobertura.

Crónica de la Keynote de Steve Ballmer en el CES

El CES ha comenzado con la keynote inaugural presentada por Steve Ballmer, CEO de Microsoft. (y yo he estado ahí!):

Durante poco más de una hora se han presentado ultrabooks con Windows 7, Características de la interfaz Metro con Windows 8, características y terminales con Windows Phone, televisión interactiva con XBOX y Kinect han sido los protagonistas de la jornada.

He realizado el seguimiento para Trecebits, y puedes leer la crónica completa en este enlace: Microsoft retransmite por Facebook las novedades que presenta en el CES