Introducción


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)

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:

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.

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.

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:

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:

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.

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.

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

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:

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.

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.
  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 no semántica (<font>, <b>, <u>, <i>, ...).
  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.

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>

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"/>
                
    

Arquitectura de la Información


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.

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.

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.

Contenido de la Web


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:
    • Html (A partir de un archivo con extensión xml).
    • 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.

  • La información debe presentarse de una forma clara y bien estructurada.
  • 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:
    • 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 No emplee tecnicismos ni use jerga..
      • Texto y contexto en el lenguaje administrativo ¿Por qué no nos entienden?

    • 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
    • Negrita: Por este medio podremos destacar palabras clave que ayudarán al usuario a encontrar mas fácilmente los elementos de interés
    • 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:
      • 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.
      • 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.
  • 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.
  • Variaciones y Tamaño de Fuente
    • El tamaño de fuente debe ser definido con un valor relativo (ej. %, rem o em) para permitir el fácil cambio de tamaño.
    • Limitar el uso de las variaciones de la fuente como cursiva, mayúsculas u otros que pueden hacer difícil de leer el contenido.
    • No destacar elementos que no son enlaces. por ejemplo: subrayado, colores, etc
  • 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. (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: Directrices para webmasters de Google

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.

Contenido accesible 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:

  • all para todos los dispositivos
  • print orientado a la impresión de documentos.
  • screen orientado a ordenadores personales.

Nota: CSS2.1 y Media Queries 3 definieron varios tipos de media types (tty, tv, projection, handheld, braille, embossed, y aural), Pero fueron deprecados en Media Queries 4 y no deberían ser usados.

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.

Para integrar un iframe en una página se hará con el siguiente código:

	
<iframe title="..." loading="lazy" class="user-embeed embed-responsive-item" scrolling="no" frameborder="0" src="${urlIframe}">
	Visor no soportado
</iframe>

Para incrustar videos ver componente videos