El paradigma de la programacin visual

Eugenio Jacobo Hernndez Valdelamar & Humberto Manuel Uribe Len

Fundacin Arturo Rosenblueth. Insurgentes Sur 670-3. Colonia del Valle.
CP 03100. Mxico, D.F, Mxico.
jack@mail.rosenblueth.mx
jack_hv@yahoo.com
humbertouribe@yahoo.com

Resumen. Por mucho tiempo los desarrolladores de software han hecho su

trabajo usando lenguajes textuales de programacin, pero eso est a punto de
cambiar. en este artculo se presenta el paradigma de la programacin visual y
los lenguajes visuales de programacin como una alternativa para mejorar la
produccin de aplicaciones de software.

Palabras clave: programacin visual, lenguajes de programacin visual.

1. Qu es la programacin visual?

El concepto de programacin visual es un poco confuso ya que actualmente se le

considera programacin visual a los lenguajes de programacin textual que tienen una
interfaz grfica para poder visualizar lo que uno esta desarrollando. Este concepto en
programacin visual es errneo ya que este es aquel que por medio de iconos puedes ir
creando programas sin tener un lenguaje textual atrs de el.
La programacin visual (visual programming) se refiere al desarrollo de software
donde las notaciones grficas y los componentes de software manipulables
interactivamente son usados principalmente para definir y componer programas.
La programacin visual se define comnmente como el uso de expresiones visuales
(tales como grficos, animacin o iconos) en el proceso de la programacin, pueden
ser utilizadas para formar la sintaxis de los nuevos lenguajes de programacin visuales
que conducen a los nuevos paradigmas tales como programacin por la demostracin;
o pueden ser utilizadas en las presentaciones grficas del comportamiento o de la
estructura de un programa.
El objetivo de la programacin visual es mejorar la comprensin de los programas y
simplificar la programacin en s. Ms all, la programacin visual deber fomentar a
los usuarios finales a construir sus propios programas, que de otra forma deben ser
escritos por programadores profesionales.
2. Lenguajes de programacin visual

La programacin visual se basa en el uso de lenguajes visuales (LVP). Un lenguaje de

programacin visual puede definirse como:

Un lenguaje de programacin que usa una representacin visual (tal como

grficos, dibujos, animaciones o iconos, parcial o completamente).
Un lenguaje visual manipula informacin visual o soporta interaccin
visual, o permite programar con expresiones visuales.
Un lenguaje visual es un conjunto de arreglos espaciales de smbolos de
texto y grficos con una interpretacin semntica que es usada para
comunicar acciones en un ambiente.
Los LVPs son lenguajes de programacin donde se usan tcnicas visuales
para expresar relaciones o transformaciones en la informacin.

Por ejemplo, un objeto visual que representa un proceso de adicin (suma) toma dos
entradas y produce una salida. En un LVP tpico de flujo de datos, el usuario
simplemente selecciona un valor de entrada y selecciona un puerto de entrada al objeto
para establecer una relacin entre los datos y el proceso.
El gnesis de los LPV vino en 1975 con la publicacin de David Canfield Smith
Pygmalion: A Creative Programming Environment''. Por ejemplo, Pygmalion
incorpor un paradigma de programacin basado en iconos en el cual los objetos
creados podan ser modificados, y conectados juntos, con las caractersticas definidas
para realizar cmputos.
Muchos LPV modernos emplean un acercamiento basado en iconos como el de
Smith. Pygmalion tambin hizo uso el concepto de programacin por ejemplo, en
donde el usuario muestra al sistema cmo realizar una tarea en un caso especfico y el
sistema utiliza esta informacin para generar un programa el cul realiza la tarea en
casos generales.
Por qu insistimos en comunicarnos con las computadoras usando lenguajes de
programacin textuales? No sera mejor comunicarnos con las computadoras usando
una representacin que aproveche nuestra naturaleza visual?
Obviamente, los autores de los lenguajes de programacin visuales (LPV) discuten
que la respuesta a ambas preguntas es s. Las principales motivaciones para la mayora
de la investigacin en LPV son:

Mucha gente piensa y recuerda cosas en trminos de cuadros.

Ella se relaciona con el mundo de una manera intrnsecamente grfica y
utiliza imgenes como componente primario del pensamiento creativo.
 Adems, los lenguajes de programacin textuales han demostrado ser
algo difciles para que mucha gente creativa e inteligente aprenda utilizar
con eficacia.
La reduccin o eliminacin de la necesidad de traducir ideas visuales en
representaciones textuales puede ayudar a atenuar este problema de la
curva del aprendizaje.
Adems, una variedad de aplicaciones, incluyendo la visualizacin
cientfica y la simulacin interactiva se prestan bien a los mtodos
visuales de desarrollo.
Un LPV NO es un ambiente integrado de desarrollo (o IDE). La diferencia es que
un VPL debe ser capaz de llevar a cabo todas las tareas de programacin de forma
visual, sin tener que recurrir a la representacin textual.

3. Clasificacin de los lenguajes visuales

Los lenguajes visuales se dividen en las siguientes categoras:

Lenguajes puramente visuales
Sistemas hbridos de texto y elementos visuales
Sistema de programacin por ejemplo (Programming-by-example)
Sistemas orientados a restricciones (Constraint-oriented systems)
Sistemas basados en formas (entradas tipo hoja de clculo animada)

Aunque los LPVs comunican la informacin de una manera ms visual que los
lenguajes textuales tradicionales, el texto an tiene su lugar en la programacin visual.
Hay 3 reas que ilustran la superioridad del texto en algunas situaciones:

documentacin,
asignar nombres para distinguir entre elementos de un mismo tipo, y
expresar conceptos bien conocidos y compactos que son inherentemente
textuales (p.ej. frmulas algebraicas)
 Fig. 1. Ejemplos de herramientas de programacin visual

4. Principales conceptos de los lenguajes visuales

Los principales conceptos relativos a los lenguajes visuales son:

Abstraccin procedural (descomposicin del programa en mdulos)

Abstraccin de datos, consiste en encapsular los tipos de datos abstractos
definidos por el usuario, permitiendo su acceso solo por medio de operaciones
definidas.
Sistema de tipos
Control de flujo
Estructuras de control (seleccin, iteracin)
Formatos y estndares. Se refiere a la definicin de reglas que permitan
especificar los elementos del LPV (p.ej. GXL, XGMML, GML)
Gramticas de lenguajes visuales. Los lenguajes visuales se especifican por
una tripleta (ID,G,B), donde :
ID es el diccionario de iconos, el cual es un conjunto de iconos
generalizados, cada uno representado por un par (Xm,Xi) , donde Xm es
la parte lgica (significado) y Xi es la parte fsica (imagen).
 G es una gramtica que especifica como pueden construirse objetos
compuestos a partir de iconos simples usando operadores de relacin
espaciales.
B es una base de conocimiento de dominio especfico, la cual contiene la
informacin necesaria para construir el significado de la sentencia visual
(nombres de eventos, relaciones, referencias a los objetos, etc).

5. Caso de estudio: Implementacin de una neurona artificial con

Sanscript

Para demostrar el uso de un LPV, se realiz el desarrollo de una neurona artificial (NA)
usando la herramienta Sanscript. Cabe mencionar que Sanscript implementa las
siguientes abstracciones fundamentales:

Funciones, que son los bloques con los que se construyen las aplicaciones en
Sanscript. Una funcin tiene entradas, ejecuta un clculo y produce salidas.
Flujogramas (flowgrams), que son diagramas de funciones ligadas con
funciones donde se especifica una accin (equivalentes al un programa
textual, solo que visual).
Conexiones, que son los vnculos (relaciones) entre funciones
Aplicaciones, que son programas que se ejecutan fuera de la herramienta

Fig. 2. Elementos de programacin de Sanscript

Una neurona artificial consta bsicamente de 4 partes, que son:

Las entradas
Los pesos
Una funcin que calcula la suma ponderada de los pesos y las entradas
La funcin de transferencia
 La neurona artificial implementada solo tiene 2 entradas y una salida, pero el modelo
puede ampliarse fcilmente.

Fig. 3. "Flujograma" del modelo de una neurona artificial

Cada una de estas partes se implement de la siguiente manera:

1. Lista de entradas. Debido a que podemos tener N entradas en la neurona lo

ms conveniente es tener una lista para que tengamos las entradas en una sola
estructura de datos y poder obtener de esa estructura los valores para realizar
la suma de los pesos por las entradas.
2. Lista de pesos. Como debe tenerse la misma cantidad de entradas que de pesos
para poder realizar la suma ponderada, hay que contar con una estructura de
datos igual a la de las entradas, pero ahora con los pesos.

Fig. 4. Estructuras para las entradas y pesos de la NA

 3. Suma Ponderada. Para hacer la suma ponderada tenemos que tener la longitud
de nuestras listas para saber cuantas veces vamos a realizar el ciclo, como las
dos listas son de la misma longitud solamente hacemos este paso con la lista
de entradas.

Fig. 5. Integracin de las listas de pesos al mdulo de suma ponderada

El iterador obtiene de la lista de entradas y de salidas el valor en la posicin N de las

listas que son f, g, los multiplica f * g y los va sumando. El ciclo termina cuando ya no
hay elementos en la lista. En la implementacin del caso del ejemplo hay 2 elementos
en cada una de las listas, pero se pueden tener N elementos.

Fig. 6. Implementacin de la operacin de suma ponderada

4. Funcin de Transferencia. La funcin de transferencia hace la comparacin

entre el resultado del iterador (suma ponderada) y el umbral de la neurona; si
el resultado del ciclo es mayor al del umbral, la neurona dispara; si el
resultado del ciclo es menor entonces la neurona se inhibe (manda como valor
un 0).
 Fig. 7. El componente de funcin de transferencia y su implementacin

As, al integrar una red de neuronas artificiales, las salidas (axones) de cada una de
las neuronas, se convertir en entradas de otras.

Fig. 8. Comparacin entre el diagrama de la NA y el flujograma

6. Conclusiones.

Algunas de las perspectivas en el desarrollo de la programacin visual son:

Complemento de IDEs (p.ej. Visual Age)
Construccin de aplicaciones sobre una plataforma nativa (ej. Sanscript)
Generacin de cdigo (de la representacin visual a un lenguaje textual)
 Fusin con lenguajes de modelado (UML + SDL)
Integracin de recursos multimedia a las aplicaciones (PeriProducer,
StagecastCreator)
Creacin de sistemas de agentes (AgentSheet)

El desarrollo de lenguajes visuales de programacin implicar que los codificadores

pierdan su hegemona en el desarrollo de software, lo cual es sano si se toma en cuenta
que tener un experto en la sintaxis de un lenguaje y en el uso de herramientas de
desarrollo, dista mucho de que sea capaz de resolver problemas mediante el uso de
recursos de cmputo y sistemas informticos. As que los verdaderos programadores
pueden estar tranquilos, pues podrn mejorar su efectividad y productividad con
herramientas que les permitan mejorar la proyeccin de sus modelos mentales y
soluciones a problemas dados (herramientas de 5a. generacin [1]).
Que los usuarios incursionen en el desarrollo es sano pues por fin comprendern que
los requerimientos inexactos o ambiguos son un factor que fomenta los dolores de
cabeza y el atraso de los proyectos, adems de que al obtener cierta independencia,
mejorar el nivel de comunicacin con desarrolladores profesionales.
Vale la pena responder por adelantado a la pregunta de muchos programadores:
"me sirven los conocimientos que ya tengo o hay que empezar de nuevo?". Manejar
lenguajes visuales implica para empezar, conocer la sintaxis del lenguaje (esto es una
constante), pero a partir de este punto los beneficios son muchos:

se cuenta con una herramienta de integracin de componentes robusta

la representacin de los mdulos, subsistemas y sistemas es comprensible para
todos los miembros del equipo
las miniespecificaciones de diseo se fusionan con la implementacin
dependiendo de la herramienta es posible reusar componentes de plataformas
disponibles en el mercado
el aprendizaje de tcnicas de programacin es ms rpido y claro

Este nuevo paradigma es un medio excelente para ensear a programar y resolver

problemas, por lo que se sugiere su adopcin en los niveles formativos de educacin.

Referencias

[1] The myth of code-centricity. Jack Harich.

http://www.javaworld.com/javaworld/jw-08-2001/jw-0824-myth_p.html

[2] Visual Programming

http://www-lsi.upc.es/~rbaeza/cursos/vp/todo.html

[3] Visual Programming Languages

http://www.cs.washington.edu/homes/jpower/vpl/vpl_home.html

[4] Visual Programming - Foundations and Applications

http://www.swe.uni-linz.ac.at/research/visual_programming.html

[5] International Telecommunication Union recommendation Z.109 SDL

combined with UML
http://www.itu.int/itu-doc/itu-t/rec/z/index.html

[6] OMG RFC Action semantics for the UML" 11/1999

http://www.omg.org

[7] OMG RFC UML 2.0 superstructure 9/2000

http://www.omg.org