Peligro en Hogwarts

Índice

• 1. Uso de la aplicación
• 2. Potenciales usuarios
• 3. Objetivo de la aplicación
• 4. Problemas que resuelve la aplicación
• 5. Diseño
• 6. Hito: Criterios de aceptación mínimos del proyecto
• 7. Consideraciones técnicas
• 8. Objetivos de aprendizaje
• 9. Para considerar Project Feedback

---

1. Uso de la aplicación

La aplicación consta de un panel que le permite ingresar al usuario el mensaje que quiere cifrar o descifrar y un par de botones para dichas funciones. Un segundo panel le muestra el contenido del cifrado/descifrado en el cual no puede ingresar datos gracias al readonly. Considerando que la app no tiene soporte para minúsculas, con toUpperCase se realiza conversión automática de minúsculas a mayúsculas.

2. Potenciales usuarios

La aplicación está enfocada al entretenimiento y se considera que podría ser incluida en alguno de los acertijos propios de los juegos de scape room para fanáticos de la saga de Harry Potter.

3. Objetivo de la aplicación

La aplicación permite cifrar y descifrar mensajes que los muggles quieran utilizar para salir del cuarto. Este mensaje podría introducirse en algún candado que abra una puerta, como es propio de los scape room.

4. Problemas que resuelve la aplicación

Los scape rooms se caracterizan por presentar desafíos a los participantes para abrir candados y finalmente, poder salir de un cuarto donde se encuentran atrapados. La aplicación para codificar o decodificar un mensaje puede ser una alternativa para interactuar en alguno de los retos haciendo parte de una acción más compleja. Es decir, el usuario podría identificar en una interfaz los caracteres que formen parte del mensaje a decodificar y al introducirlos a la aplicación, encontraría un mensaje que le permita abrir un candado y continuar con el reto de escapar.

5. Diseño

En un principio se pensó en que dentro de la interfaz se encontraran pistas para introducir el mensaje a descifrar; sin embargo, con el fin de implementar ambas funciones, se simplificó el diseño y a partir de una instrucción simple, se pretende que la usuaria codifique y decodifique mensajes a libre elección.

6. Hito: Criterios de aceptación mínimos del proyecto

• Se encuentra una interfaz que le permite a la usuaria insertar el mensaje de texto que quiere cifrar. Para ello se hace uso de las mayúsculas y no se incluye la ñ. De igual manera, se le permite elegir un número de desplazamiento que es entero y positivo. Finalmente en la interfaz se puede ver el resultado del mensaje cifrado.

• De la misma manera se puede descifrar el mensaje introducido por la usuaria, en las mismas condiciones que el cifrado. En la interfaz se puede ver el resultado del mensaje que se ha descifrado.

• A los metódos de cipher (encode y decode) se les han realizado pruebas unitarias.

• El código final se encuentra subido en un repositorio en GitHub y la interfaz o página web está "desplegada" usando GitHub Pages.

• Como hito opcional se considera el soporte para otros caracteres, específicamente el espacio. Para ello, se habilitan las líneas de código correspondientes en el cipher.spec.js.

7. Consideraciones técnicas

• README.md: debe explicar la información necesaria para el uso de tu aplicación web, 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/style.css: este archivo debe contener las reglas de estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc).
• 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().

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

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de datos primitivos

  Links

  • Valores primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String — Cadena de caracteres - MDN

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• 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

  • Sitio oficial de GitHub Pages

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

9. Para considerar Project Feedback

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

• Tiene una interfaz que permite a la usuaria cifrar y descifrar.
• El proyecto será entregado incluyendo pruebas unitarios de los métodos de cipher (encode y decode).
• El proyecto será entregado libre de errores de eslint (warnings son ok).
• El proyecto será entregado subiendo tu código a GitHub.
• La interfaz será "desplegada" usando GitHub Pages.
• El README contiene una definición del producto.