Detección de caras con Javascript y Canvas

ByLuis

Interesante script que usa canvas para detectar rostros en las fotografías. Se basa en openCV y en el post de John Resig para evitar un captcha.
Permite la opción de reconocer una cara o varias caras, este último lo he probado con una foto y no me ha funcionado, pero como bien dice el autor, aún tiene que mejorar más el script.
Interesante opción para servicios como Facebook o Flickr para sus opciones de asociar elementos (usuarios, comentarios, …) a las fotografías. También es útil para avisar de que no se ha subido una cara cuando alguien cambia de avatar.
Face detection in javascript + canvas
Vía / @rafabayona

Similar Posts

| |

Laboratorio: filtrado de tablas

ByLuis

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
filtrado-tablas.png

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “líquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.
filtro.gif

Read More “Laboratorio: filtrado de tablas”

Funciones en Javascript

ByLuis

Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.

El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:

alert((function(n){ if(n <= 1){return 1;}else{return n*arguments.callee(n-1);}})(10));

Functional Javascript

JIT: JavaScript Information Visualization Toolkit

ByLuis

Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
jit.png
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente.
JIT

Mootools FormCkeck: comprobación de formularios

ByLuis

Mootools FormCheck es un script que permite añadir comprobaciones a nuestros formularios y que muestre mensajes de error cuando alguna de esas comprobaciones falle.
formcheck.png
Se puede comprobar los errores cuando se realiza un submit o cuando se abandona el elemento HTML (blur). Los errores aparecen como un bocadillo emergente (con posibilidad de cerrar) y se puede especificar el tipo de dato que queremos comprobar: texto, numérico, alfanumérico…
El problema de estas librerías es que existen para un framework en particular, estaría bien que existiera (o crearlo nosotros) un grupo de trabajo que tradujera las librerías útiles a diferentes frameworks (mootools, jquery, yui, …), ya que cuando buscamos un módulo específico a veces lo encontramos para otro framework. ¿Alguien se apunta?.
Mootools FormCkeck
Vía / WebAppers

Evitar errores de producción debidos a Firebug

ByLuis

Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:

if(!window.console) {
window.console = {
log: function() {}
}
}

Visto en este ejemplo