From 34b0788e0e408d53d6ef60c13c076446601ef45f Mon Sep 17 00:00:00 2001 From: Ivy Feraco Date: Mon, 3 Oct 2022 16:22:03 -0500 Subject: [PATCH 1/7] Update README.md --- projects/01-cipher/README.md | 448 ++++++++++++++++++++++------------- 1 file changed, 286 insertions(+), 162 deletions(-) diff --git a/projects/01-cipher/README.md b/projects/01-cipher/README.md index 9e8f0ae06..2b35a0229 100644 --- a/projects/01-cipher/README.md +++ b/projects/01-cipher/README.md @@ -2,32 +2,44 @@ ## Índice -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) +* [1. Objetivos de aprendizaje generales](#1-objetivos-de-aprendizaje-generales) +* [2. Preámbulo](#2-preámbulo) +* [3. Resumen del proyecto](#2-resumen-del-proyecto) * [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) +* [5. Hito 1: Criterios de aceptación mínimos del proyecto](#5-hito-1-criterios-de-aceptación-mínimos-del-proyecto) +* [6. Hito 2 (opcional): Agrega soporte para minúsculas y otros caracteres](#6-hito-2-(opcional)-agrega-soporte-para-minúsculas-y-otros-caracteres) * [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) +* [8. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) +* [9. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) +* [10. Para considerar Project Feedback](#10-para-considerar-project-feedback) *** -## 1. Preámbulo +## 1. Objetivos de aprendizaje generales +Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS. + +Mientras desarrollas este proyecto, te familiarizarás con estos nuevos conceptos: + +* Un _boilerplate_, la estructura básica de un proyecto en distintas carpetas (a través `modulos` en JS). +* Las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias). +* Objetos en JavaScript, su estructura y métodos. +* Iteración (bucles) en JavaScript. +* Control de versiones con git (y la plataforma github) + +## 2. 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. +![caeser-cipher](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Caesar3.svg/2000px-Caesar3.svg.png) + Por ejemplo, si usamos un desplazamiento (_offset_) de 3 posiciones: * La letra A se cifra como D. @@ -41,16 +53,15 @@ comunicación por sí mismos; el cifrado César sí puede formar parte de sistem más complejos de codificación, como el cifrado Vigenère, e incluso tiene aplicación en el sistema ROT13. -## 2. Resumen del proyecto +## 3. Resumen del proyecto -En este proyecto crearás una aplicación web que servirá para que el usuario -pueda cifrar y descifrar un texto indicando un desplazamiento específico de -caracteres (_offset_). +En este proyecto crearás una aplicación web que servirá para que tu usuaria +pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento específico de +caracteres (_offset_). Lo harás utilizando HTML, CSS y JavaScript. -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: +La temática es libre. Piensa en qué situaciones se necesitaría cifrar un mensaje. Decide +cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, etc.) +Algunas ideas de ejemplo: * Crear claves seguras para el email. * Encriptar/cifrar una tarjeta de crédito. @@ -58,98 +69,55 @@ ejemplo: una zona de conflicto. * Mensajería secreta para parejas. -Trabajando en parejas aprenderán a construir una aplicación web que interactuará -con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript -como tecnologías. - -## 3. Objetivos de aprendizaje - -> ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir -> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml), -> al crear el repo del proyecto para un cohort en particular usando -> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches). -> -> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml) -> que contempla nuestra currícula. - ## 4. Consideraciones generales -* El equipo de coaches te dará un tiempo sugerido e indicaciones sobre si trabajar - sola o en equipo. Recuerda que cada una aprende a diferente ritmo. -* 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. +* Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints. +* Enfócate en aprender y no solamente en "completar" el proyecto. Te va a costar. +* Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que _todavía_ no entiendas. Irás aprendiendo. -## 5. Criterios de aceptación mínimos del proyecto -Usa este alfabeto simple (solamente mayúsculas y sin ñ): +## 5. Hito 1: Criterios de aceptación mínimos del proyecto -* 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 +Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales. -### Definición del producto +**1. Una interfaz que debe permitir a la usuaria:** -En el README.md, cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso -para definir el producto final a nivel de experiencia y de interfaz. + * **Cifrar un mensaje** + * Insertar el mensaje (texto) que quiere cifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ). + * Elegir un numero de desplazamiento (_offset_) indicando cuántas posiciones quieres que + el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer). + * Ver el resultado del mensaje cifrado. -* Quiénes son los principales usuarios de producto. -* Cuáles son los objetivos de estos usuarios en relación con tu producto. -* Cómo crees que el producto que estás creando está resolviendo sus problemas. + * **Descifrar un mensaje** + * Insertar el mensaje (texto) que quieres descifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ). + * Elegir un numero desplazamiento (_offset_, que corresponda al que usamos para cifrar) indicando cuántas posiciones quieres que + el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer). + * Ver el resultado del mensaje descifrado. -### Interfaz de usuario (UI) +**2. Pruebas unitarios de los métodos.** + Los metódos de `cipher` (`encode` y `decode`) deben tener cobertura con pruebas unitarias. -La interfaz debe permitir al usuario: +**3. Código de tu proyecto subido a tu repo y interfaz "desplegada".** + El código final debe estar subido en un repositorio en GitHub. La interfaz o pagina web, debe ser "desplegada" usando GitHub Pages. -* 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. +**4. Un README que contiene una definición del producto.** + En el README cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso para definir el producto final a nivel de experiencia y de interfaz. Estas preguntas sirven como guia: -### Scripts / Archivos + * Quiénes son los principales usuarios de producto. + * Cuáles son los objetivos de estos usuarios en relación con tu producto. + * Cómo crees que el producto que estás creando está resolviendo sus problemas. -* `README.md`: debe explicar cómo descargar, instalar y ejecutar la aplicación - así como una introducción a la aplicación, su funcionalidad y decisiones de - diseño que tomaron. -* `src/index.html`: este es el punto de entrada a tu aplicación. Este archivo - debe contener tu _markup_ (HTML) e incluir el CSS y JavaScript necesario. -* `src/cipher.js`: acá debes implementar el objeto `cipher`, el cual ya está - _exportado_ en el _boilerplate_. Este objeto (`cipher`) debe contener dos - métodos: - - `cipher.encode(offset, string)`: `offset` es el número de posiciones que - queremos mover a la derecha en el alfabeto y `string` el mensaje (texto) - que queremos cifrar. - - `cipher.decode(offset, string)`: `offset` es el número de posiciones que - queremos mover a la izquierda en el alfabeto y `string` el mensaje - (texto) que queremos descifrar. -* `src/index.js`: acá debes escuchar eventos del DOM, invocar `cipher.encode()` - o `cipher.decode()` según sea necesario y actualizar el resultado en la UI. -* `test/cipher.spec.js`: este archivo contiene algunos tests de ejemplo y acá - tendrás que implementar los tests para `cipher.encode()` y `cipher.decode()`. - -### Deploy - -Hacer que los sitios estén publicados (o _desplegados_) para que usuarias de -la web puedan acceder a él es algo común en proyectos de desarrollo de software. - -En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. - -El comando `npm run deploy` puede ayudarte con esta tarea y también puedes - consultar su [documentación oficial](https://docs.github.com/es/pages). +Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach. -## 6. Hacker edition +## 6. Hito 2 (opcional): Agrega soporte para minúsculas y otros caracteres -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. +Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre +los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide +sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas +nuevas en el siguiente proyecto. -La descripción general de este proyecto no menciona qué pasaría con las letras -minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El -boilerplate incluye algunos tests (comentados en principio) que puedes usar como -punto de partida para implementar el soporte para estos casos. - -Tampoco se menciona qué pasaría si el offset fuera negativo. Como parte del -hacker edition te invitamos a explorar también esta caso por tu cuenta. +El hito 1 no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El _boilerplate_ incluye algunos _tests_ (comentados en principio) que +puedes usar como punto de partida para implementar el soporte para estos casos adicionales. ## 7. Consideraciones técnicas @@ -157,19 +125,16 @@ La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro también conocido como Vanilla JavaScript. +Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este +repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ es la estructura basica de un proyecto que sirve como un punto de partida con archivos inicial y configuración basica de dependencias y tests. + Los tests unitarios deben cubrir un mínimo del 70% de _statements_, _functions_ y _lines_, y un mínimo del 50% de _branches_. El _boilerplate_ ya contiene el setup y configuración necesaria para ejecutar los tests (pruebas) así como _code coverage_ para ver el nivel de cobertura de los tests usando el comando `npm test`. -El _boilerplate_ incluye tests (pruebas) de ejemplo como punto de partida. - -Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este -repositorio que contiene el _boilerplate_. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias y tests de ejemplo: +El boilerplate que les damos contiene esta estructura: ```text ./ @@ -189,6 +154,29 @@ como toda la configuración de dependencias y tests de ejemplo: └── cipher.spec.js ``` +### Descripción de scripts / archivos + +* `README.md`: debe explicar la información necesaria para el uso de tu aplicación web, + así como una introducción a la aplicación, su funcionalidad y decisiones de + diseño que tomaron. +* `src/index.html`: este es el punto de entrada a tu aplicación. Este archivo + debe contener tu _markup_ (HTML) e incluir el CSS y JavaScript necesario. +* `src/style.css`: este archivo debe contener las reglas de estilo. Queremos que escribas tus +propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc). +* `src/cipher.js`: acá debes implementar el objeto `cipher`, el cual ya está + _exportado_ en el _boilerplate_. Este objeto (`cipher`) debe contener dos + métodos: + - `cipher.encode(offset, string)`: `offset` es el número de posiciones que + queremos mover a la derecha en el alfabeto y `string` el mensaje (texto) + que queremos cifrar. + - `cipher.decode(offset, string)`: `offset` es el número de posiciones que + queremos mover a la izquierda en el alfabeto y `string` el mensaje + (texto) que queremos descifrar. +* `src/index.js`: acá debes escuchar eventos del DOM, invocar `cipher.encode()` + o `cipher.decode()` según sea necesario y actualizar el resultado en la UI. +* `test/cipher.spec.js`: este archivo contiene algunos tests de ejemplo y acá + tendrás que implementar los tests para `cipher.encode()` y `cipher.decode()`. + El _boilerplate_ incluye tareas que ejecutan [eslint](https://eslint.org/) y [htmlhint](https://github.com/yaniswang/HTMLHint) para verificar el `HTML` y `JavaScript` con respecto a una guías de estilos. Ambas tareas se ejecutan @@ -200,19 +188,194 @@ entorno (browser en este caso) y las [reglas recomendadas (`"eslint:recommended" En cuanto a reglas/guías de estilo en sí, usaremos las recomendaciones _por defecto_ de tanto `eslint` como `htmlhint`. +### Deploy + +Hacer que los sitios estén publicados (o _desplegados_) para que usuarias de +la web puedan acceder a él es algo común en proyectos de desarrollo de software. + +En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. + +El comando `npm run deploy` puede ayudarte con esta tarea y también puedes + consultar su [documentación oficial](https://docs.github.com/es/pages). + +*** + +## 8. Objetivos de aprendizaje + +Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. + +### HTML + +- [ ] **Uso de HTML semántico** + +
Links

+ + * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) + * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) +

+ +### CSS + +- [ ] **Uso de selectores de CSS** + +
Links

+ + * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) + * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) +

+ +- [ ] **Modelo de caja (box model): borde, margen, padding** + +
Links

+ + * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) + * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) + * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) + * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) +

+ +### Web APIs + +- [ ] **Uso de selectores del DOM** + +
Links

+ + * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) + * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) + * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +

+ +- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** + +
Links

+ + * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) + * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) + * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) + * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) +

+ +- [ ] **Manipulación dinámica del DOM** + +
Links

+ + * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) + * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) + * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) + * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) + * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) + * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) +

+ +### JavaScript + +- [ ] **Tipos de datos primitivos** + +
Links

+ + * [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos) +

+ +- [ ] **Strings (cadenas de caracteres)** + +
Links

+ + * [Strings](https://curriculum.laboratoria.la/es/topics/javascript/06-strings) + * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String) +

+ +- [ ] **Variables (declaración, asignación, ámbito)** + +
Links

+ + * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) + * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) +

+ +- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** + +
Links

+ + * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) + * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) +

+ +- [ ] **Uso de bucles/ciclos (while, for, for..of)** + +
Links

+ + * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) + * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) +

+ +- [ ] **Funciones (params, args, return)** + +
Links

+ + * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) + * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) + * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) + * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) +

+ +- [ ] **Pruebas unitarias (unit tests)** + +
Links

+ + * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) +

+ +- [ ] **Módulos de ECMAScript (ES Modules)** + +
Links

+ + * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) + * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) +

+ +- [ ] **Uso de linter (ESLINT)** + +- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** + +### 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** + +
Links

+ + * [Sitio oficial de GitHub Pages](https://pages.github.com/) +

+ +### Centrado en el usuario + +- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** + +### Diseño de producto + +- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** + +- [ ] **Seguir los principios básicos de diseño visual** + *** -## 8. Pistas, tips y lecturas complementarias +## 9. Pistas, tips y lecturas complementarias -### Primeros pasos +### Prepara tu PC para trabajar. -1. Antes que nada, asegúrate de tener un :pencil: editor de texto en +1. Asegúrate de tener un :pencil: editor de texto en condiciones, algo como [Atom](https://atom.io/) o [Code](https://code.visualstudio.com/). 2. Para ejecutar los comandos a continuación necesitarás una :shell: - [UNIX Shell](../../topics/shell), - que es un programita que interpreta líneas de comando (command-line - interpreter) así como tener [git](../../topics/scm/01-git) + [UNIX Shell](https://curriculum.laboratoria.la/es/topics/shell), + que es un programa que interpreta líneas de comando (command-line + interpreter) así como tener [git](https://curriculum.laboratoria.la/es/topics/scm/01-git) instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS, ya tienes una _shell_ (terminal) instalada por defecto (y probablemente `git` también). Si usas Windows puedes usar la versión completa de [Cmder](https://cmder.net/) @@ -238,22 +401,13 @@ usaremos las recomendaciones _por defecto_ de tanto `eslint` como `htmlhint`. ### Recursos y temas relacionados -Súmate al canal de Slack [#project-cipher](https://claseslaboratoria.slack.com/archives/C03LJSH6R7D) +Súmate al canal de Slack [#project-cipher](https://claseslaboratoria.slack.com/archives/C03LJSH6R7D) para conversar y pedir ayuda del proyecto. -A continuación un video de Michelle que te lleva a través de la fórmula -matemática del Cifrado César y un par de cosas más que debes saber para -resolver este proyecto. ¡Escúchala con detenimiento y sigue sus consejos! :) +A continuación un video que te lleva a través de la fórmula matemática del Cifrado César +y un par de cosas más que debes saber para resolver este proyecto. La fórmula no es lo iportante del proyecto, no te confundas. [![tips caesar cipher](https://img.youtube.com/vi/zd8eVrXhs7Y/0.jpg)](https://www.youtube.com/watch?v=zd8eVrXhs7Y) -[Link](https://www.youtube.com/watch?v=zd8eVrXhs7Y) - -También una metodología para empezar a desarrollar tareas con JavaScript: - -[![Resolución de problemas con JavaScript](http://i3.ytimg.com/vi/lYfEmhLmu7A/hqdefault.jpg)](https://www.youtube.com/watch?v=lYfEmhLmu7A) - -[Link](https://www.youtube.com/watch?v=lYfEmhLmu7A) - Terminal y shell de UNIX: [![Playlist de Terminal y shell de UNIX](https://img.youtube.com/vi/GB35Eyb-J4c/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd) @@ -266,19 +420,8 @@ Control de versiones y trabajo colaborativo con Git y GitHub: [Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd) -Diseño de experiencia de usuario (User Experience Design): - -* Ideación -* Prototipado (sketching) -* Testeo e Iteración - Desarrollo Front-end: -* Valores -* Tipos -* Variables -* Control de flujo -* Tests unitarios * [Aprende más sobre `charCodeAt()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt) * [Aprende más sobre `String.fromCharCode()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode) * [Aprende más sobre `ASCII`](http://conceptodefinicion.de/ascii/) @@ -291,35 +434,16 @@ Organización del Trabajo: * [Scrum en Detalle](https://www.youtube.com/watch?v=nOlwF3HRrAY&t=297s). No esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a poco a lo largo del -_bootcamp_. -* [Guía para Cifrado César](https://docs.google.com/presentation/d/e/2PACX-1vTQ7-8LZDHrT4Y6AOBN72Nkfz1eJAeseBHpcHX8BSq0aFCFoZmuMjluMeyFNgK9ISKxTz0H03yGfJiT/pub?start=false&loop=false&delayms=60000) - -## 9. Checklist - -Esta sección está para ayudarte a llevar un control de lo que vas completando. - -### Parte Obligatoria - -* [ ] `README.md` incluye info sobre proceso y decisiones de diseño. -* [ ] `README.md` explica claramente quiénes son los usuarios y su relación con - el producto. -* [ ] `README.md` explica claramente cómo el producto soluciona los - problemas/necesidades de los usuarios. -* [ ] Usa VanillaJS. -* [ ] Implementa `cipher.encode`. -* [ ] Implementa `cipher.decode`. -* [ ] Pasa linter con configuración provista. -* [ ] Pasa pruebas unitarias. -* [ ] Pruebas unitarias cubren 70% de _statements_, _functions_ y _lines_, y un - mínimo del 50% de _branches_. -* [ ] Interfaz permite elegir el `offset` o _desplazamiento_ a usar en el - cifrado/descifrado. -* [ ] Interfaz permite escribir un texto para ser cifrado. -* [ ] Interfaz muestra el resultado del cifrado correctamente. -* [ ] Interfaz permite escribir un texto para ser descifrado. -* [ ] Interfaz muestra el resultado del descifrado correctamente. - -### Parte Opcional: "Hacker edition" - -* [ ] Cifra/descifra minúsculas -* [ ] Cifra/descifra _otros_ caracteres (espacios, puntuación, `ñ`, `á`, ...) -* [ ] Permite usar un `offset` negativo. + +*** + +## 10. Para considerar Project Feedback + +En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback: + +* [ ] Tiene una interfaz que permite a la usuaria cifrar y descifrar. +* [ ] El proyecto será entregado incluyendo pruebas unitarios de los métodos de `cipher` (`encode` y `decode`). +* [ ] El proyecto será entregado libre de _errores_ de `eslint` (_warnings_ son ok). +* [ ] El proyecto será entregado subiendo tu código a GitHub. +* [ ] La interfaz será "desplegada" usando GitHub Pages. +* [ ] El README contiene una definición del producto. From e9be9c0c7294fbc24d637523914b431545cedbd5 Mon Sep 17 00:00:00 2001 From: Ivy Feraco Date: Fri, 7 Oct 2022 13:10:34 -0500 Subject: [PATCH 2/7] incorporando cambios y feedback --- projects/01-cipher/README.md | 229 ++++++----------------------------- 1 file changed, 36 insertions(+), 193 deletions(-) diff --git a/projects/01-cipher/README.md b/projects/01-cipher/README.md index 2b35a0229..7f3248e8a 100644 --- a/projects/01-cipher/README.md +++ b/projects/01-cipher/README.md @@ -2,31 +2,19 @@ ## Índice -* [1. Objetivos de aprendizaje generales](#1-objetivos-de-aprendizaje-generales) -* [2. Preámbulo](#2-preámbulo) -* [3. Resumen del proyecto](#2-resumen-del-proyecto) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Hito 1: Criterios de aceptación mínimos del proyecto](#5-hito-1-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hito 2 (opcional): Agrega soporte para minúsculas y otros caracteres](#6-hito-2-(opcional)-agrega-soporte-para-minúsculas-y-otros-caracteres) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [9. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [10. Para considerar Project Feedback](#10-para-considerar-project-feedback) +* [1. Preámbulo](#2-preámbulo) +* [2. Resumen del proyecto](#2-resumen-del-proyecto) +* [3. Consideraciones generales](#3-consideraciones-generales) +* [4. Hito: Criterios de aceptación mínimos del proyecto](#4-hito-criterios-de-aceptación-mínimos-del-proyecto) +* [5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres](#5-hito-opcional-agrega-soporte-para-minúsculas-y-otros-caracteres) +* [6. Consideraciones técnicas](#6-consideraciones-técnicas) +* [7. Objetivos de aprendizaje](#7-objetivos-de-aprendizaje) +* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) +* [9. Para considerar Project Feedback](#9-para-considerar-project-feedback) *** -## 1. Objetivos de aprendizaje generales -Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS. - -Mientras desarrollas este proyecto, te familiarizarás con estos nuevos conceptos: - -* Un _boilerplate_, la estructura básica de un proyecto en distintas carpetas (a través `modulos` en JS). -* Las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias). -* Objetos en JavaScript, su estructura y métodos. -* Iteración (bucles) en JavaScript. -* Control de versiones con git (y la plataforma github) - -## 2. Preámbulo +## 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 @@ -53,7 +41,7 @@ comunicación por sí mismos; el cifrado César sí puede formar parte de sistem más complejos de codificación, como el cifrado Vigenère, e incluso tiene aplicación en el sistema ROT13. -## 3. Resumen del proyecto +## 2. Resumen del proyecto En este proyecto crearás una aplicación web que servirá para que tu usuaria pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento específico de @@ -69,14 +57,23 @@ Algunas ideas de ejemplo: una zona de conflicto. * Mensajería secreta para parejas. -## 4. Consideraciones generales +Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS. Mientras desarrollas este proyecto, te familiarizarás con nuevos conceptos también. + +### Los objetivos generales de este proyecto son los siguientes + +* Trabajar en base a un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través modulos en JS). +* Conocer las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias). +* Aprender sobre objetos, estructuras, métodos e iteración (bucles) en JavaScript +* Implementar control de versiones con git (y la plataforma github) + +## 3. Consideraciones generales * Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints. * Enfócate en aprender y no solamente en "completar" el proyecto. Te va a costar. * Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que _todavía_ no entiendas. Irás aprendiendo. -## 5. Hito 1: Criterios de aceptación mínimos del proyecto +## 4. Hito: Criterios de aceptación mínimos del proyecto Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales. @@ -109,17 +106,17 @@ Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu t Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach. -## 6. Hito 2 (opcional): Agrega soporte para minúsculas y otros caracteres +## 5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas nuevas en el siguiente proyecto. -El hito 1 no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El _boilerplate_ incluye algunos _tests_ (comentados en principio) que +El hito de los críterios mínimos no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El _boilerplate_ incluye algunos _tests_ (comentados en principio) que puedes usar como punto de partida para implementar el soporte para estos casos adicionales. -## 7. Consideraciones técnicas +## 6. Consideraciones técnicas La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro @@ -200,172 +197,17 @@ El comando `npm run deploy` puede ayudarte con esta tarea y también puedes *** -## 8. Objetivos de aprendizaje - -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. - -### HTML - -- [ ] **Uso de HTML semántico** - -
Links

- - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

- -### CSS - -- [ ] **Uso de selectores de CSS** - -
Links

- - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Modelo de caja (box model): borde, margen, padding** - -
Links

- - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

- - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

- -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** - -
Links

- - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

- -- [ ] **Manipulación dinámica del DOM** - -
Links

- - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Tipos de datos primitivos** - -
Links

- - * [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos) -

- -- [ ] **Strings (cadenas de caracteres)** - -
Links

+## 7. Objetivos de aprendizaje - * [Strings](https://curriculum.laboratoria.la/es/topics/javascript/06-strings) - * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String) -

- -- [ ] **Variables (declaración, asignación, ámbito)** - -
Links

- - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

- -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** - -
Links

- - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -

- -- [ ] **Uso de bucles/ciclos (while, for, for..of)** - -
Links

- - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

- -- [ ] **Funciones (params, args, return)** - -
Links

- - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

- -- [ ] **Pruebas unitarias (unit tests)** - -
Links

- - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

- -- [ ] **Módulos de ECMAScript (ES Modules)** - -
Links

- - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

- -- [ ] **Uso de linter (ESLINT)** - -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** - -### 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** - -
Links

- - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

- -### Centrado en el usuario - -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** - -### Diseño de producto - -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** - -- [ ] **Seguir los principios básicos de diseño visual** - -*** +> ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir +> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml), +> al crear el repo del proyecto para un cohort en particular usando +> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches). +> +> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml) +> que contempla nuestra currícula. -## 9. Pistas, tips y lecturas complementarias +## 8. Pistas, tips y lecturas complementarias ### Prepara tu PC para trabajar. @@ -425,6 +267,7 @@ Desarrollo Front-end: * [Aprende más sobre `charCodeAt()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt) * [Aprende más sobre `String.fromCharCode()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode) * [Aprende más sobre `ASCII`](http://conceptodefinicion.de/ascii/) +* Aprende más sobre [objetos](https://es.javascript.info/object) y [como definir métodos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects#definici%C3%B3n_de_m%C3%A9todos) * [Documentación de NPM](https://docs.npmjs.com/) Organización del Trabajo: @@ -437,7 +280,7 @@ Organización del Trabajo: *** -## 10. Para considerar Project Feedback +## 9. Para considerar Project Feedback En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback: From 299ee49358b26baed1b0b6606b74873275f2158f Mon Sep 17 00:00:00 2001 From: ivy Date: Tue, 11 Oct 2022 20:39:17 -0500 Subject: [PATCH 3/7] version portugues --- projects/01-cipher/README.md | 2 +- projects/01-cipher/README.pt-BR.md | 260 +++++++++++++---------------- 2 files changed, 114 insertions(+), 148 deletions(-) diff --git a/projects/01-cipher/README.md b/projects/01-cipher/README.md index 122cddaee..274538286 100644 --- a/projects/01-cipher/README.md +++ b/projects/01-cipher/README.md @@ -2,7 +2,7 @@ ## Índice -* [1. Preámbulo](#2-preámbulo) +* [1. Preámbulo](#1-preámbulo) * [2. Resumen del proyecto](#2-resumen-del-proyecto) * [3. Consideraciones generales](#3-consideraciones-generales) * [4. Hito: Criterios de aceptación mínimos del proyecto](#4-hito-criterios-de-aceptación-mínimos-del-proyecto) diff --git a/projects/01-cipher/README.pt-BR.md b/projects/01-cipher/README.pt-BR.md index 387d7bfc7..a59102795 100644 --- a/projects/01-cipher/README.pt-BR.md +++ b/projects/01-cipher/README.pt-BR.md @@ -4,13 +4,13 @@ * [1. Prefácio](#1-prefácio) * [2. Resumo do projeto](#2-resumo-do-projeto) -* [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem) -* [4. Considerações gerais](#4-considerações-gerais) -* [5. Critérios de aceitação mínimos do projeto](#5-critérios-de-aceitação-mínimos-do-projeto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Considerações técnicas](#7-considerações-técnicas) +* [3. Considerações gerais](#3-considerações-gerais) +* [4. Marco: Critérios de Aceitação Mínimos do Projeto](#5-marco-critérios-de-aceitação-mínimos-do-projeto) +* [5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres](#5-marco-opcional-adicione-suporte-para-letras-minúsculas-e-outros-caracteres) +* [6. Considerações técnicas](#6-considerações-técnicas) +* [7. Objetivos de aprendizagem](#7-objetivos-de-aprendizagem) * [8. Guias, dicas e leituras complementares](#8-guias-dicas-e-leituras-complementares) -* [9. Checklist](#9-checklist) +* [9. Considerar o feedback do projeto](#9-considerar-o-feedback-do-projeto) *** @@ -21,8 +21,6 @@ Cifrar significa codificar. A [cifra de César](https://pt.wikipedia.org/wiki/Ci O imperador romano Júlio César utilizava essa cifra para enviar ordens secretas aos seus generais no campo de batalha. -![caeser-cipher](https://user-images.githubusercontent.com/11894994/60990999-07ffdb00-a320-11e9-87d0-b7c291bc4cd1.png) - A cifra de César é uma das técnicas mais simples de cifrar uma mensagem. É um tipo de cifra por substituição, em que cada letra do texto original é substituida por outra que se encontra há um número fixo de posições @@ -44,7 +42,8 @@ a cifra de Vigenère, e tem aplicação no sistema ROT13. ## 2. Resumo do projeto Neste projeto você criará a primeira aplicação web do _bootcamp_. Nela o usuário -poderá cifrar e decifrar um texto indicando a chave de deslocamento (_offset_). +poderá cifrar e decifrar um texto no navegador indicando um deslocamento específico de +caracteres (_offset_). Você fará isso usando HTML, CSS e JavaScript. O tema é livre. Você deve pensar em alguma situação de vida real em que seja necessário cifrar uma mensagem e pensar em como deve ser a experiência do @@ -57,115 +56,89 @@ exemplo: em uma zona de conflito. * Mensagens secretas para alguma pessoa. -Neste projeto você aprenderá a construir uma aplicação web (_WebApp_) que irá -interagir com o usuário final através do navegador utilizando HTML, CSS e -JavaScript como ferramentas. +Como continuação do projeto de pré-admissão, você retrabalhará os fundamentos +do JavaScript, incluindo conceitos como variáveis, condicionais e funções, +bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. + desenvolver este projeto, você também se familiarizará com novos conceitos. -## 3. Objetivos de aprendizagem +### Os objetivos gerais deste projeto são os seguintes -> ℹ️ Esta seção será automaticamente gerada no idioma pertinente, a partir dos -> objetivos de aprendizagem declarados em [`project.yml`](./project.yml), ao -> criar o repositório do projeto para uma coorte em particular usando -> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches). -> -> Aqui você pode ver uma [lista de todos os objetivos de aprendizagem](../../learning-objectives/data.yml) -> cobertos em nosso currículo. - -## 4. Considerações gerais +* Trabalho baseado em um clichê, a estrutura básica de um projeto em diferentes + pastas (através de módulos em JS). +* Conhecer as ferramentas de manutenção e melhoria do código (linters e testes + unitários). +* Aprenda sobre objetos, estruturas, métodos e iteração (loops) em JavaScript +* Implementar controle de versão com git (e a plataforma github) -* Este projeto deve ser resolvido individualmente. -* O projeto será entregue subindo o seu código no GitHub (commit/push) e o - deploy será feito no GitHub Pages. Se não sabe o que é o GitHub, não se - preocupe, você aprendera durante o projeto. -* Tempo para completar: tempo referência 2 semanas. +## 3. Considerações gerais -## 5. Critérios de aceitação mínimos do projeto - -Use o alfabeto simples (somente maiúsculas e sem ç): - -* 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 - -### Definição do produto +## 4. Considerações gerais -No README.md, escreva como você definiu seu usuário e qual foi o processo para -definir o produto final a nível de expriência e interface. +* Resolvemos este projeto individualmente. Recomendamos uma duração de 1-3 sprints. +* Concentre-se em aprender e não apenas "concluir" o projeto. Vai te custar. +* Sugerimos que você não tente saber tudo antes de começar a codificar. + Não se preocupe muito agora com o que você _ainda_ não entende. + Você vai aprender. -* Quem são os principais usuário do produto? -* Quais são os objetivos do usuário em relação com o produto? -* Como você acredita que o produto está resolvendo os problemas do usuário? +## 4. Marco: Critérios de Aceitação Mínimos do Projeto -### Interface do usuário (UI) +Esses são os requisitos que seu projeto deve atender para garantir que +seu trabalho atenda aos objetivos principais. -A interface deve permitir ao usuário: +**1. Uma interface que deve permitir ao usuário:** -* Eleger um _offset_ indicando quantas posições de deslocamento de caracteres - quer que a cifra utilize. -* Inserir uma mensagem (texto) para ser cifrada. -* Ver o resultado da mensagem cifrada. -* Inserir uma mensagem (texto) para ser decifrada. -* Ver o resultado da mensagem decifrada. + * **Criptografar uma mensagem** + * Insira a mensagem (texto) que deseja criptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas e sem ñ). + * Escolha um número de deslocamento (_offset_) indicando quantas posições você deseja + a cifra muda cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). + * Veja o resultado da mensagem criptografada. -### Scripts / Arquivos + * **Descriptografar uma mensagem** + * Insira a mensagem (texto) que deseja descriptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas e sem ñ). + * Escolha um número de deslocamento (_offset_, que corresponde ao que usamos para criptografar) indicando quantas posições você deseja + a cifra muda cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). + * Veja o resultado da mensagem descriptografada. -* `REAME.md`: deve explicar como "deployar", instalar e executar a aplicação, - assim como uma introdução a aplicação, suas funcionalidades e as decisões que - foram tomadas. -* `src/index.html`: aqui será o ponto de entrada da sua aplicação. Este arquivo - deve conter a marcação HTML e chamar o CSS e JavaScript necessários. -* `src/cipher.js`: aqui você deve implementar o objeto `cipher`, o qual já está - _exportado_ no _boilerplate_. Este objeto (`cipher`) deve conter dois métodos: - - `cipher.encode(offset, string)`: `offset` é o número de posições que - queremos mover para a direita no alfabeto e `string` é a mensagem (texto) - que queremos cifrar. - - `cipher.decode(offset, string)`: `offset` é o número de posições que - queremos mover para a esquerda no alfabeto e `string` é a mensagem (texto) - que queremos decifrar. -* `src/index.js`: aqui você deve escutar os eventos de DOM, chamar - `cipher.encode()` e `cipher.decode()`. -* `test/cipher.spec.js`: este arquivo contem alguns testes de exemplo e aqui - você deve implementar os testes para `cipher.encode()` e `cipher.decode()`. +**dois. Testes unitários dos métodos.** + Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes de unidade. -### Deploy +**3. Código do seu projeto enviado para seu repositório e interface "implantado".** + O código final deve ser carregado em um repositório no GitHub. A interface, ou página da web, deve ser "implantada" usando o GitHub Pages. -Disponibilizar os projetos e colocá-los "no ar" vai ser parte cotidiana do -ciclo de desenvolvimento em produtos de tecnologia. +**4. Um README contendo uma definição de produto.** + No README, conte-nos como você pensou sobre os usuários e qual foi o seu processo para definir o produto final em nível de experiência e interface. Estas perguntas servem de guia: -Para este projeto, utilizaremos o Github Pages para essa finalidade. -O comando `npm run deploy` pode te auxiliar nessa tarefa e você pode também -consultar a [documentação oficial](https://docs.github.com/pt/pages). + * Quem são os principais usuários do produto. + * Quais são os objetivos desses usuários em relação ao seu produto. + * Como você acha que o produto que você está criando está resolvendo seus problemas. -## 6. Hacker Edition +Com esses requisitos atendidos, você pode agendar um feedback do projeto com um coach. -As seções chamadas _Hacker Edition_ são **opcionais**. Se você **terminou** tudo -e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar -mais sobre os objetivos de aprendizagem do projeto. +## 5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres -A descrição geral deste projeto não menciona o que aconteceria com letras -minúsculas ou outros caracteres (como espaço, pontuação, ç, ...). O -_boilerplate_ inclui alguns testes (comentados) que vocês podem usar como ponto -de partida para implementar o suporte para esses casos. +As partes "opcionais" destinam-se a permitir que você se aprofunde um pouco mais +os objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, decida +sabiamente se você quiser gastar o tempo aprofundando/refinando ou aprendendo coisas +novo para o próximo projeto. -Também não foi mencionado o que aconteceria com _offset_ negativo. Como parte da -hacker edition te convidamos a explorar esse caso sozinha. +O marco de critérios mínimos não menciona o que aconteceria com letras minúsculas e outros caracteres (como espaços, pontuação, ñ, ...). O _boilerplate_ inclui alguns _tests_ (comentados no início) que +você pode usar como ponto de partida para implementar o suporte para esses casos adicionais. -## 7. Considerações técnicas +## 6. Considerações técnicas A lógica do projeto deve estar implementada inteiramente em JavaScript. Nesse projeto **NÃO** está permitido usar bibliotecas ou frameworks, só vanilla JavaScript. +Para iniciar este projeto você terá que fazer um _fork_ e _clone_ isso +repositório contendo um _boilerplate_ com testes. Um _boilerplate_ é a estrutura básica de um projeto que serve como ponto de partida com arquivos iniciais e configuração básica de dependências e testes. + Os testes unitários devem cobrir no mínimo de 70% dos _statements_, _functions_ e _lines_, e um mínimo de 50% de _branches_. O _boilerplate_ já contem o setup e configurações necessárias para executar os testes assim como _code coverage_ para ver o nível de cobertura dos testes usando o comando `npm test`. -O _boilerplate_ inclui testes de exemplo, como ponto de partida. - -Para começar esse projeto você terá que fazer um _fork_ e _clonar_ este -repositório que contém o _boilerplate_. - -O _boilerplate_ contém uma estrutura de arquivos como ponto de partida assim -como toda a configuração de dependências e testes de exemplo: +O _boilerplate_ que fornecemos contém esta estrutura: ```text ./ @@ -185,6 +158,26 @@ como toda a configuração de dependências e testes de exemplo: └── cipher.spec.js ``` +### Descrição de scripts/arquivos + +* `REAME.md`: deve explicar como "deployar", instalar e executar a aplicação, + assim como uma introdução a aplicação, suas funcionalidades e as decisões que + foram tomadas. +* `src/index.html`: aqui será o ponto de entrada da sua aplicação. Este arquivo + deve conter a marcação HTML e chamar o CSS e JavaScript necessários. +* `src/cipher.js`: aqui você deve implementar o objeto `cipher`, o qual já está + _exportado_ no _boilerplate_. Este objeto (`cipher`) deve conter dois métodos: + - `cipher.encode(offset, string)`: `offset` é o número de posições que + queremos mover para a direita no alfabeto e `string` é a mensagem (texto) + que queremos cifrar. + - `cipher.decode(offset, string)`: `offset` é o número de posições que + queremos mover para a esquerda no alfabeto e `string` é a mensagem (texto) + que queremos decifrar. +* `src/index.js`: aqui você deve escutar os eventos de DOM, chamar + `cipher.encode()` e `cipher.decode()`. +* `test/cipher.spec.js`: este arquivo contem alguns testes de exemplo e aqui + você deve implementar os testes para `cipher.encode()` e `cipher.decode()`. + O _boilerplate_ inclui tarefas que executam [eslint](https://eslint.org/) e [htmlhint](https://github.com/yaniswang/HTMLHint) para verificar o `HTML` e `JavaScript` com respeito a uma guia de estilos. Ambas tarefas são executadas @@ -199,13 +192,32 @@ recomendadas (`"eslint:recommended"`)](https://eslint.org/docs/rules/). Nas regras/guias de estilo usaremos das recomendações padrão tanto para o `eslint` quanto `htmlhint`. +### Deploy + +Disponibilizar os projetos e colocá-los "no ar" vai ser parte cotidiana do +ciclo de desenvolvimento em produtos de tecnologia. + +Para este projeto, utilizaremos o Github Pages para essa finalidade. +O comando `npm run deploy` pode te auxiliar nessa tarefa e você pode também +consultar a [documentação oficial](https://docs.github.com/pt/pages). + +## 3. Objetivos de aprendizagem + +> ℹ️ Esta seção será automaticamente gerada no idioma pertinente, a partir dos +> objetivos de aprendizagem declarados em [`project.yml`](./project.yml), ao +> criar o repositório do projeto para uma coorte em particular usando +> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches). +> +> Aqui você pode ver uma [lista de todos os objetivos de aprendizagem](../../learning-objectives/data.yml) +> cobertos em nosso currículo. + *** ## 8. Guias, dicas e leituras complementares ### Primeiros passos -1. Antes de mais nada, se assegure de ter um bom :pencil: editor de texto, algo +1. Se assegure de ter um bom :pencil: editor de texto, algo como [Code](https://code.visualstudio.com/) ou [Atom](https://atom.io/). 2. Para executar os comandos você precisará de um :shell: UNIX Shell, que é um programa que interpreta linhas de comando (command-line interpreter) e também @@ -242,19 +254,8 @@ projeto. Escute com atenção e siga seus conselhos ! :) [![Dicas Cifra de César](https://img.youtube.com/vi/utiLWBXmNQU/0.jpg)](https://www.youtube.com/watch?v=utiLWBXmNQU) -Desenho da experiência do usuário (User Experience Design): - -* Ideação -* Prototipagem -* Teste e iteração - Desenvolvimento Front-end: -* Valores -* Tipos -* Variáveis -* Controle de fluxo -* Testes unitários * [Aprenda mais sobre `charCodeAt()`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) * [Aprenda mais sobre @@ -262,50 +263,15 @@ Desenvolvimento Front-end: * [Aprenda mais sobre `ASCII`](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm) * [Documentação do NPM](https://docs.npmjs.com/) +* Saiba mais sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects) e [como definir métodos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#definindo_m%C3%A9todos## 9. Considerar o feedback do projeto + +## 9. Considerar o feedback do projeto + +Em resumo, os critérios mínimos de aceitação do projeto para considerar o feedback do projeto: -Ferramentas: - -* [Terminal](https://www.loom.com/share/29a6cf0f3c5245bf995738284b706468) -* [Git config](https://www.loom.com/share/c7d445872b9f4618a24605fdcb26a48d) -* GitHub e GitHub Pages. - -Organização do trabalho: - -* [Agilidade](https://www.youtube.com/watch?v=vozsjbh4noU) -* [Scrum em menos de 2 minutos](https://www.youtube.com/watch?v=IKZHPjCQ2m8) -* [Scrum em detalhes](https://www.youtube.com/watch?v=mt2hM4yrPn0). Não - esperamos que você faça tudo isso neste projeto. Iremos aprofundando nesses - conceitos ao longo do _bootcamp_. -* [Guia em espanhol para a - cifra](https://docs.google.com/presentation/d/e/2PACX-1vTQ7-8LZDHrT4Y6AOBN72Nkfz1eJAeseBHpcHX8BSq0aFCFoZmuMjluMeyFNgK9ISKxTz0H03yGfJiT/pub?start=false&loop=false&delayms=60000) - -## 9. Checklist - -Essa seção é para te ajudar a ter um controle do que você precisa completar. - -### Parte Obrigatória - -* [ ] `README.md` adicionar informação sobre o processo e decisões do desenho. -* [ ] `README.md` explicar claramente quem são os usuários e as suas relações - com o produto. -* [ ] `README.md` explicar claramente como o produto soluciona os - problemas/necessidades dos usuários. -* [ ] Usar VanillaJS. -* [ ] Implementar `cipher.encode`. -* [ ] Implementar `cipher.decode`. -* [ ] Passar o linter com a configuração definida. -* [ ] Passar as provas unitárias. -* [ ] Testes unitários cobrindo 70% dos _statements_, _functions_ e _lines_, e - no mínimo 50% das _branches_. -* [ ] Interface que permita escolher o `offset` (chave de deslocamento) usava - para cifrar/decifrar. -* [ ] Interface que permita escrever um texto para ser cifrado. -* [ ] Interface que mostre o resultado da cifra corretamente. -* [ ] Interface que permita escrever um texto para ser decifrado. -* [ ] Interface que mostre o resultado decifrado corretamente. - -### Parte Opcional: "Hacker edition" - -* [ ] Cifrar/decifrar minúsculas. -* [ ] Cifrar/decifrar _outros_ caractéres (espaços, pontuação, `ç`, `á`, ...). -* [ ] Permitir usar `offset` negativo. +* [ ] Possui uma interface que permite ao usuário criptografar e descriptografar. +* [ ] O projeto será entregue incluindo testes unitários dos métodos `cipher` (`encode` e `decode`). +* [ ] O projeto será entregue livre de `eslint` _errors_ (_warnings_ ok). +* [ ] O projeto será entregue fazendo o upload do seu código para o GitHub. +* [ ] A interface será "implantada" usando o GitHub Pages. +* [ ] O README contém uma definição de produto. From 761199506740cfa229d99b92bd4878f31cf8085b Mon Sep 17 00:00:00 2001 From: ivy Date: Tue, 11 Oct 2022 20:41:26 -0500 Subject: [PATCH 4/7] dois -> 2 --- projects/01-cipher/README.pt-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/01-cipher/README.pt-BR.md b/projects/01-cipher/README.pt-BR.md index a59102795..0ed0a57a7 100644 --- a/projects/01-cipher/README.pt-BR.md +++ b/projects/01-cipher/README.pt-BR.md @@ -99,7 +99,7 @@ seu trabalho atenda aos objetivos principais. a cifra muda cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). * Veja o resultado da mensagem descriptografada. -**dois. Testes unitários dos métodos.** +**2. Testes unitários dos métodos.** Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes de unidade. **3. Código do seu projeto enviado para seu repositório e interface "implantado".** From ecf5718fb8e7cb930381d0ff873d383aff92e750 Mon Sep 17 00:00:00 2001 From: Ivy Feraco Date: Sat, 15 Oct 2022 17:29:35 -0500 Subject: [PATCH 5/7] Apply corrections de portugues from code review Co-authored-by: Monica Yamazaki <52083679+moniyama@users.noreply.github.com> --- projects/01-cipher/README.pt-BR.md | 44 +++++++++++++++--------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/projects/01-cipher/README.pt-BR.md b/projects/01-cipher/README.pt-BR.md index a59102795..ded5e2bcb 100644 --- a/projects/01-cipher/README.pt-BR.md +++ b/projects/01-cipher/README.pt-BR.md @@ -63,7 +63,7 @@ bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. ### Os objetivos gerais deste projeto são os seguintes -* Trabalho baseado em um clichê, a estrutura básica de um projeto em diferentes +* Trabalhar com base em um boilerplate, a estrutura básica de um projeto em diferentes pastas (através de módulos em JS). * Conhecer as ferramentas de manutenção e melhoria do código (linters e testes unitários). @@ -88,22 +88,22 @@ seu trabalho atenda aos objetivos principais. **1. Uma interface que deve permitir ao usuário:** * **Criptografar uma mensagem** - * Insira a mensagem (texto) que deseja criptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas e sem ñ). - * Escolha um número de deslocamento (_offset_) indicando quantas posições você deseja - a cifra muda cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). + * Inserir a mensagem (texto) que deseja criptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas). + * Escolher um número de deslocamento (_offset_) indicando quantas posições você deseja + que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). * Veja o resultado da mensagem criptografada. * **Descriptografar uma mensagem** - * Insira a mensagem (texto) que deseja descriptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas e sem ñ). - * Escolha um número de deslocamento (_offset_, que corresponde ao que usamos para criptografar) indicando quantas posições você deseja - a cifra muda cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). + * Inserir a mensagem (texto) que deseja descriptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas). + * Escolher um número de deslocamento (_offset_, que corresponde ao que usamos para criptografar) indicando quantas posições você deseja + que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). * Veja o resultado da mensagem descriptografada. -**dois. Testes unitários dos métodos.** - Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes de unidade. +**2. Testes unitários dos métodos.** + Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes unitários. -**3. Código do seu projeto enviado para seu repositório e interface "implantado".** - O código final deve ser carregado em um repositório no GitHub. A interface, ou página da web, deve ser "implantada" usando o GitHub Pages. +**3. Código do seu projeto enviado para seu repositório e interface "implantada".** + O código final deve estar um repositório no GitHub. A interface, ou página da web, deve ser "implantada" usando o GitHub Pages. **4. Um README contendo uma definição de produto.** No README, conte-nos como você pensou sobre os usuários e qual foi o seu processo para definir o produto final em nível de experiência e interface. Estas perguntas servem de guia: @@ -116,10 +116,10 @@ Com esses requisitos atendidos, você pode agendar um feedback do projeto com um ## 5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres -As partes "opcionais" destinam-se a permitir que você se aprofunde um pouco mais -os objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, decida +As partes opcionais permitem que você se aprofunde um pouco mais +nos objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, decida sabiamente se você quiser gastar o tempo aprofundando/refinando ou aprendendo coisas -novo para o próximo projeto. +novas no próximo projeto. O marco de critérios mínimos não menciona o que aconteceria com letras minúsculas e outros caracteres (como espaços, pontuação, ñ, ...). O _boilerplate_ inclui alguns _tests_ (comentados no início) que você pode usar como ponto de partida para implementar o suporte para esses casos adicionais. @@ -130,8 +130,8 @@ A lógica do projeto deve estar implementada inteiramente em JavaScript. Nesse projeto **NÃO** está permitido usar bibliotecas ou frameworks, só vanilla JavaScript. -Para iniciar este projeto você terá que fazer um _fork_ e _clone_ isso -repositório contendo um _boilerplate_ com testes. Um _boilerplate_ é a estrutura básica de um projeto que serve como ponto de partida com arquivos iniciais e configuração básica de dependências e testes. +Para iniciar este projeto você terá que fazer um _fork_ e _clone_ desse +repositório, que contém um _boilerplate_ com testes. Um _boilerplate_ é a estrutura básica de um projeto que serve como ponto de partida com arquivos iniciais e configuração básica de dependências e testes. Os testes unitários devem cobrir no mínimo de 70% dos _statements_, _functions_ e _lines_, e um mínimo de 50% de _branches_. O _boilerplate_ já contem o setup e @@ -201,7 +201,7 @@ Para este projeto, utilizaremos o Github Pages para essa finalidade. O comando `npm run deploy` pode te auxiliar nessa tarefa e você pode também consultar a [documentação oficial](https://docs.github.com/pt/pages). -## 3. Objetivos de aprendizagem +## 7. Objetivos de aprendizagem > ℹ️ Esta seção será automaticamente gerada no idioma pertinente, a partir dos > objetivos de aprendizagem declarados em [`project.yml`](./project.yml), ao @@ -263,15 +263,15 @@ Desenvolvimento Front-end: * [Aprenda mais sobre `ASCII`](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm) * [Documentação do NPM](https://docs.npmjs.com/) -* Saiba mais sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects) e [como definir métodos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#definindo_m%C3%A9todos## 9. Considerar o feedback do projeto +* Saiba mais sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects) e [como definir métodos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#definindo_m%C3%A9todos##) -## 9. Considerar o feedback do projeto +## 9. Para considerar o feedback do projeto -Em resumo, os critérios mínimos de aceitação do projeto para considerar o feedback do projeto: +Em resumo, os critérios mínimos de aceitação do projeto para considerar o Project Feedback: * [ ] Possui uma interface que permite ao usuário criptografar e descriptografar. * [ ] O projeto será entregue incluindo testes unitários dos métodos `cipher` (`encode` e `decode`). -* [ ] O projeto será entregue livre de `eslint` _errors_ (_warnings_ ok). -* [ ] O projeto será entregue fazendo o upload do seu código para o GitHub. +* [ ] O projeto será entregue livre de _erros_ de `eslint` (_warnings_ são ok). +* [ ] O código do seu projeto será entregue no GitHub. * [ ] A interface será "implantada" usando o GitHub Pages. * [ ] O README contém uma definição de produto. From cc492549c3c91122fb301e41f8b27fc5f4394104 Mon Sep 17 00:00:00 2001 From: ivy Date: Sat, 15 Oct 2022 17:35:26 -0500 Subject: [PATCH 6/7] small changes, omit va a costar --- projects/01-cipher/README.md | 7 +++---- projects/01-cipher/README.pt-BR.md | 6 ++---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/projects/01-cipher/README.md b/projects/01-cipher/README.md index 274538286..02e15e9f9 100644 --- a/projects/01-cipher/README.md +++ b/projects/01-cipher/README.md @@ -69,10 +69,9 @@ Como continuación del proyecto de preadmisión, volverás a trabajar sobre fund ## 3. Consideraciones generales * Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints. -* Enfócate en aprender y no solamente en "completar" el proyecto. Te va a costar. +* Enfócate en aprender y no solamente en "completar" el proyecto. * Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que _todavía_ no entiendas. Irás aprendiendo. - ## 4. Hito: Criterios de aceptación mínimos del proyecto Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales. @@ -108,7 +107,7 @@ Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach. ## 5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres -Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre +Las partes opcionales tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas nuevas en el siguiente proyecto. @@ -209,7 +208,7 @@ El comando `npm run deploy` puede ayudarte con esta tarea y también puedes ## 8. Pistas, tips y lecturas complementarias -### Prepara tu PC para trabajar. +### Prepara tu PC para trabajar 1. Asegúrate de tener un :pencil: editor de texto en condiciones, algo como [Atom](https://atom.io/) o diff --git a/projects/01-cipher/README.pt-BR.md b/projects/01-cipher/README.pt-BR.md index ded5e2bcb..efc66beee 100644 --- a/projects/01-cipher/README.pt-BR.md +++ b/projects/01-cipher/README.pt-BR.md @@ -10,7 +10,7 @@ * [6. Considerações técnicas](#6-considerações-técnicas) * [7. Objetivos de aprendizagem](#7-objetivos-de-aprendizagem) * [8. Guias, dicas e leituras complementares](#8-guias-dicas-e-leituras-complementares) -* [9. Considerar o feedback do projeto](#9-considerar-o-feedback-do-projeto) +* [9. Para considerar o feedback do projeto](#9-para-considerar-o-feedback-do-projeto) *** @@ -72,10 +72,8 @@ bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. ## 3. Considerações gerais -## 4. Considerações gerais - * Resolvemos este projeto individualmente. Recomendamos uma duração de 1-3 sprints. -* Concentre-se em aprender e não apenas "concluir" o projeto. Vai te custar. +* Concentre-se em aprender e não apenas "concluir" o projeto. * Sugerimos que você não tente saber tudo antes de começar a codificar. Não se preocupe muito agora com o que você _ainda_ não entende. Você vai aprender. From 1052d301e8016a7427ffdd6de95989884e332da2 Mon Sep 17 00:00:00 2001 From: ivy Date: Sat, 15 Oct 2022 17:49:53 -0500 Subject: [PATCH 7/7] mdlint corrections --- projects/01-cipher/README.md | 132 ++++++++++++++++++----------- projects/01-cipher/README.pt-BR.md | 88 +++++++++++-------- 2 files changed, 136 insertions(+), 84 deletions(-) diff --git a/projects/01-cipher/README.md b/projects/01-cipher/README.md index 02e15e9f9..de830fc78 100644 --- a/projects/01-cipher/README.md +++ b/projects/01-cipher/README.md @@ -44,12 +44,12 @@ aplicación en el sistema ROT13. ## 2. Resumen del proyecto En este proyecto crearás una aplicación web que servirá para que tu usuaria -pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento específico de -caracteres (_offset_). Lo harás utilizando HTML, CSS y JavaScript. +pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento +específico de caracteres (_offset_). Lo harás utilizando HTML, CSS y JavaScript. -La temática es libre. Piensa en qué situaciones se necesitaría cifrar un mensaje. Decide -cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, etc.) -Algunas ideas de ejemplo: +La temática es libre. Piensa en qué situaciones se necesitaría cifrar un mensaje. +Decide cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, +colores, etc.) Algunas ideas de ejemplo: * Crear claves seguras para el email. * Encriptar/cifrar una tarjeta de crédito. @@ -57,63 +57,86 @@ Algunas ideas de ejemplo: una zona de conflicto. * Mensajería secreta para parejas. -Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS. Mientras desarrollas este proyecto, te familiarizarás con nuevos conceptos también. +Como continuación del proyecto de preadmisión, volverás a trabajar sobre +fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, +y funciones, así como eventos y manipulación básica del DOM, fundamentos de +HTML y CSS. Mientras desarrollas este proyecto, te familiarizarás con nuevos +conceptos también. ### Los objetivos generales de este proyecto son los siguientes -* Trabajar en base a un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través modulos en JS). -* Conocer las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias). -* Aprender sobre objetos, estructuras, métodos e iteración (bucles) en JavaScript +* Trabajar en base a un boilerplate, la estructura básica de un proyecto en + distintas carpetas (a través modulos en JS). +* Conocer las herramientas de mantenimiento y mejora del código (linters y + pruebas unitarias). +* Aprender sobre objetos, estructuras, métodos e iteración (bucles) + en JavaScript * Implementar control de versiones con git (y la plataforma github) ## 3. Consideraciones generales -* Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints. +* Este proyecto lo resolvemos de manera individual. Te recomendamos una + duracion de 1-3 sprints. * Enfócate en aprender y no solamente en "completar" el proyecto. -* Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que _todavía_ no entiendas. Irás aprendiendo. +* Te sugerimos que no intentes saberlo todo antes de empezar a codear. + No te preocupes demasiado ahora por lo que _todavía_ no entiendas. + Irás aprendiendo. -## 4. Hito: Criterios de aceptación mínimos del proyecto +## 4. Hito: Criterios de aceptación mínimos del proyecto -Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales. +Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo +cubra los objetivos principales. **1. Una interfaz que debe permitir a la usuaria:** - * **Cifrar un mensaje** - * Insertar el mensaje (texto) que quiere cifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ). - * Elegir un numero de desplazamiento (_offset_) indicando cuántas posiciones quieres que - el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer). - * Ver el resultado del mensaje cifrado. - - * **Descifrar un mensaje** - * Insertar el mensaje (texto) que quieres descifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ). - * Elegir un numero desplazamiento (_offset_, que corresponda al que usamos para cifrar) indicando cuántas posiciones quieres que - el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer). - * Ver el resultado del mensaje descifrado. +* **Cifrar un mensaje** + - Insertar el mensaje (texto) que quiere cifrar. El mensaje usa alfabeto + simplificado (solamente mayúsculas y sin ñ). + - Elegir un numero de desplazamiento (_offset_) indicando cuántas + posiciones quieres que el cifrado desplace cada caracter en el alfabeto. + El numero sera positivo y entero (positive integer). + - Ver el resultado del mensaje cifrado. + +* **Descifrar un mensaje** + - Insertar el mensaje (texto) que quieres descifrar. El mensaje usa alfabeto + simplificado (solamente mayúsculas y sin ñ). + - Elegir un numero desplazamiento (_offset_, que corresponda al que usamos + para cifrar) indicando cuántas posiciones quieres que + el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y + entero (positive integer). + - Ver el resultado del mensaje descifrado. **2. Pruebas unitarios de los métodos.** - Los metódos de `cipher` (`encode` y `decode`) deben tener cobertura con pruebas unitarias. +Los metódos de `cipher` (`encode` y `decode`) deben tener cobertura con +pruebas unitarias. **3. Código de tu proyecto subido a tu repo y interfaz "desplegada".** - El código final debe estar subido en un repositorio en GitHub. La interfaz o pagina web, debe ser "desplegada" usando GitHub Pages. +El código final debe estar subido en un repositorio en GitHub. +La interfaz o pagina web, debe ser "desplegada" usando GitHub Pages. **4. Un README que contiene una definición del producto.** - En el README cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso para definir el producto final a nivel de experiencia y de interfaz. Estas preguntas sirven como guia: +En el README cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso +para definir el producto final a nivel de experiencia y de interfaz. Estas +preguntas sirven como guia: - * Quiénes son los principales usuarios de producto. - * Cuáles son los objetivos de estos usuarios en relación con tu producto. - * Cómo crees que el producto que estás creando está resolviendo sus problemas. +* Quiénes son los principales usuarios de producto +* Cuáles son los objetivos de estos usuarios en relación con tu producto +* Cómo crees que el producto que estás creando está resolviendo sus problemas Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach. ## 5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres -Las partes opcionales tienen como intención permitirte profundizar un poco más sobre -los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide -sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas -nuevas en el siguiente proyecto. +Las partes opcionales tienen como intención permitirte profundizar un poco más +sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y +contras, decide sabiamente si quieres invertir el tiempo en profundizar/ +perfeccionar o aprender cosas nuevas en el siguiente proyecto. -El hito de los críterios mínimos no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El _boilerplate_ incluye algunos _tests_ (comentados en principio) que -puedes usar como punto de partida para implementar el soporte para estos casos adicionales. +El hito de los críterios mínimos no menciona qué pasaría con las letras +minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). +El _boilerplate_ incluye algunos _tests_ (comentados en principio) +que puedes usar como punto de partida para implementar el soporte para +estos casos adicionales. ## 6. Consideraciones técnicas @@ -122,7 +145,9 @@ este proyecto NO está permitido usar librerías o frameworks, solo JavaScript p también conocido como Vanilla JavaScript. Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este -repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ es la estructura basica de un proyecto que sirve como un punto de partida con archivos inicial y configuración basica de dependencias y tests. +repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ +es la estructura basica de un proyecto que sirve como un punto de partida con +archivos inicial y configuración basica de dependencias y tests. Los tests unitarios deben cubrir un mínimo del 70% de _statements_, _functions_ y _lines_, y un mínimo del 50% de _branches_. El _boilerplate_ ya contiene el @@ -152,13 +177,14 @@ El boilerplate que les damos contiene esta estructura: ### Descripción de scripts / archivos -* `README.md`: debe explicar la información necesaria para el uso de tu aplicación web, - así como una introducción a la aplicación, su funcionalidad y decisiones de - diseño que tomaron. +* `README.md`: debe explicar la información necesaria para el uso de + tu aplicación web, así como una introducción a la aplicación, + su funcionalidad y decisiones de diseño que tomaron. * `src/index.html`: este es el punto de entrada a tu aplicación. Este archivo debe contener tu _markup_ (HTML) e incluir el CSS y JavaScript necesario. -* `src/style.css`: este archivo debe contener las reglas de estilo. Queremos que escribas tus -propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc). +* `src/style.css`: este archivo debe contener las reglas de estilo. + Queremos que escribas tus propias reglas, por eso NO está permitido el uso + de frameworks de CSS (Bootstrap, Materialize, etc). * `src/cipher.js`: acá debes implementar el objeto `cipher`, el cual ya está _exportado_ en el _boilerplate_. Este objeto (`cipher`) debe contener dos métodos: @@ -193,7 +219,7 @@ En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. El comando `npm run deploy` puede ayudarte con esta tarea y también puedes consultar su [documentación oficial](https://docs.github.com/es/pages). - + *** ## 7. Objetivos de aprendizaje @@ -242,10 +268,13 @@ El comando `npm run deploy` puede ayudarte con esta tarea y también puedes ### Recursos y temas relacionados -Súmate al canal de Slack [#project-cipher](https://claseslaboratoria.slack.com/archives/C03LJSH6R7D) para conversar y pedir ayuda del proyecto. +Súmate al canal de Slack +[#project-cipher](https://claseslaboratoria.slack.com/archives/C03LJSH6R7D) +para conversar y pedir ayuda del proyecto. -A continuación un video que te lleva a través de la fórmula matemática del Cifrado César -y un par de cosas más que debes saber para resolver este proyecto. La fórmula no es lo iportante del proyecto, no te confundas. +A continuación un video que te lleva a través de la fórmula matemática del +Cifrado Césary un par de cosas más que debes saber para resolver este proyecto. +La fórmula no es lo importante del proyecto, no te confundas. [![tips caesar cipher](https://img.youtube.com/vi/zd8eVrXhs7Y/0.jpg)](https://www.youtube.com/watch?v=zd8eVrXhs7Y) @@ -266,7 +295,8 @@ Desarrollo Front-end: * [Aprende más sobre `charCodeAt()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt) * [Aprende más sobre `String.fromCharCode()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode) * [Aprende más sobre `ASCII`](http://conceptodefinicion.de/ascii/) -* Aprende más sobre [objetos](https://es.javascript.info/object) y [como definir métodos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects#definici%C3%B3n_de_m%C3%A9todos) +* Aprende más sobre [objetos](https://es.javascript.info/object) y + [como definir métodos](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects#definici%C3%B3n_de_m%C3%A9todos) * [Documentación de NPM](https://docs.npmjs.com/) Organización del Trabajo: @@ -281,11 +311,13 @@ Organización del Trabajo: ## 9. Para considerar Project Feedback -En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback: +En resumen, los criterios de aceptación mínimos del proyecto para considerar +Project Feedback: * [ ] Tiene una interfaz que permite a la usuaria cifrar y descifrar. -* [ ] El proyecto será entregado incluyendo pruebas unitarios de los métodos de `cipher` (`encode` y `decode`). +* [ ] El proyecto será entregado incluyendo pruebas unitarios de los métodos de `cipher` +(`encode` y `decode`). * [ ] El proyecto será entregado libre de _errores_ de `eslint` (_warnings_ son ok). * [ ] El proyecto será entregado subiendo tu código a GitHub. -* [ ] La interfaz será "desplegada" usando GitHub Pages. +* [ ] La interfaz será "desplegada" usando GitHub Pages. * [ ] El README contiene una definición del producto. diff --git a/projects/01-cipher/README.pt-BR.md b/projects/01-cipher/README.pt-BR.md index efc66beee..2e7382c76 100644 --- a/projects/01-cipher/README.pt-BR.md +++ b/projects/01-cipher/README.pt-BR.md @@ -42,8 +42,9 @@ a cifra de Vigenère, e tem aplicação no sistema ROT13. ## 2. Resumo do projeto Neste projeto você criará a primeira aplicação web do _bootcamp_. Nela o usuário -poderá cifrar e decifrar um texto no navegador indicando um deslocamento específico de -caracteres (_offset_). Você fará isso usando HTML, CSS e JavaScript. +poderá cifrar e decifrar um texto no navegador indicando um deslocamento +específico de caracteres (_offset_). Você fará isso usando HTML, CSS e +JavaScript. O tema é livre. Você deve pensar em alguma situação de vida real em que seja necessário cifrar uma mensagem e pensar em como deve ser a experiência do @@ -58,7 +59,7 @@ exemplo: Como continuação do projeto de pré-admissão, você retrabalhará os fundamentos do JavaScript, incluindo conceitos como variáveis, condicionais e funções, -bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. +bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. desenvolver este projeto, você também se familiarizará com novos conceitos. ### Os objetivos gerais deste projeto são os seguintes @@ -74,7 +75,7 @@ bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. * Resolvemos este projeto individualmente. Recomendamos uma duração de 1-3 sprints. * Concentre-se em aprender e não apenas "concluir" o projeto. -* Sugerimos que você não tente saber tudo antes de começar a codificar. +* Sugerimos que você não tente saber tudo antes de começar a codificar. Não se preocupe muito agora com o que você _ainda_ não entende. Você vai aprender. @@ -85,42 +86,55 @@ seu trabalho atenda aos objetivos principais. **1. Uma interface que deve permitir ao usuário:** - * **Criptografar uma mensagem** - * Inserir a mensagem (texto) que deseja criptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas). - * Escolher um número de deslocamento (_offset_) indicando quantas posições você deseja - que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). - * Veja o resultado da mensagem criptografada. - - * **Descriptografar uma mensagem** - * Inserir a mensagem (texto) que deseja descriptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas). - * Escolher um número de deslocamento (_offset_, que corresponde ao que usamos para criptografar) indicando quantas posições você deseja - que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo). - * Veja o resultado da mensagem descriptografada. +* **Criptografar uma mensagem** + - Inserir a mensagem (texto) que deseja criptografar. A mensagem usa um + alfabeto simplificado (apenas letras maiúsculas). + - Escolher um número de deslocamento (_offset_) indicando quantas posições + você deseja que a cifra desloque cada caractere do alfabeto. O número + será positivo e inteiro (inteiro positivo). + - Veja o resultado da mensagem criptografada. + +* **Descriptografar uma mensagem** + - Inserir a mensagem (texto) que deseja descriptografar. A mensagem usa um + alfabeto simplificado (apenas letras maiúsculas). + - Escolher um número de deslocamento (_offset_, que corresponde ao que usamos + para criptografar) indicando quantas posições você deseja que a cifra + desloque cada caractere do alfabeto. O número será positivo e inteiro + (inteiro positivo). + - Veja o resultado da mensagem descriptografada. **2. Testes unitários dos métodos.** - Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes unitários. +Os métodos `cipher` (`encode` e `decode`) devem ser cobertos por testes +unitários. **3. Código do seu projeto enviado para seu repositório e interface "implantada".** - O código final deve estar um repositório no GitHub. A interface, ou página da web, deve ser "implantada" usando o GitHub Pages. +O código final deve estar um repositório no GitHub. A interface, ou página da +web, deve ser "implantada" usando o GitHub Pages. **4. Um README contendo uma definição de produto.** - No README, conte-nos como você pensou sobre os usuários e qual foi o seu processo para definir o produto final em nível de experiência e interface. Estas perguntas servem de guia: +No README, conte-nos como você pensou sobre os usuários e qual foi o seu +processo para definir o produto final em nível de experiência e interface. +Estas perguntas servem de guia: - * Quem são os principais usuários do produto. - * Quais são os objetivos desses usuários em relação ao seu produto. - * Como você acha que o produto que você está criando está resolvendo seus problemas. +* Quem são os principais usuários do produto +* Quais são os objetivos desses usuários em relação ao seu produto +* Como você acha que o produto que você está criando está resolvendo seus + problemas -Com esses requisitos atendidos, você pode agendar um feedback do projeto com um coach. +Com esses requisitos atendidos, você pode agendar um feedback do projeto com +um coach. ## 5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres As partes opcionais permitem que você se aprofunde um pouco mais -nos objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, decida -sabiamente se você quiser gastar o tempo aprofundando/refinando ou aprendendo coisas -novas no próximo projeto. +nos objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, +decida sabiamente se você quiser gastar o tempo aprofundando/refinando ou +aprendendo coisas novas no próximo projeto. -O marco de critérios mínimos não menciona o que aconteceria com letras minúsculas e outros caracteres (como espaços, pontuação, ñ, ...). O _boilerplate_ inclui alguns _tests_ (comentados no início) que -você pode usar como ponto de partida para implementar o suporte para esses casos adicionais. +O marco de critérios mínimos não menciona o que aconteceria com letras +minúsculas e outros caracteres (como espaços, pontuação, ...). O _boilerplate_ +inclui alguns _tests_ (comentados no início) que você pode usar como ponto +de partida para implementar o suporte para esses casos adicionais. ## 6. Considerações técnicas @@ -129,11 +143,13 @@ projeto **NÃO** está permitido usar bibliotecas ou frameworks, só vanilla JavaScript. Para iniciar este projeto você terá que fazer um _fork_ e _clone_ desse -repositório, que contém um _boilerplate_ com testes. Um _boilerplate_ é a estrutura básica de um projeto que serve como ponto de partida com arquivos iniciais e configuração básica de dependências e testes. +repositório, que contém um _boilerplate_ com testes. Um _boilerplate_ é a +estrutura básica de um projeto que serve como ponto de partida com arquivos +iniciais e configuração básica de dependências e testes. Os testes unitários devem cobrir no mínimo de 70% dos _statements_, _functions_ -e _lines_, e um mínimo de 50% de _branches_. O _boilerplate_ já contem o setup e -configurações necessárias para executar os testes assim como _code coverage_ +e _lines_, e um mínimo de 50% de _branches_. O _boilerplate_ já contem o setup +e configurações necessárias para executar os testes assim como _code coverage_ para ver o nível de cobertura dos testes usando o comando `npm test`. O _boilerplate_ que fornecemos contém esta estrutura: @@ -261,14 +277,18 @@ Desenvolvimento Front-end: * [Aprenda mais sobre `ASCII`](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm) * [Documentação do NPM](https://docs.npmjs.com/) -* Saiba mais sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects) e [como definir métodos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#definindo_m%C3%A9todos##) +* Saiba mais sobre [objetos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects) + e [como definir métodos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#definindo_m%C3%A9todos##) ## 9. Para considerar o feedback do projeto -Em resumo, os critérios mínimos de aceitação do projeto para considerar o Project Feedback: +Em resumo, os critérios mínimos de aceitação do projeto para considerar o +Project Feedback: -* [ ] Possui uma interface que permite ao usuário criptografar e descriptografar. -* [ ] O projeto será entregue incluindo testes unitários dos métodos `cipher` (`encode` e `decode`). +* [ ] Possui uma interface que permite ao usuário criptografar e + descriptografar. +* [ ] O projeto será entregue incluindo testes unitários dos métodos `cipher` + (`encode` e `decode`). * [ ] O projeto será entregue livre de _erros_ de `eslint` (_warnings_ são ok). * [ ] O código do seu projeto será entregue no GitHub. * [ ] A interface será "implantada" usando o GitHub Pages.