Îñţérñåţîöñåļîžåţîöñ

Sunday, September 11, 2011

Así que vas a expandirte a nivel global y necesitas que tu sitio web te acompañe. Debería ser un simple caso de traducir el texto y listo, ¿verdad? Probablemente no. El equipo de Google Webmaster

(Incluso si crees que eres inmune a estos problemas porque solo ofreces contenido en
inglés, es posible que los visitantes de otros idiomas esténutilizando herramientas como Google Translate para ver tu contenido en su idioma

. Este tráfico debería aparecer en tu panel de analíticas, para que puedas hacerte una idea de cuántos visitantes no están viendo tu sitio de la forma en que fue concebido).

Más idiomas != más plantillas HTML

No nos cansaremos de recomendarlo: reutiliza la misma plantilla para todas las versiones de idioma y procura siempre mantener el HTML de tu plantilla simple.

Mantener el código HTML igual para todos los idiomas tiene sus ventajas a la hora del mantenimiento. Modificar chapuceramente el código HTML para cada idioma con el fin de corregir errores no es escalable; mantén el código de tu página lo más limpio posible y resuelve cualquier problema de estilo en el CSS. Por mencionar solo una ventaja del código limpio: la mayoría de las herramientas de traducción analizarán y extraerán las cadenas de contenido traducible del documento HTML, y esa tarea se facilita enormemente cuando el HTML está bien estructurado y es válido.

¿Qué tan largo es un trozo de cuerda? Si tu diseño depende de que el texto encaje perfectamente con elementos de tamaño fijo, entonces traducir tu texto podría causar estragos. Por ejemplo, es probable que el texto de tu navegación lateral se traduzca en cadenas de texto mucho más largas en varios idiomas; echa un vistazo a la diferencia en la longitud de las cadenas entre parte de la navegación en
inglés
y en holandés

para el mismo contenido. Prepárate para títulos de navegación que puedan ocupar más de una línea calculando la altura de línea adecuada para dar cabida a esto (algo que también vale la pena considerar al crear tu texto de navegación en inglés desde un principio).

Las longitudes de las palabras variables causan problemas particulares en las etiquetas y controles de formularios. Si el diseño de tu formulario muestra etiquetas a la izquierda y campos a la derecha, por ejemplo, las cadenas de texto más largas pueden desbordarse en dos líneas, mientras que las cadenas de texto más cortas pueden no parecer asociadas a sus campos de entrada; ambos escenarios arruinan el diseño y dificultan la legibilidad del formulario. Considera también el estilo adicional que necesitarás para los diseños de derecha a izquierda (RTL) (más sobre esto más adelante). Por estas razones, diseñamos formularios con las etiquetas encima de los campos, para lograr una fácil legibilidad y un estilo que se adapte bien a diferentes idiomas.
Evita también las columnas de altura fija; si intentas ordenar tu diseño con fondos de caja que coincidan en altura, es probable que al traducir tu texto, este desborde las áreas que solo eran lo suficientemente altas como para contener tu contenido en inglés. Piensa si los elementos de la interfaz de usuario que planeas usar en tu diseño funcionarán cuando haya más o menos texto, por ejemplo, pestañas horizontales
frente a verticales

.

Por otro ladoLa edición de código fuente para HTML bidireccional puede ser problemática porque muchos editores no se han creado para admitir el algoritmo bidireccional de Unicode(

más investigaciones sobre los problemas y soluciones

). En resumen, la forma en que se muestra tu marcado puede corromperse: Nuestro propio uso diario ha demostrado que los siguientes editores proporcionan actualmente soluciones adecuadas para la edición bidireccional: en particular Coda, y también Dreamweaver, IntelliJ IDEA y JEditX. Al diseñar para idiomas RTL, puedes integrar gran parte del soporte que necesitas en el CSS principal y utilizar el atributo de dirección del elemento html (para compatibilidad con versiones anteriores) en combinación con una clase en el elemento

body

. Como siempre, mantener todos los estilos en una sola hoja de estilos principal facilita el mantenimiento.
Algunos problemas clave de estilo a tener en cuenta: cualquier elemento flotado a la derecha deberá flotarse a la izquierda y viceversa; los rellenos o márgenes adicionales aplicados a un lado de un elemento deberán ser anulados e invertidos, y cualquier atributo text-align debe invertirse. Generalmente utilizamos el siguiente enfoque, que incluye el uso de una clase en la etiqueta body en lugar de un selector CSS html[dir=rtl] porque es compatible con navegadores más antiguos:

Elementos:

Estilo de izquierda a derecha (predeterminado):

Estilo de derecha a izquierda:

(Ve esto en acción en
inglés y
árabe.)

Una última nota sobre este tema: la mayor parte del tiempo, tu contenido destinado a páginas en idiomas de derecha a izquierda será bidireccional en lugar de puramente RTL, porque es probable que algunas cadenas necesiten conservar su dirección LTR, por ejemplo, nombres de empresas en alfabeto latino o números de teléfono. La forma de asegurarse de que el navegador maneje esto correctamente en un documento principalmente RTL es envolver las cadenas de texto incrustadas con un elemento en línea que use un atributo para establecer la dirección, así:

En los casos en los que no tengas un contenedor HTML para enganchar el atributo dir, como elementos de título o código fuente generado por JavaScript para mensajes emergentes, puedes usar este equivalente para establecer la dirección donde ‫ y ‬‬ son caracteres de control Unicode para la incrustación de derecha a izquierda:

Ejemplo de uso en código JavaScript:

(Para más detalles, consulta los artículos del W3C sobre
la creación de HTML para árabe, hebreo y otras escrituras de derecha a izquierda
y
la creación de escrituras de derecha a izquierda.)

Me suena a chino…

Si nunca antes has trabajado con conjuntos de caracteres no latinos (cirílico, griego y una miríada de asiáticos e índicos), es posible que descubras que tanto tu editor como tu navegador no muestran el contenido como se pretende.

Comprueba que la codificación de tu editor y navegador esté configurada en UTF-8 (recomendado) y considera añadir un elemento
<span> y el atributo lang del elemento html
a tu plantilla HTML para que los navegadores sepan qué esperar al renderizar tu página; esto tiene el beneficio añadido de garantizar que todos los caracteres Unicode se muestren correctamente, por lo que el uso de entidades HTML como é (é) no será necesario, ¡ahorrando valiosos bytes! Consulta
el tutorial del W3C sobre codificación de caracteres
si tienes problemas; contiene explicaciones detalladas de los problemas.

Una palabra sobre la nomenclatura

Por último, un consejo práctico sobre las convenciones de nomenclatura al crear varias versiones de idioma. El uso de un estándar como los
códigos de idioma ISO 639-1
para nombrar ayuda cuando empiezas a lidiar con varias versiones de idioma del mismo documento.

Utilizar un estándar convencional ayudará a los usuarios a entender la estructura de tu sitio, además de hacerlo más fácil de mantener para cualquier webmaster que pueda desarrollar el sitio, y usar los códigos de idioma para otros recursos del sitio (imágenes de logotipos, documentos PDF) es útil para identificar rápidamente los archivos.

Consulta las publicaciones anteriores de Webmaster Central para obtener consejos sobre estructuras de URL y otros temas relacionados con
el trabajo con sitios web multirregionales
y
el trabajo con sitios web multilingües.

Ese es un resumen de los principales desafíos con los que lidiamos a diario; pero podemos dar fe de que planificar y trabajar de antemano para lograr un HTML bien estructurado y un CSS robusto da sus frutos durante la localización.

Publicado por
Kathryn Cullen, equipo de Google Webmaster