Vous êtes sur la page 1sur 15

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

Vous aimerez peut-être aussi