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.

Algoritmo de ordenamiento Quicksort en javascript

El algoritmo quicksort es un algoritmo de ordenamiento, como su nombre lo dice, es de los más rápidos y es recomendable su uso (no como el de burbuja).

Ver quicksort animado con jquery.

Aquí anexo el algoritmo de quicksort en javascript:

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)];

	//repetir hasta que i siga siendo menor que j
	do{

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

		//si i es menor o igual a j, los valores ya se cruzaron
		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--;
		}

	}while(i<j);

	    //si primero es menor a j llamamos la funcion nuevamente
		if(primero<j){ 			quicksort(primero,j); 		} 		//si ultimo es mayor que i llamamos la funcion nuevamente 		if(ultimo>i){
		    quicksort(i,ultimo);
		}
}

Como utilizarlo


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,24,34,54,5,4,2,99,2,3,1,0];

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

//imprimimos para ver el resultado
alert(arreglo)

Algoritmo de ordenamiento burbuja animado con jquery

En esta entrada hago uso del algoritmo burbuja en javascript que publique anteriormente, pero lo modifique para poder hacer una demostración utilizando jquery, de cómo va intercambiando los elementos en cada iteración, anexo el algoritmo funcionando, denle al botón comenzar para ver la animación hecha con jquery.

Y ahora el código completo y comentado:

CSS

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

Código HTML


<div id="contenido" style=" background:#efefef; height:30px; padding:10px;"></div>

<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Código Javascript/Jquery


//variables globales

arreglo=[11,15,12,8,1,5,4,2,99,2,3];
var i=0,j=0;
var iteracion; //sirve para guardar el evento de tiempo y poder pararlo

$(document).ready(function(){

	imprimirArreglo(arreglo)

});

function comenzar(){

	//comienza la iteracion con velocidad de 3 decimas de segundo cada iteración
	iteracion=setInterval(burbuja,300);

	//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>");
	}

}

function burbuja(){
	//recorreremos todos los elementos hasta n-1
	if(i<arreglo.length){

		//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	    if(j<(arreglo.length-i)){

			//comparamos
			if(arreglo[j]>arreglo[j+1]){
				 //guardamos el numero mayor en el auxiliar
				 aux=arreglo[j];
				 //guardamos el numero menor en el lugar correspondiente
				 arreglo[j]=arreglo[j+1];
				 //asignamos el auxiliar en el lugar correspondiente
				 arreglo[j+1]=aux;

			}

			j++;
		}else{
			j=0;
			i++;
		}

	}else{
	    //aqui se termina el algoritmo por lo cual paramos el setInterval
		clearInterval(iteracion);

	}

	//imprimimos el arreglo en cada iteración
	imprimirArreglo()

}

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

Las funciones setInterval y clearInterval son funciones de javascript, la primera sirve para ejecutar un código cada cierto tiempo, la segunda detiene las iteraciones de la primera.

Algoritmo de ordenamiento Burbuja en javascript

El algoritmo de ordenamiento burbuja (burbuja mejorada en este caso), es un algoritmo sencillo para ordenar elementos, ha llegado a no ser recomendado por su gran cantidad de iteraciones, pero no está demás conocerlo para comprender algoritmos de ordenamiento de más complejidad y mayor utilidad.

Ver algoritmo burbuja animado utilizando jquery.

A continuación plasmo la función en javascript y como utilizarla:

Función javascript

function burbuja(arreglo){
	//recorreremos todos los elementos hasta n-1
	for(i=0;i<(arreglo.length-1);i++)
	//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	for(j=0;j<(arreglo.length-i);j++){

		//comparamos
		if(arreglo[j]>arreglo[j+1]){
			 //guardamos el numero mayor en el auxiliar
		     aux=arreglo[j];
			 //guardamos el numero menor en el lugar correspondiente
			 arreglo[j]=arreglo[j+1];
			 //asignamos el auxiliar en el lugar correspondiente
			 arreglo[j+1]=aux;

		}

	}

	return arreglo
}

Como utilizarlo

//arreglo a ordenar
var arregloAOrdenar=[1000,9,111,8,1,5,4,2,99,2,3];

//invocamos la función
arregloAOrdenar=burbuja(arregloAOrdenar);

//imprimimos para ver el resultado
alert(arregloAOrdenar)

¿Cómo seleccionar el valor del radio button seleccionado con jquery?

Para seleccionar el valor del radio button seleccionado se hace de la siguiente manera:

HTML

<input type="radio" name="radiosfelices" value="1" >
<input type="radio" name="radiosfelices" value="2" checked="checked">
<input type="radio" name="radiosfelices" value="3">

Javascript

$(function(){

   var valor= $("input[name=radiosfelices]:checked").prop("value");

   alert(valor)
   // &gt;&gt; 2

})

Seleccionamos por el atributo name de nuestro grupo de radios y asignamos el parámetro checked, de esta forma nos regresara el valor del elemento que esta seleccionado.

Funciones para codificar y decodificar en base64 en C# .Net

Las siguientes funciones nos sirven para realizar una codificación y decodificación en base64 :

public class Encrypt
{
//codificar base64
public static string Base64_Encode(string str)
{
byte[] encbuff = System.Text.Encoding.UTF8.GetBytes(str);
return Convert.ToBase64String(encbuff);
}

//Decodificar base64
public static string Base64_Decode(string str)
{
try
{
byte[] decbuff = Convert.FromBase64String(str);
return System.Text.Encoding.UTF8.GetString(decbuff);
}
catch
{
//si se envia una cadena si codificación base64, mandamos vacio
return "";
}
}
}

Y Así se utiliza:

string base64=Encrypt.Base64_Encode("patito");

string cadenaNorma=Encrypt.Base64_Decode("3411f6d521ed0d17b6953e5741eaecca");

Recuerda agregar las siguiente librería:

using System.Text;

Función para encriptar en MD5 en C# .Net

La siguiente función nos sirve para realizar una encriptación en MD5:

public class Encrypt{
     public static string GetMD5(string str)
        {
            MD5 md5 = MD5CryptoServiceProvider.Create();
            ASCIIEncoding encoding = new ASCIIEncoding();
            byte[] stream = null;
            StringBuilder sb = new StringBuilder();
            stream = md5.ComputeHash(encoding.GetBytes(str));
            for (int i = 0; i < stream.Length; i++) sb.AppendFormat("{0:x2}", stream[i]);
            return sb.ToString();
        }
}

Y Así se utiliza:

string cadenaEncriptada=Encrypt.GetMD5("patito");

Recuerda agregar las siguientes librerías:

using System.Security.Cryptography;
using System.Text;

¿Cómo crear una notificación con jquery, sin utilizar plugins?

En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.

Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.

Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.

Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:


.Error{
     position:absolute;
    z-index:32000;
    top:10px;
    left:50%;
    padding:5px;
    width:500px;
    margin-left:-255px;
    text-align:center;
     border: #d8d8d8 1px solid;
    background:#F8F8F8;
    color:#f00;
    font-weight:bold;
    opacity:0;
     font-size:1.2em;
}

El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:

function MensajeError(mensaje, time) {

	//si no se envia la variable time, esta se define por defecto en 6 segundos
    if (time === undefined) time = 6000;

	//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
    $("body").append("&lt;div class='Error'&gt;&lt;/div&gt;");

     //asignamos el texto del error al div que creamos
    $(".Error").html(mensaje);

    //aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
    $(".Error")
  .animate({ //seleccionamos el div
      opacity: 1 //aparece
  }, 500  //la animación se realiza medio segundo
          , function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
              $(".Error").animate({ //seleccionamos nuevamente el div
                  opacity: 0 //ocultamos

              }, time   //tiempo de 6 segundos por defecto
              , function () {
				  				//al final en el callback del ultimo evento eliminamos el div de la pagina.
				  				 $(this).remove();
			  				}
              )
          })
}

Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).

EL problema de los departamentos de sistemas en México

Esta entrada está dedicada a un problema que se presenta en la mayoría de empresas mexicanas ajenas al software (que se dedican a otro giro) pero que cuentan con un departamento de sistemas en el cual se desarrolla el software a la medida el cual requiere la compañía.
Enumerare una lista de puntos que para mí engloban la gran problemática en los departamentos de sistemas:

  1. El primer problema radica en que la empresa se dedica a vender un producto que nada tiene que ver con software, por lo cual su departamento de sistemas no es su prioridad, esto ocasiona que el departamento tenga bajo presupuesto, lo cual afecta tanto el equipo a utilizar como el personal a contratar, una empresa de este tipo termina contratando personal por 12,000 pesos al mes en promedio y lo único bueno que tiene para ofrecerle es las prestaciones ya que el ambiente en el que trabajaran deja mucho que desear. Si ofreces bananas, pues obtendrás changos (frase de Alex).
  2. El segundo punto lo centrare en la documentación, en la mayoría de departamentos de sistemas no les pasa por la cabeza documentar su software, no piensan en que pasara cuando el personal encargado de cierto proyecto renuncie o sea despedido, o el nuevo personal que corregirá los bugs o se encargara de terminar sistemas a medias, todo esto solo dirige que su personal siga renunciando, si se tiene un software sin documentación, esperen contratar adivinos ya que ningún programador piensa igual.
  3. Como tercer punto, mencionare a los programadores de la vieja escuela que siguen programando con lenguajes de programación antiguos y lo peor aún es que son lenguajes que ya tienen problemas con los mismos sistemas operativos, todo esto nos dirige a desarrollos que duran mucho más tiempo cuando puede mejorarlos utilizando lenguajes de quinta generación que aceleran el proceso de desarrollo. Este problema en parte es culpa del programador que se cierra a lo que conoce o teme conocer algo nuevo y también es culpa de la empresa, ya que esta última no obliga a su personal a capacitarse pagándoles cursos y certificaciones.
  4. En el cuarto y último punto menciono algo importante y es el hecho de las empresas por no tener un modelo de mejora y evaluación de procesos, por ejemplo CMMI, MoProSoft. Esto es una gran parte de todo el espiral de problemas que hay, ya que no solo se necesita saber programar, se necesita saber organizar el proceso de un software, no solo es que llegue Pepe y te diga quiero esto y en tiempo real vas al código de producción (si directo de producción, no es broma), y se modifica el cambio, después Pepe se enoja por que fallaron cosas que ya funcionaban, pues claro no se sigue una organización para realizar el cambio, es lógico que fallen cosas, y todo esto hace que el sistema valla tomando forma de Frankenstein.

Para concluir yo recomendaría que las empresas le den más importancia al área de sistemas, ya que son el núcleo de su logística, casi todos los departamentos dependen de un software creado en esta área, y siempre el personal de sistemas termina llevándose todas las culpas en la mayoría de ocasiones. Se necesita mejorar los departamentos de sistemas ya que es un beneficio para la empresa, si se mejora los procesos como se realiza un software, con procesos como toma de requerimientos, análisis, desarrollo, pruebas e implementación se puede mejorar en calidad, y la calidad reduce los errores en el software ya que hacer un software cuando Pepe viene a joder pedir un cambio, es un 99% que va a fallar algo, y Pepe tendrá que seguir chingando dando vuelta al departamento hasta que se esté listo el cambio. También las empresas invirtiendo dinero en capacitación a su personal tendrán gente más preparada y no se cerraran en utilizar herramientas de los años 80, a lo cual harán los desarrollos de forma más rápida. Y como ultima sugerencia, optar por tener un modelo de mejora y evaluación de procesos no está demás, ya que esto les daría un estatus de calidad superior y lo cual se vería sin duda reflejado en los ingresos monetarios que obtiene la empresa.

Existen muchos más puntos pero trate de englobar los que creo son los principales.

Función para encriptar en sha1 en C# .Net

La siguiente función nos sirve para realizar una encriptación en SHA1 en C# .Net.

 public class Encrypt
    {
      public static string GetSHA1(string str)
        {
            SHA1 sha1 = SHA1Managed.Create();
            ASCIIEncoding encoding = new ASCIIEncoding();
            byte[] stream = null;
            StringBuilder sb = new StringBuilder();
            stream = sha1.ComputeHash(encoding.GetBytes(str));
            for (int i = 0; i < stream.Length; i++) sb.AppendFormat("{0:x2}", stream[i]);
            return sb.ToString();
        }
   }

Y se utiliza así:

string cadenaEncriptada=Encrypt.GetSha1("patito");

Recuerda agregar las siguientes librerías para utilizarla:

using System.Security.Cryptography;
using System.Text;