Archivo de la etiqueta: windows8

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.

Sigue leyendo

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.

Sigue leyendo

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” :)