DESY

Sistema de Diseño del Gobierno de Aragón

Portal web

Los portales web deben tener una cabecera avanzada, navegación y patrones específicos.

Vista previa #

Versión de escritorio

Versión móvil

Anatomía

Más información

¿Qué son los bloques?

Llamamos bloques a los contenedores definidos en las plantillas para facilitar la maquetación de las páginas. Cada bloque contiene las características necesarias para una correcta construcción, etiquetado y visualización de la página.

Más información en la sección Landmark Regions de W3C

Código de color

Bloques invisibles y secciones
Bloques de cabecera y pie de página
Bloques para títulos y textos
Bloques para acciones y navegación
Bloques para notificaciones y avisos

Características de cada bloque
Número del elemento en el diagrama y código de color	Nombre del bloque	Código Nunjucks	Descripción
1	Spinner de página	`{% block pageSpinnerBlock %}`	Oculto detrás del contenido
2	Cabecera	`{% block headerBlock %}`	Ocupa el ancho de la ventana para incluir el componente cabecera
3	Skip-link	`{% block headerSkipLinkBlock %}`	Ocupa el ancho de la ventana para incluir el componente de salto al contido principal necesario para accesibilidad
3	Subcabecera	`{% block subheaderBlock %}`	Espacio reservado bajo la cabecera, normalmente para contener elementos de navegación
4	Navegación de cabecera de edición	`{% block headerNavigationEditBlock %}`	Permite la navegación, si es necesaria, entre distintas páginas sin salir de la ventana de edición de contenido
5	Título de cabecera de edición	`{% block headerTitleEditBlock %}`	A la izquierda de la cabecera, muestra un título que indica que te encuentras editando el contenido
4	Navegación de subcabecera	`{% block subheaderNavigation %}`	Situado en la zona superior izquierda, para navegar a páginas anteriores
6	Acciones de cabecera de edición	`{% block headerActionsEditBlock %}`	A la derecha de la cabecera, permite realizar acciones sobre el contenido editado
7	Subcabecera	`{% block subheaderBlock %}`	Espacio reservado bajo la cabecera, normalmente para contener bloques de navegación
5	Acciones de subcabecera	`{% block subheaderActions %}`	Situado en la zona superior derecha, para realizar acciones sobre el contenido que visualizas
6	Título de subcabecera	`{% block subheaderTitle %}`	Situado bajo los bloques de navegación y acciones, muestra el título del contenido de la página
7	Menú de subcabecera	`{% block subheaderMenu %}`	Situado bajo el bloque de título de subcabecera, permite incluir un menú horizontal para navegar entre varios contenidos relacionados
4	8	Sección principal	`<main>`	Contenedor con anchura determinada con el contenido principal y otros bloques
5	9	Notificacion de cabecera	`{% block notificationHeaderBlock %}`	Situado al principio del contenido
	Notificacion de pie de página	`{% block notificationFooterBlock %}`	Situado al final del contenido
6	10	Contenido	`{% block contentBlock %}`	Contenido principal
7	Notificación interior	`{% block notificationInnerContentBlock %}`	Se sitúa al principio del contenido interior
8	Contenido interior	`{% block innerContentBlock %}`	Contenido principal dentro de la sección interior
9	10	Menú lateral	`{% block sidebarBlock %}`	Barra lateral que ocupa el 25% de la anchura de la sección
11	Sección interior	`section`	Contenedor con anchura del 75% del ancho de la sección cuando la plantilla contiene el bloque de menú lateral. Muestra el contenido del item.
12	Notificación interior	`{% block notificationInnerContentBlock %}`	Se sitúa al principio del contenido interior
13	Contenido interior	`{% block innerContentBlock %}`	Contenido principal dentro de la sección interior
7	10	11	14	Pie de página	`{% block footerBlock %}`	Ocupa el ancho de la ventana para incluir el componente pie de página
8	11	12	15	Modal	`{% block modalBlock %}`	Zona reservada para ejecutar acciones una vez se carga la página

Guías de construcción #

Según el tipo de web que quieras crear, necesitarás unas plantillas específicas y una arquitectura de contenido determinada.

Webs de hospitales

Plantillas diseñadas para espacios web de hospitales del Servicio Aragonés de Salud. El objetivo es contar con espacios más consistentes, centrados en la ciudadanía y disponer de unas pautas y herramientas comunes para todos los centros.

Ver guía