Combo box

Zhukov · #1 (**permalink**) 23/08/2012, 02:04

Hola, soy un programador recién salido del horno se puede decir ya que hace un mes salí de la facultad y he encontrado mi primer trabajo. Todo esto es nuevo para mi y vengo en busca de ayuda :)

El problema en cuestión es:
tengo un combo box con id de idiomas cargados 1 - Español, 2 - Inglés y la idea es que.. cuando el usuario seleccione un idioma, las paginas se le muestren en ese idioma elegido.
El metodo del idioma se realiza a través de una función llamada gettext, con esto quiero decir que no se trata de redireccionar a la pagina en ingles y fuera.
La idea es, hay una única web y dependiendo del idioma se carga el fichero de textos en uno u otro idioma.

Para realizar todo esto tenia pensado hacer que cuando el usuario seleccione un idioma, en el evento onChange del combo, meter 2 instrucciones;
1) var_sesion_idioma = elemento seleccionado
2) recargar la pagina y una vez tenemos ya un idioma escogido, al recargar la pagina, ésta lo hará con el idioma seleccionado

La idea básica sería algo así

Código:

<select class="mll" name="idioma" id="idioma" onChange=" ">
        <option value="idioma_id=1">Español</option>
        <option value="idioma_id=2">English</option>
</select>

Como ya he dicho estoy empezando en esto así que agradecería cualquier ayuda que se me pudiera prestar.

Un saludo.

vosk · #2 (**permalink**) 23/08/2012, 05:37

creo que no es algo facil esto de usar varios idiomas sin multiplicar los documentos (no estas solo, yo hace años que estoy empezando); hacerlo con solo html y javascript no creo que sea factible (ok, con javascript puedes generar contenido y eso pero tendrias que cargar todos los idiomas al cliente), lo mejor es respaldarte con algun lenguaje de servidor como php

la idea es la siguiente: tienes un select tal como has propuesto, el evento es el onChange que lo que hara es simplemente recargar la pagina actual buscando una clave-valor que indique el idioma, recogiendo el codigo de idioma (o uno por defecto), cargar el archivo necesario con los bloques de texto, y escribir los propios bloques; como se da el caso que los bloques serán estaticos no hace falta usar variables sino que puedes definirlos; añado una sugerencia con lo mas básico:

Código:

<?php
$default_lid = "q";
include_once(((isset($_GET['lid']))? $_GET['lid'] : $default_lid). ".php");
?>
<html>
	<head></head>
	<body>
		<select onChange="javascript:location.href = '?lid='+this.value;">
			<option>Seleccione</option>
			<option value="q">Idioma Q</option>
			<option value="w">Idioma W</option>
		</select><br>
		<h1><?php echo TITULO; ?></h1>
		<h3><?php echo CONTENIDO; ?></h3>
		<h5><?php echo PPAG; ?></h5>
	</body>
</html>

los archivos de bloques de texto (en este caso q.php y w.php) contienen las definiciones en cada idioma, tal como los siguientes:

Código:

//archivo q.php
<?php
define(TITULO, "Encabezado");
define(CONTENIDO, "Este es el contenido");
define(PPAG, "2012 tal.com");
?>


//archivo w.php
<?php
define(TITULO, "Header");
define(CONTENIDO, "Thats the content text");
define(PPAG, "2012 whatever.com");
?>

ten en cuenta que para hacer una web completa tendras que usar un monton (por así decirlo) de bloques de texto (ve el caso de esta misma web, cada item de menú será un bloque, cada tooltip otro bloque, los titulos, botones, y mil etceteras mas)

esto solo es una idea 'a la antigua', seguramente por ahí podras encontrar herramientas para php mas completas o al menos mas agradecidas visualmente

suerte con ello
vosk

Zhukov · #3 (**permalink**) 23/08/2012, 07:30

Muchísimas gracias por tu pronta respuesta.
Espero me sirva de ayuda, voy con ello.

Un saludo

Zhukov · #4 (**permalink**) 23/08/2012, 11:04

Perdona que te haga otra pregunta sobre el tema.
Yo el tema de las traducciones efectivamente, a través de la función gettext de php ya está logrado es decir, hay una unica pagina web y dependiendo del idioma DEL NAVEGADOR hago que cargue uno u otro idioma, es decir, si el navegador me da es_ES la pone en español, en_GB ingles... etc.

La cosa es que no quiero pasar variables por url, por lo que por eso dije de hacerlo con una variable de sesión.

La cosa es ahora hacer algo de este estilo

$_SESSION ["usuario"] ["idiomaSesion"] = this.value;

y llamar a recargar la misma pagina en la cual nada mas entrar se hace la comprobacion de si el idioma de la variable de sesion existe lo ponga y sino muestre el por defecto.

Gracias de nuevo por la ayuda

vosk · #5 (**permalink**) 24/08/2012, 09:10

Ok la idea es la misma pero en vez de comprobar el idioma en cada carga y arrastrarlo en la url, solo debes usarlo en una zona concreta (un form para cambiar de idioma, el propio form de registro, donde quieras) que te redirige a un php para crear una variable de sesion con el identificador de idioma y un retorno a la HTTP_REFERER para recargar el documento con el nuevo idioma como si no hubiera pasado nada (bueno esto ultimo es opcional); siguiendo el codigo que has colgado la cosa te quedaria

Código:

//archivo cambia_idioma.php
<?php
if($comprovaciones_de_error_y_todo_eso == TODO_OK) {
        $_SESSION ["usuario"] ["idiomaSesion"] = $_POST['idioma_seleccionado'];
}
redirige_a_documento_anterior();
?>

Y en el documento puedes dejar un sidebar o lo que quieras con un form para esta accion con las tipicas banderas (o una llamada ajax o lo que mas se adapte)

Seguramente ya habias llegado a esta conclusión como unica solucion aceptable, pero te la comento de todas formas

Saludos
vosk

pistonasos · #6 (**permalink**) 26/08/2012, 05:18

Ya que usan JS, ¿porqué recargar la página?. No se si sería muy costosa mi idea, pero podría usar DOM, un array asosiativo para la traducción de cada elemento HTML y aplicar el idioma a los elementos con un bucle "clave in array" a travéz del evento onchange en el select.
Esto daría menos peso al servidor, y no habría que recargar la web, pero no sería la mejor idea en caso de que algún dia se quiera extender el soporte de lenguajes ya que sería mucho peso del lado del cliente.

Un ej:

Código Javascript:

Ver originalIdiomas=
 {
    ingles:
         {
               accesorios:"Accesories",
               aplicaciones:"Applications",
               galeria:"Galery"
        }
    espanol:
        {
               accesorios:"Accesorios",
               aplicaciones:"Aplicaciones",
               galeria:"Galería"
        }
}
function cIdioma(idioma)
{
   for(clave in Idiomas[idioma])
   {
       document.getElementByID(clave).innerHTML=Idiomas[idioma][clave];
   }
}

Código HTML:

Ver original<select onchange="cIdioma(this.options[this.selectedIndex].value)">
  <option value="espanol">Español</option>
  <option value="ingles">English</option>
</select>
<div>
  <ul>
    <li><a href="#" id="accesorios">Accesorios</a></li>
    <li><a href="#" id="aplicaciones">Aplicaciones</a></li>
    <li><a href="#" id="galeria">Galería</a></li>
  </ul>
</div>

Aunque ahora que lo pienso no se conservaría el idioma al recargar/cambiar la página, al menos que utilices cookies.
Puse texto en los li para que no afecte al SEO, aunque sí afectaría negativamente al SEO inglés, ya que por defecto la web estaría en español, o en el idioma en el que escribas los <li></li>.
Bueno, de todas formas,tenés una opción más.
Salu2