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 😎
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.
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.
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.
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
.
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:
La interfaz debe permitir al usuario:
offset
indicando cuántas posiciones queremos que el cifrado
desplace cada caracterEstos puntos lejos de ser funcionalidades, en términos de UI debes pensarlos como elementos que estalecer la interacción con tu usuario.
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 to markup (HTML) e incluir el CSS y JavaScript necesario.src/cipher.js
: acá debes implementar el objeto cipher, el cual debe estar
exportado en el objeto global (window
). 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 decifrar.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()
.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.
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.
El proyecto será entregado subiendo tu código a GitHub (commit
/push
) y la
interfaz será desplegada usando GitHub pages.
Te aconsejamos revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel.
Característica/Habilidad | Nivel esperado |
---|---|
Completitud | 3 |
Investigación | 3 |
Documentación | 2 |
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 |
Habilidad | Nivel esperado |
---|---|
User Centricity | 2 |
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 |
git
también). Si usas Windows puedes usar Git bash,
aunque recomendaría que consideres probar :penguin: GNU/Linux.npm install
. Esto asume que has instalado Node.js (que
incluye npm).npm test
.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! :)
También te compartimos más información de lo que Michelle te ha explicado en el video anterior:
charCodeAt()
String.fromCharCode()
ASCII
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: