Code Monkey home page Code Monkey logo

datalovers's Introduction

Data lovers: Nizaggie

MAPASK

Índice

1. Resumen del proyecto

Nizaggie es un sitio con información acerca de estudios Ghibli, donde se puede encontrar las peliculas con su información, los productores, directores hasta los personajes y locaciones de las peliculas.

2. Experiencia UX

Esta sitio esta enfocado para fans de Ghibli y/o personas interesadas en descubrir este nuevo universo de peliculas.

Nizaggie permitira al usuario acceder a las peliculas donde podra encontrar información más detallada acerca de los productores, directores años y personajes. Tambien permite manipular la información como:

Ordenar las peliculas:

  • Por popularidad
  • Por año (Actual o menos actual)
  • Alfabeticamente (A-Z o Z-A)

Filtrar las peliculas:

  • Por productores
  • Por directores

Buscar informacón:

  • Por el año
  • Por el contenido en el titulo de la pelicula
  • Por el contenido en el resumen de la pelicula
  • Por el contenido en el nombre de los personajes

Además permite hacer un calculo segun tu estado de energia hacer una comparación con un personaje de las peliculas.

¿Que problema resuelve?

Como fans de Ghibli se busca el acceso a la información de forma más limpia, ordenada y estructurada, asi como más especifica, por ejemplo: el nombre de algun personaje, o la locación, a demas de la posibilidad de manipular toda la información, filtrarla y ordenarla para acceder más rapidamente a la información que se desea conocer.

3. Solución a los usuarios

Las historias de usuario en las que se basa el proyecto para darle solución al problema, son las siguientes:

MAPASK

4. Prototipos

Para realizar dicho proyecto se llevó a cabo un prototipo de baja y alta fidelidad con el que se buscaba:

  • Brindarle al usuario una interfaz fácil de comprender
  • Un flujo de pantallas optimo y coherente
  • Un prototipo que pudiera ser funcional, creativo y adaptable a las necesidades del usuario.

4.1 Baja fidelidad (Boceto)

  • Aquí creamos el primer prototipo de baja fidelidad el cual fue una guía de como quedaría la interfaz de acuerdo a componentes y elementos, y nuestro siguiente paso fue pedir feedback a otros usuarios para mejorar el prototipo.

Group-66

Group-66

4.2 Alta fidelidad (figma)

  • Creamos un prototipo en Figma el cual representa de manera visual el producto final de la página, esta fue la base para que pudieramos comenzar a maquetar el sistema en HTML, CSS & JS y obtuvimos el siguiente feedback: agregar imagenes y darle un ambiente más relaccionado al estudio y lo que busca transmitir.

Group-66

5. Prototipo final

5.1 Desktop

MAPASK

MAPASK

5.2 Tablet

MAPASK

MAPASK

5.3 Mobile

MAPASK

MAPASK

6. Tecnologías

(Techs Skills)

7. Conocimientos reforzados

🖥 Diseño UI
🖥 Semantica (HTML)
🖥 CSS (Flexbox CSS, CSS Grid)
🖥 Responsive Web Design
🖥 Uso de Flexbox y Grid
🖥 Uso de funciones
🖥 Variables
🖥 Uso de identificadores descriptivos (Nomenclatura y Semántica)
🖥 Manipulacion dinámica del DOM
🖥 Selectores y eventos del DOM
🖥 Ciclos (For)
🖥 Condicionales (If)
🖥 Delegación de eventos
🖥 Uso de datos primitivos
🖥 Aplicar principios de Diseño visual
🖥 Modelo de caja
🖥 Uso de bucles
🖥 Uso de Linter (ESLINT)
🖥 Modulos
🖥 Git hub: control de versiones
🖥 Git hub: integración de cambios entre ramas
🖥 Git hub: creación de cuentas y repos
🖥 Git hub: Despliegue con Github pages
🖥 Pruebas unitarias con Jest

8. Conocimientos adquiridos

💻 Test de usabilidad
💻 Datos primitivos y no primitivos
💻 Arrays
💻 Objetos (key, value))
💻 Git hub: Integración de cambios entre ramas (branch, checkout, merge, reset, rebase)
💻 Git hub: Colaboración (branchs, pull request, code review)

9. Habilidades blandas

(Life Skills)

🦾 Adaptabilidad
🦾 Autoaprendizaje
🦾 Profesionalismo
🦾 Colaboración

10. Autores y licencia

👩 MAGGIE SARMIENTO - https://github.com/Maggie-Sarmiento
👩 Nizalli Ramirez - https://github.com/Nizcat

Todos los Derechos Reservados ©Copyright Nizaggie

datalovers's People

Contributors

genesismauries avatar maggie-sarmiento avatar reloadercf avatar

Watchers

 avatar

Forkers

nizcat

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.