Data Lovers

Índice

• 1. Descripción de Data Lovers
• 2. Objetivos del proyecto
• 3. Características del proyecto
• 4. Procedimiento
• 5. Funcionalidades
• 6. Tecnologías utilizadas

---

1. Descripción de Data Lovers

Data Lovers es un proyecto interactivo que te permite explorar y obtener información detallada sobre las películas de Studio Ghibli. Con una interfaz intuitiva y fácil de usar, este proyecto te sumerge en el fascinante mundo de las películas de animación japonesa.

Con Data Lovers, puedes navegar a través de una amplia selección de películas del Studio Ghibli y descubrir detalles clave como el título, el director, el productor, la fecha de lanzamiento y la calificación (RT SCORE). Cada película viene acompañada de una descripción que te sumerge en su historia y te brinda una visión general de su trama.

Una de las características destacadas de Data Lovers es la capacidad de filtrar las películas según el director. Puedes seleccionar un director específico de Studio Ghibli y ver instantáneamente las películas que han sido dirigidas por esa persona en particular. Esto te permite explorar la filmografía de tus directores favoritos o descubrir nuevas películas de directores que te interesen.

Además, Data Lovers te brinda la opción de ordenar las películas según diferentes criterios. Puedes organizarlas alfabéticamente en orden ascendente o descendente, lo que facilita la búsqueda de películas específicas. También puedes ordenarlas por su fecha de lanzamiento, ya sea de forma ascendente (más recientes primero) o descendente (más antiguas primero). Si estás interesado en las calificaciones, puedes ordenar las películas por su puntuación, lo que te permite descubrir las mejores o peores películas según el RT SCORE.

No solo te limitas a explorar las películas, sino que también puedes sumergirte en el mundo de los personajes principales. Data Lovers te permite ver información detallada sobre los personajes principales de cada película, incluyendo su nombre, imagen, edad, género y especie. Esta característica te brinda un vistazo más cercano a los personajes que dan vida a las historias de Studio Ghibli.

Por último, Data Lovers también te ofrece la posibilidad de disfrutar de los pósters de las películas. Mediante un botón dedicado, puedes explorar una galería de pósters seleccionados y admirar el arte visual de cada película.

La plataforma utiliza tecnologías web modernas, como HTML, CSS y JavaScript, para crear una interfaz de usuario atractiva y fácil de usar. Además, se aplican técnicas de visualización de datos para representar la información de manera visualmente atractiva y comprensible.

2. Objetivos del proyecto

• Aprender a manipular una base de datos prehecha, que nos permite poder adaptarla a 5 historias de usuario.

• Proporcionar una interfaz interactiva y fácil de usar que permita a los usuarios explorar y obtener información detallada sobre las películas de Studio Ghibli.

• Mostrar una lista completa de las películas de Studio Ghibli, incluyendo detalles como el título, director, productor, fecha de lanzamiento y calificación (RT SCORE).

• Permitir a los usuarios filtrar las películas por director, lo que les permitirá explorar la filmografía de directores específicos y descubrir nuevas películas de sus directores favoritos.

• Ofrecer la capacidad de ordenar las películas alfabéticamente, por fecha de lanzamiento y por calificación, lo que facilita la búsqueda y clasificación de las películas según las preferencias de los usuarios.

• Proporcionar información detallada sobre los personajes principales de cada película, incluyendo su nombre, imagen, edad, género y especie.

• Incluir una galería de pósters seleccionados de las películas de Studio Ghibli, permitiendo a los usuarios disfrutar del arte visual de cada película.

• Brindar una experiencia fluida y receptiva, asegurándose de que la navegación y la visualización de la información sean rápidas y eficientes.

• Garantizar la usabilidad y accesibilidad del proyecto, asegurándose de que sea fácil de entender y utilizar para una amplia gama de usuarios.

• Mejorar y actualizar continuamente el proyecto, agregando nuevas películas de Studio Ghibli a medida que estén disponibles y proporcionando nuevas características y funcionalidades para enriquecer la experiencia del usuario.

• Recopilar y analizar comentarios y retroalimentación de los usuarios para mejorar y optimizar el proyecto en futuras versiones.

3. Características del proyecto

Es una herramienta interactiva y útil para explorar y obtener información detallada sobre las películas de Studio Ghibli. Los usuarios pueden filtrar, ordenar y explorar las películas según sus preferencias y también obtener información sobre los personajes principales.

• Acceso a grandes conjuntos de datos: Data Lovers permite a los usuarios acceder a una amplia variedad de conjuntos de datos.

• Visualización de datos interactiva: La plataforma ofrece capacidades de visualización interactiva que permiten a los usuarios explorar y comprender los datos de manera más efectiva.

• Personalización y personalización de vistas: Los usuarios pueden personalizar las vistas de datos de acuerdo con sus necesidades y preferencias, como seleccionar columnas específicas.

• Visualización de películas: El proyecto permite mostrar información detallada de películas del Studio Ghibli, incluyendo su título, director, productor, fecha de lanzamiento, calificación (RT SCORE) y descripción. También se muestra el póster de cada película.

• Filtrado por director: Los usuarios pueden seleccionar un director específico del Studio Ghibli y ver las películas dirigidas por ese director. Al seleccionar un director en el menú desplegable, se filtran las películas y se muestran solo aquellas dirigidas por el director seleccionado.

• Ordenamiento por diferentes criterios: El proyecto permite ordenar las películas de diferentes formas. Los usuarios pueden seleccionar opciones de ordenamiento como orden alfabético ascendente o descendente por título, orden cronológico de lanzamiento (más recientes o más antiguas) y orden por calificación (mejores o peores películas según el RT SCORE).

• Visualización de personajes principales: Además de mostrar información de las películas, el proyecto también permite mostrar información de los personajes principales de cada película. Al hacer clic en el botón "Main Characters", se muestran los personajes principales de las películas con su nombre, imagen, edad, género y especie.

• Visualización de pósters: El proyecto incluye un botón "Posters" que permite mostrar los pósters de las películas. Al hacer clic en este botón, se filtran las películas y se muestran solo aquellos pósters que están disponibles.

4. Procedimiento

Organización

En cuanto a la organización del proyecto, utilizamos una herramienta de gestión de tareas llamada Trello.

Trello facilitó la colaboración en el proyecto, ya que pude compartir los tableros con otros miembros del equipo y asignar tareas específicas a cada persona. Esto nos ayudó a mantenernos sincronizadas y trabajar de manera coordinada. Esta herramienta nos permitió llevar un checklist detallado de las tareas necesarias para completar el proyecto y establecer metas y objetivos para cada día y semana.

En Trello, creamos tableros que representaban diferentes aspectos del proyecto, como el desarrollo del código, el diseño de la interfaz y las pruebas unitarias. Dentro de cada tablero, creé listas para categorizar las tareas, como "Checklist general", "Historias de usuario", "Prototipos de alta y baja fidelidad" y "Planning".

A medida que avanzabamos en el proyecto, ibamos moviendo la información de cada lista para reflejar su estado actual. Esto nos permitió visualizar rápidamente el progreso y asegurarnos de que todas las tareas estuvieran siendo abordadas de manera eficiente.

Historias de usuario

La pagina web esta pensada para conocedores y no conocedores de Studio Ghibli.

Los usuarios deben poder interactuar con la página web, que les permita desplegar la información ordenada de distintas maneras: por termporalidad, podrá diferenciar las obras que realizaron los distintos directores o ver el score ordenado de mayor a menor.

La información proporcionada debe ser clara, concisa y fácilmente comprensible para los usuarios.

Los usuarios deben tener la oportunidad de aprender y ampliar sus conocimientos sobre Studio Ghibli a través de la página web.

La página web debe presentar la información de manera atractiva y visualmente agradable, utilizando elementos visuales relacionados con las obras de Studio Ghibli.

Que los elementos que conforman la información sobre la película sean 7 elementos como descripción básica.

Historia No. 1

“Yo como usuario quiero tener interacción para tener la oportunida de aprender o conocer más acerca de Studio Ghibli, en este caso sobre la temporalidad en la que fueron creadas las obras de Studio Ghibli y su orden alfabético.” ‌

CRITERIOS DE ACEPTACIÓN:

• Se creará un select, que permita al usuario escoger entre A-Z, Z-A, old y new, que desplegará las peliculas ordenadas de la A a la Z, de la Z a la A, de nuevas a viejas y de viejas a nuevas.
• La página web debe ser accesible y comprensible tanto para conocedores como para no conocedores de Studios Ghibli.
• Los usuarios deben poder interactuar con la página web para obtener información sobre la temporalidad ( OLD- NEW) en la que fueron creadas las películas de Studios Ghibli.
• Los usuarios deben poder interactuar con la página web para obtener información sobre el orden alfabético ( OLD- NEW) de las películas de Studios Ghibli.
• La página web debe ser responsive y adaptarse a diferentes dispositivos y tamaños de pantalla.

Historia No.2

"Yo como usuaria quiero conocer las películas producidas por todos los directores, seleccionando cada nombre y al momento de hacerlo se desplieguen solo las películas de cada director."

CRITERIOS DE ACEPTACIÓN.

• La página web debe mostrar las obras de todos los distintos directores de Studio Ghibli.
• Los usuarios deben tener la opción de seleccionar el nombre de cada director.
• Al seleccionar el nombre de un director, solo se desplegarán las películas asociadas a ese director.
• Las películas asociadas a cada director deben desplegarse de manera clara y ordenada.
• La información de las películas debe incluir su título y una descripción.
• Los usuarios deben poder regresar a la vista general de los directores y seleccionar otro director para ver sus películas.
• La navegación entre los directores y las películas debe ser fluida y fácil de usar.
• Se deben utilizar elementos visuales relevantes para cada directores y sus respectivas películas.

Historia No. 3

"Yo como usuario quiero conocer el orden de mayor a menor y de menor a mayor de la calificación que tiene la pelicula para poder tener claro cuál me convendría ver a futuro."

CRITERIOS DE ACEPTACIÓN.

• La página web debe mostrar las obras de todos los distintos directores de Studio Ghibli, por order , tomando como referencia la calificación del 1 al 100.
• Las pelicualas desplegadas tendrán que estar ordenadas del 100- 0 y del 0-100.
• Se deben utilizar elementos visuales relevantes para cada directores y sus respectivas películas.

Historia no. 4

"Para mi como usuario es importante poder ver las imágenes de todas las películas, que se muestren sólo los flyers."

CRITERIOS DE ACEPTACIÓN:

• La página web debe mostrar imágenes de todas las películas de Studio Ghibli.
• Las imágenes mostradas deben ser exclusivamente los flyers promocionales de cada película.
• Las imágenes deben estar presentados de manera ordenada y organizada en la página web.
• Los usuarios deben poder ver todas las imágenes de las películas sin dificultades ni restricciones.
• La página web debe ser responsive y adaptarse a diferentes dispositivos y tamaños de pantalla.

Historia no. 5

"Yo como usuaria puedo ver sólo las características e imagen de todos los personajes principales de cada una de las películas."

CRITERIOS DE ACEPTACIÓN:

• La página web debe mostrar solo los personajes principales de cada una de las películas de Studio Ghibli.
• Se deben incluir imágenes de los personajes principales junto con sus respectivas características.
• Las imágenes de los personajes deben ser claras y de alta calidad.
• Junto a cada imagen de personaje, se deben mostrar las características relevantes, como el nombre, el género y otros detalles importantes.
• Los usuarios deben poder acceder a la información de los personajes de manera intuitiva y sin dificultades.
• La página web debe ser responsive y adaptarse a diferentes dispositivos y tamaños de pantalla.

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Antes de comenzar a desarrollar la interfaz de nuestra aplicación basada en Studio Ghibli, decidimos crear un prototipo de baja fidelidad en Canva. El objetivo era visualizar y probar las ideas y funcionalidades clave del proyecto para proporcionar una experiencia atractiva a los fanáticos de las películas de Studio Ghibli.

Elegimos Canva como la herramienta para crear el prototipo de baja fidelidad debido a su facilidad de uso y variedad de elementos gráficos. Canva nos permitió diseñar de forma rápida y sencilla las pantallas principales de nuestra aplicación.

Buscábamos evaluar la estructura de navegación entre las películas, la visualización de la información relevante y la disposición de los elementos en la interfaz conforme a las necesidades de nuestros usuarios.

Compartimos el prototipo de baja fidelidad con personas interesadas en Studio Ghibli para obtener su retroalimentación y comentarios. Esta etapa nos permitió identificar posibles mejoras en la organización de las películas, la accesibilidad de la información y la navegación, antes de avanzar al desarrollo de la interfaz de alta fidelidad.

Para mostrar nuestro prototipo de baja fidelidad, hicimos 4 diferentes pantallas que fueron: "Home", "Order", "Directors", "Posters" y "Main characters".

Prototipo de alta fidelidad

Después de haber diseñado y probado el prototipo de baja fidelidad en Canva, pasamos a desarrollar el prototipo de alta fidelidad para nuestra aplicación basada en Studio Ghibli. El objetivo principal era refinar y detallar el diseño, así como implementar la funcionalidad de puntuación (rt score) para que los usuarios pudieran identificar las películas y su calificación.

Utilizamos Figma como la herramienta principal para crear el prototipo de alta fidelidad debido a su capacidad para crear diseños avanzados e interactivos. Aprovechamos los recursos adicionales como paletas de colores, íconos y fuentes relevantes a Studio Ghibli para enriquecer el diseño.

Tomaste el diseño de baja fidelidad y lo refinamos en el prototipo de alta fidelidad en Figma. Ajustaste los tamaños, los espacios y los detalles visuales para lograr un diseño más pulido y estéticamente atractivo. Aseguramos mantener la coherencia visual en todas las pantallas y elementos del prototipo.

Incorporamos la funcionalidad de puntuación (rt score) en el prototipo de alta fidelidad en Figma. Agregamos elementos interactivos, como botones para permitir a los usuarios ver la calificación de las películas. Creamos transiciones suaves entre pantallas como botones.

Eealizamos pruebas del prototipo de alta fidelidad en Figma, involucrando a usuarios y recopilando retroalimentación. Utilizamos los comentarios recibidos para realizar ajustes y mejoras en el diseño y la funcionalidad, asegurándonos de que el prototipo cumpla con las expectativas de los usuarios.

Testeos de usabilidad

1.- Nuestos test de usuabilidad prueban que el DOM de Java Script funcione de la manera correcto y se ejecute de manera correcta las funciones eespecificas de sort y filter. Se pueden verificar al escribir en la terminal npm run test.

2.- Después de mostrar el prototipo de baja fidelidad a los usuarios, pidieron una opción que destacara las calificaciones ordenadas de mayor a menor y de menor a mayor de cada una de las películas, y de acuerdo al feedback, creamos una nueva historia de usuario basándonos en su RT SCORE.

3.- De igual manera, después de mostrar nuestro prototipo de fidelidad, los usuarios prefirieron visualizar las películas ordenadas alfabéticamente y por año en lugar de una línea de tiempo. Así es como creamos "SORT".

5. Funcionalidades

• Mostrar películas: Permite mostrar una lista de películas de Studio Ghibli. Cada película se representa con su título, director, productor, fecha de lanzamiento, puntaje y descripción.

• Filtrar películas por director: Los usuarios pueden seleccionar un director específico de Studio Ghibli y filtrar la lista de películas para mostrar solo las películas dirigidas por ese director.

• Ordenar películas: Los usuarios pueden ordenar la lista de películas según diferentes criterios, como orden alfabético, fecha de lanzamiento o puntaje. Pueden elegir si desean ordenar de forma ascendente o descendente.

• Mostrar personajes principales: Permite mostrar los personajes principales de cada película. Al hacer clic en el botón correspondiente, se mostrará una lista de los personajes principales junto con su información relevante, como edad, género y especie.

• Filtrar y mostrar carteles: Hay una funcionalidad adicional que permite filtrar las películas y mostrar solo aquellas que tienen carteles disponibles. Al hacer clic en el botón correspondiente, se mostrarán los carteles de las películas seleccionadas.

• Pruebas unitarias: Además de las funcionalidades mencionadas, también incluye pruebas unitarias para verificar el correcto funcionamiento de las diferentes funciones y componentes. Las pruebas unitarias se utilizan para validar el comportamiento esperado de las funciones y garantizar que no haya errores o fallos en el código. Esto ayuda a mejorar la calidad y confiabilidad del proyecto. Estas se implementan utilizando frameworks o bibliotecas de pruebas unitarias, como Jest, y se escriben para cada función o componente importante del proyecto y evalúan los casos de uso más comunes y los casos límite para asegurarse de que el código funcione correctamente en diferentes situaciones. Las pruebas unitarias son una parte esencial del desarrollo de software, ya que ayudan a detectar y corregir errores antes de que se implemente el código en producción, lo que garantiza un producto final más confiable y robusto.

6. Tecnologías utilizadas

Para el desarrollo de este proyecto se utilizó:

• Visual Studio Code: Se pudo trabajar de manera eficiente en la creación y edición del código. Es un potente editor de código fuente que proporciona una amplia gama de herramientas y funcionalidades para desarrolladores. Fue utilizado como el entorno de desarrollo principal para escribir y editar el código HTML, CSS y JavaScript del analizador de texto.

• HTML (HyperText Markup Language): HTML es el lenguaje estándar utilizado para crear la estructura y el contenido de las páginas web. Permite definir elementos como encabezados, párrafos, imágenes, enlaces y otros elementos necesarios para mostrar información en un navegador web.

• CSS (Cascading Style Sheets): CSS es un lenguaje de estilo utilizado para definir el diseño, la presentación y la apariencia visual de las páginas web. Permite establecer propiedades como colores, fuentes, márgenes, alineaciones y efectos visuales para mejorar el aspecto estético de la aplicación.

• JavaScript: JavaScript es un lenguaje de programación de alto nivel y orientado a objetos que se utiliza principalmente para agregar interactividad a las páginas web. Con JavaScript, puedes manipular y modificar el contenido de la página, responder a eventos del usuario, realizar validaciones de formularios, crear efectos visuales y gestionar la lógica de la aplicación.

• Pruebas unitarias: Las pruebas unitarias son un enfoque de prueba en el que se verifican las partes más pequeñas y aisladas del código, como funciones o componentes, para asegurarse de que funcionan correctamente. Las pruebas unitarias se escriben utilizando frameworks de pruebas (Jest) y ayudan a detectar y corregir errores, garantizando que el código cumpla con los requisitos y funcione de acuerdo a lo esperado.

• GitHub: Es una plataforma de desarrollo colaborativo basada en la nube que permite alojar, gestionar y compartir proyectos de software utilizando el sistema de control de versiones Git. Fue utilizado para almacenar y gestionar el repositorio del proyecto del analizador de texto. Con GitHub, se pudo mantener un registro de todas las versiones del código, realizar seguimiento de cambios, colaborar con otros desarrolladores y facilitar la distribución y el acceso al proyecto. Además, GitHub proporciona herramientas para la gestión de problemas (issues), revisión de código (pull requests) y despliegue del proyecto en un servidor web.