Cabeceras

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Tipos y anatomía #

Según el contexto se utiliza una de las dos cabeceras definidas:

Cabecera para sitios web o portales #

Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón, es decir, sitios webs públicos en los que hay una comunicación "unidireccional" y, normalmente, no tienen un acceso de usuarios restringido.

Se caracteriza por tener varias franjas que albergan distintos elementos. De arriba a abajo encontramos:

• Banda amarilla: Permite saltar directamente al contenido principal de la página. Se usa por tema accesibilidad. Está oculto y sólo se muestra al tomar el foco.
• Banda con el logo Gobierno de Aragón: El logotipo debe quedar alineado a la izquierda y la banda incluye un borde de 1 px en el lado inferior. Este elemento se corresponde con la versión mini de la cabecera.
• Banda con el título del sitio web: Las letras del título del sitio web irán en blanco y sin ningún logotipo sobre fondo azul que consiste en una imagen, inspeccionar para obtener el .svg. Se incluirá un elemento de subtítulo para el nombre extendido de los títulos con acrónimos.
• Banda con un menú de navegación: Con fondo gris claro y borde de 1 px abajo de gris oscuro. En móviles o anchuras pequeñas, el menú se convierte en un botón que abre el menú para dispositivos móviles.
• Banda con Hero opcional: Sección con una altura determinada en la que se puede encajar una imagen ilustrativa de la temática del sitio, junto con un texto que incluya un título y/o subtítulo descripctivos.

Cabecera para aplicaciones web #

Se usa en intranets o aplicaciones web para escritorio o móviles y que suelen tener un acceso de usuarios restringido. Tiene menos altura al estar compuesta por una sola banda. Antes de hacer login se muestra el logotipo del Gobierno de Aragón normal expandido. Tras hacer login o en versión móvil, podemos usarlo en versión reducida sólo con la bandera, sin las letras.

• Banda con el logo Gobierno de Aragón: En el área superior izquierda, que puede mostrarse de forma expandida antes de hacer login, mostrando bandera y todas sus letras. O bien, mostrarse de forma contraída tras el login al entrar en la zona privada, sólo con la bandera, sin las letras.
• Banda amarilla: Permite saltar directamente al contenido principal de la página. Se usa por tema accesibilidad. Está oculto y sólo se muestra al tomar el foco.
• Nombre de aplicación: Se oculta de la cabecera en dispositivos móviles porque se mostrará dentro del menú para dispositivos móviles.
• Menú de navegación: Se oculta de la cabecera en dispositivos móviles porque se mostrará dentro del menú para dispositivos móviles.
• Botón para mostrar el menú de navegación para dispositivos móviles: En anchuras pequeñas se muestra en la cabecera a la derecha y sustituye a todo excepto al logo contraído de la izquierda.
• Dropdown de usuario: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) se muestra en el extremo de la derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú. Este elemento es opcional.

Diferencias entre cabecera pequeña, cabecera avanzada y cabecera estándar #

Buenas prácticas #

• Se recomienda que no se queden con la posición fijada (stickies)