Contenido

10 plugins de jQuery y MooTools para generar calendarios

9 sep

+ 0

Útil recopilación de 10 de los mejores plugins para jQuery y MooTools para generar calendarios dinámicos.

Browser Shooter, dispara navegadores con Javascript

29 ago

+ 3

Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble adaptado a la guerra de navegadores web.

browser-shooter
(Ver Imagen)

Mediante el uso de jQuery 1.3.2, y una buena cantidad de ficheros JS se controla la física de los rebotes, los movimientos del cañón y todos los efectos de juego. Podéis probarlo directamente aquí.

5 formas de usar Ajax con jQuery

18 ago

+ 14

La gente de Nettuts publica un interesante artículo de como usar Ajax con jQuery. Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asíncronas.

  1. $.load()
  2. $.get()
  3. $.post()
  4. $.getJSON()
  5. $.getScript()

$.load()

Se trata de la función que más me gusta de jQuery ya que hace que una de las tareas más comunes de desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Este ejemplo, traído de la página de documentación de jQuery, se encarga de lanzar una petición a la URL /Main_Page (usa URL Rewrite) y del HTML de respuesta cogemos los elementos  #jq-p-Getting-Started li y lo insertamos dentro de #links.

Simplemente genial, cómodo y rápido.

$.get()

Se trata del función sencilla con la que podemos lanzar peticiones GET al servidor mediante Ajax.

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

Mediante el paso de 3 opciones, de las cuales 2 son opciones ( condicionales mejor dicho) puedes lanzar la petición al fichero (1º) con los parámetros (2º) y tratar la respuesta mediante un callback (3º).

$.post()

Al igual que la anterior, esta función permite enviar peticiones POST mediante ajax.

$.post("test.php", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

Igual de fácil que en el caso anterior.

$.getJSON()

Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la opción más cómoda es la de usar este método que permite obtener la respuesta JSON evaludada en la función callback.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

Teniendo en cuenta el navegador, se usará el objeto JSON nativo o se usará el sistema basado en eval().

$.getScript()

Aunque técnicamente no es una petición Ajax, se trata de una petición al servidor y por eso tiene cabida en el post.

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

Con este método podemos cargar asíncronamente un fichero Javascript y mediante el parámetro (2) callback podemos ejecutar código Javascript usando el que está en el fichero js que queremos cargar (1).

Carga contenido mediante scroll con jQuery

23 jul

+ 13

Luis Sacristan de SentidoWeb publica un interesante link sobre como conseguir cargar contenido usando scroll con jQuery. Esta técnica, la podemos encontrar en sitios con DZone, y es ideal para sustituir la paginación tradicional.

$(document).ready(function(){
 // Añadimos la funcionalidad al evento scroll de window
 $(window).scroll(function(){
 // Comprobamos si estamos en la parte inferior de la página.
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
 // Mostramos la imagen de cargando
 $('div#last_msg_loader').html('<img src="bigLoader.gif">');
 // Cargamos el contenido.
 var ID=$(".message_box:last").attr("id");
 $.post("load_data.php?action=get&last_msg_id="+ID,
 }
 });
 });
});

Como vemos en el código, la idea es usar el evento scroll del objeto Window para iniciar una carga mediante Ajax de los datos siguientes a los que mostramos por pantalla.

Librerías para generar gráficas con Javascript

26 jun

+ 13

Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.

Protochart2
(Ver Imagen)

Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:

  1. Flot [jQuery]
  2. fgCharting [jQuery]
  3. jQuery Sparklines [jQuery]
  4. jqPlot [jQuery]
  5. TufteGraph [jQuery]
  6. jQuery Google Charting [jQuery]
  7. ProtoChart [Prototype]
  8. JSXGraph [Prototype o jQuery]
  9. Protovis [Native JS]
  10. PlotKit [Nativa JS]

Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.

  1. MooChart
  2. TabletoChart
  3. MooWheel

¿Me he dejado alguna que valga la pena conocer?

Mozilla JetPack, todos podemos hacer extensiones para Firefox

25 may

+ 11

Mozilla JetPack es una extensión para Firefox que permite desarrollar extensiones mediante el uso de tecnologías de desarrollo web (HTML, CSS, Javascript), aprovechándose de la potencia de Ajax y los nuevos estándares multimedia (<canvas />, <video /> y <audio />) realizar extensiones para Firefox es muy sencillo y sobretodo muy potente.

logo
(Ver Imagen)

Gracias a la integración con jQuery, el desarrollo de extensiones será realmente sencillo y la pequeña API, será más que suficiente para hacer realidad esas ideas que tenemos en mente.

La facilidad de integrar librerías externas (Google Maps, Twitter, Delicious.com,…) hará que nuestro navegador esté más conectado que nunca.

Veamos un ejemplo:

function GmailNotifier(doc){
  $(doc).click( this.goToInbox );
  this.update( doc );
  setInterval( function(){
    this.update(doc);
  }, 60*1000 );
}

GmailNotifier.prototype = {
  goToInbox: function(){
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ Jetpack.tabs.length-1 ].focus();
  },

  update: function(doc){
    var url = "http://mail.google.com/mail/feed/atom";
    doc = $(doc);
    $.get( url, function(xml){
      var el = $(xml).find("fullcount"); // Unread message count

      if( el ){
        var count = el.get(0).textContent;
        doc.find("#count").text( count );
      }
      else{
        doc.find("#count").text( "Login" );
      }
    });
  }
}

jetpack.statusBar.append({
  html: '<img src="http://mail.google.com/mail/images/favicon.ico"><span id="count"></span>',
  onReady: function(doc){
    var gmail = new GmailNotifier(doc);
    $("#count", doc).css({
      position: "absolute",
      left: 4, top: 8,
      fontSize: "10px",
      cursor: "pointer",
      backgroundColor: "rgba(255,255,255,.8)"
    });
  },
  width: 20
});

Este código nos mostrará un icono de gMail con el número de emails pendientes por leer en la parte inferior de nuestro Firefox (statusbar). Revisa el tutorial para ver que cosillas se pueden hacer.

Ya tenemos una buena serie de demos desarrolladas por que extendamos nuestro navegador.

Gracias Edu.

actuR.com, optimizador de código

20 may

+ 7

Carlos Sanches me avisa via email sobre la nueva aplicación en la que ha estado trabajando. acutR.com, un optimizador de código que nos permite desde optimizar código HTML hasta minimizar nuestro código CSS. Muy recomendable para ahorrarnos esos minutos de depuración :D

Dale un toque de color (animado) a tu web con jQuery

19 may

+ 2

En SentidoWeb publican un interesante plugin para jQuery que nos permite crear un efecto de Glow para adornar elementos de nuestras aplicaciones web. El resultado, además de impresionante es sorprendente debido a la técnica usada, una imagen grande con la gama de colores y la va moviendo detrás del formulario.[Demo]

jQuery vs MooTools, ¿cual es mejor?

19 may

+ 16

Aunque se intente camuflar con frases como “No son para lo mismo”, “Las dos son muy buenas”,… hay una pregunta latente detrás que siempre posiciona en un bando u otro a los desarrolladores web. ¿Cual es mejor? Esta es la pregunta a la que le han buscado una solución intentando ser lo más objetivo posible. Yo no me voy a posicionar, por que no son para lo mismo y las dos son muy buenas :D

Extiende Google Analytics con jQuery

18 may

+ 10

El uso de Google Analytics en aplicaciones web es algo muy común y cada vez más corriente. Principalmente por que es un servicio gratis y ofrece una gran cantidad de información relevante sobre el uso de las mismas.

Debido a este crecimiento, es normal encontrarnos artículos como este de Carron Media en el que nos muestran como extender las posibilidades de Google Analytics con jQuery. Mediante una serie de pequeñas porciones de código podremos controlar los enlaces salientes o los ficheros que se decargan de nuestros sitios web.

<script type="text/javascript">
$(document).ready(function(){
// Cargamos el fichero JS
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){

        try {
	// Nos identificamos con nuestro cógico.
            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
            pageTracker._trackPageview();
        } catch(err) {}

	// Definimos los tipos de ficheros que vamos a registrar.
        var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;

	// Recorremos todos los enlaces
        $('a').each(function(){
	// Capturamos el atributo href.
            var href = $(this).attr('href');

		// Si es un enlace saliente
            if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
                $(this).click(function() {
                    var extLink = href.replace(/^https?\:\/\//i, '');
                    pageTracker._trackEvent('External', 'Click', extLink);
                });
            }
            // Si es un email (mediante mailto)
            else if (href.match(/^mailto\:/i)){
                $(this).click(function() {
                    var mailLink = href.replace(/^mailto\:/i, '');
                    pageTracker._trackEvent('Email', 'Click', mailLink);
                });
            }
            // Si es una decarga.
            else if (href.match(filetypes)){
                $(this).click(function() {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    var filePath = href.replace(/^https?\:\/\/(www.)mydomain\.com\//i, '');
                    pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
                });
            }
        });
    });
});
</script>

Tambien puedes descargarlo para usar en tu aplicación.