Globalización y localización en Mvc ASP.NET
La internacionalización es el proceso que se utiliza para ofrecer funcionalidades en diferentes idiomas y que engloba dos aspectos: globalización y localización. La globalización es el proceso de diseñar aplicaciones que soportan diferentes idiomas de zonas geográficas distintas. La localización, en cambio, consiste en adaptar una aplicación globalizada a un determinado lenguaje y región.
A veces podemos encontrarnos estos términos abreviados en el siguiente formato:
I18N(Internationalization), G11N(Globalization), L10N(Localization): Las letras se refieren a la primera y última letra de la palabra, el número es la suma de caracteres entre la primera y la última letra.
Cuando queremos localizar un idioma tenemos que especificar su cultura y su región. Por ejemplo, para español de España se representa como: “es-ES”. Estas siglas se basan en un estándar internacional llamado ISO 639 (https://en.wikipedia.org/wiki/ISO_639). La cultura viene reflejada en las letras previas al guión (es) y señala el idioma oficial, mientras que la región (ES), representa la variación cultural de ese idioma en una localidad geográfica concreta. Si se va a utilizar el español de Chile se representaría como: “es-CL”.
Cuando se trata de traducir un texto podemos utilizar una cultura global sin región: “es», nuestra aplicación no perdería funcionalidad pero si queremos trabajar con usos horarios o monedas, las especificaciones regionales adquieren mucho sentido.
¿CÓMO ADIVINAMOS EL IDIOMA DEL USUARIO?
En cada solicitud HTTP, hay un campo de encabezado llamado “Accept-Language” que determina qué idiomas admite el navegador del usuario. Por ejemplo:
Accept-Language: en-us,en;q=0.5
En este caso el usuario prefiere el inglés de Estados unidos (“en-US”) pero puede aceptar otros tipos de inglés (“,en;”). El parámetro “q” indica una estimación de la preferencia del usuario para ese idioma. Estos parámetros se pueden cambiar en las opciones de configuración del navegador que se utilice.
GLOBALIZANDO UN NUEVO PROYECTO
Vamos a crear un proyecto Mvc donde vamos a incluir las siguientes características:
- La aplicación será capaz de detectar automáticamente el idioma del usuario a través de su navegador y adaptarse.
- Añadiremos imágenes, fecha y botones para cambiar de idioma toda la aplicación.
- Veremos cómo manejar monedas y símbolos monetarios.
El proyecto será un proyecto Mvc ASP.NET Web Application y consistirá en una pantalla principal donde se verá un mensaje de saludo, según el idioma que se tenga configurado en el navegador del usuario, el saludo cambiará. Para este proyecto vamos a utilizar Visual Studio 2017. Vamos a ello paso a paso.
Abrimos un nuevo proyecto “File -> New Project”. Utilizaremos la plantilla “MVC”.
Vamos ahora a crear un recurso donde vamos a poner todas las traducciones (recursos) que queramos implantar en nuestro proyecto MVC. Nos creamos la carpeta de sistema App_GlobalResources sobre el proyecto.
Hacemos clic derecho en App_GlobalResources y elegimos el comando de menú contextual «Add-> New Item”. Luego «Resources File» y asignamos el nombre «Resources.resx». Esta será nuestro idioma predeterminado (es-ES). Agregamos los siguientes nombres y valores al recurso:
Tenemos que crear tantos recursos .resx como traducciones queramos en nuestra página web. Vamos a crear ahora un nuevo archivo de recursos para cambiar el idioma a “en-US” con los parámetros “Name” ya utilizados, pero con el “Value” de la nueva traducción:
Para recuperar este texto en la vista vamos a meterlo en un ViewBag. Para ello nos vamos a la carpeta “Controllers” y editamos el ActionResult Index en “HomeController”:
public ActionResult Index()
{
ViewBag.Bienvenido = Resources.Resource.Bienvenido;
return View();
}
Podemos crear tantos ViewBag como textos/palabras queramos traducir y lo incluimos (Viewbag) en la vista. Para ello nos vamos a la carpeta “Home” dentro de “Views” y hacemos doble clic en “Index.cshtml”. Lo borramos todo e incluimos las siguientes líneas:
@{
ViewBag.Title = «Home Page»;
}
<div class=»jumbotron»>
<h1>@ViewBag.Bienvenido</h1>
</div>
Antes de terminar tenemos que configurar el archivo “Web.config” de nuestro proyecto para habilitar la globalización de nuestra web. Para ello dentro de la sección <system.web> vamos a incluir los parámetros para que nuestra aplicación pueda captar el idioma del usuario a través del navegador:
<globalization culture=»auto» uiCulture=»auto» enableClientBasedCulture=»true»/>
Para hacer esta prueba he configurado el navegador Firefox en inglés y el navegador Google Chrome en español. Quedando así:
GLOBALIZACIÓN CON IMÁGENES
Vamos ahora a incluir una imagen de una bandera justo debajo del título de una forma muy sencilla. En primer lugar, nos descargamos de Internet dos imágenes pequeñas, una bandera de España y otra del Reino Unido. Creamos una carpeta llamada “Imagenes” en el proyecto e incluimos las dos imágenes. Incluimos la dirección de las imágenes en el valor del recurso:
Vamos al controlador para incluir un ViewBag con la dirección de la imagen:
public ActionResult Index()
{
ViewBag.Bienvenido = Resources.Resource.Bienvenido;
ViewBag.Flag = Resources.Resource.Flag;
return View();
}
Ahora incluimos ViewBag.Flag a la vista Index, pero si se quiere que se pueda leer como HTML necesitamos Html.Raw para que lo interprete, quedando de la siguiente forma:
@{
ViewBag.Title = «Home Page»;
}
<div class=»jumbotron»>
<h1>@ViewBag.Bienvenido</h1> @Html.Raw(ViewBag.Flag)
</div>
Y ya tenemos nuestras imágenes globalizadas:
GLOBALIZACIÓN CON FECHAS
Otras funcionalidades como la fecha son localizadas sin necesidad de incluirla en un recurso. Escribimos en la vista «Index» lo siguiente:
@{
ViewBag.Title = «Home Page»;
}
<div class=»jumbotron»>
<h1>@ViewBag.Bienvenido</h1> @Html.Raw(ViewBag.Flag) @DateTime.Now.ToLongDateString()
</div>
Directamente podemos ver el resultado adaptado el idioma:
CAMBIAR EL IDIOMA CON BOTONES
Ahora vamos a añadir nuevas funcionalidades para el usuario muy secillo de aplicar, crearemos botones que al clicar nos cambien todo el idioma de nuestra web. Procedemos a crear los botones en la vista “Index”:
@{
ViewBag.Title = «Home Page»;
}
@using (Html.BeginForm())
{
<div>
<button type=»submit» value=»es» name=»cultura» class=»btn btn-info» >Spanish</button>
<button type=»submit» value=»en» name=»cultura» class=»btn btn-info»>English</button>
</div>
}
<div class=»jumbotron»>
<h1>@ViewBag.Bienvenido</h1> @Html.Raw(ViewBag.Flag) @DateTime.Now.ToLongDateString()
</div>
Lo que hacemos es enviar directamente los valores de la cultura desde el botón. Se podrían incluir tantos botones como idiomas disponga nuestro proyecto. El controlador recibe el dato de la cultura y cambiamos la cultura que el usuario está usando. Para ello modificamos “HomeController” para que quede de la siguiente forma:
public class HomeController : Controller
{
public ActionResult Index(String cultura)
{
if (cultura != null)
{
Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(cultura);
Thread.CurrentThread.CurrentUICulture = new CultureInfo(cultura);
}
ViewBag.Bienvenido = Resources.Resource.Bienvenido;
ViewBag.Flag = Resources.Resource.Flag;
return View();
}
MANEJO DE MONEDAS
Podemos encontrarnos con un proyecto que necesite la incorporación de diferentes monedas y tipado de dichas monedas. Por ejemplo, nos encontramos que en Inglaterra 100 libras se expresa de la siguiente forma: £100.00, en Europa la moneda se expresa así: 100,00 €. Vamos a ver cómo indicamos para que el tipado de una cantidad cambie según la cultura y los problemas que podemos encontrarnos. Incluimos en “HomeController” las siguientes líneas:
public ActionResult Index(String cultura)
{
if (cultura != null)
{
Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(cultura);
Thread.CurrentThread.CurrentUICulture = new CultureInfo(cultura);
int i = 100; //Un número de monedas
CultureInfo moneda = new CultureInfo(cultura);
ViewBag.Symbol = i.ToString(«c», moneda);
}
ViewBag.Bienvenido = Resources.Resource.Bienvenido;
ViewBag.Flag = Resources.Resource.Flag;
return View();
Añadimos a la vista “Index” el ViewBag.Symbol:
@{
ViewBag.Title = «Home Page»;
}
@using (Html.BeginForm())
{
<div>
<button type=»submit» value=»es» name=»cultura» class=»btn btn-info» >Spanish</button>
<button type=»submit» value=»en» name=»cultura» class=»btn btn-info»>English</button>
</div>
}
<div class=»jumbotron»>
<h1>@ViewBag.Bienvenido</h1> @Html.Raw(ViewBag.Flag) @DateTime.Now.ToLongDateString()
</div>
<h3>@ViewBag.Symbol</h3>
Pero…
¿Dólares? ¿Qué está pasando? La aplicación por defecto coge la cultura global. En el caso de que la cultura sea “en” por defecto aplica la cultura “en-US”, cuando nosotros lo que podemos querer es “en-GB”. El problema está en los botones de la vista “Index”:
<button type=»submit» value=»es» name=»cultura» class=»btn btn-info» >Spanish</button>
<button type=»submit» value=»en» name=»cultura» class=»btn btn-info»>English</button>
Al no incluir la región estamos enviando un parámetro global. Vamos a corregirlo:
<button type=»submit» value=»es-ES» name=»cultura» class=»btn btn-info» >Spanish</button>
<button type=»submit» value=»en-GB» name=»cultura» class=»btn btn-info»>English</button>
Ahora sí nos aparece la cantidad como esperamos:
CONCLUSIÓN
Como se puede ver, la localización junto con la traducción es necesaria si se quiere conseguir público internacional para un producto. La traducción es más o menos directa y sencilla, pero la localización puede llegar a complicarse.
Espero que este artículo haya servido para conocer sus diferencias, así como para aprender a implementar los casos más comunes. A continuación, podéis encontrar los enlaces al proyecto subido a OneDrive y GitHub.
Autor: Isidoro López Rodríguez
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2017-2018
GitHub: github.com/IsidoroLopez/MvcGlobalizacion
OneDrive: Globalizacion.rar (37,6 MB).
Linkedin: www.linkedin.com/isidorolopez