From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../es/traducir_una_extensi\303\263n/index.html" | 161 +++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 "files/es/traducir_una_extensi\303\263n/index.html" (limited to 'files/es/traducir_una_extensión') diff --git "a/files/es/traducir_una_extensi\303\263n/index.html" "b/files/es/traducir_una_extensi\303\263n/index.html" new file mode 100644 index 0000000000..7c5c33627a --- /dev/null +++ "b/files/es/traducir_una_extensi\303\263n/index.html" @@ -0,0 +1,161 @@ +--- +title: Traducir una extensión +slug: Traducir_una_extensión +tags: + - Complementos + - Localización + - Todas_las_Categorías + - extensiones +--- +

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

+ +

Este artículo está construido sobre los anteriores ejemplos de programación de extensiones añadiendo soporte para traducción a nuestra extensión. Realizando unos pocos y simples pasos se conseguirá hacer la extensión mucho más fácil de traducir en varios idiomas sin tener que editar los ficheros XUL o JavaScript.

+ +

Si aún no has creado ninguna extensión o te gustaría refrescar la memoria, echa un vistazo a los anteriores artículos de la serie:

+ + + +

Descargar el ejemplo

+ +

Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.

+ +

http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip

+ +

Traducir cadenas en los ficheros XUL

+ +

Crear los ficheros de configuración regional necesarios

+ +

Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.

+ +

Cada fichero locale mapea los nombres de las entidades referenciadas en los ficheros XUL a las mismas cadenas. El diálogo de preferencias, cuyo fichero XUL es options.xul, tiene un fichero options.dtd correspondiente con este aspecto:

+ +
 <!ENTITY options_window_title "StockWatcher 2 Preferences">
+ <!ENTITY options_symbol.label "Stock to watch: ">
+
+ +

La entidad "options_window_title" está mapeada a la cadena "StockWatcher 2 Preferences", la cual es usada como título de la ventana de preferencias.

+ +

El fichero stockwatcher2.dtd contiene el mapa para el fichero stockwatcher2.xul:

+ +
 <!ENTITY panel_loading "Loading...">
+ <!ENTITY menu_refresh_now.label "Refresh Now">
+ <!ENTITY menu_apple.label "Apple (AAPL)">
+ <!ENTITY menu_google.label "Google (GOOG)">
+ <!ENTITY menu_microsoft.label "Microsoft (MSFT)">
+ <!ENTITY menu_yahoo.label "Yahoo (YHOO)">
+
+ +

Actualizar los ficheros XUL

+ +

Cada fichero XUL necesita referenciar su correspondiente fichero de configuración regional. Además necesitamos actualizar el código para utilizar entidades en lugar de cadenas, por lo que las sustituciones tomarán lugar basándose en la configuración regional actualmente activa.

+ +

Para añadir una referencia al fichero de configuración regional correcto dado un fichero XUL necesitamos añadir una línea al fichero XUL. Para options.xul añadimos esta línea:

+ +
 <!DOCTYPE window SYSTEM "chrome://stockwatcher2/locale/options.dtd">
+
+ +

Añadimos una línea similar al fichero stockwatcher.xul:

+ +
 <!DOCTYPE overlay SYSTEM "chrome://stockwatcher2/locale/stockwatcher2.dtd">
+
+ +

En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. Utilizar múltiples DTDs explica cómo hacer esto.

+ +

Date cuenta de que las URLs de los ficheros DTD no incluyen realmente el nombre del idioma a utilizar. el registro chrome resuelve los URIs basándose en la configuración regional actual y los datos que proporcionas en tu manifiesto chrome.

+ +

Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en stockwatcher2.xul cambiamos la línea:

+ +
 <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>
+
+ +

por

+ +
 <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>
+
+ +

Haremos esto para cada cadena utilizada en cada fichero XUL.

+ +

Actualizar el manifiesto chrome

+ +

Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero |chrome.manifest, añadiendo una línea por cada idioma.

+ +
 locale stockwatcher2 en-US chrome/locale/en-US/
+
+ +

Esto le dice a Firefox que el idioma en-US está ubicado en el directorio chrome/locale/en-US.

+ +

Traducir cadenas en el código JavaScript

+ +

Si tu código JavaScript contiene cadenas literales que necesitan ser traducidas, como hace nuestro ejemplo visualizador de stocks, también necesitaremos hacerlo traducible. Podemos hacer esto moviendo las cadenas a un conjunto. Los conjuntos de cadenas son creados mediante el establecimiento de un fichero de propiedades que mapea claves a valores de cadena. Para una explicación detallada de cómo funciona esto, lee Tutorial XUL:Ficheros de propiedades.

+ +

Crear un fichero de propiedades

+ +

Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en stockwatcher2.js:

+ +
changeString=Chg:
+openString=Open:
+lowString=Low:
+highString=High:
+volumeString=Vol:
+
+ +

El fichero stockwatcher2.properties mostrado anteriormente mapea cinco claves (changeString, openString, lowString, highString, y volumeString) a su correspondiente texto en inglés.

+ +

Crear un conjunto de cadenas

+ +

El siguiente paso es modificar el fichero stockwatcher2.xul para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:

+ +
 <stringbundleset id="stringbundleset">
+   <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockw...er2.properties"/>
+ </stringbundleset>
+
+ +

Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero stockwatcher2.properties que ya habíamos creado.

+ +

Actualizando el código JavaScript

+ +

Ahora estamos listos para revisar el código JavaScript para cargar las cadenas desde el conjunto de cadenas en lugar de utilizar literales. Esto implica la reescritura de la función refreshInformation() para cargar las cadenas y su función interna infoReceived() para utilizar las cadenas cargadas y traducidas en lugar de literales.

+ +

Añadimos a refreshInformation() el siguiente código:

+ +
 var stringsBundle = document.getElementById("string-bundle");
+ var changeString = stringsBundle.getString('changeString') + " ";
+ var openString = stringsBundle.getString('openString') + " ";
+ var lowString = stringsBundle.getString('lowString') + " ";
+ var highString = stringsBundle.getString('highString') + " ";
+ var volumeString = stringsBundle.getString('volumeString') + " ";
+
+ +

Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a stockwatcher2.xul llamando a document.getElementById(), especificando el ID "string-bundle". Luego recupera todas las cadenas que necesitamos desde el conjunto, una a una, llamando al método del conjunto de cadenas getString(), pasando la clave apropiada para cada cadena.

+ +

En este caso, también añadimos un espacio al final de cada cadena. Hacemos esto porque este programa funciona así en particular y no tienes porqué hacerlo siempre.

+ +

Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:

+ +
 samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
+     openString + fieldArray[5] + " | " +
+     lowString + fieldArray[6] + " | " +
+     highString + fieldArray[7] + " | " +
+     volumeString + fieldArray[8];
+
+ +

Traducir la descripción en install.rdf

+ +

Mira Traducir descripciones de extensiones.

+ +

Añadir más traducciones

+ +

Para añadir otra traducción a un nuevo idioma, todo lo que necesitas hacer es añadir otra línea al manifiesto chrome referenciando la nueva configuración regional. Por ejemplo, para añadir una traducción al español deberías añadir:

+ +
 locale stockwatcher2 es-ES chrome/locale/es-ES/
+
+ +

Luego sólo hay que crear un subdirectorio chrome/locale/es-ES y añadir los ficheros DTD necesarios; en este caso options.dtd y stockwatcher2.dtd. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.

+ +

Del mismo modo, si tenemos algún fichero de propiedades que contenga cadenas traducidas para nuestro código JavaScript también necesitaremos crear versiones de configuración regional para aquellos ficheros de propiedades en el directorio chrome/locale/es-ES. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.

+ +

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

-- cgit v1.2.3-54-g00ecf