Subdirección de las Tecnologías de la Información y Comunicaciones
Área de Gobernanza y Calidad
Versión
Tabla de Contenido
Cumplimiento Normativo
Las normas expuestas son de obligado cumplimiento. La STIC podrá estudiar los casos excepcionales los cuales serán gestionados a través de los responsables del proyecto correspondiente y autorizados por el Área de Gobernanza de la STIC. Asimismo cualquier aspecto no recogido en estas normas deberá regirse en primera instancia por las guías técnicas correspondientes al esquema nacional de seguridad y esquema nacional de interoperabilidad según correspondencia y en su defecto a los marcos normativos y de desarrollo software establecidos por la Junta de Andalucía, debiendo ser puesto de manifiesto ante la STIC. La STIC se reserva el derecho a la modificación de la norma sin previo aviso, tras lo cual, notificará del cambio a los actores implicados para su adopción inmediata según la planificación de cada proyecto. En el caso de que algún actor considere conveniente y/o necesario el incumplimiento de alguna de las normas y/o recomendaciones, deberá aportar previamente la correspondiente justificación fehaciente documentada de la solución alternativa propuesta, así como toda aquella documentación que le sea requerida por la STIC para proceder a su validación técnica. Contacto Arquitectura: l-arquitectura.stic@juntadeandalucia.es |
Histórico de cambios
Los cambios en la normativa vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.
|
1. Introducción
Atomic Web Design es un enfoque metodológico para la creación de interfaces web que organiza los componentes en cinco niveles jerárquicos: átomos, moléculas, organismos, plantillas y páginas. Inspirado en la química, este sistema permite descomponer una interfaz en sus elementos más básicos (átomos), como botones o campos de texto, y combinarlos progresivamente en estructuras más complejas (moléculas y organismos), hasta formar interfaces completas (plantillas y páginas). Este método promueve la coherencia, la reutilización de componentes y la flexibilidad en el diseño, facilitando tanto el desarrollo como la escalabilidad de la interfaz.
2. Objetivo
El objetivo de este documento, es establecer directrices, reglas y procedimientos claros para garantizar la consistencia, calidad y eficiencia en la ejecución de las labores de ingenieria en el desarrollo de interfaces web.
Este tipo de documento tiene como finalidad proporcionar un marco estructurado que regule las prácticas y criterios a seguir, de manera que todos los involucrados actúen de forma alineada con los estándares definidos. Además, busca minimizar errores, optimizar recursos y promover la adopción de mejores prácticas, facilitando el cumplimiento de objetivos comunes dentro de una organización o equipo de trabajo.
3. Pautas
Hay que tener en cuenta que la metodología no se basa en un proceso lineal, sino en un modelo mental que ayudará a entender cómo está compuesta una interfaz y cómo interactúan sus partes. Para ello, la pieza más importante se centra en la identificación de los átomos y sus atributos como la mínima expresión funcional de las interfaces.
«Para dominar el todo debes conocer su mínima expresión.»
Partiendo de las etapas de la metodología, se han definido una serie de pautas a tener en cuenta a la hora de categorizar cada uno de los elementos de una interfaz, así como unos criterios de verificación y aceptación de cada una de ellas.
Pautas | Tarea | Criterios de verificación | Criterios de aceptación |
P1 | Definición de Átomo | Elemento abstracto | Puede tener o no funcionalidad. En caso de tenerla, ésta debe de ser una funcionalidad web primaria(1) que carezca de utilidad o propósito por sí sola. |
Indivisible | No se puede dividir en más de un elemento funcional | ||
P2 | Definición de Moléculas | Composición de uno o más átomos | Compuesto de uno o varios átomos. La unión otorga coherencia funcional a cada átomo. |
P3 | Definición de Organismo | Composición de átomos, moléculas u otros organismos | El elemento se conforma de: al menos una molécula y un átomo o dos moléculas, una composición de un organismo y uno o varios(as) átomos/moléculas, que tengan una coherencia funcional |
| P3.1 | Definición de Organismo Estructural | Organismo que solamente incluye elementos a nivel visual. | |
| P3.2 | Definición de Organismo de Negocio | Organismo que puede incluir elementos a nivel visual y lógica del negocio en el cual se encuentre incluido. | |
| P4 | Definición de Plantilla | Composición de organismos | Se conforma de dos o más organismos |
| Contextualización de elementos | Aporta un contexto funcional a los diferentes organismos | ||
| P5 | Definición de Página | Contenido real | Aporta un contexto de negocio, es posible conocer el producto |
| P6 | Mapa de componentes | Contenido real | Se creará un mapa de componentes en base a lo descrito en esta sección. |
(1) funcionalidad web esencial: funcionalidades básicas de elementos HTML. Por ejemplo, representación de un texto en una etiqueta o en un párrafo, permitir escribir en un campo de texto, poder hacer click sobre un botón o un link, permitir visualizar una imagen o icono...
Se define el mapa de componentes como una tabla en la que se incluye la relación entre el diseño realizado por UX y los componentes de la STIC a usar en la aplicación. Para ello, dentro del espacio de confluence del proyecto, sección Arquitectura, se creará una nueva subsección llamada 🎨DDL, y dentro de esta otra llamada DDR - Mapa de componentes, para concluir creando una pagina que llamaríamos Mapa de componentes:
Dentro de esta página tendremos:
|
