- 1. Resumen del proyecto
- 2. Experiencia UX
- 3. Solución a los usuarios
- 4. Prototipos
- 5. Prototipo final
- 6. Tecnologías
- 7. Conocimientos reforzados
- 8. Conocimientos adquiridos
- 9. Habilidades blandas
- 10. Autores y licencia
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.
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.
Las historias de usuario en las que se basa el proyecto para darle solución al problema, son las siguientes:
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.
- 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.
- 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.
🖥 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
💻 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)
🦾 Adaptabilidad
🦾 Autoaprendizaje
🦾 Profesionalismo
🦾 Colaboración
👩 MAGGIE SARMIENTO - https://github.com/Maggie-Sarmiento
👩 Nizalli Ramirez - https://github.com/Nizcat
Todos los Derechos Reservados ©Copyright Nizaggie