En WebCodr encuentro 15 códigos útiles en Javascript muy usados por los servicios web 2.0.

• Carga de imagen y efecto 'fading'
• Tabla dinamica
• Calendario
• Tabulador o pestañas
• Ventanas
• Zoom de imagenes
• JavaScript Lightbox
• Carrito de compras con Drag & Drop
• Autocompletado
• Drag & Drop de elementos
• Logueo
• Detectar y redimensionar tamaño de fuente
• Mostrar ubicación y texto en mapas
• Album y presentación de fotos
• Desplazamiento de contenido

Se trata de un plugin para Prototype que permite almacenar los valores de los campos en las cookies. Según el demo trabaja con las etiquetas input y select. Esto realmente es útil, pues si deseamos crear un formulario para comentarios (por ejemplo) es vital colocar una opción "recordar mis datos" para que de esa manera le ahorremos tiempo a los usuarios de estar nuevamente escribiendo valores que puede guardarse en el navegador. Como ya se indicó, solo se necesita de prototype y cookies.

Name <input type="text" name="name" value="" id="name">

Ver ejemplo en la web del autor ó ver el código fuente.

Hace unos días atrás Dustin Diaz incluyó un interesante artículo sobre su librería JavaScript DED|Chain. Esta biblioteca te permite combinar la potencia de la librería de Yahoo (YUI) y la sencillez de uso de jQuery.

En este blog no hemos hablado del jquery aún, una librería javascript ligera y sumamente útil. Pero para los conocedores, si en jquery escribimos algo así:

$('#content a').click(function(){ 
 $.post(this.href, function(resp) { 
  $('#result').append(resp); 
 }); 
 return false; 
});

Usando DED|Chain, sería así:

_$('#content a').on('click', function(el) { 
 _$('#result').populate(el.href); 
}, true);

Interesante ¿verdad? Puede consultar la documentación en la página del autor.

Clipperz es un sistema online para contraseñas el cual trabaja con una biblioteca Javascript que provee a los desarrolladores una extensa y efectiva serie de funciones criptográficas. Es una solución a todos esos sitios donde se requiere de contraseña para un acceso seguro: Amazon, Digg, Flickr, servicios Google, Yahoo, etc.

Por otra parte, la librería Clipperz contiene porciones de código de otras bibliotecas, como: MochiKit, YUI y Ext, los que permiten una códificación más rápida.

Para ahorrar tiempo de descarga y uso de memoria, el código Clipperz esta comprimido en un solo archivo usando el Dojo Compressor. Esta biblioteca incluye diversas formas de criptografías:

• Protocolo de autentificación SRP (Secure Remote Password)
• Funciones hash SHA2
• Cifrado simétrico AES
• Fortuna PRNG
• Big Integers (enteros largos para las contraseñas)

Mas información sobre este interesante sistema online lo podremos encontrar en su blog.

Slider Control

Veremos ahora lo relacionado con el control Slider del script.aculo.us, sí, ese control deslizante al cual podemos darle muchos usos. Veamos su sintaxis y algunas de sus principales opciones:

new Control.Slider('id_deslizador','id_pista', [opciones]); 

Donde opciones (las principales por supuesto) :

• axis: Determina la dirección del control Slider. Por defecto es horizontal.
• range: Determina el valor minimo y máximo. Uso: $R(2,10). En caso de no especificar esta opción, 0 y 1 son valores por defecto.
• values: Un array donde determinamos los elementos que serán recorridos con el Slider. Ej. values: [2,4,6,8,10], esto hará que cuando nos deslicemos por el control, forzadamente cambiará a estos valores.

Las demas opciones puede consultarlos en el wiki de script.aculo.us.

Funciones de retorno (Callback)

• onSlide: Nos permite ver nuestra ubicación entre el rango mientras nos desplazamos por el Slider.
• onChange: Nos permite ver nuestra ubicación cuando terminamos de desplazarnos.

Ver Artículo Completo ››

En el artículo anterior vimos que es posible capturar todos los elementos de los bloques div y su ubicación mediante la función JavaScript obtenerElementos(). Entonces nos toca ahora enviar esa cadena de valores a un script PHP para que se encargue de cortarlos en los fragmentos correspondientes a los nombres de los empleados (contratados y despedidos) y guardalos en la base de datos.

Pero antes de eso vamos a modificar la funcion obtenerElementos() para que solo envie la cadena de valores y divida a los elementos de cada bloque por un slash ( / ), esa cadena obtenida la pasamos a una función EnviarDatos() que explicaremos luego. La idea es que la funcion obtenerElementos() envie este tipo de cadena: empleado_1_grupo_1, empleado2_grupo_1 / empleado_1_grupo2, empleado_2_grupo_2

function obtenerElementos() {
 var secciones = document.getElementsByClassName('seccion');
 var alerttext = '';
 var separador = '';
 secciones.each(function(seccion) {
  alerttext += separador + Sortable.sequence(seccion);
  separador = "/";
 });
 EnviarDatos(alerttext);
 return false;
}

Veamos ahora la función EnviarDatos() junto con la función que nos permitirá usar el objeto XMLHttpRequest. En nuestro caso separamos estás funciones en un archivo al que llamamos ajax.js

function Ajax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function EnviarDatos(cadena){
 ajax.Ajax();
 ajax.open("POST", "guardar.php",true);
 ajax.onreadystatechange=function(){
  if (ajax.readyState==4) {
   alert(ajax.responseText);
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 ajax.send("cadena="+cadena)
}

Ver Artículo Completo ››

Ahora veremos la forma de combinar la característica del drag drop (script.aculo.us) con PHP y MySQL, esto con el objetivo de que los elementos que hemos seleccionado o movido de un lugar a otro se queden guardados en una base de datos.

La aplicación se basará en el ejemplo de drag drop que realizamos días atrás. El artículo relacionado comentó sobre el elemento Sortable y sus opciones para la creación de elementos con drag drop. Pero veremos ahora algunos opciones mas. Empecemos entonces.

Creación de las tablas

Nuestras tablas están relacionadas con la condición del empleado. Vamos a crear dos tablas: contratado y despedido, algo simple para no complicarnos. Cada tabla tendrán sus campos: id, nombre_contratado e id, nombre_despedido, respectivamente. [Ver script SQL]

Y también creamos un script PHP para la conexión a la base de datos.

<?php
   //Configuracion de la conexion a base de datos
   //Cambie estos datos por los suyos
   $bd_host = "localhost"; 
   $bd_usuario = "root"; 
   $bd_password = "123456"; 
   $bd_base = "ribosomatic"; 
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
   mysql_select_db($bd_base, $con); 
?>

Ahora vamos por partes

Creamos un archivos index.php y especificamos los archivos del paquetes script.aculo.us que usaremos:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

Vamos a crear una función en JavaScript para obtener el id de cada contenedor div donde aparecerán los nombres de los empleados contratados y despedidos.

• La variable secciones obtiene todos los contenedores div cuya atributo class sea seccion
• Declaramos una variable de cadena vacia textoprueba
• Revisamos las distintas secciones a través de un bucle y cada iteración la asignamos a una funcion que trabajará con la variable seccion.
• Obtenemos el id de la variable seccion en la variable seccionID.
• Ahora concatenamos esta variable mas todos los elementos de esta seccion, los cuales los obtenemos con el elemento Sortable.sequence(seccion).
• El resultado en un alert será (ej.): seccionAnimales : gato, perro, pato, gallina n seccionCosas: silla, escritorio, mes

<script type="text/javascript">
 function obtenerElementos() {
  var secciones = document.getElementsByClassName('seccion');
  var textoprueba = '';
  secciones.each(function(seccion) {
   var seccionID = seccion.id;   
   textoprueba += seccionID + ': ' + Sortable.sequence(seccion) + 'n';
  });
  alert(textoprueba);
  return false;
 }
</script>

Ver Artículo Completo ››

Seguramente conocemos las etiquetas anchor, las cuales que tienen la peculariadad de saltar a contenidos en una misma página. Pues bien, mediante Prototype y el archivo Effects de script.aculo.us podemos convertir este salto a contenidos en desplazamiento a contenidos, lo que se conoce como autoscrolling. Vamos a ver una forma algo incómoda, pues tenemos que agregar una función al evento click de cada etiqueta de enlace (<a ..></a>) y luego una forma menos tediosa usando la versión 1.5.1_rc1 de Prototype, que incluye la función $$ para aplicar el efecto a todas etiquetas de enlace. Antes que nada agrega los archivos necesarios.

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script> 

Trabajando con el evento onclick

Podemos crear una función para el efecto de autoscrolling:

<script>
function IrA(ubicacion){
 //new Effect.ScrollTo('id etiqueta',{opciones});
 //offset -> Numero negativo o positivo de pixeles
 //			de ubicacion en la parte superior
 new Effect.ScrollTo(ubicacion);
 }
</script>

Ahora en el contenido podemos lo siguiente:

<h2 id="indice">Importantes ciudades del Per&uacute; </h2>
<ul>
 <li><a href="#trujillo" onclick="IrA('trujillo'); return false">Trujillo</a></li>
 <li><a href="#arequipa" onclick="IrA('arequipa'); return false">Arequipa</a></li>
 <li><a href="#cusco" onclick="IrA('cusco'); return false">Cusco</a></li>
</ul>

<h3 id="trujillo">Trujillo</h3>
 <p><!--contenido extenso aqui--></p>
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>

<h3 id="arequipa">Arequipa</h3>
 <p><!--contenido extenso aqui-->
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>

<h3 id="cusco">Cusco</h3> 
 <p><!--contenido extenso aqui--></p>
 <p><a href="#indice" onclick="IrA(indice); return false">Ir al Indice</a></p>

Si vemos el ejemplo en acción notaremos que funciona muy bien. Pero el incoveniente es que debemos especificar la función IrA() en el evento onclick de todas las etiquetas de enlace <a></a>.

Pero veamos ahora un proceso mas sencillo, es decir que requiere menos líneas de código.

Ver Artículo Completo ››

Bien ahora veremos la parte del código y pequeña explicación por cada fragmento de código. Empezemos con nuestra tabla la cual llamaremos chat y tendra solo 3 campos: fecha, usuario, mensaje:

CREATE TABLE `chat` (
 `fecha` datetime NOT NULL default '0000-00-00 00:00:00',
 `usuario` varchar(15) NOT NULL default '',
 `mensaje` text NOT NULL
) type=MyISAM;

Para los datos de la conexión al servidor MySQL usamos el archivo conexion.php.

<?php
   //Configuracion de la conexion a base de datos
   $bd_host = "localhost"; 
   $bd_usuario = "root"; 
   $bd_password = "123456"; 
   $bd_base = "ribosomatic"; 
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
   mysql_select_db($bd_base, $con); 
?> 

El archivo consulta.php se encargará de mostrar los últimos registros agregados a la tabla chat. La variable $UltFecha contiene la fecha del último registros que se le mostró al usuario. Si no esta definido es por que el usuario inicia por primera vez la aplicación, por lo que mostrará todos los registros de la tabla. Además usaremos XML para el envio de los datos obtenidos de la consulta. Las primeras 4 cabeceras (header) son para que el navegador vuelva a cargar los resultados y no los tome de la cáche. La última cabecera es para especificar que se trata de un documento XML.

<?php
 require("conexion.php");
 $UltFecha=$_GET['ultfec'];
 if($UltFecha=='undefined'){
  $query = "SELECT * FROM chat ORDER BY fecha ASC";
 }else{
  $query = "SELECT * FROM chat WHERE fecha>'$UltFecha' ORDER BY fecha ASC";
 }
 $lista = mysql_query($query,$con);
 $i=1;
 // no cargar de la cache del navegador.
 header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
 header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
 header( "Cache-Control: no-cache, must-revalidate" ); 
 header( "Pragma: no-cache" );
 header('Content-type: text/xml; charset=UTF-8', true);
 echo "<?xml version="1.0" encoding="UTF-8"?>n";
 echo "<xml>";
 while($row = mysql_fetch_array($lista)){
  echo "<elemento> n";
  echo "	<fecha>".$row['fecha']."</fecha> n";
  echo "	<usuario>".$row['usuario']."</usuario> n";
  echo "	<mensaje>".$row['mensaje']."</mensaje> n";
  echo "</elemento> n";
  $i++;
 }
 echo "</xml>";
?>

Para registrar los mensaje usamos el archivo registro.php. Obtenemos las variables usuario y mensaje las cuales han sido enviadas mediante JavaScript (mas adelante veremos esto) y hacemos un INSERT INTO para guardar los datos en la tabla. Luego eliminamos los registros de la tabla si esto superan los 10.

<?php
 require('conexion.php');
 $usuario=$_POST['usuario'];
 $mensaje=$_POST['mensaje'];
 
 if($usuario=='') $usuario='anonimo';
 if($mensaje=='') $mensaje='ningun mensaje';

 $query = "INSERT INTO chat ( fecha, usuario, mensaje) VALUES (NOW(),'$usuario','$mensaje')";
 mysql_query($query);
 
 //eliminando registros si estos superarn los 10
 $max=10;
 $NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM chat",$con));
 if($NroRegistros>$max){
  $NroAEliminar=$NroRegistros-$max;
  mysql_query("DELETE FROM chat ORDER BY fecha ASC LIMIT $NroAEliminar");
 }
?>

Hasta aquí hemos visto todo el proceso que realiza el servidor. Veamos ahora las funciones en JavaScript que enviarán los valores a los archivos PHP antes mencionados.

Ver Artículo Completo ››

Deseaba desarrollar un pequeño sistema chat con el objeto XMLHttpRequest. El incoveniente, como lo comente en un articulo anterior, es que el cliente pide información al servidor y esto se debe realizar cada cierto tiempo (n segundos) y eso no es bueno, pues en un sistema de chat el servidor es el que debe enviar información al cliente (nuevos mensajes, quienes están conectados, etc). Así que empece a averiguar sobre Comet (alternativa a Ajax) pero no encontre algo digno de usarse, además de tener algunos pequeños incovenientes. Así que ¿que hacer?. Yo quería mi chat de todas maneras. Así que opte por trabajarlo con Ajax de todas maneras. Trabaje con el objeto XMLHttpRequest de forma distinta a como lo hemos venido haciendo en los ejemplos.

Ver Artículo Completo ››