Este documento presenta tres actividades para crear interfaces gráficas usando Visual Basic. La primera actividad instruye cómo crear una ventana con formato usando propiedades como el título, color de fondo y etiquetas. La segunda actividad enseña a crear un álbum de fotos simple con imágenes y código para cambiar el tamaño de las imágenes. La tercera actividad guía la creación de una ventana de edición de fotografías interactiva usando botones y código para modificar el tamaño y la imagen central cuando se hacen clic en

1. Aplicación Tecnológica
Actividad No.1
Actividad No.2
Actividad No.3
Adaptado por Lic. José Torres
Linea de trabajo: Estructura administrativa y empresarial
para el manejo de la contabilidad en Visual Basic
Se entiende la comprensión y uso racional
de las herramientas tecnológicas e
informáticas para la satisfacción de las
necesidades enfrentando las situaciones o
cambios que se presentan en el entorno
escolar, familiar y social del ser humano.

2. La siguiente actividad tiene como finalidad conocer las diferentes
propiedades de los objetos (label, textbox, image, etc), como también
agregarle acciones a los eventos.
Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
Doble clic
Para iniciar esta actividad sigue los siguientes pasos : 1. Ingresa a Visual Basic 6.0

3. 2. Área de trabajo de visual basic, revisar el Entorno de Desarrollo Integrado IDE.
Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
Cuadro de
Herramientas
Formulario
Inicial
Explorador
de proyecto
Propiedades
de los objetos

4. Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
Maximizar
proyecto
3. Haz clic en el
botón maximizar
de la ventana de
proyecto.

5. Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
4. Para modificar el
formulario tener en
cuenta las
siguientes
propiedades:
Caption: Fuente
Backcolor: Salmon
Height: 7000
Width: 6000

6. Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
5. Agrega un label en la
parte superior del
formulario y ten en
cuenta lo siguiente y así
con las demás
herramientas:
Label1
Alignment: Center
Backstyle: Transparente
Caption: VENTANA DE
FORMATO
Font: Fuente: Tahoma
Estilo: Negrita
Tamaño: 18
Forecolor: Negro
Tooltiptext: Titulo de la
ventana

7. Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
6. Teniendo en cuenta las
propiedades que acabas
de trabajar aplícaselas a
cada una de las
herramientas que te
estoy señalando, el
tamaño y otras
propiedades quedan a tu
consideración, pero que
no se te olvide aplicarles
a los objetos las
propiedades trabajas en
las hojas anteriores.
Todos estos
objetos son label,
en total son 18

8. Actividad No. 1
CREANDO UNA VENTANA DE FORMATO
Acabas de terminar la
interface gráfica de esta
ventana de formato,
ahora si prepárate para
aplicarle el código y
notes lo interactivo que
quedó tu trabajo;
ejecútala presionando la
tecla F5 .
Se hizo clic en fuente
Arial Black, luego en
color: Rojo y
posteriormente en el
Tamaño 30, puedes
combinar cualquiera de
las opciones y deben ir
cambiando
Adaptado por el profesor José Torres
COL SAGRADO

9. Antes que nada crea una carpeta en la
unidad de nuevo volumen D: o E:,
asígnale un nombre que haga referencia a
grado, sección y año, luego busca 10
imágenes concernientes a un tema Ej.
Deportes, países, carros, etc, puedes
utilizar Internet, después ubícalas en tu
carpeta que te sirvan para el trabajo
siguiente.

10. Actividad No.2
CREANDO UN ALBUM DE FOTOS SENCILLO
1. Vamos a comenzar preparando el
formulario para ello modificamos las
siguientes propiedades
Caption: Album Cambia el titulo del
objeto
Height:9450 cambia el alto del objeto
Width: 10000 cambia el ancho del objeto
Backcolor: &H0080C0FF& cambia el color
de fondo
MinButton: True Activa los botones de
controles de la barra de titulo

11. 2. Agrégale un label y configura las
siguientes propiedades
Caption: ALBUM DE FOTOS Cambia
el titulo del objeto
Alignment: Center
BackStyle: Transparent
Font: Fuente: ________
Estilo de la fuente: Negrita
Tamaño: 28
ForeColor: &H00FF0000&

12. 3. Agrega 11 herramientas image
observa el formulario para que sepas
como ubicar los objetos.
Cambia las siguientes propiedades de
todos objetos image
Stretch: true
BorderStyle: 1- fixed single
Nota: Después de haber cambiando
las propiedades, colocaremos una
imagen en cada cuadro pequeño
(herramienta image), utilizando la
propiedad picture, busca una de las
imágenes guadadas con anterioridad
en tu carpeta y así sucesivamente ,
hasta completar

13. 4. Para ir probando o ejecutando lo
que estamos haciendo presiona la
tecla F5.
Bueno haz terminado la Interfaz
Gráfica, ahora comenzamos a
ubicar el código que es quien hace
interactivo el album
5. Bueno hacemos doble clic en la
primera imagen y observe la
interfaz que aparece.
Del lado izquierdo aparece el
nombre del objeto en este caso
image1 y en lado derecho aparece
el evento en este caso Click, y en la
parte de abajo aparece una
subrutina
Private Sub Image1_Click()
End Sub

14. En el espacio en blanco de la
subrutina se escribirán todas las
acciones que quieren que pasen
para este caso lo que haremos
será presionar la imagen para que
esta se ubique de tamaño mas
grande en el centro de la ventana.
Nota: Cabe decir que estas
acciones ocurren cuando
presionas primero F5 , que quiere
decir ejecutar el programa.
Les mostrare con un ejemplo
como se hace, ustedes hacen el
resto
Private Sub Image1_Click()
Image6 = image1
End Sub Adaptado por José Torres, profesor de
Informática. Col. Sagrado

15. Para esta actividad crearás una Carpeta
llamada imágenes, dentro de la carpeta
creada con anterioridad y donde haz
estado guardando todos tus trabajos.
Crearás la siguiente interfaz gráfica, teniendo
en cuenta cada uno de los objetos.

16. Actividad No.3
CREANDO UNA VENTANA DE IDE DE FOTOGRAFIAS
1. Vamos a comenzar preparando el
formulario para ello modificamos las
siguientes propiedades
Caption: Ventana IDE Cambia el titulo del
objeto
Height:6885 cambia el alto del objeto
Width: 8295 cambia el ancho del objeto
Picture: … Agrega una imagen al fondo

17. 2. Agrégale 6 label, 27 botón de
comando , 3 líneas y según
apariencia 1 image y configura
según tu criterio sin perder el
diseño del formulario .

18. 3. Tener en cuenta para el
código lo siguiente que cuando
presione un cuadrito de opción
de color este cambie de color el
label que aparece en el centro
de la ventana que estamos
construyendo y además cuando
pase por encima se modifique
el tamaño del mismo pero mas
pequeño.
Código:
Private Sub Command1_Click()
Label3.backcolor = rgb (200,0,0)
End Sub
Objeto command y evento click
Private Sub Command1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Sing)
Command1.Height = 300
Command1.Width = 300
End Sub
Objeto Command y evento mouseMove

19. Continua realizando el resto de
comandos para hacer que esta
ventana se vea interactiva.
Continuamos. cuando hagamos
click en los botones que son las
opciones de tamaño estas
deben cambiar el tamaño de la
imagen central (es decir donde
se reflejan las imágenes) cada
numero indica 100 menos por
disminuir su alto y su ancho
comenzando desde el uno.
Código:
Private Sub Command10_Click()
Image1.Height = 3055
Image1.width = 3655
End Sub
Objeto command y evento click

20. Continua realizando el resto de
comandos para hacer que esta
ventana se vea interactiva.
Continuamos. cuando hagamos
click en los botones que son las
opciones de imágenes estas
deben cambiar la imagen que se
encuentran en el centro de la
ventana.
Código:
Private Sub Command20_Click()
Image1 = image2
End Sub
Objeto command y evento click
Para ir probando o ejecutando lo que
estamos haciendo presiona la tecla F5.
Adaptado por Lic. José Torres