Aprenda las mejores prácticas de localización de software: prepare el código, gestione el contenido dinámico y cree diseños de interfaz de usuario flexibles para los mercados globales. Guía completa con ejemplos y una herramienta de traducción gratuita.
Su aplicación se acaba de lanzar en Francia. El tráfico aumenta, las suscripciones se multiplican y, de repente, los tickets de soporte inundan su bandeja de entrada. Los usuarios no pueden hacer clic en el botón “Comprar ahora” porque se ha cortado. Los formularios no se envían. Los menús de navegación se rompen en dos líneas. Su interfaz de usuario, cuidadosamente diseñada, parece completamente rota.
Esto es lo que ocurre cuando se salta el proceso de localización de software y se pasa directamente a la traducción. El texto se traduce, pero su aplicación no se ha creado para gestionarlo.
Este es el aspecto que podría tener el problema:
¿La razón? Porque su código se parece a esto:
<button style="width: 120px">Save Changes</button>Esta guía le explica exactamente qué debe hacer antes de traducir una sola cadena. Aprenderá a:
- Utilice archivos separados para el contenido localizable
- Gestione los marcadores de posición y el contenido dinámico
- Prepare la interfaz de usuario para la expansión del texto
- Cargue el idioma adecuado para sus usuarios
- Configure traducciones automáticas
Al final, sabrá cómo distribuir software localizado que realmente funciona, no solo software que ha sido traducido.
Paso 1: Empiece a utilizar archivos separados para el contenido localizable
Esto es lo que ocurre cuando se codifican cadenas de texto: Las herramientas de traducción escanean su código base buscando texto para traducir en archivos de recursos como JSON, PO o YAML. No encuentran… nada. Porque no pueden detectar cadenas de texto enterradas dentro de sus archivos JavaScript, PHP o Ruby.
Este es el error más común en la localización de software. La mayoría de los proyectos de localización fallidos mueren aquí mismo porque los equipos se dan cuenta demasiado tarde de que necesitan refactorizar miles de cadenas de texto codificadas.
¿Qué se considera texto orientado al usuario?
Todo lo que sus usuarios pueden ver:
- 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
Todo esto debe ir en archivos separados.
Ejemplo de React:
// Wrong - hard-coded
<button>Submit</button>
// Right - using react-intl
<button>{t('submit_button')}</button>
Ejemplo de WordPress:
// Wrong - hard-coded
echo 'Submit';
// Right - using WordPress i18n
echo __( 'Submit', 'your-textdomain' );
Ejemplo de Rails:
# Wrong - hard-coded
flash[:notice] = "Profile updated successfully"
# Right - using Rails I18n
flash[:notice] = t('profile.update_success')
¿Qué formato de archivo debe utilizar?
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
Paso 2: Gestione correctamente los marcadores de posición y el contenido dinámico
Cuando incluya datos de usuario en cadenas de texto (como nombres, números o fechas), no utilice la concatenación de cadenas.
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 + '!';En su lugar, utilice marcadores de posición que permitan a los traductores controlar la frase completa:
Ejemplos correctos
Archivo PO:
msgid "Hello, %s!"
msgstr ""Archivo JSON:
{
"greeting": "Hello, {name}!"
}Archivo YAML:
greeting: "Hello, %{name}!"Asegúrese de utilizar una sintaxis de placeholder que funcione con su framework:
| Formato de archivo | Sintaxis común de placeholder | Utilizado en |
|---|---|---|
.json | {name} | JavaScript (React, Vue) |
.yaml | %{name} | Ruby on rails |
.po | %s, %d, %1$s, %2$d | WordPress, PHP |
.xml | %1$s, %2$d | Android |
.strings | %@, %d, %f | iOS/macOS |
Paso 3: Diseñe para la expansión del texto
¿Recuerda el botón de la introducción? ¿El que decía “Save” en inglés pero se cortaba en francés?
Eso es la expansión del texto, y no es raro. Esto es a lo que se enfrenta:
- 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
- El chino y el japonés suelen ser más cortos (pero tienen otros problemas)
Estas son medias, y las palabras individuales pueden inflarse. “FAQ” se convierte en “Preguntas frecuentes” en español, lo que supone una expansión del 567%.
Antes de empezar a programar, piense en cómo los diferentes idiomas afectan al espacio durante la fase de diseño. Utilice patrones flexibles, de modo que los botones puedan crecer con el texto en lugar de cortarse. Esto ahorra tiempo de depuración de problemas de diseño más adelante.
Para una inmersión más profunda en los patrones de diseño, consulte cómo evitar problemas de diseño con traducciones largas.
Paso 4: Escriba contenido que sea realmente traducible
Su estilo de escritura importa más de lo que cree. Un inglés vago, inteligente o idiomático puede convertirse en una tontería en otros idiomas.
✓ Escriba frases completas
Una cadena como “No cart items” podría significar varias cosas. ¿No hay carrito? ¿Los artículos no están en el carrito? Su traductor (o herramienta de traducción) tiene que adivinar.
Un sujeto claro con un verbo claro hace que el significado sea claro, lo que también facilita la traducción de la cadena.
Ejemplo correcto
"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).
Evite los modismos
“This is a piece of cake” se utiliza a menudo en inglés, pero no se traduce bien a otros idiomas. Si se traduce literalmente, sus usuarios alemanes estarán muy confundidos sobre por qué su aplicación está hablando de postres.
Manténgalo simple
No diga “eliminar” cuando “quitar” funciona. No diga “utilizar” cuando puede decir “usar”. Las palabras sencillas se traducen de forma más fiable y clara.
Paso 5: Configure la detección de idiomas
Una vez que sus cadenas están externalizadas y su interfaz de usuario es flexible, necesita detectar qué idioma mostrar a cada usuario.
La mayoría de los frameworks incluyen bibliotecas i18n que gestionan esto automáticamente:
- React con react-i18next
Instale react-i18next con npm, luego configúrelo para detectar el idioma del navegador y cargar 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.
Establezca un idioma de reserva
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:
// 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.
Paso 6: Automatice su proceso de traducción de software
Si su proceso de localización se parece a esto, lo está haciendo mal:
- Exportar cadenas a una hoja de cálculo
- Enviar la hoja de cálculo por correo electrónico al traductor
- Esperar 3 días
- Recibir la hoja de cálculo de vuelta
- Copiar manualmente las traducciones en archivos JSON
- Descubrir que se ha perdido 12 cadenas
- Repetir
Esto es lento, propenso a errores y no se escala.
Esto es lo que debe hacer en su lugar: utilice una herramienta de traducción que proporcione una localización continua.
PTC es una herramienta de traducción de IA que automatiza el proceso de traducción. 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, las traducciones se realizan automáticamente.
Es gratuito para 20.000 palabras en 2 idiomas, después solo paga por lo que traduce. Sin suscripción, y empezar lleva menos de 5 minutos.
Paso 7: Pruebe las versiones localizadas antes de lanzarlas
No debe limitarse a comprobar si aparece el texto traducido. Pruebe la funcionalidad real en cada idioma.
- Diseño: ¿Cabe el texto sin que se corte? ¿Sigue funcionando la navegación o ve un desbordamiento?
- Funcionalidad: ¿Se envían los formularios? ¿Aparecen los mensajes de error en el idioma correcto? ¿La búsqueda gestiona los caracteres acentuados (é, ñ, ü)?
- Formato: ¿Están las fechas en el formato correcto (DD/MM vs MM/DD)? ¿Están los números formateados correctamente (1.000,00 vs 1.000,00)? ¿Está la moneda en la posición correcta (100 € vs €100)?
Pruebe esto antes de enviar a producción. Descubrir que su flujo de pago alemán está roto cuando los usuarios empiezan a dejar reseñas negativas no es la forma en que quiere descubrir los errores de localización.
Está preparado para la localización de software
Eso es todo. Si ha hecho estas 7 cosas, su aplicación está lista para la localización. Ahora traduzca sus archivos de recursos con PTC y distribuya software que funcione en todos los idiomas.
Traduzca su software utilizando IA
Obtenga traducciones contextualizadas en minutos
Cargue archivos o automatice mediante la API o la integración de Git
1
Inicie una prueba gratuita de 30 días
Traduzca 20.000 palabras gratis.
2
Añada detalles rápidos del proyecto
Proporcione contexto sobre su aplicación y sus usuarios.
3
Obtenga traducciones
Descargue un ZIP o incorpore en su repositorio.
