Olympia

Índice 📄

• 1. Definición del producto
• 2. Definición de usuarios
• 4. Consideraciones generales
• 5. Criterios de aceptación mínimos del proyecto
• 6. Hacker edition
• 7. Consideraciones técnicas
• 8. Pistas, tips y lecturas complementarias
• 9. Checklist

---

1. Definición del producto 📝

Olympia es una página web donde podrás encontrar los datos más resaltantes de los Juegos Olímpicos celebrados el año 2016 en la ciudad de Río de Janeiro de Brazil. En ella además de ver la imágenes más resaltantes del evento podrás filtrar por diferentes categorás como género, edad y medallas ganadas o realizar una búsqueda personalizada desde el input de buscar, también podrás ordenar de manera ascendente y descendente y observar el ranking de medallas obtenidas de acuerdo a cada pais y hacemos una espeial consideración en destacar la participación de las mujeres y sus logros.

2. Definición de usuarios 👩 👨

Los usuarios de Olympia son personas aficionadas a los deportes que quieren obtener información de sus atletas favoritos o los representantes de sus paises, tambíen es usado por periodistas ya que pueden hacer búsquedas inmediatas de un atleta en particular o pueden obtener información de acuerdo a filtros como genero por ejemplo así como verificar las estadisticas para analizar y hacer sus notas periodísticas en un corto tiempo.

• Historias de usuario

Historia 1
Yo como usuario quiero: Ver las imágenes más impactantes de los Juegos OLimpicos y un resumen del evento.

Historia 2
Yo como usuario quiero: Un buscador para encontrar fácilmente la información de mi atleta favorito o grupos de atletas por pais y disciplina deportiva.

Historia 3
Yo como investigador quiero: Un botón para ordenar la información por orden alfabético y por la edad de los participantes.

Historia 4
Yo como investigador quiero: Un botón para filtrar por categorías y poder agrupar por género y medallas ganadas. Historia 5
Yo como investigador quiero: Un botón para filtrar por estadisticas y poder ver los paises con el total de medallas ganadas. Historia 6
Yo como investigador quiero: Quiero poder ver el porcentaje de medallas ganadas por mujeres.

3. Diseño ✨

Uso de la aplicación

• Se presenta una ventana con un input de tipo texto que permite buscar por nombre de atletas, pais y deportes.
• Se presenta un botón de Atletas que lleva hacia la data de atletas participantes.
• Se presenta un botón de Deportes que lleva hacia la data filtrada de las disciplinas deportivas que se llevaron a cabo y los atletas segun cada caso.
• Se presenta un botón de Estadísticas que muestra las medallas ganadas por cada país participante.

Prototipo de baja fidelidad

Prototipo en figma

4. Tecnologías empleadas 🔨

• HTML: Siguiendo las reglas del HTML semántico se estructuró con un header que contiene el logo y barra de navegación y el input de busqueda, el main para englobar el contenido principal y en el footer se detalla los derechos de autor y barra de navegación.

• CSS: Usada para definir el estilo visual del proyecto.

• Javascript: Para dar la funcionalidad a la aplicación en donde se crearon las siguientes archivos:

• src/main.js: Engoba todo el código relacionado con la interacción con el DOM.

• src/data.js: Contiene toda la funcionalidad que corresponde a obtener, procesar y manipular datos donde se crearon las siguientes funciones:

• function filterData() Para filtrar la información de acuerdo a medallas, género y edades y para remover datos repetidos en la data.
• function orderData() Para ordenar la información de acuerdo a orden alfabético ascendente y descendente y también por edades de los participantes.
• function statisticsData() Para mostrar los datos estadísticos.

• Jest: Framework para realizar los testing unitarios.

• Eslint: Herramienta de linting para analizar el codigo en busca de errores.

Link del plan de acción:

Trello: https://trello.com/b/RwY7grMN/sprint-4

6.Testing 🔧

• Errores de sintaxis en el HTML, no nos permitia correr los test.

• Errores de parametros (le estabamos enviando los parametros de manera incorrecta).

7. Checklist

• Usa VanillaJS.
• No hace uso de this.
• Pasa linter (npm run pretest)
• Pasa tests (npm test)
• Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
• Incluye un plan de acción de tus objetivos de aprendizaje prioritizado en README.md (o otro archivo).
• Incluye Definición del producto clara e informativa en README.md.
• Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad) en README.md.
• Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README.md.
• Incluye link a Zeplin en README.md.
• Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• UI: Muestra lista y/o tabla con datos y/o indicadores.
• UI: Permite ordenar data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.
• UI: Es responsive.