Herramientas del menú simplificado

Menú simplificado

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.

Negrita

Para resaltar un texto en negrita, seleccionamos (1) la palabra, frase o letra que queramos,  y pulsamos sobre el icono de "negrita"(2) que aparece en la barra de herramientas:
Tras lo cual el resultado es el siguiente:

Cursiva

Una vez seleccionado el texto (1) que queremos modificar, pulsamos sobre el icono de "cursiva"(2) que aparece en la barra de herramientas del editor:
El resultado es el siguiente:

Párrafo

Empleando esta opción podemos dar formato a una porción de texto que nos servirá para marcar divisiones de un documento a modo de secciones y subsecciones. Podemos emplear hasta 6 niveles de encabezamientos.

• Encabezado 1
• Encabezado 2
• Encabezado 3
• Encabezado 4
• Encabezado 5
• Encabezado 6
• Preformartted

Para seleccionar definir el estilo que queremos aplicar,  seleccionamos el texto (1) y posteriormente desplegamos las opciones de "párrafo" (2) y a continuación el estilo que queremos aplicar (3):Y vemos el resultado:

 

Insertar enlace

Esta opción permite la creación de enlaces a otras páginas o direcciones web internas a EducaMadrid y externas al propio portal y también a ficheros que previamente hayamos subido al disco duro del contenido.

Enlaces a páginas web

Seleccionamos el texto donde queremos crear el contenido  (1) y pulsamos en el icono "Insertar/editar enlace" (2).

En la ventana que vemos a continuación (pestaña General), introducimos los siguientes datos:

URL (1): aquí pegamos o tecleamos la dirección web que queremos enlazar.

Texto para mostrar (2): en este apartado vemos el texto donde vamos a realizar el enlace.

Título (3): aquí podemos introducir el texto que verá la persona que visualice nuestro contenido al posicionarse con el cursor del ratón sobre el enlace.

Destino (4): seleccionamos cómo queremos mostrar la página enlazada: en una ventana nueva o bien sobre la misma pestaña (ninguno)

Ok (5): una vez cumplimentados los campos, pulsamos en este botón para insertar el enlace.

Ahora vemos como el enlace se ha creado correctamente en nuestro contenido:

Enlaces a un fichero

Consulta el tamaño de los ficheros que puedes incorporar.

En el caso en que queramos realizar un enlace a un fichero, seleccionamos el texto (1) y pulsamos sobre el icono "Insertar/editar enlace"(2)En la ventana emergente, en el apartado "URL" pulsamos en el icono "Examinar". En este caso añadimos un fichero que tenemos en nuestro equipo por lo que seleccionamos la pestaña "Fichero local" y pulsamos en Examinar.

Ahora localizamos el fichero en nuestro equipo (1) y pulsamos sobre Abrir (2)

El fichero queda seleccionado. Introducimos si lo deseamos un "Título" o una "Descripción" y por último pulsamos sobre "Subir".

Ahora volvemos al formulario incial donde vemos que el campo" URL"(1)  ha quedado cumplimentado así como el "Texto para mostrar" (2). Además, podemos seleccionar el "Destino" (3) (abrir en una nueva ventana o ninguno) e "Incluir información del archivo" (4), al marcar esta opcón podemos especificar la Información de la descarga: introduciendo el "Tamaño" (peso) y "Unidad" de dicho fichero y la extensión del fichero.

Cumplimentados los campos, pulsamos en "OK" (5).Aquí podemos ver como queda insertado el fichero, apareciendo toda la información que hemos incorporado:

Enlaces a un contenido

Esta opción nos va a permitir crear enlaces dentro de un contenidoa otros contenidos que hayamos creado y que estando en estado publicado no los tenemos visibles en la página web.

Para crear el enlace a un contenido, seleccionamos el texto (1) donde vamos a crear el enlace y posteriormente pulsamos en el icono "Insertar/ Editar enlace" (2)En la ventana que vemos a continuación, en el campo "Contenido" pulsamos sobre el icono de "Búsqueda".Vemos una nueva ventana donde tenemos que realizar una búsqueda de contenidos empleando al menos uno de los criterios de búsqueda disponibles:

• Texto: introducimos el nombre del contenido que queremos buscar
• Tipo de contenido: seleccionamos el tipo de contenido que queremos enlazar.
• Ámbito: en el caso en el que seamos administraadores de varios sitios webs, podemos seleccionar contenidos de otros ámbitos.
• Búsqueda en carpeta: podemos seleccionar en qué carpeta del Administrador de contenidos queremos realizar la búsqueda.
• Nivel educativo: si hemos catalogado los contenidos por nivel educativo, podemos seleccionar el nivel educativo.
• Materia/ Disciplina: si hemos incorporado la materia a los contenidos, podemos emplear este criterio.

Una vez hemos seleccionado el criterio/s, pulsamos en "Buscar" .Ahora vemos un listado con todos los contenidos que cumplen el criterio seleccionado anteriormente. Buscamos el que queremos y lo seleccionamos:

Un mensaje nos indica el contenido que hemos seleccionado y queda autocompletado el campo "Contenido" Pulsamos en OK.

Para terminar de insertar el enlace al contenido, pulsamos nuevamente en OK.
Realizados todos los pasos anteriores, el enlace queda incorporado:

Ventana emergente

Desde esta pestaña podemos definir el formato con el que se abrirá el enlace que hemos creado cuando se abra en una ventana emergente nueva. Al marcar la casilla "PopupJavascript" estamos definiendo que el enlace se abra como un Popup (una ventana de navegador más pequeña) y se muestran las siguientes opciones que nos permiten indicar las características que queremos que tenga la ventana emergente:  nombre de la ventana, tamaño, posición...

• URL: introducimos la dirección de la página web o de la imagen que se mostrará en el popup que se abra.
• Nombre de la ventana: sin espacios en blanco y sólo caracteres alfanuméricos (letras y números). Es el nombre identificativo de la ventana.
• Tamaño ( en píxeles: unidad en la que se mide la resolución de la pantalla). En la primera caja hay que especificar el ancho y en la segunda el alto.
• Posición (X,Y): la posición en la pantalla en la que se abrirá el Popup, en la primera caja de texto hay que indicar cuantos píxeles se quieren dejar a la izquierda y en la segunda cuantos dejar de margen superior. Si quiere que aparezca centrada hay que poner las letras c, c en ambas cajas de texto.

Las siguientes opciones son para indicar qué información queremos que muestre la ventana emergente:

• Mostrar barra de dirección: si se marca mostrará la barra de dirección en el popup (la barra donde sale la URL).
• Mostrar barra de menú: si se marca mostrará la barra de menú (la barra donde aparecen las opciones de Archivo, Editar, Ver…)
• Mostrar barra de herramientas: si se marca mostrará la barra de herramientas (donde aparecen los botones de actualizar, página de inicio..)
• Mostrar barra de estado: si se marca mostrará la barra de estado (la barra inferior donde aparece información de la carga de la página).
• Barras de desplazamiento: si se marca mostrará las barras de scroll (desplazamiento, las que permiten desplazarse por el contenido de la página).
• Permitir cambiar tamaño: si se quiere que el usuario pueda redimensionar (hacer más grande o pequeña) la ventana hay que marcar esta opción.
• Insert return "false": es una opción javascript para que devuelva un valor nulo, no goza de mayor interés para el usuario.

A continuación mostramos como se visualiza el enlace cuando completamos estos campos:

Eventos

Los eventos son acciones que ocurren al realizar “algo” relacionado con el enlace (por ejemplo, pulsarlo, ponernos sobre él, etc). Todas las acciones que figuran en la lista pueden asociarse con una función Javascript, para ello tenemos que introducir código javascript en cada caja correspondiente.

Listado de eventos en javascript:

• Onfocus: se activa cuando se selecciona un elemento de un formulario (obtiene el foco). Por ejemplo cuando se pone el cursor en una caja de texto.
  Opavanzadas eventos1.png
• Onblur: se activa cuando un elemento seleccionado de un formulario pierde el foco, es decir cuando se selecciona otro elemento del formulario.
• Onclick: se activa cuando se hace clic en un elemento (un enlace, botón, caja de texto)
• Ondblclick: se activa cuando se hace doble clic en un elemento (un enlace, botón, caja de texto)
• Onmouseover: se activa cuando el cursor se sitúa sobre un elemento.
• Onmousemove: se activa cuando el cursor se mueve sobre el elemento.
• Onmouseout: Se activa cuando el cursor deja de estar sobre el elemento.

Desenlazar

Esta opción permite que "rompamos" los enlaces creados tanto a otros contenidos como a otras páginas web o sitios webs. Para ello situamos el cursor en el enlace (1) y pulsamos en el icono "Romper enlace" (2) de la barra de herramientas.

Tras esto vemos como el enlace desaparece.

Lista de viñeta

Podemos emplear la "lista de viñetas" para presentar un listado de elementos en el contenido que estamos creando. Para hacerlo, seleccionamos el texto (1) y pulsamos en el icono Lista de viñetas (2).
El párrafo queda así:
Si queremos emplear otro "tipo" de viñeta haremos lo siguiente: seleccionamos el párrafo (1), en el icono "Lista de viñetas", desplegamos las diferentes opciones (2) y seleccionamos (3) la que queremos:El cambio queda aplicado

Lista numerada

Podemos emplear la "lista numerada" para presentar un listado ordenado de elementos en el contenido que estamos creando. Para hacerlo, seleccionamos el texto (1) y pulsamos en el icono Lista de viñetas (2).
El resultado es el siguiente:
Si queremos emplear otro "tipo" de viñeta numerada haremos lo siguiente: seleccionamos el párrafo (1), en el icono "Lista numerada", desplegamos las diferentes opciones (2) y seleccionamos (3) la que queremos:El cambio queda aplicado:

Insertar imagen

Podemos insertar imágenes a nuestro contenido y aplicarle un diseño empleando las diferentes posibilidades que muestra el editor de imágenes.

Para insertar una imagen, situamos el cursor del ratón en el lugar donde queremos incoporarla (1) y pulsamos en el icono de "Insertar/Editar imagen" (2) de la barra de herramientas:En la siguiente ventana, en la pestaña "General", en el campo "URL" pulsamos en "Examinar"Vemos el disco duro del contenido que es donde tenemos que subir la imagen y seleccionamos desde dónde vamos a subir la imagen:

1. Desde nuestro equipo (fichero local)
2. Desde url (imagen que encontremos en Internet)

En cualquiera de los casos, recomendamos cumplimentar los campos de Título y Descripción.

Desde nuestro equipo

Pulsamos en Examinar:

Se abre el explorador de ficheros y localizamos y seleccionamos la imagen que queremos insertar y que previamente tenemos almacenada en nuestro equipo:Ahora, pulsamos en Subir fichero:Vemos que en la ventana inicial el campo url cumplimentado. Además, la aplicación nos permite seleccionar el tamaño de la imagen:

• pequeña: redimensionará la imagen a 200 px.
• mediana: redimensionará la imagen a 250 px.
• grande: redimensionará la imagen a 550 px.
• original: mostrará la imagen con el tamaño real de la misma.

Pulsamos en "OK":

El resultado es el siguiente:

Desde url

Pulsamos la pestaña "Url", pegamos la dirección de la imagen (1) (que previamente hemos buscado en Internet) y pulsamos sobre "subir fichero" (2)

Vemos que en la ventana inicial el campo url cumplimentado. Además, la aplicación nos permite seleccionar el tamaño de la imagen:

• pequeña: redimensionará la imagen a 200 px.
• mediana: redimensionará la imagen a 250 px.
• grande: redimensionará la imagen a 550 px.
• original: mostrará la imagen con el tamaño real de la misma.

Pulsamos en "OK":

El resultado es el siguiente:

Pestaña Avanzado

Opciones disponibles para configurar la imagen y que no son de obligado cumplimiento.

• "Estilo": indica las diferentes modificaciones que hemos ido realizando en la imagen.
• "Alineación": nos permite indicar que posición queremos que tenga la imagen en relación al texto: izquierda, derecha, línea base,...
• "Espacio vertical": indica la separación vertical de la imagen respecto al texto.
• "Espacio horizontal": indica la separación horizontal de la imagen respecto al texto.
• "Borde": permite insertar un borde a la imagen.

Pestaña Título y reconocimiento

Se recomiendo cumplimentar estos campos para indicar la autoria y licenciamiento de las imágenes que estamos empleando.

• "Encabezado": texto que queremos mostrar en la parte superior de la imagen.
• "Título de la imagen": texto que se incluirá a pié de la imagen.
• "Enlace del título": podemos incorporar un enlace al título de la imagen. Al pulsar sobre el título nos llevará a la página indicada.
• "Origen/ autor": organización o nombre de la persona que ha realizado la imagen.
• "Licencia": licenciamiento de la obra.
• "Licencia personalizada": si de las opciones que aparecen en el listado no se encuentra la que necesitamos, podemos incorporarla en este apartado.

Insertar/editar vídeo

Para incorporar un vídeo/audio tenemos que situar el cursor del ratón en el lugar deseado y a continuación pulsar sobre el icono Insertar/editar vídeo de la barra de herramientas:

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

General

Este pestaña la emplearemos cuando el vídeo/ audio que queramos incorporar lo tengamos guardado en nuestro equipo.

Los campos que tenemos que rellenar son los siguientes:

• "Type": en esta campo podemos seleccionar el tipo de archivo que estamos subiendo.

• • Detectar automáticamente
  • Vídeo
  • Audio
  • Iframe
    
• "Enlace": pulsamos en el icono "Búsqueda" para localizar el vídeo en nuestro equipo.

Ahora pulsamos en "Examinar":

Se abre el explorador de ficheros. Localizamos el fichero en nuestro equipo, lo seleccionamos (1) y pulsamos en "abrir" (2)

Ahora, ponemos un título y una descripción (opción recomendada) y pulsamos en "Subir fichero".

El tamaño máximo permitido de subida es de 10 Mb.

Comienza el proceso de subida del fichero:

El proceso de subida puede tardar unos minutos, dependerá del tamaño del fichero así como de la velocidad de conexión a Internet.

El campo "URL" queda cumplimentado.

• "Dimensiones": podemos especificar las dimensiones con las que queremos que se muestre el vídeo. Si lo dejamos en blanco cogerá las dimensiones por defecto. Aconsejamos marcar la opción "Restringir proporciones".
• "Usar reproductor javascript": recomendamos dejar marcada esta opción

Una vez cumplimentados los campos, pulsamos en "OK": En el contenido vemos un cuadrado que indica que el vídeo se ha insertado correctamente:

Incrustrado

Esta opción la empleamos cuando queramos insertar vídeos, audios, presentaciones,... que estén alojados en otras páginas.

Para poderlo hacer en primer lugar tenemos que encontrar encontrar el código html del mismo y copiarlo. Por ejemplo, en este caso hemos localizado un audio en la Mediateca y copiamos el código html:

Ahora en nuestro contenido, situamos el cursor del ratón (1) en el lugar donde queramos insertarlo, seleccionamos el icono "Insertar/editar vídeo" (2):

Pulsamos la pestaña "Incrustado", pegamos el código html (2) y pulsamos en OK (3).Y el audio queda insertado:

Título y reconocimiento

Se recomiendo cumplimentar estos campos para indicar la autoria y licenciamiento de las imágenes que estamos empleando.

• "Encabezado": texto que queremos mostrar en la parte superior de la imagen.
• "Título de la imagen": texto que se incluirá a pié de la imagen.
• "Enlace del título": podemos incorporar un enlace al título de la imagen. Al pulsar sobre el título nos llevará a la página indicada.
• "Origen/ autor": organización o nombre de la persona que ha realizado la imagen.
• "Licencia": licenciamiento de la obra.
• "Licencia personalizada": si de las opciones que aparecen en el listado no se encuentra la que necesitamos, podemos incorporarla en este apartado.

Pantalla completa

Para  expandir la zona de trabajo pulsamos en el icono "Pantalla completa" de la barra de herramientas:Vemos el área de trabajo ampliado. Una vez hayamos terminado de trabajar, tenemos que volver a pulsar sobre el mismo icono para volver a la vista normal.