WINK

MANUALS CAMPUS EXTENS

Universitat de lesIlles BalearsUIB EXTENSCAMPUS

U I B V I R T U A L

Creació de tutorials i presentacions basats en la video-captura de la pantalla de l'ordinador

Unitat de Suport Tecnicopedagògic - CAMPUS EXTENS Universitat de les Illes Balears. Edifici Aulari. Ctra. de Valldemossa Km. 7.5. 07122 Palma (Illes Balears) Primera edició: abril 2010

Aquesta obra està subjecta a una llicència CC - Reconeixement-No comercial-Sense obres derivades 3.0

<http://creativecommons.org/licenses/by-nc-nd/3.0/es/deed.ca>

Índex  1. Introducció  2 2. Requisits i instal∙lació de Wink  3 2.1. Instal∙lació  3 2.2. Posar el programa en espanyol.  4 

3. Àrea de treball de Wink  5 4. Com realitzar una presentació amb Wink  6 4.1. Obrir aplicacions  6 4.2. Crear projecte nou  6 4.3. Elecció de la finestra de treball  8 4.4. Captura de pantalles  9 

5. Guardar projecte  10 6. Treballar sobre la finestra principal de Wink  10 6.1. Elecció de les pantalles definitives del projecte Wink  11 6.2. Definir les propietats dels frames.  11 6.2.1. Cuadro de text  12 6.2.2. Afegir botó d'avanç  12 6.2.3. Avanç automàtic  13 6.2.4. Formes predefinides  13 6.2.5. Altres  15 

7. Generar la presentació en format Flash  15 7.1. Configurar projecte  15 7.2. Generar projecte  17 7.3. Veure projecte  18 

8. Exportar projecte  18 

1. Introducció  

Wink és una eina gratuïta per crear tutorials i presentacions basats  en la video‐captura de la pantalla del nostre ordinador. Ens permet realitzar una pel∙lícula (Flash) en la que es capturi tot  el  que  fem  en  pantalla  (o  una  àrea  d'ella).  També  permet  posar  en  les  captures anotacions, afegir títols, caixes de text, botons de desplaçament, etc. la qual cosa permetrà que l'usuari pugui interactuar amb la presentació. La possibilitat de crear tutorials o apunts usant  una  presentació  interactiva  és molt  interessant  des  del  punt  de  vista  pedagògic. Ensenyar i aprendre usant aquests materials pot resultar molt més agradable per als nostres alumnes. 

El  resultat  de  la  captura  ho  podrem  exportar  com  un  animació  en  format  swf  (Flash), PostScript, PDF o HTML (d'aquesta manera podem usar‐ho com si es tractés d'un capturador de pantalles) 

Per saber què es pot fer amb ell es poden veure els tutorials disponibles en la secció d'Ajuda del programa. 

L'avantatge respecte a CamStudio, és que Wink genera contingut en format swf (el format de Flash) la qual cosa ho fa molt més lleuger i permet una interactivitat molt major que en un vídeo tradicional.  

L'eina  més  completa  i  potent  del  mercat  per  fer  vídeo‐captura  de  pantalla  és  Adobe Captivate  si bé  les  llicències d'ús no  són gratuïtes. Per  fer desenvolupaments avançats el GAT disposa de llicència de Captivate, però per al professorat que vulgui una eina senzilla i gratuïta per fer els seus propis desenvolupaments recomanem Wink.  

Més informació en els següents enllaços: 

Pagina oficial de Wink  

http://www.debugmode.com/Wink/ 

 

Página oficial de Captivate  

http://www.adobe.com/products/captivate/ 

 

 

2. Requisits i instal∙lació de Wink 

Wink és una aplicació que pot executar‐se tant en Windows com en Linux. No presenta cap exigència  especial  respecte  a  processador  o  memòria,  però  sí  que  fa  recomanacions respecte  a  la  resolució de  pantalla,  aconsellant  que  sigui  igual  o  superior  a  800x600. No obstant  això,  es  poden  fer  captures  de  pantalla  a  640x480,  però  es  disposarà  de menor espai per treballar. 

La  instal∙lació no presenta  cap dificultat. Wink es distribueix  com un  fitxer  zip que  inclou l'instal∙lador.  L'únic  que  caldrà  fer  serà  descomprimir  l'arxiu  en  un  directori  temporal  i executar l'instal∙lador. Posteriorment, es podrà esborrar tant l'instal∙lador com el fitxer zip. 

2.1. Instal∙lació 

Els passos són: 

Baixar  el  fitxer  Wink15.tar.gz  que  conté  el  programa  des  de http://www.debugmode.com/wink/download.php 

 

Descarregarem el  fitxer  zip  i un  cop extret  cercarem el  fitxer  installer.sh  i  fem doble  clic sobre ell. 

En la finestra que apareix polsem el botó Executar 

 

Veurem que  s'ha creat un nou directori, de nom Wink, que conté  l'aplicació  i documents d'ajuda en pdf.  

Per executar el programa accedim al directori que conté l'aplicació i fem doble clic sobre el fitxer  Wink.  Notar  que  si  desitgem  desinstal∙lar‐lo  només  hem  de  fer  doble  clic  sobre uninstall.sh 

2.2. Posar el programa en espanyol.  

Inicialment  Wink  està  en  anglès,  per  posar‐ho  en  castellà  anem  al  menú  File‐Choose Language‐Spanish 

 

 

Tanquem el programa i en tornar a obrir‐ho trobarem tots els menús en castellà.  

3. Àrea de treball de Wink 

L'àrea de treball es divideix en tres grans zones 

 

 

4. Com realitzar una presentació amb Wink 

Per crear un primer projecte d'exemple amb Wink, se seguiran els passos següents: 

4.1. Obrir aplicacions 

Obrir l'aplicació sobre la qual realitzarem les captures amb què volem treballar i ajustar‐la a una grandària raonable que ens permeti que es vegi bé i que la grandària de cadascuna de les captures no sigui gaire gran. 

També obrim l'aplicació Wink. 

 

Finestra principal de Wink 

4.2. Crear projecte nou 

Cream un projecte nou en Wink des del menú Arxiu Nou. Apareixerà un assistent que ens guiarà en els següents passos. 

 

Finestra de l'assistent 

La primera pantalla de l'assistent demana: 

a) si es vol enregistrar so mentre es realitza la presentació o no 

b) si volem ocultar la finestra de Wink mentre s'està capturant les pantalles 

L'opció de “ocultar la finestra de Wink” és aconsellable no ocultar‐la pel fet que així podem fer les captures de forma manual (pantalla a pantalla) i veure com augmenta el nombre de frames capturats. Un vegada seleccionada  la finestra, deixem el valor de captura de frames/segon en el valor per defecte i acceptem. 

c) ens ofereix opcions per enregistrar  tota  la pantalla, només una  finestra o una regió.  

 

d) Permet determinar la freqüència de captura en frames per segon. 

 

Després de configurar la finestra de l'assistent donem al botó OK. 

4.3. Elecció de la finestra de treball 

 

Finestra de treball 

El següent és procedir a capturar les pantalles de la presentació. Hi ha dues  maneres de fer‐ho:  

a.  de  forma  manual  usant  la  tecla  Pause  cada  vegada  que  vulguem  capturar  una pantalla. 

b. es capturen totes les pantalles i moviments des que es polsa la combinació de tecles Majúscules shift + Pause fins que es torna a polsar la mateixa combinació per paralitzar. Per tornar a iniciar el procés només hem de tornar a polsar‐les. 

Consell:  la  captura  manual  permet  capturar  només  les  pantalles  que  es  desitgen  que apareguin a  la presentació, amb  la qual cosa el  treball  final és menor  (ja sé per endavant què vull incloure en ella) i la grandària dels fitxers es redueix de forma sensible. 

 

 Començament de captura de pantalles 

4.4. Captura de pantalles 

Comencem el procés de capturar les finestres. Si ho fem de forma manual, cada vegada que desig capturar una pantalla pols  sobre  la  tecla Pause  i continuo d'aquesta  forma  fins que acabo el meu treball. Notar que el comptador de captures ha augmentat fins a. Quan ja tinc el meu treball llest opto per polsar sobre Finalitzar. 

 

 

Fi de captures de pantalles 

 

 

 

5. Guardar projecte 

Abans de seguir hauríem de guardar el treball en menú arxiu / guardar com l'arxiu del qual tindrà l'extensió .wnk 

6. Treballar sobre la finestra principal de Wink 

 

Observarem que apareix en la finestra principal de Wink el projecte obert i a la part inferior del  programa  estan  les  finestres  capturades  llestes  per  treballar  amb  elles.  En  aquest moment  es pot  veure  si  s'han  capturat pantalles  repetides o  si  sobren pantalles, podent procedir a eliminar‐les si es desitja. O bé al contrari si s'observa que  falta alguna captura, podrem crear un nou projecte i copiant i enganxant inserir‐ho on ens interessi. 

Hi ha la possibilitat de retallar tots els frames (Projecte‐Retallar tots els frames) per ajustar‐los  a  la  grandària  que m'interessa.    També  hi  ha  la  possibilitat  de  Projecte‐Canviar  la grandària a tots els frames, però la pèrdua de qualitat que suposa fa decantar‐se per ajustar prèviament la grandària a què desig i intentar no usar aquesta opció. 

Podem  disposar  de  dues  barres  de  propietats,  la  bàsica  i  l'avançada.  Per  permetre  la visualització d'una o altra cal seleccionar  l'opció del menú Veure‐Barra de propietats‐Vista avançada.  

6.1. Elecció de les pantalles definitives del projecte Wink 

 

Àrea de selecció de pantalles 

 

6.2. Definir les propietats dels frames.  

Un  vegada  elegides  les  pantalles  definitives  que  formaran  part  del  projecte,  es  podrà treballar sobre cada marc per separat  (zona de propietats dels  frames). Es poden afegir a través de la barra següent: 

 

Àudio 

Imatge 

Forma predeterminada 

Quadre de text 

Botó anterior 

Botó següent 

Botó anar a URL 

Botó anar a frame  

 

Primer podem afegir un títol a cada frame i a continuació ens situem en qualsevol captura i marquem la casella corresponent en funció del que vulguem afegir.  

6.2.1. Quadre de text 

 

Per exemple optem per afegir un quadre de text i després d'Acceptar, fem doble clic sobre la caixa de text, que podrem determinar quin tipus, grandària, color de font usarem, etc. 

 

6.2.2. Afegir botó d'avanç 

Normalment, els marcs de la pel∙lícula avançaran de manera automàtica amb el retard que s'especifica en  les propietats de  la finestra. No obstant això, moltes vegades és convenient que sigui el propi usuari el que avanç o retrocedeixi. Per afegir un botó d'avanç, es polsa a l'icona correspondiente. 

Quan es polsa  la  icona de botó d'avanç,  apareix  la  icona en el marc  actiu, que es podrà col∙locar on es desitgi. 

 

6.2.3. Avanç automàtic 

Quan no es  volen posar botons d'avanç,  sinó que el que es  vol és que  algun  (o  tots) els marcs  avancin  de manera  automàtica,  s'ha  de  temporitzar  el marc,  afegint  un  temps  de permanència del marc. 

 

Temps de permanència del frame 

6.2.4. Formes predefinides 

Una  altra  característica  que  pot  ser  de molta  utilitat  és  la  possibilitat  d'afegir  una  gran quantitat de formes predefinides i fins i tot afegir formes creades per l'usuari per donar més contingut  a  les  presentacions.  Entre  les  formes  predefinides,  destaquen  els  signes d'interrogació, les marques de correcte o equivocat, etc. 

 

 

Finestra de forma predefinida 

 

 

6.2.5. Altres 

Es  poden  afegir  arxius  d'àudio  (per  posar  comentaris  sobre  el  que  s'està  fent),  formes diverses,  enllaços  a  pàgines  web  o  fins  i  tot  botons  per  anar  des  de  qualsevol marc  a qualsevol altre. 

 

Totes  les modificacions que s'hagin afegit a un marc podran ser activades o desactivades a voluntat. D'aquesta manera, es pot eliminar qualsevol element que no hagi quedat com es desitjava i es pot tornar a activar en el futur. 

 

Selecció dels components del marc 

7. Generar la presentació en format Flash 

7.1. Configurar projecte 

En primer  lloc utilitzem  la següent  icona   per configurar el projecte o menú projecte / configurar.  

 

 

En  la  pantalla  que  apareix  podem  determinar  la  velocitat  dels  frames.  El  valor  de  20 fotogrames per segon és molt elevat, així que ho anem a adequar a un valor que permeti veure la presentació sense tanta velocitat. Un valor entre 5 i 10 pot ser l'adequat per veure la simulació del moviment del ratolí. 

Si desitgem que el projecte no ocupi massa, hauríem d'optar per marcar  la casella d'Usar Paleta. Si no la marquem, el fitxer final es construirà amb una paleta de colors que inclourà tots els que hi hagi en les distintes captures amb l'augment de grandària que pot suposar. El 

millor és fer que Wink construeixi una paleta per a aquest fitxer, per a això, polsem sobre Projecte‐Editar Paleta 

 

 

Optem  per  Crear Nou,  en  la  finestra  que  apareix  a  continuació  podem  seleccionar  quin mètode usarem per crear‐la. El valor que apareix per defecte dóna  resultats  satisfactoris. Així que, Acceptem novament i després d'un parell de minuts, es crearà la nova paleta. 

 

És  hora  llavors  de  crear  ja  el  nostre  projecte,  per  a  això  polsem  sobre  la  icona  que  ens permet modificar els valors del mateix i Acceptem 

 

Quan la configuració del projecte estigui polsarem sobre el botó Acceptar.  

 

7.2. Generar projecte 

A continuació anem al menú Projecte‐Generar, o utilitzem la icona en forma de fletxa de la barra d'eines   i després d'una petita espera es crearà el nostre projecte. Per defecte, es crearan  dos  arxius  del mateix  nom  que  el  projecte  en  el mateix  directori  de  treball.  Els fitxers creats, seran: 

1. un en format html, amb el codi necessari perquè els navegadors Web interpretin de forma adequada el fitxer swf i 

2. un altre el fitxer swf amb el contingut de la presentació. 

 

 

7.3. Veure projecte 

Si desitgem veure el projecte generat, anem al menú Projecte‐Veure resultat generat, o bé 

polsarem el botó previsualitzar   Els arxius generats  seran els que es poden veure a  la figura següent. 

 

8. Exportar projecte 

A més de generar la sortida en format Flash es pot obtenir la presentació en HTML, en PDF o fins  i tot en postcript. Per a això, s'elegeix  l'opció corresponent des del menú arxiu (menú arxiu / exportar). 

 

Opcions d'exportació 

Un vegada realitzat el projecte podem elegir diverses opcions per exportar:  

a) Arxivar‐Exportar a HTML. En seleccionar aquesta opció se'ns obrirà una  finestra en què hem d'especificar el directori on guardar el projecte.  

 

També  seleccionarem  el  tipus  de  format  gràfic  que  volem  que  es  generi  en l'exportació. 

 

En el directori que seleccionem apareixerà: 

Un fitxer en format html que podrem visualitzar amb qualsevol navegador. 

Una  carpeta  on  se  situaran  les  captures  de  pantalla  en  format  gràfic  que haurem seleccionat per a l'exportació. 

b)  Arxiu‐Exportar  a  PDF  Si  ho  preferim  en  format  pdf,  en  aquest  cas  aquesta  és l'opció a elegir. 

Haurem de seleccionar la ruta i el nom del fitxer on guardar el nostre projecte. 

 

Després d'Acceptar, a  la carpeta que hàgim seleccionat estenem un  fitxer pdf amb les captures. Ja tenim per tant una forma fàcil i ràpida de crear presentacions, en un format  que  tots  els  nostres  alumnes  poden  visualitzar  i  realitzades  en  "temps rècord". 

c) Arxiu‐Exportar a PS S'aconsegueix un fitxer en format PostScript 

 

 

  

MANUALS CAMPUS EXTENS

campusextens.uib.es@campusextensUIB

http://blocs.uib.cat/campusextens

Universitat de lesIlles BalearsUIB EXTENSCAMPUS

U I B V I R T U A L