Unidad 2 Diseño de Interfaces Mediante .NET

47
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

Transcript of Unidad 2 Diseño de Interfaces Mediante .NET

Page 1: 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

Page 2: 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 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

Page 3: 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 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.

Page 4: 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 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.

Page 5: 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 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.

Page 6: 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 5

Ubicación del ícono ToolBox en la pantalla principal de Visual Studio

Botón

ToolBox

Page 7: 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 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.

Page 8: 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 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:

Page 9: 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 8

Formulario con componentes de la Caja de Herramientas de Visual Studio

Page 10: 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 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,

Page 11: 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 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)

Page 12: 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 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

Page 13: 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 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

Page 14: 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 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).

Page 15: 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 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)

Page 16: 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 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.

Page 17: 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 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

Page 18: 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 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

Page 19: 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 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.

Page 20: 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 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:

Page 21: 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 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:

Page 22: 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 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

Page 23: 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 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.

Page 24: 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 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.

Page 25: 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 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.

Page 26: 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 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

Page 27: 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 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:

Page 28: 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 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:

Page 29: 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 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:

Page 30: 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 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:

Page 31: 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 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

Page 32: 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 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

Page 33: 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 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

Page 34: 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 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.

Page 35: 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 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.

Page 36: 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 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):

Page 37: 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 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.

Page 38: 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 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.

Page 39: 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 38

2.3.2. Creación de formularios en VB.NET

En este capítulo aprenderás a llevar a cabo todo lo enseñado a lo largo de esta unidad,

aprenderás a hacer un formulario en base a algunos requerimientos dados.

Para comenzar se creará un formulario para dar de alta los datos de un proveedor, la

tabla en donde se va a guardar la información que se capture en este formulario contiene

los siguientes campos:

Clave_proveedor

Nombre_Proveedor

Dirección

Teléfono

Email

Estatus_proveedor

Ya que se cuenta con los campos de la tabla con los cuales va a interactuar el formulario

se procederá con la creación de este. Lo primero será abrir el entorno de desarrollo y

crear un nuevo proyecto como se explicó en el tema 2.2.1 Creación de un nuevo proyecto.

El siguiente paso es arrastrar los componentes de la pestaña ToolBox a la ventana que

por ahora tiene por nombre FORM1 como se muestra en la pantalla siguiente.

Pantalla arrastrar Componentes

Page 40: 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 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.

Page 41: 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 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.

Page 42: 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 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

Page 43: 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 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.

Page 44: 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 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.

Page 45: 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 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

Page 46: 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 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.

Page 47: 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 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.