Giter Club home page Giter Club logo

dev002-social-network's Introduction

Creando una Red Social

Petsbook

Índice


1. ¿Qué es una red social?

Las redes sociales son plataformas digitales formadas por comunidades de individuos con intereses, actividades o relaciones en común (como amistad, parentesco, trabajo). Las redes sociales permiten el contacto entre personas y funcionan como un medio para comunicarse e intercambiar información.


2. Sobre Petsbook

¿Alguna vez te pusiste a pensar como debe ser la vida cotidiana de tu compañero peludo(a)?

¡Sin duda nuestros mejores amigos peluditos necesitan tiempo de calidad, porque los amamos!

Es por eso que creamos Petsbook, una app dónde tu máscota podré conocer y pasear junto a otras máscotas de forma más segura ya que Petsbook te permite conocer a personas como tú y tu máscota para reunirse.


3. Definición final del producto

Cuando pensamos en las apps que ya tenemos instaladas en nuestros celulares, caemos en cuenta que si bien podemos socializar entre humanos, no hay una app en sí que se dedique hacer algo por mejorar e impulsar ese tiempo de cálidad para nuestras mascotas y de forma sociable tanto para ellos como para nosotros.


4. Historias de usuario

HU 1

-Como: persona curiosa -Quiero: saber de que trata la pág -Para: poder decidir si unirme o no

HU 2

-Como: amante de mis mascotas -Quiero: registrarme -Para: poder iniciar sesión.

HU 3

-Como: usuaria recién registrado -Quiero: iniciar sesión -Para: ingresar a la red social.

HU 4

-Como: usuaria que quiere compartir la vida de su mascota -Quiero: publicar algo (comentario) -Para: compartirlo con otras personas/ encontrar más personas afines a /..

HU 5

-Como: usuaria de la app -Quiero: editar mi publicación -Para: corregir un error que tuve

HU 6

-Como: usuaria que puede cometer errores -Quiero: borrar mi post -Para: eliminarlo.

HU 7

-Como: parte de la comunidad de la app -Quiero: darle y quitarle like a una publicación -Para: indicar si me gustó.

HU 8

-Como: parte de la comunidad de la app -Quiero: ver la cantidad de likes de mi post -Para: ver saber cuantas personas comparten mi opinión.


5. Diseño de la Interfaz de Usuario (prototipo de baja fidelidad)

Pantalla

6. Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)


7. Consideraciones técnicas UX

-Comentarios generales de los test de usabilidad.

Persona 1 *Es como un facebook para mascotas, pero parece un foro. Se entiende el uso, solo cosas puntuales de diseño.

Persona2 *Es un facebook donde los animales chismean entre ellos. Cuestión de ser más especifico en la validación, pero es fácil de usar.

Persona3 *Entiendo que es como una red para mascotas, pero podria aclararse un poco más. Cree que la funcionalidad está buena, podría mejorar el disño pero en si es fácil de usar


8. Objetivos de aprendizaje

HTML

  • [✔️] Uso de HTML semántico

CSS

  • [✔️] Uso de selectores de CSS

  • [✔️] Modelo de caja (box model): borde, margen, padding

  • [✔️] Uso de flexbox en CSS

  • [✔️] Uso de CSS Grid Layout

Web APIs

  • [✔️] 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)

JavaScript

  • [✔️] 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

Control de Versiones (Git y GitHub)

  • [✔️] 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)

UX (User eXperience)

dev002-social-network's People

Contributors

andrea-huallpayunca avatar psyderalis avatar ariel-navarro avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.