ProInf.net

5 Mostrar una web según el idioma del navegador

Francisco 15-05-13
Internationalization

Se detallan dos puntos: (1) Cómo estructurar una web estática para que esté en varios idiomas; y (2) cómo mostrar por defecto la web en el idioma del visitante: catalán, español, inglés, etc.

Seleccionar el idioma preferido en el navegador web

Hay sitios web que se pueden mostrar en varios idiomas. Puedes indicar a tu navegador web el orden de idiomas en que prefieres ver una web. De esta forma un sitio web se mostrará en el primer idioma preferido que tenga disponible

  • En Firefox

    Preferencias de Firefox > Contenidos > Idiomas Seleccionar
    Diálogo de selección del idioma prefererido en Firefox

  • En Chromium o Chrome

    Configuración > Mostrar opciones avanzadas > Configuración de idioma y de…
    Diálogo de selección del idioma prefererido en Chromium

Demostración

En la web de 3 idiomas sale por defecto en catalán, español o inglés según sea el idioma preferido que tengas configurado en tu navegador web.

Estructura de la web de 3 idiomas

Carpetas y archivos

raíz
│
├──index.php
│
├──styles.css
│
├──ca
│  │
│  └─index.html
│
├──es
│  │
│  └─index.html
│
└──en
   │
   └─index.html

El fichero index.php es la página de inicio de la web. Este fichero PHP salta a una de las páginas index.html que hay en las subcarpetas ca, es o en según sea el idioma del navegador que haya detectado

Código PHP de la página de inicio

index.php

<?php
header("Location: " . getLanguage());

function getLanguage(){
$availableLanguages = array('ca', 'es', 'en');
$defaultLanguage = 'en';
$token = strtok($_SERVER['HTTP_ACCEPT_LANGUAGE'], ",;");
while ($token !== false) {
$language = substr($token, 0, 2);
if (in_array($language, $availableLanguages)) {
return $language;
}
$token = strtok(",;");
}
return $defaultLanguage;
}
?>

Modo de empleo

  1. Para cada idioma en que esté tu web crea una subcarpeta con el código del idioma
  2. Indicar estos idiomas en la variable $availableLanguages
  3. Indicar en la variable $defaultLanguage el idioma predeterminado de tu web

Obtener el código de idioma del navegador

Puedes ver el valor de la variable $_SERVER['HTTP_ACCEPT_LANGUAGE'] que refleja los idiomas preferidos que actualmente tienes configurado en tu navegador web

Algunos ejemplos de cadenas de idiomas preferidos que puede suministrar el navegador web:

NavegadorPrincipalResultadoOrden
FirefoxCatalàca,es-es;q=0.8,es;q=0.6,en-us;q=0.4,en;q=0.2ca es en
FirefoxEspañoles-es,es;q=0.8,ca;q=0.6,en-us;q=0.4,en;q=0.2es ca en
FirefoxEnglishen,en-us;q=0.8,ca;q=0.6,es-es;q=0.4,es;q=0.2en ca es
ChromeCatalàca,es;q=0.8,en;q=0.6,en-US;q=0.4ca es en
ChromeEspañoles,ca;q=0.8,en;q=0.6,en-US;q=0.4es ca en
ChromeEnglishen-US,en;q=0.8,ca;q=0.6,es;q=0.4en ca es

Valor de idioma obtenido mediante JavaScript:

NavegadorCódigoResultado
FF/Chromewindow.navigator.language
IEwindow.navigator.userLanguage
FF/Chrome/IEnavigator.userLanguage || navigator.language
Compartir



Un comentario:

1 → Francisco dice hace 3 años:

Faltaría recordar la selección del idioma que haga el usuario. Esto se podría hacer con una COOKIE. Si existe la COOKIE tomar el idioma de la COOKIE, y sino existe tomar el idioma preferido del navegador web.

Añade tu comentario:

(El correo no será publicado)
 
Ir arriba