Ir al contenido principal

Edición Web con el Gestor Web Institucional de la UCM

Guía de apoyo a la edición Web

3.1 El widget de texto. El editor TinyMCE

El widget de texto es el principal método para incorporar contenidos a nuestra web. Desde él se podrá incluir desde texto simple, pasando por tablas, imágenes, archivos y todo tipo de contenido.

El widget de texto es el punto principal de inserción de contenidos en el gestor.

 

3.1.1 Introducción

Con este widget se pueden insertar textos con ciertos estilos predefinidos, pero también se pueden crear tablas, listados, insertar vínculos, imágenes, vídeo, audio, archivos... además permite también la edición del código HTML, algo que a veces agiliza mucho el trabajo a la hora de actualizar contenidos.

El widget de texto embebe 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.

El aspecto general que encontramos cuando configuramos un widget de texto es el siguiente:

 

Configuración Widget Texto

 

En primer lugar encontraremos la sección del Título, como en el resto de los widgets, en la que podemos especificar un título para el contenido y si deseamos que sea visible o no. En cualquier caso, el título es obligatorio al igual que algún contenido en el cuerpo.

Inmediatamente debajo, encontraremos la sección Encabezado y Contenido que permitirá escribir una descripción o resumen del contenido y con la cual podremos dar paso al resto del contenido del widget. Lo veremos posteriormente en más detalle.

Por debajo, encontramos el cuerpo del editor. Con la sección de botones que nos permitiran usar las distintas herramientas, formatos y estilos disponibles, e inmediatamente debajo el cuerpo para introducir el contenido.

Por último, encontraremos una línea que nos informara del tipo de elemento en código html donde se encuentra situado el editor. En la imagen por ejemplo aparece la etiqueta p que corresponde a un párrafo.
 

3.1.2 Botones de edición

Hagamos un breve repaso a los elementos que nos ofrece el editor.

Nos encontramos con una serie de botones situados en tres filas:

 

Botones de edición widget de texto

 

En la fila superior encontramos: Negrita | Cursiva | Subrayado | Tachado | Alineamientos de parrafo 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 | Listas numeradas | Disminuir sangría | Aumentar sangría | Rehacer | Deshacer | Citas | Insertar/editar enlace | Eliminar enlace | Abrir enlace | Etiquetas | Insertar imagen

Conviene señalar que se permite un número ilimitado de acciones tanto para deshacer como rehacer, lo cual resulta muy conveniente.

 

En la fila inferior encontramos: Insertar tabla | Insertar línea | Limpiar formato | Mostrar bloques | Subíndice | Superíndice| Insertar caracter 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 mayoria de las opciones son conocidas, aunque posteriormente entraremos en detalle en algunas de ellas.

Cabe destacar la opción Pantalla completa, que permite ganar mucho espacio para trabajar y hace mucho más cómoda la edición del contenido.

También mencionaremos la opción Mostrar bloques que permite identificar los distintos bloques que tenemos definidos y el contenido que abarca cada uno. Resulta muy útil para a veces aclarar los formatos que se están aplicando o simplemente para organizar el contenido.

Por último mencionar el atajo de teclado CTRL+S, que permite grabar los cambios que hemos realizado, de la misma forma que si hubieramos pulsado "Aceptar".

 

Cierre admiraciónPuede que, tras un rato editando texto, nos encontremos con que cuando pulsamos en Aceptar nos sale una pantalla en blanco... en ese momento una gota de sudor frio recorrerá nuestra frente, pues sabemos lo que significa: hemos perdido la sesión y con ella todo el trabajo que habíamos realizado.

 

Pantalla en blanco
Pantalla en blanco

 

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

Problemas cuando copiamos y pegamos contenido en un widget de texto

Cuando copiamos información desde una página web, desde un procesador de textos tipo Word o de otras fuentes, y luego lo 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 en el código de la página que también pueden ser problemáticos.

Para evitar arrastrar elementos que no son visibles y que no funcionaran 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 siguiente 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 de texto.
    Bloc de notas

Opción segunda:  Creamos el contenido en nuestro editor "Widget de texto".

3.2 Encabezado, formatos, listas

3.2.1 Encabezado

La sección encabezado nos permite insertar una descripción o resumen del contenido del widget, de manera que se muestra inicialmente sólo el encabezado y, si se pulsa en el enlace Leer más, se muestra todo el contenido. Al pulsar en dicho enlace nos dirigimos a una página del tipo https://URL/website/textos/ID donde ID es un identificador único para cada widget de texto.

 

Encabezado

 

Si queremos activar el encabezado pulsaremos a la rueda dentada del widget para configurarlo y, una vez dentro, activaremos la casilla Mostrar encabezado. Se desplegará una nueva sección donde introduciremos el encabezado (resumen o entradilla del contenido). Este es el texto que se mostrará inicialmente y, debajo, el enlace "Leer más" , que da acceso al contenido completo.

Dentro del encabezado se pueden usar las mismas herramientas que encontramos en el cuerpo del widget de texto:

 

Mostrar encabezado

 

Hacer notar que aunque pone máximo 1000 caracteres, en la práctica esta limitación no está funcionando y es sólo una recomendación.

 

Cierre admiraciónSi queremos dejar el widget con el aspecto normal, sin encabezado, podemos estar tentados de simplemente desmarcar el checkbox, pero para que el encabezado desaparezca realmente habrá que borrar todo el contenido de esa sección.
 

 

3.2.2 Estilos y Formatos

Igual que en cualquier procesador de textos, para modificar la estética de nuestro contenido y estructurarlo, existen una serie de estilos y tipos de formato predefinidos:

 

Menú desplegable Párrafo

 

Desplegable párrafo

 

Tenemos a nuestra disposición , además del estilo base para los parrafos, seis estilos de cabecera (aunque el estilo 5 y 6 sería visualmente idéntico) y un estilo preformateado.

Los estilos se aplican a párrafos completos.

Para desactivar un estilo de un párrafo, basta con pulsar en el estilo Párrafo o bien volver a hacer clic en el mismo estilo que tiene aplicado.

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

  • P para párrafo
  • H1 a H6 de encabezados
  • y Pre para texto preformateado, que en este caso usa una fuente y espacios de tamaño fijo. Esto difiere de los estilos normales que usan fuentes proporcionales y que cuando usamos justificación, los espacios pueden cambiar de tamaño.

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

 

Formatos

Si queremos modificar su estética, a cada uno de estos estilos les podremos aplicar alguno de los Formatos predefinidos que tenemos disponibles.

Si pulsamos en Formatos, se nos mostrará una lista de estilos organizados por el tipo de contenido al que se pueden aplicar. Estos formatos han sido creados y estandarizados para el gestor web institucional. No obstante, esta lista no es cerrada y si fuera necesario se podría evaluar la inclusión de nuevos formatos de interés general.

 

Tipos de formato

 

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

Cuando activemos uno de estos formatos sobre un elemento, este se mostrará con una marca para indicar que está activo sobre ese elemento donde estamos situados.

En el caso de los estilos de cabecera, se aplicarán, como su nombre indica, a los bloques de cabecera marcados con al completo.

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

 

Combinar formatos

 

 

Cierre admiraciónCuando se usan los formatos, hay que tener cierto cuidado, pues cuando aplicamos un estilo, por ejemplo de texto, sobre un bloque que ya tuviera definido uno anteriormente, el nuevo se acumula sobre el anterior. Esto puede provocar efectos extraños o no deseados y degenerar en un caos de estilos.

 

Además, para desactivar un estilo, tendríamos que seleccionar el mismo bloque exactamente sobre el que lo aplicamos y pulsar de nuevo en el botón de ese estilo. Esto puede resultar complicado. Por ejemplo en la siguiente pantalla se observa que el fragmento de texto "on" además de ser un Encabezado 1, tiene asignado el estilo de cabecera "Cabecera oscura texto claro" y sobre él se han apilado los estilos: Fondo gris, Fondo naranja, Fondo verde, Sumario derecha.

 

Estilos

 

Cuando llegamos a este punto es dificil saber en qué orden se aplicaron los estilos y como poder desahacerlos (salvo que consultemos el código html). En estos casos lo mejor es seleccionar el elemento que queremos limpiar de estilos y pulsar el botón:

  • Limpiar formatoBotón limpiar formato 

y empezar de nuevo (a veces habrá pulsarlo más de una vez para limpiar del todo el formato). En caso de seleccionar un elemento de texto al que se le aplique un formato de bloque (como un encabezado), este mantendría el formato del bloque, pero no el específico de texto.

Es interesante estar familiarizados con los formatos disponibles, pues nos permitirá dar un aspecto visual a nuestros contenidos, aunque siempre dentro de las restricciones impuestas por las hojas de estilo generales.

 

3.2.2.1 Cita

Cabe mencionar un último elemento que esta muy relacionado con los estilos, que es el botón:

  •  Botón Cita Cita .

Este elemento corresponde a 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, asi 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:

 

Ejemplo de cita con fondo azul

Ejemplo de cita fondo gris

 

Los estilos predefinidos para las citas en el gestor web son muy discretos, aunque se ve claramente la diferencia con el resto del texto:
 

Formato de Cita y de Texto

 

No obstante, en un momento dado, se podría valorar incluir nuevos estilos para las citas, que podrían aparecer como una categoría nueva en la sección de Formatos.
 

3.2.3 Listas

Como su propio nombre indica, las listas nos permitiran generar los típicos listados de elementos que nos permitiran, por ejemplo, construir menús, listados de enlaces, árboles de páginas...

Sólo tenemos dos tipos de listas posibles:

  1. No numeradas.
  2. Numeradas.

El estilo de punto o recuadro rojo para las listas no numeradas, viene predefinido y tiene ligeras variaciones según el nivel de sangria de la lista.

El estilo numerado, en lugar de un punto añade la numeración de los elementos y no incluye variaciones aunque aumentemos la sangría.

 

Lista no numerada y lista numerada

 

Un caso típico de uso son las listas de enlaces. Convirtiendo cada elemento de una lista en un enlace, podremos simular el comportamiento del widget "Documentos y Enlaces".

Tambien podemos usarlas para crear menús. Combinando las listas con los formatos de cabecera o botón podríamos generar menús de opciones, pero dentro del cuerpo de nuestra página.

Aunque hay muy pocos estilos definidos para las listas, el Formato Lista horizontal puede ser interesante para maquetar, por ejemplo, un menú, combinando los enlaces con los estilos de Botón o de Cabecera.

Por ejemplo:

Lista horizontal

 

Como siempre, al margen los estilos existentes, se puede valorar la inclusión de algún estilo adicional, aunque tendrá que ser valorado y aprobado por el departamento de Imagen corporativa.

 

3.3 Enlaces, tablas, anclas

3.3.1 Enlaces

Uno de los elementos principales de cualquier web, son los enlaces. El widget de texto es una herramienta básica para insertar todo tipo de enlaces dentro de nuestras páginas web: desde enlaces normales, a enlaces en listas, pasando por enlaces desde imágenes o desde botones.

En general, para insertar un enlace, lo más sencillo es seleccionar el elemento que queremos que lo contenga, bien sea una imagen o un fragmento de texto que hayamos introducido y pulsar en el elemento Insertar/editar enlace Botón insertar enlace.

 

Ejemplo de enlace

 

Se nos mostrará el siguiente cuadro de diálogo que nos permitirá introducir:

  • La URL o dirección del enlace.
  • El Texto para mostrar, que será el texto del enlace.
  • El Título o también llamado tooltip, que será un campo de utilidad para personas con diversidad funcional o simplemente como ayuda informativa cuando pasemos el cursor pon encima de él.
  • Destino, que permite elegir si el enlace se abrirá en una nueva ventana o en la misma.

 

Insertar enlace

 

El aspecto de nuestro enlace cuando tengamos el cursor situado sobre él seria el siguiente:

Enlace con título
Muestra el texto del campo Título

 

En el cuadro de diálogo Insertar enlace hemos omitido un elemento muy importante con el aspecto de una carpeta con una lupa. Este elemento será un punto de entrada para insertar archivos y enlazarlos en nuestra página web.

Si pulsamos en él se abrirá la aplicación Archivos, que veremos en más detalle en la sección correspondiente de este curso. En el cuadro de diálogo emergente podemos arrastrar el archivo que queramos subir y tras unos segundos aparecerá en el listado de archivos que tenemos disponibles en la página web en que nos encontramos.

 

BombillaLos archivos que carguemos quedaran almacenados y vinculados a la página web donde los subamos, sin embargo la ruta URL a los archivos será común para todos los archivos subidos al website y normalmente tendrá el siguiente aspecto: https://www.ucm.es/nombrewebsite/file/nombre-fichero

 

Después, para volver a la inserción del enlace, pulsaremos en su icono (aparecerá un signo más + junto al cursor):

Icono archivo
Icono de archivo PDF

 

Insertar enlace

Y por último pulsaremos en Ok.

Normalmente, cuando insertemos un enlace escribimos su URL completa. Sin embargo, cuando estamos enlazando páginas situadas dentro de nuestro propio website, puede ser más conveniente usar URL relativas.

 

libro abierto

Recordemos que si usamos enlaces relativos y en un momento dado cambiamos la URL de website, no tendremos que rehacer todos los enlaces con referencias a nuestro website, puesto que omitimos la parte de la URL que hace referencia al dominio y a la carpeta del website.

Por otro lado, resulta mucho más breve escribir simplemente el nombre de una página web que toda la ruta de la misma. Incluso en el caso que enlacemos archivos, puede ser cómodo el reemplazar toda la ruta hasta el nombre del website por un ./ Por ejemplo en el caso anterior podríamos simplemente escribir: ./file/rockbotic en vez de https://www.ucm.es/pruebasecampus/file/rockbotic

Para retirar un enlace basta situarse sobre él y pulsar en la opción quitar enlace Botón quitar enlace.

Si queremos verificar el funcionamiento del enlace sin salir del editor podemos pulsar en abrir enlace Botón abrir enlace.

 

Estilos de botón

Por último comentar que dentro de formato existe un bloque de estilos directamente relacionado con los enlaces, es la categoría Estilos de Botón. Si ya tenemos un enlace creado, podemos seleccionarlo y pulsar en una de las opciones de este estilo para darle el aspecto de un botón, el cual, cuando pasemos el cursor sobre él, se resaltara.
 

3.3.2 Tablas

Las tablas han sido durante mucho tiempo la forma preferida de maquetar el contenido en páginas web, pues era muy cómodo fijar la posición de los distintos contenidos (como imagenes, texto, listas, etc.) en los espacios que marcaban las celdas.

Sin embargo, presentaban distintos inconvenientes: la velocidad de carga era lenta, retocar el aspecto de los contenidos era laborioso y además, con la variedad de dispositivos y distintos formatos de pantalla, el comportamiento de las tablas es en general malo y no responden bien ante los cambios de resolución, por lo que han caido en desuso y sólo se emplean cuando se quieren realmente mostrar datos con el aspecto de una tabla. Aún así, se las puede usar para otros fines, como maquetar un menú vertical.

Para insertar una tabla podemos seleccionar el botón:

  • Tabla Botón tabla

y allí seleccionar la primera opción Tabla, la cual nos permitirá dibujar una tabla con el número de filas y columnas que necesitemos:


Configuración de tabla

 

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... tanto desde el botón tabla como en el menú contextual que aparece cuando nos situamos sobre la tabla podremos realizar dichas operaciones:
 

Dimensionar tabla

 

Una vez creada la tabla podremos usar los ajustes de las esquinas para dimensionarla 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. Principalmente podremos ajustar el tamaño, tanto en porcentaje como en tamaño absoluto, especificandolo en pixels (px) como se ve en la imagen:

 

Propiedades de tabla

 

En las propiedades de la tabla, encontraremos otros elementos para configurar el comportamiento de las celdas. Por otro lado, en avanzado, aunque se muestran diversas opciones relacionadas con, por ejemplo, los colores de fondo o el estilo del borde, las mismas no funcionarán, pues las tablas tienen una serie de estilos predefinidos que eliminan las configuraciones específicas que intentemos realizar. Pasa algo similar cuando intentamos configurar las propiedades de una fila, el estilo y color del borde si se puede especificar, pero el color de fondo es sobreescrito por los estilos por defecto.

Los estilos por defecto que podemos aplicar a las tablas vienen recogidos en la sección Formato -> Estilos de Tablas. Para aplicar uno de ellos, basta con que estemos situados en alguna de las celdas y seleccionemos el estilo que deseamos. Sin embargo, muchas veces el comportamiento no es el esperado y dado que podemos activar distintos estilos a la vez, unos pueden alterar el comportamiento de los otros y dar resultados extraños.

Quizás la mejor forma de tratar el aspecto de la tabla (sobre todo si no es muy grande) es definir el estilo celda a celda. Pues así tendremos más control sobre ella: desde las propiedades de la celda no tendremos tantas restricciones como desde las propiedades generales de la tabla. Para ello, basta situarnos en la celda que queremos modificar, pulsaremos el botón: Tabla->Celda->Propiedades de la celda y desde ahí podremos especificar el ancho, el alto, si la celda tendrá un formato de cabecera o de cuerpo, el ámbito en caso de que sea de tipo cabecera (aunque esto no suele tener impacto visual), el alineamiento del texto y en la sección Avanzada, podremos especificar el tipo de borde, el color del borde y el color del fondo. En este caso, los estilos de celda si se respetan:

 

Propiedades de celda

 

En la imagen superior hemos insertado unas imágenes de botones en las celdas de la primera fila, y los hemos convertido en enlaces a distintas secciones. La celda de la segunda fila, la hemos fusionado y aplicado un estilo de borde discontinuo (dashed) y color negro. El fondo de la celda lo hemos fijado azul.

Siempre que tengamos que especificar colores en las propiedades de los distintos elementos del editor o en el código HTML, tendremos dos posibilidades:
 

Bombilla

 

Especificar el nombre en inglés del color: black, blue, red, green... en este caso, nos tendremos que conformar con el valor por defecto para ese color.

 


Bombilla

Usar el código hexadecimal del color. Este tendrá el formato #XXXXXX y va desde #000000 hasta #FFFFFF, en el ejemplo es el método que hemos usado. Esto nos permitira una precisión completa a la hora de seleccionar un color. Para saber el código de un color en particular existen multitud de opciones. En la mayoria de los programas de retoque de imagen (por ejemplo paint.NET o Gimp), cuando seleccionamos un color nos informan de su valor hexadecimal. También podemos acudir a multitud de páginas en las que podremos especificar el color y nos darán su código hexadecimal, por ej. HTML color picker. Podemos ampliar esta información en el apartado de esta guía: Colores Web.

 

 

3.3.3 Anclas

Las anclas son identificadores que nos permiten marcar secciones de una página, de tal forma que podamos crear un hipervículo para ir directamente a ellas. Es decir, nos permiten crear un enlace a un lugar concreto de una página web.

Por ejemplo, si la página es muy larga, al final de la misma muchas veces vemos un enlace que pone volver al principio, o bien podemos hacer un listado de secciones de una página en las que haya enlaces a cada una de ellas. Para estas situaciones y otras muchas podemos usar las anclas.

Lo primero será establecer los puntos de inserción de las mismas, para ello seleccionaremos un elemento texto o imagén y pulsaremos el botón:

  • Ancla Botón ancla

En él se nos pedirá un identificador:

 

Identificador de ancla

 

Una vez insertada, aparecerá un pequeño símbolo de un ancla en el punto de inserción:

Símbolo de ancla

Cuando hayamos terminado de establecer nuestras etiquetas o anclas, podremos saltar a ellas desde cualquier punto de la página usando un enlace:

 

Enlace con ancla

 

El cuadro de diálogo de Insertar enlace nos mostrará la opción Ancla, donde se mostrará un listado desplegable con las que hayamos definido en ese widget, bastará con seleccionarla y pulsar Ok.

 

Bombilla

Aunque por defecto podemos enlazar las anclas desde el mismo widget de texto donde las hemos insertado, nada nos impide crear un ancla en un widget de texto y enlazarla desde otro widget que haya en la misma página.

 

En este caso, el cuadro de diálogo "Anclas" no mostraría ningún enlace en el listado, pero nada nos impide escribir a mano el id del ancla en el campo de la URL: #id.

Se le puede dar una vuelta de tuerca adicional a las anclas y hacer referencia incluso a anclas que no se encuentren en la página en la que nos encontramos, para ello, en "Insertar enlace" especifiquemos la URL de destino añadiendo al final de la misma "una almohadilla y el identificador", por ejemplo: https://www.ucm.es/pruebasecampus/menu-paginas#seccion-2

 

3.4 Iconos, imágenes, multimedia, vista de código

En esta última sección del widget de texto, haremos un breve repaso a las opciones de inserción de imágenes, iconos y medios, así como a la opción de visualizar y editar el código HTML que nos ofrece el widget de texto.

 

3.4.1 Insertar medios e imágenes

 

3.4.1.1 Multimedia

El widget de texto nos facilita la inserción de elementos visuales mediante dos botones: 

  •  Insertar medio.
     
  • Insertar imagen Insertar imagen.

 

En el caso del botón Insertar/editar medio se nos mostrará el siguiente cuadro de diálogo:

 

Insertar/editar medio

 

En él se podrá especificar el enlace del lugar donde está almacenado el elemento multimedia (no tiene por qué estar obligatoriamente en el gestor) y se podrán especificar sus dimensiones de visualización para embeberlo en la página.

 

BombillaAunque este cuadro de configuración está evidentemente pensado para vídeo, se puede usar perfectamente para insertar archivos de audio, aunque en ese caso, evidentemente, las opciones de dimensiones no tendría sentido especificarlas.

 


Cierre admiraciónCuando insertemos elementos externos al gestor web, por ejemplo, videos enlazados desde un servidor externo, siempre se deben especificar enlaces HTTPS, pues actualmente los navegadores bloquean el contenido mixto (HTTP y HTTPS) dentro de una página.

 

 

Con el botón de la carpeta con la lupa, de la misma forma que hacíamos desde Insertar enlace, tendremos de nuevo la opción de subir nuestro contenido multimedia a la aplicación Archivos, quedando en este caso almacenado en la página donde nos encontramos.

En la pestaña Incrustado tendremos la opción de personalizar el código HTML que usaremos para insertar nuestro medio, pues a veces puede ser interesante añadir parámetros para ajustar diversas opciones. Por ejemplo, para que se reproduzca automáticamente al cargar la página o deshabilitarlo.

Desde Avanzado se podría especificar un enlace para una Miniatura de imagen que pudiera actuar como portada del vídeo, sin necesidad de cargarlo (por ejemplo si se ha desactivado la reproducción automática), así como un Enlace alternativo.

 

Cierre admiraciónEs importante tener en cuenta, que el gestor institucional NO cuenta con un aplicación de reproducción multimedia, ni es el lugar adecuado para subir medios (video/audio), aunque se pueda utilizar de forma ocasional . Tampoco dispone de los recursos de hardware (procesamiento y almacenamiento) adecuados que este tipo de archivos requieren y que permitirían un funcionamiento óptimo a la hora de servir estos contenidos.

 

La recomendación para subir videos es YouTube. Todas las cuentas UCM pueden crear canales en YouTube y, si fuera necesario, se podría crear un Canal de Marca donde podremos subir los videos con la visibilidad que deseemos y asignar permisos a diversas cuentas para gestionarlo. Se pueden establecer los videos como Ocultos, en cuyo caso no se podrían localizar salvo que supiésemos la URL de los mismos.

Una vez subidos los videos a YouTube existen multitud de opciones para integrarlos en nuestras páginas web, entre otras, el widget de texto.

Dado que el gestor web no tiene una aplicación específica para la reproducción de contenido multimedia, la capacidad de reproducción del mismo dependerá del soporte de cada navegador a los distintos formatos de audio y video Se puede encontrar información muy detallada en las siguientes páginas de la Wikipedia:

 

3.4.1.2 Imágenes

La inserción de imágenes usando el widget de texto es el método por defecto para insertar contenido gráfico en nuestras páginas web. Para ello, el widget de texto cuenta con multitud de opciones para ajustar las imágenes que insertemos.

Para insertar una imagen pulsaremos el botón "Insertar/editar imagen" Insertar imagen.

La ventana de insertar imagen presenta este aspecto:

 

Insertar editar imagen

 

Las opciones son similares a las de otros cuadros de diálogo como el de insertar medio. Mencionar que el botón de la carpeta con la lupa, en este caso nos dirigirá a la aplicación galerías de imágenes donde podremos subir y gestionar las imágenes de nuestro Website.

No vamos a entrar más en detalle, pues todas estas opciones se verán en la sección del curso: Gestión de imágenes.

 

3.4.2 Insertar Iconos

El gestor web incorpora una librería de iconos que permite añadirlos directamente a nuestra página web. El widget de texto, incorpora la opción: Botón iconos del widget de texto.

La opción nos permite seleccionar el que nos interese de un amplio catálogo:

 

Iconos disponible en el widget de texto

 

Bastaría con hacer clic en el que nos interese y quedaría insertado en nuestra página.

 

BombillaSi al insertar el icono, nos parece muy pequeño, bastará con situarnos en la línea donde lo hayamos insertado y seleccionar otro estilo de texto, por ejemplo un Encabezado 1. El icono se adaptará al tamaño del mismo.

 

3.4.3 Editor HTML

El Widget de texto incluye una opción muy interesante para poder realizar personalizaciones así como para realizar fácilmente una copia de seguridad de nuestros widgets de texto, la opción Código fuente.

Mediante la opción Código fuente, podremos editar directamente el código HTML de nuestros widgets de texto, esto permitirá realizar de forma manual personalizaciones como las que nos ofrecen las herramientas del editor y algunas más.

Esta opción sólo la deberían usar usuarios avanzados, pero también puede ser muy útil para cosas simples como actualizar enlaces.

En este curso no vamos a dar información sobre las etiquetas y el desarrollo en HTML pues sería objeto de varios cursos más.

Podemos pulsar el icono: 

  • Botón Código fuente

Y veremos el código de nuestra página:

 

Código fuente de página

 

La edición en dicha ventana, resulta muy incomoda. Lo recomendable para hacer modificaciones es seleccionar todo el código, copiarlo y llevárnoslo a un editor de texto plano como el Bloc de notas de Windows o a un editor más profesional como el Notepad++. Una vez modificado en esos programas, podemos volver a pegarlo en nuestra ventana de código del widget de texto.

También, usando este proceso, podríamos hacer una copia del contenido del widget de texto guardándolo en un archivo de texto.

 

Cierre admiración

El hecho de poder modificar el código NO es la solución definitiva a la edición de las páginas y sólo debe usarse para cosas muy concretas, por diversos motivos:
 

 

  • Las personalizaciones de estilos, en muchos casos serán sobre-escritas por las hojas de estilo por defecto que posee la web de la UCM y que se usan para dar homogeneidad al aspecto del contenido.
  • El uso de lenguajes de scripts como JavaScript, no está permitido y el widget de texto "limpiará" el código retirando todo las referencias que se inserten de los mismos.
  • La edición directa del código HTML puede conllevar riesgos, ya que puede que incluyamos etiquetas que entren en conflicto con el funcionamiento del gestor, provocando comportamientos inesperados y bloqueos.