Cómo crear un bookmarklet

Según la Wikipedia, 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.

La sintaxis es javascript: seguido del código javascript. El código javascript no debe contener cambios de líneas y no debe ser demasiado extenso, esto un compresor de javascript nos lo puede facilitar. Para usar un bookmarklet basta con añadirlo a los favoritos como un enlace más, y en navegadores como Firefox es tan fácil como arrastrarlo a la barra de favoritos.

Con algo tan sencillo podemos resolver un sinfín de limitaciones de los buscadores y enriquecerlos con nuevas funcionalidades. El uso de los bookmarklets data del 2001, por lo que podemos encontrarnos muchos ya desarrollados como estos que no pueden faltar en mi barra:

• Googmarklets (Google Bookmarklets)
• XRAY
• Design

Pero, por muchos que existan ya desarrollados, siempre hay alguna necesidad por cubrir, por eso os comparto un par de plantillas que nos permitirán hacer algunos bien sencillos.

Uno de los usos más típicos es realizar una acción con el texto seleccionado en la página, como por ejemplo buscar dicho texto en algún buscador. El mismo ejemplo que nos brinda La Wikipedia lo podemos reutilizar con solo sustituir la URL de búsqueda por la del buscador que nos interese. Así por ejemplo podemos hacer un bookmarklet que busque el texto seleccionado en un comparador de productos como Ciao.

Para ello sustituiremos http://es.wikipedia.org/w/wiki.phtml?search= por http://www.ciao.es/sr/q-

Para Firefox y Konkeror

1

javascript:(function(){q=document.getSelection();if(!q)q=prompt('De qué estás buscando información?:'); if(q)location.href='http://www.ciao.es/sr/q-'+escape(q);})()

Bookmarklet Ciao

Para Safari

1

javascript:void(q=prompt('De qué estás buscando información?:',getSelection())); if(q)void(location.href='http://www.ciao.es/sr/q-'+escape(q))

Bookmarklet Ciao

Para Internet Explorer

1

javascript:(function(){q=document.selection.createRange().text;if(!q)q=prompt('De qué estás buscando información?:',''); if(q)location.href=' http://www.ciao.es/sr/q-'+escape(q);})()

Bookmarklet Ciao

Otro uso más avanzado de los bookmarklets es para modificar el comportamiento de la página como lo hacen XRAY y Design. Estos por su complejidad necesitan añadir dinámicamente librerías externas de javascript a la página. Aquí os dejo una plantilla que podemos reutilizar con nuestro propio script externo:

1

javascript:function cargaScript(scriptURL) { var scriptEl = document.createElement('SCRIPT'); scriptEl.setAttribute('language', 'JavaScript'); scriptEl.setAttribute('src', scriptURL); document.body.appendChild(scriptEl);} cargaScript('http://camino/a/miscript.js');

Solo tenemos que sustituir http://camino/a/miscript.js por la URL real de nuestro script. Y si necesitáramos cargar más de uno entonces repetimos la llamada a la función cargaScript con la URL del otro script.

Con este bookmarklet puedes probar e24Presenter en tu página: e24Presenter

En un próximo post compartiré un grupo de bookmarklets que he desarrollado para mi día a día y que alguno podría serte útil.

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

12 Directorios de Scripts AJAX Gratis

Hoy os traigo un listado de directorios de scripts y componentes AJAX que todo programador Web debe tener a mano.

1.- AjaxRain

2.- AjaxDaddy

Leer el resto de la entrada »

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

¿Funciona Adsense? ¿Es posible vivir de Adsense?

Estas son unas de las muchas preguntas que responde Alejandro Suárez Sánchez-Ocaña en su blog acerca del programa Adsense de Google.

Alrededor del fenómeno Adsense se han generado muchos tópicos, positivos y negativos, y no todos tenemos la posibilidad de desenmascararlos, porque no tenemos datos suficientes o porque no podemos jugar en los dos bandos (Adwords y Adsense). Afortunadamente para Alejandro, las empresas que participa (Publispain, Ocio Networks SL, Yes.fm) le han permitido formarse una opinión muy sólida sobre Adsense y que comparto en gran parte, cosas que muchos sospechábamos pero que no teníamos elementos suficientes para asegurarlas. Os dejo para que leáis el post, que a pesar de su longitud no tiene desperdicio… Anh y continuad con los comentarios que se han convertido en un foro de debate donde ya muchos han compartido sus propias experiencias.

Enlace: Adsense: mi verdad y alguna confidencia

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Encuentra tu mejor ruta de viaje con Google Maps

Google acaba de añadir a Google maps una capa de transito del transporte público, esto ayudará a que miles de viajeros ahorren dinero ya que podrán encontrar su mejor ruta de viaje a través de un grupo de ciudades que soportan este servicio, inicialmente solamente esta disponible para:

Belo Horizonte, Berlin, Bordeaux, Brasilia, Cairo, Capetown, Caracas, Chicago, Copenhagen, Dallas, Dortmund, Duisburg, Düsseldorf, Ekaterinburg, Essen, Frankfurt, Genoa, Guadalajara, Hamburg, Helsinki, Johannesburg, Kazan, Köln, Lille, Lisbon, London, Lyon, Madrid, Marseille, Medellin, Mexico City, Melbourne, Monterrey, Montreal, Munich, Naples, Nizhniy Novgorod, Oslo, Paris, Perth, Portland, Porto, Porto Alegre, Prague, Pretoria, Recife, Rennes, Rio de Janeiro, Samara, San Francisco, Santiago, Sao Paulo, Seattle, Strasbourg, Toulouse, Tunis, Vienna, Warsaw.

Sospechosamente un texto en gris dice “This feature was not created by Google.”, ¿qué nueva adquisición habrán hecho?

Fuente: Lifehacker

Navega los resultados de Google en forma de cubo 3D

Vía Digital Inspiration he conocido Search Cube, una interesante implementación de búsquedas sobre Google que muestra sus resultados en forma de cubo 3D. El cubo se va formando asincrónicamente a medida que van llegando los resultados. Podemos girar el cubo en todas las direcciones usando el teclado o el ratón.

El buscador está desarrollado con Flash y utiliza el motor de Google. Además utiliza Thumbshots.org para mostrar una vista previa de las páginas en los resultados. Realmente utilidad le veo poca, pero no deja de ser original el proyecto (en fase experimental) y para aquellos que se aburren con facilidad tienen alternativa de búsqueda más interactiva.

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Nuevo Google Sitemap Generator

Panel de Administración de Google Sitemap Generator

Ayer anunció Google en su blog para webmasters que ha sacado una nueva versión del Google Sitemap Generator. Aquí os dejo un listado de mejoras que veo a primera vista:

• Consola de administración web que nos permite gestionar nuestros sitemaps de forma más intuitiva.
• Soporte para varios tipos de sitemas
  • Sitemaps XML estándar
  • Sitemaps para móviles
  • Sitemaps para código
• Puede enviar ping a Google Blog Search y a otros buscadores que aceptan sitemaps
• Permite incluir las URLs en el robots.txt
• Disponible para Linux/Apache y Windows/IIS
• Disponible como código libre, de seguro todos los proveedores de alojamiento lo pondrán disponible para sus usuarios como un paquete predeterminado.

Ahora me lo voy a instalar y ya os comentaré que me parece.

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Define el thumbnail de tu web que saldrá en Facebook y Digg

Hoy día es muy común ver asociado un thumbnail a nuestros posts cuando son referenciados en las redes sociales. Generalmente estos thumbnails son generados de forma automática y no siempre se quedan como nos gustaría.

Con la etiqueta link podemos decidir que tumbnail se mostrará, y algunas redes sociales como Digg y Facebook lo respetarán. Además de la etiqueta link es obligatorio que estén presentes las etiquetas meta para el título y la descripción.

1
2
3

<meta name="title" content="Bitácora de Webmaster" />
<meta name="description" content="Noticias, consejos, recursos y tutoriales para webmasters" />
<link rel="image_src" href="http://www.bdw.es/thumbnail.jpg" />

Generalmente el meta para la descripción ya lo tenemos pero debemos asegurarnos de que esté el de título, basta con que pongamos el mismo título de la página.
Para más detalles podéis seguir las pruebas que está realizando en este sentido Dave Winder y que ya podemos ver un ejemplo funcional en FriendFeed.

Además según la fuente, ya Google ha estado experimentando mostrando thumbnails asociados a algunos resultados de búsquedas, así que no nos extrañemos que escojan el estándar de una red ya tan popular como Facebook.

Ahora lo ideal sería un plugin para Wordpress que pusiera automáticamente el thumbnail de la foto que añadamos al post. ¿Alguien se anima? ¡Yo lo quiero!

Fuente: Digital Inspiration

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Versión online de YUI Compressor

La pasada semana pasada os dejé una comparativa de los compresores de javascript más usados. Entre ellos YUI compressor, en mi opinión el de mejores prestaciones en cuanto a compresión/compatibilidad, y por tanto es el que siempre utilizo.
Rodolphe Stoclin pone a nuestra disposición una versión online de YUI Compressor que acabo de añadir a mis favoritos y que me hará olvidar esas incómodas líneas de comandos.

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.

Spotify: Música bajo demanda 5 estrellas

Todos los aficionados a la música estamos de enhorabuena con el lanzamiento de Spotify, la nueva aplicación para la escucha de música bajo demanda.

A través de una aplicación de escritorio, disponible para plataformas Windows y Mac, con una interfaz simple y práctica, Spotify nos permite escuchar cualquier tema de su ya extensa librería cuantas veces queramos, crear playlists, compartir nuestras canciones favoritas con otros usuarios, etc., yendo un paso más allá de otros sistemas de música bajo demanda como pueden ser Pandora o Last.fm, los cuales solo nos permiten escuchar una vez cada tema y sin seleccionarlo directamente.

Spotify se basa en la tecnología P2P para aligerar la carga de sus servidores, y ofrece música en formato ogg de compresión q5, facilitándonos archivos de una mas que aceptable calidad sonora en un tamaño muy reducido, eliminándose así las esperas por la carga de las canciones.

El sistema ha abierto en el formato de beta cerrada, por lo que necesitaremos una invitación para probarlo. No obstante, y por tiempo limitado (parece que dos semanas a lo sumo), podremos registrarnos a través de éste formulario sin necesidad de aquellas.

Toda una noticia para los melómanos.

isArray en javascript sin instanceof

Hoy Ajaxian me ha sacado de una duda que llevaba varios días dándome dolores de cabeza. Y es que comprobar si un objeto es un Array en javascript es todo un dolor de cabeza encontrar una solución que funcione a la perfección en todos los navegadores.
Aquí os dejo esta pequeña obra de arte en forma de javascript:

1
2
3

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]'; 
}

Soy Alfredo Artiles, Co-Fundador de equipo24, e24Presenter y e24Apps. Mi pasión es el AJAX, SEO, SEM y emprender todo lo que se me ponga por delante. Si me necesitas estoy 24x7 en Twitter @aartiles24.