JQuery, un toolkit la mar de apañao

Lisardo Fernández Cordeiro
Pau Mora Murie
2º GII  –  ETSE
Universidad de Valencia

Percibir el trabajo en su conjunto, desde tiempo inmemorial, solo ha estado al alcance de unos pocos elegidos. Afortunadamente, con el transcurrir de los siglos, el concepto defendido en los albores del 400 DC (entiéndase “Después de Cristo” y no “Direct Current”) por el bueno de San Agustín, sobre “rezar como si todo dependiera de Dios y trabajar como si todo dependiera de tí”, ha cambiado sucintamente. Así, como todo buen trabajo se precia de realizarse con las mejores herramientas diseñadas para él, nada más productivo y gratificante que no menospreciar la dependencia de trabajos ajenos para enriquecer el propio.
Es aquí donde los esforzados desarrolladores de estas útiles herramientas cobran su pequeña porción de esplendor.
conceptos básicos
  
Si pensamos en como afrontar, aunque solo sea con el éxito justito para salvar la dignidad, una definición o explicación sobre temas ajenos a la rutina diaria o alejado de la pequeña charca de conocimiento sobre los que defendemos el pasar de los días, únicamente aparece un camino: sentar la base conceptual.
Así sea. ¿qué es:
script: lo definimos como pequeño programa que ejecuta una acción concreta.
toolkit: tool-> herramientas, kit -> conjunto de funciones, métodos, desarrollados por terceros, que se integran en los programas con objeto de facilitar el desarrollo de los mismos, sin tener que programar métodos ajenos al núcleo del programa principal.
framework: o marco de trabajo, proporciona una arquitectura básica sobre la que construir una aplicación. Dentro del mismo podemos utilizar un toolkit.
poo: Programación Orientada a Objetos, justo eso de lo que se habla más arriba: programar con variables que se ajustan a las características que delimita una clase concreta.
plug-in: se trata de una pequeña aplicación que se relaciona con otra aportando funciones específicas nuevas, lo que ayuda a desarrollar programas más ligeros al limitarse a integrar estos complementos y relacionarse intercambiando datos. Algunas toolkits sirven para desarrollar plug-in, e incluso los integran como herramientas.
widget: parece ser que proviene de window-gadget, lo que se acerca mucho a su propósito. Así, se trata de una pequeña aplicación, generalmente muy visual, que permite la interacción del usuario con información concreta disponible en la red u otros recursos. Y sí, también forman parte de muchas toolkits.
html: se trata del lenguaje de marcado de hipertexto por excelencia en el desarrollo de páginas web. Es decir, la programación de cómo se va a presentar una página a través de un navegador. Se integran en él scripts, referencias a estilos de presentación, etc.
css: (Cascading Style Sheets), lo que en español significa hojas de estilo en cascada. Se trata de un mecanismo que describe cómo se va a mostrar un documento (HTML) en la pantalla, cómo se va a imprimir, permitiendo a los desarrolladores el control total sobre estilo y formato de sus documentos.
javascript: Lenguaje de programación, similar a C, que permite el desarrollo de pequeños programas -scripts- integrados en el html, para su ejecución desde el navegador del cliente.
ajax: no es una aplicación, ni un lenguaje. En este caso se define una técnica, una estrategia, una manera de crear aplicaciones interactivas utilizando diferentes tecnologías de un modo muy concreto. El objetivo es refrescar los datos de las páginas sobre las que navegamos sin tener que recargarlas completamente.
jQuery: razones de ser… o no ser
  
     …is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Así se presenta en la página principal de JQuery, a modo de slogan, lo que, en correcto castellano de Salamanca, se podría expresar como “chico, se te ha aparecido la Virgen”.
En la ciudad de Boston -Massachussets, EEUU- John Resing se pone a trastear, allá por el 2005, en una solución para que los desarrolladores de páginas web bajo Javascript no dedicaran tiempo infinito a asegurar el funcionamiento de su trabajo, independientemente de la plataforma donde se ejecutase y bajo cualquier navegador.
Así, en enero de 2006 ve la luz la primera versión de JQuery, con una máxima en mente: Hacer más escribiendo menos.
El desarrollo web debe tener en cuenta, entre otros aspectos, el navegador que utiliza el cliente, de tal manera que es crítico el código que se manda a la máquina. Solo con esta circunstancia, una página se puede complicar sobremanera con el reconocimiento de la máquina y la ejecución del tipo de código adecuado.
Es precisamente aquí donde JQuery se hace fuerte. El equipo de desarrollo web se limita a programar el código conforme a un estándar, utilizando las herramientas de la librería Jquerypara crear objetos que se ejecutarán correctamente en cualquier navegador.
La existencia en el mercado de otras librerías de características similares, no resta empuje ni introducción de JQuery en los entornos  de desarrollo web. Es más, su consistencia y versatilidad, así como una comunidad de programadores dedicados a la creación de plug-in’s, widgets y herramientas diversas, la sitúan entre las librerías más utilizadas.
hay que ver como trabaja jQuery
  
Antes que nada, nos descargamos la ultima versión de la librería JQuery, por aquello de: yo la tengo… ¿y tú?,
Con la librería en nuestro poder, no llegaremos a conquistar el mundo ni nos saldrán agallas, pero podremos comenzar realizando algunos ejercicios sencillos con los que palpar el potencial de esta librería.
Para comenzar, Jquery, tal y como se ha presentado en el apartado anterior, es una librería para facilitar la programación de javascript -el lenguaje que se ejecuta en el navegador web es decir en un host-.
Esta librería es multiplataforma, se puede usar en lenguajes de programación tales como PHP, HTML, JAVA, PYTHON.
Para hacer referencia a la librería, la incluiremos con estas lineas de código en una pagina HTML, o PHP:
<html>                                                             
<head>
<body>
    <a href=»http://jquery.com/»>jQuery</a>
    <script src=»jquery.js»></script>
    <script>
     
    </script>
  </body>
</html>
Una vez tenemos la referencia a la librería, mediante unan función comprobamos que el DOM -Document Objet Model o estructura de objetos que genera el navegador cuando se carga un documento- está listo. 
A continuación veremos ejemplos de gadget’s realizados con JQuery:
1º Visualizador de imágenes minimizadas en horizontal:
Podemos ver el ejemplo en:
2º Visualizador de imágenes minimizadas en vertical:

3º LightBox: Interfaz web de usuario flash. Diálogo escrito en JavaScript (pulsar los botones de demo).

Podemos ver el ejemplo en:
4º Desplegables que se pueden coger y soltar modificando la interface a tu gusto.
Podemos ver el ejemplo en:
características fundamentales
El objetivo principal que mueve la filosofía de JQuery radica en el ahorro de lineas de código. De esta manera, La librería se ha desarrollado en torno a este concepto, aglutinando un conjunto de funciones o métodos, gestión de eventos, efectos de animación y utilidades importantes de selección de elementos e integración con Ajax, entre otras.
Acercarse a JQuery no resulta tan sencillo como a priori cabría esperar. Acceder a su potencial exige la subida de una pendiente de aprendizaje pronunciada, si bien los beneficios que se obtienen justifican el esfuerzo. De hecho, los entendidos aseguran que dominar los conceptos de clases y manejar con soltura los objetos de clase, ayuda sobremanera a familiarizarse con esta potente librería.
Las llamadas a funciones resultan extremadamente sencillas, puesto que solo exige anteponer el símbolo $ a la función con la que se desea trabajar. Es a partir de aquí donde la declaración de objetos los hace accesibles a los métodos de la clase de un modo totalmente transparente y altamente efectivo para el programador.
De la misma manera se manejan los eventos que genera una página web dinámica. La asignación de eventos, su gestión, la asociación de los mismos a acciones concretas, resulta de todo punto cómodo y rápido.
JQuery proporciona una serie de efectos dinámicos asignables a acciones de eventos, resultando en un ahorro considerable de líneas de código.
Esta capacidad inherente, su escaso tamaño para enviarlo por la red, unida a los plug-in’s desarrollados por terceros, colocan a esta librería entre las mejor consideradas por el mercado.
conclusión
Siempre, las palabras de los sabios han servido de inspiración y guía en los albores de cualquier actividad, así que nada mejor para concluir que las de Norbert Wiener, fundador de la cibernética:
Hemos modificado tan radicalmente nuestro entorno que ahora debemos modificarnos a nosotros mismos para poder existir dentro de él”.
para ello, nada mejor que un buen jQuery’s widget en la solapa.
bibliografía

cuestiones, preguntas, dudas
..1. ¿Has entendido algo?
..2. ¿Diferenciarías un toolkit de un framework?
..3. ¿Cual es el principal aporte de JQuery a los desarrolladores?
..4. ¿San Agustín fué célibe?
..5. ¿Cómo se accede a las funciones de JQuery?
..6. ¿Se pueden desarrollar widgets con esta librería?
..7. ¿JQuery se integra en Javascript o en el navegador?
..8. ¿Te atreverías a describir algún gadget de Jquery?
..9. ¿Qué son los eventos dentro de una librería?
..10. ¿Porqué este interrogante de apertura no está alineado con el de la pregunta 9? ¿lo solucionaría JQuery?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *