Técnicas de internacionalización en documentos HTML o XHTML

He elaborado un resumen sobre cómo internacionalizar un sitio web. También podeis consultar la documentación original.

Tècnicas de internacionalización en documentos HTML o XHTML

¿Cuál es la finalidad de internacionalizar un documento??

Se trata de especificar el idioma en que están escritos la totalidad o la parcialidad de los elementos de una página web.

¿Por qué especificar el idioma de los documentos?

Los buscadores como Google luchan para mostrar los mejores resultados de una búsqueda según las preferencias del usuario, más después de la salida de competidores como MSN Search, A9 de Amazon

Una de las preferencias que puede identificar fácilmente cualquier buscador es la definición del idioma que tiene el usuario. Es lógico que cada vez tengan más importancia todos los parámetros que sirven para especificar el idioma para priorizar los resultados cuando, por ejemplo en google, busco “páginas en español” o “páginas de España”.

Para entender mejor la importancia de la definición de un idioma para documentos y elementos individuales, podemos poner como ejemplo los lectores de voz que existen actualmente y que en un futuro vendran integrados con los navegadores gracias a las especificaciones XML Voice i las propiedades de audio para CSS2. No se interpretará igual si decimos

“Fundado en 1793 por la República francesa, el musée du Louvre constituye uno de los primeros museos europeos. ”

que entonemos en francés “musée du Louvre” dentro del contexto en español. Quién sabe si dentro de unos meses podremos buscar páginas en español que contengan la palabra “Louvre” en francés…

¿Cómo especificar el idioma de los elementos de una página web?

Las etiquetas HTML y XHTML nos permiten especificar la codificación de los carácteres, el idioma, y localización geográfica de una página web, así como sus elementos individuales. Por ejemplo si tengo una página en español, puedo especificar que un enlace hará referencia a una página en catalan o que cito un texto en inglés dentro de un párrafo en alemán.

Trataremos los siguientes elementos tomando como ejemplo una web en español. Podeis consultar la documentación original para otros idiomas i tipos de documentos, por ejemplo XML.

Especificar la codificación de una página

Necesitaremos especificar la codificación de una página para que el navegador sea capaz de interpretar los carácteres especiales de cada idioma. En la codificación americana, por ejemplo, no caben los carácteres especiales como los acentos. Para una web en español utilizaremos la codificación iso-8859-1.

Para documentos HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Para documentos XHTML servidos como text/html:

< ?xml version="1.0" encoding="iso-8859-1"?>

Aunque existen diferentes nomenclaturas para definir una misma codificación o idioma, se recomienda siempre utilizar las estándares.

http://www.iana.org/assignments/character-sets

Nota: Se recomienda evitar utilizar equivalentes HTML o Hexadecimales de carácteres (como & o   ), delegando la función de que el navegador interprete bien el documento a la codificacion de la página. Si no se pueden evitar, es recomendable utilizar el equivalente hexadecimal.

Especificar los atributos de idioma de una página

Mediante el metatag Content-Language describiremos el idioma principal de una página, y mediante los atributos de idioma definiremos qué idioma deberá procesar el navegador.

De esta manera definiremos los idiomas principales de la siguiente forma:

<meta http-equiv="Content-Language" content="es,en,de,fr,it"/>

<html lang="es">

</html>

En el caso de que tengamos un documento con diferentes traducciones en la misma página (por ejemplo un manual de la impresora), podemos utilizar:

<meta http-equiv="Content-Language" content="es,en,de,fr,it"/>

<html lang="es">

texto en español

<div lang=”en”>

texto en inglés

</div>

<div lang=”de”>

texto en alemán

</div>

...

</html>

Podemos utilizar el mismo sistema para especificar un cambio de idioma para ciertos elementos, por ejemplo:

<p>En francés, <em>Gato</em> es <em lang="fr">chat</em>.</p>

Tendremos en consideración las siguientes implementaciones, según el tipo de documento que estemos ofreciendo:

Para documentos HTML:

<html lang="es">

Para documentos XHTML servidos como text/html:

<html lang="es" xml:lang="es" >

Para documentos XHTML servidos como XML:
<html xml:lang="es" >

Para más atributos de lenguaje consultar:

http://www.loc.gov/standards/iso639-2/langcodes.html

Especificar el idioma de un enlace

Si deseamos especificar el idioma que encontraremos en un enlace, podemos utilizar la siguiente sintaxis:

<p>Puedes encontrar la traducción al catalán de esta página en <a href="catalan-doc.html" hreflang="ca">instruccions per a la rentadora</a>.</p>

4 comments ↓

#1 Galu on 01.26.05 at 01:38

Os añado el comentario de Adrià Garcia

A parte de las ventajas que se comentan en el mail añdiría las ventajas de trabajar semánticamente bien y todo lo que supone (y supondrá) hacerlo así.

La siguiente regla especifica el tipo de comillas que se usará en un elemento dependiendo del lenguaje usado, interesante:

q:lang(en) {
quotes: "-" "-";
}

q:lang(es) {
quotes: "«" "»";
}

q:lang(cat) {
quotes: "*" "*";
}

<div>
<p><q lang="cat">Català</q></p>
<p><q lang="es">Español</q></p>
<p><q lang="en">English</q></p>
</div></q>

#2 Betu on 10.22.07 at 13:54

Gracias por la info,
Te cuento que quiero hacer un sitio que se pueda visualizar en 2 idiomas sin “repetir” el codigo.
No me doy cuenta como utilizar la info que posteaste, podría ayudarme en algo ??

#3 Galu on 10.23.07 at 08:13

Hola Betu, en este post explico cómo definir el idioma de todo un documento o una parte de un documento de forma semántica.

Si lo que deseas es cómo visualizar dos idiomas sin repetir código, te animo a que te leas la documentación del gettext.

gettext te permite poner distintos idiomas a partir de un sólo código. Funciona con catálogos de traducción, de este modo cada idioma se encuentra en un fichero distinto, con extension .mo, editable con programas como poedit.

Un ejemplo de implementación en PHP podría ser:

<p><?_("Hola!");?></p></code>

Nota: la función _() es la abreviación de gettext en PHP, y funciona como un echo.

Esto nos mostraría un Hola! a la pantalla. Si tenemos un catálogo de traducción en inglés y hemos especificado que Hola! = Hello! , nos aparecerá Hello! en la pantalla.

Te lo he explicado un poco por encima y faltan todas las funciones de configuración (setLocale, etc...). Si te interesa el tema te recomiento este enlace a la documentación de PHP:

Implementación de gettext en PHP

#4 www.guru.cat on 08.16.08 at 12:52

Interessant!

Leave a Comment