Práctica XIV .- “Ejemplo de Modelo IFML: Online Music Store: Buscar Albúm con Pencil Project y Editor IFML: buscar álbum”

Tienda de música: buscar un álbum

PENCIL PROJECT Y IFML MODEL

Música Online: Buscar un Álbum

https://es.slideshare.net/mbrambil/ifml-interaction-flow-modeling-language-tutorial-ui-ux-modeling-design-icwe-2014-object-management-group-by-marco-brambilla

Práctica XIII .- “Ejemplo de Modelo IFML: Online Book Store con Pencil Project y Editor IFML: proceso de pago”

Tienda de libros en línea: proceso de pago

PENCIL PROJECT

Cuando el usuario decide hacer el pago, debe de capturar su información personal y presionar el botón “Next”.

Ahora procederá a capturar su información bancaria y pagar. Se mostrarán los detalles del pago posteriormente.

IFML MODEL

Cuando el usuario escoge la opción “Checkout”, el contenedor “Custumer Information” se muestra,el usuario captura su información personal. Después, la envía y el contenedor “Payment Information” se muestra, en el captura la información de su tarjeta.el nombre del usuario, enviado anteriormente como “parameter” se envía junto con la información de la tarjeta de crédito (CC) y el total (enviado anteriormente por el contenedor  “ShoppingCart” a la acción “Execute the payment”.

Práctica XII.- "Ejemplo de Modelo IFML: Online Book Store con Pencil Project y Editor IFML: consultar carrito de compra"

Tienda de libros en línea: consultar carrito de compra

PENCIL PROJECT

El carrito de compras es una lista de productos seleccionados previamente por el usuario, se muestran las cantidades y detalles de la orden. El usuario puede actualizar el carrito cambiando las cantidades de X producto, vaciar carrito borrando todos los productos o iniciar el proceso de pago mediante el botón “Checkout”.

Cuando se actualiza el carrito, se recalcula la cuenta total.

Cuando se vacía el carrito se re direcciona a una página de confirmación.

IFML MODEL

Práctica XI.- Tienda de libros en línea: agregar libro a carrito de compra

Modelo IFML de agregar libro a carrito de compra

Aquí se ve el modelo IFML que agrega un producto al carrito, cuando el usuario presiona el botón agregar a carrito, se muestra una ventana modal (pop up) preguntando la cantidad de productos. Este valor junto con el producto seleccionado se envían como parámetros y representan la entrada de la acción “Add to cart”, cuando se ejecuta la acción se muestra una ventada de confirmación.

EJEMPLO OLINE BOOKSTORE CON PENCIL PROJECT E IFML

Pasos del BookStore Pencil Project

Inicio / Home

Página de Books seleccionada

Página del Book/Producto 

Paso del Modelo IFML BookStore

BookStore

Ejemplo de modelo IFML: Carrito de compras

Carrito de compras

Vista General

Parte del Módulo Payment Execution detallado

 

Interaction Flow Modeling Language: Elementos

ELEMENTOS

Parameters (Parámetros)

Conjunto de características de los elementos asociados, los cuales definen mayormente el tipo y el nombre, siendo de tres distintos tipos: 

• Parámetro: un valor con nombre y de tipo definido 
• Parámetro de enlace: Especifica que un parámetro de entrada de una fuente está asociado con un parámetro de salida de un objetivo. 
• Parámetro de enlace de grupo: Define los parámetros de enlace asociados a un flujo de interacción.

View Containers (Contenedores de vista) 

Contenedores de vista: Elemento de la interfaz que contiene elementos que muestran contenido y permiten interacción y/u otros contenedores de vista, dividiéndose en los siguientes tipos: contenedor de vista, contenedor de vista XOR, contenedor de vista con referencia, contenedor de vista por defecto. 

View Components (Componentes de vista) 

Componentes de vista: Elemento de la interfaz que muestra contenido o permite una entrada de datos. Existen dos tipos: 

• Componente de vista: Muestra contenido de la interfaz. 

• Parte de un componente de vista: Una parte de un componente de vista que no puede existir por sí mismo. Puede desencadenar eventos y tener flujos de interacción de entrada o salida. Una parte componente de vista puede contener otra parte componente de vista.

Events (Eventos) 

Eventos: Un evento que afecta al estado de la aplicación.

Action (Acciones) 

Acciones: Una pieza de la lógica de negocio activada por un evento. Puede ser del lado del servidor o del lado del cliente.

Activation Expression (Expresiones de Activación) 

Expresiones de activación: Expresión booleana asociada con un elemento de la vista, parte de un componente de una vista o un evento.

Flows (Flujos) 

Relaciones de elementos para el flujo o interacción. Puede ser de dos tipos: 

• Flujo de navegación: Una dependencia de entrada-salida. La fuente del enlace tiene una salida que es asociada con la entrada del objetivo del enlace. 
• Flujo de dato: Intercambio de datos entre un componente de vista o acción como consecuencia de una interacción previa del usuario.

Modules (Módulos) 

Módulos: Pieza de la interfaz de usuario y sus acciones correspondientes. 

• Módulo: Puede ser reusado para mejorar la mantenibilidad del modelo IFML. 
• Puerto de entrada: Un punto de interacción entre un módulo y su ambiente que colecciona flujos de interacción y parámetros que llegan al módulo. 
• Puerto de salida: Un punto de interacción entre un módulo y su ambiente que colecciona flujos de interacción y parámetros que salen desde el módulo.

Referencia

http://repobib.ubiobio.cl/jspui/bitstream/123456789/1568/1/Suazo%20Gajardo%2 0Eliseo%20Moisés.pdf

Interaction Flow Modeling Lenguage: características

Características

• Nace del WebML y Webratio
• Es aprobado como estándar por la Object Management Group (OMG) en Marzo de 2013
• En febrero 2014 sale IFML Beta 2.
• En marzo 2015 es publicada IFML 1.0 

Ventajas

Permite:

• Creación de contenidos y ventanas
• Facilita el diseño del Front-end con el usuario
• Hay una Jerarquía de componentes
• Separa los conceptos en base del Back-end
• Facilita la interacción con el Stakeholder
• Generación de código

Interaction Flow Modeling Language: Origen

ORIGEN

¡Después de tres años de trabajo, IFML 1.0 finalmente es aprobado por OMG!

El Lenguaje de Modelado de Flujo de Interacción fue adoptado hace un año, en marzo de 2013, como una especificación Beta por el Object Management Group (OMG). Desde entonces, el Grupo de trabajo de finalización de IFML trabajó duro para llevar la especificación a la perfección.

La Junta de Arquitectura de OMG se reunió para la aprobación de IFML. Entre otros, puedes ver a Andrew Watson (OMG), Juergen Boldt (OMG) y representantes de IBM, 88Solutions, Adaptive, Fujitsu, PrismTech y otros.

A lo largo del camino, obtuvimos valiosos comentarios de los implementadores del estándar, abarcando vendedores de herramientas DSL implementando la notación, proveedores de herramientas UML implementando el perfil UML, y nuestros propios desarrolladores en WebRatio implementando la herramienta de modelado de fortaleza de la industria comercial y generadores de códigos, así como como un grupo de editores de código abierto IFML. También recibimos comentarios de los clientes de WebRatio, que también contribuyeron a mejorar la notación del idioma.

Todo esto resume un total de 77 asuntos presentados formalmente al OMG y posteriormente abordados por el equipo de trabajo. El documento de especificación, así como los archivos legibles por máquina (XMIs) se han limpiado y preparado para la publicación final.

Como último paso, la versión finalizada de la norma se presentó en el ADTF y en la Junta de Arquitectura de la OMG durante la reunión técnica de marzo en Reston, VA, EE. UU.

La versión 1.0 ahora es oficialmente adoptada por OMG. Es solo cuestión de unas semanas antes de que la versión final, corregida, de la especificación esté oficialmente disponible en los servidores de OMG.

Para fines de documentación, aquí hay una instantánea del programa

Mientras tanto, puedes echarle un vistazo al adelanto de la versión final de IFML. Más detalles están disponibles en el sitio oficial de www.ifml.org.

Como dijo Stefano Butti, CEO de WebRatio, IFML es uno de los tres saltos más grandes en la historia de WebRatio (junto con el traslado a los EE. UU. Y la selección de WebRatio como Gartner Cool Vendor). Otros proveedores ya han declarado interés y / o han comenzado a desarrollar alguna solución de modelado basada en IFML. Esperamos la amplia adopción de este nuevo estándar, gracias también a la integración con otros aspectos de modelado, como el modelado de negocios (con BPMN) y el modelado de sistemas (con UML, SoaML, SysML, ...).

En el evento de Reston también regalamos las primeras copias de la muy buena hoja de referencia de IFML (o Guía de referencia rápida) preparada por WebRatio basada en el documento de especificación oficial.

La hoja de referencia está disponible de forma gratuita en el portal de aprendizaje de WebRatio.

https://marco-brambilla.com/2014/03/31/ifml-1-0-interaction-flow-modeling-language-approved-by-the-omg/

Model-Driven Web Engineering: Conceptos

CONCEPTOS

Web Engineering

Ingeniería web: Métodos, técnicas y herramientas para el desarrollo de aplicaciones web.

Model-Driven Engineering (MDE)

Ingeniería dirigida por modelos: métodos, técnicas y herramientas para el desarrollo de software a partir de modelos.

Model-Driven Development (MDD)

Desarrollo dirigido por modelos: paradigma para escribir e implementar aplicaciones de computadoras fácilmente, efectivamente y con un costo mínimo con representaciones gráficas del software a construir.  

Model-Driven Architecture (MDA)

Arquitectura dirigida por modelos: es un nuevo paradigma dirigido por modelos el cual cubre una serie de pasos  como análisis, diseño, programación, pruebas, despliegue y mantenimiento, sería una arquitectura de tres modelos que guían el proceso de desarrollo del software siendo la forma formal del MDD.