Data Lovers

• 1. Introducción
• 2. Resumen del proyecto
• 3. Historias de usuario
• 4. Prototipo de baja fidelidad
• 5. Prototipo de alta fidelidad
• 6. Github Page
• 7. Objetivos de aprendizaje
• 8. Pistas, tips y lecturas complementarias
• 9. Para considerar Project Feedback

1. Introducción

A raíz de la curiosidad de nuestros corazones amantes de la animación, hemos creado una pagina cuya función radica en alimentar la curiosidad y ampliar el conocimiento sobre las bellas obras de arte que han visto la luz gracias a uno de los más grandes estudios de animación japonesa: Studio Ghibli.

2. Resumen del proyecto

En este proyecto se nos ha asignado la tarea de creaar una pagina web que permita a distintos tipos de usuarios acceder a una determinada cantidad de información, previamente proporcionada, de la forma más comoda y amigable posible.

Como entregable final se a obtenido una página web que permita visualizar la data, filtrarla y ordenarla.

3. Historias de usuario

Definición de Terminado.

• Todo el código está en la rama principal/main del repositorio.
• La página está publicada en Github Pages y es accesible mediante un enlace/link/liga.
• Cada estudiante del equipo ha hecho code review del código escrito por la(s) otra persona(s).
• Se hacieron pruebas de usabilidad con al menos 2 usuarias y se incorporan las mejoras identificadas en la versión.
• La UI es responsive (teléfonos y PC).
• Todos los personajes/películas aparecen en una misma vista, en forma cuadrícula sin ningún orden en particular.
• La vista no tiene paginación, se hace scroll desde el primer elemento hasta el último.
• Cada cuadrícula contiene:

• Nombre de personaje/película
• Imagen del personaje/pelicula

• La UI es igual al prototipo de alta fidelidad (colores, tamaños de bloques,tipo de letra, tamaño de letra, imágenes, etc. )

4. Protottipo de baja fidelidad

5. Prototipo de alta fidelidad

6. Github page

• Pagina desplegada

7. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto.

HTML

• [*] Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• [*] Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• [*] Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• [*] Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• [*] Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

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

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• [*] Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• [*] Diferenciar entre tipos de datos primitivos y no primitivos

• [*] Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• [*] Objetos (key, value)

  Links

  • Objetos en JavaScript

• [*] Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• [*] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• [*] Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• [*] Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• [*] Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• [*] Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• [*] 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

  • Sitio oficial de GitHub Pages

• [*] 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

• [*] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

8. Pistas, tips y lecturas complementarias

Contenido de referencia

Diseño de experiencia de usuario (User Experience Design)

• Investigación con usuarios / entrevistas
• Principios de diseño visual

Desarrollo Front-end

• Unidad de testing en curso de JavaScript en LMS.
• Unidad de arreglos en curso de JavaScript en LMS.
• Unidad de objetos en curso de JavaScript en LMS.
• Unidad de funciones en curso de JavaScript en LMS.
• Unidad de DOM en curso de Browser JavaScript en LMS.
• Array en MDN
• Array.sort en MDN
• Array.map en MDN
• Array.filter en MDN
• Array.reduce en MDN
• Array.forEach en MDN
• Object.keys en MDN
• Object.entries en MDN
• Fetch API en MDN
• json.org
• expressions-vs-statements
• expresión vs sentencia
• datos atómicos vs datos estructurados
• Modulos: Export
• Modulos: Import

Herramientas

• Git
• GitHub
• GitHub Pages
• Node.js
• Jest

Organización del Trabajo

• Historias de Usuario. Ojo que Cris no diferencia Definición de terminado de Criterios de Aceptación y nosotros sí lo haremos. Más detalles en la guía.
• Cómo dividir H.U.

9. Para considerar Project Feedback

• Tiene una interfaz que cumple los criterios mínimos con al menos 3 Historias de Usuario.
• El proyecto será entregado incluyendo pruebas unitarias que cubren un mínimo del 70% de statements, functions, lines y branches (fijate en las funciones de filtrar, ordenar etc la data).
• El proyecto será entregado libre de errores de eslint (los warnings están ok).
• El proyecto será entregado subiendo tu código a GitHub.
• La interfaz será "desplegada" usando GitHub Pages.
• El README contiene una definición del producto e Historias de Usuario.