- 1. Consideraciones generales
- 2. Definicion del proyecto
- 3. Funcionalidades
- 4. Boilerplate
- 5. Estructura del Proyecto
- 6. Pruebas
- 7. Visita nuestro sitio web
- 8. Agradecimientos
- Este proyecto se resolvio en duplas.
- El rango de tiempo estimado para completar el proyecto fue de 3 a 4 Sprints.
- El proyecto fue entregado subiendo nuestro código a GitHub (commit/push) y la interfaz fue desplegada usando GitHub Pages.
En nuestro proyecto se construyo una página web para visualizar un conjunto (set) de datos con tematica de Studio Ghibli, nos presenta una pagina principal con con 2 botones que nos dirigen a films y personajes, en films podemos visualizar los poster de las peliculas, y podemos filtrar y ordenar la data en diferente orden, por productor y director, ademas un calculo agregado para saber cuantos personajes son en total por pelicula y un espacio adicional con algunas curiosidades de algunas peliculas de studio ghibli.
- Prototipo de baja fidelidad
- Prototipos de alta fidelidad
[prototipo pc] (https://www.figma.com/proto/9LrVbpGSelbKIuHVXbH8Ix/Untitled?type=design&node-id=1-2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2)
Incluimos un testeo de usabilidad con el prototipo de alta fidelidad elaborado en figma, para que los usuarios pudieran interactuar con el prototipo.
Se incluye lista de problemas detectados en el test de usabilidad:
-
Investigación con usuarios
-
¿Quiénes son los principales usuarios de producto?
Los usuarios que son fanaticos de studio ghibli y les interesa explorar sitios con información de las peliculas.
- ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
Poder interactuar de una forma fácil con el sitio web y tener información que sea de su agrado.
- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
Studio Ghibli tiene varias animaciones, para nuestras usuarias es importante saber cuántas y cuáles son. En Studio Ghibli hay directores y productores que han colaborado en la creación de más de una animación. Por ello, es importante para nuestras usuarias poder conocerlos y saber cuántas y cuáles son las animaciones a las que dieron "vida". Las animaciones tienen información relevante para nuestras usuarias, como descripción, fecha de lanzamiento, peso, director, productor y personajes. Cada animación tiene sus personajes, para nuestras usuarias es importante saber cuántos y cuáles son.
- ¿Cuándo utilizan o utilizarían el producto?
Cada que las usuarias quieran entrar al sitio web y pasar un momento divertido y entretenido con información releevante para ellas como fanaticas de studio ghibli.
Nuestro proyecto presenta una pagina web con tematica de studio ghibli.
El listado de funcionalidades es el siguiente:
- El sitio web se presenta con una página principal, que tiene 2 botones de acceso a films y personajes.
para lo cual se uso el siguiente codigo:
- Despues presentamos la página de films.
- La página films tiene filtros para que el usuario pueda interactuar con la página como mejor le parezca, esta la parte de ordenar por, para la cual se utilizo el siguiente código para su funcionalidad en js:
- La página films también tiene la opción de ordenar por productor, se uso el siguiente código en js para dar funcionalidad:
- La página films también tiene la opción de ordenar por director, se uso el siguiente código en js para dar funcionalidad:
- La página films también tiene un botón de acceso a curiosidades estudio ghibli.
- La página films tiene un botón para volver a la página principal, la página de films a su vez tiene un botón de acceso a la página de curiosidades y la página de curiosidades tiene un botón de regreso a films, se muestra el código en js para dar funcionalidad a estos botones:
- Despues tenemos la pagina de personajes.
- La página de personajes tiene un botón de regreso a la página principal y otros botones con titulos de peliculas a los cuales se les dio funcionalidad con el siguiente código:
La lógica del proyecto fue implementada completamente en JavaScript (ES6), HTML y CSS.
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 (studio ghibli)
| | ├
| | └── ghibli
| | | ├── ghibli.js
| | | ├── ghibli.json
| | | └── README.md
| ├── data.js
| ├── index.html
| ├── main.js
| └── style.css
└── test
└── data.spec.js
- Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Arrays (arreglos)
-
Objetos (key, value)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
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
Se incluyen pruebas con el uso de jest test.
- npm run pretest
- npm test
https://fabygranados.github.io/DEV009-data-lovers/src/
Agradecimiento a todo el equipo de laboratoria, por ser una guía en este proyecto y siempre tener apertura para cualquier bloqueo que se presentara, por las guías proporcionadas y los diferentes espacios de recreación para poder equilibrar el trabajo con la distracción.
Gracias a mi compañera de dupla por que logramos formar un buen equipo de trabajo, y una organización efectiva para poder generar los resultados esperados.
Gracias a las compañeras de cada grupo de sprint review, por compartir sus avances y aportarnos tips que fueron siempre muy productivos para nosotras.