Arquitectura de la información

Accesibilidad

La adhesión del Ayuntamiento de Zaragoza al World Wide Web Consortium (W3C) refleja su compromiso con la accesibilidad digital.

En el desarrollo de los diversos servicios proporcionados por el Ayuntamiento, se seguirán las recomendaciones establecidas en el documento " W3C Accessibility Standards ". Este documento detalla los puntos esenciales que deben considerarse para lograr un entorno digital accesible.

Siguiendo las directrices de accesibilidad del W3C, nos aseguramos que los servicios en línea ofrecidos por el Ayuntamiento sean accesibles para todas las personas, independientemente de sus habilidades o discapacidades. Por lo que no solo mejora la accesibilidad, sino que también contribuye a la creación de un entorno digital más inclusivo y fácil de usar para toda la ciudadanía.

En el portal de accesibilidad se detallan las directrices que el ayuntamiento sigue en este ámbito, proporcionando información detallada sobre cómo se implementan las normas de accesibilidad del W3C en los servicios en línea ofrecidos

Contenidos para la 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.

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

Maquetación y edición de contenidos

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

• Compatibilidad con Estándares: Está diseñado para cumplir con los estándares web definidos por el World Wide Web Consortium (W3C), lo que garantiza una mayor consistencia y interoperabilidad entre diferentes navegadores y dispositivos.
• Separación de Contenido y Presentación: Promueve la separación clara entre la estructura del contenido y su presentación visual. Esto facilita el mantenimiento del sitio web y mejora la accesibilidad, ya que permite a los usuarios/as adaptar la presentación según sus necesidades (por ejemplo, mediante hojas de estilo CSS).
• Compatibilidad con Futuras Tecnologías: Al seguir las especificaciones estrictas de XHTML, los documentos están mejor preparados para las futuras tecnologías web. Esto reduce la necesidad de realizar cambios importantes en el código cuando se adoptan nuevas tecnologías y estándares.
• Mejora la Accesibilidad: El uso adecuado conlleva a la creación de sitios web más accesibles para personas con discapacidades. La estructura semántica clara y el marcado consistente facilitan a los usuarios/as con tecnologías de asistencia, como lectores de pantalla, comprender y navegar por el contenido.
• Optimización para Motores de Búsqueda: Facilita la indexación de contenido por parte de los motores de búsqueda al proporcionar una estructura clara y semántica. Esto puede mejorar el posicionamiento en los resultados de búsqueda y aumentar la visibilidad en línea del sitio web.
• Compatibilidad con Dispositivos Móviles: Puede adaptarse fácilmente a diferentes dispositivos y tamaños de pantalla, lo que lo hace ideal para el diseño web receptivo y la creación de sitios web compatibles con dispositivos móviles.
• Reducción de Errores: El estricto marcado de XHTML facilita la detección y corrección de errores de código, lo que conduce a una mejor calidad y fiabilidad del sitio web.

Visualización de los Contenidos

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

Los beneficios de su utilización son:

• Mejoras en el diseño y la estética: ofrece una amplia gama de nuevas características que permiten crear diseños web más atractivos y estéticamente agradables.
• Compatibilidad con dispositivos móviles: Proporciona herramientas y técnicas que facilitan la creación de sitios web receptivos y adaptativos, lo que garantiza una experiencia de usuario óptima en una variedad de dispositivos y tamaños de pantalla.
• Menor dependencia de imágenes: Es posible reducir la necesidad de utilizar imágenes para efectos visuales, lo que resulta en una carga de página más rápida y un rendimiento mejorado.
• Flexibilidad y modularidad: Ofrece una mayor flexibilidad y modularidad en el diseño web, lo que facilita la creación de estilos reutilizables y mantenibles a través de hojas de estilo más pequeñas y específicas.
• Mayor control sobre la tipografía: Permite un mayor control sobre la tipografía, con características como fuentes web personalizadas (web fonts).
• Animaciones y transiciones: facilita la creación de animaciones y transiciones sin necesidad de utilizar JavaScript, lo que mejora el rendimiento y la accesibilidad de los sitios web.
• Soporte para características modernas: proporciona soporte para características modernas como flexbox y grid layout, que simplifican la creación de diseños complejos y adaptables.

Metadatos

La World Wide Web Consortium (W3C) define los metadatos de la siguiente manera:

"Los metadatos son datos acerca de datos. Describen otros datos, y aunque pueden ser de naturaleza diferente, suelen ser estructurados y normalizados para su uso en tecnologías de la web."

w3.org

Los metadatos son información adicional y descriptiva que se utiliza para describir otros datos. Proporcionan detalles sobre la información que se encuentra en una página web (título, autor, fecha de creación, palabras clave, descripción, y otros atributos relevantes).

Estos son importantes para varios propósitos:

• Optimización de motores de búsqueda (SEO): Los motores de búsqueda utilizan metadatos, como la descripción y las palabras clave, para indexar y clasificar. Un uso adecuado de los metadatos puede mejorar la visibilidad y la posición de una página en los resultados de búsqueda, lo que es crucial para promover información local y servicios municipales.
• Accesibilidad y usabilidad: Los metadatos proporcionan información adicional para ayudar a los usuarios/as a comprender el contenido de una página web, lo cual es especialmente importante para personas con discapacidades. Por ejemplo, los lectores de pantalla utilizan los metadatos para comprender mejor la estructura y el propósito de la página.
• Organización y gestión de contenido: Con una óptima gobernanza de los datos será mucho más eficiente encontrar la información. Etiquetas o categorías pueden asignarse a las páginas para facilitar su búsqueda y navegación, lo que mejora la experiencia de usuario al buscar información sobre servicios, eventos y recursos.
• Redes sociales: Al compartir enlaces en redes sociales, los metadatos como el título y la imagen de vista previa se utilizan para mostrar el contenido. Un buen uso de los metadatos puede aumentar la atracción y la relevancia de los enlaces compartidos en plataformas sociales, promoviendo eventos municipales, noticias y servicios.
• Seguridad y privacidad: Pueden incluir información sobre la autoría y los derechos de autor

Los metadatos se usan de tres formas distintas:

1. Acompañando al propio documento o recurso: pueden ser integrados directamente en la cabecera <head> de un documento HTML
2. Como un archivo independiente: pueden ser almacenados en un archivo aparte, destinado a describir recursos que no son de formato HTML, como archivos de sonido, imágenes
3. Creando una base de datos central o distribuida: Es posible crear una base de datos centralizada o distribuida, que contenga referencias o punteros a los recursos que describen

Los metadatos se añaden en el propio etiquetado HTML de la página en la cabecera de la misma. A su vez cada página se describe de forma individual.

	
<meta charset="utf-8" />
<sede:meta 
	title="App Conecta Zaragoza" 
	description="Conecta Zaragoza es una APP cuyo objetivo consiste en ofrecer a la ciudadanía servicios municipales de interés a través de una plataforma accesible y eficiente" 
	author="Ayuntamiento de Zaragoza" 
	last-modified="2023-2-17" 
	keywords="app, aplicación, conecta zaragoza, noticias, actividades, polen, calidad del aire, agenda institucional, equipamientos, incidencias via publica, quejas y sugerencias, tramites y servicios, idea zaragoza" 
	dirigidoa="Ciudadanía"
/>

Ejemplo de aplicación de metas en https://zaragoza.es/sede/portal/conecta-zgz/ .

Sistema de navegación

El objetivo de la Sede debe ser satisfacer las necesidades de los usuarios/as. 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
• Pueden acceder directamente a los servicios y contenidos internos con las herramientas de búsqueda, sin pasar por las página de inicio.
• No se encuentran menús de navegación saturados de opciones.

Mapa web

La Sede Electrónica se fundamenta en el concepto de agrupación de Portales, los cuales a su vez se apoyan en la metodología Design Thinking, orientada a ofrecer propuestas a la ciudadanía para categorizar los distintos portales. Todos ellos responden a la pregunta: ¿Qué le ofrece la ciudad a la ciudadanía en materia de...?

Esta estructura esta compuesta por:

• Gobierno de la Ciudad: Proporciona a la ciudadanía información sobre la estructura organizativa, funciones, políticas y acciones del gobierno local.
• Hacienda, Economía y Empleo: Brinda a la ciudadanía información relevante y actualizada sobre la situación económica local, así como para promover el desarrollo económico y la creación de empleo en la comunidad.
• Movilidad, Vía Pública y Urbanismo: Suministra a la ciudadanía información sobre la estructura urbana de la ciudad, así como sobre aspectos relacionados con la movilidad y el desarrollo urbanístico.
• Medio Ambiente y Salud Pública: Ofrece a la ciudadanía información medioambiental y recursos sanitarios.
• Educación, Cultura y Deporte: Ofrece a la ciudadanía información sobre una amplia variedad de actividades y eventos relacionados con estos tres ámbitos fundamentales para el desarrollo integral de las personas.
• Servicios Sociales y Atención Ciudadana: Proporciona información sobre los servicios sociales y recursos de atención ciudadana disponibles en la ciudad, con el fin de satisfacer sus necesidades y mejorar su calidad de vida.
• Emergencia y Seguridad: Ofrece a la ciudadanía información sobre cómo actuar y obtener asistencia en situaciones de emergencia y seguridad.
• Actualidad y Noticias: Ofrece a la ciudadanía un medio de comunicación dinámico para mantenerse al tanto de los acontecimientos más relevantes de la ciudad.

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

Servicio

Un servicio puede entenderse como un conjunto de operaciones o funciones que se ofrecen a través de la web para satisfacer una necesidad o requerimiento específico de los usuarios. Estos servicios pueden involucrar la generación dinámica de contenido, como la visualización de datos almacenados en bases de datos, la interacción con otros sistemas o la búsqueda y recuperación de información de fuentes externas,

Los servicios de titularidad municipal cuya prestación se realiza total o parcialmente por medios digitales. Podemos clasificarlos en la siguiente tipología.

• Servicios transversales

  La infraestructura digital de Zaragoza se enriquece con una serie de funcionalidades transversales diseñadas para ofrecer servicios a todos los portales, o que se integran en ellos para optimizar la navegación de los usuarios, facilitando el acceso a contenidos relacionados y mejorando la gestión de los servicios proporcionados por las distintas áreas municipales.

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

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

• Servicios Transaccionales

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

• Buscadores - recuperación de la información/servicios

  Un Servicio de Información, al ser inherentemente hipertextual, facilita la navegación, pero es imperativo contar con un robusto Sistema de Recuperación de la Información que complemente esta función.

  Es fundamental asegurar el acceso constante al motor de búsqueda, ubicado en la cabecera universal de todos los portales, identificado mediante el icono de una lupa ()

  Adicionalmente, cada servicio específico contará con un buscador especializado integrado en su propia cabecera introductoria. Este enfoque garantiza una experiencia de búsqueda eficiente y adaptada a las particularidades de cada servicio, optimizando así la recuperación de información relevante para el usuario.

Portales

Un portal es una plataforma en línea que actúa como un punto de acceso centralizado para una variedad de servicios, recursos y contenido estático relacionados con un tema común, área de interés o perfil de la ciudadanía.

Cada portal deberá contar con un menú de navagación que explique correctamente la estructura del portal.

En su página indice deberá contar con los servicios transversales de los que este disponga información.

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.

Cerrar Modal

Cerrar Modal

Páginas de nivel inferior (o de contenido)

Son las que muestran contenido específico. A medida que el usuario/a avanza en su búsqueda, se muestra una información más extensa y especializada.

Cerrar Modal

Cerrar Modal

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:

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

Imágenes

Las imágenes desempeñan un papel crucial en la presentación de contenido brindando una experiencia visual enriquecida. Es esencial comprender su utilidad y aplicación adecuada, así como garantizar su accesibilidad.

Por ello debemos asegurarnos de seguir las siguientes directrices para el manejo de imágenes en nuestros portales

• Las imágenes deben contribuir a crear una atmósfera positiva y acogedora en la interfaz, reflejando la cercanía y el compromiso del Ayuntamiento con la ciudadanía.
• Las imágenes deben utilizarse de manera responsable, evitando aquellas que puedan resultar ofensivas o inapropiadas para la ciudadanía. Deben ser neutrales desde el punto de vista social y político, evitando cualquier tipo de discriminación o mensaje que pueda resultar ofensivo para algún grupo de personas.
• Su uso debe promover la claridad y la comprensión del contenido, facilitando la transmisión de información de manera efectiva. Deben tener un valor funcional, complementando y aclarando el contenido textual al que acompañan.

• Se desaconseja incorporar texto dentro de las propias imágenes. Se debe priorizar el uso de hipertexto para comunicar mensajes a la ciudadanía, ya que esto garantiza una mejor accesibilidad y legibilidad del contenido.

  

  

Iframes

Los iframes se utilizarán solo cuando no exista otra solución. Se utilizarán 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>

Actualmente los que se incluyen van encaminados a incorporar Mapas de IDEZAR.

Videos

Los vídeos son elementos multimedia fundamentales para la comunicación y el aprendizaje en la era digital. Para garantizar su accesibilidad y usabilidad, es importante seguir ciertas pautas y recomendaciones.

• Definir metadatos para cada vídeo: incluyendo título, descripción y etiquetas relevantes. Estos metadatos ayudarán a los usuarios/as a entender el contenido del vídeo.
• Controlar el orden de reproducción de los vídeos relacionados: asegurando una secuencia lógica y coherente para una experiencia de visualización fluida.
• Facilitar una ayuda contextual: proporcionando información relevante sobre el contenido del vídeo, instrucciones de navegación y cualquier otro detalle que pueda mejorar su experiencia.