- ShojoAnimeSocial
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..
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.
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.
| Archivo | Descripción |
|---|---|
| animes.css | Estilos de animes |
| cssPerfil.css | Estilos vista perfil |
| logueado.css | Estilo vista logueado |
| style.css | Estilos vista principal |
Carpeta con material visual utilizado en el cuerpo del proyecto
| 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 |
| | |
| |
| Archivo | Descripción |
|---|---|
| index.spec.js | Test Unitarios de las funciones implementadas en el archivo data.js |
| |
| Archivo | Descripción |
|---|---|
| Readme.md | Informacion del proyecto y objetivos de aprendizaje |
| |
| Carpeta | Descripción |
|---|---|
| Imagenes | Carpeta con material visual utilizado en el cuerpo del proyecto |
| |
Utilizamos [Trello] como herramienta de coordinación para el óptimo desarrollo del proyecto, para verlo da click aquí.
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.
- 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.
- 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.
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | 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 primitivos y no primitivos.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- 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)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- 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.
-
Historia 1: Crear un inicio llamativo que invite al usuario a loguearse
-
DT:
- Crear el Sketch de baja fidelidad del inicio
- Crear el Sketch de Alta fidelidad
- Definir la tematica del Logo
- Hicieron los test unitarios
- Determinar el fondo del Index
- Definir el tipo y color del font size
-
CA:
- Debe ser First Mobile
- Debe ser responsive
- Debe tener colores llamativos
- Debe tener el Logo
- Debe tener el inicio con los links de Login y Registro
-
Historia 2: Crear el formulario de registro para que el logueo del usuario
-
DT:
- Crear el Sketch de baja fidelidad del inicio
- Crear el Sketch de Alta fidelidad
- Determinar información pedida al usuario
- Definir el tipo y color del font size para el formulario
- Crear los input necesarios para solicitar la información al usuario
-
CA:
- Debe ser First Mobile
- Debe ser responsive
- Debe tener letra y tamaño amigable para el usuario
- Debe tener colores amigables para el usuario
- Debe recopilar toda la información necesaria del usuario
-
Historia 3: Crear el formulario de ingreso de usuario, ya registrado.
-
DT:
- Crear el Sketch de baja fidelidad del inicio
- Crear el Sketch de Alta fidelidad
- Definir el tipo y color del font size
- Asignar nombre y contraseña
- Crear los input para la información ingresada por el usuario
- Crear boton para logueo
-
CA:
- Debe ser First Mobile
- Debe ser responsive
- Debe ser acorde con la tematica
- Solicitar al usuario información para ingreso
- Tener el botón para logueo
-
Historia 4: Crear vista de inicio para usuario logueado
-
DT:
- Crear el Sketch de baja fidelidad del inicio
- Crear el Sketch de Alta fidelidad
- Incluir el logo
- Crear el menu con los links
-
CA:
- Debe ser First Mobile
- Debe ser responsive
- Debe tener colores de la tematica usada
- Debe tener el Logo
- Debe tener menu para opciones de usuario: Inicio, Perfil, Animes, Mangas, Cerrar sección
- Debe mostrar la publicaciones del usuario y linkeos
-
Login con Firebase:
- Creación de cuenta de acceso y autenticación con cuenta de correo y contraseña, y también con una cuenta de Google.
-
Validaciones:
- Solamente se permite el acceso a usuarios con cuentas válidas.
- No pueden haber usuarios repetidos.
- La cuenta de usuario debe ser un correo electrónico válido.
- Lo que se escriba en el campo (input) de contraseña debe ser secreto.
-
Comportamiento:
- Al enviarse el formulario de registro o inicio de sesión, debe validarse.
- Si hay errores, se deben mostrar mensajes descriptivos para ayudar al usuario a corregirlos.
-
Validaciones:
- Al publicar, se debe validar que exista contenido en el input.
-
Comportamiento:
-
Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrar contenido.
-
Poder publicar un post.
-
Poder dar y quitar like a una publicación. Máximo uno por usuario.
-
Llevar un conteo de los likes.
-
Poder eliminar un post específico.
-
Pedir confirmación antes de eliminar un post.
-
Al dar click para editar un post, debe cambiar el texto por un input que permita editar el texto y luego guardar los cambios.
-
Al guardar los cambios debe cambiar de vuelta a un texto normal pero con la información editada.
-
Al recargar la página debo de poder ver los textos editados.
-
Alterar y persistir datos. Los datos que agregues o modifiques deberán
-
Hacer al menos 2 entrevistas con usuarios.
-
Hacer un prototipo de baja fidelidad.
-
Asegurarte de que la implementación en código siga los lineamientos del diseño. -Hacer sesiones de testing de usabilidad con el producto en HTML.
-