/LIM017-data-lovers

💻Página web dirigida a todas las personas fanáticas de los deportes, que desean conocer los resultados obtenidos en los Juegos olímpicos Río de Janeiro 2016 de manera ordenada y con una interfáz amigable.

Primary LanguageJavaScript

📊 Data Lovers: Juegos Olímpicos Río de Janeiro 2016

📎1. Introducción

Los Juegos olímpicos de Río de Janeiro fueron un evento multideportivo internacional, celebrado en la ciudad de Río de Janeiro, Brasil, entre el 5 y el 21 de agosto de 2016. Fue la primera vez que se realizó dicho evento en un país sudamericano y la segunda en un país de Latinoamérica. Debido a los miles de participantes de distintas disciplinas y categorías se obtuvo una data interesante que necesitaba organizarse para dar a conocer qué deportistas obtuvieron medallas de oro, plata y bronce dependiendo de su disciplina.

imagen

En base a ello, desarrollamos una página web dirigida a todas las personas fanáticas de los deportes, que desean conocer los resultados obtenidos en los Juegos olímpicos Río de Janeiro 2016 a los campeones de todas las disciplinas, utilizando filtros por deporte, género y medallas.

2. Investigación UX

Se realizó una investigación previa al desarrollo del proyecto, teniendo en cuenta las siguientes preguntas:

  • ¿Quiénes son los principales usuarios de producto?

Los principales usuarios son personas cuyo interés es conocer datos relacionados a los deportistas campeones de los Juegos Olímpicos de Río 2016.

  • ¿Cuáles son los objetivos de estos usuarios en relación con el producto?

Los usuarios desean interactuar con una página amigable, sencilla donde puedan encontrar el nombre de los deportistas que ganaron medallas en su respectiva disciplina.

  • ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?

Los usuarios desean conocer la cantidad de mujeres que ganaron en el evento, además poder realizar filtros por género en cada disciplina, conocer únicamente a los atletas ganadores de medallas de oro, medallas de plata y medallas de bronce.

  • ¿Cuándo utilizan o utilizarían el producto?

Los usuarios pueden interactuar con la página en cualquier momento, ya que los datos que se van a mostrar son fijos y no varían con el tiempo.

Historias de usuario

En función a nuestra investigación, se formularon las siguientes Historias de Usuario

  • Historia de Usuario N°1:

"Yo como usuario deseo ver en todos los deportes de las Olimpiadas de Río 2016." Para qué: Para poder conocer qué deportes existen además de los que ya conozco se celebraron en las Olimpiadas de Río 2016.

  • Historia de Usuario N°2:

"Yo como usuario deseo ver información de los deportistas que obtuvieron medallas de oro, bronce y plata en su respectiva disciplina." Para qué: Para poder conocer las características de los deportistas destacados como: nombre, nacionalidad, edad y el evento correspondiente.

  • Historia de Usuario N°3:

"Yo como usuario deseo poder ver únicamente a las mujeres participantes por deporte." Para poder conocer a las mujeres más destacadas en su deporte y la representatividad que tuvieron en los Juegos olímpicos.

3. Diseño de la interfaz de usuario UI

Prototipo de alta fidelidad

Se creó un prototipo final en Figma, para ello anexamos el siguiente link: https://www.figma.com/proto/xEnGv9SBnZzBZp8M42g4LL/Rio-2016?node-id=17%3A5&scaling=min-zoom&page-id=0%3A1.

4. Desarrollo del proyecto

Plan de acción

  1. Nuestro plan de acción fue priorizar el estudio de Arrays y Objetos, posteriormente las funciones que nos permitan manipular la data que se nos otorgó inicialmente.
  2. Realizamos el desarrollo del proyecto en función a las Historias de Usuario, para ello abordamos cada historia por Sprint.

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Al culminar 3 sprints, como resultado final en nuestra implementación en HTML, CSS y JavaScript, obtuvimos lo siguiente: Imagen text Imagen text Imagen text Imagen text

Testeos de usabilidad

Los testeos de usabilidad fueron indispensables en el desarrollo del proyecto, puesto que en base a ellos logramos verificar que nuestras funciones implementadas en JavaScript se ejecutaban correctamente. Cabe resaltar que se tomó una data de muestra para poder implementar test unitarios con mayor facilidad y que nos permitan verificar las exactitud de cada prueba, dado que nuestra data original es muy amplia.