Entregable Escenario 3 propuesta grafica PDF

Preview

Summary

Entregable Trabajo Colaborativo Propuesta del sitio Mutillidae############Andrés Felipe Diaz Zapata Septiembre 2021 Institución Universitaria Politécnico Grancolombiano Ingeniería de Softwareii Tabla de ContenidosIntroducción .............................................................................

Description

Entregable Trabajo Colaborativo Propuesta del sitio Mutillidae

Andrés Felipe Diaz Zapata Septiembre 2021 Institución Universitaria Politécnico Grancolombiano Ingeniería de Software

ii Tabla de Contenidos

Introducción ..................................................................................................................................1 Objetivos ........................................................................................................................................2 Análisis ...........................................................................................................................................3 Propuestas .......................................................................................................................................4

1 1. Introducción El propósito de este documento es plasmar nuestra propuesta de mejora del sitio mutillidae para una mejor interacción del usuario con el aplicativo. En este documento se ha decidido utilizar múltiples tecnologías como HTML, CSS y Javascript, también se implementará un framework o librería para el desarrollo web (React o Angular) para una mejor interacción y mas opciones de realizar un mejor trabajo con estas tecnologías.

Adicional se expondrán mockups para nuestro proyecto para generar una mejor experiencia y que el usuario final pueda ver como quedara su diseño, para esto utilizaremos la herramienta marvel (https://marvelapp.com/)

Se planteará un mejor diseño para la página principal ya que lo que se tiene es muy básico, un cambio en las listas y se validaran los formularios para proponer una mejor interacción, se propondrá el uso de bootstrap como framework de diseño y también se utilizarán los iconos que este proporciona.

Utilizaremos Javasript como lenguaje de programación para la interacción, temas de petición al servidor, manipulación de eventos del DOM, y utilizaremos todas las ventajas que nos ofrece javascript del lado del frontend para lograr una mejor interacción entre usuario y aplicación

2 2. Objetivos -

.

Realizar una propuesta para orientar al usuario y poder lograr una mejor interacción con el sistema Utilizar diseños simples pero intuitivos para presentarle al usuario la página web Utilizar tecnologías como HTML, CSS y Javascript Utilizar un framework de desarrollo como Angular o una librería como React Optimizar y dar una mejor presentación de Banners, formularios, listas y Paginas

3 3. Análisis Se evidencio que el estilo del sitio es muy básico, se plantea el uso de framework como bootstrap para una mejor y rápida entrega del proyecto, el proyecto no utiliza iconos si no imágenes por lo que puede hacer más pesado la carga del sitio, se planeta utilizar los iconos de bootstrap y apoyarnos sobre fontawesome ya que estos al ser clases de css no son tan pesados y la carga del sitio sería mucho más rápida y eficiente, se planteará un nuevo home ya que el principal es muy básico y esto da mala impresión, se cambiará el header, la barra de navegación que esta a la derecha Se cambiará el estilo de los formularios por formularios de bootstrap que se vean mejor, que sean mas interactivas que generen una mejor alerta ante errores, lo mismo con las tablas ya que se evidencia el poco css que tiene todo el sitio, se tendrá asesoría de un experto en experiencia de usuario para que nos de mejores opciones de interacción Se utilizarán mejores fuentes de letra ya que la que tiene actualmente es muy básica, se pondrán ver muchas opciones desde la pagina de fuentes de Google (https://fonts.google.com/) y así se podrá entender mejor la letra. Se evidencia que el sitio tiene mucha diversidad de formularios, tablas, variedad de botones, listas por esto se debe tener una fuerte base en HTML, css y JavaScript, se validará con JavaScript todo tipo de eventos, tanto como clicks movimiento de mouse, eventos de carga de página y esto será muy útil a la hora de la experiencia de usuario y de la visualización del Sitio

4 4. Propuestas

Home Actual

Home Nuevo: Prototipo Interactivo

5 Listas actuales

Listas Nuevas Lista del menú

Tablas y formulario Actuales

Tablas y formularios Tablas y formularios

6 Referencias Otto, M. J. T. (2021, September 17). Bootstrap. Bootstrap. https://getbootstrap.com/ W, W. (2021, September 17). GitHub - webpwnized/mutillidae: OWASP Mutillidae II is a free, open-source, deliberately vulnerable web application providing a target for web-security enthusiasts. Mutillidae can be installed on Linux and Windows using LAMP, WAMP, and XAMMP. It is pre-installed on SamuraiWTF and OWASP BWA. The existing version can be updated on these platforms. With dozens of vulnerabilities and hints to help the user; this is an easy-to-use web hacking environment designed for labs, security enthusiast, classrooms, CTF, and vulnerability assessment tool targets. Mutillidae has been used in graduate security courses, corporate web sec training courses, and as an “assess the assessor” target for vulnerability assessment software. GitHub - Mutillidae. https://github.com/webpwnized/mutillidae...