UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD

Escuela Ciencias Básicas, Tecnología e Ingeniería

Unidad 1: Paso 2 - Planeación del proyecto a realizar

Por:
Juan Sebastián Cubillos Gonzalez
Presentado a:
Erika Alejandra Beltran
Curso:
VISUAL BASIC AVANZADO
405021A_762 – 405021_2

UNAD
30 de abril de 2020
Derechos de autor © 2020 por Juan Sebastián Cubillos Gonzalez. Todos los derechos reservados.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas i

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Contenido

Introducción............................................................................................................................................................... iii
Objetivos ................................................................................................................................................................... iii
Desarrollo Actividad ................................................................................................................................................. iv
Realizar la revisión de la caja de herramientas de Visual Basic 2017 y seleccionar 5 herramientas de uso web,
esto se hace de forma individual, realizar una descripción de cada una de ellas con su imagen, funcionalidad,
uso y al menos 10 propiedades de cada una. ....................................................................................................... iv
Herramienta 1: 𝐶𝑎𝑡𝑎𝑙𝑜𝑔𝑍𝑜𝑛𝑒 .......................................................................................................................... iv
Herramienta 2: 𝐴𝑝𝑝𝑒𝑟𝑎𝑛𝑐𝑒𝐸𝑑𝑖𝑡𝑜𝑟𝑃𝑎𝑟𝑡 .......................................................................................................... iv
Herramienta 3: 𝑇𝑖𝑚𝑒𝑟........................................................................................................................................ v
Herramienta 4: 𝐿𝑜𝑔𝑖𝑛 ....................................................................................................................................... vi
Herramienta 5: RequiredFieldValidator......................................................................................................... vii
Revisar el proyecto propuesto y hacer una propuesta de diseño para dar solución. Su aporte es a la Interfaz
del proyecto......................................................................................................................................................... viii
Principal ........................................................................................................................................................... viii
Registro .............................................................................................................................................................. ix
Inicio de sesión .................................................................................................................................................. ix
Recursos didácticos ............................................................................................................................................ x
Evaluación........................................................................................................................................................... x
Conclusiones ............................................................................................................................................................ xii
Bibliografía ............................................................................................................................................................... xii

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas ii

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Introducción

El paso número 2 del curso Visual Basic Avanzado de la UNAD, permite que el estudiante inicie con el
desarrollo de un sitio WEB, demostrando sus capacidades para adaptarse a entornos diferentes al de
Windows y su capacidad para desarrollar código fuente en lenguaje VB para entornos WEB.

Objetivos

• Explorar e identificar de la caja de herramientas, controladores que sean usados en entornos WEB.
• Desarrollar en código VB la capa visual de un sitio WEB.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas iii

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Desarrollo Actividad

Realizar la revisión de la caja de herramientas de Visual Basic 2017 y seleccionar 5 herramientas

de uso web, esto se hace de forma individual, realizar una descripción de cada una de ellas con
su imagen, funcionalidad, uso y al menos 10 propiedades de cada una.

Herramienta 1: 𝐶𝑎𝑡𝑎𝑙𝑜𝑔𝑍𝑜𝑛𝑒

Imagen

Ilustración 1 Icono del control 𝐶𝑎𝑡𝑎𝑙𝑜𝑔𝑍𝑜𝑛𝑒, imagen tomada de IDE Microsoft Visual Studio Community 2019.

Funcionalidad

Control web incluido por Microsoft en su IDE de desarrollo Visual Studio, con el propósito de permitir
que el usuario pueda personalizar los controles que son visibles en una página WEB, los controles
comunes son el sitio, un conjunto de páginas o una sola página, (Microsoft, 2014), agregando o
modificando contenidos webs, por medio de 𝑊𝑒𝑏𝑝𝑎𝑟𝑡, (Soliman, 2012).

Propiedades

1. 𝑇𝑎𝑏𝐼𝑛𝑑𝑒𝑥.
2. 𝑇𝑜𝑜𝑙𝑇𝑖𝑝.
3. 𝑃𝑎𝑟𝑡𝑆𝑡𝑦𝑙𝑒.
4. 𝐸𝑟𝑟𝑜𝑟𝑆𝑡𝑦𝑙𝑒.
5. 𝐹𝑜𝑛𝑡.
6. 𝐶𝑙𝑜𝑠𝑒𝑉𝑒𝑟𝑏.
7. 𝐹𝑜𝑟𝑒𝐶𝑜𝑙𝑜𝑟.
8. 𝐸𝑛𝑎𝑏𝑙𝑒𝑑.
9. 𝑆𝑘𝑖𝑛𝐼𝐷.
10. 𝐶𝑠𝑠𝐶𝑙𝑎𝑠𝑠.

Herramienta 2: 𝐴𝑝𝑝𝑒𝑟𝑎𝑛𝑐𝑒𝐸𝑑𝑖𝑡𝑜𝑟𝑃𝑎𝑟𝑡

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas iv

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Imagen

Ilustración 2 Icono del control 𝐴𝑝𝑝𝑒𝑟𝑎𝑛𝑐𝑒𝐸𝑑𝑖𝑡𝑜𝑟𝑃𝑎𝑟𝑡, imagen tomada de IDE Microsoft Visual Studio Community 2019.

Funcionalidad

Permite editar los componentes visuales modificando características como el título, dirección, altura y si
es visible; (BARLIK, 2013) este componente no puede ser añadido, sin antes haber incluido un control de
tipo 𝐸𝑑𝑖𝑡𝑜𝑟𝑍𝑜𝑛𝑒, (Amaral, s.f.).

Propiedades

1. 𝐴𝑐𝑐𝑒𝑠𝑠𝐾𝑒𝑦.
2. 𝐵𝑎𝑐𝑘𝐼𝑚𝑎𝑔𝑒𝑈𝑟𝑙.
3. 𝐷𝑒𝑠𝑐𝑟𝑖𝑝𝑡𝑖𝑜𝑛.
4. 𝐷𝑖𝑟𝑒𝑐𝑡𝑖𝑜𝑛.
5. 𝐺𝑟𝑜𝑢𝑝𝑖𝑛𝑔𝑇𝑒𝑥𝑡.
6. 𝐸𝑛𝑎𝑏𝑙𝑒𝑇ℎ𝑒𝑚𝑖𝑛𝑔.
7. 𝐸𝑛𝑎𝑏𝑙𝑒𝑉𝑖𝑒𝑤𝑆𝑡𝑎𝑡𝑒.
8. 𝑆𝑐𝑟𝑜𝑙𝑙𝐵𝑎𝑟𝑠.
9. 𝑊𝑟𝑎𝑝.
10. 𝑉𝑖𝑠𝑖𝑏𝑙𝑒.

Herramienta 3: 𝑇𝑖𝑚𝑒𝑟

Imagen

Ilustración 3 Icono del control 𝑇𝑖𝑚𝑒𝑟, imagen tomada de IDE Microsoft Visual Studio Community 2019.

Funcionalidad

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas v

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Es similar al control de tiempo incluido en los 𝑊𝑖𝑛𝑑𝑜𝑤𝑠𝐹𝑜𝑟𝑚𝑠, permite establecer un control de tipo
tiempo, que activa un contador, (Microsoft, s.f.), permite establecer cuentas atrás, cronómetros, etc; son
componentes de tipo Ajax para los 𝑊𝑒𝑏𝑠𝐹𝑜𝑟𝑚𝑠, (Khan, 2015).

Propiedades

1. 𝐼𝐷.
2. 𝐶𝑙𝑖𝑒𝑛𝑡𝐼𝐷𝑀𝑜𝑑𝑒.
3. 𝐸𝑛𝑎𝑏𝑙𝑒𝑑.
4. 𝐸𝑛𝑎𝑏𝑙𝑒𝑉𝑖𝑒𝑤𝑆𝑡𝑎𝑡𝑒.
5. 𝐼𝑛𝑡𝑒𝑟𝑣𝑎𝑙.
6. 𝑉𝑎𝑙𝑖𝑑𝑎𝑡𝑒𝑅𝑒𝑞𝑢𝑒𝑠𝑡𝑀𝑜𝑑𝑒.
7. 𝑉𝑖𝑒𝑤𝑆𝑡𝑎𝑡𝑒𝑀𝑜𝑑𝑒.

Herramienta 4: 𝐿𝑜𝑔𝑖𝑛

Imagen

Ilustración 4 Icono del control 𝐿𝑜𝑔𝑖𝑛, imagen tomada de IDE Microsoft Visual Studio Community 2019.

Funcionalidad

Control de inicio de sesión, (cristian, 2017), permite al usuario iniciar sesión en un sitio, está integrado
dentro de los controles disponibles por Visual Studio, por ende, es estándar y permite personalizar el
control por medio de conexión a diferentes a componentes de tipo autenticación y autorización como:
𝐿𝐷𝐴𝑃, 𝑊𝑖𝑛𝑑𝑜𝑤𝑠𝐴𝑢𝑡ℎ𝑒𝑛𝑡𝑖𝑐𝑎𝑡𝑖𝑜𝑛, (Giardina, 2011), etc.

Propiedades

1. 𝐼𝑛𝑠𝑡𝑟𝑢𝑐𝑡𝑖𝑜𝑛𝑇𝑒𝑥𝑡.
2. 𝐿𝑜𝑔𝑖𝑛𝐵𝑢𝑡𝑡𝑜𝑛𝐼𝑚𝑎𝑔𝑒𝑈𝑟𝑙.
3. 𝑃𝑎𝑠𝑠𝑤𝑜𝑟𝑑𝐿𝑎𝑏𝑒𝑙𝑇𝑒𝑥𝑡.
4. 𝑇𝑖𝑡𝑙𝑒𝑇𝑒𝑥𝑡.
5. 𝑉𝑖𝑠𝑖𝑏𝑙𝑒𝑊ℎ𝑒𝑛𝐿𝑜𝑔𝑔𝑒𝑑𝑙𝑛.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas vi

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
6. 𝑃𝑎𝑠𝑠𝑤𝑜𝑟𝑑𝑅𝑒𝑐𝑜𝑣𝑒𝑟𝑦𝐼𝑐𝑜𝑛𝑈𝑟𝑙.
7. 𝑃𝑎𝑠𝑠𝑤𝑜𝑟𝑑𝑅𝑒𝑐𝑜𝑣𝑒𝑟𝑦𝑈𝑟𝑙.
8. 𝐹𝑎𝑖𝑙𝑢𝑟𝑒𝑇𝑒𝑥𝑡.
9. 𝑈𝑠𝑒𝑟𝑁𝑎𝑚𝑒.
10. 𝑅𝑒𝑛𝑑𝑒𝑟𝑂𝑢𝑡𝑒𝑟𝑇𝑎𝑏𝑙𝑒.

Herramienta 5: RequiredFieldValidator

Imagen

Ilustración 5 Icono del control 𝑅𝑒𝑞𝑢𝑖𝑟𝑒𝑑𝐹𝑖𝑒𝑙𝑑𝑉𝑎𝑙𝑖𝑑𝑎𝑡𝑜𝑟, imagen tomada de IDE Microsoft Visual Studio Community 2019.

Funcionalidad

Control de tipo validación que se asocia a otro control visual, su funcionamiento se activa cuando el
usuario procede a realizar tareas de envió de datos al servidor, (Microsoft, s.f.), en eventos de tipo 𝑆𝑢𝑏𝑚𝑖𝑡;
funciona para indicar obligatoriedad en un campo y debe ser asociado al control de tipo envió por medio
de una propiedad llamada: 𝑉𝑎𝑙𝑖𝑑𝑎𝑡𝑖𝑜𝑛𝐺𝑟𝑜𝑢𝑝, (ASP.NET WebForms Tutorial, s.f.).

Propiedades

1. 𝐵𝑎𝑐𝑘𝐶𝑜𝑙𝑜𝑟.
2. 𝐵𝑜𝑟𝑑𝑒𝑟𝐶𝑜𝑙𝑜𝑟.
3. 𝐶𝑙𝑖𝑒𝑛𝑡𝐼𝐷𝑀𝑜𝑑𝑒.
4. 𝐼𝑛𝑖𝑡𝑖𝑎𝑙𝑉𝑎𝑙𝑢𝑒.
5. 𝑆𝑒𝑡𝐹𝑜𝑐𝑢𝑠𝑂𝑛𝐸𝑟𝑟𝑜𝑟.
6. 𝑉𝑎𝑙𝑖𝑑𝑎𝑡𝑒𝑅𝑒𝑞𝑢𝑒𝑠𝑡𝑀𝑜𝑑𝑒.
7. 𝑉𝑖𝑒𝑤𝑆𝑡𝑎𝑡𝑒𝑀𝑜𝑑𝑒.
8. 𝐴𝑐𝑐𝑒𝑠𝑠𝐾𝑒𝑦.
9. 𝐶𝑜𝑛𝑡𝑟𝑜𝑙𝑇𝑜𝑉𝑎𝑙𝑖𝑑𝑎𝑡𝑒.
10. 𝐷𝑖𝑠𝑝𝑙𝑎𝑦.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas vii

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Revisar el proyecto propuesto y hacer una propuesta de diseño para dar solución. Su aporte es a
la Interfaz del proyecto.

El proyecto es el siguiente.

La universidad Nacional Abierta y a Distancia requiere un programa de computador para el apoyo en el

proceso enseñanza aprendizaje de los estudiantes de ingeniería de sistemas, este programa debe manejar
un registro de estudiantes en una base de datos, una vez registrado el estudiante debe seleccionar una a
una las áreas a estudiar como apoyo al proceso de formación, estas áreas:

• Active Server Pages (ASP).

• Machine Learning
• Big Data
• Minería de datos
• AWS, (Amazon Web Services).

Cada área o tema debe tener una evaluación, cada uno de estos temas se muestran mediante ayudas
didácticas multimedia, videos, imágenes, sonido y texto. El proyecto o programa puede ser publicado en
internet al final del curso, o solo a nivel de localhost.

Principal

Ilustración 6 Página principal propuesta, imagen tomada del sitio en construcción para el desarrollo de la actividad.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas viii

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería

Registro

Ilustración 7 Página de registro propuesta, imagen tomada del sitio en construcción para el desarrollo de la actividad.

Inicio de sesión

Ilustración 8 Página de inicio de sesión propuesta, imagen tomada del sitio en construcción para el desarrollo de la actividad.

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas ix

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Recursos didácticos

Ilustración 9 Página de curso, imagen tomada del sitio en construcción para el desarrollo de la actividad.

Evaluación

Ilustración 10 Página de evaluación, imagen tomada del sitio en construcción para el desarrollo de la actividad

El código fuente de la página se encuentra versionado en

https://github.com/jscubillos5/paso2_grupo_2_Juan_Cubillos

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas x

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
IMPORTANTE: El HTML y CSS fueron tomados de tooplate.com, que permite bajo la licencia de
código abierto, manipular y editar los contenidos para propósitos personales o corporativos, la plantilla
usada es: https://www.tooplate.com/view/2105-input

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas xi

 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD
Escuela Ciencias Básicas, Tecnología e Ingeniería
Conclusiones

• VB ofrece una gran cantidad de herramientas que pueden ser usados en páginas web, garantizando
cubrir la necesidad de usuarios y desarrolladores.
• El contenido WEB no dinámico, HTML y CSS, pueden ser fácilmente manipulable, garantizando una
baja dependencia del contenido dinámico, permitiendo que pueda ser usado en muchos entornos.

Bibliografía

Amaral, F. (s.f.). El curso ASP.NET 3.5 en VB.NET y C- - WebParts. Obtenido de http://www.linhadecodigo.com.br:

http://www.linhadecodigo.com.br/artigo/2150/curso-aspnet-35-em-vbnet-e-csharp-webparts.aspx

ASP.NET WebForms Tutorial. (s.f.). Validación - RequiredFieldValidator. Obtenido de https://asp.net-

tutorials.com: https://asp.net-tutorials.com/es/164/validacion/validacion-requiredfieldvalidator/

BARLIK, A. (15 de Mayo de 2013). Asp.NET Web Parts. Obtenido de https://es.slideshare.net/:

https://es.slideshare.net/abarlik/aspnet-web-parts

cristian. (12 de Diciembre de 2017). como hacer un login en asp net c# y Bootstrap 4.0. Obtenido de
https://cpiprodesign.blogspot.com: https://cpiprodesign.blogspot.com/2017/12/como-hacer-un-login-
en-asp-net-c-y.html

Giardina, F. (13 de Enero de 2011). Tutorial ASP.NET: Crear una página de login, autenticación y seguridad.
Obtenido de http://www.maestrosdelweb.com: http://www.maestrosdelweb.com/tutorial-asp-net-
crear-una-pagina-de-login-autenticacion-y-seguridad/

Khan, M. (24 de Julio de 2015). ASP.Net AJAX Timer control Tutorial with example. Obtenido de
https://www.aspsnippets.com: https://www.aspsnippets.com/Articles/ASPNet-AJAX-Timer-control-
Tutorial-with-example.aspx

Microsoft. (22 de Octubre de 2014). CatalogZone Web Server Control Overview. Obtenido de
https://docs.microsoft.com: https://docs.microsoft.com/en-us/previous-
versions/aspnet/ms366511(v%3Dvs.100)

Microsoft. (s.f.). RequiredFieldValidator Class. Obtenido de https://docs.microsoft.com:

https://docs.microsoft.com/en-
us/dotnet/api/system.web.ui.webcontrols.requiredfieldvalidator?view=netframework-4.8

Microsoft. (s.f.). Timer Class. Obtenido de https://docs.microsoft.com: https://docs.microsoft.com/en-

us/dotnet/api/system.web.ui.timer?view=netframework-4.8

Soliman, M. (04 de Octubre de 2012). Trabajar con WebParts Page, WebPart Zones & WebParts. Obtenido de
https://www.c-sharpcorner.com: https://www.c-sharpcorner.com/article/working-with-webparts-page-
webpart-zones-webparts/

jscubillosgo@unadvirtual.edu.co Ingeniería de Sistemas xii