UNIVERSIDAD AUTÓNOMA DE

NUEVO LEÓN

FACULTAD DE INGENIERIA
MECANICA Y ELECTRICA

INTERFASES GRÁFICAS
Actividad #4
Diseño de Pseudocódigos

Matricula Nombre
1906258 Alberto Daniel Villarreal Osuna
1936790 Jesús Ernesto Tamez Sosa
1908517 Rubén Eduardo Martínez Villarreal
1974668 Pedro Enrique Lozano Alonso
2035655 Carlos Enrique Sanchez Martinez

1
Índice
Introducción……………………1
Marco Teórico…………………1
Contenido………………………5
Conclusiones………………….42
Referencia Bibliográfica………42

Introducción
Durante esta actividad estudiaremos los diferentes programas que se pueden usar para hacer
interfaces gráficas, así mismo veremos las diferencias entre cada una y ejemplos de las los mismos,
con el fin de entender la lógica para crear/armar interfaces gráficas.

Marco teórico

Antes de empezar con las interfaces debemos de conocer cada unos de los programas que
vamos a utilizar para hacerlas.

Visual Basic
Visual Basic es un lenguaje de programación desarrollado por Microsoft. Es parte de la familia
de lenguajes .NET y se utiliza comúnmente para desarrollar aplicaciones de escritorio, aplicaciones
web y servicios web. VB.NET es un lenguaje orientado a objetos, lo que significa que se centra en la
creación y manipulación de objetos para realizar tareas específicas.

Visual Basic .NET ofrece varias ventajas que lo convierten en una elección sólida para
desarrolladores de software:

1. Facilidad de aprendizaje
2. Integración con .NET Framework
3. Herramientas de desarrollo
4. Compatibilidad con bases de datos

VB.NET se utiliza en una variedad de aplicaciones, lo que demuestra su versatilidad:

1. Aplicaciones de escritorio
2. Aplicaciones Web
3. Servicios Web
4. Automatización de tareas

2
 C, C# y C++

En el mundo de la programación, C, C++ y C# son tres lenguajes de programación

ampliamente utilizados y conocidos. Aunque comparten algunas similitudes, también presentan
diferencias significativas en términos de sintaxis, características y usos. A continuación, se detallan
las principales diferencias entre estos lenguajes:

C
El lenguaje C es un lenguaje de programación de nivel medio, diseñado originalmente por
Dennis Ritchie en los años 70. A continuación, se destacan algunas características clave:
• Sintaxis simple: C tiene una sintaxis clara y concisa, lo que facilita su aprendizaje y uso.
• Procedimental: Se basa en la programación procedimental, lo que significa que se organiza
en torno a funciones y procedimientos.
• Bajo nivel: Permite un control de bajo nivel sobre el hardware y los recursos del sistema, lo
que lo hace ideal para aplicaciones de sistemas operativos y desarrollo de controladores.
• Portabilidad: Los programas escritos en C son altamente portables y pueden ejecutarse en
una amplia variedad de plataformas.

C++
El lenguaje C++ es una extensión del lenguaje C que fue desarrollado por Bjarne Stroustrup
en los años 80. Combina la programación procedimental con características de programación
orientada a objetos (POO). A continuación, se describen las características principales de C++:
• Programación orientada a objetos: C++ permite la programación orientada a objetos, lo que
permite encapsulación, herencia, polimorfismo y otros conceptos de POO.
• Sintaxis más compleja: C++ tiene una sintaxis más compleja en comparación con C, debido
a las características adicionales de la programación orientada a objetos.
• Mayor abstracción: C++ ofrece una mayor abstracción que C, lo que permite una
representación más cercana a los problemas del mundo real y una programación más
modular.
• Plantillas: C++ introduce el concepto de plantillas, que permiten escribir código genérico que
se puede utilizar con diferentes tipos de datos.
• Compatibilidad con C: C++ es compatible con el código escrito en C, lo que significa que se
puede incluir código C en un programa C++ y viceversa.

C#
El lenguaje C# (pronunciado "C sharp") fue desarrollado por Microsoft a fines de la década de
1990. Es un lenguaje de programación moderno que se ejecuta en la plataforma .NET. Estas son
algunas de las características clave de C#:
• Programación orientada a objetos: C# se basa en la programación orientada a objetos y
ofrece características como encapsulación, herencia, polimorfismo, etc.
• Plataforma .NET: C# se ejecuta en la plataforma .NET, lo que significa que los programas
escritos en C# se compilan en código intermedio (IL) y se ejecutan en el entorno de tiempo de
ejecución de .NET.
• Fuertemente tipado: C# es un lenguaje fuertemente tipado, lo que implica que se deben
declarar y respetar los tipos de datos.
• Recogida de basura: C# utiliza un recolector de basura (garbage collector) para administrar
automáticamente la memoria y liberar objetos no utilizados.

3
 • Fácil integración con Windows: C# está estrechamente integrado con el entorno de
desarrollo de Microsoft y es ampliamente utilizado para el desarrollo de aplicaciones de
Windows.

Java

Java es un lenguaje de programación multiplataforma orientado a objetos que se ejecuta en

miles de millones de dispositivos de todo el mundo. Sustenta aplicaciones, sistemas operativos de
smartphones, software empresarial y muchos programas conocidos.

Estos son los rasgos que sirvieron para definir el lenguaje de programación Java y que lo
hicieron tan ubicuo. Java es:

Multiplataforma: Java se catalogó con el eslogan "Escribir una vez, ejecutar en cualquier
lugar" (o WORA, por sus siglas en inglés), lo cual sigue siendo cierto hoy en día. El código de
programación Java escrito para una plataforma (como el sistema operativo Windows) puede
transferirse fácilmente a otra plataforma (como el sistema operativo de un teléfono móvil) y
viceversa, sin necesidad de reescribirlo por completo. Java funciona en múltiples plataformas
porque, al compilar un programa java, el compilador crea un archivo de código de bytes .class que
se puede ejecutar en cualquier sistema operativo que tenga instalada la máquina virtual Java (JVM).

Orientado a objetos: Java se encontraba entre los primeros lenguajes de programación

orientados a objetos. Un lenguaje de programación orientado a objetos organiza su código en torno
a clases y objetos, en lugar de funciones y comandos. La mayoría de los lenguajes de programación
modernos, incluidos C++, C#, Python y Ruby, están orientados a objetos.

¿Para qué se usa el lenguaje de programación Java?

Java es un lenguaje de programación muy transferible que se usa en plataformas y distintos
tipos de dispositivos, desde smartphones hasta televisores inteligentes. Se usa para crear
aplicaciones móviles y web, software empresarial, dispositivos de Internet de las cosas (IoT), juegos,
macrodatos, aplicaciones distribuidas y basadas en la nube, entre otros tipos.
Python

Python es un lenguaje de programación ampliamente utilizado en las aplicaciones web, el

desarrollo de software, la ciencia de datos y el machine learning (ML). Los desarrolladores utilizan
Python porque es eficiente y fácil de aprender, además de que se puede ejecutar en muchas
plataformas diferentes.

Los beneficios de Python incluyen los siguientes:

• Los desarrolladores pueden leer y comprender fácilmente los programas de Python debido a
su sintaxis básica similar a la del inglés.
• Python permite que los desarrolladores sean más productivos, ya que pueden escribir un
programa de Python con menos líneas de código en comparación con muchos otros
lenguajes.
• Python cuenta con una gran biblioteca estándar que contiene códigos reutilizables para casi
cualquier tarea. De esta manera, los desarrolladores no tienen que escribir el código desde
cero.
4
 • Los desarrolladores pueden utilizar Python fácilmente con otros lenguajes de programación
conocidos, como Java, C y C++.
• La comunidad activa de Python incluye millones de desarrolladores alrededor del mundo que
prestan su apoyo. Si se presenta un problema, puede obtener soporte rápido de la
comunidad.
• Hay muchos recursos útiles disponibles en Internet si desea aprender Python. Por ejemplo,
puede encontrar con facilidad videos, tutoriales, documentación y guías para desarrolladores.
• Python se puede trasladar a través de diferentes sistemas operativos de computadora, como
Windows, macOS, Linux y Unix.

Xamarin

Xamarin es una plataforma de código abierto para compilar aplicaciones modernas y con
mejor rendimiento para iOS, Android y Windows con .NET. Xamarin es una capa de abstracción que
administra la comunicación de código compartido con el código de plataforma subyacente. Xamarin
se ejecuta en un entorno administrado que proporciona ventajas como la asignación de memoria y la
recolección de elementos no utilizados.

Xamarin permite a los desarrolladores compartir un promedio del 90 % de la aplicación entre

plataformas. Este patrón permite a los desarrolladores escribir toda la lógica de negocios en un solo
lenguaje (o reutilizar el código de aplicación existente), pero conseguir un rendimiento y una
apariencia nativos en cada plataforma.

Xamarin permite crear una interfaz de usuario nativa en cada plataforma y escribir lógica de
negocios en C# que se comparte entre plataformas. En la mayoría de los casos, con Xamarin se
puede compartir el 80 % del código de la aplicación.
Xamarin se agrega a .NET, que controla de forma automática tareas como la asignación de
memoria, la recolección de elementos no utilizados y la interoperabilidad con las plataformas
subyacentes.

Contenido
1.- Realizar (investigar) una interfaz gráfica elaborada con Visual Basic y agregar ejemplo práctico
de la interfaz.

Máquina de juego al azar

Este es un juego, en donde el usuario presiona el botón rojo ylos tres números de las etiquetas o
Labels comienzan a moverse al azar, luego al detenerse, si queda un 7 en la primera etiqueta o
queda el número 7 en las dos últimas casillas, entonces, se hará visible la imagen que en este caso
representa el premio por ganar.

Observe como se configuró el programa para que también lleve estadísticas de porcentaje, juegos
ganados y juegos jugados.

5
2.- Realizar (investigar) una interfaz gráfica elaborada con C, C#, C++ y agregar ejemplo práctico de
la interfaz.

Alguna vez has querido realizar ventanas emergentes o interfaces de usuario con el lenguaje de
C++, es muy sencillo y sólo utilizando una librería Windows.h que es de la librería appi y win32.

Nosotros sabemos que esto puede hacerse en menos de 5 minutos desde la consola, pero va a
demorar relativamente un poco si es que lo hacemos con interfaces gráficas.

Cuando lo tengamos instalado vamos a crear un nuevo proyecto nos vamos a empty Project y
vamos a darle la dirección aquí y el nombre de nuestro proyecto en este caso calculadora tenemos
que usar el compilador GNIU GCC Compiler y listo estamos creando nuestro primer proyecto.

Notaremos que en el workspace no se encuentra nada por lo que tenemos que crear un nuevo
archivo que se tendrá que guardar con la extensión .c. Llegados a este punto podremos escribir
nuestro código que debe incluir la librería mencionada en el primer párrafo.

6
En el ejemplo que se muestra observamos que el programa de la interfaz, nuestra línea de interés
es la 7, pues la que nos mostrará un mensaje en una ventana emergente, en nuestro caso el
mensaje es Hola Mundo.

Se mostrará de la siguiente forma el programa al compilarlo y ejecutarlo:

3.- Realizar (investigar) una interfaz gráfica elaborada con Java y agregar ejemplo práctico de la
interfaz.

JPanel
Ya creamos un marco de ventana para nuestra aplicacion de dibujo, ahora crearemos el "lienzo" en
el que pondremos nuestros dibujos. para ello ocuparemos la clase JPanel.
JPanel es un contenedor simple que nos permite añadirle objetos como botones, barras, dibujar
sobre el , etc...
Al igual que con JFrame debemos hacer que nuestra clase extienda de JPanel. Como sabemos una
clase no puede extender de mas de una clase a la vez por lo que se suelen crear dos clases a la
hora de crear una aplicación que dibuje.
JPanel y las clases que extiendan de ella cuentan con un método llamado paintComponent() que el
sistema llama automáticamente cada vez que se utiliza un objeto JPanel. y es necesario que
nosotros lo declaremos pues de lo contrario los objetos de JPanel podrían no mostrarse.

paintComponent requiere un argumento de tipo Graphics que sirve para crear dibujos y otras
graficas.
La primera linea dentro del método paintComponent debe ser:

super.paintComponen(g);
7
esto asegura que el panel se muestre apropiadamente en la pantalla. por lo tanto quedaria asi.

paintComponent(Graphics g)
{
super.paintComponent(g);
......
}

ahora a partir del objeto Graphics g podemos llamar a los metodos apropiados para dibujar ovalos,
cuadrados, letras etc...

lineas 1 y 2 - se hacen las importaciones de las clases que utilizaremos para dibujar. JPanel y
Graphics.
linea 4 - hacemos que nuestra clase herede de JPanel (extienda).
linea 6 - hacemos una sobre escritura del método paintComponent pasandole un argumento
Graphics para poder crear dibujos o lo que queramos (la g del parámetro es solo el nombre del
argumento, se pone g para saber que es un objeto Graphics pero puede ser cualquiera).
linea 8 - se hace la llamada directa al método de la superclase, a traves de super. esto se hace para
asegurar que se muestre correctamente en pantalla. yo he probado ejecutando los códigos sin esta
llamada y no he tenido problemas al mostrar los componentes, pero aun así, es mejor asegurarse,
ademas que esta llamada no genera desgaste de memoria.
Los metodos getWidth() y getHeight(); devuelven el ancho y la altura del panel en el momento
respectivamente. en caso de que agrandemos o disminuyamos el tamaño de la ventana y por lo
tanto del panel, se llama implícitamente a un método llamado repaint(); que vuelve a dibujar el objeto
en el panel.
la linea 11 - llama al metodo drawLine(x, y, x ,y); Este método dibuja una linea recta y recibe 4
argumentos de coordenadas. los primeros dos especifican el primer punto y las otras dos el punto
final, luego ambos puntos se unen formando la linea recta.
En este caso le pasamos (0 , 0 , ancho, alto); por lo que la linea inicial queda en la esquina superior
izquierda
8
(0, 0) y el segundo punto queda en la esquina inferior derecha (ancho, alto).
Recordemos que las variables ancho y alto reciben el tamaño del panel en el momento. osea si el
panel es de (300, 300) esas son las coordenadas de ancho y alto.
la linea 12 - pone drawLine(0 , alto, ancho , 0); con lo que ponemos el primer punto en la esquina
inferior izquierda (0 , alto) recordar que alto tiene el valor del tamaño de alto del panel, por lo que
queda de 0 horizontalmente y con alto para abajo.

acá el código de la clase ejecutora.

Este es el código de la clase que usamos para ejecutar el panel, si te fijas es practicamente la
misma que utilizamos para crear el marco. es mas ¡¡¡es la misma!!! solo tiene algunas variaciones.
en la linea 10 - llamamos al método setLocationRelativeTo(null); que como la dije se utiliza para
dejar la ventana en el medio de la pantalla.
linea 17 - se crea un objeto Panela que por consiguiente es un objeto JPanel.
linea 18 - se utiliza el método add de JFrame (recordar que Ventana1 por herencia es un objeto
JFrame) y añadimos el panel para que se muestre en la ventana, sino se hace esto a través
de "add" se mostrara solo el marco como en el primer ejemplo.
Ahora si agrandamos y disminuimos el tamaño de la ventana una vez ya ejecutada veremos como
las lineas se vuelven a dibujar quedando siempre de esquina a esquina.

4.- Realizar (investigar) una interfaz gráfica elaborada con Python y agregar ejemplo práctico de la
interfaz.

Si eres programador o has programado en Python, te habrás dado cuenta lo simple y sencillo que es
crear programas, pero también te has dado cuenta que uno de los inconvenientes que existen en
Python es la creación de interfaces gráficas.

Tenemos tkinter el modulo nativo para esta tarea, pero el desarrollarlas siempre es complicado y
acarrea el escribir muchas lineas de código.

¿Pero que pensarías si te dijera que existe otra solución más fácil para crear interfaces gráficas y
que incluso puedes hacerlo con una linea de código?
9
PySimpleGUI es un módulo para el diseño y creacion de interfaces graficas en Python.

Es simple, bello y elegante. Optimiza tus lineas de codigo y velocidad en la creacion las interfaces
graficas para tus proyectos en Python.

Primero debemos entender como funciona el diseñador de PySimpleGUI, en PySimpleGUI la

colocacion de los objetos gráficos se realiza a modo de filas y columnas, donde introducimos los
objetos de acuerdo al orden y posición que queremos que se visualicen.

Sigamos el ejemplo de las siguientes imágenes:

10
En este ejemplo vemos que el primer elemento es una etiqueta de texto, le sigue un cuadro de texto
y finalmente un boton. Sencillo, no?

Ahora veremos como es su programación en PySimpleGUI:

import PySimpleGUI as sg

layout = [[sg.Text('Enter a Number')],

[sg.Input()],

[sg.OK()] ]

event, values = sg.Window('Enter a number example', layout).Read()

sg.Popup(event, values[0])

¿Cómo debe verse la programación GUI en Python? ¿Al menos para principiantes?

Mientras que un objetivo era simplificar la creación de una GUI, otro objetivo tan importante era
hacerlo de manera pitónica. Es discutible si logró estos objetivos, pero fue un intento igual.

La clave para ventanas personalizadas en PySimpleGUI es ver ventanas como FILAS de elementos
GUI. Cada fila se especifica como una lista de estos elementos. Pon las filas juntas y tendrás una
ventana. Esto significa que la GUI se define como una serie de Listas, una forma pitónica de ver las
cosas.

11
Diseccionemos este pequeño programa

import PySimpleGUI as sg

layout = [[sg.Text('Rename files or folders')],

[sg.Text('Source for Folders', size=(15, 1)), sg.InputText(), sg.FolderBrowse()],

[sg.Text('Source for Files ', size=(15, 1)), sg.InputText(), sg.FolderBrowse()],

[sg.Submit(), sg.Cancel()]]

window = sg.Window('Rename Files or Folders', layout)

event, values = window.read()

window.close()

folder_path, file_path = values[0], values[1] # get the data from the values dictionary

print(folder_path, file_path)

Acordemos que la ventana tiene 4 filas.

La primera fila solo tiene texto ‘Rename files or folders’

La segunda fila tiene 3 elementos. Primero el texto ‘Source for Folders’, luego un campo de
‘submit’, luego un botón de ‘browse’.

Ahora veamos cómo esas 2 filas y las otras dos filas del código Python:

layout = [[sg.Text('Rename files or folders')],

[sg.Text('Source for Folders', size=(15, 1)), sg.InputText(), sg.FolderBrowse()],

[sg.Text('Source for Files ', size=(15, 1)), sg.InputText(), sg.FolderBrowse()],

[sg.Submit(), sg.Cancel()]]
12
¿Ves cómo el código fuente refleja el diseño? Simplemente haga listas para cada fila, luego envíe
esa tabla a PySimpleGUI para mostrar y obtener valores.

¿Y qué hay de esos valores de retorno? La mayoría de las personas simplemente quieren mostrar
una ventana, obtener los valores de entrada y hacer algo con ellos. Entonces, ¿por qué dividir el
código en devoluciones de llamada de botones, etc., cuando simplemente quiero que me den los
valores de entrada de mi ventana?

Para valores de retorno, la ventana se escanea de arriba a abajo, de izquierda a derecha. Cada
campo que es un campo de entrada ocupará un lugar en los valores de retorno.

En nuestra ventana de ejemplo, hay 2 campos, por lo que los valores de retorno de esta ventana
serán un diccionario con 2 valores. Recuerde, si no especifica un key al crear un elemento, se
creará uno para usted. Son ints que comienzan con 0. En este ejemplo, tenemos 2 elementos de
entrada. Serán direccionables como valores [0] y valores [1]

event, values = window.read ()

ruta_carpeta, ruta_archivo = valores [ 0 ], valores [ 1 ]

En una declaración, ambos mostramos la ventana y leemos las entradas del usuario. En la siguiente
línea de código, el diccionario de valores de retorno se divide en variables individuales
‘folder_path’ y ‘file_path’.

¿No es esto lo que quiere un programador de Python que busca una GUI? Algo fácil de trabajar para
obtener los valores y pasar al resto del programa, donde se está llevando a cabo la acción real. ¿Por
qué escribir páginas de código GUI cuando se puede lograr el mismo diseño con PySimpleGUI en 3
o 4 líneas de código? 4 líneas o 40? La mayoría elegiría 4.

5.- Realizar (investigar) una interfaz gráfica elaborada con Xamarin y agregar ejemplo práctico de la
interfaz.

En ocasiones es necesario mostrar resultados sencillos y de fácil lectura en nuestra aplicación, para
ello, utilizamos gráficas que representen información de una manera agradable a la vista, por esto te
enseñaré como crearlas. Veamos!

13
Para empezar… ¿Que necesitas?

• Agrega desde el Nuget Package el plugin: Microcharts.Forms

Empecemos!

Datos a configurar en las gráficas

Necesitamos establecer algunos datos para cada gráfica a crear. Veamos:

• Floating number indica el valor a representar en la gráfica. (Valor requerido).

• Color indica el color a desplegar en la gráfica.

• Label es la descripción o leyenda del gráfico.

• ValueLabel es la descripción o leyenda en la parte superior del gráfico, normalmente utilzada

para indicar porcentajes.

Y … en que formato se deben enviar estos datos?

Configuración en el XAML

En el XAML, debes de configurar el siguiente namespace:

Implementación:

14
También lo puedes realizar de la siguiente manera:

this.chartName.Chart=chart;

Tipos de Gráficas:

BarChart

Es es el tipo BarChart, donde son desplegados nuestros datos por medio a barras verticales.

Formas de implementación:

- varchart=newBarChart(){Entries=entries};

- Chart chartName => new BarChart() {Entries =entries}; — (Con esta forma podemos Bindear a la
propiedad Chart del XAML.)

LineChart

Es es el tipo LineChart, permite mostrar nuestra data por medio a una gráfica lineal.

Formas de implementación:

- varchart=newLineChart(){Entries=entries};

- Chart chartName => new LineChart() {Entries =entries};

15
PointChart

Este es el tipo PointChart, el cual permite desplegar nuestra data en lineas.

Formas de implementación:

- varchart=newPointChart(){Entries=entries};

- ChartchartName => new PointChart() {Entries =entries};

RadialGaugeChart

Este es el tipo RadialGaugeChart, el cual permite mostrar la data de manera circular por cada
grupo de datos.

Formas de implementación:

- varchart=newRadialGaugeChart(){Entries=entries};

- ChartchartName => new RadialGaugeChart() {Entries =entries };

6.- Realizar un manual de construcción de la interfaz gráfica

8.- Incluir en el manual:

a).- Imagenes, fotografías, capturas de pantalla del proceso de elaboración de la interfaz.
b).- Agregar descripciones aproximadas del funcionamiento de cada herramienta (item) usada en
la interfaz.
16
Para comenzar,se abre la aplicación de Visual Studio y se crea un nuevo proyecto con la plantilla de
Windows Forms App (.NET Framework).

Se nombran el proyecto y la solución del proyecto, además de que se selecciona la ubicación en la

que se guardará el proyecto.

17
Al crear el proyecto, aparece la siguiente ventana de trabajo, de lado izquierdo se encuentra la
cuadro de herramientas con los elementos que se pueden utilizar en la interfaz, mientras que de
lado derecho se encuentra el cuadro de propiedades la interfaz y sus elementos.

En el cuadro de herramientas se busca el apartado de contenedores, de donde se seleccionará la

herramienta de GroupBox, la cual tiene la función de agrupar lógicamente un conjunto de controles
en un formulario. Con esta herramienta se crean 6 recuadros en el formulario.

18
Después de haber creado los 6 GroupBox, se procede a darles formato en el cuadro de propiedades
con las dimensiones y ubicaciones adecuadas, además de asignar los nombres que mostrarán. Con
cada uno de los GruopBox se sigue el mismo proceso: se selecciona el contenedor (el GroupBox en
cuestión), se busca la propiedad “Size” para cambiar el ancho y el alto, la propiedad “Text” para
asignarle un texto para mostrar, y la propiedad “Location” para cambiar la ubicación en X y Y. En la
siguiente tabla se muestra cómo queda cada una de las propiedades modificadas.

19
Posteriormente,se selecciona el formulario Form1 (esto se puede hacer dándole clic en el fondo gris
de la pantalla) con el fin de cambiarsu nombre a “Interface” y dimensiones a (601, 382). Los cambios
a los GroupBox y al Form1 nos dejan con el siguiente resultado:

A continuación, se descarga un ícono (en este caso se escogió el ícono de Google Classroom) y se
coloca en la carpeta de la solución del proyecto.

20
Se selecciona la Form1 y en el cuadro de propiedades se busca la propiedad “Icon”, se le da clic al
cuadro con los tres puntos y aparecerá una ventana de búsqueda en la cual se selecciona el ícono
que recién se descargó.

21
Esto nos deja con los siguientes resultados:

Ahora, en el cuadro de herramientas, en el apartado de Menús y barras de herramientas, se busca

la herramienta de ToolStrip, la cual tiene como función crear barras de herramientas. Al dar clic en la
herramienta ToolStrip aparecerá dos cuadros: uno en la parte superior del Form1 y otro en un
apartado que se encuentra debajo del Form1 de abajo. El cuadro que se encuentra dentro del
Form1 representa el objeto que se puede editar, mientras que el de abajo sirve para indicar la
presencia de este tipo de menús en la aplicación.

El cuadro (o ícono) de la parte superior está compuesto por dos dibujos: una flecha en forma de
cuadrado y una flecha en forma de triángulo apuntando hacia abajo. Al darle clic a la flecha en forma
de triángulo, aparece un cuadro de opciones, del cual se selecciona Label.
22
Después de esta selección aparece un cuadro de etiqueta que dice ToolStripLabel1, a esta etiqueta
se le modifica el nombre a “Archivo” en la propiedad Text. En la misma etiqueta, se le da clic
derecho para ver un cuadro de opciones de donde se selecciona “convertir en”, y aparecerá otro
cuadro de opciones en el que se DroopDownButton.

Después de hacer estas modificaciones, en la etiqueta Archivo saldrá otro cuadro de texto que dice
Type Here (escriba aquí), se cambia ese texto a “Salir”.

23
A un lado de la etiqueta Archivo se siguen visualizando los íconos de flecha y triángulo, es así como
es posible repetir el proceso anterior: se selecciona el triángulo, luego la opción Label, y se le pone
como texto la palabra “Comunicación”.

En la etiqueta Comunicación, se da clic derecho para ver el cuadro de opciones de donde se

selecciona “convertir en”, y luego se selecciona DroopDownButton.

24
Después de hacer el cambio, en la etiqueta Comunicación saldrá otro cuadro de texto que dice Type
Here, ese texto se cambia a “Comunicación”.

Posteriormente, en el cuadro de herramientas se busca la opción de Componentes para de ahí

seleccionar la herramienta de SerialPort, la cual representa un elemento de entrada serial. Después
de esa acción saldrá un control en la parte inferior de la pantalla a un lado del control ToolStrip.

25
En el cuadro de herramientas se busca la opción Label dentro del apartado de controles comunes,
esto con el fin de crear dos de estas herramientas dentro del GroupBox1. Las Label sirven para
establecer etiquetas que, por lo general, muestran información.

26
A estas etiquetas recién creadas se les cambian los datos de nombre y ubicación.

Luego, en el cuadro de controles de comunes se busca la herramienta de Textbox, la cual es capaz

de permitir que el usuario introduzca datos. Se selecciona esta herramienta y se crea un TextBox
dentro del GroupBox2. Después de haber creado el TextBox1, en cuadro de propiedades,se
cambian la ubicación a (6, 19) y el tamaño a (270, 20).

27
Nuevamente se selecciona TextBox del cuadro de herramientas y se crea uno de estos objetos
dentro del GroupBox3. A este nuevo TextBox se le da la ubicación de (16, 20) y el tamaño de (260,
20).

En el cuadro de controles comunes, se busca la herramienta Button, la cual crea un botón que lleva
a cabo una determinada opción al hacer clic sobre él. Este botón se crea en el GroupBox3 y se le
cambia el nombre a “Transmitir”, la ubicación a (94, 47), y la posición a (103, 35).

28
A continuación, se selecciona la herramienta Label y se crean cuatro de estas en el GroupBox4. Las
propiedades de las etiquetas se establecen según lo indicado en la siguiente tabla:

Al terminar el paso anterior, se procede a buscar la herramienta de PictureBox en el cuadro de

controles comunes y se crean cuatro objetos en el GroupBox4. Esta herramienta sirve para mostrar
una imagen en el recuadro designado.
29
A estos objetos se les asignan las siguientes propiedades:

30
Ahora se proceden a crear 8 botones en el GroupBox4, estos tendrán las siguientes propiedades:

31
Con la herramienta Label, se crean 8 etiquetas en el GroupBox5.

32
Ahora con la herramienta PictureBox, se crean cuatro recuadros en GroupBox5, entre las etiquetas
creadas anteriormente.

A estos PictureBox se les cambian las propiedades a los parámetros que se presentan en la tabla.

33
En el GroupBox6, se crean ocho Label, las cuales tendrán las siguientes características:

34
Finalmente, del cuadro de controles comunes se selecciona la herramienta de ListBox, esta crea
una lista desplegable de la cual el usuario puede seleccionar un ítem. La ListBox se crea en el
espacio que se encuentra entre el GroupBox2 y el GroupBox3, y se le establece un tamaño de (76,
43) y una ubicación de (99, 191). También se busca la propiedad “Visible” y se le da el valor de
False, lo que ocasionará que este objeto no sea visible para el usuario.

Entonces, este es el resultado final de la interfaz a utilizar:

35
Lo anterior finaliza la parte visual de la interfaz, el siguiente paso consiste en crear la programación,
la cual fue proporcionada por el instructor del curso.

Para abrir la ventana de programación es necesario posicionar el cursor en la Form1 (de preferencia
en el centro de la barra azul) y se le da doble clic para abrir la ventana donde se podrá programar.

Esta ventana se abre con un código “base”, el cual se seleccionará para borrarlo y cambiarlo por el
código que se presenta en las siguientes páginas.

Al terminar de colocar el código, es posible decir que se termina la realización de la interfaz gráfica
con la que se trabajará para probar la placa construida durante el curso.

36
37
38
39
40
41
7.- Realizar un diagrama de Gant, donde se establezca el tiempo utilizado en cada parte del proceso
de la elaboración de la interfaz gráfica con cada lenguaje de programación antes mencionado.

9.- Agregar selfie de equipo o captura de pantalla de los integrantes que participaron en la
elaboración de la tarjeta.

Conclusión

Trabajar con Visual Studio para elaborar una interfaz resultó ser bastante sencillo de comprender en
la parte de la creación gráfica, puesto que lo que había que hacer para construir el entorno visual
consistía en colocar objetos basados en herramientas para posteriormente modificarlos en sus
propiedades, esto con el fin de que tuvieran un orden visual y que coincidieran con el propósito que
se les iba a asignar en la programación.

La parte de la programación fue un poco más difícil de comprender debido a que nunca habíamos
trabajado con Visual Basic, pero comenzamos a entender cómo funciona este lenguaje y cómo
utilizarlo conforme fuimos trabajando con el software, esto nos permitió evitar errores al momento de
depurar el código, lo que nos da la confianza de que el programa realizado funcionará
correctamente.

Referencia Bibliográfica

R.S., & R.S. (2023, 27 octubre). Visual basic ¿Qué es?: Te explicamos qué es VB.net y para qué
sirve. El Progreso de Lugo. https://www.elprogreso.es/articulo/comunicados/visual-basic-que-es-
explicamos-que-es-vb-net-que-sirve/202310271144061702967.html
C, C++ y C# diferencias Te lo contamos en 1 minuto. (s. f.). Imagina Formación.
https://imaginaformacion.com/diccionario-informatico/c-c-y-c-diferencias
¿Qué es Java?: Guía de Java para principiantes. (2022). Microsoft Azure. Recuperado 16 de
noviembre de 2023, de https://azure.microsoft.com/es-es/resources/cloud-computing-
dictionary/what-is-java-programming-language
¿Qué es Python? - Explicación del lenguaje Python - AWS. (s. f.). Amazon Web Services, Inc.
https://aws.amazon.com/es/what-
is/python/#:~:text=Python%20es%20un%20lenguaje%20de,ejecutar%20en%20muchas%20platafor
mas%20diferentes.
Profexorgeek. (2023, 13 julio). ¿Qué es xamarin? - Xamarin. Microsoft Learn.
https://learn.microsoft.com/es-es/xamarin/get-started/what-is-xamarin

42