Bookmarklets puede ser una herramienta invaluable tanto para diseñadores web como para desarrolladores a los que les gusta experimentar y solucionar problemas en el navegador. Hoy hemos reunido una impresionante colección de bookmarklets gratuitos para todo, desde validar su HTML hasta reorganizar elementos en una página sin código. ¡Disfrutar!
Lo que viene
¿Cuál es la forma más fácil de averiguar las fuentes utilizadas en una página web? ¿Firebug o inspector webkit? No, eso es demasiado complicado. Debe ser sólo un clic de distancia. Por lo tanto, escribí esta herramienta, con la que puede obtener fácilmente información de fuente sobre el texto en el que se está desplazando.
Syntaclet
Como programador, es muy común navegar por Internet entre varios fragmentos de código y ejemplos. El problema es que muchos sitios web tienen métodos deficientes para mostrar el código de ejemplo, lo que dificulta su lectura. Aquí es donde entra Syntaclet. Simplemente haga clic en Syntaclet Bookmarklet y aplicará automáticamente colores de sintaxis específicos del idioma con números de línea a todo el código de la página.
Colección Bookmarklets
Esta página tiene un montón de marcadores creados específicamente para diseñadores y desarrolladores. Aquí hay muchas herramientas útiles para todo, desde revisar las hojas de estilo hasta activar las casillas de verificación.
FFFFALLBACK
Las fuentes web están aquí, lo que desató una nueva y emocionante era en el diseño web. FFFFALLBACK hace que sea fácil encontrar las fuentes de respaldo perfectas, para que sus diseños se degraden con gracia.
Firebug Lite
Un pequeño bookmarklet para instalar fácilmente Firebug Lite en cualquier página web.
SpriteMe
Las imágenes de fondo hacen que las páginas se vean bien, pero también las hacen más lentas. Cada imagen de fondo es una solicitud HTTP adicional. Hay una solución: combinar imágenes de fondo en un sprite CSS. Pero crear sprites es difícil, requiere conocimiento arcano y mucha prueba y error. SpriteMe elimina las molestias con el clic de un botón.
CSSESS
Me complace anunciar el lanzamiento de cssess (pronunciado secess, como secesión), un bookmarklet que te ayuda a encontrar selectores de CSS no utilizados en cualquier sitio.
Perf para móviles
Muestra un menú con enlaces que cargan otros marcadores incluidos Firebug Lite, Recursos de página, DOM Monster, SpriteMe, CSSess y Zoompf. El menú Mobile Perf se actualiza a medida que se lanzan nuevos bookmarklets, por lo que obtiene las últimas herramientas automáticamente.
DOM Monster
DOM Monster es un bookmarklet multiplataforma y entre navegadores que analizará el DOM y otras funciones de la página en la que se encuentra, y le dará su estado de salud.
XRAY: mira debajo de la piel
XRAY es un bookmarklet para Internet Explorer 6+, y navegadores basados en Webkit y Mozilla (incluidos Safari, Firefox, Camino o Mozilla). Úselo para ver el modelo de caja de cualquier elemento en cualquier página web.
MRI: prueba tus selectores
MRI es un bookmarklet para Internet Explorer 6+ y navegadores basados en Webkit y Mozilla (incluidos Safari, Firefox, Camino o Mozilla). Úsalo para probar y jugar con selectores.
FontFriend
La práctica herramienta de Matt Wiebe que te permite experimentar con la tipografía de cualquier página de composición CSS sobre la marcha, sin actualizar ni abrir una nueva ventana. Echa un vistazo a este screencast, toma el bookmarklet y comienza a jugar con la tipografía que encuentres en línea
Diseño
Design es un conjunto de herramientas de asistencia de diseño y desarrollo web que se pueden utilizar en cualquier página web. Abarcando las utilidades para el diseño, la medición y la alineación de la cuadrícula, el Diseño es un potente marcador de JavaScript único.
W3C Validar esta página
Esta es la base? Validar esta página? Favelet. Simplemente envía la URL de la página vista actualmente al Validador para su procesamiento. Los resultados aparecen en la misma ventana.
Layout Grid Bookmarklet
Simplemente aplica una imagen de cuadrícula de diseño al cuerpo de la página. También he creado un Bookmarklet de Layout Grid Overlay que crea un div, lo posiciona absolutamente y luego aplica la imagen de fondo al div. Debido a que la imagen es transparente, obtienes un bonito efecto de superposición. Al cambiar la posición de la div a? Fija? También puede crear un buen Bookmarklet de superposición fija de cuadrícula de diseño que puede ser útil en ocasiones.
ReloadCSSEvery
Un aspecto molesto de escribir una hoja de estilo es tener que volver a cargar la página en su navegador para ver sus cambios incrementales. Hay formas de solucionar esto, pero las encuentro menos que ideales, así que creé ReloadCSSEvery. Actualiza solo el CSS de una página cargada cada 2 segundos para que pueda usar el editor de CSS de su elección y ver los cambios en tiempo semi-real en su navegador al guardar.
Bookmarklet para instalar un complemento de WordPress
He creado un bookmarklet que puede usar para instalar un complemento de WordPress. Mientras ve un complemento en el Directorio de complementos de WordPress, haga clic en este bookmarklet y se lo guiará para instalar ese complemento en su sitio.
Imprimir lo que te gusta
¿Cansado de imprimir páginas web solo para encontrar que su impresión está llena de anuncios, espacios vacíos y otra basura que no desea? PrintWhatYouLike es un editor en línea gratuito que le permite formatear cualquier página web para imprimir en segundos.
Pagina liquida
Una vez más, estaba cambiando el diseño de uno de mis sitios web cuando me di cuenta de que sería genial si pudiera mover las cosas en una página para previsualizar los cambios, sin ninguna codificación. Como resultado, hay una solución para ese problema: un bookmarklet y unas pocas líneas de JavaScript hicieron el truco. Usando jQuery y su extensión de UI, esto resultó ser bastante simple de implementar.
Marcador
Esta herramienta crea marcadores de código JavaScript.
