Contenido

Crea un chat como el de gMail/Facebook con jQuery

15 May

aNieto2k hace 51 días en: Asides, PHP, Programacion, ajax, javascript, webdev

+ 5

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

aNieto2k hace 63 días en: Programacion, ajax, javascript, webdev

+ 5

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

aNieto2k hace 69 días en: Programacion, ajax, iphone, javascript, webdev

+ 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

aNieto2k hace 105 días en: Programacion, ajax, estandares, javascript, web, webdev

+ 29

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

aNieto2k hace 116 días en: Asides, Programacion, ajax, javascript, webdev

+ 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

aNieto2k hace 153 días en: Asides, Programacion, ajax, webdev

+ 2

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.

Pseudo-ajax para leer ficheros locales

12 Ene

aNieto2k hace 174 días en: Curiosidades, Programacion, ajax, javascript, webdev

+ 6

CSSGalery.info nos muestra una solución para leer fichero cuando ejecutamos HTML desde nuestro local. Detectando si la página está siendo ejecutado en un entorno local mediante el protocolo file: de la URL decide como actuar ante una llamada a la función get_content().

function get_content(url,update) {
	if ( document.location.protocol == "file:" ) {
		// console.log("local");
		var ifr = new IFrame({
		src:url,
		events:{
		load: function() {
				$(update).set("html", this.contentWindow.document.body.innerHTML );
			}
		}
		}).inject(document.body);
	}else {
		// console.log("server");
		var myHTMLRequest = new Request.HTML({
		update:update,
		}).get(url);
	}
}

La función get_content(), a la que le pasamos la ruta y donde queremos descargar el cotenido se encarga de hacer todo el trabajo por nosotros. Para los que no usamos MooTools he montado una versión en JS sin necesidad de trabajar con ningún framework.

function get_content(url,update) {
  if ( document.location.protocol == "file:" ) {
    var ifr = document.createElement("iframe");
    ifr.src = url;
    ifr.onload = function() {
	document.getElementById(update).innerHTML = this.contentWindow.document.body.innerHTML;
    }
    document.getElementsByTagName("body")[0].appendChild(ifr);
  }else {
    var ajax = (XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    ajax.open('GET', URL);
    ajax.onreadystatechange = function(){
		document.getElementById(update).innerHTML = ajax.responseText;
    };
    ajax.send(null);
  }
}

Desde CSSGallery.info podemos testear la versión online y/o descargar un zip para probarlo en nuestro local.

La calculadora tambien se hace 2.0

5 Ene

aNieto2k hace 181 días en: Asides, PHP, Programacion, ajax, webdev

+ 1

Una muestra que la Web 2.0 está aquí es que hasta la calculadora se está inmersa en este mundo. Lo curioso es que tenga que hacer una petición ajax para cada cálculo… pero es una aproximación.

CSSHttpRequest, ajax cross-domain con CSS

24 Oct

aNieto2k hace 254 días en: CSS, Programacion, ajax, javascript, webdev

+ 4

El Ajax entre diferentes dominios es algo que veremos dentro de unos meses en las nuevas versiones de los navegadores actuales. Mientras tanto los desarrolladores están dando soluciones a esta necesidad y ahora, usando la manipulación del CSS desde Javascript solventan el problema

CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

Si revisamos el código, vemos la magia de esta técnica:

var s = chr.getStyleSheet();

    // IE
    if(s.addImport) {
        index = s.addImport(url);
        item = s.imports(index);
    }

    // W3C
    else if(s.insertRule) {
        index = s.insertRule("@import url(" + url + ");", 0);
        item = s.cssRules[index];
    }

Me encanta ver como la necesidad despierta estas maravillas entre los desarrolladores.

16 formularios de contacto con Ajax

22 Oct

aNieto2k hace 256 días en: Asides, Programacion, ajax, javascript, webdev

+ 1

Interesante recopilatorio de formularios de contacto que usan la tecnología Ajax para complementar funcionalidades y ofrecer al usuario una página atractiva y cómoda de usar.

← Anterior ↑