Es una Red Social dirigida a mujeres que forman parte de la tecnologia en todo el mundo, donde podrán compartir herramientas, tips, consejos de buenas prácticas, nuevas tecnologías; así como interactuar entre ellas.
Las caraterísticas técnicas de nuestra aplicación son las siguientes:
- Es una Single-Page Application
- Diseñada con un enfoque mobile first (versión traducida)
- Debe permitir la persintencia de datos
- Red Social responsiva en la que podemos escribir, leer, actualizar y eliminar datos.
- Para implementar la aplicación usamos HTML, CCS, Vanilla JavaScript, Firebase
Inicialmente éste era el prototipo de baja fidelidad:
Luego trabajamos en los prototipos de alta fidelidad de las diferentes vistas:
-
Vista mobile
-
Vista Desktop
Esta Plataforma fue diseñada para que mujeres de todas las edades que trabajen, estudien o tengan interes en tecnologia. Mujeres que se dedican a divulgación de tendencias en el rubro tecnologico.
El producto resuelve la necesidad de encontrar un espacio donde una mujer puede conectarse con otras mujeres directamente y hacer consultas especificas sobre tecnologia. Ademas de encontrar en un solo lugar información relevante que impulse el autoaprendizaje.
-
Entrevista 01
Perfil:
- Sexo: Mujer
- Edad: 25 años
- Rol: Estudiante Fron-End Developer
Comentario: Usuaria visualizo el prototipo de alta fidelidad y nos brindo las siguientes indicaciones:
- Los botones de post deberian tener un color mas amigable.
- El registro de un usuario deberia contar con una doble confirmación de contraseña.
- El campo de Popular Post deberia ser un poco reducido.
- El texto dentro del boton Log In deberia ser de color blanco.
- El boton Log Out deberia tener un icono de referencia.
-
Entrevista 02
Perfil:
- Sexo: Mujer
- Edad: 24 años
- Rol: Fron-End Developer
Comentario: Usuaria visualizo el prototipo de alta fidelidad y nos brindo las siguientes indicaciones:
- El campo de publicación deberia visualizarse en la parte superior.
- En la vista mobile no deberia figurar los Popular Post.
- Los post deberían indicarme la fecha en el que fue publicado.
- Los Popular Post deberian resaltar y diferenciarse de las publicaciones generales.
Se realizó el test de usabilidad en 3 usuarios y el resultado mostró lo siguiente:
-
Usuario 01: Se mostro confundido ya que no entendia de que se trataba la aplicación y como podía ayudarlo.
-
Usuario 02: Quedo impresionado con la primera vista ya que noto un mayor orden y los botones eran faciles de identificar. Sin embargo cuando visualizo la segunda vista no entendia que tenia que colocar en el campo "info" al cual se le cambio de nombre a "User Information" para una mejor claridad.
-
Usuario 03: Al realizar todas las modificaciones anteriores, el quinto usuario al que se aplico el test de usabilidad, afirmo que consideraba que teniamos un diseño amigable y entendía perfectamente para que era cada boton que mostrabamos. Lo cual fue respaldado con el tiempo de respuesta al realizar las tareas encomendadas.
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.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Uso de flexbox en CSS.
- Uso de CSS Grid Layout
- Uso de selectores del DOM.
- Manejo de eventos del DOM (addEventListener, removeEventListener, Event objeto, delegación de eventos)
- Manipulación dinámica del DOM (appendChild | createElement | createTextNode | innerHTML | textContent | etc.)
- Implementación de routing (History API. |
hashchange)
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.
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.
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.
En este proyecto te invitamos a explorar opciones y decidir una opción
de implementación.
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 de forma remota usando Firebase.
- Pildora SPA
- Repositorio de pildora de SPA
- Pildora de mock Firebase
- Repositorio de pildora de mock Firebase
- Pildora MVC
- Modulos: Export
- Modulos: Import
- 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