3. GESTIÓN DE CONTENIDO

La sección de Gestión de Contenido está destinada a los usuarios con permisos de edición y administración dentro del sistema. Su objetivo principal es facilitar la creación, actualización y organización de los diferentes elementos que componen el sitio web, garantizando una presentación clara, coherente y actualizada de la información para los visitantes.

A través de esta sección, los usuarios podrán modificar áreas clave de la plataforma. Se proporcionan herramientas visuales intuitivas para editar textos, insertar elementos gráficos, reorganizar contenidos y mantener la consistencia del diseño general del sitio.

Cada subsección de este módulo cuenta con instrucciones específicas y recomendaciones de uso que permiten mantener la calidad del contenido, prevenir errores comunes y asegurar una experiencia de navegación satisfactoria para los usuarios finales.

3.1 Secciones 

El portal administrador está estructurado en diversas secciones que organizan y presentan la información de forma clara y accesible para los usuarios. Cada una de estas secciones cumple una función específica dentro del sitio y puede ser actualizada o editada por los administradores o editores autorizados. A través de este módulo, se puede gestionar  el menú de navegación, las secciones del directorio, los servicios ofrecidos, la página principal, el contenido estructurado en categorías, ventanas flotantes y archivos multimedia (imágenes y documentos). La correcta administración de estas secciones garantiza que la información publicada sea coherente, actualizada y alineada con los objetivos institucionales.

A continuación, se describen cada una de las secciones que conforman la plataforma, junto con sus funcionalidades y procedimientos para su administración. Cada sección puede ser editada según los permisos del usuario y está orientada a facilitar la gestión del contenido institucional de manera estructurada y eficiente.

3.1.1 Menú

En este menú podemos encontrar las secciones correspondientes a oficinas, dependencias, procesos e información general de la universidad, las cuales a su vez despliegan subsecciones que hacen parte de las mismas.

Si queremos agregar una sección o subsección damos clic en el ícono + que se encuentra ubicado en la parte superior del panel como se ve en la siguiente imagen.

Estas secciones y subsecciones son las que se encuentran en el menú “hamburguesa” de la página principal del portal web, ubicado en la esquina superior derecha de la pantalla.

Si damos clic en una de estas secciones en el panel del administrador, nos presenta tres opciones: Editar, visualizar/esconder y eliminar.

La opción de editar que es ícono del lápiz, permite cambiar el nombre de la sección; el ícono del ojo sirve para esconder o visualizar la sección en la página y la cesta de basura para eliminar la sección.

Estas mismas opciones se presentan al dar clic en las subsecciones que se despliegan, en este caso en la opción de editar, se puede cambiar el nombre, grupo al que pertenece, navegación y agregar enlace si se requiere.

Nota: Se debe estar seguro de la acción que se va a realizar pues las secciones o subsecciones que se borren no podrán recuperarse.

3.1.2 Directorio

3.1.2.1 introducción

¿Qué es el directorio? 

El Directorio institucional es una herramienta que permite gestionar y consultar la información de las dependencias y sus extensiones telefónicas, organizadas por grupos dentro de la institución, facilitando la búsqueda y comunicación interna entre las diferentes áreas.

Vista general del módulo Directorio

El módulo Directorio permite gestionar la estructura organizacional de la institución mediante la administración de grupos, dependencias y extensiones.

Desde la pantalla de administración, el usuario puede realizar las siguientes acciones

• Visualizar los grupos, dependencias y extensiones registrados en el sistema.
• Realizar búsquedas de grupos, dependencias o extensiones mediante el campo de búsqueda.
  
• Registrar nuevos grupos, así como sus respectivas dependencias y extensiones.
  
• Editar o eliminar grupos, dependencias y extensiones existentes.

3.1.2.2 Gestión del directorio.

En la pantalla principal se muestran tarjetas por cada grupo, 
donde dentro aparecen sus dependencias y extensiones asociadas.

• Visualización -> Icono en la parte superior derecha de la pantalla. El sistema mostrará cómo visualizarán el directorio los usuarios finales.
• Buscador ->  Barra de búsqueda en la parte superior. Permite localizar rápidamente información dentro del directorio.
• Registrar un nuevo grupo : Botón ( + ) ubicado junto al buscador. Permite registrar un grupo y registrar las dependencias con sus respectivas extensiones.

Botones de las tarjetas:

Cada tarjeta de grupo cuenta con botones que permiten gestionar su información.

• Botón Agregar -> Permite Agregar la información del grupo, así como sus dependencias y extensiones asociadas.
• Botón Editar -> Permite modificar la información del grupo, así como sus dependencias y extensiones asociadas
• Botón Eliminar -> Permite eliminar un grupo del directorio.
  ⚠️ Importante:
  Al eliminar un grupo, también se eliminarán todas sus dependencias y extensiones asociadas.

3.1.3 Servicios 

Agregar Servicio

En este panel de edición se podrán agregar todos los servicios que sean necesarios, para realizar esta acción, damos clic en el icono + que está ubicado en la parte superior derecha del panel.

Editar servicio

Si lo que queremos es editar un de los servicios, ubicamos el puntero sobre uno de ellos y aparecerán las opciones de editar y eliminar, damos clic en el ícono del lápiz (editar) y se abrirá una ventana donde podremos cambiar el nombre del servicio e insertar el enlace del mismo.

3.1.4 Principal

En esta sección encontramos la información de la pagina principal organizada por contenedores. La edición de este panel esta dirigida a activar o desactivar cada contenedor y cambiar su ubicación en la página, ya sea hacia arriba o hacia abajo. El único usuario que puede modificar su contenido y estructura el ingeniero encargado. 

3.1.5 Contenido

La sección de Contenido constituye el núcleo informativo del portal web institucional de la UFPSO. En ella se organizan y gestionan todas las categorías y elementos que estructuran la información publicada en el sitio. Cada contenido está clasificado dentro de una categoría específica, lo que permite mantener una navegación ordenada y coherente para el administrador. Desde este módulo, los administradores y editores pueden agregar, modificar o eliminar elementos, asegurando que la información se mantenga actualizada, pertinente y alineada con los objetivos de comunicación institucional.

Agregar categoría

La sección de contenido está compuesta por las categorías y los elementos que hacen parte de cada una. Para agregar una categoría nos dirigimos al ícono de administrar categoría, ubicado en la parte superior derecha del panel.

Se abrirá una ventana que nos permitirá administrar la categoría dando clic en el ícono + que se encuentra en la parte superior izquierda de la ventana.

Al realizar esta acción, aparece una nueva ventana donde podremos digitar el nombre de la nueva categoría.

Agregar página

A cada una de estas categorías se le puede agregar el número de páginas que sean necesarias, damos clic en la categoría a la que queremos insertar una página y  luego hacemos clic en el ícono + que se encuentra ubicado en la parte superior derecha del panel.

Una vez creada la nueva página, si ubicamos el puntero sobre ella, se nos mostrarán tres opciones del lado izquierdo del elemento. El icono de pantalla es para mostrar una vista previa de la página, el lápiz para entrar a editarla y la cesta de basura para eliminarla.

Del lado derecho de la página que se agregó, aparecerá el nombre, la fecha de creación y la fecha de publicación una vez haya sido editado. En cuanto al ícono del ojo, si está de color azul quiere decir que la página está pública y si está en color rojo quiere indica que está oculta.

Editar página - Panel de Edición

El panel de edición es el entorno desde el cual el administrador o editor puede modificar el contenido de los distintos elementos del portal web institucional. Este panel cuenta con cuatro barras de herramientas que facilitan la edición y el formato de los textos, la inserción de recursos multimedia y la organización visual de la información. Cada barra agrupa un conjunto específico de funciones, desde opciones básicas de texto hasta herramientas avanzadas para insertar enlaces, tablas, imágenes, archivos adjuntos y elementos personalizados.

El uso adecuado de estas herramientas permite crear contenidos claros, bien estructurados y visualmente coherentes con la identidad institucional de la UFPSO.

A continuación se dan todas las especificaciones acerca de las funciones de cada uno de los elementos que integran las barras de herramientas.

Barra de herramientas No. 1

ícono	Nombre	Descripción
	Activar/desactivar	Este ícono tiene como función activar o desactivar la página que se está editando, cuando se activa, cambia a color azul.
	Publicar	La función de este ícono es poner pública la página en la que se está trabajando.
	Configurar Información	Cuando damos clic en esta opción, se abrirá una ventana para configurar información, donde podremos agregar título, subtítulo, enlace personalizado, resumen, palabras clave y la fecha de publicación. Sin embargo, no es necesario llenar todos los campos, para la mayoría de páginas, solo el título y el enlace es suficiente, pero para la sección de noticias si.
	Configurar cabecera	Esta herramienta se encarga de agregar un banner o portada a las páginas, la cual debe subirse previamente al archivo para que se haga visible, de esta manera damos clic en el icono añadir imagen y la seleccionamos desde nuestro computador. Una vez se muestre la imagen,  podemos ajustarla hacia arriba o hacia abajo con las flechas que se encuentran al lado del ícono añadir imagen.
	Vista previa	Esta opción nos permite visualizar cómo quedará la página una vez se haya activado y publicado.
	Guardar	Como su nombre lo indica, esta herramienta nos permite ir guardando los cambios que se vayan haciendo en la página. Se recomienda guardar constantemente para evitar que al agregar nuevos elementos se modifique o borre la información que se tenga agregada.

Barra de herramientas No. 2

Esta barra de herramientas le permite al editor agregar títulos, subtítulos, párrafos, tablas y demás elementos que buscan hacer más sencilla la organización de la información de la página. Para hacer uso de estas herramientas debemos dar clic y arrastrar hasta el panel de edición. 

ícono	Nombre	Descripción
	Título	Los títulos son de color rojo, no permite cambiar color ni tamaño de fuente.
	Subtítulo	Los subtítulos son de color negro, no permite cambio de color ni tamaño de fuente.
	Párrafo	Se abrirá un cuadro de texto al que podrás agregar negrita, cursiva y cambiar de color.
	Acordeón	Esta herramienta es un tipo de folder al que se le pueden modificar su nombre y dentro de esta podemos insertar todas las herramientas menos otra acordeón.
	Lista	Se abrirá un campo de color gris que utiliza puntos como viñeta para separar los elementos de la lista que se desean agregar.
	Destacado	Si necesitamos resaltar una frase o párrafo, arrastramos esta herramienta y escribimos sobre ella los que necesitamos que se destaque.
	Tabla	Con esta opción insertaremos el campo para una tabla que podrá ser editada con otra herramienta que explicaremos mas adelante.
	Enlace	Esta herramienta nos permitirá agregar un campo que llevará un enlace insertado a través de otra herramienta que explicaremos en la siguiente tabla. Después de haber agregado el enlace podemos procedes a cambiar el nombre de este espacio.
	iFrame	Es una etiqueta HTML que permite incrustar otro documento HTML dentro de la página actual.
	Archivo	Abre un campo que permitirá añadir un archivo (PDF, Doc, Docx, pptx, xlsx, xls) por medio de otra herramienta que explicaremos en la siguiente tabla.
	Imagen	Abre un espacio donde podrá insertar una imagen (jpg, png, jpeg, gif) utilizando luego una herramienta que será explicada en la siguiente tabla.
	Audio	Nos presenta un espacio que permite agregar un archivo de audio en formato mp3, desde el archivo de la plataforma, a través de una herramienta que veremos en la siguiente tabla.
	Línea divisora	Permite agregar una línea que divide los elementos que vamos agregando en la página, si se requiere.
	Pénsum	Permite agregar Pénsum a la página en edición.

Barra de herramientas No. 3

Esta es una barra de herramientas complementaria que tiene como objetivo principal completar las funciones de muchas de las herramientas anteriores. 

ícono	Nombre	Descripción
	Negrita	Le aplica negrita a los párrafos que se editan en cuadro de texto, destacados, tablas y listas.
	Cursiva	Le aplica cursiva a los párrafos que se editan en cuadro de texto, destacados, tablas y listas.
	Color de Fuente	Cambia el color de fuente de en párrafos, listas, destacados. Los colores disponibles son rojo, azul, verde y negro.
	Estructura de tabla	Permite seleccionar el número de columnas y filas que va tener la tabla.
	Añadir columna	Añade columnas a la derecha.
	Añadir fila	Añade filas hacia abajo.
	Borrar columna	Elimina la columna en la que este ubicado el puntero.
	Borrar fila	Elimina la fila en la que se ubique el puntero.
	Agrandar/disminuir	Seleccionamos una imagen añadida y dando clic sobre este ícono podemos agrandar o disminuir su tamaño.
	Añadir archivo	Esta herramienta permite insertar, un documento, una imagen o un audio que ya esté guardado e el archivo.
	Añadir enlace externo	Con esta herramienta podemos insertar un enlace externo, ya sea a un iFrame, una frase seleccionada o al campo para enlace.

Barra de Herramientas No. 4

Esta última barra nos presenta tres herramientas, la función de las dos primeras es mover hacia arriba o hacia abajo los elementos que se agreguen a la página y la tercera que es la cesta de basura, nos permite eliminar elementos seleccionados (párrafos, títulos, subtítulos, imágenes, tablas, etc.)

Recomendaciones:

• No insertar acordeones dentro de otras, esto creará un error que solo el desarrollador podrá solucionar.
  
  

• Ajustar el espaciado al pegar texto con varios párrafos, si se guarda sin haberlo hecho, solo se podrá modificar el primer párrafo y el resto se salen del cuadro de texto, tomado una apariencia distinta.
  
  

• Guardar frecuentemente los cambios ya que la plataforma no guarda automáticamente.
  
  

• No sobrescribir contenido sin guardar. Si se agrega un elemento sobre contenido que no se ha guardado, este se borrará.

3.1.7 Flotante Admin 

¿Qué es una ventana flotante?

Una ventana flotante es una imagen emergente que se muestra automáticamente a los usuarios Puede incluir:

• Un texto descriptivo
• Una imagen promocional
• Una redirección opcional

El sistema se encarga de mostrar únicamente las imágenes que:

• Se encuentren activas
• Estén dentro del rango de fecha y hora configurado.

Pasos para la gestión de las ventanas flotantes 

Paso 1 : Cargar la imagen

•  Guia:
  •  Antes de crear la ventana flotante, es necesario cargar previamente la imagen en el gestor de archivos.
• Ruta obligatoria
  • Las imágenes deben subirse exclusivamente en la siguiente carpeta: ( Archivo/principal/flotante )
• Recomendaciones. 
  • Use nombres claros y descriptivos
  • Evite caracteres especiales
  •  Formatos recomendados: solo .webp

Paso 2 : Panel de administración informativo

Este panel permite visualizar un resumen general de las ventanas flotantes (emergentes) de la página UFPSO.
Su función es informativa y muestra el estado actual de las ventanas flotantes registradas en el sistema.

El panel presenta los siguientes indicadores:

• Total: número total de ventanas flotantes creadas.

• Activos: cantidad de ventanas flotantes que se encuentran habilitadas y visibles para los usuarios.

• Inactivos: cantidad de ventanas flotantes que están deshabilitadas y no se muestran en el sitio web.

Estos indicadores permiten al administrador conocer rápidamente el estado general de las ventanas flotantes.

Paso 3 : Gestionar el formulario llamado Gestión de flotantes 

•  Guia:
  • Formulario Vista previa: Permite cargar la imagen que se va a subir y visualizar las imágenes que se desean editar.
  • Formulario Agregar nuevo: Permite agregar un nuevo elemento y modificar un elemento previamente creado.

•  Formulario vista previa:
  • Al realizar un nuevo registro, la vista previa se encuentra vacía. Por esta razón, se debe hacer clic en Seleccionar imagen, lo que abrirá una ventana del gestor de archivos donde se podrá seleccionar la imagen que se desea utilizar para la ventana modal
  • Al hacer clic en elicono Editar en las tarjetas de la sección Flotantes utilizados, la imagen se cargará automáticamente en la vista previa, permitiendo su visualización. Desde allí, se podrá mantener la imagen actual o proceder a cambiarla según sea necesario.

Imagen formulario vista previa

•  Formulario agregar nuevo
  • Nombre: Se llena automáticamente al cargar la imagen, este campo no es editable.
  • Fecha de publicación: Define cuándo inicia la visualización de la ventana flotante; incluye fecha y hora.
  • Fecha de caducidad: Define cuándo deja de mostrarse la ventana flotante; incluye fecha y hora.
  • Descripción: Texto corto y claro, esta descripción se muestra mientras la imagen carga.
  • URL de redirección: Enlace al que será dirigido el usuario al hacer clic en la imagen.
  • Estado: La imagen solo puede mostrarse si cumple con el rango de fechas configurado y si el estado está activo.
  • Agregar elemento o guardar cambios: permite confirmar la acción realizada, ya sea el guardado o la edición del formulario.

Formulario agregar nuevo

Paso 1 : Soporte y funcionamiento

•  Guardar la ventana flotante

  Una vez verificado y completados todos los campos: 

  • Haga clic en Agregar elemento.

  • El sistema guardará la configuración. Es importante que aparezca una alerta indicando si el proceso fue exitoso o si ocurrió algún inconveniente.

•  Funcionamiento Automatico del sistema

   El sistema mostrará las ventanas flotantes solo si cumplen TODAS estas condiciones:

  ✔ Imagen cargada correctamente
  ✔ Estado = Activo
  ✔ Fecha y hora actual ≥ Fecha de publicación
  ✔ Fecha y hora actual ≤ Fecha de caducidad

•  Recomendaciones finales
  • Revise siempre las fechas y horas.
  • Verifique que el estado esté activo.
  • Use descripciones claras y cortas.
  • Pruebe la publicación antes de una campaña importante.
•  Soporte

  Si la ventana flotante no se muestra.

  • Verifique la fecha y hora actual.

  • Revise que esté en estado activo.

  • Confirme que la imagen esté en la carpeta correcta.

 

Gestión de Ventanas Flotantes 

En esta pantalla se muestra un listado de ventanas flotantes en formato de tarjetas, cada tarjeta representa una ventana flotante creada anteriormente e incluye:

• Miniatura de la imagen

• Nombre

• Descripción corta

• Fechas de publicación

• Estado (activo / inactivo)

• Botones de acción

Pasos para la gestión de las flotantes utilizadas

Paso 1 : Acciones

•  Abrir la Imagen 
  • Hacer clic directamente sobre la imagen.
  • La imagen se muestra en tamaño completo.
  • Al hacer clic en la imagen completa, se realiza la redirección a la página indicada.
  • Esta acción es solo de visualización, no modifica información.

•  Eliminar Ventana Flotante 
  • Hacer clic en el ícono de eliminar.
  • Se abre una ventana modal de confirmación
  • El sistema solicita confirmar la acción
  • Al confirmar, la ventana flotante se elimina de forma permanente. Esta acción NO se puede deshacer.

•  Editar Ventana Flotante
  • Hacer clic en el ícono de editar .
  • El sistema carga automáticamente los datos en el formulario de la anterior sección.
  • Los campos se muestran en el formulario de edición.
  • Se pueden modificar todos los campos que contempla el formulario.

•  Visualizar
  • Hacer clic en el ícono del ojo.
  • Se abre la misma ventana modal.
  • Se muestra la imagen completa.
  • El ícono del ojo cumple la misma función que hacer clic sobre la imagen.

•  Estado de la Ventana Flotante 
  • Cada tarjeta incluye un indicador de estado visual.
  • Verde – Activo: la ventana flotante se muestra solo dentro del rango de fechas configurado.
  • Rojo – Inactivo: la ventana flotante no se mostrará, aunque las fechas sean válidas.
  • El estado permite activar o desactivar rápidamente una ventana flotante

•  Redirección 
  1. Cuando la imagen está abierta en la modal.
  2. Al hacer clic sobre la imagen.

El sistema permite verificar o acceder a la URL de redirección, si fue configurada

1. 1. Si la ventana flotante no tiene URL, no se realiza ninguna redirección.

Paso 2 : Botones

•  Boton cargar mas flotantes 
  • Muestra todas las ventanas flotantes que han sido creadas en el sistema.

•  Boton cargar menos flotantes
  • Muestra solo las últimas 4 ventanas flotantes que han sido creadas en el sistema.

3.1.8 Barra Carrusel

3.1.8.1 introducción

¿Qué es la Barra Carrusel?

La Barra Carrusel es un componente visual con desplazamiento automático e infinito que muestra los logotipos de empresas e instituciones aliadas.Cada logotipo es interactivo y, al hacer clic sobre él, redirige al usuario al sitio web oficial correspondiente. Este componente facilita el acceso directo a los aliados estratégicos y refuerza la confianza del usuario en la plataforma.

  Información de los Elementos

  Cada elemento del carrusel puede incluir la siguiente información.

• • Nombre de la institución
  • Descripción
  • Logo
  • Enlace al sitio web
  • Posición de visualización
  • Estado (Activo / Inactivo)

   Criterios de Visualización

    El sistema mostrará únicamente los elementos que cumplan con las siguientes condiciones:

        ✔ Estado configurado como Activo
        ✔ Posición válida asignada
        ✔ Logo cargado correctamente
        ✔ URL válida (cuando aplique)
        ✔ Campos obligatorios diligenciados correctamente

   Si alguno de estos criterios no se cumple, el elemento no será visible en el componente principal.

3.1.8.2 Informacion del modulo Barra Carrusel

Guía:

• Panel de Administración Barra Carrusel: Permite visualizar el total de registros y los elementos visibles.
• Vista Previa en Tiempo Real: Permite visualizar cómo se muestra el carrusel en el sitio web oficial según la configuración actual.
• Formulario Agregar Nuevo: Permite crear un nuevo elemento o modificar uno previamente registrado, completando los campos requeridos.
• Elementos Registrados: Permite visualizar el listado de elementos creados, junto con sus datos principales y acciones disponibles (visualizar, editar y eliminar).

Descripción de cada sección

• Panel de Administración Barra Carrusel:

En el panel de administración se encuentran las siguientes secciones:

Indicadores Generales

Total: Número total de elementos registrados en el sistema.
Vistas: Número de elementos visibles actualmente en el carrusel (que cumplen con los criterios de visualización).

• Vista Previa en Tiempo Real:

La sección de vista previa permite visualizar el componente tal como se muestra en el sitio web oficial.Cualquier cambio realizado en los elementos se reflejará conforme a su configuración actual, permitiendo verificar el orden, estado y apariencia del carrusel antes de finalizar la gestión.

• Formulario Agregar Nuevo:

Paso 1: Agregar o Editar un Elemento
           En esta sección se encuentra el formulario para crear o editar instituciones aliadas.

Campos del Formulario

• Nombre de la Institución ->  Permite registrar el nombre oficial de la entidad.
• Descripción ->  Texto corto que describe la institución o su relación con la plataforma.
• Logo ->  Permite seleccionar la imagen representativa de la institución.Al hacer clic en Seleccionar Logo, se abrirá el gestor de archivos para cargar la imagen correspondiente.
  Nota: Para seleccionar el archivo se debe cargar previamente en la ruta correspondiente por medio del gestor de archivos carpeta: ( Archivo/general/barra carrusel )
• Enlace del Sitio web ->  Este enlace permitirá redirigir al usuario al sitio oficial de la institución. Debe incluir la URL completa (ejemplo: https://www.ejemplo.com).
• Posición ->  Define el orden en que se mostrará la institución dentro del carrusel. El sistema organiza los elementos en orden ascendente según el valor de la posición.
• Estado ->
  Activo: La institución será visible en el carrusel si cumple con los demás criterios.
  Inactivo: La institución no será visible, aunque esté correctamente configurada.

Guardar el Elemento

Una vez completados todos los campos obligatorios:
Hacer clic en Agregar Elemento (o guardar cambios si se está editando).
El sistema mostrará una notificación indicando si el proceso fue exitoso o si ocurrió algún error.
Verificar que aparezca el mensaje de confirmación antes de continuar.

• Elementos Registrados:

En el panel lateral derecho se muestra el listado de instituciones creadas, organizadas en formato de tarjetas.

Cada tarjeta incluye:

• Miniatura del logo
• Nombre
• Descripción
• URL registrada
• Posición
• Estado

Acciones Disponibles

Cada elemento cuenta con las siguientes opciones:

• Visualizar -> Esto modifica el campo activo o inactivo de un elemento registrado
• Editar -> Carga automáticamente los datos en el formulario. Permite modificar cualquier campo.
  Para guardar los cambios, se debe confirmar la acción mediante el botón correspondiente.
• Eliminar -> Abre una ventana de confirmación. Solicita validar la acción antes de proceder.
  ⚠ Esta acción elimina el elemento de forma permanente y no se puede deshacer.

Recomendaciones Generales

• Verificar que el estado esté configurado como Activo.
• Revisar que la URL esté correctamente escrita y funcional.
• Utilizar descripciones claras y breves.
• Organizar adecuadamente la posición para evitar desorden visual.
• Confirmar que el logo se haya cargado correctamente.
• Usar imágenes optimizadas en formato .webp para mejorar el rendimiento.

• Evitar nombres con caracteres especiales.

• El orden de visualización se determina según la posición configurada (orden ascendente).

Sección Final: Corresponde al área visible para los usuarios en el sitio web oficial, donde se reflejan las configuraciones aplicadas en la Barra Carrusel.

3.1.9 Eventos

3.1.9.1 introducción

¿Qué es un evento institucional?

Un evento institucional es una actividad organizada o avalada oficialmente por la institución, con fines informativos, académicos, culturales o administrativos.

La sección de Eventos en el panel de administración permite registrar eventos institucionales, incluyendo todas sus características y detalles.Una vez registrados, estos eventos serán visualizados posteriormente por los usuarios en nuestra página web.

Para la gestión de eventos institucionales, será necesario administrar dos ítems del menú del panel administrativo, los cuales son: Contenido y Eventos.

3.1.9.2 Gestión de secciones, contenido y eventos

3.1.9.2.1 Gestión de contenido, informacion del evento.

Esta sección se gestiona de la misma manera que otras secciones del sistema.

Para comenzar, acceda como admin al módulo Contenido y ubique la sección Eventos.Posteriormente, haga clic en el ícono Agregar para crear un nuevo evento.

Una vez creado el evento, seleccione el ícono del lápiz (Editar), lo cual abrirá el editor de contenido.
En esta sección, el editor permitirá crear y administrar toda la información relacionada con el evento institucional.

Luego, al hacer clic en el ícono de la tuerca (Configuración), se podrán gestionar los datos específicos de cada evento. En esta área se encuentran los siguientes campos:

• Título: título principal de la sección del evento.
  
• Subtítulo: subtítulo de la sección del evento.
• Enlace personalizado: enlace que será utilizado en la tarjeta (card) del evento en la página web.
  
• Resumen: descripción breve del evento (campo opcional).
• Palabras clave: palabras clave asociadas al evento.
  
• Fecha y hora de publicación: fecha y hora en la que el evento será publicado en el sitio web.

Al hacer clic en el ícono de imagen, se habilita la opción para elegir una imagen previamente cargada asociada al evento seleccionado, la cual se visualizará en su sección correspondiente.

3.1.9.2.1 Gestión de eventos.

Al acceder a la sección de eventos desde el menú del administrador, el sistema muestra un panel de administración que indica el total de eventos registrados, junto con el número de eventos visibles y ocultos.

En el panel derecho de la interfaz se visualiza el formulario de creación y edición de eventos, el cual dispone de los siguientes campos para su gestión.

• Título del evento: Corresponde al nombre principal del evento.
• Descripción: Breve descripción del evento, donde se detalla su propósito o información general.
  
• Tipo de evento: Permite identificar la categoría del evento, como taller, conferencia, congreso, capacitación, inducción, entre otros.
  
• Modalidad: Indica si el evento es presencial, virtual o híbrido.
  
• Dirigido a: Define el público objetivo del evento, por ejemplo: estudiantes, administrativos, personal externo a la institución, etc.
  
• Organizado por: Área, dependencia, dirección o facultad responsable del evento (por ejemplo, Dirección, Facultad de Ingeniería, Programa de Ingeniería de Sistemas, entre otros).
  
• Fecha de inicio: Indica el día y la hora en que inicia el evento.
• Fecha de cierre: Indica el día y la hora en que finaliza el evento.
• Lugar: Espacio donde se llevará a cabo el evento (auditorio, sala, aula, etc.).
• URL de redirección: Enlace al cual será redirigido el usuario para consultar información completa o realizar acciones adicionales relacionadas con el evento.
• Imagen del evento: Permite seleccionar la imagen que se mostrará en la tarjeta (card) del evento.

En la sección de elementos registrados se visualiza un ítem por cada evento creado, donde se muestra la siguiente información y acciones:

• Número de eventos: Identificador o conteo correspondiente al evento registrado.
• Previsualización de la tarjeta (card): Vista previa de cómo se mostrará el evento en el sitio.
• Estado de la tarjeta: Permite cambiar el estado del evento entre visible y no visible.
• Editar evento: Opción para modificar la información de la tarjeta del evento.

• Eliminar evento: Permite eliminar el evento de manera permanente.
  ⚠️ Esta acción no se puede deshacer, por lo que se debe realizar con precaución.

Al completar la gestión de las tarjetas de eventos, el sistema reflejará los cambios de forma correcta en la página oficial.

Cards de prueba para la muestra del componente. 

En el componente principal se cuenta con un botón denominado “Ver Calendario Completo”, así como con el texto principal “Eventos”.
Ambos elementos redirigen al apartado de eventos, donde se presenta un listado completo de todos los eventos que han sido creados a lo largo del tiempo.

3.1.10 Archivo

La sección de Archivo es el espacio destinado a la gestión de todos los recursos digitales utilizados en la plataforma, tales como documentos, imágenes, archivos PDF, presentaciones y otros elementos multimedia. Desde esta área, los usuarios con permisos pueden organizar los recursos en carpetas, agregar nuevos elementos, actualizar archivos existentes y eliminarlos cuando sea necesario. Una administración adecuada del archivo garantiza que los contenidos publicados en las diferentes secciones del sitio estén correctamente enlazados, optimizados y disponibles para su consulta, facilitando así la actualización constante del portal y el acceso eficiente a la información por parte de la comunidad universitaria.

En la parte superior derecha del panel se encuentran tres opciones que nos presenta esta sección, la lupa nos permite buscar hacer una búsqueda mas rápida de elementos que se encuentren guardados en cualquiera de las carpetas. Debajo de esta, encontramos una herramienta para añadir carpeta y otra para añadir archivo (imagen, documento, audio). 

Si queremos es eliminar una carpeta, la abrimos y ubicamos el puntero en el espacio del nombre, inmediatamente aparecerá en el extremo derecho una cesta de basura roja, le damos clic y eliminamos. 

Si lo que necesitamos es eliminar un archivo, ubicamos el puntero sobre el archivo que queremos borrar y damos clic sobre la cesta de basura de color rojo que aparece en su extremo derecho.