Cocos' Island Hacked

El título del post debería llamarse: “¿Que es un Bookmarklet y cómo se usa?” pero me hacía gracia llamarlo así :P. Además quiero que se entienda éste post cómo una guía básica para entender las ventajas de usar Bookmarklets desde cero.

¿Pero que es un Bookmarklet?
Un bookmarklet es un trozo de código JavaScript que podemos guardar en los Favoritos (marcadores) de nuestro navegador y así no tener que escribirlo una y otra vez.

JavaScript es un lenguaje orientado a objetos que nos permite, por ejemplo, cambiar la posición y el tamaño de la ventana del navegador, modificar elementos dentro del código HTML, generar alertas de navegador, etc…

La forma más común de ejecutar JavaScript es dentro del código HTML, pero tiene la peculiaridad que también se puede ejecutar desde la barra de direcciones del navegador.

Por ejemplo, si escribimos en la barra de direcciones de ésta misma ventana:

javascript:window.resizeTo(800,600);moveTo((screen.width/2)-(window.outerWidth/2),(screen.height/2)-(window.outerHeight/2))

y hacemos Enter la ventana actual se nos reducirá a 800×600px.

Pero claro, tener que escribir todo esto cada vez que queremos ver la ventana a 800×600px, pues es un engorro, la gracia del bookmarklet es que se puede guardar cómo un Favorito más en nuestro navegador, y así poderlo ejecutar con un sólo click.

¿Pero cómo me guardo el Bookmarklet en los favoritos?
Por ejemplo, en Safari solo tenemos que tener a la vista la barra de favoritos (Visualización/Mostrar barra de Favoritos), escribir en la barra de direcciones el código JavaScript y (sin hacer Enter) arrastrar la dirección a la Barra de Favoritos (podéis probar con el código de antes, que escalaba la ventana a 800×600px). Importante escribir el código siempre en una sola linea.
En Firefox (supongo que en Opera será algo parecido y en Explorer no tengo ni idea idea de cómo va), hay que ir al menú “Marcadores/Organizar Marcadores/Nuevo Marcador” y en “Localización” pegaremos el código JavaScript.

Pero también podemos encontrar infinidad de webs con todo tipo de bookmarklets para que nos los guardemos.
En éste caso solo hay que hacer “Botón derecho/Guardar Favorito” en el link y voilá!

Hay bookmarklets para hacer de todo, algunos incriblemente currados cómo éste que te permite añadir multitud de opciones de visualización a la web que visitemos (cómo reglas, medidor de distancias, visor de cuadrícula, etc…)
Otros son más sencillos pero igual de prácticos, sobretodo a la hora de diseñar y desarrollar webs.

Os dejo unos cuantos (en Safari funcionan todos, pero en otros navegadores depende de cual no funciona) que espero que os sirvan de ayuda:

Fuentes: Sprymedia, Unijimpe, www-ui.is.s.u-tokyo.ac.jp, Cybernetnews

2 comentarios para “Bookmarklet for dummies”

Deja un comentario