diff --git a/README.md b/README.md index 4fc32488..3e07c630 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ ## 1. Resumen del proyecto -En este proyecto se construyó la Red Social "BookReads" para los amantes de la lectura, su implementación es un SPA (single-page application). BookReads permite a cualquier usuario crear una cuenta de acceso y loguearse con ella, mediante correo electrónico, Google, Facebook y GitHub. Una vez creada una cuenta, el usuario puede establecer el nombre de perfil, nombre de usuario y una breve descripción. Una vez que el usuario haya completado su información de cuenta, se muestra el feed o timeline en donde podra crear posts sobre el libro que está leyendo o acaba de terminar de leer. También podra ver posts de otros usuarios e interactuar con ellos mediante un botón de like. Igualmente, se permite editar y eliminar post del usuario actual. +En este proyecto se construyó una Red Social **"BookReads"** para los amantes de la lectura, su implementación es un SPA (single-page application) optimizada para moviles. BookReads permite a cualquier usuario crear una cuenta de acceso y loguearse con ella mediante correo, Google, Facebook y GitHub. Una vez creada una cuenta, el usuario puede establecer el nombre de perfil, nombre de usuario y una breve descripción. Una vez que el usuario haya completado su información de cuenta, se muestra el feed o timeline en donde podra crear posts sobre el libro que está leyendo o acaba de terminar de leer. También podra ver posts de otros usuarios e interactuar con ellos mediante un botón de like. Igualmente, se permite editar y eliminar los post del usuario que ha iniciado sesión.
@@ -33,6 +33,14 @@ src="images/feed.png"/> ### Problemática La posibilidad de compartir e interactuar en un mismo espacio con diferentes usuarios respecto a sus opiniones sobre contenidos de lectura, teniendo asimismo un perfil personalizado en la red social. +### Investigación con usuarios +Con la finalidad de definir la funcionalidad que los usuarios esperaban ver en nuestra red social, se diseñó y aplicó una encuesta a 20 potenciales usuarios. Apartir de los resultados se definió que la aplicación web debía permitir a los usuarios: +- Crear una cuenta personal e iniciar sesión en la misma. +- Leer opiniones de otros usuarios sobre lo que leen. +- Compartir sus propios comentarios o reflexiones asociados a libros que han leído o están leyendo. +- Obtener recomendaciones o sugerencias sobre lecturas que podrían interesarles. +- Poder dar like y dislike a las publicaciones. + ### Historias de usuario 1. Como usuaria/o de la red social 'BookReads' me gustaría visualizar las opciones de registrarme o iniciar sesión al entrar al sitio de la red social. 2. Como usuaria/o me gustaría darme de alta mediante correo electrónico para crear una cuenta personal y formar parte de BookReads. @@ -42,10 +50,10 @@ La posibilidad de compartir e interactuar en un mismo espacio con diferentes usu 6. Como usuaria/o me gustaría visualizar la ventana de feed para realizar un post de la lectura que estoy leyendo para poder participar en la comunidad. 7. Como usuaria/o me gustaría poder eliminar los posts que creé para que ya no exista registro sobre ellos en la red social. 8. Como usuaria/o me gustaría poder editar un post que hice para poder corregirlo ante la comunidad. -9. Como usuaria/o me gustaría visualizar los likes que le dan o doy a mis posts para para saber a cuántos les gusta lo que escribo. -10. Como usuaria/o me gustaría cerrar sesión para poderme salir de BookReads. +9. Como usuaria/o me gustaría visualizar los likes que le dan o doy a mis posts para para saber a cuántas personas les gusta lo que escribo. +10. Como usuaria/o me gustaría cerrar sesión para poder salir de BookReads. -## 3. Prototipo de baja fidelidad +## 3. Prototipo de alta fidelidad


## 4. Interfaz gráfica final +La interfas gráfica está optimizada para ser vista en dispositivos móviles. Las pantallas a las que puede acceder el usuario se muestran a continuación. + +*Landing-page de Bookreads.* +![Landing page de BookReads](./src/assets/bookreads-landing.png) + +*Creación de cuenta.* +![Crea una cuenta](./src/assets/bookreads-create-acc.png) + +*Agregar información al perfil de un usuario nuevo.* +![Agregar información al perfil del usuario](./src/assets/bookreads-add-info.png) + +*Iniciar sesión.* +![Inicia sesión](./src/assets/bookreads-sign-in.png) + +*Vista del timeline.* +![Vista del timeline](./src/assets/bookreads-timeline.png) + +*Vista del timeline enfocada en las publicaciones.* +![Vista del timeline al hacer scroll](./src/assets/bookreads-timeline-2.png) + +*Visualización de la información del perfil del usuario y opción de cerrar sesión.* +![Perfil y opción de cerrar sesión](./src/assets/bookreads-user-profile.png) diff --git a/src/assets/bookreads-add-info.png b/src/assets/bookreads-add-info.png new file mode 100644 index 00000000..f2611dc7 Binary files /dev/null and b/src/assets/bookreads-add-info.png differ diff --git a/src/assets/bookreads-create-acc.png b/src/assets/bookreads-create-acc.png new file mode 100644 index 00000000..e1daab41 Binary files /dev/null and b/src/assets/bookreads-create-acc.png differ diff --git a/src/assets/bookreads-landing.png b/src/assets/bookreads-landing.png new file mode 100644 index 00000000..20368d40 Binary files /dev/null and b/src/assets/bookreads-landing.png differ diff --git a/src/assets/bookreads-sing-in.png b/src/assets/bookreads-sing-in.png new file mode 100644 index 00000000..7cc1051b Binary files /dev/null and b/src/assets/bookreads-sing-in.png differ diff --git a/src/assets/bookreads-timeline-2.png b/src/assets/bookreads-timeline-2.png new file mode 100644 index 00000000..641fb958 Binary files /dev/null and b/src/assets/bookreads-timeline-2.png differ diff --git a/src/assets/bookreads-timeline.png b/src/assets/bookreads-timeline.png new file mode 100644 index 00000000..44370f66 Binary files /dev/null and b/src/assets/bookreads-timeline.png differ diff --git a/src/assets/bookreads-user-profile.png b/src/assets/bookreads-user-profile.png new file mode 100644 index 00000000..496f48af Binary files /dev/null and b/src/assets/bookreads-user-profile.png differ diff --git a/src/style.css b/src/style.css index 164f484f..5cd6e068 100644 --- a/src/style.css +++ b/src/style.css @@ -17,9 +17,9 @@ html { height: 100%; } -/* .material-icons-outlined { +.material-icons-outlined { font-family: "Material Icons"; -} */ +} /*********************************mobile de landing page*******************************/ body {