QUINCE AOS DE DESARROLLO INDUSTRIAL

MODEL-DRIVEN DE APLICACIONES FRONT-END:

DESDE WEBML HASTA WEBRATIO E IFML

www.webratio.com

Texto Marco Brambilla1, Stefano Butti2

1

Politecnico di Milano, DEIB.

Piazza L. Da Vinci, 32. I-20133 Miln, Italia
marco.brambilla@polimi.it

WebRatio.
Piazza Cadorna, 10. I-20123 Miln, Italia
marco.brambilla@polimi.it

Resumen: Este documento trata sobre la historia detrs del

estndar IFML, recientemente adoptado por la Object
Management Group. Muestra cmo nuestra primera
propuesta, llamada WebML, ha sido una incubadora para la
investigacin y la explotacin industrial del modelado
conceptual, aprovechando las experiencias obtenidas en el
campo industrial y enfrentando continuamente nuevos retos
relacionados con la abstraccin, mtodos, herramientas y
tecnologas. Resumimos la esencia del enfoque y mostramos el
funcionamiento de la herramienta de modelado WebRatio.

www.webratio.com

ndice
1. Introduccin......................................................................................... 1
2. El lenguaje WebML original ................................................................. 2
3. Arquitecturas Orientadas a Servicios ................................................... 5
4. Procesos de Negocios en la Web ......................................................... 6
5. Personalizacin del Usuario y Contextualizacin .................................. 8
6. Web Semntica y Servicios .................................................................. 9
7. Aplicaciones de Internet con Contenido Enriquecido ......................... 10
8. El Interaction Flow Modeling Language ......................................... 11
9. La plataforma de desarrollo WebRatio............................................... 12
10. Conclusiones .................................................................................... 14
Referencias WebML ............................................................................ 14

www.webratio.com

1. Introduccin
Las aplicaciones Web Data-Intensive, por ejemplo: sistemas informticos cuyo principal objetivo
es dar acceso a contenidos organizados, fueron la primera aplicacin industrial en la Web, y
perduran hoy en da, en trminos de volumen y valor comercial.
En este documento retratamos nuestros esfuerzos hacia la definicin de un enfoque modeldriven (guiado por modelos) dirigido a uno de los aspectos ms relevantes en el desarrollo de
tales sistemas: el front-end. El desarrollo del front-end es an un proceso costoso e ineficiente,
donde la codificacin manual es, todava, el enfoque de desarrollo predominante, la reutilizacin
de los artefactos de diseo es escaza, y la portabilidad entre distintas plataformas sigue siendo
difcil. La disponibilidad de un lenguaje de modelado para los flujos de interaccin independiente
de la plataforma de implementacin, puede traer muchos beneficios al proceso de desarrollo de
aplicaciones front-end: permite la especificacin formal de las diferentes perspectivas del frontend (contenido, composicin de la interfaz, opciones de interaccin y navegacin, y la conexin
con la lgica de negocios y la presentacin); disipa inquietudes dentro del grupo al separar la
especificacin del front-end de los problemas especficos de la implementacin; mejora el
proceso de desarrollo, al fomentar la separacin de las reas durante el diseo de la Interaccin
de Usuario, otorgando as la mxima eficiencia a cada uno de los roles de desarrollo; permite la
comunicacin entre el diseo de la interfaz y la interaccin con los actores menos tcnicos,
logrando una validacin rpida de los requerimientos.
Presentamos nuestro trabajo sobre el Interaction Flow Modeling Language (IFML), adoptado
como un estndar por la Object Management Group en Marzo de 2013. Su definicin presta una
especial atencin al modelado de la usabilidad y la comprensibilidad, al considerar
cuidadosamente todos los factores que puedan contribuir para lograr que la Gestin de la
Informacin del Producto (PIM-Product Information Management) sea de rpido aprendizaje,
fcil uso, apto para la implementacin y abierto para la reusabilidad y extensibilidad:
Es conciso, evitando las redundancias y reduciendo el nmero de tipos de diagramas y
conceptos necesarios para expresar las decisiones del diseo de las interacciones ms
importantes.
Provee reglas de inferencia de modelos en el nivel de modelado que automticamente
emplean patrones por defecto para la deduccin automtica de detalles cuando sea
necesario.
Incluye la extensibilidad en la definicin de nuevos conceptos (por ejemplo, novedosos
componentes de interfaz o tipos de eventos)
Asegura la posibilidad de implementacin, esto quiere decir que soporta la construccin de
frameworks de transformacin del modelo y generadores de cdigo que puedan mapear el
PIM en una adecuada PSM y, finalmente, en aplicaciones que pueden ser ejecutadas por un
amplio rango de plataformas tecnolgicas y dispositivos de acceso.
Asegura la reutilizacin a nivel de modelado, lo que significa que soporta la definicin de
patrones de diseo reusables que pueden ser almacenados, documentados, buscados,
recuperados y re-utilizados en otras aplicaciones.

www.webratio.com

IFML puede ser visto como la consolidacin del Lenguaje de Modelado Web (WebML) [1]
definido y patentado hace 15 aos como un modelo conceptual para las aplicaciones Wed dataintensive. Su principal innovacin fue la notacin de modelado de hipertexto, que permite la
especificacin de pginas Web conformadas por componentes conceptuales (units)
interconectadas mediante links, igualmente, conceptuales. El modelo de hipertexto se crea en
una simple y muy intuitiva notacin visual, pero tiene una semntica rigurosa, que permite la
transformacin automtica de los diagramas en el cdigo ejecutable de una aplicacin Web
data-intensive. Originalmente, el enfoque de WebML se concentraba en la definicin de eficaces
conjuntos de units; con el tiempo, nos dimos cuenta que las units son solamente componentes
especficos que pueden ser definidos y adaptados a las necesidades de cualquier desarrollo
tecnolgico actual; en su lugar, la esencia del modelo de hipertexto de WebML se basa en las
reglas para conectar componentes y links dentro de un grfico, y deducir todas los posibles
patrones para el traspaso de los parmetros y la conexin de los componente de la interfaz y los
tipos de links. Un grfico bien estructurado asegura el correcto flujo de datos entre las units y
establece el orden apropiado de ejecucin de los componentes cuando se muestra el contenido
de las pginas. Finalmente, el levantamiento de un modelo de hipertexto equivale a la
representacin de la ejecucin de los componentes accionados por los clicks generados por el
usuario. En retrospectiva, las opciones de enlace y la semntica de los componentes eran
totalmente adecuadas para el propsito y permanecieron estables durante los 10 aos de
evolucin del lenguaje. De hecho, ste es uno de los principales valores transmitidos a IFML.
WebML experiment una serie de extensiones a lo largo de los aos, con el objetivo de estar a la
par de las principales tendencias en las tecnologas de desarrollo de software:
Web Services y arquitecturas orientadas a servicios [11];
Integracin con procesos de negocios [5];
Personalizacin, adaptacin, context-aware, y movilidad [6]
Web semntica y WebServices semnticos [4];
Aplicaciones de internet robustas [3];
Aplicaciones basadas en bsquedas;
Soporte para la reutilizacin, multihilos y modularizacin.
Este documento resalta el eje principal del lenguaje WebML, describe rpidamente sus
extensiones principales y muestra el enfoque de trabajo en su plataforma de desarrollo
complementaria, WebRatio.

2. El lenguaje WebML original

La especificacin de una aplicacin Web en WebML [2] consiste en una serie de modelos
ortogonales: el modelo de datos de la aplicacin (una extensin del modelo Entidad-Relacin),
uno o ms modelos de hipertexto (por ejemplo, distintas site views para diferentes tipos de
usuarios), la definicin de las rutas de navegacin y la composicin de las pginas; y el modelo
de presentacin, al describir los aspectos visuales de las pginas. Nos enfocamos en el modelo
2

www.webratio.com

de hipertexto, ya que el modelo de datos no es innovador; el modelo de presentacin es adems

interesante, ya que permite vestir a un modelo de hipertexto para obtener pginas Web con el
layout deseado y el look&feel adecuado para cualquier tecnologa, pero ste aspecto no se
detallar en este documento. Un modelo de hipertexto consiste en una o ms site views, cada
una de ellas destinada a un rol de usuario o un dispositivo cliente. Una site view es una coleccin
de pginas (eventualmente agrupadas en reas para propsitos de modularizacin); el contenido
de las pginas esta expresado mediante componentes para la publicacin de datos (llamados
content units); la lgica de negocios ejecutada por la interaccin del usuario, en cambio, est
representada por secuencias de operation units, las cuales representan componentes para
modificar datos o para llevar a cabo acciones de negocios arbitrarias (por ejemplo, enviar un
email). Las content units y las operation units estn conectadas a travs de links, los mismos que
especifican el flujo de datos entre ellas y el flujo del proceso para operar el contenido de las
pginas y representar la lgica de negocios, como respuesta a los eventos de navegacin
generados por el usuario.
Considere por un momento un escenario muy simple: los usuarios navegan en una Home Page,
desde donde pueden moverse a una pgina que muestre una lista de productos bancarios.
Luego de escoger un prstamo, los usuarios acceden a una pgina con los detalles y un listado
de opciones para el producto elegido. La especificacin WebML para el hipertexto
anteriormente descrito se muestra en la Figura 1. La Home Page contiene nicamente contenido
esttico, el cual no est modelado. El link desde sta pgina se dirige hacia la pgina de Loans
Page detallados en una lista grficamente representada por una index unit llamada Loans Index.
Cuando el usuario seleccione un prstamo en la lista, debe abrirse la pgina Loan Page que
muestre los detalles del prstamo. En sta pgina, una data unit, llamada Loan Details, que
presenta las caractersticas del prstamo (por ejemplo, el nombre de la empresa, cantidad total
del prstamo y la tasa de inters), est conectada a otra index unit, llamada Proposals Index que
indica las opciones del plan de prstamo.

Home page

Loans page

OK

Chosen Loan page

Loans Index

Loan Details

Proposals
Index

Loan

Loan

LoanProposals
[LoanToProposal]

Enter New
Proposal

Create Prop

Connect

LoanProposal

LoanToProposal

Figure 1. Un hipertexto WebML para buscar y actualizar informacin.

Este ejemplo contiene units para la publicacin de contenidos (data e index units) que
muestran los atributos de una o ms instancias de una determinada entidad. De acuerdo con la
sintaxis, cada tipo de unit tiene un cono distintivo y el nombre de la entidad se encuentra
especificado al pie de la unit; debajo del nombre de la entidad, predicados (llamados selectors)
expresan las condiciones filtrando las instancias de la entidad que se van a mostrar. El ejemplo
3

www.webratio.com

de la Figura 1 muestra tambin units de contenido esttico, que despliegan un contenido

determinado que no proviene de los objetos del modelado de datos: ste es el caso de la entry
unit llamada Enter New Proposal, que se refiere a un formulario para ingresar datos. El modelo
de hipertexto explica tambin el uso de las operation units: el link de salida de la entry unit
llamada Enter New Proposal activa una secuencia formada por dos operation units: la create y la
connect unit, que crean respectivamente una instancia de la entidad Loan Proposal y la conectan
con una relacin de instancias hacia la entidad Loan.
WebML distingue links normales, de transporte y automticos. Los Links Normales (expresados
por flechas con lneas continuas) permiten la navegacin y representan los anclajes del hipertexto
o los botones de un formulario, mientras que los Links de Transporte (expresadas con flechas con
lneas punteadas) posibilitan nicamente el traspaso de parmetros y no se muestran como
widgets navegables. Los Links Automticos (expresado por un cono [A]) son links normales que
son activados automticamente por el sistema en la pgina cargada.
Ortogonalmente, los links se pueden clasificar en contextuales y no contextuales: los links
contextuales transfieren datos entres las units, por otra parte, los links no contextuales permiten
la navegacin entre las pginas, sin parmetros asociados. Las Operation units exigen, adems,
otros dos tipos de links: OK Links y KO Links, los cuales describen el curso de una accin
efectuada luego del xito o del error en la ejecucin de una operacin respectivamente. En el
ejemplo de la Figura 1:
El link desde la pgina de Home hacia la pgina de Loans no es contextual, ya que no
transporta informacin sino simplemente permite el cambio de una pgina.
El link desde la Unit Loan Index hacia la Unit Loan Details es normal y contextual porque
transporta la ID de un producto escogido en la Index Unit y mostrado en el Data Unit.
El link desde la data unit llamada Loan Details hacia la index unit de nombre Proposal es un
link de transporte: cuando el usuario entra a la pgina Chosen Loan, se muestra la unit Loan
Details, y al mismo tiempo, la ID del producto es transferido a la index unit Proposals, de tal
forma que el contenido de esta unit es computado y mostrado sin la intervencin del
usuario, no se visualiza ningn punto de anclaje de navegacin porque no es necesaria la
interaccin del usuario.
El link de salida de la unit Connect, llamado OK, indica que despus de la ejecucin exitosa
de la operacin se mostrar la pgina Choose Loan.
El contenido de una unit depende de sus links de entrada (inputs) y sus selectores locales. Por
ejemplo, la ID es utilizada para seleccionar las propuestas asociadas a un determinado producto
a travs del rol de relacin LoanToProposal; sta seleccin es expresada mediante por el selector
de condicin [LoanToProposal] debajo de la entidad de la unit. En general, las condiciones
lgicas arbitrarias pueden ser utilizadas, pero las expresiones conjuntivas se representan
fcilmente en los diagramas, donde cada conjuncin es un predicado sobre un atributo de una
entidad o un rol de relacin.
Como se menciona anteriormente, WebML est asociado a un algoritmo de computacin de
pginas derivado de la definicin formal de los modelos semnticos (basados en diagramas de
estado o statecharts [10]). El punto esencial es el algoritmo de computacin de pginas, el cual
describe cmo se determina el contenido de la pgina luego de un evento de navegacin
4

www.webratio.com

producido por el usuario. La computacin de pginas equivale a la evaluacin progresiva de

varias units de una pgina, empezando por los parmetros de entrada asociados a la navegacin
de un link. Este proceso implica la propagacin ordenada del valor de los parmetros de un link,
desde un conjunto de units inicial, cuyo contenido es computable cuando se accede a la pgina,
hasta otras units que esperan un input desde links automticos o de transporte que salen desde
units ya operadas de la pgina.
En WebML, las pginas son la unit fundamental para el procesamiento de datos. Una pgina
WebML puede contener mltiples units relacionadas entre s para formar un grfico complejo, y
a la que se puede acceder a travs de diferentes links, que provengan de otras pginas, de una
unit dentro de la misma o desde un operacin activada en la misma pgina o en otra.

3. Arquitecturas Orientadas a Servicios

La primera extensin de WebML, est dirigida hacia a las Arquitecturas Orientadas a Servicios
SOA [11]. La extensin para el desarrollo de procesos para SOA requiere la separacin del
diseo de la aplicacin del diseo del servicio; el primero se encarga del front-end de una
aplicacin de integracin Web dirigida hacia el usuario, mientras que el otro se enfoca en
proporcionar servicios bien definidos usables a travs de diferentes aplicaciones Web.
Las extensiones para el modelo de hipertexto cubren tanto la publicacin de Web Services
como su consumo. La publicacin de un Web Service se expresa como un nuevo contenedor
(llamado Service View), que es anlogo a una site view, pero contiene las especificaciones de los
servicios en lugar de pginas. La especificacin de un servicio est determinada por un Puerto, el
cual es un contenedor de las operaciones activadas por la invocacin del servicio.

(a)

(b)

Figura 4. Ejemplo de un modelo de hipertexto WebML con la invocacin de un servicio remoto.

www.webratio.com

La invocacin de un servicio y la respuesta a mensajes est soportada por componentes

especializados llamados Web Service units. Estas primitivas corresponden a las clases WSDL de
las operaciones de un Web Service y constan de:
Primitivas de publicacin de Web Service: Una Solicit unit (representa el punto final de un
Web Service), y una Response unit (provee la respuesta al finalizar la implementacin de un
Web Service); stas units se utilizan dentro de una service view como parte de la
especificacin de las operaciones realizadas por un Web Service.
Primitivas de invocacin de Web Services: La Request-response y la Request units; se usan
en site views y determinan la invocacin de Web Services remotos desde el front-end de una
aplicacin web.
Como ejemplo, la Figura 4 muestra un hipertexto que define un front-end para invocar un Web
Service (Figura 4a) y la especificacin del Web Service de un Port Container (Figura 4b).
En la Supply Area de la Figura 4a, el usuario puede acceder a la pgina SupplySearch, donde la
entry unit llamada SearchProducts habilita el input de palabras clave. El envo del formulario,
denotado por la navegacin del link de salida de la entry unit, provoca una operacin requestresponse (RemoteSearch) que construye el input XML solicitado por el servicio y recolecta la
respuesta XML enviada por sta. A partir de la respuesta del servicio, se crean un conjunto de
instancias de la entidad Product y se muestran al usuario por medio de la index unit Products en
la pgina Products; el usuario puede seguir navegando, por ejemplo, escogiendo uno de los
productos mostrados y mirando sus detalles.
La Figura 4b representa la service view que publica el servicio RemoteSearch invocado por el
hipertexto descrito anteriormente. El ProductManagementPort contiene la cadena de
operaciones que descifran el servicio: la secuencia empieza con la unit SearchSolicit que indica la
recepcin de un mensaje. A la llegada del mensaje, una operacin XML-out extrae, desde la base
de datos del proveedor del servicio, la lista de productos solicitados y la convierte en un
documento XML. El servicio termina con la unit SearchResponse, que devuelve el mensaje de
respuesta invocado1.

4. Procesos de Negocios en la Web

Con el tiempo, la Web se ha convertido en una popular plataforma de implementacin para
aplicaciones B2B, cuyo objetivo no es nicamente la navegacin de contenido, sino la ejecucin
de procesos de negocios dentro de las organizaciones y entre ellas. Las aplicaciones B2B Webbased requieren patrones de interaccin ms sofisticados que las aplicaciones Web tradicionales:
soporta un proceso estructurado que consta de actividades regidas por la ejecucin de
1

Los puertos de Servicio son un ejemplo de un concepto WebML que no tiene nada que ver con la interaccin del
usuario, muestra cmo el objetivo general del modelo (navegacin del hipertexto) se ha generalizado para cubrir
nuevos requerimientos. Cambios an mas radicales para utilizer los Web Services semnticos, como se ilustra a
continuacin.

www.webratio.com

restricciones, cumpliendo diferentes roles de usuarios, cuyo trabajo conjunto debe ser
coordinado. Pueden estar distribuidas en diferentes nodos de proceso, debido a las restricciones
empresariales, caractersticas del diseo o la existencia de sistemas heredados que vayan a ser
reutilizados. WebML y WebRatio han sido ampliados para cubrir los requerimientos de ste tipo
de aplicaciones [5], a travs de:
La integracin de guas especficas de diseo del workflow en el ciclo de vida del desarrollo;
Dos modelos diferentes para representar los procesos de negocio;
Nuevas primitivas de diseo (es decir, WebML units) para reforzar las excepciones de los
procesos de negocio;
Nuevas herramientas para el diseo de aplicaciones dirigidas por workflows: un modelador
de procesos y un traductor de procesos a esquemas de hipertexto.
El enfoque hacia el modelado basado en procesos utiliza la notacin BPMN para la descripcin
de los requisitos de negocio, y luego los mapea en pedazos de modelos de hipertexto que
describen la interaccin con el usuario de cada tarea que conforma el proceso de negocio. La
percepcin es que el proceso avanza mientras los actores navegan en el front-end, siempre y
cuando el modelo de hipertexto y los metadatos del proceso se mantengan sincronizados. Para
ello, nuevas primitivas son agregadas al modelo de hipertexto para especificar los lmites de las
actividades (llamadas activity areas) y la navegacin dependiente del proceso (llamados workflow
links). La Figura 6 muestra algunas de stas primitivas: Activity Areas representa los grupos de
pginas que implementan el front-end para ejecutar una actividad; links especializados describen
los efectos secundarios de la navegacin relacionados al workflow: actividades de inicio, de
finalizacin, de suspensin y de reanudacin. Los procesos distribuidos implementados en SOAs
se pueden obtener al combinar los workflows y las primitivas de los WebServices [5].

Activity Area1

Activity Area2

...

...
A

Figura 6. Dos activity areas y los eventos start y end que significan el comienzo y el final de una
actividad.

El clculo del tiempo de ejecucin del proceso se determina mediante un componente lgico de
control de procesos. ste, utiliza la informacin almacenada en los metadatos y los logs del
proceso para definir su estado actual y las transiciones de estado disponibles.
WebRatio soporta el modelado de procesos de negocio mediante:
Un editor de modelado de flujos para especificar los procesos de negocio en la notacin
BPMN.
Transformaciones de modelos que convierten un proceso de negocio en un esquema de
hipertexto WebML.
7

www.webratio.com

Los componentes y contenedores mencionados anteriormente para implementar los flujos.

Un generador de cdigo desde modelos BPMN, el cual crea prototipos partiendo de
procesos de negocio, sin la necesidad de utilizar el modelado WebML en lo absoluto.

5. Personalizacin del Usuario y Contextualizacin

WebML ha sido utilizado tambin para el diseo de aplicaciones Web flexibles y en funcin del
contexto, por ejemplo, aplicaciones que aprovechan el entorno y adaptan su comportamiento a
las condiciones y preferencias del usuario.[6].

Context sub-schema

Location

Cinema

MinLon
MaxLon
MinLat
MaxLon

Name
1:N 1:1 Address
Description
Picture

0:N
1:1

Device

Activity

CPU
InputDevice
Display
Memory
1:N

Name
Handycap
Description
0:N
Personalization
sub-schema

1:1

Comment
Rate
Title
Comment_Date

Movie

Basic user sub-schema

1:1

User

UserComment
0:N

0:N
0:N

UserName
Password
EMail

1:N

1:N

Group
GroupName

1:N

1:N

Module
ModuleID

0:N

Title
Year
Description
Official_Site

Figura 7. Tres modelos que representan al usuario, la personalizacin y los datos de contexto.

En estas aplicaciones, el diseo del proceso se amplia gracias a un paso preliminar que se ocupa
del modelado de los perfiles del usuario y de la informacin del contexto.
Los requerimientos del usuario y del contexto se describen a travs de 3 modelos diferentes que
complementan a los datos de la aplicacin (ver Figura 7):
El modelo de usuario describe los datos de los usuarios y derechos de acceso a los objetos
de dominio. En particular, la entidad User muestra un perfil bsico de usuario, la entidad
Group habilita los derechos de acceso para los grupos de usuarios, y la entidad Module
permite a los usuarios y a los grupos ser asignados, de forma selectiva, los accesos a
cualquier elemento de hipertexto (site views, pginas, units de contenido individual e incluso
links).
El modelo de personalizacin asocia las entidades de la aplicacin con la entidad User por
medio de relaciones que representan las preferencias del usuario o la pertenencia. Por
ejemplo, la relacin entre las entidades User y UserComment en la Figura 7 proporciona la
identificacin de los comentarios que el usuario ha hecho, y la relacin entre las entidades
User y Movie representa las preferencias del usuario sobre pelculas especficas.
8

www.webratio.com

El modelo de contexto incluye a entidades como Device, Location y Activity, que describen
propiedades del contexto relativas a la adaptabilidad. Las entidades de Contexto se
conectan a la entidad User para asociar cada usuario a su contexto personal.
Durante el diseo del hipertexto, la contextualizacin se puede relacionar con pginas
seleccionadas, y no necesariamente con toda la aplicacin. Las pginas de localizacin estn
etiquetadas con la letra C (por Context-aware) para distinguirlas de las pginas
convencionales. Las acciones de adaptabilidad estn agrupadas dentro de una context cloud que
debe ser ejecutada antes de la computacin de la pgina. Las Clouds generalmente incluyen
operaciones de WebML que leen los datos de personalizacin o contextualizacin y luego
adaptan el contenido de la pgina o modifican el flujo de la navegacin definido en el modelo.

Siteview
Conventional
Page 1

Context-aware Page

Conventional
Page 2

P: Context Parameter

Data Unit
OID: Object
Identifier

Source

Figura 8. Modelo que contiene una pgina context-aware etiquetada con una C y asociada a
una context cloud.

6. Web Semntica y Servicios

Tradicionalmente, el solicitante de un servicio y el proveedor se disean de forma conjunta y
luego se vinculan estrechamente cuando se crea la aplicacin. El campo de la Web Semntica y
los Servicios Semnticos provee paradigmas para el enriquecimiento semntico de las
descripciones sintcticas de los contenidos Web, sitios Web y servicios Web; por lo tanto, el
solicitante puede buscar, ya sea durante el diseo o la ejecucin y entre una variedad de
proveedores habilitados en la Web, el servicio que mejor se adapte a sus requerimientos. Este
vnculo flexible entre el solicitante y el proveedor permite la creacin de aplicaciones dinmicas y
en evolucin, a travs del descubrimiento de recursos automticos, la seleccin, la mediacin y la
invocacin.

www.webratio.com

Ampliamos WebML en [4] con el fin de generar, por encima de modelos convencionales (de:
procesos, datos, servicios e interfaces); un amplio nmero de descripciones semnticas
requeridas por el paradigma de la Web Semntica de una manera semi-automtica, integrando
as la produccin y el mantenimiento de la informacin semntica en el ciclo de generacin de la
aplicacin.
Definimos un proceso para el diseo de recursos semnticos al extender el proceso de diseo
SOA con dos tareas adicionales:
Importacin de la Ontologa, para reutilizar ontologas existentes con el objetivo de describir
el dominio de la aplicacin Web en desarrollo.
Anotacin Semntica, para especificar cmo las pginas o servicios de hipertexto se pueden
expresar utilizando conocimientos ontolgicos existentes.
Las primitivas del WebML bsico han sido ampliadas con componentes para la consulta y
navegacin ontolgica, por medio del poder expresivo de los lenguajes ontolgicos (inspirados
en SPARQL y RDF-S). Estas unidades permiten realizar consultas en las clases, instancias,
propiedades y valores; comprobando la existencia de objetos especficos; y verificando si existe
una relacin entre dos recursos. Otras units importan el contenido de una ontologa y devuelven
la descripcin RDF de una determinada parte del modelo ontolgico. Operaciones como el
aumento y la disminucin han sido agregadas tambin al ampliar los componentes de mapeo
XML2XML ya desarrollados en el contexto de SOAs.

7. Aplicaciones de Internet con Contenido Enriquecido

Debido a los requisitos cada vez ms complejos de las aplicaciones, las tecnologas Web actuales
comienzan a mostrar lmites en cuanto a usabilidad e interactividad. Las Aplicaciones de Internet
con Contenido Enriquecido (en ingls conocidas cmo RIA-Rich Internet Applications) se
presentan como una respuesta a stos inconvenientes; son una variante de los sistemas basados
en la Web que minimizan la transferencia de datos cliente-servidor y trasladan la interaccin y
presentacin de capas desde el servidor hacia el cliente. Mientras que en las aplicaciones Web
de uso intensivo de datos los contenidos se encuentran nicamente en el lado del servidor, como
un registro de bases de datos o como los objetos en la memoria principal relacionados a la
sesin del usuario, los contenidos RIAs pueden alojarse en el lado del cliente, como objetos de la
memoria principal con la misma visibilidad y duracin de la aplicacin cliente, o incluso, en
algunas tecnologas como, objetos persistentes del lado del cliente. Adems, en las RIAs es
posible establecer patrones de comunicacin ms poderosos, como mensajes push servidor-acliente y procesamiento de eventos asncronos. WebML ha sido ampliado con el objetivo de
reducir la brecha entre las metodologas de desarrollo Web y el paradigma RIA, aprovechando
sus caractersticas generales y de las aplicaciones Web tradicionales [3].
El proceso de diseo se profundiza al definir la asignacin hacia el lado del cliente o del
servidor de los elementos de datos (entidades y relaciones) y los componentes de hipertexto
(pginas, contenidos y units de operacin), y al establecer los patrones relevantes de
10

www.webratio.com

comunicacin cliente-servidor (que consisten en reglas para la notificacin de eventos, filtracin

de destinatarios y el procesamiento de eventos sincrnicos y asincrnicos).

Figura 9. Ejemplo de datos WebML con RIA activada (a) y un modelo de hipertexto (b).
En el modelo de contenidos, los contenidos, por consiguiente, son caracterizados por dos
diferentes dimensiones: su ubicacin, que puedes ser servidor o cliente, y su duracin, que
puede ser persistente o temporal. Por ejemplo, en la Figura 9 la entidad WishLists est
etiquetada como cliente (C) y temporal (cono vaco) para representar que los datos son
almacenados provisionalmente en el lado del cliente durante el tiempo de ejecucin de la
aplicacin.
De manera similar, el concepto de pgina en WebML se ha ampliado, al agregar pginas
clientes, que incorporan contenido o lgica controlados (la menos en una parte) por el cliente; su
contenido puede ser operado tanto del lado del cliente cmo del servidor, mientras que la
presentacin, visualizacin y manejo de eventos ocurren en lado del cliente. La Figura 9 muestra
una pgina cliente que contiene una index unit con datos obtenidos desde el servidor, pero
filtrados mediante predicados (price<=max) computados en el lado del cliente. Con el fin de
ajustarse de la manera ms flexible a la manera cmo las RIAs gestionan el contenido de las
pginas, la semntica de la operacin de las pginas ha sido tambin revisada.

8. El Interaction Flow Modeling Language

El estndar Interaction Flow Modeling Language (IFML) [12] es el resultado de la experiencia con
WebML, y se enfoca en su generalizacin para cualquier plataforma.
IFML ha sido diseado para expresar el contenido, la interaccin con el usuario y el
comportamiento del front-end de las aplicaciones que pertenecen a los siguientes dominios:
Aplicaciones Web tradicionales basadas en HTML+HTTP
RIAs soportadas por el estndar HTML 5.
Aplicaciones mviles
Aplicaciones cliente-servidor
Aplicaciones de escritorio
11

www.webratio.com

Interfaces usuario mquina (HMI) integradas para el control de las aplicaciones.

Aplicaciones multicanales y contextualizadas.
Cabe anotar que IFML no cubre el modelado de contenidos de la presentacin (como el layout,
el estilo y el look&feel) del front-end de una aplicacin y tampoco las especificaciones de
grficos bidimensionales y tridimensionales basados en computadoras, juegos de video y otras
aplicaciones de alta interactividad. IFML est orientado principalmente a aplicaciones de
negocios de uso intensivo de datos.
Las notaciones y los conceptos no varan mucho con respecto a los de WebML, excepto en
algunas terminologas. Los dos grandes avances con respecto a WebML son:
La definicin del concepto de evento como elemento de primera clase, para cubrir la gestin
del amplio espectro de tipos, eventos generados por los usuarios y tambin eventos
accionados por el sistema.
La eliminacin de cadenas de orquestacin de componentes de lgica de negocios, con el
objetivo de hacer que el lenguaje se enfoque de forma precisa en el diseo del front-end (y
delegar el modelado de la orquestacin a otro modelos, por ejemplo: secuencias de UML o
diagramas de actividad).
IFML ha sido adoptado como un estndar por la OMG en versin Beta en Marzo de 2013, y la
versin IFML ha sido finalizada en Marzo de 2014.

9. La plataforma de desarrollo WebRatio

La plataforma de desarrollo WebRatio ha tomado IFML como su notacin oficial. Desde el 2001,
WebRatio ha trabajado al lado de los gerentes de tecnologa, arquitectos web y desarrolladores
Java para apoyarlos en el desarrollo de nuevas aplicaciones empresariales, la actualizacin de las
existentes y la integracin con sistemas abiertos y legacy. Ms de 60 ingenieros de software en 3
diferentes pases, entusiastas del desarrollo Model-Driven, desarrollan WebRatio para usuarios
corporativos, principalmente de los sectores de finanzas, energas, transporte, gobierno y
minoristas, con grandes clientes como Acer (su sitio web mundial fue creado y es mantenido con
WebRatio), UniCredit, Interflora y otros2. WebRatio invierte el 22% de sus ingresos en la
investigacin y desarrollo y ha colaborado con proyectos cientficos en Europa, a menudo en
conjunto con el Politcnico de Miln. WebRatio ha sido designado Gartner Cool Vendor en el
2013.
La interfaz de usuario del editor IFML de WebRatio se muestra en la Figura 10. WebRatio genera
aplicaciones Web y mviles rpidas, seguras, escalables y robustas a partir de modelos IFML y
BPMN. La Plataforma WebRatio puede desplegar aplicaciones a travs de dispositivos Web y
mviles, con una interaccin del usuario personalizada y consistente. Crea cdigo optimizado ya
sea del lado del cliente como del lado del servidor. La Plataforma WebRatio es escalable,
confiable y cumple con las ms exigentes polticas de seguridad empresariales para desarrollar
2

Mire una lista completa de los clientes en: http://www.webratio.com/portal/content/en/customers

12

www.webratio.com

aplicaciones B2C y B2E (como portales, sitios de e-Commerce, Help Desk Ticketing Solutions,
Customers Self-Service Desks, Sistemas de administracin de suscripciones, aplicaciones
corporativas personalizadas, etc.). Las aplicaciones generadas cumplen con los estndares
HTML5, CSS3 y Java para adaptarse a los continuos cambios de cdigos y tecnologas. Las
aplicaciones Web construidas con la Plataforma WebRatio respetan los estndares Java/JSP2.0+
y pueden ser desplegadas en servidores On-Premises o en el Cloud (Pblico o Privado). Los
planes de deployment son totalmente personalizables.
La Plataforma WebRatio se integra con herramientas de Gestin del Ciclo de Vida (Atlassian
JIRA, IBM Rational Team Concert, etc.). Todas las fuentes del proyecto se comparten mediante
un servidor de trabajo colaborativo y un servidor de gestin de subversiones (CVS o Subversion).
Ayuda tambin a afrontar los desafos de las DevOps (Development & Operations) al facilitar la
colaboracin entre los equipos de desarrollo y operacin.
A travs de los componentes personalizados de WebRatio, es posible integrar a la aplicacin una
amplia variedad de sistemas y servicios como SAP, Tibco, IBM Mainframe y aplicaciones SaaS
como Salesforce.com, Dropbox etc. incluyendo cdigos personalizados heredados (legacy). La
Plataforma WebRatio facilita la integracin de los sistemas de TICs con soluciones externas,
facilitando la invocacin y publicacin de Web Services (REST, SOAP), as como con servicios de
login Single-Sign-On, para compartir contenido, para la gestin de contactos, y Redes Sociales
como Facebook, Twitter, LinkedIn, G+, etc.

Figura 10. Captura de pantalla WebRatio que muestra un extracto de un diagram IFML.

13

www.webratio.com

10. Conclusiones
A travs del presente documento presentamos el lenguaje IFML y la plataforma de desarrollo
model-driven, WebRatio, y el recorrido que inicia con WebML hacia la estandarizacin de IFML
en la OMG. El estndar y la herramienta son, en la actualidad, ampliamente aceptados en
grandes industrias de Europa y Estados Unidos, as como en Latinoamrica y Asia. El enfoque ha
ganado una amplia aceptacin gracias a las pocas barreras de aprendizaje para los nuevos
tcnicos y la disponibilidad de herramientas de soporte apropiadas. Las destrezas bsicas de
modelado son enseadas generalmente en 6 horas de capacitacin, y el programa completo
para profesionales certificados requiere un total de 8 das. Estadsticas en el campo estiman que
son necesarios 2 o 3 meses para alcanzar una productividad de nivel industrial. Una vez que se
logra este nivel, se garantiza la alta eficiencia en el proceso de desarrollo con una mejora de
hasta un 60% en el esfuerzo de desarrollo y de hasta un 80% de ahorros en las etapas de
mantenimiento y evolucin, gracias a la generacin automtica del cdigo y la posibilidad de
trabajar desde el nivel de modelado [2].

Referencias WebML
[1] R. Acerbis, A. Bongio, M. Brambilla, S. Butti, S. Ceri, P. Fraternali. Web Applications Design
and Development with WebML and WebRatio 5.0. TOOLS 2008, 392-411 and
http://www.webratio.com/.
[2] R. Acerbis, A. Bongio, M. Brambilla, M. Tisi, S. Ceri, E. Tosetti. Developing eBusiness
Solutions with a Model Driven Approach: The Case of Acer EMEA. 7th International
Conference on Web Engineering, ICWE 2007, Como, Italy. Springer LNCS 4607, ISBN 978-3540-73596-0, pp. 539-544.
[3] A. Bozzon, S. Comai, P. Fraternali, G. Toffetti Carughi. Conceptual Modeling and Code
Generation for Rich Internet Applications. International Conference on Web Engineering,
Springer, 2006, pp. 353-360.
[4] M. Brambilla, I, Celino, S. Ceri, D. Cerizza, E. Della Valle. Model-Driven Design and
Development of Semantic Web Service Applications. ACM TOIT, 8:1, 2008.
[5] M. Brambilla, S. Ceri, P. Fraternali, I. Manolescu. Process Modeling in Web Applications.
ACM TOSEM, 15:4, 2006.
[6] S. Ceri, F. Daniel, M. Matera, F. Facca. Model-driven Development of Context-Aware Web
Applications, ACM TOIT, 7:1, 2007.
[7] S. Ceri, P. Fraternali, A. Bongio. Web Modeling Language (WebML): a modeling language
for designing Web sites. WWW9 / Computer Networks 33, 2000.
[8] S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera. Designing Data-Intensive
Web Applications. Morgan Kaufmann, 2002.
[9] S. Ceri, M. Matera, F. Rizzo, V. Demald. Designing Data-Intensive Web Applications for
Content Accessibility using Web Marts. Communications of ACM 50: 4, 55-61, 2007.
[10] S. Comai, P. Fraternali. A Semantic Model for Specifying Data-Intensive Web Applications
Using WebML. Semantic Web Workshop, Stanford, USA, July 2001.
[11] I. Manolescu, M. Brambilla, S. Ceri, S. Comai, P. Fraternali. Model-Driven Design and
Deployment of Service-Enabled Web Applications. ACM TOIT, 5:3, 2005.
[12] Object Management Group, M. Brambilla, P. Fraternali et al. The Interaction Flow Modeling
Language (IFML) 1.0. March 2014. www.ifml.org
14