Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales

Rate this content
Bookmark

i18n no es fácil, pero con una planificación cuidadosa de tu modelo de contenido te mostraré cómo estructurar la configuración, la autoría y la consulta de contenido localizado. Cubriremos documentos traducidos completos o parciales, la diferencia entre contenido específico del mercado y del idioma, formas de autoría en un CMS como Sanity y formas de consultarlo en frontends como Next.js y Remix.

8 min
17 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Voy a hablar sobre la localización en el mundo real y cómo Sanity, una plataforma de contenido estructurado, se enfoca en el contenido como datos y en la internacionalización flexible. Sanity permite múltiples idiomas en diferentes mercados, proporcionando opciones de personalización para la visibilidad del contenido según la ubicación. La plataforma ofrece un enfoque flexible para la creación y personalización de contenido, permitiendo a las organizaciones internacionalizar su contenido según sus necesidades específicas. Con el lenguaje de consulta de Sanity y la nueva versión de Sanity Studio, los desarrolladores tienen más flexibilidad que nunca.

Available in English

1. Introducción a la Localización

Short description:

Voy a hablarles sobre la localización en el mundo real. Soy de Sanity. Sanity es una plataforma para contenido estructurado. Significa que puedes personalizar tu experiencia de CMS para que sea lo que quieras. Decimos que el contenido es datos. ¿Y qué significa eso? Bueno, vamos a desglosarlo diciendo cuál es lo opuesto. Así que has construido un sitio web como este, yo he construido sitios web como este. Y en el pasado, cuando solía trabajar con sitios web de WordPress, habrías dicho, ¿cuál es el modelo de contenido de esta página?

React Jingle ♪ Si en algún momento encuentras mi charla aburrida, es posible que quieras sacar tu teléfono y tomar una foto de ese código QR. Puedes reservar una demo, echar un vistazo a Sanity, entender cómo funciona. De lo contrario, puedes escucharme durante los próximos minutos.

Buen día a todos en la sala y un gran saludo a Internet, a todos los que están viendo la transmisión en vivo. Mi nombre es Simeon Griggs, soy Ingeniero de Soluciones en Sanity.io. Y hoy vengo con dos objetivos en mente.

Uno, voy a hablarles sobre la localización. Y quiero transmitir, porque sé que ya ha sido un día largo, voy a transmitir la energía de mil soles explotando a la localización, porque sé que es un tema que emociona a la gente. Sin límites, pero dos, tengo un motivo oculto, soy un narcisista y estoy obsesionado con las fotos de los conferencistas. Y realmente espero que haya algunos fotógrafos en la sala. Y solo quiero asegurarme de que yo... ... ...me vaya con un poco de ese estilo de liderazgo de pensamiento. Así que espero que alguien haya capturado eso o tal vez haya algo mejor.

Bueno, parece que hoy estoy haciendo una noche de micrófono abierto sosteniendo mi micrófono. Voy a hablarles sobre la localización en el mundo real. Soy de Sanity. Sanity es un contenido... No es un sistema de gestión de contenido. Es una plataforma para contenido estructurado. Significa que puedes personalizar tu experiencia de CMS para que sea lo que quieras, si quieres establecer una regla de validation en un documento que necesitas resolver el wordle del día para publicarlo, puedes hacerlo. No es necesario, pero puedes hacerlo. Y decimos que el contenido es data. ¿Y qué significa eso? Bueno, vamos a desglosarlo diciendo cuál es lo opuesto. ¿Quién escucha podcasts a 1.5 de velocidad? Porque supuse que habría suficientes de ustedes que podrán seguirme el ritmo si sigo hablando así todo el tiempo.

Así que has construido un sitio web como este, yo he construido sitios web como este. Y en el pasado, cuando solía trabajar con sitios web de WordPress, ¿quién solía construir sitios web de WordPress para ganarse la vida? Sí, mi gente. Y en aquel entonces habrías mirado esto y habrías dicho, ¿cuál es el modelo de contenido de esta página? Y habrías dicho, Simeon, el modelo de contenido para eso, señor, es una página. Y habrías creado un archivo llamado template-course.php y lo habrías creado como una página. Y las lecciones habrían sido páginas secundarias de esa página.

2. Content as Data and Internationalization

Short description:

Sanity se enfoca en el contenido como datos y permite una internacionalización flexible. Los datos del lenguaje pueden ser internacionalizados de manera diferente según el contenido. Sanity proporciona la flexibilidad para internacionalizar las cosas de acuerdo con el contenido. Puedes configurar los idiomas en Sanity utilizando JavaScript, mapeando campos o documentos para crear versiones específicas de idioma. Esta única fuente de verdad puede ser distribuida a tu esquema de Sanity, complementos, APIs y servicios de traducción, y tus rutas de Next.js o Remix. Como ingeniero de soluciones, presento Sanity a los clientes y muestro cómo nuestros clientes han realizado la internacionalización en nuestro software utilizando pares clave-valor.

Pero eso es contenido como presentación. Sanity se enfoca en el contenido como data. Y si aún estás usando WordPress, no sé, ahora son todos bloques o algo así, pero no es correcto. Así que volvamos a mirar este sitio web. Está compuesto por piezas de contenido dispares que están conectadas, pero no tenemos que centrarnos en la presentación como un sitio web. Simplemente sucede que está en un sitio web. Esto es contenido. Esto es data de curso, data de presentador, data de etiqueta, data de lección, y lo más importante de todo para el tema de hoy, esto es data de idioma. Y el data de idioma es realmente importante porque puede ser internacionalizado de manera diferente según ese contenido.

Así que consideremos nuestro modelo de presentador. Tengo un nombre, un título y una foto. Ahora, solo dos de esas cosas van a cambiar si necesito internacionalizar este documento. Mi nombre siempre va a ser el mismo. Mi foto va a ser la misma. Entonces, si tengo múltiples versiones de idioma en ese documento, voy a crear múltiples versiones de idioma de ese campo. Y si estoy viendo una lección, bueno, todas estas son texto, así que no tendría sentido tener todas estas como versiones localizadas en este documento, más bien podríamos hacer versiones localizadas de ese documento, y esta es la flexibilidad que Sanity te brinda, puedes internacionalizar las cosas, de acuerdo con el contenido, no de acuerdo con nosotros. No te decimos cómo hacer la internacionalización de idioma, porque para nosotros, todo es data. El idioma es el data. Así es como configuras los idiomas en Sanity, porque todo es JavaScript, por lo que tiene sentido para un desarrollador, ¿verdad? Simplemente mapeas los campos, o mapeas los documentos, y creas versiones específicas de idioma de esos. Y luego este archivo de configuración se puede propagar a tu esquema de Sanity, a tus complementos, a las APIs y servicios de traducción, a tus rutas de Next.js o Remix, y todo proviene de esta única fuente de verdad que subes a GitHub, implementas en el Studio. Y eso es la localización en el mundo real.

Como ingeniero de soluciones, gran parte de mi trabajo consiste en presentar Sanity a nuestros clientes, pero lo genial de lo flexible que es Sanity como plataforma de contenido es que nuestros clientes nos cuentan cómo hacen las cosas. Y gran parte del resto de la charla aquí es mostrar cómo nuestros clientes muestran cómo han realizado la internacionalización en nuestro software. El problema es que no puedo decirles sus nombres, así que tengo que hablar en palabras ambiguas, más o menos. Entonces, esta empresa de altavoces conectados a Internet que utiliza Sanity, utiliza pares clave-valor. Entonces, si has hecho localización con Sanity, probablemente ya hayas hecho este tipo de cosas. Esto es un vistazo a un complemento de Google Translate que tenemos para que puedas escribir contenido en un idioma y que se traduzca automáticamente a varios otros idiomas. Y puedes configurar pares clave-valor. Por lo general, los almacenarías en JSON. Puedes dar a tus equipos de contenido una versión editable de ese contenido.

3. Creación y Personalización de Contenido Multilingüe

Short description:

Hay una marca alemana de fitness en particular que amplía el modelo con mercados e idiomas. Sanity permite múltiples idiomas en diferentes mercados. Un conglomerado multinacional con 75 sitios web específicos de mercado en múltiples idiomas utiliza Sanity. Una empresa sueca de transmisión de música también utiliza Sanity, con 22 idiomas y mercados personalizados. Los editores de contenido pueden crear mercados para personalizar la visibilidad del contenido según la ubicación.

Hay una marca alemana de fitness en particular con la que también trabajamos. Amplían el modelo. Tienen mercados e idiomas. Algunos mercados tienen varios idiomas. Algunos mercados tienen un solo idioma. Es posible que dos mercados no tengan el mismo idioma, pero aún pueden proporcionar la misma experiencia aquí. Entonces, no todos los mercados están creando el mismo contenido, pero los mercados están creando contenido en varios idiomas. Y puedes hacer todo eso en Sanity. Y puedes configurarlo como quieras. Y esta es una vista administrativa. Pero también pueden utilizarla para sus roles y permisos de usuario. Entonces, ahora un autor canadiense que inicia sesión solo ve su contenido, aunque todo se administra desde un único conjunto de datos. ¿Todos se sienten agotados con la forma en que estoy hablando? Probablemente sea demasiado. Entonces, este conglomerado multinacional hace lo mismo, pero están en como 75 mercados en un único conjunto de datos. 75 sitios web específicos de mercado con múltiples idiomas, todo desde un único conjunto de datos, todo desde un proyecto de Sanity, además de contenido global. Las personas pueden acceder a otro conjunto de datos y origen en otro mercado y extraer contenido y ser capaces de traducir su propia versión de eso. Entonces, es como la versión global con los mercados también. Y eso es, esto es lo que mencioné sobre llegar más allá. Y luego esta empresa sueca de transmisión de música en particular que resulta que utiliza Sanity y probablemente no puedas adivinar quién es. Utilizan 22 idiomas, mercados personalizados. Como, los mercados no están en código. Los editores de contenido pueden crear mercados. Si quieren decir que esta línea de texto solo se puede ver en países donde está disponible este plan en particular, pueden hacerlo desde un solo documento. Y aquí está. Así que hay mucho que analizar aquí. Vamos a repasarlo muy rápidamente, y casi he terminado. Juro que esta cosa me está parpadeando, pero casi he terminado. Ofrecen todo su contenido específico de mercado en un solo documento. Y aquí tenemos algo de contenido noruego, algo de contenido de Estados Unidos. Si lo vemos desde Estados Unidos, solo vemos ese contenido.

4. Contenido como Datos y Flexibilidad

Short description:

Almacenamos contenido como datos y tenemos nuestro propio lenguaje de consulta. Internacionaliza tu contenido según las necesidades de tu organización. Echa un vistazo a nuestra demo y a la nueva versión de Sanity Studio. Nunca ha sido tan flexible. Nunca ha habido un mejor momento para ser un desarrollador de Sanity.

Esto se debe a que almacenamos el contenido como data. Es porque es un array de objetos, ese texto. Si echamos un vistazo a la versión noruega, lo estamos filtrando. Y no estamos sobreobteniendo, obteniendo en exceso sonaba como un kiwi ahí, obteniendo en exceso y luego filtrándolo nuevamente. Hacemos esto en el momento de la consulta porque también tenemos nuestro propio lenguaje de consulta. Deberías venir y preguntarnos sobre eso.

Entonces, en primer lugar, el contenido es data. Me da vergüenza intentar esto, pero de todos modos lo haré. Hagamos una llamada y respuesta. Yo digo contenido. Tú dices es data. Contenido. Contenido. Funcionó. Contenido internacionalizado por su dominio. No dejemos que te digamos cómo internacionalizar tu contenido. Podemos mostrarte mejores prácticas, pero puedes hacerlo de la manera que tenga sentido para tu organización. Que es un poco este punto. Localiza como debas. Localiza cómo debas trabajar, cómo necesites. Creo que escribí eso. Soy responsable de ello.

De todos modos, si quieres echar un vistazo a esa demo, si aún tienes tus fotos a mano. Fotos a mano, cámaras a mano. Echa un vistazo a la demo o ven a vernos al stand después. Una cosa más. Lo siento, pensé que había terminado, pero agregué estas diapositivas muy recientemente. Acabamos de lanzar la nueva versión de Sanity Studio. Versión 3. ¿Tu CMS puede hacer esto? Ahora todo el CMS es solo un componente que puedes cargar en cualquier aplicación React. Así que al final de todas estas charlas rápidas en el próximo descanso, corre, no camines, hacia el stand de Sanity y te mostraremos Sanity Studio dentro de una aplicación Remix. que puedes colocar donde quieras. Nunca ha sido tan flexible. Nunca ha habido un mejor momento para ser un desarrollador de Sanity. Nunca ha habido un mejor momento para configurar un... Iba a decir un headless CMS pero no se me permite decir eso. Una plataforma para contenido estructurado. Gracias. Eso es todo.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up