Drupal con jQuery al estilo navarro (primera parte)

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.

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,

jQuery Cycle en drupal es como el jamón en la trucha a la navarra

Hace tiempo que no me pasaba por esta cocina, es lo malo que tiene ser un profesional (en el sentido de que te contratan) y es que tienes ir a las cocinas de otros.

El titulo tiene su gracia ya que soy vegetariano, pero se que el jamón de la trucha a la navarra es el punto gracioso, salado y sabroso. También tiene sus riesgos, no es lo mismo un jamón que un JAMÓN, osea que si eres un poco cutre y metes un jamón cutre la trucha quedara cutre. Con jQuery y sus plugins puede pasar algo del estilo, si te pasas el plato de drupal pude indigestar a más de uno.

JQuery cycle es una joya que permite hacer ciclos entre elementos diferentes de nuestro html, de una forma muy sencilla.

Con este plugin se pueden hacer de forma muy sencilla presentaciones con imágenes y permite un control total en los efectos, eventos y tiempos.

Para que esto funcione en drupal necesitamos varios ingredientes, jquery_upate, jquery_plugin.

http://drupal.org/project/jquery_update Este modulo permite tener una versión más actualizada del jquery en nuestro drupal, la instalación es sencilla pero en la versión de drupal 5 tiene un punto un tanto raro, una vez descargado y descomprimido el modulo hay un directorio misc con una serie de ficheros .js copiar estos ficheros al directorio misc de nuestro drupal.

http://drupal.org/project/jquery_plugin Este modulo es muy sencillo, nos permite añadir plugin de jquery en nuestros módulos de una forma muy sencilla incluso en el módulo hay unos plugins para probar, entre ellos el cycle.

Este seria el html con el div donde colocamos las imágenes (este ejemplo esta sacado de aquí

<div class="pics"> 
    <img src="/files/beach1.jpg" width="200" height="200" /> 
    <img src="/files/beach2.jpg" width="200" height="200" /> 
    <img src="/files/beach3.jpg" width="200" height="200" /> 
</div>

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0px;  
    margin:  0px;  
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0px; 
    left: 0px;
}

jquery_plugin_add($plugin)<br>

 jquery_plugin_add('cycle');

Esta llamada la tendremos que hacer desde un módulo propio o lugar similar :)

$(document).ready(function() {
$('.pics').cycle({
    fx: 'fade'
 });
});

Ahora tendré esto jquery_plugin_add('cycle'); mas esto jquery_plugin_add('imagenes');

Es un método un tanto artesanal además tenemos un modulo slideshow_creator que también se basa en el cycle, pero a mi me resulto excesivo para según que situaciones. Además usando el modulo jquer_plugin nos permite tener una técnica para incorporara mas plugins de jQuery a nuestro drupal

Espero que os guste este plato, y si ya se que tengo pendiente varias partes del tutorial de jquery y drupal, llegara seguro que llegara.

Primeros pasos con drupal, crear el primer usuario, traducir el interfaz.

Ya tenemos nuestro drupal instalado, pero ahora quizás no sepamos bien que hacer. Veremos una página en inglés (y todos sabemos que los ingleses comen fatal). Vamos a comenzar a configurar nuestro drupal. Empezaremos creando la primera cuenta de usuario e instalaremos el idioma castellano para la interfaz. A través de esto iremos viendo conceptos de drupal como módulo, usuario etc, etc...

Lo primero que tenemos que hacer es crear la primera cuenta de usuario. Ésta será la cuenta del administrador, el que partirá el bacalao en nuestra cocina. Para ello pinchamos en el enlace "create the first account" el cual nos llevará a una página en la cual se nos pide un nombre de usuario y un correo electrónico. Una vez creada la cuenta cambiamos la contraseña y aceptamos.

Bien ya hemos creado el usuario administrador, y ya podríamos empezar a publicar contenido. Pero sigue estando el problema del idioma. Veamos como solucionamos esto.

En drupal el lenguaje de la interfaz está contenido en un archivo .po que podeis descargar desde http://drupal.org/project/Translations
en esa página buscáis el idioma que queráis descargar. Y la parte de drupal que permite tener la interfaz en varios idiomas se trata del módulo locale.

El módulo en cuestión viene por defecto en la instalación de drupal, pero tenemos que activarlo para hacer uso de él. Para ello en el menú izquierdo pinchamos en "Administer" y dentro de la sección "Site Building" en "Modules". Ahora estaremos en la página de administración de los módulos. Aparecen todos los que tenemos disponibles y marcados los que están activados. Pues bien, tenemos que localizar el módulo "Locale" (valga la redundancia) y activar la casilla a su derecha. Una vez guardados los cambios (botón "Save configuration" abajo) en el menú de la izquierda vamos a "Site configuration" y de ahí a "Localization".

Aquí tenemos toda la configuración relativa al lenguaje y veremos que sólo está el inglés. para cambiar esto tenemos que pinchar en la pestaña "Import" que quiere decir que vamos a importar un idioma. En esta pestaña seleccionamos el archivo que queremos importar (en nuestro caso sera un fichero de nombre es.po) que previamente habremos descargado, y a que idioma lo asociamos (en nuestro caso a "Spanish") y guardamos los cambios. Con esto hemos creado el idioma Spanish dentro de nuestro drupal, pero para que la interfaz se vea en la lengua de Cervantes tenemos que activar la casilla de activado (enabled) y de por defecto (default). Guardamos los cambios et... voila! ya tenemos nuestro drupal en castellano.

On egin!

Problemas inicio de sesión: "Acceso denegado"

Nuestra cocina está soportada en los cimientos por una serie de chiquitines: nuestros servidores. Bueno, pues desde hace unas cuantas actualizaciones en nuestros sistemas operativos (gnu/linux, claro) la combinación de firefox 2.x, php 5.x, y drupal 5.2 provoca una situación con tintes de telenovela, donde nuestras identidades no estaban claras. Me explico.

Accedías como siempre a tu drupal en desarrollo "logado" con tu usuaria de administración (u otros) y aparecía la maldita frase.

- Acceso denegado
- Access Denied

En este momento una serie de conversaciones surgían en la cocina.

La solución temporal encontrada tanto en drupal.org como en drupal.org.es es añadir la linea register_shutdown_function('session_write_close'); en el fichero settings.php

Salir de firefox entra de nuevo y ya.

En la parte inferior del fichero settings.php hay una sección para configuraciones de php donde yo añado la línea justo al final.

Bueno esto es todo amigos y amigas