Skip to content

Proyecto de Data para el bootcamp de @Laboratoria. Este es un programa de aprendizaje inmersivo de 6 meses enfocado en el perfil de Web Developer.

Notifications You must be signed in to change notification settings

roxifochoag/DEV008-data-lovers

 
 

Repository files navigation

Data Lovers

Índice


1. Preámbulo

El deporte desempeña un papel fundamental en la sociedad moderna, representando una manifestación cultural en donde se involucran diversos factores. Sus repercusiones, no han dejado de crecer en los últimos años, acreditando con ello su importancia (Joo, 2012; Lombardo, 2012; Jarvie, 2013).

Asimismo, el estudio del deporte y especialmente del rendimiento físico humano ha permitido acumular conocimientos cada vez más fundamentados científicamente, y esto ha hecho necesario sistematizarlos y organizarlos (Harre, Harre & Barsch, 2012; Hoffman, 2014; Bompa & Buzzichelli, 2015; Calero, 2015). Es por ello, que los entrenadores de alto nivel necesitan contar con una base de datos para validar el rendimiento y los record, como obtención de medallas sean la guia principal para preparar a sus atletas independientmente de la disciplina a la que pertencezcan. Motivo por el cual, la realización de este proyecto de tener un registro de las medallas por disciplina y deportista.

2. Resumen del proyecto

En este proyecto se construyo una página web, en base da reportes e investigación deportiva de las Olimpiadas de Río de Janeiro. La orientación de esta página es para entrenadores deportivos. Como entregable final esta página web permita visualizar la data, filtrarla, ordenarla y hacer algún cálculo agregado. Con cálculo agregado nos referimos a distintos cálculos que se puede hacer con la data para mostrar información aún más relevante para los usuarios (el valor máximo y/o mínimo, etc).

El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario final necesita.

3. Prototipos de Baja fidelidad

A continuación, serán mostradas los prototipos de Baja fidelidad bajo de las pantallas principales de acuerdo el siguiente orden: Index, Búsqueda, Contacto, Testimonio y la versión responsiva.

Index

  • Prototipo del Index

image

  • Descripción:La pantalla de Index realizada en B.F con la sección de noticias. Además, cumple con el footer y header.

Búsqueda

  • Prototipo de la Búsqueda

image

  • Descripción: La pantalla de búsqueda realizada en B.F con los tipos de busqueda nombre, peso, altura y medalla. Además, cumple con el footer y header.

Estadísticas

  • Prototipo de las Estadísticas

image

  • Descripción: La pantalla de Estadisticas realizada en B.F indicando el lugar donde irian los gráficos. Además, cumple con el footer y header.

Testimonios

  • Prototipo de los Testimonios

image

  • Descripción: La pantalla de Testimonios realizada en B.F indicando el lugar donde irian los testimonios. Además, cumple con el footer y header.

Contacto

  • Prototipo de Contacto

image

  • Descripción: La pantalla de Contacto realizada en B.F indicando el lugar donde iria el formulario de contacto. Además, cumple con el footer y header.

Versión responsiva

image

  • Descripción: La pantallas de Index, Búsqueda, Estadísticas, Testimonios y Contacto realizada en B.F bajo la versión responsiva.

4. Prototipos de Alta fidelidad

A continuación, serán mostradas los prototipos de Alta fidelidad bajo de las pantallas principales de acuerdo el siguiente orden: Index, Búsqueda, Contacto, Testimonio y la versión responsiva.

Index

  • Prototipo del Index

image

  • Descripción: La pantalla de Index realizada en A.F con la sección de noticias. Además, cumple con el footer y header con el color a aplicar en el modelo final.

Búsqueda

  • Prototipo de la Búsqueda

image

  • Descripción: La pantalla de Búsqueda realizada en A.F con los filtros de genero, evento, medalla, deporte y país. Además, cumple con el footer y header con el color a aplicar en el modelo final.

Estadísticas

  • Prototipo de las Estadísticas

image

  • Descripción: La pantalla de Estadísticas realizada en A.F con los gráficos. Además, cumple con el footer y header con el color a aplicar en el modelo final.

Testimonios

  • Prototipo de los Testimonios

image

  • Descripción: La pantalla de Testimonios realizada en A.F con la foto, el nombre y testimonio. Además, cumple con el footer y header con el color a aplicar en el modelo final.

Contacto

  • Prototipo de Contacto

image

  • Descripción: La pantalla de Contacto realizada en A.F con el nombre, apellido, correo y mensaje a enviar. Además, cumple con el footer y header con el color a aplicar en el modelo final.

5. Requerimientos

Los requerimientos son las caracteristicas propias que el producto digital debe de tener. En este caso, existen dos tipos: Los funcionales y no funcionales. En relación al primero son las acciones especificas de funcionalidad que debe tener y los no funcionales son las caracteristicas especificas que debe de tener, las cuales que se dividen en tres categorías: rendimiento, seguridad y calidad.

Requerimientos funcionales

  • El aplicativo Web debe ser responsivo;
  • El aplicativo Web tiene todos los enlaces conectados a las páginas correspondientes.

Requerimientos no funcionales

  • El aplicativo Web debe ser fácil de usar;
  • Las interfaces debe ser intuitivas;
  • El aplicativo debe tener respuesta inmediata ante el uso;
  • El aplicativo tiene el logo y el icono en el header con la frase "Comite Olimpico";
  • El aplicativo mantiene la paleta de color uniforme;
  • El aplicativo mantiene la tipografía.

H.U Index

  • Pantalla final de index:

image

  • Historia de Usuario: 001 *Como: Usuario *Quiero: Poder ver mis noticias actualizadas *Para poder: Estar al día con las noticias más relevantes de los deportistas de alto nivel

H.U Búsqueda

  • Pantalla final de la Búsqueda:

image

image

  • Historia de Usuario:

    *Como: Usuario *Quiero: Realizar mis búsquedas de acuerdo a los filtros por genero(M,F o todos), por nombre de deportista, medalla(Oro,Bronce y/o Plata), deporte, equipo (país), evento o por rango de edad expresado en años. Este proceso de filtrado puede realizarse por un tipo de filtro o a mi elección *Para poder: Visualizar a los deportistas de alto nivel y conocer sus caracteristicas físicas a detalle como peso o talla.

H.U Estadística

  • Pantalla final de Estadística

image image image

  • Historia de Usuario: *Como: Usuario *Quiero: Visualizar la información por de la siguiente forma: -Gráfico por medallas obtenidas; -Gráfico por genero; -Gráfico por rango de edad; -Gráfico por cantidad de atletas por país; -Gráfico por cantidad de atletas por deporte; -Gráfico de ranking de paises por medallas; *Para poder: Visualizar a los deportistas de alto nivel con sus datos especificos de forma interactiva.

H.U Testimonio

  • Pantalla final de Testimonio:

image

  • Historia de Usuario: *Como: Usuario *Quiero: Visualizar los testimonios de los entrenadores que interactuaron con la página *Para poder: Comprobar la utilidad de la página

H.U Contacto

  • Pantalla final de Contacto:

image

image

  • Historia de Usuario: *Como: Usuario *Quiero: Enviar un mensaje para entrar en contacto *Para poder: Entrar en contacto con el administrador

6. Pruebas unitarias

Las pruebas unitarias se realizaron con éxito.

image

image

image

About

Proyecto de Data para el bootcamp de @Laboratoria. Este es un programa de aprendizaje inmersivo de 6 meses enfocado en el perfil de Web Developer.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.1%
  • HTML 6.6%
  • CSS 2.3%