¿Para qué sirve un plugin de jQuery?

Antes que nada, tenemos que saber para qué nos sirve hacer un plugin y por qué tiene ventajas sobre hacer un par de funciones, por ejemplo. Lo primero que debemos recordar es que plug in significa conectar, es decir, haremos algo que luego podremos conectar a distintos sitios.

Teniendo esto en mente, nos podemos imaginar el plugin como una caja negra, que hará algo y nos devolverá el resultado (o realizará una acción simplemente).

Por tanto un plugin tendrá la posibilidad de aceptar una entrada y producir un resultado, y esta “caja” que se ve en el esquema se podrá llevar a cualquier proyecto, sin ninguna modificación, aceptando allí otra salida. Esa es la clave de los plugin, que son reutilizables en cualquier sitio, sin tener que preocuparnos por cómo está hecho ni siquiera, simplemente “conectándolo” e invocándolo con datos de entrada.

Además, la invocación de este plugin será la misma que hacemos cuando usamos cualquier método de jQuery:

$('#caja').acortar( ); //acortar será el nombre del plugin

Nuestro primer plugin

Qué vamos a hacer

Este plugin reducirá el texto en una caja, y con un click en un enlace lo expandirá. Así de simple, aunque como veremos después la implementación va a ser un pelín más larga de lo que debería para ser nuestro primer plugin, pero sin problema, poco a poco lo haremos. Si te quedan dudas sobre qué vamos a hacer tienes un enlace al demo aquí y al final del post.

Primeros pasos al construir un plugin

Cuando se construye un plugin hay una serie de pasos generales, que se hacen para todos los plugin que construyamos y que son los siguientes:

Declaración del plugin

El primer paso al hacer un plugin es declararlo, extender la serie de métodos que tiene jQuery originalmente. Para ello escribimos lo siguiente:

1
2
3
4
5
6

(function($){
  $.fn.acortar = function() {
     return this.each(function() {
     });
  };
})(jQuery);

Línea 1. Pasamos a nuestra declaración “jQuery”, el objeto, de tal forma que lo podemos usar como $, sin que interfiera con otras librerías.

Línea 2. Extendemos el objeto jQuery con nuevo método llamado acortar.

Línea 3. Recorremos todos los objetos que se le pasen a nuestro plugin. Recordemos que un selector puede seleccionar varios elementos, como todos los h1, por ejemplo. Aquí los recorremos y aplicamos la función que hagamos en nuestro plugin a cada uno de ellos.

Esto lo vamos a tener que hacer para todos los plugins que programemos, así que intenta entederlo bien. Lógicamente, cambiaremos el nombre dependiendo del plugin, en este caso lo llamaremos “acortar”.

Parámetros que aceptaremos como opciones del plugin

Casi todos los plugin tienen opciones, si estamos realizando un plugin que acorte el texto de una caja para que no se vea tan grande algunos parámetros que tenemos que permitir configurar al usuario pueden ser los siguientes:

• nCaracteres: Número de caracteres a mostrar. Ocultaremos el resto.
• nExtra: Para evitar acortar un texto sólo por unos caracteres. El número exacto es este parámetro.
• textoSuspense: String que se mostrará para hacer notar que hay más texto.
• textoContraer: Texto mostrado como link para contraer.
• linkExpandir: Texto mostrado como link para expandir

Así el usuario podrá personalizar el plugin sin tener que preocuparse de cómo está hecho por dentro. Empecemos por procesar la entrada:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                   
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
    return this.each(function() {
    });
  };
})(jQuery);

Por tanto cuando tengamos que acceder a uno de los parámetros de entrada haremos, por ejemplo, opciones.nExtra, así de simple.

Copiar el objeto que nos pasan a variable local

Cuando nos metemos en el bucle each, que puedes ver en la última sección de código, estamos procesando todos los elementos que han sido seleccionados al llamar el plugin. En ese preciso momento, cuando empezamos el bucle con un objeto, el objeto seleccionado está en la palabra reservada this, así que debemos guardarlo para referirnos siempre a él y no liarla cuando cambiemos el contexto (scope).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($){
  $.fn.acortar = function(opciones) {
 
	var parametrosPorDefecto = {
	  nCaracteres: 300,
	  nExtra: 20,
	  textoSuspense: '...',
	  textoContraer: 'Contrae',
	  linkExpandir: 'Click para Expandir'
	};                    
 
    var opciones = $.extend(parametrosPorDefecto, opciones);
 
	return this.each(function() {         
	  objeto = $(this);  
    });
  };
})(jQuery);

Implementando nuestro plugin

Bien, ya tenemos lo que queremos hacer, qué vamos a permitirle al usuario y cómo declarar el plugin. Empecemos ahora a implementar la funcionalidad en sí de éste. Esto por supuesto es propio de cada uno, así que intentaré no pararme demasiado en esta parte, porque, al fin y al cabo, ya sabemos crear un plugin genérico y la dificultad del resto dependerá de lo que queramos hacer.

Procesar texto

En este punto necesitamos ver si realmente tenemos que acortar el texto porque sobrepasa lo permitido (dado por el parámetro nCaracteres) y si es así ejecutamos toda la funcionalidad del plugin. A partir de aquí consideremos que estamos dentro del bucle que hemos mencionado antes (a partir de la línea 12 del último código). Veremos hasta los puntos suspensivos, dónde empezaremos en el siguiente punto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var texto = objeto.html();
var longitudPermitida = opciones.nCaracteres + opciones.nExtra;
 
//Si tenemos un texto más corto no tenemos que hacer nada
if (texto.length > longitudPermitida) {
  var lugarCorte = texto.indexOf(' ', opciones.nCaracteres);
  if (lugarCorte != -1) {
    //Sacamos el texto hasta el lugar de corte
    var str1 = texto.substring(0,lugarCorte); 
 
	//Sacamos el resto del texto, que vamos a esconder
  	var str2 = texto.substring(lugarCorte,texto.length - 1);
 
	//Por último insertamos el enlace para ver más texto
	objeto.html(str1 + '<a href="#" class="textoSuspense">' + 
				opciones.textoSuspense + '</a>' + 
				'<span class="oculto">' + str2 + '</span>');
 
	//Ocultamos el resto con el método hide de jQuery
	$.find('.oculto').hide('fast'); 
 
	//Enlace para expandir o contraer el texto
    objeto.append(
	  '<div class="clearboth">' +
	    '<a href="#" class="anchorTexto">' + opciones.linkExpandir + '</a>' +
	  '</div>'
    );                                                                                      
//...
}

Ahora, sigamos en el siguiente apartado por donde están los puntos suspensivos (ya queda poco).

Manejando el evento onClick para ampliar o reducir el texto

Lo que falta por hacer es manejar que cuando se le da al link para ver más efectivamente se vea el resto del texto, además de que el texto se oculte. Hagamos esto entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// ... Lo anterior ...
 
var ControlLink = $('.anchorTexto', objeto);
var restoTexto = $('.oculto', objeto);
var suspense = $('.textoSuspense', objeto);
 
ControlLink.click(function() {
  if(ControlLink.text() == opciones.linkExpandir) {
    restoTexto.show('normal');
    ControlLink.text(opciones.textoContraer);
    suspense.css("display", "none");
  } else {
    restoTexto.hide('normal');
    ControlLink.text(opciones.linkExpandir);
    suspense.css("display", "inline");
  }
  return false;
}); 
 
// ... Cierre de llaves abiertas antes....

En esta última parte vemos si tenemos el texto oculto o no. Y si está abierto cambiamos el texto al hacer click y lo ocultamos. Y viceveras si es al revés. Recuerda que estamos controlando el evento click en el enlace para expandir o contraer el texto, simplemento eso.

Recapitulación

Y eso es todo, hemos creado nuestro plugin que realmente funciona haciendo algo y además es configurable hasta cierto punto. Para llamarlo (puedes ver el código en el ejemplo) haremos lo siguiente, como hemos dicho al principio:

<script type="text/javascript" language="Javascript">
  $('#1').acortar({
  	nCaracteres: 300,
  	nExtra: 20,
  	textoSuspense: '...',
  	textoContraer: 'Contrae',
  	linkExpandir: 'Click para Expandir'
  });
</script>

Estos son los parámetros por defecto, por tanto si se los pasamos no pasa nada, pero es sólo un ejemplo, puedes pasarle otros.

Conclusiones

Por último destacar que lo más importante es que te quedes con cómo se construye cualquier plugin, más que con la implementación en concreto que hemos realizado. Aquí dejo los sitios que han ayudado a este post, sobre todo el de Jeremy Martin, de donde he sacado la idea del plugin y lo he modificada y separado para que sea más entendible.

• Blog de Jeremy Martin | Plugin original.
• Explicación del Core de jQuery | Documentación oficial.
• Autor de la “caja” | DevianArt

Javascript, como quizá ya he dicho alguna vez, es el lenguaje con mayor relación de uso y desconocimiento del mismo, y cuando falla, la gente se sorprende, a pesar de que hayan empezado a programar en JavaScript sin tener ni idea del asunto.

Aquí vemos una serie de buenas prácticas traidas de Google, en su mayoría, que nos aclararán muchas ideas y nos ayudarán a mejorar nuestro código.

Buenas prácticas

Uso de la palabra var

A pesar de que se puede declarar una variable dentro de una función sin var, no es recomendable, porque no está claro en que contexto podemos acceder a ella. De tal forma, que no hay colisiones de nombres entre diferentes variables.

Uso de punto y coma

Quizá no sepas que JavaScript tiene por defecto lo que se llama implicit insertion, esto significa que por defecto inserta punto y coma el solito antes de cada salto de línea. Esto, que en principio podría parecer bueno y cómodo se convierte en un auténtico dolor de cabeza en ciertos casos, como este:

1
2
3
4
5
6
7

MyClass.prototype.myMethod = function() {
  return 42;
} // Sin punto y coma
 
(function() {
  // Inicialización de variables aquí
})();

Declaramos un método (no nos paremos a lo de prototype, ya lo explicaré en otro post) y después usamos una función anónima, pues bien, a la función primera se le pasa la segunda como parámetro, ¿intuitivo al máximo verdad? Pues para evitarlo sólo tenemos que tener en mente que siempre tenemos que usar los puntos y comas cuando acabemos una línea.

Usar objetos para tipos primitivos

Si queremos tener una variable de tipo booleana, o de un tipo primitivo hacer esto puede liar bastante las cosas:

1
2
3
4

var x = new Boolean(false);
if (x) {
  alert('hi');
}

Intuitivamente pensaríamos que no se va a imprimir nada, pero lo cierto es que si ejecutas el código, verás el alert con el texto ‘hi’.

Por tanto cuando queramos iniciar una variable de tipo primitivo, como “Boolean”, debemos usar la siguiente sintaxis:

1
2
3
4

var x = Boolean(0);
if (x) {
  alert('hi');  
}

Y ahora no veremos el ‘hi’. De hecho si usamos el typeof para ver el tipo de datos que tenemos podemos comprobar que lo que estábamos creando antes no era un booleano, sino un objeto.

1
2

typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';

Ambas son true, así que tienes que tener claro cuando estás haciendo una variable de tipo objeto y cuando del tipo primitivo boolean.

Los estándares se deben imponer

Usa funciones o métodos estándar antes que otros que no lo son, porque favoreceran la compatibilidad entre navegadores y tu código se podrá integrar en otros más fácilmente, por ejemplo es preferible usar string.charAt(3) que string[3].

Reglas de Estilo

En todo lenguaje hay una serie de buenas prácticas, pero también un cierto estilo que nos ayuda a poder entender mejor el código y a adquirir una serie de reglas que hacen que el código sea igual en estilos en cualquier lugar.

Nombres

Siempre todo junto y cuando son varias palabras pues con mayúsculas a partir de la segunda.

• Funciones: estoEsUnaFuncion
• Variables: estoEsUnaVariable
• Clases: estoEsUnaClase
• Enumerados: enumeradoTres
• Métodos: estoEsUnMetodo
• Constantes: ESTO_ES_UNA_CONSTANTE

Strings

Preferiblemente con ” (comillas simples) en vez con “” (comillas dobles), sobre todo de cara a que cuando escribimos HTML en un string, no tenemos que “escapar” las comillas.

Paréntesis

Solo cuando hagan falta, por ejemplo, no uses paréntesis en operadores como delete, typeof o void, o después de palabras reservadas como return, throw, case o new.

Se consciente de lo que es true o false

Uno de tantos problemas tontos con los que te encuentras cuando programas en JavaScript es asumir que ciertas cosas son verdaderas o falsas. Aquí tienes una lista:

1
2
3
4
5
6
7
8

null //false
undefined  //false
'' string vacío //false
0 como número //false
 
'0' cero como string  //true
[] array vacío  //true
{} objeto vacío  //true

Comenta con estilo

Cuando se comenta el código además de hacer la razón por la que hacemos algo tenemos la posibilidad de generar documentación a la vez de manera sencilla, siguiendo una serie de reglas. Google lo hace así, y muchos desarrolladores lo recomiendan, en concreto podemos usar JSDoc, y si todos lo hiciéramos sería más sencillo leer el código de otros y entenderlo, así que adelante con ello.

Más información

Tienes más consejos y buenas prácticas aquí, hay muchos más, solo he destacado los más importantes y relativamente fáciles de explicar para no irme mucho del tema.

Los microformatos son una de tantas formas que existen de dar un significado para las personas a texto plano. Normalmente se usa con HTML/XHTML, ampliando la información y dotándola de sentido para nosotros. A veces se abrevia como μF.

Los usos típicos de los microformatos son coordenadas geográficas, eventos de un calendario, información de contacto…etc.

Los microformatos surgieron como una necesidad para hacer fácilmente reconocibles ciertos datos en Internet. Según fue creciendo la comunidad que usaba microformatos, CommerceNet (una organización que promueve el comercio electrónico) apoyó la iniciativa y contribuyó a fundar la página microformats.org, que es a dia de hoy la referencia para trabajar con microformatos.

¿Por qué son importantes?

Probablemente hayas oido hablar de la web semántica, que básicamente consiste en hacer que el texto plano (HTML) que forma Internet se convierta en contenido entendible por buscadores y personas respecto a lo que representan, como una dirección postal, por ejemplo. Tiene mucha más historia, que se sale del objetivo de este pequeño tutorial de introducción a los microformatos, pero la idea es esa.

Pues bien, los microformatos son parte de ese movimiento que facilitaría el acceso a la información por parte de la gente interesada en ella. Y lo cierto es que a pesar de lo que se pueda pensar se usan, y no han quedado como una mera idea de futuro, de hecho el 12 de Mayo de 2009 Google anunció que parsearía los microformatos hCard, HReview y hProduct (puedes ver el anuncion aquí). Este es un ejemplo del uso de microformatos que hace Google para mostrar los resultados de las búsquedas:

Además otras empresas como BBC también se han subido al tren de la web semántica y usan microformatos.

Algunos ejemplos

Veamos algunos ejemplos de código HTML usando microformatos. En este primer caso primero vemos como sería el HTML sin microformatos:

1

Lugar: 45.32, -10.05

Y usándolos:

1
2
3
4
5

Lugar: 
<span class="geo">
	<span class="latitude">45.32</span>,
	<span class="longitude">-10.05</span>
</span>

Como se puede ver es un poco más costoso de escribir, pero bastante básico de entender, tanto para nosotros, como para los buscadores.

Aquí vemos otro ejemplo más, esta vez con una tarjeta (datos de contacto), este microformato se llama hCard. Sin microformatos:

1
2
3
4
5
6

 <div>
   <p>José</p>
   <p>Empresa Nueva</p>
   <p>604-555-1234</p>
   <a href="http://ejemplo.com/">http://ejemplo.com/</a>
 </div>

Con microformatos quedaría así:

1
2
3
4
5
6

 <div class="vcard">
   <div class="fn">José</div>
   <div class="org">Empresa Nueva</div>
   <div class="tel">604-555-1234</div>
   <a class="url" href="http://ejemplo.com/">http://ejemplo.com/</a>
 </div>

Por supuesto los ejemplos sin microformatos son subjetivos, se pueden representar de mil maneras.

Documentación

Y por si quieres saber más sobre los microformatos aquí tienes unos enlaces muy útiles:

• Página oficial de los microformatos (incluye generador de html con distintos microformatos)
• Artículo de la wikipedia.
• Artículo de microformatos centrado en SEO

El efecto spotlight, literalmente efecto foco, consiste en un sencillo truco para captar toda la atención del usuario en un elemento de la página en la que estamos. Es un efecto muy utilizado a día de hoy, y gran parte de la culpa la tiene el hecho de que es relativamente sencillo de hacer como vamos a ver ahora mismo. Puedes ver el demo al final del post.

Maquetado. HTML

Para el HTML no nos compliquemos demasiado, simplemente usaremos una serie de imágenes cuando al pasar el ratón por encima se centre toda la atención del usuario en aquella imagen donde está situado.

Para ello, tendremos el siguiente código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="listado">
	<li>
		<img src="img/img1.jpg" title="Imagen 1" alt="Imagen 1"/>
	</li>
	<li>
		<img src="img/img2.jpg" title="Imagen 2" alt="Imagen 2"/>
	</li>
	<li>
		<img src="img/img3.jpg" title="Imagen 3" alt="Imagen 3"/>
	</li>
	<li>
		<img src="img/img4.jpg" title="Imagen 4" alt="Imagen 4"/>
	</li>
	<li>
		<img src="img/img5.jpg" title="Imagen 5" alt="Imagen 5"/>
	</li>
	<li>
		<img src="img/img6.jpg" title="Imagen 6" alt="Imagen 6"/>
	</li>
</ul>

Cómo se puede ver el maquetado es muy simple, sólo un listado con imágenes en cada elemento. Pasemos al siguiente paso.

Estilos. CSS

Para que esto se empiece a parecer a lo que queremos al final, necesitamos darle estilos, de tal forma que centremos el listado, y hagamos que todas las imágenes queden juntas. Para ello usamos el siguiente CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

* {
	margin: 0px;
	padding: 0px;
}
 
body {
	font-family:arial;
	margin-top:70px;
}
 
img {border:none;}
 
#listado {
	width:612px;
	margin:0 auto;
}
 
#listado li {
	display:block;
	width:200px;
	height:200px;
	border:2px solid #666;	
	float:left;
	position:relative;
}
 
#listado .caption {	
	background:none repeat scroll 0 0 #000;
	display:none;
	left:2px;
	padding:3px;
	position:absolute;
	bottom:0px;
	width:190px;
	-moz-border-radius:5px;
	-wekbit-border-radius:5px;
	color:#3c9dd7;
}
 
.clear {
	clear:both;	
}
 
.effect {
	box-shadow: 0 0 10px #444;	
	-moz-box-shadow: 0 0 10px #444;	
	-webkit-box-shadow: 0 0 10px #444;	
}

Cabe destacar el uso de dos clases, caption y effect. La clase caption es la que tendrá los elementos span, visibles cuando se pase el ratón por encima. La clase effect, por otra parte, es simplemente la aplicación de la sombra para cuando el ratón está encima, que se podría eliminar y el efecto que intentamos conseguir no se vería afectado.

Funcionamiento. jQuery

Por último tenemos que añadir la parte de funcionamiento usando jQuery, que cuando pasemos el ratón por encima el resto de elementos casi desaparezcan, estableciendo su opacidad (opacity) a 0.1. La clave para hacer esto es el uso de un método: siblings.

El método siblings

El significado es importante para ilustrar mejor lo que hace. Sibling es una palabra formal en inglés que significa hermano (como brother). Se le puede pasar un selector de manera opcional.

Dado un conjunto de elementos, el método .siblings() devuelve el conjunto de todos los ‘hermanos’ de este elemento.

Veamos el ejemplo que tenemos en la página de documentación oficial.

1
2
3
4
5
6
7

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

1

$('li.third-item').siblings().css('background-color', 'red');

Este código establecerá todos los elementos del listado con el fondo rojo menos el tercero. Así que como puedes ver es muy útil para hacer casi desaparecer todos los elementos menos en el que tenemos el puntero.

Código jQuery

Finalmente tenemos el código jQuery que establecerá la clase necesaria cuando se produzca el evento hover y la quitará cuando no, además, mostrará y ocultará el “title” cuando corresponda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$('#listado li').each(function () {
	title = $(this).children().attr('title');
	$(this).append('<span class="caption">' + title + '</span>');	
	$(this).attr('title','');
	$(this).children('.caption').hide();
});
 
$('#listado li').hover(
	function () {
		$(this).siblings().stop(true, true).css({'opacity': '0.1'});	
		$(this).css({'opacity': '1.0'}).addClass('effect');
		$(this).children('.caption').show();	
	},
	function () {
		$(this).children('.caption').hide();		
	}
);
 
$('#listado').mouseleave(function () {
	$(this).children().fadeTo('100', '1.0').removeClass('effect');		
});

Edito: Para impedir tener problemas con las animaciones en cola de jQuery (error del que me ha avisado jävi), tenemos que añadir el método stop, de tal forma que si no se ha acabado el fadeTo, para hacer el efecto de menos a más opacidad, no interrumpa hacer el resto de elementos casi invisibles. Esto pasaba cuando se salía rápido del elemento y se volvía a entrar con el ratón, pero ya está solucionado.

Conclusiones

Este tutorial es bastante sencillo, pero puede ser aplicado a infinidad de cosas, la idea de la transparencia a 0.1 de todos los elementos menos uno para destacarlo o también se puede usar con divs en vez con elementos de un listado (li), cambiando el CSS, claro.

Normalmente se usa para programar ciertas tareas repetitivas, como puede ser una copia de respaldo de una base de datos o envíos de correos a usuarios.

¿Cómo se puede usar?

Pues es bien sencillo, quizá hay un detalle importante y es que debe ejecutarse en el servidor donde tengamos alojada nuestra página. Además debemos tener claro que por lo que desempeña es un demon, que se está siempre ejecutando, vamos.

Normalmente está iniciado por defecto, y se estará ejecutando si estás usando un sistema Unix/Linux, (sí, también se incluye Mac, al ser Unix). De todas formas para saber si se está ejecutando escribe lo siguiente en la línea de comandos:

1

ps aux | grep crond

Y debería mostrar una línea, con crond, si no la ves, tienes que añadir crond al comienzo de la ejecución, para que se ejecute siempre que se encienda el ordenador, esto depende del sistema operativo, pero normalmente ya lo tendrás funcionando, así que no te preocupes.

Edición del crontab

Crontab es el nombre que se le da a un archivo donde se especifica de una forma que ahora veremos los programas / scripts que se van a ejecutar y cada cuánto tiempo. Para editarlo solo tienes que ejecutar:

1

crontab -e

La sintaxis es la siguiente:

1
2

minutos  horas  día_del_mes  mes   dia_de_la_semana <comando>
(0-59)   (0-23)   (1-31)    (1-12)      (0-6)

Hay que tener en cuenta que la semana empieza en Domingo, así que 0 en el día de la semana será cada Domingo. De todas formas veamos algún ejemplo para que quede claro:

Cada día a una hora determinada (23:15)

1

15 23 * * * <comando>

Cada mes (día 25) a una hora determinada (20:00)

1

0 20 25 * * <comando>

Los viernes a las 15:00

1

0 15 * * 5 <comando>

Valores predefinidos

En esta tabla de la wikipedia se puede ver la serie de valores predefinidos para facilitarnos un poco la vida.

Cada vez que reiniciemos el servidor

1

@reboot <comando>

Y podríamos hacer muchos más, lo que hay que tener claro es una regla sencilla, lo que se quede con asterisco, se hará cada vez que el campo especifica, es decir si dejamos con asterisco los minutos se hará todos los minutos, si dejamos las horas se hará todas las horas.

Por supuesto los días del mes y de la semana entran en conflicto, es decir que si especificas uno, pues el asterisco del otro no se toma como “todos”, por ejemplo:

1

0 10 20 2 0 <comando>

Esto se ejecutará Los días 20 de Febrero a las 10:00 que sean Domingos, es decir que no será todo los años, solo los años en que el 20 de Febrero caiga en Domingo. Así que hay que tener cuidado.

Uso con script de PHP

Veo necesario mostar un ejemplo con PHP, que hará que se ejecute cada cierto tiempo teniendo la salida en otro archivo (log) para controlar lo que pasa. En primer lugar editamos un archivo php (ejemplo.php):

1
2
3
4
5
6

<?php
$fecha = date('d \d\e\l m \d\e Y \a \l\a\s H:i');
echo "Ejecutado el " . $fecha . "\n";	
 
//Salida: Ejecutado el 01 del 07 de 2010 a las 16:35
?>

Como puedes ver depende de la hora y fecha en la que estemos así para cada minuto tendremos una salida distinta. Es sólo un ejemplo, pero podría ser un backup de una base de datos o el envío de 500 correos con un mensaje de salida.

Ahora, para ejecutarlo, tenemos que tener claro que los scripts de PHP no son ejecutables si PHP está en modo CGI en el servidor, que suele pasar, por tanto tenemos que buscar el comando que los ejecuta, para ello en el terminal ponemos:

1

which php

En mi caso es /usr/bin/php, así que el comando a ejecutar por el cron será:

1

/usr/bin/php /ruta/a/script/ejemplo.php

Además queremos tener la salida en un archivo log:

1

/usr/bin/php /ruta/a/script/ejemplo.php >> /ruta/a/logs/log.txt

Por tanto cuando ejecutando esto en el terminal a mano cada minuto obtenemos un archivo con algo como:

1
2
3
4

Ejecutado el 01 del 07 de 2010 a las 16:57
Ejecutado el 01 del 07 de 2010 a las 16:58
Ejecutado el 01 del 07 de 2010 a las 16:59
Ejecutado el 01 del 07 de 2010 a las 17:00

Pues bien una vez que tenemos nuestro comando funcionando lo único que tenemos que hacer es editar el crontab para que se ejecute el solo. Para ello ejecutamos crontab -e, como hemos dicho antes y llegaremos a un editor de texto en terminal, allí pondremos:

1
2
3
4

# esto es un comentario
 
# script de prueba
15 15 * * * /usr/bin/php /ruta/a/script/ejemplo.php >> /ruta/a/logs/log.txt

Esto se ejecutará todos los días a las 15:15, así que el log se irá llenando poco a poco, una línea por día.

Interfaces de Usuario para Cron

Además de editar el archivo a mano hay una serie de interfaces, normalmente de las propias compañías de Hosting, que facilitan la tarea con un menú. Pero no siempre tenemos estas herramientas así que es mejor aprenderse bien la sintaxis y si luego las tenemos pues mejor. Esta imagen corresponde al panel que hay en Dreamhost.

Conclusión

Cron es una herramienta muy útil, como has podido ver, y además se usa a día de hoy en casi todos los servidores del mundo para hacer tareas de mantenimiento o de la propia aplicación web que está funcionando allí. Aquí dejo un par de enlaces para más información:

• Artículo de la wikipedia (muy completo).
• Manual de Cron.

Probablemente hayas oído alguna vez de GET y POST sin entender muy bien lo que es. Intentemos aclarar eso antes de entrar en sus diferencias.

Tanto GET como POST son métodos de HTTP. Esto no es algo que es así y ya, sino que se propusieron, fueron aceptados y a día de hoy los utilizamos constántemente, podría haber sido de otra forma, porque, como cualquier protocolo (tanto de la vida como la informática) es sólo un convenio. Para entender un poco más mira el siguiente esquema.

Como se puede ver el usuario hace click en un enlace y Firefox, o el navegador que sea, traduce esa acción en la petición de la página al servidor. Pues bien, en esa petición se utiliza GET. Así que es simplemente una manera de decirle al servidor que haga algo, en este caso que le de index.html para mostrárselo al usuario.

Método GET

Como acabamos de ver GET pide un recurso a un servidor y éste se lo devuelve si lo tiene y puede, o si no da un mensaje de error. No es la intención del tutorial meterse con los mensajes de error, pero como repuesta el GET el servidor da un mensaje 200 si ha ido bien, y si no encuentra lo que pides da un 404, si no sabías de donde venía lo del famoso error 404 aquí lo tienes, es sólo una respuesta a GET.

Lo cierto es que no necesitamos hacer a mano una petición GET, por lo que no tenemos que sabernos su sintaxis, ya lo hacen los navegadores por nosotros, pero para que veas lo sencillo que puede ser mira el siguiente código:

1
2

	GET /index.html HTTP/1.1
	Host: www.ejemplo.com

Lo de después de HTTP es la versión del protocolo, pero básicamente esto le llega al servidor y “entiende” que tiene que devolver index.html. Como puedes imaginar esto no es lo único que mandamos cuando pedimos una página, también mandamos muchos de nuestros datos, desde la codificación de caracteres aceptada, hasta que navegador y sistema operativo usamos. De esa forma el servidor puede hacer una cosa u otra (además de saber a quién tiene que responder, claro). Hay 30 cabeceras (de solicitud) que acepta HTTP, estas son algunas de ellas:

• Accept. Tipos de datos compatibles, como text/plain.
• Accept-Charset. Codificación de caracteres que acepta el navegador.
• Accept-Encoding. Que codificaciones de archivos acepta, como gzip.
• Cookie. Envía la cookie si ha sido preestablecida antes por el servidor.
• Host. A dónde se hace la petición, como www.ejemplo.com.
• User-Agent. Aquí se envía el navegador, la versión y el sistema operativo.
• Date. Fecha y hora en la que se produce la petición.

Además hay otras cabeceras de respuesta, que el servidor da al cliente, como Server, que indica que servidor es o Set-Cookie, que contiene una cookie para que el navegador la guarde.

En principio se considera que GET es un método seguro, puesto que no afecta al servidor en el sentido de que no cambia nada que tenga, simplemente le pide un recurso y éste se lo da o no. Esa es la principal razón por la que los robots de Google y otros buscadores utilizan este método para analizar Internet.

Método POST

Este método se utiliza mucho también, pero no de la misma forma. Cuando a un servidor le llega un mensaje de POST, analiza el mensaje porque el cliente le ha enviado datos, no solo la URL de lo que quiere más las cabeceras.

Este método se utiliza para subir un archivo a una página, o enviar ciertos datos a través de un formulario, aunque de esto discuteremos después.

Lo importante que nos debe quedar claro, es que si bien GET está pensado para solicitar un recurso, POST está pensado para mandar “algo” al servidor aparte de decirle lo que queremos.

Además, tenemos que pensar en que si el servidor está bien programado el resultado de hacer una petición POST cambiará su estado, la palabra técnica es que no es idempotente, es decir, que si se hace otra vez, el servidor va a cambiar de alguna forma. Para que quede más claro echa un vistazo al siguiente esquema:

Este esquema representa lo que pasa, de manera simplificada, cuando un usuario hace un comentario en un blog con WordPress. Este comentario es enviado a través del método POST y cuando llega el servidor lo almacena en la base de datos. Si se enviara de nuevo el comentario esto afectaría a la base de datos, que tendria otro comentario más.

Pero entonces…¿GET o POST?

Cuando la operación es idempotente -> GET

Como hemos explicado antes idempotente significa que a pesar de que se repita la operación no cambia el estado del servidor.

Por ejemplo: entrar a google.com y al rato entrar de nuevo no cambia nada en los servidores de Google. En cambio si nos registramos si cambia, puesto que en alguna parte de su base de datos noSQL (BigTable, se llama), tendremos un nuevo registro.

Formularios y operaciones no idempotentes -> POST

Soy de la opinión de que todos lo que queramos enviar en formularios se debe hacer a través de POST, explicaré por qué.

Cuando enviamos algo a http://www.ejemplo.com/post.php con POST la URL que vemos es esa, en cambio si lo enviamos con GET quedaría http://www.ejemplo.com/post.php?campo1=contenido&campo2=contenido2, por ejemplo, por tanto resulta más limpio a nivel del usuario y de SEO que las páginas que tengan que recibir más información además de la URL lo hagan por POST.

Existen más métodos

GET y POST son sólo dos de los que existen, hay algunos que casi no se utilizan y que no se conocen mucho, pero forman parte del protocolo HTTP y deberíamos, al menos, saber para qué sirven. Aquí teneís un breve resumen de cada uno:

• HEAD. Como GET pero solo pide las cabeceras de respuesta, en vez de las cabeceras y el contenido.
• PUT. Sube al servidor un recurso, lo crea, para entendernos.
• DELETE. Borra un recurso.
• TRACE. Envía de vuelta lo recibido del cliente, para que pueda ver si servidores intermedios han alterado el contenido del mensaje.
• OPTIONS. Devuelve los métodos que soporta el servidor.
• CONNECT. Convierte la conexión actual a un tunel TCP/IP, normalmente usado para SSL.
• PATCH. El cliente solicita una serie de cambios en un recurso determinado.

Conclusiones

El objetivo de este post es que quede claro lo que es una operación idempotente, y cuándo usar GET o POST, aunque hay veces que se pueden usar los dos. Aquí dejo una lista de enlaces para más información.

• RFC* de la versión 1.1 de HTTP.
• Otro artículo sobre diferencias entre GET y POST.
• Otro más sobre GET y POST.
• Artículo de la wikipedia sobre HTTP.
• Listado de cabeceras de HTTP.

*¿Qué es un RFC?

RFC corresponde a las siglas Request For Comments (Petición de Comentarios) y, básicamente, es un documento que especifica un protocolo en Internet sin ambigüedades, que se sube a la página de RFC oficial. Lo sorprendente es que cualquiera puede hacerlo y si finalmente se acepta puede convertirse en un estándar de Internet.

En general son documentos llenos de detalles bastante aburridos de leer, para qué nos vamos a engañar. Aquí tenéis unos cuántos: TCP, requisitos de un Router y el primer RFC de 1969.

En este post veremos como podemos mejorar el rendimiento de nuestras bases de datos MySQL de maneras realmente sencillas en su mayoría. Reducir el tiempo en consultas de MySQL puede redundar en un aumento importante en la parte del servidor. Ten en cuenta que es muy importante tomar estas medidas una cada vez, y centrarse en lo que realmente reduce el tiempo de las consultas sustancialmente.

Suele ser mejor marcarse objetivos, como mejorar el rendimiento un 20% que hacerlo de forma descontrolada. Así que veamos punto por punto como hacerlo.

Asegúrate de seleccionar lo que necesites

Cuando hagas una consulta tienes que ser consciente de que cada campo ocupa un espacio que se va a multiplicar por las filas que traigas. Nunca hagas algo como esto:

1
2
3

SELECT *
FROM edificios
WHERE nombre = "casa"

Así que cada vez que hagas una consulta intenta seleccionar sólamente lo que quieras, y nada más.

1
2
3

SELECT id, altura
FROM edificios
WHERE nombre = "casa"

Y probablemente pienses, bueno ¿y qué pasa cuando selecciono absolutamente todos los campos? Pues que tampoco deberías utilizar el asterisco, no ya por la velocidad, sino por escribir código legible. Así que quédate con que, como regla general, es mejor no usar nunca el asterisco en los SELECT y escribir todos los campos que queremos recuperar separados por comas.

Usa la caché

Si haces más lecturas que escrituras deberías usar la caché, ésta proporciona una mejora en el rendimiento bastante notable. En la gráfica tienes unas pruebas de MySQL Performance Blog.

Por supuesto son pruebas puntuales, pero nos sirven para hacernos una idea de cuánto puede mejorar el rendimiento. Lo importante es que tengas claro que siempre que pueda la caché guardará los resultados de las consultas SELECT, para devolverlos sin tener que consultar realmente la base de datos, cuando se haga otra vez la misma consulta.

Puede parecer un poco raro que hagas 20 veces la misma consulta a la base de datos, pero eso es exáctamente lo que suele pasar en la mayoría de páginas en Internet. Por ejemplo si tienes una página de anuncios de coches y quieres mostrar los anuncios por ciudades, lo más normal es tener una tabla de ciudades así que harás algo como esto:

1
2
3

SELECT nombre
FROM ciudades
WHERE pais="España"

Pues bien, si entran 200 personas al día a tu página, tendrás que hacer 200 veces esta consulta si no tienes la caché funcionando. Si por el contrario la caché esta activa sólo sería 1, mientras las ciudades no cambien de nombre (que no suele pasar muy a menudo… =)).

Entiende la caché

Cuando tienes que usar tiempos en las consultas, algo que es muy normal, podría darse el caso de que tuvieras algo como esto:

1

...WHERE fecha_fabricacion >= CURRENT_DATE() - INTERVAL 7 DAY

Si te fijas aquí tienes una función (CURRENT_DATE) que no se puede cachear, porque a cada momento que la ejecutes vas a tener un tiempo diferente.

Solución: pasa la fecha desde el script, ya sea PHP, Python…etc. De esa forma esa consulta que puede devolver 50 registros, se cacheará y si se hace 200 veces al día no la tendrá que hacer siempre de nuevo, lo cierto es que estamos hablando de bastante RAM ahorrada.

Conoce los tipos de datos

Cuando estemos creando las tablas tenemos que ser conscientes de que cada tipo de dato ocupa más o menos si se llena o no. Se que puede sonar un poco confuso, así que veamos un ejemplo concreto.

Como puedes ver en la imagen, si vamos a almacenar un número tenemos que ver el rango en el que va a estar, de esa forma no desaprovechamos bytes. Que no es tanto por el espacio en disco, que normalmente suele sobrar, sino más por las veces que recuperemos datos de la tabla.

Uso de LIMIT

Es muy importante que entendamos LIMIT. Básicamente reduce al número que le pasemos lo que devuelve la consulta. Por ejemplo:

1
2
3

SELECT nombre
WHERE edad = 25
LIMIT 1

Esto devolverá: un registro si tenemos en la tabla alguien con edad 25 o nada. Así, si lo que queremos mostrar es una persona en este caso el uso de LIMIT nos evita tener que sacar más registros de la base de datos cuando realmente no vamos a usarlos.

Por otra parte cuando vayamos a hacer un INSERT o un DELETE muy grande es mejor hacerlo poco a poco usando LIMIT, en vez de todo a la vez, y esto es porque el rendimiento del servidor entero (y por lo tanto de nuestra web de cara a los usuarios) puede verse afectado.

Extra. Usa un ORM

Esto es más una cuestión de facilitarnos la vida que otra cosa, pero es que realmente nos puede ayudar mucho. La idea básicamente consiste en tener una serie de clases con sus atributos y relaciones que correspondan con las tablas que tenemos en la base de datos. Haciendo algo como:

1
2
3
4
5
6

<?php
	$coche = new Coche();
	$coche->color = "rojo";
	$coche->caballos = 223;
	$coche->save(); //Guarda el objeto en la base de datos
?>

Tendremos en la base de datos una tabla coches, y cuando hacemos save() se ejecuta una consulta INSERT. Como puedes ver es muy cómodo y nos evitamos tener que hacerlo nosotros mismos en la clase o simplemente cuando establecemos los atributos. Este ejemplo es de Doctrine, pero hay otras alternativas como Propel, Qcodo o pdoMap.

Por supuesto en todas debes instalar el ORM para que funcione como es debido, pero la base de datos se suele generar sola, acorde con las clases que tengas, lo cual es una gran ventaja. Y lo cierto es que tienen otras muchas ventajas, que dan para un post ellas solas.

Conclusión

Lo cierto es que hay muchas más medidas a tomar pero estas te pueden servir como guía para empezar. En cualquier caso, si te ha interesado el tema, aquí tienes enlaces donde aprender más.

• Charla de Jay Pipes sobre la mejora de rendimiento con MySQL
• Documentación oficial sobre la caché de consultas de MySQL
• Listado de ORM de PHP en la Wikipedia

Probablemente casi todos los desarrolladores que eligen un framework de PHP para trabajar con él por primera vez, lo hagan sin pensar demasiado en lo que puede o no puede hacer. Quizá por una recomendación, simplemente por probar o ambas, pero al trabajar en un proyecto tenemos que tener en cuenta que cosas podemos esperar de un framework y cuáles no. Veamos las característica más importantes a tener en cuenta.

Módulos disponibles

Casi todos los framework en PHP tienen una serie de librerías, módulos o helpers (cada uno lo llama de una forma) que básicamente consisten en una serie de funciones “extra” que tenemos disponibles para trabajar con ellas. Normalmente se agrupan en archivos, como funciones relacionadas con arrays, o funciones relacionadas con strings.

Un ejemplo de este tipo de funciones puede ser repeater(), del helper de strings de CodeIgniter que hace simplemente esto:

1
2

$string = "No volveré a decir tacos en clase.";
echo repeater($string, 5);

En la salida repite 5 veces la frase dada. Es una función de utilidad discutible, puesto que sustituye a un simple for de manera elegante, pero tomémoslo como un ejemplo de funciones que aportan los framework y que no tenemos que implementar. Hay algunos módulos, por ejemplo para parsear RSS, o lidiar más fácilmente con las bases de datos.

Versión de PHP

Quizá no parezca importante para trabajar en nuestros ordenadores, pero no siempre tenemos acceso a la última versión de PHP, así que es importante tener claro si vamos a trabajar en una versión u otra qué framework elegir.

Desarrollo activo

Es de suma importancia que elijas un framework que se encuentre bajo desarrollo activo. Es decir, que el autor o autores no hayan abandonado el proyecto hace tiempo. Esto es básicamente por dos razones:

1. Cuando tengas una duda habrá desarrolladores para contestarla, interesados también en el framework. Si no estuviera bajo desarrollo, nadie se preocuparía de usarlo y no habría nadie que te pudiera ayudar.
2. El desarrollo de PHP afectará al desarrollo del framework por lo que mejorará. La implementación interna de los frameworks de PHP es, lógicamente, en PHP. Como sabrás es un lenguaje que está en un desarrollo intensísimo, y muchas funciones se convierten en deprecated (antiguas, que no se aconseja su uso) en poco tiempo. Si el framework está evolucionando corregirá este tipo de implementaciones con las nuevas versiones proporcionadas por PHP.

A veces también conviene tener en cuenta quién está detrás de cada framework. Por ejemplo detrás del framework Zend está la empresa que fue fundada por los creadores de PHP tal y como lo conocemos hoy. Así que es casi una garantía de éxito que ese framework llegara a triunfar.

Modelo Vista Controlador (MVC)

Modelo Vista Controlador es un patrón de diseño que se basa en dividir la implementación en tres partes:

• Modelo. Normalmente es la representación de la información. Si vamos a tratar con coches y hacemos una clase “coches”, esta clase será nuestra parte modelo, a grandes rasgos.
• Vista. La interfaz de usuario, en desarrollo web suele ser la propia web con el HTML y CSS.
• Controlador. El encargado de recibir acciones y actuar en consecuencia, por ejemplo, si el usuario rellena un formulario y me lo envía en controlador será el encargado de manejar esa información.

Además, y sin entrar en muchas más profundidad sobre el tema para no desviarnos, hay relaciones entre estas partes, las más importantes suelen ser estas:

Por lo tanto si queremos desarrollar con este patrón tenemos que ver si el framework está orientado a él o no. Aunque te adelanto que la mayoría lo están.

Curva de aprendizaje

Esta no es tanto una característica interna de los framework, sino más bien una consecuencia de trabajar con ellos. Normalmente a mayor complejidad y funcionalidad más tiempo se tarda en aprenderlo. Mi consejo aquí es que si vas a tardar más tiempo aprendiendo el framework que utilizándalo estás usando el framework equivocado.

Es decir, el tiempo que le vayas a dedicar a aprender como usar el framework si no lo conoces, debe ser proporcional al tiempo que vaya a durar un proyecto.

Necesidades propias

Hay muchas más características que podríamos estudiar antes de decidirnos pero como receta general solo se puede nombrar las anteriores, básicamente, porque el resto dependerá de las necesidades del proyecto. Así que si tienes oportunidad investiga un poco más sobre cada característica que te ofrezca el framework que elijas. Porque cada uno tiene una serie de propiedades, que intentaré comparar a contuación y que lo hacen único.

Comparativa de frameworks famosos

Esta comparativa se basa en datos recopilados en diferentes webs y en las oficiales de los propios frameworks. He destacado ciertas características más o menos importantes, como puedes ver casi todos tienen de todo, siendo el más completo Zend Framework, pero quizá el que más tiempo se tarda en aprender, aunque esto depende mucho de la experiencia previa que tengas como programador y de la persona en sí.

Algunas características pueden ser discutidas, puesto que se pueden conseguir instalando algo extra de manera relativamente sencilla, pero he intentado representar lo que trae el framework “de fábrica” y que realmente está listo para ser usado.

Uso de módulos independientes

Se ha destacado la facilidad de uso de módulos independientes sin tener que depender del resto del framework.

ORM

ORM (Object Relational-Maping o Mapeo objeto-relacional) es una técnica que simboliza los datos que tenemos en una base de datos con clases. De tal forma que tendremos, por ejemplo, una clase coche con los atributos X e Y y una tabla con los mismos atributos. Lo cierto es que salvo operaciones concretas no afecta demasiado al rendimiento, y facilita enormemente la programación, reduciendo líneas de código. Haré un post sobre esto en el futuro, así que no te preocupes si no lo entiendes completamente.

Otras alternativas

Frameworks de PHP menos famosos

Además de las alternativas mencionadas, las más famosas y utilizadas hay muchísimas más bajo desarrollo que están emergiendo y que se merecen también que le echemos un vistazo. Algunos de ellos son: Prado, Yii o Akelos, aunque hay muchos más.

DIY (hazlo tú mismo)

Hay muchos defensores de que el mejor framework que puedes usar para programar es el que te construyas tú mismo. Es decir que poco a poco crees una serie de librerías y estructuras de directorio hechas por tí y las utilices en varios proyectos.

En realidad es un ejercicio genial que te aconsejo encarecidamente que hagas. Te enseñará mucho de programación, pero por otra parte a veces no hay tiempo y en muchos proyectos se utilizan frameworks por el simple hecho de que están testados en muchas situaciones y el desarrollo sobre ellos en mucho más rápido.

Trata de identificar cuando realmente necesitas un framework, porque no siempre hará falta, y a veces la intención inicial de hacer el proyecto más rápido puede resultar en horas buscando documentación de funciones que no conoces por el simple hecho de utilizar el framework en vez de PHP simplemente.

Conclusiones

Como habrás podido ver elegir un framework no es algo fácil, sobre todo si el proyecto va a llevar mucho tiempo. Cosas como la documentación o el soporte de ciertas funciones de manera nativa pueden resultar en horas ahorradas de implementación, así que piénsalo bien y trata de echarle un vistazo a varios antes de elegir uno.

Aquí dejo una serie de enlaces para entender más en profundidad los diferentes frameworks y ciertos términos que hemos visto como MVC u ORM.

• Página Oficial de Zend
• Página Oficial de CodeIgniter
• Página Oficial de CakePHP
• Página Oficial de Symfony
• MVC en la wikipedia
• ORM en la wikipedia

En muchas páginas se utilizan sistemas de puntuación. Normalmente suelen ser de 5 estrellas, en los que la gente vota que le ha parecido del 1 al 5. Desde el punto de vista de los desarrolladores plantéa muchas cuestiones interesantes, algunas más complejas que otras. En cualquier caso no es demasiado difícil, por lo que podemos cubrirlo en un solo tutorial.

Aquí vamos a diseñar, implementar y sobre todo explicar como hacer un sistema de puntuación de 5 estrellas con decimales intermedios, por lo que la gente puede votar cosas como 4.5 o 1.5. Además un mismo usuario no podrá votar más de una vez, por lo que intentaremos hacer este sistema de votación lo más acorde con los gustos reales de la media de los usuarios.

Paso 1. Diseño

Antes que nada tenemos que hacer el maquetado del sistema de puntuación. Tenemos que pensar en términos de medias estrellas, porque vamos a admitir la votación de 4.5, por ejemplo, como hemos comentado en la introducción. Esto plantéa la primera dificultad, porque ¿cómo hacemos para unirlas todas? o ¿cómo sabemos que el usuario está seleccionando una u otra parte de la estrella? Podrías pensar en utilizar 5 imágenes, de tres tipos, estrellas vacías, medias estrellas y estrellas enteras. Pero entonces no podrías diferenciar fácilmente si un usuario está en la parte izquierda o en la derecha. Así que es un poco más complicado que eso.

En realidad gran parte de la solución vendrá con jQuery, pero de momento hay un hecho a remarcar. Tenemos que usar sprites. Sprite es una imagen compuesta de varias, que se envía una vez, y con CSS se selecciona la imagen dentro del archivo que queremos mostrar. Normalmente se usa para hacer más rápida la carga de la página, porque el navegador y el servidor sólo se tienen que conectar una vez para pasar todas las imágenes en un solo archivo. Pero en nuestro caso no es esa cuestión la más importante, lo importante es que si no tuviéramos sprites, cuando cambiáramos parte de una estrella tendríamos que enviar el archivo, después de finalizar la carga de la página. Esto supone una carga innecesaria en el ancho de banda fuera de tiempo.

Echemos un vistazo al código HTML, será algo bastante simple, basándonos en nuestra implementación concreta y dado que solo queremos 5 estrellas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="1" class="puntuacion">		
	<div class="estrella estrella_izq"><a title="0.5/5" href="#0.5">0.5</a></div>
	<div class="estrella estrella_der"><a title="1/5" href="#1">1</a></div>
	<div class="estrella estrella_izq"><a title="1.5/5" href="#1.5">1.5</a></div>
	<div class="estrella estrella_der"><a title="2/5" href="#2">2</a></div>
	<div class="estrella estrella_izq"><a title="2.5/5" href="#2.5">2.5</a></div>
	<div class="estrella estrella_der"><a title="3/5" href="#3">3</a></div>
	<div class="estrella estrella_izq"><a title="3.5/5" href="#3.5">3.5</a></div>
	<div class="estrella estrella_der"><a title="4/5" href="#4">4</a></div>
	<div class="estrella estrella_izq"><a title="4.5/5" href="#4.5">4.5</a></div>
	<div class="estrella estrella_der"><a title="5/5" href="#5">5</a></div>
</div> <!-- fin puntuacion #1 -->
 
<div id="num_votos">
	<p>Votos: </p>
</div> <!-- fin #num_votos -->

Cada línea dentro del div con id 1 representa media estrella, probablemente te parezca raro que no haya ningún tag , pero no te preocupes, verás la razón en el código jQuery. Además, para codificar el CSS debemos pensar en cuantos “estados” van a tener nuestras estrellas. La respuesta es 3, uno para cuando esté vacía, otro para cuando esté establecida y otro para el estado hover, cuando un usuario esté poniendo el ratón por encima. Mira este gráfico para aclararte un poco:

Por tanto, en el CSS tendremos en cuenta esto. Y ya que estamos, recordaremos que tenemos sprites, por lo que el fondo, se va a realizar simplemente con CSS sobre la misma imagen. En concreto debemos tener un sprite para la parte derecha de las distintas estrellas y uno para la parte izquierda. Adicionalmente, añadimos un sprite para las estrellas enteras, pero esto es una mera formalidad y en realidad no se usará. Nuestro CSS quedará así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

.puntuacion {
	cursor: pointer;
	margin-right: 5px;
	clear: both;
	display: block;
	float: right;
	overflow: visible;
}  
 
.puntuacion:after {
	content: '.';
	display: block;
	height: 0;
	width: 0;
	clear: both;
	visibility: hidden;
}    
 
.estrella {
	float: left;
	width: 35px;
	height: 35px;
	overflow: hidden;
	display: inline-block;
	text-indent: -999em;
	cursor: pointer;
	margin-top: 1em;
}         
 
.estrella_izq, .estrella_der {
	width: 18px
}
 
.estrella, .estrella a { 
	background: url('imagenes/estrella_sprite.png') no-repeat 0 0px;
}
 
.estrella_izq, .estrella_izq a {
	background: url('imagenes/estrella_sprite_izq.png') no-repeat 0 0px;
}
 
.estrella_der, .estrella_der a {
	background: url('imagenes/estrella_sprite_der.png') no-repeat 0 0px;
}
 
.estrella a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0px; /* Estrella Vacía */
}
 
div.puntuacion div.on a {
	background-position: 0px -45px; /* Estrella Establecida */
}
 
div.puntuacion div.hover a,
div.puntuacion div a:hover {      
	background-position: 0px -90px;  /* Estrella Hover */
}

Los detalles de como maquetarlo para que quede lo mejor posible no son demasiado importantes, quizá destacar que nos movemos por el sprite para seleccionar los diferentes tipos de estrellas. Además cuando establezcas un elemento con una imagen como background, debes tener en cuenta que si el elemento no tiene ancho definido, debes hacerlo para que el fondo se vea correctamente.

Paso 2. Plugin en jQuery

Para realizar toda la funcionalidad que necesitamos podremos simplemente codificarlo en jQuery, pero de cara a una posible mejora en el futuro, meteremos todo el código en un plugin hecho por nosotros. Así que veamos en primer lugar como se crea un plugin muy rápidamente:

1
2
3
4
5
6
7

// Declaración del plugin
jQuery.fn.plugin_tonto = function(param1, param2) {
	alert('Soy un plugin y estoy funcionando');
};
 
//Llamada al plugin
$('#elemento').plugin_tonto('valor1', 'valor2');

Como puedes ver es muy simple, es importante resaltar, como probablemente ya supongas, que en $(this) dentro del plugin tendremos el elemento que lo ha llamado, en este caso $(‘#elemento’).

Así que ahora empezemos a codificar nuestro plugin de verdad. Debemos tener 1 parámetro, la url donde vamos a mandar los datos para que se procesen (será un script en PHP, que veremos luego). Además este plugin se va a encargar de mucha cosas, por lo que mejor vemos parte por parte desde arriba del código hasta el final.

Funciones con Cookies y estableciendo variables

Aquí vemos como establecemos una serie de variables necesarias para que el plugin funcione, como la url a dónde mandaremos la petición POST, o la serie de estrellas que tenemos en nuestro HTML. Además utilizamos dos funciones para manejar las cookies en javascript plano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Este par de funciones se sale del objetivo del tutorial, pero básicamente sirven para establecer y guardar cookies, usando javascript. Si quieres más información la tienes por aquí.

1
2
3
4
5
6
7
8
9

if(url == null) return;
var container = jQuery(this);
 
jQuery.extend(container, {
	puntos: 0,
	url: url
});
 
var estrellas = jQuery(container).children('.estrella');

Línea 6. Establecemos los atributos puntos y url, como si pertenecieran a container. De tal forma que cuando queramos acceder a ellos simplemente haremos container.url o container.puntos

Línea 9. Seleccionamos todas las estrellas (en realidad serán media estrellas) y tendremos un total de 10 elementos en la variable estrellas.

Definiendo eventos sobre las estrellas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

estrellas
		.mouseover(function(){
			  eventos.quitar();
			  eventos.llenar(this);
		})
		.mouseout(function(){
			  eventos.quitar();
			  eventos.reiniciar();
		})
		.focus(function(){
			  eventos.quitar();
			  eventos.llenar(this);
		})
		.blur(function(){
			  eventos.quitar();
			  eventos.reiniciar();
		});
 
//Cuando se hace click en una estrella
estrellas.click(function(){
   	if (readCookie('votado') == null){
		container.puntos = (estrellas.index(this) * .5) + .5;
 
      	$.post(container.url, {
      		"id": $(this).parent().attr('id'),
        	"puntos": $(this).children('a')[0].href.split('#')[1] 
      	});
 
      	createCookie("votado", 1, 365);
 
      	eventos.establecer_de_BD();		
	}   
});

En la primera parte del código establecemos las acciones a realizar cuando pase una de esos eventos predefinidos en jQuery. Todas las llamadas que son eventos.algo pertenecen a un array que definiremos después.

Además definimos el evento click sobre cualquiera de las estrellas. Esto generará que se calcule la puntuación seleccionada y se envía a través del método POST a la url pasada al plugin. Antes de hacer nada para no molestar al servidor si realmente el usuario no puede votar porque ya lo ha hecho, miramos si tiene la cookie que pusimos en una ejecución anterior.

Si realmente es su primera vez votando, se manda la actualización, se establece una cookie para que no vote de nuevo y cuando se ha finalizado el envío se hace una consulta a la BD para actualizar la nueva puntuación. Esto resulta un poco ineficiente pero no quería perder el lado docente del tutorial, y creo que es más claro. En cualquier caso debes tener en mente que se podría devolver la nueva puntuación directamente desde la primera petición POST.

Algunas funciones útiles e inicio de la puntuación

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

var eventos = {
	// llenar hasta la posición del ratón.
	llenar: function(el) { 		
		var index = estrellas.index(el) + 1;
		estrellas
			.children('a').css('width', '100%').end()
			.slice(0,index).addClass('hover').end();
	},
 
	// quitar todas las estrellas.
	quitar: function() { 		
		estrellas
			.filter('.on').removeClass('on').end()
			.filter('.hover').removeClass('hover').end();
	},
 
	// reiniciar el sistema.
	reiniciar: function() { 	
		var unidad = parseInt(container.puntos);
		var decimales = container.puntos - unidad;
		var num_estrellas = (unidad * 2) + 1;
 
		if (decimales >= .5)
			num_estrellas += 1;
 
		estrellas.slice(0, num_estrellas).addClass('on').end();
	},
 
	establecer_de_BD: function() {
		//Establecemos la puntuación desde la BD
		$.post(container.url, { "peticion": 1, "id": estrellas.parent().attr('id') },
		   function(data){
		     $('#num_votos p').html("Votos: " + data.votos); 		     
		     container.puntos = data.puntuacion;  
		     eventos.reiniciar(); 
		   }, "json");
	}
};    
 
//Al principio establecemos el sistema con el valor que corresponde
eventos.establecer_de_BD();
 
return(this);

Línea 3. Ahora creamos un array del que antes hemos hablado, llamado eventos, es un array asociativo compuesto por funciones. En esta línea definimos la primera función, que se encarga de ir componiendo las estrellas con la clase hover, para dar el efecto de llenado progresivo según se mueve el ratón.

Línea 11. Esta función se encarga de quitar el efecto hover cuando dejamos de poner el ratón encima de las estrellas.

Línea 18. Reiniciar es una funcíón para establecer el número de medias estrellas vacías que tenemos, para ello se “parte” el número entre la unidad y los decimales, y se opera con ellos. Los detalles los puedo explicar en los comentarios, pero es relativamente sencillo, teniendo en cuenta que tenemos siempre el doble de elementos por ser medias estrellas. Así que he establecido que si se tiene de X a X.5 se marca la mitad de una estrella, y si se tiene de X.5 a X+1 se tiene otra nueva estrella completa.

Línea 29. Para que el sistema de puntuación funcione necesitamos ver el número de votos y la puntuación de la base de datos y establecerla con la funcion reiniciar. Así que se hace una petición POST y con el resultado en json se establece el resultado.

En la parte final del plugin ejecutamos por primera vez establecer_de_BD para poner el número de estrellas cuando se carga la página así como el número de votos.

Paso 3. Parte servidor con PHP y MySQL

Hasta ahora tenemos una serie de estrellas que al hacer click en ellas nos mandan los datos actualizados y cuando se cargan nos lo piden. Pero de momento no tenemos un script que se encargue de recibir esas peticiones y actuar en consecuencia.

Es por ello que necesitamos pensar en dos cosas, qué vamos a hacer y cómo vamos a guardar los datos de las puntuaciones. Contestemos primero al problema de almacenar las puntuaciones.

MySQL es la solución

Contradiciendo a la navaja de Ockham, en este caso la solución más compleja es la mejor. Y es que podríamos planternos la posibilidad de guardar los votos en un archivo de texto, por ejemplo, pero esto resultaría en problemas de concurrencia, que MySQL resuelve por sí mismo, sin ni siquiera tener que saber como desarrollador que algo llamado concurrencia existe (uno de los temas más complejos en programación, por cierto).

Así que creemos una tabla realmente simple donde meteremos nuestros datos:

Para crearla haríamos lo siguiente con un IDE de bases de datos o desde un terminal:

1
2
3
4
5
6
7

CREATE TABLE puntuaciones
(
id INT(11) NOT NULL AUTO_INCREMENT,
puntos DOUBLE PRECISION NOT NULL,
votos INT(11) DEFAULT NULL,
PRIMARY KEY (id)
) CHARACTER SET=utf8;

Completando el sistema con PHP

Por último necesitamos un archivo de configuración para simplificar la defición de constantes, una clase para facilitar el acceso a la BD y un script (post.php) para recibir y atender las peticiones.

Nuestro esquema de comunicación se puede resumir en algo así, siendo el plugin de jQuery el encargado de comunicarse con el servidor y de lidiar con las votaciones repetidas.

Así que vamos con el primer archivo PHP.Este archivo de configuración será simplemente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
/** El nombre de tu base de datos */
define('DB_NAME', 'nombre_base_de_datos');
 
/** Tu nombre de usuario de MySQL */
define('DB_USERNAME', 'usuario');
 
/** Tu contraseña de MySQL */
define('DB_PASSWORD', 'pass');
 
define('DB_HOSTNAME', 'hostname');
 
/** Codificación de caracteres para la base de datos. */
define('DB_CHARSET', 'utf8');
?>

La clase, llamada puntos.class.php será bastante sencilla también:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
 
require_once 'config.inc.php';
 
class Puntos {
 
	private $db;
	private $id;
 
	function __construct($id) 
	{
		$this->db = mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD);	
		mysql_set_charset(DB_CHARSET, $this->db);		
		mysql_select_db(DB_NAME, $this->db);  
 
		$this->id = mysql_real_escape_string($id);	
 
		$query = "INSERT IGNORE INTO puntuaciones (id, votos, puntos) "
		 		."VALUES ($this->id,0,0)"; 
 
		mysql_query($query);
	}

Incluimos el archivo de configuración y en el constructor hacemos tres cosas:

1. Establecemos la conexión con la base de datos.
2. Establecemos como atributo privado de la clase el id del sistema de puntuación que nos pasan.
3. Insertamos una nueva fila con votos y puntuación a 0 si no existía ya.

1
2
3
4
5
6
7
8
9
10

	function getPuntuacion() 
	{						
		$query = "SELECT puntos as puntuacion, votos "
				."FROM puntuaciones "
				."WHERE id = $this->id";
 
		$resultado = mysql_query($query, $this->db); 
 
		return mysql_fetch_assoc($resultado);
	}

Aquí recogemos en un array asociativo la consulta de el número de votos y los puntos que tiene un determinado sistema. Otra vez, lo sabremos por el id que nos pasaron en el constructor y que ya tenemos guardado como atributo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	function setPuntuacion($puntos) 
	{
		if (isset($_COOKIE['votado'])) {
			return true;
		} else {     
			$puntos = mysql_real_escape_string($puntos);
 
			$query = "UPDATE puntuaciones ".
					 "SET puntos = ((puntos * votos) + $puntos) / (votos + 1), ".
					 "votos = votos + 1 ". 
					 "WHERE id = $this->id";
 
			 return mysql_query($query);
		}
	}
} //Fin de la clase
?>

Este último método mira si se tiene una cookie previamente establecida y si no es así actualiza la base de datos con los puntos pasados como parámetro, aumentando también el número de votos a uno más de los que había. La comprobación de la cookie no es estrictamente necesaria, porque previamente el plugin se ha encargado de ver eso, pero no está de más y no supone casi carga al servidor.

El sistema de establecer una cookie cuando un usuario vote para que no lo haga más no es una solución perfecta, porque se puede saltar fácilmente, pero es una primera aproximación y quizá en un futuro enseñe como mejorar esto. En cualquier caso se puede ver un uso práctico de las cookies con PHP y una aplicación real.

Script que recibe las peticiones

Por último tenemos nuestro archivo post.php en el que recibimos las peticiones:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
//Incluimos la clase puntos
require_once 'puntos.class.php';
 
if (!empty($_POST) && !empty($_POST['id'])) {
       $pt = new Puntos($_POST['id']);
 
	if (!empty($_POST['peticion']) && $_POST['peticion']) {
 
		echo json_encode($pt->getPuntuacion());
 
	} elseif (!empty($_POST['puntos'])) {
 
		echo $pt->setPuntuacion($_POST['puntos']);
	}  
}
 
?>

Línea 8. Nos han hecho una petición para saber el número de votos y la puntuación. Así que llamamos al método definido antes que se encarga de manejar esa petición.

Línea 11. Establecemos la nueva puntuación y aumentamos el número de votos en 1. Nuestro método ya se encarga de comprobar la cookie y de limpiar la entrada de datos, usando mysql_real_escape_string, como hemos comentado antes.

Conclusiones

Si bien es cierto que hay cosas que pulir, como por ejemplo en términos de accesibilidad si no se tiene javascript activado, o de seguridad, para evitar que un usuario pueda saltarse el control que hemos hecho con la cookie, este tutorial cubre muchos puntos, que espero, te hayan sido útiles.

El plugin está basado en uno mucho más complejo y grande que ya va por su versión 3.13. Lo puedes encontrar aquí.

Las estrellas usadas (aunque estaban enteras) son de Customicon Design.

Si tienes cualquier duda, no dudes en preguntar en la sección de comentarios.

Este es el típico problema que hasta que no te pasa, ni siquiera sabías que existía. La cuestión es la siguiente:

1
2
3
4
5
6
7

<table border="0" width="">
    <tr>
         <td>Uno</td>
         <td>Dos</td>
         <td>Tres</td>
    </tr>
</table>

Teniendo una tabla en HTML como la de arriba queremos que una fila entera se comporte como un enlace hacia otra página, es decir, como si estuviera entre la etiqueta anchor de HTML ().

Lo más intuitivo pero incorrecto

Pues metes el elemento ‘table row’ (tr) entre la etiqueta anchor y listo.

1
2
3
4
5
6
7
8
9

<table border="0" width="">
<a href="link.html">			
<tr>
     <td>Uno</td>
     <td>Dos</td>
     <td>Tres</td>
</tr>
</a>
</table>

Por desgracia esto no funciona, así que mal asunto. A partir de este punto es cuestión de echarle mucha imaginación o de intentar pensar un poco, en ambos casos no llegaremos a la solución perfecta, pero cerca nos quedaremos.

Imaginación al poder

Una solución es crear un anchor que se vaya moviendo por encima de cada fila según el mouse vaya pasando por ellas. Como puedes suponer, esta solución está en JavaScript, concretamente se ha usado jQuery y se ha realizado un plugin. Su uso es tan sencillo como:

1

$('table#mitabla tr').superLink('a:last');

Pros

Pues probablemente que es una solución con mucha imaginación detrás y su uso es realmente sencillo. Puedes ver el demo aquí, donde también hay un enlace donde el autor explica su idea.

Contras

Pues que al usar CSS y definir :hover (para cuando se pase el ratón por encima) no funciona. Es decir que el comportamiento normal que tiene un anchor en una página con respecto al CSS no existe. Además de eso, lo cierto es que tiene demasiada complejidad para una cosa que en principio puede parecer tan simple.

Solución intuitiva

Esta segunda opción viene dada por Eric. Lo cierto es que es bastante más sencilla, tiene en cuenta que realmente lo que queremos es que al hacer click en cualquier punto de una fila nos lleve a otra página. Así que con algo tan sencillo como esto no tendríamos que complicarnos más la vida:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload = function(){
    ConvertRowsToLinks("table1");
}
 
function ConvertRowsToLinks(xTableId){
    //Seleccionamos todas las table row (filas) del documento
    var rows = document.getElementById(xTableId).getElementsByTagName("tr");
 
    //Las recorremos con un for
    for(i=0;i<rows.length;i++){
        //Buscamos dentro de cada table row (tr) un elemento a
        var link = rows[i].getElementsByTagName("a");  
 
        if(link.length == 1){
            //Si lo encontramos asociamos el evento click con la redirección
            rows[i].onclick = new Function("document.location.href='" + link[0].href + "'");
        }
    }
}

Pros

Su simplicidad en cuanto a codificación, y que si respeta el problema del CSS. He preparado un ejemplo sencillo con Google Code PlayGround (del que hice un post hace un tiempo). El ejemplo está aquí (el enlace lo he puesto con #1 y #2 para no salir de la página al hacer click pero puedes ver que funciona en la barra de direcciones ). Además esto está en JavaScript plano, por lo que no necesitamos incluir jQuery, como pasaba con el anterior.

Contras

Cuando el usuario no ejecuta el click sino intenta ir a la página de otra forma (por ejemplo pinchando con la rueda para abrir en otra pestaña) pues no lo podemos detectar. Hay varios eventos asociados a un anchor que nos pueden ser útiles (middle-click para el caso de la rueda, por decir alguno), pero tendríamos que definir la función asociado a cada evento y eso no es muy cómodo que digamos.

Conclusión

Hay tantas soluciones como se te puedan ocurrir, de hecho hay más plugins de jQuery por ahí con la misma función que el mostrado en el ejemplo primero, pero estas dos soluciones me parecieron las más destacables. ¿Tienes alguna otra?

Foto de Wouter