Guía de Estilo de la Sede Electrónica

1. Introducción

Guía de estilo: Documento que recoge normas y patrones básicos relacionados con el diseño, la accesibilidad, la facilidad de uso, la independencia de dispositivos, la arquitectura de la información, la redacción de los contenidos dentro de un entorno tecnológico concreto.

La guía de estilo de la Sede Electrónica del Ayuntamiento de Zaragoza, se centra en los aspectos técnicos y visuales de la publicación de contenidos y servicios, el uso correcto del lenguaje, la gramática, la puntuación, la ortografía, y la estética.

Es importante también tener en cuenta cuestiones de tipo ético y deontológico y otras cuestiones de naturaleza profesional (tipografía, uso de titulares, uso de imágenes...)

La guía de estilo de la Sede Electrónica del Ayuntamiento de Zaragoza es revisada y actualizada periódicamente, esta guía es un documento vivo en proceso de actualización continua (evolución de los dispositivos de acceso, anchos de banda, evolución tecnológica, experiencia de los/las usuarios/as...). El Ayuntamiento de Zaragoza tiene presencia en Internet desde 1994, la primera guía de estilo del sitio web del Ayuntamiento se publicó en 1995. Desde 2002, bajo la marca www.zaragoza.es.

1.1 Finalidad

La guía de estilo proporciona uniformidad en el estilo y el formato de los contenidos y servicios de la Sede Electrónica del Ayuntamiento de Zaragoza.

La implementación de la guía de estilo nos facilita fijar las bases de estructura y diseño y por lo tanto nos va a permitir:

  • Mantener la homogeneidad entre los portales elaborados por los diferentes servicios y organismos autónomos del Ayuntamiento de Zaragoza, de tal manera que todas ellas tengan una línea similar de imagen que permita una identificación rápida.
  • Conseguir un entorno o interfaz de diseño sencillo, agradable, intuitivo y moderno, adaptado siempre a la imagen corporativa del Ayuntamiento de Zaragoza ("Manual de Identidad Corporativa") y en sintonía con los diseños que está imponiendo el mercado.
  • Promover una cuidada imagen de la ciudad de Zaragoza a través de los distintos servicios de información en Internet.
  • Facilitar el acceso al mayor número de personas, independientemente de la plataforma utilizada.
  • Velar por que el diseño de la sede electrónica y la estructura de los menús facilite su uso por la ciudadanía, siguiendo las normas y aplicando las metodologías definidas.

“Los servicios puestos a disposición en la sede electrónica estarán operativos en todo momento. Cuando, por razones técnicas, se prevea la imposibilidad de acceso a la sede electrónica o a alguno de sus servicios, este hecho deberá anunciarse a los usuarios/as con la máxima antelación posible, indicando, en su caso, los medios alternativos disponibles”.
(Ordenanza de Administración Electrónica 2014, art. 19)

1.2 Lenguaje e imágenes

La guía de estilo se compone tanto de recomendaciones lingüísticas, como de estilo, para que el mensaje sea más coherente, eficaz y correcto

En la redacción y elaboración de los documentos hay que tener en cuenta las reglas generales emitidas por el Ministerio para las Administraciones Públicas (1.990), "Manual de estilo del lenguaje administrativo". No olvidemos que la renovación del lenguaje administrativo, y que el propio Internet propicia, es un elemento conductor en las relaciones entre la ciudadanía y la Administración.

También se tendrán en cuenta las directrices que el Ayuntamiento ha desarrollado en materia de igualdad, lenguaje inclusivo, imágenes no sexistas y enfoque de género:

1.3 Objetivos

El objetivo principal es asignar criterios homogéneos y consistentes para la gestión de la Sede Electrónica a la hora de publicar sus contenidos. www.zaragoza.es.

Entre los objetivos específicos destacan:

  • Potenciar una imagen institucional corporativa y que sea referente en Internet.
  • Garantizar el acceso a los contenidos y servicios ofertados por el Ayuntamiento en Internet mediante una correcta organización.
  • Adecuar los contenidos y servicios a la demanda potencial de diferentes grupos de usuarios/as.
  • Ofrecer un canal de comunicación de la ciudadanía con las instituciones que permita, a su vez, promover la participación de aquéllos en los asuntos públicos.
  • Favorecer la transparencia de la gestión del Ayuntamiento a la ciudadanía.
  • Garantizar una adecuada información institucional, administrativa y de los servicios prestados por los distintos Servicios Municipales.
  • Mantener la coherencia con los demás elementos que conforman la Administración electrónica, particularmente en lo referido a los servicios prestados y la información suministrada.
  • Fomentar la calidad y eficiencia en la prestación de servicios.
  • Impulsar la oferta de servicios públicos desde Internet, facilitando su acceso a la ciudadanía.
  • Asegurar la Accesibilidad de los servicios disponibles en Internet, es decir que pueden ser navegados y leídos por cualquiera, sin tener en cuenta aspectos como la localización, la experiencia del usuario/a, o la plataforma de acceso (dispositivos, Software, tipo de conexión) empleada. Por ello los contenidos incorporados al sitio web deberán ser accesibles nivel AA, de acuerdo con las pautas de contenido Accesible en la Web WCAG 2.1, desarrolladas por la Iniciativa de Accesibilidad Web (WAI) del Consorcio W3C.

2. Servicios

“Una de las novedades de la Ley 11/2007 ha sido el dar carta de naturaleza a los sitios web de las Administraciones públicas, introduciendo el concepto de sede electrónica. Sin embargo, la regulación de la misma en la Ley es sumamente escueta y, por tanto, se complementa en el título II de la Ordenanza que, entre otras cuestiones, define los objetivos de la sede y los límites de la misma dentro del conjunto de las webs municipales. En cuanto a los objetivos, la Ordenanza pretende superar un concepto de administración electrónica centrado únicamente en la tramitación electrónica de los procedimientos y sienta las bases para que el Ayuntamiento de Zaragoza pueda potenciar al máximo a través de su sede otros aspectos, como la transparencia de su actuación y la participación ciudadana en la toma de decisiones. Consecuentemente con lo anterior, la sede electrónica no se limita a la zona destinada a la realización de trámites, sino que se define como tal todo el "espacio web" que contiene información directamente relacionada con el ejercicio de las competencias municipales.”

(Ordenanza de Administración electrónica del Ayuntamiento de Zaragoza, BOPZ nº 89 2010, Exposición de motivos)


En este capítulo se recogen los servicios de titularidad municipal cuya prestación se realiza total o parcialmente a través de internet.
Podemos clasificarlos en la siguiente tipología:

2.1 Servicios de Información

Facilitan a la ciudadanía el conocimiento de la estructura, funciones, normativa, convocatorias y características de la oferta de servicios de la administración del Ayuntamiento de Zaragoza. Por otra parte, facilitan el conocimiento e información de la ciudad de Zaragoza. En ambos casos se trata de un servicio de bajo coste y en constante actualización.

Los servicios de información de la web municipal son:

2.2 Servicios de Participación

Permiten la interacción telemática directa entre la ciudadanía y el ayuntamiento, es decir, realizar consultas, solicitudes de información, quejas, sugerencias, etc.

Ejemplo. Servicio de quejas y sugerencias: aparece en cada uno de los portales temáticos y su gestión se realiza tanto desde la Sede Electrónica como desde los servicios a los que se deriva.

2.3 Servicios Transaccionales

Son los servicios que permiten tramitar y resolver gestiones por Internet y obtener numerosos impresos sin tener que desplazarse hasta el ayuntamiento.

En las páginas del Consistorio zaragozano se pueden solicitar los certificados de empadronamiento, domiciliar pagos en el banco, cambiar el domicilio fiscal, pedir duplicados de recibos no domiciliados, solicitar el uso de instalaciones deportivas, entre muchos otros trámites.

2.4 Recuperación de la información/servicios

Un Servicio de Información Web, por su naturaleza hipertextual permite la navegación, pero es necesario un Sistema de Recuperación de la Información que complemente a la navegación. En la Sede Electrónica se encuentra:

  • Motor de búsqueda común para los contenidos de la sede: Accesible desde la página principal y las páginas índice. Ver apartado 10.1
  • Motores de búsqueda servicios para la recuperación de datos desde las bases de datos. Ver apartado 10.2
  • Servicios Semánticos: personaliza tu ruta y buscador Inteligente de Trámites
  • Mapa del sitio web definido en al archivo mapaweb.xml

2.5 Portales

Un portal es una agrupación de servicios de diferente naturaleza bajo un denominador común. Responden a una categoría temática o a un grupo de personas usuarias.

Algunos ejemplos:

3. Estándares Web

En la Sede Electrónica se utilizarán formatos estándares, huyendo de tecnologías que requieran la instalación de programas adicionales (plug-ins). Desde 2005 la metodología de trabajo cambió por la separación entre estructura, contenido y presentación.

  • Estructura: mecanismos que se ofrecen al usuario/a para que navegue a través de los diferentes servicios y portales que conforman la Sede Electrónica (menús, barras de navegación...). Además se integran plantillas para los diferentes portales para la unificación de la misma.
  • Presentación: diseños utilizados para hacer más llamativo y diferenciador un determinado portal y/o servicio unificando a través de plantillas.
  • Contenido: cualquier dato que pueda ser de interés para el usuario/a, y que no deba contener ninguna estructura que pueda causar problemas a la hora de ser mostrado en diferentes dispositivos respetando siempre los estándares web.

De forma que

  • Un cambio en la estructura NO hace necesario que se modifique ni el contenido ni la presentación.
  • Cualquier modificación de la presentación NO influya ni en la estructura ni en el contenido.
  • Que un cambio en el contenido NO afecte ni a la presentación ni a la estructura.

En la última edición de la guía estilo se realizan cambios en la metodología de trabajo unificando los estándares.

3.1 Estándares utilizados

Dentro de los estándares web definidos por el consorcio W3C nos vamos a centrar en el grupo de estándares definidos por el W3C Web Design and Applications. Este conjunto de estándares sobre contenidos es utilizado para:

  • Describir y editar.
  • Visualizar.
  • Facilitar su uso y accesibilidad.
3.1.1 Edición de Contenidos

En la edición de contenidos se utilizará el lenguaje de marcas XHTML Strict, ya que ofrece las siguientes ventajas:

  • Se establecen en base a las reglas XML. Por tanto, pueden ser visualizados, editados y validados por cualquier herramienta estándar XML.
  • Pueden escribirse para que funcionen igual o mejor que lo hacían antes tanto en los agentes de usuario conformes a HTML 5.0 como en los nuevos agentes conformes a XHTML 1.0.
  • Permite insertar nuestras propias marcas que no tienen porqué estar definidas en el estándar general. Esto es lo que se llama modularización XHTML.
  • Está diseñado para poder ser visualizado en cualquier tipo de plataforma.
  • Hacer las páginas legibles para personas con algún tipo de discapacidad. Al no tener marcas que indiquen forma de representación entremezcladas con el propio contenido, es mucho más fácil construir agentes de usuario que lean ese contenido a personas invidentes o lo pasen a otros formatos como Braille.
  • Se trata de un sistema de marcas realmente limpio y estructurado libre de cualquier marca que especifique forma de representación (<font>, <b>, <u>, ...).
3.1.2 Visualización de los Contenidos

El diseño se marcará a través de hojas de estilo en cascada (CSS 3.0) que definen cómo son mostrados los elementos HTML

Los beneficios de su utilización son:

  • Mejorar la visualización en una gama más amplia y variada de dispositivos.
  • Facilitar el desarrollo hacia el paradigma Mobile First.
  • Aumentar la eficiencia en el desarrollo a la hora de realizar cambios en el sitio - un solo archivo CSS asociado a todas las hojas.
  • Los archivos más pequeños se traducen en descargas más rápidas, por lo tanto, con menor código en la página.
  • Un menor código en la página es más fácil de interpretar.
  • Permite que los usuarios/as personalicen el sitio según sus necesidades.
  • Se da un mayor control sobre el código que permite entregar el código en el orden preferido por los lectores de pantalla.

3.2 Metadatos

El término hace referencia a cualquier dato usado para identificar, describir y localizar documentos electrónicos distribuidos en un entorno de red.

Los metadatos son importantes en la recuperación de la información global en Internet por distintas razones:

  • Permiten indizar gran cantidad de documentos de diferentes tipos sin necesidad de utilizar un gran ancho de banda
  • Ayudan a descubrir y recuperar recursos en la red ya que analizan el contenido y la forma del mismo.
  • Comparten e integran recursos de información heterogéneos y localizados en sitios muy diversos.
  • Pueden controlar el acceso a información restringida.

Los metadatos se usan de tres formas distintas:

  1. Pueden ir acompañando al propio documento o recurso (en la cabecera de un documento HTML o cabeceras SGML en general)
  2. Pueden formar un fichero separado de meta-información para describir recursos distintos a los de HTML (sonido, imagen, programa de ordenador, etc.)
  3. Se puede crear con ellos una base de datos central o distribuida con punteros a los recursos que describen

Para la descripción de los datos georreferenciables se utilizará el Núcleo Español de Metadatos, con estos metadatos se crearán catálogos para agilizar la búsqueda de recursos, estos catálogos se realizarán siguiendo las especificaciones del Open Geospatial Consortium.

Pasos

  1. ¿Desde dónde se añaden? Hay dos opciones: desde el sistema de gestión de la Sede Electrónica o desde el propio etiquetado HTML de la página.
  2. ¿Qué páginas se describen? Se describen todas las páginas de forma individual. Las páginas no heredan la descripción del portal.

Etiquetado

Todos los contenidos deben de estar descritos y contar al menos con los siguientes metadatos:

<meta charset="utf-8" />
<sede:meta
 title="Composición del Gobierno de Zaragoza"
 description="El Gobierno de Zaragoza es el órgano que bajo la presidencia del Alcalde, colabora de forma colegiada en la función de dirección política que a éste corresponde y ejerce las funciones ejecutivas y administrativas que la Ley y el Reglamento Orgánico le confieren. El Gobierno de Zaragoza queda integrado por el Alcalde, que lo preside, y los Consejeros de Gobierno."
 author="Ayuntamiento de Zaragoza"
 last-modified="Thu May 16 00:00:00 CEST 2019" keywords="ayuntamiento, ciudad, administración local, organización administrativa, Gobierno de Zaragoza, estructura institucional, relación administración-administrado">
</sede:meta>

Detalle

A continuación se explican cada una de las etiquetas meta

  • Uso de character encoding UTF-8
    Se recomienda el uso obligatorio del atributo charset indicando la codificación en UTF-8
    <meta charset="utf-8" />
  • Uso obligatorio de elementos estándar
    Este conjunto de elementos debe estar presente en todas las páginas.
    Title
    <title>Portal de Transparencia. Ayuntamiento de Zaragoza</title>
    Author
    <meta name="author" content="Oficina Técnica de Participación, Transparencia y Gobierno Abierto" />
    Description
    <meta name="description" content="Portal que permite acceder a los contenidos de información publica activa que indica el marco legal de transparencia " />
    Keywords
    <meta name="keywords" content="sede, web, transparencia, gobierno abierto," />
  • Uso de elementos básicos schema.org
    Se recomienda usar al menos las siguientes propiedades:
    Name
    Se recomienda utilizar el contenido de la etiqueta <title>
    <meta itemprop="name" content="Portal de Transparencia. Ayuntamiento de Zaragoza" />
    Description
    Mismo contenido que el metadato description.
    <meta itemprop="description" content="Portal que permite acceder a los contenidos de información publica activa que indica el marco legal de transparencia" />
  • Uso opcional de Open Graph protocol y Twitter para social sharing
    El uso de este tipo de elementos facilita la indexación, presentación y descubrimiento en canales de social media. --> Se añade automáticamente al incluir los metadatos dentro de la etiqueta <sede:meta>.
  • Uso opcional de Dublin Core metadata Terms
    Opcionalmente, es válido utilizar el vocabulario Dublin Core Terms para añadir metadatos adicionales
    <link rel="schema.dcterms" href="http://purl.org/dc/elements/1.1/"/>
    <meta name="dcterms.title" content="Arte Publico. Itinerarios"/>
    <meta name="dcterms.modified" content="2014-02-28"/>
    <meta name="dcterms.publisher" content="Ayuntamiento de Zaragoza"/>
    <meta name="dcterms.contributor" content="Ayuntamiento de Zaragoza. Unidad de Gestión de la Web Municipal. webmunicipal@ayto-zaragoza.es"/>
    <meta name="dcterms.language" content="es"/>
    <meta name="dcterms.description" content="Propuesta de Itinerarios para recorrer el arte público en la ciudad"/>
    <meta name="dcterms.subject" content="Ayuntamiento, Zaragoza, España, Ciudad, Council, Zaragoza, Spain, City, Cultura y Ocio,Turismo"/>
    <meta name="dcterms.audience" content="ciudadano,turista"/>

4. Arquitectura de la Información

4.1 Estructura y Sistema de navegación

El objetivo de la Sede debe ser satisfacer las necesidades de los usuarios y de las usuarias. Por ello, la estructura interna del Ayuntamiento de Zaragoza no debe ser la base para diseñar el esquema de navegación de su sede electrónica.

La experiencia del usuario/a será buena en la Sede Electrónica si:

  • La estructura de navegación proporciona una idea general de los servicios y de los contenidos que pueden encontrarse en la Sede Electrónica.
  • El esquema de navegación es consistente. Es importante para que los usuarios/as localicen los servicios y los contenidos de manera rápida y sencilla.
  • Saben en todo momento en qué punto de la sede electrónica se encuentran, cuáles son las opciones y el contexto de la página que están consultando.
  • Pueden acceder directamente a los servicios y contenidos internos, sin pasar por las página de inicio, con las herramientas de búsqueda.
  • No se encuentran menús de navegación saturados de opciones. Para que sean fáciles de utilizar, es recomendable utilizarlos con un máximo de ocho elementos.
4.1.1 Tipos de Páginas

A la hora de organizar la información que ofrecemos al usuario/a tenemos que distinguir entre las páginas de nivel superior en el esquema de navegación, que dan acceso al contenido, y páginas de nivel inferior, que contienen ya la información detallada.

  • Páginas de nivel superior: se recomienda que las páginas sean cortas y fáciles de explorar. Tienen que servir para hacerse una idea de cuál es el contenido que podrán consultar. Es importante presentar y listar los servicios y contenidos que se van a encontrar dentro y también actualizar cuando hay modificaciones.
    • Páginas que agrupan portales.
    • Página índice de un portal.
    • Página de presentación de servicios transversales.
    • Página de un servicio determinado.
  • Páginas de contenido: son las que muestran el contenido seleccionado. A medida que el usuario/a avanza en la búsqueda de su objetivo es cuando se muestra una información más extensa y especializada.
4.1.2 Estructura de las páginas

La estructura de una página se almacena en ficheros independientes:

  • Fichero que contiene la cabecera, donde se localiza la identidad gráfica del Ayuntamiento de Zaragoza (logotipo del Ayuntamiento), título del portal y/o servicio, el cajón de búsqueda general, el mapa web, las migas de pan y opciones de usuario/a, descrito en el archivo cabecera en el apartado 6.1.1.
  • Fichero que contiene cuerpo dentro del portal y/o servicio con la navegación de 1ª nivel y/o foto dependiendo del portal/servicio.Estos elementos se encuentran en el archivo _template.xml de cada uno de los portales y/o servicios. Descrito en el apartado 7.2.
  • Fichero que contiene el contenido del portal/servicio con la información relevante del mismo.
  • Fichero que contiene el pié de página, que está compuesto por copyright, política de privacidad, aviso legal, icono del ayuntamiento, accesibilidad, dirección de la casa consistorial y del Seminario y protección de datos, todos estos elementos están incluidos en un archivo llamado pie.xml. Descrito en el apartado 6.1.3.

La estructura se adjuntará cuando un usuario/a realice una petición a un contenido determinado, el servidor le devuelve un fichero final con la extensión xml que a su vez carga los diferentes ficheros dependiendo y se utilizarán estructuras diferentes según las características del dispositivo que realice la petición.

Se ha optado por utilizar el analizador Sax de XML, ya que funciona más rápido que los procesadores XSLT.

4.2 Estructura de la Sede Electrónica

La estructura de la Sede Electrónica actual está basada en el concepto de Red de Portales.

Cada Portal tiene una estructura jerárquica y se recomienda la no utilización de más de tres niveles de navegación, como reflejamos en el apartado anterior. El enfoque actual permite que los servicios disponibles puedan ser utilizados por un elevado número de personas, al ser desarrollados, siguiendo los estándares de accesibilidad.

Esta estructura viene determinada por seis apartados principales

Esta estructura de portales se complementa con una red de Servicios Transversales (procedimientos, formularios, agenda de actividades, noticias).

En la primera página mostraremos los servicios más significativos en un momento determinado.

5. Servicios / Páginas

5.1 Páginas de Contenido

Son las páginas a las que acceden las personas cuando realizan una búsqueda concreta sobre un sitio web. Contienen el conjunto de la información con significado propio y se suelen agrupar en función de un criterio, área o temática. El objetivo de estas páginas es mostrar la información de manera clara, ya sea a través de una sola página web o de varias.

La creación de una página de contenido requiere un trabajo de redacción y de presentación importante, especialmente cuando hay mucha información y esta es demasiado densa. Siempre, pero más en estos casos, se hace necesaria la organización del contenido de la página, por lo que se aplicarán criterios relativos a la arquitectura de toda la información y se crearán y utilizarán índices, subíndices, menús, submenús y barras de navegación, entre otros.

Los índices se utilizarán si son estrictamente necesarios, evitando anidar más de un nivel con el fin de evitar que la jerarquía sea demasiado compleja.

Las páginas de contenidos finales pueden ser de dos tipos:

  1. Estáticas, que pueden tener los siguientes formatos:
    1. Html (A partir de un archivo con extensión xml).
    2. Pdf
  2. Dinámicas, son aquellas generadas tras una petición realizada por el usuario/a, y entre ellas se encuentran los siguientes ejemplos: salidas de Bases de Datos, edición de ficheros XML. Uno de los objetivos es que el mayor porcentaje de los contenidos se generen de forma dinámica.

5.2 Contenido de una Página General de nivel 4.


Los elementos que aparecen en una página general de nivel 4 se pueden observar en las figuras siguientes.

  • A Cabecera. Logotipo Ayuntamiento de Zaragoza; Imagen estática respetando colores dependiendo del bloque al que pertenezca.
    • B Buscador genérico de la web, mapa web y datos del usuario/a (solo si está registrado en la plataforma de Gobierno Abierto y ha iniciado sesión).
    • C Ruta de navegación. Migas de pan.
  • Cuerpo de la página
    • D Menú de navegación del portal o servicio, definiendo 3 niveles de profundidad como máximo y adecuándolo al estilo del portal o servicio al que pertenezca. Incorpora enlaces a los diferentes canales de Redes Sociales del servicio, si existieran.
    • E Contenido general: Título del portal, campos de texto, tablas, listados, fotografías; etc.
    • F Enlace a Quejas y sugerencias
  • G Pie de página. Copyright, accesibilidad, estándar W3C, aviso legal, política de privacidad, protección de datos, página de inicio y direcciones de la Casa consistorial (Plaza del Pilar y Edificio Seminario).

Ejemplo: Portal de Medioambiente - Educación y Participación - Galacho

Imagen web - Portal de Medioambiente 1

5.3 Contenido de una Página General de inicio de portal


  • A Cabecera. Logotipo Ayuntamiento de Zaragoza; Imagen estática respetando colores dependiendo del bloque al que pertenezca.
    • B Buscador genérico de la web, mapa web y datos del usuario/a (solo si está registrado en la plataforma de Gobierno Abierto y ha iniciado sesión).
    • C Ruta de navegación: Migas de pan.
  • Cuerpo de la página
    • D Menú de navegación del portal o servicio, definiendo 3 niveles de profundidad como máximo y adecuándolo al estilo del portal o servicio al que pertenezca. Incorpora enlaces a los diferentes canales de Redes Sociales del servicio, si existieran.
    • E Bloques de información de Agenda, Noticias, Destacados, etc
    • F Enlace a Quejas y sugerencias.
  • G Pie de página. Copyright, accesibilidad, estándar W3C, aviso legal, política de privacidad, protección de datos, página de inicio y direcciones de la Casa consistorial (Plaza del Pilar y Edificio Seminario).

Ejemplo: Portal de Juventud

Imagen web - Portal de Juventud 1

5.4 Contenido de una Página General de inicio portal de segundo nivel


  • A Cabecera. Logotipo Ayuntamiento de Zaragoza; Imagen estática respetando colores dependiendo del bloque al que pertenezca.
    • B Buscador genérico de la web, mapa web y datos del usuario/a (solo si está registrado en la plataforma de Gobierno Abierto y ha iniciado sesión).
    • C Ruta de navegación. Migas de pan.
  • Cuerpo de la página
    • D Menú de primer nivel.
    • E Imagen representativa del portal de segundo nivel
    • F Menú de navegación del portal o servicio (2º nivel), definiendo los distintos niveles de profundidad con un máximo 3 niveles y adecuando dicho menú al estilo del portal o servicio al que pertenezca. Incorpora enlaces a los diferentes canales de Redes Sociales del servicio, si existieran.
    • G Bloques de información de Agenda, Noticias, Destacados, etc
    • H Enlace a Quejas y sugerencias
  • I Pie de página: Copyright, accesibilidad, estándar W3C, aviso legal, política de privacidad, protección de datos, página de inicio y direcciones de la Casa consistorial (Plaza del Pilar y Edificio Seminario).

Ejemplo: Portal de Juventud - Centro de Información y Asesoramiento Juvenil.

Imagen web - Portal de Juventud 2

5.5 Contenido de una Página General de agrupación de portales


  • A Cabecera. Logotipo Ayuntamiento de Zaragoza; Imagen estática respetando colores dependiendo del bloque al que pertenezca.
    • B Buscador genérico de la web, mapa web y datos del usuario/a (solo si está registrado en la Plataforma de Gobierno Abierto y ha iniciado sesión).
    • C Ruta de navegación. Migas de pan.
  • Cuerpo de la página
    • D Menú de navegación de los distintos portales, adecuando dicho menú al estilo del portal o servicio al que pertenezca.
    • E Bloques de información de Agenda, Noticias, Destacados, etc.
    • F Enlace a Quejas y sugerencias
  • G Pie de página Copyright, accesibilidad, estándar W3C, aviso legal, política de privacidad, protección de datos, página de inicio y direcciones de la Casa consistorial (Plaza del Pilar y Edificio Seminario).

Ejemplo: Portal de Medioambiente - Parques, jardines e infraestructura verde.

Imagen web - Portal de Medioambiente 2

5.6 Contenido de una Página General de servicio transversal


  • A Cabecera. Logotipo Ayuntamiento de Zaragoza; Imagen estática respetando colores dependiendo del bloque al que pertenezca.
    • B Buscador genérico de la web, mapa web y datos del usuario/a (solo si está registrado en la Plataforma de Gobierno Abierto y ha iniciado sesión).
    • C Ruta de navegación. Migas de pan.
  • Cuerpo de la página
    • D Menú de navegación del servicio transversal de primer nivel.
    • E Título de Servicio transversal.
    • F Formulario de búsqueda asociado al servicio transversal.
    • G Listado de categorías/temas/materias principales asociados al servicio transversal.
    • H Listado de destacados de instancias asociadas al Servicio transversal.
  • I Pie de página: Copyright, accesibilidad, estándar W3C, aviso legal, política de privacidad, protección de datos, página de inicio y direcciones de la Casa consistorial (Plaza del Pilar y Edificio Seminario).

Ejemplo: Portal de Trámites y Servicios.

Imagen web - Portal de Trámites y Servicios

5.7 Impresos Oficiales

Los impresos oficiales son documentos con una identidad gráfica fija cuyo formato de impresión es formato DINA-4, el formato utilizado para este tipo de documentos es el formato PDF que nos garantiza que la vista y la impresión del documento siempre serán únicas. Los impresos se deben poder cumplimentar en pantalla y deben seguir las recomendaciones de accesibilidad al contenido WCAG 2.1 que afectan a estos documentos, principalmente:

  1. Definir metadatos para el documento.
  2. Estructurar el documento, creando etiquetas para su navegación.
  3. Controlar el orden de tabulación.
  4. Facilitar una ayuda contextual para todos los campos a cumplimentar.

6. Recomendaciones de Estilo

6.1 Estructura de una página

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

Se configura en el archivo _template.xml. Elementos básicos:

  • Logotipo del ayuntamiento, se dispondrá en la parte superior izquierda.
  • Título del portal/servicio (h1).
  • Buscador….sede/servicio
  • Mapa de la web
  • acceso zona personal.
  • Elemento que indica la situación de la página dentro del sitio web. Migas de pan

Cabecera Principal: La cabecera tendrá el fondo el 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.

  1. Cabecera de color negro (#000000). Tiene 174 píxeles de altura. Su longitud se adaptará automáticamente a la página que el usuario/a redimensiona ocupando siempre el 100% (respetando los márgenes).
    Uso: Cuando el usuario/a deba iniciar sesión, portal de IDEZar, quejas y sugerencias y callejero.

    Imagen Cabecera Negra
  2. Cabecera de color rojo (#DC241F). De 174 px. de altura y anchura 100%.
    Uso: específica para Ayuntamiento, Gobierno Abierto y Cultura (nivel 2).

    Imagen Cabecera Roja
  3. Cabecera de color verde (#00C200). De 174 px. de altura y anchura 100%.
    Uso: Realizada para la página “CIUDAD” (nivel 2).

    Imagen Cabecera Verde
  4. Cabecera azul (#006B87). De 174 px. de altura y anchura 100%.
    Uso: Elegida para la página “PARA LA GENTE” (nivel 2).

    Imagen Cabecera Azul
Versión escritorio
Imagen Cabecera Versión escritorio
Versión Móvil
Imagen Cabecera Versión móvil

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sede="http://www.zaragoza.es" xmlns:th="http://www.thymeleaf.org" estilo="medioambiente">
	<th:block th:fragment="cssjs">
		<th:block th:include="fragmentos/cssjs"/>
		<th:block th:include="fragmentos/cssjs2"/>
		<link rel="stylesheet" href="https://www.zaragoza.es/cont/assets/css/portales/medioambiente.css?refresh=y"/>
	</th:block>
	<body>
		<th:block th:fragment="header">
			<header class="navbar navbar-default navbar-fixed-top navbar-portal">
				<div class="container-fluid">
					<th:block th:include="fragmentos/logo"/>
					<div class="pull-left portal-header">
						<sede:breadcrumb title="Medioambiente y Sostenibilidad" link="/sede/portal/medioambiente/" value="[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'},{'link':'/ciudad/', 'text':'Ciudad'},]"/>
					</div>
					<th:block th:include="fragmentos/cabecera"/> 
				</div>
			</header>
		</th:block>
		<th:block th:fragment="menu">
			<th:block th:include="fragmentos/readspeaker"></th:block>
		</th:block>
		<th:block th:fragment="footer">
			<th:block th:include="fragmentos/pie"/>
			<th:block th:include="fragmentos/js"/>
		</th:block>
	</body>
</html>

La elección del estilo de la cabecera se define en el atributo estilo de la etiqueta html del archivo _template.xml de cada uno de los portales y/o servicios, los valores son ogob para la imagen en negro, ayto o gobiernoAbierto o cultura para la cabecera roja, sectores para la cabecera en azul y ciudad o medioambiente para la cabecera en verde.

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

El H1 se define en la etiqueta <sede:breadcrumb> en el atributo title con el nombre del servicio y/o portal

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

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

Ejemplo:[{'link':'https://www.zaragoza.es', 'text':'zaragoza.es'},{'link':'/ciudad/', 'text':'Ciudad'},].

6.1.2 Páginas de Contenido: Portales/Servicios

La información debe presentarse de una forma clara y bien estructurada. Buenas prácticas para elaborar un portal o servicio:

  • Dividir la información en unidades lógicas y bien definidas. Establecer una jerarquía de importancia entre las unidades y crear vínculos entre ellas.
    El usuario/a tiene que encontrar tras un enlace la información/el servicio que se indica en el enlace. A la hora de establecer la arquitectura de información se debe seguir un criterio flexible y consistente, con sentido común, que resulte en una organización lógica y conveniente, nunca debemos basar la arquitectura de información en el organigrama municipal. Dejemos que la naturaleza de los contenidos sea la que sugiera cómo deben subdividirse y estructurarse, encontrando un equilibrio entre el número de opciones de los menús y la profundidad de navegación del sitio web.
    La división de contenidos tiene que presentar de forma clara los servicios que se ofrecen, cómo acceder y utilizar esos servicios y quien es el responsable de la gestión de esos servicios.
  • La información se debe orientar al usuario/a. Lo irrelevante o sin utilidad para nuestro público objetivo debe desaparecer. Es importante desarrollar historias de usuario para recabar sus necesidades.
  • Establecer una correlación entre la jerarquía de información y la jerarquía visual en la página. La jerarquía visual proporciona relaciones jerárquicas del tipo 'esto es parte de esto' y 'esto va a continuación de esto'. La jerarquía informativa establece relaciones del tipo 'esto es más importante que esto'. Importante mantener el mismo tipo de jerarquía tanto de información como visual para toda la Sede Electrónica.
  • Facilitar una exploración rápida del contenido. Antes de detenerse a leer, la persona usuaria explorará la página para hacerse una idea de qué contiene (y lo más importante: si podrá encontrar lo que está buscando). Los elementos que podemos usar para permitir una exploración del contenido son:
    • Títulos y subtítulos: rompiendo la continuidad del texto con títulos y subtítulos indicaremos al usuario/a qué estamos tratando en cada sección, facilitando el acceso a la información/servicios. Ejemplo: Portal del Servicio de Juventud - CIPAJ.
    • Negrita.
    • Listas: las listas son preferibles a largos párrafos a la hora de suministrar información en la Sede ya que:
      • Permiten leer la información verticalmente
      • Permiten una exploración rápida del contenido
      • No intimidan al usuario/a visualmente
      • Facilitan la exposición sucinta de la información
    • Enlaces:
      • No insertar enlaces en el texto de los párrafos.
      • El texto del enlace ha de ser significativo, describiendo el contenido al que enlaza. Evitar el uso de enlaces tipo 'pinche aquí'.
      • Los menús o barras de navegación no se deben saturar con demasiadas opciones (siete u ocho como máximo) ni usar más de tres términos para definir cada enlace. Ver apartado 8. Sistemas de Navegación.
      • Enlaces que activan acciones (envio información imprimir, buscar, etc.).
      • No aplique estilos al enlace (colores, negrita, subrayado, etc).
      • Revisar la naturaleza de los enlaces. Hay enlaces que tienen una periodicidad de actualización.
      • Analizar que los enlaces son accesibles.
    • Redacción:
      • Seguir una estructura piramidal: la parte más importante del mensaje, el núcleo, debe ir al principio.
      • Resumir. Es importante comenzar con un sumario, sobre todo en páginas largas, que permita al usuario/a decidir si la información que contiene es relevante para él.
      • Un párrafo = una idea: cada párrafo debe ser un objeto informativo.
      • Escribir frases cortas.
      • Usar un lenguaje claro, conciso y preciso.
      • El vocabulario ha de ser sencillo y fácilmente comprensible. No emplee tecnicismos ni use jerga.
      • Texto y contexto en el lenguaje administrativo ¿Por qué no nos entienden?

  • Elementos adicionales: es aconsejable acompañar los textos con elementos adicionales siempre que ayuden al usuario/a a entender los contenidos, como enlaces, documentos relacionados o gráficos, entre otros. Servicios de visualización. Ver apartado 3.1. Estándares utilizados.
  • Evitar el uso de:
    • Texto en cursiva: dificulta la lectura en pantalla.
    • Texto subrayado: el usuario/a pensará que se trata de un enlace.
    • Texto coloreado: diferenciar texto mediante colores no cumple los requisitos de accesibilidad y crea confusión con enlaces.
  • Los PDF no se deben utilizar como excusa para no generar contenidos en formato web. Los recursos importantes que están disponibles en otros formatos pueden ser convertidos a páginas web muy fácilmente. En general no se debe abusar de los documentos PDF para proporcionar información, utilizándolos únicamente en determinados casos:
    • Folletos asociado a actividades “Agenda Zaragoza”.
    • Documentos legales destinados a ser impresos o que deben mantener un formato determinado. Ejemplo: Anexos como planos, imágenes, etc. que pueden formar parte de un documento legal.
    • Información que por su naturaleza es muy extensa. Documentos cerrados. Catálogo de publicaciones
    En estos casos, es necesario que se incluyan en los documentos, con formato web, un esquema o resumen de la información que esté contenida en los PDF.
  • Usar títulos con significado
  • Si la página no está preparada es mejor no publicarla. Causa un efecto poco profesional publicar páginas “en construcción”.
  • Asegurar la propiedad intelectual de los documentos e imágenes que se publican en la Sede Electrónica.

Para ampliar información:

6.1.3 Pie de página

Pie de pagina

En el pie de página deberá aparecer:

actualmente hay dos ficheros llamados pie y pieHome

HTML - PIEHOME

<footer class="fnd-negro" vocab="http://schema.org/" typeof="Organization"> 
	<div class="row"> 
		<div class="col-xs-12 col-sm-12 col-md-12 text-center padding-t1em">
			<nav>
				<ul class="list-inline footerList row margin-a0em navbar-right text-center"> 
					<li class="primeraFooter"><a class="navbar-left" href="/sede/portal/copy" style="color:#ffffff">
				<strong>© Ayuntamiento de Zaragoza.</strong>
			</a></li> 
					<li class="border-left"><a class="enlacePie" href="/sede/portal/accesibilidad">Accesibilidad</a></li>
					<li class="border-left"><a class="enlacePie" href="//www.w3c.es/Consorcio/miembro/listado_es">Miembro W3C</a></li>
					<li class="border-left"><a class="enlacePie" href="/sede/portal/aviso-legal">Aviso Legal</a></li>
					<li class="border-left"><a class="enlacePie" href="/sede/portal/politica-privacidad">Política de privacidad</a></li>
					<li class="border-left ultimaFooter"><a class="enlacePie" href="/sede/portal/proteccion-datos">Protección de Datos</a></li>
					 <li class=""><a class="enlacePie" href="/sede/"><img class="logoFooter" src="https://www.zaragoza.es/cont/vistas/portal/sede/img/logo.png" alt="logoAyuntamiento"></a></li>
				</ul>
			</nav>
		</div>
	
	</div> 
	 <div class="col-md-12 fnd-gris-claro bloque2-footer">
		<ul class="list-inline padding-l1em text-center" style="float: left;margin-bottom: 1px;">
			<li class="footerDireccion textoFooter"><span class="cabeceraFooter">Casa Consitorial:</span> Plaza del Pilar nº18 |</li>
			<li class="footerDireccion textoFooter"><span class="cabeceraFooter">Edificio Seminario:</span> Via Hispanidad nº20 |</li>
			<li class="footerDireccion textoFooter">50071 - Zaragoza - España |</li>
			<li class="footerDireccion textoFooter">Tel: 976 721100, 010(976721234)</li>
		</ul>
	</div> 
	<div class="col-md-12 padding-t1em" style="background-color:#000000;"></div>
</footer>

HTML - PIE

<footer class="fnd-gris-claro margin-t3em" vocab="http://schema.org/" typeof="Organization">
 <div class="container">
 <div class="row padding-v05em">
 <div class="col-xs-12 col-sm-12 col-md-8 col-md-push-4">
 <nav>
 <ul class="list-inline row margin-a0em navbar-right text-center">
 <li><a href="/ciudad/ticketing/verNuevaQuejaAnonima_Ticketing">Su opinión importa</a></li>
 <li><a href="/sede/portal/accesibilidad">Accesibilidad</a></li>
 <li><a href="//www.w3c.es/Consorcio/miembro/listado_es">Miembro W3C</a></li>
 <li><a href="/sede/portal/aviso-legal">Aviso Legal</a></li>
 <li><a href="/sede/portal/politica-privacidad">Política de privacidad</a></li>
 <li><a href="/sede/portal/proteccion-datos">Protección de Datos</a></li>
 
 </ul>
 </nav>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-8 text-center">
 <a class="navbar-left" href="/sede/portal/copy">
 <strong>© Ayuntamiento de Zaragoza</strong>
 </a>
 </div>
 </div>
 </div>
</footer>

Llamados desde el código en los _template.xml de cada uno de los portales o servicio o servicio transversales.

<th:block th:fragment="footer">
	<th:block th:include="fragmentos/pie" />
</th:block>
6.1.3 bis Nuevo Pie de página
Pie de pagina

Detalles:

  • Los nuevos portales incorporan un acceso directo al Servicio de Quejas y Sugerencias con el mensaje “Si no has encontrado lo que buscabas...”. Ejemplo: Portal de Gobierno Abierto.
  • Se incorpora un boton con el mensaje "Tu opinión importa". Este será un enlace al sistema de Quejas y Sugerencias
  • Se retira el logo del ayuntamiento y se agregan, en los portales que lo ameriten, las redes sociales.
    Ejemplo con redes sociales: Portal de Gobierno Abierto.
    Ejemplo sin redes sociales: Portal de Trámites y Servicios.

CSS - pie_gobab


        :root {
            --main-color: #E81B16; /*#ff4940 OLD*/
        }

        .footer-hr{
            border: 5px solid rgba(0,0,0,0.1);
        }

        .opinion_buttons ul{
            max-width: 700px;
            margin: 0 auto;
        }

        

        .opinion_buttons ul li .btn-primary{
            width: 280px;
            background-color: var(--main-color);
            outline: none;
            border: 1px solid transparent;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .opinion_buttons ul li .btn-primary:hover{
            border: 1px solid var(--main-color);
            border-radius: 10px;
            text-decoration: underline
        }

        .navbar-section_social ul{
            display: flex;
            justify-content: center;
        }

        .social_media {
            margin: 0 1em;
        }
        .social_media a abbr {
            cursor: pointer;
        }

        .social_media a img {
            max-width: 50px;
        }

        .social_media .facebook:hover{
            filter: hue-rotate(214deg) saturate(89%) brightness(52%);
        }

        .social_media .twitter:hover{
            filter: hue-rotate(203deg) saturate(89%) brightness(100%);
        }
        
        .legal_links{
            background-color: var(--main-color);
        }
        .legal_links li a{
            color: #FFF;
            padding: .5em;
        }

        @media (max-width: 480px) {
            .border-left {
                border-left: 1px solid #fff;
            }
        }


										

HTML - pie_gobab

<footer class="margin-t3em" vocab="http://schema.org/" typeof="Organization">
	<div class="container">
        <div class="row opinion_buttons margin-b2em">
            <div class="col-xs-12">
                <ul class="list-inline text-center">
                    <li class="col-xs-12 col-sm-6">
                        <a href="https://www.zaragoza.es/ciudadania/gobierno-abierto/participar/verNuevaQuejaAnonima_Ticketing?notfound=s" class="btn btn-primary margin-t1em" target="_blank">Si no has encontrado lo que buscabas...</a>
                    </li>
                    <li class="col-xs-12 col-sm-6">
                        <a href="/ciudad/ticketing/verNuevaQuejaAnonima_Ticketing" class="btn btn-primary margin-t1em" target="_blank">Tu opinión importa</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row navbar-section_social text-center margin-b2em">
            <div class=" col-xs-12">
                <p> Siempre informado</p>
                <ul class="list-unstyled">
                    <li class="social_media">
                        <a itemprop="sameAs" href="https://www.facebook.com/ZGZopencity/">
                            <span class="sr-only">Facebook</span>
                            <abbr title="facebook.com/ZGZopencity">
                                <img class="facebook img-responsive" src="/cont/vistas/fragmentos/img/rrss-fb.png" alt="logo de facebook" />
                            </abbr>
                        </a>
                    </li>
                    <li class="social_media">
                        <a itemprop="sameAs" href="https://twitter.com/ZGZopencity">
                            <span class="sr-only">Twitter</span>
                            <abbr title="twitter.com/ZGZopencity">
                                <img class="twitter img-responsive" src="/cont/vistas/fragmentos/img/rrss-tw.png" alt="logo de twitter" />
                            </abbr>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row legal_links">
        <div class="col-xs-12 col-sm-12 col-md-12  text-center">
            <nav>
                <ul class="list-inline  row margin-a0em  text-center padding-a1em">
                    <li class="">
                        <a class="" href="/sede/portal/aviso-legal" th:text="#{footer.avisolegal}"></a>
                    </li>
                    <li class="border-left">
                        <a class="" href="/sede/portal/politica-privacidad" th:text="#{footer.politicaprivacidad}"></a>
                    </li>
                    <li class="border-left">
                        <a class="" href="/sede/portal/accesibilidad" th:text="#{footer.accesibilidad}"></a>
                    </li>
                    <li class="border-left">
                        <a class="" href="/sede/portal/proteccion-datos" th:text="#{footer.protecciondatos}"></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="container">
        <div class="row ayto_information margin-t1em">
            <div class="col-md-12">
                <ul class="list-inline  padding-l1em  text-center" style="margin-bottom: 1px;">
                    <li class="footerDireccion">
                        <strong>Casa Consistorial:</strong> Plaza del Pilar nº18 |
                    </li>
                    <li class="footerDireccion">
                        <strong>Edificio Seminario:</strong> Via Hispanidad nº20 | 50071 - Zaragoza - España |
                    </li>
                    <li class="footerDireccion">
                        <strong>Tel:</strong> <a href="tel:976721100" target="black" rel="noreferrer" style="color: #202020"> 976 721 100</a>, <span style="color: red">010</span> o <a href="tel:976721234" target="black" rel="noreferrer" style="color: #202020">976 721 234</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row margin-b2em">
            <div class="col-md-12 text-center">
                <a class="" style="color: black;" href="/sede/portal/copy"><strong>© Ayuntamiento de Zaragoza.</strong></a>
            </div>
       </div>
    </div>
</footer>


										

incluir en _template:

<th:block th:fragment="footer">
	<th:block th:include="fragmentos/pie_newRedes" />
</th:block>

Sin redes Sociales:

<th:block th:fragment="footer">
	<th:block th:include="fragmentos/pie_newNoRedes" />
</th:block>

6.2 Contenido de una página (Accesibilidad y Responsivo)

En el diseño de las páginas deberemos aplicar el paradigma de “Mobile-first design”, diseñado primero para móviles en español. Con ello diseñaremos primero para dispositivos móviles. Para implementar este paradigma aplicaremos diseño responsivo a través de las herramientas que nos proporcionan bootstrap 3.3.7 y las media Queries de CSS 3.0.

La accesibilidad es una de la prioridades del Ayuntamiento de Zaragoza dentro de los estándares W3C, por ello deberemos tener en cuenta lo siguiente:

  • Se deberían definir presentaciones de los textos para los diferentes tipos de dispositivos que pueden acceder, son los denominados media types:
  • aural. Orientado a sintetizadores de voz
  • Braille. orientado a dispositivos braille
  • Embossed orientados a impresoras de braille.
  • Handheld orientado a dispositivos de pantalla pequeña.
  • Print orientado a la impresión de documentos.
  • projection orientado a proyección de presentaciones.
  • screen orientado a ordenadores personales.
  • tty Orientado a teletipos terminales o dispositivos móviles con capacidades limitadas de presentación.
  • tv orientado a televisión

6.3. Iframes

Los iframes se utilizarán solo cuando no exista otra solución. Actualmente los que se incluyen van encaminados a incorporar los siguientes contenidos:

  • Mapas de IDEZAR.
  • Vídeos del Ayuntamiento en sus canales oficiales de Youtube.

Los iframes se utilizan en unidades relativas (y nunca en absolutas) tanto en los atributos del lenguaje de marcado como en las propiedades de las hojas de estilo.

HTML

<div class="embed-responsive embed-responsive-16by9 embed-responsive-16by9">
	<iframe title="Título del vídeo" class="embed-responsive-item" src="https://www.youtube.com/embed/código ID del vídeo (lo que va despues de ?v=)" allowfullscreen="allowfullscreen">
		<p>Reproductor de vídeo no soportado. <a href="https://www.youtube.com/embed/código ID del vídeo (lo que va despues de ?v=)">Enlace al vídeo en youtube.com</a></p>
	</iframe>
</div>

7. Recomendaciones de diseño

7.1 Agrupación de Portales


Ejemplo 1. Agrupación de portales bajo la etiqueta de Medioambiente y Sostenibilidad

Escritorio

  • A CABECERA
    • Ver los elementos de la cabecera. Apartado 6.1.1
    • Importante: h1 es el título de la agrupación. En el caso del ejemplo es “Medioambiente y Sostenibilidad".
  • CUERPO
    • B Imagen de cuerpo de la agrupación del portales: Sirve de tarjeta de presentación de la agrupación de portales y permite la entrada al portal. Es una imagen horizontal de presentación que ocupa todo el ancho de la página (2000x300 ppp).
    • C Menú principal de Primer Nivel de la Agrupación de Portales. Ver apartado 7.4.
    • D Servicio de noticias destacadas. Ver Apartado 8.3. Noticias.
    • E Servicio de avisos y destacados. Ver Apartado 8.1. Avisos y destacados.
    • E Sección donde se destaca puntualmente un servicio o proyecto en respuesta de una demanda.
    • F Servicios Agenda. Ver Apartado 8.2. Agenda.
  • G PIE DE PÁGINA. Ver apartado 6.1.3.
Imagen web - Portal medio ambiente

Notas: La imagen que identifica la agrupación puede estar encima o debajo del menú. El menú puede ser textual o de iconos.

CSS

.list-aviso img {
	margin: 0 0 10px 0 !important;
	width: 100%;
	height: 175px;
	border-radius: 0px;
}
.list-aviso p {
	font-size: medium;
	padding-bottom: 10px;
}
.nav-pills-pasive {
	border: 1px solid #CCC;
	background: #FFF;
	border-radius: 0.30em;
	margin-top: -1px;
}
.backgroundgreen {
	color: #fff;
	background-color: #4B8A1C;
}
.panel-contenido-b {
	width: 31.5%;
	padding: 5px 0 0 0 !important;
}
.agenda-verde-b {
	padding: 0 !important;
	width: 31.5%;
}
.table>tbody>tr>td>a {
	color: #D01715;
	font-weight: bold;
}        
@media (max-width: 768px){
	.panel-contenido-b {
		width: 45%;
		margin-left: 1em;
		object-fit: cover;
	}
	.agenda-verde-b {
		width: 95%;
		margin-left: 1em;
		object-fit: cover;
	}        
}
@media (max-width: 425px){
	.panel-contenido-b {
		width: 95%;
		margin-left: 1em;
		object-fit: cover;
	}
	.agenda-verde-b {
		width: 95%;
		margin-left: 1em;
		object-fit: cover;
	}        
}

HTML

<sede:content container="false">			
	<div class="row ">
		<img alt="" class="full-width img-responsive hidden-xs hidden-sm" src="/cont/vistas/portal/medioambiente/img/cabecera-b.png"/>
	</div>
	<div class="container-fluid">
		<div class="col-md-12">
			<div class="row">
				<header class="titulo-medioambiente"></header>
			</div>
		</div>
		<div class="row">
			<nav class="nav nav-menu menu-medioambiente">
				<ul class="list-unstyled col-md-12 list-inline" id="">
					<li class="">
						<a class="iconCalidad" href="/sede/portal/medioambiente/calidad-aire/">
							<img class="img-responsive" alt="" src="/cont/vistas/portal/medioambiente/img/icono1A_Aire.png"/>
							<p>Calidad del aire</p>
						</a>
					</li>
					<li class="">
						<a class="iconCambiClimatico" href="/sede/portal/medioambiente/cambio-climatico/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono2A_CambioClimatico.png"/>
							<p>Cambio climático</p>
						</a>
					</li>
					<li class="">
						<a class="iconRuido" href="/sede/portal/medioambiente/ruido/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono3A_Ruido.png"/>
							<p>Ruido</p>
						</a>
					</li>
					<li class="">
						<a class="iconAgua" href="/sede/portal/medioambiente/agua/">
						<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono4A_Agua.png"/>
							<p>Agua</p>
						</a>
					</li>
					<li class="">
						<a class="iconResuidos" href="/sede/portal/medioambiente/residuos/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono5A_Residuos.png"/>
							<p>Limpieza y residuos</p>
						</a>
					</li>
					<li class="" style="clear:both;">
						<a class="iconInfraestructura" href="/sede/portal/medioambiente/infraestructura-verde/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono6A_Infraestructura.png"/>
							<p>Parques, jardines e infraestructura verde</p>
						</a>
					</li>
					<li class="">
						<a class="iconAlimentacion" href="/sede/portal/medioambiente/alimentacion-sostenible/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono7A_Alimentacion.png"/>
							<p>Alimentación sostenible</p>
						</a>
					</li>
					<li class="">
						<a class="iconEducacion" href="/sede/portal/medioambiente/educacion-participacion/">
							<img alt="" class="img-responsive" src="/cont/vistas/portal/medioambiente/img/icono8A_EducacionParticipacion.png"/>
							<p>Educación y participación</p>
						</a>
					</li>
					<li class="">
						<a class="iconTransparencia" href="/sede/portal/medioambiente/transparencia/">
							<img class="img-responsive" alt="" src="/cont/vistas/portal/medioambiente/img/icono9A_Transparencia.png"/>
							<p>Transparencia</p>
						</a>
					</li>
					<li class="">
						<a class="iconTwiter" href="https://twitter.com/medioambientez?lang=es" title="Twitter">
							<img alt="" class="redes-medioambiente img-responsive" src="/cont/vistas/portal/medioambiente/img/icono10A_Twitter.png"/>
						</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="fnd-gris-claro">
		<div class="container-fluid">
			<div class="col-md-12">
				<div class="row">
					<section class="panel col-md-6 col-sm-12 col-xs-12">
						<sede:calidad-aire></sede:calidad-aire>
						<div class="col-md-12 col-sm-12 col-xs-12 ">
							<div class="alert alert-info">
								<p>* Las celdas sin valor corresponden a datos no emitidos por las estaciones.</p>
							</div>
						</div>
					</section>
					<div class="panel panel-contenido col-md-6 col-sm-12 col-xs-12">
						<section class="panel-body">
							<header>
								<h3  class="text-right">Noticias</h3>
								<p class="text-right"><a href="/sede/portal/medioambiente/servicio/noticia/list?fq=temas_smultiple%3A("Medio+Ambiente")">Ver todas las noticias</a></p>
							</header>
							<div class="row">
								<sede:noticia listado="s" imagen="s" usuario="1" fecha="" espacio="" numero="3" tema="Medio Ambiente" vermas="Medio Ambiente" carpeta="/sede/portal/medioambiente/" fragment="/fragmentos/medioambiente/custom-list-noticia"></sede:noticia>
							</div>
						</section>
					</div>
					<div class="row">
						<div class="panel panel-destacados col-md-12 col-sm-12 col-xs-12">
							<section class="panel-body">
								<header>
									<h3  class="text-right">Destacados</h3>
									<hr class="sm"/>
								</header>
								<div class="row">
									<sede:aviso clase="col-md-3 col-sm-6 col-xs-12" nresultados="4" resumen="si" imagen="si" portal="Medio Ambiente" tipo="1"></sede:aviso>
								</div>
							</section>
						</div>
					</div>              
					<div class="row">
						<div class="panel agenda-verde-b col-md-4 col-sm-12 col-xs-12">
							<img class=<section class="col-md-12">
							<div class="panel panel-contenido-b col-md-4 col-sm-12 col-xs-12">
								<article class="panel-body">
									<header>
										<h3>Zaragoza Verde</h3>
										<hr class="sm"/>
									</header>
									<div class="">
										<a href="/sede/portal/medioambiente/infraestructura-verde/recorridos/#guia">
										<img src="/cont/vistas/portal/medioambiente/infraestructura-verde/img/img-guia-zgz-natural.jpg" class="img-responsive" alt=""/>
										<h4>Guía Zaragoza Natural</h4></a> 
										<p>Esta guía brinda una oportunidad única para que la ciudadanía conozca, disfrute y se acerque al patrimonio natural de la ciudad y experimente vivencias que enriquezcan y fortalezcan los vínculos con él, así como el sentimiento de identidad y pertenencia a este excepcional territorio.</p><p>
										<span class="fas fa-hand-point-right"></span> <a href="/sede/portal/medioambiente/infraestructura-verde/recorridos/#guia">Ir a la página</a>.</p>
									</div>
								</article>
								<div class="panel panel-contenido-b col-md-4 col-sm-12 col-xs-12">
									<article class="panel-body">
										<header>
											<h3 class="narrow padding-t0em"><a href="/sede/portal/medioambiente/educacion-participacion/cdamaz/">Centro de Documentación (<abbr title="Centro de Documentación del Agua y del Medio Ambiente">CDAMAZ</abbr>)</a></h3>
											<hr class="sm"/>   
										</header>
										<p><a href="/sede/portal/medioambiente/educacion-participacion/cdamaz/">Quienes somos</a> • <a href="/sede/portal/medioambiente/educacion-participacion/cdamaz/">Nuestros servicios</a> • <a href="/sede/portal/medioambiente/educacion-participacion/cdamaz/">Lecturas verdes</a></p>
										<hr class="sm"/>
										<sede:aviso clase="col-md-12 cdma" nresultados="1" resumen="si" imagen="si" portal="Centro Documentacion" tipo="1"></sede:aviso>
									</article>
								</div>
								<div class="img-agenda-verde img-responsive" src="/cont/vistas/portal/medioambiente/img/imagAgenda.png" alt=""/>                             
								<article class="panel-body">
									<header>
										<h3 class=""><a href="/sede/servicio/actividades/medioambiente/">Agenda verde</a></h3>
									</header>
									<div class="">
										<sede:calendario-agenda listado="S" portal="14" carpeta="/sede/servicio/actividades/medioambiente/calendar/"></sede:calendario-agenda>
									</div>
								</article>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</sede:content>

Dispositivos móviles

La Cabecera prescinde de las migas de pan.

La imagen de cuerpo de la agrupación de portales no se muestra y se presenta directamente el menú de navegación de Primer Nivel, con los iconos apilados de dos en dos.

Imagen web mobile - Portal medio ambiente 1
Ejemplo 2. Portal de Organización Municipal.

Escritorio

  • A CABECERA. En color rojo y con el título de la agrupación de portales de portales.
  • CUERPO:
    • B Debajo de la cabecera, sobre una franja de color gris, figura el Menú de navegación principal o de Primer Nivel de la agrupación de portales. Ver apartado 7.4.1.
    • Imagen representativa del portal activo o sección alineada a la izquierda. En el ejemplo “Organización Política”.
    • C Menú de Segundo Nivel con los apartados pertenecientes al portal de la agrupación activo: imagen y título del apartado sobre banda negra agrupados en columnas de tres elementos apilados de dos en dos.
    • D Sección donde se destaca puntualmente un servicio o proyecto: Equipamiento.
  • E PIE DE PÁGINA. Ver apartado 6.1.3.
Imagen web - Portal organizacion

CSS

.borderImage{
	height:24px;
	width: 100%;
	border-top:
	solid 20px #ee3030;
	border-radius: 0px 0px 0px 0px
}
body {
	background-color: #fafafa;
}
.nav-tabs li {
	width: 25%;
	text-align: center;
	margin-top: 40px;
	font-size: 32px;
}
.nav-tabs li a {
	height: 74px;
	line-height: 32px;
	padding: 20px 0;
	border-radius: 10px 10px 0 0;
	background-color: #f1f1f1;
}
@media (max-width: 991px) {
	.nav-tabs li {
		font-size: 24px;
	}
}
.tab-content {
	border-left: solid 0px #ddd;
	border-right: solid 0px #ddd;
	border-bottom: solid 0px #ddd;
	border-radius: 0px 0px 10px 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 40px;
	position: relative;
	margin-bottom: 60px;
}
.pestanas {
	background-color: #e0e0e0;
	width: 100%;
	height: 181px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
@media (max-width: 767px){
	.pestanas {
		height: 211px;
	}
}
.col-sm-3,
.col-sm-9 {
	padding-left: 2px !important;
	padding-right: 2px !important;
}
.cuadro {
	position: relative;
}
.cuadro img {
	padding-bottom: 4px;
}
.cuadro h2 {
	position: absolute;
	bottom: -6px;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 10px;
	border-radius: 0px 0px 5px 5px;
}
.cuadro h2 a {
	color: #ffffff !important;
	font-weight: bold;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover {
	border: 0px;
}
.nav-tabs li:nth-child(1) a,
.menu-movil li:nth-child(1) a {
	color: #ee3030;
}
.nav-tabs li:nth-child(2) a ,
.menu-movil li:nth-child(2) a {
	color: #00a525;
}
.nav-tabs li:nth-child(3) a ,
.menu-movil li:nth-child(3) a {
	color: #0067d0;
}
.nav-tabs li:nth-child(4) a ,
.menu-movil li:nth-child(4) a {
	color: #783cff;
	padding: 4px 0;
}
.pie {
	height: 20px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 0px 0px 10px 10px;
}
.pie-rojo {
	background-color: #ee3030;
}
.pie-azul {
	background-color: #0067d0;
}
.pie-morado {
	background-color: #783cff;
}
.pie-verde {
	background-color: #00a525;
}
.fnd-blanco {
	background-color: #ffffff;
	padding: 5px;
	margin-bottom: 60px;
}
.fnd-blanco .col-md-3,
.fnd-blanco .col-md-6 {
	padding: 0;
}
.pad20 {
	padding: 25px 20px !important;
}
.pad20.destacado {
	padding: 10px 20px !important;
}
.pad20 h3 {
	margin-top: 0px;
	color: #D01715;
}
.pad20 h2 {
	margin-top: 0;
	font-size: 36px;
}
.pad20 h3 small {
	color: #000;
}
.borde-l {
	border-left: solid 2px #000;
	padding-left: 10px;
}
.borde-r {
	border-right: solid 2px #000;
	padding-right: 10px;
}
.pad20 p {
	margin-bottom: 0px;
}
.menu-movil li {
	width: 100%;
	background-color: #fff;
	border: solid 1px #f5f5f5;
	border-radius: 5px;
	margin-bottom: 5px;
}
.menu-movil li.active {
	background-color: #f5f5f5;
}

HTML

<sede:content>
	<!--Comienzo de tabs-->
	<div class="pestanas"></div>
	<ul class="nav nav-tabs hidden-xs" role="tablist">
		<li role="presentation" class="active"><a href="/sede/portal/organizacion/">Política</a></li>
		<li role="presentation"><a href="/sede/portal/organizacion/administrativa/">Administrativa</a></li>
		<li role="presentation"><a href="/sede/portal/organizacion/territorial/" >Territorial</a></li>
		<li role="presentation"><a href="/sede/portal/organizacion/entidades/">Entidades dependientes</a></li>
	</ul>
	<ul class="visible-xs list-unstyled menu-movil" style="font-size: 18px; padding-top: 10px;">
		<li class="text-center active"><a href="/sede/portal/organizacion/">Política</a></li>
		<li class="text-center"><a href="/sede/portal/organizacion/administrativa/">Administrativa</a></li>
		<li class="text-center"><a href="/sede/portal/organizacion/territorial/">Territorial</a></li>
		<li class="text-center"><a href="/sede/portal/organizacion/entidades/">Entidades dependientes</a></li>
	</ul>
	<!--Fin de tabs-->
	<!--Contenido de las tabs-->
	<div class="tab-content">
		<!--Política-->
		<div role="tabpanel" class="tab-pane active" id="politica">
			<div class="row">
			</div>
			<div class="pie pie-rojo"></div>
			<div class="row">
				<div class="col-sm-3 hidden-xs">
					<div class="">
						<img src="/cont/vistas/portal/organizacion/img/imag_organizacionPolitica.jpg" class="img-rounded img-responsive" alt=""/>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="borderImage"></div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/alcalde-port.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="/sede/portal/organizacion/alcalde/">El Alcalde</a>
						</h2>
					</div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/01D_consejoUrbanismo.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="/sede/portal/organizacion/consejogerencia/">Consejo Urbanismo</a>
						</h2>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="borderImage"></div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/corporacion-p.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="/sede/portal/organizacion/plenos/">El Pleno</a>
						</h2>
					</div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/01E_agendaInstitucional.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="http://www.zaragoza.es/sede/servicio/agenda-institucional/">Agenda Institucional</a>
						</h2>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="borderImage"></div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/01B_gobiernoZaragoza.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="/sede/portal/organizacion/gobiernozaragoza/composicion">Gobierno de Zaragoza</a>
						</h2>
					</div>
					<div class="cuadro">
						<img src="/cont/vistas/portal/organizacion/img/01F_agendaAbierta.jpg" class="img-rounded img-responsive" alt=""/>
						<h2 class="text-center">
							<a href="https://www.zaragoza.es/sede/servicio/transparencia/agenda-abierta">Agenda Abierta</a>
						</h2>
					</div>
				</div>
			</div>
		</div>
		<!--Fin de política-->
	</div>
	<!--Fin de contenido de las tabs-->
	<div class="container-fluid fnd-blanco radius">
		<div class="col-md-3 col-xs-6">
			<img src="http://www.zaragoza.es/cont/paginas/organizacion/img/img-portada-pilar.jpg" width="300" alt="Casa Consistorial" class="img-responsive img-rounded"/>
		</div>
		<div class="col-md-3 col-xs-6 text-left pad20">
			<h3 class="borde-l"><small>Atención al ciudadano</small><br/>Casa Consistorial</h3>
			<p>Plaza Ntra. Sra. del Pilar, 18</p>
			<p>50001 Zaragoza</p>
			<p>Tel.: 976 72 11 00</p>
			<p><a href="https://www.zaragoza.es/sede/portal/idezar/mapa/comoMoverse/?nd=Pza.%20del%20Pilar%20,%2018&xd=676840.38&yd=4613965.9">Cómo llegar</a> en trasporte público</p>
			<p><a href="/sede/portal/organizacion/historia">Historia de la Casa Consistorial</a></p>
		</div>
		<div class="col-md-3 col-xs-6 text-right pad20">
			<h3 class="borde-r"><small>Atención al ciudadano</small><br/>Edificio Seminario</h3>
			<p>Vía Hispanidad, 20</p>
			<p>50009 Zaragoza</p>
			<p>Tel.: 976 72 10 00</p>
			<p><a href="https://www.zaragoza.es/sede/portal/idezar/mapa/comoMoverse/?nd=V%C3%ADa%20Hispanidad,%2020&xd=674094.66&yd=4611606.41">Cómo llegar</a> en trasporte público</p>
		</div>
		<div class="col-md-3 col-xs-6">
			<img src="http://www.zaragoza.es/cont/paginas/usic/img/img-portada-archivo.jpg" width="300" alt="Edificio Seminario" class="img-responsive img-rounded"/>
		</div>
	</div>
</sede:content>

Dispositivos móviles

La versión para dispositivos móviles prescinde de las migas de pan en la cabecera y sustituye las pestañas del menú principal por botones que despliegan el contenido al activarlos.

Imagen web mobile - Portal organizacion

7.2 Portal de segundo nivel


Ejemplo 1. Servicio de Juventud - Centro de Información y Asesoramiento Juvenil. CIPAJ.

Escritorio

  • A CABECERA en color azul con título del portal y migas de pan.
    • Elementos de la cabecera. Ver apartado 6.1.1.
    • Importante: h1 es el título de la agrupación. En este caso "Juventud Zaragoza".
  • CUERPO:
    • B Menú de navegación principal o de Primer Nivel. Ver apartado 7.4: Sistemas de navegación.
    • C Encabezamiento de portal de Segundo Nivel: Espacio horizontal limitado arriba por el menú de navegación de Primer Nivel y debajo por dos líneas horizontales. Consta de los siguientes elementos:
      • Imagen del portal de Segundo Nivel: Ilustración o logotipo del servicio municipal. Figura a la izquierda ocupando una cuarta parte del ancho de la página (tres columnas del sistema de columnas y contenedores de bootstrap <col-md-3>).
      • Título del portal de Segundo Nivel: h2, align left.
      • Menú de Segundo Nivel: Situado en la parte inferior de la cabecera y alineado a la izquierda. Los enlaces del menú se disponen en horizontal, en minúscula y separados por una línea vertical.
    • Líneas de separación: Dos líneas de color de 5px de grosor cada una (border-top: 5px solid #c12b3d;).
    • Contenido de la página:
  • H PIE DE PÁGINA. Ver apartado 6.1.3.
Imagen web - Portal de Juventud 3

CSS

ul.list-aviso> li:nth-child(4n+1) {
    clear: both;
	}
@media(max-width:768px){
	ul.list-aviso> li:nth-child(2n+1){
		clear:both;
	}
}
li.actividades {
	min-height: 185px;
}
.card {
	position: relative;
	padding-top: 1.5em;
	min-height: 245px;
	padding-bottom: 60px-;
}
#acessos .cuadro-h img {
	width: 33%!important;
	height: auto;
}
.destacados img {    
	height: auto; 
	object-fit: contain;     
}
.cuadro-asesorias {
	height: 248px;
	border-radius: 5px;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;      
}
.cuadro-asesorias h3 {
	padding-top: 200px;
    font-weight: 600;
    font-size: 22px;      
}
.empleo {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_empleo.png);
}
.estudios {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_estudios.png);
}
.juridica {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_juridica.png);
}
.psicologica {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_psicologica.png);
}         
.sexologica {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_sexologica.png);
}  
.vivienda {
	background-image: url(http://www.zaragoza.es/cont/vistas/portal/juventud/img/asesoria_vivienda.png);
}
.link-black a {
	color: black !important;
}
.link-white a {
	color: #fff !important;
} 

HTML

<sede:content>
	<div class="row">
		<img alt="" class="img-cabecera padding-a0em margin-t0em full-width img-responsive hidden-xs hidden-sm" src="/cont/vistas/portal/juventud/img/cabecera_Juventud-v3.jpg"/>
	</div>
	<div class="card">
		<section class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<article class="destacados-">
					<header>
						<h2 class="">Destacados</h2>
						<hr class="sm"/>
					</header>
					<div class="row"> 
						<sede:aviso clase="col-md-3 col-sm-6 col-xs-12" imagen="si" nresultados="8" portal="Juventud" resumen="si"> </sede:aviso>
					</div>
					<div class="row">
						<div class="text-center col-md-12">
							<a class="btn btn-sm btn-primary" href="/sede/portal/juventud/servicio/noticia/2/search?category.titleContains=Pol%C3%ADticas%20de%20Juventud">MÁS NOTICIAS DE JUVENTUD</a>
						</div>
					</div>
				</article>
			</div>
		</section>
	</div>
	<div class="card">
		<section class="row">
			<div class="col-md-12">
				<header>
					<h2 class="section-title">Asesorías gratuitas</h2>
					<hr class="sm"/>
				</header>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias empleo link-black">
						<div class="col-sm-12 col-md-12">
							<h3>
								<a href="https://www.zaragoza.es/sede/portal/juventud/servicio/equipamiento/28629#servicios">Empleo</a>
							</h3>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias vivienda link-white">
						<div class="col-sm-12 col-md-12">
							<h3>
								<a href="https://www.zaragoza.es/sede/portal/juventud/servicio/equipamiento/2127#servicios"
							target="_blank">Vivienda</a>
							</h3>
							<ul class="list-unstyled row no-gutter list-barrios list-inline">
								<li>
									<span class="fas fa-hand-point-right"></span><a href="/sede/portal/juventud/cipaj/servicio/cita-previa/1368">
									Quiero pedir cita</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias estudios link-black">
						<div class="col-sm-12 col-md-12">
							<h3>
								<a href="/sede/portal/juventud/cipaj/servicio/tramite/119">Estudios</a>
							</h3>
							<ul class="list-unstyled row no-gutter list-barrios list-inline">
								<li>
									<span class="fas fa-hand-point-right"></span><a href="/sede/portal/juventud/cipaj/servicio/cita-previa/1143">
									Quiero pedir cita</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias juridica link-white">
						<div class="col-sm-12 col-md-12">
							<h3>
								<a href="/sede/portal/juventud/cipaj/servicio/tramite/116" target="_blank">
								Jurídica</a>
							</h3>
							<ul class="list-unstyled list-inline">
								<li>
									<span class="fas fa-hand-point-right"></span>
									<a href="/sede/portal/juventud/cipaj/servicio/cita-previa/1141" target="_blank"> Quiero pedir cita</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias psicologica link-black">
						<div class="col-sm-12 col-md-12">
							<h3>
								<a href="/sede/portal/juventud/cipaj/servicio/tramite/117" target="_blank">Psicológica</a>
							</h3>
							<ul class="list-unstyled list-inline">
								<li>
									<span class="fas fa-hand-point-right"></span>
									<a href="/sede/portal/juventud/cipaj/servicio/cita-previa/1161" target="_blank"> Quiero pedir cita</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 padding-a05em text-center">
					<div class="cuadro-asesorias sexologica link-white">
						<div class="col-sm-12 col-md-12">
							<header>
								<h3>
									<a href="http://www.zaragoza.es/sede/portal/juventud/servicio/tramite/118"target="_blank">Sexológica</a>
								</h3>
							</header>
							<ul class="list-unstyled list-inline">
								<li>
									<span class="fas fa-hand-point-right"></span>
									<a href="/sede/portal/juventud/cipaj/servicio/cita-previa/1142"target="_blank"> Quiero pedir cita</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<div class="card">
		<section id="acessos" class="row">
			<div class="col-md-12">
				<h2 class="section-title">Acceso rápido</h2>
				<hr class="sm"/>
			</div>
			<article class="col-md-4 col-sm-12">
				<div class="cuadro-h">  <img width="" class="col-md-4 col-xs-4 img-responsive" alt="Anuncios" src="/cont/vistas/portal/juventud/img/logo-cipaj.png" />
					<div class="col-xs-8 col-sm-8 col-md-8  margin-t1em">
						<h3><a href="/sede/servicio/actividades/juvenil/" target="_blank">Agenda Joven CIPAJ</a></h3>
						<p>Consulta o inserta actividades de interés para la juventud de Zaragoza</p>
					</div>
				</div>
			</article>
			<article class="col-md-4 col-sm-12">
				<div class="cuadro-h">  <img width="90" class="col-md-4 col-xs-4 img-responsive" alt="Mapa Joven Zaragoza" src="/cont/vistas/portal/juventud/img/mapajovenzaragoza.jpg" /> 
					<div class="col-xs-8 col-sm-8 col-md-8  margin-t1em">
						<h3><a href="./mapa-joven">Mapa Joven Zaragoza</a></h3>
						<p>Busca en el mapa todos los equipamientos para jóvenes</p>
						<ul class="list-unstyled">
							<li>
								<a href="https://play.google.com/store/apps/details?id=es.zaragoza.mapajovenes&hl=es_ES"><img src="/contenidos/iconos/aplicaciones/androidmini.jpg" alt="Android"/></a>
								<a href="https://apps.apple.com/es/app/mapa-joven-zaragoza/id1300579916"><img src="/contenidos/iconos/aplicaciones/applemini.jpg" alt="Android"/></a>
							</li>
						</ul>
					</div>
				</div>
			</article>
			<article class="col-md-4 col-sm-12">
				<div class="cuadro-h"> <img class="col-md-4 col-xs-4 img-responsive" alt="Casas de Juventud"  src="/cont/vistas/portal/juventud/img/logo-casasjuv.png" /> 
					<div class="col-xs-8 col-sm-8 col-md-8  margin-t1em">
						<h3>Cerca de ti</h3>
						<ul class="list-unstyled">
							<li><span class="fas fa-hand-point-right"></span> <a href="/sede/portal/juventud/servicio/equipamiento/category/43">Casas de Juventud</a></li>
							<li><span class="fas fa-hand-point-right"></span> <a href="/sede/portal/juventud/servicio/equipamiento/search?category.idInList=960,1001,980,981,982,1000">PIEE</a></li>
							<li><span class="fas fa-hand-point-right"></span> <a href="/sede/portal/juventud/servicio/equipamiento/4127">El Túnel</a></li>
							<li><span class="fas fa-hand-point-right"></span> <a href="/sede/portal/juventud/conocenos">Nuestra sede en Morlanes</a></li>
						</ul>
					</div>
				</div>
			</article>
		</section>
	</div>
	<div class="card">
		<section class="row">
			<div class="col-md-12">
				<div class="img-rounded">
					<h2>Vídeos <small class="margin-t05em pull-right"><a href="/sede/portal/juventud/servicio/video/category/7">Ver más vídeos</a></small></h2>
					<hr class="sm" />
					<sede:video lista="7" numero="3"></sede:video>
				</div>
			</div>
		</section>
		<section class="row ">
			<div class="col-md-12 padding-v1em">
			<p class="text-center">Plaza San Carlos, 4. 50001 Zaragoza. Tel. 976 721 800 <a href="mailto:juventud@zaragoza.es">juventud@zaragoza.es</a><br />
			<a href="/sede/servicio/equipamiento/533">Cómo llegar en transporte </div>
		</section>
		<section class="row ">
			<div class="col-md-12">
				<nav class="nav-bottom">
					<ul class="list-inline nav-inf clearfix">
						<li class="col-xs-6 col-sm-3 col-md-3"><a class="col-xs-12" href="conocenos">Conócenos</a></li>
						<li class="col-xs-6 col-sm-3 col-md-3"><a class="col-xs-12" href="planjoven">Plan Joven</a></li>
						<li class="col-xs-6 col-sm-3 col-md-3"><a class="col-xs-12" href="servicios">Servicios</a></li>
						<li class="col-xs-6 col-sm-3 col-md-3"><a class="col-xs-12" href="publicaciones">Publicaciones</a></li>
					</ul>
				</nav>
			</div>
		</section>
	</div>
</sede:content>

Dispositivos móviles

La Cabecera prescinde de las migas de pan.

Oculta la imagen de cabecera del portal de segundo nivel y apila el contenido del menú de Segundo Nivel.

Imagen web mobile - Portal medio ambiente 2

7.3 Servicio y/o Portal


Ejemplo 1. Portal de Deporte

Versión escritorio

Imagen web - Portal deporte

CSS

.fa {
	vertical-align: middle;
}
body {
	padding-top: 57px;
}
.fase {
	background-color: #202020;
	color: #fff;
	font-weight: bold;
}
ul#menu {
	/*border-bottom: 2px solid #E81B16;*/
	border: 1px solid #CCC;
	font-weight: bold;
	margin-bottom: 1em;
	border-radius: 0 0 .5em .5em;
}
ul#menu .elemento {
	display: block;
	padding: 10px 15px;
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.42857143;
	/* h2 line-height == a line-height*/
}
ul#menu h2 {
	background: #E81B16;
	color: white;
}
.fnd-turismo {
	background: #d68100;
}
.full-screen-box {
	width: 100%;
	border: 1px solid #d4d4d4;
	border-radius: 2px;
	padding: 20px;
	margin-bottom: 14px;
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.full-screen-box {
	border-left: 3px solid #55a7b3;
}
.left-ribbon {
	position: relative;
   /* position: absolute;*/
	bottom: 5px;
	background: #EEE;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
	padding: 10px 15px;
	clear: both;
	margin-left: -24px;
	/*margin-left: -10px;*/
	float: left;
}
.left-ribbon::before {
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	left: -1px;
	content: '';
	border-bottom: 10px solid transparent;
	border-right: 10px solid #757575;
}
.imageNoticiasDeporte {
	height: 150px;
	border-radius: 16px;
}
.justificado {
	text-align: justify;
	line-height: 1.5em;
	letter-spacing: -1px;
}
.border-left {
	border-right: 2px solid #008A00;
}
.list-actividades li {
	font-size: 1.2rem;
	/*min-height: 200px;*/
}
.listado-centros li{
	min-height: 250px;
	text-align:center;
}
.listado-otros-centros li{
	min-height: 150px;
	text-align:center;
}
.listado-centros li img{
	max-width: 150px;
	margin: 0px auto;
}
.listado-otros-centros li img{
	max-width: 150px;
	margin: 0px auto;
}
.list-aviso > li {
	min-height: 150px;
}
.destacados ul.list-aviso>li {
	margin: 1rem auto;
}
#deporte ul.list-noticias>li:nth-child(2n+1){
	clear:both;
}
.destacados ul.list-aviso>li p,
.destacados ul.list-aviso>li ul {
	padding-left: 0;
	margin: 0.75rem 0px;
}
.destacados-b p {
    font-weight: bold;
    padding: 10px 0;
}
.secciones-info .card {
	min-height: 370px;
}
@media (max-width: 768px) {
	.list-noticias li img,
	.list-actividades li img{
		width: 100%;
	}
	.listado-centros li{
		width: 50%!important;
	}
	.equipamientos > div:nth-child(1){
		width: 50%;
	}
	.equipamientos > div:nth-child(2){
		width: 50%;
	}
	.listado-equipamiento-solr li {
		min-height: 25em;
	}
}
@media (max-width: 476px){
	.equipamientos > div{
		margin: 1rem auto;
	}
	.equipamientos > div,
	.listado-centros li{
		width: 100%!important;
	}
	.destacados .list-aviso div img {
		width: 100%;
	}
}
@media (min-width: 420px) {
	.border-left {
		border-bottom: 2px solid #008A00;
		margin-bottom: 15px;
		border-right: none !important;
	}
	.nav {
		padding-left: 15px !important;
	}
}

HTML

<sede:content>
	<section class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<div class="card">
				<h2>Destacados</h2>
				<hr class="sm"/>
				<article class="row destacados-b"> 
					<sede:aviso clase="col-md-4 col-sm-12 col-xs-12" imagen="si" nresultados="3" portal="Deporte: Destacado primera" resumen="si"> </sede:aviso>
				</article>
			</div>
		</div>
	</section>
	<div class="card margin-t1em">
		<div class="row">
			<div class="col-xs-12">
				<div>
					<div class="row">
						<div class="col-md-4">
							<form action="/sede/portal/deporte/servicio/cultura/evento" enctype="application/x-www-form-urlencoded" method="get">
								<label for="nombre">Buscar una <span class="text-primary">ACTIVIDAD</span></label>
								<div class="input-group input-group-sm">
									<input class="form-control" id="nombre" name="query" placeholder="Introduce un título..." type="text"/>
									<div class="input-group-btn">
										<button class="btn btn-default" title="Buscar Actividad" type="submit"><span class="fa fa-search" aria-hidden="true"></span></button>
									</div>
								</div>
							</form>
							<hr class="sm"/>
							<div class="margin-b05em" th:classappend="${currentDevice.isMobile()} ? '' : left-ribbon">
								<h3 class="nomargin">
									<span class="fa fa-info-circle" aria-hidden="true"></span> Ayudanos a mejorar, <a href="https://www.zaragoza.es/sede/portal/deporte/servicio/cultura/evento/new">INSERTA UNA ACTIVIDAD</a> en la Agenda de Zaragoza.
								</h3>
							</div>
						</div>
						<div class="col-md-8">
							<div class="clearfix">
								<h2 class="titulo-test pull-left">
									<span class="fas fa-calendar-alt" aria-hidden="true"></span> Hoy en Zaragoza
								</h2>
								<ul class="list-inline pull-right">
									<li class="border-solid-left">
										<a href="/sede/portal/deporte/servicio/cultura/evento?fq=fechaInicio_dt%3A%5B*%20TO%20NOW%2B7DAY%5D%20AND%20fechaFinal_dt%3A%5BNOW%2B7DAY%20TO%20*%5D%20AND%20temas_smultiple%3A%28%22Deporte%22%29">Próxima semana</a>
									</li>
									<li class="border-solid-left">
										<a href="/sede/portal/deporte/servicio/cultura/evento?fq=fechaInicio_dt%3A%5B*%20TO%20NOW%2B1MONTH%5D%20AND%20fechaFinal_dt%3A%5BNOW%2B1MONTH%20TO%20*%5D%20AND%20temas_smultiple%3A%28%22Deporte%22%29">Próximo mes</a>
									</li>
								</ul>
							</div>
							<div class="row">
								<div class="col-md-6">
									<sede:calendario-agenda carpeta="/sede/portal/deporte/servicio/cultura/evento/calendar" listado="false" tema="25"></sede:calendario-agenda>
								</div>
								<div class="col-md-6 horario-actividades">
									<h2 class="titulo-test">
										<span class="fa fa-list" aria-hidden="true"></span> Actividades
									</h2>
									<sede:agenda carpeta="/sede/portal/deporte/servicio/cultura/evento/" clase="col-md-12 col-sm-12 col-xs-12" fragment="/fragmentos/cultura/evento/list-img-alt" numero="4" portal="20"> </sede:agenda>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<h2 class="titulo-test">Instalaciones deportivas</h2>
				<hr class="sm"/>
				<div class="row equipamientos">
					<div class="col-md-6">
						<form action="/sede/servicio/equipamiento/list" class="form-inline" enctype="application/x-www-form-urlencoded" method="get">
							<label for="nombreQuery">Buscar un <span class="text-primary">EQUIPAMIENTO</span> </label>
							<div class="input-group input-group-sm">
								<input class="form-control" id="nombreQuery" name="query" placeholder="Introduce un nombre..." type="text"/>
								<div class="input-group-btn">
									<button class="btn btn-default" title="Buscar Equipamiento" type="submit"><span class="fa fa-search" aria-hidden="true"></span></button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-6">
						<h3 class="margin-v05em">
							<span style=" vertical-align: middle;" class="far fa-map" aria-hidden="true"></span> Buscar desde el <a href="//idezar.zaragoza.es/callejero/">CALLEJERO</a>
						</h3>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<ul class="list-unstyled center-block listado-centros">
							<li class="col-md-3 col-sm-6 col-xs-12">
								<img alt="Centros Deportivos" class="img-responsive" src="/cont/vistas/portal/deporte/img/centros-deportivos.png"/>
								<p class="padding-t1em">
									<a href="/sede/portal/deporte/centrospabellones/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Centros+Deportivos%22%29%20AND%20titularidad_smultiple%3A%28%22Municipal%22%29&query=">Municipales</a> | <a href="/sede/portal/deporte/centrospabellones/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Centros+Deportivos%22%29%20AND%20titularidad_smultiple%3A%28%22Privado%22%29&query=">Privados</a> | <a href="/sede/portal/deporte/centrospabellones/servicio/equipamiento/catalog?category.idInList=56,57&rows=100">Todas</a>
								</p>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<img alt="Piscinas cubiertas" class="img-responsive" src="/cont/vistas/portal/deporte/img/piscinas-cubiertas.png"/>
								<p class="padding-t1em">
									<a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Piscinas+Cubiertas%22%29%20AND%20titularidad_smultiple%3A%28%22Municipal%22%29&query=">Municipales</a> | <a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Piscinas+Cubiertas%22%29%20AND%20titularidad_smultiple%3A%28%22Privado%22%29&query=">Privadas </a> | <a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/category/166">Todas</a>
								</p>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<img alt="Piscinas de verano" class="img-responsive" src="/cont/vistas/portal/deporte/img/piscinas-verano.png"/>
								<div class="text-center">
									<p class="padding-t1em">
										<a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Piscinas+de+Verano%22%29%20AND%20titularidad_smultiple%3A%28%22Municipal%22%29&query=">Municipales</a> | <a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/list?fq=temas_smultiple%3A%28%22Deporte%22%29+AND+subtemas_smultiple%3A%28%22Piscinas+de+Verano%22%29%20AND%20titularidad_smultiple%3A%28%22Privado%22%29">Privadas</a> | <a href="http://www.zaragoza.es/sede/portal/deporte/piscinas/servicio/equipamiento/category/167">Todas</a>
									</p>
								</div>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/fitness/servicio/equipamiento/category/1921"><img alt="Fitness y salud" class="img-responsive" src="/cont/vistas/portal/deporte/img/fitness.png"/> </a>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/futbol/servicio/equipamiento/category/55"><img alt="Campos de fútbol" class="img-responsive" src="/cont/vistas/portal/deporte/img/futbol.png"/> </a>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/padel"><img alt="Pádel" class="img-responsive" src="/cont/vistas/portal/deporte/img/padel.png"/> </a>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/elementales/servicio/equipamiento/category/76"><img alt="Instalaciones elementales" class="img-responsive" src="/cont/vistas/portal/deporte/img/elementales.png"/> </a>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/otras-instalaciones"><img alt="Otros" class="img-responsive" src="/cont/vistas/portal/deporte/img/otros.png"/> </a>
							</li>
						</ul>
					</div>
				</div>
				<h2>Otros Equipamientos</h2>
				<hr class="sm"/>
				<div class="row">
					<div class="col-md-12">
						<ul class="list-unstyled center-block listado-otros-centros">
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="/sede/portal/deporte/balnearios/servicio/equipamiento/category/1920"><img alt="Balnearios" class="img-responsive" src="/cont/vistas/portal/deporte/img/balnearios.png"/> </a>
							</li>
							<li class="col-md-3 col-sm-6 col-xs-12">
								<a href="http://www.zaragoza.es/sede/portal/deporte/federaciones/servicio/asociacion/?fq=categoria_smultiple%3A%28%22Entidades+Ciudadanas.+Deportivas.%22%29"><img alt="Federaciones" class="responsive" src="/cont/vistas/portal/deporte/img/federaciones.png"/> </a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row padding-b2em">
		<div class="col-md-12">
			<h2>Zaragoza Deporte Municipal S.A.U.</h2>
			<p>Zaragoza Deporte Municipal S.A.U. es una Sociedad Privada Municipal del Excmo. Ayuntamiento de Zaragoza con capital 100% público y con el objeto social de gestionar las instalaciones deportivas que el Ayuntamiento determine, ofreciendo los espectáculos deportivos del más alto nivel y acogiendo en sus instalaciones a los equipos de deporte de sala de la ciudad que compitan en las divisiones de mayor categoría.</p>
			<div class="row">
				<div class="col-md-4">
					<img src="/cont/vistas/portal/deporte/img/logo-zaragoza-deporte.png" class="img-responsive" alt=""/>
					<h3 class="h4">Zaragoza Deporte Municipal</h3>
					<hr class="sm"/>
					<ul><li><a href="https://www.zaragozadeporte.com/">Página web de Zaragoza Deporte Municipal</a> <i class="fas fa-external-link-square-alt"></i></li></ul>
				</div>
				<div class="col-md-4">
					<img src="/cont/vistas/portal/deporte/img/img-30-aniversario.png" class="img-responsive" alt=""/>
					<h3 class="h4">30 Aniversario Pabellón "Príncipe Felipe"</h3>
					<hr class="sm"/>
					<ul>
						<li><a href="https://principefelipe.zaragozadeporte.com/30aniversario/" target="_blank">Ir a la página web</a> <i class="fas fa-external-link-square-alt"></i></li>
						<li><a href="https://www.youtube.com/watch?v=XPNxCz2moJ4" target="_blank">Ver vídeo</a> <i class="fas fa-external-link-square-alt"></i></li>
					</ul>
				</div>
				<div class="col-md-4">
					<img alt="" class="img-responsive" src="/cont/vistas/portal/deporte/img/img-boletin-zdeporte.png"/>
					<h3 class="h4">Boletín Zaragoza Deporte Digital</h3>
					<hr class="sm"/>
					<ul>
						<li><a href="https://www.zaragozadeporte.com/Boletin/AltaBoletin.asp">Suscríbete al boletín</a> <i class="fas fa-external-link-square-alt"></i></li>
						<li><a href="https://www.zaragozadeporte.com/Boletin/BoletinHistorico.asp">Ver todos los boletines</a> <i class="fas fa-external-link-square-alt"></i></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</sede:content>

Dispositivos móviles

La Cabecera prescinde de las migas de pan.

Apila en vertical el contenido del menú principal.

Imagen web mobile - Portal deporte

7.4 Imágenes

Se detallan en el Anexo Tratamiento de imágenes.

7.4.1 Imágenes con clase “thumbnail” de bootstrap

Se utilizan para insertar imágenes que vienen acompañadas de título, texto explicativo, enlaces, etc.


				
<div class="col-sm-6 col-md-4">
   <div class="thumbnail">
     <img src="..." alt="...">
     <div class="caption">
       <h3>Thumbnail label</h3>
       <p>...</p>
        <p>
         <a href="#" class="btn btn-primary" role="button">Button</a> 
         <a href="#" class="btn btn-default" role="button">Button</a>
       </p>
     </div>
   </div>
</div>
				
				

7.5 Fuentes

7.5.1 En general:
  • Porque así lo indica nuestra CSS principal (apartado 7.6), el navegador selecciona en primer lugar fuentes de la familia Helvetica, en color negro (#000000). Utilizará Arial u otra “sans-serif” (sin serifa) que tenga instalada, en su defecto.
  • Los textos sensibles se identificarán en color rojo (#CC0000). Al situar el ratón sobre estos textos interactivos (rollover), se mostrarán en el mismo color (#CC0000) pero subrayados.
  • Los textos de opciones ya visitadas se verán en color rojo oscuro (#660000).
7.5.2 Excepciones:

Botonera principal


  • Fuente: Helvetica, Arial,sans-serif, en mayúsculas
  • Tamaño: 70% ptos.
  • Alineación: Izquierda
  • Color fondo:
    • Botón “Ayuntamiento” › Caja color #DC241F
    • Botón “La Ciudad” › Caja color #009900
    • Botón “Para la gente” › Caja color #00475F
    • Botón “Turismo” › Caja color #FF9900
    • Botón “Cultura” › Caja color #86429E
    • Botón “Gobierno Abierto“ > Caja color #DC241F

Ruta o Migas de pan


  • Fuente: Helvetica, Arial, sans-serif, minúsculas
  • Tamaño: 9 ptos
  • Color: #CC0000
  • Separando los títulos por una barra diagonal en el mismo color.

Botonera de navegación general


  • Fuente: Helvética
  • Tamaño: 9 ptos
  • Color: Negro #000000

Título principal de la página


  • Fuente: Helvetica, Arial, sans-serif, negrita y en mayúsculas
  • Tamaño: 1.4 em
  • Color: Negro #000000

Subtítulo de la página


  • Fuente: Helvetica, Arial, sans-serif, negrita y en mayúsculas
  • Tamaño: 1.2 em
  • Color: # Propio del bloque en el que te encuentras

Etiquetas de campos


  • Fuente: Helvetica, Arial,sans-serif, negrita y en mayúsculas
  • Tamaño: 1 em
  • Color: # Propio del bloque en el que te encuentras

Colores de los subtítulos y etiquetas de campo en el capítulo


  • “Ayuntamiento” › color #DC241F
  • “La Ciudad” › color #009900
  • “Para la gente” › color #00475F
  • Turismo” › color #FF9900

7.6. Hojas de estilo en cascada o CSS utilizadas

Generales

Son utilizados en todos los portales.

Guía de Estilo 2011:


  • https://www.zaragoza.es/cont/plantillas/css/portal/home.css
  • https://www.zaragoza.es/cont/plantillas/css/portal/cont_home.css
  • https://www.zaragoza.es/cont/plantillas/css/portal/estructura.css
  • https://www.zaragoza.es/cont/plantillas/css/portal/bloques.css
  • https://www.zaragoza.es/cont/plantillas/css/portal/handheld.css
  • https://www.zaragoza.es/cont/plantillas/css/portal/print.css

Guía de Estilo 2020:


En 2017, todas las hojas de estilo de la Sede Electrónica se integran en una sola, utilizando Less Bootstrap 3.3.7. que da lugar a una hoja main-sede.css minificada.

El enlace a la hoja de estilo se encuentra en el template cssjs, que es integrado en los servicios y en los portales. Se accede desde el siguinete link:

  • https://www.zaragoza.es/cont/assets/css/main-sede.min.css
Específicos

Dada la diversidad de portales y servicios que ofrece la web del Ayuntamiento, se ha optado por añadir nuevos CSS en cada portal, para dar respuesta a necesidades específicas. Esta opción no afecta al resto de portales.

Estas CSS se integran en los template de cada portal con la siguiente ruta:

  • https://www.zaragoza.es/cont/assets/css/portales/nombre_del_portal.css

9. Elementos especiales

9.1 Avisos/Destacados

Los Avisos/Destacados pueden obtenerse de dos maneras, por consulta a base de datos a través de la gestión de gcz o por código html estático.

9.1.1 Servicio de Avisos a través de la gestión de gcz

Ejemplo: Portal de Medioambiente


Compuesto por:

  • Listado de destacados a través de la etiqueta <sede:aviso> con lo siguientes atributos:
    • Clase: con la clase css de bootstrap para ordenar los avisos
    • nresultados: con el número de avisos que se quieran recuperar.
    • portal: campo de texto para indicar al portal que pertenece, valor insertado en la parte de gestión.
    • título: campo tipo texto para poner un título en h3 en la cabecera del listado
    • fragment: campo de texto con la ruta de la plantilla sino se pasa atributo carga por defecto que se localiza en /j/cont/vistas/fragmentos/aviso/thumbnails.xml, si se genera nueva estética hay que pasarle la ruta nueva y crear el archivo en /j/cont/vistas/fragmentos/aviso/ y pasarle con valor del atributo /fragmentos/aviso/nombre_del_archivo_sin_extensión

HTML

<div class="row">
	<div class="panel panel-destacados col-xs-12">
		<section class="panel-body">
			<header>
				<h3 class="text-right">Destacados</h3>
			 <hr class="sm"/>
			</header>
			<div class="row">
				<sede:aviso clase="col-md-3 col-xs-6" nresultados="4" portal="Medio Ambiente"></sede:aviso>
			</div>
		</section>
	</div>
</div>

Gestión de las imágenes

Las imágenes se insertan en www.zaragoza.es/gcz en el apartado de avisos y las imágenes se guardan en /cont/paginas/img/avisos/ por defecto debemos usar imágenes de 360ppx x 160ppx.

9.1.2 Servicio de Destacados Ad-hoc. Cuadro de foto con enlace

No es gestionado a través del cgz

HTML

<ul class="row list-unstyled list-ogob">
	<li class="col-sm-4">
		<div class="cuadro">
			<img src="/cont/vistas/portal/participacion/img/consulta/consulta-b.jpg" class="img-rounded img-responsive" alt="">
			<h3 class="text-center"><a href="/sede/portal/consulta-publica/consumo-indebido-bebidas-alcoholicas/">Ordenanza Reguladora del Consumo indebido de Bebidas Alcohólicas, fomento de la Convivencia</a></h3>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div> 
	</li>						
	<li class="col-sm-4">
		<div class="cuadro">
			<img src="/cont/vistas/portal/participacion/img/consulta/taxi-participac-colaboracion-b.png" class="img-rounded img-responsive" alt="">
			<h3 class="text-center"><a href="/sede/portal/consulta-publica/reglamento-taxi/">Reglamento del Servicio Urbano del taxi</a></h3>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div> 
	</li>			
	<li class="col-sm-4">
		<div class="cuadro">
			<img src="/cont/vistas/portal/participacion/img/cp-ordenanza-incendios-portal-participacion.png" class="img-rounded img-responsive" alt="">
			<h3 class="text-center"><a href="/sede/portal/consulta-publica/incendios/">Ordenanza Protección contra Incendios</a></h3>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div> 
	</li>
</ul>

Gestión de las imágenes

Las imágenes se tienen que guardar en el mismo repositorio que gestiona gcz. El tamaño de las fotos será de 360ppx x 246ppx.

Modelo Destacado tarjetón enlace web
  • Es una variación del modelo anterior con la imagen más pequeña. Usado también en Gobierno Abierto - Participación y Colaboración.
  • Resolución: 520 ppx x 254 ppx

HTML

<ul class="row list-unstyled list-ogob">
	<li class="col-sm-4">
		<div class="card text-center">
			<a href="/sede/portal/consulta-publica/consumo-indebido-bebidas-alcoholicas/">
				<img style="max-height:136px" class="img-responsive img-rounded" src="/cont/vistas/portal/participacion/img/consulta/consulta-publica.png" alt="">
				<hr class="sm">
				<h3 class="btn btn-primary btn-block">Consumo indebido de Bebidas Alcohólicas,<br> fomento de la Convivencia</h3>
			</a>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div>
	</li>
	<li class="col-sm-4">
		<div class="card text-center">
			<a href="/sede/portal/consulta-publica/reglamento-taxi/">
				<img class="img-responsive img-rounded" src="/cont/vistas/portal/participacion/img/consulta/taxi-consulta-publica-b.png" alt="">
				<hr class="sm">
				<h3 class="btn btn-primary btn-block">Reglamento del Servicio Urbano del taxi</h3>
			</a>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div>
	</li>					
	<li class="col-sm-4">
		<div class="card text-center">
			<a href="/sede/portal/consulta-publica/incendios/">
				<img class="img-responsive img-rounded" src="/cont/vistas/portal/participacion/img/cp-ordenanza-incendios-portal-consulta.png" alt="">
				<hr class="sm">
				<h3 class="btn btn-primary btn-block">Ordenanza Protección contra Incencios</h3>
			</a>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-warning">EN RETORNO</div>
		</div>
	</li>
</ul>

9.2 Agenda

Existen diferentes formas de mostrar la agenda. Su implementación puede hacerse mediante dos etiquetas propias <sede:agenda> o <sede:calendario-agenda>, dependiendo de los que vamos a visualizar.

9.2.1 Agenda <sede:agenda>

Son los eventos definidos en la parte gcz o eventos particulares. Está compuesto por:

  • Listado de actos a través de la etiqueta <sede:aviso> con lo siguientes atributos:
    • Clase: con la clase css de bootstrap para ordenar los avisos
    • nombre: campo de texto para buscar por título del Acto.
    • numero: con el número de actos que se quieran recuperar.
    • programa: campo de texto para indicar al programa que pertenece, valor insertado en la parte de gestión.
    • tema: campo de texto con la categoría del acto.
    • nombre_entidad: campo de texto con el nombre del organizador del acto
    • titulo: campo tipo texto para poner un título en h3 en la cabecera del listado..
    • usuario: campo de texto con el código de usuario que ha creado el acto.
    • destacadas: campo de texto si cadena vacía muestra los actos destacados sino muestra los actos con fecha de inicio sea menor que el dia actual y fecha fin acto mayor que el día actual.
    • portal: campo de texto con el número de portal que se quiera filtrar.
    • fragment: Campo de texto con la ruta de la plantilla. Si no se pasa atributo carga por defecto que el que se localiza en /j/cont/vistas/fragmentos/cultura/evento/list.xml. Si se genera nueva estética hay que pasarle la ruta nueva y crear el archivo en /j/cont/vistas/fragmentos/cultura/evento/nombre_del_archivo.xml y pasarle con valor del atributo /fragmentos/cultura/evento/nombre_del_archivo_sin_extensión
9.2.2 Calendario agenda <sede:agenda>

La Agenda también se puede presentar en formato calendario, mostrando el mes y el día actual. Es posible moverse por el calendario para ver fechas futuras. Se puede ver el listado con los actos del día a través de la etiqueta <sede:agenda>

Compuesto por:

  • Calendario:
    • programa: campo de texto para indicar al programa que pertenece, valor insertado en la parte de gestión.
    • tema: campo de texto con la categoría del acto.
    • portal: campo de texto con el id del portal. Ver el listado de ids de los portales en Agenda.
    • carpeta: Campo de texto con enlace a las actividades de un servicio. Por ejemplo, Medioambiente: /sede/servicio/actividades/medioambiente/calendar para enlazar con la Agenda Verde. Juventud: /sede/servicio/actividades/juvenil/calendar para enlazar con la Agenda Joven..
    • cajadia: campo con valor “s” para mostrar el día actual seleccionado.
    • dirigidoa: campo para indicar a quién va dirigido con valor numérico.
  • Listado:
    • Listado: campo con valor “s” para obtener el listado de actividades o actos con los parámetros pasados en la etiqueta.

9.3 Noticias.

Existen diferentes formas de mostrar las noticias. Las noticias publicadas desde gcz deben ser implementadas con la etiqueta <sede:noticia>, en formato de listado, con imagen, título y resumen. Está compuesto por:

  • Calendario:
    • clase: con la clase css de bootstrap para ordenar las noticias.
    • numero: con el número de noticias que se quieran recuperar.
    • portal:campo de texto para indicar al portal que pertenece, valor insertado en la parte de gestión.
    • texto: campo tipo texto para buscar noticias cuyo título o resumen coincidan con el texto pasado como valor.
    • tema: campo texto numérico indicando el tema.
    • espacio: campo de texto que permite filtrar el espacio definido en gcz.
    • convocatoria: en desuso.
    • imagen: campo texto “s” para mostrar la imagen en el listado.
    • historico: campo de texto “s” para mostrar un histórico de noticias desde hoy hacia atrás siempre que la noticia tenga fecha de caducidad.
    • fragment: campo de texto con la ruta de la plantilla sino se pasa atributo carga por defecto que se localiza en /j/cont/vistas/fragmentos/noticias/list.xml, si se genera nueva estética hay que pasarle la ruta nueva y crear el archivo en /j/cont/vistas/fragmentos/noticias/ y pasarle con valor del atributo /fragmentos/noticias/nombre_del_archivo_sin_extensión
    • usuario: campo de texto con el código de usuario que ha creado la noticia.
    • vermas: campo de texto “s” que carga enlace a /sede/servicio/noticia/list con ver más noticias sobre el tema que se ha rellenado en el atributo tema como parámetro de temas múltiples.
    • carpeta: campo de texto para campo descrito en gcz.
    • tipo: campo de texto numérico indicando el tipo de noticia definido en gcz.

HTML

<section class="card">
	<div class="row">
		<div class="col-xs-12 ">
			<header>
				<h2 class="titulo-dest">Actualidad</h2>
				<hr class="sm"/>
			</header>
			<sede:noticia carpeta="/sede/portal/juventud/cipaj/" espacio="2" fecha="s" fragment="/portal/juventud/custom-list-noticia" imagen="s" listado="s" numero="4" resumen="" tema="" texto="" usuario=""></sede:noticia>
		</div>
		<div class="col-xs-12 padding-a1em">
			<a href="/sede/portal/juventud/cipaj/servicio/noticia/2/search?tipo=1"><font size="3"><strong>Ver más</strong></font></a> 
		</div>
	</div>
</section>

Gestión de las imágenes

Las imágenes se tienen que guardar en el mismo repositorio que gestiona gcz en la ruta /cont/paginas/noticias/nombre_de_la_imagen.jpg/png/jpeg. El tamaño de las fotos varía, pero deben tener posición rectangular horizontal.

9.4 El menú. Diferentes formas de visualizarlo

9.4.1 Cuadros con ICONO y enlace

Ejemplo: Portal Participación y Colaboración - Procesos Participativos:


Se disponen en horizontal cuadros de color gris que contienen iconos y textos que enlazan con diferentes secciones. Este menú está compuesto por:

  1. Lista no ordenada:
    • <div class="text-center margin-t2em fnd-gris-claro radius">
    • <ul class="row list-unstyled otros-espacios">
    • <li class="col-xs-6 col-sm-3 col-lg-2">
  2. Enlace: es la ruta que nos lleva a la sección, y se integra por:
    • Icono que representa la sección. Tamaño de la imagen 105ppx x 86ppx con la clase css .margin-b05em.
    • Texto: Nombre de la sección.
Ejemplo icono enlace

HTML

<ul class="row list-unstyled list-ogob otros-espacios">
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="/sede/portal/participacion/urb-participativo/">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_urbanismoParticipativo.png" style="margin-bottom: 10px;" alt="">
				<p class="">Urbanismo Participativo</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="http://www.zaragoza.es/sede/portal/participacion/ebropolis">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_ebropolis.png" style="margin-bottom: 10px;" alt="">
				<p class="">Ebrópolis</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="/sede/portal/participacion/consejoescolar">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_consejoEscolar.png" style="margin-bottom: 10px;" alt="">
				<p class="">Consejo Escolar Municipal de Zaragoza</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="/sede/portal/participacion/plenoinfantil">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_plenoInfantil.png" style="margin-bottom: 10px;" alt="">
				<p class="">Pleno Infantil Municipal</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="https://www.zaragoza.es/ciudad/sectores/casaculturas/organos.htm">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_JuntaCasaCulturas.png" style="margin-bottom: 10px;" alt="">
				<p class="">Junta General de la Casa de las Culturas</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="https://www.zaragoza.es/zac">
				<img src="/cont/vistas/portal/participacion/img/Participacion/iconoredZAC.png" style="margin-bottom: 10px;" alt="">
				<p class="">Red Zac</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="http://www.zaragoza.es/sede/servicio/asociacion/">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_asociaciones.png" style="margin-bottom: 10px;" alt="">
				<p class="">Censo de Entidades Ciudadanas</p>
			</a>
		</div>
	</li>
	<li class="col-xs-6 col-sm-3 col-lg-2">
		<div class="text-center margin-t2em fnd-gris-claro radius">
			<a href="https://www.zaragoza.es/sede/portal/voluntariado/">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_voluntariado.jpg" style="margin-bottom: 10px;" alt="">
				<p class="">Voluntariado</p>
			</a>
		</div>
	</li>
</ul>
9.4.2 Menú de navegación integrado

El portal contiene un menú de navegación integrado. Está compuesto por:

  • Iconos representativos de la sección que representa en tamaño 90 ppx x 90 ppx.
  • Título: texto con el título de la sección por debajo del icono centrado.
  • Iconos de las redes sociales: iconos posicionados de forma absoluta dentro del div de la imagen del portal.
  • Imagen del portal: imagen representativa del portal al final del listado en tamaño.

Versión escritorio

Imagen menu - Portal participacion

Versión Móvil

Imagen menu mobile - Portal participacion

HTML

<div class="row">
	<div class="col-sm-6">
		<div class="col-xs-6 col-sm-3 text-center border-left-2">
			<a href="/ciudad/ticketing/verNuevaQuejaAnonima_Ticketing">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_quejasYsugerencias.png" alt="Quejas y sugerencias">
				<p class="titulo-negro">Quejas y sugerencias</p>
			</a>
		</div>
		<div class="col-xs-6 col-sm-3 text-center border-left-2">
			<a href="/sede/portal/participacion/consejos/">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_consejodelaCiudad.png" alt="Consejo de la ciudad">
				<p class="titulo-negro">Consejo de la Ciudad</p>
			</a>
		</div>
		<div class="col-xs-6 col-sm-3 text-center border-left-2">
			<a href="/sede/servicio/mapa-colaborativo/" class="">
				<img src="https://www.zaragoza.es/cont/vistas/portal/participacion/img/Participacion/icono_mapasColaborativos.png" alt="Mapas colaborativos">
				<p class="titulo-negro">Mapas Colaborativos</p>
			</a>
		</div>
		<div class="col-xs-6 col-sm-3 text-center border-left-2 border-right-2">
			<a href="/sede/portal/participacion/normativa">
				<img src="/cont/vistas/portal/participacion/img/Participacion/icono_normativa.png" alt="normativa">
				<p class="titulo-negro">Normativa</p>
			</a>
		</div>
	</div>
	<div class="col-sm-6 hidden-xs">
		<div class="participacion">
			<h2>Participación</h2>
		</div>
		<div class="redes-sociales-participacion">
			<a href="https://www.facebook.com/ZGZopencity/"><span class="fab fa-facebook-square"></span></a>
			<a href="https://twitter.com/ZGZopencity"><span class="fab fa-twitter-square"></span></a>
		</div>
	</div>
</div>
9.4.3. Acceso a portales de segundo nivel en el portal de participación

Ejemplo: Consulta Pública

CSS

.acceso-portal {
    background-color: #E9E9E9;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 20px;
}

.procesos-part {
    background-image:url('/cont/vistas/portal/participacion-index/img/Participacion/accesoPortal_PresupuestosParticipativos.jpg');
}

.acceso-portal div {
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(204,204,204,1));
    padding: 5px;
    border-radius: 10px;
}

.acceso-portal {
    padding: 0;
}

.acceso-portal a {
    color: #333333;
    font-size: 20px;
}

HTML

<div class="row">
	<div class="col-xs-12 col-sm-4 pull-left margin-t1em acceso-portal procesos-part text-right">
		<a class="" href="/sede/portal/participacion-index/procesos-participativos/">
			acceso al portal
			<br/>
			<strong>Procesos Participativos</strong>
		</a>
	</div>
</div>

Ejemplo: Mapas Colaborativos

Enlace con icono en rojo y texto negro

CSS

.icono-zona {
    background-color: #E83437;
    height: 58px !important;
    width: 65px !important;
    border-radius: 10px 0 0 10px;
    padding: 0;
    margin-right: 0;
}

.borde-d {
    border-radius: 0 10px 10px 0;
    margin: 0;
}

.btn-rn a {
    display:flex;
    align-items:center;
    color: #ffffff;
    font-size: 20px;
    line-height: 22px;
}

.btn-rn .cuadro-negro {
    width: 180px;
    background-color: #000000;
    color: #e9e9e9;
    margin: 0 10px 0 0 !important;
    padding: 7px 20px;
}

.btn-rn .icono-zona {
    padding: 10px;
}

@media (max-width: 767px) {
    .btn-rn .cuadro-negro {
        width: 70%;
        margin-right: 40px;
    }

    .btn-rn {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

HTML

<div class="row">
    <div class="col-md-6 col-sm-12">
    </div>
    <div class="col-md-6 col-sm-12 btn-rn">
        <div class="pull-right cuadro-negro borde-d">
            <a href="/sede/servicio/mapa-colaborativo/" class="">Mapas<br/>colaborativos</a>
        </div>
        <div class="pull-right icono-zona">
            <img src="/cont/vistas/portal/participacion/img/Participacion/icono_mapasColaborativos.png" class="img-responsive"/>
        </div>
    </div>
</div>

Ejemplo: En tu barrio

CSS

.enlace p {
    color: #333333;
    font-size: 30px;
    line-height: 28px;
    width: 100%;
}

@media (min-width: 768px) {
    .enlace div.col-sm-8 {
        position: relative;
    }

    .enlace p{
        position: absolute;
        color: #333333;
        font-size: 30px;
        line-height: 28px;
        width: 100%;
        padding-right: 30px;
        top: 8px;
    }
}

HTML

<div class="fnd-blanco clearfix padding-h1em radius">
	<a class="full enlace" href="/sede/portal/participacion-index/en-tu-barrio">
		<div class="row">
			<div class="col-xs-12 col-sm-4">
				<img class="pull-left" src="/cont/vistas/portal/participacion-index/img/en-tu-barrio.png" alt=""/>
			</div>
			<div class="col-xs-12 col-sm-8">
				<p class="lead padding-t1em text-right">en tu barrio</p>
			</div>
		</div>
	</a>
</div>
9.4.4. Menú de páginas de contenido

Ejemplo 1: Portal de organización política - alcalde

El menú de las páginas de contenidos se presenta en horizontal con formato de pestañas blancas y texto en rojo. La pestaña activa se muestra en negro con el texto en blanco.

La separación de los distintos elementos se realiza con borde a la derecha excepto el último elemento. Los elemento inicial y final llevan los bordes redondeados

Versión escritorio

Imagen menu contenido 1

Versión Móvil

Imagen menu contenido mobile 1

Ejemplo 2: Portal de organización política

CSS

.botones {
    height: 150px;
}

.botones>li {
    width: 100%;
    padding: 5px;
    margin: 5px;
    background-color: #E81B16;
    border: 0px;
    border-radius: 20px;
    float: left;
    text-align: center;
}

.botones>li>a {
    display: block;
    width: 100%;
    color: #ffffff;
    text-decoration: none;
}

.botones>li:hover {
    background-color: #e83437;
}

.botones>li.active,
.botones>li.active:hover {
    background-color: #000;
}

@media (min-width: 768px) and (max-width: 991px) {
    .botones {
        font-size: 10px;;
    }
    .botones .pull-right {
        margin-right: 8px;
    }
}

@media (max-width: 767px) {
    .botones .pull-right {
        margin-right: -5px !important;
    }
}

@media (min-width: 768px) {
    .botones {
        height: auto;
    }
    .botones>li {
        width: calc( 50% - 12px);
    }
    .botones .pull-right {
        margin-right: 8px;
    }
}

HTML

<ul class="botones list-unstyled" role="tablist">
    <li class="active">
        <a href="corporacion" aria-controls="corporacion" role="tab" data-toggle="tab">LA CORPORACIÓN</a>
    </li>
    <li>
        <a class="" href="sesiones" aria-controls="sesiones" role="tab" data-toggle="tab">SESIONES PLENARIAS</a>
    </li>
    <li>
        <a class="" href="http://www.zaragoza.es/sede/servicio/agenda-institucional/">AGENDA ABIERTA</a>
    </li>
    <li>
        <a class="" href="comisiones" aria-controls="comisiones" role="tab" data-toggle="tab">COMISIONES PLENARIAS</a>
    </li>
    <li class="pull-right">
        <a class="" href="directo" aria-controls="directo" role="tab" data-toggle="tab">RETRANSMISIÓN EN DIRECTO</a>
    </li>
</ul>

Tarjetas de imágenes

Ejemplo 1: Portal de organización política - plenos.

  • Cuenta con imagen y un enlace en su interior
  • La sección del enlace se presentará con un fondo oscuro transparente que permite una mejor legibilidad

CSS

.composicion .col-xs-6.col-md-4.col-lg-3{
    padding: 0;
}

.composicion .col-sm-6 {
    padding: 5px;
}

.composicion .col-sm-6 img {
    border-radius: 6px 0 6px 0;
}

.composicion .col-sm-6 a {
    position: absolute;
    width: calc(100% - 10px);
    background-color: rgba(0,0,0,0.5);
    color: #ffffff;
    bottom: 5px;
    padding: 10px;
    border-radius: 0 0 6px 0;
    line-height: 16px;
    height: 100px;
}

HTML

<div class="row composicion">
    <div class="col-xs-6 col-md-4 col-lg-3">
        <div class="row">
            <div class="col-sm-6">
                <img class="img-responsive" src="https://www.zaragoza.es/cont/paginas/organizacion/img/concejales/silueta-masculina.jpg" width="680" alt="Pedro Santisteve Roche"/>
                <a href="/sede/portal/organizacion-index/alcalde/">
                    <strong>Desconocido</strong> (Partido Político)
                </a>
            </div>
        </div>
    </div>
</div>

Acordeón


Este elemento despliega el contenido al pulsar sobre el título de la sección, recogiendo el contenido que esté abierto en ese momento.

CSS

.panel-heading a:after {
    float: left;
    color: white;
    background-color: #000;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
    margin-right: 10px;
}

.panel-heading a.collapsed:after {
    content: "\f105";
}

.panel-default>.panel-heading {
    background-color: #fff;
    border: 0;
}

.panel {
    border: 0;
    webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.panel-group .panel-heading+.panel-collapse>.panel-body {
    border: 0;
}

.panel-body {
    padding-left: 50px;
}

.panel-title>a {
    color: #E81B16;
}

.panel-title>a:hover,
.panel-title>a:focus,
.panel-title>a:active {
    text-decoration: none;
}

.panel-title h4 {
    color: #E81B16;
}

HTML

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" class="collapsed" data-parent="#accordion"href="#collapse1">
                    <small>COMPOSICIÓN COMISIONES PLENARIAS |</small> PRESIDENCIA Y PARTICIPACIÓN
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    <li><strong>Presidenta</strong>: Dª. Elena Giner Monge.</li>
                    <li><strong>Vicepresidenta</strong>: Dª. Luisa Broto Bernués.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapse2">
                    <small>COMPOSICIÓN COMISIONES PLENARIAS |</small> URBANISMO Y SOSTENIBILIDAD
                </a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    <li><strong>Presidente</strong>: D. Pablo Muñoz San Pío.</li>
                    <li><strong>Vicepresidenta</strong>: Dª. Teresa Ana Artigas Sanz.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Equipamiento


Tarjeta de equipamientos horizontal

CSS

.panel-heading a:after {
    float: left;
    color: white;
    background-color: #000;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
    margin-right: 10px;
}

.panel-heading a.collapsed:after {
    content: "\f105";
}

.panel-default>.panel-heading {
    background-color: #fff;
    border: 0;
}

.panel {
    border: 0;
    webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.panel-group .panel-heading+.panel-collapse>.panel-body {
    border: 0;
}

.panel-body {
    padding-left: 50px;
}

.panel-title>a {
    color: #E81B16;
}

.panel-title>a:hover,
.panel-title>a:focus,
.panel-title>a:active {
    text-decoration: none;
}

.panel-title h4 {
    color: #E81B16;
}

HTML

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" class="collapsed" data-parent="#accordion"href="#collapse1">
                    <small>COMPOSICIÓN COMISIONES PLENARIAS |</small> PRESIDENCIA Y PARTICIPACIÓN
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    <li><strong>Presidenta</strong>: Dª. Elena Giner Monge.</li>
                    <li><strong>Vicepresidenta</strong>: Dª. Luisa Broto Bernués.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapse2">
                    <small>COMPOSICIÓN COMISIONES PLENARIAS |</small> URBANISMO Y SOSTENIBILIDAD
                </a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul>
                    <li><strong>Presidente</strong>: D. Pablo Muñoz San Pío.</li>
                    <li><strong>Vicepresidenta</strong>: Dª. Teresa Ana Artigas Sanz.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Tarjeta de equipamiento con mini mapa


  • Debemos definir un contenedor con el tamaño especifico que queremos darle
  • Invocar la tarjeta con la etiqueta <sede:equipamiento>
  • Colocamos el id del equipamiento buscado e invocamos el fragmento "fragmentos/equipamiento/detalle-mapa"

HTML

<div class="row">
    <div class="col-md-3">
        <div class="container-fluid margin-b2em margin-t2em fnd-blanco radius">
            <sede:equipamiento id="7425" ocultos="tabs" fragment="fragmentos/equipamiento/detalle-mapa">
            </sede:equipamiento>
        </div>
    </div>
</div>

9.5 Diferentes formas de mostrar servicios destacados

9.5.1 Cuadro de ICONO con enlace

Se ha utilizado en el Portal de Consejo de Ciudad,destacados, dando acceso a los Consejos Sectoriales activos.

Listado de los elementos destacados a través de imagen y enlace centrado por debajo de la imagen/icono.

Ejemplo 1. Portal de Consejos Sectoriales


Imagen menu consejos sectioriales

HTML

<header>
	<h2 class="text-right">Consejos Sectoriales <strong>Activos</strong></h2>
</header>
<ul class="list-inline nav-inf clearfix text-center">
	<li class="col-xs-6 col-sm-3 col-md-2">
		<div>
			<img src="/cont/vistas/portal/participacion/img/icono_ConsejoAgenda21.jpg" class="img-rounded img-responsive" alt="">
			<a class="col-xs-12" href="consejo-agenda21">Agenda 21 Local</a>
		</div>
	</li>
</ul>

Ejemplo 2. Asesorías del Servicio de Juventud


Imagen menu asesorias

9.6 Elementos para mostrar información

9.6.1 Bloque de contenido sobre fondo gris

Cuando el diseño de un portal parte de fondo gris, los bloques de contenido tienen fondo blanco y esquinas redondeadas.

Nuestra página de contenidos básica tiene el fondo gris. El ancho de la página puede contener uno, dos o tres bloques de contenido.

Una página puede contener varios bloques de contenido. Depende de la información a mostrar y de cómo queramos organizarla.

9.6.1.1. Página con un bloque de contenido


Sobre una página de fondo gris claro, la información se dispone enmarcada dentro de un bloque de contenido de fondo blanco y bordes redondeados.

Dentro de este bloque de contenido la distribución de la información es libre, pudiendo ordenarse en una o varias columnas.

Ejemplo. Agenda de la Cátedra de Participación e Innovación Democrática.

9.6.1.2 Página con dos bloques de contenido en horizontal


9.6.1.3 Página con tres bloques de contenido en horizontal


9.6.2 Tarjetas de inserción de contenido

Es el bloque general donde se enmarcan los contenidos. Consiste en un cuadro de fondo blanco sobre gris claro con esquinas redondeadas. Existen dos versiones: horizontal y vertical. Esta última es la que se puede programar para adaptar visualización de la tarjeta horizontal a dispositivos móviles.

9.6.2.1. Versión horizontal


9.6.2.2. Versión vertical y para dispositivos móviles


CSS

.fnd-blanco {
    background-color: #ffffff;
}
.radius {
    border-radius: 10px;
}

HTML

<div class="row">
    <div class="fnd-blanco radius col-xs-12">
        <div class="container-fluid"> </div>
    </div>
</div>
9.6.3 Tablas

Tablas Simples

Basado en Bootstrap

CSS

.tabla-bn {
    border-collapse: separate;
    border-spacing: 0px 10px;
}
.tabla-bn td {
    padding: 0 5px 5px 5px !important;
    margin-bottom: 5px;
    border-right: dotted 1px #000000;
    border-top: 0px !important;
    border-bottom: dotted 1px #000000;
}

HTML

<div class="table-responsive">
    <table summary="Actividades plenarias" class="table tabla-bn">
        <tr>
            <th class="col-md-4">Fechas</th>
            <th class="col-md-4">Orden del día</th>
            <th class="col-md-4">Acuerdos</th>
        </tr>
        <tr>
            <td headers="fecha" rowspan="1" colspan="1">
                <span class="fa fa-play-circle"></span> 15/02/2017
            </td>
            <td headers="dia" rowspan="1" colspan="1">
                <span class="far fa-file-alt fa-lg"></span>
                <a href="/ciudad/tablon/detalle_Tablon?id=29703" shape="rect"> Orden del día</a>
            </td>
            <td rowspan="1" colspan="1"><span class="far fa-file-pdf fa-lg"></span>
                <a href="/cont/paginas/gestionmunicipal/tablon/actaconsejosectorialpich2017.pdf" shape="rect"> Acta</a>
            </td>
        </tr>
    </table>
</div>

Tablas con paginación

Basado en Bootstrap: este formato se utiliza para salidas de tablas que se tengan que paginar.

CSS

.tabla-bn {
    border-collapse: separate;
    border-spacing: 0px 10px;
}
.tabla-bn td {
    padding: 0 5px 5px 5px !important;
    margin-bottom: 5px;
    border-right: dotted 1px #000000;
    border-top: 0px !important;
    border-bottom: dotted 1px #000000;
}

HTML

<div class="table-responsive">
    <table summary="Actividades plenarias" class="table tabla-bn">
        <tr>
            <th class="col-md-4">Fechas</th>
            <th class="col-md-4">Orden del día</th>
            <th class="col-md-4">Acuerdos</th>
        </tr>
        <tr>
            <td headers="fecha" rowspan="1" colspan="1">
                <span class="fa fa-play-circle"></span> 15/02/2017
            </td>
            <td headers="dia" rowspan="1" colspan="1">
                <span class="far fa-file-alt fa-lg"></span>
                <a href="/ciudad/tablon/detalle_Tablon?id=29703" shape="rect"> Orden del día</a>
            </td>
            <td rowspan="1" colspan="1"><span class="far fa-file-pdf fa-lg"></span>
                <a href="/cont/paginas/gestionmunicipal/tablon/actaconsejosectorialpich2017.pdf" shape="rect"> Acta</a>
            </td>
        </tr>
    </table>
</div>
9.6.4 Botón "Ir Arriba" / "Volver"

Botón "Ir Arriba" / "Volver"

Utilizando HTML CSS Y JS podremos mostrar este botón.

Se utiliza para añadirlo a sitios con información extensa

CSS

#go-top-button {
    display: inline-block;
    background-color: rgb(232, 27, 22);
    color: #FFF;
    text-decoration: none;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    margin: 30px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s;
    z-index: 1000;
}
#go-top-button:hover {
    cursor: pointer;
    background-color: #333;
}
#go-top-button:active {
    background-color: #555;
}

HTML

Este código hay que añadirlo de último en el contenedor principal.

<div class="row-fluid">
    <div class="col-xs-12">
        <a id="go-top-button">
            <i style='font-size:24px' class='fas'></i>
            <br/> Volver
        </a>
    </div>
</div>

JAVASCRIPT

Este código hay que añadirlo al final del documento dentro del tag <script>.

$(document).ready(function() {
    var goTopBtn = $('#go-top-button');
    goTopBtn.hide();

    $(window).scroll(function() {
        if ($(window).scrollTop() > 300) {
            goTopBtn.show();
        } else {
            goTopBtn.hide();
        }
    });

    goTopBtn.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, '300');
    });
});

También podriamos mover la pantalla hacia un elemento específico

Esta guía de estilo utiliza este fragmento para moverse más fácilmente con el menu lateral

	$('[href*="#"]').click(function(el){
		el.preventDefault()
		$('html,body').animate({ scrollTop: $(el.target.hash).offset().top - 280 }, 800);
	})

9.7 Elementos para facilitar el acceso a directorios de recursos de información

9.7.1 Acceso a través de iconos / imagenes

Ejemplo 1: Agrupación de portales y servicios bajo la etiqueta Servicios Sociales

Listado Elementos con Borde Izquierda

Cada sección hay que crearla con el elemento con la clase .list-element

Versión escritorio

Imagen menu - servicios sociales

Versión Móvil

Imagen menu mobile- servicios sociales

CSS

.listado-servicios > li{
    min-height: 360px;
}
.listado-servicios > li .full-screen-box {
    width: 100%;
    border-radius: 2px;
    padding: 10px 0px 10px 15px;
    margin-bottom: 14px;
    border-left: 3px solid #55a7b3;
    min-height: 100px;
    font-size:1.35rem;
}
@media (min-width: 769px) and (max-width: 1024px){
    .listado-servicios > li{
        min-height: 362px;
    }
}
@media (max-width: 768px) {
    .listado-servicios > li{
        min-height: 325px;
    }
    .listado-servicios > li .full-screen-box {
        border-left: 0px;
        text-align: center;
        border-bottom: 3px solid #55a7b3;
    }
}
@media (max-width: 425px) {
    .listado-servicios > li{
        min-height: 100px;
    }
}

HTML

<div class="container-fluid margin-b2em margin-t2em fnd-blanco radius">
    <div class="row">
        <div class="col-xs-12">
            <ul class="list-unstyled listado-servicios">
                <li class="list-element col-md-3 col-sm-6 col-xs-12 center-block text-center">
                    <img width="150" src="/cont/vistas/portal/servicios-sociales/img/sociales2.png" alt="servicios sociales" />
                    <div class="full-screen-box text-left">
                        <ul class="list-unstyled">
                            <li>
                                <span class="fa fa-spinner" aria-hidden="true"></span>
                                <a  href="https://www.zaragoza.es/sede/portal/servicios-sociales/servicio/equipamiento/category/105">Centros Municipales de Servicios Sociales</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

* Responde a una necesidad muy similar a la que se plantea en el apartado 5.6

9.8 Elementos para facilitar el acceso a un recurso determinado de información

9.8.1 Tarjeta básica “Card”

Se crea con la clase contenedor .row .card.

9.8.2 Tarjeta sobre fondo gris y bordes redondeados

Se crea una card y se le coloca la clase .rounded

9.8.3 Tarjetas rectangulares para equipamientos municipales (3)

Ejemplo 1. Portal de organización


Ejemplo 2


Ejemplo 3

9.8.4 Tarjetas rectangulares para equipamientos no municipales

Cada sección hay que crearla con la clase contenedor .row .card y dentro de cada contenedor hay un elemento .col-xs-12 que a la vez se subdivide creando otro contenedor .row y añadiendo dos columnas, una con la info y la otra con la imagen.

El efecto se consigue añadiendo la clase .pull-right en la primera columna que obligará a que se pase a la izquierda y con CSS, cuando éste se muestre en dispositivos eliminamos el efecto reemplazando el .pull-right:{float:none}

Versión escritorio

Ejemplo equipamientos

Versión Móvil

Ejemplo equipamientos mobile

CSS

.card {
    min-height: 115px;
}

.card .row .pull-right a {
    min-height: 115px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.card .row .pull-right a img {
    max-width: 130px;
    max-height: 85px;
}

@media (max-width: 492px) {
    .card .row .pull-right {
        float: none;
        justify-content: center;
    }
    .card .row .pull-right a {
        min-height: none;
    }
    .card .row .pull-right a img {
        max-height: 100vh;
        max-width: none;
        width: 100%;
    }
    .card .row div p {
        margin-top: 0.75rem;
    }
}

HTML

<div class="row card">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-sm-4 col-xs-12 pull-right">
                <a href="http://www.unizar.es/deportes/" target="_blank">
                    <img alt="" src="/cont/vistas/portal/deporte/img/univ.png" />
                </a>
            </div>
            <div class="col-sm-8 col-xs-12">
                <p>
                    <a href="http://www.unizar.es/deportes/" target="_blank">
                        <strong>Universidad de Zaragoza</strong>
                    </a>
                </p>

                <p>
                    C/ Pedro Cerbuna, 12
                    <br /> 50009 Zaragoza
                    <br /> <strong>Tel</strong>: 976 761 052
                    <br /> <a href="mailto:deportes@unizar.es">deportes@unizar.es</a>
                </p>
            </div>
        </div>
    </div>
</div>
9.8.5 Tarjeta “Banda de color con título”

Tarjetas contenedoras de información. Puede utilizarse cuando no se disponga de recurso gráfico que la acompañe (fotografía, ilustración, logotipo).

Dentro de un contenedor .row cada sección es un div con clase .col-sm-6 .col-xs-12 y dentro de cada uno hay que crear la tarjeta con la clase .tarjeta

Ejemplo tarjeta 6

Versión Móvil

Ejemplo tarjeta 7

CSS

.tarjeta {
    box-shadow: 0px 10px 20px -15px grey;
    border-radius: 0px 0px 10px 10px;
    min-height: 16em;
    padding: 0px;
}
.tarjeta div {
    padding: 0.5em 1em 0.5em 1em;
}
.tarjeta h4 {
    font-weight: bold;
    color: #ffffff !important;
    width: 100%;
    text-align: center;
    padding: 10px 0 10px 0;
}
.tarjeta-1 h4 {
    background-color: #3c4353;
}
.tarjeta-2 h4 {
    background-color: #828842;
}
.tarjeta-3 h4 {
    background-color: #862e36;
}
.tarjeta-4 h4 {
    background-color: #c21d24;
}
.tarjeta-5 h4 {
    background-color: #cbc235;
}

HTML

<div class="row">
    <div class="col-sm-6 col-xs-12">
        <div class="tarjeta tarjeta-1">
            <h4>Parque Grande. J.A. Labordeta</h4>
            <div>
                <p><span class="fas fa-map-pin fa-lg"></span> <strong>Punto de encuentro</strong>: Entrada del Parque al lado del Kiosco.</p>

                <p><span class="fas far fa-clock"></span> <strong>Horario</strong>: de lunes a viernes.</p>

                <ul>
                    <li>Del 1 de mayo al 30 de septiembre: 19h.</li>
                    <li>Del 1 de octubre al 30 de abril: 17h.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xs-12">
        <div class="tarjeta tarjeta-2">
            <h4>Parque Torre Ramona</h4>
            <div>
                <p><span class="fas fa-map-pin fa-lg"></span> <strong>Punto de encuentro</strong>: Centro de Salud Torre Ramona</p>

                <p><span class="fas far fa-clock"></span> <strong>Horario</strong>: de lunes a viernes.</p>

                <ul>
                    <li>Del 1 de septiembre al 30 de junio: 09.30h.</li>
                    <li>Del 1 de julio al 31 de agosto: 9h.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xs-12">
        <div class="tarjeta tarjeta-5">
            <h4>Parque Delicias</h4>
            <div>
                <p><span class="fas fa-map-pin fa-lg"></span> <strong>Punto de encuentro</strong>: Puerta Vía Universitas</p>

                <p><span class="fas far fa-clock"></span> <strong>Horario</strong>: de lunes a viernes.</p>

                <ul>
                    <li>Del 1 de mayo al 30 de septiembre: 10h.</li>
                    <li>Del 1 de octubre al 30 de abril: 10h.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xs-12">
        <div class="tarjeta tarjeta-4">
            <h4>Centro Ambiental del Ebro</h4>
            <div>
                <p><span class="fas fa-map-pin fa-lg"></span> <strong>Punto de encuentro</strong>: Centro Ambiental del Ebro</p>

                <p><span class="fas far fa-clock"></span> <strong>Horario</strong>: de lunes a viernes.</p>

                <ul>
                    <li>Del 1 de mayo al 30 de septiembre: 10h.</li>
                    <li>Del 1 de octubre al 30 de abril: 12h.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

10. Formularios de búsqueda

Todos los formularios deberán estar basados en las distintas tipologías definidas en Bootstrap 3.3.7.
Atendiendo a su funcionalidad podemos agrupar en:

10.1 Formulario de búsqueda en la cabecera general

Buscador integrado en la cabecera de la página, en la versión móvil se muestra solo el icono, apareciendo el formulario al pulsar en él.

CSS

.input-group .form-control,
.input-group-addon {
    color: #fff;
    background-color: #000;
    border-radius: 20px;
    border: 0;
}

HTML

<div class="row">
    <div class="form-group col-md-3 pull-right">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Buscar"/>
            <div class="input-group-addon"><i class="fas fa-search"></i></div>
        </div>
    </div>
</div>

10.3 Formulario Insertar Datos

CSS

@media(max-width: 425px) {
    #insertar{
        border-radius: 4px;
        margin: auto;
        width: 100%;
    }
    #input-info-buttons{
        margin: auto;
        width: 100%;
        float:left;
    }
    #input-info-buttons a:first-child{
        margin-left: 0;
        border-radius: 4px 0px 0px 4px;
    }
    #input-info-buttons a:last-child{
        margin-left: 0;
    }
}

HTML

<div class="row">
    <div class="col-xs-12">
        <label for="insertar">
            Inserta el mapa en otro sitio web o llévate el conjunto de datos:
        </label>

        <div class="input-group">
            <nput class="form-control" id="insertar" size="100"
                onClick="this.select();" type="text"
                value="contenido-variable-a-seleccionar"
            />
            <div class="input-group-btn" id="input-info-buttons">
                <a class="btn btn-primary" href="/sede/servicio/mapa-colaborativo/746.xml">XML</a>
                <a class="btn btn-primary>
                    href="/sede/servicio/mapa-colaborativo/746.geojson">GeoJSON</a>
                <a class="btn btn-primary">
                    href="/sede/portal/datos-abiertos/servicio/catalogo/1080">
                    <span class="fa fa-info-circle" aria-hidden="true"></span>
                    + Información
                </a>
            </div>
        </div>
    </div>
</div>

10.4 Formulario de búsqueda servicio transversal

10.4.1 Formulario de búsqueda servicio transversal- v1

Ejemplo real: Comercio

Formulario que permite buscar dentro de los servicios transversales por categoria/tema/sección dentro del servicio transversal.

Compuesto por:

  • Campo de búsqueda: campo de texto.
  • Título: En <h3 class=”h2”> </h3>
  • Botón: con el texto Consultar y clase css “btn btn-primary”.

HTML

<div class="col-md-8">
	<header>
		<h2>Encuentra el trámite que buscas:</h2>
	</header>
	<form method="get" action="./servicio/tramite/" class="well">
		<div class="input-group">
			<label for="query" class="oculto">Buscar trámite</label>
			<input type="text" name="query" id="query" class="form-control" placeholder="Realice su consulta" value="">
			<span class="input-group-btn">
				<input type="submit" value="Consultar" class="btn btn-primary">
			</span>
		</div>
	</form>			
</div>
10.4.2 Formulario de búsqueda servicio transversal- v2

Ejemplo real: Trámites y servicios

10.5 Diferentes formas de mostrar el resultado de una búsqueda

Dependiendo del tipo de formulario vamos obtener diferentes salidas de los resultados de la búsqueda generando listados de diferentes estilos dependiendo de la información que se ofrezca

10.5.1 Listados generales con imagen(publicación Municipal)

Listado general donde se visualizará:

  • Tarjeta: elementos ordenados en pastillas de información con la clase css .card y posicionados con clases bootstrap de col-md- con 2 secciones:
    • card:
      • Imagen: dentro de un div con class .col-xs-4 dado que las imágenes suelen ser verticales dado que son portadas
      • Título: dentro de un div con class col-xs-8 en rojo
      • Resumen: con la información más relevante en este caso autor y año
    • card-footer:
      • caja de compartir: incluir <th:block th:include= "/fragmentos/share-button(uri=${doc.uri}, text=${doc.title})"></th:block> con la url del documento y el título generar un desplegable con la información para compartir en las redes sociales.

HTML

<ul class=”row list-unstyled”>
	<li class="col-md-4 col-sm-12">
		<div class="card">
			<div class="row">
				<div class="col-xs-4 text-center">
					<img class="img-responsive center-block" alt="" src="https://www.zaragoza.es/cont/paginas/catalogopublicaciones/img/portadas/11780.jpg">
				</div>
				<div class="col-xs-8">
					<h3>
						<a href="https://www.zaragoza.es/sede/servicio/publicacion-municipal/11780" property="rdfs:label geonames:name dcterms:title schema:name"> ZARAGOZA NATURAL. Un mosaico de paisajes y de biodiversidad.</a>
					</h3>
					<div><strong>Autor:</strong> <span>Exmo. Ayuntamiento de Zaragoza</span></div>
					<div><strong>Año:</strong> <span>2020</span></div>
				</div>
			</div> 
			<div class="card-footer">
				<th:block th:include="/fragmentos/share-button(uri=${doc.uri}, text=${doc.title})"></th:block>
			</div>
		</div>
	</li>
</ul>
10.5.2 Listado de detalle(contratación pública)

Listado de resultados tras búsqueda en base de datos de los contratos a través de la búsqueda avanzada.

Se muestran tarjetas con la clase css card con la información relevante de los contratos:

HTML

<ul class="row list-unstyled resultado"> 
	<li class="col-xs-12 col-sm-12 col-md-6">
		<div class="card" style="min-height:8em;">
			<h3><a href="/sede/servicio/contratacion-publica/4633">REALIZACIÓN DE ACTIVIDADES DE DINAMIZACIÓN Y EDUCACIÓN AMBIENTAL EN TORNO A LA MUESTRA AGROECOLÓGICA</a></h3>
			<span class="fas fa-calendar-alt" title="Fecha publicación"></span>
			<span class="padding-l05em">2020</span>
			<a class="label label-success margin-r05em" href="/sede/servicio/contratacion-publica/?type.id=2">Servicios</a>- <span class="color-1">En Licitación</span>
			<hr>
			<p class="margin-t1em">
				<strong>Entidad contratante: </strong>
				<a href="/sede/servicio/contratacion-publica/entidad/1">Ayuntamiento de Zaragoza</a>
			</p>
			<p class="margin-t1em">
				<strong>Organismo Contratante: </strong>
				<a href="/sede/servicio/contratacion-publica/organismo-contratante/61829">COORDINACIÓN GENERAL DEL ÁREA DE INFRAESTRUCTURAS, VIVIENDA Y MEDIO AMBIENTE</a>
			</p>
			<p class="margin-t1em">       
				<strong>Servicio Gestor: </strong>
				<a href="/sede/servicio/contratacion-publica/servicio-gestor/26033">AGENCIA DE MEDIO AMBIENTE Y SOSTENIBILIDAD</a>
			</p>
			<p><strong>Importe licitacion: <span class="color-2">14.995,00€</span><span> (con IVA: 18.143,95€)</span></strong></p>
			<p><span class="fas fa-calendar-alt" title="Plazo de presentación"></span><strong class="padding-l1em">Plazo de presentación:</strong><span>01/10/2020 00:00</span> </p>
		</div>
		<div class="ribbon-wrapper">
			<div class="ribbon-info">Menor</div>
		</div>
	</li>
</ul>
10.5.3 Listado de detalle(Medio Ambiente y Sostenibilidad)

Listado de las estaciones de toma de datos de calidad del aire, donde se se geolocalizan las estaciones para ser mostradas en el mapa con el icono mostrando el estado de la calidad del aire con la fecha actual.

HTML

<div class="row">
	<div class="col-xs-12">
		<div role="alert" class="alertJuntas alert alert-info hidden">No existen equipamientos para la junta especificada.</div>
		<ul class="list-unstyled margin-t05em listado-equipamiento">
			<li th:each="estacion : ${registro.body.result}" class="juntas col-xs-12 col-md-6 col-md-4" th:classappend="${estacion.geometry} ? geo : nogeo" typeof="">
				<th:block th:include="/fragmentos/medioambiente/card(equip=${estacion})"></th:block>
			</li>
		</ul>
	</div>
</div>
10.5.4 Listado de Servicios transversales(Normativa)

Listado con los resultados de búsqueda de un buscador de servicio transversal.

El listado con etiquetas <dl> que representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento <dt>) y de descripciones (proveídas con elementos <dd>). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares clave-valor).

Compuesto por:

  • Enlace: enlace al detalle en la etiqueta <dt>
  • Texto: información relevante en la etiqueta <dd>

HTML

<dl>
	<dt class="card nomargin">
		<h3 class="nomargin">
			<a href="11883">Decreto de la Alcaldía, sobre otorgarniento de una delegación especial para le dirección y gestión de las actuaciones municipales destinadas al reconocimiento y apoyo a las víctimas del terrorismo.</a>                    
		</h3>
	</dt>
	<dd class="card">                
		<div><p>Aprobación definitiva por Alcaldía el 05-06-2020</p></div>
		<div class="cursiva">Actualizado el
			<span>05 junio 2020</span>
		</div>
	</dd>
</dl>

11. Fuentes, iconos y página base

11.1 Fuentes

La fuente ha utilizar será Open Sans descrito en apartado 7.6

11.2 Títulos

Título de bloque

Título al comienzo de cada bloque de contenido.

Imagen titulos

CSS

.titulo-seccion {
    line-height: 66px;
    font-size: 42px;
}

HTML

<header>
	<h2 class="text-right titulo-seccion">
		<strong>últimos</strong> procesos participativos
	</h2>
</header>

11.3 Iconos

11.3.2 Iconos pequeños

Para los iconos pequeños se utiliza Font Awesome Free 5.1.0 by @fontawesome - https://www.w3schools.com/icons/fontawesome5_intro.asp

Se utiliza añadiendo <span class="xxx"></span> antes del contenido dónde xxx:

  1. Fecha: fa fa-play-circle
  2. Orden del día: far fa-file-alt fa-lg
  3. Actas, PDFs y documentación: far fa-file-pdf fa-lg
  4. Mociones: fa fa-comment fa-lg
  5. Acuerdos: fa fa-handshake fa-lg
  6. Vídeo: fas fa-video
  7. Agenda: far fa-calendar-check fa-lg
  8. Hora: far fa-clock
  9. Reglamento: fa fa-address-card fa-lg
  10. Composición y mesas: fas fa-users fa-lg
  11. Destacar enlaces: far fa-hand-point-right
  12. ¿Qué es?, resultados: fas fa-star
  13. Bases: fas fa-info-circle
  14. Fases: fa fa-cogs
  15. Propuestas: fas fa-table
  16. Ubicación: fas fa-map-pin
  17. Fase información pública (1): fa fa-info
  18. Fase presentación de propuestas (2): fa fa-comments
  19. Fase valoración (3): fa fa-glasses
  20. Fase informaciónública (4): fas fa-broadcast-tower
  21. Fase valoración (5): fas fa-search

12. EJEMPLOS de Salidas de Bases de Datos

12.1 Base de datos de Equipamientos

  • Ejemplo 1 (Portal: Punto Limpio Móvil Villarrapa)
  • Ejemplo 2 (Portal: Centro Deportivo Municipal José Garcés)
  • Ejemplo 3 (Portal: Centro Deportivo Municipal Actur)

12.2 Base de datos de Trámites y Servicios

12.2.1 Tipo de trámite listado V1

Listado de los trámites de un tipo determinado.

Compuesto por:

  • Título:<h2> Con el nombre del tipo
  • Listado de materias: listado con el nombre de las materias pertenecientes a un tipo de trámite con el ancla a su sección en formato etiqueta.
  • Listado de Materias de un tipo de trámite en forma tarjeta que contiene:
    • Listado de cada uno de los trámites pertenecientes a una materia de un tipo de trámite, compuesto por título del trámite h4 y enlace al detalle del trámite y listado métodos de acceso al trámite mediante iconos.
12.2.2 Tipo de trámite listado V2 (2021)

Listado de los trámites de un tipo determinado.

Compuesto por:

  • Título:<h2> Con el nombre del tipo
  • Listado de enlaces: listado de .label con el nombre de las materias pertenecientes a un tipo de trámite con el ancla a su sección en formato etiqueta.
  • Listado de Materias de un tipo de trámite en forma tarjeta que contiene:
    • Listado de trámites pertenecientes a una materia de un tipo de trámite, compuesto por título del trámite h4 y enlace al detalle del trámite
    • listado de métodos de acceso al trámite mediante iconos. (Se agregaron los iconos desactivados para indicar con que métodos no es posible acceder al trámite)
12.2.3 Materia del trámite listado V1

Listado de trámites pertenecientes a una materia.

Compuesto por:

  • Título:<h2> compuesto por:
    • Enlace: tipo del trámite.
    • Texto: nombre de la materia.
  • Listado de los trámites asociados a una materia
    • Enlace: Detalle del trámite
    • Iconos: forma de tramitación.
  • Listado de preguntas frecuentes asociado a la materia.
12.2.4 Materia del trámite listado V2 (2021)
  • Se modificó la estética de los enlaces haciendo que ocupen el ancho total de la pantalla
  • Se agregaron los iconos desactivados al listado de métodos de acceso al trámite
  • Se agregó un índice del significado de cada método en la esquina superior derecha
  • Se separó la sección de preguntas frecuentes para aumentar su legibilidad
Servicio
Imagen tramites 2
Preguntas Frecuentes
Imagen tramites 2
12.2.5 Detalle de un trámite

Detalle de un trámite, con su forma de tramitación y su descripción.

Compuesto por:

  • Icono: icono y nombre del tipo de trámite a la derecha
  • Título:<h2> con el nombre del trámite.
  • Listado de las materias a las que pertenece el trámite en formato etiquetas.
  • Descripción: descripción breve.
  • Listado de a quién va dirigido (clase persona).
  • Formas de tramitación: en formato de pestañas con los tipos de tramitación

13. Bootstrap

La versión utilizada en el portal es Bootstrap 3.3.7. Actualmente ya existe una versión 4, por lo que es importante no confundir una versión con la otra.

Bootstrap es un sistema de diseño basado en filas y columnas en el que es importante destacar su versatilidad a la hora de realizar diseño responsive.

Para continuar, debemos tener claro la definición del tipo de contenedor principal: <div>

Sabiendo lo anterior, se han definido una serie de reglas para su utilización:

Los "ROWS" o filas necesitan estar anidados sobre un contenedor .container <div class="container"></div>

  • Usaremos la clase row para crear filas
    <div class="container">
    	<div class="row"></div>
    </div>
  • El contenido debe estar dentro de las columnas(.col) y las columnas deben estar SIEMPRE debajo de un contenedor de tipo fila(.row).
    <div class="container">
    	<div class="row">
    		<div class="col-md-12">
    			CONTENIDO
    		</div>
    	</div>
    </div>
  • Los contenedores de tipo columnas(.col) crean espacios entre ellas utilizando un padding predefinido. Es decir, que si añadimos más de una columna, éstas se verán divididas con un espacio automáticamente. Los contenedores de tipo fila(.row) eliminan este espacio en los laterales, por lo que nos crea un efecto de tipo tabla, en el que las celdas tendrán espacios pero las que estén en el margen izquierdo y derecho se eliminan.
    <div class="container">
    	<div class="row">
    		<div class="col-md-6 col-xs-12">
    			<p>CONTENIDO 1</p>
    		</div>
    		<div class="col-md-6 col-xs-12">
    			<p>CONTENIDO 2</p>
    		</div>
    	</div>
    </div>
  • El número de columnas que se pueden anidar en una fila son 12 por lo que tendremos que jugar con el número de espacios que ocupará cada columna utilizando las clases que nos brinda bootstrap. Por ejemplo podríamos crear un contenedor con 3 columnas iguales utilizando la clase .col-xs-4
    <div class="container">
    	<div class="row">
    		<div class="col-md-4 col-xs-12">
    			<p>CONTENIDO 1</p>
    		</div>
    		<div class="col-md-4 col-xs-12">
    			<p>CONTENIDO 2</p>
    		</div>
    		<div class="col-md-4 col-xs-12">
    			<p>CONTENIDO 3</p>
    		</div>
    	</div>
    </div>

Esta es una guía de utilización para utilizar BOOTSTRAP Utilización de Bootstrap

14. CSS - Media Queries

Una media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.

/* Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {}

/* Device = Laptops, Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {}

/* Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1024px) {}

/* Device = Tablets, Ipads (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

/* Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {}

/* Device = Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px) {}

15. Servicio de voz Readspeaker

Para incluir dicha herramienta de accesibilidad deberemos añadir un th block en los _template.xml de cada portal con el siguiente código:

<th:block th:include=”fragmentos/readspeaker”></th:block>