Foros del Web » Programando para Internet » PHP »

[SOLUCIONADO] Web multilenguaje con combobox

Estas en el tema de Web multilenguaje con combobox en el foro de PHP en Foros del Web. Hola a todos!! Estoy desarrollando una web, bastante simple. Puro html y css. El tema es que me pidieron que sea multilenguaje (Inglés, Español, Italiano ...
  #1 (permalink)  
Antiguo 04/03/2016, 04:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Web multilenguaje con combobox

Hola a todos!!

Estoy desarrollando una web, bastante simple. Puro html y css.

El tema es que me pidieron que sea multilenguaje (Inglés, Español, Italiano y Francés).

Estuve viendo varios artículos de como se hace un sitio multilenguaje y decidí organizar por carpetas/directorios. Es decir, hacer una web por cada lenguaje con la siguiente estructura:

www.misitio.com/en/index.html
www.misitio.com/es/index.html
www.misitio.com/it/index.html
www.misitio.com/fr/index.html

La web por defecto va a ser la de inglés.

En el <header> coloqué un combo de selección, el cual tiene cuatro items, uno por cada idioma.

La web se compone de 5 páginas bien básicas: Home, Empresa, Productos, Proyectos, Contacto.

La pregunta es: Cómo hago para que cuando el usuario se encuentra en la home (supongamos que la de inglés) y selecciona desde el combo otro idioma "equis", lo lleve a la Home de ese idioma. Y lo mismo ocurra con cualquiera de las demás páginas?

La verdad no se cómo ni por dónde comenzar ya que de php, prácticamente no tengo nociones.

Desde ya agradezco la ayuda que puedan darme..

Saludos
  #2 (permalink)  
Antiguo 04/03/2016, 07:38
 
Fecha de Ingreso: abril-2015
Ubicación: Bogotá D.C - Colombia
Mensajes: 106
Antigüedad: 4 años, 6 meses
Puntos: 11
Respuesta: Web multilenguaje con combobox

Hola amigo, en realidad para esto como tu mismo lo haz dicho "tan simple", no necesitas php u otro lenguaje de programación, como veo que estás usando solo html y css no te compliques la vida y hazlo con un simple código de JavaScript...

A continuación te dejo un ejemplo completo en un HTML:
Código HTML:
Ver original
  1.     <head>
  2.         <meta charset="utf-8">
  3.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.         <meta name="viewport" content="width=device-width, initial-scale=1">
  5.         <title>
  6.             Ejemplo página web, multilenguaje
  7.         </title>
  8.  
  9.     </head>
  10.  
  11.     <body>
  12.  
  13.         <select id="combox_idioma">
  14.             <option value="es">Español</option>
  15.             <option value="en">Ingles</option>
  16.             <option value="it">Italiano</option>
  17.             <option value="fr">Frances</option>
  18.         </select>
  19.  
  20.  
  21.         <script type="text/javascript">
  22.         //Básicamente le decimos al DOM que cuando se haya cargado ejecute una función.
  23.         //En este caso la función ejecutará los eventos para el selector de idioma.
  24.             document.addEventListener("DOMContentLoaded", function(event) {
  25.                 document.getElementById('combox_idioma').addEventListener('change', function() {
  26.                     //Suponiendo que la página en ingles está en el directorio /en
  27.                     //me devuelvo una carpeta a la carpeta raíz con ("../") y le digo
  28.                     //que se vaya a la carpeta que ha sido seleccionada en el combox_idioma.
  29.                     //NOTA: Recordar que los value del selector deben tener el nombre de la
  30.                     //carpeta del idioma.
  31.                     location.href = "../" + this.value + "/index.html";
  32.                     //No es necesario poner el index.html
  33.             //Pues como está en una carpeta, será el primer archivo leido, por tanto ya es cosa de
  34.             //gutos, en lo personal no me gusta poner el index.html. ;), así que si deseas eliminarlo
  35.             //No va a afectar en nada. :3
  36.                     //Si te complico la vida con esto, puedes poner en el value de cada option
  37.                     //del selector la url, de esta manera solo tendrías que descomentar la siguiente
  38.                     //linea y comentar o eliminar la anterior.
  39.                     //location.href = this.value;
  40.                 });
  41.             });
  42.         </script>
  43.     </body>
  44. </html>


Si corres el código anterior en un archivo html, verás que consigo lo que deseas, a continuación para tener una mejor vista del código JavaScript te lo dejo a continuación, básicamente tendrás que cambiar "combox_idioma" por el id del selector de idioma que ya tienes, y tener en cuenta lo que te escribí en los comentarios del mismo código

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     //Básicamente le decimos al DOM que cuando se haya cargado ejecute una función.
  3.     //En este caso la función ejecutará los eventos para el selector de idioma.
  4.     document.addEventListener("DOMContentLoaded", function(event) {
  5.         document.getElementById('combox_idioma').addEventListener('change', function() {
  6.             //Suponiendo que la página en ingles está en el directorio /en
  7.             //me devuelvo una carpeta a la carpeta raíz con ("../") y le digo
  8.             //que se vaya a la carpeta que ha sido seleccionada en el combox_idioma.
  9.             //NOTA: Recordar que los value del selector deben tener el nombre de la
  10.             //carpeta del idioma.
  11.             location.href = "../" + this.value + "/index.html";
  12.             //No es necesario poner el index.html
  13.             //Pues como está en una carpeta, será el primer archivo leido, por tanto ya es cosa de
  14.             //gutos, en lo personal no me gusta poner el index.html. ;), así que si deseas eliminarlo
  15.             //No va a afectar en nada. :3
  16.             //Si te complico la vida con esto, puedes poner en el value de cada option
  17.             //del selector la url completa del sitio en sus respectivas versiones, de
  18.             //esta manera solo tendrías que descomentar la siguiente
  19.             //linea y comentar o eliminar la anterior.
  20.             //location.href = this.value;
  21.         });
  22.     });
  23. </script>


Cualquier duda, no olvides preguntar

Última edición por jhonjaider1000; 04/03/2016 a las 07:46
  #3 (permalink)  
Antiguo 04/03/2016, 08:16
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Web multilenguaje con combobox

Hola Jhon!! Antes que nada muchas gracias por tomarte la molestia en ayudarme.

Inserté tu código Javascript en mi html y le cambié el id al Select. Funciona perfecto. Pero siempre me lleva al index.html del idioma seleccionado.

Por ejemplo, si yo estoy en la página es/contacto.html y selecciono en el combo el idioma Italiano, me lleva a it/index.html. Yo lo que necesitaría es que me lleve a it/contacto.html. Y lo mismo con el resto de las páginas.

Es muy complicado hacer esto?



Agrego: estaba revisando el código.

Veo que esta linea de código es la que genera la url completa al index.html del idioma seleccionado.

Código Javascript:
Ver original
  1. location.href = "../" + this.value + "/index.html";


Estaba pensando, y te consulto, si no hay alguna función de Javascript que al cargar el página almacene en una variable el nombre del documento en cuestión (ej empresa.html). Y esa variable, reemplazarla por el "index.html", en la línea de código que cito mas arriba. Creo que de esta manera se conformaría la url completa y de esta manera se logra lo que necesito.

Es posible hacer esto?

Última edición por nicoqk; 04/03/2016 a las 08:43
  #4 (permalink)  
Antiguo 04/03/2016, 08:58
 
Fecha de Ingreso: abril-2015
Ubicación: Bogotá D.C - Colombia
Mensajes: 106
Antigüedad: 4 años, 6 meses
Puntos: 11
Respuesta: Web multilenguaje con combobox

Amm Ok, entonces si, puedes crear una variable en el documento, de esta manera el código quedaría así:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             document.addEventListener("DOMContentLoaded", function(event) {
  3.                 //En la siguiente variable almacenas la página de destino, en este caso si se encuentra
  4.                 // en contacto.html ps pones contacto.html para que redireccione a dicha página.
  5.                 var pagina = "contacto.html"; //index.html, empresa.html, etc.
  6.                 document.getElementById('combox_idioma').addEventListener('change', function() {
  7.                     location.href = "../" + this.value + "/" + pagina;
  8.                 });
  9.             });
  10.         </script>

Éxitos!

Última edición por jhonjaider1000; 04/03/2016 a las 09:03
  #5 (permalink)  
Antiguo 04/03/2016, 09:07
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Web multilenguaje con combobox

Por lo que entiendo, este código debo insertarlo en cada uno de los documentos html y dependiendo el nombre de cada, colocarlo en la variable. Es así?

Yo lo que pensaba era si hay alguna función que al cargar un documento html automáticamente almacene en la variable (en este caso 'pagina') el nombre del mismo. Así no debo pegar el código java en cada uno de los documentos, ya que si bien son solo 5 van a terminar siendo 20 en total teniendo en cuenta que son 4 idiomas.
  #6 (permalink)  
Antiguo 04/03/2016, 09:16
 
Fecha de Ingreso: abril-2015
Ubicación: Bogotá D.C - Colombia
Mensajes: 106
Antigüedad: 4 años, 6 meses
Puntos: 11
Respuesta: Web multilenguaje con combobox

HAHAHA si tienes razón, ok solo agrega esto para la variable página; de esta manera no tendrás que darle el nombre de la página a la variable, si no el mismo documento toma el nombre de la página en que se encuentre.

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             document.addEventListener("DOMContentLoaded", function(event) {
  3.               //De esta manera el mismo script obtiene el archivo sobre el cual se encuentra
  4.               //y logras lo que quieres.
  5.                 var pagina = document.location.href.split('/'); pagina[pagina.length-1];
  6.                 document.getElementById('combox_idioma').addEventListener('change', function() {
  7.                     location.href = "../" + this.value + "/" + pagina;
  8.                 });
  9.             });
  10.         </script>

Eso sí, independientemente de cualquier cosa, tendrás que poner el script antes del </body> de cada página, recuerda que cada página es independiente de cualquier otra, la única ventaja aquí, es que solo tienes que copiar y pegar, no necesitas modificar más nada...

Nota: Puedes copiar el código en el mismo html, o puedes pegar este código en un archivo .js ej: (idioma.js) e importarlo con la etiqueta <script src="idioma.js"></script> como si se tratara de un pluggin, puedes llamarlo al final del documento o también en el <head></head> e incluso puedes pegar este código en cualquier otro archivo js que ya estés importando en el documento.

Éxitos!

Última edición por jhonjaider1000; 04/03/2016 a las 09:25
  #7 (permalink)  
Antiguo 04/03/2016, 09:42
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Web multilenguaje con combobox

Esta línea que decís me devuelve esto en lugar del nombre del documento:

Cita:
file:,,,C:,xampp,htdocs,miweb,es,contacto.html
Pero lo resolví usando esta línea de código que encontré "Googleando"

Código Javascript:
Ver original
  1. var pagina = self.location.href.match( /\/([^/]+)$/ )[1];

Y ahora si me funciona.


Tomé tu consejo de pegar todo el código Javacript en un archivo independiente llamado scripts.js y lo linkee a cada uno de los documentos html.

Ya está funcionando como lo necesitaba..

Muchas gracias Jhon por tu ayuda, me sacaste de un gran problema..

Saludos!

Etiquetas: combobox, html, multilenguaje
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:10.