• Índice
• Preámbulo
• Objetivos de aprendizaje
• Consideraciones generales
• Requerimientos del proyecto
  • Planificación (Agile-Scrum)
  • UX (Diseño de experiencia de usuario)
  • Front-end
• Entrega
• Parte opcional o "Hacker edition"
• Recursos y temas relacionados
• Detalles de aprendizaje

Cifrar significa codificar. El cifrado César es un tipo de cifrado por sustitución, es decir que una letra en el texto original es reemplazada por otra letra que se encuentra un número de posiciones más adelante en el alfabeto.

Veamos los siguientes ejemplos:

• Si ciframos la letra A usando un desplazamiento (offset) de 3 posiciones, entonces la A se convierte en D.

• Ahora, si ciframos la palabra CASA con el mismo desplazamiento de 3, ésta se convierte en FDVD.

• Y para el alfabeto completo, con el mismo desplazamiento de 3 posiciones, sería:

  • Sin cifrado: 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
  • Ya 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.

El objetivo principal de aprendizaje es adquirir experiencia desarrollando aplicaciones web (WebApp) que interactúen con el usuario a través del navegador y la lógica, utilizando HTML5, CCS3 y JavaScript (ES6) como herramientas.

En este proyecto tendrás que construir una aplicación web que le permita a un usuario cifrar y descifrar un mensaje.

Para completar el proyecto tendrás que familiarizarte con conceptos como las necesidades del usuario y propuesta de una solución; etiquetas semánticas y formularios en HTML5; modelo de cajas y selectores en CSS3; métodos de selección y eventos del DOM; manipulación de strings, control de flujo y funciones en JS; así como pruebas unitarias en Mocha. Recuerda que parte fundamental es organizar tu tiempo y priorizar tus tareas.

• Este proyecto se debe resolver de manera individual.

• Primero se deberá forkear y clonar este repositorio.

• El tiempo sugerido para presentar este proyecto es de aproximadamente 2 semanas (2 sprints):

  Tiempos	Fechas	Detalles
  1er Sprint	30/05 al 07/06	Planificación del sprint 1, prototipado de baja fidelidad (papel y lapiz) + iteración (herramienta balsamiq), code review (revisión de código), peer feedback (retroalimentación por parejas) retrospectiva (identificar, documentar e internalizar las lecciones aprendidas en la 1ra semana), planificación del sprint 2
  2do Sprint	07/06 al 14/06	Code review (revisión de código), peer feedback (retroalimentación por parejas), retrospectiva (identificar, documentar e internalizar las lecciones aprendidas en la 2da semana), demo (presentación) y feedback final del proyecto

La temática es libre pero la interfaz debe permitir al usuario:

• Mostrar una vista de ingreso que tenga como contraseña LABORATORIA. En caso de colocar una clave incorrecta, se mostrará un mensaje de error; sin embargo al tercer intento debería mostrar el mensaje "Ya utilizaste todos tus intentos, en este momento no podrás ingresar".
• Escribir un mensaje (texto) para ser cifrado.
• Elegir un desplazamiento (offset) a usar en el cifrado y/o descifrado.
• Ver el resultado del mensaje cifrado correctamente.
• Escribir un mensaje (texto) para ser descifrado.
• Ver el resultado del mensaje descifrado correctamente.

En este proyecto, tu producto debe utilizar 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

Identifica y prioriza las tareas de tu proyecto; deberás escribirlas y mantenerlas actualizadas en un archivo de Google Docs mediante esta plantilla. No dudes en solicitar ayuda a tus coaches.

Antes de iniciar a codear, debes entender el problema que quieres solucionar y cómo tu aplicación lo soluciona.

• Trabaja tu primer prototipo con papel y lápiz (blanco y negro).
• Luego valida esta solución con una compañera (pedir feedback).
• Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un nuevo prototipo usando Balsamiq). Estos puntos los presentarás en el README.md.

README.md:

Debe contener lo siguiente:

• Un título con el nombre de tu proyecto.
• Un resumen de 1 o 2 líneas de qué se trata tu proyecto.
• La imagen final de tu proyecto.
• Investigación UX:
  • Explicar quiénes son los usuarios y los objetivos en relación con el producto.
  • Explicar cómo el producto soluciona los problemas/necesidades de dichos usuarios.
  • Luego colocarás la foto de tu primer prototipo en papel.
  • Agregar un resumen del feedback recibido indicando las mejoras a realizar.
  • Imagen del prototipo final en Balsamiq.

Deberás maquetar de forma exacta el prototipo final que hiciste en balsamiq utilizando HTML5 y CSS3. En este momento elegirás los colores, tipo de fuente, etc a usar.

A continuación describimos los archivos que utilizarás:

src/index.html:

En este archivo va el contenido que se mostrará al usuario (esqueleto HTML). Encontrarás 3 etiquetas iniciales:

• <header>: encabezado de tu proyecto.
• <main>: contenido principal de tu proyecto.
• <footer>: pie de página de tu proyecto.

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 CSS3 (Bootstrap, materialize, etc).

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

Vamos a tener 2 archivos JavaScript separando responsabilidades, a continuación indicamos qué harás en cada archivo:

src/cipher.js:

Acá escribirás las 2 funciones necesarias para el usuario pueda cifrar o descifrar. Para esto debes implementar el objeto cipher, el cual ya se encuentra exportado en el objeto global (window). Este objeto (cipher) contiene 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á escribirás todo el código que tenga que ver con la interacción del DOM (seleccionar, actualizar y manipular elementos del DOM y eventos). Es decir, en este archivo deberás invocar a cipher.encode(offset, string) y cipher.decode(offset, string) según sea necesario para actualizar el resultado en la pantalla(UI).

test/cipher.spec.js:

En este archivo tendrás que completar las pruebas unitarias de las funciones cipher.encode(offset, string) y cipher.decode(offset, string) implementadas en cipher.js utilizando Mocha. Tus pruebas unitarias deben dar un 70% en coverage (cobertura), statements (sentencias), functions (funciones) y lines (líneas); y un mínimo del 50% de branches (ramas).

El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages. Recuerda también completar el archivo README.md con la información solicitada.

Esta sección es opcional y solo debería realizarse una vez terminado todo lo anterior. Acá podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. Si te queda tiempo, puedes explorar algunos de estos ejemplos:

• Cifra/descifra minúsculas.
• Cifra/descifra otros caracteres (espacios, puntuación, ñ, á, ...).
• Permite usar un offset negativo.

• Guía de Scrum: solamente para comenzar a entender cómo organizar tu trabajo.

• El proceso de diseño
• Balsamiq

• HTML, semántica y formularios
• Validador de html

• Modelo de cajas
• Selectores CSS

• Video de Michelle, acá encontrarás 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! :)
• Aprende más sobre ASCII
• Aprende más sobre charCodeAt()
• Aprende más sobre String.fromCharCode()
• Valores y tipos de datos
• Variables
• Control de flujo
• Tests unitarios
• GitHub y GitHub Pages
• Documentación de NPM

• Aprender que antes de empezar a desarrollar un producto lo primero que se debe hacer es pensar en cómo solucionar un problema identificando tareas específicas (diagrama de flujo, pseudocódigo y tablero de planificación).
• Planificar y realizar las tareas específicas y presentar el proyecto dentro del tiempo indicado (sprint).
• Organizar el tiempo y priorizar tareas en un entorno de alta incertidumbre.

• Entender las necesidades del usuario y cómo proponer una solución para él.
• Entender la importancia del proceso de prototipado durante la creación de un proyecto digital.
• Conocer los principios básicos del diseño visual.

• Utilizar etiquetas semánticas de HTML5 y elementos de formulario.
• Validar que tu marcado HTML5 esté correctamente implementado a través del validador de html.

• Utilizar diversos tipos de selectores en CSS: de elemento, de clase, de id, etc.
• Comprender el modelo de cajas (border, margin, padding)
• Definir reglas de estilos

• Utilizar eventos del DOM que le permitan al usuario interactuar con la aplicación.
• Utilizar los métodos de selección del DOM.
• Actualizar de manera dinámica el contenido de la aplicación a través de innerHTML o textContent

• Manipular strings (cadenas de texto).
• Usar control de flujo if-else, do-while (bucles y condicionales).
• Implementar funciones dada una descripción de su comportamiento.
• Verifica que tus funciones hagan las cosas para las que fueron creadas (pruebas unitarias (test) con Mocha)

• Configurar tu cuenta de git
• Forkear y clonar el repositorio del proyecto.
• Mantener actualizado los cambios (commit, pull, push)
• Desplegar tu proyecto en gh-pages