Cambios el readme de Card Validation para ser parecido de Cipher

projects/01-card-validation/README.md

@@ -4,10 +4,13 @@
 
 * [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)
+* [3. Consideraciones generales](#3-consideraciones-generales)
+* [4. Hito: Criterios de aceptación mínimos del proyecto](#4-hito-criterios-de-aceptación-mínimos-del-proyecto)
+* [5. Hito Opcional: Mostrar la franquicia de tarjeta](#5-hito-opcional-mostrar-la-franquicia-de-tarjeta)
+* [6. Consideraciones técnicas](#6-consideraciones-técnicas)
+* [7. Objetivos de aprendizaje](#7-objetivos-de-aprendizaje)
+* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
+* [9. Para considerar Project Feedback](#9-para-considerar-project-feedback)
 
 ***
 
@@ -38,136 +41,137 @@ 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.
 
-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.
-
-## 3. Objetivos de aprendizaje
-
-> ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir
-> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml),
-> al crear el repo del proyecto para un cohort en particular usando
-> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches).
->
-> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml)
-> que contempla nuestra currícula.
-
-## 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.
+Como continuación del proyecto de preadmisión, volverás a trabajar sobre
+fundamentos de JavaScript, incluyendo conceptos como variables, condicionales,
+y funciones, así como eventos y manipulación básica del DOM, fundamentos de
+HTML y CSS. Mientras desarrollas este proyecto, te familiarizarás con nuevos
+conceptos también.
+
+### Los objetivos generales de este proyecto son los siguientes
+
+* Trabajar en base a un boilerplate, la estructura básica de un proyecto en
+  distintas carpetas (a través modulos en JS).
+* Conocer las herramientas de mantenimiento y mejora del código (linters y
+  pruebas unitarias).
+* Aprender sobre objetos, estructuras, métodos e iteración (bucles)
+  en JavaScript
+* Implementar control de versiones con git (y la plataforma github)
+
+## 3. Consideraciones generales
+
+* Este proyecto lo resolvemos de manera individual. Te recomendamos una
+  duracion de 1-3 sprints.
+* Enfócate en aprender y no solamente en "completar" el proyecto.
+* Te sugerimos que no intentes saberlo todo antes de empezar a codear.
+  No te preocupes demasiado ahora por lo que _todavía_ no entiendas.
+  Irás aprendiendo.
+
+## 4. Hito: Criterios de aceptación mínimos del proyecto
+
+Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu
+trabajo cubra los objetivos principales.
+
+**1. Una interfaz que debe permitir a la usuaria:**
+
+* Insertar un numero (texto) que quieres validar. Usa solo caracteres numéricos
+  (dígitos) en la tarjeta a validar [0-9].  
+* Ver si el resultado es válido o no.  
+* Ocultar todos los dígitos del número de tarjeta a exepción de los últimos
+  4 caracteres.  
+* No debes poder ingresar un campo vacío.  
+
+**2. Pruebas unitarias de los métodos.**  
+Los metódos de `validator` (`isValid` y `maskify`) deben tener cobertura con
+pruebas unitarias.
+
+**3. Código de tu proyecto subido a tu repo e interfaz "desplegada".**  
+El código final debe estar subido en un repositorio en GitHub. La interfaz o
+pagina web, debe ser "desplegada" (accesible públicamente online) usando
+GitHub Pages.
+
+**4. Un README que contiene una definición del producto.**  
+En el README 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.  
+Estas preguntas sirven como guía:
 
 * 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:
-
-* `<header>`: encabezado de tu proyecto.
-* `<main>`: contenido principal de tu proyecto.
-* `<footer>`: pie de página de tu proyecto.
-
-##### `src/style.css`
-
-Este archivo debe contener las reglas de estilo. Queremos que escribas tus
-propias reglas, por eso NO está permitido el uso de frameworks de CSS
-(Bootstrap, materialize, etc).
-
-#### Funcionalmente (JavaScript - pruebas unitarias)
-
-* La lógica del proyecto debe estar implementada completamente en JavaScript.
-* En este proyecto NO está permitido usar librerías o frameworks, solo
-  JavaScript puro también conocido como Vanilla JavaScript.
-
-Vas a tener 2 archivos JavaScript separando responsabilidades, a continuación
-indicamos qué harás en cada archivo:
-
-##### `src/validator.js`
-
-Acá escribirás las funciones necesarias para que el usuario pueda verificar la
-tarjeta de crédito y ocultar los dígitos de su número de tarjeta.
-Esta función debe ser pura e independiente del DOM.
-
-Para esto debes implementar el **objeto `validator`**, el cual ya se encuentra
-_exportado_ en el _boilerplate_. Este objeto (`validator`) contiene
-dos métodos (`isValid` y `maskify`):
-
-* **`validator.isValid(creditCardNumber)`**: `creditCardNumber` es un `string`
-con el número de tarjeta que se va a verificar. Esta función debe retornar un
-`boolean` dependiendo si es válida de acuerdo al [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn).
-
-* **`validator.maskify(creditCardNumber)`**: `creditCardNumber` es un `string` con
-el número de tarjeta y esta función debe retornar un `string` donde todos menos
-los últimos cuatro caracteres sean reemplazados por un numeral (`#`) o 🐱.
-Esta función deberá siempre mantener los últimos cuatro caracteres intactos, aún
-cuando el `string` sea de menor longitud.
+Con estos requisitos cumplidos puedes
+[considerar agendar un Project Feedback con unx coach.](#9-para-considerar-project-feedback)
+
+## 5. Hito Opcional: Mostrar la franquicia de tarjeta
+
+Las partes opcionales tienen como intención permitirte profundizar un poco más
+sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y
+contras, decide sabiamente si quieres invertir el tiempo en profundizar/
+perfeccionar o aprender cosas nuevas en el siguiente proyecto.
+
+En hito 2 puedes además de validar si el número de la
+tarjeta es válida, mostrar la [franquicia](https://es.wikipedia.org/wiki/N%C3%BAmero_de_tarjeta_bancaria)
+de la tarjeta (ej: Visa, MasterCard, etc)
+usando estas [reglas de validación](https://stevemorse.org/ssn/cc.html).
+Si escribes un nuevo método para eso, hay que hacer pruebas unitarias.
+
+## 6. Consideraciones técnicas
+
+La lógica del proyecto debe estar implementada completamente en JavaScript. En
+este proyecto NO está permitido usar librerías o frameworks, solo JavaScript
+puro también conocido como Vanilla JavaScript.
+
+Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este
+repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_
+es la estructura basica de un proyecto que sirve como un punto de partida con
+archivos inicial y configuración basica de dependencias y tests.
+
+Los tests unitarios deben cubrir un mínimo del 70% de _statements_, _functions_
+y _lines_, y un mínimo del 50% de _branches_. El _boilerplate_ ya contiene el
+setup y configuración necesaria para ejecutar los tests (pruebas) así como _code
+coverage_ para ver el nivel de cobertura de los tests usando el comando `npm
+test`.
+
+El boilerplate que les damos contiene esta estructura:
+
+```text
+./
+├── .babelrc
+├── .editorconfig
+├── .eslintrc
+├── .gitignore
+├── README.md
+├── package.json
+├── src
+│   ├── validator.js
+│   ├── index.html
+│   ├── index.js
+│   └── style.css
+└── test
+    ├── .eslintrc
+    └── validator.spec.js
+```
+
+### Descripción de scripts / archivos
+
+* `README.md`: debe explicar la información necesaria para el uso de tu aplicación
+  web, así como una introducción a la aplicación, su funcionalidad y decisiones de
+  diseño que tomaron.
+* `src/index.html`: este es el punto de entrada a tu aplicación. Este archivo
+  debe contener tu _markup_ (HTML) e incluir el CSS y JavaScript necesario.
+* `src/style.css`: este archivo debe contener las reglas de estilo. Queremos que
+  escribas tus propias reglas, por eso NO está permitido el uso de frameworks de
+  CSS (Bootstrap, Materialize, etc).
+* `src/validator.js`: acá debes implementar el objeto `validator`, el cual ya está
+  _exportado_ en el _boilerplate_. Este objeto (`validator`) debe contener dos
+  métodos:
+  - `validator.isValid(creditCardNumber)`: `creditCardNumber` es un `string`
+     con el número de tarjeta que se va a verificar. Esta función debe retornar
+     un `boolean` dependiendo si es válida de acuerdo al [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn).
+  - `validator.maskify(creditCardNumber)`: `creditCardNumber` es un `string` con
+    el número de tarjeta y esta función debe retornar un `string` donde todos menos
+    los últimos cuatro caracteres sean reemplazados por un numeral (`#`) o 🐱.
+    Esta función deberá siempre mantener los últimos cuatro caracteres
+    intactos, aún cuando el `string` sea de menor longitud.
 
     Ejemplo de uso
 
@@ -178,21 +182,22 @@ cuando el `string` sea de menor longitud.
     maskify(               '')  ===                ''
     ```
 
-##### `src/index.js`
-
-Acá escribirás todo el código que tenga que ver con la interacción del DOM
-(seleccionar, actualizar y manipular elementos del DOM y eventos).
-Es decir, en este archivo deberás invocar las funciones `isValid` y `maskify`
-según sea necesario para actualizar el resultado en la pantalla (UI).
-
-##### `test/validator.spec.js`
-
-En este archivo tendrás que completar las pruebas unitarias de las funciones
-`validator.isValid(creditCardNumber)` y `validator.maskify(creditCardNumber)`
-implementadas en `validator.js` utilizando [Jest](https://jestjs.io/es-ES/).
-Tus pruebas unitarias deben dar un 70% en _coverage_ (cobertura),
-_statements_ (sentencias), _functions_ (funciones) y _lines_ (líneas); y un
-mínimo del 50% de _branches_ (ramas).
+* `src/index.js`: acá debes escuchar eventos del DOM, invocar
+  `validator.isValid()` y `validator.maskify()` según sea necesario y
+  actualizar el resultado en la UI (interfaz de usuario).
+* `test/validator.spec.js`: este archivo contiene algunos tests de ejemplo y acá
+  tendrás que implementar los tests para `validator.isValid()` y `validator.maskify()`.
+
+El _boilerplate_ incluye tareas que ejecutan [eslint](https://eslint.org/) y
+[htmlhint](https://github.com/yaniswang/HTMLHint) para verificar el `HTML` y
+`JavaScript` con respecto a una guías de estilos. Ambas tareas se ejecutan
+automáticamente antes de ejecutar las pruebas (tests) cuando usamos el comando
+`npm run test`. En el caso de `JavaScript` estamos usando un archivo de
+configuración de `eslint` que se llama `.eslintrc` que contiene un mínimo de
+información sobre el parser que usar (qué version de JavaScript/ECMAScript), el
+entorno (browser en este caso) y las [reglas recomendadas (`"eslint:recommended"`)](https://eslint.org/docs/rules/).
+En cuanto a reglas/guías de estilo en sí,
+usaremos las recomendaciones _por defecto_ de tanto `eslint` como `htmlhint`.
 
 ***
 
@@ -206,9 +211,19 @@ En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web.
 El comando `npm run deploy` puede ayudarte con esta tarea y también puedes
  consultar su [documentación oficial](https://docs.github.com/es/pages).
 
-## 6. Pistas, tips y lecturas complementarias
+## 7. Objetivos de aprendizaje
 
-### Primeros pasos
+> ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir
+> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml),
+> al crear el repo del proyecto para un cohort en particular usando
+> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches).
+>
+> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml)
+> que contempla nuestra currícula.
+
+## 8. Pistas, tips y lecturas complementarias
+
+### Prepara tu PC para trabajar
 
 1. Antes que nada, asegúrate de tener un :pencil: editor de texto en
    condiciones, algo como [Atom](https://atom.io/) o
@@ -252,12 +267,6 @@ con detenimiento y sigue sus consejos! :)
 
 [Link](https://www.youtube.com/watch?v=f0zL6Ot9y_w)
 
-También una metodología para empezar a desarrollar tareas con JavaScript:
-
-[![Resolución de problemas con JavaScript](http://i3.ytimg.com/vi/lYfEmhLmu7A/hqdefault.jpg)](https://www.youtube.com/watch?v=lYfEmhLmu7A)
-
-[Link](https://www.youtube.com/watch?v=lYfEmhLmu7A)
-
 Terminal y shell de UNIX:
 
 [![Playlist de Terminal y shell de UNIX](https://img.youtube.com/vi/GB35Eyb-J4c/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd)
@@ -270,19 +279,10 @@ Control de versiones y trabajo colaborativo con Git y GitHub:
 
 [Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)
 
-Diseño de experiencia de usuario (User Experience Design):
-
-* Ideación
-* Prototipado (sketching)
-* Testeo e Iteración
-
 Desarrollo Front-end:
 
-* Valores
-* Tipos
-* Variables
-* Control de flujo
-* Tests unitarios
+* Aprende más sobre [objetos](https://es.javascript.info/object) y
+  [como definir métodos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects#definici%C3%B3n_de_m%C3%A9todos)
 * [Documentación de NPM](https://docs.npmjs.com/)
 
 Organización del Trabajo:
@@ -293,3 +293,19 @@ Organización del Trabajo:
   esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a
   poco a lo largo del -_bootcamp_.
 * [Blog: cómo funciona el algoritmo de Luhn](http://www.quobit.mx/asi-funciona-el-algoritmo-de-luhn-para-generar-numeros-de-tarjetas-de-credito.html).
+
+***
+
+## 9. Para considerar Project Feedback
+
+En resumen, los criterios de aceptación mínimos del proyecto para considerar
+Project Feedback:
+
+* [ ] Tiene una interfaz que permite a la usuaria saber si la tarjeta es valido
+  y ocultar el numero hasta las 4 ultimos digitos.
+* [ ] El proyecto será entregado incluyendo pruebas unitarios de los métodos de
+  `validator` (`isValid` y `maskify`).
+* [ ] El proyecto será entregado libre de _errores_ de `eslint` (_warnings_ son ok).
+* [ ] El proyecto será entregado subiendo tu código a GitHub.
+* [ ] La interfaz será "desplegada" usando GitHub Pages.
+* [ ] El README contiene una definición del producto.