marelywoody / cesarCifrado

El cifrado cesar cifra y descifra la palabra que se introduzca
https://marelywoody.github.io/cesarCifrado/src/
0 stars 0 forks source link
bootstrap css3 html5 javascript kanban

Cifrado César

Preámbulo

Está próxima la fecha del cumpleaños de tu flacx (novix) y estás organizando una fiesta sorpresa. Para organizar la fiesta has creado un grupo de Whatsapp junto con amigos y familiares.

Un gran problema es que pones tu alarma para levantarte temprano, sin embargo (como supondrás) eso nunca sucede y tu flacx es quien termina apagando la alarma y "de casualidad" revisando tus mensajes. Debido a que es algo sorpresa, decides crear una aplicación que te permita enviar mensajes cifrados y que las demás personas (partícipes de la fiesta) puedan tener una interfaz para descifrarlo. Así que ahora te toca aplicar tus superpoderes 😎

Introducción

El cifrado César es uno de los primeros métodos de cifrado conocidos históricamente. Es un tipo de cifrado por sustitución en el que una letra en el texto original es reemplazada por otra letra que se encuentra un número fijo de posiciones más adelante en el alfabeto.

caeser-cipher

El emperador Julio César lo usaba para enviar órdenes a sus generales en los campos de batalla, es una de las técnicas más simples y más usadas para cifrar un mensaje.

Por ejemplo si usáramos un desplazamiento de 3:

Actualmente todos los cifrados de sustitución alfabética simple, se descifran con facilidad y en la práctica no ofrece mucha seguridad en la comunicación, pero el cifrado César muchas veces 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.

Objetivos

El objetivo principal de aprendizaje de este proyecto es tener tu primera experiencia construyendo una aplicación web usando tus conocimientos de User Experience Designer y de JavaScript developer. Esto incluye diseñar un producto pensando en los usuarios, construir una interfaz, escuchar eventos básicos del DOM, escribir lógica para llevar a cabo el cifado/descifrado, tests unitarios básicos para comprobar (y documentar) dicha lógica, y finalmente manipulación del DOM para mostrar (escribir) los resultados.

Para completar el proyecto tendrás que familiarizarte con conceptos como valores, tipos, variables, control de flujo y tests unitarios.

Esperamos que en este proyecto puedas pensar en el usuario, entendiendo quién y cuál(es) es su nececidad. La creación de este producto va a resolver esa(s) necesidad(es) y qué mejor que hacerlo de la mejor forma. Que sea totalmente lo que nuestro usuario necesita.

También es importante que puedas organizarte teniendo en cuenta el tiempo y los recursos disponibles. Es la primera vez que evaluaremos tus habilidades blandas, pero debes considerar que son habilidades que probablemente ya has utilizado en distintas experiencias de tu vida. Lo importante es que realices el proyecto de manera integral.

Consideraciones generales

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6). En este proyecto NO está permitido usar librerías o frameworks, sólo 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:

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

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.

Parte obligatoria

Definición del producto

En el README.md cuéntanos cómo pensaste en los usuarios al desarrollar tu producto y cuál fue tu proceso para definir el producto final a nivel de experiencia y de interfaz.

Para llevar tus conocimientos a otro nivel en UX:

UI

La interfaz debe permitir al usuario:

Estos puntos lejos de ser funcionalidades, en términos de UI debes pensarlos como elementos que estalecer la interacción con tu usuario.

Scripts / Archivos

Hacker edition

No estás limitada a implementar solo la parte obligatoria. Te sugerimos crear también una función cipher.createCipherWithOffset() que reciba un offset y devuelva un nuevo objeto con dos métodos (encode y decode) que solo reciban el string y usen el offset que se pasó a createCipherWithOffset a la hora de crear el objeto.

Lo anterior, nos ayuda a observar tu capacidad de autoaprendizaje, pudiendo agregar a tu trabajo un elemento que lo lleva al siguiente nivel.

Soft Skills

Puedes realizar una planificación experta teniendo en consideración la utilización de herramientas de planificación, como un calendario, trello, papelógrafo u otras, creando un plan paso a paso de cómo quiere abarcar el reto o problema. Realizando una estimación realista del tiempo.

Entrega

El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages.

Evaluación

Te aconsejamos revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel.

General

Característica/Habilidad Nivel esperado
Completitud 3
Investigación 3
Documentación 2

Tech

Habilidad Nivel esperado
JavaScript
Estilo 2
Nomenclatura/semántica 2
Funciones/modularidad 1
Estructuras de datos 0
Tests 2
HTML
Validación 2
Estilo 3
Semántica 2
SEO 0
CSS
DRY 2
Responsive 2
SCM
Git 1
GitHub 2
CS
Lógica 1
Arquitectura 1
Patrones/paradigmas 0

UX

Habilidad Nivel esperado
User Centricity 2

Habilidades Blandas

Para este reto queremos que intentes llegar al nivel 2 por lo menos en 5 de tus habilidades blandas y que tengas el nivel 1 en sólo 3 habilidades.

Habilidad Nivel esperado
Planificación y organización 2
Autoaprendizaje 2
Solución de problemas 2
Dar y recibir feedback 2
Adaptabilidad 2
Trabajo en equipo 1
Comunicación eficaz 1
Presentaciones 1

Primeros pasos

  1. Antes que nada, asegúrate de tener un :pencil: editor de texto en condiciones, algo como Atom o Code.
  2. Para ejecutar los comandos a continuación necesitarás una :shell: 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 Git bash, aunque recomendaría que consideres probar :penguin: GNU/Linux.
  3. Haz tu propio :fork_and_knife: fork del repo de tu cohort, tus coaches te compartirán un link a un repo privado y te darán acceso de lectura en ese 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. A codear se ha dicho! :rocket:

Tips / Pistas

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! :)

tips caesar cipher

También te compartimos más información de lo que Michelle te ha explicado en el video anterior:

Estos son algunos tips que te pueden ayudar en la organización y realización de tu proyecto, teniendo en cuenta el desarrollo de tus habilidades blandas: