Como hacer una página web multidioma

Cuando subimos una web  inevitablemente será visible por cualquier persona con acceso a Internet. Y esto puede ser un arma de doble filo porque no todos van a hablar en nuestro idioma, aunque deberían :D . ¿Qué podemos hacemos?:

  1. Ignorarlo:  Te justificas en que tu web esta orientada a un público más local: tu país, tu comunidad, tu barrio, tu escalera o tu casa. Lo cual es un error, porque no abrir fronteras hace que pierdas clientes y visitantes potenciales.
  2. Solucionarlo: Adaptarla para que el usuario pueda cambiar los textos a su idioma. Mejora la usabilidad y da un aspecto más profesional. Si tiene varios idiomas das a entender que trabajas con clientes de otros países, que puede ser verdad o no.

Si has elegido la primera opción ya puedes dejar de leer. ¡Gracias por visitar mi blog! Si prefieres trabajartelo un poco de comento que existen 2 vías de 'como hacer una página web multidioma'.

Solo con HTML

La estrategia reside en hacer la misma web varias veces pero cambiando los textos. Y después redireccionando a la correspondiente por el idioma que utilice nuestro visitante.

Por ejemplo, yo quiero hacer mi web en castellano y en esperanto. La maqueto y hago una copia en 2 carpetas diferentes; una la llamaré spain y a la otra esperanto. Ahora cambio los textos de cada una por el idioma que necesito. Además añado el atributo de idioma (lang) en la etiqueta html.

spain/index.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
</head>
<body>
	<h1>1001 usos para los peladores de fruta</h1>
	<p>A pesar de su apariencia sencilla, detrás reside grande...</p>
</body>
</html>

esperanto/index.html

<!DOCTYPE html>
<html lang="eo">
<head>
	<meta charset="utf-8">
</head>
<body>
	<h1>1001 uzas la frukton peelers</h1>
	<p>Malgraŭ ĝia simpla apero, malantaŭ grandaj mensogoj ...</p>
</body>
</html>

Ya solo nos quedaría poner en el menú unos enlaces para cambiar el idioma.

spain/index.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
</head>
<body>
	<a href="../spain/index.html">Español</a>
	<a href="../esperanto/index.html">Esperanto</a>

	<h1>1001 usos para los peladores de fruta</h1>
	<p>A pesar de su apariencia sencilla, detrás reside grande...</p>
</body>
</html>

esperanto/index.html

<!DOCTYPE html>
<html lang="eo">
<head>
	<meta charset="utf-8">
</head>
<body>
	<a href="../spain/index.html">Hispana</a>
	<a href="../esperanto/index.html">Esperanto</a>

	<h1>1001 uzas la frukton peelers</h1>
	<p>Malgraŭ ĝia simpla apero, malantaŭ grandaj mensogoj ...</p>
</body>
</html>

Con PHP o JS

Necesitarías guardar los textos en un JSON, por ejemplo aunque también podrías con XML, con el nombre textosSpain.json y textosEsperanto.json . La ventaja es que solo tendría un index.html. Después habría que cargar los textos dependiendo si se ha pulsado sobre un enlace u otro. No voy a explicar los pasos ya que doy por supuesto que una persona con conocimientos medios en estos lenguajes lo podría desarrollar. En todo caso ya haría más adelante un tutorial explicándolo para gente que se esta introduciendo.

Versión escritorio