-
Notifications
You must be signed in to change notification settings - Fork 460
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
translate(cipher): Add portuguese README
- Loading branch information
1 parent
c362e5a
commit 090efa0
Showing
1 changed file
with
360 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,360 @@ | ||
| # Cifra de César | ||
|
|
||
| ## Índice | ||
|
|
||
| * [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-criterios-de-aceitação-mínimos-do-projeto) | ||
| * [6. Hacker edition](#6-hacker-edition) | ||
| * [7. Considerações técnicas](#7-considerações-técnicas) | ||
| * [8. Avaliação](#8-avaliação) | ||
| * [9. Guias, dicas e leituras | ||
| completares](#9-guias-dicas-e-leituras-completares) | ||
| * [10. Checklist](#10-checklist) | ||
|
|
||
| *** | ||
|
|
||
| ## 1. Prefácio | ||
|
|
||
| Cifar significa codificar. A [cifra de | ||
| César](https://pt.wikipedia.org/wiki/Cifra_de_C%C3%A9sar) é um dos primeiros | ||
| tipos de criptografias conhecidos na história. O imperador romano Júlio César | ||
| utilizava essa cifra para enviar ordens secretas aos seus generais no campo de | ||
| batalha. | ||
|
|
||
|  | ||
|
|
||
| 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 | ||
| (deslocamento) mais a frente do mesmo alfabeto. | ||
|
|
||
| Por exemplo se usarmos o deslocamento (_offset_) de 3 posições: | ||
|
|
||
| * Alfabeto sem cifrar: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z | ||
| * Alfabeto com cifra: D E F G H I J K L M N O P Q R S T U V W X Y Z A B C | ||
| * A letra A será D | ||
| * A palavra CASA será FDVD | ||
|
|
||
| Atualmente todas as cifras de substituição alfabética simples, são descifradas | ||
| com facilidade e não oferecem muita segurança na comunição, mas a cifra de César | ||
| muitas vezes pode fazer parte de um sistema mais complexo de criptografia, como | ||
| a cifra de Vigenère, e tem aplicação no sistema ROT13. | ||
|
|
||
| ## 2. Resumo do projeto | ||
|
|
||
| O que eu tenho que fazer exatamente? Neste projeto você criará a primeira | ||
| aplicação web do _bootcamp_. Nela o usuário poderá cifrar e descrifrar um texto | ||
| indicando a chave de deslocamento (_offset_). | ||
|
|
||
| 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 de uso (a | ||
| tela, explicações, mensagens, cores, marca?, etc.). Algumas ideias de exemplo: | ||
|
|
||
| * Mensagens secretas para alguma pessoa. | ||
| * Ferramenta de mensagens internas de uma organização em uma zona de conflito. | ||
| * Cifrar cartões de crédito. | ||
| * Criar senhas seguras para email. | ||
|
|
||
| ## 3. Objetivos de aprendizagem | ||
|
|
||
| Neste projeto você aprenderá a contruir uma aplicação web que interaja com o | ||
| usuário através do navegador e a lógica para essa interação. Em outras palavras, | ||
| você aprenderá: | ||
|
|
||
| * Desenhar elementos de formulário em uma tela usando **HTML** e **CSS**. | ||
| * Permitir o usuário interagir com elementos do DOM e fazer com que a aplicação | ||
| responda (cifra/descifrar) quando ocorrer os **eventos de DOM**. | ||
| * Manipular _strings_ (cadeias de texto). | ||
| * Usar **controle de fluxo** (laços, condicionais, ...). | ||
| * Atualizar a tela com os resutados (**manipular o DOM**). | ||
| * **Implementar funções** dada uma descrição de comportamento. | ||
| * Verificar a sua implementação com **provas unitárias**. | ||
| * Entender as **necessidades do usuário** e propor soluções. | ||
| * Organize o seu tempo e priorize tarefas em um ambiente de **alta incerteza**. | ||
|
|
||
| ## 4. Considerações gerais | ||
|
|
||
| * 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. | ||
|
|
||
| ## 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 | ||
|
|
||
| No README.md, escreva como você pensou sobre a usuária e qual foi o processo | ||
| para definir o produto final a nível de expriência e interface. | ||
|
|
||
| * 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 | ||
|
|
||
| ### Interface do usuário (UI) | ||
|
|
||
| A interface deve permitir ao usuário: | ||
|
|
||
| * Eleger um _offset_ indicando quantas posições de deslocamento de caracteres | ||
| queremos que a cifra utilize. | ||
| * Inserir uma mensagem (texto) que queremos cifrar. | ||
| * Ver o resultado da mensagem cifrada. | ||
| * Inserir uma mensagem (text) para ser decifrada. | ||
| * Ver o resultado da mensagem decifrada. | ||
|
|
||
| ### 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 deve estar | ||
| _exportado_ no objeto global (`window`). 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 quemos 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()`. | ||
| * `test/cipher.spec.js`: este arquivo contem alguns testes de exemplo e aqui | ||
| você deve implementar os testes para `cipher.encode()` e `cipher.decode()`. | ||
|
|
||
| ## 6. Hacker Edition | ||
|
|
||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| Também não foi mencionado o que aconteceria com _offset_ negativo. Como parte da | ||
| hacker edition te convidamos a explorar esse caso sozinha. | ||
|
|
||
| ## 7. Considerações técnicas | ||
|
|
||
| A lógica do projeto deve estar implementada inteiramente em JavaScript(ES6). | ||
| Nesse projeto **NÃO** está permitido usar bibliotecas ou frameworks, só vanilla | ||
| JavaScript. | ||
|
|
||
| Você não deve usar o _pseudo-variable_ `this`. | ||
|
|
||
| Os testes unitários devem cubrir 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: | ||
|
|
||
| ```text | ||
| ./ | ||
| ├── .editorconfig | ||
| ├── .eslintrc | ||
| ├── .gitignore | ||
| ├── README.md | ||
| ├── package.json | ||
| ├── src | ||
| │ ├── cipher.js | ||
| │ ├── index.html | ||
| │ ├── index.js | ||
| │ └── style.css | ||
| └── test | ||
| ├── cipher.spec.js | ||
| ├── headless.js | ||
| └── index.html | ||
| ``` | ||
|
|
||
| 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 | ||
| automaticamente antes de executar os testes quando usamos o comando `npm run | ||
| test`. | ||
|
|
||
| No caso do `JavaScript` estamos usando o `eslint` que está configurado no | ||
| arquivo `.eslintrc` que contem o mínimo de informação como versão do | ||
| JavaScript/ECMAScript, o ambiente (_browser_ nesse caso) e as [regras | ||
| recomendadas (`"eslint:recommended"`)](https://eslint.org/docs/rules/). | ||
|
|
||
| Nas regras/guias de estilo usaremos das recomandações padrão tanto para o | ||
| `eslint` quanto `htmlhint`. | ||
|
|
||
| ## 8. Avaliação | ||
|
|
||
| OBS: Esta seção inclui uma lista de habilidades que será levada em conta na hora | ||
| de avaliar o projeto. O níveis _esperados_ são níveis _guias_ no desenha | ||
| curricular, não são regras absolutas. | ||
|
|
||
| Te aconselhamos revisar a [nossa | ||
| rubrica](https://docs.google.com/spreadsheets/d/1hwyBoJWbA0MHGEMDLKqftIv64IhA1uKe2kmJhYpir4s/edit#gid=1789463812) | ||
| para ver a descrição detalhada de cada _habilidade_ e _nível_. Te recomandamos | ||
| também que trate de se auto aplicar a rubrica e nos projetos das suas | ||
| companheiras ao longo do Bootcamp para acopanhar o sua evolução. | ||
|
|
||
| ### Soft Skills | ||
|
|
||
| | Habilidade | Nível esperado | | ||
| |-------------------------------------------------|----------------| | ||
| | Planejamento e administração do tempo | 2 | | ||
| | Autoaprendizado | 2 | | ||
| | Apresentações | 2 | | ||
| | Adaptabilidade | 2 | | ||
| | Solução de problemas | 2 | | ||
| | Resposabilidade | 2 | | ||
| | Dar e receber feedback | 2 | | ||
| | Comunicação eficaz | 2 | | ||
|
|
||
| ### Tech Skills | ||
|
|
||
| | Habilidade | Nível esperado | | ||
| |-----------------------------------------|----------------| | ||
| | **Computer Science (CS)** | | ||
| | Lógica / Algoritmos | 1 | | ||
| | Arquitetura | 1 | | ||
| | **Source Code Management (SCM)** | | ||
| | Git | 1 | | ||
| | GitHub | 2 | | ||
| | **JavaScript** | | ||
| | Estilo (linter js) | 2 | | ||
| | Nomenclatura / semântica | 2 | | ||
| | Uso de funções / modularidade | 1 | | ||
| | Testes | 2 | | ||
| | **HTML/CSS** | | ||
| | Exatidão / Validação | 2 | | ||
| | Estilo (linter html) | 3 | | ||
| | Semântica / Arquitetura de Informação | 2 | | ||
| | DRY (CSS) | 2 | | ||
| | Responsive Web Design | 2 | | ||
|
|
||
| ### UX Skills | ||
|
|
||
| | Habilidade | Nível esperado | | ||
| |-----------------|----------------| | ||
| | User Centricity | 2 | | ||
|
|
||
| *** | ||
|
|
||
| ## 9. Guias, dicas e leituras completares | ||
|
|
||
| ### Primeros pasos | ||
|
|
||
| 1. Antes de mais nada, 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 comando você precisará de um :shell: UNIX Shell, que é um | ||
| programa que interpreta linhas de comando (command-line interpreter) e também | ||
| deve ter git instalado. Se você usa um sistema operacional "UNIX-like", como | ||
| GNU/Linux ou MacOS, você já tem um _shell_ (terminal) instalado (e | ||
| provavelmente o `git` também). Se você usa Windows você pode usar o [Git | ||
| bash](https://git-scm.com/download/win), embora seja recomendado que você | ||
| teste :penguin: GNU/Linux. | ||
| 3. Faça seu próprio :fork_and_knife: | ||
| [fork](https://help.github.com/articles/fork-a-repo/) do repositório. Seus | ||
| _mentores_ compartilharão com você um _link_ para um repositório privado e te | ||
| darão acesso a este repositório. | ||
| 4. :arrow_down: [Clone](https://help.github.com/articles/cloning-a-repository/) | ||
| o _fork_ para seu computador (cópia local). | ||
| 5. 📦 Instale as dependências do projeto rodando o comando `npm install`. Mas | ||
| antes disso tenha certeza de ter instalado o [Node.js](https://nodejs.org/) | ||
| (que inclui o [npm](https://docs.npmjs.com/)). | ||
| 6. Se tudo foi bem, você deve conseguir executar os :traffic_light: testes | ||
| unitários com o comando `npm test`. | ||
| 7. Para ver a interface do seu programa no navegador, use o comando `npm start` | ||
| para iniciar o servidor web e entre na url `http://localhost:5000` no seu | ||
| navegador. | ||
| 8. Let's Code! :rocket: | ||
|
|
||
| ### Recursos extras | ||
|
|
||
| A seguir um vídeo do Daniel que te ajudará a entender a fórmula matemática usada | ||
| pela Cifra de César e algumas coisas mais que deve saber para resolver o seu | ||
| projeto. Escute com atenção e siga seus conselhos ! :) | ||
|
|
||
| [](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 | ||
| `String.fromCharCode()`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode) | ||
| * [Aprenda mais sobre | ||
| `ASCII`](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm) | ||
| * [Documentação do NPM](https://docs.npmjs.com/) | ||
|
|
||
| Ferramentas: | ||
|
|
||
| * GitHub y 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) | ||
|
|
||
| ## 10. 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. | ||
| * [ ] Use VanillaJS. | ||
| * [ ] **Não** use `this`. | ||
| * [ ] Implemente `cipher.encode`. | ||
| * [ ] Implemente `cipher.decode`. | ||
| * [ ] Passe o linter com a configuração definida. | ||
| * [ ] Passe as provas unitárias. | ||
| * [ ] Teste unitários cubrindo 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/descifrar. | ||
| * [ ] 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 descifrado. | ||
| * [ ] Interface que mostre o resultado descifrado corretamente. | ||
|
|
||
| ### Parte Opcional: "Hacker edition" | ||
|
|
||
| * [ ] Cifrar/descifrar minúsculas. | ||
| * [ ] Cifrar/descifrar _outros_ caractéres (espações, pontuação, `ç`, `á`, ...). | ||
| * [ ] Permitir usar `offset` negativo. |