Cómo realizar un tutorial con Wink y de paso ser más amables en Twitter (y evitar spam con 10minutemail)

1
18745

Cómo realizar un tutorial con Wink y de paso ser
más amables en Twitter (y evitar spam con 10minutemail)

Índice de
contenidos

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Toshiba Portégé R500 (Intel Core2 Duo U7600 1.20 GHz, 2GB RAM)
  • Sistema Operativo: Windows 7 Ultimate
  • Mozilla Firefox 3.6.9
  • Wink 2.0 build 1060

1. Introducción

Hace ya algún tiempo que venimos planteándonos
hacer algo más atractivos visualmente algunos tutoriales, y
sobre todo, más fáciles de seguir. Si una imagen
vale más que mil palabras, ¿cuántas
palabras vale un vídeo o un screencast? Con todos vosotros:
Wink.

Wink es una herramienta de creación de presentaciones y
tutoriales que permite realizar capturas de pantalla y
añadir fácilmente explicaciones, botones,
títulos,…

   
http://www.debugmode.com/wink/

Según su propia página, Wink está
principalmente enfocado a la creación de tutoriales sobre el
uso de software. Suena bastante apropiado, ¿verdad?

2. Instalación

En su día hicimos ya un pequeño
tutorial de Wink
,
pero vamos a verlo un poco más detenidamente. Una vez
descargado, lo instalamos sin mayor problema. Si lo estáis
instalando sobre Windows, NO lo instaléis en el path por
defecto
, ya que dará problemas de escritura al tratar de ver
los tutoriales incluidos. En su lugar, podéis instalarlo en
c:\wink, por ejemplo.

Wink incluye en la instalación dos pequeños
tutoriales, que muestran la funcionalidad básica de Wink.
Podéis acceder a ellos (os recomiendo que veáis
al menos el primero) dentro del menú Help:

3. Usando Wink

Arrancamos Wink y pulsamos en New Project:

Y obtenemos un menú para iniciar nuestro proyecto.
Seleccionamos empezar capturando pantallazos y elegimos si queremos
capturar la pantalla completa, una ventana o un rectángulo
determinado:

¿Pero… qué capturamos?

Vamos a hacer un tutorial dentro del tutorial, y vamos a aprovechar las
explicaciones sobre el funcionamiento de Wink para ver cómo
podemos ser un poco más amables en Twitter, implementando
una respuesta automática para nuestros nuevos seguidores.

4. SocialOomph – Mensaje Directo automático a nuevos seguidores en Twitter

Supongo que os habrá sucedido en varias ocasiones que, tras
empezar a seguir a alguien, recibís un mensaje directo suyo
del tipo: “Gracias por seguirme!!” (o
“Tienes un excelente criterio” como en el caso de
nuestro amigo Xavi Gost).  Si habéis buceado un
poco en Twitter para ver cómo hacerlo vosotros,
habréis visto también que este “mensaje
directo automático a nuevos followers” no es algo
que os ofrezca directamente Twitter en la configuración.

Para hacerlo, necesitaremos apoyarnos en las funcionalidades que nos
ofrece SocialOomph (
http://www.socialoomph.com/
), que algunos
conoceríais por su nombre antiguo de TweetLater. Nos
registramos de forma gratuita,

hacemos login y podemos empezar a usarla.

Y aquí voy a hacer otro inciso para hablar de un
pequeño recurso muy útil, las cuentas de mail
temporales.

En ocasiones, cuando nos registramos en una herramienta, foro o recurso
de internet, nos asaltan las dudas de cuánto spam nos
reportará dicho registro. El problema es que,
además, solemos necesitar usar una dirección de
mail válida, ya que nuestro registro sólo
será efectivo tras validarlo con el mail de
activación recibido en dicha cuenta.

Las cuentas de mail temporales (cuentas de usar y tirar) son la mejor
solución a este problema. En 10minutemail
(
http://10minutemail.com/
), como su propio nombre indica,
podéis obtener una dirección de mail para usar
durante 10 minutos (prorrogables), que emplearéis para
realizar la activación en estos casos y a la que luego dejar
que envíen todo el spam que quieran. Aquí
podéis ver la interfaz que os ofrece (con el mail de
activación del usuario dummy de Twitter que creé
para probar el tutorial):

En cualquier caso, no os hará falta usarlo para SocialOomph,
ya que yo me he registrado con un mail que uso de forma habitual y no
he recibido spam alguno.

Ahora que ya estamos registrados, vamos a realizar el proceso de
activación del mensaje directo, y vamos a grabarlo con Wink para nuestro
tutorial.

5. Captura en Wink

En nuestro menú de inicio de proyecto seleccionamos empezar
capturando pantallazos y elegimos capturar una ventana determinada:

Como podéis ver por las marcas verdes, Wink permite incluso
capturar sólo la ventana interna del Firefox, sin barras de
dirección, estado o herramientas, lo que resulta muy
cómodo (aunque también tiene luego una
opción para recortar todos los frames capturados):

Y una vez pulsemos OK, nos mostrará la última
pantalla antes del proceso de captura, en la que se nos indican las
teclas relevantes para el mismo. Os aconsejo que os
detengáis un poco en ella.

  • PAUSA:   Capturar un pantallazo
  • SHIFT + PAUSA:   Iniciar/Detener el proceso de captura temporizada (Timed). Es
    decir, captura de forma continua, según el ritmo que hayamos
    marcado.
  • ALT + PAUSA:   Iniciar/Detener el proceso de captura basada en entradas (Input-driven).
    Es decir, captura cuando se produce un evento de entrada del usuario,
    bien un click o una pulsación de tecla.

En la pantalla anterior podemos marcar el ritmo y los eventos de
entrada que queramos:

Los 3 sistemas de captura son bastante útiles,
según lo que queramos hacer / demostrar. Para aplicaciones
que respondan sobre todo a clicks, el Input-Driven es muy
cómodo. Sin embargo, no captura automáticamente
los eventos disparados por movimiento de ratón, por lo que
si la aplicación que queremos mostrar los usa, tal vez
necesitemos complementarlo con pantallazos manuales, o incluso pasar a
Timed Capture.

Como podéis ver en la pantalla del Wizard, Wink nos permite también grabar audio durante la fase de captura (e incluso añadir audio externo a nuestros tutoriales en la fase de edición).

Minimizamos la ventana de Wink con el botón de Minimize To Tray
para que no entorpezca nuestras capturas, y ya estamos listos para
grabar.

En nuestro caso, y por las características de la
página de SocialOomph vamos a emplear el Timed Capture.
Durante la grabación, podéis controlar / cancelar
/ finalizar la misma mediante el icono de Wink en la barra de tareas:

Además, el icono os indicará en cada momento en
que modo de captura estáis:

   Manual

   Timed

   Input-driven

y, salvo en Timed Capture, parpadeará cada vez que capture
un pantallazo para informaros.

Al finalizar la grabación, con Finish Capture, se
abrirá automáticamente la ventana de Wink, en la
que podremos ver todos los frames (pantallazos) capturados (en nuestro
caso, 450):

y podremos editarlos a nuestro gusto.

Podemos exportar los frames (antes o después de editados) a
un documento PDF, por lo que la captura manual o la input-driven pueden
ser también muy útiles para realizar tutoriales
estáticos.

Antes de editar, vamos a guardar nuestro proyecto (.wnk) y a generar
una secuencia Flash con la captura realizada sin edición,
mediante la opción Render (flecha verde), para hacernos una
idea de qué tal ha quedado:

Nos solicita los parámetros de la renderización,
ya que aún no los habíamos fijado en Project Settings
(justo a la izquierda de Render). Como vemos, podemos fijar el
Frame Rate o la suavidad del movimiento del cursor.

El movimiento del cursor es una de las características
más espectaculares de Wink, ya que nos permite la
generación de secuencias Flash con capturas manuales o
input-driven, simulando Wink el movimiento del cursor según
las posiciones del mismo en los frames que tiene capturados.

Pulsamos OK y al cabo de un rato

obtenemos el resultado, que podemos visualizar con la opción
View Rendered Output (justo a la derecha de Render), o directamente
abriendo el .swf generado o el .htm que lo contiene (por defecto, en el
mismo directorio y con el mismo nombre que el proyecto .wnk).

Vamos a ver qué tal ha quedado: Twitter – sinedición

La verdad es que, pese a algunos movimientos algo erráticos
del ratón (mea culpa) y a la falta total de explicaciones,
podría entenderse sin necesidad de hacer más.
Pero yo he venido aquí a hablar de mi libro, así
que vamos a ver qué nos ofrece Wink para mejorar esto.

6. Edición en Wink

En primer lugar, vamos a colocar un pequeño mensaje sobre el
propósito del tutorial. Para ello, añadiremos a
nuestro primer frame una caja de texto:

Cambiamos la forma de la caja, con el botón de Properties – Choose Callout
en el panel derecho, y escribimos nuestro texto:

Como vemos, nuestra caja se añade a los elementos que
contiene nuestro frame, añadido al propio frame y al cursor.
Podemos verlo tanto en el panel derecho como en el inferior de
exploración de frames. Esto resulta muy útil para
copiar elementos de un frame a otro, así como para saber de
un vistazo qué hemos añadido a cada frame.

Y ahora es el momento de añadir un par de elementos de
navegación. Añadiremos un botón de
Goto URL (para que el usuario pueda ir cómodamente a la
página de SocialOomph si quiere probar nuestro tutorial) y
otro de Next Frame para iniciar el tutorial.

Un botón Next implica que el tutorial se detiene en ese
frame hasta que sea pulsado. En otros casos, podemos
fácilmente controlar el tiempo de permanencia en un frame
mediante el parámetro Stay in this frame … Si no
usamos ni uno ni otro, el tiempo lo marcará el frame rate
elegido (aprovecho para disculparme por el espantoso lenguaje empleado
a lo largo del tutorial, pero las traducciones de ciertos
términos son aún más espantosas).

Como podéis ver, tanto el panel derecho como el de
exploración reflejarán nuestros
añadidos.

Elegimos qué elemento añadir en el panel derecho
(encima de la lista de elementos). Si no nos gusta el diseño
de un elemento determinado (un botón por ejemplo), Wink nos
permite elegir otra imagen para él, nuevamente en Properties – Choose Image (por ejemplo, el botón de Next en
este frame no es el estándar)… e incluso cargar
nuestras propias imágenes o crear nuestras propias formas.

Y ahora vamos a ver un poco el cursor…

Vemos cómo el cursor aparece rodeado por un cuadrado gris.
Esto es así para distinguirlo fácilmente de
nuestro propio cursor cuando estamos editando.

Si queremos que nuestras cajas de texto se mantengan durante el
movimiento del cursor, simplemente las copiaremos en los frames
sucesivos. Vemos como en este caso, permanecemos 1 segundo en el
frame actual y luego mantenemos nuestra caja de texto en los siguientes
frames, para que siga apareciendo según se mueve el cursor.

Además, podemos también aprovechar, si hemos
empleado Timed Capture, para limpiar frames innecesarios. Podemos
eliminar aquellos en los que solamente varíe la
posición del cursor, y mantener sólo los que
reflejen la posición inicial y final del mismo. Como
comentamos antes, Wink generará automáticamente
los frames intermedios para nosotros en la película Flash
final, con lo que conseguiremos un movimiento más limpio del
cursor y reduir el tamaño de nuestro proyecto.

Como podéis ver en la siguiente imagen, con esta
técnica hemos reducido el número de frames de
nuestro proyecto de 450 a sólo 256.

Para finalizar nuestro tutorial, vanos a añadir un
botón de repetición del Flash, que no es
más que un botón Goto Frame que apunta el frame 1
de nuestro proyecto:

Hacemos Render y vemos el resultado final: Twitter – editado

Bastante chulo, ¿verdad?

Como vemos, Wink nos ha añadido un preloader y un
control bar al Flash generado, para facilitar la interacción con el
mismo (podemos configurarlo en Project Settings):

En resumen, una herramienta muy potente, muy fácil de
usar… y gratuita.

Como siempre, espero que el tutorial os haya resultado útil.

1 Comentario

  1. De verdad, vaya cracks (innovando y estabilizando).

    La semana que viene empiezo a probar esto, ¿tenéis pensado aceptar este tipo de formatos en la web de Adictos? En plan, con Youtube o similares?

    Saludos y gracias,

Dejar respuesta

Please enter your comment!
Please enter your name here