Descripción técnica

Owned by Servicios Digitales de Aragón
Last updated: 07 Dec 2021
2 min read

Desy es un proyecto propio que tiene varias facetas:

  • Sistema de diseño visual e interactivo de la UI (interface de usuario) de los productos web de la administración del Gobierno de Aragón. Este sistema de diseño se concreta en una librería de componentes HTML y CSS reutilizable para componer la UI de estos productos.

  • Versiones de éste en diferentes formatos:

    • Componentes visuales estáticos para crear propuestas en forma de mockups. Están en formato Librería de componentes de Adobe XD.

    • Componentes en Angular para ser utilizados en aplicaciones realizadas con este framework de javascript.

Como proyecto propio, tiene su propia evolución: jira, repositorio, versiones… Por tanto, las aplicaciones web de la administración digital, usarán versiones concretas del Desy. (Ejemplo: la versión 2.04 de SEDA usa la versión 4.6 de Desy)

Conceptos

El proyecto Desy define:

  • Apariencia visual de los elementos de la UI.

  • Interactividad, estados y comportamiento de éstos: mensajes de error, comportamiento de teclado, accesibilidad, comportamiento responsive en anchuras del navegador pequeñas…

  • Recomendaciones de uso, accesibilidad y de integración en proyectos.

Desy será “código primero”, es decir, se define primero en una tecnología básica de internet, el proyecto desy-html: HTML y CSS, que luego se podrá aplicar de formas muy variadas a otras tecnologías (Angular, React, Apps móviles…) Su variante en forma de componentes visuales para Adobe XD (desy.library.compnents.xd) será “hija” de la versión desy-html en código. Su variante en forma de componentes en Angular (desy-angular) será también hija de la versión desy-html.

Desy está basada en la simplicidad, facilidad de uso y accesibilidad de sus componentes.

Desy está fuertemente inspirada en: https://design-system.service.gov.uk/ con licencia Open Government Licence v3.0. Y a su vez, nuestro proyecto tiene licencia abierta: EUPL 1.2

Desy se “inyecta” a los proyectos que usen sus componentes principalmente en forma de paquete npm (dependencia de javascript). En los casos que eso no pueda ser posible, se podrá copiar-pegar el código HTML y CSS de cada componente, a partir de su documentación online.

Desy define sus componentes e incluye su propia documentación en el código.

Desy está pensada para permitir que los productos que lo usen (y ella misma) puedan evolucionar con el menor coste posible. Por eso es muy modular, configurable y simple.

Dinámica de trabajo

Es un proyecto, que siguiendo su filosofía, está abierta al cambio y las modificaciones. Así que su marco de trabajo es ágil y sus procesos ligeros, se adhiere a los valores del Manifiesto Ágil:

  • Individuos e interacciones sobre procesos y herramientas

  • Software funcionando sobre documentación extensiva

  • Colaboración con el cliente sobre negociación contractual

  • Respuesta ante el cambio sobre seguir un plan