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.