Mis bookmarklets

20/feb/2009 9

Los bookmarklets son pequeñas aplicaciones Javascript contenidas dentro de una URL en una página web, de la siguiente forma:

<a href="javascript:function(laQueSea){};">Bookmarklet La Que Sea</a>

La idea es que sean ejecutada mediante el click del enlace, y lo que usualmente se usa es guardarlos mediante bookmarks en tu browser; así puedes tenerlos a mano siempre que los necesites.

Como están escritas en Javascript, puedes hacer modificaciones a cualquier elemento de DOM dentro de la página: cambiar tamaño de fuentes, colores, extraer datos de la página (links, imágenes, texto), enviar datos para validación o traducción entre muchas otras cosas.

Personalmente me son bastante útiles al momento de desarrollas mis proyectos web; tengo algunos de frecuente uso y quisiera compartirlos por si ayudan a más de alguno en los excelentes trabajos que seguro hacen. Para utilizarlos, lo mejor es hacer click en el enlace y arrastrarlo a tu barra de Bookmarks como se ejemplifica en la siguiente imagen:

Uso de Bookmarklets

XRay click y arrastra

Permite visualizar las propiedades DOM del elemento al seleccionarlos: selector, ID, CLASS, herencia y estilos CSS asociados.

XRay bookmarklet

Design click y arrastra

Permite visualizar la grilla utilizada en la construcción de la página, medidas y alineamiento entre otras cualidades.

Design bookmarklet

800×600 1024×768 1280×1024 1600×1200 click y arrastra cada uno

Modifica el tamaño de la ventana de tu browser a alguna de esas medidas estándar.

MRI click y arrastra

Muestra y enmarca cualquier selector que queramos ver de una página web.

MRI bookmarklet

WTFramework click y arrastra

Muestra qué framework de Javascript se está utilizando en el sitio.

bookmarkletWTFramework bookmarklet

Microformats click y arrastra

Muestra cuáles microformatos están siendo utilizados en determinada página.

Y por último, mi favorito:

ReCSS click y arrastra

Recarga sólo las hojas de estilos llamadas desde la página, sin tener que volver a cargar todo el HTML para visualizar cambios.

Comentarios

  1. 0x564242 [#]

    Aqui teneis otro para compartir directamente desde Google Reader a Delicious, Facebook, Meneame

    http://0x564242.me/2009/01/12/fbreader-compartir-desde-google-reader/

  2. Jaime M-F [#]

    Utilísimos, sobretodo el ReCSS.

    Saludos!

  3. Jorge Epuñan [#]

    Solo queria aclarar q aunq el titulo dice ‘Mis…’ no soy autor de ninguno; solo los he recopilado de horas de navegacion por la web.

    Disfrutenlos!

  4. xanfran [#]

    Geniales :)

  5. Mauro [#]

    Muchas de estas cosas las hago con extensiones de Firefox y la verdad es que resulta muy refrescante conocerlas en javascript ya que nos da libertad para desarrollar con diferentes navegadores. Gracias por compartirlo.

  6. Sergio [#]

    Excelente, ya usaba el xray, pero muy bueno tener estos otros… estoy deacuerdo con “Jaime M-F”, el de ReCSS me cae como “anillo al dedo”

  7. Ignatius [#]

    Muchísimas gracias, no sé si las usaré mucho o poco, pero me ha encantado el concepto de varias.
    Un saludo

  8. jose roberto (vevni) [#]

    buen aporte, el de wtf no muestra correctamente el jquery 1.3x… muy buenos.!!!
    saludos

  9. Outlinr: a bookmarklet ↩ CSSLab [#]

    […] that was the introduction. I made this bookmarklet that does the job for me directly on the browser, so I don’t add dirt to my stylesheet or to […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab