From 2219026d5b79e2cbc6b7ea81a92a1d9452627478 Mon Sep 17 00:00:00 2001 From: Natalia4428 Date: Wed, 12 Feb 2020 11:18:37 -0600 Subject: [PATCH 01/16] Guardando primer cambio --- src/cifrar.html | 45 ++++++++++++++++++++++++++++++++++++++++++ src/descifrar.html | 45 ++++++++++++++++++++++++++++++++++++++++++ src/stylecifrar.css | 16 +++++++++++++++ src/styledescifrar.css | 15 ++++++++++++++ 4 files changed, 121 insertions(+) create mode 100644 src/cifrar.html create mode 100644 src/descifrar.html create mode 100644 src/stylecifrar.css create mode 100644 src/styledescifrar.css diff --git a/src/cifrar.html b/src/cifrar.html new file mode 100644 index 00000000..9c29ca63 --- /dev/null +++ b/src/cifrar.html @@ -0,0 +1,45 @@ + + + + + + Cifrar + + +

CIFRAR

+ + + +

Introduce el texto y número de desplazamientos para comenzar

+

Texto:

+ + +

Número desplazamientos:

+ +
+ +

+ + + +
+ + + +

+ +

+ diff --git a/src/descifrar.html b/src/descifrar.html new file mode 100644 index 00000000..7e0f09df --- /dev/null +++ b/src/descifrar.html @@ -0,0 +1,45 @@ + + + + + + Descifrar + + +

DESCIFRAR

+ + + +

Introduce el texto y número de desplazamientos para comenzar

+

Texto:

+ + +

Número desplazamientos:

+ +
+ +

+ + + +
+ + + +

+ +

+ diff --git a/src/stylecifrar.css b/src/stylecifrar.css new file mode 100644 index 00000000..95c0909e --- /dev/null +++ b/src/stylecifrar.css @@ -0,0 +1,16 @@ +body { background-color: #F7F07B; +position: absolute; +width: 1366px; +height: 768px; +} +h1{/* Rectangle 2 */ +position: center; +width: 793px; +height: 132px; +left: calc(50% - 793px/2 + 0.5px); +top: calc(50% - 132px/2 - 391px); + +background: #70592D; +box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +border-radius: 50px; +} diff --git a/src/styledescifrar.css b/src/styledescifrar.css new file mode 100644 index 00000000..54a98a0a --- /dev/null +++ b/src/styledescifrar.css @@ -0,0 +1,15 @@ +body { background-color: #E762D7FF; +position: absolute; +width: 1366px; +height: 768px; +} +h1 {position: center; +width: 793px; +height: 132px; +left: calc(50% - 793px/2 + 0.5px); +top: calc(50% - 132px/2 - 391px); + +background: #97CE4C; +box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +border-radius: 50px; +} From 04603afc9153e87771487d60c86b4dda093aa040 Mon Sep 17 00:00:00 2001 From: Natalia4428 <60705654+Natalia4428@users.noreply.github.com> Date: Mon, 17 Feb 2020 14:37:15 -0600 Subject: [PATCH 02/16] Create imagenes --- imagenes | 1 + 1 file changed, 1 insertion(+) create mode 100644 imagenes diff --git a/imagenes b/imagenes new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/imagenes @@ -0,0 +1 @@ + From 015b617f5b9f1d9521b40fe8d28632870bd0ac62 Mon Sep 17 00:00:00 2001 From: Natalia4428 Date: Tue, 18 Feb 2020 09:03:14 -0600 Subject: [PATCH 03/16] =?UTF-8?q?Cambios=20importantes=20en=20el=20c=C3=B3?= =?UTF-8?q?digo.=20Inicio=20de=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 298 ++--------------------------------------- src/cifrar.html | 33 ++--- src/cipher.js | 19 ++- src/descifrar.html | 36 ++--- src/index.html | 29 ++-- src/style.css | 53 ++++++++ src/stylecifrar.css | 18 ++- src/styledescifrar.css | 24 +++- 8 files changed, 175 insertions(+), 335 deletions(-) diff --git a/README.md b/README.md index ae534066..44a6ca0c 100644 --- a/README.md +++ b/README.md @@ -1,300 +1,30 @@ # Cifrado César -## Índice - -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker Edition](#6-hacker-edition) -* [7. Pistas, tips y lecturas complementarias](#6-pistas-tips-y-lecturas-complementarias) - -*** - -## 1. Preámbulo - -Cifrar significa codificar. El [cifrado César](https://en.wikipedia.org/wiki/Caesar_cipher) -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. - -![caeser-cipher](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Caesar3.svg/2000px-Caesar3.svg.png) - -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. - -## 2. Resumen del proyecto - -¿Qué tengo que hacer exactamente? En este proyecto crearás la primera aplicación -web del _bootcamp_. Servirá para que el usuario pueda cifrar y descifrar un -texto indicando un desplazamiento específico de caracteres (_offset_). - -La temática es libre. Tú debes pensar en qué situaciones de la vida real se -necesitaría cifrar un mensaje y pensar en cómo debe ser esa experiencia de uso -(qué pantallas, explicaciones, mensajes, colores, ¿marca?) etc. Algunas ideas de -ejemplo: - -* Crear claves seguras para el email. -* Encriptar/cifrar una tarjeta de crédito. -* Herramienta de mensajería interna de una organización de derechos humanos en - una zona de conflicto. -* Mensajería secreta para parejas. - -## 3. 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. -- [ ] Crear prototipos para obtener feedback e iterar. -- [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía). - -### HTML y CSS - -- [ ] Uso correcto de HTML semántico. -- [ ] Uso de selectores de CSS. -- [ ] Construir tu aplicación respetando el diseño realizado (maquetación). - -### DOM - -- [ ] Uso de selectores del DOM. -- [ ] Manejo de eventos del DOM. -- [ ] Manipulación dinámica del DOM. - -### Javascript - -- [ ] Manipulación de strings. -- [ ] Uso de condicionales (if-else | switch). -- [ ] Uso de bucles (for | do-while). -- [ ] Uso de funciones (parámetros | argumentos | valor de retorno). -- [ ] Declaración correcta de variables (const & let). - -### Testing -- [ ] Testeo de tus funciones. - -### Git y GitHub -- [ ] Comandos de git (add | commit | pull | status | push). -- [ ] Manejo de repositorios de GitHub (clone | fork | gh-pages). - -### Buenas prácticas de desarrollo -- [ ] Uso de identificadores descriptivos (Nomenclatura | Semántica). -- [ ] Uso de linter para seguir buenas prácticas (ESLINT). - - -## 4. Consideraciones generales - -* Este proyecto se debe resolver de manera individual. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando GitHub pages. Si no sabes lo que es GitHub, no - te preocupes, lo aprenderás durante este proyecto. -* Tiempo para completarlo: Toma como referencia 2 semanas. Trabaja durante el - primer Sprint (una semana) y al final, trata de fijar un estimado de cuándo lo - terminarás. - -## 5. Criterios de aceptación mínimos del proyecto - -Usa este alfabeto simple (solamente mayúsculas y sin ñ). - -* 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 - -La interfaz debe permitir al usuario: - -* Elegir un desplazamiento (_offset_) indicando cuántas posiciones queremos que - el cifrado desplace cada caracter. -* Insertar un mensaje (texto) que queremos cifrar. -* Ver el resultado del mensaje cifrado. -* Insertar un mensaje (texto) a descifrar. -* Ver el resultado del mensaje descifrado. - -### Scripts / Archivos - -#### UX (Diseño de experiencia de usuario) - -Antes de iniciar a codear, debes entender el problema que quieres solucionar y -cómo tu aplicación lo soluciona. - -* Trabaja tu primer prototipo con papel y lápiz (blanco y negro). -* Luego valida esta solución con una compañera (pedir feedback). -* Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un - nuevo prototipo usando alguna herramienta para diseño de prototipos - ([Balsamiq](https://balsamiq.com/), [Figma](https://www.figma.com/), - [Google Slides](https://www.google.com/intl/es/slides/about/), etc.) -Estos puntos los presentarás en el `README.md`. **`README.md`**: Debe contener lo siguiente: * Un título con el nombre de tu proyecto. -* Un resumen de 1 o 2 líneas de qué se trata tu proyecto. -* La imagen final de tu proyecto. -* Investigación UX: - 1. Explicar quiénes son los usuarios y los objetivos en relación con el - producto. - 2. Explicar cómo el producto soluciona los problemas/necesidades de dichos - usuarios. - 3. Luego colocarás la foto de tu primer prototipo en papel. - 4. Agregar un resumen del feedback recibido indicando las mejoras a realizar. - 5. Imagen del prototipo final. - -#### Visualmente (HTML5 y CSS3) - -Deberás maquetar de forma exacta el prototipo final que hiciste en balsamiq -utilizando HTML5 y CSS3. En este momento elegirás los colores, tipo de fuente, -etc a usar. - -A continuación describimos los archivos que utilizarás: - -**`src/index.html`**: - -En este archivo va el contenido que se mostrará al usuario (esqueleto HTML). -Encontrarás 3 etiquetas iniciales, las cuales si deseas puedes borrar y empezar -de cero: - -* `
`: encabezado de tu proyecto. -* `
`: contenido principal de tu proyecto. -* `