Los widget generados a partir del contenido interno de la universidad son:
Todos estos widget se encuentran en el desplegable Añadir del Gestor UCM.
Para añadirlos debemos pinchar en el icono del widget en concreto y arrastrar hasta la sección de la plantilla donde queremos insertarlo.
Para que el widget esté activo debemos configurarlo, bien pulsando sobre el engranaje a la derecha de la barra amarilla, o bien, si es la primera vez que vamos a configurarlo, pulsando sobre el texto resaltado en azul de configuración.
Pulsando sobre el botón aceptar en las distintas pestañas se guarda la configuración o apariencia y una vez cerremos debemos pulsar sobre publicar (actualizar) en el apartado de Estado del menú izquierdo para que sean visibles los cambios..
Puesto que los widgets tienen distinta configuración, hemos creado una sección por cada uno de ellos donde se explican de forma más exacta sus características particulares.
El directorio es la base de datos con información de personal y entidades de la UCM. La web muestra los datos de directorio en los resultados del buscador y en las páginas que utilizan los widgets de directorio.
Podremos incluir una ficha de directorio mediante este widget. Con él podremos mostrar una entidad, el listado del personal de una entidad, o una persona concreta de cierto cargo.
En la pestaña apariencia podemos seleccionar los aspectos que queremos que se muestren en la ficha:
Hay 2 formas para la visualización de la información de directorio.
La información es actualizada por personal de la Oficina de Información a la Comunidad Universitaria. Los cambios o errores deben comunicarse allí.
Si navegamos como usuario identificado, en la propia ficha nos aparecerá un botón mediante el cual podemos comunicar los datos incorrectos:
Pinchando sobre dicho botón, accedemos a un formulario:
Otra vía sería enviar un correo a infocom@ucm.es, con asunto Directorio, aportando la nueva información para actualizar los datos de la persona o entidad.
Si lo que queremos es añadir/cambiar la foto que aparece en la ficha de directorio, debemos abrir una incidencia en Helpdesk adjuntando el fichero con la foto.
La fotografía debe ir en formato jpg o png y resolución en píxeles de 450 de alto por 300 de ancho, con el nombre y apellidos de la persona como nombre del archivo, por ejemplo: JuanGarcíaGarcía.jpg
Con este widget podremos añadir un mapa con las inmediaciones del lugar que deseemos.
Para ello, insertamos el mapa directamente mediante URL, o bien podemos usar un buscador para señalar un lugar concreto.
También podemos indicarle los edificios que queremos que aparezcan en el mapa.
Ejemplo de un mapa indicando que marque las facultades:
Una vez localizado el mapa en Google Maps podemos hacer lo siguiente:
src":<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3036.4165905304467!2d-3.7267453843302873!3d40.44391567936195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd422970dd08f051%3A0xcdf057712d377c53!2sFacultad%20de%20Medicina%20UCM!5e0!3m2!1ses-419!2ses!4v1646652631553!5m2!1ses-419!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
El widget nos permite elegir uno o varios iconos entre un conjunto de imágenes disponibles, e incorporarlos a nuestra web.
Se pueden solicitar nuevos iconos, abriendo incidencia en Avisos de los Servicios Informáticos.
Los iconos están clasificados en las siguientes categorías:
Iconos del widget Iconos
Podemos insertar una serie de iconos mediante este widget. Para configurarlo nos aparece la siguiente pantalla:
Pulsando sobre nuevo icono, se nos permite seleccionar los iconos que queramos incluir.
Por último, tenemos que pulsar aceptar para incluirlos.
Ahora podremos configurar las URL a las que queremos que nos redirijan, cambiarle el orden y los títulos.
Si vamos a la pestaña de Apariencia, nos ofrecerá la posibilidad de elegir la justificación, es decir, a que lado de la pantalla colocamos los iconos y en qué disposición, en fila (horizontal) o en columna (vertical).
Disponemos de tres tamaños predeterminados:
La mayoría de los iconos proceden de Font Awesome. Son iconos vectoriales, es decir, podemos aumentar su tamaño sin perder calidad.
El aspecto final sería una fila de iconos como la siguiente:
Los iconos de las categorías "Portada" y "Redes Sociales" son formatos PNG.
Clicando sobre "Iconos" en la barra de herramientas del widget de texto, podemos añadir iconos de las categorías: Biblioteca, Directorio, Generales, Web y Redes Sociales.
A diferencia de los iconos del widget "Iconos", no contienen título ni URL.
Iconos. Herramienta del widget de texto
Podemos incluir un buscador sobre el contenido de la universidad.
Dependiendo del tipo de recurso que queramos que aparezca al buscar, debemos seleccionar un buscador diferente dentro del listado.
Los buscadores los encontramos agrupados en las siguientes categorías:
Vamos a ver un ejemplo, buscamos el término "complutense" en un buscador de vídeos que tenemos insertado en nuestra página:
El resultado será un listado de vídeos añadidos a la Web UCM que tienen algo que ver con el término utilizado:
El Widget Vídeos nos permite insertar la URL de vídeos YouTube y Vimeo para incrustarlos en nuestras páginas.
Procedimiento:
Una vez hemos visto cómo trabajar con los widgets que permiten insertar información interna a la web, vamos a ver cómo podemos incluir otro tipo de información ubicada externarmente a las aplicaciones UCM.
Veremos los widgets:
Mediante este widget podremos añadir en nuestra página una web externa a la UCM.
Tendremos en cuenta que dicha web se insertará "tal cual", con sus menús, elementos, publicidad en su caso... Por ello es importante valorar la idoneidad del contenido que deseamos insertar.
Para ello, arrastramos y soltamos el widget Web externa a la página en el lugar que deseamos insertarlo:
Como decíamos, si insertamos la web externa en una columna menor al 100%, por ejemplo, en una plantilla a tres columnas en la columna central, la página se ajustará a dicho ancho, independientemente de que dentro del widget hayamos establecido el 100% del ancho, que se refiere a su contenedor.
Si la página web externa es "responsive", al ver reducido su ancho nos ofrecerá la vista adaptada a dispositivos móviles.
Por medio de este widget podremos insertar en nuestra web una de las redes sociales disponibles: Facebook, Instagram, Linkedin, Pinterest, Tik Tok y Twitter.
Para ello, arrastramos desde el menú Añadir el widget Redes Sociales a la posición en la página en que queremos insertarlo. Por su propia naturaleza, suele ser conveniente que empleemos una posición estrecha, en una columna 30%, por ejemplo, de cara a una mejor presentación. Accedemos al menú configuración:
Con ello ya tendríamos, solamente, que actualizar la página y ya tendríamos nuestra red social preferida insertada en la web.
En las siguientes FAQs tienes la información de cómo obtener el código de cada red social:
El widget de Eventos muestra la lista de eventos de una facultad en concreto.
Para insertar dicha lista, arrastramos el widget desde el menú Añadir a la página en el lugar que deseemos insertarlo.
En la pestaña Apariencia podremos elegir varias opciones respecto a la forma en que se muestran los eventos:
Por medio del widget Calendario podremos incrustar en nuestra web un calendario con la información, fechas y actividades relevantes de nuestra Facultad, Departamento o Servicio. Para poder publicar dicho calendario, éste de encontrarse configurado como Compartir públicamente.
Para ello, arrastraremos el widget desde el menú Añadir a la posición en que deseemos insertarlo y accederemos a su configuración.
Veremos que se añade bajo el menú anterior. Ya estaría listo para cerrar el cuadro de diálogo.
Si más adelante quisiéramos eliminar el calendario, podríamos hacerlo en esta misma opción.
Tenemos la posibilidad de seguir añadiendo otros calendarios siguiendo el mismo procedimiento, los cuales se irían reflejando a continuación.
No obtante, en la pestaña Apariencia podremos seleccionar la vista predeterminada, que se corresponde con las opciones de vista de las tres pestañas de la parte superior del propio calendario:
Con lo que ya tendríamos el calendario insertado en nuestra web.
Un iFrame (del inglés Inline Frame) es un marco (frame) dentro de una página web, es decir, un elemento HTML que permite incrustar documentos, mapas, videos y medios interactivos dentro de un documento HTML principal. Con ello podemos mostrar un recurso web secundario en nuestra página.
Sin embargo, debemos tener en cuenta que no es bueno abusar de su uso, llenando nuestra página de elementos a cargar. Empleado en exceso puede hacer que nuestra página sea más lenta, dado que estaría haciendo llamadas a elementos externos, ralentizando el tiempo de carga. Además, para no tener problemas de seguridad debemos ser cuidadosos con el origen y la fuente de lo que se incrusta y estar seguros de que se trata de un sitio seguro y fiable.
Como ya hemos visto, es muy útil para incluir vídeos o documentos, y casi cualquier servicio web actualmente ofrece una opción de incrustación copiando y pegando un pequeño código. Éste tiene la forma:
<iframe src="https://www.ucm.es" title="Web de la Universidad Complutense"></iframe>
En donde src especifica la dirección URL del documento a incrustar en el iframe.
Por cuestiones de accesibilidad, se considera una buena práctica incluir el atributo title, empleado por los lectores de pantalla para leer cuál es el contenido del iframe.
Los iframes soportan una serie de atributos (ancho, alto, permitir la pantalla completa, etc.) y también se les pueden dar estilos CSS (por ejemplo, para modificar los bordes del marco). Por ejemplo:
<iframe scr="/default.asp" width="100%" height="300px" style="border: none;"></iframe>
Normalmente, no será necesario incorporar manualmente estos atributos o estilos, dado que, como decíamos, la mayoría de los servicios web proporcionan ya el código necesario para su inscrustación en la página. Si tienes curiosidad por saber más acerca del iframe y los atributos, puedes consultar la siguiente página: <iframe>: el elemento Inline Frame.
En nuestro caso, aunque existe un componente específico para vídeos, vamos a insertar como ejemplo un vídeo de YouTube, aunque el procedimiento es similar para cualquier tipo de iframe, bien sea un documento, un elemento HTML, etc. Esta inserción se realiza desde el componente de texto de dos maneras posibles:
Para ello insertamos un widget de texto, arrastrando desde el menú Añadir a la posición deseada. Entramos en la configuración del componente insertar/editar medio
y realizamos los siguientes pasos:
Recordemos que para que estos cambios sean públicos, debemos actualizar la página.
Puede ocurrir, si estamos trabajando, por ejemplo, en una página con plantilla Dos columnas 70%-30% y deseamos incrustarlo en la columna derecha, que el tamaño predeterminado que nos da Google (o la página de la que obtengamos el código) sea excesivo y el vídeo desborde el ancho de la columna, dando problemas de visualización.
Una solución sencilla es reducir el tamaño del vídeo para ajustarlo al contenedor. Para ello, en la vista de configuración del componente, hacemos clic sobre el vídeo y pulsamos sobre el icono Insertar/editar medio. En la primera pestaña General podemos cambiar las dimensiones. Es importante mantener marcada la casilla Restringir proporciones, para evitar que el contenido se distorsione y pierda las proporciones. Basta con introducir un nuevo ancho o alto en píxeles: veremos que al pasar al otro campo el gestor ya actualiza el número en la porporción correcta automáticamente.
Pulsamos en Ok, cerramos y actualizamos la página. Ahora ya se ve correctamente.
Otra forma de insertar iframe y que nos proporciona mayor control sobre la inserción es hacerlo desde la vista de código del widget de texto.
