B4 - Plantilla para correos electrónicos »

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 Digital 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 a fin de la imagen fotográfica que dan un aspecto homogéneo a los todos sitios web de la Universidad.

Visualización responsiva de la plantilla

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 5 áreas: 1. área cabezote; 2. pestaña de accesibilidad; 3. pestaña desplegable de servicios; 4. área de contenido y 5. área pie de página. Las áreas 1, 2, 3 y 5 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 la DNED de soporte y en 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 se debe realizar 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

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.
Panel de Accesibilidad	La revisión de la accesibilidad, la inclusión y la usabilidad, es una estrategia que permite profundizar e identificar oportunidades de mejora de la experiencia de los productos y servicios institucionales, con el propósito de garantizar la apertura y democratización de la información, contenidos y proyectos disponibles en las plataformas digitales de la UNAL. Entender que las personas son un conjunto complejo y diverso de formas de percibir, actuar y usar, permite ver la importancia de aplicar estas estrategias de diseño sobre nuestras plataformas y herramientas TIC, y su repercusión en la experiencia integral de vida universitaria, apuntando a soluciones - desarrollos que sirvan a la mayor cantidad de personas, teniendo particular cuidado de evitar la exclusion de grupos con necesidades específicas. El panel debe mantener su aspecto gráfico y de posición; es de uso obligatorio para todas las páginas de la Universidad. El panel la opción Tamaño de letra, debe poder aumentar el tamaño de todas las fuentes tipográficas del sitio a un 200%. En la opción de Cambiar contrastes, se debe aplicar en cada uno de tipos tres (3) opciones diferentes de combinaciones de colores que permitan un contraste destacado entre fondo y tipografía, manteniendo una composición gráfica del sitio. Ver Temas de accesibilidad. En la opción Invertir colores, estos los invierte según los colores parametrizados en el punto anterior. Restablecer ajustes nos indica a los contrastes regresan a su estado inicial.

Ejemplos de colores usados en la opción Cambiar Contastes.

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

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-03	Dirección
Edif. 103 Polideportivo 2 piso	Edificio
Bogotá D.C., Colombia	Ciudad, País
316 5000, ext. 18282	Teléfono(s) y extensión/extensiones

correoelectronico@unal.edu.co:

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

Nota: Si requiere la Plantilla web institucional, debe realizar la solicitud por: https://solicitudesunimedios.unal.edu.co/

Tenga en cuenta que los recursos HTML se ofrecen como punto de partida con el fin de generar plantillas para cualquier sistema de gestión de contenidos (CMS), mas no para desarrollos en HTML plano; estos últimos se evitan a toda costa por disposiciones de la Universidad. Para más información, consulte la sección Bp - Buenas prácticas de la guía de diseño web (http://identidad.unal.edu.co/guia-de-diseno-web/b-directrices-y-especificaciones/bp-buenas-practicas/).

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 cinco 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 / DNINFOA - SIA / Bibliotecas / Convocatorias / Identidad UNAL.
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.

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.
Cuando el sitio web es desarrollado por terceros, las marcas comerciales de estos no podrán incluirse dentro del sitio, deberán ponerse a manera de créditos en forma tipográfica en el campo ”Acerca de” de cada página.
Cuando se adquieran licencias o software web por terceros, las marcas comerciales de estos no podrán incluirse dentro del sitio, deberán ponerse a manera de créditos en forma tipográfica en el campo ”Acerca de” de cada página.

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.