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 ㊙️🙅
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.
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.
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.
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.
El diseño del Wireframe se llevó a cabo con Figma
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:
- Entender uso de HTML semántico
- Entender los tipos de selectores de CSS
- Identificar y entender modelo de caja
- Uso de selectores del DOM
- Manejo de eventos del DOM
- Manipulación dinámica del DOM
- 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)
- 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
- 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)
Puedes hacer en este link 🌟 para visualizar el sitio web.