diff --git a/README-EXAMPLE b/README-EXAMPLE new file mode 100644 index 0000000..9c6e373 --- /dev/null +++ b/README-EXAMPLE @@ -0,0 +1,425 @@ +# Data Lovers + +## Índice + +- [Preámbulo](#preámbulo) +- [Descripción](#resumen-del-proyecto) +- [Consideraciones generales](#consideraciones-generales) +- [Objetivos de aprendizaje](#objetivos-de-aprendizaje) +- [Parte obligatoria](#parte-obligatoria) +- [Parte opcional](#parte-opcional-hacker-edition) +- [Consideraciones técnicas](#consideraciones-técnicas) +- [Contenido de referencia](#contenido-de-referencia) +- [Checklist](#checklist) + +--- + +## Preámbulo + +Según un [estudio de IBM](https://www-01.ibm.com/common/ssi/cgi-bin/ssialias?htmlfid=WRL12345USEN), +el 90% de la data que existe hoy ha sido creada durante los últimos dos años. +Cada día generamos 2.5 trillones de bytes 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 el usuario. + +![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) + +\* Puedes ver el detalle de la data [aquí](https://gist.github.com/lalogf/dd4aa3017a9f8aa8f90dfbca382c4dc9#file-student-json) +y la interfaz construida [aquí](https://app.talento.laboratoria.la/profile/HFOoMpOreBU2psCcjjLg5O2EWEv2). + +## 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. + +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, entiende 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 151 Pokémon de la región de Kanto, + junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](pokemongolive.com). +- [Steam noticias](src/data/steam/steam.json): + Lista noticias relacionadas a los videojuegos presentes en la + plataforma de [Steam](https://store.steampowered.com/). +- [League of Legends - Challenger leaderboard](src/data/lol/lol.json): + Este set de datos muestra la lista de jugadores en una liga del + juego League of Legends (LoL), puedes revisar la documentación de su API en + este [link](https://developer.riotgames.com/api-methods/). +- [Rick and Morty](src/data/rickandmorty/rickandmorty.json). + Este set nos proporciona la lista de los personajes de la serie Rick and + Morty. Puedes revisar la documentación de su API en este [link](https://rickandmortyapi.com). + + +Como entregable final tendrás una página web que permita **visualizar la data, +filtrarla, ordenarla y hacer algún cálculo agregado**. Como aclaración, +con cálculo agregado nos referimos a distintos cálculos que puedes hacer con +la data que tienes para mostrar información aún más relevante a los usuarios. +Una opción serían cálculos estadísticos como el promedio, el máximo o el mínimo, +por ejemplo, si tenemos una colección que representa a un grupo de personas, +y cada persona está representada como un _objeto_ con una _propiedad_ `altura`, +podríamos elegir calcular la altura promedio en el grupo entre otras cosas. + +## Consideraciones generales + +- Este proyecto se debe resolver en duplas. +- El proyecto será entregado subiendo tu código a GitHub (commit/push) y la + interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). +- Tiempo para completarlo: 3 semana divididas en 3 sprints (una entrega del producto funcional al término de cada sprint). + +## Objetivos de aprendizaje + +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. + +Dicho en palabras sencillas, aprenderás a: + +- Aplicar y profundizar todo lo que aprendiste en el proyecto anterior. +- Pensar en las **necesidades de los usuarios** para crear historias de usuario. +- Escribir y trabajar con **historias de usuario**, sus definiciones de + terminado (_definition of done_) en la organización y planificación de tu + trabajo. +- Definir qué data y de qué forma mostrarla en el producto, basándote en + tu **entendimiento del usuario**. +- Crear productos que sigan los **principios básicos de diseño visual** y + las **heurísticas de usabilidad**. +- Iterar el diseño del producto, basándote en los resultados de los + **tests de usabilidad**. +- Manipular **_arreglos_ (_arrays_) y _objetos_ (_objects_)**. +- **Manipular el DOM** (agregar elementos dinámicamente basados en la data). +- **Manejar eventos del DOM** para permitir interacción con el usuario + (filtrado, ordenado, ...). +- Entender los beneficios y complejidades de **trabajar en equipo** en un + ambiente de incertidumbre. + +## Alcances esperados + +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 tu usuario, escribe las [Historias +de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen +todo lo que el usuario necesita hacer/ver. Asegúrate de incluir una definición +de terminado (_definition of done_) para cada una. + +### Diseño de la Interfaz de Usuario + +#### Prototipo de baja fidelidad + +Durante tu trabajo deberás haber hecho e iterado sketches (boceto) de tu +solución usando papel y lápiz. Te recomendamos tomar fotos de todas las +iteraciones que realices y 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. + + +#### Testeos de usabilidad + +Durante el reto deberás realizar tests de usabilidad con distintos usuarios, y +en base a los resultados de esos tests, 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. +Como mencionamos, **no** es necesario que construyas la interfaz tal como la +diseñaste. Tendrás un tiempo limitado para hackear, así es 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 filtrar y ordenar la data. +3. Calcular estadísticas de la colección (o subcolección) como media aritmética, + máximo y/o mínimo de algún atributo numérico, o contar cuántas veces aparece + un determinado valor, por ejemplo. +4. Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, + tablets y desktops. + +Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, +siga los fundamentos de _visual design_. + +### Pruebas unitarias + +El _boilerplate_ de este proyecto no incluye pruebas unitarias, pero esperamos +que escribas tus propias pruebas unitarias para las funciones encargadas de +_procesar_, _filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. +Para ello te recomendamos implementar las siguientes funciones en el archivo +`src/data.js`: + +//- `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. + +Estas son propuestas de funciones que podrías implementar. + +El archivo `src/data.js` debe tener una cobertura del 70% de _statements_ +(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ +(_ramas_). + +**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, ...). + +## Hacker edition + +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 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/). + + +## 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 +[_Hacker Edition_](#parte-opcional-hacker-edition) más arriba. + +No se debe utilizar la _pseudo-variable_ `this`. + +El _boilerplate_ contiene una estructura de archivos como punto de partida así +como toda la configuración de dependencias: + +```text +. +├── package.json +├── README.md +├── src +│   ├── data +│   │   ├── injuries +│   │   │   ├── injuries.js +│   │   │   └── injuries.json +│   │   ├── lol +│   │   │   ├── lol.js +│   │   │   └── lol.json +│   │   ├── pokemon +│   │   │   ├── pokemon.js +│   │   │   └── pokemon.json +│   │   ├── steam +│   │   │   ├── steam.js +│   │   │   └── steam.json +│   │   └── worldbank +│   │   ├── worldbank.js +│   │   └── worldbank.json +│   ├── data.js +│   ├── index.html +│   ├── main.js +│   └── style.css +└── test + └── data.spec.js + +8 directories, 17 files +``` + +### `src/index.html` + +Al igual que en el proyecto anterior, existe un archivo `index.html`. Como ya +sabrás, 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. + +En este archivo encontrarás una serie de _etiquetas_ (_tags_) ` +``` + +Y ahora tendríamos la variable global `WORLDBANK` disponible en nuestros otros +scripts (como `src/data.js` o `src/main.js`). + +### `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. + +### `src/data.js` + +El corazón de este proyecto es la manipulación de datos a través de arreglos y +objetos. La idea de este archivo es contener toda la funcionalidad +que corresponda a obtener, procesar y manipular datos. + +En este archivo esperamos que implementes las funciones detalladas en la sección +de [_Pruebas Unitarias_](#pruebas-unitarias). + +### `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 ` -``` - -Y ahora tendríamos la variable global `WORLDBANK` disponible en nuestros otros -scripts (como `src/data.js` o `src/main.js`). - -### `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. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos y -objetos. La idea de este archivo es contener toda la funcionalidad -que corresponda a obtener, procesar y manipular datos. - -En este archivo esperamos que implementes las funciones detalladas en la sección -de [_Pruebas Unitarias_](#pruebas-unitarias). - -### `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 ` -
- - - - - - + + + + + +
+
+

Simple hover effect only use CSS3

+
+
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+
+

Rick es un brillante científico un tanto borracho que secuestra +
+ a su irritable nieto adolescente Morty para vivir aventuras en +
+ otros mundos y en dimensiones alternativas, te animas +
+ a conocer mas sobre estos y otros personajes.

+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TOP RANKING
Rick Sánchez1
Morty Smith2
Mr. Poopybutthole3
Evil Morty4
Squanchy5
+ +
+ +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+

Avances de la nueva temporada

+

Noviembre 2019

+ +
+ + +
+ +
+
+
+
+
+
+ +
+
+
+ + + +
+
+ + +
+
+
+
+
+
+
+ + + + + diff --git a/src/inicio.jpg b/src/inicio.jpg new file mode 100644 index 0000000..d6fbbc5 Binary files /dev/null and b/src/inicio.jpg differ diff --git a/src/main.js b/src/main.js index e69de29..8030fbe 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,86 @@ + + + +for(personajes in RICKANDMORTY.results){ + // console.log(RICKANDMORTY.results[personajes].image); + //console.log(RICKANDMORTY.results[personajes].gender); + +for(personajes in RICKANDMORTY.results){ + // console.log(RICKANDMORTY.results[personajes].image); + + +for(personajes in RICKANDMORTY.results){ + // console.log(RICKANDMORTY.results[personajes].image); + //console.log(RICKANDMORTY.results[personajes].gender); + + + + + +} +const data = RICKANDMORTY.results; +// const data RICKANDMORTY.results +const paraPintar = document.getElementById ('data'); + +//filtrar data + +const muestraData = () => { + let str = ''; + data.forEach(element => { + str += `
+
+
+

${element.name}

+
+
+ +
+
+

Status: ${element.status}

+

Especie: ${element.species}

+

tamaño: ${element.origin.name}

+

Origen: ${element.location.name}

+
+
+
` + }); + + paraPintar.innerHTML = str; + +} +muestraData(); + + +//Filtrar +const filtrarData = (prop, val) => { + let str = ''; + data.forEach(element => { + + //console.log(element[prop]) + + if(element[prop] == val) { + str += `
+
+

${element.name}

+
+
+ +
+
+ +

Status: ${element.status}

+

Especie: ${element.species}

+

tamaño: ${element.origin.name}

+

Origen: ${element.location.name}

+
+
` + } + + + }); + + + console.log(str); + +} +filtrarData('status', 'Alive') \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29..bd986d9 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,243 @@ +body { + background: url("fondo22.jpg") no-repeat center top fixed; + background-size: cover; +} + + + +#contenedor-texto{ + width: 100%; + max-width: 500px; + margin-right: 5%; + color: white; + border-radius:5px; + text-align: right; + float: right; +} + +.informacion { + + display: flex; + flex-direction: column-reverse; + position: relative; + top: 40px; + font-family: 'Amatic SC', Verdana; + font-size: 60px; + text-align: right; + margin: 0.3em; + color: white; + font-weight: bold; + text-shadow: 5px 5px 5px blue; +} + + +.tabla { + display: flex; + flex-direction: column; + position: relative; + left: 70px; + width: 300px; + margin: left; + bottom: 20px; + right: 20px; +} + + th, td { + padding: 15px; + font-family: 'Amatic SC', Verdana; + font-size: 42px; } + tr { + + padding: 10px; + font-family: 'Amatic SC', Verdana; + font-weight: 600px; + font-size: 20px; + color: black; + background-color: rgb(186, 225, 248); + } + tr:first-child { + + padding: 10px; + font-family: 'Amatic SC', Verdana; + font-weight: 600px; + font-size: 20px; + color: black; + background-color: rgb(186, 225, 248) ; + } + tr:nth-child(even) { + + padding: 10px; + font-family: 'Amatic SC', Verdana; + font-weight: 600; + font-size: 20px; + color:black; + background-color: rgb(214, 216, 112); + } + +/* .btn-continuar{ + position: relative; + display: inline-block; + border: 2px solid rgb(214, 216, 112); + padding: 20px 40px; + color:greenyellow; + font-weight: 700; + text-decoration:none; + background-color:rgb(124, 110, 245); + text-align: left; +} + +.btn-continuar:hover{ +color: blue ; +background-color: transparent; +} */ +.abajo a { + width: 12rem; + height: 12rem; + border-radius: 100%; + margin-left: 115rem; + text-align: center; + font-size: 6rem; + display: flex; + justify-content: space-between; + text-decoration: none; + color: rgb(214, 216, 112); +} + + h1{ + text-align: right; + color: white; + font-family: 'Amatic SC', Verdana; + font-size: 80px; + font-weight: bold; + height: 40px; + margin-right: 4%; + text-shadow: 5px 5px 5px blue; + } + + h2{ + text-align: right; + color: white; + font-family: 'Amatic SC', Verdana; + font-size: 50px; + font-weight: bold; + height: 50px; + margin-right: 4%; + text-shadow: 5px 5px 5px blue; + } + + + #contenedor{ + margin-left: 20px; + } + + + .data{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + + + #data{ + + font-family: 'Amatic SC', Verdana; + color: rgb(255, 255, 255); + font-size: 30px; + font-weight: bold; + text-shadow: 5px 5px 5px blue; + } + + .tarjeta{ + width: 20%; + overflow: hidden; + background: skyblue; + margin: 20px auto; + padding: 40px; + border-radius: 40px; + text-align: center; + box-sizing: border-box; + border:2px solid blue; + display:flex; + } + .nombre{ + width: 100%; + height: 50px; + line-height: 50px; + background: rgb(10, 8, 8); + border-radius: 40px; + text-align: center; + flex-direction: row; + align-items: flex-end; + } + .element-img{ + display: flex; + width: 60%; + margin: 0 auto; + min-width: 100px; + flex-direction: row; + align-items: flex-end; +} + .tarjeta:hover{ + opacity: 0.9; + } +@media screen and (max-width:1250px){ + .tarjeta{ + width: 40%; + margin-left: 50px; + } +} + +.contenedor-video{ + + background-color: rgb(0, 0, 0); + width: 1300px; + display: webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + background: black; + border: 1px solid blue; + border-radius: 30px; + box-shadow: 0 0 10px blue, 0 0 10px blue inset; + transition: all .2s linear; + +} +.contenedor-video:hover { +box-shadow: 0 0 20px green, 0 0 25px green ; +} + +.caracteristicas{ + outline:none; + font-family:'Amatic SC', Verdana; + font-size:35px; + font-weight: bold; + color: black; + text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.7), 1px 1px 1px hsla(350,0%,100%,0.3); + display: block; + margin:2em 50px 0px 10px; + text-align: center; + padding:18px 15px 18px 25px; + cursor:pointer; + background-color:rgb(128, 212, 18); + background-image:linear-gradient(273deg,rgb(193, 230, 62) 30%, rgb(101, 230, 15) 40%); + border:none; + border-radius:16px; + box-align: right; + margin-left: 2em; +} + +.info select{ + background: rgb(60, 60, 61); + padding: 10px; + width: 300px ; + height: 90px; + font-family:'Amatic SC', Verdana; + justify-content: center; + font-size: 40px; + font-weight: bold; + margin-left: 20em; + color: white; + border-radius: 16px; +} \ No newline at end of file diff --git a/src/video/Thumbs.db b/src/video/Thumbs.db new file mode 100644 index 0000000..cb49550 Binary files /dev/null and b/src/video/Thumbs.db differ diff --git a/src/video/rick_y_morty_temp4.mp4 b/src/video/rick_y_morty_temp4.mp4 new file mode 100644 index 0000000..c5faad3 Binary files /dev/null and b/src/video/rick_y_morty_temp4.mp4 differ