Solución para aplicación web integrada en un sitio web

Información general

Ámbito

Presencia en Internet

Objeto

Desarrollo de aplicaciones con interfaz web integradas en sitios web de la Junta de Andalucía

¿Cuándo utilizarla?

Finalidad y casos de uso

Esta solución aplica al desarrollo de una aplicación con interfaz web que se presentará integrada con un sitio web, por lo que queremos que esté ajustada al Sistema de diseño de la Junta de Andalucía.

Dado que la aplicación se va a presentar de forma integrada en un sitio web concreto, aplican los mismos requisitos de cumplimiento que en el sitio web donde se integra:

Cumplimiento completo: Debe cumplir el sistema de diseño al completo cualquier aplicación con interfaz web dirigida a la ciudadanía (no interna), que esté directamente relacionada con la acción de la administración pública y tenga vocación de permanencia.
Cumplimiento parcial: En el caso de que el interfaz web de la aplicación forme parte de un micrositio, solo es necesario cumplir el capítulo de estilo gráfico (marca, colores, tipografía...). Los micrositios son sitios web pequeños y habitualmente temporales, relacionados con eventos, campañas de comunicación institucional y proyectos individuales con proyección pública.

Para más información sobre los requerimientos de cumplimiento del sistema de diseño, consulta la página Alcance del Sistema de diseño.

Algunos casos en los que podría utilizarse esta solución tecnológica son:

Buscadores especializados: Aplicaciones que permiten a la ciudadanía localizar información específica (por ejemplo, centros educativos, recursos sanitarios, normativas) mediante filtros y criterios personalizados.
Cuadros de mando interactivos: Herramientas visuales que presentan datos clave en tiempo real para facilitar la toma de decisiones por parte de responsables públicos o ciudadanía, como estadísticas de empleo, indicadores de salud o seguimiento de proyectos.
Formularios de envío de información: Interfaces accesibles y adaptadas para que la ciudadanía pueda presentar solicitudes, registrar incidencias o aportar documentación, cumpliendo con los requisitos de usabilidad y accesibilidad.

Características y ventajas

Diseño coherente y accesible: Basado en el Sistema de Diseño de la Junta, que garantiza una experiencia homogénea y accesible para todos los usuarios.
Componentes reutilizables: Permite construir interfaces a partir de bloques ya validados, reduciendo errores y acelerando el desarrollo.
Adaptabilidad a distintos dispositivos: Interfaces responsivas que se ajustan automáticamente a móviles, tabletas y ordenadores.
Cumplimiento normativo: Alineado con los estándares de accesibilidad (WCAG) y usabilidad exigidos por la normativa vigente.
Facilidad de mantenimiento: Al seguir un sistema común, las actualizaciones y mejoras pueden aplicarse de forma más eficiente.
Escalabilidad: Preparado para crecer en funcionalidad o volumen de usuarios sin comprometer el rendimiento.

Detalle técnico

Los usuarios acceden al sitio web. El sitio web puede ser de cualquier tipo: SPA (Single Page Application), Microfrontend, Portal web…
Dentro del sitio web se encuentra integrada la aplicación web que proporcionará a la solución completa una funcionalidad concreta.
La pieza del API Manager permite la publicación y consumo de servicios de forma centralizada, aplicándose ciertas políticas: seguridad, límite de acceso, observabilidad, ...
La funcionalidad de negocio y de gestión de datos de la aplicación está implementada en los servicios de backend, desplegados en forma de microservicios.

Cómo adaptarla a tu caso concreto

Adaptación

Para aplicar esta solución en tu proyecto, deberás seguir los siguientes pasos:

Comprender la relación entre soluciones: Esta solución aplica la capa correspondiente al Sistema de Diseño sobre la solución de interfaces web, que actúa como base molecular y constituye el núcleo de la aplicación.
Elaborar bocetos y prototipos: Diseña esquemas visuales y prototipos interactivos que se ajusten a los principios y componentes definidos en el Sistema de Diseño de la Junta de Andalucía. Esto facilitará la validación temprana de la experiencia de usuario.
Aplicar el sistema de diseño a la interfaz web (front-end): Implementa los estilos, componentes y patrones del sistema de diseño en el desarrollo del front-end, asegurando coherencia visual, accesibilidad y alineación con los estándares institucionales.

A continuación, te indicamos específicamente cómo llevar a la práctica estos pasos.

Uso de la solución de interfaces web

En la solución de interfaces web encontrarás indicaciones específicas sobre cómo aplicarla a tu proyecto. Si utilizas una aplicación basada en otra solución, puedes obviar este paso.

Elaborar bocetos y prototipos ajustados al sistema de diseño

A la hora de diseñar la aplicación, tienes a tu disposición una herramienta para elaborar bocetos y prototipos llamada Penpot.

Penpot es una herramienta de software libre con interfaz web público. Puedes utilizarla en dos entornos:

Penpot Junta: Instalación propia de la Junta de Andalucía, con las ventajas de seguridad y privacidad que conlleva. Sólo está accesible desde la RCJA.
Penpot.app: Instancia pública gratuita de la aplicación Penpot.

Más información sobre el servicio Penpot

Para ayudarte a hacer bocetos y prototipos de portales ajustados al sistema de diseño, tienes a tu disposición dos bibliotecas de diseño para Penpot y para Figma:

Bibliotecas de diseño para Penpot y Figma

Aplicar el sistema de diseño al front end

Para aplicar el sistema de diseño a tu front end, cuentas con diversos recursos a tu disposición:

Tema bootstrap de la Junta de Andalucía

El tema bootstrap recoge un código CSS y javascript que implementa el Sistema de diseño.

Tema bootstrap de la Junta de Andalucía en gitlab (solo accesible desde RCJA).

Más información sobre el tema bootstrap de la Junta de Andalucía

Catálogo de componentes web Storybook

También puedes integrar en tu desarrollo directamente los distintos componentes web desarrollados por la Junta de Andalucía ajustados al sistema de diseño.

Tienes información sobre los distintos web components disponibles en nuestro catálogo:

Catálogo de componentes web Storybook (solo accesible desde RCJA).

Más información sobre el catálogo de componentes web

Integrar la navegación de un portal web

Si tu aplicación se va a presentar integrada en el Portal de la Junta de Andalucía o la web orgánica de una consejería o agencia, necesitarás incorporar la cabecera (marca, menú) y el pie de página apropiado.

Para ello, tienes dos recursos a tu disposición:

Componentes web de cabecera y pie: Para utilizarlos, tienes que obtener los datos del menú y el pie a través de un microservicio del portal. También puedes utilizarlos para integrar una aplicación dentro de un portal sectorial, pero en este caso tendrás que generar la estructura de menú por tus propios medios.
API de exportación de cabecera y pie: Ofrece el HTML prerenderizado de la cabecera y el pie del Portal de la Junta de Andalucía y de las webs orgánicas.

Más información sobre cómo integrar la navegación de un portal web en una aplicación

Despliegue

La Junta de Andalucía dispone de una plataforma tecnológica basada en Openshift en la que puedes desplegar tu aplicación una vez que esté desarrollada.