Herramientas avanzadas del menú expandido

Editor online

El editor online nos ofrece diferentes herramientas para que podamos dar formato a nuestros contenidos (negrita, cursiva, alineación,...) e incorporar elementos multimedia a nuestros contenidos (imágenes, vídeos, presentaciones...).

Una vez hemos accedido a la creación de un contenido vemos el editor online en su versión simplificada:Desde esta vista, podemos darle formato al texto (negrita, cursiva) y al párrafo. Podemos insertar o eliminar enlaces, añadir viñetas o listar de manera numérica, insertar imágenes, vídeos o expandir el área de trabajo.

Mostrar/ ocultar herramientas

Si queremos ver todas las funcionalidades, pulsamos en el icono "Mostar/ocultar herramientas" 

En la primera fila vemos las herramientas necesarias para darle formato al texto: negrita, cursiva, estilo, tamaño de letra, tipografía, color de fondo y color de texto.  En la segunda fila vemos las opciones de párrafo: alinear a la izquierda, centrado, izquierda, justificado, insertar salto de línea o incorporar un párrafo al final. También encontramos las opciones de insertar viñeta, lista ordenada y lista de definiciones. Así mismo aquí se encuentran los iconos de insertar o eliminar enlace, sangría a la derecha y a la izquierda y la posibilidad de citar textos en bloque o entrecomillado.En la tercera fila nos encontramos con las opciones de: deshacer, rehacer, cortar, copiar, pegar como texto, pegar fragmento HTML (embebido), insertar HTML como texto, insertar cálculo, insertar fórmula, bocadillo, ventana emergente, efectos, insertar imagen, insertar vídeo, insertar notación musical, editar código fuente y expandir el área de trabajo.  Además, desde la parte superior tenemos acceso a distintos menús desde los que encontraremos diferentes opciones: Editar, Insertar, Formato, Tabla y Herramientas.

Lista de definiciones / términos

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta herramienta nos permite crear lista de términos con sus definiciones, en las cuales, si queremos, podemos incluir cualquier tipo de recurso: imagen, vídeo, audio,...

Para comenzar a emplearla, situamos el cursor del ratón en el lugar donde queramos incorporar la lista y pulsamos en "Lista de definiciones/términos".

Al hacerlo, se abre una ventana donde podemos ver las instrucciones. Pulsamos en "OK"  Ahora vemos dos apartados:

• Término: aquí  incorporamos la palabra, concepto o término
• Definición: introducimos la definición del término.

Una vez cumplimentados los campos, para añadir un nuevo término pulsamos sobre "Lista definiciones/términos"

Aquí podemos ver un listado con cuatro términos y sus definiciones.  Una vez publicamos el contenido y lo hacemos visible en la web, la apariencia de la lista es la siguiente:Al pulsar sobre cualquiera de los términos, se despliega su definición:Si pulsamos sobre el "+"se despliegan todas las definiciones:

Si pulsamos sobre el "-" las deficiones se vuelven a acoplar (ocultar):

Bloque cita

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Para incluir una cita en un texto, seleccionamos texto de la cita (1) y después pinchamos en el icono de la "cita"(2).

El texto del contenido nos quedará como se ve en la siguiente imagen:

Cita con autor

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Situamos el cursor del ratón y pulsamos sobre "Cita con autor"

Ahora introducimos la cita y el autor.  También podemos indicar el idioma de la cita y del autor. Pulsamos sobre OK.

Vemos como queda incorporada

Insertar fragmento de HTML (embebido)

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta herramienta la empleamos para insertar vídeos, audios, presentaciones,... que estén alojados en otras páginas: Mediateca, Youtube., Slideshare,...

Para poderlo hacer en primer lugar tenemos que encontrar encontrar el código html del mismo y copiarlo. En páginas como la Mediateca o Youtube podemos encontrarlo con facilidad.

Obtener código HTML en la Mediateca

Una vez localizado el vídeo, audio, presentación... tenemos que pulsar en "Embeber" (1), seleccionamos el texto (2) y pulsamos control+c o bien botón derecho -> copiar.  Obtener código HTML en Youtube

Una vez localizado el vídeo tenemos que pulsar en "Compartir"(1) y pulsamos en el icono Insertar (2).En la siguiente pantalla seleccionamos las opciones que nos interesen y pulsamos en Copiar (3).

Para insertar un video o audio en nuestro contenido, pulsamos sobre el icono "Insertar fragmento html" de la barra de herramientas y en la ventana emergente copiamos el código y pulsamos en OK.  Tras esto, vemos en el editor del contenido el vídeo insertado.:

Insertar HTML como texto

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta herramienta nos permite insertar código HTML en nuestro contenido y que se vea este código como cualquier otro texto en nuestra página.

Para emplear esta función, pulsamos sobre "Insertar HTML como texto".   vemos una nueva ventana donde tenemos que incluir el código HTML que queremos:Además desde aquí podemos:

• Desactivar/ Activar "Incluir contenedor (mejora la presentación)": opción activada por defecto. Al tenerla activada, muestra el código que hemos incorporado dentro de una "caja" de manera que lo diferencia del resto del texto del contenido.
• Activar la opción de "Resaltar Sintaxis", al hacerlo se despliegan las siguientes opciones:
  • Lenguaje: especificamos el lenguaje empleado en el código html. 
  • Apariencia: seleccionamos si queremos que se vea claro u oscuro la "caja" donde se va a mostrar el código html. 
  • Numerar líneas: podemos marcar o desmarcar esta opción.
  • Resaltar líneas: si queremos podemos indicar las líneas del código que queremos resaltar.

Cumplimentados los campos, pulsamos en OK y el código quedará insertado:Mostramos a continuación cómo se ve este código activando o desactivando las diferentes opciones que hemos visto:

• Incluir contenedor (mejora la presentación)
• Sin incluir contenedor
• Resaltando sintaxis:

Insertar cálculo

Insertar fórmula

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Con este editor podemos incorporar al contenido fórmulas matemáticas.

Al pulsar sobre el icono de "insertar fórmula" (1), se abre una "nueva ventana" (2) donde podemos ver distintas pestañas con símbolos para construir la fórmula.

En este caso, insertamos una matriz (3) por lo que indicamos las dimensiones de la misma (3). Una vez hayamos cumplimentado todos los datos de la misma, pulsamos en "Aceptar" (4).

Insertar bocadillo

Para acceder a esta funcionalidad previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta funcionalidad nos va a permitir incorporar enlaces a nuestros contenidos pero permitiéndonos mostrar, al posicionarnos sobre ellos, una pequeña información.

Existen 4 tipos de bocadillos:

1. Texto: esta opción nos permite incorporar un enlace pero además, cuando el usuario se sitúe sobre el mismo le aparecerá un "bocadillo" en el que se mostrará el título del propio bocadillo acompañado del título para el enlace.
2. Contenido: nos permite realizar enlaces a contenidos de tipo libre que hayamos creado previamente acompañado además de una pequeña descripción.
3. Glosario: si estamos elaborando un contenido y el contenido muestra una palabra que previamente hemos incorporado en un glosario, podremos realizar un enlace a ese glosario y de manera automática, al posicionarnos sobre esa palabra, la aplicación nos mostrará la definición de dicha palabra.
4. HTML: utilidad avanzada para incluir anclas en nuestro contenido. A través de esta herramienta podremos, por ejemplo, mostrar sobre el enlace al ancla una descripción acompañado de una imagen.

Texto

Seleccionamos el texto donde queremos incluir el enlace y a continuación pulsamos sobre el icono "Insertar bocadillo":En la siguiente ventana

• "Elige un tipo" (1): seleccionamos el tipo  texto.
• "Enlace (URL) (2): dirección web donde queremos enlazar.
• "Título del enlace" (3): incorporamos una breve descripción del enlace. Es la información que se mostrará en el "bocadillo"
• "Título del bocadillo" (4): texto que aparecerá en la parte superior del "bocadillo".
• "OK" (5): pulsamos aquí para crear el "bocadillo".  Una vez hayamos publicado el contenido, al posicionarnos sobre el enlace, vemos  la información que hemos introducido en el "bocadillo" y pulsando sobre la palabra accedemos a la página que hayamos enlazado.

Contenido

Seleccionamos el texto donde queremos incluir el enlace y a continuación pulsamos sobre el icono "Insertar bocadillo":En la siguiente ventana

• "Elige un tipo (1)": seleccionamos el tipo  "Contenido"
• "Contenido" (2): pulsamos en el icono "Examinar"  Introducimos un criterio/criterios de búsqueda para localizar el contenido que queremos (y que hemos creado previamente) y pulsamos en "Buscar".

Vemos un listado con los contenidos que coinciden con nuestro criterio de búsqueda. "Seleccionamos" el que queremos:

El contenido queda seleccionado.

• "Título del enlace" (3): se autocompleta con el texto que hemos seleccionado. Podemos cambiarlo si queremos.
• "Título del bocadillo" (4): texto que aparecerá en la parte superior del "bocadillo".
• "OK" (5): pulsamos aquí para crear el "bocadillo".

Una vez hayamos publicado el contenido, al posicionarnos sobre el enlace vemos  la información del contenido libre al que hemos enlazado.

Glosario

Seleccionamos el texto donde queremos incluir el enlace y a continuación pulsamos sobre el icono "Insertar bocadillo":

• "Elige un tipo (1)": seleccionamos el tipo  "Glosario"
• "Glosario" (2): pulsamos en el icono "Examinar"
  
  
  Introducimos como criterio de búsqueda -> "Tipo de contenido" -> "Glosario" para localizar el contenido que queremos (y que hemos creado previamente) y pulsamos en "Buscar".  Vemos un listado con los contenidos que coinciden con nuestro criterio de búsqueda. "Seleccionamos" el que queremos:
  El contenido queda seleccionado.

• "Título del enlace" (3): se autocompleta con el título del Glosario. Podemos cambiarlo si queremos.
• "Título del bocadillo" (4): texto que aparecerá en la parte superior del "bocadillo".
• "OK" (5): pulsamos aquí para crear el "bocadillo".

Una vez hayamos publicado el contenido, al posicionarnos sobre el enlace si la definición está en el glosario se mostrará en el bocadillo.  

Definición

Seleccionamos el texto donde queremos incluir el enlace y a continuación pulsamos sobre el icono "Insertar bocadillo":

En la siguiente ventana

• "Elige un tipo" (1): seleccionamos el tipo Definición
• "Título del enlace" (2): incorporamos una breve descripción del enlace. Es la información NO se mostrará en el "bocadillo."
• "Término" (3): texto que aparecerá en la parte superior del "bocadillo".
• "Definición" (4); introducimos la definición del término.
• "OK" (5): pulsamos aquí para crear el "bocadillo".  Una vez hayamos publicado el contenido, al posicionarnos sobre el enlace veremos la definición que hemos incorporado en el "bocadillo".

Configuración y apariencia

Configuración:

Desde la pestaña "Configuración" podemos definir lo siguiente:

Cierre: hace referencia a cómo debe comportarse el "bocadillo" una vez nos hemos situado sobre el enlace:

• Cerrar el bocadillo automáticamente al quitar el ratón.
• Botón de cierre: el bocadillo se cierra al hacer click en él

Destino del enlace: hace referencia a cómo queremos que se abra el enlace:

• Se abre en la misma ventana
• Se abre en una ventana nueva

Apariencia:

Desde esta pestaña podemos definir la apariencia de los "bocadillos" seleccionando:

• En la parte superior podemos ver una previsualización de cómo se verá el bocadillo según las opciones que seleccionemos
• "Cambia la presentación": desplegando esta opción podemos definir el color en el que se mostrarán los bocadillos.
• "Redondeado": al marcar esta opción, los bordes del bocadillo se mostrarán redondeados.
• "Sombreado": al marcar esta opción se aplicará un sombreado a los bordes del bocadillo.

Ventana emergente

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta herramienta nos permite crear un enlace a un elemento que al pinchar sobre él nos abra una ventana informativa.

Empezamos seleccionando el texto (1) donde queremos incorporar la ventana emergente y pulsamos en "Ventana emergente" (2)Ahora, en la ventana que vemos, introducimos

• "Título del diálogo (el título del enlace)"
• "Escribe el contenido de la ventana. Puedes usar HTML y editarlo desde el propio editor"

Efectos

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Esta herramienta nos permite presentar información de manera atractiva y visual en un contenido permitiendo la interacción con el usuario.

En primer lugar situamos el cursor en la zona donde vayamos a incorporar la información y pulsamos sobre "Efecto".

En la ventana que vemos a continuación, vemos dos pestañas:

"Instrucciones" :breve información sobre cómo usar esta herramienta.  "General": podemos elegir el efecto que queremos aplicar. Tenemos cuatro posibles efectos: "Acordeón", "Pestañas", "Paginación" y "Carrusel". Independientemente del tipo de efecto seleccionado la manera de trabajar será la misma en todos los casos. Una vez seleccionado el efecto, pulsamos en OK.

Ahora en el cuerpo del contenido se insertará un formulario con los siguientes campos:

• "Encabezado 2": aquí incorporaremos el título principal de la información.
• "Escribe el contenido...": aquí introduciremos la información que acompañará al título del encabezado 2. Podemos añadir imágenes, vídeos, textos, enlaces, audios,...

Aquí podemos ver un ejemplo de cómo hemos cumplimentando el primer y segundo encabezado y el texto que lo acompaña:Si queremos incorporar más encabezados, situamos el cursor del ratón en el lugar donde queramos añadirlo y pulsamos sobre "Párrafo" (1) y seleccionamos "Encabezado 2" (2)El nuevo apartado quedará incorporado. Para introducir el texto que le acompaña pulsamos sobre la tecla "enter":  Una vez publicado el contenido, vemos cómo se visualizará  en función del efecto incorporado:

Acordeón: Paneles desplegables para mostrar contenido en un espacio limitado. Para ver la información de los diferentes apartados, tendremos que pulsar sobre ellos:Pestañas: Muestra diferentes contenidos en un mismo espacio. La información introducida en cada título se muestra en pestañas. Pulsamos en cada una de ellas para acceder a la información:

Paginación: Divide nuestro contenido en varias páginas. Se pasa de una información a otra pulsando sobre el número de página correspondiente:Carrusel: Presenta una lista de contenidos horizontalmente. Se pasa de una información a otra pulsando sobre las flechas de las derecha e izquierda:

Notación musical

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Empleando esta funcionalidad podemos mostrar en nuestros contenidos partituras generadas a partir de notación musical en formato ABC. También permite escuchar el audio en un reproductor MIDI y descargarlo.

Una vez estemos en el contenido, pulsamos sobre "Notación musical":Se abre una nueva ventana donde tenemos que introducir o pegar el código ABC.  Si pulsamos en previsualizar, podemos ver la partitura generada así cómo el reproductor MIDI:Cerramos la pantalla de previsualización, y pulsamos en OK.

Una vez hemos publicado el contenido en nuestra web se verá así:

HTML

Para acceder a esta funcionalidad, previamente tenemos que haber pulsado sobre el botón "Mostar/ Ocultar herramientas".

Podemos trabajar con HTML en nuestro contenido pulsando sobre "Edit source code"  

A continuación vemos una pantalla donde podemos incorporar el código html que precisemos y activar/ desactivar diferentes opciones: "Envolver el código", "Auto-completar", "Resaltar sintaxis", "pantalla completa", "Buscar y reemplazar" y "Dar formato". Una vez hayamos terminado de trabajar pulsamos sobre "Insertar y cerrar".