Creando una Red Social

Instalación

Para poder interactuar con la red social Sharing Code es necesario acceder a la siguiente liga link, registrarte y listo ahora puedes compartir tú conocimiento en cuanto a código con toda una red de programadores…EXCELENTE!!!...

Preámbulo

Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. Las redes sociales han invadido nuestras vidas. Las amamos u odiamos, y muchos no podemos vivir sin ellas.

Introducción

Una emprendedora nos ha encargado crear una red social. No nos da mucho detalle sobre qué tipo de red social quiere, sólo nos dice que creemos la mejor que podamos, y que luego la convenzamos de lanzarla al mercado. Nos da ciertos temas en los que le gustaría invertir:

USER FLOW

PRINCIPALES REDES SOCIALES

NotasWeb

Se trata de una de las comunidades más grandes para programadores en habla hispana. Aquí podrás aprender y compartir información sobre PHP, CSS/Diseño, JavaScript, AJAX, SQL, SEO y mucho más. En Notas Web encontrarás tutoriales y artículos de cualquier ámbito del desarrollo web.

Desarrollo Web

Esta comunidad para desarrolladores web, también en habla hispana, ofrece artículos muy interesantes sobre la actualidad y últimas novedades en programación web. Encontrarás tutoriales y foros de debate donde realizar las consultas que necesites, seguro que tendrás respuesta, aquí la comunidad de programadores web es muy activa. Además, como línea de negocio paralela, ofrecen cursos online de diseño y programación web muy interesantes a través de su escuela IT.

Desarrollo Web, comunidad para desarrolladores web

Domestika

Red social española dedicada en exclusiva a creativos, programadores, diseñadores gráficos y diseñadores web. Puedes crear tu propio perfil y compartir tus trabajos, descargar recursos, realizar preguntas o responderlas en sus foros de debate y buscar y ofrecer trabajo.

Bisquits

Biquits es una red social exclusiva para programadores a la que sólo puedes acceder a través de una prueba de programación previa para que que la plataforma te envíe su invitación. Hay que tener cierto nivel de programación y desarrollo web, aunque no demasiado, y una vez dentro podrás buscar, compartir y guardar pedacitos de código para tus webs. Ideal para conocer nuevos trucos de otros programadores web como tú.

Bisquits, red social exclusiva para programadores

CoderWall

Se trata de una red social para programadores que permite compartir trabajos y experiencias con otros compañeros de profesión. Puedes enlazar tu perfil de CoderWall con otras comunidades donde exponer tu porfolio de websites anteriores como GitHub, BitBucket o Dribble. Esta red social va dándote gadgets a medida que compartes tus trabajos y participas en la comunidad, una manera de incentivar tu actividad a la vez que te relacionas con otros programadores.

CoderWall, red social para programadores web

BetterCodes

Aún en fase beta, Bettercodes es la red social para compartir códigos siempre que sean open source. Aquí encontrarás cantidad de códigos, trucos y recursos para desarrolladores y programadores web. La idea de los creadores del sitio es que la navegación, la búsqueda y todas las herramientas que se brindan sean sencillas de utilizar y todos los miembros de la comunidad puedan colaborar. Conocerás programadores de otros países y quién sabe, a lo mejor te abre las puerta a trabajar en algún proyecto internacional.

Bettercodes, red social para compartir códigos open source para programadores web

Twango

No es una red social pero sí un recurso imprescindible para buscar proyectos de desarrollo web y ofertar tus presupuestos. Twango pone en contacto a empresas con programadores web. Si trabajas como desarrollador web freelance o tienes una empresa de diseño web, este es tu sitio

BENCHMARK COMPARATIVA ENTRE REDES SOCIALES

	Facebook	Twiter	Instagram	Sharing Code
Logeo con usuario y contraseña	x	x	x	x
Logeo mediante otras redes sociales			x	x
Agregar amigos/seguir	x	x	x	x
Realizar comentarios	x	x	x	x
Perfil	x	x	x	x
Subir fotos	x	x	x	x
Me gusta	x	x	x	x
Creación de grupos	x	x		x
Subir documentos				x
Eliminar comentarios	x	x	x	x
Editar comentarios	x	x	x	x
Otros idiomas	x	x	x	x

BENCHMARK COMPARATIVA REDES SOCIALES SOLO PARA PROGRAMADORES

	Sharing code	Notas Web	Desarrollo Web	Domestika	Coder Wall	Better Codes
Compartir	x
Logueo con otras redes sociales	x
Subir y descargar recursos	x	x		x
Realizar, editar y eliminar comentarios	x		x		x	x
Reaccióm me gusta	x
Bolsa de trabajo		x		x
Contador de usuarios		x
Cuenta con foros			x	x
Compartir					x	x
Enlazarse con otras comunidades					x
Otros idiomas

Introducción a las redes sociales

“Las Redes son formas de interacción social, definida como un intercambio dinámico entre personas, grupos e instituciones en contextos de complejidad. Un sistema abierto y en construcción permanente que involucra a conjuntos que se identifican en las mismas necesidades y problemáticas y que se organizan para potenciar sus recursos.

Una sociedad fragmentada en minorías aisladas, discriminadas, que ha desvitalizado sus redes vinculares, con ciudadanos carentes de protagonismo en procesos transformadores, se condena a una democracia restringida. La intervención en red es un intento reflexivo y organizador de esas interacciones e intercambios, donde el sujeto se funda a sí mismo diferenciándose de otros.”

No difiere lo dicho sobre una red grupal y lo que sucede a nivel subjetivo en Internet, al menos en las que se dedican a propiciar contactos afectivos nuevos como lo son las redes de búsqueda de pareja, amistad o compartir intereses sin fines de lucro.

En las redes sociales en Internet tenemos la posibilidad de interactuar con otras personas aunque no las conozcamos, el sistema es abierto y se va construyendo obviamente con lo que cada suscripto a la red aporta, cada nuevo miembro que ingresa transforma al grupo en otro nuevo. La red no es lo mismo si uno de sus miembros deja de ser parte.

Intervenir en una red social empieza por hallar allí otros con quienes compartir nuestros intereses, preocupaciones o necesidades y aunque no sucediera más que eso, eso mismo ya es mucho porque rompe el aislamiento que suele aquejar a la gran mayoría de las personas, lo cual suele manifestarse en retraimiento y otras veces en excesiva vida social sin afectos comprometidos.

Las redes sociales en Internet suelen posibilitar que pluridad y comunidad se conjuguen y allí quizás esté gran parte de toda la energía que le da vida a los grupos humanos que conforman esas redes. Las redes sociales dan al anónimo popularidad, al discriminado integración, al diferente igualdad, al malhumorado educación y así muchas cosas más.

La fuerza del grupo permite sobre el individuo cambios que de otra manera podrían ser difíciles y genera nuevos vínculos afectivos y de negocios.

Las herramientas que proporcionan en general las redes sociales en Internet son:

• Actualización automática de la libreta de direcciones
• Perfiles visibles
• Capacidad de crear nuevos enlaces mediante servicios de presentación y otras maneras de conexión social en línea.

¿Qué idiomas se hablan en redes sociales?

Twitter, LinkedIn o Google+ son algunas de las redes sociales en las que tanto un usuario como una empresa pueden estar presentes. Uno de los puntos a destacar de la expansión del social media a nivel mundial, y de gran interés para las marcas, es el idioma que los usuarios utilizan en cada una de las redes. Pero antes de entrar en ello, veamos, a grandes rasgos, el panorama actual de las redes sociales.

• El panorama actual de las redes sociales Según el estudio anual realizado por IAB SPAIN, si hablamos del uso de redes sociales, Facebook es la red social por excelencia y la que ha conseguido captar a más usuarios (91%), seguida de WhatsApp (89%), YouTube (71%) y Twitter (50%). Por su lado, Instagram, se convierte en la red con la mayor subida de usuarios en el último año, dejando atrás a LinkedIn. Twitter y Google+ han tenido bajadas en cuanto al uso pero no destacables.

Entre las principales redes, Google+ está a la cola junto a Pinterest, que sube un 14%, con respecto al año pasado. Como vemos, Google+ no tiene un uso habitual entre los usuarios, dado que su uso principal es mantener posicionamiento en el buscador Google.

IMAGEN

¿Qué uso le dan los usuarios a las redes sociales?

Uso principal en redes sociales: chatear, enviar mensajes, ver qué hacen tus contactos, entre otros. Seguimiento de marcas: el 83% de los usuarios sigue a alguna marca y más de la mitad de los usuarios se declara influido en sus decisiones de compra. E-commerce y redes sociales: un 53% de los usuarios busca productos a través de las redes sociales. Facebook es el medio más usado para esto (64%). Tipo de contenido: las fotos son el contenido que más se publica en redes sociales. Instagram es la red que mejor responde a esta tendencia y se ha reflejado en un aumento de su popularidad.

¿Cómo se conectan los usuarios?

Un 91% de los usuarios accede a las redes sociales a través de su móvil. Comparando el acceso por dispositivos, los españoles prefieren acceder a las redes sociales desde el móvil a partir de las 4 de la tarde, mientras que la tablet es más nocturna y se utiliza más a partir de las 8:30. Facebook, YouTube o Twitter son las redes sociales más utilizadas tanto desde móviles como desde tablets.

¿Qué deben hacer las marcas?

La presencia en redes resulta relevante para crear un vínculo con los usuarios y obtener su confianza. Ante esta situación, las marcas se deben tomar muy en serio su comunicación online y para ello deben:

Mejorar en la creación de contenido, que pueda ser usado en múltiples canales, no solo en Facebook.

• Colaborar con influencers, puesto que es una gran manera de fomentar el engagement con los usuarios.
• Identificar qué es lo que motiva y emociona a sus clientes.
• Adaptar sus contenidos a dispositivos móviles.
• Ya hemos visto qué redes sociales son las más relevantes en nuestro país y qué uso dan los usuarios a estas.

¿pero en qué idiomas se habla en las redes?

Los idiomas más hablados en redes sociales Facebook es la red social en la que más idiomas se hablan con un total de 70. Por el contrario, LinkedIn cuenta tan solo con 17 idiomas.

El inglés, al ser considerado idioma global, lidera la lista de los idiomas más hablados en las redes sociales e Internet. En Internet, más del 50% de los sitios están en inglés. El Instituto Cervantes realizó un estudio en el que se concluyó que en Twitter cerca de 241 millones de usuarios hablan inglés y el 78% de ellos lo hablan como su segunda lengua.

El mismo estudio constata que el segundo idioma más hablado es el chino, seguido del español con un 7,6%, un dato sorprendente ya que este último cuenta con un mayor número de hablantes en el mundo. Aun así, cabe destacar que en Facebook y Twitter el español se coloca en segunda posición, por detrás del inglés, en el ranking de los idiomas más hablados. Además, en determinados lugares del mundo, como en el caso de Nueva York, el español, después del inglés, es el idioma más utilizado en la red Twitter.

Además, en determinados lugares del mundo, como en el caso de Nueva York, el español, después del inglés, es el idioma más utilizado en la red Twitter.

• Hacer un benchamark de las principales redes sociales.
• Hacer al menos 2 o 3 entrevistas con usuarios.

Prototipo de alta fidelidad.

Para nuestro prototipo utilizamos mockflow e invision.

tLiga

• Testear el prototipo con usuarios.
• Asegurarte de que la implementación en código siga los lineamientos del diseño.
• Hacer sesiones de testing con el producto en HTML.

1) Definición del producto

En el README.md cómo conociste el mercado de las redes sociales, cómo descubriste las necesidades de los usuarios, cómo llegaste  la definición final de tu producto. Es importante que detalles:

• Cuáles son los elementos básicos que tiene una red social
• Quiénes son los principales usuarios de producto
• Qué problema resuelve el producto para estos usuarios
• Cuáles son los objetivos de estos usuarios en relación conel producto
• Cuáles son las principales funcionalidades del producto y cuál es su prioridad
• Cómo verificaste que el producto les está resolviendo sus problemas
• Cómo te asegurarás que estos usuarios usen este producto

Para poder llegar a estas definiciones te recomendamos ver: benchmarks, entrevistas con usuarios y tests de usabilidad.

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

Debes definir cuál será el flujo que seguirá el usuario dentro de tu producto y con eso deberás diseñar la Interfaz de Usuario (UI por sus siglas en inglés) de esta red social que siga este flujo. Para esto debes utilizar la herramienta de diseño visual de tu preferencia. Nosotros te recomendamos Figma dado que es una herramienta que funciona en el navegador y puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, PowerPoint, Keynote, etc.

Este diseño debe representar la solución que se implementará finalmente en código.

Tu diseño debe seguir los fundamentos de visual design, como: contraste, alineación, jerarquía, entre otros. Tip: revisa el contenido de UX de la unidad de visual design.

Te dejamos un ejemplo de una historias de usuario para este proyecto

En el proyecto de la "red social", las primeras historias podrían ser:

• Yo, como una feminista, quiero poder registrarme en una nueva red social para conectarme con otras personas con ideales como yo.

  • Yo, como usuaria registrada en esta red social quiero poder loguearme con mi correo para empezar a usar esta red.
  • Yo, como usuaria registrada en esta red social, quiero poder loguearme con mi cuenta facebook o google para empezar a usar esta red.

• Yo, como usuaria logueada en esta red social, quiero poder postear un mensaje en mi muro para que otras personas puedan ver lo que pienso.

• Yo, como usuaria logueada en esta red social, quiero poder editar o eliminar mis posts por si me arrepiento de lo que puse.

• Yo, como usuaria logueada quiero poder darle like/estrellas a un posts para expresar mi apoyo a una publicación.

• Yo, como usuaria logueada quiero poder ver los posts publicos de otrxs usuarixs aunque no sean mis amigxs.

• Yo, como usuaria logueada quiero poder compartir posts de texto, imagen ó texto con imagen para comunicar mejor mis ideas.

• 1.Hola mi nombre es diana tengo 23 años de edad estudie una carrera de Ingenieria en sistemas ,hasta el dia de hoy no he podido desarrollarme profesionalmente me gustaria contar con una red social dirigida a programadores pero que contenga una bolsa de trabajo y donde pueda encontrar personas con mis mismos intereses.

• Yo como usuario me gustaria poder registrarme

• Yo como usuario me gustaria poder iniciar sesion ya se por correo,google,Facebook

• Yo como usuario me gustaria poder contar con una bplsa de trabajo

• Yo como usuario me gustaria poder subir mi curriculum en este mismo muro

• Yo como usuario me gustaria contar con un perfil de usuario

• Yo como usuario me gustaria poder recibir notificaciones y asi saber si ha visto mi curriculum y asi pudiera saber cuantas personas ha visto mi curriculum.

• 2.Hola mi nombre es leticia tengo 29 años no he podido terminar una carrera profesional ya que o tengo los recursos para poder costearla ademas que me encuentro con muchas limitantes para poder subir mi nivel academico, una de ella es el idioma no he podido estudiar alguno, me gustaria aprender ingles pues la mayoria de la informacion mas importante y que me ayudaria en mi aprendizaje esta en ingles me guataria una red social diversa donde todos puedan subir articulos ya traducidos o bien imagenes.

• Yo como usuario me gustaria poder registrarme y recibir un correo de confirmacion

• Yo como usuario me gustaria poder chatear con los usuarios

• Yo como usuario me gustaria poder contar con un traductor para traducir los articulos que llegaran a subir.

Entrevistas

Se realizaron dos encuestas en la primera de ellas la finalidad era obtener un estudio más claro sobre qué tan demandantes son las redes sociales, el impacto que tienen y como podrían ayudar siendo orientadas a un tema en específico. A continuación, se anexan los resultados que se obtuvieron de la encuesta (La moda de los resultados):

¿En qué rango de edad te encuentras?

Entre 20 y 30

¿Con que género te identificas?

Femenino

¿Cuál es tu idioma?

Español

¿Cuáles son las redes que más utilizas?

Facebook

¿Con que frecuencia usas al día cada red social (Facebook)?

Todo el tiempo 1 a 2 veces

¿Con que frecuencia usas al día cada red social (Instagram)?

Casi nunca 1 a 2 veces

¿Con que frecuencia usas al día cada red social (twiter)?

Casi nunca 1 a 2 veces

¿Con que frecuencia usas al día cada red social (Youtube)?

Todo el tiempo 1 a 2 veces

¿Con que frecuencia usas al día cada red social (WhatSapp)?

Todo el tiempo

¿Conoces alguna red social donde hablen de programación?

Si Slack Foros

¿En qué dispositivo utilizas más tus redes sociales?

Celular

En la segunda encuesta se logró analizar con la información obtenida si era conveniente apostar por una red social para programadores. A continuación, se muestran los resultados obtenidos con una muestra de 28 respuestas:

¿Qué opinas de los Foros como apoyo para los desarrolladores web?

• Son muy tecnicos

• Son útiles, pues representan una fuente en la cual se puede compartir y consultar información

• Excelente

• Buenos

• Would be great have such thing! Nowadays the only social network that I know where women can talk and change information about software development (including materials for study) is the facebook's groups. (Sorry about the english, I'm from laboratoria BR and don't know how to speak spanish)

• Creo que es bastante importante porque muchas veces otras personas ya tuvieron problemas y pueden guiar a los demás.

• Son una muy buena herramienta

• Son de gran utilidad para resolver dudas sobre todo cuando se es novato o principiante

¿Crees que las redes sociales son de apoyo para compartir material e información sobre el desarrollo web?

¿Conoces alguna red social exclusiva para desarrolladores web?

¿Apostarías por una red social para desarrolladores web de habla hispana?

¿Crees que es conveniente que la red social sea solo para desarrolladores web?

¿Serias miembro activo en esta red social?

¿Apoyarías a los demás miembros compartiendo tú conocimiento y/o resolviendo dudas?

¿Tomarías está red social como un medio de apoyo?

Testeando producto

El producto se testeo con un cierto número de personas, esto con el fin de analizar si era agradable para el usuario, fácil de manipular e interactiva.

Usuario 1.

Usuario 2.

Usuario 3.

Checklist

General

• [ ] Producto final sigue los lineamientos del diseño.

README.md

• [ ] Definición del producto.
• [ ] Benchamark de las principales redes sociales.
• [ ] Resumen de entrevistas con usuarios.
• [ ] Link/screenshots prototipo de alta fidelidad.
• [ ] Conclusiones de pruebas del prototipo con usuarios.
• [ ] Conclusiones de pruebas con el producto en HTML.

Pruebas / tests

• [ ] Tests unitarios cubren un mínimo del 70% de statements, functions, lines, y branches.
• [ ] Pasa tests (y linters) (yarn test).

Creación de cuenta (sign up)

• [ ] Permite crear cuenta.
• [ ] Valida email.
• [ ] Valida password.
• [ ] Muestra mensajes de error.

Inicio de sesión (sign in)

• [ ] Permite iniciar sesión.
• [ ] Valida email.
• [ ] Valida password.
• [ ] Muestra mensajes de error.

Muro (wall/feed)

• [ ] Muestra muro.
• [ ] Permite publicar nuevos posts.
• [ ] Permite eliminar posts.
• [ ] Pide confirmación antes de borrar posts.
• [ ] Permite editar posts (in place).
• [ ] Permite filtrar posts por público/amigos.
• [ ] Permite marcar posts como gustados (like).

Introducción

Una emprendedora nos ha encargado crear una red social. No nos da mucho detalle sobre qué tipo de red social quiere, sólo nos dice que creemos la mejor que podamos, y que luego la convenzamos de lanzarla al mercado. Nos da ciertos temas en los que le gustaría invertir:

• Alimentación
• Feminismo
• Educación
• Salud
• Energías Renovables

Objetivos

El objetivo principal de aprendizaje de este proyecto es construir un sitio web responsive con más de una vista (página), y en el que podamos leer y escribir datos.

Algunos objetivos específicos:

• Entender las necesidades de los usuarios para los que crearás el producto y que ayudarás a resolver.
• Poner en juego tu creatividad para generar ideas que lleven a una solución original y valiosa del problema.
• Cuentas con el apoyo de tus compañeras, debes trabajar en equipo buscando feedback constante.

Consideraciones generales

Este proyecto se debe "resolver" en trios.

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto SÍ está permitido usar librerías o frameworks, pero no es obligatorio :smiley:.

Para comenzar tendrás que hacer un fork y clonar este repositorio.

Parte obligatoria

General

En este proyecto, hay un boilerplate basico , sin configuración y una estructura recomendada de carpetas (Puedes modificar, agregar o quitar lo que creas necesario), puedes guiarte de los proyectos anteriores. Por lo tanto, los tests y el setup necesario para ejecutarlos serán hechos por ti misma. Recuerda, todos los archivos estan vacios :smiley:.

En tu README.md, cuéntanos cómo pensaste y te acercaste a los usuarios, y cuál fue tu proceso para definir el producto final en términos de experiencia y de interfaz. Si tienes fotos de entrevistas, cuestionarios y/o sketches(bocetos) compártelos.

Responsive

Debe verse bien en dispositivos de pantallas grandes (computadoras/es, laptops, etc.) y pequeñas (tablets, celulares, etc.). Te sugerimos Seguir la técnica de mobile first (más detalles sobre esta técnica al final).

Tests

Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines, y branches.

UI y comportamiento (User Interface / Interfaz de Usuario)

La interfaz debe permitir lo siguiente:

Creación de cuenta de usuario e inicio de sesión

• Login con Firebase:
  • Solamente para el login es obligatorio usar Firebase, no para las publicaciones en el muro ni las demás funcionalidades, pare eso puedes usar localStorage.
  • Autenticación con Facebook - Google.
• Validaciones:.
  • 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.
• Comportamiento:
  • Al enviarse un formulario de registro o inicio de sesión, debe validarse.
  • En caso haya errores, el sistema debe mostrar mensajes de error para ayudar al usuario a corregirlos.
  • La aplicación solo permitirá el acceso a usuarios con cuentas válidas.
  • Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrarle el contenido privado.
• Perspectiva de interfaz:

Muro/timeline de la red social

• Validaciones (debe tener al menos 8):
  • Al apretar el botón de publicar, debe validar que exista contenido en el input.
• Comportamiento:
  • Debe poder publicar un post, imagen, post e imagen, etc.
  • Poder poder like/Estrella (o similar) a una publicación.
  • Debe poder llevar ó ver cuántos me like/Estrella (o similar) tiene una publicación.
  • Debe poder eliminar un post/publicación específico.
  • Debe pedir una confirmación antes de eliminar un post/publicación.
  • Al darle click en el botón editar, debe poder cambiar el texto, imagen, post e imagen, o lo que contenga la publicación. (se sugiere que el texto cambie a un input, permita editar el texto y que el tenga un botón editar se convierta en guardar).
  • Al editar solo debe poder editar sus propios post y NO los post de los demás usuarios.
  • Al darle guardar debe regresar de vuelta a la forma que tenia antes la publicación a un texto normal pero con la información editada.
  • Al recargar la página debo de poder ver los textos editados y publicaciones anteriores (persistencia).
  • Debe poder agregar nuevos amigos
  • Debe poder aceptar solicitudes de amigos
  • Debe poder eliminar amigos
  • Debe poder filtrar los posts sólo para mis amigos y para todo público.
  • Debe poder publicar solo para mis amigos
  • Debe poder publicar públicamente, visible para todos los usuarios de la red social.
  • Debe poder enviar mensajes privados a mis amigos.
• Perspectiva de interfaz:

Otras consideraciones

• La aplicación NO debe poder dejar hacer publicaciones vacías de ningún tipo.
• El usuario debe poder agregar, editar y eliminar contenido de la red social.
• El usuario debe poder definir la privacidad de lo que pública.
• Al editar contenido, el contenido editado se verá automáticamente, inmediatamente después de guardar.
• Al recargar la página se deben poder ver los contenidos editados.

Para armar la interfaz visual, utiliza como base alguna de estas guías de componentes:

• Guía Desktop 1
• Guía Desktop 2
• Guía Mobile 1
• Guía Mobile 2

Personaliza estas guías con los colores y/o tipografías que creas convenientes. Recuerda que al hacer estas adaptaciones deberás seguir los fundamentos de visual design como contraste, alineación, jerarquía, entre otros.

Implementación

Front end

El corazón de este proyecto incluye:

• Separar la manipulación del DOM de la lógica (Separación de responsabilidades).
• Que el sitio sea responsive, ya dicho.
• Alterar y persistir datos. Los datos que agregues o modifiques deberán persistir a lo largo de la aplicación, te recomendamos que uses localStorage como primera opción para resolver este desafío, aun así, tú puedes optar por la que se acomode más a tu equipo.

Además, podrías agregar algunas tareas nuevas de acuerdo a tus decisiones:

• Recuerda que puedes usar una librería y/o framework si así lo desea el equipo, al navegar en internet te darás cuenta de que algunas de estas construyen un boilerplate por ti (Si no quieres usar la estructura propuesta), tenlo presente al iniciar tu proyecto.
• Recuerda que no hay un setup de tests definido, dependerá de la estructura de tu proyecto también, pero algo que no debes de olvidar es pensar en éstas pruebas, incluso te podrían ayudar a definir la estructura y nomenclatura de tu lógica.

UX

Desde el punto de vista de UX, deberás:  

• Hacer un benchamark de las principales redes sociales.
• Hacer al menos 2 o 3 entrevistas con usuarios.
• Hacer un  prototipo de alta fidelidad.
• Testear el prototipo con usuarios.
• Asegurarte de que la implementación en código siga los lineamientos del diseño.
• Hacer sesiones de testing con el producto en HTML.

Ágil

Vamos a dar un paso importante para seguir aprendiendo de Ágil. Te será de mucha ayuda para ir avanzando tu proyecto de forma incremental y no en cascada.

Esta vez te pedimos que los ítems de tu Backlog de Producto estén escritos como Historias de Usuario. Esta es una técnica muy simple que te ayudará a:

• Organizar el trabajo en función del valor que le aporta al usuario.
• Poder publicar partes completas y utilizables del producto al final del sprint.
• Que el equipo trabaje de manera multidisciplinaria de manera natural.

Habilidades Blandas

Trabajar en equipo es un gran desafío porque coordinarse no es una tarea fácil, y es más difícil entre tres que entre dos. Trata que tu equipo te entienda, facilitando siempre el diálogo en dentro del squad Apoyate de "Minestrone e Issues en Github".

Planifica enumerando las tareas y distribuyéndolas, considerando los recursos, las habilidades, y el tiempo del que dispones. Planifica de manera que te permita avanzar en los distintos aspectos del proyecto de forma paralela, teniendo un tablero donde puedas ver en qué está trabajando cada compañera.

Entrega tu trabajo a tu equipo a tiempo y colabora con el objetivo final del proyecto, lo que puede implicar ayudar a los demás miembros del equipo con sus pendientes, con el fin de entregar una red social de calidad.

La división del trabajo debe permitir que todo el equipo practique el aprendizaje de todas las habilidades esperadas. No se dividan el trabajo como en una fábrica

Para conocer a los usuario para eso debes salir e investigar. Tienes que ejercitar tus habilidades de comunicación y toma de decisiones. Existen infinitas opciones, depende de ti el camino que escoges. Para que tu red social responda a las necesidades de sus usuarios, probablemente deberás adquirir nuevos conocimientos para implementar sus preferencias.

Esta vez, haz code review(feedback de tu código) con otro squad, para que puedas mejorar el producto. Mientras más feedback reciban, mejor.

Esperamos que valores y escuches los comentarios y críticas de los demás, rescatando aquellos aspectos que sirven para tu crecimiento. Entrega siempre tu opinión de manera constructiva, fundamentada y coherente, con el propósito de ayudar a tus compañeras. Estos comentarios los debes hacer de manera honesta, empática e inmediata.

Finalmente, deberás presentar el proyecto que creaste, al usuario que escogiste y las necesidades que lograste resolver en este proceso. Como siempre, sabemos que presentar puede ser una tarea difícil, esperamos que tengas capacidad de síntesis y articules tus ideas con claridad para que logres mostrar tu trabajo y que los demás lo comprendan.

Hacker edition

• Crear posts con imágenes
• Reemplazar localStorage, ¿le has compartido tu red social a tus amigxs? Si lo has hecho, te darás cuenta de que ellxs no pueden ver tus posts ni tú el de ellxs. Esto es debido a que localStorage almacena los datos localmente (en tu navegador) por lo que esos datos no se comparten. Para resolver esto podrías implementar una base de datos pero el tiempo podría jugar en contra, para ello existen algunos servicios como Firebase que te proveen soluciones rápidas a este problema y solo usando su SDK :scream:.

Entrega

El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages u otro servicio de hosting que puedas haber encontrado en el camino.

Entregables

1) Definición del producto

En el README.md cómo conociste el mercado de las redes sociales, cómo descubriste las necesidades de los usuarios, cómo llegaste  la definición final de tu producto. Es importante que detalles:

• Cuáles son los elementos básicos que tiene una red social
• Quiénes son los principales usuarios de producto
• Qué problema resuelve el producto para estos usuarios
• Cuáles son los objetivos de estos usuarios en relación con el producto
• Cuáles son las principales funcionalidades del producto y cuál es su prioridad
• Cómo verificaste que el producto les está resolviendo sus problemas
• Cómo te asegurarás que estos usuarios usen este producto

Para poder llegar a estas definiciones te recomendamos ver: benchmarks, entrevistas con usuarios y tests de usabilidad.

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

Debes definir cuál será el flujo que seguirá el usuario dentro de tu producto y con eso deberás diseñar la Interfaz de Usuario (UI por sus siglas en inglés) de esta red social que siga este flujo. Para esto debes utilizar la herramienta de diseño visual de tu preferencia. Nosotros te recomendamos Figma dado que es una herramienta que funciona en el navegador y puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, PowerPoint, Keynote, etc.

Este diseño debe representar la solución que se implementará finalmente en código.

Tu diseño debe seguir los fundamentos de visual design, como: contraste, alineación, jerarquía, entre otros. Tip: revisa el contenido de UX de la unidad de visual design.

3) Implementación de la Interfaz de Usuario

La idea para este producto es que el producto a desarrollar siga los lineamientos propuestos en el diseño de la interfaz de usuario. Asegúrate a lo largo de la implementación que los elementos propuestos están siendo implementados correctamente. (Hint: testing)

Evaluación

Tech

Habilidad	Nivel esperado
JavaScript
Estilo	3
Nomenclatura/semántica	3
Funciones/modularidad	2
Estructuras de datos	2
Tests	2
HTML
Validación	3
Estilo	3
Semántica	3
SEO	n/a
CSS
DRY	3
Responsive	3
SCM
Git	3
GitHub	3
CS
Lógica	2
Arquitectura	2
Patrones/paradigmas	n/a

UX

Habilidad	Nivel esperado
User Centricity	3
Entrevistas	2
Testing	2
User Flow	2
Jerarquía	3
Alineación	3
Contraste	3
Color	3
Tipografía	3

Habilidades Blandas

Para este proyecto esperamos que ya hayas alcanzado el nivel 3 en todas tus habilidades blandas. Te aconsejamos revisar la rúbrica:

Habilidad	Nivel esperado
Planificación y organización	3
Autoaprendizaje	3
Solución de Problemas	3
Dar y recibir feedback	3
Adaptabilidad	3
Trabajo en equipo (trabajo colaborativo y responsabilidad)	3
Comunicación eficaz	3
Presentaciones	3

---

Pistas / Tips / Lecturas complementarias

Mobile first

El concepto de mobile first hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se ve como adaptar la aplicación a pantallas progresivamente grandes y características específicas del entorno desktop. Esto es en contraposición al modelo tradicional, donde primero se diseñaban los websites (o webapps) para desktop y después se trataba de arrugar el diseño para que entre en pantallas más chicas. La clave acá es asegurarse de que desde el principio diseñan usando la vista responsive de las herramientas de desarrollador (developer tools) del navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una pantalla y entorno móvil.

Múltiples vistas

En proyectos anteriores nuestras aplicaciones habían estado compuestas de una sola vista principal (una sóla página). En este proyecto se introduce la necesidad de tener que dividir nuestra interfaz en varias vistas o páginas y ofrecer una manera de navegar entre estas vistas. Este problema se puede afrontar de muchas maneras: con archivos HTML independientes (cada uno con su URL) y links tradicionales, manteniendo estado en memoria y rederizando condicionalmente (sin refrescar la página), manipulando el historial del navegador con window.history, usando una librería (por ejemplo react-router o vue-router). En este proyecto te invitamos a explorar opciones y decidir una opción de implementación.

Escritura de datos

En los proyectos anteriores hemos consumido (leído) datos, pero todavía no habíamos escrito datos (salvar cambios, crear datos, borrar, ...). En este proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y modificar datos existentes. Estos datos se podrán guardar localmente usando localStorage o de forma remota usando Firebase.

Te dejamos un ejemplo de una historias de usuario del proyecto anterior (Data-dasboard)

En el proyecto "Data Dashboard", la primera historia "épica" podría haber sido:

Yo, como Training Manager quiero poder ver el progreso de solución de ejercicios de JS de las estudiantes de mi(s) cohort(s) para entender cuánto están practicando y qué tan bien les está yendo

Esta la podríamos haber dividido en algunas más pequeñas, por ejemplo:

1. Yo, como Training Manager quiero poder seleccionar cada uno de los cohorts de mi ciudad para ver un listado de todas las estudiantes de ese cohort, y que incluya el % de progreso de solución de ejercicios de cada una de ellas
2. Yo, como Training Manager quiero poder seleccionar a una estudiante en particular para ver el % de progreso de solución de todos los ejercicios y el resultado decada uno de ellos

Como ves, dividirla en 1 y 2, hace que sea mucho más fácil imaginar y entender lo que el equipo tiene que conseguir para completarla.

Te dejamos un ejemplo de una historias de usuario para este proyecto

En el proyecto de la "red social", las primeras historias podrían ser:

• Yo, como una feminista, quiero poder registrarme en una nueva red social para conectarme con otras personas con ideales como yo.

  • Yo, como usuaria registrada en esta red social quiero poder loguearme con mi correo para empezar a usar esta red.
  • Yo, como usuaria registrada en esta red social, quiero poder loguearme con mi cuenta facebook o google para empezar a usar esta red.

• Yo, como usuaria logueada en esta red social, quiero poder postear un mensaje en mi muro para que otras personas puedan ver lo que pienso.

• Yo, como usuaria logueada en esta red social, quiero poder editar o eliminar mis posts por si me arrepiento de lo que puse.

• Yo, como usuaria logueada quiero poder darle like/estrellas a un posts para expresar mi apoyo a una publicación.

• Yo, como usuaria logueada quiero poder ver los posts publicos de otrxs usuarixs aunque no sean mis amigxs.

• Yo, como usuaria logueada quiero poder compartir posts de texto, imagen ó texto con imagen para comunicar mejor mis ideas.

Como ves en la primer historia, podemos dividir dicha historia en historias mas pequeñas, haciendo mas fácil imaginar y entender lo que el equipo tiene que conseguir para completarla e incluso podiendo dividir en tareas aún más pequeñas.

Otras:

• Diseño web, responsive design y la importancia del mobile first - Media Click
• Mobile First: el enfoque actual del diseño web móvil - 1and1
• Mobile First - desarrolloweb.com
• Mobile First - ZURB
• Mobile First Is NOT Mobile Only - Nielsen Norman Group
• Offline first manifesto

---