diff --git a/README.md b/README.md index 370e29d8..3d991fc5 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,18 @@ *** ## Índice * [1. Preámbulo](#1-Preámbulo) -* [2. Resumen Proyecto](#1-Resumen-de-proyecto) -* [3. Investigacion UX](#2-Investigacion-UX) -* [4. Diseño de la Interfaz de Usuario](#3-objetivos-de-aprendizaje) -* [5. Implementación de la Interfaz de Usuario](#4-implementacion-de-la-interfaz-de-usuario) - +* [2. Resumen Proyecto](#2-Resumen-de-proyecto) +* [3. Componentes del proyecto ](#3-Componentes-del-proyecto ) +* [4. Investigacion UX](#4-Investigacion-UX) +* [5. Diseño de la Interfaz de Usuario](#5-objetivos-de-aprendizaje) +* [6. Implementación de la Interfaz de Usuario](#6-implementacion-de-la-interfaz-de-usuario) +* [7. Resultado del proyecto](#5-Resultado-del-proyecto) *** # 1. Preámbulo -🙋💬 Hola somos Yanet y Yohana...Bienvenidos al universo Ghibli de nuestro proyecto Data Lovers! Antes de empezar, queremos explicar que Si hay algo que caracteriza el anime de este siglo XXI es la influencia que estudio Ghibli y Hayao Miyazaki han tenido en él. Prácticamente todos los directores de renombre se sienten influidos por sus películas, lo que nos ha dado un anime maduro y con una calidad indiscutible. Nuestra pagina te muestra 20 films te hara recordar los grandes hitos del estudio: ecología, monstruos, humanismo, viajes a mundos inimaginables, ternura e imaginación en una tanda de films que vale la pena revisar una a una. Te invitamos a recordar estas piezas de arte y animarte a que las veas, precisamos que los datos se nos fue entregado. +🙋💬 Hola somos Yanet y Yohana...Bienvenidos al mundo Ghibli de nuestro proyecto Data Lovers! Antes de empezar, queremos explicar que Si hay algo que caracteriza el anime de este siglo XXI es la influencia que estudio Ghibli y Hayao Miyazaki han tenido en él. Prácticamente todos los directores de renombre se sienten influidos por sus películas, lo que nos ha dado un anime de calidad indiscutible. Nuestra página te muestra 20 posters de films con detalles acerca del director, productor, descripción entre otros, te hará recordar los grandes hitos del estudio: ecología, monstruos, humanismo, viajes a mundos inimaginables, ternura e imaginación. Te invitamos a recordar estas piezas de arte y animarte a que las veas por primera vez o verlas nuevamente. -Encontrará más información en Wikipedia https://es.wikipedia.org/wiki/Studio_Ghibli , https://www.ghibli.jp/ , https://www.netflix.com/pe/browse/genre/81227213. +Encontrarás más información en: https://es.wikipedia.org/wiki/Studio_Ghibli , https://www.ghibli.jp/ , https://www.netflix.com/pe/browse/genre/81227213. # 2. Resumen de Proyecto @@ -21,14 +22,24 @@ Nuestro objetivo es crear un sitio web llamado "Ghibli Dreams" donde los usuario El proyecto se ha desarrollado utilizando HTML puro, CSS y Javascript basada en data de formato Json. Como versión final nuestra página web permite visualizar la data, filtrarla, ordenarla y ver el cálculo agregado. +# 3. Componentes del proyecto +**3.1 Objetivo General:** +Realizar una interfaz que me permita visualizar los posters con informacion de los films de Studios Ghibli desde cualquier dispositivo. + +**3.2 Objetivos específicos:** +* Definir las necesidades del usuario para poder determinar los componentes que contendrá la interfaz. +* Maquetación de la página web. +* Creación de Historias de Usuario. +* Revisión de Objetivos de aprendizaje. + ## Presentación ![screen1](src/img/portada.png) *** -# 3.Investigacion UX +# 4.Investigación UX Nuestro proceso creativo consta principalmente de 4 etapas fundamentales: -* Diseño Centrado en el Usuario (DCU) - Historias de usuario +* Historias de usuario * Prototipado en baja y alta fidelidad * Testeo de prototipo con usuarios * Búsqueda de referencias @@ -56,7 +67,6 @@ se ha identificado las siguientes necesidades y requerimientos de los usuarios, En caso del filtrado por productor solo se mostrará lo seleccionado. * Definición de terminado: - El buscador arrojará las coincidencias. La galería debe mostrar los posters según la búsqueda. Hacer el test para comprobar si llama a todos los posters. @@ -65,14 +75,12 @@ La historia se testeó en usuarios reales y se hicieron los cambios resultantes ### Historia N°3: "Yo como usuario, quiero revisar el listado de películas por orden alfabético" * Definición de terminado: - Al dar clic al botón "order" debe mostrar las opciones de orden de la A-Z y Z-A. Los posters del film que se muestren debe ordenarse según A-Z o Z-A. Hacer el test para comprobar si ordena correctamente. Se testeó en usuarios reales y se hicieron los cambios resultantes del testeo. * Criterios de aceptación: - Los y las usuarias verán un menú desplegable para ordenar los posters alfabéticamente. Al dar clic, el menú desplegable muestra las opciones A-Z y Z-A. Podrán escoger entre las 2 opciones. Según la opción escogida, la galería se actualizarán para encontrar al poster del film deseado. @@ -83,43 +91,34 @@ La historia se testeó en usuarios reales y se hicieron los cambios resultantes * Criterios de aceptación: Que los porcentajes se muestren de acuerdo al porcentaje. -## 4. Diseño de la Interfaz de Usuario +## 5. Diseño de la Interfaz de Usuario Fotos del prototipo de baja fidelidad📱: ### Prototipo idea en papel y lápiz ![Idea en papel](src/img/img_papelylapiz.jpg) - - ### Prototipo de baja fidelidad ![Idea en papel](src/img/baja_fidelidad.png) -### Prototipo de alta fidelidad +### Prototipo de alta fidelidad Nos dividimos los prototipos de alta fidelidad: una trabajó la versión de escritorio y la otra trabajó la versión mobile. Después del Test de Usuario como dupla decidimos modificar algunos elementos a partir del feedback recibido. Finalmente nos basamos en el prototipo ya modificado para dar paso a la estructura del HTML y CSS. -
Link a Figma

- - * [link a Figma]:https://www.figma.com/file/Zv5CarpyCWkcvg3Ese635O/DATA-LOVERS?type=design&node-id=0-1&t=Urm0epjSQSbc95li-0 - -#### Prototipo en alta fidelidad versión escritorio +### Prototipo en alta fidelidad versión escritorio +Fotos del prototipo de alta fidelidad📱: ![Idea en Figma](src/img/figma_escritorio.png) - - *** - -#### Prototipo en alta fidelidad versión para móvil +### Prototipo en alta fidelidad versión para móvil ![screen1](src/img/prototipo_movil.png) - Link Figma:https://www.figma.com/file/ITTasGXv8iISzWN2ButKI7/Untitled?type=design&node-id=0-1&t=lIEItjVIVmnWdYRW-0 **** -### TESTEO EN USUARIOS +### Testeo en usuarios Se realizó testeo con usuarios entre 15 a 40 años, quienes indican que los colores siguen la identidad gráfica del estudio Ghibli, que es agradable e intuitiva. Como sugerencia nos indicaron cambiaramos la imagen que iba en la portada. *** -## 5. Implementación de la Interfaz de Usuario (HTML/CSS/JS) +## 6. Implementación de la Interfaz de Usuario (HTML/CSS/JS) La implementación consta en: @@ -134,7 +133,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: ### HTML -- [ ] **Uso de HTML semántico** +- [✔] **Uso de HTML semántico**

Links

@@ -144,7 +143,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: ### CSS -- [ ] **Uso de selectores de CSS** +- [✔] **Uso de selectores de CSS**

Links

@@ -152,7 +151,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

-- [ ] **Modelo de caja (box model): borde, margen, padding** +- [✔] **Modelo de caja (box model): borde, margen, padding**
Links

@@ -163,7 +162,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

-- [ ] **Uso de flexbox en CSS** +- [✔] **Uso de flexbox en CSS**
Links

@@ -174,7 +173,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: ### Web APIs -- [ ] **Uso de selectores del DOM** +- [✔] **Uso de selectores del DOM**

Links

@@ -183,7 +182,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +- [✔] **Manejo de eventos del DOM (listeners, propagación, delegación)**
Links

@@ -193,7 +192,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

-- [ ] **Manipulación dinámica del DOM** +- [✔] **Manipulación dinámica del DOM**
Links

@@ -207,9 +206,9 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: ### JavaScript -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +- [✔] **Diferenciar entre tipos de datos primitivos y no primitivos** -- [ ] **Arrays (arreglos)** +- [✔] **Arrays (arreglos)**

Links

@@ -222,14 +221,14 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

-- [ ] **Objetos (key, value)** +- [✔] **Objetos (key, value)**
Links

* [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)

-- [ ] **Variables (declaración, asignación, ámbito)** +- [✔] **Variables (declaración, asignación, ámbito)**
Links

@@ -237,7 +236,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)

-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +- [✔] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
Links

@@ -245,7 +244,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)

-- [ ] **Uso de bucles/ciclos (while, for, for..of)** +- [✔] **Uso de bucles/ciclos (while, for, for..of)**
Links

@@ -253,7 +252,7 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)

-- [ ] **Funciones (params, args, return)** +- [✔] **Funciones (params, args, return)**
Links

@@ -263,14 +262,14 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

-- [ ] **Pruebas unitarias (unit tests)** +- [✔] **Pruebas unitarias (unit tests)**
Links

* [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)

-- [ ] **Módulos de ECMAScript (ES Modules)** +- [✔] **Módulos de ECMAScript (ES Modules)**
Links

@@ -278,48 +277,65 @@ Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas: * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)

-- [ ] **Uso de linter (ESLINT)** +- [✔] **Uso de linter (ESLINT)** -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +- [✔] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +- [✔] **Diferenciar entre expresiones (expressions) y sentencias (statements)** ### Control de Versiones (Git y GitHub) -- [ ] **Git: Instalación y configuración** +- [✔] **Git: Instalación y configuración** -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +- [✔] **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)** +- [✔] **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: Creación de cuenta y repos, configuración de llaves SSH** -- [ ] **GitHub: Despliegue con GitHub Pages** +- [✔] **GitHub: Despliegue con GitHub Pages**
Links

* [Sitio oficial de GitHub Pages](https://pages.github.com/)

-- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +- [✔] **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ñ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** +- [✔] **Crear prototipos de alta fidelidad que incluyan interacciones** + +- [✔] **Seguir los principios básicos de diseño visual** + + +## 7. Resultado del proyecto + +**7.1 Interacción del usuario con la página:** + +El objetivo principal del usuario es la de poder visualizar las 20 películas producidas por Studios Ghibli por lo que contendrá las diguientes funciones; + +* Visualización de las portadas de las películas con sus respectivos nombres. +* Filtro de películas por productores +* Ordenado de películas de forma ascendente y descendente. +* Datos estadísticos en formato de Datos curiosos acerca de las películas. + +Secuencia de uso de la interfaz; + + - Al ingresar a la página web, se deberá visualizar todas las portadas de las películas con sus respectivos nombres. + - Si el usuario desea solamente conocer las películas producidas por un determinado productor, podrá filtrarlas haciendo click en el botón de "Producers" la cual mostrará una lista desplegable donde se visualizará todos los productores a elegir o ingresar el nombre del film en el buscador. + - Si el usuario desea poder ordenar de forma ascendente o descente las películas, podrá hacerlo haciendo click en el botón de "Order". + - Si el usuario desea conocer algunas curiosidades acerca de la película, podrá hacerlo haciendo click en "Curiositis". + +**7.2 Interacción visual del usuario con la página:** +La página web deberá ser amigable a la percepción visual del usuario, por lo que se optó en; + +* Usar una paleta de colores neutros para no causar conflicto con los poster coloridos de las películas. +* Se hizo responsive para múltiples dispositivos. -- [ ] **Seguir los principios básicos de diseño visual** - -#### Diseño de experiencia de usuario (User Experience Design) -* Investigación con usuarios -* Principios de diseño visual +** Link de página:** -#### Herramientas -* [Git](https://git-scm.com/) -* [GitHub](https://github.com/) -* [GitHub Pages](https://pages.github.com/) -* [Node.js](https://nodejs.org/) -* [Jest](https://jestjs.io/) diff --git a/src/data.js b/src/data.js index 8b0d89ca..65ef72a9 100644 --- a/src/data.js +++ b/src/data.js @@ -44,7 +44,6 @@ export const getFilmsByTitle = { }; export const getFilmsInOrder = (order) => { - console.log(order); const orderedFilms = ghibli.films.slice(); orderedFilms.sort((a,b) => { const titleA = a.title.toUpperCase(); diff --git a/src/img/baja_fidelidad.png b/src/img/baja_fidelidad.png new file mode 100644 index 00000000..1c0d1a6b Binary files /dev/null and b/src/img/baja_fidelidad.png differ diff --git a/src/img/figma_escritorio.png b/src/img/figma_escritorio.png new file mode 100644 index 00000000..fde988bb Binary files /dev/null and b/src/img/figma_escritorio.png differ diff --git a/src/img/img_papelylapiz.jpg b/src/img/img_papelylapiz.jpg new file mode 100644 index 00000000..5b0d0eed Binary files /dev/null and b/src/img/img_papelylapiz.jpg differ diff --git a/src/img/portada.png b/src/img/portada.png new file mode 100644 index 00000000..9c5f9603 Binary files /dev/null and b/src/img/portada.png differ diff --git a/src/img/prototipo_movil.png b/src/img/prototipo_movil.png new file mode 100644 index 00000000..b579efbb Binary files /dev/null and b/src/img/prototipo_movil.png differ diff --git a/src/index.html b/src/index.html index 8b703a9f..673053a6 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,7 @@ - + Ghibli Dreams (Data Lovers) diff --git a/src/main.js b/src/main.js index 989ffe16..05c802b4 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ -import { getFilmsData, getFilmsByProducer, getFilmsByTitle, getFilmsInOrder,computeStats } from './data.js'; +import { getFilmsData, getFilmsByProducer, getFilmsByTitle, getFilmsInOrder, computeStats } from './data.js'; // declaración de variable que muestra el array de películas al cargar en DOM const filmsData = getFilmsData(); -loadInitialData() +loadInitialData(); const selectProducer = document.getElementById('selectProducer'); selectProducer.addEventListener('change', (event) => { @@ -66,7 +66,6 @@ function displayFilms(films) { const selectOrder = document.getElementById('selectOrder'); selectOrder.addEventListener('change', (event) => { const orderedTitles = event.target.value; - console.log(orderedTitles); const orderedFilms = getFilmsInOrder(orderedTitles); document.getElementById("root").textContent = ""; diff --git a/src/style.css b/src/style.css index 39ea0a7e..0ddc74a2 100644 --- a/src/style.css +++ b/src/style.css @@ -6,6 +6,8 @@ body { background-color: #eee; font-family: 'Outfit', sans-serif; font-family: 'Roboto', sans-serif; + margin-bottom: 50px; + padding-bottom: 10px; } /*header*/ .banner{ @@ -152,7 +154,9 @@ footer { display: flex; justify-content: center; flex-wrap: wrap; - letter-spacing: 5px; + margin-top: 3px; + margin-bottom: 3px; + text-align: center; color: rgb(245, 241, 241); } @media (max-width:750px) { diff --git a/test/data.spec.js b/test/data.spec.js index 64fd7307..b1243404 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,4 +1,4 @@ -import { getFilmsByTitle,computeStats } from '../src/data.js'; +import { getFilmsByTitle, computeStats, getFilmsData, getFilmsByProducer, getFilmsInOrder } from '../src/data.js'; const data = [ { @@ -66,15 +66,15 @@ const data = [ }, ]; -describe('getFilmsByTitle', ()=> { +describe('getFilmsByTitle', () => { it('debería ser un objeto', () => { expect(typeof getFilmsByTitle).toBe('object'); }); - describe('byNameFilms', ()=> { + describe('byNameFilms', () => { - it ('deberia ser function', ()=>{ + it('deberia ser function', () => { expect(typeof getFilmsByTitle.byNameFilms).toBe('function'); }) @@ -130,14 +130,11 @@ describe('getFilmsByTitle', ()=> { ]; expect(getFilmsByTitle.byNameFilms(data, "My")).toStrictEqual(expectedResult); }); - }); - }); - -describe('computeStats', ()=> { - it('debería ser un function', () => { +describe('computeStats', () => { + it('debería ser una function', () => { expect(typeof computeStats).toBe('function'); }); @@ -150,11 +147,70 @@ describe('computeStats', ()=> { ratingAbove89: '67%', ratingBelow90: '33%', } - expect(computeStats(data)).toEqual(expectedResult); }); }); +describe('Test para la funcion getFilmsData', () => { + it('Es una funcion que trae los valores especificados', () => { + expect(typeof getFilmsData).toBe('function'); + }); + + it('la funcion getFilmsData Debe devolver un arreglo de objetos con datos de películas', () => { + const filmsData = { + "title": "Castle in the Sky", + "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.", + "director": "Hayao Miyazaki", + "producer": "Isao Takahata", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c1/Castle_in_the_Sky.jpg", + "release_date": "1986" + }; + expect(getFilmsData()).toEqual(expect.arrayContaining([expect.objectContaining(filmsData)])); + }); +}); + +describe('getFilmsByProducer', () => { + it('Es una funcion para filtrar por productores', () => { + expect(typeof getFilmsByProducer).toBe('function'); + }); + + it('La funcion getFilmsByProducer solo debe retornar las peliculas del productor elegido', () => { + const filmsData = { + "title": "Castle in the Sky", + "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.", + "director": "Hayao Miyazaki", + "producer": "Isao Takahata", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c1/Castle_in_the_Sky.jpg", + "release_date": "1986" + }; + expect(getFilmsByProducer("Isao Takahata")).toContainEqual(filmsData); + }); + it('La funcion getFilmsByProducer devuelve un array con las peliculas del productor escogido', () => { + //expect(typeof getFilmsByProducer("Isao Takahata")).toEqual('Array'); + expect(typeof getFilmsByProducer("Isao Takahata")).toEqual('object'); + }); +}); + +describe('getFilmsInOrder', () => { + it('Es una funcion para ordenar alfabeticamente las peliculas', () => { + expect(typeof getFilmsInOrder).toBe('function'); + }); + + it('La funcion getFilmsInOrder debe ordenar las peliculas de la A-Z', () => { + const orderedFilms = getFilmsInOrder("A-Z"); + const titleFirstFilm = orderedFilms[0].title; + const titleLastFilm = orderedFilms[orderedFilms.length - 1].title; + expect(titleFirstFilm).toBe("Castle in the Sky"); + expect(titleLastFilm).toBe("Whisper of the Heart"); + }); + it('La funcion getFilmsInOrder debe ordenar las peliculas de la Z-A', () => { + const orderedFilms = getFilmsInOrder("Z-A"); + const titleFirstFilm = orderedFilms[0].title; + const titleLastFilm = orderedFilms[orderedFilms.length - 1].title; + expect(titleFirstFilm).toBe("Whisper of the Heart"); + expect(titleLastFilm).toBe("Castle in the Sky"); + }); +});