ÍNDICE

• 1. Ecogram
• 2. Estudio de Usuario
• 3. Realización del Diseño
• 4. Tecnologías empleadas
• 5. Fuentes
• 6. Autores

---

1. Ecogram

♻️ Ecogram (Enveronmental Social Network) es una red social enfocada en crear una comunidad interesada en la preservación de nuestro único hogar "🌎El Planeta Tierra". Permite a cualquier usuario crearse una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.

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.

---

2. Estudio de Usuario ✍🏼

🕵🏼 ¿Quienes son los principales usuarios?

Los principales usuarios del producto son aquellas personas interesadas en encontrar una comunidad enfocada en la preservación del medio ambiente.

🕵🏼‍♀️ ¿Cuáles son los objetivos de estos usuarios en relación con el producto?

• Buscar usuarios con intereses afines.
• Poder publicar posts con información relevante sobre eventos, voluntariados o tips para el cuidado ambiental.
• Poder dar "me gusta" a las publicaciones.
• Poder Eliminar su publicaión.
• Poder editar su información personal que muestra en el perfil.

🕵🏽‍♂️ ¿Cuáles son las secciones más relevantes que quieren ver en la interfaz? y ¿por qué?

Según algunas encuestas que realizamos, los usuarios están interesados en ver:

• 📌 Sección de publicaciones:
  • Un muro 📃 para visualizar las publicaciones de todos los usuarios.
  • Sistema de filtrados para las publicaciones 📝: por nombre de usuario y por fecha 📅.
• 📌 Sección de perfil:
  • Se visualizará la información 🗂 del usuario: nombre, correo 📪, país, biografía e intereses.
• 📌 Sección para búsqueda de usuarios:
  • Contendrá todos los usuarios existentes. 🧔 👨‍🦱 👴 👩‍🦰 👱‍♂️ 👳 👲
  • Sistema de filtrados según intereses, país y nombre.
  • Opción para visualizar los posts según el usuario.
• 📌 Sección para editar el perfil:
  • Tendrá opciones para editar la biografía.
  • Tendrá opciones para escoger el país.
  • Tendrá opciones para escoger el avatar o adjuntar uno personalizado.
  • Tendrá opciones para escoger los intereses. 👨‍🌾 👩‍🔬 👨‍🚀
• 📌 Sección de información 📚 sobre Ecogram:
  • Contendrá enfoque, objetivo y fundadores de Ecogram.
• 📌 Sección de noticias globales sobre el medio ambiente:
  • Contendrá fuente oficial de la noticia 📰 publicada y tendra la opción de reedirigirte a la misma.

🕵🏾‍♀️ ¿Cuándo utilizan o utilizarían el producto?

Utilizarían el producto para publicar, encontrar información y conocer usuarios con el mismo afin ambiental.

2.1 Historia de Usuario ✍

Realizamos una investigación mediante un formulario en el cual fueron participes un total de 30 usuarios.

A continuación, mostraremos algunas de las historias de Usuario:

---

3. Realización del Proyecto

3.1 Diseño 📱

3.1.1 Flowchart: 📝

Para definir las páginas y su contenido se realizó un mapa semántico del mismo. Si desea visualizarlo puededar click Aquí.

3.1.2 Wireframe: 🙋🏼

Por consiguiente, en esta fase se busca realizar un esquema virtual de distribución más detallado en Figma. A continuación, se mostrará parte del Wireframe; si desea puede verlo completo dando click en:

• Prototipado mobile
• Prototipado desktop

3.1.3 Prototipado de Alta Fidelidad: 💁🏼

Luego de ya tener el Wireframe, se realiza el diseño de la web en base a estilos, paleta de colores, entre otros recursos. A continuación, se mostrará parte del prototipado de alta fidelidad, si desea puede verlo completo dando click en:

• Prototipado mobile
• Prototipado desktop

---

3.2 Resultado final: 💁🏼

A continuación se adjuntará una breve videodemostración del resultado final tanto en diseño como en funcionalidad. Si desea verlo completo puede dar click: Para ingresar se puede utilizar mi usuario con mi nombre22

• Prototipado videodemostración completa

4. Tecnologías empleadas 👩🏾‍💻

Para la estructura y diseño:

• HTML: Siguiendo las reglas del HTML semántico se estructuró con un header que contiene una barra de navegación y el main para englobar el contenido principal.

• CSS: Usada para definir el estilo visual del proyecto.

• Figma: Plataforma para crear las estructuras del prototipo (Wireframe, prototipo de alta fidelidad, mockups).

Para el Testing:

• Jest: Framework para realizar los testing unitarios.

• Eslint: Herramienta de linting para analizar el código en busca de errores.

Para la funcionalidad:

• Javascript: Para dar la funcionalidad a la plataforma.
• Firebase: Se trata de una plataforma móvil creada por Google, cuya principal función es desarrollar y facilitar la creación de apps de elevada calidad de una forma rápida. Para este proyecto se uso lo siguiente:
  • Cloud Firestore: Es una base de datos NoSQL orientada a los documentos. A diferencia de una base de datos SQL, no hay tablas ni filas; En su lugar, almacenas los datos en documentos, que se organizan en colecciones. Cada documento contiene un conjunto de pares clave-valor.
  • Cloud Storage: Cloud Storage se diseñó para ayudarte a almacenar y procesar con rapidez y facilidad el contenido generado por usuarios, como fotos y videos.
  • Authentication: Busca facilitar la creación de sistemas de autenticación seguros, a la vez que mejora la experiencia de integración y acceso para los usuarios finales. Proporciona una solución de identidad de extremo a extremo, compatible con cuentas de correo electrónico y contraseñas, autenticación telefónica, acceso mediante Google, Twitter, Facebook y GitHub, y mucho más.
  • Realtime Database: Sincronización en tiempo real para datos JSON. Firebase Realtime Database es una base de datos NoSQL alojada en la nube que te permite almacenar y sincronizar datos entre tus usuarios en tiempo real.

---

5. Fuentes 📚

• Repositorio de Laboratoria: Se encuentran todas las condiciones y herramientas a trabajar para el proyecto.

6. Autores 📍

• Katerin Tello
• Mariana Guanda
• Rosamaria Rodriguez
• Equipo de Laboratoria LIM016

---