Sitio web multilingüe de la conferencia «ProKrakhmal» en seis idiomas

En este caso: cómo lanzamos la versión multilingüe del sitio web de la conferencia anual de la industria en seis idiomas y los desafíos no triviales que enfrentamos.
Cliente: la conferencia internacional anual «ProKrakhmal» es una plataforma industrial para especialistas en la industria del almidón y la melaza, organizada por la Asociación «SOYUZKRAKHMAL». La conferencia se celebra en Moscú y reúne a participantes de Rusia y del extranjero. En 2026, la conferencia celebra su décimo aniversario.
Tarea: el sitio web originalmente estaba solo en ruso. Para la conferencia de aniversario de 2026, era necesario atraer a participantes y socios extranjeros, principalmente de China, Turquía y los países del sudeste asiático. Lanzar un sitio web multilingüe, accesible para todos los socios internacionales.

Seis idiomas en un solo lanzamiento

Se conectaron seis idiomas para la conferencia: ruso, inglés, chino, turco, vietnamita y tailandés.
https://multify-workspace.vercel.app/prostarch/lang-switcher.png
Selector de idioma en prostarch.ru
El selector con banderas apareció en el encabezado del sitio. Cada versión de idioma está disponible a través de una URL separada y es indexada por los motores de búsqueda: un usuario de Tailandia puede encontrar el sitio a través de Google tailandés.
Las páginas para patrocinadores y participantes están traducidas a todos los idiomas, incluyendo las condiciones detalladas de participación y el formulario de contacto.
Pero en el caso de este sitio web, una simple conexión no fue suficiente: el sitio fue maquetado usando Zero Block sin posicionamiento adaptativo (flexbox). Esto significaba que al cambiar el texto, la posición de los elementos no cambiaba.
Además, el sitio web tenía varios elementos de diseño que dependían directamente de la longitud del texto. Así que nos encontramos con el primer problema...

Adaptación visual de los encabezados en diferentes textos

El sitio web está hecho en Tilda. Uno de los bloques clave es el título del banner con una estructura de dos partes: la primera línea es oscura, la segunda está resaltada con color. En la versión rusa, el bloque se veía limpio.
Al traducir a otros idiomas, el bloque resaltado dejó de coincidir con el texto: el texto se salía de los límites del bloque y se superponía con elementos adyacentes.
¿Por qué? Tilda utiliza posicionamiento absoluto para algunos elementos del banner. El ancho del bloque resaltado se establece de forma fija para el texto en ruso. En otros idiomas, el texto tiene una longitud diferente y no coincide. Después de editar el CSS, el bloque se adaptó a la longitud del texto:
https://multify-workspace.vercel.app/prostarch/layout-broken-tr.png
En la versión turca, el bloque resaltado estaba casi en el mismo lugar
El mismo problema a la inversa surgió en chino: el texto era significativamente más corto y el bloque parecía vacío. Por lo tanto, allí corregimos la alineación:
Y en la versión china, el texto debía moverse significativamente a la izquierda
Ahora, para cada versión del sitio web, la intención original del diseñador se mantuvo y los visitantes en cualquier idioma vieron el diseño correcto.

Preservación de juegos de palabras mediante instrucciones (prompt) para la red neuronal

La idea original del copywriting en el sitio web: usar el prefijo "PRO" para cada dirección. Este juego de palabras sobre el nombre de la conferencia "ProKrakhmal":
Pero aquí está el problema: inicialmente, la red neuronal no es lo suficientemente inteligente como para entender esto. Por lo tanto, traducía el prefijo literalmente:
Traducción literal al turco y vietnamita
Para preservar esto, agregamos un prompt (instrucción) para la red neuronal, para que tuviera en cuenta este juego de palabras. Es interesante que el prompt no estaba dirigido específicamente a este bloque en el sitio web, sino que daba una instrucción general para todo el sitio. Por lo tanto, si en algún otro lugar se utilizara un juego de palabras similar, la red neuronal ya lo "sabría".
Traducción con instrucciones
Fue suficiente con establecer el siguiente texto con una explicación y ejemplos:
"PRO analítica", "PRO estrategia", "PRO tecnología", "PRO consumidores" es un juego de palabras con el nombre de la conferencia "ProStarch", y significa "Sobre" el tema.

No traduzca la parte "PRO".

Glosario de la industria para una traducción precisa

Esta industria utiliza terminología altamente especializada y específica. La traducción estándar sin preparación utiliza palabras de uso común donde se necesitan términos industriales precisos.
Junto con los organizadores, recopilamos un glosario detallado de términos clave con sus equivalentes correctos en inglés. El glosario también se convirtió en parte del prompt del sistema para la red neuronal, aquí hay un fragmento:
## Glosario de terminología de la industria:

- ПроКрахмал => ProStarch
- ПроКрахмал: от сырья к биоэкономике => ProStarch: De las materias primas a la
  Bioeconomía
- Союзкрахмал => StarchUnion
- Ассоциация предприятий глубокой переработки зерна => Asociación de
  empresas de procesamiento de grano de valor añadido
- ГПЗ => Procesamiento profundo de grano
- ЕАЭС => Unión Económica Euroasiática (UEEA)
- ШОС => Organización de Cooperación de Shanghái
- ГФС => Jarabe de glucosa-fructosa

...
Procesamiento profundo de granos — GPZ en ruso
Deep grain processing en inglés, y no "GPZ", etc.

Diferentes versiones de video para diferentes idiomas

Como materiales promocionales, el sitio web utiliza videos en tres idiomas: ruso, inglés y chino. Era necesario mostrar el video correcto según el idioma del sitio.
Esto se implementó utilizando clases CSS: a cada bloque de video se le asignó la clase video-ru, video-cn o video-en. A través de reglas para eliminar elementos por selector, Multify eliminó los videos "extra" directamente del código HTML antes de enviarlo al navegador. Por ejemplo, para la versión en inglés, la regla es la siguiente:
"remove": [
  {
    "selector": ".video-ru, .video-cn"
  }
]
Mientras que para la versión en ruso, se eliminan las versiones en inglés y chino de los vídeos:
"remove": [
  {
    "selector": ".video-en, .video-cn"
  }
]
En el editor de Tilda, a su vez, se crearon las tres versiones de vídeo y se superpusieron.
Reproductor de VK Video con vídeo en ruso
Reproductor Kinescope con subtítulos en inglés

Localización de la modificación del contador de días

En la página principal se utiliza una modificación de JavaScript con un contador de días hasta el inicio de la conferencia. De forma análoga a la visualización de vídeos, se puede reemplazar el texto de la página, incluidos los fragmentos de código JavaScript, que es lo que hicimos. Y aquí, por cierto, está el código, esta vez resultó ser una modificación de ANNEXX:
Así es como se puede traducir "días" al inglés:
"replace": [
    [
        "daysText1 = 'день' || 'день', daysText2 = 'дня' || 'дня', daysText5 = 'días' || 'días'",
        "daysText1 = 'day' || 'days', daysText2 = 'days' || 'days', daysText5 = 'days' || 'days'"
    ],
],
Y así al chino:
"replace": [
    [
        "daysText1 = 'день' || 'день', daysText2 = 'дня' || 'дня', daysText5 = 'дней' || 'días'",
        "daysText1 = '天', daysText2 = '天', daysText5 = '天'"
    ],
],
Como resultado, el contador se muestra en el idioma deseado en cada versión del sitio:

Diseño responsivo (flexbox)

Anteriormente se mencionó que con el posicionamiento absoluto de los elementos en Tilda (algo común al diseñar con Zero Block), los elementos están literalmente "clavados" y, por lo tanto, cualquier cambio de texto en ellos puede resultar en la superposición de texto con otros elementos.
Para evitar esto, se puede utilizar el mecanismo integrado en cada navegador: flexbox. Con este enfoque, los elementos se vuelven "elásticos", es decir, se adaptan automáticamente al contenido.
¿Qué es un Flex Box?
Fuente: delasign — ¿Qué es un Flex Box?
En la práctica, para el sitio web de la conferencia ProKrakhmal, actualizamos el diseño de la mayoría de los elementos: cápsulas, listas y tarjetas. La diferencia se nota mejor al comparar el ruso y el chino, porque el chino es significativamente más corto:
Como resultado, todo el contenido del sitio se muestra correctamente, independientemente de la longitud del texto en los elementos.

Reseña del organizador de la conferencia

Daria, organizadora de la conferencia «ProKrakhmal»:
Este año, nuestra conferencia internacional celebra su décimo aniversario. Para conmemorarlo, decidimos lanzar nuestro propio sitio web, pero nos encontramos con el problema de la traducción a diferentes idiomas extranjeros: muchos traductores a menudo usan palabras estereotipadas, y necesitábamos términos específicos debido a la naturaleza especializada de nuestra industria. También fue un desafío traducir a varios idiomas a la vez: tailandés, chino, inglés, turco y vietnamita.

¡Decidimos contactar a Multify y quedamos muy satisfechos! El especialista nos aconsejó de inmediato que todo se podía configurar una sola vez. Explicó las sutilezas y aceptó las correcciones con calma y paciencia.

Se creó un glosario especialmente para nosotros para la traducción correcta de términos individuales, y el diseño del sitio web se adaptó a cada idioma. ¡Agradecemos este servicio y estamos seguros de que nuestra cooperación continuará durante muchos años!
Los socios chinos de la conferencia también apreciaron el resultado:

Resultado

El sitio prostarch.ru funciona en seis idiomas desde su lanzamiento. Las versiones lingüísticas están disponibles en la búsqueda, el selector funciona en el encabezado, las páginas para patrocinadores y participantes están completamente localizadas.
La especificidad del caso es un conjunto de idiomas no estándar (tailandés, vietnamita, turco) y varias peculiaridades técnicas que requirieron un ajuste manual del diseño. En un sitio web estándar sin posicionamiento absoluto, la mayoría de estos problemas no habrían surgido.

Lanzar versiones lingüísticas de su sitio web

Multify se conecta a cualquier sitio web en Tilda y crea versiones lingüísticas completas con SEO automático. Vea cómo se ve en su sitio web.

Conectaremos Multify a su sitio web

Las respuestas a sus preguntas nos ayudarán a entender cómo conectar mejor su sitio web

Tipo de sitio web
Número de páginas
Tráfico mensual del sitio web
Método de contacto preferido *