03.06.2015 Views

Manual de Usuario de Xerte Online Toolkits

Plataforma gratuita online para la creación de materiales interactivos

Plataforma gratuita online para la creación de materiales interactivos

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

<strong>Manual</strong> <strong>de</strong><br />

<strong>Usuario</strong><br />

Crea material interactivo <strong>de</strong> aprendizaje.<br />

Autor: Enmanuel Quintero.<br />

Revisado por: Jimena Pérez.<br />

Yenny Araujo.<br />

Mayo, 2015


¿Qué es <strong>Xerte</strong>?<br />

El proyecto <strong>Xerte</strong> es una suite completa <strong>de</strong> herramientas <strong>de</strong> código abierto para<br />

<strong>de</strong>sarrolladores e-learning y para productores <strong>de</strong> contenidos interactivos <strong>de</strong> aprendizaje,<br />

dirigiéndose a aquellos que quieran crear contenido específico y más elaborado haciendo<br />

uso <strong>de</strong> algunas secuencias <strong>de</strong> comandos (Scripts). Fue <strong>de</strong>sarrollado por la Universidad <strong>de</strong><br />

Nottingham. <strong>Xerte</strong> se pue<strong>de</strong> utilizar para ampliar la funcionalidad <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong><br />

mediante nuevas herramientas para autores <strong>de</strong> contenido.<br />

<strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong><br />

<strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> es una suite gratuita basada en servidor <strong>de</strong> herramientas para<br />

autores <strong>de</strong> contenido interactivos <strong>de</strong> aprendizaje. Los materiales se pue<strong>de</strong>n crear <strong>de</strong> un<br />

modo rápido y sencillo, usando herramientas basadas en el navegador, por lo tanto no se<br />

necesita realizar ninguna labor <strong>de</strong> programación. Va dirigido a los autores <strong>de</strong> contenido que<br />

<strong>de</strong>seen elaborar su contenido con sencillos asistentes. <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> pue<strong>de</strong> ser<br />

ampliado por los <strong>de</strong>sarrolladores que utilizan <strong>Xerte</strong>, como se ha comentado anteriormente.<br />

A<strong>de</strong>más, existe un repositorio llamado Xpert. <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> (XOT) se<br />

encuentra integrado con Xpert para que sea sencillo publicar contenido abierto y que esté<br />

disponible <strong>de</strong>ntro <strong>de</strong>l repositorio Xpert. Asimismo, también existe la posibilidad <strong>de</strong> que otros<br />

autores <strong>de</strong> contenido puedan aportar recursos a través <strong>de</strong> RSS.<br />

XOT permite crear unida<strong>de</strong>s <strong>de</strong> estudio con texto, audio o ví<strong>de</strong>o a través <strong>de</strong> un<br />

sencillo proceso guiado vía web. El único requisito es estar conectado a la red y disponer <strong>de</strong><br />

un navegador, a<strong>de</strong>más <strong>de</strong> tener instalado un servidor local como WampServer o XAMPP. En<br />

este manual se explicará cómo utilizar <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>, pero primero, cómo instalar el<br />

servidor local WampServer.<br />

Se <strong>de</strong>be acotar que “<strong>Xerte</strong>” está diseñado como un software “stand-alone” instalable<br />

en el sistema operativo. Y “XOT” es una aplicación web que corre <strong>de</strong>ntro <strong>de</strong> un servidor web.


Utilida<strong>de</strong>s <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong><br />

Cualquier docente que esté interesado en crear material interactivo con una interfaz<br />

atractiva y un ámbito cómodo <strong>de</strong> aprendizaje que atraiga y motive a sus estudiantes <strong>de</strong>bería<br />

usar esta herramienta <strong>de</strong> e-learning.<br />

XOT permite crear unida<strong>de</strong>s didácticas con textos, material multimedia (audio, ví<strong>de</strong>os<br />

y fotos), navegación adaptada (columnas, presentación en acor<strong>de</strong>ón, etc.), interactividad<br />

(ejercicios <strong>de</strong> elección múltiple, verda<strong>de</strong>ro o falso, rellenar huecos, unir parejas, imágenes<br />

interactivas, etc.) juegos (<strong>de</strong> memoria, el ahorcado) y miscelánea, (mapas <strong>de</strong> Google, RSS<br />

Feed, ví<strong>de</strong>os <strong>de</strong> Youtube, presentaciones <strong>de</strong> Flickr, traducciones, etc.).<br />

A<strong>de</strong>más, permite diseñar feedback para los ejercicios interactivos, combinar los<br />

ejercicios con explicaciones en texto, presentar el objeto <strong>de</strong> aprendizaje resumiendo los<br />

puntos principales <strong>de</strong> la actividad, cerrar con una evaluación e indicar futuros puntos <strong>de</strong><br />

acción entre otros. La trascripción <strong>de</strong> los ví<strong>de</strong>os o audios se pue<strong>de</strong> incluir en una pestaña al<br />

lado <strong>de</strong>l material audiovisual que los estudiantes pue<strong>de</strong>n manipular, mostrándolo o<br />

escondiéndolo. En cada una <strong>de</strong> las páginas <strong>de</strong> la unidad, se pue<strong>de</strong>n seleccionar una serie <strong>de</strong><br />

propieda<strong>de</strong>s opcionales que incluyen imagen <strong>de</strong> fondo, diferentes tipos <strong>de</strong> menú, icono,<br />

lengua, glosario, botón <strong>de</strong> ayuda, etc. Los formatos que se aceptan son, sin embargo, algo<br />

reducidos, ya que el programa solo procesa fotos en .JPG, audio en .MP3 y ví<strong>de</strong>os en .FLV.<br />

<strong>Xerte</strong> <strong>Online</strong> Tollkits pue<strong>de</strong> utilizarse en contextos <strong>de</strong> educación a distancia, en la<br />

enseñanza presencial con la figura <strong>de</strong>l profesor o como estudio in<strong>de</strong>pendiente <strong>de</strong>ntro <strong>de</strong> un<br />

contexto <strong>de</strong> enseñanza presencial.


WampServer<br />

No se pue<strong>de</strong> ejecutar una página PHP en el equipo y verse como una página HTML,<br />

ya que el navegador (Chrome, Firefox…) no pue<strong>de</strong> ejecutar su código, así que mostrará<br />

todo. Se requiere verla a través <strong>de</strong> un servidor que sea capaz <strong>de</strong> ejecutar este código, y <strong>de</strong><br />

consultar una base <strong>de</strong> datos si es necesario.<br />

Para po<strong>de</strong>r utilizar <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>, se necesita instalar un servidor local o<br />

servidor <strong>de</strong> pruebas en el equipo que sea capaz <strong>de</strong> realizar todo lo anterior. Se va a emplear<br />

WampServer (antes conocido como WAMP). Es un servidor gratuito, sencillo <strong>de</strong> instalar y <strong>de</strong><br />

usar. Otra alternativa es XAMPP.<br />

El pack <strong>de</strong> WampServer incluye:<br />

• PHP 5.4.3<br />

• XDebug 2.1.2<br />

• XDC 1.5<br />

• PhpMyadmin 3.4.10.1 SQLBuddy 1.3.3<br />

• webGrind 1.0.<br />

Se pue<strong>de</strong> <strong>de</strong>scargar el paquete auto-instalable a través <strong>de</strong> su página web. Al momento<br />

<strong>de</strong> la creación <strong>de</strong> este manual (2015), se trabajará con la versión WampServer 2.2 <strong>de</strong> 32 bits<br />

para Windows XP.


1. Instalación <strong>de</strong> WampServer.<br />

Se necesita <strong>de</strong>scargar el instalador <strong>de</strong>s<strong>de</strong> la página <strong>de</strong> WampServer en español<br />

http://www.wampserver.es/. Existen dos instaladores, uno <strong>de</strong> 32 bits y otro <strong>de</strong> 64 bits.<br />

Una vez <strong>de</strong>scargado el archivo ejecutable (wampserver2.2e-php5.4.3-httpd2.2.22-<br />

mysql5.5.24-32b.exe) se hace doble click para proce<strong>de</strong>r con la instalación.<br />

Se hace click en Next > para continuar. Aceptar el acuerdo <strong>de</strong> licencia en la casilla “I<br />

accept the agreement” y pulsar el botón Next >.<br />

Imagen 1: Acuerdo <strong>de</strong> Licencia.


En la siguiente pantalla muestra dón<strong>de</strong> será la ruta <strong>de</strong> instalación <strong>de</strong>l programa. La<br />

opción por <strong>de</strong>fecto es en la raíz <strong>de</strong>l sistema “c:\wamp”. En cualquier caso, se pue<strong>de</strong> navegar<br />

por las carpetas <strong>de</strong>l sistema presionando en “Browse”.<br />

Imagen 2: Ruta <strong>de</strong> instalación.


En la siguiente pantalla se pue<strong>de</strong> revisar los datos que fueron elegidos anteriormente. Si<br />

son correctos, presionar en el botón “Install” para comenzar la instalación:<br />

Imagen 3: Instalación.<br />

Se <strong>de</strong>bería introducir la configuración para po<strong>de</strong>r enviar e-mails con PHP. Como no<br />

se tiene instalado un servidor <strong>de</strong> correo, <strong>de</strong>jar las opciones por <strong>de</strong>fecto y pulsar Next >.<br />

Imagen 4: Servidor SMTP y e-mail.


1.1. Ejecución <strong>de</strong>l Programa.<br />

Una vez instalado, para ejecutarlo sólo se tiene que ir a la ruta “Inicio → Todos los<br />

programas → WampServer” y finalmente en start WampServer, o utilizar su acceso directo,<br />

si el usuario lo creó durante la instalación.<br />

Nota: El programa no abre ventanas. Sólo su icono en el área <strong>de</strong> notificación (junto al reloj).<br />

WampServer está disponible en muchos idiomas. Para cambiarlo, se <strong>de</strong>be ir al área<br />

<strong>de</strong> notificación y hacer click <strong>de</strong>recho sobre el icono y seleccionar Spanish (Español) <strong>de</strong>s<strong>de</strong> la<br />

opción Language <strong>de</strong>l menú <strong>de</strong>splegable.<br />

Imagen 5: Cambiar idioma.


1.2 Localhost<br />

De una manera sencilla, localhost correspon<strong>de</strong> al nombre <strong>de</strong> dominio <strong>de</strong>l servidor<br />

local. Luego <strong>de</strong> haber instalado WAMP, se pue<strong>de</strong> acce<strong>de</strong>r al servidor local escribiendo en la<br />

barra <strong>de</strong> dirección <strong>de</strong>l navegador http:localhost/. Se visualizará la siguiente pantalla:<br />

Imagen 6: Servidor local.<br />

Esto se refiere a que se acce<strong>de</strong> a la carpeta que WampServer tiene por <strong>de</strong>fecto,<br />

establecida como localhost. La misma se encuentra <strong>de</strong>ntro <strong>de</strong> la carpeta <strong>de</strong> instalación, en<br />

una subcarpeta llamada “www”, la ruta completa sería: C:\wamp\www. Todos los<br />

documentos que estén <strong>de</strong>ntro <strong>de</strong> esa carpeta, serán accesibles por el servidor.<br />

Por ejemplo, si copiamos <strong>de</strong>ntro <strong>de</strong> “www” la carpeta <strong>de</strong>l sitio “xerte”, podríamos<br />

acce<strong>de</strong>r al sitio escribiendo “http://localhost/xerte/” en la barra <strong>de</strong> direcciones <strong>de</strong>l navegador.


WampServer se encarga <strong>de</strong> ejecutar principalmente dos servicios: Apache (para<br />

correr PHP) y MySQL (para bases <strong>de</strong> datos). Es por ello que se <strong>de</strong>ben iniciar los servicios <strong>de</strong><br />

los mismos, haciendo click en el icono <strong>de</strong>l programa en el área <strong>de</strong> notificación para mostrar<br />

el menú.<br />

Imagen 7: Menú <strong>de</strong> WampServer.<br />

Se encuentran 3 comandos bajo el título Quick Admin:<br />

Iniciar los Servicios: Intentará lanzar los dos servicios (Apache y MySQL).<br />

Detener los servicios: Parará los servicios que se estén ejecutando, por lo que el<br />

estado <strong>de</strong>l icono en la barra <strong>de</strong> tareas cambiará a wamp 0 services.<br />

Reiniciar los servicios: Parará los servicios e intentará ejecutarlos <strong>de</strong> nuevo. Se<br />

recomienda esta opción cuando exista algún problema en su funcionamiento.<br />

El comando “Encen<strong>de</strong>r” quiere <strong>de</strong>cir que el servidor <strong>de</strong> WampServer está apagado. Por<br />

lo que sólo <strong>de</strong>s<strong>de</strong> esa computadora el usuario pue<strong>de</strong> ver el contenido <strong>de</strong>l localhost. Mientras<br />

que si se encien<strong>de</strong>, se hace público ese contenido y otras personas pue<strong>de</strong>n verlo, estando<br />

disponible sólo para las personas que conozcan la IP pública <strong>de</strong> ese equipo.


2. <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> (XOT).<br />

XOT es una herramienta intuitiva y fácil <strong>de</strong> usar, por lo que profesores sin una gran<br />

formación técnica en programación pue<strong>de</strong>n crear contenidos interactivos digitales que<br />

resulten atractivos para los aprendices o estudiantes.<br />

Para comenzar, se <strong>de</strong>be ingresar a la página principal <strong>de</strong> <strong>Xerte</strong> en español en el<br />

siguiente enlace http://www.xerte.org.uk/in<strong>de</strong>x.php?lang=es y crear una cuenta para acce<strong>de</strong>r<br />

a la página <strong>de</strong> <strong>de</strong>scargas <strong>de</strong> <strong>Xerte</strong>. Presionar en “Register”.<br />

Imagen 8: Crear cuenta


En la siguiente pantalla se <strong>de</strong>ben llenar los datos correspondientes en cada campo,<br />

luego hacer click en “Register”.<br />

Imagen 9: Formulario para crear cuenta.<br />

Se <strong>de</strong>be activar la cuenta <strong>de</strong> <strong>Xerte</strong> en el correo ingresado previamente, ingresando al<br />

enlace <strong>de</strong> activación que el sitio envía al e-mail.


Luego <strong>de</strong> haber confirmado la cuenta, se <strong>de</strong>be ingresar a la página principal <strong>de</strong> <strong>Xerte</strong><br />

en el enlace anteriormente mencionado e iniciar sesión. Presionar el botón “Download” para<br />

<strong>de</strong>scargar el archivo xertetoolkits_2.1.zip.<br />

Imagen 10: Inicio <strong>de</strong> sesión.


Luego, se visualiza la página <strong>de</strong> <strong>de</strong>scargas <strong>de</strong> <strong>Xerte</strong> Community, don<strong>de</strong> se pue<strong>de</strong>n<br />

<strong>de</strong>scargar archivos.<br />

Imagen 11: Página <strong>de</strong> <strong>de</strong>scargas.<br />

<strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>: Programa informático que se emplea mediante el navegador y<br />

<strong>de</strong>l que trata este manual. Se <strong>de</strong>be ingresar a ese enlace para <strong>de</strong>scargarlo.<br />

<strong>Xerte</strong> Desktop: Herramienta <strong>de</strong> <strong>de</strong>sarrollo <strong>de</strong> escritorio para los <strong>de</strong>sarrolladores<br />

avanzados que quieran crear contenido altamente personalizado. Pue<strong>de</strong> ser<br />

embebido en <strong>Xerte</strong> <strong>Toolkits</strong>.<br />

Documents: Contiene una lista <strong>de</strong> todos los documentos <strong>de</strong>l sitio, como documentos<br />

técnicos, guías paso a paso, plantillas <strong>de</strong> planificación y otros relacionados.<br />

Tutorials: <strong>Xerte</strong> <strong>Toolkits</strong> es fácil y rápido <strong>de</strong> usar, pero como todo software se<br />

necesita saber <strong>de</strong> qué trata y que términos se utilizan. Por lo que esta sección es<br />

sobre obtener lo mejor <strong>de</strong> <strong>Xerte</strong> toolkits a través <strong>de</strong> sus posibilida<strong>de</strong>s <strong>de</strong> diseño,<br />

siguiendo algunas guías paso a paso.


Una vez abierto el enlace <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>, se visualiza la siguiente pantalla, que<br />

contiene todo lo relacionado a esta herramienta (idiomas, actualizaciones, entre otros). Se<br />

<strong>de</strong>be <strong>de</strong>scargar la última versión (2.1) haciendo click en el botón “Download” perteneciente a<br />

“xertetoolkits_2.1 Versión:2.1”.<br />

Imagen 12: Descargar <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>.<br />

Una vez <strong>de</strong>scargado el archivo “xertetoolkits_2.1.zip” se <strong>de</strong>be <strong>de</strong>scomprimir <strong>de</strong>ntro <strong>de</strong><br />

la subcarpeta “www” <strong>de</strong> WampServer (la ruta completa sería C:\wamp\www) creando una<br />

carpeta llamada “xertetoolkits_2.1”.


2.1. Instalación <strong>de</strong> XOT.<br />

Abrir el navegador (Mozilla Firefox, Google Chrome, entre otros) y visitar el enlace<br />

“http://localhost/xertetoolkits_2.1/setup” para instalarlo. Se mostrará la siguiente pantalla:<br />

Imagen 13: Instalador <strong>de</strong> XOT.<br />

Nota: Existen 2 maneras <strong>de</strong> instalarlo. Para <strong>Usuario</strong>s <strong>de</strong> XAMPP (funciona con WampServer<br />

también) y Para una Instalación Completa.


2.1.1. Para usuarios <strong>de</strong> XAMPP.<br />

Si el usuario instaló el servidor local XAMPP o WampServer. Deberá hacer click en el<br />

primer botón “Next” en “For XAMPP People.” Y se visualizará la siguiente imagen:<br />

Imagen 14: Instalación completada en usuarios XAMPP.<br />

Nota: Al finalizar esta instalación, se dará un nombre <strong>de</strong> usuario (username) y una<br />

contraseña (password) que se utilizará al momento <strong>de</strong> administrar <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong><br />

(management.php).<br />

Hacer click en el primer enlace para ingresar a la página principal <strong>de</strong> XOT.<br />

Imagen 15: Página principal <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> instalado.


2.1.2. Para una Instalación Completa.<br />

Si el usuario ha instalado XAMPP en “C:\xampp\htdocs\” ó WampServer en<br />

“C:\wamp\www\” y no ha cambiado la contraseña <strong>de</strong> “root” <strong>de</strong> MySQL, entonces pue<strong>de</strong><br />

proce<strong>de</strong>r con la instalación mencionada anteriormente, <strong>de</strong>bido a que es igualmente eficaz.<br />

Pero si ha alterado estas configuraciones, entonces tiene que proce<strong>de</strong>r como una instalación<br />

completa y tomar la ruta para usuarios no-xampp o no-wampserver.<br />

Se <strong>de</strong>be acotar que la página final <strong>de</strong> la instalación tiene muchas variables, pero las<br />

personas que lo utilicen <strong>de</strong> forma local en una unidad in<strong>de</strong>pendiente <strong>de</strong>berán seguir estas<br />

instrucciones. Abrir “http://localhost/xertetoolkits_2.1/setup” y presionar el botón “Next” en<br />

“For a full install” (ver Imagen 13). Se visualizará esta pantalla:<br />

Imagen 16: Verificaciones técnicas iniciales.<br />

La versión <strong>de</strong> PHP está verificada, y si soporta MySQL también. Pero si no están<br />

verificadas, muestra algunos consejos <strong>de</strong> cómo corregirlo. Si todo parece estar en or<strong>de</strong>n,<br />

presionar en “Next”.


En esta pantalla, si algo no está verificado con OK, será notificado en ROJO y no se<br />

podrá continuar hasta remediar la situación. Luego <strong>de</strong> reparar los problemas, presionar “Try<br />

again” para continuar la instalación. Si todo parece estar en or<strong>de</strong>n, presionar en “Next”.<br />

Imagen 17: Verificaciones <strong>de</strong> archivos <strong>de</strong>l sistema.<br />

Imagen 18: Errores en los archivos <strong>de</strong>l sistema


En las siguientes páginas, algunas <strong>de</strong> las características probadas no son siempre<br />

necesarias. En ese caso, la información será mostrada en AZUL. Se podrá continuar en esos<br />

casos.<br />

Imagen 19: Verificación <strong>de</strong> los módulos <strong>de</strong> PHP.


Luego <strong>de</strong> todas esas verificaciones, comenzará la instalación:<br />

Imagen 20: Crear la base <strong>de</strong> datos en MySQL.<br />

• Campo 1: El nombre <strong>de</strong>l host don<strong>de</strong> corre el servidor <strong>de</strong> mysql. Normalmente es<br />

localhost.<br />

• Campo 2: Nombre <strong>de</strong> la cuenta <strong>de</strong> mysql que tiene <strong>de</strong>recho <strong>de</strong> crear bases <strong>de</strong> datos.<br />

Si se utiliza XAMPP o WampServer, esto usualmente es root.<br />

• Campo 3: Contraseña <strong>de</strong> la cuenta seleccionada en el Campo 2. Para XAMPP y<br />

WampServer usualmente está vacia, es <strong>de</strong>cir, no hay contraseña establecida.<br />

• Campo 4: Si el paquete <strong>de</strong> alojamiento permite crear base <strong>de</strong> datos, se selecciona un<br />

nombre a<strong>de</strong>cuado para la misma (por ejemplo: <strong>Toolkits</strong>).<br />

• Campo 5: Es opcional. Introducir un prefijo a todos los nombres <strong>de</strong> las tablas para<br />

utilizar la base <strong>de</strong> datos en más aplicaciones web. Normalmente <strong>de</strong>jar este campo<br />

vacío.<br />

Cuando se hayan introducido los valores <strong>de</strong>ntro <strong>de</strong> los campos, hacer click en “Next“.<br />

Intentará crear la base <strong>de</strong> datos, si falla, dará mensajes <strong>de</strong> errores en la página siguiente.


En la siguiente pantalla, se <strong>de</strong>be introducir una cuenta don<strong>de</strong> el sitio usará para<br />

conectarse a la base <strong>de</strong> datos. Para usuarios <strong>de</strong> XAMPP o WampServer, se utiliza “root”<br />

como el nombre <strong>de</strong> la cuenta y <strong>de</strong>jar el campo <strong>de</strong> la contraseña en blanco.<br />

Imagen 21: Configuración <strong>de</strong> la cuenta MySQL.<br />

• Campo 1: Colocar el nombre <strong>de</strong> la cuenta <strong>de</strong> MySQL que <strong>de</strong>sea usar, normalmente<br />

es la misma que se coloca <strong>de</strong>ntro <strong>de</strong>l Campo 2 en la lmagen 20.<br />

• Campo 2: Colocar la contraseña para esta cuenta.<br />

En la siguiente pantalla se configura la cuenta <strong>de</strong>l administrador para la página <strong>de</strong><br />

administración (management.php). No se <strong>de</strong>ben olvidar los datos ingresados aquí. Pulsar<br />

“Next” para continuar a la página 3.<br />

Imagen 22: Configuración <strong>de</strong> la cuenta <strong>de</strong> administrador.


Ignorar todos los valores <strong>de</strong> dicha página (página 3), <strong>de</strong>bido a que se pue<strong>de</strong>n modificar<br />

en la página <strong>de</strong> administración, bajar hasta el final <strong>de</strong> la página y presionar “Save”. Hecho<br />

esto, <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> está finalmente instalado y se mostrará esta pantalla.<br />

Imagen 23: Instalación finalizada.<br />

Se muestra un resultado para cada uno <strong>de</strong> los valores añadidos al sistema. Cualquier<br />

error <strong>de</strong>bería <strong>de</strong> mostrarse aquí. El sitio <strong>de</strong>bería funcionar normalmente. Para cambiar<br />

cualquier valor, ir a “management.php” en localhost para abrir el administrador.


Se pue<strong>de</strong> ingresar a la Página Principal <strong>de</strong> XOT en “http://localhost/xertetoolkits_2.1/” y<br />

comenzar a utilizar el sitio.<br />

Imagen 24: Página principal <strong>de</strong> XOT instalada (versión 2.1).


2.2. Administración.<br />

La gestión <strong>de</strong> XOT se pue<strong>de</strong> realizar mediante el uso <strong>de</strong> “management.php”. Esta<br />

interfaz (web-based) se almacena en la carpeta raíz <strong>de</strong> la instalación. Para ir a esta página,<br />

se <strong>de</strong>be ingresar en “http://localhost/xertetoolkits_2.1/management.php” para acce<strong>de</strong>r a los<br />

paneles <strong>de</strong> control.<br />

Imagen 25: Administración <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> (v2.1).<br />

Se <strong>de</strong>ben ingresar el nombre <strong>de</strong> usuario (username) y la contraseña (password)<br />

establecidos en la Imagen 22 para po<strong>de</strong>r acce<strong>de</strong>r a la configuración <strong>de</strong> XOT.


Una vez iniciada la sesión, se mostrará la siguiente pantalla. La misma contiene todo<br />

lo relacionado a la configuración <strong>de</strong>l programa.<br />

Imagen 26: Paneles <strong>de</strong> Administración.<br />

Por ejemplo, <strong>de</strong>ntro <strong>de</strong>l panel “Site settings (HTML / Images)” contiene lo relacionado<br />

a la página principal <strong>de</strong> XOT. Una vez <strong>de</strong>splegado, mostrará una serie <strong>de</strong> campos los cuales<br />

albergan la apariencia <strong>de</strong>l sitio que pue<strong>de</strong>n ser modificados.


2.2.1. Cambiar el Idioma.<br />

<strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> está traducido a una variedad <strong>de</strong> idiomas, lo que hace que sea<br />

una herramienta a<strong>de</strong>cuada para los profesores <strong>de</strong> todo el mundo. Estos idiomas son:<br />

Alemán, holandés, español, francés, italiano, polaco, entre otros. Para aplicar el idioma<br />

español, se tiene que <strong>de</strong>scargar <strong>de</strong>s<strong>de</strong> la página principal <strong>de</strong> <strong>Xerte</strong> <strong>de</strong>ntro <strong>de</strong> la categoría<br />

<strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> un archivo .zip. Seleccionar “Language Packs”.<br />

Imagen 27: Apartado <strong>de</strong> idiomas para XOT.


Una vez allí, bajar y hacer click en “es-ES” cuya ban<strong>de</strong>ra sea la <strong>de</strong> España.<br />

Descargar “latest_xot_nottingham_es-ES” <strong>de</strong>bido a que es el archivo más reciente y<br />

actualizado al momento <strong>de</strong> realizar este manual.<br />

Imagen 28: Archivo <strong>de</strong>l idioma español.


Luego <strong>de</strong> haber <strong>de</strong>scargado el archivo .zip (latest_xot_nottingham_es-ES.zip), abrir la<br />

página <strong>de</strong> administración e iniciar sesión. Posteriormente, ingresar en “Language settings”<br />

haciendo click en “Show”.<br />

Imagen 29: Configuración <strong>de</strong>l idioma.<br />

Se <strong>de</strong>be examinar y seleccionar el archivo <strong>de</strong>scargado que contiene el idioma. Hecho<br />

esto, hacer click en “Install language <strong>de</strong>finition”.<br />

Imagen 30: Instalación <strong>de</strong>l idioma español.


Si se ha instalado exitosamente, mostrará el siguiente pop-up y aparecerá “Español<br />

(en-ES)” <strong>de</strong>ntro <strong>de</strong> “Manage existing Languages”:<br />

Imagen 31: Instalación completada.<br />

Imagen 32: Idiomas existentes.<br />

Guardar los datos en el botón “Save”, ubicado en la parte superior <strong>de</strong> la página.<br />

Imagen 33: Botón para guardar cambios.


Ingresar a la página <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> y seleccionar el idioma, <strong>de</strong>ntro <strong>de</strong>l menú<br />

que se <strong>de</strong>spliega.<br />

Imagen 34: Menú <strong>de</strong> idiomas (v2.1).


3. Guía <strong>de</strong> Uso.<br />

Cada una <strong>de</strong> las páginas que se crea en <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> durante el proceso, se<br />

pue<strong>de</strong> copiar y reeditar, para ahorrar tiempo y aprovechar la disposición <strong>de</strong> las activida<strong>de</strong>s<br />

en la unidad. Después <strong>de</strong> editar se recomienda hacer click en el botón Publish para guardar<br />

los cambios que se han efectuado. Una vez lista la unidad, se pue<strong>de</strong> exportar como archivo<br />

.ZIP para <strong>de</strong>spués po<strong>de</strong>r <strong>de</strong>splegarla en cualquier sitio web o como archivo .SCORM.<br />

Dentro <strong>de</strong> la carpeta raíz <strong>de</strong> XOT, existe un archivo Flash que al abrirlo se reproduce<br />

automáticamente y muestra todo lo que contiene <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>, pero la versión al<br />

momento <strong>de</strong> hacer este manual (v2.1) contiene más objetos <strong>de</strong> aprendizaje y una mejor<br />

interfaz gráfica.<br />

Existen 2 maneras <strong>de</strong> abrir el archivo (ambos en inglés), ingresando a:<br />

1. http://localhost/xertetoolkits_2.1/modules/xerte/training/toolkits.htm<br />

2. http://www.nottingham.ac.uk/toolkits/modules/xerte/training/toolkits.htm<br />

Nota: Este archivo sirve <strong>de</strong> tutorial, <strong>de</strong>bido a que contiene una serie <strong>de</strong> pasos <strong>de</strong> una forma<br />

más dinámica y rápida acerca <strong>de</strong> cómo crear un pequeño proyecto que sirva <strong>de</strong> ejemplo<br />

sobre las funcionalida<strong>de</strong>s <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>.


Una vez <strong>de</strong>ntro <strong>de</strong> la página principal <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> (cuya dirección sería<br />

http://localhost/xertetoolkits_2.1/) se pue<strong>de</strong> observar la interfaz gráfica <strong>de</strong>l programa.<br />

Imagen 35: Página principal <strong>de</strong> XOT instalada (versión 2.1).


Hacer click en <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> “Create” para crear un nuevo proyecto y darle un<br />

nombre.<br />

Imagen 36: Crear un proyecto.<br />

En el recuadro <strong>de</strong> "My Projects" (Mis Proyectos), seleccionar el proyecto creado y<br />

hacer click en “Edit” (Editar).<br />

Imagen 37: Editar el proyecto.


En la ventana que se abre (Editor <strong>de</strong> XOT), se le asigna un título al proyecto.<br />

Imagen 38: Título <strong>de</strong>l proyecto.<br />

Para agregar un objeto <strong>de</strong> aprendizaje, <strong>de</strong>ntro <strong>de</strong>l menú "Insert" se <strong>de</strong>spliegan una<br />

variedad <strong>de</strong> opciones (vi<strong>de</strong>o, imágenes múltiples, artículos <strong>de</strong> Wikipedia, presentaciones <strong>de</strong><br />

Flickr, quiz, cuadro con pestañas, archivos Flash, mapas <strong>de</strong> Google, listas interactivas y<br />

muchas opciones más). Por ejemplo, seleccionar Interactivity > Hot spot imagen y ver la vista<br />

previa <strong>de</strong>l objeto.<br />

Imagen 39: Agregar un objeto <strong>de</strong> aprendizaje.


Hacer click en el botón “…” en la mitad <strong>de</strong> la página para examinar y seleccionar una<br />

imagen <strong>de</strong>ntro <strong>de</strong> la computadora. Luego hacer click en “New HostSpot” ubicado en la parte<br />

inferior <strong>de</strong> la ventana.<br />

Imagen 40: Agregar imagen interactiva.


Se pue<strong>de</strong>n agregar opciones adicionales a cada lámina <strong>de</strong>l proyecto. Se <strong>de</strong>be hacer<br />

click en “Optional Properties” para <strong>de</strong>splegar el menú.<br />

Imagen 41: Propieda<strong>de</strong>s opcionales.<br />

Asignarle un nombre al HotSpot y luego hacer click en “Edit…”.<br />

Imagen 42: Agregar HotSpot.


En la ventana que se abre (Image Inspector), se <strong>de</strong>be seleccionar un hotspot<br />

arrastrando el cuadro <strong>de</strong> color amarillo y ampliándolo según la necesidad <strong>de</strong>l usuario. Hacer<br />

click en “Save” para guardar y cerrar la ventana luego <strong>de</strong> crear el hotspot.<br />

Imagen 43: Inspector <strong>de</strong> imagen.<br />

Hacer click en el botón “Publish” en la parte superior <strong>de</strong> la ventana para guardar el<br />

proyecto y “Play” en la parte inferior <strong>de</strong> la ventana para una vista previa. Activar “Show<br />

Language Options” para traducir diversos objetos <strong>de</strong> la página, como feedbacks y botones,<br />

por ejemplo.<br />

Imagen 44: Opciones <strong>de</strong> lenguaje y botón <strong>de</strong> visualización.


Luego <strong>de</strong> haber presionado en “Play”, se abrirá una nueva ventana don<strong>de</strong> se podrá<br />

visualizar el material creado con esta herramienta.<br />

Imagen 45: Vista previa <strong>de</strong>l objeto creado.


3.1. Exportar el proyecto.<br />

Se pue<strong>de</strong> permitir o <strong>de</strong>negar el acceso a los usuarios al material <strong>de</strong> aprendizaje<br />

creado <strong>de</strong> varias formas. Se <strong>de</strong>be ingresar a las propieda<strong>de</strong>s <strong>de</strong>l proyecto creado en<br />

“Properties” y hacer click en “Access”.<br />

Imagen 46: Acceso al proyecto (privado por <strong>de</strong>fecto).


Existen varias opciones para la visualización <strong>de</strong>l mismo. Por ejemplo, para que<br />

cualquier usuario pueda verlo <strong>de</strong>bido a que por <strong>de</strong>fecto la opción seleccionada es Privado<br />

(Private), se selecciona la casilla “Public” y hacer click en “Change Acess”. Posterior a esto,<br />

se <strong>de</strong>be ir a la pestaña “Project” don<strong>de</strong> se dará un enlace y un código para embeberlo <strong>de</strong>ntro<br />

<strong>de</strong> cualquier página web o <strong>de</strong>ntro <strong>de</strong> la plataforma Moodle.<br />

Imagen 47: Enlace y código embebido <strong>de</strong>l proyecto


Seleccionar el proyecto creado en la página principal <strong>de</strong> XOT y hacer click en el<br />

botón "Properties" en la parte superior. En la ventana que se abre se muestran todas las<br />

propieda<strong>de</strong>s <strong>de</strong>l proyecto y entre ellas la <strong>de</strong> exportarlo. Hacer click en "Export" para hacer un<br />

archivo Zip o Scorm.<br />

Imagen 48: Exportar el proyecto creado.


Como se pue<strong>de</strong> observar en la imagen, <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> permite exportar el<br />

material creado en 4 archivos.<br />

1. Despliegue en .ZIP:<br />

Se exporta para la implementación. Contiene sólo los archivos necesarios para la<br />

importación en un VLE (Virtual learning environment - Entorno <strong>de</strong> aprendizaje virtual) sin<br />

seguimiento SCORM, se peu<strong>de</strong> compartir a través <strong>de</strong> CD o USB, etc, o importar a otra<br />

instalación <strong>de</strong> XOT.<br />

2. Paquete SCORM v1.2 y Paquete SCORM 2004 tercera edición:<br />

Exportado para la implementación en SCORM. Es autónomo, en versión 1.2 o 2004 y<br />

permite el seguimiento (tracking) para el puntaje <strong>de</strong> los Quiz, por ejemplo, en el libro <strong>de</strong><br />

calificaciones <strong>de</strong> Moodle.<br />

3. Archivo .ZIP:<br />

Archivo <strong>de</strong> exportación. Copia <strong>de</strong> seguridad completa incluyendo la edición offline e ida y<br />

vuelta <strong>de</strong> regreso a <strong>Toolkits</strong> o para compartir con otros usuarios <strong>de</strong> <strong>Xerte</strong>.


3.2. Materiales creados con <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>.<br />

Para ver <strong>de</strong> una forma más <strong>de</strong>tallada los contenidos creados con esta herramienta, a<br />

continuación se <strong>de</strong>jará una lista <strong>de</strong> enlaces. Se pue<strong>de</strong> observar que <strong>de</strong>ntro <strong>de</strong> esas<br />

activida<strong>de</strong>s en XOT, tienen como principal objetivo la estimulación hacia el estudiante, para<br />

que éste participe y ayu<strong>de</strong> a tomar conciencia <strong>de</strong> su propio aprendizaje, realizando dichas<br />

activida<strong>de</strong>s <strong>de</strong> manera satisfactoria. A<strong>de</strong>más, constan <strong>de</strong> un feedback para señalar las<br />

buenas prácticas y se anima a los estudiantes a continuar realizando las mismas o a<br />

empezar a utilizar estos recursos.<br />

‣ Welcome to <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> (versión 2.1). Disponible en (inglés):<br />

http://www.nottingham.ac.uk/toolkits/play_8203<br />

‣ Isabel Allen<strong>de</strong> y su nueva novela: El cua<strong>de</strong>rno <strong>de</strong> Maya” (2012 ). Disponible en<br />

(español): http://www.nottingham.ac.uk/toolkits/play_5716<br />

‣ <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong> Start. Disponible en (holandés):<br />

http://xot.12change.eu/play.php?template_id=278<br />

‣ What's new in the latest versions of <strong>Xerte</strong> and XOT?. Disponible en (ingles):<br />

http://mitchellmedia.co.uk/xot/play_21


4.1. Versión 3.0 <strong>de</strong> <strong>Xerte</strong> <strong>Online</strong> <strong>Toolkits</strong>.<br />

El día 27 <strong>de</strong> mayo <strong>de</strong>l 2015, salió la versión 3 <strong>de</strong> XOT en fase beta. Por esa razón, el<br />

instalador <strong>de</strong> ese paquete se modifica todos los días con base a los cambios cometidos en<br />

los repositorios <strong>de</strong> GitHub. A<strong>de</strong>más, contiene una gran cantidad <strong>de</strong> nuevos <strong>de</strong>sarrollos que<br />

están consi<strong>de</strong>rando para la versión final. Muchas <strong>de</strong> estas cosas aún están sin probar (al<br />

momento <strong>de</strong> realizar este manual) y por lo tanto se <strong>de</strong>be utilizar bajo su propio riesgo, <strong>de</strong>bido<br />

a que uno <strong>de</strong> los cambios más importantes es el editor <strong>de</strong> HTML5.<br />

Se pue<strong>de</strong> conseguir en la página <strong>de</strong> <strong>de</strong>scargas <strong>de</strong> <strong>Xerte</strong> <strong>de</strong>ntro <strong>de</strong>l apartado “<strong>Xerte</strong><br />

<strong>Online</strong> <strong>Toolkits</strong>” con el nombre <strong>de</strong>: “xertetoolkits_3.0-beta” y a<strong>de</strong>más, se instala <strong>de</strong> igual<br />

manera que su versión anterior (v2.1).<br />

Imagen 49: Página principal XOT versión 3<br />

(beta).


Como se pue<strong>de</strong> observar, tiene una interfaz gráfica más amigable e interactiva que<br />

su versión anterior. Se <strong>de</strong>be acotar que no es la versión final, por lo que pue<strong>de</strong> haber errores<br />

y bugs, a<strong>de</strong>más <strong>de</strong> que pue<strong>de</strong>n cambiar aspectos <strong>de</strong> esta interfaz, entre otros, pero su<br />

naturaleza es la misma.<br />

Imagen 50: Nuevo aspecto <strong>de</strong>l Editor <strong>de</strong> XOT con HTML5 integrado.


Imagen 51: Menú <strong>de</strong>splegable para agregar diversos objetos <strong>de</strong> aprendizaje<br />

(PDF en este caso).


Imagen 52: Agregando archivo PDF.


Imagen 53: Visualización <strong>de</strong> la lámina con el archivo PDF adjuntado.


Como se pue<strong>de</strong> observar en la siguiente pantalla, se ha agregado una forma más<br />

para exportar un proyecto (Offline export).<br />

Imagen 54: Exportar el proyecto.<br />

4. Offline export. Es un paquete especial sin conexión que pue<strong>de</strong> ser usado sin<br />

conectarse. Simplemente se <strong>de</strong>be hacer doble click en el archivo “in<strong>de</strong>x.htm” alojado<br />

en el disco local o en memoria USB.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!