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 se emplean en formato .webp con el fin de acelerar los tiempos de carga en Internet. Gracias a los archivos WebP, los sitios web pueden mostrar imágenes de alta calidad con un tamaño de archivo considerablemente inferior al de los formatos tradicionales, como PNG y JPEG.

Estas imágenes deben tener un tamaño inferior a 100 KB a 72 ppp. Es recomendable, al momento de exportarlas, aplicar una compresión con pérdida en 75 Alta para lograr un equilibrio entre calidad y tamaño. Además, siempre es necesario proporcionar un texto alternativo para garantizar un buen SEO y accesibilidad en el sitio web.

Las imágenes deben ser cargadas a través del Administrador de archivos proporcionado por el constructor. Estas deben estar alojadas en la carpeta general "imagenes-ucentral" y, a su vez, en una subcarpeta específica según el tipo de contenido al que pertenezcan. Esto se hace con el fin de mantener el orden y localizarlas rápidamente cuando sea necesario.

El tamaño de la imagen varía según el uso y el diseño de la plantilla. A continuación, se describen los tamaños generales según el propósito de cada una.

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