Este artículo requiere conocimientos básicos de JavaScript y CSS
La verdad es que hay muchas cosas que querría haber hecho en el Sitio, pero por falta de tiempo y a veces habilidad no había podido llevar a cabo. Una de las cuestiones más significativas es la rigidez
típicas de las webs pre 1.0 (recordemos, el Sitio es una venerable reliquia de los años 90 del siglo pasado) y aunque con el tiempo he conseguido algunos avances al respecto no estoy en condiciones, ni tengo intención, de adaptarlo a las última moda de cada tres meses.
Esos avances de los que hablo los he conseguido a base echarles unas cuantas horitas aquí y allá y de dar muchas vueltas por la web, consultando infinidad de tutoriales escritos con más buena voluntad que acierto didáctico. El caso es que muchos de los esfuerzos invertidos en descubrir como manipular el DOM, como lograr tal o cual efecto o conseguir una mejor navegabilidad del Sitio me los podría haber ahorrado si en vez de brujulear hubiera centrado mi atención en alguna de las bibliotecas dedicadas a ello que es posible encontrar por ahí.
La que da título a este breve artículo, jQuery, está disponible desde al menos 2006, y facilita enormemente el acceso y manipulación de todos los elementos que componen una página sin necesidad de un esfuerzo excesivo. Eso si, son necesarios conocimientos básicos de JavaScript, CSS y HTML (pero se supone que de eso ya sabemos, nos dedicamos a desarrollar webs ¿no?) para sacarle todo su potencial..., con lo que nos ahorraremos una buena cantidad de horas de trabajo.
Por ejemplo, para cambiar dinámicamente una propiedad en una clase CSS (digamos que el color de los enlaces) el método consiste en obtener una matriz con los nombres de las clases CSS contenidas en las hojas de estilo asociadas a la página.
if (document. all) {
mClasesCSS = document. styleSheets[0]. rules;
} else {
mClasesCSS = document. styleSheets[0]. cssRules;
}
Una complicación típica es la diferente forma que tiene Microsoft de entender el mundo, lo que para ellos son rules para el resto del mundo son más específicamente cssRules. Una vez superado este escollo, habrá que recorrer la matriz, dar con la clase buscada y cambiar la propiedad correspondiente.
Clase = Clase.toLowerCase();
for (i=0; ClaseCSS=mClasesCSS[i]; i++) {
if (ClaseCSS.selectorText.toLowerCase() == Clase) {
ClaseCSS.style[Propiedad] = valor;
}
}
Puede parecer que no es excesivamente complicado, y que incluso todo ese código se puede meter en una función para usarlo a conveniencia (de hecho es el código de una función que escribí en su momento). Pero pudiéndolo hacer sin tanta complicación, ¿por qué no hacerlo? Bien, ¿cómo conseguiríamos esto mismo con jQuery? Así de fácil:
$(´.ClaseCSS´).css(´Propiedad´, ´valor´);
O si queremos aplicarlo a un elemento identificado:
$(´#IdElemento´).css(´Propiedad´, ´valor´);
y así con una buena cantidad de cosas. ¿Inconvenientes? El peso de jQuery, que sin ser exagerado para los tiempos que corren, (90 Ks) penalizan en alguna medida la carga de las páginas, al menos mientras jQuery no esté cacheado. Alguno me dirá oye, eso que hace jQuery ya lo hacía tu función, ¿para que engordar la cosa?
Efectivamente este problema ya lo tenía resuelto;) pero jQuery ofrece una gran colección de facilidades semejantes y además permite la adición de módulos para tareas concretas. Por no hablar de las cosas que podría necesitar en un futuro y que en vez de resolver a medias tras un tiempo de desarrollo bastante frustrante podré conseguir con jQuery en pocos minutos. ¿Inconvenientes? Se pierde la habilidad de la manipulación del DOM mediante JavaScript, la capa jQuery las abstrae y puede suponer un menoscabo de mis habilitades como programador, pero también hay que recordar cuantas y cuantas bibliotecas personales han surgido de la necesidad de ocultar la complejidad de ciertos procesos: se estudian como funcionan una vez, se simplifica su uso mediante una clase o función, y aunque se usen continuamente, se acaba por olvidar como se hacer realmente las cosas. Mi función de manipulación de clases CSS es un ejemplo.
La primera utilidad práctica que he encontrado a jQuery ha sido hacer que la sección Colaboran se ajuste perfectamente a la ventana del navegador sin importar el tamaño de la ventana o la resolución de la pantalla. Mi problema consistía en que cargaba el índice de colaboradores en un IFRAME y la página con las colaboraciones en otro. El ancho de cada uno de ellos está bien definido dentro del ancho de la página (limitado, por diseño a 800 puntos) pero la altura resulta más problemática. Hasta ahora la tenía definida para que se ajustara a resoluciones mínimas de 800x600 puntos, pero eso hoy día ya no es realista (tampoco lo de limitar la anchura, pero bueno...) ¿cómo hacer entonces para ajusta la altura de los IFRAMES a la resolución de la pantalla, sin importar cual fuera esta? Naturalmente la solución hubiera pasado por toda una engorrosa serie de obtención y ajuste de propiedades. Gracias a jQuery la cosa se simplifica mucho.
Por lo pronto, primero hay que llamar a jQuery, algo tan fácil como poner en la cabecera de la página la directiva.
<head> [...] <script src="jquery.js"></script> [...] </head>
En el ejemplo se supone que jquery.js está en el mismo directorio que la página que lo llama, pero también puede estar en el raíz del sitio.
<script src="/jquery.js"></script>
En algún directorio específico.
<script src="/scripts/jquery.js"></script>
O podemos chupar ancho de banda de algún buen samaritano.
<script src="http://google.com/jquery/1.6.4/jquery.min.js"></script>
Esta versión que traemos de Google es la 1.6.4 de jQuery en su versión mini, que reduce su tamaño simplemente quitando espacios, tabuladores, saltos de página, comentarios y cualquier elemento que no sea código puro y duro (la reducción es de casi el 150%) Como ventaja está la comentada, que no gastamos nuestro propio ancho de banda, y como inconveniente que tendremos que revisar todas nuestras páginas (o no, hay trucos para eso) cada vez que se actualice la versión de jQuery. Sin embargo, si mantenemos jQuery en nuestro propio servidor llamando siempre jquery.js al archivo, y actualizándolo con cada nueva versión, tendremos la seguridad de estar siempre a la última. Naturalmente, correremos el peligro de que alguien tenga la tentación de robarnos a su vez nuestro propio ancho de banda (pero también hay trucos para eso).
Una vez hecha cargada la biblioteca, podemos empezar a trabajar con ella. Para averiguar la altura del área de presentación, sin barras, pestaña o menús propios del navegador, y de paso asignarla a una variable, escribimos.
var ventana_alto = $(window).height();
Observa la estructura de las sentencias de jQuery. Pueden empezar por jquery o con el símbolo del dólar $, haciendo referencia a un elemento del DOM, a continuación viene una propiedad, método o evento, que o bien podemos leer o modificar. En internet hay una buena cantidad de tutoriales detallados y referencias de jQuery donde explican los detalles con más profundidad.
Ahora, para ajustar los IFRAMES, que previamente hemos identificado como idLista e idEnlaces basta con hacer:
$(´#idLista´).css(´height´, ventana_alto); $(´#idEnlaces´).css(´height´, ventana_alto);
Ahora bien, hay que tener en cuenta que la página tiene su propia cabecera y también un pie, por lo que habrá que restar la altura de éstos del total, en el caso de Colaboran serían unos 160 pixeles.
$(´#idLista´).css(´height´, ventana_alto-160); $(´#idEnlaces´).css(´height´, ventana_alto-160);
¿Dónde colocar esto y cuando ejecutarlo? jQuery proporciona una serie de eventos de gran utilidad entre ellos ready, que evita la ejecución de nuestro código hasta que la página no esté cargada, de este modo, podríamos escribir en cualquier parte de la página:
<script>
$(document).ready(function($){
var ventana_alto = $(window).height();
$(´#idLista´).css(´height´, ventana_alto-160);
$(´#idEnlaces´).css(´height´, ventana_alto-160);
});
</script>
Rizando en rizo, podríamos esperar que cada vez que cambie el tamaño de la ventana los IFRAMES se ajustaran al mismo. El evento resize acude en nuestra ayuda.
<script>
$(document).ready(function($){
var ventana_alto = $(window).height();
$(´#idLista´).css(´height´, ventana_alto-160);
$(´#idEnlaces´).css(´height´, ventana_alto-160);
$(window).resize(function() {
var ventana_alto = $(window).height();
$(´#idLista´).css(´height´, ventana_alto-160);
$(´#idEnlaces´).css(´height´, ventana_alto-160);
});
});
</script>
Cuando la página está lista se lee el alto de la ventana y se ajustan los IFRAMES, además, queda lista una función (sin nombre) que se dispara cuando se redimensiona la ventana del navegador. Pero ese código es feo: hay líneas duplicadas que hacen lo mismo. Simplifiquémoslo.
<script>
$(document).ready(function($){
CambiaAltura();
$(window).resize(function() {CambiaAltura();});
});
function CambiaAltura() {
var ventana_alto = $(window).height();
$(´#idLista´).css(´height´, ventana_alto-160);
$(´#idEnlaces´).css(´height´, ventana_alto-160);
}
</script>
Puedes ver como funciona en Colaboradores.
Este es un sencillo ejemplo de cómo jQuery puede ayudarnos a conseguir páginas más atractivas y navegables. No he hecho más que rascar en la superficie de esta potente biblioteca, y las posibilidades que ofrece son francamente impresionantes.