Sistema de Layouts. Sistema de diseño del Ayuntamiento de Zaragoza. Ayuntamiento de Zaragoza

Cabecera de la Sede Electrónica

Deberá ser concisa y representativa de la entidad (ayuntamiento, organismo, servicio, etc.) y del contenido (título). Se buscará de esta manera una identificación rápida de la información, del servicio que posteriormente se va a exponer.

La cabecera tendrá el fondo del color e ilustración representativo de la agrupación de los diferentes contenido y servicios. Actualmente existen 4 cabeceras principales. Todas ellas están diseñadas por el Premio Nacional de Diseño (2002), Isidro Ferrer.

Cabecera de color negro (#000000)

Se aplicará cuando el usuario/a deba iniciar sesión, portal de IDEZar, quejas y sugerencias y callejero.
Cabecera de color rojo (#E81B16)

Específica para Ayuntamiento, Gobierno Abierto y Cultura
Cabecera de color verde (#006a00).

Realizada para los portales de "Ciudad"
Cabecera azul (#006B87).

Elegida para los portales "Para la gente"

Su longitud se adaptará automáticamente a la página que el usuario/a redimensiona ocupando siempre el 100% (respetando los márgenes).

Versión de escritorio

La Cabecera se configurará en el archivo _template.xml disponiendo de los siguientes elementos básicos:

Logotipo del ayuntamiento
Título del portal/servicio
Migas de pan
Buscador
Mapa de la web
Acceso zona personal

Versión mobile

En su versión mobile la cabecera sufre algunos cambios para lograr que se adapte de forma correcta

Se eliminan las migas de pan
El buscador queda oculto bajo el icono de la lupa, este se desplegará al hacer click en ella
El título disminuye el tamaño de su fuente
El mapa web se colapsa

El código de la cabecera será el siguiente

	
<header class="navbar navbar-default navbar-fixed-top navbar-portal flex-wrapper flex-ast flex-jsb full-width">
   <div class="flex-grow">
       <th:block th:include="fragmentos/logo" />
       <div class="pull-left portal-header">
           <sede:breadcrumb title="Layouts" titlemobile="Layouts" link="..." value="[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'},{'link':'/sede/portal/sistema-diseno/v1/', 'text':'Sistema de Diseño'}]" />
       </div>
   </div>
   <th:block th:include="fragmentos/cabecera" />
</header>

Descripción:

El logo se define en <th:block th:include="fragmentos/logo"/>

El título se define en la etiqueta <sede:breadcrumb> en el atributo title con el nombre del servicio y/o portal. También se puede definir titlemobile para definir un título diferente (por ejemplo, uno más corto) para dispositivos móviles . Este último puede ser suprimido.

El buscador y el mapa web se definen en <th:block th:include="fragmentos/cabecera"/>.

Las migas de pan se definen en la etiqueta <sede:breadcrumb> en el atributo value con un array.
Este array recibirá valores text para el nombre del enlace y link para la ruta del enlace.
Ejemplo:

	
[
	{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'},
	{'link':'/sede/portal/gobierno-abierto/', 'text':'Gobierno Abierto'},
]

Definición de migas de pan

Por defecto, las migas de pan, deben contener el título del portal en el que el usuario se encuentra. Solamente deberíamos cambiar este componente cuando nos movamos entre portales. Por ejemplo: Gobierno abierto y Participación y Colaboración

Pie de Página

	
<th:block th:fragment="footer">
	<sede:component fragment="/fragmentos/componentes/footer" json="{'data' : 
				[
		        	{
		        		'icon': 'fab fa-facebook fa-fw',
		        		'name': 'Facebook',
		        		'link': 'https://www.facebook.com/ZGZopencity/'
		        	},
		        	{
		        		'icon': 'fab fa-twitter-square fa-fw',
		        		'name': 'twitter',
		        		'link': 'https://twitter.com/zaragoza_es'
		        	}
     			]
	      }">
		</sede:component>
</th:block>

El pie de página deberá tener el mismo color que la cabecera. Por defecto se mostrará con el color Rojo (#e81b16). Para configurarlo ver el componente Footer

En el mismo deberá aparecer:

Un botón al Servicio de Quejas y Sugerencias con el mensaje “Si no has encontrado lo que buscabas...”.
Un botón con el mensaje "Tu opinión importa". Este será un enlace al sistema de Quejas y Sugerencias
En los portales que lo ameriten, se agregan las redes sociales.
Aviso legal
Política de privacidad
Accesibilidad en el Ayuntamiento de Zaragoza.
Protección de datos
Direcciones físicas del Ayuntamiento de Zaragoza (Plaza del Pilar y Seminario) y teléfonos de relación con el ciudadano.
Copyright del Ayuntamiento de Zaragoza.

_template.xml

En términos generales, el template o plantilla, es la base de todos los portales de la sede electrónica. Gracias a este, lograremos una estructura previa y determinada sobre la cual desarrollar las distintas páginas y apartados. De esta manera, lograremos uniformidad de toda la estructura y diseño de la web en general.

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="ayto">
<th:block th:fragment="cssjs">
    <th:block th:include="fragmentos/cssjs2" />
</th:block>

<body>
    <th:block th:fragment="header">
        <!-- Cabecera -->
    </th:block>
    <th:block th:fragment="menu">
        <!-- Menús-->
    </th:block>
    <th:block th:fragment="footer">
       <!-- Footer, scripts, noscript-->
    </th:block>
</body>

</html>

El archivo se compondrá de 4 fragmentos necesarios.

cssjs: Donde figuran las configuraciones principales de la sede electrónica. Compuesto por la hoja de estilo específica del portal (solo si es necesaria) y el fragmento cssjs2 el cual contiene, entre otras cosas:
- La información de la hoja de estilo general (main-sede.min.css)
- CDN de FontAwesome para los iconos
- CDN de readspeaker
header: Contendrá la cabecera con las respectivas configuraciones del portal
menu: Contendrá los distintos niveles de menu según la profundidad que nos encontremos dentro del portal.
footer: Donde figurará el pie de página

Para hacer uso de _template.xml, este deberá ser llamado desde los archivos del portal por medio de la etiqueta <sede:content>

	
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sede="http://www.zaragoza.es" lang="es">

<head>
    <meta charset="utf-8" />
    <sede:meta title="..." description="..." keywords="..." last-modified="..." author="..."></sede:meta>
</head>

<body>
    <sede:content>
        ...
    </sede:content>
</body>

</html>

Sistema de navegación

Los menús permiten organizar la información de un portal o servicio y acceder a la misma a través de sus enlaces. Tenemos definidos hasta tres niveles de profundidad en la sede electrónica.

Menú de Primer Nivel para organizar y enlazar las secciones que contiene el portal. Es el menú por defecto.

Visualmente, consiste en una franja horizontal que cuelga de la cabecera, delimitada por una línea de color correspondiente al portal donde se encuentre.(Ver colores principales)

Los apartados o secciones del menú se distribuyen en horizontal de izquierda a derecha, permitiendo colocar hasta un máximo de 8 elementos.
Existen dos posibilidades:
1. Elementos formados por icono y título del apartado
2. Elementos formados únicamente por el título de la sección
Menú de Segundo Nivel como sistema de navegación para organizar la información de los contenidos en cada una de las secciones.

Visualmente, consiste en un un contenedor de ancho completo que contiene el título de la sección donde se encuentra ubicado y un listado de items correspondiente a los diferentes apartados de la sección.

Los apartados o secciones del menú se distribuyen en horizontal de derecha a izquierda, permitiendo colocar hasta un máximo de 9 elementos.
Menú de Tercer Nivel para modularizar la información de los contenidos y hacerlos mas legibles para el usuario.

Visualmente, el componente puede tomar 2 estilos, tabs o pills. En ambos casos consiste en una barra horizontal de ancho completo que destaca el elemento activo.

En el mismo se brindará los enlaces necesarios en la modularización del contenido. Estos se distribuyen en horizontal de izquierda a derecha sin un máximo definido.

Estructura de archivos de un portal

La estructura de archivos de un portal se basará en la ruta /RedAyto/J/cont/vistas/portal/. Dentro tendremos los distintos portales divididos en carpetas.

Para crear un nuevo portal, utilizaremos una estructura jerárquica o de árbol, basandos en los niveles de profundidad del mismo. Deberemos crear una carpeta con el nombre y definir los ficheros base.

Estructura Básica

	
Nombre-portal/
|-- ...
|-- img/
|-- index.xml
`-- _template.xml

Nomenclatura de archivos

Evitaremos el uso de acentos y siempre haremos uso de minúsculas.

Intentaremos ser lo mas concisos y claros posibles en el nombre del archivo. Evitaremos el uso de abreviaciones y si el nombre del portal contiene mas de una palabra las separaremos con guión medio(-).

Por ejemplo: para Gobierno Abierto, evitaremos colocar de nombre "ga". En su lugar lo llamaremos gobierno-abierto

Estructura por niveles de navegación

Tenemos definidos hasta tres niveles de profundidad en la sede electrónica. La estructura de cada nivel esta definida de la siguiente forma:

Portal de primer nivel

	
Nombre-portal/
|-- img/
|-- index.xml
`-- _template.xml

La estructura básica del portal, se define el template brindando el menu de primer nivel, la estructura del footer y el enlace a la hoja de estilos del portal

template de primer nivel

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="ayto">
<th:block th:fragment="cssjs">
    <th:block th:include="fragmentos/cssjs2" />
    <link rel="stylesheet" href="/cont/assets/css/portales/..."/>
</th:block>

<body>
    <th:block th:fragment="header">
        <header class="navbar navbar-default navbar-fixed-top navbar-portal flex-wrapper flex-ast flex-jsb full-width">
            <div class="flex-grow">
                <th:block th:include="fragmentos/logo" />
                <div class="pull-left portal-header">
                    <sede:breadcrumb title="titulo-primer-nivel" link="..." value="[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'}]" />
                </div>
            </div>
            <th:block th:include="fragmentos/cabecera" />
        </header>
    </th:block>
    <th:block th:fragment="menu">
        <sede:component fragment="/fragmentos/componentes/menu-primer-nivel" json="{...}"></sede:component>
    </th:block>
    <th:block th:fragment="footer">
       <sede:component fragment="/fragmentos/componentes/footer"></sede:component>
       <th:block th:include="fragmentos/js" />
    </th:block>
</body>

</html>

Portal de segundo nivel

	
Nombre-portal/
|-- img/
|-- seccion/
|   |-- subportal1.xml
|   |-- subportal2.xml
|   |-- index.xml
|   `-- _template.xml
|-- index.xml
`-- _template.xml

Se define la carpeta de la sección correspondiente y se redefine el template para vincular los componentes del template de primer nivel

La idea es enlazar los elementos a medida que profundizamos en el portal. De esta manera, si en un futuro queremos hacer un cambio, evitaremos tener que movernos entre los diferentes niveles realizando cambios en cada template

template de segundo nivel

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="ayto">
<th:block th:fragment="cssjs">
    <th:block th:include="/ruta_primer_nivel/_template :: cssjs" />
</th:block>

<body>
    <th:block th:fragment="header">
        <header class="navbar navbar-default navbar-fixed-top navbar-portal flex-wrapper flex-ast flex-jsb full-width">
            <div class="flex-grow">
                <th:block th:include="fragmentos/logo" />
                <div class="pull-left portal-header">
                    <sede:breadcrumb title="titulo-primer-nivel" link="..." value="[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'}]" />
                </div>
            </div>
            <th:block th:include="fragmentos/cabecera" />
        </header>
    </th:block>
    <th:block th:fragment="menu">
        <th:block th:include="/ruta_primer_nivel/_template :: menu" />
        <sede:component fragment="/fragmentos/componentes/menu-segundo-nivel" title="..." json="{...}">
        </sede:component>
    </th:block>
    <th:block th:fragment="footer">
        <th:block th:include="/ruta_primer_nivel/_template :: footer" />
    </th:block>
</body>

</html>

Portal de tercer nivel

	
Nombre-portal/
|-- img/
|-- seccion/
|   |-- subportal1.xml
|   |-- subportal2.xml
|   |-- index.xml
|   |-- _template.xml
|   `-- sub-seccion/
|     |-- index.xml
|     `-- _template.xml
|-- index.xml
`-- _template.xml

Volvemos a modificar template para que vincule con el menú definido en el segundo nivel

En este caso no modificamos el breadcrumb ya que no cambiamos de sección dentro del portal.

template de tercer nivel

    
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="ayto">
<th:block th:fragment="cssjs">
    <th:block th:include="/ruta_segundo_nivel/_template :: cssjs" />
</th:block>

<body>
    <th:block th:fragment="header">
        <header class="navbar navbar-default navbar-fixed-top navbar-portal flex-wrapper flex-ast flex-jsb full-width">
            <div class="flex-grow">
                <th:block th:include="fragmentos/logo" />
                <div class="pull-left portal-header">
                    <sede:breadcrumb title="titulo-primer-nivel" link="..." value="[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'}]" />
                </div>
            </div>
            <th:block th:include="fragmentos/cabecera" />
        </header>
    </th:block>
    <th:block th:fragment="menu">
        <th:block th:include="/ruta_segundo_nivel/_template :: menu" />
        <sede:component fragment="/fragmentos/componentes/menu-tercer-nivel" title="..." json="{...}">
        </sede:component>
    </th:block>
    <th:block th:fragment="footer">
        <th:block th:include="/ruta_segundo_nivel/_template :: footer" />
    </th:block>
</body>

</html>