Domingo, 11 de septiembre del 2011
Si quieres tener presencia global, es importante que tu sitio web esté preparado para ello. En principio, es normal que pienses que lo único que hay que hacer es traducir el contenido. Probablemente no baste con eso. Por lo general, los sitios que desarrolla el equipo de webmasters de Google se localizan a más de 40 idiomas, por lo que tenemos en cuenta una serie de factores a la hora de lanzar páginas en otros idiomas y en otras regiones.
Aunque creas que estos factores no tienen importancia en tu caso porque solo ofreces contenido en inglés, es posible que usuarios que no hablen inglés accedan a tu sitio y utilicen herramientas como el Traductor de Google para ver el contenido en su idioma. Puedes consultar este tráfico en el panel de control de Google Analytics para que te hagas una idea del número de usuarios que no visualizan tu sitio tal como está diseñado.
Una única plantilla HTML para todos los idiomas
Te recomendamos encarecidamente que utilices la misma plantilla en todas las versiones de la página y que intentes que el código HTML de la plantilla sea siempre sencillo.
El uso de un mismo código HTML para todos los idiomas resulta útil en lo que respecta al mantenimiento. Modificar el código HTML de cada idioma para solucionar errores es una tarea bastante compleja. Debes procurar que el código sea lo más sencillo posible y debes solucionar las incidencias de estilo en la hoja CSS. Entre otras ventajas, un código sencillo, es decir, un código HTML válido que esté bien estructurado, facilita el análisis de los documentos HTML de las herramientas de traducción para detectar las cadenas de contenido que se pueden traducir.
¿Qué longitud deben tener las cadenas?
Es posible que no se haga una buena traducción si tu sitio está diseñado de forma que el texto se lea junto con elementos de tamaño fijo. Por ejemplo, al traducir el texto de navegación situado a la izquierda de la pantalla a determinados idiomas, se obtendrán cadenas de texto mucho más largas (por ejemplo, puedes ver cómo cambia la longitud del mismo contenido en las versiones en inglés y en neerlandés). Debes tener en cuenta que es posible que haya que ajustar y dividir los títulos de navegación en varias líneas y calcular la altura de línea que se necesitaría para ello (también debes tener esto en cuenta al crear el texto de navegación original en inglés).
Pueden producirse incidencias en los controles y en las etiquetas de formularios debido a la variabilidad de la longitud de las palabras. Por ejemplo, si el formulario incluye etiquetas en el lado izquierdo y campos en el lado derecho, es posible que algunas cadenas de texto más largas ocupen dos líneas o que las cadenas de texto que sean más cortas no se asocien con los campos de entrada del formulario. En ambos casos, el diseño se vería perjudicado y se dificultaría la lectura del formulario. Además, debes tener en cuenta que tu diseño también debe permitir que se muestre texto de derecha a izquierda (más información más adelante). Por estos motivos, si se diseñan los formularios de forma que las etiquetas se sitúen sobre los campos, el contenido será más fácil de leer y el estilo no se perderá al cambiar de idioma.
Intenta evitar también utilizar columnas de ancho fijo, ya que si las creas para que coincidan con el tamaño de una casilla y para que tu diseño sea más uniforme, es posible que el texto traducido se salga de la casilla. Plantéate si los elementos de la interfaz de usuario que quieres usar en tu diseño funcionarán cuando haya más o menos texto (por ejemplo, en pestañas en horizontal o vertical).
Direccionalidad de la escritura
La edición de código fuente HTML bidireccional puede ser problemática, ya que muchos editores no son compatibles con el algoritmo bidireccional Unicode (consulta más información sobre los problemas y las soluciones). En resumidas cuentas, puede aparecer un marcado ilegible:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
En nuestra experiencia diaria hemos observado que los editores que proporcionan soluciones adecuadas para la edición bidireccional son Dreamweaver, IntelliJ IDEA, JEditX y, sobre todo, Coda.
Al crear diseños para idiomas que se leen de derecha a izquierda, puedes integrar la mayor parte de los elementos compatibles con Unicode que necesitas en el CSS principal y utilizar el atributo de dirección del elemento html (para asegurar la retrocompatibilidad) junto con una clase en el elemento body. El mantenimiento se hará mejor si se mantienen todos los estilos en una hoja de estilo principal.
Debes tener en cuenta una serie de cuestiones claves relacionadas con el estilo: los elementos flotantes situados a la derecha se deben poder situar a la izquierda y viceversa; se deben sobrescribir y cambiar los márgenes y los rellenos adicionales situados junto a los elementos y se debe invertir el orden de los atributos text-align.
Por lo general, utilizamos este diseño, en el que asignamos una clase a la etiqueta "body" en lugar de un selector de CSS html[dir=rtl], ya que esta es compatible con navegadores anteriores:
Elementos:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Diseño de izquierda a derecha (predeterminado):
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Diseño de derecha a izquierda:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
Consulta un ejemplo en inglés y en árabe.
Por último, la mayoría de las veces el contenido de páginas de idiomas que se muestran de derecha a izquierda debe ser bidireccional y no orientarse únicamente de derecha a izquierda, ya que algunas cadenas deben mantener la dirección de izquierda a derecha para mostrar nombres de empresas en alfabeto latino o números de teléfono. Para asegurarte de que el navegador procese esto correctamente en los documentos con escritura de derecha a izquierda, las cadenas de texto insertadas se deben ajustar a los elementos en línea mediante un atributo que defina la dirección, como el que se indica a continuación:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
En los casos en los que no tengas un contenedor HTML en el que puedas introducir el atributo "dir" (por ejemplo, los elementos de título o el código fuente generado con JavaScript en los mensajes emergentes), puedes utilizar este equivalente para definir la dirección (‫ y ‬ son caracteres de control Unicode para insertar texto de derecha a izquierda).
<title>‫הפוך את Google לדף הבית שלך‬</title>
Ejemplo de uso en código JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
Para obtener más información, consulta los artículos del W3C sobre cómo crear código HTML para árabe, hebreo y otros idiomas con escrituras de derecha a izquierda y secuencias de derecha a izquierda.
Me suena a chino...
Si no estás familiarizado con caracteres de un alfabeto distinto al latino (por ejemplo, cirílico, griego y una gran variedad de idiomas asiáticos e indoarios), es posible que ni el editor ni el navegador muestren el contenido como esperabas.
Asegúrate de que la codificación del editor y del navegador sea UTF-8 (recomendada) y prueba a añadir un elemento <span> y el atributo lang del elemento html a tu plantilla HTML para indicar a los navegadores cómo deberían mostrar la página. Este procedimiento tiene una ventaja añadida, ya que asegura que los caracteres Unicode se muestren correctamente sin tener que utilizar otras entidades HTML, como é (é), lo que supone un ahorro considerable de bytes. Si se produce alguna incidencia, consulta las explicaciones detalladas sobre las incidencias que se puedan producir en el tutorial del W3C sobre la codificación de caracteres.
Nota sobre la nomenclatura
Por último, nos gustaría darte un consejo relacionado con la nomenclatura que debes usar cuando crees páginas en distintos idiomas. Los estándares como los códigos de idiomas según la norma ISO 639-1, pueden serte útiles al crear versiones en varios idiomas del mismo documento.
Si utilizas convenciones estándar, a los usuarios les será más fácil entender la estructura de tu sitio y los webmasters que trabajen en su desarrollo podrán hacer un mejor mantenimiento; además, los códigos de idiomas y otros elementos del sitio (por ejemplo, imágenes de logotipos y documentos PDF) pueden ser útiles para identificar los archivos rápidamente.
Puedes consultar entradas anteriores del Centro para webmasters para obtener sugerencias sobre las estructuras de las URLs y sobre otras incidencias relacionadas con el uso de sitios web para varias regiones y sitios web multilingües.
Esto es un resumen de los principales desafíos a los que nos enfrentamos a diario; sin embargo, damos fe de que la planificación y el desarrollo de código HTML bien estructurado y de hojas CSS sólidas aporta beneficios a la hora de localizar el contenido.