- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Criterios de aceptación mínimos del proyecto
- 4. Criterios de aceptación adicionales
- 5. Objetivos de aprendizaje
- 6. Recomendaciones generales
- 7. Recursos y temas relacionados
- 8. Checklist
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 en el alfabeto:
- 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.
¿Qué tengo que hacer exactamente? En este proyecto crearás una aplicación web que servirá para que tus usuarias puedan cifrar y descifrar un texto indicando un desplazamiento específico de caracteres (offset). Por ejemplo, cifrar MICASA con un desplazamiento de 3 caracteres de manera que el mensaje cifrado sería PLFDVD
La temática es libre. Piensa en qué situaciones de la vida real se necesitaría cifrar un mensaje y piensa en cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) etc. Algunas ideas de ejemplo:
- Crear claves seguras.
- Herramienta de mensajería interna de una organización de derechos humanos en una zona de conflicto.
- Mensajería secreta para parejas.
El equipo de coaches te dará un tiempo referencial para trabajar en este proyecto. También indicaciones sobre si trabajar individualmente o en dupla. Recuerda que cada quien aprende a un tirmo diferente, tiene más o menos tiempo adicional al bootcamp disponible, experiencia previa distina, etc.
Cuando hablemos de "criterios de aceptación", nos referimos a todo aquello que debe suceder con tu proyecto para que consideremos (tú y nosotras) que lo has "hecho" y que lo podemos "aceptar" como "mínimamente terminado".
Considera solamente letras mayúsculas, sin ñ ni números u otros caracteres:
- 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
Para cifrar debe permitir a tu usuaria:
- Escribir el mensaje (texto) que quiere cifrar.
- Elegir un desplazamiento (offset) indicando cuántas posiciones quiere que el cifrado desplace cada letra del mensaje.
- Ver el resultado del mensaje cifrado.
Para descifrar debe permitir a tu usuaria:
- Escribir el mensaje (texto) que quiere descifrar.
- Indicar el desplazamiento (offset) que se utilizó para cifrar el mensaje.
- Ver el resultado del mensaje descifrado.
Cuando termines, y antes de ir a la sesión de Project Feedback, tu código deberá estar subido a GitHub (commit/push) y la interfaz será desplegada (publicada) usando GitHub pages. Si no sabes lo que es GitHub, no te preocupes, lo aprenderás durante este proyecto.
En tu README.md, cuéntanos cómo pensaste en las usuarias y cuál fue tu proceso para definir el producto final.
- Quiénes son las principales usuarias del producto.
- Cuáles son los objetivos que estas usuarias pueden conseguir al usar tu producto.
- Cómo crees que el producto que estás creando está resolviendo sus necesidades.
Toda esta sección puede resultarte muy abrumadora. Tómalo con calma, no es necesario que lo comprendas todo antes de comenzar, irá teniendo sentido conforme vas avanzando. Recuerda que el aprendizaje no es un proceso lineal.
La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, sólo JavaScript puro también conocido como Vanilla JavaScript.
No debes utilizar la pseudo-variable this.
Llamamos boilerplate a la estructura de archivos y a toda la configuración de dependencias y tests de ejemplo que ya existen en este repositorio y que te servirán como una "plantilla", como un punto de partida para trabajar.
./
├── .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ía 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.
El boilerplate incluye tests (pruebas) de ejemplo como punto de partida.
Los tests unitarios (pruebas) 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.
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 objetocipher, el cual ya está exportado en el boilerplate. Este objeto (cipher) debe contener dos métodos:cipher.encode(offset, string):offsetes el número de posiciones que queremos mover a la derecha en el alfabeto ystringel mensaje (texto) que queremos cifrar.cipher.decode(offset, string):offsetes el número de posiciones que queremos mover a la izquierda en el alfabeto ystringel mensaje (texto) que queremos descifrar.
src/index.js: acá debes escuchar eventos del DOM, invocarcipher.encode()ocipher.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 paracipher.encode()ycipher.decode().
Si te alcanza el tiempo y las ganas para explorar un poco más, intenta:
-
Cifrar minúsculas, ñ, números, etc. El boilerplate incluye algunos tests (comentados en principio) que puedes usar como punto de partida para implementar el soporte para estos casos.
-
Permitir un offset negativo.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- 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)
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- 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)
Pierde el miedo a preguntar a tus coaches y a tus compañeras. Estás aquí porque quieres aprender. Si ya supieras, estarías trabajando como developer y no el bootcamp de Laboratoria.
Hazte amiga de Trello. No solamente te ayudará a organizar tu trabajo, es también una excelente manera de ir razonando sobre los pasos que seguirás, en qué orden hacerlos, identificar qué necesitas aprender, etc.
Al prinncipio, Git y GitHub te resultarán misteriosos, no les temas y úsalos a tu favor. Procura hacer commits con frecuencia, eso te ayudará a tener un respaldo en todo momento y podrás acceder a él siempre que lo necesites. ¡No lo dejes al final!
Anímate a correr los tests cuanto antes para que te ayude a la construcción de tus funciones.
Comienza por la ideación y el prototipado de tu proyecto. Dibuja en papel y lápiz exactamente cada elemento que tendrá tu interfaz y prueba con algunas personas para ver si se comprende, si es suficientemente intuitivo, etc.
Este paso es fundamental para que tú misma comprendas si tus ideas "funcionan" fuera de tu cabeza. Te ayudará a entender mejor todo lo que tienes que hacer. No inviertas demasiado tiempo en esto. Con uns pocas horas debería ser más que suficiente.
A partir de acá puedes seguir por diferntes caminos. Es como armar un rompecabezas o puzzle, puedes comenzar por una esquina, luego otra, un pedazo de un borde, de otro, etc. Poco a poco te será más fácil ver "el todo" y entender cómo encajan todas las partes.
Te sugerimos seguir por lo que menos sabes. Evita caer en el juego de "la ilusión del avance". Quizás te sienteas "cómoda" trabajando en HTML y CSS porque lo que haces se "ve" en el navegador y puede resultarte más fácil de comprender. Si te quedas trabajando en eso tendrás la sensación de estar "avanzando", pregúntante si estás "aprendiendo". No estás acá para "entregar proyectos", estás para aprender lo que no sabes.
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:
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).
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".
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.
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.
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.
Así como existen las cajas de arena para que las niñas jueguen en un espacio seguro y controlado", tú también puedes procurarte condiciones "controladas" en las que puedas identificar lo que te falla. Si comienzas explorando y probando en archivos con muchas líenas de código y muchas cosas sucediento al mismo tiempo, será difícil que sepas qué falla y/o por qué no te funciona algo que acabas de leer y estás segura en entender. Esto puede ser muy frustrante y hacerte perder mucho tiempo.
Para probar los mini-proyectos que te proponnemos, puedes hacerlo en un proyecto/archivos en blanco en los que tú tienes el control y sabes exactamente qué es y qué hace cada cosa. También puedes utilizar CodePen o Replit (por ejemplo).
- 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
gittambié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. - Tú o una de las integrantes del equipo debe realizar un 🍴
fork del repositorio 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
remotehacia el mismo. - ⬇️ 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 startpara arrancar el servidor web y dirígete ahttp://localhost:5000en tu navegador.
A continuación un video de Michelle ¡Escúchala con detenimiento y sigue sus consejos! :)
- Ideación
- Prototipado (sketching)
- Testeo e Iteración
- 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
- 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.
!Click para expandir¡
Esta sección está para ayudarte a llevar un control de lo que vas completando.
-
README.mdincluye info sobre proceso y decisiones de diseño. -
README.mdexplica quiénes son las usuarias y su relación con el producto. -
README.mdexplica cómo el producto soluciona los problemas/necesidades de las usuarias. - 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
offseto 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.
- Cifra/descifra minúsculas
- Cifra/descifra otros caracteres (espacios, puntuación,
ñ,á, ...) - Permite usar un
offsetnegativo.