Proyecto de construcción de un telar rectangular de punto

Con ocasión del estudio de los materiales textiles, acometimos la construcción de un telar de punto.
Este telar, comúnmente llamado de forma incorrecta telar "maya", nada tiene que ver con la civilización maya y su nombre correcto sería telar de malla o de punto.
Se diferencia de nuestro otro telar, también en este blog, en que el bastidor es más rectangular y sólo empleamos un tipo de hilo, es decir, no entrecruzamos trama con urdimbre.

Empezamos definiendo las medidas:

Cortamos en primer lugar las cuatro piezas del bastidor:

Trazamos una recta por el medio de los listones largos.

Sobre ellas trazaremos la posición de los clavos a 1,5 cm de distancia. Deberían salir unos 18 en cada listón si empezamos a 1,3 cm de los bordes.

Mediante una escuadra trasladamos las marcas de un listón al otro.

Procedemos al clavado intentando que no lleguen a atravesar el listón.

Una vez clavadas ambas hileras de clavos, ensamblamos los listones cortos. Esta operación podemos hacerla mediante tirafondos o mediante clavos. En esta última opción hemos de taladrar previamente con una broca muy fina para evitar que el clavo nos abra la madera. Utilizaremos también un poco de cola blanca en las uniones.

Por último empezamos a tejer. Para ello necesitaremos un ganchillo y elegir qué tipo de punto realizar.

El resumen del proceso de construcción en este vídeo:

Construcción de un carrito de madera

En este post describimos cómo a partir de un plano los alumnos construyeron un carrito de madera decorativo para portar macetas para el jardín.

Proyecto de construcción de un telégrafo

Con este proyecto se propone al alumnado la construcción de un telégrafo. Como dice el título, no es un proyecto de diseño, sino sólo de construcción.  El diseño del aparato se les proporciona.

La condición de superación del proyecto es la transmisión de la señal internacional de socorro, SOS.

Nivel: Aunque este proyecto fue desarrollado en un nivel de 2º de ESO (alumnos de 13 años aproximadamente) en grupos de 4 miembros, se encontraron dificultades que lo hacen más adecuado para niveles de 3º o 4º de ESO.

Mediante la ejecución de este proyecto, se puede trabajar los siguientes objetivos-contenidos:

• Conocimiento del funcionamiento de un telégrafo de Morse y del modo en que permitió la transmisión de información mediante el código del mismo nombre durante el siglo XIX.
• Concepto de electro-imán.
• Trabajos básicos de trazado, corte, desbastado, lijado, taladrado y barnizado sobre madera.
• Trabajos básicos de corte, limado y taladrado sobre metal.
• Soldadura

 

Conjunto emisor-receptor de telégrafo acabado

Receptor Morse

Emisor Morse con alfabeto

 

Listado de materiales

A cada grupo se le proporcionó los siguientes materiales:

20     cm    Base de abeto 20 x 9,7 x 0,9 cm (plataforma)

37     cm    Listón de pino 1,8 x 0,9 cm (palanca y soportes)

12     cm    Listón de samba 2,3 x 0,4 cm (arandelas de retención de las bobinas)

14     cm    Pletina de acero 16 x 2 mm

8       cm    Pletina de aluminio 10 x 2 mm (para soporte de tornillo de ajuste tope superior)

20     m      Hilo de cobre esmaltado 0,5 mm2

2       ud.    Tornillo 6 x 60 mm para núcleo de bobina

2       ud.    Arandela plana ancha acero cincado 6 x 20

2       ud.    Tuerca 6 mm para tornillo de núcleo de bobina

2       ud.    Tornillo 8 x 20 mm para borne

2       ud.    Arandela 8 mm para borne

4       ud.    Tuerca 8 mm para borne

1       ud.    Tornillo 4 x 20 mm + 2 tuercas (ajuste tope superior)

1       ud.    1 Tornillo 4 x 30 mm (ajuste tope inferior)

4       ud.    Tirafondo 3 x 30 (sujeción bases horizontales)

1       ud.    Clavo para eje

1       ud.    Pequeño tirafondo para sujeción de pletina superior

Construcción de los electroimanes

1. Traza cuatro cuadrados en el listón delgado de 23 x 23 mm y córtalos.

Uso de la escuadra para el trazado

Los cuatro cuadrados cortados

2. Taládralos en su punto medio con broca de 6 mm.

Las cuatro arandelas taladradas

3.  Introduce los tornillos de 5 cm en las arandelas de madera que acabamos de hacer separadas a 2,6 cm.

Separar las arandelas 2,6 cm

4.  Enrolla en cada uno de los tornillos, manualmente o mediante una taladradora eléctrica el hilo disponible (aproximadamente 10 m son unas 200 vueltas en cada bobina).

Bobinado automático usando una taladradora eléctrica

5.  Reviste las bobinas con cinta adhesiva para evitar que se destense el hilo. Deja suficiente longitud en ambos extremos del hilo.

Aspecto de las bobinas acabadas

6. Corta 2 pletinas de acero de 7 cm de largo. Con una broca para metal de 6 mm de diámetro hacemos en una de ella dos taladros centrados a 5 cm de distancia y en la otra un solo taladro en el centro con broca de 4 mm:

Pletinas taladradas

7.  Antes de soldar los extremos de las bobinas es necesarios retirar el esmalte con papel de lija:

Retirando el esmalte del hilo con papel de lija.

Preparación de la plataforma

8.  Traza los puntos para taladrar en la plataforma por su parte inferior:

Montaje de la estructura

9.  Inserta el núcleo de las bobinas en la pletina de acero correspondiente y posteriormente en la plataforma previamente taladrada.

10.  Corta los dos soportes verticales y uno de los horizontales. Une las piezas según se muestra y atorníllalas a la plataforma.

Soporte de la palanca. Piezas enrasadas por el lado izquierdo.

11.  Coloca la palanca entre los soportes verticales y por su lado izquierdo enrasada con el soporte horizontal y calcula su altura de modo que haya margen de movimiento. A continuación taladra el punto elegido para el eje e introdúcelo.

Modelado en 3D del receptor del telégrafo

Circuito eléctrico

12.  El circuito eléctrico incluyendo también el pulsador es el de la imagen:

Circuito eléctrico básico del telégrafo

13.  Si incluimos un diodo LED en el receptor, el circuito sería:

Esquema eléctrico incluyendo un diodo LED
en el receptor

en el que se han sustituido los símbolos de las bobinas por el de un relé, ya que aquí desempeñan esa función.

El resumen del proceso de construcción en este vídeo:

Eventos en JavaScript

En programación, se considera evento a toda interacción del usuario con el sistema: pulsar una tecla, maximizar una ventana, mover el ratón, pasar el ratón por encima de un componente, etc. Cada elemento tiene sus propios eventos.

En este post trabajaremos tres de los eventos más utilizados: onclick,  ondblclick, onmouseover; que se corresponden con los eventos clic, doble clic y pasar el ratón por encima de ...

Para ilustrar el funcionamiento de estos eventos en JavaScript crearemos una sencilla página web con tres imágenes, cada una de ellas respondiendo a uno de estos eventos.

Primeramente creamos la página con las imágenes:

<html>

    <head>
        <title></title>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <img src="http://.../libro.jpg">
        <img src="http://.../cuaderno.jpg">
        <img src="http://.../sacapuntas.jpg">
    </body>

</html>

Para que una imagen responda a un evento, debe incluir dentro de su etiqueta el nombre del evento y el código que ha de ejecutar cuando aquel se dispare. Así, en nuestro ejemplo, haremos que la primera imagen del libro responda el evento onclick mostrando el mensaje: "Has hecho clic sobre un libro" con el siguiente código:

<img src="http://.../libro.jpg" onclick="alert('Has hecho clic sobre un libro')">

La segunda imagen responderá al evento doble clic (ondblclick):

<img src="http://.../cuaderno.jpg" ondblclick="alert('Has hecho doble clic sobre un cuaderno')">

Y la última imagen responderá al evento de sobrevolar el ratón (onmousevoer):

<img src="http://.../sacapuntas.jpg" onmouseoverclick="alert('Has pasado el ratón por encima de un sacapuntas')">

Entrada de datos en JavaScript

El método prompt()

En un post anterior vimos cómo mostrar datos por pantalla. Pero cuando necesitemos que el usuario introduzca información usaremos el método prompt().

La sintaxis del método prompt() es la que se muestra.

prompt("algún texto","texto por defecto");

El primer texto dentro del paréntesis es el que servirá para pedir al usuario la información que se le requiere. El segundo texto es opcional, y en caso de rellenar este campo será el texto que por defecto le salga al usuario dentro del área de texto que se le ofrece para rellenar.

En el siguiente ejemplo se le pregunta al usuario por su nombre:

prompt("Introduzca su nombre");

En este otro ejemplo se le pregunta al usuario por su país de origen y se ofrece como texto por defecto "España". El texto por defecto se utiliza cuando se prevé que la mayoría de los usuarios van a escribir ese texto, de este modo, al aparecer el texto ya escrito el usuario sólo tiene que validarlo pulsando Aceptar, aunque siempre lo puede cambiar:

prompt("Introduzca su país de origen","España");

Variables en JavaScript

¿Qué es una variable?

En cualquier lenguaje de programación una variable es un espacio en la memoria de nuestro ordenador para guardar datos. Podríamos verla como una cajita que utilizaremos para guardar cosas.

Como a lo largo del diseño de un programa es habitual crear varias variables; cada una de ellas debe tener un nombre único que la identifique. El nombre de la variable lo elige el programador libremente. Aunque es recomendable que dicho nombre indique para qué se usa esa variable. Así, deberíamos huir de nombres como a, b, c, etc., y usar aquellos del tipo: edad, nombre, fecha_nacimiento, que nos indica el significado del dato que van a guardar dentro.

Es muy importante también tener en cuenta que JavaScript hace distinción entre mayúsculas y minúsculas, por tanto no es lo mismo un variable llamada edad que otra llamada Edad.

¿Cómo se crea una variable?

Al proceso de creación de una variable se le conoce como declaración. La declaración de variables en JavaScript se hace anteponiendo la palabra reservada var al nombre de la variable elegido por nosotros. Así, por ejemplo, el siguiente código declara las variables nombre y edad:

var nombre;   var edad;

Las dos instrucciones anteriores pueden reescribirse también en una sola:

var nombre, edad;

El uso del punto y coma al final de la instrucción es opcional en JavaScript si cada instrucción la escribimos en una línea diferente. Si queremos escribir varias instrucciones en una misma línea, éstas tendrán que ir separadas necesariamente por punto y coma.

No obstante, en este blog se usará siempre el punto y coma al finalizar cada instrucción, con ello nos estaremos acostumbrando a lo que en otros lenguajes de programación como Java o C es una práctica obligada.

¿Cómo se asigna un valor a una variable?

Al proceso por el cual introducimos un dato en una variable previamente declarada se le conoce como asignación de un valor a una variable. En JavaScript, como en la mayoría de los lenguajes de programación, se utiliza el signo "=" como operador de asignación.

En los ejemplos que siguen se asignan diferentes valores a diferentes variables previamente declaradas.

nombre = "David";   edad = 23;

Como vemos la palabra David se ha encerrado entre comillas. Todas las expresiones formadas por caracteres que hayan de interpretarse como texto deben ir siempre entre comillas.

La declaración y asignación de valores pueden hacerse a la misma vez en una misma línea mediante:

var nombre = "David";   var edad = 23;

Hola mundo en JavaScript

Una vez que conocemos cómo insertar nuestro código en una página web (post anterior), veamos cómo mostrar en pantalla el tradicional "Hola mundo".

En JavaScript tenemos dos formas de mostrar información por pantalla, una es el método document.write() que escribe en la pantalla principal de la página web:

<script type="text/javascript">   document.write("Hola mundo");  </script>

La otra es mediante el método alert() que muestra el texto en una ventana emergente con un botón de Aceptar.

<script type="text/javascript">   alert("Hola mundo");  </script>

Insertar JavaScript en páginas HTML

Como comentamos en el post anterior, los programas JavaScript van insertados o embebidos en en código HTML de las páginas web. Por ello, antes de mostrar como se hace esta inserción hemos de conocer como mínimo la estructura básica de una página web.

Toda página web debe tener al menos la siguiente estructura:

<html>     <head>         <title></title>     </head>     <body>     </body> </html>

Como vemos está compuesta por una serie de etiquetas. Cada etiqueta de apertura <...>, tiene su correspondiente etiqueta de cierre </...>, marcando de este modo inicio y fin del elemento correspondiente.

Dentro de un documento html podemos diferenciar una cabecera, definida por las etiquetas <head> y </head>, y un cuerpo o body definido entre <body> y </body>.

En el body suele colocarse el contenido de la página web, mientras que en la cabecera se inserta información relativa a la página que no es propiamente contenido.

Nuestros scripts deberán colocarse en la cabecera y deberán ir encerrados entre las etiquetas script que se muestran a continuación:

<html>     <head>         <title></title>         <script type="text/javascript">         </script>     </head>     <body>     </body> </html>

La propiedad type de la etiqueta script deberá inicializarse con la cadena "text/javascript".

Ahora sí estamos listos para empezar a escribir código, así que adelante con el siguiente post.

¿Qué es JavaScript?

JavaScript (abreviadamente "JS") es un lenguaje de programación que se caracteriza por:

Es un lenguaje de script, o también llamado orientado a documento.

Los lenguajes de script han sido pensados para que sus programas vayan insertados en otros documentos. En el caso de JavaScript, sus programas deben ser insertados o embebidos dentro de páginas web las cuales están escritas en HTML. No es posible desarrollar un programa con JavaScript que se ejecute fuera de una página web.

De este modo, JavaScript extiende las limitadas capacidades del HTML y hace las páginas web más dinámicas e interactivas.

Otros ejemplos de lenguajes de script son:

• JScript: versión de Microsoft del estándar de JavaScript.
• ActionScript: Lenguaje de Macromedia para la aplicaciones Flash.

Es un lenguaje de programación interpretado no compilado.

Los lenguajes compilados, una vez redactado su código, deben ser traducidos (compilados) al llamado código máquina para que puedan ser ejecutados. Por el contrario, los lenguajes interpretados como JavaScript no precisan de esta compilación previa puesto que el navegador va ejecutando el código línea por línea.

Breve historia

El lenguaje JavaScript surge por la necesidad que en los años 90 existía de dar velocidad a determinadas páginas web que empezaban a incluir formularios complejos. Hasta ese momento las comprobaciones las hacía el servidor y eso ralentizaba mucho el proceso.

Brendan Eich, que trabajaba en Netscape, pensó que estos problemas podían solucionarse incorporando al navegador pequeños programas para que fueran ejecutados por éste. Eich llamó a su lenguaje LiveScript.

Sin embargo, la empresa de Eich se alió con Sun Microsystems para el desarrollo de un nuevo lenguaje de programación: Java. Aprovechando que Java era la palabra de moda en aquella época renombró su lenguaje como JavaScript para aprovechar el tirón mediático que el otro lenguaje tenía.

Todavía hoy existe cierta confusión respecto a estos dos lenguajes, pues mucha gente piensa que JavaScript es la versión de Java para páginas web.

Similitudes y diferencias con otros lenguajes

JavaScript tiene muchas similitudes sintácticas con Java, sin embargo funciona de un modo totalmente diferente.

JavaScript es un lenguaje mucho más pequeño que Java, más fácil de aprender y también menos potente.

JavaScript es un lenguaje basado en objetos, mientras que Java es un lenguaje orientado a objetos.

Para programar en JavaScript nos vale un simple editor de texto, mientras que para escribir código Java es necesario un entorno integrado de desarrollo y un compilador específico.

Programación en Gambas

El componente PictureBox

En esta aplicación introduciremos el componente PictureBox, el cual es un espacio capaz de visualizar imágenes. Lo usaremos allí donde tengamos que mostrar una imagen al usuario de nuestra aplicación.

Para mostrar su uso modificaremos el programa de nuestro post anterior, en el que cambiábamos el color de fondo de la ventana al pasar el ratón por encima de unas etiquetas, para que en lugar de eso muestre la imagen del actor de cine que se corresponde con el nombre de la etiqueta.

 Su icono en la caja de herramientas es el que se muestra:

Su propiedad más importantes es Picture, la cual especifica qué imagen deberá mostrarse.

Si el programa debe mostrar una imagen estática durante toda la ejecución del mismo, es decir, si la imagen no va a cambiar, entonces podemos establecer la propiedad Picutre cómodamente en tiempo de diseño haciendo click sobre nuestro PictureBox para seleccionarlo y clicando en la propiedad Picture del panel de propiedades. Allí deberemos indicar la imagen que deberá mostrarse, la cual deberá estar accesible en nuestro ordenador, preferentemente en la carpeta de nuestro proyecto.

Si por el contrario, como en la aplicación que nos ocupa, la imagen a mostrar cambia durante la ejecución del programa debido a la interacción del usuario, deberemos establecer la propiedad Picture, de forma dinámica desde nuestro código.

Para indicar mediante código que un elemento PictureBox muestre una imagen llamada "imagen.jpg" debe escribirse:

PictureBox1.Picture = Picture["imagen.jpg"]

Esto es cierto sólo en el supuesto de que nuestra imagen esté en la carpeta de nuestro proyecto actual, en otro caso el nombre deberá contener también la ruta del archivo.

Visto esto, sólo queda programar los eventos de entrada (Enter) y salida (Leave) de cada etiqueta para que se visualice o se oculte la imagen correspondiente.

Así, por ejemplo, si el puntero de nuestro ratón está sobre la etiqueta Marlon Brando y desplazamos el ratón hasta salir de ella, se disparará evento Leave de dicha etiqueta, lo que debería desencadenar que la imagen actualmente visible de Marlon Brando desapareciera. Esto lo programamos del siguiente modo: en el diseño hacemos clic con el botón derecho del ratón sobre la etiqueta (label) lblMarlonBrando, elegimos Evento > Leave, y escribimos:

PUBLIC SUB lblMarlonBrando_Leave()

  PictureBox1.hide()

END

Es decir, usamos el método hide() del objeto PictureBox para ocultar la imagen.

Para el caso en el que el cursor entre en esta misma etiqueta, procedemos del mismo modo para programar el evento Enter.

PUBLIC SUB lblMarlonBrando_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Marlon-Brando.jpg"]

END

En este caso, lo primero será hacer visible el PictureBox usando el método show() para visualizarlo y a continuación establecemos la propiedad Picture para que la imagen a mostrar sea la del actor correspondiente.

El código completo de la aplicación sería:

' Gambas class file

' PictureBox

PUBLIC SUB _new()

END

PUBLIC SUB Form_Open()

END

PUBLIC SUB lblAlPacino_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Al_Pacino.jpg"]

END

PUBLIC SUB lblMarlonBrando_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Marlon-Brando.jpg"]

END

PUBLIC SUB lblBruceWillis_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["Bruce_Willis.jpg"]

END

PUBLIC SUB lblDeNiro_Enter()

  PictureBox1.show()

  PictureBox1.Picture = Picture["De_Niro.jpg"]

END

PUBLIC SUB lblAlPacino_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblMarlonBrando_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblBruceWillis_Leave()

  PictureBox1.hide()

END

PUBLIC SUB lblDeNiro_Leave()

  PictureBox1.hide()

END

PUBLIC SUB btnSalir_Click()

  QUIT

END

Programación en Gambas

Los eventos Enter y  Leave

En esta aplicación que proponemos profundizaremos un poco más en el estudio de los eventos en Gambas.

Hasta ahora, nuestro trabajo con eventos se había limitado a los clics sobre los botones. Aunque de hecho este evento es el más frecuente, no es ni mucho menos el único.

En programación, se considera evento a toda interacción del usuario con con el sistema: pulsar una tecla en el teclado, maximizar una ventana, mover el ratón, pasar el ratón por encima de un componente, etc. Cada elemento, incluso el propio formulario, tiene sus propios eventos.

En el post de hoy trabajaremos con dos eventos del elemento label. Haremos una sencilla aplicación que permita cambiar el color de fondo de nuestra ventana al color mostrado en una etiqueta al pasar el cursor del ratón por encima de ella.

Los eventos que tendremos que programar serán: Enter y Leave de cada una de las etiquetas que muestre nuestro formulario, cuyo aspecto será el de la imagen.

Los elementos de que constará serán 3 Labels, un TextLabel para mostrar el texto largo que se muestra y un botón para salir.

Para programar el evento de entrada en una etiqueta, deberemos hacer clic con el botón derecho sobre la etiqueta en cuestión durante el diseño y elegir Evento > Enter.

El código a escribir para cambiar el fondo a color amarillo, por ejemplo, sería:

El evento Leave (Salir), deberemos programarlo para que cuando el cursor salga de la etiqueta nos devuelva el color del fondo de la ventana al definido por defecto:

De este modo, el fondo estará amarillo, sólo mientras permanezcamos con el cursor en el interior de la etiqueta.

El código completo de la aplicación sería:

' Gambas class file

' Evento Enter

PUBLIC SUB _new()

END

PUBLIC SUB Form_Open()

END

PUBLIC SUB lblRojo_Enter()

    FMain.Background = Color.Red

END

PUBLIC SUB lblRojo_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB lblVerde_Enter()

    FMain.Background = Color.Green

END

PUBLIC SUB lblVerde_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB lblAmarillo_Enter()

    FMain.Background = Color.Yellow

END

PUBLIC SUB lblAmarillo_Leave()

    FMain.Background = Color.Background

END

PUBLIC SUB btnSalir_Click()

  QUIT

END

Programación en Gambas (7)

En esta segunda aplicación gráfica crearemos un formulario con una etiqueta y cuatro botones dispuestos como en la imagen. Al hacer clic sobre alguno de los botones, el color de fondo de la ventana cambiará automáticamente al indicado en el botón pulsado.

En la fase de diseño, colocaremos los elementos tal como se indicó en el post anterior.

En la fase de redacción del código, habremos de programar la acción de cada botón. Para ello hacemos clic en alguno de ellos y en la ventana que se nos abre escribimos la siguiente línea:

FMain.Bacground = Color.Red

Con ello indicamos que queremos asignar a la propiedad Background del objeto FMain el color rojo.

Programación en Gambas (6)

Primera aplicación visual

Hasta ahora, todos nuestros programas habían sido bajo consola; es decir la salida y la entrada de datos se producía a través de la línea de comandos, o terminal (pantalla negra con texto).

Esto ha estado bien en el comienzo porque nos va a permitir separar lo que ha sido el desarrollo del código de lo que es el diseño gráfico. Pero es momento ahora de comenzar a utilizar la programación visual de Gambas para crear aplicaciones gráficas, como son la práctica totalidad de las aplicaciones en nuestros días.

Para ello comenzaremos igual que hicimos en nuestro primer ejercicio, pero tras crear un Nuevo proyecto elegiremos Aplicación gráfica en lugar de Aplicación de consola.

Llamémosle a este nuevo proyecto holamundo2, para distinguirlo del que hicimos con este mismo nombre bajo consola.

Al abrirse el IDE, vemos que en el árbol de directorios de la izquierda aparece una carpeta nueva llamada Formularios. Los formularios son contenedores de objetos como botones, etiquetas, cajas de texto, etc. Hacen la función de ventana de nuestra aplicación.

Al hacer doble clic sobre FMain, se nos despliega nuestro formulario principal. Pero será necesario que hagamos los siguientes cambios en nuestro IDE: si tenemos activa la consola la cerraremos pulsando F11, para ganar espacio, haremos visible la caja de herramientas que es donde se encuentran los diferentes objetos que podemos colocar en el formulario.

Ahora estamos preparados para empezar a crear nuestra primera aplicación gráfica.

Podemos dividir en trabajo en dos partes claramente diferenciadas, la fase de diseño gráfico y la redacción del código.

Fase de Diseño gráfico

En primer lugar colocaremos una etiqueta en la parte superior de nuestro formulario a modo de título. Para ello utilizaremos el objeto denominado label, representado por una A mayúsculas en la caja de herramientas.

Haremos clic en él y a continuación nos iremos al formulario y haciendo clic en un lugar arrastramos el ratón hasta el tamaño deseado.

Es costumbre en programación renombrar nuestros objetos de modo que su nombre nos recuerde su función en el programa. Para ello, teniendo seleccionado nuestro label, nos iremos a la caja de propiedades y buscaremos la propiedad Name; allí cambiaremos el nombre por defecto label1 a lblTitulo, donde además, con las tres primeras letras indicamos que el objeto en cuestión es un label.

Del mismo modo, estableceremos la propiedad Text de esta etiqueta con la frase: "Mi primera aplicación gráfica".

A continuación insertaremos un botón haciendo clic en el objeto de la imagen:

y lo colocaremos bajo el label:

A este botón le cambiaremos el nombre por defecto button1 a btnSaludar y sustituiremos el texto original por el de Saludar:

Cambiaremos también su color de fondo picando en su propiedad Background en los puntos suspensivos. En la ventana que se abra elegimos la pestaña Libre y escogemos un color verde.

Del mismo modo añadiremos otro botón que llamaremos btnSalir, con el texto Salir y color de fondo rojo y otro label al que llamaremos lblMensaje y en el que dejaremos su propiedad texto vacía.

El conjunto acabado debe verse así:

Hasta aquí la fase de diseño.


Fase de redacción del código

Queremos que al pulsar en el botón salir, la aplicación se cierre. Para ello, hacemos doble clic sobre el botón rojo. Se nos abrirá la vista de código y en el sitio donde nos sitúa el ratón escribimos quit, que es como en Gambas indicamos que se abandone el programa.

Programemos ahora el comportamiento del botón verde. Como al pulsar el botón verde queremos que el label central muestre el mensaje: ¡Hola Mundo!, actuaremos del siguiente modo.

Hacemos doble clic en el botón verde y en la vista de código, justo donde se nos ubica el cursor escribimos:

lblMensaje.Text = "¡Hola Mundo!"

lblMensaje es el nombre del objeto al que queremos modificar una propiedad, Text es la propiedad de ese objeto que queremos modificar y el resto de la frase es el valor que queremos asignar a esa propiedad.

Con esto nuestro pequeño programa está acabado y podemos ejecutarlo pulsando F5 y minimizando nuestro IDE para poderlo ver en el escritorio.