• 1. Definición del producto
• 2. Definición de usuarios
• 3. Plan de acción
• 4. Diseño
• 5. Tecnologías empleadas
• 6. Checklist

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 país y hacemos una espeial consideración en destacar la participación de las mujeres y sus logros. A través de este link puedes observar el proyecto finalizado.

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

-Criterios Minimos de aceptación del proyecto 🔧

• Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
• Permitir al usuario interactuar para obtener la infomación que necesita.
• Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
• Que la interfaz siga los fundamentos de visual design.

El plan de acción lo manejamos desde la plataforma Trello en este link se puede ver a detalle la ejecución del mismo.

• Se presenta una ventana con un input de tipo texto que permite buscar por nombre de atletas, país 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.

• Para mejorar la forma de interactuar en la aplicación agregamos un botón de inicio para volver hacia la Home Page que no estuvo considerado en el prototipo inicial.
• Para una mejor vision de los card de atletas ocultamos la lista de categorías de filtrado que se activará solo cuando se le da click al botón ubicado en la parte superior izquierda.

• 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.

• 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.