Muchas veces hacemos un sitio web que los usuarios tienen que ingresar su tarjeta de crédito. Si bien no valideramos si los datos son verídicos en la empresa crediticia que emite la tarjeta, las tarjeta tiene su propia verificación mediante el código.

Las reglas y los patrones que se usan para saber son complicados y pueden ser bastantes confusos. Por eso credicard.js nos ayudará haciéndonos fácil la tarea a la hora de verificarlo.

1

CreditCard.validate('1111 2222 3333 4444')

Eso validará el número (con un true o un false), mientras que también podemos obtener el tipo (Visa, Mastercard, etc.) con CreditCard.type. Como dijimos, esto se basa en el Algoritmo de Luhn y los números bancarios.

Link: Creditcard.js

creditcard.js: Validá números de tarjetas de crédito con Javascript por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: JavaScript, Tarjetas de Credito, Validar

Ahí es cuando Sisyphus nos viene a salvar. Un ligerísimo plugin de jQuery (3.5KB) que nos permite guardar localmente la información llenada en el formulario para no perderla. La data ingresada se guarda automáticamente al interactuar con los campos, no hace falta que el formulario se envíe ni mucho menos. Y su implementación es facilísima:

1

$('#form1, #form2').sisyphus();

Eso guardaría la información de los formularios identificados con los ids form1 y form2. Si quisiéramos aplicárselo a todos los formularios, tranquilamente podríamos hacer:

1

$('form').sisyphus();

El plugin permite personalizar ciertas opciones, como el tiempo durante el que se guarda la información, si queremos que se realice una acción cuando se guarda o cuando se obtiene, etc.

Una forma muy útil de ahorrarle dolores de cabeza a tus visitantes, si es que tu sitio web tiene algún formulario tedioso de llenar.

Sisyphus: Que tus usuarios no pierdan la información de los formularios por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: jQuery

Tinycon es una librería javascript que sirve para manipular el favicon que muestran los navegadores en las pestañas de nuestras páginas webs.

Su uso es muy sencillo. Simplemente agrega una burbuja con un número sobre nuestro favicon, que puede actualizarse en cualquier momento. En efecto, en el website de la librería se puede ver un demo.

Para utilizarlo no hace falta inicializarlo:

1

Tinycon.setBubble(6);

Se puede también usar parámetros opcionales para definir colores, fuentes y tamaños:

1
2
3
4
5
6
7
8

Tinycon.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    colour: '#ffffff',
    background: '#549A2F',
    fallback: true
});

La opción de fallback es importante pues como esta librería solo funciona en Chrome y Firefox, en otros navegadores reemplazará el favicon por el número correspondiente.

Tinycon: Notificaciones en los favicons de tus sitios webs por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags:

La idea de asignarle a cada elemento sus propias opciones en una página web es muy útil muchas veces. Una solución sería hacerlo a través del menú contextual que aparece cuando hacemos click con el botón derecho del mouse. Esto es lo que propone jQuery contextMenu de una forma muy fácil.

Este plugin para jQuery permite muchísimas opciones. Desde íconos para personalizar cada ítem del menu contextual, hasta la posibilidad de que el menu aparezca cuando simplemente pasamos por arriba del elemento, que se lance cuando hacemos click con el izquierdo. También permite setear teclas de acceso para cada una de las opciones que aparecen, e inclusive submenus.

En definitiva es un plugin muy completo y muy fácil de utilizar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function(){
    $.contextMenu({
        selector: '.context-menu-one', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
});

Link: jQuery contextMenu

jQuery contextMenu: Agregá un menú contextual a tus páginas por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: jQuery, menu

Ejemplos claros es el API de Geolocalización o el API del Acelerómetro, que ya están implementados. A futuro se planean API de la Cámara de Fotos, API de Contactos, e inclusive hasta un API para la Batería, entre otros. Pero hoy hablaremos del Vibration API, o el API de Vibración.

Esta nueva API ha sido anunciada hace dos días a través de Mozilla Hacks y parece muy sencilla de implementar, considerando que le podemos dar diversos usos muy interesantes: tanto para juegos como para notificaciones en nuestros sitios.

1

navigator.mozVibrate(1000);

Eso es simplemente lo que debemos poner en nuestro javascript. El parámetro pasado es la cantidad de milisegundos que queremos que dure la vibración. Si queremos hacer un patrón, podemos hacer lo siguiente:

1

navigator.mozVibrate([1000,500,1000]);

Eso hará que vibre durante un segundo, pare medio y vuelva a vibrar durante un segundo.

Para testear esto, se puede probar esta demo desde Firefox Aurora, que será el futuro Firefox 11 (y obviamente un dispositivo que soporte vibración).

Vibration API: Firefox hace que el dispositivo vibre desde el navegador por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: Vibracion

El video de arriba es bastante explicativo de por sí (y sorprendente). La agencia McCann Worldgroup Thailand debió planificar una campaña online para WMF, una empresa que fabrica cuchillos de cocina.

Para esto aprovechó las nuevas tecnología e hizo uso de HTML5. Según ellos, crearon el primer banner HTML5 y el resultado es sorprendente. Permiten cortar el navegador y así experimentar lo filoso de estos cuchillos. El resultado visual es muy bueno, y al parecer no es la única consecuencia positiva: los clicks en él banner fueron un 500% de los standards para el mercado, y las ventas crecieron un 15%.

Fuente: Creativity Online vía Genes Conectados

McCann usa HTML5 para crear un banner “filoso” por Patricio para Codigo Geek
Permalink | 1 Comentario | Add to del.icio.us
Post tags: Banner, HTML5

Últimamente se ha estado hablando de Path, la app social para Android y iOS que ha estado empezando a tomar vuelo. Más allá de su funcionalidad, una de las cosas que se le destaca es su diseño bonito y funcional (la he probado y doy fe de ello).

Hoy traeremos un plugin para jQuery que permite copiar elegantemente la navegación que utiliza Path en muchas de sus pantallas. Como todos los plugins de este framework, su utilización es muy sencilla. Basta con bajar el archivo, e incluirlo junto a tu versión de jQuery. Luego, para implementarlo, los códigos son los siguientes:

HTML:

1
2
3
4
5
6
7
8

<ul>
  <li><a href="#">+</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

La lista UL encerrará la navegación, mientras que el primer ítem li será el que represente al centro del círculo que abrirá o cerrará la navegación. El código Javascript para inicializarlo es muy sencillo:

1
2
3
4
5

$('ul').circleMenu({
  item_diameter: 40,
  circle_radius: 100,
  direction: 'bottom-right'
});

El plugin trae muchas opciones que se pueden personalizar al momento de inicializarlo.

Si no conocés la navegación de Path, aquí hay ejemplos de este plugin para que veas su funcionamiento. Como se ve, hay siete formas de mostrarlo, lo que lo hace muy customizable, entre otras opciones.

Página de Circle Menu

Menú circular como el de Path con jQuery y Circle Menu por Patricio para Codigo Geek
Permalink | 2 Comentarios | Add to del.icio.us
Post tags: jQuery, Path

Ahora han puesto a disposición del público Sensei DB, su motor de base de datos en formato opensource para que cualquiera pueda utilizarlo.  Ya leyendo la descripción nos damos cuenta que su fuerte son las búsquedas, y es recomendable para proyectos que necesiten destacables tecnologías en este campo.

En un repaso por sus features nos encontramos con:

• Búsqueda de full-text
• Actualizaciones en realtime rápidas
• Búsqueda estructurada y facetada (filtrada por el usuario)
• Búsqueda por key-value veloz
• Alta performance durante actualizaciones concurrentes pesadas y alto tráfico de queries
• Integración con Hadoop

Un código de ejemplo de cómo serían las queries en Sensei es el siguiente (llamado BQL, Browse Query Language):

1
2
3
4
5
6
7
8
9
10

SELECT _uid,_score,color 
  FROM members
  WHERE color="red" AND 
        category IN ("van","exotic") AND 
        MATCH(contents) 
        AGAINST("cool leather seats")
  GROUP BY color TOP 3
  BROWSE BY color,category
  ORDER BY RELEVANCE
  LIMIT 0,10

Si estás trabajando en un proyecto que requerirá búsquedas y selects pesados hacia tu base de datos, podrías darle una oportunidad a Sensei DB.

Sensei DB: LinkedIn lanza su base de datos en opensource por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: Base de Datos

El programa tiene su propio lenguaje de programación, que sirve para plantear problemas y programar posibles soluciones para el mismo. A partir de esto, en Stack Overflow se comenzó una pregunta sobre si era posible programar un código en Mathematica para encontrar a Wally (¿no conocés a Wally?) en una de sus famosas imágenes.

El blog matemático Gaussianos hizo una buena reseña sobre ese thread con explicaciones sobre el asunto. El código propuesto es el siguiente (se necesita Mathematica 8):

1
2
3
4
5
6
7
8
9
10
11

waldo = Import["http://www.findwaldo.com/fankit/graphics/IntlManOfLiterature/
Scenes/DepartmentStore.jpg"];
red = Fold[ImageSubtract, #[[1]], Rest[#]] &@ColorSeparate[waldo];
 
corr = ImageCorrelate[red,
Image@Join[ConstantArray[1, {2, 4}], ConstantArray[0, {2, 4}]],
NormalizedSquaredEuclideanDistance];
 
pos = Dilation[ColorNegate[Binarize[corr, .12]], DiskMatrix[30]];
 
found = ImageMultiply[waldo, ImageAdd[ColorConvert[pos, "GrayLevel"], .5]]

La explicación del algoritmo utilizado es sencilla. Primero se carga la imagena utilizar y se filtran todos los colores que no sean el rojo (por la camiseta de Wally). Luego se calcula la correlación entre esa imagen y un patrón en blanco y negro, para identificar las rayas de la camiseta. Luego se seleccionan los píxeles con la correlación más alta y se dibuja un círculo alrededor, y finalmente se combinan ambas imágenes.

Utilizando esto como imagen original,

el resultado conseguido sería el siguiente:

El código parece funcionar perfecto, pero no hay que emocionarse porque con otras imágenes puede fallar. Sin embargo, sirve para ver el poder que tiene este software y que en pocas líneas de código se pueden hacer cosas interesantes como éstas!

¿Se puede encontrar a Wally con Mathematica? por Patricio para Codigo Geek
Permalink | 3 Comentarios | Add to del.icio.us
Post tags: Mathematica

Este proyecto está siendo llevado a cabo por el equipo de Google, más precisamente por Bjorn Bringert, Satish Sampath y Glen Shires. Como se ve en los siguientes códigos de ejemplo, sería más que fácil implementarlo.

Grabación de Voz:

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
    var sr = new SpeechReco(); // Nuevo interface
    sr.onresult = function(event) {
      var q = document.getElementById("q");
      q.value = event.result[0].transcript; // Devolvemos la transcripción del mensaje
      q.form.submit();
    }
  </script>
 
  <form action="http://www.example.com/search">
  <input type="search" id="q" name="q"/>
  <input type="button" value="Speak" onclick="sr.start()"/> // Iniciamos la grabación
  </form>

Convertir texto a Voz:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
     var tts = new TTS(); //Nuevo interface
     function speak(text, lang) {
        tts.text = text; // Indicamos el texto
        tts.lang = lang; // Indicamos el idioma
        tts.play(); // Hacemos hablar a nuestro navegador
     }
     speak("Hello world.", "en-US"); // Hola mundo 
  </script>

Obviamente deberemos esperar un tiempo para que esta nueva especificación sea aprobada y pueda ser utilizada, pero no viene mal ilusionarnos.

Fuente: Anieto2K

Speech JavaScript API: Javascript para hablar con las páginas webs por Patricio para Codigo Geek
Permalink | Comentar | Add to del.icio.us
Post tags: