Internacionalización y Globalización de aplicaciones web


Introducción

En NET hay diferentes técnicas para internacionalizar/globalizar las aplicaciones. El objetivo del presente post es analizar las diferentes técnicas y la conveniencia de su uso. Las técnicas no son excluyentes sino que se pueden combinar en función de las necesidades específicas.
Hay dos bloques a considerar en la traducción. Por una lado encontramos los datos retornados en la parte servidor (.cshtml,.aspx…) y por otro lado los datos presentes en la parte cliente (javascript).

Bloque Servidor

Al asignar la Culture en .NET; las funciones dependientes del idioma automáticamente utilizarán los formatos asociados a la cultura.

  • 1.- La primera técnica consiste en tener las traducciones en ficheros de recursos por idiomas. Las paginas despliegan los recursos en función de los ficheros de recursos en función del idioma (en función UICulture de .NET). Es método es simple y conveniente para la mayoría de ocasiones. Se adjunta artículo que describe la técnica:
    Creating a Bilingual ASP.NET MVC 3 Application – Part I
  • 2.- La segunda técnica consiste en tener paginas separadas para cada idioma. Útil para casos en los que la traducción rompe el diseño de la página (arabe, chino…). Se adjunta artículo que describe la técnica:
    Simple ASP.Net MVC Globalization with Graceful Fallback

Bloque Cliente

  • 1.- Crear un fichero con las datos localizados para cada idioma. Y incluir el que pertoca en función del idioma. Es un mecanismo bastante básico, con el inconveniente que para funciones dependientes del idioma es redundante.
  • 2.- Retornar un marca en la respuesta (por ejemplo un meta de idioma). Utilizaremos esta marca para configurar el comportamiento de idioma.
    La aportación principal es que contempla también la configuración de funciones javascript dependientes del idioma. Por ejemplo podemos usar la libreria Globalize y configurarla adhoc. Para configurarla debemos llamar a la clase Globalize y podemos acabar de sobrescribir el idioma con nuestra configuración (mediante el metodo addCultureInfo). Además también se ofrece la posibilidad de la traducción de los textos; localizando los texto vía la técnica de los ficheros de recursos y añadiendolos (En messages del parámetro addCultureInfo).
    Se adjunto dos buenos artículos que son la base de esta técnica:

    En ultimo artículo utiliza otra librería de jquery de globalización.

Solución Propuesta para el Bloque Cliente

Combinando estas dos buenas ideas tenemos la siguiente propuesta. Se describen a continuación los pasos:

  • Añadir el Helper que nos retorna la marca de idioma.
    Ademas aprovecharemos para incluir los scripts de jQuery Globalize (Globalize Global y el local del idioma por defecto).

    using System;
    using System.Threading;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Infrastructure.Internacionalization
    {
        public static class InternacionalizationHelpers
        {
    				
            public static IHtmlString IncludeClientLanguage(this HtmlHelper html)
              {
                  var acceptLanguage = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString());
                  var sb = new StringBuilder();
                  sb.AppendLine("<script type=\"text/javascript\" src=\"/Scripts/globalize.js\"></script>");
                  sb.AppendLine(String.Format("<script type=\"text/javascript\" src=\"/Scripts/cultures/globalize.culture.{0}.js\"></script>");
                  sb.AppendLine(String.Format("<meta name=\"accept-language\" content=\"{0}\">", acceptLanguage));
                  return new HtmlString(sb.ToString());
              }
        }
    }
    
  • Llamamos al Helper en la pagina

    ...
    @Html.IncludeClientLanguage()
    ...
    

    Lo que nos desplegara:

    ...
    <script type="text/javascript" src="/Scripts/globalize.js"></script>
    <script type="text/javascript" src="/Scripts/cultures/globalize.culture.es-ES.js"></script>
    <meta name="accept-language" content="es-ES">
    ...
    
  • Obtenemos la marca y configuramos las traducciones de texto (accediendo al fichero de recursos creado) y/o modificando otras parametrizaciones del idioma (fecha, numéricos…).

    <script type="text/javascript">
        $(document).ready(function () {
    	
            var data = $("meta[name='accept-language']").attr("content");
    		
            Globalize.addCultureInfo(data, {messages :
                {
                    "TextToTranslate":
                    "@RTM.Interface.Resources.JsGlobal.JsGlobal.TextToTranslate"
                }
            });
    		
            Globalize.culture(data);
        });
    </script>
    
  • Automáticamente podemos usar la configuración del idioma y obtener traducciónes de texto.

    //Podemos formatear con el idioma
    Globalize.format( 1234.56, "c" );
    //Para obtener la traducción de un texto en Javascript
    Globalize.localize("TextToTranslate");
    
Anuncios
Esta entrada fue publicada en Desarrollo, web y etiquetada , , , , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s