LIM016-cipher

Trust Message 🤫

1. Resumen del proyecto

Trust Message es un sitio web que se encarga de encriptar y desencriptar textos y números mediante el método de cifrado César, con el propósito que se pueda garantizar una conversación más segura con otras personas ㊙️🙅

2. Definición del producto

Problemática / Necesidad

La privacidad podemos decir que es uno de los factores más importantes a la hora de navegar por Internet. Son muchos los ataques que podemos sufrir y que podrían quedar nuestros datos expuestos. Es por ello que resulta fundamental estar protegidos y no cometer errores. Vamos a hablar de por qué es más frecuente de lo que pensamos que nuestros datos se filtren en la red y podamos tener problemas.

¿A qué público va dirigido Trust Message?

Este sitio web se desarrolló con el principal propósito de que las chicas de entre 14 a 18 años puedan comunicarse entre ellas, donde el codificar sus mensajes permitan lograr una comunicación fiable.

3. Consideraciones generales

Características del proyecto

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.

Guía para usar Trust Message

La vista inicial proporcionará un traductor que permite al usuario:

• Insertar un mensaje (texto o número) que queremos cifrar.
• Elegir un desplazamiento indicando cuántas posiciones queremos que el cifrado desplace cada caracter.
• Ver el resultado del mensaje cifrado.
• Insertar un mensaje (texto o número) a descifrar.
• Ver el resultado del mensaje descifrado.

Prototipo

El diseño del Wireframe se llevó a cabo con Figma

Codificar el mensaje

Decodificar el mensaje

Modal con guía de uso

Resultado final - Vistas

Se tomó en cuenta al público dirigido para crear la pantalla basada en una paleta de rosados suaves y esquinas redondeadas para generar una sensación suave y agradable para el usuario.

Tendrá dos secciones que cambiarán de posición según lo que el usuario desee realizar (encriptar o desencriptar un mensaje) en la parte superior indicará con un icono en cómo se des/encriptará el mensaje, y en la parte inferior tendrá la opción de definir el offset (nivel de desplazamiento) y en caso que desee borrar algún mensaje muy largo, podrá acceder al botón de la escobilla para una limpieza más rápida.

Además se consideró hacer algunas modificaciones para generar una mejor experiencia como un botón para traducir, un botón de copiar el texto generado y modificar algunos iconos para que la interfaz sea más intuitiva.

Estas son las vistas:

Codificar el mensaje

Decodificar el mensaje

Modal para guía de uso

4. Objetivos de aprendizaje

HTML

• Entender uso de HTML semántico

CSS

• Entender los tipos de selectores de CSS
• Identificar y entender modelo de caja

Web APIs

• Uso de selectores del DOM
• Manejo de eventos del DOM
• Manipulación dinámica del DOM

JavaScript

• Manipulación de Strings
• Variables (declaración, asignación, ámbito)
• Uso de condicionales (if-else)
• Uso de bucles/ciclos (for)
• Funciones (params, args, return)
• Pruebas unitarias (unit tests)
• Módulos de ECMAScript (import & export)

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 (contraste, alineación, jerarquía)

9. Link de Despliegue

Puedes hacer en este link 🌟 para visualizar el sitio web.

10. Autor

Mirian Alejandra Arévalo 🙋.