Branding y Estética Institucional

Cómo transformar un dashboard genérico en una herramienta con la identidad del ICFES usando CSS.

Paso 1: Ingeniería Inversa de la Identidad Visual

Un desarrollador profesional sabe "leer" una página web para extraer sus componentes visuales. Al analizar el código de icfes.gov.co, podemos identificar los activos clave de su marca:

Activos de Marca Identificados

  • Tipografía Principal: La fuente utilizada en todo el sitio para textos y párrafos es Nunito Sans.
  • Color Primario (Azul): El azul oscuro principal para fondos y cabeceras es #004884.
  • Color de Acento (Amarillo): El amarillo/naranja para botones y elementos destacados es #F9C22E.
  • Logo: El logo oficial que usaremos en nuestra cabecera.

Con esta información, podemos replicar la estética de forma precisa en nuestro dashboard.

Paso 2: Preparar los Recursos en `www`

La carpeta www alojará nuestro logo y la hoja de estilos personalizada.

Estructura de Archivos

  1. Crea la carpeta www en la raíz de tu proyecto.
  2. Descarga el logo del ICFES y guárdalo como icfes_logo.png dentro de la carpeta www.
  3. Crea un archivo vacío llamado custom.css dentro de la carpeta www.

Tu estructura de proyecto ahora debería verse así:

Paso 3: Crear el Archivo `custom.css`

Ahora, poblaremos nuestro archivo www/custom.css con las reglas de estilo que hemos identificado.

Código de Estilos para el ICFES

Este código utiliza la tipografía y la paleta de colores exactas del sitio web para un acabado profesional.


/* --- www/custom.css --- */

/* Regla General: Aplicar la tipografía oficial 'Nunito Sans' */
.content-wrapper, .main-sidebar, .box-body, .box-title {
  font-family: 'Nunito Sans', sans-serif !important;
}

/* --- Personalización de la Cabecera (Header) --- */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background-color: #004884 !important; /* Azul ICFES Oficial */
}

/* Estilos para la imagen del logo y el título en la cabecera */
.skin-blue .main-header .logo .logo-image {
    height: 35px; /* Ajusta la altura del logo */
    padding-right: 15px; /* Espacio entre el logo y el texto */
    margin-top: -8px; /* Ajuste vertical fino */
    display: inline-block;
}
.skin-blue .main-header .logo {
    font-family: 'Teko', sans-serif; /* Mantenemos Teko para un título impactante */
}

/* --- Personalización del Menú Lateral (Sidebar) --- */
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
  background-color: #F9C22E !important; /* Amarillo Acento ICFES */
  color: #004884 !important; /* Texto azul para contraste */
  font-weight: bold !important;
}

/* --- Personalización de los Contenedores (Boxes) --- */
.box.box-solid.box-primary > .box-header {
  background-color: #004884 !important;
}

Paso 4: Integrar Todo en la UI (`app.R`)

El paso final es modificar nuestro app.R para que cargue la nueva fuente de Google, el archivo CSS y muestre el logo.

Implementación Final en `app.R`

La clave es añadir dos elementos al tags$head(): uno para la fuente de Google y otro para nuestro CSS personalizado.


# Dentro de tu archivo app.R

ui <- dashboardPage(
    dashboardHeader(
        title = tags$a(href='https://www.icfes.gov.co', target='_blank',
           tags$img(src='icfes_logo.png', class='logo-image'),
           'Portal de Resultados'
        )
    ),
    dashboardSidebar(
        # ... tu sidebarMenu ...
    ),
    dashboardBody(
        tags$head(
            # 1. Importar la fuente 'Nunito Sans' desde Google Fonts
            tags$link(rel="stylesheet", href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap"),
            
            # 2. Vincular nuestro archivo CSS personalizado
            tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        ),
        
        tabItems(
            # ... tus tabItem ...
        )
    )
)
¡El resultado es un dashboard auténtico! Al ejecutar la aplicación, la apariencia será notablemente similar a la del sitio web oficial del ICFES, utilizando su misma tipografía y colores. Esto demuestra un alto nivel de atención al detalle y profesionalismo.
Lección Anterior Siguiente Lección