Realizar una conexión al correo para ver los mails con C# .Net. #gmail #pop3 #OpenPop.Net

En esta entrada tratare el tema de realizar una conexión por el protocolo Pop3 para poder leer nuestro correo electrónico, en este caso utilizare una cuenta de Gmail y obtendré los correos de la bandeja de entrada de la misma.

Para poder conectarnos haremos uso de una librería llamada OpenPop.Net que ya realiza la conexión de una manera rápida. La podemos descargar desde su página, o directamente de Nuget en visual studio buscándola por su nombre.

Es importante que realicemos en nuestra cuenta de Gmail los siguientes cambios, ya que Gmail cuenta con restricciones a clientes externos para leer los mails.

Primero(con sesión creada en gmail para hacer estos cambios claro) debemos activar la opción de permitir conexiones de aplicaciones externas en la siguiente liga:

https://www.google.com/settings/security/lesssecureapps

Seleccionamos Activar y Guardar.

La segunda configuración es opcional y es para que Gmail nos permita descargar varias veces los mensajes aunque sea ya leído o ya descargado, basta con que vallamos a la configuración de Gmail y seleccionemos la siguiente opción y demos guardar.

gmail configuracion

Una vez tengamos la librería y la configuración en Gmail podemos hacer uso de la siguiente clase que he escrito y comentado pasó por paso:


using OpenPop.Mime;
using OpenPop.Pop3;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Remoting.Messaging;
using System.Text;

namespace Sincronizador_SMTP.Business.Connect
{
 /// <summary>
    /// clase que se conecta por smtp
    /// </summary>
    class ConnectPop3
    {
        //usuario/mail de gmail
        private string username = "[email protected]";
        //password
        private string password = "tupassword";
        //el puerto para pop de gmail es el 995
        private int port = 995;
        //el host de pop de gmail es pop.gmail.com
        private string hostname = "pop.gmail.com";
        //esta opción debe ir en true
        private bool useSsl = true;

        public List<Message> getMensajes()
        {
            try
            {

                // El cliente se desconecta al terminar el using
                using (Pop3Client client = new Pop3Client())
                {
                    // conectamos al servidor
                    client.Connect(hostname, port, useSsl);

                    // Autentificación
                    client.Authenticate(username, password);

                    // Obtenemos los Uids mensajes
                    List<string> uids = client.GetMessageUids();

                    // creamos instancia de mensajes
                    List<Message> lstMessages = new List<Message>();

                    // Recorremos para comparar
                    for (int i = 0; i < uids.Count; i++)
                    {
                           //obtenemos el uid actual, es él id del mensaje
                           string currentUidOnServer = uids[i];

                            //por medio del uid obtenemos el mensaje con el siguiente metodo
                            Message oMessage = client.GetMessage(i + 1);

                            //agregamos el mensaje a la lista que regresa el metodo
                            lstMessages.Add(oMessage);

                    }

                    // regresamos la lista
                    return lstMessages;
                }
            }

            catch(Exception ex){
               //si ocurre una excepción regresamos null, es importante que cachen las excepciones, yo
               //lo hice general por modo de ejemplo
                return null;
            }
        }
}

Y de esta manera utilizamos la clase y recorremos los mensajes, y a su vez mostramos el asunto para probar que si corresponde a lo que tenemos en nuestra cuenta de Gmail.


//creamos el objeto
ConnectPop3 oCP3 = new ConnectPop3();

//invocamos el metodo para obtener mensajes
List<OpenPop.Mime.Message> lstMensajes = oCP3.getMensajes();

//recorremos y mostramos el asunto
foreach(OpenPop.Mime.Message oMensaje in lstMensajes){
                Console.WriteLine(oMensaje.Headers.Subject);
}

Nota: Pop3 al igual que IMAP es un protocolo para leer mails, si deseamos enviar mails debemos conectarnos con el protocolo SMTP.

¿Cómo obtener un hijo por su posición con jquery? #nth-child

Para obtener un hijo por su posición con jquery haremos uso de la pseudo-clase de css nth-child, esta pseudo-clase sirve para seleccionar un elemento hijo por su posición la cual tiene la siguiente sintaxis: grupoElementos:nth-child(posición).

A continuación un ejemplo de cómo se utiliza:

Html

  <div id="muchosDivs">
    	<div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
  </div>

Jquery

$(function(){

        //seleccionamos del conjunto de divs hijos de #muchosDivs el tercer div
	$divTres=$("#muchosDivs div:nth-child(3)");

        //mostramos el div seleccionado
	alert($divTres.html())

})

La función alert() nos mostrara el número 3.

Realizar una búsqueda en una columna en específico de una tabla con #jquery.

Para realizar una búsqueda en una columna en específico de una tabla podemos hacer uso del filtro eq que nos sirve para seleccionar el número de la columna de elementos, de esta manera podemos realizar la búsqueda solo por una columna en particular.

En el siguiente ejemplo muestro como se puede buscar un valor en la primera columna, y después obtener la fila entera (por medio de la función parent() de jquery) para mostrar su resultado (o lo que deseen hacer ustedes con esos datos).

En seguida muestro el ejemplo en el cual pueden ver el resultado, y debajo el código que hace posible esta funcionalidad:

Ejemplo:

Html


<label>Captura un código</label>
	<input type="text" id="busqueda"/>
    <input onclick="jsBuscar();" type="button" value="Buscar" /><br /><br />

    <table id="miTabla">
    	<tr>
        	<th>Codigo</th>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
        	<td>1</td>
            <td>Pedro</td>
            <td>34 años</td>
        </tr>
    	<tr>
        	<td>2</td>
            <td>Luis</td>
            <td>34 años</td>
        </tr>
        	<tr>
        	<td>3</td>
            <td>Juan</td>
            <td>15 años</td>
        </tr>
        	<tr>
        	<td>4</td>
            <td>Jesus</td>
            <td>20 años</td>
        </tr>
        	<tr>
        	<td>5</td>
            <td>Pablo</td>
            <td>23 años</td>
        </tr>
    </table>

    <div id="mostrarResultado">

    </div>

Jquery


//función que realiza la busqueda
function jsBuscar(){

		//obtenemos el valor insertado a buscar
		buscar=$("#busqueda").prop("value")

		//utilizamos esta variable solo de ayuda y mostrar que se encontro
		encontradoResultado=false;

		//realizamos el recorrido solo por las celdas que contienen el código, que es la primera
		$("#miTabla tr").find('td:eq(0)').each(function () {

			 //obtenemos el codigo de la celda
			  codigo = $(this).html();

			   //comparamos para ver si el código es igual a la busqueda
			   if(codigo==buscar){

					//aqui ya que tenemos el td que contiene el codigo utilizaremos parent para obtener el tr.
					trDelResultado=$(this).parent();

					//ya que tenemos el tr seleccionado ahora podemos navegar a las otras celdas con find
					nombre=trDelResultado.find("td:eq(1)").html();
					edad=trDelResultado.find("td:eq(2)").html();

					//mostramos el resultado en el div
					$("#mostrarResultado").html("El nombre es: "+nombre+", la edad es: "+edad)

					encontradoResultado=true;

			   }

		})

		//si no se encontro resultado mostramos que no existe.
		if(!encontradoResultado)
		$("#mostrarResultado").html("No existe el código: "+buscar)
}

Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []

Los 8 personajes más importantes en la computación

Existen muchas personas que han aportado algo para conocer la ciencia de la computación como hoy en día la conocemos, pero hay quienes son pilares en el desarrollo de esta, veamos ocho de las personalidades que fueron pilares en el desarrollo de la computación.

Euclides (325-ca. 265 a. C.)

euclides

Euclides era un matemático griego, considerado el padre de la geometría, pero pocos saben que fue de los primeros en describir un algoritmo como tal (instrucciones o pasos a seguir para un fin, utilizados en computación). Su famoso algoritmo de Euclides descrito en su obra Elementos, sirve para encontrar el máximo común divisor de dos elementos (enlace para ver la descripción del algoritmo).

Abu Abdallah Muḥammad ibn Mūsā al-Jwārizmī (780 -850 ¿?)

Al_Khwarizmi

El dueño de este nombre (mejor conocido como al-Juarismi) tan emblemático lo tiene el matemático persa del siglo IX, este matemático creo la palabra algoritmo derivada de algebra, palabra que nace en su obra de nombre “Kitab al jabr wa´l-muqabala” (de nombres bonitos, nacen cosas bonitas), esta obra se cree es la más antigua que habla sobre algebra, por lo cual se da el merito a Al-Juarismi de ser el padre de la misma. En este texto se expone por primera vez la resolución de ecuaciones de primer y segundo grado, y un conjunto de reglas que guían al lector para resolver problemas, dándole significado a lo que es un algoritmo, hoy utilizado en todas las computadoras del mundo.

Blaise Pascal (1623 – 1662)

pascal

Fue un matemático francés del siglo XVII, fue el creador de una de las calculadoras mecánicas más antiguas, la Pascalina. La maquina servía al inicio para sumar, pero más tarde Pascal agrego aditamentos para que permitiera restar.

Lo interesante de la Pascalina, es que es una maquina mecánica de engranes y ruedas, que permitían sumar o restar. La maquina tenía 8 ruedas (6 para los enteros y 2 para los decimales) cada una con el número del 0 al 9; la Pascalina al momento de sumar el 1 al 9, la rueda que contenía el 9 se convertía en un 0, y la rueda vecina a la izquierda se movía de la posición inicial 0 al 1, dando 10 nuestra suma.

Alonzo Church (1904 – 1995)

church

Matemático y Lógico norteamericano, esta persona es la responsable de crear el concepto de computación, ya que fue el primero que describió este concepto en su sistema de nombre “Calculo Lambda” (con ayuda de Stephen Kleene).
El cálculo lambda nació para resolver el problema de Entscheidungsproblem (decimo problema de Hilbert). En el año de 1900, en el congreso Internacional de Matemáticos en Paris, el matemático David Hilbert planteo 23 problemas, en los cuales destaca el Entscheidungsproblem (o decimo problema de Hilbert). Hilbert buscaba un procedimiento algorítmico general para resolver un proceso matemático, y que este proceso nos dijera si la sentencia tenia solución o no.
El sistema de cálculo lambda sirve para definir si una función es computable, es decir, si un problema por medio de pasos y reglas puede llegar a su solución. Se puede considerar el cálculo lambda como el más pequeño lenguaje de programación.

Alan Turing (1912 – 1954)

Mucho circula alrededor de este gran matemático, criptógrafo y experto en computación, que muchos lo recuerdan por su suicidio con la manzana envenenada con cianuro.

Se podrían escribir libros y libros sobre lo que aporto a la computación, pero existe algo que sobresale entre todo, es la famosa maquina de Turing.

Al igual que Church, Alan Turing (alumno del primero) creó su sistema para resolver el decimo problema de Hilbert. Para resolver el problema concibió una maquina abstracta (objeto no físico), que tenía 3 elementos: una cinta de entrada, una cinta de salida y un procesador central (como los micros que tienes en tu computadora). La maquina funciona por medio de una tabla de reglas las cuales se aplican dependiendo el estado en que se encuentre la cinta, por ejemplo: si la cinta está en el estado 1 y hay una regla que nos dice que nos movamos al estado 3, la cinta se mueve y se vuelve a verificar la regla para ese estado, hasta llegar al estado final (lo cual nos diría que el problema fue resuelto). A partir de esta simple maquina hipotética, nació todo el manejo que realiza el CPU de las computadoras.

Jhon Von Neumann (1903 – 1957)

john_von_neumann

Matemático húngaro-estadounidense, es considerado uno de los más grandes matemáticos de la historia.

Su contribución en la computación radica en la Arquitectura de von Neumann. Esta arquitectura se basa principalmente en un la unidad aritmético-logica (ALU) que realiza los cálculos aritméticos, la unidad de control que se encarga de ir a la memoria principal por instrucciones para realizar, una memoria principal o memoria Ram que sirve para almacenar datos temporalmente, el sistemas de entrada/salida (un teclado de entrada o el monitor de salida por ejemplo) y el bus de datos que hace la comunicación de los datos en los distintos componentes. La mayoría de computadoras utilizan este modelo arquitectónico.

Ada Lovelace

Ada Lovelace fue la primera persona en crear un algoritmo en una maquina analítica. Por lo cual es considerada como la primer programadora y programador de la historia.

Utilizando la maquina analítica de Babbage pudo crear un algoritmo compatible con dicha maquina que resolviera los números de Bernoulli.

Dicho algoritmo escrito por Ada es también considerado el primer programa en la hitoria.

Dennis Ritchie (1941 – 2011)

dennis


Fue un científico de la computación, mejor conocido por crear junto a Ken Thompson el sistema operativo de nombre Unix, que hoy en día los hijos (directos o indirectos) que desencadeno este sistema operativo son utilizados por la mayoría de personas; ¿no me creen? algunos hijos directos o indirectos son Linux, Android, IOS y la lista de sistemas operativos llega a cuatro ceros o más.
Pero antes de crear Unix, Dennis creo el lenguaje de programación más conocido en el mundo, el lenguaje C.
Toda persona que se dedica a la informática, ha tenido un encuentro con este lenguaje, y algo que destaca mas (para mi claro) que haber creado el sistema operativo Unix, es que los lenguajes que utilizan los desarrolladores de software hoy en día, le deben mucho al lenguaje C, ya que fue gran influencia a lo que se utiliza en la época moderna para crear sistemas computacionales.

Estos fueron 8 personajes que sobresalen como pilares de la computación que conocemos hoy en día, no son los únicos claro, pero si son de los más relevantes. Después de las aportaciones estas personas (y algunas otras), ya conocemos todo lo demás, que gracias a ellos tenemos para nuestra comodidad en cuestión de computadoras.

Detectar el control inalámbrico de Xbox en C# .Net sin utilizar XNA

Esta entrada está dedicada para enseñar cómo se puede detectar los controles de XBOX inalámbricos conectados a un receptor inalámbrico (PC Wireless  Gaming  Receiver) con C# .Net sin utilizar XNA.

controll xbox y receptor

Para poder detectar los controles haremos uso de una librería externa de nombre SlimDX, esta librería la podemos bajar por medio de Nuget o de su pagina http://slimdx.org/. SlimDX es una librería Open Source que nos permite construir programas usando DirectX, y una de sus funciones es detectar los Joystick.

También utilizaremos la clase GamepadState que ha hecho Renaud Bédard y podemos descargarla de su sitio, él ya nos facilita lo necesario para detectar los botones del control, palancas etc. Igual anexo la clase en esta liga, solo tienen que copiar y pegar el código en una clase del proyecto de Visual Studio.

Ahora que ya tenemos la librería SlimDX y la clase GamepadState solo nos queda comenzar a utilizar y detectar el control de la siguiente manera:

using SlimDX.XInput;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ControlXBox
{
    class Program
    {
        static void Main(string[] args)
        {
            //creamos una instancia GamepadState y le enviamos la constante de control numero 1
             GamepadState control = new GamepadState(UserIndex.One);

             //ahora detectamos si el controll esta conectado
             if (control.Connected)
             {
                 Console.WriteLine("El control esta conectado");

                 //creamos un ciclo infinito solo para detectar el control cada que presionemos un boton

                 while(true){

                     //detectamos si se realizo una modificación, se presiono un botón o se movio una palanca etc.
                     control.Update();

                     //imprimimos el boton presionado en consola
                     Console.WriteLine(control.Controller.GetState().Gamepad.Buttons.ToString());

                 }

             }
             else
             {
                 //Si el control no esta conectado mostramos mensaje de que no esta conectado :(
                 Console.WriteLine("El control NO esta conectado");
                 Console.ReadLine();

             }

        }

    }
}

Cree un proyecto de consola de Visual Studio y aquí plasmo el resultado en video para que puedan ver que funciona bien:

Cualquier duda en los comentarios pueden preguntar.

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Linq, introducción y ejemplos rápidos en C# .Net

Esta entrada hablare sobre LINQ, lo necesario para que comprendas fácilmente y rápido, sin tanta teoría ni palabras raras.

Linq nació por allá del 2008 y desde entonces nos ha facilitado la vida, ya que agrega funcionalidades al lenguaje de c# o Visual Basic .Net respecto cualquier almacen de datos, es decir, nos permite aplicar algo parecido a consultas de SQL a una lista, un xml, o ¿porque no?, a la misma base de datos.
Algo que el mismo Microsoft recalca en todos sus cursos es que Linq se divide en tres acciones que son:

  1. Obtención de origen de datos.
  2. Creación de la consulta
  3. Ejecución de la consulta.

Terminemos de la palabrería y vayamos a los ejemplos.

El primer ejemplo es cómo podemos ordenar una lista de enteros con Linq y se puede hacer de la siguiente manera.

1. Obtención de origen de datos:

 int[] arregloEnteros = { 1, 2, 3, 5, 3, 2, 8, 9 };

2. Creación de la consulta

 
IEnumerable<int> lstEnterosOrdenados = from nums in arregloEnteros 
                                       orderby nums 
                                       select nums;

En este punto aún no se ejecuta la consulta solo la guardamos en este caso en una colección de la instancia IEnumerable. Cualquier tipo de dato que admita implícitamente la interfaz IEnumerable o alguna de sus derivaciones, se le puede aplicar LINQ.

3. Ejecución de la consulta (ahora si aquí se ejecuta la magia de LINQ)

 

foreach(int n in lstEnterosOrdenados){      
 Console.WriteLine(n);            
}

De esta manera nuestro resultado es el siguiente:

linq1

Como vemos de una manera rápida podemos realizar operaciones que son el pan de cada día.

Ahora veamos otros ejemplos para comprender mejor el alcance de LINQ:

Filtrar elementos

 
//Origen de datos 
int[] arregloEnteros = { 1, 2, 3, 5, 3, 2, 8, 9 }; 

//Consulta, utilizamos where como en sql para obtener numeros menores a 5 

IEnumerable<int> lstEnterosMenoresCinco = from nums in arregloEnteros                                                      
                                          where nums < 5                                                      
                                          select nums;

//Ejecucion 
foreach (int n in lstEnterosMenoresCinco) {         
            Console.WriteLine(n); 
}
linq2

Linq en elementos complejos


//clase Complejo, una clase que nos servirá para el ejemplo
 public class Complejo
        {
             public int numero{get;set;}
             public string cadena{get;set;}

             public Complejo(int numero, string cadena)
             {
                 this.numero = numero;
                 this.cadena = cadena;
             }

             public string imprime()
             {
                 return numero + " " + cadena;
             }
        }

          

//origen de datos            
Complejo[] lstComplejos={ 
new Complejo(1,"pato"),                                   
new Complejo(5,"perro"),                                      
new Complejo(9,"pajaro"),                                      
new Complejo(10,"pez"),                                      
new Complejo(2,"ave"),                                      
new Complejo(4,"gusano"),                                    
};       

//consulta            
IEnumerable<Complejo> lstComplejosConP =from d in lstComplejos                                                  
where d.cadena.StartsWith("p")                                                    select d;            

//ejecución de consulta            
foreach(Complejo c in lstComplejosConP){                  
   Console.WriteLine(c.imprime());            

}

linq3

Linq en elementos complejos obtener una colección reducida

//utilizamos la misma clase Complejo

//origen de datos            
Complejo[] lstComplejos={ 
new Complejo(1,"pato"),                                      
new Complejo(5,"perro"),                                      
new Complejo(9,"pajaro"),                                      
new Complejo(10,"pez"),                                      
new Complejo(2,"ave"),                                      
new Complejo(4,"gusano"),                                    
};

//Consulta, reducimos la clase Complejo a una lista de cadenas

IEnumerablex lstSoloCadenas = from d in lstComplejos
select d.cadena; 

//ejecución de consulta   

foreach (string s in lstSoloCadenas){
   
    Console.WriteLine(s);    

}

linq4

Con esto es más que suficiente para que hayan entendido LINQ y su potencial, de aquí en adelante solo les queda practicar y ver lo practico que es esta característica en .Net.

Algoritmo de ordenamiento Quicksort en Javascript animado con jquery

En esta entrada utilizare el algoritmo de quicksort en javascript que publique anteriormente y lo acomode de una manera especial para poder mostrar poco a poco como se va ordenando un conjunto de números por medio de este método de ordenamiento.

Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.

A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:

Y ahora el código que hace posible esta demostración:

CSS

.bloque{
float:left;
margin-left:5px;
margin-bottom:2px;
width:20px;
height:20px;
text-align::center;
padding:5px;
background:#fff;
}

HTML


<div id="contenido" style=" background:#efefef; height:90px; padding:10px;"></div>
<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Javascript


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];

imprimirArreglo();

function comenzar(){

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//desabilitamos boton
$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

//borramos el contenido del div del contenido
$("#contenido").html("");

//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){

//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}

}

//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo

//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];

iteracionQS(i,j,pivote,primero,ultimo)

}

//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){

//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;

//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){

//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];

//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux

// incrementamos y decrementamos i y j
i++;
j--;

imprimirArreglo(arreglo);
}

//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){

//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){

//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.