Similar Posts

Javascript debuggers

ByLuis

Todos nos hemos encontrado con errores de javascript y normalmente la única información que obtenemos es el número de línea en el que se da el error, y a veces ni es esa línea (por ejemplo el famoso error en la línea 1 de IE). Por eso no nos viene mal tener una aplicación que nos ayude a limpiar nuestro código de errores:

  • Microsoft Script Debugger: Para IE, permite controlar el flujo de la ejecución del script y modificar el valor de variables entre otras cosas. No lo he usado, pero creo que es el que tienen algunos compañeros míos instalado, y te sustituye el icono amarillo de error y te salta cada vez que hay un error de Javascript, lo cual puede ser muy molesto.
  • SplineTech JavaScript HTML Debugger: Para IE y comercial, parece bastante completo, salvo que debes ejecutar la página web en la aplicación, no se integra con el explorador, lo cual suele ser una ayuda.
  • Venkman JavaScript Debugger: Para Mozilla y Firefox, uno de los primeros que aparecieron.
  • Firebug: Para Firefox, sin duda para mí el mejor de todos, lo que más me llega a gustar es su consola y la posibilidad de poder lanzar trazas en ella.
  • JSLint: Para IE, Mozilla y Firefox.
  • InspectThis: Para Firefox.
  • Drosera: Para Safari, el único problema es que está escrito el 90% en HTML y Javascript.

Javascript debuggers overview

Vía / dzone

Usa jQuery para mostrar mensajes según origen de la visita

ByLuis

Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.

// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/,    'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/,      'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/,         'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/,         'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/,      'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//,               'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);

Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.

jQuery Fun: Greeting Your Site Referrals

Vía / dzone

DocumentFragments en Javascript

ByLuis

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.

TJPzoom: zoom mediante Javascript

ByLuis

Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
jszoom.png
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.
TJPzoom
Vía / WebAppers

SoundManager 2: controla el sonido desde Javascript

ByLuis

SoundManager 2 es un API de Javascript que permite controlar el sonido ofrecido por un control Flash. Disponible para la mayoría de los navegadores, es necesario tener instalado el plugin para Flash (logicamente) y no intrusivo.

Un ejemplo de uso sería:

soundManager.createSound({
id: 'mySound',
url: '/path/to/some.mp3',
autoPlay: true,
pan: -75,
volume: 50
});

La verdad es que los ejemplos que ofrecen son increíbles:

SoundManager 2

Facebook sliders mediante Mootools

ByLuis

Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.
facebook_sliders.png
Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.
Facebook Sliders With Mootools and CSS
Vía / CSS Globe