Mis bookmarklets

20/Feb/2009 209

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. goodrxmodafinil [#]

    buy provigil https://modafinilltop.com/

  2. bactrim cream [#]

    sulfamethoxazole tmp ds trimoxazole ds

  3. cialis tablets [#]

    generic cialis https://cialiswithdapoxetine.com/

  4. stromectolforte.com [#]

    ivermectin paste https://stromectolforte.com/ ivermectin stromectol 3mg tablets

  5. buy accutane [#]

    isotretinoina isotretinoine

  6. isotretinoine [#]

    buy isotretinoine buy accutane

  7. bactrim antibiotic [#]

    trimoxazole ds polymyxin b sulfate and Trimethoprim

  8. modafinilprovigil [#]

    https://modafilmdmodafinil.com/ order modafinil

  9. whatisprednisolone [#]

    https://prednisoloneprednisolone.com/ prednisolone acetate ophthalmic suspension

CSSLab