diff --git a/README.md b/README.md index a45b7d5..0057571 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,145 @@ # Data Lovers -## Índice +## índice * [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) +* [2. Definición del producto](#2-definición-del-producto) +* [3. Descripción del producto](#3-descripción-del-producto) +* [4. Historias de usuario](#4-historias-de-usuario) +* [5. Diseño de la interfaz de usuario](#5-diseño-de-la-interfaz-de-usuario) +* [6. Test de usabilidad](#6-test-de-usabilidad) *** ## 1. Preámbulo -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. +Studio Ghibli es un estudio de animación japonés, conocido por sus largometrajes animados como Mi vecino Totoro, El viaje de Chihiro o El castillo ambulante, entre otros grandes éxitos. -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. +Las animaciones tienen gran acogida a nivel mundial y algunas han recibido varias nominaciones y premios. De todo este fandom hay un grupo que desea poder interactuar y ver la información de las animaciones y sus personajes. -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por las -usuarias, al lado derecho. +

+ +

-![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) +## 2. Definición del producto -## 2. Resumen del proyecto +Después de definir nuestra área de interés creamos un diseño de baja y alta fidelidad que permita presentar las peliculas y sus caracteristicas. Posteriormente se busco definir quienes serían los usuarios interesados y para asegurar que la página responda a sus necesidades (lo que necesite saber o ver) se realizaron entrevistas a potenciales usuarios. Así mismo se diseño la página de tal forma que pueda cumplir con el propósito de mostrar la información de diferentes formas, entre ellas filtrarla, ordenarla y calcular datos. -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. +

+ +

-Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). +## 3. Descripción del producto -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. +Esta página web de películas de Studio Ghibli es un proyecto de Vanilla Javascript, HTML semántico y CSS que muestra una colección de películas de Studio Ghibli. La página carga todas las películas desde una data proporcionada y al seleccionar una película, muestra detalles adicionales sobre la pelicula y sus personajes. -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. +Características: + - Lista de todas las películas de Studio Ghibli en la página principal + - Filtra las películas por año y productor + - Ordena las películas de A-Z, por año y puntaje + - Al seleccionar una película, se muestra información detallada en una segunda página + - La información detallada incluye el título, año de lanzamiento, director, productor, puntaje y una sinopsis breve + - La información detallada también incluye una lista de personajes, su nombre, edad y genero -Estos son datos que te proponemos: +Tecnologías utilizadas: + - HTML Semántico + - CSS + - Vanilla JavaScript + - Git + - Jest -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) +Público objetivo: -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) +La página web está dirigida a un público amplio, que incluye tanto a niños como a adultos. Aunque algunas de las películas pueden parecer más adecuadas para un público joven, la mayoría de las obras de Studio Ghibli contienen elementos que pueden ser disfrutados por todas las edades. -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) +Requerimientos para utilizar la página web: -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) + - Un dispositivo con conexión a internet: esto puede ser un computador, tablet o celular + - Un navegador web: Google Chrome, Mozilla Firefox, Safari o Microsoft Edge + - La dirección URL de la página web + +Como utilizar la página web -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) + - Acceda a la página web:

Esta es Página web

+ - Explorar el contenido: una vez que haya accedido a la página web, puede explorar su contenido y buscar información sobre las películas -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/README.md) -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. +## 4. Historias de usuario -## 3. Objetivos de aprendizaje +Antes de comenzar a desarrollar la página web, se realizó una encuesta a un grupo de futuros usuarios con la finalidad de saber sobre el tipo de información que quisieran encontrar en una página web de un sitio de películas y de qué forma les gustaría, en cuanto a funcionalidad, que fuera la página. -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. +Se recopilaron las siguientes Historias de Usuario: -### HTML +### Historia de usuario 1 +Quiero : Que la página sea responsiva. +Para : Poder revisarlo en diferentes dispositivos. +Beneficios : Poder acceder a la información de manera cómoda. -- [ ] **Uso de HTML semántico** +- [ ] **Criterios de aceptación** -
Links

+### Historia de usuario 2 +Quiero : Visualizar la descripción de la película (titulo, año de estreno, score). +Para : Saber si la película puede ser de mi agrado. +Beneficios : Tener mayor facilidad para escoger una película. - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

+- [ ] **Criterios de aceptación** +Mostrar información detallada de la película. -### CSS +### Historia de usuario 3 +Quiero : Quiero que la página tenga una opción de ordenar las películas (alfabeticamente y score) y filtrar (productor y año). +Para : Que sea más fácil encontrar alguna película. +Beneficios : Comodidad para el usuario. -- [ ] **Uso de selectores de CSS** +- [ ] **Criterios de aceptación** +Las cards se ordenen alfabéticamente o por año. -
Links

+### Historia de usuario 4 +Quiero que al seleccionar una tarjeta se me muestre una segunda pantalla donde se muestra descripción completa y personajes. +Para : Saber si la película puede ser de mi agrado. +Beneficios : Tener mayor facilidad para escoger una película. - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

+- [ ] **Criterios de aceptación** +Mostrar información detallada de la película. -- [ ] **Modelo de caja (box model): borde, margen, padding** +### Historia de usuario 5 +Quiero : Que las películas muestren la cantidad de personajes humanos y no humanos y cantidad por género. +Para : Saber más sobre los personajes de la película . +Beneficios : Conocer más fácilmente sobre los personajes de las películas. -
Links

+- [ ] **Criterios de aceptación** +Se muestre cantidad de personajes segun su especie y cantidad por género. - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

+Posteriormente se solicitaron test de usabilidad a algunos usuarios para corroborar el correcto funcionamiento de la página. -- [ ] **Uso de flexbox en CSS** +## 4. Diseño de la interfaz de usuario -
Links

+ ### Diseños de baja fidelidad - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

+ ![Diseño de baja fidelidad 1](/diseños/diseño_baja_fidelidad/baja_fidelidad_uno.PNG) -### Web APIs + ![Diseño de baja fidelidad 2](/diseños/diseño_baja_fidelidad/baja_fidelidad_dos.PNG) -- [ ] **Uso de selectores del DOM** + ![Diseño en celular](/diseños/diseño_baja_fidelidad/baja_fidelidad_celular.PNG) -
Links

+ ### Diseños de alta fidelidad - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

+ ![Diseño de alta fidelidad, primera página web](/diseños/diseño_alta_fidelidad/pagina1_web.png) -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** + ![Diseño de alta fidelidad, segunda página web](/diseños/diseño_alta_fidelidad/pagina2_web.png) -
Links

+ ![Diseño de alta fidelidad, primera página celular](/diseños/diseño_alta_fidelidad/pagina1_iphone.png) - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

+ ![Diseño de alta fidelidad, segunda página celular](/diseños/diseño_alta_fidelidad/pagina2_iphone.png) -- [ ] **Manipulación dinámica del DOM** + +## 5. Test de usabilidad -
Links

+Se realizaron test de usabilidad para saber la opinion de usuarios sobre el uso de la página, obteniendo los siguientes resultados: - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

+ - Se nos solicitó que se pudiera volver a la página principal a través del logo principal. -### JavaScript + - Se nos solicito que se corrija el diseño de la página para que sea responsivo en dispositivos con diferentes tamaños y que el logo principal sea más pequeño. También se nos pidió que la forma en que se entrega la descripción de la película se adapte de otra forma, ya que no les permitía leerlo facilmente. -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** + - Se nos solicitó que en el diseño movil el menú se viera ordenado de forma apilada. -- [ ] **Arrays (arreglos)** - -
Links

- - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

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

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

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

- - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

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

- - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [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)** - -
Links

- - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

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

- - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

- -- [ ] **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)** - -
Links

- - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

- -- [ ] **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

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

- -- [ ] **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 - -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** - -
Links

- - * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) - * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) -

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### 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](https://www.figma.com/) 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](#srcdatajs). - -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del 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](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 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](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `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: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -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_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -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 ` - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2..405d410 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,236 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; +import { filterMovies, sortData, filtrarPro, sortNum } from './data.js'; +import data from './data/ghibli/ghibli.js'; -console.log(example, data); +const header = document.querySelector("header"); +header.innerHTML="" +header.innerHTML= ` +
+
+ +
+
+ +
+
+ +
+
` +function crearTarjetas(peliculas){ + const container = document.querySelector("section"); + container.innerHTML = ""; + peliculas.forEach(pelicula => + container.innerHTML += ` +
+
+ Imagen de la película +
+
+
${pelicula.title}
+ Año: ${pelicula.release_date} + Productor: ${pelicula.producer} + Score: ${pelicula.rt_score} + +
+
+ ` + ); +} +crearTarjetas(data.films); +//Función para ordenar datos +const elemento = document.querySelector(".seleccionar"); +elemento.addEventListener("change", (event) => { + const datasort = sortData(data.films, event.target.value); + if(event.target.value === "alfabeticamente") { + return crearTarjetas(datasort); + } else if (event.target.value === "año") { + return crearTarjetas(sortNum(data.films, event.target.value)); + } else if (event.target.value === "puntaje") { + return crearTarjetas(sortNum(data.films, event.target.value)); + } +}); +// Función para filtrar +const seleccionar = document.querySelector(".selection-option"); +seleccionar.addEventListener("change", (event) => { + const productor = filtrarPro(data.films, event.target.value); + const peliculaAño = filterMovies(data.films, event.target.value); + if(event.target.value === "todas") { + crearTarjetas(data.films); + } else if (peliculaAño.length === 0) { + crearTarjetas(productor); + } + else { + crearTarjetas(peliculaAño); + } +}); +//Función para buscar +const search = document.querySelector(".b-busqueda"); +const result = document.querySelector("section") +const filtrar = () => { + result.innerHTML =""; + const text = search.value.toLowerCase(); + for (const film of data.films){ + const title = film.title.toLowerCase(); + if(title.indexOf(text) !== -1){ + result.innerHTML += ` +
+
+ Imagen de la película +
+
+
${film.title}
+ Año: ${film.release_date} + Productor: ${film.producer} + Score: ${film.rt_score} + +
+
+ ` + } + } + if(result.innerHTML === ""){ + result.innerHTML = "Pelicula no encontrada"; + } +} +search.addEventListener("keyup", filtrar); + + + +//Segunda pagina + +const masInfo = document.querySelectorAll(".button-info"); +const container = document.querySelector("section"); +const headerPag2 = document.querySelector("header") +for(const info of masInfo) { + info.addEventListener("click", (event) => { + const resultado = data.films.find(elemento => elemento.id === event.target.dataset.id); + + + headerPag2.innerHTML= ` + + + +` + container.innerHTML = ""; + container.innerHTML +=` +
+ + Volver a peliculas + + +
+ ` + container.innerHTML +=` +
+
+ Imagen de la película +
+
+ Nombre: ${resultado.title} + Año: ${resultado.release_date} + Director: ${resultado.director} + Productor: ${resultado.producer} + Puntaje: ${resultado.rt_score} + Descripción: ${resultado.description} +
+
` + resultado.people.forEach(elemento => { + container.innerHTML+= + ` +
+
+
+ Imagen del personaje +
+
+ Nombre: ${elemento.name} + Edad: ${elemento.age} + Especie: ${elemento.specie} +
+
+
` + }); + + const bestadistic = document.querySelector(".estadistic"); + const modal = document.getElementById("ventanaModal"); + const closeButton = document.querySelector(".close"); + const peopleInfo = document.querySelector(".people-info"); + let female = 0; + let male = 0; + let other = 0; + let animal = 0; + let human = 0; + for(const i of resultado.people){ + if (i.gender === "Female"){ + female += 1; + } else if (i.gender === "Male"){ + male += 1; + } else { + other += 1; + } if (i.specie === "Human"){ + human += 1; + } else { + animal +=1; + } + } + bestadistic.addEventListener("click", function (){ + modal.style.display = "block"; + closeButton.addEventListener("click", function(){ + modal.style.display = "none"; + }); + window.addEventListener("click", function (event) { + if (event.target === modal){ + modal.style.display = "none"; + } + }); + peopleInfo.innerHTML = ("En esta película hay:
"+ "" +human + " humanos, "+ animal +" animales"+ + "

Visto de otra forma:
" +female+" son mujeres, "+male+" son hombres y "+other+" son de otro genero"); + }); + }); +} diff --git a/src/style.css b/src/style.css index e69de29..98fff7b 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,562 @@ +/*Paleta de colores +bordes, header, footer = #49a4e1 +card = #2F7BAD +borde de card= #1F5273 +fondo y barra busqueda = #F7F8F7*/ + +body{ + margin: 0px; + padding: 0px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + display: flex; + flex-wrap: wrap; + overflow-x: hidden; +} + +main{ + width: 100vw; + height: 100vh; + display: block; +} + +header{ + display: flex; + flex-direction: column; + background-color: #49a4e1; + height: 180px; + width: 100%; +} + +.logo{ + padding-top: 10px; + display: flex; + background-color: #49a4e1; + width: 100%; + height: 140px; +} + +a{ + margin-left: auto; + margin-right: auto; + +} + +img{ + display: flex; + width:290px; + height:140px; + margin-left: auto; + margin-right: auto; +} + +.barra{ + display: flex; + background-color: #49a4e1; + width: 100%; + height: 40px; + font-size:1.5em; + vertical-align: middle; +} + +.buscar{ + text-align: center; + background-color: #49a4e1; + width: 33.3vw; + height: 40px; +} + +.b-busqueda{ + padding: 0px; + text-align: center; + width: 150px; + height: 20px; + background-color: white; + border:0px; + border-radius: 8px; +} + +.filtro{ + text-align: center; + background-color: #49a4e1; + width: 33.3vw; + height: 40px; +} + +select{ + text-align: center; + background-color: white; + border-radius: 8px; + border: 0px; + height: 20px; + width: 150px; +} + +.orden{ + background-color: #49a4e1; + width: 33.3vw; + margin-top: 2px; +} + +section{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.card { + display: flex; + flex-direction: column; + background-color: #2F7BAD; + border-style: solid; + border-color: #1F5273; + border-width: 1px; + color: #fff; + position: relative; + overflow: hidden; + margin: 1.5%; + flex: auto; + max-height: 460px; + max-width: 200px; +} + +.card-body-img{ + display: flex; + overflow: hidden; + height: 300px; +} + +.poster { + width: auto; + height: auto; +} + +.card-body-text { + display: flex; + height: 160px; + width: 100%; + flex-direction: column; +} + +.card-title { + font-size: 17px; + margin: 5px; +} + +.card-body-text span { + font-size: 14px; + margin-left: 5px; +} + +.button-info { + display: absolute; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; + margin-top: auto; + border-radius: 4px; + border: 0px; + width: 130px; + transition: background-color .1s; +} + +.button:hover { + background-color: rgb(204, 204, 204); +} + +/* Borde de la Pagina */ +#top, #bottom, #left, #right { + background: #49a4e1; + position: fixed; +} + +#left, #right{ + top: 0px; + bottom: 0px; + width: 10px; +} + +#left { + left: 0; +} + +#right { + right: 0; +} + +#top, #bottom { + left: 0; + right: 0; + height: 10px; +} + +#top { + top: 0; +} + +#bottom { + bottom: 0; +} + +/*diseño pagina 2*/ +.buttons-up{ + display: flex; + flex-direction: row; + width: 100%; +} + +.home{ + display: flex; + margin-left: 0px; + height: 100%; + width: 50%; +} + +.backarrow{ + display: flex; + padding-top: 10px; + margin-left: 30px; + width: 50px; + height: 50px; +} + +.estadistic{ + margin-top: 10px; + height: 50px; + width: 50px; + margin-right: 35px; + border-radius: 50%; + background-color: black; + color: #fff; + font-weight:600; + text-align-last: center; + border-style: solid; + border-color: black; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + padding-top: 200px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0, 0.8); + +} +.modal-content{ + border-radius: 20px; + position: relative; + background-color: #49a4e1; + + margin: auto; + padding: 20px; + width: 60%; +} + +.people-info{ + color: #fff; +} + +.close{ + color: rgb(0, 0, 0); + float: right; + font-size: 30px; + font-weight: bold; +} + +.close:hover, .close:focus{ + color: rgb(0, 0, 0); + text-decoration: none; + cursor: pointer; +} + +.card-info{ + padding-left: 200px; + padding-right: 200px;; + display: flex; + color: rgb(0, 0, 0); + position: relative; + overflow: hidden; + margin-top: 15px; + margin-bottom: 50px; + + height: 50%; + width: 100vw; +} + +.card-body-img2{ + display: flex; + overflow: hidden; + min-width: 30%; + width: 290px; + height: 300px; +} + + +.card-body-text2{ + text-align: justify; + margin-left: 15px; + display: flex; + height: 160px; + width: auto; + flex-direction: column; +} + +.card-people{ + padding: 30px; + display: flex; + flex-wrap: wrap; + position: relative; + overflow: hidden; + margin: 8px; + height: 45%; +} + +.c-people{ + + display: flex; + flex-direction: column; + background-color: #2F7BAD; + border-style: solid; + border-color: #1F5273; + border-width: 1px; + color: #fff; + position: relative; + overflow: hidden; + flex: auto; + max-height: 350px; + max-width: 180px; +} + +.p-people{ + + display: flex; + width:290px; + height:200px; +} + +.card-body-img3{ + display: flex; + overflow: hidden; + height: 200px; +} + +.card-body-text3{ + margin-top: 3px; + display: flex; + height: 125px; + width: 100%; + flex-direction: column; +} + +.card-body-text3 span{ + text-align: left; + line-height: 20px; + margin-left: 7px; + margin-right: 7px; +} + +/*media pagina 1*/ +@media(max-width: 480px) { + .source { + margin-left: auto; + margin-right: auto; + } + + img{ + width:200px; + height:70px; + } + + .logo { + width:100%; + height:80px; + } + + .barra{ + display: flex; + margin: auto; + background-color: #49a4e1; + width: 100vw; + height: 80px; + font-size:1em; + align-items: center; + flex-direction: column; + } + + .buscar{ + background-color: #49a4e1; + width: 33%; + border-radius: 8px; + } + + .b-busqueda{ + text-align: center; + padding: 0px; + border-radius: 8px; + margin-bottom: 1px; + margin-left: auto; + margin-top: 0px; + width: 150px; + height: 20px; + } + + select{ + text-align: center; + margin-bottom: 1px; + background-color: white; + border-radius: 8px; + border: 0px; + height: 20px; + width: 150px; + } + } + + /*media pagina 2*/ +@media(max-width: 480px) { + header{ + height: auto; + } + + .source { + margin-left: auto; + margin-right: auto; + } + + img{ + width:200px; + height:70px; + } + + .logo { + width:100%; + height:80px; + } + + .home{ + display: flex; + margin-top: 10px; + margin-left: 0px; + height: 5%; + } + + .backarrow{ + display: flex; + width: 30px; + height: 30px; + } + + .estadistic{ + display: flex; + height: 32px; + width: 32px; + margin-top: 20px; + margin-right: 30px; + font-weight:700; + font-size: 8.5px; + text-align: left; + border-style: solid; + border-color: black; + } + + .card-info{ + padding-left: 30px; + padding-right: 30px;; + display: flex; + color: rgb(0, 0, 0); + position: relative; + overflow: hidden; + margin-top: 15px; + margin-bottom: 30px; + height: 50%; + width: 100vw; + flex-wrap: wrap; + } + + .card-body-img2{ + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + display: flex; + overflow: hidden; + width: 290px; + height: 300px; + } + + .card-body-text2{ + align-items: center; + margin-left: 0; + display: flex; + flex-direction: column; + height: auto; + width: auto; + } + + .card-title{ + text-align: center; + flex-direction: column; + display: flex; + font-size: 15px; + } + + .card-people{ + padding-top: 0; + margin-left: auto; + margin-right: auto; + padding-bottom: 20px; + display: flex; + flex-wrap: wrap; + position: relative; + overflow: hidden; + height: 45%; + + } + + .c-people{ + + display: flex; + flex-direction: column; + background-color: #2F7BAD; + border-style: solid; + border-color: #1F5273; + border-width: 1px; + color: #fff; + position: relative; + overflow: hidden; + flex: auto; + max-height: 350px; + max-width: 180px; + } + + .p-people{ + + display: flex; + width:290px; + height:200px; + } + + .card-body-img3{ + display: flex; + overflow: hidden; + height: 200px; + } + + .card-body-text3{ + margin-top: 3px; + display: flex; + height: 125px; + width: 100%; + flex-direction: column; + } + + .card-body-text3 span{ + text-align: left; + line-height: 20px; + margin-left: 7px; + margin-right: 7px; + } +} diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23..dc31652 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,85 @@ -import { example, anotherExample } from '../src/data.js'; +import { filterMovies, filtrarPro, sortData, sortNum} from '../src/data.js'; +import { datatitle } from './mockData.js'; +// filterMovies, permite filtrar las películas según el año -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe('Probar si filterMovies es una función', () => { + it('filterMovies debería ser una función', () => { + expect(typeof filterMovies).toBe('function'); }); - - it('returns `example`', () => { - expect(example()).toBe('example'); + it('Debería retornar "Castle in the Sky" para "1986"', () => { + expect(filterMovies(datatitle.films,"1986")).toContainEqual(datatitle.films[0]); + }); + it('Debería retornar "My neighbor Totoro" para "1988"', () => { + expect(filterMovies(datatitle.films,"1988")).toContainEqual(datatitle.films[1]); }); + }); +//Funcion filtrarPro, permite filtrar las peliculas según el productor + +describe('Probar si filtrarPro es una función', () => { + it('filtrarPro debería ser una función', () => { + expect(typeof filtrarPro).toBe('function'); + }); + + it('Debe retornar "Castle in the Sky" para "Isao Takahata"', () => { + expect(filtrarPro(datatitle.films,'Isao Takahata')).toContainEqual(datatitle.films[0]); + }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + it('Debería retornar "My Neighbor Totoro" para "Hayao Miyazaki"', () => { + expect(filtrarPro(datatitle.films, 'Hayao Miyazaki')).toContainEqual(datatitle.films[1]); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +}); + + +//Funcion sortData permite ordenar alfabeticamente + +describe('Probar que sortData permite ordenar las peliculas alfabeticamente', () => { + + it('sortData es una función', () => { + expect(typeof sortData).toBe('function'); }); + + + it('Debe ordenar las películas alfabeticamente', () => { + const ordenAlfabetico = sortData(datatitle.films) + + expect(ordenAlfabetico[0].title).toMatch("Castle in the Sky"); + expect(ordenAlfabetico[1].title).toMatch("Kiki's Delivery Service"); + expect(ordenAlfabetico[2].title).toMatch("My Neighbor Totoro"); + expect(ordenAlfabetico[3].title).toMatch("My Neighbor Totoro"); + + }); + + it("Debería retornar igual cuando los titulos se repitan", () => { + expect(sortData(datatitle.films)).toEqual(datatitle.films); + }) + }); + +//Funcion sortNum + +describe('Probar que sortNum permite ordenar las peliculas segun el año', () => { + + it('sortNum debería ser una función', () => { + expect(typeof sortNum).toBe('function'); + }); + + it('Debe ordenar las películas de menor a mayor', () => { + + expect(sortNum(datatitle.films, 'release_date')).toContainEqual(datatitle.films[0, 1, 2, 3]); + expect(sortNum(datatitle.films, 'rt_score')).toContainEqual(datatitle.films[1, 2, 0, 3]); + + }); + + it("Debería ordenar por puntaje", () => { + expect(sortNum(datatitle.films,'puntaje')).toEqual(datatitle.films); + }) + + it("Debería ordenar por año ", () => { + expect(sortNum(datatitle.films,'año')).toEqual(datatitle.films); + }) + +}) diff --git a/test/mockData.js b/test/mockData.js new file mode 100644 index 0000000..2a54838 --- /dev/null +++ b/test/mockData.js @@ -0,0 +1,32 @@ +export const datatitle = { + "studio": "Studio Ghibli Inc.", + "films": [ + { + "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe", + "title": "Castle in the Sky", + "producer": "Isao Takahata", + "release_date": "1986", + "rt_score": "95" + }, + { + "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49", + "title": "My Neighbor Totoro", + "producer": "Hayao Miyazaki", + "release_date": "1988", + "rt_score": "93" + }, + { + "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49", + "title": "My Neighbor Totoro", + "producer": "Hayao Miyazaki", + "release_date": "1988", + "rt_score": "93" + }, + { + "id": "ea660b10-85c4-4ae3-8a5f-41cea3648e3e", + "title": "Kiki's Delivery Service", + "producer": "Hayao Miyazaki", + "release_date": "1989", + "rt_score": "96" + } + ]} \ No newline at end of file