diff --git a/README.md b/README.md index e42dffa..202de61 100644 --- a/README.md +++ b/README.md @@ -1,360 +1,89 @@ -# Tarjeta de crédito válida +## :musical_score: FULL MUSIC - CARD VALIDATION -## Índice +FULL MUSIC, la página que te permitirá acceder a una plataforma con contenido musical de +todos los géneros después de validar tu tarjeta de crédito. + +

+ + + +

-* [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. Consideraciones técnicas](#6-consideraciones-técnicas) -* [7. Pistas, tips y lecturas complementarias](#7-pistas-tips-y-lecturas-complementarias) *** -## 1. Preámbulo -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. +## :mag: INVESTIGACIÓN UX: -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. +* Página dirigida a usuarios en general, que necesiten un espacion de entretenimiento en el rubro musical. -![gráfica de algoritmo de Luhn](https://www.101computing.net/wp/wp-content/uploads/Luhn-Algorithm.png) +* Los usuarios pueden acceder a la plataforma de "FULL MUSIC", para ésto será necesario que el usuario +cree su cuenta, posteriormente ingresar el número de tarjeta de crédito como medio de pago, éste número +de tarjeta será validada y finalmente al comprobar y aceptar todos sus datos tendrá acceso a las distintas +variedades en música. -## 2. Resumen del proyecto +* El usuario podrá interactuar de manera dinámica con cada funcionalidad de la página. -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. +#### Prototipo Baja Fidelidad -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. +

+ +

-## 3. Objetivos de aprendizaje +#### Feedback - Testeo de Usabilidad -El objetivo principal de aprendizaje es adquirir experiencia desarrollando -aplicaciones web (WebApp) que interactúen con el usuario a través del navegador -y la lógica, utilizando HTML, CSS y JavaScript como herramientas. +* En la vista donde ingresamos el numero de tarjeta de crédito, será necesario dos botones: uno que me envíe + a la vista principal y el segundo que me verifique si la tarjeta es válida o no. -Reflexiona y luego marca los objetivos que has llegado a **entender** y -**aplicar** en tu proyecto. +* Añadir información referencial de la creadora de la página, utilizando el footer como contenedor -### UX +* En la vista principal mostrar un mensaje de bienvenida -* [ ] [Diseñar la aplicación pensando y entendiendo al usuario](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/intro-ux/01-el-proceso-de-diseno/00-el-proceso-de-diseno) -* [ ] [Crear prototipos para obtener feedback e iterar](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/product-design/00-sketching/00-sketching) -* [ ] [Aplicar los principios de diseño visual](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/product-design/01-visual-design/01-visual-design-basics) +* La tercera vista será innecesaria, la cual será reemplazada con una ventana emergente con toda la información + solo si la tarjeta es válida -### HTML y CSS +### Version Desktop -* [ ] [Uso correcto de HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -* [ ] [Uso de selectores de CSS](https://developer.mozilla.org/es/docs/Web/CSS/Selectores_CSS) -* [ ] [Construir tu aplicación respetando el diseño realizado](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/css/01-css/02-boxmodel-and-display) (maquetación). +![AltaFidelidad](./assets/mockupdesktop.gif) -### DOM +### Version Mobile -* [ ] [Uso de selectores de nodos del DOM](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/browser/02-dom/03-1-dom-methods-selection) -* [ ] [Manejo de eventos del DOM](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/browser/02-dom/04-events) -* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) +![AltaFidelidad](./assets/mockupUp.gif) -### Javascript +![AltaFidelidad](./assets/mockupmobile.gif) -* [ ] [Manipulación de strings](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/06-strings/01-strings) -* [ ] [Uso de condicionales](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/02-flow-control/01-conditionals-and-loops) -* [ ] [Uso de bucles](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/02-flow-control/02-loops) -* [ ] [Uso de funciones](https://lms.laboratoria.la/cohorts/lim-2019-09-bc-core-lim011/courses/javascript/02-flow-control/03-functions) -* [ ] [Datos atómicos y estructurados](https://www.todojs.com/tipos-datos-javascript-es6/) -* [ ] Utilizar ES Modules (`import` | `export`). -### Testing +*** -* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started) -### Git y GitHub +## Objetivos de aprendizaje -* [ ] [Comandos de git](https://lms.laboratoria.la/cohorts/lim-2019-09-bc-core-lim011/courses/scm/01-git/04-commands) +### UX +* [x] [Diseñar la aplicación pensando y entendiendo al usuario](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/intro-ux/01-el-proceso-de-diseno/00-el-proceso-de-diseno) +* [x] [Crear prototipos para obtener feedback e iterar](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/product-design/00-sketching/00-sketching) +* [ ] [Aplicar los principios de diseño visual](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/product-design/01-visual-design/01-visual-design-basics) +### HTML y CSS +* [x] [Uso correcto de HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) +* [x] [Uso de selectores de CSS](https://developer.mozilla.org/es/docs/Web/CSS/Selectores_CSS) +* [x] [Construir tu aplicación respetando el diseño realizado](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/css/01-css/02-boxmodel-and-display) (maquetación). +### DOM +* [x] [Uso de selectores de nodos del DOM](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/browser/02-dom/03-1-dom-methods-selection) +* [x] [Manejo de eventos del DOM](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/browser/02-dom/04-events) +* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) +### Javascript +* [x] [Manipulación de strings](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/06-strings/01-strings) +* [x] [Uso de condicionales](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/02-flow-control/01-conditionals-and-loops) +* [x] [Uso de bucles](https://lms.laboratoria.la/cohorts/lim-2020-01-bc-core-lim012/courses/javascript/02-flow-control/02-loops) +* [x] [Uso de funciones](https://lms.laboratoria.la/cohorts/lim-2019-09-bc-core-lim011/courses/javascript/02-flow-control/03-functions) +* [x] [Datos atómicos y estructurados](https://www.todojs.com/tipos-datos-javascript-es6/) +* [ ] Utilizar ES Modules (`import` | `export`). +### Testing +* [x] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started) +### Git y GitHub +* [x] [Comandos de git](https://lms.laboratoria.la/cohorts/lim-2019-09-bc-core-lim011/courses/scm/01-git/04-commands) (`add` | `commit` | `pull` | `status` | `push`). * [ ] [Manejo de repositorios de GitHub](https://lms.laboratoria.la/cohorts/lim-2019-09-bc-core-lim011/courses/scm/02-github/01-github) (`clone` | `fork` | `gh-pages`). - ### Buenas prácticas de desarrollo - -* [ ] Organizar y dividir el código en módulos (Modularización). +* [x] 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). - -## 4. Consideraciones generales - -* Este proyecto se debe resolver de manera individual. -* El proyecto será entregado subiendo tu código a GitHub (`commit`/`push`) y la - interfaz será desplegada usando [GitHub pages](https://pages.github.com). Si - no sabes lo que es GitHub, no te preocupes, lo aprenderás durante este proyecto. -* Tiempo para completarlo: Toma como referencia 2 semanas. Trabaja durante el - primer Sprint (una semana) y al final, trata de fijar un estimado de cuándo lo - terminarás. - -## 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 balsamiq -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. -* `