Construyendo aplicaciones JS con internacionalización (i18n) en mente

Rate this content
Bookmark

En Adobe construimos productos para el mundo, esta masterclass proporcionará una visión general de las mejores prácticas de internacionalización (i18n), globalización (g11n) y localización (l10n). Por qué son importantes y cómo implementarlas en el diseño, la experiencia de usuario y en cualquier código JS, utilizando ejemplos de JS puro y recomendaciones de las mejores bibliotecas de código abierto.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

La internacionalización es un proceso de ingeniería en el que se preparan las aplicaciones para que puedan ser fácilmente adaptadas a diferentes idiomas y regiones sin requerir cambios de ingeniería. Involucra la implementación de ciertas prácticas en el código para manejar múltiples idiomas, formatos de datos, y otras variaciones locales.

La localización se refiere a la adaptación de un producto o contenido para satisfacer las necesidades y preferencias de usuarios en diferentes localidades, incluyendo la traducción del texto y ajustes culturales. La globalización engloba tanto la internacionalización como la localización, siendo un proceso más amplio que prepara el producto para su lanzamiento global.

Twitter ha implementado una solución innovadora para la internacionalización del nombre de usuario al permitir que los usuarios ingresen su nombre en su guión y sintaxis nativa sin separar explícitamente los nombres y apellidos, lo que facilita la inclusión de diferentes formatos de nombres globalmente.

Unicode es un estándar de codificación de caracteres que permite la representación y manipulación consistente de textos en cualquier sistema de escritura del mundo. Es crucial para la internacionalización porque asegura que los caracteres de todos los idiomas se muestren y procesen correctamente en las aplicaciones.

JavaScript proporciona el método `normalize` en `String.prototype` que permite normalizar caracteres combinados a su forma canónica en Unicode, facilitando la manipulación y visualización correcta de estos caracteres en las aplicaciones.

Una práctica recomendada es envolver todas las cadenas de texto en un objeto para la traducción, utilizando herramientas y bibliotecas que ayuden a manejar múltiples idiomas y localizaciones, como I18next o GlobalizeJS. Esto permite una gestión centralizada y más eficiente de los recursos de idioma.

UTF-8 es una forma de codificación de caracteres Unicode que usa de 1 a 4 bytes para representar un carácter. Es el formato más común en la web debido a su eficiencia en la representación de cualquier carácter del estándar Unicode, siendo crucial para soportar múltiples idiomas y caracteres especiales en sitios web.

Probar las aplicaciones en varios idiomas asegura que los caracteres específicos de cada idioma se manejen correctamente y que la interfaz de usuario sea adecuada y funcional para diferentes audiencias globales. Esto ayuda a identificar y resolver problemas de localización y codificación antes del lanzamiento.

La internacionalización puede afectar el diseño de interfaces al requerir que los diseños sean flexibles para acomodar textos de diferentes longitudes y orientaciones, como textos que se expanden al ser traducidos o interfaces que deben adaptarse a idiomas que se leen de derecha a izquierda.

Naomi Meyer
Naomi Meyer
21 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta masterclass aborda la construcción de aplicaciones JavaScript con la internacionalización en mente, abordando problemas como el manejo de diferentes formatos de nombres, el uso de Unicode para la compatibilidad, errores de codificación de caracteres, soluciones de localización y traducción, pruebas en diferentes idiomas, acomodar el texto traducido en los diseños, consideraciones culturales y la importancia de habilitar diferentes idiomas para los usuarios. El orador también menciona varias herramientas de código abierto para la internacionalización. La masterclass concluye con un recordatorio de evitar suposiciones y abrazar la diversidad en la World Wide Web.

1. Introducción a la Internacionalización

Short description:

¡Hola, JS Nation! ¡Gracias por unirse a mí hoy! Estoy muy emocionado de compartir con ustedes algunas ideas sobre cómo construir aplicaciones JavaScript teniendo en cuenta la internacionalización. Mi nombre es Naomi Meier y trabajo en el equipo de ingeniería de globalización en Adobe, donde me dedico a la ingeniería de internacionalización para muchas aplicaciones de Adobe diferentes. Comencemos con un ejemplo de nombre. Esta es una cadena muy común que vemos a menudo en inglés, donde las personas se presentan con la sintaxis de 'Hola, mi nombre es Naomi Meyer'. Este es mi primer nombre o nombre de pila en azul, seguido de mi apellido, nombre de familia o apellido. Si tomamos esta cadena simple y la traducimos al japonés, hindi, hebreo, árabe, coreano y chino, podemos ver que la sintaxis de nombre de pila, apellido a veces se invierte. A veces es apellido, nombre de pila y, obviamente, a veces el texto se lee de izquierda a derecha. A veces el texto se lee de derecha a izquierda. Y esto es solo una representación visual de cómo podemos identificar el nombre de un usuario de manera diferente en diferentes ubicaciones. Así es como Google resuelve ese problema cuando creas una cuenta de Google, ingresas un nombre de pila y un apellido como campos de datos distintos. Pero Twitter recientemente encontró una gran solución a este problema donde tienen un campo de nombre simple donde un usuario puede ingresar su nombre y su guión nativo y su sintaxis nativa de nombre de pila, apellido, apellido, nombre de pila. Y se almacenará como un campo distinto. Creo que esta es una solución realmente genial para el problema de la internacionalización del nombre de usuario.

¡Hola, JS Nation! ¡Gracias por unirse a mí hoy! Estoy muy emocionado de compartir con ustedes algunas ideas sobre cómo construir aplicaciones JavaScript teniendo en cuenta la internacionalización. Mi nombre es Naomi Meier y trabajo en el equipo de ingeniería de globalización en Adobe, donde me dedico a la ingeniería de internacionalización para muchas aplicaciones de Adobe diferentes.

Entonces, aquí es donde puedes encontrarme en línea, en mi Twitter y mi sitio web. Y si hay algo en lo que te sientas apasionado, por favor avísame. Me encantaría continuar esta conversación en línea. Así que aquí está nuestra agenda para hoy. Voy a comenzar con un ejemplo de nombre y luego pasar a algunas definiciones de localización, internacionalización, globalización, solo para nivelar y asegurarnos de que todos estemos en la misma página. Y luego pasaré a mis cinco mejores consejos para evitar los errores más comunes que encontramos al internacionalizar JavaScript. Y luego terminaré con la culturalización. En general, el objetivo de esta presentación general es animarlos a todos a crear experiencias igualmente utilizables, relevantes y significativas para los usuarios de todo el mundo, y realmente amplificar las voces de nuestros usuarios globales. Así que me gustaría invitarlos y animarlos, ya saben, mis compañeros codificadores de JS, a salir y realmente poner el mundo en la World Wide Web. Así que hablemos de cómo podemos hacer eso.

Comencemos con un ejemplo de nombre. Entonces, esto es, ya saben, una cadena muy común que vemos a menudo en inglés, donde las personas se presentan con la sintaxis de 'Hola, mi nombre es Naomi Meyer'. Este es mi primer nombre o nombre de pila en azul, seguido de mi apellido, nombre de familia o apellido. Si tomamos esta cadena simple y la traducimos al japonés, hindi, hebreo, árabe, coreano y chino, podemos ver que la sintaxis de nombre de pila, apellido a veces se invierte. A veces es apellido, nombre de pila y, obviamente, a veces el texto se lee de izquierda a derecha. A veces el texto se lee de derecha a izquierda. Y esto es solo una representación visual de cómo podemos identificar el nombre de un usuario de manera diferente en diferentes ubicaciones. Y este es un problema de alto nivel que estamos tratando de resolver con internacionalización. Mi nombre es un nombre simple de inglés estadounidense. Aquí hay un ejemplo de algunos otros nombres de Brasil y portugués, Rusia e India. Nombres comunes y cómo no encajan fácilmente en este paradigma simple de nombre de pila, apellido. Y algunos de los desafíos a los que nos enfrentamos aquí. Así es como Google resuelve ese problema cuando creas una cuenta de Google, ingresas un nombre de pila y un apellido como campos de datos distintos. Entonces, los usuarios de regiones e idiomas que no siguen necesariamente ese paradigma tendrán problemas. Pero Twitter recientemente encontró una gran solución a este problema donde tienen simplemente un campo de nombre donde un usuario puede ingresar su nombre y su guión nativo y su sintaxis nativa de nombre de pila, apellido, apellido, nombre de pila. Y se almacenará como un campo distinto. Creo que esta es una solución realmente genial para el problema de la internacionalización del nombre de usuario. Ahora que nuestras mentes están pensando más profundamente en la internacionalización, pasemos a algunas definiciones.

2. Language Granularity and Unicode

Short description:

Cuando se trata de lenguaje, existen diferentes niveles de granularidad: traducción, localización, internacionalización y globalización. La cultura juega un papel importante en cómo los usuarios interactúan con las experiencias digitales. Es crucial expandir el contenido digital a diferentes idiomas. El primer consejo es utilizar Unicode en todas partes, asegurando la compatibilidad entre diferentes sistemas y lenguajes de programación.

Entonces, ¿de qué estamos hablando aquí? Cuando comenzamos en el nivel más granular, tenemos la traducción donde, ya sabes, hello se convierte en ola, konichiwa, bonjour. Luego, el siguiente nivel de granularidad sería la localización. Y eso es, ya sabes, en inglés escribimos localización con Z en Estados Unidos. Pero si vas al Reino Unido, localización se escribe con una S. Y ambos son inglés, pero son diferentes variaciones dialectales regionales. Así que ese es el nivel de localidad al que llegamos con la localización.

El siguiente nivel de granularidad es la internationalization. Y esto es más en el lado de la ingeniería, donde envolvemos la aplicación en herramientas para internationalization para que puedan ser enviadas en forms traducidos. Aquí es donde entramos en los tubos, donde si un software es una casa, alcanzaremos los tubos, los cambiaremos. Y crearemos un sistema que pueda ser fácilmente traducido. Luego, el siguiente nivel de granularidad es la globalización, y todos estos caen bajo el paraguas de la globalización o G11N. Y es importante tener en cuenta que estos son acrónimos numéricos. Entonces, para la globalización, tomamos el primer carácter G, seguido del número de caracteres y luego el último carácter N. Y cuanto más pienso en estas grandes ideas, la cultura está profundamente arraigada en nuestro pensamiento patterns y afecta cómo nuestros usuarios interactúan y se benefician de las experiencias digitales. Entonces, la internationalization o globalización realmente van más allá de la traducción. Y al reconocer las características culturales y celebrar las diferencias, estamos creando con innovation y accesibilidad y construyendo productos para todo el mundo de usuarios.

Entonces, si miramos estas dos visualizaciones, podemos ver que la mayoría de las personas en la Tierra no hablan inglés como primer idioma. Pero podemos ver que la mayoría del contenido digital está en inglés en este momento. Así que esta es realmente una oportunidad para nosotros de expandir el contenido digital en línea a diferentes idiomas para usuarios de todo el mundo que lo usen en su lengua materna. Así que hablemos de los cinco principales tips sobre cómo podemos hacer eso. Así que el primer consejo es utilizar Unicode en todas partes. Entonces, para empezar, ¿qué es Unicode? Estoy seguro de que todos estamos muy familiarizados con ver esta línea en nuestras etiquetas HTML donde decimos meta char set equals UTF 8 para la web. Entonces, ¿qué es UTF? UTF es el formato de transformación Unicode. Unicode, ¿verdad? Así es como se representa UTF en 8, 16 y 32 bits, para el carácter A y el carácter O, en japonés. Y UTF 8 es el más común en la web. UTF 16 se utiliza en Java y Windows, y 32 se utiliza en Linux y varios sistemas Unix. Así que UTF es realmente genial porque es reversible, y las conversiones entre todos están basadas algorítmicamente y son rápidas y evitan la pérdida de información en el viaje de ida y vuelta. Entonces sabemos que muchos lenguajes de programación utilizarán directamente una de estas codificaciones UTF. Pero como ingenieros de JavaScript, ¿qué UTF utiliza JavaScript? Esto es realmente importante cuando pensamos en la codificación. Y ya sea que estés en Reactor, Angular, View o Spelt, todos están codificados de la misma manera bajo el capó.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Cómo localizar y personalizar contenido con Sanity.io y Next.js
React Advanced 2021React Advanced 2021
8 min
Cómo localizar y personalizar contenido con Sanity.io y Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
End-to-end i18n
React Advanced 2021React Advanced 2021
26 min
End-to-end i18n
Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.
Codificación de emojis, Unicode e internacionalización
JSNation Live 2020JSNation Live 2020
34 min
Codificación de emojis, Unicode e internacionalización
This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.
Internacionalizando React
React Summit Remote Edition 2021React Summit Remote Edition 2021
29 min
Internacionalizando React
The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
React Summit 2022React Summit 2022
8 min
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
Resolviendo i18n para Componentes de Servidor de React
React Summit 2024React Summit 2024
7 min
Resolviendo i18n para Componentes de Servidor de React
The Talk discusses internationalization for server components and the challenge of loading translations efficiently. It suggests using import statements in JavaScript to optimize message loading and eliminate the need for namespaces. Tree shaking and tools like Paraglide.js can help minimize message delivery and simplify the process. Overall, the Talk emphasizes the importance of efficient internationalization practices in building multilingual apps.

Workshops on related topic

Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
WorkshopFree
Harshil Agrawal
Harshil Agrawal
El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos