Download - Unidad 2 Diseño de Interfaces Mediante .NET
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 herramientas que 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
Panel de 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 en la 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 .NET
Ciencias 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
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 nombre a 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
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.
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.