DEV006-cipher

Cifrado César

Índice

1. Preámbulo

Cifrar significa ocultar el contenido de un mensaje a simple vista, de manera que sólo las partes autorizadas pueden descifrar un texto cifrado. 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.

caeser-cipher

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

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

En este proyecto crearás una aplicación web que servirá para que tu usuaria pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento específico de caracteres (offset). Lo harás utilizando HTML, CSS y JavaScript.

La temática es libre. Piensa en qué situaciones se necesitaría cifrar un mensaje. Decide cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, etc.) Algunas ideas de ejemplo:

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

3. Consideraciones generales

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:

2. Pruebas unitarios de los métodos.
Los metódos de cipher (encode y decode) deben tener cobertura con pruebas unitarias.

3. Código de tu proyecto subido a tu repo y interfaz “desplegada”.
El código final debe estar subido en un repositorio en GitHub.
La interfaz o pagina web, debe ser “desplegada” 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 guia:

Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach.

5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres

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.

El hito de los críterios mínimos 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 adicionales.

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:

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

Descripción de scripts / archivos

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.

Deploy

Hacer que los sitios estén publicados (o desplegados) para que usuarias de la web puedan acceder a él es algo común en proyectos de desarrollo de software.

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.

7. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

</p></details>

CSS

</p></details>

</p></details>

Web APIs

</p></details>

</p></details>

</p></details>

JavaScript

</p></details>

</p></details>

</p></details>

</p></details>

</p></details>

</p></details>

</p></details>

</p></details>

Control de Versiones (Git y GitHub)

</p></details>

Centrado en el usuario

Diseño de producto

8. Pistas, tips y lecturas complementarias

Prepara tu PC para trabajar

  1. Asegúrate de tener un :pencil: editor de texto en condiciones, algo como VS Code.
  2. Para ejecutar los comandos a continuación necesitarás una :shell: UNIX Shell, que es un programa 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.
  3. Tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. Debes realizar un :fork_and_knife: fork del repo.
  4. :arrow_down: Clona tu fork a tu computadora (copia local).
  5. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
  6. Si todo ha ido bien, deberías poder ejecutar las :traffic_light: pruebas unitarias (unit tests) con el comando npm test.
  7. 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.
  8. A codear se ha dicho! :rocket:

Recursos y temas relacionados

Súmate al canal de Slack #project-cipher para conversar y pedir ayuda del proyecto.

A continuación un video que te lleva a través de la fórmula matemática del Cifrado Césary un par de cosas más que debes saber para resolver este proyecto. La fórmula no es lo importante del proyecto, no te confundas.

Getting started cipher

Terminal y shell de UNIX:

Playlist de Terminal y shell de UNIX

Link

Control de versiones y trabajo colaborativo con Git y GitHub:

Playlist de control de versiones y trabajo colaborativo

Link

Desarrollo Front-end:

Organización del Trabajo:

9. Para considerar Project Feedback

En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback: