XRAY: espiando las propiedades CSS

Un bookmarklet (bookmark + applet) es un pequeño programa JavaScript que podemos guardar en nuestro navegador como cualquier otro marcador ya que, en realidad, es una dirección URL.

Son, herramientas que agregamos y quitamos a voluntad, que funcionan simplemente haciendo click y que, en general, permiten modificar la apariencia de una página web, extraer datos, ejecutar búsquedas específicas o utilizar servicios de validación o traducción..

La instalación se realiza arrastrando y soltando el vínculo a la barra de marcadores, de igual forma que lo haríamos con cualquier otro enlace.

XRAY es un bookmarklet que, por ahora solo funciona en Firefox y en Safari y que permite ver las propiedades de cualquier elemento CSS de una página web.

Para utilizarlo, vamos a la página de XRAY y lo instalamos, arrastrando el vínculo a nuestros marcadores. Una vez que lo tenemos, podemos ir a cualquier página, esperamos que se cargue y hacemos click en el marcador recién agregado.

Se abrirá una ventana de inicio que podemos ubicar donde queramos y que nos indicará que hagamos click sobre cualquier elemento de la página para ver sus propiedades.

Como se ve, la información del elemento no es muy completa porque se limita a las propiedades que establecen su tamaño y posición pero, aún así, es una herramienta útil y muy sencilla de usar.

REFERENCIAS:

isopixel

Pese a tener una basta discografía, Procol Harum está popularmente asociado a una canción: A whiter shade of pale.

El tema fue publicado en mayo de 1967 y es reconocido casi de inmediato por la recurrente melodía de órgano Hammond interpretado por Matthew Fisher que, sumados a la voz de Gary Brooker y a la misteriosa letra de Keith Reid, lo convirtieron en un éxito de venta inmediato y lo transformaron en un clásico.



Hacer click en la imagen para comenzar.

We skipped the light fandango turned cartwheels 'cross the floor
I was feeling kinda seasick but the crowd called out for more.
The room was humming harder as the ceiling flew away
when we called out for another drink the waiter brought a tray.

And so it was that later as the miller told his tale
that her face, at first just ghostly, turned a whiter shade of pale.

She said, 'There is no reason and the truth is plain to see.'
but I wandered through my playing cards and would not let her be.
One of sixteen vestal virgins who were leaving for the coast
and although my eyes were open they might have just as well've been closed.

She said, 'I'm home on shore leave,' though in truth we were at sea
so I took her by the looking glass and forced her to agree.
Saying, 'You must be the mermaid who took Neptune for a ride.'
but she smiled at me so sadly that my anger straightway died.

If music be the food of love then laughter is its queen
and likewise if behind is in front then dirt in truth is clean.
My mouth by then like cardboard seemed to slip straight through my head
so we crash-dived straightway quickly and attacked the ocean bed.

REFERENCIAS:

Stage6

Promo 1967

Versión original de 1967

Descarga directa

Toda su vida, el señor Obdulio había ambicionado una bufanda verde y ahora, después de tantos años de sacrificada espera, estaba a punto de conseguirla. Con ese paso tranquilo y a la vez rápido que lo caracterizaba, entró en el negocio de la esquina de su casa.

— Buenos días, señor — lo saludó cortésmente el empleado — ¿en qué puedo servirlo?

— Mire — hizo un gesto en torno al cuello — yo quisiera una bufanda verde.

La cultura del spaghetti

continuar leyendo

Google ha introducido un nuevo valor para la etiqueta META que permite establecer una fecha para indicar a sus robots que cierta página expira a partir de ella.

Por ejemplo, para indicar que debe ser removida después de las 3pm EST del 25 de agosto del 2007:

<meta name="GOOGLEBOT" content="unavailable_after: 25-Aug-2007 15:00:00 EST">

La fecha debe estar en formato RFC 850.

Su uso, hará que la página no aparezca en los resultados de una búsqueda pero no la eliminará del índice interno de Google, para esto último, debe utilizarse la herramienta correspondiente (ver Webmaster Central Blog).

REFERENCIAS:

Google Blog

Así es: tengo una idea y estoy en venta, eso podría decir cualquiera e intentar volverse multimillonario e un día para el otro. Es que Google tiene una página donde podemos enviar información sobre negocios, patentes o incluso proponerles que compren nuestra empresa o sitio web.

Por supuesto, salvo casos excepcionales, sólo recibiremos como respuesta un e-mail enviado por algún robot que, muy cordialmente, nos agradecerá nuestro interés:

Pero, ¿quién sabe?

REFERENCIAS:

Googlified

Normalmente, cuando navegamos en una página, el puntero del ratón es una flecha y, cuando nos colocamos sobre ciertos elementos, cambia. Esa es la forma en que se nos indica "acá hay algo diferente".

Los navegadores utilizan esos cursores de manera predeterminada, así, un enlace mostrará una mano y una entrada en un formulario será una I que nos indica que podemos escribir un texto. Cada uno de ellos está asociado con algún elemento.

UN ENLACE

El CSS nos permite ignorar estos datos y establecer el tipo de cursor a utilizar o emplear cursores personales. La sintaxis es muy simple:

cursor: valor;

Por ejemplo:

a {cursor: pointer;}
img {cursor: pointer;}

style="cursor: pointer;"

Estos son los cursores predeterminados y sus valores:

default
pointer	text	crosshair
wait	move	help

Un caso especial es el tipo resize que no se usa directamente sino que requiere que se indique la dirección:

n-resize	e-resize	s-resize	w-resize
ne-resize	se-resize	sw-resize	nw-resize

Los cursores son parte de los navegadores así que, dependiendo de cuál utilicemos, habrá ciertas variaciones. En las últimas versiones, a partir de IE6 se han agregado más posibilidades. Algunas de ellas son utilizadas por todos, otras sólo son accesibles por uno u otro. Para ver el resultado, basta poner el puntero sobre la imagen:

progress	no-drop	all-scroll	not-allowed
row-resize	col-resize	vertical-text	copy / -moz-copy
alias / -moz-alias	nwse-resize	nesw-resize	cell / -moz-cell
-moz-zoom-out	-moz-zoom-in	-moz-grabbing	-moz-grab

Como si esto fuera poco, la propiedad nos permite utilizar cursores personales, para esto, basta indicar la dirección URL de la imagen.

Aquí comienzan los problemas, diferencias e incógnitas. Internet Explores sólo soporta los formatos CUR o ANI. Firefox soporta imágenes PNG, JPG, CUR y GIF pero no cursores ANI. Además, si el GIF es animado se mostrará estático.

Lo razonable es colocar siempre un cursor alternativo, en IE no es obligatorio pero en Firefox sí, si no lo hacemos, simplemente no funciona. La sintaxis es la siguiente:

cursor:url('URL_imagen'), auto;"

Lo normal es utilizar el valor auto como puntero alternativo pero, puede ser cualquier otro.

REFERENCIAS:

w3.org

mozilla.org

msdn