- 1. Presentación
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Historias de usuario
- 5. Criterios de aceptación mínimos del proyecto
- 6. Prototipos
- 7. Pruebas de usabilidad
- 8. Trabajo en equipo
En la actualidad nuestro entorno se desenvuelve entre corrientes de internet y redes sociales, hoy en día la humanidad tiene la necesidad de comunicar todo tipo de situaciones que se generan al rededor de su entorno, es por esta razón que nace "Enjoy The world" una red social que quiere ayudar a miles de usuarios alrededor del mundo a dar a conocer las diferentes fiestas que se celebran en sus ciudades que no tienen un impacto global y que se dan en distintas epocas del año, consideramos que esas pequeñas celebraciones son patrimonio de la humanidad y por consiguiente todos deberiamos saber de su existencia o por lo menos tener un lugar que nos brinde información detallada de cada una de estas. Es también la excusa para mostrar nuestro pequeño lugar en el mundo y fomentar las visitas de locales y extranjeros que se antojan de conocer en persona nuestras festividades.
El objetivo pricipal de realizar este trabajo, es poner a disposición de los usuarios una red social que le permita públicar las diferentes festividades que se realizan en sus ciudades, pueblos y regiones.
Para la construcción de la página web 'ENJOY THE WORLD' se realizÓ una planeación inicial con el objetivo de organizar la ejecución del proyecto por fases, que incluyeron todo lo relacionado al diseño y la funcionalidad y en general todos los aspectos visuales y de iteración entre el usuario y la aplicación.
Utilizando herramientas como la plataforma Figma, que nos brindó la facilidad de realizar diseños que pudieran adaptarse a las característica de una página web responsive a partir de dos tamaños básicos (mobil y desktop), logramos hacer un prototipo de alta fidelidad llamativo y amigable para cualquier tipo de usuario, implemetando el HTML semantico.
Una vez terminados los prototipos se comenzó a escribir el código base en: HTML, JS por medio de nodos, logrando independizar las vistas y dar la navegación entre las vistas por medio de un ruteo. Adicionalmente contamos con la conexión a una base de datos externa con firebase. A partir del resultado de las pruebas de usabilidad realizadas a los usuarios en diferentes etapas de la construcción se realizaron iteraciones a la propuesta inicial, hasta conseguir el resultado actual de la página.
Marcamos los objetivos que hemos alcanzado como equipo
- 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 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)
-
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 un producto o servicio poniendo a la usuaria en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
[Seguir los principios básicos de diseño visual]
- Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
-
Firebase Auth
-
Firestore
Historia de usuario 1
"YO COMO USUARIO de la RED SOCIAL (Enjoy the World) QUIERO una página de bienvenida PARA QUE me invite a suscribirme"
- Que la landing page tenga el formulario de registro*
- Que aparezca el nombre de la red social*
- Que sea atractiva y cumple con un diseño visual*
- Que permita registrarse con Google o con su correo electronico*
- 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*
- 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*
Historia de usuario 2
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO poder registrarme con mi email PARA poder ingresar y hacer uso de la app."
- La app cuenta con un formulario que le permite la captura del email y la contraseña del usuario.
- Si los datos ingresados no cumplen con las características solicitadas se generará un mensaje o alerta informándolo y le permitirá la usuario volver a intentarlo.
- Si los datos son correctos, se genera una alerta o mensaje de confirmación del registro.
- Al cerrar el mensaje de confirmación, el usuario ingresará automáticamente a su muro.
Historia de usuario 3
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO poder registrarme con Google PARA poder ingresar y hacer uso de la app."
- Que al hacer click en el botón dirija al usuario a la ventana de registro de Google
- Que ese mismo botón sirva para ingresar a la aplicación.
- Cuando el usuario ingrese sea redirigido a el muro de Enjoy de world.
Historia de usuario 4
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO un muro que me permita postear contenidos PARA recibir likes de otras personas de la Red Social"
- El muro tiene un espacio de texto donde se puede escribir un post.
- El espacio de texto cuenta con un botón para publicar el post.
- El botón captura el valor del post y lo procesa con Firebase.
- El muro pinta el post escrito por el usuario.
Historia de usuario 5
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO poder editar los post PARA realizar correcciones cuando me equivoco.
- En el espacio alrededor del post hay un botón que me permite editar lo que escribí cuando quiera modificarlo.
- La función del botón va a poder identificarse fácilmente.
- La modificación que realice va a visualizarse de inmediato en el post.
Historia de usuario 6
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO poder eliminar algún post PARA cuando ya no lo quiera en el muro.
- En el espacio alrededor del post hay un botón que me permite eliminar lo que escribí cuando ya no lo quiera en el muro.
- La función del botón va a poder identificarse fácilmente.
- La eliminación que realice va a visualizarse de inmediato en el post.
Historia de usuario 7
"YO COMO Usuario de la Red Social (Enjoy The World) QUIERO poder dar y recibir likes en los posts PARA demostrar cuánto ha gustado una publicación.
- En el espacio alrededor del post hay un botón que permite dar like a lo que un usuario haya escrito en su muro.
- La función del botón va a poder identificarse fácilmente.
- El botón tendrá un contador de likes que evidencie cuántos usuarios han hecho click en él.
- El botón va a cambiar de color o apariencia dependiendo de si se le da like o si se le quita el like.
- Debe ser una SPA.
- Debe ser responsive.
- Deben haber recibido code review de al menos una compañera de otro equipo.
- Hicieron los test unitarios
- Testearon manualmente buscando errores e imperfecciones simples.
- Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Desplegaron su aplicación y etiquetaron la versión (git tag).
- Boilerplate
- Definición del producto
- Historias de usuario
- Diseño de la Interfaz de Usuario
- Responsive
-
Creación de cuenta de usuario e inicio de sesión
-
Muro/timeline
- Pruebas unitarias (unit tests)
- Consideraciones técnicas UX
Se diseñaron e iteraron unos prototipos iniciales para conceptualizar desde las diferentes estrategias de 'mobil first' cómo quedaría la aplicación:
Posteriormente plasmamos los prototipos de alta fidelidad a partir de los cuales realizamos las pruebas de usabilidad.
Durante el proyecto conseguimos comprender cómo se articulan las diferentes integrantes de un equipo para conseguir los resultados esperados. Juntas aprendimos a planear alrededor de nuestro tiempo disponible y las herramientas que cada una tenía a disposición, producto de las experiencias pasadas y del aprendizaje personal. Nos vimos enfrentadas a diversos retos técnicos y personales que supimos afrontar, en ocasiones con apoyo de Laboratoria, pero en general con nuestros propios recursos internos. Descubrimos muchas cosas sobre nosotras mismas, sobre nuestros límites, sobre nuestro manejo de la frustración, pero sobre todo de nuestro temple, la comunicación asertiva, y nuestros inmensos deseos de aprender juntas a ser mejores desarrolladoras y mejores personas.