Este proyecto es un validador de tarjetas, su finalidad principal se basa en validar tarjetas para compras entre verdaderas y falsas, basado en el algoritmo de Luhn y una función de enmascarado que se encargue de solo mostrar los ultimos valores de la tarjeta ingresada. Busca facilitar a los usuarios el hacer compras de mercado, en tiendas de barrio, teniendo en cuenta la situación actual, evitando salir y exponerse.
La interfaz permite al usuario:
- Insertar el número que queremos validar.
- Ver el resultado si es válido o no.
- Ocultar todos los dígitos de su número de tarjeta menos los últimos 4 caracteres.
- No debe poder ingresar un campo vacío.
Quiénes son los usuarios y los objetivos en relación con el producto.
Nuestro proyecto va dirigido principalmente a usuarios que tengan la necesidad de hacer sus compras de mercado desde casa, como por ejemplo personas mayores o personas que no tengan la capacidad de salir a hacer sus compras, mas aun en estos tiempos con esta situación donde todos debemos cuidarnos. El cliente son las tiendas de barrio que no han establecido pagos virtuales.
Proceso de prototipado y diseño
En esta etapa se basa en la interfaz intuitiva y llamativa para el usuario, hicimos 1 prototipo en Figma, lo cual resulto complicado estructurarlo de la mejor manera, así decidimos probar InVision, tomamos un template y nos basamos en él para hacer nuestro prototipo, luego de pensar mejor la interfaz:
Prototipos en papel
Los prototipos en papel recibieron feedback de compañeras y coaches que compartieron ideas sobre el contexto que deberia brindar la página y que deberia ser intuitiva para los usuarios que la llegaran a usar. También se discutio sobre los valores que debia recoger y solicitar para la validación de tarjeta. Luego de tener clara la interfaz deseada, comenzamos a pensar el logo, definimos colores y tipografía a usar.
Inicialmente pensamos en tres colores, se realizó el logo basándonos en ellos: #F44E3F - #0F7173 - #D6D1B1
La tipografía la escogimos pensando en que fuera seria, elegante y legible. Fuente: Lato, regular 400 y Bold 700,
En el caso del nombre, basándonos en el enfoque de nuestra pagina web, pensamos en un nombre que fuera acorde a la temática de la pagina que es de supermercado, investigamos, y llegamos a la conclusión de que kwik-E-mart es una referencia a tiendas de mercado de barrio de la serie de Los Simpsons, y le agregamos el icono del carrito de compras para darle más significado al logo.
- Diseñar la aplicación pensando y entendiendo al usuario
- Crear prototipos para obtener feedback e iterar
- Aplicar los principios de diseño visual
- Uso correcto de HTML semántico
- Uso de selectores de CSS
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de selectores de nodos del DOM
- Manejo de eventos del DOM
- Manipulación dinámica del DOM
- Manipulación de strings
- Uso de condicionales
- Uso de bucles
- Uso de funciones
- Datos atómicos y estructurados
- Utilizar ES Modules (import | export).
- Testeo de tus funciones
- Comandos de git (add | commit | pull | status | push).
- Manejo de repositorios de GitHub (clone | fork | gh-pages).
- Buenas prácticas de desarrollo
- Organizar y dividir el código en módulos (Modularización).
- Uso de identificadores descriptivos (Nomenclatura | Semántica).
- Uso de linter para seguir buenas prácticas (ESLINT).