El widget "Texto" incorpora el editor TinyMCE, el cual es una potente herramienta que se usa en multitud de gestores y herramientas Web. La versión que se emplea en el widget de texto ha sido probada y adaptada al entorno UCM y está basada en la versión 4.

Con el Widget Texto podemos agregar texto, imágenes, vínculos, iconos, tablas e incluso código. Puede servir casi para cualquier cosa. Es una interfaz para la edición de texto que incluye opciones de estilo como niveles de encabezado, negrita, cursiva, listas, tipos de letra... 
Debemos tener en cuenta que:

Cuando configuramos un widget de texto, pulsando en la rueda dentada "Configurar widget" nos encontramos con los siguientes elementos:

• Título: de manera obligatoria debemos especificar un título para el contenido.
• Visibilidad en la web: si deseamos que el título sea visible marcamos esta casilla de verificación.
• Mostrar encabezado: si marcamos esta casilla se mostrará un campo de texto (encabezado) donde podemos introducir hasta un máximo de 1000 caracteres. Este texto será un resumen o introducción del contenido, al que se accede haciendo clic en el enlace "Leer más" o en el título del contenido.
  
   
• Contenido: introducimos el contenido. Para ello disponemos de un editor similar a un procesador de texto con el que podemos incluir texto e imágenes.

Una vez añadido el contenido pulsamos en el botón "Aceptar" y se mostrará el mensaje: ¡CORRECTO! Los cambios se han realizado correctamente. Después pulsamos "Cerrar" y actualizamos la página para publicar los cambios.

El editor de texto dispone de las siguientes herramientas:

En la fila superior encontramos: Negrita | Cursiva | Subrayado | Tachado | Alineamientos de párrafo a izquierda | Centrado | Derecha | Justificado | Sin alineamiento | Formatos | Estilos de párrafo | Iconos (selección)

En la fila central encontramos: Cortar | Copiar | Pegar | Pegar texto sin formato | Listas no numeradas | Listas numeradas | Disminuir sangría | Aumentar sangría | Rehacer | Deshacer | Citas | Insertar/editar enlace | Eliminar enlace | Abrir enlace | Etiquetas | Insertar imagen

En la fila inferior encontramos: Insertar tabla | Insertar línea | Limpiar formato | Mostrar bloques | Subíndice | Superíndice| Insertar carácter especial | Insertar multimedia | Insertar fecha/hora | Mostrar marcas ocultas | Espacio fijo | Insertar salto de página | Pantalla completa | Buscar y reemplazar | Ayuda | Vista de código HTML.
 

La opción Pantalla completa permite ganar mucho espacio para trabajar y hace más cómoda la edición del contenido, pero para guardar los cambios, debemos salir de la pantalla completa y así se muestran los botones "Aceptar" y "Cerrar".

Es posible que, tras un rato editando texto, nos encontremos con que cuando pulsamos en Aceptar nos sale una pantalla en blanco... hemos perdido la sesión y con ella todo el trabajo que habíamos realizado.

Pantalla en blanco

Las causas pueden ser diversas, por ejemplo, mucho tiempo de inactividad (el programa de edición se ejecuta de forma local en nuestro ordenador y el servidor interpreta que no estamos realizando ninguna acción, aunque estemos editando texto), también puede haber ocurrido un corte de red o que hayamos cambiado la configuración de red activando, por ejemplo, la VPN desde casa...

Problemas cuando copiamos y pegamos contenido

Cuando copiamos información desde una página web, desde un procesador de textos tipo Word o de otras fuentes, y la pegamos en el widget de texto, arrastramos códigos de control y etiquetas que pueden provocar errores y comportamientos extraños en nuestras páginas Web.
Por otro lado, si el texto que copiamos incluye imágenes, al pegarlas pueden insertarse archivos binarios problemáticos en el código de la página.

Para evitar arrastrar elementos que no son visibles y que no funcionan en nuestro entorno tenemos algunas soluciones:

Opción primera:

1. Copiamos el contenido de Word, de una página Web o de otra fuente.
2. Lo pegamos en el Bloc de notas de Windows, al que se puede acceder de las siguientes maneras:
   • Para abrir el Bloc de notas, en el cuadro de búsqueda de la barra de tareas de Windows escribimos Bloc de notas y luego lo seleccionamos.
   • Clicamos con el botón derecho del ratón en el escritorio de Windows > en el menú contextual seleccionamos: Nuevo > Documento de texto.
3. Volvemos a copiar la información desde el bloc de notas (se copia sólo el texto).
4. Pegamos el texto copiado del Bloc de notas en el widget Texto.
   

Opción segunda:  Creamos todo el contenido en nuestro editor "Widget Texto".

El menú desplegable "Párrafo" permite convertir el párrafo seleccionado en seis estilos de cabecera (aunque el estilo 5 y 6 son visualmente idénticos) y en un estilo pre-formateado.

Los estilos vienen especificados a nivel de HTML con las etiquetas:

• P para párrafo
• H1 a H6 de encabezados (seis niveles de encabezados):  permiten organizar el contenido de manera jerárquica. Piensa que el título de la página es el título de nivel 1, así que cada una de las grandes secciones en las que dividas tu contenido puede tener un título de nivel 2; y dentro de estas, si tienen subsecciones, estarán precedidas de un título de nivel 3.

  Hay que ser consistente en el uso de los encabezados y no dejar huecos en el orden: por ejemplo, es un error pasar de <h2> a <h4> sin utilizar <h3>. Para comprobar que se está haciendo un uso correcto de los encabezados existen varias herramientas, por ejemplo, la herramienta online WAVE. Web accessibility evaluation tool.

• Pre para texto Pre-formateado, que en este caso usa una fuente y espacios de tamaño fijo.

El tipo de letra viene definido por las hojas de estilo CSS que se han definido para todas las páginas del gestor.

Podemos modificar la estética del contenido aplicando los Formatos predefinidos disponibles.

Si pulsamos en Formatos, se muestra una lista de estilos organizados por tipo de contenido. Estos formatos han sido creados y estandarizados para el Gestor Web institucional.

Los formatos están organizados por tipos y sólo se podrán aplicar al tipo de elemento correspondiente. Es decir, si intentamos aplicar un estilo de imagen o de tabla a un elemento de texto, no será posible.

Se pueden combinar varios estilos, es decir, aunque apliquemos un formato de cabecera, podremos aplicar a partes de ese bloque de cabecera otros estilos específicos de texto.

 Cuando se usan los formatos debemos tener cierto cuidado: cuando aplicamos un estilo sobre un elemento que ya tiene definido otro estilo, el nuevo se acumula sobre el anterior. Esto puede provocar efectos extraños o no deseados y provocar un "caos" de estilos.
En estos casos lo mejor es seleccionar el elemento que queremos limpiar de estilos, pulsar el botón: "Limpiar formato"   y empezar de nuevo (a veces habrá pulsarlo más de una vez para limpiar del todo el formato).

El botón  Cita se corresponde con la etiqueta HTML: blockquote y se recomienda usarlo cuando se va a incluir un contenido literal sacado de otro lugar. Cuando se emplea este elemento para identificar un bloque de texto que es una cita, se le pueden aplicar estilos específicos, lo que le permite diferenciarlo del resto de contenido de la página. Los estilos de la cita pueden incluir un tipo de letra distinto, un sangrado y fondo de otro color, así como un espaciado respecto al resto de los bloques de texto. Por ejemplo, se podría definir un estilo como los mostrados en los siguientes ejemplos:

Las listas nos permiten crear listados de elementos. Tenemos dos tipos de listas posibles:

1. No numeradas: un punto o recuadro rojo precede a cada elemento del listado. El estilo presenta ligeras variaciones según el nivel de sangría de la lista.
2. Numeradas: muestra un listado de elementos numerados y no incluye variaciones, aunque aumentemos la sangría.

Las tablas distribuyen los datos en filas y columnas y deben tener definidos correctamente los encabezados. Una tabla permite buscar con rapidez y facilidad los valores de diferentes tipos de datos.

Las tablas ayudan a organizar datos e información de manera práctica, pero deben ser simples si deseamos que sean accesibles para personas que utilizan lectores de pantalla. Las tablas deben ser uniformes, evitando dividir, combinar o vincular celdas. Las tablas simples accesibles tienen el mismo número de filas por columna y el mismo número de columnas por fila. 
Las tablas complejas (anidadas) no son funcionales, así que chequea cómo son tus tablas y mantenlas simples y solo con encabezados de columnas y filas. En algunos casos podemos evitar el uso de una tabla compleja convirtiendo esa tabla en varias tablas simples.

Las Herramientas de evaluación de accesibilidad web nos permiten identificar y corregir errores de accesibilidad.

La primera opción del botón desplegable Tabla   nos permite nos permite dibujar una tabla con el número de filas y columnas que necesitemos:

Las tablas nos ofrecen opciones de manejo estándar, como por ejemplo insertar filas y columnas (antes o después de la actual) fusionarlas y dividirlas. Podemos realizar dichas operaciones desde el botón tabla o desde el menú contextual, que se muestra cuando seleccionamos la tabla.

Una vez creada la tabla podemos usar los ajustes de las esquinas para redimensionarla al tamaño deseado. También, mientras estamos situados en cualquier celda de la tabla, podemos usar el botón Tabla para seleccionar las Propiedades de la tabla y ajustar los distintos parámetros. Podemos ajustar el tamaño, tanto en porcentaje como en píxeles (px) como se ve en la imagen:

Propiedades de tabla: las opciones de la pestaña "Avanzado" no funcionan: no podemos aplicar estilo de borde, color de borde y color de fondo porque las tablas tienen una serie de estilos predefinidos que eliminan las configuraciones.

Propiedades de Fila: cuando intentamos configurar las propiedades de una fila, el estilo y color del borde sí se puede especificar, pero el color de fondo es sobrescrito por los estilos por defecto.

Propiedades de Celda: podemos configurar las propiedades de una celda, el estilo y color del borde y de fondo.

Estilos predefinidos de Tabla: para aplicar un estilo predefinido a una tabla, nos situamos en esta y clicamos en Formato > Estilos de Tabla. Tenemos 5 estilos predefinidos:

• Tabla básica
• Tabla con fondo gris
• Tabla con fondo gris rayada
• Tabla sin fondos
• Ficha

Encabezados de tabla

Los encabezados de columna o de fila definen el tipo de valores que contienen las celdas de la columna o fila correspondientes.

Para definir un encabezado el procedimiento es el siguiente:

1. Nos situamos en la celda que deseamos convertir en encabezado.
2. Clicamos en el icono Tabla y en el desplegable seleccionamos Celda > Propiedades de celda.
   
    
3. En la ventada "Propiedades de celda", en el campo "Tipo de celda" seleccionamos "Celda de cabecera"
   
    
4. Pulsamos OK

Ejemplo de tabla simple con encabezados

Pulsando el botón  del widget Texto podemos seleccionar entre un conjunto de iconos clasificados en grupos: Biblioteca, Directorio, Generales, Web y Redes sociales.

Haciendo clic en el icono que nos interesa se inserta en nuestra página.