ShojoAnimeSocial

Índice

• ShojoAnimeSocial
  • Índice
  • 1. Preámbulo
  • 2. Resumen del desarrollo del proyecto
  • 3. Carpetas que encontrarás en el repositorio
  • SRC
    • CSS
    • Imagenes
    • LIB
  • TEST
  • README
    • Recursos visuales
  • 4. Sketch inicial - Baja fidelidad
  • 5. Sketch Final - Alta fidelidad
  • 6. Planning del proyecto
  • 7. Objetivos de aprendizaje
    • HTML y CSS
    • DOM y Web APIs
    • JavaScript
    • Testing
    • Estructura del código y guía de estilo
    • Git y GitHub
    • Firebase
    • UX

1. Preámbulo

Este es el tercer proyecto que desarrollamos en el Bootcamp de [Laboratoria], propusimos una pagina donde simulamos una red social llamada [ShojoAnimeSocial] El objetivo principal de aprendizaje de este proyecto es construir una [Single-page Application (SPA)], (con más de una vista / página) en la que podamos leer y escribir datos..

2. Resumen del desarrollo del proyecto

Tras leer el [README] hicimos un sketch de baja fidelidad en balsamiq y un sketch de alta fidelidad en figma, donde se llevó a cabo una sesión de feedback todos los martes en cada sprint donde tuvimos la oportunidad de hacer mejoras prontas al prototipo de alta fidelidad. Forkeamos el proyecto base, lo desarrollamos localmente, desarrollamos la estructura básica en html, luego nos enfocamos en JavaScript mientras generabamos recursos visuales e interactuábamos con CSS y asi mismo nos efocamos en manipular las funciones para testearlas.

3. Carpetas que encontrarás en el repositorio

SRC

CSS

Archivo	Descripción
animes.css	Estilos de animes
cssPerfil.css	Estilos vista perfil
logueado.css	Estilo vista logueado
style.css	Estilos vista principal

Imagenes

Carpeta con material visual utilizado en el cuerpo del proyecto

LIB

Archivo	Descripción
animes.js	Vista de animes
header.js	Vista Inicial de las vistas
login.js	Vista de logueo
perfil.js	Vista de perfil de usuario
registro.js	Vista de registro
vistaLg.js	Vista de Inicio de logueado

Archivo	Descripción
Index.html	Html Principal
main.js	js principal
router.js	Router manejable

TEST

Archivo	Descripción
index.spec.js	Test Unitarios de las funciones implementadas en el archivo data.js

README

Archivo	Descripción
Readme.md	Informacion del proyecto y objetivos de aprendizaje

Recursos visuales

Carpeta	Descripción
Imagenes	Carpeta con material visual utilizado en el cuerpo del proyecto

4. Sketch inicial - Baja fidelidad

5. Sketch Final - Alta fidelidad

6. Planning del proyecto

Utilizamos [Trello] como herramienta de coordinación para el óptimo desarrollo del proyecto, para verlo da click aquí.

7. Objetivos de aprendizaje

El objetivo principal de aprendizaje de este proyecto es construir una Single-page Application (SPA) responsive (con más de una vista / página) en la que podamos leer y escribir datos.

HTML y CSS

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS.

DOM y Web APIs

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
• History API.
• localStorage.

JavaScript

• Uso de condicionales (if-else)
• Uso de condicionales (switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de bucles (while)
• Uso de funciones (parámetros)
• Uso de funciones (argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.
• Diferenciar entre tipos de datos primitivos y no primitivos.
• Uso de callbacks.
• Consumo de Promesas.

Testing

• Testeo unitario.
• Testeo asíncrono.
• Uso de librerias de Mock.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)
• Organización en Github (projects | issues | labels | milestones)

Firebase

• Firestore.
• Firebase Auth.
• Firebase security rules.
• Observadores. (onAuthStateChanged | onSnapshot)

UX

• Diseñar la aplicación pensando 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.