Trabajo Colaborativo Front End 1

Aplicación Front End – Software BOCA

1Entrega 1 Semana 3

Edilson de Jesús Gañan Arenas

Manuel Hernán Peña González

Institución Universitaria Politécnico Grancolombiano

Front End Grupo 23

2021
Trabajo Colaborativo Front End 2

1. Tabla de contenido

Introducción...............................................................................................................3

Objetivos....................................................................................................................4

1.1. Objetivo general:...........................................................................................4

1.2. Objetivos específicos:...................................................................................4

2. Exploración del Software BOCA........................................................................5

2.1. Pagina de ingreso al (Login):........................................................................5

2.2. Página de administrador (Admin page):.......................................................5

2.3. Pagina de contenido (Contest page):.............................................................6

2.4. Pagina de usuario (User page):.....................................................................7

3. Propuesta de solución software BOCA:..............................................................7

3.1. Propuesta de solución de la página de registro:............................................7

3.2. Propuesta de solución de la página de administrador:..................................8

3.3. Propuesta de solución de la página de contenido:........................................8

3.4. Propuesta de solución de la página de usuario:............................................9

1. Elección de la solución que se presentará para el proyecto …………………...10

Trabajo Colaborativo Front End 3

2. Introducción

El diseño de páginas web como complemento para la presentación de herramientas de

tecnología se ha ido incrementando a medida que crece la competitividad en el mercado global

de las diferentes empresas dedicadas al desarrollo de software.

La oferta y demanda de este tipo de productos, debido a la necesidad de ir abriéndose paso en el

mercado mundial por parte de diferentes compañías que ofrecen productos y servicios, hace cada

día más exigente el reto de agradar al usuario final quien es en últimas quien da el visto bueno y

respalda el sello de calidad de los productos ofrecidos, siendo esto un determinante del éxito o

del fracaso del producto final.

El tamaño de fuente, los colores, enlaces, mensajes de confirmación, orientación o

advertencias, y en sí, todo aquello que involucra el aspecto o la cara amable del servicio, debe ser

escogido e implementado de forma que sea lo más llamativo posible ante el usuario ya que

aunque algunos no lo consideran así, el gusto entra en una gran mayoría por la vista y ese es un

punto clave para que quienes hagan uso del producto decidan quedarse o abandonar de manera

temprana un sitio Web llevándolo al éxito o al fracaso.

Para el trabajo colaborativo correspondiente al módulo de FRONT END, se ha propuesto

la mejora en el diseño estético de un software “BOCA” que, si bien en su estructura funcional

“Back End” cumple con cada uno de los requerimientos de invocación y respuesta de servicios,

no lo hace en la parte de diseño específicamente en la parte de la presentación de los diferentes

módulos, lo que desdibuja el trabajo realizado a lo largo del proyecto. Por tal motivo, se plantea

la realización de una mejora estructural hacia la parte del diseño de algunos de los módulos que

hacen parte del software en cuestión y de esta manera, darle un ambiente fresco y dinámico a su

presentación para que sea llamativo a la vista del usuario.

Trabajo Colaborativo Front End 4

3. Objetivos

3.1. Objetivo general:

 Realizar mejoras a la interfaz gráfica de usuario y de presentación de la página del

Sistema de Información “BOCA”, haciendo uso de los diferentes recursos y tecnologías,

especialmente de lo aprendido durante el desarrollo del módulo de Front End, para que

haya una mejor interacción con el usuario final y así lograr despertar el interés general

para hacer uso del software puesto a disposición.

3.2. Objetivos específicos:

 Realizar la descarga y exploración de la aplicación Web Boca, identificando aquellos

aspectos estéticos que den lugar mejorar la interacción del usuario con este software.

 Elaborar un informe detallado de aquellos aspectos que ofrecen la oportunidad de mejora,

y especificar cuales de ellos será intervenido por los miembros del equipo.

 Hacer uso de herramientas de diseño para la elaboración de los prototipos que serán

presentados durante el proceso de desarrollo de la actividad.

 Empoderarse de los conocimientos adquiridos (HTML, CSS, ANGULAR, etc.) a lo largo

del desarrollo del módulo, implementándolos en la solución del problema o problemas

que se planteen.

 Hacer entrega de diferentes versiones de diseño hasta llegar al diseño final el cual deberá

ser sustentado por quienes participan del proyecto.

 Finalmente, las soluciones presentadas deberán estar integradas al software, evidenciando

las mejoras que se realizaron específicamente en la parte de la interfaz de usuario.

Trabajo Colaborativo Front End 5

4. Exploración del Software BOCA

4.1. Página de ingreso al (Login):

Como se puede observar es un sitio muy básico, su apariencia es similar a la que se puede

observar en un editor de texto como Word con un artículo incrustado. Si bien la simplicidad es

un alivio para los usuarios, esta pantalla excede el límite de la simplicidad para la presentación

de una interfaz gráfica de usuario y de presentación de la página del Sistema de Información

“BOCA”, corre el riesgo de parecer una página juvenil y barata; es decir no atractiva ante la vista

de quienes la visitan, lo que puede desencadenar en un sinnúmero de abandono repentino del

sitio web ante la frustración y el desánimo del usuario final.

Trabajo Colaborativo Front End 6

4.2. Página de administrador (Admin page):

Admin Page:

Los enlaces encontrados en el sitio son poco claros, con elementos apilados que no
Se evidencia un sitio sin un enlace claro, con elementos juntos/unidos que no facilita
decidir o hacer clic de a dónde se quiere ir. En caso de que este sitio crezca en número de
facilitan
páginas, será la interacción
incontrolable y difícildel usuario
su uso, por ellocon el sistema;
se plantea antey el eventual crecimiento
un rediseñado del software el
reestructuración en categorías y subcategorías para que los visitantes entiendan
exactamente a dónde ir para lo que quieren; de igual manera, la barra de información del
número
usuario de espáginas
logeado demasiadoserá incontrolable
brillante, y por
el color amarillo, rara tanto como
vez funciona su uso
colorserá cada vez más difícil.
principal, aunque en ocasiones puede verse bien como un acento. La propuesta es hacer
un menú con información (dashboard) como el siguiente:
De igual manera, la barra de información del usuario registrado es demasiado brillante; el

color amarillo no es el más adecuado para el menú principal.

4.3. Página de contenido (Contest page):

Se puede identificar una pantalla con los botones en desorden, no existe la simetría y la

descripción de las diferentes casillas es demasiado extensa; igualmente, la casilla de texto

Trabajo Colaborativo Front End 7

(textbox) se encuentra desordenada y su tamaño varía entre casillas. Las casillas numéricas no

poseen las restricciones necesarias para darle el empleo correcto permitiendo el ingreso de

cualquier caracter. Adicionalmente, los títulos en las etiquetas (label) poseen una longitud

demasiado extensa lo que hace ver el formulario desordenado.

4.4. Página de usuario (User page):

Básicamente se identifican las mismas falencias presentadas en la página de

contenido; botones en desorden, falta de colores, no existe una simetría ni mucho menos una

adecuada descripción de los elementos presentados (contexto).

5. Propuesta de solución software BOCA:

5.1. Propuesta de solución de la página de registro:

Trabajo Colaborativo Front End 8

Se plantea un diseño fresco y agradable, con colores llamativos, imágenes visualmente

atractivas y un menú de inicio intuitivo y agradable para con ello lograr la atención y el interés

del usuario.

5.2. Propuesta de solución de la página de administrador:

Se plantea un rediseñado y estructuración del menú por categorías y subcategorías para

que los visitantes sepan rápidamente a donde ir acorde a sus necesidades de exploración y uso

del sistema. En conclusión, se plantea la elaboración de un menú desplegable (dashboard) como

el planteado en la imagen anterior.

Trabajo Colaborativo Front End 9

5.3. Propuesta de solución de la página de contenido:

Su diseño tendrá la caracterización de ocultar el panel vertical ubicado en la parte

izquierda cuando no se tenga el cursor posicionado sobre el mismo (mouse over) con el fin de

tener más espacio y así ver una pantalla más limpia y fresca; de igual forma, al posicionar el

mouse sobre la casilla de texto (textbox), se mostrará información referente (tooltip) con los

comentarios/ayudas respectivas que guíen al usuario de una forma más intuitiva. Los campos

numéricos se crearán con las restricciones del caso, al igual que los cuadros de texto y fecha.
Trabajo Colaborativo Front End 10

5.4. Propuesta de solución de la página de usuario:

Al igual que en la página de administrador se plantea un rediseño estructural que permita

la interacción de los diferentes eventos que hacen atractivo a un producto de software para la

vista del usuario con botones y menús interactivos que permitan ocultar secciones cuando no se

haga use de las mismas; mensajes de ayuda dentro de las diferentes casillas haciendo su uso

intuitivo y por supuesto trabajar sobre las restricciones de escritura o inserción de información no

adecuada al contexto.

6. Elección de la solución que se presentará para el proyecto

Una ves determinadas las falencias que presenta el software y estudiadas las

posibles oportunidades de mejora, el equipo de desarrollo ha decidido trabajar inicialmente con

Bootstrap, este es un es un framework front-end utilizado para desarrollar aplicaciones web y

sitios mobile first. El propósito de este, es ofrecerle al usuario una experiencia más agradable

cuando navega en un sitio. Por esta razón, tiene varios recursos para configurar los estilos de los
Trabajo Colaborativo Front End 11

elementos de la página de una manera simple y eficiente, además de facilitar la construcción de

páginas que, al mismo tiempo, están adaptadas para la web.

Bootstrap es un framework CSS de código abierto desarrollado por Twitter en 2010, para

estandarizar las herramientas de la compañía. El framework combina CSS y JavaScript para

estilizar los elementos de una página HTML. Permite mucho más que, simplemente, cambiar el

color de los botones y los enlaces. Esta es una herramienta que proporciona interactividad en la

página, por lo que ofrece una serie de componentes que facilitan la comunicación con el usuario,

como menús de navegación, controles de página, barras de progreso y más. Además de todas las

características que ofrece el framework, su principal objetivo es permitir la construcción de sitios

web responsive.

Con Bootstrap obtendremos una serie de características que se pueden implementar en un sitio

web, como lo son permitir la adaptación de la página según el tipo de dispositivo utilizado,

ofrece alertas con colores específicos según la situación, también carrusel, que permite la

visualización de imágenes de manera receptiva, así como los efectos especiales para la transición

de imágenes y controles de visualización, como por ejemplo los indicadores de “siguiente” y

“anterior”. Barra de navegación, que permite la construcción de un sistema de navegación

sensible.