UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD

Tutorial guía manejo de multimedia en Visual Basic.Net

Ingresar a Visual Studio

Seleccionar
Crear nuevo proyecto

Seleccionar Aplicación web ASP

Revisar que este en Visual Basic, si se encuentra
entonces seleccionarlo

Clic en siguiente

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Darle un nombre: ejemplo multimedia1
Donde se guarda

Clic en crear

Para este ejemplo seleccionar Vacío

Clic en crear

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Entorno de trabajo

Agregar un webform nuevo.

Clic botón derecho del ratón sobre el nombre del proyecto
Clic en agregar
Clic agregar nuevo elemento

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Seleccionar Formulario WebForms
Revisar que se encuentre en Visual Basic - Web

Asignarle nombre
Clic en agregar
Muestra
Cuerpo (Body ) donde vamos a programar

Clic en diseño esto nos permite trabajar las herramientas del cuadro o caja.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

En el webforms en vista diseño
Agregar texto para el ejemplo Seguridad en internet
Agregar un espacio para imagen

Agregar botones, asignarle un nombre

Asignarle nombre a los botones, ejemplo video, texto y sonido.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Muestra la vista diseño

Vamos ejecutando y se revisa cómo va el proceso inicialmente

Continuamos haciendo ajustes.

Agregue al código donde va el titulo
<center><strong>SEGURIDAD EN INTERNET</strong><center/><br />

Para negrilla y centrar, esta opción de centrar en algunas versiones presenta error.
Probar alternativas de centrar y formato de texto.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Al ejecutar se va ajustando la presentación

Crear una carpeta para imágenes

En esta carpeta se guardan las imágenes a usar.
Al igual que se creó el nuevo WebForms, clic botón derecho del mouse sobre el
nombre del proyecto.
Clic en agregar
Clic en nueva carpeta

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Asignarle el nombre imágenes

Ya creada la carpeta agregar archivo de imagen.

Clic botón derecho del mouse sobre la carpeta imágenes
Clic en agregar

Clic en elemento existente

Seleccionar el archivo de la imagen

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Clic en agregar

Muestra el archivo anexado

Ahora agregar la imagen
Agregar la ruta donde se encuentra y el nombre del archivo.
En el espacio donde se agrego la herramienta Image.
<asp:Image ID="Image1" runat="server" Height="208px"
ImageUrl="~/imagenes/seguridad.jpg" Width="415px" />

Ancho y alto del cuadro donde va la imagen

Height = altura
Width = ancho
ImageUrl = ruta de acceso del archivo

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Ejecutar y revisar el funcionamiento

Agregar una nueva pagina

Para manejar el tema de video
Hacer el proceso de agregar nuevo WebForms como se realizó para iniciar.
(página 3)
Recuerde que debe estar en Visual Basic - Web
Darle el nombre videos

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Para agregar el video directamente desde Youtube
Buscar el video

Para el ejemplo seleccionamos este

En la parte inferior dice compartir, dar clic allí
Seleccionar
Incorporar

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Marcar y copiar el embebido (código)

Este código se pega en la pagina donde se quiere que se muestre, debajo del
titulo
<iframe width="560" height="315"
src="https://www.youtube.com/embed/vqyuNha0Rek" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>

Muestra el video, ejecute el programa

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Programar el botón de video desde la página principal

Doble clic sobre el botón video

Direccionar el evento hacia la página videos.aspx

Response.Redirect("videos.aspx")

Probar el funcionamiento

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Funciona.
Se puede agregar un botón al form videos.

Y se programa para que regrese a la página principal

WebForm1.
Código para el botón de retornar desde Videos.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles
Button1.Click
Response.Redirect("WebForm1.aspx")
End Sub

Probar su funcionamiento.

Agregar una nueva página.

Se repite la opción de agregar como en la pagina 3.
Agregar un nombre, para el ejemplo texto.
Una vez creada escribir el texto

Ir a la página principal y programar el botón texto

Doble clic y programar, nombre de la página a abrir

En la pagina de texto programar el botón de retorno

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Agregar sonido

Crear la carpeta sonido, para allí guardar el archivo.

Agregar nueva pagina asignarle un nombre, para el ejemplo sonido.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Agregar la línea de código

<audio src="sonido/seguridad1.mp3" Autoplay controls loop class="auto-

style16"></audio>

Se ejecuta y podrá escuchar el sonido de su archivo grabado,

Agregar el enlace desde la página principal WebForm1 como se realizó los otros
enlaces.
Agregar un botón de retorno
Y probar.
Se puede implementar:
Centrar texto
Color de fondo
Color de texto
Puede manejar los códe para sonido.

Creando un Style en la página principal (WebForm1)

Es un formato que me permite centrar, color, márgenes.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Se crea un Style, para manejar los formatos.
<style type="text/css">
body, #body_bg
{background-color: #79a19c} “color de fondo se maneja con código
alfanumérico”
.auto-style1 {
text-align: center; “centrado “
}
p.MsoNormal
{margin-top:0cm;
margin-right:5cm;
margin-bottom:8.0pt;
margin-left:5cm;
line-height:107%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
}

</style>

Este código va entre el <title> </title>

Y el head.
</head>

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Se agrega el estilo o Style al texto o conjunto a centrar

Se ejecuta y muestra color de página centrado todo.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva

Se puede colocar este bloque a cada página. Es forma más sencilla.
<style type="text/css">
body, #body_bg
{background-color: #79a19c}
.auto-style1 {
text-align: center;
}
p.MsoNormal
{margin-top:0cm;
margin-right:5cm;
margin-bottom:8.0pt;
margin-left:5cm;
line-height:107%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
}

</style>
Cambiar el color.
https://htmlcolorcodes.com/es/

Cada color tiene su código.

Ingeniero Jaime Rubiano Llorente ECBTI Neiva