diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index e2a913eb..192b7043 100644 --- a/README.md +++ b/README.md @@ -2,614 +2,160 @@ ## Í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) - -*** +- [1. Preámbulo](#1-preámbulo) +- [2. Resumen del proyecto](#2-resumen-del-proyecto) +- [3. Metodología de trabajo](#3-metodología-de-trabajo) +- [4. Actualización ](#4-actualización) -## 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. - -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_. - -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. Resumen del proyecto - -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). - -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. - -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. - -Estos son datos que te proponemos: - -* [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) - -* [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) - -* [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) - -* [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) - -* [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) - -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. - -## 3. 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 - -- [ ] **Uso de HTML semántico** - -
Links

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

- -### CSS - -- [ ] **Uso de selectores de CSS** - -
Links

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

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

- - * [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/) -

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

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

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

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

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

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

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

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

- -### JavaScript - -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **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) -

+## 1. Preámbulo -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +

¡Bienvenidos al mundo Ghibli!

-
Links

+![](https://i.pinimg.com/originals/da/07/f0/da07f06bb1634c3065cc832fcbbaae54.jpg) - * [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) -

+¿Sabías qué? Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes y 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. -- [ ] **Uso de bucles/ciclos (while, for, for..of)** +Hoy te presentamos este sitio que está dedicado a todos los amantes de las películas de Studio Ghibli, donde podrán disfrutar de una amplia gama de información, noticia y contenido multimedia relacionado con las películas del estudio. Desde los mundos mágicos y maravillosos de "El viaje de Chihiro" y "Mi vecino Totoro" hasta los relatos conmovedores y emocionales de "La tumba de las luciérnagas" y "El viento se levanta", Studio Ghibli ha dejado una huella indeleble en el mundo del cine y la cultura popular. -
Links

+##### Esperamos que disfruten su visita y que esta sea el comienzo de una emocionante aventura en el mundo de Ghibli. ¡Bienvenidos al mundo de la magia y la creatividad! - * [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) -

+## 2. Resumen del proyecto -- [ ] **Funciones (params, args, return)** +El 15 de Junio de 1985 se fundó el estudio japonés de animación **Studio Ghibli**,el cual es conocido por sus largometrajes y cortometrajes animados que lo han llevado a ser conocido como uno de los mejores estudios de animación del mundo, siendo nominados y ganadores de un sinfin de galardones, incluyendo los famosos premios Oscar. -
Links

+El presente proyecto se formó con la idea de traer al usuario información útil, llamativa y fácil de comprender a los usuarios, ya sea que estos tengan o no conocimiento de la existencia del estudio. - * [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) -

+Para lo anterior se ha desarrollado una página web de almacenamiento de datos que incluye las películas producidas por el estudio, detallando su argumento principal, principales personajes, locaciones y vehículos. En esta interfaz, el usuario podrá buscar y encontrar las películas de manera azarosa u ordenada de la A-Z, de la Z-A , considerando como principales criterios de filtro el año de lanzamiento, director, productor o puntaje. -- [ ] **Pruebas unitarias (unit tests)** +![](https://img.europapress.es/fotoweb/fotonoticia_20140804175156-634869_600.jpg) -
Links

+## 3. Metodología de trabajo - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

+##### Repositorio -- [ ] **Módulos de ECMAScript (ES Modules)** +El proyecto de desarrollo web se basa en la información almacenada en un archivo `JSON`, la interfaz y estética se realizaron a través de la edición de archivo `HTML`y`CSS` y la funcionalidad se dió a través del lenguaje `Javascript`. -
Links

+Todo esto se implementó en un repositorio de Github para trabajar de manera colaborativa. - * [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) -

+_Es importante considerar que dentro de la planificación se consideró No usar ningún tipo de librería o framework en el desarrollo_ -- [ ] **Uso de linter (ESLINT)** +#### Planificación -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +Se utilizó la plataformar Trello para Planificar la realización del trabajo, para esto se dividió el tablero en tareas a realizar, metas y tareas realizadas por Sprint, considerando la durabilidad de cada Sprint en periodos de 1 semana. -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +Cabe destacar que todo esto se basó en un backlog de usuario por lo que el primer paso a realizar fue la creación de un formulario con el objetivo de tener una idea de qué tan conocido es el estudio y cuáles son las películas más nombradas por el público. -### Control de Versiones (Git y GitHub) +#### Historias de Usuario -- [ ] **Git: Instalación y configuración** +Una vez recolectadas las respuestas del formulario, se procedió a establecer las principales historias de usuario del proyecto las cuales fueron: -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +1. Creación de la página y definicón de estilos: + Se consultó a los usuarios la necesidad de tener una página con las características mencionadas anteriormente y se pidieron sugerencias de funcionalidad y datos que se creyeran útil. -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** +![](https://i.postimg.cc/FRZKjbp8/Funcionalidades.jpg) -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +> Respuestas asociadas a la información que el usuario gustaría ver en la página. -- [ ] **GitHub: Despliegue con GitHub Pages** +Luego de esto se comenzó a dar estructura al proyecto a través del archivo HTML y estilos a través del archivo CSS. +Los usuarios tuvieron oportunidad de ver la base y sugirieron cambiar algunas tonalidades de la paleta de colores para que sea más agradable a la vista . -
Links

+2. Despliegue de las películas más conocidas en el menú de inicio. - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

+Se consultó a través del formulario cuál era la primera película en la que pensaban al mencionar los estudios Ghibli . +Las respuestas recopiladas se utilizaron para posteriormente filtrar la data y desplegar la imagen del Poster promocional de las 5 películas más nombradas junto a su descripción. -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +Las películas más mencionadas fueron: -### Centrado en el usuario +- Mi vecino Totoro (My neighbord Totoro) +- La Princesa Mononoke (Princess Mononoke) +- El Viaje de Chihiro (Spirited away) +- El castilo ambulante (Howl´s Moving castle) +- Ponyo la sirenita (Ponyo on the cliff by the sea) -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** +![](https://i.postimg.cc/FRg4M9JL/Grafico-Peliculas.jpg) -### Diseño de producto +> Resultado de las películas más nombradas en el formulario -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** +3. Despliegue de todas las películas -- [ ] **Seguir los principios básicos de diseño visual** +Debido a que los usuarios solicitaron poder averiguar la información general de cada una de las películas, se generó un menú en que se despliegue el poster de cada una de las películas del estudio Ghibli. Para hace más fácil la elección de la película a investigar, se decidió crear un botón de búsqueda por carácteres, uno para filtar las películas por cada uno de los directores del estudio y un botón para ordenar la data en orden alfabético, cronológicamente y según la puntuación recibida por la plataforma Rotten tomatoes. -### Investigación +4. Despliegue individual de cada película -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** +Se creó un menú de despliegue de todas las películas para que el usuario pueda conocer la información general de cada una. +Considerando que una de las opciones más votadas al momento de sugerir funcionalidad fue la de información general, se despliega una ventana modal en la que el usuario puede ver el título, reseña, año de lanzamiento , director y productor de cada película junto con tarjetas de los principales personajes de cada una de las películas. -
Links

+5. ¿Dónde puedo ver las películas del estudio Ghibli? - * [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) -

+Para que el usuario tenga la información de las plataformas en las que pueden ver las películas se agregó las redes sociales del estudio Ghibli al pie de página y, además, se agregó alguna información en la sección de noticias. -## 4. Consideraciones generales +##### Prototipos -* 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/). +En base a los resultados del formulario y las historias de usuario se decidió comenzar a crear la parte visual del proyecto, generando un prototipo de **baja fidelidad** en el que se defina la manera en que se responderá a las peticiones de usuario: -## 5. Criterios de aceptación mínimos del proyecto +![](https://i.postimg.cc/Vkq9988V/BF1.jpg) -Los criterios para considerar que has completado este proyecto son: +![](https://i.postimg.cc/qMYDD0WB/BF2.jpg) -### Definición del producto +![](https://i.postimg.cc/5j3BVBnM/BF3.jpg) -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. +![](https://i.postimg.cc/xc1KTX4N/BF4.jpg) -### Historias de usuario +![](https://i.postimg.cc/jL3yWRpg/BF5.jpg) -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. +![](https://i.postimg.cc/Bj8HHdsq/BF6.jpg) -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. +> Bosquejo de prototipo de baja fidelidad realizado en Figma -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). +Una vez realizado el prototipo de baja fidelidad se comenzar a realizar su contraparte de **alta fidelidad** para definir los estilos, tamaños y fuentes a utilizar junto con la funcionalidad que se dará a la página. -### Diseño de la Interfaz de Usuario +![](https://i.postimg.cc/WdFjV7mW/AF1.jpg) -#### Prototipo de baja fidelidad +![](https://i.postimg.cc/nXyxhQ0H/AF2.jpg) -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`. +> Bosquejo de prototipo de alta fidelidad realizado en Figma -#### Prototipo de alta fidelidad +#### Ejecución -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. +Luego de diseñar la interfaz de usuario para su ejecución e implementación, se construye la interfaz muy apegado al diseño de alta fidelidad, priorizando los criterios mínimos para su funcionalidad, que son: -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_. +- Permitir al usuario interactuar para obtener la infomación que necesita de acuerdo a las historias de usuario. +- Ser responsive, es decir, debe visualizarse sin prob(Iphone 12 Pro). +- Funcionalidad que corresponde a obtener, procesar y manipular datos como: Filtrar, ordenar de A-Z y de Z-A, opción de búsqueda. -#### Testeos de usabilidad +**a) Filtrar:** 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. -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. +**b)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. -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) +La interfaz respeta los fundamentos de visual design y tiene consideraciones técnicas como la lógica del proyecto implementada completamente en JavaScript (ES6), HTML y CSS. -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 +![](/src/Images/iphone12.png) +![](/src/Images/iphone12.1.png) +![](/src/Images/iphone12.3.png) -Como mínimo, tu implementación debe: +**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 esta llamada a través de una etiqueta + + + diff --git a/src/audio/Merry-go-round.mp3 b/src/audio/Merry-go-round.mp3 new file mode 100644 index 00000000..f2d88f69 Binary files /dev/null and b/src/audio/Merry-go-round.mp3 differ diff --git a/src/data.js b/src/data.js index 6291453d..61d6f09a 100644 --- a/src/data.js +++ b/src/data.js @@ -1,9 +1,57 @@ -// estas funciones son de ejemplo +import data from "./data/ghibli/ghibli.js"; -export const example = () => { - return 'example'; +const allMovies = document.getElementById("allMovies"); +const gallery = document.getElementById("gallery"); + +//Se llaman películas más vistas al inicio +export const mostViewed = () => { + const allPosters = data.films.filter((movies) => movies.most_viewed); + + const images = allPosters.map(({ poster, title, description }) => { + // creating container + const div = document.createElement("div"); + div.classList.add("gallery__img-container"); + + // creating img + const img = document.createElement("img"); + img.classList.add("gallery__img"); + img.src = poster; + img.alt = title; + div.appendChild(img); + + // creating title + const p = document.createElement("p"); + p.classList.add("gallery__title"); + p.textContent = description; + div.appendChild(p); + + return div; + }); + + for (let i = 0; i < images.length; i++) { + gallery.appendChild(images[i]); + } }; -export const anotherExample = () => { - return 'OMG'; +//Se llaman todas las películas en menú películas +export const movies = () => { + //Llamando la data del objeto + const imagesMovies = data.films.map((item) => { + //Se Crea una etiqueta img que contenga el poster de la película + const img = document.createElement("img"); + img.classList.add("posters"); + img.src = item.poster; + img.alt = item.title; + img.width = 100; + img.heigth = 100; + return img; + }); + imagesMovies.map((image) => allMovies.appendChild(image)); }; +//Al clickear el poster arroja todo el array con sus características +// allMovies.querySelectorAll(".posters").forEach((pelicula) => { +// pelicula.addEventListener("click", (e) => { +// const movieObj = data.films.find((movie) => movie.title === e.target.alt); +// console.log(movieObj); +// }); +// }); diff --git a/src/data/ghibli/ghibli.js b/src/data/ghibli/ghibli.js index 5122d330..03f11808 100644 --- a/src/data/ghibli/ghibli.js +++ b/src/data/ghibli/ghibli.js @@ -212,6 +212,7 @@ export default { "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/d/db/My_Neighbor_Totoro.jpg", "release_date": "1988", "rt_score": "93", + "most_viewed":"3", "people": [ { "id": "986faac6-67e3-4fb8-a9ee-bad077c2e7fe", @@ -997,6 +998,7 @@ export default { "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c6/Princess_Mononoke.jpg", "release_date": "1997", "rt_score": "92", + "most_viewed":"5", "people": [ { "id": "ba924631-068e-4436-b6de-f3283fa848f0", @@ -1205,6 +1207,7 @@ export default { "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/9/9e/Spirited_Away.png", "release_date": "2001", "rt_score": "97", + "most_viewed":"2", "people": [ { "id": "134a568b-ac18-4696-a53e-4f0757d1c037", @@ -1473,6 +1476,7 @@ export default { "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/0/08/Howl%27s_Moving_Castle.jpg", "release_date": "2004", "rt_score": "87", + "most_viewed": "1", "people": [ { "id": "fa9b410f-cad4-457d-ac71-86b0afa6cf0a", @@ -1718,6 +1722,7 @@ export default { "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/5/50/Ponyo_on_the_Cliff_by_the_Sea.jpg", "release_date": "2008", "rt_score": "92", + "most_viewed":"4", "people": [ { "id": "a10f64f3-e0b6-4a94-bf30-87ad8bc51607", diff --git a/src/functions.js b/src/functions.js new file mode 100644 index 00000000..d4b623b3 --- /dev/null +++ b/src/functions.js @@ -0,0 +1,39 @@ +import data from "./data/ghibli/ghibli.js"; + +export const sortYear = (value) => { + const films = data.films.slice(); + + if (value === "decendant") { + films.sort((a, b) => b.title.localeCompare(a.title)); + } + + if (value === "ascendant") { + films.sort((a, b) => a.title.localeCompare(b.title)); + } + + if (value === "year") { + films.sort((a, b) => a.release_date.localeCompare(b.release_date)); + } + + if (value === "rt-score") { + films.sort((a, b) => Number(b.rt_score) - Number(a.rt_score)); + } + return films; +}; + +export const searchMovies = (text) => { + if (!text) { + return; + } + + const searchedMovies = data.films.filter((item) => + item.title.toLowerCase().includes(text.toLowerCase()) + ); + return searchedMovies; +}; +export const searchMoviesByDirector = (selectedDirector) => { + const filterDirector = data.films.filter( + (item) => item.director === selectedDirector + ); + return filterDirector; +}; diff --git a/src/index.html b/src/index.html index 5aef81f0..3f97d27f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,122 @@ - - Data Lovers + + + El mundo de Ghibli + -
+
+
+ +
+ + +
+
+
+ + +
+ + + +
+
+ +
+
+
+

¡Bienvenidos al mundo Ghibli!

+

+ Este sitio está dedicado a todos los amantes de las películas de + Studio Ghibli, donde podrán disfrutar de una amplia gama de + información, noticias y contenido multimedia relacionado con las + películas del estudio. Desde los mundos mágicos y maravillosos de + "El viaje de Chihiro" y "Mi vecino Totoro" hasta los relatos + conmovedores y emocionales de "La tumba de las luciérnagas" y "El + viento se levanta", Studio Ghibli ha dejado una huella indeleble + en el mundo del cine y la cultura popular. +

+

+ Esperamos que disfruten su visita y que esta sea el comienzo de + una emocionante aventura en el mundo de Ghibli. ¡Bienvenidos al + mundo de la magia y la creatividad! +

+
+ + + + +
+

Películas más vistas

+ +
+
+ + diff --git a/src/main.js b/src/main.js index 71c59f2d..d5f728b6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,72 @@ -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 { mostViewed } from "./data.js"; +import { movies } from "./data.js"; +import { searchMovies } from "./functions.js"; +import { searchMoviesByDirector } from "./functions.js"; +import { sortYear } from "./functions.js"; +const gallery = document.getElementById("gallery"); +const allMovies = document.getElementById("allMovies"); +const searchInput = document.getElementById("search-input"); +const selectDirector = document.getElementById("directores"); +const filters = document.getElementById("filters"); +const text = document.getElementById("search-input"); +const hamburguer = document.getElementById("hamburguerbtn"); +const aside = document.getElementById("aside"); -console.log(example, data); +export const forceRender = (valueToRender) => { + if (!valueToRender && valueToRender.length) return; + + const imagesMovies = valueToRender.map((item) => { + const img = document.createElement("img"); + img.classList.add("posters"); + img.src = item.poster; + img.width = 100; + img.heigth = 100; + return img; + }); + allMovies.innerHTML = ""; + imagesMovies.map((image) => allMovies.appendChild(image)); +}; + +const sortByYear = () => { + const value = filters.options[filters.selectedIndex].value; + const moviesSorted = sortYear(value); + forceRender(moviesSorted); +}; + +const director = () => { + const selectedDirector = + selectDirector.options[selectDirector.selectedIndex].value; + const moviesByDirector = searchMoviesByDirector(selectedDirector); + forceRender(moviesByDirector); +}; + +const searchBar = () => { + const searched = text.value; + const searchByTitle = searchMovies(searched); + forceRender(searchByTitle); +}; + +if (gallery) window.addEventListener("load", mostViewed); + +if (allMovies) window.addEventListener("load", movies); + +if (searchInput) { + searchInput.addEventListener("input", searchBar); +} +if (selectDirector) { + selectDirector.addEventListener("change", director); +} + +filters && filters.addEventListener("change", sortByYear); + +hamburguer.addEventListener("click", () => { + hamburguer.classList.toggle("active"); + aside.classList.toggle("active"); +}); + +Array.from(document.getElementsByClassName("aside")).forEach((n) => { + n.addEventListener("click", () => { + hamburguer.classList.remove("active"); + aside.classList.remove("active"); + }); +}); diff --git a/src/noticias.css b/src/noticias.css new file mode 100644 index 00000000..1b4ca61c --- /dev/null +++ b/src/noticias.css @@ -0,0 +1,33 @@ +.news-container { + max-width: 1200px; + background-color: rgba(5, 74, 74, 0.512); + border-radius: 30px; + padding: 3rem; + gap: 2rem; +} + +.news-welcome-text { + display: flex; + flex-direction: column; + text-align: left; + flex-direction: center; + gap: 1rem; + max-width: 1200px; + line-height: 1.5; + font-family: "Roboto Mono", monospace; +} + +h2 { + margin: 0; +} + +.news-container > img { + width: 100%; + padding: 2rem 0; +} + +@media only screen and (max-width: 390px) { + main { + padding: 6rem 1rem; + } +} diff --git a/src/noticias.html b/src/noticias.html new file mode 100644 index 00000000..40c87c5f --- /dev/null +++ b/src/noticias.html @@ -0,0 +1,102 @@ + + + + + + El mundo de Ghibli: Noticias + + + + + + + + +
+ + + +
+ +
+
+
+

¡Es una realidad!

+

Las películas del estudio Ghibli llegaron

+

+ Nos complace anunciar que amantes del animé pueden dormir desde el + 01 de Febrero ya que todas las películas del estudio Ghibli + llegaron a la plataforma de Streaming más utlizada en el mundo. +

+

+ Si bien se han ido liberando de a poco, actualmente están todas + disponibles para verlas en su idioma original y dobladas. +

+
+ +
+
+ + + + + + + diff --git a/src/style.css b/src/style.css index e69de29b..fa59e9b0 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,604 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@0,200;0,400;1,200&family=Roboto:wght@100&display=swap"); + +.barTop { + max-width: 1200px; + z-index: 1000; + top: 0; + display: flex; + align-items: center; + justify-content: space-evenly; + padding: 1rem 0; + width: 100%; + gap: 1rem; +} + +audio { + /* margin-top: 2rem; */ + /* transform: translateX(55%); */ + height: 30px; + /* position: fixed; */ +} + +body { + color: rgb(255, 255, 255); + font-family: "Roboto", sans-serif; + font-size: 18px; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url("./Images/Slice.png"); + background-size: auto 100%; + background-size: 100% 100%; + background-attachment: fixed; + height: 100vh; + background-position: left top; +} + +body::-webkit-scrollbar { + background-color: rgba(148, 143, 143, 0.21); + width: 15px; +} + +body::-webkit-scrollbar-thumb { + background-color: rgb(5, 124, 124); + border-radius: 8px; +} + +body::-webkit-scrollbar-track { + background-color: transparent; +} + +main { + box-sizing: border-box; + padding: 2vw 7vw 0 15vw; + width: 100%; + align-content: center; + display: flex; +} + +.aside { + display: flex; + position: fixed; + height: 100%; + top: 0; +} + +ol, +ul { + list-style: none; +} + +ul { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: 100%; + gap: 10rem; + padding: 0 1.5rem; +} + +li { + padding: 1rem 0; + font-size: 20px; + font-family: "Roboto Mono", monospace; +} + +li:hover { + display: block; +} + +a { + display: flex; + flex-direction: column; + align-items: flex-start; + text-decoration: none; + color: white; + cursor: pointer; +} +.containerNews { + position: relative; + z-index: 100; + display: flex; + flex-direction: column; + align-items: center; + gap: 4rem; + margin-left: 9rem; +} +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 4rem; +} + +.welcome-container { + display: flex; + flex-direction: row; + border-radius: 30px; + padding: 2rem; + background: rgba(5, 74, 74, 0.512); + gap: 2rem; + font-family: "Roboto Mono", monospace; +} + +.welcome-text { + display: flex; + flex-direction: column; + text-align: left; + gap: 1rem; + max-width: 1200px; + line-height: 1.5; + font-family: "Roboto Mono", monospace; +} + +h1 { + font-size: 44px; +} + +h2 { + font-family: "Roboto Mono", monospace; + font-size: 38px; + margin-top: 80px; +} + +.logo-container { + height: 150px; + /* position: relative; */ +} + +.loge { + height: 250%; +} + +#gallery { + margin-top: 70px; + display: flex; + justify-content: space-around; + gap: 2rem; + width: 100%; +} + +.gallery__img-container { + cursor: pointer; + width: 20%; + /* position: relative; */ +} + +.gallery__img { + width: 100%; + height: 100%; + border-radius: 8px; + -webkit-transition-property: all; + -webkit-transition-duration: 0.3s; + -webkit-transition-timing-function: ease; +} + +.gallery__img:hover { + transform: scale(1.2); + box-shadow: 0 0 15px #66bbcaf7, 0 0 20px rgba(11, 42, 85, 0.998), + 0 0 100px rgb(14, 120, 120); + filter: brightness(0.4); +} + +.gallery__title { + /* position: absolute; */ + top: 0; + right: 5%; + z-index: 1000; + opacity: 0; + color: #fff; + padding: 10px; + transition: opacity 0.3s ease; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 8; /* Este valor cambia el número de líneas deseadas */ + -webkit-box-orient: vertical; +} + +.gallery__img-container:hover .gallery__title { + opacity: 1; +} + +footer { + z-index: 100; + flex-direction: column; + display: flex; + position: relative; + bottom: 0; + width: 100%; + padding: 4rem 0; + align-self: flex-end; +} + +.social { + height: 60px; +} + +.contactSocial { + display: flex; + justify-content: center; + object-fit: cover; + gap: 3rem; + padding: 1rem 0; +} + +.contact { + text-align: center; + font-family: "Roboto Mono", monospace; + font-size: 20px; +} + +nav { + display: flex; + justify-content: center; +} + +ul { + display: flex; + flex-direction: column; + height: 100%; + gap: 3rem; + border-radius: 0 80% 80% 0; + background-color: rgba(5, 124, 124, 0.51); + justify-content: center; +} + +ul > a { + width: 8vw; +} + +.boton { + padding: 0.5rem 1.5rem; + text-align: center; + color: white; + background-color: rgb(9, 98, 98); + + border: 2px solid black; + border-radius: 8px; + cursor: pointer; + height: fit-content; +} + +.home { + margin-top: 2rem; + transform: translateX(20%); + height: 30px; + /* position: fixed; */ +} + +.search-input { + width: 60px; + height: 20px; + color: #ffffff; + padding: 1rem; + opacity: 0; + transition: all 0.5s ease; + border-radius: 20px; + background-color: rgb(9, 98, 98); + /* position: relative; */ + z-index: 1000; +} + +.search-input::placeholder { + color: #ffffff; +} + +.search-input:hover { + width: 100%; + opacity: 1; +} + +.search-input:focus { + width: 100%; + opacity: 1; +} + +.icon-container { + width: 70px; +} + +.icon { + width: 100%; + -webkit-transition-property: all; + -webkit-transition-duration: 0.3s; + -webkit-transition-timing-function: ease; +} + +.icon:hover { + -webkit-transform: scale(1.5); +} + +.search-icon { + width: 100%; +} + +.all-movies-wrapper { + width: 100%; + display: flex; + justify-content: center; +} + +.all-movies { + padding: 1rem; + width: 100%; + max-width: 1200px; + gap: 1rem; + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.posters { + height: 100%; + width: 100%; +} + +@media only screen and (max-width: 390px) { + body { + font-size: 15px; + } + + audio { + display: none; + } + + li { + display: flex; + align-items: center; + font-size: 18px; + } + + main { + width: 100%; + padding: 6rem 0 0 0; + } + + .container { + max-width: 500px; + gap: 4rem; + } + + .welcome-container { + box-sizing: content-box; + flex-direction: column-reverse; + max-width: 470px; + padding: 2rem 1rem; + gap: 15rem; + margin: 1rem; + } + + .loge { + width: 100%; + } + + .welcome-text { + box-sizing: content-box; + } + + h2 { + margin: 1rem; + text-align: center; + } + + #gallery { + flex-direction: column; + align-items: center; + padding: 0 0 4rem 0; + margin: 0; + } + + .gallery__img-container { + width: 70%; + } + + .gallery__img { + width: 100%; + } + + footer { + width: 100%; + background-color: rgba(5, 124, 124, 0.51); + } + + .contactSocial { + flex-direction: column; + align-items: center; + gap: 1rem; + } + + .contactSocial > a { + align-items: center; + } + + .social { + width: 100%; + } + + .hamburguerbtn { + display: block; + position: fixed; + z-index: 2000; + top: 1rem; + right: 2rem; + } + + .hamburguerbtn.active .bar:nth-child(2) { + opacity: 0; + } + + .hamburguerbtn.active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + .hamburguerbtn.active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + + .aside { + height: 10%; + width: 100%; + } + + .aside.active { + display: flex; + position: fixed; + flex-direction: column; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + text-align: center; + background-color: rgba(5, 124, 124, 2.51); + /* transition: .3s; */ + } + + li { + margin: 16px 0; + display: flex; + flex-direction: row; + } + + ul { + display: flex; + flex-direction: row; + background-color: transparent; + width: 100%; + height: 20px; + padding: 2rem 0 0 0; + } + + .icon-container { + display: none; + } +} diff --git a/test/.eslintrc b/test/.eslintrc index 55f121d1..b5579c09 100644 --- a/test/.eslintrc +++ b/test/.eslintrc @@ -3,3 +3,20 @@ "jest": true } } +//{ +// "env": { +// "browser": true +// }, +// "parserOptions": { +// "ecmaVersion": 2018, +// "sourceType": "module" +// }, +// "extends": "eslint:recommended", +// "rules": { +// "no-console": "warn", +// "no-var": "error", +// "prefer-const": "error", +// "eqeqeq": "error", +// "indent": ["error", 2] +// } +// } diff --git a/test/data.spec.js b/test/data.spec.js deleted file mode 100644 index 09b1f23f..00000000 --- a/test/data.spec.js +++ /dev/null @@ -1,23 +0,0 @@ -import { example, anotherExample } from '../src/data.js'; - - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); - }); - - it('returns `example`', () => { - expect(example()).toBe('example'); - }); -}); - - -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); - }); - - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); - }); -}); diff --git a/test/functions.spec.js b/test/functions.spec.js new file mode 100644 index 00000000..79f9219a --- /dev/null +++ b/test/functions.spec.js @@ -0,0 +1,57 @@ +import { sortYear } from "../src/functions.js"; +import { searchMovies } from "../src/functions.js"; +import { searchMoviesByDirector } from "../src/functions.js"; +//Botón de orden +describe("sortYear", () => { + it("es una función", () => { + expect(typeof sortYear).toBe("function"); + }); + it("debería filtar según la selección del botón y arrojar el título del índice indicado", () => { + expect(sortYear("year")[0].title).toContain("Castle in the Sky"); + expect(sortYear("decendant")[0].title).toContain("Whisper of the Heart"); + expect(sortYear("ascendant")[0].title).toContain("Castle in the Sky"); + expect(sortYear("rt-score")[0].title).toContain("Only Yesterday"); + }); +}); +//Botón buscador +describe("searchMovies", () => { + it("es una función", () => { + expect(typeof searchMovies).toBe("function"); + }); + it("debería filtar título de palabra completa", () => { + const movies = searchMovies("totoro"); + expect(movies.map((movie) => movie.title)).toContain("My Neighbor Totoro"); + }); + it("debería filtar título por parte de la palabra", () => { + const movies = searchMovies("to"); + expect(movies.map((movie) => movie.title)).toContain("My Neighbor Totoro"); + }); + it("debería filtar título con caracteres que no existen en los title y devolver un array vacío", () => { + const movies = searchMovies("titi"); + expect(movies.map((movie) => movie.title)).toEqual([]); + }); + it("debería filtar título con caracteres independiete que estén en mayúscula Mayúscula", () => { + const movies = searchMovies("TOTORO"); + expect(movies.map((movie) => movie.title)).toContain("My Neighbor Totoro"); + }); + //Falta cubrir línea 26 + // it("debería detectar título con valor vacío en el botón y retornar sin ejecutar la función", () => { + // const movies = searchMovies(""); + // expect(movies.map((movie) => movie.title)).toEqual([]); + // }); +}); +//Botón filtro de directores +describe("searchMoviesByDirector", () => { + it("es una función", () => { + expect(typeof searchMoviesByDirector).toBe("function"); + }); + it("debería filtar por director y dar la cantidad de películas", () => { + const movies = searchMoviesByDirector("Gorō Miyazaki"); + expect(movies).toHaveLength(2); + expect(movies.map((movie) => movie.director)).toContain("Gorō Miyazaki"); + }); + it("debería filtar por director, entrada vacía no arroja ninguna película de vuelta", () => { + const movies = searchMoviesByDirector(""); + expect(movies).toHaveLength(0); + }); +});