Realización del sitio

Cómo realizar la práctica.


  1. Introducción.
Al abrir el programa, encontraremos la ventana que aparece a continuación, en la que podemos distinguir cuatro zonas: la barra de menú superior con las funciones básicas del programa (1), el área para el árbol de contenidos (2), el cuadro de herramientas de edición o iDevices (3) y el área de trabajo principal (4) sobre la que encontramos dos botones que describiremos después.

Ventana de exeLearning 

En el desarrollo de esta práctica no profundizaremos en todos los recursos del programa, sólo iremos comentando los que se usan de una forma básica para la elaboración de un sitio web de contenido educativo.
 
  2. El árbol de contenidos
 

2.1.

 

La zona del árbol de contenidos aparece por defecto con la palabra “Inicio”. si hacemos “Doble clic” sobre ella, o picamos sobre el menú “Renombrar”, nos permite cambiar ese nombre por otro. En este caso, y como seguiremos el guión del archivo “Texto” (para la práctica de ensayo), lo cambiamos por el nombre “Portada”.
  El árbol de contenidos
 

2.2.

 

 

A continuación, y haciendo uso del menú “Añadir página”, de esta zona, vamos a completar el árbol de contenidos con el índice de nuestro trabajo. Nos situamos sobre “1. Inicio” y picamos “Añadir página”, inmediatamente aparece en el cuadro la palabra “Tema o Tópico”, que cambiaremos por la que deseemos siguiendo lo explicado en el apartado 1.1. Cuando hayamos terminado de estructurar el árbol, encontraremos algo parecido a lo que aparece a continuación. Los diferentes epígrafes corresponden a los apartados del  archivo “Texto” que se acompaña para la práctica.
  El árbol de contenidos
  Cuando está el cursor situado sobre la página de primer nivel Inicio se crea otra página dependiente de esta (segundo nivel). Se entiende que para crear páginas de tercer nivel hay que posicionarse sobre una de segundo nivel. En el caso de la imagen anterior, para crear el punto “3.1. Formación”, se ha situado el cursor sobre el punto “3. Historia y origen del nombre”.
  Todas las líneas del árbol de contenidos se pueden cambiar de posición y de nivel de prioridad usando los iconos con forma de flecha que hay debajo del cuadro de esa zona, cada una de ellas tiene la función que se muestra a continuación.
  Modificación del árbol de contenidos
  3. Los iDevices
 
Debajo del cuadro del árbol de contenidos se encuentra el cuadro de los iDevices (imagen de la derecha) o herramientas que permiten integrar determinadas rutinas de manera automatizada. De entre todos los que hay, en esta práctica usaremos alguno de ellos, y sobre el resto se indagará de manera personal.
Comenzaremos a construir las páginas básicas mediante el iDevice “Texto libre” que es el último del listado, pero que ofrece posibilidades de trabajo muy parecidas a cualquier editor de texto, aunque sea un poco más pobre en posibilidades de maquetación de contenidos
  Los iDevices
  3.1. Comenzamos la página de Portada
 

3.1.1.

 

Integración de texto. En esta página, como en cualquier otra, vamos a usar la herramienta “Tablas” para colocar los elementos en la posición deseada en cada página. Comenzamos por realizar un boceto en papel de la idea que tenemos para la portada del sitio, como en el ejemplo que se presenta en la figura siguiente, la llevaré a eXeLearning de la siguiente forma:
    Diseño de la portada
    a). Se slecciona “Portada” en la zona del árbol de contenidos.
    Inicio de la portada
    b). Usamos “Texto libre” en el cuadro de iDevices,  y aparecerá la ventana de edición. Podrán comprobar que tiene una barra de herramientas muy parecida a la de Word (miren bien que significa cada icono, pasando el ratón sobre ellos).
    La herramienta "Texto Libre"
    c). Seleccionamos la herramienta “Tabla” de la barra de herramientas del editor.
    Icono de Tabla
    d). Al picar sobre ella se despliega la ventana de tablas, y en ella configuramos el número de Columnas y de Filas que se necesite. Seleccionamos Alinear en la posición deseada, y ponemos el ancho de la tabla en tanto por ciento, para lo cual se escribe el número al lado el símbolo del porcentaje (90%)
El resto de variables, por ahora no es necesario tocarlo (aunque conviene mirar el contenido de las diferentes pestañas).
    Configuración de las tablas
    Al picar en “Insertar”, aparecerá la tabla (con líneas de guiones) en la ventana
    Inserción de tablas
    En las tablas podemos realizar operaciones como “Combinar celdas”, o “Separarlas”, “Insertar filas o columnas”, o “Eliminarlas” (imagen siguiente).  
    Trabajo con tablas  
    e). También podemos insertar una tabla nueva dentro de cualquier celdilla mediante el comando  “Insertar una nueva tabla” que encontramos en el menú contextual que aparece al pulsar el botón derecho del ratón sobre un elemento. Al seleccionarlo aparecerá de nuevo la ventana de dialogo de “Tablas” y volvemos a cumplimentar los mismos campos  del apartado “d)” anterior.  
    Trabajo con Tablas  
    Trabajo con tablas  
    f). Y ahora llenamos de contenidos la tabla, por ejemplo:
  • En la primera fila, el título (y lo formateamos con tamaño, tipo de letra, color...).
  • En la tabla anidada:
    • En las celdillas de la segunda columna el texto: Nombre, eMail, teléfono... y así poco a poco hasta darle la forma deseada a los contenidos.
    • En la celdilla de la derecha la foto (por ejemplo).
 
  3.1.2. Integración de imágenes  
    - Para ello usaremos el icono de la barra de herramientas (Icono "Insertar imagen") “Insertar imagen”.
  • Al picarlo aparece la ventana de diálogo para insertar imagen (imagen siguiente). Ahora seguimos los pasos (imagen siguiente): 1- Picar para abrir la ventana de exploración, 2- Seleccionamos el archivo, y 3- Al picar en “Abrir” se incluye la imagen.
  • En la ventana “Descripción de la imagen”, escribimos una breve descripción de la imagen que hemos insertado (esa descripción corresponde al cuadrito que se ve en los navegadores cuando pasamos el ratón sobre una imagen).
  • Ponemos las dimensiones (opcional, porque después se puede hacer estirando la imagen con el ratón).
  • Picamos en “Insertar”.
- Hagan esto para insertar alguna viñeta y algunos iconos (un triángulo rojo delante del nombre, y los iconos de eMail y teléfono delante de estos datos) en la página de portada que están diseñando. (Las viñetas e iconos se encuentran en el archivo “Iconos” que habrán descargado).
 
    Inserción de imagen  
    Una vez insertados estos elementos se verá la portada con un aspecto semejante a este.  
    Acabado de portada  
    Es importante salvar a menudo el trabajo realizado mediante el comando de menú “Archivo > Guardar” para no correr riesgos de perderlo por culpa de cualquier imprevisto.

¡¡¡OJO!!!, los nombres de los archivos no pueden contener acentos, ñ, espacios u otros códigos extraños; sólo caracteres del alfabeto internacional.

La extensión de los proyectos eXe es “.elp” (eXe Learning Project), una extensión que sólo es válida para trabajar con este programa.

Como todo se puede modificar permanentemente, si no gusta el diseño final se puede volver a modificar añadiendo o quitando elementos hasta que sea lo más parecido a lo deseado en principio.

La técnica para llenar de contenido el resto de páginas es la misma. Pueden  ir cumplimentando el resto con el texto y las imágenes de los archivos que les hemos preparado o con los que ha preparado cada uno/a para la  práctica personalizada.

A continuación se muestra la forma de colocar otros tipos de contenido en cualquiera de las páginas que formarán parte del sitio web.
 
  3.1.3.
Inserción de un archivo de sonido  
    Cualquier sonido que deseemos colocar en una determinada página deberá estar en formato “mp3”, que es en el que, por defecto, eXeLearning integra un reproductor propio, con lo que nos aseguramos que se va a oír en cualquier ordenador. Si el sonido no está en formato mp3 podemos convertirlo con el programa “Format Factory”, presentado en la práctica 2.  
    a). Situamos el cursor en el lugar de la tabla (o de la página) en el que deseamos que aparezca el control de reproducción del sonido y picamos en el icono “Insertar/Editar multimedia” (Icono "Inserta Multimedia") de la barra de herramientas. Aparecerá un cuadro de dialogo en el que seleccionamos: 1. Tipo de archivo, 2. En el desplegable que aparece seleccionamos “MP3 (with embedded XSPF player), 3. En la ventana siguiente picamos sobre el icono de las carpetas y se abrirá la ventana de exploración (4) para elegir el archivo. Una vez elegido, lo visualizamos en el recuadro y podemos modificar las dimensiones (5) que aparecen por defecto, aunque no es necesario, y finalmente aceptamos todo con el botón “Insertar” (6).  
    Inserción de un sonido  
    Reconoceremos que se ha insertado un archivo de sonido porque aparecerá un rectángulo como el siguiente. Los archivos de sonido no se reproducen desde dentro de exeLearning en algunas circunstancias. Hay que exportar el trabajo para poder reproducirlos (Ver apartado 3.1.8).  
    Apariencia de la inserción de un sonido  
  3.1.4.
Inserción de un archivo de vídeo  
    Los vídeos deberán estar en formato “flv”, que es en el que, por defecto, eXeLearning integra un reproductor propio, con lo que nos aseguramos que se va a ver en cualquier ordenador. Si el vídeo no está en formato “flv” podemos convertirlo con el programa “Format Factory”, presentado en la práctica 2.  
    a). Situamos el cursor en el lugar de la tabla (o de la página) en el que deseamos colocar el vídeo y picamos en el icono “Insertar/Editar multimedia” (Icono "Insertar multimedia") de la barra de herramientas. Aparecerá un cuadro de dialogo (ver imagen siguiente) en el que seleccionamos: 1. Tipo de archivo, 2. En el desplegable que aparece seleccionamos “FLV (with embedded Flow Player), 3. En la ventana siguiente picamos sobre el icono de las carpetas y se abrirá la ventana de exploración (4) para elegir el archivo. Una vez elegido, estableceremos las dimensiones (5) que aparecen por defecto, aunque no es necesario que sean exactas porque podemos manipularlas posteriormente de la misma forma que lo hacíamos con las imágenes. Finalmente aceptamos todo con el botón “Insertar” (6).  
    Inserción de un vídeo  
    Reconoceremos que se ha insertado un archivo de vídeo porque aparecerá un rectángulo con un símbolo de una película en su interior, como el siguiente. Los archivos de vídeo no se reproducen desde dentro de exeLearning en algunas circunstancias. Hay que exportar el trabajo para reproducirlos (Ver apartado 3.1.8).  
    Apariencia de un vídeo insertado  
  3.1.5.
Inserción de enlaces (Icono de "Establecer Enlace") y anclas (Icono de poner un "Ancla")  
    Son los dos elementos que permiten la interacción entre páginas o entre zonas de una misma página. Como en el caso de los vídeos, no funcionan antes de la exportación.  
    a). Las anclas. Podemos decir que son “puntos de llegada” que fijamos a voluntad para dirigirnos a ellos desde cualquier lugar del sitio Web.
Para establecer un ancla seguimos los pasos siguientes (imagen siguiente): 1- situamos el cursor en el lugar en el que deseamos poner un punto de llegada (inicio o fin de página, inicio de un determinado apartado,...) y 2- picamos sobre el icono del ancla en la barra de herramientas. 3- Aparece la ventana para poner el nombre del ancla, lo ponemos y picamos en “Insertar”.
 
    ¡¡¡OJO!!!, los nombres de los archivos no pueden contener acentos, ñ, espacios u otros códigos extraños; sólo caracteres del alfabeto internacional.  
    Inserción de Anclas  
    En el lugar en el que estuviera el cursor aparecerá un icono con un ancla indicando que ya se ha establecido el punto de llegada, que en este caso hemos llamado “P1_Intro”.  
    Ancla insertada  
    Repetiremos la operación anterior en cada uno de los lugares en los que deseemos colocar un ancla.  
    Es importante GUARDAR a continuación.  
    b). Los enlaces. Son los "puntos de partida" desde los que podemos iniciar el camino hacia la URL (dirección) de una nueva página o hacia un ancla que hayamos establecido previamente en cualquier página del sitio.
Los enlaces se pueden establecer desde una palabra, una frase, una imagen,...
 
    Veremos dos tipos fundamentales de enlaces:
  • Enlace a una página web externa. En la imagen siguiente, por ejemplo usaremos la palabra “Andalucía” para llamar a una página que hable de esta región. Los pasos son:
  • 1- Marcamos la palabra (en este caso “Andalucía”).
  • 2- Picamos el icono de enlazar (Icono enlace) en la barra de herramientas, aparecerá la ventana de los enlaces.
  • 3- En la ventanita “URL del enlace” escribimos la dirección completa de la página web, incluido el http://, en el ejemplo http://www.juntadeandalucia.es/educacion/
  • 4- En la ventanita “Destino” elegimos si la nueva ventana se abrirá en una nueva o sustituirá la actual en el menú que se despliega.
  • 5- Terminamos picando el botón “Insertar
 
    Insertar enlace  
    Al desaparecer las ventanas, la palabra “Andalucía” que estaba marcada aparecerá subrayada y con un color diferente para mostrarnos que hay un enlace oculto tras ella, tal como vemos en la imagen siguiente. Al exportar este enlace nos llevará a la página de la Consejería de Educación de la Junta de Andalucía.  
    Enlace establecido  
    ¡OJO!, es probable que en algunas versiones, los enlaces no funcionen dentro de exeLearning y haya que exportar (Apartado 3.1.8) el sitio para verlos funcionar.  
       
   
  • Enlace a un ancla situada en cualquier lugar de nuestra web. En la imagen siguiente usaremos el punto “2. Situación y características” del índice de la página para ir a la página correspondiente. Los pasos son:
  • 1- Marcamos las palabras del punto “2. Situación y características”.
  • 2- Picamos el icono de enlazar (Icono enlace) en la barra de herramientas, aparecerá la ventana de los enlaces.
  • 3- En la ventanita “Anclas” picamos y se desplegará otra ventanita con las anclas disponibles (precedidas siempre de un símbolo “#”. Buscamos al final de los renglones el símbolo y el nombre del ancla, en nuestro caso “....#situacion” y lo marcamos.
  • 4- En la ventanita “Destino” elegimos si la nueva ventana se abrirá en una nueva o sustituirá la actual en el menú que se despliega.
  • Terminamos picando el botón “Insertar
 
    Enlace a un ancla  
    Al desaparecer las ventanas, la frase “2. Situación y características” que estaba marcada aparecerá subrayada y con un color diferente para mostrarnos que hay un enlace oculto tras ella, tal como vemos en la imagen siguiente. Al exportar este enlace nos llevará a la página dos de nuestro sitio Web.  
    Enlace insertado  
    ¡OJO!, es probable que en algunas versiones, los enlaces no funcionen dentro de exeLearning y haya que exportar (Apartado 3.1.8) el sitio para verlos funcionar.  
       
  3.1.6.
 Insertar actividades de Ardora  
    Las diferentes actividades realizadas con Ardora podemos incluirlas en cualquier lugar de nuestras páginas web. Para ello situaremos el cursor en el lugar de la página en el que deseamos que aparezca la actividad, y realizaremos el siguiente proceso:  
    a). Localizamos la carpeta o carpetas en las que tenemos las actividades publicadas, esto es, tendremos que ver los tres archivos de cada una de ellas.  
    Ventana de exploración  
    b). Usaremos el iDevice de exeLearning “Applet de Java”, al picar en él aparecerá una pantalla como la siguiente y en la que iremos realizando la siguientes operaciones.
  1. Picamos en “Agregar archivos”.
  2. En la ventana de exploración buscamos la carpeta donde los tengamos y seleccionamos el archivo con la extensión “.jar” de la actividad que deseemos y , al picarlo, aparecerá su nombre en la ventana.
  3. A continuación picamos en “Cargar” (esto no se nos puede olvidar). Aparecerá el nombre del archivo en la parte inferior del cuadro.
 
    Insertar "Applet de Java"  
    Volvemos a la carpeta en la que están los archivos y abrimos el “.htm” de la actividad con el Bloc de notas (Botón derecho del ratón>Abrir con>Bloc de notas).  
    Abrir un archivo "htm"  
    4. Veremos una líneas de código, buscamos a través de ellas, copiamos el trozo que va desde “<APPLET ........... hasta ...../APPLET>” incluidos los ángulos, y lo pegamos en el cuadro del “Código del Applet”.  
    Copiado del código del Applet  
    Pegado del código del Applet  
    5. Picamos sobre la tilde verde y veremos la actividad incrustada en la página Web.  
    6. Guardamos.  
    Debido a que Ardora usa una versión de Firefox diferente de la que podamos tener en nuestro ordenador, es posible que en algunos ordenadores aparezca un error y no podamos ver la actividad incrustada en exeLearning. Eso no indica que lo hayamos hecho mal y no impide que una vez exportado el trabajo se pueda ver correctamente.  
       
  3.1.7.
La pestaña “Propiedades”  
    La pestaña “Propiedades” consta de tres subpestañas:  
   
1. Paquete. Esta pestaña está destinada a introducir información acerca del Proyecto, personalizar la denominación de los diferentes niveles de páginas e insertar alguna imagen que sirva como encabezado del módulo.
 
    Subpestaña "Paquete" de las Propiedades  
   
2. Metadata. Para agregar los metadatos (información específica sobre la estructura y contenido del módulo). Estos datos son esenciales para la catalogación, recuperación y despliegue del contenido en los sistemas de gestión del aprendizaje (LMS) y en los repositorio
3. Exportar. Permite algún pequeño ajuste relacionado con la exportación como objeto SCORM.
 
  3.1.8.
Finalizar. Exportar el trabajo  
    Los formatos de exportación que permite actualmente exeLearning son los siguientes:  
    Finalizar - Exportar  
   
  1. Common Cartridge. Nuevo estándar de contenidos digitales de aprendizaje basado en especificaciones ya existentes que será compatible con los formatos SCORM anteriores.  Se genera un solo archivo comprimido con todos los ficheros que contiene el objeto; pero además, añade información adicional sobre el contendio y las características del mismo. Esta información se guarda en el fichero "imsmanifest.xml", que describe las características del objeto, permitiendo su clasificación en un repositorio y su intercambio entre portales LMS, que trabajen con este estándar.
  2. Paquete SCORM 1.2. Genera también un archivo comprimido que cumple con las normas de este estándar y que permite incorporar el objeto a entornos (LMS), por ejemplo Moodle.
  3. Paquete de contenidos IMS. Al igual que la anterior genera un solo archivo comprimido con todos los ficheros que contiene el objeto; pero además, añade información adicional estandarizada que permite clasificar los objetos e intercambiarlos en distintos gestores de contenidos y plataformas de aprendizaje.
  4. Sitio Web, Carpeta auto-contenida. Crea una carpeta que contiene todos los archivos generados (html, multimedias,...). Para ver los contenidos tenemos que abrir el fichero "index.html" en el navegador.
  5. Sitio Web, Fichero zip. Crea la misma carpeta auto-contenida pero comprimida en un solo fichero con formato ".ZIP".
  6. Página sola. Como su nombre indica, genera una Web de una sola página, es decir sin posibilidad de utilizar el menú de navegación que aparece a la izquierda. Puede ser útil para generar posteriormente un fichero con formato PDF, en el caso de que queramos imprimir todo.
  7. Archivo de texto. Genera un archivo con el texto sin formato que contiene el objeto.
  8. Formato de notas IPOD. Genera un archivo "index.linx" con su correspondiente carpeta para verlo en una IPOD.
 
    Para esta práctica elegimos la opción: "Sitio web > Carpeta auto-contenida". Se genera entonces una carpeta con el mismo nombre del trabajo en el lugar elegido, sin necesidad de poner ningún nombre.  

       

Obra colocada bajo licencia Creative Commons Attribution Non-commercial Share Alike 3.0 License