Efecto de luces con javascript

ByLuis

Realmente definir en el título el experimento javascript que han realizado en Dragon Labs es complicado. Se trata de un efecto de luces, glow, colores en un formulario de contacto (o cualquier otra capa). El usuario verá cómo el contorno de la capa cambia de color por zonas y varia la intensidad de la “luz”.
glow.png
El efecto es expectacular, pero quizás haya que mejorarlo un poco, ya que entre otras cosas para crear el efecto de colores, usan una imagen de 133k de un tamaño de 3000×900.
Admin panel demo de Dragon Labs

Librerías Javascript para mostrar información de imagenes y añadir efectos

ByLuis

Dos interesantes y currados scripts que te permiten manipular imágenes. Uno de ellos te devuelve la información EXIF de la imágen: formato, versión, ancho, alto, bits por pixel, alpha, mimeType, tamaño en bytes e información EXIF (solo para JPEG).
La otra librería Javascript te permite realizar efectos en las imágenes, usando canvas o lo propio de IE (no todos los efectos los permite IE): flip horizontal, flip vertical, invertir, desaturacización, blur, sharpen, edges, emboss, laplace, ruido, brillo, sepia e histograma.
Librerías muy interesantes para proyectos que permitan subir o manipular imágenes (tipo fotolog).
Javascript Image Effects e ImageInfo
Vía / @rafabayona

Calcular la distancia entre dos direcciones usando Google Maps

ByLuis

Interesante script que puede ser bastante útil en muchas aplicaciones2.0 en la que el se requiere conocer la distancia entre dos direcciones, por ejemplo buscar usuarios que se encuentre cerca de donde tú vives.
El script accede a Google Maps (es necesario tener una key) y mediante las dos direcciones introducidas obtiene la latitud y la longitud de ambas, luego mediante la teoría del gran círculo obtiene la distancia entre ambas coordenadas.
How to calculate distance with javascript and Google Maps API
Vía / @quenerapu

Geolocalización por IP mediante Javascript y JSON

ByLuis

Sencillo script que nos devuelve un JSON con la geolocalización según la IP, usando los datos sacados de iplocationtools.com:

function getLocation(){
script = document.createElement('script')
script.src = 'http://www.nitinh.com/ip_query.php?callback=initialize'
document.body.appendChild(script)
}
function initialize(obj){
document.getElementById('spanLocation').innerHTML = obj['City'] + ', ' + obj['RegionName'] + ', ' + obj['CountryName'];
}

IP Address Geolocation Javascript API : JSON

Vía / korayem

XSS Rays: javascript que detecta vectores XSS

ByLuis

XSS Rays es un script que permite detectar vectores XSS en cualquier página web. Debemos instalar en un servidor web (puede ser en local) y añadir a nuestros marcadores o favoritos para poder ejecutarlo sobre cualquier página que visitemos.
Funciona para IE y FF, aunque puede funcionar en otros navegadores, además se pueden personalizar los vectores para cada navegador.
La ejecución es sencilla, accedes al marcador, empiezas el test y te va mostrando las incidencias que encuentra (si es que las hay).
XSS Rays
Vía / lajevardi

JsLoad: carga de librerías remota

ByLuis

JsLoad permite cargar librerías Javascript desde los servidores de Google, no tienes que preocuparte por las dependencias de otras librerías, ya que JsLoad se encarga de cargar las dependencias automáticamente.
jsload.png
Además se pueden cargar diferentes versiones de una misma librería, no necesariamente la última versión. Entre las librerías que se pueden cargar nos encontramos: ExplorerCanvas, Facebox, JavaScript-XPath, jQuery, JSDeferred, Lightbox, MooCanvas, MooTools, Processing.js, Prototype, script.aculo.us, Taffy DB y textMonster.
JsLoad
Vía / meme

Sincronicar scrolls entre capas con jQuery

ByLuis

Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan

jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}

Synchronizing Scrollbars using JQuery

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