Prácticas recomendadas para la localización de software: guía completa para desarrolladores

Evite errores de traducción en su proceso de localización de software. Aprenda sobre la estructura del código, la sintaxis de los placeholders y los patrones de la interfaz de usuario. Incluye una herramienta de traducción con IA gratuita.

Cuando no se prepara para la localización de software, sus usuarios franceses pueden terminar viendo esto:

¿La razón? Porque su código se parece a esto:

<button style="width: 120px">Guardar cambios</button>

<button style="width: 120px">Save Changes</button>

Esta guía le muestra cómo estructurar su código para la localización desde el primer día. Cada sección incluye ejemplos claros y destaca lo que marca la mayor diferencia en la calidad de la traducción.

Lo que aprenderá:

• Cómo utilizar archivos separados para el contenido localizable
• Prácticas recomendadas para el manejo de placeholders y contenido dinámico
• Patrones de diseño de la interfaz de usuario para la expansión del texto
• Cómo cargar el idioma correcto para sus usuarios
• Cómo configurar traducciones automatizadas

Consejo n.º 1: utilice archivos separados para el contenido localizable

Translation tools can’t detect hard-coded strings in your source code. Move all user-facing text into resource files. This includes:

• Etiquetas de la interfaz de usuario, botones y elementos de menú
• Mensajes de error y texto de validación
• Plantillas de correo electrónico y notificaciones
• Texto de ayuda, información sobre herramientas y texto de placeholder
• Mensajes de éxito/confirmación

Utilice las funciones de internacionalización de su framework en lugar de codificar cadenas de texto.

Ejemplo de React:

// Incorrecto: codificado
<button>Submit</button>

// Correcto: usando react-intl
<button>{t('submit_button')}</button>

// Wrong - hard-coded
<button>Submit</button>

// Right - using react-intl
<button>{t('submit_button')}</button>

Ejemplo de WordPress:

// Incorrecto: codificado
echo 'Submit';

// Correcto: usando WordPress i18n
echo __( 'Submit', 'your-textdomain' );

// Wrong - hard-coded
echo 'Submit';

// Right - using WordPress i18n
echo __( 'Submit', 'your-textdomain' );

Ejemplo de Rails:

# Incorrecto: codificado
flash[:notice] = "Profile updated successfully"

# Correcto: usando Rails I18n
flash[:notice] = t('profile.update_success')

# Wrong - hard-coded
flash[:notice] = "Profile updated successfully"

# Right - using Rails I18n
flash[:notice] = t('profile.update_success')

Seleccione el formato de archivo de recursos según su framework:

• .json – Frameworks de JavaScript (React, Vue, Angular)
• .po/.pot – WordPress, PHP, Python (gettext)
• .yaml/.yml – Ruby on Rails
• .xml – Android (strings.xml)
• .xcstrings – iOS/macOS

Consejo n.º 2: gestione los placeholders y el contenido dinámico correctamente

Cuando el texto incluye valores dinámicos como nombres de usuario, recuentos o fechas, utilice placeholders en lugar de la concatenación de cadenas de texto.

Los diferentes idiomas tienen diferentes órdenes de palabras. La concatenación rompe esto al dividir las oraciones en fragmentos que no se pueden reordenar.

El siguiente ejemplo crea tres piezas separadas que los traductores no pueden reorganizar. En idiomas como el japonés, donde el orden de las palabras difiere del inglés, la traducción se vuelve gramaticalmente incorrecta.

Ejemplo incorrecto (concatenación de cadenas)

const name = 'John';
const message = 'Hello, ' + name + '!';

const name = 'John';
const message = 'Hello, ' + name + '!';

Ejemplos correctos

msgid "Hello, %s!"
msgstr ""

msgid "Hello, %s!"
msgstr ""

{
 "greeting": "Hello, {name}!"
}

{
  "greeting": "Hello, {name}!"
}

greeting: "Hello, %{name}!"

greeting: "Hello, %{name}!"

Asegúrese de utilizar una sintaxis de placeholder que funcione con su framework:

Consejo n.º 3: diseñe la interfaz de usuario para la expansión del texto

La longitud del texto cambia drásticamente entre los idiomas. Los diseños, botones y menús de navegación de ancho fijo se rompen cuando el texto se expande o cuando se admiten idiomas de derecha a izquierda como el árabe.

• El texto alemán suele ser un 30% más largo que el inglés
• El francés es aproximadamente un 20% más largo
• Los idiomas asiáticos como el chino y el japonés suelen ser más cortos

Antes de empezar a programar, piense en cómo los diferentes idiomas afectan al espacio durante la fase de diseño. Esto ahorra tiempo de depuración de problemas de diseño más adelante.

Para obtener información detallada sobre la implementación y ejemplos de código, consulte cómo evitar problemas de diseño con traducciones largas.

Consejo n.º 4: escriba contenido que se traduzca bien

Una escritura clara y sencilla produce mejores traducciones. El lenguaje complejo requiere más edición después de la traducción.

✓ Escriba oraciones completas con sujetos y acciones claros.

Ejemplo correcto

"No tiene ningún artículo guardado en su carrito."

"You have no saved items in your cart."

Esto indica claramente lo que está vacío (carrito) y lo que debe contener (artículos guardados).

Ejemplo incorrecto

"Sin artículos en el carrito."

"No cart items."

En el ejemplo anterior faltan el sujeto (“usted”) y la acción (“tiene”). Estos fragmentos podrían significar “No hay carrito” o “Artículos no en el carrito”, dependiendo de cómo se interpreten.

✓ Manténgalo simple. Las palabras cortas y claras producen mejores traducciones que el vocabulario complejo.

Ejemplo correcto

"Eliminar artículo del carrito"

"Remove item from cart"

Ejemplo incorrecto

"Eliminar este artículo de su carrito de compra"

"Eliminate this article from your shopping cart"

✓ Evite los modismos y las referencias culturales.

Frases como “pan comido” o “lograr un jonrón” no se traducen literalmente y pueden no tener sentido en otras culturas.

Consejo n.º 5: configure la detección de idiomas y la carga de archivos

Configure su aplicación para detectar el idioma del usuario y cargar el archivo de traducción adecuado. La mayoría de los frameworks modernos incluyen bibliotecas i18n que gestionan esto automáticamente.

• React con react-i18next

React no incluye i18n de forma predeterminada. Instale react-i18next con npm y, a continuación, configúrelo para que detecte el idioma del navegador y cargue sus archivos de traducción.

• Ruby on rails

Rails incluye I18n de forma predeterminada. Configúrelo en config/application.rb. A continuación, detecte el idioma del usuario en su ApplicationController.

• WordPress

WordPress gestiona la detección de idiomas automáticamente. Los usuarios establecen el idioma de su sitio en Ajustes → General, y WordPress carga el archivo .mo correspondiente desde wp-content/languages/. Para sitios multilingües donde diferentes usuarios necesitan diferentes idiomas, necesitará un plugin como WPML para gestionar la selección de idioma por usuario.

Gestione las traducciones que faltan

Establezca su idioma de reserva en su idioma principal. Cuando un archivo de traducción no existe o faltan cadenas de texto, los usuarios ven la reserva en lugar de texto roto o claves de traducción.

Añada un selector de idiomas (si es necesario)

La mayoría de las aplicaciones deben respetar la configuración de idioma del navegador o del dispositivo del usuario automáticamente. Pero si desea permitir que los usuarios anulen esto manualmente (común para las aplicaciones web), añada un selector de idiomas y almacene su elección:

// Guardar la selección manual de idioma del usuario
localStorage.setItem('userLanguage', selectedLanguage);

// Comprobar primero la selección manual, luego usar el valor predeterminado del navegador
const userLanguage = localStorage.getItem('userLanguage') || navigator.language;

// Save user's manual language selection
localStorage.setItem('userLanguage', selectedLanguage);

// Check for manual selection first, then use browser default
const userLanguage = localStorage.getItem('userLanguage') || navigator.language;

Las aplicaciones móviles normalmente no incluyen selectores de idiomas, ya que los usuarios esperan que las aplicaciones sigan la configuración de su dispositivo.

Consejo n.º 6: automatice su proceso de traducción de software

Los flujos de trabajo de traducción manual ralentizan cada lanzamiento. Cuando actualiza las cadenas de texto, las traducciones deben realizarse automáticamente.

PTC es una herramienta de traducción de IA que automatiza este proceso. Puede integrarla con su repositorio de GitHub, GitLab o Bitbucket, o utilizar la API para la integración de CI/CD. Cuando actualiza las cadenas de texto, las traducciones se realizan automáticamente.

Crear una cuenta es gratis y puede traducir 2500 palabras a 2 idiomas sin coste alguno. Después de eso, no hay cuota de suscripción, solo paga por lo que traduce.

Consejo n.º 7: pruebe las versiones localizadas antes del lanzamiento

Las pruebas garantizan que sus traducciones se muestren correctamente y que su interfaz de usuario funcione en diferentes idiomas. Pruebe tanto la visualización como la funcionalidad.

• Diseño: el texto se ajusta sin truncamiento, sin desbordamiento, la navegación funciona
• Funcionalidad: los formularios se envían, los mensajes de error se muestran correctamente, la búsqueda gestiona los caracteres especiales (é, ñ, ü)
• Formato: fechas (DD/MM frente a MM/DD), números (1.000,00 frente a 1.000,00), posiciones de la moneda (100 € frente a 100€)