SPX / Caesar Cipher

Resumen de proyecto

SPX es una página para la encriptación de la cartera de clientes en startups y estudios de diseño, marketing y publicidad.

Investigación UX:

1. Los usuarios son CEOs, CFOs, Partners, Account directors, Sales directors y KAMs de startups y microempresas dedicadas al ramo del diseño, marketing y publicidad. Se crea en función de la necesidad del manejo de datos confidenciales de sus clientes y proovedores.

2. SPX protege los datos personales o sensibles que los usuarios puedan tener de sus clientes, proveedores de servicios y posibles clientes con la intención de protegerlos de amenazas accidentales o intencionadas provocadas por acciones ya sea de curiosidad, lucrativas, sabotaje, vandalismo o fraude. La página encripta la información ingresada para que pueda almacenarse y manipularse sin que sea vulnerable a la vista de empleados de areas ajenas a las mencionadas, estableciendo una opción segura para compartir la información.

3. 

4. En el sketch se proponía que hubiera una cantidad de 26 corazones para que la persona pudiera elegir el nivel de seguridad, sin embargo en el feedback se custionó la facilidad para poder recordar cuál había sido el nivel seleccionado por el usuario, es decir que era fácil de olvidar o confundirlo; por lo que se cambió por un campo de texto en el que la persona podrá ingresar el número de su preferencia.

5. Prototipo en Figma

Objetivos de aprendizaje

El objetivo principal de aprendizaje es adquirir experiencia desarrollando aplicaciones web (WebApp) que interactúen con el usuario a través del navegador y la lógica, utilizando HTML5, CCS3 y JavaScript como herramientas.

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto.

UX

• Diseñar la aplicación pensando y entendiendo al usuario. Diseñé la aplicación pensando en que tuviera pocos elementos ya que debía ser fácil de usar, intuitivo pero a la vez discreto.
• Crear prototipos para obtener feedback e iterar. Realicé Sketch, pedí feedback, hice mejoras y posteriormente hice el mockup y el prototipo. Al final volví a realizar una mejora de acuerdo al feedback sobre los botones. Utilicé Figma para realizar el mockup y prototipo.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía). Los elementos cuentan con contraste y alineación para que el usuario pueda encontrar fácilmente las funciones, así como el botón de ayuda.

HTML y CSS

• Uso correcto de HTML semántico. Hice uso de etiquetas como nav y footer.
• Uso de selectores de CSS. Los elementos tienen el diseño aplicado a través de clases y selectores de elemento.
• Construir tu aplicación respetando el diseño realizado (maquetación). Construí el diseño de forma más apegada posible al prototipo.

DOM

• Uso de selectores del DOM. Aprendí cuales son los selectores del DOM que sirven para a llamar los elementos por ID, name o query.
• Manejo de eventos del DOM. Aprendí a usar eventos del DOM como click, onload.
• Manipulación dinámica del DOM.

Javascript

• Manipulación de strings. Aprendí que es un string y como usarla a través de las funciones.
• Uso de condicionales (if-else | switch). Aprendí a usar las condicionales, aunque para el proyecto solo use if-else.
• Uso de bucles (for | do-while). Amplié mi conocimiento sobre bucles, para el proyecto sólo usé for, y siento que es un tema que aún debo de continuar estudiando.
• Uso de funciones (parámetros | argumentos | valor de retorno). Aprendí la manera correcta de escribir una función y como aplicarla a los parámetros y argumentos, así como obtener un valor de retorno.
• Declaración correcta de variables (const & let). Aprendí la forma correcta de escribir una variable.

Testing

• Testeo de tus funciones. Realicé los testeos de mi proyecto.

Git y GitHub

• Comandos de git (add | commit | pull | status | push). Aprendí los comandos para hacer uso del git y github a través de la terminal.
• Manejo de repositorios de GitHub (clone | fork | gh-pages). Aprendí a hacer el fork de un repositorio y clonarlo.

Buenas prácticas de desarrollo

• Uso de identificadores descriptivos (Nomenclatura | Semántica). Usé la nomenclatura y semántica recomendada como adecuada para que las personas puedan leer mi código mejor.
• Uso de linter para seguir buenas prácticas (ESLINT). No entendí que es linter.