iBook (Social Network)

Índice

• 1. Integrantes
• 2. Resumen del proyecto
• 3. Definición del producto
• 4. Diseño de la Interfaz
• 5. Pruebas unitarias
• 6. Objetivos de aprendizaje

1. Integrantes

Proyecto elaborado por Melisa Gutierrez, Pamela Rupay y Rocio Sulca.

2. Resumen del proyecto

iBook es una red social, que ayudara a fomentar una comunidad de lectura, iBook permitir a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.

3. Definición del producto

¿Quiénes son los principales usuarios del producto? Toda persona que les guste la lectura, de cualquier genero: juvenil, historico, fiction, etc.

¿Qué problema resuelve el producto / para qué le servirá a estos usuarios? .

4. Diseño de la Interfaz

4.1 Diseño de la Interfaz de Usuario (prototipo de baja fidelidad)

4.2 Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)

Mobile

Desktop

5. Pruebas unitarias (unit tests)

• Los tests unitarios llegaron a cubrir un mínimo del 70% de statements, functions, lines, y branches.

5.1 Consideraciones técnicas UX

• Se realizo 10 entrevistas con usuarios.
• Se verifico el prototipo de baja fidelidad.
• En sesiones de testing de usabilidad a los usuarios.

6. Objetivos de aprendizaje

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

• Uso de CSS Grid Layout

  Links

  • A Complete Guide to Grid - CSS Tricks
  • Grids - 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

• Ruteado (History API, evento hashchange, window.location)

  Links

  • Manipulando el historial del navegador - MDN

JavaScript

• 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

• Diferenciar entre tipos de datos primitivos y no primitivos

• 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

• Pruebas asíncronas

  Links

  • Tests de código asincrónico con Jest - Documentación oficial

• Uso de mocks y espías

  Links

  • Manual Mocks 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)

• Callbacks

  Links

  • Función Callback - MDN

• Promesas

  Links

  • Promise - MDN
  • How to Write a JavaScript Promise - freecodecamp (en inglés)

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)

• GitHub: Organización en Github (projects | issues | labels | milestones | releases)

UX (User eXperience)

• Diseñar la aplicación pensando en y entendiendo al usuario

• Crear prototipos para obtener feedback e iterar

• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)

• Planear y ejecutar tests de usabilidad

Firebase

• Firebase Auth

  Links

  • Primeros pasos con Firebase Authentication en sitios web - Documentación oficial
  • Administra usuarios en Firebase (onAuthStateChanged)

• Firestore

  Links

  • Firestore - Documentación oficial
  • Reglas de seguridad de Firestore - Documentación oficial
  • Obtén actualizaciones en tiempo real con Cloud Firestore - Documentación oficial