Raul - Jimenez - Fase 3

Fase 3 – Diseño e implementación al lado del cliente
Presentado por:
Raul Andrés Jiménez
Código: 80220672
Cel: 3229444753
Grupo 301127_4
Skype: Majive2006@hotmail.com
Presentado a:
Francisco Hilarión Novoa
Tutor
Universidad Nacional Abierta y a Distancia UNAD

Programación de sitios web
Programa Ingeniería de Sistemas
CEAD JAG
Abril de 2020
Desarrollo de la actividad
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).
R: A continuación, se muestra el diseño realizado para este menú

principal el cual cuenta con los menús solicitados:
A continuación, se muestra la codificación HTML utilizada en este índex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tienda Texas Electronics ONLINE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.image{
display:inline-block;
width: 100%;
vertical-align: middle;
}
.image img{
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<h1 style="background-color:Orange;">Tienda Texas Electronics ONLINE</h1>
<div class="container">
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="white">MENU</a></li>
</li>
<li><a href="Gray">Administrador</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inventario<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="ingresar.html">Ingreso de producto</a></li>
<li><a href="Actualizar.html">Actualización, busqueda y/o eliminación de producto</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ventas<span class="caret"></span></a>
<li><a href="Ventas.html">Resumen de ventas</a></li>
</ul>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Utilidades<span class="caret"></span></a>
<li><a href="calculadora.html">Calculadora de Venta</a></li>
<li><a href="resistencias.html">Calculadora segun la resistencia eléctrica</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container" >
<img src="img/ferre.JPG" >
</div>
</body>
</html>
Dentro del menú de Utilidades la Tienda Texas Electronics necesita lo

siguiente:
R: El menú de utilidades se han colocado las siguientes herramientas:
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.
R: A continuación, se muestra la evidencia de la aplicación conectada a

la pagina principal y que sirve para realizar dichos cálculos:
La codificación de la aplicación es la siguiente:
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<TITLE>Calculadora de Ventas</TITLE>
<link rel="stylesheet" href="estilos.css">
</head>
<BODY>
<form action="" class="formulario" id="miformulario">
<h1 class="formulario__titulo">Calculadora de Ventas</h1>
<input type="number" class="formulario__input" id="ValorCompra" value="0" name= "ValorCompra">

<label for=""
class="formulario__label2">Valor de la compra</label>
<input type="number" class="formulario__input" id= "PorcentajeGanancia">
<label for=""
class="formulario__label2">% utilidad o ganancia</label>
<input type="number" class="formulario__input" id = "IVA">
<label for=""
class="formulario__label2">% IVA</label>
<h1></h1>
<h1></h1>
<input type="number" class="formulario__input" id = "ValorVenta">
<label for=""
class="formulario__label2">Valor de venta $</label>
<input type="number" class="formulario__input" id = "Ganancia" value="0">
<label for=""
class="formulario__label2">Ganancia $</label>
<input name="Calcular" type="button" onClick="valor()" value="Calcular" />
</form>
<script type="text/javascript" src="funcioncalculadora.js"></script>
</BODY>
</html>
- Archivo JavaScript:
function valor(){
// variables
var x = document.getElementById('ValorCompra').value;
var y = (document.getElementById('PorcentajeGanancia').value);
var w = (document.getElementById('IVA').value);
var z = (parseFloat(x) *(parseFloat(y)/100));
var t = (parseFloat(x) *(1+(parseFloat(w)/100)));
var ValorTotal = t + z;
document.getElementById("ValorVenta").value=ValorTotal;
document.getElementById("Ganancia").value=z;
}
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.
R: A continuación, se muestra la evidencia de la aplicación conectada a
la página principal y que sirve para realizar dichos cálculos:
La codificación es la siguiente:
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<TITLE>Calculadora del valor de las resistencias eléctricas</TITLE>
<link rel="stylesheet" href="estilos3.css">
</head>
<BODY>
<form action="" class="formulario">
<h1 class="formulario__titulo">Cálculo del valor de las resistencias eléctricas</h1>
<h1></h1>
<label for= "banda1"class="formulario__label2">1a Banda</label>
<select name= "banda1" id="banda1">
<option value="0">Negro</option>
<option value="1">Café</option>
<option value="2">Rojo</option>
<option value="3">Naranja</option>
<option value="4">Amarillo</option>
<option value="5">Verde</option>
<option value="6">Azul</option>
<option value="7">Violeta</option>
<option value="8">Gris</option>
<option value="9">Blanco</option>
</select>
<h1></h1>
</select>
<h1></h1>
</select>
<h1></h1>
<h1></h1>
<h1></h1>
<input type="text" class="formulario__input" id="resultado">
<label for=""
class="formulario__label">Valor de la resistencia en ohmios</label>
<input type="button" onClick="calcular()" class="formulario__button" name="Calcular" value="Calcular
resistencia">
</form>
<script type="text/javascript" src="calculoresistencias.js"></script>
</BODY>
</html>
- JavaScript:
function calcular(){
// variables
var x = document.getElementById('banda1').value;
var y = document.getElementById('banda2').value;
z = x.concat(y);
var mult = document.getElementById('banda3').value;
var resultado = z * parseInt(mult);
document.getElementById('resultado').value = parseInt(resultado);
}
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 guardar 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 actualizar producto.
3. Que permita al usuario eliminar un producto con las siguientes
especificaciones: código de producto y un botón que se llame
eliminar 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.
R: Para la resolución de este requerimiento, se ha querido resumir estos
menús en tan solo dos, los cuales son:
En “Ingreso de producto”, como su nombre lo indica, se podrá ingresar

los productos al inventario de la ferretería a través de la siguiente
página:
Su codificación es la siguiente:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
<title>IngresoInventario</title>
</head>
<body>
<header style="height: 70px">
</header>
<div style="height: 30px;"></div>
<div class="row">
<div class="col-lg-12">
<div class="card shadow-lg p-3 mb-5 bg-white ">
<div class="card-header">Ingreso de Inventario</div>
<div class="card-body">
<form id="form1" action="procesar.html" method="post" class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="nombre">Código del producto</label>
<input name="nombre" type="text" class="form-control" id="nombre" placeholder="" value="" required>
<div class="valid-feedback">¡Ok válido!</div>
<div class="invalid-feedback">Complete el campo.</div>
</div>
<label for="apellido">Nombre del producto</label>
<input name="apellido" type="text" class="form-control" id="apellido" placeholder="" value="" required>
</div>
</div>
<label for="direccion">Marca del producto</label>
<input name="direccion" type="text" class="form-control" id="direccion" placeholder="" required>
</div>
<label for="usuario">Precio de compra</label>
<div class="input-group">
<input name="usuario" type="text" class="form-control" id="usuario" placeholder="" aria-
describedby="inputGroupPrepend" required>
</div>
</div>
</div>
<label for="direccion">Cantidad Comprada</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">Acepto términos y condiciones</label>
<div class="valid-feedback">¡Aceptado!</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Guardar Producto</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="bootstrap4/js/bootstrap.min.js"></script>
<script src="codigo.js"></script>
</body>
</html>
En “Actualización, búsqueda y eliminación de producto”, como su

nombre lo indica, se podrá actualizar el inventario de la ferretería en
cuanto a estos aspectos:
<!doctype html>
<html lang="en">
<head>
<title>ActualizarInventario</title>
</head>
<body>
</header>
<div class="row">
<div class="card-header">Actualización de Inventario</div>
<label for="nombre">Código del producto a actualizar</label>
</div>
<button class="btn btn-primary" type="submit">Buscar Producto</button>
</div>
</form>
<div class="card-header">Resultado de la busqueda</div>
<label for="direccion">Nombre del producto</label>
</div>
<label for="usuario">Marca de producto</label>
</div>
</div>
</div>
<label for="direccion">Precio de Compra</label>
</div>
<label for="direccion">Cantidad de Compra</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">Acepto términos y condiciones</label>
<div class="valid-feedback">¡Aceptado!</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Actualizar Producto</button>
<button class="btn btn-primary" type="submit">Eliminar Producto</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Dentro del menú de ventas debe diseñar un formulario en HTML
apoyado en Bootstrap, que tenga las siguientes especificaciones: código
de producto, valor de la venta, cantidad vendida.
R: A continuación, se evidencia la construcción del menú solicitado y su

respectivo formulario:
<!doctype html>
<html lang="en">
<head>
<title>ResumenVentas</title>
</head>
<body>
</header>
<div class="row">
<div class="card-header">Resumen de Ventas por producto</div>
<label for="nombre">Código del producto a consultar</label>
</div>
<button class="btn btn-primary" type="submit">Buscar Producto</button>
</div>
</form>
<div class="card-header">Resultado de la busqueda</div>
<label for="direccion">Valor de la venta</label>
</div>
<label for="usuario">Cantidad Vendida</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
REFERENTES BIBLIOGRÁFICOS
Mohedano, Jorge, et al. Iniciación a javascript, Ministerio de

Educación de España, 2012. (Páginas. 25 - 61) ProQuest Ebook
Central. Recuperado
de: https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/reade
r.action?ppg=26&docID=3214795&tm=1544023398179
Shenoy, A., & Sossou, U. (2014). Learning Bootstrap.
Birmingham [England]: Packt Publishing. Recuperado
de: http://bibliotecavirtual.unad.edu.co/login?
url=http://search.ebscohost.com/login.aspx?
direct=true&db=nlebk&AN=933023&lang=es&site=eds-live
Cardador, C. A. L. (2014). Implantación de aplicaciones web en
entornos internet, intranet y extranet (mf0493_3). (Páginas.
184 - 199). Recuperado de https://ebookcentral-proquest-
com.bibliotecavirtual.unad.edu.co/lib/unadsp/reader.action?
docID=4184063&ppg=190

Raul - Jimenez - Fase 3

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Raul - Jimenez - Fase 3

Caricato da

Copyright:

Formati disponibili

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

Universidad Nacional Abierta y a Distancia UNAD

Diseño de la interfaz del usuario:

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

R: A continuación, se muestra el diseño realizado para este menú

Dentro del menú de Utilidades la Tienda Texas Electronics necesita lo

R: El menú de utilidades se han colocado las siguientes herramientas:

Un aplicativo en JavaScript que permita ingresar un valor de compra de

R: A continuación, se muestra la evidencia de la aplicación conectada a

<input type="number" class="formulario__input" id="ValorCompra" value="0" name= "ValorCompra">

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

Dentro del menú de Inventario y apoyado en el framework Bootstrap,

En “Ingreso de producto”, como su nombre lo indica, se podrá ingresar

En “Actualización, búsqueda y eliminación de producto”, como su

R: A continuación, se evidencia la construcción del menú solicitado y su

Mohedano, Jorge, et al. Iniciación a javascript, Ministerio de

Potrebbero piacerti anche