Tiempo de lectura < 5 minutos
Durante las tres primeras semanas de septiembre he estado trabajando en mi tiempo libre (haciendo que casi todo mi tiempo fuese “no-libre”) en una página web para una amiga.
Uno de esos raros días en los que entré en Facebook, vi que esta chica buscaba a alguien para que le construyese un sitio web en el que plasmar su TFG de la carrera de Comunicación Audiovisual. Por curiosidad le pregunté qué es lo que buscaba, y muy amablemente me explicó todo el proyecto. Por entonces yo sabía algo de HTML, CSS y prácticamente nada de Javascript, pero me lancé a ayudarla, y el resultado, cumpliendo la fecha de entrega, ha sido éste: http://www.defactostate.com.
La totalidad de las horas de programación invertidas en este proyecto asciende, probablemente, a unas 40 horas de trabajo. Y solamente de programación; el tiempo invertido en tratamiento de imágenes y vídeos suma alguna hora más. A pesar del coste que ha tenido esto en mi vida personal y en mi uso del tiempo libre, el balance ha sido muy positivo, pues he podido aprender bastante (gracias al querido Internet) acerca del lenguaje Javascript y del “nuevo” estándar HTML5.
He olvidado mencionar que no utilicé plantillas a la hora de construir la página; casi todo ha sido programado de cero, a excepción de la parte de Javascript que hace funcionar la galería de imágenes que incorpora el sitio (Photoswipe, una pasada). También reconozco que algunas consultas en Internet me han devuelto resultados de código MUY similar al que he utilizado, por ejemplo, para la modificación de la opacidad de la página a la hora de transicionar.
Y más o menos a esto es a lo que voy: funciones interesantes de la página web. Yo no tengo ninguna formación académica en esto (desde el punto de vista Web), pero me gustaría explicar un poco, al menos por encima, alguna función que he construido y que me parece útil o elegante. (Todo el código es accesible mirando la propia fuente del sitio, claro).
Función De OPACIdad
Esta función, o algo muy similar, se puede encontrar en muchos sitios de Internet como Stackoverflow y, además, desde hace bastante tiempo.
[code language=”javascript”]
function aparecer(el,desde,hasta) {
fadeObject(el, desde, hasta, tiempo_aparicion);
}
function desvanecer(el,desde,hasta) {
fadeObject(el, desde, hasta, tiempo_desaparicion);
}
function fadeObject(el, start, end, duration) {
var increment = (end – start) / (duration / ms_intervalo);
var current = start;
function next() {
current = current + increment;
if (((end > start) && (current >= end)) ||
((end < start) && (current <= end))){
current = end;
}
el.style.opacity = current;
if (current != end) {
setTimeout(next, ms_intervalo);
}
}
next();
}
[/code]
Con esta sencilla función, abstraíble a través de las funciones “aparecer” y “desvanecer”, se consigue modificar la opacidad de un elemento del DOM (Document Object Model) de forma gradual. Reconozco que al principio me resultó un poco confuso el uso de la función “setTimeout“, y es que esta función propia del lenguaje Javascript no es igual a una función del tipo “sleep” de otros lenguajes, sino que lo que hace es invocar una función después de que haya pasado un tiempo ‘x’.
Así pues, lo que estamos haciendo con esta función es llamar de una manera ‘recursiva’ a sí misma, para generar esa distancia de tiempo entre una llamada y otra. Es como decir, por ejemplo, “en 2 minutos pruebo la temperatura en 2 minutos si no está caliente el agua”. Un poco extraño, ¿no?
Al final, estas funciones se pudieron aprovechar de un modo más general con las funciones “viajarA“, que lleva al usuario de una página a otra, y “descubrirPagina“, que muestra la página al usuario una vez éste llega a ella y ésta se ha cargado:
[code language=”javascript”]
function viajarA (identificador,unLugar){
// Esta función se utiliza para, tras pinchar en un enlace, cubrir la página con un elemento "div" y viajar al documento indicado, "unLugar", si éste se ha indicado.
var nodo_aux = document.createElement("DIV");
document.body.appendChild(nodo_aux);
var elementos_body = document.body.getElementsByTagName(‘*’);
elementos_body[elementos_body.length – 1].id=identificador;
var nodo = document.getElementById(identificador);
aparecer(nodo,0,1);
if (unLugar != ”){
setTimeout(function(){window.location = unLugar},tiempo_aparicion+2);
}
}
function descubrirPagina(id){
// Esta función se utiliza para, tras entrar en una página, descubrir su contenido. "id" es el identificador de un elemento que recubre la página en su totalidad.
var nodo = document.getElementById(id);
desvanecer(nodo,1,0);
setTimeout(function(){nodo.parentNode.removeChild(nodo)},tiempo_desaparicion+1);
}
[/code]
Hacer un idioma dinámico
Ésta página es solo front-end, es decir, no existe ninguna actividad que se relacione con el servidor de manera automática, ni por parte de otra máquina ni del usuario visitante, y que genere nuevo contenido dinámico. El contenido siempre es el mismo y no se encuentra en una base de datos, sino en archivos HTML, CSS y Javascript (elementos, su apariencia y su comportamiento, respectivamente).
A pesar de que el sitio no está compuesto por muchos archivos, manejar archivos estructuralmente idénticos puede ser un engorro; las páginas para castellano e inglés son idénticas a excepción del texto. Lo primero fue construir la parte en castellano (cuestión de comodidad). Después, generalizar el archivo para cualquier idioma. Esto lo compuse con dos pasos:
- Incluir scripts de Javascript en las partes del doumento donde hubiese texto, con funciones cuyo argumento fuese un idioma.
- Construir un script que detecte de manera automática el idioma de la página para pasarlo por parámetro a las funciones de escritura.
Así, para el primer punto tendríamos una función como ésta incluida en el documento HTML:
[code language=”html”]
<script type="text/javascript">
primerTexto(idioma_local);
</script>
[/code]
Que está definida en el archivo de Javascript como:
[code language=”javascript”]
function primerTexto(idioma_base){
var texto = "";
switch(idioma_base){
case "ES":
texto='<p class="titulo">Juventud Transnistria</p><p class="subtitulo">Soberanía cuestionada</p><div id="parrafada"><p class="parrafoLigero">Retrato de una generación que se pregunta lo mismo que su Estado acerca del futuro. Conócelos a través de los puntos sobre el mapa.</p>’;
break;
case "EN":
texto='<p class="titulo">Transnistrian Youth</p><p class="subtitulo">Soberanía cuestionada</p><div id="parrafada"><p class="parrafoLigero">Picture of a generation that wonders about its future, just like its State. Get to know them through the points on the map.</p>’;
break;
}
document.write(texto);
}
[/code]
Por otro lado, como indico en el punto 2, en el ‘head’ de nuestro documento HTML se incluiría un script tal que:
[code language=”html”]
<script type="text/javascript">
var url = window.location.pathname;
var folder = url.substring(1,url.lastIndexOf(‘/’));
idioma_local = folder.substring(folder.lastIndexOf(‘/’)+1);
</script>
[/code]
Este script lee el nombre de la carpeta en la que se encuentra el archivo, por ejemplo ‘ES’ o ‘EN’, y dicho nombre se convierte en el valor que se le pasa a las funciones de escritura.
Dado que el post se está haciendo un poquito largo, dejaré alguna otra función para otro momento.
¡Ciao!