Nosolocodigo - Desarrollo web con Joomla, Wordpress y software libre » Javascript

Blackbox: slideshow sencillo de imágenes con Mootools

David — Tue, 19 Jan 2010 00:48:01 +0000

Vía Webresourcesdepot me encuentro con este slideshow de imágenes para Mootools. El plugin muestra las imágenes con un efecto de fadeIn y fadeOut y permite un control muy sencillo con botones de start y stop que aparecen al hacer hover sobre las imágenes. Se podría decir que es un slideshow minimalista.

La implementación es muy sencilla:

Después, se crea el objeto de tipo blackbox con una simple sentencia y listo.



var mySlideshow = new Blackbox('myBlackcubeSlideShow', { wait: 3000, height: 350 });

Un slideshow más para la colección, en este caso para Mootools, donde no abundan tanto como en jQuery, que está plagado de plugins para crear slideshows.

Puedes encontrar más información y descargartelo en la página del plugin.

Artículos relacionados:

Chuleta de jQuery 1.4 en FutureColors

David — Thu, 14 Jan 2010 15:24:14 +0000

En FutureColors han realizado una chuleta de jQuery 1.4 muy bien estructurada. Puedes descargarla en formato PDF o en formato JPG.

Artículos relacionados:

5 trucos para usar jQuery con Wordpress

David — Mon, 04 Jan 2010 12:58:59 +0000

Cuando creas un theme o plugin para Wordpress, muy frecuentemente se requiere usar jQuery (o cualquier otro framework javascript). Wordpress tiene un API para manejar los ficheros que se incluyen, tanto scripts como estilos.

Estos son unos cuantos trucos muy útiles a la hora de usar javascript con Wordpress.

Usa wp_enqueue_script()

La forma en que se incluye un script javascript en HTML es con el tag script. Incluir jQuery directamente sobre el theme con el tag script puede causar muchos conflictos. La manera correcta de hacerlo es:


function mi_inicio() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'mi_inicio');

De esta forma se incluye la última versión de jQuery. Con la instalación de Wordpress se incluye la última versión de jQuery en el directorio wp-includes/js/jquery, así como otros frameworks conocidos.
Este código debe ser añadido en el plugin que estés desarrollando, o en el fichero functions.php de tu theme. La función is_admin se ejecuta para evitar que se incluya jQuery en tus páginas de administración.
Puedes encontrar más información sobre la función wp_enqueue_script en Anieto2K.

Cargar jQuery en Wordpress desde el CDN de Google

La llamada a la función wp_enqueue_script(‘jquery’) cargará la última versión de jQuery, que se encuentra en el directorio wp-includes/js/jquery. Si deseas cargar jQuery desde el CDN de Google, deberás de usar el siguiente truco:


function mi_inicio() {
	if (!is_admin()) {
		// comment out the next two lines to load the local copy of jQuery
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'mi_inicio');

Hay varios motivos por los que cargar el framework javascript desde los servidores de Google.

También existen plugins que ya hacen este trabajo, como el plugin Use Google libraries.

Cargar jQuery al final del theme

Por defecto, cuando se usa la función wp_enqueue_script, se añade el script en la sección head del documento HTML. Puede ser que te interese incluir el framework javascript al final, justo antes de que se acabe el body, para disminuir la velocidad con que carga la página. En este caso debes de usar el parámetro $in_footer de la función wp_register_script. Puedes ver el código modificado a continuación.


function mi_inicio() {
	if(!is_admin()) {
		wp_deregister_script('jquery');

		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
                //Con este código se cargaría en el pie, pero usando el API de Google
		//wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

		wp_enqueue_script('jquery');
	}
}
add_action('init', 'mi_inicio');

En el último parámetro se pasa un true que indica que el script se cargue en el pie de página.

Añadir jQuery como una dependencia

Si tienes un script que has desarrollado (theme.js), y este a su vez hace uso de otros scripts u otros frameworks (jQuery), es buena idea cargarlos como dependencia del script que estás creando, de esta forma se asegura que siempre se cargarán antes al ser una dependencia.


function mi_inicio() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
		wp_enqueue_script('jquery');

		// cargar el fichero js de mi theme: js/theme.js
		wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'mi_inicio');

En el tercer parámetro pasamos un array con el conjunto de dependencias que queremos cargar para ese script, en este caso jQuery.

Usar jQuery adecuadamente

El framework jQuery incluido con Wordpress llama automáticamente a la función jQuery.noConflict(). Esto provoca que la forma habitual de ejecutar la función jQuery, es decir, la función dolar ( $ ), por ejemplo $(‘id’).show() , no funcionará. Por el contrario, habrá que llamar a a la misma función de la siguiente forma: jQuery(‘id’).show().
Si estás usando el CDN de Google para cargar Javascript, es recomendable hacer la llamada a noConflict de forma manual para evitar posibles conflictos en el futuro.
Si quieres seguir usando la función dolar, puedes usar el siguiente código a modo de espacio de nombres:


jQuery(function ($) {
	/* Puedes usar $ con seguridad para hacer referencia a jQuery */
});

Sabiendo estos trucos se tiene una comprensión muy buena (y necesaria) sobre como usar los ficheros Javascript en un theme de Wordpress, algo imprescindible a la hora de crear un theme sin hacer “chapucillas”.

Fuente: Eric Martin

Artículos relacionados:

Ya está aquí “Mootools Forge”, repositorio oficial de extensiones para Mootools

David — Fri, 11 Dec 2009 00:07:37 +0000

Ya ha salido la forja de Mootools, el sitio oficial donde se centralizarán todos los plugins para Mootools, al igual que ya hacen otros frameworks como jQuery, su principal competidor y el framework Javascript más popular.

Mootools es un framework técnicamente espectacular, pero que no ha sabido llegar a la gente del mismo modo que jQuery. Uno de los problemas de que se venían quejando los usuarios era la dificultad para encontrar extensiones de Mootools con su respectiva documentación. Para esta faena, el único recurso hasta ahora era tirar de Google y empezar a buscar.

Los desarrolladores del framework, conscientes de este problema han creado la forja de Mootools, con la que se espera subsanarlo y disponer de un respositorio centralizado de plugins para Mootools.

Cada plugin aparecerá con un enlace a un ejemplo, un enlace de descarga y un enlace a la documentación, cosa que ayudará en gran medida a que la gente encuentre rápidamente lo que andaba buscando.

Esperemos que sirva para popularizar un poco más el framework, se hagan más y mejores plugins y todos salgamos beneficiados. Otro que saldrá beneficiado con esta medida será Joomla, que usa Mootools en el core, y muchas veces se le ha criticado no usar jQuery como framework principal, dada su popularidad.

Podeis encontrar más información en el post oficial del blog de Mootools.

Artículos relacionados:

Reduce el tiempo de carga en Wordpress con WP jQuery Lazy Load

David — Mon, 23 Nov 2009 03:52:31 +0000

Uno de los problemas del hosting en el que se aloja ahora este blog es su velocidad de carga. Estos días he estado mirando como mejorarla un poco y uno de los métodos que he mirado de implementar es el lazy loading de imágenes.

El lazy loading de imágenes consiste en cargar en un inicio solamente las imágenes que se ven en pantalla, de modo que las que se queden por debajo de la pantalla solamente se cargarán cuando se efectúe un scroll vertical.
Esto es muy útil sobre todo para sitios con artículos muy largos y que usen varias imágenes.

Existe un plugin jQuery para realizar lazy loading que ha sido adaptado para Wordpress, con lo que la implementación es coser y cantar. La adaptación corre de la mano de Andrew Ng.

Una vez instalado solamente tienes que recargar la página de tu blog para ver como van apareciendo las imágenes, con un efecto muy vistoso de “fade in”, conforme se va haciendo scroll en la página.

A continuación se puede ver algunas capturas hechas sobre Firebug donde se aprecia la reducción de peticiones al servidor en este blog, y eso que esta página no tiene demasiadas imágenes…

Antes de instalar lazy load para Wordpress

Después de instalar lazy load para Wordpress

Como se puede observar el ahorro en el número de peticiones es considerable en este caso.

Artículos relacionados:

String tweetify con jQuery y Mootools

David — Tue, 06 Oct 2009 21:31:16 +0000

Tweetefy es un término inglés perteneciente al argot informático de la Web 2.0 que, en términos de desarrollo web, viene a significar algo así como “Tweetificar, o convertir algo al estilo de Tweeter”. Sirver para convertir un texto plano al estilo de tweeter, esto significa que todos los nombres que empiecen por “@” serán interpretados como usuarios de Tweeter y se enlazará a su perfil. Si alguna palabra es precedida por una “#”, será enlazada a la búsqueda de Tweeter por ese término y si se muestra alguna URL, será sustituida por un enlace a esa URL. Vamos lo que hace Tweeter para mostrar los tweets en su página.

Hace poco escribí un pequeño artículo donde se hablaba sobre como obtener los últimos tweets mediante el Google Feed API y mostrarlos. Para completarlo me hubieran venido muy bien estos snipetts de jQuery y Mootools que sirven para hacer tweetify sobre los strings.

jQuery

El primero es para jQuery y me lo encontré en CSSTricks.

Función tweetify para jQuery


$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'$1')
				.replace(/(^|\s)#(\w+)/g,'$1#$2')
				.replace(/(^|\s)@(\w+)/g,'$1@$2')
		);
	});
	return $(this);
}

Uso de la función tweetify en jQuery


$("p").tweetify();

Mootools

Este código me lo encontré en el blog de David Walsh, y se trata de una ampliación de la clase String de Mootools.

Método tweetify en Mootools


//implement
String.implement({
	tweetify: function() {
		return this.replace(/(https?:\/\/\S+)/gi,'$1').replace(/(^|\s)@(\w+)/g,'$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2');
	}
});

Uso del método tweetify en Mootools


var original = '@davidwalshblog I love your #Mootools LazyLoad plugin!  http://davidwalsh.name/lazyload';
var tweetified = original.tweetify();

Resultado

En los dos casos, después de aplicar tweetify se pasaría de un texto así:


@nosolocodigo Tweet de prueba, mi blog: http://nosolocodigo.com/ #lol

A un texto así:


@seanhood  Tweet de prueba, mi blog:
http://nosolocodigo.com/
#lol

Artículos relacionados:

Panel de login ocultable con jQuery y Mootools

David — Tue, 06 Oct 2009 19:27:31 +0000

En Web-kreation han compartido un panel de login ocultable, muy útil para los sitios donde se disponga de poco espacio en el diseño. Está disponible tanto para Mootools 1.2 como para jQuery.

Puedes ver una demo en Web-kreation o descargar los ficheros para implementarlo. Es muy sencillo de adaptar a nuestras necesidades, y lo mejor es que se encuentra disponible para los dos principales frameworks Javascript.

Algunos ya lo han aprovechado para crear plugins para Wordpress a partir de este código:

Sliding Panel: WordPress Plugin por Justin Tadlock.
SuperSlider-Login por Twincascos.

Artículos relacionados:

Popups elegantes en Joomla usando Mootools

David — Mon, 05 Oct 2009 00:05:56 +0000

Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un “look” más consistente (Cómo usar el datepicker de Joomla).

Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.

Esta línea de código genera el include de la librería Mootools y la librería Squeezebox, encargada de generar la ventana modal. Es importante usar esta función PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librería por diferentes extensiones. Una vez incluidas las librerías basta añadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:

Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución.

Se pueden añadir más opciones al enlace, por ejemplo:


 Popup con iframe a nosolocodigo.com

Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.

Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..

En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.

Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.


  SqueezeBox.loadModal = function(modalUrl,handler,x,y) {
       this.initialize();      

       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      

       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);

   };

Una vez añadida la definición del método loadModal, para usarlo, simplemente hay que llamarlo de la siguiente forma:


window.addEvent('domready', function() {
         SqueezeBox.loadModal('http://www.nosolocodigo.com','iframe',650,450);
 });

Como puedes ver, se puede dejar el template preparado para introducir popups tanto para imágenes como para enlaces externos/internos. Si además deseas programar extensiones en Joomla y quieres más, dispones de toda la potencia del framework Mootools para desarrollar tu aplicación.

Artículos relacionados: