Subscribe to RSS feed Suscribirse al feed RSS or o follow me me siguen on Twitter? en Twitter?
Bookmarklets are bookmarks containing snippets of JavaScript code. Bookmarklets son los marcadores que contienen fragmentos de código JavaScript. They can be used to accomplish specific tasks. Pueden ser utilizados para realizar tareas específicas. Web developers can quicken several common operations by using bookmarklets. Los desarrolladores Web pueden acelerar algunas operaciones comunes mediante el uso bookmarklets. Best of all, bookmarklets do not slow down your web browser like extensions do. Lo mejor de todo, bookmarklets no ralentizar el navegador web, como las extensiones de hacer. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers). Por ejemplo, algunos de estos bookmarklets juntos de manera eficaz puede sustituir el complemento de Firefox para desarrolladores web (si anhelamos para ellos en otros navegadores).
To save these bookmarklets, just right click on the link to the bookmark and save it into your bookmark folder OR drag the bookmarklets to your Bookmarks toolbar. Exception: The first three bookmarklets (first two list elements) are links to pages containing the bookmarklets, as I found them difficult to embed here. Para guardar estos bookmarklets, simplemente haga clic derecho sobre el enlace al marcador y guardarlo en su carpeta de favoritos o arrastre el bookmarklets a tu barra de marcadores. Excepción: Los tres primeros bookmarklets (los dos primeros elementos de la lista) son enlaces a páginas que contengan la bookmarklets, como lo tuvieron dificultades para integrar aquí.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. Para utilizar una marca y, a favoritos Enlace simplemente haga clic derecho sobre él y seleccione "". I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. Me gustaría recomendar que se coloque en una carpeta en la barra de herramientas, de modo que cualquier bookmarklet se puede acceder con 2 clics. I find that to be the least-cluttered and easiest-to-use arrangement. Me parece que para ser de los menos desordenada y más fácil de acuerdo de uso. Onto the bookmarklets then. En el bookmarklets entonces.
- Updated 07 July 2008: Actualizado el 07 de julio 2008:
XRAY XRAY : :
See the box model for any element on web pages. Véase el modelo de caja de cualquier elemento de las páginas web. - Test Styles Prueba de Estilos and y Edit Styles Editar Estilos : :
Test Styles gives you a new tab/window to type CSS rules for the original webpage. Prueba de estilos le da una nueva pestaña / ventana para escribir las reglas CSS para la página web original. The styles are applied to the webpage immediately. Los estilos se aplican a la página web de inmediato. Edit Styles is similar, except that you start with the CSS styles for the page. Modificar estilos es similar, excepto que se inicia con los estilos CSS para la página. [thanks, [gracias, Nick Nick ] ] - W3C HTML Validator W3C HTML Validator : :
Validate the document that you are currently viewing. Validar el documento que usted está viendo actualmente. Great for on-the-fly validation checks while coding pages. Ideal para en la marcha controles de validación, mientras que la codificación páginas. - W3C CSS Validator W3C CSS Validator : :
Validate the CSS of the webpage that you are currently viewing. Validar el CSS de la página web que usted está viendo actualmente. Useful for quick checks during CSS coding. Útiles para el control rápido durante la codificación CSS. - Resize Viewport: Cambiar el tamaño de ventana gráfica: 800×600 800 × 600 , , 1024×768 1024 × 768 , , 1280×1024 1280 × 1024 and y 1600×1200 1600 × 1200 : :
See how your web page looks like, in different resolutions. Vea cómo su página web parece, en diferentes resoluciones. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design. Cambiar rápidamente entre 800 × 600 a 1600 × 1200, las dos resoluciones extremas normalmente se considera en el diseño web. - View Cookies Ver cookies and y Toss Cookies Cookies Toss : :
View the cookies stored by the current page (using the first link). Ver las cookies almacenadas en la página actual (con el primer enlace). Then toss the cookies that you wish to, by using the second link. Luego agregue las cookies que desea, utilizando el segundo enlace. - NetCraft NetCraft : :
Tells you server details of a site and displays uptime graph. Le indica los detalles del servidor de un sitio y muestra el gráfico tiempo de actividad. - Replace with Alternate Text Reemplazar con Texto alternativo : :
Useful to check for images that do not have alt tags. Útil para comprobar si las imágenes que no tienen etiquetas alt. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites. La desventaja es que sólo elimina <img>, dejando intactos los botones y las imágenes creadas con CSS o sprites. - Alexa Snapshot Lookup Ranking de instantáneas de búsqueda : :
Look up your website details and snapshot at Alexa, a popular web metrics website. Consultar los datos de su sitio web y instantánea en Alexa, una web metrics popular página web. - Whois Lookup Whois Lookup : :
Lookup the WhoIs of the domain you are on. Buscar el Whois del dominio que está. - Edit current website Editar página web actual : :
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension. Editar la página actual - agregar texto, eliminar texto, los elementos web moverse, etc - todo ello sin la necesidad de cualquier otra extensión. - Search selected text in Google Buscar texto seleccionado en Google : :
Although not strictly related to web design/development, Google searches can be useful to look up various terms and techniques in presentation and scripting languages. Aunque no es estrictamente relacionados con el diseño web / desarrollo, las búsquedas de Google puede ser útil para buscar varios términos y técnicas en la presentación y lenguajes de script. - Image Drag Arrastre de la imagen : :
Drag and rearrange images seamlessly from within a page. Arrastrar y reordenar las imágenes sin problemas desde dentro de una página. - Grab screenshot Captura de pantalla Grab : :
Grab a screenshot of the page that you are viewing, without using any other installed application. Agarra una captura de pantalla de la página que estás viendo, sin utilizar ninguna otra aplicación instalada. - Color List Lista de Color ( ( use this utilizar este instead for IE): en lugar de IE):
Lists colors used in the current webpage. Listas de colores utilizados en la página web actual.
Further Bookmarklet resources Otros recursos Bookmarklet
You might also want to read through these collections of bookmarklets: Usted también puede leer a través de estas colecciones de bookmarklets:
- WebDev at Squarefree WebDev en Squarefree : :
A large collection of bookmarklets useful for web designers and developers. Una gran colección de bookmarklets útiles para los diseñadores y desarrolladores web. Maintained by Jesse Ruderman. Gestionado por Jesse Ruderman. - Useful bookmarklets for casual web users Bookmarklets útiles para los usuarios de la red informal : :
A guest post that I wrote on DailyApps.net. Un puesto de invitado que escribí en DailyApps.net. It lists useful bookmarklets for everyone. En él se enumeran bookmarklets útil para todos. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too. La mayoría de ellos acelerar o automatizar tareas de uso común, que sin duda ayuda a los diseñadores y desarrolladores también.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Como es habitual en mis entradas de recursos, esta lista se actualiza continuamente como recomendaciones entrar Contact us Contáctenos to recommend bookmarklets. recomendar bookmarklets. Tell us what are your favorite bookmarklets – for web development or otherwise – I'm sure we can all benefit from new bookmarklets shared by others. Díganos cuáles son sus bookmarklets favorito - para el desarrollo web o de otra manera - estoy seguro de que todos puedan beneficiarse de bookmarklets nuevo compartidos por otros.
Hello buddy!! Hola amigo!! i want to say that short but sweet link,you should also add differ browser list in which one can test his/her website by the way its good that you share it with us.Have a good day. Quiero decir que tienen enlaces corta y dulce, también se debe agregar difieren navegador lista en la que uno puede probar su sitio web por la forma en que su bien que compartirlo con us.Have un buen día.
God bless you. Dios te bendiga. Punne4e Punne4e
I find Me parece https://www.squarefree.com/bookmarklets/webdevel.html#test_styles https: / / www.squarefree.com / bookmarklets / webdevel.html test_styles # invaluable – I'll create a HTML document, and then using that bookmarklet I can shape the stylesheet in realtime. inestimable - Voy a crear un documento HTML, y luego utilizando bookmarklet que me pueden dar forma a la hoja de estilos en tiempo real. It's also very handy for writing user stylesheets. También es muy útil para escribir hojas de estilo del usuario.
This is pretty good, for those who are forced to do some work on the fly Esto es muy bueno, para aquellos que se ven obligados a hacer un trabajo sobre la marcha
@Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon. Nick @ Z: excelente sugerencia sobre bookmarklet estilo de las pruebas, se actualizará el puesto pronto.
Hi Sumesh, I just came across your blog. Sumesh Hola, acabo de llegar a través de su blog. Good work. Buen trabajo. Keep it up. Keep it up. Will try to read all your future posts. Tratará de leer todos sus mensajes futuro.
Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses Acabo de ver la utilidad de estos accesos directos pueden estar en un puesto de QQT, favoritos para los usos futuros
The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer. El sitio web "Editar actual" es un bookmarklet agradable, pero carece de lo que el "Live Website Editor" bookmarklet tiene para ofrecer.
Among other things, it can persist the modifications made to any webpages (at least it's its purpose). Entre otras cosas, que puede persistir las modificaciones realizadas a las páginas web (al menos es su propósito).
You can find it here: Usted puede encontrar aquí: http://code.google.com/p/lwe/ http://code.google.com/p/lwe/
It's still in an early version but it works on most of the websites. Está todavía en una primera versión, pero funciona en la mayoría de los sitios web.
Cheers ¡Salud!
@Arnaud L: Arnaud @ L:
That's a useful bookmarklet, and being persistent would likely be useful for many more web users. Eso es un bookmarklet útil, y ser persistente probablemente sería útil para muchos más usuarios de Internet. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation. Voy a publicar el bookmarklet en un futuro post redondeo bookmarklets más útil - Entonces, gracias por la recomendación.