Educa62 Editor Diseño del contenido

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: 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 que se encuentra en la barra de herramientas y seleccionamos el estilo deseado: A continuación mostramos los diferentes estilos que podremos seleccionar: 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: 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 que aparece en la barra de herramientas y nos aparecerá la siguiente pantalla donde tendremos que pulsar sobre : 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: Hecho esto, nos aparecerá un listado con todos los contenidos que cumplan el criterio seleccionado anteriormente. Buscamos el que queremos y lo seleccionamos: 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: Realizados todos los pasos anteriores, nuestro contenido presentaría el siguiente aspecto: 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 Hecho esto, nos aparecerá la siguiente ventana donde tendremos que ir introduciendo los datos que se especifican a continuación: Una vez introducidos todos los datos pulsamos en Insertar. Por último veremos como el enlace se ha creado correctamente en nuestro contenido: 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". 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 2. Localizamos el fichero en nuestro equipo y pulsamos sobre Abrir. 3. El fichero queda seleccionado. Introducimos si lo deseamos un título o una descripción y por último pulsamos sobre Subir. 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. Aquí podemos ver como quedaría insertado el fichero, apareciendo toda la información que hemos incorporado: 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. 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: 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: 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. 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. 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 de la barra de herramientas. 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: 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 de la barra de herramientas: Hecho esto, veremos que el ancla se ha creado correctamente: 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. A continuación mostramos un ejemplo: 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. 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": 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 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. 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. 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) Por último también podremos definir la apariencia de los "bocadillos" seleccionando: - Color - Borde redondeado - Sombreado 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 que aparece en la barra de herramientas: Hecho esto, veremos la siguiente ventana donde tendremos que pulsar en Examinar: 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: 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) 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: A continuación pulsaremos en Subir fichero: Por último, nos aparecerá la siguiente ventana que nos indica el proceso de subida del archivo: Desde url En primer lugar debemos haber encontrado la imagen deseada en Internet, y posteriormente copiar la dirección web (url) de la misma. A continuación, pulsamos sobre Desde Url, pegamos la dirección y pulsamos sobre subir: Una vez el fichero se ha subido nos aparecerá esta pantalla: En ambos casos, (fichero local o ulr) una vez veamos que el fichero se ha subido correctamente, pulsaremos en listado Ahora tendremos que seleccionar la imagen y posteriormente pulsar en seleccionar: 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: Hecho esto, el resultado sería el siguiente: Opciones Avanzadas: A continuación presentamos opciones disponibles para configurar la imagen y que no son de obligado cumplimiento. - 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: - 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. 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 Imagen al pasar el ratón Imagen al salir del ratón Insertar/Editar archivo multimedia Para insertar un vídeo audio de nuestro ordenador tendremos que hacer lo siguiente: Pulsamos sobre el icono Insertar archivo multimedia de la barra de herramientas: Hecho esto nos aparecerá la siguiente pantalla en la cual tendremos que seleccionar que tipo de fichero es el que queremos insertar. 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. Desde aquí seleccionaremos el fichero que acabamos de subir y pulsamos sobre Seleccionar: 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. A continuación, en el cuerpo del contenido veremos que se ha insertado un cuadro de las mismas dimensiones que el vídeo. A continuación mostramos como se visualizaría el video en la página web. 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. Para insertar un video o audio desde otro entorno pulsaremos sobre el icono Insertar fragmento html de la barra de herramientas 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: 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: Por último mostramos como se vería este mismo video en nuestra página web: 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: 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" />. Si visualizamos nuevamente el contenido en nuestra página web podemos comprobar que el problema ha quedado resuelto: 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. Una copiada la URL nos iremos a nuestro contenido y situados sobre la pestaña "cuerpo" pulsaremos sobre el icono correspondiente. 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. 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". 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" 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" Realizados estos pasos ya estaría insertado el vídeo en nuestro contenido, sin olvidar pulsar sobre "Guardar y Salir". 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" 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" Realizados estos pasos ya estaría insertado el audio en nuestro contenido, sin olvidar pulsar sobre "Guardar y Salir". 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. Para incorporar una presentación de slideshare a nuestro contenido copiamos la url de la página de slideshare. 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. Si la presentación se ha insertado correctamente el contenido se verá se la siguiente forma. El contenido con la presentación incorporada queda como se ve en esta imagen. Insertar publicación de Scribd Esta herramienta nos permite insertar documento de scribd. Para incorporar un documento de scribd a nuestro contenido copiamos la url de la página de scribd. 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. Si lo hemos incorporado correctamente el contenido se verá de la siguiente manera: El contenido con el documento incorporado queda como se ve en esta imagen. 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. 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. 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. 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á: 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. 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: Una vez hayamos terminado de trabajar con el contenido, pulsamos sobre 'Publicar' 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. 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 mostrará en pestañas. Pulsaremos en cada una de ellas para acceder a la información: Paginación: Divide tu contenido en varias páginas. Se pasará de una información a otra pulsando sobre el número de página correspondiente: Carrusel: Presenta una lista de contenidos horizontalmente. Se pasará de una información a otra pulsando sobre las flechas de las derecha e izquierda: 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. Al pinchar en el icono de insertar HTML como texto nos aparece la siguiente ventana, en donde debemos incluir el codigo HTML. Al pinchar en insertar nos quedará el codigo insertado como texto de la siguiente manera: Insertar fórmula Con este editor podemos incorporar al contenido fórmulas matemáticas. 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. 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: Insertar cálculo Esta herramienta nos permite insertar una fórmula matemática y realizar cálculos interactivos. Al pinchar en el icono del editor nos aparece la siguiente ventana para editar la fórmula: 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: 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. ¿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. Al pinchar en el símbolo "=" obtenemos en una ventana independiente un gráfico de la función. Una vez incorporado el contenido a nuestra pagina se verá de la siguiente manera: 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: 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: 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: En caso de que nuestro contenido sea accesible, nos aparecerá este mensaje: