Skip to content

Latest commit

 

History

History
152 lines (103 loc) · 4.79 KB

README.md

File metadata and controls

152 lines (103 loc) · 4.79 KB

Cifrado César / CODIGO SECRETO

1. Descripción

Por medio del uso de HTM, CSS y JS se creo una pagina web en la que usamos como base el principio del cifrado César el cual 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.

En este proyecto se crea una aplicación web que servirá para que el usuario pueda cifrar y descifrar una palabra o texto indicando un desplazamiento específico. De esta manera se podra usar esta aplicación para multiples fines como:

  • Crear claves seguras para el email.
  • Y encriptar mensajes que quiera enviar en un chat en el cual no quiere que se evidencie lo que escribe.

De esta manera podemos responder a las siguientes preguntas:

  • Quiénes son los principales usuarios de producto: Cualquier persona que desee realizar alguna de las funcionalidades anteriormente descritas.
  • Cuáles son los objetivos de estos usuarios en relación con tu producto: Los usuarios podran interactuar con una pagina comoda e intuitiva que les ayudara a obtener mas facilmente contraseñas y/o enviar mensajes secretos.
  • Cómo crees que el producto que estás creando está resolviendo sus problemas: dandoles acceso de una manera facil a una aplicación que les ayudara a cifrar sus claves o mensajes.

2. Que puedes ver en este proyecto

  • README.md incluye info sobre proceso y decisiones de diseño.
  • README.md explica claramente quiénes son los usuarios y su relación con el producto.
  • README.md explica claramente cómo el producto soluciona los problemas/necesidades de los usuarios.
  • Usa VanillaJS.
  • 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 offset o 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.

3. Que se implemento/aprendio en el desarrollo del proyecto

Los objetivos de aprendizaje alcanzados en este proyecto son:

HTML

  • Uso de HTML semántico

CSS

  • Uso de selectores de CSS

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

Web APIs

  • Uso de selectores del DOM

    • [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)

    • [Introducción a eventos - MDN]
    • [EventTarget.addEventListener() - MDN]
    • [EventTarget.removeEventListener() - MDN]
    • [El objeto Event]
  • Manipulación dinámica del DOM

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

JavaScript

  • Tipos de datos primitivos

    • [Valores primitivos - MDN]
  • Strings (cadenas de caracteres)

    • [Strings]
    • [String — Cadena de caracteres - MDN]

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

    • [Valores, tipos de datos y operadores]
    • [Variables]

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

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

  • Uso de bucles/ciclos (while, for, for..of)
    • [Bucles (Loops)]
    • [Bucles e iteración - MDN]

  • Funciones (params, args, return)
    • [Funciones (control de flujo)]
    • [Funciones clásicas]
    • [Arrow Functions]
    • [Funciones — bloques de código reutilizables - MDN]

  • Pruebas unitarias (unit tests)
    • [Empezando con Jest - Documentación oficial]

  • Módulos de ECMAScript (ES Modules)

  • 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

UX (User eXperience)

  • Diseñar la aplicación pensando en y entendiendo al usuario

  • Crear prototipos para obtener feedback e iterar

  • Aplicar los principios de diseño visual