FireQuery es un plugin para Firefox que permite añadir mejoras a Firebug basadas en jQuery. Permite añadir jQuery a cualquier web, algo muy útil si necesitas ejecutar algún script en la consola y te apañas mejor con jQuery.
Además permite ver los eventos que está asociados en los elementos HTML desde la pestaña HTML de Firebug.
FireQuery (web)
Vía / DZone
FireMarker es una extensión para Firefox que hemos desarrollado en Sentido Web que permite marcar partes del texto de la página que estamos visitando.
Tan solo es necesario seleccionar el texto y pinchar en el icono que aparecerá en la barra de estado de nuestro navegador.
Una vez realizada esta función, el texto se marcará según los colores que sea hayan seleccionado, que por defecto serán amarillo para el fondo y negro para el color de letra.
Los textos marcados seguirán en este estado cuando se refresque la página o se reinicie el navegador, ya que la información marcada se almacena en las preferencias del navegador.
Entre las opciones que nos ofrece esta extensión de Firefox nos encontramos con:
Si alguien encuentra algún problema o error serÃa de gran ayuda que nos lo comunicara.
The Sexy Curls jQuery Plugin nos permite crear esquinas dobladas simulando páginas de forma muy sencilla con jQuery. Para su funcionamiento también es necesario jQuery UI.
Su uso es sencillo, creas una imagen, le asignas un id y ejecutas el siguiente código:
$(document).ready(function(){
$( '#target' ).fold();
})TwitterTicker es un plugin para jQuery que nos permite añadir un ticker de los ultimos updates que se hacen en un cuenta de Twitter. Las entradas se irán mostrando una a una en el mismo espacio mediante fading.
Su uso es muy sencillo, se crea una capa contenedora y se ejecuta el siguiente código:
$(document).ready(function() {
$("#twitter").twitterTicker({
userName: "jquery",
numTweets: 5,
delay: 4000,
loaderText: "Loading tweets..."
});
});Vía / Script & Style
Hoy vamos a ver otro ejemplo de Comet, que a los que trabajamos en desarrollo web, nos puede venir muy bien, para cuando queremos testear una aplicación web de forma conjunta y online. También puede ser útil para realizar presentaciones.
Se trata de una pizarra colaborativa, para dibujar sobre páginas web. Cada usuario dibuja sobre el navegador y el resto de los usuarios ven lo que ha dibujado. Nada mejor para entenderlo que el siguiente video.
Se van a usar sobre todo tres cosas: comet, canvas y http://www.php.net/xml, todo sobre Firefox.
Read More “Comet paso a paso: pizarra colaborativa para páginas web”
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
IBM está desarrollando una extensión para Firefox llamada Koala que permite grabar la actividad que se desarrolla en el navegador y generar un script que se guardará en una página y que podrá ser consultado.
El ejemplo que nos ofrecen muestra cómo se accede a una página de búsquedas de casas y se van introduciendo datos para obtener los resultados deseados. En la extensión para Firefox se va mostrando mediante texto las acciones que se ejecutan, por ejemplo “Acceder a la pagina tal”, “Seleccionar ‘2 habitaciones'” y asà con cada una de las acciones que hemos ido realizando. Estos textos son editables y después cuando se ejecuta el script para aprender el howto, se tienen en cuenta los datos cambiados.
La verdad es que estoy deseando que se haga pública esta extensión, a muchos nos podrÃa ahorrar documentación para los proyectos.
Koala
VÃa / CNET News.com