Fase 4 – Diseño prototipo con componente multimedia en ambiente web

Visual Basic Avanzado

Actividad Individual

Elaborado por
DIEGO RAUL FORERO NIVIA
CODIGO 13.992.426

Grupo
405021_4

TUTORA

Martha Yolanda Diaz Sánchez

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

INGENIERÍA DE SISTEMAS
IBAGUÉ TOLIMA
 INTRODUCTION

With the development of the following individual activity of Unit 3 Phase 4 - Prototype
design with a multimedia component in a web environment, it is intended to design a
multimedia page in a web environment, where it will have content for each student to choose
a topic from the five that are found in the annex, with the help of Visual Basic .Net, a tool in
a web environment, introducing audios, videos, documentation and a heading in each topic
to help users understand the importance of the tools found in the page.
 OBJECTIVES

➢ Design of a multimedia page in a web environment.

➢ Enter the five topics proposed in Annex 1

➢ Enter in each topic a writing describing the selected topic with audio, video, pdf
document, for a better understanding by the user or student.
Evidencia individual:

Actividad para desarrollar:

Diseñar una página web para la Universidad Nacional Abierta y a Distancia Unad, que
maneje contenido didáctico con apoyo multimedia.
El usuario al ingresar pueda ver los temas de estudio:
1. Ingeniería de software – tema el proceso del software.
2. Servicios en la nube
3. Seguridad en internet.
4. Interacción Humano computador.
5. Marketing digital.

Cada área o tema debe explicada o mostrada mediante ayudas didácticas multimedia,
videos, imágenes, sonido y texto.

Creación de página de inicio o interfaz inicial:

Paso 1
Lo rimero de se debe hacer es abrir el programa de Visual Basic .Net en ambiente web, luego
crearemos una carpeta donde irán las imágenes, otra donde irán los estilos, otra donde debe
ir los documentos pdf, se debe agregar un formulario web para la pagina de inicio siendo
esta nuestra interfaz principal. Como se puede observar en las siguientes imágenes.
Como se puede observar en la siguiente imagen el código para la realización de la interfaz o
página de inicio, el código contiene programación en html, donde ingresamos el contenido
que nos debe mostrar la pagina inicio siendo esto el título, un enunciado o descripción de los
que se va a encontrar en cada uno de los temas, imágenes de la universidad, los cinco botones
inicio, temas, recursos, aprendizaje, acerca de. Cada botón tiene un menú desplegable
donde se encontrarán los temas de interés.
Pagina web, interfaz principal inicio: cómo podemos observar en la pagina inicial se ve
claramente el contenido con una breve introducción, una imagen alusiva al tema, un video
referente a la universidad, y los botones donde cada uno de ellos nos llevaran haber los
temas y contenidos con toda la información.
Menú desplegable de los temas, realizado en la programación utilizando bootstrap
Navigation Bar 5, la opción de menú Extend, como se observa en la segunda imagen
tomada de la pagina Bootstrap.

Creación del formulario del tema escogido.

Paso 2.
Se procede a crear el formulario con el nombre del tema escogido “Seguridad en internet”,
debe agregar un formulario web, para crear el código, donde debe de ir la información del
tema escogido, siendo una breve introducción, audios, imágenes alusivas al tema, videos y
documentos en pdf, para que el usuario o alumno tenga un mejor conocimiento al ingresar
en cada uno de los contenidos que se encuentran en el tema. Como se aprecia en las
siguientes imágenes.
Imagen web donde se aprecia el tema escogido.
Seguridad en Internet.

Imagen con el código que se implementó para el diseño del formulario, en el se realiza la
programación describiendo una breve introducción de que es la seguridad en Internet, un
video donde nos brinda las ayudas para protegernos de los ataques que a diario realizan los
ciber delincuentes, imágenes alusivas al tema, audios de interés, documentación en pdf.
Paso 3
Creación de los formularios para los demás temas.
Como se puede ver a continuación veremos los demás formularios que se deben crear cada
uno con sus códigos. Cada uno de ellos se realizo con los pasos anteriores.
Ingeniería de Software
Código

Servicios en la nube.
Código:

Interacción humano computador

Código:

Marketing Digital
Código

A continuación, se muestra la funcionalidad de los demás botones.

Botón recursos digitales
Botón aprendizaje
Acerca de: en este menú van los datos de los autores que realizaron la pagina web
 CONCLUSIONS

With the completion of phase 4 we were able to know the tools and design of Visual Basic .Net, in
a web environment creating forms for the different themes, adding styles that help us to shape
the page, making the programming in each of the drop-down buttons for each content, and thus
acquire the basic knowledge to create a web page. on VB.Net.