¿De qué tipo de cosas se debe tener cuidado al diseñar o desarrollar sitios multilingües?

El año pasado, diseñé y escribí el front-end para dos grandes proyectos que requerían internacionalización. Una es una aplicación web y la otra es un folleto híbrido de sitio web / aplicación web. Las siguientes son sugerencias que haría de lo que aprendí de mis dos proyectos.

¿Cómo se dirigirá a los usuarios a su idioma nativo?
En primer lugar, debe decidirse cómo se navegará por varios idiomas. ¿El sitio cambiará por defecto a un idioma y diseñará una interfaz de usuario que permita a los usuarios cambiarlo? ¿El sitio web redirigirá el navegador en función de la dirección IP de cada usuario? ¿Cada idioma tendrá su propia URL (sitio web.com/de) o dominio (sitio web.de)?

El texto en las imágenes no se escalará.
Esto incluye imágenes en primer plano, así como el reemplazo de texto en línea (text-indent: -9999em;) en CSS. Colocar texto en una imagen sigue siendo una forma popular de obtener fuentes atractivas que no sean del sistema para que se muestren en cualquier computadora. Sin embargo, para traducir el texto de la imagen, cada cadena de texto deberá tener una imagen separada creada para cada idioma. Cualquier cosa más que un puñado de reemplazos como este puede salirse rápidamente de control.

El uso de texto en vivo permite que el texto se traduzca fácilmente ya que los caracteres aparecen en el código, algo que un servicio de traducción puede interpretar. Incrustar fuentes personalizadas ahora es posible con @ font-face y servicios como Typekit y FontDeck.

Palabra restrictiva / longitud de la oración
Como señala Misha Kvakin, la longitud de las palabras puede variar de un idioma a otro, por lo que es mejor evitar el diseño donde la cantidad de texto podría hacer o romper un diseño. Una frase de 15 caracteres en alemán o español puede tener 4 caracteres en chino tradicional o árabe (¡lo que también muestra el texto RTL frente a LTR!).

El conteo de personajes entra en juego con cosas como titulares, etiquetas y botones. Son un problema menor con el texto de flujo libre, como el texto del cuerpo o los comentarios.

Tenga en cuenta cómo se perciben los colores en diferentes culturas
Los colores se perciben de manera diferente en todos los idiomas y culturas. El diseño debe usar el color adecuadamente.
¿Cómo se perciben los colores en diferentes idiomas y culturas?

Eliminar completamente el contenido de texto de las plantillas.
Las cadenas de texto estático comunes, como los títulos de sección y un pie de página de todo el sitio, deben eliminarse de las plantillas. Si algo necesita ser traducido, no debe estar codificado en una plantilla. Esto también se aplica a cosas como los atributos ALT y TITLE.

Fechas de formato
Las fechas del calendario a veces se presentan de diferentes maneras. P.ej. “31 de mayo de 2012” en los EE. UU. Vs. “31 de mayo de 2012” en partes de Europa. Esto debe tenerse en cuenta al decidir cómo almacenar y marcar valores para una fecha.

Técnicamente hablando, una solución de back-end puede ser bastante compleja.

Utilice la representación del lado del cliente en su lugar.

Localize.JS puede, en una línea de código JavaScript, detectar automáticamente el idioma de su usuario y mostrar contenido en su idioma nativo, desde máquinas (gratuitas) o profesionales (de pago, como Unbabel y Gengo), directamente en su sitio web o aplicación móvil. Se integra fácilmente con Squarespace, Shopify, WordPress, Tumblr y más. ¡También tenemos un apoyo increíble!

¡Echale un vistazo! => Localize.JS

Revelación:
Soy el fundador de Localize.js 🙂
¡Feliz de responder preguntas!

Nunca pienses en usar otra codificación que no sea Unicode UTF8.

Utilice siempre los atributos lang y dir en todos sus HTML . Siempre. Todo su HTML, incluidos los correos electrónicos HTML que envía a sus clientes, anuncios, HTML5 en aplicaciones móviles y en otros lugares. Nunca confíes en los valores predeterminados. ¿Estás escribiendo en inglés? Escriba . Teóricamente es el valor predeterminado, pero su contenido web puede integrarse en un entorno de derecha a izquierda, por ejemplo, cuando las personas que usan clientes de correo electrónico de derecha a izquierda se lo envían entre sí.

Evite hablar de “lado derecho” y “lado izquierdo” . Se invertirán para idiomas como el árabe, el persa, el urdu y el hebreo. Si realmente tiene que decirlo, asegúrese de que sus traductores sepan cómo deben traducirlo.

Otra consideración para el uso de derecha a izquierda es que tendrá que escribir una gran cantidad de CSS específico para cambiar las cosas y hacer algunos ajustes en el nivel de HTML y JavaScript. Hay algunas herramientas que automatizan parte de este proceso, por ejemplo CSSJanus. (La versión original está escrita en Python, y hay una versión de PHP, que se utiliza en Wikipedia. Todos son gratuitos).

Nunca concatene cadenas traducidas . No hagas nada como “La fecha de hoy es” + fecha. Se dividirá en idiomas con diferente orden de palabras. En su lugar, agregue compatibilidad con parámetros a sus mensajes y haga algo como
messages.date = “La fecha de hoy es% date”
… y entonces:
msg (‘messages.date’);

El formato real de los mensajes depende de la biblioteca i18n que use. Recomiendo jquery.i18n, del cual soy desarrollador, pero hay muchos otros.

No traduzca formatos de fecha, formas plurales, monedas e idiomas manualmente . Utilice estándares como CLDR en su lugar.

No use banderas en su selector de idioma . El mapeo entre banderas e idiomas no es 1 a 1, y tiene muchas connotaciones políticas problemáticas. Incluso el inglés y el español no tienen una sola bandera, y algunas banderas pueden ser incluso ofensivas; vea Bandera de Vietnam del Sur para ver solo un ejemplo.

Utilice códigos de idioma estándar ISO 639-3 .

Ya lo mencioné anteriormente, pero siempre asegúrese de que sus traductores tengan toda la documentación que necesitan para traducir las cosas correctamente en contexto. Incluso los mejores traductores no pueden hacer traducciones correctas sin comprender el contexto correcto.

1. Elija el formulario de URL para su sitio web multilingüe (dominios, subdominios o subcarpetas separados).

2. Si tiene varias versiones de la misma página en diferentes idiomas con diferentes URL, debe usar hreflang y atributos alternativos para informar al motor de búsqueda al respecto.

  • Hay 3 formas de implementación de hreflang: etiquetas HTML, encabezado HTTP (la implementación a través del encabezado HTTP es posible para archivos que no sean HTML) y mapa del sitio XML.
  • El atributo hreflang indica el idioma (en formato ISO 639-1) y, si es necesario, la región (en formato ISO 3166-1 Alpha 2) de la URL alternativa.
  • En el bloque hreflang debe haber enlaces no solo a páginas alternativas de la página actual, sino también a la página actual. Entonces, por ejemplo, la versión en inglés de una página web debe consistir en la etiqueta hreflang para sí misma, la segunda, para la versión italiana y la tercera, para la francesa.

3. Cada versión de idioma debe tener una dirección URL única.

4. Es mejor usar texto (no solo íconos de bandera) al crear elementos de menú para las versiones de idioma del sitio web. Los nombres nativos de los idiomas se perciben mucho más fácilmente.

Puede leer sugerencias más detalladas con ejemplos de código en mi publicación reciente Cómo optimizar sitios web multilingües.

Creo que mi respuesta te ayudará 🙂

Es importante tener en cuenta algunas cosas al diseñar sitios multilingües:

1. Rediseño para la cultura del país.
2. Optimización SEO, localizada.
3. Traducciones erróneas del lenguaje.
4. Pasarelas de pago.

Daré un ejemplo. Si tiene la palabra ‘computadora’ en inglés, en chino, se traduce como ‘cerebro eléctrico’. En inglés, si dijeras la expresión ‘hey shit head’, en coreano estarías diciendo ‘hey porno face’. El lenguaje sí importa.

Además de solo traducir palabras que realmente tienen sentido, entonces tienes otras cosas que considerar como el color (algunos colores pueden ser culturalmente desafortunados). ¿Qué tal si una empresa como Yelp muestra carne de cerdo a los condados de Medio Oriente? A menudo, a veces, los productos pueden cambiar ligeramente para adaptarse a los valores culturales.

En la actualidad, solo el 30% de las empresas en línea utilizan la localización. Esta tendencia está aumentando. Muy a menudo, el SEO está optimizado para diferentes países, con la opción de utilizar el aprendizaje automático (traducción automática) o traductores humanos a través de empresas como Professional Translation Services by Gengo – Gengo

Existen algunas empresas de localización:
1) Localizador: traduzca y localice cualquier sitio web o CMS con el complemento multilenguaje Localizador. El |
2) LocalizeJS: traduce tu sitio web | Localizar
3) Transifex: Transifex – Plataforma de localización para traducir aplicaciones web, aplicaciones móviles, sitios web | Herramienta de traducción y software
4) Bablic: Traducción de sitios web – Traduce tu sitio web – Bablic
5) Wovn: Wovn.io | Localiza tu sitio web.

Oye,

Una cosa que la gente pasa por alto es la importancia de traducir también las imágenes. Por ejemplo, la mayoría de los sitios web multilingües que visito, no importa en qué idioma esté navegando, el banner principal 90% de las veces seguirá diciendo SALE en inglés.

Otra cosa importante es CSS / estilo. Algunas palabras en algunos idiomas son más largas que otras. Por ejemplo, en inglés la página de inicio tiene 8 caracteres, en francés es Page d’Accueil – 14 caracteres. En muchos casos, los 6 caracteres adicionales son suficientes para romper su menú.

Es por eso que quiero contarles sobre https://www.Bablic.com , un inicio de localización que hace que la traducción de sitios web sea extremadamente fácil.

Básicamente, con Bablic, simplemente ingresa su URL en la página de inicio. Elija entre la traducción automática o humana y luego puede hacerlo directamente desde el editor fácil de usar, haga clic con el botón derecho en cualquier elemento y edítelo manualmente. Eso incluye texto, imágenes e incluso CSS para que no se encuentre con los dos problemas mencionados anteriormente.

Tampoco hay cambios en su backend ni nada. Simplemente pegue el fragmento de código de una línea en su encabezado y su sitio web está COMPLETAMENTE localizado.

Cosas realmente impresionantes.

Pruébalo = traducción de sitios web | Bablic

Divulgación: soy parte de Bablic

Avíseme si tiene alguna pregunta, aquí para ayudarlo.

La primera pregunta que debe hacerse es: ¿utilizará un enfoque centralizado o un enfoque descentralizado? El enfoque centralizado significa que tiene una función central que administra el sitio web, incluido su contenido. En este caso, también usaría la traducción para agregar contenido a sus sitios web internacionales. La traducción cuesta dinero y es muy difícil lograr buenos resultados con SEO.

El enfoque descentralizado significa que usted deja que cada localidad administre su propia presencia en la web. Desde la perspectiva de SEO, el enfoque descentralizado es mejor: es más fácil adaptar el contenido a un idioma específico y temas locales. Pero necesita un equipo distribuido para administrar el sitio web y es difícil.

Si quieres saber sobre sitios multilingües. Me gustaría sugerirle el blog “LOS DESAFÍOS DE SER UN TRADUCTOR MULTILINGÜE DE SITIOS WEB” .

Obtendrá todo tipo de información sobre sitios multilingües y también sus desafíos. A lo que tienes que enfrentarte durante el diseño y el desarrollo.

¡¡¡¡¡ESPACIO!!!!!

Hace mucho tiempo trabajé en un proyecto de localización para traducir el sitio web en inglés al idioma indonesio. Sin embargo, las oraciones en el idioma indonesio son generalmente más detalladas que las oraciones en el idioma inglés. Entonces tuve un gran problema en el diseño.

Es bastante mundano, lo sé, pero administrar los diversos conjuntos de idiomas desde el punto de vista editorial y de integración lleva bastante tiempo. Recientemente me encontré con esta publicación que fue bastante útil si estás usando M $ tech – http://afana.me/post/aspnet-mvc-

Además, hay una herramienta increíble, http: //zetaresourceeditor.codepl …, para administrar realmente los archivos de idioma que luego pueden compilarse en DLL o usarse como bibliotecas de recursos.

Una de las miles de cosas a tener en cuenta: un recuento de letras diferente. Digamos que tienes un “GO!” botón. En … digamos … ruso se convierte en “ВПЕРЁД!” o “НАЧАЛИ!” y puede arruinar fácilmente su diseño.

La longitud de la palabra y la frase, como señala Misha, son un problema.

Diseñe con etiquetas encima de las entradas en lugar de a un lado para hacer espacio.
También el texto puede fluir de izquierda a derecha o de derecha a izquierda, pero siempre se lee de arriba a abajo.

Los iconos y especialmente los iconos con gestos con las manos pueden tener significados diferentes o incluso vulgares / ofensivos en otras culturas.

Configure la codificación de archivo correcta para sitios que no están en inglés. Si está trabajando con Dreamweaver, así es como los sitios internacionales con Dreamweaver