Skip to content

ARAUJOVILLASMIL/DEV001-data-lovers

BranchesTags
 
 

Repository files navigation

Data Lovers

Índice

  • [1. Proyecto Harry Potter
  • [2. Historias de usuario.
  • [3. Prototipo iniciales
  • [4. Prototipo de alta fidelidad (FIGMA).
  • [5. Testeos de usabilidad.
  • [6. Trello.

1. Proyecto Harry Potter.

Se diseño una pagina para los fanaticos de Harry Potter, donde podemos apreciar breves imagenes y video de la popular saga, luego de esto podemos apreciar un MENU con varias opciones que nos llevaran a recorrer un poco este maravilloso mundo, en este encontraras sus libros y todos los personajes con algunas descripciones de ellos mismos, ademas de esto puedes ordenar de la A-Z y de Z-A todos los personajes y filtarlos por sus respectivas casas y genero. Se reliazo un diseño resposivo para que los fanaticos de Harry puedan verlo desde sus dispositivos moviles.

2. Historias de usuario.

En este proyecto usamos 5 hstorias de usuario: 1- HU Yo como fan de Harry Potter quiero poder ver un listado de todos libros publicados hasta el año 2022. 2- HU Yo como fan quiero ver el listado de personajes principales. 3- HU Yo como fan quiero poder filtrar la data para conocer la cantidad de personajes por casa. 4- HU Yo como fan quiero poder filtrar la data para conocer la cantidad de personajes por género. 5- HU Yo como fan quiero poder ver los personajes ordenados de forma alfabéticamente, ascendene y descente.

3. Pototipo de baja fidelidad.

Nuestro primer prototipo lo diseñamos usando una hoja de papel y lapiz, esta fue nuestra idea inicial de lo que queriamos crear. prototipo de baja

4.Protoripo de alta fidelidad.

Este fue realizado en FIGMA haciendo 4 diseños principales.

prototipo final

prototipo libros

prototipo - 2

5 Testeos de usabilidad.

Se realizaron testeo del producto con un 100% de aceptacion, esto para estar seguras de que el usuario no iba a tener problemasal entrar a nuestra web. fototest

6 Trello.

Se realizo en trello un esquema de trabajo que nos permitio trabajar de una manera mas ordenada en la metodologia., en este esquema se desarrollo las historias de usuario y la manera como ibamos a trabajar como equipo.

trello

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu solución usando papel y lápiz. Te recomendamos tomar fotos de todas las iteraciones que hagas, que las subas a tu repositorio y las menciones en tu README.md.

Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - User Interface). Para eso debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma que es una herramienta que funciona en el navegador y, además, puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, PowerPoint, Keynote, etc.

El diseño debe representar el ideal de tu solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu diseño debe seguir los fundamentos de visual design.

Testeos de usabilidad

Durante el reto deberás hacer tests de usabilidad con distintos usuarios, y en base a los resultados, deberás iterar tus diseños. Cuéntanos qué problemas de usabilidad detectaste a través de los tests y cómo los mejoraste en tu propuesta final.

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

Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. Tu tiempo de hacking es escaso, así que deberás priorizar

Como mínimo, tu implementación debe:

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

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas.

Tus pruebas unitarias deben dar una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo src/data.js que contenga tus funciones y está detallado en la sección de Consideraciones técnicas.

6. Hito Opcional

Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, si terminaste con todo lo anterior y te queda tiempo, decide sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas nuevas en el siguiente proyecto.

Features/características extra sugeridas:

  • En lugar de consumir la data estática brindada en este repositorio, puedes consumir la data de forma dinámica, cargando un archivo JSON por medio de fetch. La carpeta src/data contiene una versión .js y una .json de de cada set datos.
  • Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para ello te recomendamos explorar librerías de gráficas como Chart.js o Google Charts.
  • 100% Coverage

7. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts); ver Parte opcional más arriba.

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── EXTRA.md
├── README.md
├── package.json
├── src
|  ├── data (según con qué data trabajes)
|  |  └── athletes
|  |  |  ├── athletes.js
|  |  |  ├── athletes.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  |  └── ghibli
|  |  |  ├── ghibli.js
|  |  |  ├── ghibli.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  |  └── harrypotter
|  |  |  ├── data.js
|  |  |  ├── harry.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  |  ├── lol
|  |  |  ├── lol.js
|  |  |  ├── lol.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  |  ├── pokemon
|  |  |  ├── pokemon.js
|  |  |  ├── pokemon.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  |  └── rickandmorty
|  |  |  ├── rickandmorty.js
|  |  |  ├── rickandmorty.json
|  |  |  ├── README.pt-BR.md
|  |  |  └── README.md
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.spec.js

directory: 8 file: 29

src/index.html

Como en el proyecto anterior, existe un archivo index.html. Como ya sabes, acá va la página que se mostrará al usuario. También nos sirve para indicar qué scripts se usarán y unir todo lo que hemos hecho.

src/main.js

Recomendamos usar src/main.js para todo tu código que tenga que ver con mostrar los datos en la pantalla. Con esto nos referimos básicamente a la interacción con el DOM. Operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), ....

Esta no es la única forma de dividir tu código, puedes usar más archivos y carpetas, siempre y cuando la estructura sea clara para tus compañeras.

En este archivo encontrarás una serie de imports comentados. Para cargar las diferentes fuentes de datos tendrás que descomentar la línea correspondiente.

Por ejemplo, si "descomentamos" la siguiente línea:

// import data from './data/lol/lol.js';

La línea quedaría así:

import data from './data/lol/lol.js';

Y ahora tendríamos la variable data disponible en el script src/main.js.

src/data.js

El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.

Te recomendamos que este archivo contenga toda la funcionalidad que corresponda a obtener, procesar y manipular datos (tus funciones). Por ejemplo:

  • filterData(data, condition): esta función filter o filtrar recibiría la data, y nos retornaría aquellos datos que sí cumplan con la condición.

  • sortData(data, sortBy, sortOrder): esta función sort u ordenar recibe tres parámetros. El primer parámetro, data, nos entrega los datos. El segundo parámetro, sortBy, nos dice con respecto a cuál de los campos de la data se quiere ordenar. El tercer parámetro, sortOrder, indica si se quiere ordenar de manera ascendente o descendente.

  • computeStats(data): la función compute o calcular, nos permitirá hacer cálculos estadísticos básicos para ser mostrados de acuerdo a la data proporcionada.

Estos nombres de funciones y de parámetros son solamente referenciales, lo que decidas depende de tu propia implementación.

Estas funciones deben ser puras e independientes del DOM. Estas funciones serán después usadas desde el archivo src/main.js, al cargar la página, y cada vez que el usuario interactúe (click, filtrado, ordenado, ...).

src/data

En esta carpeta están los datos de las diferentes fuentes. Encontrarás una carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la extensión .js y otro .json. Ambos archivos contienen la misma data; la diferencia es que el .js lo usaremos a través de una etiqueta <script>, mientras que el .json está ahí para opcionalmente cargar la data de forma asíncrona con fetch() (ver sección de Parte Opcional).

test/data.spec.js

Tendrás también que completar las pruebas unitarias de las funciones implementadas en el archivo data.js.

8. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

CSS

Web APIs

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

  • Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

  • Git: Instalación y configuración

  • Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

  • Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

  • GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • GitHub: Despliegue con GitHub Pages

    Links

  • GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • Seguir los principios básicos de diseño visual

Investigación

8. Pistas, tips y lecturas complementarias

Primeros pasos

Antes de empezar a escribir código, debes definir qué deberá hacer el producto en base al conocimiento que puedas obtener de tu usuario. Estas preguntas te pueden ayudar:

  • ¿Quiénes son los principales usuarios de producto?
  • ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
  • ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
  • ¿Cuándo utilizan o utilizarían el producto?
  • Toda tu investigación previa debe tener como resultado todas las Historias de Usuario de tu proyecto.
  • No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más pistas en la guía de organización para el proyecto.

Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

  1. Una de las integrantes del equipo debe realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
  2. ⬇️ Clona tu fork a tu computadora (copia local).
  3. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
  4. Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
  5. Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
  6. A codear se ha dicho! 🚀

Contenido de referencia

Diseño de experiencia de usuario (User Experience Design)

  • Investigación con usuarios / entrevistas
  • Principios de diseño visual

Desarrollo Front-end

Herramientas

Organización del Trabajo

9. Para considerar Project Feedback

  • Tiene una interfaz que cumple los criterios mínimos con al menos 3 Historias de Usuario.
  • El proyecto será entregado incluyendo pruebas unitarias que cubren un mínimo del 70% de statements, functions, lines y branches (fijate en las funciones de filtrar, ordenar etc la data).
  • El proyecto será entregado libre de errores de eslint (los warnings están ok).
  • El proyecto será entregado subiendo tu código a GitHub.
  • La interfaz será "desplegada" usando GitHub Pages.
  • El README contiene una definición del producto e Historias de Usuario.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 96.1%
  • HTML 3.6%
  • CSS 0.3%