Índice

• 1. Criptolove
• 2. Instalación
• 3. Objetivos de aprendizaje
• 4. Definición del producto
• 5. Consideraciones técnicas
• 9. Checklist

---

1. Críptolove

Criptolove es una aplicación que permite encriptar y desencriptar mensajes para tu amad@, sugar daddy o sugar mommy, nuestro programa funciona con el uso del cifrado cesar para poder encriptar o desencriptar tu mensaje, puedes así obtener un párrafo completo o una frase para que no te descubran mientras escribes a esa persona secreta.

En Criptolove usamos un desplazamiento de 3 posiciones.

Ejemplo:

• La letra A se cifra como D.
• La palabra CASA se cifra como FDVD.
• Alfabeto sin cifrar: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
• Alfabeto cifrado: D E F G H I J K L M N O P Q R S T U V W X Y Z A B C

Diseño:

Para el diseño de nuestra aplicación, iniciamos a hacer un boceto en modo compartido con Figma, procuramos que la paleta de colores fuera armonica y acoorde con el fondo, sin embargo en el proceso hubo una modificacion en la parte de la opacidad del fondo, debido a que es dificil poder ver la letra y los botones para el usuario.

Posteriormente continuamos con el mismo formato y distribucion de los elementos para las pantallas de desencriptado y encriptado, manteniendo la paleta de colores de la pantalla de inicio.

2. Instalación

Si quieres correr el código de este proyecto sigue estas instrucciones:

1. Ingresa a la página:

github.com/angiecortesdev/BOG002-cipher.

2. Haz Fork dentro de la página, esto con el fin de copiar el repositorio en tu GitHub.

3. Ahora debes clonar el codigo mediante el comando:

 git clone github.com/angiecortesdev/BOG002-cipher.git.

4. Abre el archivo con visual studio code o el editor de tu preferencia.

5. Asegurate de tener instalado node.js. En caso de no tenerlo dirigete a está página:

node js

6. Si por lo contrario ya cuentas con node js en tu computadora, ve tu terminal e ingresa el comando:

npm i (para actualizar los packetes de node)

7. Cuando actualicen los paquetes de node, En tu terminal ingresa npm start, podras ver y comenzar a trabajar en el proyecto.

3. Objetivos de aprendizaje

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.

HTML y CSS

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).

DOM

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• Manipulación de strings.
• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Declaración correcta de variables (const & let)

Testing

• Testeo unitario.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)

UX

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)

4. Definición del producto

• ¿Quiénes son los principales usuarios de producto?: Nuestro público objetivo son personas con edades entre 18 a 80.

• ¿Cuáles son los objetivos de estos usuarios en relación con tu producto?: Tener un lugar seguro para poder chatear con tu persona amada.

• ¿Cómo crees que el producto que estás creando está resolviendo sus problemas?: Ya sabemos que para nuestros usuarios es importante su seguridad y sencillez a la hora del uso.

5. Consideraciones técnicas

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias y tests:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── assets
          ├── besos.jpg
          ├── desencriptado.jpg
          ├── encriptado. jpg
          └── inicio.jpg
│   ├── cipher.js
│   ├── index.html
│   ├── encriptado.html
│   ├── desencriptado.html
│   ├── index.js
│   └── css
          └── styles.css
└── test
    ├── .eslintrc
    └── cipher.spec.js

Parte Obligatoria

• README.md incluye info sobre proceso y decisiones de diseño.
• README.md explica claramente quiénes son los usuarios y su relación con el producto.
• README.md explica claramente cómo el producto soluciona los problemas/necesidades de los usuarios.
• Usa VanillaJS.
• No utiliza this.
• Implementa cipher.encode.
• Implementa cipher.decode.
• Pasa linter con configuración provista.
• Pasa pruebas unitarias.
• Pruebas unitarias cubren 70% de statements, functions y lines, y un mínimo del 50% de branches.
• Interfaz permite elegir el offset o desplazamiento a usar en el cifrado/descifrado.
• Interfaz permite escribir un texto para ser cifrado.
• Interfaz muestra el resultado del cifrado correctamente.
• Interfaz permite escribir un texto para ser descifrado.
• Interfaz muestra el resultado del descifrado correctamente.

Parte Opcional: "Hacker edition"

• Cifra/descifra minúsculas
• Cifra/descifra otros caracteres (espacios, puntuación, ñ, á, ...)
• Permite usar un offset negativo.