- Índice
- Introducción " CIFRADO CESAR "
- Descripción del Proyecto
- Objetivos de Aprendizaje
- Definición del Producto *Primer Prototipo *Prototipo Final
- Consideraciones Tecnicas
- Contenido de Referencia
- Herramientas
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:
- 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.
En este proyecto los usuarios podran escribir cualquier tipo de mensaje y hacerlo secreto a travez del cifrado cesar. Los usuarios van a poder seleccionar un numero de desplazamiento maximo hasta 33, escribir un mensaje utilizando letra mayusculas, minusculas,espacios y numeros.Los usuarios podran cifrar, descifrar o borrar sus mensajes.
En este proyecto aprenderás a construir una aplicación web que interactúe con el usuario a través del navegador y la lógica basada en esa interacción. Dicho en palabras sencillas, aprenderás a:
- Pintar elementos de formulario en la pantalla usando HTML y CSS.
- Permitir al usuario interactuar (eventos del DOM) y hacer algo cuando ocurran dichos eventos (cifrar/descifrar).
- Manipular strings (cadenas de texto).
- Usar control de flujo (bucles, condicionales, ...).
- Actualizar la pantalla con los resultados (manipular el DOM).
- Implementar funciones dada una descripción de su comportamiento.
- Verificar tu implementación con pruebas unitarias.
- Entender las necesidades del usuario y cómo proponer una solución.
- Organizar tu tiempo y priorizar tareas en un entorno de alta incertidumbre.
Los principales usuarios de aplicacion son personas entre los 13 y 30 años. Los objetivos de los usuarios a los cuales se testeo el producto,era para enviar mensajes entre los amigos de sus salidas e informacion personal.Otro grupo de usuarios la utilizo para enviar mensajes de saludos . Creo que es una aplicacion muy util, porque resuelve los problemas de usauarios que desean que solo una o algunas personas conozcan la informacion.
El primer prototipo ,solo se bajo en en informacion general de loque e debia realizar en el proyecto.
El prototipo final, se baso en informacion recibida por los usuarios que utilizarian la pagina, entonces se realizaron varias modificaciones, permitendo tener una pagina mucho mas amigable con el usuario.
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.
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! :)
Diseño de experiencia de usuario (User Experience Design):
- Ideación
- Prototipado (sketching)
- Testeo e Iteración
Desarrollo Front-end:
- 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
- GitHub y GitHub Pages
- Guía de Scrum: solamente para comenzar a entender cómo organizar tu trabajo.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent