Share
Ofrecer contenido en varios idiomas puede agregar muchas capas nuevas de complejidad al diseño web. Traducir artículos es solo el primer obstáculo; estructurar un sitio web multilingüe puede ser bastante difícil. Para ayudarlo a hacerlo bien, voy a ofrecer algunos consejos y compartir algunas de nuestras experiencias en Tuts + para ser multilingüe..
El primer consejo no está realmente relacionado con el diseño web, pero es importante de todos modos. Cuando ofrece contenido en varios idiomas, es mejor no confiar en el software de traducción. No me malinterpretes, las herramientas como Google Translate son fáciles de usar y mejoran constantemente, pero la precisión del texto traducido varía (¡incluso en algunos casos hemos cometido una falta en Tuts +!)
Iniciativas como la Comunidad de traductores de Google refinan cómo se hacen las traducciones.Por esta razón, es una buena idea conseguir un traductor humano. Opte por un servicio de pago como Fliplingo o, según su proyecto, use plataformas de traducción impulsadas por la comunidad como Native. Los seres humanos tienen un mejor conocimiento del vocabulario local y los matices sutiles del lenguaje. Al momento de escribir este artículo, el software automatizado no había llegado a ese punto..
En Tuts + tenemos que agradecer a nuestros lectores por traducir nuestros tutoriales.
Un sitio web multilingüe es inútil sin la posibilidad de cambiar de idioma. A menudo encontrará que los sitios web multilingües utilizan un menú desplegable, situado en la parte superior derecha de la página (para el contenido de izquierda a derecha, la esquina superior izquierda es más adecuada). También puede encontrar conmutadores en el pie de página (el enfoque que elige IBM.com). Cualquiera que sea el patrón que elija, asegúrese de que el menú desplegable sea fácil de ver y acceder.
En Tuts + usamos un seleccionar elemento dentro de los detalles meta de la publicación, más una lista en la barra lateral para asegurarse de que las bases estén cubiertas:
Si opta por utilizar un elemento de selección, el W3C recomienda algunas pautas útiles.
Las banderas se usan muy a menudo para indicar un idioma. Sin embargo, estoy de acuerdo con Gunnar Bittersmann, en que no soy un gran fan de usar las banderas para los conmutadores de idiomas. Considere las siguientes razones:
Por ejemplo:
https://www.duolingo.comDuolingo defiende su uso de la bandera brasileña porque enseñan portugués brasileño. Pero su variante de español está más cerca del español latinoamericano que del castellano (español tradicional), por lo que el uso de banderas aquí es inconsistente y confuso..
Es mejor referirse a un idioma en su propio idioma, por ejemplo, 'Deutsch' en lugar de 'Alemán'. También será útil ordenar alfabéticamente los idiomas, para que los usuarios puedan encontrar fácilmente la versión correcta. Echa un vistazo a la barra lateral de Wikipedia para inspirarte..
Ciertos sitios web redirigen a los usuarios a la página de inicio cuando cambian de idioma. Esto puede ser confuso, porque los usuarios tienen que encontrar la página nuevamente. Para mantener felices a sus visitantes, siempre que sea posible, asegúrese de que aparezcan con la misma página (traducida) cuando cambien de idioma.
¿Quieres establecer un idioma predeterminado para los visitantes por primera vez? Es posible detectar el idioma del usuario y mostrar automáticamente la página en el idioma preferido del usuario. Sin embargo, no oculte las otras opciones, en caso de que el usuario quiera cambiar.
Lea más en Smashing Magazine: ¿Debería preguntar al usuario o su navegador??
Tu contenido debe ser legible, así que asegúrate de que la codificación de caracteres en el encabezado de la página esté configurada correctamente:
Desde el W3C:
"Una codificación basada en Unicode como UTF-8 puede admitir muchos idiomas y puede acomodar páginas y formularios en cualquier combinación de esos idiomas".
Luego considere las fuentes reales: su fuente web debe ser compatible con todos los idiomas que admita, especialmente para idiomas no latinos. Esto significa que la fuente utilizada debe contener todos los caracteres y glifos que normalmente necesita. Algunos idiomas comprenden cientos de caracteres, lo que hace que los archivos de fuentes sean muy pesados. Considere, por lo tanto, refinar los grupos de caracteres que incluye en los archivos..
Hay varios sitios web que ofrecen fuentes basadas en caracteres no latinos, como typebank.co.jp, y una rápida búsqueda en Google te ayudará a encontrar más alternativas.
https://www.typebank.co.jpTambién hay otras consideraciones tipográficas. No olvide que ciertos idiomas son más "Wordy" y por lo tanto ocupan más espacio. Un botón 'agregar al carrito' podría traducirse en holandés a 'aan winkelwagen toevoegen'. La versión en inglés consta de 11 caracteres, la versión holandesa 25, que ocupa el doble de espacio. Cuando el espacio es escaso, puede probar una traducción diferente, menos literal, o cambiar el tamaño de fuente en función del idioma.
Es posible que otras fuentes no latinas necesiten una altura de línea o tamaño de carácter diferente a su valor predeterminado latino. Los caracteres chinos, por ejemplo, son visualmente más complejos que los caracteres latinos, lo que significa que deben ser lo suficientemente grandes para una distinción clara. Estos factores pueden alterar enormemente la apariencia de la página, así que téngalos en cuenta..
Aquí hay algo de lo que quizás no sepas: los idiomas no tienen una dirección, pero la guión están escritas en hace Por ejemplo, los azeríes (hablados por la gente de Azerbaiyán) se pueden escribir utilizando scripts latinos o cirílicos, en cuyo caso se escribe LTR (de izquierda a derecha). Alternativamente, se puede escribir en escritura árabe, en cuyo caso se escribe RTL (de derecha a izquierda).
La mayoría de los lenguajes utilizan scripts que se escriben y leen de izquierda a derecha, pero en ese caso no es útil reflejar el diseño de toda la página web. Sí, todo el diseño. El texto, las imágenes, la navegación, las barras laterales, los botones, los menús desplegables, las barras de desplazamiento ... deben estar reflejados..
Tom Maslen explica cómo el equipo de la BBC usa Sass para ayudarlos con diseños bidireccionales:
Para el contenido, especifique la dirección del texto a través de dir = "rtl" atributo. Este atributo es compatible con todos los principales navegadores. Aquí hay un ejemplo de HTML:
O usa CSS:
.contenido dirección: rtl; /* De derecha a izquierda */
Uno de los errores que encontramos en Tuts + incluía fragmentos de código en línea dentro Texto RTL (como en traducciones en árabe, farsi y hebreo). El texto lee RTL, pero el código en línea debe permanecer LTR. En este ejemplo, el código en línea siempre debe leer html, cuerpo ancho: 100%; :
Después del original en inglés, puede ver qué sucede con el código en línea en el segundo ejemplo. El ejemplo 3 intenta anular eso especificando:
.código árabe dirección: ltr;
pero, como puede ver, tiene poco o ningún efecto. Aquí es donde el Unicode-Bidi la propiedad entra. Emparejado con el empotrar valor, esto nos ayuda a anular la dirección calculada del navegador para los elementos incrustados. El ejemplo 4 demuestra que esto ha funcionado:
.código árabe dirección: ltr; unicode-bidi: incrustar;
Hay varias formas de estructurar las URL de los sitios web multilingües. Cada opción tiene ventajas y desventajas..
Un dominio de nivel superior de código de país (ccTLD) está vinculado a un país específico, como .fr para Francia y .es para España.
Los ccTLD son una clara señal para los motores de búsqueda de que un sitio web está dirigido a usuarios en ese país. La ubicación del servidor es irrelevante y es fácil separar los sitios web. Las mayores desventajas son la disponibilidad de dominios y los costos adicionales..
Ciertas extensiones de dominio no están vinculadas a un país o región. El más popular es .com, pero hay otros dominios de nivel superior genéricos de uso frecuente, como .net y .org.
Estos gTLD se pueden usar en combinación con un subdominio, por ejemplo fr.website.com. Es fácil de configurar y la mayoría de los motores de búsqueda comprenden este tipo de orientación geográfica. Sin embargo, es posible que los usuarios no siempre reconozcan el idioma del contenido en función de la URL.
Los subdirectorios son contrapartes de los subdominios. A menudo se usan para estructurar el contenido (por ejemplo, website.com/blog o website.com/tshirts), pero también se pueden usar para propósitos de orientación geográfica. En este caso usamos website.com/fr para estructurar nuestras URL.
Con esta técnica, todo puede ser alojado en el mismo servidor. La configuración es muy fácil y puede utilizar la Consola de búsqueda de Google para identificar los diferentes idiomas. Una desventaja es que los usuarios podrían no reconocer la segmentación geográfica solo de la URL (por ejemplo, ¿es webshop.com/de/ en alemán o no?)
Finalmente, hay parámetros de URL, por ejemplo website.com?country=it. No se recomiendan los parámetros de URL, ya que son difíciles de interpretar por los motores de búsqueda..
Personalmente, me gusta usar subdirectorios en combinación con un gTLD. Los subdominios se usan principalmente para separar contenido que es completamente diferente. Debido a que los sitios web multilingües son básicamente traducciones del mismo contenido (la mayoría de las veces), los subdirectorios son una solución obvia.
Puedes usar el idioma en la URL, por ejemplo:
O combina el idioma y la ubicación:
Para evitar problemas de contenido duplicado, es mejor identificar una versión preferida para cada idioma / ubicación. Podemos usar un elemento de enlace HTML simple para esto, a saber: rel = "suplente" hreflang = "x". Múltiple hreflang las etiquetas se deben utilizar en una página; Una que hace referencia a sí misma y un enlace a cada alternativa..
En una página web, ese código podría verse así:
Este código le dice a los motores de búsqueda que example.com está dirigido a personas que hablan inglés en el Reino Unido. También dice que hay dos variaciones del mismo contenido, a saber, una para los EE. UU. Y una para Australia..
Al diseñar sitios web multilingües, hay varias otras cosas a considerar, tales como:
No todos los países utilizan el mismo formato de fecha. A veces tendrás que convertir las fechas del calendario gregoriano a, por ejemplo, el calendario persa.
Los países tienen diferentes puntos de vista éticos. Existe una naturaleza cultural específica de la sexualidad, el humor, el simbolismo, etc., que se pasa por alto fácilmente al traducir un sitio web. Por ejemplo: en ciertos países es perfectamente aceptable mostrar una foto de una pareja gay, mientras que otros países pueden encontrar esta ofensiva.
¿Está utilizando un captcha en su sitio web? Asegúrese de que esté en el mismo idioma que el contenido de la página. Como visitante del Reino Unido, es poco probable que desee resolver un captcha ruso.
Porque ya no son lo suficientemente difíciles ... Ayude a sus visitantes con números de teléfono en su sitio web incluyendo el código de país. Puede encontrar una lista de todos los códigos de país en esta página.
Hay muchas más consideraciones al preparar un sitio web para la internacionalización completa, pero estos indicadores deberían haberle brindado una buena base para trabajar. Háganos saber en los comentarios qué otros consejos tiene para el diseño web multilingüe, y suscríbase al boletín de Tuts + Translation Project si está interesado en escuchar lo que estamos haciendo!
Accentsconagua