C reaci ón de con t en i dos edu cat i vos con exel earn i n g

27/8/2020 Creación de contenidos educativos con exelearning

localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/ 1/32

Creación de contenidos educativos con exelearning

Editor de Texto

TinyMCE es el editor de texto WYSIWYG para HTML de código abierto utilizado eneXeLearning. Su versión simplificada es la que aparece por defecto en eXeLearning.

Si deseamos que se muestren más utilidades deberemos hacer clic en el botón

montrándonos este nuevo aspecto:

A continuación te mostraremos las capacidades de edición que presenta.

Herramientas del editor

http://www.tinymce.com/

https://es.wikipedia.org/wiki/WYSIWYG



Editar Insertar Formato Tabla Utilidades

Menú principal

En el menú principal del editor de textos, encontraremos todas las funcionalidades que nose encontrarán en los iconos de las filas inferiores.

Editar

Insertar



Formato

Tabla



¿Quieres saber más?

Podremos seleccionar palabras con el ratón y luego aplicarles el formato haciendo clic enel icono del editor o por el contrario, seleccionar el formato en el editor y escribir (se nosmantendrá el formato seleccionado).

Opciones:

Utilidades

Primera fila

En la primera fila encontraremos las herramientas necesarias para la edición de los textos,negritas, tipos de textos y color.



Negrita (Ctrl+B), cursiva (Ctrl+I).

Formato: nos permite utilizar diferentes estilos en el proyecto. Si no se especifica elestilo de la fuente, vendrá determinado por el estilo que se haya seleccionado. Tamaño de la fuente. si no se especifica el tamaño de la fuente, vendrádeterminado por el estilo que se haya seleccionado. Tipo de letra. si no especificamos ninguno, se utilizará el tipo de letra del estiloseleccionado.

Color del texto o color de fondo. Pulsando sobre las pequeñas flechas a la derecha delos iconos, podemos seleccionar el color del texto o el color del fondo.


Su funcionamiento es similar al de cualquier procesador de textos.

Opciones:

Alineación: nos permite la alineación de un párrafo a la

izquierda, centrado, a la derecha o justificado.

Despejar: fuerza un salto de línea.

Segunda fila

En esta fila nos encontraremos los elementos fundamentales para formatear textos einsertar listas, enlaces, sangrías y citas. Además los botones de despejar y añadir unpárrafo al final nos serán de mucha utilidad cuando usemos el editor de una maneraavanzada.



Párrafo al final: añade un párrafo al final del cuadro de texto.

Listas: nos facilita la creación de listas con viñetas (círculo, disco y

cuadrado) y ordenadas (alfabeto y numérico).

Listas de definiciones: nos permite crear un listado de términos o conceptos en el

cual la definición o explicación de los mismos se encuentra oculta. Podremos visualizarcada definición o explicación haciendo clic en la definición o utilizando el icono + paramostrarlas todas a la vez. En este vídeo podemos ver cómo se crea.

Insertar / quitar hipervínculo: nos permite enlazar (o quitar un enlace) de

una página Web (por ejemplo eXe Learning) o de un fichero. eXe nos da la posibilidad deintroducir un título para el enlace y decidir si se verá en la página actual o en una nuevapágina.

https://www.youtube.com/embed/i_XD1SzimAk

Cedec. Crear un enlace (CC BY)

Sangría: nos permite el desplazamiento de párrafos completos aumentando o

disminuyendo la sangría.

Cita y cita con autoría: nos permite una vez seleccionado un párrafo,

mostrarlo como una cita (cita con autoría hará, dependiendo del estilo, un efecto desangrado a la derecha e izquierda).


Tercera fila

En la última fila nos encontraremos las herramientas necesarias para la inclusión detextos de otras procedencias, códigos, efectos y elementos multimedia.

https://www.youtube.com/watch?v=Ya1YB33LTTk

http://exelearning.net/

https://www.youtube.com/embed/i_XD1SzimAk

https://cedec.intef.es/

https://youtu.be/i_XD1SzimAk

http://creativecommons.org/licenses/?lang=es



El editor de eXeLearning facilita la introducción de textos, efectos y elementos multimedia.Los efectos incluidos en el editor harán los contenidos más dinámicos.

Opciones:

Deshacer / Rehacer: nos permite deshacer (Ctrl + Z) o rehacer (Ctrl + Y) el

último cambio realizado.

Cortar / Copiar: cortar nos permite cortar (Ctrl + X) el texto seleccionado (que

desaparece) para posteriormente pegarlo. La opción de copiar nos permitirá copiar el textoseleccionado en el portapapeles.

Pegar / Pegar texto sin formato: nos permite pegar texto copiado en la web o

en un documento de texto.

Embeber código: permite embeber código HTML.

Código como texto: útil para pegar código como texto. También permite resaltar

automáticamente la sintaxis de diferentes lenguajes de programación.

Marcado matemático: nos permite introducir fórmulas en LATEX.

GIF

Bocadillos: nos permite introducir bocadillos o tooltips

Ventana de diálogo: nos da la opción de introducir una ventana con información

adicional

Efectos: nos permite crear varios efectos en nuestros contenidos, acordeón,

pestañas, ...

Insertar / editar imagen: facilita la inserción de imágenes. Pestañas:

E=MC2

http://es.wikipedia.org/wiki/LaTeX

http://localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/eXe_LaTeX_math_0.gif



General: permite introducir una imagen mediante una URL o con elarchivo de la misma y su previsualización. Por cuestiones deaccesibilidad, será recomendable introducir la "Descripción de laimagen" y un "Título".Avanzado: alineaciones y estilos.Título y reconocimiento: nos permite referenciar la autoría,procedencia y licencia de la imagen.

https://www.youtube.com/embed/FR1pIlazvXs

Cedec. Insertar una imagen (CC BY)

Insertar / editar medio embebido: permite la inclusión de elementos multimedia,

vídeos, audios, Youtube... Podemos encontrar ejemplos concretos de cómo insertarmateriales de SlideShare, ISUU, Scratch, documento de Drive, etc. en este apartado delmanual exe 2.0.

General: permite introducir un elemento multimedia mediante una URLo con el archivo de la misma, indicando tipo de elemento, proporciones yotras opciones de reproducción.Código: permite la inserción de un elemento multimedia publicado enotra plataforma mediante el código ofrecido por la misma. Título y reconocimiento: nos permite referenciar la autoría,procedencia y licencia del vídeo.Atributos: permite modificar el formato mediante código.

https://www.youtube.com/embed/hwec_nKNCTQ

Cedec. Insertar un vídeo (CC BY)

Notación musical ABC: introduce notación musical en formato ABC y visualiza la

partitura generada. También permite escuchar el audio en un reproductor MIDI.

Editar código fuente HTML: editor avanzado de código HTML.


https://cedec%2Cintef.es/



https://exelearning.net/html_manual/exe20/trucos.html







Pantalla completa: nos permite visualizar el contenido que estamos editando a

tamaño de pantalla completa.

¡Ojo con lo que pegas!

En eXeLearning podremos pegar cualquier contenido textual de una web o documento cuyalicencia nos lo permita. Sin embargo, y dadas las medidas de seguridad de nuestrosnavegadores, tendremos que utilizar las teclas Ctrl+V para pegar dicho contenido.

Para conseguir un resultado óptimo, deberemos tener en cuenta los botones de pegado deque disponemos y las diferencias que existen entre las distintas formas de pegar.

Nos permite pegar (Ctrl + V) del portapapeles el texto previamente copiado o

cortado. Debemos tener en cuenta que en esta modalidad de pegado, copiaremos elcódigo "basura" del documento original lo que podrá darnos problemas posteriormentea la hora de modificar el formato o texto pegado. Para limpiar este código,seleccionaremos el texto y utilizaremos la opción "Limpiar formato" del menú principal> Formato.

IMPORTANTE: se pegarán las imágenes copiadas utilizando la opción de pegado(Ctrl + V)

Pegar con / sin formato: esta modalidad de pegado es útil cuando copiamos

(o cortamos) desde una página web y queremos pegar el texto pero NO losformatos y estilos de origen.

Haremos una pequeña práctica para observar las diferencias.

Pegar con / sin formato.

1. Abre el archivo miarchivo2.elp que has creado en la actividad anterior (puedeshacer doble clic sobre él)

2. Crea un iDevice "Texto libre" en el nodo "Formateamos texto"3. Copia (Ctrl+C) los tres párrafos de texto de esta web: Disartria

4. Haz clic en el icono "Pegar con / sin formato" en el campo de texto del iDevice.

Una vez terminado, haremos clic en el botón para ver el resultado5. Guarda los cambios. (Archivo > Guardar)

http://descargas.pntic.mec.es/cedec/atencion_diver/contenidos/dificultades/disartrias/index.html



Mostrar retroalimentación

¿Has perdido los enlaces?

Recuerda que "Pegar sin formato" pega el texto pero no guarda los formatos, los enlaces nilos estilos de origen.

PERO: te asegura que el texto que estás pegando es limpio desde el punto de vista deHTML. No te dará problemas si quieres darle formato.

Mostrar retroalimentación

Recuerda, Pegar pega el contenido copiado con formato, pero en ocasiones elformato pegado puede originarnos resultados extraños. Recuerda seleccionar eltexto pegado, limpiar el código basura y el formato en las partes que no son de tugusto.

En el botón HTML verás si has arrastrado código indeseado.

Efectos Lightbox

Pegar.

1. Abre el archivo miarchivo2.elp que has creado en la actividad anterior (puedeshacer doble clic sobre él)

2. Crea un iDevice "Texto libre" en el nodo "Formateamos texto"3. Copia (Ctrl+C) los tres párrafos de texto de esta web: Disartria 4. Pega en el campo de texto del iDevice utilizando las teclas Ctrl+V. Una vez

terminado haremos clic en el botón para ver el resultado5. Guarda los cambios. (Archivo > Guardar)

Ejemplo: imagen - imagen Ejemplo: texto - vídeo

Ejemplo: galería de imágenes y vídeos

El efecto Lightbox nos permite hacer que, al pinchar en un texto o imagen, se abra unacuadro de diálogo con una imagen, un vídeo o un audio. Veamos algunos ejemplos.

http://descargas.pntic.mec.es/cedec/atencion_diver/contenidos/dificultades/disartrias/index.html



Ejemplo de efecto LightBox sobre imagen. Al hacer clic muestra una imagen.

El vídeo de eXeLearning nos describe la herramienta.

Ejemplo de efecto LightBox sobre imagen. Al hacer clic muestra un vídeo.

Ejemplo de efecto LightBox sobre imágenes y vídeo en galería.

Ejemplo: imagen - imagen

Ejemplo: texto - vídeo


http://localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/actividad_generica_exe.png

https://www.youtube.com/watch?v=cI61i-fgkek&list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&index=1

http://localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/actividad_generica_engranaje.png

http://localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/actividad_generica_estrella.png




Quiero ver el vídeo

https://www.youtube.com/embed/uVWkfTGnaDk

Cedec. Efecto Lightbox sobre imagen (CC BY)

Quiero ver el vídeo

https://www.youtube.com/embed/iOsCSpQctlM

Cedec. Efecto lightbox a vídeo (CC BY)

¿Cómo lo hacemos?

Imagen a imagen:

1. Insertar la imagen2. Hacer clic sobre la imagen insertada e insertar un enlace3. En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción

Lightbox

Imagen o texto a vídeo:

1. Insertar la imagen o escribir el texto2. Hacer clic sobre la imagen insertada o sobre el texto a enlazar e insertar un enlace3. En dirección de hipervínculo, pegamos la URL del vídeo de YOUTUBE4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción

Lightbox

Galería de imágenes y vídeos:

1. Insertar imágenes











Efectos FX: acordeón

2. Hacer clic sobre cada imagen insertada e insertar un enlace3. En dirección de hipervínculo, examinamos y adjuntamos de nuevo la imagen

o pegamos la URL del vídeo de YOUTUBE4. En la pestaña Avanzado > Relación página a destino seleccionamos la opción

Lightbox por cada una de las imágenes5. Abrimos el editor de código fuente y ponemos un mismo número entre corchetes a

cada etiqueta rel="lightbox"

Así tendríamos que si la secuencia es:

El resultado sería:

<a href="actividad_generica_engranaje.png" rel="lightbox" title=<img src="actividad_generica_engranaje.png" width="200" height="<a href="actividad_generica_estrella.png" rel="lightbox" title="<img src="actividad_generica_estrella.png" width="200" height="2<a href="https://www.youtube.com/watch?v=cI61i-fgkek&list=PLindex=1" title="Vídeo de eXeLearning" rel="lightbox"><img src="actividad_generica_exe.png" width="200" height="200" /

1234567

<a href="actividad_generica_engranaje.png" rel="lightbox[1]" tit<img src="actividad_generica_engranaje.png" width="200" height="<a href="actividad_generica_estrella.png" rel="lightbox[1]" titl<img src="actividad_generica_estrella.png" width="200" height="2<a href="https://www.youtube.com/watch?v=cI61i-fgkek&list=PLindex=1" title="Vídeo de eXeLearning" rel="lightbox[1]"><img src="actividad_generica_exe.png" width="200" height="200" /

1234567

El botón nos permite crear varios efectos en nuestros contenidos.



El efecto "Acordeón" dispone el contenido dentro de una lista que puede ser mostrada ycolapsada haciendo clic en cada título.


Ejemplo: imagen - vídeo


¿Cómo lo hacemos?

Crear un efecto tipo acordeón será muy sencillo. Para ello seguiremos los siguientespasos:

1. Haremos clic en el botón del editor.

2. En la ventana que se muestra, seleccionaremos la opción "Acordeón".

3. Se creará una caja con dos encabezados (que podremos editar para poner el títuloque deseemos) y dos espacios para escribir contenido a mostrar o colapsar.Podremos editarlo e incorporar cualquier tipo de recurso multimedia.



Quiero saber más

Una vez creado el efecto, siempre podremos cambiar el tipo de efecto a mostrar, sicolocamos el cursor en el efecto y hacemos clic en el botón FX.

Efectos FX: pestañas

4. Para crear un nuevo elemento de la lista, escribiremos el título que queramosincorporar y el contenido deseado dentro de la caja FX creada. Marcaremos el título yseleccionaremos la opción de formato "Encabezado 2".

https://www.youtube.com/embed/k6vTRdGh53s

Cedec. Crear efectos acordeón, pestañas... (CC BY)

Ejemplo: imagen - imagen Ejemplo: imagen - vídeo



El efecto "Pestañas" permite cambiar rápidamente lo que se está viendo sin necesidad decambiar de página.
















...

¿Cómo lo hacemos?

Crear un efecto tipo acordeón será muy sencillo. Para ello seguiremos los siguientespasos:


2. En la ventana que se muestra, seleccionaremos la opción "Pestañas".






Quiero saber más

Una vez creado el efecto, siempre podremos cambiar el tipo de efecto a mostrar, sicolocamos el cursor en el efecto y hacemos clic en el botón FX











Efectos FX: paginación


El efecto "Paginación" permite cambiar rápidamente lo que se está viendo sin necesidad decambiar de página.

1 2 3 ►




◄













¿Cómo lo hacemos?

Crear un efecto tipo Paginación será muy sencillo. Para ello seguiremos los siguientespasos:


2. En la ventana que se muestra, seleccionaremos la opción "Paginación".




Quiero saber más

Una vez creado el efecto, siempre podremos cambiar el tipo de efecto a mostrar, sicolocamos el cursor en el efecto y hacemos clic en el botón FX

Efectos FX: carrusel





El efecto "Carrusel" permite ofrecer información adicional aprovechando el espacio.


◄ ►
















1 2 3

¿Cómo lo hacemos?

Crear un efecto tipo Carrusel será muy sencillo. Para ello seguiremos los siguientes pasos:


2. En la ventana que se muestra, seleccionaremos la opción "Carrusel".






Quiero saber más












Efectos FX: línea de tiempo

Mostrar

— Ejemplo 1

— Ejemplo 2

— Ejemplo 3


El efecto "Línea de tiempo" permite cambiar rápidamente lo que se está viendo sinnecesidad de cambiar de página.

‒ Ejemplo de efecto LightBox sobre imagen.


‒ Ejemplo de efecto LightBox sobre imágenes y vídeo en galería.


‒ Ejemplo de efecto LightBox sobre imágenes y vídeo en galería.

¿Cómo lo hacemos?

Crear un efecto tipo Línea de tiempo será muy sencillo. Para ello seguiremos los siguientespasos:




2. En la ventana que se muestra, seleccionaremos la opción "Línea de tiempo".

3. Se creará una caja con varios encabezados (que podremos editar para poner eltítulo que deseemos) y espacios para escribir contenido a mostrar o colapsar.Podremos editarlo e incorporar cualquier tipo de recurso multimedia.

4. Para crear un nuevo elemento de la lista, escribiremos el título que queramosincorporar y el contenido deseado dentro de la caja FX creada. Marcaremos el título yseleccionaremos la opción de formato "Encabezado 2" o "Encabezado 3" según setrate.

https://www.youtube.com/embed/taAuxOdYKqY

Cedec. Efectos: línea de tiempo (CC BY)







Quiero saber más


Bocadillos (ToolTip)

Si pasas el cursor por los enlaces, podrás comprobar de lo que estamos hablando. Sí,esos efectos son los "Bocadillos o ToolTips".

Ten en cuenta que no se debe abusar de los efectos "Bocadillo". No hay que hacerlos muyextensos ni poner imágenes muy anchas. Los ToolTip solo admiten un ancho por debajo de300 px. Tenlo en cuenta.

Un tooltip (también llamada descripción emergente) es unaherramienta de ayuda visual, que funciona al situar el cursor sobrealgún elemento gráfico, mostrando una ayuda adicional parainformar al usuario de la finalidad del elemento sobre el que seencuentra.

Los tooltip son una variación de los globos de ayuda y es uncomplemento muy usado en programación y diseño, dado queproporcionan información adicional sin necesidad de que el usuario lasolicite de forma activa.

de Wikipedia

“

¿Cómo lo hacemos?

Crear un tooltip en un texto de un contenido será muy sencillo. Una vez creado el texto,seleccionamos la palabra en la que añadir información.

Elegimos una de las tres opciones disponibles (Texto, Definición o Página) y configuramosel comportamiento del bocadillo y su aspecto.

http://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuario

http://es.wikipedia.org/wiki/Programaci%C3%B3n



Lista de definiciones

Bocadillo tipo texto

https://www.youtube.com/embed/rt5AakK_v4I

Cedec. Crear bocadillo de texto (CC BY)

Bocadillo tipo definición

https://www.youtube.com/embed/18cfftKia70

Cedec. Crear un bocadillo tipo definición (CC BY)

1 2

La botón "Lista de definiciones" nos permite crear un listado de términos o conceptos en elcual la definición o explicación de los mismos se encuentra oculta. Podremos visualizarcada definición o explicación haciendo clic en la definición o utilizando el icono + paramostrarlas todas a la vez.

REA

Software Libre

eXeLearning

+ -

»

»

»











Hipervínculo (inclusión de información de ficheros)

Procomún»

¿Cómo lo hacemos?

Para crear una lista de definición debemos seguir los pasos descritos en el vídeo.

https://www.youtube.com/embed/RtAZd89O1is

Cedec. Crear lista de definiciones (CC BY)

En el caso de querer enlazar un archivo, la ventana "Insertar / editar hipervínculo" nosofrecerá la posibilidad de incluir, de manera automática, la información del fichero, sutamaño en diferentes magnitudes y su extensión.







El ahorcado

Puedes observar un ejemplo: mi archivo (png - 6.62 KB) .

El ahorcado

¿Recuerdas cómo se juega al ahorcado? Haz clic en el menú principal "Insertar > Juegodel ahorcado" y verás qué sencillo.

1. ¿Cuál es la mejor herramienta de autor para crear recursos educativos delmundo mundial?

2. ¿Cuantas patas tiene un rinoceronte?

Juego del ahorcado

http://localhost:51236/temp_print_dirs/eXeTempPrintDir_ujovfa/Editor_de_Texto/arrow.png



Licencia: licencia de software libre EUPL

Jugar

Documents

C reaci ón de con t en i dos edu cat i vos con exel earn i n g