ACTIVIDAD 3.

2-Crear interfaz
gráfica
Interfases Gráficas

CATEDRÁTICO: Ing. Laura Patricia del Bosque Vega

NOMBRE DEL ALUMNO MATRICULA CARRERA

Juan Pablo Esquinca Magallón 1962235 IMTC

Semestre agosto – diciembre 2023

GRUPO DIA/HORA
No
006
Escolarizada

CIUDAD UNIVERSITARIA, SAN NICOLÁS DE LOS GARZA, NUEVO LEÓN A miércoles, 8 de noviembre de 2023
 Índice

Interfaz Código Contador ................................................................................... 3

Actividades........................................................................................................... 5
Actividad #1 Form ............................................................................................... 5
Actividad #2 Textbox........................................................................................... 8
Actividad #3 Calculadora.................................................................................. 10
Actividad #4 Operaciones Básicas ................................................................. 11
Actividad #5 Base de datos txt ........................................................................ 12
Actividad #6 Boolean ........................................................................................ 14
Actividad #7 Habla Visual ................................................................................. 16
Actividad #8 Interface serial ............................................................................. 19
Actividad #9 Picturebox y 3 botones .............................................................. 21
Actividad #10 Agenda Telefónica .................................................................... 24
Actividad #11 Trazar Trayectorias ................................................................... 26
Actividad #12 Paint Visual ................................................................................ 27
Actividad #13 Web Browser ............................................................................. 29
Actividad #14 Base de datos y comunicación ............................................... 32
Actividad #15 Reproducción de música ......................................................... 39
Actividad #16 Lista de reproducción tipo Spotify ......................................... 44
Interfaz Código Contador
Codificación

Interfaz de la actividad
La interfaz cuenta con un botón para ir incrementando el número y un botón para
limpiar o borrar todo.

Al iniciarlo, podemos dar varias veces

clic en el botón de contar y va a ir
incrementando el valor

Aquí ya vimos que avanzo un numero

 Finalmente podemos dar clic en limpiar
para comenzar desde 0.

Actividades

Actividad #1 Form
Codificación
Interfaz elaborada en Visual Basic 6.0:

Esta ventana es la que se muestra una vez ejecutado el código, en donde se muestra
solamente la pestaña “Menú”, la cual contiene dos submenús llamados “Timer” y
“Hora y fecha”, así como se muestra a continuación y en la imagen de la derecha.

En este caso se seleccionó del Menú la opción de “Timer”, la cual una vez
seleccionado muestra la información de la ventana de la izquierda, en donde se
pueden una vez presionado el botón de “Iniciar” comienza a contar y a guardar sus
ciclos en segundos y minutos (como se muestra en la imagen de la derecha). A su
vez tiene otros tres botones, en donde el de “Pausa” detiene el temporizador,
“Reiniciar” reestablece todos los valores del tiempo a cero, y “Salir” no sirve para
cerrar completamente la ventana, solo se sale de la opción de “Timer” para que
nuevamente se seleccione otra opción.
Ahora se muestra la opción de “Hora y fecha”, la cual como bien dice su nombre,
una vez seleccionado logra mostrar la fecha y hora actual. De la misma forma, el
botón de “Salir” sigue realizando el mismo objetivo como se mencionó
anteriormente.

Actividad #2 Textbox
Codificación
En la interfaz de se puede ver su funcionamiento. Al momento de introducir un texto
y seleccionar el botón Aceptar el texto se guardará en la parte de listbox, si se
selecciona el botón limpiar se limpiará el área de listbox y por último si se selecciona
el botón de Exit se cerrará la interfaz.
Actividad #3 Calculadora
Codificación

Aquí se puede observar la interfaz de

la calculadora en donde en las
casillas blancas es para poner los
valores y con los respectivos botones
de suma, resta, multiplicar y dividir
realizar la operación requerida, así
como el botón limpiar realiza la
función de borrar y el de salir es para
cerrarla interfaz.
 Funcionamiento de la interfaz realizada

Actividad #4 Operaciones Básicas

Codificación
Aquí ya está la interfaz al darle correr y se puede observar que al introducir dos
valores se hacen las operaciones correspondientes.

Actividad #5 Base de datos txt

Codificación
 Interfaz de la base de datos txt

Hola mi nombre es Juan Pablo Esquinca Magallón

#1962235
Interfaces Gráficas
Actividades 3.2

Le damos clic en “Leer” y se

va a presentar los datos
guardados en el bloc de
notas (última imagen antes
de agregar el nombre del
docente).
 Hola mi nombre es Juan Pablo Esquinca Magallón
#1962235
Interfaces Gráficas
Actividades 3.2

Ahora vamos a agregar un texto,

para guardarlo presionamos
“Escribir” y se guardara en el
texto y en el bloc de notas.

Actividad #6 Boolean
Codificación
 Interfaz

Al correr el programa nos abre la

interfaz, en la cual se nos indica que
debemos ingresar la cuenta y
contraseña.

Al introducir los datos de manera correcta, el status cambiara a “True” lo cual nos
indica que los datos introducidos son acertados, de lo contrario como vemos en la
imagen de lado derecho, nos aparecerá “False” lo que nos indica que están
equivocados los datos.
 Dado el caso de que los datos
introducidos sean correctos, el
programa nos abrirá una pestaña nueva
donde saldrá una leyenda que nos da la
información que tenemos acceso.

Actividad #7 Habla Visual

Codificación
Interfaz del Habla Visual
 Se utilizo un Panel para colocar el
titulo “Lector de texto”, además de
varios Label para los nombres de
cada comando, botones para
realizar las tareas de crear un audio,
hablar o pausar. Se agregaron
Textbox para poder escribir lo que
quieras que se escuche o guarde. El
combobox contiene las opciones de
la voz y por ultimo se seleccionaron
dos trackback para el volumen y la
velocidad en la que habla.

Si escribimos algo, al darle

seleccionar voz podemos elegir entre
dos voces, después le damos en
Hablar y se empezara a reproducir lo
escrito en el recuadro.
Podemos nivelar el volumen y además
aumentarle la velocidad para que sea
más rápido o lento.
Si se crea un audio, este se guardará
en la carpeta que desees y podrás
reproducirlo.
Actividad #8 Interface serial
Codificación

Interface

Tenemos la interfaz que nos indica que tenemos que presionar el botón de buscar
puertos para poder elegir que puertos de ¿entrada hay disponibles en nuestra
computadora

En caso de tener puertos disponibles saltara un msgbox para indicarnos en

seleccionar nuestro puerto

Cuando presionamos el botón de conectar si es que se conecta este aparecerá con

una leyenda de que la conexión se hizo de manera exitosa.
Actividad #9 Picturebox y 3 botones
Codificación

Interfaz de la actividad
Al darle clic en el
botón de Rectángulo
rojo se dibujará un
rectángulo de dicho
color en el picturebox.

Ahora al darle clic en

el botón de rectángulo
azul y se creara el
rectángulo de dicho
color.
Al darle clic en
línea se creará
línea de color
verde encima del
rectángulo azul.

Finalmente se
creará un círculo
de color morado.
Actividad #10 Agenda Telefónica
Codificación

Interfaz de la Agenda telefónica

Esta interfaz contiene una

imagen de in teléfono solo
para fines ilustrativos, un
registro que es el que
almacenara la información,
después vienen los textbox
de Nombre, Teléfono y un
Combobox para la compañía,
finalmente dos botones, uno
para guardar y otro para
cerrar la agenda.
Colocamos un Nombre, y
el número telefónico de la
persona.

En Compañía, viene una serie

de empresas telefónicas que
se encuentran a nivel
Nacional e internacional, se
selecciona la que tenga la
persona.

Y en una carpeta de
nuestra
computadora se
creará un bloc de
texto con el nuevo
contacto guardado.
Y si damos clic en
“Cerrar”, la agenda
se cierra.
Actividad #11 Trazar Trayectorias
Codificación

Interfaz de la Act 11 (Trazar Trayectorias)

Para poder agregar los rectángulos lo único que hay que realizar es mantener el clic
izquierdo y arrastrar el mouse para poner el tamaña que consideres, después dejas
de mantener y el rectángulo aparece.

Actividad #12 Paint Visual

Codificación
Interfaz gráfica Paint visual

En esta interfaz
tenemos lo que es un
panel y dos botones
en el cual dan las
instrucciones de
pintar en el panel si y
solo si se presione en
el panel y la otra
opción es de borrar
que borra si y solo si
se presione.

Como vemos cuando se hace click en pintar al momento que nosotros presionemos
en el panel este pintara
Mientras que si presionamos borrar borraremos en donde le estemos dando click al
panel.

Actividad #13 Web Browser

Codificación
 Interfaz navegador de internet

Tenemos lo que es la interfaz para buscar alguna página web en donde se observan
algunos botones para ir atrás, adelante refrescar la página, parar la búsqueda el
textbox donde pondremos la url de la página a la cual queremos ir un botón de
buscar y un botón para ir a home.
En el textbox pusimos Google.com el web browser busco la página web donde la
encontró y la puso.

Se hizo otra búsqueda ahora con la url de facebook.com en donde el web browser
nos arrojó la página de Facebook.

Ahora le damos al botón de home en donde nos arroja a la página de home de

msn de Windows.
Actividad #14 Base de datos y comunicación
Codificación
Para esta actividad se requería de tener de una basa de datos, por lo que se realizó
una en Excel, pero haciendo uso de Visual Basic para realizar su interfaz. La base de
datos contiene cierta información de estudiantes de la carrera de mecatrónica
(inventados), de forma que con ayuda de la interfaz se pueda tener acceso a la
información de la base de datos de la hoja de Excel y poder editarla sin necesidad
de acceder a esta.
Vista de la hoja “Base de datos”:
Mediante la hoja de Excel se puede ver la información con la que se puede llegar a
trabajar, además que en la parte superior derecha se encuentra el botón de
“Editar/Agregar”, con el cual se puede acceder a la interfaz creada, la cual se
muestra a continuación:

A través de esta ventana se puede llegar a interactuar con los datos de hoja de
Excel gracias a las opciones de buscar, registrar, editar, eliminar y limpiar.
Opción BUSCAR

Debido a que cada estudiante cuenta con una matrícula única, se programó para
que se filtrara y mostrara la información con respecto a la matrícula ingresada. En
este caso solo se muestra que se buscó el dígito 17, de forma que, al dar clic en
buscar, solamente se mostrarán las matrículas que posean este número, no
necesariamente tienen que ser los primeros dígitos de la matrícula, ya sea que se
quiera buscar de esta forma o ingresar la matrícula completa para mostrar la
información de un solo alumno.
Opción REGISTRAR
Una vez que selecciona la opción de registrar, la ventana muestra nuevas opciones
para poder ingresar la información necesaria. De forma automática llenará la sección
de clave con el número que debe continuar según la cantidad de filas con datos que
posea la tabla en Excel.
En la imagen de la derecha se muestra la ventana con los campos rellenados. Una
vez completos los datos solo se da clic en el botón Agregar, el cual realizará los
cambios que se muestran a continuación:

Los datos son agregados en la parte superior de la tabla.

Si se desea Modificar alguno de los datos, se tiene que seleccionar una fila de datos
a través de la ventana “Gestionar datos”, por ejemplo, se cambiará el promedio de
82 de Catalina Garrido por un 87, y su apellido por Rosell.
Una vez seleccionada la fila, se activa el botón de Modificar y se deshabilita el de
Agregar. Se realizan sus respectivas modificaciones y se da clic en Modificar.

Opción EDITAR
Si desde un principio solamente se desea editar los datos, se tendrá que seleccionar
una fila como se explicó para la opción de Modificar, ya que se tienen que realizar
los mismos pasos a excepción de que si no se selecciona una fila, el programa
arrojará el siguiente mensaje.

Opción ELIMINAR
De la misma forma que la opción Editar, se tiene que seleccionar una fila o de lo
contrario saldrá la ventana con el aviso “Seleccione un registro”. En este caso se
eliminará la fila de Catalina Rosell.
Una vez que se selecciona la fila de Catalina y se da clic en “Eliminar”, el programa
mostrará la ventana “Introducir” la cual pide la confirmación del usuario para realizar
la acción, de ser así, el usuario debe ingresar la clave 12345 y dar clic en aceptar
para que se elimine la información como se muestra a continuación:

Opción LIMPIAR
Con esta opción se pueden eliminar ya sea los valores ingresados en la barra de
búsqueda o de lo contrario la información agregada (ya sea nueva o modificada).
Cabe destacar que si se están registrando los datos para un registro nuevo se da
clic en Limpiar, el tamaño de la ventana cambiará, realizando su cambio de la imagen
de la izquierda a la de la derecha.
Actividad #15 Reproducción de música
Codificación

Vista de la interfaz del reproductor de música

Esta ventana posee las opciones de Play, Anterior, Siguiente, Pausa, Detener y Abrir,
además de la barra para aumentar y disminuir el volumen y si así se desea, quitar
el sonido completamente mediante el ícono de la bocina.

Opción ABRIR
Al seleccionar la opción Abrir se abre una ventana para poder visualizar los archivos
que contiene la computadora o en algún dispositivo de almacenamiento externo
conectado al equipo.

Se seleccionan las canciones que se quieren reproducir y se da en abrir para que la

ventana de la interfaz se vea como a continuación:
En la lista al lado del botón Abrir se muestra la ubicación de los archivos de música
seleccionados. En este caso el orden de las canciones es Dream, Enemy, Hear Me,
Nothing Left To Say.

Opción PLAY
Para reproducir una canción se selecciona una de las que se encuentran en la lista
y posteriormente se da clic en Play.
Opción ANTERIOR y SIGUIENTE
Como dicen sus nombres, dependiendo de lo que el usuario desee, si se selecciona
la opción “Anterior” se reproduce la canción anterior a la que se estaba
reproduciendo según la lista, o si se desea escuchar la opción “Siguiente” se escucha
la siguiente canción según la lista.

Anterior

Siguiente
Opción PAUSA
Con esta opción se detiene la reproducción de la canción seleccionada.

Opción DETENER
Detiene completamente la canción que se está reproduciendo.
Opción MUTE-SILENCIAR / BAJAR O SUBIR SONIDO
Si se selecciona el ícono de la bocina se silencia la canción, mientras que con la
barra de su lado derecho se puede mover derecha a izquierda para aumentar o
disminuir el volumen, todo esto sin dejar de reproducir la canción.

Actividad #16 Lista de reproducción tipo Spotify

Codificación
Aquí se muestra la interfaz de la lista de reproducción del programa en donde se
puede observar sobre cómo está implementada. En la parte superior se muestra la
barra de búsqueda en donde se busca la canción que se requiere escuchar y con el
botón “Agregar” mostrado en la parte izquierda al seleccionarlo la canción buscada
se quedara agregada a tu lista de reproducciones y en el botor “Guardar” se quedara
almacenada ahí, con el botón “Reproducir” es para poder iniciar tus canciones y
poder escucharlas y escoger la canción, el botón “Clean” es para poder limpiar o
borrar tu lista o las canciones que no quieras que estén en ella y así poder crear una
nueva lista con otras canciones y por último el botón “Exit” es para poder salir de la
lista de reproducción.