Un sistema Captcha Drag And Drop

Los sistemas captchas son utilizados para evitar que robots, también llamados spambots, puedan utilizar ciertos servicios. Por ejemplo, para que no puedan participar en encuestas, registrarse para usar cuentas de correo electrónico (o su uso para envío de correo basura) o, más recientemente, para evitar que correo basura pueda ser enviado por un robot (el remitente debe pasar el test antes de que se entregue al destinatario).

La típica prueba consiste en que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta por lo que solamente el humano podría hacerlo. Pero con el avanzado software de reconocimiento de caracteres que existen hoy en día, es cada vez más habitual encontrarse con aplicaciones que pueden saltarse eficazmente este sistema.

Para ayudar a proteger tus páginas web de los spammers, podemos encontrarnos con nuevos sistema que de una forma intuitiva ayudan a verificar la “humanidad” de la persona que introduce la información. Ajax Fancy Captcha es un plugin de jQuery que funciona de una forma totalmente distinta, pidiéndonos arrastrar y soltar un objeto solicitado a un círculo.

Su instalación es rápida y sencilla, permitiéndonos fácilmente configurar las opciones básicas y realizar la traducción de los textos que se incluyen, y todo ello con un tamaño mínimo del script.

Página web | Descarga

Coderun: entorno de desarrollo online

Coderun nos da la posibilidad de trabajar sobre un entorno de desarrollo similar a Visual Studio, con la particularidad de realizar todo el trabajo en el navegador con HTML dinámico y AJAX. De forma online y sin instalar absolutamente nada, podemos empezar a programar nuestros proyectos de ASP.NET, servicios Web, Silverlight, bibliotecas de clases, sitios PHP, aplicaciones facebook y código JavaScript. Y todo gratis y sin ni siquiera registrarse.

http://coderun.com/ide/

Emprise Javascript Chart, gráficas profesionales

Emprise Javascript Chart, es una librería Javascript que permite generar gráficas profesionales de forma sencilla y rápida.

Entre las funcionalidades que nos encontramos cabe destacar:

1. La gran cantidad de tipos de gráficos disponibles
2. La compatibilidad con la mayoría de navegadores actuales.
3. Fácilmente ampliable mediante plugins Javascript
4. Personalizable

Aunque se trata de una librería comercial, la versión free ofrece una gran cantidad de opciones que podríamos usar en nuestras aplicaciones.

Ejemplos | Descargar de la versión gratuita

Vía aNieto2k

Librería JavaScript Raphaël

Raphaël es una pequeña librería JavaScript que pretende simplificar el trabajo con gráficos vectoriales en la web. Si quiere crear sus gráficos, imágenes o texto por ejemplo, se puede lograr de una forma rápida y sencilla con esta librería.

Raphaël utiliza las Recomendación del SVG W3C y VML como base para la creación de gráficos. Esto significa que cada objeto que cree es también un objeto DOM, para que pueda conectar con controladores de eventos JavaScript o modificarlo más adelante.

Raphaël actualmente es compatible con Firefox 3.0 +, Safari 3.0 +, Opera 9.5 + e Internet Explorer 6.0 +.

Panel deslizante con jQuery

Gracias a webkreation, podemos disponer de un magnífico panel deslizante realizado con jQuery, que nos permitirá “esconder” un panel con la funcionalidad que desees: un formulario de acceso a una zona privada, texto, imágenes, etc., mostrándose de una forma limpia y agradable al pulsar sobre el texto “Abrir panel”. Es totalmente configurable y muy sencillo de instalar, con la posibilidad de descargarlo desde su propia página como plugin para WordPress.

Sliding Panel | Demo | Descarga

Traducciones automáticas con la API de Google

Todos sabemos que las traducciones automáticas de textos no suelen ser tan perfectas o fieles al texto original como las traducciones realizadas por un nativo, pero estas aplicaciones pueden sacarnos muchas veces de un aprieto; y en estos momentos, el traductor de Google es posiblemente el traductor gratuito más eficaz, y que además pone a nuestra disposición una API sobre la que podemos trabajar y hacer nuestras cosillas.

Mediante esta API, podemos traducir texto de una página web automáticamente, lo que nos ayudará a crear páginas en varios idiomas, o traducir parte de algún texto con suma facilidad. A continuación os dejo un código de ejemplo con su uso.

<script type="text/javascript">

/* Inicio del codigo para realizar la traduccion */
google.load("language", "1");

function initialize() {
/* 'contenido' es el div, dentro del cuerpo de la pagina, donde vamos a introducir el texto y su traduccion */
var contenido = document.getElementById('contenido');
/* Introducir el texto y su traduccion en el div 'contenido' */
contenido.innerHTML = '<div id="text">Este es un texto de prueba.<\/div><div id="translation"/>';

/* Seleccionar el texto a traducir. */
var text = document.getElementById("text").innerHTML;

/* Indicamos en el primer parametro la variable que contiene el texto a traducir */
/* Indicamos el origen y destino de los idiomas para la traduccion */
/* en este caso como es de español a ingles, incluimos 'es' y 'en' */
/* si la segunda variable la dejamos vacia, se autodetecta el idioma */
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);

</script>

Demo | Descarga

Scripts de autocompletado de texto para web

Para facilitar la entrada de texto, los scripts de autocompletado son una gran ayuda. Se suelen utilizar sobre todo a la hora de buscar palabras en un sitio web, se han convertido en uno de los mejores elemento de interacción con el usuario, y últimamente la mayoría de los sitios más famosos como google, youtube o msn ya lo tienen implementado.

La mayoría de los scripts que nos podemos encontrar por internet, están realizados con JavaScript o AJAX, y su implementación en la página no suele resultar muy complicada; por ello, es una opción interesante de incluir para ayudar a nuestros usuarios en sus búsquedas.

Tokenizing Autocomplete Text Entry

A fancy Apple.com-style search suggestion

AutoSuggest

Google suggest style filter

Ajax Powered AutoComplete

Leer más

Contactable: un formulario en jQuery

Contactable es un formularios desarrollado en jQuery, y que nos permite añadir en cualquier de nuestras páginas un formulario de contacto de una forma sencilla, rápida y con un mínimo esfuerzo. Éste aparece “escondido” en un lateral de la página, y se despliega al pulsar sobre el botón “Feedback” para mostrarse por completo.

Contactable – Demo – Descarga

Motor 3D para jQuery

Interesante librería con tutorial completo y varios ejemplos en diversos posts que nos ayuda a trabajar con 3D en jQuery. Tan sólo es necesario crear una cámara, un objeto en 3D y un escenario y listo para actuar.

Making a 3D Engine in jQuery

Vía SentidoWeb

Cabecera deslizante estilo iPhone

El iPhone tiene una interfaz con algunas características únicas, que difícilmente se pueden ver en algún otro Sistema Operativo. Pero gracias a jQuery, podemos simular muchos de sus efectos en nuestras páginas web. Uno de ellos, es la posibilidad de dejar “fija” una cabecera, de tal forma que a medida que vamos deslizándonos a lo largo de una lista, aparezca estática la cabecera actual. Lo mejor para comprender el efecto, es ver la demo que tenemos disponible, y revisar el código de este efecto.

iPhone-like Sliding Headers