Skip to main content

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.

secciones.png

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.

Menú-secciones de menú hamburguesa.png

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.

Secciones menú hamburguesa.png

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

opciones sección.png

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

Esta sección contiene la información de contacto de las diferentes dependencias, oficinas y unidades administrativas de la universidad. En este espacio se encuentran disponibles los números telefónicos y extensiones internas, lo que facilita la comunicación directa entre la comunidad universitaria y las áreas responsables. 

Esta sección puede ser actualizada por los administradores del sitio para garantizar que los datos publicados sean precisos, estén vigentes y respondan a las necesidades de información de estudiantes, docentes, personal administrativo y comunidad en general.

directorio.png

Cada una de las partes que componen el directorio tiene la opción de ser editada o eliminada del mismo, además podrán agregarse extensiones si hace falta; estas opciones se encuentran ubicadas al lado derecho de cada extensión. También encontramos un buscador en la parte superior del directorio, que hará más fácil la búsqueda de información a los usuarios.

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.

Servicios-Admin.png

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.

editar servicio.png

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. 

Principal2.png

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.

agregar categoria.png

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.

agregar categoría.png

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

nombre de la categoría.png

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.

agregar página (2).png

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.

opciones de página.png

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.

fecha y nombre pagina.png

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.

herramientas.PNG

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

barra 1.png

ícono Nombre Descripción
activar desactivar.png 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.png Publicar La función de este ícono es poner pública la página en la que se está trabajando.


configurar.png

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 información.png

conf cabecera.png

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.configurar cabecera.png

Vista previa.png Vista previa

Esta opción nos permite visualizar cómo quedará la página una vez se haya activado y publicado.

Guardar.png 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.png Título Los títulos son de color rojo, no permite cambiar color ni tamaño de fuente.
Subtítulo.png Subtítulo Los subtítulos son de color negro, no permite cambio de color ni tamaño de fuente.
Párrafo.png Párrafo Se abrirá un cuadro de texto al que podrás agregar negrita, cursiva y cambiar de color.
Acordeón.png 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.png 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.png Destacado Si necesitamos resaltar una frase o párrafo, arrastramos esta herramienta y escribimos sobre ella los que necesitamos que se destaque. 
Tabla.png Tabla Con esta opción insertaremos el campo para una tabla que podrá ser editada con otra herramienta que explicaremos mas adelante.
enlace.png 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.png iFrame Es una etiqueta HTML que permite incrustar otro documento HTML dentro de la página actual.
Archivo.png 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.png 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.png 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.
linea divisora.png Línea divisora Permite agregar una línea que divide los elementos que vamos agregando en la página, si se requiere.
pénsum.png 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.png Negrita Le aplica negrita a los párrafos que se editan en cuadro de texto, destacados, tablas y listas.
cursiva.png Cursiva Le aplica cursiva a los párrafos que se editan en cuadro de texto, destacados, tablas y listas.
color de fuente.png Color de Fuente Cambia el color de fuente de en párrafos, listas, destacados. Los colores disponibles son rojo, azul, verde y negro.
Tabla 2.png Estructura de tabla Permite seleccionar el número de columnas y filas que va tener la tabla.
Añadir columna.png Añadir columna Añade columnas a la derecha.
añadir fila.png Añadir fila Añade filas hacia abajo.
borrar columna.png Borrar columna  Elimina la columna en la que este ubicado el puntero.
borrar fila.png Borrar fila Elimina la fila en la que se ubique el puntero.
agrandar.png Agrandar/disminuir Seleccionamos una imagen añadida y dando clic sobre este ícono podemos agrandar o disminuir su tamaño.
añadir archivos.png Añadir archivo Esta herramienta permite insertar, un documento, una imagen o un audio que ya esté guardado e el archivo.
añadir enlace.png 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

Barra H 4.png

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.6 Flotante

En esta sección encontraremos la ultima ventana flotante que se ha utilizado. En la parte superior izquierda encontramos la fecha de expiración, la cual podemos cambiar dando clic sobre ella, al lado está ubicado el ícono que nos permite agregar una imagen nueva y seguido a este, una herramienta que permite insertar un enlace a la ventana, que al dar clic sobre ella nos redireccione a otro sitio.

flotante.png

En la parte superior derecha del panel se muestra la opción de activar la ventana flotante y ver la vista previa de la misma.

3.1.7 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.

archivo.png

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. 

borrar carpeta.png

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.

borrar archivo.png