diff --git a/README.md b/README.md index b75e30f..d107c92 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,50 @@ -# Tarjeta de crédito válida +# YOUR SKIN - WEB SHOP ONLINE -## Índice +## 1. Definición del producto -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Pistas, tips y lecturas complementarias](#6-pistas-tips-y-lecturas-complementarias) +Se creó una plataforma web en donde los usuarios puedan realizar sus comprar de manera segura, esta pagina web cuenta +tambien con un validador de tarjeta el cual permite poder verificar que la tarjeta ingresada es válida y poder procesar +el pago del cliente. -*** +## 2. Resumen del proyecto -## 1. Preámbulo +El producto que se creo que una pagina web para una emprendimiento que vende productos para el cuidado de la piel, +esta empresa realizaba sus ventas a traves de whatsapp y facebook pero su capacidad de atención no alcanza a +responder a todos; muchos de sus clientes le solicitaban una pagina web en donde pudierar observar los productos +que tenia y poder comprar a traves de la plataforma. -El [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn), -también llamado algoritmo de módulo 10, es un método de suma de verificación, -se utiliza para validar números de identificación; tales como el IMEI de los -celulares, tarjetas de crédito, etc. +En consecuencia de ellos la empresa necesitaba una plataforma en donde se observe sus productos y que tambien +se pueda realizar las compra y el pago por ese medio. Para poder realizar el pago correctamente tambien la +empresa requeria un validador de tarjeta para poder procesar con el cobro correctamente. -Este algoritmo es simple. Obtenemos la reversa del número a verificar (que -solamente contiene dígitos [0-9]); a todos los números que ocupan una posición -par se les debe multiplicar por dos, si este número es mayor o igual a 10, -debemos sumar los dígitos del resultado; el número a verificar será válido si -la suma de sus dígitos finales es un múltiplo de 10. +* Quiénes son los principales usuarios de producto. -![gráfica de algoritmo de Luhn](https://www.101computing.net/wp/wp-content/uploads/Luhn-Algorithm.png) +Los usuarios son las personas que quieren comprar productos de cuidado de la piel por via online. -## 2. Resumen del proyecto +* Cuáles son los objetivos de estos usuarios en relación con tu producto. -En este proyecto tendrás que construir una aplicación web que le permita a un -usuario validar el número de una tarjeta de crédito. Además, tendrás que -implementar funcionalidad para ocultar todos los dígitos de una tarjeta menos -los últimos cuatro. +Poder realizar la compra online del producto con su tarjeta de crédito o débito -La temática es libre. Tú debes pensar en qué situaciones de la vida real se -necesitaría validar una tarjeta de crédito y pensar en cómo debe ser esa -experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) -etc. +* Cómo crees que el producto que estás creando está resolviendo sus problemas. -Trabajando en parejas aprenderán a construir una aplicación web que interactuará -con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript -como tecnologías. +A la empresa le ayudara a aumentar sus ventas. -## 3. Objetivos de aprendizaje +## 3. Prototipo inicial + +### Primera vista la web shop + + +### Segunda vista de información del cliente + + +### Vista del validador + -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. +## 3. Objetivos de aprendizaje ### HTML -- [ ] **Uso de HTML semántico** +- [✓] **Uso de HTML semántico**
Links

@@ -58,7 +54,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t ### CSS -- [ ] **Uso de selectores de CSS** +- [✓] **Uso de selectores de CSS**

Links

@@ -66,7 +62,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

-- [ ] **Modelo de caja (box model): borde, margen, padding** +- [✓] **Modelo de caja (box model): borde, margen, padding**
Links

@@ -79,7 +75,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t ### Web APIs -- [ ] **Uso de selectores del DOM** +- [✓] **Uso de selectores del DOM**

Links

@@ -88,7 +84,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +- [✓] **Manejo de eventos del DOM (listeners, propagación, delegación)**
Links

@@ -98,7 +94,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

-- [ ] **Manipulación dinámica del DOM** +- [✓] **Manipulación dinámica del DOM**
Links

@@ -119,7 +115,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos)

-- [ ] **Strings (cadenas de caracteres)** +- [✓] **Strings (cadenas de caracteres)**
Links

@@ -127,7 +123,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String)

-- [ ] **Variables (declaración, asignación, ámbito)** +- [✓] **Variables (declaración, asignación, ámbito)**
Links

@@ -135,7 +131,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)

-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +- [✓] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
Links

@@ -143,7 +139,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)

-- [ ] **Uso de bucles/ciclos (while, for, for..of)** +- [✓] **Uso de bucles/ciclos (while, for, for..of)**
Links

@@ -151,7 +147,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)

-- [ ] **Funciones (params, args, return)** +- [✓] **Funciones (params, args, return)**
Links

@@ -161,7 +157,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

-- [ ] **Pruebas unitarias (unit tests)** +- [✓] **Pruebas unitarias (unit tests)**
Links

@@ -178,17 +174,17 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t - [ ] **Uso de linter (ESLINT)** -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +- [✓] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** ### Control de Versiones (Git y GitHub) -- [ ] **Git: Instalación y configuración** +- [✓] **Git: Instalación y configuración** -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +- [✓] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +- [✓] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** -- [ ] **GitHub: Despliegue con GitHub Pages** +- [✓] **GitHub: Despliegue con GitHub Pages**

Links

@@ -197,238 +193,10 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t ### UX (User eXperience) -- [ ] **Diseñar la aplicación pensando en y entendiendo al usuario** - -- [ ] **Crear prototipos para obtener feedback e iterar** - -- [ ] **Aplicar los principios de diseño visual (contraste, alineación, jerarquía)** - -## 4. Consideraciones generales - -* El equipo de coaches te dará un tiempo sugerido e indicaciones sobre si trabajar - sola o en equipo. Recuerda que cada una aprende a diferente ritmo. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando GitHub pages. Si no sabes lo que es GitHub, no - te preocupes, lo aprenderás durante este proyecto. - -## 5. Criterios de aceptación mínimos del proyecto - -Usa solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9]. - -### Definición del producto - -En el `README.md`, cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso -para definir el producto final a nivel de experiencia y de interfaz. - -* Quiénes son los principales usuarios de producto. -* Cuáles son los objetivos de estos usuarios en relación con tu producto. -* Cómo crees que el producto que estás creando está resolviendo sus problemas. - -### Interfaz de usuario (UI) - -La interfaz debe permitir 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. - -### UX (Diseño de experiencia de usuario) - -Antes de iniciar a codear, debes entender el problema que quieres solucionar y -cómo tu aplicación lo soluciona. - -* Trabaja tu primer prototipo con papel y lápiz (blanco y negro). -* Luego valida esta solución con una compañera (pedir feedback). -* Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un - nuevo prototipo usando alguna herramienta para diseño de prototipos - ([Balsamiq](https://balsamiq.com/), [Figma](https://www.figma.com/), - [Google Slides](https://www.google.com/intl/es/slides/about/), etc.) -Estos puntos los presentarás en el `README.md`. - -### Scripts / Archivos - -#### General - -##### `README.md` - -Debe contener lo siguiente: - -* Un título con el nombre de tu proyecto. -* Un resumen de 1 o 2 líneas de qué se trata tu proyecto. -* La imagen final de tu proyecto. -* Investigación UX: - 1. Explicar quiénes son los usuarios y los objetivos en relación con el - producto. - 2. Explicar cómo el producto soluciona los problemas/necesidades de dichos - usuarios. - 3. Luego colocarás la foto de tu primer prototipo en papel. - 4. Agregar un resumen del feedback recibido indicando las mejoras a realizar. - 5. Imagen del prototipo final. - -#### Visualmente (HTML y CSS) - -Deberás maquetar de forma exacta el prototipo final que hiciste en la herramienta -de diseño de prototipos que escogiste utilizando HTML y CSS. En este momento elegirás -los colores, tipo de fuente, etc a usar. - -A continuación describimos los archivos que utilizarás: - -##### `src/index.html` - -En este archivo va el contenido que se mostrará al usuario (esqueleto HTML). -Encontrarás 3 etiquetas iniciales, las cuales si deseas puedes borrar y empezar -de cero: - -* `

`: encabezado de tu proyecto. -* `
`: contenido principal de tu proyecto. -* `