Fase 3 - Diseño e implementación del lado del cliente

Presentado por:

Anyerina Paola Cabarcas Diaz

Código: 1118815359

Grupo:

301127_22

Director:

Francisco Javier Hilarión Novoa

Universidad Nacional Abierta y a Distancia “UNAD”

Programación de sitios web - Ingeniería de sistemas

Puerto Colombia – Atlántico

Octubre de 2019
 INTRODUCCION

En el presente trabajo se plantea una propuesta de diseño de un sitio web haciendo

uso de Frameworks y lenguajes de programación del lado del cliente para dar solución a la

problemática presentada por la tienda “Tesla Electronics”.

 Diseño de la interfaz del usuario:

Debe diseñar la interfaz gráfica del aplicativo web con base en el -lenguaje de

etiquetas HTML y en el Framework Bootstrap. Puede hacer uso de “Bootstrap Navigation

Bar”. El diseño de la interfaz debe tener bien claro el nombre del aplicativo, una barra de

menús con 4 menús (Administrador, Inventario, Ventas, Utilidades).

Desarrollo de la actividad:

Diseño de formulario de ingreso

 Diseño de la interfaz:

Dentro del menú de Utilidades la Tienda Tesla electronics 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

administrador. Ejemplo:

Valor de compra $5000

% utilidad o ganancia 30%
% IVA 19%-950
BOTON CALCULAR
Valor de venta $ $7450
Ganancia $ $1500
 Desarrollo:

Los empleados de la tienda requieren un aplicativo en Java Script

que calcule el valor de resistencias eléctricas, ya que el cálculo del valor

se realiza por medio de una tabla de colores y requiere de tiempo, lo

cual debe optimizarse por medio de un programa. La resistencia es un

componente eléctrico que consume corriente y la disipa en forma de

calor, tiene diversas aplicaciones dependiendo de su valor comercial y se

mide en ohmios.

Desarrollo:
Ejemplo de cálculo:
Primera banda, color azul = 6
Segunda banda, color café = 1
Tercera banda, color rojo = x100
Calculo = 61x100 = 6100 ohmios

• A continuación, se observa el código de colores el cual será la base para

realizar la aplicación en JavaScript, se recomienda implementar un formulario donde se

seleccione el valor de la primera banda, el valor de la segunda banda y el valor de la tercera

banda, conforme a. los colores y que el usuario observe el valor en ohmios.

 Desarrollo:

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

formularios en HTML:

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

4 formularios en HTML:

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 guardar producto.

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 actualizar producto.

Que permita al usuario eliminar un producto con las siguientes especificaciones:

código de producto y un botón que se llame eliminar producto.

 Que permita al usuario consultar un producto con las siguientes especificaciones:

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

Desarrollo: Formulario Nª1 de ingreso

Formulario Nª2 Actualizar Producto

Formulario Nª3 y 4 Consultar producto