Diferencia entre revisiones de «Educa62 Editor Diseño del contenido»

De EducaMadrid Ayuda
Saltar a: navegación, buscar
 
Línea 285: Línea 285:
  
 
Esta funcionalidad nos va a permitir incorporar enlaces a nuestros contenidos pero permitiéndonos mostrar, al posicionarnos sobre ellos, una pequeña información.
 
Esta funcionalidad nos va a permitir incorporar enlaces a nuestros contenidos pero permitiéndonos mostrar, al posicionarnos sobre ellos, una pequeña información.
 +
 +
  
 
'''TIPOS DE BOCADILLO'''
 
'''TIPOS DE BOCADILLO'''
Línea 336: Línea 338:
  
 
:::*'''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.
 
:::*'''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.
 +
 +
  
 
'''CONFIGURACIÓN Y APARIENCIA DE LOS BOCADILLOS'''
 
'''CONFIGURACIÓN Y APARIENCIA DE LOS BOCADILLOS'''

Revisión actual del 07:50 31 may 2016

Diseño contenido

Estilos

Esta nueva funcionalidad nos va a permitir resaltar diferentes partes del texto de nuestro contenido al tiempo que también va a proporcionar una mayor información del mismo.

A continuación presentamos el siguiente texto al cual vamos a asignarle diferentes estilos:

Wikidiseño1.png

Para darle un estilo particular al contenido, en primer lugar tendremos que seleccionar la palabra o párrafo al que queramos asignárselo y posteriormente pulsarmeos sobre el icono Estilos Estilos v5.png que se encuentra en la barra de herramientas y seleccionamos el estilo deseado:

Wikidiseño2.png

A continuación mostramos los diferentes estilos que podremos seleccionar:

Texto estilos.png

Una vez seleccionado el estilo que queremos, la apariencia del texto cambiará. En la imagen que presentamos a continuación puede verse el resultado de diferentes estilos que han sido aplicados:

Wikidiseñoestilo.png



Insertar enlace a contenido

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

Para crear el enlace a un contenido lo que tendremos que hacer será en primer lugar seleccionar el texto donde vamos a crear el enlace y posteriormente pulsar en el icono Enlace a contenido Wikidiseñoenlaceicono.png que aparece en la barra de herramientas y nos aparecerá la siguiente pantalla donde tendremos que pulsar sobre Wiki examinar.png:

Wikidiseñoenlace0.png

A continuación nos aparecerá una nueva ventana donde podremos a través de los diferentes criterios la búsqueda del contenido a enlazar. Una vez hayamos seleccionado los criterios pulsaremos en buscar:

Wikidiseñoenlace3.png

Hecho esto, nos aparecerá un listado con todos los contenidos que cumplan el criterio seleccionado anteriormente. Buscamos el que queremos y lo seleccionamos:

Wikidiseñoenlace4.png

Seleccionado el contenido volveremos a la pantalla que veíamos inicialmente con la única diferencia de que ya nos apareceré el nombre del contenido a enlazar. Para finalizar tendremos que pulsar en Insertar:

Wikidiseñoenlace5.png

Realizados todos los pasos anteriores, nuestro contenido presentaría el siguiente aspecto:

Wikidiseñoenlace6.png

Vídeo tutorial Editor online: Insertar enlace a contenido


Insertar/Editar 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

Insertarenlace 1.png

Hecho esto, nos aparecerá la siguiente ventana donde tendremos que ir introduciendo los datos que se especifican a continuación:

Insertarenlace 3.png

Una vez introducidos todos los datos pulsamos en Insertar.

Por último veremos como el enlace se ha creado correctamente en nuestro contenido:

Insertarenlace 4.png


Enlaces a un fichero

En el caso en que queramos realizar un enlace a un fichero tendremos que seguir estos pasos:

1. Seleccionamos el texto
2. Pulsamos sobre el enlace "Insertar/editar enlace".


Novedad enlace1.jpg


A continuación, en el campo "URL" pulsamos sobre la parte derecha:

En este caso vamos a añadir un fichero que tenemos en nuestro (archivo local):

1. Pulsamos sobre Examinar
Novedad enlace2.jpg
2. Localizamos el fichero en nuestro equipo y pulsamos sobre Abrir.
Novedad enlace3.jpg
3. El fichero queda seleccionado. Introducimos si lo deseamos un título o una descripción y por último pulsamos sobre Subir.
Novedad enlace4.jpg

Volveremos al formulario incial donde veremos que el campo URL ha quedado cumplimentado. Además, podremos:

* Indicar el tipo de fichero que hemos incorporado. En este caso de un fichero .pdf
* Especificar la Información de la descarga, introduciendo el tamaño de dicho fichero.
* Por último pulsamos sobre Insertar.


Novedad enlace5.jpg


Aquí podemos ver como quedaría insertado el fichero, apareciendo toda la información que hemos incorporado:

Novedad enlace6.jpg

Vídeotutorial


Funcionalidades Avanzadas

Pestaña Pop-Up: en esta pestaña nos encontraremos con distintos campos para darle formato de pop-up al enlace que acabamos de crear si lo que queremos es que se abra en una ventana emergente nueva.

Opavanzadas popup1.png

Los campos a cunplimentar son las siguientes:

- Javascript Popup: Esta casilla se debe marcar para que el enlace se abra como un Popup (una ventana de navegador más pequeña).

El resto de las opciones son para indicar las características que queremos que tenga la ventana emergente: nombre de la ventana, tamaño, posición...

- Popup URL: Aquí escribiremos 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, suele tener 1024 de ancho y 768 de alto). 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:

Opavanzadas popup2.png
  • 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).
  • Mostrar barras de scroll: Si se marca mostrará las barras de scroll (las que permiten bajar el contenido de la página).
  • Ventana redimensionable: Si se quiere que el usuario pueda redimensionar (hacer más grande o pequeña) la ventana hay que marcar esta opción.
  • Dependiente: Si se quiere que la ventana sea de tipo dependiente, es decir que se cierre al cerrar la ventana del navegador.
  • Insert return ‘false’: Una opción javascript para que devuelva un valor nulo, no goza de mayor interés para el usuario.

En este caso vamos a cumplimentar los siguientes datos que aparecen a la derecha.

A continuación mostramos como se visualizaría el enlace:

Opavanzadas popup3.png


Pestaña 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, en el caso de tenerla definida, que se indicará en la caja de texto.

Listado de eventos en javascript:

o 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

o Onblur: Se activa cuando un elemento seleccionado de un formulario pierde el foco, es decir cuando se selecciona otro elemento del formulario.

o Onclick: Se activa cuando se hace clic en un elemento (un enlace, botón, caja de texto)

o Ondblclick: Se activa cuando se hace doble clic en un elemento (un enlace, botón, caja de texto)

o Onmousedown: Se activa cuando se pulsa con el ratón sobre un elemento (un enlace, botón, caja de texto).

o Onmouseup: Se activa cuando habiendo pulsado sobre un elemento con el botón izquierdo del ratón éste se suelta.

o Onmouseover: Se activa cuando el cursor se sitúa sobre un elemento.

o Onmousemove: Se activa cuando el cursor se mueve sobre el elemento.

o Onmouseout: Se activa cuando el cursor deja de estar sobre el elemento.

o Onkeypress: Se activa cuando se pulsa una letra del teclado.

o Onkeydown: Se activa cuando se deja pulsada una tecla del teclado.

o Onkeyup: Se activa cuando habiendo pulsado una tecla ésta se suelta.


Pestaña Avanzado: Las opciones que presenta están asociadas al uso de capas, estilos y a la codificación del propio HTML, son totalmente opcionales.

  • Id: Un identificador único para que posteriormente el enlace pueda ser utilizado mediante Javascript.
Opavanzadas avanzado.png
  • Estilo: Posibles estilos CSS aplicables
  • Clases: Si se ha definido una clase CSS para el enlace indicar aquí el nombre.
  • Nombre del objeto: Esta etiqueta es útil si el enlace se quiere abrir en un iframe u otro marco, aquí se debe especificar el nombre de ese iframe.
  • Otras etiquetas:

- Dirección del texto

- Idioma de destino

- Código del idioma

- Codificación de caracteres de destino

- Tipo MIME destino

- Relación de la página al destino

- Relación del destino hacia la la página

- Indice de tabulación

- Tecla de acceso




Desenlazar

Esta opción permite que "rompamos" los enlaces creados tanto a otros contenidos nuestros como a otras páginas web o sitios webs. Para ello tendremos que seleccionar el enlace y posteriormente pulsar sobre el icono Romper enlace Romperenlace 4.pngde la barra de herramientas.


Romperenlace 1.png

Tras esto veremos como el enlace se rompe quedando únicamente el estilo que le habíamos asignado al enlace. A continuación indicamos como eliminar ese estilo:

Romperenlace 2.png


Vídeo tutorial Editor online: Insertar anclas

Insertar/Editar ancla

Esta funcionalidad nos va a permitir movernos por el contenido sin necesidad de movernos a través del scrol. Esta herramienta suele emplearse cuando el contenido creado es muy denso y largo.


Para utilizar esta opción tenemos que tener en cuenta que tendremos que realizar dos operaciones: por un lado crear el ancla y por otro lado, crear un enlace al ancla.

A continuación indicamos los pasos que tendríamos que realizar.

En primer lugar, tendremos que situar el cursor del ratón en el lugar exacto donde queramos crear el ancla y posteriormente pulsaremos sobre el icono Insertar ancla Insertarancla 1.png de la barra de herramientas:

Insertarancla 2.png

Hecho esto, veremos que el ancla se ha creado correctamente:

Insertarancla 4.png

Una vez creado el ancla, a continuación vamos a crear un enlace al ancla. Para ello seleccionaremos la palabra o frase donde queramos crearlo y pulsaremos sobre el icono Insertar enlace. Hecho esto tendremos que pulsar sobre Ancla y seleccionar de todos los anclas creados en ese contenido el que queramos.Tras eso pulsaremos en Insertar.

Insertarancla 5.png


A continuación mostramos un ejemplo:

Insertarancla 7.png

Bocadillo

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


TIPOS DE BOCADILLO

Existen 4 tipos diferentes de bocadillo:

  • Texto: esta opción 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.
Veamos cómo hacerlo:
Seleccionamos el texto donde queremos incluir el enlace y a continuación pulsamos sobre el icono "Insertar bocadillo":
Educa62 bocadillo3a.jpg


En la siguiente pantalla seleccionamos "Texto" y cumplimentamos los siguientes campos:
1. Introducimos la dirección web (url) del sitio al que queremos enlazar.
2. Introducimos un título descriptivo referente al enlace.
3. Introducimos un título al bocadillo.
4. Pulsamos sobre Insertar


Educa62 bocadillo3b.jpg
Cuando la persona que acceda a nuestro contenido se posicione sobre el enlace verá la información que nosotros hayamos introducido en el 'bocadillo' y pulsando sobre la palabra accederá a la página que hayamos enlazado.


Educa62 bocadillo4.jpg
En este vídeo podemos ver cómo hacerlo:


  • Contenido: Funcionalidad avanzada que nos permitirá realizar enlaces a contenidos de tipo libre que hayamos creado con anterioridad acompañado además de una pequeña descripción.
En este vídeotutorial se muestra cómo insertar este tipo de bocadillo:
  • 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.
En este vídeo podemos ver cómo hacerlo:


  • 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.


CONFIGURACIÓN Y APARIENCIA DE LOS BOCADILLOS

Además podremos configurar el comportamiento del 'bocadillo' al situarnos sobre el enlace:

Cierre: hace referencia a cómo deberá comportarse el 'bocadillo' una vez nos hemos situado sobre el enlace:

- Se cierra automáticamente cuando el ratón deja de estar sobre el enlace.
- Botón de cierre (el diálogo se cierra al hacer clic en él)
Educa62 bocadillo2.jpg

Por último también podremos definir la apariencia de los "bocadillos" seleccionando:

- Color
- Borde redondeado
- Sombreado
Educa62 bocadillo.jpg



Vídeo tutorial Editor online: Insertar imagen

Insertar/editar imagen

Para insertar imágenes y posteriormente modificar las tendremos que hacer uso de esta herramienta. A través de esta herramienta podremos insertar la imagen y dotarle del diseño que deseemos siempre dentro las diferentes posibilidades que muestra el editor de imágenes. Para ello tendremos que emplear el icono Insertar Imagen Imageninsertar0.png que aparece en la barra de herramientas:

Imageninsertar.png

Hecho esto, veremos la siguiente ventana donde tendremos que pulsar en Examinar:

Imageninsertar1.png

A continuación, visualizaremos el disco duro del contenido donde tendremos que subir la imagen que queremos insertar. Para ello, pulsaremos sobre Añadir Fichero:

Imageninsertar101.png


En la siguiente pantalla podremos seleccionar desde donde queremos subir nuestra imagen:

A.Desde nuestro equipo (fichero local)

B. Desde url (imagen que encontremos en Internet)


Imageninsertar102.png



Desde nuestro equipo

Para subir una imagen que previamente esté en nuestro equipo deberemos seguir los siguientes pasos:

  • En la siguiente ventana, tendremos que seleccionar la imagen que queramos insertar y que previamente tenemos en nuestro equipo:
Imageninsertar5.png
  • A continuación pulsaremos en Subir fichero:
Imageninsertar4.png
  • Por último, nos aparecerá la siguiente ventana que nos indica el proceso de subida del archivo:
Imageninsertar6.png


Desde url

  • En primer lugar debemos haber encontrado la imagen deseada en Internet, y posteriormente copiar la dirección web (url) de la misma.
Imageninsertar104.png
  • A continuación, pulsamos sobre Desde Url, pegamos la dirección y pulsamos sobre subir:


Imageninsertar103.png


  • Una vez el fichero se ha subido nos aparecerá esta pantalla:
Imageninsertar105.png


En ambos casos, (fichero local o ulr) una vez veamos que el fichero se ha subido correctamente, pulsaremos en listado

Imageninsertar7.png

Ahora tendremos que seleccionar la imagen y posteriormente pulsar en seleccionar:

Imageninsertar8.png


Hecho esto, visualizaremos de nuevo la ventana que veíamos al inicio sólo que el campo url ya aparece completado. Además la aplicación nos permitirá 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.

Así mismo, recomendamos que esta pantalla se cumplimenten los campos de Título y Descripción. Hecho esto pulsaremos en insertar:

Imageninsertar9.png

Hecho esto, el resultado sería el siguiente:

Imageninsertar12.png


  • Opciones Avanzadas:

A continuación presentamos opciones disponibles para configurar la imagen y que no son de obligado cumplimiento.


Imageninsertar10.png

- Pestaña Aspecto: desde esta pestaña podremos modificar el tamaño de la imagen y definir el diseño de la misma respecto al texto de nuestro contenido.

Los datos que podemos cumplimentar son los siguientes:

-Alineación: nos permite indicar que posición queremos que tenga la imagen en relación al texto: izquierda, derecha, línea base,...

- Dimensiones: desde aquí podremos modificar el tamaño de la imagen. Recomendamos marcar la opción.

-Restringir proporciones para no distorsionar la imagen.

- Espacio vertical: indica la separación vertical de la imagen respecto al texto.

- Espacio horizontal: indica la separación vertical de la imagen respecto al texto.

- Borde: permite insertar un borde a la imagen.

- Clase: permite destacar la imagen con cualquiera de las opciones disponibles.

- Estilo: indica las diferentes modificaciones que hemos ido realizando en la imagen.

Una vez cumplimentados los campos deseados, pulsaremos en Insertar.



El resultado de la imagen insertada sería el siguiente:

Imageninsertar11.png


- Pestaña Avanzado:

Esta pestaña nos va a permitir mostrar una imagen alternativa a la que ya hemos incorporado (la imagen que seleccionamos en la pestaña general)cuando realicemos una acción sobre la misma.

Si queremos activar esta opción, en primer lugar tendremos que marcar la casilla Imagen Alternativa.

Imageninsertar13.png

Hecho esto, podremos cumplimentar los siguientes campos:

-Al pasar el ratón por encima: Si se quiere que aparezca otra imagen al mover el ratón sobre la original, se debe indicar en esta casilla qué imagen alternativa se verá, poniendo la ruta de la imagen o buscándola o subiéndola al disco duro del contenido.

-Al salir el ratón: Si se quiere que aparezca otra imagen al mover el ratón fuera de la original, se debe indicar en esta casilla qué imagen alternativa se verá, poniendo la ruta de la imagen o buscándola o subiéndola al disco duro del contenido.

-Id: El identificador: para su posterior tratamiento con un lenguaje de script.

-Dirección del texto: Para indicar si el texto de al lado de la imagen irá de derecha a izquierda o viceversa.

-Código del idioma: Se ha de poner el idioma en formato código: es, en, etc.

-Mapa de la imagen: Si la imagen forma parte de un mapa de imágenes.

-Descripción larga del enlace: Se puede indicar una descripción más larga, para una mayor accesibilidad.

En este caso hemos insertado la opción de que se muestre una imagen al pasar el ratón por encima y por otro lado que Al salir el ratón se muestre otra (en esta caso hemos seleccionado la imagen principal):

Posición Inicial Imageninsertar14.png

Imagen al pasar el ratón Imageninsertar15.png

Imagen al salir del ratón Imageninsertar14.png




Insertar/Editar archivo multimedia

Para insertar un vídeo audio de nuestro ordenador tendremos que hacer lo siguiente:

Pulsamos sobre el icono Insertar archivo multimediaWiki insertarvideoyaudio2.png de la barra de herramientas:

Wiki insertarvideoyaudio10.png

Hecho esto nos aparecerá la siguiente pantalla en la cual tendremos que seleccionar que tipo de fichero es el que queremos insertar.

Wiki insertarvideoyaudio4.png



A continuación subimos el fichero al disco duro del contenido y una vez el proceso de subida del archivo ha finalizado, pulsamos sobre Listado.

Wiki insertarvideoyaudio5.png

Desde aquí seleccionaremos el fichero que acabamos de subir y pulsamos sobre Seleccionar:

Wiki insertarvideoyaudio6.png

Tras esto, podremos indicar el tamaño en el que queremos que sea visible nuestro vídeo, así mismo nos mostrará la previsualización del mismo. Una vez hemos definido el tamaño, pulsamos en insertar.

Wiki insertarvideoyaudio7.png

A continuación, en el cuerpo del contenido veremos que se ha insertado un cuadro de las mismas dimensiones que el vídeo.

Wiki insertarvideoyaudio8.png

A continuación mostramos como se visualizaría el video en la página web.

Paginafinal videoaudios2.png

Insertar fragmento HTML (embebido)

Esta herramienta es útil emplearla cuando encontramos un video que ya ha sido insertado en otra pagina web y queremos usarlo para la nuestra. Para poderlo hacer en primer lugar tendremos que encontrar encontrar el código html del mismo. En páginas como youtube podemos encontrarlo con facilidad.

Wiki insertarhtml1.png

Para insertar un video o audio desde otro entorno pulsaremos sobre el icono Insertar fragmento html de la barra de herramientas Icono html embebido.png

Editor html embebido icono.png


Una vez pulsemos sobre icono, se nos abrirá una nueva ventana donde tendremos que introducir el código del audio/ vídeo y que hemos obtenido del entorno donde localizamos el video/audio:

Codigo embebido.png

Tras esto, nos aparecerá en el editor del contenido un cuadrado negro que nos indica el tamaño en el cual se va a visualizar el vídeo subido:

Insercion html embebido.png

Por último mostramos como se vería este mismo video en nuestra página web:

Paginapresentaciones.JPG


  • Visualización del objeto embebido


Cuando en un contenido embebemos un objeto multimedia, a menudo nos encontramos con que algunos menús desplegables, ventanas emergentes..., se colocan por debajo del objeto embebido:


Objetoembebido mal.png


Para resolver este problema, debemos añadir al código del objeto embebido lo siguiente:

1.- Si la etiqueta es un <object>, añadimos <param name="wmode" value="transparent" /> justo antes de la etiqueta de cierre:</object>

Quedaría así: ...<param name="wmode" value="transparent" /></object>

2.- Si la etiqueta es <embed>, añadimos el siguiente parámetro: wmode="transparent" un poco antes del final: </embed>

Quedaría así: ... wmode="transparent"></embed>


En nuestro ejemplo, observamos al editar el código embebido que se trata de una etiqueta <object>. Añadimos entonces justo antes del cierre del "object" el siguiente parámetro: <param name="wmode" value="transparent" />.


Objetoembebido bien.png


Si visualizamos nuevamente el contenido en nuestra página web podemos comprobar que el problema ha quedado resuelto:


Objetoembebido.png



Insertar video de Youtube

Vídeo tutorial: Insertar video de Youtube


Con esta opción vamos a poder insertar en nuestros contenidos, de una forma bastante rápida y sencilla, vídeos que encontremos interesantes en la página de "Youtube". Primeramente seleccionaremos el vídeo en "youtube" que queremos insertar en nuestra página web y copiaremos su URL. La URL la podemos encontrar en distintas ubicaciones dentro de la página, podemos copiarla directamente de la barra de navegación o también la podemos encontrar pulsando sobre la opción "Compartir" del propio vídeo.

Youtube3.png

Una copiada la URL nos iremos a nuestro contenido y situados sobre la pestaña "cuerpo" pulsaremos sobre el icono correspondiente.

Youtube1.png

A continuación se nos abrirá un formulario, en el campo dirección es donde tendremos que insertar la URL del vídeo que hemos copiado en "youtube". Si quisieramos cambiar el formato del video para que se viera más grande es aquí dónde deberiamos cambiarlo.

Routube2.png

Así es como quedaría nuestro vídeo insertado en el contenido. Vemos que en el "cuerpo" aparece nuestro vídeo insertado, sólo quedaría darle a "Guardar y Salir".

Youtube4.png

Vídeo tutorial Editor online: Cómo insertar vídeos de la Mediateca de Educamadrid


Cómo insertar vídeos de la Mediateca de Educamadrid

Si nos interesa algún vídeo que hemos visto en la Mediateca y queremos insertarlo en nuestra web, tendréis que seguir los siguientes pasos:

1. Nos situamos en la Mediateca y copiaremos la URL del video. Podemos copiarla directamente de la barra de navegación o de la caja situada a la derecha de la pantalla "URL vídeo"

Mediateca1.png

2. Una vez copiada la URL nos iremos al contenido y situados en la pestaña "cuerpo" pulsaremos sobre el icono que nos permite esta funcionalidad.

3. En esa ventana que se nos abre en el campo "dirección" es dónde copiaremos la URL, una vez hecho esto sólo faltaría pulsar sobre "insertar"

Mediateca2.png

Realizados estos pasos ya estaría insertado el vídeo en nuestro contenido, sin olvidar pulsar sobre "Guardar y Salir".

Mediateca3.png

Cómo insertar audios de la Mediateca de Educamadrid

Como hemos visto anteriormente con los vídeos, la inserción de audios de la mediateca se hace siguiendo los mismos pasos, incluso el icono del editor de contenidos es el mismo:

1. Nos situamos en Mediateca y copiaremos la URL del audio. Podemos copiarla directamente de la barra de navegación o de la caja situada a la derecha de la pantalla "URL audio"

Mediateca4.png

2. Una vez copiada la URL nos iremos al contenido y situados en la pestaña "cuerpo" pulsaremos sobre el icono que nos permite esta funcionalidad.

3. En esa ventana que se nos abre en el campo "dirección" es dónde copiaremos la URL, una vez hecho esto sólo faltaría pulsar sobre "insertar"

Mediateca5.png

Realizados estos pasos ya estaría insertado el audio en nuestro contenido, sin olvidar pulsar sobre "Guardar y Salir".

Mediateca6.png

Vídeo tutorial: Cómo insertar presentaciones de Scribd, Slideshare y Jclic

Insertar presentación de Slideshare

Esta herramienta nos permite insertar una presentación de slideshare.

Editor sladeshare.gif

Para incorporar una presentación de slideshare a nuestro contenido copiamos la url de la página de slideshare.

Copiar url slideshare.gif


Para incorporar una presentación slideshare a nuestro contenido pinchamos en el icono correspondiente, en la ventana que se abre pegamos la url de la presentación y pinchamos en el botón insertar.

Insertar slideshare.gif

Si la presentación se ha insertado correctamente el contenido se verá se la siguiente forma.

Slideshare insertado.gif

El contenido con la presentación incorporada queda como se ve en esta imagen.

Slideshare.gif


Insertar publicación de Scribd

Esta herramienta nos permite insertar documento de scribd.

Editor scribd.gif


Para incorporar un documento de scribd a nuestro contenido copiamos la url de la página de scribd.

Copiar url scribd.gif


Para incorporar un documento de scribd a nuestro contenido pinchamos en el icono correspondiente, en la ventana que se abre pegamos la url del documento y pinchamos en el botón insertar.

Insertar scribd2.gif


Si lo hemos incorporado correctamente el contenido se verá de la siguiente manera:

Scribd insertado.gif


El contenido con el documento incorporado queda como se ve en esta imagen.

Contenido scribd.gif


Efectos (acordeón, pestañas, paginación, carrusel)

Vídeotutorial:



Paso a paso:

Funcionalidad que nos va a permitir presentar información de manera más atractiva y visual en un contenido.

Educa62 efectos.jpg


La manera de usar esta funcionalidad es la siguiente:

1- En primer lugar situamos el cursor en la zona donde vayamos a incorporar la información y pulsamos sobre el icono de insertar efecto.
Educa62 efectos10.jpg
2- Seleccionamos el efecto y pulsamos sobre Insertar.
Tendremos cuatro posibles efectos:
  • Acordeón
  • Pestañas
  • Paginación
  • Carrusel
Independientemente del tipo de efecto seleccionado la manera de trabajar será la misma en todos los casos.

Educa62 efectos9.jpg


Una vez hemos seleccionado un efecto 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. Podremos añadir imágenes, vídeos, textos, enlaces, audios,...
Aquí podemos ver un ejemplo de cómo hemos cumplimentando el primer encabezado y el texto que lo acompañará:
Educa62 efectos2.jpg

Si quisieramos incorporar más encabezados tendríamos que hacerlo de la siguiente manera:

1.- Sitúamos el cursor del ratón en el lugar donde queramos añadirlo y pulsamos sobre 'Párrafo' y seleccionamos Encabezado 2.
Educa62 efectos3.jpg


2.- El nuevo apartado quedará incorporado. Para introducir el texto que le acomapañará pulsamos sobre la tecla 'enter' y veremos que podemos introducir el texto:
Educa62 efectos4.jpg


Una vez hayamos terminado de trabajar con el contenido, pulsamos sobre 'Publicar'

Educa62 efectos5.jpg


Ahora vamos a ver cómo se visualizará el contenido en función del efecto incorporado:

Acordeón: Paneles desplegables para mostrar contenido en un espacio limitado.

Educa62 efectos6.jpg
Para ver la información de los diferentes apartados, tendremos que pulsar sobre ellos:
Educa62 efectos7.jpg
Educa62 efectos8.jpg

Pestañas: Muestra diferentes contenidos en un mismo espacio.

Educa62 efectos11.jpg

La información introducida en cada título se mostrará en pestañas. Pulsaremos en cada una de ellas para acceder a la información:

Educa62 efectos12.jpg


Paginación: Divide tu contenido en varias páginas.

Educa62 efectos13.jpg

Se pasará de una información a otra pulsando sobre el número de página correspondiente:

Educa62 efectos14.jpg


Carrusel: Presenta una lista de contenidos horizontalmente.

Educa62 efectos15.jpg

Se pasará de una información a otra pulsando sobre las flechas de las derecha e izquierda:


Educa62 efectos16.jpg


Insertar HTML como texto

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.

Editor html texto.png


Al pinchar en el icono de insertar HTML como texto nos aparece la siguiente ventana, en donde debemos incluir el codigo HTML.


Html texto2.png


Al pinchar en insertar nos quedará el codigo insertado como texto de la siguiente manera:


Html comotexto.png

Insertar fórmula

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

Editor wiris.png

Al pinchar sobre el icono del editor aparece la siguiente ventana. En las distintas pestañas encontramos los simbolos para construir la fórmula. Cada una de las pestañas nos proveerá distintos simbolos.

Crear formula determinante2.png

Paso 1:

Pinchando en la pestaña "Matrices" la herramienta nos permitirá insertar un formato matriz para las fórmulas que queremos insertar.

Paso 2:

Al insertar la matriz nos permitirá elegir las dimensiones de la misma.

Paso 3:

Una vez determinadas las dimensiones pinchamos en aceptar y se insertará.

Paso 4:

Con los valores de la matriz completos pinchamos en aceptar y se insertará en nuestro contenido. Una vez creadas las fórmulas se pueden modificar, ya que son editables.


El resultado en el contenido nos queda asi:

Pagwiris determinante2.png



Insertar cálculo

Esta herramienta nos permite insertar una fórmula matemática y realizar cálculos interactivos.

Editor wiris cas.png

Al pinchar en el icono del editor nos aparece la siguiente ventana para editar la fórmula:

Insertar formula.png

Paso 1:

Pinchando en "resolver ecuación" o "resolver sistema" la herramienta nos permitirá insertar las fórmulas que queremos resolver.

Paso 2:

Entramos en modo edición e ingresamos la composición de las ecuaciones en nuestro caso.

Paso 3:

Pinchando en el símbolo "=" la herramienta nos resuelve las ecuaciones introducidas. Podemos dejar el ejemplo sin resolver e insertarlo en el contenido, el resultado se puede generar en el modo interactivo.

Paso 4:

Al insertarla el contenido nos quedará asi:

Sistema ecuaciones.png

Paso 5:

Una vez incorporado a la página este contenido es interactivo, al pinchar en el símbolo "=" se genera el valor de las incógnitas que resuelven el sistema.


Sistema ecuaciones resuelto.png


¿Cómo obtener gráficos de las fórmulas incorporadas?


Otra funcionalidad de la herramienta es la de dibujar gráficos de funciones.

Pinchamos en "dibujar" para que nos genere un gráfico de la fórmula que vamos a incorporar, insertamos la fórmula entre los paréntesis.


Crear formula seno2.png


Al pinchar en el símbolo "=" obtenemos en una ventana independiente un gráfico de la función.


Grafico seno.png


Una vez incorporado el contenido a nuestra pagina se verá de la siguiente manera:

Pagina funcion seno3.png


Revisar accesibilidad

¿Qué es la accesibilidad?

La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso.

¿Cómo podremos comprobar si nuestros contenidos son accesibles?

Cuando estemos editando un contenido esta funcionalidad va a estar operativa tanto en la pestaña título/resumen como en la pestaña del cuerpo:

Accesibilidad v6.png

Veamos a continuación cómo emplear esta funcionalidad:

1. Una vez estemos situados en el cuerpo del contenido, pulsaremos sobre la opción de Revisar accesibilidad:


2accesibilidad v6.png


2. Hecho esto, se abrirá una ventana nueva donde tendremos que prestar atención al apartado Accessibility Review donde se nos notificará si nuestro contenido es accesible o no:


  • En caso de no ser un contenido accesible, la página nos indicará qué apartados y elementos de nuestro contenidos tendríamos que modificar a fin de que el contenido sea accesible:
3accesibilidad v6.png


  • En caso de que nuestro contenido sea accesible, nos aparecerá este mensaje:
4accesibilidad v6.png