La interfaz de programación de YoProgramo

Cuando te encuentras por primera vez con la aplicación YoProgramo puedes notar que esta compuesta por dos zonas visualmente diferentes. Una es el área de código la cual se encuentra del lado izquierdo y otra es el área de dibujo que se encuentra del lado derecho.

Área de código de YoProgramo.
Área de dibujo de YoProgramo.

Área de código

Dentro del área de código es donde vamos a escribir las instrucciones que componen nuestro programa.

Nuestro código va a estar organizado en tres bloques principales, INICIO, CÁLCULOS y FUNCIONES, que se ven representados en la interfaz con los botones que se encuentran en la parte superior del área de código.

Panel superior con los botones INICIO, CÁLCULOS y FUNCIONES.

En el bloque INICIO vamos a colocar todo el código que sea necesario para crear objetos e iniciar nuestra aplicación, básicamente en este bloque se colocan todas las instrucciones que queremos que se realicen una sola vez y que definen nuestro programa.

En el bloque CÁLCULOS se coloca todo el código que queremos que se ejecute cada vez que se realice una acción dentro de nuestro programa, esta parte se encarga de manejar la interacción del usuario con la aplicación.

Y por último en el bloque FUNCIONES vamos a definir todas aquellas funciones que nos sean de utilidad para crear y configurar objetos, de tal manera que sean usadas desde el bloque INICIO, así como también irán todas las funciones que permitan cambiar e interactuar con la aplicación, las cuales usaremos desde el bloque CÁLCULOS. En esencia aquí definimos elementos reutilizables que nos van a permitir hacer programas más complejos de forma más organizada.

En la parte inferior del área de código tenemos un grupo de botones con diferentes acciones, que se detallan a continuación.

Panel inferior con diversos botones.

El botón Crear al ser presionado muestra una lista de instrucciones que podemos utilizar para crear objetos para nuestro programa. Por ejemplo nos muestra cómo agregar un botón o un círculo.

El botón Asignar presenta una lista de instrucciones que nos permiten asignar diversos atributos a los objetos creados. Por ejemplo nos muestra cómo asignar un color o una etiqueta a un objeto.

El botón Mover cuando se presiona muestra una lista de instrucciones que nos van a permitir asignar acciones para mover objetos de nuestro programa. Por ejemplo nos muestra cómo mover un objeto a partir de un incremento relativo en la posición en la que se encuentra.

El botón Deshacer al ser presionado deshace la ultima acción realizada.

El botón Leer permite leer el contenido de un programa creado con YoProgramo, el cual fue guardado previamente como un archivo de texto.

El botón Ejecutar se encarga de realizar cada una de las instrucciones que se encuentran en el bloque de INICIO, construyendo todos los elementos necesarios para la ejecución de nuestro programa. Básicamente inicia el ciclo de ejecución del programa descrito en los tres diferentes bloques.

El botón Guardar permite guardar un programa de YoProgramo como un archivo de texto para poder compartir el programa o simplemente para no perder los cambios que hayas realizado.

Área de dibujo

El área de dibujo es simplemente un espacio donde se muestran los objetos que se construyen en nuestro programa. Presenta un sistema de coordenadas cartesianas para referenciar y colocar los objetos en la pantalla. Si quieres saber cómo cambiar algunos atributos del área de dibujo puedes revisar en bloque informativo: ¿Cómo modificar el area de dibujo?. En está área es donde la interacción entre el usuario y el programa se realiza, ya sea pulsando sobre los botones que aparecen o introduciendo valores en campos de texto.

Ejemplo interactivo

Aquí tienes un ejemplo muy sencillo de un programa en YoProgramo, que muestra dos botones, uno de color verde que dice Presioname y otro de color gris con el valor de 0, de tal manera que al presionar el botón verde se incrementa en 1 el valor mostrado por en el botón gris.

Aunque es un ejemplo simple, puedes observar el uso de los tres bloque del programa, INICIO, CÁLCULOS y FUNCIONES.

Notas

Debes recordar que siempre que realices cambios en cualquiera de los bloques principales, INICIO, CÁLCULOS o FUNCIONES, debes presionar el botón Ejecutar para ver los cambios en acción, de lo contrario estarás viendo la ejecución del código anterior.