Cómo deshabilitar la ventana emergente de prueba al extraer en iMacros

Si recuerdas, en la clase anterior, cuando extraiamos el link de una imagen, nos salía esta ventana:

La idea de esta ventana emergente (pop-up) es servirnos para hacer pruebas con la macro. Gracias a ella, podemos ver si está extrayendo lo correcto, sin tener que agregar código adicional.

Pero resulta que, una vez que ya estamos seguros de que la macro extrae lo correcto, no sólo es innecesaria, sino que además nos perjudica (porque no queremos tener que estar cerrando ventanitas cada vez que extrae algo, imaginate si extraemos decenas de cosas en una misma macro). Así que lo mejor es deshabilitarla.

El código para que esta ventana emergente de prueba no nos aparezca más, es el siguiente:


SET !EXTRACT_TEST_POPUP NO


Deberías añadirlo por lo menos antes de que empieces a extraer los datos. Yo lo añado arriba. Te lo voy a mostrar con unas capturas.

Ésta es la macro que grabamos en la clase anterior:

Y ésta es la misma macro cuando agrego el comando para que no aparezca la ventana emergente de prueba:

Lo que hice fue mover lo que había en la linea 3 a la linea 4, con un salto de línea, y en la línea 3, que quedó vacía, pegué el código.

Deberías tenerlo a mano, ya que es habitual usar ese código. Puedes pegarlo en la macro, así lo tienes a mano y, cuando lo necesites, buscas en esa macro. Acuerdate de guardar la macro con un nombre que no sea #Current, para que no se te reemplace su contenido por las cosas que grabemos después.

Y eso es todo. Estén atentos a las siguientes clases, porque vamos a ver cómo se extraen muchas cosas juntas y cómo darles una salida más elegante que la ventana emergente de prueba.

Como extraer una imagen con iMacros

Extraer una imagen con iMacros es muy simple.

En esta ocasión, vamos a extraer la url de un fondo de pantalla del siguiente sitio:

http://tuswallpapersgratis.com/

La imagen que quiero extraer para la prueba es la primera, la de la cazadora. Como es normal que cambien las imágenes que están a la vista, si cuando lees este tutorial no ves esa imagen, prueba con la primera. Yo la elijo por un gusto particular mío, pero pueden elegir la que quieran ustedes (pero es más fácil elegir entre las primeras).

Bueno, ubicados en la pagina, le damos a Grabar (que está en la pestaña Grabar). Este paso me ahorraré de mencionarlo en las próximas clases.



Básicamente, le haremos click sobre la imagen tres veces (se recargará una página nueva cada vez).

Cuando abrí iMacros, los fondos se ubicaron uno abajo del otro y se agrandó el tamaño (seguramente por el poco espacio que quedaba en pantalla y que no se iban a ver bien si seguían estando de a tres). Ignoren esto. Se vean de a tres o de a uno, es lo mismo: hay que hacerle click al fondo que queremos, esperar a que se cargue la nueva pagina, hacerle click otra vez al mismo fondo, esperar a que cargue de nuevo (esta vez la imagen misma en tamaño completo) y ahora le hacemos click a la imagen por ultima vez y entonces detenemos iMacros.

Después de hacerle click a la imagen en pantalla completa, hacemos el click en el botón Detener de iMacros.

El código resultante va a ser más o menos así:

Esto es lo más importante, así que presten atención.

Al final de la última línea (de la línea 6), con mucho cuidado para no borrar nada, agreguen lo siguiente en la misma linea y sin comillas:


" EXTRACT=HREF"


 Sé que en la imagen de arriba no se veía la parte final, pero ahora muestro como queda. Fijense que agrego un espacio para separar del código anterior.

Hay que guardar la macro haciendo click en el botón Save & Close de la ventana (ubicado en la parte de abajo).

Lo que tendría que pasar ahora, cuando ejecutes la macro, es que tiene que ir a la página de los fondos de pantalla, "ir haciendo click" sobre el fondo elegido varias veces y finalmente saltará una ventana con el enlace de la imagen.

Y así sucedió. Como ves, el link de la imagen fue extraído correctamente.

Web Scraping con iMacros

Puede ser que te estés preguntando qué es el Web Scraping y eso es lo que vamos a aclarar en este artículo.


Muchas veces y por distintas razones, nos vemos en la necesidad de extraer datos de un sitio web. Puede ser que queramos elaborar un boletín informativo usando los datos que nos ofrece el sitio. Puede ser que necesitemos esos datos para hacer cálculos y análisis complejos. También puede ser que queramos copiar cierto contenido a nuestro propio sitio o que nos interesen determinadas imágenes para decorar nuestros artículos.

Sea cual sea el caso, esa extracción de datos es lo que llamamos Web Scraping. Un dato puede ser una tabla completa o parte de ella, puede ser una imagen, un grupo de parrafos, un titulo, un archivo PDF online, la paǵina web completa... En fin, casi todo lo que hay en un sitio es susceptible de llamarse "dato".

Para extraer estos datos con iMacros, voy a enseñar ciertas técnicas, algunas sencillas y otras más complejas. Pasa por el índice para conocerlas.

Cómo extraer una imagen con iMacros (Scraping paso a paso)

Para los que no estén familiarizados con la palabra, se le llama scraping a la extracción automática de datos de un sitio web (como podemos hacerlo con iMacros, por ejemplo).

Esta vez, voy a extraer una imagen de Makise Kurisu, personaje de la serie animada Stein Gate. Lo voy a hacer en la galería de imágenes llamada Konachan.

Lo bueno es que te voy a explicar paso a paso.

Todo lo que se vea en esta clase, lo repasaremos uno por uno en las clases que siguen, así que si no entienden algo, no se preocupen porque veremos cada cosa por separado después.


1) Visita el link siguiente (aclaro que el sitio contiene también imágenes no aptas para menores, por lo tanto, considere esto antes de entrar).

http://konachan.net/post?tags=makise_kurisu


Así se ve la página:

La extracción voy a hacerla con las herramientas que da iMacros, sin usar otros lenguajes, aunque aclaro que sería muy cómodo hacerlo con JavaScript (que lo voy a enseñar después, de todas formas). Esto es para que vea lo sencillo que puede ser incluso para el que no tiene conocimiento de un lenguaje de programación.

2) Hacer click sobre la primera imagen en miniatura. Esto te llevará a otra página con la imagen en tamaño completo.

3) Esperar a que cargue la página lo suficiente como para hacerle click a la imagen en tamaño completo.

4) Hacer click en el botón del navegador Retroceder página.

5) Repetir los pasos 2, 3 y 4 con dos imágenes más (la segunda y la tercera).

6) El resultado va a ser un código como éste:

Este es el código completo (no te asustes, sigue leyendo más abajo):

VERSION BUILD=XXXXXXX RECORDER=FX
TAB T=1
URL GOTO=http://konachan.net/post?tags=makise_kurisu
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:84&&TITLE:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:844&&SRC:http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg&&LARGE_WIDTH:1920&&LARGE_HEIGHT:1080&&ID:image&&CLASS:image&&ALT:brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white
BACK
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:100&&TITLE:Rating:<SP>Safe<SP>Score:<SP>98<SP>Tags:<SP>brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train<SP>User:<SP>humanpinka&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>98<SP>Tags:<SP>brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train<SP>User:<SP>humanpinka&&SRC:http://konachan.net/data/preview/61/9a/619ab14b8b74cb9df43f6a7603e643b4.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:1000&&SRC:http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg&&LARGE_WIDTH:2000&&LARGE_HEIGHT:1333&&ID:image&&CLASS:image&&ALT:brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train
BACK
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:84&&TITLE:Rating:<SP>Safe<SP>Score:<SP>95<SP>Tags:<SP>black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate<SP>User:<SP>Rackie&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>95<SP>Tags:<SP>black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate<SP>User:<SP>Rackie&&SRC:http://konachan.net/data/preview/a6/43/a643ff49a2f31a1de43877090e178259.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:844&&SRC:http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg&&LARGE_WIDTH:1920&&LARGE_HEIGHT:1080&&ID:image&&CLASS:image&&ALT:black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate
BACK


7) Vamos a concentrarnos en las lineas que hacen click sobre las miniaturas (4, 7 y 10). Voy a separar en pedacitos la primera, para que la veas con más claridad. Recuerda que los <SP> son espacios y los && son para agregar más condiciones de selección, las cuales se tienen que cumplir todas.

TAG

POS=1

TYPE=IMG


ATTR=

WIDTH:150

&&HEIGHT:84

&&TITLE:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&CLASS:preview

&&ALT:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc

&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg


Como verás, la imagen en miniatura contiene entre sus atributos TITLE (título, en el cual vemos que se cita todas las etiquetas/tags asociadas a la imagen) y ALT (el mensaje de error en caso de que la imagen no se visualice, que también contiene dichas etiquetas). Pero lo más destacable son WIDTH (ancho de la imagen) y HEIGHT (altura de la imagen). Lamentablemente, HEIGHT varía, siendo 84 en dos casos y 100 en uno. Queda claro que HEIGHT no puede usarse para referirnos a todas las miniaturas pero WIDTH sí.


8) Por otra parte, vemos un atributo llamado SRC, que nos indica una ruta de la imagen en miniatura. ¿Será que esa ruta se parece a la de las otras imágenes en miniatura? Comparemos.

&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg

&&SRC:http://konachan.net/data/preview/61/9a/619ab14b8b74cb9df43f6a7603e643b4.jpg

&&SRC:http://konachan.net/data/preview/a6/43/a643ff49a2f31a1de43877090e178259.jpg


Veo que sí, noto que hay un patrón en la ruta de las imágenes, además de que todas son JPG. Como el sitio es el que crea las miniaturas, puedo pensar que todas las miniaturas están en ese formato. ¿O se lo quito, mejor? Lo voy a dejar sin la parte final, para más facilidad, usando el comodín: * (asterisco), que significa cualquier conjunto de caracteres.

&&SRC:http://konachan.net/data/preview/*


9) Entonces, me quedo con el atributo WIDTH y con el atributo SRC alterado (como vimos en el punto anterior). Y esto lo uso para todas las miniaturas. La idea es que este código pueda servir para usarse en otras partes de la galeria.

Me quedan así las lineas 4, 7 y 10:

TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*


10) Por otro lado, las líneas que siguen, las de las imagenes ampliadas, noto que presentan más dificultades. En la linea 5, se puede leer lo siguiente:

TAG
POS=1
TYPE=IMG
ATTR=
WIDTH:1500
&&HEIGHT:844
&&SRC:http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg
&&LARGE_WIDTH:1920
&&LARGE_HEIGHT:1080
&&ID:image
&&CLASS:image
&&ALT:brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white


Vamos a ver las otras imágenes ampliadas, línea 8:

TAG
POS=1 
TYPE=IMG 
ATTR=
WIDTH:1500
&&HEIGHT:1000
&&SRC:http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg
&&LARGE_WIDTH:2000
&&LARGE_HEIGHT:1333
&&ID:image
&&CLASS:image
&&ALT:brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train


Línea 11:

TAG
POS=1
TYPE=IMG
ATTR=
WIDTH:1500
&&HEIGHT:844
&&SRC:http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg
&&LARGE_WIDTH:1920
&&LARGE_HEIGHT:1080
&&ID:image
&&CLASS:image
&&ALT:black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate


En principio, podríamos seleccionar por clase y por identificador (CLASS, ID), que son iguales. El tamaño de las imágenes puede variar, así que no lo tenemos en cuenta. Y el atributo SRC nuevamente se parece, aunque en este caso sé que es así porque la imagen es demasiado grande y nos da una versión grande pero más pequeña que la original. Ahora SRC coincide en las tres, pero eso puede no pasar si alguna imagen no llega a ser tan grande para hacerle un sample (así llaman a la versión grande pero más pequeña que la original).

Me la voy a jugar con la clase y la id, y veamos qué pasa:

TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image


Puede fallar o ser correcto, pero vamos a probarlo de esa forma.

11) Le agrego el comando para extraer el link de la imagen:

TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF

12) Y copiamos y pegamos esa linea para todas las imagenes ampliadas: 5, 8 y 11. Quiero decir que las reemplacemos por el código final, que está arriba.

13) Lo que va a pasar con esto es que me va a salir una ventana, con el link de la imagen. Solamente hay que copiar cada enlace a un archivo de texto y luego le damos a aceptar. Cuando termine la macro, vamos a comprobar adónde nos llevan esos enlaces.

14) Me olvidaba: a las imágenes en miniatura, no se olviden de cambiarles el número de posición (POS), de manera que queden la segunda con el número 2 y la tercera con el número 3. Para que no se pierdan, ahí va otra copia de cómo va quedando la macro:

VERSION BUILD=XXXXXXX RECORDER=FX
TAB T=1
URL GOTO=http://konachan.net/post?tags=makise_kurisu
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK
TAG POS=2 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK
TAG POS=3 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK


15) Lo vamos a ejecutar en una pestaña aparte. Ya aviso que falta algo todavía, pero comprobemos antes que nada que las imágenes que se extraen son las correctas, de la forma que se explica en el punto 13.

16) Comprobé que las imagenes de los enlaces coinciden con las tres primeras miniaturas:

http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg

http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg

http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg


17) Bien, llegó el momento de ponernos serios. Te darás cuenta de que no podemos estar cerrando ventanitas si queremos que sea automático. Es por eso que vamos a indicarle al programa que no nos muestre el dato extraido con la ventana. Vamos a encontrar otra forma de conseguirlo. Por ahora, lo que interesa es guardar cada dato en una variable distinta.

18) Antes de continuar, haz una copia de la macro y trabajaremos sobre esa copia. Esto es necesario hacerlo sí o sí. Guardala con el nombre que te guste, por ejemplo, extraer_imagen.iim.

19) Agregamos esto:

SET !EXTRACT_TEST_POPUP NO


Esa línea hace que la ventana no se abra, pero tiene que estar antes de las extracciones. Yo la ubiqué en la línea tres, pasando la línea tres hacia abajo, pulsando la tecla ENTER. A continuación, guardamos.

Si no entendiste cómo, lo verás en la siguiente captura de pantalla.

20) Entonces, ¿cómo se declara una variable? Hay que explicar que iMacros ya trae algunas variables especiales, de !VAR0 a !VAR9.

Con el comando SET, se asigna un valor a la variable:

SET !VAR0 "algo"


Con el comando ADD, se añade un valor al que ya tenía antes:

ADD !VAR0 " y algo más"


El valor final es "algo y algo más", porque usamos ADD. Pero si hubiésemos usado SET en el segundo caso, el valor final sería " y algo más". O sea que SET reemplaza todo lo que contenga por el valor indicado, mientras que ADD lo añade después. Para asignar un valor inicial, usamos SET.

Además de esas variables, nosotros podemos declarar las propias:

SET MIVARIABLE "algo"


Note que el nombre de la variable no lleva el signo de exclamación al principio. Eso es porque no es una variable especial.

21) Ahora, la pregunta sería cómo obtener el dato extraído. La variable en la cual se guardan los datos extraidos se llama !EXTRACT (es otra variable especial).

Lo siguiente está mal:

SET MIVARIABLE !EXTRACT


La forma correcta es ésta:

SET MIVARIABLE {{!EXTRACT}}


Ése es el sistema que usa iMacros para referirse al contenido de una variable, encierra el nombre de la variable entre llaves dobles. Y así pasaría a tener el contenido extraído.

22) Vamos a guardar cada imagen en una variable diferente, llamadas IMG1, IMG2, IMG3. Esto se ubicaría después de las líneas que extraen la dirección de la imagen grande (antes de BACK).

23) ¿Recuerdas que dije que guardemos todo en una macro aparte? Ahora, tenemos que grabar otra cosa. Para ver el resultado de nuestros esfuerzos, vamos a lograr que deje el resultado final en este sitio:

http://freetexthost.com/


24) Abrimos ese sitio en una pestaña nueva, le damos a Grabar (una nueva macro, que se grabará en #Current, como siempre). Y escribimos sobre el área de texto una letra al azar varias veces (eso lo borraremos, así que lo mejor es que escribas algo que puedas distinguir después en el código).

Si observas la imagen, verás que lo que escribí está al final, donde dice CONTENT=fffff.

25) Vamos a copiar las líneas 3 y 4 de la última macro grabada, #Current.iim, y las vamos a pegar al final de la macro que teníamos antes, llamada extraer_imagen.iim, dejando unas líneas.

26) Ahora, justo antes de esas líneas, vamos poner lo siguiente:

SET IMAGENES "{{IMG1}}<BR>{{IMG2}}<BR>{{IMG3}}"


Note las comillas y los <BR> (saltos de linea). Lo que estamos haciendo con esto es guardar el contenido de las tres variables, IMG1, IMG2 y IMG3 (o sea, los enlaces de las imagenes), en otra variable nueva, llamada IMAGENES, separando esos enlaces con saltos de línea.

Y esta variable la vamos a mostrar al final, como contenido del cuadro de texto (remplazando la letra repetida, en mi caso fffff).

27) Las líneas finales de nuestra macro quedarían así:

SET IMAGENES "{{IMG1}}<BR>{{IMG2}}<BR>{{IMG3}}"
URL GOTO=http://freetexthost.com/
TAG POS=1 TYPE=TEXTAREA FORM=ID:form1 ATTR=ROWS:7&&COLS:50&&ID:text&&NAME:text CONTENT={{IMAGENES}}

Vuelvo a repetir que para referirse al contenido de las variables debe encerrarse el nombre de la variable entre llaves dobles.

28) Aviso que falta una cosa todavía, pero quiero que lo vean, por eso lo dejé así. Ejecuten la macro en una pestaña aparte para que vean lo que pasa. Va a ocurrir un error.

29) ¿Cómo puede ser? ¡Tres veces la misma imagen!

No te preocupes, Ahora te muestro cómo solucionarlo y te lo explico.

Cada vez que extraemos algo, el dato se almacena en la variable !EXTRACT. Cuando iMacros encuentra que la variable !EXTRACT está llena, no guarda el dato (aunque sí lo podemos ver en la ventana, no lo almacena). Esto nos lleva a tener que vaciar !EXTRACT después de cada extracción o antes de cada una, si queremos usarla nuevamente.

Justo después de guardar el contenido de la variable !EXTRACT en cada variable (IMG1, IMG2, IMG3), se debe "vaciar" la variable !EXTRACT con las siguientes líneas.

SET !EXTRACT NULL

30) Y ya está. ¡Guardemos los cambios y veamos lo que sale!

31) Bien, funciona perfectamente. Si quieren que quede perfecto, pueden modificar la linea 21, agregando dos saltos de línea <BR><BR> en vez de uno <BR>. Y con eso, ya terminamos.


Si fui demasiado rápido, no se preocupen porque voy a explicar cada cosa por separado en las siguientes clases. Pueden volver a leer esta clase, después de estudiar aquellas.

Cómo hacer comentarios en iMacros

En los lenguajes de programación, es común hacer comentarios y te voy a mostrar cómo funcionan en iMacros.

Los comentarios sirven para hacer aclaraciones (entre otras cosas) y se pasan por alto al ejecutar una macro o un script. Es decir, si declaraste que algo es un comentario, por más que sea código, no lo va a leer. Va a seguir con las instrucciones siguientes, que no fueron declaradas como comentarios.

La manera de hacer un comentario en las macros (archivos iim) es con una comilla simple siempre al principio de la línea. Si no la escribes al principio, puede darte un error.

En mi caso, la comilla simple está ubicada después del 0, en la parte alfanumérica del teclado (pero cambian las distribuciones de teclado según el país, así que puede ser que esté en otra parte en tu caso).

Si no tienes claro cuál es la comilla simple, te dejo una: '

Los comentarios se usan para:

—explicar alguna parte confusa del código, en caso de tengas que revisarla en un futuro;
—ordenar mejor el código, agregando subtitulos;
—deshabilitar un fragmento del código, pero sin eliminarlo, por si lo vuelves a necesitar.


Tal vez me haya quedado afuera alguna posibilidad, pero lo importante es que quede claro cómo funciona y cómo se hace.

En la imagen, el código para visitar la página aunque está presente, es un comentario, así que no se lee como parte del código, iMacros "pasa por esa parte" sin ejecutarla. Así que no va a visitar la página, llega hasta la línea 2  y después continúa ejecutándose desde la linea 4, en vez de ejecutar la línea 3.

Los comentarios son resaltados por iMacros en color verde, para que puedas reconocerlos a simple vista.

Opciones de grabación

Al menú Opciones de grabación (en inglés, Record Options) se accede a través de la pestaña Grabar, como ven en la imagen.

Para que tengan una idea, voy a dar una explicación sencilla de estas opciones.

La elección por defecto es Select the best record automatically, lo que voy a llamar Modo Automático. Cuando estás grabando con iMacros y le haces click a un objeto, elige automáticamente la que cree que es la mejor opción de selección.

Ya vimos un poco de esto, pero me permito decirlo de nuevo porque es importante que se entienda. Cada elemento tiene distintos atributos (id, class, href, name, border, sólo por dar unos ejemplos). Si los eligiera todos, lo que pasaría en la mayoría de los casos es que sería tan específico, tan particular, que sólo se seleccionaría ese objeto. Supongamos que quisieras obtener el link de la primera imagen de cada página de una galería (la primera imagen de la primera página, la primera imagen de la segunda página, y así), el link de la imagen es único, así que no te sirve seleccionar de esa manera (a menos que le hagas modificaciones para tener un patrón común), pero ¿qué pasa si las imagenes tienen una clase específica, por ejemplo, class='gallery'? Podrías indicar que lo que buscas es la primera imagen con esa clase y te saldría bien. En cada página, la primera imagen de esa clase sería seleccionada.

El Modo Experimental, el segundo de la lista, se basa en los eventos, como los movimientos y clicks del mouse o pulsar alguna tecla. Está recomendado para: arrastrar y soltar objetos (Drag and Drop), deslizador (Slider), control de fechas complicado, cajas AJAX de pulsar y soltar.


El Modo Convencional es el que selecciona a los objetos por su etiqueta (ejemplos: IMG, DIV, A, P) y sus atributos (ejemplos: CLASS, ID, BORDER). Verás que hay una opción de seleccionar con el atributo tag completo(Expert: use complete HTML tag). A veces es más cómodo que nos dé la lista completa de atributos y seleccionar nosotros mismos los que importan, borrando el resto. Este es el modo que más usarás, probablemente.

El Modo Posición X/Y, el último, sirve para seleccionar elementos según sus coordenadas. Nos aclara que se usa cuando el nombre y el enlace del elemento cambia entre dos reproducciones de nuestra macro.


Por último, vendría bien aclarar que se puede usar dos modos de grabación en una misma macro. ¿Cómo? Grabas la macro con el modo que más importancia tiene para lo que quieres grabar (por ejemplo, el modo convencional). Una vez que completes la grabación, guardas la macro con otro nombre y la parte que sabes que no funciona bien, la vuelves a grabar pero esta vez con otro modo de grabación (por ejemplo, el modo experimental). Una vez que hayas terminado, copias a la macro grabada anteriormente las partes que te interesa de lo que grabaste recién, quitando la parte que no funcionaba.

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.

Qué es el DOM y cuáles son los elementos más comunes

Me parece bueno tomarme el tiempo de explicar algunas cosas básicas para las personas que no tienen ningún conocimiento de HTML o CSS. La intención es ayudarles a que puedan sacar provecho del resto de los tutoriales sobre imacros, porque es importante que entiendan cómo se seleccionan las cosas y qué significan las etiquetas, aunque sea las más conocidas.

Los documentos HTML (paginas web) tienen una estructura de elementos, como si fueran unas cajas adentro de otras y seguidas de otras.

Podemos identificar a cada elemento según su tipo. Por ejemplo, en el gráfico que está arriba, podemos hablar de la primera minicaja que hay dentro de la segunda subcaja. Esta forma de seleccionar es posible.

Además de eso, normalmente se usa una id para identificar a un objeto al que nos vamos a referir a menudo o que queremos seleccionar con facilidad. La id es algo que agrega el diseñador de la pagina. Y nosotros podemos usarla para referirnos al mismo objeto o a los que están dentro de ese objeto, así no tenemos que indicar la ruta completa desde el documento HTML

Esta especie de "mapa" de los elementos y la estructura del sitio, como el que hice en el gráfico, se llama DOM. Obviamente, los elementos no se llaman subcajas y minicajas. Más adelante vamos a explicar algunos de los elementos.

En la imagen, podemos ver que la minicaja tiene una id (un identificador único). Si queremos referirnos a ella, solamente tenemos que referirnos a la id (en este caso, es tarja). Pero también podemos hablar de la caja que está dentro de tarja. Aunque hubiera muchas otras cajas, de esa forma estaríamos seguros de que estamos hablando de esa caja, porque sólo hay un elemento con id tarja y no puede haber dos con el mismo id.

¿Y qué pasa si queremos seleccionar varios elementos a la vez? Supongamos que tengamos cinco cajas y tres de ellas quisieramos tratarlas de una manera especial. En ese caso, los diseñadores le aplican una clase (class) y ahi sí que pueden referirse a las tres al mismo tiempo a través de la clase. Y, tal como pasa con la id, con la clase podemos referirnos a los objetos que tienen dentro. De esta forma, no hace falta decir la ruta completa para seleccionar algo. Podemos decir "tal cosa que está adentro de los objetos con esta clase".

Hay formas de seleccionar más avanzadas todavía, como el último elemento, el primero, el tercero o el que tiene cierto atributo. Vamos a hablar de eso más adelante. Ahora, lo que voy a hacer es explicar lo básico sobre las etiquetas HTML.

Los elementos de la pagina web se representan con etiquetas que generalmente van en pareja, una que abre y otra que cierra. en la que abre pueden ir ciertos atributos, a veces, esenciales y en otros casos, optativos (ya vimos dos de esos atributos: id y class). En la etiqueta que cierra no va nada, y se las reconoce porque llevan una barra antes del nombre de la etiqueta.

En el tercer gráfico, se explica de forma sencilla cómo se escriben las etiquetas. Como ves, pueden ir unas adentro de otras.

También existen etiquetas que van solas, no en pareja. En ese caso, se escriben como la primera etiqueta o se les agrega antes de terminar un espacio y una barra, justo antes del signo mayor que.

Te dejo una lista pequeña de los más utilizados y si llegas a tener dudas sobre algún elemento, te dejo un link con la explicación de todas las etiquetas. No necesitas aprenderlas todas ahora, pero sí tener una idea de las más usadas.

Te recomiendo añadir está página a marcadores (CTRL+D) o guardar el enlace dentro de un archivo de texto, para que puedas consultarlo más adelante. No es necesario que te acuerdes todo, pero te recomiendo leerlo, para darte una idea. Si surge alguna duda, puedes consultar en sitios que hablen sobre etiquetas HTML (abajo te dejo un enlace).


ELEMENTOS GENERALES:
div: es divisor que da estructura de bloque (sirve para dar forma al sitio).
span: es como el div pero la división no es visible, es decir, puede estar dentro de un párrafo y el texto se verá seguido, en vez de hacer saltos de linea cuando empieza y termina el span (sirve, por ejemplo, para dar estilo a una porción de texto).
p: es un párrafo.
h1: es un titulo, el h1 es el mas importante de todos, y si hay titulos menos importantes dentro del documento se pueden indicar con h2, h3, asi hasta h6.
strong: es un texto remarcado (en negrita, pero aclaro que se puede poner en negrita de otras formas, sin usar esta etiqueta).
a: es un enlace o un ancla (el ancla es como un enlace dentro del documento, muy utilizado en indices que te dirigen hasta la seccion indicada cuando le haces click); requiere el atributo href (la referencia que contiene el dirección web o la zona anclada).
img: una imagen, requiere la fuente de la misma a través del atributo src (source).
br: un salto de linea
ol: lista ordenada, puede ser numérica (1,2,3) o alfabética (a,b,c) y también en números romanos (i,ii,iii).
ul: lista desordenada, lleva un símbolo pero ningún tipo de orden.
li: cada elemento de una lista va entre un par de estas etiquetas.

ELEMENTOS DE FORMULARIO:
form: un formulario.
input type="text": una caja de texto.
textarea: un area de texto (es como la caja pero de varias lineas).
input type="button": un botón.
input type="submit": es el botón para enviar los datos del formulario una vez que lo llenamos.
button: un botón.
select: una lista desplegable para seleccionar algo.
input type="radio": es una opción, entre las cuales hay que elegir una u otra (se representa como un circulo con un punto negro adentro o en blanco), se agrupan gracias al atributo name (nombre), si elegimos una, la otra se desmarca.
input type="checkbox": es una opción para chequear, pero en este caso se pueden elegir muchas a la vez; están representadas con un cuadrado en blanco o con una marquita de check.

ELEMENTOS ESTRUCTURALES DE LA WEB:
title: es el titulo que se ve en la pestaña del navegador.
header: el encabezado donde generalmente va un banner representativo del sitio, un logo o aunque sea el nombre de la web.
nav: la parte donde está la lista de páginas, conocida "barra de navegación".
aside: la columna lateral.
section: la seccion principal.
article: un artículo dentro de section.
footer: el pie de pagina, donde van los derechos de autor, links de contacto y cosas así.

ELEMENTOS DE TABLAS:
table: una tabla.
tr: una fila de la tabla.
td: una celda de la tabla.


Estos son los elementos con los que vamos a tratar más seguido, pero si tienen dudas sobre una etiqueta que no haya nombrado, dejo una lista detallada para el que necesite consultarla:

http://virtualnauta.com/html-etiquetas


Sería bueno que conozcan HTML, no voy a profundizar en esto porque prefiero centrarme en imacros y explicar bien cómo se usa. Lo de HTML lo pueden aprender en otro lado, pero creo que esto era lo que más se necesitaba y ya con algo así, se pueden ir guiando.

Nuestra primera macro

Bueno, ahora vamos a hacer una macro de prueba, para que veas como funciona. Esto no es útil de por sí, pero termina de aclarar las dudas sobre el funcionamiento y es una buena continuación de la clase 1.

Supongamos que yo quiero buscar algo en Ixquick. Por ejemplo "plantillas para blogger". Pero lo voy a grabar con iMacros.

Vamos a la página y, antes que nada, elegimos Grabar. Se te abrirá de nuevo la ventana que te pregunta si quieres cerrar todas las otras pestañas. Puedes desactivarla si te molesta, desmarcando la casilla que dice "Show this dialog next time".

Y escribes en la casilla lo que habíamos dicho: "plantillas para blogger". Cuando termines, no te olvides de hacer click en la opción Ir, para que haga la búsqueda (yo no lo hice en la imagen por estética, pero deberías hacerlo si quieres que salgan bien las cosas).

Y luego, pulsa el botón Detener de iMacros.

Una vez que lo hayas detenido, puedes echarle un vistazo al código de la macro #Current.iim, en la que se graban las cosas, como para que te des una idea.

Esto es lo que tendrías que entender: la línea 1 es una declaración del iMacros, la 2 le indica que se van a hacer las cosas en la pestaña en la que empezó a grabar, la 3 le dice que se vaya a la página del buscador Ixquick, la 4 inserta el texto a buscar y la 5 pulsa el botón para realizar la búsqueda.

Y ahora vamos a ejecutarlo, a ver qué tal quedó. Ubicate en una pestaña nueva, antes de hacerlo. Y elige en la pestaña Ejecutar, el botón Ejecutar.

¡Y ahora sólo observa cómo se hace solo todo lo que hicimos antes!

Bien, evidentemente esto que hicimos no tiene utilidad alguna. Es una demostración de cómo funciona.

Si lo deseas, modifica una parte del código. Al final de la línea 4 del código, vas a ver que dice "plantillas<SP>para<SP>blogger", podrías cambiar esa parte y escribir lo que quieras, y volverlo a ejecutar. Fijate que los espacios se representan con <SP> y hay que tener cuidado de no modificar nada más que las palabras que ingresamos en el cuadro de texto de la búsqueda. Esto lo que hará es buscar otra cosa, la que le indiques. Por ejemplo, si escribo: "imagenes<SP>chistosas", buscará imágenes chistosas.

Es importante que las comillas no las agregues. Aviso que las comillas mal aplicadas pueden causar que el script no funcione bien, pero sirven en este texto para darte a entender que todo lo que está dentro de ellas es lo que irá escrito, separándolo de lo que están fuera. No te preocupes que yo te aviso cuando van y cuando no van, al menos las primeras veces.

Primeros pasos

Lo que debes saber, primero que nada, es como abrir la extensión. Te lo mostraré con Firefox. En otros navegadores puede variar un poco.

 A la derecha de las barras de direcciones y de búsqueda, donde se ven los iconos de las extensiones, puedes ver ese icono, que representa a Imacros.

Cuando hagas click en ese botón, te va a aparecer a la izquierda de tu ventana este panel. Fijate que tiene una X arriba a la derecha, para cerrarlo en el momento que desees.

Si vas al menú Grabar y pulsas la opción Grabar, se creará un archivo llamado #Current.iim, que es el archivo por defecto donde se almacenan las acciones que guardes. Esto quiere decir que hay que ser cuidadosos de no usar ese nombre para un archivo que quieras guardar, o se sobreescribirán los datos y perderás lo que había antes en ese archivo.
 

Yo tengo guardados mis scripts en una carpeta llamada misScripts, para hacértelo más simple de entender.  Pero en tu caso sólo aparecerán las carpetas Demo y Favoritos. Las puedes reconocer por el icono.

Ahora, lo que vamos a hacer es pulsar en Grabar, sólo para que veas cómo se crea un archivo llamado #Current.

Te pregunta si te gustaría cerrar todas las pestañas antes de Grabar. Si eliges Sí, IMacros cierra todas las pestañas y le añade una línea de código para que siempre que ejecutes el script se cierren todas las pestañas y quede solamente la actual. Responde que no.


Acto seguido, verás cómo se altera la ventana de Imacros. Es porque está grabando. Sólo pulsa el botón Detener.

Y vas a ver que apareció el archivo que te dije. Podemos verlo por dentro, si quieres, pero lo único que hace es llevarte a la página dónde estabas.

Vamos a guardarlo con otro nombre. Elegir Save Macro As (teniendo seleccionado el archivo, como se ve en la imagen). Pongamosle de nombre pruebaUno. Elige el que quieras, pero no lo pienses mucho porque lo vamos a eliminar en un momento.

Verás que en la parte de abajo hay un rectángulo gris (en la imagen); eso es porque tapé la ruta a mi carpeta de Imacros, pero normalmente se ubica en tu carpeta personal, se llame" Mis Documentos" o "Carpeta de Tal Usuario". Encontrarás una carpeta llamada IMacros, y ahí es donde se guarda lo que ves en pantalla, en el panel de Imacros.

Bien, como el archivo no nos sirve de nada, vamos a borrarlo, haciendo click derecho sobre él y eligiendo la opción Eliminar.

Habrás visto que hay más opciones. No vamos a explicarlas, porque son obvias, pero quisiera que echemos un vistazo a la macro que grabamos, llamada #Current. Clic derecho sobre ese archivo y elegir Editar.

Se abre una nueva ventana como la siguiente:

La primera línea es algo que crea Imacros automáticamente, la segunda le indica que las cosas se harán en la pestaña en la que estamos y la tercera que se vaya al sitio en el que estabas. Por ejemplo, si estabas en Google, después de URL GOTO=, te aparecerá la dirección de Google.

En algunos casos, te conviene eliminar esa línea, para que empieces desde donde te ubicas manualmente, pero si siempre debería estar en ese sitio exactamente, en lo que dice ahí, lo mejor sería dejarlo.

Las opciones que ves abajo son: Save&Close (Guardar y Cerrar), Cancelar y Ayuda.

¿Qué es Imacros?

Imacros es una extensión que sirve para ejecutar macros, o sea, para repetir acciones y evitarse las tareas repetitivas que pueden ser programadas, como ser llenar formularios que siempre se llenan igual, de forma parecida o en base a cálculos. También puede recoger datos de sitios webs para insertarlos en otros. Imacros puede imitar cualquier comportamiento del usuario a través del navegador, siempre que se lo haya programado para eso.

Ayuda a la persona con menos conocimientos con sus métodos integrados y al mismo tiempo permite que el que tenga conocimientos avanzados pueda aplicarlos (cuenta con soporte para muchos lenguajes de programación). Lo que significa que aunque comiences sin saber, si es tu decisión hacer tareas más avanzadas con este complemento, puedes ir aprendiendo las habilidades que necesites.

Está disponible para Firefox y Chrome, entre otras opciones. Yo uso la opción de Firefox. Ignoro si funciona igual de bien en Chrome.


FIREFOX https://addons.mozilla.org/es/firefox/addon/imacros-for-firefox/

CHROME https://chrome.google.com/webstore/detail/imacros-for-chrome/cplklnmnlbnpmjogncfgfijoopmnlemp


En el sitio oficial, te venden una versión mejorada y te dan soporte, pero se puede hacer un montón de cosas con la versión gratuita. Te dejo el enlace, más que nada como reconocimiento a las personas que hicieron la extensión:

SITIO OFICIAL http://imacros.net/