• Author / Uploaded
• Felipe Lozano Rodríguez

• Categories
• Bootstrap (marco frontal)
• Seguridad y privacidad en línea
• La seguridad informática
• Contraseña
• Script Java

Citation preview

PROGRAMACIÓN DE SITIOS WEB FASE 3: DISEÑO E IMPLEMENTACIÓN DEL LADO DEL CLIENTE

ESTUDIANTES: BILMER ANTONIO PEREZ HERNAN FELIPE LOZANO ANDRES JULIAN MONTENEGRO CRISTIAN MIGUEL URREGO JORGE LUIS OCHOA URREGO

TUTOR: FRANCISCO JAVIER HILARIÓN NOVOA

GRUPO: 301127_22

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA – ECBTI ABRIL DE 2019

1

INTRODUCCIÓN

Basados en los requerimientos de la empresa “Fox Electronics”, frente a una necesidad de un sistema de información de control de inventarios y administración de sus productos, este documento tratara sobre el despliegue de una solución informática ajustada a las nuevas tecnologías de entornos o plataformas virtuales, basándose en metodologías estructuradas en la programación de sitios WEB, brindando no solo una respuesta a su solicitud, sino un producto de calidad a su total satisfacción.

2

FORMULACION DEL PROBLEMA Actualmente la tienda “Fox Electronics” comercializa componentes electrónicos, entre los cuales están: resistencias, transistores, circuitos integrados, sistemas embebidos, condensadores, bobinas y demás elementos de uso común en la industria, control y automatización electrónica de procesos. Sin embargo, ha tenido inconvenientes referentes a la cantidad de productos que ofrece a sus clientes, ya que en existencia (inventario) aparece una cantidad y cuando se verifica en bodega (físico) no coincide, este descontrol ha generado problemas con los clientes y con los proveedores. Por lo anterior requiere un aplicativo web que le permita: 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). Dentro del menú de Utilidades la Tienda Fox electronics necesita lo siguiente: Una calculadora 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. Debe diseñar un programa en JavaScript que permita calcular y mostrar al usuario el valor de venta del producto en cuestión e indicar cuál es el valor de la utilidad o ganancia para el administrador de la tienda. Los empleados de la tienda requieren una calculadora del 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. 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.

3

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. 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. El menú de administrador debe dejarlo en blanco.

4

OBJETIVOS Objetivo General Crear un sistema de información (del Lado del Cliente) que permita a la entidad suplir sus necesidades a total satisfacción, mediante la utilización de las metodologías estructuradas para la elaboración de sitios WEB, durante el tiempo solicitado.

Objetivos Específicos 

Crear un aplicativo web que le permita controlar las compras a proveedores.



Controlar las ventas al público.



Mantener actualizados los inventarios.



Realizar los cálculos de precio de venta al público incluyendo impuestos (%) y utilidad para la tienda (%). Al igual que la calculadora para las resistencias.



Diseñar el sistema de información bajo la utilización de las metodologías estructuradas del diseño de software.

5

DESARROLLO DE LA ACTIVIDAD.

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 con ejemplos de aplicación. Seguridad de aplicativos del lado del cliente en JavaScript y HTML. Un sitio web al estar expuesto al internet puede ser blanco de cualquier ataque por personas mal intencionadas, es verdad que no podemos controlar esto del todo y asegurar al 100% la seguridad de una aplicación, puesto que hay miles de formas, técnicas, muchas herramientas disponibles con las cuales un hacker malintencionado puede romper las seguridades de un sitio web. Por consiguiente, de la misma manera que existen formas y herramientas con las cuales nos pueden atacar también existen acciones que podemos implementar de manera que se pueda mitigar y de alguna manera bajar el porcentaje de riesgo que un sitio sea atacado y desde mi punto de vista creo que lo más importante es tener un plan B, un plan de contingencia, Backus, etc., puesto que como mencioné, el riesgo siempre existe. Pero en fin, esto de la seguridad informática es un tema extenso, y lo que quiero enseñarte en este artículo, son algunos tipos de cómo proteger o aumentar la seguridad en aplicaciones Web en PHP, que en conjunto con algunas otras buenas prácticas, ayudarán a blindar casi al 100% una aplicación o sitio web. Dicho esto, vamos a ver cuáles son estos consejos. 1. ENCRIPTAR LAS CONTRASEÑAS La parte de encriptar las contraseñas es lo más básico y elemental con lo que debes empezar para tener una buena seguridad en tu aplicación. Para esto se debe utilizar las funciones hash, de manera que no se guarde la contraseña tal cual la escribiste si no, su equivalente de acuerdo a la función hash utilizada. 2. FILTRADO DE DATOS La inserción de datos extraños es otro método que un atacante puede dañar nuestra aplicación, por esto es recomendable sanitar y validar todas las entradas de datos que podemos recibir. La validación se refiere a la comprobación y control, es decir que los datos estén de forma correcta, por ejemplo validar que el campo email sea un correo electrónico válido, validar que se recibe números donde se esperaba números, letras, valores booleanos etc. 3. CONFIGURACIÓN DE ARCHIVOS 6

Por general se recomienda no tener archivos de configuración sueltos dentro de una aplicación, sino más bien cargarlos dentro de la base de datos, pero bueno, en muchas de las veces es justo y necesario usar algún archivo que ayuda a la configuración de la aplicación, en estos casos se puede hacer lo siguiente: 1. Asignar a esos archivos un usuario con permisos especiales. 2. Que la extensión con la que se guardan estos archivos sea .php, esto asegura que así sea leído desde el navegador, no se podrá visualizar, cosa que usando la extensión .txt si se podría. 3. CONFIGURACIÓN DE ENTORNOS DE DESARROLLO Y PRODUCCIÓN En lo personal creo que esta parte es importantísimo, puesto que cuando una aplicación lanza errores por lo general te muestra toda la ruta donde se cayó la aplicación, por esto es importante que al desarrollar aplicaciones tengas en cuenta cambiar la configuración de archivos en el servidor, cuando ésta ya se encuentra en producción, por lo general para el caso de ambientes de desarrollo se mantiene la siguiente configuración con la finalidad de que te permita depurar errores y saber dónde se cayó la aplicación.

Deben discutir acerca de la mejor propuesta (Diseño de la interfaz, diseño de formularios, programas en JavaScript), realimentarla y proponerle mejoras.

7

Se debe realizar un informe en Word, donde evidencie la creación de la interfaz del usuario, los formularios solicitados en cada uno de los menús del aplicativo, resumen de aspectos de seguridad, los programas (calculadora de valor de venta y calculadora de resistencias). Debe agregar capturas de pantalla y descripción de las actividades realizadas. 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).

8

Dentro del menú de Utilidades la Tienda Fox electronics necesita lo siguiente: Una calculadora 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.

9

Debe diseñar un programa en JavaScript que permita calcular y mostrar al usuario el valor de venta del producto en cuestión e indicar cuál es el valor de la utilidad o ganancia para el administrador de la tienda.

Los empleados de la tienda requieren una calculadora del 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.

10

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.

11

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.

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. El menú de administrador debe dejarlo en blanco.

12

13

CONCLUSIONES

Se fortalecieron los conocimientos para desarrollar una propuesta de sitios web interactivos haciendo uso de los fundamentos teóricos y prácticos para la creación de sitios web. Se logro adquirir conocimiento de los diferentes lenguajes de programación (HTML, Java Script y Bootstrap) y su sintaxis, formando paginas web completamente funcionales y accesibles. Se logro ofrecer una solución tecnológica ante un requerimiento cotidiano, que puede suceder en cualquier momento de nuestra vida profesional. Fue de gran aporte al conocimiento, el manejo de la información en el entorno de conocimiento para el desarrollo de esta fase del curso, ya que fue acertado cada uno de los temas dispuestos en este entorno.

14

REFERENCIAS BIBLIOGRÁFICAS

Cobo, Ángel, et al. PHP y MySQL: tecnologías para el desarrollo de aplicaciones web. (Páginas. 1 - 20). Ediciones Díaz de Santos, 2005. ProQuest Ebook Central. Recuperado de: https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/reader.action?ppg=19&docID=3173408 &tm=1544022923309 Vara, Mesa, Juan Manuel, et al. Desarrollo web en entorno cliente. (Páginas. 29 - 49). RA-MA Editorial, 2014. ProQuest Ebook Central. Recuperado de: https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/reader.action?ppg=30&docID=3229683 &tm=1544023315772 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/reader.action?ppg=26&docID=3214795 &tm=1544023398179 Vara, Mesa, Juan Manuel, et al. Desarrollo web en entorno cliente. (Páginas. 145 - 150). RA-MA Editorial, 2014. ProQuest Ebook Central. Recuperado de: https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/reader.action?ppg=146&docID=3229683 &tm=1544023500134 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=tr ue&db=nlebk&AN=933023&lang=es&site=eds-live

15