Los mejores bookmarklet para diseño web

¿Qué es un bookmarklet?

Un bookmarklet es un marcador que, en lugar de apuntar a una dirección URL, hace referencia a una pequeña porción de código JavaScript para ejecutar ciertas tareas automáticamente, como por ejemplo:

  • Cambiar el diseño de la página (el tamaño de letra o los colores, quitar el fondo, etc.).
  • Mostrar información de enlaces, imágenes, formularios, etc.).
  • Abrir una consulta directamente en un motor de búsqueda o acerca del texto que hayamos seleccionado.

¿Cómo se usan?

Es muy sencillo. Basta con agregar/arrastrar a tus marcadores o favoritos el enlace del bookmarklet. Para usarlo, tan solo tienes que hacer click sobre el bookmarklet con el que quieras trabajar.


Viewport Resizer

Viewport Resizer te permite cambiar el tamaño de la ventana gráfica, es decir, no redimensiona el navegador. Coloca una barra en la parte superior de la página web donde podrás elegir el tamaño de dispositivos por defecto o manualmente. También te permite recargar la página web sin salir del script, animar las cuando redimensionas o ver la versión para imprimir. Este bookmarklet es imprescindible si desarrollas sitios Responsive Design.

↔ Resizer


MRI

Script con el que podrás probar los selectores de una web de manera dinámica y sencilla.

MRI
MRI


Layout Grid Overlay Bookmarklet

Si has trabajado con Photoshop, seguramente hayas usado la cuadricula de fondo. Esto es precisamente lo que hace este script, te superpone una una cuadricula de fondo.

Layout Grid Overlay Bookmarklet

Layout Grid Overlay


Mouseover DOM Inspector (Domi)

DOMI te permite visualizar las propiedades de cada uno de los elementos del DOM haciendo hover con el ratón.

DOMI


Built With

Bookmarklet de esta página web. Built Width es una página web que analiza otras webs y te dice que tecnologías utiliza: qué plataforma, hosting, framework, sistemas de publicidad, herramientas de estadísticas y seguimiento, plugins… muy recomendable.

Built Width
Built With


What Font

Excelente script que te permite saber qué tipografía usa cada uno de los textos de una página web pasando el ratón por encima. También al hacer click, te amplía la información: font-family, tamaño de fuente, line-height, color y una pequeña vista previa.

What Font

What Font


XRAY

Muy parecido a DOMI, pero en este caso tienes que hacer click sobre cada uno de los elementos.

XRAY

XRAY


WAVE

Te redirige a la página web de WAVE cargando la url actual. WAVE es una herramienta de accesiblidad online donde te indica de los diferentes errores, alertas y avisos que tiene la página web de origen.

wave

WAVE


Layout Grid Bookmarklet

Las rejillas son un elemento indispensable en todo diseño, incluyendo el diseño web. Layout Grid Bookmarklet genera una rejilla sobre la web totalmente configurable.

Layout Grid Bookmarklet

Layout Grid Bookmarklet


Rule

Bookmarklet que genera reglas al mas puro estilo photoshop, permitiendo también crear guías. Se pueden modificar los colores y el punto de origen.

Rule

Rule


Unit

Herramienta que te permite medir distancias, verticaL y horizontalmente, entre dos puntos del documento.

Unit

Unit


Crosshair

Crea una cruz guiada por el cursor. Útil para observar si estas bien alineados los distintos elementos del documento.

crosshair

Crosshair


Design

Script que agrupa los cuatro bookmarklets anteriores: Layout Grid Bookmarklet, Rule, Unit y Crosshair.

Design

Design


CSSrefresh

CSS refresh detecta cuando has modificado alguno de los estilos de la página web y te los recarga automáticamente. También dispone de la descargar de un .js para implementar en tus proyectos.

bookmarket


Reload CSS Every

Parecido a CSSrefresh, pero éste recarga los estilos CSS de la página cada 2 segundos sin verificar si ha habido alguna modificación.

bookmarket


Por último, destacar que en algunas página web puede que no funcionen correctamente o directamente no funcionen. Esto es debido a problemas de compatiblidades con alguno de los scripts que carga el site o porque directamente la página web bloquea la carga de scripts externos.

You may also like...

Deja un comentario