PC1 – Definición de átomos

PC1.1 - No funcional

PC1.1.1 - Carencia de funcionalidad

Carentes de funcionalidad, únicamente aportación visual

PC1.1.2 - Indivisible

Indivisibles en cualquier otro elemento

PC1.1.3 - Solo añaden características

Utilizados para enriquecer otros elementos en forma de propiedades (colores, dimensiones, fuentes, tipografía…)

PC1.1.4 - Carencia de eventos

No envía ni recibe eventos

PC1.2 - Funcional UI

PC1.2.1 - Componentes abstractos

Presentan funcionalidad UI pero no presentan utilidad o coherencia por si solos. Principalmente elementos HTML básicos como <input>, <h1>, <label>, <p>…

PC1.2.2 - Pueden presentar estado UI

Pueden presentar estados a nivel de UI como deshabilitado, seleccionado, enfocado…

PC1.2.3 - Indivisible

Indivisibles en cualquier otro elemento funcional

PC1.2.4 - Capaz de emitir eventos

Capacidad de emitir eventos no de recibirlos

PC2 – Definición de moléculas

PC2.1 - Funcional UI

PC2.1.1 - Puede estar compuesta por átomos y otra molécula más simple

El componente puede estar formado por alguna de las siguientes alternativas:

- combinación de más de un componente átomo

- combinación de uno o más componentes átomos y un componente molécula más simple. Una molécula simple puede combinarse con otros átomos para dar lugar a otra molécula más compleja con propósito único

Todas las alternativas de combinación tiene que tener coherencia funcional de UI.

PC2.1.2 - Componente funcional UI con propósito simple

Presentan funcionalidad UI con un único propósito

PC2.1.3 - Pueden presentar estado UI

Pueden presentar estados a nivel de UI como deshabilitado, seleccionado, enfocado…

PC2.1.4 - Capaz de emitir eventos

Capacidad de emitir eventos y suscribirse a los de los elementos que lo forman.

PC3 – Definición de organismos

PC3.1 - Funcional de negocio

PC3.1.1 - Composición de átomos, moléculas u otros organismos

El componente puede estar formado por alguna de las siguientes combinaciones:

- al menos dos moléculas con o sin átomos

- composición de uno o varios organismos y uno o varios(as) átomos/moléculas.

Todas las alternativas de combinación tienen que tener coherencia funcional de negocio.

PC3.1.2 - Componente funcional UI y de negocio

Componente funcional y de negocio:

- Lógica de negocio intrínseca de la aplicación

- Se conoce el origen del estado

PC3.1.3 - Capaz de emitir eventos

Capacidad de emitir eventos y suscribirse a los eventos de los elementos que lo forman.

• PC1.1.1: Los elementos no presentan funcionalidad. En el ejemplo se puede comprobar que por ejemplo ni los colores ni los tamaños de letra o el grosor de la misma no proporciona ningún tipo de funcionalidad por sí solos.
• PC1.1.2: Los elementos no se podrán dividir en ningún otro elemento. En el ejemplo, ni colores ni tamaños de letra ni grosores se podrán dividir en otros elementos.
• PC1.1.3: Los elementos añaden se utilizan para añadir características o propiedades a otros elementos.
  • Colores: Por ejemplo pueden indicar el estado de otro tipo de elementos como por ejemplo un botón. Si un botón es de color rojo puede indicar que su naturaleza es distinta a la de un botón de color verde.
  • Tamaños o grosores de letra: Cuando a un elemento como un texto se le atribuye un tamaño de letra o un grosor distinto, puede indicar que uno presenta más relevancia que el otro.
• PC1.1.4: Los elementos guardan relación con eventos. En el ejemplo, ni colores ni tamaños de letras o grosores pueden emitir o recibir eventos.

• PC1.2.1: Los componentes presentan funcionalidad pero no coherencia o utilidad por sí solos en la UI, además deben extender o redefinir elementos HTML básicos. En base al ejemplo:
  • 1) Componente botón: Un botón simple tiene funcionalidad sin embargo no presenta una utilidad o coherencia en la interfaz por si solo, en ese caso necesita de otro elemento para conseguirlo. El componente surgiría a partir de un elemento <button>.
  • 2) Componente icono: Un icono simple tiene la funcionalidad de representar algo. En el ejemplo un icono que simula una persona corriendo puede estar relacionado con el deporte, sin embargo, hasta que no se combina con otro elemento no tiene coherencia en la interfaz por si solo, así como estar acompañado de un texto o incrustado en un botón. El componente surgiría a partir de un elemento HTML <i> o <span>.
  • 3) Componente texto: Un texto, ya sea un título, subtítulo, párrafo… tiene la funcionalidad de representar algo sin embargo hasta que no se enlaza con otro elemento puede no tener coherencia en la interfaz. El componente podría surgir a partir de elementos HTML como <h1>, <h2>, <label>, <p>…
    
    
• PC1.2.2: Los componentes pueden tener estados a nivel de UI. En base al ejemplo, un botón 1) puede estar deshabilitado, seleccionado o tener otro aspecto cuando el usuario posiciona el cursor sobre el mismo. Del mismo modo, un icono 2) o texto 3) puede tener un estado por ejemplo al cambiar el color de los mismos.
  
  
• PC1.2.3: Los componentes no pueden dividirse en otros componentes funcionales. En este caso ni botones 1) ni iconos 2) ni textos 3) se pueden descomponer en elementos con funcionalidad.
  
  
• PC1.2.4: Los componentes pueden emitir pero no recibir eventos. Por ejemplo un componente botón 1) puede emitir un evento cuando se haga clic sobre él, sin embargo el componente no recibirá ningún evento del exterior.

• PC2.1.1: El componente puede estar formado por una combinación de átomos y ninguna molécula
  • 1) Botón llamada = componente botón + componente icono llamada
  • 2) Menú de pestañas = componente botón + componente botón +  componente botón
  • 3) Ítem menú simple = componente texto + componente sub-texto + componente figura
    
    
• El componente puede estar formado por una combinación de átomos y una molécula más simple
  • 4) Ítem menú complejo: componentes átomos (texto + sub-texto + descripción + enlace) + componente molécula (icono gota + botón)
    
    
• PC2.1.2: El componente presentan funcionalidad UI y la unión de sus elementos tiene un propósito :
  • 1) La unión del icono y el botón implica que se realizará algún tipo de acción relacionada con información que transmita el icono, en este caso un teléfono
  • 2) La unión de componentes botones da lugar a un componente considerado como menú de pestañas donde se puede seleccionar cualquiera de las opciones haciendo clic sobre ellas.
  • 3) La unión de los átomo da lugar a un ítem que guarda una coherencia en la UI como por ejemplo el ítem de un listado.
  • 4) La gota de agua y el botón ya dan lugar a un componente molécula coherente en la UI. Si se combina con otros componentes átomos como textos título, texto subtítulo, enlace…  Da lugar a otro componente más complejo que tiene coherencia en la UI como por ejemplo el ítem de un listado.
    
    
• PC2.1.3: Pueden presentar estado UI . Por ejemplo las moléculas formadas por componentes botones siguen pudiendo tener estado deshabilitado. En el caso del componente 3) también podrá asociarse un estado cuando el usuario se posicione sobre ella.
  
  
• PC2.1.4: Cada molécula citada es capaz de emitir eventos hacia los componentes que las contengan. También pueden escuchar los posibles eventos enviados por los elementos que las componen.
  • 1) Al hace clic sobre el botón, la molécula recibe el evento que a la vez lo puede emitir al exterior notificando al componente donde esté contenida.
  • 2) El componente molécula recibe un evento por cada componente botón que se seleccione. Esa selección puede ser emitida al exterior.

• PC3.1.1: Un componente organismo puede estar compuesto por dos o más molécula con o sin componentes átomos. Si se fijan en las áreas naranjas se pueden encontrar los siguientes ejemplos:
  • 1) Listado de componentes moléculas que guardan una coherencia funcional de negocio.
  • 2) Listado de componentes moléculas que dan lugar a un listado que carga información asociada al negocio.
    
    
• Un componente organismo puede estar compuesto por uno o varios componentes organismos y ninguno, uno/a  o varios/as átomos/moléculas.  Si se fijan en las áreas azules y verdes se pueden encontrar los siguientes casos:
  • 3) Conjunto de componentes átomos como el nombre de la persona y la descripción. Por otro lado moléculas como los botones que incluyen iconos. Finalmente se combina con otro componente organismo simple 1).
  • 4) Conjunto de componentes átomos como el título  ”Contactos…”, componentes moléculas como el botón con icono situado a su derecha y el menú de pestañas y el organismo del listado de ítems 2).
  • 5) Unión de dos organismos que da lugar a una sección lateral de una interfaz y relacionado con información de una persona así como los contactos asociados a ella.
    
    
• PC3.1.2: Un componente organismo presenta funcionalidad de interfaz y de negocio. Partiendo de los ejemplos previos:
  • 1) En este caso nos puede indicar que una persona tiene características como ser fumadora, consumidora de alcohol, practica deporte… Esa información es específica del ámbito de la aplicación y se conoce el origen de esa información como por ejemplo un servicio de un API.
  • 2) En este caso nos puede indicar los contactos asociados a una persona. También se conoce el origen de la misma.
  • 3) Combina la información de negocio del componente 1) y además se le atribuye otra información como datos personales o información de contacto.
  • 4) Combina la información de negocio del componente 2) y además se incluyen otras características de negocio como categorización y filtrado de de contactos.
  • 5) Combina la información de negocio presente en los componentes 3) y 4) teniendo en cuenta datos personales de la persona y sus contactos asistenciales.
    
    
• PC3.1.3: Los componentes citados son capaces de emitir eventos los cuales podrán ser escuchados  desde los componentes padres, ya sean otros organismos o la propia página de la aplicación. A su vez cada uno es capaz de gestionar los eventos emitidos por los elementos que los forman.
  • El componente 2) puede recibir eventos de los componentes internos como por ejemplo el clic sobre cualquiera de los ítems del listado. Ese evento se puede propagar desde el componente 2) hacia su componente contenedor, en este caso el 4). El componente 4) escuchará los eventos de 2) y de otros componentes como por ejemplo el menú de pestañas. En este punto, el componente puede orquestar los eventos para entablar comportamientos lógicos o permitir flujos de comunicación. Se puede imaginar que el usuario hace clic en otra pestaña del menú, ese evento lo recibirá el componente 4) y éste puede aplicar cambios sobre el componente 2) para que el listado se cargue aplicando un determinado filtro.
    Por otro lado, 4) seguirá pudiendo propagar los eventos hacia el exterior, en este caso el componente 5) que este a su vez podrá reenviar la información a la página final

• PC4.1.1: A partir de diferentes componentes ya sean átomos, moléculas u organismos, es posible crear componentes de carácter plantilla o layout de tal manera que determinen la distribución de los componentes y apliquen estilado para llevarlo a cabo. En este caso se tendría un ejemplo de plantilla formado por una sección lateral a la izquierda y una sección de contenido a la derecha.

• PC5.1.1: En la página entra en juego la gestión de eventos. Ésta será el destino final de los eventos emitidos por los componentes que la forman. A partir de ellos se puede establecer comunicación y desencadenar diferentes comportamientos. 
• PC5.1.2: En la página se gestiona la navegación, es decir, si se imagina que él hace clic en un botón del menú lateral, la página recibe el evento y acto seguido navega hacia otra página distinta o aplica un scroll para que el foco de la ventana se centre en un sección determinada (en caso de haber scroll).
• PC5.1.3: En la página se gestiona el estado general. En este caso el estado general podría estar relacionado con un identificador asociado a la persona de la que se está consultando la información. Este estado será transversal para los componentes de negocio que dan lugar a la página.