Paso 3: Diseño Aplicativo Multimedia

Presentado por:
Raul Andrés Jiménez
Código: 80220672
Skype: Majive2006@hotmail.com

Presentado a:
LINA LUGO GUERRA
Tutor

Universidad Nacional Abierta y a Distancia UNAD

Visual Basic Básico
Programa Ingeniería de Sistemas
CEAD JAG
Mayo de 2020

Contenido
Introduction...................................................................................................................................3
Objectives.......................................................................................................................................4
Desarrollo realizado por cada uno de los estudiantes....................................................5
Desarrollo realizado por Raul Jiménez:..................................................................6
Desarrollo realizado por Jorge Camilo Gomez:................................................19
Anexo: Entrega del proyecto Visual Basic........................................................................23
Conclusions..................................................................................................................................24
Referentes Bibliográficos........................................................................................................25

Introduction
The evolution of programming tools over the last 45 years has occurred
in parallel with advances in hardware. A current programming language,
such as Visual Basic, differs considerably from those of a few years ago.
The visual nature of the Windows operating system requires more
advanced tools than were previously required.

Without window-based environments, a programming language was a

text-based tool with which you could write your programs. Today much
more is needed than just a language; You need a graphical development
tool that can take advantage of all the graphical, multimedia,
connectivity and multitasking capabilities that Windows offers. Visual
Basic allows you to generate
 
applications that interact with all the resources of the current Windows
operating systems.
Visual Basic now has a true native code compiler that creates
executables faster than before. It also includes several wizards that
present dialog boxes based on questions and answers that guide you in
creating applications. Its development environment, much like
Developer Studio, now supports features very similar to those shown in
Visual C ++ and Visual J ++.

Objectives
- Develop the visual basic application according to the design
originated in step 1.

- Insert all kinds of multimedia tools to develop the application.

- Have an overview of various interface designs, so that students

make a correct decision in their choice and programming in Visual
Basic.

Desarrollo realizado por cada uno de los estudiantes

El proyecto es el siguiente:

Se debe revisar los temas propuestos en el paso 1 del curso.

Estos temas de estudio deben visualizarse o ser mostrados con
herramientas de video, texto, imágenes y sonido de forma tal que el
estudiante pueda adquirir un conocimiento sobre los temas vistos, son
de carácter educativo formativo.

Documentar el desarrollo de cada ejercicio. (Análisis, diseño, código)

Cada estudiante selecciona un tema de los propuestos en paso 1 del

curso y en el foro deja constancia de su elección.

Desarrolla el aplicativo multimedia y el resumen, o documentar el

desarrollo de cada ejercicio. (Análisis, diseño, código). Lo publica en el
foro de la actividad.
Desarrollo realizado por Raul Jiménez:

El tema escogido por Raul Jimenez fue el tema 1, Operaciones Básicas

de programación.

- Desarrollo formulario de ingreso aplicativo:

A continuación, se muestra el diseño del formulario de ingreso

al aplicativo planteado en la actividad 1:

Siguiendo este diseño, se realiza el siguiente formulario en

visual basic el cual cumple las siguientes funciones:

o Solicita clave y contraseña.

o Solicita la generación de un captcha de seguridad
para ser ingreso al aplicativo.
La codificación de este formulario login es el siguiente:
Public Class Form2
Dim contar As Integer

Private Sub Form2_Load(sender As Object, e As EventArgs) Handles

MyBase.Load
'TODO: esta línea de código carga datos en la tabla
'Formulario1DataSet.formulario' Puede moverla o quitarla según sea necesario.
Call captcha()
Randomize()
Timer2.Start()
CaptchaLabel.Text = ""

USUARIOTextBox.Text = ""
CONTRASEÑATextBox.Text = ""
CaptchaLabel.Visible = False
CaptchaLabel.Text = ""
GenerarLabel.Visible = False
CaptchaText.Visible = False
GenerarLabel.Visible = False

End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

Button1.Click
If USUARIOTextBox.Text = "" Then
MsgBox("ingrese nombre de usuario", vbInformation, "ingresar
usuario")
USUARIOTextBox.Focus()
ElseIf CONTRASEÑATextBox.Text = "" Then
 MsgBox("ingrese una contraseña", vbInformation, "ingrese
contraseña")
CONTRASEÑATextBox.Focus()
ElseIf CheckBox1.Checked = False Then
MsgBox("seleccionar el captcha", vbInformation, "seleccionar
captcha")
CheckBox1.Focus()
ElseIf CaptchaText.Text = "" Then
MsgBox("resolver el captcha", vbInformation, "resolver captcha")
Else
If USUARIOTextBox.Text <> "raul" Then
MsgBox("ingrese usuario correcto", vbInformation, "Usuario
erroneo")
ElseIf CONTRASEÑATextBox.Text <> "123" Then
MsgBox("ingrese contraseña correcta", vbInformation,
"Contraseña erronea")
ElseIf CaptchaText.Text = "" Then
MsgBox("resolver el captcha", vbInformation, "captcha
erronea")
CaptchaText.Focus()
Else
If CheckBox1.Checked = True And USUARIOTextBox.Text = "raul"
And CONTRASEÑATextBox.Text = "123" And CaptchaText.Text = CaptchaLabel.Text
Then
Me.Hide()
Form3.Show()
Else
MsgBox("Captcha incorrecto", vbInformation, "captcha
erronea")
CaptchaText.Text = ""
CaptchaText.Focus()
End If
End If

End If

End Sub

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles

Button2.Click
Form1.Show()

End Sub

Public Sub captcha()

Dim a As Integer
Dim i As Integer
'matriz de 64 caracteres
Dim cap() As String = {"0", "1", "2", "3", "4", "5", "6", "7", "8",
"9", "0", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
"n", "ñ", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A",
"B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "Ñ", "O",
"P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"}
Dim cant As Integer
Dim cap1 As String
Dim cant1 As Integer
Randomize()
cant = Int(Rnd() * 7)
 cant1 = Len(cant)

For i = 1 To Val(cant)
a = Int(Rnd() * 64)
Randomize()
cap1 = cap(a)
CaptchaLabel.Text = CaptchaLabel.Text & cap1

Next
End Sub

Private Sub GenerarLabel_Click(sender As Object, e As EventArgs) Handles

GenerarLabel.Click
CaptchaLabel.Text = ""
If CaptchaText.Text <> "" Then
CaptchaText.Clear()
CaptchaText.Focus()
Call captcha()
Else
Call captcha()

End If
End Sub

Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs)

Handles CheckBox1.CheckedChanged
If CheckBox1.Checked = True Then
Timer1.Start()
Else
Timer1.Stop()
Contar = 0
ContarLabel.Text = Contar
CaptchaLabel.Visible = False
CaptchaLabel.Text = ""
GenerarLabel.Visible = False
CaptchaText.Visible = False

End If
End Sub

Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles

Timer1.Tick
contar = contar + 1
If contar <= 5 Then
ContarLabel.Visible = True
ContarLabel.Text = contar
Else
GenerarLabel.Visible = True
CaptchaLabel.Visible = True
CaptchaText.Visible = True
ContarLabel.Visible = False
contar = 0
Timer1.Stop()
ContarLabel.Text = contar
If CaptchaLabel.Text = "" Then
 Call captcha()
End If
End If
End Sub

Private Sub Timer2_Tick(sender As Object, e As EventArgs) Handles

Timer2.Tick
If CaptchaLabel.Text = "" Then
Call captcha()
End If
End Sub
End Class

- Desarrollo formulario menú principal:

A continuación, se muestra el diseño del formulario del menú

principal al planteado en la actividad 1:

Siguiendo este diseño, se desarrolla el siguiente formulario

como menú principal de la aplicación:
 Al dar click en las imágenes de los temas, el usuario es
conducido al contenido multimedia escogido:
La codificación del formulario es la siguiente:
Public Class Form3

Private Sub SALIR_Click(sender As Object, e As EventArgs)

Form2.Show()
End Sub

Private Sub LinkLabel1_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkLabel1.LinkClicked
Me.Close()
Form2.Show()

End Sub

Private Sub OperacionesImg_Click(sender As Object, e As EventArgs)

Handles OperacionesImg.Click
Me.Close()
Form4.Show()
End Sub

End Class

- Desarrollo formulario temario “Operaciones Básicas en

programación”:
A continuación, se muestra el diseño del formulario del temario
a tratar planteado en la actividad 1:

Siguiendo este diseño, se desarrolla el siguiente formulario

como abordaje del tema “Operaciones Básicas de
Programación”:

Al dar click en las imágenes de los temas, el usuario es

conducido al contenido multimedia escogido:
 La codificación del formulario es la siguiente:
Public Class Form4
Private Sub LinkLabel1_LinkClicked(sender As Object, e As
LinkLabelLinkClickedEventArgs) Handles LinkMenu.LinkClicked
Me.Close()
Form3.Show()
End Sub

Private Sub LinkCerrar_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkCerrar.LinkClicked
Me.Close()
Form2.Show()
End Sub

Private Sub MultImg_Click(sender As Object, e As EventArgs) Handles

MultImg.Click
Me.Close()
Form5.Show()
End Sub

Private Sub PictureBox2_Click(sender As Object, e As EventArgs)

Handles PictureBox2.Click
Me.Close()
Form6.Show()
End Sub

Private Sub PictureBox3_Click(sender As Object, e As EventArgs)

Handles PictureBox3.Click
Me.Close()
Form7.Show()
End Sub
End Class

- Desarrollo formulario opción “Ayuda Multimedia” para el

tema “Operaciones Básicas en programación”:

Al dar click en la imagen del menú “Ayuda Multimedia”, el

usuario es conducido a un formulario donde encontrará dos
videos enlazados desde youtube referentes al tema de
operaciones básicas de programación:
La codificación del formulario es la siguiente:
Public Class Form5
Private Sub LinkCerrar_LinkClicked(sender As Object, e As
LinkLabelLinkClickedEventArgs) Handles LinkCerrar.LinkClicked
Me.Close()
Form2.Show()
End Sub

Private Sub LinkMenu_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkMenu.LinkClicked
Me.Close()
Form3.Show()
End Sub

End Class

Los videos están enlazados a través de la siguiente propiedad:

- Desarrollo formulario opción “Documentación PDF” para
el tema “Operaciones Básicas en programación”:

Al dar click en la imagen del menú “Documentación PDF”, el

usuario es conducido a un formulario donde encontrará dos
documentos PDF descargables referentes al tema de
operaciones básicas de programación:
La codificación del formulario es la siguiente:
Public Class Form6

Private Sub PictureBox2_Click(sender As Object, e As EventArgs)

Handles PictureBox2.Click
Dim filePath As String
Dim fileName As String
Dim fileExtension As String

fileName = "Introduccion_a_la_Programacion"
fileExtension = "pdf"

filePath = Environment.CurrentDirectory & String.Format("\{0}",

fileName + "." + fileExtension)

Process.Start(filePath)
End Sub

Private Sub PictureBox3_Click(sender As Object, e As EventArgs)

Handles PictureBox3.Click
Dim filePath As String
Dim fileName As String
Dim fileExtension As String

fileName = "VB"
fileExtension = "pdf"

filePath = Environment.CurrentDirectory & String.Format("\{0}",

fileName + "." + fileExtension)
 Process.Start(filePath)
End Sub

Private Sub LinkMenu_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkMenu.LinkClicked
Me.Close()
Form3.Show()
End Sub

Private Sub LinkCerrar_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkCerrar.LinkClicked
Me.Close()
Form2.Show()
End Sub

End Class

- Desarrollo formulario opción “Templates y ejemplos

descargables” para el tema “Operaciones Básicas en
programación”:

Al dar click en la imagen del menú “Templates y ejemplos

descargables”, el usuario es conducido a un formulario donde
encontrará un ejemplo descargable con un proyecto en Visual
Basic con ejemplos programados del tema de operaciones
básicas de programación:
La codificación del formulario es la siguiente:
Public Class Form7
Private Sub PictureBox3_Click(sender As Object, e As EventArgs)
Handles PictureBox3.Click
Dim filePath As String
Dim fileName As String
Dim fileExtension As String

fileName = "calculadora-simple-2"
fileExtension = "zip"

filePath = Environment.CurrentDirectory & String.Format("\{0}",

fileName + "." + fileExtension)

Process.Start(filePath)
End Sub

Private Sub LinkCerrar_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkCerrar.LinkClicked
Me.Close()
Form2.Show()
End Sub

Private Sub LinkMenu_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkMenu.LinkClicked
Me.Close()
Form3.Show()
End Sub

End Class
Desarrollo realizado por Jorge Camilo Gomez:

Llevando el avance a la herramienta y proyecto hago mi aporte individual sobre la temática

trabajada
Menú principal
El tema que trabaje fue Condicionales aquí solo se agrega una simple línea de código para que me
lleve a la siguiente ventana

Private Sub PictureBox2_Click(sender As Object, e As EventArgs) Handles

PictureBox2.Click
Me.Close()
Form9.Show()
End Sub

Ya en esta ventana nos muestra un concepto básico de condicionales

junto a una imagen que llevara a un archivo pdf en una web aquí
también estarán los controles de Cerrar sesión y Menu principal

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

Form8.Show()

End Sub

Private Sub LinkMenu1_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkMenu1.LinkClicked

Form3.Show()
 End Sub

Private Sub LinkCerrar1_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkCerrar1.LinkClicked

Form2.Show()

End Sub

Private Sub PictureBox2_Click(sender As Object, e As EventArgs) Handles

PictureBox2.Click

Process.Start("http://repositori.uji.es/xmlui/bitstream/handle/10234/5958/4_Condicio
nales.pdf?sequence=1&isAllowed=y")
End Sub

Encontraremos también un botón con ayuda didáctica o programación

de condiciones sencillas que desarrollé y un video de youtube que
explica de manera rápido el tema

Al dar clic en el botón ayuda didáctica llevara a un nuevo Form que se llama “Ayuda didáctica que
muestra dos ejercicios que llevan el código con su respectiva funcionalidad, con un sencillo
problema para entender el tema en donde trato de hacer aclaración del Si y SI anidado
Public Class Form8
Private Sub Label1_Click(sender As Object, e As EventArgs) Handles Label1.Click

End Sub

Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles

CheckBox1.CheckedChanged

End Sub

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

Button1.Click
If CheckBox1.Checked = True Then
MsgBox("No ira a la estación de policia")

ElseIf CheckBox2.Checked = True Then

MsgBox("Mala suerte amigo")
ElseIf CheckBox1.Checked = False And CheckBox2.Checked = False Then
MsgBox("Di algo rapido por favor el policia no espera", vbInformation,
"Respuesta")

End If
End Sub

Private Sub Button2_Click_1(sender As Object, e As EventArgs) Handles

Button2.Click
If TextBox1.Text = "" Then
MsgBox("Ingresa la cantidad de productos")
TextBox1.Focus()

ElseIf TextBox1.Text >= 6 Then

MsgBox("Para la proxima te vendere")

Else

MsgBox("Gracias por tu compra")

End If
 End Sub

Private Sub LinkMenu_LinkClicked(sender As Object, e As

LinkLabelLinkClickedEventArgs) Handles LinkMenu.LinkClicked
Form3.Show()
End Sub
End Class

Como detalle final he agregado un Icono en los forms.

 Anexo: Entrega del proyecto Visual Basic

A continuación, se anexa la dirección en Google Drive donde se podrá

descargar el proyecto definitivo descrito en este documento.

https://drive.google.com/file/d/11k3hINYgNq0kYNbD1O3FwcCRUSHnkm
MX/view?usp=sharing
 Conclusions

When developing a visual basic application with multimedia content, the

following should be considered:

- Prototype development, which usually consists of the development

of a complete unit or module of a course (content, activities,
evaluation, etc.). If the educational program is simpler, the
prototype can be expanded to the contents of the final version of
the program. The prototype format must conform to the final
format you want to make of the application.

- Preparation of multimedia resources, selecting the characteristics

that they must have in order to be part of the program and meet
the pedagogical and instructional requirements. For this, the
specific software and hardware for the creation of the multimedia
will be used.

- Integration of multimedia resources in the initial version of the

program.
 Referentes Bibliográficos

- Ceballos, S. F. J. (2012). Enciclopedia de Microsoft Visual Basic:

interfaces gráficas y aplicaciones para Internet con Windows
Forms y ASP.NET (3a. ed.). Madrid, ES: RA-MA Editorial. Parte
3 Acceso a datos. (pp. 421-486), Recuperado
de http://bibliotecavirtual.unad.edu.co:2077/lib/unadsp/reader.action?
ppg=449&docID=11046056&tm=1480461245069 Blanco, L. M. (2002).
Programación en Visual Basic .NET. Madrid: Grupo Eidos.

- Cornazzani, A., & Berge, D. (2012). Generador de código para

pantallas creadas con Balsamiq Mockups (Doctoral dissertation,
Universidad Argentina de la Empresa).

- byspel. (10 de 03 de 2020). Como Hacer un Login en Visual

Basic.NET (Usuario y Contraseña ). Obtenido de Como Hacer un
Login en Visual Basic.NET (Usuario y Contraseña ):
https://byspel.com/como-hacer-un-login-en-visual-basic-net-
usuario-y-contrasena/

- unpa. (2020). ProgramacionEstructurada. En blopez, Microsoft

Visual Basic (pág. 111). Mexico. Recuperado el 10 de marzo de
2020, de
https://www.unpa.edu.mx/~blopez/ProgramacionEstructurada/
Diapositivas/VisualBasic/ResumidoVisualBasic.pdf

- https://www.youtube.com/watch?v=j7B0zGz4xz0&t=661s