Escudo de la República de Colombia

Guía web

B3

Uso de plantilla web

La plantilla institucional es el instrumento que organiza la identidad corporativa en la página web, facilita la estructuración de los sitios, sin que pierdan su autonomía e independencia. Esta se ciñe a las directrices que plantea Gobierno en Línea que son de carácter obligatorio para entidades públicas nacionales.

Esta plantilla incluye: estilos gráficos, el uso de la fuente tipográfica institucional Ancízar, menús mínimos, estructura y composición unificada, paleta de color unificada para cabezote, pie de página y demás regiones permanentes y tratamiento afin de la imagen fotográfica que dan un aspecto homogéneo a los todos sitios web de la Universidad.

Especificaciones generales

  • Ninguna dependencia u oficina de la Universidad Nacional de Colombia podrá utilizar las plantillas para diseño de páginas web establecidas por el manual de Identidad en servidores diferentes a los de la Universidad Nacional de Colombia, ni diseñar una página diferente a la establecida en este manual, aunque se encuentre en otro servidor o dominio. La Universidad no certifica sitios web que se encuentren fuera del dominio unal.edu.co.
  • La plantilla institucional consta de 4 áreas: 1. área cabezote; 2. área pie de página; 3. pestaña desplegable de servicios; y 4. área de contenido. Las áreas 1, 2 y 3 deben conservar el diseño, y el área 4 es libre pero debe ser parte integral de las demás áreas para que comunique el objeto del sitio web.
  • Esta plantilla es de uso obligatorio para todos los subdominios y URL que se encuentren dentro del dominio unal.edu.co.
  • Los sitios web deben utilizar la familia tipográfica Ancizar.
  • Todos los sitios web que utilice esta plantilla debe tener diseño responsive o adaptable a los distintos dispositivos donde estos se puedan consultar.
  • Los sitios y las plantillas se deben poder visualizar correctamente en los diferentes navegadores a los cuales DNTIC de soporte y los sistemas operativos iOS y Android.
  • El sitio web debe ser construido de manera que solo requiera la actualización en un único punto para que estos cambios se vean reflejados en todos los niveles del sitio.
  • El desarrollo de los sitios web deben realizarse con un gestor de contenidos (CMS), que permita la actualización sin la necesidad de conocimientos técnicos. Mayor información: http://identidad.unal.edu.co/guia-de-diseno-web/b-directrices-y-especificaciones/bp-buenas-practicas/ Manejadores de contenidos recomendados. En los casos en que se usen frameworks o desarrollos propios, la oficina responsable del sitio web deberá contar con un ingeniero de sistemas que brinde soporte.

Tratamiento de las áreas

Área cabezote

En esta área se encuentran los menús de navegación y elementos que identifican el sitio web. Las modificaciones permitidas a esta área son:

  • La eliminación de elementos en el menú de perfiles de usuario
  • El redireccionamiento de los íconos de redes sociales a las redes relacionadas con el subdominio
  • Los elementos del menú principal

 

 

Estructura y composición del cabezote.

Escudo UN

  • El escudo de la Universidad Nacional de Colombia es de uso obligatorio para todos los sitios web que estén dentro del dominio unal.edu.co
  • El aspecto gráfico y el fondo sobre el que se utiliza no debe ser modificado.
  • En todos los sitios debe direccionar hacia la página web principal de la Universidad (dominio unal.edu.co).

Dirección del sitio web

  • Se debe reemplazar el texto que vienen en la plantilla por la dirección web del sitio en el cual se está.

Menú perfiles de usuario

El menú de perfiles de usuario (parte superior derecha) es de uso obligatorio para las páginas de sedes y nivel nacional. En el caso de los sitios de las facultades, oficinas y dependencias su uso es opcional. Cuando se utilice debe cumplir los siguientes requisitos:

  • Este menú debe mantener su aspecto gráfico.
  • Los cinco tipos de usuario existentes deben mantenerse, sin crear tipos de usuario nuevos. [Vea las especificaciones de dominio y subdominios]
  • Los nombres de los tipos de usuario y el color se deben mantener.
  • A criterio de los responsables se puede eliminar los tipos de usuario que no tengan contenido o relevancia en el sitio web.

Iconos de redes sociales

Los iconos de redes sociales son de uso obligatorio para todas las páginas de la Universidad.

  • Se puede incluir máximo 4 iconos en esta área seleccionados por el responsable del sitio de acuerdo con la afinidad, pertinencia y relevancia de la red.
  • En caso que no se cuente con redes sociales asociadas directamente al sitio deben permanecer las redes sociales que se encuentren en la plantilla web.

Menú de idioma

  • El menú de idioma es de uso obligatorio para todas las páginas de la Universidad.
  • Se colocará el código de idioma según el estándar ISO 639-1 que identifica los idiomas con dos letras.

Menú desplegable de primer nivel

El menú principal de navegación es de uso obligatorio para las sedes, facultades, oficinas y dependencias. En el caso de los sitios de eventos es opcional.

Cuando se utilice debe cumplir los siguientes parámetros:

  • Este menú debe mantener su aspecto gráfico.
  • El primer nivel del menú tiene como límite seis elementos incluyendo el menú de sedes.
  • El segundo nivel del menú tiene como límite ocho elementos.
  • En todos los casos deberá estar presente el menú de enlace con las sedes, con la totalidad de sus elementos.
  • El menú de enlace con las sedes puede trasladarse hacia la derecha alineado con el buscador nacional.
  • Este menú puede usar tanto botones desplegable como botones no desplegables.

Buscador nacional

  • Es de uso obligatorio para todas las páginas de la Universidad, se debe mantener su apariencia gráfica y posición.

Escudo de Colombia

El escudo de Colombia es de uso obligatorio para todas las páginas de la Universidad, debe mantener su apariencia gráfica y posición.

Área de pie de página

Se encuentra en la parte inferior de la plantilla y contiene la información de carácter nacional obligatorio, la información del responsable del sitio y legal.

Estructura y composición del pie de página.

Menú indicado por Gobierno en Línea

Estos campos deben mantener los enlaces existentes en la plantilla y hacen referencia a las exigencias del programa Gobierno en Línea.

Información de carácter nacional obligatorio

  • El término con los cuales se identifica cada enlace no pueden ser modificados.
  • El contenido se puede personalizar según las necesidades de cada sitio web.
  • Debe permanecer el enlace al contenido de caracter nacional, si no se cuenta con el contenido personalizado.

Datos de contacto del responsable del sitio web

  • Contácto página web: en esta columna se deben completar los datos de la ubicación de la oficina, sede o dependencia responsable del sitio web de la siguiente manera:
  • Carrera 30 # 45-03Dirección
    Edif. 103 Polideportivo 2 pisoEdificio
    Bogotá D.C., ColombiaCiudad, País
    316 5000, ext. 18282 Teléfono(s) y extensión/extensiones
    li>correoelectronico@unal.edu.co: hace referencia al correo de notificación y comunicación general para el sitio web. Éste debe ser un correo institucional.
  • Acerca de este sitio web: es un contenido de caracter general, donde se dan los créditos a los involucrados en el desarrollo del sitio web.
  • Actualización: esta fecha debe ser generada de forma automática, y correspondiente a la ultima modificación de contenidos realizados en los diferentes niveles del sitio web.
  • El contenido se puede personalizar según las necesidades de cada sitio web.
  • Debe permanecer el enlace al contenido de caracter nacional, si no se cuenta con el contenido personalizado.

Propiedad intelectual:

  • © Copyright 2014: corresponde al año de la versión de la plantilla.
  • Algunos derechos reservados: texto fijo, haciendo referencia a los derechos de autor de la plantilla y sitio web.

Enlaces institucionales:

Estos íconos corresponden a exigencias institucionales y de Gobierno en Línea. Se constituyen por:

  • Campaña institucional vigente
  • Medio de comunicación oficial
  • Programa de gobierno en línea
  • Contaduría general de la nacion







Pestaña desplegable de servicios

Mediante ella se puede acceder a otros sitos en los que se encuentran los servicios generales para la comunidad universitaria. Esta barra cuenta inicialmente con cuatro servicios de carácter obligatorio para todos los sitios web de la Universidad, sin embargo se le pueden sumar los que considere necesarios.

Estructura y composición del área de servicios.

Especificaciones

 
  • Al desplegar la pestaña se encuentra el menú de servicios lateral que ser integrado a todos los sitios web.
  • De manera obligatoria deben incluirse los siguientes servicios dentro de este panel: Correo institucional / Sistema de Información Académica / Bibliotecas / Convocatorias.
  • El servicio de correo institucional debe ser el primer elemento de este menú.
  • El color de la pestaña que abre el panel de servicios puede variar.
  • Los nuevos iconos de los servicios deben estructurarse de acuerdo a los parámetros definidos en el numeral de creación de iconos institucionales. [ver B4 Iconografía] Unimedios puede asesorar el diseño de nuevos iconos en los casos que sea necesario.
  • El parámetro que se debe tener en cuenta para incluir nuevos servicios debe ser la relevancia de los mismos para los usuarios del sitio.
 

Área de contenido

Aquí se encuentra en medio del cabezote y el pie de página. En esta parte es donde debe ir el contenido propio del sitio web.

Zona de contenido.

Especificaciones

  • Debe existir una comunicación uniforme entre el área de cabecera, área pie de página y la área de contenidos.
  • El contenido debe ser un diseño responsive o adaptable a diferentes dispositivos.
  • En las páginas internas del sitio debe aparecer la miga de pan.
  • El ítem “inicio” de la miga de pan debe direccionar a home del sitio web.
  • La información contenida (entre otros: textos, fotográfias y vinculos) es responsabilidad de la dependencia dueña del sitio web.
  • Con el objeto de promover una imagen culta, sabia, responsable, autónoma e innovadora de la Universidad Nacional de Colombia a través de sus comunicaciones, las fotografías e imágenes deben ser de buena calidad, visualmente llamativas e imparciales teniendo en cuenta los parámetros internos, tanto para los medios tradicionales como para la web, aplicaciones móviles y medios electrónicos en general; buscando así que se adquiera mayor calidad y consciencia de la capacidad comunicativa de la imagen fotográfica referente a la Universidad.
 

Composición

Nivel Nacional

  • Debe existir una fotografía en el fondo y debe ser actualizada diariamente.
  • La fotografía se debe manejar como elemento de comunicación.
  • Debe existir la franja de banners de caracter nacional de forma permanente.
  • Los proyectos que deban ser divulgados y que sean de caracter nacional podrian ocupar una franja temporal sobre el componente de noticias previo visto bueno de la dirección de Unimedios.
  • El componente de noticias de caracter nacional debe permanecer.
  • El link al calendario de eventos se situará junto al componente de noticias.
  • Si se usa una fotografía de fondo y cubre la totalidad de la pantalla debe cambiarse todos los días de lunes a viernes, no aplica para las texturas

Nivel de Sedes

 

Especificaciones 

  • El componente de agencia de noticias debe ser visible en el home de la sede, manteniendo la apariencia gráfica presentada en la página principal de la universidad.
  • Es de carácter obligatorio ofrecer contenido personalizado por cada uno de los tipos de usuario.
  • Aplicar en su totalidad el contenido de esta guía.
  • Si se usa una fotografía de fondo y cubre la totalidad de la pantalla debe cambiarse todos los días de lunes a viernes, no aplica para las texturas

Alternativas de diagramación

  • Imagen de fondo en pantalla completa.
  • Componente de Agencia de Noticias a la izquierda.
  • Contenido personalizado a la derecha.
  • Imagen de fondo en pantalla completa.
  • Componente de Agencia de Noticias a la derecha.
  • Contenido personalizado a la izquierda.
  • Sin imagen de fondo.
  • Componente de Agencia de Noticias a la derecha.
  • Predominancia de módulos de imagen y textos cortos.
  • Imagen de fondo de altura media, con posibilidad de movimiento.
  • Contenido personalizado sin posicionamiento sobre la imagen.
  • Imagen estática de fondo y altura media.
  • Contenido personalizado posicionado sobre la imagen.

Demás niveles y sitios web

  • Si sobre la fotografía de fondo existen componentes de texto ésta debe ser estática, disminuyendo la cantidad de componentes con fotografía.
  • Si la fotografía está libre de componentes o a lo más el buscador se permite que tenga movimiento.
  • Si no se usa imagen de fondo, se pueden usar varios componentes con fotografía.
  • En cualquier distribuicion de los componentes se debe garantizar una correcta unidad y comunicacion entre la plantilla web y el contenido.
  • Si se usa una fotografía de fondo y cubre la totalidad de la pantalla debe cambiarse todos los días de lunes a viernes, no aplica para las texturas

Alternativas de diagramación

  • Imagen de fondo, a pantalla completa.
  • Componentes de texto distribuidos en columnas.
  • Sin imagen de fondo.
  • Componentes de fotografía y texto.
  • Imagen de fondo de altura media con posibilidad de movimiento.
  • Componentes de imagen y texto.