Advertisement
  1. Web Design
  2. Internationalization

Consejos para Diseñar y Elaborar un Sitio Web Multilingüe

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Ofrecer contenido en varios idiomas puede agregar muchas nuevas capas de complejidad al diseño web. Traducir artículos es solo el primer obstáculo; esctructurar un sitio web multilingüe puede ser muy difícil. Para ayudarte a hacerlo bien, voy a ofrecer algunos consejos, y compartir algunas de nuestras experiencias en Tuts+ para volverlo multilingüe.

1. Traducirlo

El primer consejo no está realmente relacionado con el diseño web, pero no obstante es importante. Cuando ofreces contenido en varios idiomas, es mejor no confiar en software de traducción. No me malinterpretes, herramientas como Google Translate son fáciles de usar y constantemente mejoran, pero la exactitud del texto traducido varía (¡incluso hemos tenido problemas en Tuts+ en alguna ocasión!)

Initiatives such as the Google Translate Community continually refine how translations are madeInitiatives such as the Google Translate Community continually refine how translations are madeInitiatives such as the Google Translate Community continually refine how translations are made
Iniciativas tales como Google Translate Community mejoran notablemente como se hacen las traducciones.

Por ésta razón es una buena idea tener un traductor humano. Ya sea que optes por un servicio de pago como Fliplingo, o (dependiendo de tu proyecto) usar plataformas de traducción dirigidas por la comunidad como Native. Humanos tienen un mejor conocimiento de vocabulario local y los sutiles matices del lenguaje. Al momento de escribir éste artículo, el software automatizado no ha alcanzado ese punto.

En Tuts+ tenemos que agradecer a nuestros lectores por traducir nuestros tutoriales.

2. Presentar Opciones de Lenguaje

Un sitio multilingue es inútil sin la capacidad de cambiar de idiomas. Con frecuencia encontrarás sitios multilingües que usan un desplegable colocado en la esquina superior derecha de la página (para contenido de izquierda a derecha la esquina superior izquierda es más adecuado). También podrías encontrar elementos que ofrecen la opción de cambiar en el footer (el enfoque que elige IBM.com). Cualquiera que sea el patrón que elijas, asegúrate que el desplegable sea fácil de ver y de accesar.

En Tuts+ usamos un elemento select dentro de detalles post meta, además de una lista en la barra lateral para asegurar que las bases sean cubiertas:

Si optas usar un elemento select, la W3C recomienda algunas pautas útiles.

Banderas

Las banderas son muy frecuentemente utilizadas para indicar un idioma. Sin embargo, coincido con Gunnar Bittersmann, en no ser un gran fanático de usar banderas para cambiar de idioma. Considera las siguientes razones:

  • Banderas representan países, no idiomas.
  • Un país puede tener más de un idioma oficial.
  • Un idioma puede ser hablado en más de un país.
  • Visitantes podrían no reconocer una bandera (por el tamaño del ícono) o podrían confundirse con banderas similares.

Por ejemplo:

httpswwwduolingocomhttpswwwduolingocomhttpswwwduolingocom
https://www.duolingo.com

Duolingo defiende su uso de la bandera brasileña porque enseñan portugués brasileño. Pero su variante de español es más cercano al español latinoamericano que al Castellano (español tradicional), así 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'. Ordenar idiomas alfabéticamente también ayudará, para que los usuarios pueden encontrar fácilmente la versión correcta. Observa la barra lateral de Wikipedia para inspiración.

Redirigir

Ciertos sitios web redirigen a usuarios a la página de inicio cuando cambian idiomas. Ésto puede ser confuso, porque usuarios luego tienen que encontrar la página otra vez. Para mantener a tus visitantes contentos, cuando sea posible asegúrate de presentarles la misma página (traducida) cuando cambian de idiomas.

Detectar el Idioma Predeterminado

¿Quieres establecer un idioma predeterminado para los nuevos visitantes? Es posible detectar el idioma del usuario y automáticamente mostrar la página en el lenguaje preferido del usuario. Sin embargo, no ocultes las otras opciones, en caso de que el usuario quiera cambiar.

Lee más en la Revista Smashing: ¿Deberías Preguntarles a los Usuarios o a Su Navegador?

3. Codificación y Fuentes

Tu contenido necesita ser legible, asi que asegurate que la codificación de caracteres en la cabecera de la página sea establecida correctamente.

De la W3C.

"Una codificación basada en Unicode como UTF-8 puede soportar muchos idiomas y puede acomodar páginas y formularios en cualquier combinación de éstos idiomas".

Después considera las fuentes: tu fuente web necesita ser compatible con todos los idiomas que soportas, especialmente para idiomas no basados en el latín. Ésto significa que la fuente usada debe contener todos los caracteres y pictogramas que comúnmente necesitas. Algunos idiomas comprenden cientos de caracteres, haciendo muy pesados los mismos archivos de fuentes. Considera por lo tanto refinar los grupos de caracteres que incluyas en los archivos.

Hay varios sitios web que ofrecen fuentes basadas en caracteres no basados en el latín, como typebank.co.jp, y una rápida búsqueda en Google te ayudará a encontrar más alternativas.

httpswwwtypebankcojphttpswwwtypebankcojphttpswwwtypebankcojp
https://www.typebank.co.jp

También hay otras consideraciones tipográficas. No olvides que ciertos idiomas son mas ricos en palabras y por lo tanto ocupan más espacio. Un botón 'agregar al carro' podría ser traducido al alemán como 'aan winkelwagen toeveogen'. La versión inglesa consiste de 11 caracteres, la versión holandesa de 25, ocupando el doble de espacio. Cuando el espacio es escaso, puedes intentar una traducción diferente, menos literal, o cambiar el tamaño de fuente basada en el idioma.

Otras fuentes no basadas en el latín pueden necesitar un interlineado o tamaño de caracter diferente a tu predeterminado Latin. Caracteres chinos, por ejemplo, son visualmente más complejos que caracteres basados en el Latín, significando que necesitan ser lo suficientemente grandes para que se distingan claramente. Éstos factores pueden en gran medida alterar la apariencia de la página, asi que tómalos en cuenta.

4. Izquierda a Derecha y Derecha a Izquierda

Aquí hay algo de lo que puedes no estar consciente: los idiomas no tienen una dirección, pero el script en el que están escritos si la tiene. Por ejemplo, Azerí (hablado por la gente de Azerbayán) puede ser escrito usando alfabetos Latinos o Cirílicos, en cuyo caso se escribe LTR (De izquierda d derecha). Alternativamente puede escribirse en el alfabeto Árabe, que se escribe RTL (de derecha a izquierda).

La mayoría de los idiomas usan alfabetos que se leen y escriben de izquierda a derecha, pero donde no sea el caso es útil reflejar el maquetado de toda la página web. Si, todo el maquetado. Texto, imágenes, navegación, barras laterales, botones, desplegables, barras deslizables... todos deberías ser reflejados.

Tom Maslen explica como el equipo de la BBC usa Sass para ayudarlos con los maquetados bidireccionales:

Para el contenido, especifica la dirección del texto vía el atributo dir="rtl". Éste atributo es soportado por todos los navegadores principales. Aquí hay un ejemplo HTML:

O usa CSS:

LTR dentro de RTL

Un problema que encontramos en Tuts+ era incrustar fragmentos de código dentro del texto RTL (como en las traducciones al árabe, Farsi y Hebreo). El texto se lee RTL, pero el código inline debe quedar LTR. En éste ejemplo, el código inline siempre debe leer html, body { width: 100%; } :

Después del inglés original, puedes ver lo que ocurre con el código inline dentro del segundo ejemplo. El ejemplo 3 trata de remplazar eso al especificar:

pero, como puedes ver, está teniendo poco o ningún efecto. Aquí es donde entra la propiedad unicode-bidi. Asociado con el valor embed, ésto nos ayuda a remplazar la dirección estimada del navegador para elementos incrustados. El ejemplo 4 demuestra que ésto ha funcionado:

5. Estructura URL

Hay varias formas de estructurar las URLs de sitios web multilingües. Cada opción tiene ventajas y desventajas.

ccTLD

Un dominio de nivel superior geográfico (ccTLD) está vinculado a un país específico, como .fr para Francia y .es para España.

ccTLDs son una señal clara para motores de búsqueda de que un sitio web tiene como objetivo a usuarios en ese país. La ubicación del servidor es irrelevante y es fácil para separar sitios web. Las mayores desventajas son la capacidad de dominios y los costos extra.

Subdominio + gTLD

Ciertas extensiones de dominio no están ligados a un país o región. El más popular es .com, pero hay otros dominios genéricos de nivel superior usados frecuentemente, como .net y .org.

Éstos gTLDs pueden ser usados en combinación con un subdominio, por ejemplo fr.sitioweb.com. Es sencillo configurar y la mayoría de motores de búsqueda entienden éste tipo de objetivo goegráfico. Sin embargo, usuarios podrían no siempre reconocer el idioma del contenido basado en la URL.

Subdirectorio +gTLD

Subdirectorios son la contraparte de los subdominios. Son con frecuencia usados para estructurar contenido (por ejemplo sitioweb.com/blog o sitioweb.com/tshirts), pero también pueden ser usados para fines de objetivo geográfico. En éste caso usamos sitioweb.com/fr para estructurar nuestras URLs.

Con ésta técnica, todo puede ser alojado en el mismo servidor. La configuración es muy fácil y puedes usar Google Search Console para identificar los diferentes idiomas. Una desventaja es que usuarios podrían no reconocer el objetivo geográfico por solo la URL (por ejemplo ¿está webshop.com/de/ en Alemania o no?

Parámetros URL

Finalmente, ¿hay parámetros URL, por ejemplo website.com? Parámetros URL no se recomiendan, porque son dificiles de interpretar para los motores de búsqueda.

Personalmente, me gusta usar subdirectorios en combinación con un gTLD. Los subdominios son mayormente utilizados para separar contenido que es completamente diferente. Debido a que sitios web multilingües son básicamente traducciones del mismo contenido (la mayoría de las veces), subdirectorios son una solución obvia.

Puedes usar el idioma en el URL, por ejemplo:

  • sitioweb.com para la versión estándar de EUA.
  • sitioweb.com/uk/ para la versión de Reino Unido.
  • sitioweb.com/es/ para visitantes de habla hispana.

O combinar el idioma y la ubicación:

  • sitioweb.com/en-us/ para clientes de habla inglesa en los EUA.
  • sitioweb.com/en-uk/ para clientes de habla inglesa en el Reino Unido.
  • sitioweb.com/es-us/ para clientes de habla hispana en EUA.

Duplicar Contenido

Para evitar problemas de duplicar contenido, es mejor identificar una versión preferida para cada idioma/ubicación. Podemos usar un simple elemento de enlace HTML para ésto, llamado rel="alternate" hreflang="x". Múltiples etiquetas hreflang deben usarse en una página; una que referencia a si misma y un enlace a cada alternativa.

En una página web, ese código podría verse así:

Éste código dice a los motores de búsqueda que ejemplo.com es dirigido a personas que hablan inglés en el Reino Unido. También dice que hay dos variaciones del mismo contenido, una para  EU y una para Australia.

Otras Consideraciones

Cuando se diseñan sitios web multilingües, hay otras cosas para considerar, como:

Fechas

No todos los países utilizan el mismo formato de fecha. Por ejemplo a veces tendrás que convertir fechas del calendario Gregoriano al calendario Persa.

Aspectos Éticos

Países tienen diferentes puntos de vista éticos. Hay una naturaleza de sexualidad, humor, simbolismo, etc para una cultura específica, que es fácilmente pasada por alto cuando se traduce un sitio web. Por ejemplo: en ciertos países es perfectamente aceptable mostrar una foto de una pareja de homosexuales, mientras que otros países podrían encontrar ésto ofensivo.

Captchas

¿Estás usando una captcha en tu sitio web? Asegúrate que está en el mismo idioma que el contenido de la página. Como visitante de Reino Unido, es improbable que quieras resolver un captcha ruso.

Porque que no son ya lo suficientemente dificiles..

Números Telefónicos

Ayuda a tus visitantes con números telefónicos en tu sitio web al incluir el código del país. Puedes encontrar una lista de todos los códigos de países en ésta página.

¡Continúa y Traduce!

Hay muchas más consideraciones cuando se prepara un sitio web para su completa internacionalización, pero éstos indicadores deberían haber sentado una buena base desde la cual trabajar. ¡Déjanos saber en los comentarios que otros consejos tienes para el diseño multilingüe, y registrate en el boletín del Proyecto de Traducción de Tuts+ si estás interesado en saber que hacemos!

Más Lecturas

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.