Fase 3 Diseño e implementación frontend

Presentado por grupo: 301127_12

Alexis Villamizar Gómez – c.c. 88254888
Elwer Gonzalez Robayo – c.c. 1090364355
José Mauricio Saavedra – c.c. 88268989
William Yesid Ovalle Cano – c.c. 1063621270

Presentado A:
Francisco Javier Hilarion Novoa

Universidad Nacional Abierta y a Distancia

Programación de sitios web
2022
 INTRODUCCIÓN

Durante el desarrollo de la presente actividad se realizará un software de sitio web mediante el

cual el cliente podrá hacer uso de la tecnología para el registro y control de precios de sus

productos. También permitirá realizar conversión de equivalencias entre unidades de medida de

byte como se solicita para la actividad.

 CAPTURAS DE PANTALLA

Uso del enlace de Boostrap

Las operaciones se realizaron mediante Java Scrip

Ejecución de la página

Selección de menú, despliegue

Dentro del menú de Utilidades la Empresa “Computers SAS” necesita lo siguiente:

➢ Un aplicativo en JavaScript que permita ingresar un valor de compra de un producto, un

porcentaje de utilidad, un porcentaje de impuesto IVA y un botón que permita calcular el

valor de venta del producto y el valor en pesos de la ganancia para el 2 administrador.

Los empleados de la tienda requieren un aplicativo en Java Script que permita calcular la

equivalencia entre tamaño de datos (byte, kilobyte, megabyte, gigabyte, terabyte).

Si el usuario selecciona kilobyte, el aplicativo debe arrojar 1000 kilobyte. Si el usuario ingresa 1

gigabyte, y selecciona equivalencia a megabytes, debe arrojar 1000 megabytes.

Dentro del menú de Inventario y apoyado en el framework Bootstrap, debe diseñar 4 formularios

en HTML:

1. Que permita al usuario ingresar un producto con las siguientes especificaciones: código

de producto, nombre de producto, marca del producto, precio de compra, cantidad

comprada y un botón que se llame registrar producto.

2. Que permita al usuario actualizar un producto con las siguientes especificaciones: código

de producto, nombre de producto, marca del producto, precio de compra, cantidad

comprada y un botón que se llame modificar producto.

 3. Que permita al usuario eliminar un producto con las siguientes especificaciones: código

de producto y un botón que se llame borrar producto.

4. Que permita al usuario consultar un producto con las siguientes especificaciones: código

de producto y un botón que se llame consultar producto.

Los formularios anteriores, solo deben ser diseñados, ya que serán usados en la siguiente fase

para interactuar con la base de datos del aplicativo web.

El menú de administrador debe dejarlo en blanco.

 ➢ Realizar un resumen donde describa aspectos importantes que deben tenerse en

cuenta en cuanto a la seguridad de aplicativos del lado del cliente en JavaScript y

HTML.

Existen pocos mecanismos de seguridad informática en Internet, el solo colocar una página
Web, trae riesgos que pueden ser controlados con alguna estrategia adecuada.

Se debe cumplir con 3 aspectos para dar seguridad a una página:

Operatividad: La información de la página siempre tiene que ser operativa para que quienes
accedan puedan navegar en ella sin problemas. Se debe tener presente que el ingreso de un
intruso al sistema puede provocar daños que afecten a la operatividad.

Integridad: No sirve que una información esté en condiciones operativas si es incompleta o

está alterada. Para que la información sea inútil no necesita ser destruida, es suficiente una
acción tan sutil como cambiar los unos por ceros. Es por eso por lo que la integridad de la
información que se muestra en una página Web es uno de los factores más importantes de la
seguridad, pues de él dependen el interés y la credibilidad de la página.

Privacidad: Es lógico que quien quiere que una información sea privada no debe colocarla en
una página Web. Pero puede ocurrir que parte de la información esté reservada a usuarios
registrados o que exista algún tipo de restricción.

En cada una de las condiciones tiene sus propios riesgos que actúan dentro o fuera del
sistema.

Las medidas de seguridad básicas para tener en cuenta son:

1. La encriptación de Datos: Es una técnica para ocultar datos de manera que sólo
puedan ser vistos por aquellos que deben verlos. Los servidores seguros tratan de encriptar
los datos entre el navegador y el servidor. En algún momento durante el ciclo de compras,
después que los datos llegan al servidor seguro, el sistema debe desencriptar los datos.
 Aun si los datos son desencriptados sólo por un instante, la información podría ser
interceptada por algún pirata. Crear un sistema en el que la información permanezca
encriptada a lo largo del ciclo es prácticamente imposible.
La configuración más segura es una que transmita la información al propietario de la
empresa en formato encriptado, pase la información a una computadora que no esté en
Internet y luego desencripte la información. Además, si en una empresa se utiliza un
mismo algoritmo para encriptar y desencriptar datos, se necesitará que alguna tercera
pieza de datos desencripte el código, que sería una clave. Esto sólo funcionará si tanto la
persona transmisora como la parte receptora conocen la clave. Si la persona receptora no
conoce la clave, tiene que enviar la clave a esa parte, y está puede ser interceptada.

2. Firma Digital: Ofrece un método de encriptación de datos que evita tener que
compartir claves para leer mensajes. Los algoritmos de encriptación y desencriptación son
adaptados de manera que sólo la clave pública puede desencriptar los datos encriptados
por la clave privada. Por consiguiente, puede transmitir con libertad la clave pública al
mundo. La prevención es la mejor medicina y esto se aplica también a la seguridad de las
computadoras. Se debe mantener la seguridad de los archivos de datos de tal forma que
solo las personas correctas puedan verlos.

3. Creación de un Sitio Seguro: Las ventajas de crear un sistema seguro antes de ser
pirateado deben ser obvias. La prevención es la mejor medicina y esto se aplica también a
la seguridad de las computadoras. Se debe mantener la seguridad de los archivos de datos
de tal forma que solo las personas correctas puedan verlos. Esto es crucial para los
siguientes tipos de datos y archivos: contraseñas de usuarios, archivos de facturación,
registros de sistema y de usuarios, información de tarjetas de créditos, información
confinada de sistemas remotos, compiladores, herramientas de administración.

4. Firewal s, Wrappers y Proxies: Los firewalls, pueden ser software o hardware que protege
los puertos y evita que los piratas penetren al sistema. Los firewalls permiten que tengan
acceso al sistema sólo ciertos nombres de dominio confiables. El usuario no sabe que
 existe el wrapper y no puede detectar ninguna diferencia en el sistema. El modo proxy es
un método permite ocultar datos por medio de reenrutamiento de las solicitudes.

El servidor Web maneja entonces la dirección real de los datos hacia el mundo exterior. Esto
reduce la dirección que el usuario está tomando cuando deja su sistema, permitiéndole al usuario
enrutar los datos los datos a través de los agujeros en sus propios firewalls. Al filtrar la
información, puede restringir el contenido y rastrear el uso al igual que modificar la información
en ese instante. Los servidores proxy también pueden ser dirigidos a otros servidores proxy, lo
cual les permite ocultar datos en forma efectiva.

Además de beneficiarse con el ocultamiento de los datos, ser reduce la carga del servidor.

➢ Clave pública: Es una clave alfanumérica creada por medio de algoritmos matemáticos

que sirve para encriptar una serie de datos. Suele ser creada junto con una clave privada,

la clave pública se suele llamar también llave pública.

➢ Clave privada: Es una clave alfanumérica creada por medio de algoritmos matemáticos

que sirve para desencriptar una serie de datos que han sido creados por la clave pública

que forma la pareja.

➢ Certificado: Es la certificación electrónica que vincula unos datos de verificación de

firma a un signatario y confirma su identidad.

➢ Autoridad certificadora: Es la autoridad que garantiza que una firma es de quien dice ser,

esta garantía se da por medio de certificados digitales.

➢ Prestador de servicios de Certificación: Es una empresa o entidad que expide certificados

digitales, puede ser una autoridad de certificación o expedirlos en nombre de ésta.

 TABLA DE APORTE

Versión Fecha y Estudiante Aporte Descripción

del hora
documento
V1 31-mar- Elwer Creación de carpeta Se crea la primea carpeta del
2022 Gonzalez base código para realizar los
Robayo demás aportes
V2 6-abr-2022 José Corrección aporte Se cambió el diseño del
Mauricio navbar debido a problemas
Saavedra de responsividad. El botón
que abre las opciones no
desplegaba el menú ya que
no aparecía.
Se cambió la justificación y
extensión de los campos
Prueba con los valores dl
ejemplo de la guía
V3 7-abr-2022 William Se crea repositorio Se crea repositorio y se
Yesid en GitHub ingresan colaboradores para
Ovalle realizar los diferentes aportes
Cano sobre el código y el código
del cálculo del producto con
sus procedimientos. (lógica
del conversor).
V4 10-abril- Alexis Se realizan Se realizan correcciones en
2022 Villamizar correcciones todos los códigos de la
Gómez semánticas palabra Altualizar por
Actualizar, se toman
evidencias para la elaboración
del documento de entrega
V5 11-abril- Alexis Modificación de Se realiza cambio en
2022 Villamizar unidades de unidades de equivalencia
Gómez equivalencia como lo solicita la guía y se
da en el ejemplo: 5000
kilobyte es igual a 5
Megabyte.

Se crea nueva solicitud de

extracción en repositorio del
compañero William Ovalle
V6 12-abril- José Actualizar Cambio de apariencia en
2022 Mauricio conversiónUnIf.html menú "calcular equivalencia"
Saavedra
 CONCLUSIONES

Durante el desarrollo de la presente actividad hemos aprendido como realizar una propuesta

en el desarrollo de Software y/o de una Sitio Web, haciendo uso de los conceptos claves para los

requerimientos funcionales y no funcionales. Adicional, se aprendió como utilizar Bootstrap e

implementarlo en un proyecto. El uso de java permitió conocer su versatilidad en la

programación de sitios web.

Mediante la implementación del lenguaje de programación JavaScript se logra dar solución a

las problemáticas planteadas en la guía, permitiendo ejecutar comandos de código para la captura

y procesado de datos con lo cual se logra realizar, cálculos rápidos y efectivos sin comprometer

la velocidad de respuesta de la pagina garantizando la calidad de usabilidad y operatividad de

esta.

La implementación de frameworks como Bootstrap en cuanto al diseño permite al grupo de

trabajo estilizar y ajustar la pagina a diferentes tipos de pantalla combinando una serie de

archivos css y JavaScript, Bootstrap permite realizar diseños rápidos y funcionales que facilitan o

disminuyen el tiempo de programación en cuanto al diseño mejorando drásticamente los tiempos

de entrega de las actividades y facilitando el trabajo al desarrollador

 REFERENCIAS BIBLIOGRAFICAS

Shenoy, A., & Sossou, U. (2014). Learning Bootstrap. Packt Publishing.

https://bibliotecavirtual.unad.edu.co/login?url=https://search.ebscohost.com/login.aspx?direct=tr

ue&db=nlebk&AN=933023&lang=es&site=eds-live&scope=site

Mohedano, J. (2013). Iniciación a javascript (pp. 25-61). Ministerio de Educación y

Formación Profesional de España.

https://bibliotecavirtual.unad.edu.co/login?url=https://search.ebscohost.com/login.aspx?direct=tr

ue&db=edsebk&AN=867293&lang=es&site=eds-live&scope=site

Hilarion, F. J. (2016). Formularios Html y Php. [vídeo]. Repositorio Institucional UNAD.

https://repository.unad.edu.co/handle/10596/9079.

2.6 Aspectos de seguridad. (2013, 14 noviembre). Programacion Web.

https://programacionwebisc.wordpress.com/2-6-aspectos-de-seguridad/

cómo crear una rama en github. (2021, 17 septiembre). YouTube.

https://www.youtube.com/watch?v=jwZG3rQ9y7E

Otto, M. J. T. (s. f.). Bootstrap. Getbootstrap. https://getbootstrap.com/