- 1. Definición del producto
- 2. Historias de usuario
- 3. Diseño de la Interfaz de Usuario
- 4. Prototipo
- 5. Entrevistas con usuarios
- 6. Test de usabilidad
- 7. Objetivos de aprendizaje
🌳 EcoPunto es una red social que promueve el intercambio, donación o búsqueda de materiales reciclados. ♻️
-
Principales usuarios del producto 🙋♂️🙋♀️
- Proveedor de material reciclado: personas que quieren donar o intercambiar material reciclado (botellas de plástico, ropa usada, latas, papel reciclado, cartones, libros usados, muebles usados, artefactos usados, otros).
- Recolector de material reciclado: personas interesadas en adquirir productos en desuso, que puedan reciclarse para volver a darle un nuevo uso.
-
Problema que resuelve 💡
- La dificultad para encontrar en la web a personas interesadas en adquirir material reciclado.
- La preocupación para ubicar un lugar donde llevar productos en desuso
- Ayuda a disminuir la contaminación por residuos sólidos y fomenta la cultura de reciclaje.
La red social servirá para poner fácilmente en contacto a proveedores y recolectores de material reciclado.
Prototipo de baja fidelidad. ✍️
Prototipo de alta fidelidad. 🎨
-
Vista mobile 📱
-
Vista Desktop 💻
Apreciación del prototipo de alta fidelidad:
-
🎤 Entrevista 1: Realizado por una mujer de 31 años, estudiante FrontEnd.
- Buena combinación de colores, van relacionados a la temática del proyecto.
- Los colores de las letras facilitan la lectura.
-
🎤 Entrevista 2: Realizado por una mujer de 27 años, estudiante FrontEnd.
- En la vista de register, agregar un input para nombre de usuario.
- Buena combinación de colores, van relacionados a la temática del proyecto.
-
👩🔬 Test 1: Se mostró cómoda porque entendió la funcionalidad de los inputs y botones.
-
👨🔬 Test 2: Recomendó adicionar un poco más de información en la vista de registro, para que el usuario tenga claro de qué se trata la red social. Por lo demás, el usuario mencionó que la página es comprensible y amigable.
-
👨🔬 Test 3: El usuario indicó que comprendió la funcionalidad de la red social, no hubo inconvenientes.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de CSS Grid Layout
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Ruteado (History API, evento hashchange, window.location)
-
Arrays (arreglos)
-
Objetos (key, value)
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
Callbacks
-
Promesas
-
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
-
GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
GitHub: Organización en Github (projects | issues | labels | milestones | releases)
-
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 Auth
-
Firestore