Acesse o deploy aqui

Cifra de César

1. Prefácio

Cifrar significa codificar. A cifra de César é um dos primeiros tipos de criptografias conhecidas 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

2. Resumo do projeto

O objetivo deste projeto foi criar uma aplicação web que permita ao usuário cifrar e decifrar uma menssagem, a partir da escolha de uma chave de deslocamento. Ela seria entregue às escolas, que a disponibilizariam aos seus alunos, para poderem utilizar caso eles estivessem sofrendo bullying ou algum tipo de abuso em casa.

Com interface intuitiva e discreta, a aplicação não expõe sua real função a quem utilizar. Isso foi feito se pensando na possibilidade de eventuais abusadores se depararem com ela. Com isso, o aluno poderia simplesmente dizer que é um joguinho ou alguma plataforma para fazer um trabalho escolar, e assim, não sofrer consequências negativas.

Com essa aplicação web, espera-se que os alunos consigam pedir ajuda e expor o que está acontecendo com eles, e que as escolas possam tomar as devidas providências e evitar que algo pior aconteça.

O nome "It's cool" foi uma brincadeira com sua pronúncia, pois ela se assemelha à palavra "school", que significa escola.

3. Protótipo do projeto

4. Processo de desenvolvimento do produto

• Levantamento de questões sociais
• Escolha do tema
• Escolha do público alvo
• Planejamento
• Criação do protótipo
• Estudo do conteúdo proposto
• Codificação
• Testagem
• Deploy - Git Pages

5. Considerações técnicas

Linguagens utilizadas: JavaScript | HTML5 | CSS3

Programas/Plataformas utilizadas: VSCode (codificação) | Figma (protótipo) | Trello (planejamento) | Canva (imagem de fundo)

6. Implementações futuras

• Reconhecer espaços
• Aceitar caracteres especiais

7. Objetivos de aprendizagem

HTML

• Uso de HTML semântico

  Links

  • HTML semântico
  • Semantics in HTML - MDN

CSS

• Uso de seletores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caixa (box model): borda, margem, preenchimento

  Links

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de seletores de DOM

  Links

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Manipulação de eventos de DOM (listeners, propagação, delegação)

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • Objeto Event

• Manipulação dinâmica de DOM

  Links

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de dados primitivos

  Links

  • Valores Primitivos - MDN

• Strings (cadeias de caracteres)

  Links

  • Strings
  • String — Cadeia de caracteres - MDN

• Variáveis (declaração, atribuição, escopo)

  Links

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)

  Links

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (while, for, for..of)

  Links

  • Laços (Loops)
  • Laços e iterações - MDN

• Funções (params, args, return)

  Links

  • Funções (controle de fluxo)
  • Funções clássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários (unit tests)

  Links

  • Introdução ao Jest - Documentação oficial

• Módulos de ECMAScript (ES modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descritivos (Nomenclatura e Semântica)

Controle de Versões (Git e GitHub)

• Git: Instalação e configuração

• Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)

• GitHub: Criação de contas e repositórios, configuração de chave SSH

• GitHub: Implantação com GitHub Pages

  Links

  • Site oficial do GitHub Pages

Centrado no usuário

• Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro

Design de produto

• Criar protótipos para obter feedback e iterar

• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)