Inicio rápido: Traducir recursos de la interfaz de usuario (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Coloca los recursos de cadena de tu UI en archivos de recursos. Así, podrás hacer referencia a dichas cadenas desde el código o marcado.

Instrucciones

  1. Coloca las cadenas en archivos de recursos en lugar de ponerlas directamente en el código o la revisión.

    1. Abre package.appxmanifest en Visual Studio, ve a la pestaña Aplicación y establece el idioma predeterminado en "es-ES". Si es una aplicación universal, sigue este proceso con cada package.appxmanifest de la solución.Nota  De este modo, se especifica el idioma predeterminado del proyecto. Los recursos de idioma predeterminado se usan cuando los idiomas de visualización o idioma preferido del usuario no coinciden con los recursos de idioma indicados en la aplicación. Consulta el tema Páginas de propiedades, JavaScript.  
    2. Crea una carpeta que contenga los archivos de recursos.
      1. En el Explorador de soluciones, haz clic con el botón derecho en el proyecto (el proyecto compartido, si se trata de una aplicación universal) y selecciona Agregar > Nueva carpeta.
      2. Asigna el nombre "Strings" a la nueva carpeta.
      3. Si no se ve la nueva carpeta en el Explorador de soluciones, selecciona Proyecto > Mostrar todos los archivos en el menú de Microsoft Visual Studio teniendo el proyecto seleccionado.
    3. Crea una subcarpeta y un archivo de recursos para inglés (Estados Unidos).

      1. Haz clic con el botón derecho en la carpeta de cadenas y agrega una nueva carpeta debajo. Asígnale el nombre "en-US". El archivo de recursos se coloca en una carpeta a la que se ha asignado un nombre para la etiqueta de idioma BCP-47. Consulta Cómo asignar nombre a los recursos mediante calificadores para obtener información detallada sobre el calificador de idioma y ver una lista de etiquetas de idioma comunes.

      2. Haz clic con el botón derecho en la carpeta en-US y selecciona Agregar > Nuevo elemento….

      3. Selecciona "Archivo de recursos" (.resjson)".

      4. Haz clic en Agregar. Se agregará un archivo de recursos con el nombre predeterminado resources.rejson. Te recomendamos que utilices este nombre de archivo predeterminado. Las aplicaciones pueden particionar sus recursos en otros archivos, pero debes asegurarte de hacer referencia a ellos correctamente (consulta el tema Cómo cargar recursos de cadenas).

      5. El nuevo archivo contiene contenido predeterminado. Sustituye el contenido por lo siguiente (que puede ser muy parecido al contenido predeterminado):

        strings/en-US/resources.resjson

        {
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}

        Esto es sintaxis estricta de notación de objetos JavaScript (JSON), en la que debe colocarse una coma después de cada par nombre/valor, excepto en el último caso. En este ejemplo, "greeting" y "farewell" identifican las cadenas que se van a mostrar. El resto de los pares ("_greeting.comment" y "_farewell.comment") son comentarios que describen las cadenas. Los comentarios constituyen un buen lugar donde proporcionar instrucciones especiales a los traductores que localizan las cadenas a otros idiomas.

  2. Agrega identificadores de recursos de cadena al código y marcado.

    1. Agrega al archivo HTML algunas referencias a la biblioteca de Windows para JavaScript, si aún no las contiene.

      Nota  El siguiente código muestra el HTML para el archivo default.html del proyecto de Windows que se genera cuando creas un nuevo proyecto Aplicación vacía (aplicaciones universales) en Visual Studio. Ten en cuenta que el archivo ya contiene referencias a WinJS.

      <!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

      Nota  El siguiente código muestra el HTML para el archivo default.html del proyecto de Windows Phone que se genera cuando creas un nuevo proyecto Aplicación vacía (aplicaciones universales) en Visual Studio. Ten en cuenta que el archivo ya contiene referencias a WinJS.

      <!-- WinJS references -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    2. En el código JavaScript que acompaña a tu archivo HTML, llama a la función WinJS.Resources.processAll cuando el HTML esté cargado.

      WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}

      Si se carga código HTML adicional en un objeto WinJS.UI.Pages.PageControl, llama a WinJS.Resources.processAll(element) en el método de control de página IPageControlMembers.ready, donde element es el elemento HTML (y sus elementos secundarios) que se carga. Este ejemplo se basa en el escenario 6 de la muestra de recursos de la aplicación y localización:

      var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});

    3. En el HTML, haz referencia a los recursos de cadena con los identificadores de recursos ('greeting' y 'farewell') desde los archivos de recursos.

      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>

    4. Consulta los recursos de cadena para ver los atributos.

      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >

    5. Consulta los recursos de cadena en JavaScript.

      var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    El patrón general del atributo data-win-res para la sustitución de HTML es data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

    Nota  Si la cadena no contiene ningún marcado, enlaza el recurso siempre que sea posible a la propiedad textContent en lugar de innerHTML. La propiedad textContent puede reemplazarse con más rapidez que innerHTML.

     

  3. Agrega carpetas y archivos de recursos para otros dos idiomas.

    1. Agrega otra carpeta debajo de la carpeta de cadenas para alemán. Asigna el nombre "de-DE" para Alemán (Alemania).

    2. Crea otro archivo Resources.rejson en la carpeta de-DE y reemplaza el contenido por lo siguiente:

      strings/de-DE/resources.resjson

      {
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. Crea una carpeta más llamada "fr-FR" para francés (Francia). Crea un nuevo archivo Resources.rejson y reemplaza su contenido por lo siguiente:

      strings/fr-FR/resources.resjson

      {
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}

  4. Compila y ejecuta la aplicación.

    Prueba la aplicación con el idioma para mostrar predeterminado.

    1. Presiona F5 para compilar y ejecutar la aplicación.
    2. Ten en cuenta que los saludos de bienvenida y despedida (greeting y farewell) se muestran en el idioma preferido del usuario.
    3. Sal de la aplicación.

    Nota  Solo aplicaciones de la Tienda Windows. Prueba la aplicación con otros idiomas.

    1. Abre el Panel de control y selecciona Reloj, idioma y región > Idioma.
    2. Ten en cuenta que el idioma que se mostró al ejecutar la aplicación es el idioma que está más arriba en la lista, es decir, inglés, alemán o francés. Si tu idioma de nivel superior no es ninguno de estos tres, la aplicación retrocede al siguiente de la lista que admita la aplicación.
    3. Si no tienes ninguno de estos tres idiomas en la máquina, agrega a la lista los que falten haciendo clic en Agregar un idioma.
    4. Para probar la aplicación con otro idioma, selecciona el idioma de la lista y haz clic en Subir hasta que quede en primer lugar. Después ejecuta la aplicación.

    Nota  Solo aplicaciones de la Tienda de Windows Phone. Prueba la aplicación con otros idiomas.

    1. Abre Configuración en el teléfono (o el emulador de teléfono).
    2. Selecciona idioma.
    3. Ten en cuenta que el idioma que se mostró al ejecutar la aplicación es el idioma que está más arriba en la lista, es decir, inglés, alemán o francés. Si tu idioma de nivel superior no es ninguno de estos tres, la aplicación retrocede al siguiente de la lista que admita la aplicación.
    4. Si no tienes ninguno de estos tres idiomas en el teléfono, agrega a la lista los que falten haciendo clic en agregar idiomas.
    5. Para probar la aplicación con otro idioma, mantén pulsado el idioma de la lista y pulsa subir hasta que quede en primer lugar. Luego, restablece el teléfono y ejecuta la aplicación.

Temas relacionados

Cómo asignar nombre a los recursos mediante calificadores

Cómo cargar recursos de cadena

WinJS.Resources.processAll

Muestra de recursos de la aplicación y localización

Páginas de propiedades, JavaScript.

La etiqueta de idioma BCP-47