Smart Comm es una aplicación para codificar información sensible a hackeos antes de ser compartidas en servicio de mensajería mediante el Cifrado César.
Los usuarios son todas aquellas personas que antes de enviar sus contraseñas o números de tarjeta de crédito por servicios de mensajerías, prefieren encriptarlas para evitar hackeos.
Con Smart Comm se soluciona esa problemática, ya que el usuario puede enviar las contraseñas y o las tarjetas codificadas, con la llave secreta, para que la persona receptora pueda descodificarla de forma segura.
Es para todas las edades, pero en especial para la generación Millenial, que son los más propensos a sufrir ataques cibernéticos.
- Para definir el diseño, se dibujó primero a papel, con dos "textarea" para los inputs para que fuese más claro para el usuario, si tenía la intención de codificar y descodificar:
- Luego se utilizó Figma para hacer el Wireframe, se decidió incluir la explicación de la app en primer plano para que fuese claro para el usuario la funcionabilidad de la app y se decidió por el nombre "Smart Comm":
- Se encontró una paleta de colores que fuera con el tema, con ayuda de Coolors y con ayuda de la imagen encontrada en Flaticon:
-
Se hizo un diseño de logo en freelogodesign:
-
Por último se hizo el diseño final de en Photoshop:
- Con background de color #E8F1F2 para que la lectura fuera amigable.
- Fuente Verdana 18px, ya que es una fuente fácil de leer y segura para todos los navegadores, y color #505050, ya que el negro no es aconsejado por que el contraste hace más difícil de leer.
Luego de la prueba de UX, se observó que los usuarios no estaban muy seguros qué colocar en "Llave Secreta", así que se tomó como mejora colocar un Tooltip donde dejara claro que tipo de dato había que colacar de Llave Secreta.
También para facilitar el codificado y descodificado, se agregó íconos de Copiar para que fuera más amigable al usuario, ya que les costaba pasar el texto codificado al descoficicador.
Se encuentra toda la estructura del lenguaje de marcado de la aplicación y están enlazados el CSS y los dos Archivos JS.
Se encuentran los estilos de la página.
Aquí se encuentran descritas las funciones de codificar y descodificar del Cifrado César.
En este archivo se encuentra el JavaScript de los EventListener de los botones, que ejecutan las funciones de codificar y descodificar que se encuentran en cipher.js
- Coloque la llave secreta (un número positivo o negativo) en la casilla de "Llave Secreta" con el que quiera codificar o descodificar.
- Coloca tu mensaje en a codificar o descodificar en el campo correspondiente.
- Cliquea en la flecha naranja para accionar la codificación o descodificación.
- Puedes comenzar desde cero y borrar todos los campos al cliquear la palabra "Limpiar" en la parte de abajo a la derecha.