Skip to content

MilenaPacheco/DEV013-dataverse

BranchesTags
 
 

Repository files navigation

MovieDev

Visual Studio Code HTML5 CSS3 JavaScript Git GitHub

Acerca de la Página Web

1. Resumen del proyecto

En este proyecto, hemos creado la plataforma web MovieDev, la cual funciona como una colección de tarjetas que abarcan 24 películas de los géneros: documental, thriller, ciencia ficción, drama y animación. Todos las películas vinculadas al fascinante mundo de la tecnología, pensando en nuestras usuarias ideales: "Desarrolladoras Web". La información recopilada se basa en un conjunto de datos generados con la colaboración de ChatGPT.

--

--

Características principales

La página web MovieDev se centra en ofrecer tres funciones clave:

  1. Ordenamiento: las películas pueden ser ordenadas de manera intuitiva.
  2. Filtrado: la capacidad de filtrar la información.
  3. Estadísticas: se realizan distintos cálculos con los datos de las 24 películas

2. Funcionalidades destacadas

Ordenamiento

  • Ordenamiento por año: los usuarios pueden organizar la lista de películas según el año de lanzamiento, facilitando la exploración cronológica y permitiendo sumergirse en la evolución de las representaciones tecnológicas en el cine.

  • Ordenamiento por nombre: la opción de ordenar alfabéticamente facilita la búsqueda de películas específicas por título, proporcionando una ruta rápida y eficiente a la información deseada.

Filtrado

  • La capacidad de filtrar las películas según su género: documental, thriller, ciencia ficción, drama y animación, permite a los usuarios obtener resultados específicos al explorar el contenido.

Estadísticas

  • Estadísticas por puntaje: selecciona y muestra en pantalla la data que cumple estrictamente con alguno de estos tres requisitos del puntaje en porcentaje, entre el 50% y 70%, 70% y 90%, y sobre el 90% de aceptación.

  • Estadísticas por país: calcula la frecuencia de películas existentes por país, proporcionando una visión estadística de la distribución geográfica de las películas en el conjunto de datos de MovieDev.

Diseño adaptativo y estilo atractivo

  • Diseño adaptativo: la página web ha sido diseñada pensando en la accesibilidad, siendo completamente responsive para adaptarse a dispositivos de diferentes tamaños, desde computadoras de escritorio hasta teléfonos móviles.

  • Estilo atractivo: la interfaz se beneficia de un diseño estéticamente agradable, con colores y elementos visuales que mejoran la experiencia de navegación y destacan la temática tecnológica.

Test unitarios

MovieDev fue desarrollada en conjunto con un exhaustivo conjunto de pruebas unitarias en formato Jest, una herramienta ampliamente reconocida para la realización de pruebas en proyectos JavaScript.

La ventaja clave de emplear pruebas unitarias radica en su capacidad para verificar la funcionalidad correcta de las diversas funciones y la eficaz modularización del código.

Durante el proceso de prueba, nos enfocamos en cada función individual, asegurándonos de que cumpliera con su propósito específico. Estas pruebas no solo ayudaron a identificar y corregir posibles errores, sino que también garantizaron la estabilidad y fiabilidad de la aplicación.

3. Consideraciones técnicas

La aplicación fue realizada en el marco del bootcamp para Desarrolladoras Web de Laboratoria, en el que a su vez se nos solicitaron las siguientes consideraciones técnicas:

  • Las funcionalidades de ordenar deben operar sobre la data filtrada. Por ejemplo, si filtro las películas de comedia y luego las ordeno por nombre ascendentemente, la aplicación deberá mantener el filtro aplicado y ordenar las películas de comedia.

  • La aplicación permite a la usuaria reiniciar la aplicación, limpiando filtros y ordenamiento, con un <button> con un atributo de datos data-testid="button-clear".

  • Las operaciones de filtrar, ordenar, limpiar, etc. no deben recargar la página, si no que deben agregar el contenido en una manera dinámica via javascript.

  • La aplicación es responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.

Diseño Mobile:

Tomamos en cuenta las propuestas de Laboratoria para nuestro diseño:

Pantalla móvil

--

Diseño Desktop:

Pantalla móvil

--

Estructura del Proyecto.

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── README.md
├── package.json
├── src
|  ├── data 
|  |  └── dataset.js (La que hayas generado con la IA)
|  ├── dataFunctions.js
|  ├── view.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.js
   └── dataFunctions.spec.js
   └── tests-read-only

4. Criterios de aceptación mínimos del proyecto

Al ser parte del programa de bootcamper Laboratoria para Desarrolladoras Web, el proyecto presenta criterios mínimos de aceptación para considerarse entregable, a continuación se describen:

Criterios de código

Conjunto de pruebas que se superen exitosamente:

npm run test:oas-html
npm run test:oas-css
npm run test:oas-web-api
npm run test:oas-js
npm run test:oas-prompting
npm run test:oas // Esto es para correr todos los tests de OAs

HTML

  • Uso de HTML semántico

    • Tiene un <header> con <h1>
    • Tiene un <footer>
    • Tiene un <main> con <h2>
    • Todas las etiquetas de controles (inputs, selects, radio, etc) tienen <label>
    • <ul> esta usado para dibujar la data
    • Los hijos de <li> usan attributos de microdata itemscope e itemprop

CSS

  • Uso de selectores de CSS

    • Uso de selector class para los items
    • Uso de flexbox en sentido row y column
    • Uso de flexbox para el elemento que contiene los items
    • Uso de flexbox para el elemento que contiene los UI inputs

Web APIs

  • Uso de selectores del DOM

    • La aplicación usa querySelector para buscar los elementos del DOM

  • Manejo de eventos del DOM (listeners, propagación, delegación)

    • addEventListener con callback que tiene parámetro de event, lo que permite el uso del objeto event con event.target o event.currentTarget
    • La aplicación registra Event Listeners para escuchar click, change, keyup dependiendo del evento que se quiere escuchar

  • Manipulación dinámica del DOM

    • La aplicación actualiza el atributo innerHTML.
    • La aplicación usa createElement y appendChild, o template strings para crear elementos

JavaScript

Generación de datos

Esta data tiene una estructura archivo javascript. Este archivo, exporta un arreglo con 24 objetos y la estructura de cada objeto es la siguiente:

  • id: identificador único (no pueden haber dos elementos con el mismo id). Debe ser un string de no más de 32 characteres, en minúscula, compuesto solo por letras, números, underscore (_) o guión (-). Por ejemplo: "ada-lovelace".
  • name: el nombre del personaje, país, película, etc.
  • shortDescription: descripción corta del elemento. Esta descripción deberá tener como máximo 20 palabras.
  • description: descripción extendida del elemento. Esta descripción deberá tener entre 80 y 100 palabras. Al momento de mostrar este dato en pantalla puedes truncarlo para que no ocupe tanto espacio.
  • imageUrl: URL de la imagen. Esta imagen será generada a través de alguna herramienta basada en inteligencia artifical. Una vez generada la imagen, y guardada en tu repo, deberás agregar la URL en este campo.
  • facts: un objeto con al menos 3 "hechos" o "info" sobre este elemento.

Un ejemplo de data de MovieDev:

export default [
  {
    "id": "hackers",
    "name": "Hackers",
    "shortDescription": "Jóvenes hackers y aventureros luchan contra la injusticia.",
    "description": "Ambientada en el mundo del ciberespacio.....",
    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/Hackers.png",
    "facts": {
      "yearMovie": 1995,
      "directorMovie": "Iain Softley",
      "productionCompany": "MGM",
      "genreMovie": "Thriller",
      "genreValue": "thriller"
    },
    "extraInfo": {
      "rottenTomatoesScore": "32%",
      "countryMovie": "Estados Unidos",
      "durationMovie": "107 minutos"
    }
  },
  },
  //... 23 objetos más
]

Prompt utilizado

  • Capturas del prompting:

La data utilizada en MovieDev se generó con ayuda de inteligencia artificial como se presenta a continuación:

--

--

Además, usamos imágenes generadas a través de inteligencia artificial. Ejemplo de promp y resultado:

Pantalla móvil

--

Diseño de la Interfaz de Usuaria

Después de seleccionar la temática que queríamos trabajar: página web sobre películas de tecnología y desarrollo web, decidimos definir a nuestra usuaria ideal respondiendo las siguientes preguntas:

  • ¿Quiénes son las principales usuarias del producto?

Mujeres, futuras programadoras Web. Con interés en inmersión en el mundo del desarrollo Web.

  • ¿Cuáles son los objetivos de estas usuarias en relación con el producto?

Saber más sobre tecnología, sus usos, alcances, historia, utopías y distopías. Contextualizarse más. Información para conversaciones interesantes con personas del rubro.

  • ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?

Datos básicos y estadísticos interesantes. Resúmenes, imágenes asociadas a los films.

  • ¿Cuándo utilizan o utilizarían el producto

En tiempo de ocio.

Nuestra investigación derivó en todas las HISTORIAS DE USUARIA de nuestro proyecto, que se muestran a continuación:

image

--

Prototipos de alta, mediana y baja fidelidad

A continuación se muestran capturas de nuestros prototipos de baja, mediana y alta fidelidad. Para los cuales pedimos feedback a nuestras compañeras y coaches.

Baja fidelidad

image __

Mediana fidelidad

image

Enlace: https://www.figma.com/proto/XNxIMUAnDnIHL85t7uu5W4/MovieDev-MEDIANA-F.?type=design&node-id=0-1&t=yTF97nxfWS6n1wPi-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=17%3A175

Alta fidelidad

image

Enlace: https://www.figma.com/file/6BDUns99NmJqwwlsWQ3NEA/Untitled?type=design&mode=design&t=Y5brons7GHSLIU9y-0

Testeos de usabilidad

Arrojaron lo siguiente:

  • Problemas de usabilidad en la posición del menú de filtrado, ordenado y botones asociados, así como en la adecuación de sus tamaños. Este desafío surgió debido a que la disposición y el tamaño de estos son factores cruciales para garantizar una experiencia de usuario intuitiva y eficiente. Enfrentamos este desafío con un enfoque cuidadoso en el diseño de la interfaz.
  • Teníamos muchos colores en el diseño de la interfaz. También resultaban muy brillantes.
  • No funcionaba en cualquier tamaño de dispositivo.
  • Se cargaban las tarjetas sin las imágenes.
  • Fuentes muy grandes o ilegibles por falta de correcto contraste.
  • Toda la página no tenía el mismo nivel de diseño, habían partes más crudas que otras.

Todos estos temas fueron considerados y abordados en nuestro entregable.

5. Objetivos de aprendizaje

Como equipo reflexionamos y marcamos los objetivos que hemos llegado a entender y aplicar en el proyecto. Estos objetivos fueron determinantes en nuestra estrategia de trabajo.

HTML

CSS

Web APIs

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

  • Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

  • Git: Instalación y configuración

  • Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

  • Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

  • GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • GitHub: Despliegue con GitHub Pages

    Links

  • GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • Seguir los principios básicos de diseño visual

Investigación

AI Prompting

6. Algunos conceptos aplicados

filter:

Filtra elementos de un array basándose en una condición especificada. Sintaxis:

const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);

sort:

Ordena los elementos de un array de acuerdo con la función de comparación proporcionada. Sintaxis:

array.sort([compareFunction]);

map:

Crea un nuevo array con los resultados de llamar a una función proporcionada para cada elemento del array. Sintaxis:

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg]);

reduce:

Aplica una función acumulativa a los elementos de un array para reducirlos a un solo valor. Sintaxis:

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

parseFloat:

Convierte una cadena en un número de punto flotante. Sintaxis:

const number = parseFloat(string);

localeCompare:

Compara dos cadenas de texto y devuelve un valor que indica si una es menor, igual o mayor que la otra. Sintaxis:

const comparison = string1.localeCompare(string2);

push:

Agrega uno o más elementos al final de un array. Sintaxis:

array.push(element1[, element2[, ...[, elementN]]]);

length:

Devuelve la cantidad de elementos en un array. Sintaxis:

const arrayLength = array.length;

puntos ".":

Se utiliza para acceder a propiedades de un objeto. Sintaxis:

const person = {
  name: 'John',
  age: 30,
  job: 'Developer'
};

console.log(person.name); // Resultado: 'John'

corchetes "[]":

Se utiliza para acceder a elementos de un array o propiedades de un objeto cuando el nombre de la propiedad es dinámico o contiene caracteres especiales. Sintaxis:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[1]); // Resultado: 'banana'

const propertyName = 'age';
const person = {
  name: 'Alice',
  age: 25
};

console.log(person[propertyName]); // Resultado: 25

querySelector:

Selecciona el primer elemento del DOM que coincida con el selector especificado. Arroja un elemento del DOM o null si no se encuentra ninguna coincidencia.

const element = document.querySelector(selector);

toggle:

Alterna entre añadir y eliminar una clase en un elemento del DOM.

element.classList.toggle(className);

addEventListener:

Agrega un evento a un elemento del DOM para que escuche eventos específicos y ejecute una función cuando se produce el evento.

element.addEventListener(eventType, callback);

createElement:

Crea un nuevo elemento del DOM con el nombre de la etiqueta especificada.

const newElement = document.createElement(tagName);

appendChild:

Añade un nodo al final de la lista de hijos de un nodo padre.

parentNode.appendChild(childNode);

removeChild:

Elimina un nodo hijo de un nodo padre.

parentNode.removeChild(childNode);

innerHTML:

Obtiene o establece el contenido HTML de un elemento del DOM.

const content = element.innerHTML;
element.innerHTML = newContent;

textContent:

Obtiene o establece el contenido de texto de un elemento del DOM.

const textContent = element.textContent;
element.textContent = newTextContent;

setInterval:

Ejecuta una función a intervalos regulares especificados en milisegundos.

const intervalId = setInterval(callback, interval);

className:

Obtiene o establece la clase de un elemento del DOM.

const classes = element.className;
element.className = newClasses;

classList:

Obtiene una lista de las clases de un elemento del DOM

const classes = element.classList;

style:

Obtiene o establece el estilo de un elemento del DOM.

const elementStyle = element.style;

selectedIndex:

Obtiene o establece el índice seleccionado en un elemento "select" del DOM.

const index = selectElement.selectedIndex;
selectElement.selectedIndex = newIndex;

parentNode:

Obtiene el nodo padre de un elemento del DOM.

const parent = element.parentNode;

value:

Obtiene o establece el valor de un elemento del DOM, como en los elementos de entrada.

const elementValue = element.value;
element.value = newValue;

e.target.value:

En un evento, e.target se refiere al elemento que desencadenó el evento, y .value extrae el valor actual de ese elemento. Se utiliza para obtener el valor de un elemento en el que se ha desencadenado un evento, comúnmente usado en eventos de cambio (change) en elementos de formulario.

const handleChange = (e) => {
  const value = e.target.value;
  // Resto del código...
};

// Agregando el event listener para el evento de cambio
elemento.addEventListener('change', handleChange);

Object.keys:

Se utiliza para obtener un array que contiene las claves del objeto proporcionado, permitiendo el acceso a las propiedades del objeto de manera iterable.

const obj = { a: 1, b: 2, c: 3 };
const keysArray = Object.keys(obj);

console.log(keysArray); // Resultado: ['a', 'b', 'c']

Eventos:

change:

Se activa cuando el valor de un elemento cambia (por ejemplo, en un elemento de formulario).

element.addEventListener('change', callback);

click:

Se activa cuando se hace clic en un elemento.

element.addEventListener('click', callback);

Elementos del DOM:

document:

La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM.

window:

Representa la ventana del navegador y proporciona métodos y propiedades .

Diferencia entre expresión y sentencia:

  • Expresión: una expresión es cualquier fragmento de código que produce un valor. Ejemplo: 2 + 3 es una expresión que evalúa a 5.

  • Sentencia: una sentencia es una unidad completa de código que realiza una acción. Ejemplo: if (x > 0) { console.log("Positivo"); } es una sentencia que ejecuta un bloque de código si la condición es verdadera.

La distinción clave radica en que una expresión produce un valor, mientras que una sentencia realiza una acción o controla el flujo del programa.

About

milenapacheco.github.io/DEV013-dataverse/

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 90.9%
  • CSS 6.0%
  • HTML 3.1%