En este proyecto se simulo una tienda virtual, donde el usuario realiza la compra de un producto por medio de tarjeta de credito, como punto importante se realizó la validacion para saber si la tarjeta es valida o no utilizando el algoritmo de luhn, ademas se enmascaro el numero de la tarjeta dejando visible solo los ultimos cuatro digitos.
- Visualizacion del proyecto:
-
Investigación UX 👩👨
- Nuestros usuarios son compradores que cuenten con una tarjeta de credito para realizar el pago de los productos.
- Nuestro proyecto satisface la necesidad de los usuarios que quieran adquirir un producto por medio de una tienda virtual, nos aseguramos de que fuera fácil la navegación por la página y que fuera entendible.
- El sketch realizado fue el siguiente:
- Entre las mejoras recibidas en el feedback, se pedia ocultar la imagen de la tarjeta de credito hasta que el usuario diligenciara los datos solicitados. De acuerdo a esto se decidio mostrar el boton de "Validar" hasta que el usuario diligenciara el número de tarjeta y el nombre.
- El prototipo final se realizo en Figma:
- 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).
- 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).