Editando apunte: Banderitas flameantes

Editando apunte: Banderitas flameantes cerrar apuntes

ID: 42 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Globalización, Programación
Etiquetas: accesibilidad, diseño, enlaces, imágenes, javascript, php, sociedad, webmaster
Extras: accesibilidad, diseño, enlaces, imágenes, javascript, php, sociedad, webmaster
apunte: - - - - - - - -

[rss]Vamos a plantear una selección de contenidos por idioma usando banderas flameantes indicando el idioma activo.[/rss]
	La idea es muy vieja, y su implementación puede matizarse; se podría cambiar el contenido de una capa (etiqueta div), o tener los contenidos en sendas capas ocultas, mostrando la asociada al idioma seleccionado. Nosotros nos decantamos por la segunda opción, aunque con pocos cambios pueden implementarse las alternativas (seguro que hay alguna más).
</p>
<p>
	Las banderitas que se ven en el <a href="?titulo=La+est%E9tica+de+los+formularios&PHPSESSID=lm6mdpd84hgjp42jsfisksd975">apunte anterior</a> son imágenes animadas (<a href="http://es.wikipedia.org/wiki/Graphics_Interchange_Format">gif animados</a>), y se mantienen siempre animadas, así que si quisiéramos saber si se ha seleccionado deberíamos aplicar estilos (ya sea opacidad, borde, color de fondo), pero nosotros también detendremos esa animación tal como se ve en las banderas del principio de este apunte.
</p>
<h3 class="subtitulo">
	Consideraciones
</h3>
<p>
	Vemos que las banderas de este apunte son estáticas y están escaladas, y si nos fijamos en las imágenes tratadas con el lenguaje <a href="http://es.wikipedia.org/wiki/Php">php</a> (el que disponemos en nuestro servidor), las animaciones se pierden ya que simplemente no está soportado por el lenguaje.
</p>
<p>
	Acabamos de dar las pautas para llevar a cabo nuestro cometido, simplemente mostramos la imagen original animada o creamos una copia con nuestro lenguaje, según la quisiéramos: animada o no.
</p>
<p>
	Nosotros usaremos nuestro <a href="?titulo=Este+diario%3A+Un+comod%EDn&PHPSESSID=lm6mdpd84hgjp42jsfisksd975">comodín</a>, pero también podría tratarse de un fichero independiente cuya sintaxis podría ser: "bandera.php?idioma=hispano&animada=no". Para evitar problemas de sintaxis por el uso de caracteres especiales evitaremos parámetros con acentos y eñes.
</p>
<p>
	Aquí el resultado:
</p>
<div style="text-align: center; background-color: white; border: 3px ridge blue; margin: 1em">
		<img src="diario.jocker.php?extra=bandera&idioma=hispano&animada=si" alt="Bandera de España" title="Bandera de España" longdesc="diario.ficha.php?id=58" style="background-image: url(diario.imagen.php?id=18); margin: 2em; padding: 1em; border: 1px ridge grey;" />
		<img src="diario.jocker.php?extra=bandera&idioma=hispano&animada=no" alt="Bandera de España" title="Bandera de España" longdesc="diario.ficha.php?id=58" style="background-image: url(diario.imagen.php?id=18); margin: 2em; padding: 1em; border: 1px ridge grey;" />
</div>
<p>
	Y el código:
</p>
<pre class="codigo"><?php
$idioma = strtolower($_GET["idioma"]);
switch($idioma)	{
	case "english":		$url = "inglesa.gif"; break;
	case "francoise":	$url = "francesa.gif"; break;
	default:		$url = "hispana.gif"; break;
};
$url = "diario/dibujos/$url";
$animada = strtolower($_GET["animada"]);
header("Content-Type: image/gif");
if ($animada == "no")	{
	$img = imagecreatefromgif($url);
	imagegif($img);
	imagedestroy($img);
}
else	{
	echo file_get_contents($url);
}
?></pre>
<p>
	Hemos suprimido del código real las líneas que necesitamos de nuestro comodín para evitar confusiones y añadido las propias del lenguaje. Para crear un fichero php real (recordemos que estamos usando un comodín), solo debemos verificar las rutas de los ficheros que usemos y sus respectivos nombres.
</p>
<h3 class="subtitulo">
	La Torre de Babel
</h3>
<div style="float: right; border: 3px ridge gray; margin: 0 0 .5em 1em; width: 200px; padding: 5px; font-size: .8em" >
	<a href="diario.ficha.php?id=61&PHPSESSID=lm6mdpd84hgjp42jsfisksd975" title="Torre de Babel"><img src="diario.imagen.php?id=61&max=200" alt="Torre de Babel" longdesc="diario.ficha.php?id=61"/></a>
	La Torre de Babel, pintura al óleo sobre lienzo de Pieter Brueghel el Viejo.
</div>
<p>
	Como cualquier buen constructor nos preocuparemos de tener todos los elementos para poder levantar nuestro edificio. Nuestro ladrillos serán las tres banderas, todas en sus dos estados (estática y animada), y tres textos, el mismo pero uno para cada idioma.
</p>
<p>
	Ya que usamos el título "Torre de Babel", el texto que utilizaremos en la selección por idiomas es el que hemos rescatado de la <a href="http://es.wikipedia.org/wiki/Torre_de_Babel">Wikipedia</a>, de donde también hemos obtenido la imagen adjunta. 
</p>
<p>
	Usaremos una capa para poner las seis banderas considerando los estilos para crear el efecto, y cuidaremos de darle un identificador "id" que nos ayude a crear nuestro código. También tendremos otra capa para albergar los tres párrafos necesarios (uno por cada idioma).
</p>
<div id="banderas" style="text-align: center">
	<img id="bandera_hispana_si" src="diario.jocker.php?extra=bandera&idioma=hispana&animada=si" alt="Bandera de España" title="Bandera de España" longdesc="diario.ficha.php?id=58" style="margin: 1em; padding: 2px; border: 2px ridge blue;" />
	<img id="bandera_hispana_no" src="diario.jocker.php?extra=bandera&idioma=hispana&animada=no" alt="Bandera de España" title="Bandera de España" longdesc="diario.ficha.php?id=58" style="margin: 1em; padding: 2px; border: 2px outset grey;" />

</div>
<div id="textos">
	<p id="texto_hispana" style="border: 1px solid blue; padding: 1em">
		La Torre de Babel es una construcción mencionada en el antiguo Testamento. Según algunas interpretaciones del capítulo 11 del Génesis, los hombres pretendían, con la construcción de esta torre, alcanzar el Cielo.
	</p>

<p id="texto_inglesa" style="border: 1px solid blue; padding: 1em">
		The Tower of Babel was an enormous tower built in the plain of Shinar.
	</p>

<p id="texto_francesa" style="border: 1px solid blue; padding: 1em">
		La tour de Babel est un édifice mythique qui était selon la Genèse une tour que souhaitaient construire les hommes pour atteindre le ciel.
	</p>

</div>
<br/>
<p>
	Ahora tan solo nos queda pulsar sobre las banderas inactivas (estáticas con borde gris), para ver el efecto. A continuación mostramos el código que asociamos a cada imagen estática:
</p>
<pre class="codigo">var idiomas = ["hispana", "inglesa", "francesa"];
function idioma()	{
	soy_idioma = this.id.split("_")[1];
	for (i = 0, total = idiomas.length; i < total; i++)	{
		tag("bandera_" + idiomas[i] + "_no").style.display = (soy_idioma == idiomas[i]) ? "none":"inline";
		tag("bandera_" + idiomas[i] + "_si").style.display = (soy_idioma != idiomas[i]) ? "none":"inline";
		tag("texto_" + idiomas[i]).style.display = (soy_idioma != idiomas[i]) ? "none":"block";
	}
}</pre>
<p>
	No nos olvidemos que hemos puesto en los identificadores de los elementos que usamos en el efecto el nombre del idioma (véase la variable "idiomas").
</p>
<h3 class="subtitulo">
	Notas finales (algunas)
</h3>
<p>
	Pinchando sobre la pintura que acompaña este apunte, se puede encontrar más información sobre la Torre de Babel, junto a la fuente donde se ha obtenido (Wikipedia).
</p>
<p>
	No nos olvidamos de la accesibilidad, pero como no queríamos poner enlaces superfluos, lo que haremos es explicar como conseguir ese cometido. Por ejemplo enlazando en cada bandera con la pagina asociada al idioma correspondiente (de la Wikipedia), y cancelando el enlace después de realizar el efecto (entregando el valor "false" al enlace).
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación