Unidad 2 Diseño de interfaces mediante NET

Vista previa del material en texto

Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 
 
 
 
 
 
Ingeniería en Desarrollo de Software 
 
8º Cuatrimestre 
 
 
 
Programa de la asignatura: 
Programación .NET III 
 
 
 
Unidad 2. Diseño de interfaces mediante .NET 
 
 
 
Clave: 
150930934 
 
 
Universidad Abierta y a Distancia de México 
UnADM 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 1 
Índice 
 
Unidad 2. Diseño de interfaces mediante .NET ..................................................................... 2 
Presentación de la unidad ...................................................................................................... 2 
Propósitos ............................................................................................................................... 2 
Competencia específica ......................................................................................................... 3 
2.1. Entorno de desarrollo ...................................................................................................... 3 
2.1.1. Herramientas ................................................................................................................ 3 
2.1.2. Examinador de objetos................................................................................................. 9 
2.1.3. Barra de propiedades ..................................................................................................11 
2.1.4. Explorador de soluciones ............................................................................................13 
2.1.5. Vistas ...........................................................................................................................16 
Actividad 1. Entorno de desarrollo ........................................................................................18 
2.2. Aplicaciones de escritorio...............................................................................................19 
2.2.1. Creación de un nuevo proyecto ..................................................................................19 
2.2.2. Formularios ..................................................................................................................23 
2.2.3. Componentes comunes ..............................................................................................24 
2.2.4. Componentes para acceso a bases de datos ............................................................26 
2.2.5. Menús ..........................................................................................................................28 
Actividad 2. Interfaces ...........................................................................................................34 
2.3. Propuesta de diseño.......................................................................................................35 
2.3.1. Usabilidad ....................................................................................................................35 
2.3.2. Creación de formularios en VB.NET ...........................................................................38 
Actividad 3. Usabilidad ..........................................................................................................42 
Autoevaluación ......................................................................................................................43 
Evidencia de aprendizaje. Diseño de interfaces mediante .NET .........................................43 
Autorreflexiones .....................................................................................................................44 
Cierre de la unidad ................................................................................................................44 
Fuentes de consulta ..............................................................................................................45 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 2 
Unidad 2. Diseño de interfaces mediante .NET 
 
Presentación de la unidad 
 
Te damos la más cordial bienvenida a la Unidad 2 Diseño de interfaces mediante .NET en 
la cual se abordarás temas relacionados a la creación de interfaces utilizando el lenguaje 
Visual Basic .NET. El diseño de interfaces se refiere a la creación de las pantallas o los 
formularios por los cuales el usuario tendrá acceso a los datos que se almacenan en la 
base de datos y podrás desarrollar una interfaz gráfica de usuario que va a interactuar con 
una tabla en la base de datos (Bill, Hollis, Sharkey, Marbutt, Windsor e Hillar, 2010). La 
interfaz gráfica de usuario integra todos los elementos gráficos para comunicarse con un 
sistema, mediante el diseño de la interfaz se sintetiza una idea, se materializa y se 
construyen los mensajes que permiten la comunicación usuario-sistema, las transforma 
en códigos visuales o auditivos de manera que la interacción, la usabilidad y el manejo del 
mensaje visual logren una empatía en cuanto a la interacción del usuario y la interfaz, 
(Luna, 2004). 
 
En la unidad 1 Conexión con bases de datos en .NET se abordaron las tecnologías .NET 
de acceso a datos, el uso de la tecnología ADO .NET para recuperar y modificar datos así 
como los análisis de requerimientos y el diseño de una base de datos relacional. 
En esta unidad se abordará la forma en que se utiliza el entorno de desarrollo para Visual 
Basic .NET el cual será Visual Studio 2010, aprenderás desde cómo iniciar un nuevo 
proyecto hasta los componentes comunes que .NET brinda en el desarrollo de una 
interfaz gráfica de usuario para interactuar con bases de datos. 
También comprenderás la importancia de los formularios y la usabilidad de sistemas de 
escritorio para lograr que todos los desarrollos sean de calidad y cumplan con las 
especificaciones que los clientes solicitan tanto gráficamente (aquí se refiere a los 
formularios) como respecto a la funcionalidad y la facilidad de acceso y uso del software. 
 
 
Propósitos 
 
Al finalizar el estudio de esta unidad podrás: 
 
 Identificar los tipos de controles de bases de datos mediante la tecnología .NET. 
 Resolver problemas de procesamiento de información, mediante una interfaz 
gráfica de usuario desarrollada con .NET. 
 Desarrollar formularios en el entorno de desarrollo Visual Studio utilizando el 
lenguaje Visual Basic. NET. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 3 
Competencia específica 
 
 Diseñar interfaces gráficas de usuario con los estándares de usabilidad para 
interactuar con la base de datos a partir de la tecnología .NET. 
 
 
2.1. Entorno de desarrollo 
 
El entorno de desarrollo es la base para la creación de una interfaz gráfica ya que es en 
este entorno donde además de programar se diseñan las ventanas o formularios, que 
servirán para interactuar directamente con el usuario y el sistema. 
 
En esta unidad aprenderás a utilizar el entorno de desarrollo de Visual Studio 2010 el cual 
es un entorno de desarrollo integrado IDE (por sus siglas en inglés, Integrated 
Development Environment) que es un software especializado que utilizan los 
programadores para desarrollar aplicaciones de escritorio haciendo uso del lenguaje de 
programación Visual Basic .NET (Stephens, 2010), mediante una serie de herramientas 
que se encuentran disponibles en Visual Studio 2010, utilizando estándares de usabilidad 
para un correcto funcionamiento para diseñar las interfaces gráficas. 
 
Es importante mencionar que en esta asignatura se utilizará la versión de Visual Studio 
2010 ya que el entorno y herramientasque se utilizan en esta versión y en las más 
actuales como Visual Studio 2012 y 2013 son muy semejantes y se adaptan a las 
necesidades laborales que se requieren hoy en día tales como: 
 
 Aplicaciones de Escritorio. 
 Sistemas y páginas web. 
 Aplicaciones para dispositivos Móviles. 
 
 
2.1.1. Herramientas 
 
Visual Studio proporciona dentro de su entorno de trabajo una serie de objetos necesarios 
para poder crear aplicaciones de escritorio entre ellos la ToolBox (Caja de Herramientas) 
es uno de los múltiples componentes que proporciona Visual Studio para poder realizar un 
nuevo proyecto. 
 
En este tema se mostrará la ubicación de los elementos en el entorno Visual Studio 2010 
y en el tema 2.2. Aplicaciones de escritorio se abordará lo correspondiente a cómo crear 
un proyecto y trabajar en este ambiente. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 4 
Después de haber configurado las propiedades iniciales de Visual Studio 2010 como la 
instalación y creación de un nuevo proyecto (la instalación y creación de un nuevo 
proyecto se revisará en el siguiente tema 2.2 Aplicaciones de escritorio), se puede 
empezar a diseñar la interfaz de usuario de una aplicación agregando diversos objetos 
que brinda la caja de herramientas. La caja de herramientas se muestra después de crear 
un nuevo proyecto y solamente se observará y se podrá utilizar en el modo diseño dentro 
de las vistas, las cuales se explicarán más adelante en el tema 2.1.5 Vistas de esta 
misma unidad. Esta caja de herramientas se desplegará en el extremo izquierdo de la 
pantalla principal de Visual Studio haciendo clic en el botón ToolBox, como se observa en 
la siguiente imagen. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 5 
 
 
Ubicación del ícono ToolBox en la pantalla principal de Visual Studio
Botón 
ToolBox 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 6 
Al dar clic en el ToolBox aparece la caja de herramientas ToolBox. 
 
Caja de herramientas de Visual Studio 
 
Todos los componentes que se encuentran en la caja de herramientas o ToolBox, se 
utilizan para diseñar una interfaz y como ya se mencionó solamente puede ser utilizada 
en la vista diseño del proyecto. Los componentes que se encuentran en la barra 
ToolBox son muy importantes, ya que con ellos el usuario podrá ingresar los datos que 
posteriormente se almacenarán, modificarán o eliminarán de una base de datos. 
 
A continuación se describen brevemente cada uno de los componentes más utilizados de 
la caja de herramientas (Bill, Hollis, Sharkey, Marbutt, Windsor, e Hillar, 2010): 
 
 Pointer: Se utilizará para poder seleccionar un componente de la interfaz. 
 Button: Crea un botón dentro de una interfaz para realizar una acción. 
 CheckBox: Crea una caja de selección. 
 CheckdListBox: Genera un cuadro de lista. 
 ComboBox: Crea una lista desplegable de opciones. 
 DateTimePicker: Crea un elemento de fechas y horas. 
 Label: Crea una etiqueta o caja de texto 
 LinkLabel: Genera vínculos Web. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 7 
 ListView: Muestra de elementos de iconos. 
 MaskedTextBox: Genera una restricción de los datos introducidos por el usuario. 
 MonthCalendar: Inserta un calendario gráfico para seleccionar fechas. 
 NotiflyIcon: Muestra iconos ejecutables en segundo plano. 
 PictureBox: Se utiliza para poder visualizar imágenes, iconos o gráficas. 
 ProgressBar: Indica la progreso o estado de una acción. 
 RadioButton: Presenta una lista de cada componente de un CheckBox, se 
observan dos estados el seleccionado y no seleccionado, es decir, se puede 
seleccionar sólo una opción. 
 RichTextBox: Permite escribir y manipular textos con formatos. 
 TextBox: Genera una caja de texto que pude contener caracteres numéricos o 
alfanuméricos. 
 ToolTip: Despliega en texto emergente cuando el puntero se encuentra sobre un 
componente. 
 TreeView: Genera un árbol de nodos. 
 WebBrowser: Hospeda páginas Web y proporciona recursos de exploración Web 
de internet a la aplicación. 
 
A continuación se muestra el uso de algunos componentes dentro de un formulario:
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 8 
 
 
Formulario con componentes de la Caja de Herramientas de Visual Studio 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 9 
Los recuadros numerados de la caja de herramientas de Visual Studio en la imagen 
anterior corresponden a los siguientes elementos. 
1. Label 
2. CheckBox 
3. TextBox 
4. Button 
5. PictureBox 
6. MonthCalendar 
7. TreeView 
8. WebBrowser 
9. DateTimePicker 
10. RichTextBox 
11. LinkLabel 
12. RadioButton 
 
En conclusión la caja de herramientas permite diseñar una interfaz de usuario con una 
variedad de componentes que el programador pueda utilizar dependiendo de las 
necesidades de la aplicación, estas pueden ser formularios o ventanas emergentes, 
recuerda que un formulario. 
 
Las herramientas que proporciona Visual Studio son de suma importancia para diseñar 
interfaces graficas de manera fácil y rápida, más adelante se verá más a detalle el uso de 
estos componentes en el tema 2.2.3 Componentes Comunes. En el siguiente tema 2.1.2 
Examinador de Objetos, aprenderás tener accesos a diferentes objetos que están dentro 
de una aplicación incluyendo los elementos utilizados de la caja de herramientas, todo 
esto con la finalidad de acceder a cada uno de estos objetos de una mera más rápida. 
 
 
2.1.2. Examinador de objetos 
 
Cuando se está desarrollando una aplicación en Visual Studio es importante tener un 
control de los objetos que se están utilizando ya sean componentes, clases, métodos, 
variables, etcétera, esto con la finalidad de tener acceso fácil a cada uno de estos objetos 
en cualquier momento que se necesiten dentro del entorno de desarrollo. En este tema 
revisarás la forma en que están estructurados los objetos que contienen las aplicaciones 
que se realizan en Visual Studio, y la forma en que se puede tener accesos a estos 
objetos para poder utilizarlos en cualquier momento dentro de una aplicación. 
 
El examinador de Objetos de Visual Studio es un panel que contiene los objetos que se 
están utilizando durante el desarrollo de una aplicación (Stephens, 2010). Este 
Examinador de Objetos muestra los componentes, símbolos, clases, métodos, eventos, 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 10 
variables, constantes entre otros elementos contenidos en el proyecto como se muestra 
en la imagen siguiente. Para poder visualizar el explorador de objetos se puede ir al 
menú View/Object Browser. 
 
 
 
 
 
 
 
 
 
Acceso al explorador de objetos (Object browser) 
Al dale clic en Object Browser desplegará un panel en el extremo izquierdo de la pantalla 
donde se muestran los objetos que se están utilizando actualmente. También es posible 
visualizar de manera estructurada los elementos que contiene cada objeto que se está 
utilizando de forma jerárquica. El explorador de objetos contiene tres tipos de páneles: 
 Panel de objetos 
 Panel de miembros 
 Panel de descripción 
 
 
 
 
 
 
 
 
 
Explorador de objetos (Object Browser) 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 11 
Panelde Objetos: Contiene los componentes que se están utilizando en nodos de forma 
jerárquica que pueden expandirse o retraerse al hacer click en cada uno de los nodos. 
Panel de Miembros: Dentro de este panel es posible visualizar los métodos, eventos, 
constantes y variables. 
Panel de descripción: Muestra a detalle información de cada objeto seleccionado. 
En la imagen siguiente se muestra la ubicación de estos páneles dentro del Explorador de 
Objetos: 
 
 
 
 
 
 
 
 
 
Páneles del Explorador de Objetos 
 
En conclusión el Explorador de Objetos (Object Browser) permite mostrar los 
componentes que se están utilizando cuando se está realizando una aplicación, muestra 
también las características de cada objeto, esto ayuda a los desarrolladores a interactuar 
con cada uno de los elementos de un proyecto, también por medio de la barra de 
propiedades es posible configurar de manera rápida algunos de estos objetos como es el 
caso de los componentes de la barra de propiedades que es el siguiente tema de esta 
unidad 2.1.3 Barra de Propiedades. 
 
 
2.1.3. Barra de propiedades 
 
En este tema se muestran las características y propiedades de los elementos de diseño 
que se utilizan dentro de cualquier aplicación que se esté desarrollando en Visual Studio, 
así como también las posibles configuraciones de cada uno de los componentes 
utilizados. 
 
Panel de Objetos 
Panel de 
Miembros 
Panel de 
Descripción 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 12 
La Barra de propiedad es un panel que muestra a detalle las propiedades y características 
de un componente dentro de una aplicación, estos pueden ser: Label, TextBox, 
RadioButtons, ComboBox, etcétera (MSDN, 2013d). 
 
La barra de propiedades muestra a detalle cada una de las características de los 
elementos que se encuentren en una aplicación, esto se despliega en el extremo derecho 
de la pantalla principal de Visual Basic que se muestra a continuación, podrás observar 
que al seleccionar algún elemento dentro de la aplicación, por ejemplo si se cuenta con un 
formulario (se explicará el tema sobre formularios en el tema 2.2.2 Formulario) que 
contenga un botón y un cuadro de texto, en la barra de propiedades se desplegarán las 
características y propiedades que tiene el TextBox, en el cual es posible cambiar el 
tamaño, color, ubicación, etcétera. 
 
Pantalla de formulario 
 
El recuadro de la derecha de la imagen anterior, es la barra de propiedades, esta barra 
ofrece múltiples opciones de configuración para cada uno de los elementos de una 
aplicación, también es posible programar algún evento (por ejemplo un evento es una 
acción que se realiza al hacer clic en un botón) para dicho componente. 
 
Por ejemplo en la imagen anterior se observa que al hacer clic en el Button (botón) que es 
un componente de la caja de herramientas se observan las propiedades de dicho botón 
en el recuadro de la derecha de la imagen donde se puede cambiar el color de fondo, 
color de la fuente, tamaño, etcétera; a manera de ejemplo se cambiará el color de la 
fuente y letra quedando de la siguiente manera. 
Formulario con un 
Botón y Caja de Texto 
Barra de Propiedades activada 
al hacer clic en el botón 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 13 
 
Imagen de Botón modificado del color de fondo y letra. 
Es muy importante el uso de la Barra de propiedades cuando se está desarrollando una 
aplicación en Visual Studio ya que esta permite configurar las propiedades de cada 
elemento de la caja de herramientas que se esté diseñando una interfaz. 
 
 
2.1.4. Explorador de soluciones 
 
Cuando se realiza una aplicación es muy importante tener organizados los archivos que 
se están utilizando dentro de la aplicación que se está haciendo es por eso que Visual 
Studio proporciona un explorador de soluciones SE (por sus siglas en inglés Solution 
Explorer). 
 
El Explorador de soluciones es un panel que permite a los desarrolladores mantener 
organizados los archivos que se están utilizando dentro de un proyecto (MSDN, 2013b), 
muestra una vista organizada de los elementos que están relacionados con la aplicación 
que se está desarrollando, así como también permite un acceso rápido a los comandos 
referentes a ellos. El explorador de soluciones se encuentra en el extremo derecho de la 
pantalla como se muestra en la imagen siguiente, o también se puede tener acceso desde 
el menú ver/Explorador de Soluciones (Solution Explorer). 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 14 
 
 
 
 
 
 
 
 
 
 
 
Imagen del explorador de soluciones de Visual Basic 
 
Dentro del explorador de soluciones es posible tener varios proyectos al mismo tiempo lo 
que permite un acceso rápido y sencillo, una aplicación se conforma de varios proyectos 
dentro de Visual Studio, que pueden ser: formularios, clases, métodos, componentes, 
etcétera, todos ellos pueden pertenecer a una misma aplicación, en el explorador de 
soluciones es posible archivar y visualizar varios de los proyectos que pertenecen a la 
misma aplicación. 
 
El explorador de soluciones genera una vista árbol que permite contener en cada proyecto 
los componentes de los cuales se conforma cada uno de ellos manteniendo siempre 
activo el proyecto que se esté utilizando así como la estructura de las carpetas que 
están relacionadas a cada proyecto. También es posible seleccionar cada nodo (un nodo 
contiene sus propios elementos) para poder visualizar los elementos que contiene cada 
proyecto como se observa en la imagen anterior y si desea contraer u ocultar los 
elementos visibles solamente se debe de dar clic en el mismo nodo para poder ocultarlos 
como se observa en la imagen siguiente: 
 
 
 
 
 
 
 
 
Explorador de Soluciones 
(Solution Explorer) 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 15 
 
 
 
 
 
 
 
 
 
Imagen del explorador de soluciones 
 
 
 
 
 
 
 
 
 
 
 
Imagen del explorador de soluciones con los nodos contraidos 
En conclusión, es posible decir que el explorador de soluciones permite archivar de una 
manera más práctica y organizada los proyectos que se están utilizando durante el 
desarrollo de una aplicación, esto permite tener un acceso más rápido a cada uno de los 
componentes de cada proyecto que se está desarrollando ya sean interfaces o código de 
programación. En el siguiente tema 2.1.5 Vistas se explicara cómo se puede interactuar 
con las interfaces y el código de programación. 
 
 
 
 
En esta imagen el Árbol de vistas 
presenta los nodos de cada 
proyecto abiertos. 
En esta imagen se 
observa el Árbol de 
vistas donde aparecen 
los nodos de cada 
proyecto contraídos. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 16 
2.1.5. Vistas 
 
En el entorno de desarrollo de Visual Studio las vistas son de suma importancia ya que es 
lo que más se utiliza cuando se está desarrollando una aplicación dentro del entorno de 
desarrollo ya que éstas permiten interactuar con el diseño y el código al mismo tiempo. 
 
Las vistas son accesos a diferentes elementos del entorno de desarrollo de Visual Studio 
que se utilizan durante el desarrollo de una aplicación (Stephens, 2010). 
 
Dentro de Visual Studio es posible visualizar los componentes que integran una aplicación 
de dos formas: 
 Vista de diseño. 
 Vista de código. 
 
Las cuales pueden ser utilizadas dependiendo de las necesidades del programador. 
La vista de diseño que puedes observar enla siguiente imagen, se utiliza para poder 
mostrar y diseñar una interfaz gráfica de una aplicación dentro de la cual se pueden 
agregar y eliminar componentes visuales como son botones, cajas de textos etiquetas 
tablas etcétera. 
 
Imagen de pantalla Vista de diseño 
 
La vista de código que puedes observar en la siguiente imagen, muestra todo el código 
que contiene la aplicación que se está desarrollando así como también se visualizan 
mediante esta vista los métodos, clases, eventos etcétera, de la aplicación. La vista de 
código se despliega cuando se da doble click en un componente y también es posible ir 
directamente a un evento de un botón, caja de texto, radioButton, etcétera, para poder 
programar el evento que se quiere realizar a manera de ejemplo se da doble clic en el 
Al hacer doble clic sobre el 
botón se accede a la vista 
código para su 
programación 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 17 
 
botón que se muestra en el recuadro de la imagen anterior y se accede a la vista de código: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Imagen de pantalla Vista de código 
Código del Botón 1 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 18 
También se puede acceder a las diferentes vistas de Visual Studio desde el menú View 
(Vista). 
 
Cuando se está desarrollando una aplicación en Visual Studio las vistas son de gran 
utilizad, ya que por un lado permiten ver el diseño de la aplicación y por otro lado el 
código que lo hará funcionar. 
 
Ahora que ya conoces los páneles, herramientas y componentes más utilizados en el 
entorno de desarrollo de Visual Studio podrás empezar a crear tus aplicaciones de 
escritorio con interfaces gráficas las cuales abordarás con detalle en el tema 2.2 
Aplicación de Escritorio. 
 
 
Actividad 1. Entorno de desarrollo 
 
El propósito de esta actividad es que identifiques los elementos del entorno Visual 
Studio 2010 para Visual Basic, así como sus funciones, para ello, sigue estos pasos: 
 
1. Identifica los componentes del entorno de desarrollo Visual Studio 2010: 
herramientas, examinador de objetos, barra de propiedades, explorador de 
soluciones, vistas. 
 
2. Elabora una presentación donde menciones las funciones de los componentes 
del entorno de desarrollo que identificaste y ejemplifica un caso de uso de los 
páneles y herramientas de Visual Studio. 
 
3. Identifica una situación de conexión de bases de datos donde aplicarías el 
entorno Visual Studio mencionando cuál sería su finalidad y si solucionaría un 
problema, atendería una necesidad o se insertaría como un área de oportunidad. 
 
4. Plantea el proyecto de aplicación del entorno Visual Studio de la situación que 
identificaste. 
 
5. Guarda la actividad con el nombre DPRN3_U2_A1_XXYZ. Sustituye las XX por 
las dos primeras letras de tu primer nombre, la Y por tu primer apellido y la Z por 
tu segundo apellido y envía el archivo a tu Facilitador(a) para recibir 
retroalimentación mediante la herramienta Tareas. 
 
*No olvides consultar los Criterios de evaluación de actividades de la Unidad 2, para 
considerarlos en el desarrollo de esta actividad. 
 
 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 19 
2.2. Aplicaciones de escritorio 
 
En el tema anterior aprendiste en términos generales el entorno de desarrollo para Visual 
Basic .NET el cual es Visual Studio 2010, en los siguientes capítulos de este subtema 
aprenderás sobre el desarrollo de aplicaciones de escritorio en este entorno. 
 
En la actualidad existen 3 tipos de aplicaciones (Liberos, Núñez, Bareño, García del Poyo, 
Gutiérrez-Ulecia y Pino, 2013): 
Aplicaciones de escritorio: Estas son las que se instalan y ejecutan desde una 
computadora un ejemplo de estas son los programas como, un antivirus, programas de 
edición de texto, de plantillas de presentaciones, hojas de cálculo, etcétera. 
Aplicaciones Web: estas aplicaciones son las que se encuentran en un servidor en la 
internet, y puedes acceder a ellas mediante una conexión a internet y un dominio que en 
este caso será la dirección en la cual este alojada la aplicación. 
Aplicaciones móviles: Estas son más nuevas y son las que se instalan y ejecutan en tu 
teléfono o Tablet son diseñadas exclusivamente para que las puedas usar en tus 
dispositivos móviles. 
En esta materia aprenderás cómo desarrollar aplicaciones de escritorio usando el 
lenguaje Visual Basic .NET así como la forma en que puedes acceder o conectarte a una 
base de datos MySQL para insertar, modificar o eliminar registros de una base de datos. 
 
 
2.2.1. Creación de un nuevo proyecto 
 
Para empezar a desarrollar aplicaciones de escritorio el primer paso es crear un proyecto, 
este proyecto llevará un nombre y en él estarán todas las interfaces de usuario que 
desarrollarás. Recuerda que estas interfaces son las que le permitirán al usuario usar de 
manera correcta el software que estés desarrollando. 
 
Para la creación de un nuevo proyecto el primer paso será ejecutar el entorno de 
desarrollo, al estar listo verás una pantalla como la siguiente: 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 20 
 
Pantalla de inicio de Visual Studio 
En esta pantalla observarás dos formas de iniciar un nuevo proyecto de Visual Basic. 
NET, la primera es la barra de menú en la opción File (Archivo), seleccionar New 
(Nuevo) y dar clic en la opción Project (Proyecto), tal como se muestra en la imagen de la 
pantalla Crear un nuevo proyecto mediante la barra de menú, que se observa en la 
imagen siguiente: 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 21 
 
Pantalla Crear un nuevo proyecto mediante la barra de menú 
La segunda forma es un poco más sencilla, ya que al momento de ejecutar el entorno de 
desarrollo muestra una página de inicio, en esa página se encuentra un botón para crear 
un nuevo proyecto el cual dice New Project, como se muestra en la siguiente imagen.
Pantalla Crear un nuevo proyecto mediante la página de inicio 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 22 
En cualquiera de las dos formas antes mencionadas que se desee iniciar un nuevo 
proyecto el siguiente paso será seleccionar el tipo de proyecto que se requiera crear. En 
esta asignatura se desarrollará en Visual Basic .Net para aplicaciones de escritorio, para 
esto deberás seleccionar las opciones que se muestran en la pantalla Crear un Nuevo 
proyecto Visual Basic de Escritorio. Como se observa en la siguiente imagen. 
Pantalla Crear un nuevo proyecto Visual Basic de escritorio 
Un punto muy importante es también seleccionar un nombre para el proyecto y la 
ubicación donde se va a guardar dentro de la computadora, aún si no seleccionas 
ningún nombre el programa asignará un nombre automáticamente y una ruta por defecto 
y estos valores los podrás cambiar más a delante si así lo deseas. 
Recuerda que realizar un proyecto es muy importante ya que éste, contendrá todas las 
interfaces gráficas que vas a desarrollar para un proyecto en específico. 
En conclusión, con esto tendrás listo todo para empezar a crear aplicaciones de escritorio 
con Visual Basic .NET utilizando el entorno de desarrollo Visual Studio 2010 en el 
siguiente capítulo aprenderás qué es un formulario y su función en el desarrollo de 
aplicaciones de escritorio. 
 
 
 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante.NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 23 
2.2.2. Formularios 
 
Los formularios son muy importantes en todo tipo de aplicaciones ya que será lo que le 
permita al usuario o a la persona que manipule el software, darle un uso adecuado y 
capturar los datos que se almacenarán en la base de datos. 
 
Un formulario es utilizado en informática para referirse al conjunto de campos solicitados 
por un determinado programa, los cuales se almacenarán para su posterior uso o 
manipulación (Desongles y Moya, 2006). Cada campo tiene un objetivo, por ejemplo, el 
campo Nombre se espera que sea llenado con el dato correspondiente, el campo Año de 
nacimiento, se espera que sea llenado con un número válido para un año. 
Un formulario en Visual Basic es la parte que verá el usuario, por la cual realizará todas 
las operaciones que el software le permita. Este formulario contendrá componentes los 
cuales se abordarán en el siguiente capítulo. 
Cabe señalar que un formulario tendrá los campos que se piden para llenar una tabla en 
la base de datos, por ejemplo se está haciendo un software para una empresa de venta 
de accesorios para computadoras este sistema se está desarrollando con Visual Basic 
.NET y MySQL, este software en los requerimientos que se hicieron, el cliente solicitó 
contar con un catálogo de clientes donde pueda consultar los siguientes datos: 
 Clave del cliente. 
 Nombre del cliente. 
 Dirección del cliente. 
 Nombre del negocio. 
 
Para esto la empresa que está desarrollando el proyecto realizó una tabla dedicada para 
el catálogo de clientes, pero como se mencionó anteriormente al inicio de este subtema, 
se necesita un formulario donde los usuarios del sistema capturen, modifiquen y 
eliminen los datos de los clientes que se almacenan en esta tabla, a continuación se 
muestra un ejemplo de cómo quedaría un formulario realizado en Visual Basic .NET de 
acuerdo a los requerimientos solicitados en el ejemplo anterior el formulario se nombra 
Formulario Alta Clientes como se observa en la siguiente imagen. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 24 
 
Pantalla Formulario Alta Clientes 
 
Como puedes observar esta pantalla contiene los campos que el cliente solicitó en los 
requerimientos y está realizada con componentes comunes de Visual Basic .NET, de los 
cuales conocerás sus funciones y características más a detalle en el siguiente subtema 
2.2.3. Componentes comunes. 
 
 
2.2.3. Componentes comunes 
 
Una parte muy importante en el desarrollo de formularios en Visual Basic son los 
componentes, estos te permitirán darle forma a el formulario que estés desarrollado, a lo 
largo de este capítulo aprenderás cuáles son estos componentes y cómo usarlos en las 
aplicaciones de escritorio utilizando el lenguaje Visual Basic. 
Se le conocen como componentes comunes porque recuerda que .NET no sólo es Visual 
Basic, también existe C#, C++ y F# y estos lenguajes de programación también 
corresponden a .NET. Estos componentes aparecen en cualquiera de los lenguajes de 
programación antes descritos y de ahí proviene el nombre de componentes comunes. 
Estos componentes son los que te ayudarán a como desarrollador a crear tus 
aplicaciones de escritorio. Estos están disponibles en el entorno de desarrollo Visual 
Studio 2010 en la pestaña ToolBox y sólo los podrás usar una vez que hayas creado tu 
proyecto y estés en la vista de diseño. En la siguiente pantalla de Componentes se 
muestra cómo acceder a dichos componentes. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 25 
 
Componentes 
Los componentes que se utilizan con mayor frecuencia para el diseño de interfaces en 
todos los proyectos de software de escritorio mediante .NET son: 
 Button : Con este componente el usuario podrá realizar acciones en un 
formulario tales como guardar la información, eliminarla o editarla según sea el 
caso. 
 TextBox : En un cuadro de texto el usuario podrá capturar la 
información que se le pida en un formulario. 
 Label : Una etiqueta no tiene ninguna acción en específico, solo es texto que 
normalmente se pone detrás de un Textbox para indicarle al usuario qué dato se 
requiere que ingrese dentro del Textbox, o simplemente para poner algún tipo de título 
o texto dentro de las aplicaciones que se estén desarrollando. 
 Checkbox : Cuando se selecciona este componente es posible dar un 
valor determinado. Por ejemplo en la mayoría de los formularios donde se seleccione 
el sexo de una persona siempre van a aparecer dos opciones las cuales son 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 26 
masculino o femenino, dependiendo del Checkbox que esté seleccionado es el valor 
que se le va a dar. 
 RadioButton : este componente cumple el mismo propósito que el 
checkbox. 
 ComboBox : este componente se llena con una lista o un arreglo 
y permite seleccionar una opción dentro de un grupo de opciones. 
 
El uso de estos componentes los aprenderá más a detalle en el capítulo 2.3.2 Creación de 
Formularios en VB.NET. 
Estos componentes comunes son los más utilizados en las aplicaciones desarrolladas 
con Visual Basic .NET y son los que en su mayoría utilizarás a lo largo de este curso para 
desarrollar tus actividades. 
En conclusión podemos decir que estos componentes son muy importantes ya que con 
ellos serás capaz de crear aplicaciones de escritorio de acuerdo a los requerimientos que 
el cliente solicite y así dar forma a los formularios o catálogos que el sistema que estés 
desarrollando deba tener. 
 
 
2.2.4. Componentes para acceso a bases de datos 
 
En este tema aprenderás a conectar Visual Studio con un manejador de base de datos, 
para efectos de esta asignatura se utilizará MySQL. 
 
Los componentes para acceso a base de datos son elementos que se utilizan para 
establecer una conexión con un manejador de base de datos y así permitir la 
comunicación con el sistema y la base de datos (Stephens, 2010). 
Cuando se realiza una aplicación que requiera base de datos es de gran ayuda utilizar los 
componentes para acceso de base de datos, esto permite hacer un puente con una 
aplicación y un manejador de base de datos. 
Para poder configurar el conector de base de datos es necesario descargar el MySQL 
connector ODBC para poder hacer una conexión con MySQL, después de que se haya 
instalado, se debe ir al menú Tools y en seguida seleccionar la opción Connect to 
Database, como se observa a continuación: 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 27 
 
 
 
 
 
 
 
 
 
 
 
Pantalla del Connect to Database 
 
A continuación se despliega la opción Data source para poder seleccionar el origen de 
datos de MySQL que servirá para conectar la aplicación con la Base de Datos. 
 
 
 
 
 
 
 
 
 
Selección del origen de datos 
 
Al dar clic en continuar se despliega la siguiente ventana que servirá para la configuración 
de la conexión que tenga la contraseña, usuario, servidor y el nombre de la base de datos 
para después poder agregarla esa configuración para su uso como se observa en la 
imagen de la pantalla a continuación: 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 28 
 
Opción agregar conexión 
 
En esta ventana se solicitan los datos necesarios para establecer la conexión. En primer 
lugar se menciona el nombre del servidor, después el nombre de usuario con su 
contraseña y finalmente el nombre de la base de datos que es donde de guardarán los 
registros.Si los datos son correctos quedara establecida la conexión. Esta es una 
herramienta fundamental para crear aplicaciones de escritorio que contenga grandes 
cantidades de datos. 
 
 
2.2.5. Menús 
 
Dentro del entorno de desarrollo de Visual Studio se proporciona una serie de menús para 
tener acceso a las herramientas y configuraciones necesarias para poder desarrollar una 
aplicación. 
 
Los menús que contiene Visual Studio son muy semejantes a otras aplicaciones de 
Microsoft como lo es Microsoft office donde se pueden encontrar los menús: Archivo, Ver, 
Herramientas, etcétera. A continuación se describe brevemente el contenido de cada 
menú: 
El menú File (Archivo) permite generar un nuevo proyecto, abrir guardar, agregar, 
imprimir, entro otras opciones como se observa en la siguiente pantalla: 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 29 
 
 
 
 
 
 
 
 
 
 
 
 
 
Pantalla menú File (Archivo) 
 
Menú Edit (Editar): En el menú editar contiene herramientas para deshacer, rehacer, 
cortar, copiar, pegar, etc. Parecido a las que se utilizan en Microsoft Office. 
 
 
 
 
 
 
 
 
Pantalla menú Editar 
 
Menú View (Ver): El menú vista contiene las opciones para visualizar el código o una 
interfaz de la aplicación ya mencionada anteriormente así también se pueden desplegar 
otros páneles como el Explorador de Soluciones, Barra de Propiedades, Examinador de 
Objetos, etcétera como se observa en la siguiente imagen: 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 30 
 
 
 
 
 
 
 
 
Pantalla menú Ver 
 
Menú Project (Proyecto): En el Menú proyecto se pueden agregar componentes, clases 
interfaces, formularios etcétera, a un proyecto como se observa en la siguiente imagen: 
 
 
 
 
 
 
 
 
Pantalla menú Proyecto 
 
Menú Build (Construir): En este menú se puede abrir el generador de soluciones como 
se observa en la siguiente imagen: 
 
 
 
 
Pantalla menú Construir 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 31 
Menú Debug (Depurar): Mediante este menú se puede correr la aplicación para buscar 
errores de sintaxis. 
 
Menú Debug 
 
Menú Team (Equipo): Permite configurar y gestionar un servidor Team Fundation 
Server. 
 
 
 
Menú equipo 
 
Menú Data (Datos): Permite conectar a un origen de datos para hacer el puente con una 
base de datos. 
 
 
 
 
Menú datos 
 
 
 
 
 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 32 
Menú Tools (Herramientas): El menú herramienta permite configurar conexiones con 
diversos manejadores de base de datos así como también configurar una Macro. 
 
 
 
 
 
 
 
Menú herramientas 
 
 
Menú Architecture (Arquitectura): La opción más significativa de este menú es la 
posibilidad de generar diagramas UML. 
 
 
 
 
 
Menú Arquitectura 
 
Menú Test (Probar): Permite hacer diversas pruebas a la aplicación. 
 
 
 
 
 
 
Menú test 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 33 
Menú Analyze (Analizar): Ayuda a diagnosticar problemas e identificar los métodos 
costosos más comunes de la aplicación. 
 
 
 
 
 
 
Menú analizar 
 
Menú Windows (Ventana): Permite acomodar las ventanas de cada panel. 
 
 
 
 
 
 
 
 
Menú ventanas 
 
Como se mencionó, los menús del entorno de desarrollo de Visual Studio permiten el 
acceso a las herramientas y configuraciones necesarias para poder desarrollar una 
aplicación de escritorio. 
 
 
 
 
 
 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 34 
Actividad 2. Interfaces 
 
El propósito de la actividad es que bosquejes un diseño de interfaz donde se incluya 
una explicación del objetivo de cada pantalla o formulario, para ello es necesario que 
retomes el planteamiento del proyecto realizado en la actividad 1. Entorno de 
desarrollo, una vez recuperado tu planteamiento, realiza los siguientes pasos: 
 
1. Realiza el proceso de creación de un proyecto en el entorno de desarrollo 
Visual Studio y nómbralo. 
 
2. Integra los datos del formulario de acuerdo con los requerimientos del 
proyecto. 
 
3. Identifica y menciona los componentes de ToolBox y de acceso a bases de 
datos que utilizarás en tu proyecto. 
 
4. Explica los componentes de ToolBox y de acceso a bases de datos que 
utilizarás en relación con tu proyecto. 
 
5. En un documento de texto integra las capturas de pantalla del proceso de 
creación de tu proyecto y del formulario. 
 
6. Guarda la actividad con el nombre DPRN3_U2_A2_XXYZ. Sustituye las XX 
por las dos primeras letras de tu primer nombre, la Y por tu primer apellido y la 
Z por tu segundo apellido y envía el archivo a tu Facilitador(a) para recibir 
retroalimentación mediante la herramienta Tarea. 
 
*Consulta los Criterios de evaluación de actividades Unidad 2 para conocer los 
parámetros de evaluación de esta actividad. 
 
 
 
 
 
 
 
 
 
 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 35 
2.3. Propuesta de diseño 
 
Como ya se mencionó en los temas anteriores, mediante el lenguaje de programación 
Visual Basic .Net en el entorno de desarrollo Visual Studio 2010 es posible realizar 
aplicaciones de escritorio. En este tema se abordarán cuestiones de usabilidad para que 
te sea posible comprender la importancia de que entre más fácil sea utilizar un sistema, 
se logrará uno de los principales objetivos del desarrollo de software que es la 
satisfacción total del cliente. Revisarás la forma en que se crea un formulario VB .NET 
recuperando todos los elementos que prendiste en los temas anteriores de esta unidad y 
obviamente teniendo en cuenta la usabilidad para aplicaciones de escritorio. 
 
 
2.3.1. Usabilidad 
 
La usabilidad se refiere en gran parte a la calidad que va a tener el software a 
desarrollarse y todo esto con el objetivo de lograr la satisfacción total del cliente, en este 
capítulo aprenderás por qué la usabilidad es muy importante cuando desarrolles 
aplicaciones de escritorio con VB .NET. 
La usabilidad está orientada al ámbito informático en este caso a la usabilidad de los 
sistemas de escritorio. Usabilidad es un término anglosajón que significa facilidad de uso 
específicamente tienen su origen en la expresión user friendly (Alcalá, 2007). 
Ya hablando en términos de calidad y sistemas de información se exponen algunas 
definiciones: 
Según ISO/IEC 9241 es “el grado de eficacia, eficiencia y satisfacción con la que usuarios 
específicos pueden lograr objetivos específicos, en contextos de uso específicos” 
(Lizardo, 2009, pág. 91). 
Según ISO/IEC FDIS 9126 es “la capacidad que tiene un producto software para ser 
atractivo, entendido, aprendido, usado por el usuario cuando es utilizado bajo unas 
condiciones específicas” (Granollers i Saltiveri, Lorés, Cañas, 2005, pág. 97). 
Existen más definiciones de usabilidad pero en general todas coinciden en que un 
producto usable es aquel que es fácil de utilizar y fácil de aprender. 
Hay muchos beneficios de la usabilidad en el desarrollo de sistemas de escritorio todas 
referentes a los costos del desarrollo, la calidad que va a tener el producto y por supuesto 
la satisfacción total del cliente. 
Algunos de los beneficios más importantes son (Alcalá, 2007): 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NETCiencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 36 
 “Incremento de la productividad de los usuarios de la aplicación, al reducir los 
tiempos para completar sus tareas y cometer menos errores que deberían ser 
corregidos más tarde. Esta productividad puede ser cuantificada por la propia 
empresa que implanta productos usables en su organización. 
 Incremento del uso de la aplicación. Si una aplicación es fácil de usar, permite a 
los usuarios realizar una gran variedad de tareas (Granollers i Saltiveri, Lorés, 
Cañas, 2005). 
 Reducción del costo en documentación. Se entenderá fácilmente la forma de 
utilización de las aplicaciones por lo tanto, no se requerirá una cantidad extensa de 
manuales o instrucciones muy detalladas y extensas para que se pueda manejar 
la aplicación. 
 Reducción de los costos y tiempos de desarrollo. Si se cuenta con una primera 
versión en la cual se integren los requerimientos del usuario se evitarán costos de 
nuevas realizaciones o de reparar fallas o errores. 
 Detección temprana de fallas. Si se siguen los lineamientos de usabilidad en las 
fases iniciales del desarrollo, se detectarán errores o fallas en estas etapas 
evitando que se vuelvan mayores y afecten las etapas finales del desarrollo. 
 Reducción de los costos de mantenimiento de la aplicación. “Los sistemas que son 
fáciles de usar requieren menos entrenamiento, menos soporte para el usuario y 
menos mantenimiento” (Granollers i Saltiveri, Lorés, Cañas, 2005, pág. 99). 
 Aumento de la calidad en el desarrollo del producto y aumento de la satisfacción 
del cliente. Siguiendo los estándares de usabilidad se obtendrá un producto de 
calidad incluyendo los requerimientos del cliente y por lo tanto, se obtendrá su 
satisfacción. 
Los estándares de usabilidad pueden llegar a ser muy complejos en la teoría, así que se 
explicarán con base a la experiencia de desarrollo de software (Alcalá, 2007): 
 Facilidad de uso: siempre hay que desarrollar un software de manera fácil y 
entendible para el usuario, si se puede hacer uso de imágenes, iconos en los 
botones es mucho mejor ya que con esto se le da otra manera al usuario de 
entender la funcionalidad del software. 
 
 Navegación: esta parte para sistemas de escritorio se refiere a la forma en que se 
acomodaran los componentes en los catálogos o formularios que contenga el 
proyecto de software. Un ejemplo muy claro es poner los componentes con los 
cuales se le pedirá al usuario que ingrese la información requerida y hasta el 
último los botones de acción, esto con el fin de que a los usuarios se les hace más 
fácil capturar la información primero y ya una vez lista, seleccionar la acción que 
deseen realizar con esos datos capturados. 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 37 
 Colores: recuerda que un software normalmente reemplaza los procesos que 
alguna organización llevaba manualmente y le ayudan a facilitar sus actividades, 
por lo que en la mayoría de los casos el usuario tendrá que estar mucho tiempo 
interactuando con el software. Par esto se recomienda usar colores claros y no 
oscuros ya que estos últimos después de cierto tiempo casan la vista a los 
usuarios. 
 
 Entendible: este punto es muy importante ya que imagina que en un formulario 
hay un componente TextBox el cual nos permitirá ingresar algún dato, pero si no 
tiene un componente Label detrás de él que especifique que dato se requiere el 
usuario no sabrá que ingresar. Por eso siempre recuerda especificar al usuario 
qué acciones o datos realizarán los componentes que se encontrarán dentro de un 
formulario o catálogo. 
 
Un ejemplo de usabilidad se observa por ejemplo en el diseño de interfaz Microsoft en su 
paquetería de Office, al abrir los programas de edición de texto, presentaciones u hojas 
de cálculo siempre la barra de menú se encuentra en el mismo lugar, si deseas crear un 
nuevo documento de texto, una base de datos, una hoja de cálculo o una presentación 
mediante plantillas puedes observar un ícono con forma de hoja en blanco que se llama 
Nuevo, este ícono se encuentra siempre en el mismo lugar en estos programas, los 
colores de la paquetería de Office son claros. Con esto Microsoft da un ejemplo claro de 
lo que es usabilidad. 
Algunas recomendaciones para aplicar la usabilidad en desarrollos de software son: 
 Hacer un buen análisis de los requerimientos que el cliente solicite. 
 Aún y cuando no tengas ninguna interfaz o formulario realizado en tu lenguaje de 
programación procura hacer prototipos de los avances y mostrarlos al cliente. 
 Procurar que el cliente se encuentre informado de todas las fases de desarrollo del 
software, esto se refiere a que el cliente siempre debe estar enterado de los avances 
para que pueda hacer recomendaciones, esto con el afán de que haga alguna 
recomendación de lo que le gustaría ver en el sistema a desarrollarse y se implemente 
o corrija algún error detectado y al final se logre ese objetivo que es la satisfacción 
total del cliente. 
En conclusión la usabilidad está estrechamente relacionada con el desarrollo de software 
de calidad, para esto es necesario hacer un levantamiento acertado, detallado y preciso 
de los requerimientos que el cliente solicite y en todo momento si hay alguna duda o 
avance estar en contacto directo con el cliente para solicitar el visto bueno del producto 
que se esté desarrollando. En el siguiente subtema 2.3.2. Creación de formularios en VB. 
NET, aprenderás cómo desarrollar un formulario en Visual Basic .NET. 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 38 
 
2.3.2. Creación de formularios en VB.NET 
 
En este capítulo aprenderás a llevar a cabo todo lo enseñado a lo largo de esta unidad, 
aprenderás a hacer un formulario en base a algunos requerimientos dados. 
 
Para comenzar se creará un formulario para dar de alta los datos de un proveedor, la 
tabla en donde se va a guardar la información que se capture en este formulario contiene 
los siguientes campos: 
Clave_proveedor 
Nombre_Proveedor 
Dirección 
Teléfono 
Email 
Estatus_proveedor 
Ya que se cuenta con los campos de la tabla con los cuales va a interactuar el formulario 
se procederá con la creación de este. Lo primero será abrir el entorno de desarrollo y 
crear un nuevo proyecto como se explicó en el tema 2.2.1 Creación de un nuevo proyecto. 
El siguiente paso es arrastrar los componentes de la pestaña ToolBox a la ventana que 
por ahora tiene por nombre FORM1 como se muestra en la pantalla siguiente. 
 
Pantalla arrastrar Componentes 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 39 
Recuerda que para cada campo que está en la tabla de la base de datos anteriormente 
mencionada, cada campo en el formulario tendrá un TextBox y su Label correspondiente, 
excepto para Estatus ya que sólo se observará como activo e inactivo, se utilizarán dos 
Radio Buttons. Al terminar de arrastrar estos componentes se verá de la siguiente manera 
como lo muestra la imagen siguiente. 
 
Imagen de pantalla Componentes sobre Windows Form 
 
Para cambiar el nombre de los componentes en especial de los Label, es necesario 
seleccionar el componente al cual se requiera cambiar el nombre, una vez realizado 
esto, del lado derecho del entorno de desarrollo hay una columna llamada Properties 
(Propiedades). En esa columna hay un campo llamado Text y ahí es donde se cambiará 
el nombre del componente. Este paso se ilustra en la imagen siguiente. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 40 
Imagen de pantalla Cambiar nombrea componente 
Es posible afirmar (por experiencia) que la mayoría de sistemas de escritorio tienen los 
botones en la parte inferior ya que los usuarios están acostumbrados a capturar sus 
datos y hasta el final ejecutar las acciones mediante los botones, con esto se está 
empleando un ejemplo de usabilidad. Para este ejemplo se integrarán tres botones uno 
para guardar la información, otro para modificar la información y el ultimo para eliminar 
la información de la tabla proveedores por medio de tu formulario. Este paso se muestra 
en la siguiente pantalla botones de acción en el formulario. 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 41 
Pantalla Botones de acción en el formulario 
 
Por último, si no hay errores, es necesario oprimir la tecla F5 la cual ejecuta la acción 
Start debugging y mostrará el formulario listo. El resultado de esta ejecución se 
visualizará en un Formulario proveedores como se observa en la imagen a continuación. 
 
Imagen de una pantalla de formulario proveedores 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 42 
De esta forma es posible obtener un formulario listo para darle funcionalidad y 
conectarlo con la base de datos, en la unidad 3. Manipulación de datos mediante .NET 
podrás darle funcionalidad a un formulario y realizar sistemas de escritorio con Visual 
Basic .NET manejando la información de una base de datos creada en MySQL. 
 
Actividad 3. Usabilidad 
 
Esta actividad tiene como propósito que identifiques la importancia de los estándares 
de usabilidad y la mejor forma de utilizarlos cuando te encuentres realizando interfaces 
gráficas de usuario, para ello debes retomar el proyecto de la actividad 2 y consultar 
los materiales de apoyo recomendados, una vez recuperado el proyecto y localizado 
los materiales de apoyo, sigue estos pasos: 
 
1. Analiza según el tema 2.3.1 Usabilidad a qué se refiere y cuáles son los 
estándares de usabilidad que se mencionan e investiga algunos ejemplos de 
uso de los mismos. 
 
2. Retoma el proyecto de la actividad 2 e identifica los estándares de usabilidad 
que integrarás en el mismo. 
 
3. Menciona los estándares seleccionados y explica las ventajas que representa 
integrarlos en tu proyecto. 
 
4. Redacta una conclusión donde expliques con tus propias palabras por qué es 
importante la usabilidad y sus estándares en el ámbito del diseño de interfaces. 
 
5. Guarda la actividad con el nombre DPRN3_U1_A1_XXYZ. Sustituye las XX 
por las dos primeras letras de tu primer nombre, la Y por tu primer apellido y la 
Z por tu segundo apellido y envía el archivo a tu Facilitador(a) para recibir 
retroalimentación mediante la herramienta Base de datos. 
 
6. Revisa y comenta la participación de al menos dos compañeros(as) respecto a 
sus conclusiones y la forma en que integrarán los estándares de usabilidad en 
sus proyectos, integra tus propias experiencias y conocimientos sobre 
usabilidad así como la aportación de las actividades de tus compañeros a tus 
propios conceptos. 
 
 
*Consulta los Criterios de evaluación de actividades Unidad 2 para conocer los 
parámetros de evaluación de esta actividad. 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 43 
Autoevaluación 
 
Realiza la autoevaluación con el fin de que puedas analizar y evaluar el avance que 
has tenido, para detectar las áreas de oportunidad respecto al estudio de la segunda 
unidad e identificar los temas de difícil comprensión. 
 
Evidencia de aprendizaje. Diseño de interfaces mediante .NET 
 
Esta actividad tiene como propósito Diseñar una interfaz gráfica de usuario en VB.NET, 
que interactúe con una base de datos, para ello retoma el proyecto planteado en la 
actividad 2 Interfaces y toma como apoyo el planteamiento que te hará llegar tu 
Facilitador (a), una vez que hayas recuperado tu proyecto de la actividad 2 Interfaces y 
cuentes con el planteamiento: 
 
1. Identifica los campos de la tabla de base de datos del planteamiento de tu 
proyecto e integra los datos en la tabla. 
 
2. Analiza la tabla de datos e identifica los datos que se almacenarán en el 
formulario. 
 
3. Con base en la tabla de base de datos crea el formulario. 
 
4. Identifica los componentes de conexión a bases de datos que utilizarás y 
diseña la interfaz gráfica de usuario con VB .NET con base a los requerimientos 
de tu proyecto, integrando todos los campos y botones necesarios para que esta 
interfaz interactúe con la tabla en la base de datos. 
 
5. Explica la relación de la base de datos con la realización de la interfaz gráfica de 
usuario. 
 
6. Guarda la actividad con el nombre DPRN3_U2_EA_XXYZ. Sustituye las XX por 
las dos primeras letras de tu primer nombre, la Y por tu primer apellido y la Z por 
tu segundo apellido y envía el archivo a tu Facilitador(a) para recibir 
retroalimentación al Portafolio de evidencias. 
 
*Consulta el documento EA. Lista de cotejo y rúbrica de evaluación de la Unidad 2 para 
elaborar esta actividad y considerar los parámetros de evaluación. 
 
 
 
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 44 
Autorreflexiones 
 
Además de enviar tu trabajo de la Evidencia de aprendizaje, ingresa al foro Preguntas 
de Autorreflexión y consulta los cuestionamientos que tu Facilitador(a) presente, a 
partir de ellos elabora tu Autorreflexión. 
 
Posteriormente envía tu archivo mediante la herramienta Autorreflexiones. 
 
 
Cierre de la unidad 
 
En esta unidad se revisaron temas relacionados con la herramienta o entorno de 
desarrollo.NET, que es Visual Studio 2010, con el fin de contar con los conocimientos 
necesarios para generar un nuevo proyecto mediante los componentes que esta 
herramienta brinda para poder desarrollar interfaces gráficas de usuario utilizando VB 
.NET. Para lograr una conexión, es necesario contar con dos principales elementos, la 
interfaz y los formularios, mediante los cuál sea posible interactuar con una base de 
datos. 
El desarrollo de las interfaces está estrechamente relacionado con el concepto de 
usabilidad el cual se basa en principios de calidad cuyo principal precepto señala que el 
objetivo de desarrollar software es la satisfacción total del cliente y la calidad en el 
producto. 
En la siguiente unidad aprenderás como interactuar con una base de datos desde .NET a 
través de un formulario , y a realizar las acciones básicas dentro de éste que son Guardar, 
modificar y eliminar la información que el usuario desee mediante un formulario creado en 
VB .NET a una base de datos desarrollada en MySQL. 
 
 
Para saber más 
 
El sitio que Microsoft proporciona a los desarrolladores .NET encontrarás más información 
a detalle de los componentes y del lenguaje VB .NET 
http://msdn.microsoft.com/es-mx/ 
 
Si deseas consultar mayor información sobre Visual Studio, puedes ingresar al siguiente 
sitio: 
Visual Studio. Novedades de Visual Studio: 
http://www.microsoft.com/visualstudio/esn/visual-studio-2013 
 
http://msdn.microsoft.com/es-mx/
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 45 
Fuentes de consulta 
 
 Alcalá, M. L., (2007). Medida de la usabilidad en aplicaciones de escritorio. Un 
método 
 práctico. (Tesis licenciatura). Madrid, España: Universidad Nacional de Educación 
a Distancia. [En línea] http://www.issi.uned.es/CalidadSoftware/Noticias/PFC_2.pdf 
 
 Bill, S., Hollis, B., Sharkey, K., Marbutt, J., Windsor, R., e Hillar, G., (2010). 
Professional Visual Basic 2010 and .NET 4. Indianapolis: Wiley Publishing Inc. Cuello, J., y Vittone, J., (2013). Diseñando apps para móviles. Barcelona: Catalina 
Duque Giraldo. 
 
 Desongles Corrales, J., y Moya Arribas, M., (2006). Conocimientos básicos de 
informática. Madrid : MAD. 
 
 Ferré Grau, X., (2010). Principios básicos de usabilidad para ingenieros de 
software. Madrid, España: Universidad Politécnica de Madrid, Facultad de 
informática. [En línea] 
http://educacion.usach.cl/ojs/index.php/ojsprueba1/article/viewFile/7/5 
 
 Granollers i Saltiveri, T., Lorés Vidal, J., Cañas Delgado, J.J., (2005). Diseño de 
sistemas interactivos centrados en el usuario. Barcelona: UOC. 
 
 Liberos, E., Núñez, A., Bareño, R., García del Poyo, R., Gutiérrez-Ulecia, J.C., y 
Pino G., (2013). El libro del marketing interactivo y la publicidad digital. Madrid, 
España: ESIC Editorial. 
 
 Luna González, Lizbeth (2004). El diseño de interfaz gráfica de usuario para 
publicaciones digitales. México: UNAM DGSCA Revista Digital Universitaria. [En 
línea] http://www.revista.unam.mx/vol.5/num7/art44/ago_art44.pdf 
 
 Luzardo Alliey, Ana Milagro (2009). Diseño de la interfaz gráfica web en función de 
los dispositivos móviles. Caso de estudio: diarios digitales . Buenos Aires, 
Argentina: Universidad de Palermo, Facultad de Diseño y Comunicación, Maestría 
en diseño. 
 
 Mackenzie, D., Sharkey, K., (2003). Aprendiendo Visual Basic.Net en 21 Lecciones 
Avanzadas. Tr. A David Garza Marín. México: Pearson Educación. 
 
http://www.revista.unam.mx/vol.5/num7/art44/ago_art44.pdf
Programación .NET III 
Unidad 2. Diseño de interfaces mediante .NET 
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 46 
 Martínez, A.B., y Cueva, J.M., (2001). Estándares y guías. España: Asociación 
Interacción Persona-Ordenador Universidad de Oviedo. [En línea] 
http://www.aipo.es/libro/pdf/09Estand.pdf 
 
 MSDN Microsoft Developer Network (2013a). Escritorio de desarrollo de 
plataforma ¿Qué es el desarrollo de escritorio?. [En línea] 
http://msdn.microsoft.com/es-mx/ff380143 
 
 MSDN Microsoft Developer Network (2013b). Explorador de soluciones. [En línea] 
http://msdn.microsoft.com/es-es/library/26k97dbc(v=vs.90).aspx 
 
 MSDN Microsoft Developer Network (2013c). Interfaces en Visual Basic .NET. [En 
línea] http://msdn.microsoft.com/es-es/library/cc436896%28v=vs.71%29.aspx 
 
 MSDN Microsoft Developer Network (2013d). Propiedades (ventana). [En línea] 
http://msdn.microsoft.com/es-es/library/ms171352.aspx 
 
 Stephens, R., (2010). Visual Basic 2010 Programmer's Reference. Indianapolis: 
Wiley Publishing, Inc. 
http://www.aipo.es/libro/pdf/09Estand.pdf
http://msdn.microsoft.com/es-mx/ff380143
http://msdn.microsoft.com/es-es/library/26k97dbc(v=vs.90).aspx
http://msdn.microsoft.com/es-es/library/cc436896%28v=vs.71%29.aspx
http://msdn.microsoft.com/es-es/library/ms171352.aspx