¿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.

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

Con los avances en el desarrollo web se van a poder hacer cosas sencillamente impresionantes. Una de ellas es los gráficos con canvas.

Por desgracia la mayoría de los avances van a tardar mucho en implantarse realmente en el mundo web (la primera versión de Internet Explorer 6.0 salió hace 9 años y todavía nos estamos pegando con él).

Esa es la mala noticia, la buena es que los millones de personas que están trabajando para el desarrollo de Internet quieren los avances ya, y no cuando los usuarios dejen de un lado navegadores antiguos. Es por ello que esta utilidad que os presento hoy es cross-browser, es decir que se puede utilizar en casi todos los navegadores.

jsPlumb

jsPlumb es un plugin que permite hacer cosas muy interesantes con esquemas gráficos bastante presentables.

El plugin, como he dicho requiere varias cosas, pero para todas hay una solución que permite que se vea en todos los navegadores:

• jQuery (1.3+)
• jQuery IU (1.7+)
• Explorer Canvas

Ejemplo sencillo

Hay muchísimos ejemplos en la documentación pero para ir abriendo boca, un código sencillo:

1
2

//Se conecta el div con id window1 con el div con id window2
$("#window1").plumb({target:'window2'});

Enlaces

• Documentación
• Demo

Growl es un sistema de notificaciones usado en Mac OS X, que es bastante elegante y permite que todas las aplicaciones permitan dar el mismo tipo de notificaciones. En la imagen puedes ver su apariencia:

Lo cierto es que es una de tantas posibilidades para notificar algo en un sistema operativo. La cuestión es que dados los avances en desarrollo web de los últimos años se puede trasladar este tipo de apariencia y funcionalidad a la web de manera similar.

jGrowl (Growl con jQuery)

El proyecto se llama jGrowl y la descarga es gratuita (al final del post tienes los enlaces). Lo cierto es que una vez que incluyas los archivos javascript y css en el html, su uso es muy sencillo:

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

// Hola Mundo simple
$.jGrowl("Hello world!");
 
// Se queda en la esquina sin quitarse
$.jGrowl("Stick this!", { sticky: true });
 
// Mensaje con un header en el mismo rectángulo
$.jGrowl("A message with a header", { header: 'Important' });
 
// Estableciendo el tiempo que se muestra antes de ocultarse
$.jGrowl("A message that will live a little longer.", { life: 10000 });
 
// También puedes controlar cuando se va a abrir para hacer algo
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
    beforeClose: function(e,m) {
        alert('About to close this notification!');
    },
    animateOpen: {
        height: 'show'
    }
});

Su apariencia es también bastante buena:

Enlaces

Documentación y descarga

De una forma sencilla, digamos que en principio no es posible acceder desde el javascript de una página en el dominio A a otra en el dominio B.

Es decir, si desde javascript queremos hacer una petición desde www.ejemplo.com/index.html a www.midominio.com/index.html, por motivos de seguridad no podemos.

Hay una forma de acceder a esos datos, y es que si lo hacemos a través del formato JSONP, no hay mayor problema, pero como sabrás, no todas las páginas a las que queremos acceder por lo que sea, tienen el formato JSONP disponible.

¿Cómo se resuelve esto? Pues aquí es cuando entra Simple PHP Proxy.

Simple PHP Proxy

Para acceder a una página que no está en nuestro dominio y no tiene el formato JSONP, utilizamos esta clase.

La idea es que el servidor donde se va a ejecutar nuestro código haga una copia local de la página a la que vamos a acceder a través de Javascript, y así no estamos haciendo cross-domain, estamos en nuestro servidor!

Te podrías plantear la duda de: ¿y por qué no lo hago a mano? Bueno el problema es que las páginas cambian y hacerlo de manera manual, cada vez que quieras acceder a otro dominio te va a ser casi imposible.

Cómo utilizar Simple PHP Proxy

En la página de ejemplo podemos ver como funciona y el código en sí, en el que se utiliza para mostrar las cabeceras de un dominio que se le pase a través de Javascript, lo que demuestra que ha podido acceder a ese dominio superando así el problema del cross-domain.

Enlaces

Página del proyecto | benalman.com
Código y seguimiento | Github
Documentación más exhaustiva | benalman.com
Código fuente de Simple PHP Proxy | Descarga

El concepto

La idea parte, de Google, más concretamente, está realizada por Ben Lisbakken.

La explicación más en profundidad de como funciona esto la puedes ver abajo, en la conferencia que da el propio Ben Lisbakken (también habla sobre otras cosas, como por ejemplo reducir el tiempo de carga de tus páginas).
Así que el concepto es el siguiente: Una aplicación web donde puedes…

• Ver ejemplos de código Javascript (principalmente utilizando las API’s AJAX de Google).
• Editar tu propio código.
• Hacer debug de éste con la ayuda de Firebug.
• Compartir el código con todo el mundo, con una url que no se borrará y que podrás pasar a quien quieras.

Utilización

La utilización es bastante sencilla, simplemente vamos a http://code.google.com/apis/ajax/playground/ y empezamos a ver los ejemplos. Cuando quieras cambiar algo, escribe en el cuadro de la derecha y haces click en “Run Code”. (Para exportarlo, botón de la flecha a la derecha).

El debug se hace con firebug, así que puedes poner breakpoints en el código y ver el contenido de las variables u objetos en cada momento.

Dejo una imagen:

Conferencia

Vídeo

Transparencias

Enlaces

• Ajax Playground

Tras un tiempo trasteando con API’s llegó el momento de trabajar con la del reproductor de Youtube, y lo cierto es que su uso es bastante sencillo.

En este post veremos una serie de funciones más o menos avanzadas, que nos permitirán controlar casi todos los aspectos del reproductor de Youtube.

Primeros pasos

En primer lugar, necesitamos swfobject, un proyecto de código abierto, que permite integrar un archivo swf (de Flash) en nuestra página con un pequeño archivo Javascript.

Así que nos lo descargamos y subimos el archivo js a nuestro servidor.

Además, para poder utilizar la API de Youtube, en la url del vídeo que queramos insertar, tenemos que añadir el parámetro enablejsapi=1 y playerapiid=ytplayer

Viendo un ejemplo, integremos un vídeo para permitir el uso de funciones (VIDEO_ID es la id del vídeo lógicamente)

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

<script type="text/javascript" src="swfobject.js"></script>    
 <div id="ytapiplayer">
   Se necesita una versión de Flash Player superior a 8 
	y Javascript, para ver este video.
 </div>
 
 <script type="text/javascript">
 
   var params = { allowScriptAccess: "always" };
   var atts = { id: "myytplayer" };
   swfobject.embedSWF("http://www.youtube.com/v/<strong>VIDEO_ID</strong>&enablejsapi=1&playerapiid=ytplayer", 
                      "ytapiplayer", "425", "356", "8", null, null, params, atts);
 </script>

La función swfobject.embedSWF viene, como ya supondrás, del archivo swfobject.js, que hemos descargado previamente, (al final tienes enlaces a la documentación).

Bien, una vez que tenemos el reproductor integrado, necesitamos obtener el objeto que representa el reproductor para poder hacer llamadas, la función onYouTubePlayerReady se ejecutará cuando el reproductor está completamente cargado y la API está lista para recibir llamadas.

1
2
3

 function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
    }

Funciones básicas

Ahora que tenemos nuestro objeto ytplayer podemos llamar a las funciones. Por ejemplo, si queremos tener un enlace que reproduzca el vídeo simplemente añadimos

1

 <a href="javascript:ytplayer.playVideo()">Reproducir</a>

O para pausar el reproductor…

1

 <a href="javascript:ytplayer.pauseVideo()">Pausar</a>

Hay muchas funciones, estas dos son solo un ejemplo.

Ejemplo práctico y documentación

Hay un ejemplo en esta página en la que podemos ver más funciones aplicadas. Si observamos el código usa la famosa Google AJAX Libraries API que básicamente lo que hace es cargar las librerías más usadas, como jQuery o Mootools y además permite cargar otras. En este caso…

1
2
3
4
5
6

<!-- Use the Google AJAX Libraries API: 
	 http://code.google.com/apis/ajaxlibs/ --> 
<script src="http://www.google.com/jsapi"></script> 
<script> 
	google.load("swfobject", "2.1");
</script>

Carga la de swfobject con la función google.load(librería,versión).

Conclusión

Bien, eso es todo, aquí dejo unos enlaces de documentación y para cualquier duda comenta.

• Documentación de la API de Youtube (en español)
• Documentación de swfobject 2 (en español)

Cuando se trata de recibir varios datos tras hacer una petición Ajax, surge un problema, solo se puede recibir una cadena de texto, y ya está, esto se debe a la naturaleza de Ajax, pero a eso dedicaré otro post más adelante.

Con el método GET, existe una función (jQuery.getJSON), pero este método no es el más elegante a mi entender en muchos proyectos. (El artículo POST vs. GET está en proceso de fabricación…).

Así que necesitamos alguna manera de pasar X datos desde un script a una función javascript que nos ha hecho la petición Ajax.

JSON

Bueno amigos, JSON es nuestro aliado en este caso. JSON es simplemente una manera de juntar datos en forma de string, con un estándar, claro.

¿Y cuál es el punto fuerte de esto? Pues que al ser estándar en muchos lenguajes existen funciones que nos facilitan la vida (PHP, Javascript, Python, Perl…).

Veremos un ejemplo con PHP, aunque en realidad no importa el lenguaje, la idea se puede extrapolar con scripts de otros lenguajes siempre y cuando implementen funciones de JSON.

Caso práctico

En un script de PHP (prueba.php) tenemos el siguiente código:

1
2
3
4
5
6
7

<?php
 $array_datos = array( "direccion" => "Calle Inventada",
                       "ciudad" => "Hong Kong"
                     );
 $array_datos_json = json_encode($array_datos); //Lo codificamos en JSON
 echo $array_datos_json;
?>

Bien, tenemos la siguiente petición por Ajax, con el método POST al script anterior.

1
2
3
4
5

$.post("prueba.php", { "func": "conseguirDireccionCiudad" },
  function(data){
    alert(data.direccion); // Dato 1
    alert(data.ciudad); // Dato 2
  }, "json");

Como se puede ver se decodifica directamente con la función $.post(), que permite especificar el tipo de dato que vamos a obtener en el 4º parámetro.

Documentación

Jquery + Ajax | Jquery.com
JSON | Documentación oficial
JSON | Documentación útil

Las gráficas en el desarrollo web son un mundo, existe multitud de formas de realizarla, pero a mi entender la más elegante es con Javascript. Y como usar código ya hecho si nos sirve siempre es una ventaja veremos dos casos prácticos.

HighCharts

Uso

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

//Incluimos lo que nos descargamos + Jquery
<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="excanvas.js" type="text/javascript"></script>
$(document).ready(function() {
	var chart1 = new Highcharts.Chart({
		chart: {
			renderTo: 'chart-container-1',
			defaultSeriesType: 'bar'
		},
		title: {   //Título de la gráfica
			text: 'Fruit Consumption'
		},
		xAxis: { //Categorías en el eje de las x
			categories: ['Apples', 'Bananas', 'Oranges']
		},
		yAxis: { //Título del eje de las ys
			title: {
  				text: 'Fruit eaten'
			}
		},
		series: [{ //Aquí especificamos los datos
			name: 'Jane',
			data: [1, 0, 4]
		}, {
			name: 'John',
			data: [5, 7, 3]
		}]
	});
});

Descarga

Pincha aquí para descargar

Emprise JavaScript Charts

Uso

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

<script type="text/javascript">
var myChart6 = new EJSC.Chart( 'myChart1a' , {
	// TItulo de la gráfica
	title: "Sample Function Chart" ,   
	// Para ver ambos ejes
	axis_bottom: {         
		caption: "X Value" ,
		zero_plane: { show: true, color: 'rgb(0,0,0)' , thickness: 1 }
	} ,
		axis_left: {
			caption: "Y Value" ,
			zero_plane: { show: true, color: 'rgb(0,0,0)' , thickness: 1 }
		}
	});
	// Aqui añadimos funciones para dibujarlas
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,2); } , 
	{ title: "Function x^2" } ) );
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,3); } ,
	{ title: "Function x^3" } ) );
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return x; } ,
	{ title: "Function x" } ) );            
</script>

Descarga

Pincha aquí para descargar