Similar Posts
Codetcha: CAPTCHA resolviendo Javascript
La verdad es que este CAPTCHA es muy friqui, pero es una idea interesante que quizás se pueda utilizar. Se trata de un CAPTCHA que en vez de tener que escribir una palabra, hay que modificar un código Javascript para que no tenga errores y así validar el formulario.
Para pasar el CAPTCHA hay que eliminar todos los errores, se puede ir viendo si el código es correcto y si no es así, qué errores sigue habiendo. El código de Codetcha se puede usar para clases o ejemplos de Javascript, porque me da la sensación de que no es muy accesible este CAPTCHA.
Aún así la idea se podría sustituir usando matemáticas en vez de Javascript.
Codetcha
Geolocalización por IP mediante Javascript y JSON
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
iJab: chat javascript usando XMPP/Jabber
iJab es una librería javascript que nos permite añadir chat en nuestras aplicaciones web, con la característica que usa XMPP/Jabber para realizar las comunicaciones.
Entre las características encontramos:
- Basado en el protocolo XMPP: lo cual permite usar servidores basados en ese protocolo
- Soporte para MSN y AIM, añadiendo transports al servidor XMPP
- Totalmente Javascript
- Compatible con Firefox, IE, Chrome y Safari
- Themes
- Modos de aplicación: stant-alone, web chat y live
- Sin pop-ups
- Notificaciones de nuevos mensajes
- Sonido
- Múltiples usuarios en el chat (MUC)
- Búsqueda de usuarios
- Administración: permite añadir y borrar usuarios y administrar grupos
- Smileys
Vía / WebAppers
DocumentFragments en Javascript
Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).
El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):
var elems = [
document.createElement("hr"),
text( document.createElement("b"), "Links:" ),
document.createTextNode(" "),
text( document.createElement("a"), "Link A" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link B" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link C" )
];
function text(node, txt){
node.appendChild( document.createTextNode(txt) );
return node;
}
Y luego la inserción normal:
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) { for ( var e = 0; e < elems.length; e++ ) { div[i].appendChild( elems[e].cloneNode(true) ); } }Y por último el nuevo método:
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] ); } for ( var i = 0; i < div.length; i++ ) { div[i].appendChild( fragment.cloneNode(true) ); }Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.
Uso correcto de los selectores en jQuery
Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:
$('.boton')
Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:
- Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
- Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
- Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
- Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)
37 plugins para jQuery
Una interesante lista de plugins para usar en jQuery, organizado por temas:
- Sliders: Slider Gallery y Accessible slider
- Manipulación de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle Plug-In
- Menus: Digg Header, IconDock
- Despegables: Horizontal Accordion, HoverAccordion, Step Carousel Viewer y Featured Content Glider
- Gráficas: jQuery + jFlot y Accessible charts using canvas and jQuery
- Editores: Small Rich Text Editor y markItUp! Universal markup editor
- Flash: jQuery Flash Plugin, jMP3 y jQuery Media Plugin
- Pestañas: jQuery Tabs
- Lightbox: Fancy Box, Thickbox Plus
- Tablas: Flexi Grid y Query Grid 3.1
- Formularios: FaceBook Like – jQuery and autosuggest Search Engine, Masked Input Plugin, jQuery Enchant, EasyDrag jQuery Plugin, Simple Effects Plugins y Slide out and drawer effect
- Efectos sobre elementos: crop, labelOver and pluck, Style Author Comments Differently with jQuery, Creating a fading header, Coda Bubble, Another In-Place Editor y jQuery Taconite
- Aplicaciones web: GenFavicon, WriteMaps
37 More Shocking jQuery Plugins
Vía / aNieto2k