Está en la página 1de 47

Programacin .

NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software





Ingeniera en Desarrollo de Software

8 Cuatrimestre



Programa de la asignatura:
Programacin .NET III



Unidad 2. Diseo de interfaces mediante .NET



Clave:
150930934


Universidad Abierta y a Distancia de Mxico
UnADM



Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 1
ndice

Unidad 2. Diseo de interfaces mediante .NET..................................................................... 2
Presentacin de la unidad ...................................................................................................... 2
Propsitos ............................................................................................................................... 2
Competencia especfica ......................................................................................................... 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. Creacin 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. Mens ..........................................................................................................................28
Actividad 2. Interfaces ...........................................................................................................34
2.3. Propuesta de diseo.......................................................................................................35
2.3.1. Usabilidad ....................................................................................................................35
2.3.2. Creacin de formularios en VB.NET ...........................................................................38
Actividad 3. Usabilidad ..........................................................................................................42
Autoevaluacin ......................................................................................................................43
Evidencia de aprendizaje. Diseo de interfaces mediante .NET .........................................43
Autorreflexiones .....................................................................................................................44
Cierre de la unidad ................................................................................................................44
Fuentes de consulta ..............................................................................................................45

Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 2
Unidad 2. Diseo de interfaces mediante .NET

Presentacin de la unidad

Te damos la ms cordial bienvenida a la Unidad 2 Diseo de interfaces mediante .NET en
la cual se abordars temas relacionados a la creacin de interfaces utilizando el lenguaje
Visual Basic .NET. El diseo de interfaces se refiere a la creacin 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 podrs desarrollar una interfaz grfica de usuario que va a interactuar con
una tabla en la base de datos (Bill, Hollis, Sharkey, Marbutt, Windsor e Hillar, 2010). La
interfaz grfica de usuario integra todos los elementos grficos para comunicarse con un
sistema, mediante el diseo de la interfaz se sintetiza una idea, se materializa y se
construyen los mensajes que permiten la comunicacin usuario-sistema, las transforma
en cdigos visuales o auditivos de manera que la interaccin, la usabilidad y el manejo del
mensaje visual logren una empata en cuanto a la interaccin del usuario y la interfaz,
(Luna, 2004).

En la unidad 1 Conexin con bases de datos en .NET se abordaron las tecnologas .NET
de acceso a datos, el uso de la tecnologa ADO .NET para recuperar y modificar datos as
como los anlisis de requerimientos y el diseo 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, aprenders desde cmo iniciar un nuevo
proyecto hasta los componentes comunes que .NET brinda en el desarrollo de una
interfaz grfica de usuario para interactuar con bases de datos.
Tambin comprenders 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 grficamente (aqu se refiere a los
formularios) como respecto a la funcionalidad y la facilidad de acceso y uso del software.


Propsitos

Al finalizar el estudio de esta unidad podrs:

Identificar los tipos de controles de bases de datos mediante la tecnologa .NET.
Resolver problemas de procesamiento de informacin, mediante una interfaz
grfica de usuario desarrollada con .NET.
Desarrollar formularios en el entorno de desarrollo Visual Studio utilizando el
lenguaje Visual Basic. NET.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 3
Competencia especfica

Disear interfaces grficas de usuario con los estndares de usabilidad para
interactuar con la base de datos a partir de la tecnologa .NET.


2.1. Entorno de desarrollo

El entorno de desarrollo es la base para la creacin de una interfaz grfica ya que es en
este entorno donde adems de programar se disean las ventanas o formularios, que
servirn para interactuar directamente con el usuario y el sistema.

En esta unidad aprenders a utilizar el entorno de desarrollo de Visual Studio 2010 el cual
es un entorno de desarrollo integrado IDE (por sus siglas en ingls, Integrated
Development Environment) que es un software especializado que utilizan los
programadores para desarrollar aplicaciones de escritorio haciendo uso del lenguaje de
programacin Visual Basic .NET (Stephens, 2010), mediante una serie de herramientas
que se encuentran disponibles en Visual Studio 2010, utilizando estndares de usabilidad
para un correcto funcionamiento para disear las interfaces grficas.

Es importante mencionar que en esta asignatura se utilizar la versin de Visual Studio
2010 ya que el entorno y herramientas que se utilizan en esta versin y en las ms
actuales como Visual Studio 2012 y 2013 son muy semejantes y se adaptan a las
necesidades laborales que se requieren hoy en da tales como:

Aplicaciones de Escritorio.
Sistemas y pginas web.
Aplicaciones para dispositivos Mviles.


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 mltiples componentes que proporciona Visual Studio para poder realizar un
nuevo proyecto.

En este tema se mostrar la ubicacin de los elementos en el entorno Visual Studio 2010
y en el tema 2.2. Aplicaciones de escritorio se abordar lo correspondiente a cmo crear
un proyecto y trabajar en este ambiente.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 4
Despus de haber configurado las propiedades iniciales de Visual Studio 2010 como la
instalacin y creacin de un nuevo proyecto (la instalacin y creacin de un nuevo
proyecto se revisar en el siguiente tema 2.2 Aplicaciones de escritorio), se puede
empezar a disear la interfaz de usuario de una aplicacin agregando diversos objetos
que brinda la caja de herramientas. La caja de herramientas se muestra despus de crear
un nuevo proyecto y solamente se observar y se podr utilizar en el modo diseo dentro
de las vistas, las cuales se explicarn ms 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 botn ToolBox, como se observa en
la siguiente imagen.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 5


Ubicacin del cono ToolBox en la pantalla principal de Visual Studio
Botn
ToolBox
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 disear una interfaz y como ya se mencion solamente puede ser utilizada
en la vista diseo 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 almacenarn, modificarn o eliminarn de una base de datos.

A continuacin se describen brevemente cada uno de los componentes ms 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 botn dentro de una interfaz para realizar una accin.
CheckBox: Crea una caja de seleccin.
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 vnculos Web.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 7
ListView: Muestra de elementos de iconos.
MaskedTextBox: Genera una restriccin de los datos introducidos por el usuario.
MonthCalendar: Inserta un calendario grfico para seleccionar fechas.
NotiflyIcon: Muestra iconos ejecutables en segundo plano.
PictureBox: Se utiliza para poder visualizar imgenes, iconos o grficas.
ProgressBar: Indica la progreso o estado de una accin.
RadioButton: Presenta una lista de cada componente de un CheckBox, se
observan dos estados el seleccionado y no seleccionado, es decir, se puede
seleccionar slo una opcin.
RichTextBox: Permite escribir y manipular textos con formatos.
TextBox: Genera una caja de texto que pude contener caracteres numricos o
alfanumricos.
ToolTip: Despliega en texto emergente cuando el puntero se encuentra sobre un
componente.
TreeView: Genera un rbol de nodos.
WebBrowser: Hospeda pginas Web y proporciona recursos de exploracin Web
de internet a la aplicacin.

A continuacin se muestra el uso de algunos componentes dentro de un formulario:
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 8


Formulario con componentes de la Caja de Herramientas de Visual Studio
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 conclusin la caja de herramientas permite disear una interfaz de usuario con una
variedad de componentes que el programador pueda utilizar dependiendo de las
necesidades de la aplicacin, estas pueden ser formularios o ventanas emergentes,
recuerda que un formulario.

Las herramientas que proporciona Visual Studio son de suma importancia para disear
interfaces graficas de manera fcil y rpida, ms adelante se ver ms 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, aprenders tener accesos a diferentes objetos que estn dentro
de una aplicacin 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 ms rpida.


2.1.2. Examinador de objetos

Cuando se est desarrollando una aplicacin en Visual Studio es importante tener un
control de los objetos que se estn utilizando ya sean componentes, clases, mtodos,
variables, etctera, esto con la finalidad de tener acceso fcil a cada uno de estos objetos
en cualquier momento que se necesiten dentro del entorno de desarrollo. En este tema
revisars la forma en que estn 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 aplicacin.

El examinador de Objetos de Visual Studio es un panel que contiene los objetos que se
estn utilizando durante el desarrollo de una aplicacin (Stephens, 2010). Este
Examinador de Objetos muestra los componentes, smbolos, clases, mtodos, eventos,
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 estn utilizando actualmente. Tambin es posible
visualizar de manera estructurada los elementos que contiene cada objeto que se est
utilizando de forma jerrquica. El explorador de objetos contiene tres tipos de pneles:
Panel de objetos
Panel de miembros
Panel de descripcin









Explorador de objetos (Object Browser)
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 11
Panel de Objetos: Contiene los componentes que se estn utilizando en nodos de forma
jerrquica 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 mtodos, eventos,
constantes y variables.
Panel de descripcin: Muestra a detalle informacin de cada objeto seleccionado.
En la imagen siguiente se muestra la ubicacin de estos pneles dentro del Explorador de
Objetos:









Pneles del Explorador de Objetos

En conclusin el Explorador de Objetos (Object Browser) permite mostrar los
componentes que se estn utilizando cuando se est realizando una aplicacin, muestra
tambin las caractersticas de cada objeto, esto ayuda a los desarrolladores a interactuar
con cada uno de los elementos de un proyecto, tambin por medio de la barra de
propiedades es posible configurar de manera rpida 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 caractersticas y propiedades de los elementos de diseo
que se utilizan dentro de cualquier aplicacin que se est desarrollando en Visual Studio,
as como tambin las posibles configuraciones de cada uno de los componentes
utilizados.

Panel de Objetos
Panel de
Miembros
Panel de
Descripcin
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 12
La Barra de propiedad es un panel que muestra a detalle las propiedades y caractersticas
de un componente dentro de una aplicacin, estos pueden ser: Label, TextBox,
RadioButtons, ComboBox, etctera (MSDN, 2013d).

La barra de propiedades muestra a detalle cada una de las caractersticas de los
elementos que se encuentren en una aplicacin, esto se despliega en el extremo derecho
de la pantalla principal de Visual Basic que se muestra a continuacin, podrs observar
que al seleccionar algn elemento dentro de la aplicacin, por ejemplo si se cuenta con un
formulario (se explicar el tema sobre formularios en el tema 2.2.2 Formulario) que
contenga un botn y un cuadro de texto, en la barra de propiedades se desplegarn las
caractersticas y propiedades que tiene el TextBox, en el cual es posible cambiar el
tamao, color, ubicacin, etctera.

Pantalla de formulario

El recuadro de la derecha de la imagen anterior, es la barra de propiedades, esta barra
ofrece mltiples opciones de configuracin para cada uno de los elementos de una
aplicacin, tambin es posible programar algn evento (por ejemplo un evento es una
accin que se realiza al hacer clic en un botn) para dicho componente.

Por ejemplo en la imagen anterior se observa que al hacer clic en el Button (botn) que es
un componente de la caja de herramientas se observan las propiedades de dicho botn
en el recuadro de la derecha de la imagen donde se puede cambiar el color de fondo,
color de la fuente, tamao, etctera; a manera de ejemplo se cambiar el color de la
fuente y letra quedando de la siguiente manera.
Formulario con un
Botn y Caja de Texto
Barra de Propiedades activada
al hacer clic en el botn
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 13

Imagen de Botn modificado del color de fondo y letra.
Es muy importante el uso de la Barra de propiedades cuando se est desarrollando una
aplicacin en Visual Studio ya que esta permite configurar las propiedades de cada
elemento de la caja de herramientas que se est diseando una interfaz.


2.1.4. Explorador de soluciones

Cuando se realiza una aplicacin es muy importante tener organizados los archivos que
se estn utilizando dentro de la aplicacin que se est haciendo es por eso que Visual
Studio proporciona un explorador de soluciones SE (por sus siglas en ingls Solution
Explorer).

El Explorador de soluciones es un panel que permite a los desarrolladores mantener
organizados los archivos que se estn utilizando dentro de un proyecto (MSDN, 2013b),
muestra una vista organizada de los elementos que estn relacionados con la aplicacin
que se est desarrollando, as como tambin permite un acceso rpido 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 tambin se puede tener acceso desde
el men ver/Explorador de Soluciones (Solution Explorer).
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 rpido y sencillo, una aplicacin se conforma de varios proyectos
dentro de Visual Studio, que pueden ser: formularios, clases, mtodos, componentes,
etctera, todos ellos pueden pertenecer a una misma aplicacin, en el explorador de
soluciones es posible archivar y visualizar varios de los proyectos que pertenecen a la
misma aplicacin.

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
estn relacionadas a cada proyecto. Tambin 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:








Expl orador de Sol uci ones
(Solution Explorer)
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 15









Imagen del explorador de soluciones











Imagen del explorador de soluciones con los nodos contraidos
En conclusin, es posible decir que el explorador de soluciones permite archivar de una
manera ms prctica y organizada los proyectos que se estn utilizando durante el
desarrollo de una aplicacin, esto permite tener un acceso ms rpido a cada uno de los
componentes de cada proyecto que se est desarrollando ya sean interfaces o cdigo de
programacin. En el siguiente tema 2.1.5 Vistas se explicara cmo se puede interactuar
con las interfaces y el cdigo de programacin.




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 contrados.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 ms se utiliza cuando se est desarrollando una aplicacin dentro del entorno de
desarrollo ya que stas permiten interactuar con el diseo y el cdigo 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 aplicacin (Stephens, 2010).

Dentro de Visual Studio es posible visualizar los componentes que integran una aplicacin
de dos formas:
Vista de diseo.
Vista de cdigo.

Las cuales pueden ser utilizadas dependiendo de las necesidades del programador.
La vista de diseo que puedes observar en la siguiente imagen, se utiliza para poder
mostrar y disear una interfaz grfica de una aplicacin dentro de la cual se pueden
agregar y eliminar componentes visuales como son botones, cajas de textos etiquetas
tablas etctera.

Imagen de pantalla Vista de diseo

La vista de cdigo que puedes observar en la siguiente imagen, muestra todo el cdigo
que contiene la aplicacin que se est desarrollando as como tambin se visualizan
mediante esta vista los mtodos, clases, eventos etctera, de la aplicacin. La vista de
cdigo se despliega cuando se da doble click en un componente y tambin es posible ir
directamente a un evento de un botn, caja de texto, radioButton, etctera, 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
botn se accede a la vista
cdigo para su
programacin
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 17

botn que se muestra en el recuadro de la imagen anterior y se accede a la vista de cdigo:






























Imagen de pantalla Vista de cdigo
Cdigo del Botn 1
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 18
Tambin se puede acceder a las diferentes vistas de Visual Studio desde el men View
(Vista).

Cuando se est desarrollando una aplicacin en Visual Studio las vistas son de gran
utilizad, ya que por un lado permiten ver el diseo de la aplicacin y por otro lado el
cdigo que lo har funcionar.

Ahora que ya conoces los pneles, herramientas y componentes ms utilizados en el
entorno de desarrollo de Visual Studio podrs empezar a crear tus aplicaciones de
escritorio con interfaces grficas las cuales abordars con detalle en el tema 2.2
Aplicacin de Escritorio.


Actividad 1. Entorno de desarrollo

El propsito 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 presentacin donde menciones las funciones de los componentes
del entorno de desarrollo que identificaste y ejemplifica un caso de uso de los
pneles y herramientas de Visual Studio.

3. Identifica una situacin de conexin de bases de datos donde aplicaras el
entorno Visual Studio mencionando cul sera su finalidad y si solucionara un
problema, atendera una necesidad o se insertara como un rea de oportunidad.

4. Plantea el proyecto de aplicacin del entorno Visual Studio de la situacin 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 enva el archivo a tu Facilitador(a) para recibir
retroalimentacin mediante la herramienta Tareas.

*No olvides consultar los Criterios de evaluacin de actividades de la Unidad 2, para
considerarlos en el desarrollo de esta actividad.





Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 19
2.2. Aplicaciones de escritorio

En el tema anterior aprendiste en trminos generales el entorno de desarrollo para Visual
Basic .NET el cual es Visual Studio 2010, en los siguientes captulos de este subtema
aprenders sobre el desarrollo de aplicaciones de escritorio en este entorno.

En la actualidad existen 3 tipos de aplicaciones (Liberos, Nez, Bareo, Garca del Poyo,
Gutirrez-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
edicin de texto, de plantillas de presentaciones, hojas de clculo, etctera.
Aplicaciones Web: estas aplicaciones son las que se encuentran en un servidor en la
internet, y puedes acceder a ellas mediante una conexin a internet y un dominio que en
este caso ser la direccin en la cual este alojada la aplicacin.
Aplicaciones mviles: Estas son ms nuevas y son las que se instalan y ejecutan en tu
telfono o Tablet son diseadas exclusivamente para que las puedas usar en tus
dispositivos mviles.
En esta materia aprenders cmo 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. Creacin 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 estarn todas las interfaces de usuario que
desarrollars. Recuerda que estas interfaces son las que le permitirn al usuario usar de
manera correcta el software que ests desarrollando.

Para la creacin de un nuevo proyecto el primer paso ser ejecutar el entorno de
desarrollo, al estar listo vers una pantalla como la siguiente:
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 20

Pantalla de inicio de Visual Studio
En esta pantalla observars dos formas de iniciar un nuevo proyecto de Visual Basic.
NET, la primera es la barra de men en la opcin File (Archivo), seleccionar New
(Nuevo) y dar clic en la opcin 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:
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 21

Pantalla Crear un nuevo proyecto mediante la barra de men
La segunda forma es un poco ms sencilla, ya que al momento de ejecutar el entorno de
desarrollo muestra una pgina de inicio, en esa pgina se encuentra un botn para crear
un nuevo proyecto el cual dice New Project, como se muestra en la siguiente imagen.
Pantalla Crear un nuevo proyecto mediante la pgina de inicio
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 debers 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 tambin seleccionar un nombre para el proyecto y la
ubicacin donde se va a guardar dentro de la computadora, an si no seleccionas
ningn nombre el programa asignar un nombre automticamente y una ruta por defecto
y estos valores los podrs cambiar ms a delante si as lo deseas.
Recuerda que realizar un proyecto es muy importante ya que ste, contendr todas las
interfaces grficas que vas a desarrollar para un proyecto en especfico.
En conclusin, con esto tendrs listo todo para empezar a crear aplicaciones de escritorio
con Visual Basic .NET utilizando el entorno de desarrollo Visual Studio 2010 en el
siguiente captulo aprenders qu es un formulario y su funcin en el desarrollo de
aplicaciones de escritorio.






Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 almacenarn en la base de datos.

Un formulario es utilizado en informtica para referirse al conjunto de campos solicitados
por un determinado programa, los cuales se almacenarn para su posterior uso o
manipulacin (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 Ao de
nacimiento, se espera que sea llenado con un nmero vlido para un ao.
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 abordarn en el siguiente captulo.
Cabe sealar 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 catlogo de clientes donde pueda consultar los siguientes datos:
Clave del cliente.
Nombre del cliente.
Direccin del cliente.
Nombre del negocio.

Para esto la empresa que est desarrollando el proyecto realiz una tabla dedicada para
el catlogo 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 continuacin se
muestra un ejemplo de cmo quedara 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.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 conocers sus funciones y caractersticas ms 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 permitirn darle forma a el formulario que ests desarrollado, a lo
largo de este captulo aprenders cules son estos componentes y cmo usarlos en las
aplicaciones de escritorio utilizando el lenguaje Visual Basic.
Se le conocen como componentes comunes porque recuerda que .NET no slo es Visual
Basic, tambin existe C#, C++ y F# y estos lenguajes de programacin tambin
corresponden a .NET. Estos componentes aparecen en cualquiera de los lenguajes de
programacin antes descritos y de ah proviene el nombre de componentes comunes.
Estos componentes son los que te ayudarn a como desarrollador a crear tus
aplicaciones de escritorio. Estos estn disponibles en el entorno de desarrollo Visual
Studio 2010 en la pestaa ToolBox y slo los podrs usar una vez que hayas creado tu
proyecto y ests en la vista de diseo. En la siguiente pantalla de Componentes se
muestra cmo acceder a dichos componentes.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 25

Componentes
Los componentes que se utilizan con mayor frecuencia para el diseo 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 informacin, eliminarla o editarla segn sea el
caso.
TextBox : En un cuadro de texto el usuario podr capturar la
informacin que se le pida en un formulario.
Label : Una etiqueta no tiene ninguna accin en especfico, solo es texto que
normalmente se pone detrs de un Textbox para indicarle al usuario qu dato se
requiere que ingrese dentro del Textbox, o simplemente para poner algn tipo de ttulo
o texto dentro de las aplicaciones que se estn desarrollando.
Checkbox : Cuando se selecciona este componente es posible dar un
valor determinado. Por ejemplo en la mayora de los formularios donde se seleccione
el sexo de una persona siempre van a aparecer dos opciones las cuales son
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 propsito que el
checkbox.
ComboBox : este componente se llena con una lista o un arreglo
y permite seleccionar una opcin dentro de un grupo de opciones.

El uso de estos componentes los aprender ms a detalle en el captulo 2.3.2 Creacin de
Formularios en VB.NET.
Estos componentes comunes son los ms utilizados en las aplicaciones desarrolladas
con Visual Basic .NET y son los que en su mayora utilizars a lo largo de este curso para
desarrollar tus actividades.
En conclusin podemos decir que estos componentes son muy importantes ya que con
ellos sers capaz de crear aplicaciones de escritorio de acuerdo a los requerimientos que
el cliente solicite y as dar forma a los formularios o catlogos que el sistema que ests
desarrollando deba tener.


2.2.4. Componentes para acceso a bases de datos

En este tema aprenders 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 conexin con un manejador de base de datos y as permitir la
comunicacin con el sistema y la base de datos (Stephens, 2010).
Cuando se realiza una aplicacin 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
aplicacin 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 conexin con MySQL, despus de que se haya
instalado, se debe ir al men Tools y en seguida seleccionar la opcin Connect to
Database, como se observa a continuacin:


Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 27











Pantalla del Connect to Database

A continuacin se despliega la opcin Data source para poder seleccionar el origen de
datos de MySQL que servir para conectar la aplicacin con la Base de Datos.









Seleccin del origen de datos

Al dar clic en continuar se despliega la siguiente ventana que servir para la configuracin
de la conexin que tenga la contrasea, usuario, servidor y el nombre de la base de datos
para despus poder agregarla esa configuracin para su uso como se observa en la
imagen de la pantalla a continuacin:
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 28

Opcin agregar conexin

En esta ventana se solicitan los datos necesarios para establecer la conexin. En primer
lugar se menciona el nombre del servidor, despus el nombre de usuario con su
contrasea y finalmente el nombre de la base de datos que es donde de guardarn los
registros. Si los datos son correctos quedara establecida la conexin. Esta es una
herramienta fundamental para crear aplicaciones de escritorio que contenga grandes
cantidades de datos.


2.2.5. Mens

Dentro del entorno de desarrollo de Visual Studio se proporciona una serie de mens para
tener acceso a las herramientas y configuraciones necesarias para poder desarrollar una
aplicacin.

Los mens que contiene Visual Studio son muy semejantes a otras aplicaciones de
Microsoft como lo es Microsoft office donde se pueden encontrar los mens: Archivo, Ver,
Herramientas, etctera. A continuacin 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:



Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 cdigo o una
interfaz de la aplicacin ya mencionada anteriormente as tambin se pueden desplegar
otros pneles como el Explorador de Soluciones, Barra de Propiedades, Examinador de
Objetos, etctera como se observa en la siguiente imagen:


Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 30








Pantalla men Ver

Men Project (Proyecto): En el Men proyecto se pueden agregar componentes, clases
interfaces, formularios etctera, 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
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 31
Men Debug (Depurar): Mediante este men se puede correr la aplicacin 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








Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 32
Men Tools (Herramientas): El men herramienta permite configurar conexiones con
diversos manejadores de base de datos as como tambin configurar una Macro.







Men herramientas


Men Architecture (Arquitectura): La opcin ms significativa de este men es la
posibilidad de generar diagramas UML.





Men Arquitectura

Men Test (Probar): Permite hacer diversas pruebas a la aplicacin.






Men test



Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 33
Men Analyze (Analizar): Ayuda a diagnosticar problemas e identificar los mtodos
costosos ms comunes de la aplicacin.






Men analizar

Men Windows (Ventana): Permite acomodar las ventanas de cada panel.








Men ventanas

Como se mencion, los mens del entorno de desarrollo de Visual Studio permiten el
acceso a las herramientas y configuraciones necesarias para poder desarrollar una
aplicacin de escritorio.









Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 34
Actividad 2. Interfaces

El propsito de la actividad es que bosquejes un diseo de interfaz donde se incluya
una explicacin 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 creacin de un proyecto en el entorno de desarrollo
Visual Studio y nmbralo.

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 utilizars en tu proyecto.

4. Explica los componentes de ToolBox y de acceso a bases de datos que
utilizars en relacin con tu proyecto.

5. En un documento de texto integra las capturas de pantalla del proceso de
creacin 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 enva el archivo a tu Facilitador(a) para recibir
retroalimentacin mediante la herramienta Tarea.

*Consulta los Criterios de evaluacin de actividades Unidad 2 para conocer los
parmetros de evaluacin de esta actividad.













Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 35
2.3. Propuesta de diseo

Como ya se mencion en los temas anteriores, mediante el lenguaje de programacin
Visual Basic .Net en el entorno de desarrollo Visual Studio 2010 es posible realizar
aplicaciones de escritorio. En este tema se abordarn cuestiones de usabilidad para que
te sea posible comprender la importancia de que entre ms fcil sea utilizar un sistema,
se lograr uno de los principales objetivos del desarrollo de software que es la
satisfaccin total del cliente. Revisars 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 satisfaccin total del cliente, en este
captulo aprenders por qu la usabilidad es muy importante cuando desarrolles
aplicaciones de escritorio con VB .NET.
La usabilidad est orientada al mbito informtico en este caso a la usabilidad de los
sistemas de escritorio. Usabilidad es un trmino anglosajn que significa facilidad de uso
especficamente tienen su origen en la expresin user friendly (Alcal, 2007).
Ya hablando en trminos de calidad y sistemas de informacin se exponen algunas
definiciones:
Segn ISO/IEC 9241 es el grado de eficacia, eficiencia y satisfaccin con la que usuarios
especficos pueden lograr objetivos especficos, en contextos de uso especficos
(Lizardo, 2009, pg. 91).
Segn 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 especficas (Granollers i Saltiveri, Lors, Caas, 2005, pg. 97).
Existen ms definiciones de usabilidad pero en general todas coinciden en que un
producto usable es aquel que es fcil de utilizar y fcil 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 satisfaccin total del cliente.
Algunos de los beneficios ms importantes son (Alcal, 2007):
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 36
Incremento de la productividad de los usuarios de la aplicacin, al reducir los
tiempos para completar sus tareas y cometer menos errores que deberan ser
corregidos ms tarde. Esta productividad puede ser cuantificada por la propia
empresa que implanta productos usables en su organizacin.
Incremento del uso de la aplicacin. Si una aplicacin es fcil de usar, permite a
los usuarios realizar una gran variedad de tareas (Granollers i Saltiveri, Lors,
Caas, 2005).
Reduccin del costo en documentacin. Se entender fcilmente la forma de
utilizacin 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 aplicacin.
Reduccin de los costos y tiempos de desarrollo. Si se cuenta con una primera
versin en la cual se integren los requerimientos del usuario se evitarn costos de
nuevas realizaciones o de reparar fallas o errores.
Deteccin temprana de fallas. Si se siguen los lineamientos de usabilidad en las
fases iniciales del desarrollo, se detectarn errores o fallas en estas etapas
evitando que se vuelvan mayores y afecten las etapas finales del desarrollo.
Reduccin de los costos de mantenimiento de la aplicacin. Los sistemas que son
fciles de usar requieren menos entrenamiento, menos soporte para el usuario y
menos mantenimiento (Granollers i Saltiveri, Lors, Caas, 2005, pg. 99).
Aumento de la calidad en el desarrollo del producto y aumento de la satisfaccin
del cliente. Siguiendo los estndares de usabilidad se obtendr un producto de
calidad incluyendo los requerimientos del cliente y por lo tanto, se obtendr su
satisfaccin.
Los estndares de usabilidad pueden llegar a ser muy complejos en la teora, as que se
explicarn con base a la experiencia de desarrollo de software (Alcal, 2007):
Facilidad de uso: siempre hay que desarrollar un software de manera fcil y
entendible para el usuario, si se puede hacer uso de imgenes, iconos en los
botones es mucho mejor ya que con esto se le da otra manera al usuario de
entender la funcionalidad del software.

Navegacin: esta parte para sistemas de escritorio se refiere a la forma en que se
acomodaran los componentes en los catlogos 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 informacin requerida y hasta el
ltimo los botones de accin, esto con el fin de que a los usuarios se les hace ms
fcil capturar la informacin primero y ya una vez lista, seleccionar la accin que
deseen realizar con esos datos capturados.

Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 37
Colores: recuerda que un software normalmente reemplaza los procesos que
alguna organizacin llevaba manualmente y le ayudan a facilitar sus actividades,
por lo que en la mayora 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 despus 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 algn dato, pero si no
tiene un componente Label detrs 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 realizarn los componentes que se encontrarn dentro de un
formulario o catlogo.

Un ejemplo de usabilidad se observa por ejemplo en el diseo de interfaz Microsoft en su
paquetera de Office, al abrir los programas de edicin de texto, presentaciones u hojas
de clculo 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 clculo o una presentacin
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 paquetera 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 anlisis de los requerimientos que el cliente solicite.
An y cuando no tengas ninguna interfaz o formulario realizado en tu lenguaje de
programacin 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 afn de que haga alguna
recomendacin de lo que le gustara ver en el sistema a desarrollarse y se implemente
o corrija algn error detectado y al final se logre ese objetivo que es la satisfaccin
total del cliente.
En conclusin 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. Creacin de formularios en VB.
NET, aprenders cmo desarrollar un formulario en Visual Basic .NET.

Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 38

2.3.2. Creacin de formularios en VB.NET

En este captulo aprenders a llevar a cabo todo lo enseado a lo largo de esta unidad,
aprenders 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 informacin que se capture en este formulario contiene
los siguientes campos:
Clave_proveedor
Nombre_Proveedor
Direccin
Telfono
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 creacin de este. Lo primero ser abrir el entorno de desarrollo y
crear un nuevo proyecto como se explic en el tema 2.2.1 Creacin de un nuevo proyecto.
El siguiente paso es arrastrar los componentes de la pestaa ToolBox a la ventana que
por ahora tiene por nombre FORM1 como se muestra en la pantalla siguiente.

Pantalla arrastrar Componentes
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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 slo se observar como activo e inactivo, se utilizarn 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.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 40
Imagen de pantalla Cambiar nombre a componente
Es posible afirmar (por experiencia) que la mayora de sistemas de escritorio tienen los
botones en la parte inferior ya que los usuarios estn 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 integrarn tres botones uno
para guardar la informacin, otro para modificar la informacin y el ultimo para eliminar
la informacin de la tabla proveedores por medio de tu formulario. Este paso se muestra
en la siguiente pantalla botones de accin en el formulario.
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 41
Pantalla Botones de accin en el formulario

Por ltimo, si no hay errores, es necesario oprimir la tecla F5 la cual ejecuta la accin
Start debugging y mostrar el formulario listo. El resultado de esta ejecucin se
visualizar en un Formulario proveedores como se observa en la imagen a continuacin.

Imagen de una pantalla de formulario proveedores
Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | 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. Manipulacin de datos mediante .NET
podrs darle funcionalidad a un formulario y realizar sistemas de escritorio con Visual
Basic .NET manejando la informacin de una base de datos creada en MySQL.

Actividad 3. Usabilidad

Esta actividad tiene como propsito que identifiques la importancia de los estndares
de usabilidad y la mejor forma de utilizarlos cuando te encuentres realizando interfaces
grficas 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 segn el tema 2.3.1 Usabilidad a qu se refiere y cules son los
estndares 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 estndares de usabilidad
que integrars en el mismo.

3. Menciona los estndares seleccionados y explica las ventajas que representa
integrarlos en tu proyecto.

4. Redacta una conclusin donde expliques con tus propias palabras por qu es
importante la usabilidad y sus estndares en el mbito del diseo 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 enva el archivo a tu Facilitador(a) para recibir
retroalimentacin mediante la herramienta Base de datos.

6. Revisa y comenta la participacin de al menos dos compaeros(as) respecto a
sus conclusiones y la forma en que integrarn los estndares de usabilidad en
sus proyectos, integra tus propias experiencias y conocimientos sobre
usabilidad as como la aportacin de las actividades de tus compaeros a tus
propios conceptos.


*Consulta los Criterios de evaluacin de actividades Unidad 2 para conocer los
parmetros de evaluacin de esta actividad.


Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 43
Autoevaluacin

Realiza la autoevaluacin 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 difcil comprensin.

Evidencia de aprendizaje. Diseo de interfaces mediante .NET

Esta actividad tiene como propsito Disear una interfaz grfica de usuario en VB.NET,
que interacte 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 almacenarn en el
formulario.

3. Con base en la tabla de base de datos crea el formulario.

4. Identifica los componentes de conexin a bases de datos que utilizars y
disea la interfaz grfica de usuario con VB .NET con base a los requerimientos
de tu proyecto, integrando todos los campos y botones necesarios para que esta
interfaz interacte con la tabla en la base de datos.

5. Explica la relacin de la base de datos con la realizacin de la interfaz grfica 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 enva el archivo a tu Facilitador(a) para recibir
retroalimentacin al Portafolio de evidencias.

*Consulta el documento EA. Lista de cotejo y rbrica de evaluacin de la Unidad 2 para
elaborar esta actividad y considerar los parmetros de evaluacin.



Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 44
Autorreflexiones

Adems de enviar tu trabajo de la Evidencia de aprendizaje, ingresa al foro Preguntas
de Autorreflexin y consulta los cuestionamientos que tu Facilitador(a) presente, a
partir de ellos elabora tu Autorreflexin.

Posteriormente enva 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 grficas de usuario utilizando VB
.NET. Para lograr una conexin, es necesario contar con dos principales elementos, la
interfaz y los formularios, mediante los cul 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 seala que el
objetivo de desarrollar software es la satisfaccin total del cliente y la calidad en el
producto.
En la siguiente unidad aprenders como interactuar con una base de datos desde .NET a
travs de un formulario , y a realizar las acciones bsicas dentro de ste que son Guardar,
modificar y eliminar la informacin que el usuario desee mediante un formulario creado en
VB .NET a una base de datos desarrollada en MySQL.


Para saber ms

El sitio que Microsoft proporciona a los desarrolladores .NET encontrars ms informacin
a detalle de los componentes y del lenguaje VB .NET
http://msdn.microsoft.com/es-mx/

Si deseas consultar mayor informacin sobre Visual Studio, puedes ingresar al siguiente
sitio:
Visual Studio. Novedades de Visual Studio:
http://www.microsoft.com/visualstudio/esn/visual-studio-2013

Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 45
Fuentes de consulta

Alcal, M. L., (2007). Medida de la usabilidad en aplicaciones de escritorio. Un
mtodo
prctico. (Tesis licenciatura). Madrid, Espaa: Universidad Nacional de Educacin
a Distancia. [En lnea] 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). Diseando apps para mviles. Barcelona: Catalina
Duque Giraldo.

Desongles Corrales, J., y Moya Arribas, M., (2006). Conocimientos bsicos de
informtica. Madrid : MAD.

Ferr Grau, X., (2010). Principios bsicos de usabilidad para ingenieros de
software. Madrid, Espaa: Universidad Politcnica de Madrid, Facultad de
informtica. [En lnea]
http://educacion.usach.cl/ojs/index.php/ojsprueba1/article/viewFile/7/5

Granollers i Saltiveri, T., Lors Vidal, J., Caas Delgado, J.J., (2005). Diseo de
sistemas interactivos centrados en el usuario. Barcelona: UOC.

Liberos, E., Nez, A., Bareo, R., Garca del Poyo, R., Gutirrez-Ulecia, J.C., y
Pino G., (2013). El libro del marketing interactivo y la publicidad digital. Madrid,
Espaa: ESIC Editorial.

Luna Gonzlez, Lizbeth (2004). El diseo de interfaz grfica de usuario para
publicaciones digitales. Mxico: UNAM DGSCA Revista Digital Universitaria. [En
lnea] http://www.revista.unam.mx/vol.5/num7/art44/ago_art44.pdf

Luzardo Alliey, Ana Milagro (2009). Diseo de la interfaz grfica web en funcin de
los dispositivos mviles. Caso de estudio: diarios digitales. Buenos Aires,
Argentina: Universidad de Palermo, Facultad de Diseo y Comunicacin, Maestra
en diseo.

Mackenzie, D., Sharkey, K., (2003). Aprendiendo Visual Basic.Net en 21 Lecciones
Avanzadas. Tr. A David Garza Marn. Mxico: Pearson Educacin.

Programacin .NET III
Unidad 2. Diseo de interfaces mediante .NET
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 46
Martnez, A.B., y Cueva, J.M., (2001). Estndares y guas. Espaa: Asociacin
Interaccin Persona-Ordenador Universidad de Oviedo. [En lnea]
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 lnea]
http://msdn.microsoft.com/es-mx/ff380143

MSDN Microsoft Developer Network (2013b). Explorador de soluciones. [En lnea]
http://msdn.microsoft.com/es-es/library/26k97dbc(v=vs.90).aspx

MSDN Microsoft Developer Network (2013c). Interfaces en Visual Basic .NET. [En
lnea] http://msdn.microsoft.com/es-es/library/cc436896%28v=vs.71%29.aspx

MSDN Microsoft Developer Network (2013d). Propiedades (ventana). [En lnea]
http://msdn.microsoft.com/es-es/library/ms171352.aspx

Stephens, R., (2010). Visual Basic 2010 Programmer's Reference. Indianapolis:
Wiley Publishing, Inc.

También podría gustarte