Contenido

Crea un chat como el de gMail/Facebook con jQuery

15 may

+ 9

Si estás buscando un chat para tu aplicación web, no dejes pasar este similar a los implementados en gMail o Facebook. Se trata de una implementación con jQuery y PHP que nos facilitará el trabajo de crearlo desde 0 nosotros mismo. El resultado, lo puedes ver en este ejemplo.[Descargar]

Optimizando el rendimiento de nuestros scritps jQuery

13 may

+ 23

Que soy un fan de jQuery no es una novedad, pero si que es una novedad el que no lo uso de la forma más correcta. Por lo menos así lo ven la gente de ArtzStudio, que nos muestran una serie de indicaciones con el fin de optimizar el uso del CPU el usuario mejorando el rendimiento de nuestros scripts.

1) Siempre desciende desde un #ID

Siempre el selector más rápido y que menos iteraciones produce es la búsqueda por un #id, ya que simplemente lanza un document.getElementById(), lo que al ser nativo nos asegura un tiempo de respuesta mínimo y un mínimo consumo de proceso.

<div id="content">
	<form method="post" action="/">
		<h2>Traffic Light</h2>
		<ul id="traffic_light">
			<li><input type="radio" class="on" name="light" value="red" /> Red</li>
			<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
			<li><input type="radio" class="off" name="light" value="green" /> Green</li>
		</ul>
		<input class="button" id="traffic_button" type="submit" value="Go" />
	</form>
</div>

Con el código anterior, si queremos coger el elemento #traffic_button, siempre nos será más rápido hacerlo directamente que medainte la class del mismo elemento.

// Más lento
var traffic_button = $('#content .button');

// Más rápido
var traffic_button = $('#traffic_button');

Seleccionar varios elementos

Si por contra, necesitamos seleccionar una serie de elementos, siempre que podamos debemos hacerlo partiendo de un #id, de esta forma nos aseguramos una iteración más ajustada.

var traffic_lights = $('#traffic_light input');

Aclaración

Hay que destacar que esto afectará positivamente al rendimiento, aunque el uso de selectores más complejos permiten mejorar la flexibilidad de nuestros scripts. Es importante tener en cuenta esta recomendación, pero no se puede aplicar a todos los casos.

2) Usa tags delante de las clases

Al contrario que con el #id, en el que se innecesario indicar el tag asociado a ese #id (div#page), esto no tiene sentido y además penaliza a lo que comentamos en el punto 1. En la selección de clases, es recomendable indicar el tag del elemento solicitado ya que al hacer uso de document.getElementsByTagName() para localizarlos acotamos previamente los elementos en los que buscar las clases solicitadas. Con el mismo código:

<div id="content">
	<form method="post" action="/">
		<h2>Traffic Light</h2>
		<ul id="traffic_light">
			<li><input type="radio" class="on" name="light" value="red" /> Red</li>
			<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
			<li><input type="radio" class="off" name="light" value="green" /> Green</li>
		</ul>
		<input class="button" id="traffic_button" type="submit" value="Go" />
	</form>
</div>

Si queremos seleccionar el elemento radio con class on, la opción rápida sería la siguiente:

var active_light = $('#traffic_light input.on');

3) Usa la caché de objetos

Coger el hábito de guardar una variable con el valor de un objeto jQuery nos evita realizar una serie de comprobaciones innecesarias y que en scripts pesados pueden suponer un aumento de rendimiento preocupante.

// NO
$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

// SI
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

4) Aprovechate del encadenamiento

El encadenamiento pese a producir un amasijo de código que no contribuye a mejorar la lectura del código hace que nuestro Javascript sea más ligero y puede ayudar a mejorar el rendimiento de nuestros scritps. Veamos el ejemplo anterior:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...})
	.css('border', '3px dashed yellow')
	.css('background-color', 'orange')
	.fadeIn('slow');

5) Usa subqueries siempre que puedas.

Si debemos realizar varias búsquedas sobre un elemento es altamente recomendable realizar un uso intensivo del método find() de jQuery para realizar las búsquedas. Mejoraremos el tiempo de respuesta al evitarnos búsquedas previas ya realizadas.

Usando el código HTML anterior podemos hacer lo siguiente:

var $traffic_light = $('#traffic_light'),
	$active_light = $traffic_light.find('input.on'),
	$inactive_lights = $traffic_light.find('input.off');

6) Limita la manipulación de DOM

Ya vimos hace un tiempo que la manipulación directa del arbol DOM es muy costoso y lento. Por eso el limitar el uso de esta técnica nos favorecerá a la hora de procesar nuestros scripts.

// Más lento
var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++) {
	$mylist.append('<li>' + top_100_list[i] + '</li>');
}

// Más rápido
var top_100_list = [...], // assume this has 100 unique strings
	$mylist = $('#mylist'), // jQuery selects our <ul> element
	top_100_li = ""; // This will store our list items

for (var i=0, l=top_100_list.length; i<l; i++){
	top_100_li += '<li>' + top_100_list[i] + '</li>';
}
$mylist.html(top_100_li);

7) Aprovechate de la delegación de eventos

Mientras no se diga lo contrario los eventos se propagan hasta el elemento padre. Esto tiene una utilidad realmente interesante y nos puede ayudar a evitar tener que realizar busquedas muy concretas.

// Menos eficiente
$('#entryform input).bind('focus', function(){
	$(this).addClass('selected');
}).bind('blur', function(){
	$(this).removeClass('selected');
});

// Más eficiente
$('#entryform).bind('focus', function(e){
	var cell = $(e.target);  // e.target almacena el nodo que ha lanzado el evento.
	cell.addClass('selected');
}).bind('blur', function(e){
	var cell = $(e.target);
	cell.removeClass('selected');
});

8 ) Elimina consultas innecesarias

Prácticamente todos los puntos anteriores, nos dan soluciones para realizar el mínimo de consultas posibles realizando las mismas funciones. Pero este punto ataca más directamente a llamadas innecesarias como por ejemplo el $(document).ready(); que podemos evitar.

// Menos eficiente
$(document).ready(function(){
	mylib.article.init();
});

// Más eficiente
<script type="text/javascript>
mylib.article.init();
</script>
</body>

Como vemos la clave está en lanzar el <script /> justo antes de cerrar el tag </body> lo que nos asegura que todos los elementos que podemos necesitar están ya cargados en el árbol DOM.

9) Piensa en usar $(window)load()

Aunque $(document).ready() es muy útil y potente, no espera a que se carguen todos los elementos (imagenes, flash,..) para ejecutarse. Lo que puede producir un problema ya que está cargando nuestros scripts y además el navegador está trabajando en mostrar por pantalla otros elementos.

En estos casos, quizas nos sería conveniente usar $(window).load().

$(window).load(function(){
...
});

Esta función, esperará a cargar toda la página (imagenes, flash,…) incluidos, para lanzar nuestros scripts.

10) Comprime tu código

Este punto es discutible ya que al comprimir tu código estás haciendo que el navegador del usuario lo haya de descomprimir, lo que puede incrementar el rendimiento requerido frente a la velocidad de carga del script. Es interesnate tener en cuenta los factores que intervienen para decidir que acción realizar.

11) Aprenderte la librería

A estas alturas seguro que ya la conoces, pero no está de más tener a mano alguna Cheat Sheet(.pdf) para evitar caer en soluciones poco optimizadas.

12) Usa html() con cabeza

Como nos recuenda Joseanpg en los comentarios, el uso de html() nos penaliza sustancialmente el rendimiento de nuestros scripts. jQuery, al contrario de MooTools y Prototype (no he mirado los demás) no injecta el código HTML mediante innerHTML, sinó que construye los elementos DOM y los añade al nodo indicado.

Este proceso es más lento que usar un simple innerHTML aunque nos puede provocar problemas en insercciones en las que necesitemos refrescar el arbol DOM.

En la mayoría de casos, la mejor opción es usar innerHTML en nuestros scripts ya que añaden elementos perfectamente a nuestro arbol DOM y es realmente rápido. Para todo lo demás, html().

jPlayer el reproductor de MP3 personalizable por CSS

7 may

+ 21

jPlayer es un plugin para jQuery que nos permite crear un reproductor de MP3 que irá incrustado en nuestra página web, la gracia de este reproductor es que mediante CSS podemos personalizarlo y hacer que se integre perfectamente en nuestra aplicación web.

jplayer
(Ver Imagen)

Podeis ver una serie de demos aquí y descargar el plugin desde aqui.

Simulando la gravedad con jQuery

5 may

+ 2

Impresionante tutorial para consegir simular el efecto de la gravedad en nuestros elementos HTML usando jQuery. [Demo][Descargar]

myTinyTodoList, completa y sencilla todolist en PHP

3 may

+ 4

Max Pozdeev publica este pequeño script que nos permite montar una TODO list (Lista de tareas) en PHP y jQuery. Se trata de una lista bastante completa y sencilla de usar que a más de uno nos ayudaría a tener administradas las tareas pendientes.[Demo][Descargar]

WordPress 2.8, integrará jCrop de jQuery

10 abr

+ 4

WPengineer.com anucia que WordPress 2.8 integrará jCrop. Este plugin de jQuery nos permitirá recortar dinámicamente las imagenes que subamos a nuestro servidor. Una forma muy cómoda de editar las imagenes previamente a ser posteadas.

Resalta los resultados de búsqueda en tu WordPress con JQuery

10 abr

+ 2

En WeblogToolsCollection publican un artículo con el que nos muestran como realzar los resultados de nuestras búsquedas mediante el uso de un pequeño script con jQuery. Simplemente tendremos que realizar dos pasos muy sencillos para que nuestro theme ayude al usuario a encontrar esa palabra que está buscando.

1. Añadimos jQuery y la palabra a buscar

function hls_set_query() {
  $query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

Añadiendo este código al fichero functions.php de nuestro theme dispondremos de jQuery en nuestro theme, y además tendremos una variable javascript (hls_query) con el valor de la búsqueda que jQuery deberá encontrar en el texto y resaltar.

2. Añadimos el script a nuestro header.php

 <style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=\""+ class +"\">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    $("#post-area").highlight(hls_query, 1, "hls");
  });
  </script>

Este código se encargará de buscar en nuestro contenido, concretamente en el id #post-area (hay que reemplazarlo por nuestro el contenedor de nuestros posts), y resaltará el texto buscado con la clase CSS .hls que está definida al inicio del código.

Importante

  1. Reemplaza #post-area por el valor del contenedor de posts.
  2. Cambia el color del resaltado reemplazando el valor (#D3E18A) por uno que se ajuste a tu diseño.

Alternativa

Si quieres resaltar los resultados sin necesidad de usar javascript, puedes usar WP-Resalta Busqueda.

Subir múltiples ficheros con jQuery

3 abr

+ 6

La funcionalidad de subir múltiples ficheros mediante Javascript no es nueva incluso vimos que algunos navegadores más modernos lo están implementando ya. Pero este plugin de jQuery permite extender las posibilidades de esta funcionalidad condicionado las capacidades del <input /> encargado de subir los ficheros.

// Multiupload
<input type="file" class="multi"/>
// Solo 2 ficheros
<input type="file" class="multi" maxlength="2"/>
// Solo ficheros .GIF y .JPG (requiere validación en el servidor)
<input type="file" class="multi" accept="gif|jpg"/>

Tan sencillo como indicarlo mediante el uso de estos atributos o complicandonos más la vida con eventos o añadiendo un estilo propio a la lista de ficheros:

$(function(){
 $('.multi').MultiFile({
  STRING: {
   file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>',
   remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
  }
 });
});

Muestra en listado usando la etique <em /> para mostrar el nombre del fichero en cursiva y se le asigna una imagen al botón de borrar.
Otra característica interesante a destacar es la posibilidad de idiomatizar la salida, haciendo que sea muy sencillo establecer las etiquetas que el usuario vea.

//HTML
<input type="file" class="multi-es" />
// Opciones
$(function(){
  $('.multi-es').MultiFile({
   accept:'gif|jpg', max:3, STRING: {
    remove:'Remover',
    selected:'Seleccionado: $file',
    denied:'El tipo del archivo $ext es inválido',
    duplicate:'Archivo ya seleccionado:\n$file!'
   }
  });
 });

[Descargar][Demo]

Juega al Blackjack Online con jQuery

3 abr

+ 3

En jQuery Love, que como su original nombre indica es un blog de amantes del jQuery y empiezan fuerte, ya que en su primer post nos presentan jQuery Blackjack, el famoso juego de cartas convertido en sentencias Javascript para que puedas jugar online y de paso, mostrar el potencial de Javascript.

8 plugins jQuery para explotar las API’s de Google

25 mar

+ 4

Google siempre ha ofrecido interacción con sus servicios mediante unas potentes API’s que nos permite disponer de información que este gigante almacena y trata cada día. Con jQuery usarlas puede ser más sencillo, por eso estos plugins pueden ayudarnos a explotar las API’s de Google:

  1. jGoogleGoogle Image Search.
  2. gFeed, Google Feed API
  3. jgChart, Google Charts API
  4. jquery-GoogleMaps, Google Maps
  5. jquery-offline, Google Gears
  6. jquery-googleanalytics, Google Analytics.
  7. jquery-spellcheck, Google SpellCheck
  8. jquery-traslate, Google Traslate.