NorfiPC » Informaciones de Windows » Hacer tus propios Bookmarklets usando Javascript

Como crear Bookmarklets con Javascript para usar en el navegador web

Hacer tus propios Bookmarklets que permiten y facilitan acceder y ejecutar tareas y funciones desde el navegador. Tutorial con la explicación paso por paso, ejemplos prácticos con los códigos para copiar y pegar. Como insertarlos en páginas y blogs para compartirlos en la red y así facilitarles a los usuarios una mejor experiencia de la navegación en tu sitio.

Crear Bookmarklets para modificar el estilo de una pagina web

¿Que son los Bookmarklets?

Los Bookmarklets son una especie de marcadores, son vínculos que se guardan en el navegador para ejecutar diversas funciones, no son plugins ni aplicaciones, son solo porciones de códigos con instrucciones que se ejecutan a petición del usuario y no afectan en lo absoluto el rendimiento ni la capacidad del navegador.
Funcionan debido a la capacidad de los navegadores web modernos de interpretar y ejecutar el código Javascript introducido en la barra de direcciones.

¿Que es Javascript?

Javascript es un lenguaje de programación, muy utilizado precisamente para añadirle interactividad a las páginas web, la mayor parte de los efectos y funciones como formularios, funcionan gracias a estas instrucciones.
Para comprender que es una función de Javascript haz la siguiente prueba:

Copia y pega en la barra de dirección de tu navegador cualquiera de las siguientes líneas (no saldrás de esta página) y presiona la tecla Enter:

¿Cómo funcionan estas funciones?

• La palabra javascript: le indica al navegador que lo que sigue es una función de JavaScript y como tal debe interpretarla.
• alert es una función que muestra sin salir de la página un cuadro con el resultado de la variable o el texto que se especifique.
• document.title y location.href son variables globales que devuelven la primera, el título del documento o página web donde se ejecute y la siguiente la dirección URL correspondiente.

Para ver una lista con todas las variables que puedes usar para crear tus Bookmarklets, accede a la siguiente página de este sitio: ◄ Lista de variables y funciones de Javascript

Ejemplos de algunas variables de Javascript

navigator.appName = Devuelve el nombre genérico del navegador web.
document.lastModified = Fecha de la última modificación hecha a la página.
document.images.length = Número de imágenes en la página.
document.documentElement.clientHeight = Muestra la altura en pixeles de la ventana del navegador.
document.documentElement.clientWidth = Muestra el ancho en pixeles de la ventana del navegador.

¿Cómo probar las funciones de Javascript?

El resultado que devuelve cada variable puedes probarlo antes de utilizarlas en el código, para eso utiliza el siguiente formulario.

Intérprete de Javascript

Internet Explorer

Para usar el formulario solo escribe o pega la variable o código y oprime el botón "Probar".
Si usas el navegador Internet Explorer utiliza el botón Probar inferior, si empleas Firefox o Google Chrome puedes usar cualquiera, la diferencia es que el superior ejecuta el código y muestra el resultado en una nueva ventana, el inferior lo muestra en un cuadro de alerta.

Como crear un Bookmarklet con las funciones anteriores

Un Bookmarklet es simplemente un link que en vez de dirigir el navegador a una dirección web, ejecuta una función como las anteriores, o más compleja, inclusive varias funciones de forma secuencial.
Para eso se introducen el código necesario en la dirección href de un link, el resultado será el mismo que en las pruebas hechas, con la diferencia de que no es necesario copiar y pega, solo dar un clic en el vínculo y se ejecutará la función.
Se hace de la siguiente manera:

<a href="javascript:alert('Hola')">vinculo</a>

Pruébalo.
Esta es la forma más usada y practica de crear un Bookmarklet, permite guardarlo arrastrándolo a la barra del navegador para ejecutarlo regularmente, (suponiendo que ejecute alguna función útil, no 'Hola') y compartirlo en la red insertando el vínculo en una página web o blog.
La única desventaja de este método es que es necesario tener acceso al código fuente o HTML de la página o blog, si tienes una página personal o un blog en Wordpress o Blogger es posible, pero en sitios como Facebook es imposible. En estos casos la única forma de compartir un Bookmarklet es ofreciendo el código, que el usuario o persona tendrá que pegar manualmente en la barra de direcciones de su navegador web.

Estructura de los Bookmarklets

Como se vio en el ejemplo anterior, la estructura de un Bookmarklet para crearlo en un link de una página web es el siguiente:

<a href="javascript:FUNCION">Vínculo</a>

Donde FUNCION puede ser una función de Javascript o varias, encadenadas secuencialmente.
Se puede incluir en el código del link (es opcional) la siguiente función que ofrecerá información al usuario al dar un clic con el ratón:

onclick="alert(Arrastra este link a la barra de marcadores del navegador');return false;"

Como usar los Bookmarklets en los navegadores web

Cualquier Bookmarklet creado insertando la función en un link, se puede guardar en los navegadores para emplearlo en otra ocasión de dos formas:
• En Firefox y Google simplemente arrastrándolo a la barra de Marcadores o de Bookmarks.
• En Internet Explorer es ocasiones puede hacerse de la forma anterior, sino será necesario dar un clic derecho encima del vínculo y en el menú escoger: Agregar a Favoritos, saldrá una alerta de confirmación en Crear en escoger "Barra de Favoritos".

Reglas a seguir para crear los Bookmarklets

El código empleado en el Bookmarklet formará parte de la dirección URL del navegador, por lo que no puede contener espacio (en navegadores modernos no afecta), ni caracteres especiales (caracteres que no sean los de la codificación ASCII) para que funcionen de forma adecuada.

No se pueden utilizar los caracteres <>, para usarlos es necesario escaparlos, (sustituirlos por el código que los representa). Esto es debido a que el tag o etiqueta del anchor o vinculo tiene la siguiente estructura: <a href=...>, si se incluye en su interior uno de estos caracteres traerá conflictos y confundirá al navegador.
Sustitúyelos de la siguiente forma:
< = <
> = >

No se puede insertar ninguna comilla doble (") en el interior del codigo, en caso necesario es necesaria escaparla.
Sustitúyelas así: " = "
Javascript utiliza las comillas dobles para definir donde comienza y termina una cadena o string, por ejemplo: "Esto es una cadena" Al igual que en el caso anterior usar comillas dobles dislocará al navegador, siempre que sea posible utiliza comillas simples ('), no son necesario de escapar.

También se pueden escapar los caracteres especiales en cualquier Bookmarklet convirtiéndolos al código hexadecimal que el navegador interpretará de forma adecuada. Para eso usa el siguiente convertidor, puedes introducir caracteres aislados o el código completo que has empleado.

Convertidor de caracteres en código hexadecimal.

Descarga en el siguiente vínculo una aplicación HTA que permite convertir los caracteres offline.

Descargar convertidor de caracteres

Al insertar el código Javascript en un vínculo, naturalmente el navegador tratará de abrir una nueva ventana, se puede evitar de dos formas:
• Usando void al comienzo de la función, por ejemplo: void(función....
• Usándolo al final de la función, por ejemplo: ..funcion;void 0">
• Usando al final de la función: ....return false;">
Se puede comprender solo observando los ejemplos a continuación.

Ejemplos prácticos de códigos para crear Bookmarklets

Se supone que los que lean esta página no son expertos en Javascript, por lo que se mostrarán algunas formas de crear Bookmarklets con los ejemplos bien detallados, para que sea posible su comprensión.

Crear Bookmarklets para mostrar información

Algunos ejemplos de como obtener información usando variables globales y mostrando el resultado en un cuadro de una alerta.
Utiliza el siguiente código:

alert (''+VARIABLE)

Entre las dos comillas simples va el mensaje de texto.
El signo + permite agregar una o varias variables, por ejemplo:
alert ('texto') Muestra solo un mensaje de texto.
alert ('texto'+VARIABLE) Muestra un texto y a continuación una variable.
alert ('texto'+VARIABLE+'texto') Muestra texto, una variable y texto de nuevo.
Por ejemplo:

<a href="javascript:alert('Nombre del navegador: '+navigator.appName)">NombreNavegador</a>

Pruébalo: NombreNavegador

Crear Bookmarklets para seleccionar texto y realizar una acción

Seleccionar texto en una página y luego realizar una acción determinada, es posible utilizando la funcion getSelection() (solo en Firefox y Chrome).
Primero es necesario declarar una variable, se hace de la siguiente forma:
NombreVariable = funcion
Varios ejemplos de como hacerlo:

1- Permite seleccionar texto y muestra el resultado en una alerta, (la variable declarada "aa" representa el texto seleccionado).

<a href="javascript:aa=document.getSelection();alert('Haz seleccionado: '+aa)">Seleccionar</a>

Prúebalo: Seleccionar

2- El siguiente escribe la selección en una nueva página, (usa document.write por lo que sobrescribirá el contenido de la página):

<a href="javascript:aa=window.getSelection();document.write(''+aa)">Seleccionar</a>

Prúebalo: Seleccionar

3- En el siguiente, con el texto seleccionado se realiza una búsqueda en Google, "escape(aa)" envía la variable al final de la direccion URL.

<a href="javascript:aa=window.getSelection();location='http://www.google.com/search?q='
 + escape(aa);">Seleccionar</a>

Prúebalo: Seleccionar

4- Igual que el anterior pero en este caso se abre una nueva pestaña del navegador con el resultado, la variable "bb" representa una nueva pestaña del navegador que se debe abrir.

<a href="javascript:aa=window.getSelection();bb=window.open('http://www.google.com/search?q='
 + escape(aa));location.bb;">Seleccionar</a>

Prúebalo: Seleccionar

5- Es este se realiza la misma acción, pero se utiliza un código diferente para seleccionar el texto y abre en la misma ventana por lo que funciona en todos los navegadores incluyendo Internet Explorer.

<a href="javascript:q=''+(window.getSelection?window.getSelection():document.getSelection
?document.getSelection():document.selection.createRange().text);if(q!=null)
location='http://www.google.com/search?q='+escape(q)">Seleccionar</a>

Prúebalo: Seleccionar

Crear Bookmarklets para consultar o enviar la dirección URL de una pagina

1- Permite consultar la información de la página donde nos encontremos navegando en el sitio de Whois, para eso se direcciona a dicho sitio mediante location.href, adicionando la URL actual mediante la misma variable.

<a href="javascript:location.href='http://who.is/'+location.href">Whois</a>

Prúebalo: Whois

2- De la misma forma anterior podemos validar el código HTML de nuestra página.

<a href="javascript:location.href='http://validator.w3.org/check?uri='+
escape(document.location)">Validar</a>

Prúebalo: Validar HTML

3- Permite traducir la página actual usando el traductor de Google:

<a href="javascript:location='http://translate.google.com/translate?u='
 + encodeURIComponent(location);">Traducir página</a>

Prúebalo: Traducir página

4- Permite ver la página en la cache de Google en caso de que el sitio no esté disponible.

<a href="javascript:void(location.href='http://www.google.com/search?q=cache:'
+location.href)">Cache de Google</a>

Prúebalo: Cache de Google

5- Permite enviar un correo electrónico para sugerir una página, con su título y dirección web incluidos.

<a href="javascript:location.href='mailto:?SUBJECT=Te sugiero:
 '+document.title+'&amp;BODY='+escape(location.href); void 0">Sugerir página</a>

Prúebalo: Sugerir página

Crear Bookmarklets para modificar el estilo de una pagina web

Con los Bookmarklets creados usando Javascript, se puede modificar totalmente el estilo de cualquier página web o blog de internet, puedes encontrar más información en la página de este sitio:
◄ Como cambiar y modificar el estilo CSS de las páginas web con Javascript
Varios ejemplos prácticos, algunos muy útiles y solicitados los encontrarás en la página dedicada a modificar el estilo de Facebook:
◄ Como cambiar el color y estilo a tus páginas de Facebook
A continuación solo algunos ejemplos.

<a href="javascript:void(document.body.style.fontFamily='Comic Sans MS')">Cambiar fuente</a>

Prúebalo: Cambiar fuente

<a href="javascript:void(document.body.style.fontSize='20px')">Aumentar fuente</a>

Prúebalo: Aumentar fuente

<a href="javascript:void(document.body.style.color='red')">Color texto</a>

Prúebalo: Color texto

Como insertar los Bookmarklets hechos en un blog de Wordpress o Blogger

Si no tienes una página web personal sino un blog en Wordpress o Blogger, también puedes insertar tus Bookmarklets en ellos, hazlo de la siguiente forma:
• Prepara y prueba el código en el equipo local para tener seguridad de que funciona.
• En la página de edición de tu blog escribe el nombre del Bookmarklet.
• Escoge la vista en HTML, haz una búsqueda por la palabra introducida anteriormente y entonces sustitúyela por el código completo.

Solo son sencillos ejemplos aislados que te permitirán introducirte al fascinante mundo de las aplicaciones web y al lenguaje de Javascript, imposible en una sola página agregar más.
En este sitio encontrarás Bookmarklets diseminados en varias páginas, los reconocerás por su icono, también está disponible toda la información necesaria para hacerlos más complejos y útiles.

Páginas relacionadas

◄ Lista de variables y funciones de Javascript para usar en las páginas web.
◄ Navegadores web como usar, instalar y agregar marcadores y Bookmarklets
◄ Lista de atributos de eventos de Javascript códigos y ejemplos prácticos.
◄ Javascript fácil en páginas web, tutorial y ejemplos.
◄ Como escribir con Javascript texto y otros elementos en las páginas web
◄ Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores.
◄ Como imprimir solo un área, parte o sección de una página web.
◄ Como escapar y ocultar texto, código HTML y Javascript en páginas web.

Anterior | Subir | Siguiente

Para mas información escríbeme a: