Cifrado César

Índice

1. Preámbulo
2. Resumen del proyecto
3. Objetivos de aprendizaje
4. Consideraciones generales
5. Criterios de aceptación mínimos del proyecto
6. Hacker edition
7. Consideraciones técnicas
8. Pistas, tips y lecturas complementarias
9. Checklist

1. Preámbulo

Cifrar significa codificar. El cifrado César es uno de los primeros métodos de cifrado conocidos. El emperador romano Julio César lo usaba para enviar órdenes secretas a sus generales en los campos de batalla.

El cifrado césar es una de las técnicas más simples para cifrar un mensaje. Es un tipo de cifrado por sustitución, es decir que cada letra del texto original es reemplazada por otra que se encuentra un número fijo de posiciones (desplazamiento) más adelante en el mismo alfabeto.

Por ejemplo, si usamos un desplazamiento (offset) de 3 posiciones:

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

En la actualidad, todos los cifrados de sustitución simple se descifran con mucha facilidad y, aunque en la práctica no ofrecen mucha seguridad en la comunicación por sí mismos; el cifrado César sí puede formar parte de sistemas más complejos de codificación, como el cifrado Vigenère, e incluso tiene aplicación en el sistema ROT13.

2. Resumen del proyecto

¿Qué tengo que hacer exactamente? En este proyecto crearás una aplicación web que servirá para que el usuario pueda cifrar y descifrar un texto indicando un desplazamiento específico de caracteres (offset).

La temática es libre. Tú debes pensar en qué situaciones de la vida real se necesitaría cifrar un mensaje y pensar en cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) etc. Algunas ideas de ejemplo:

Crear claves seguras para el email.
Encriptar/cifrar una tarjeta de crédito.
Herramienta de mensajería interna de una organización de derechos humanos en una zona de conflicto.
Mensajería secreta para parejas.

3. Objetivos de aprendizaje

Aprenderás 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.

No olvides a pensar en tu plan de acción - los objetivos que vas a prioritizar - y agrega tu plan en el README.

HTML y CSS

Uso de HTML semántico.
Uso de selectores de CSS.

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. Consideraciones generales

El equipo de coaches te dará un tiempo sugerido e indicaciones. 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 este alfabeto simple (solamente mayúsculas y sin ñ):

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

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:

Elegir un desplazamiento (offset) indicando cuántas posiciones queremos que el cifrado desplace cada caracter.
Insertar un mensaje (texto) que queremos cifrar.
Ver el resultado del mensaje cifrado.
Insertar un mensaje (texto) a descifrar.
Ver el resultado del mensaje descifrado.

Scripts / Archivos

README.md: debe explicar cómo descargar, instalar y ejecutar la aplicación así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron. Aquí puedes agregar un parte para definir tu plan de acción, Objetivos de Aprendizaje que vas a prioritizar este proyecto.
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/cipher.js: acá debes implementar el objeto cipher, el cual ya está exportado en el boilerplate. Este objeto (cipher) debe contener dos métodos:
- cipher.encode(offset, string): offset es el número de posiciones que queremos mover a la derecha en el alfabeto y string el mensaje (texto) que queremos cifrar.
- cipher.decode(offset, string): offset es el número de posiciones que queremos mover a la izquierda en el alfabeto y string el mensaje (texto) que queremos descifrar.
src/index.js: acá debes escuchar eventos del DOM, invocar cipher.encode() o cipher.decode() según sea necesario y actualizar el resultado en la UI.
test/cipher.spec.js: este archivo contiene algunos tests de ejemplo y acá tendrás que implementar los tests para cipher.encode() y cipher.decode().

6. Hacker edition

Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.

La descripción general de este proyecto no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El boilerplate incluye algunos tests (comentados en principio) que puedes usar como punto de partida para implementar el soporte para estos casos.

Tampoco se menciona qué pasaría si el offset fuera negativo. Como parte del hacker edition te invitamos a explorar también esta caso por tu cuenta.

7. 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.

No se debe utilizar la pseudo-variable this.

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 incluye tests (pruebas) de ejemplo como punto de partida.

Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio que contiene el boilerplate.

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

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── cipher.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── cipher.spec.js

El boilerplate incluye tareas que ejecutan eslint y 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"). En cuanto a reglas/guías de estilo en sí, usaremos las recomendaciones por defecto de tanto eslint como htmlhint.

8. Pistas, tips y lecturas complementarias

Primeros pasos

Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
Para ejecutar los comandos a continuación necesitarás una 🐚 UNIX Shell, que es un programita que interpreta líneas de comando (command-line interpreter) así como tener git instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS, ya tienes una shell (terminal) instalada por defecto (y probablemente git también). Si usas Windows puedes usar la versión completa de Cmder que incluye Git bash y si tienes Windows 10 o superior puedes usar Windows Subsystem for Linux.
Debes realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo.
⬇️ Clona tu fork a tu computadora (copia local).
📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
A codear se ha dicho! 🚀

Achicando el gran problema en problemas más pequeños

Un "superpoder" que esperamos puedas desarrollar durante el bootcamp es el de definir "mini-proyectos" que te acerquen paso a paso a la solución del "gran proyecto". Es el equvalente a comenzar armando esquinas o bordes del rompecabezas/puzzle sin saber necesariamente cómo encajarán al final. Déjate llevar y explora. Estas son algunas sugerencias:

"Mover" un valor de una caja de texto a otra Crea una interfaz simple con 2 cajas de texto y un botón. Si escribo algo en la caja de texto 1 y le doy click al botón, quiero que lo que escribí se "mueva" desde la caja 1 hacia la caja 2.

Para lograr esto tendrás que aprender a: detectar un evento en el navegador (click), identificar un elemento de tu interfaz para obtener su contenido/valor (la caja de texto 1), "escribir" un valor en otro elemento de la interfaz (caja de texto 2).

"Convertir" una letra en su código ASCII Pensando en la misma interfaz anterior (2 cajas de texto y 1 botón). Quiero escribir A o B (una sola) en la caja de texto 1 y que cuando le dé click al botón, aparezca el código ASCII de la letra en la caja de texto 2.

Ahora no solamente estás "leyendo" y "escribiendo" valores en el navegador, también tendrás que "manipularlos" antes de "escribirlos".

"Cifrar" A o B con un desplazamiento (offset) de 3 Cuando escriba A o B en la caja de texto 1 y le dé click al botón, quiero que apaezca la letra cifrada en la caja de texto 2. Por ejemplo, si escribo B debe aparecer E.

"Cifrar" una letra con un desplazamiento de 30 caracteres En los casos anteriores probamos con letras y con un desplazamiento que no implicaban llegar "más allá" de final del alfabeto. Ahora prueba con un caso que sí lo requiera. Por ejmplo 30 caracteres de desplazamiento. Para esto te puede ayudar el video de la sección "Recursos y temas relacionados". La fórmula no es lo importante en este proyecto, lo importante es lo que haces con la fórmula.

"Cifrar" tres letras con un desplazamiento cuqlquiera Hasta ahora hemos explorado trabajar con una sola letra pero ¿cómo haríamos si son más? Para hacerlo tendrás que aprender cómo ir cifrando letra por letra y ya estás mucho más cerca de resolver el proyecto "grande"

Fíjate que la complejidad es creciente, la clave está en definir el primer paso lo más simple y pequeño que puedas. Luego tú misma puedes ir agregando complejidad a medida que avanzas.

Recursos y temas relacionados

A continuación un video de Michelle que te lleva a través de la fórmula matemática del Cifrado César y un par de cosas más que debes saber para resolver este proyecto. ¡Escúchala con detenimiento y sigue sus consejos! :)

Link

También una metodología para empezar a desarrollar tareas con JavaScript:

Link

Terminal y shell de UNIX:

Link

Control de versiones y trabajo colaborativo con Git y GitHub:

Link

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 charCodeAt()
Aprende más sobre String.fromCharCode()
Aprende más sobre ASCII
Documentación de NPM

Organización del Trabajo:

Metodologías Ágiles
Scrum en menos de 2 minutos
Scrum en Detalle. No esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a poco a lo largo del -bootcamp.
Guía para Cifrado César

9. Checklist

Esta sección está para ayudarte a llevar un control de lo que vas completando.

Parte Obligatoria

Parte Opcional: "Hacker edition"

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

Proyecto Cifrado César

1. Diseño de experiencia de usuario

Descripción del producto
- Herramienta de mensajería secreta para amigos y parejas, brinda la solución de cifrar y descifrar mensajes de manera interactiva e intuitiva.
Principales usuarios del producto.
- Amigos
- Parejas
Objetivos de estos usuarios en relación con el producto.
- El usuario emisor del mensaje:
  - Escribir su mensaje secreto y colocar el número de seguridad(offset) con el que se va a cifrar el mensaje.
  - Obtener su mensaje secreto cifrado.
  - Copiar el mensaje para enviarlo a sus amigos o parejas, así como enviar el número para descifrar el mensaje.
- El usuario receptor del mensaje:
  - Colocar el mensaje secreto cifrado y el número de seguridad(offset) con el que se va a descifrar el mensaje.
  - Obtener su mensaje secreto descifrado.
Resolución de problemas con el producto.
- El producto brinda la facilidad de cifrar y descifrar los mensajes secretos que deseen compartir entre amigos o parejas.
Proceso para definir el producto final a nivel de experiencia y de interfaz.
- Experiencia:
  - Deseaba algo que además de funcional se sienta que es un producto intuitivo, confiable e interactivo, algo a lo que la mayoría de personas que utilizan internet estan acostumbrados cuando desean traducir algo. Para ello revise páginas como: Deepl, Reverso Traducción, Google traductor. Decidi escoger estas referencias porque comparé la encriptación con traducir palabras, y noté que al encriptar algo ya sea un mensaje, una palabra o contraseña, es como si estuvieras creando un nuevo idioma.
  - El nombre del producto: Hice una lista de posibles nombres del cual elegí "Código Enigma", porque seguía la temática que deseaba transmitir a tráves del producto. Además, que hace referencia a la película del mismo nombre, en donde Alan Turing junto a otros matemáticos intentan descifrar el código enigmo alemán durante la Segunda Guerra Mundial.
  - Colores: Como el color principal elegí el morado porque transmite esa sensación de misterio, magia y creatividad. Como color secundario elegí uno verde-azulado para transmitir seguridad y a la vez armonizar con el color principal. Para las letras elegí el color blanco para contrastar con los otros colores.
  - Tipografía: Elegí la combinación entre 'Comfortaa' para el título, los labels, y botones; y 'Roboto' para las cajas de texto.
- Prototipado: Realice dos prototipos uno a papel y otro en Figma.

2. Plan de acción

Se puede encontrar mi plan de acción en el siguiente enlace: https://trello.com/b/O4pOVCRh/laboratoria-chiper

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Cifrado César

Índice

1. Preámbulo

2. Resumen del proyecto