ÍNDICE

• 1. BCS Verify®
• 2. Historia de Usuario
• 3. Realización del Diseño
• 4. Tecnologías empleadas
• 5. Fuentes
• 6. Autores

---

🔒 BCS Verify ®

Bank Card Security Verify®, es una idea de proyecto que busca enfocarse en ayudar a los usuarios con cualquier tipo de tarjeta de crédito o débito en prevenir estafas o robos desde cualquier ordenador o dispositivo móvil.

---

Historia de Usuario

Segmentación de clientes 🕵🏼

Dirigido a todas las personas que tengan a su nombre una Tarjeta de Crédito o Débito con bancos afiliados con las siguientes redes globales de tecnología que garantizan que puedas usar tu tarjeta de crédito o de débito en otros países:

¿Qué servicios brinda al usuario? 👩🏽‍💼

BCS Verify®, mediante su página web nos brinda lo siguiente:

• Página de información 📚: Da la bienvenida y explica sobre la compañía, los afiliados y métodos de seguridad.
• Página para la Validación ✔️: Muestra instrucciones de cómo validar una tarjeta mediante la página web. Además, brinda un formulario para hacerlo.
• Página para Bloquear 🚫: Muestra instrucciones de cómo bloquear una tarjeta mediante la página web, Además, brinda un formulario para hacerlo.
• Página de contacto 📞: Cuenta con la información completa de cómo, cuándo y los medios en los cuales puede comunicarse el usuario con la compañía.

¿Qué soluciones aporta al usuario? 👨🏽‍🏫

• En caso sufra un robo o sospecha de alguna estafa y no cuente con el tiempo de acudir a la larga espera ⏳ en una fila o una llamada telefónica al banco, podrá acceder desde cualquier ordenador o dispotisitivo móvil en cualquier parte del mundo 🌎 y llenar los formularios correspondientes para bloquear 🚫 o validar✔️ su tarjeta de crédito. 💳
• Cuenta con una amplia lista de redes sociales 📲en las cuales puede comunicarse el usuario en caso de dudas.

• También, cuenta con una línea 📞 totalmente gratuita las 24 horas al día los 365 dias del año para poder consultar cualquier duda.

---

Realización del Proyecto

Diseño 📱

Para la realización del diseño, pasamos por las siguientes fases:

1. Flowchart: 🤷🏼‍♀️

Al definir qué páginas contendrá la plataforma Web, se realizó un mapa semántico y un diagrama de flujo.

2. Prototipado de Baja Fidelidad: 📝

Consiste en realizar un esquema de la página web, a groso modo, mediante una hoja de papel.

3. Wireframe: 🙋🏼

Por consiguiente, en esta fase se busca realizar un esquema de distribución a groso modo de cada página que contiene la plataforma. A continuación, se mostrará parte del Wireframe; si desea puede verlo completo dando click Aquí.

4. Prototipado de Alta Fidelidad: 💁🏼

Luego de ya tener el Wirefrime, se diseña en base a estilos, paleta de colores, entre otros recursos. A continuación, se mostrará parte del Prototipado de Alta Fidelidad, si desea puede verlo completo dando click Aquí.

5. Mockup: 🧑🏾‍💻

Y, por último, se visualiza el cómo se acomodaría la página web en un dispositivo.

---

Tecnologías empleadas 👩🏾‍💻

Para la estructura y diseño:

• HTML: Siguiendo las reglas del HTML semántico se estructuró con un header que contiene una barra de navegación, el main para englobar el contenido principal y en el footer se detalla los derechos de autor.

• CSS: Usada para definir el estilo visual del proyecto.

Para el Testing:

• Jest: Framework para realizar los testing unitarios.

• Eslint: Herramienta de linting para analizar el código en busca de errores.

Para la funcionalidad:

• Javascript: Para dar la funcionalidad a la aplicación en donde se utilizó lo siguiente:

      📌 NOTA:¿Qué es una sentencia en JavaScript?
  
     ➔ Las aplicaciones JavaScript se componen de sentencias con una sintaxis propia.
  
     ➔ Una sentencia  puede estar formada por múltiples líneas. 
  
     ➔ Puede haber varias sentencias en una sola línea si separamos cada una de las sentencias por un punto y coma. No es una palabra clave, sino un grupo de palabras clave.
  

Funciones creadas:

• mostrarAdelante() Para que la la imagen de la Tarjeta se de vuelta.
• isValid() Para aplicar el algoritmo luhn en el número de tarjeta introducido por el usuario.
• maskify() Para ocultar los números de la tarjeta a excepción de los últimos 4 números.

Métodos o Funciones Nativas:

• AddEventListener() Toma el evento y lo pone a escuchar, y un segundo argumento para llamar cada vez que se desencadena el evento descrito. Se utiliza para agregar un controlador de eventos a un elemento especificado.
• toggle() Se usa en casos para ocultar y mostrar elementos de una página web.
• createElement() Se trata de pasarle el nombre de la etiqueta tag a utilizar.
• appendChild() Inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web.
• querySelector() Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.
• contains() Devuelve un valor Boolean indicando si un nodo es descendiente de un nodo dado o no.
• remove() Eliminar los objetos y el contenido que contengan dentro de lo mismos (nodos hijos), el contenido y el elemento borrado nunca se eliminará físicamente del HTML si no dinámicamente del DOM.
• getElementById() Permite, como su nombre indica, seleccionar un elemento del documento por medio del valor del atributo id que se le haya asignado.
• split() Sirve para dividir una cadena en partes utilizando un carácter delimitador, devolviéndonos un array con los “trozos”. También admite un segundo parámetro opcional que indica cuántos elementos queremos que nos devuelva.
• reverse() Invierte el orden de los elementos de un array in place. El primer elemento pasa a ser el último y el último pasa a ser el primero.
• log() Muestra un mensaje en la consola web (o del intérprete JavaScript).
• push() Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
• toString() Comprueba su primer argumento, e intenta devolver una cadena de representación en la base especificada.
• join () Se utiliza para convertir todos los elementos en la matriz en una cadena. Los elementos se designan por el delimitador separado.
• split Sirve para dividir una cadena en partes utilizando un carácter delimitador, devolviéndonos un array con los “trozos”. También admite un segundo parámetro opcional que indica cuántos elementos queremos que nos devuelva.
• concat() Se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.
• parseInt() Comprueba el primer argumento, una cadena, e intenta devolver un entero de la base especificada. Por ejemplo, una base de 10 indica una conversión a número decimal, 8 octal, 16 hexadecimal, y así sucesivamente.
• replace() Ejecuta una búsqueda por una coincidencia en una cadena y reemplaza la subcadena coincidente con una subcadena de reemplazo.
• getFullYear() devuelve el año de la fecha indicada acorde a la hora local.
• trim() Elimina el ultimo espaciado.

Objetos:

• Console Provee acceso a la consola de depuración de los navegadores
• Date Proporciona un comportamiento uniforme entre plataformas. El objeto Date soporta métodos UTC (universales), además de métodos horarios locales. UTC, también conocido como Greenwich Mean Time (GMT), se refiere a la hora según el Estádar Horario Mundial (World Time Standard).

Expresiones regulares:

• (/\s/g, '') Para eliminar espacios en blanco.
• (/\D/g, '') Para eliminar las letras.
• (/([0-9]{4})/g, '$1 ') Para agrupar en 4 y agregar un espacio.
• (/([0-9]{4})/g, '$1 ') Para agrupar en 4 y agregar un espacio.

Declaradores:

• let Definimos variable con block scope, las variables declaradas de esta manera nos genera un error de referencia cuando intentamos utilizar hoisting.
• const Definimos variables de sólo lectura (no confundir con inmutables), esto quiere decir que, cuando asignamos una variable, el nombre de esta va estar asignada a un puntero en memoria, el cual no puede ser sobreescrito o reasignado.
• var Definimos una variable con local scope, también nos permite utilizar un comportamiento llamado hoisting, sin generar ningún error.
• export La declaración export se utiliza al crear módulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del módulo para que puedan ser utilizados por otros programas con la sentencia import .
• import Se usa para importar funciones que han sido exportadas desde un módulo externo.
• this This es una referencia que se crea cuando una función es invocada, no declarada. El valor de esa referencia depende al 100% del lugar en la que esa invocación se realice, llamado call-site. Ese lugar de llamada es la invocación en sí a la función.
• if... else Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada.
• while() Crea un bucle que ejecuta la instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la instrucción.
• for() Un ciclo for se repite hasta que una condición especificada se evalúe como false .

Instruccionadores:

• return Una instrucción return termina la ejecución de una función y devuelve el control a la función de llamada. La ejecución se reanuda en la función de llamada, en el punto que sigue inmediatamente a la llamada. Una instrucción return puede devolver un valor a la función de llamada.

Operadores:

Nombre	Operador abreviado	Significado
Asignación	x = y	x = y
Asignación de adición	x += y	x = x + y
Igual	==	Devuelve true si los operandos son iguales.
No es igual	!=	Devuelve true si los operandos no son iguales.
Estrictamente igual	===	Devuelve true si los operandos son iguales y del mismo tipo. Consulta también Object.is y similitud en JS.
Mayor o igual que	>=	Devuelve true si el operando izquierdo es mayor o igual que el operando derecho.
Menor o igual	<=	Devuelve true si el operando izquierdo es menor o igual que el operando derecho.
Residuo	%	Operador binario. Devuelve el resto entero de dividir los dos operandos.
Incremento	++	Operador unario. Agrega uno a su operando. Si se usa como operador prefijo (++x), devuelve el valor de su operando después de agregar uno; si se usa como operador sufijo (x++), devuelve el valor de su operando antes de agregar uno.
Decremento	--	Operador unario. Resta uno de su operando. El valor de retorno es análogo al del operador de incremento.
AND a nivel de bits	a & b	Devuelve un uno en cada posición del bit para los que los bits correspondientes de ambos operandos son unos.
AND Lógico	&&	Devuelve expr1 si se puede convertir a false; de lo contrario, devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, && devuelve true si ambos operandos son true; de lo contrario, devuelve false.
NOT lógico	!	Devuelve false si su único operando se puede convertir a true; de lo contrario, devuelve true.
operador condicional	condition ? val1 : val2	Si condition es true, el operador tiene el valor de val1. De lo contrario, tiene el valor de val2. Puedes utilizar el operador condicional en cualquier lugar donde normalmente utilizas un operador estándar.
operador coma	,	simplemente evalúa ambos operandos y devuelve el valor del último operando. Este operador se utiliza principalmente dentro de un bucle for, para permitir que se actualicen múltiples variables cada vez a través del bucle.
operador new	new	permite crear un objeto de cualquier tipo, incluyendo tipos definidos por el usuario, y devuelve un puntero (del tipo adecuado) al objeto creado.
Operadores de tipo miembro	. []	Indican
Operadores condicionales	?:	condicional

---

Fuentes 📚

• Repositorio de Laboratoria: Se encuentran todas las condiciones y herramientas a trabajar para el proyecto.

Autores 📍

• Rosamaria Rodriguez
• Equipo de Laboratoria LIM016