La internacionalización en JavaScript te permite mostrar el contenido de tu aplicación en distintos idiomas según el navegador o la preferencia del usuario. Si trabajas con la API de TheMovieDB, puedes traducir tanto los textos de tu interfaz como la información de las películas, creando una experiencia coherente para audiencias globales.
¿Qué es la internacionalización y en qué se diferencia de la localización?
Cuando hablamos de adaptar una aplicación a varios idiomas o regiones, entran en juego dos conceptos que suelen confundirse pero que cumplen roles distintos.
La internacionalización es el proceso de preparar tu aplicación para soportar múltiples idiomas y regiones. La localización va un paso más allá: ajusta detalles específicos como moneda, formato de fecha o convenciones culturales.
¿Qué es la internacionalización en desarrollo web? Es la práctica de diseñar tu aplicación para que muestre contenido en distintos idiomas según el navegador o la ubicación del usuario, sin necesidad de reescribir el código.
Imagina que tienes una tienda en línea y quieres cobrar en dólares, euros o pesos colombianos. La complejidad crece rápido: no es solo traducir palabras, es adaptar toda la experiencia [01:00].
¿Cómo cambiar el idioma de las solicitudes a la API de TheMovieDB?
La API de TheMovieDB en su versión 3 soporta múltiples idiomas mediante query parameters, lo que te da control total sobre el idioma de la respuesta.
En la documentación oficial encontrarás una sección dedicada a languages, incluso antes que la de imágenes. Allí se listan los códigos de idioma siguiendo la nomenclatura ISO 639-1, un estándar internacional de dos letras que identifica cada lengua.
Algunos ejemplos útiles:
es para español.
en para inglés.
pt-BR para portugués de Brasil, distinto al portugués de Portugal.
fr para francés.
de para alemán.
Puedes tomar estos códigos y convertirlos en un array u objeto dentro de tu código JavaScript. Así, cuando el usuario seleccione un idioma desde un botón o una banderita en la interfaz, tu aplicación dispara la solicitud al endpoint correspondiente y recibe los datos traducidos [02:30].
¿Qué textos deberías traducir en tu interfaz?
No basta con traducir la información que viene de la API. Si tu aplicación muestra "Tendencias", "Ver más", "Categorías" o "Películas favoritas" en español, esos textos también deben cambiar cuando el usuario elige otro idioma.
La idea es que dejes de tener textos hardcodeados en el HTML y los conviertas en contenido dinámico. Esto abre la puerta a aplicar lazy loading sobre los textos: cargas las traducciones solo después de que el usuario seleccione su idioma preferido.
¿Cómo detectar el idioma del navegador con navigator.language?
Elegir inglés como idioma por defecto funciona en muchos casos, pero hay una opción más elegante y centrada en el usuario.
JavaScript expone la propiedad navigator.language, que devuelve el idioma configurado en el navegador del usuario. Si alguien tiene su Chrome en español, esa propiedad te devolverá es o es-MX, según la región [04:30].
¿Cómo saber qué idioma usa el navegador del usuario? Usa navigator.language en JavaScript. Esta propiedad devuelve el código ISO del idioma preferido del navegador, ideal para definir un idioma por defecto en tu aplicación.
La lógica recomendada funciona así:
Si el usuario ya seleccionó un idioma en tu interfaz, usa ese.
Si no ha seleccionado nada, recurre a navigator.language como respaldo.
Guarda la preferencia en local storage para recordarla en futuras visitas.
Esta combinación te da lo mejor de ambos mundos: respetas la configuración del navegador pero priorizas la elección explícita del usuario.
¿Qué reto puedes resolver para practicar internacionalización?
El ejercicio consiste en implementar selección de idioma en tu aplicación de Platzi Movies usando la API de TheMovieDB.
Tienes varios niveles de dificultad para elegir según qué tanto te quieras lucir:
Cambiar solo la información de las películas y dejar la interfaz en un idioma fijo.
Traducir tanto los datos de la API como todos los textos de la interfaz para mantener coherencia.
Mostrar banderitas de los idiomas soportados y permitir al usuario cambiar entre ellos.
Detectar automáticamente el idioma con navigator.language y permitir override manual con persistencia en local storage.
Lo importante no es llegar a la solución perfecta, sino documentar tu proceso. Comparte tu paso a paso, revisa las soluciones de tus compañeros y aporta donde puedas. ¿Cómo estás manejando tú la selección de idioma en tus proyectos? Cuéntame en los comentarios.
