Qilqay Ayuda

QILQAY: LIBRERÍA PARA APRENDIZAJE DE PROGRAMACIÓN UTILIZANDO COMPUTACIÓN GRÁFICA.

TABLA DE CONTENIDO

Unidad 1: INICIAR LA HERRAMIENTA QILQAY

  • CREAR NUEVO PROYECTO
  • EDITAR PROYECTO
  • GUARDAR PROYECTO
  • ABRIR PROYECTO
  • CERRAR PROYECTO

Unidad 2: FUNCIONAMIENTO DE LA HERRAMIENTA QILQAY

  • FUNCIONES DE QILQAY
  • LINE
  • CIRCLE
  • RECTANGLE
  • OVAL
  • ARC
  • COLOR
  • CREACION DE VARIABLES Y FUNCIONES
    • Que es una variable
    • Que es una función
  • INSTRUCCIONES DE ENTRADA DE DATOS

————————-

  • CREACIÓN DE CICLOS
    • Que es un ciclo
  • ESTRUCTURA WHILE
  • CREACIÓN DE SENTENCIAS DE DECISIÓN
    • Que son las sentencias de decisión
  • ESTRUCTURA DE CONTROL IF

Unidad 3: MANEJO DE LA INTERFAZ GRAFICA DE QILQAY

  • LA GRILLA
  • FUNCIONES DE LA INTERFAZ
  • UBICACIÓN DE UN PUNTO (X, Y) EN LA INTERFAZ
  • AYUDA SOBRE QILQAY
  • HELP
  • ABOUT

1. INTRODUCCION

QILGAY es una herramienta que se enlaza con el IDE de QT Creator, el cual es utilizado para solucionar problemas geométricos simples que le permiten abstraer los fundamentos en la lógica de programación necesaria. Esta herramienta hace parte de la primera fase del proyecto de investigación “ENSEÑANZA DE LA LÓGICA DE PROGRAMACIÓN UTILIZANDO COMPUTACIÓN GRÁFICA”, el cual tiene como objetivo principal “Diseñar la metodología que permita un mejor aprendizaje en niveles básicos de programación a los estudiantes de primer semestre de Ingeniería de Sistemas de la Universidad de Nariño”.

INICIAR LA HERRAMIENTA QILQAY

En esta unidad, se inicia por primera vez QILQAY en el IDE QT Creator, para ello se tiene las siguientes opciones después de abrir QT Creator:

CREAR NUEVO PROYECTO:

Para la creación de un nuevo proyecto, se tiene dos opciones.

1. Se selecciona New Project.

new

2. Se selecciona File > New file or proyect (Ctrl + N).

dos

Luego de elegir cualquiera de estas dos opciones para crear un nuevo proyecto, se debe elegir other proyect > la herramienta QILQAY > Choose.

tres

Se elige un nombre para el primer proyecto que se realizara, por ejemplo “Prueba” > Next. Este proyecto se guardara por defecto en la ruta del directorio Documentos.

cuatro

EDITAR PROYECTO

Al finalizar la creación del proyecto; se logra ver como del mismo se despliegan paquetes; uno de ellos es Source, donde se encuentra el archivo “prueba”, con la extensión .cpp, en el cual se desarrolla el código para las gráficas.

El código que se vaya a desarrollar, se realiza dentro de PROGRAM START y antes de END, justo donde se señala la línea roja vertical.

cinco

GUARDAR PROYECTO

El proyecto se guarda al ejecutar dos diferentes opciones:

  1. Con el comando CRTL + S.

En la barra de herramientas, File > Save “Prueba.cppa”.

treintados

También el proyecto se guarda al ejecutar el código de dos diferentes maneras:

  1. Con el comando CTRL + R.
  2. En la barra de herramientas, Build > Run.

La siguiente imagen describe la segunda opción para ejecutar el proyecto.

doce

ABRIR PROYECTO

Para abrir proyecto que ya han sido creado antes, se selecciona la opción File > Open File or Proyect, de la siguiente manera:

treintayocho

Se selecciona la ruta en donde se encuentra guardado el proyecto y se eligen todos sus paquetes para luego abrir. Así:

treintaynueve

CERRAR PROYECTO

Para cerrar un proyecto en QILQAY, se elige la carpeta principal y presionando Click derecho, en las opciones que se despliegan se encuentra Close Project “nombre_proyecto” y se selecciona. De esta manera:

cuarenta

2. FUNCIONAMIENTO DE LA HERRAMIENTA QILQAY

FUNCIONES DE QILQAY

La herramienta QILQAY proporciona las siguientes funciones, para el desarrollo de figuras.

LINE: Esta función permite dibujar una línea en la grilla, con los siguientes parámetros:

line (x1, y1, x2, y2);

Dónde:

X1, Y1 son el punto inicial de la línea

X2, Y2 son el punto final de esta.

Ejemplo: Se quiere realizar una línea con los siguientes datos x1=10, y2=10, x2=100, y2=10.

seis

El resultado obtenido con la anterior instrucción es el siguiente:

quince

CIRCLE: Esta función permite dibujar un círculo en la grilla, con los siguientes parámetros:

Circle (x, y, r);

Dónde:

X, Y es el punto central del círculo.

R es el radio de la circunferencia.

Ejemplo: Se quiere realizar un circulo con los siguientes datos x=300, y=200, r =50.

siete

El resultado obtenido con la anterior instrucción es el siguiente:

dieciseis

RECTANGLE: Esta función permite dibujar un rectángulo en la grilla, con los siguientes parámetros:

rectangle (x1, y1, x2, y2);

Dónde:

X1, Y1 son el punto inicial del rectángulo, que es la esquina superior izquierda.

X2, Y2 son el punto final del rectángulo, que es la esquina inferior derecha.

Ejemplo: Se quiere realizar un rectángulo con los siguientes datos x1=20, y2=20, x2=100, y2=100.

ocho

El resultado obtenido con la anterior instrucción es el siguiente:

diecisiete

OVAL: Esta función permite dibujar una ovalo en la grilla, con los siguientes parámetros:

oval (x, y, rh, rv);

Dónde:

X, Y son el punto central del ovalo.

Rh es el radio horizontal del ovalo. (Ancho).

Rv es el radio vertical del ovalo. (Alto).

Ejemplo: Se quiere realizar un ovalo con los siguientes datos x=300, y=200, rh =200, rv=20.

nueve

El resultado obtenido con la anterior instrucción es el siguiente:

dieziocho

ARC: Esta función permite dibujar un arco en la grilla, con los siguientes parámetros:

arc (x, y, rh, rv, ai, af);

Dónde:

X, Y son el punto central del arco.

Rh es el radio horizontal del arco. (Ancho).

Rv es el radio vertical del arco. (Alto).

Ai es el ángulo desde donde va a iniciar el arco.

Af es el ángulo donde va a terminar el arco.

Tener en cuenta que se referencia en un plano por lo tanto va de 0 a 360.

Ejemplo: Se quiere realizar un arco con los siguientes datos x=300, y=200, rh=100, rv=50, ai=0, af=180.

diez

El resultado obtenido con la anterior instrucción es el siguiente:

diecinueve

COLOR: Esta función permite usar 5 colores diferentes para la figura que se realice, su parámetro es de tipo entero.

Los colores están relacionados con números así:

0 -> NEGRO

1 -> ROJO

2 -> VERDE

3 -> AZUL

4 -> AMARILLO

Ejemplo: Se quiere realizar un rectángulo de color amarillo, un círculo de color azul, un triángulo de color verde, un pentágono de color negro, un arco de color rojo.

La instrucción para declarar el color se hace antes de la línea de código que se desea pintar, de esta manera:

color (2);

rectangle (10, 10,100,100);

Un ejemplo del código a desarrollar para hacer uso de la función color es:

once

El resultado obtenido con la anterior instrucción es el siguiente:

veinte

CREACIÓN DE VARIABLES Y FUNCIONES CON PARÁMETROS

Que es una variable

En programación las “variables” son espacios reservados en la memoria que, como su nombre indica, pueden cambiar de contenido a lo largo de la ejecución de un programa. Una variable corresponde a un área reservada en la memoria principal del ordenador.

Una variable puede ser del tipo booleano, entero, decimal, caracter, cadena de texto, arreglo, matriz. Hay diferentes formas de declarar una variable dependiendo del lenguaje de programación, como se usa c++, la declaración es la siguiente:

(tipo_de_dato) (nombre_de_la_variable)

Por ejemplo:

int numero;

Otra manera de declarar variables es dándoles valores iniciales, la declaración es la siguiente:

(tipo_de_dato) (nombre_de_la_variable) = (valor)

Por ejemplo:

int numero=10;

También es posible declarar variables dentro de un bucle, las variables declaradas dentro de un bucle, serán accesibles solo desde el propio bucle, es decir tendrán un ámbito local para el bucle.

Por ejemplo:

For ( int i = 0;i < 100; i ++)

En este caso el bucle for declara la variable de nombre ” i “.

Que es una función

Las funciones son un conjunto de instrucciones que realizan una tarea específica. En general toman ciertos valores de entrada, llamados parámetros y proporcionan un valor de salida o valor de retorno; aunque en C++, tanto unos como el otro son opcionales y pueden no existir.

Los parámetros de una función son los valores que esta recibe por parte del código que la llama. En la declaración de la función se escriben después del nombre entre paréntesis indicándose el tipo de cada uno y su nombre. Un ejemplo de función es :

Int dividir (int dividendo, int divisor){

Instrucciones

}

Cuando se llama a la función se recibe los valores que se enviaran por parámetro.

Dividir (8,4);

De esta manera se envía los parámetros 8 y 4 a dividendo y divisor respectivamente para luego realizar las instrucciones determinadas.

Un ejemplo de la creación, uso de variables y funciones en QILQAY es:

trece

El resultado obtenido con la anterior instrucción es el siguiente:

veintiuno

CREACION DE CICLOS

Que es un ciclo

Generalmente un ciclo o bucle es utilizado para hacer una acción repetida sin tener que escribir varias veces el mismo código, lo que ahorra tiempo, deja el código más claro y facilita su modificación en el futuro. La estructura de que se usara para el aprendizaje de ciclos en QILQAY es la estructura while.

Los ciclos en esta herramienta se los puede usar para graficar diferentes figuras haciendo que cambien algunos parámetros, por ejemplo graficar roles haciendo que se repitan gradualmente los círculos mientras se cumpla la condición.

ESTRUCTURA WHILE:

Es una estructura cuyo propósito es repetir un “bloque de código” mientras una condición se mantenga verdadera.

La sintaxis es la siguiente:

while ( condición ) {

Instrucciones

}

El siguiente diagrama explica el funcionamiento del bucle while.

veintidos

Un Ejemplo de bucle while en la herramienta QILQAY es:

veinticuatro

El resultado obtenido con la anterior instrucción es el siguiente:

veintitres

INSTRUCCIONES DE ENTRADA DE DATOS

—————-

CREACIÓN DE SENTENCIAS DE DECISIÓN

Que son las sentencias de decisión.

Las sentencias de decisiA?n o tambiAi??n llamadas de CONTROL DE FLUJO son estructuras de control que realizan una pregunta la cual retorna verdadero o falso (evalA?a una condiciA?n) y selecciona la siguiente instrucciA?n a ejecutar dependiendo la respuesta o resultado.

ESTRUCTURA DE CONTROL IF

If significa Si (condiciA?n), seguido por else, que significa: de otro modo.

La instrucciA?nAi??ifAi??es la mA?s utilizada para construir estructuras de control de flujo. Su funcionamiento consiste en evaluar una condiciA?n, si es verdadera ejecuta un cA?digo, si es falsa, ejecuta otro cA?digo o continua con la ejecuciA?n del resto del programa.

La sintaxis o escritura para declarar esta instrucciA?n es:

If (condiciA?n)

{

Instrucciones

}else

{

Instrucciones

}

Un ejemplo de sentencia if es:

If (numero ==0)Ai?? //la condiciA?n indica que si el nA?mero a evaluar es igual a cero.

{

InstrucciA?n a realizar

}

Else

{

If (numero > 0) // La condición indica que si el número a evaluar sea mayor a cero.

{

Instrucciones a realizar

}

else

{

If (numero < 0) // La condición indica que si el número a evaluar es menor a cero.

{

Instrucciones a realizar

}

}

}

El siguiente diagrama explica el funcionamiento:

veinticinco

  • Las instrucciones comienzan a ejecutarse de forma secuencial (en orden) y cuando se llega a una estructura condicional, la cual esta asociada a una condición, se decide que camino tomar dependiendo siempre del resultado de la condición siendo esta falsa o verdadera.
  • Cuando se termina de ejecutar este bloque de instrucciones se reanuda la ejecución en la instrucción siguiente a la de la condicional.

Un Ejemplo de sentencia if en la herramienta QILQAY es:

veintiseis

El resultado obtenido con la anterior instrucción es el siguiente:

veintisiete

3. MANEJO DE LA INTERFAZ GRAFICA DE QILQAY

La interfaz gráfica de la herramienta QILQAY es un entorno que proporciona visibilidad a los proyectos que se desarrollan, es decir las figuras que resultan de estos y permite una interacción amigable del usuario con la herramienta.

LA GRILLA

Es una rejilla o cuadricula, que permite al usuario ubicarse en un espacio X, Y, con medidas de 10 unidades cada cuadricula.

La grilla tiene una área de 600 unidades a lo largo del eje X, aumentando de izquierda a derecha y también tiene 400 unidades a lo largo del eje Y, aumentando de arriba a abajo. Por lo tanto el punto central en la grilla es (300,200).

Cuando se ejecuta un proyecto con el comando CTRL + R, se muestra la interfaz gráfica de esta manera:

veintiocho

Para visualizar la grilla se ejecuta el comando CTRL +G. La interfaz quedara de esta manera:

veintinueve

FUNCIONES DE LA INTERFAZ

Se brinda diferentes opciones en la grilla; para tener un mejor manejo de la interfaz. Estas son:

AUMENTAR O DISMINUIR EL TAMAÑO DE LA GRILLA

La interfaz tiene la opción de aumentar o disminuir el tamaño de la grilla con el comando CTRL + Scroll hacia arriba. El resultado de la ejecución de este comando es el siguiente:

treinta

UBICACIÓN DE UN PUNTO (X, Y) EN LA INTERFAZ:

Para conocer un punto en la grilla, se presiona Click Izquierdo sobre la interfaz, e inmediatamente se muestra en una bandera, la posición en la que se encuentra. El resultado de la ejecución de este comando es el siguiente:

treintauno

EXPORTAR IMAGEN

Para guardar las imágenes que resultan en la interfaz, se presiona Click derecho y la herramienta despliega una ventana de opciones entre ellas Export Image, de esta manera:

treintacuatro

Se procede a escoger la ruta donde se quiere guardar la figura, en algunos casos la imagen guarda con la extensión .exe, por lo tanto se debe cambiar esta extensión por .png Asi:

treintaycinco

AYUDA SOBRE QILQAY

Para obtener ayuda en línea e información sobre QILQAY, se presiona Click derecho y en la ventana de opciones que se despliega se encuentra HELP y ABOUT, al seleccionar cada una de ellas, se direcciona a la página: http://sonar.udenar.edu.co/graphproglearnhelp/.

HELP: Entrega una breve definición de la herramienta

treintayseis

ABOUT: Proporciona al usuario un manual para conocer el funcionamiento y mejorar el manejo de QILQAY.

treintaysiete