SERVICIO NACIONAL DE APRENDIZAJE

Centro de Materiales y Ensayos

Análisis y Desarrollo de Sistemas de Información
Ficha: 2175955

DISEÑO Y DESARROLLO DE LA INTERFAZ WEB DEL PROYECTO EN CURSO

Presentado a:
Julieth Alejandra Calderón Barragán.
Instructor, área Técnica

Presentado por:
Diana Milena Alarcón Moyano
Nicolás David Ortiz Rodríguez
Andrey David Solano Acevedo

Bogotá, Colombia
2021
 SERVICIO NACIONAL DE APRENDIZAJE

Centro de Materiales y Ensayos

Análisis y Desarrollo de Sistemas de Información
Ficha: 2175955

DISEÑO Y DESARROLLO DE LA INTERFAZ WEB DEL PROYECTO EN CURSO

Presentado por:
Diana Milena Alarcón Moyano
Nicolás David Ortiz Rodríguez
Andrey David Solano Acevedo

Bogotá, Colombia

2021
 Introducción
El presente trabajo describe la realización de la interfaz grafica del proyecto guadua factoría,
demostrando las pantallas creadas para la interacción del usuario, los lenguajes utilizados
para su elaboración (html5, css JavaScript) generando un sistema responsive acorde a los
requerimientos exigidos por el usuario final.
 INTERFAZ GRAFICA

Para el desarrollo de la interfaz gráfica se utilizó el editor de código visual studio code el cual nos
permite usar los diferentes lenguajes de desarrollo existentes, para la creación de formularios, tablas y
listas en su estructura principal fue utilizado el lenguaje de estructura html5 brindándole aspecto visual
con css y JavaScript en la interacción de algunas animaciones que se requieren para la interacción del
sistema

FORMULARIO LOGIN

al complementar el uso de css en nuestro proyecto en desarrollo se pude brindar características y

estilos que ayuden al uso y entendimiento del usuario final , entregando un sistema el cual se pueda
ejecutar en cualquier dispositivo ( responsive desing) .
FORMULARIO REGISTRO

MENU

Se genera el menú de guadua factoría usando la

siguiente estructura HTML

<a href="index.html" class="selected">

<div class="option">
<i class="fas fa-home"title="Inicio"></i>
<h4>Inicio</h4>
</div>

El uso de iconos fue tomado de un repositorio que

complementa los estilos de css citado a continuación

<script
src="https://kit.fontawesome.com/41bcea2ae3.js"
crossorigin="anonymous"></script>
Al ser un menú desplegable se vio la necesidad de generar la animación usando el lenguaje de
programación JavaScript contactándolo a los archivos HTML y css generados.

Conexión con documentos HTML y css

Línea de código usada

<script src="./js/script.js"></script>

Script creada para generar animación del menú guadua factoría

//Ejecutar función en el evento click

document.getElementById("btn_open").addEventListener("click", open_close_menu);

//Declaramos variables
var side_menu = document.getElementById("menu_side");
var btn_open = document.getElementById("btn_open");
var body = document.getElementById("body");

//Evento para mostrar y ocultar menú

function open_close_menu(){
body.classList.toggle("body_move");
side_menu.classList.toggle("menu__side_move");
}

//Si el ancho de la página es menor a 760px, ocultará el menú al recargar la página

if (window.innerWidth < 760){

body.classList.add("body_move");
side_menu.classList.add("menu__side_move");
}

Usamos la función resize la cual al conectar con los modelos css podemos adaptar el menú a las
diferentes pantallas de los dispositivos creando así un menú responsive

//Haciendo el menú responsive(adaptable)

window.addEventListener("resize", function(){

if (window.innerWidth > 760){

body.classList.remove("body_move");
side_menu.classList.remove("menu__side_move");
}

if (window.innerWidth < 760){

body.classList.add("body_move");
side_menu.classList.add("menu__side_move");
}

});
FORMULARIO INVENTARIO

FORMULARIO FSCTURACION

Al crear los formularios de inventario y facturación se crea una ventana modal la cual guie los pasos
de llenado de las tablas, se integra la funcionalidad con la siguiente estructura y scripts

Estructura

<h2 class="factura">Factura</h2>
<br>
Numero Id <br><input type="text" name="idCliente" id="idCliente"
placeholder="idCliente"/><br><br>
Nombre Cliente <br><input type="text" name="nombreCliente" id="nombreCliente"
placeholder="Nombre"/><br><br>
Direccion <br><input type="text" name="direccionCliente" id="direccionCliente"
placeholder="Direccion"/><br><br>
 Telefono <br><input type="text" name="telefonoCliente" id="telefonoCliente"
placeholder="Telefono"/><br><br>
<input type="button" class="gohan" name="Continuar"
onclick="generarFactura()"value="Continuar"/>

Script

<script>
var idCliente;
var nombreCliente ;
var direccionCliente;
var telefonoCliente;
var nombreProducto;
var precio;
var cantidad;
var total;
var subtotal;
var p=0;
var iva;
var subtotalP=0;
var fecha= new Date();
var imprimir;
var numero_Factura=0;

function generarFactura(){

idCliente=document.getElementById("idCliente").value;
nombreCliente=document.getElementById("nombreCliente").value;
direccionCliente=document.getElementById("direccionCliente").value;
telefonoCliente=document.getElementById("telefonoCliente").value;

document.write(fecha.getDate() + "/" + (fecha.getMonth()+1) + "/" +

fecha.getFullYear()+"</br>"+"</br>"+"</br>");
document.write("Identificacion del Cliente:"+'&nbsp;'+idCliente+"<br>"+"<br>");
document.write("Nombre del Cliente:"+'&nbsp;'+nombreCliente+"<br>"+"<br>");
document.write("Direccion:"+'&nbsp;'+direccionCliente+"<br>"+"<br>");
document.write("Telefono:"+'&nbsp;'+telefonoCliente+"<br>"+"<br>"+"<br>");

for (subtotal=0; nombreProducto != "*"; subtotal++) {

nombreProducto=prompt('Ingrese Nombre del Producto');

document.write("Nombre Producto: "+'&nbsp;'+nombreProducto+'&nbsp;'+'&nbsp;');
 precio=parseFloat(prompt('Ingrese Precio'));
document.write("Precio: "+'&nbsp;'+precio+'&nbsp;'+'&nbsp;');

cantidad=parseInt(prompt('Ingrese Cantidad'));
document.write("Cantidad: "+'&nbsp;'+cantidad+'&nbsp;'+'&nbsp;');

nombreProducto=prompt('Ingrese "*" Para terminar o cualquier tecla para continuar');

subtotal=precio*cantidad;
subtotalP=subtotalP+parseInt(subtotal);
iva=subtotalP*0.19;
total=subtotalP+iva;

document.write("SubTotal :"+'&nbsp;'+subtotal+"<br>"+"<br>"+"<br>");

}
document.write("Subtotal : "+'&nbsp;'+subtotalP+"<br>"+"<br>");
document.write("Iva 19% :"+'&nbsp;'+iva+"<br>"+"<br>");
document.write("Total :"+'&nbsp;'+total+"<br>"+"<br>");
document.write('<button onclick="window.print()">Imprimir Factura</button>');

generarFactura()

</script>

PAGINA DE INICIO Y SOPORTE

• Se crea pagina de inicio con el fin de que se pueda montar y observar información en tiempo
real
• Se crea página de soporte en la cual podrán solucionar inconvenientes que se lleguen a
presentar con el sistema o solicitar actualización por parte del administrador.
ANEXOS

• Guadua factoria.zip (código y material usado en la creación de interfaz gráfica)