Main illustration: Benedikt\u00a0Luft Main illustration: Benedikt Luft

Cada vez que inicio un nuevo proyecto de diseño web en dimedia, me hago cargo de buscar inspiración de diseños de sitios web en el internet para posteriormente compartirlas con el equipo de diseño. Por tal razón, creé un flujo de trabajo automatizado que recolecta capturas de pantallas completas de sitios web y los envía a una libreta compartida de Evernote, además este flujo agrega la URL de referencia en el titulo de la nueva nota que contiene la captura de pantalla.

El resultado final del flujo de trabajo es tener en una libreta de Evernote con todas las capturas de pantalla completas y sus URL de referencia El resultado final del flujo de trabajo es tener en una libreta de Evernote con todas las capturas de pantalla completas y sus URL de referencia

Cabe aclarar que aunque la extensión de Evernote, Web Clipper, tiene la opción de captura de pantalla, esta no realiza una captura de pantalla de la página completa. Sé que existen servicios como Hypershoot que realizan esta labor, no obstante, dicha opción no me complace del todo. Ya hablaré de ello en otro post.

Volviendo al tema que nos ocupa, es necesario tener instalado la extensión Full Page Screen Capture de Chrome, Hazel y Evernote. Este truco sólo funciona en macOS, abstente si tienes Windows. A continuación explico brevemente en que consiste este truco.

Prepara tu AppleScript

El siguiente AppleScript tiene la función de copiar y pegar la imagen descargada en una nueva nota de Evernote, asignar etiquetas a esa nueva nota y mover la nota a la libreta de tu preferencia. Personaliza este AppleScript con tus preferencias y guárdalo, lo ocuparás en el siguiente paso.

tell application "Evernote"
	tell application "Finder" to set file_name to (name of theFile)
	activate
	set theData to (the clipboard as text)
	set the clipboard to theData
	set defaultTag to {"etiqueta-01", "etiqueta-02"}
	set append_text to "Captura de pantalla completa de " & theData & " | Inspiración"
	create note from file theFile notebook {"El nombre de mi libreta de capturas de pantalla"} title append_text tags defaultTag
end tell

Configurando Hazel

Parte de la magia de la automatización de esta tarea radica en Hazel. Si aún no sabes para que sirve Hazel te sugiero buscar en google. Ahora sí, manos a la obra.

01. Agrega la carpeta donde descargarás las capturas de pantallas. En este ejemplo agregué la carpeta “Capturas pantallas”, aunque lo habitual es que las descargas vayan directamente a la carpeta “Descargas”.

La ventana de Hazel se divide en la sección de carpetas (folders) y reglas\u00a0(rules). La ventana de Hazel se divide en la sección de carpetas (folders) y reglas (rules).

**02. **Crea una nueva regla y asígnale un nombre. Para el ejemplo utilicé el nombre “Evernote Screen Capture”. Posteriormente asigna una regla con el objetivo siguiente: Si el nombre del archivo inicia con screencapture- ejecuta un AppleScript y elimina el archivo.

Opciones de configuración de la regla “Evernote Screen Captura”. Opciones de configuración de la regla “Evernote Screen Captura”.

Carpeta “Capturas pantallas” y su regla “Evernote Screen\u00a0Captura” Carpeta “Capturas pantallas” y su regla “Evernote Screen Captura”

Instala la extensión Full Page Screen Capture y prueba.

Cliquéa o toca el siguiente enlace para descargar la extensión de Chrome Full Page Screen Capture. Busca en internet una página para realizar una captura de pantalla completa, copia la URL de la página, toma una captura de pantalla con la extensión y descárgala en el carpeta que elegiste monitorear con Hazel. Espera unos segundos y si no ocurre ningún error, tendrás tu captura de pantalla completa en Evernote.

Recurso embebido


Este artículo fue publicado originalmente en Medium en mi antiguo blog. Puedes consultar la publicación original aquí.