Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Table Excerpt Include
nameLOGO_JUNTA
merge-tablestrue
pageRecursos
typepage

Versión

Table Excerpt Include
statictrue
copytabletrue
nameVERSION_NORM_FRONT_SECC_AWD
merge-tablestrue
pageNorm-front-toc
typepage

Tabla de Contenido


Tabla de contenidos
maxLevel5
indent20px
exclude.*(Versión Actual|Cumplimiento Normativo|Histórico de cambios|Subdirección de las Tecnologías de la Información y Comunicaciones|Área de Gobernanza y Calidad|Tabla de Contenido)

Cumplimiento Normativo


Advertencia

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.

Expandir
titleHistórico de cambios
VersiónPre-release AdopciónActivaRetiroAlcance
v01r00




  • Versión inicial del documento

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, si no 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.1Definición de Organismo Estructural
Organismo que solamente incluye elementos a nivel visual.
P3.2Definición de Organismo de Negocio
Organismo que puede incluir elementos a nivel visual y lógica del negocio en el cual se encuentre incluido.
P4Definición de PlantillaComposición de organismos

Se conforma de dos o más organismos 

Contextualización de elementosAporta un contexto funcional a los diferentes organismos
P5Definición de PáginaContenido realAporta un contexto de negocio, es posible conocer el producto

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




UI Expand
title🖺 Paradigma Atomic Web Design

Incluir página
ⴲ Paradigma Atomic Web Design
ⴲ Paradigma Atomic Web Design