PROYECTO FRONTEND

ENTREGA FINAL

PRESENTADO POR:

JEISON ANDRES VISBAL GOMEZ COD: 2011020062

DOCENTE
ALEXANDRA MARIA SILVA MONSALVE

MÓDULO PERSISTENCIA Y DATOS TRANSACCIONALES

BOGOTA

2020
Introducción
Se realizó la selección de un proyecto hecho anteriormente con miras a mejorar su
apariencia. La reforma se desarrolló tanto en su estructura como a su diseño, tomando así los
requerimientos que este tiene para mejorar y brindar una mejor experiencia al usuario, visual y
funcionalmente.
Objetivo General
Mejorar el aspecto y funcionalidad de una aplicación web, a través del uso de
herramientas de desarrollo FrontEnd.
Objetivos específicos
Analizar los errores de funcionalidad o aspecto que influyen negativamente en la
experiencia de usuario.
Realizar un bosquejo del resultado final de la aplicación web.
Implementar las correcciones en la aplicación web.
Justificación
La realización de este proyecto es de gran importancia, ya que permite mejorar
habilidades de análisis de errores, del funcionamiento de una aplicación web, y lo más
importante, como desarrollar o mejorar el FrontEnd de esta. El uso de las herramientas de
desarrollo web, tales como HTML, CSS, Javascript, entre otras, mejoran sus habilidades como
desarrollador. El programador se entrena al usar distintas tecnologías para la elaboración de un
mismo proyecto. Además, sigue actualizado con las nuevas tecnologías y facilita sus opciones
laborales al seguir la tendencia del mundo tecnológico hacia el desarrollo web.

Actividades por desarrollar

Se realizará el análisis de toda la estructura y diseño de la aplicación web elegida para el
proyecto. De esta manera se identificarán los errores de diseño que esta posee. Además, se
deberá anotar las funcionalidades de esta y los elementos que intervienen en cada función. Todos
los errores y componentes deberán ser identificados usando los conocimientos de desarrollo
FrontEnd, en los lenguajes HTML, CSS y Javascript.
A continuación, se realizarán los mockups, utilizando la herramienta “wirify.com” para
poder representar los componentes de la pagina web. Así pues, se mostrarán las correcciones
utilizando cotas, representaciones graficas e imágenes. Estás serán creadas con el uso de
programas como Photoshop, o las herramientas de Word.
Se implementarán las correcciones propuestas anteriormente, a través del uso del lenguaje
de marcado HTML, en donde se dará la estructura FrontEnd de la aplicación web. Seguido a esto
se aplicarán los cambios de aspecto mediante el uso de CSS, con definición de parámetros como
colores, tamaños, tipos de letra, etc. Por último, se realizarán las respectivas funciones para
cambios de aspecto de tipo responsive mediante el uso de Javascript. Por último, se comprobarán
las funciones que posee el sitio web. De esta manera se identifica si funcionan correctamente, y
corregir los errores que se puedan generar por la corrección del FrontEnd de esta.
Desarrollo
La pagina web consta de tres paginas internas. La primera está pensada para tener la
información general del contenido. En esta se aprecia la falta del contenido planeado. Además,
no presenta un diseño llamativo para el usuario y el espacio de la pagina está desaprovechado
para presentar mejor información de la página.
Figura 1

Página principal

La segunda pagina del sitio web posee el mismo diseño de menú de la pagina principal,
con los links de acceso a las demás paginas del sitio web. Se aprecia un diseño poco llamativo
para el usuario. Asimismo, el grafico de torta no permite ingresar nuevos datos para ser
graficados. Por último, la visualización del contenido del grafico es incomoda, ya que este es
muy grande y no se aprecia por completo en la pantalla.
Figura 2

Pagina de dibujo en grafico de torta

 La tercera y última página, presenta el mismo diseño del resto del sitio web. Por ende,
posee los mismos errores, de diseño poco llamativo y desaprovechamiento de espacio. Por otro
lado, el canvas que se encuentra en esta sobrepasa el espacio de visualización del usuario,
volviendo incomodo el uso de este graficador. Por último, se ve una falta de información, en
donde se explique que hace y como funciona el graficador.
Figura 3

Página 3 dibujo en grafico

Figura 4

Página 3 dibujo en grafico

 La representación del sitio web al reducir su tamaño de 768 pixeles de ancho, tiene un
error de visualización de contenido, ya que la mayor cantidad del espacio la ocupan el menú y el
pie de página. Por otra parte, se aprecia que el despliegue del menú no es fluido o no tiene
transición.
Figura 5

Visualización responsive

Boceto en el cual se corrigen los errores de aspecto de la página principal del sitio web,
mejorando la utilización del espacio. Asimismo, se agrega el espacio de una tabla de contenido de
la página web, junto con un logo en la barra de menú. También se incluye un fondo en el body de
la página web.
Figura 6
Se presenta el bosquejo de la primera corrección.
 Boceto de las correcciones para la segunda página, en la cual se mantiene el aspecto de la
pagina para tener uniformidad. Además, se disminuye el tamaño del diagrama de torta, para que
se pueda visualizar de manera correcta el contenido de esta. También se agrega los espacios de
inserción de datos a graficar y se incluye un espacio de texto con instrucciones del
funcionamiento de esta grafica.
Figura 7
Se ven las correcciones mencionadas.

- Bosquejo de la tercera y ultima pagina web. Se mantiene la estética general del sitio web.
Así pues, se corrige la ubicación y el tamaño del canvas para una mejor visualización del
contenido. También se reubican los espacios de inserción de datos, y se agrega un espacio de
texto en el cual se presenta la información e instrucciones de uso del graficador.
Figura 8
Bosquejo pagina tres de la página web.

Documentación
Página principal
En esta pagina se encuentra información general sobre el sitio web, en un espacio de texto, en la
cual también se presenta una tabla, con accesos directos a las demás páginas, al ser clicado en cada uno de
ellos, y que, al reducir su ancho de página, esta tabla desaparece.
Figura 1
Pagina principal, con contenido general.
Figura 2
Código HTML con el cual se implementa el contenido de la imagen anterior.

Figura 3
Hoja de estilos CSS, en la cual se le dan las relaciones de aspecto a cada componente, además de definir
el estilo al reducir el tamaño de pantalla.

Nota. Esta hoja de estilos es utilizada para todos los componentes del sitio web.
Figura 4
Función que esconde o muestra el menú al tener un ancho menor o igual a 767px

Nota. esta función es utilizada por todas las páginas del sitio web.

Pagina diagrama de torta

En esta pagina se encuentra un canvas que contiene un diagrama de torta, en el cual el
usuario podrá ingresar hasta un máximo de 10 datos, cuyo nombre podrá ser ingresado por el
usuario, y agregarlo mediante el botón + y podrá eliminar el ultimo dato ingresado mediante el
botón -. Además, en esta se encentra una tabla de accesos directos, los cuales dejan de mostrarse
en pantalla al reducir el ancho de esta, junto con un ordenamiento distinto de los componentes
que interfieren en la graficación del diagrama.
Figura 5
Captura de pantalla de la pagina de Diagrama de torta.

Nota, el ingreso de datos se presenta de forma vertical

Figura 6
Vista en un ancho inferior a 767 px.

Nota, el ingreso de datos se muestra de forma horizontal.

Figura 7
Código HTML en el cual se definen los componentes de la pagina.

Estilo CSS
El estilo de la pagina es dado por la misma hoja de estilos representadas en la Figura 3, en
donde se definen tamaños, colores, posiciones, la representación responsive, etc.
Figura 8
Código Javascript, en el cual se realizan las funciones de graficación, y actualización de datos
ingresados por el usuario.

Pagina diagrama triangulo

En esta pagina se puede realizar la graficación de un triángulo, al dar las 3 coordenadas
de puntos del triángulo entre 0 y 35, y si el usuario lo desea puede variar el color del contorno, el
relleno o los puntos del triángulo, el programa se encargará de graficar el triángulo, y de calcular
la altura, el área y el perímetro del triángulo dado. Además, encontrará una tabla de accesos
directos a las funciones de la página web.
Figura 9
Captura de pantalla de pagina de diagrama de triangulo
Figura 10
Código HTML de la implementación de la pagina web de diagrama de triangulo

Estilo CSS
El estilo de la página es dado por la misma hoja de estilos representadas en la Figura 3, en
donde se definen tamaños, colores, posiciones, la representación responsive, etc.
Figura 11
Código JavaScript con las funciones para poder graficar el triángulo, calcular los resultados, y
validar los datos ingresados.
Figura 12
Código JavaScript con las funciones para poder graficar el triángulo, calcular los resultados, y
validar los datos ingresados.

Conclusiones
Se encontraron varios errores de optimización de espacio del sitio web, junto con errores
de diseño que no permiten la visualización correcta de la página.
Es importante la implementación correcta de la interfaz de usuario, ya que de esta
depende que el usuario utilice la pagina y vuelva a utilizarla en otras ocasiones.
El conocimiento del uso de tecnologías de desarrollo web es esencial para una correcta
implementación de FrontEnd de una aplicación web
Referencias
Volkside. (2010). Wirify (v.1.5) [Aplicación Web]. https://www.wirify.com/