Imagen de karlos

Drupal con jQuery al estilo navarro (primera parte)

Submitted by karlos on Vie, 08/08/2008 - 12:01am

Está claro que en esta tierra como ya hemos comentado en otras ocasiones se come mucho y bien, esto ha dado grandes cocineros y cocineras. Nosotros queremos llegar a eso y pero como acostumbramos en esta cocina no usaremos pimientos del piquillo son otros los ingredientes que usamos, hoy es jQuery el rey de nuestra cocina.

Este mini manual constará de varias partes que iré ampliando.

  • Primer plato: Introducción teórica o el porque de las cosas (primera parte)
  • Segundo plato: Primeros guisos con jQuery (segunda parte)
  • Tercer plato: Cocina fusión. Drupal + jQuery (tercera parte)
  • Cuarto plato: Ejemplo en reales. (cuarta parte)
  • [..]

Primer plato: Introducción teórica o el por qué de las cosas

A mis compañeros de guisos en Investic, les suelo decir que jQuery es la alta cocina en el mundo del desarrollo con tecnologías Web, o por lo menos tiene la potencia para lograrlo.

Desde que ajax apareciera a darle un disgusto a los platos precocinados Con flash, nuestro intrusivo y ofuscado javascript de entonces, recupero su vuelo y proliferaron como flores silvestres un montón de bibliotecas (librerías) para desarrollar con javascript, DOJO, Prototype, Mootools y otros tantos.

En el paso de la rama de Drupal 4.7.x a la rama 5.x la comunidad drupal decidió de manera muy inteligente que la responsabilidad del javascript recayera en jQuery.

Pero ¿y por qué tanto Javascript? y ¿qué es jQuery? Vamos por partes.

"JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C." wikipedia

Al ser un lenguaje soportado por la mayoría de los navegadores actuales, nos encontramos con un complemento perfecto para trabajar del lado del cliente.

Esto para nuestros clientes no era demasiado, primero quisieron los gif animados y luego pedían los menús con movimientos (que proporcionaba flash) , y javascript se quedaba corto en interactividad. La solución llego de la manos de nuestro salvador ajax (vale, sí, ahora digo que es ajax). Esta tecnología permitió hacer atractivas las conexiones entre el cliente y el servidor.

Esto no pretende ser un manual ajax ya que hay mucho escrito sobre esta cocina fusión pero según la Wikipedia AJAX es: acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Éstas se ejecutan en el cliente, es decir, en el navegador de los usuarios y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

ajax

Como se puede ver en diagrama, en la parte superior tendríamos una conexión clásica donde un evento generado desde el cliente que realiza una petición al servidor pasa por la recarga de la página, en el esquema inferior se puede ver que el cliente puede ir haciendo de forma autónoma diferentes conexiones sin necesidad de recargar la web, como dice la wikipedia esto hace aumentar la interactividad, velocidad y usabilidad de nuestros desarrollos.

Por lo tanto, JavaScript vuelve con fuerza, pero... sí, siempre hay un pero, la desidia provocada por la guerra de los navegadores hace muy tedioso programar en javascript ya que cada navegador, sobre todo los que no cumple con los estándares tienen sus manías, y es aquí donde la peña se pone las pilas creando todo un abanico de posibilidades entorno a este lenguaje. De esta bacanal gastronómica alrededor de javascript surge jQuery.

jQuery aparte de ser el aceite de oliva de nuestros platos webs, según Choan C. Gálvez que hace una traducción libre es: jQuery es un nuevo tipo de librería de javascript. No es un extenso e inflado framework que prometa lo mejor en AJAX, ni un conjunto de innecesarias y complicadas mejoras: jQuery ha sido diseñado para cambiar tu forma de escribir javascript

Por lo tanto jQuery es una nueva manera de programar javascript, pudiendo controlar los eventos, las animaciones, ajax y un largo etcétera.

Las principales características que lo hacen diferente de otras librerías o frameworks son que soporta CSS 1, 2 y 3 y XPath básico, la librería pesa alrededor de 10kb por lo que es muy ligera, es 100% compatible con Internet Explorer, Firefox, Safari, y Opera y lo mejor es que existen cientos de plugins para jQuery y puedes crear los tuyos. moisesclemente

Resumiendo y terminado esta primera parte, jQuery nos permite trabajar con javascript de una manera increíble haciendo cosas asombrosos y con una sencillez inusitada teniendo en cuantr que no deja de ser javascript.

En la próxima parte de este manual pondré unos ejemplo de platos sencillos que se puede hacer con jQuery,

Comentarios

Submitted by iorgos on Lun, 08/09/2008 - 3:39pm.

jQuery y Drupal

He trabajado mucho con jQuery sin problemas fuera de Drupal, sin ambargo, he introducido estos script de muchas maneras en Drupal y desconozco cual es la mejor.
Lo que sucede es que cuando utilizo más de un plugin; suelen pisarse unos a otros, a veces da errores, etc.

No he indagado profundamnte en este tema y agradecería si me ayudan.

Saludos!

Submitted by admin on Lun, 08/09/2008 - 8:49pm.

Jquery_update y Jquery_plugin

Drupal en su rama 5 empezo a usar jquery en el core, pero la versión ahora mismo de ese jQuery no es la mas adecuada teniendo en cuanta lo que han avanzado estas librerias. Para solucionar esto esta el modulo jquery_update tanto para drupal 5.x como para drupal 6.x este modulo añade la ultima version de jQuery. Por otro lado dado que jQuery como tal es una libreria sencilla son sus plugins los que realmente añaden potencia para eso esta el modulo jquery_plugin que de una forma sencilla permite añadir diferentes plugins de forma ordenada. Por ejemplo para la web de kerobia http://materia.kerobia.com/eu/ que la potencia en efectos la realizamos con jQuery tenemos un pequeño modulo que asocia los distintos plugins de jquery. (una vez ya instalado jquer_update y jquery_plugin) Este es codigo del modulo 
<?php
 
/**
 * Implementation of hook_perm().
 */
function aparicion_perm() {
  return array('aparicion');
}
 
/**
 * Implementation of hook_init().
 */
function aparicion_init() {
  global $user, $conf, $locale;
 
  if (user_access('aparicion')) {
    jquery_plugin_add('preloadCssImages');
    jquery_plugin_add('metadata');
    jquery_plugin_add('dimensions');
    jquery_plugin_add('aparicion');
 
  }
}
Con el hook_init lo único que hacemos es asocia los plugins (formato .min) que me interesan Espero que te sirva Karlos g liberal (patxangas) => http://www.investic.net/blog/karlos
Submitted by Anónimo on Dom, 17/08/2008 - 4:24am.

felicitaciones

Muy interesante el artículo. Quería preguntarte que libro me recomiendas para aprender jQuery, pues estoy muy interesado en aprender a usar ersa librería javascript.

Saludos.

Submitted by admin on Lun, 18/08/2008 - 8:59am.

Learning jQuery es una opción

Yo me pille Learning jQuery y la verdad que como libro de referencia esta muy completo, el problema es la velocidad de los desarrollos ya que no solo es la libreria lo que importa también su comunidad. En jQuery los plugins le estan dotando de un potencial brutal y esto solo esta en internet.

Este enlace es una recopilación de casi todo lo interesante de jQuery, espero que te sirva

Submitted by oskar_calvo on Sáb, 09/08/2008 - 6:13pm.

muy buena propuesta.

Estoy deseando de leer el resto de artículos Karlos

Un saludo

Oskar

Documentados, soluciones con software libre