Skip to content

Vivipe28/BOG004-cipher

BranchesTags
 
 

Repository files navigation

Cifrado César

Índice

1. Definición del producto

La aplicación web tiene por objetivo brindar un espacio seguro de codificación y decodificación de textos mediante el uso de la metodología de cifrado César. El cifrado César es una de las técnicas más simples para cifrar un mensaje. Es un tipo de codificación 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:

• La letra A se cifraría como la C si usamos un desplazamiento de dos posiciones. Viviana.

• La palabra HOLA se cifraría como JQNC si nos desplazamos dos puestos.

USUARIOS

Mi proyecto se orienta principalmente a satisfacer la necesidad de seguridad y confidencialidad de los periodistas en situaciones de riesgo. La labor periodística requiere de la implementación de diferentes técnicas que les permita a los comunicadores compartir información entre ellos sin que esta logre filtrarse antes de que decidan publicarla. La plataforma que he diseñado responde a este imperativo propio de su profesión.

OBJETIVO DE LOS USUARIOS

Los periodistas que decidan hacer uso de mi plataforma podrán cifrar los textos que deseen y podrán definir a su discreción el offset (desplazamiento) de cifrado. De igual manera tienen a su disposición la posibilidad de descifrar los textos que les sean enviados. Para dicho propósito la sección de decodificación funciona de la misma manera que la de codificación.

VENTAJAS DE LA APLICACIÓN

Compartir información entre ellos se podrá realizar de una manera un poco más segura ya que el texto interceptado se encontrará cifrado y quien lo intercepte tendrá que conocer no sólo la técnica de cifrado sino el desplazamiento fijado por el autor. Información que sólo las partes interesadas tendrán en su poder.

2. Instrucciones de uso

Para poder hacer uso de la plataforma se deben seguir los siguientes pasos:

  1. Dirígete a [PORTADA] (https://vivipe28.github.io/BOG004-cipher/src/index.html)
  2. Digita el nombre y la contraseña correspondiente y haz click en el botón "INGRESAR".
  3. Ingresa el offset deseado ya sea para cifrar o descifrar.
  4. En el cuadro de texto que está debajo del input del offset introduce el texto a cifrar.
  5. Da click al botón “CIFRAR” para ejecutar el proceso de cifrado
  6. Listo! En el cuadro de texto inferior obtienes el texto cifrado
  7. El procedimiento es el mismo para el proceso de decodificación.

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

CSS

Web APIs

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

  • Git: Instalación y configuración

  • Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

  • GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • GitHub: Despliegue con GitHub Pages

    Links

UX (User eXperience)

  • Diseñar la aplicación pensando en y entendiendo al usuario

  • Crear prototipos para obtener feedback e iterar

  • Aplicar los principios de diseño visual

4. Consideraciones generales

  • El equipo de coaches te dará un tiempo sugerido e indicaciones sobre si trabajar sola o en equipo. 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.
  • 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.

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

  1. Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
  2. 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.
  3. Una de las integrantes del equipo debe 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. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
  4. ⬇️ 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 🚥 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! 🚀

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

tips caesar cipher

Link

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

Resolución de problemas con JavaScript

Link

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

Diseño de experiencia de usuario (User Experience Design):

  • Ideación
  • Prototipado (sketching)
  • Testeo e Iteración

Desarrollo Front-end:

Organización del Trabajo:

9. Checklist

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

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

About

vivipe28.github.io/BOG004-cipher/src/index.html

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 47.5%
  • CSS 35.6%
  • HTML 16.9%