Curso: CREACIN DE MANUALES PARA CURSOS DE FORMACIN

Salvador Alcaraz Prez Epapiros 2003, S.L Ao: 2012 Centro Nacional formacin Ocupacional de Cartagena

VIDEOTUTORIALES

UA 6:

http://www.epapiros.com

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

Objetivo especfico: (logro de la siguiente capacidad)

C1. Crear videotutoriales para utilizarlos como recurso visual y de apoyo en nuestros cursos de Formacin.

Criterios de evaluacin: (se comprobarn los siguientes resultados de aprendizaje)

Conocimientos CE1.1. Conocer los diversos formatos video y el formato Flash como alternativa CE1.2. Diferenciar las distintas propiedades y caractersticas de videotutoriales. CE1.3. Identificar el software necesario para realizar videotutoriales.. Destrezas Cognitivas y prcticas CE.1.4. Cambiar formato de archivos y modificar los manuales para adaptarlos a nuestro formato ideal. CE1.5. Crear videotutoriales utilizando el software adecuado para ello. CE1.5. Distribuir nuestros videotutoriales de manera adecuada. Habilidades sociales - Manejar nuestros manuales de manera adecuada, distribuyndolos para su visionado, mediante el uso Internet y las herramientas adecuadas: insercin en Blog o Web, envo de enlaces, envio por correo electrnico y envo por FTP.

1 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 1

CREACIN DE VIDEOTUTORIALES

UA 5

ndice

1. Introduccn, 3 2. Crear un videotutorial con WINK, 3 3. Crear un videotutorial con roboDemo, 13 4. Recursos/Bibliografa, 19.

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 2

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

1. INTRODUCCIN
Los videotutoriales son pequeos manuales sobre temas concretos, narrados de manera visual mediante pequeas demostraciones grficas en formato vdeo y flash, apoyadas con globos de texto y con audio (narraciones).

Existen varios programas para realizar videotutoriales segn el software que decidamos utilizar. Podemos crear este formato mediante diverso software, nosotros hemos optado por los siguientes: 1. Wink: Un software gratuito que podemos descargar de Internet. 2. Macromedia RoboDemo: Software de pago pero que Macromedia, al ser absorbida por Adobe, dej de desarrollar. Es bueno y sencillo, aunque ya no se vende. En su lugar existe un software mas elaborado y complejo, pero mas completo, llamado Adobe Captivate. Por motivos de tiempo, en este curso veremos las dos primeras opciones, dejando la Adobe Captivate para otro curso exclusivo de material de Elearning. 3 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 3

CREACIN DE VIDEOTUTORIALES 2. VIDEOTUTORIALES CON WINK 2.0

UA 5

1INTRODUCCION
1. Acerca de Wink Wink es una herramienta de software para hacer presentaciones y videotutoriales. Esta presentacin o videotutorial permite aadir comentarios a las partes de la presentacin para mejorar la explicacin de la misma. El uso de este tipo de presentaciones puede ser mltiple: Informacin sobre el uso de determinado software. Tutorial sobre determinadas acciones a realizar en la pantalla d un ordenador. Documentacin adicional a la documentacin escrita de un manual/tutorial. Explicacin/demostracin visual sobre un determinado tema. El formato de salida bsico de Wink es FLASH (la extensin de archivos es swf). Este tipo de ficheros pueden ser vistos mediante el uso de cualquier navegador Web (con su correspondiente plug-in para visionar animaciones flash) por lo que fcil de repriducir y adems, gratuito. Este formato permite, adems, ser reproducido directamente desde una Web y no puede ser copiado en las partes de su contenido. 2. Requerimientos Para trabajar con Wink debemos contar con una resolucin de pantalla mnima de 800 x600 aunque se recomienda usar una resolucin de 1024 x 768 o superior. Es al resolucin mnima de los monitores TFT de la actualidad. 3. Instalacin El paquete de instalacin viene como un archivo empaquetado en formato Zip (comprimido), que puede descomprimirse con cualquier software preparado para ello. Una vez descomprimido, se ejecuta el fichero Wink20.exe y seguimos las instrucciones.

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 4

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

2CONCEPTOS BSICOS
2.1 Como utilizar Wink La primera vez que utilicemos Wink hemos de configurar el idioma de la interfaz, ya que por defecto aparece en ingls. Para ello Abrimos el programa y en el men file seleccionamos Choose language, seleccionamos el idioma adecuado y cerramos el programa para que los cambios surtan efecto. A partir de entonces la interfaz aparece en nuestro idioma preferido. Una vez iniciamos un nuevo trabajo, aparece el siguiente cuadro:

A travs de la primera ventana configuramos nuestra captura. Al pulsar ok comenzaremos a capturar, con las siguientes teclas:

5 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 5

CREACIN DE VIDEOTUTORIALES

UA 5

Al pulsar pause, capturamos la pantalla del ordenador. Al pulsar Maysculas (Shift) + Pause inicios la captura automtica y al pulsar d enuevo la apramos. Al pulsar ALT + Pause iniciamos/detenmos las capturas dirigidas. A continuacin podemos ver los fotogramas eliminarlos, colocar textos, cambiarlos, etc. capturados, podemos

Hay que tener en cuenta que cuantos ms fotogramas y ms capturas, el fichero ser de mayor tamao (tarda ms en aparecer). Al terminar aparece un pantalla similar a la siguiente:

Donde aparecen todas nuestras capturas (parte inferior), podemos colocar texto, imgenes, etc. a travs de la ventana que aparece a al derecha. Para finalizar, pulsamos sobre la flecha verde de la parte superior central del men y creamos la animacin en flash. Para verla, en el icono que se encuentra a la derecha de la flecha verde. Es posible guardar en SWF, HTML,PDf y PostScript. Mas adelante haremos una prueba de cada una de las salidas posibles. Es tambin posible aadir a ambos un pre cargador y la barra de control a la presentacin dada. Mostrarn un pre cargador cuando la presentacin carga, mientras la barra de control muestra el progreso de la presentacin real y hace posible hacer una pausa a voluntad.

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 6

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

2.2 Primer Proyecto Paso a Paso Esta seccin lo guiar por el proceso de hacer el primer proyecto de Wink. Haremos una presentacin que muestra como cambiar la vista de archivos en el Explorador de Windows. Podemos encontrar un proyecto Wink con estas instrucciones llamado "tutorial1.wnk" en la carpeta "Wink \ Samples". PASO 1. Preparando el Explorador de Windows y Wink para captura. 1. Abrir el programa a travs del botn inicio Programas Debugmode Wink y aparecer el programa. 2. Una vez abierto, vamos a crear un nuevo proyecto usando elcmen "Archivo Nuevo" (o presionando las teclas CTL+N). Esto abre un asistente que utiliza Wink para capturar escenas de toda la pantalla. Podemos observar las siguientes partes que forma esta ventana:

3. Comenzar capturando pantalla (1). Debemos tener seleccionado este cuadro de opcin para seleccionar las caractersticas del grabado. 7 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 7

CREACIN DE VIDEOTUTORIALES

UA 5

4. Grabar sonido (2). Al seleccionar la casilla, se activa la imagen de audio (3) , abriendo la ventana del Mezclador de Windows. Que nos permite controlar el volumen de entrada y salida de audio.

5. Ocultar ventana de Wink (4). Oculta tanto el programa como el botn de la barra de tareas del programa de Wink. 6. Regin (5). Encuadra la porcin de la imagen que se va a grabar de la pantalla (cuando se elige otra opcin diferente a Pantalla, los dos primeros nmeros en posicin del punto de origen ubicado en la parte superior izquierda (el primero es el punto que lo mueve de izquierda hacia la derecha, el segundo lo mueve de arriba hacia abajo) los dos siguientes nmeros (despus del smbolo X) cambian el tamao del rea de captura en pixeles o puntos que forman la imagen), de lo ancho y largo de la imagen. Una opcin en este paso es cambiar la regin de captura a una ventana o parte de la pantalla rectngulo), en este caso lo cambiamos al desplegar la lista de opciones.

7. Captura basada en tiempo (6). Indicamos el numero de escenas que forma la imagen por segundo minutos u horas, tomando en cuenta que la animacin (al igual que en una Salvador Alcaraz Prez- Epapiros2003 S.L. Pgina 8

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

pelcula) entre mayor sea el numero de escenas mejor se ver, pero la cantidad de espacio de memoria que requiera, ser mayor. 8. Use timed capture when mouse button is down (Capturar cuando el botn del mouse est presionado) (7). Inicia la grabacin al presionar el botn del mouse que al igual que una pelcula de cine, obtenemos una mejor calidad de cambio de cuadros Confirmar con la tecla OK. Para pasar a la siguiente ventana presione el botn de ok; en este momento el programa queda abierto mostrando el icono en la parte inferior derecha (bandeja del sistema).

PASO 2. Al pulsar OK, nos aparece una segunda ventana informativa, con las instrucciones para iniciar y parar la captura de imgenes y escenas. La ventana es la siguiente:

9. Capturar una pantalla. Capturamos la imagen de pantalla al presionar la tecla Pause como tomar una fotografa de la imagen de pantalla. 10. Iniciar / detener captura por tiempo. Captura la secuencia de imgenes en el nmero de veces por segundo que se program en la ventana anterior. Presionando las teclas Shift + Pause inicia la grabacin de la secuencia de imgenes, se detiene al volver a presionar esta combinacin de teclas. 9 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 9

CREACIN DE VIDEOTUTORIALES

UA 5

11. Iniciar / detener captura dirigida. Captura la secuencia de imgenes el nmero de veces por segundo que se program en la ventana anterior presionando las teclas Alt + Pause y se detiene al volver a presionar esta combinacin de teclas, capturando cada vez que se presiona el botn Izquierdo del Mouse. 12. Minimizar. Presione el botn Minimizar (1) para ver la ventana de Explorador que fue ocultada detrs de Wink. Al realizar la combinacin de teclas empieza la captura o grabacin, explicada en el siguiente paso. PASO 3. Minimice Wink a la bandeja de sistema (la esquina inferior derecha de pantalla) al pulsar el botn de minimizar, a partir de este momento podemos tomar escenas presionando las teclas "Alt + Pausa". Usando estas teclas realizamos la captura conducida para hacer que Wink automticamente capture la secuencia de escenas para cada click de ratn o al presionar la combinacin de teclas. PASO 4. Para iniciar la captura, se presiona Alt + Pausa simultneamente. El icono de bandeja de sistema cambia para reflejar que estamos usamos el modo "captura dirigida". Minimice todas las ventanas excepto el Explorador de Windows. Coloque el cursor del ratn en algn lugar. La captura no inicia hasta pulsar dentro de la ventana objetivo. 4.1. Iniciar con un click en cualquier lugar dentro del rea de la captura. 4.2. Mover el cursor del ratn al men "Vista" en el Explorador. 4.3. Abrir el men con un click en el botn izquierdo. 4.4. Mover el cursor del ratn a la opcin de men " Detalles". 4.5. Presionar el ratn para seleccionar la opcin de Detalles. Esto cambia la vista a una vista de detalles. 4.6. Detenga el modo de captura dirigida al presionando Alt + Pausa otra vez. En este video completamos el procedimiento para cambiar de vista del Explorador de Windows a vista Detalles. 4.7. Ahora hemos terminado de capturar los Frames. Pulsar en el botn derecho sobre el icono de WINK en la bandeja de sistema y del men contextual seleccione "Finalizar Captura".

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 10

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

4.8. Wink mostrar el proyecto actual. La parte ms grande superior de la ventana muestra el ltimo fotograma en la secuencia. En la parte inferior podemos ver todos los fotogramas en la secuencia/presentacin. El cursor del ratn capturado es visible con una caja alrededor de l para fcilmente identificarlo del verdadero cursor. En los otros fotogramas seremos capaces de ver el progreso de la presentacin y el movimiento del cursor.

El Cuadro de Texto muestra el texto en un elemento en forma de nube parecido a un globo llamado Callout. Un Callout es un grupo de formas creadas usando el editor de Callout. Wink viene con muchos Callouts predefinidos entre el que podemos escoger para el Cuadro de Texto usados en los Frames, y podemos crear nuestros propio Callouts utilizacin el editor de Callout. 4.9. Seleccionar el primer fotograma en la lista de miniaturas mostrada en el fondo de la ventana. Ahora vamos a la barra de Propiedades (la barra a la derecha de la ventana Wink) y pulsamos en el botn Cuadro de Texto, lo arrastramos a la pantalla del escenario. El Cuadro de Texto ser mostrado por una llamada por default (el ltimo usado) en el fotograma. 4.10. Podemos ahora hacer doble clic el Cuadro de Texto en el fotograma y escribir el texto que deseemos. 11 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 11

CREACIN DE VIDEOTUTORIALES

UA 5

4.11. Ahora nosotros agregamos un nuevo botn para la presentacin y un botn de ir a para regresar al inicio del ltimo Fotograma. Seleccione el primer fotograma en la secuencia y de un clic en el botn Aadir Siguiente en la barra de propiedades. El botn recin aadido es colocado en el centro, pero podemos moverlo a cualquier lugar deseado. 4.12. En el Fotograma 5 pondremos un valor del tiempo que antes de la continuacin del fotograma 6. De esta manera quien obtendr tiempo para comprender qu opcin hemos pulsado presentacin. Cambie el enfoque " a la Permanencia en este Frame a la caja localizada sobre las Propiedades y teclee el valor 1. estar los ve en la para "

4.13. Seleccionar el ltimo fotograma y d un clic en el botn de fotograma de ir a en la barra de propiedades. Entonces seleccione el fotograma a cual debera ir (en este caso el Frame 1). 4.14. Para decir al usuario final lo que este botn Go to hace, nosotros aadimos un Cuadro de Texto a este Fotograma con el texto " repetir la presentacin". La caja de texto y el botn Go to deberan ser colocados de modo que el botn esta dentro del rea de la caja de texto a la derecha o debajo del texto actual. 4.15. Antes de continuar debemos guardar el proyecto en el men "Archivo>Guardar". Debemos guardar el proyecto a menudo para no perder el trabajo. 4.16. Escoger el men "Proyecto>Ajustes. Escriba el nombre del archivo de salida (por ejemplo "Vistas del Explorador"). Si solamente se especifica un nombre del archivo, el archivo de salida ser guardado en la carpeta donde el proyecto es grabado. Confirme con la tecla OK cuando usted ha escrito un nombre. 4.17. Escoger el men " el Proyecto> Generar " o presione la flecha verde en la barra de herramientas para crear la presentacin como un archivo de FLASH. 4.18. Para ve rla presentacin generada. Pulsamos sobre ver presentacin y aparecer en el navegador que tenga instalado ene l ordenador. 4.19. Tambin podemos guardar en formaot PDF (para ver en pantalla e imprimir) y en formato PostScript. CON ESTO TERMINAMOS NUESTRO TRABAJO EN WINK.

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 12

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

3. CREAR UN VIDEOTUTORIAL CON ROBO DEMO

Con esta aplicacin puedes realizar sucesivas capturas de pantalla para luego transformar su secuencia en una animacin en formato .SWF. RoboDemo permite incorporar ttulos, llamadas, cuadros interactivos, imgenes, audio (archivos .WAV y .MP3) , etc. Es una herramienta adecuada para crear tutoriales, mdulos de aprendizaje, ejemplos, etc sobre la utilizacin de un programa informtico. 3.1. Instalacin. La instalacin de Robo Demo es muy sencilla

Aparece una pantalla como la anterior y pulsamos sobre Install RboDemo Trial, en caso de contar con un nmero de serie, pulsamos sobre Buy Now y lo colocamos, o realizamos la compra por Internet. Se instala automticamente y terminado. 3.2.Primeros pasos. A. Arranca el programa sobre el que deseas realizar tu tutorial. B. Minimiza la ventana de este programa y haz doble clic sobre el icono de RoboDemo para iniciarlo. C. Clic en el botn New Movie (Nueva pelcula) para comenzar a crear una nueva. 13 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 13 nos da un mensaje de que ya ha

CREACIN DE VIDEOTUTORIALES

UA 5

D. En el cuadro de dilogo Record Movie (Grabacin de la pelcula) debes configurar las condiciones de la grabacin: Recording Size (Tamao de grabacin). Pulsa en el botn Applications (Aplicaciones) y selecciona en la lista que se muestra la aplicacin sobre la que deseas hacer el tutorial y que has iniciado en el paso 1. Otras opciones son personalizar el tamao de la ventana de grabacin Custom o bien definir pantalla completa en Full Screen. Recording Keys (Teclas de grabacin). Pulsa en el botn Select Keys ... para elegir la tecla que al pulsarla realizar una captura de la pantalla. Por defecto es la tecla <Imp Pnt> (Imprimir pantalla) . Tambin puedes definir la tecla que detendr la grabacin. Por defecto es la tecla <End>. Auto Recording (Auto Grabacin). Activa la opcin Enable Auto Recording para que RoboDemo realice automticamente una captura de pantalla en cada clic de ratn realizado sobre la aplicacin Zona de visionado.

E. Pulsa el botn Options ... para activar/desactivar las siguientes opciones:

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 14

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

Hear camera sounds during recording: Escuchar el sonido de disparo de la cmara durante la grabacin. Record keystrokes: grabar el sonido de pulsacin de las teclas. Hear keyboard tap sounds: Escuchar la pulsacin de las teclas. Enable auto recording: Permitir la grabacin automtica, es decir, capturar pantalla al hacer clic con el ratn o pulsar una tecla. Automatically insert text captions Insertar automticamente textos ilustrativos sobre las acciones de ratn ndicando el idioma Language. En este caso Spanish. Convert tooltips to rollover captions: Al situar el puntero del ratn sobre el botn de una aplicacin en estudio se muestra un cuadro de texto llamado tip. Si activas esta opcin, la informacin de este tip se muestra en un cuadro de texto cuando el usuario hace rollover sobre el botn en la propia animacin. Hide recording window, task icon o system tray icon: permite ocultar la ventana de grabacin o bien el icono de RoboDemo en la barra de tareas o la bandeja de sistema de Windows. De esta forma no aparecera en la grabacin. Esto est indicado cuando la grabacin es a pantalla completa. F. Pulsa el botn OK para confirmar las opciones de grabacin. G. Clic en el botn Start (Comenzar) del cuadro de dilogo Recording Options. Observa que RoboDemo parece desaparecer pero un icono de este programa permanece en la bandeja del sistema al lado de la hora en la barra de tareas de Windows. H. Cada vez que se produzca una captura de pantalla, automtica o manual, debers escuchar un sonido de cmara y el icono de la bandeja de sistema pemitir un parpadeo para indicar que un fotograma ha sido tomado. Durante una captura automtica tambin puedes insertar tomas manuales pulsando la tecla <Imp Pnt>. I. Cuando hayas terminado la grabacin, pulsa la tecla <End> (o aquella que hayas configurado para detener la grabacin). Tambin puedes hacer clic en el icono de RoboDemo en la bandeja de sistema. Al Al cabo de un tiempo te mostrar todos los fotogramas tomados. 15 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 15

CREACIN DE VIDEOTUTORIALES

UA 5

J. En esta pantalla es posible Copiar/Pegar/Borrar un fotograma haciendo clic derecho sobre l y seleccionado Copy Frame/Paste Frame/Delete Frame en el men contextual que se despliega. Tambin se puede pulsar sobre un fotograma y elegir una de estas opciones en el men de la columna izquierda Frame Tasks. K. K. Para aadir ms fotogramas pulsa el botn Insert new frames (Insertar nuevos fotogramas) situado en la columna izquierda Frame Tasks. En el cuadro de dilogo Record Movie, elige la opcin Record frames at the end of this movie (Grabar fotogramas al final de esta pelcula) o bien Record frames and insert from the current frame (Grabar fotogramas e insertar a partir del fotograma actual). Pulsa el botn Start para reanudar la grabacin. Al finalizar la grabacin se regresa a la pantalla de RoboDemo que muestra los fotogramas de la pelcula.

L. Para configurar la duracin de los fotogramas en la pelcula final, selecciona Movie > Preferences (Pelcula > Preferencias). En la lista desplegable Default speed (velocidad por defecto) elige la duracin en segundos de cada fotograma. Clic en OK Salvador Alcaraz Prez- Epapiros2003 S.L. Pgina 16

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

M. Para asignar sonido a un fotograma, clic sobre l para seleccionarlo y pulsa el botn Audio en la columna izquierda Frame Tasks.

N. En el cuadro de dilogo Record Audio puedes:

17 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 17

CREACIN DE VIDEOTUTORIALES

UA 5

Asociar al fotograma el sonido de un archivo externo: botn Import para abrir un archivo WAV o MP3. Grabar audio directamente: botn Record para hablar por el micrfono. Pulsa el botn Stop para concluir. Todos los sonidos se convierten a MP3. Eliminar audio: botn Clear situado en la botonera de grabacin y reproduccin. O. Elige File > Export, selecciona la opcin Flash Movie y pulsa Next>. A continuacin teclea el nombre en la casilla Filename , define la carpeta donde vas a guardarlo pulsando Browse y clic en Save. Esta pelcula se guardar en un archivo con formato SWF.

Salvador Alcaraz Prez- Epapiros2003 S.L.

Pgina 18

CREACIN DE MANUALES PARA CURSOS DE FORMACIN

2012

4. Recursos
Para poder seguir de manera adecuada esta Unidad de Aprendizaje necesitamos disponer de los siguientes recursos: Ordenador personal con cualquier sistema operativo y requisitos bsicos: Suficiente espacio en disco, sonido, grfica de calidad media y procesador de gama baja. Conexin a Internet: Una conexin a Internet (preferiblemente ADSL, pero puede servirnos cualquiera) para acceder a los recursos on-line. Navegador Web con plugin para visionar animaciones en formato Flash. En caso de no tener activos los plugins de Flash , se puede obtener el software necesario para ello de manera gratuita desde la Web http://get.adobe.com/es/flashplayer/ o directamente como complemento del navegador. Software: RoboDemo, Wink y Exe-Learning.

19 Salvador Alcaraz Prez- Epapiros2003 S.L.) Pgina 19