Este artículo tiene como objetivo presentar los lineamientos generales del sitio web institucional, donde se detallan los colores institucionales, los tamaños de imagen, las clases y los recursos o componentes disponibles en el constructor. Este documento es escalable, ya que se agregarán nuevos recursos conforme crezcan y se desarrollen los micrositios en el portal.

El componente de pestañas horizontales debe usarse con precaución. Se recomienda evitar su uso en la mayoría de los casos debido a problemas de experiencia de usuario en dispositivos móviles. Este componente solo debe emplearse cuando:

1. Número de Ítems: Contenga un máximo de tres ítems.
2. Longitud del Texto: Cada ítem debe tener un texto corto y conciso.

El uso excesivo de pestañas horizontales puede dificultar la navegación en pantallas pequeñas, ya que puede requerir desplazamiento horizontal y disminuir la accesibilidad. Para mejorar la experiencia del usuario en dispositivos móviles, se deben considerar alternativas como menús desplegables o acordeones, que son más adecuados para pantallas pequeñas y proporcionan una mejor accesibilidad.

Los iconos en el portal web se derivan de una fuente tipográfica específica de la Universidad Central. Por esta razón, deben solicitarse a Máster Central. Este enfoque se adopta para garantizar la coherencia visual y la identidad de marca en todos los elementos gráficos del sitio. Además, el estilo de los iconos es de relleno, lo que asegura una apariencia uniforme y profesional en toda la plataforma.

Usar una fuente tipográfica para iconos en un sitio web, en lugar de imágenes, tiene varias ventajas significativas:

Ventajas de Usar Fuentes Tipográficas para Iconos

1. Escalabilidad: Los iconos basados en fuentes son vectoriales, lo que significa que pueden escalarse a cualquier tamaño sin pérdida de calidad o nitidez, a diferencia de las imágenes que pueden pixelarse cuando se agrandan.

2. Rendimiento: Las fuentes de iconos suelen tener un tamaño de archivo más pequeño que las imágenes, lo que reduce el tiempo de carga de la página y mejora el rendimiento del sitio.

3. Compatibilidad con CSS: Los iconos en formato de fuente pueden ser fácilmente estilizados usando CSS. Esto incluye cambiar el color, el tamaño, aplicar sombras, rotar y otras transformaciones sin necesidad de crear múltiples versiones de la misma imagen.

4. Consistencia: Usar una fuente tipográfica asegura una apariencia consistente en todos los navegadores y dispositivos. Las fuentes se renderizan de manera uniforme, mientras que las imágenes pueden variar ligeramente en diferentes navegadores.

5. Facilidad de Implementación: Añadir o cambiar un icono es tan sencillo como actualizar el carácter en el HTML o la clase en el CSS, sin necesidad de modificar archivos de imagen.

Gris

R: 229
G: 229
B: 227

Hexadecimal

#E5E5E3

Beich

R: 255
G: 249
B: 241

Hexadecimal

#FFF9F1

Las imágenes de contenido tienen un tamaño de 800x533 píxeles de ancho por alto. Estas imágenes son las que se solicitan mediante las vistas y se llaman desde el campo obligatorio de imagen durante la edición de un contenido. Además, este tamaño de imagen también se emplea para la diagramación del contenido en el constructor.

Las imágenes se cargan en la página de inicio utilizando Gavias Slider Layer, ubicado en el menú de administración bajo la opción de estructura. Estas imágenes tienen un tamaño de 1920x780 píxeles de ancho por alto a 72 ppp.

Estas imágenes tienen un tamaño de 1920x370 píxeles de ancho por alto a 72 ppp.

Estas imágenes tienen un tamaño de 1920x250 píxeles de ancho por alto a 72 ppp. Estas imágenes deben evitar la inclusión de personas y, en su lugar, hacer referencia a los programas académicos mediante imágenes generales, vectores o texturas.

El portal web institucional está basado en el framework Bootstrap versión 5. Para agregar una clase necesaria para la diagramación, puede consultar el documento oficial disponible en el siguiente enlace: Documentación oficial de Bootstrap 5.

Se debe usar el componente de título en lugar del componente de encabezado cuando se desea definir niveles específicos de títulos. El componente de título permite seleccionar el nivel de encabezado adecuado (como H1, H2, etc.), lo cual es esencial para mantener la estructura semántica y la accesibilidad del contenido.

Para centrar texto dentro de un contenedor, se usa la clase text-center, esta clase se debe colocar en el campo llamado Extra class name

El menú lateral ocupa en la grilla una columna de 4, en las propiedades de la columna se debe poner la clase sidebar, esta debe ser puesta en el espacio SETTING STYLE, CLASS, ID FOR COLUMNS en el campo Custom CSS Classes