Domingo, 11 de septiembre de 2011
Te estás expandiendo a otros países y necesitas que tu sitio se adapte a estos cambios. Debería ser un caso sencillo de traducción del texto y listo, ¿no? Probablemente no. Con frecuencia, el equipo de Google Webmaster crea sitios que se localizan a más de 40 idiomas. Por eso, aquí presentamos algunos aspectos que tenemos en cuenta cuando lanzamos nuestras páginas en otros idiomas y regiones.
(Aunque pienses que puedes ser inmune a estos problemas porque solo ofreces contenido en inglés, es posible que los visitantes que no hablan este idioma usen herramientas como Google Traductor para ver tu contenido en su idioma. Este tráfico debería mostrarse en el panel de control de Analytics para que puedas tener una idea de cuántos visitantes no ven tu sitio de la manera prevista)
Más idiomas implican más plantillas HTML
No podemos dejar de enfatizar lo siguiente: reutiliza la misma plantilla para todas las versiones de la página en cada idioma y siempre intenta que el HTML de tu plantilla sea simple.
El hecho de que el código HTML sea igual para todos los idiomas tiene sus ventajas en términos de mantenimiento. El hackeo con el código HTML de cada idioma para corregir errores no se ajusta. Mantén el código de la página tan limpio como sea posible y soluciona cualquier problema de estilo en el CSS. Este es solo uno de los beneficios del código limpio: la mayoría de las herramientas de traducción analizarán las strings de contenido traducible del documento HTML. Ese trabajo se facilita mucho cuando el HTML está bien estructurado y es válido.
¿Qué tan larga es una string?
Si tu diseño se basa en que el texto se ajuste bien a elementos de tamaño fijo, entonces la traducción de tu texto podría causar estragos. Por ejemplo, es probable que el texto de navegación de la parte izquierda se traduzca en strings de texto mucho más largas en varios idiomas. Consulta la diferencia en las longitudes de string entre algunos idiomas de navegación, como inglés y holandés, para el mismo contenido. Prepárate para los títulos de navegación que podrían incluirse en más de una línea y calcula la altura de la línea para que se adapte a esto (también vale la pena tenerlo en cuenta cuando crees el texto de navegación en inglés).
Las longitudes de palabras variables generan problemas específicos en las etiquetas y los controles de los formularios. Si el diseño del formulario muestra etiquetas a la izquierda y campos a la derecha, por ejemplo, las strings de texto más largas pueden extenderse hasta dos líneas, mientras que las strings de texto más cortas no parecen asociadas con los campos de entrada del formulario. Ambos escenarios arruinan el diseño y, como resultado, no se podrá leer el formulario correctamente. Ten en cuenta también el estilo adicional que necesitarás para los diseños de derecha a izquierda (RTL), que detallaremos más adelante. Por estos motivos, diseñamos formularios con etiquetas sobre campos para facilitar la legibilidad y el estilo que podrá traducirse sin problemas en todos los idiomas.
También evita las columnas de altura fija: si estás intentando ordenar tu diseño con fondos de cuadros que coincidan con la altura, es probable que cuando se traduzca el texto, se excedan las áreas, ya que solo eran lo suficientemente altas para incluir el contenido en inglés. Piensa si los elementos de la IU que planeas usar en tu diseño funcionarán cuando haya más o menos texto, por ejemplo, pestañas horizontales o verticales.
Del otro lado
La edición de código fuente para HTML bidireccional puede ser problemática porque muchos editores no se compilaron para admitir el algoritmo bidireccional de Unicode (más investigación sobre los problemas y las soluciones). En resumen, la forma en que se muestra tu lenguaje de marcado se puede volver ilegible:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Nuestro propio uso diario demostró que los siguientes editores ofrecen soluciones decentes para la edición bidireccional, en particular, Coda, Dreamweaver, IntelliJ IDEA y JEditX.
Cuando diseñas para idiomas RTL, puedes compilar la mayor parte de la compatibilidad que necesitas en el CSS principal y usar el atributo direccional del elemento html (para la retrocompatibilidad) junto con una clase en el elemento body. Como siempre, tener todos los estilos en una sola hoja de estilo facilita el mantenimiento.
Estos son algunos problemas clave sobre el estilo que se deben tener en cuenta: los elementos que flotan a la derecha deberán flotar a la izquierda, y viceversa. Se deben anular y cambiar los anchos de margen o padding adicionales aplicados a un lado de un elemento, y se deben revertir los atributos de alineación de texto.
Por lo general, seguimos este enfoque que incluye el uso de una clase en la etiqueta del cuerpo, en lugar de un selector de CSS html[dir=rtl], ya que 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>
Estilos 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;
}
Estilo de derecha a izquierda:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(Observa esto en acción en inglés y árabe).
Para finalizar, ten en cuenta que la mayoría de las veces, el contenido destinado a páginas de idiomas de derecha a izquierda será bidireccional y no únicamente RTL, ya que es posible que algunas strings deban conservar su dirección de izquierda a derecha, por ejemplo, los nombres de las empresas en alfabeto latino o números de teléfono. Para asegurarte de que el navegador lo procese de manera correcta en un documento principalmente RTL, debes unir las strings de texto incorporadas con un elemento intercalado mediante un atributo para establecer la dirección de la siguiente manera:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
En los casos en que no tengas un contenedor HTML para conectar el atributo dir, como elementos de título o código fuente generado por JavaScript para mensajes de avisos, puedes usar este equivalente a fin de establecer la dirección en la que ‫ y ‬ son caracteres de control Unicode para incorporación 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 de W3C sobre cómo crear código HTML para el árabe, el hebreo y otros alfabetos de derecha a izquierda, y cómo crear secuencias de comandos de derecha a izquierda).
Para mí, todo es griego…
Si nunca antes trabajaste con grupos de caracteres no latinos (cirílico, griego y un sinnúmero de idiomas índicos y asiáticos), es posible que descubras que el editor y el navegador no muestran contenido de la forma prevista.
Verifica que las codificaciones de tu editor y el navegador estén configuradas en UTF-8 (recomendado) y considera agregar un elemento <span> y el atributo lang del elemento html a tu plantilla HTML. Los navegadores sabrán qué esperar cuando procesen tu página; esto tiene el beneficio adicional de garantizar que todos los caracteres Unicode se muestren correctamente, por lo que no será necesario usar entidades HTML como é (é) para ahorrar bytes valiosos. Si tienes problemas, revisa el instructivo del código de W3C sobre la codificación de caracteres, que contiene explicaciones detalladas de los problemas.
Información sobre la asignación de nombres
Por último, una sugerencia práctica sobre las convenciones de nombres cuando se crean varias versiones en distintos idiomas. Usar un estándar, como los códigos de idioma ISO 639-1 para asignar nombres, ayuda cuando comienzas a trabajar con varias versiones en distintos idiomas del mismo documento.
El uso de un estándar convencional ayudará a los usuarios a comprender la estructura de tu sitio y permitirá que sea más fácil de mantener para todos los webmasters que podrían desarrollar el sitio. Además, el empleo de los códigos de idioma para otros elementos del sitio, como imágenes de logotipo y documentos PDF, es útil para poder identificar rápidamente los archivos.
Consulta las publicaciones anteriores de la Central para webmasters a fin de obtener asesoramiento sobre las estructuras de URL y otros problemas relacionados con el trabajo con sitios web multirregionales y el trabajo con sitios web multilingües.
Este es un resumen de los principales desafíos que enfrentamos a diario. Sin embargo, podemos garantizar que el hecho de planificar y trabajar directamente hacia un código HTML bien estructurado y un CSS sólido genera beneficios durante la localización.