El mes pasado os hablé sobre que Microsoft está haciendo contribuciones a jQuery, y sobre algunas de las primeras contribuciones en las que estamos trabajando: Plantillas jQuery y Data Linking.
Hoy presentamos un prototipo para un nuevo plugin de jQuery para la Globalización que nos permite soportar la globalización en las aplicaciones JavaScript. Esto plugins incluyen información sobre Globalización para una 350 culturas. Vamos a publicar este pluging a en la comunidad como open-source.
Podéis descargar el prototipo del pluging de globalización de jQuery de nuestro repositorio de Github:
http://github.com/nje/jquery-glob
También podéis descargaros unos cuantos ejemplos que muestran algunos casos de uso aquí.
Entendiendo la Globalización
El pluging de globalización de jQuery nos permite parsear fácilmente y formatear números, monedas, y fechas en diferentes culturas con JavaScript. Por ejemplo, podemos usar el plugin para mostrar el formato de la moneda de una cultura:
También podemos usarlo para formatear fechas de manera que el día el mes aparezcan en el orden adecuado y los nomres de los días y meses adecuadamente traducidos:
Fijáos que el año árabe es el 1431. Esto es devido a la conversión que se usa en el calendario árabe.
Algunas diferencias culturales, como cantidades monetarias o nombres de los meses, son obvios. Otras diferencias culturales son sorprendentes. Por ejemplo, en algunas culturas, la agrupación de números se hace de forma diferente. En la cultura “te-IN” (Telugu en India), los grupos tienen 3 dígitos y luego 2. El número 1000000 (un millón) se escribe “10,00,000”. Algunas culturas no agrupan los números. Todas estas diferencias culturales se tratan en este pluging automáticamente.
Obtener las fechas de manera adecuada puede resultar algo fastidioso. Diferentes culturas tienen diferentes calendarios como el Gregoriano y el UmAlQura. Una sola cultura puede tener incluso varios calendarios. Por ejemplo, la japonesa usa tanto el Gregoriano como el Japones que tienen eras llamadas después de los emperadores japoneses. El pluging de Globalización incluye métodos para convertir fechas entre todos estos calendarios
Usando Tags de lenguaje
El plugin de globalización de jQuery usa los tags de lenguaje definidos en las RFC’s 4646 y 5646 para identificar culturas (mirar http://tools.ietf.org/html/rfc5646). Un tag de lenguaje esá compuesto por uno o más subtags separados por guiones. Por ejemplo:
| Tag | Nombre (en Inglés) |
| en-AU | English (Australia) |
| en-BZ | English (Belize) |
| en-CA | English (Canada) |
| Id | Indonesian |
| zh-CHS | Chinese (Simplified) Legacy |
| Zu | isiZulu |
Fijáos que un sólo lenguaje, como el inglés, puede tener varios tags. Los hablantes de ingles canadiense formatean los números, notaciones monetarias y fechas de forma difernte a los de Australia o Estados Unidos. Podéis encontrar el tag de un lenguaje para una cultura particular en la herramienta Language Subtag Lookup que podéis encontrar aquí: http://rishida.net/utils/subtags/
La descarga del pluging de globalización de jQuery incluye un directorio llamado globinfo que contiene información para cada una de las 350 culturas. Actualmente, este directorio contiene más de 700 archivos ya que se incluyen versiones minimizadas y un-minimizadas de cada archivo.
Por ejemplo, el directorio globinfo incluye archivos JavaScript llamados jQuery.glob.en-AU.js para el inglés australiano, jQuery.glob.idjs para Indonesia, y jQuery.glob.zh-CHS para Chino (simplificado).
Ejemplo: Estableciendo una cultura particular
Imaginemos que nos han pedido crear un sitio web aleman y que queremos que el formato de las fechas, monedas, y número usen los formatos alemanes correctos en JavaScript en el cliente. El HTML para esta página sería algo parecido a esto:
Fijáos en los tags span. Marcan las areas de la página en la que queremos formatear con el pluging de Globalizacion. Queremos formatear el precio del producto, la fecha y las unidades del producto en stock.
Para usar el pluging de globalización de jQuery, añadiremos tres archivos JavaScript a la página: la librería de jQuery, el jQuery globalization plugin, y la información de cultura para un lenguaje concreto:
En este caso, he añadido estáticamente el archivo jQuery.glob.de-DE.js que contiene la información de cultura para Alemania. El tag de lenguaje “de-DE” se usa para el alemán.
Ahora tenemos todos los scripts necesarios, puedo usar el plugin de Globalización para formatear el precio del producto, la fecha, y las unidades que hay en stock con el siguiente código JavaScript:
El plugin de Globalización de jQuery extiende la libreria de jQuery con nuevos métodos – incluyendo nuevos métodos llamados preferCulture() y format(). El método preferCulture() nos permite establecer la cultura por defecto que será por los métodos del plugin. Fijaos que l método preferCulture() acepta un tag de lenguaje. El método encontrará la cultura que encaje con el tag indicado.
El método $.format() se usa para formatear monedas, fechas y números. El segundo parámetro que se le pasa al método $.format() es un especificador de formato. Por ejemplo, pasando una “c” conseguimos que el valor se formatee como moneda. El archivo ReadMe en github detalla el significado de varios especificadores de formato: http://github.com/nje/jquery-glob
Cuando habrimos la página en un navegador, todo está formateado de acuerdo a la cultura alemana. Se usa el símbolo del euro para las monedas. La fecha se formatea con los nombres del día y el més. Finalmente, se usa un punto en lugar de la coma como caracter separador de números:
Podéis ver un ejemplo en el archivo 3_GermanSite.htm en los ejemplos.
Ejemplo: Permitir que el usuario cambie la cultura dinámicamente
En el ejemplo anterior estábamos diciendo específicamente que queremos globalizarla en aleman (referenciando el archivo jQuery.glob.de-DE.js). Ahora veamos el primero de unos cuantos ejemplos que muestran cómo establecer dinámicamente la cultura a un sitio web.
Imaginemos que queremos mostrar un desplegable con las 350 culturas en una páinga. Cuando alguien selecciona una cultura del desplegable, queremos que todas las fechas de la página se formatee usando la cultura seleccionada:
Aquí tenéis el HTML del ejemplo:
Fijáos que todas las fechas están contenidas en tags <span> con un atributo data-date (los atributos data-* son una nueva característica de HTML 5 que tambien funciona en navegadores antiguos). Formatearemos las fechas representadas por el atributo data-date cuando el usuario selecciona una cultura del desplegable.
Además de mostrar las fechas en cualquier cultura, incluiremos el archivo jQuery.glob.all.js de esta manera:
Ahora, vamos a poner un desplegable con todas las culturas disponibles. Podemos usar la propiedad $.cultures para obtener todas las culturas cargadas:
Finalmente, escribiremos un código jQuery que obtiene todos los elementos span con el atributo data-date y formateamos las fechas:
El método parseDate() se usa para convertir una representación de string de una fecha en una fecha JavaScript. El método format() se usa para formatear la fecha. El especificador de formato “D” hace que la fecha se formatee usando el formato largo.
Y ahora el contenido se globalizará correctamente en cualquiera de las 350 culturas. POdéis ver el ejemplo ejecutándose en el archivo 4_SelectCulture.htm de los ejemplos
Ejemplo: Cargar archivos de globalización dinámicamente.
Como mencioné en la sección anterior, deberíais evitar añadir el archivo jQuery.glob.all.js a una página mientras sea posible ya que es muy grande. Una mejor alternativa es cargar los archivos de globalización que necesitemos dinámicamente.
Por ejemplo, imaginemos que hemos creado un desplegable que muestra una lista de lenguajes:
El siguiente código jQuery se ejecuta cuando un usuario selecciona un lenguaje del desplegable. El código comprueba que el archivo de globalización no se ha cargado ya. Si no se ha cargado el archivo de globalización se carga dinámicamente usando el método $.getScript().
Llamamos al método globalizePage() después de que se carge el archivo de globalización, y contiene el código de cliente necesario para realizar la globalización.
La ventaja de esta solución es que evitamos tener que cargar el archivo jquery.glob.all.ja. En su lugar vamos cargando los archivos que vamos necesitando, y sólo se cargan una vez.
El archivo 5_Dynamic.htm de los ejemplos muestra cómo implementarlo.
Ejemplo: Establecer el lenguaje preferido del usuario automáticamente.
Muchos sitios detectan el lenguaje de los usuarios de sus navegadores y globalizan el contenido de esa manera. Un usuario puede indicar su lenguaje en us navegador. Entonces, cuando el usuario pida una página, este lenguaje se incluye en la petición en la cabecera Accept-Language.
En Internet Explorer podemos establecerlo de la siguiente manera:
- Vamos al menú HerramientasOpciones de internet
- Seleccionamos el tab General
- Hacemos clic en el botón Lenguajes en la sección Apariencia
- Hacemos clic en el botón Añadir para añadir un lenguaje a la lista de lenguajes.
- Movemos nuestro lenguaje favorito a la primera posición de la lista.
fijáos que podemos listar varios lenguajes en el diálogo de preferencias de lenguaje. Todos estos lenguajes se mandan en el orden que se han listado en la cabecera Accept-Language:
Accept-Language: fr-FR,id-ID;q=0.7,en-US;q=0.3
Sin embargo, no se puede obtener el valor de la cabecera Accept-Language desde el cliente JavaScript. Microsoft Internet Explorer y Mozilla Firefox soportan unas cuantas propiedades de lenguaje que se exponen en el objeto window.navigator, como windows.navigator.browserLanguage y window.navigator.language, pero estas propiedades contienen el lenguaje del sistema operativo o el lenguaje de la edición del navegador. EStas propiedades no permiten obtener el lenguaje que el usuario a indicado como su lenguaje favorito.
La única forma de obtener los lenguajes del usuario (el valor de la cabecera Accept-Language) es escribir código en el lado del servidor. Por ejemplo, la siguiente página ASP.NET usa la propiedad de servidor Request.UserLanguages para acceder a las preferencias del lenguaje del usuario en una variable JavaScript llamada acceptLanguage (que nos permite acceder al valor usando JavaScript cliente):
Para que este código funcione, la información de cultura asociada con el valor acceptLanguage debe estar incluida en la página. Por ejemplo, si la cultura predeterminada de alguien es fr-FR (Frances de Francia) tenemos que incluir o el archivo jQuery.glob.fr-FR.js ó jQuery.glob.all.js o la información de cultura no estará disponible. El ejemplo “6_AcceptLanguages.aspx” de los ejemplos muestra cómo implementarlo.
Si no se ha incluido el archivo necesario para la cultura del usuario en la página, entonces el método $.preferCulture() usará la cultura neutral (por ejemplo, usando jQuery.glob.fr.js en lugar de jQuery.glob.fr-FR.js). Si la cultura neutral tampoco está incluida el método $.preferCulture() cargará la cultura por defecto (Inglés).
Ejemplo: Usar el plugin de globalización de jQuery con UI DatePicker
Uno de los objetivos del plugin de Globalización es hacer más sencillo crear widgets jQuery para que puedan usarse en diferentes culturas.
Queríamos asegurar que el plugin funcionase con plugins UI de jQuery ya existentes como el plugin DatePicker. Por ello, creamos una versión parcheada del plugin DatePicker que puede aprovecharse del plugin de Globalización cuando renderiza el calendario. La siguiente imagen ilustra qué ocurre cuando añadimos los plugins de Globalización y la versión parcheada del DatePicker a una página y selecccionamos Indonesio como cultura predeterminada:
Fijáos que la cabecera de los días de la semana se muestran usando las abrebiaturas Indonesias. Más aún, los nombres de los meses se muestran en Indonesio.
Podéis descargar la versión parcheada del DatePicker desde nuestro sitio github. O podéis usar la versión incluida en los ejemplos que se usa en el archivo de ejemplo 7_DatePicker.htm.
Resúmen.
Me alegra hablaros sobre nuestra participación con la comunidad de jQuery. Este plugin de Globalización es el tercer plugin que hemos publicado.
Valoramos mucho todo el feedback y las propuestas de diseño de los templates de jQuery y de los prototipos de data-linking que publicamos a principios de año. También queremos agradecer los equipos de jQuery y de jQuery UI por trabajar con nosotros para crear estos plugins.
Espero que sirva.
Scott.
P/D: Podéis seguir a Scott en twitter: twitter.com/scottgu
Traducido por: Juan María Laó Ramos.
juanlao 
Muy interesante. Lástima que el DatePicker no muestre más que el calendario gregoriano. Salu2!
LikeLike