Contenido

Un vistazo al futuro: IE9 Developer Tools, la pestaña de red

23 abr

+ 11

Internet Explorer 9 está a la vuelta de la esquina, y su llegada defraudará a muchos por la escasa adopción de estándares y animará a otros con nuevas funcionalidades y herramientas que nos permitirán desarrollar para él con más comodidad.

Una de estas herramientas es la ya conocida Developer Tools para Internet Explorer, que en esta nueva versión para Internet Explorer 9 dispondrá de una pestaña de red que nos mostrará información relacionada a las conexiones realizadas en nuestra aplicación web.

NetworkTab_3
(Ver Imagen)

La posibilidad de capturar las peticiones entrantes y salientes de nuestras aplicaciones web (imágenes, CSS, Ajax,…) pudiendo ver detalles interesantes sobre cada petición.

NetworkTab_5
(Ver Imagen)

Osea, básicamente lo mismo que hacemos con Firebug, Web Inspector, Dragonfly en su respectivo navegador.

15 plugins jQuery para la manipulación de tablas

7 sep

+ 4

Los elementos <table />, poco a poco, se están usando para lo que fueron creados, como la mejor forma de mostrar datos tabulados al usuario. Gracias a este uso, es posible usar javascript para añadirle funcionalidad a esas estáticas tablas.

tablas-dinamicas-jquery
(Ver Imagen)

Entre estos 15 plugins jQuery, seguro que encuentras algo para hacer que tus tablas de datos no sean planas y sin opciones.

DataTables

Permite:

  • Edición al vuelo
  • Carga de datos con Ajax
  • Paginación
  • Multiordenación por columnas
  • Extensible por plugins
  • Personalizable por CSS
  • Idiomatizable

uiTableFilter

Permite:

  • Filtrar datos al vuelo

Scrollable HTML Table

Permite:

  • Usar la estructura HTML
  • Limitar el alto y ancho de la tabla

Tablesorter

Permite:

  • Multiordenación por columnas
  • Extensible mediante widgets

Flexigrid

Permite:

  • Re-dimensionar las columnas
  • Re-dimensionar la tabla
  • Ordenación por columnas
  • Carga de datos mediante Ajax
  • Paginación
  • Mostrar u Ocultar columnas
  • Toolbar inferior con opciones
  • Busqueda de datos
  • API accesible

HeatColor

Permite:

  • Establecer rango de colores para visualizar más fácilmente resultados.

JQTreeTable

Permite:

  • Mostrar datos en forma de arbol dentro de tu tabla.

Ingrid

Permite:

  • Re-dimensionar columnas
  • Paginación
  • Ordenación por columna o fila
  • Personalización mediante CSS

jQuery ColumnManager plugin

Permite:

  • Mostrar u ocultar columnas.

jQuery treeTable

Permite:

  • Mostrar datos en forma de árbol.

CSV2Table

Permite:

  • Cargar datos de un fichero CSV

Table Pagination

Permite:

  • Paginación

jQuery TableRowCheckboxToggle

Permite:

  • Cambiar la class de la fila mediante checkboxes (para remarcarlas)

Table Drag and Drop jQuery plugin

Permite:

  • Hacer Drag and Drop en filas reordenandolas.

uiTableEdit

Permite:

  • Permite editar la tabla por el usuario

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.

Todo lo que siempre quisiste saber sobre JSON

6 jul

+ 7

JSON es la abreviatura de Javascript Objecto Notation y se trata de una forma de almacenar información de forma organizada y de fácil acceso.

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre"
};

A simple vista se obtiene una estructura muy clara y que ayuda a su comprensión. En este ejemplo hemos definido un pequeño objeto JSON llamado aNieto2k compuesto de una serie de atributos. De esta forma, podemos usarlos posteriomente siguiendo la siguiente estructura.

alert("aNieto2k tiene " + aNieto2k.edad + " años");

Funciones (no para transportar información)

Gracias a la versatilidad de las variables en Javascript nos es posible igualar uno de estos atributos a una función, generando así un método propio del objeto:

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
};

Ahora ya puedo saludar() :D

aNieto2k.saludar("Usuario");

Al formar parte del objeto JSON, podemos hacer uso de los atributos desde el propio método mediante el uso del operador this.

Las funciones no tienen sentido para el uso de JSON como transportador de información, así que únicamente lo dejamos como una curiosidad de la notación de objetos :D

Arrays

Otra facultad de los elementos JSON es la capacidad de insertar arrays como atributos y asu vez dentro definimos elementos JSON:

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
    "proyectos":[
    	{
    		"nombre" : 	"iMeneame.net",
    		"url"		 : 	"http://www.imeneame.net"
    	},
    	{
    		"nombre" :	"BlogoEdad",
    		"url"		 :  "http://edad.anieto2k.com"
    	}
    ]
};

De esta forma podemos recorrerlos como arrays que son:

var proyectos = aNieto2k.proyectos, html = '';
for (var x = 0 ; x < proyectos.length ; x++) {
	html += '<li><a href="' + proyectos[x].url + '">' + proyectos[x].nombre + '</a></li>';
}

Encadenando objetos JSON

Otra forma de agrupar elementos JSON es la de usar objetos JSON embebidos dentro de otros objetos JSON:

var aNieto2k = {
    "edad" : "28",
    "ciudad" : "Palma de Mallorca, ES",
    "genero" : "hombre",
    "saludar" : function(aquien) {
    	alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
    },
    "proyectos":{
    	"imeneame": {
    		"url"		 : 	"http://www.imeneame.net"
	    	},
  	  "blogoedad": {
    		"url"		 :  "http://edad.anieto2k.com"
	    	}
    }
};

Como podemos ver, realmente lo único que hemos hecho es insertar un objeto JSON dentro de un atributo padre, por lo que podemos acceder a el de la siguiente forma:

var URL = aNieto2k.proyectos.imeneame.url;

Úsos prácticos

Como sistema de almacenaje de datos, es perfecto para transportarlos de una página a otra, incluso de un sitio web a otro. Un ejemplo muy sencillo y recurrido es la posibilidad de obtener datos de Flickr mediante el uso de jQuery para obtener estos datos.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

En este ejemplo, sacado de la documentación de jQuery, vemos como lanzamos una petición de las últimas imagenes enviadas a Flickr que hayan sido catalogadas con el tag “Cat”. El resultado será evaluado y procesado para al final llegarnos a nosotros dentro de data, una variable que podremos recorrer como si de una variable estuvieramos hablando.

JSON nativo

Uno de los problemas encontrados con JSON es la evaluación de código, ya que este debe ser transformado en una variable para poder usarla y esto requiere el uso de eval() lo que hace que el tiempo de proceso se incremente considerablemente (ya vimos algo al respecto).

// Eval
var myObject = eval('(' + myJSONtext + ')');

// JSON Nativo
var myObject = JSON.parse(myJSONtext);

// Mix
var myObject = (JSON)?JSON.parse(myJSONtext): eval('(' + myJSONtext + ')');

Por suerte, los navegadores modernos (IE8, FF3.5, WebKit, ….) están implementado funcionalidades para olvidarnos de eval() y mejorar considerablemente el tiempo de proceso.

Crea un chat como el de gMail/Facebook con jQuery

15 may

+ 9

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

Espectacular administrador de archivos con MooTools

3 may

+ 6

Esta tarde @diegojimenez publicaba via Twitter un enlace a este espectacular administrador de ficheros desarrollado con MooTools. Con él nos será posible copiar, cortar, pegar incluso previsualizar ficheros, leer ficheros, descomprimir ficheros comprimidos o reproducir ficheros audio. Todo ello desde nuestro navegador.

filemanager_mootools
(Ver Imagen)

Entre las funcionalidades de las que disponemos nos encontramos con:

  • Navegación por los ficheros y directorios de tu servidor web
  • Renombrar, mover, borrar, copiar y descargar ficheros
  • Ver previsualización de imagenes, ficheros de texto, ficheros comprimidos o ficheros de audio
  • Interface muy agradable a la vista
  • Subir imagenes mediante FancyUpload
  • Posibilidad de auto redimencionar imagenes mientras subimos
  • Úsalo para seleccionar un fichero de donde quieras que puedes necesitar en el backend de tus aplicaciones
  • Integración con TinyMCE

Instalación

Despues de haber añadido las llamadas pertitentes al <head /> de nuestra aplicación deberemos definir nuestro FileManager con las opciones que deseemos. Y asignar el elemento que hará visible el administrador de ficheros.

var manager = new FileManager({
   url: 'manager.php',
   assetBasePath: '../Assets',
   language: 'en',
   uploadAuthData: {session: 'MySessionId'}
 });
 $('example1').addEvent('click', manager.show.bind(manager));

Para interactuar con los ficheros del servidor debemos especificar el fichero .php que realizará las tareas que solicitemos.

<?php
include('../Backend/FileManager.php');
$browser = new FileManager(array(
  'directory' => 'Files/',
  'assetBasePath' => '../Assets',
  'upload' => true,
  'destroy' => true,
));
$browser->fireEvent(!empty($_GET['event']) ? $_GET['event'] : null);

Como podemos ver, el código es muy sencillo y tenemos a nuestra disposición un objeto que nos permitirá trabajar con él más fácilmente.

Demo

Tenemos dos demos para hacernos una idea de lo que podremos conseguir.

Descargar

Podeis descargarlo directamente desde aqui.

BaseJS, un framework JS exclusivo para el iPhone

27 abr

+ 0

Paul Armstrong, ha desarrollado BaseJS. Un framework Javascript especializado en los nuevos dispositivos móviles, concretamente los que usan WebKit como navegador web.

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Una de las curiosidades de este framework es que usa Sizzle como selector CSS3, lo que nos permite obtener todas las posibilidades establecidas por el estandar CSS3 con la que seleccionar elementos de nuestro DOM, sin tener en cuenta la velocidad del mismo. Todo esto siempre y cuando el navegador no tenga incorporado querySelector(), en caso contrario el se encargará de generar la llamada ha Sizzle para que dispongamos de el selector.

En tan solo 8kb, no podemos hacer maravillas, pero nos dará más de lo que necesitamos para hacer aplicaciones robustas y completamente compatibles con estos dispositivos.

El framework se encarga de extender los objetos nativos del lenguaje y elementos del DOM, algo diferente a lo que hace jQuery, que extiende elementos ondemand. De esta forma una vez cargada la página, todos los elementos disponen de las nuevas funcionalidades.

Tambien se aprovecha de la curiosa “caché” del iphone para almacenar datos. Y es que esta caché, por llamarla de alguna manera, no es una caché en si mismo, sinó un sistema de ficheros menores a 25kb que mediante la modificación de cabeceras “Expires” y “Cache-control” nos permite almacenar 19 ficheros de 25kb lo que es igual a 475kb de caché :D (Aunque se borrará al reinciar el dispositivo)

Podeis ver el código y la documentación o si directametne quereis descargarlo y poneros a trabajar con él desde aqui mismo.

Carga asíncrona de grandes cantidades de dátos con Ajax

22 mar

+ 31

Ajax es una técnica para cargar asíncronamiente datos que podremos usar en nuestras páginas web. Esta técnica ha permitido a las aplicaciones web que evolucionen hasta el nivel actual y darán lugar a nuevas aplicaciones más potentes y complejas.

Esta técnica se basa en el uso de xmlhttprequest() para lanzar llamadas de forma asíncrona al servidor, pudiendo así devolver datos cargados posteriormente a la carga de la página. De esta forma la carga inicial de la página puede ser menor y dejar a elección del usuario cargar los datos a medida que los vayan necesitando.

El problema no lo encontramos con la cantidad de datos. Si el número de datos devueltos por el servidor es muy alto esto suele convertirse en una larga espera, con el fichero .gif de loading reglamentario.

Para intentar mitigar este problema he estado haciendo una serie de pruebas, con fín de dejar los ficheros XML que hasta ahora he estado usando en algunos proyectos.

XML

Durante mucho tiempo ha sido el sistema usado en muchas implementaciones para obtener datos de forma asíncrona. De ahí el propio nombre de AjaX (Asynchronous JavaScript And XML). Estos ficheros, generalmente ofrecen mayor interconexión con multiples herramientas.

En un uso para carga asíncrona, nos encontramos como príncipal problema el peso del fichero y tiempo invertido en recorrer el fichero XML para obtener los datos.

....
<hotel>
	<code>0000</code>
	<name>Hotel0</name>
	<direction>Calle0</direction>
	<telef>Telf0</telef>
	<geo>
		<lat>00</lat>
		<lng>00</lng>
	</geo>
</hotel>
....
// Javascript
var hotelDescription = data, hotelList = [];
var data = data.getElementsByTagName("hotel");
for (var x in data) {
	var hotel = data[x];
	if (!hotel.getElementsByTagName) continue;
	hotelList.push(hotel.getElementsByTagName("name")[0].firstChild.data);

		hotelDescription[hotel.getElementsByTagName("name")[0].firstChild.data] = {
			code: hotel.getElementsByTagName("code")[0].firstChild.data,
			name: hotel.getElementsByTagName("name")[0].firstChild.data,
			direction: hotel.getElementsByTagName("direction")[0].firstChild.data,
			telf: hotel.getElementsByTagName("telef")[0].firstChild.data,
			geo: {
				lat: hotel.getElementsByTagName("lat")[0].firstChild.data,
				lng: hotel.getElementsByTagName("lng")[0].firstChild.data
			}
		};

}

JSON

La primera alternativa, fué JSON, una implementación muy clara y natural de mostrar datos. Al tratarse de un fichero TXT podemos hacer que ocupe menos espacio y al evitar la estructura XML conseguimos que el tiempo invertido en recorrer el XML para obtener los datos.

Pero por contra, para poder usar los datos obtenidos hemos de usar la función eval() lo que nos penaliza la carga del fichero. Una vez evaluado el código el tiempo empleado en preparar los datos para poder usarlos es mínimo y sin duda, el más rápido de los sistemas exáminados.

....
{
	code: 0000,
	name: 'Hotel0',
	direction: 'Calle0',
	telef: 'Telf0',
	geo: {
		lat: 00,
		lng: 00
	}
}
....
// Javascript
var hotelDescription = data, hotelList = [];
for (var x in data) hotelList.push(data[x].name);

TXT

La gente de Flickr comentaba hace poco como hicieron para devolver más de 10.000 resultados en menos de 200ms. Y obviamente me ví obligado a contemplar esta técnica.

Se basa en usar una estructura preestablecida en un fichero de texto plano. Usando un separador por registro y otro por campos dentro de cada registro. De esta forma a la hora de cargar el fichero simplemente tendremos que hacer una serie de split() para cortar la cadena y convertirla en una variable que podamos usar.

Como mayor ventaja, esta técnica ofrece un tamaño de fichero mucho más pequeño que los comentados anteriormente. Por contra el tiempo de proceso sobre los datos para obtener una variable que pdamos usar es mucho mayor que la necesaria para procesar el fichero JSON, pero bastante menor que el empleado para un fichero XML.

0000:Hotel0:Calle0:Telf0:00:00|...
// Javascript
var tmp = data.split("|");
var hotelList = [];
var hotelDescription = [];
for (var x = 0, len = tmp.length; x<len; x++) {
	var hotel = tmp[x].split(":");

	hotelList.push(hotel[1]);

	hotelDescription[hotel[1]] = {
		code: hotel[0],
		name: hotel[1],
		direction: hotel[2],
		telf: hotel[3],
		geo: {
			lat: hotel[4],
			lng: hotel[5]
		}
	};
}

Comparativas

Para las pruebas, he realizado una pequeña aplicacion que nos permite cargar 500, 1000, 2000, 5000 o 10000 registros en los formatos anteriores (XML, JSON o TXT). Para los gráficos he usado los resultados obtenidos en Firefox 3.0.7 en Mac Os X.

Si queréis podéis probar por vosotros mismos los resultados que obtendríais en diferentes navegadores directamente aqui.

500 registros

500_registros

1000 registros

10000_registros

2000 registros

2000_registros2

5000 registros

5000_registros

10000 registros

10000_registros

Parece que los gráficos hablan por si solos, y podemos sacar una información interesante.

Conclusiones

bigajax

De los resultados obtenemos las siguientes premisas:

XML

  • Son los ficheros más pesados
  • El tiempo de procesamiento es mayor que los demás.

JSON

  • Son los ficheros que más tiempo tardan en cargar completamente.
  • El tiempo de procesamiento es el más rápido de los testeados.

TXT

  • Son los ficheros menos pesados.
  • El tiempo de proceso y carga son bajos aunque no destacan frente a los demás.
  • El tiempo total es el menor de los testeados.

Descargar el proyecto

He subido el proyecto a Github para que los descargueis y usais si quereis.

Chatino: Chat de tan solo 7KB con Pseudo comet

11 mar

+ 5

Mi tocayo, Andrés Fernandez me avisa de que ha desarrollado Chatino. Un Chat desarrollado en javascript usando una técnica de pseudo comet para conseguir un ajax de larga duración en tan solo 7kb (en el usuario). Una buena herramienta para los que necesiten un chat potente y funcional.

Preloaders.net, imagenes de loading en 3D

2 feb

+ 3

Jesus Moreno me muestra Preloaders.net, un sitio al estilo ajaxload.info que nos permite generar imagenes de “Cargando” para nuestras aplicaciones, pero en esta podemos generar imagenes con animaciones en 3D.