En este ejercicio vamos a cubrir varios tópicos: cómo capturar imágenes en la pantalla a un archivo GIF, cómo re escalar y recortar una imagen y cómo añadir un enlace a la imagen GIF a tu página.

Las dos piezas de software que usaremos son SnagIt, un programa compartido de captura de pantalla para Windows y Paint Shop Pro, otro programa compartido de Windows el cual es muy útil para convertir y manipular imágenes. (De hecho, también podemos usar el primer programa mencionado para convertir imágenes en tales formatos como BMP a GIF o formato JPEG necesario para muestrario en el navegador en línea, pero tal conversión no será necesaria en el presente ejemplo).

Es importante poder capturar todo o partes de la pantalla de la computadora. Por ejemplo, muchas de las ilustraciones en este tutor empezaron como imágenes capturadas de pantalla. El sistema de operaciones standard de Windows incorpora una captura de pantalla rudimentaria vía la tecla <Print Screen>, pero el programa compartido de SnagIt da una serie de posibilidades mayor.

Para abrir SnagIt, ve al expediente que contiene el programa y oprime doblemente sobre su icono. El resultado debe mostrarte algo parecido a la figura que sigue. Esta ventana está dividida en tres secciones básicas.

Primero, controlas el método de operación del programa al hacer varias selecciones de los menús mostrado en la parte superior de la ventana.

Próximo, la combinación de teclas que tu oprimas para iniciar una captura se muestra en la parte inferior de la ventana. En la configuración indicada en la figura, empiezas una captura oprimiendo las teclas <CTRL><SHIFT><P> simultáneamente.

Finalmente, el resto de la ventana muestra las selecciones actuales para cada una de los temas del menú desplegable. Los tres iconos a la izquierda de la ventana muestran el tipo de captura de pantalla que puede hacer el programa:

• Captura de Imagen -- guarda una foto de todo o parte de la pantalla.
• Captura de Texto -- solo guarda el texto (no imágenes) de todo o parte de la pantalla.
• Captura de Vídeo -- guarda todo o parte de la pantalla en una película AVI.

Uno de estos modos de captura puede ser seleccionado oprimiendo uno de los tres iconos (causando que aparezca "Pressed") o haciendo una selección del menú de "Tools" (nuevamente el icono correspondiente aparecerá "Pressed" para reflejar la selección).

La información que aparece a la derecha de éstos tres iconos refleja selecciones hechas en los otros menús. Discutiremos algunos de éstos temas en los menús próximamente. (Estas selecciones indicadas en la parte inferior de la ventana deben hacerse con el mismo menú; las áreas en esta parte de la ventana no se pueden editar).

El menú "Input", mostrado a la izquierda, te permite ser específico en lo que tu quieres que el programa capture. Para nuestros propósitos, de las opciones disponibles, las mas importantes son: Screen - captura el contenido de la pantalla completa.Window - captura el contenido de la ventana seleccionada.Active Window - captura contenido de la última ventana activa que tenías antes de comenzar SnagIt. Region - te permite usar el ratón para seleccionar el área a capturar. Este menú también provee una opción para especificar si incluir el cursor en la imagen capturada o no, si es que aparece dentro del área capturada (esto solo trabaja con "Screen" y "Active Window" como entrada [input]). También está la opción de "Auto Scroll" el cual te

permite capturar el contenido de la ventana completa en vez de la porción visible en la pantalla. Esto puede ser útil, por ejemplo, en capturar todo de una página larga de la Web cuando solo una porción de ésta es visible en una ventana del navegador. Cada uno de los últimos dos mandatos es un movimiento; una marca aparece al lado si se escoge esa opción.

El menú de "Output" , mostrado aquí a la izquierda, le dice a SnagIt qué hacer con la pantalla capturada. Para nuestros propósitos, las posibilidades mas importantes son: Printer - imprime el área capturada.Clipboard - guarda el área capturada al clipboard. File - guarda el área capturada en un archivo.

Este menú también te permite decidir si ver un avance del área capturada o no antes de enviarla al destino seleccionado anteriormente.

Menu de Formato
(Format Menu)

Como debe ser obvio por las selecciones mostradas en la figura a la izquierda, el menú de "Format" te permite específicamente si guardar el área capturada a color, en blanco y negro, o tonalidades de gris. También te permite guardar una imagen con un número reducido de colores (reduciendo el tamaño del archivo de tu imagen). En este caso sería deseable que escojas "Dither Image" para simular algo de los colores originales mezclándolos con los del juego reducido.

"Scale" te permite escalar ambos lados, de ancho y de alto de una imagen por la misma fracción (no puedes distorsionar la imagen usando diferentes fracciones para el ancho y el alto). Nota que el factor de escalar solo aplica a capturas hechas después que la escala esta preparada; no se re-escala una captura que ya se ha hecho.

La opción de "Color Boost" te permite modificar la cantidad de componentes de rojo, verde, o azul de los colores de tu imagen. (El mismo ajuste está hecho para un componente RGB de cada color en la imagen). La opción de "Color Substitution" te permite reemplazar cualquier color con cualquier otro color. Nota que el color de sustitución solo se utiliza para capturas hechas después de que la sustitución se haya escogido. No altera la imagen actualmente capturada.

El menú también te permite seleccionar varios "Program Preferences". Una de estas es la combinación de teclas que usas para iniciar la captura de una pantalla. Por omisión, esta combinación es <CTRL><SHIFT><P> que vimos en la parte inferior de la primera figura en la sección. Pero esta opción del menú te permite re-definir la tecla caliente si lo deseas. Si re-defines la combinación de teclas o no que comienzan en una captura, la parte inferior de la ventana de SnagIt siempre muestra la definición actual.

"Program Preferences" también te permite cambiar la combinación de teclado caliente usado para repetir la captura anterior. Por omisión, esta es <CTRL><SHIFT><R>.

Como notamos anteriormente, el menú de herramientas te permite seleccionar la captura que tu desees que haga. Esto quiere decir, que te permite escoger entre la herramienta de una cámara estática para hacer una foto de capturas de imágenes, una herramienta que te permite solamente capturar el texto pero no las imágenes en cierta área o una herramienta "cámara de vídeo" para grabar un área

(presumidamente cambiante) de la pantalla y guardarla como película. Como también notamos anteriormente, esta selección de tipos de herramientas para el uso de capturas puede hacerse o seleccionando un artículo del menú o oprimiendo uno de los tres iconos a la izquierda de la ventana de SnagIt.

Repasando, la ventana de SnagIt se parecerá como la primera figura de esta sección si decidimos guardar una imagen de color de una región de la pantalla que marcaremos con el ratón. Una vez hayamos seleccionado la región, pediremos una vista parcial de lo que parecerá la captura. Después la podremos guardar en un archivo de formato GIF en la Desktpo (ej.: en c:\windows\desktop).

Para más información sobre cualquiera de los temas discutidos anteriormente, pueden ser obtenidos del menú de "Help" de SnagIt.

Ahora vamos a hacer un ejercicio en el cual añadiremos un tutor corto al cliente de ftp WS_FTP LE, completo con fotos ilustrativas a nuestra página. Como primer paso, vamos a capturar tres imágenes de este programa.

Para comenzar, vamos a capturar el contenido completo de una ventana. Asegúrate de que tu copia de SnagIt está configurada tal como está en la primera figura de esta sección, excepto usa el menú de "Input" para seleccionar "Windows".

Entonces,

1. oprime doblemente sobre el icono WS_FTP LE para abrir el programa. Después de que el programa cargue, debes verla ventana de "Seccion Profile" en primer plano (con una ventana del programa mas grande en el fondo).

2. Del teclado, selecciona simultáneamente, las teclas <CTRL><SHIFT><P>. Cuando hagas esto el cursor se transformará en una mano. Si colocas la mano encima de una ventana, verás que la ventana se rodeará por un rectángulo de colores. Mueve la mano hasta que la ventana completa de "Session Profile" quede encerrada (nada del fondo está incluido) en el rectángulo de color). Ahora, oprime el botón izquierdo del ratón; esto causará que SnagIt capture una imagen de esta ventana.

3. Ahora, la selección de captura debe aparecer en la ventana preliminar, solamente la esquina izquierda de la parte superior la cual vemos a la derecha. Guarda la selección en un archivo o escogiendo la opción "Finish Output" debajo del menú de "File" u oprimiendo el botón del triángulo verde. (Para prevenir guardarlo, debes seleccionar el "CancelOutput" del menú desplegable de "File" u oprimir el botón cuadrado rojo).

4. En el encasillado de diálogo de "Save As" que aparezca, selecciona un nombre para el archivo de la imagen (asumiremos el nombre wsftp1.gif esta explicación). Asegúrate de que la Desktop se muestre como el expediente y oprime "Save".

Si oprimes doblemente sobre el icono de wsftp1.gif en la Desktop, debes de ver la siguiente figura.

Para usar una segunda imagen en nuestro tutor, vamos a tomar una foto de la pantalla de la ventana principal de WS_FTP. Después de oprimir el botón "OK" en la ventana de "Session Profile" , debe desaparecer, dejando la ventana principal de WS_FTP (que había estado en el fondo). De nuevo, usa la tecla caliente <CTRL><SHIFTL><P> para comenzar una captura. Mueve el cursor en forma de mano hasta que la ventana entera este dentro del rectángulo de color y oprime el botón izquierdo del ratón. Cuando salga la ventana preliminar, oprime el triángulo verde para dar la señal de que tu deseas guardar el archivo. Guarda esta imagen como wsftp2.gif en la Desktop.

Esta es una imagen grande, así que vamos a pedirle a SnagIt que capture una versión mas reducida. Ve al menú desplegable "Options" de SnagIt, y selecciona "Scale". En la ventana que abra entra 0.67 como el valor de "Scale Image" y oprime "OK". Ahora, repite la captura de la pantalla de la ventana principal de WS_FTP, este ahorro de tiempo en un archivo wsftp2-small.gif en la Desktop. (Esto guardará la versión de la ventana con medidas de ancho y alto de 2/3 de esos de la versión anterior grande. Después usaremos las imágenes de ambos tamaños en nuestro tutor). Una vez hayas guardado el archivo, regresa a "Option/Scale" y cambia el valor de "Scale Image" a 1.0 para que las fotos de pantallas subsiguientes no se reduzcan inadvertidamente.

Finalmente, para nuestra última imagen vamos a hacer una foto que se concentra en la lista de los archivos en la computadora remota. En este caso, vamos a suponer que queremos incluir en la imagen, no solo la lista de los archivos que están en la ventana que está a la mano derecha del muestrario principal de WS_FTP, sino la fila de botones encima de la lista también. La opción de entrada "Windows" de SnagIt no nos permitirá tomar la filas de botones y la esta de los archivos de una sola imagen a menos que también incluyamos la ventana que las encierra (en este caso, la ventana principal WS_FTP completa). Así que ahora, cambiemos la entrada de SnagIt a "Region" para poder hacer la captura como la queremos.

1. Selecciona "Region" del menú de "Input".

2. Comienza la captura con la combinación de teclado caliente <CTRL><SHIFT><P>.

3. El paso anterior te dejará un cursor en forma de cruz en la pantalla. Coloca el cursor en forma de "+" en una esquina de la región a que tu quieras capturar, mantén oprimido el botón del ratón y arrastra un rectángulo alrededor del la región que desees capturar. Para la captura actual, no trates de ser tan cuidadosa(o) de no agarrar parte de las áreas alrededor de la imagen (próximamente veremos el por qué). Coloca el cursor un poco mas arriba y a la izquierda de la fila de botones y arrastra el ratón un poco mas abajo a hacia la derecha de la ventana con esta lista de archivos.

4. Suelta el botón del ratón. Cuando la ventana preliminar aparezca, oprime el botón del triángulo verde de la ventana indicándole que deseas guardar la imagen. En encasillado de diálogo que te aparezca, guarda el archivo bajo el nombre wsftp3.gif en la Desktop. Ahora, cierra WS_FTP LE.

Si ahora vas al Desktop y oprimes doblemente sobre el icono del archivo de esta imagen, debes recibir una imagen como la figura que le sigue.

Cortando una Imagen con Paint Shop Pro
(Cropping an Image with Paint Shop Pro)

Ahora nos encontramos casi listos para crear nuestro tutor y añadirle las fotos de pantalla que acabamos de tomar. Puesto que SnagIt nos permite guardar las imágenes como archivos GIF, no necesitamos convertirlos en otro formato para poder usarlas como imágenes en línea. (SnagIt también puede guardar capturas de pantallas en otros formatos, incluyendo archivos JPEG y BMP. También podemos usar el anterior como imágenes en línea sin conversión, pero no la última).

De todos modos, deseamos, hacer una pequeña modificación a nuestra última imagen. Recuerda que intencionalmente fuimos un poco descuidados cuando hicimos la captura usando el método de selección de la región de SnagIt. Pudimos haber sido mas cuidadosos, pero nuestro propósito fue salvar una porción mas grande de la pantalla que verdaderamente necesitábamos que apareciera en esa imagen. De hecho, la razón por la cual se hizo así fue para que ahora pudiéramos ilustrar una manera de eliminar porciones no deseadas en una imagen, un proceso conocido como recorte de una imagen ("image cropping"). La región de captura de SnagIt obviamente te permite hacer un recorte de una imagen antes de que la captures, ya que en una región de captura es un requisito ser específico con las fronteras del área que deseas guardar. Pero SnagIt no provee la forma de recortar una imagen después de que ha sido capturada. Puesto que recortar una imagen existente es algo que frecuentemente podrías encontrar útil, ahora discutiremos cómo se puede hacer con un programa de gráficas compartido muy popular llamado Paint Shop Pro (PSP).

PSP es un programa de pintura de propósito general que te permite crear gráficas nuevas originales y editar y manipular imágenes existentes en un sin número de formas. Para nuestro propósito actual solo lo usamos para recortar esta única imagen, pero lo encontraras una adición muy conveniente a tu colección de software si es que vas a trabajar mucho con gráficas.

esta será la etiqueta que se vera en el botón aun cuando la herramienta de selección esta puesta en otra forma geométrica que no sea un rectángulo). Coloca el ratón en el punto que tu desees que sea una de las esquinas nuevas de la imagen recortada. Mantén oprimido el botón izquierdo del ratón mientras lo arrastras hacia la esquina opuesta del área que desees mantener de la imagen. Suelta el botón del ratón. Ahora, ve al menú de "Image" y selecciona "Crop". Esto recortará la imagen y la llevará hasta donde habías marcado. Selecciona "Save" del menú de "File" para guardar la imagen recortada. Ahora puedes salir de PSP.

Aunque no hemos necesitado tomar ventaja del hecho en este ejemplo, una de las muchas características de PSP es la habilidad de convertir entre numerosos formatos de archivo. Así, por ejemplo, si de alguna manera obtenemos una imagen que queremos usar en la página de la Web que había sido creado por un programa de gráficas de Windows y guardado en formato de BMP, o por un programa de Macintosh y guardado en formato PICT, podemos usar PSP para convertir la imagen o en una GIF o en n archivo JPEG. (PSP, no puede leer ni escribir cada formato de gráfica, pero es bastante versátil en formatos de conversión).

Un Ejemplo Sencillo: Haciendo un Tutor WS_FTP
(A Simple Example: Making a WS_FTP Tutorial)

Abre el archivo de tu página index.html en el expediente personal e integra el siguiente código de HTML en un lugar conveniente:

Guarda el archivo index.html, señálale el navegador, y recarga. Debes de tener algo parecido a lo siguiente en tu página:

En este ejemplo de HTML, el código

centraliza la imagen wsftp1.gif. Si hubiésemos usado una etiqueta de imagen como

(sin <center> y </center>) la imagen wsftp1.gif se hubiese puesto en línea, alineado hacia la izquierda (con texto envolviendo hacia la derecha), permitiendo 15 puntos adicionales de espacio horizontal y 5 puntos de espacio vertical adicional alrededor de la figura (hay 72 puntos en una pulgada). Mientras este alineamiento es uno que querrás usar con frecuencia para figuras, no habría sido una buena selección en este caso. Por el hecho de que el texto de este tutor está comprimido para caber dentro de un marco relativamente angosto, este alineamiento de la imagen hubiera resultado en la figura sobreponiéndose encima, y hasta obstruyendo parte del texto.

La construcción <tt>WS_FTP</tt> nos dice de rendir la palabra "WS_FTP" en "teletype font", (una tamaño de letra usado con frecuencia para significar el nombre del programa de computadora). El HTML restante en este ejemplo debe ser reconocido de ejercicios anteriores.

ASIGNACION: Usando lo anterior como guía, añade mas texto explicativo para el programa de WS_FTP, usando las otras dos fotos de la pantalla hechas en la previa discusión. Para la segunda figura en tu tutor, usa wsftp2-small.gif como la imagen en línea y haz un enlace con el wsftp2.gif mas grande.