Como seleccionar los elementos iMacros

Una cosa que te va a ayudar a comprender mejor el código de iMacros es relacionarlo con lo que aprendimos en la clase anterior.

Te dejo el enlace, por si todavía no lo leíste:
Qué es el DOM y cuáles son los elementos más comunes


En la siguiente macro, yo hice click sobre una de las imágenes de la clase anterior:

Linea 1: declaración automática de iMacros.
Linea 2: se ubica en la página de la pestaña actual.
Linea 3: Viene a este blog (sería preferible haber ido directamente a la clase 3, pero de todas maneras si quieren hacer esto, vayan a la clase 3 y grabense haciendole click a una imagen, cualquiera menos la primera, después voy a decir por qué).
Linea 4: Selecciona la imagen.


Me voy a centrar en la línea 4, que es la más importante para lo que quiero enseñar. Dice así:

TAG POS=1 TYPE=IMG ATTR=BORDER:0&&SRC:http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png


TAG: significa "etiqueta".

POS=1: indica que la posición es 1, lo que quiere decir que es la primera etiqueta que cumple con todas las características indicadas.

TYPE=IMG: Es una imagen. Si fuera párrafo, diría TYPE=P, un link TYPE=A, un título principal TYPE=H1, y así.

ATTR=BORDER:0&&SRC:http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png:
Esto es una lista de atributos con los cuales se selecciona de forma específica el elemento (la imagen).

BORDER:0 => el borde es de cero píxeles (sin borde).
&& => esto sirve para agregar más condiciones de seleccion (significa 'Y').
SRC:http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png => esto indica la ubicación de la imagen (el enlace, por ejemplo).

Observen que es la cuarta imagen (GRAFICO4.png) pero arriba nos indica POS=1 en vez de POS=4. Esto es porque la seleccionó con el enlace de la imagen y es la única que tiene ese enlace.


Esta selección quiere decir lo siguiente: selecciona la primera imagen que tenga un borde de cero pixeles y esté ubicada en http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png. 

¿Podría seleccionarse de una forma mejor? Claro que sí. Generalmente, no vas a saber la ubicación de la imagen y el borde de cero pixeles tampoco te dice mucho, porque es normal que uno le deje borde cero (sería útil si el sitio les agrega un borde especial a las imágenes que te interesan, pero en este caso no). Como ninguno de los dos atributos definen nada, vamos a cambiar esa parte:

TAG POS=1 TYPE=IMG ATTR=*


Ahí está. Lo reemplacé por un * (asterisco), que es un comodín (significa que seleccionará el elemento con cualquier atributo que tenga, o sea, ya no importa que atributos tenga la imagen). Lo importante pasaría a ser la posición. Si vas a la clase 3, podrías cambiar el número de la posición para ir probando, pero aviso que casi siempre selecciona entre los primeros elementos el banner del sitio, el fondo, iconos y otros elementos tal vez no deseados.

Todo lo que harías con este código es hacerle click a la imagen indicada, por lo que casi siempre te va a llevar a ver a la imagen o a un link al que te dirige la imagen cuando le haces click.

Para que sea más cómodo, me voy a adelantar con algo que después voy a explicar mejor. Te voy a enseñar a extraer el enlace de una imagen.

TAG POS=1 TYPE=IMG ATTR=* EXTRACT=HREF


Este código te va a seleccionar la primera imagen pero no le va a hacer click, va a aparecer una ventana con el enlace (que puede ser la ubicación de la imagen o un link al que te dirige cuando le haces click). Podrías ir cambiando el número de posición, para ver lo que pasa.

Sin embargo, aunque dijimos antes que la ubicación de la imagen es única y que no sirve para seleccionar a las demás, podría ser que tenga algo en común con las otras imagenes internas del blog. Vamos a ver cómo aprovechar esa información.


En la posición 10, me seleccionó esto:

http://s10.postimg.org/tgzfv4mjt/Pantallazo_3.png

Y recordemos el enlace que teníamos antes:

http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png


Lo que podemos sacar en conclusión, tal vez apresurada, es que las imagenes son png. Podríamos seleccionarlas así:

TAG POS=1 TYPE=IMG ATTR=*.png EXTRACT=HREF


Pero no creo que convenga, porque el formato PNG se usa mucho para iconos y banners, y es casi seguro que va a seleccionar otra cosa antes que las imágenes de los tutoriales de iMacros, y para no tener que investigar cuantas imágenes PNG hay afuera de los tutoriales de iMacros, me conviene encontrar una forma de referirme sólo a las que están dentro de ellos.

Puedo saber cuantas imágenes PNG pone blogger antes que las mías y elegirla por posición pero en un sitio que no sea mío podrían llegar a cambiarlas según el antojo del dueño. Y como sé que blogger no usa el mismo servidor de imágenes que yo, ése dato es el que voy a usar.

Primero, hay que comparar los enlaces de las dos imágenes y ver qué tienen en común. Podrías hacerlo copiando la url de dos imágenes a mano. Luego, se mira en qué se parecen y en qué se diferencian, y se define un patrón de selección que se aplique a ambas.


http://s10.postimg.org/tgzfv4mjt/Pantallazo_3.png

http://s2.postimg.org/6k0zv8ze1/GRAFICO4.png


Ese es un patrón que parece bastante acertado. Sin embargo, ¿no podría pasar que yo suba al blog una imagen en otro formato en vez de PNG? Es habitual que uno las suba en JPG o GIF, así que no es muy útil la última parte y se la quitaría.

Volviendo a la línea 4 de nuestro código, la dejamos así:

TAG POS=1 TYPE=IMG ATTR=SRC:http://*.postimg.org/* EXTRACT=HREF


Fijate que le puse dos asteriscos, para reemplazar las partes que no creo que vayan a concordar. Lo bueno es que los iconos y otras cosas de blogger estoy seguro de que no se van a seleccionar porque el servidor donde están alojados es distinto.

Ahora sí: me seleccionó la primera imagen dentro de los tutoriales de iMacros. O sea, ¡LO LOGRAMOS!

Esto es así mientras hago este tutorial. Cuando publique algo nuevo, la primera imagen que cumpla las condiciones va a ser otra. Y si empezara a subir las imágenes a otro servidor, no va a seleccionarse la primera o tal vez no se seleccione ninguna.