domingo, 30 de mayo de 2010

Bookmarklets y Google Maps

Hace unos dias ya comente brevemente que eran los bookmarklets y para que podian ser utilizados. Por lo general se trata de funciones y métodos de javascript que son utilizados desde la barra del navegador pero también podemos hacer uso de funciones definidas en la propia página que visitamos.

Por ejemplo, ¿quien no ha sentido curiosidad por conocer las coordenadas de su casa cuando visita Google Maps? una forma "sencilla" de saber las coordenadas de un punto en los mapas de google es pulsar sobre el enlace que muestra el texto "enlazar", al pulsar en dicho enlace se muestra una pequeña ventana que nos da información sobre la url que debemos teclear en nuestro navegador si queremos ir directamente a la localización que tenemos en pantalla (o si queremos guardarla en nuestros favoritos). También nos muestra el código que deberiamos utilizar si quisieramos poner el mapa en nuestra página web.

Ambos códigos deben saber la localización exacta (latitud y longitud) del punto que estamos visualizando ya que de no ser así no podrian volver a mostrarlo. Uno de los parámetros que se muestran es el parámetro llamado ll, es decir, latitud y longitud

http://maps.google.es/?ie=UTF8&ll=40.513799,-3.383789&spn=14.755672,31.464844&t=h&z=5

En el caso concreto del punto que estamos visualizando obtenemos que la latitud es 40.513799 y la longitud -3.383789 pero como ya comentaba al principio de este post, con un bookmarklet se puede automatizar este proceso. ¿Como obtener el código javascript que nos de esta información? para ello hay que documentarse un poco sobre como funciona GMaps, concretamente, su API

La API (application programming interface) no es ni más ni menos que un conjunto de funciones (en este caso javascript) que facilitan al usuario la tarea de "comunicarse" con la aplicación, en este caso, con el mapa.

En nuestro bookmarklet vamos a hacer uso de dos funciones de la API de Google Maps, gApplication.getMap y GEvent.addListener.

gApplication.getMap obtiene un apuntador al mapa que estamos visualizando mientras que GEvent.addListener permite definir un evento sobre el mapa. En este caso vamos a hacer que cada vez que hacemos click sobre el mapa nos muestra la latitud y longitud en el cuadro de búsqueda, de esta forma, conforme nos vamos moviendo por el mapa podremos ir viendo las distintas latitudes y longitudes donde nos vamos posicionando.

El bookmarklet seria algo así:

javascript: mapa = gApplication.getMap(); GEvent.addListener(mapa, "click", function(marcador, punto) { document.forms(0)("q").value=punto.toString(); }); alert("Al hacer click en el mapa se mostrarán las coordenadas en el cuadro de busqueda");

Lo primero que hace nuestro bookmarklet es definir una variable llamada mapa que hará referencia al mapa que tenemos en pantalla (se inicializa con gApplication.getMap) y después se le indica que cuando se haga click sobre el mapa ejecute una función. El evento "click" del mapa tiene dos parámetors, uno es el marcador donde se hace click (en caso de existir) y el otro el punto donde se ha hecho click, es decir, las coordenadas.

La función que se ejecutará cada vez que se haga click es document.forms(0)("q").value = punto.toString() lo que equivale a decir queremos que el valor de uno de los campos del formulario muestre el valor que tiene actualmente la variable punto y como ya hemos comentado, punto, son las coordenadas que nos interesan. "q" es el cuadro de búsqueda de Google Maps (donde generalmente escribimos que queremos buscar) así que una vez ejecutado nuestro bookmarlet podremos ver algo así


Pienso que esto es bastante más cómodo que tener que estar pulsando sobre el botón "enlazar" y buscando el parámetro ll además, si tenemos este código guardado en nuestros favoritos será muy facil añadir esta funcionalidad siempre que visitemos la página de Google Maps.

miércoles, 26 de mayo de 2010

Publicidad de Toyota en Bones

Desde hace algún tiempo noto que hay algunos dialogos de la serie Bones que no forman parte de la historia sino que más bien parecen spots publicitarios.

Concretamente en el capítulo de hoy, Los huesos en la línea azul (5ª temporada), emitido en LaSexta, Angela y Daisy mantienen una conversación un tanto peculiar dentro de un Toyota Sienna en la que Angela describe las maravillas del coche. Hay bastante más información sobre este curioso diálogo en este blog.

Supongo que esto se ira haciendo cada vez más frecuente en series de televisión ya que también he visto este tipo de publicidad encubierta de Toyota en "The Closer" así que habrá que acostumbrarse a que este tipo de anuncios se cuelen en nuestras series favoritas.

Bookmarklets

¿Que es un bookmarklet? es un pequeño fragmento de código javascript que se suele guardar como un enlace en la carpeta de favoritos para poder utilizarlo con facilidad en cualquier web por la que navegamos de forma que se le da nueva funcionalidad y se pueden automatizar ciertas tareas.

Guardar estos fragmentos de código en la carpeta de favoritos es solamente una forma de tenerlos medianamente organizados ya que no es estrictamente necesario, podemos ejecutarlos directamente desde la barra de direcciones del navegador.





Un bookmarklet clásico es el que se utiliza para eliminar la "protección" con la que algunas páginas intentan que el usuario no pueda acceder al menu contextual que aparece al pulsar el botón derecho del ratón, complicando así que el usuario pueda, por ejemplo, guardar las imagenes que hay en dicha página.

Activar el botón derecho


Pero mi favorito es el bookmarklet utilizado para mostrar los datos de los formularios de la página, incluidos los campos ocultos lo que nos puede descubrir algunos "secretos" de la página.

Mostrar información de los formularios


Y bueno, una vez conocida la información de los formularios nada nos impide modificarlos utilizando javascript desde la barra del navegador para, por ejemplo, modificar el valor de un campo oculto, desactivar el atributo de solo lectura de algunos controles, etc.

domingo, 23 de mayo de 2010

¿Donde esta Wally?

Much@s de vosotr@s recordareis el revuelo que se montó con Wally y compañia en la web de la Presidencia Europea de España 2010 por un fallo XSS.

En el blog Security By Default ya hicieron un seguimiento exhaustivo de esta incidencia y buscarón a este simpático personaje por distintas webs pero es curioso ver como una vez que se calman las aguas Wally vuelve a hacer de las suyas y sigue apareciendo una y otra vez.

En esta ocasión parece que Wally estaba interesado en conocer los canales TDT que se ven en su zona porque me lo he encontrado fisgoneando en Mundoplus.tv


Aunque desgraciadamente no es el único visitante que existe en la web, también nos encontramos con un problema en el acceso a los ficheros que se solicitan por GET!